@anchrd/intel-ui 0.28.0 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,7 +33,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.17.0",
+    "@anchrd/intel-contract": "^0.18.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",

package/src/app/app-tree/app-tree.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { useRef, useState } from "react";
 import {
+  allTreeLevelsKey,
   type MoveDestination,
   moveErrorKey,
   moveVerdict,
@@ -176,13 +177,18 @@ export function AppTree() {
   // ⚠️ The level a row appears in is not the only thing that goes stale. The header search reads
   // the whole flow list, and the graph is what the link picker and the flow editor's tree links
   // offer — a row created here has to reach those too, or another screen keeps showing yesterday.
+  //
+  // ⚠️ And the level written into is not enough either: the folder's own ROW says whether it can be
+  // opened at all, and that row stands one level higher (`allTreeLevelsKey`, #519). Without it the
+  // `toggle` above opens a folder whose arrow never appeared, so the first thing filed into an empty
+  // folder was invisible until the page was reloaded.
   async function reveal(
     parentId: string | null,
     collection: "flows" | "node-graph",
   ): Promise<void> {
     if (parentId !== null) toggle({ id: parentId, type: "folder" }, true);
     await Promise.all([
-      queryClient.invalidateQueries({ queryKey: levelKey({ id: parentId, type: "folder" }) }),
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
       queryClient.invalidateQueries({ queryKey: [collection] }),
       // The graph view of that same level draws exactly this list, so it goes stale for the same
       // reason the level does (#19).
@@ -233,8 +239,19 @@ export function AppTree() {
     },
     onSuccess: async (created) => {
       setCreating(null);
-      await reveal(created.parentId, created.collection);
-      await navigate({ to: created.area, search: { select: created.id } });
+      // ⚠️ The screen first, the refreshes after. Since #519 `reveal` waits on EVERY mounted level,
+      // and a React Query retry is paused while the tab is not in front (#212) — awaiting that
+      // before navigating would leave somebody who just made a document sitting on the old screen
+      // for as long as one level takes to answer.
+      //
+      // ⚠️ `finally`, because both screens are lazy chunks: a failed chunk load throws out of
+      // `navigate`, and without this the tree, the collections and the graph would silently keep
+      // yesterday's rows for the rest of the session — the very state this ticket is about.
+      try {
+        await navigate({ to: created.area, search: { select: created.id } });
+      } finally {
+        await reveal(created.parentId, created.collection);
+      }
     },
   });
 
@@ -275,8 +292,12 @@ export function AppTree() {
       return { id: node.id, parentId };
     },
     onSuccess: async (created) => {
-      await reveal(created.parentId, "node-graph");
-      await navigate({ to: "/nodes", search: { select: created.id } });
+      // The order — and the `finally` — are the ones above, for the same two reasons.
+      try {
+        await navigate({ to: "/nodes", search: { select: created.id } });
+      } finally {
+        await reveal(created.parentId, "node-graph");
+      }
     },
   });
 

package/src/app/tree-move/tree-move.tsx

@@ -31,6 +31,33 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
   return ["tree", parentId];
 }
 
