@anchrd/intel-ui 0.1.0

package/src/tools/tools.tsx

@@ -0,0 +1,346 @@
+import type { ToolCatalogEntry } from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  CircleOff,
+  KeyRound,
+  LogIn,
+  Play,
+  Plus,
+  RefreshCw,
+  ShieldAlert,
+  Wrench,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const statusIcon = {
+  connected: CheckCircle2,
+  missing: KeyRound,
+  forbidden: ShieldAlert,
+  invalid: CircleOff,
+} as const;
+
+export function Tools() {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const sources = useQuery({ queryKey: ["tool-sources"], queryFn: () => data.listToolSources() });
+  const catalog = useQuery({ queryKey: ["tools"], queryFn: () => data.listTools() });
+  const [registering, setRegistering] = useState(false);
+  const [selected, setSelected] = useState<ToolCatalogEntry | null>(null);
+  const connectError =
+    typeof window === "undefined"
+      ? null
+      : new URLSearchParams(window.location.search).get("connectError");
+  const grouped = useMemo(() => {
+    const entries = catalog.data?.items ?? [];
+    return (sources.data?.items ?? []).map((source) => ({
+      source,
+      entries: entries.filter((entry) => entry.source.id === source.id),
+    }));
+  }, [catalog.data, sources.data]);
+  const discover = useMutation({
+    mutationFn: (sourceId: string) =>
+      data.discoverToolSource({ sourceId, idempotencyKey: crypto.randomUUID() }),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["tool-sources"] }),
+        queryClient.invalidateQueries({ queryKey: ["tools"] }),
+      ]);
+    },
+  });
+
+  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>
+        <button
+          type="button"
+          onClick={() => setRegistering(true)}
+          className="inline-flex items-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"
+        >
+          <Plus aria-hidden="true" className="size-4" />
+          {i18n.t("tools.addSource")}
+        </button>
+      </header>
+
+      <div className="grid gap-5 p-8 xl:grid-cols-[minmax(0,1fr)_24rem]">
+        <div className="space-y-5">
+          {discover.isError && (
+            <p
+              role="alert"
+              className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
+            >
+              {i18n.t("tools.operationFailed")}
+            </p>
+          )}
+          {connectError && (
+            <p
+              role="alert"
+              className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
+            >
+              {i18n.t("tools.connectFailed")}
+            </p>
+          )}
+          {sources.isPending || catalog.isPending ? (
+            <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+          ) : grouped.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>
+          ) : (
+            grouped.map(({ source, entries }) => (
+              <section
+                key={source.id}
+                className="overflow-hidden rounded-xl border bg-card shadow-sm"
+              >
+                <div className="flex items-start justify-between gap-5 border-b bg-muted/20 px-5 py-4">
+                  <div className="min-w-0">
+                    <h2 className="font-semibold">{source.name}</h2>
+                    <p className="mt-1 truncate text-xs text-muted-foreground">{source.url}</p>
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      {i18n.t("tools.connectionHandle")}: {source.connectionHandle}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <a
+                      href={data.toolSourceConnectUrl(source.id, "/tools")}
+                      className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      <LogIn aria-hidden="true" className="size-3.5" />
+                      {i18n.t("tools.connect")}
+                    </a>
+                    <button
+                      type="button"
+                      disabled={discover.isPending && discover.variables === source.id}
+                      onClick={() => discover.mutate(source.id)}
+                      className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-xs font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+                    >
+                      <RefreshCw aria-hidden="true" className="size-3.5" />
+                      {i18n.t("tools.discover")}
+                    </button>
+                  </div>
+                </div>
+                {entries.length === 0 ? (
+                  <p className="p-5 text-sm text-muted-foreground">
+                    {i18n.t("tools.notDiscovered")}
+                  </p>
+                ) : (
+                  <ul className="divide-y">
+                    {entries.map((entry) => {
+                      const Status = statusIcon[entry.connectionStatus];
+                      return (
+                        <li key={entry.capability.name}>
+                          <button
+                            type="button"
+                            onClick={() => setSelected(entry)}
+                            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">
+                                {entry.capability.title ?? entry.capability.name}
+                              </span>
+                              <span className="mt-1 block truncate font-mono text-xs text-muted-foreground">
+                                {entry.capability.name}
+                              </span>
+                              {entry.capability.description && (
+                                <span className="mt-2 line-clamp-2 block text-xs text-muted-foreground">
+                                  {entry.capability.description}
+                                </span>
+                              )}
+                            </span>
+                            <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground">
+                              <Status aria-hidden="true" className="size-3.5" />
+                              {i18n.t(`tools.status.${entry.connectionStatus}`)}
+                            </span>
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </section>
+            ))
+          )}
+        </div>
+        <ToolTester entry={selected} />
+      </div>
+      {registering && <RegisterSource close={() => setRegistering(false)} />}
+    </div>
+  );
+}
+
+function ToolTester({ entry }: { entry: ToolCatalogEntry | null }) {
+  const { data, i18n } = useIntelRouterContext();
+  const [argumentsText, setArgumentsText] = useState("{}");
+  const [parseError, setParseError] = useState(false);
+  const safeToTest =
+    entry?.capability.annotations.readOnlyHint === true &&
+    entry.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 Error("object");
+      return await data.testTool({
+        sourceId: entry?.source.id ?? "",
+        name: entry?.capability.name ?? "",
+        arguments: parsed as Record<string, unknown>,
+      });
+    },
+    onMutate: () => setParseError(false),
+    onError: (error) => setParseError(error instanceof SyntaxError || error.message === "object"),
+  });
+
+  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>
+      {!entry ? (
+        <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">{entry.capability.title ?? entry.capability.name}</p>
+            <p className="mt-1 font-mono text-xs text-muted-foreground">{entry.capability.name}</p>
+          </div>
+          {entry.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>
+          )}
+          {entry.connectionStatus !== "connected" && (
+            <p className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
+              {i18n.t("tools.connectionRequired")}
+            </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 || entry.connectionStatus !== "connected" || !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>
+          )}
+          {test.isError && !parseError && (
+            <p className="text-xs text-destructive">{i18n.t("common.unavailable")}</p>
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}
+
+function RegisterSource({ close }: { close(): void }) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [connectionHandle, setConnectionHandle] = useState("intel-tools");
+  const create = useMutation({
+    mutationFn: () =>
+      data.createToolSource({
+        name,
+        url,
+        connectionHandle,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["tool-sources"] });
+      close();
+    },
+  });
+  return (
+    <Modal title={i18n.t("tools.addSource")} close={close} className="max-w-lg">
+      <form
+        className="space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (create.isPending) return;
+          create.mutate();
+        }}
+      >
+        <Field label={i18n.t("common.title")} value={name} setValue={setName} />
+        <Field label={i18n.t("tools.endpoint")} value={url} setValue={setUrl} type="url" />
+        <Field
+          label={i18n.t("tools.connectionHandle")}
+          value={connectionHandle}
+          setValue={setConnectionHandle}
+          pattern="[a-z0-9][a-z0-9-]{1,62}"
+        />
+        <p className="text-xs text-muted-foreground">{i18n.t("tools.sourceHelp")}</p>
+        {create.isError && (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("tools.operationFailed")}
+          </p>
+        )}
+        <button
+          type="submit"
+          disabled={create.isPending}
+          className="w-full 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 disabled:opacity-50"
+        >
+          {create.isPending ? i18n.t("common.saving") : i18n.t("common.create")}
+        </button>
+      </form>
+    </Modal>
+  );
+}
+
+function Field({
+  label,
+  value,
+  setValue,
+  type = "text",
+  pattern,
+}: {
+  label: string;
+  value: string;
+  setValue(value: string): void;
+  type?: string;
+  pattern?: string;
+}) {
+  return (
+    <label className="block text-sm font-medium">
+      {label}
+      <input
+        required
+        type={type}
+        pattern={pattern}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+    </label>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "paths": { "@/*": ["src/*"] },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { fileURLToPath } from "node:url";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) } },
+  server: {
+    proxy: {
+      "/api": { target: "http://localhost:8788", changeOrigin: true },
+      "/auth": { target: "http://localhost:8788", changeOrigin: true },
+      "/mcp": { target: "http://localhost:8788", changeOrigin: true },
+      "/.well-known": { target: "http://localhost:8788", changeOrigin: true },
+    },
+  },
+});