diff --git a/.gsd/milestones/M001-1ya5a3/slices/S01/S01-PLAN.md b/.gsd/milestones/M001-1ya5a3/slices/S01/S01-PLAN.md new file mode 100644 index 000000000..9e8048d9b --- /dev/null +++ b/.gsd/milestones/M001-1ya5a3/slices/S01/S01-PLAN.md @@ -0,0 +1,92 @@ +# S01: Electron Shell + Design System Foundation + +**Goal:** Deliver a working Electron desktop app with the full design system (dark monochrome + warm amber), three-column resizable layout, custom title bar, and core UI primitives — the foundation every subsequent slice builds on. +**Demo:** `npm run dev -w studio` opens a native macOS window with three resizable columns (sidebar, center, right panel), amber-accented drag handles, Inter + JetBrains Mono typography, Phosphor icons, and styled placeholder content in each panel. Dragging handles resizes panels. The app looks premium — not a prototype. + +## Must-Haves + +- Electron window launches via `npm run dev -w studio` with HMR +- Tailwind v4 CSS-first `@theme` block defines the full color palette, typography scale, and spacing system +- Inter (UI) and JetBrains Mono (code) fonts bundled locally as woff2 assets +- Three-column layout via `react-resizable-panels` with draggable dividers +- Custom panel handles with amber accent on hover/drag +- macOS title bar with `titleBarStyle: 'hiddenInset'` and proper traffic light offset +- Core UI primitives: Button, Text, Icon (Phosphor wrapper) +- Preload script with `contextBridge` stubs for IPC channels (wired in S02) +- TypeScript design tokens file mirroring CSS custom properties +- `npm run build -w studio` produces a working production build +- No Lucide icons, no purple, no shadcn aesthetic, no generic fonts + +## Proof Level + +- This slice proves: contract (the design system and layout shell that all subsequent slices consume) +- Real runtime required: yes (Electron must launch and render) +- Human/UAT required: yes (visual quality assessment — does it feel premium?) + +## Verification + +- `cd studio && npm run build` succeeds with exit code 0 (production build works) +- `npm run dev -w studio` launches an Electron window (manual verification) +- Three columns visible with drag handles; resizing works +- Panel handles show amber (`#d4a04e`) on hover +- Inter font renders in UI text, JetBrains Mono in code-styled elements +- Phosphor icons render at correct size/weight +- Title bar has macOS traffic light buttons with no content overlap +- All placeholder panels show styled content with correct dark theme colors +- HMR works — editing a React component hot-reloads without restart + +## Observability / Diagnostics + +- Runtime signals: Electron main process logs to stdout (app ready, window created, preload loaded) +- Inspection surfaces: `npm run dev -w studio` console output, Electron DevTools in renderer +- Failure visibility: Build errors surface in terminal; renderer errors in DevTools console +- Redaction constraints: none + +## Integration Closure + +- Upstream surfaces consumed: none (first slice) +- New wiring introduced: `studio/` workspace added to root `package.json`, electron-vite build pipeline, contextBridge IPC stubs +- What remains before milestone is truly usable end-to-end: S02 (RPC connection), S03 (message rendering), S04 (tool cards), S05 (prompts), S06 (file tree + editor), S07 (preview + final integration) + +## Tasks + +- [ ] **T01: Scaffold Electron project with electron-vite, React, Tailwind v4, and design system tokens** `est:1h` + - Why: Everything else depends on the build pipeline working. This task gets `npm run dev -w studio` opening an Electron window with styled content — proving the full toolchain (electron-vite, React 19, Tailwind v4, font loading) works end-to-end. + - Files: `studio/package.json`, `studio/electron.vite.config.ts`, `studio/tsconfig.json`, `studio/tsconfig.node.json`, `studio/tsconfig.web.json`, `studio/src/main/index.ts`, `studio/src/preload/index.ts`, `studio/src/preload/index.d.ts`, `studio/src/renderer/index.html`, `studio/src/renderer/src/main.tsx`, `studio/src/renderer/src/App.tsx`, `studio/src/renderer/src/styles/index.css`, `studio/src/renderer/src/lib/theme/tokens.ts`, `studio/src/renderer/src/assets/fonts/` (Inter + JetBrains Mono woff2), `package.json` (root — add studio to workspaces) + - Do: Create `studio/` directory structure following electron-vite conventions (`src/main/`, `src/preload/`, `src/renderer/`). Set up `electron.vite.config.ts` with three build sections — renderer section gets `@tailwindcss/vite` and `@vitejs/plugin-react`. Define the full design system in `index.css` `@theme` block (all colors, typography, spacing from the research spec). Bundle Inter and JetBrains Mono as local woff2 with `@font-face` declarations (`font-display: block`). Create `contextBridge` preload with typed IPC channel stubs. Create minimal `App.tsx` that renders styled test content proving the theme works. Create `tokens.ts` mirroring CSS custom properties for programmatic access. Add `"studio"` to root `package.json` workspaces. Run `npm install` from root. **Skills to load:** `frontend-design` for design system quality. + - Verify: `npm run dev -w studio` opens an Electron window showing styled content with correct fonts and dark theme. `npm run build -w studio` exits 0. + - Done when: Electron window opens with Inter font in UI text, JetBrains Mono in a code element, dark background (`#0a0a0a`), amber accent color visible, and production build succeeds. + +- [ ] **T02: Three-column resizable layout, custom title bar, and UI primitives with placeholder content** `est:45m` + - Why: Delivers the spatial layout, interaction design (resizable panels with amber handles), title bar, and the reusable UI primitives (Button, Text, Icon) that every subsequent slice imports. Placeholder content in each panel proves the design system is cohesive. + - Files: `studio/src/renderer/src/App.tsx` (update), `studio/src/renderer/src/components/layout/AppLayout.tsx`, `studio/src/renderer/src/components/layout/Sidebar.tsx`, `studio/src/renderer/src/components/layout/CenterPanel.tsx`, `studio/src/renderer/src/components/layout/RightPanel.tsx`, `studio/src/renderer/src/components/layout/PanelHandle.tsx`, `studio/src/renderer/src/components/layout/TitleBar.tsx`, `studio/src/renderer/src/components/ui/Button.tsx`, `studio/src/renderer/src/components/ui/Text.tsx`, `studio/src/renderer/src/components/ui/Icon.tsx`, `studio/src/renderer/src/styles/index.css` (update if needed) + - Do: Install `react-resizable-panels`. Build `AppLayout.tsx` with `PanelGroup`/`Panel`/`PanelResizeHandle` in a three-column layout (sidebar ~20%, center ~50%, right ~30%). Create `PanelHandle.tsx` — a thin vertical bar that shows amber accent on hover/active with a subtle grip indicator. Create `TitleBar.tsx` with `titleBarStyle: 'hiddenInset'` offset (68px padding-left for traffic lights), `-webkit-app-region: drag` for the title area, app name "GSD Studio" in amber. Build `Sidebar.tsx`, `CenterPanel.tsx`, `RightPanel.tsx` with placeholder content that demonstrates the design system — use typography hierarchy, icon samples, color palette preview. Create `Button.tsx` (primary/secondary/ghost variants using Tailwind, Radix Slot pattern for polymorphism), `Text.tsx` (heading/body/label/code presets mapping to the type scale), `Icon.tsx` (thin Phosphor wrapper with `IconContext` provider setting default size/weight/color). Wire everything into `App.tsx`. Ensure panels have min-width constraints and the center panel cannot be collapsed. **Skills to load:** `frontend-design` for component quality, `make-interfaces-feel-better` for polish details. **Note on react-resizable-panels v4+ API:** The library exports `PanelGroup`, `Panel`, `PanelResizeHandle` — the research mentions `Group`/`Panel`/`Separator` names but verify against actual imports. + - Verify: `npm run dev -w studio` shows three-column layout. Dragging handles resizes panels. Handles show amber on hover. Title bar has traffic light offset. Button, Text, Icon components render correctly in placeholder content. `npm run build -w studio` still exits 0. + - Done when: App shows three resizable columns with amber-accented drag handles, macOS title bar with traffic lights, placeholder content using all three UI primitives (Button, Text, Icon), Inter and JetBrains Mono visible in appropriate contexts, and the overall aesthetic reads as premium dark-theme design — not a prototype. + +## Files Likely Touched + +- `package.json` (root — workspaces update) +- `studio/package.json` +- `studio/electron.vite.config.ts` +- `studio/tsconfig.json` +- `studio/tsconfig.node.json` +- `studio/tsconfig.web.json` +- `studio/src/main/index.ts` +- `studio/src/preload/index.ts` +- `studio/src/preload/index.d.ts` +- `studio/src/renderer/index.html` +- `studio/src/renderer/src/main.tsx` +- `studio/src/renderer/src/App.tsx` +- `studio/src/renderer/src/styles/index.css` +- `studio/src/renderer/src/lib/theme/tokens.ts` +- `studio/src/renderer/src/assets/fonts/*.woff2` +- `studio/src/renderer/src/components/layout/AppLayout.tsx` +- `studio/src/renderer/src/components/layout/Sidebar.tsx` +- `studio/src/renderer/src/components/layout/CenterPanel.tsx` +- `studio/src/renderer/src/components/layout/RightPanel.tsx` +- `studio/src/renderer/src/components/layout/PanelHandle.tsx` +- `studio/src/renderer/src/components/layout/TitleBar.tsx` +- `studio/src/renderer/src/components/ui/Button.tsx` +- `studio/src/renderer/src/components/ui/Text.tsx` +- `studio/src/renderer/src/components/ui/Icon.tsx` diff --git a/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T01-PLAN.md b/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T01-PLAN.md new file mode 100644 index 000000000..aeae15963 --- /dev/null +++ b/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T01-PLAN.md @@ -0,0 +1,94 @@ +--- +estimated_steps: 8 +estimated_files: 15 +--- + +# T01: Scaffold Electron project with electron-vite, React, Tailwind v4, and design system tokens + +**Slice:** S01 — Electron Shell + Design System Foundation +**Milestone:** M001-1ya5a3 + +## Description + +Bootstrap the `studio/` Electron app from scratch using electron-vite v5, React 19, TypeScript, and Tailwind v4. This task establishes the entire build pipeline and design system — colors, typography, spacing — as CSS custom properties in a Tailwind v4 `@theme` block. Fonts (Inter + JetBrains Mono) are bundled locally. The preload script exposes typed IPC channel stubs via `contextBridge` for S02 to wire up. By the end, `npm run dev -w studio` opens a dark-themed Electron window with correct fonts and styled content. + +**Skill to load:** `~/.gsd/agent/skills/frontend-design/SKILL.md` — for design system quality and avoiding generic aesthetics. + +## Steps + +1. **Add `"studio"` to root workspace config.** Edit the root `package.json` — change `"workspaces": ["packages/*"]` to `"workspaces": ["packages/*", "studio"]`. + +2. **Create `studio/package.json`.** Name: `@gsd/studio`, private: true. Dependencies: `react` (^19), `react-dom` (^19), `@phosphor-icons/react` (^2.1), `react-resizable-panels` (^2.1), `zustand` (^5). DevDependencies: `electron` (^35), `electron-vite` (^3), `@vitejs/plugin-react` (^4), `@tailwindcss/vite` (^4), `tailwindcss` (^4), `typescript` (^5.4), `@types/react` (^19), `@types/react-dom` (^19), `@types/node` (^22). Scripts: `dev: "electron-vite dev"`, `build: "electron-vite build"`, `preview: "electron-vite preview"`. **Important:** Check the actual latest versions of `electron-vite` on npm — it may be v2 or v3, not v5 as research suggested. The research version numbers need verification at install time. Same for `react-resizable-panels` — the research says v4.7 but the actual latest may differ. Use `^` ranges and let npm resolve. + +3. **Create TypeScript configs.** Three files following electron-vite convention: + - `studio/tsconfig.json` — references `tsconfig.node.json` and `tsconfig.web.json` + - `studio/tsconfig.node.json` — for main + preload (Node target, ESM) + - `studio/tsconfig.web.json` — for renderer (DOM lib, JSX react-jsx, path aliases) + +4. **Create `studio/electron.vite.config.ts`.** Three build sections: + - `main`: entry `src/main/index.ts` + - `preload`: entry `src/preload/index.ts` + - `renderer`: entry `src/renderer/index.html`, plugins: `@tailwindcss/vite`, `@vitejs/plugin-react`. **Critical:** The Tailwind plugin must be in the renderer section only, not top-level. + +5. **Create Electron main process (`studio/src/main/index.ts`).** `app.whenReady()` → create `BrowserWindow` with: `width: 1400, height: 900`, `titleBarStyle: 'hiddenInset'` (macOS), `trafficLightPosition: { x: 16, y: 16 }`, `backgroundColor: '#0a0a0a'`, `webPreferences: { preload, contextIsolation: true, nodeIntegration: false }`. Load the renderer URL (electron-vite provides the env variable for dev vs production). Log `"GSD Studio ready"` to stdout on window creation. Handle `window-all-closed` to quit on non-macOS, `activate` to recreate window on macOS. + +6. **Create preload script (`studio/src/preload/index.ts`) and type declaration (`studio/src/preload/index.d.ts`).** Use `contextBridge.exposeInMainWorld('studio', { ... })` with stubs: `onEvent(callback)` → no-op, `sendCommand(command, args)` → no-op, `spawn()` → no-op, `getStatus()` → `Promise.resolve({ connected: false })`. The type declaration file (`index.d.ts`) should declare the `window.studio` interface so the renderer can use it with type safety. These stubs get real implementations in S02. + +7. **Create renderer entry files.** `studio/src/renderer/index.html` — minimal HTML with `
`, charset meta, viewport meta, and `` for font woff2 files. `studio/src/renderer/src/main.tsx` — `createRoot(document.getElementById('root')).render()`, imports `./styles/index.css`. + +8. **Build the design system CSS (`studio/src/renderer/src/styles/index.css`).** Structure: + - `@import "tailwindcss";` + - `@font-face` declarations for Inter (regular 400, medium 500, semibold 600) and JetBrains Mono (regular 400, medium 500) — relative paths to `../assets/fonts/`, `font-display: block`. + - `@theme { }` block defining all CSS custom properties: + - Colors: `--color-bg-primary: #0a0a0a`, `--color-bg-secondary: #111111`, `--color-bg-tertiary: #1a1a1a`, `--color-bg-hover: #222222`, `--color-border: #262626`, `--color-border-active: #333333`, `--color-text-primary: #e5e5e5`, `--color-text-secondary: #a3a3a3`, `--color-text-tertiary: #737373`, `--color-accent: #d4a04e`, `--color-accent-hover: #e0b366`, `--color-accent-muted: rgba(212, 160, 78, 0.15)` + - Fonts: `--font-sans: 'Inter', system-ui, sans-serif`, `--font-mono: 'JetBrains Mono', ui-monospace, monospace` + - Base styles on `body`: `bg-primary` background, `text-primary` color, `font-sans`, antialiased rendering (`-webkit-font-smoothing: antialiased`). + - Scrollbar styles: thin, dark track, subtle thumb. + +9. **Bundle font files.** Download Inter (woff2: regular, medium, semibold) and JetBrains Mono (woff2: regular, medium) into `studio/src/renderer/src/assets/fonts/`. Use specific weights, not variable fonts, for consistent rendering. Source from Google Fonts CDN or the project's GitHub releases — download at scaffold time, commit the files. + +10. **Create `studio/src/renderer/src/lib/theme/tokens.ts`.** TypeScript constants mirroring the CSS custom properties — `colors`, `fonts`, `fontSizes` objects. These are used programmatically by Monaco theme (S06) and Shiki theme (S03). Export as named exports. + +11. **Create `studio/src/renderer/src/App.tsx`.** A simple component that renders test content proving the theme works: a heading in Inter, a code block in JetBrains Mono, the amber accent color, and some text at different hierarchy levels. This gets replaced with the full layout in T02. + +12. **Run `npm install` from the repo root.** Verify the workspace resolves. Then `npm run dev -w studio` to confirm the Electron window opens. Then `npm run build -w studio` to confirm production build succeeds. + +## Must-Haves + +- [ ] `studio/` added to root workspaces, `npm install` succeeds +- [ ] `electron.vite.config.ts` has three build sections with Tailwind in renderer only +- [ ] `@theme` block defines all 12+ color tokens, font families, and type scale +- [ ] Inter and JetBrains Mono woff2 files bundled locally (not CDN) +- [ ] `@font-face` declarations use `font-display: block` to prevent FOUT +- [ ] Preload exposes `window.studio` with typed IPC stubs via contextBridge +- [ ] `npm run dev -w studio` opens an Electron window with styled dark-theme content +- [ ] `npm run build -w studio` exits 0 +- [ ] Main process logs "GSD Studio ready" to stdout + +## Verification + +- `cd studio && npm run build` exits with code 0 +- `npm run dev -w studio` opens a window — visually confirm dark background, Inter font, JetBrains Mono in code, amber accent visible +- No console errors in Electron DevTools +- Font files exist in `studio/src/renderer/src/assets/fonts/` (at least 5 woff2 files) + +## Inputs + +- Root `package.json` — need to add `"studio"` to workspaces array +- Research spec in `S01-RESEARCH.md` — color palette, typography, directory structure, electron-vite config shape (already inlined in this plan) +- Decisions D001 (Electron), D004 (Radix + Tailwind), D005 (Phosphor), D006 (Inter + JetBrains Mono), D007 (dark monochrome + amber) + +## Expected Output + +- `studio/package.json` — workspace package with all dependencies +- `studio/electron.vite.config.ts` — three-section build config +- `studio/tsconfig.json`, `studio/tsconfig.node.json`, `studio/tsconfig.web.json` — TypeScript configs +- `studio/src/main/index.ts` — Electron main process with BrowserWindow +- `studio/src/preload/index.ts` — contextBridge with typed IPC stubs +- `studio/src/preload/index.d.ts` — TypeScript declarations for window.studio +- `studio/src/renderer/index.html` — HTML entry with font preload links +- `studio/src/renderer/src/main.tsx` — React root render +- `studio/src/renderer/src/App.tsx` — Test component proving theme works +- `studio/src/renderer/src/styles/index.css` — Full design system CSS with @theme block +- `studio/src/renderer/src/lib/theme/tokens.ts` — TypeScript design tokens +- `studio/src/renderer/src/assets/fonts/*.woff2` — Bundled font files diff --git a/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T02-PLAN.md b/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T02-PLAN.md new file mode 100644 index 000000000..84c004bac --- /dev/null +++ b/.gsd/milestones/M001-1ya5a3/slices/S01/tasks/T02-PLAN.md @@ -0,0 +1,100 @@ +--- +estimated_steps: 7 +estimated_files: 11 +--- + +# T02: Three-column resizable layout, custom title bar, and UI primitives with placeholder content + +**Slice:** S01 — Electron Shell + Design System Foundation +**Milestone:** M001-1ya5a3 + +## Description + +Build the three-column resizable layout using `react-resizable-panels`, a custom macOS title bar, and the core UI primitives (Button, Text, Icon) that every subsequent slice imports. Each panel gets styled placeholder content that demonstrates the design system is cohesive — typography hierarchy, icon rendering, button variants, and the amber accent throughout. By the end, the app looks like a premium desktop tool, not a scaffolding demo. + +**Skills to load:** +- `~/.gsd/agent/skills/frontend-design/SKILL.md` — for component design quality +- `~/.gsd/agent/skills/make-interfaces-feel-better/SKILL.md` — for polish: transitions, hover states, spacing, shadows + +## Steps + +1. **Verify T01 output.** Run `npm run dev -w studio` to confirm the Electron window opens with the design system working. Check that fonts load, colors render, and there are no console errors. If anything is broken from T01, fix it before proceeding. + +2. **Check `react-resizable-panels` API.** The research mentions both `Group/Panel/Separator` and `PanelGroup/Panel/PanelResizeHandle` as possible export names. Before building, verify the actual exports: `import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'` — check the installed version's types. Use whatever the library actually exports. Key API features needed: `direction="horizontal"`, `defaultSize` (percentage), `minSize`, `collapsible`, `onLayout` for potential persistence. + +3. **Create `TitleBar.tsx` (`studio/src/renderer/src/components/layout/TitleBar.tsx`).** A horizontal bar at the top of the app window. Must account for macOS traffic lights — `paddingLeft: 78px` (traffic light area + breathing room). The title area uses `-webkit-app-region: drag` so the window is draggable by the title bar. Display "GSD Studio" in the accent color (`--color-accent`), small text, semibold. The bar itself: `--color-bg-secondary` background, `--color-border` bottom border, ~38px height. Include a subtle right-side area for future session controls (just a placeholder div for now). + +4. **Create `PanelHandle.tsx` (`studio/src/renderer/src/components/layout/PanelHandle.tsx`).** A custom drag handle for the panel resize separator. Default state: a thin (1px) vertical line in `--color-border`. Hover state: the line becomes 2px, color transitions to `--color-accent` with a short `transition-colors` (150ms). Active/dragging state: stays amber. Include a small grip indicator (3 dots vertically centered) that appears on hover. The handle should be a reasonable hit target (8-12px wide padding) even though the visual line is thin. + +5. **Create `AppLayout.tsx` (`studio/src/renderer/src/components/layout/AppLayout.tsx`).** The root layout component combining `TitleBar` + `PanelGroup`. Structure: + - `TitleBar` at top (fixed height) + - Below: horizontal `PanelGroup` with three panels: + - Left sidebar: `defaultSize={20}`, `minSize={15}`, `collapsible={true}` + - Center panel: `defaultSize={50}`, `minSize={30}` (NOT collapsible — it's always visible) + - Right panel: `defaultSize={30}`, `minSize={20}`, `collapsible={true}` + - Two `PanelHandle` separators between panels + - `autoSaveId="gsd-studio-layout"` on the PanelGroup for localStorage persistence of panel sizes. + The outer container fills the full viewport height (`h-screen`), uses `flex flex-col`. + +6. **Create panel placeholder components.** Three files: + - `Sidebar.tsx`: Header "Files" with a folder Phosphor icon, a mock file tree (just styled list items with file/folder icons, indentation, hover states). Shows the design system's secondary text, hover backgrounds, icon usage. + - `CenterPanel.tsx`: Header "Conversation", a mock message area with sample text showing the typography hierarchy — an h2 heading, body text, inline code in JetBrains Mono, a code block with dark background, and a sample "tool card" placeholder (just a bordered card with an icon, title, and muted description). Include an input bar at the bottom — a text input with amber-accented focus ring and a send button. + - `RightPanel.tsx`: Header "Editor", a mock editor area with line numbers (in `--color-text-tertiary`) and code text in JetBrains Mono. Just hardcoded sample code — this gets replaced with Monaco in S06. + Each placeholder should look like a real UI, not a "Coming Soon" stub. Use the design system colors, fonts, and spacing throughout. + +7. **Create UI primitives.** Three reusable components: + - `Button.tsx` (`studio/src/renderer/src/components/ui/Button.tsx`): Variants — `primary` (amber bg, dark text), `secondary` (border-only, text-secondary), `ghost` (no border, text-secondary, hover bg). Sizes — `sm`, `md`, `lg`. Use `React.forwardRef` and accept all native button props via `React.ComponentPropsWithRef<'button'>`. Implement a Radix-style `asChild` prop using `Slot` from `@radix-ui/react-slot` for polymorphism (render as link, etc). Transitions on hover/active. Disabled state with reduced opacity. + - `Text.tsx` (`studio/src/renderer/src/components/ui/Text.tsx`): Presets — `heading` (20px, semibold, text-primary), `subheading` (14px, medium, text-primary), `body` (14px, regular, text-secondary), `label` (12px, medium, text-tertiary), `code` (13px, JetBrains Mono, text-primary). Renders as `

` by default, accepts `as` prop for semantic element override. Uses the type scale from the design system. + - `Icon.tsx` (`studio/src/renderer/src/components/ui/Icon.tsx`): Wraps `@phosphor-icons/react`'s `IconContext.Provider` at the app level (or exports a configured provider). Default context: `size={18}`, `weight="regular"`, `color="currentColor"`. The component itself is just a convenience re-export pattern — individual icons are imported directly from `@phosphor-icons/react` by consumers, but the context sets defaults. + +8. **Wire everything into `App.tsx`.** Replace the T01 test content with: `` wrapping `` which contains `` + panels with ``, ``, ``. Import the layout and all primitives. + +9. **Final polish pass.** Check spacing, alignment, color consistency. Ensure no Tailwind class conflicts. Verify the amber accent is used sparingly — only for interactive elements (handles, focus rings, primary buttons, app title). The rest should be monochrome grays. Add `@radix-ui/react-slot` to studio dependencies if not already present. + +## Must-Haves + +- [ ] Three-column layout with resizable panels via react-resizable-panels +- [ ] Panel sizes persist to localStorage via `autoSaveId` +- [ ] Custom drag handles transition to amber on hover (150ms transition) +- [ ] Title bar with macOS traffic light offset and draggable region +- [ ] Sidebar panel is collapsible; center panel is not +- [ ] Button component with primary/secondary/ghost variants and asChild support +- [ ] Text component with heading/subheading/body/label/code presets +- [ ] Icon context provider with default size/weight for Phosphor icons +- [ ] Placeholder content in all three panels demonstrates the design system +- [ ] No Lucide icons, no purple accents, no generic component-kit aesthetics +- [ ] `npm run build -w studio` still exits 0 after all changes + +## Verification + +- `npm run build -w studio` exits 0 +- `npm run dev -w studio` opens app with three visible columns +- Drag handles resize panels; amber highlight appears on hover +- Title bar shows "GSD Studio" in amber with traffic lights to the left +- Sidebar shows mock file tree with Phosphor icons +- Center panel shows typography hierarchy (heading, body, code) and input bar with amber focus +- Right panel shows mock editor with line numbers in JetBrains Mono +- Resizing the window does not break layout — panels flex proportionally +- Collapsing the sidebar (double-click handle or drag to minimum) hides it; center expands + +## Inputs + +- T01 output: working Electron app with design system CSS, fonts, tokens.ts +- `studio/src/renderer/src/App.tsx` — replace test content with layout +- `studio/src/renderer/src/styles/index.css` — may need minor additions for scrollbar styles, selection colors +- `react-resizable-panels` — already in T01 dependencies +- `@radix-ui/react-slot` — may need to be added to dependencies +- `@phosphor-icons/react` — already in T01 dependencies + +## Expected Output + +- `studio/src/renderer/src/components/layout/AppLayout.tsx` — three-column resizable layout +- `studio/src/renderer/src/components/layout/TitleBar.tsx` — macOS-aware title bar +- `studio/src/renderer/src/components/layout/PanelHandle.tsx` — amber-accented drag handle +- `studio/src/renderer/src/components/layout/Sidebar.tsx` — file tree placeholder +- `studio/src/renderer/src/components/layout/CenterPanel.tsx` — conversation placeholder +- `studio/src/renderer/src/components/layout/RightPanel.tsx` — editor placeholder +- `studio/src/renderer/src/components/ui/Button.tsx` — variant button primitive +- `studio/src/renderer/src/components/ui/Text.tsx` — typography primitive +- `studio/src/renderer/src/components/ui/Icon.tsx` — Phosphor icon context provider +- `studio/src/renderer/src/App.tsx` — updated with full layout composition