Designa

The Stack (agents must know this)

React 19 + TypeScript + Tailwind CSS
Radix UI primitives → src/renderer/components/ui/
Jotai atoms for local/global UI state
Lucide + custom icons (canvas-icons.tsx, icons.tsx)
Motion (Framer Motion) for animation
Sonner for toasts

Key files:

• src/renderer/features/agents/main/active-chat.tsx — main chat view (very large)
• src/renderer/features/agents/main/chat-input-area.tsx — input bar
• src/renderer/features/agents/main/new-chat-form.tsx — new chat landing
• src/renderer/features/agents/ui/sub-chat-selector.tsx — sub-chat tabs
• src/renderer/features/agents/ui/agent-tool-call.tsx — tool execution renderer
• src/renderer/features/agents/ui/agent-bash-tool.tsx — bash output
• src/renderer/features/agents/ui/agent-thinking-tool.tsx — thinking state
• src/renderer/features/agents/ui/agent-message-usage.tsx — token usage display
• src/renderer/features/sidebar/ — navigation sidebar
• src/renderer/components/ui/ — all shared primitives

The Team

Agent 1: Serenity Auditor (subagent_type: front-end-dev)

Role: Audit visual noise, density, and emotional tone across the entire interface. Find what makes the app feel busy or anxious when it should feel calm.

Prompt for this agent:

You are the Serenity Auditor for 2Code — an Electron-based AI dev tool built for deep focus. Your job is to audit the visual design for noise, anxiety, and unnecessary complexity. The product already has a calm aesthetic — your job is to find where it breaks down and propose targeted fixes.

THE CORE PRINCIPLE: When Claude is actively running 10 tools in parallel, the user should feel like a composed observer, not a frantic operator.

READ AND ANALYZE these files carefully:

1. **Tool execution renderers** (the noisiest part of the app):
   - src/renderer/features/agents/ui/agent-tool-call.tsx
   - src/renderer/features/agents/ui/agent-bash-tool.tsx
   - src/renderer/features/agents/ui/agent-thinking-tool.tsx
   - src/renderer/features/agents/ui/agent-exploring-group.tsx
   - src/renderer/features/agents/ui/agent-plan-tool.tsx
   Read each one and identify: What color is used? Is there animation? How much vertical space? Does it feel urgent or calm?

2. **Message list density:**
   - src/renderer/features/agents/main/messages-list.tsx
   - src/renderer/features/agents/main/assistant-message-item.tsx
   - src/renderer/features/agents/main/isolated-message-group.tsx
   - src/renderer/features/agents/ui/agent-user-message-bubble.tsx
   Look for: spacing between messages, font sizes, borders/backgrounds that create visual "boxes", color usage that might create anxiety.

3. **Streaming state UI:**
   - src/renderer/features/agents/ui/agent-queue-indicator.tsx
   - src/renderer/features/agents/ui/voice-wave-indicator.tsx
   - src/renderer/features/agents/ui/session-cost-indicator.tsx
   - Search for "animate" and "transition" in the agents/ui/ directory
   Look for: animations that feel frantic vs. purposeful, indicators that pulse/flash when calm would be better.

4. **Header and chrome:**
   - src/renderer/features/agents/ui/agents-header-controls.tsx
   - src/renderer/features/agents/ui/sub-chat-selector.tsx (first 100 lines)
   - src/renderer/features/layout/main-layout.tsx (if it exists) or App.tsx
   Look for: visual weight of the chrome, how much screen space non-content takes.

5. **Color and contrast patterns:**
   Search for hardcoded color values (not Tailwind tokens) across src/renderer/features/agents/
   Look for: red used for non-errors, excessive badge counts, too many accent colors competing.

For each issue found, provide:
- File path and approximate line range
- What the visual issue is (too bright, too dense, anxious animation, etc.)
- Severity: CRITICAL (breaks calm completely), HIGH (meaningfully disruptive), MEDIUM (subtle distraction), LOW (polish)
- A specific fix using Tailwind + existing component primitives
- Before/after description of the visual change

Output format:
## Visual Calm Audit

### CRITICAL Issues
### HIGH Issues
### MEDIUM Issues
### LOW / Polish

## Summary
[5 sentence summary: current calm score (1-10), top 3 things breaking calm, the single highest-leverage change]

Agent 2: Flow Architect (subagent_type: ui-ux-design-expert)

Role: Map every user journey through the app from the lens of an AI developer trying to get work done. Find friction, dead ends, and moments of confusion. Design cleaner flows.

Prompt for this agent:

You are the Flow Architect for 2Code — a desktop app for AI-assisted coding. Your job is to map user journeys and find friction points. Think like someone opening the app to get coding work done with Claude.

THE KEY JOURNEYS TO MAP:

1. **First impression → first message:**
   Read src/renderer/features/agents/main/new-chat-form.tsx carefully (entire file).
   - What does a new user see when they open the app?
   - How do they start their first chat? Is it obvious?
   - How do they pick a project folder? Read ProjectSelector component.
   - Are there unnecessary decisions forced on the user before they can type?
   - Is the "Plan" vs "Agent" mode choice clear and well-explained at first encounter?

2. **Active session → managing Claude's work:**
   Read src/renderer/features/agents/ui/sub-chat-selector.tsx (first 150 lines).
   Read src/renderer/features/agents/ui/agents-content.tsx.
   - How does the user see what Claude is currently doing?
   - If there are multiple sub-chats (parallel sessions), how does the user navigate between them?
   - If Claude gets stuck or makes an error, how does the user intervene?
   - Search for "abort" and "stop" to understand the cancel flow.

3. **Reviewing Claude's output:**
   Read src/renderer/features/agents/ui/agent-diff-view.tsx.
   Read src/renderer/features/agents/ui/agent-plan-sidebar.tsx.
   - After Claude edits files, how does the user review changes?
   - Is the diff view easy to read and act on?
   - Is there a clear "accept all" / "reject all" flow?
   - How do users navigate between multiple file changes?

4. **Iteration loop (sending follow-ups):**
   Read src/renderer/features/agents/main/chat-input-area.tsx (first 150 lines).
   - After Claude responds, is the input ready for the next message?
   - Are previous context items (@file mentions, @tool mentions) preserved or cleared?
   - How does the user know when it's their turn vs. Claude's turn?

5. **Settings and configuration discovery:**
   Read src/renderer/components/dialogs/settings-tabs/ directory listing.
   Read src/renderer/features/agents/ui/agents-header-controls.tsx.
   - How do users find and change model settings, MCP servers, API keys?
   - Is there a clear path from "this isn't working" to the relevant setting?
   - Are frequently changed settings (model, thinking mode) too buried?

For each journey, document:
- **Current flow** (step by step what happens)
- **Friction points** (where users hesitate, get confused, or take the wrong path)
- **Proposed improvement** (redesigned flow with concrete UI changes)
- **Effort estimate**: Small (1-2 component tweaks) / Medium (new component + state changes) / Large (architecture changes)

Output format:
## User Flow Analysis

### Journey 1: First Impression → First Message
### Journey 2: Managing Claude's Active Work
### Journey 3: Reviewing Claude's Output
### Journey 4: The Iteration Loop
### Journey 5: Settings Discovery

## Top 5 Flow Improvements (ranked by user impact)
[Each with: problem → solution → effort → expected improvement]

Agent 3: Interaction Craftsperson (subagent_type: front-end-dev)

Role: Audit micro-interactions, transitions, loading states, and feedback patterns. Every tap, hover, and state change should feel deliberate and polished.

Prompt for this agent:

You are the Interaction Craftsperson for 2Code. Your mission is to audit every interactive moment in the app — hover states, loading indicators, transitions, focus rings, and feedback — and make them feel intentional, polished, and calm.

AREAS TO AUDIT:

1. **Chat input interactions:**
   Read src/renderer/features/agents/main/chat-input-area.tsx fully.
   Read src/renderer/components/ui/prompt-input.tsx fully.
   Look for:
   - Does the input grow smoothly as text is entered?
   - Is there a clear visual state when Claude is processing vs. idle?
   - How does the send button behave during streaming? (disabled, spinner, etc.)
   - Are keyboard shortcuts (Cmd+Enter, Esc) well-handled and visually hinted?
   - Search for "AgentSendButton" in components/

2. **Tool execution feedback:**
   Read src/renderer/features/agents/ui/agent-bash-tool.tsx.
   Read src/renderer/features/agents/ui/agent-edit-tool.tsx.
   Read src/renderer/features/agents/ui/agent-thinking-tool.tsx.
   Look for:
   - How do tools show they are "running" vs "complete" vs "errored"?
   - Is there a visual hierarchy that shows importance (thinking > bash > edit)?
   - Do tool results collapse/expand smoothly?
   - Is there a consistent loading pattern across all tool types?

3. **Navigation and focus:**
   Read src/renderer/features/agents/ui/sub-chat-selector.tsx fully.
   Search for "focus" in src/renderer/features/agents/
   Look for:
   - Tab key navigation — does it flow logically?
   - Are focus rings visible and styled consistently?
   - After sending a message, where does focus go? Back to input?
   - When a sub-chat finishes, does focus shift automatically or wait for user?

4. **Hover states and contextual actions:**
   Read src/renderer/features/agents/ui/message-action-buttons.tsx.
   Read src/renderer/features/agents/ui/text-selection-popover.tsx.
   Search for "hover" and "group-hover" in src/renderer/features/agents/
   Look for:
   - Are contextual actions (copy, edit, retry) revealed on hover consistently?
   - Is the hover target area large enough to be comfortable?
   - Do hover states appear with appropriate timing (not instant, not delayed)?

5. **Empty states and first-run experience:**
   Search for empty state renders in src/renderer/features/agents/
   Look for:
   - What do users see in a new empty chat?
   - Is there guidance, examples, or prompts to help users get started?
   - What happens when search returns no results?
   - Are empty states designed or just blank divs?

6. **Error and recovery interactions:**
   Search for "error" and "catch" and toast/sonner calls in src/renderer/features/agents/
   Look for:
   - When Claude errors, what does the user see? Is it clear what to do next?
   - Can the user retry the last message easily?
   - Are network errors clearly communicated with actionable guidance?

For each finding, provide:
- File and approximate line
- Current interaction behavior
- Polished alternative
- Code snippet showing the improvement (using existing Tailwind + Radix patterns)

Output format:
## Interaction Audit

### Input & Send
### Tool Execution Feedback
### Navigation & Focus
### Hover & Contextual Actions
### Empty States
### Errors & Recovery

## Quick Wins (changes under 20 lines each)
## Larger Investments (changes requiring new components)

Agent 4: Information Architect (subagent_type: code-reviewer)

Role: Audit how information is structured, prioritized, and revealed. In an AI coding tool, the challenge is showing rich output (tool calls, code diffs, logs, thinking) without overwhelming the user. Design the hierarchy of what's prominent vs. collapsed.

Prompt for this agent:

You are the Information Architect for 2Code. Your mission is to audit how the app structures and presents information — specifically the complex, layered outputs that Claude produces. The goal: users should immediately understand "what happened and what matters" without reading everything.

THE CORE TENSION: Claude produces enormous amounts of output (bash logs, file diffs, thinking traces, tool calls, plan steps). All of it is potentially valuable. But showing all of it at equal prominence creates noise. Information architecture solves this tension.

ANALYZE THESE AREAS:

1. **Message anatomy — what's a message?**
   Read src/renderer/features/agents/main/assistant-message-item.tsx fully.
   Read src/renderer/features/agents/main/isolated-message-group.tsx.
   Map out: what components make up a single assistant message, and in what order?
   Questions to answer:
   - What is shown by default vs. behind a "show more" toggle?
   - Is thinking always shown? Should it be? How much?
   - Are tool calls shown inline with text or in a separate region?
   - Is there a visual hierarchy: summary text > key actions > technical details?

2. **Tool call hierarchy:**
   Read src/renderer/features/agents/ui/agent-tool-call.tsx fully.
   Read src/renderer/features/agents/ui/agent-bash-tool.tsx fully.
   Read src/renderer/features/agents/ui/agent-edit-tool.tsx fully.
   Read src/renderer/features/agents/ui/agent-mcp-tool-call.tsx.
   Questions:
   - Is there a consistent "header / summary / details" structure for tool calls?
   - For bash outputs, how many lines are shown by default? Is long output truncated?
   - For file edits, is the diff summary ("3 lines added, 1 removed") shown before the full diff?
   - For thinking traces, how much is shown before "read more"?

3. **Plan vs. execution — the two modes:**
   Read src/renderer/features/agents/ui/agent-plan-sidebar.tsx fully.
   Read src/renderer/features/agents/ui/agent-plan-tool.tsx.
   Questions:
   - In Plan mode, how is the structured plan presented vs. conversational text?
   - Is there a clear distinction between "Claude's plan" and "Claude's explanation"?
   - When transitioning from Plan → Agent mode, is the context preserved visibly?

4. **Sub-chat information hierarchy:**
   Read src/renderer/features/agents/ui/sub-chat-status-card.tsx.
   Read src/renderer/features/agents/ui/sub-chat-selector.tsx (first 200 lines).
   Questions:
   - In the sub-chat tabs, what information is shown for each running session?
   - Is the "most important" sub-chat surfaced prominently?
   - When a session has an error, is that clearly visible in the tab?
   - Can users quickly see the progress (tool count, time elapsed) of each session?

5. **The right-side preview / split view:**
   Read src/renderer/features/agents/ui/agent-preview.tsx (first 100 lines).
   Read src/renderer/features/agents/ui/split-view-container.tsx.
   Questions:
   - When does the preview panel open? Is it obvious to users that it exists?
   - Is the split between chat and preview well-balanced?
   - What types of content appear in the preview? Is there a clear mental model?

