Skip to content

feat(agent): interactive AI assistant panel — tool-call rows, swatches, previews, titles#133

Merged
DavidBabinec merged 16 commits into
mainfrom
feat/agent-tool-call-rows
Jul 1, 2026
Merged

feat(agent): interactive AI assistant panel — tool-call rows, swatches, previews, titles#133
DavidBabinec merged 16 commits into
mainfrom
feat/agent-tool-call-rows

Conversation

@DavidBabinec

@DavidBabinec DavidBabinec commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

What changed

A pass of polish + interactivity on the site editor's AI assistant panel, built on current main.

Tool-call rows

  • Each agent tool call renders as a compact row: per-tool category icon (swatch, code, eye, database, …), a human label ("Updating color tokens", "Inserting HTML", "Capturing preview"), a muted detail after a middle dot, and a status glyph (check / spinner / alert).
  • Tone colours: amber for token/style tools, green for writes, red for destructive, muted for reads.
  • A toolCallDisplay map turns each actionType into that presentation; tool names are canonicalised so both historical short names and current site_*/content_* names resolve.
  • Consecutive same-role messages group under one label, and consecutive tool calls stack tightly in one container.

Interactive tool rows

  • Colour swatches — a set_color_tokens row shows a swatch per token (from params.tokens[].lightValue), composited over a neutral base with a hairline ring like the Framework home palette.
  • Inline previewrender_snapshot renders the captured PNG inline so you see what the agent is looking at. Captured in the browser toolRequest handler and held in memory only (screenshotDataUrl); never posted or persisted, so it rehydrates empty after a reload.

Conversation titles

  • Conversations were stuck on "New conversation". The chat handler now derives a short title from the first user prompt (only while the title is still the default, so a renamed chat is never clobbered).

Message layout

  • Dropped the chat-bubble treatment: messages render left-aligned at full width, no border/background. User prompt muted, assistant reply bright. Renamed *Bubble classes to messageTurn / messageText / markdownText.

Notes

Verification

  • tsc -b clean · bun test src/__tests__/panels/agentPanel.test.tsx 5/5 · eslint clean on touched files.

@DavidBabinec DavidBabinec changed the title feat(agent): compact tool-call rows in the agent panel feat(agent): polish the AI assistant panel — tool-call rows, titles, message layout Jul 1, 2026
@DavidBabinec DavidBabinec changed the title feat(agent): polish the AI assistant panel — tool-call rows, titles, message layout feat(agent): interactive AI assistant panel — tool-call rows, swatches, previews, titles Jul 1, 2026
DavidBabinec and others added 16 commits July 1, 2026 12:36
Render each agent tool call as a single-line row — status icon, bold bright title, middle-dot separator, muted detail — instead of a pill, and coalesce consecutive tool calls into one container so a run of tools stacks tightly (1px grid gap). Groups form per message via groupMessageBlocks; text blocks stay separate bubbles in emission order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ped turns

Restore the full tool-call design on main's AgentPanel: a toolCallDisplay map turns each actionType into a friendly title ("Updating color tokens", "Inserting HTML", "Capturing preview"), a compact detail, a category icon (swatch/code/eye/…), and a tone (amber style, green write, red destructive). Names are canonicalised so both historical short names and current site_*/content_* names resolve. Consecutive same-role messages group under one label, and consecutive tool calls stack tightly in one container.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Conversations were all stuck on the placeholder title "New conversation". The chat handler now derives a short title from the first user prompt (collapse whitespace, cap 60 chars) and applies it via updateConversationForUser — only while the title is still the default, so a user-renamed chat is never clobbered. Adds DEFAULT_CONVERSATION_TITLE + deriveConversationTitle to the conversation store.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Drop the chat-bubble treatment: both user and assistant messages now render left-aligned at full width with no border or background. The user's prompt reads muted, the assistant's reply bright. Renames the now-inaccurate bubble classes (messageBubble→messageTurn, contentBubble→messageText, markdownBubble→markdownText).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
When the agent runs set_color_tokens, render a row of colour swatches beneath the tool row — one per token, from params.tokens[].lightValue — composited over a neutral base with a hairline ring, matching the Framework home palette. Params are read defensively (they arrive as unknown from the tool-call stream).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The browser already captures a PNG for render_snapshot but discards it after handing it to the model. Capture it in the toolRequest handler (from the tool output's image channel) and stash it on the matching pending tool-call block, so the panel renders it inline — you see what the agent is looking at. Held in memory only (new screenshotDataUrl field on AgentToolCall); never posted to the server or persisted, so it rehydrates empty after a reload.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Message text steps up to text-m / weight 500 / muted (both roles), with a larger space-m gap between a turn's blocks. Tool-call rows sit on a stronger --overlay-10 surface with a 12px radius and uniform --space-xs padding.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ol rows

Colour swatches now match the Framework home palette: full-width pill cells (input-radius), a little tall, with a 1px gap, and each wrapped in the shared Tooltip showing 'slug · value'. Tool-row title/detail step up to text-m to match the message text.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Starting a new chat (or deleting the active conversation) reset the active credential + model to null but never re-resolved the scope default, so the composer dropped to the "choose a model" lock even with a default configured. Both paths now re-run loadScopeDefault after the reset. loadScopeDefault also soft-fails a failed defaults lookup (logs + leaves the picker empty) instead of rejecting, so the fire-and-forget callers can't produce an unhandled rejection.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Conversations are deleted from the history dropdown, so the header trash button was redundant. Removes it and the now-unused clearAgentMessages binding (the store action stays — startNewAgentConversation still uses it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Each turn's role marker now shows a small avatar and a relative timestamp instead of a bare "You"/"Assistant". The user reuses their Gravatar (UserAvatar, same as the toolbar); the agent gets the robot glyph in a matching circle. Relative time comes from the turn's first message; formatRelativeTime is extracted to a shared module so the history list and markers agree.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deleting a conversation or loading the conversation list failed silently (console-only). Per the toast-bus rule, these user-triggered operation failures now surface a toast (kept the console.error for operator logs). loadScopeDefault stays a console-only soft fallback — it degrades gracefully and the actionable no-provider error surfaces at send time.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Colour swatches grow to 24px tall with 6px (space-xs) top/bottom padding around the row (1px gap unchanged). The agent's role avatar swaps the AI-box glyph (which duplicated the panel's header chip) for the sparkles glyph, which reads better as an identity avatar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reuse AiBoxSolidIcon — the shared AI glyph already used in the toolbar toggle and empty state — for the agent's role avatar, for consistency across the AI surfaces.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
AgentPanel.tsx had grown past the 700-line module-size ceiling after the tool-row work. Move ToolCallRow (plus its category-icon map and tone-class helper, and the ~19 icon imports) into ToolCallRow.tsx, dropping AgentPanel.tsx from 737 to 604 lines. Behaviour-preserving.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@DavidBabinec
DavidBabinec force-pushed the feat/agent-tool-call-rows branch from d37b3c7 to 662f870 Compare July 1, 2026 10:46
@DavidBabinec
DavidBabinec marked this pull request as ready for review July 1, 2026 10:46
@DavidBabinec
DavidBabinec merged commit 0f4f47e into main Jul 1, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant