@anchrd/intel-ui 0.1.0

package/src/flows/flows.tsx

@@ -0,0 +1,921 @@
+import type { FlowGraph, FlowNode, ResourceRole } from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  Background,
+  type Connection,
+  Controls,
+  type Edge,
+  type EdgeChange,
+  Handle,
+  MiniMap,
+  type Node,
+  type NodeChange,
+  type NodeProps,
+  Position,
+  ReactFlow,
+} from "@xyflow/react";
+import {
+  Bot,
+  CheckCircle2,
+  CirclePlay,
+  FileSearch,
+  GitBranch,
+  Plus,
+  Save,
+  Send,
+  Share2,
+  ShieldCheck,
+  Sparkles,
+  Trash2,
+  Wrench,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { KnowledgeTreeNode } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+type CanvasNode = Node<{ node: FlowNode }, "intel">;
+type CanvasEdge = Edge;
+
+const nodeIcon = {
+  trigger: CirclePlay,
+  instruction: Sparkles,
+  knowledge: FileSearch,
+  tool: Wrench,
+  condition: GitBranch,
+  approval: ShieldCheck,
+  output: CheckCircle2,
+} as const;
+
+function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
+  const contract = data.node;
+  const Icon = nodeIcon[contract.kind];
+  const branching = contract.kind === "condition" || contract.kind === "approval";
+  return (
+    <div
+      className={`min-w-48 rounded-xl border bg-card p-3 text-card-foreground shadow-sm ${selected ? "ring-2 ring-ring" : ""}`}
+    >
+      {contract.kind !== "trigger" && <Handle type="target" position={Position.Left} />}
+      <div className="flex items-center gap-2">
+        <span className="grid size-8 place-items-center rounded-lg bg-primary/10 text-primary">
+          <Icon aria-hidden="true" className="size-4" />
+        </span>
+        <span className="min-w-0">
+          <span className="block truncate text-sm font-medium">{contract.label}</span>
+          <span className="block text-xs capitalize text-muted-foreground">{contract.kind}</span>
+        </span>
+      </div>
+      {contract.description && (
+        <p className="mt-2 line-clamp-2 text-xs text-muted-foreground">{contract.description}</p>
+      )}
+      {contract.kind !== "output" && !branching && (
+        <Handle type="source" position={Position.Right} />
+      )}
+      {branching && (
+        <>
+          <Handle
+            id={contract.kind === "approval" ? "approved" : "yes"}
+            type="source"
+            position={Position.Right}
+            style={{ top: "35%" }}
+          />
+          <Handle
+            id={contract.kind === "approval" ? "rejected" : "no"}
+            type="source"
+            position={Position.Right}
+            style={{ top: "70%" }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+const nodeTypes = { intel: FlowCard };
+
+function defaultGraph(): FlowGraph {
+  return {
+    nodes: [
+      {
+        id: "trigger",
+        kind: "trigger",
+        label: "Manual start",
+        description: null,
+        position: { x: 80, y: 180 },
+        configuration: { mode: "manual" },
+      },
+      {
+        id: "output",
+        kind: "output",
+        label: "Result",
+        description: null,
+        position: { x: 520, y: 180 },
+        configuration: { template: "" },
+      },
+    ],
+    edges: [
+      {
+        id: "trigger-output",
+        source: "trigger",
+        target: "output",
+        label: null,
+        sourceHandle: null,
+      },
+    ],
+  };
+}
+
+function canvas(graph: FlowGraph) {
+  return {
+    nodes: graph.nodes.map((node) => ({
+      id: node.id,
+      type: "intel" as const,
+      position: node.position,
+      data: { node },
+    })),
+    edges: graph.edges.map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle,
+      label: edge.label ?? undefined,
+    })),
+  };
+}
+
+function graph(nodes: CanvasNode[], edges: CanvasEdge[]): FlowGraph {
+  return {
+    nodes: nodes.map((node) => ({
+      ...node.data.node,
+      position: node.position,
+    })),
+    edges: edges.map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      label: typeof edge.label === "string" && edge.label ? edge.label : null,
+      sourceHandle: edge.sourceHandle ?? null,
+    })),
+  };
+}
+
+function newNode(
+  kind: Exclude<FlowNode["kind"], "trigger">,
+  index: number,
+  firstKnowledgeId?: string,
+): FlowNode {
+  const common = {
+    id: `${kind}-${crypto.randomUUID()}`,
+    label: kind[0]?.toUpperCase() + kind.slice(1),
+    description: null,
+    position: {
+      x: 260 + (index % 3) * 240,
+      y: 80 + Math.floor(index / 3) * 180,
+    },
+  };
+  switch (kind) {
+    case "instruction":
+      return {
+        ...common,
+        kind,
+        configuration: { prompt: "Describe what the AI should do." },
+      };
+    case "knowledge":
+      return {
+        ...common,
+        kind,
+        configuration: {
+          resourceIds: firstKnowledgeId ? [firstKnowledgeId] : [],
+          mode: "relevant",
+          query: null,
+        },
+      };
+    case "tool":
+      return {
+        ...common,
+        kind,
+        configuration: {
+          sourceId: "select-a-source",
+          toolName: "select-a-tool",
+          fingerprint: null,
+          arguments: {},
+        },
+      };
+    case "condition":
+      return {
+        ...common,
+        kind,
+        configuration: {
+          mode: "semantic",
+          instruction: "Describe how to choose yes or no.",
+        },
+      };
+    case "approval":
+      return {
+        ...common,
+        kind,
+        configuration: {
+          prompt: "Describe what must be approved.",
+          timeout: "7 days",
+        },
+      };
+    case "output":
+      return { ...common, kind, configuration: { template: "" } };
+  }
+}
+
+export function Flows() {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const flows = useQuery({
+    queryKey: ["flows"],
+    queryFn: () => data.listFlows(),
+  });
+  const tools = useQuery({
+    queryKey: ["tools"],
+    queryFn: () => data.listTools(),
+  });
+  const knowledge = useQuery({
+    queryKey: ["knowledge-tree"],
+    queryFn: () => data.loadKnowledgeTree(),
+  });
+  const [selectedFlowId, setSelectedFlowId] = useState<string | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const document = useQuery({
+    queryKey: ["flow", selectedFlowId],
+    queryFn: () => data.getFlow(selectedFlowId ?? ""),
+    enabled: Boolean(selectedFlowId),
+  });
+  const initial = useMemo(() => canvas(defaultGraph()), []);
+  const [nodes, setNodes] = useState<CanvasNode[]>(initial.nodes);
+  const [edges, setEdges] = useState<CanvasEdge[]>(initial.edges);
+  // The canvas stays visible during a background refetch; only a mutation needs the stricter
+  // guarantee that the loaded document is both the selected flow and settled.
+  const documentReady = selectedFlowId !== null && document.data?.flow.id === selectedFlowId;
+  const canMutate = documentReady && !document.isFetching;
+  useEffect(() => {
+    if (!document.data || document.data.flow.id !== selectedFlowId) return;
+    const next = canvas(document.data.version?.graph ?? defaultGraph());
+    setNodes(next.nodes);
+    setEdges(next.edges);
+    setSelectedNodeId(null);
+  }, [document.data, selectedFlowId]);
+  const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
+
+  const save = useMutation({
+    mutationFn: () =>
+      data.saveFlow({
+        flowId: selectedFlowId ?? "",
+        baseVersionId: document.data?.flow.currentVersionId ?? null,
+        graph: graph(nodes, edges),
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async (saved) => {
+      queryClient.setQueryData(["flow", saved.flow.id], saved);
+      await queryClient.invalidateQueries({ queryKey: ["flows"] });
+    },
+  });
+  const publish = useMutation({
+    mutationFn: () =>
+      data.publishFlow({
+        flowId: selectedFlowId ?? "",
+        versionId: document.data?.flow.currentVersionId ?? "",
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+        queryClient.invalidateQueries({ queryKey: ["flow", selectedFlowId] }),
+      ]);
+    },
+  });
+  const run = useMutation({
+    mutationFn: () =>
+      data.startFlow({
+        flowId: selectedFlowId ?? "",
+        input: {},
+        idempotencyKey: crypto.randomUUID(),
+      }),
+  });
+
+  function updateNode(update: (node: FlowNode) => FlowNode) {
+    setNodes((current) =>
+      current.map((node) =>
+        node.id === selectedNodeId ? { ...node, data: { node: update(node.data.node) } } : node,
+      ),
+    );
+  }
+
+  return (
+    <div className="flex h-screen min-h-0 flex-col">
+      <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("flows.title")}</h1>
+          <p className="mt-1 text-sm text-muted-foreground">{i18n.t("flows.description")}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {selectedFlowId && (
+            <>
+              <button
+                type="button"
+                onClick={() => setSharing(true)}
+                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"
+              >
+                <Share2 aria-hidden="true" className="size-4" /> {i18n.t("flows.share")}
+              </button>
+              <button
+                type="button"
+                onClick={() => save.mutate()}
+                disabled={!canMutate || save.isPending}
+                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 disabled:opacity-50"
+              >
+                <Save aria-hidden="true" className="size-4" /> {i18n.t("common.save")}
+              </button>
+              <button
+                type="button"
+                onClick={() => publish.mutate()}
+                disabled={!canMutate || !document.data?.flow.currentVersionId || publish.isPending}
+                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 disabled:opacity-50"
+              >
+                <Send aria-hidden="true" className="size-4" /> {i18n.t("flows.publish")}
+              </button>
+              <button
+                type="button"
+                onClick={() => run.mutate()}
+                disabled={!canMutate || !document.data?.flow.publishedVersionId || run.isPending}
+                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 disabled:opacity-50"
+              >
+                <Bot aria-hidden="true" className="size-4" /> {i18n.t("flows.run")}
+              </button>
+            </>
+          )}
+          <button
+            type="button"
+            onClick={() => setCreating(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("flows.new")}
+          </button>
+        </div>
+      </header>
+      <div className="flex min-h-0 flex-1">
+        <aside className="w-64 shrink-0 overflow-y-auto border-r bg-muted/20 p-3">
+          {flows.data?.items.map((flow) => (
+            <button
+              key={flow.id}
+              type="button"
+              onClick={() => setSelectedFlowId(flow.id)}
+              className={`mb-1 w-full rounded-md p-3 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring ${selectedFlowId === flow.id ? "bg-accent text-accent-foreground" : ""}`}
+            >
+              <span className="block truncate text-sm font-medium">{flow.title}</span>
+              <span className="mt-1 block text-xs text-muted-foreground">
+                {flow.publishedVersionId ? i18n.t("flows.published") : i18n.t("flows.draft")}
+              </span>
+            </button>
+          ))}
+          {flows.data?.items.length === 0 && (
+            <p className="p-3 text-sm text-muted-foreground">{i18n.t("flows.empty")}</p>
+          )}
+        </aside>
+        {!selectedFlowId ? (
+          <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+            {i18n.t("flows.select")}
+          </div>
+        ) : !documentReady ? (
+          <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+            {i18n.t("common.loading")}
+          </div>
+        ) : (
+          <>
+            <section className="relative min-w-0 flex-1">
+              <div className="absolute left-4 top-4 z-10 flex max-w-[calc(100%-2rem)] flex-wrap gap-1 rounded-lg border bg-card/95 p-2 shadow-sm backdrop-blur">
+                {(
+                  ["instruction", "knowledge", "tool", "condition", "approval", "output"] as const
+                ).map((kind) => {
+                  const Icon = nodeIcon[kind];
+                  return (
+                    <button
+                      key={kind}
+                      type="button"
+                      onClick={() => {
+                        const item = newNode(kind, nodes.length, knowledge.data?.[0]?.id);
+                        setNodes((current) => [
+                          ...current,
+                          {
+                            id: item.id,
+                            type: "intel",
+                            position: item.position,
+                            data: { node: item },
+                          },
+                        ]);
+                      }}
+                      className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      <Icon aria-hidden="true" className="size-3.5" />
+                      {i18n.t(`flows.node.${kind}`)}
+                    </button>
+                  );
+                })}
+              </div>
+              <ReactFlow<CanvasNode, CanvasEdge>
+                nodes={nodes}
+                edges={edges}
+                nodeTypes={nodeTypes}
+                fitView
+                onNodesChange={(changes: NodeChange<CanvasNode>[]) =>
+                  setNodes((current) => applyNodeChanges(changes, current))
+                }
+                onEdgesChange={(changes: EdgeChange<CanvasEdge>[]) =>
+                  setEdges((current) => applyEdgeChanges(changes, current))
+                }
+                onConnect={(connection: Connection) =>
+                  setEdges((current) =>
+                    addEdge({ ...connection, id: crypto.randomUUID() }, current),
+                  )
+                }
+                onNodeClick={(_event, node) => setSelectedNodeId(node.id)}
+                onPaneClick={() => setSelectedNodeId(null)}
+              >
+                <Background />
+                <MiniMap pannable zoomable />
+                <Controls />
+              </ReactFlow>
+            </section>
+            <NodeInspector
+              node={selectedNode}
+              update={updateNode}
+              tools={tools.data?.items ?? []}
+              knowledge={knowledge.data ?? []}
+            />
+          </>
+        )}
+      </div>
+      {run.data && (
+        <div className="fixed bottom-5 right-5 z-20 max-w-sm rounded-xl border bg-card p-4 text-sm shadow-xl">
+          <p className="font-medium">{i18n.t("flows.runStarted")}</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {run.data.node?.label ?? run.data.run.status} · {run.data.run.id}
+          </p>
+        </div>
+      )}
+      {(save.isError || publish.isError || run.isError) && (
+        <p
+          role="alert"
+          className="fixed bottom-5 left-[18rem] z-20 rounded-lg border border-destructive/30 bg-card px-4 py-3 text-sm text-destructive shadow-xl"
+        >
+          {i18n.t("flows.operationFailed")}
+        </p>
+      )}
+      {creating && <CreateFlow close={() => setCreating(false)} select={setSelectedFlowId} />}
+      {sharing && selectedFlowId && (
+        <ShareFlow flowId={selectedFlowId} close={() => setSharing(false)} />
+      )}
+    </div>
+  );
+}
+
+function ShareFlow({ flowId, close }: { flowId: string; close(): void }) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<ResourceRole>("viewer");
+  const grants = useQuery({
+    queryKey: ["flow-grants", flowId],
+    queryFn: () => data.listFlowGrants(flowId),
+  });
+  const share = useMutation({
+    mutationFn: () =>
+      data.shareFlow({
+        resourceId: flowId,
+        principal: { type: "email", email },
+        role,
+        expiresAt: null,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async () => {
+      setEmail("");
+      await queryClient.invalidateQueries({
+        queryKey: ["flow-grants", flowId],
+      });
+    },
+  });
+  const revoke = useMutation({
+    mutationFn: (grantId: string) =>
+      data.revokeFlowGrant({
+        resourceId: flowId,
+        grantId,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["flow-grants", flowId],
+      });
+    },
+  });
+
+  return (
+    <Modal title={i18n.t("flows.share")} close={close}>
+      {(share.isError || revoke.isError) && (
+        <p role="alert" className="mb-4 text-sm text-destructive">
+          {i18n.t("flows.shareFailed")}
+        </p>
+      )}
+      <ul className="mb-5 max-h-44 space-y-2 overflow-y-auto">
+        {grants.data?.items.map((grant) => (
+          <li
+            key={grant.id}
+            className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
+          >
+            <span className="min-w-0 truncate">
+              {grant.principal.type === "email"
+                ? grant.principal.email
+                : grant.principal.type === "user"
+                  ? grant.principal.id
+                  : i18n.t("flows.organization")}
+              <span className="ml-2 text-xs text-muted-foreground">{grant.role}</span>
+            </span>
+            <button
+              type="button"
+              onClick={() => revoke.mutate(grant.id)}
+              aria-label={i18n.t("flows.revokeShare")}
+              className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <Trash2 aria-hidden="true" className="size-4" />
+            </button>
+          </li>
+        ))}
+      </ul>
+      <form
+        className="space-y-4 border-t pt-5"
+        onSubmit={(event) => {
+          event.preventDefault();
+          share.mutate();
+        }}
+      >
+        <label className="block text-sm font-medium">
+          {i18n.t("knowledge.email")}
+          <input
+            type="email"
+            required
+            value={email}
+            onChange={(event) => setEmail(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>
+        <label className="block text-sm font-medium">
+          {i18n.t("knowledge.role")}
+          <select
+            value={role}
+            onChange={(event) => setRole(event.target.value as ResourceRole)}
+            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <option value="viewer">{i18n.t("knowledge.viewer")}</option>
+            <option value="editor">{i18n.t("knowledge.editor")}</option>
+            <option value="manager">{i18n.t("knowledge.manager")}</option>
+          </select>
+        </label>
+        <button
+          type="submit"
+          disabled={share.isPending}
+          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+        >
+          {i18n.t("knowledge.shareAction")}
+        </button>
+      </form>
+    </Modal>
+  );
+}
+
+function NodeInspector({
+  node,
+  update,
+  tools,
+  knowledge,
+}: {
+  node: CanvasNode | null;
+  update(fn: (node: FlowNode) => FlowNode): void;
+  tools: Array<{
+    source: { id: string; name: string };
+    capability: { name: string; title: string | null; fingerprint: string };
+  }>;
+  knowledge: KnowledgeTreeNode[];
+}) {
+  const { i18n } = useIntelRouterContext();
+  if (!node)
+    return (
+      <aside className="w-80 shrink-0 border-l bg-card p-5 text-sm text-muted-foreground">
+        {i18n.t("flows.inspect")}
+      </aside>
+    );
+  const contract = node.data.node;
+  return (
+    <aside className="w-80 shrink-0 overflow-y-auto border-l bg-card p-5">
+      <h2 className="font-semibold">{i18n.t(`flows.node.${contract.kind}`)}</h2>
+      <Field
+        label={i18n.t("common.title")}
+        value={contract.label}
+        setValue={(label) => update((value) => ({ ...value, label }))}
+      />
+      <Field
+        label={i18n.t("flows.nodeDescription")}
+        value={contract.description ?? ""}
+        setValue={(description) =>
+          update((value) => ({ ...value, description: description || null }))
+        }
+      />
+      {(contract.kind === "instruction" ||
+        contract.kind === "condition" ||
+        contract.kind === "approval") && (
+        <TextArea
+          label={i18n.t("flows.instruction")}
+          value={
+            contract.kind === "instruction"
+              ? contract.configuration.prompt
+              : contract.kind === "condition"
+                ? contract.configuration.instruction
+                : contract.configuration.prompt
+          }
+          setValue={(text) =>
+            update((value) =>
+              value.kind === "instruction"
+                ? { ...value, configuration: { prompt: text } }
+                : value.kind === "condition"
+                  ? {
+                      ...value,
+                      configuration: { mode: "semantic", instruction: text },
+                    }
+                  : value.kind === "approval"
+                    ? {
+                        ...value,
+                        configuration: { ...value.configuration, prompt: text },
+                      }
+                    : value,
+            )
+          }
+        />
+      )}
+      {contract.kind === "knowledge" && (
+        <>
+          <fieldset className="mt-4 rounded-lg border p-3">
+            <legend className="px-1 text-sm font-medium">{i18n.t("flows.knowledgeIds")}</legend>
+            {flattenKnowledge(knowledge).map((item) => (
+              <label
+                key={item.id}
+                className="flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
+                style={{ paddingLeft: `${item.depth * 12 + 8}px` }}
+              >
+                <input
+                  type="checkbox"
+                  checked={contract.configuration.resourceIds.includes(item.id)}
+                  disabled={
+                    contract.configuration.resourceIds.length === 1 &&
+                    contract.configuration.resourceIds[0] === item.id
+                  }
+                  onChange={(event) =>
+                    update((value) => {
+                      if (value.kind !== "knowledge") return value;
+                      const selected = new Set(value.configuration.resourceIds);
+                      if (event.target.checked) selected.add(item.id);
+                      else selected.delete(item.id);
+                      return {
+                        ...value,
+                        configuration: {
+                          ...value.configuration,
+                          resourceIds: [...selected],
+                        },
+                      };
+                    })
+                  }
+                  className="mt-0.5 size-4 accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <span className="min-w-0 truncate">{item.title}</span>
+              </label>
+            ))}
+            {knowledge.length === 0 && (
+              <p className="px-2 py-1 text-sm text-muted-foreground">
+                {i18n.t("flows.knowledgeEmpty")}
+              </p>
+            )}
+          </fieldset>
+          <TextArea
+            label={i18n.t("flows.knowledgeQuery")}
+            value={contract.configuration.query ?? ""}
+            setValue={(query) =>
+              update((value) =>
+                value.kind === "knowledge"
+                  ? {
+                      ...value,
+                      configuration: {
+                        ...value.configuration,
+                        query: query || null,
+                      },
+                    }
+                  : value,
+              )
+            }
+          />
+        </>
+      )}
+      {contract.kind === "tool" && (
+        <div className="mt-4">
+          <label className="block text-sm font-medium">
+            {i18n.t("flows.tool")}
+            <select
+              value={`${contract.configuration.sourceId}:${contract.configuration.toolName}`}
+              onChange={(event) => {
+                const [sourceId, ...name] = event.target.value.split(":");
+                const toolName = name.join(":");
+                update((value) =>
+                  value.kind === "tool" && sourceId
+                    ? {
+                        ...value,
+                        configuration: {
+                          ...value.configuration,
+                          sourceId,
+                          toolName,
+                          fingerprint:
+                            tools.find(
+                              (entry) =>
+                                entry.source.id === sourceId && entry.capability.name === toolName,
+                            )?.capability.fingerprint ?? null,
+                        },
+                      }
+                    : 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"
+            >
+              <option value="select-a-source:select-a-tool">{i18n.t("flows.selectTool")}</option>
+              {tools.map((entry) => (
+                <option
+                  key={`${entry.source.id}:${entry.capability.name}`}
+                  value={`${entry.source.id}:${entry.capability.name}`}
+                >
+                  {entry.source.name} · {entry.capability.title ?? entry.capability.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <ToolArgumentsEditor
+            key={contract.id}
+            label={i18n.t("tools.arguments")}
+            invalidLabel={i18n.t("tools.invalidJson")}
+            initialValue={contract.configuration.arguments}
+            onValid={(argumentsValue) => {
+              update((value) =>
+                value.kind === "tool"
+                  ? {
+                      ...value,
+                      configuration: { ...value.configuration, arguments: argumentsValue },
+                    }
+                  : value,
+              );
+            }}
+          />
+        </div>
+      )}
+    </aside>
+  );
+}
+
+function ToolArgumentsEditor({
+  label,
+  invalidLabel,
+  initialValue,
+  onValid,
+}: {
+  label: string;
+  invalidLabel: string;
+  initialValue: Record<string, unknown>;
+  onValid(value: Record<string, unknown>): void;
+}) {
+  const [text, setText] = useState(() => JSON.stringify(initialValue, null, 2));
+  const [invalid, setInvalid] = useState(false);
+  return (
+    <label className="mt-4 block text-sm font-medium">
+      {label}
+      <textarea
+        rows={6}
+        value={text}
+        onChange={(event) => {
+          const next = event.target.value;
+          setText(next);
+          try {
+            const parsed: unknown = JSON.parse(next);
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+              setInvalid(true);
+              return;
+            }
+            setInvalid(false);
+            onValid(parsed as Record<string, unknown>);
+          } catch {
+            setInvalid(true);
+          }
+        }}
+        className="mt-2 w-full resize-y rounded-md border bg-background px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+      {invalid && <span className="mt-1 block text-xs text-destructive">{invalidLabel}</span>}
+    </label>
+  );
+}
+
+function flattenKnowledge(
+  nodes: KnowledgeTreeNode[],
+  depth = 0,
+): Array<{ id: string; title: string; depth: number }> {
+  return nodes.flatMap((node) => [
+    { id: node.id, title: node.title, depth },
+    ...flattenKnowledge(node.children, depth + 1),
+  ]);
+}
+
+function Field({
+  label,
+  value,
+  setValue,
+}: {
+  label: string;
+  value: string;
+  setValue(value: string): void;
+}) {
+  return (
+    <label className="mt-4 block text-sm font-medium">
+      {label}
+      <input
+        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>
+  );
+}
+function TextArea({
+  label,
+  value,
+  setValue,
+}: {
+  label: string;
+  value: string;
+  setValue(value: string): void;
+}) {
+  return (
+    <label className="mt-4 block text-sm font-medium">
+      {label}
+      <textarea
+        rows={6}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        className="mt-2 w-full resize-y rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+    </label>
+  );
+}
+
+function CreateFlow({ close, select }: { close(): void; select(id: string): void }) {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const [title, setTitle] = useState("");
+  const create = useMutation({
+    mutationFn: () =>
+      data.createFlow({
+        title,
+        description: null,
+        idempotencyKey: crypto.randomUUID(),
+      }),
+    onSuccess: async (flow) => {
+      await queryClient.invalidateQueries({ queryKey: ["flows"] });
+      select(flow.id);
+      close();
+    },
+  });
+  return (
+    <Modal title={i18n.t("flows.new")} close={close}>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (create.isPending) return;
+          create.mutate();
+        }}
+      >
+        <Field label={i18n.t("common.title")} value={title} setValue={setTitle} />
+        {create.isError ? (
+          <p role="alert" className="mt-3 text-sm text-destructive">
+            {i18n.t("flows.operationFailed")}
+          </p>
+        ) : null}
+        <button
+          type="submit"
+          disabled={create.isPending || title.trim().length === 0}
+          className="mt-5 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+        >
+          {create.isPending ? i18n.t("common.saving") : i18n.t("common.create")}
+        </button>
+      </form>
+    </Modal>
+  );
+}