Portal — Chat — SideButton Marketing Website Knowledge Module

What This Is

Chat interface for Fleet Control -- the default landing page of the authenticated portal. A three-panel layout: left sidebar (Fleet Control navigation), middle panel (conversation history list with "+ New Chat" button and search bar), and right panel (active conversation messages or empty state). Users chat with an AI assistant that can run workflows on agents, queue dispatch jobs, list available workflows, list agents, and answer questions. The assistant renders markdown in responses (bold text, inline code, numbered/bullet lists, paragraphs). The portal redirects /portal to /portal/chat automatically.

URL Patterns

Pattern	Description
/portal/chat	Chat interface (default portal landing)
/portal	Redirects to /portal/chat

Page Structure

+--[Sidebar]--+--[Conversation List]--+--[Chat Area]--------------------------+
| Fleet       | [+ New Chat] button   |                                       |
| Control     | [Search conversations]| [User msg]  [Copy] (right, orange bg) |
| sidebutton  | Conversation 1  [:]   | [Asst msg]  [Copy] (left, dark bg)    |
| .com        | Conversation 2  [:]   | [User msg]  [Copy] (right, orange bg) |
|             | Conversation 3  [:]   | [Asst msg]  [Copy] (left, dark bg)    |
| Chat *      |                       |                                       |
| Agents      |                       |                                       |
| Jobs        |                       |                                       |
| Queue       |                       |                                       |
| Workflows   |                       |                                       |
| Settings    |                       |                                       |
|             |                       | +--[input: Type a message...][🎤][▷]--+ |
| [M] email   |                       |                                       |
| Log out     |                       |                                       |
+-------------+-----------------------+---------------------------------------+

Key Elements

Sidebar (shared across portal)

Element	Selector / Ref	Notes
Skip to main content	link "Skip to main content"	Accessibility skip link at very top of page
Sidebar container	complementary	Persistent left sidebar
Fleet Control brand	Sidebar header	SideButton "S" logo (green square) + "Fleet Control" heading + "sidebutton.com" subtitle
Chat nav link	link "Chat"	Active (highlighted) when on /portal/chat
Agents nav link	link "Agents"	Navigates to /portal/agents
Jobs nav link	link "Jobs"	Navigates to /portal/jobs
Queue nav link	link "Queue"	Navigates to /portal/queue
Workflows nav link	link "Workflows"	Navigates to /portal/workflows
Settings nav link	link "Settings"	Navigates to /portal/settings
User avatar	Sidebar bottom	Green circle with first initial (e.g. "M")
User email	Sidebar bottom	e.g. "[email protected]"
Log out link	link "Log out"	Ends session, redirects to /login

Conversation List Panel

Element	Selector / Ref	Notes
New Chat button	button "New Chat" (1st)	Orange button, full-width, top of conversation list panel; "+" icon + "New Chat" text
Search input	textbox "Search conversations..."	Below New Chat button. Magnifying glass icon. Filters conversation list by title match in real time (case-insensitive)
Clear search button	button "Clear search"	"x" icon, appears inside search input only when search text is entered. Clears filter and restores full list
Conversation item	button with title text	e.g. button "Agent Listing Request". Clicking loads conversation in chat area
Conversation menu (three-dot)	Unlabeled button (after each conversation)	Vertical dots icon, appears to the right of conversation title. No accessible label
Archive option	button "Archive"	In context menu dropdown. Removes conversation from list
Delete option	button "Delete"	In context menu dropdown. Red/orange text. Permanently removes conversation
New chat entry	button "New chat"	Appears when "+ New Chat" is clicked. Lowercase "New chat" title. Renamed after first message

Chat Area

Element	Selector / Ref	Notes
Empty state icon	Chat bubble icon	Orange chat icon in grey circle, centered in chat area
Empty state heading	heading "Start a conversation"	Shown when no conversation is selected (but conversations exist in list)
Empty state description	Below heading	"Chat with your assistant to run workflows, manage agents, or ask questions."
Empty state New Chat button	button "New Chat" (2nd)	Orange button below description text, "+" icon + "New Chat"
New chat placeholder	Muted text, top of chat area	"Send a message to start the conversation." -- shown when new chat is created but no messages sent yet
User message bubble	Right-aligned	Orange/amber background, white text, rounded corners. Positioned to the right edge
Assistant message bubble	Left-aligned	Dark grey background with subtle border, white text, rounded corners. Supports markdown rendering
Copy message button	button "Copy message"	One per message (both user and assistant). Copies message content to clipboard. Present in DOM for every message
Message input	textbox "Type a message..."	Bottom of chat area. Rounded border. Orange focus ring when active. Vertically resizable via CSS resize handle
Input resize handle	Right edge of textarea	Small vertical chevrons icon -- CSS resize grip, not an interactive button
Voice recording button	button "Start voice recording"	Microphone icon button between the message input and send button. Initiates voice input for the chat
Send button	button "Send message"	Circular arrow icon. Grey and [disabled] when input is empty; orange and enabled when text is entered

Data Model

Conversation

Field	Type	Description
id	string	Conversation identifier
title	string	Auto-generated from first message content; initially "New chat" before first message
messages	array	Array of Message objects
created_at	string (datetime)	When conversation started

Message

Field	Type	Description
role	string	"user" or "assistant"
content	string	Message text. Assistant messages may contain markdown (bold, inline code, lists, paragraphs)
timestamp	string (datetime)	When message was sent

Assistant Capabilities

The chat assistant can perform these actions based on natural language input:

Capability	Example Input	Assistant Response
Run workflow	"run se-work for ticket SCRUM-2 with max effort"	"Starting job se-work with the provided inputs." -- dispatches job
Queue job	"add qa-validate for SCRUM-2 to the queue"	"Queued qa-validate for SCRUM-2." -- adds to dispatch queue
List workflows	"list workflows"	Two formats observed: (1) numbered list with bold slugs + descriptions ending "Reply with the number or workflow name." or (2) bullet list of slugs ending "If you want, I can also run or queue one for you."
List agents	"list agents"	Bullet list of agents with name, status (online/busy), roles, and current job info (if busy). May also say "I can route work to a specific agent if you mention one, but I can't list available agents from here." in some contexts
Route to agent	"use agent 2 for se-work on SCRUM-5"	Routes job to specific agent

States & Variations

State	Trigger	Visual Indicator
No conversation selected	Page load with existing conversations	"Start a conversation" heading + description + New Chat button in chat area; conversations listed in middle panel
Empty (no conversations)	New account or all conversations cleared	"No conversations yet" in list panel; "Start a conversation" in chat area
New chat pending	Click "+ New Chat"	"New chat" entry highlighted in list; "Send a message to start the conversation." placeholder in chat area; input bar visible
Active conversation	Click existing conversation	Messages displayed in chat area (top-to-bottom chronological); input bar at bottom; selected conversation highlighted in list
Conversation selected	Conversation clicked	Background highlight (lighter shade) on selected conversation in list; three-dot menu icon visible
Context menu open	Click three-dot icon on conversation	"Archive" and "Delete" buttons appear as inline dropdown next to conversation title
Search active	Type in search textbox	Conversation list filters to title matches; button "Clear search" appears
Search no results	Search term matches nothing	Conversation list empty (no items shown)
Input empty (send disabled)	No text in input	Send button greyed out and [disabled]
Input has text (send enabled)	Text typed into input	Send button turns orange and becomes clickable
Voice recording available	Page loaded	Microphone button visible between input and send button
Input focused	Click/tab into textbox	Orange border/focus ring on the input textarea
Assistant responding	After user sends message	Assistant message bubble appears left-aligned with response content

Common Tasks

1. Start a new chat

1. Click "+ New Chat" button (orange, top of conversation list)
2. "New chat" entry appears highlighted in list panel
3. Chat area shows "Send a message to start the conversation."
4. Type message in input bar
5. Click button "Send message" or press Enter
6. User message appears right-aligned in orange bubble
7. Assistant response appears left-aligned in dark bubble
8. "New chat" title in list updates to auto-generated title based on message content

2. Send a message in existing conversation

1. Click conversation in list panel to select it
2. Messages load in chat area
3. Type message in textbox "Type a message..."
4. Send button becomes enabled (orange)
5. Click button "Send message" or press Enter
6. User message appended, assistant responds

3. Switch between conversations

1. Click any conversation title in the list panel
2. Chat area immediately shows that conversation's messages
3. Selected conversation gets highlighted background

4. Search conversations

1. Click textbox "Search conversations..."
2. Type search term (e.g. "SCRUM")
3. Conversation list filters in real time to show only matching titles
4. Click a filtered result to open that conversation
5. Click button "Clear search" (x icon) to restore full list

