@anchrd/intel-ui 0.3.0 → 0.5.0

package/src/tools/tools.tsx

@@ -1,192 +1,209 @@
 import type { ToolCapability } from "@anchrd/intel-contract";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { AlertTriangle, LogIn, Play, ShieldAlert, Wrench } from "lucide-react";
-import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useRouterState } from "@tanstack/react-router";
+import { AlertTriangle, ChevronRight, LogIn, PlugZap, Wrench } from "lucide-react";
+import type * as React from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import type { I18n } from "@/i18n/i18n.types.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
 
+// The portal namespaces every tool as `<server>__<tool>`, and that prefix is the whole of what
+// Intel ever learns about a tool's origin: the portal resolves the real server and holds its
+// credentials (ADR-0003). A name without a namespace has no origin beyond the portal itself.
+const NamespaceSeparator = "__";
+
+function toolOrigin(name: string): string | null {
+  const boundary = name.indexOf(NamespaceSeparator);
+  return boundary > 0 ? name.slice(0, boundary) : null;
+}
+
+// The catalog is one live `tools/list` with the signed-in user's own portal token. Nothing here is
+// stored, mirrored or administered — the screen shows what the portal answers and nothing else.
 export function Tools() {
   const { data, i18n } = useIntelRouterContext();
   const catalog = useQuery({ queryKey: ["tools"], queryFn: () => data.listTools() });
-  const [selected, setSelected] = useState<ToolCapability | null>(null);
-  const connectError =
-    typeof window === "undefined"
-      ? null
-      : new URLSearchParams(window.location.search).get("connectError");
+  // A hit from the header search arrives as `?select=<tool name>`, and the row it names opens with
+  // the list. Nothing else about the row changes: it is still only a disclosure.
+  const requested = useRouterState({ select: (state) => selectedFrom(state.location.search) });
+  // The portal connect flow returns here with a marker when it refuses. Only its presence is used:
+  // the value is attacker-controlled and could carry provider detail, so it is never rendered.
+  const connectFailed =
+    typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).has("connectError");
 
   return (
-    <div className="min-h-screen">
-      <header className="flex items-center justify-between gap-6 border-b px-8 py-5">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">{i18n.t("tools.title")}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{i18n.t("tools.description")}</p>
-        </div>
-        {catalog.data?.portalConnected && (
+    <div className="min-h-full p-8">
+      {catalog.data?.portalConnected ? (
+        <ActionSlot>
           <a
             href={data.portalConnectUrl("/tools")}
-            className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            className={buttonVariants({ variant: "outline", size: "sm" })}
           >
-            <LogIn aria-hidden="true" className="size-4" />
+            <LogIn aria-hidden="true" />
             {i18n.t("tools.reconnect")}
           </a>
+        </ActionSlot>
+      ) : null}
+
+      <div className="mx-auto w-full max-w-4xl space-y-5">
+        {connectFailed && (
+          <p
+            role="alert"
+            className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
+          >
+            {i18n.t("tools.connectFailed")}
+          </p>
         )}
-      </header>
 
-      <div className="grid gap-5 p-8 xl:grid-cols-[minmax(0,1fr)_24rem]">
-        <div className="space-y-5">
-          {connectError && (
-            <p
-              role="alert"
-              className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
-            >
-              {i18n.t("tools.connectFailed")}
-            </p>
-          )}
-          {catalog.isPending ? (
-            <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-          ) : catalog.isError ? (
-            <p role="alert" className="text-sm text-destructive">
-              {i18n.t("tools.operationFailed")}
-            </p>
-          ) : !catalog.data?.portalConnected ? (
-            <section className="rounded-xl border border-dashed bg-card p-12 text-center">
-              <Wrench aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />
-              <h2 className="mt-4 font-semibold">{i18n.t("tools.disconnected")}</h2>
-              <p className="mx-auto mt-2 max-w-lg text-sm text-muted-foreground">
-                {i18n.t("tools.disconnectedHelp")}
-              </p>
-              <a
-                href={data.portalConnectUrl("/tools")}
-                className="mt-5 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <LogIn aria-hidden="true" className="size-4" />
-                {i18n.t("tools.connect")}
-              </a>
-            </section>
-          ) : catalog.data.items.length === 0 ? (
-            <section className="rounded-xl border border-dashed bg-card p-12 text-center">
-              <Wrench aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />
-              <h2 className="mt-4 font-semibold">{i18n.t("tools.empty")}</h2>
-              <p className="mx-auto mt-2 max-w-lg text-sm text-muted-foreground">
-                {i18n.t("tools.emptyHelp")}
-              </p>
-            </section>
-          ) : (
+        {catalog.isPending ? (
+          <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+        ) : catalog.isError ? (
+          // Unreachable is not empty: the portal did not answer, so Intel knows nothing about this
+          // user's tools rather than knowing there are none.
+          <Notice
+            alert
+            icon={<PlugZap aria-hidden="true" className="mx-auto size-8 text-destructive" />}
+            title={i18n.t("tools.unreachable")}
+            help={i18n.t("tools.unreachableHelp")}
+          >
+            <Button variant="outline" onClick={() => void catalog.refetch()}>
+              {i18n.t("common.retry")}
+            </Button>
+          </Notice>
+        ) : !catalog.data.portalConnected ? (
+          <Notice
+            icon={<PlugZap aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}
+            title={i18n.t("tools.disconnected")}
+            help={i18n.t("tools.disconnectedHelp")}
+          >
+            <a href={data.portalConnectUrl("/tools")} className={buttonVariants()}>
+              <LogIn aria-hidden="true" />
+              {i18n.t("tools.connect")}
+            </a>
+          </Notice>
+        ) : catalog.data.items.length === 0 ? (
+          <Notice
+            icon={<Wrench aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}
+            title={i18n.t("tools.empty")}
+            help={i18n.t("tools.emptyHelp")}
+          />
+        ) : (
+          <>
             <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
               <ul className="divide-y">
                 {catalog.data.items.map((capability) => (
                   <li key={capability.name}>
-                    <button
-                      type="button"
-                      onClick={() => setSelected(capability)}
-                      className="flex w-full items-start justify-between gap-5 px-5 py-4 text-left outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-                    >
-                      <span className="min-w-0">
-                        <span className="block text-sm font-medium">
-                          {capability.title ?? capability.name}
-                        </span>
-                        <span className="mt-1 block truncate font-mono text-xs text-muted-foreground">
-                          {capability.name}
-                        </span>
-                        {capability.description && (
-                          <span className="mt-2 line-clamp-2 block text-xs text-muted-foreground">
-                            {capability.description}
-                          </span>
-                        )}
-                      </span>
-                      {capability.annotations.destructiveHint && (
-                        <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-destructive/10 px-2 py-1 text-xs text-destructive">
-                          <AlertTriangle aria-hidden="true" className="size-3.5" />
-                          {i18n.t("tools.destructiveShort")}
-                        </span>
-                      )}
-                    </button>
+                    <ToolEntry
+                      capability={capability}
+                      i18n={i18n}
+                      open={capability.name === requested}
+                    />
                   </li>
                 ))}
               </ul>
             </section>
-          )}
-        </div>
-        <ToolTester capability={selected} />
+            <p className="text-xs text-muted-foreground">{i18n.t("tools.liveNote")}</p>
+          </>
+        )}
       </div>
     </div>
   );
 }
 
-function ToolTester({ capability }: { capability: ToolCapability | null }) {
-  const { data, i18n } = useIntelRouterContext();
-  const [argumentsText, setArgumentsText] = useState("{}");
-  const [parseError, setParseError] = useState(false);
-  const safeToTest =
-    capability?.annotations.readOnlyHint === true &&
-    capability.annotations.destructiveHint !== true;
-  const test = useMutation({
-    mutationFn: async () => {
-      const parsed: unknown = JSON.parse(argumentsText);
-      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-        throw new SyntaxError("Arguments must be a JSON object");
-      }
-      return await data.testTool({
-        name: capability?.name ?? "",
-        arguments: parsed as Record<string, unknown>,
-      });
-    },
-    onMutate: () => setParseError(false),
-    onError: (error) => setParseError(error instanceof SyntaxError),
-  });
+function Notice({
+  icon,
+  title,
+  help,
+  alert,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  help: string;
+  alert?: boolean;
+  children?: React.ReactNode;
+}) {
+  return (
+    <section
+      {...(alert ? { role: "alert" } : {})}
+      className="rounded-xl border border-dashed bg-card p-12 text-center"
+    >
+      {icon}
+      <h2 className="mt-4 font-semibold">{title}</h2>
+      <p className="mx-auto mt-2 max-w-lg text-sm text-muted-foreground">{help}</p>
+      {children ? <div className="mt-5">{children}</div> : null}
+    </section>
+  );
+}
+
+// One tool, one disclosure. The row is the only control in the list: it opens the schema and does
+// nothing else — enabling, sharing or permitting a tool happens in the portal, never here.
+function ToolEntry({
+  capability,
+  i18n,
+  open,
+}: {
+  capability: ToolCapability;
+  i18n: I18n;
+  open: boolean;
+}) {
+  const origin = toolOrigin(capability.name);
 
   return (
-    <aside className="sticky top-5 h-fit rounded-xl border bg-card p-5 shadow-sm">
-      <h2 className="font-semibold">{i18n.t("tools.testTitle")}</h2>
-      {!capability ? (
-        <p className="mt-3 text-sm text-muted-foreground">{i18n.t("tools.select")}</p>
-      ) : (
-        <div className="mt-4 space-y-4">
-          <div>
-            <p className="text-sm font-medium">{capability.title ?? capability.name}</p>
-            <p className="mt-1 font-mono text-xs text-muted-foreground">{capability.name}</p>
-          </div>
-          {capability.annotations.destructiveHint && (
-            <p className="flex gap-2 rounded-md bg-destructive/10 p-3 text-xs text-destructive">
-              <AlertTriangle aria-hidden="true" className="size-4 shrink-0" />
-              {i18n.t("tools.destructive")}
-            </p>
-          )}
-          {!safeToTest && (
-            <p className="flex gap-2 rounded-md bg-muted p-3 text-xs text-muted-foreground">
-              <ShieldAlert aria-hidden="true" className="size-4 shrink-0" />
-              {i18n.t("tools.testUnsafe")}
-            </p>
-          )}
-          <label className="block text-xs font-medium">
-            {i18n.t("tools.arguments")}
-            <textarea
-              value={argumentsText}
-              onChange={(event) => setArgumentsText(event.target.value)}
-              rows={9}
-              spellCheck={false}
-              className="mt-2 w-full resize-y rounded-md border bg-background p-3 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            />
-          </label>
-          {parseError && <p className="text-xs text-destructive">{i18n.t("tools.invalidJson")}</p>}
-          <button
-            type="button"
-            disabled={test.isPending || !safeToTest}
-            onClick={() => test.mutate()}
-            className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-          >
-            <Play aria-hidden="true" className="size-4" />
-            {i18n.t("tools.runTest")}
-          </button>
-          {test.data && (
-            <pre className="max-h-80 overflow-auto rounded-md bg-muted p-3 text-xs">
-              {JSON.stringify(test.data, null, 2)}
-            </pre>
+    <Collapsible defaultOpen={open}>
+      <CollapsibleTrigger className="group flex w-full items-start gap-4 px-5 py-4 text-left outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
+        <ChevronRight
+          aria-hidden="true"
+          className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90"
+        />
+        <span className="min-w-0 flex-1">
+          <span className="flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium">{capability.title ?? capability.name}</span>
+            <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+              <span className="sr-only">{i18n.t("tools.origin")}: </span>
+              {origin ?? i18n.t("tools.originPortal")}
+            </span>
+            {capability.annotations.destructiveHint && (
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
+                <AlertTriangle aria-hidden="true" className="size-3.5" />
+                {i18n.t("tools.destructiveShort")}
+              </span>
+            )}
+          </span>
+          {/* The namespaced name is what a flow references, so it stays readable — but only where
+              it is not already the heading of the row. */}
+          {capability.title && (
+            <span className="mt-1 block truncate font-mono text-xs text-muted-foreground">
+              {capability.name}
+            </span>
           )}
-          {test.isError && !parseError && (
-            <p className="text-xs text-destructive">{i18n.t("common.unavailable")}</p>
+          {capability.description && (
+            <span className="mt-2 block text-xs text-muted-foreground">
+              {capability.description}
+            </span>
           )}
-        </div>
-      )}
-    </aside>
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-3 px-5 pb-4 pl-13">
+        <Schema label={i18n.t("tools.inputSchema")} value={capability.inputSchema} />
+        {capability.outputSchema && (
+          <Schema label={i18n.t("tools.outputSchema")} value={capability.outputSchema} />
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function Schema({ label, value }: { label: string; value: Record<string, unknown> }) {
+  return (
+    <div>
+      <p className="text-xs font-medium">{label}</p>
+      <pre className="mt-1 max-h-80 overflow-auto rounded-md bg-muted p-3 text-xs">
+        {JSON.stringify(value, null, 2)}
+      </pre>
+    </div>
   );
 }