@tenyokjs/devdevian-cli 0.4.1-alpha.1 → 0.5.1-alpha.1

package/lib/tui.mjs

@@ -3,6 +3,7 @@ import { render, Box, Text, useApp, useInput, useWindowSize } from "ink";
 import { randomBytes } from "node:crypto";
 import { homedir, hostname } from "node:os";
 import { workspaceRoot, reviewSource } from "./workspace.mjs";
+import { DeviPanel } from "./devi.mjs";
 import { WorkspacePicker } from "./picker.mjs";
 import { DraftStore, draftIdentity } from "./drafts.mjs";
 import { spawn } from "node:child_process";
@@ -32,7 +33,15 @@ import {
   notificationRoute,
 } from "./tui-data.mjs";
 import { basename } from "node:path";
-import { colors } from "./theme.mjs";
+import { themeFor, ThemeContext, useTheme } from "./theme.mjs";
+import {
+  appearanceFields,
+  defaultAppearance,
+  loadAppearance,
+  saveAppearance,
+  normalizeAppearance,
+  appearanceFlags,
+} from "./appearance.mjs";
 import { liveLoop, anchoredIndex } from "./live.mjs";
 import { contextActions } from "./context-actions.mjs";
 import { editExternal } from "./external-editor.mjs";
@@ -83,6 +92,7 @@ function openBrowser(url) {
   child.unref();
 }
 function fieldsFor(form) {
+  if (form.kind === "appearance") return appearanceFields;
   if (form.kind === "publication")
     return [
       {
@@ -190,10 +200,16 @@ function fieldsFor(form) {
     },
   ];
 }
-function TextLine({ text, width, color = colors.text, bold = false }) {
-  return h(Text, { color, bold, wrap: "truncate" }, clip(text, width));
+function TextLine({ text, width, color, bold = false }) {
+  const colors = useTheme();
+  return h(
+    Text,
+    { color: color || colors.text, bold, wrap: "truncate" },
+    clip(text, width),
+  );
 }
 function FrameRows({ rows, width, height, offset = 0 }) {
+  const colors = useTheme();
   return h(
     Box,
     { flexDirection: "column", height, overflow: "hidden" },
@@ -226,6 +242,7 @@ function FrameRows({ rows, width, height, offset = 0 }) {
   );
 }
 function InputText({ value, cursor, width, height = 1 }) {
+  const colors = useTheme();
   const result = cursorLines(value, cursor, width),
     start = Math.max(0, result.line - height + 1);
   return h(
@@ -244,6 +261,7 @@ function InputText({ value, cursor, width, height = 1 }) {
   );
 }
 function FormView({ form, active, cursor, width, height }) {
+  const colors = useTheme();
   const fields = fieldsFor(form),
     rows = [];
   let selectedLine = 0;
@@ -295,14 +313,19 @@ function FormView({ form, active, cursor, width, height }) {
   rows.push({
     text:
       (active === fields.length ? "› " : "  ") +
-      "Preview publication  [Ctrl+S]",
+      (form.kind === "appearance"
+        ? "Save appearance  [Ctrl+S]"
+        : "Preview publication  [Ctrl+S]"),
     color: colors.blue,
     bold: true,
   });
-  const offset = Math.max(0, Math.min(selectedLine - 1, rows.length - height));
+  const offset = Math.max(
+    0,
+    Math.min(selectedLine - (height >= 4 ? 1 : 0), rows.length - height),
+  );
   return h(FrameRows, { rows, width, height, offset });
 }
-function listRows(route, data, index, width) {
+function listRows(route, data, index, width, colors, density = "comfortable") {
   const items = data.items || [];
   return items.flatMap((item, i) => {
     let title = item.title || item.name || "",
@@ -388,21 +411,28 @@ function listRows(route, data, index, width) {
         color: selected ? colors.text : colors.muted,
         selected,
       },
-      { text: "  " + "─".repeat(Math.max(0, width - 4)), color: colors.line },
+      ...(density === "compact"
+        ? []
+        : [
+            {
+              text: "  " + "─".repeat(Math.max(0, width - 4)),
+              color: colors.line,
+            },
+          ]),
     ];
   });
 }
-function documentRows(route, data, width) {
+function documentRows(route, data, width, colors) {
   if (route.view !== "post" || (route.tab && route.tab !== "overview"))
     return contentLines(route, data).flatMap((line) => wrap(line, width));
   const post = data?.post;
   if (!post) return [];
-  const rows = markdownRows(post.body || "", width);
+  const rows = markdownRows(post.body || "", width, colors);
   if (post.review_focus)
     rows.push(
       { text: "" },
       { text: "REVIEW FOCUS", color: colors.purple, bold: true },
-      ...markdownRows(post.review_focus, width),
+      ...markdownRows(post.review_focus, width, colors),
     );
   if (post.code) {
     // Pick a fence longer than any backtick run in the snippet.
@@ -414,7 +444,7 @@ function documentRows(route, data, width) {
     );
     rows.push(
       { text: "" },
-      ...markdownRows(fence + "\n" + post.code + "\n" + fence, width),
+      ...markdownRows(fence + "\n" + post.code + "\n" + fence, width, colors),
     );
   }
   if (post.links?.length)
@@ -431,16 +461,71 @@ function documentRows(route, data, width) {
     });
   return rows;
 }
-function App({ initialConfig, flags, root }) {
+function AppearanceView({ form, active, cursor, width, height }) {
+  const c = useTheme(),
+    wide = width >= 100;
+  return h(
+    Box,
+    { height, overflow: "hidden", gap: wide ? 2 : 0 },
+    h(
+      Box,
+      { width: wide ? width - 36 : width, flexDirection: "column" },
+      h(FormView, {
+        form,
+        active,
+        cursor,
+        width: wide ? width - 36 : width,
+        height,
+      }),
+    ),
+    wide
+      ? h(
+          Box,
+          {
+            width: 34,
+            height,
+            borderStyle: c.frame,
+            borderColor: c.line,
+            paddingX: 1,
+            flexDirection: "column",
+            overflow: "hidden",
+          },
+          h(Text, { color: c.purple, bold: true }, "LIVE PREVIEW"),
+          h(Text, { color: c.muted }, "Only this terminal changes."),
+          h(Text, null, " "),
+          h(
+            Text,
+            { color: c.text, bold: true },
+            "A good conversation starts here",
+          ),
+          h(
+            Text,
+            { color: c.blue, backgroundColor: c.selected },
+            "▸ Your selected conversation",
+          ),
+          h(Text, { color: c.muted }, "Ada · code review · just now"),
+          h(Text, { color: c.green }, "+ ship with confidence"),
+          h(Text, { color: c.red }, "− leave the guesswork behind"),
+          h(Text, null, " "),
+          h(Text, { color: c.purple }, "← → change · Tab next"),
+          h(Text, { color: c.text }, "Ctrl+S save · Esc cancel"),
+          h(Text, { color: c.muted }, "0 restores the default preview"),
+        )
+      : null,
+  );
+}
+function App({ initialConfig, flags, root, initialAppearance }) {
   const { exit, suspendTerminal } = useApp(),
     { columns, rows } = useWindowSize();
+  const [appearance, setAppearance] = useState(initialAppearance.settings);
   const [config, setConfig] = useState(initialConfig),
     [phase, setPhase] = useState(
       initialConfig && !flags.initialLogin ? "checking" : "auth",
     ),
     [user, setUser] = useState(null),
     [device, setDevice] = useState(null),
-    [authVersion, setAuthVersion] = useState(0);
+    [authVersion, setAuthVersion] = useState(0),
+    [booting, setBooting] = useState(true);
   const [route, setRoute] = useState({ view: "feed", page: 1 }),
     [data, setData] = useState(null),
     [loading, setLoading] = useState(false),
@@ -452,7 +537,7 @@ function App({ initialConfig, flags, root }) {
     [command, setCommand] = useState(""),
     [commandCursor, setCommandCursor] = useState(0),
     [error, setError] = useState(""),
-    [notice, setNotice] = useState("");
+    [notice, setNotice] = useState(initialAppearance.warning || "");
   const [form, setForm] = useState(null),
     [field, setField] = useState(0),
     [cursor, setCursor] = useState(0),
@@ -496,9 +581,13 @@ function App({ initialConfig, flags, root }) {
     () => (config ? client(config.origin, config.token) : null),
     [config?.origin, config?.token],
   );
+  const effectiveAppearance =
+    form?.kind === "appearance" ? normalizeAppearance(form.values) : appearance;
+  const colors = themeFor(effectiveAppearance),
+    stride = effectiveAppearance.density === "compact" ? 3 : 4;
   const width = Math.max(1, columns),
     height = Math.max(1, rows - 1),
-    compact = width < 90,
+    compact = width < 90 || effectiveAppearance.sidebar === "hidden",
     sidebar = compact ? 0 : 25,
     bodyHeight = Math.max(1, height - 9),
     contentWidth = Math.max(1, width - sidebar - 6),
@@ -606,6 +695,7 @@ function App({ initialConfig, flags, root }) {
     setPreview(null);
     setDevice(null);
     setUser(null);
+    setBooting(true);
     setReading(null);
     setActionIndex(null);
     setUnread(0);
@@ -629,6 +719,7 @@ function App({ initialConfig, flags, root }) {
     } else setError(problemMessage(e));
   }
   function navigate(next, { replace = false } = {}) {
+    setBooting(false);
     if (!replace)
       history.current.push({
         route,
@@ -786,10 +877,14 @@ function App({ initialConfig, flags, root }) {
     };
   }, []);
   useEffect(() => {
-    if (!loading && !pending && phase !== "pending") return;
+    if (
+      effectiveAppearance.motion === "reduced" ||
+      (!loading && !pending && phase !== "pending")
+    )
+      return;
     const timer = setInterval(() => setTick((v) => (v + 1) % 4), 180);
     return () => clearInterval(timer);
-  }, [loading, pending, phase]);
+  }, [loading, pending, phase, effectiveAppearance.motion]);
   useEffect(() => {
     if (phase !== "checking" || !api) return;
     const controller = new AbortController();
@@ -807,7 +902,7 @@ function App({ initialConfig, flags, root }) {
         if (!controller.signal.aborted) fail(e);
       });
     return () => controller.abort();
-  }, [phase, api]);
+  }, [phase, api, authVersion]);
   useEffect(() => {
     if (phase !== "ready" || !api || form || route.view === "help") return;
     let active = true;
@@ -873,7 +968,10 @@ function App({ initialConfig, flags, root }) {
           if (active) fail(e);
         })
         .finally(() => {
-          if (active) setLoading(false);
+          if (active) {
+            setLoading(false);
+            setBooting(false);
+          }
         });
     return () => {
       active = false;
@@ -905,6 +1003,7 @@ function App({ initialConfig, flags, root }) {
           if (controller.signal.aborted) return;
           resetAccount();
           setConfig(saved);
+          setBooting(true);
           setPhase("checking");
           setNotice("Terminal connected.");
           return;
@@ -944,6 +1043,7 @@ function App({ initialConfig, flags, root }) {
   async function chooseNav(i) {
     const name = navigation[i]?.[0];
     setNavIndex(i);
+    if (name === "appearance") return openAppearance();
     if (name === "ask" || name === "review")
       return composePublication(name === "review" ? "review" : "question");
     if (name === "open")
@@ -959,7 +1059,18 @@ function App({ initialConfig, flags, root }) {
       setCommandCursor(0);
     }
   }
+  function openAppearance() {
+    openForm({
+      kind: "appearance",
+      title: "Appearance",
+      values: { ...appearance },
+    });
+    setNotice(
+      "Live preview · ← → change · Ctrl+S save · Esc cancel · 0 defaults",
+    );
+  }
   function openForm(next) {
+    setBooting(false);
     setForm({
       ...next,
       draftId: next.draftId || randomBytes(32).toString("hex"),
@@ -1123,6 +1234,18 @@ function App({ initialConfig, flags, root }) {
   }
   async function prepare() {
     if (!form) return;
+    if (form.kind === "appearance") {
+      await task(async () => {
+        const saved = await saveAppearance(form.values);
+        setAppearance(saved);
+        setForm(null);
+        setFocus("content");
+        setNotice(
+          "Appearance saved locally. Your account and other devices are unchanged.",
+        );
+      });
+      return;
+    }
     await task(async () => {
       if (
         form.unavailableAudience &&
@@ -1571,6 +1694,10 @@ function App({ initialConfig, flags, root }) {
         );
         return;
       }
+      if (parsed.command === "appearance") {
+        openAppearance();
+        return;
+      }
       if (parsed.command === "open") {
         navigate({ view: "post", id: parsed.arg, tab: "overview", page: 1 });
         return;
@@ -1591,6 +1718,10 @@ function App({ initialConfig, flags, root }) {
     }
   }
   function askQuit() {
+    if (form?.kind === "appearance") {
+      exit();
+      return;
+    }
     if (form) {
       askConfirm(
         "Leave this draft?",
@@ -1650,6 +1781,14 @@ function App({ initialConfig, flags, root }) {
         setDevice(null);
         return;
       }
+      if (phase === "checking") {
+        if (input === "q") exit();
+        else if (error && (keyEvent.return || input === "r" || input === "R")) {
+          setError("");
+          setAuthVersion((v) => v + 1);
+        }
+        return;
+      }
       if (input === "q") exit();
       else if (keyEvent.return && !busy.current) {
         if (phase === "pending" && device) openBrowser(device.verification_uri);
@@ -1677,6 +1816,7 @@ function App({ initialConfig, flags, root }) {
             ? "[deleted — discussion preserved]"
             : reading.body || "",
           contentWidth,
+          colors,
         ),
         maximum = Math.max(0, lines.length - contentHeight);
       if (keyEvent.escape || keyEvent.return || input === " ") {
@@ -1725,6 +1865,17 @@ function App({ initialConfig, flags, root }) {
       return;
     }
     if (form) {
+      if (form.kind === "appearance" && keyEvent.escape) {
+        setForm(null);
+        setFocus("content");
+        setNotice("Appearance preview cancelled. Saved preferences kept.");
+        return;
+      }
+      if (form.kind === "appearance" && input === "0") {
+        setForm((old) => ({ ...old, values: { ...defaultAppearance } }));
+        setNotice("Default preview restored. Ctrl+S saves; Esc cancels.");
+        return;
+      }
       if (keyEvent.ctrl && input === "e") {
         externalEdit();
         return;
@@ -1775,20 +1926,20 @@ function App({ initialConfig, flags, root }) {
           keyEvent.downArrow
         ) {
           const opts = active.options,
-            i = Math.max(
+            step = keyEvent.leftArrow || keyEvent.upArrow ? -1 : 1;
+          setForm((old) => {
+            const i = Math.max(
               0,
               opts.findIndex(
                 (item) =>
-                  String(item[0]) === String(form.values[active.key] || ""),
+                  String(item[0]) === String(old.values[active.key] || ""),
               ),
-            ),
-            step = keyEvent.leftArrow || keyEvent.upArrow ? -1 : 1,
-            next = opts[(i + step + opts.length) % opts.length];
-          if (next)
-            setForm((old) => ({
-              ...old,
-              values: { ...old.values, [active.key]: next[0] },
-            }));
+            );
+            const next = opts[(i + step + opts.length) % opts.length];
+            return next
+              ? { ...old, values: { ...old.values, [active.key]: next[0] } }
+              : old;
+          });
         } else if (keyEvent.return) changeField(field + 1);
         return;
       }
@@ -1862,6 +2013,10 @@ function App({ initialConfig, flags, root }) {
       else if (keyEvent.rightArrow) setFocus("content");
       return;
     }
+    if (input === ",") {
+      openAppearance();
+      return;
+    }
     if (input === "x" || input === "X" || input === "?") {
       setActionIndex(0);
       return;
@@ -1948,13 +2103,13 @@ function App({ initialConfig, flags, root }) {
     ) {
       const step =
           keyEvent.pageUp || keyEvent.pageDown
-            ? Math.max(1, Math.floor(contentHeight / 4))
+            ? Math.max(1, Math.floor(contentHeight / stride))
             : 1,
         delta = keyEvent.upArrow || keyEvent.pageUp ? -step : step;
       if (prose) {
         const maximum = Math.max(
           0,
-          documentRows(route, current || {}, contentWidth).length -
+          documentRows(route, current || {}, contentWidth, colors).length -
             contentHeight,
         );
         const amount =
@@ -2079,7 +2234,8 @@ function App({ initialConfig, flags, root }) {
       : loading
         ? "Loading…"
         : "Shared account · shared conversations · same permissions");
-  const spin = ["◐", "◓", "◑", "◒"][tick];
+  const spin =
+    effectiveAppearance.motion === "reduced" ? "·" : ["◐", "◓", "◑", "◒"][tick];
   let center;
   if (width < 60 || rows < 18)
     center = h(
@@ -2118,51 +2274,89 @@ function App({ initialConfig, flags, root }) {
       },
     });
   else if (phase !== "ready") {
-    const lines = [
-      "A place for curious developers.",
-      "Your conversations, without leaving the terminal.",
-      "",
-      ...(phase === "pending" && device
+    const statusLines =
+      phase === "pending" && device
         ? [
             "Confirm this code: " + device.user_code,
-            "Waiting for your approval " + spin,
             device.verification_uri,
-            "Enter reopens the browser · Esc cancels",
+            "Waiting for your approval...",
           ]
         : phase === "checking"
-          ? ["Opening your workspace " + spin]
+          ? error
+            ? ["Connection could not be completed.", error]
+            : ["Connecting to Devdevian..."]
           : [
               "Sign in with your existing Devdevian account.",
-              "",
-              "Enter connects this terminal through your browser.",
               "Google, GitHub and email sign-in stay on the website.",
-              "",
-              "Q exits.",
-            ]),
-    ];
+            ];
+    const footer =
+      phase === "pending"
+        ? ["Enter reopens the browser · Esc cancels"]
+        : phase === "checking"
+          ? [error ? "R or Enter retries · Ctrl+C exits" : "Ctrl+C exits"]
+          : [
+              "Enter connects this terminal through your browser.",
+              "Q or Ctrl+C exits.",
+            ];
     center = h(
       Box,
       {
-        borderStyle: "round",
+        borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
-        paddingX: 2,
-        paddingY: 1,
+        paddingX: 1,
+        height: bodyHeight,
+        overflow: "hidden",
+      },
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message:
+          effectiveAppearance.welcome === "off"
+            ? ""
+            : phase === "checking"
+              ? "Devi missed you."
+              : "Devi saved you a seat.",
+        status: statusLines,
+        footer,
+        show: effectiveAppearance.welcome === "on",
+        animate: phase !== "auth" && !error,
+        motion: effectiveAppearance.motion,
+      }),
+    );
+  } else if (
+    booting &&
+    !current &&
+    effectiveAppearance.welcome === "on" &&
+    !error &&
+    !dialog &&
+    !form &&
+    !picker
+  ) {
+    center = h(
+      Box,
+      {
+        borderStyle: colors.frame,
+        borderColor: colors.purple,
+        paddingX: 1,
         height: bodyHeight,
         overflow: "hidden",
       },
-      h(Text, { bold: true, color: colors.purple }, "YOUR DEVELOPER SPACE"),
-      h(FrameRows, {
-        rows: lines.flatMap((line) => wrap(line, width - 8)),
-        width: width - 8,
-        height: Math.max(1, bodyHeight - 5),
+      h(DeviPanel, {
+        width: Math.max(1, width - 4),
+        height: Math.max(1, bodyHeight - 2),
+        message: "Devi missed you.",
+        status: ["Loading your " + labelOf(route).toLowerCase() + "..."],
+        footer: ["Ctrl+C exits"],
+        motion: effectiveAppearance.motion,
+        animate: true,
       }),
     );
   } else if (dialog) {
     center = h(
       Box,
       {
-        borderStyle: "round",
+        borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
         paddingX: 2,
@@ -2202,6 +2396,7 @@ function App({ initialConfig, flags, root }) {
           ? "[deleted — discussion preserved]"
           : reading.body || "",
         contentWidth,
+        colors,
       );
       body = h(FrameRows, {
         rows: lines,
@@ -2258,14 +2453,14 @@ function App({ initialConfig, flags, root }) {
         ),
       );
     } else if (form)
-      body = h(FormView, {
+      body = h(form.kind === "appearance" ? AppearanceView : FormView, {
         form,
         active: field,
         cursor,
         width: contentWidth,
         height: contentHeight,
       });
-    else if (loading && !current)
+    else if ((loading || booting) && !current)
       body = h(
         Text,
         { color: colors.muted },
@@ -2324,7 +2519,17 @@ function App({ initialConfig, flags, root }) {
         line: reviewLine,
         anchor: reviewAnchor,
         horizontal: reviewHorizontal,
-        rows: (w) => listRows(route, current, index, w),
+        layout: effectiveAppearance.reviewLayout,
+        stride,
+        rows: (w) =>
+          listRows(
+            route,
+            current,
+            index,
+            w,
+            colors,
+            effectiveAppearance.density,
+          ),
       });
     else if (error && !current)
       body = h(FrameRows, {
@@ -2342,7 +2547,7 @@ function App({ initialConfig, flags, root }) {
         height: contentHeight,
       });
     else {
-      const lines = documentRows(route, current || {}, contentWidth);
+      const lines = documentRows(route, current || {}, contentWidth, colors);
       if (lines.length)
         body = h(FrameRows, {
           rows: lines,
@@ -2350,36 +2555,59 @@ function App({ initialConfig, flags, root }) {
           height: contentHeight,
           offset: Math.min(scroll, Math.max(0, lines.length - contentHeight)),
         });
-      else if (!current?.items?.length)
-        body = h(
-          Box,
-          { flexDirection: "column", paddingTop: 1 },
-          h(
-            Text,
-            { color: colors.text },
-            route.view === "search"
-              ? "Find your next useful conversation."
-              : error
-                ? "Could not open this view."
-                : "Nothing here yet.",
-          ),
-          h(
-            Text,
-            { color: colors.muted },
-            error
-              ? "Press Shift+R to retry."
-              : route.view === "feed"
-                ? "N starts a conversation. A asks a question."
-                : "Use / to search or Tab to explore another section.",
-          ),
-        );
-      else {
-        const visible = Math.max(1, Math.floor(contentHeight / 4)),
+      else if (!current?.items?.length) {
+        const messages = {
+          inbox: [
+            "You're all caught up.",
+            "Replies, mentions and review updates will appear here.",
+          ],
+          drafts: [
+            "No local drafts yet.",
+            "Start writing to save a private draft on this device.",
+          ],
+          communities: [
+            "Find your people.",
+            "Use / to search or N to create a private community.",
+          ],
+          feed: [
+            "Nothing here yet.",
+            "N starts a conversation. A asks a question.",
+          ],
+          search: route.query
+            ? [
+                "No conversations matched your search.",
+                "Try fewer words or a different phrase.",
+              ]
+            : [
+                "Find your next useful conversation.",
+                "Press / and type /search followed by your query.",
+              ],
+        };
+        const message = messages[route.view] || [
+          "Nothing here yet.",
+          "Use / to search or Tab to explore another section.",
+        ];
+        body = h(DeviPanel, {
+          width: contentWidth,
+          height: contentHeight,
+          message: message[0],
+          status: [message[1]],
+          show:
+            effectiveAppearance.welcome === "on" &&
+            Object.hasOwn(messages, route.view),
+          motion: effectiveAppearance.motion,
+        });
+      } else {
+        const visible = Math.max(1, Math.floor(contentHeight / stride)),
           first = Math.max(0, index - visible + 1),
-          rows = listRows(route, current, index, contentWidth).slice(
-            first * 4,
-            first * 4 + contentHeight,
-          );
+          rows = listRows(
+            route,
+            current,
+            index,
+            contentWidth,
+            colors,
+            effectiveAppearance.density,
+          ).slice(first * stride, first * stride + contentHeight);
         body = h(
           Box,
           {
@@ -2419,7 +2647,7 @@ function App({ initialConfig, flags, root }) {
     const pane = h(
       Box,
       {
-        borderStyle: "round",
+        borderStyle: colors.frame,
         borderColor: focus === "nav" && !compact ? colors.line : colors.purple,
         backgroundColor: colors.panel,
         flexDirection: "column",
@@ -2470,7 +2698,9 @@ function App({ initialConfig, flags, root }) {
           )
         : h(TextLine, {
             text: form
-              ? "Tab next field · Ctrl+E editor · Ctrl+S preview" +
+              ? (form.kind === "appearance"
+                  ? "Local preferences · Preview now · Ctrl+S save · Esc cancel"
+                  : "Tab next field · Ctrl+E editor · Ctrl+S preview") +
                 (draftSaved ? " · Draft saved locally" : "")
               : preview
                 ? "Scroll to review · ← → choose · Enter confirms"
@@ -2493,7 +2723,7 @@ function App({ initialConfig, flags, root }) {
         ? h(
             Box,
             {
-              borderStyle: "round",
+              borderStyle: colors.frame,
               borderColor: focus === "nav" ? colors.blue : colors.line,
               backgroundColor: colors.panel,
               flexDirection: "column",
@@ -2546,97 +2776,103 @@ function App({ initialConfig, flags, root }) {
     );
   }
   const hint =
-    actionIndex !== null
-      ? "Actions are scoped to the selected item · Esc closes"
-      : reviewing && !form && !preview && !reading
-        ? "W code / discussion · Space select · C comment · X actions · F filter"
-        : picker
-          ? "Project files stay local until publication is confirmed"
-          : reading
-            ? "↑↓ scroll · R reply · E edit · D delete · Esc close"
-            : preview
-              ? "← → choose · Enter confirm · Esc edit"
-              : form
-                ? "Tab field · Ctrl+E editor · Ctrl+O files · Ctrl+G diff · Ctrl+S preview"
-                : phase !== "ready"
-                  ? "Enter connect / open browser · Ctrl+C exit"
-                  : route.view === "feedback"
-                    ? "↑↓ select · R reply · E edit · D delete · S resolve · ! report"
-                    : route.view === "post"
-                      ? "←→ tabs · ↑↓ select · R reply · E edit · D delete · Space read"
-                      : "↑↓ select · Enter open · Tab sections · [ ] pages · N new · / search";
+    form?.kind === "appearance"
+      ? "← → choose · Tab next · Ctrl+S save · Esc cancel · 0 default preview"
+      : actionIndex !== null
+        ? "Actions are scoped to the selected item · Esc closes"
+        : reviewing && !form && !preview && !reading
+          ? "W code / discussion · Space select · C comment · X actions · F filter"
+          : picker
+            ? "Project files stay local until publication is confirmed"
+            : reading
+              ? "↑↓ scroll · R reply · E edit · D delete · Esc close"
+              : preview
+                ? "← → choose · Enter confirm · Esc edit"
+                : form
+                  ? "Tab field · Ctrl+E editor · Ctrl+O files · Ctrl+G diff · Ctrl+S preview"
+                  : phase !== "ready"
+                    ? "Enter connect / open browser · Ctrl+C exit"
+                    : route.view === "feedback"
+                      ? "↑↓ select · R reply · E edit · D delete · S resolve · ! report"
+                      : route.view === "post"
+                        ? "←→ tabs · ↑↓ select · R reply · E edit · D delete · Space read"
+                        : "↑↓ select · Enter open · Tab sections · [ ] pages · N new · / search";
   return h(
-    Box,
-    {
-      flexDirection: "column",
-      width,
-      height,
-      overflow: "hidden",
-      backgroundColor: colors.bg,
-    },
+    ThemeContext.Provider,
+    { value: colors },
     h(
       Box,
       {
-        height: 3,
-        borderStyle: "round",
-        borderColor: colors.line,
-        paddingX: 1,
-        justifyContent: "space-between",
+        flexDirection: "column",
+        width,
+        height,
         overflow: "hidden",
+        backgroundColor: colors.bg,
       },
       h(
-        Text,
-        { color: colors.purple, bold: true },
-        clip("◈ DEVDEVIAN  ·  " + basename(root), Math.max(10, width - 36)),
-      ),
-      h(
-        Text,
-        { color: colors.blue },
-        clip(
-          user
-            ? "@" +
-                user.username +
-                " · " +
-                unread +
-                " unread · " +
-                (live ? "● Live" : "○ Paused")
-            : "CLI · ALPHA",
-          32,
+        Box,
+        {
+          height: 3,
+          borderStyle: colors.frame,
+          borderColor: colors.line,
+          paddingX: 1,
+          justifyContent: "space-between",
+          overflow: "hidden",
+        },
+        h(
+          Text,
+          { color: colors.purple, bold: true },
+          clip("◈ DEVDEVIAN  ·  " + basename(root), Math.max(10, width - 36)),
+        ),
+        h(
+          Text,
+          { color: colors.blue },
+          clip(
+            user
+              ? "@" +
+                  user.username +
+                  " · " +
+                  unread +
+                  " unread · " +
+                  (live ? "● Live" : "○ Paused")
+              : "CLI · ALPHA",
+            32,
+          ),
         ),
       ),
-    ),
-    center,
-    h(TextLine, {
-      text: clip((pending || loading ? spin + " " : "") + status, width),
-      width,
-      color: error ? colors.red : notice ? colors.green : colors.muted,
-    }),
-    h(
-      Box,
-      {
-        height: 3,
-        borderStyle: "round",
-        borderColor: focus === "prompt" ? colors.blue : colors.line,
-        paddingX: 1,
-        overflow: "hidden",
-      },
-      h(Text, { color: colors.purple, bold: true }, "› "),
-      focus === "prompt"
-        ? h(InputText, {
-            value: command,
-            cursor: commandCursor,
-            width: Math.max(1, width - 6),
-          })
-        : h(
-            Text,
-            { color: colors.muted },
-            clip(
-              "Search or /command     ·     Press / to type · X actions",
-              width - 6,
+      center,
+      h(TextLine, {
+        text: clip((pending || loading ? spin + " " : "") + status, width),
+        width,
+        color: error ? colors.red : notice ? colors.green : colors.muted,
+      }),
+      h(
+        Box,
+        {
+          height: 3,
+          borderStyle: colors.frame,
+          borderColor: focus === "prompt" ? colors.blue : colors.line,
+          paddingX: 1,
+          overflow: "hidden",
+        },
+        h(Text, { color: colors.purple, bold: true }, "› "),
+        focus === "prompt"
+          ? h(InputText, {
+              value: command,
+              cursor: commandCursor,
+              width: Math.max(1, width - 6),
+            })
+          : h(
+              Text,
+              { color: colors.muted },
+              clip(
+                "Search or /command     ·     Press / to type · X actions · , appearance",
+                width - 6,
+              ),
             ),
-          ),
+      ),
+      h(TextLine, { text: hint, width, color: colors.muted }),
     ),
-    h(TextLine, { text: hint, width, color: colors.muted }),
   );
 }
 export async function startTui(flags = {}) {
@@ -2648,13 +2884,24 @@ export async function startTui(flags = {}) {
   if (flags.host && config && originOf(flags.host) !== config.origin)
     config = null;
   const root = await workspaceRoot(flags.project || process.cwd());
-  const app = render(h(App, { initialConfig: config, flags, root }), {
-    alternateScreen: true,
-    exitOnCtrlC: false,
-    patchConsole: true,
-    maxFps: 20,
-    incrementalRendering: false,
-  });
+  const loaded = await loadAppearance();
+  const initialAppearance = {
+    ...loaded,
+    settings: normalizeAppearance({
+      ...loaded.settings,
+      ...appearanceFlags(flags),
+    }),
+  };
+  const app = render(
+    h(App, { initialConfig: config, flags, root, initialAppearance }),
+    {
+      alternateScreen: true,
+      exitOnCtrlC: false,
+      patchConsole: true,
+      maxFps: 20,
+      incrementalRendering: false,
+    },
+  );
   try {
     await app.waitUntilExit();
   } finally {