@sushant-kum/ccstatus 0.0.0-stage → 0.1.0

package/dist/app-3OCESK5H.js

@@ -0,0 +1,1393 @@
+#!/usr/bin/env node
+import {
+  COLORS,
+  configPath,
+  importCcstatusline,
+  isValidWhen,
+  loadConfigFile,
+  readSnapshot,
+  registry,
+  render,
+  rendererBg,
+  rendererColor,
+  saveConfigFile,
+  snapshotPath
+} from "./chunk-XYVU45PI.js";
+
+// src/app.tsx
+import { Box as Box12, Text as Text12, useApp, useInput as useInput10 } from "ink";
+import { useEffect, useMemo as useMemo2, useRef, useState as useState10 } from "react";
+
+// src/mod-status.ts
+import { execFile } from "child_process";
+var MARKETPLACE_SLUG = "sushant-kum/ccstatus";
+var PLUGIN_ID = "ccstatus@ccstatus";
+var runCmd = (argv) => new Promise((resolve) => {
+  const [command, ...args] = argv;
+  if (command === void 0) {
+    resolve({ code: -1, stdout: "", stderr: "" });
+    return;
+  }
+  execFile(command, args, { timeout: 1e4, maxBuffer: 1024 * 1024 }, (err, stdout, stderr) => {
+    const errCode = err?.code;
+    const code = typeof errCode === "number" ? errCode : err ? -1 : 0;
+    resolve({ code, stdout: stdout ?? "", stderr: stderr ?? "" });
+  });
+});
+async function detectModStatus(run = runCmd) {
+  let res;
+  try {
+    res = await run(["claude", "plugin", "list", "--json"]);
+  } catch {
+    return "unknown";
+  }
+  if (res.code !== 0) {
+    return "unknown";
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(res.stdout);
+  } catch {
+    return "unknown";
+  }
+  if (!Array.isArray(parsed)) {
+    return "unknown";
+  }
+  const entry = parsed.find(
+    (p) => !!p && typeof p === "object" && typeof p.id === "string" && p.id.startsWith("ccstatus@")
+  );
+  if (!entry) {
+    return "absent";
+  }
+  return entry.enabled === false ? "disabled" : "installed";
+}
+var firstLine = (s) => s.split("\n").map((l) => l.trim()).find(Boolean) ?? "";
+async function installMod(run = runCmd) {
+  const add = await run(["claude", "plugin", "marketplace", "add", MARKETPLACE_SLUG]);
+  if (add.code !== 0) {
+    return {
+      ok: false,
+      message: `marketplace add failed: ${firstLine(add.stderr || add.stdout) || `exit ${add.code}`}`
+    };
+  }
+  const inst = await run(["claude", "plugin", "install", PLUGIN_ID, "-y"]);
+  if (inst.code !== 0) {
+    return {
+      ok: false,
+      message: `install failed: ${firstLine(inst.stderr || inst.stdout) || `exit ${inst.code}`}`
+    };
+  }
+  return {
+    ok: true,
+    message: "mod installed \u2014 restart Claude Code (or run /reload-plugins) to see the bar"
+  };
+}
+
+// src/preview.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+
+// src/paint.tsx
+import { Box, Text } from "ink";
+import { jsx } from "react/jsx-runtime";
+var inkColor = (fg) => rendererColor(fg);
+var inkBg = (bg) => rendererBg(bg);
+function paintModel(model) {
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: model.lines.map((line, i) => /* @__PURE__ */ jsx(Box, { children: line.segments.map((s, j) => /* @__PURE__ */ jsx(Text, { color: inkColor(s.fg), backgroundColor: inkBg(s.bg), children: s.text }, j)) }, i)) });
+}
+
+// src/preview.tsx
+import { jsxs } from "react/jsx-runtime";
+function Preview({
+  config,
+  snapshot,
+  source,
+  width,
+  surface = "band"
+}) {
+  const model = render(config, snapshot, { surface, width });
+  return /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "gray", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs(Text2, { color: "gray", children: [
+      "live preview \xB7 ",
+      surface,
+      " \xB7 ",
+      width,
+      " cols \xB7 ",
+      source,
+      " data"
+    ] }),
+    paintModel(model)
+  ] });
+}
+
+// src/screens/defaults.tsx
+import { Box as Box3, Text as Text3, useInput } from "ink";
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SEPARATORS = ["powerline", "space", "none"];
+var FIELDS = ["separator", "padding"];
+function Defaults({ config, setConfig, goHome }) {
+  const [focus, setFocus] = useState(0);
+  const d = config.defaults;
+  const cycle = (dir) => {
+    const field = FIELDS[focus];
+    if (field === "separator") {
+      const i = SEPARATORS.indexOf(d.separator);
+      const next = SEPARATORS[(i + dir + SEPARATORS.length) % SEPARATORS.length] ?? d.separator;
+      setConfig({ ...config, defaults: { ...d, separator: next } });
+    } else {
+      const next = Math.min(4, Math.max(0, d.padding + dir));
+      if (next !== d.padding) {
+        setConfig({ ...config, defaults: { ...d, padding: next } });
+      }
+    }
+  };
+  useInput((_i, key) => {
+    if (key.escape) {
+      goHome();
+    } else if (key.upArrow) {
+      setFocus((f) => Math.max(0, f - 1));
+    } else if (key.downArrow) {
+      setFocus((f) => Math.min(FIELDS.length - 1, f + 1));
+    } else if (key.leftArrow) {
+      cycle(-1);
+    } else if (key.rightArrow) {
+      cycle(1);
+    }
+  });
+  const row = (idx, name, value) => /* @__PURE__ */ jsxs2(Text3, { color: focus === idx ? "cyan" : void 0, children: [
+    focus === idx ? "\u25B8 " : "  ",
+    name,
+    ": ",
+    value
+  ] });
+  return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx2(Text3, { bold: true, children: "Global defaults" }),
+    row(0, "separator", d.separator),
+    row(1, "padding", String(d.padding)),
+    /* @__PURE__ */ jsxs2(Text3, { color: "gray", children: [
+      " align: ",
+      d.align,
+      " (stored, not yet applied)"
+    ] }),
+    /* @__PURE__ */ jsx2(Text3, { dimColor: true, children: "\u2191/\u2193 field \xB7 \u2190/\u2192 change \xB7 esc back" })
+  ] });
+}
+
+// src/screens/import.tsx
+import { readFileSync } from "fs";
+import { homedir } from "os";
+import { join } from "path";
+import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
+import { useMemo, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function defaultReadFile(path) {
+  try {
+    return readFileSync(path, "utf8");
+  } catch {
+    return null;
+  }
+}
+function detectCcstatuslinePath() {
+  const base = process.env["XDG_CONFIG_HOME"] || join(homedir(), ".config");
+  return join(base, "ccstatusline", "settings.json");
+}
+function load(path, readFile) {
+  if (!path.trim()) {
+    return { ok: false, message: "enter a path" };
+  }
+  let text;
+  try {
+    text = readFile(path);
+  } catch {
+    text = null;
+  }
+  if (text === null) {
+    return { ok: false, message: `cannot read ${path}` };
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return { ok: false, message: `invalid JSON in ${path}` };
+  }
+  try {
+    const r = importCcstatusline(parsed);
+    if (r.warnings.some((w) => w.startsWith("input is not a ccstatusline config"))) {
+      return { ok: false, message: "not a ccstatusline config" };
+    }
+    return { ok: true, imported: r.config, warnings: r.warnings };
+  } catch {
+    return { ok: false, message: "import failed" };
+  }
+}
+function Import({
+  config,
+  setConfig,
+  goHome,
+  readFile = defaultReadFile
+}) {
+  const detected = useMemo(detectCcstatuslinePath, []);
+  const [focus, setFocus] = useState2(0);
+  const [custom, setCustom] = useState2("");
+  const path = focus === 0 ? detected : custom;
+  const result = useMemo(() => load(path, readFile), [path, readFile]);
+  useInput2((input, key) => {
+    if (key.escape) {
+      goHome();
+      return;
+    }
+    if (key.upArrow) {
+      setFocus(0);
+      return;
+    }
+    if (key.downArrow) {
+      setFocus(1);
+      return;
+    }
+    if (key.return) {
+      if (result.ok) {
+        setConfig({
+          ...config,
+          surfaces: { ...config.surfaces, band: result.imported.surfaces.band }
+        });
+      }
+      return;
+    }
+    if (focus === 1) {
+      if (key.backspace || key.delete) {
+        setCustom((c) => c.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setCustom((c) => c + input);
+      }
+    }
+  });
+  const dropped = result.ok ? result.warnings.length : 0;
+  const items = result.ok ? result.imported.surfaces.band.lines.map((l) => l.map((i) => i.type).join(", ")) : [];
+  const mapped = items.reduce((n, l) => n + (l ? l.split(", ").length : 0), 0);
+  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx3(Text4, { bold: true, children: "Import from ccstatusline" }),
+    /* @__PURE__ */ jsxs3(Text4, { color: focus === 0 ? "cyan" : void 0, children: [
+      focus === 0 ? "\u25B8 " : "  ",
+      "detected: ",
+      detected
+    ] }),
+    /* @__PURE__ */ jsxs3(Text4, { color: focus === 1 ? "cyan" : void 0, children: [
+      focus === 1 ? "\u25B8 " : "  ",
+      "custom path: ",
+      custom,
+      focus === 1 ? "\u258F" : ""
+    ] }),
+    result.ok ? /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Text4, { children: [
+        "mapped ",
+        mapped,
+        " item(s), dropped ",
+        dropped
+      ] }),
+      items.map((l, i) => /* @__PURE__ */ jsxs3(Text4, { children: [
+        " ",
+        "line ",
+        i + 1,
+        ": ",
+        l
+      ] }, i)),
+      result.warnings.map((w, i) => /* @__PURE__ */ jsxs3(Text4, { color: "yellow", children: [
+        " ",
+        "! ",
+        w
+      ] }, i))
+    ] }) : /* @__PURE__ */ jsxs3(Text4, { color: "yellow", children: [
+      "warning: ",
+      result.message
+    ] }),
+    /* @__PURE__ */ jsx3(Text4, { dimColor: true, children: "\u2191/\u2193 source \xB7 \u23CE import (replaces band) \xB7 esc back" })
+  ] });
+}
+
+// src/screens/items.tsx
+import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
+import { useState as useState3 } from "react";
+
+// src/named-colors.ts
+var all = [...COLORS];
+var NAMED_COLORS = [
+  "(none)",
+  ...all.filter((c) => !c.startsWith("bg")),
+  ...all.filter((c) => c.startsWith("bg"))
+];
+
+// src/screens/items.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SURFACES = ["band", "statusline", "pane"];
+var FIELDS2 = ["fg", "bg", "raw", "merge", "align"];
+var ALIGNS = ["left", "center", "right"];
+var FG = NAMED_COLORS.filter((c) => !c.startsWith("bg"));
+var BG = ["(none)", ...NAMED_COLORS.filter((c) => c.startsWith("bg"))];
+var WIDGETS = Object.values(registry);
+var wrap = (i, n) => (i + n) % n;
+var isStylable = (item) => item.type !== "flex-separator";
+function Chip({ item, selected }) {
+  const fg = isStylable(item) ? item.fg : void 0;
+  const bg = isStylable(item) ? item.bg : void 0;
+  return /* @__PURE__ */ jsxs4(Text5, { inverse: selected, color: inkColor(fg), backgroundColor: inkBg(bg), children: [
+    "[ ",
+    item.type,
+    " ]"
+  ] });
+}
+function Swatch({ name, bg }) {
+  if (!name) {
+    return /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(none)" });
+  }
+  return /* @__PURE__ */ jsxs4(Text5, { color: bg ? void 0 : inkColor(name), backgroundColor: bg ? inkBg(name) : void 0, children: [
+    " ",
+    name,
+    " "
+  ] });
+}
+function Items({ config, setConfig, goHome }) {
+  const [surface, setSurface] = useState3("band");
+  const [sel, setSel] = useState3(0);
+  const [mode, setMode] = useState3("strip");
+  const [field, setField] = useState3(0);
+  const [pick, setPick] = useState3(0);
+  const items = config.surfaces[surface].lines[0] ?? [];
+  const cur = items[Math.min(sel, items.length - 1)];
+  const idx = cur ? items.indexOf(cur) : -1;
+  const commit = (next) => {
+    const s = config.surfaces[surface];
+    const lines = [next, ...s.lines.slice(1)];
+    const c = { ...config, surfaces: { ...config.surfaces, [surface]: { ...s, lines } } };
+    setConfig(c);
+  };
+  const patch = (p) => {
+    const base = items[idx];
+    if (idx < 0 || !base || !isStylable(base)) {
+      return;
+    }
+    const item = { ...base, ...p };
+    for (const k of Object.keys(p)) {
+      if (item[k] === void 0) {
+        delete item[k];
+      }
+    }
+    commit(items.map((it, i) => i === idx ? item : it));
+  };
+  const cycleColor = (list, cur2, dir) => {
+    const n = list[wrap(Math.max(0, list.indexOf(cur2 ?? "(none)")) + dir + list.length, list.length)] ?? "(none)";
+    return n === "(none)" ? void 0 : n;
+  };
+  const change = (dir) => {
+    if (!cur || !isStylable(cur)) {
+      return;
+    }
+    const f = FIELDS2[field];
+    if (f === "fg") {
+      patch({ fg: cycleColor(FG, cur.fg, dir) });
+    } else if (f === "bg") {
+      patch({ bg: cycleColor(BG, cur.bg, dir) });
+    } else if (f === "raw") {
+      patch({ rawValue: !cur.rawValue });
+    } else if (f === "merge") {
+      patch({ merge: !cur.merge });
+    } else {
+      patch({ align: ALIGNS[wrap(ALIGNS.indexOf(cur.align ?? "left") + dir + 3, 3)] ?? "left" });
+    }
+  };
+  const move = (dir) => {
+    const j = idx + dir;
+    if (idx < 0 || j < 0 || j >= items.length) {
+      return;
+    }
+    const next = [...items];
+    const a = next[idx];
+    const b = next[j];
+    if (a === void 0 || b === void 0) {
+      return;
+    }
+    next[idx] = b;
+    next[j] = a;
+    commit(next);
+    setSel(j);
+  };
+  useInput3((input, key) => {
+    if (mode === "picker") {
+      if (key.escape) {
+        setMode("strip");
+      } else if (key.upArrow) {
+        setPick((p) => wrap(p - 1 + WIDGETS.length, WIDGETS.length));
+      } else if (key.downArrow) {
+        setPick((p) => wrap(p + 1, WIDGETS.length));
+      } else if (key.return) {
+        const picked = WIDGETS[pick];
+        if (picked) {
+          const type = picked.type;
+          const id = `${type}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+          const newItem = type === "custom-text" ? { id, type, text: "" } : type === "custom-command" ? { id, type, command: "" } : type === "flex-separator" ? { id, type } : { id, type };
+          commit([...items, newItem]);
+          setSel(items.length);
+          setMode("strip");
+        }
+      }
+    } else if (mode === "editor") {
+      if (key.escape) {
+        setMode("strip");
+      } else if (key.upArrow) {
+        setField((f) => Math.max(0, f - 1));
+      } else if (key.downArrow) {
+        setField((f) => Math.min(FIELDS2.length - 1, f + 1));
+      } else if (key.leftArrow) {
+        change(-1);
+      } else if (key.rightArrow) {
+        change(1);
+      }
+    } else {
+      if (key.escape) {
+        goHome();
+      } else if (key.tab) {
+        setSurface((s) => SURFACES[wrap(SURFACES.indexOf(s) + 1, SURFACES.length)] ?? s);
+        setSel(0);
+      } else if (key.leftArrow) {
+        setSel(Math.max(0, idx - 1));
+      } else if (key.rightArrow) {
+        setSel(Math.min(items.length - 1, idx + 1));
+      } else if (input === "[") {
+        move(-1);
+      } else if (input === "]") {
+        move(1);
+      } else if (input === "a") {
+        setPick(0);
+        setMode("picker");
+      } else if (input === "x" && idx >= 0) {
+        commit(items.filter((_, i) => i !== idx));
+        setSel(Math.max(0, idx - 1));
+      } else if (input === "e" && idx >= 0) {
+        setField(0);
+        setMode("editor");
+      }
+    }
+  });
+  const row = (i, name, value) => /* @__PURE__ */ jsxs4(Box5, { children: [
+    /* @__PURE__ */ jsxs4(Text5, { color: mode === "editor" && field === i ? "cyan" : void 0, children: [
+      mode === "editor" && field === i ? "\u25B8 " : "  ",
+      name,
+      ":",
+      " "
+    ] }),
+    value
+  ] }, name);
+  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx4(Box5, { children: SURFACES.map((s) => /* @__PURE__ */ jsxs4(Text5, { bold: s === surface, color: s === surface ? "cyan" : void 0, children: [
+      " ",
+      s === surface ? `[${s}]` : s,
+      " "
+    ] }, s)) }),
+    /* @__PURE__ */ jsx4(Box5, { children: items.length === 0 ? /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(no items \u2014 press a)" }) : items.map((it, i) => /* @__PURE__ */ jsx4(Chip, { item: it, selected: i === idx }, it.id)) }),
+    mode === "picker" ? /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx4(Text5, { bold: true, children: "Add widget" }),
+      WIDGETS.map((w, i) => /* @__PURE__ */ jsxs4(Text5, { color: i === pick ? "cyan" : void 0, children: [
+        i === pick ? "\u25B8 " : "  ",
+        w.type,
+        " ",
+        /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: w.label })
+      ] }, w.type))
+    ] }) : cur && (isStylable(cur) ? /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, borderStyle: "round", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs4(Text5, { children: [
+        "type: ",
+        cur.type
+      ] }),
+      row(0, "fg", /* @__PURE__ */ jsx4(Swatch, { name: cur.fg })),
+      row(1, "bg", /* @__PURE__ */ jsx4(Swatch, { name: cur.bg, bg: true })),
+      row(2, "raw", /* @__PURE__ */ jsx4(Text5, { children: cur.rawValue ? "on" : "off" })),
+      row(3, "merge", /* @__PURE__ */ jsx4(Text5, { children: cur.merge ? "on" : "off" })),
+      row(4, "align", /* @__PURE__ */ jsx4(Text5, { children: cur.align ?? "left" }))
+    ] }) : /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, borderStyle: "round", paddingX: 1, children: [
+      /* @__PURE__ */ jsxs4(Text5, { children: [
+        "type: ",
+        cur.type
+      ] }),
+      /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(flex separator \u2014 no style options)" })
+    ] })),
+    /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: mode === "strip" ? "\u2190/\u2192 select \xB7 [/] move \xB7 a add \xB7 x remove \xB7 e edit \xB7 tab surface \xB7 esc back" : mode === "editor" ? "\u2191/\u2193 field \xB7 \u2190/\u2192 change \xB7 esc done" : "\u2191/\u2193 choose \xB7 enter add \xB7 esc cancel" })
+  ] });
+}
+
+// src/screens/menu.tsx
+import { Box as Box6, Text as Text6, useInput as useInput4 } from "ink";
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ITEMS = [
+  ["items", "Edit items"],
+  ["themes", "Themes"],
+  ["powerline", "Powerline & separators"],
+  ["surfaces", "Surfaces"],
+  ["statusline", "Native status line"],
+  ["defaults", "Global defaults"],
+  ["preview", "Preview"],
+  ["import", "Import from ccstatusline"],
+  ["save", "Save & quit"],
+  ["quit", "Quit without saving"]
+];
+function Menu({ onSelect }) {
+  const [i, setI] = useState4(0);
+  useInput4((input, key) => {
+    if (key.upArrow) {
+      setI((v) => Math.max(0, v - 1));
+    } else if (key.downArrow) {
+      setI((v) => Math.min(ITEMS.length - 1, v + 1));
+    } else if (key.return) {
+      const entry = ITEMS[i];
+      if (entry) {
+        onSelect(entry[0]);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs5(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Text6, { bold: true, children: "ccstatus \xB7 configurator" }),
+    ITEMS.map(([id, label], idx) => /* @__PURE__ */ jsxs5(Text6, { color: idx === i ? "cyan" : void 0, children: [
+      idx === i ? "\u25B8 " : "  ",
+      label
+    ] }, id))
+  ] });
+}
+
+// src/screens/powerline.tsx
+import { Box as Box7, Text as Text7, useInput as useInput5 } from "ink";
+import { useState as useState5 } from "react";
+
+// src/separators.ts
+var SEPARATOR_PRESETS = [
+  { char: "\uE0B0", name: "Triangle Right", code: "U+E0B0" },
+  { char: "\uE0B2", name: "Triangle Left", code: "U+E0B2" },
+  { char: "\uE0B4", name: "Round Right", code: "U+E0B4" },
+  { char: "\uE0B6", name: "Round Left", code: "U+E0B6" },
+  { char: "\uE0BA", name: "Lower Triangle", code: "U+E0BA" },
+  { char: "\uE0BE", name: "Diagonal", code: "U+E0BE" }
+];
+
+// src/screens/powerline.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var MODES = ["powerline", "space", "none"];
+var CUSTOM = SEPARATOR_PRESETS.length;
+var SEP_ROW = 0;
+var GLYPH_ROW = (i) => 1 + i;
+var INVERT_ROW = 1 + SEPARATOR_PRESETS.length + 1;
+var LAST_ROW = INVERT_ROW;
+var codeOf = (g) => {
+  const cp = g.codePointAt(0);
+  return cp === void 0 ? "" : "U+" + cp.toString(16).toUpperCase().padStart(4, "0");
+};
+function Powerline({ config, setConfig, goHome }) {
+  const [focus, setFocus] = useState5(0);
+  const [editing, setEditing] = useState5(false);
+  const [draft, setDraft] = useState5("");
+  const d = config.defaults;
+  const update = (patch) => setConfig({ ...config, defaults: { ...d, ...patch } });
+  const isPreset = SEPARATOR_PRESETS.some((p) => p.char === d.glyph);
+  const hasCustom = d.glyph !== "" && !isPreset;
+  const activate = () => {
+    if (focus === INVERT_ROW) {
+      update({ invert: !d.invert });
+    } else if (focus > SEP_ROW) {
+      const i = focus - 1;
+      if (i === CUSTOM) {
+        setDraft("");
+        setEditing(true);
+      } else {
+        const preset = SEPARATOR_PRESETS[i];
+        if (preset) {
+          update({ glyph: preset.char });
+        }
+      }
+    }
+  };
+  useInput5((input, key) => {
+    if (editing) {
+      if (key.escape) {
+        setEditing(false);
+      } else if (key.return) {
+        if (draft) {
+          update({ glyph: draft });
+        }
+        setEditing(false);
+      } else if (key.backspace || key.delete) {
+        setDraft((t) => Array.from(t).slice(0, -1).join(""));
+      } else if (input && !key.ctrl && !key.meta) {
+        setDraft((t) => t + input);
+      }
+      return;
+    }
+    if (key.escape) {
+      goHome();
+    } else if (key.upArrow) {
+      setFocus((f) => Math.max(0, f - 1));
+    } else if (key.downArrow) {
+      setFocus((f) => Math.min(LAST_ROW, f + 1));
+    } else if ((key.leftArrow || key.rightArrow) && focus === SEP_ROW) {
+      const dir = key.rightArrow ? 1 : -1;
+      update({
+        separator: MODES[(MODES.indexOf(d.separator) + dir + MODES.length) % MODES.length] ?? d.separator
+      });
+    } else if (key.return || input === " ") {
+      activate();
+    }
+  });
+  const cursor = (idx) => focus === idx ? "\u25B8 " : "  ";
+  const color = (idx) => focus === idx ? "cyan" : void 0;
+  return /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx6(Text7, { bold: true, children: "Powerline" }),
+    /* @__PURE__ */ jsxs6(Text7, { color: color(SEP_ROW), children: [
+      cursor(SEP_ROW),
+      "separator: ",
+      d.separator
+    ] }),
+    /* @__PURE__ */ jsx6(Text7, { dimColor: true, children: " glyph" }),
+    SEPARATOR_PRESETS.map((p, i) => /* @__PURE__ */ jsxs6(Text7, { color: color(GLYPH_ROW(i)), children: [
+      cursor(GLYPH_ROW(i)),
+      d.glyph === p.char ? "(\u2022)" : "( )",
+      " ",
+      p.name,
+      " ",
+      p.code,
+      " ",
+      p.char
+    ] }, p.code)),
+    /* @__PURE__ */ jsxs6(Text7, { color: color(GLYPH_ROW(CUSTOM)), children: [
+      cursor(GLYPH_ROW(CUSTOM)),
+      hasCustom ? "(\u2022)" : "( )",
+      " ",
+      editing ? `Custom: ${draft}_ (enter to set, esc to cancel)` : hasCustom ? `Custom (${codeOf(d.glyph)}) ${d.glyph}` : "Custom\u2026"
+    ] }),
+    /* @__PURE__ */ jsxs6(Text7, { color: color(INVERT_ROW), children: [
+      cursor(INVERT_ROW),
+      "invert background: ",
+      d.invert ? "on" : "off",
+      /* @__PURE__ */ jsx6(Text7, { color: "gray", children: " (stored, not applied)" })
+    ] }),
+    /* @__PURE__ */ jsx6(Text7, { dimColor: true, children: "\u2191/\u2193 move \xB7 \u2190/\u2192 separator \xB7 enter select \xB7 esc back" })
+  ] });
+}
+
+// src/screens/preview-screen.tsx
+import { Box as Box8, Text as Text8, useInput as useInput6 } from "ink";
+import { useState as useState6 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SURFACES2 = ["band", "statusline", "pane"];
+function PreviewScreen({
+  config,
+  snapshot,
+  source,
+  goHome
+}) {
+  const termWidth = process.stdout.columns || 120;
+  const widths = [80, 120, 160, termWidth];
+  const [wi, setWi] = useState6(0);
+  const [si, setSi] = useState6(0);
+  useInput6((input, key) => {
+    if (key.escape) {
+      goHome();
+    } else if (input === "w") {
+      setWi((v) => (v + 1) % widths.length);
+    } else if (input === "s") {
+      setSi((v) => (v + 1) % SURFACES2.length);
+    }
+  });
+  const width = widths[wi] ?? termWidth;
+  const surface = SURFACES2[si] ?? "band";
+  return /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(Text8, { bold: true, children: "Preview" }),
+    /* @__PURE__ */ jsxs7(Text8, { color: "gray", children: [
+      "w width (",
+      width,
+      wi === widths.length - 1 ? " = terminal" : "",
+      ") \xB7 s surface (",
+      surface,
+      ") \xB7 esc back"
+    ] }),
+    /* @__PURE__ */ jsx7(
+      Preview,
+      {
+        config,
+        snapshot,
+        source,
+        width,
+        surface
+      }
+    )
+  ] });
+}
+
+// src/screens/statusline.tsx
+import { Box as Box9, Text as Text9, useInput as useInput7 } from "ink";
+import { useState as useState7 } from "react";
+
+// src/statusline-setup.ts
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync as readFileSync2,
+  renameSync,
+  writeFileSync
+} from "fs";
+import { dirname } from "path";
+var STATUSLINE_COMMAND = "npx @sushant-kum/ccstatus statusline";
+function settingsPath(scope, env = process.env) {
+  if (scope === "project") {
+    return `${process.cwd()}/.claude/settings.json`;
+  }
+  return `${env["HOME"] ?? ""}/.claude/settings.json`;
+}
+var nodeIo = {
+  // `read` returns null only for an absent file; a real read error (EACCES, a
+  // directory, transient I/O) propagates so callers refuse rather than treat an
+  // unreadable settings.json as empty and overwrite it (cf. config-store.ts).
+  read: (path) => existsSync(path) ? readFileSync2(path, "utf8") : null,
+  write: (path, data) => {
+    mkdirSync(dirname(path), { recursive: true });
+    if (existsSync(path)) {
+      try {
+        copyFileSync(path, path + ".bak");
+      } catch {
+      }
+    }
+    const tmp = path + ".tmp";
+    writeFileSync(tmp, data);
+    renameSync(tmp, path);
+  }
+};
+var isOurs = (sl) => {
+  if (!sl || typeof sl !== "object") {
+    return false;
+  }
+  const c = sl.command;
+  return typeof c === "string" && (c === STATUSLINE_COMMAND || /(^|\/)ccstatus statusline$/.test(c));
+};
+function detectStatusline(scope, io = nodeIo, env = process.env) {
+  let text;
+  try {
+    text = io.read(settingsPath(scope, env));
+  } catch {
+    return { state: "unknown" };
+  }
+  if (text === null) {
+    return { state: "absent" };
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return { state: "unknown" };
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return { state: "unknown" };
+  }
+  const sl = parsed.statusLine;
+  if (sl === void 0) {
+    return { state: "absent" };
+  }
+  if (isOurs(sl)) {
+    return { state: "ours" };
+  }
+  const command = sl?.command;
+  if (typeof command !== "string") {
+    return { state: "unknown" };
+  }
+  return { state: "other", command };
+}
+function enableStatusline(scope, opts = {}, io = nodeIo, env = process.env) {
+  const path = settingsPath(scope, env);
+  let text;
+  try {
+    text = io.read(path);
+  } catch {
+    return { ok: false, message: "settings.json exists but could not be read; left unchanged" };
+  }
+  let settings = {};
+  if (text !== null) {
+    try {
+      const parsed = JSON.parse(text);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return { ok: false, message: "settings.json is not a JSON object; left unchanged" };
+      }
+      settings = parsed;
+    } catch {
+      return { ok: false, message: "settings.json is not valid JSON; left unchanged" };
+    }
+  }
+  const existing = settings["statusLine"];
+  if (existing !== void 0 && !isOurs(existing) && !opts.replaceExisting) {
+    return { ok: false, message: "a different statusLine is configured" };
+  }
+  settings["statusLine"] = { type: "command", command: STATUSLINE_COMMAND, padding: 0 };
+  io.write(path, JSON.stringify(settings, null, 2) + "\n");
+  return { ok: true, message: `status line enabled in ${path}` };
+}
+function disableStatusline(scope, io = nodeIo, env = process.env) {
+  const path = settingsPath(scope, env);
+  let text;
+  try {
+    text = io.read(path);
+  } catch {
+    return { ok: false, message: "settings.json exists but could not be read; left unchanged" };
+  }
+  if (text === null) {
+    return { ok: true, message: "no settings.json; nothing to disable" };
+  }
+  let settings;
+  try {
+    const parsed = JSON.parse(text);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return { ok: false, message: "settings.json is not a JSON object; left unchanged" };
+    }
+    settings = parsed;
+  } catch {
+    return { ok: false, message: "settings.json is not valid JSON; left unchanged" };
+  }
+  if (!isOurs(settings["statusLine"])) {
+    return { ok: false, message: "the configured statusLine is not ccstatus; left unchanged" };
+  }
+  delete settings["statusLine"];
+  io.write(path, JSON.stringify(settings, null, 2) + "\n");
+  return { ok: true, message: `status line disabled in ${path}` };
+}
+
+// src/screens/statusline.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function Statusline({
+  goHome,
+  detect = (s) => detectStatusline(s),
+  enable = (s, o) => enableStatusline(s, o),
+  disable = (s) => disableStatusline(s)
+}) {
+  const [scope, setScope] = useState7("user");
+  const [info, setInfo] = useState7(() => detect("user"));
+  const [msg, setMsg] = useState7(null);
+  const [pendingScope, setPendingScope] = useState7(null);
+  const doEnable = (s, replaceExisting) => {
+    setScope(s);
+    const current = detect(s);
+    if (current.state === "other" && !replaceExisting) {
+      setPendingScope(s);
+      setMsg(`A different statusLine is set (${current.command}). Press r to replace it.`);
+      return;
+    }
+    const r = enable(s, { replaceExisting });
+    setMsg(r.message);
+    setPendingScope(null);
+    setInfo(detect(s));
+  };
+  useInput7((input, key) => {
+    if (key.escape) {
+      goHome();
+      return;
+    }
+    if (input === "u") {
+      doEnable("user", false);
+    } else if (input === "p") {
+      doEnable("project", false);
+    } else if (input === "r" && pendingScope) {
+      doEnable(pendingScope, true);
+    } else if (input === "d") {
+      setPendingScope(null);
+      const r = disable(scope);
+      setMsg(r.message);
+      setInfo(detect(scope));
+    }
+  });
+  const state = info.state === "ours" ? "configured (ccstatus)" : info.state === "other" ? `another command: ${info.command}` : info.state === "unknown" ? "settings.json unreadable" : "not configured";
+  return /* @__PURE__ */ jsxs8(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx8(Text9, { bold: true, children: "Native status line" }),
+    /* @__PURE__ */ jsxs8(Text9, { children: [
+      "Current: ",
+      state
+    ] }),
+    /* @__PURE__ */ jsxs8(Text9, { dimColor: true, children: [
+      "u: enable (user) \xB7 p: enable (project) \xB7 d: disable (",
+      scope,
+      ") \xB7 esc: back"
+    ] }),
+    pendingScope && /* @__PURE__ */ jsx8(Text9, { color: "yellow", children: "r: confirm replace" }),
+    msg && /* @__PURE__ */ jsx8(Text9, { color: "cyan", children: msg })
+  ] });
+}
+
+// src/screens/surfaces.tsx
+import { Box as Box10, Text as Text10, useInput as useInput8 } from "ink";
+import { useState as useState8 } from "react";
+
+// src/toast-presets.ts
+var TOAST_PRESETS = [
+  { label: "Context high", when: "ctxPct>80", text: "Context over 80%" },
+  { label: "Context critical", when: "ctxPct>95", text: "Context over 95%" },
+  { label: "Session limit near", when: "fivePct>90", text: "Session limit near" },
+  { label: "Weekly limit near", when: "weekPct>80", text: "Weekly limit near" }
+];
+
+// src/screens/surfaces.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var SURFACES3 = ["band", "statusline", "pane", "toasts"];
+function Surfaces({ config, setConfig, goHome }) {
+  const [focus, setFocus] = useState8(0);
+  const [mode, setMode] = useState8({ kind: "nav" });
+  const s = config.surfaces;
+  const rules = s.toasts.rules;
+  const total = SURFACES3.length + rules.length;
+  const setRules = (next) => setConfig({ ...config, surfaces: { ...s, toasts: { ...s.toasts, rules: next } } });
+  useInput8((input, key) => {
+    if (mode.kind === "preset") {
+      const n = TOAST_PRESETS.length + 1;
+      if (key.escape) {
+        setMode({ kind: "nav" });
+      } else if (key.upArrow) {
+        setMode({ kind: "preset", idx: (mode.idx + n - 1) % n });
+      } else if (key.downArrow) {
+        setMode({ kind: "preset", idx: (mode.idx + 1) % n });
+      } else if (key.return) {
+        const p = TOAST_PRESETS[mode.idx];
+        if (p) {
+          setRules([...rules, { when: p.when, text: p.text, once: true }]);
+          setFocus(SURFACES3.length + rules.length);
+          setMode({ kind: "nav" });
+        } else {
+          setMode({ kind: "edit", target: "new", ruleIdx: -1, buf: "" });
+        }
+      }
+      return;
+    }
+    if (mode.kind === "edit") {
+      if (key.escape) {
+        setMode({ kind: "nav" });
+      } else if (key.return) {
+        if (mode.target === "new") {
+          if (!isValidWhen(mode.buf)) {
+            return;
+          }
+          setRules([...rules, { when: mode.buf.trim(), text: "Custom alert", once: true }]);
+          setFocus(SURFACES3.length + rules.length);
+        } else {
+          setRules(
+            rules.map((r, i) => i === mode.ruleIdx ? { ...r, [mode.target]: mode.buf } : r)
+          );
+        }
+        setMode({ kind: "nav" });
+      } else if (key.backspace || key.delete) {
+        setMode({ ...mode, buf: mode.buf.slice(0, -1) });
+      } else if (input && !key.ctrl && !key.meta && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.tab) {
+        setMode({ ...mode, buf: mode.buf + input });
+      }
+      return;
+    }
+    const ruleIdx = focus - SURFACES3.length;
+    if (key.escape) {
+      goHome();
+    } else if (key.upArrow) {
+      setFocus((f) => Math.max(0, f - 1));
+    } else if (key.downArrow) {
+      setFocus((f) => Math.min(total - 1, f + 1));
+    } else if (input === "a") {
+      setMode({ kind: "preset", idx: 0 });
+    } else if (input === " ") {
+      if (ruleIdx < 0) {
+        const name = SURFACES3[focus];
+        if (name) {
+          setConfig({
+            ...config,
+            surfaces: { ...s, [name]: { ...s[name], enabled: !s[name].enabled } }
+          });
+        }
+      } else if (rules[ruleIdx]) {
+        setRules(rules.map((r, i) => i === ruleIdx ? { ...r, once: !r.once } : r));
+      }
+    } else if (ruleIdx >= 0) {
+      const r = rules[ruleIdx];
+      if (r && input === "w") {
+        setMode({ kind: "edit", target: "when", ruleIdx, buf: r.when });
+      } else if (r && input === "t") {
+        setMode({ kind: "edit", target: "text", ruleIdx, buf: r.text });
+      } else if (r && input === "x") {
+        setRules(rules.filter((_, i) => i !== ruleIdx));
+        setFocus((f) => Math.max(0, f - 1));
+      }
+    }
+  });
+  const cur = (i) => focus === i ? "\u25B8 " : "  ";
+  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx9(Text10, { bold: true, children: "Surfaces" }),
+    SURFACES3.map((name, i) => /* @__PURE__ */ jsxs9(Text10, { color: focus === i ? "cyan" : void 0, children: [
+      cur(i),
+      "[",
+      s[name].enabled ? "x" : " ",
+      "] ",
+      name
+    ] }, name)),
+    /* @__PURE__ */ jsx9(Text10, { bold: true, children: "Toast rules" }),
+    rules.length === 0 && /* @__PURE__ */ jsx9(Text10, { dimColor: true, children: " (none \u2014 press a to add)" }),
+    rules.map((r, i) => {
+      const idx = SURFACES3.length + i;
+      const ok = isValidWhen(r.when);
+      const editing = mode.kind === "edit" && mode.ruleIdx === i;
+      return /* @__PURE__ */ jsxs9(Box10, { children: [
+        /* @__PURE__ */ jsx9(Text10, { color: focus === idx ? "cyan" : void 0, children: cur(idx) }),
+        /* @__PURE__ */ jsxs9(Text10, { color: ok ? void 0 : "red", children: [
+          "when: ",
+          editing && mode.target === "when" ? mode.buf + "_" : r.when,
+          ok ? "" : " \u26A0 invalid"
+        ] }),
+        /* @__PURE__ */ jsxs9(Text10, { color: focus === idx ? "cyan" : void 0, children: [
+          "  ",
+          "text: ",
+          editing && mode.target === "text" ? mode.buf + "_" : `"${r.text}"`,
+          " [",
+          r.once ? "x" : " ",
+          "] once"
+        ] })
+      ] }, i);
+    }),
+    mode.kind === "preset" && /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx9(Text10, { bold: true, children: "Add rule \u2014 pick a preset" }),
+      [...TOAST_PRESETS.map((p) => `${p.label} (${p.when})`), "Custom\u2026"].map((l, i) => /* @__PURE__ */ jsxs9(Text10, { color: mode.idx === i ? "cyan" : void 0, children: [
+        mode.idx === i ? "\u25B8 " : "  ",
+        l
+      ] }, l))
+    ] }),
+    mode.kind === "edit" && mode.target === "new" && /* @__PURE__ */ jsxs9(Text10, { children: [
+      "when (e.g. ctxPct>80): ",
+      mode.buf,
+      "_",
+      mode.buf && !isValidWhen(mode.buf) ? " \u26A0 invalid" : ""
+    ] }),
+    /* @__PURE__ */ jsx9(Text10, { dimColor: true, children: "\u2191/\u2193 nav \xB7 space toggle \xB7 a add \xB7 w when \xB7 t text \xB7 x remove \xB7 esc back" })
+  ] });
+}
+
+// src/screens/themes.tsx
+import { Box as Box11, Text as Text11, useInput as useInput9 } from "ink";
+import { useState as useState9 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var FG2 = NAMED_COLORS.filter((c) => !c.startsWith("bg"));
+var BG2 = NAMED_COLORS.filter((c) => c.startsWith("bg"));
+var FIELDS3 = ["fg", "bg"];
+function uniqueName(base, themes) {
+  if (!(base in themes)) {
+    return base;
+  }
+  let i = 2;
+  while (`${base}-${i}` in themes) {
+    i++;
+  }
+  return `${base}-${i}`;
+}
+function Themes({ config, setConfig, goHome }) {
+  const names = Object.keys(config.themes);
+  const [sel, setSel] = useState9(Math.max(0, names.indexOf(config.theme)));
+  const [mode, setMode] = useState9("list");
+  const [w, setW] = useState9(0);
+  const [field, setField] = useState9(0);
+  const [pick, setPick] = useState9(0);
+  const name = names[Math.min(sel, names.length - 1)];
+  const theme = name && config.themes[name] || {};
+  const widgets = Object.keys(theme);
+  const widget = widgets[Math.min(w, widgets.length - 1)];
+  const list = FIELDS3[field] === "fg" ? FG2 : BG2;
+  const setThemes = (themes, active = config.theme) => setConfig({ ...config, theme: active, themes });
+  useInput9((input, key) => {
+    if (mode === "list") {
+      if (key.escape) {
+        goHome();
+      } else if (key.upArrow) {
+        setSel((s) => Math.max(0, s - 1));
+      } else if (key.downArrow) {
+        setSel((s) => Math.min(names.length - 1, s + 1));
+      } else if (key.return) {
+        if (name) {
+          setConfig({ ...config, theme: name });
+        }
+      } else if (key.rightArrow) {
+        if (widgets.length) {
+          setW(0);
+          setMode("colors");
+        }
+      } else if (input === "n") {
+        const n = uniqueName("custom", config.themes);
+        setThemes({ ...config.themes, [n]: {} });
+        setSel(names.length);
+      } else if (input === "d" && name) {
+        const n = uniqueName(`${name}-copy`, config.themes);
+        setThemes({ ...config.themes, [n]: structuredClone(theme) });
+        setSel(names.length);
+      }
+    } else if (mode === "colors") {
+      if (key.escape || key.leftArrow && field === 0) {
+        setMode("list");
+      } else if (key.upArrow) {
+        setW((i) => Math.max(0, i - 1));
+      } else if (key.downArrow) {
+        setW((i) => Math.min(widgets.length - 1, i + 1));
+      } else if (key.leftArrow) {
+        setField(0);
+      } else if (key.rightArrow) {
+        setField(1);
+      } else if (key.return && widget) {
+        const cur = theme[widget]?.[FIELDS3[field] ?? "fg"];
+        setPick(Math.max(0, list.indexOf(cur ?? "")));
+        setMode("picker");
+      }
+    } else {
+      if (key.escape) {
+        setMode("colors");
+      } else if (key.upArrow) {
+        setPick((p) => Math.max(0, p - 1));
+      } else if (key.downArrow) {
+        setPick((p) => Math.min(list.length - 1, p + 1));
+      } else if (key.return && name && widget) {
+        const f = FIELDS3[field] ?? "fg";
+        const chosen = list[pick];
+        if (chosen) {
+          const entry = { ...theme[widget], [f]: chosen };
+          setThemes({ ...config.themes, [name]: { ...theme, [widget]: entry } });
+          setMode("colors");
+        }
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx10(Text11, { bold: true, children: "Themes" }),
+    names.map((n, i) => /* @__PURE__ */ jsxs10(Text11, { color: i === sel && mode === "list" ? "cyan" : void 0, children: [
+      i === sel ? "\u25B8 " : "  ",
+      n,
+      n === config.theme ? " (active)" : ""
+    ] }, n)),
+    /* @__PURE__ */ jsxs10(Text11, { dimColor: true, children: [
+      name,
+      " colors:"
+    ] }),
+    widgets.map((wt, i) => {
+      const c = theme[wt] ?? {};
+      const on = mode !== "list" && i === w;
+      return /* @__PURE__ */ jsxs10(Text11, { children: [
+        on ? "\u25B8 " : "  ",
+        wt.padEnd(20),
+        /* @__PURE__ */ jsxs10(Text11, { color: inkColor(c.fg), inverse: on && field === 0, children: [
+          " ",
+          c.fg ?? "(none)",
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs10(Text11, { backgroundColor: inkBg(c.bg), inverse: on && field === 1, children: [
+          " ",
+          c.bg ?? "(none)",
+          " "
+        ] })
+      ] }, wt);
+    }),
+    mode === "picker" && /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs10(Text11, { bold: true, children: [
+        "Pick ",
+        FIELDS3[field],
+        " for ",
+        widget
+      ] }),
+      list.map((c, i) => /* @__PURE__ */ jsxs10(Text11, { color: i === pick ? "cyan" : void 0, children: [
+        i === pick ? "\u25B8 " : "  ",
+        /* @__PURE__ */ jsxs10(
+          Text11,
+          {
+            color: FIELDS3[field] === "fg" ? inkColor(c) : void 0,
+            backgroundColor: FIELDS3[field] === "bg" ? inkBg(c) : void 0,
+            children: [
+              " ",
+              c,
+              " "
+            ]
+          }
+        )
+      ] }, c))
+    ] }),
+    /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: mode === "list" ? "\u2191/\u2193 select \xB7 \u23CE activate \xB7 \u2192 colors \xB7 n new \xB7 d duplicate \xB7 esc back" : mode === "colors" ? "\u2191/\u2193 widget \xB7 \u2190/\u2192 fg/bg \xB7 \u23CE pick \xB7 esc back" : "\u2191/\u2193 choose \xB7 \u23CE set \xB7 esc cancel" })
+  ] });
+}
+
+// src/app.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function Placeholder({ id, goHome }) {
+  useInput10((_i, key) => {
+    if (key.escape) {
+      goHome();
+    }
+  });
+  return /* @__PURE__ */ jsxs11(Text12, { children: [
+    id,
+    " \u2026coming soon (esc)\u2026"
+  ] });
+}
+function PlaceholderOrScreen({
+  id,
+  snapshot,
+  source,
+  ...props
+}) {
+  switch (id) {
+    case "defaults":
+      return /* @__PURE__ */ jsx11(Defaults, { ...props });
+    case "themes":
+      return /* @__PURE__ */ jsx11(Themes, { ...props });
+    case "powerline":
+      return /* @__PURE__ */ jsx11(Powerline, { ...props });
+    case "items":
+      return /* @__PURE__ */ jsx11(Items, { ...props });
+    case "surfaces":
+      return /* @__PURE__ */ jsx11(Surfaces, { ...props });
+    case "statusline":
+      return /* @__PURE__ */ jsx11(Statusline, { ...props });
+    case "import":
+      return /* @__PURE__ */ jsx11(Import, { ...props });
+    case "preview":
+      return /* @__PURE__ */ jsx11(PreviewScreen, { ...props, snapshot, source });
+    default:
+      return /* @__PURE__ */ jsx11(Placeholder, { id, goHome: props.goHome });
+  }
+}
+function App({ modProbe } = {}) {
+  const { exit } = useApp();
+  const probe = modProbe ?? {
+    detect: () => detectModStatus(),
+    install: () => installMod()
+  };
+  const loaded = useMemo2(() => loadConfigFile(configPath()), []);
+  const [config, setConfig] = useState10(loaded.config);
+  const [screen, setScreen] = useState10("menu");
+  const [saveError, setSaveError] = useState10(null);
+  const [saveWarnings, setSaveWarnings] = useState10([]);
+  const [saved, setSaved] = useState10(false);
+  const [modStatus, setModStatus] = useState10(null);
+  const [installing, setInstalling] = useState10(false);
+  const [installMsg, setInstallMsg] = useState10(null);
+  const [installOk, setInstallOk] = useState10(true);
+  const installStartedRef = useRef(false);
+  const mountedRef = useRef(true);
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    []
+  );
+  const snap = readSnapshot(snapshotPath());
+  const width = process.stdout.columns || 120;
+  useEffect(() => {
+    probe.detect().then((s) => {
+      if (mountedRef.current) {
+        setModStatus(s);
+      }
+    }).catch(() => {
+      if (mountedRef.current) {
+        setModStatus("unknown");
+      }
+    });
+  }, []);
+  useInput10((input) => {
+    if (screen !== "menu") {
+      return;
+    }
+    if (input === "q") {
+      exit();
+      return;
+    }
+    if (input === "i" && modStatus === "absent" && !installStartedRef.current) {
+      installStartedRef.current = true;
+      setInstalling(true);
+      probe.install().then((r) => {
+        if (!mountedRef.current) {
+          return;
+        }
+        setInstallMsg(r.message);
+        setInstallOk(r.ok);
+        if (r.ok) {
+          setModStatus("installed");
+        }
+      }).catch((e) => {
+        if (!mountedRef.current) {
+          return;
+        }
+        setInstallMsg(e instanceof Error ? e.message : String(e));
+        setInstallOk(false);
+      }).finally(() => {
+        installStartedRef.current = false;
+        if (mountedRef.current) {
+          setInstalling(false);
+        }
+      });
+    }
+  });
+  const save = () => {
+    try {
+      setSaveWarnings(saveConfigFile(configPath(), config));
+      setSaveError(null);
+      setSaved(true);
+      return true;
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : String(e));
+      return false;
+    }
+  };
+  const common = { config, setConfig, goHome: () => setScreen("menu") };
+  return /* @__PURE__ */ jsxs11(Box12, { flexDirection: "column", paddingX: 1, children: [
+    screen === "menu" ? /* @__PURE__ */ jsx11(
+      Menu,
+      {
+        onSelect: (id) => {
+          if (id === "quit") {
+            exit();
+          } else if (id === "save") {
+            if (save()) {
+              exit();
+            }
+          } else {
+            setScreen(id);
+          }
+        }
+      }
+    ) : /* @__PURE__ */ jsx11(
+      PlaceholderOrScreen,
+      {
+        id: screen,
+        ...common,
+        snapshot: snap.snapshot,
+        source: snap.source
+      }
+    ),
+    !saved && loaded.warnings.length > 0 && /* @__PURE__ */ jsxs11(Text12, { color: "yellow", children: [
+      "\u26A0 existing config: ",
+      loaded.warnings.join("; "),
+      " \u2014 editing from defaults; saving replaces it (a .bak is kept)"
+    ] }),
+    saveWarnings.length > 0 && /* @__PURE__ */ jsxs11(Text12, { color: "yellow", children: [
+      "\u26A0 saved with changes: ",
+      saveWarnings.join("; ")
+    ] }),
+    saveError && /* @__PURE__ */ jsxs11(Text12, { color: "red", children: [
+      "Could not save config: ",
+      saveError
+    ] }),
+    installMsg ? /* @__PURE__ */ jsxs11(Text12, { color: installOk ? "green" : "red", children: [
+      installOk ? "\u2713 " : "\u26A0 ",
+      installMsg
+    ] }) : modStatus === "absent" ? /* @__PURE__ */ jsxs11(Text12, { color: "yellow", children: [
+      "\u26A0 ccstatus mod not installed \u2014 press i to install (",
+      PLUGIN_ID,
+      ")",
+      installing ? " \u2026 installing" : ""
+    ] }) : modStatus === "disabled" ? /* @__PURE__ */ jsxs11(Text12, { color: "yellow", children: [
+      "\u26A0 ccstatus mod installed but disabled \u2014 enable it: claude plugin enable ",
+      PLUGIN_ID
+    ] }) : modStatus === "unknown" ? /* @__PURE__ */ jsxs11(Text12, { color: "yellow", children: [
+      "\u26A0 couldn't check if the mod is installed \u2014 if the bar isn't showing, run: claude plugin marketplace add ",
+      MARKETPLACE_SLUG,
+      " && claude plugin install ",
+      PLUGIN_ID
+    ] }) : null,
+    /* @__PURE__ */ jsx11(Preview, { config, snapshot: snap.snapshot, source: snap.source, width })
+  ] });
+}
+export {
+  App
+};