npm - portable-agent-layer - Versions diffs - 0.72.0 → 0.74.0 - Mend

portable-agent-layer 0.72.0 → 0.74.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/package.json +10 -7
package/src/cli/index.ts +21 -2
package/src/cli/server.ts +33 -0
package/src/hooks/handlers/agenda.ts +195 -7
package/src/hooks/handlers/update-check.ts +1 -1
package/src/hooks/lib/agenda-store.ts +2 -0
package/src/hooks/lib/goal-links.ts +83 -0
package/src/hooks/lib/models.ts +1 -1
package/src/hooks/lib/projects.ts +5 -0
package/src/hooks/lib/settings.ts +2 -0
package/src/hooks/lib/telos-goals.ts +8 -2
package/src/hooks/lib/token-usage.ts +2 -0
package/src/tools/agent/project.ts +22 -20
package/src/tools/control-room/attention.ts +146 -0
package/src/tools/control-room/data.ts +76 -5
package/src/tools/control-room/detail.ts +158 -0
package/src/tools/control-room/matrix.ts +91 -19
package/src/tools/control-room/prefs.ts +96 -0
package/src/tools/control-room/server-config.ts +8 -0
package/src/tools/control-room/server.ts +196 -11
package/src/tools/control-room/snooze.ts +65 -0
package/src/tools/control-room/static.ts +68 -0
package/src/tools/control-room/ui/app.tsx +196 -50
package/src/tools/control-room/ui/attention-bell.tsx +118 -0
package/src/tools/control-room/ui/components/README.md +18 -0
package/src/tools/control-room/ui/components/badge.tsx +38 -0
package/src/tools/control-room/ui/components/button.tsx +43 -0
package/src/tools/control-room/ui/components/card.tsx +45 -0
package/src/tools/control-room/ui/components/input.tsx +24 -0
package/src/tools/control-room/ui/components/label.tsx +18 -0
package/src/tools/control-room/ui/components/popover.tsx +37 -0
package/src/tools/control-room/ui/components/separator.tsx +25 -0
package/src/tools/control-room/ui/components/skeleton.tsx +14 -0
package/src/tools/control-room/ui/components/switch.tsx +27 -0
package/src/tools/control-room/ui/components/table.tsx +60 -0
package/src/tools/control-room/ui/components/toggle-group.tsx +38 -0
package/src/tools/control-room/ui/dist/assets/index-BoQjFpzV.js +49 -0
package/src/tools/control-room/ui/dist/assets/index-Dncp2bYg.css +2 -0
package/src/tools/control-room/ui/dist/index.html +19 -0
package/src/tools/control-room/ui/format.ts +0 -12
package/src/tools/control-room/ui/frame.tsx +125 -0
package/src/tools/control-room/ui/index.html +2 -2
package/src/tools/control-room/ui/lib/api.ts +27 -0
package/src/tools/control-room/ui/lib/cn.ts +6 -0
package/src/tools/control-room/ui/lib/write.ts +43 -0
package/src/tools/control-room/ui/package.json +28 -0
package/src/tools/control-room/ui/parts.tsx +235 -0
package/src/tools/control-room/ui/screens/log.tsx +274 -0
package/src/tools/control-room/ui/screens/project-detail.tsx +302 -0
package/src/tools/control-room/ui/screens/projects.tsx +128 -0
package/src/tools/control-room/ui/screens/settings.tsx +205 -0
package/src/tools/control-room/ui/screens/today.tsx +391 -0
package/src/tools/control-room/ui/theme.css +127 -0
package/src/tools/control-room/ui/vite.config.ts +36 -0
package/src/tools/control-room/writes.ts +106 -0
package/src/tools/ledger/outcomes.ts +9 -0
package/src/tools/ledger/query.ts +2 -0
package/src/tools/ledger/view.ts +31 -10
package/src/tools/lib/handoff-note.ts +14 -0
package/src/tools/lib/project-isc.ts +61 -0
package/src/tools/control-room/ui/agenda.tsx +0 -43
package/src/tools/control-room/ui/agents.tsx +0 -67
package/src/tools/control-room/ui/app.css +0 -857
package/src/tools/control-room/ui/board.tsx +0 -82
package/src/tools/control-room/ui/handoffs.tsx +0 -37
package/src/tools/control-room/ui/ledger.tsx +0 -137
package/src/tools/control-room/ui/matrix.tsx +0 -117
package/src/tools/control-room/ui/panel.tsx +0 -60
package/src/tools/control-room/ui/signal.tsx +0 -161

package/src/tools/control-room/static.ts ADDED Viewed

@@ -0,0 +1,68 @@
+/**
+ * The built page, off disk. Vite compiles src/tools/control-room/ui into
+ * ui/dist; this serves it, and says so plainly when the build has not been run
+ * rather than answering a blank page.
+ */
+import { spawnSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { isAbsolute, relative, resolve } from "node:path";
+const UI_DIST = resolve(import.meta.dir, "ui", "dist");
+export const BUILD_COMMAND = "bun run build:ui";
+export function isBuilt(): boolean {
+  return existsSync(resolve(UI_DIST, "index.html"));
+}
+/**
+ * A clone has vite; a published install has the prepacked dist and never needs
+ * it. Either way the page is there by the time the server answers.
+ */
+export function buildPage(): boolean {
+  const repoRoot = resolve(import.meta.dir, "..", "..", "..");
+  // node_modules/.bin/vite is a shell shim that Windows cannot spawn directly;
+  // the package's own JS entry runs the same build under any runtime.
+  const vite = resolve(repoRoot, "node_modules", "vite", "bin", "vite.js");
+  if (!existsSync(vite)) return false;
+  const built = spawnSync(process.execPath, [vite, "build"], {
+    cwd: resolve(import.meta.dir, "ui"),
+    encoding: "utf-8",
+  });
+  return built.status === 0 && isBuilt();
+}
+function unbuiltPage(): Response {
+  return new Response(
+    `<!doctype html><meta charset="utf-8"><title>PAL control room</title>` +
+      `<body style="font:14px system-ui;padding:3rem;max-width:34rem">` +
+      `<h1>The page has not been built</h1>` +
+      `<p>The control room's assets are a build artifact rather than source. Run:</p>` +
+      `<pre style="background:#eee;padding:1rem">${BUILD_COMMAND}</pre></body>`,
+    { status: 503, headers: { "content-type": "text/html; charset=utf-8" } }
+  );
+}
+export function indexHtml(): Response {
+  if (!isBuilt()) return unbuiltPage();
+  return new Response(Bun.file(resolve(UI_DIST, "index.html")), {
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}
+/**
+ * Only what the build emitted, resolved inside dist — a request that climbs out
+ * of it with `..` is a miss, not a file read.
+ */
+export function staticAsset(pathname: string): Response | null {
+  const target = resolve(UI_DIST, `.${pathname}`);
+  if (!isInsideDist(target)) return null;
+  return existsSync(target) ? new Response(Bun.file(target)) : null;
+}
+/** Compared as paths, not strings — a separator differs by platform. */
+function isInsideDist(target: string): boolean {
+  const rel = relative(UI_DIST, target);
+  return rel !== "" && !rel.startsWith("..") && !isAbsolute(rel);
+}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 };