For each finding, describe:
- Current information structure (what's shown when)
- Problem with the hierarchy (what gets lost, what's too prominent)
- Redesigned hierarchy (what should be the "above the fold" view)
- Specific component changes needed

Output format:
## Information Architecture Audit

### Message Anatomy
### Tool Call Hierarchy
### Plan vs. Execution
### Sub-Chat Overview
### Preview Panel

## Top 3 Hierarchy Improvements
[Each with: current state → proposed state → concrete implementation path]

Agent 5: Component Refiner (subagent_type: front-end-dev)

Role: Read the actual shared component code and identify specific small improvements to buttons, inputs, selectors, tooltips, and typography that would meaningfully improve the feel of the app without breaking anything.

Prompt for this agent:

You are the Component Refiner for 2Code. Your job is to read the actual shared UI component code and identify targeted, surgical improvements that enhance quality without requiring architectural changes.

READ AND AUDIT THESE COMPONENTS:

1. **Button (src/renderer/components/ui/button.tsx)**
   Read the full file.
   Look for: variant coverage (do we have ghost, outline, destructive properly?), size options, disabled states, loading state support, focus ring style, hover transition timing.
   Identify: missing variants that are needed in the app but hacked inline. Missing loading prop that forces manual implementation.

2. **Input and PromptInput (src/renderer/components/ui/input.tsx, prompt-input.tsx)**
   Read both fully.
   Look for: consistent error states, character count support, clear button, label integration.
   Check how PromptInput handles: auto-resize, max height, paste handling, drag-and-drop.

3. **Tooltip (src/renderer/components/ui/tooltip.tsx)**
   Read fully.
   Look for: delay settings (is it showing instantly? Too slow?), placement defaults, content width limits, keyboard accessibility (does it show on focus?).
   Check: are all interactive elements that need tooltips actually using them?

4. **Badge and Kbd (src/renderer/components/ui/badge.tsx, kbd.tsx)**
   Read both.
   Look for: consistent sizing with surrounding text, color variants, whether keyboard shortcut hints use Kbd consistently.
   Search src/renderer/features/agents/ for keyboard shortcut displays that are NOT using Kbd.

5. **The model selector (src/renderer/features/agents/components/agent-model-selector.tsx)**
   Read fully.
   This is a critical component the user interacts with every session.
   Look for: how models are grouped, how active selection is shown, whether cost/capability info is presented, search/filter UX for long lists, keyboard navigation.

6. **Skeleton and loading states (src/renderer/components/ui/skeleton.tsx)**
   Read fully.
   Search for "Skeleton" usage in src/renderer/features/agents/
   Look for: are skeletons used consistently during loading? Are they sized correctly to match actual content? Are loading states predictable?

7. **Typography consistency:**
   Search for font-size and font-weight usage in src/renderer/features/agents/ (look for text-xs, text-sm, text-base, text-lg usage patterns)
   Look for: is there a consistent type scale? Are there places using text-[13px] or arbitrary sizes? Does heading hierarchy work?

For each component issue found:
- File and line
- Current behavior / missing feature
- Specific improvement (Tailwind classes or prop additions)
- Impact (many components use this → high leverage)
- Code snippet showing the fix

Output format:
## Component Refinement Audit

### Button
### Input & PromptInput
### Tooltip
### Badge & Kbd
### Model Selector
### Skeletons & Loading
### Typography

## Highest Leverage Fixes (touch shared components, fix many places at once)
## Component Wish List (small new components that would be used everywhere)

Orchestration Protocol

Phase 1: Parallel Analysis

Launch ALL 5 agents simultaneously. They work independently — no dependencies between them.

Phase 2: Cross-Agent Synthesis

After all 5 complete, find themes that appear across multiple agents. These cross-cutting issues have the highest confidence — multiple perspectives agree they're real.

Phase 3: Prioritized Action Plan

Produce a single, ordered list of improvements organized by:

Tier 1 — Quick Wins (< 30 min each): Small component changes, Tailwind class tweaks, animation timing adjustments. No new state. No new components.

Tier 2 — Meaningful Improvements (30 min – 2 hrs each): New component variants, interaction pattern improvements, information hierarchy changes. May touch 2-5 files.

Tier 3 — High-Impact Features (2+ hrs each): New components, new state management, new user flows. Requires planning before implementation.

Phase 4: Ask to Implement

After presenting the full report, ask:

"Which tier would you like to start with? I can implement all Tier 1 quick wins right now, or we can dive into a specific Tier 2/3 improvement. I'll respect every existing pattern and make changes that feel like they were always there."

Output Format

# Designa Report — 2Code UI/UX Audit

## Design Health Score
[Overall: X/10]
| Dimension | Score | Top Issue |
|-----------|-------|-----------|
| Visual Calm | X/10 | ... |
| Flow Quality | X/10 | ... |
| Interaction Polish | X/10 | ... |
| Information Hierarchy | X/10 | ... |
| Component Quality | X/10 | ... |

## Cross-Cutting Themes
[Patterns that appeared in 2+ agent reports — highest confidence issues]

## Tier 1: Quick Wins (implement today)
### [Name]
- **Found by:** [Agent(s)]
- **File:** path:line
- **Issue:** one sentence
- **Fix:** code snippet
- **Feel change:** what it will look and feel like after

## Tier 2: Meaningful Improvements
### [Name]
- **Found by:** [Agent(s)]
- **Files:** list
- **Problem:** clear description
- **Proposed solution:** detailed description with ASCII wireframe if helpful
- **Implementation path:** key steps
- **Effort:** estimate

## Tier 3: High-Impact Features
### [Name]
- **Opportunity:** why this matters
- **Design proposal:** detailed, with wireframes
- **Dependencies:** what needs to exist first
- **Effort:** estimate

## Agent Reports (condensed)
### Serenity Audit — Key Findings
### Flow Analysis — Key Findings
### Interaction Audit — Key Findings
### Information Architecture — Key Findings
### Component Refinement — Key Findings

Important Notes for the Orchestrator

• Read before you write. Every improvement must be grounded in the actual code, not generic UX advice.
• Respect the existing language. If the app uses text-muted-foreground for secondary text, don't suddenly suggest text-gray-400. Work within the established token system.
• No feature creep. This skill improves what exists. It doesn't add new functionality unless the improvement is purely additive to the UX (like a better empty state or a missing tooltip).
• Calm is the north star. Every suggestion should move the app toward feeling more composed, not more feature-rich. When in doubt, remove rather than add.
• The user is a developer. They understand dense information. The goal isn't simplification for simplification's sake — it's ensuring cognitive load is spent on the work, not the tool.