SideButton Dashboard Knowledge Modules

The Agents page manages autonomous AI agent jobs that run in terminal processes. Users can start new agents by selecting a role and providing a prompt, monitor running agents with real-time metrics (actions, tokens, cost), view completed agent results, stop running agents, and re-queue completed agents. Agents are autonomous workflows that pick up issues and work on them (SE, QA, PM roles). The page splits into two live sections: "Running ({count})" and "Completed Today ({count})". A waiting (queued) state exists between start and active execution. Role dropdown <option> value is derived: role.name.toLowerCase().replace(/\s+/g, '-') (e.g., "Software Engineer" → "software-engineer", "PM — Portal Chat" → "pm-—-portal-chat") Note: only whitespace is replaced — em-dashes (—) are preserved in the value slug.

The Dashboard home page is the landing view of the SideButton management interface. It provides a context summary widget (active roles, matched targets, installed skill packs, persona), the currently active skill pack banner with its module cards, and a customizable shortcuts section for quick-launching workflows. When no skill pack is installed, it shows a prompt to visit the Library. Header bar: "Dashboard" headingContext Summary Widget: 4-stat bar (Roles active, Targets matched, Skill packs, Persona) — each stat is clickable (navigates to Settings or Skills)Active Skill Pack Banner: Package icon + title + domain + version + module countModules Grid (conditional): Grid of module cards from the active skill pack, each showing module name, workflow count, and optional "Run" buttonShortcuts Section (conditional): Grid of user-configured shortcut cards for quick workflow executionEmpty State: When no shortcuts and no skill pack, shows file icon + "No Dashboard Shortcuts" message + "Go to Library" button Context summary widget visible with 4 statsSkill pack banner with pack title, domain, version, module countModule cards grid (if modules > 0)Shortcuts grid (if shortcuts configured) Context summary widget visible"No pack" banner with dashed border: "Install a skill pack from the Library...""Go to Library" button Context summary + empty state with file icon"No Dashboard Shortcuts" heading"Add shortcuts from Skills or install a skill pack to get started" "Loading..." centered text while fetching data from API Opened when creating or editing a shortcutAction selector, custom name field, parameter pre-fill Opened when running a shortcut that has missing required parametersShows parameter inputs, pre-fills with last-used values

The Library page is the skill pack discovery and installation interface. It shows installed packs from external publishers, lets users connect to skill pack registries (publishers), browse available packs from those registries, and install/update packs. It's the entry point for adding new skill packs to SideButton. Legacy redirect: /workflows → /library, /workflows/{id} → /library Used for the "Installed (Other Publishers)" section — packs in $skillPacks store that are not in the current registry catalog. Browse available packs: Select registry from dropdown → catalog loads → browse pack cardsSearch packs: Type in search input → filters by name/title/description/domain (case-insensitive)Install skill pack: Find pack → click "Install" → button shows "Installing..." → toast on successUpdate skill pack: Find pack with "Update to v{version}" button → click it → same install flowManage installed pack: Click "Manage" → navigates to Skills pageAdd publisher: Click "+ Add Publisher" → enter "Registry URL or path" (+ optional "Name (optional)") → click "Add" → page reloads with new registryRemove publisher: Click "Remove" next to publisher → native confirm() dialog → removed on confirm, reinstall on cancel

The Recordings page captures and manages browser interaction recordings. Users can start recording browser actions (clicks, types, navigations, scrolls), stop recording to save the session, view recorded events with color-coded event types, delete recordings, and convert recordings into reusable workflows (basic conversion or AI-enhanced conversion). Requires the browser extension to be connected. Live recording status is pushed via WebSocket on mount. Start recording: Click .btn-primary "Start Recording" (requires browser connected) → interact in browser → events captured live via WebSocketStop recording: Click .btn-stop "Stop" → recording saved → auto-navigates to new recording detail via navigateToRecordingDetailView recording: Click .recording-card in list → detail view at /recordings/{id}Delete recording: Detail view → click "Delete" → inline confirm appears (.confirm-text) → click .btn-danger "Yes, Delete"Cancel delete: After clicking "Delete", click "Cancel" to dismiss inline confirm without deletingConvert to workflow: Detail view → click "Save as Workflow" → basic YAML workflow created → navigates to SkillsAI-convert to workflow: Detail view → click "Convert with AI" (must have API key) → LLM-optimized workflow → navigates to SkillsReload list: Click .reload-btn → refreshes recording list from APIRead raw events: Detail view → scroll .raw-section .raw-json pre block (max-height 400px, scrolls independently)

The Run Logs module covers three related views for monitoring and inspecting workflow executions: the Run Log List (history + live running workflows with KPI stats), the Run Log Detail (full event timeline for a completed run), and the Execution View (real-time streaming log for an in-progress execution). Together they form the execution observability surface of the SideButton dashboard. Clicking "Clear All" does NOT use window.confirm(). It replaces the button area with an inline confirm UI in-place. Visible only when runs.length > 0. Hidden entirely during empty state. Shown only when $runningWorkflows.length > 0. Used on both running cards and history cards. Subscribes to running-workflows-changed events on mountWhen a running workflow completes, triggers auto-refresh of run logs after a 500ms delayUnsubscribes on component destroy listRunLogs(50) — fetches up to 50 most recent completed run logsgetRunningWorkflows() — fetches currently active executions Clicking Delete replaces the button with inline confirm UI in-place. Does NOT use window.confirm(). After delete completes: navigateToRunLogs() is called automatically. Meta grid fields (one card each): Run ID, Workflow ID, Duration, Events, Triggered By, Timestamp. Shown only when runLog.params has one or more entries. Calls initWebSocket() on mount — opens real-time connection for log event streaming$effect watches $logs.length — auto-scrolls .log-container to bottom on every new entrystopWorkflow(runId) stops the execution and sets $isRunning to falseBack button remains disabled (disabled attribute) while $isRunning === true

The Settings page is the configuration hub for SideButton's AI context system and LLM provider. It has two top-level tabs: AI Context (managing persona, roles, targets, integrations, and inline contexts that get injected into every LLM call) and LLM Provider (configuring which AI model to use). The AI Context tab has five sub-tabs, making this the most complex page in the dashboard. No URL-based routing for individual tabs. Tab state resets on navigation away and back. When .btn-delete (×) is clicked, deletingFilename is set and the card transforms to: The delete inline confirm pattern is identical to Roles: .context-item.deleting with .btn-cancel-sm + .btn-delete-confirm. The inline tab has two sub-sections rendered inside .context-sections: Same visual pattern as Roles/Targets but uses deletingId state (separate from deletingFilename): Note: GitHub shows two type badges ("git" and "issues provider") because its type is an array. Bitbucket is a single-type provider.

The Skills page is the primary management interface for installed skill packs. It displays all skill packs as expandable cards showing their roles, modules, and workflows. Users can toggle individual roles ON/OFF, expand packs to browse modules and run workflows, install new packs (via Library redirect), uninstall packs, and reload all skill data. User Actions (custom workflows from the /actions directory) appear as a separate section. The Module Detail View (/skills/{domain}/{module}) is a dedicated sub-page that shows a module's skill documentation status, full workflow list with run buttons, associated roles, and recent execution history. Legacy redirects: /actions → /skills, /actions/{id} → /skills