Skip to content

Commit 1235706

Browse files
pallyoungpallyoung
authored
Merge pull request #6 from spencerkit/develop
Stabilize workspace sessions and settings
2 parents 92e592f + 3563f2f commit 1235706

94 files changed

Lines changed: 14138 additions & 3340 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.stitch/DESIGN.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Design System: Coder Studio
2+
3+
## 1. Visual Theme & Atmosphere
4+
5+
Coder Studio is a dark, terminal-first engineering workbench. The mood should feel quiet, precise, and operational rather than glossy or playful. Surfaces are dense but not cramped. Interaction feedback should be crisp and restrained. New UI for history and Claude settings must feel like it belongs inside a serious developer cockpit, not a separate SaaS admin panel.
6+
7+
Keywords:
8+
9+
- dark terminal minimalist
10+
- quiet ops
11+
- high-focus productivity
12+
- low-noise, low-gloss
13+
- technical, precise, dense
14+
15+
## 2. Color Palette & Roles
16+
17+
- App Background: `#0d1418`
18+
- Elevated Background: `#121b1e`
19+
- Secondary Surface: `#141f24`
20+
- Tertiary Surface: `#1c2a31`
21+
- Overlay Surface: `rgba(20, 31, 36, 0.95)`
22+
- Glass Surface: `rgba(16, 26, 31, 0.9)`
23+
- Primary Text: `#e7f3f7`
24+
- Secondary Text: `#b4cad3`
25+
- Muted Text: `#7d98a4`
26+
- Border: `rgba(180, 216, 225, 0.12)`
27+
- Strong Border: `rgba(180, 216, 225, 0.2)`
28+
- Primary Accent: `#5ac8fa`
29+
- Primary Accent Soft: `rgba(90, 200, 250, 0.15)`
30+
- Secondary Accent: `#8fffae`
31+
- Secondary Accent Soft: `rgba(143, 255, 174, 0.18)`
32+
- Warning Accent: `#ffd37a`
33+
- Warning Soft: `rgba(255, 211, 122, 0.16)`
34+
- Danger Accent: `#ff9eb0`
35+
- Danger Soft: `rgba(255, 158, 176, 0.17)`
36+
37+
Color usage rules:
38+
39+
- Use blue accent for focus, selection, restore, active links, and current context.
40+
- Use green accent for healthy / resumed / ready states.
41+
- Use amber for archived or cautionary informational states.
42+
- Use pink-red only for destructive actions like hard delete.
43+
- Never brighten the whole panel; rely on localized accent bars, tags, and focus rings.
44+
45+
## 3. Typography Rules
46+
47+
- Primary UI Font: `"IBM Plex Sans", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", sans-serif`
48+
- Monospace: `"JetBrains Mono", "Cascadia Mono", "IBM Plex Mono", "Fira Code", monospace`
49+
50+
Scale:
51+
52+
- Micro labels: 11px
53+
- Dense controls: 12px
54+
- Default UI body: 13px
55+
- Section labels: 14px
56+
- Panel titles: 16px to 18px
57+
58+
Rules:
59+
60+
- Use compact uppercase labels sparingly for panel chrome.
61+
- Use mono only for command, path, shell, and config snippets.
62+
- Prefer high-contrast title + subdued metadata pairings.
63+
64+
## 4. Geometry & Component Stylings
65+
66+
- Overall radius: subtle and technical, mostly `4px` to `8px`
67+
- Avoid pill-heavy styling except for status chips and tiny toggles
68+
- Tabs: flat or lightly raised, integrated into panel chrome
69+
- Drawers: straight-edged container with subtle inner border and soft shadow
70+
- Cards: only when necessary; most surfaces should read as panels or list rows, not marketing cards
71+
- Inputs: dark recessed surfaces with strong focus ring
72+
- Destructive actions: outlined or ghost buttons with danger accent on hover
73+
74+
## 5. Depth & Motion
75+
76+
- Shadows should be whisper-soft, mostly diffused black shadows
77+
- Use motion only for:
78+
- left drawer reveal
79+
- state chip transitions
80+
- restore chooser tab switch
81+
- subtle row hover/focus
82+
- Avoid bouncy or playful motion
83+
- Prefer 140ms to 180ms ease-out for panel transitions
84+
85+
## 6. Layout Principles
86+
87+
- Dense workbench layout with explicit panel boundaries
88+
- Strong vertical rhythm via separators and compact spacing
89+
- Make hierarchy through alignment and text contrast, not oversized cards
90+
- History drawer should feel attached to the workbench shell, not like a modal
91+
- Claude settings should balance form density with scanability:
92+
- left nav
93+
- grouped sections
94+
- advanced JSON areas clearly separated
95+
96+
## 7. Feature-Specific Guidance
97+
98+
### History Drawer
99+
100+
- Width should feel utility-grade, not oversized
101+
- Workspace group headers should anchor scanning
102+
- Session rows should make primary action obvious:
103+
- active rows feel navigational
104+
- archived rows feel recoverable
105+
- delete remains secondary but visible
106+
- Status chips should be subtle, with accent only where meaningful
107+
108+
### Restore Chooser In Draft Pane
109+
110+
- Keep the pane-local context obvious
111+
- Two-mode switch should be clear and minimal
112+
- The restore list should feel like selecting a dormant session into this pane position
113+
- Avoid any cross-workspace ambiguity
114+
115+
### Claude Settings
116+
117+
- This is not a generic form page
118+
- It should feel like configuring a runtime
119+
- Surface inheritance and override clearly
120+
- Advanced JSON editors should feel trustworthy, technical, and integrated with the same dark system

