portable-agent-layer 0.70.0 → 0.71.0

package/src/tools/control-room/ui/app.tsx

@@ -0,0 +1,74 @@
+import { StrictMode, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import type { ServerStatus } from "../server";
+import { Agenda } from "./agenda";
+import { Agents } from "./agents";
+import { Board } from "./board";
+import { Handoffs } from "./handoffs";
+import { Ledger } from "./ledger";
+import { MatrixGrid } from "./matrix";
+import { getJson } from "./panel";
+import { Signal } from "./signal";
+
+function Masthead({ status }: { status: ServerStatus | null }) {
+  return (
+    <div className="masthead">
+      <h1>
+        PAL <em>this morning</em>
+      </h1>
+      <div className="meta">
+        <span>
+          machine <b>{status?.machine ?? "…"}</b>
+        </span>
+        <span>
+          ledger <b>{status ? `${status.ledgerFiles} file(s)` : "…"}</b>
+        </span>
+        <span>
+          port <b>{status?.port ?? "…"}</b>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const [status, setStatus] = useState<ServerStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    getJson<ServerStatus>("/api/status")
+      .then(setStatus)
+      .catch((e: Error) => setError(e.message));
+  }, []);
+  return (
+    <div className="room">
+      <Masthead status={status} />
+      {error && <div className="error">{error}</div>}
+      <Agenda />
+      <MatrixGrid />
+      <div className="grid">
+        <Handoffs />
+      </div>
+      <details className="drawer">
+        <summary>When something breaks — projects, agents, signal, ledger</summary>
+        <div className="grid">
+          <Board />
+          <Signal />
+          <Agents />
+          <Ledger />
+        </div>
+      </details>
+      <div className="foot">
+        <span>loopback only · every number from ~/.pal · no model runs on this page</span>
+        <span>{status ? `up since ${status.startedAt}` : ""}</span>
+      </div>
+    </div>
+  );
+}
+
+const root = document.getElementById("root");
+if (root)
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );

package/src/tools/control-room/ui/board.tsx

@@ -0,0 +1,82 @@
+import type { ProjectCard } from "../data";
+import { age, plural } from "./format";
+import { Panel, Pending, useLoaded } from "./panel";
+
+function reasonTone(reason: string): string {
+  if (reason.startsWith("handoff")) return "amber";
+  if (reason.endsWith("blocker") || reason.endsWith("blockers")) return "bad";
+  return "ghost";
+}
+
+function projectTone(p: ProjectCard): string {
+  if (p.asking.length > 0) return "asking";
+  if (p.stale) return "quiet";
+  return "";
+}
+
+function Project({ p }: { p: ProjectCard }) {
+  return (
+    <div className={`project ${projectTone(p)}`}>
+      <div className="name" title={p.path ?? "not checked out here"}>
+        {p.slug}
+        <small>
+          {p.status} · {age(p.ageDays)}
+          {p.path ? "" : " · elsewhere"}
+        </small>
+      </div>
+      <div className="reasons">
+        {p.asking.map((r) => (
+          <span key={r} className={`tag ${reasonTone(r)}`}>
+            {r}
+          </span>
+        ))}
+        {p.blockers.map((b) => (
+          <span key={b} className="tag bad" title={b}>
+            ⛔ {b.length > 48 ? `${b.slice(0, 48)}…` : b}
+          </span>
+        ))}
+      </div>
+      <div className="counts">
+        <b>{p.openIscs}</b> open · <b>{p.sessions30d}</b> sessions/30d
+        {p.lastSession && (
+          <>
+            {" "}
+            · last <b>{p.lastSession.date}</b>
+          </>
+        )}
+      </div>
+      {p.next[0] && <div className="next">{p.next[0]}</div>}
+    </div>
+  );
+}
+
+export function Board() {
+  const cards = useLoaded<ProjectCard[]>("/api/board");
+  const asking =
+    cards.state === "ready" ? cards.data.filter((c) => c.asking.length > 0) : [];
+  return (
+    <Panel
+      index="01 · projects"
+      title="Asking for you"
+      span={8}
+      order={0}
+      aside={
+        cards.state === "ready"
+          ? `${plural(asking.length, "project")} of ${cards.data.length}`
+          : ""
+      }
+    >
+      <Pending value={cards} />
+      {cards.state === "ready" && cards.data.length === 0 && (
+        <div className="empty">No project is registered yet.</div>
+      )}
+      {cards.state === "ready" && (
+        <div className="board">
+          {cards.data.map((p) => (
+            <Project key={p.slug} p={p} />
+          ))}
+        </div>
+      )}
+    </Panel>
+  );
+}