5. Archive a conversation

1. Click three-dot menu icon (vertical dots) on the conversation item
2. Context menu opens with "Archive" and "Delete" buttons
3. Click button "Archive"
4. Conversation removed from list

6. Delete a conversation

1. Click three-dot menu icon on the conversation item
2. Click button "Delete" (red/orange text)
3. Conversation permanently removed from list

7. Copy a message

1. Locate button "Copy message" associated with the target message
2. Click the copy button
3. Message content is copied to clipboard

8. Run a workflow via chat

1. Start or select a conversation
2. Type command, e.g. "run se-work for ticket SCRUM-42 with max effort and hint: focus on login"
3. Send the message
4. Assistant confirms: "Starting job se-work with the provided inputs."
5. Job is created and dispatched to an agent (visible on Jobs page)

9. Queue a job via chat

1. Type command, e.g. "add qa-validate for SCRUM-42 to the queue"
2. Send the message
3. Assistant confirms: "Queued qa-validate for SCRUM-42."
4. Item appears on Queue page

10. List available workflows

1. Type "list workflows" and send
2. Assistant responds with list of all workflows (numbered or bullet format)
3. Reply with number or workflow name to run/queue one

11. List agents

1. Type "list agents" and send
2. Assistant responds with bullet list of agents showing name, status, roles, and current job

12. Log out

1. Click link "Log out" at bottom of sidebar
2. Session ends, redirects to /login

Tips

• This is the default landing page -- /portal redirects here
• The sidebar navigation is shared across all portal pages (Fleet Control layout)
• Dark theme UI throughout the portal
• The portal is now called "Fleet Control" (rebranded from the previous publisher portal)
• User avatar shows first initial of display name in a green circle
• Conversations auto-title from the first user message content (e.g. "run se-work for SCRUM-2..." becomes "SCRUM 2 Se Work")
• Assistant messages render markdown: bold text, inline code (monospace with lighter background), numbered lists, bullet lists, and paragraphs
• Inline code is used for workflow names (e.g. qa-validate) and URLs in assistant dispatch confirmations
• The assistant can dispatch jobs, queue items, list workflows, list agents, and route work to specific agents
• The message textarea can be vertically resized using the CSS resize handle (small chevrons at the bottom-right of the input)
• A voice recording button (microphone icon) is available next to the send button for voice input
• Messages are rendered top-to-bottom chronologically -- newest messages appear at the bottom
• "New chat" in the conversation list is lowercase and temporary -- it gets renamed once the first message is sent and the assistant processes it
• Search is case-insensitive and matches against conversation titles
• The conversation list is scrollable when many conversations exist (scrollbar visible on the right edge of the list panel)

Gotchas

• Redirect: /portal always redirects to /portal/chat -- there is no separate dashboard page
• No Header/Footer: The portal uses its own sidebar layout -- no marketing site Header/Footer
• Auth required: Session auth required; unauthenticated users redirected to /login
• Three-dot menu unlabeled: The conversation context menu trigger is an unlabeled button -- identify it by position (the unnamed button immediately after each conversation title button)
• Send button is labeled: The send button has accessible label button "Send message" and is [disabled] when the input is empty
• Context menu inline: Archive/Delete appear as buttons inline in the DOM (not a portal/overlay) -- take a snapshot after clicking three-dot to get refs
• Auto-titling delay: After sending the first message in a new chat, the conversation title updates from "New chat" to an auto-generated title -- this may not be immediate
• Markdown in responses: Assistant messages render markdown -- bold, inline code (monospace background), numbered lists, bullet lists, and paragraphs
• Two "New Chat" buttons: There are two buttons labeled "New Chat" -- one in the conversation list header (always visible) and one in the empty state area (only when no conversation is active). When both exist, the list button is ref-first
• Messages top-aligned: Chat messages start from the top of the chat area, not the bottom -- unlike some chat UIs where messages are gravity-aligned to the bottom
• Copy message in DOM: button "Copy message" elements are present in the DOM for every message but may not be visually prominent -- look for them in the snapshot tree
• Two workflow list formats: The "list workflows" response can be either numbered (with descriptions) or bulleted (slugs only) depending on context -- do not assume a single format
• Context menu persists: The Archive/Delete context menu can persist across conversation selections if not dismissed -- clicking away or on another conversation dismisses it