A guided tour of the panel

Fifteen stops through the real RespireCloud panel, captured from a lab install. Move with the buttons or the arrow keys; every step has its own link.

Prefer a live walkthrough? Request a demo

Step 1 of 15

Set up in one step

The RespireCloud setup screen asking for the setup token and a new administrator password.

The installer leaves a one-time setup token on the server. Paste it, choose a password and you are the first administrator. Nobody who can only reach the web page can claim the panel.

  1. The token comes from the server itself: cat /etc/respirecloud/bootstrap.token.
  2. Creates the first administrator. This screen never appears again.

Step 2 of 15

Sign in with a passkey

The sign-in screen with a Sign in with a passkey button above a username and password form.

Passkeys are the front door: a touch or a glance, and nothing that can be phished. Passwords stay as a fallback and always need a second step.

  1. One tap with the passkey on your phone, laptop or security key.
  2. Password sign-in, with lockout after repeated failures.

Step 3 of 15

A second step after a password

The Confirm it is you step asking for a six-digit authenticator code.

After a password comes an authenticator code, a passkey or a one-time recovery code. Administrators and resellers cannot switch this off.

  1. The 6-digit code from your authenticator app.
  2. Or use a passkey, or one of your recovery codes.

Step 4 of 15

The overview

The panel overview with a Servers card showing cp1 online, a Live activity card and the installed modules. The panel overview with a Servers card showing cp1 online, a Live activity card and the installed modules.

Every server the panel manages, what is happening right now, and the modules installed on this panel. The menu is built from those modules, so it only ever shows what you are allowed to use.

  1. Each server with its live status and roles.
  2. Live activity: changes by you and your team appear as they happen.
  3. Installed modules and how many actions you can run.
  4. Search or run anything with Ctrl K (Cmd K on a Mac).

Step 5 of 15

Everything one keystroke away

The command palette open over the hosting accounts page, listing pages and actions. The command palette open over the hosting accounts page, listing pages and actions.

Press Ctrl K (Cmd K on a Mac) to jump to any page or run any action you are allowed to run. Destructive actions are marked before you choose them.

  1. Type to filter pages and actions.
  2. Go to any page.
  3. Run an action. Critical ones are shown in red.

Step 6 of 15

Every action has a form

The Create hosting account form open in a side sheet beside the list of account actions.

Modules declare their actions with typed parameters and a risk level. The panel turns each one into a form, and the server validates it again before anything runs. The same actions power the API.

  1. Each action with its id, e.g. accounts.create.
  2. Fields and hints come from the module's schema.
  3. Two-way choices are one-tap switches.
  4. Run it. Reads and changes are separate filters on the list.

Step 7 of 15

Results you can read

The Create hosting account sheet showing Done and the JSON result of the new account.

Every run ends with a clear result: a toast, the returned record, and a copy button for scripts and tickets.

  1. Done, or a plain-words error naming the field.
  2. Copy the result.
  3. A toast confirms what happened.

Step 8 of 15

See the plan before it happens

A dialog titled Add a domain listing what will change, with Cancel and Apply changes buttons.

Actions that change your servers can preview themselves. You see what will be created, changed or removed, and nothing is applied until you say so.

  1. Nothing has been applied yet.
  2. What other modules will do next, from the account's plan.
  3. The exact change, as a diff.
  4. Apply only when it looks right.

Step 9 of 15

Critical actions ask twice

A confirmation dialog for deleting a hosting account, warning that it is a critical-risk action.

Every action carries a risk level. Critical ones say what cannot be undone, and then ask you to prove it is really you.

  1. Plain words about what cannot be undone.
  2. Destructive buttons look destructive.
  3. Options such as keeping the home directory.

Step 10 of 15

Confirm it is you

The Confirm it is you dialog with a Use your passkey button.

High-risk actions need a fresh confirmation with your passkey or code, valid for five minutes. A stolen session cookie alone cannot delete anything.

  1. Valid for five minutes, then asked again.
  2. Your passkey, or an authenticator code.

Step 11 of 15

Your security page

The Security page on the Passkeys tab with one passkey and an Add a passkey button. The Security page on the Passkeys tab with one passkey and an Add a passkey button.

Passkeys, authenticator app, recovery codes, signed-in devices, API tokens and password, in one place for every person who signs in.

  1. Everything about how you sign in, in tabs.
  2. Add as many passkeys as you have devices.
  3. When each passkey was added and last used.

Step 12 of 15

Every signed-in device

The Signed-in devices list showing Chrome on Linux marked This device.

See every browser and app signed in as you, with its address and last activity. End one and it is signed out within seconds.

  1. Device, address, when it signed in and was last active.
  2. Changes confirm themselves.

Step 13 of 15

Acting as a customer, on the record

The panel acting as user bob, with a banner across the top and a read-only notice on the security page.

Support staff can act as a customer to see what they see. The banner never goes away, the session has a time limit and a reason, and credentials cannot be changed while acting as someone else.

  1. Who you are acting as, who you really are, and time left.
  2. End the session at any time.
  3. Credentials are read-only while acting as someone.
  4. The menu is the customer's menu.

Step 14 of 15

The same panel on your phone

The panel overview on a phone, with the menu button, the servers card and live activity. The panel overview on a phone, with the menu button, the servers card and live activity.

The panel is built for small screens too: the same glass layers, a drawer for the menu and controls sized for a thumb.

  1. The menu opens as a drawer.
  2. Live status breathes slowly while everything is healthy.

Step 15 of 15

Coming next: dedicated screens

Design preview with sample data.
Design preview of the Accounts screen with stat tiles and one row expanded for editing. Design preview of the Accounts screen with stat tiles and one row expanded for editing.

The design system is finished and module screens are being built on it. This is the accounts screen design: stats at a glance, and rows that open in place for editing instead of sending you to another page.

  1. Stat tiles with a week of history.
  2. A lit edge marks the row you are editing.
  3. Switches, searchable lists and a date picker; never a bare browser select.
  4. Save in place.