portable-agent-layer 0.71.0 → 0.73.0

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

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

@@ -0,0 +1,60 @@
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+/**
+ * Rows scroll under a header that stays. That needs `border-separate`, because a
+ * collapsed border belongs to the table rather than the cell and does not travel
+ * with a sticky one — so the header rule is drawn as a shadow instead.
+ */
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <table
+      data-slot="table"
+      className={cn("w-full border-separate border-spacing-0 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn(className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn(className)} {...props} />;
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn("transition-colors hover:bg-neutral-200/50", className)}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "eyebrow sticky top-0 z-10 bg-bg px-3 py-2 shadow-[0_1px_0_var(--color-divider)]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("border-b border-divider/60 px-3 py-2 align-top", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };

package/src/tools/control-room/ui/components/toggle-group.tsx

@@ -0,0 +1,38 @@
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+/** Industry's segmented control: one hairline box, hairline rules between options. */
+function ToggleGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      className={cn(
+        "flex items-stretch border border-divider text-[11px] leading-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={cn(
+        "cursor-pointer border-l border-divider bg-transparent px-3 py-2 text-ink transition-colors first:border-l-0 hover:bg-neutral-200 data-[state=on]:bg-accent data-[state=on]:text-bg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };