oh-my-claudecode 0.2.7 → 0.2.9

package/tui/dashboard.tsx

@@ -0,0 +1,504 @@
+/**
+ * oh-my-claudecode dashboard — OpenTUI app, run with Bun via
+ * `oh-my-claudecode dashboard`.
+ *
+ * Design language: gruvbox dark soft, editorial calm. No border soup —
+ * whitespace, dim caps section labels, one ember-orange accent, and a
+ * single thin rule under the nav. Health leads with a verdict sentence;
+ * detail is opt-in. Pure renderer: data via `stats --json`, settings
+ * writes go to the config file + background sync.
+ *
+ * Keys: ←→/1-4 tabs · ↑↓ select · enter toggle · a all checks ·
+ *       r refresh · q quit
+ */
+import { createCliRenderer } from "@opentui/core"
+import { createRoot, useKeyboard, useTerminalDimensions } from "@opentui/react"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+  loadSnapshotAsync,
+  toggleDisabled,
+  togglePillar,
+  type StatsSnapshot,
+} from "./data.ts"
+import {
+  theme,
+  statusColor,
+  statusIcon,
+  formatBytes,
+  formatAge,
+  formatCount,
+} from "./theme.ts"
+import { renderWordRows, LOGO_SEGMENTS, LOGO_TAGLINE } from "../dist/shared/ascii-logo.js"
+
+const TABS = ["overview", "doctor", "agents", "settings"] as const
+type Tab = (typeof TABS)[number]
+
+// ── Typography helpers ──────────────────────────────────────────────────
+
+function SectionLabel({ children }: { children: string }) {
+  return (
+    <text style={{ fg: theme.faint }}>
+      {children.toUpperCase().split("").join(" ")}
+    </text>
+  )
+}
+
+function Rule({ width }: { width: number }) {
+  return <text style={{ fg: theme.bgHi }}>{"─".repeat(Math.max(0, width))}</text>
+}
+
+function BigStat(props: { label: string; value: string; color?: string }) {
+  return (
+    <box style={{ flexDirection: "column", marginRight: 5 }}>
+      <text style={{ fg: props.color ?? theme.fg }}>{props.value}</text>
+      <text style={{ fg: theme.dim }}>{props.label}</text>
+    </box>
+  )
+}
+
+function Field(props: { label: string; value: string; valueColor?: string; note?: string }) {
+  return (
+    <text>
+      <span style={{ fg: theme.dim }}>{props.label.padEnd(14)}</span>
+      <span style={{ fg: props.valueColor ?? theme.fg }}>{props.value}</span>
+      {props.note ? <span style={{ fg: theme.faint }}>{"   " + props.note}</span> : null}
+    </text>
+  )
+}
+
+/** One-sentence health verdict — the calm summary that replaces the wall. */
+function verdict(snapshot: StatsSnapshot): { text: string; color: string; icon: string } {
+  const errors = snapshot.doctor.filter((d) => d.status === "error").length
+  const warns = snapshot.doctor.filter((d) => d.status === "warn").length
+  if (errors > 0)
+    return {
+      icon: "○",
+      color: theme.err,
+      text: `${errors} check${errors > 1 ? "s" : ""} failing, ${warns} advisory — see doctor`,
+    }
+  if (warns > 0)
+    return {
+      icon: "◐",
+      color: theme.warn,
+      text: `working, with ${warns} advisor${warns > 1 ? "ies" : "y"} — see doctor`,
+    }
+  return { icon: "●", color: theme.ok, text: "all systems quiet" }
+}
+
+// ── Splash ──────────────────────────────────────────────────────────────
+
+function Splash({ version, loading }: { version: string | null; loading: boolean }) {
+  const segments = LOGO_SEGMENTS.map((s) => ({ ...s, rows: renderWordRows(s.text) }))
+  return (
+    <box
+      style={{
+        backgroundColor: theme.bg,
+        flexDirection: "column",
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      <box style={{ flexDirection: "column" }}>
+        {[0, 1, 2].map((row) => (
+          <text key={row}>
+            {segments.map((segment, i) => (
+              <span key={i} style={{ fg: segment.color }}>
+                {segment.rows[row] + " "}
+              </span>
+            ))}
+          </text>
+        ))}
+      </box>
+      <text style={{ fg: theme.dim }}>{LOGO_TAGLINE}</text>
+      <text style={{ fg: theme.faint }}>{version ? `v${version}` : " "}</text>
+      <text> </text>
+      <text style={{ fg: theme.faint }}>
+        {loading ? "consulting the necronomicon…" : "press any key"}
+      </text>
+    </box>
+  )
+}
+
+// ── Tabs ────────────────────────────────────────────────────────────────
+
+function OverviewTab({ snapshot }: { snapshot: StatsSnapshot }) {
+  const a = snapshot.archive
+  const c = snapshot.capture
+  const v = verdict(snapshot)
+  const captureAgeDays = c.lastSuccessEpoch
+    ? (Date.now() / 1000 - c.lastSuccessEpoch) / 86400
+    : Infinity
+  const phases = Object.entries(a.bindPhases)
+  const ritualDone = phases.length > 0 && phases.every(([, s]) => s === "completed")
+
+  return (
+    <box style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}>
+      <text>
+        <span style={{ fg: v.color }}>{v.icon} </span>
+        <span style={{ fg: theme.muted }}>{v.text}</span>
+      </text>
+      <text> </text>
+
+      <SectionLabel>archive</SectionLabel>
+      <box style={{ flexDirection: "row" }}>
+        <BigStat label="memories" value={formatCount(a.memories)} color={theme.accent} />
+        <BigStat label="observations" value={formatCount(a.observations)} />
+        <BigStat label="sessions" value={formatCount(a.sessions)} />
+        <BigStat
+          label="awaiting compression"
+          value={formatCount(a.pendingCompression)}
+          color={a.pendingCompression > 0 ? theme.gold : theme.fg}
+        />
+      </box>
+      <text> </text>
+
+      <SectionLabel>system</SectionLabel>
+      <Field
+        label="embeddings"
+        value={a.embeddingProvider ?? "none"}
+        note={`${a.embeddingDimensions ?? "?"} dims · model cache ${formatBytes(a.modelCacheBytes)}`}
+      />
+      <Field
+        label="capture"
+        value={`last ingest ${formatAge(c.lastSuccessEpoch)}`}
+        valueColor={captureAgeDays < 2 ? theme.fg : captureAgeDays < 7 ? theme.warn : theme.err}
+        note={`${c.cronInstalled ? "cron active" : "cron missing"} · retention ${
+          c.retentionDays ? `${c.retentionDays}d` : "~30d default"
+        }`}
+      />
+      <Field label="archive size" value={formatBytes(a.diskBytes)} note="necronomicon.json" />
+      <Field
+        label="ritual"
+        value={
+          phases.length === 0
+            ? "not bound"
+            : ritualDone
+              ? "complete"
+              : phases
+                  .filter(([, s]) => s !== "completed")
+                  .map(([p, s]) => `${p}: ${s}`)
+                  .join(" · ")
+        }
+        valueColor={phases.length === 0 ? theme.warn : ritualDone ? theme.fg : theme.gold}
+        note={phases.length === 0 ? "run `oh-my-claudecode bind`" : undefined}
+      />
+    </box>
+  )
+}
+
+function DoctorTab({ snapshot, showAll }: { snapshot: StatsSnapshot; showAll: boolean }) {
+  const v = verdict(snapshot)
+  const issues = snapshot.doctor.filter((d) => d.status !== "ok")
+  const visible = showAll ? snapshot.doctor : issues
+
+  return (
+    <box style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}>
+      <text>
+        <span style={{ fg: v.color }}>{v.icon} </span>
+        <span style={{ fg: theme.muted }}>{v.text}</span>
+      </text>
+      <text> </text>
+      {issues.length === 0 && !showAll ? (
+        <text style={{ fg: theme.dim }}>
+          Nothing needs attention. Press <span style={{ fg: theme.accent }}>a</span> to see
+          every check.
+        </text>
+      ) : (
+        <>
+          <SectionLabel>{showAll ? "all checks" : "needs attention"}</SectionLabel>
+          <scrollbox style={{ flexGrow: 1 }}>
+            {visible.map((check) => (
+              <box key={check.name} style={{ flexDirection: "column", marginBottom: 1 }}>
+                <text>
+                  <span style={{ fg: statusColor(check.status) }}>{statusIcon(check.status)}</span>
+                  <span style={{ fg: check.status === "ok" ? theme.dim : theme.fg }}>
+                    {" " + check.name}
+                  </span>
+                </text>
+                <text style={{ fg: check.status === "ok" ? theme.faint : theme.dim }}>
+                  {"  " + check.message}
+                </text>
+              </box>
+            ))}
+          </scrollbox>
+          <text style={{ fg: theme.faint }}>
+            {showAll ? "a hide passing checks" : "a show all checks"}
+          </text>
+        </>
+      )}
+    </box>
+  )
+}
+
+function AgentsTab({ snapshot }: { snapshot: StatsSnapshot }) {
+  const installed = snapshot.agents.filter((agent) => agent.installed).length
+  return (
+    <box style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}>
+      <text>
+        <span style={{ fg: installed === snapshot.agents.length ? theme.ok : theme.warn }}>
+          {installed === snapshot.agents.length ? "●" : "◐"}{" "}
+        </span>
+        <span style={{ fg: theme.muted }}>
+          {installed} of {snapshot.agents.length} elder gods summoned
+          {installed < snapshot.agents.length ? " — run `oh-my-claudecode sync`" : ""}
+        </span>
+      </text>
+      <text> </text>
+      <SectionLabel>roster</SectionLabel>
+      <scrollbox style={{ flexGrow: 1 }}>
+        {snapshot.agents.map((agent) => (
+          <text key={agent.name}>
+            <span style={{ fg: agent.installed ? theme.ok : theme.faint }}>
+              {agent.installed ? "● " : "○ "}
+            </span>
+            <span style={{ fg: theme.fg }}>{agent.name.padEnd(17)}</span>
+            <span style={{ fg: theme.accent }}>{agent.model.padEnd(9)}</span>
+            <span style={{ fg: theme.dim }}>{agent.category.padEnd(15)}</span>
+            <span style={{ fg: theme.faint }}>{agent.cost.toLowerCase()}</span>
+          </text>
+        ))}
+      </scrollbox>
+    </box>
+  )
+}
+
+interface SettingRow {
+  id: string
+  group: "pillars" | "hooks" | "agents"
+  label: string
+  detail: string
+  enabled: boolean
+  toggle: () => void
+}
+
+function SettingsTab({
+  snapshot,
+  refresh,
+}: {
+  snapshot: StatsSnapshot
+  refresh: () => void
+}) {
+  const [cursor, setCursor] = useState(0)
+
+  const rows: SettingRow[] = useMemo(() => {
+    const pillars: SettingRow[] = (
+      [
+        ["web_research", "web research", "background dagon spawns for date-sensitive queries"],
+        ["type_safety", "type safety", "the lint pillar"],
+        ["frontend_design", "design routing", "route ui work to nodens"],
+      ] as const
+    ).map(([key, label, detail]) => ({
+      id: `pillar:${key}`,
+      group: "pillars" as const,
+      label,
+      detail,
+      enabled:
+        key === "web_research"
+          ? snapshot.config.webResearch
+          : key === "type_safety"
+            ? snapshot.config.typeSafety
+            : snapshot.config.frontendDesign,
+      toggle: () => {
+        togglePillar(key)
+        refresh()
+      },
+    }))
+    const hookNames = [
+      ...new Set([...snapshot.hooks.map((h) => h.name), ...snapshot.config.disabledHooks]),
+    ]
+    const hooks: SettingRow[] = hookNames.map((name) => ({
+      id: `hook:${name}`,
+      group: "hooks" as const,
+      label: name,
+      detail: snapshot.hooks.find((h) => h.name === name)?.event ?? "disabled",
+      enabled: !snapshot.config.disabledHooks.includes(name),
+      toggle: () => {
+        toggleDisabled("disabled_hooks", name)
+        refresh()
+      },
+    }))
+    const agentNames = [
+      ...new Set([...snapshot.agents.map((a) => a.name), ...snapshot.config.disabledAgents]),
+    ]
+    const agents: SettingRow[] = agentNames.map((name) => ({
+      id: `agent:${name}`,
+      group: "agents" as const,
+      label: name,
+      detail: snapshot.agents.find((a) => a.name === name)?.model ?? "disabled",
+      enabled: !snapshot.config.disabledAgents.includes(name),
+      toggle: () => {
+        toggleDisabled("disabled_agents", name)
+        refresh()
+      },
+    }))
+    return [...pillars, ...hooks, ...agents]
+  }, [snapshot, refresh])
+
+  useKeyboard((key) => {
+    if (key.name === "up") setCursor((c) => Math.max(0, c - 1))
+    if (key.name === "down") setCursor((c) => Math.min(rows.length - 1, c + 1))
+    if (key.name === "return" || key.name === "space") {
+      rows[Math.min(cursor, rows.length - 1)]?.toggle()
+    }
+  })
+
+  let lastGroup = ""
+  return (
+    <box style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}>
+      {/* Keyed by cursor — remount per move so rows repaint (see nav note). */}
+      <scrollbox key={cursor} style={{ flexGrow: 1 }}>
+        {rows.map((row, i) => {
+          const header = row.group !== lastGroup ? row.group : null
+          lastGroup = row.group
+          return (
+            <box key={row.id} style={{ flexDirection: "column" }}>
+              {header ? (
+                <box style={{ flexDirection: "column", marginBottom: 1, marginTop: i === 0 ? 0 : 1 }}>
+                  <SectionLabel>{header}</SectionLabel>
+                </box>
+              ) : null}
+              {/* Cursor glyph moves (content change) — see nav comment. */}
+              <text>
+                <span style={{ fg: theme.accent }}>{i === cursor ? "▍" : " "}</span>
+                <span style={{ fg: row.enabled ? theme.ok : theme.faint }}>
+                  {row.enabled ? " on  " : " off "}
+                </span>
+                <span style={{ fg: i === cursor ? theme.fg : theme.muted }}>
+                  {row.label.padEnd(28)}
+                </span>
+                <span style={{ fg: theme.faint }}>{row.detail}</span>
+              </text>
+            </box>
+          )
+        })}
+      </scrollbox>
+      <text style={{ fg: theme.faint }}>
+        changes write {snapshot.config.path} and re-sync agents
+      </text>
+    </box>
+  )
+}
+
+// ── App shell ───────────────────────────────────────────────────────────
+
+function App() {
+  const [{ snapshot, error }, setData] = useState<{
+    snapshot: StatsSnapshot | null
+    error: string | null
+  }>({ snapshot: null, error: null })
+  const [loading, setLoading] = useState(true)
+  const [tab, setTab] = useState<Tab>("overview")
+  const [splash, setSplash] = useState(true)
+  const [showAllChecks, setShowAllChecks] = useState(false)
+  const { width } = useTerminalDimensions()
+
+  const refresh = useCallback(() => {
+    setLoading(true)
+    void loadSnapshotAsync().then((data) => {
+      setData(data)
+      setLoading(false)
+    })
+  }, [])
+
+  useEffect(() => {
+    refresh()
+  }, [refresh])
+
+  useKeyboard((key) => {
+    // Always honor quit, even on the splash/loading screen.
+    if (key.name === "q" || (key.ctrl && key.name === "c")) process.exit(0)
+    if (splash) {
+      if (!loading) setSplash(false)
+      return
+    }
+    if (key.name === "r") refresh()
+    if (key.name === "a") setShowAllChecks((s) => !s)
+    if (key.name === "left") setTab((t) => TABS[(TABS.indexOf(t) + TABS.length - 1) % TABS.length])
+    if (key.name === "right" || key.name === "tab") setTab((t) => TABS[(TABS.indexOf(t) + 1) % TABS.length])
+    const digitText = /^[1-9]$/.test(key.name ?? "") ? key.name : (key.sequence ?? "")
+    const digit = Number.parseInt(digitText ?? "", 10)
+    if (digit >= 1 && digit <= TABS.length) setTab(TABS[digit - 1])
+  })
+
+  if (splash) {
+    return <Splash version={snapshot?.version ?? null} loading={loading} />
+  }
+
+  const contentWidth = Math.max(40, Math.min(width - 6, 100))
+
+  return (
+    <box
+      style={{
+        backgroundColor: theme.bg,
+        flexDirection: "column",
+        flexGrow: 1,
+        paddingTop: 1,
+        paddingBottom: 1,
+        paddingLeft: 3,
+        paddingRight: 3,
+        gap: 1,
+      }}
+    >
+      {/* Masthead */}
+      <text>
+        <span style={{ fg: theme.accent }}>oh</span>
+        <span style={{ fg: theme.faint }}>-</span>
+        <span style={{ fg: theme.gold }}>my</span>
+        <span style={{ fg: theme.faint }}>-</span>
+        <span style={{ fg: theme.fg }}>claudecode</span>
+        <span style={{ fg: theme.faint }}>  v{snapshot?.version ?? "?"}</span>
+      </text>
+
+      {/* Nav + body live in one subtree keyed by view state: opentui 0.4
+          repaints freshly-mounted nodes reliably but can blank rows on
+          in-place text updates, so view changes remount rather than patch. */}
+      <box
+        key={`${tab}:${showAllChecks}:${snapshot?.generatedAt ?? "-"}`}
+        style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}
+      >
+        <text>
+          <span style={{ fg: theme.dim }}>
+            {TABS.slice(0, TABS.indexOf(tab))
+              .map((t) => `  ${t} `)
+              .join(" ")}
+          </span>
+          <span style={{ fg: theme.accent }}>{` ▸ ${tab} `}</span>
+          <span style={{ fg: theme.dim }}>
+            {TABS.slice(TABS.indexOf(tab) + 1)
+              .map((t) => `  ${t} `)
+              .join(" ")}
+          </span>
+        </text>
+        <Rule width={contentWidth} />
+
+        {snapshot ? (
+          tab === "overview" ? (
+            <OverviewTab snapshot={snapshot} />
+          ) : tab === "doctor" ? (
+            <DoctorTab snapshot={snapshot} showAll={showAllChecks} />
+          ) : tab === "agents" ? (
+            <AgentsTab snapshot={snapshot} />
+          ) : (
+            <SettingsTab snapshot={snapshot} refresh={refresh} />
+          )
+        ) : (
+          <box style={{ flexDirection: "column", gap: 1, flexGrow: 1 }}>
+            <text style={{ fg: theme.err }}>couldn't load stats</text>
+            <text style={{ fg: theme.dim }}>{error ?? "unknown error"}</text>
+            <text style={{ fg: theme.faint }}>r retry · q quit</text>
+          </box>
+        )}
+      </box>
+
+      {/* Footer */}
+      <text style={{ fg: theme.faint }}>
+        ←→ tabs   ↑↓ select   enter toggle   r refresh   q quit
+      </text>
+    </box>
+  )
+}
+
+const renderer = await createCliRenderer({ exitOnCtrlC: true })
+createRoot(renderer).render(<App />)

