portable-agent-layer 0.72.0 → 0.74.0

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

@@ -1,82 +0,0 @@
-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/handoffs.tsx

@@ -1,37 +0,0 @@
-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/ledger.tsx

@@ -1,137 +0,0 @@
-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.command ?? r.target}>
-        <b>{slug}</b> {rest.join(" ")}
-        {r.command && <span className="reason">{r.command}</span>}
-      </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

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

@@ -1,60 +0,0 @@
-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;
-}

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

@@ -1,161 +0,0 @@
-import type { DueBadge, RatingPoint, SignalView } from "../data";
-import { percent, tenths } from "./format";
-import { Panel, Pending, useLoaded } from "./panel";
-
-const LOW_RATING = 3;
-const W = 320;
-const H = 72;
-const PAD = 4;
-
-function sparkPath(points: RatingPoint[]): {
-  line: string;
-  area: string;
-  xy: [number, number][];
-} {
-  if (points.length === 0) return { line: "", area: "", xy: [] };
-  const step = points.length > 1 ? (W - PAD * 2) / (points.length - 1) : 0;
-  const xy = points.map<[number, number]>((p, i) => [
-    PAD + i * step,
-    H - PAD - ((p.rating - 1) / 9) * (H - PAD * 2),
-  ]);
-  const line = xy
-    .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`)
-    .join(" ");
-  const area = `${line} L${xy.at(-1)?.[0].toFixed(1)} ${H} L${xy[0][0].toFixed(1)} ${H} Z`;
-  return { line, area, xy };
-}
-
-function Sparkline({ points }: { points: RatingPoint[] }) {
-  const { line, area, xy } = sparkPath(points);
-  const last = xy.at(-1);
-  const midY = H - PAD - (4 / 9) * (H - PAD * 2);
-  return (
-    <svg
-      className="spark"
-      viewBox={`0 0 ${W} ${H}`}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label="ratings"
-    >
-      <title>ratings, oldest to newest</title>
-      <defs>
-        <linearGradient id="sparkfill" x1="0" x2="0" y1="0" y2="1">
-          <stop offset="0" stopColor="#f0b14a" stopOpacity="0.28" />
-          <stop offset="1" stopColor="#f0b14a" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <line className="rule" x1={PAD} x2={W - PAD} y1={midY} y2={midY} />
-      <path className="area" d={area} />
-      <path className="line" d={line} />
-      {points.map((p, i) =>
-        p.rating <= LOW_RATING ? (
-          <circle key={p.ts} className="low" cx={xy[i][0]} cy={xy[i][1]} r="2" />
-        ) : null
-      )}
-      {last && <circle className="last" cx={last[0]} cy={last[1]} r="3" />}
-    </svg>
-  );
-}
-
-function Figure({ value, label, tone }: { value: string; label: string; tone?: string }) {
-  return (
-    <div className="figure">
-      <div className={`value ${tone ?? ""}`}>{value}</div>
-      <div className="label">{label}</div>
-    </div>
-  );
-}
-
-const BADGE_LOOK: Record<DueBadge["state"], { row: string; tag: string }> = {
-  due: { row: "due", tag: "amber" },
-  clear: { row: "clear", tag: "good" },
-  "n/a": { row: "na", tag: "ghost" },
-};
-
-function Due({ name, badge }: { name: string; badge: DueBadge }) {
-  const look = BADGE_LOOK[badge.state];
-  return (
-    <div className={`due-row ${look.row}`}>
-      <span className={`tag ${look.tag}`}>{badge.state}</span>
-      <span className="detail">
-        {name}
-        {badge.detail ? ` — ${badge.detail}` : ""}
-      </span>
-    </div>
-  );
-}
-
-function ratingTone(avg: number): string {
-  if (avg < 5) return "bad";
-  if (avg >= 7) return "good";
-  return "";
-}
-
-export function Signal() {
-  const view = useLoaded<SignalView>("/api/signal");
-  return (
-    <Panel
-      index="02 · feedback"
-      title="Signal"
-      span={4}
-      order={1}
-      aside={
-        view.state === "ready" && view.data.synthesizedAt
-          ? `synthesised ${view.data.synthesizedAt.slice(0, 10)}`
-          : ""
-      }
-    >
-      <Pending value={view} />
-      {view.state === "ready" && (
-        <>
-          <div className="figures">
-            <Figure
-              value={view.data.ratings ? tenths(view.data.ratings.recentAvg) : "–"}
-              label="last 10"
-              tone={view.data.ratings ? ratingTone(view.data.ratings.recentAvg) : ""}
-            />
-            <Figure
-              value={view.data.ratings ? tenths(view.data.ratings.avg) : "–"}
-              label={`avg of ${view.data.ratings?.count ?? 0}`}
-            />
-            <Figure
-              value={view.data.ratings ? String(view.data.ratings.lowCount) : "–"}
-              label="low (≤3)"
-              tone={view.data.ratings && view.data.ratings.lowCount > 5 ? "bad" : ""}
-            />
-          </div>
-          {view.data.series.length > 0 ? (
-            <Sparkline points={view.data.series} />
-          ) : (
-            <div className="empty">No ratings yet.</div>
-          )}
-          <div className="spark-caption">
-            <span>last {view.data.series.length} ratings</span>
-            <span>{view.data.ratings?.trend ?? ""}</span>
-          </div>
-          <div className="figures" style={{ marginTop: 16 }}>
-            <Figure
-              value={
-                view.data.algorithm ? String(view.data.algorithm.reflectionCount) : "–"
-              }
-              label="reflections"
-            />
-            <Figure
-              value={view.data.algorithm ? percent(view.data.algorithm.passRate) : "–"}
-              label="criteria pass"
-            />
-            <Figure
-              value={view.data.algorithm ? tenths(view.data.algorithm.avgSentiment) : "–"}
-              label="sentiment"
-            />
-          </div>
-          <div className="due">
-            <Due name="learning analysis" badge={view.data.due.analysis} />
-            <Due name="algorithm review" badge={view.data.due.algorithmReview} />
-            <Due name="relationship reflect" badge={view.data.due.relationshipReflect} />
-          </div>
-        </>
-      )}
-    </Panel>
-  );
-}