portable-agent-layer 0.72.0 → 0.73.0

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

@@ -1,67 +1,213 @@
-import { StrictMode, useEffect, useState } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import {
+  BrowserRouter,
+  Navigate,
+  NavLink,
+  Route,
+  Routes,
+  useParams,
+  useSearchParams,
+} from "react-router";
 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";
+import { AttentionBell } from "./attention-bell";
+import { Screen, Scroller, Seg } from "./frame";
+import { useLoaded } from "./lib/api";
+import { cn } from "./lib/cn";
+import { LOG_KEYS, Log, type LogFilter } from "./screens/log";
+import { ProjectDetail } from "./screens/project-detail";
+import {
+  isStatusFilter,
+  Projects,
+  STATUS_FILTERS,
+  type StatusFilter,
+} from "./screens/projects";
+import { Settings } from "./screens/settings";
+import { isLayout, LAYOUTS, type Layout, Today } from "./screens/today";
 
-function Masthead({ status }: { status: ServerStatus | null }) {
+const LAYOUT_KEY = "pal.control-room.layout";
+
+/**
+ * A blueprint's registration marks are drawn 6px outside its border, so a scroll
+ * box whose children are blueprints would count them as overflow. The negative
+ * margin borrows that room back from the page gutter, leaving content aligned.
+ */
+const MARK_ROOM = "-m-2 p-2";
+
+function rememberedLayout(): Layout {
+  try {
+    const stored = localStorage.getItem(LAYOUT_KEY);
+    return isLayout(stored) ? stored : "matrix";
+  } catch {
+    return "matrix";
+  }
+}
+
+function remember(layout: Layout): void {
+  try {
+    localStorage.setItem(LAYOUT_KEY, layout);
+  } catch {}
+}
+
+function TodayRoute() {
+  const [params, setParams] = useSearchParams();
+  const asked = params.get("layout");
+  const layout = isLayout(asked) ? asked : rememberedLayout();
   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>
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="mb-4 flex justify-end">
+        <Seg
+          label="layout"
+          options={LAYOUTS}
+          value={layout}
+          onPick={(next) => {
+            remember(next);
+            setParams({ layout: next });
+          }}
+        />
+      </div>
+      <Scroller className={MARK_ROOM}>
+        <Today layout={layout} />
+      </Scroller>
+    </div>
+  );
+}
+
+function ProjectsRoute() {
+  const [params, setParams] = useSearchParams();
+  const asked = params.get("status");
+  const filter: StatusFilter = isStatusFilter(asked) ? asked : "ranked";
+  return (
+    <Screen
+      title="Projects"
+      aside={
+        <Seg
+          label="status"
+          options={STATUS_FILTERS}
+          value={filter}
+          onPick={(next) => setParams({ status: next })}
+        />
+      }
+    >
+      <Projects filter={filter} />
+    </Screen>
+  );
+}
+
+function ProjectDetailRoute() {
+  const { slug } = useParams();
+  return (
+    <Scroller className={MARK_ROOM}>
+      <ProjectDetail slug={slug ?? ""} />
+    </Scroller>
+  );
+}
+
+function LogRoute() {
+  const [params, setParams] = useSearchParams();
+  const filter = Object.fromEntries(
+    LOG_KEYS.map((key) => [key, params.get(key) ?? ""])
+  ) as LogFilter;
+  const update = (next: Partial<LogFilter>) => {
+    const merged = { ...filter, ...next };
+    setParams(Object.fromEntries(Object.entries(merged).filter(([, v]) => v)));
+  };
+  return (
+    <Screen
+      title="Action log"
+      aside={
+        <span className="text-[12px] text-neutral-700">
+          every tool call this install recorded
         </span>
+      }
+    >
+      <Log filter={filter} onFilter={update} />
+    </Screen>
+  );
+}
+
+function SettingsRoute() {
+  return (
+    <Screen title="Settings">
+      <Scroller className={MARK_ROOM}>
+        <Settings />
+      </Scroller>
+    </Screen>
+  );
+}
+
+const TABS = [
+  { to: "/", label: "Today", end: true },
+  { to: "/projects", label: "Projects", end: false },
+  { to: "/log", label: "Action log", end: false },
+  { to: "/settings", label: "Settings", end: false },
+] as const;
+
+function Header({ status }: { status: ServerStatus | null }) {
+  return (
+    <header className="flex flex-wrap items-center gap-5 border-b border-divider bg-bg px-7 py-2.5">
+      <div className="flex min-w-[120px] items-baseline gap-2">
+        <span className="font-heading text-[22px] font-semibold tracking-wide">PAL</span>
+        <span className="eyebrow">control</span>
+      </div>
+      <nav className="-mb-[11px] flex gap-0.5">
+        {TABS.map((tab) => (
+          <NavLink
+            key={tab.to}
+            to={tab.to}
+            end={tab.end}
+            className={({ isActive }) =>
+              cn(
+                "font-heading border-b-2 px-3 py-2 text-[15px] font-semibold whitespace-nowrap",
+                isActive
+                  ? "border-accent text-ink"
+                  : "border-transparent text-neutral-600 hover:text-accent"
+              )
+            }
+          >
+            {tab.label}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="ml-auto flex items-center gap-3 text-[12px] text-neutral-700">
+        <span className="inline-block size-1.5 bg-accent" />
+        <b className="font-medium text-ink">{status?.machine ?? "…"}</b>
         <span>
-          port <b>{status?.port ?? "…"}</b>
+          · {status ? `${status.ledgerFiles} ledger file(s)` : "…"} · port{" "}
+          {status?.port ?? "…"}
         </span>
+        <AttentionBell />
       </div>
-    </div>
+    </header>
   );
 }
 
 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));
-  }, []);
+  const status = useLoaded<ServerStatus>("/api/status");
   return (
-    <div className="room">
-      <Masthead status={status} />
-      {error && <div className="error">{error}</div>}
-      <Agenda />
-      <MatrixGrid />
-      <div className="grid">
-        <Handoffs />
+    <BrowserRouter>
+      <div className="flex h-screen flex-col overflow-hidden">
+        <Header status={status.state === "ready" ? status.data : null} />
+        <main className="mx-auto flex w-full max-w-[1480px] min-h-0 flex-1 flex-col px-7 pt-6 pb-6">
+          <Routes>
+            <Route path="/" element={<TodayRoute />} />
+            <Route path="/projects" element={<ProjectsRoute />} />
+            <Route path="/projects/:slug" element={<ProjectDetailRoute />} />
+            <Route path="/log" element={<LogRoute />} />
+            <Route path="/settings" element={<SettingsRoute />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </main>
+        <footer className="flex flex-wrap justify-between gap-4 border-t border-divider px-7 py-3 text-[11px] text-neutral-600">
+          <span>
+            loopback only · every number from ~/.pal · no model runs on this page
+          </span>
+          <span>
+            {status.state === "ready" ? `up since ${status.data.startedAt}` : ""}
+          </span>
+        </footer>
       </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>
+    </BrowserRouter>
   );
 }
 

package/src/tools/control-room/ui/attention-bell.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import type { AttentionItem, AttentionView } from "../attention";
+import { Button } from "./components/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
+import { Empty } from "./frame";
+import { useLoaded } from "./lib/api";
+import { cn } from "./lib/cn";
+import { post } from "./lib/write";
+
+const DOT: Record<AttentionItem["severity"], string> = {
+  alarm: "bg-alarm",
+  waiting: "bg-accent",
+  note: "bg-neutral-400",
+};
+
+function BellIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </svg>
+  );
+}
+
+function Item({ item, onOpen }: { item: AttentionItem; onOpen: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cn(
+        "grid w-full cursor-pointer grid-cols-[8px_1fr_auto] items-start gap-3 border-b border-divider px-4 py-3 text-left last:border-b-0 hover:bg-neutral-200",
+        item.read && "opacity-55"
+      )}
+    >
+      <span className={cn("mt-1.5 size-1.5", DOT[item.severity])} />
+      <span>
+        <span className="block font-medium">{item.title}</span>
+        <span className="block text-[12px] text-neutral-700">{item.detail}</span>
+      </span>
+      <span className="text-[11px] whitespace-nowrap text-neutral-600">
+        {item.at.slice(5, 10)}
+      </span>
+    </button>
+  );
+}
+
+export function AttentionBell() {
+  const [nonce, setNonce] = useState(0);
+  const [open, setOpen] = useState(false);
+  const view = useLoaded<AttentionView>(`/api/attention?v=${nonce}`);
+  const navigate = useNavigate();
+  const reload = () => setNonce((n) => n + 1);
+  const unread = view.state === "ready" ? view.data.unread : 0;
+
+  const openItem = (item: AttentionItem) => {
+    void post("/api/attention/read", { ids: [item.id] }).then(() => {
+      setOpen(false);
+      reload();
+      void navigate(item.href);
+    });
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${unread} things need you`}
+          className="relative cursor-pointer border border-transparent p-1.5 text-ink hover:border-divider"
+        >
+          <BellIcon />
+          {unread > 0 && (
+            <span className="absolute -top-1 -right-1 grid min-w-4 place-items-center bg-accent-900 px-1 text-[10px] font-semibold text-bg tabular-nums">
+              {unread}
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="max-h-[70vh] overflow-auto">
+        <div className="flex items-baseline justify-between border-b border-divider px-4 py-2.5">
+          <h2 className="font-heading m-0 text-[16px] font-semibold">
+            Needs your attention
+          </h2>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              void post("/api/attention/read", { all: true }).then(reload);
+            }}
+          >
+            mark all read
+          </Button>
+        </div>
+        {view.state === "ready" && view.data.items.length === 0 ? (
+          <div className="px-4">
+            <Empty>Nothing is waiting on you.</Empty>
+          </div>
+        ) : (
+          view.state === "ready" &&
+          view.data.items.map((item) => (
+            <Item key={item.id} item={item} onOpen={() => openItem(item)} />
+          ))
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/tools/control-room/ui/components/README.md

@@ -0,0 +1,18 @@
+# ui/components
+
+shadcn/ui components, vendored and re-themed for Industry.
+
+Two adaptations were made to every file, and both apply to anything added later:
+
+- **No RSC.** The `"use client"` directive is dropped — nothing here renders on a
+  server. It matches `components.json`'s `"rsc": false`.
+- **Industry, not the shadcn default palette.** The upstream components are
+  rounded, filled and shadowed and speak in semantic tokens (`bg-primary`,
+  `text-muted-foreground`, `border-input`). Industry is square, hairline and
+  unfilled, and its tokens are the ones in `../theme.css` (`accent-*`,
+  `neutral-*`, `divider`, `ink`, `bg`). Class strings are rewritten accordingly;
+  no parallel semantic token layer exists, so there is one vocabulary to learn.
+
+`bunx shadcn@latest add <name>` will fetch a component, but its output needs both
+passes above before it belongs here. Copying the shape from
+`~/Development/git/catalyst/src/components/ui` is usually faster.

package/src/tools/control-room/ui/components/badge.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-none border border-transparent px-2 py-0.5 text-[10px] whitespace-nowrap [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent-100 text-accent-900",
+        neutral: "bg-neutral-200 text-neutral-800",
+        outline: "border-divider text-neutral-700",
+        alarm: "border-alarm/40 bg-alarm/10 text-alarm",
+      },
+    },
+    defaultVariants: { variant: "neutral" },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge };

package/src/tools/control-room/ui/components/button.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-none border font-medium whitespace-nowrap transition-colors disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "border-accent bg-accent text-bg hover:bg-accent-600",
+        secondary: "border-divider bg-transparent text-ink hover:bg-neutral-200",
+        ghost: "border-transparent bg-transparent text-ink hover:bg-neutral-200",
+      },
+      size: {
+        default: "h-8 px-4 text-[12px]",
+        sm: "h-6 px-2 text-[11px]",
+        icon: "size-8",
+      },
+    },
+    defaultVariants: { variant: "secondary", size: "default" },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button";
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button };

package/src/tools/control-room/ui/components/card.tsx

@@ -0,0 +1,45 @@
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+/** Industry's card is the blueprint object: square, hairline, unfilled, marked. */
+function Card({ className, ...props }: React.ComponentProps<"section">) {
+  return (
+    <section
+      data-slot="card"
+      className={cn("blueprint flex flex-col bg-bg p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      data-slot="card-header"
+      className={cn("mb-3 flex items-baseline justify-between gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <h2 data-slot="card-title" className={cn("eyebrow m-0", className)} {...props} />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="card-action"
+      className={cn("text-[11px] text-neutral-600", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn(className)} {...props} />;
+}
+
+export { Card, CardAction, CardContent, CardHeader, CardTitle };

package/src/tools/control-room/ui/components/input.tsx

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+const FIELD =
+  "h-8 rounded-none border border-divider bg-bg px-2 text-[12px] text-ink outline-none transition-colors focus-visible:border-accent disabled:pointer-events-none disabled:opacity-45";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input type={type} data-slot="input" className={cn(FIELD, className)} {...props} />
+  );
+}
+
+/** Industry's forms are native controls; catalyst does the same rather than wrap Radix Select. */
+function NativeSelect({ className, ...props }: React.ComponentProps<"select">) {
+  return (
+    <select
+      data-slot="native-select"
+      className={cn(FIELD, "cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export { Input, NativeSelect };

package/src/tools/control-room/ui/components/label.tsx

@@ -0,0 +1,18 @@
+import { Label as LabelPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn("eyebrow flex items-center gap-2 select-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/src/tools/control-room/ui/components/popover.tsx

@@ -0,0 +1,37 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "end",
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-[380px] rounded-none border border-divider bg-bg text-ink shadow-lg outline-none",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/tools/control-room/ui/components/separator.tsx

@@ -0,0 +1,25 @@
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-divider data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/tools/control-room/ui/components/skeleton.tsx

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-none bg-neutral-200", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/tools/control-room/ui/components/switch.tsx

@@ -0,0 +1,27 @@
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+/** Square, like everything else Industry draws — the knob slides, nothing rounds. */
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "inline-flex h-4 w-7 shrink-0 cursor-pointer items-center border border-divider transition-colors data-[state=checked]:bg-accent data-[state=unchecked]:bg-transparent",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="block size-2.5 transition-transform data-[state=checked]:translate-x-3.5 data-[state=checked]:bg-bg data-[state=unchecked]:translate-x-0.5 data-[state=unchecked]:bg-neutral-500"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };