New app interface: three-panel layout, AI tasks, and embedded browser#2961
Draft
shaunandrews wants to merge 79 commits intotrunkfrom
Draft
New app interface: three-panel layout, AI tasks, and embedded browser#2961shaunandrews wants to merge 79 commits intotrunkfrom
shaunandrews wants to merge 79 commits intotrunkfrom
Conversation
Settings now opens in its own BrowserWindow instead of an in-app overlay. The renderer entry point routes to SettingsRoot or Root based on ?view=settings. Menu shortcut (Cmd+,) calls openSettingsWindow directly. Sentry and logging init stripped from renderer for now — will be restored when wiring up the full app. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New CSS custom properties (--color-chrome-*) for window chrome surfaces, matching the existing frame token pattern. Light mode uses a warm gray bg with dark text; dark mode uses near-black with white text at various opacities. Mapped to Tailwind as bg-chrome, text-chrome-text, etc. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces the legacy sidebar+content layout with a PanelNavigation / PanelPrimary / PanelSecondary structure using react-resizable-panels. Panels collapse via Cmd+B / Cmd+Shift+B or toolbar buttons, with animated transitions. Toolbar component provides start/middle/end slots with a truly centered middle. Primary toolbar adapts with an inset for macOS traffic lights when nav is collapsed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Placeholder components for the redesigned UI panels. Settings window includes General, Account, Colors (token reference), and a component library tab. These are scaffolding — functional wiring comes later. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dev-only floating controller to switch between macOS/Windows modes for testing UI adaptation. Main window background color now reads from nativeTheme to match chrome tokens in light/dark mode. Traffic light position tweaked to y:18. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Wire the existing SiteMenu and RunningSites components into the new sidebar instead of bespoke buttons. Add start/stop all toggle to the Sites section header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace hardcoded hex colors with chrome-* tokens for light/dark mode support. Rewrite drag-and-drop to animate items into position using translateY transitions instead of static indicators. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use react-resizable-panels' useDefaultLayout to save/restore panel sizes via localStorage. Separately persist collapsed state so panels restore correctly on reload. Sync navCollapsed when panels collapse via drag so the macOS traffic light inset updates. Wire settings button and separator color tokens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Rename Components tab to WP Components. Add Studio Components tab with MockProviders wrapping SiteMenu and Sidebar so they render with fake site data in the settings window. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove redundant ContentHeader from site-details (now handled by panel-layout toolbar). Set toolbar min-height instead of border-bottom for consistent spacing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace SiteContent with SiteContentTabs in the primary panel. Reduce content tab top padding. Fix settings toolbar formatting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The settings window was a stub with only a color scheme picker. Now it has the full set: appearance, language, editor, terminal, CLI toggle, account, skills, and MCP — all instant-save. Adds Redux/I18n/Auth providers and tab deep-linking via URL param. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Callers now use openSettingsWindow with tab deep-linking instead of the old showUserSettings IPC event that targeted a modal that no longer renders in the new UI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Platform switching now lives in the settings window. The main window listens for cross-window localStorage changes instead of custom events. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…sktop The system prompt has zero dependencies and is needed by both the CLI agent and the new desktop agent integration. CLI now re-exports from the shared location. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
TaskMetadata type with id, siteId, title, status, archived, sessionId. Task CRUD handlers (create/get/update/archive/delete) plus agent lifecycle handlers (start/send/interrupt/respond-to-permission). Tasks persisted in appdata-v1.json alongside site data. Six new IPC events for main->renderer communication. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Manages task list, selected task, messages per task, streaming state, and pending permission requests. Merges tool results onto invocations by tool_use_id. Listeners for task-updated, task-message, task-status-changed, task-permission-request, and task-error events. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace sidebar Tasks placeholder with TaskList component. Primary panel conditionally renders TaskChatPanel vs SiteContentTabs based on selectedTaskId. Site list clears task selection on click and suppresses highlight when a task is active. New Task button on site overview. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AgentManager runs Claude Agent SDK in Electron main process with desktop-native MCP tools (site_list, site_info, site_start, site_stop, wp_cli) using SiteServer directly. Provider resolver with wpcom/claude/ api-key fallback. Message serializer converts SDKMessages including tool results. Chat UI with expandable tool call cards showing full input/output, permission prompts, and streaming indicators. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The message serializer was creating assistant messages from both 'assistant' SDK events and the final 'result' event, which contains the same text. Only surface errors from result messages now. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Messages were lost on app refresh or restart because they only lived in Redux memory. Now messagesByTask is saved to localStorage on every change and restored on init, matching the existing chat persistence pattern. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
wp post update replaces entire page content, making targeted block edits risky. These tools use WordPress parse_blocks/serialize_blocks to let the agent read individual blocks by index and replace them surgically. Markup is base64-encoded to avoid PHP escaping issues. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tasks can now be archived via a hover button on each item. An archive toggle in the header switches between active and archived views. The archived view shows a count and Clear all button that batch-deletes all archived tasks via a new clearArchivedTasks IPC handler. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The agent often uses the directory basename from its cwd (e.g.
"my-serene-website") instead of the display name ("Next to Kin"),
causing a failed lookup followed by a site_list round-trip. Now all
MCP tool lookups try display name first, then path basename.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces the secondary panel placeholder with a functional browser that previews the active site. Auto-authenticates via /studio-auto-login so the WP admin bar is always visible. Strips framing headers from localhost responses so wp-admin pages load in the iframe. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Images exceeding the 4MB base64 threshold (API limit is 5MB) are now auto-resized via canvas before being sent. Applied at file picker/paste (task-chat-input) and browser screenshot capture (use-area-screenshot). Also sends ai:done after ai:error in the headless agent so the desktop properly cleans up and follow-ups can resume via session ID. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Titles are generated in the background after the first message. Summaries are generated after the agent's first turn completes. Both use a lightweight Haiku call through the headless agent's IPC channel to reuse existing auth resolution. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Messages sent during streaming are queued in Redux and auto-sent when the agent finishes its current turn. Queued messages appear as dismissible chips above the input. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tool messages are filtered from the conversation view. A new activity indicator above the input shows the agent's current state with an expandable log of all activity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Chat input now accepts areaScreenshot for in-task browser captures, auto-imports screenshots as image attachments, resizes oversized images, and supports queuing messages while the agent is streaming. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Shows task title, summary, and status in a tooltip-style card when hovering sidebar task items. Uses delayed show with fast re-entry to feel responsive without being distracting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Toolbar buttons reordered: nav controls, tabs, then select/capture at the end. Added iframe URL polling for SPA navigation detection. Sidebar gains an Add Site button; tab label simplified to URL only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The separate Electron BrowserWindow for site creation is superseded by the Task-based project creation flow running in the main window. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New users see a full-width creation flow (sidebar hidden). The chooser and new-project chat live in the primary panel. Setup tasks use a SETUP_SITE_ID placeholder and migrate to the real site after site_create completes. Cmd+N triggers create-project IPC event instead of opening a separate window. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AskUserQuestion now routes through a dedicated question IPC channel instead of reusing permission prompts. Questions render as interactive cards in the chat with clickable options and a free-text fallback. Also fixes buildContentBlocks to handle empty text gracefully. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Local file paths from browser_navigate are served via an HTTP server (CSP blocks file:// in iframes). Browser panel gains hasContent flag, open-tab event support, and handles setup tasks without a running site. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Shortcuts now show actual app icons (VS Code, Terminal, Finder, phpMyAdmin) instead of generic WordPress icons. Tasks section with inline chat input added to overview. Publish section moved above shortcuts. phpMyAdmin opens in browser panel tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tasks for deleted sites are hidden. Setup tasks (SETUP_SITE_ID) appear at the top without a site group header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Non-modal tooltip that points to DOM elements with a message. Used to introduce sidebar and project detail after first build. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Expands site-spec to 5 rounds (name, goals, structure, stack, tone). NEW-SITE-CREATION.md rewritten for Task-based creation with design previews. browser_navigate docs updated for local file support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces the two-section sidebar (scrollable tasks + fixed projects) with a single ProjectList where each project row has a toggle chevron, clickable name for navigation, hover + button for new tasks, and status indicator. Includes project preview card on hover and preserves drag reorder, context menus, and archive functionality. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The custom implementation used a Popover with hardcoded dark background and a broken fade animation. Now wraps @wordpress/components Tooltip directly, keeping the disabled/icon prop API for compatibility. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ration Tasks can now be renamed inline via an EditableTaskTitle component, triggered from a new Rename option in the task menu. TaskNewPanel auto-creates when only one site exists. Browser floating input generates a title from the first message. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Browser collapsed state now syncs correctly on drag resize. Task title in the toolbar is editable. Auto-start creation flow only triggers when there are no tasks either. Updated NEW-SITE-CREATION.md with implementation status and revised site-spec skill. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…chive icon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
7 tasks
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… lifecycle Renames Select Element to Add Notes. The floating input now appears in both task-chat and project-detail modes. In task chat, notes are numbered, queued while the agent responds, and shown as labeled overlays that turn green on completion and fade away. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
How AI was used in this PR
Claude Code (Opus) was used extensively as a pair-programming partner throughout this branch — designing the panel architecture, building the AI agent integration, implementing the browser panel, and iterating on the UI. All code was reviewed and directed by the author.
Proposed Changes
This is a Proof of Concept for a ground-up redesign of the Studio desktop app interface. It replaces the existing single-sidebar layout with a flexible three-panel architecture, adds AI-powered tasks, and embeds a live browser preview — all in a single cohesive experience.
Three-Panel Layout
Cmd+B.Cmd+Shift+B.All panels are resizable with drag handles, and sizes/collapsed state persist across sessions.
AI Tasks
fork()with an IPC channel — matching the establishedCliServerProcesspattern. A new hiddenstudio ai agentcommand runs the Claude Agent SDK in a headless child process, communicating SDK messages, permission requests, and control signals over Node IPC.site_list,site_info,site_start,site_stop,wp_cli,post_blocks_read,post_block_update,site_create,site_delete,preview_*,take_screenshot,validate_blocks.Embedded Browser
/studio-auto-loginso the WP admin bar is always visible.Other Changes
chrome-*andframe-*CSS custom properties with light/dark mode, mapped to Tailwind classes.BrowserWindowwith General, Account, Skills, and MCP tabs (plus dev-only tabs for color reference, component library, and platform switching).Full architecture details in the companion docs checked into this branch:
NEW-UI.md— Panel layout, color system, settings window, navigationNEW-AGENT.md— Tasks, AI agent, MCP tools, data model, IPC interfaceNEW-BROWSER.md— Browser panel, auto-auth, CSP, loading statesTesting Instructions
npm install && npm startCmd+BandCmd+Shift+B+in the Tasks section to create a task — requires a Claude auth provider (wpcom token, Claude auth, or API key)