feat: Rich UI widgets for Agent sidebar#4792
Open
bender-rodriguez-unit1 wants to merge 46 commits into
Open
Conversation
added 22 commits
May 14, 2026 16:31
- Parser for :::type blocks (buttons, confirm, chart, collapse, steps, success/error) - Widget components: ButtonsWidget, ConfirmWidget, ChartWidget, CollapseWidget, StepsWidget, BannerWidget - RichMessage component replaces AgentMarkdown with full widget support - Storybook stories for all widgets - Button/confirm clicks auto-send as user messages - Added recharts dependency for data visualization
- Added shadcn chart + card components - ChartWidget now uses ChartContainer, ChartTooltip, ChartLegend - Added dedicated chart stories (7 variants with realistic data) - Proper theming via CSS variables, matches design system
- MermaidWidget renders flowcharts, sequence diagrams, state diagrams - Parser extracts ```mermaid code blocks as mermaid segments - Storybook stories: canvas flowchart, deploy pipeline, sequence diagram, state diagram, topology - Graceful error handling for invalid mermaid syntax
- Switched from neutral to base theme with custom themeVariables - Violet primary nodes, cyan secondary, amber tertiary - Slate lines and text, matching app design system - Added rounded container with subtle border/background
All mermaid diagram types with realistic SuperPlane data
- Added table Tailwind classes: borders, header bg, hover rows, compact padding - Stories: SimpleTable (node list), RunHistoryTable, NodeComparisonTable
- Even rows get subtle slate background - Hover highlights in violet tint for easier row tracking
- Buttons now render as a card with violet header (question) and option list - Each option has a letter badge (A, B, C...) for quick reference - Parser extracts non-list lines as prompt text - New syntax: prompt text goes above list items inside :::buttons block
- CodeBlockWidget uses Monaco editor (same as rest of app) - Language header bar with copy and expand buttons - Copy button: clipboard with checkmark feedback - Expand button: opens fullscreen Dialog modal with line numbers - Replaces plain pre/code blocks via ReactMarkdown components override - Auto-height based on line count (max 250px inline, 60vh modal) - Stories: YAML, Bash, JSON code blocks
Agent responses from DB sometimes have leading spaces on every line. Updated regexes to allow optional whitespace before ::: and ``` markers.
js-yaml exports load(), not parse(). The parser was silently catching the error and returning fallback configs with no data.
- Expand button (top-right, shows on hover) opens fullscreen dialog - Mouse wheel to zoom (0.2x to 5x) - Click and drag to pan - Zoom +/−/Reset controls in toolbar - SVG rendered without max-width constraint in modal for full detail
- Charts: rounded border + light slate background - Tables: matching light background - Steps: same card wrapper - Visually separates rich elements from surrounding text
Gray-on-gray was hard to distinguish. Switched to: - bg-white for contrast against slate-100 message bubble - border-violet-200 for brand color accent - shadow-sm for subtle depth
Both were too narrow for comfortable reading
shadcn Dialog default caps at sm:max-w-lg. size=large removes that, allowing our w-[90vw] h-[85vh] to take effect.
- Changed h-[85vh] to max-h-[85vh] so modals shrink to fit - Code modal: Monaco height based on line count (200px min, 70vh max) - Mermaid modal: reduced min-height to 40vh
- New ANTHROPIC_FILE_IDS env var (comma-separated) - Files uploaded via Anthropic Files API get attached as session resources - Agent can read /mnt files without bloating the system prompt - Uploaded rich-ui-widgets.md as file_011Cb2wto497ecaBLNAPvJLv
Long option text now wraps naturally instead of being cut off with nowrap
|
👋 Commands for maintainers:
|
superplane-policy-bot
Bot
requested review from
forestileao,
lucaspin and
shiroyasha
added 4 commits
May 14, 2026 19:32
Skills handle reference files now — the per-session file attachment code is dead. Reverts changes to docker-compose, config, provider, client, and server.
Cursor-style: consecutive tool calls collapse into a single row 'Ran 8 commands ▸' that expands to show individual commands. Each command shows first line preview when expanded.
…style - Group header: slate-700 text instead of pale gray - Individual commands: preview as truncated first line - Expanded command: renders below in a code block card (white bg, border, mono font) - Max height 200px with scroll for long commands
Agent outputs [#abc123](run:UUID) in markdown, rendered as violet pill chips with play icon. Click navigates to the run view. Storybook stories: inline, in tables, with charts.
ReactMarkdown strips unknown protocols by default. Custom urlTransform preserves run: links so RunChip renders.
- Rabbit icon instead of play - Label shows truncated run title (max 30 chars) - Status-based colors: green (passed), red (failed), amber (running), violet (unknown) - Syntax: [Run Title](run:UUID|status)
Pipe character conflicts with GFM table parsing in markdown. Syntax: [Title](run:UUID~status)
No more manual title/status in the syntax. Just [run](run:UUID). The chip reads the run's state and result from the cached canvas runs data. Shows short ID + trigger component name.
Same badge styles as RunsSidebar: emerald for passed, red for failed, blue for running, gray for cancelled, slate for unknown. Uses ring-inset for consistent look with existing run status badges.
Shows all status colors: emerald (passed), red (failed), blue (running), gray (cancelled)
Shows status, duration, start/finish times, and node execution list with colored dots per step. Uses shadcn HoverCard.
Uses useQuery with shared 'agent-run-chips' key — one fetch for all chips on the page. Falls back to existing canvas runs cache first. Chips immediately show correct status colors without needing the Runs tab open.
Agent provides [Title](run:UUID~status) — chip just renders it. Removed hover card, query hooks, cache lookups. Much simpler.
Agents can now reference canvas nodes using markdown syntax: [label](node:node-id) NodeChip features: - Purple badge for triggers, blue for actions - Shows integration icon + node label - Click to select node, open sidebar, and zoom to node on canvas - Hover card displays full ComponentBase preview - Falls back gracefully for missing nodes Wired into RichMessage alongside RunChip. Supports node: protocol in markdown links. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
AgentSidebar renders outside ReactFlowProvider context. Use URL navigation only for node selection (?sidebar=1&node=id).
- Uses SuperplaneComponentsNode (API type) not BlockData (React Flow type) - Hover card: header with icon/name/component, config summary, connection count, error display - Config summary extracts key field per component type (URL for http, expression for if, etc.) - whitespace-nowrap on chip to prevent text wrapping - Removed ComponentBase/Trigger imports that required incompatible data shapes
Maps http→Globe, wait→Clock, webhook→Webhook, start→Play, if→Split, filter→Filter, ssh→Terminal, approval→Hand, merge→Merge, schedule→Clock. Falls back to integration icon (getHeaderIconSrc) for vendor components.
Uses custom DOM event 'agent:focus-node' to bridge the gap between AgentSidebar (outside ReactFlowProvider) and CanvasPage (inside it). Chip dispatches event → canvas page listens → fitView + select node.
- Revert storybook allowedHosts (dev-only config, shouldn't ship) - Fix parser.test.ts: parseAgentMessage → parseAgentContent - Rewrite NodeChip stories with correct API types (no trigger/action sub-objects) - Remove ReactFlow/ReactFlowProvider imports from stories - Slim down widgets/index.ts barrel exports
bender-rodriguez-unit1
force-pushed
the
agent-rich-ui
branch
from
45d66d5 to
10c56a1
Compare
- Click anywhere on diagram opens the modal (removed expand button) - Default zoom 250%, reset returns to 250% - Hover border change for click affordance
bender-rodriguez-unit1
force-pushed
the
agent-rich-ui
branch
from
10c56a1 to
b104ab6
Compare
added 3 commits
May 14, 2026 22:43
Wraps tables in overflow-x-auto div so wide tables scroll instead of overflowing the chat bubble.
- Fix useCallback called conditionally (move before early return) - Remove unused 'i' parameter in map - Fix @storybook/react → @storybook/react-vite imports - Fix edges possibly undefined in NodeChip - Fix parser tests (buttons prompt field, collapse syntax) - Remove unused card.tsx and widgets/index.ts barrel (knip) - Run Prettier on all changed files
Transitive dep of mermaid via d3-delaunay. Public domain, compatible with Apache-2.0.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Rich interactive widgets rendered inside the Agent sidebar chat. The agent outputs special fenced blocks (
:::type) in markdown; the frontend parses and renders them as interactive components.Widgets
:::buttons:::confirm:::chart:::collapse:::steps:::success/:::errorTechnical
widgets/parser.ts): splits markdown into segments, handles:::blocks and mermaid fencesAgentMarkdownin the sidebarDependencies
recharts(via shadcn/ui chart component)mermaid(diagram rendering)Other changes
allowedHosts: truefor external accessdocker-compose.dev.yml:ANTHROPIC_FILE_IDSenv varpkg/agents/anthropic: attach file resources to sessions on creationpkg/config: parseANTHROPIC_FILE_IDSenv varStorybook
Preview all widgets: https://storybook.bender.efodconsulting.com/