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

package/README.md

@@ -31,6 +31,29 @@ Pages have a bounded 30-second in-memory cache. Refresh explicitly with Shift+R.
 
 Ordinary reply deletion replaces your text with a placeholder and preserves nested replies. Its attachments become unavailable. Deleting an accepted answer reopens the question. D/d works on a selected reply or while reading it in full; confirmation is required.
 
+## Themes and layout
+
+Open **Appearance** in navigation, type `/appearance`, or press **,** from a reading/list screen. Use arrows to choose options and Tab to move between them. The entire interface previews each change, including code colors, the file picker and navigation. Wide terminals include a sample card next to the controls.
+
+- **Midnight** preserves the original blue/purple design; **Nebula** uses a deeper violet surface; **Daylight** is light; **Contrast** emphasizes readable foregrounds.
+- Choose a **blue, violet, cyan or rose accent**, comfortable/compact lists, automatic/hidden sidebar, automatic/stacked review panels, rounded/straight frames and subtle/reduced loading indicators.
+- **Ctrl+S** saves locally. **Esc** cancels the preview. **0** restores the default preview; save to keep it, or cancel to retain existing settings.
+- Hidden navigation stays available with **Tab**. Stacked review panes switch with **W**. Narrow terminals automatically avoid a permanent sidebar and split review layout.
+
+Appearance settings belong to this local CLI installation and apply across its accounts/projects; credentials and server profiles are separate. Settings live in `appearance.json` alongside the credentials file, or under `DEVDEVIAN_CONFIG_DIR`. Saving replaces the settings file atomically with private file permissions. Invalid settings fall back to defaults with a warning and remain untouched until you save a new configuration.
+
+Appearance can also be configured **offline, without logging in**:
+
+```sh
+devdevian appearance                            # print settings as JSON
+devdevian appearance --theme daylight --accent violet
+devdevian appearance --density compact --sidebar hidden
+devdevian appearance --review-layout stacked --motion reduced
+devdevian appearance --reset                    # save defaults
+```
+
+These options can be passed to `tui` or `open` for a **session-only override**, for example `devdevian tui --theme contrast`. Overrides become persistent only if you save in Appearance. Preference changes do not write to the Devdevian API or modify credentials. Current presets use fixed, tested color combinations; the settings file is validated rather than interpreted as terminal code.
+
 ## Code and discussion, together
 
 Press **V** in a review to open the code workspace. Wide terminals show the snippet alongside its discussion; narrow terminals show one pane at a time. **W** switches focus. In the code pane, arrows move between lines (left/right scroll horizontally), **Space** anchors a range and **C** opens a prefilled comment form. Remarks may cover at most 50 lines. **Enter** selects a remark covering the current line, if it is on the current page. Markers describe the current page only; **F** cycles all/open/resolved remarks and **[ / ]** page through them.

package/VERSIONS.md

@@ -4,10 +4,24 @@ The CLI is a separately versioned Devdevian client. Its npm version does not hav
 
 Every published npm artifact has a unique immutable version. We record each version here, even when several ship in one working session. A GitHub release can summarize a day's work and link to the individual entries; it does not need to be created for every npm publication. An unfinished change stays under **Unreleased** until its package version is assigned. Alpha packages use the `alpha` npm tag.
 
-## Roadmap
+## Current milestone
 
-- **0.5.0 — Themes and interface customization:** visual presets, appearance preferences and layout customization. Planned, not shipped; exact settings will be agreed before implementation.
-- Projects and Events parity is deferred; it is not the 0.5.0 milestone.
+**0.5.0 focuses on themes, interface customization and local appearance preferences.** Projects and Events parity remains a separate future milestone.
+
+## 0.5.0-alpha.1 — Make the terminal yours
+
+**Changes**
+
+- Appearance workspace with immediate whole-interface previews, a sample panel on wide terminals and explicit save/cancel/default controls. Open it with `/appearance`, navigation or **,**.
+- Midnight, Nebula, Daylight and Contrast themes, with blue/violet/cyan/rose accents shared by navigation, Markdown, code review, forms and the local file/Git picker.
+- Comfortable/compact list density, automatic/hidden navigation, automatic/stacked review panels, rounded/straight frames and reduced loading motion. Compact layouts remain keyboard-accessible.
+- Atomic, validated local preference storage, independent of account credentials and production data. Invalid configuration falls back visibly without overwriting the file.
+- Offline `devdevian appearance` commands and temporary `tui`/`open` appearance flags. Theme text and selection contrast are checked across all preset/accent combinations.
+- Rapid option-arrow changes no longer overwrite each other when input events are batched. Small terminal forms retain the active option in the viewport.
+
+**Compatibility and checks**
+
+No API/schema changes. Existing credentials and local drafts remain compatible; missing preferences use Midnight defaults. Regression checks cover save/restart, preview cancellation, reset, corrupt files, credential isolation, palette contrast, compact lists, hidden navigation, stacked reviews and 60×18 resizing in a real pseudo-terminal. Preferences apply to the local CLI installation, across its accounts and projects.
 
 ## 0.4.1-alpha.1 — Everyday writing and navigation
 

package/bin/devdevian.mjs

@@ -16,6 +16,13 @@ import {
   clean,
 } from "../lib/client.mjs";
 import { editExternal } from "../lib/external-editor.mjs";
+import {
+  appearanceFields,
+  appearanceFlags,
+  defaultAppearance,
+  loadAppearance,
+  saveAppearance,
+} from "../lib/appearance.mjs";
 const version = packageInfo.version;
 const options = {
   host: { type: "string" },
@@ -40,6 +47,13 @@ const options = {
   editor: { type: "boolean" },
   "no-open": { type: "boolean" },
   "no-live": { type: "boolean" },
+  ...Object.fromEntries(
+    appearanceFields.map((field) => [
+      field.key === "reviewLayout" ? "review-layout" : field.key,
+      { type: "string" },
+    ]),
+  ),
+  reset: { type: "boolean" },
   help: { type: "boolean", short: "h" },
   version: { type: "boolean", short: "v" },
 };
@@ -80,6 +94,9 @@ const help = `Devdevian CLI ${version} · alpha
   devdevian open                  Open the workspace in a new terminal window
   devdevian login                 Authorize in your browser
   devdevian logout                Revoke this terminal
+  devdevian appearance             Show local theme and layout preferences
+  devdevian appearance --theme daylight --accent violet
+  devdevian appearance --reset     Restore the default appearance
   devdevian whoami
   devdevian inbox [--page 2]
   devdevian feed [--topic web] [--page 2]
@@ -96,6 +113,13 @@ const help = `Devdevian CLI ${version} · alpha
   devdevian review reopen POST_ID REVIEW_ID
   devdevian communities [--page 2]
 
+  --theme NAME       midnight | nebula | daylight | contrast
+  --accent NAME      blue | violet | cyan | rose
+  --density NAME     comfortable | compact
+  --sidebar MODE     auto | hidden (Tab opens navigation)
+  --review-layout MODE  auto | stacked
+  --frame STYLE      round | single
+  --motion MODE      subtle | reduced
   --no-live          Disable background reads in the live workspace
   --project PATH     Root directory for the live file/diff picker (default: current directory)
   --community ID     Publish to an approved private community
@@ -240,6 +264,20 @@ async function execute(args, flags) {
     return;
   }
   const command = args[0];
+  if (command === "appearance") {
+    const loaded = await loadAppearance(),
+      updates = appearanceFlags(flags);
+    if (flags.reset && Object.keys(updates).length)
+      throw Error("Use --reset on its own, or choose appearance options.");
+    if (loaded.warning) process.stderr.write(loaded.warning + "\n");
+    const settings = flags.reset
+      ? await saveAppearance(defaultAppearance)
+      : Object.keys(updates).length
+        ? await saveAppearance({ ...loaded.settings, ...updates })
+        : loaded.settings;
+    out(JSON.stringify(settings, null, 2));
+    return;
+  }
   if (command === "login") return login(flags);
   const config = await loadConfig();
   if (!config) throw Error("Sign in first: devdevian login");
@@ -456,7 +494,14 @@ try {
     await (await import("../lib/tui.mjs")).startTui(values);
   else if (positionals[0] === "open") {
     const args = [];
-    for (const key of ["host", "name", "project"])
+    for (const key of [
+      "host",
+      "name",
+      "project",
+      ...appearanceFields.map((field) =>
+        field.key === "reviewLayout" ? "review-layout" : field.key,
+      ),
+    ])
       if (values[key]) args.push("--" + key, values[key]);
     if (values["no-open"]) args.push("--no-open");
     if (values["no-live"]) args.push("--no-live");

package/lib/appearance.mjs

@@ -0,0 +1,179 @@
+import { dirname, join } from "node:path";
+import {
+  mkdir,
+  lstat,
+  open,
+  writeFile,
+  rename,
+  unlink,
+} from "node:fs/promises";
+import { constants } from "node:fs";
+import { randomBytes } from "node:crypto";
+import { configFile } from "./client.mjs";
+
+export const appearanceFields = [
+  {
+    key: "theme",
+    label: "Theme",
+    options: [
+      ["midnight", "Midnight · original"],
+      ["nebula", "Nebula · deep violet"],
+      ["daylight", "Daylight · light"],
+      ["contrast", "Contrast · high contrast"],
+    ],
+  },
+  {
+    key: "accent",
+    label: "Accent",
+    options: [
+      ["blue", "Blue"],
+      ["violet", "Violet"],
+      ["cyan", "Cyan"],
+      ["rose", "Rose"],
+    ],
+  },
+  {
+    key: "density",
+    label: "List density",
+    options: [
+      ["comfortable", "Comfortable"],
+      ["compact", "Compact"],
+    ],
+  },
+  {
+    key: "sidebar",
+    label: "Navigation",
+    options: [
+      ["auto", "Sidebar on wide terminals"],
+      ["hidden", "Hidden · Tab opens navigation"],
+    ],
+  },
+  {
+    key: "reviewLayout",
+    label: "Review panels",
+    options: [
+      ["auto", "Side by side when space allows"],
+      ["stacked", "One panel · W switches"],
+    ],
+  },
+  {
+    key: "frame",
+    label: "Frames",
+    options: [
+      ["round", "Rounded"],
+      ["single", "Straight"],
+    ],
+  },
+  {
+    key: "motion",
+    label: "Motion",
+    options: [
+      ["subtle", "Subtle loading indicators"],
+      ["reduced", "Reduced · static indicators"],
+    ],
+  },
+];
+export const defaultAppearance = Object.freeze(
+  Object.fromEntries(
+    appearanceFields.map((field) => [field.key, field.options[0][0]]),
+  ),
+);
+export function normalizeAppearance(value = {}) {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw Error("Appearance settings must be an object.");
+  for (const key of Object.keys(value))
+    if (!appearanceFields.some((field) => field.key === key))
+      throw Error("Unknown appearance option: " + key);
+  const settings = { ...defaultAppearance, ...value };
+  for (const field of appearanceFields)
+    if (!field.options.some(([id]) => id === settings[field.key]))
+      throw Error(
+        `Invalid ${field.key}. Choose: ${field.options.map(([id]) => id).join(", ")}.`,
+      );
+  return settings;
+}
+export function appearanceFlags(flags) {
+  const updates = {};
+  for (const field of appearanceFields) {
+    const flag = field.key === "reviewLayout" ? "review-layout" : field.key;
+    if (flags[flag] !== undefined) updates[field.key] = flags[flag];
+  }
+  normalizeAppearance(updates);
+  return updates;
+}
+export const appearanceFile = (env = process.env) =>
+  join(dirname(configFile(env)), "appearance.json");
+async function safeDirectory(path) {
+  const info = await lstat(path);
+  if (!info.isDirectory() || info.isSymbolicLink())
+    throw Error("The appearance directory must be a real directory.");
+}
+export async function loadAppearance(env = process.env) {
+  const file = appearanceFile(env);
+  try {
+    await safeDirectory(dirname(file));
+    const info = await lstat(file);
+    if (!info.isFile() || info.isSymbolicLink() || info.size > 4096)
+      throw Error("Invalid appearance file.");
+    const handle = await open(
+      file,
+      constants.O_RDONLY |
+        (constants.O_NOFOLLOW || 0) |
+        (constants.O_NONBLOCK || 0),
+    );
+    let record;
+    try {
+      if (!(await handle.stat()).isFile())
+        throw Error("Invalid appearance file.");
+      const bytes = Buffer.alloc(4097),
+        { bytesRead } = await handle.read(bytes, 0, bytes.length, 0);
+      if (bytesRead > 4096) throw Error("Appearance file is too large.");
+      record = JSON.parse(
+        new TextDecoder("utf-8", { fatal: true }).decode(
+          bytes.subarray(0, bytesRead),
+        ),
+      );
+    } finally {
+      await handle.close();
+    }
+    if (
+      record.version !== 1 ||
+      !record.settings ||
+      typeof record.settings !== "object"
+    )
+      throw Error("Unsupported appearance file version.");
+    return { settings: normalizeAppearance(record.settings), warning: "" };
+  } catch (error) {
+    return {
+      settings: { ...defaultAppearance },
+      warning:
+        error.code === "ENOENT"
+          ? ""
+          : "Could not load appearance settings. Using defaults; /appearance can save a fresh configuration.",
+    };
+  }
+}
+export async function saveAppearance(value, env = process.env) {
+  const settings = normalizeAppearance(value),
+    file = appearanceFile(env),
+    directory = dirname(file);
+  await mkdir(directory, { recursive: true, mode: 0o700 });
+  await safeDirectory(directory);
+  const temporary = join(
+    directory,
+    ".appearance-" + randomBytes(12).toString("hex"),
+  );
+  try {
+    await writeFile(
+      temporary,
+      JSON.stringify({ version: 1, settings }, null, 2) + "\n",
+      { flag: "wx", mode: 0o600 },
+    );
+    await rename(temporary, file);
+  } finally {
+    await unlink(temporary).catch((error) => {
+      if (error.code !== "ENOENT") throw error;
+    });
+  }
+  return settings;
+}

package/lib/picker.mjs

@@ -9,9 +9,8 @@ import {
   readDiff,
   selectLines,
 } from "./workspace.mjs";
-import { colors } from "./theme.mjs";
-const h = React.createElement,
-  c = { ...colors, bg: colors.panel };
+import { useTheme } from "./theme.mjs";
+const h = React.createElement;
 export function WorkspacePicker({
   root,
   width,
@@ -20,6 +19,8 @@ export function WorkspacePicker({
   onSelect,
   onCancel,
 }) {
+  const colors = useTheme(),
+    c = { ...colors, bg: colors.panel };
   const [mode, setMode] = useState(initial),
     [folder, setFolder] = useState("."),
     [hidden, setHidden] = useState(false),
@@ -265,7 +266,7 @@ export function WorkspacePicker({
       height: panelHeight,
       key: "browser",
       flexDirection: "column",
-      borderStyle: "round",
+      borderStyle: colors.frame,
       borderColor: c.purple,
       paddingX: 1,
       overflow: "hidden",
@@ -330,7 +331,7 @@ export function WorkspacePicker({
           height: panelHeight,
           key: "preview",
           flexDirection: "column",
-          borderStyle: "round",
+          borderStyle: colors.frame,
           borderColor: c.blue,
           paddingX: 1,
           overflow: "hidden",

package/lib/review-workspace.mjs

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import { clip, graphemes } from "./tui-model.mjs";
 import { syntaxSpans } from "./rich-text.mjs";
-import { colors as c } from "./theme.mjs";
+import { useTheme } from "./theme.mjs";
 const h = React.createElement;
 export function codeRange(line, anchor = null) {
   return {
@@ -32,8 +32,11 @@ export function ReviewWorkspace({
   anchor,
   horizontal = 0,
   rows,
+  layout = "auto",
+  stride = 4,
 }) {
-  const split = width >= 78,
+  const c = useTheme();
+  const split = width >= 78 && layout !== "stacked",
     codeWidth = split ? Math.floor(width * 0.55) : width;
   const selectedNote = note || items[index];
   const excerpt = reviewExcerpt(post, focus === "code" ? null : selectedNote),
@@ -114,14 +117,14 @@ export function ReviewWorkspace({
         },
         ...(text.startsWith("+") || text.startsWith("-")
           ? [rendered]
-          : syntaxSpans(rendered).map((span, j) =>
+          : syntaxSpans(rendered, c).map((span, j) =>
               h(Text, { key: j, color: span.color }, span.text),
             )),
       );
     }),
   );
   const notesWidth = split ? width - codeWidth - 2 : width;
-  const visible = Math.max(1, Math.floor((height - 2) / 4)),
+  const visible = Math.max(1, Math.floor((height - 2) / stride)),
     first = Math.max(0, index - visible + 1);
   const notes = h(
     Box,
@@ -140,7 +143,7 @@ export function ReviewWorkspace({
       : null,
     ...(items.length
       ? rows(notesWidth)
-          .slice(first * 4, first * 4 + height - header)
+          .slice(first * stride, first * stride + height - header)
           .map((row, i) =>
             h(
               Text,

package/lib/rich-text.mjs

@@ -1,9 +1,9 @@
 import { clean } from "./client.mjs";
 import { wrap } from "./tui-model.mjs";
-import { colors as c } from "./theme.mjs";
+import { colors } from "./theme.mjs";
 
 // Small, predictable terminal renderer. HTML and terminal hyperlinks are never executed.
-export function syntaxSpans(text) {
+export function syntaxSpans(text, c = colors) {
   const pattern =
     /("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|\/\/.*$|#.*$|\b(?:async|await|function|return|const|let|var|if|else|throw|new|class|import|from|export|def|None|True|False|true|false|null|try|catch|for|while)\b|\b\d+(?:\.\d+)?\b)/g;
   const parts = [];
@@ -27,7 +27,7 @@ export function syntaxSpans(text) {
   if (start < text.length) parts.push({ text: text.slice(start) });
   return parts;
 }
-export function markdownRows(value, width) {
+export function markdownRows(value, width, c = colors) {
   let fence = null,
     number = 0;
   const rows = [];
@@ -59,7 +59,7 @@ export function markdownRows(value, width) {
       const prefix = String(++number).padStart(4) + "  ";
       for (const [i, line] of wrap(raw, Math.max(1, width - 6)).entries()) {
         const text = (i ? "      " : prefix) + line;
-        rows.push({ text, spans: syntaxSpans(text) });
+        rows.push({ text, spans: syntaxSpans(text, c) });
       }
       continue;
     }

package/lib/theme.mjs

@@ -1,13 +1,66 @@
-// One palette for the workspace, file picker and review panes.
-export const colors = Object.freeze({
-  bg: "#0b1020",
-  panel: "#11182b",
-  line: "#303d60",
-  muted: "#8e9ab8",
-  text: "#e5eaff",
-  blue: "#86baff",
-  purple: "#b5a0ff",
-  green: "#7bdcbd",
-  red: "#ffa0b4",
-  selected: "#29365b",
-});
+import { createContext, useContext } from "react";
+import { normalizeAppearance } from "./appearance.mjs";
+const presets = {
+  midnight: {
+    bg: "#0b1020",
+    panel: "#11182b",
+    line: "#303d60",
+    muted: "#96a3c1",
+    text: "#e5eaff",
+    green: "#7bdcbd",
+    red: "#ffa0b4",
+    selected: "#29365b",
+  },
+  nebula: {
+    bg: "#100d20",
+    panel: "#1a1530",
+    line: "#4a3b68",
+    muted: "#a49ab9",
+    text: "#f0eaff",
+    green: "#86ddc3",
+    red: "#ffa6bd",
+    selected: "#3c2c59",
+  },
+  daylight: {
+    bg: "#f2f5ff",
+    panel: "#ffffff",
+    line: "#b4c0dc",
+    muted: "#53617a",
+    text: "#1b2440",
+    green: "#16634d",
+    red: "#a12444",
+    selected: "#dce5ff",
+  },
+  contrast: {
+    bg: "#000000",
+    panel: "#080e1c",
+    line: "#899cc6",
+    muted: "#becae2",
+    text: "#ffffff",
+    green: "#8cf4c7",
+    red: "#ffb0c4",
+    selected: "#24345c",
+  },
+};
+export function themeFor(value = {}) {
+  const settings = normalizeAppearance(value),
+    light = settings.theme === "daylight";
+  const accents = light
+    ? {
+        blue: ["#3154b8", "#6b36b6"],
+        violet: ["#6b36b6", "#3154b8"],
+        cyan: ["#006b80", "#6b36b6"],
+        rose: ["#9b246c", "#3154b8"],
+      }
+    : {
+        blue: ["#86baff", "#b5a0ff"],
+        violet: ["#c0a6ff", "#86baff"],
+        cyan: ["#74d5ed", "#b5a0ff"],
+        rose: ["#f4a6cf", "#86baff"],
+      };
+  const [blue, purple] = accents[settings.accent];
+  return { ...presets[settings.theme], blue, purple, frame: settings.frame };
+}
+export const colors = Object.freeze(themeFor());
+export const ThemeContext = createContext(colors);
+export const useTheme = () => useContext(ThemeContext);

package/lib/tui-data.mjs

@@ -19,6 +19,7 @@ export const navigation = [
   ["communities", "Communities", "Your private spaces"],
   ["search", "Search", "Find a conversation"],
   ["devices", "Connected terminals", "Manage CLI access"],
+  ["appearance", "Appearance", "Themes & layout"],
   ["help", "Help", "Keys & commands"],
 ];
 export async function notificationRoute(api, item) {
@@ -238,6 +239,7 @@ export function contentLines(route, data) {
       "Ctrl+S           Preview the current form",
       "Ctrl+O / Ctrl+G  Select a code file / Git diff in a review form",
       "/drafts          Restore locally saved drafts for this account/project",
+      "/appearance      Preview and save local themes and layout",
       "Ctrl+C           Exit and restore the original terminal",
       "",
       "Commands: /feed  /inbox  /search words  /open 142",

package/lib/tui-model.mjs

@@ -129,6 +129,7 @@ export function parseCommand(text) {
       "help",
       "devices",
       "drafts",
+      "appearance",
     ].includes(cmd)
   )
     return { command: cmd, arg };
@@ -140,7 +141,7 @@ export function parseCommand(text) {
     return { command: cmd, arg: Number(arg) };
   if (["quit", "logout"].includes(cmd)) return { command: cmd };
   throw Error(
-    "Use /feed, /inbox, /search words, /open ID, /ask, /review, /communities, /devices, /drafts, /help or /quit.",
+    "Use /feed, /inbox, /search words, /open ID, /ask, /review, /communities, /devices, /drafts, /appearance, /help or /quit.",
   );
 }
 export class PageCache {

package/lib/tui.mjs

@@ -32,7 +32,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 +91,7 @@ function openBrowser(url) {
   child.unref();
 }
 function fieldsFor(form) {
+  if (form.kind === "appearance") return appearanceFields;
   if (form.kind === "publication")
     return [
       {
@@ -190,10 +199,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 +241,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 +260,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 +312,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 +410,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 +443,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,9 +460,63 @@ 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",
@@ -452,7 +535,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 +579,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),
@@ -786,10 +873,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();
@@ -944,6 +1035,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,6 +1051,16 @@ 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) {
     setForm({
       ...next,
@@ -1123,6 +1225,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 +1685,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 +1709,10 @@ function App({ initialConfig, flags, root }) {
     }
   }
   function askQuit() {
+    if (form?.kind === "appearance") {
+      exit();
+      return;
+    }
     if (form) {
       askConfirm(
         "Leave this draft?",
@@ -1677,6 +1799,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 +1848,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 +1909,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 +1996,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 +2086,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 +2217,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(
@@ -2143,7 +2282,7 @@ function App({ initialConfig, flags, root }) {
     center = h(
       Box,
       {
-        borderStyle: "round",
+        borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
         paddingX: 2,
@@ -2162,7 +2301,7 @@ function App({ initialConfig, flags, root }) {
     center = h(
       Box,
       {
-        borderStyle: "round",
+        borderStyle: colors.frame,
         borderColor: colors.purple,
         flexDirection: "column",
         paddingX: 2,
@@ -2202,6 +2341,7 @@ function App({ initialConfig, flags, root }) {
           ? "[deleted — discussion preserved]"
           : reading.body || "",
         contentWidth,
+        colors,
       );
       body = h(FrameRows, {
         rows: lines,
@@ -2258,7 +2398,7 @@ function App({ initialConfig, flags, root }) {
         ),
       );
     } else if (form)
-      body = h(FormView, {
+      body = h(form.kind === "appearance" ? AppearanceView : FormView, {
         form,
         active: field,
         cursor,
@@ -2324,7 +2464,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 +2492,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,
@@ -2374,12 +2524,16 @@ function App({ initialConfig, flags, root }) {
           ),
         );
       else {
-        const visible = Math.max(1, Math.floor(contentHeight / 4)),
+        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 +2573,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 +2624,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 +2649,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 +2702,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 +2810,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenyokjs/devdevian-cli",
-  "version": "0.4.1-alpha.1",
+  "version": "0.5.0-alpha.1",
   "description": "Devdevian in your terminal: discussions, questions and human code reviews.",
   "type": "module",
   "bin": {