portable-agent-layer 0.72.0 → 0.74.0

package/src/tools/control-room/ui/screens/log.tsx

@@ -0,0 +1,274 @@
+import { useId, useState } from "react";
+import { PAGE_OUTCOMES, type PageOutcome } from "../../../ledger/outcomes";
+import type { LedgerView, LedgerViewRow } from "../../../ledger/view";
+import { Badge } from "../components/badge";
+import { Button } from "../components/button";
+import { Input, NativeSelect } from "../components/input";
+import { Label } from "../components/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/table";
+import { clock } from "../format";
+import { Empty, Pending, Scroller } from "../frame";
+import { type Loaded, useLoaded } from "../lib/api";
+
+const MAX_ROWS = 200;
+
+const COLUMNS = [
+  "when",
+  "machine",
+  "actor",
+  "action",
+  "target",
+  "change",
+  "outcome",
+] as const;
+
+export const LOG_KEYS = [
+  "project",
+  "runtime",
+  "machine",
+  "authority",
+  "outcome",
+  "since",
+  "until",
+] as const;
+
+export type LogFilter = Record<(typeof LOG_KEYS)[number], string>;
+
+const AUTHORITIES = ["user", "agent"] as const;
+const RUNTIMES = ["claude", "cursor", "codex", "copilot", "opencode", "unknown"] as const;
+
+const EMPTY_FILTER: LogFilter = {
+  project: "",
+  runtime: "",
+  machine: "",
+  authority: "",
+  outcome: "",
+  since: "",
+  until: "",
+};
+
+/** The machines a row could name are whatever the window actually contains. */
+function machinesIn(view: Loaded<LedgerView>): string[] {
+  if (view.state !== "ready") return [];
+  return [...new Set(view.data.rows.map((r) => r.machine))].filter(Boolean).sort();
+}
+
+function ledgerQuery(filter: LogFilter): string {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(filter)) if (value) params.set(key, value);
+  const query = params.toString();
+  return query ? `/api/ledger?${query}` : "/api/ledger";
+}
+
+function outcomeVariant(outcome: string) {
+  if (outcome === "applied") return "neutral" as const;
+  if (outcome === "failed") return "outline" as const;
+  return "alarm" as const;
+}
+
+function Field({
+  label,
+  control,
+}: {
+  label: string;
+  control: (id: string) => React.ReactNode;
+}) {
+  const id = useId();
+  return (
+    <div className="flex flex-col gap-1">
+      <Label htmlFor={id}>{label}</Label>
+      {control(id)}
+    </div>
+  );
+}
+
+function Stats({ view }: { view: LedgerView }) {
+  const cells: { n: number; label: string }[] = [
+    { n: view.stats.total, label: "actions" },
+    { n: view.stats.refusals, label: "refusals" },
+    ...PAGE_OUTCOMES.map((o: PageOutcome) => ({
+      n: view.stats.outcomes[o].total,
+      label: o,
+    })),
+  ];
+  return (
+    <div className="mb-4 grid grid-cols-2 gap-px border border-divider bg-divider sm:grid-cols-3 lg:grid-cols-6">
+      {cells.map((cell) => (
+        <div key={cell.label} className="bg-bg px-3 py-2.5">
+          <div className="font-heading text-[26px] leading-none font-semibold tabular-nums">
+            {cell.n}
+          </div>
+          <div className="eyebrow">{cell.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** A refusal carries the command it stopped; an edit carries its line counts. */
+function Row({
+  r,
+  open,
+  onToggle,
+}: {
+  r: LedgerViewRow;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <>
+      <TableRow className="cursor-pointer" onClick={onToggle}>
+        <TableCell className="whitespace-nowrap text-neutral-700">
+          {clock(r.ts)}
+        </TableCell>
+        <TableCell className="whitespace-nowrap">{r.machine}</TableCell>
+        <TableCell>
+          {r.actor}
+          <span className="block text-[11px] text-neutral-600">
+            {r.authority} · {r.runtime}
+          </span>
+        </TableCell>
+        <TableCell className="font-mono text-[11.5px]">{r.tool}</TableCell>
+        <TableCell title={r.target}>{r.target}</TableCell>
+        <TableCell className="whitespace-nowrap text-neutral-700">{r.change}</TableCell>
+        <TableCell>
+          <Badge variant={outcomeVariant(r.outcome)}>{r.outcome}</Badge>
+          {r.reason && (
+            <span className="block max-w-[220px] text-[11px] text-neutral-700">
+              {r.reason}
+            </span>
+          )}
+        </TableCell>
+      </TableRow>
+      {open && (r.command || r.reason) && (
+        <TableRow>
+          <TableCell colSpan={COLUMNS.length} className="bg-neutral-200">
+            <pre className="m-0 font-mono text-[11.5px] whitespace-pre-wrap">
+              {r.command ? `$ ${r.command}\n` : ""}
+              {r.reason ?? ""}
+            </pre>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
+
+export function Log({
+  filter,
+  onFilter,
+}: {
+  filter: LogFilter;
+  onFilter: (next: Partial<LogFilter>) => void;
+}) {
+  const projects = useLoaded<{ slug: string }[]>("/api/projects");
+  const view = useLoaded<LedgerView>(ledgerQuery(filter));
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  const choices = (key: keyof LogFilter, values: readonly string[], all = "all") => (
+    <Field
+      label={key}
+      control={(id) => (
+        <NativeSelect
+          id={id}
+          value={filter[key]}
+          onChange={(e) => onFilter({ [key]: e.target.value })}
+        >
+          <option value="">{all}</option>
+          {values.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </NativeSelect>
+      )}
+    />
+  );
+
+  return (
+    <section className="flex min-h-0 flex-1 flex-col">
+      <div className="mb-4 flex flex-wrap items-end gap-3">
+        {choices(
+          "project",
+          projects.state === "ready" ? projects.data.map((p) => p.slug) : []
+        )}
+        {choices("runtime", RUNTIMES)}
+        {choices("machine", machinesIn(view), "both")}
+        {choices("authority", AUTHORITIES)}
+        {choices("outcome", PAGE_OUTCOMES)}
+        <Field
+          label="since"
+          control={(id) => (
+            <Input
+              id={id}
+              type="date"
+              value={filter.since}
+              onChange={(e) => onFilter({ since: e.target.value })}
+            />
+          )}
+        />
+        <Field
+          label="until"
+          control={(id) => (
+            <Input
+              id={id}
+              type="date"
+              value={filter.until}
+              onChange={(e) => onFilter({ until: e.target.value })}
+            />
+          )}
+        />
+        <Button variant="secondary" onClick={() => onFilter(EMPTY_FILTER)}>
+          reset
+        </Button>
+      </div>
+
+      <Pending value={view} />
+      {view.state === "ready" && (
+        <>
+          <Stats view={view.data} />
+          <div className="blueprint flex min-h-0 flex-1 flex-col bg-bg">
+            {view.data.rows.length === 0 ? (
+              <Empty>No actions in this window.</Empty>
+            ) : (
+              <Scroller>
+                <Table className="min-w-[880px] text-[12.5px]">
+                  <TableHeader>
+                    <tr>
+                      {COLUMNS.map((column) => (
+                        <TableHead key={column}>{column}</TableHead>
+                      ))}
+                    </tr>
+                  </TableHeader>
+                  <TableBody>
+                    {view.data.rows.slice(0, MAX_ROWS).map((r) => (
+                      <Row
+                        key={r.id}
+                        r={r}
+                        open={expanded === r.id}
+                        onToggle={() => setExpanded(expanded === r.id ? null : r.id)}
+                      />
+                    ))}
+                  </TableBody>
+                </Table>
+              </Scroller>
+            )}
+          </div>
+          {view.data.rows.length > MAX_ROWS && (
+            <p className="pt-2 text-[12px] text-neutral-500">
+              Newest {MAX_ROWS} of {view.data.rows.length}. Narrow the window for the
+              rest.
+            </p>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

package/src/tools/control-room/ui/screens/project-detail.tsx

@@ -0,0 +1,302 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import type { LedgerViewRow } from "../../../ledger/view";
+import type { Decision, ProjectDetailView, SnoozableIsc } from "../../detail";
+import { Badge } from "../components/badge";
+import { Button } from "../components/button";
+import { Separator } from "../components/separator";
+import { clock } from "../format";
+import { Empty, Panel, Pending } from "../frame";
+import { useLoaded } from "../lib/api";
+import { cn } from "../lib/cn";
+import { setIsc, setSnooze } from "../lib/write";
+
+const ISC_MARK: Record<SnoozableIsc["status"], string> = {
+  open: "",
+  done: "✓",
+  retired: "~",
+};
+
+const SNOOZE_DAYS = 7;
+
+function outcomeVariant(outcome: string) {
+  if (outcome === "applied") return "neutral" as const;
+  if (outcome === "failed") return "outline" as const;
+  return "alarm" as const;
+}
+
+/** Retired is a decision, not a checkbox — only open and done toggle here. */
+function Criteria({
+  slug,
+  iscs,
+  onChanged,
+}: {
+  slug: string;
+  iscs: SnoozableIsc[];
+  onChanged: () => void;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  if (iscs.length === 0) return <Empty>No criteria written yet.</Empty>;
+
+  const toggle = (isc: SnoozableIsc) => {
+    void setIsc(slug, isc.id, isc.status === "open" ? "done" : "open").then((failure) => {
+      setError(failure);
+      if (!failure) onChanged();
+    });
+  };
+
+  return (
+    <>
+      {error && (
+        <p className="mb-2 border-l-2 border-alarm bg-alarm/10 px-3 py-2 text-[12px] text-alarm">
+          {error}
+        </p>
+      )}
+      <ul className="m-0 flex list-none flex-col p-0">
+        {iscs.map((isc) => (
+          <li
+            key={isc.id}
+            className={cn(
+              "grid grid-cols-[18px_58px_minmax(0,1fr)] items-start gap-3 border-b border-divider/60 py-2 last:border-b-0",
+              isc.status !== "open" && "opacity-60"
+            )}
+          >
+            <button
+              type="button"
+              disabled={isc.status === "retired"}
+              onClick={() => toggle(isc)}
+              title={isc.status === "open" ? "close this criterion" : "reopen it"}
+              className={cn(
+                "mt-0.5 grid size-3.5 cursor-pointer place-items-center border border-neutral-500 text-[10px] leading-none text-bg hover:border-accent disabled:cursor-default",
+                isc.status === "done" && "bg-accent",
+                isc.status === "retired" && "bg-neutral-400"
+              )}
+            >
+              {ISC_MARK[isc.status]}
+              <span className="sr-only">{isc.status}</span>
+            </button>
+            <span className="pt-px text-[11.5px] text-neutral-600">ISC-{isc.id}</span>
+            <span className="flex items-start justify-between gap-3">
+              <span className="text-pretty">
+                {isc.text}
+                {isc.snoozedUntil && (
+                  <span className="block text-[11.5px] text-neutral-600">
+                    snoozed until {isc.snoozedUntil}
+                  </span>
+                )}
+              </span>
+              {isc.status === "open" && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    void setSnooze(slug, isc.id, isc.snoozedUntil ? 0 : SNOOZE_DAYS).then(
+                      (failure) => {
+                        setError(failure);
+                        if (!failure) onChanged();
+                      }
+                    );
+                  }}
+                >
+                  {isc.snoozedUntil ? "wake" : `snooze ${SNOOZE_DAYS}d`}
+                </Button>
+              )}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function Decisions({ decisions }: { decisions: Decision[] }) {
+  if (decisions.length === 0) return <Empty>Nothing recorded.</Empty>;
+  return (
+    <div className="flex flex-col gap-1.5 text-[12.5px]">
+      {decisions.map((d) => (
+        <div key={d.text} className="grid grid-cols-[78px_1fr] gap-3">
+          <span className="text-[11.5px] text-neutral-600">{d.date ?? "—"}</span>
+          <span>
+            {d.text}
+            {d.why && <span className="text-neutral-600"> — {d.why}</span>}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Runtimes({ runtimes }: { runtimes: Record<string, number> }) {
+  const entries = Object.entries(runtimes);
+  if (entries.length === 0) return <Empty>No recorded actions in the window.</Empty>;
+  const max = Math.max(1, ...entries.map(([, n]) => n));
+  return (
+    <div className="flex flex-col gap-1.5">
+      {entries.map(([runtime, n]) => (
+        <div
+          key={runtime}
+          className="grid grid-cols-[70px_1fr_32px] items-center gap-2 text-[12px]"
+        >
+          <span>{runtime}</span>
+          <span className="h-1.5 bg-neutral-300">
+            <span
+              className="block h-1.5 bg-accent"
+              style={{ width: `${(n / max) * 100}%` }}
+            />
+          </span>
+          <span className="text-right tabular-nums text-neutral-700">{n}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RecentActions({ rows }: { rows: LedgerViewRow[] }) {
+  if (rows.length === 0) return <Empty>Nothing recorded yet.</Empty>;
+  return (
+    <div className="flex flex-col gap-1.5">
+      {rows.map((r) => (
+        <div key={r.id} className="grid grid-cols-[86px_1fr_auto] gap-2 text-[11.5px]">
+          <span className="text-neutral-600">{clock(r.ts).slice(5)}</span>
+          <span className="truncate">
+            <b className="font-medium">{r.tool}</b>{" "}
+            <span className="text-neutral-700">{r.target}</span>
+          </span>
+          <Badge variant={outcomeVariant(r.outcome)}>{r.outcome}</Badge>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Head({ d }: { d: ProjectDetailView }) {
+  const open = d.iscs.filter((i) => i.status === "open").length;
+  return (
+    <>
+      <nav className="mb-1.5 text-[12px] text-neutral-600">
+        <Link to="/projects" className="hover:text-accent">
+          projects
+        </Link>{" "}
+        / {d.slug}
+      </nav>
+      <div className="mb-5 flex flex-wrap items-start justify-between gap-6">
+        <div>
+          <h1 className="m-0 flex items-center gap-3 text-[38px]">
+            {d.slug}
+            <Badge variant="neutral">{d.status}</Badge>
+          </h1>
+          <p className="max-w-[760px] text-[13px] text-pretty text-neutral-800">
+            {d.goal || d.purpose}
+          </p>
+        </div>
+        <div className="text-right text-[11.5px] text-neutral-600">
+          <div>{d.remote ?? "no remote on record"}</div>
+          <div>{d.path ?? "not checked out here"}</div>
+          <div>
+            {open} open · serves {d.serves ?? "nothing on record"}
+            {d.servesBy && ` · ${d.servesBy}`}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function ProjectDetail({ slug }: { slug: string }) {
+  const [nonce, setNonce] = useState(0);
+  const view = useLoaded<ProjectDetailView>(
+    `/api/project?slug=${encodeURIComponent(slug)}&v=${nonce}`
+  );
+  if (view.state !== "ready") return <Pending value={view} />;
+  const d = view.data;
+  const reload = () => setNonce((n) => n + 1);
+
+  return (
+    <section>
+      <Head d={d} />
+      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
+        <div className="flex flex-col gap-6">
+          <Panel
+            title="Ideal state criteria"
+            aside="changes here write to the record directly · no agent, no tokens"
+          >
+            <Criteria slug={d.slug} iscs={d.iscs} onChanged={reload} />
+          </Panel>
+          <div className="grid gap-6 md:grid-cols-2">
+            <Panel title="Next">
+              {d.next.length === 0 ? (
+                <Empty>nothing queued</Empty>
+              ) : (
+                <ol className="m-0 flex list-decimal flex-col gap-1.5 pl-5 text-[12.5px]">
+                  {d.next.map((n) => (
+                    <li key={n}>{n}</li>
+                  ))}
+                </ol>
+              )}
+            </Panel>
+            <Panel title="Blockers">
+              {d.blockers.length === 0 ? (
+                <Empty>none</Empty>
+              ) : (
+                <div className="flex flex-col gap-1.5 text-[12.5px]">
+                  {d.blockers.map((b) => (
+                    <p key={b} className="bg-accent-100 px-2 py-1.5 text-accent-900">
+                      {b}
+                    </p>
+                  ))}
+                </div>
+              )}
+            </Panel>
+          </div>
+          <Panel title="Decisions">
+            <Decisions decisions={d.decisions} />
+          </Panel>
+        </div>
+        <aside className="flex flex-col gap-6">
+          <Panel title="Handoff">
+            {d.handoff ? (
+              <>
+                <p className="text-[12.5px] text-pretty" title={d.handoff.full}>
+                  {d.handoff.sentence}
+                </p>
+                {d.handoff.waitingOn && (
+                  <p className="mt-2 bg-accent-100 px-2 py-1.5 text-[12px] text-accent-900">
+                    waiting on you · {d.handoff.waitingOn}
+                  </p>
+                )}
+              </>
+            ) : (
+              <Empty>No handoff. Every session on this project closed cleanly.</Empty>
+            )}
+          </Panel>
+          <Panel
+            title="Agents on this project · 14d"
+            aside={
+              <Link
+                to={`/log?project=${encodeURIComponent(d.slug)}`}
+                className="hover:text-accent"
+              >
+                full log →
+              </Link>
+            }
+          >
+            <Runtimes runtimes={d.runtimes} />
+            <Separator className="my-3" />
+            <RecentActions rows={d.recent} />
+          </Panel>
+          <Panel title="Context">
+            {d.context.length === 0 ? (
+              <Empty>nothing recorded</Empty>
+            ) : (
+              <ul className="m-0 flex list-disc flex-col gap-1 pl-4 text-[12.5px]">
+                {d.context.map((c) => (
+                  <li key={c}>{c}</li>
+                ))}
+              </ul>
+            )}
+          </Panel>
+        </aside>
+      </div>
+    </section>
+  );
+}

package/src/tools/control-room/ui/screens/projects.tsx

@@ -0,0 +1,128 @@
+import { Link } from "react-router";
+import type { ProjectCard } from "../../data";
+import { Badge } from "../components/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/table";
+import { age } from "../format";
+import { Empty, Pending, Scroller } from "../frame";
+import { useLoaded } from "../lib/api";
+import { cn } from "../lib/cn";
+
+export const STATUS_FILTERS = [
+  { value: "ranked", label: "active + paused" },
+  { value: "active", label: "active" },
+  { value: "paused", label: "paused" },
+  { value: "all", label: "all" },
+] as const;
+
+export type StatusFilter = (typeof STATUS_FILTERS)[number]["value"];
+
+export function isStatusFilter(value: string | null): value is StatusFilter {
+  return STATUS_FILTERS.some((f) => f.value === value);
+}
+
+const RANKED = new Set(["active", "paused"]);
+
+const COLUMNS = [
+  { label: "Project", numeric: false },
+  { label: "Status", numeric: false },
+  { label: "Serves", numeric: false },
+  { label: "Open ISCs", numeric: true },
+  { label: "Sessions / 30d", numeric: true },
+  { label: "Agents", numeric: false },
+  { label: "Here", numeric: false },
+  { label: "Touched", numeric: true },
+] as const;
+
+function keep(card: ProjectCard, filter: StatusFilter): boolean {
+  if (filter === "all") return true;
+  if (filter === "ranked") return RANKED.has(card.status);
+  return card.status === filter;
+}
+
+function Row({ card }: { card: ProjectCard }) {
+  return (
+    <TableRow>
+      <TableCell>
+        <Link
+          to={`/projects/${card.slug}`}
+          className="font-heading text-[15px] font-semibold text-ink hover:text-accent"
+        >
+          {card.slug}
+        </Link>
+        {card.next[0] && (
+          <span className="block text-[11.5px] text-neutral-700">{card.next[0]}</span>
+        )}
+      </TableCell>
+      <TableCell>
+        <Badge variant="neutral">{card.status}</Badge>
+      </TableCell>
+      <TableCell className="text-[12px]">
+        {card.serves ?? "unranked"}
+        {card.servesBy && (
+          <span className="ml-1 text-[10.5px] text-neutral-600">· {card.servesBy}</span>
+        )}
+      </TableCell>
+      <TableCell className="font-heading text-right text-[16px] font-semibold tabular-nums">
+        {card.openIscs}
+      </TableCell>
+      <TableCell className="text-right tabular-nums">{card.sessions30d}</TableCell>
+      <TableCell>
+        <span className="flex flex-wrap gap-1">
+          {Object.entries(card.runtimes).map(([runtime, n]) => (
+            <Badge key={runtime} variant="outline">
+              {runtime} {n}
+            </Badge>
+          ))}
+        </span>
+      </TableCell>
+      <TableCell className="text-[12px] text-neutral-700">
+        {card.path ?? "not checked out here"}
+      </TableCell>
+      <TableCell className="text-right text-[12px] whitespace-nowrap text-neutral-700">
+        {age(card.ageDays)}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function Projects({ filter }: { filter: StatusFilter }) {
+  const board = useLoaded<ProjectCard[]>("/api/board");
+  if (board.state !== "ready") return <Pending value={board} />;
+  const rows = board.data.filter((card) => keep(card, filter));
+  return (
+    <div className="blueprint flex min-h-0 flex-1 flex-col bg-bg">
+      {rows.length === 0 ? (
+        <Empty>No project matches this filter.</Empty>
+      ) : (
+        <Scroller>
+          <Table className="min-w-[880px] text-[13px]">
+            <TableHeader>
+              <tr>
+                {COLUMNS.map((column) => (
+                  <TableHead
+                    key={column.label}
+                    className={cn(column.numeric && "text-right")}
+                  >
+                    {column.label}
+                  </TableHead>
+                ))}
+              </tr>
+            </TableHeader>
+            <TableBody>
+              {rows.map((card) => (
+                <Row key={card.slug} card={card} />
+              ))}
+            </TableBody>
+          </Table>
+        </Scroller>
+      )}
+    </div>
+  );
+}