package/tui/data.ts

@@ -0,0 +1,178 @@
+import { spawnSync, spawn } from "node:child_process"
+import * as fs from "node:fs"
+import * as os from "node:os"
+import * as path from "node:path"
+
+/**
+ * Data layer for the dashboard TUI. The TUI is a pure renderer — every
+ * read goes through `oh-my-claudecode stats --json` (executed via the
+ * node CLI, so Bun never loads the archive or native modules), and every
+ * settings write edits ~/.claude/oh-my-claudecode.jsonc followed by a
+ * background `sync` so the change takes effect.
+ */
+
+export interface StatsSnapshot {
+  version: string
+  generatedAt: string
+  archive: {
+    bound: boolean
+    memories: number
+    observations: number
+    sessions: number
+    pendingCompression: number
+    diskBytes: number
+    modelCacheBytes: number
+    embeddingProvider: string | null
+    embeddingDimensions: number | null
+    bindPhases: Record<string, string>
+  }
+  capture: {
+    lastSuccessEpoch: number | null
+    cronInstalled: boolean
+    retentionDays: number | null
+  }
+  agents: Array<{ name: string; model: string; installed: boolean; category: string; cost: string }>
+  hooks: Array<{ name: string; event: string; installed: boolean }>
+  config: {
+    path: string
+    exists: boolean
+    disabledAgents: string[]
+    disabledHooks: string[]
+    webResearch: boolean
+    typeSafety: boolean
+    frontendDesign: boolean
+  }
+  doctor: Array<{ name: string; status: "ok" | "warn" | "error"; message: string }>
+}
+
+const PACKAGE_ROOT = path.resolve(new URL(".", import.meta.url).pathname, "..")
+
+function cliPath(): string {
+  return process.env.OMC_CLI ?? path.join(PACKAGE_ROOT, "dist", "cli", "index.js")
+}
+
+export function loadSnapshot(): { snapshot: StatsSnapshot | null; error: string | null } {
+  const result = spawnSync("node", [cliPath(), "stats", "--json"], {
+    encoding: "utf-8",
+    timeout: 60_000,
+  })
+  if (result.status !== 0 || !result.stdout) {
+    return {
+      snapshot: null,
+      error:
+        result.stderr?.trim().split("\n").slice(-3).join(" ") ||
+        `stats exited with ${result.status}`,
+    }
+  }
+  try {
+    return { snapshot: JSON.parse(result.stdout) as StatsSnapshot, error: null }
+  } catch (err) {
+    return { snapshot: null, error: `bad stats JSON: ${String(err)}` }
+  }
+}
+
+/**
+ * Async variant — the app must NOT block its mount on stats (collection
+ * boots the archive and probes the embedding model, several seconds), or
+ * early keypresses land before the keyboard subscription exists.
+ */
+export function loadSnapshotAsync(): Promise<{ snapshot: StatsSnapshot | null; error: string | null }> {
+  return new Promise((resolve) => {
+    const child = spawn("node", [cliPath(), "stats", "--json"], { stdio: ["ignore", "pipe", "pipe"] })
+    let stdout = ""
+    let stderr = ""
+    child.stdout.on("data", (chunk: Buffer) => (stdout += chunk.toString()))
+    child.stderr.on("data", (chunk: Buffer) => (stderr += chunk.toString()))
+    const timer = setTimeout(() => child.kill(), 60_000)
+    child.on("close", (code) => {
+      clearTimeout(timer)
+      if (code !== 0 || !stdout) {
+        resolve({
+          snapshot: null,
+          error: stderr.trim().split("\n").slice(-3).join(" ") || `stats exited with ${code}`,
+        })
+        return
+      }
+      try {
+        resolve({ snapshot: JSON.parse(stdout) as StatsSnapshot, error: null })
+      } catch (err) {
+        resolve({ snapshot: null, error: `bad stats JSON: ${String(err)}` })
+      }
+    })
+    child.on("error", (err) => {
+      clearTimeout(timer)
+      resolve({ snapshot: null, error: String(err) })
+    })
+  })
+}
+
+// ── Config mutation ─────────────────────────────────────────────────────
+
+const CONFIG_PATH = path.join(os.homedir(), ".claude", "oh-my-claudecode.jsonc")
+
+/** Strip // and /* *​/ comments well enough to JSON.parse the config. */
+function parseJsonc(content: string): Record<string, unknown> {
+  const stripped = content
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/^\s*\/\/.*$/gm, "")
+    .replace(/,(\s*[}\]])/g, "$1")
+  const parsed = JSON.parse(stripped || "{}") as unknown
+  return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+    ? (parsed as Record<string, unknown>)
+    : {}
+}
+
+function readConfig(): Record<string, unknown> {
+  try {
+    return parseJsonc(fs.readFileSync(CONFIG_PATH, "utf-8"))
+  } catch {
+    return {}
+  }
+}
+
+function writeConfig(config: Record<string, unknown>): void {
+  fs.mkdirSync(path.dirname(CONFIG_PATH), { recursive: true })
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + "\n", "utf-8")
+}
+
+/** Toggle a name in a disabled_* array. Returns the new disabled state. */
+export function toggleDisabled(
+  key: "disabled_agents" | "disabled_hooks",
+  name: string,
+): boolean {
+  const config = readConfig()
+  const list = Array.isArray(config[key]) ? (config[key] as string[]) : []
+  const isDisabled = list.includes(name)
+  config[key] = isDisabled ? list.filter((n) => n !== name) : [...list, name]
+  writeConfig(config)
+  resyncAgents()
+  return !isDisabled
+}
+
+/** Toggle one of the pillar feature flags. Returns the new enabled state. */
+export function togglePillar(
+  key: "web_research" | "type_safety" | "frontend_design",
+): boolean {
+  const config = readConfig()
+  const section =
+    config[key] && typeof config[key] === "object"
+      ? (config[key] as Record<string, unknown>)
+      : {}
+  const enabled = section.enabled !== false
+  config[key] = { ...section, enabled: !enabled }
+  writeConfig(config)
+  return !enabled
+}
+
+/** Re-render agents in the background after a config change. */
+function resyncAgents(): void {
+  try {
+    const child = spawn("node", [cliPath(), "sync", "--quiet"], {
+      detached: true,
+      stdio: "ignore",
+    })
+    child.unref()
+  } catch {
+    /* next session's agent-sync hook covers it */
+  }
+}