herm-tui 1.0.0-dev.1 → 1.0.0-dev.2

package/src/tabs/Cron.tsx

@@ -1,294 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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>
-  )
-})