SideButton Dashboard Knowledge Pack Files

Settings — QA Test Playbook

Prerequisites

• SideButton server running on localhost:9876
• Browser extension connected
• Navigate to SPA root (localhost:9876) first — direct /settings navigation returns Fastify 404 JSON
• At least one role and one target configured for CRUD tests

Phase 1: Page Load & Structure

#	Test	Method	Pass Criteria
1.1	Settings page loads	Click sidebar button:has-text("Settings")	"Settings" h1 heading + Back button visible; no loading error
1.2	Top-level tabs present	snapshot	"AI Context" tab (active/underlined) + "LLM Provider" tab visible
1.3	Default tab on load	Navigate fresh to /settings	AI Context tab is active, Persona sub-tab selected by default
1.4	Sub-tab badges show counts	snapshot sub-tabs	Count numbers visible on Roles, Targets, Integrations, Inline tabs
1.5	Persona description text	snapshot under sub-tabs	Text "Your persona — injected into every LLM call" visible
1.6	Back navigation	Click "Back" button	Returns to previous page
1.7	Tab resets on re-navigate	Navigate away and back	Returns to AI Context > Persona (component-local state resets)

Phase 2: Persona Sub-Tab

#	Test	Method	Pass Criteria
2.1	Persona textarea present	snapshot Persona sub-tab	Monospace textarea with persona markdown content visible
2.2	Character count shown	snapshot	Right-aligned "{N} chars" text visible above/near textarea
2.3	Save disabled when clean	No edits made	button "Save Persona" is [disabled]
2.4	Save enabled after edit	Type any character in textarea	"Save Persona" button becomes enabled (dirty tracking)
2.5	Save persona	Edit textarea → click "Save Persona"	.success-banner appears (green). Screenshot immediately — auto-hides after 3s

Phase 3: Roles Sub-Tab

#	Test	Method	Pass Criteria
3.1	Roles list loads	Click "Roles" sub-tab	Role items with name, match tags, description text visible in list
3.2	Role item structure	snapshot .context-item	Bold name + .tag.match badge(s) + description text + toggle switch on right
3.3	System role badge	snapshot system role	.tag.system "system" gray badge visible on roles with filenames starting _
3.4	Actions hidden by default	snapshot without hover	Edit and × buttons NOT visible (opacity: 0) on role cards
3.5	Actions reveal on hover	hover over .context-item → screenshot	"Edit" and "×" buttons appear on right side of card
3.6	System role has no delete	Hover over system role	"×" button is NOT rendered (not just hidden) for system roles
3.7	Toggle switch custom button	snapshot .toggle-switch	button.toggle-switch present (NOT native checkbox/radio)
3.8	Toggle off state	snapshot disabled role	Toggle shows gray background; no .on class
3.9	Inactive role opacity	screenshot role with enabled=false	.context-item.inactive renders at reduced opacity (~0.5)
3.10	Add Role button	snapshot top of list	button "+ Add Role" visible at top-right

Phase 3b: Roles — Inline Delete Confirm Flow

#	Test	Method	Pass Criteria
3b.1	Click × opens confirm	Hover role → click "×" .btn-delete	Card transforms to .context-item.deleting with red-tinted background
3b.2	Confirm text	snapshot deleting card	p inside .context-item.deleting shows Delete "{name}"? in red
3b.3	Cancel button present	snapshot deleting card	.btn-cancel-sm "Cancel" button visible
3b.4	Delete confirm button	snapshot deleting card	.btn-delete-confirm "Delete" button visible (red)
3b.5	Cancel dismisses confirm	Click "Cancel"	Card reverts to normal; role still in list; delete NOT executed
3b.6	NO browser confirm()	Observe carefully when clicking ×	Browser does NOT show window.confirm() dialog; it's all inline UI

Phase 4: Targets Sub-Tab

#	Test	Method	Pass Criteria
4.1	Targets list loads	Click "Targets" sub-tab	Target items with name, domain match tags, description, toggle visible
4.2	Provider targets excluded	snapshot full list	Targets with a provider field do NOT appear (managed via Integrations)
4.3	Add Target button	snapshot	button "+ Add Target" visible at top-right
4.4	Toggle target	Hover → click button.toggle-switch	Toggle state changes (on/off). API auto-saves; scroll position preserved
4.5	Edit target	Hover → click "Edit"	RoleTargetModal opens pre-filled with target's name, match, body

