Copilot UI

Where copilot insights live: the sidebar panel, the dashboard widget, the Cmd+Shift+K shortcut, category and severity filters, feedback flow, and local CSV/JSON export.

Updated

Phase 5, M34, extended in Phase 6. Surfaces the proactive insights generated by the Copilot Service in two places: a right-side sidebar panel that you can toggle at any time, and a compact dashboard widget embedded in the Cards subview. Phase 6 adds feedback suggestions, category/severity filters, and local CSV/JSON export.

Prerequisite: the Copilot Service must be enabled. Check Settings → Runtime → Copilot. The underlying analyzer runs through the Copilot Service.

Opening the sidebar

Three equivalent entry points, all toggling the same state:

Entry pointBehaviour
Cmd+Shift+K (macOS) / Ctrl+Shift+K (Windows / Linux)Global shortcut, works from any tab, including Settings and the command palette.
Sparkles toolbar button (top-right of the top bar)Single-click toggle. aria-pressed reflects the current state.
”View all (N) / Open sidebar” link on the dashboard widgetOnly visible when the widget is rendered (Dashboard → Cards).

Close by pressing Esc, clicking outside the panel, clicking the Sparkles button again, or pressing the same Cmd+Shift+K shortcut.

The sidebar is a Radix Sheet component, it ships with focus trap, keyboard navigation, and role=dialog semantics so screen readers announce it correctly.

Insight cards

Each active insight renders as a card. Anatomy, left to right:

  • Severity stripe, 4px-wide colour accent on the left edge.
    • Red, critical
    • Amber, warning
    • Blue (sky), info
  • Category icon, a rounded badge showing the category domain:
    • Activity (zap), operational
    • DollarSign, cost
    • Users, org
    • GitBranch, workflow
    • AlertTriangle, anomaly
  • Severity badge + category badge, the text labels that back up the colour coding. Severity colour is never the sole meaning carrier (WCAG AA).
  • Title, single-line summary of the finding.
  • Detail, 2,3 sentences of context. On the dashboard widget the detail clamps to two lines; the sidebar renders the full text.
  • Action button (optional), when the underlying insight has an actionIntent + actionEntities pair, a subtle outline button appears with the suggested action text.
  • Dismiss (X) button, top-right of every card. Clicking it marks the insight as dismissed (records dismissedAt) and removes it from the active feed. Repeated dismissals in the same category can surface an advisory weight suggestion.

Sort order

Both the sidebar feed and the dashboard widget use the same comparator:

  1. Severity first, critical > warning > info.
  2. Newest first within a severity bucket, higher createdAt wins.

The dashboard widget caps at 3 cards regardless of total. The footer shows View all (N) when there are more; Open sidebar otherwise.

Exporting insights

Use the sidebar controls to save active insights locally:

  1. Open the Copilot sidebar.
  2. Optionally filter by Category or Severity.
  3. Choose Company for the current workspace, or All companies for a global export using the same filters.
  4. Click CSV or JSON.

The export writes to a local file and the sidebar displays the saved filename when it completes. Export does not sync, share, upload, or open a native save dialog.

Feedback suggestions

When you dismiss three insights in the same category, the sidebar can offer to lower that category’s feedback weight. Applying the suggestion updates the local Copilot category weights and records copilot.weights.changed in the Audit tab.

The suggestion is advisory. It does not disable a category, delete past insights, or change any write-side permission.

Acting on an insight

When you click an insight’s action button the renderer fires a standard command.execute call through the M30 pipeline. Every safety gate fires normally:

  • Destructive intents (fire, close, end, promote) trigger the red confirmation dialog from M30 T5 before anything happens.
  • Write-side agentic intents (decompose a project, delegate, review) trigger the amber confirmation dialog from M32 T5.
  • Non-destructive actions run immediately with an undo toast.

Copilot-dispatched actions are tagged actorId: 'copilot' in the audit log so you can distinguish them from direct palette commands.

Ask the Copilot

The textarea at the bottom of the sidebar is a free-form question input. Type a question (e.g. “What’s blocking the frontend team?”) and submit with:

  • Cmd/Ctrl+Enter, primary keyboard shortcut.
  • Send icon button, to the right of the textarea.

On submit:

  1. copilot.ask IPC fires with your text. It routes through the M31 agentic loop with the hidden system-copilot pseudo-employee as the actor, which has read-only access to the full insights history plus five other introspection tools (query_employees, query_tickets, etc.).
  2. The sidebar closes automatically.
  3. The chat drawer opens on the returned system-copilot thread, the same read-only step transcript layout M31 uses for palette-driven complex requests.

While the loop runs you’ll see the streaming plan → tool_call → tool_result → answer step log inside the drawer. The answer is persisted to the thread so you can revisit it later without re-running the loop.

Empty, loading, and error states

  • Loading, spinner in the feed area while the first copilot.insights query is in flight.
  • Empty (“All clear”), sparkles icon + reassuring message when no insights are active. The copilot continues to analyze in the background on its configured interval.
  • Error, if the main-process IPC fails, an inline retry button appears. The error is almost always a transient condition (analyzer mid-restart, test-mode DB switching); retry once.

Accessibility

  • All three entry points (shortcut, toolbar button, widget link) are keyboard operable.
  • Severity colour is never meaning-bearing alone, text badges and aria-label attributes carry the semantics.
  • Feed markup is semantic <ul> → <li> (the states sit as siblings of the <ul> so the list never contains non-<li> children).
  • Minimum 44px touch targets on action and dismiss buttons.
  • The Sparkles toolbar button exposes aria-pressed state.
  • Focus trap inside the sidebar (inherited from Radix).
  • Copilot Service produces the insights this UI renders.
  • Command Palette is the action-dispatch path for suggested actions.
  • Task Planner is the write-side gate for decompose_project, delegate_subtask, and review_deliverable.
  • Keyboard Shortcuts includes Cmd+Shift+K / Ctrl+Shift+K.
  • Phase 6 capability evidence covers feedback, filters, telemetry, and export.