portable-agent-layer 0.72.0 → 0.74.0

package/src/tools/control-room/ui/theme.css

@@ -0,0 +1,127 @@
+/**
+ * Industry, as Tailwind sees it. Source file — `bun run build:ui` compiles this
+ * to tailwind.css, which is what index.html actually links.
+ */
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+
+@source "./*.tsx";
+@source "./**/*.tsx";
+@source "./index.html";
+
+@theme static {
+  --color-bg: #f2f2f3;
+  --color-surface: #e9e9ea;
+  --color-ink: #1d1f20;
+  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
+
+  --color-neutral-100: #f5f5f8;
+  --color-neutral-200: #e7e7ea;
+  --color-neutral-300: #d4d4d7;
+  --color-neutral-400: #b7b7ba;
+  --color-neutral-500: #98989b;
+  --color-neutral-600: #7a7a7d;
+  --color-neutral-700: #5d5d60;
+  --color-neutral-800: #424244;
+  --color-neutral-900: #2b2b2d;
+
+  --color-accent: #5980a6;
+  --color-accent-100: #eef6ff;
+  --color-accent-200: #d6ebff;
+  --color-accent-300: #b5d9fd;
+  --color-accent-400: #94bce3;
+  --color-accent-500: #749dc4;
+  --color-accent-600: #597ea3;
+  --color-accent-700: #416180;
+  --color-accent-800: #2c455d;
+  --color-accent-900: #1d2d3d;
+
+  --color-alarm: oklch(0.55 0.17 27);
+
+  --font-heading: "Barlow Condensed", system-ui, sans-serif;
+  --font-body: "Barlow", system-ui, sans-serif;
+  --font-mono: ui-monospace, Menlo, monospace;
+
+  /* Industry's --space-N is exactly N x 3.4px, which is Tailwind's own scale
+     with a retuned base — so p-4 here is Industry's --space-4 to the pixel. */
+  --spacing: 0.2125rem;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 7px;
+
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
+  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
+  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
+
+  /* Industry draws an 11px crosshair in 55% ink whose centre sits on the
+     border line — .corner is 11px at top/left -6px over a 1px border. */
+  --registration-size: 11px;
+  --registration-inset: -6px;
+  --registration-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%231d1f20' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
+}
+
+@layer base {
+  body {
+    background: var(--color-bg);
+    color: var(--color-ink);
+    font-family: var(--font-body);
+    font-size: 13px;
+    line-height: 1.45;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background: var(--color-accent-200);
+  }
+}
+
+/**
+ * The wireframe frame every card, figure and primary button wears: square
+ * corners, a hairline border and four "+" registration marks drawn outside the
+ * box. Industry ships it as a class plus four <i> children; here the marks are
+ * one pseudo-element, so the markup stays clean.
+ */
+@utility blueprint {
+  position: relative;
+  border: 1px solid var(--color-divider);
+  border-radius: 0;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: var(--registration-inset);
+    pointer-events: none;
+    background-image: var(--registration-mark), var(--registration-mark),
+      var(--registration-mark), var(--registration-mark);
+    background-repeat: no-repeat;
+    background-size: var(--registration-size) var(--registration-size);
+    background-position: left top, right top, left bottom, right bottom;
+  }
+}
+
+/** Industry's uppercase eyebrow, used for every panel heading and column label. */
+@utility eyebrow {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-neutral-700);
+}

package/src/tools/control-room/ui/vite.config.ts

@@ -0,0 +1,36 @@
+/**
+ * The control room's build. Bun serves the page and owns every API route, but
+ * Bun's CSS bundler passes Tailwind's directives through as unknown at-rules —
+ * so the page is built here, by the first-party plugin that moves in lockstep
+ * with Tailwind itself, and Bun serves the result out of dist/.
+ *
+ * `server.proxy` is what makes `bun run dev:ui` usable: the page comes from Vite
+ * with hot reload while every /api call goes to the real control room.
+ */
+
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+/**
+ * Mirrors DEFAULT_PORT in ../server-config.ts. A config the loader reads before
+ * TypeScript resolution cannot import from the source tree, so a test asserts
+ * the two agree.
+ */
+const API_ORIGIN = "http://127.0.0.1:7250";
+
+export default defineConfig({
+  root: import.meta.dirname,
+  base: "/",
+  plugins: [react(), tailwindcss()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    sourcemap: false,
+  },
+  server: {
+    proxy: {
+      "/api": API_ORIGIN,
+    },
+  },
+});

package/src/tools/control-room/writes.ts

