@anchrd/intel-ui 0.5.0 → 0.7.0

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,22 +18,26 @@ 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";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
 import { Modal } from "@/modal/modal.tsx";
-import { ResourceMenu } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom, viewFrom } from "@/router/selection-search.ts";
 import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
 import { useSystemTheme } from "@/theme/theme.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
 
 type CanvasNode = Node<{ node: FlowNode }, "intel">;
 type CanvasEdge = Edge;
@@ -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
@@ -664,49 +728,36 @@ function FlowTitle({
     !publishable ? "flows.publishNothing" : unpublished ? "flows.publishNeeded" : "flows.publish",
   );
   return (
-    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
-      <div className="min-w-0">
-        <h2 className="truncate text-lg font-semibold">{flow.title}</h2>
-        {flow.description ? (
-          <p className="mt-1 text-sm text-muted-foreground">{flow.description}</p>
-        ) : null}
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex">
-                {/* Publishing goes through the preview, always. ADR-0004 §5 asks the author to see
+    // ⚠️ The menu stands to the RIGHT of the run button, not before it (#53, deliberate). Run is the
+    // loudest thing in this line and used to hold the edge; the menu takes it, because a menu one can
+    // hit without looking is worth more than the primary button being outermost. `TitleRow` is what
+    // enforces that — nothing passed in here can get past the menu.
+    <TitleRow title={flow.title} description={flow.description} target={{ type: "flow", flow }}>
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex">
+              {/* Publishing goes through the preview, always. ADR-0004 §5 asks the author to see
                     the freeze before it happens, and a second, quieter path around the dialog would
                     be the one everybody ends up using. */}
-                <button
-                  type="button"
-                  onClick={onPublish}
-                  disabled={!publishable}
-                  aria-label={publishLabel}
-                  className={`inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 ${
-                    publishable && unpublished ? "border-primary text-primary" : ""
-                  }`}
-                >
-                  <Send aria-hidden="true" className="size-4" />
-                </button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>{publishLabel}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <ResourceMenu target={{ type: "flow", flow }} variant="title" />
-        <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>
-      </div>
-    </div>
+              <button
+                type="button"
+                onClick={onPublish}
+                disabled={!publishable}
+                aria-label={publishLabel}
+                className={`inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 ${
+                  publishable && unpublished ? "border-primary text-primary" : ""
+                }`}
+              >
+                <Send aria-hidden="true" className="size-4" />
+              </button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>{publishLabel}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <SaveButton dirty={dirty && canMutate} saving={saving} onSave={onSave} />
+    </TitleRow>
   );
 }
 
@@ -800,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();
@@ -815,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) =>
@@ -842,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,
 };