Live Preview Panel with Click-to-Edit for Claude Code sessions

[304systems]

[Feature] Live Preview Panel with Click-to-Edit for Claude Code sessions

Summary

Add an embedded browser panel (sidebar or split view) to Happy that renders a live preview of the user's running app/website. When the user clicks an element in the preview, the element's metadata (selector, tag, text, source location) is automatically injected into the active Claude Code session context — enabling a "click to edit" workflow similar to Claude Code Desktop's Preview feature, but accessible from Happy on any device.

Problem

Claude Code Desktop (Feb 2026) introduced a Preview feature where users can see their running app, click on UI elements, and Claude immediately knows which element to modify. This is arguably the most powerful workflow for frontend development.

However, this feature is only available in the native Claude Code Desktop app. Users who access Claude Code through Happy (mobile, web, or remote setups on headless servers) have no equivalent. They must describe elements in text or share screenshots — which is slow and error-prone.

Proposed Solution

Core: Embedded Browser Panel

Add a panel (togglable sidebar, split view, or dedicated tab) that renders a live URL:

┌───────────────────────────────────────────────────┐
│  Happy                                            │
│  ┌─────────────────────┬────────────────────────┐ │
│  │                     │  🔍 Preview    [URL...]│ │
│  │   Chat with Claude  │  ┌──────────────────┐  │ │
│  │                     │  │                  │  │ │
│  │  > "make this       │  │   Live website   │  │ │
│  │    button red"      │  │   rendered in    │  │ │
│  │                     │  │   embedded       │  │ │
│  │   Claude: "Done,    │  │   browser/iframe │  │ │
│  │   updating..."      │  │                  │  │ │
│  │                     │  │  [clicked elem   │  │ │
│  │                     │  │   highlighted]   │  │ │
│  │                     │  └──────────────────┘  │ │
│  └─────────────────────┴────────────────────────┘ │
└───────────────────────────────────────────────────┘

Click-to-Select Workflow

1. User opens Preview panel and enters their dev server URL (e.g., http://localhost:3000 or a public URL)

2. User toggles Inspect Mode (floating button or toolbar)

3. Hovering highlights elements with a colored overlay (like Chrome DevTools)

4. Clicking an element captures:

   • CSS selector (unique path)
   • Tag name, classes, ID
   • Text content
   • Bounding box / position
   • Outer HTML snippet (truncated)

5. This metadata is automatically injected into the active Claude Code session as context — either:

   • Prepended to the user's next message: [Selected element: <a class="btn-whatsapp">WhatsApp Us</a> at section.hero > .hero-ctas > a.btn-whatsapp]
   • Or sent as a system-level context update that Claude can read

6. User types their instruction (e.g., "make this bigger") — Claude already knows exactly which element they mean

Auto-Refresh on Code Changes

When Claude edits source files, the preview should auto-reload (or hot-reload if the dev server supports it), so the user sees changes instantly without manual refresh.

Technical Considerations

Rendering Approach

Option A: iframe (simplest)

• Works great for same-origin or CORS-friendly dev servers
• Needs a lightweight proxy for cross-origin scenarios
• Inspector overlay runs inside the iframe via injected script

Option B: Webview (for Electron/Tauri builds)

• Native webview component for desktop builds
• Full control over page, no CORS issues
• Can intercept all navigation and network

Option C: Remote browser streaming (for mobile)

• For mobile clients where iframe is limited
• Render via headless Chrome on server, stream viewport
• Higher latency but works universally

Inspector Script

A small (~100 lines) JavaScript snippet injected into the page that:

• Adds hover highlighting (blue/orange overlay on mouseover)
• Captures click events in inspect mode (preventDefault + capture element data)
• Generates unique CSS selectors using tag, classes, nth-child, and data attributes
• Communicates with Happy via postMessage (iframe) or WebSocket (webview/remote)

Integration with Claude Code Session

The selected element data should be available to Claude as if the user typed it. Options:

1. Prepend to next user message — simplest, works with any Claude Code version
2. Inject as MCP resource — if Happy exposes an MCP server, Claude can call get_selected_element()
3. System context injection — add to the conversation context silently

Source Code Mapping (bonus)

For enhanced developer experience, the inspector could map elements back to source code lines:

• During dev server build, inject data-source-file and data-source-line attributes
• Or use heuristics: match the CSS selector + text content against project source files
• Claude already does this well via Grep — so even basic selector info is sufficient

User Stories

1. Frontend developer on mobile: "I'm on my phone, I see the site in the preview panel, I tap the header, and tell Claude 'change this font to serif' — done in 5 seconds"

2. Remote/headless server user: "My server has no GUI. I open Happy, enter my domain URL in the preview, click around, and iterate with Claude as if I had VS Code open"

3. Design review: "Designer sends me a URL. I open it in the preview, click elements that need changes, and Claude fixes them one by one"

Prior Art

• Claude Code Desktop Preview (Feb 2026) — native preview + click-to-edit, desktop only
• Chrome DevTools MCP (Google, 2025) — AI agent controls Chrome, inspects elements
• VS Code Simple Browser — embedded browser in VS Code sidebar
• Cursor/Windsurf — similar preview features in AI-native editors
• Builder.io Visual Editor — click-to-edit visual interface for code generation

Implementation Phases

Phase 1: Basic Preview Panel

• Iframe-based preview with URL input
• Auto-refresh on file changes (watch mode / polling)
• Works on web and desktop builds

Phase 2: Click-to-Select

• Inspector overlay script injection
• Element metadata capture and display
• Automatic context injection into chat

Phase 3: Enhanced Integration

• Source code line mapping
• Multi-element selection
• Visual diff overlay (before/after changes)
• Mobile-optimized touch interactions

Impact

This would make Happy the first Claude Code client with visual click-to-edit capability outside the official Desktop app. For frontend development workflows, this is transformative — it eliminates the gap between "seeing" and "editing" that exists in every text-based AI coding interface.