herm-tui 1.0.0-dev.1

package/src/tabs/Cron.tsx

@@ -0,0 +1,294 @@
+import { useState, useEffect, useCallback, useRef, memo } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { useGateway } from "../app/gateway";
+import { useListKeys, useFollow } from "../keys";
+import { useTheme } from "../theme";
+import { useDialog } from "../ui/dialog";
+import { useToast } from "../ui/toast";
+import { openConfirm } from "../dialogs/confirm";
+import { TabShell } from "../ui/shell";
+import { KVBlock } from "../ui/kv";
+import { Col, Hdr, VBAR } from "../ui/table";
+import { openTextPrompt } from "../dialogs/text-prompt";
+import { ago, until } from "../ui/fmt";
+import { readCronOutput, type CronOutput } from "../utils/hermes-home";
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+type CronJob = {
+  id: string
+  name: string
+  prompt: string
+  schedule: string
+  enabled: boolean
+  state: string
+  deliver: string
+  repeat?: string
+  last_run?: string
+  next_run?: string
+  last_status?: "ok" | "error"
+  last_error?: string
+  paused_reason?: string
+  model?: string
+  skills?: string[]
+  workdir?: string
+  script?: string
+}
+
+type RawJob = {
+  job_id?: string
+  id?: string
+  name?: string
+  prompt_preview?: string
+  prompt?: string
+  schedule?: string
+  enabled?: boolean
+  state?: string
+  deliver?: string
+  repeat?: string
+  last_run_at?: string
+  next_run_at?: string
+  last_status?: string
+  last_delivery_error?: string
+  paused_reason?: string
+  model?: string
+  skills?: string[]
+  workdir?: string
+  script?: string
+}
+
+const normalize = (j: RawJob): CronJob => ({
+  id: j.job_id ?? j.id ?? "",
+  name: j.name ?? "",
+  prompt: j.prompt ?? j.prompt_preview ?? "",
+  schedule: j.schedule ?? "",
+  enabled: j.enabled ?? true,
+  state: j.state ?? "scheduled",
+  deliver: j.deliver ?? "local",
+  repeat: j.repeat,
+  last_run: j.last_run_at,
+  next_run: j.next_run_at,
+  last_status: j.last_status === "ok" || j.last_status === "error" ? j.last_status : undefined,
+  last_error: j.last_delivery_error,
+  paused_reason: j.paused_reason,
+  model: j.model,
+  skills: j.skills,
+  workdir: j.workdir,
+  script: j.script,
+})
+
+// gateway returns ISO timestamps; shared `ago`/`until` want unix seconds
+const sec = (iso?: string) => iso ? new Date(iso).getTime() / 1000 : null
+const last = (iso?: string) => { const t = sec(iso); return t ? ago(t) : "—" }
+const next = (iso?: string) => { const t = sec(iso); return t ? until(t) : "—" }
+
+// ─── Job Row ─────────────────────────────────────────────────────────
+
+const JobRow = memo((props: {
+  id: string;
+  job: CronJob;
+  selected: boolean;
+  onSelect: () => void;
+  onHover: () => void;
+}) => {
+  const theme = useTheme().theme;
+  const j = props.job;
+  const bg = props.selected ? theme.backgroundElement : undefined;
+  // ●/○ encodes enabled; color encodes last-run outcome.
+  const glyph = j.enabled ? "●" : "○";
+  const glyphColor = !j.enabled ? theme.textMuted
+    : j.last_status === "error" ? theme.error
+    : j.last_status === "ok" ? theme.success
+    : theme.textMuted;
+
+  return (
+    <box id={props.id} flexDirection="row" height={1} backgroundColor={bg}
+         onMouseDown={props.onSelect} onMouseMove={props.onHover}>
+      <Col w={2} fg={props.selected ? theme.primary : theme.text}>{props.selected ? "▸ " : "  "}</Col>
+      <Col w={2} fg={glyphColor}>{`${glyph} `}</Col>
+      <Col grow fg={props.selected ? theme.accent : theme.text}>{j.name || j.id}</Col>
+      <Col w={18} fg={theme.textMuted}>{j.schedule || "—"}</Col>
+      <Col w={16} fg={theme.textMuted}>{`last: ${last(j.last_run)}`}</Col>
+      <Col w={16} fg={j.enabled ? theme.text : theme.textMuted}>
+        {`next: ${j.enabled ? next(j.next_run) : "paused"}`}
+      </Col>
+    </box>
+  );
+});
+
+// ─── Detail Panel ────────────────────────────────────────────────────
+
+const DetailPanel = memo((props: { job: CronJob; reloadKey: number }) => {
+  const theme = useTheme().theme;
+  const j = props.job;
+  const [output, setOutput] = useState<CronOutput | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    readCronOutput(j.id, 30).then(o => { if (live) setOutput(o) });
+    return () => { live = false };
+  }, [j.id, props.reloadKey]);
+
+  return (
+    <TabShell title="Job Detail" hint="" grow={2}>
+      <scrollbox scrollY flexGrow={1}>
+        <box flexDirection="column" width="100%">
+          <box minHeight={1}>
+            <text wrapMode="word"><span fg={theme.accent}><strong>{j.name || j.id}</strong></span></text>
+          </box>
+          <box height={1} />
+          <KVBlock rows={[
+            ["ID", j.id],
+            ["State", j.enabled ? "active" : "paused", j.enabled ? theme.success : theme.warning],
+            ["Schedule", j.schedule || "—"],
+            ["Repeat", j.repeat],
+            ["Deliver", j.deliver ?? "local"],
+            ["Last Run", j.last_run ? `${last(j.last_run)}  ·  ${j.last_status ?? "?"}` : "never",
+              j.last_status === "error" ? theme.error : undefined],
+            ["Next Run", j.enabled ? next(j.next_run) : "paused"],
+            ["Model", j.model],
+            ["Skills", j.skills?.length ? j.skills.join(", ") : undefined],
+            ["Workdir", j.workdir],
+            ["Script", j.script],
+            ["Paused", j.paused_reason],
+            ["Error", j.last_error, theme.error],
+          ]} />
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>Prompt</text></box>
+          <text wrapMode="word"><span fg={theme.text}>{j.prompt}</span></text>
+          <box height={1} />
+          <box height={1}>
+            <text fg={theme.textMuted}>Last Output{output ? `  ·  ${ago(output.at.getTime() / 1000)}` : ""}</text>
+          </box>
+          {output
+            ? <text wrapMode="word"><span fg={theme.text}>{output.text}</span></text>
+            : <text fg={theme.textMuted}>(none yet)</text>}
+        </box>
+      </scrollbox>
+    </TabShell>
+  );
+});
+
+// ─── Main Component ──────────────────────────────────────────────────
+
+export const Cron = memo((props: { focused?: boolean }) => {
+  const theme = useTheme().theme;
+  const gw = useGateway();
+  const dialog = useDialog();
+  const toast = useToast();
+  const dims = useTerminalDimensions();
+  const [jobs, setJobs] = useState<CronJob[]>([]);
+  const [sel, setSel] = useState(0);
+  const [err, setErr] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const live = useRef({ jobs, sel });
+  live.current = { jobs, sel };
+
+  const load = useCallback(() => {
+    gw.request<{ jobs?: RawJob[] }>("cron.manage", { action: "list" })
+      .then(res => {
+        setJobs((res.jobs ?? []).map(normalize));
+        setErr(null);
+        setReloadKey(k => k + 1);
+      })
+      .catch(e => setErr(e instanceof Error ? e.message : String(e)));
+  }, [gw]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // ── Actions (stable via live ref) ─────────────────────────────────
+
+  const create = useCallback(async () => {
+    const schedule = await openTextPrompt(dialog, {
+      title: "New Cron Job", label: "Schedule (cron expr or 'every 30m')",
+    });
+    if (schedule === null) return;
+    const prompt = await openTextPrompt(dialog, {
+      title: "New Cron Job", label: "Prompt",
+    });
+    if (prompt === null) return;
+    // name left blank — server derives one from the prompt text.
+    gw.request("cron.manage", { action: "add", name: "", schedule, prompt })
+      .then(() => { toast.show({ variant: "success", message: "Job created" }); load(); })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }));
+  }, [gw, dialog, toast, load]);
+
+  const toggle = useCallback(() => {
+    const j = live.current.jobs[live.current.sel];
+    if (!j) return;
+    const action = j.enabled ? "pause" : "resume";
+    gw.request("cron.manage", { action, name: j.id })
+      .then(() => { toast.show({ variant: "success", message: j.enabled ? "Paused" : "Resumed" }); load(); })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }));
+  }, [gw, toast, load]);
+
+  const remove = useCallback(async () => {
+    const j = live.current.jobs[live.current.sel];
+    if (!j) return;
+    const ok = await openConfirm(dialog, {
+      title: "Delete Job?",
+      body: `Delete "${j.name || j.id}"? This cannot be undone.`,
+      yes: "delete", danger: true,
+    });
+    if (!ok) return;
+    gw.request("cron.manage", { action: "remove", name: j.id })
+      .then(() => {
+        toast.show({ variant: "success", message: "Deleted" });
+        setSel(s => Math.max(0, Math.min(s, live.current.jobs.length - 2)));
+        load();
+      })
+      .catch((e: Error) => toast.show({ variant: "error", message: e.message }));
+  }, [gw, dialog, toast, load]);
+
+  const follow = useFollow("cron");
+  const keys = useListKeys({
+    active: !!props.focused && dialog.stack.length === 0,
+    count: jobs.length, setSel, ...follow.opts,
+    onToggle: toggle,
+    onDelete: remove,
+    onNew: create,
+    onRefresh: () => { load(); toast.show({ variant: "info", message: "Reloaded", duration: 1000 }) },
+  });
+
+  const job = jobs[sel] ?? null;
+  const showDetail = dims.width >= 120 && job !== null;
+
+  return (
+    <box flexDirection="row" flexGrow={1}>
+      <TabShell title={`Cron Jobs (${jobs.length})`} error={err} grow={3}
+                hint={`↑↓ nav  ${keys.print("list.new")} new  ${keys.print("list.toggle")} pause/resume  ${keys.print("list.delete")} delete  ${keys.print("list.refresh")} refresh`}>
+        {jobs.length === 0 ? (
+          <box key="empty" flexGrow={1}>
+            <text fg={theme.textMuted}>No cron jobs. Press n to create one.</text>
+          </box>
+        ) : (
+          <box key="table" flexDirection="column" flexGrow={1} minWidth={0}>
+            <Hdr>
+              <Col w={4} fg={theme.textMuted}>{""}</Col>
+              <Col grow fg={theme.textMuted} bold>Name</Col>
+              <Col w={18} fg={theme.textMuted} bold>Schedule</Col>
+              <Col w={16} fg={theme.textMuted} bold>Last</Col>
+              <Col w={16} fg={theme.textMuted} bold>Next</Col>
+            </Hdr>
+            <box height={1} />
+            <scrollbox ref={follow.ref} scrollY flexGrow={1} verticalScrollbarOptions={VBAR}>
+              {jobs.map((j, i) => (
+                <JobRow
+                  key={j.id}
+                  id={follow.id(i)}
+                  job={j}
+                  selected={i === sel}
+                  onSelect={() => setSel(i)}
+                  onHover={() => setSel(i)}
+                />
+              ))}
+            </scrollbox>
+          </box>
+        )}
+      </TabShell>
+
+      {showDetail ? <DetailPanel job={job} reloadKey={reloadKey} /> : null}
+    </box>
+  );
+});

