SideButton Marketing Website Knowledge Pack Files

Prerequisites

• Authenticated session (basic auth + session cookie)
• Browser extension connected
• Cookie consent dismissed

Phase 1: Page Load & Structure

#	Test	Method	Pass Criteria
1.1	Chat page loads	navigate to /portal/chat	Page title "Chat - SideButton Fleet"
1.2	Three-panel layout	screenshot	Sidebar + conversation list panel + main chat area visible
1.3	New Chat button (list)	snapshot	button "New Chat" present in conversation list header, orange styling
1.4	Sidebar Chat active	snapshot	link "Chat" has active/highlighted state
1.5	User info in sidebar	snapshot	Avatar initial (green circle) + email at sidebar bottom
1.6	Fleet Control branding	screenshot sidebar header	SideButton "S" logo + "Fleet Control" text + "sidebutton.com" subtitle
1.7	All sidebar nav links	snapshot	Chat, Agents, Jobs, Queue, Workflows, Settings links present

Phase 2: Empty State (no conversation selected)

#	Test	Method	Pass Criteria
2.1	Empty state icon	screenshot chat area	Orange chat bubble icon in grey circle, centered
2.2	Empty state heading	snapshot	heading "Start a conversation" visible
2.3	Empty state description	snapshot	"Chat with your assistant to run workflows, manage agents, or ask questions." text below heading
2.4	Empty state New Chat button	snapshot	Second button "New Chat" in empty state area, orange styling with "+" icon
2.5	No input bar in empty state	snapshot	No textbox "Type a message..." visible when no conversation is active

Phase 3: New Chat Creation

#	Test	Method	Pass Criteria
3.1	Click New Chat (list)	click button "New Chat" (1st) → snapshot	"New chat" entry appears at top of conversation list, highlighted
3.2	New chat placeholder	screenshot chat area	"Send a message to start the conversation." text visible in chat area
3.3	Input bar appears	snapshot	textbox "Type a message..." visible at bottom of chat area
3.4	Send button disabled	snapshot	Send button after textbox has [disabled] attribute
3.5	New chat context menu	snapshot conversation list	Three-dot button visible on "New chat" entry
3.6	Click New Chat (empty state)	navigate to empty state → click 2nd button "New Chat" → snapshot	Same behavior as clicking list New Chat button

Phase 4: Messaging

#	Test	Method	Pass Criteria
4.1	Type message	type "hello" into textbox → snapshot	Text "hello" appears in input, send button becomes enabled (no longer [disabled])
4.2	Input focus styling	screenshot textbox ref	Orange border/focus ring visible on the textbox
4.3	Send button enabled	screenshot send button area	Send button is orange (not grey) when text is present
4.4	Send message	click send button → snapshot	User message appears right-aligned with orange background
4.5	Assistant response	wait for response → snapshot	Assistant message appears left-aligned with dark grey background and border
4.6	Conversation auto-titled	snapshot conversation list	"New chat" entry renamed to auto-generated title based on message content
4.7	Message order	screenshot chat area	Messages appear top-to-bottom chronologically (user, then assistant)

Phase 5: Message Rendering

#	Test	Method	Pass Criteria
5.1	Markdown bold	send "list workflows" → wait → screenshot	Assistant response renders bold workflow slugs (not raw asterisks)
5.2	Markdown numbered list	same response	Numbered list items (1-12) properly formatted with line breaks
5.3	Multi-paragraph	verify assistant response	Multiple paragraphs render with spacing between them
5.4	User message plain text	screenshot user bubble	User messages render as plain text (no markdown processing)
5.5	Long assistant message scrolls	screenshot chat area	Chat area scrolls to accommodate long responses, all content accessible

Phase 6: Conversation Management

#	Test	Method	Pass Criteria
6.1	Select existing conversation	click conversation in list → snapshot	Messages load in chat area, input bar at bottom
6.2	Conversation highlight	screenshot conversation list	Selected conversation has highlighted background (lighter shade)
6.3	Switch conversations	click different conversation → snapshot	Chat area immediately updates with new conversation's messages
6.4	Context menu opens	click three-dot button on conversation → snapshot	button "Archive" and button "Delete" visible as dropdown
6.5	Archive conversation	click button "Archive" → snapshot	Conversation removed from list
6.6	Delete conversation	click three-dot → button "Delete" → snapshot	Conversation permanently removed, main area returns to empty state (if last selected)
6.7	Multiple conversations	create 2+ chats → snapshot	All appear in list; clicking switches between them preserving messages

Phase 7: Assistant Capabilities

#	Test	Method	Pass Criteria
7.1	Run workflow	send "run se-work for ticket SCRUM-42" → wait	Assistant confirms with "Starting se-work for SCRUM-42." or similar
7.2	Queue job	send "add qa-validate for SCRUM-42 to the queue" → wait	Assistant confirms "Queued qa-validate for SCRUM-42."
7.3	List workflows	send "list workflows" → wait	Numbered list of all available workflows with slugs and descriptions
7.4	Workflow selection prompt	verify response ending	"Reply with the number or workflow name." prompt at end
7.5	Agent routing info	send "list agents" → wait	Assistant explains routing (e.g. "I can route work to a specific agent if you name one...")
7.6	Effort level in dispatch	send "run se-work for SCRUM-42 with max effort" → wait	Job dispatched with specified effort level
7.7	Hint in dispatch	send "run se-work for SCRUM-42 hint: focus on login" → wait	Job dispatched with hint parameter

Phase 8: Edge Cases

#	Test	Method	Pass Criteria
8.1	Empty message send	clear input, verify send button	Send button remains [disabled], no empty message sent
8.2	Long message	type 500+ character message → send	Message displays correctly in orange bubble, no truncation
8.3	Rapid messages	send 3 messages quickly	All 3 appear in order, no duplicates
8.4	Page refresh	send message → refresh → navigate back	Conversation persists, messages still visible
8.5	Resize input	drag textarea resize handle	Textarea expands vertically, does not break layout
8.6	Archive from context menu during navigation	open context menu → click away	Menu dismisses cleanly without accidental archive/delete

Automation Tips

• Send button identification: No accessible label — it's the unlabeled button immediately after textbox "Type a message...". Check for [disabled] attribute to determine state
• Three-dot menu identification: No accessible label — unlabeled button immediately after each conversation title button. Pattern: button "Title" [ref=N] followed by button [ref=N+1]
• Context menu inline: Archive/Delete render as button elements inline in the DOM (not a portal). Take snapshot after clicking three-dot to get fresh refs
• Wait for assistant: After sending a message, poll with snapshots until the assistant message appears. Responses may stream — wait for completion before asserting
• Two "New Chat" buttons: When empty state is showing, there are two button "New Chat" elements. The first (lower ref) is in the conversation list header; the second is in the empty state area
• Auto-titling: After first message, the "New chat" list entry renames — take a snapshot to capture the new title
• Message bubbles not in snapshot tree: Message content may not appear in the accessibility snapshot content — use screenshot to visually verify message text and formatting
• Markdown verification: Use screenshot to verify bold, lists, paragraphs render correctly — snapshot may show raw text without formatting indicators

Known Blockers

• Streaming responses: If the assistant uses streaming, intermediate states during streaming are hard to capture deterministically
• Message content not in accessibility tree: The snapshot tree shows element structure but may not include message bubble text — screenshot is required for content verification