Phase 4b: Targets — Inline Delete Confirm Flow

#	Test	Method	Pass Criteria
4b.1	Click × opens confirm	Hover target → click "×"	Same inline confirm pattern as Roles: .context-item.deleting with red bg
4b.2	Confirm text	snapshot deleting card	p shows Delete "{name}"? in red (#b91c1c)
4b.3	Cancel	Click .btn-cancel-sm "Cancel"	Card reverts; target NOT deleted
4b.4	Execute delete	Click .btn-delete-confirm "Delete"	Target removed from list

Phase 5: Integrations Sub-Tab

#	Test	Method	Pass Criteria
5.1	Provider cards present	Click "Integrations" sub-tab	Cards for Jira, Slack, GitHub, Bitbucket (and others) visible
5.2	Provider type badges	snapshot provider header	.tag.match badge(s) showing type(s) — e.g., "issues provider", "git" (multi-type providers show multiple badges)
5.3	Not connected status	snapshot unconnected provider	.tag.provider-not-configured gray badge "Not connected"
5.4	Ready connector status	snapshot GitHub CLI (gh)	"Ready" in green text (.req-met) — even when not selected as active
5.5	Missing env var status	snapshot Jira REST API	Orange-brown monospace text "Missing: {VAR_NAMES}"
5.6	CLI not detected status	snapshot Jira CLI (acli)	Orange-brown text "CLI not detected: acli"
5.7	Feature level labels	snapshot connectors	"Full Features" or "Basic Features" text on right side of connector row
5.8	Setup button expands	Click "Setup" on any connector	Button label changes to "Hide setup"; .setup-instructions panel appears below
5.9	Setup instructions content	snapshot expanded setup panel	Instruction text + cyan code badge(s) for required env var names
5.10	Hide setup collapses	Click "Hide setup"	Setup panel hidden; button reverts to "Setup"
5.11	Connector radio select	Click radio input[type="radio"] on a connector	Radio becomes checked; connector row gains .connector-row.active (blue border/bg); auto-saves
5.12	Integrations badge = connected	Check badge count on sub-tab	Count shows only providers where connected === true

Phase 6: Inline Sub-Tab

#	Test	Method	Pass Criteria
6.1	Inline tab structure	Click "Inline" sub-tab	"LLM CONTEXTS" section heading + "ENVIRONMENT VARIABLES" section heading visible
6.2	Add button	snapshot	button "+ Add" visible at top-right
6.3	LLM context item	snapshot existing context	.context-item with tag (Global/Industry/Domain) + truncated .context-text preview
6.4	Global tag	snapshot item with no industry/domain	.tag.global gray badge "Global"
6.5	Env vars empty state	View with no env vars configured	"No environment variables configured" + "Add variables accessible via {{env.name}}"
6.6	LLM context edit	Hover context item → click "Edit"	ContextModal opens pre-filled with type, industry/domain, context text
6.7	Inline badge = total count	Check badge on sub-tab	Count equals total of LLM contexts + env variables combined

Phase 6b: Inline — Delete Confirm Flow

#	Test	Method	Pass Criteria
6b.1	LLM context × opens confirm	Hover LLM context → click "×"	Card transforms to .context-item.deleting
6b.2	LLM context confirm text	snapshot deleting card	Text "Delete this context?" inside deleting card
6b.3	Cancel	Click .btn-cancel-sm "Cancel"	Confirm dismissed; context remains
6b.4	Execute delete	Click .btn-delete-confirm "Delete"	Context removed; tab badge count decrements

Phase 7: LLM Provider Tab

#	Test	Method	Pass Criteria
7.1	LLM Provider tab layout	Click "LLM Provider" top tab	Two-column layout: left = form, right = status panel
7.2	Provider dropdown is native select	snapshot	select#provider native element with OpenAI/Anthropic/Ollama options
7.3	Provider auto-fills on change	select_option() to "Anthropic"	Base URL → https://api.anthropic.com; Model → claude-3-5-sonnet-latest
7.4	API Key field masked	snapshot API Key field	input#api-key renders as password type; placeholder "sk-..."
7.5	API Key show/hide toggle	Click "Show" button next to API Key label	Input type toggles password ↔ text; button text changes "Show" ↔ "Hide"
7.6	"..." action buttons	snapshot Base URL + API Key inputs	Small "..." button visible inside each input field (right side)
7.7	Test Connection button	snapshot form	"Test Connection" secondary button + "Save" primary button below Model field
7.8	Status panel fields	snapshot right column	"LLM Configured", "Provider", "Model" rows with current values
7.9	LLM Configured: No	View status with no API key	"LLM Configured" shows "No" in red
7.10	Save config	Fill API key → click "Save"	"Saving..." shown briefly; .success-banner green appears; status "LLM Configured: Yes"

Phase 8: Modals — RoleTargetModal

#	Test	Method	Pass Criteria
8.1	Add Role modal opens	Click "+ Add Role"	Modal opens with "New Role" or similar heading
8.2	Modal fields — role	snapshot modal	Name input (required), Match patterns input, Body textarea visible
8.3	Name required	Submit without name	Validation error or submit disabled
8.4	Match patterns format	Enter "@engineering" in match	Pattern accepted; shown as tag on saved role
8.5	Modal cancel	Close/cancel modal	Modal closes; no role added to list
8.6	Edit role pre-fills	Hover role → click "Edit"	Modal opens with existing name, match, body values populated
8.7	Add Target modal	Click "+ Add Target"	Modal opens in target mode; fields: Name, Match patterns (domains/globs), Body

Phase 9: State Tests

#	Test	Method	Pass Criteria
9.1	Loading state	Observe page on first load	.loading div "Loading settings..." visible briefly
9.2	Error banner	Trigger API failure (e.g., invalid operation)	.error-banner red banner appears above tab content
9.3	Success banner	Save any setting successfully	.success-banner green banner visible; auto-hides after ~3s
9.4	Saving state	Click "Save" in LLM Provider	Button shows "Saving..." text and is disabled during save
9.5	Testing state	Click "Test Connection"	Button shows "Testing..." and is disabled during test
9.6	Test result auto-hides	Wait after test completes	.test-result message visible then disappears after ~4s
9.7	Inactive item opacity	screenshot a disabled role/target	Card renders visually dimmed (opacity ~0.5) via .context-item.inactive
9.8	Item actions hover-only	snapshot role card without hover	Edit and × buttons NOT present/visible in snapshot at rest

Automation Tips

• No URL-based tab state: All tab/sub-tab selection is component-local. Navigate away and back always resets to AI Context > Persona. Cannot deep-link to a sub-tab
• SPA root required: Load localhost:9876 first, then navigate in-app. Direct /settings returns Fastify 404 JSON
• Inline delete is NOT window.confirm(): Both Roles/Targets × button and Inline tab × button use in-page inline confirm (.context-item.deleting with .btn-cancel-sm + .btn-delete-confirm). No browser dialog to dismiss
• Toggle switch is a custom button: button.toggle-switch — NOT a native <input type="checkbox">. Use click() by ref, not select_option()
• Provider dropdown IS native: select#provider in LLM Provider tab is a real <select>. Use select_option() for automation
• Item actions are hover-only: Edit and × buttons have opacity: 0 at rest. They appear on .context-item:hover. Use hover() before snapshotting to get refs, or use direct ref-click after hovering
• Banners auto-hide: Success banners hide after 3s, test result hides after 4s. Screenshot immediately after action
• Multi-type providers: Providers like GitHub show multiple type badges ("git", "issues provider") — one badge per type
• Provider "Ready" ≠ Connected: A connector showing "Ready" in green means env vars are set, but the provider status is still "Not connected" unless a radio is selected (active connector)
• Connector radio deselects on re-click: Clicking an already-active connector's radio calls handleConnectorChange(prov.id, null) — deactivates it, reverts provider to "Not connected"
• Scroll position preserved on role/target toggle: preserveScroll() is called on toggle — list does not scroll to top after toggle action
• Inline tab section headings uppercase: "LLM CONTEXTS" and "ENVIRONMENT VARIABLES" headings appear uppercase via CSS — underlying content may be mixed-case

Known Blockers

• File upload fields: None observed in current settings UI
• Setup instructions expand via click: Native browser Setup panel — automatable via click() on "Setup" button and waiting for .setup-instructions to appear
• Connector radio auto-saves: No explicit Save button for connector selection — change fires immediately on radio onchange. Cannot stage and cancel