Dashboard Home — SideButton Dashboard Knowledge Module

What This Is

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.

URL Patterns

View	URL	Notes
Dashboard Home	/	Default landing page. Redirects here on 404
Module Detail	/skills/{domain}/{module}	Sub-view navigated to when a module card is clicked. Not rendered in Dashboard; listed here for traceability

Page Structure

• Header bar: "Dashboard" heading
• Context 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 count
• Modules Grid (conditional): Grid of module cards from the active skill pack, each showing module name, workflow count, and optional "Run" button
• Shortcuts Section (conditional): Grid of user-configured shortcut cards for quick workflow execution
• Empty State: When no shortcuts and no skill pack, shows file icon + "No Dashboard Shortcuts" message + "Go to Library" button

Key Elements

Context Summary Widget

Element	Selector	Notes
Roles active stat	button containing "Roles active" label	Shows {active}/{total}. Clicks → Settings
Targets matched stat	button containing "Targets matched" label	Shows {matched}/{total}. Clicks → Settings
Skill packs stat	button containing "Skill packs" label	Shows count. Clicks → Skills page
Persona stat	button containing "Persona" label	Shows persona name (truncated 120px). Clicks → Settings. Only visible if persona is configured
Stat dividers	.stat-divider	Vertical bars between stats

Active Skill Pack Banner

Element	Selector	Notes
Banner container	.skill-pack-banner	Wraps icon, title, and metadata. Absent when no pack installed
Pack icon	.banner-icon	Package emoji (📦) inside .skill-pack-banner
Pack title	heading inside .skill-pack-banner	e.g., "Skill Discovery & Web App Documentation"
Pack metadata	.banner-meta	"{domain} · v{version} · {N} modules"
No-pack banner	.no-pack-banner	Dashed-border fallback when no skill pack is active

Module Cards Grid

Element	Selector	Notes
Modules grid container	.modules-grid	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
Module card	button.module-card	Clickable — navigates to /skills/{domain}/{module} via navigateToModuleDetail(pack.domain, mod.path)
Module name	.module-card-name	Display name of the module
Workflow count	.module-card-count	"{N} workflow(s)"
Run button	button.run-btn inside .module-card	"▶ Run" — runs first workflow of that module. Only shown if module has workflows. stopPropagation prevents card navigation

Shortcuts Section

Element	Selector	Notes
Section heading	heading "Shortcuts"	Uppercase, secondary color
Shortcuts grid container	.shortcuts-grid	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
Shortcut card	ShortcutCard component	Custom name, action info, run/edit/delete/clone/reorder controls

Empty States

Element	Selector	Notes
No shortcuts state	.empty-state	File SVG icon + "No Dashboard Shortcuts" heading + description
Go to Library button	button "Go to Library"	Primary button. Navigates to /library

Modals

Element	Selector	Notes
Add/Edit Shortcut Modal	AddShortcutModal	For creating/editing dashboard shortcuts. Triggered by shortcut CRUD
Params Modal	ParamsModal	For providing workflow parameters before execution. Shows when shortcut has missing required params

Data Model

Context Summary (from /api/context/summary)

Field	Type	Notes
activeRoles	number	Count of enabled roles
totalRoles	number	Count of all roles
matchedTargets	number	Count of targets matching current page
totalTargets	number	Count of all targets
installedPacks	number	Count of installed skill packs
persona	object	{ name } — persona display name, null if not configured

Dashboard Shortcut (persisted in settings)

Field	Type	Notes
id	string	shortcut_{timestamp}_{random}
action_id	string	ID of the workflow/action to run
custom_name	string	User-defined display name
params	Record<string, string>	Pre-filled parameter values
order	number	Sort position (0-based)

Skill Module (from /api/skills/{domain}/modules)

Field	Type	Notes
name	string	Module identifier
displayName	string	Human-readable name
path	string	Module path within skill pack
workflowCount	number	Number of workflows in module
workflows	array	Workflow objects with id field

States

Default (with active skill pack)

• Context summary widget visible with 4 stats
• Skill pack banner with pack title, domain, version, module count
• Module cards grid (if modules > 0)
• Shortcuts grid (if shortcuts configured)

