Add Studio: agent-rendered artifacts and design canvases

CLAUDE.md

@@ -296,13 +296,17 @@ Read **`Measurements.md`** before editing anything named `Measurement*`, the `Si
 
 ### Artifact Panel
 
-Artifacts an agent published to claude.ai during a session (`/design` canvases, reports, mockups) open in a dedicated side panel. Detection is passive and read-only, on the same rails as localhost web preview: `SessionJSONLParser` files an artifact from the `Artifact` tool's publish result (which carries the title and source path), from the `frame-link` entry Claude Code writes alongside it, or from a bare artifact URL in the transcript — into `SessionMonitorState.detectedArtifacts`. An **Artifact** button appears in the card header only once one has been detected, and toggles `SidePanelContent.artifact` open/closed.
+Artifacts an agent published to claude.ai during a session (`/design` canvases, reports, mockups) open in a dedicated side panel. Detection is passive and read-only, on the same rails as localhost web preview: `SessionJSONLParser` files an artifact from the `Artifact` tool's publish result (which carries the title and source path), from the `frame-link` entry Claude Code writes alongside it, or from a bare artifact URL in the transcript — into `SessionMonitorState.detectedArtifacts`. An **Artifact** button appears in the card header only once one has been detected, and toggles `SidePanelContent.claudeArtifact` open/closed (renamed from `.artifact` so it is never confused with the Studio panel below).
 
 - **Claude only.** `CodexSessionJSONLParser` never files artifacts, and the card gates the button on `providerKind == .claude`.
 - Artifacts are keyed by the id in the URL, so a republish updates the existing entry and bumps `revision` — which is what makes an open panel reload — instead of appending a duplicate. The canonical URL drops query/fragment (`?via=auto_preview` is provenance, not identity).
 - `ArtifactWebView` uses the **default (persistent)** website data store: artifact pages are private to the signed-in account, so the sign-in has to survive a panel close and a relaunch. Links leaving claude.ai open in the user's browser. A signed-out load lands on Anthropic's sign-in page (`ClaudeArtifactURLDetector.isSignInURL`); the panel banners it as Anthropic's, not AgentHub's, and tells the user to sign in **in the panel**. A browser session is a different cookie jar and never carries over, so that banner must not offer an open-in-browser escape.
 - Detection changes belong in `ClaudeArtifactURLDetector` and need unit tests.
 
+### Studio Panel
+
+Artifacts and design canvases an agent renders during a session (`agenthub_artifact` for one HTML document, `agenthub_design` for N variants of one component on an infinite canvas) open in a dedicated **Studio** side panel, served from AgentHub's own in-process loopback server and annotated with the Canvas inspector overlay. Works for Claude and Codex. Read **`AgentHubStudio.md`** before editing anything named `Studio*`, the `SidePanelContent.studio` case, the three `agenthub_artifact` / `agenthub_design` / `agenthub_list_artifacts` tools, or the `studio_artifacts` table. The short version: the agent renders into a scratch surface, never into the project — Send re-files by id and forbids project edits; Promote… is the only action that asks for code; every variant's CSS is scoped at the tool boundary (`StudioCSSScoper` in `AgentHubCLIKit`), artboards are DOM sections, never iframes, because the inspector bridge is main-frame-only, Tweaks are one shared `props` schema per canvas (CSS custom properties on every artboard), never per variant, and agents are steered to the tools by `StudioAgentGuidance` (system prompt, default-on) plus the bundled `agenthub-studio` skill.
+
 ### Command Palette
 
 `CommandPaletteView` — Cmd+K for quick session/repository/action access.

README.md

@@ -113,6 +113,20 @@ Data sources are whatever the agent can already reach — local files, a CLI, or
 
 See **[`Measurements.md`](Measurements.md)** for the architecture, data flow, key files, invariants, and remaining work.
 
+## Studio
+
+Agents can render things that do not exist in the codebase yet — a report, a mockup, a diagram, or several variants of one component — with the bundled `agenthub_artifact` and `agenthub_design` tools. AgentHub materializes what they send into its own directory, serves it on `127.0.0.1`, and shows it in a dedicated **Studio** side panel that appears on the session card once the project has at least one. Works for Claude and Codex alike.
+
+- **`agenthub_artifact`** renders one self-contained HTML document, verbatim.
+- **`agenthub_design`** lays out N variants of one component side by side on an infinite pan/zoom canvas. Each variant's CSS is scoped to its own artboard (`body`, `:root` variables, `@media`, `@keyframes` all work per variant), so "show me four versions of this button" is a comparison, not a mess. Scripts are stripped; CSS that cannot be scoped is rejected at the tool boundary with a location.
+- **Point, comment, send.** The Canvas inspector overlay lets you click any element, describe a change, and send it to the agent — stamped with the variant it landed on. The prompt asks the agent to re-file with the same id (the panel updates in place) and forbids editing project files.
+- **Tweaks, shared across the canvas.** `agenthub_design` can declare a `props` schema (sliders, colors, selects, toggles, text) that every variant reads as `var(--name)`; the Tweaks panel moves all variants at once, so the same knob is compared across designs. Save defaults writes them back into the canvas; Ideas / Custom go to the agent as re-file requests. Documents get the same panel by calling `dc_set_props`.
+- **Promote…** is the one deliberate step from scratch surface to code: it asks the agent to implement a chosen variant in the real component, sending the original markup and CSS, never the scoped rewrite.
+- **Scoped to the project, not the session**, like measurements — a canvas outlives the conversation that produced it; worktrees roll up to their parent repo. `agenthub_list_artifacts` lets a session refine what is already on screen instead of filing near-duplicates.
+- **Never touches the repo.** Everything lives in Application Support (Settings › Studio shows per-project size and deletes); Export writes an HTML file wherever you choose.
+
+See **[`AgentHubStudio.md`](AgentHubStudio.md)** for the architecture, invariants, and remaining work.
+
 ## Storybook
 
 When AgentHub detects a Storybook configuration in a project, the regular **Preview** button on each session card is replaced by a dedicated **Storybook** button. Clicking it spawns the Storybook dev server (via `npm run storybook`) and opens the web preview pane pinned to the Storybook URL — independently of any other dev server the agent has running.