@anchrd/intel-ui 0.8.7 → 0.9.0

package/src/archive/archive.tsx

@@ -0,0 +1,154 @@
+import type { Flow, Node } from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ArchiveRestore } from "lucide-react";
+import { kindIcons } from "@/kind-icon.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// One archived thing, whichever side of the tree it came from. The two records stay apart
+// everywhere else (ADR-0004); here they are one list because "what did I throw away" is one
+// question, and an archive split in two would make somebody ask it twice.
+interface ArchivedEntry {
+  id: string;
+  title: string;
+  kind: Node["kind"] | "flow";
+  archivedAt: string;
+  updatedAt: string;
+  restore(): Promise<unknown>;
+}
+
+export function Archive() {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+
+  const archived = useQuery({
+    queryKey: ["archive"],
+    queryFn: async (): Promise<ArchivedEntry[]> => {
+      const [nodes, flows] = await Promise.all([
+        data.listNodes({ archivedOnly: true }),
+        data.listFlows({ archivedOnly: true }),
+      ]);
+      const entries: ArchivedEntry[] = [
+        ...nodes.items.flatMap((node) =>
+          node.archivedAt
+            ? [
+                {
+                  id: node.id,
+                  title: node.title,
+                  kind: node.kind,
+                  archivedAt: node.archivedAt,
+                  updatedAt: node.updatedAt,
+                  restore: () =>
+                    data.archiveNode({
+                      nodeId: node.id,
+                      baseUpdatedAt: node.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                } satisfies ArchivedEntry,
+              ]
+            : [],
+        ),
+        ...flows.items.flatMap((flow: Flow) =>
+          flow.archivedAt
+            ? [
+                {
+                  id: flow.id,
+                  title: flow.title,
+                  kind: "flow" as const,
+                  archivedAt: flow.archivedAt,
+                  updatedAt: flow.updatedAt,
+                  restore: () =>
+                    data.archiveFlow({
+                      flowId: flow.id,
+                      baseUpdatedAt: flow.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                } satisfies ArchivedEntry,
+              ]
+            : [],
+        ),
+      ];
+      // Newest first, across both kinds: the thing somebody is looking for is almost always the
+      // thing they just archived.
+      return entries.sort((a, b) => b.archivedAt.localeCompare(a.archivedAt));
+    },
+  });
+
+  // ⚠️ `baseUpdatedAt` from the row that is on screen, exactly as archiving used it. Restoring is
+  // a change like any other and takes the same conflict route — without it, two people tidying up
+  // at once would silently overwrite each other.
+  const restore = useMutation({
+    mutationFn: async (entry: ArchivedEntry) => await entry.restore(),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["archive"] }),
+        // The tree gets it back, so every level has to be asked again — the entry may sit
+        // anywhere, and the archive does not know where.
+        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="border-b px-6 py-4">
+        <h1 className="text-lg font-medium text-foreground">{i18n.t("archive.title")}</h1>
+        <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+          {i18n.t("archive.description")}
+        </p>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
+        {archived.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("archive.failed")}
+          </p>
+        ) : null}
+        {restore.isError ? (
+          <p role="alert" className="mb-4 text-sm text-destructive">
+            {i18n.t("archive.restoreFailed")}
+          </p>
+        ) : null}
+        {archived.data?.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{i18n.t("archive.empty")}</p>
+        ) : null}
+        <ul className="grid gap-1">
+          {(archived.data ?? []).map((entry) => (
+            <li
+              key={`${entry.kind}-${entry.id}`}
+              className="flex items-center gap-3 rounded-md border px-3 py-2"
+            >
+              {(() => {
+                // The same map the tree and the folder table draw from — a second one here would
+                // drift the first time a kind is added.
+                const Icon = kindIcons[entry.kind];
+                return (
+                  <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+                );
+              })()}
+              <span className="sr-only">{i18n.t(`node.kind.${entry.kind}`)}</span>
+              <span className="grid min-w-0 flex-1 leading-tight">
+                <span className="truncate text-sm font-medium">{entry.title}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {i18n.t("archive.archivedAt", { when: entry.archivedAt.slice(0, 10) })}
+                </span>
+              </span>
+              <button
+                type="button"
+                disabled={restore.isPending}
+                onClick={() => restore.mutate(entry)}
+                aria-label={i18n.t("archive.restore", { title: entry.title })}
+                className="inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+              >
+                <ArchiveRestore aria-hidden="true" className="size-4" />
+                {i18n.t("archive.restoreAction")}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/components/ui/select.tsx

@@ -0,0 +1,163 @@
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: "sm" | "default" }) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        {/* ⚠️ The chevron is not decoration: it is what tells a reader this is something to open
+            rather than a word beside a label. #143 asks for it explicitly on the role tags. */}
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/data/agent-runtime/agent-runtime.ts

@@ -0,0 +1,93 @@
+import { z } from "zod";
+
+/**
+ * What the agent runtime answers, read back defensively.
+ *
+ * ⚠️ These shapes are NOT in `@anchrd/intel-contract`, and that is deliberate rather than an
+ * oversight: the runtime (`packages/agent`) imports nothing from the contract either, so a run
+ * record has no shared declaration anywhere. It crosses a network boundary into this package, so it
+ * is parsed here — tolerantly, in the same spirit the runtime reads a definition, because a field
+ * the runtime adds must not blank the log screen.
+ */
+export const AgentRunTarget = z.object({
+  kind: z.enum(["chat", "document", "flow", "mail", "task"]),
+  id: z.string().nullable(),
+});
+export type AgentRunTarget = z.infer<typeof AgentRunTarget>;
+
+export const AgentRun = z.object({
+  id: z.string(),
+  trigger: z.enum(["chat", "schedule", "mail", "task", "manual"]),
+  target: AgentRunTarget,
+  status: z.enum(["running", "completed", "failed"]),
+  startedAt: z.string(),
+  finishedAt: z.string().nullable(),
+  steps: z.number(),
+  error: z.string().nullable(),
+});
+export type AgentRun = z.infer<typeof AgentRun>;
+
+/** Whether the agent is switched off. Runtime state, never part of the definition (#179). */
+export const AgentState = z.object({
+  paused: z.boolean(),
+  pausedAt: z.string().nullable(),
+  alarmAt: z.number().nullable(),
+});
+export type AgentState = z.infer<typeof AgentState>;
+
+/** What "run now" answers: the run exists, and it is on its way. */
+export const AgentManualRun = z.object({
+  runId: z.string(),
+  status: z.string(),
+});
+export type AgentManualRun = z.infer<typeof AgentManualRun>;
+
+export const AgentLogEntry = z.object({
+  id: z.string(),
+  runId: z.string(),
+  at: z.string(),
+  level: z.enum(["info", "warn", "error"]),
+  event: z.string(),
+  detail: z.string(),
+});
+export type AgentLogEntry = z.infer<typeof AgentLogEntry>;
+
+export const AgentRunList = z.object({ items: z.array(AgentRun) });
+export type AgentRunList = z.infer<typeof AgentRunList>;
+
+export const AgentRunDetail = z.object({ run: AgentRun, log: z.array(AgentLogEntry) });
+export type AgentRunDetail = z.infer<typeof AgentRunDetail>;
+
+/**
+ * The runtime's own address, for the one thing that is dialled from outside this page.
+ *
+ * ⚠️ Only the agent's MCP endpoint is reached here, and only as a string somebody copies. A portal
+ * or another agent dials it directly with its own credential (ADR-0005 §7), so it has to be the
+ * runtime's real hostname — a deployment that puts the runtime somewhere else sets
+ * `VITE_AGENT_RUNTIME_URL` at build time. Empty means "the origin this page came from".
+ *
+ * ⚠️ NOT the browser's path any more (#178). Everything this page fetches goes through intel, which
+ * proxies it to the runtime over a service binding; see `agentRuntimePath` below.
+ */
+export function agentRuntimeBaseUrl(): string {
+  return (import.meta.env.VITE_AGENT_RUNTIME_URL ?? "").replace(/\/$/, "");
+}
+
+export function agentMcpAddress(agentId: string): string {
+  return `${agentRuntimeBaseUrl()}/agents/${encodeURIComponent(agentId)}/mcp`;
+}
+
+/**
+ * Where the browser asks, which is intel and nothing else.
+ *
+ * ⚠️ One door, one origin, one credential: the page carries its intel session cookie, intel opens
+ * it, and intel forwards the call to the runtime with the Gate token of the person who asked. That
+ * is why there is no CORS here, no second hostname to configure, and above all no Gate token in
+ * browser JavaScript — the runtime still demands `agents/run`, it just hears it from intel.
+ *
+ * The path is relative on purpose. It is joined to intel's `/api/v1` by the data provider, which is
+ * the only module that knows where intel is.
+ */
+export function agentRuntimePath(agentId: string, route: string): string {
+  return `/agents/${encodeURIComponent(agentId)}${route}`;
+}