From a6d38834228ed8a49770b248b34a5ca521892f28 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Sat, 12 Sep 2026 23:45:44 +0300
Subject: [PATCH] Wave-5 reskin batch 3: header title in CMU serif, markdown
 gets lh-prose

- Session title: font-title (CMU Serif bold) at text-2xl, per the mock.
- MessageResponse's markdown container now carries .lh-prose (Source
  Sans 3 + emphasis tokens) on every markdown surface; labels stay
  JetBrains Mono. Unlayered plain CSS beats the text-sm utility.
- PhaseChip + PhaseDivider sizes now pull from the declared text ladder
  (text-xs) instead of pixel literals.
---
 components/ai-elements/message.tsx | 4 +++-
 components/chat.tsx                | 2 +-
 components/phase-divider.tsx       | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/ai-elements/message.tsx b/components/ai-elements/message.tsx
index 9cb668f..18c823d 100644
--- a/components/ai-elements/message.tsx
+++ b/components/ai-elements/message.tsx
@@ -384,7 +384,9 @@ export const MessageResponse = memo(
     return (
       <Streamdown
         className={cn(
-          "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          // Source Sans 3 + emphasis-color tokens on every markdown surface
+          // (labels stay JetBrains Mono). Unlayered plain CSS wins over text-sm.
+          "lh-prose size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
           className
         )}
         mermaid={mermaidOptions}
diff --git a/components/chat.tsx b/components/chat.tsx
index 2f55fd9..cec4221 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -459,7 +459,7 @@ export function Chat({
 				    when it disappears and slide the title + chip up. */}
 				<header className="flex h-10 items-center gap-3 px-3">
 					<SidebarToggle />
-					<div className="min-w-0 flex-1 truncate font-medium">{title}</div>
+					<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
 					<PhaseChip phase={phases.at(-1) ?? "probe"} />
 				</header>
 
diff --git a/components/phase-divider.tsx b/components/phase-divider.tsx
index 0e9697b..e3ac854 100644
--- a/components/phase-divider.tsx
+++ b/components/phase-divider.tsx
@@ -36,7 +36,7 @@ export function PhaseChip({ phase }: { phase: Phase3 }) {
 			data-testid="phase-chip"
 			data-phase={phase}
 			title={`Session phase: ${CHIP_LABEL[phase]}`}
-			className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
+			className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
 		>
 			<span className={cn("size-1.5 rounded-full", PHASE_DOT[phase])} aria-hidden />
 			{CHIP_LABEL[phase]}
@@ -71,7 +71,7 @@ export function PhaseDivider({ phase, nodeCount }: { phase: Phase3; nodeCount?:
 			<span className={cn("h-0 flex-1 border-t-2 border-dotted", DIVIDER_RULE[phase])} aria-hidden />
 			<span
 				className={cn(
-					"rounded-full border px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wide",
+					"rounded-full border px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide",
 					DIVIDER_TEXT[phase],
 				)}
 			>