taskchef 8.6.2 → 8.7.1

package/src/mcp-app/react/styles.css

@@ -1,18 +1,39 @@
-:root { color-scheme: dark; --taskchef-page-gutter: 12px; }
+/* Fallbacks before the saved desktop palette is applied. */
+:root {
+  color-scheme: dark;
+  --taskchef-page-gutter: 12px;
+  --taskchef-page: light-dark(#fafafa, #212121);
+  --taskchef-surface-muted: light-dark(#f5f5f5, #282828);
+  --taskchef-border: light-dark(#eaeaea, #ffffff1f);
+  --taskchef-text: light-dark(#242424, #dcdcdc);
+  --taskchef-muted: light-dark(#686868, #afafaf);
+  --taskchef-accent: var(--taskchef-text);
+}
+/* The host may set an inline color scheme. The user's choice takes priority. */
+:root[data-taskchef-theme="light"] { color-scheme: light !important; }
+:root[data-taskchef-theme="dark"] { color-scheme: dark !important; }
 html, body, #root { min-width: 0; min-height: 100%; }
 body { background: var(--taskchef-page); }
 .taskchef-app-shell { min-height: 100vh; background: var(--taskchef-page); }
-.taskchef-app-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--taskchef-border); }
-.taskchef-app-header h1 { color: var(--taskchef-accent); font-size: 13px; font-weight: 750; letter-spacing: .025em; line-height: 1.1; text-transform: uppercase; }
-.taskchef-app-header h1 span { color: var(--taskchef-muted); font-weight: 600; }
+.taskchef-app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand filters actions"; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--taskchef-border); }
+.taskchef-app-brand { grid-area: brand; }
+.taskchef-app-actions { grid-area: actions; }
+.taskchef-app-header h1 { color: var(--taskchef-text); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
+.taskchef-app-inline .taskchef-app-header { grid-template-columns: 1fr auto; grid-template-areas: "brand actions"; }
 .taskchef-app-mark { display: block; flex: none; width: 25px; height: 25px; }
-.taskchef-app-main { min-width: 0; padding: 6px 12px 28px; }
+.taskchef-app-main { min-width: 0; padding: 12px 12px 28px; }
+.taskchef-app-version { position: fixed; right: 12px; bottom: 4px; padding: 2px 4px; font-size: 10px; line-height: 14px; color: var(--taskchef-muted); background: var(--taskchef-page); }
 .taskchef-app-main-list { max-width: 624px; margin-inline: auto; }
 .taskchef-app-main .taskchef-toolbar { margin-bottom: 8px; padding-bottom: 10px; }
 .taskchef-app-main .mantine-SegmentedControl-root { max-width: 100%; }
 .taskchef-app-view { width: max-content; }
-.taskchef-app-filters { min-width: 0; width: min(100%, 488px); }
-.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 0; width: 0; min-width: 0; max-width: 240px; }
+.taskchef-app-filters { grid-area: filters; min-width: 0; width: min(100%, 560px); }
+.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 0; min-width: 0; }
+.taskchef-app-filters .taskchef-app-date { flex: 0 0 132px; }
+@media (max-width: 650px) {
+  .taskchef-app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "filters filters"; gap: 8px; }
+  .taskchef-app-filters { width: 100%; }
+}
 .taskchef-app-status { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
 .taskchef-app-status .mantine-SegmentedControl-root { width: max-content; min-width: max-content; }
 .taskchef-app-status .mantine-SegmentedControl-label { padding-inline: 9px; font-size: 11px; white-space: nowrap; }
@@ -28,8 +49,164 @@ body { background: var(--taskchef-page); }
 .taskchef-app-main .taskchef-list-card-footer { align-items: center; }
 .taskchef-app-main .taskchef-board-card { min-height: 140px; }
 @media (max-width: 360px) {
-  .taskchef-app-main { padding-inline: 8px; }
   .taskchef-app-filters { flex-wrap: wrap; }
-  .taskchef-app-filters .mantine-InputWrapper-root { flex-basis: 100%; max-width: none; }
+  .taskchef-app-filters .taskchef-app-search { flex: 1 1 100%; }
+  .taskchef-app-main { padding-inline: 8px; }
   .taskchef-app-main .taskchef-board { grid-auto-columns: min(300px, calc(100% - 18px)); }
 }
+
+.taskchef-scan-info { margin-bottom: 10px; line-height: 1.35; }
+.taskchef-app-diagnostics { margin: 4px 12px; color: var(--taskchef-muted); }
+.taskchef-app-inline { min-height: 0; }
+.taskchef-inline-main { padding: 8px 12px 12px; }
+.taskchef-inline-main .mantine-Button-root { justify-content: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+
+.next-notifications { position: relative; }
+.next-icon-button { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 30px; height: 30px; border: 0; border-radius: 5px; color: var(--taskchef-muted); background: transparent; cursor: pointer; }
+.next-icon-button:hover { background: var(--taskchef-surface-muted); color: var(--taskchef-text); }
+.next-icon-button:focus-visible, .next-notification-panel button:focus-visible, .next-toast button:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
+.next-unread-dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: #e03131; }
+.next-notification-panel { position: fixed; right: 12px; top: 52px; width: min(390px, calc(100vw - 24px)); z-index: 210; border: 1px solid var(--taskchef-border); border-radius: 8px; background: var(--taskchef-surface-muted); box-shadow: var(--taskchef-popup-shadow); }
+.next-notification-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
+.next-notification-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
+.next-notification-controls button { border: 0; border-radius: 4px; padding: 4px 6px; background: transparent; color: var(--taskchef-muted); cursor: pointer; font-size: 12px; }
+.next-notification-controls button[aria-pressed="true"] { color: var(--taskchef-text); background: var(--taskchef-border); }
+.next-notification-controls button:disabled { opacity: .4; cursor: default; }
+.next-notification-list { overflow: auto; max-height: min(55vh, 420px); border-top: 1px solid var(--taskchef-border); }
+.next-notification-empty { text-align: center; padding: 20px 12px; color: var(--taskchef-muted); font-size: 13px; }
+.next-notification-item { border-bottom: 1px solid var(--taskchef-border); }
+.next-notification-unread { border-left: 3px solid #74c0fc; background: var(--taskchef-hover); }
+.next-notification-message, .next-toast-message { width: 100%; text-align: left; border: 0; color: var(--taskchef-text); background: transparent; padding: 12px; cursor: pointer; overflow-wrap: anywhere; }
+.next-notification-message:hover, .next-toast-message:hover { background: var(--taskchef-hover); }
+.next-notification-message strong, .next-toast-message strong { display: block; font-size: 13px; font-weight: 500; }
+.next-notification-message span, .next-toast-message span { display: block; margin-top: 5px; font-size: 12px; color: var(--taskchef-muted); white-space: pre-wrap; }
+.next-notification-message time { display: block; margin-top: 6px; font-size: 11px; color: var(--taskchef-muted); }
+.next-toast-stack { position: fixed; right: 12px; top: 58px; width: min(360px, calc(100vw - 24px)); z-index: 400; display: grid; gap: 8px; pointer-events: none; }
+.next-notification-panel ~ .next-toast-stack { top: auto; bottom: 16px; }
+.next-toast { display: flex; align-items: flex-start; border: 1px solid var(--taskchef-border); border-left: 3px solid #74c0fc; border-radius: 6px; background: var(--taskchef-surface-muted); box-shadow: var(--taskchef-popup-shadow); pointer-events: auto; }
+.next-toast-error, .next-toast-interrupted { border-left-color: #ffa94d; }
+.next-toast-confirmation { border-left-color: #69db7c; }
+.next-toast > .next-icon-button { flex-shrink: 0; margin: 4px; }
+
+.next-project-trigger span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
+.next-project-dropdown { max-width: calc(100vw - 24px); border-radius: 12px; padding: 6px; }
+.next-project-dropdown .mantine-Combobox-search { border: 0; border-bottom: 1px solid var(--taskchef-border); margin-bottom: 5px; }
+.next-project-dropdown .mantine-Combobox-option { border-radius: 8px; padding: 7px 9px; }
+
+.next-project-options { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
+
+.next-project-sort { display: flex; align-items: center; padding-left: 5px; border-left: 1px solid var(--taskchef-border); }
+
+.taskchef-board-card, .taskchef-section { background: var(--taskchef-surface-muted); }
+.taskchef-board-card { background: var(--taskchef-surface); border-color: var(--taskchef-border); box-shadow: var(--taskchef-card-shadow); }
+.taskchef-board-card:hover { border-color: var(--taskchef-border-heavy); }
+.taskchef-board-title { font-size: var(--mantine-font-size-sm); font-weight: 600; line-height: var(--mantine-line-height-sm); }
+.taskchef-board-excerpt { color: var(--taskchef-text); }
+.taskchef-board-project { color: var(--taskchef-muted); }
+.taskchef-reply-cover { background: var(--taskchef-page); }
+
+@media (max-width: 380px) {
+  .taskchef-app-header { grid-template-areas: "brand brand" "actions actions" "filters filters"; }
+  .taskchef-app-inline .taskchef-app-header { grid-template-areas: "brand brand" "actions actions"; }
+  .taskchef-app-actions { justify-self: end; }
+}
+
+.next-appearance { position: relative; }
+.next-appearance-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 220; width: min(300px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--taskchef-border); border-radius: 8px; background: var(--taskchef-surface-muted); color: var(--taskchef-text); box-shadow: var(--taskchef-popup-shadow); }
+.next-appearance-panel h2, .next-appearance-panel h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
+.next-appearance-panel h3 { margin-top: 20px; }
+.next-appearance-theme { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; color: inherit; font: inherit; font-size: 13px; cursor: pointer; background: var(--taskchef-page); border: 1px solid var(--taskchef-border); border-radius: 6px; }
+.next-appearance-theme > svg { margin-left: auto; }
+.next-appearance-theme:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
+.next-appearance-preview { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 500; line-height: 1; border: 1px solid var(--taskchef-border); }
+
+.taskchef-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
+.taskchef-detail-reply, .taskchef-detail-sidebar { min-width: 0; }
+.taskchef-detail-project, .taskchef-detail-activity-row { display: flex; align-items: center; gap: 8px; }
+.taskchef-detail-meta { flex: 1; min-width: 0; }
+.taskchef-detail-project { max-width: 100%; min-width: 0; }
+.taskchef-detail-project svg { flex-shrink: 0; }
+.taskchef-detail-project > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.taskchef-detail-actions { flex-shrink: 0; }
+.taskchef-detail-activity-row > span:first-child { display: flex; flex-shrink: 0; color: var(--mantine-color-dimmed); }
+.taskchef-detail-technical { margin-top: 24px; border-top: 1px solid var(--mantine-color-default-border); padding-top: 12px; }
+.taskchef-detail-technical summary { cursor: pointer; font-size: var(--mantine-font-size-sm); color: var(--mantine-color-dimmed); }
+.taskchef-detail-id { overflow-wrap: anywhere; min-width: 0; }
+@media (max-width: 48em) {
+  .taskchef-detail-layout { display: flex; flex-direction: column; gap: 24px; }
+  .taskchef-detail-sidebar { order: -1; width: 100%; }
+  .taskchef-detail-reply { width: 100%; }
+}
+
+.taskchef-detail-dialog .mantine-ScrollArea-content { min-width: 0; width: 100%; }
+
+.taskchef-app-header .mantine-ActionIcon-root, .next-project-sort .mantine-ActionIcon-root { color: var(--taskchef-muted); }
+.taskchef-detail-dialog .mantine-Modal-title, .taskchef-detail-dialog .mantine-Drawer-title { font-weight: 600; font-size: var(--mantine-font-size-sm); }
+.taskchef-detail-dialog .taskchef-markdown, .taskchef-detail-dialog .mantine-Title-root { font-size: var(--mantine-font-size-sm); }
+.taskchef-detail-dialog .taskchef-markdown :is(h1,h2,h3,h4,h5,h6) { font-size: inherit; }
+.taskchef-detail-usage { width: 100%; border-collapse: collapse; font-size: var(--mantine-font-size-sm); }
+.taskchef-detail-usage th, .taskchef-detail-usage td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--mantine-color-default-border); }
+.taskchef-detail-usage th { font-weight: 500; }
+
+.taskchef-detail-usage td, .taskchef-detail-usage thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Keep Mantine surfaces and typography on the same palette, including portal menus. */
+:root[data-taskchef-palette] {
+  --mantine-font-family: var(--taskchef-font);
+  --mantine-font-family-headings: var(--taskchef-font);
+  --mantine-font-family-monospace: var(--taskchef-code-font);
+  --mantine-color-body: var(--taskchef-page);
+  --mantine-color-text: var(--taskchef-text);
+  --mantine-color-dimmed: var(--taskchef-muted);
+  --mantine-color-default: var(--taskchef-surface);
+  --mantine-color-default-hover: var(--taskchef-hover);
+  --mantine-color-default-color: var(--taskchef-text);
+  --mantine-color-default-border: var(--taskchef-border);
+  --mantine-color-placeholder: var(--taskchef-muted);
+  --mantine-primary-color-filled: var(--taskchef-text);
+  --mantine-primary-color-filled-hover: var(--taskchef-muted);
+  --mantine-primary-color-light: var(--taskchef-hover);
+  --mantine-primary-color-light-hover: var(--taskchef-hover);
+  --mantine-primary-color-light-color: var(--taskchef-text);
+  --mantine-color-anchor: var(--taskchef-link);
+}
+:root[data-taskchef-palette] .mantine-Input-input { background: var(--taskchef-surface-muted); color: var(--taskchef-text); border-color: var(--taskchef-border); }
+:root[data-taskchef-palette] .mantine-Input-input:focus-within { border-color: var(--taskchef-focus); }
+:root[data-taskchef-palette] :is(.mantine-Modal-content, .mantine-Modal-header, .mantine-Drawer-content, .mantine-Drawer-header, .mantine-Combobox-dropdown, .mantine-Popover-dropdown, .mantine-Menu-dropdown) { background: var(--taskchef-elevated); color: var(--taskchef-text); border-color: var(--taskchef-border); }
+:root[data-taskchef-palette] .mantine-SegmentedControl-root { background: var(--taskchef-page); }
+:root[data-taskchef-palette] .mantine-SegmentedControl-indicator { background: var(--taskchef-surface-muted); border: 1px solid var(--taskchef-border); box-shadow: none; }
+:root[data-taskchef-palette] .mantine-SegmentedControl-label { color: var(--taskchef-muted); }
+:root[data-taskchef-palette] .mantine-SegmentedControl-label[data-active] { color: var(--taskchef-text); }
+:root[data-taskchef-palette] .taskchef-turn-prompt { background: var(--taskchef-prompt); color: var(--taskchef-prompt-text); }
+:root[data-taskchef-palette] .taskchef-task-row { background: var(--taskchef-surface); }
+:root[data-taskchef-palette] .taskchef-task-row:hover { border-color: var(--taskchef-border-heavy); }
+:root[data-taskchef-palette] .taskchef-markdown a { color: var(--taskchef-link); }
+:root[data-taskchef-palette] .taskchef-task-menu { background: var(--taskchef-elevated); }
+.next-theme-list { max-height: min(430px, calc(100dvh - 220px)); overflow-y: auto; display: grid; gap: 4px; padding: 2px; }
+.next-theme-group { padding: 12px 8px 6px; font-size: 12px; color: var(--taskchef-muted); }
+.next-appearance-theme { background: transparent; border-color: transparent; }
+.next-appearance-theme:hover, .next-appearance-theme[aria-checked="true"] { background: var(--taskchef-hover); }
+.next-appearance-panel { background: var(--taskchef-elevated); }
+
+:root[data-taskchef-palette] .mantine-Button-root[data-variant="filled"] { color: var(--taskchef-surface); }
+:root[data-taskchef-palette] .taskchef-board-card:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
+
+:root[data-taskchef-palette] body { font-family: var(--taskchef-font); }
+:root[data-taskchef-palette] .taskchef-markdown { font-family: var(--taskchef-content-font); }
+:root[data-taskchef-palette] :is(.taskchef-markdown code, .taskchef-markdown pre, .taskchef-mono, .taskchef-code-panel) { font-family: var(--taskchef-code-font); }
+
+/* Navigation titles stay neutral; external links use the preset accent. */
+:root[data-taskchef-palette] :is(.taskchef-brand-title, .taskchef-title-button:hover) { color: var(--taskchef-text); }
+:root[data-taskchef-palette] :is(.taskchef-title-button, .taskchef-github-link):focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
+:root[data-taskchef-palette] a.taskchef-status-pr-title { color: var(--taskchef-link); }
+:root[data-taskchef-palette] .taskchef-pending-questions button.mantine-Anchor-root { color: var(--taskchef-text); }
+.taskchef-pending-questions { margin: 20px 0; padding: 16px; border: 1px solid var(--taskchef-border-heavy); border-radius: 20px; background: var(--taskchef-surface-muted); }
+.taskchef-question-header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--taskchef-muted); font-size: 12px; font-weight: 400; }
+.taskchef-question-header svg { flex: none; }
+.taskchef-pending-questions ol { list-style: none; padding: 0; margin: 14px 0 0; }
+.taskchef-pending-questions li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; }
+.taskchef-question-number { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--taskchef-border-heavy); border-radius: 5px; background: var(--taskchef-hover); color: var(--taskchef-muted); font-size: 12px; line-height: 1; }
+.taskchef-question-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
+.taskchef-question-footer button.mantine-Anchor-root { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--taskchef-border-heavy); border-radius: 16px; font-size: 12px; text-decoration: none; }
+.taskchef-question-footer button.mantine-Anchor-root:hover { background: var(--taskchef-hover); text-decoration: none; }
+.taskchef-question-footer button.mantine-Anchor-root:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }

package/src/mcp-app/react/themes.test.ts

@@ -0,0 +1,34 @@
+import { afterEach, expect, test } from "vitest";
+import { VISUAL_THEMES, visualTheme, savedVisualTheme, themeVariables, contrastRatio } from "./themes";
+afterEach(() => localStorage.clear());
+test("native presets retain their supported appearances", () => {
+  expect(VISUAL_THEMES).toHaveLength(30);
+  expect(Object.keys(visualTheme("codex", "light").variants)).toEqual(["light", "dark"]);
+  expect(visualTheme("dracula", "light").id).toBe("chatgpt");
+  expect(visualTheme("proof", "dark").id).toBe("chatgpt");
+  expect(visualTheme("unknown", "dark").id).toBe("chatgpt");
+});
+test("each appearance restores its own palette with a safe default", () => {
+  localStorage.setItem("taskchef.app.visualTheme", "default");
+  expect(savedVisualTheme("light")).toBe("chatgpt");
+  localStorage.setItem("taskchef.app.visualTheme.light", "catppuccin");
+  localStorage.setItem("taskchef.app.visualTheme.dark", "nord");
+  expect(savedVisualTheme("light")).toBe("catppuccin");
+  expect(savedVisualTheme("dark")).toBe("nord");
+});
+test("all shipped variants supply readable text and links on every UI surface", () => {
+  for (const theme of VISUAL_THEMES) for (const appearance of ["light", "dark"] as const) {
+    if (!theme.variants[appearance]) continue;
+    const values = themeVariables(theme, appearance);
+    for (const role of ["text", "muted", "link"]) for (const surface of ["page", "surface", "surface-muted", "elevated"]) {
+      expect(contrastRatio(values[`--taskchef-${role}`], values[`--taskchef-${surface}`]), `${theme.id}/${appearance}/${role}/${surface}`).toBeGreaterThanOrEqual(4.5);
+    }
+    expect(values["--taskchef-surface"]).toBe(theme.variants[appearance]!.surface);
+  }
+});
+
+test("native font overrides retain system fallbacks", () => {
+  expect(themeVariables(visualTheme("matrix", "dark"), "dark")["--taskchef-font"]).toContain("ui-monospace");
+  expect(themeVariables(visualTheme("linear", "light"), "light")["--taskchef-font"]).toContain('Inter, -apple-system');
+  expect(themeVariables(visualTheme("vercel", "dark"), "dark")["--taskchef-code-font"]).toContain('"Geist Mono"');
+});