package/src/tabs/Env.tsx

@@ -0,0 +1,227 @@
+import { useState, useCallback, memo } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useKeys, handleListKey, useFollow } from "../keys"
+import { writeEnvVar, removeEnvVar, ENV_CATALOG } from "../utils/hermes-home"
+import { useHome, home } from "../home"
+import { useTheme } from "../theme"
+import { useDialog } from "../ui/dialog"
+import { useToast } from "../ui/toast"
+import { TabShell } from "../ui/shell"
+import { Col, Hdr, VBAR } from "../ui/table"
+import { openTextPrompt } from "../dialogs/text-prompt"
+import { openConfirm } from "../dialogs/confirm"
+
+// ─── Types ────────────────────────────────────────────────────────
+
+type Row =
+  | { type: "header"; category: string; collapsed: boolean }
+  | { type: "var"; key: string; value: string | undefined }
+
+const mask = (val: string) => "•".repeat(Math.min(val.length, 12))
+
+// ─── Var Row ──────────────────────────────────────────────────────
+
+const VarRow = memo((props: {
+  id: string
+  name: string
+  value: string | undefined
+  shown: boolean
+  selected: boolean
+  onHover: () => void
+  onClick: () => void
+}) => {
+  const theme = useTheme().theme
+  const set = props.value !== undefined
+  const bg = props.selected ? theme.backgroundElement : undefined
+  return (
+    <box id={props.id} flexDirection="row" height={1} backgroundColor={bg}
+         onMouseDown={props.onClick} onMouseMove={props.onHover}>
+      <Col w={2} fg={props.selected ? theme.primary : theme.text}>{props.selected ? "▸ " : "  "}</Col>
+      <Col w={28} fg={props.selected ? theme.accent : theme.text}>{props.name}</Col>
+      <Col w={8} fg={set ? theme.success : theme.textMuted}>{set ? " SET " : "UNSET"}</Col>
+      <Col grow min={4} fg={props.shown ? theme.text : theme.textMuted}>
+        {set ? (props.shown ? props.value! : mask(props.value!)) : "—"}
+      </Col>
+    </box>
+  )
+})
+
+// ─── Main Component ───────────────────────────────────────────────
+
+export const Env = memo((props: { focused?: boolean }) => {
+  const theme = useTheme().theme
+  const dialog = useDialog()
+  const toast = useToast()
+
+  const vars = useHome("env") ?? {}
+  const [sel, setSel] = useState(0)
+  const [reveal, setReveal] = useState<Set<string>>(new Set())
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+  const [searching, setSearching] = useState(false)
+  const [query, setQuery] = useState("")
+
+  // Catalog keys plus any extras present in .env that aren't catalogued.
+  const known = new Set(ENV_CATALOG.flatMap(g => g.keys))
+  const extra = Object.keys(vars).filter(k => !known.has(k)).sort()
+  const groups = extra.length > 0
+    ? [...ENV_CATALOG, { category: "Other", keys: extra }]
+    : ENV_CATALOG
+
+  const rows: Row[] = groups.flatMap((g) => {
+    const keys = searching && query.trim()
+      ? g.keys.filter(k => k.toLowerCase().includes(query.toLowerCase()))
+      : g.keys
+    if (keys.length === 0) return []
+    const hide = collapsed[g.category] ?? false
+    const header: Row = { type: "header", category: g.category, collapsed: hide }
+    if (hide) return [header]
+    return [header, ...keys.map((key): Row => ({ type: "var", key, value: vars[key] }))]
+  })
+
+  const count = rows.length
+  const cur = rows[sel]
+  const setKeys = rows.flatMap(r => r.type === "var" && r.value !== undefined ? [r.key] : [])
+  const follow = useFollow("env")
+
+  const edit = useCallback(async (key: string, initial: string) => {
+    const val = await openTextPrompt(dialog, { title: `Edit ${key}`, label: "Value", initial })
+    if (val == null) return
+    await writeEnvVar(key, val)
+    home.invalidate("env")
+    toast.show({ variant: "success", message: `${key} saved` })
+  }, [dialog, toast])
+
+  const add = useCallback(async () => {
+    const key = await openTextPrompt(dialog, { title: "New Variable", label: "Name (e.g. FOO_API_KEY)" })
+    if (!key) return
+    const val = await openTextPrompt(dialog, { title: `Set ${key}`, label: "Value" })
+    if (val == null) return
+    await writeEnvVar(key, val)
+    home.invalidate("env")
+    toast.show({ variant: "success", message: `${key} added` })
+  }, [dialog, toast])
+
+  const del = useCallback(async (key: string) => {
+    const ok = await openConfirm(dialog, {
+      title: "Delete Variable",
+      body: `Remove ${key} from .env?`,
+      yes: "delete", danger: true,
+    })
+    if (!ok) return
+    await removeEnvVar(key)
+    home.invalidate("env")
+    toast.show({ variant: "success", message: `${key} removed` })
+  }, [dialog, toast])
+
+  const revealAll = useCallback(() =>
+    setReveal(s => s.size === setKeys.length && setKeys.length > 0
+      ? new Set()
+      : new Set(setKeys)), [setKeys])
+
+  const activateAt = useCallback((i: number) => {
+    const r = rows[i]
+    if (r?.type === "header")
+      return setCollapsed(p => ({ ...p, [r.category]: !p[r.category] }))
+    if (r?.type === "var") {
+      if (r.value !== undefined && !reveal.has(r.key))
+        return setReveal(s => new Set(s).add(r.key))
+      return void edit(r.key, r.value ?? "")
+    }
+  }, [rows, reveal, edit])
+  const activate = useCallback(() => activateAt(sel), [activateAt, sel])
+
+  const rowClick = useCallback((i: number) => { setSel(i); activateAt(i) }, [activateAt])
+
+  const keys = useKeys()
+  useKeyboard((key) => {
+    if (!props.focused || dialog.stack.length > 0) return
+
+    if (searching) {
+      if (key.name === "escape") { setSearching(false); setQuery(""); setSel(0); return }
+      if (key.name === "backspace") { setQuery(q => q.slice(0, -1)); setSel(0); return }
+      if (key.name === "up") return setSel(p => Math.max(0, p - 1))
+      if (key.name === "down") return setSel(p => Math.min(count - 1, p + 1))
+      if (key.name === "return") { setSearching(false); return activate() }
+      if (key.raw && key.raw.length === 1 && key.raw >= " ") {
+        setQuery(q => q + key.raw); setSel(0); return
+      }
+      return
+    }
+
+    handleListKey(keys, key, {
+      count, setSel, ...follow.opts,
+      onActivate: activate,
+      onToggle: revealAll,
+      onNew: add,
+      onDelete: () => { if (cur?.type === "var" && cur.value !== undefined) del(cur.key) },
+      onSearch: () => { setSearching(true); setQuery(""); setSel(0) },
+      onRefresh: () => { home.invalidate("env"); toast.show({ variant: "info", message: "Reloaded", duration: 1000 }) },
+    })
+  })
+
+  return (
+    <TabShell
+      title={searching ? "Env (searching)" : "Env / API Keys"}
+      hint={searching
+        ? "↑↓ move  Enter reveal/edit  Esc cancel"
+        : `↑↓ move  ${keys.print("list.activate")} reveal/edit  ${keys.print("list.toggle")} show-all  ${keys.print("list.new")} new  ${keys.print("list.delete")} delete  ${keys.print("list.search")} search  ${keys.print("list.refresh")} reload`}
+    >
+      {searching ? (
+        <box height={1}>
+          <text>
+            <span fg={theme.accent}>/ </span>
+            <span fg={theme.text}>{query}</span>
+            <span fg={theme.accent}>█</span>
+          </text>
+        </box>
+      ) : null}
+
+      <Hdr>
+        <Col w={2} fg={theme.textMuted}>{""}</Col>
+        <Col w={28} fg={theme.textMuted} bold>Name</Col>
+        <Col w={8} fg={theme.textMuted} bold>Status</Col>
+        <Col grow min={4} fg={theme.textMuted} bold>Value</Col>
+      </Hdr>
+      <box height={1} />
+
+      {count === 0 ? (
+        <box key="empty" flexGrow={1} padding={2}>
+          <text fg={theme.textMuted}>
+            {searching ? "No matching variables" : "No variables configured"}
+          </text>
+        </box>
+      ) : (
+        <scrollbox ref={follow.ref} key="list" scrollY flexGrow={1}
+                   verticalScrollbarOptions={VBAR}>
+          <box flexDirection="column" width="100%">
+            {rows.map((row, i) => row.type === "header" ? (
+              <box
+                id={follow.id(i)}
+                key={`h-${row.category}`}
+                marginTop={i > 0 ? 1 : 0}
+                backgroundColor={i === sel ? theme.backgroundElement : undefined}
+                onMouseMove={() => setSel(i)}
+                onMouseDown={() => rowClick(i)}
+              >
+                <text fg={theme.info}>
+                  <strong>{`${row.collapsed ? "▸" : "▾"} ${row.category}`}</strong>
+                </text>
+              </box>
+            ) : (
+              <VarRow
+                id={follow.id(i)}
+                key={row.key}
+                name={row.key}
+                value={row.value}
+                shown={reveal.has(row.key)}
+                selected={i === sel}
+                onHover={() => setSel(i)}
+                onClick={() => rowClick(i)}
+              />
+            ))}
+          </box>
+        </scrollbox>
+      )}
+    </TabShell>
+  )
+})