langcoach 0.3.0 → 0.4.1

package/extension/assets/{sidepanel-DMjVhmRR.css → sidepanel-BBkB7IY_.css}

@@ -1,39 +1,68 @@
 :root {
-  --bg: #f7f9fc;
+  /* Notebook tokens: exact copy of NOTEBOOK_TOKENS (@langcoach/core theme.ts); test/theme-tokens.test.ts keeps them in sync. */
+  --lc-paper: #faf7f2;
+  --lc-rule: #efe7da;
+  --lc-border: #eadfcd;
+  --lc-shadow: 0 3px 0 #eadfcd;
+  --lc-streak-tile: #fff1e0;
+  --lc-words-tile: #eef6e8;
+  --lc-sticker: #fde68a;
+  --lc-sticker-rotate: -6deg;
+  --lc-xp-from: #fb923c;
+  --lc-xp-to: #facc15;
+  --lc-learned-bg: #dcfce7;
+  --lc-learned-fg: #166534;
+  --lc-weak-bg: #ffe4e6;
+  --lc-weak-fg: #9f1239;
+  --lc-radius: 14px;
+  --lc-serif: Georgia, "Times New Roman", serif;
+  --lc-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  --bg: var(--lc-paper);
   --surface: #ffffff;
-  --surface-muted: #eef2f8;
-  --border: #d8e0ed;
-  --text: #161d2b;
-  --text-muted: #556178;
-  --primary: #1a56db;
-  --primary-hover: #1545b5;
-  --primary-soft: #e7effd;
-  --success: #0f7b4c;
-  --success-soft: #e3f6ed;
+  --surface-muted: #f6f0e6;
+  --border: var(--lc-border);
+  --text: #292524;
+  --text-muted: #6b5d4f;
+  --primary: #c2410c;
+  --primary-hover: #9a3412;
+  --primary-soft: var(--lc-streak-tile);
+  --on-primary: #ffffff;
+  --success: var(--lc-learned-fg);
+  --success-soft: var(--lc-learned-bg);
   --warning: #b45309;
-  --danger: #c81e1e;
-  --danger-soft: #fde8e8;
-  --radius: 12px;
-  --shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+  --danger: var(--lc-weak-fg);
+  --danger-soft: var(--lc-weak-bg);
+  --radius: var(--lc-radius);
+  --shadow: var(--lc-shadow);
+  --sticker-edge: #e5c76b;
+  --sticker-ink: #292524;
 }
 
+/* Warm dark variant of the same notebook: ink-stained paper, same roles. */
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #11151f;
-    --surface: #1b2232;
-    --surface-muted: #242d42;
-    --border: #323e59;
-    --text: #eef2f9;
-    --text-muted: #9da9c2;
-    --primary: #5b8def;
-    --primary-hover: #7aa4f5;
-    --primary-soft: #223254;
-    --success: #34d399;
-    --success-soft: #14382c;
+    --lc-paper: #1c1814;
+    --lc-rule: #29221b;
+    --lc-border: #3d3329;
+    --lc-shadow: 0 3px 0 #0f0c09;
+    --lc-streak-tile: #33241a;
+    --lc-words-tile: #1f2a1d;
+    --lc-sticker: #fcd34d;
+    --lc-learned-bg: #173322;
+    --lc-learned-fg: #86efac;
+    --lc-weak-bg: #3b1a22;
+    --lc-weak-fg: #fda4af;
+
+    --surface: #26201a;
+    --surface-muted: #2f281f;
+    --text: #f3ece2;
+    --text-muted: #bcae9b;
+    --primary: #fb923c;
+    --primary-hover: #fdba74;
+    --on-primary: #1c1814;
     --warning: #fbbf24;
-    --danger: #f87171;
-    --danger-soft: #3b1c22;
-    --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    --sticker-edge: #b45309;
   }
 }
 
@@ -609,8 +638,6 @@ button:focus-visible, select:focus-visible, input:focus-visible {
   padding: 12px 16px;
   border: none;
   border-radius: 16px;
-  background: linear-gradient(135deg, #1a56db, #7c3aed);
-  color: #fff;
   text-align: start;
   box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
   transition: transform 150ms var(--px-ease), box-shadow 150ms var(--px-ease);
@@ -1233,7 +1260,6 @@ button:focus-visible, select:focus-visible, input:focus-visible {
   --accent-violet-soft: #ede9fe;
   --star: #b45309;
   --focus: var(--primary);
-  --brand-gradient: linear-gradient(135deg, #1a56db 0%, #7c3aed 100%);
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -1244,7 +1270,6 @@ button:focus-visible, select:focus-visible, input:focus-visible {
     --accent-violet: #a78bfa;
     --accent-violet-soft: #2a2148;
     --star: #fbbf24;
-    --brand-gradient: linear-gradient(135deg, #6b93f0 0%, #a78bfa 100%);
   }
 }
 
@@ -1264,13 +1289,6 @@ button:focus-visible, select:focus-visible, input:focus-visible {
 .card {
   border-radius: var(--radius-lg);
 }
-.brand {
-  background: var(--brand-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  font-weight: 800;
-}
 button,
 .tab-btn,
 .chip {
@@ -1563,8 +1581,6 @@ button:disabled {
   border-radius: 20px;
   display: grid;
   place-items: center;
-  background: var(--brand-gradient);
-  color: #fff;
   font-size: 28px;
   font-weight: 800;
   box-shadow: var(--shadow);
@@ -1727,3 +1743,246 @@ ul.ach-grid {
     animation: none;
   }
 }
+
+/* ───────────── Notebook look (sticker notebook, shared with the agent dashboard) ───────────── */
+:root {
+  --radius-lg: var(--lc-radius);
+  --focus: #c2410c;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --focus: #fdba74;
+  }
+}
+
+body {
+  font-family: var(--lc-sans);
+  background-color: var(--lc-paper);
+  background-image: repeating-linear-gradient(transparent 0 27px, var(--lc-rule) 27px 28px);
+  background-attachment: local;
+}
+
+/* Header and tabs sit on the paper like a notebook's top strip. */
+.panel-header,
+.tab-bar {
+  background: var(--lc-paper);
+  border-bottom-color: var(--lc-border);
+}
+.brand {
+  background: none;
+  color: var(--text);
+  font: italic 400 19px/1.2 var(--lc-serif);
+  letter-spacing: 0;
+}
+.pill {
+  background: var(--surface);
+  border: 1px solid var(--lc-border);
+}
+/* One-line tabs: they share the width and scroll sideways only when a locale's labels are too long. */
+.tab-bar {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.tab-btn {
+  flex: 1 0 auto;
+  padding: 8px 6px;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+.tab-btn[aria-current="page"] {
+  background: var(--lc-sticker);
+  color: var(--sticker-ink);
+  box-shadow: 0 2px 0 var(--sticker-edge);
+}
+
+/* Cards: white page cut-outs with a flat paper shadow. */
+.card,
+.stat-box,
+.task-item,
+.vocab-item,
+.scenario-card,
+.ach-item,
+.goal-option,
+.px-stat,
+.px-end-stat {
+  border-color: var(--lc-border);
+  box-shadow: var(--lc-shadow);
+}
+.card {
+  border-radius: var(--lc-radius);
+}
+.task-item,
+.vocab-item,
+.stat-box,
+.ach-item {
+  border-radius: 10px;
+}
+.vocab-item {
+  background: var(--surface);
+}
+
+h1,
+.level-name {
+  font: italic 400 24px/1.2 var(--lc-serif);
+  letter-spacing: 0.01em;
+}
+.level-name {
+  font-size: 22px;
+}
+
+button.primary,
+.chip.active,
+.play-big {
+  color: var(--on-primary);
+}
+.chip.active .chip-count {
+  background: color-mix(in srgb, var(--on-primary) 22%, transparent);
+  color: var(--on-primary);
+}
+button:focus-visible,
+select:focus-visible,
+input:focus-visible,
+a:focus-visible,
+.tab-btn:focus-visible,
+.goal-option:focus-within {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+/* Inset so the scrolling tab bar does not clip the ring. */
+.tab-btn:focus-visible {
+  outline-offset: -3px;
+}
+
+/* XP bars: orange to sun-yellow. */
+.progress-fill {
+  background: linear-gradient(90deg, var(--lc-xp-from), var(--lc-xp-to));
+  border-radius: 999px;
+}
+.progress-bar {
+  background: color-mix(in srgb, var(--lc-border) 70%, var(--surface));
+}
+
+/* Today: hero page with the streak as an orange tile. */
+.today-hero {
+  background: var(--surface);
+  align-items: stretch;
+}
+.streak-box {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border-radius: var(--lc-radius);
+  background: var(--lc-streak-tile);
+  border: 1px solid var(--lc-border);
+  box-shadow: var(--lc-shadow);
+}
+.streak-count {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--text);
+}
+.freeze-pill {
+  background: var(--surface);
+  border: 1px solid var(--lc-border);
+}
+.today-goal {
+  align-content: center;
+}
+.task-item.done {
+  background: var(--lc-learned-bg);
+  border-color: color-mix(in srgb, var(--lc-learned-fg) 30%, var(--lc-learned-bg));
+  color: var(--lc-learned-fg);
+}
+.task-item.done .muted {
+  color: var(--lc-learned-fg);
+}
+.practice-cta {
+  background: linear-gradient(135deg, var(--lc-xp-from), var(--lc-xp-to));
+  color: #292524;
+  border-radius: var(--lc-radius);
+  box-shadow: 0 3px 0 #d97706;
+}
+.practice-cta:active {
+  box-shadow: 0 1px 0 #d97706;
+}
+.practice-cta.fresh {
+  background: var(--lc-words-tile);
+  color: var(--text);
+  border: 1px solid var(--lc-border);
+  box-shadow: var(--lc-shadow);
+}
+.scenario-card {
+  border-inline-start-color: var(--lc-xp-from);
+}
+.scenario-card.tone-1 { border-inline-start-color: var(--lc-learned-fg); }
+.scenario-card.tone-2 { border-inline-start-color: var(--lc-xp-to); }
+.rollover-banner {
+  background: var(--lc-streak-tile);
+  border-color: var(--lc-border);
+  box-shadow: var(--lc-shadow);
+}
+
+/* Words: learned / weak chips. */
+.status-tag.learned,
+.chip-mastered:not(.active),
+.btn-know.done,
+.btn-know:disabled {
+  background: var(--lc-learned-bg);
+  color: var(--lc-learned-fg);
+  border-color: color-mix(in srgb, var(--lc-learned-fg) 25%, var(--lc-learned-bg));
+}
+.chip-weak:not(.active) {
+  background: var(--lc-weak-bg);
+  color: var(--lc-weak-fg);
+  border-color: color-mix(in srgb, var(--lc-weak-fg) 25%, var(--lc-weak-bg));
+}
+.btn-know {
+  background: var(--surface);
+  color: var(--lc-learned-fg);
+  border: 1px solid var(--lc-border);
+}
+.status-tag.new {
+  background: var(--lc-streak-tile);
+  color: var(--primary);
+  border-color: var(--lc-border);
+}
+.show-more {
+  background: var(--surface);
+  border: 1px dashed var(--lc-border);
+}
+.words-search {
+  border-color: var(--lc-border);
+}
+.strength.s3 .strength-bar.on { background: var(--lc-xp-from); }
+
+/* Progress: the level is a tilted sticker. */
+.level-badge {
+  background: var(--lc-sticker);
+  color: var(--sticker-ink);
+  border-radius: 10px;
+  transform: rotate(var(--lc-sticker-rotate));
+  box-shadow: 0 3px 0 var(--sticker-edge);
+}
+.stat-box:nth-child(1) { background: var(--lc-streak-tile); }
+.stat-box:nth-child(4) { background: var(--lc-words-tile); }
+.week-bar {
+  background: var(--lc-streak-tile);
+  border-color: var(--lc-xp-from);
+}
+.week-col.met .week-bar {
+  background: linear-gradient(0deg, var(--lc-xp-from), var(--lc-xp-to));
+  border-color: var(--lc-xp-from);
+}
+.week-goal-line {
+  border-top-color: var(--text-muted);
+}
+.ach-item.unlocked {
+  background: var(--lc-words-tile);
+  border-color: var(--lc-border);
+}
+.goal-option.active {
+  border-color: var(--primary);
+  background: var(--lc-streak-tile);
+}

package/extension/background.js

@@ -1,4 +1,4 @@
-import { S as toLocalDate, _ as CorruptDataError, c as version, f as Coach, g as parseState, h as isDue, l as DEFAULT_SETTINGS, p as progressOf, r as translationPair, s as suggestThemes, u as isMessage, v as InvalidDataError, w as emptyState, x as isoWeek, y as NotFoundError } from "./chunks/translate-CM6Phtg_.js";
+import { C as toLocalDate, S as isoWeek, T as emptyState, _ as parseState, b as NotFoundError, c as version, g as isDue, l as DEFAULT_SETTINGS, m as progressOf, p as Coach, r as translationPair, s as suggestThemes, u as isMessage, v as CorruptDataError, y as InvalidDataError } from "./chunks/translate-DvfZknmj.js";
 //#region src/shared/dev-hosts.ts
 /**
 * Local hosts the e2e build (and unit tests) accept in place of labs.google. Production builds define
@@ -874,7 +874,7 @@ function createRouter(deps) {
 //#endregion
 //#region src/background/bridge.ts
 /**
-* The local langcoach MCP server (loopback only; see docs/superpowers/plans/2026-11-09-lll-bridge.md).
+* The local langcoach MCP server (loopback only, token-paired; protocol in packages/mcp/src/bridge.ts).
 * The e2e build talks to a stub on another port, so tests never reach a real agent's data on this machine.
 */
 var BRIDGE_ORIGIN = "http://127.0.0.1:47821";

package/extension/chunks/{translate-CM6Phtg_.js → translate-DvfZknmj.js}

@@ -7499,7 +7499,7 @@ function progressOf(state, now) {
 }
 //#endregion
 //#region ../../packages/core/src/coach.ts
-var LEVELS = [
+var LEVELS$1 = [
 	"A1",
 	"A2",
 	"B1",
@@ -7602,7 +7602,7 @@ var Coach = class {
 		if (input.dailyGoalXp !== void 0 && !DAILY_GOALS.includes(input.dailyGoalXp)) throw new InvalidDataError(`dailyGoalXp must be one of ${DAILY_GOALS.join(", ")}`);
 		if (blank(input.nativeLanguage)) throw new InvalidDataError("nativeLanguage must be a non-empty string");
 		if (blank(input.targetLanguage)) throw new InvalidDataError("targetLanguage must be a non-empty string");
-		if (!LEVELS.includes(input.level)) throw new InvalidDataError(`level must be one of ${LEVELS.join(", ")}`);
+		if (!LEVELS$1.includes(input.level)) throw new InvalidDataError(`level must be one of ${LEVELS$1.join(", ")}`);
 		if (typeof input.goal !== "string") throw new InvalidDataError("goal must be a string");
 		if (!intIn(input.minutesPerDay, 5, 180)) throw new InvalidDataError("minutesPerDay must be an integer from 5 to 180");
 		if (!intIn(input.daysPerWeek, 1, 7)) throw new InvalidDataError("daysPerWeek must be an integer from 1 to 7");
@@ -8143,6 +8143,61 @@ var Coach = class {
 		};
 	}
 };
+var LEVELS = [
+	0,
+	50,
+	150,
+	300,
+	500,
+	800,
+	1200,
+	1700,
+	2400,
+	3300
+].map((minXp, i) => ({
+	level: i + 1,
+	minXp,
+	key: `level${i + 1}`
+}));
+function levelFor(totalXp) {
+	const xp = Number.isFinite(totalXp) ? Math.max(0, totalXp) : 0;
+	let i = 0;
+	while (i + 1 < LEVELS.length && xp >= LEVELS[i + 1].minXp) i++;
+	const cur = LEVELS[i];
+	const next = LEVELS[i + 1];
+	if (!next) return {
+		...cur,
+		nextMinXp: null,
+		progress: 1,
+		toNext: 0
+	};
+	const span = next.minXp - cur.minXp;
+	return {
+		...cur,
+		nextMinXp: next.minXp,
+		progress: Math.min(1, (xp - cur.minXp) / span),
+		toNext: next.minXp - xp
+	};
+}
+Object.freeze({
+	paper: "#faf7f2",
+	rule: "#efe7da",
+	border: "#eadfcd",
+	shadow: "0 3px 0 #eadfcd",
+	streakTile: "#fff1e0",
+	wordsTile: "#eef6e8",
+	sticker: "#fde68a",
+	stickerRotate: "-6deg",
+	xpFrom: "#fb923c",
+	xpTo: "#facc15",
+	learnedBg: "#dcfce7",
+	learnedFg: "#166534",
+	weakBg: "#ffe4e6",
+	weakFg: "#9f1239",
+	radius: "14px",
+	serif: "Georgia, \"Times New Roman\", serif",
+	sans: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"
+});
 //#endregion
 //#region src/shared/messages.ts
 var DEFAULT_SETTINGS = {
@@ -8189,7 +8244,7 @@ async function send(msg) {
 }
 //#endregion
 //#region public/manifest.json
-var version = "0.3.0";
+var version = "0.4.1";
 //#endregion
 //#region src/lib/themes.ts
 var GOALS = [
@@ -9109,4 +9164,4 @@ function createTranslatorCache(api, getGlobal = globalApi) {
 	};
 }
 //#endregion
-export { DAILY_GOALS as C, toLocalDate as S, CorruptDataError as _, resolveLanguage as a, addDays as b, version as c, send as d, Coach as f, parseState as g, isDue as h, LLL_LANGUAGES as i, DEFAULT_SETTINGS as l, computeStreak as m, nativeLanguageCode as n, GOALS as o, progressOf as p, translationPair as r, suggestThemes as s, createTranslatorCache as t, isMessage as u, InvalidDataError as v, emptyState as w, isoWeek as x, NotFoundError as y };
+export { toLocalDate as C, isoWeek as S, emptyState as T, parseState as _, resolveLanguage as a, NotFoundError as b, version as c, send as d, levelFor as f, isDue as g, computeStreak as h, LLL_LANGUAGES as i, DEFAULT_SETTINGS as l, progressOf as m, nativeLanguageCode as n, GOALS as o, Coach as p, translationPair as r, suggestThemes as s, createTranslatorCache as t, isMessage as u, CorruptDataError as v, DAILY_GOALS as w, addDays as x, InvalidDataError as y };

package/extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extName__",
   "description": "__MSG_extDescription__",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "default_locale": "en",
   "minimum_chrome_version": "116",
   "icons": {

package/extension/sidepanel.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>LangCoach</title>
     <script type="module" crossorigin src="/sidepanel.js"></script>
-    <link rel="modulepreload" crossorigin href="/chunks/translate-CM6Phtg_.js">
-    <link rel="stylesheet" crossorigin href="/assets/sidepanel-DMjVhmRR.css">
+    <link rel="modulepreload" crossorigin href="/chunks/translate-DvfZknmj.js">
+    <link rel="stylesheet" crossorigin href="/assets/sidepanel-BBkB7IY_.css">
   </head>
   <body>
     <div id="app"></div>