+/**
+ * Every level of the tree at once — what a write that changed what is IN a folder makes stale.
+ *
+ * ⚠️ Not the level that was written into: that is the obvious half, and it was the whole of #519.
+ * A folder ROW carries `openable` — since #59 the arrow only stands where there is something to
+ * open — and that is a statement about the folder's CONTENTS living one level ABOVE it. Refresh
+ * only the level below and the row keeps yesterday's answer: the first thing filed into an EMPTY
+ * folder has no arrow to appear under, `reveal` opens a level `renderRow` then never renders, and
+ * reloading the page was the only thing that read the row again. The other direction is the same
+ * bug from the other side — the last child moved or archived out leaves an arrow promising a level
+ * that is empty.
+ *
+ * ⚠️ A prefix rather than "the level, plus the level its folder row sits in", because that second
+ * level is not always the one the record names: since #429 a shared row also stands at the root
+ * (`levelsToClear`).
+ *
+ * ⚠️ What it costs is one request per MOUNTED level, and that is not the same as "per level on
+ * screen": `expanded` in `app-tree.tsx` is only ever added to, so a folder that was opened and has
+ * since left the tree — archived, moved away — keeps its query mounted for the rest of the session
+ * and is re-read by every write from then on. Nothing is wrong on screen; the requests are simply
+ * paid for. #521 prunes that list, and until it does, this is the honest bound.
+ *
+ * The same prefix is what `archive.tsx` has always used for the same reason: a row can come back
+ * anywhere, and the screen writing it does not know where.
+ */
+export const allTreeLevelsKey: readonly unknown[] = ["tree"];
+
 /**
  * Which cached levels a move has to take the row out of.
  *
@@ -368,12 +395,11 @@ export function useTreeMove({
       for (const [key, value] of context?.snapshot ?? []) queryClient.setQueryData(key, value);
     },
     onSuccess: (_result, { destination }) => onMoved?.(destination),
-    onSettled: async (_result, _error, { entry, level, destination }) => {
+    onSettled: async (_result, _error, { entry }) => {
       await Promise.all([
-        ...levelsToClear(entry, level).map(
-          async (from) => await queryClient.invalidateQueries({ queryKey: treeLevelKey(from) }),
-        ),
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(destination.id) }),
+        // Both ends of the move and the rows they hang under: a folder that just received its first
+        // row needs its arrow, and one that lost its last has to give it back (#519).
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({
           queryKey: [entry.type === "flow" ? "flows" : "node-graph"],
         }),

package/src/archive/archive.tsx

@@ -3,6 +3,7 @@ import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArchiveRestore, LoaderCircle, Trash2 } from "lucide-react";
 import { useState } from "react";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
@@ -101,7 +102,7 @@ export function Archive() {
         queryClient.invalidateQueries({ queryKey: ["archive"] }),
         // The tree gets it back, so every level has to be asked again — the entry may sit
         // anywhere, and the archive does not know where.
-        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         queryClient.invalidateQueries({ queryKey: ["flows"] }),
       ]);
@@ -126,7 +127,7 @@ export function Archive() {
         queryClient.invalidateQueries({ queryKey: ["archive"] }),
         // The tree and the graph did not show the node, but its DISAPPEARANCE can be visible
         // elsewhere: a reference to it no longer resolves afterwards.
-        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         queryClient.invalidateQueries({ queryKey: ["flows"] }),
       ]);

package/src/flows/flows.tsx

@@ -285,6 +285,7 @@ function newNode(
   index: number,
   firstNodeId?: string,
   firstFlowId?: string,
+  firstServer?: string,
 ): FlowNode {
   const common = {
     id: `${kind}-${crypto.randomUUID()}`,
@@ -315,10 +316,13 @@ function newNode(
       return {
         ...common,
         kind,
+        // ⚠️ A server, not an empty string. `ToolServerHandle` has a minimum length, so a draft
+        // with `""` cannot be saved at all — the author would build a step and lose it at the next
+        // save with a raw field-path error. The tree link one line up takes the same way out.
         configuration: {
-          toolName: "select-a-tool",
+          server: firstServer ?? "",
+          allow: null,
           fingerprint: null,
-          arguments: {},
         },
       };
     case "condition":
@@ -361,9 +365,11 @@ function FlowsEditor() {
   const theme = useResolvedTheme();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const tools = useQuery({
-    queryKey: ["tools"],
-    queryFn: () => data.listTools(),
+  // The servers a tool step can name (#489). The flat function list the picker used to show is
+  // what that ticket set out to remove; which function runs is decided while the flow runs.
+  const toolServers = useQuery({
+    queryKey: ["tool-servers"],
+    queryFn: () => data.listToolServers(),
   });
   // A tree link points at a node, so the editor needs candidates. The graph is the authorized
   // flat list of them; walking the folder tree for a picker would be the N+1 all over again.
@@ -519,6 +525,7 @@ function FlowsEditor() {
                     nodes.length,
                     nodeGraph.data?.nodes[0]?.id,
                     callable.data?.items.find((entry) => entry.id !== selectedFlowId)?.id,
+                    toolServers.data?.items[0]?.handle,
                   );
                   setNodes((current) => [
                     ...current,
@@ -639,7 +646,7 @@ function FlowsEditor() {
                 <NodeInspector
                   node={selectedNode}
                   update={updateNode}
-                  tools={tools.data?.items ?? []}
+                  toolServers={toolServers.data?.items ?? []}
                   flows={(callable.data?.items ?? []).filter(
                     (entry) => entry.id !== selectedFlowId,
                   )}
@@ -852,12 +859,12 @@ function PublishPreview({
 function NodeInspector({
   node,
   update,
-  tools,
+  toolServers,
   flows,
 }: {
   node: CanvasNode | null;
   update(fn: (node: FlowNode) => FlowNode): void;
-  tools: Array<{ name: string; title: string | null; fingerprint: string }>;
+  toolServers: Array<{ handle: string; name: string; toolCount: number }>;
   flows: Flow[];
 }) {
   const i18n = useI18n();
@@ -949,50 +956,36 @@ function NodeInspector({
         <div className="mt-4">
           <label className="block text-sm font-medium">
             {i18n.t("flows.tool")}
+            {/* ⚠️ The step names a SERVER since #489. This picker is the smallest thing that keeps
+                the field usable on the new model; the real one — server names from the portal plus
+                an optional narrowing to single functions — is #489's second package and is
+                deliberately not smuggled in here. */}
             <select
