docs: audit and refresh documentation with updated screenshots (#197)

Update 11 doc pages with accurate content and capture 14 fresh screenshots. Remove JWT_SECRET from configuration (auto-generated), fix editor container actions, add missing Settings sections, update Features Overview, and add remote alerts documentation.
2026-07-26 11:49:16 +00:00 · 2026-03-27 18:08:31 -04:00
parent 064b9be861
commit ffabfd1c39
24 changed files with 211 additions and 66 deletions
@@ -13,18 +13,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

-### Added
-
-* **sidebar:** right-click context menu on stacks with full lifecycle actions (deploy, stop, restart, update, delete, alerts, check for updates)
-* **sidebar:** expanded three-dot dropdown menu to match context menu actions
-* **settings:** new "Support" tab with tier-appropriate help channels (docs, GitHub Issues, email support for Pro)
-* **ui:** TierBadge component with distinctive icons per tier — Globe (Community), Crown (Pro), Users (Team)
-
 ### Changed

-* **sidebar:** centered logo and app name in sidebar header
-* **settings:** removed duplicate Documentation and GitHub Issues links from About section (now in Support tab)
-* replaced ProBadge with TierBadge across UserProfileDropdown and Settings
+* **docs:** comprehensive documentation audit — updated 11 pages with accurate content and 14 fresh screenshots
+* **docs/configuration:** removed JWT_SECRET from required env vars (it's auto-generated), added compose directory reorganization explanation
+* **docs/settings:** added missing License, Users, Webhooks, Support, and About sections; removed obsolete Appearance section
+* **docs/editor:** fixed container actions table to match actual UI (Open App, View Live Logs, Open Bash Terminal)
+* **docs/features-overview:** updated all feature descriptions to match current implementation
+* **docs/alerts:** added remote node alerts section with setup checklist
+* **docs:** added screenshots for Fleet View, Fleet Backups, RBAC, Webhooks, Multi-Node, Editor, Alerts, and Settings

 ## [0.9.0](https://github.com/AnsoCode/Sencho/compare/v0.8.0...v0.9.0) (2026-03-27)

@@ -51,7 +51,11 @@ Stack alerts are configured per-stack. Right-click a stack in the sidebar (or cl
  <img src="/images/stack-management/stack-context-menu.png" alt="Stack context menu showing the Alerts option" />
 </Frame>

-The alerts sheet shows existing rules for the stack and a form to create new ones.
+The alerts panel slides open, showing existing rules for the stack and a form to create new ones.
+
+<Frame>
+  <img src="/images/alerts-notifications/alert-panel.png" alt="Alert panel showing alert rules and creation form" />
+</Frame>

 ### Alert fields

@@ -93,3 +97,24 @@ All dispatched notifications appear in the **notification bell** (top-right of t
 <Note>
  Notifications only reach external agents (Discord, Slack, Webhook) if at least one agent is enabled. Dashboard notifications appear regardless.
 </Note>
+
+## Alerts on remote nodes
+
+Alerts work the same way on remote nodes as they do locally. When you switch to a remote node and right-click a stack, the alerts panel shows and manages rules for that remote instance.
+
+<Frame>
+  <img src="/images/alerts-notifications/alert-panel-remote.png" alt="Alert panel on a remote node" />
+</Frame>
+
+### How it works
+
+1. **Alert rules are stored on each node independently.** When you create an alert while a remote node is selected, the rule is saved on that remote Sencho instance's database - not your primary instance.
+2. **Monitoring runs locally on each node.** The remote Sencho instance evaluates its own alert rules against its own container metrics every minute.
+3. **Notifications are sent by the node that detects the breach.** Make sure notification agents (Discord, Slack, Webhook) are configured on each remote node where you want to receive alerts - notification settings are per-instance.
+
+### Setup checklist for remote alerts
+
+1. On the **remote** Sencho instance, go to **Settings → Notifications** and configure at least one agent
+2. From your **primary** instance, switch to the remote node
+3. Right-click a stack and select **Alerts** to create rules
+4. The remote instance handles monitoring and notification delivery independently
@@ -43,13 +43,17 @@ The left panel lists all containers that belong to the selected stack. Each cont

 ### Container actions

-Each container row has three action buttons:
+Each container row has action buttons that appear on hover:

-| Button | What it does |
-|--------|--------------|
-| **Logs** (external link icon) | Opens a live log stream modal for that container |
-| **Terminal** (terminal icon) | Opens an interactive bash session inside the container |
-| **Copy ID** | Copies the container ID to the clipboard |
+| Button | Icon | What it does |
+|--------|------|--------------|
+| **Open App** | External link | Opens the container's web UI in a new tab (uses the first mapped port) |
+| **View Live Logs** | Scroll text | Opens a live log stream modal for that container (available when running) |
+| **Open Bash Terminal** | Terminal | Opens an interactive bash session inside the container (admin only, available when running) |
+
+<Frame>
+  <img src="/images/editor/container-actions.png" alt="Container action buttons on a running container" />
+</Frame>

 ### Log viewer

@@ -16,6 +16,10 @@ Create point-in-time snapshots of every `compose.yaml` and `.env` file across yo
 3. Optionally enter a description (e.g. "Before v2 migration")
 4. Click **Create** - Sencho captures files from every reachable node

+<Frame>
+  <img src="/images/fleet-backups/create-snapshot.png" alt="Create Snapshot dialog" />
+</Frame>
+
 During creation, Sencho connects to each node in parallel:
 - **Local nodes** - reads files directly from the compose directory
 - **Remote nodes** - fetches files via the Distributed API proxy using the node's API token
@@ -24,6 +28,10 @@ If a remote node is offline or unreachable, it is **skipped gracefully**. The sn

 ## Browsing snapshots

+<Frame>
+  <img src="/images/fleet-backups/browse-snapshots.png" alt="Snapshot list showing date, description, scope, and warnings" />
+</Frame>
+
 The snapshot list shows:
 - **Date** - when the snapshot was taken
 - **Description** - your optional label
@@ -31,6 +31,10 @@ On the **remote** Sencho instance (the server you want to add), open **Settings

 On your **primary** Sencho instance, open **Settings → Nodes** and click **+ Add Node**. Fill in:

+<Frame>
+  <img src="/images/multi-node/add-node-form.png" alt="Add Node form with Name, Type, API URL, and Token fields" />
+</Frame>
+
 | Field | Description |
 |-------|-------------|
 | **Name** | A display name (e.g. `prod-server`, `media-box`) |
@@ -58,7 +62,7 @@ The Compose directory path matters on remote nodes too. When you register a remo
 The **node switcher** dropdown in the top-left of the sidebar shows the currently active node. Click it to switch to any registered node. All views - dashboard stats, stack list, editor, resources, logs - immediately reflect the selected node.

 <Frame>
-  <img src="/images/multi-node/node-manager.png" alt="Node switcher dropdown and node list" />
+  <img src="/images/multi-node/node-switcher-dropdown.png" alt="Node switcher dropdown expanded showing available nodes" />
 </Frame>

 Node status indicators:
@@ -3,41 +3,17 @@ title: Features Overview
 description: A high-level tour of everything Sencho can do.
 ---

+## Dashboard
+
+The Home view shows real-time system stats at a glance - active containers, exited containers, Docker network activity, and host resource usage (CPU, RAM, disk). Historical CPU and RAM charts display trends over the last 24 hours. A Docker Run converter lets you paste any `docker run` command and convert it to a Compose stack. [Learn more →](/features/dashboard)
+
 ## Stack management

-Deploy, start, stop, restart, and remove Docker Compose stacks through a point-and-click interface. Edit `compose.yaml` and `.env` files directly in the built-in Monaco editor with syntax highlighting. [Learn more →](/features/stack-management)
+Deploy, start, stop, restart, update, and remove Docker Compose stacks through a point-and-click interface. Right-click any stack in the sidebar for a context menu with quick actions including alerts configuration, update checks, and deployment controls. [Learn more →](/features/stack-management)

 ## Editor

-Full in-browser code editor for your Compose and environment files. Toggle edit mode, save to disk, or save and deploy in one step. Per-container live stats and an interactive bash exec terminal live alongside the editor. [Learn more →](/features/editor)
-
-## Multi-node support
-
-Add remote Sencho instances as nodes. All dashboard operations - stack management, logs, stats - work identically whether you're targeting your local machine or a server on the other side of the world. Uses a transparent HTTP proxy model; no SSH or shared Docker sockets required. [Learn more →](/features/multi-node)
-
-## Fleet View
-
-Monitor your entire infrastructure from a single screen. The fleet dashboard shows all nodes with health metrics, container counts, and resource usage. Pro users unlock fleet health summary cards, container drill-down, search, sorting, filtering, and critical node detection. [Learn more →](/features/fleet-view)
-
-## RBAC & user management
-
-Create viewer accounts with read-only access to dashboards, logs, and file contents - while keeping deploy and edit permissions locked to admins. Sencho Pro supports two roles: Admin (full access) and Viewer (read-only). [Learn more →](/features/rbac)
-
-## Atomic deployments
-
-Pro users get automatic backup and rollback on every deployment. Before applying changes, Sencho snapshots your compose and environment files. If containers crash after deploy, the previous configuration is restored automatically. [Learn more →](/features/atomic-deployments)
-
-## Fleet-wide backups
-
-Create point-in-time snapshots of every compose file and environment file across all nodes. Snapshots are stored centrally and can be browsed by node and stack. Restore individual stacks from any snapshot with optional one-click redeploy - even to remote nodes. Offline nodes are gracefully skipped with visible warnings. [Learn more →](/features/fleet-backups)
-
-## Real-time logs & stats
-
-Stream container logs and resource metrics (CPU, memory, network I/O) live in the browser via WebSocket and Server-Sent Events connections. The Home dashboard shows historical CPU and RAM charts over the last 24 hours.
-
-## Global observability
-
-The **Logs** view aggregates output from all containers across all stacks into a single scrollable stream. Filter by stack, log level (stdout/stderr), or search for keywords. Switch to developer mode for real-time SSE streaming.
+Full in-browser Monaco editor for your `compose.yaml` and `.env` files with syntax highlighting. Toggle edit mode, save to disk, or save and deploy in one step. The container panel shows per-container live stats (CPU, RAM, network), with buttons to open the app, stream logs, or launch a bash terminal. [Learn more →](/features/editor)

 ## Resources hub

@@ -49,20 +25,48 @@ View and manage all Docker images, volumes, and networks. Resources are classifi
 | **External** | Part of another Compose project |
 | **Unused / Reclaimable** | Safe to prune |

-Run scoped prune operations to clean up Sencho-managed resources only, or target all Docker resources when needed.
+Run scoped prune operations to clean up Sencho-managed resources only, or target all Docker resources when needed. [Learn more →](/features/resources)

 ## App Store

-Browse 190+ pre-configured application templates. Filter by category (Media, Automation, Development, etc.), configure environment variables, volumes, and ports, and deploy with a single click.
+Browse 190+ pre-configured application templates. Filter by category (Media, Automation, Development, etc.), configure environment variables, volumes, and ports, and deploy with a single click. Customize the template source URL to use your own registry. [Learn more →](/features/app-store)
+
+## Global observability
+
+The **Logs** view aggregates output from all containers across all stacks into a single scrollable stream. Filter by stack, log level (stdout/stderr), or search for keywords. Switch to developer mode for real-time SSE streaming instead of polling. [Learn more →](/features/global-observability)

 ## Host console

-Open an interactive terminal on the host OS directly in the browser - full xterm.js emulation with color support. No SSH client required.
+Open an interactive terminal on the host OS directly in the browser - full xterm.js emulation with color support. No SSH client required. Admin-only access. [Learn more →](/features/host-console)

-## Webhooks
+## Multi-node support

-Trigger stack actions from external CI/CD pipelines via HTTP webhooks. Create a webhook targeting a specific stack and action, then call it from GitHub Actions, GitLab CI, or any system that can send an HTTP POST. Requests are authenticated with HMAC-SHA256 signatures - no session cookies required. [Learn more →](/features/webhooks)
+Add remote Sencho instances as nodes. All dashboard operations - stack management, logs, stats - work identically whether you're targeting your local machine or a server on the other side of the world. Uses a transparent HTTP proxy model; no SSH or shared Docker sockets required. [Learn more →](/features/multi-node)
+
+## Fleet View
+
+Monitor your entire infrastructure from a single screen. The fleet dashboard shows all nodes with health metrics, container counts, and resource usage. Pro users unlock fleet health summary cards, container drill-down, search, sorting, filtering, and critical node detection. [Learn more →](/features/fleet-view)

 ## Alerts & notifications

-Configure threshold-based alerts (CPU, memory, network, restart count) per stack. Route notifications to Discord, Slack, or any generic webhook endpoint. [Learn more →](/features/alerts-notifications)
+Configure threshold-based alerts (CPU, memory, network, restart count) per stack. Route notifications to Discord, Slack, or any generic webhook endpoint. Alerts are evaluated every minute with configurable duration and cooldown. [Learn more →](/features/alerts-notifications)
+
+## Webhooks
+
+Trigger stack actions from external CI/CD pipelines via HTTP webhooks. Create a webhook targeting a specific stack and action, then call it from GitHub Actions, GitLab CI, or any system that can send an HTTP POST. Requests are authenticated with HMAC-SHA256 signatures. [Learn more →](/features/webhooks)
+
+## RBAC & user management
+
+Create viewer accounts with read-only access to dashboards, logs, and file contents - while keeping deploy and edit permissions locked to admins. Sencho Pro supports two roles: Admin (full access) and Viewer (read-only). [Learn more →](/features/rbac)
+
+## Atomic deployments
+
+Pro users get automatic backup and rollback on every deployment. Before applying changes, Sencho snapshots your compose and environment files. If containers crash after deploy, the previous configuration is restored automatically. [Learn more →](/features/atomic-deployments)
+
+## Fleet-wide backups
+
+Create point-in-time snapshots of every compose file and environment file across all nodes. Snapshots are stored centrally and can be browsed by node and stack. Restore individual stacks from any snapshot with optional one-click redeploy - even to remote nodes. [Learn more →](/features/fleet-backups)
+
+## Licensing & billing
+
+Sencho is free for personal use with the Community tier. Pro unlocks RBAC, webhooks, fleet backups, atomic deployments, and advanced fleet features. Manage your license, view subscription details, and access the billing portal from Settings. [Learn more →](/features/licensing)
@@ -39,6 +39,10 @@ Sencho Pro introduces role-based access control with two distinct roles: **Admin

 ## Managing users

+<Frame>
+  <img src="/images/rbac/users-settings.png" alt="Users management panel showing user list with roles" />
+</Frame>
+
 Admins can manage accounts in **Settings → Users**. From there you can:

 - **Create** a new user with a username, password, and role (Admin or Viewer)
@@ -18,6 +18,10 @@ Sencho webhooks let external systems trigger stack actions over HTTP. The typica

 ## Creating a webhook

+<Frame>
+  <img src="/images/webhooks/webhooks-settings.png" alt="Webhooks settings panel" />
+</Frame>
+
 Open **Settings → Webhooks** and click **Create Webhook**. Fill in:

 | Field | Description |
@@ -9,9 +9,16 @@ Sencho is configured entirely through environment variables and Docker volume mo

 | Variable | Description |
 |----------|-------------|
-| `JWT_SECRET` | Secret key used to sign session tokens. Use a long, random string (32+ characters). Changing this invalidates all active sessions. |
 | `COMPOSE_DIR` | Absolute path to the directory that contains your Compose stacks. Every subdirectory inside becomes a stack in Sencho. |

+<Note>
+  **JWT_SECRET is generated automatically.** Sencho creates a secure random signing key during initial setup and stores it in its database. You do not need to provide one.
+</Note>
+
+### How Sencho organizes your compose directory
+
+When you point `COMPOSE_DIR` at a directory, Sencho expects each stack to live in its own subdirectory. If you create a stack through the UI, Sencho automatically creates a subfolder and places a blank `compose.yaml` inside it. Sencho does not move or "capture" existing files - it simply treats every subdirectory as a separate stack.
+
 ## Optional environment variables

 | Variable | Default | Description |
@@ -93,7 +100,6 @@ services:
      - ./sencho-data:/app/data
      - /opt/compose:/opt/compose          # 1:1 path rule
    environment:
-      - JWT_SECRET=your-long-random-secret-here
      - COMPOSE_DIR=/opt/compose
      - DATA_DIR=/app/data
 ```
@@ -109,7 +115,6 @@ services:
    env_file:
      - /opt/compose/globals.env          # shared vars for all stacks
    environment:
-      - JWT_SECRET=your-secret
      - COMPOSE_DIR=/opt/compose
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
@@ -27,6 +27,45 @@ Click **Update Password** to apply. The change takes effect immediately; existin

 ---

+## License
+
+**Scope:** Global
+
+Manage your Sencho Pro license from this section.
+
+| Element | Description |
+|---------|-------------|
+| **Current tier** | Shows whether you are on Community or Pro, with a tier badge |
+| **Trial status** | If on a trial, shows remaining days |
+| **Customer / Plan / Key** | Displayed when a Pro license is active |
+| **Renews** | Next renewal date for active subscriptions |
+| **View Pricing** | Opens the Sencho pricing page to purchase a license |
+| **Activate** | Enter a license key to activate Pro |
+| **Manage Subscription** | Opens the billing portal (active Pro only) |
+| **Deactivate License** | Reverts to Community features (active Pro only) |
+
+---
+
+## Users
+
+<Note>
+  Users management requires a Sencho Pro license and admin role. Community Edition supports a single admin account only.
+</Note>
+
+**Scope:** Global
+
+Create and manage user accounts with role-based access.
+
+| Action | Description |
+|--------|-------------|
+| **Create user** | Add a new account with username, password, and role (Admin or Viewer) |
+| **Edit user** | Change an existing user's password or role |
+| **Delete user** | Remove a user account |
+
+See [RBAC & User Management](/features/rbac) for details on what each role can access.
+
+---
+
 ## System Limits

 **Scope:** Per-node (applies to the currently selected node)
@@ -35,10 +74,10 @@ Configure resource thresholds that trigger visual warnings on the dashboard stat

 | Setting | Range | Description |
 |---------|-------|-------------|
-| **Host CPU Limit** | 1–100% | CPU percentage above which the CPU card turns orange/red |
-| **Host RAM Limit** | 1–100% | RAM percentage above which the RAM card turns orange/red |
-| **Host Disk Limit** | 1–100% | Disk percentage above which the Disk card turns orange/red |
-| **Docker Janitor Threshold** | ≥ 0 GB | Minimum free disk space to maintain. When free space falls below this value, a warning is shown. Set to `0` to disable. |
+| **Host CPU Limit** | 1-100% | CPU percentage above which the CPU card turns orange/red |
+| **Host RAM Limit** | 1-100% | RAM percentage above which the RAM card turns orange/red |
+| **Host Disk Limit** | 1-100% | Disk percentage above which the Disk card turns orange/red |
+| **Docker Janitor Threshold** | 0+ GB | Minimum free disk space to maintain. When free space falls below this value, a warning is shown. Set to `0` to disable. |
 | **Global Crash Alerts** | On / Off | When enabled, Sencho sends a notification whenever any managed container exits unexpectedly |

 Click **Save** to apply. An unsaved-changes indicator appears when you have edits pending.
@@ -64,13 +103,24 @@ At least one agent must be enabled for stack alerts to deliver notifications. Se

 ---

-## Appearance
+## Webhooks

-**Scope:** Global (stored in the browser, not the server)
+<Note>
+  Webhooks require a Sencho Pro license.
+</Note>

-| Setting | Options | Description |
-|---------|---------|-------------|
-| **Theme** | Light / Dark / Auto | `Auto` follows the OS system preference. Changes apply immediately without a page reload. |
+**Scope:** Global
+
+Create and manage HTTP webhooks that external systems (CI/CD pipelines, automation tools) can call to trigger stack actions. See [Webhooks](/features/webhooks) for the full walkthrough including authentication and CI examples.
+
+Quick reference:
+
+| Action | How |
+|--------|-----|
+| Create a webhook | Click **Create Webhook**, select a stack and action |
+| Copy trigger URL | Click the copy icon on any webhook row |
+| View execution history | Expand a webhook row to see recent executions |
+| Delete a webhook | Click the trash icon |

 ---

@@ -124,3 +174,43 @@ Quick reference:
 Click **Save** to update the URL. Click **Refresh Cache** to clear the cached template list and fetch fresh data from the registry immediately.

 See [App Store](/features/app-store#custom-template-registry) for more on custom registries.
+
+---
+
+## Support
+
+**Scope:** Global
+
+Links to help resources available to all tiers, plus priority support channels for Pro users.
+
+### Resources (all tiers)
+
+| Resource | Description |
+|----------|-------------|
+| **Documentation** | Opens docs.sencho.io - guides, reference, and tutorials |
+| **GitHub Issues** | Report bugs and request features on GitHub |
+
+### Pro support
+
+Pro license holders get additional support channels:
+
+| Channel | Description |
+|---------|-------------|
+| **Email Support** | Direct email support (Personal Pro) |
+| **Priority Email Support** | Responses within 24 hours (Team Pro) |
+
+---
+
+## About
+
+**Scope:** Global
+
+Displays instance information at a glance.
+
+| Field | Description |
+|-------|-------------|
+| **Version** | Current Sencho version |
+| **Tier** | Community or Pro tier badge |
+| **License Status** | Active, trial, expired, or community |
+| **Instance ID** | Unique identifier for this Sencho instance (shown when a license is active) |
+| **Changelog** | Link to the full changelog on GitHub |