aboutsummaryrefslogtreecommitdiffstats
path: root/renderer
diff options
context:
space:
mode:
Diffstat (limited to 'renderer')
-rw-r--r--renderer/index.html2
-rw-r--r--renderer/src/App.tsx18
-rw-r--r--renderer/src/components/DocumentPane.tsx10
-rw-r--r--renderer/src/components/Header.tsx14
-rw-r--r--renderer/src/styles/globals.css259
5 files changed, 219 insertions, 84 deletions
diff --git a/renderer/index.html b/renderer/index.html
index 8bce8a6..027682c 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -7,7 +7,7 @@
7 content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' ws: http://localhost:5173" 7 content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' ws: http://localhost:5173"
8 /> 8 />
9 <meta name="viewport" content="width=device-width, initial-scale=1" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1" />
10 <title>minimal</title> 10 <title>Claude Flow</title>
11 </head> 11 </head>
12 <body> 12 <body>
13 <div id="root"></div> 13 <div id="root"></div>
diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 26ac252..5ca7a9b 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -8,6 +8,8 @@ import "./styles/globals.css";
8 8
9const api = window.api; 9const api = window.api;
10 10
11type Theme = "dark" | "light";
12
11export function App() { 13export function App() {
12 const [projects, setProjects] = useState<Project[]>([]); 14 const [projects, setProjects] = useState<Project[]>([]);
13 const [sessions, setSessions] = useState<Session[]>([]); 15 const [sessions, setSessions] = useState<Session[]>([]);
@@ -23,6 +25,19 @@ export function App() {
23 }); 25 });
24 const [error, setError] = useState<string | null>(null); 26 const [error, setError] = useState<string | null>(null);
25 27
28 const [theme, setTheme] = useState<Theme>(
29 () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
30 );
31
32 // Keep document.documentElement in sync and persist to localStorage
33 useEffect(() => {
34 document.documentElement.setAttribute("data-theme", theme);
35 localStorage.setItem("cf-theme", theme);
36 }, [theme]);
37
38 const handleToggleTheme = () =>
39 setTheme((t) => (t === "dark" ? "light" : "dark"));
40
26 const hasChanges = documentContent !== originalContent; 41 const hasChanges = documentContent !== originalContent;
27 42
28 // Clear error after 5 seconds 43 // Clear error after 5 seconds
@@ -282,6 +297,8 @@ export function App() {
282 onCreateSession={handleCreateSession} 297 onCreateSession={handleCreateSession}
283 onDeleteProject={handleDeleteProject} 298 onDeleteProject={handleDeleteProject}
284 onDeleteSession={handleDeleteSession} 299 onDeleteSession={handleDeleteSession}
300 theme={theme}
301 onToggleTheme={handleToggleTheme}
285 /> 302 />
286 303
287 <div className="main-content"> 304 <div className="main-content">
@@ -291,6 +308,7 @@ export function App() {
291 phase={selectedSession?.phase || "research"} 308 phase={selectedSession?.phase || "research"}
292 disabled={!selectedSession || selectedSession.phase === "implement"} 309 disabled={!selectedSession || selectedSession.phase === "implement"}
293 showOnboarding={!selectedProject} 310 showOnboarding={!selectedProject}
311 theme={theme}
294 /> 312 />
295 313
296 <ChatPane 314 <ChatPane
diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index c5f456c..f5368b3 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -5,6 +5,7 @@ import { EditorState } from "@codemirror/state";
5import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from "@codemirror/view"; 5import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from "@codemirror/view";
6import { markdown } from "@codemirror/lang-markdown"; 6import { markdown } from "@codemirror/lang-markdown";
7import { languages } from "@codemirror/language-data"; 7import { languages } from "@codemirror/language-data";
8import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
8import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"; 9import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
9import { oneDark } from "@codemirror/theme-one-dark"; 10import { oneDark } from "@codemirror/theme-one-dark";
10import type { Phase } from "../types"; 11import type { Phase } from "../types";
@@ -15,16 +16,19 @@ interface DocumentPaneProps {
15 phase: Phase; 16 phase: Phase;
16 disabled: boolean; 17 disabled: boolean;
17 showOnboarding?: boolean; 18 showOnboarding?: boolean;
19 theme: "dark" | "light";
18} 20}
19 21
20function MarkdownEditor({ 22function MarkdownEditor({
21 content, 23 content,
22 onChange, 24 onChange,
23 disabled, 25 disabled,
26 theme,
24}: { 27}: {
25 content: string; 28 content: string;
26 onChange: (content: string) => void; 29 onChange: (content: string) => void;
27 disabled: boolean; 30 disabled: boolean;
31 theme: "dark" | "light";
28}) { 32}) {
29 const editorRef = useRef<HTMLDivElement>(null); 33 const editorRef = useRef<HTMLDivElement>(null);
30 const viewRef = useRef<EditorView | null>(null); 34 const viewRef = useRef<EditorView | null>(null);
@@ -47,7 +51,7 @@ function MarkdownEditor({
47 history(), 51 history(),
48 keymap.of([...defaultKeymap, ...historyKeymap]), 52 keymap.of([...defaultKeymap, ...historyKeymap]),
49 markdown({ codeLanguages: languages }), 53 markdown({ codeLanguages: languages }),
50 oneDark, 54 theme === "dark" ? oneDark : syntaxHighlighting(defaultHighlightStyle),
51 updateListener, 55 updateListener,
52 EditorView.editable.of(!disabled), 56 EditorView.editable.of(!disabled),
53 EditorView.lineWrapping, 57 EditorView.lineWrapping,
@@ -81,7 +85,7 @@ function MarkdownEditor({
81 view.destroy(); 85 view.destroy();
82 viewRef.current = null; 86 viewRef.current = null;
83 }; 87 };
84 }, [disabled]); 88 }, [disabled, theme]);
85 89
86 // Update content when it changes externally 90 // Update content when it changes externally
87 useEffect(() => { 91 useEffect(() => {
@@ -109,6 +113,7 @@ export function DocumentPane({
109 phase, 113 phase,
110 disabled, 114 disabled,
111 showOnboarding, 115 showOnboarding,
116 theme,
112}: DocumentPaneProps) { 117}: DocumentPaneProps) {
113 const [isEditing, setIsEditing] = useState(false); 118 const [isEditing, setIsEditing] = useState(false);
114 119
@@ -211,6 +216,7 @@ export function DocumentPane({
211 content={content} 216 content={content}
212 onChange={onChange} 217 onChange={onChange}
213 disabled={disabled} 218 disabled={disabled}
219 theme={theme}
214 /> 220 />
215 ) : ( 221 ) : (
216 <div 222 <div
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index b6bed26..b4faa6e 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,6 +1,8 @@
1import React from "react"; 1import React from "react";
2import type { Project, Session, Phase } from "../types"; 2import type { Project, Session, Phase } from "../types";
3 3
4type Theme = "dark" | "light";
5
4interface HeaderProps { 6interface HeaderProps {
5 projects: Project[]; 7 projects: Project[];
6 sessions: Session[]; 8 sessions: Session[];
@@ -12,6 +14,8 @@ interface HeaderProps {
12 onCreateSession: () => void; 14 onCreateSession: () => void;
13 onDeleteProject?: (id: string) => void; 15 onDeleteProject?: (id: string) => void;
14 onDeleteSession?: (id: string) => void; 16 onDeleteSession?: (id: string) => void;
17 theme: Theme;
18 onToggleTheme: () => void;
15} 19}
16 20
17const phaseLabels: Record<Phase, string> = { 21const phaseLabels: Record<Phase, string> = {
@@ -33,6 +37,8 @@ export function Header({
33 onCreateSession, 37 onCreateSession,
34 onDeleteProject, 38 onDeleteProject,
35 onDeleteSession, 39 onDeleteSession,
40 theme,
41 onToggleTheme,
36}: HeaderProps) { 42}: HeaderProps) {
37 const handleDeleteProject = () => { 43 const handleDeleteProject = () => {
38 if (!selectedProject || !onDeleteProject) return; 44 if (!selectedProject || !onDeleteProject) return;
@@ -51,6 +57,9 @@ export function Header({
51 return ( 57 return (
52 <header className="header"> 58 <header className="header">
53 <div className="header-left"> 59 <div className="header-left">
60 {/* ── Wordmark ── */}
61 <span className="app-wordmark">Claude Flow</span>
62
54 <select 63 <select
55 value={selectedProject?.id || ""} 64 value={selectedProject?.id || ""}
56 onChange={(e) => { 65 onChange={(e) => {
@@ -129,6 +138,11 @@ export function Header({
129 })} 138 })}
130 </div> 139 </div>
131 )} 140 )}
141
142 {/* ── Theme toggle ── */}
143 <button className="theme-toggle" onClick={onToggleTheme}>
144 {theme === "dark" ? "[light]" : "[dark]"}
145 </button>
132 </div> 146 </div>
133 </header> 147 </header>
134 ); 148 );
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 7ad199e..97b7bb8 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -4,25 +4,44 @@
4 padding: 0; 4 padding: 0;
5} 5}
6 6
7/* ── Dark theme (default) ────────────────────────────────────── */
7:root { 8:root {
8 --bg-primary: #1a1a1a; 9 --bg-primary: #1a1a1a;
9 --bg-secondary: #252525; 10 --bg-secondary: #252525;
10 --bg-tertiary: #333; 11 --bg-tertiary: #333;
11 --border: #444; 12 --border: #444;
12 --text-primary: #e0e0e0; 13 --text-primary: #e0e0e0;
13 --text-secondary: #888; 14 --text-secondary: #888;
14 --accent: #3b82f6; 15 --accent: #60a5fa;
15 --accent-hover: #2563eb; 16 --accent-hover: #93c5fd;
16 --success: #10b981; 17 --success: #10b981;
17 --warning: #f59e0b; 18 --warning: #f59e0b;
18 --danger: #ef4444; 19 --danger: #ef4444;
19} 20}
20 21
22/* ── Light theme overrides ───────────────────────────────────── */
23html[data-theme="light"] {
24 --bg-primary: #f4f4f2;
25 --bg-secondary: #e8e8e5;
26 --bg-tertiary: #d8d8d4;
27 --border: #b4b4b0;
28 --text-primary: #1a1a18;
29 --text-secondary: #5a5a56;
30 --accent: #2563eb;
31 --accent-hover: #1d4ed8;
32 --success: #059669;
33 --warning: #d97706;
34 --danger: #dc2626;
35}
36
37/* ── Base ────────────────────────────────────────────────────── */
21body { 38body {
22 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 39 font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code",
40 Monaco, "Courier New", monospace;
23 background: var(--bg-primary); 41 background: var(--bg-primary);
24 color: var(--text-primary); 42 color: var(--text-primary);
25 overflow: hidden; 43 overflow: hidden;
44 font-size: 13px;
26} 45}
27 46
28.app { 47.app {
@@ -31,12 +50,12 @@ body {
31 height: 100vh; 50 height: 100vh;
32} 51}
33 52
34/* Header */ 53/* ── Header ──────────────────────────────────────────────────── */
35.header { 54.header {
36 display: flex; 55 display: flex;
37 justify-content: space-between; 56 justify-content: space-between;
38 align-items: center; 57 align-items: center;
39 padding: 12px 16px; 58 padding: 10px 16px;
40 background: var(--bg-secondary); 59 background: var(--bg-secondary);
41 border-bottom: 1px solid var(--border); 60 border-bottom: 1px solid var(--border);
42 -webkit-app-region: drag; 61 -webkit-app-region: drag;
@@ -50,15 +69,30 @@ body {
50 -webkit-app-region: no-drag; 69 -webkit-app-region: no-drag;
51} 70}
52 71
72/* App wordmark */
73.app-wordmark {
74 font-size: 12px;
75 font-weight: 700;
76 letter-spacing: 0.15em;
77 text-transform: uppercase;
78 color: var(--text-primary);
79 padding-right: 12px;
80 border-right: 1px solid var(--border);
81 margin-right: 4px;
82 user-select: none;
83 white-space: nowrap;
84}
85
53.header select, 86.header select,
54.header button { 87.header button {
55 padding: 6px 12px; 88 padding: 5px 10px;
56 background: var(--bg-tertiary); 89 background: var(--bg-tertiary);
57 border: 1px solid var(--border); 90 border: 1px solid var(--border);
58 border-radius: 4px; 91 border-radius: 2px;
59 color: var(--text-primary); 92 color: var(--text-primary);
60 cursor: pointer; 93 cursor: pointer;
61 font-size: 13px; 94 font-size: 12px;
95 font-family: inherit;
62} 96}
63 97
64.header button:hover { 98.header button:hover {
@@ -68,8 +102,8 @@ body {
68.header button.btn-delete { 102.header button.btn-delete {
69 background: transparent; 103 background: transparent;
70 border: 1px solid var(--border); 104 border: 1px solid var(--border);
71 padding: 6px 8px; 105 padding: 5px 8px;
72 font-size: 14px; 106 font-size: 13px;
73} 107}
74 108
75.header button.btn-delete:hover { 109.header button.btn-delete:hover {
@@ -77,15 +111,32 @@ body {
77 border-color: var(--danger); 111 border-color: var(--danger);
78} 112}
79 113
114/* Theme toggle */
115.theme-toggle {
116 font-size: 11px;
117 letter-spacing: 0.08em;
118 text-transform: lowercase;
119 opacity: 0.7;
120 transition: opacity 0.15s;
121}
122
123.theme-toggle:hover {
124 opacity: 1;
125 background: var(--bg-tertiary) !important;
126}
127
128/* Phase indicator */
80.phase-indicator { 129.phase-indicator {
81 display: flex; 130 display: flex;
82 gap: 4px; 131 gap: 4px;
83} 132}
84 133
85.phase-step { 134.phase-step {
86 padding: 4px 12px; 135 padding: 3px 10px;
87 font-size: 12px; 136 font-size: 11px;
88 border-radius: 4px; 137 letter-spacing: 0.07em;
138 text-transform: uppercase;
139 border-radius: 2px;
89 background: var(--bg-tertiary); 140 background: var(--bg-tertiary);
90 color: var(--text-secondary); 141 color: var(--text-secondary);
91} 142}
@@ -100,14 +151,14 @@ body {
100 color: white; 151 color: white;
101} 152}
102 153
103/* Main Content */ 154/* ── Main Content ─────────────────────────────────────────────── */
104.main-content { 155.main-content {
105 flex: 1; 156 flex: 1;
106 display: flex; 157 display: flex;
107 overflow: hidden; 158 overflow: hidden;
108} 159}
109 160
110/* Document Pane */ 161/* ── Document Pane ───────────────────────────────────────────── */
111.document-pane { 162.document-pane {
112 flex: 1; 163 flex: 1;
113 display: flex; 164 display: flex;
@@ -121,21 +172,29 @@ body {
121 display: flex; 172 display: flex;
122 justify-content: space-between; 173 justify-content: space-between;
123 align-items: center; 174 align-items: center;
124 padding: 8px 16px; 175 padding: 7px 16px;
125 background: var(--bg-secondary); 176 background: var(--bg-secondary);
126 border-bottom: 1px solid var(--border); 177 border-bottom: 1px solid var(--border);
127 font-size: 14px; 178 font-size: 11px;
179 letter-spacing: 0.07em;
180 text-transform: uppercase;
128 color: var(--text-secondary); 181 color: var(--text-secondary);
129} 182}
130 183
131.document-header button { 184.document-header button {
132 padding: 4px 8px; 185 padding: 3px 8px;
133 background: var(--bg-tertiary); 186 background: var(--bg-tertiary);
134 border: 1px solid var(--border); 187 border: 1px solid var(--border);
135 border-radius: 4px; 188 border-radius: 2px;
136 color: var(--text-primary); 189 color: var(--text-primary);
137 cursor: pointer; 190 cursor: pointer;
138 font-size: 12px; 191 font-size: 11px;
192 font-family: inherit;
193 letter-spacing: 0.05em;
194}
195
196.document-header button:hover {
197 background: var(--border);
139} 198}
140 199
141.document-content { 200.document-content {
@@ -145,8 +204,8 @@ body {
145} 204}
146 205
147.document-content.editing { 206.document-content.editing {
148 font-family: "SF Mono", Monaco, "Cascadia Code", monospace; 207 font-family: inherit;
149 font-size: 14px; 208 font-size: 13px;
150 line-height: 1.6; 209 line-height: 1.6;
151 background: var(--bg-primary); 210 background: var(--bg-primary);
152 border: none; 211 border: none;
@@ -179,16 +238,19 @@ body {
179} 238}
180 239
181.document-content.rendered h1 { 240.document-content.rendered h1 {
182 font-size: 28px; 241 font-size: 22px;
183 margin: 24px 0 16px; 242 margin: 24px 0 16px;
243 letter-spacing: -0.01em;
184} 244}
185.document-content.rendered h2 { 245.document-content.rendered h2 {
186 font-size: 22px; 246 font-size: 17px;
187 margin: 20px 0 12px; 247 margin: 20px 0 12px;
188 color: var(--text-secondary); 248 color: var(--text-secondary);
249 text-transform: uppercase;
250 letter-spacing: 0.05em;
189} 251}
190.document-content.rendered h3 { 252.document-content.rendered h3 {
191 font-size: 18px; 253 font-size: 14px;
192 margin: 16px 0 8px; 254 margin: 16px 0 8px;
193} 255}
194.document-content.rendered p { 256.document-content.rendered p {
@@ -198,14 +260,14 @@ body {
198.document-content.rendered code { 260.document-content.rendered code {
199 background: var(--bg-tertiary); 261 background: var(--bg-tertiary);
200 padding: 2px 6px; 262 padding: 2px 6px;
201 border-radius: 4px; 263 border-radius: 2px;
202 font-size: 13px; 264 font-size: 12px;
203 font-family: "SF Mono", Monaco, "Cascadia Code", monospace; 265 font-family: inherit;
204} 266}
205.document-content.rendered pre { 267.document-content.rendered pre {
206 background: var(--bg-tertiary); 268 background: var(--bg-tertiary);
207 padding: 16px; 269 padding: 16px;
208 border-radius: 8px; 270 border-radius: 2px;
209 overflow-x: auto; 271 overflow-x: auto;
210 margin: 16px 0; 272 margin: 16px 0;
211} 273}
@@ -238,17 +300,20 @@ body {
238 width: 100%; 300 width: 100%;
239 border-collapse: collapse; 301 border-collapse: collapse;
240 margin: 16px 0; 302 margin: 16px 0;
241 font-size: 14px; 303 font-size: 12px;
242} 304}
243.document-content.rendered th, 305.document-content.rendered th,
244.document-content.rendered td { 306.document-content.rendered td {
245 padding: 10px 12px; 307 padding: 8px 12px;
246 text-align: left; 308 text-align: left;
247 border: 1px solid var(--border); 309 border: 1px solid var(--border);
248} 310}
249.document-content.rendered th { 311.document-content.rendered th {
250 background: var(--bg-tertiary); 312 background: var(--bg-tertiary);
251 font-weight: 600; 313 font-weight: 600;
314 text-transform: uppercase;
315 letter-spacing: 0.06em;
316 font-size: 11px;
252} 317}
253.document-content.rendered tr:nth-child(even) td { 318.document-content.rendered tr:nth-child(even) td {
254 background: var(--bg-secondary); 319 background: var(--bg-secondary);
@@ -280,11 +345,13 @@ body {
280 background: var(--accent); 345 background: var(--accent);
281 color: white; 346 color: white;
282 padding: 2px 8px; 347 padding: 2px 8px;
283 border-radius: 4px; 348 border-radius: 2px;
284 font-size: 11px; 349 font-size: 10px;
350 letter-spacing: 0.08em;
351 text-transform: uppercase;
285} 352}
286 353
287/* Chat Pane */ 354/* ── Chat Pane ───────────────────────────────────────────────── */
288.chat-pane { 355.chat-pane {
289 width: 380px; 356 width: 380px;
290 display: flex; 357 display: flex;
@@ -299,11 +366,11 @@ body {
299} 366}
300 367
301.message { 368.message {
302 margin-bottom: 12px; 369 margin-bottom: 10px;
303 padding: 10px 14px; 370 padding: 9px 13px;
304 border-radius: 8px; 371 border-radius: 4px;
305 max-width: 90%; 372 max-width: 90%;
306 font-size: 14px; 373 font-size: 13px;
307 line-height: 1.5; 374 line-height: 1.5;
308 white-space: pre-wrap; 375 white-space: pre-wrap;
309} 376}
@@ -311,6 +378,7 @@ body {
311.message.user { 378.message.user {
312 background: var(--accent); 379 background: var(--accent);
313 margin-left: auto; 380 margin-left: auto;
381 color: white;
314} 382}
315 383
316.message.assistant { 384.message.assistant {
@@ -331,27 +399,38 @@ body {
331 399
332.chat-input input { 400.chat-input input {
333 flex: 1; 401 flex: 1;
334 padding: 10px 14px; 402 padding: 9px 13px;
335 background: var(--bg-tertiary); 403 background: var(--bg-tertiary);
336 border: 1px solid var(--border); 404 border: 1px solid var(--border);
337 border-radius: 8px; 405 border-radius: 2px;
338 color: var(--text-primary); 406 color: var(--text-primary);
339 font-size: 14px; 407 font-size: 13px;
408 font-family: inherit;
409 transition: border-color 0.15s, box-shadow 0.15s;
340} 410}
341 411
342.chat-input input:focus { 412.chat-input input:focus {
343 outline: none; 413 outline: none;
344 border-color: var(--accent); 414 border-color: var(--accent);
415 box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
416}
417
418html[data-theme="light"] .chat-input input:focus {
419 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
345} 420}
346 421
347.chat-input button { 422.chat-input button {
348 padding: 10px 16px; 423 padding: 9px 15px;
349 background: var(--accent); 424 background: var(--accent);
350 border: none; 425 border: none;
351 border-radius: 8px; 426 border-radius: 2px;
352 color: white; 427 color: white;
353 cursor: pointer; 428 cursor: pointer;
354 font-size: 14px; 429 font-size: 12px;
430 font-family: inherit;
431 letter-spacing: 0.05em;
432 text-transform: uppercase;
433 transition: background 0.15s;
355} 434}
356 435
357.chat-input button:hover:not(:disabled) { 436.chat-input button:hover:not(:disabled) {
@@ -359,16 +438,16 @@ body {
359} 438}
360 439
361.chat-input button:disabled { 440.chat-input button:disabled {
362 opacity: 0.5; 441 opacity: 0.4;
363 cursor: not-allowed; 442 cursor: not-allowed;
364} 443}
365 444
366/* Action Bar */ 445/* ── Action Bar ──────────────────────────────────────────────── */
367.action-bar { 446.action-bar {
368 display: flex; 447 display: flex;
369 justify-content: space-between; 448 justify-content: space-between;
370 align-items: center; 449 align-items: center;
371 padding: 12px 16px; 450 padding: 10px 16px;
372 background: var(--bg-secondary); 451 background: var(--bg-secondary);
373 border-top: 1px solid var(--border); 452 border-top: 1px solid var(--border);
374} 453}
@@ -388,9 +467,9 @@ body {
388 467
389.token-bar { 468.token-bar {
390 width: 100px; 469 width: 100px;
391 height: 6px; 470 height: 4px;
392 background: var(--bg-tertiary); 471 background: var(--bg-tertiary);
393 border-radius: 3px; 472 border-radius: 1px;
394 overflow: hidden; 473 overflow: hidden;
395} 474}
396 475
@@ -400,7 +479,9 @@ body {
400} 479}
401 480
402.token-label { 481.token-label {
403 font-size: 12px; 482 font-size: 10px;
483 letter-spacing: 0.08em;
484 text-transform: uppercase;
404 color: var(--text-secondary); 485 color: var(--text-secondary);
405} 486}
406 487
@@ -408,7 +489,9 @@ body {
408 display: flex; 489 display: flex;
409 align-items: center; 490 align-items: center;
410 gap: 6px; 491 gap: 6px;
411 font-size: 13px; 492 font-size: 11px;
493 letter-spacing: 0.05em;
494 text-transform: uppercase;
412 color: var(--text-secondary); 495 color: var(--text-secondary);
413 cursor: pointer; 496 cursor: pointer;
414} 497}
@@ -418,13 +501,16 @@ body {
418} 501}
419 502
420.btn-secondary { 503.btn-secondary {
421 padding: 8px 16px; 504 padding: 6px 14px;
422 background: var(--bg-tertiary); 505 background: var(--bg-tertiary);
423 border: 1px solid var(--border); 506 border: 1px solid var(--border);
424 border-radius: 6px; 507 border-radius: 2px;
425 color: var(--text-primary); 508 color: var(--text-primary);
426 cursor: pointer; 509 cursor: pointer;
427 font-size: 14px; 510 font-size: 12px;
511 font-family: inherit;
512 letter-spacing: 0.05em;
513 transition: background 0.15s;
428} 514}
429 515
430.btn-secondary:hover:not(:disabled) { 516.btn-secondary:hover:not(:disabled) {
@@ -432,19 +518,23 @@ body {
432} 518}
433 519
434.btn-secondary:disabled { 520.btn-secondary:disabled {
435 opacity: 0.5; 521 opacity: 0.4;
436 cursor: not-allowed; 522 cursor: not-allowed;
437} 523}
438 524
439.btn-primary { 525.btn-primary {
440 padding: 8px 20px; 526 padding: 6px 18px;
441 background: var(--accent); 527 background: var(--accent);
442 border: none; 528 border: none;
443 border-radius: 6px; 529 border-radius: 2px;
444 color: white; 530 color: white;
445 cursor: pointer; 531 cursor: pointer;
446 font-weight: 500; 532 font-weight: 600;
447 font-size: 14px; 533 font-size: 12px;
534 font-family: inherit;
535 letter-spacing: 0.07em;
536 text-transform: uppercase;
537 transition: background 0.15s;
448} 538}
449 539
450.btn-primary:hover:not(:disabled) { 540.btn-primary:hover:not(:disabled) {
@@ -452,16 +542,18 @@ body {
452} 542}
453 543
454.btn-primary:disabled { 544.btn-primary:disabled {
455 opacity: 0.5; 545 opacity: 0.4;
456 cursor: not-allowed; 546 cursor: not-allowed;
457} 547}
458 548
459.implementing-status { 549.implementing-status {
460 color: var(--success); 550 color: var(--success);
461 font-size: 14px; 551 font-size: 11px;
552 letter-spacing: 0.1em;
553 text-transform: uppercase;
462} 554}
463 555
464/* Error Bar */ 556/* ── Error Bar ───────────────────────────────────────────────── */
465.error-bar { 557.error-bar {
466 display: flex; 558 display: flex;
467 justify-content: space-between; 559 justify-content: space-between;
@@ -469,14 +561,15 @@ body {
469 padding: 8px 16px; 561 padding: 8px 16px;
470 background: var(--danger); 562 background: var(--danger);
471 color: white; 563 color: white;
472 font-size: 14px; 564 font-size: 12px;
565 letter-spacing: 0.03em;
473} 566}
474 567
475.error-bar button { 568.error-bar button {
476 background: none; 569 background: none;
477 border: none; 570 border: none;
478 color: white; 571 color: white;
479 font-size: 18px; 572 font-size: 16px;
480 cursor: pointer; 573 cursor: pointer;
481 padding: 0 4px; 574 padding: 0 4px;
482} 575}
@@ -485,17 +578,21 @@ body {
485 opacity: 0.8; 578 opacity: 0.8;
486} 579}
487 580
488/* Onboarding */ 581/* ── Onboarding ──────────────────────────────────────────────── */
489.onboarding h1 { 582.onboarding h1 {
490 font-size: 32px; 583 font-size: 24px;
491 margin-bottom: 8px; 584 margin-bottom: 8px;
585 letter-spacing: 0.05em;
586 text-transform: uppercase;
492} 587}
493 588
494.onboarding h2 { 589.onboarding h2 {
495 font-size: 20px; 590 font-size: 13px;
496 margin-top: 28px; 591 margin-top: 28px;
497 margin-bottom: 12px; 592 margin-bottom: 12px;
498 color: var(--accent); 593 color: var(--accent);
594 text-transform: uppercase;
595 letter-spacing: 0.1em;
499} 596}
500 597
501.onboarding p { 598.onboarding p {
@@ -515,13 +612,13 @@ body {
515.onboarding pre { 612.onboarding pre {
516 background: var(--bg-tertiary); 613 background: var(--bg-tertiary);
517 padding: 12px 16px; 614 padding: 12px 16px;
518 border-radius: 6px; 615 border-radius: 2px;
519 margin: 12px 0; 616 margin: 12px 0;
520} 617}
521 618
522.onboarding code { 619.onboarding code {
523 font-family: "SF Mono", Monaco, monospace; 620 font-family: inherit;
524 font-size: 13px; 621 font-size: 12px;
525} 622}
526 623
527.onboarding a { 624.onboarding a {
@@ -538,5 +635,5 @@ body {
538 padding: 16px; 635 padding: 16px;
539 background: var(--bg-tertiary); 636 background: var(--bg-tertiary);
540 border-left: 3px solid var(--accent); 637 border-left: 3px solid var(--accent);
541 border-radius: 0 6px 6px 0; 638 border-radius: 0 2px 2px 0;
542} 639}
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-18 21:28:11 +0000