package/src/tools/control-room/ui/format.ts

@@ -0,0 +1,31 @@
+export function age(days: number): string {
+  if (days === 0) return "today";
+  if (days === 1) return "1d";
+  if (days < 30) return `${days}d`;
+  if (days < 60) return "1mo";
+  return `${Math.floor(days / 30)}mo`;
+}
+
+export function plural(n: number, one: string, many = `${one}s`): string {
+  return `${n} ${n === 1 ? one : many}`;
+}
+
+export function clock(iso: string): string {
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return iso;
+  const day = at.toISOString().slice(0, 10);
+  const time = at.toTimeString().slice(0, 5);
+  return `${day} ${time}`;
+}
+
+export function isoDay(at: Date): string {
+  return at.toISOString().slice(0, 10);
+}
+
+export function tenths(n: number): string {
+  return n.toFixed(1);
+}
+
+export function percent(alreadyPercent: number): string {
+  return `${Math.round(alreadyPercent)}%`;
+}

package/src/tools/control-room/ui/handoffs.tsx

@@ -0,0 +1,37 @@
+import type { HandoffCard } from "../data";
+import { age } from "./format";
+import { Panel, Pending, useLoaded } from "./panel";
+
+function titleRepeatsSentence(h: HandoffCard): boolean {
+  return h.title.startsWith(h.sentence.slice(0, 24));
+}
+
+function Handoff({ h }: { h: HandoffCard }) {
+  return (
+    <div className="handoff">
+      <div className="where">
+        <span>
+          <b title={h.cwd}>{h.label}</b> · {h.source}
+        </span>
+        <span>{age(h.ageDays)}</span>
+      </div>
+      <div className="sentence" title={h.handoff}>
+        {h.sentence}
+      </div>
+      {!titleRepeatsSentence(h) && <div className="title">{h.title}</div>}
+    </div>
+  );
+}
+
+export function Handoffs() {
+  const cards = useLoaded<HandoffCard[]>("/api/handoffs");
+  return (
+    <Panel index="03 · unfinished" title="Where you left off" span={5} order={2}>
+      <Pending value={cards} />
+      {cards.state === "ready" && cards.data.length === 0 && (
+        <div className="empty">Nothing in progress. Every handoff is closed.</div>
+      )}
+      {cards.state === "ready" && cards.data.map((h) => <Handoff key={h.cwd} h={h} />)}
+    </Panel>
+  );
+}

package/src/tools/control-room/ui/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>PAL control room</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Martian+Mono:wght@300;400;600&display=swap"
+    />
+    <link rel="stylesheet" href="./app.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./app.tsx"></script>
+  </body>
+</html>

