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

package/src/tabs/Skills.tsx

@@ -1,507 +0,0 @@
-import { useState, useEffect, useCallback, useRef, memo } from "react";
-import { useKeyboard } from "@opentui/react";
-import type { RGBA } from "@opentui/core";
-import { useKeys, handleListKey, useFollow } from "../keys";
-import { makeSource, readSkillFrontmatter, listCuratorRuns, readCuratorReport, indexCuratorLineage, type SkillInfo, type SkillUsage, type CuratorRun, type LineageEvent } from "../utils/hermes-home";
-import { count as tokenCount } from "../utils/tokens";
-import { useGateway } from "../app/gateway";
-import { useDialog } from "../ui/dialog";
-import { useToast } from "../ui/toast";
-import { useTheme } from "../theme";
-import { useHome } from "../home";
-import { TabShell } from "../ui/shell";
-import { KVBlock } from "../ui/kv";
-import { KVLink } from "../components/ui/FileLink";
-import { Col, Hdr, Marquee, VBAR } from "../ui/table";
-import { ago } from "../ui/fmt";
-import { openConfirm } from "../dialogs/confirm";
-import { openCurator } from "../dialogs/curator";
-
-const NO_EVENTS: LineageEvent[] = []
-
-type Hit = { name: string; description?: string }
-type Sort = "name" | "used"
-
-// ISO timestamp → epoch seconds (or null if unparseable/empty).
-const iso = (s: string | null | undefined): number | null => {
-  if (!s) return null;
-  const t = Date.parse(s);
-  return Number.isFinite(t) ? Math.floor(t / 1000) : null;
-}
-
-// ─── Skill Row ───────────────────────────────────────────────────────
-
-const SkillRow = memo((props: {
-  id: string;
-  skill: SkillInfo;
-  usage?: SkillUsage;
-  selected: boolean;
-  onSelect: () => void;
-  onHover: () => void;
-}) => {
-  const theme = useTheme().theme;
-  const s = props.skill;
-  const u = props.usage;
-  const bg = props.selected ? theme.backgroundElement : undefined;
-  const used = iso(u?.last_used_at) ?? iso(u?.last_viewed_at);
-  const stale = u?.state === "stale";
-  const archived = u?.state === "archived";
-
-  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={theme.warning}>{u?.pinned ? "📌" : "  "}</Col>
-      <Marquee grow min={8} active={props.selected}
-               fg={archived ? theme.textMuted : props.selected ? theme.accent : theme.text}>{s.name}</Marquee>
-      {archived ? <Col w={10} fg={theme.textMuted}>archived</Col>
-       : stale ? <Col w={10} fg={theme.warning}>stale</Col>
-       : <Col w={10} fg={theme.textMuted}>{used ? ago(used) : ""}</Col>}
-    </box>
-  );
-});
-
-// ─── Hub Result Row ──────────────────────────────────────────────────
-
-const HitRow = memo((props: { hit: Hit; selected: boolean; onHover: () => void }) => {
-  const theme = useTheme().theme;
-  const on = props.selected;
-  return (
-    <box flexDirection="row" height={1} backgroundColor={on ? theme.backgroundElement : undefined}
-         onMouseMove={props.onHover}>
-      <Col w={2} fg={on ? theme.primary : theme.textMuted}>{on ? "▸ " : "  "}</Col>
-      <Col w={28} fg={on ? theme.accent : theme.text}>{props.hit.name}</Col>
-      <Col grow min={8} fg={theme.textMuted}>{props.hit.description || "—"}</Col>
-    </box>
-  );
-});
-
-// ─── Detail Panel ────────────────────────────────────────────────────
-
-const line = (e: LineageEvent): string => {
-  switch (e.kind) {
-    case "absorbed":   return `absorbed ${e.sources.map(s => `\`${s}\``).join(", ")}`
-    case "merged":     return `merged into \`${e.into}\`${e.reason ? ` — ${e.reason}` : ""}`
-    case "transition": return `${e.from} → ${e.to}`
-    case "pruned":     return `pruned${e.reason ? ` — ${e.reason}` : ""}`
-    case "added":      return "created by curator"
-  }
-}
-
-const DetailPanel = memo((props: { skill: SkillInfo; usage?: SkillUsage; events: LineageEvent[] }) => {
-  const theme = useTheme().theme;
-  const s = props.skill;
-  const u = props.usage;
-  const used = iso(u?.last_used_at);
-  const viewed = iso(u?.last_viewed_at);
-  const patched = iso(u?.last_patched_at);
-
-  return (
-    <box
-      flexDirection="column"
-      padding={1}
-      border
-      borderColor={theme.border}
-      backgroundColor={theme.backgroundPanel}
-      width="50%"
-    >
-      <box height={1}>
-        <text>
-          <span fg={theme.primary}><strong>Skill Detail</strong></span>
-          {u?.pinned ? <span fg={theme.warning}>  📌 pinned</span> : null}
-          {u?.state === "stale" ? <span fg={theme.warning}>  · stale</span> : null}
-          {u?.state === "archived" ? <span fg={theme.textMuted}>  · archived</span> : null}
-        </text>
-      </box>
-      <box height={1} />
-      <box height={1}><text fg={theme.accent}><strong>{s.name}</strong></text></box>
-      <box height={1} />
-      <KVBlock rows={([
-        ["Category", s.category || "uncategorized", theme.info],
-        ["Tags", s.tags.length > 0 ? s.tags.join(", ") : undefined],
-        u ? ["Used", u.use_count > 0 ? `${u.use_count}× · last ${used ? ago(used) : "never"}` : "never"] : null,
-        u && viewed ? ["Viewed", `${u.view_count}× · last ${ago(viewed)}`] : null,
-        u && patched ? ["Patched", `${u.patch_count}× · last ${ago(patched)}`] : null,
-      ]).filter(Boolean) as Array<[string, string | undefined, (RGBA | undefined)?]>} />
-      <KVLink label="File" source={s.source} text={s.source.relative} />
-      <box height={1} />
-      {s.description ? (
-        <text wrapMode="word"><span fg={theme.text}>{s.description}</span></text>
-      ) : (
-        <text fg={theme.textMuted}>No description</text>
-      )}
-      {props.events.length > 0 ? (
-        <box flexDirection="column" marginTop={1}>
-          <box height={1}><text fg={theme.textMuted}>Curator lineage</text></box>
-          {props.events.map((e, i) => (
-            <box key={i} flexDirection="row" minHeight={1}>
-              <box width={10} flexShrink={0}>
-                <text fg={theme.textMuted}>{ago(e.at)}</text>
-              </box>
-              <box flexGrow={1} minHeight={1}>
-                <text wrapMode="word" fg={theme.text}>{line(e)}</text>
-              </box>
-            </box>
-          ))}
-        </box>
-      ) : u ? (
-        <box height={1} marginTop={1}>
-          <text fg={theme.textMuted}>No curator events for this skill</text>
-        </box>
-      ) : null}
-    </box>
-  );
-});
-
-// ─── Empty State ─────────────────────────────────────────────────────
-
-const EmptyState = memo((props: { searching: boolean }) => {
-  const theme = useTheme().theme;
-  return (
-    <box flexGrow={1} padding={2}>
-      <text>
-        <span fg={theme.textMuted}>
-          {props.searching
-            ? "No matching skills on hub"
-            : "No skills found in ~/.hermes/skills/"}
-        </span>
-      </text>
-    </box>
-  );
-});
-
-// ─── Curator History Panel ───────────────────────────────────────────
-// Right-hand pane (swaps with DetailPanel on `h`). Browsable list of
-// logs/curator/{id}/ runs with counts from run.json; Enter toggles
-// REPORT.md rendered through <markdown>. Independent selection so the
-// skills list stays on whatever row it was.
-
-const HistoryPanel = memo((props: { focused: boolean }) => {
-  const { theme, syntaxStyle } = useTheme();
-  const [runs, setRuns] = useState<CuratorRun[]>(() => listCuratorRuns());
-  const [sel, setSel] = useState(0);
-  const [open, setOpen] = useState(false);
-  const [body, setBody] = useState("");
-  const run = runs[sel];
-
-  useEffect(() => {
-    if (!open || !run) return;
-    let live = true;
-    readCuratorReport(run.id).then(t => { if (live) setBody(t) });
-    return () => { live = false };
-  }, [open, run?.id]);
-
-  useKeyboard((key) => {
-    if (!props.focused) return;
-    if (key.name === "up") { setOpen(false); return setSel(p => Math.max(0, p - 1)) }
-    if (key.name === "down") { setOpen(false); return setSel(p => Math.min(runs.length - 1, p + 1)) }
-    if (key.name === "return") return setOpen(o => !o);
-    if (key.raw === "r") return setRuns(listCuratorRuns());
-  });
-
-  return (
-    <box flexDirection="column" padding={1} border
-         borderColor={props.focused ? theme.primary : theme.border}
-         backgroundColor={theme.backgroundPanel} width="50%">
-      <box height={1}>
-        <text>
-          <span fg={theme.primary}><strong>Curator History</strong></span>
-          <span fg={theme.textMuted}>
-            {`  ${runs.length} run${runs.length === 1 ? "" : "s"}${runs[0] ? ` · last ${ago(runs[0].at)}` : ""}`}
-          </span>
-        </text>
-      </box>
-      <box height={1}><text fg={theme.textMuted}>↑↓ select · Enter expand · h close</text></box>
-      <box height={1} />
-      {runs.length === 0
-        ? <text fg={theme.textMuted}>no runs in ~/.hermes/logs/curator/</text>
-        : (
-          <scrollbox scrollY flexGrow={1}>
-            <box flexDirection="column" width="100%">
-              {runs.map((r, i) => {
-                const on = i === sel;
-                return (
-                  <box key={r.id} flexDirection="column">
-                    <box height={1} flexDirection="row"
-                         backgroundColor={on ? theme.backgroundElement : undefined}
-                         onMouseDown={() => { setSel(i); setOpen(o => i === sel ? !o : true) }}>
-                      <Col w={2} fg={on ? theme.primary : theme.textMuted}>{on ? "▸ " : "  "}</Col>
-                      <Col w={12} fg={on ? theme.accent : theme.text}>{ago(r.at)}</Col>
-                      <Col grow fg={theme.textMuted}>
-                        {`${r.before}→${r.after}  arch ${r.archived}  cons ${r.consolidated}${r.added ? `  +${r.added}` : ""}`}
-                      </Col>
-                    </box>
-                    {on && open ? (
-                      <box marginLeft={2} marginTop={1} marginBottom={1}>
-                        <markdown content={body || "…"} fg={theme.markdownText} syntaxStyle={syntaxStyle} />
-                      </box>
-                    ) : null}
-                  </box>
-                );
-              })}
-            </box>
-          </scrollbox>
-        )}
-    </box>
-  );
-});
-
-// ─── Main Component ──────────────────────────────────────────────────
-
-export const Skills = memo((props: { focused?: boolean }) => {
-  const theme = useTheme().theme;
-  const gw = useGateway();
-  const dialog = useDialog();
-  const toast = useToast();
-  const usage = useHome("skillUsage") ?? {};
-  const curator = useHome("curatorState");
-  // Built once per tab-open; rebuilt when .curator_state fires (a run
-  // finished and wrote a fresh run.json).
-  const lineage = useRef(indexCuratorLineage());
-  useEffect(() => { lineage.current = indexCuratorLineage() }, [curator?.run_count]);
-  const [skills, setSkills] = useState<SkillInfo[]>([]);
-  const [selected, setSelected] = useState(0);
-  const [searching, setSearching] = useState(false);
-  const [query, setQuery] = useState("");
-  const [hits, setHits] = useState<Hit[]>([]);
-  const [sort, setSort] = useState<Sort>("name");
-  const [history, setHistory] = useState(false);
-  const seq = useRef(0);
-
-  const load = useCallback(() => {
-    gw.request<{ skills: Record<string, string[]> }>("skills.manage", { action: "list" })
-      .then(res => {
-        const raw = res.skills ?? {};
-        const rows: SkillInfo[] = Object.entries(raw).flatMap(([cat, names]) =>
-          names.map(n => {
-            const source = makeSource(`skills/${cat}/${n}/SKILL.md`, `${n}/SKILL.md`);
-            // Gateway list returns names only; enrich from on-disk
-            // frontmatter so Description/Tags aren't dead columns.
-            const fm = readSkillFrontmatter(source);
-            return {
-              source, category: cat, name: n,
-              description: fm.description, tags: fm.tags,
-              tokenEstimate: tokenCount(`${n} ${fm.description}`),
-            };
-          })
-        );
-        rows.sort((a, b) => a.source.relative.localeCompare(b.source.relative));
-        setSkills(rows);
-      })
-      .catch(() => {});
-  }, [gw]);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  // Hub search — debounced, drop stale responses via seq ref.
-  useEffect(() => {
-    const id = ++seq.current;
-    if (!searching || !query.trim()) { setHits([]); return }
-    const t = setTimeout(() => {
-      gw.request<{ results: Hit[] }>("skills.manage", { action: "search", query })
-        .then(r => {
-          if (seq.current !== id) return;
-          setHits(r.results ?? []);
-          setSelected(0);
-        })
-        .catch(() => { if (seq.current === id) setHits([]) });
-    }, 150);
-    return () => clearTimeout(t);
-  }, [gw, query, searching]);
-
-  // Group installed skills by category. When sorted by "used", flatten
-  // into a single "by-recency" group so the cross-category order is visible.
-  const groups = sort === "used"
-    ? new Map<string, SkillInfo[]>([
-        ["by recency", [...skills].sort((a, b) => {
-          const ta = iso(usage[a.name]?.last_used_at) ?? iso(usage[a.name]?.last_viewed_at) ?? 0;
-          const tb = iso(usage[b.name]?.last_used_at) ?? iso(usage[b.name]?.last_viewed_at) ?? 0;
-          return tb - ta;
-        })],
-      ])
-    : Map.groupBy(skills, s => s.category || "uncategorized");
-
-  // Flat list for keyboard navigation
-  const flat = [...groups].flatMap(([cat, items]) => [
-    { type: "header" as const, category: cat },
-    ...items.map(s => ({ type: "skill" as const, skill: s })),
-  ]);
-
-  const skillRows = flat.filter(r => r.type === "skill");
-  const count = searching ? hits.length : skillRows.length;
-  const current = !searching && skillRows[selected]?.type === "skill"
-    ? skillRows[selected].skill : null;
-  const follow = useFollow("sk");
-
-  const exit = useCallback(() => {
-    setSearching(false); setQuery(""); setHits([]); setSelected(0);
-  }, []);
-
-  const install = useCallback(async (name: string) => {
-    const ok = await openConfirm(dialog, {
-      title: "Install skill?",
-      body: name,
-      yes: "install",
-    });
-    if (!ok) return;
-    gw.request("skills.manage", { action: "install", query: name })
-      .then(() => {
-        toast.show({ variant: "success", message: `Installed ${name}` });
-        exit();
-        load();
-      })
-      .catch((e: Error) =>
-        toast.show({ variant: "error", message: `Install failed: ${e.message}` }));
-  }, [dialog, gw, toast, exit, load]);
-
-  const keys = useKeys();
-  useKeyboard((key) => {
-    if (!props.focused || dialog.stack.length > 0) return;
-
-    if (searching) {
-      if (key.name === "escape") { exit(); return }
-      if (key.name === "backspace") { setQuery(p => p.slice(0, -1)); setSelected(0); return }
-      if (key.name === "up") return setSelected(p => Math.max(0, p - 1));
-      if (key.name === "down") return setSelected(p => Math.min(count - 1, p + 1));
-      if (key.name === "return") {
-        const hit = hits[selected];
-        if (hit) install(hit.name);
-        return;
-      }
-      if (key.raw && key.raw.length === 1 && key.raw >= " ") {
-        setQuery(p => p + key.raw); setSelected(0);
-      }
-      return;
-    }
-
-    // `s` toggles sort between category/name (default) and recency.
-    // Intercept before handleListKey so the stock list vocabulary stays intact.
-    if (!key.ctrl && !key.meta && key.raw === "s") {
-      setSort(p => p === "name" ? "used" : "name");
-      setSelected(0);
-      return;
-    }
-
-    // `c` opens the Curator report dialog.
-    if (!key.ctrl && !key.meta && key.raw === "c") {
-      openCurator(dialog);
-      return;
-    }
-
-    // `h` toggles the curator run-history pane in place of DetailPanel.
-    // When open it owns ↑↓/Enter/r; Esc or `h` returns here.
-    if (!key.ctrl && !key.meta && key.raw === "h") {
-      setHistory(h => !h);
-      return;
-    }
-    if (history) {
-      if (key.name === "escape") return setHistory(false);
-      return;   // HistoryPanel's own useKeyboard handles the rest
-    }
-
-    handleListKey(keys, key, {
-      count, setSel: setSelected, ...follow.opts,
-      onRefresh: () => { load(); toast.show({ variant: "info", message: "Reloaded", duration: 1000 }) },
-      onSearch: () => { setSearching(true); setQuery(""); setHits([]); setSelected(0) },
-    });
-  });
-
-  // Track which skill index we're on as we iterate through the grouped list
-  let skillIdx = -1;
-
-  return (
-    <box flexDirection="row" flexGrow={1}>
-      <TabShell
-        title={searching ? `Hub Search (${hits.length})` : `Skills (${skills.length}${sort === "used" ? " · by use" : ""})`}
-        hint={searching
-          ? "↑↓ navigate  Enter install  Esc cancel"
-          : `↑↓ navigate  ${keys.print("list.search")} search hub  s sort  c curator  h history  ${keys.print("list.refresh")} refresh`}
-      >
-        {/* Search bar */}
-        {searching ? (
-          <box height={1}>
-            <text>
-              <span fg={theme.accent}>{"/ "}</span>
-              <span fg={theme.text}>{query}</span>
-              <span fg={theme.accent}>{"█"}</span>
-            </text>
-          </box>
-        ) : null}
-
-        {searching ? null : (
-          <Hdr>
-            <Col w={2} fg={theme.textMuted}>{""}</Col>
-            <Col grow min={8} fg={theme.textMuted} bold>Name</Col>
-          </Hdr>
-        )}
-        {searching ? null : <box height={1} />}
-
-        {/* List */}
-        {count === 0 ? (
-          <EmptyState searching={searching} />
-        ) : searching ? (
-          <scrollbox scrollY flexGrow={1}>
-            <box flexDirection="column" width="100%">
-              {hits.map((h, i) => (
-                <HitRow key={h.name} hit={h} selected={i === selected}
-                  onHover={() => setSelected(i)} />
-              ))}
-            </box>
-          </scrollbox>
-        ) : (
-          <scrollbox ref={follow.ref} scrollY flexGrow={1} verticalScrollbarOptions={VBAR}>
-            {flat.map((row, i) => {
-              if (row.type === "header") {
-                return (
-                  <box key={`h-${row.category}`} marginTop={i > 0 ? 1 : 0}>
-                    <text fg={theme.info}><strong>{`▾ ${row.category}`}</strong></text>
-                  </box>
-                );
-              }
-              skillIdx++;
-              const idx = skillIdx;
-              return (
-                <SkillRow
-                  key={row.skill.name}
-                  id={follow.id(idx)}
-                  skill={row.skill}
-                  usage={usage[row.skill.name]}
-                  selected={idx === selected}
-                  onSelect={() => setSelected(idx)}
-                  onHover={() => setSelected(idx)}
-                />
-              );
-            })}
-          </scrollbox>
-        )}
-
-        {/* Curator footer — summary of last run / paused state. Driven by
-            fs.watch on ~/.hermes/skills/.curator_state; silent when absent. */}
-        {!searching && curator ? (
-          <box height={1} flexShrink={0}>
-            <text>
-              <span fg={theme.textMuted}>{"curator · "}</span>
-              {curator.paused ? (
-                <span fg={theme.warning}>paused</span>
-              ) : curator.last_run_at ? (
-                <span fg={theme.textMuted}>
-                  {`${curator.run_count} run${curator.run_count === 1 ? "" : "s"} · last ${ago(iso(curator.last_run_at) ?? 0)}`}
-                </span>
-              ) : (
-                <span fg={theme.textMuted}>never run</span>
-              )}
-            </text>
-          </box>
-        ) : null}
-      </TabShell>
-
-      {/* Right-hand pane: curator history when toggled, else skill detail */}
-      {history
-        ? <HistoryPanel focused={!!props.focused && !searching} />
-        : current ? <DetailPanel skill={current} usage={usage[current.name]}
-                                  events={lineage.current.get(current.name) ?? NO_EVENTS} /> : null}
-    </box>
-  );
-});