@anchrd/intel-ui 0.6.0 → 0.7.2

package/src/flows/flows.tsx

@@ -1,4 +1,5 @@
 import type { Flow, FlowGraph, FlowNode, KnowledgeNode } from "@anchrd/intel-contract";
+import { flowNodeLayer } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
@@ -17,12 +18,16 @@ import {
   type NodeProps,
   Position,
   ReactFlow,
+  ReactFlowProvider,
+  useReactFlow,
 } from "@xyflow/react";
 import { FileSearch, Info, Send, Wrench } from "lucide-react";
 import { useEffect, useId, useMemo, useState } from "react";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { TreeEntryMediaType } from "@/app/app-tree/app-tree.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { EntryPicker } from "@/entry-picker/entry-picker.tsx";
 import { FlowRuns } from "@/flow-runs/flow-runs.tsx";
 import { nodeIcon } from "@/flows/node-icon/node-icon.ts";
 import { NodePalette, usePaletteOpen } from "@/flows/node-palette/node-palette.tsx";
@@ -48,19 +53,46 @@ const ContextHandle = "context";
 const paletteKinds = [
   "trigger",
   "instruction",
-  "knowledge",
-  "tool",
   "condition",
-  "approval",
   "subflow",
+  "folder",
+  "document",
+  "upload",
+  "table",
+  "tool",
   "output",
 ] as const;
 
+// What the tree hands over, read back defensively: the payload crosses a browser API, so it is
+// parsed rather than trusted. A drop that does not carry what we put there is simply ignored.
+function droppedEntry(payload: string): { id: string; kind: string; title: string } | null {
+  try {
+    const parsed: unknown = JSON.parse(payload);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const { id, kind, title } = parsed as Record<string, unknown>;
+    if (typeof id !== "string" || typeof kind !== "string" || typeof title !== "string")
+      return null;
+    return { id, kind, title };
+  } catch {
+    return null;
+  }
+}
+
+// A row's kind decides what dropping it makes, so nothing has to be asked. A folder becomes a
+// Folder link, a flow becomes the Flow step that calls it (D25).
+const flowKindOfEntry: Record<string, FlowNode["kind"] | undefined> = {
+  folder: "folder",
+  document: "document",
+  attachment: "upload",
+  table: "table",
+  flow: "subflow",
+};
+
 function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
   const { i18n } = useIntelRouterContext();
   const contract = data.node;
   const Icon = nodeIcon[contract.kind];
-  const branching = contract.kind === "condition" || contract.kind === "approval";
+  const branching = contract.kind === "condition";
   // ⚠️ The start is told apart by silhouette first (#39): a pill among rectangles, in the primary
   // token. Shape survives zooming out past the point where the label is legible, and it is the only
   // one of the three that also carries into the overview map, where nothing is written at all.
