fe: AI Assistant sidebar panel on Agents Roster page #1213

New issue

Closed

opened 2026-05-15 17:02:30 +00:00 by architect · 2 comments

architect commented

2026-05-15 17:02:30 +00:00

Collaborator

Context

Part of the Agents Roster AI Assistant feature. Decided surface: sidebar panel on the existing Agents Roster page (not modal, not full-page). Operator can see the current roster while designing the new fleet.

This ticket is the chat surface only — the structured proposal renderer + accept/edit handlers live in the next ticket.

Scope

Layout

Sidebar panel docked to the right of the roster list. Collapsible. Persists open/closed state in localStorage.
Width: ~420px default, resizable.

Chat

Free-text input (textarea, multi-line, Cmd/Ctrl+Enter to send)
Message list with operator and assistant turns
Loading state while a proposal is in flight (target first proposal < 15s per acceptance criteria)
Error states for 4xx/5xx from the endpoint (with a "retry" affordance that does NOT consume a refinement count)

Templates

Small dropdown above the input with 3 canned seeds:
- Solo dev — "I'm a solo founder shipping a [stack] SaaS. I want help with [X, Y, Z]."
- Research team — "We read a lot of PDFs, summarize them, post findings to [tool]."
- Support ops — "We triage incoming tickets and draft responses for human review."
Selecting a template prefills the input (does NOT auto-send) so the operator can edit before submitting.

Refinement UI

Counter visible: "Refinements used: 3 / 20"
When soft_cap_exceeded flag arrives from BE, show a subtle warning banner

Endpoint wiring

POST /roster/assistant/propose (from BE endpoint ticket)
Session id stored client-side for the lifetime of the panel; cleared when the operator closes the panel or accepts the fleet

Out of scope (next ticket)

Rendering the ProposalEnvelope.agents[] as editable cards
Diff-vs-previous-proposal visualization
Accept handler that writes to the roster store

For this ticket, the proposal payload can be shown as a raw JSON debug block — the next ticket replaces that with the real preview.

Deliverables

Sidebar component + roster page integration
Chat list, input, send, loading, error states
Templates dropdown
Refinement counter + soft-cap banner
Endpoint client (typed against #1210)
localStorage for panel open/closed and width
Component tests for: send flow, loading transitions, error rendering, template prefill

Notes for implementer

Confirm with the existing roster page layout that a sidebar doesn't fight the current grid. If it does, raise it on the issue before implementing — don't silently switch to a modal.

Depends on: #1210 (typed endpoint client), BE endpoint ticket (runtime)
Depended on by: FE proposal preview ticket

## Context Part of the **Agents Roster AI Assistant** feature. Decided surface: **sidebar panel** on the existing Agents Roster page (not modal, not full-page). Operator can see the current roster while designing the new fleet. This ticket is the chat surface only — the structured proposal renderer + accept/edit handlers live in the next ticket. ## Scope ### Layout - Sidebar panel docked to the right of the roster list. Collapsible. Persists open/closed state in localStorage. - Width: ~420px default, resizable. ### Chat - Free-text input (textarea, multi-line, Cmd/Ctrl+Enter to send) - Message list with operator and assistant turns - Loading state while a proposal is in flight (target first proposal < 15s per acceptance criteria) - Error states for 4xx/5xx from the endpoint (with a "retry" affordance that does NOT consume a refinement count) ### Templates - Small dropdown above the input with 3 canned seeds: - **Solo dev** — "I'm a solo founder shipping a [stack] SaaS. I want help with [X, Y, Z]." - **Research team** — "We read a lot of PDFs, summarize them, post findings to [tool]." - **Support ops** — "We triage incoming tickets and draft responses for human review." - Selecting a template prefills the input (does NOT auto-send) so the operator can edit before submitting. ### Refinement UI - Counter visible: "Refinements used: 3 / 20" - When `soft_cap_exceeded` flag arrives from BE, show a subtle warning banner ### Endpoint wiring - `POST /roster/assistant/propose` (from BE endpoint ticket) - Session id stored client-side for the lifetime of the panel; cleared when the operator closes the panel or accepts the fleet ## Out of scope (next ticket) - Rendering the `ProposalEnvelope.agents[]` as editable cards - Diff-vs-previous-proposal visualization - Accept handler that writes to the roster store For this ticket, the proposal payload can be shown as a raw JSON debug block — the next ticket replaces that with the real preview. ## Deliverables - [ ] Sidebar component + roster page integration - [ ] Chat list, input, send, loading, error states - [ ] Templates dropdown - [ ] Refinement counter + soft-cap banner - [ ] Endpoint client (typed against #1210) - [ ] localStorage for panel open/closed and width - [ ] Component tests for: send flow, loading transitions, error rendering, template prefill ## Notes for implementer Confirm with the existing roster page layout that a sidebar doesn't fight the current grid. If it does, raise it on the issue before implementing — don't silently switch to a modal. --- **Depends on**: #1210 (typed endpoint client), BE endpoint ticket (runtime) **Depended on by**: FE proposal preview ticket

architect added the

area:agents

area:dashboard

labels

2026-05-15 17:02:43 +00:00

architect referenced this issue

2026-05-15 17:03:20 +00:00

fe: proposal preview, per-agent edit, diff-vs-previous, accept-to-roster #1215

architect referenced this issue

2026-05-15 17:03:39 +00:00

meta: Agents Roster AI Assistant — tracking issue #1216