AI Manager prototype experience audit¶
Status: Current | Last reviewed: 2026-09-23
Use this audit to compare the root index.html prototype with the current AI Manager experience before deciding which visual and interaction changes to adopt. It contains 201 itemized observations, including explicit confirmations where the designs already match.
The prototype creates a more compact repository and a more immersive prompt workspace. The current app already shares its core font and brand palette, but presents more configuration, lifecycle, collaboration, and testing controls. The largest gaps are the canvas heading/toolbar, repository vertical density, inspector hierarchy, and the separate sub-agent canvas model.
Comparison basis
- Prototype: the untracked root
index.html, 4,936 lines; SHA-256bfb0a8e56740d9bb993b408d9590230f87f9af7237f26bf856cd90cb7f516ccb. - Current: working tree of
environment/vanguard, HEAD799c415f47e6f110c99da75e649581cd0804d602, using the actualStudioRepository,StudioDashboard,AgentPageHeader,FlowEditor, and inspector components. Legacy components or old CSS comments are not treated as the active UI. - Browser review: Chromium, 1440×1000 CSS pixels, fonts loaded, plus 390×844 mobile captures. Current components run in their existing isolated fixture mode on port 3107. The normal local app required SSO, so these are current source + fixture data, not a claim about a deployed Dev/QA revision or live tenant values.
- Captured content differs between versions. Compare chrome, component styles, and interactions; do not treat sample names, counts, timestamps, topology complexity, or the fixture-mode badge as design regressions.
- Current Activity's sheet and controls render, but fixture conversation content remains loading/empty in the capture. Current Settings raises
Cannot read properties of undefined (reading '0')in fixture mode. Settings comparisons therefore use the component source; this is not asserted to reproduce in a deployed environment. - No application implementation, live agent, deployment, or backend configuration is changed for this audit.
How to read the inventory
Each row names a concrete detail, what the prototype does, what the current app does, and why that difference matters. “Already aligned” prevents unnecessary work. Source links above each table identify the implementation inspected; measured values are from browser computed styles. Rows about missing behavior describe this root prototype, not the separate full-app fixture implementation.
The interactive report and screenshot comparisons contains the same inventory, searchable by text, plus equal-viewport captures. Figures shown for card height and result position are observations of the sampled desktop states.
Typography and visual tokens
Prototype: font setup, cards, inspector. Current: font loading, active brand stylesheet, final heading overrides, prompt editor.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 1 | Font family — already aligned | Open Sans; external Google Fonts stylesheet. | Open Sans; Next font loader with a generated fallback family. | Do not describe this as a font-family replacement. The visible differences are scale, weight, spacing, and loading. |
| 2 | Available font weights | Explicit downloads for 300, 400, 600, 700, plus selected italics; some components request 500 or 800. | Variable Open Sans, including intermediate weights used by the design system. | Requests outside the prototype's downloaded weights may be matched or synthesized. Compare rendered text, not just font-semibold names. |
| 3 | Repository page heading | “Agents”: measured 26px / 700, 39px line height, normal tracking. | Measured 32px / 700, 40px line height, −0.8px tracking at 1440px. | The current title is larger and tighter; the prototype places a smaller title directly in its white top bar. |
| 4 | Home greeting | 32px / 700, normal tracking, with default 1.5 line height. | 32px / 700 at desktop, 1.25 line height and −0.025em tracking from shared h1 styling. | Same nominal font size, different vertical rhythm and letter spacing. |
| 5 | Repository card title | 16px / 700, normally one line with ellipsis. | Measured 16px / 600, 24px line height, wrapping permitted. | Current titles are lighter. The late .studio-app h2 rule overrides the earlier card rule requesting 700. |
| 6 | Card description | 12px / 400, 16.5px line height (leading-snug). |
14px / 400, 23.1px line height; up to three lines. | The prototype fits much more information into the same width; current descriptions are easier to read but consume more vertical space. |
| 7 | Card classification strip | 14px / 700. | 14px / 600. | The prototype makes the input/output classification more prominent. |
| 8 | Card badges | 11px / 600 with 2px vertical padding. | 12px / 600 with 3.2px vertical padding. | Current badges are larger and contribute to taller cards. |
| 9 | Personal filter pills | 12px, declared weight 500, 30px measured height. | 14px / 400, about 35.8px measured height. | Prototype “My Favorites” controls feel compact and slightly more emphatic. |
| 10 | Editor agent name | 17px / 700; measured 25.5px line height. | 18px / 600; measured 25.2px line height. | Current name is slightly larger but lighter. Matching only font size will not reproduce the prototype. |
| 11 | Inspector title | 18px / 700, with a colored “Orchestrator Hub” or agent-type eyebrow. | 14px / 600 stage title in a compact header. | The prototype gives the selected entity much stronger identity. |
| 12 | Inspector accordion headings | 11px / 700, uppercase, positive tracking. | Predominantly sentence-case 14–16px section headings; some prompt internals have their own small uppercase labels. | The prototype separates configuration sections with a quieter, more uniform label hierarchy. |
| 13 | Prompt document text | 12px Open Sans, 19.5px line height; textarea plus highlighting overlay. | CodeMirror document theme uses inherited sans-serif at 14px. | Current prompt text is not generically monospace. Code-like pills and expressions have separate styling. |
| 14 | Editor action labels | Settings / Activity / Test / More: 12px / 600. | Settings / Activity / Performance / Export: 14px / 500. | Prototype controls are smaller and bolder, reducing toolbar width. |
| 15 | Neutral text palette | Many gray-400/500 labels: approximately #9CA3AF / #6B7280. | Common muted foreground approximately #636969; primary foreground approximately #292829. | The prototype's supporting labels are visibly paler. Smaller text plus lighter gray needs deliberate readability review. |
| 16 | Brand colors — already aligned | Sidebar / main filled actions #457F7B; highlight teal #00ABAB; page background #F5F5F5. | The active studio.css uses the same core values. |
The old navy declarations in globals.css are not the current visual baseline; later brand overrides matter. |
| 17 | Card classification colors | Uses accent directly, e.g. speech #59B0A1 and blue #5B8FA0. | Blends the accent 83% with dark #163633. | Current headers are intentionally darker and more muted. The prototype's brighter strip is a real token difference. |
| 18 | Borders and rounding | Card corners 12px; gray borders; many menus 12px and large modals 16px. | Cards also 12px, but generic controls commonly 6px; border token approximately #D7DBDA. | Card corner radius is substantially aligned. The bigger differences are control and dialog geometry. |
| 19 | Number typography | Dashboard values and timers have no shared tabular-number declaration. | Dashboard stat values explicitly enable tabular numerals. | Current numerical columns have more stable alignment as values change. |
| 20 | Dark and motion variants | Hardcoded light surfaces; no dark theme or reduced-motion media query in the root prototype. | Brand dark variables and reduced-motion rules exist, although the latter are scoped primarily to .studio-home. |
A faithful visual adoption still needs states beyond the prototype's light-mode reference. |
Application shell and navigation
Prototype: sidebar, collapsed rail, app routing. Current: main layout, sidebar, header.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 21 | Expanded sidebar width — already aligned | 214px. | 13.375rem = 214px at the standard root size. | Preserve this dimension; it is not a remaining mismatch. |
| 22 | Collapsed editor rail | 64px with icons and hover titles. | 72px with icons and persistent 10px captions. | The prototype gains 8px of canvas width; the current rail provides more navigation context. |
| 23 | Sidebar brand scale | 40px logo tile; “Agent Studio” 18.5px bold; “by Deloitte” 16px. | 32px logo tile; product name 16px semibold; attribution 12px. | The prototype brand block is larger and more prominent. |
| 24 | Primary destinations | Home, Agents, Workflows. | Home, Insights, Agents; Design with AI appears when its feature is enabled. | This changes information architecture. Current workflows are represented as Background agents in the unified repository. |
| 25 | Bottom navigation copy | “Tools & Templates” and “Configuration.” | Visible labels “Tools” and “Settings”; their destinations retain broader functionality. | Longer prototype labels explain scope; current labels save room, especially in the compact rail. |
| 26 | Navigation icons | Sparkles for Agents; lightning for Workflows; custom SVG paths. | Network for Agents, dashboard grid for Insights, Lucide icons. | Matching the shell requires choosing actual glyphs, not merely icon size and color. |
| 27 | Navigation sizing | Expanded menu icons 18px; semibold 14px labels. | Primary icons 16px; 14px labels with stronger weight for active items. | Prototype rows put slightly more visual weight on pictograms and text. |
| 28 | User area | Static initial and name with no account menu interaction. | User menu with tenant context and account actions; tenant and permission dependent. | The prototype footer does not specify the existing profile/tenant interaction. |
| 29 | Browse-page header | Home starts directly with content; Agents has a 72px white title/action bar. | Shared Agent Studio / by Deloitte / Enterprise header, followed by page content. | Current browse screens have an extra branding row and a deeper content start. |
| 30 | Active-state and navigation semantics | React state changes through buttons; page and agent selection do not update the URL. | Real links and routes with active-state attributes; editor URLs identify agents. | Back/forward, bookmarking, opening a new tab, and sharing an editor are materially different experiences. |
| 31 | Rail expansion | Separate fixed expanded and collapsed components. | Controlled shared sidebar auto-collapses in editors and supports manual toggling. | The current shell has more flexibility than the prototype's two fixed layouts. |
| 32 | Responsive shell | Expanded 214px sidebar remains present at phone width. | Sidebar becomes a mobile drawer with a trigger. | At 390px, the prototype leaves only about 176px for content and clips controls; current browsing remains usable. |
| 33 | External and restricted destinations | Static navigation list. | Custom tenant links, feature flags, role checks, and access-denied handling. | Prototype simplicity must not erase these conditional destinations. |
| 34 | Screen coverage | Workflows opens a scaffold placeholder; Tools & Templates and Configuration sidebar buttons have no navigation handler. | Working workflow, tools/templates, settings, insights, and administration surfaces. | Those screens have no developed root-prototype counterpart. This audit does not invent visual comparisons for missing screens. |
Home dashboard
Prototype: Home. Current: StudioDashboard, dashboard CSS.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 35 | Greeting identity | Fixed “Good morning, Lynn.” while the sidebar names a different person. | “Good day, |
The prototype's personalization is presentation data, not a coherent account state. |
| 36 | Search appearance | Sparkles leading icon, send-plane trailing icon, 2px teal border and stronger halo. | Search icon, arrow submit control, 1px bordered container and subtler shadow. | The prototype suggests an assistant command; the current control looks more like repository search. |
| 37 | Search behavior | Input changes and submit enabling are implemented, but the Home send button has no search action. | Live matching results and submission to /agents?q=…. |
Visual parity must preserve current search results and keyboard submission. |
| 38 | Creation shortcuts | Separate “New Agent” and “New Workflow” outlined pills. | Shared import/create controls and unified agent-type vocabulary. | The prototype makes workflow creation a distinct top-level task. |
| 39 | Dashboard metrics | Published Agents, Live Workflows, Conversations Today with fixed counts and a +12% comparison. | Published agents, Background agents, Conversations using available data and time-range context. | These are different metric definitions, not discrepancies in live counts. |
| 40 | Metric interaction | Display cards. | Stat cards link to filtered repositories or conversations. | Current users can act directly on a number. |
| 41 | Stat colors | Distinct blue workflow tile and teal agent/conversation tiles. | Shared teal stat-icon treatment. | Prototype differentiates categories through color more strongly. |
| 42 | Recent activity expansion | “Show 4 more” toggles between the five-item array and its first five items. | Current dashboard uses data-backed activity views and paging controls. | The prototype label promises extra rows that do not exist in its sample array. |
| 43 | Needs attention | Fixed examples include stale conversations and not tested in 30 days. | Actual drafts and failed workflow runs, plus data-aware empty/error handling. | Staleness alerts in the prototype are additional product requirements, not just revised copy. |
| 44 | Portfolio | Four conversational categories with category icons and fixed totals. | Unified agent categories including Background; links filter the repository. | Align category definitions before copying the chart and labels. |
| 45 | Quick access | Favorites divided into agent and workflow groups with uppercase category headings. | Unified favorite cards, Manage favorites, and a separate Recently opened section. | Prototype organizes by resource kind; current organizes by personal activity. |
| 46 | Vertical rhythm | Content begins after 48px top padding with compact metric/feed regions. | Shared header plus 32px content padding, date controls, and more supporting surfaces. | The different content stack explains much of the perceived density change. |
Repository, search, filters, and sorting
Prototype: AgentsPage. Current: StudioRepository, RepositoryCreate.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 47 | Page introduction | Just “Agents” in the top bar. | “Your workspace,” Agents, and “Every conversation and automation, together.” | Prototype removes two descriptive lines and separates the title from the search region. |
| 48 | First card position | At 1440×1000, first row starts at approximately y=279px. | Same viewport: first row starts at approximately y=509px. | About 230px more vertical space precedes current results. This comes from chrome, intro, filters, and type/sort rows, not a different font family. |
| 49 | Content width — already aligned | 24px side padding; desktop cards about 379px wide with 20px gaps. | Same measured left edge x=238px, card width about 379px, and 20px gaps. | Horizontal card geometry is already close; vertical composition is the primary repository gap. |
| 50 | Search field height | 52px outer field with a 2px border. | About 50px outer container with a 1px border; the inner input is 21px tall. | Compare the complete compound control, not the inner input's bounding box. |
| 51 | Search trailing action | Send-plane icon changes from disabled gray to filled teal. | Repository search filters as you type; no trailing submit button. | The prototype adds a visible action whose behavior must be defined separately from live filtering. |
| 52 | Filters button | Funnel icon, 46px measured height, gray text. | Sliders icon, about 50px measured height, active-filter count when applicable. | Small glyph, height, and count differences change how discoverable filter state is. |
| 53 | Personal filters copy | “My Favorites,” “My Agents,” “My Recents.” | “My favorites,” “My agents,” “My recents.” | The prototype consistently uses more title case. |
| 54 | My Agents semantics | Sample subset selected by hardcoded agent IDs. | Matches the recorded creator ID against the current user. | Sample behavior cannot serve as an ownership specification. |
| 55 | My Recents semantics | Sample subset selected by hardcoded agent IDs. | Uses actual stored visits; selecting it sorts by recent opening. | Current behavior includes a useful ordering change absent from the prototype. |
| 56 | Filter panel organization | Six columns: Type, Subtype, Last Modified, Date Created, Status, My Stuff. | Three dropdown fields: Status, Last modified, Date created; type and personal controls stay outside. | Prototype exposes more options at once; current reduces panel height and avoids duplicate personal controls. |
| 57 | Type versus subtype | Multi-Agent and input/output modalities are types; Orchestrator, Voice, Chat, Translation, Copilot are subtypes. | One visible category row: All, Voice, Chat, Copilot, Translation, Background, with counts. | The prototype introduces two classification axes. This needs a taxonomy decision. |
| 58 | Filter selection model | Multi-select checkbox-like rows backed by Sets. | One selected value per native dropdown; one category in the type row. | Users can combine multiple types/statuses in the prototype; current selection is narrower. |
| 59 | Status options | Published and Draft in the filter menu. | Published, Draft, Has draft, Active, Inactive, Generating, Template. | Copying the two prototype options would remove useful distinctions already present. |
| 60 | Date filters | “Today,” 7, 30, 90 days; multiple buckets can be selected. | Last 24 hours, 7, 30, 90 days; single selection. | “Today” is implemented as a rolling one-day interval in the prototype, so its label is imprecise. |
| 61 | Sort location | Sort chips live inside the expanded filter panel. | Sort dropdown and direction button remain visible above results. | The prototype hides sorting when filters are collapsed. |
| 62 | Sort options | Name, Type, Subtype, Status, Last Modified, Date Created. | Last modified, Date created, Name, Type, Status, Recently opened. | Subtype sorting is added; visit-time sorting is omitted. |
| 63 | Sort direction affordance | Active chip includes ↑ or ↓; clicking an option toggles/selects sort. | Separate arrow button with an explicit accessible action label. | Prototype groups field and direction; current gives direction a dedicated control. |
| 64 | Repository label | “Agent Repository” with no result count. | “Agent repository” plus filtered count. | Current users can see how much their filters reduce the result set. |
| 65 | Card/list switch | AgentsPage renders cards only; reusable list/toggle components are used in pickers elsewhere. |
Actual repository Card view / List view toggle. | Do not mistake the prototype's picker list views for a repository list mode. |
| 66 | Pagination | Entire matching sample array renders. | 20 results per page, range, previous/next, page count. | Prototype does not show the scale-management controls needed for the current repository. |
| 67 | Reset and error recovery | Clear All inside Filters and a basic no-match message. | Clear all near personal filters; distinct empty, loading, data-error, and favorites/recents-error states with retry. | Current state coverage is substantially broader. |
Repository cards and per-agent actions
Prototype: AgentCard, AgentMoreMenu, status pills. Current: RepositoryCard, management dialog.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 68 | Header information | “Speech In | Speech Out,” “Text In | Text Out,” “Speech In | Text Out,” or “Multi-Agent.” | “Voice agent,” “Chat agent,” “Copilot,” “Background agent,” or “Multi-agent.” | Prototype puts modality in the strip and purpose in a badge; current uses purpose in both places. |
| 69 | Card height | About 220px for the first sampled desktop row. | About 270px for the first sampled desktop row; body has a 168px minimum height. | Prototype fits more cards above the fold. These measured heights are sample-specific, not a promise for arbitrary descriptions. |
| 70 | Header height | Approximately 48px in the captured repository. | Approximately 51px. | A small difference, but repeated on every row. |
| 71 | Title behavior | One-line ellipsis; title area stops the card click and offers double-click rename with a hover pencil. | Wrapping link title; clicking it opens the agent. | In the prototype, clicking the most obvious title text does not open the editor. Rename discoverability trades against expected navigation. |
| 72 | Card click target | Outer clickable div, with event-propagation exceptions for title, favorite, menu. | Semantic body link; independent menu and favorite buttons. | Current cards support keyboard navigation and open-in-new-tab naturally. |
| 73 | Description handling | Small unrestricted paragraph; sample copy sometimes contains a prewritten ellipsis. | Three-line clamp, real fallback description when empty. | Prototype card height varies with long text; current imposes a predictable reading limit. |
| 74 | Badge content | Purpose and sub-agent count. | Also View only, Draft available, Active/Inactive for workflows. | The current card communicates access and lifecycle conditions absent from the prototype. |
| 75 | Tags | No visible tags. | First three tags plus an overflow count. | Prototype omits a current discovery and organization signal. |
| 76 | Footer divider | Inset inside the padded body. | Full-width border across a dedicated footer. | This changes card rhythm even when dimensions otherwise match. |
| 77 | Timestamp presentation | “Last Modified: May 7, 2026” in light gray, beside status/version. | Compact relative time such as “23d ago,” pushed right; full timestamp on hover. | Prototype prioritizes explicit calendar dates and uses more horizontal space. |
| 78 | Dirty published state | Custom Published / unpublished-changes indication via local dirty state. | Published status plus a separate Draft available badge when appropriate. | Similar intent, different lifecycle language and placement. |
| 79 | Overflow action surface | Small anchored menu with version-aware duplicate submenu and delete. | Opens Manage |
Prototype is quicker for a narrow action set; current has more management functions. |
| 80 | Delete confirmation | Browser window.confirm. |
Current editor uses a styled confirmation dialog; repository management delegates to its existing table actions. | Prototype confirmation breaks the visual system and provides a different focus flow. |
| 81 | Favorite styling and persistence | Rose #F43F5E heart; changes in-memory agent object. | Rose #C64266 heart; tenant/user favorites hook with pending/error handling and accessible pressed state. | The heart is visually close, but reliability and accessibility differ. |
Canvas page heading and action toolbar
Prototype: toolbar and positioning. Current: AgentPageHeader, editor layout.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 82 | Canvas title | Dedicated centered “AGENT CANVAS” label with sparkles: 16px / 700, uppercase, positive tracking. | No corresponding canvas title; only agent identity and action toolbar. | This is one of the clearest missing visual elements. |
| 83 | Canvas title alignment | Center is shifted by inspector/preview widths and clamped between left and right action groups. | No equivalent title-position logic. | Adding plain text-align:center would not reproduce how the prototype keeps the label over the remaining canvas. |
| 84 | Nested canvas heading | Adds “Sub-Agent Canvas View” below the main canvas label. | No equivalent nested-canvas page heading in the current stage-card flow. | Prototype explicitly announces depth in the hierarchy. |
| 85 | Agent identity stack | Back chevron, type icon, bold name, modality → purpose → version subline, then status pill. | “Back to Agents” text link, semibold name, conditional access/template badges; version control lives in the action group. | Prototype consolidates identity at left and frees the action group from version browsing. |
| 86 | Top-level rename | Double-click name, hover pencil, inline input; Enter/blur commits and Escape cancels. | Name is display text here; editing is available through Settings. | Prototype provides direct manipulation, but needs a discoverable keyboard equivalent. |
| 87 | Toolbar container | White bar runs flush to the canvas region with a bottom border. | Toolbar sits within 24px desktop page padding; canvas is a bordered rounded workspace beneath it. | Prototype feels like a continuous authoring workspace; current retains page-container framing. |
| 88 | Action shapes | Settings, Activity, Test, More are 30px tall outlined pills. | Generic 32px small or 36px default buttons, typically 6px corners. | Reproducing the prototype requires size, radius, weight, padding, and icon adjustments together. |
| 89 | Action order | Saved → Settings → Activity → Test → Publish when needed → More → notifications. | Presence → optional design link → Settings → Activity → Performance → version → Export → save state → Publish/Open draft → delete. | The prototype's lower action count comes partly from relocating or omitting current features. |
| 90 | Testing entry | Dedicated Test pill with play icon. | Performance link in the header; Run tests is exposed through preview/testing surfaces. | These are different jobs. Relabeling Performance as Test would lose its broader destination. |
| 91 | Activity glyph | Check icon. | History/clock arrow icon. | The prototype glyph reads more like completion; current glyph more clearly signals a log/history. |
| 92 | Publish emphasis | White pill with 2px teal border; “Publish” or “Publish Changes.” | Filled teal Publish; published versions offer Open draft or Save as draft. | This changes both visual priority and draft/published workflow. |
| 93 | Delete and export placement | Delete tucked under More; no working header Export action. | Export and red icon delete button exposed in the header. | Prototype reduces toolbar noise, but an adoption needs a deliberate destination for export. |
| 94 | Notifications | Per-agent bell at far right with red/amber count; static critical entries can block publish. | Global notification bell in sidebar when enabled; inline validation and API-backed publishing decisions. | Notification location, scope, and validation authority are different. |
| 95 | Save feedback | Gray “Saved” with green check; local “Saving” becomes Saved after 700ms. | Collaboration-aware Saved / Saving / Unsaved changes and flush state. | The same friendly label must remain tied to durable save success. |
| 96 | Collaboration and access | No presence avatars or view-only/published editing constraints. | Presence stack, remote cursors, permissions, immutable published-version guidance. | Prototype toolbar is not a complete specification of shared authoring. |
Canvas background, navigation, nodes, and connections
Prototype: grid, AgentNode, flow rendering, canvas controls. Current: FlowEditor, PipelineNode, CanvasViewBar.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 97 | Main grid color | #F3F4F3 background with #C7C7C7 dots at 22px spacing. | #EFEFEF background with #B8B8B8 SVG dots at 22px spacing, size 1.5. | Spacing is aligned; prototype grid is paler and visually quieter. |
| 98 | Nested grid | Separate pale green field #F1F6F5 with #B8CCC9 dots. | Current lanes may have their own tints, but no equivalent separate sub-agent canvas state here. | Prototype uses surface color to communicate navigation depth. |
| 99 | Initial structural view | Structural stage nodes hidden by default; reveal pill near the top. | Structural view defaults visible and persists per browser. | Users initially see different amounts of plumbing. |
| 100 | Meaning of Structural | Hides nodes of the prototype's stage type; generic Start/End caps have separate rendering behavior. |
Current control governs structural lifecycle/input/output elements. | Identical control labels do not imply identical affected nodes. |
| 101 | Canvas View control | Small floating 14px button at top-right; separate 256px rounded popover. | Fixed 260px stacked card at top-right, 12px label with undo/redo and Variables section. | Prototype occupies less space while closed and has a more conventional dropdown silhouette. |
| 102 | Canvas View options | Structural Hidden / Visible only. | Structural plus conditional Sub-Agents visibility row. | Prototype's nested navigation replaces part of the current view-toggle concept. |
| 103 | Variables surface | Generic “Added Variables” section in the inspector; fixed test variables in Preview. | Dedicated canvas Variables panel with actual variable inventory and declaration support. | Reproduce the prototype's appearance without losing discovery of real variables. |
| 104 | Undo / redo | No working canvas history UI in the main flow. | Visible undo/redo controls, disabled states, and history implementation. | Current users have recovery affordances the prototype does not specify. |
| 105 | Zoom control | Horizontal minus / 100% reset / plus group at bottom-left; range 50–150%, 10% steps. | React Flow controls with zoom and fit; min/max 35–200%. | Prototype gives a clear percentage; current provides fit-to-view and wider navigation. |
| 106 | Minimap | None. | Pannable and zoomable minimap. | Omitting it is a meaningful large-graph navigation tradeoff. |
| 107 | Viewport behavior | Scrollable DOM tree scaled with CSS zoom. |
React Flow camera, bounded panning, zoom and recentering. Nodes are auto-laid and explicitly not draggable. | Neither should be described as a freehand drag canvas. Matching screenshots does not specify matching navigation. |
| 108 | Agent node width | Fixed 220px. | Fixed 250px before viewport scaling. | Prototype nodes are 30px narrower, reducing their footprint. |
| 109 | Node border | Full-strength 2px category accent, selected glow in that accent. | 2px diluted accent when unselected, full accent plus themed focus/selection ring when selected. | Prototype nodes read more strongly against the grid. |
| 110 | Node icon chip | 28px chip, 14px glyph, 8px rounding. | 32px chip, 16px glyph, 12px rounding. | Current icon block is larger and softer. |
| 111 | Node heading | 14px / 700 with two-line clamp and reserved two-line height. | 14px / 600, single-line truncation. | Prototype can show more of a long name; current keeps compact headers. |
| 112 | Node identity | Agent object title reused across repository, header, and node. | Top-level agent name and service stage name are separate; canvas uses the stage name/provider fallback. | “Capabilities Demo” versus “Demo Agent” in the capture is a model distinction, not a random labeling bug. |
| 113 | Node supporting content | Nested-agent icon stack, linked count, disclosure and expand control. | Optional stage description and summary chips for subagents/tools/rules/guards. | Current cards summarize behavior; prototype cards invite browsing linked agents. |
| 114 | Node edit interaction | Title double-click renames; card click opens inspector; trash icon. | Pencil action and card double-click open stage editing; trash icon. | The same gesture has different meanings. |
| 115 | Sub-agent navigation | Linked count can disclose children; expand opens a separate nested canvas with Back to Main Canvas. | Main PipelineNode renders compact counts; subagent authoring lives in Behavior/prompt scope controls. | This is a substantial change to the authoring model, not a new accordion style. |
| 116 | Start and End | Compact generic pills/caps; separate Audio Input stage card where seeded. | 250px Input/Output cards with channel names and descriptions. | Prototype emphasizes process beginning/ending; current explains media contracts and outputs. |
| 117 | Insertion affordance | 24px blue circular plus, opening Stage / Branch / Agent or Sub-Agent / End Pathway menu. | Add Stage / Add Branch and context-aware Add to flow picker; options depend on pipeline/frame types. | Prototype offers a simpler generic vocabulary but does not encode all compatibility constraints. |
| 118 | Connector information | Simple vertical connectors and fan-out junctions in the DOM tree. | Edges/placeholders expose “Data flowing” and media types plus branch actions. | Prototype is cleaner visually; current makes data compatibility visible. |
| 119 | Group and branch model | Named group containers, branch path labels, per-path editing, and End Pathway. | Swimlane/parallel-group and frame-routing configuration tied to actual runtime shape. | These structures need semantic mapping; they cannot safely be imported as equivalent node types. |
Inspector, prompt editing, and expanded workspace
Prototype: AgentPropertiesPanel, PanelSection, expanded layout. Current: NodeInspectorPanel, default tab policy, NodeExpandedView, PromptSection.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 120 | Inspector initial width | 437px, with a 6px mouse resize edge. | Resizable panel default 25%, minimum 18%; layout-managed resize divider. | Prototype allocates more fixed horizontal room; current adapts to workspace width. |
| 121 | Inspector identity block | Colored agent-type Hub label, 18px bold name, editable description above tabs. | Compact stage-name header with expand and close controls; identity/configuration details live in the form. | Prototype front-loads identity and context before configuration. |
| 122 | Inspector close affordance | No explicit close icon in the regular AgentPropertiesPanel; canvas deselection closes it. | Explicit close button and collapsed Edit Node rail. | Current closure is more discoverable. |
| 123 | Tab labels and order | Prompt, Properties. | Properties, Behavior. | Behavior includes far more than text; renaming it Prompt would narrow the apparent scope. |
| 124 | Default selected tab | Always Prompt on selecting an agent. | Behavior once required stage properties are satisfied; otherwise Properties; some providers have no Behavior tab. | Do not report current behavior as “always Properties.” The code has a conditional landing policy. |
| 125 | Tab geometry | Full-width split segmented control, 12px semibold, 28px inner buttons. | Content-width segmented control, 12px medium, 24px inner buttons. | Prototype tabs look like two equally weighted modes; current tabs read as compact local navigation. |
| 126 | Instruction sections | Instructions, Routing Instructions, Fallback Behavior, Added Variables. | Greeting, prompt scopes, actions, auto-injections, advanced rules/guards, capabilities. | The apparent simplification partly comes from replacing real controls with empty prototype sections. |
| 127 | Greeting | No comparable separate greeting editor in the prototype agent panel. | Enable Greeting toggle and dedicated editable greeting document. | Preserve the ability to author greeting behavior. |
| 128 | Main/sub-agent prompts | Selected linked agent has its own instruction textarea. | Main and named subagent scopes appear as tabs within Prompt, with runtime distinctions in the forms. | The prototype models separate navigable agents where current authoring can model scopes within a stage. |
| 129 | Prompt tokens | Textarea with a synchronized display overlay; variables/tokens are colored text. | Structured clickable token pills, IF/ELSE decorations, tool/subagent/component dialogs, completion menus. | The prototype's calm text surface is not feature-equivalent to current prompt editing. |
| 130 | Prompt shortcuts | Helper says { } for variables and / for templates; slash template menu exists. |
@ or {{ for variables/tools/logic, backslash for snippets. |
Shortcut characters and the available action set change. |
| 131 | Prompt library placement | Persistent 331px left library in expanded Prompt mode, searchable and category-filterable. | No equivalent persistent left library in NodeExpandedView; snippets and tools are reached through existing editor/library controls. | This is a high-value discoverability addition, with a significant width cost. |
| 132 | Library rows | Alternating pale backgrounds, title, category, description, Full/Snippet badge; click inserts at caret. | Existing prompt/snippet pickers are contextual rather than this always-visible catalog. | Prototype lets users browse reusable writing while composing. |
| 133 | Hidden library width | Hiding the library swaps in a narrow vertical handle but its outer column still has width:331. |
Expanded editor uses the full available inspector column. | In the prototype, Hide library does not actually reclaim the full column width. |
| 134 | Properties completeness | Agent Name and Description; routing/advanced sections mostly empty. | Provider, integration, model, voice/language, and service-specific schema-driven controls. | The prototype leaves most production configuration unspecified. |
| 135 | Enhance with AI | Visible filled teal action; enabled when instructions exist; no enhancement handler. | Current authoring uses existing assistant/generation surfaces; no identical handler exists in this panel. | This is an incomplete interaction proposal, not a proven new capability. |
| 136 | Expanded footprint | Fixed viewport overlay removes the sidebar, retains full agent toolbar, adds library + editor + preview columns. | Overlay stays inside the editor body; app rail and toolbar remain outside it. | Prototype achieves a more immersive writing workspace. |
| 137 | Expanded context controls | Agent-type Hub label and custom agent selector with icons, depth labels, active check; close X. | “Canvas” back button, NODE label, native select when multiple destinations exist, Properties/Behavior tabs. | Prototype emphasizes entity identity; current emphasizes returning to the graph and node switching. |
| 138 | Expanded header composition | Library header, editor identity/tabs, and Preview Mode header occupy separate column regions below the page toolbar. | Single compact 52px header aligns node controls and optional preview header. | These have different vertical alignment and chrome density. |
| 139 | Preview when expanding | Expanding the agent inspector always mounts Preview; default 360px width. | Expanded preview is included only if Preview was already open; width 34%, bounded 320–480px. | Current expansion may produce a full-width editor, while prototype always reserves testing space. |
| 140 | Inspector state durability | Instructions/description changes update local component state and dirty indicator; they are not consistently written back to the agent object. | Edits feed stage config and collaboration/autosave. | Prototype edits can disappear when the panel is unmounted, despite a Saved label. |
Dropdowns, switches, and modal mechanics
Prototype: outside-click helper, workspace selector, insert menu, toggles, filter checkboxes. Current: native expanded selector, Radix select, dropdown menu, switch.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 141 | Dropdown visual language | White elevated panels, commonly 12px corners, light gray border, larger shadow, gray hover rows. | Mixture of Radix menus/selects and native selects; standardized focus, portals, and state attributes. | There is no single dropdown CSS swap that covers all current controls. |
| 142 | Dropdown trigger placement | Canvas View chevron after the label; custom agent switcher resembles editable text. | Canvas View disclosure before icon/label; expanded node selector is a bordered native field. | Chevron location and field silhouette are visible micro-differences. |
| 143 | Custom hierarchy menu | Icons, 16px indentation per depth, Agent/Sub-Agent/Sub-Sub-Agent labels and active check. | Native option indentation with spaces and ↳. | Prototype conveys hierarchy more clearly visually; current native select supplies keyboard behavior. |
| 144 | Outside click and Escape | Most custom menus implement mousedown outside dismissal but no shared Escape/arrow-key menu model. | Radix menus provide structured keyboard/focus behavior; native selects use browser behavior. | Keep keyboard interaction when adopting the prototype's visuals. |
| 145 | Popover layering | Many menus are absolutely positioned inside scrolling panels with local z-index values. | Most Radix popovers are portalled; native controls use browser placement. | Long menus near panel edges need clipping and collision checks. |
| 146 | Checkbox appearance | Hand-drawn 16px square with 2px border inside a button. | Native/select controls or shared checkbox components depending on surface. | Prototype filter buttons lack checkbox semantics and exposed checked state. |
| 147 | Switch styling | Bright teal track, visible ON/OFF text inside, white thumb; common 48×24px variant. | Shared muted-teal switch, visually smaller, no embedded ON/OFF text, accessible checked state. | Prototype communicates status in text but needs the semantic behavior added. |
| 148 | Dialog surface | Common 1056×736px settings/activity/test shell, 16px corners, 40% black scrim and 2px blur. | Settings uses a max-768px scrolling Radix dialog; Activity uses a right sheet. | Modal dimensions and spatial behavior differ substantially. |
| 149 | Dialog keyboard model | Custom fixed div overlays; no shared focus trap, dialog role, background inertness, or reliable Escape close. | Shared Radix dialog/sheet primitives handle modal focus and Escape dismissal. | Prototype styling should be carried onto robust primitives. |
| 150 | Resize interactions | Mouse-only edge handlers and phone drag handle. | Shared resizable panel handles; actual keyboard support should be checked per handle. | Do not assume visual resize parity implies equivalent keyboard/touch support in either version. |
Settings, activity, publishing, and preview
Prototype: settings, activity, preview, test shell. Current: SettingsEditor, settings/publish dialogs, ActivitySheet, TesterSidebarPanel.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 151 | Settings navigation | Five horizontal underlined tabs: Identity & Branding, Conversation Controls, Media & Recording, Routing Rules, Compliance & Security. | Long form with conditional cards and Operations content. | Prototype is more scannable by topic; current sections vary with agent capability. |
| 152 | Settings heading | Small teal “AGENT SETTINGS” eyebrow and 20px bold agent name. | Dialog title/description followed by Agent Information and other form cards. | Prototype puts the edited agent's identity ahead of explanatory form chrome. |
| 153 | Settings fields | Includes max turns, silence timeout, queue size, storage region, retention, business hours, PII masking, audit logging. | Exposes actual agent settings such as identity/ID, branding, avatar, whisper echo, text turns, recording, and operations. | Several prototype fields are new or differently owned requirements. Their labels are not evidence of a backing runtime setting. |
| 154 | Settings Save/Cancel | Footer shows Cancel and Save Changes; both only close the modal. | Edits are wired through SettingsEditor and the page's config update path. | A save-looking button currently provides no persistence in the prototype. |
| 155 | Brand selector | Native select with sample brand profiles. | Data-backed Radix selector with color swatches, loading and no-profile guidance. | Prototype omits state and profile identity details. |
| 156 | Activity presentation | Large centered dialog; opens on Versions. | Right-side sheet; Conversations and change-history tabs. | This changes both screen geography and the default reason for opening Activity. |
| 157 | Version history | Version/Author/Date/Actions grid; dropdown with view, restore, duplicate. | VersionSelector in the page header plus change-history surface. | Prototype consolidates lifecycle actions into Activity; current spreads selection and audit history across distinct surfaces. |
| 158 | Version action readiness | openVersion is empty; restore only asks browser confirmation. |
Current version selection and draft/publish paths call real handlers. | Prototype history actions are interaction sketches. |
| 159 | Conversation history | Fixed rows, seven per page, date/time split, Unknown caller and sample source. | ConversationHistoryView uses actual conversation detail/list functionality. | Table spacing is a visual reference; fixed rows do not establish functional parity. |
| 160 | Test modal | Title and empty body in a large dialog. | Preview and Run tests surfaces have working configuration/results paths. | The prototype's header Test button is not an implemented testing experience. |
| 161 | Publish confirmation | Changes in-memory status/version directly, subject to static notification blocking. | Publish dialog supports traffic rollout and CCaaS availability, validation, and request state. | Removing the dialog would remove deployment controls already in the product. |
| 162 | Preview panel size | Sidebar 340px default; expanded editor 360px default; mouse resizing. | Resizable panel default 28%, bounds 20–50%; expanded editor has separate bounded proportional width. | The same phone can appear very different because its containing column differs. |
| 163 | Preview heading | “Preview Mode,” 14px bold, mostly just expand action. | “Preview” with context-dependent Run tests, recording/SMS and session actions. | Prototype's header is simpler because several current actions live elsewhere or are absent. |
| 164 | Phone presentation | Static black phone with “Company,” sample time/status, decorative call controls; green Start Call below. | Shared phone-emulator implementation driven by selected branding and actual session state. | Frame, branding, controls, and state behavior must be compared as a component system, not only a black rectangle. |
| 165 | Preview variables | Always Agent Name, Ani, Dnis, plus Multimodal SMS and Avatar View switches. | TemplateVariablesInput derives applicable variables; channel/configuration determines controls. | The prototype's tidy fixed form does not cover the current dynamic variable inventory. |
| 166 | Preview settings effect | Local values and switches are not used to configure a real call. | Current preview passes variables and settings into its session machinery. | A visually responsive toggle is not proof the test uses its value. |
| 167 | Transcript | Optional section below phone/variables, sample timed messages, pause/resume display, expand. | Actual transcript/session views and debug/event surfaces. | Prototype demonstrates pacing and placement; current supports inspection of execution. |
| 168 | Full-screen preview | Separate overlay with larger phone/transcript presentation. | Existing preview can move to full-screen while preserving its mounted tester/session. | Session continuity through expansion is a current behavior to preserve. |
| 169 | Channel coverage | Same phone-oriented preview appears for prototype agents. | Voice, chat, copilot, and translation have different tester implementations. | The root prototype does not specify complete chat/copilot/translation testing experiences. |
Creation, state coverage, and small interaction details
Prototype: create choice, AI builder, wizard, comments. Current: RepositoryCreate, NewAgentWizard, skip link, studio live workspace.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 170 | New Agent entry | Opens two large choice cards: Start from scratch / Build it with AI. | Dropdown asks for agent type before opening the relevant wizard; Design with AI is separately feature-gated. | Prototype asks “how” first, current asks “what” first. |
| 171 | Wizard shell | 560px max width, 32px padding, 22px title, teal uppercase eyebrow, current-step number and completed-choice trail. | 520px Radix dialog, compact title/description, numbered progress dots and connectors. | Prototype is more conversational and spacious; current presents a more conventional setup sequence. |
| 172 | Wizard branches | Type → purpose → start method → stack → name/description, with conditional progression. | Agent type/path/stack/template/add-ons/name components, conditional on creation path. | Prototype simplifies the decision model and does not expose every current option. |
| 173 | Wizard final action | “Finish.” | Create action with request/pending/error handling appropriate to the selected path. | A specific create label would communicate the outcome more directly than the prototype's generic Finish. |
| 174 | AI creation interaction | Guided local conversation with suggestion chips, coverage heuristics, editable summary, and “I think that's enough — build it.” | Conversational design uses route-based sessions, outputs, references and persisted authoring workflows when enabled. | These are different authoring flows and degrees of implementation. |
| 175 | AI creation implementation | Browser heuristics build in-memory objects; no model request. | Current live design components integrate with actual session/API contracts; fixture mode simulates them. | Prototype “AI” responsiveness is not a latency or capability benchmark. |
| 176 | Prototype review tools | Floating Comments / Add Comment, numbered pins, localStorage and Copy All for Claude. | Not part of the base current application; a separate review-extension work-in-progress exists in this checkout. | Treat these as design-review utilities, not missing core agent-management features. |
| 177 | Review tool obstruction | Comment pills remain at bottom-right and overlap transcript/phone-width content. | Base app does not reserve this overlay; it can instead have a product assistant launcher. | Exclude review overlays when judging final product spacing. |
| 178 | Unsaved state accuracy | Saving animation can finish without any durable write; settings and prompt edits have incomplete state plumbing. | Real drafts, collaboration flush states, validation and failures. | Prototype polish must not replace truthful save feedback. |
| 179 | Empty and loading coverage | Mainly fixed populated samples, no-match messages, and the AI-builder spinner. | Repository skeletons/errors, access restrictions, provider loading/empty states, preflight failures, and real pending actions. | A full adoption specification needs screenshots for these missing states. |
| 180 | Keyboard card navigation | Clickable div cards and mouse-oriented inline rename. | Repository body links, explicit buttons, labeled actions. | The prototype adds keyboard accessibility work if adopted literally. |
| 181 | Accessible form names | Several inputs use adjacent labels without htmlFor; search relies on placeholder; numerous icon buttons have no accessible name. |
Shared forms often associate labels and controls; repository search/buttons carry explicit aria labels. | Preserve the current semantic layer while changing appearance. |
| 182 | Focus visibility | Some text fields have teal focus rings; inline rename and other controls remove outlines without consistent replacement. | Shared focus-visible outline/ring rules, plus Radix component focus behavior. | A keyboard walkthrough is required to complete the prototype's interaction specification. |
| 183 | Accordion and tab states | Many custom buttons change appearance without aria-expanded, aria-selected, or pressed/checked state. |
Current shared controls often expose state, although custom inspector tabs and CanvasView controls also need a targeted accessibility check. | Neither implementation should be called fully accessible on source inspection alone. |
| 184 | Small click targets | 14–16px trash/menu icons often have little surrounding padding; compact canvas plus is 24px. | Common icon buttons have 32–36px boxes; node actions also add padding. | Prototype density increases precision required for clicking. |
| 185 | Mobile results | At 390×844, sidebar remains 214px; New Agent, search/filter row, and cards clip or become excessively narrow. | Mobile drawer and single-column repository layout. | A zero document-level overflow measurement does not mean the prototype works on mobile: internal clipping is visible. |
| 186 | Long names and localization | Small fixed columns, title ellipsis, fixed English strings and sample dates. | Wrapping repository titles, locale provider and translated application surfaces; not every current string is translated. | Test long labels and translated text before standardizing prototype dimensions. |
| 187 | Persistence of navigation state | Agent and page navigation are component state; refresh returns Home. | Routes survive reload, and canvas visibility preferences persist locally; repository controls are only partially URL-synchronized. | Current is more durable, but not every filter change becomes a shareable URL. |
| 188 | Destructive action recovery | Browser confirmation for agent deletion; node deletion is immediate and there is no history UI. | Current agent deletion confirmation plus canvas undo/redo. | Retain confirmation and recovery as the canvas is simplified. |
| 189 | Motion and hover | Frequent generic transitions, rotating chevrons, hover pencils, light shadow increases. | Shared transitions and hover styles, with some reduced-motion coverage. | Match duration, target properties, and focus behavior—not only the static resting screenshot. |
Picker and phone micro-details
Prototype: sub-agent picker, terminal caps, phone mockup. Current: SubagentLinkPicker, AddNodePanel, tester integration.
| # | Detail | Root prototype | Current AI Manager | Experience implication |
|---|---|---|---|---|
| 190 | Add Sub-Agent container | Centered 880px modal, maximum 85vh, 16px corners, title plus teal eyebrow. | Replaces inspector content with a narrow Link Sub-Agent panel. | Prototype temporarily takes over the workspace; current keeps the canvas visible beside the choice. |
| 191 | Sub-agent source | Published independent agents, excluding current/ancestor IDs. | Saved subagent templates or Start from scratch. | The pickers choose fundamentally different entities. |
| 192 | Picker selection | Defaults to list; card/list toggle; multi-select with “Add N Sub-Agents” confirmation. | Single click chooses one scratch/template entry and moves into configuration. | Prototype supports batch attachment; current optimizes a single authoring step. |
| 193 | Picker create affordance | Create New Sub-Agent button in the modal footer. | Dashed Start from scratch row at the top of the panel. | The same broad intent has different placement and visual emphasis. |
| 194 | Stage picker options | Generic Stage menu followed by a separate template picker modal. | Searchable context-aware panel combining compatible stages, templates, branch types, and connections. | The prototype adds a navigation step while exposing a smaller option vocabulary. |
| 195 | Start/End styling | Start pale green and End pale red, 1.5px borders, 12px bold labels, 6px dots; delete appears beside the pill on hover. | Larger channel-colored Input/Output cards with persistent edit icon, descriptive rows, and 2px border. | The prototype uses terminal symbolism where current cards explain channel behavior. |
| 196 | Phone resting screen | Black call-style screen even before Start Call, “Company,” 00:00 and static 9:41. | Captured idle state shows a wallpaper/app-grid phone with an incoming-call banner naming the selected agent. | The initial visual difference is dramatic and should be specified separately from active-call appearance. |
| 197 | Phone frame size | 220×470px base scaled to 0.78: approximately 172×367px in the default preview. | Captured expanded-preview phone is roughly 350×720px, with a metallic frame and richer screen artwork. | Prototype shows variables within the first viewport; the larger current phone pushes them lower. Current dimensions depend on available space. |
| 198 | Call-start location | Green external Start Call button under the phone, 45% of available preview width. | Captured idle emulator invites tapping its incoming-call banner/phone control. | The call-to-action moves from the panel into the simulated device. |
| 199 | Phone typography | Prototype scales the whole phone, including nominal 24px company name and 11px status text. | Shared emulator has its own internal sizing and rendering, separate from application chrome. | Match effective on-screen phone text sizes; global app font changes will not be sufficient. |
| 200 | Preview form naming | “Variables,” “Ani,” “Dnis,” plus text inside ON/OFF switches. | “Template Variables,” count badge, helper paragraph, then derived variable fields and separate Debug section. | Current form explains provenance and adds debugging; prototype is shorter. |
| 201 | Transcript position and visibility | Collapsed by default below variables; section header has pause and expansion icons. | Current preview structure depends on channel and session; recording/debug/transcript surfaces are separate concerns. | The prototype's fixed order should not be assumed to cover every current testing mode. |
Recommended decisions before implementation
- Adopt a consistent typography scale deliberately. Keep Open Sans. Decide whether the smaller 12px descriptions/prompts and paler gray labels are appropriate for sustained editing; match actual weights, tracking, and line heights rather than just utility classes.
- Prioritize the canvas header. Add the centered Agent Canvas identity, compact the action group, and choose destinations for version selection, export, delete, Performance, and notifications. Preserve draft/publish and validation semantics.
- Reduce repository vertical overhead. The prototype's first card row appears about 230px earlier in the captured desktop layout. Resolve the shared brand bar, intro block, type row, and sorting placement as one layout decision.
- Treat the sub-agent canvas as an authoring-model decision. Agree which entities are independent agents, in-stage subagents, prompt scopes, or pipeline stages before building the prototype's nested navigation.
- Prototype the expanded prompt workspace with real controls. Its persistent library and stronger identity hierarchy are useful candidates. Keep greeting, tools, variables, logic, capabilities, provider configuration and copy-full-prompt functionality accessible.
- Map settings field by field. Separate visual regrouping of existing controls from new retention, queue, routing, and policy requirements. Specify save/cancel behavior explicitly.
- Carry robust interactions into the new visuals. Retain link semantics, keyboard navigation, focus restoration, modal focus handling, dynamic tester coverage, real save state, undo, validation, and mobile layout.
Prototype defects that should not become acceptance criteria
Homeadvertises “Show 4 more,” but both branches contain five activity rows.- The Home search submit button and Enhance with AI button have no working action.
- The regular card title intercepts the click that would otherwise open the card.
- Settings Save Changes closes the modal without committing the edited state.
- Agent prompt/description edits can be discarded when their panel unmounts, while the page still displays Saved.
- Activity View is empty; Restore only shows confirmation; Test opens an empty shell.
- Hiding Prompt Library retains its 331px outer column.
- The 214px desktop sidebar remains visible at phone width and constrains/clips the content.
Verification and limits
Browser captures confirm the main resting layouts, repository filters, creation entry/wizard, agent canvas, inspector, expanded editor with and without Preview, prototype nested canvas, prototype Settings/Activity, and current Activity's sheet. Source inspection covers conditional controls and behavior that cannot be safely inferred from a screenshot. Current Settings fails in fixture mode and current Activity data is loading/empty in the capture; these limits are labeled in the screenshot gallery and are not asserted to be deployed product defects.
The audit includes a mobile visual check and source-level keyboard/focus review. It is not a full accessibility certification, every-provider test, or production backend test. No real call, publish, restore, delete, or AI generation request is executed.
Disposable-browser interaction checks also confirm that the root prototype loses edited prompt text after closing/reopening the inspector, discards Settings edits after Save Changes, and leaves Canvas View open after Escape. See recorded behavior checks. The report verification checks inventory count, search filtering, comparison modes, image enlargement, and broken images.
See also
Implementation follow-up — 2026-09-23¶
The recommended shared UI changes have since been applied to the real app and
studio/design. This audit preserves the original comparison as the before
state. See the implementation and validation record
for the resulting experience, preserved capabilities and prototype corrections.