@anchrd/intel-ui 0.35.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/app/view-toggle/view-toggle.tsx

@@ -1,10 +1,15 @@
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { History, Network, PencilRuler } from "lucide-react";
+import { ListChecks, Network, PencilRuler } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { type IntelView, viewFrom } from "@/router/selection-search.ts";
 
-const icons = { editor: PencilRuler, graph: Network, runs: History } as const;
+// ⚠️ `runs` is NOT `History`, and that is the point of this line rather than a taste in icons.
+// `History` is what the resource menu draws beside "Version history" (`resource-menu.tsx`), and both
+// are visible on the same flow header — one as this switch, one in the menu right below it. The same
+// clock for two different things was read as one: the switch was taken for the version history and
+// asked about as such (#635). Whatever stands here has to stay out of that menu.
+const icons = { editor: PencilRuler, graph: Network, runs: ListChecks } as const;
 const labels = {
   editor: "view.showEditor",
   graph: "view.showGraph",

package/src/flows/flows.tsx

@@ -45,7 +45,7 @@ import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
 import { useResolvedTheme } from "@/theme/theme-context.tsx";
 import { TitleRow, TitleRowFrame, TitleRowScrollArea } from "@/title-row/title-row.tsx";
 
-type CanvasNode = ReactFlowNode<{ node: FlowNode }, "intel">;
+type CanvasNode = ReactFlowNode<{ node: FlowNode; branches?: readonly string[] }, "intel">;
 type CanvasEdge = Edge;
 
 // One handle id at both ends of a context edge. React Flow reports the handles a connection was
@@ -53,6 +53,38 @@ type CanvasEdge = Edge;
 // stores the meaning itself, not which dot it was dragged from.
 const ContextHandle = "context";
 
+// What a condition drawn on this canvas calls its branches. A DEFAULT for a new one, not a
+// vocabulary: `sourceHandle` is any non-empty string in the contract, and `compileFlow` asks only
+// that a condition's branches are unique and not null. A graph arrives over MCP as readily as from
+// here, and one whose branches are called something else is as valid as this one.
+const DefaultBranches = ["yes", "no"] as const;
+
+/**
+ * The branch names of one condition, as the loaded graph spells them.
+ *
+ * ⚠️ Read from the edges, never imposed on them. Rendering a fixed `yes`/`no` pair left every edge
+ * saved with other names unattached to any handle — the author redrew it, the redrawn edge took
+ * this canvas's name, and the old edge stayed in the state until its target had two incoming edges
+ * and `compileFlow` refused the save (#627). The names are taken once, when the version is loaded,
+ * so deleting an edge does not take its branch off the card: the handle stays, and drawing the edge
+ * again lands on the same name it had.
+ *
+ * Filled up to two from the defaults only where the graph is short of them — a condition needs two
+ * branches to be worth drawing, and one with none at all would offer nowhere to start.
+ */
+function branchesOf(graph: FlowGraph, nodeId: string): string[] {
+  const named = graph.edges
+    .filter((edge) => edge.kind === "flow" && edge.source === nodeId)
+    .map((edge) => edge.sourceHandle)
+    .filter((handle): handle is string => handle !== null);
+  const branches = [...new Set(named)];
+  for (const fallback of DefaultBranches) {
+    if (branches.length >= DefaultBranches.length) break;
+    if (!branches.includes(fallback)) branches.push(fallback);
+  }
+  return branches;
+}
+
 // The order the bar offers them in: roughly the order a flow is built, from the start to the result.
 // ⚠️ The start is in the bar even though every graph opens with one, because it can be deleted —
 // without an entry there would be no way back to a flow that has a beginning.
@@ -114,6 +146,7 @@ function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
   const broken = isLinkNode(contract) && invalidLinks.has(contract.configuration.resourceId);
   const Icon = nodeIcon[contract.kind];
   const branching = contract.kind === "condition";
+  const branches = data.branches ?? DefaultBranches;
   // ⚠️ 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.
@@ -155,12 +188,18 @@ function FlowCard({ data, selected }: NodeProps<CanvasNode>) {
       {contract.kind !== "output" && !branching && (
         <Handle type="source" position={Position.Right} />
       )}
-      {branching && (
-        <>
-          <Handle id="yes" type="source" position={Position.Right} style={{ top: "35%" }} />
-          <Handle id="no" type="source" position={Position.Right} style={{ top: "70%" }} />
-        </>
-      )}
+      {branching &&
+        branches.map((branch, index) => (
+          <Handle
+            key={branch}
+            id={branch}
+            type="source"
+            position={Position.Right}
+            // Spread over the right edge rather than pinned: a condition may carry more than the two
+            // this canvas offers, and three branches stacked on two fixed points would hide one.
+            style={{ top: `${(100 * (index + 1)) / (branches.length + 1)}%` }}
+          />
+        ))}
       {/* The context point (#37). Sideways is the order of work, downwards is what a step works
           with — including at the output, where the same edge reads as where the result goes. Both
           ends sit on the vertical axis so an attachment hangs under its step and the two meanings
@@ -207,13 +246,34 @@ function defaultGraph(): FlowGraph {
   };
 }
 
+/**
+ * The edges left over once `connection` is drawn.
+ *
+ * ⚠️ A point in the order of work leads to ONE place, and drawing from it again means "there
+ * instead". `compileFlow` says so twice — a step has exactly one outgoing edge, and a condition's
+ * branches are unique — so a second line from the same point can only ever be a graph that will not
+ * save. Dropping the old one here is what #627 cost when nothing did: the author redrew a branch,
+ * both lines stayed, and the refusal that followed named a node they had not touched.
+ *
+ * The context point is the exception it has always been: a step works with as much material as it
+ * needs, and those edges leave from the same handle by design.
+ */
+export function clearedFor(edges: CanvasEdge[], connection: Connection): CanvasEdge[] {
+  if (connection.sourceHandle === ContextHandle) return edges;
+  return edges.filter(
+    (edge) =>
+      edge.source !== connection.source ||
+      (edge.sourceHandle ?? null) !== (connection.sourceHandle ?? null),
+  );
+}
+
 function canvas(graph: FlowGraph) {
   return {
     nodes: graph.nodes.map((node) => ({
       id: node.id,
       type: "intel" as const,
       position: node.position,
-      data: { node },
+      data: node.kind === "condition" ? { node, branches: branchesOf(graph, node.id) } : { node },
     })),
     edges: graph.edges.map((edge) => {
       const context = edge.kind === "context";
@@ -615,6 +675,7 @@ function FlowsEditor() {
           saving={save.isPending}
           canMutate={canMutate}
           incomplete={stepsMissingServer.map((node) => ({ label: node.data.node.label }))}
+          scrollingView={selection.view === "runs"}
           onSave={() => save.mutate()}
           onPublish={() => setPublishing(true)}
         />
@@ -734,7 +795,7 @@ function FlowsEditor() {
                           id: crypto.randomUUID(),
                           ...contextEdgeStyle(connection.sourceHandle === ContextHandle),
                         },
-                        current,
+                        clearedFor(current, connection),
                       ),
                     );
                   }}
@@ -883,6 +944,7 @@ function FlowTitle({
   saving,
   canMutate,
   incomplete,
+  scrollingView,
   onSave,
   onPublish,
 }: {
@@ -890,6 +952,9 @@ function FlowTitle({
   dirty: boolean;
   saving: boolean;
   canMutate: boolean;
+  // Whether what stands below this line can scroll under it. The runs list can and earns its edge
+  // the usual way; the canvas and the graph pan instead, and would never get one (#634).
+  scrollingView: boolean;
   // Tool steps that name no server yet. They cannot be saved, so the refusal is shown here rather
   // than fetched from the server as a message that names no step.
   incomplete: Array<{ label: string }>;
@@ -914,7 +979,12 @@ function FlowTitle({
     // 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 }}>
+    <TitleRow
+      title={flow.title}
+      description={flow.description}
+      target={{ type: "flow", flow }}
+      separated={!scrollingView}
+    >
       {/* ⚠️ #454: the toggle used to stand in the global header, beside the search — where what
           applies EVERYWHERE stands. But it says how THIS flow is shown, and so belongs in the line
           that names this flow. A flow is the only level with runs, and therefore the only one with

package/src/i18n/de.json

@@ -75,7 +75,6 @@
   "resource.archive": "Archivieren",
   "resource.columns": "Spalten",
   "resource.export": "Export",
-  "resource.exportExcludes": "Nimmt den aktuellen Stand mit. Frühere Versionen, Freigaben und Flow-Läufe bleiben zurück. Von einem veröffentlichten Flow reist der veröffentlichte Graph — spätere Änderungen am Entwurf bleiben zurück.",
   "resource.import": "Import",
   "resource.validate": "Prüfen",
   "resource.links": "Verweise",

package/src/i18n/en.json

@@ -75,7 +75,6 @@
   "resource.archive": "Archive",
   "resource.columns": "Columns",
   "resource.export": "Export",
-  "resource.exportExcludes": "Carries the current state. Earlier versions, shares and flow runs stay behind. A published flow travels as its published graph — changes drafted since stay behind.",
   "resource.import": "Import",
   "resource.validate": "Check",
   "resource.links": "Links",

package/src/i18n/es.json

@@ -75,7 +75,6 @@
   "resource.archive": "Archivar",
   "resource.columns": "Columnas",
   "resource.export": "Exportar",
-  "resource.exportExcludes": "Se lleva el estado actual. Las versiones anteriores, los permisos y las ejecuciones de flujo se quedan. Un flujo publicado viaja con su grafo publicado; los cambios redactados después se quedan.",
   "resource.import": "Importar",
   "resource.validate": "Comprobar",
   "resource.links": "Enlaces",

package/src/resource-menu/resource-menu.tsx

@@ -18,7 +18,7 @@ import {
   ShieldCheck,
 } from "lucide-react";
 import type * as React from "react";
-import { useId, useState } from "react";
+import { useState } from "react";
 import { AccessSummary } from "@/access-summary/access-summary.tsx";
 import { allTreeLevelsKey, moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
 import {
@@ -154,11 +154,6 @@ export function ResourceMenu({
   // nowhere else: a person had strictly less reach on their own table than a model did.
   const isTable = node !== null && node.kind === "table";
   const bundleImport = useBundleImport({ where: title });
-  // ⚠️ Per instance, not a constant: the folder table renders one menu PER ROW, so a fixed id would
-  // put the same `id` in the document twenty times and every entry's name would resolve to the
-  // first one's.
-  const exportLabelId = useId();
-  const exportHintId = useId();
 
   // Everything a change here can make stale. The row sits in one level of the tree, the open screen
   // reads the record, and the flat collections behind the search, the link picker and the relation
@@ -323,38 +318,17 @@ export function ResourceMenu({
               (#534). That is the export's gap on every kind it can hit, not something this entry
               was covering — which is why it is fixed there and not by keeping a second entry.
 
-              ⚠️ The second line is not decoration and it belongs HERE rather than after the click
-              (#433, ADR-0006). A bundle carries one version per node; whoever moves an installation
-              this way loses every earlier one, and until now the only place that said so was
-              `excluded` in a `manifest.json` inside the zip — read, if ever, long after the source
-              installation is gone. A loss that cannot be undone has to be readable BEFORE the
-              gesture, and a menu item is where this gesture is chosen.
-
-              ⚠️ Its third clause is the flow half (#585), and it is a DIFFERENT loss from the first
-              two rather than an example of them: a published flow travels as its published graph,
-              so edits drafted since do not travel at all. Those edits are not an earlier version —
-              they are the newest state there is, and somebody reading only "earlier versions stay
-              behind" would expect the opposite of what happens. `Excluded` in `bundle.ts` names it
-              with a word of its own for the same reason.
-
-              ⚠️ It is the entry's DESCRIPTION, not part of its name: `aria-labelledby` keeps the
-              name at the one word every other entry here uses, and `aria-describedby` is what a
-              screen reader reads after it. Folding a whole sentence into the name would make this
-              the only entry in the menu somebody has to listen through to know what it does — and
-              the sentence is a condition of the action, which is what a description is for. */}
-          <DropdownMenuItem
-            className="items-start"
-            aria-labelledby={exportLabelId}
-            aria-describedby={exportHintId}
-            onSelect={() => exportBundle.mutate()}
-          >
-            <FolderDown aria-hidden="true" className="mt-0.5" />
-            <span className="flex flex-col gap-0.5">
-              <span id={exportLabelId}>{i18n.t("resource.export")}</span>
-              <span id={exportHintId} className="text-xs text-muted-foreground">
-                {i18n.t("resource.exportExcludes")}
-              </span>
-            </span>
+              ⚠️ The entry carried a three-clause description under its name until 2026-08-19, put
+              there by #433/ADR-0006 so that an irreversible loss was readable BEFORE the gesture: a
+              bundle takes one version per node, shares and runs stay behind, and a published flow
+              travels as its published graph (#585). Jack removed it — it was the only entry running
+              over two lines and it pushed the menu apart. What the reader now gets instead is
+              `excluded` in the zip's `manifest.json` and `BundleImportResult.excluded` after an
+              import, both of which are read only once the zip exists. That is a deliberate trade,
+              recorded in ADR-0006 and in #636, and NOT a leftover to be restored. */}
+          <DropdownMenuItem onSelect={() => exportBundle.mutate()}>
+            <FolderDown aria-hidden="true" />
+            {i18n.t("resource.export")}
           </DropdownMenuItem>
           {/* The other half of the same round trip, next to it rather than in the tree's plus
               (#346): one word in the menu, both sources under it. */}
@@ -526,31 +500,23 @@ function VersionHistory({ target, close }: { target: ResourceTarget; close(): vo
       }));
     },
   });
+  // ⚠️ A Modal, like every other panel in this menu — NOT an `absolute` drawer. `absolute` measures
+  // against the nearest positioned ancestor, and this menu has no say in what that is: on the title
+  // line it is the title row (`title-row.tsx`, `relative z-10`, around 100px tall), which clipped
+  // the list to its first entry on every viewport; in the folder listing it is the table container
+  // (`table.tsx`, `relative … overflow-x-auto`), which clips it differently again (#628). The list
+  // scrolls INSIDE the dialog instead, the way `NodeLinksPanel` further down does it.
   return (
-    <aside
-      aria-label={i18n.t("node.versions")}
-      className="absolute bottom-0 right-0 top-0 z-10 w-80 overflow-y-auto border-l bg-card p-5 shadow-xl"
-    >
-      <div className="flex items-start justify-between gap-4">
-        <h3 className="font-semibold">{i18n.t("node.versions")}</h3>
-        <button
-          type="button"
-          onClick={close}
-          aria-label={i18n.t("common.close")}
-          className="rounded-md px-2 py-1 text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          ×
-        </button>
-      </div>
+    <Modal title={i18n.t("node.versions")} close={close}>
       {versions.isPending ? (
-        <p className="mt-4 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
       ) : null}
       {versions.isError ? (
-        <p role="alert" className="mt-4 text-sm text-destructive">
+        <p role="alert" className="text-sm text-destructive">
           {i18n.t(target.type === "flow" ? "flows.operationFailed" : "node.operationFailed")}
         </p>
       ) : null}
-      <ol className="mt-4 space-y-3">
+      <ol className="max-h-72 space-y-3 overflow-y-auto">
         {versions.data?.map((version) => (
           <li key={version.id} className="rounded-md border p-3 text-sm">
             <span className="font-medium">
@@ -563,7 +529,7 @@ function VersionHistory({ target, close }: { target: ResourceTarget; close(): vo
           </li>
         ))}
       </ol>
-    </aside>
+    </Modal>
   );
 }
 

package/src/title-row/title-row.tsx

@@ -69,11 +69,22 @@ export function TitleRow({
   title,
   description,
   target,
+  separated,
   children,
 }: {
   title: string;
   description?: string | null;
   target: ResourceTarget;
+  /**
+   * A separator that does NOT wait for a scroll.
+   *
+   * ⚠️ For a surface where scrolling cannot happen, and that is the only case it is for (#634). The
+   * edge below this row is normally `scrolled`, set by `TitleRowScrollArea` — which is right where
+   * content moves under the row. The flow canvas does not scroll, it pans: nothing ever sets
+   * `scrolled`, so the row sat on the dark canvas with no edge at all. Do not pass this where the
+   * content does scroll; a permanent edge there would replace a signal with decoration.
+   */
+  separated?: boolean;
   children?: ReactNode;
 }) {
   const scroll = useContext(TitleRowScrollContext);
@@ -88,7 +99,7 @@ export function TitleRow({
       data-scrolled={scroll?.scrolled || undefined}
       className={cn(
         "relative z-10 flex shrink-0 items-start justify-between gap-5 px-6 py-4 transition-shadow",
-        scroll?.scrolled && "shadow-[inset_0_-1px_0_var(--border)]",
+        (separated || scroll?.scrolled) && "shadow-[inset_0_-1px_0_var(--border)]",
       )}
     >
       <div className="flex min-w-0 items-center gap-3">