Skip to content

feat: Live Preview Panel with click-to-edit workflow#806

Open
304systems wants to merge 17 commits intoslopus:mainfrom
304systems:feat/preview-panel
Open

feat: Live Preview Panel with click-to-edit workflow#806
304systems wants to merge 17 commits intoslopus:mainfrom
304systems:feat/preview-panel

Conversation

@304systems
Copy link

@304systems 304systems commented Mar 3, 2026

Summary

Adds an embedded browser panel 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 is automatically injected into the active Claude Code session context — enabling a "click to edit" workflow.

  • Preview Panel — native WebView (iOS/Android) + iframe (web) with toolbar, URL input, and inspect mode toggle
  • Click-to-Select — inspector script injected into the page captures hover highlights + click events, generates unique CSS selectors
  • Element Chip — selected element appears as a dismissible chip above the input; metadata auto-prepends to the next message sent to Claude
  • Auto-Refresh — watches tool-call messages (Edit/Write/Bash) and debounces WebView/iframe reload (skips if HMR detected)
  • Dev Server Detection — port scanner finds running servers on common ports (3000, 5173, 8080, etc.), dev server detector parses URLs from Bash output
  • Source Mapping — CLI RPC handler uses ripgrep to map element class names/text to source file:line
  • Split-View Layout — integrates alongside existing File Browser panel in web/tablet mode

Architecture

┌──────────────────────┬─────────────────────┐
│     Chat (existing)  │   Preview Panel     │
│                      │  ┌───────────────┐  │
│  [ElementChip: <a>]  │  │ Live Website  │  │
│  [Your message here] │  │   (WebView)   │  │
│                      │  └───────────────┘  │
└──────────────────────┴─────────────────────┘

App side (happy-app):

  • PreviewPanel.tsx / PreviewPanel.web.tsx — main panel
  • PreviewToolbar.tsx — URL bar + controls
  • DevServerPicker.tsx — server selection
  • ElementChip.tsx — element display + formatElementForMessage()
  • inspectorScript.ts — injected JS for hover/click/selector generation
  • useAutoRefresh.ts + autoRefreshClient.ts — debounced reload
  • storage.ts — Zustand: previewStates, mutations, hooks
  • SessionView.tsx — split-view integration + element prepend in onSend

CLI side (happy-cli):

  • portScanner.ts — TCP port check + HTTP title fetch
  • devServerDetector.ts — URL regex extraction + reload trigger logic
  • autoRefresh.ts — server-side debounce manager
  • registerPreviewHandlers.ts — RPC handlers (scan-ports, start-proxy, detect-urls, search-source)

Wire (happy-wire):

  • previewTypes.ts — Zod schemas: SelectedElement, PreviewState, createDefaultPreviewState()

Test plan

  • Open a session, toggle Preview Panel via sidebar
  • Enter a dev server URL → page loads in WebView/iframe
  • Toggle Inspect Mode → hover highlights elements, click captures metadata
  • Selected element appears as chip above input
  • Send message → element context prepended to message text
  • Dismiss chip → element cleared
  • Edit a file via Claude → preview auto-refreshes after debounce
  • CSS-only edit → stylesheet reload (no full page reload)
  • Dev server with HMR → auto-refresh skipped
  • Port scan detects running dev servers
  • Web (iframe) and native (WebView) variants both work

Closes #802

🤖 Generated with Claude Code
via Happy

root and others added 17 commits March 2, 2026 13:59
@claude @happy-otter
feat: major UI overhaul, file browser, sharing, zen mode, and markdow…
4434e47 
…n improvements

- Enhanced SessionView with file browser panel and file preview
- Added zen mode, learn section, and files tab
- Improved markdown rendering with mermaid diagrams and copy support
- Added session sharing and image/document APIs
- Reworked sidebar, settings, typography, and theme system
- Added permission mode selector improvements
- New docker-compose and nginx configs
- Prisma schema updates for public labels and shared sessions
- Updated translations (ru, en, and others)
- Realtime voice session refactoring

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix(happy-app): clean up sidebar header and remove duplicate new sess…
bef3400 
…ion button

Move settings/menu button to the left, remove restart daemon and eye/visibility
buttons from sidebar header (available via settings), remove duplicate "Start new
session" button from FABWide bottom panel keeping only Files.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: disable session timeout, add session recovery after daemon rest…
cb4afc5 
…art, rebrand to chatai.304

- Disable session/machine timeout entirely (cleanup via daily cron instead)
- Recover active sessions with --resume after daemon restart
- Add daily daemon restart cron script (4 AM IST)
- Rebrand logo from "304.systems" to "chatai.304"
- Compact UI tweaks: smaller avatars, tighter session rows

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix(happy-app): replace brutalist settings icon with folder, move fol…
98791dc 
…der+expand to left of back arrow in chat header

- SidebarView: replace brutalist image with Ionicons folder-outline for settings
- ChatHeaderView: move folder (settings) and expand buttons before the back arrow
- ChatHeaderView: remove unused onFileBrowserPress, onSharePress props and chatBubbleStarSvg
- SessionView: remove unused onFileBrowserPress prop

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: multi-agent support (Codex/Gemini), UI improvements, session re…
d7dd22b 
…covery