Default (no skill pack)

• Context summary widget visible
• "No pack" banner with dashed border: "Install a skill pack from the Library..."
• "Go to Library" button

Empty (no shortcuts, no skill pack)

• Context summary + empty state with file icon
• "No Dashboard Shortcuts" heading
• "Add shortcuts from Skills or install a skill pack to get started"

Loading

• "Loading..." centered text while fetching data from API

Modal: Add/Edit Shortcut

• Opened when creating or editing a shortcut
• Action selector, custom name field, parameter pre-fill

Modal: Params

• Opened when running a shortcut that has missing required parameters
• Shows parameter inputs, pre-fills with last-used values

Common Tasks

1. View context summary: Dashboard loads automatically. Stats show roles active/total, targets matched/total, skill packs count, persona name
2. Navigate to Settings: Click any stat in the context summary widget (Roles, Targets, or Persona)
3. Navigate to Skills: Click the "Skill packs" stat
4. Browse module: Click a module card → navigates to /skills/{domain}/{modulePath}
5. Run module workflow: Click "▶ Run" button on a module card → executes first workflow, navigates to Execution view
6. Run shortcut: Click run on a shortcut card → if all params filled, executes immediately; otherwise shows Params modal
7. Edit shortcut: Click edit on a shortcut card → opens Add/Edit Shortcut modal with pre-filled values
8. Clone shortcut: Click clone → duplicates with "(copy)" suffix appended to name
9. Delete shortcut: Click delete → browser confirm() dialog → removes on confirm
10. Reorder shortcuts: Click up/down arrows on shortcut cards → swaps position with adjacent shortcut
11. Install skill pack: Click "Go to Library" button (when no pack) → navigates to Library page

Tips

• Active skill pack selection: The dashboard shows only the FIRST skill pack from the list. There is no UI to switch between multiple installed packs on the dashboard — they are all visible on the Skills page
• Shortcut persistence: Shortcuts are saved in server settings (dashboard_shortcuts key) — they persist across sessions
• Module card Run: Only shows "▶ Run" if the module has at least one workflow. Runs the FIRST workflow (index 0)
• Stats are live: Context summary fetches fresh data on every dashboard load via fetchContextSummary()
• SPA routing: Direct URL navigation to / works. But navigating to other routes (e.g., /skills) directly in the browser address bar hits the API and returns 404 JSON — the SPA must be loaded from root first

Gotchas

• SPA 404 on direct navigation: Navigating directly to localhost:9876/skills (or any non-root route) returns {"message":"Route GET:/skills not found","error":"Not Found","statusCode":404}. The Fastify server doesn't serve the SPA for arbitrary paths — only GET / returns the HTML shell. All other routes must be reached via in-app navigation
• Snapshot labels sparse: The accessibility tree has unlabeled buttons for navigation items (ref numbers only, no text labels). Selectors must use positional references (1st button = Dashboard, 2nd = Skills, etc.) or screenshot visual matching
• No page content in snapshot: snapshot(includeContent=true) returns empty markdown content — the SPA renders dynamically and content isn't in the initial DOM snapshot accessible to the accessibility tree
• Active skill pack is first: $activeSkillPack is always packs[0] — if multiple packs are installed, only the first one shows on dashboard. No user control over which is "active"
• Confirm dialog on delete: Shortcut deletion uses browser-native confirm() — no custom modal. Cannot be intercepted by snapshot/click automation; must be handled via browser dialog events
• Grid column widths differ: Module cards use minmax(200px, 1fr) while shortcut cards use minmax(280px, 1fr) — do not assume uniform layout when targeting by position
• Module card click vs Run button: Clicking anywhere on button.module-card navigates to the module detail view. The inner button.run-btn calls stopPropagation so it runs the workflow without triggering navigation — when automating, target .run-btn explicitly to avoid accidental navigation
• On-mount fetches: Dashboard fires fetchContextSummary(), fetchWorkflows(), fetchActions(), getSettings(), and fetchSkillPacks() simultaneously on mount. Any one failing silently can leave a section empty without an error message — check network responses if a section appears missing