package/src/tools/control-room/ui/ledger.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import type { LedgerView, LedgerViewRow, PageOutcome } from "../../ledger/view";
+import { PAGE_OUTCOMES } from "../../ledger/view";
+import { clock, isoDay } from "./format";
+import { Panel, Pending, useLoaded } from "./panel";
+
+const DEFAULT_WINDOW_DAYS = 14;
+const MAX_ROWS = 200;
+
+function ledgerQuery(project: string, since: string, until: string): string {
+  const params = new URLSearchParams();
+  if (project) params.set("project", project);
+  if (since) params.set("since", since);
+  if (until) params.set("until", until);
+  const query = params.toString();
+  return query ? `/api/ledger?${query}` : "/api/ledger";
+}
+
+function Row({ r }: { r: LedgerViewRow }) {
+  const [slug, ...rest] = r.target.split(" ");
+  return (
+    <tr>
+      <td className="when">{clock(r.ts)}</td>
+      <td>
+        {r.actor}
+        <span className="reason">
+          {r.authority} · {r.runtime}
+        </span>
+      </td>
+      <td>{r.tool}</td>
+      <td className="target" title={r.target}>
+        <b>{slug}</b> {rest.join(" ")}
+      </td>
+      <td>{r.change}</td>
+      <td>
+        <span className={`outcome ${r.outcome}`}>{r.outcome}</span>
+        {r.reason && <span className="reason">{r.reason}</span>}
+      </td>
+    </tr>
+  );
+}
+
+function Strip({ view }: { view: LedgerView }) {
+  return (
+    <div className="strip">
+      <span>
+        <b>{view.stats.total}</b>actions
+      </span>
+      <span className="refusals">
+        <b>{view.stats.refusals}</b>refusals
+      </span>
+      {PAGE_OUTCOMES.map((o: PageOutcome) => (
+        <span key={o}>
+          <b>{view.stats.outcomes[o].total}</b>
+          {o}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function Ledger() {
+  const [project, setProject] = useState("");
+  const [since, setSince] = useState(
+    isoDay(new Date(Date.now() - DEFAULT_WINDOW_DAYS * 86_400_000))
+  );
+  const [until, setUntil] = useState("");
+  const projects = useLoaded<{ slug: string }[]>("/api/projects");
+  const view = useLoaded<LedgerView>(ledgerQuery(project, since, until));
+  return (
+    <Panel
+      index="05 · ledger"
+      title="What the agents did"
+      span={12}
+      order={4}
+      aside={
+        <span className="filters">
+          <label>
+            project
+            <select value={project} onChange={(e) => setProject(e.target.value)}>
+              <option value="">all</option>
+              {projects.state === "ready" &&
+                projects.data.map((p) => (
+                  <option key={p.slug} value={p.slug}>
+                    {p.slug}
+                  </option>
+                ))}
+            </select>
+          </label>
+          <label>
+            from
+            <input type="date" value={since} onChange={(e) => setSince(e.target.value)} />
+          </label>
+          <label>
+            to
+            <input type="date" value={until} onChange={(e) => setUntil(e.target.value)} />
+          </label>
+        </span>
+      }
+    >
+      <Pending value={view} />
+      {view.state === "ready" && (
+        <>
+          <Strip view={view.data} />
+          {view.data.rows.length === 0 ? (
+            <div className="empty">No actions in this window.</div>
+          ) : (
+            <table className="ledger">
+              <thead>
+                <tr>
+                  <th>when</th>
+                  <th>actor</th>
+                  <th>action</th>
+                  <th>target</th>
+                  <th>change</th>
+                  <th>outcome</th>
+                </tr>
+              </thead>
+              <tbody>
+                {view.data.rows.slice(0, MAX_ROWS).map((r) => (
+                  <Row key={r.id} r={r} />
+                ))}
+              </tbody>
+            </table>
+          )}
+          {view.data.rows.length > MAX_ROWS && (
+            <div className="empty">
+              Newest {MAX_ROWS} of {view.data.rows.length}. Narrow the window for the
+              rest.
+            </div>
+          )}
+        </>
+      )}
+    </Panel>
+  );
+}

package/src/tools/control-room/ui/matrix.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import type { Matrix, MatrixItem } from "../matrix";
+import { Pending, useLoaded } from "./panel";
+
+const QUADRANTS: { key: keyof Matrix; title: string; note: string }[] = [
+  { key: "now", title: "Do now", note: "matters and cannot wait" },
+  { key: "plan", title: "Give it a slot", note: "matters, nothing forcing it" },
+  { key: "noise", title: "Loud, not load-bearing", note: "pressing but serves nothing" },
+  { key: "later", title: "Let it sit", note: "neither" },
+];
+
+const KINDS = ["goal", "revenue", "fun"] as const;
+
+async function saveServes(project: string, serves: string): Promise<void> {
+  const res = await fetch("/api/serves", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ project, serves }),
+  });
+  if (!res.ok) throw new Error(`override answered ${res.status}`);
+}
+
+function Serves({ item, onSaved }: { item: MatrixItem; onSaved: () => void }) {
+  if (item.kind !== "project") return null;
+  return (
+    <select
+      className={item.servesBy === "user" ? "serves mine" : "serves"}
+      value={item.serves ?? ""}
+      title={
+        item.servesBy === "user" ? "your answer" : "PAL's guess — change it to correct it"
+      }
+      onChange={(e) => {
+        saveServes(item.id, e.target.value)
+          .then(onSaved)
+          .catch(() => onSaved());
+      }}
+    >
+      <option value="" disabled>
+        unranked
+      </option>
+      {KINDS.map((kind) => (
+        <option key={kind} value={kind}>
+          {kind}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function Item({ item, onSaved }: { item: MatrixItem; onSaved: () => void }) {
+  return (
+    <li className={`m-item ${item.kind}`}>
+      <div className="m-head">
+        <span className="m-label">{item.label}</span>
+        <Serves item={item} onSaved={onSaved} />
+      </div>
+      {item.waitingOn && <div className="waiting">waiting on you: {item.waitingOn}</div>}
+      {item.detail && <div className="m-detail">{item.detail}</div>}
+      <div className="m-reasons">
+        <span className="why-important">{item.importantBecause}</span>
+        {item.urgentBecause.map((reason) => (
+          <span className="why-urgent" key={reason}>
+            {reason}
+          </span>
+        ))}
+      </div>
+    </li>
+  );
+}
+
+export function MatrixGrid() {
+  const [nonce, setNonce] = useState(0);
+  const loaded = useLoaded<Matrix>(`/api/matrix?v=${nonce}`);
+  const reload = () => setNonce((n) => n + 1);
+
+  return (
+    <section className="matrix">
+      <header>
+        <h2>What is worth your morning</h2>
+        {loaded.state === "ready" && loaded.data.unranked > 0 && (
+          <span className="agenda-age stale">
+            {loaded.data.unranked} project(s) with no purpose on record
+          </span>
+        )}
+      </header>
+      <Pending value={loaded} />
+      {loaded.state === "ready" && (
+        <div className="quadrants">
+          {QUADRANTS.map(({ key, title, note }) => {
+            const items = loaded.data[key] as MatrixItem[];
+            return (
+              <div className={`quadrant q-${key}`} key={key}>
+                <div className="q-head">
+                  <h3>{title}</h3>
+                  <span>{note}</span>
+                </div>
+                {items.length === 0 ? (
+                  <div className="empty">nothing here</div>
+                ) : (
+                  <ul>
+                    {items.map((item) => (
+                      <Item
+                        key={`${item.kind}:${item.id}`}
+                        item={item}
+                        onSaved={reload}
+                      />
+                    ))}
+                  </ul>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/tools/control-room/ui/panel.tsx

@@ -0,0 +1,60 @@
+import { type ReactNode, useEffect, useState } from "react";
+
+interface PanelProps {
+  index: string;
+  title: string;
+  span: number;
+  order: number;
+  aside?: ReactNode;
+  children: ReactNode;
+}
+
+export function Panel({ index, title, span, order, aside, children }: PanelProps) {
+  return (
+    <section
+      className="panel"
+      style={{ "--span": span, "--i": order } as React.CSSProperties}
+    >
+      <header>
+        <div>
+          <span className="index">{index}</span>
+          <h2>{title}</h2>
+        </div>
+        {aside && <span className="aside">{aside}</span>}
+      </header>
+      {children}
+    </section>
+  );
+}
+
+export type Loaded<T> =
+  | { state: "loading" }
+  | { state: "error"; message: string }
+  | { state: "ready"; data: T };
+
+export async function getJson<T>(path: string): Promise<T> {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error(`${path} answered ${res.status}`);
+  return (await res.json()) as T;
+}
+
+export function useLoaded<T>(url: string): Loaded<T> {
+  const [value, setValue] = useState<Loaded<T>>({ state: "loading" });
+  useEffect(() => {
+    let live = true;
+    setValue({ state: "loading" });
+    getJson<T>(url)
+      .then((data) => live && setValue({ state: "ready", data }))
+      .catch((e: Error) => live && setValue({ state: "error", message: e.message }));
+    return () => {
+      live = false;
+    };
+  }, [url]);
+  return value;
+}
+
+export function Pending({ value }: { value: Loaded<unknown> }) {
+  if (value.state === "loading") return <div className="empty">reading…</div>;
+  if (value.state === "error") return <div className="error">{value.message}</div>;
+  return null;
+}