@anchrd/intel-ui 0.35.0 → 0.36.0

package/package.json

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

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";
@@ -734,7 +794,7 @@ function FlowsEditor() {
                           id: crypto.randomUUID(),
                           ...contextEdgeStyle(connection.sourceHandle === ContextHandle),
                         },
-                        current,
+                        clearedFor(current, connection),
                       ),
                     );
                   }}

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

@@ -526,31 +526,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 +555,7 @@ function VersionHistory({ target, close }: { target: ResourceTarget; close(): vo
           </li>
         ))}
       </ol>
-    </aside>
+    </Modal>
   );
 }