Skip to content

Commit 8eeb67a

Browse files
wesmclaude
wesm
and
claude
committed
fix: sync export/gist HTML styles with updated app design tokens
Align the standalone export HTML template with the current app CSS: - Color palette: warm beige/brown → cool gray/blue-gray (both themes) - Accent purple: gold #b08d24 → actual purple #7c3aed - Font stacks: add JetBrains Mono, match Noto Sans system stack - Code blocks: use dark --code-bg/--code-text instead of --bg-inset - Message styling: 4px border, 14px/1.7 prose, 14px 20px padding - Thinking blocks: 2px border, purple label, larger text - Tool blocks: 2px border, monospace font - Role labels: 13px (was 11px uppercase), timestamps 12px (was 10px) - Body: 14px base font (was 13px), add moz-osx-font-smoothing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 85606af commit 8eeb67a

File tree

1 file changed

+62
-55
lines changed

1 file changed

+62
-55
lines changed

‎internal/server/export.go‎

Lines changed: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -297,54 +297,60 @@ const exportTemplateStr = `<!DOCTYPE html>
297297
<title>{{.Project}} - Agent Session</title>
298298
<style>
299299
:root {
300-
--bg-primary: #faf8f5;
300+
--bg-primary: #f7f7fa;
301301
--bg-surface: #ffffff;
302-
--bg-inset: #f0ede8;
303-
--border-default: #e5e0db;
304-
--border-muted: #ece8e3;
305-
--text-primary: #2c2825;
306-
--text-secondary: #5c5650;
307-
--text-muted: #8c8580;
302+
--bg-inset: #edeef3;
303+
--border-default: #dfe1e8;
304+
--border-muted: #e8eaf0;
305+
--text-primary: #1a1d26;
306+
--text-secondary: #5a6070;
307+
--text-muted: #8b92a0;
308308
--accent-blue: #2563eb;
309-
--accent-purple: #b08d24;
309+
--accent-purple: #7c3aed;
310310
--accent-amber: #d97706;
311-
--user-bg: #f0f4ff;
312-
--assistant-bg: #fdf8ee;
313-
--thinking-bg: #fdf6e8;
314-
--tool-bg: #fff8f0;
311+
--user-bg: #eef2ff;
312+
--assistant-bg: #faf9ff;
313+
--thinking-bg: #f5f3ff;
314+
--tool-bg: #fffbf0;
315+
--code-bg: #1e1e2e;
316+
--code-text: #cdd6f4;
315317
--radius-sm: 4px;
318+
--radius-md: 6px;
316319
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
317-
Roboto, "Helvetica Neue", sans-serif;
318-
--font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo,
319-
Consolas, monospace;
320+
"Noto Sans", Helvetica, Arial, sans-serif;
321+
--font-mono: "JetBrains Mono", "SF Mono", "Fira Code",
322+
"Fira Mono", Menlo, Consolas, monospace;
320323
color-scheme: light;
321324
}
322325
:root.dark {
323-
--bg-primary: #0a0a0a;
324-
--bg-surface: #141414;
325-
--bg-inset: #0e0e0e;
326-
--border-default: #262626;
327-
--border-muted: #1e1e1e;
328-
--text-primary: #e0e0e0;
329-
--text-secondary: #a0a0a0;
330-
--text-muted: #666666;
326+
--bg-primary: #0c0c10;
327+
--bg-surface: #15151b;
328+
--bg-inset: #101015;
329+
--border-default: #2a2a35;
330+
--border-muted: #222230;
331+
--text-primary: #e2e4e9;
332+
--text-secondary: #9ca3af;
333+
--text-muted: #6b7280;
331334
--accent-blue: #60a5fa;
332-
--accent-purple: #c9a84c;
335+
--accent-purple: #a78bfa;
333336
--accent-amber: #fbbf24;
334-
--user-bg: #0f1724;
335-
--assistant-bg: #1a1708;
336-
--thinking-bg: #1e1a0c;
337+
--user-bg: #111827;
338+
--assistant-bg: #141220;
339+
--thinking-bg: #1a1530;
337340
--tool-bg: #1a1508;
341+
--code-bg: #0d0d14;
342+
--code-text: #cdd6f4;
338343
color-scheme: dark;
339344
}
340345
* { box-sizing: border-box; margin: 0; padding: 0; }
341346
body {
342347
font-family: var(--font-sans);
343-
font-size: 13px;
348+
font-size: 14px;
344349
background: var(--bg-primary);
345350
color: var(--text-primary);
346351
line-height: 1.5;
347352
-webkit-font-smoothing: antialiased;
353+
-moz-osx-font-smoothing: grayscale;
348354
}
349355
header {
350356
background: var(--bg-surface);
@@ -368,9 +374,9 @@ main { max-width: 900px; margin: 0 auto; padding: 16px; }
368374
display: flex; flex-direction: column; gap: 8px;
369375
}
370376
.message {
371-
border-left: 3px solid;
372-
padding: 8px 16px;
373-
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
377+
border-left: 4px solid;
378+
padding: 14px 20px;
379+
border-radius: 0 var(--radius-md) var(--radius-md) 0;
374380
}
375381
.message.user {
376382
background: var(--user-bg);
@@ -382,54 +388,54 @@ main { max-width: 900px; margin: 0 auto; padding: 16px; }
382388
}
383389
.message-header {
384390
display: flex; align-items: center; gap: 8px;
385-
margin-bottom: 4px;
391+
margin-bottom: 10px;
386392
}
387393
.message-role {
388-
font-size: 11px; font-weight: 600;
389-
text-transform: uppercase; letter-spacing: 0.03em;
394+
font-size: 13px; font-weight: 600;
395+
letter-spacing: 0.01em;
390396
}
391397
.message.user .message-role { color: var(--accent-blue); }
392398
.message.assistant .message-role {
393399
color: var(--accent-purple);
394400
}
395401
.message-time {
396-
font-size: 10px; color: var(--text-muted);
402+
font-size: 12px; color: var(--text-muted);
397403
}
398404
.message-content {
399-
font-family: var(--font-mono); font-size: 13px;
400-
line-height: 1.6; color: var(--text-primary);
405+
font-size: 14px; line-height: 1.7;
406+
color: var(--text-primary);
401407
white-space: pre-wrap; word-break: break-word;
402408
}
403409
.message-content pre {
404-
background: var(--bg-inset);
405-
border: 1px solid var(--border-muted);
406-
border-radius: var(--radius-sm);
407-
padding: 8px 12px; overflow-x: auto;
408-
margin: 4px 0; font-size: 11px;
410+
background: var(--code-bg);
411+
color: var(--code-text);
412+
border-radius: var(--radius-md);
413+
padding: 12px 16px; overflow-x: auto;
414+
margin: 0.5em 0;
409415
}
410416
.message-content code {
411-
font-family: var(--font-mono); font-size: 0.9em;
417+
font-family: var(--font-mono); font-size: 0.85em;
412418
background: var(--bg-inset);
413419
border: 1px solid var(--border-muted);
414-
border-radius: 3px; padding: 0.15em 0.35em;
420+
border-radius: 4px; padding: 0.15em 0.4em;
415421
}
416422
.message-content pre code {
417423
background: none; border: none;
418-
padding: 0; font-size: inherit;
424+
padding: 0; font-size: 13px; color: inherit;
419425
}
420426
.thinking-block {
421-
border-left: 3px solid var(--accent-purple);
427+
border-left: 2px solid var(--accent-purple);
422428
background: var(--thinking-bg);
423429
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
424-
padding: 4px 12px 8px; margin: 4px 0;
430+
padding: 8px 14px 12px; margin: 4px 0;
425431
font-style: italic; color: var(--text-secondary);
426-
font-size: 12px; line-height: 1.6; display: none;
432+
font-size: 13px; line-height: 1.65; display: none;
427433
}
428434
.thinking-label {
429-
font-size: 10px; font-weight: 600;
430-
color: var(--text-muted);
431-
text-transform: uppercase; letter-spacing: 0.05em;
432-
margin-bottom: 2px; font-style: normal;
435+
font-size: 12px; font-weight: 600;
436+
color: var(--accent-purple);
437+
letter-spacing: 0.01em;
438+
margin-bottom: 4px; font-style: normal;
433439
}
434440
.message.thinking-only { display: none; }
435441
#thinking-toggle:checked ~ main .thinking-block {
@@ -439,11 +445,12 @@ main { max-width: 900px; margin: 0 auto; padding: 16px; }
439445
display: block;
440446
}
441447
.tool-block {
442-
border-left: 3px solid var(--accent-amber);
448+
border-left: 2px solid var(--accent-amber);
443449
background: var(--tool-bg);
444450
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
445-
padding: 4px 8px; margin: 4px 0;
446-
font-size: 11px; color: var(--text-secondary);
451+
padding: 6px 10px; margin: 4px 0;
452+
font-family: var(--font-mono);
453+
font-size: 12px; color: var(--text-secondary);
447454
}
448455
#sort-toggle:checked ~ main .messages {
449456
flex-direction: column-reverse;

0 commit comments

Comments
 (0)