- Add Gemini and OpenAI (Codex) built-in profiles to session wizard
- Fix profile availability: profiles now clickable regardless of current agent type
- Agent button in input bar now cycles through claude → codex → gemini
- Enable experiments and enhanced session wizard by default
- Add Gemini CLI OAuth and Codex CLI device-auth integration
- Rebrand 304.SYSTEMS → CHATAI.304 with text-based header logo
- Improve session list padding and active session sizing
- Increase web header height from 56px to 64px
- Add PWA manifest.json for standalone display mode
- Session recovery after daemon restart
- Various UI polish: sidebar spacing, typography, chat header

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: keyboard shortcuts, universal profile, and image forwarding to …
1f140e4 
…Claude

- Add global keyboard shortcuts: Cmd+K (palette), Cmd+N (new session),
  Cmd+, (settings), Cmd+[/] (prev/next active session), Ctrl+1..9
  (switch by sidebar order), Cmd+B (toggle sidebar)
- Add universal default profile compatible with Claude, Codex, and Gemini
- Fix images/screenshots being silently dropped by CLI: add ImageInfo
  to UserMessageSchema, propagate through MessageQueue2 and
  claudeRemoteLauncher, convert to Claude API ContentBlock format
- Simplify HeaderLogo to status dot only (sidebar retains full branding)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat(wire): add preview panel type definitions
8133b76 
Add Zod schemas and TypeScript types for the Preview Panel feature:
- SelectedElement: metadata captured when user clicks an element
- PreviewState: per-session preview panel state
- Factory function for default state

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: add live Preview Panel with click-to-edit workflow
e277243 
Adds an embedded browser panel to Happy that renders a live preview
of the user's running app. Users can toggle Inspect Mode, click on
any element, and the element metadata is automatically prepended to
their next message — enabling a visual click-to-edit workflow.

Components:
- PreviewPanel (native WebView + web iframe variants)
- PreviewToolbar (URL input, inspect toggle, refresh)
- DevServerPicker (detected dev server list)
- ElementChip (selected element chip in input area)
- Inspector script (hover highlight, click capture, selector generation)

CLI:
- Port scanner (auto-detect running dev servers)
- Dev server detector (parse URLs from Bash output)
- Auto-refresh manager (debounced reload on code changes)
- RPC handlers for preview operations

Integration:
- Zustand store: previewStates, mutations, hooks
- SessionView: split-view panel + element chip before input
- Message prepend: selected element context sent to Claude
- Auto-refresh: watches tool-call messages, triggers WebView reload

Ref: slopus#802

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat(preview): add Preview button to header and sidebar
6e71cc6 
Adds the UI entry point for the Preview Panel:
- Eye icon in ChatHeaderView (header bar)
- Preview button in FABWide (sidebar bottom bar)
- SidebarView dispatches toggle-preview event
- SessionView wires onPreviewPress to ChatHeaderView

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix(preview): use @slopus/happy-wire instead of bare happy-wire
855b3dd 
The package is published as @slopus/happy-wire, not happy-wire.
Fixes Docker build failure due to unresolved module.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: preview panel enhancements, screenshot service, MCP settings, a…
0dfc33a 
…nd monitor relay

- Enhanced PreviewPanel with device bar, screenshot capture, and inspector improvements
- Added preview proxy routes and screenshot service to CLI
- Added MCP server management settings page and popup
- Added monitor relay hooks for real-time preview communication
- Added preview-related translations across all locales
- Updated Docker and nginx config for preview proxy support
- Added design docs for monitor auth, MCP management, and screenshot-to-chat

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: preview toolbar improvements, auth token refresh, and session m…
192a16e 
…anagement

- Enhanced PreviewToolbar with better device controls and screenshot capture
- Added token refresh logic to tokenStorage for seamless auth
- Improved SessionView layout and session switching
- Added CLI daemon graceful shutdown and API machine enhancements
- Updated CommandPalette with extended navigation shortcuts
- Added auth token refresh endpoint to server

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: session inline actions, theme fixes, and design docs
76cbb34 
- Add three-dot menu (⋯) to each session in sidebar
- Inline expand with Restart / Archive / Delete action buttons
- Delete shows Yes/No confirmation inline (no modal)
- Remove Swipeable gesture — same UX on all platforms
- Add groupped.item colors to all themes (fix transparent FAB buttons)
- Add session action translations to all 11 languages
- Add design docs for session actions and other planned features

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix: message sync, session name inheritance, and resume history limit
f065977 
- Re-fetch messages after sendMessage to catch WebSocket gaps
- Pass session summary via HAPPY_SESSION_SUMMARY env var on resume
- Limit resume history to last 60 messages (older available via pagination)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix: robust message sync via seq gap detection
4404601 
Replace band-aid onSessionVisible-after-sendMessage with proper
sequence number gap detection. When a WebSocket update arrives with
seq N and last known was M where N > M+1, automatically re-fetches
messages for the affected session.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
fix: make http/https links clickable in chat messages
2ad55cd 
External URLs were being intercepted by the preview panel handler
instead of opening in a new tab. Now http:// and https:// links
use window.open on web and Linking.openURL on native.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
@claude @happy-otter
feat: sidebar improvements - collapsible groups, auto title on resume…
cfe80eb 
…, dual naming

- Collapsible directory groups in ActiveSessionsGroup and ActiveSessionsGroupCompact
  with LayoutAnimation for smooth transitions
- Auto change_title injection on session resume via appendSystemPrompt
- Dual session naming: manual name (persistent, user-set) takes priority over
  auto-generated summary, with long-press to rename in sidebar and rename button
  in session info page
- Show auto-generated name as subtitle when manual name is set
- Added manualName persistence via MMKV storage
- Added translations for rename UI in all 10 languages

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

1 participant

@304systems