fix(editor): contrast, surfaces and controls that report what they claim to

src/components/ai-edition/EditorEmptyState.test.tsx

@@ -128,9 +128,7 @@ describe("EditorEmptyState (new editor)", () => {
 		renderWithI18n(<EditorEmptyState hasProject={false} />);
 
 		expect(screen.getByText(/no project open/i)).toBeInTheDocument();
-		expect(
-			screen.getByRole("button", { name: /new project \+ import video/i }),
-		).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: /^new project$/i })).toBeInTheDocument();
 		expect(screen.getByRole("button", { name: /open project/i })).toBeInTheDocument();
 	});
 
@@ -197,7 +195,7 @@ describe("EditorEmptyState (new editor)", () => {
 		renderWithI18n(<EditorEmptyState hasProject={false} />);
 
 		await act(async () => {
-			fireEvent.click(screen.getByRole("button", { name: /new project \+ import video/i }));
+			fireEvent.click(screen.getByRole("button", { name: /^new project$/i }));
 		});
 
 		await waitFor(() => {

src/components/ai-edition/ExportDialog.tsx

@@ -369,6 +369,10 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 		<ModalShell
 			open={open}
 			onClose={handleClose}
+			// Nothing here wants 960px: the widest row is three quality cards, and at the
+			// default each one got ~290px to hold "720p" over "1280 × 720". The choices
+			// were swimming in their own plates.
+			compact
 			title={t("exportDialog.title")}
 			subtitle={t("exportDialog.subtitle")}
 		>
@@ -717,8 +721,9 @@ function FormatToggle({
 				background: active ? "var(--accent-wash)" : "var(--surface)",
 				// Selection is conveyed by border + wash background (like the quality
 				// cards below), not by swapping text color -- `--accent-on` is meant
-				// for text on a SOLID accent fill, and paired with the near-transparent
-				// `--accent-wash` it read as near-invisible dark-on-dark text.
+				// for text on a SOLID `--accent-fill`, and paired with the
+				// near-transparent `--accent-wash` it disappears in one theme or the
+				// other (it was dark-on-dark before, it is white-on-white now).
 				color: "var(--fg)",
 				cursor: "pointer",
 				font: "600 14px/1 var(--font-body)",
@@ -884,7 +889,7 @@ function segStyle(active: boolean): React.CSSProperties {
 		padding: "8px 10px",
 		border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
 		borderRadius: 8,
-		background: active ? "var(--brand)" : "var(--bg)",
+		background: active ? "var(--accent-fill)" : "var(--bg)",
 		color: active ? "var(--accent-on)" : "var(--fg-2)",
 		cursor: "pointer",
 		font: "500 12px/1 var(--font-body)",

src/components/ai-edition/LeftPanel.contextMeter.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+// The chat strip's context meter: the number it prints, the bar it draws, and the
+// warning it raises once the conversation nears its (estimated) ceiling. The warning is
+// a colour change plus a glyph for sighted users, and the glyph is aria-hidden, so the
+// words a screen reader gets in its place are pinned here alongside the rest.
+
+import "@testing-library/jest-dom";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ChatBudget } from "./chatBudget";
+import { ContextMeter } from "./LeftPanel";
+
+// Echoes the key, plus the percentage when one is passed, so assertions read against
+// keys rather than against copy that moves with every revision.
+function t(key: string, vars?: Record<string, string | number>): string {
+	return vars && "percent" in vars ? `${key}:${vars.percent}` : key;
+}
+
+function budget(ratio: number): ChatBudget {
+	return { usedTokens: Math.round(ratio * 80_000), budgetTokens: 80_000, ratio };
+}
+
+function renderMeter(ratio: number) {
+	const { container } = render(<ContextMeter budget={budget(ratio)} t={t} />);
+	const meter = container.firstElementChild as HTMLElement;
+	const fill = meter.querySelector<HTMLElement>("[aria-hidden] > span");
+	return { meter, fill };
+}
+
+afterEach(cleanup);
+
+describe("ContextMeter", () => {
+	it("rounds the ratio to a whole percentage, in the label and the bar alike", () => {
+		const { meter, fill } = renderMeter(0.426);
+		expect(meter).toHaveTextContent("chat.contextPercent:43");
+		expect(fill).toHaveStyle({ width: "43%" });
+	});
+
+	it("caps at 100% when the estimate runs past the ceiling", () => {
+		const { meter, fill } = renderMeter(1.37);
+		expect(meter).toHaveTextContent("chat.contextPercent:100");
+		expect(fill).toHaveStyle({ width: "100%" });
+	});
+
+	it("stays out of the warning state just below the threshold", () => {
+		const { meter } = renderMeter(0.799);
+		expect(meter).toHaveAttribute("data-tight", "false");
+		expect(meter.querySelector("svg")).toBeNull();
+		expect(meter).not.toHaveTextContent("chat.contextTight");
+	});
+
+	it("warns from the threshold on, with a glyph and with words a screen reader gets", () => {
+		const { meter } = renderMeter(0.8);
+		expect(meter).toHaveAttribute("data-tight", "true");
+		expect(meter.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+		// The glyph is hidden from assistive tech, so the state has to arrive as text,
+		// and before the number it qualifies.
+		expect(meter).toHaveTextContent(/^chat\.contextTight\s*chat\.contextPercent:80$/);
+	});
+});

src/components/ai-edition/LeftPanel.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, Check, Loader2, X } from "lucide-react";
+import { ArrowLeft, Check, Loader2, Sparkles, TriangleAlert, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
@@ -24,6 +24,7 @@ import {
 } from "../../../electron/ai-edition/provider-registry";
 import { ChatWelcome } from "./ChatWelcome";
 import { canSendChat } from "./chatAvailability";
+import type { ChatBudget } from "./chatBudget";
 import { ChatHistoryModal } from "./Modals";
 import styles from "./NewEditorShell.module.css";
 import { useChatBudget } from "./useChatBudget";
@@ -1019,16 +1020,7 @@ export function ChatStripPanel() {
 			<div className={styles.panelHeader}>
 				<div className={styles.chatStrip}>
 					<div className={styles.chatStripRow}>
-						<span
-							className={styles.ctxPill}
-							title={t("chat.contextTooltip", {
-								usedTokens: budget.usedTokens,
-								budgetTokens: budget.budgetTokens,
-							})}
-						>
-							<span className={styles.d} aria-hidden />
-							{t("chat.contextPercent", { percent: Math.min(100, Math.round(budget.ratio * 100)) })}
-						</span>
+						<ContextMeter budget={budget} t={t} />
 						<span className={styles.stripActions}>
 							<button
 								type="button"
@@ -1486,26 +1478,21 @@ export function ChatStripPanel() {
 						ref={modelButtonRef}
 						type="button"
 						className={styles.modelPicker}
-						aria-label={t("chat.modelLabel")}
+						// Unconfigured, the visible text IS the instruction, so naming the
+						// button again would talk over it. Configured, the text is a bare
+						// model id, which needs saying what it is — `currentModel` already
+						// carries that sentence, and its own punctuation with it.
+						aria-label={llmConfig ? `${t("chat.currentModel")} ${modelLabel}` : undefined}
 						aria-haspopup="menu"
 						aria-expanded={modelPopoverOpen}
 						onClick={toggleModelPopoverOpen}
 					>
-						<svg
-							width={12}
-							height={12}
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							strokeWidth="2"
-							strokeLinecap="round"
-							strokeLinejoin="round"
-						>
-							<line x1="3" y1="6" x2="21" y2="6" />
-							<line x1="3" y1="12" x2="21" y2="12" />
-							<line x1="3" y1="18" x2="21" y2="18" />
-						</svg>
-						<span>{modelLabel}</span>
+						{/* Sparkles is what the app menu and the timeline already put on AI,
+						    and it is what this button configures. The three stacked lines it
+						    replaces are a navigation hamburger — they said "menu", which is
+						    the mechanism, not the subject. */}
+						<Sparkles size={12} aria-hidden />
+						<span className={llmConfig ? styles.modelId : undefined}>{modelLabel}</span>
 					</button>
 					{reasoningLabel ? (
 						<button
@@ -1665,8 +1652,8 @@ export function ChatStripPanel() {
 									onClick={() => void confirmRewind(rewindFor.messageId)}
 									style={{
 										padding: "4px 10px",
-										background: "var(--accent)",
-										border: "1px solid var(--accent)",
+										background: "var(--accent-fill)",
+										border: "1px solid var(--accent-fill)",
 										borderRadius: "var(--r-sm)",
 										color: "var(--accent-on)",
 										font: "500 12px var(--font-body)",
@@ -1683,3 +1670,58 @@ export function ChatStripPanel() {
 		</aside>
 	);
 }
+
+/** How full the chat's context window is.
+ *
+ *  This was a mint pill: a dot, a percentage, and a --success wash. Three things were
+ *  wrong with it. The colour never moved — the class was static, so it was the same
+ *  green at 0% as it would be at 99%, which is a status signal that reports no status.
+ *  Its text sat at 2.4:1 on its own background. And a percentage is a ratio against a
+ *  ceiling, which is a quantity a bar shows at a glance and a number only shows to
+ *  someone who stops to read it.
+ *
+ *  So: a meter, with the number kept beside it for the precision the bar cannot give.
+ *  The fill and its track come from one ramp, and the colour now means something —
+ *  mint while there is room, --warn past the point where the next few turns will start
+ *  evicting history. Never colour alone: crossing the threshold also puts a glyph in
+ *  the row, because the amber fill is below 3:1 on this surface by design and the
+ *  glyph, in the darker --warn-fg, is what makes it legible. The glyph is decorative to
+ *  a screen reader, so the same moment also adds the state in words ahead of the number.
+ *
+ *  It stops at --warn rather than escalating to red: this design system reserves red
+ *  for REC, cut, skip and trim, and a fourth meaning would blunt it. */
+const CONTEXT_TIGHT_RATIO = 0.8;
+
+export function ContextMeter({
+	budget,
+	t,
+}: {
+	budget: ChatBudget;
+	t: ReturnType<typeof useScopedT>;
+}) {
+	const percent = Math.min(100, Math.round(budget.ratio * 100));
+	const tight = budget.ratio >= CONTEXT_TIGHT_RATIO;
+	return (
+		<span
+			className={styles.ctxMeter}
+			data-tight={tight}
+			title={t("chat.contextTooltip", {
+				usedTokens: budget.usedTokens,
+				budgetTokens: budget.budgetTokens,
+			})}
+		>
+			{/* Decorative: the label beside it already states the number, and announcing
+			    the same ratio twice is noise rather than access. */}
+			<span className={styles.ctxTrack} aria-hidden>
+				<span className={styles.ctxFill} style={{ width: `${percent}%` }} />
+			</span>
+			{tight ? (
+				<>
+					<TriangleAlert size={11} className={styles.ctxWarnIcon} aria-hidden />
+					<span className="sr-only">{t("chat.contextTight")}</span>
+				</>
+			) : null}
+			<span className={styles.ctxLabel}>{t("chat.contextPercent", { percent })}</span>
+		</span>
+	);
+}

src/components/ai-edition/Modals.tsx

@@ -42,12 +42,13 @@ export function ModalShell({
 	closeOnEscape = true,
 	title,
 	subtitle,
-	wide,
+	compact,
 	children,
 }: BaseModalProps & {
 	title: string;
 	subtitle?: string;
-	wide?: boolean;
+	/** 720px instead of the 960px default — the ordinary dialog width. */
+	compact?: boolean;
 	/** Off for a dialog that handles Escape itself — two listeners both fire for one
 	 *  keypress, and this one's `onClose` wins whatever order they registered in. */
 	closeOnEscape?: boolean;
@@ -83,7 +84,7 @@ export function ModalShell({
 			aria-labelledby="modal-title"
 		>
 			<div className={styles.modalBackdrop} aria-hidden onClick={onClose} />
-			<div className={`${styles.modalCard} ${wide ? styles.wide : ""}`}>
+			<div className={`${styles.modalCard} ${compact ? styles.compact : ""}`}>
 				<header className={styles.modalHead}>
 					<div>
 						<h2 id="modal-title">{title}</h2>
@@ -145,7 +146,7 @@ export function OpenProjectModal({
 			onClose={onClose}
 			title={t("openProjectDialog.title")}
 			subtitle={t("openProjectDialog.subtitle")}
-			wide
+			compact
 		>
 			<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
 				<FolderOpen size={14} style={{ color: "var(--muted)" }} />
@@ -276,7 +277,8 @@ export function OpenProjectModal({
 											width: 36,
 											height: 36,
 											borderRadius: "var(--r-sm)",
-											background: "linear-gradient(135deg, var(--brand-lo), var(--brand))",
+											background:
+												"linear-gradient(135deg, var(--accent-fill-lo), var(--accent-fill))",
 											display: "grid",
 											placeItems: "center",
 											color: "var(--accent-on)",
@@ -537,7 +539,7 @@ function TemplateCell({
 					width: 36,
 					height: 36,
 					borderRadius: "var(--r-sm)",
-					background: active ? "var(--accent)" : "var(--surface-2)",
+					background: active ? "var(--accent-fill)" : "var(--surface-2)",
 					color: active ? "var(--accent-on)" : "var(--muted)",
 					display: "grid",
 					placeItems: "center",
@@ -1026,7 +1028,7 @@ export function EditClipModal({
 			onClose={onClose}
 			title={t("editClipDialog.title")}
 			subtitle={assetMeta?.label ?? undefined}
-			wide
+			compact
 		>
 			<div ref={cropFrameRef} style={previewBoxStyle(videoAspectRatio)}>
 				{cropPreviewSource ? (
@@ -1131,7 +1133,8 @@ export function EditClipModal({
 					style={{
 						display: "flex",
 						justifyContent: "space-between",
-						font: "500 10px/1.4 var(--font-mono)",
+						font: "500 10px/1.4 var(--font-body)",
+						fontVariantNumeric: "tabular-nums",
 						color: "var(--muted)",
 						marginBottom: 4,
 					}}
@@ -1361,7 +1364,15 @@ export function EditClipModal({
 function RangeStat({ label, value, testId }: { label: string; value: string; testId?: string }) {
 	return (
 		<div data-testid={testId} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
-			<strong style={{ font: "600 15px/1.2 var(--font-mono)", color: "var(--fg)" }}>{value}</strong>
+			<strong
+				style={{
+					font: "600 15px/1.2 var(--font-body)",
+					fontVariantNumeric: "tabular-nums",
+					color: "var(--fg)",
+				}}
+			>
+				{value}
+			</strong>
 			<small style={{ font: "500 10px/1.4 var(--font-body)", color: "var(--muted)" }}>
 				{label}
 			</small>