@anchrd/intel-ui 0.32.0 → 0.34.0

package/package.json

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

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

@@ -150,7 +150,47 @@ export function AppTree() {
     return calls.items.map((flow) => flowEntry(flow, openable.has(flow.id)));
   }
 
-  const parents: Level[] = [{ id: null, type: "folder" }, ...expanded];
+  /**
+   * The levels that still have a row to hang on — `expanded` minus everything the tree no longer
+   * shows (#521).
+   *
+   * ⚠️ `expanded` is only ever added to. A folder that was opened and has since left the tree —
+   * archived, moved away, its share revoked — used to keep its level in `useQueries` for the rest
+   * of the session, and every write from then on re-read a list nothing draws. Nothing was wrong on
+   * screen (`isOpen` needs the row, so the level was never rendered); the requests were simply paid
+   * for, and the number grew with the length of the SESSION rather than with what is on screen.
+   *
+   * ⚠️ Read from the cache rather than from `levels` below, and that is not a shortcut: the answer
+   * is needed BEFORE `useQueries` is told what to load, and deriving it from the results afterwards
+   * can only correct the list one render too late — by which time the request has been made.
+   *
+   * ⚠️ A walk down from the root, not "is the row anywhere": a level whose own row is gone must not
+   * keep vouching for the levels under it, or a whole opened branch would survive its top.
+   *
+   * ⚠️ A row is enough, and `openable` is deliberately NOT part of it although `isOpen` checks it.
+   * `reveal` opens a folder BEFORE the invalidation that gives it its arrow, so a folder that was
+   * empty a moment ago still says `openable: false` at that instant — judging on it would close the
+   * folder #519 exists to have opened. A refetch does not make a level unknown either: TanStack
+   * keeps the previous data while it refetches, so an ordinary invalidation closes nothing.
+   */
+  const rowLevel = (entry: TreeEntry) =>
+    `${entry.kind === "folder" ? "folder" : "flow"}:${entry.id}`;
+  const rootLevel: Level = { id: null, type: "folder" };
+  const open: Level[] = [];
+  let frontier: Level[] = [rootLevel];
+  let waiting = [...expanded];
+  while (frontier.length > 0 && waiting.length > 0) {
+    const shown = new Set(
+      frontier.flatMap((level) =>
+        (queryClient.getQueryData<TreeEntry[]>(levelKey(level)) ?? []).map(rowLevel),
+      ),
+    );
+    frontier = waiting.filter((level) => shown.has(`${level.type}:${level.id}`));
+    waiting = waiting.filter((level) => !frontier.includes(level));
+    open.push(...frontier);
+  }
+
+  const parents: Level[] = [rootLevel, ...open];
   const levels = useQueries({
     queries: parents.map((parent) => ({
       queryKey: levelKey(parent),
@@ -167,10 +207,19 @@ export function AppTree() {
     levels[parents.findIndex((entry) => entry.id === level.id && entry.type === level.type)];
   const root = levels[0];
 
-  function toggle(level: Level & { id: string }, open: boolean) {
+  // ⚠️ The list the reader opened is also trimmed here, and not only where it is read: `open`
+  // above keeps a departed level from being LOADED, but the entry itself would otherwise sit in
+  // `expanded` until the tab is closed — and a folder that comes back would come back open, which
+  // is a claim about a gesture nobody made in this tree. A gesture is where trimming is free: it
+  // is an event, so there is no render to loop through.
+  function toggle(level: Level & { id: string }, wanted: boolean) {
     setExpanded((current) => {
-      const rest = current.filter((entry) => entry.id !== level.id || entry.type !== level.type);
-      return open ? [...rest, level] : rest;
+      const rest = current.filter(
+        (entry) =>
+          (entry.id !== level.id || entry.type !== level.type) &&
+          open.some((live) => live.id === entry.id && live.type === entry.type),
+      );
+      return wanted ? [...rest, level] : rest;
     });
   }
 
@@ -441,8 +490,10 @@ export function AppTree() {
     // reader may see" (#59). The difference is an arrow that keeps its promise — before, it stood
     // on every folder and every flow, empty ones included.
     const expandable = entry.openable;
+    // ⚠️ `open`, not `expanded`: what is drawn and what is loaded answer the same question, or the
+    // tree would draw a level it never asked for (#521).
     const isOpen =
-      expandable && expanded.some((open) => open.id === entry.id && open.type === level.type);
+      expandable && open.some((live) => live.id === entry.id && live.type === level.type);
     const Icon = isOpen && isFolder ? FolderOpen : kindIcons[entry.kind];
     const area = entry.type === "flow" ? "/flows" : "/nodes";
     const isActive = location.select === entry.id && location.pathname === area;

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

@@ -47,11 +47,11 @@ export function treeLevelKey(parentId: string | null): readonly unknown[] {
  * 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.
+ * ⚠️ What it costs is one request per level the reader has OPEN — bounded by the screen, not by how
+ * long the tab has been sitting there. `app-tree.tsx` loads a level only while the row it hangs on
+ * still stands in the level above it, so a folder that was opened and has since left the tree —
+ * archived, moved away, its share revoked — takes its query with it rather than being re-read by
+ * every write for the rest of the session.
  *
  * 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.

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -66,6 +66,7 @@ import {
   AppendTableRowsInput,
   AppendTableRowsResult,
   DefineTableInput,
+  RedefineTableInput,
 } from "@anchrd/intel-contract/table";
 import { ToolCatalog, ToolServerCatalog } from "@anchrd/intel-contract/tool";
 import type { z } from "zod";
@@ -319,6 +320,16 @@ export function createIntelDataProvider(
         { method: "POST", body: JSON.stringify(parsed) },
       );
     },
+    // ⚠️ `PATCH`, where the two writes above are `POST`. The route is the same address as the
+    // header itself, and this changes it — `POST /nodes/:id/table` is the one that WRITES a header
+    // and refuses on a table that already has one.
+    async redefineTable(input) {
+      const parsed = RedefineTableInput.parse(input);
+      return await request(`/nodes/${encodeURIComponent(parsed.nodeId)}/table`, NodeTable, {
+        method: "PATCH",
+        body: JSON.stringify(parsed),
+      });
+    },
     async listNodeVersions(nodeId) {
       return await request(`/nodes/${encodeURIComponent(nodeId)}/versions`, NodeVersionList);
     },

package/src/data/intel-data-provider/intel-data-provider.types.ts

@@ -65,6 +65,7 @@ import type {
   AppendTableRowsInput,
   AppendTableRowsResult,
   DefineTableInput,
+  RedefineTableInput,
 } from "@anchrd/intel-contract/table";
 import type { ToolCatalog, ToolServerCatalog } from "@anchrd/intel-contract/tool";
 
@@ -125,6 +126,14 @@ export interface IntelDataProvider {
   getNodeTable(nodeId: string): Promise<NodeTable>;
   defineTable(input: DefineTableInput): Promise<NodeTable>;
   appendTableRows(input: AppendTableRowsInput): Promise<AppendTableRowsResult>;
+  // Changing the header of a table that already has one (#135). The mapping is explicit — every new
+  // column names the current one whose cells fill it, or `null` for an empty one — because a new
+  // header without it would reinterpret every stored row under names nobody matched to the old ones.
+  //
+  // ⚠️ `baseVersionId` is the `versionId` the mapping was written against, and the server refuses
+  // with `version_conflict` when the table has moved on. Not optional: a mapping onto a header
+  // somebody else has since changed would move the wrong cells, silently.
+  redefineTable(input: RedefineTableInput): Promise<NodeTable>;
 
   // Walks the browser through the portal's OAuth flow without asking anybody anything: Gate is the
   // identity provider Cloudflare Access consumes, so a signed-in person is already known there

package/src/data/request-refusal/refusal-notice.tsx

@@ -0,0 +1,36 @@
+import type { Refusal } from "@/data/request-refusal/request-refusal.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+
+/**
+ * What a refusal is told with, on every surface that has one.
+ *
+ * ⚠️ A refusal is not a failure, and the difference is the whole of #430. Somebody whose share was
+ * revoked was left in front of "Loading…" — the worst answer of all, because it says the program is
+ * still working. They get a sentence and no retry button: the answer was final, and a button that
+ * changes nothing is an invitation to keep waiting.
+ *
+ * ⚠️ One sentence for `404`, whichever of its two reasons applies. Intel answers the same status
+ * for "no such node" and "not for you" on purpose — `requireVisible` in
+ * `packages/api/src/nodes/nodes.ts` — and a screen that told them apart would undo that from the
+ * other side.
+ *
+ * ⚠️ One function rather than a block per branch, because two answers to one question on one
+ * surface IS #445. A screen's halves — the empty level, the selected item, the view beside it — are
+ * asked the same thing, and copies drift.
+ *
+ * ⚠️ **Why this became shared here and not one copy earlier.** `nodes.tsx` (#445) and `flows.tsx`
+ * (#557) each carried an identical version, and #557 wrote its reason on the second one: this
+ * repository builds an abstraction after the third time it hurts, not the second. #568 is the third
+ * time — `?view=graph` and `?view=runs` are the third and fourth surface asking for the same
+ * sentence — so what would have been a third copy is this file. The rule did not bend; it was met.
+ */
+export function RefusalNotice({ refusal }: { refusal: Refusal }) {
+  const i18n = useI18n();
+  return (
+    <div role="status" className="grid flex-1 place-items-center p-8 text-center text-sm">
+      <p className="max-w-sm text-muted-foreground">
+        {i18n.t(refusal === "no-permission" ? "common.noPermission" : "common.noAccess")}
+      </p>
+    </div>
+  );
+}

package/src/entry-picker/entry-picker.tsx

@@ -92,6 +92,24 @@ export function EntryPicker({
   }, [wanted]);
   const eligible = useMemo(() => nodes.filter(pickable), [nodes, pickable]);
 
+  /**
+   * Whether an entry stands on the picker's start level.
+   *
+   * ⚠️ The root is not `parentId === null` but the upper edge of what the reader may see — the same
+   * rule #429 gave the server in `levelPredicate`, at the second surface (#447). A recipient whose
+   * only access is a NESTED share carries a `parentId` pointing at a folder that is not in the list
+   * at all: under the old rule their start level was empty and STAYED empty, because the folder
+   * that would open it can never be clicked. Only searching reached them.
+   *
+   * ⚠️ Nothing is added by this. The list is what `getNodeGraph()` — and `listFlows()` where flows
+   * were asked for — answered, and the answer is already the authorized one. What changes is only
+   * which level an entry stands on.
+   */
+  const rooted = useMemo(() => {
+    const present = new Set(nodes.map((node) => node.id));
+    return (entry: PickerEntry) => entry.parentId === null || !present.has(entry.parentId);
+  }, [nodes]);
+
   // Searching looks at every eligible node wherever it sits; browsing looks at one level. The two
   // are the same list seen two ways, which is why a result can be picked from either.
   const searching = query.trim().length > 0;
@@ -100,8 +118,10 @@ export function EntryPicker({
       const needle = query.trim().toLowerCase();
       return eligible.filter((node) => node.title.toLowerCase().includes(needle)).slice(0, 50);
     }
-    return nodes.filter((node) => node.parentId === openFolder);
-  }, [searching, query, eligible, nodes, openFolder]);
+    return nodes.filter((node) =>
+      openFolder === null ? rooted(node) : node.parentId === openFolder,
+    );
+  }, [searching, query, eligible, nodes, openFolder, rooted]);
 
   // The way back up, as the chain of folders that leads to the open one.
   const trail = useMemo(() => {
@@ -111,10 +131,13 @@ export function EntryPicker({
       const folder = nodes.find((node) => node.id === current);
       if (!folder) break;
       chain.unshift(folder);
-      current = folder.parentId;
+      // ⚠️ The chain ends where the start level begins, and by the same rule that decides it. A
+      // folder at the upper edge has an ancestor the reader cannot see; walking into it would look
+      // for a level that does not exist here, and the "top" button above leads to this one.
+      current = rooted(folder) ? null : folder.parentId;
     }
     return chain;
-  }, [openFolder, nodes]);
+  }, [openFolder, nodes, rooted]);
 
   const chosen = nodes.find((node) => node.id === value) ?? null;
 

package/src/flow-runs/flow-runs.tsx

@@ -2,6 +2,8 @@ import type { FlowRunSummary } from "@anchrd/intel-contract/flow-run";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronRight, CornerDownRight } from "lucide-react";
 import { useState } from "react";
+import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
+import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -45,6 +47,11 @@ export function FlowRuns({ flowId }: { flowId: string }) {
     getNextPageParam: (last) => last.nextCursor,
   });
   const items = runs.data?.pages.flatMap((page) => page.items) ?? [];
+  // ⚠️ This list's own refusal, told here rather than upstream (#568). The screen above answers
+  // whether the flow may be opened; `listFlowRuns` answers whether its history may be read, and it
+  // can refuse on its own. Everything that is not a refusal keeps the sentence and the button
+  // below — a `502` really can answer differently next time.
+  const refusal = refusalOf(runs.error);
 
   return (
     <section aria-label={i18n.t("runs.title")} className="flex min-h-0 flex-1 flex-col">
@@ -68,7 +75,8 @@ export function FlowRuns({ flowId }: { flowId: string }) {
         {runs.isPending && (
           <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
         )}
-        {runs.isError && (
+        {refusal && <RefusalNotice refusal={refusal} />}
+        {runs.isError && !refusal && (
           <div role="alert" className="space-y-3 text-sm">
             <p className="text-destructive">{i18n.t("runs.failedToLoad")}</p>
             <button