@@ -99,18 +131,8 @@ function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
       )}
       {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%" }}
-          />
+          <Handle id="yes" type="source" position={Position.Right} style={{ top: "35%" }} />
+          <Handle id="no" type="source" position={Position.Right} style={{ top: "70%" }} />
         </>
       )}
       {/* The context point (#37). Sideways is the order of work, downwards is what a step works
@@ -143,7 +165,7 @@ function defaultGraph(): FlowGraph {
         kind: "output",
         label: "Result",
         position: { x: 520, y: 180 },
-        configuration: { template: "" },
+        configuration: {},
       },
     ],
     edges: [
@@ -236,6 +258,27 @@ function editsEdges(changes: EdgeChange<CanvasEdge>[]): boolean {
   );
 }
 
+// ⚠️ `upload` is what the flow calls an attachment. The two names are deliberately not unified:
+// in the tree it is a file somebody uploaded, in a flow it is material a step reads, and renaming
+// either one to match the other would make the other read wrong.
+//
+// The reverse map is DERIVED rather than written a second time — two hand-kept tables of the same
+// correspondence are two tables that eventually disagree, and the disagreement would show up as a
+// picker offering the wrong kind.
+const nodeKindOfLink = Object.fromEntries(
+  Object.entries(flowKindOfEntry)
+    .filter(([, kind]) => kind !== undefined && kind !== "subflow")
+    .map(([nodeKind, kind]) => [kind, nodeKind]),
+) as Partial<Record<FlowNode["kind"], KnowledgeNode["kind"]>>;
+
+type LinkNode = Extract<FlowNode, { configuration: { resourceId: string } }>;
+
+// A predicate rather than a boolean, so the update below can build the one configuration a link
+// has without widening every other node's to match.
+function isLinkNode(node: FlowNode): node is LinkNode {
+  return flowNodeLayer[node.kind] === "link" && "resourceId" in node.configuration;
+}
+
 function newNode(
   kind: FlowNode["kind"],
   index: number,
@@ -259,16 +302,14 @@ function newNode(
         kind,
         configuration: { prompt: "Describe what the AI should do." },
       };
-    case "knowledge":
-      return {
-        ...common,
-        kind,
-        configuration: {
-          resourceIds: firstKnowledgeId ? [firstKnowledgeId] : [],
-          mode: "relevant",
-          query: null,
-        },
-      };
+    // The four link kinds differ only in what the picker offers, so they are one branch. A link
+    // starts out naming nothing: it is filled in from the inspector, and `compileFlow` refuses to
+    // publish a graph whose reference is empty.
+    case "folder":
+    case "document":
+    case "upload":
+    case "table":
+      return { ...common, kind, configuration: { resourceId: firstKnowledgeId ?? "" } };
     case "tool":
       return {
         ...common,
@@ -288,15 +329,6 @@ function newNode(
           instruction: "Describe how to choose yes or no.",
         },
       };
-    case "approval":
-      return {
-        ...common,
-        kind,
-        configuration: {
-          prompt: "Describe what must be approved.",
-          timeout: "7 days",
-        },
-      };
     case "subflow":
       // `latest` while drafting: nobody should have to version things while building, and
       // publishing turns it into the concrete version (ADR-0004 §5).
@@ -306,12 +338,24 @@ function newNode(
         configuration: { flowId: firstFlowId ?? "", version: { mode: "latest" } },
       };
     case "output":
-      return { ...common, kind, configuration: { template: "" } };
+      return { ...common, kind, configuration: {} };
   }
 }
 
+// ⚠️ The provider wraps the editor rather than sitting inside it: `useReactFlow` — which is how the
+// drop turns a screen point into a graph point — has to be called from a component UNDER it, and
+// the hook lives in the same component that renders the canvas.
 export function Flows() {
+  return (
+    <ReactFlowProvider>
+      <FlowsEditor />
+    </ReactFlowProvider>
+  );
+}
+
+function FlowsEditor() {
   const { data, i18n } = useIntelRouterContext();
+  const flow = useReactFlow();
   const theme = useSystemTheme();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -398,15 +442,6 @@ export function Flows() {
       ]);
     },
   });
-  const run = useMutation({
-    mutationFn: () =>
-      data.startFlow({
-        flowId: selectedFlowId ?? "",
-        input: {},
-        parent: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-  });
 
   function updateNode(update: (node: FlowNode) => FlowNode) {
     setDirty(true);
@@ -435,10 +470,8 @@ export function Flows() {
           dirty={dirty}
           saving={save.isPending}
           canMutate={canMutate}
-          running={run.isPending}
           onSave={() => save.mutate()}
           onPublish={() => setPublishing(true)}
-          onRun={() => run.mutate()}
         />
       ) : null}
       <UnsavedChangesGuard dirty={dirty} />
@@ -551,6 +584,50 @@ export function Flows() {
                   setSelectedNodeId(null);
                   setPaletteOpen(false);
                 }}
+                // ⚠️ `copy`, not `move` (#75). The tree's own drop targets say `move`, and the two
+                // have to feel different while the pointer is still travelling: dropping here makes
+                // a node that POINTS at the row, it does not take the row out of its folder.
+                onDragOver={(event) => {
+                  if (!event.dataTransfer.types.includes(TreeEntryMediaType)) return;
+                  event.preventDefault();
+                  event.dataTransfer.dropEffect = "copy";
+                }}
+                onDrop={(event) => {
+                  const payload = event.dataTransfer.getData(TreeEntryMediaType);
+                  if (!payload) return;
+                  event.preventDefault();
+                  const dropped = droppedEntry(payload);
+                  if (!dropped) return;
+                  const kind = flowKindOfEntry[dropped.kind];
+                  if (!kind) return;
+                  // Where the pointer let go, in the graph's own coordinates — not the screen's, or
+                  // the node would land somewhere else at every zoom level.
+                  const position = flow.screenToFlowPosition({
+                    x: event.clientX,
+                    y: event.clientY,
+                  });
+                  setDirty(true);
+                  setNodes((current) => [
+                    ...current,
+                    {
+                      id: `${kind}-${crypto.randomUUID()}`,
+                      type: "intel" as const,
+                      position,
+                      data: {
+                        node: {
+                          id: `${kind}-${crypto.randomUUID()}`,
+                          kind,
+                          label: dropped.title,
+                          position,
+                          configuration:
+                            kind === "subflow"
+                              ? { flowId: dropped.id, version: { mode: "latest" as const } }
+                              : { resourceId: dropped.id },
+                        } as FlowNode,
+                      },
+                    },
+                  ]);
+                }}
               >
                 <Background />
                 {/* The overview map has no room for a label, so the start is marked there the only
@@ -570,7 +647,6 @@ export function Flows() {
                 node={selectedNode}
                 update={updateNode}
                 tools={tools.data?.items ?? []}
-                knowledge={knowledge.data?.nodes ?? []}
                 flows={(callable.data?.items ?? []).filter((entry) => entry.id !== selectedFlowId)}
               />
               <FlowNeeds flowId={selectedFlowId} />
@@ -578,15 +654,7 @@ export function Flows() {
           </>
         )}
       </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 || run.isError) && (
+      {save.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"
@@ -636,19 +704,15 @@ function FlowTitle({
   dirty,
   saving,
   canMutate,
-  running,
   onSave,
   onPublish,
-  onRun,
 }: {
   flow: Flow;
   dirty: boolean;
   saving: boolean;
   canMutate: boolean;
-  running: boolean;
   onSave(): void;
   onPublish(): void;
-  onRun(): void;
 }) {
   const { i18n } = useIntelRouterContext();
   // A draft that is already the published one freezes nothing, so publishing it would be a no-op
@@ -693,14 +757,6 @@ function FlowTitle({
         </Tooltip>
       </TooltipProvider>
       <SaveButton dirty={dirty && canMutate} saving={saving} onSave={onSave} />
-      <button
-        type="button"
-        onClick={onRun}
-        disabled={!canMutate || unpublished || running}
-        className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-      >
-        {i18n.t("flows.run")}
-      </button>
     </TitleRow>
   );
 }
@@ -795,13 +851,11 @@ function NodeInspector({
   node,
   update,
   tools,
-  knowledge,
   flows,
 }: {
   node: CanvasNode | null;
   update(fn: (node: FlowNode) => FlowNode): void;
   tools: Array<{ name: string; title: string | null; fingerprint: string }>;
-  knowledge: KnowledgeNode[];
   flows: Flow[];
 }) {
   const { i18n } = useIntelRouterContext();
@@ -810,23 +864,24 @@ function NodeInspector({
   return (
     <div className="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 }))}
-      />
-      {(contract.kind === "instruction" ||
-        contract.kind === "condition" ||
-        contract.kind === "approval") && (
+      {/* ⚠️ A marker has no name to give (D25). Start and End are the same two points in every
+          flow, and a start renamed "Rechnung holen" reads on the canvas as a step that does
+          something — which is exactly the confusion the layer split is meant to end. */}
+      {flowNodeLayer[contract.kind] !== "marker" && (
+        <Field
+          label={i18n.t("common.title")}
+          value={contract.label}
+          setValue={(label) => update((value) => ({ ...value, label }))}
+        />
+      )}
+      {(contract.kind === "instruction" || contract.kind === "condition") && (
         <TextArea
           label={i18n.t("flows.instruction")}
           hint={i18n.t("flows.instructionHint")}
           value={
             contract.kind === "instruction"
               ? contract.configuration.prompt
-              : contract.kind === "condition"
-                ? contract.configuration.instruction
-                : contract.configuration.prompt
+              : contract.configuration.instruction
           }
           setValue={(text) =>
             update((value) =>
@@ -837,76 +892,26 @@ function NodeInspector({
                       ...value,
                       configuration: { mode: "semantic", instruction: text },
                     }
-                  : value.kind === "approval"
-                    ? {
-                        ...value,
-                        configuration: { ...value.configuration, prompt: text },
-                      }
-                    : value,
+                  : 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>
-            {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"
-              >
-                <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,
-              )
-            }
-          />
-        </>
+      {/* ⚠️ One reference, chosen — not a list, ticked. What replaces this properly is the picker
+          in #75 (search, the tree, dropping from the sidebar); until then a select does the one
+          thing the layer rule needs it to do, which is make "exactly one" the only sayable state.
+          The list is filtered to the kind of the node, so a Table node cannot name a folder. */}
+      {isLinkNode(contract) && (
+        <EntryPicker
+          kind={nodeKindOfLink[contract.kind] ?? null}
+          value={contract.configuration.resourceId}
+          label={i18n.t(`flows.node.${contract.kind}`)}
+          onSelect={(resourceId) =>
+            update((value) =>
+              isLinkNode(value) ? { ...value, configuration: { resourceId } } : value,
+            )
+          }
+        />
       )}
       {contract.kind === "subflow" && (
         <div className="mt-4">

package/src/flows/node-icon/node-icon.ts

@@ -1,11 +1,13 @@
 import type { FlowNode } from "@anchrd/intel-contract";
 import {
-  CheckCircle2,
+  CircleDot,
   CirclePlay,
-  FileSearch,
+  FileText,
+  Folder,
   GitBranch,
-  ShieldCheck,
+  Paperclip,
   Sparkles,
+  Table,
   Workflow,
   Wrench,
 } from "lucide-react";
@@ -19,10 +21,14 @@ export type NodeIcon = ComponentType<SVGProps<SVGSVGElement>>;
 export const nodeIcon: Record<FlowNode["kind"], NodeIcon> = {
   trigger: CirclePlay,
   instruction: Sparkles,
-  knowledge: FileSearch,
-  tool: Wrench,
   condition: GitBranch,
-  approval: ShieldCheck,
   subflow: Workflow,
-  output: CheckCircle2,
+  // The four links wear the symbol their kind wears in the tree, so a document is the same shape
+  // wherever it is seen — the sidebar, the picker and the canvas do not each teach their own.
+  folder: Folder,
+  document: FileText,
+  upload: Paperclip,
+  table: Table,
+  tool: Wrench,
+  output: CircleDot,
 };

package/src/flows/node-palette/node-palette.tsx

@@ -1,5 +1,6 @@
+import { flowNodeLayer } from "@anchrd/intel-contract";
 import { Plus, X } from "lucide-react";
-import { useId, useRef, useState } from "react";
+import { Fragment, useId, useRef, useState } from "react";
 import { type NodeIcon, nodeIcon } from "@/flows/node-icon/node-icon.ts";
 import { cn } from "@/lib/utils.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -172,25 +173,38 @@ export function NodePalette<K extends PaletteKind>({
           {kinds.map((kind, index) => {
             const Icon: NodeIcon = nodeIcon[kind];
             const reason = disabledReason?.(kind) ?? null;
+            // ⚠️ A separator before the first entry of each layer after the first (D25). It is
+            // decoration, not structure: the toolbar's keyboard walks `[data-palette-item]`, so a
+            // divider in between must not be one — otherwise the arrows would stop on a line.
+            const opensLayer =
+              index > 0 && flowNodeLayer[kind] !== flowNodeLayer[kinds[index - 1] ?? kind];
             return (
-              <button
-                key={kind}
-                type="button"
-                data-palette-item=""
-                disabled={reason !== null}
-                title={reason ?? undefined}
-                tabIndex={index === active ? 0 : -1}
-                onClick={() => {
-                  setActive(index);
-                  add(kind);
-                }}
-                // `h-9` is the trigger's height: sharing one row only reads as one row if the entries
-                // start on the trigger's top edge instead of floating in the middle of it.
-                className="inline-flex h-9 items-center gap-1.5 rounded-md px-2 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
-              >
-                <Icon aria-hidden="true" className="size-3.5" />
-                {i18n.t(`flows.node.${kind}`)}
-              </button>
+              <Fragment key={kind}>
+                {opensLayer ? (
+                  <span
+                    aria-hidden="true"
+                    className="mx-1 my-1.5 w-px self-stretch bg-border"
+                    title={i18n.t(`flows.layer.${flowNodeLayer[kind]}`)}
+                  />
+                ) : null}
+                <button
+                  type="button"
+                  data-palette-item=""
+                  disabled={reason !== null}
+                  title={reason ?? undefined}
+                  tabIndex={index === active ? 0 : -1}
+                  onClick={() => {
+                    setActive(index);
+                    add(kind);
+                  }}
+                  // `h-9` is the trigger's height: sharing one row only reads as one row if the entries
+                  // start on the trigger's top edge instead of floating in the middle of it.
+                  className="inline-flex h-9 items-center gap-1.5 rounded-md px-2 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+                >
+                  <Icon aria-hidden="true" className="size-3.5" />
+                  {i18n.t(`flows.node.${kind}`)}
+                </button>
+              </Fragment>
             );
           })}
         </div>