@@ -0,0 +1,106 @@
+/**
+ * The three things the page may change without an agent.
+ *
+ * Each one is a single named field on a single record, reached through the same
+ * rule the CLI uses — the page is a second hand on the same instrument, not a
+ * write surface over ~/.pal.
+ */
+
+import { readProject, writeProject } from "../../hooks/lib/projects";
+import {
+  raw as rawSettings,
+  reload,
+  write as writeSettings,
+} from "../../hooks/lib/settings";
+import { completeIsc, type IscSections, reopenIsc } from "../lib/project-isc";
+
+export type WriteOutcome =
+  | { ok: true; changed: boolean }
+  | { ok: false; status: number; error: string };
+
+const missing = (project: string): WriteOutcome => ({
+  ok: false,
+  status: 404,
+  error: `no such project: ${project}`,
+});
+
+export function setIscStatus(project: string, id: number, close: boolean): WriteOutcome {
+  const p = readProject(project);
+  if (!p) return missing(project);
+  const sections: IscSections = {
+    criteria: p.criteria ?? "",
+    changelog: p.changelog ?? "",
+  };
+  const move = close ? completeIsc(sections, id) : reopenIsc(sections, id);
+  if (!move.ok) return { ok: false, status: 404, error: move.reason };
+  if (move.already) return { ok: true, changed: false };
+  p.criteria = move.criteria;
+  p.changelog = move.changelog;
+  p.updated = new Date().toISOString();
+  writeProject(p);
+  return { ok: true, changed: true };
+}
+
+export const QUADRANTS = ["now", "plan", "noise", "later"] as const;
+export type Quadrant = (typeof QUADRANTS)[number];
+
+export function isQuadrant(value: unknown): value is Quadrant {
+  return typeof value === "string" && (QUADRANTS as readonly string[]).includes(value);
+}
+
+/**
+ * Importance already has a home in `serves`; urgency is read off the files.
+ * A placement overrules the pair, and says who decided, so the next guess can
+ * run freely without overwriting the answer.
+ */
+export function setPlacement(project: string, quadrant: Quadrant | null): WriteOutcome {
+  const p = readProject(project);
+  if (!p) return missing(project);
+  if (quadrant) {
+    p.placed = quadrant;
+    p.placed_by = "user";
+  } else {
+    p.placed = undefined;
+    p.placed_by = undefined;
+  }
+  p.updated = new Date().toISOString();
+  writeProject(p);
+  return { ok: true, changed: true };
+}
+
+export interface InstallSettings {
+  actor: string;
+  timezone: string;
+}
+
+export function readInstallSettings(): InstallSettings {
+  const identity = rawSettings().identity ?? {};
+  return {
+    actor: identity.principal?.name ?? "",
+    timezone: identity.principal?.timezone ?? "",
+  };
+}
+
+/** Only the two fields the Settings panel offers; everything else is left alone. */
+export function writeInstallSettings(update: Partial<InstallSettings>): WriteOutcome {
+  if (update.timezone && !isTimezone(update.timezone)) {
+    return { ok: false, status: 400, error: `not a timezone: ${update.timezone}` };
+  }
+  const data = rawSettings();
+  const identity = data.identity ?? {};
+  const principal = { ...identity.principal };
+  if (update.actor !== undefined) principal.name = update.actor;
+  if (update.timezone !== undefined) principal.timezone = update.timezone;
+  writeSettings({ ...data, identity: { ...identity, principal } });
+  reload();
+  return { ok: true, changed: true };
+}
+
+function isTimezone(value: string): boolean {
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: value });
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/tools/ledger/outcomes.ts

@@ -0,0 +1,9 @@
+/**
+ * The outcomes a page groups by. Kept apart from view.ts because the browser
+ * needs this list and nothing else from that module — importing it there would
+ * drag the actor and machine registries, and node:fs behind them, into the
+ * page bundle.
+ */
+
+export const PAGE_OUTCOMES = ["applied", "failed", "denied", "blocked"] as const;
+export type PageOutcome = (typeof PAGE_OUTCOMES)[number];

package/src/tools/ledger/query.ts

