Commit e447de7
feat(ux): complete UX overhaul — design system, onboarding, web polish
Phase 1 — Design System Foundation:
- Unify CLI accent from cyan to emerald green (#34d399) with truecolor detection
- Rename bold_cyan() → bold_accent(), add hint() for dim italic tips
- Web: add typography scale (--text-xs to --text-3xl), replace 200+ hardcoded font-sizes
- Web: spacing audit replacing hardcoded values with --space-* tokens
- Web: motion system (easing/duration tokens) + prefers-reduced-motion support
- Web: prefers-contrast: more media query for accessibility
Phase 2 — First Impressions:
- Boot screen progressive disclosure (3-4 lines vs 10, hint to ironclaw status)
- Onboarding: auto-detect API keys (Anthropic/OpenAI/OpenRouter), skip interactive steps
- Onboarding: minimal wordmark banner replacing ASCII art
- Onboarding: dot-based step indicator (● ◉ ○) replacing progress bar
- Onboarding: provider smart ordering (detected keys first with checkmarks)
- Onboarding: warm completion card with key facts
- Onboarding: --step flag for selective re-onboarding (deprecates --channels-only/--provider-only)
Phase 3 — Web Chat & Interactions:
- Welcome card with i18n suggestion chips
- Code block syntax highlighting via highlight.js CDN
- Turn cost SSE handler with token/cost badge
- Streaming: reduced debounce 150ms→50ms, 10K force-flush safeguard
- Connection indicator: amber disconnect, reconnection attempt counter
- Skeleton loading states for threads/history
- Tool card progress bar animation, icon pop on complete
- Streaming cursor pulse, typing indicator dots
- Refined approval card styling with keyboard hints
- Thread sidebar: preview lines, active accent border
- Input area: footer row, char count, send button glow
- User messages: right-aligned chat bubbles with accent tint
Phase 4 — Polish & Accessibility:
- Doctor: grouped output (Core/Features/External sections)
- REPL: redesigned /help with quick start + categorized commands
- Web: aria-live on chat messages and toasts, aria-label on icon buttons
- Web: focus-visible styles, touch targets, safe area padding
- Web: mobile optimization (375px breakpoint, iOS zoom prevention)
- i18n: new keys in en.js and zh-CN.js for welcome card, connection, messages
Bug fixes during review:
- Fix duplicate event listeners causing language switch and sidebar toggle to no-op
- Fix sidebar collapse hiding toggle button (keep + and « visible when collapsed)
- Restore message copy button that was accidentally removed
[skip-regression-check]
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>1 parent 1490841 commit e447de7
13 files changed
Lines changed: 1424 additions & 582 deletions
File tree
- src
- channels
- web/static
- i18n
- cli
- setup
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
4 | | - | |
5 | | - | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
6 | 7 | | |
7 | 8 | | |
8 | 9 | | |
| |||
38 | 39 | | |
39 | 40 | | |
40 | 41 | | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
41 | 46 | | |
42 | 47 | | |
43 | 48 | | |
44 | 49 | | |
45 | 50 | | |
46 | 51 | | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
47 | 55 | | |
48 | 56 | | |
49 | 57 | | |
| |||
53 | 61 | | |
54 | 62 | | |
55 | 63 | | |
56 | | - | |
| 64 | + | |
57 | 65 | | |
58 | 66 | | |
59 | 67 | | |
| |||
80 | 88 | | |
81 | 89 | | |
82 | 90 | | |
83 | | - | |
84 | | - | |
85 | | - | |
86 | | - | |
87 | | - | |
88 | | - | |
89 | | - | |
90 | | - | |
91 | | - | |
92 | | - | |
93 | | - | |
94 | | - | |
95 | | - | |
96 | | - | |
97 | | - | |
98 | | - | |
99 | | - | |
100 | | - | |
101 | | - | |
102 | | - | |
103 | | - | |
104 | | - | |
105 | | - | |
106 | | - | |
107 | | - | |
108 | | - | |
109 | | - | |
110 | | - | |
111 | | - | |
112 | | - | |
113 | | - | |
114 | | - | |
115 | | - | |
116 | | - | |
117 | | - | |
118 | | - | |
119 | | - | |
120 | | - | |
121 | | - | |
122 | | - | |
123 | | - | |
124 | | - | |
125 | | - | |
126 | | - | |
127 | | - | |
128 | | - | |
129 | | - | |
130 | | - | |
131 | | - | |
132 | | - | |
133 | | - | |
134 | | - | |
135 | | - | |
136 | | - | |
137 | | - | |
138 | | - | |
139 | | - | |
140 | | - | |
141 | | - | |
142 | | - | |
143 | | - | |
144 | | - | |
145 | | - | |
146 | | - | |
147 | | - | |
148 | | - | |
149 | | - | |
150 | | - | |
151 | | - | |
152 | | - | |
153 | | - | |
154 | | - | |
155 | | - | |
156 | | - | |
157 | | - | |
158 | | - | |
159 | | - | |
160 | | - | |
161 | | - | |
162 | | - | |
163 | | - | |
164 | | - | |
165 | | - | |
166 | | - | |
| 91 | + | |
167 | 92 | | |
168 | | - | |
| 93 | + | |
169 | 94 | | |
170 | | - | |
171 | 95 | | |
172 | 96 | | |
173 | 97 | | |
| |||
185 | 109 | | |
186 | 110 | | |
187 | 111 | | |
188 | | - | |
| 112 | + | |
189 | 113 | | |
190 | 114 | | |
191 | 115 | | |
| |||
200 | 124 | | |
201 | 125 | | |
202 | 126 | | |
| 127 | + | |
| 128 | + | |
| 129 | + | |
| 130 | + | |
| 131 | + | |
| 132 | + | |
| 133 | + | |
| 134 | + | |
| 135 | + | |
| 136 | + | |
| 137 | + | |
| 138 | + | |
| 139 | + | |
| 140 | + | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
| 148 | + | |
203 | 149 | | |
204 | 150 | | |
205 | 151 | | |
| |||
215 | 161 | | |
216 | 162 | | |
217 | 163 | | |
| 164 | + | |
| 165 | + | |
| 166 | + | |
| 167 | + | |
| 168 | + | |
| 169 | + | |
| 170 | + | |
218 | 171 | | |
219 | 172 | | |
220 | 173 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
263 | 263 | | |
264 | 264 | | |
265 | 265 | | |
266 | | - | |
| 266 | + | |
267 | 267 | | |
268 | 268 | | |
| 269 | + | |
269 | 270 | | |
270 | 271 | | |
271 | 272 | | |
272 | 273 | | |
| 274 | + | |
| 275 | + | |
| 276 | + | |
| 277 | + | |
| 278 | + | |
| 279 | + | |
273 | 280 | | |
274 | | - | |
| 281 | + | |
275 | 282 | | |
276 | | - | |
277 | | - | |
| 283 | + | |
| 284 | + | |
278 | 285 | | |
279 | | - | |
| 286 | + | |
280 | 287 | | |
281 | | - | |
| 288 | + | |
282 | 289 | | |
283 | 290 | | |
284 | 291 | | |
| |||
360 | 367 | | |
361 | 368 | | |
362 | 369 | | |
363 | | - | |
| 370 | + | |
364 | 371 | | |
365 | 372 | | |
366 | 373 | | |
367 | | - | |
| 374 | + | |
368 | 375 | | |
369 | 376 | | |
370 | 377 | | |
| |||
0 commit comments