-              value={contract.configuration.toolName}
+              value={contract.configuration.server}
               onChange={(event) => {
-                const toolName = event.target.value;
+                const server = event.target.value;
                 update((value) =>
                   value.kind === "tool"
                     ? {
                         ...value,
-                        configuration: {
-                          ...value.configuration,
-                          toolName,
-                          fingerprint:
-                            tools.find((entry) => entry.name === toolName)?.fingerprint ?? null,
-                        },
+                        // The fingerprint belongs to a surface that publishing freezes, and it is
+                        // the server's to compute — a value guessed in the browser would be a
+                        // second answer to a question the API already owns.
+                        configuration: { ...value.configuration, server, 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-tool">{i18n.t("flows.selectTool")}</option>
-              {tools.map((entry) => (
-                <option key={entry.name} value={entry.name}>
-                  {entry.title ?? entry.name}
+              <option value="">{i18n.t("flows.selectTool")}</option>
+              {toolServers.map((entry) => (
+                <option key={entry.handle} value={entry.handle}>
+                  {entry.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>
       )}
     </div>
@@ -1015,7 +1008,7 @@ function FlowNeeds({ flowId }: { flowId: string }) {
     needs.data !== undefined &&
     needs.data.nodes.length === 0 &&
     needs.data.hiddenNodes === 0 &&
-    needs.data.tools.length === 0;
+    needs.data.servers.length === 0;
   return (
     <section aria-label={i18n.t("flows.needs")} className="mt-auto border-t p-5">
       <h2 className="font-semibold">{i18n.t("flows.needs")}</h2>
@@ -1052,13 +1045,13 @@ function FlowNeeds({ flowId }: { flowId: string }) {
               </ul>
             </>
           )}
-          {needs.data.tools.length > 0 && (
+          {needs.data.servers.length > 0 && (
             <>
               <h3 className="mt-4 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 {i18n.t("flows.needsTools")}
               </h3>
               <ul className="mt-2 space-y-1 text-sm">
-                {needs.data.tools.map((name) => (
+                {needs.data.servers.map((name) => (
                   <li key={name} className="flex items-center gap-2">
                     <Wrench aria-hidden="true" className="size-3.5 shrink-0" />
                     <span className="min-w-0 truncate">{name}</span>
@@ -1067,7 +1060,6 @@ function FlowNeeds({ flowId }: { flowId: string }) {
               </ul>
             </>
           )}
-          <p className="mt-4 text-xs text-muted-foreground">{i18n.t("flows.needsHint")}</p>
         </>
       )}
     </section>
@@ -1118,47 +1110,6 @@ function SubflowVersionField({
   );
 }
 
-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 Field({
   label,
   value,

package/src/folder-contents/folder-contents.tsx

@@ -34,8 +34,8 @@ function targetOf(entry: TreeEntry): ResourceTarget {
  * fetch separately show it differently the moment one of them is stale, and that is the kind of
  * difference a customer finds before anybody here does. The other half of the bargain is free —
  * every invalidation the tree already does after a create, a move or an archive lands here too, and
- * that now includes the ones this screen's own menu makes: `ResourceMenu` invalidates
- * `["tree", parentId]`, which is this level.
+ * that now includes the ones this screen's own menu makes: since #519 they all refresh every tree
+ * level (`allTreeLevelsKey`), and this level is one of them.
  *
  * ⚠️ There is no "Kind" column since #101. The icon says what a row is, in the same picture the
  * sidebar draws two centimetres to its left, and `sr-only` says it in words for everyone who does

package/src/i18n/de.json

@@ -215,8 +215,6 @@
   "tools.toolCount": "{count} Werkzeuge",
   "tools.toolCountOne": "1 Werkzeug",
   "tools.liveNote": "Diese Liste ist eine Live-Abfrage mit deinem eigenen Portal-Zugriff. Intel speichert weder die Werkzeuge noch, wer sie nutzen darf; beides entscheidet das Portal.",
-  "tools.arguments": "Argumente",
-  "tools.invalidJson": "Die Argumente müssen ein JSON-Objekt in geschweiften Klammern sein; eine Liste oder ein einzelner Wert funktioniert nicht.",
   "flows.select": "Wähle einen Flow oder lege einen an, um den visuellen Editor zu öffnen.",
   "flows.inspect": "Wähle einen Schritt, um seine Konfiguration zu bearbeiten.",
   "flows.publish": "Veröffentlichen",
@@ -281,7 +279,6 @@
   "flows.selectTool": "Wähle ein gefundenes Werkzeug",
   "flows.operationFailed": "Der Flow-Vorgang ist fehlgeschlagen. Lade die neueste Fassung und versuche es erneut.",
   "flows.needs": "Was dieser Flow braucht",
-  "flows.needsHint": "Aus dem Graphen gelesen. Ob eine bestimmte Person davon etwas erreicht, entscheidet sich, wenn sie ihn ausführt.",
   "flows.needsNodes": "Dokumente",
   "flows.needsTools": "Werkzeuge",
   "flows.needsHidden": "{count} weitere, die du nicht sehen kannst",

package/src/i18n/en.json

@@ -215,8 +215,6 @@
   "tools.toolCount": "{count} tools",
   "tools.toolCountOne": "1 tool",
   "tools.liveNote": "This list is a live query with your own portal access. Intel stores neither the tools nor who may use them; the portal decides both.",
-  "tools.arguments": "Arguments",
-  "tools.invalidJson": "The arguments must be a JSON object in curly braces; a list or a single value will not work.",
   "flows.select": "Select a flow or create one to open the visual editor.",
   "flows.inspect": "Select a node to edit its configuration.",
   "flows.publish": "Publish",
@@ -281,7 +279,6 @@
   "flows.selectTool": "Select a discovered tool",
   "flows.operationFailed": "The flow operation failed. Reload the latest version and try again.",
   "flows.needs": "What this flow needs",
-  "flows.needsHint": "Read out of the graph. Whether a given person may reach any of it is decided when they run it.",
   "flows.needsNodes": "Documents",
   "flows.needsTools": "Tools",
   "flows.needsHidden": "{count} more you cannot see",

package/src/i18n/es.json

@@ -215,8 +215,6 @@
   "tools.toolCount": "{count} herramientas",
   "tools.toolCountOne": "1 herramienta",
   "tools.liveNote": "Esta lista es una consulta en vivo con tu propio acceso al portal. Intel no guarda ni las herramientas ni quién puede usarlas; ambas cosas las decide el portal.",
-  "tools.arguments": "Argumentos",
-  "tools.invalidJson": "Los argumentos tienen que ser un objeto JSON entre llaves; una lista o un valor suelto no sirven.",
   "flows.select": "Elige un flujo o crea uno para abrir el editor visual.",
   "flows.inspect": "Elige un paso para editar su configuración.",
   "flows.publish": "Publicar",
@@ -281,7 +279,6 @@
   "flows.selectTool": "Elige una herramienta descubierta",
   "flows.operationFailed": "La operación del flujo ha fallado. Carga la versión más reciente e inténtalo de nuevo.",
   "flows.needs": "Qué necesita este flujo",
-  "flows.needsHint": "Leído del grafo. Si una persona concreta llega a algo de esto se decide cuando lo ejecuta.",
   "flows.needsNodes": "Documentos",
   "flows.needsTools": "Herramientas",
   "flows.needsHidden": "{count} más que no puedes ver",

package/src/import-bundle/import-bundle.tsx

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { zipSync } from "fflate";
 import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
@@ -93,7 +93,10 @@ export function useBundleImport(options: {
     onSuccess: async (imported) => {
       await options.onImported?.(imported.parentId);
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: treeLevelKey(imported.parentId) }),
+        // ⚠️ Every level, not the one imported into: the target folder's own row carries whether it
+        // can be opened, and it stands one level higher (#519). An import into an empty folder was
+        // otherwise unreachable in the tree until the page was reloaded.
+        queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
         queryClient.invalidateQueries({ queryKey: ["node-graph"] }),
         // The graph view of that same level draws exactly this list (#19).
         queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),

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

@@ -20,7 +20,7 @@ import {
 import type * as React from "react";
 import { useState } from "react";
 import { AccessSummary } from "@/access-summary/access-summary.tsx";
-import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
+import { allTreeLevelsKey, moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -80,10 +80,6 @@ function titleOf(target: ResourceTarget): string {
   return target.type === "node" ? target.node.title : target.flow.title;
 }
 
-function parentOfTarget(target: ResourceTarget): string | null {
-  return target.type === "node" ? target.node.parentId : target.flow.parentId;
-}
-
 /**
  * Which sentence explains a verb.
  *
@@ -175,9 +171,14 @@ export function ResourceMenu({
   // reads the record, and the flat collections behind the search, the link picker and the relation
   // view all carry the title as well — a rename that only reached the tree would leave yesterday's
   // name standing on three other screens.
+  //
+  // ⚠️ Every level rather than the one this row sits in: archiving the last row of a folder takes
+  // that folder's arrow away, and the arrow is drawn from the folder's own row one level higher
+  // (`allTreeLevelsKey`, #519). Renaming needs no more than the one level — but two invalidations
+  // that differ per entry are how one of them goes missing.
   async function refresh(): Promise<void> {
     await Promise.all([
-      queryClient.invalidateQueries({ queryKey: ["tree", parentOfTarget(target)] }),
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
       queryClient.invalidateQueries({
         queryKey: target.type === "flow" ? ["flow", id] : ["node", id],
       }),