@@ -34,6 +34,7 @@ export interface LedgerFilter {
   actor?: string;
   machine?: string;
   runtime?: string;
+  authority?: string;
   outcome?: string;
   tool?: string;
   target?: string;
@@ -100,6 +101,7 @@ function matchesFilter(entry: LedgerEntry, filter: LedgerFilter): boolean {
   if (filter.actor && entry.actor !== filter.actor) return false;
   if (filter.machine && entry.machine !== filter.machine) return false;
   if (filter.runtime && entry.runtime !== filter.runtime) return false;
+  if (filter.authority && entry.authority !== filter.authority) return false;
   if (filter.outcome && entry.outcome !== filter.outcome) return false;
   if (filter.tool && entry.tool.toLowerCase() !== filter.tool.toLowerCase()) return false;
   if (filter.target && !entry.target.includes(filter.target)) return false;

package/src/tools/ledger/view.ts

@@ -12,10 +12,16 @@ import {
   readActorRegistry,
 } from "../../hooks/lib/actor";
 import type { LedgerEntry } from "../../hooks/lib/ledger";
+import {
+  loadMachine,
+  displayName as machineDisplayName,
+  type RegistryEntry,
+  readRegistry as readMachineRegistry,
+} from "../../hooks/lib/machine";
+import { PAGE_OUTCOMES, type PageOutcome } from "./outcomes";
 import { anchorSlugOf, changedLines, type LedgerFilter, queryLedger } from "./query";
 
-export const PAGE_OUTCOMES = ["applied", "failed", "denied", "blocked"] as const;
-export type PageOutcome = (typeof PAGE_OUTCOMES)[number];
+export { PAGE_OUTCOMES, type PageOutcome };
 
 export interface OutcomeCount {
   total: number;
@@ -32,6 +38,8 @@ export interface LedgerViewStats {
 export interface LedgerViewRow {
   id: string;
   ts: string;
+  /** Where the record was written. Local-only in the record; the page names it. */
+  machine: string;
   actor: string;
   authority: string;
   runtime: string;
@@ -89,11 +97,17 @@ export function displayTarget(target: string): string {
   return rest ? `${slug} ${rest}` : slug;
 }
 
-function toRow(entry: LedgerEntry, registry: ActorRegistryEntry[]): LedgerViewRow {
+interface Names {
+  actors: ActorRegistryEntry[];
+  machines: RegistryEntry[];
+}
+
+function toRow(entry: LedgerEntry, { actors, machines }: Names): LedgerViewRow {
   const row: LedgerViewRow = {
     id: entry.id,
     ts: entry.ts,
-    actor: actorDisplayName(entry.actor, registry),
+    machine: machineDisplayName(entry.machine, machines),
+    actor: actorDisplayName(entry.actor, actors),
     authority: entry.authority,
     runtime: entry.runtime,
     tool: entry.tool,
@@ -106,18 +120,25 @@ function toRow(entry: LedgerEntry, registry: ActorRegistryEntry[]): LedgerViewRo
   return row;
 }
 
-/** The local actor first: on a fresh install the registry may not list them yet. */
-function knownActors(): ActorRegistryEntry[] {
-  const self = loadActor();
-  return [{ id: self.id, label: self.label }, ...readActorRegistry()];
+/** This install first: on a fresh machine the registries may not list it yet. */
+function knownNames(): Names {
+  const actor = loadActor();
+  const machine = loadMachine();
+  return {
+    actors: [{ id: actor.id, label: actor.label }, ...readActorRegistry()],
+    machines: [
+      { id: machine.id, label: machine.label, os: machine.os },
+      ...readMachineRegistry(),
+    ],
+  };
 }
 
 export function viewRows(entries: LedgerEntry[]): LedgerViewRow[] {
-  const registry = knownActors();
+  const names = knownNames();
   return entries
     .slice()
     .reverse()
-    .map((entry) => toRow(entry, registry));
+    .map((entry) => toRow(entry, names));
 }
 
 export function ledgerView(filter: LedgerFilter = {}): LedgerView {

package/src/tools/lib/handoff-note.ts

@@ -86,3 +86,17 @@ export function recordNote(
 ): HandoffStore {
   return trimHandoffs({ ...store, [note.cwd]: entryFor(note, now) });
 }
+
+/**
+ * Fills in the one field an auto handoff cannot write for itself. Never
+ * overwrites an answer already on the entry, and never invents an entry.
+ */
+export function withWaitingOn(
+  store: HandoffStore,
+  cwd: string,
+  question: string
+): HandoffStore {
+  const entry = store[cwd];
+  if (!entry || entry.waitingOn) return store;
+  return { ...store, [cwd]: { ...entry, waitingOn: question } };
+}

package/src/tools/lib/project-isc.ts

@@ -140,6 +140,67 @@ export function selectIscs(
   return open;
 }
 
+export interface IscSections {
+  criteria: string;
+  changelog: string;
+}
+
+export type IscMove =
+  | ({ ok: true; already: boolean } & IscSections)
+  | { ok: false; reason: string };
+
+/**
+ * Closing an ISC moves its line out of Criteria and files it under a dated
+ * archive heading in the Changelog. Reopening walks it back. Both are pure so
+ * the CLI and the control room reach the same record through one rule.
+ */
+export function completeIsc(
+  sections: IscSections,
+  id: number,
+  now: Date = new Date()
+): IscMove {
+  const kept = { criteria: sections.criteria, changelog: sections.changelog };
+  if (parseIscs(sections.changelog).some((i) => i.id === id)) {
+    return { ok: true, already: true, ...kept };
+  }
+  const { line, rest } = removeIscLine(sections.criteria, id);
+  if (!line) return { ok: false, reason: `ISC-${id} not found` };
+  return {
+    ok: true,
+    already: false,
+    criteria: rest,
+    changelog: archiveLine(
+      sections.changelog,
+      line.replace("[ ]", "[x]"),
+      "Archived",
+      now
+    ),
+  };
+}
+
+export function reopenIsc(sections: IscSections, id: number): IscMove {
+  const kept = { criteria: sections.criteria, changelog: sections.changelog };
+  if (parseIscs(sections.criteria).some((i) => i.id === id && i.status === "open")) {
+    return { ok: true, already: true, ...kept };
+  }
+  let changelog = sections.changelog;
+  let criteria = sections.criteria;
+  let removed = removeIscLine(changelog, id);
+  if (removed.line) changelog = dropEmptyArchiveHeadings(removed.rest);
+  else {
+    removed = removeIscLine(criteria, id);
+    if (removed.line) criteria = removed.rest;
+  }
+  if (!removed.line) return { ok: false, reason: `ISC-${id} not found` };
+  const openLine = removed.line.replace(/\[[x~]\]/i, "[ ]");
+  return {
+    ok: true,
+    already: false,
+    criteria: criteria ? `${criteria.trimEnd()}\n${openLine}` : openLine,
+    changelog,
+  };
+}
+
 /** A filesystem-safe stem for a task's own ISA, kept unique by the clock. */
 export function taskSlug(title: string, now: number = Date.now()): string {
   const sanitized = title

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

@@ -1,43 +0,0 @@
-import type { AgendaView } from "../data";
-import { Pending, useLoaded } from "./panel";
-
-function Age({ view }: { view: AgendaView }) {
-  if (!view.generatedAt) return <span className="agenda-age">never written</span>;
-  const hours = view.ageHours ?? 0;
-  const text = hours < 1 ? "written just now" : `written ${hours}h ago`;
-  return (
-    <span className={view.stale ? "agenda-age stale" : "agenda-age"}>
-      {view.stale ? `${text} — out of date` : text}
-    </span>
-  );
-}
-
-export function Agenda() {
-  const loaded = useLoaded<AgendaView>("/api/agenda");
-
-  return (
-    <section className="agenda">
-      <header>
-        <h2>Today</h2>
-        {loaded.state === "ready" && <Age view={loaded.data} />}
-      </header>
-      <Pending value={loaded} />
-      {loaded.state === "ready" &&
-        (loaded.data.moves.length === 0 ? (
-          <p className="agenda-empty">
-            No moves yet. They are written when a session ends — finish one and come back.
-          </p>
-        ) : (
-          <ol className="moves">
-            {loaded.data.moves.map((move, i) => (
-              <li key={move.move}>
-                <span className="rank">{i + 1}</span>
-                <span className="move">{move.move}</span>
-                <span className="because">{move.because}</span>
-              </li>
-            ))}
-          </ol>
-        ))}
-    </section>
-  );
-}

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

@@ -1,67 +0,0 @@
-import type { AgentsRow, AgentsView } from "../data";
-import { Panel, Pending, useLoaded } from "./panel";
-
-function Row({ r, max }: { r: AgentsRow; max: number }) {
-  return (
-    <tr>
-      <td>
-        {r.slug}
-        <span className="bar">
-          <i style={{ width: `${(r.actions / max) * 100}%` }} />
-        </span>
-      </td>
-      <td className="num">{r.actions}</td>
-      <td>
-        <span className="runtimes">
-          {Object.entries(r.runtimes).map(([runtime, n]) => (
-            <span key={runtime} className="tag">
-              {runtime} {n}
-            </span>
-          ))}
-        </span>
-      </td>
-      <td className="num">{r.machines}</td>
-      <td className="num">{r.actors}</td>
-      <td className="num">{r.sessions}</td>
-    </tr>
-  );
-}
-
-export function Agents() {
-  const view = useLoaded<AgentsView>("/api/agents");
-  const max =
-    view.state === "ready" ? Math.max(1, ...view.data.projects.map((p) => p.actions)) : 1;
-  return (
-    <Panel
-      index="04 · activity"
-      title="Agents at work"
-      span={7}
-      order={3}
-      aside={view.state === "ready" ? `since ${view.data.since.slice(0, 10)}` : ""}
-    >
-      <Pending value={view} />
-      {view.state === "ready" && view.data.projects.length === 0 && (
-        <div className="empty">No recorded actions in the window.</div>
-      )}
-      {view.state === "ready" && view.data.projects.length > 0 && (
-        <table>
-          <thead>
-            <tr>
-              <th>project</th>
-              <th className="num">actions</th>
-              <th>runtimes</th>
-              <th className="num">machines</th>
-              <th className="num">actors</th>
-              <th className="num">sessions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {view.data.projects.map((r) => (
-              <Row key={r.slug} r={r} max={max} />
-            ))}
-          </tbody>
-        </table>
-      )}
-    </Panel>
-  );
-}