‎.stitch/designs/2026-03-28-session-history-and-claude-settings-prompts.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Stitch Prompts: Session History And Claude Settings
2+
3+
These prompts are prepared for Stitch generation once a Stitch MCP or CLI environment is available.
4+
5+
## Screen 1: Global Session History Drawer
6+
7+
Quiet, dark terminal-first developer workbench UI for Coder Studio. Design a global session history drawer that slides in from the left edge of an existing multi-workspace coding application. This is low-frequency "undo / regret insurance" functionality, so the UI should feel compact, utility-grade, and tightly integrated with the workbench shell instead of looking like a separate product area.
8+
9+
**DESIGN SYSTEM (REQUIRED):**
10+
- Platform: Web, desktop-first, responsive down to narrow laptop widths
11+
- Theme: dark terminal minimalist, quiet ops, dense engineering cockpit
12+
- Palette: background `#0d1418`, elevated `#121b1e`, secondary surface `#141f24`, tertiary `#1c2a31`, primary text `#e7f3f7`, secondary text `#b4cad3`, muted `#7d98a4`, primary accent `#5ac8fa`, positive accent `#8fffae`, warning accent `#ffd37a`, danger accent `#ff9eb0`
13+
- Typography: IBM Plex Sans / Noto Sans SC for UI, JetBrains Mono for technical snippets
14+
- Geometry: subtle 4px to 8px radius, straight panel boundaries, restrained shadows
15+
- Motion: 160ms drawer slide-in, subtle row hover and focus states
16+
17+
**PAGE STRUCTURE:**
18+
1. **Workbench Shell Context:** show a compact top workspace tab strip across the top, with a history icon fixed at the far left of the tab row, and the left-side history drawer opened.
19+
2. **Drawer Header:** title "History", short helper text explaining that closed sessions are archived not deleted, close icon on the right.
20+
3. **Grouped Workspace History:** multiple workspace sections, each with workspace title, path summary, target badge like Native or WSL, and session count.
21+
4. **Session Rows:** each row shows title, recent activity time, subtle status chip, and different visual semantics for:
22+
- active session: click jumps and focuses
23+
- archived session: click restores
24+
- interrupted session: click retries restore
25+
5. **Row Actions:** hard delete icon button aligned right, danger on hover but not visually dominant.
26+
6. **States:** include one empty workspace group case hidden entirely, one live session row, one archived row, one interrupted row, and one focused hover state.
27+
28+
**UI DETAILS:**
29+
- Workspace groups are stacked with tight spacing and divider rhythm.
30+
- Status chips are compact and understated, not colorful pills.
31+
- Active row uses blue accent edge or focus bar.
32+
- Archived row uses amber informational tone, not warning-alert tone.
33+
- Delete button is subtle until hover.
34+
- The drawer should feel attached to the main shell with an inner border and faint shadow.
35+
36+
## Screen 2: Draft Pane Restore Chooser
37+
38+
Design a pane-local chooser for a new split inside the same Coder Studio dark workbench. The user has just created a new split pane. Instead of immediately starting a new session, the pane shows two choices: create a fresh session or restore from current workspace history. This interaction should feel lightweight, decisive, and local to the pane position.
39+
40+
**DESIGN SYSTEM (REQUIRED):**
41+
- Same design system as above
42+
- Must visually inherit the existing workbench shell
43+
- Dense, technical, low-noise
44+
45+
**PAGE STRUCTURE:**
46+
1. **Pane Frame:** show this chooser inside one split pane of a larger multi-pane agent workspace.
47+
2. **Mode Switch:** top segmented control with two tabs:
48+
- New Session
49+
- Restore From History
50+
3. **New Session Mode:** compact input area with concise placeholder, launch button, minimal empty-state guidance.
51+
4. **Restore Mode:** list only current-workspace recoverable sessions, each with title, last activity time, status chip, and short metadata hint.
52+
5. **Selection Feedback:** one row selected and ready to restore into this exact pane.
53+
6. **Primary Action Area:** restore button makes the "restore into this pane slot" meaning obvious.
54+
55+
**UI DETAILS:**
56+
- Do not show cross-workspace content anywhere.
57+
- Do not show already-mounted live sessions in the restore list.
58+
- The chooser should read as a replacement state for a draft pane, not a full-screen dialog.
59+
- Include a subtle line explaining that the restored session keeps its original identity.
60+
61+
## Screen 3: Claude Settings Center
62+
63+
Design a high-density Claude runtime settings panel for Coder Studio. This replaces a simplistic launch-command setting with a complete Claude configuration center. The screen must feel like configuring an engineering runtime, not a generic SaaS settings page.
64+
65+
**DESIGN SYSTEM (REQUIRED):**
66+
- Platform: Web, desktop-first
67+
- Same dark terminal-first design language as the rest of the product
68+
- Compact typography and sectional rhythm optimized for serious configuration work
69+
70+
**PAGE STRUCTURE:**
71+
1. **App Settings Shell:** existing settings page with left navigation. Include top-level nav items General, Claude, Appearance. Claude is selected.
72+
2. **Claude Header:** title, short explanation, runtime validation indicator, and summary of whether current target inherits global config or uses an override.
73+
3. **Target Scope Switch:** clearly show Global, Native Override, WSL Override with inheritance toggles.
74+
4. **Structured Sections:** stacked sections for:
75+
- Launch & Auth
76+
- Model & Behavior
77+
- Permissions
78+
- Sandbox
79+
- Hooks & Automation
80+
- Worktree
81+
- Plugins & MCP
82+
- Global Preferences
83+
5. **Advanced JSON Area:** two integrated editors labeled `settings.json advanced` and `~/.claude.json advanced`, dark technical editor styling, validation state visible.
84+
6. **Field Examples:** include executable path, startup args list, API key / base URL, model selector, permission mode, danger flags, sandbox toggles, plugin controls, IDE auto-connect preferences.
85+
86+
**UI DETAILS:**
87+
- Strong grouping and separators, not oversized cards.
88+
- Each section should have a compact heading and short muted explanation.
89+
- Inheritance state must be unambiguous.
90+
- Danger-related flags should be visually distinct but not alarmist.
91+
- Validation state should feel operational: neutral info, warning, error, success.
92+
- Use monospace for file paths, command arguments, and JSON labels.

0 commit comments

Comments
 (0)