portable-agent-layer 0.72.0 → 0.74.0

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

@@ -0,0 +1,205 @@
+import { useEffect, useState } from "react";
+import type { ControlRoomPrefs } from "../../prefs";
+import type { ServerStatus } from "../../server";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
+import { Label } from "../components/label";
+import { Switch } from "../components/switch";
+import { Empty, Panel, Pending } from "../frame";
+import { useLoaded } from "../lib/api";
+import { setInstallSettings, setPrefs as writePrefs } from "../lib/write";
+
+interface InstallSettings {
+  actor: string;
+  timezone: string;
+}
+
+function Field({
+  label,
+  hint,
+  value,
+  onChange,
+}: {
+  label: string;
+  hint: string;
+  value: string;
+  onChange: (next: string) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <Label>{label}</Label>
+      <span className="text-[11px] text-neutral-600">{hint}</span>
+      <Input value={value} onChange={(e) => onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function ThisInstall({ initial }: { initial: InstallSettings }) {
+  const [form, setForm] = useState(initial);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+  const dirty = form.actor !== initial.actor || form.timezone !== initial.timezone;
+
+  useEffect(() => {
+    if (dirty) setSaved(false);
+  }, [dirty]);
+
+  const save = () => {
+    void setInstallSettings({ ...form }).then((failure) => {
+      setError(failure);
+      setSaved(failure === null);
+    });
+  };
+
+  return (
+    <Panel title="This install">
+      <div className="flex flex-col gap-4">
+        <Field
+          label="actor"
+          hint="who caused a record — this travels with an export"
+          value={form.actor}
+          onChange={(actor) => setForm({ ...form, actor })}
+        />
+        <Field
+          label="timezone"
+          hint="how dates are read, e.g. Europe/Budapest"
+          value={form.timezone}
+          onChange={(timezone) => setForm({ ...form, timezone })}
+        />
+        {error && (
+          <p className="border-l-2 border-alarm bg-alarm/10 px-3 py-2 text-[12px] text-alarm">
+            {error}
+          </p>
+        )}
+        <div className="flex items-center gap-3">
+          <Button variant="primary" disabled={!dirty} onClick={save}>
+            Save
+          </Button>
+          {saved && <span className="text-[12px] text-neutral-600">saved</span>}
+        </div>
+      </div>
+    </Panel>
+  );
+}
+
+const ATTENTION_LABELS: Record<string, string> = {
+  refusals: "A hook blocked a call, or you denied one",
+  waiting: "A handoff left a question for you",
+  unranked: "A project has no purpose on record",
+};
+
+const THRESHOLDS = [
+  { key: "quietAfterDays", label: 'a project is "gone quiet" after' },
+  { key: "urgentWithinDays", label: "a dated step is urgent within" },
+] as const;
+
+function Ranking({ initial }: { initial: ControlRoomPrefs }) {
+  const [prefs, setPrefs] = useState(initial);
+  const [error, setError] = useState<string | null>(null);
+
+  const save = (update: Record<string, unknown>) => {
+    void writePrefs(update).then((failure) => {
+      setError(failure);
+      if (!failure) setPrefs({ ...prefs, ...update } as ControlRoomPrefs);
+    });
+  };
+
+  return (
+    <>
+      <Panel title="Ranking">
+        <div className="flex flex-col gap-4">
+          {THRESHOLDS.map(({ key, label }) => (
+            <div key={key} className="flex flex-col gap-1">
+              <Label>{label}</Label>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="number"
+                  min={1}
+                  max={365}
+                  className="w-20"
+                  value={prefs[key]}
+                  onChange={(e) => {
+                    const days = Number(e.target.value);
+                    setPrefs({ ...prefs, [key]: days });
+                    if (Number.isInteger(days) && days > 0) save({ [key]: days });
+                  }}
+                />
+                <span className="text-[12px] text-neutral-700">days</span>
+              </div>
+            </div>
+          ))}
+          <div className="flex items-center justify-between gap-3 border-t border-divider pt-3 text-[12.5px]">
+            <span>rank stated goals in the grid, not just projects</span>
+            <Switch
+              aria-label="rank stated goals in the grid"
+              checked={prefs.rankGoals}
+              onCheckedChange={(rankGoals) => save({ rankGoals })}
+            />
+          </div>
+          {error && (
+            <p className="border-l-2 border-alarm bg-alarm/10 px-3 py-2 text-[12px] text-alarm">
+              {error}
+            </p>
+          )}
+        </div>
+      </Panel>
+      <Panel title="Attention">
+        <p className="mb-3 text-[12px] text-neutral-700">
+          What lights the bell. Each source is a fact PAL already holds — nothing here
+          asks a model.
+        </p>
+        <div className="flex flex-col">
+          {Object.entries(prefs.attention).map(([source, on]) => (
+            <div
+              key={source}
+              className="flex items-center justify-between gap-3 border-t border-divider py-2.5 text-[12.5px] first:border-t-0"
+            >
+              <span>{ATTENTION_LABELS[source] ?? source}</span>
+              <Switch
+                aria-label={ATTENTION_LABELS[source] ?? source}
+                checked={on}
+                onCheckedChange={(next) => save({ attention: { [source]: next } })}
+              />
+            </div>
+          ))}
+        </div>
+      </Panel>
+    </>
+  );
+}
+
+export function Settings() {
+  const settings = useLoaded<InstallSettings>("/api/settings");
+  const prefs = useLoaded<ControlRoomPrefs>("/api/prefs");
+  const status = useLoaded<ServerStatus>("/api/status");
+
+  if (settings.state !== "ready") return <Pending value={settings} />;
+  return (
+    <div className="grid items-start gap-6 md:grid-cols-2">
+      <ThisInstall initial={settings.data} />
+      {prefs.state === "ready" && <Ranking initial={prefs.data} />}
+      <Panel title="Where it runs">
+        {status.state === "ready" ? (
+          <dl className="m-0 grid grid-cols-[110px_1fr] gap-y-1.5 text-[12.5px]">
+            <dt className="text-neutral-600">machine</dt>
+            <dd className="m-0">{status.data.machine}</dd>
+            <dt className="text-neutral-600">port</dt>
+            <dd className="m-0 tabular-nums">{status.data.port}</dd>
+            <dt className="text-neutral-600">pid</dt>
+            <dd className="m-0 tabular-nums">{status.data.pid}</dd>
+            <dt className="text-neutral-600">ledger</dt>
+            <dd className="m-0">{status.data.ledgerFiles} file(s)</dd>
+            <dt className="text-neutral-600">up since</dt>
+            <dd className="m-0">{status.data.startedAt}</dd>
+          </dl>
+        ) : (
+          <Empty>not answering</Empty>
+        )}
+        <p className="mt-3 text-[11px] text-neutral-600">
+          Loopback only. The machine label is set with <code>pal cli machine</code>, and
+          stays on this machine.
+        </p>
+      </Panel>
+    </div>
+  );
+}

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

@@ -0,0 +1,391 @@
+import { useState } from "react";
+import type { AgendaView, HandoffCard, SignalView, SummaryView } from "../../data";
+import type { Matrix, MatrixItem } from "../../matrix";
+import { Badge } from "../components/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/table";
+import { tenths } from "../format";
+import { Empty, Panel, Pending } from "../frame";
+import { type Loaded, useLoaded } from "../lib/api";
+import { cn } from "../lib/cn";
+import { GoalsList, HandoffList, ItemCard, MovesList, ReasonTags } from "../parts";
+
+export const LAYOUTS = [
+  { value: "matrix", label: "matrix" },
+  { value: "list", label: "list" },
+  { value: "briefing", label: "briefing" },
+] as const;
+
+export type Layout = (typeof LAYOUTS)[number]["value"];
+
+export function isLayout(value: string | null): value is Layout {
+  return LAYOUTS.some((l) => l.value === value);
+}
+
+const QUADRANTS = [
+  { id: "now", title: "Do now", note: "matters and cannot wait", lit: true },
+  {
+    id: "plan",
+    title: "Give it a slot",
+    note: "matters, nothing forcing it",
+    lit: false,
+  },
+  {
+    id: "noise",
+    title: "Loud, not load-bearing",
+    note: "pressing but serves nothing",
+    lit: false,
+  },
+  { id: "later", title: "Let it sit", note: "neither", lit: false },
+] as const;
+
+const FORTNIGHT_DAYS = 14;
+
+function goalsOf(matrix: Matrix): MatrixItem[] {
+  return [...matrix.now, ...matrix.plan, ...matrix.noise, ...matrix.later].filter(
+    (i) => i.kind === "goal"
+  );
+}
+
+function rankedOf(matrix: Matrix): { item: MatrixItem; quadrant: string }[] {
+  return QUADRANTS.flatMap(({ id, title }) =>
+    (matrix[id] as MatrixItem[]).map((item) => ({ item, quadrant: title }))
+  );
+}
+
+function Quadrant({
+  title,
+  note,
+  lit,
+  items,
+  onSaved,
+  compact,
+}: {
+  title: string;
+  note: string;
+  lit: boolean;
+  items: MatrixItem[];
+  onSaved: () => void;
+  compact?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "blueprint flex flex-col gap-2 p-4",
+        lit ? "bg-accent-100" : "bg-transparent",
+        compact ? "min-h-[120px]" : "min-h-[160px]"
+      )}
+    >
+      <div className="flex items-baseline justify-between gap-2">
+        <h3 className="m-0 text-[20px]">{title}</h3>
+        <span className="text-[11px] text-neutral-700">{note}</span>
+      </div>
+      {items.length === 0 ? (
+        <Empty>nothing here</Empty>
+      ) : (
+        items.map((item) => (
+          <ItemCard key={`${item.kind}:${item.id}`} item={item} onSaved={onSaved} />
+        ))
+      )}
+    </div>
+  );
+}
+
+function Fortnight() {
+  const view = useLoaded<SummaryView>(`/api/summary?days=${FORTNIGHT_DAYS}`);
+  const s = view.state === "ready" ? view.data : null;
+  return (
+    <Panel title={`Last ${FORTNIGHT_DAYS} days`}>
+      <dl className="m-0 grid grid-cols-3 gap-2">
+        <Figure n={s ? String(s.actions) : "—"} label="actions" />
+        <Figure n={s ? String(s.refusals) : "—"} label="refusals" />
+        <Figure
+          n={s?.rating === null || !s ? "—" : tenths(s.rating)}
+          label="rating, last 10"
+        />
+      </dl>
+    </Panel>
+  );
+}
+
+function Figure({ n, label }: { n: string; label: string }) {
+  return (
+    <div>
+      <dt className="font-heading text-[26px] leading-none font-semibold tabular-nums">
+        {n}
+      </dt>
+      <dd className="m-0 text-[11px] text-neutral-600">{label}</dd>
+    </div>
+  );
+}
+
+function DueBadges() {
+  const signal = useLoaded<SignalView>("/api/signal");
+  if (signal.state !== "ready") return <Pending value={signal} />;
+  const due = Object.entries(signal.data.due).filter(([, b]) => b.state === "due");
+  if (due.length === 0) return <Empty>Nothing is due.</Empty>;
+  return (
+    <div className="flex flex-col gap-2">
+      {due.map(([name, badge]) => (
+        <div key={name} className="text-[12px]">
+          <Badge variant="accent">{name}</Badge>
+          <span className="ml-2 text-neutral-700">{badge.detail}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Sidebar({ matrix, handoffs }: { matrix: Matrix; handoffs: HandoffCard[] }) {
+  return (
+    <aside className="flex flex-col gap-6">
+      <Panel title="Where you left off">
+        <HandoffList cards={handoffs} />
+      </Panel>
+      <Panel title="Goals">
+        <GoalsList goals={goalsOf(matrix)} />
+      </Panel>
+      <Fortnight />
+      <Panel title="Needs a run">
+        <DueBadges />
+      </Panel>
+    </aside>
+  );
+}
+
+function MatrixLayout({
+  matrix,
+  handoffs,
+  moves,
+  onSaved,
+}: {
+  matrix: Matrix;
+  handoffs: HandoffCard[];
+  moves: AgendaView["moves"];
+  onSaved: () => void;
+}) {
+  return (
+    <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
+      <div>
+        <div className="mb-6 grid gap-px border border-divider bg-divider md:grid-cols-3">
+          {moves.map((move, i) => (
+            <div
+              key={move.move}
+              className="grid grid-cols-[26px_1fr] gap-2 bg-bg px-4 py-3"
+            >
+              <span className="font-heading text-[22px] leading-none font-semibold text-accent">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+              <span>
+                <span className="block font-medium text-pretty">{move.move}</span>
+                <span className="text-[12px] text-neutral-700">{move.because}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+        <div className="grid grid-cols-[18px_minmax(0,1fr)_minmax(0,1fr)]">
+          <div />
+          <div className="eyebrow pb-1.5 pl-3">urgent</div>
+          <div className="eyebrow pb-1.5 pl-3">not urgent</div>
+          <div className="eyebrow [writing-mode:vertical-rl] rotate-180 text-center">
+            important
+          </div>
+          {QUADRANTS.slice(0, 2).map((q) => (
+            <Quadrant
+              key={q.id}
+              {...q}
+              items={matrix[q.id] as MatrixItem[]}
+              onSaved={onSaved}
+            />
+          ))}
+          <div className="eyebrow [writing-mode:vertical-rl] rotate-180 text-center">
+            not important
+          </div>
+          {QUADRANTS.slice(2).map((q) => (
+            <Quadrant
+              key={q.id}
+              {...q}
+              items={matrix[q.id] as MatrixItem[]}
+              onSaved={onSaved}
+            />
+          ))}
+        </div>
+      </div>
+      <Sidebar matrix={matrix} handoffs={handoffs} />
+    </div>
+  );
+}
+
+function ListLayout({
+  matrix,
+  handoffs,
+  moves,
+}: {
+  matrix: Matrix;
+  handoffs: HandoffCard[];
+  moves: AgendaView["moves"];
+  onSaved: () => void;
+}) {
+  return (
+    <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_260px]">
+      <div className="blueprint overflow-x-auto bg-bg">
+        <Table className="min-w-[720px] text-[13px]">
+          <TableHeader>
+            <tr>
+              {["Item", "Placed", "Why", "Next"].map((column) => (
+                <TableHead key={column}>{column}</TableHead>
+              ))}
+            </tr>
+          </TableHeader>
+          <TableBody>
+            {rankedOf(matrix).map(({ item, quadrant }) => (
+              <TableRow key={`${item.kind}:${item.id}`}>
+                <TableCell>
+                  <span className="font-heading text-[15px] font-semibold">
+                    {item.label}
+                  </span>
+                </TableCell>
+                <TableCell className="whitespace-nowrap">{quadrant}</TableCell>
+                <TableCell className="min-w-[200px]">
+                  <ReasonTags item={item} />
+                </TableCell>
+                <TableCell className="max-w-[320px] text-[12px] text-neutral-800">
+                  {item.detail}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <aside className="flex flex-col gap-6">
+        <Panel title="Three moves">
+          <MovesList moves={moves} />
+        </Panel>
+        <Panel title="Grid">
+          <div className="grid grid-cols-2 gap-1">
+            {QUADRANTS.map((q) => (
+              <div key={q.id} className="border border-divider p-2">
+                <span className="font-heading block text-[24px] leading-none font-semibold">
+                  {(matrix[q.id] as MatrixItem[]).length}
+                </span>
+                <span className="eyebrow">{q.title}</span>
+              </div>
+            ))}
+          </div>
+        </Panel>
+        <Panel title="Where you left off">
+          <HandoffList cards={handoffs} />
+        </Panel>
+      </aside>
+    </div>
+  );
+}
+
+function BriefingLayout({
+  matrix,
+  handoffs,
+  moves,
+  onSaved,
+}: {
+  matrix: Matrix;
+  handoffs: HandoffCard[];
+  moves: AgendaView["moves"];
+  onSaved: () => void;
+}) {
+  return (
+    <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
+      <div className="flex flex-col gap-8">
+        <div>
+          <h6 className="eyebrow mb-2">If you only do three things</h6>
+          <MovesList moves={moves} size="large" />
+        </div>
+        <div>
+          <h6 className="eyebrow mb-2">Where you left off</h6>
+          <HandoffList cards={handoffs} />
+        </div>
+      </div>
+      <div className="flex flex-col gap-6">
+        <div>
+          <h6 className="eyebrow mb-2">The grid</h6>
+          <div className="grid grid-cols-2 gap-1.5">
+            {QUADRANTS.map((q) => (
+              <Quadrant
+                key={q.id}
+                {...q}
+                compact
+                items={matrix[q.id] as MatrixItem[]}
+                onSaved={onSaved}
+              />
+            ))}
+          </div>
+        </div>
+        <Panel title="Goals">
+          <GoalsList goals={goalsOf(matrix)} />
+        </Panel>
+      </div>
+    </div>
+  );
+}
+
+function Heading({ agenda, matrix }: { agenda: AgendaView; matrix: Matrix }) {
+  const written = agenda.generatedAt
+    ? `agenda written ${agenda.ageHours ?? 0}h ago at session stop`
+    : "no agenda written yet";
+  return (
+    <div className="mb-5 flex flex-wrap items-baseline justify-between gap-4">
+      <div className="flex flex-wrap items-baseline gap-4">
+        <h1 className="m-0 text-[34px]">
+          {new Date().toLocaleDateString(undefined, {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+          })}
+        </h1>
+        <span
+          className={cn("text-[12px]", agenda.stale ? "text-alarm" : "text-neutral-700")}
+        >
+          {written} · {matrix.now.length} items need you
+        </span>
+      </div>
+      {matrix.unranked > 0 && (
+        <span className="text-[12px] text-neutral-700">
+          {matrix.unranked} project(s) with no purpose on record
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function Today({ layout }: { layout: Layout }) {
+  const [nonce, setNonce] = useState(0);
+  const matrix = useLoaded<Matrix>(`/api/matrix?v=${nonce}`);
+  const agenda = useLoaded<AgendaView>("/api/agenda");
+  const handoffs = useLoaded<HandoffCard[]>("/api/handoffs");
+  const reload = () => setNonce((n) => n + 1);
+
+  const waiting: Loaded<unknown>[] = [matrix, agenda, handoffs];
+  const notReady = waiting.find((v) => v.state !== "ready");
+  if (notReady || matrix.state !== "ready") return <Pending value={notReady ?? matrix} />;
+  if (agenda.state !== "ready" || handoffs.state !== "ready") return null;
+
+  const shared = {
+    matrix: matrix.data,
+    handoffs: handoffs.data,
+    moves: agenda.data.moves,
+    onSaved: reload,
+  };
+  return (
+    <section>
+      <Heading agenda={agenda.data} matrix={matrix.data} />
+      {layout === "matrix" && <MatrixLayout {...shared} />}
+      {layout === "list" && <ListLayout {...shared} />}
+      {layout === "briefing" && <BriefingLayout {...shared} />}
+    </section>
+  );
+}