package/src/mcp-app/react/themes.ts

@@ -0,0 +1,112 @@
+// Palette seeds from the installed Codex desktop theme registry (October 2026).
+// Declarative UI colors and font families; no desktop implementation or syntax themes are bundled.
+export type Appearance = "light" | "dark";
+export interface PaletteSeed { surface: string; ink: string; accent: string; contrast: number; diffAdded: string; diffRemoved: string; skill: string; uiFont?: string; codeFont?: string; contentFont?: string; }
+export interface VisualTheme { id: string; label: string; variants: Partial<Record<Appearance, PaletteSeed>>; }
+export const VISUAL_THEMES: VisualTheme[] = [
+  {"id": "chatgpt", "label": "ChatGPT", "variants": {"light": {"surface": "#fcfcfc", "ink": "#0d0d0d", "accent": "#3a83f7", "contrast": 45, "diffAdded": "#00a240", "diffRemoved": "#ba2623", "skill": "#924ff7"}, "dark": {"surface": "#000000", "ink": "#ededed", "accent": "#3a83f7", "contrast": 60, "diffAdded": "#40c977", "diffRemoved": "#fa423e", "skill": "#ad7bf9"}}},
+  {"id": "ayu", "label": "Ayu", "variants": {"dark": {"surface": "#10141c", "ink": "#bfbdb6", "accent": "#e6b450", "contrast": 60, "diffAdded": "#70bf56", "diffRemoved": "#f26d78", "skill": "#d0a1ff"}}},
+  {"id": "catppuccin", "label": "Catppuccin", "variants": {"light": {"surface": "#eff1f5", "ink": "#4c4f69", "accent": "#8839ef", "contrast": 45, "diffAdded": "#40a02b", "diffRemoved": "#d20f39", "skill": "#8839ef"}, "dark": {"surface": "#1e1e2e", "ink": "#cdd6f4", "accent": "#cba6f7", "contrast": 60, "diffAdded": "#a6e3a1", "diffRemoved": "#f38ba8", "skill": "#cba6f7"}}},
+  {"id": "absolutely", "label": "Absolutely", "variants": {"light": {"surface": "#f9f9f7", "ink": "#2d2d2b", "accent": "#cc7d5e", "contrast": 45, "diffAdded": "#00c853", "diffRemoved": "#ff5f38", "skill": "#cc7d5e"}, "dark": {"surface": "#2d2d2b", "ink": "#f9f9f7", "accent": "#cc7d5e", "contrast": 60, "diffAdded": "#00c853", "diffRemoved": "#ff5f38", "skill": "#cc7d5e"}}},
+  {"id": "codex", "label": "Codex", "variants": {"light": {"surface": "#ffffff", "ink": "#0d0d0d", "accent": "#0169cc", "contrast": 45, "diffAdded": "#00a240", "diffRemoved": "#e02e2a", "skill": "#751ed9"}, "dark": {"surface": "#111111", "ink": "#fcfcfc", "accent": "#0169cc", "contrast": 60, "diffAdded": "#00a240", "diffRemoved": "#e02e2a", "skill": "#b06dff"}}},
+  {"id": "dracula", "label": "Dracula", "variants": {"dark": {"surface": "#282a36", "ink": "#f8f8f2", "accent": "#ff79c6", "contrast": 60, "diffAdded": "#50fa7b", "diffRemoved": "#ff5555", "skill": "#ff79c6"}}},
+  {"id": "everforest", "label": "Everforest", "variants": {"light": {"surface": "#fdf6e3", "ink": "#5c6a72", "accent": "#93b259", "contrast": 45, "diffAdded": "#8da101", "diffRemoved": "#f85552", "skill": "#df69ba"}, "dark": {"surface": "#2d353b", "ink": "#d3c6aa", "accent": "#a7c080", "contrast": 60, "diffAdded": "#a7c080", "diffRemoved": "#e67e80", "skill": "#d699b6"}}},
+  {"id": "github", "label": "GitHub", "variants": {"light": {"surface": "#ffffff", "ink": "#1f2328", "accent": "#0969da", "contrast": 45, "diffAdded": "#1a7f37", "diffRemoved": "#cf222e", "skill": "#8250df"}, "dark": {"surface": "#0d1117", "ink": "#e6edf3", "accent": "#1f6feb", "contrast": 60, "diffAdded": "#3fb950", "diffRemoved": "#f85149", "skill": "#bc8cff"}}},
+  {"id": "gruvbox", "label": "Gruvbox", "variants": {"light": {"surface": "#fbf1c7", "ink": "#3c3836", "accent": "#458588", "contrast": 45, "diffAdded": "#3c3836", "diffRemoved": "#cc241d", "skill": "#b16286"}, "dark": {"surface": "#282828", "ink": "#ebdbb2", "accent": "#458588", "contrast": 60, "diffAdded": "#ebdbb2", "diffRemoved": "#cc241d", "skill": "#b16286"}}},
+  {"id": "linear", "label": "Linear", "variants": {"light": {"surface": "#fcfcfd", "ink": "#1b1b1b", "accent": "#5e6ad2", "contrast": 45, "diffAdded": "#52a450", "diffRemoved": "#c94446", "skill": "#8160d8", "uiFont": "Inter"}, "dark": {"surface": "#0f0f11", "ink": "#e3e4e6", "accent": "#606acc", "contrast": 60, "diffAdded": "#69c967", "diffRemoved": "#ff7e78", "skill": "#c2a1ff", "uiFont": "Inter"}}},
+  {"id": "lobster", "label": "Lobster", "variants": {"dark": {"surface": "#111827", "ink": "#e4e4e7", "accent": "#ff5c5c", "contrast": 60, "diffAdded": "#22c55e", "diffRemoved": "#ff5c5c", "skill": "#3b82f6", "uiFont": "Satoshi"}}},
+  {"id": "material", "label": "Material", "variants": {"dark": {"surface": "#212121", "ink": "#eeffff", "accent": "#80cbc4", "contrast": 60, "diffAdded": "#c3e88d", "diffRemoved": "#f07178", "skill": "#c792ea"}}},
+  {"id": "matrix", "label": "Matrix", "variants": {"dark": {"surface": "#040805", "ink": "#b8ffca", "accent": "#1eff5a", "contrast": 60, "diffAdded": "#1eff5a", "diffRemoved": "#fa423e", "skill": "#1eff5a", "uiFont": "ui-monospace, \"SFMono-Regular\", \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"}}},
+  {"id": "monokai", "label": "Monokai", "variants": {"dark": {"surface": "#272822", "ink": "#f8f8f2", "accent": "#99947c", "contrast": 60, "diffAdded": "#86b42b", "diffRemoved": "#c4265e", "skill": "#8c6bc8"}}},
+  {"id": "night-owl", "label": "Night Owl", "variants": {"dark": {"surface": "#011627", "ink": "#d6deeb", "accent": "#44596b", "contrast": 60, "diffAdded": "#c5e478", "diffRemoved": "#ef5350", "skill": "#c792ea"}}},
+  {"id": "nord", "label": "Nord", "variants": {"dark": {"surface": "#2e3440", "ink": "#d8dee9", "accent": "#88c0d0", "contrast": 60, "diffAdded": "#a3be8c", "diffRemoved": "#bf616a", "skill": "#b48ead"}}},
+  {"id": "notion", "label": "Notion", "variants": {"light": {"surface": "#ffffff", "ink": "#37352f", "accent": "#3183d8", "contrast": 45, "diffAdded": "#008000", "diffRemoved": "#a31515", "skill": "#0000ff"}, "dark": {"surface": "#191919", "ink": "#d9d9d8", "accent": "#3183d8", "contrast": 60, "diffAdded": "#4ec9b0", "diffRemoved": "#fa423e", "skill": "#3183d8"}}},
+  {"id": "og", "label": "OG", "variants": {"dark": {"surface": "#343541", "ink": "#d1d5db", "accent": "#10a37f", "contrast": 60, "diffAdded": "#65c99a", "diffRemoved": "#f28b82", "skill": "#b4a1e5", "uiFont": "Arial, sans-serif", "contentFont": "Arial, sans-serif"}}},
+  {"id": "oscurange", "label": "Oscurange", "variants": {"dark": {"surface": "#0b0b0f", "ink": "#e6e6e6", "accent": "#f9b98c", "contrast": 60, "diffAdded": "#40c977", "diffRemoved": "#fa423e", "skill": "#479ffa"}}},
+  {"id": "one", "label": "One", "variants": {"light": {"surface": "#fafafa", "ink": "#383a42", "accent": "#526fff", "contrast": 45, "diffAdded": "#3bba54", "diffRemoved": "#e45649", "skill": "#526fff"}, "dark": {"surface": "#282c34", "ink": "#abb2bf", "accent": "#4d78cc", "contrast": 60, "diffAdded": "#8cc265", "diffRemoved": "#e05561", "skill": "#c162de"}}},
+  {"id": "proof", "label": "Proof", "variants": {"light": {"surface": "#f5f3ed", "ink": "#2f312d", "accent": "#3d755d", "contrast": 45, "diffAdded": "#3d755d", "diffRemoved": "#ba2623", "skill": "#5f6ac2"}}},
+  {"id": "raycast", "label": "Raycast", "variants": {"light": {"surface": "#ffffff", "ink": "#030303", "accent": "#ff6363", "contrast": 45, "diffAdded": "#006b4f", "diffRemoved": "#b12424", "skill": "#9a1b6e", "uiFont": "Inter", "codeFont": "\"Jetbrains Mono\""}, "dark": {"surface": "#101010", "ink": "#fefefe", "accent": "#ff6363", "contrast": 60, "diffAdded": "#59d499", "diffRemoved": "#ff6363", "skill": "#cf2f98", "uiFont": "Inter", "codeFont": "\"Jetbrains Mono\""}}},
+  {"id": "rose-pine", "label": "Rose Pine", "variants": {"light": {"surface": "#faf4ed", "ink": "#575279", "accent": "#d7827e", "contrast": 45, "diffAdded": "#56949f", "diffRemoved": "#797593", "skill": "#907aa9"}, "dark": {"surface": "#232136", "ink": "#e0def4", "accent": "#ea9a97", "contrast": 60, "diffAdded": "#9ccfd8", "diffRemoved": "#908caa", "skill": "#c4a7e7"}}},
+  {"id": "sentry", "label": "Sentry", "variants": {"dark": {"surface": "#2d2935", "ink": "#e6dff9", "accent": "#7055f6", "contrast": 60, "diffAdded": "#8ee6d7", "diffRemoved": "#fa423e", "skill": "#7055f6"}}},
+  {"id": "solarized", "label": "Solarized", "variants": {"light": {"surface": "#fdf6e3", "ink": "#657b83", "accent": "#b58900", "contrast": 45, "diffAdded": "#859900", "diffRemoved": "#dc322f", "skill": "#d33682"}, "dark": {"surface": "#002b36", "ink": "#839496", "accent": "#d30102", "contrast": 60, "diffAdded": "#859900", "diffRemoved": "#dc322f", "skill": "#d33682"}}},
+  {"id": "tokyo-night", "label": "Tokyo Night", "variants": {"dark": {"surface": "#1a1b26", "ink": "#a9b1d6", "accent": "#3d59a1", "contrast": 60, "diffAdded": "#449dab", "diffRemoved": "#914c54", "skill": "#9d7cd8"}}},
+  {"id": "temple", "label": "Temple", "variants": {"dark": {"surface": "#02120c", "ink": "#c7e6da", "accent": "#e4f222", "contrast": 60, "diffAdded": "#40c977", "diffRemoved": "#fa423e", "skill": "#e4f222"}}},
+  {"id": "vercel", "label": "Vercel", "variants": {"light": {"surface": "#ffffff", "ink": "#171717", "accent": "#006aff", "contrast": 40, "diffAdded": "#28A948", "diffRemoved": "#EB001D", "skill": "#A100F8", "uiFont": "Geist, Inter", "codeFont": "\"Geist Mono\", ui-monospace, \"SFMono-Regular\""}, "dark": {"surface": "#000000", "ink": "#ededed", "accent": "#006efe", "contrast": 50, "diffAdded": "#00AD3A", "diffRemoved": "#F13342", "skill": "#9540D5", "uiFont": "Geist, Inter", "codeFont": "\"Geist Mono\", ui-monospace, \"SFMono-Regular\""}}},
+  {"id": "vscode-plus", "label": "VS Code Plus", "variants": {"light": {"surface": "#ffffff", "ink": "#000000", "accent": "#007acc", "contrast": 45, "diffAdded": "#008000", "diffRemoved": "#ee0000", "skill": "#0000ff"}, "dark": {"surface": "#1e1e1e", "ink": "#d4d4d4", "accent": "#007acc", "contrast": 60, "diffAdded": "#369432", "diffRemoved": "#f44747", "skill": "#000080"}}},
+  {"id": "xcode", "label": "Xcode", "variants": {"light": {"surface": "#ffffff", "ink": "#000000", "accent": "#0e0eff", "contrast": 45, "diffAdded": "#00a240", "diffRemoved": "#c41a16", "skill": "#0e0eff", "codeFont": "\"SFMono-Regular\""}, "dark": {"surface": "#1f1f24", "ink": "#ffffff", "accent": "#5482ff", "contrast": 60, "diffAdded": "#67b7a4", "diffRemoved": "#fc6a5d", "skill": "#5482ff", "codeFont": "\"SFMono-Medium\""}}}
+];
+
+export function visualTheme(id: string | null, appearance: Appearance): VisualTheme {
+  return VISUAL_THEMES.find(item => item.id === id && item.variants[appearance]) ?? VISUAL_THEMES[0];
+}
+export const VISUAL_THEME_KEY = "taskchef.app.visualTheme";
+export function savedVisualTheme(appearance: Appearance): string {
+  try { return visualTheme(window.localStorage.getItem(`${VISUAL_THEME_KEY}.${appearance}`), appearance).id; }
+  catch { return "chatgpt"; }
+}
+
+function mix(from: string, to: string, amount: number): string {
+  const channels = [1, 3, 5].map(offset => {
+    const start = parseInt(from.slice(offset, offset + 2), 16);
+    return Math.round(start + (parseInt(to.slice(offset, offset + 2), 16) - start) * amount).toString(16).padStart(2, "0");
+  });
+  return `#${channels.join("")}`;
+}
+function alpha(color: string, opacity: number): string { return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`; }
+export function contrastRatio(foreground: string, background: string): number {
+  const luminance = (color: string) => [1, 3, 5].reduce((sum, offset, index) => {
+    const value = parseInt(color.slice(offset, offset + 2), 16) / 255;
+    return sum + (value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4) * [.2126, .7152, .0722][index];
+  }, 0);
+  const values = [luminance(foreground), luminance(background)].sort((a, b) => b - a);
+  return (values[0] + .05) / (values[1] + .05);
+}
+function readable(color: string, backgrounds: string[], dark: boolean): string {
+  for (let amount = 0; amount <= 100; amount++) {
+    const adjusted = mix(color, dark ? "#ffffff" : "#000000", amount / 100);
+    if (backgrounds.every(background => contrastRatio(adjusted, background) >= 4.5)) return adjusted;
+  }
+  return dark ? "#ffffff" : "#000000";
+}
+export function themeVariables(theme: VisualTheme, appearance: Appearance): Record<string, string> {
+  const seed = theme.variants[appearance]!;
+  const { surface, ink, accent } = seed;
+  const dark = appearance === "dark";
+  const baseline = dark ? 60 : 45;
+  // Codex increases surface separation and foreground opacity with contrast.
+  const rawContrast = seed.contrast / 100 + (seed.contrast - baseline) / 60 * .7;
+  const contrast = seed.contrast <= baseline ? rawContrast : baseline / 100 + (rawContrast - baseline / 100) * 2;
+  const page = mix(surface, dark ? "#000000" : ink, (dark ? .16 : .04) + (seed.contrast - baseline) * (dark ? .0015 : .0012));
+  const control = mix(surface, dark ? ink : "#ffffff", dark ? .06 + contrast * .05 : .09 + contrast * .04);
+  const elevated = mix(surface, dark ? ink : "#ffffff", dark ? .08 + contrast * .08 : .16 + contrast * .12);
+  const backgrounds = [page, surface, control, elevated];
+  const text = readable(ink, backgrounds, dark);
+  const muted = readable(mix(surface, ink, .65 + contrast * .1), backgrounds, dark);
+  const link = readable(dark ? mix(accent, "#ffffff", .3 + contrast * .15) : accent, backgrounds, dark);
+  const systemFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+  const codeFallback = 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace';
+  return {
+    "--taskchef-font": seed.uiFont ? `${seed.uiFont}, ${systemFont}` : systemFont,
+    "--taskchef-content-font": seed.contentFont ? `${seed.contentFont}, ${systemFont}` : seed.uiFont ? `${seed.uiFont}, ${systemFont}` : systemFont,
+    "--taskchef-code-font": seed.codeFont ? `${seed.codeFont}, ${codeFallback}` : codeFallback,
+    "--taskchef-page": page,
+    "--taskchef-surface": surface,
+    "--taskchef-surface-muted": control,
+    "--taskchef-elevated": elevated,
+    "--taskchef-border": alpha(ink, .06 + contrast * .04),
+    "--taskchef-border-heavy": alpha(ink, (dark ? .12 : .09) + contrast * .06),
+    "--taskchef-text": text,
+    "--taskchef-muted": muted,
+    "--taskchef-accent": link,
+    "--taskchef-link": link,
+    "--taskchef-focus": link,
+    "--taskchef-hover": alpha(ink, dark ? .05 + contrast * .03 : .08 + contrast * .04),
+    "--taskchef-prompt": theme.id === "chatgpt" ? (dark ? "#323232d9" : "#e9e9e980") : alpha(ink, .05),
+    "--taskchef-prompt-text": text,
+    "--taskchef-popup-shadow": dark ? "0 8px 32px #0006" : "0 8px 24px #00000014",
+    "--taskchef-card-shadow": dark ? "none" : "0 1px 3px #00000008",
+    "--taskchef-success": seed.diffAdded,
+    "--taskchef-error": seed.diffRemoved,
+    "--taskchef-skill": seed.skill,
+  };
+}