Add Features

.vitepress/config.mts

@@ -172,6 +172,35 @@ export default withMermaid({
         items: [
           { text: 'Overview', link: '/docs/panel/overview' },
           { text: 'Environment', link: '/docs/panel/environment' },
+          {
+            text: 'Features',
+            link: '/docs/panel/features/',
+            collapsed: true,
+            items: [
+              {
+                text: 'Dashboard',
+                link: '/docs/panel/features/dashboard/',
+                collapsed: true,
+                items: [
+                  { text: 'Servers', link: '/docs/panel/features/dashboard/servers' },
+                  { text: 'Account', link: '/docs/panel/features/dashboard/account' },
+                  { text: 'Security Keys', link: '/docs/panel/features/dashboard/security-keys' },
+                  {
+                    text: 'API Keys',
+                    link: '/docs/panel/features/dashboard/api-keys',
+                    collapsed: true,
+                    items: [{ text: 'Permissions Reference', link: '/docs/panel/features/dashboard/permissions' }],
+                  },
+                  { text: 'SSH Keys', link: '/docs/panel/features/dashboard/ssh-keys' },
+                  { text: 'Command Snippets', link: '/docs/panel/features/dashboard/command-snippets' },
+                  { text: 'OAuth Links', link: '/docs/panel/features/dashboard/oauth-links' },
+                  { text: 'Sessions', link: '/docs/panel/features/dashboard/sessions' },
+                  { text: 'Keyboard Shortcuts', link: '/docs/panel/features/dashboard/keyboard-shortcuts' },
+                  { text: 'Activity', link: '/docs/panel/features/dashboard/activity' },
+                ],
+              },
+            ],
+          },
           {
             text: 'Installation',
             link: '/docs/panel/installation/',

web/docs/integrations/blesta.md

@@ -29,7 +29,7 @@ Clients are matched to panel users by their Blesta client ID (stored as the user
 
 The client service page shows a server summary (name, status, address, memory, disk) with an **Open in Panel** button, and the admin service tab surfaces the same details.
 
-![](./images/blesta/client-area.png)
+![](./images/blesta/client-area.webp)
 
 ## Requirements
 
@@ -58,7 +58,7 @@ The client service page shows a server summary (name, status, address, memory, d
 
    Saving validates the connection against the panel.
 
-![](./images/blesta/server-config.png)
+![](./images/blesta/server-config.webp)
 
 ## Configuring a package
 

web/docs/integrations/paymenter.md

@@ -46,7 +46,7 @@ Customers are matched to panel users by their Paymenter user ID (stored as the u
 
 4. Use **Test Connection** to confirm Paymenter can reach the panel with the supplied key.
 
-![](./images/paymenter/server-config.png)
+![](./images/paymenter/server-config.webp)
 
 ## Configuring a product
 

web/docs/integrations/vscode.md

@@ -41,13 +41,13 @@ VSCodium, code-server, and most other forks are wired to the [Open VSX Registry]
 
 ::::
 
-![](./images/vscode/extensions-view.png)
+![](./images/vscode/extensions-view.webp)
 
 ## Connecting from the panel
 
 The quickest way to get started is straight from your server's file manager. Open the **Files** tab for any server, then click the **Connect** dropdown in the toolbar and choose **Connect via VS Code**.
 
-![](./images/vscode/connect-dropdown.png)
+![](./images/vscode/connect-dropdown.webp)
 
 Your editor opens, mounts the server's files as a workspace folder, and attaches to the console automatically. The same **Connect** dropdown is available in the header while editing a file, which will open that exact file in your editor once the server is mounted.
 
@@ -67,7 +67,7 @@ You can also drive everything from the editor using the Command Palette (`Ctrl`/
 | `Calagopus: Open Server Console` | Pick a server and attach to its console. |
 | `Calagopus: Server Power Action` | Start, stop, restart, or kill the active server. |
 
-![](./images/vscode/command-palette.png)
+![](./images/vscode/command-palette.webp)
 
 ## Features
 
@@ -83,13 +83,13 @@ When the editor's proposed search APIs are enabled, you can search across your s
 
 Attach to your server's console as an integrated terminal. Output streams in real time and you can send commands straight from the terminal input, exactly as you would from the panel's console tab.
 
-![](./images/vscode/integrated-terminal.png)
+![](./images/vscode/integrated-terminal.webp)
 
 ### Power actions & status bar
 
 The current server's power state is shown in the status bar. Use the **Calagopus: Server Power Action** command (or the status bar item) to **start**, **stop**, **restart**, or **kill** the server without switching back to the panel.
 
-![](./images/vscode/status-bar.png)
+![](./images/vscode/status-bar.webp)
 
 ## Deep links
 
@@ -110,7 +110,7 @@ vscode://calagopus.calagopus/open?origin=<panel-url>&server=<server-uuid>
 ::: warning
 A `vscode://` link is the canonical scheme for Visual Studio Code. Some forks register a different scheme (for example, `vscodium://` or `codium://`) - if a link does not open in your editor, click the settings icon in the top left of the file manager and change the VS Code URI scheme to match your editor's registered scheme.
 
-![](./images/vscode/uri-scheme-setting.png)
+![](./images/vscode/uri-scheme-setting.webp)
 :::
 
 ## Authentication
@@ -129,7 +129,7 @@ Deep links that include an `apiKey` parameter open an **ephemeral** session - th
 
 Your editor may register a URI scheme other than `vscode://`. Click the settings icon in the top left of the file manager and change the VS Code URI scheme to match your editor's registered scheme (for example, `vscodium://` or `codium://`).
 
-![](./images/vscode/uri-scheme-setting.png)
+![](./images/vscode/uri-scheme-setting.webp)
 
 ### File search returns no results
 

web/docs/integrations/whmcs.md

@@ -21,7 +21,7 @@ Clients are matched to panel users by their WHMCS user ID (stored as the user's
 
 The client area renders a server summary (name, status, address, memory, disk, CPU) with a **Go to Server Panel** button, and the admin services tab surfaces the server UUID, node, owner, and panel link.
 
-![](./images/whmcs/client-area.png)
+![](./images/whmcs/client-area.webp)
 
 ## Requirements
 
@@ -51,7 +51,7 @@ The client area renders a server summary (name, status, address, memory, disk, C
 
 4. Create a **Server Group** and assign your Calagopus server to it.
 
-![](./images/whmcs/add-new-server.png)
+![](./images/whmcs/add-new-server.webp)
 
 ::: info
 To store the panel's server UUID against each service, create two **custom fields** named `Server UUID` and `Server ID` on the product (admin-only). The module fills these in automatically on provisioning. They are optional - without them, the module falls back to looking the server up by its `external_id`.

web/docs/panel/features/dashboard/account.md

@@ -0,0 +1,48 @@
+---
+title: Account
+description: Manage your Calagopus account, password, email, two-factor authentication, account details, and avatar.
+---
+
+# Account
+
+The Account page covers everything about your own user profile: password, email, two-factor authentication, display details, and avatar.
+
+![](./images/account/overview.webp)
+
+## Password
+
+Enter your current password, then your new password twice, and hit **Update**. You always have to confirm your current password first, even if you're already logged in.
+
+![](./images/account/password.webp)
+
+## Email
+
+Same idea: enter your new email and your current password, then **Update**.
+
+![](./images/account/email.webp)
+
+## Two-Factor Authentication
+
+Standard TOTP-based 2FA, the same kind used by most apps. Scan the QR code (or enter the code shown below it) in your authenticator app, then enter the 6-digit code it generates along with your current password to enable it.
+
+![](./images/account/2fa-setup.webp)
+
+To disable it, you'll need a valid authentication code and your password again.
+
+![](./images/account/2fa-disable.webp)
+
+## Account Details
+
+Your first name, last name, username, panel language, and toast position (where notifications pop up on screen). There's also a toggle for whether the panel should open to the **Grouped Servers** view instead of **All Servers**, off by default. See [Servers](./servers.md) for the difference.
+
+![](./images/account/details.webp)
+
+## Avatar
+
+Click the empty **Avatar** field to upload an image. If it doesn't crop the way you want, drag the position handles on the preview grid to adjust it before saving.
+
+![](./images/account/avatar-empty.webp)
+
+Once you have an avatar set, upload a new file and hit **Update** to replace it, or **Remove** to delete it.
+
+![](./images/account/avatar-set.webp)

web/docs/panel/features/dashboard/activity.md

@@ -0,0 +1,14 @@
+---
+title: Activity
+description: View the activity log for your Calagopus account.
+---
+
+# Activity
+
+Activity is a log of everything that's happened on your account: the actor, the event, the IP address it came from, and when it happened. Like most tables in the panel, it's paginated and searchable.
+
+![](./images/activity/activity-list.webp)
+
+Click the info button on a row to see the full details for that event.
+
+![](./images/activity/activity-details.webp)

web/docs/panel/features/dashboard/api-keys.md

@@ -0,0 +1,42 @@
+---
+title: API Keys
+description: Create and manage personal API keys for the Calagopus API, with granular permissions per key.
+---
+
+# API Keys
+
+API keys are personal access tokens for the [API](https://demo.calagopus.com/api). Each key gets its own set of permissions, so you can hand out a key scoped to exactly what it needs rather than your full account access.
+
+The list shows each key's name, its key value, how many user/server/admin permissions it has, and its last used, expiry, and created timestamps.
+
+![](./images/api-keys/list.webp)
+
+## Creating a Key
+
+Click **Create** in the top right. Give it a name, optionally an expiry date, and optionally a list of IPs it's allowed to be used from (leave empty to allow any IP).
+
+![](./images/api-keys/create-form.webp)
+
+Expiry uses a calendar picker with an optional time:
+
+![](./images/api-keys/expires-picker.webp)
+
+Below that are the permission categories: **User**, **Server**, and **Admin** (the last only shown if your own account has admin permissions). Check individual permissions, or toggle an entire category at once. Everything you've selected shows up on the right under **Selected Permissions**, where you can also copy the full list or clear it with **Deselect All**. See the [Permissions Reference](./permissions.md) for what every permission does.
+
+Once you're happy with the selection, scroll down and hit **Save**, or **Close** to back out without creating anything.
+
+## Editing, Recreating, and Removing
+
+Right-click a key for **Edit**, **Recreate**, or **Remove**.
+
+![](./images/api-keys/context-menu.webp)
+
+**Edit** opens the same form as creating one, letting you change the name, expiry, allowed IPs, and permissions.
+
+![](./images/api-keys/edit-form.webp)
+
+**Recreate** issues a new key value with the same name and permissions, immediately invalidating the old value. Use this if a key may have leaked. **Remove** deletes the key outright.
+
+::: info
+A key can never edit itself or grant permissions it doesn't already have, even with `api-keys.update`.
+:::

web/docs/panel/features/dashboard/command-snippets.md

@@ -0,0 +1,26 @@
+---
+title: Command Snippets
+description: Set up shortcuts for commands you use often in the Calagopus server console.
+---
+
+# Command Snippets
+
+Command snippets are shortcuts for commands you type often into a server console. The list is empty by default and shows each snippet's name, which eggs it applies to, and when it was created.
+
+![](./images/command-snippets/list.webp)
+
+## Creating a Snippet
+
+Click **Create** and give it a short name, since that name is what you'll actually type in the console. Optionally pick an egg to restrict the snippet to servers using it; leave it empty to make the snippet available on every server.
+
+![](./images/command-snippets/create-form.webp)
+
+Then enter the command it should paste. For example, a snippet named `hello` with the command `say hello world!`:
+
+![](./images/command-snippets/example.webp)
+
+Typing `!hello` in the console and pressing enter pastes `say hello world!` in its place, so you don't have to type the full command every time.
+
+![](./images/command-snippets/usage-example.gif)
+
+Right-click an existing snippet to edit or delete it.

web/docs/panel/features/dashboard/index.md

@@ -0,0 +1,31 @@
+---
+title: Dashboard
+description: A tour of the Calagopus user dashboard, the part of the Panel every user sees after logging in to manage their account and servers.
+---
+
+# Dashboard
+
+The Dashboard is what every user lands on after logging in. It covers your own account (password, email, two-factor, avatar), your servers, and account-level self-service like API keys, SSH keys, and security keys. It's separate from the **Admin** area, which is only visible to users with admin permissions and covers instance-wide management like nodes, locations, and other users.
+
+| Page | Description |
+| --- | --- |
+| [Servers](./servers.md) | Your server list, server groups, and bulk power actions |
+| [Account](./account.md) | Password, email, two-factor authentication, and avatar |
+| [Security Keys](./security-keys.md) | Passkeys and hardware security keys for login |
+| [API Keys](./api-keys.md) | Personal access tokens for the API, with granular permissions |
+| [SSH Keys](./ssh-keys.md) | Public keys used for SFTP and SSH access to Wings |
+| [Command Snippets](./command-snippets.md) | Shortcuts for commands you use often in the server console |
+| [OAuth Links](./oauth-links.md) | Linking third-party accounts for faster login |
+| [Sessions](./sessions.md) | Devices currently logged into your account |
+| [Keyboard Shortcuts](./keyboard-shortcuts.md) | Rebindable shortcuts for navigating the panel |
+| [Activity](./activity.md) | A log of everything that's happened on your account |
+
+## Navigating the Dashboard
+
+The sidebar lists every page above, plus **Servers** and **Admin** (if you have admin permissions) at the top. At the bottom, the profile box doubles as a search box: if you have more than a handful of servers, click into it to search and jump straight to one.
+
+![](./images/nav-search.webp)
+
+The three dots next to your name open a small menu to jump to your **Account** page, switch to the **Admin** area, toggle light/dark mode, or log out.
+
+![](./images/nav-menu.webp)