@anchrd/intel 0.59.0

package/ui/src/node-table/node-table.tsx

@@ -0,0 +1,107 @@
+import type { Node } from "@contract/node.ts";
+import { useQuery } from "@tanstack/react-query";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRowScrollArea } from "@/title-row/title-row.tsx";
+
+/**
+ * A table as a grid (#40).
+ *
+ * Reading is the whole of the first cut: there is no cell editor, and rows arrive through
+ * `node_table_row_create` — the point of the kind is that a flow or an MCP client fills it
+ * without a person retyping anything. Editing in the grid is anchrd/intel#165.
+ *
+ * ⚠️ The rows are the server's answer, parsed by the server's one CSV reader. A second reader here
+ * would eventually disagree with it about a quoted comma, and the grid would then show something
+ * the export does not contain.
+ */
+export function NodeTablePanel({ node }: { node: Node }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const table = useQuery({
+    queryKey: ["node-table", node.id],
+    queryFn: () => data.getNodeTable(node.id),
+  });
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* ⚠️ This used to be a second bar of its own, directly under the title line (#54): two
+          headers stacked, and the table starting a whole row lower for it. A table is one node kind
+          among four, not a screen with its own chrome — so the count goes beside the title as a
+          quiet word. It is rendered from here rather than from the screen because this is where the
+          query lives; the screen would otherwise have to load a table it does not show.
+
+          ⚠️ The CSV export used to stand here too, as a button WITH TEXT beside two icon buttons.
+          #454 moved it into the title line's three-dot menu, and #532 dropped it there: the bundle
+          export beside it already writes the table into the zip as `<title>.csv` (`bundle.ts`), so
+          the two entries handed out the same bytes. Taking a table home is `Export`, here and
+          nowhere else. */}
+      <ActionSlot name="title-meta">
+        {table.data
+          ? i18n.t("node.table.summary", {
+              rows: table.data.rows.length,
+              columns: table.data.columns.length,
+            })
+          : ""}
+      </ActionSlot>
+      {table.isPending ? (
+        <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      ) : table.isError ? (
+        <div role="alert" className="space-y-3 p-6 text-sm">
+          <p className="text-destructive">{i18n.t("node.loadFailed")}</p>
+          <button
+            type="button"
+            onClick={() => void table.refetch()}
+            className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      ) : table.data.columns.length === 0 ? (
+        <p className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
+          {i18n.t("node.table.undefined")}
+        </p>
+      ) : (
+        <TitleRowScrollArea className="min-h-0 flex-1 overflow-auto">
+          <table className="w-full border-collapse text-sm">
+            <caption className="sr-only">{node.title}</caption>
+            <thead className="sticky top-0 bg-card">
+              <tr>
+                {table.data.columns.map((column) => (
+                  // Column names are distinct on every path that writes a table — `DefineTableInput`,
+                  // `RedefineTableInput` and, since #322, the bundle import, which used to walk past
+                  // both — so the name is the key and nothing has to fall back to a position.
+                  <th
+                    key={column}
+                    scope="col"
+                    className="border-b border-r px-3 py-2 text-left font-medium whitespace-nowrap"
+                  >
+                    {column}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {table.data.rows.map((row, rowIndex) => (
+                // ⚠️ Rows carry no identity of their own. A table is an append-only list of text
+                // and its position is the only thing that names a row — there is no id to key on,
+                // and inventing one would be inventing data.
+                // biome-ignore lint/suspicious/noArrayIndexKey: an appended row has no other key
+                <tr key={rowIndex} className="even:bg-muted/40">
+                  {table.data.columns.map((column, cellIndex) => (
+                    <td key={column} className="border-b border-r px-3 py-2 align-top">
+                      {row[cellIndex] ?? ""}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {table.data.rows.length === 0 ? (
+            <p className="p-6 text-sm text-muted-foreground">{i18n.t("node.table.empty")}</p>
+          ) : null}
+        </TitleRowScrollArea>
+      )}
+    </div>
+  );
+}

package/ui/src/nodes/nodes.tsx

@@ -0,0 +1,240 @@
+import type { Node } from "@contract/node.ts";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { lazy, Suspense } from "react";
+import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { ViewMenu } from "@/app/view-menu/view-menu.tsx";
+import { BoardPanel } from "@/board/board-panel/board-panel.tsx";
+import { BoardTitleRow } from "@/board/board-title-row/board-title-row.tsx";
+import { RefusalNotice } from "@/data/request-refusal/refusal-notice.tsx";
+import { refusalOf } from "@/data/request-refusal/request-refusal.ts";
+import { FolderContents } from "@/folder-contents/folder-contents.tsx";
+import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { NodeTablePanel } from "@/node-table/node-table.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { graphViewFrom, selectedFrom, viewOf } from "@/router/selection-search.ts";
+import { TitleRow, TitleRowFrame } from "@/title-row/title-row.tsx";
+
+const NodeEditor = lazy(async () => ({
+  default: (await import("@/node-editor/node-editor.tsx")).NodeEditor,
+}));
+const NodeSource = lazy(async () => ({
+  default: (await import("@/node-source/node-source.tsx")).NodeSource,
+}));
+const AttachmentViewer = lazy(async () => ({
+  default: (await import("@/attachment-viewer/attachment-viewer.tsx")).AttachmentViewer,
+}));
+
+/**
+ * A document is markdown, and since #820 it can be read and written as what it is. The editor
+ * stands first: it is the view a plain link means.
+ */
+const DocumentViews = ["editor", "code"] as const;
+
+/**
+ * Which kinds are a document, and therefore have a source at all.
+ *
+ * ⚠️ The same list the panel below falls through to: a folder draws its contents, an attachment its
+ * preview, a table and a board their own panel, and what is left is a text. A card is one too — it
+ * is not reached from this screen in the ordinary way, but a link straight to it lands here, and a
+ * switch that appeared for it without a view behind it would be worse than no switch.
+ */
+function writesMarkdown(kind: Node["kind"]): boolean {
+  return kind === "document" || kind === "task";
+}
+
+export function Nodes() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  // The tree in the sidebar and the header search both name what to open through `?select=`, so this
+  // screen has no selection of its own to keep in step with them.
+  const selection = useRouterState({
+    select: (state) => ({
+      id: selectedFrom(state.location.search),
+      graph: graphViewFrom(state.location.search),
+      // Which of a document's two views is showing (#820). The editor is the first of them and
+      // therefore the absence of the parameter, so every link written before it keeps its meaning.
+      view: viewOf(state.location.search, DocumentViews),
+    }),
+  });
+  const selectedId = selection.id;
+  const document = useQuery({
+    queryKey: ["node", selectedId],
+    queryFn: () => data.getNode(selectedId ?? ""),
+    enabled: Boolean(selectedId),
+  });
+  const selected = document.data?.node ?? null;
+  // ⚠️ Off the ERROR, not off the absence of data: a query that has not answered is not a query that
+  // answered "no" (`packages/intel/ui/CLAUDE.md`). While the request is in flight there is no refusal to
+  // report, and the loading line below stays.
+  const refusal = refusalOf(document.error);
+  /**
+   * The top level of the tree — the same query the sidebar already holds, by the same key and the
+   * same function, so this is a second reader of one cache entry rather than a second request.
+   *
+   * ⚠️ The screen needs a source of its own because the one above cannot answer here: the refusal
+   * branch hangs on `["node", selectedId]`, and without a selection that query is not enabled at
+   * all. The empty state was therefore reached BEFORE anything had been asked — and it invited the
+   * reader to select something, which is exactly what somebody without `intel.nodes.read` cannot
+   * do. The sidebar beside it has said so since #430; two surfaces, two answers (#445).
+   */
+  const rootLevel = useQuery({
+    queryKey: treeLevelKey(null),
+    queryFn: () => data.listTreeChildren(null),
+    enabled: selectedId === null,
+  });
+  // ⚠️ Off the ERROR, and here that is half the ticket rather than a detail. A sentence about a
+  // missing permission, shown while the answer is still travelling, claims a refusal nobody has
+  // spoken yet — the mistake from #350, and `packages/intel/ui/CLAUDE.md` has the rule: a missing answer
+  // is a reason to say less, never to refuse more. So the negative sentence hangs off the refusal;
+  // until one arrives, what stands is the invitation, which claims nothing about permission.
+  const rootRefusal = refusalOf(rootLevel.error);
+  // A folder shows its contents as a graph, and so does the root of the tree (#19). A document has
+  // nothing to draw — which is why the switch is not offered on one rather than offered and empty.
+  const graphable = selectedId === null || selected?.kind === "folder";
+  const relations = useQuery({
+    queryKey: ["relation-graph", "folder", selectedId],
+    queryFn: () => data.getRelationGraph({ of: "folder", folderId: selectedId }),
+    enabled: graphable && selection.graph,
+  });
+  return (
+    <TitleRowFrame className="flex h-full min-h-0 flex-col">
+      <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
+        {/* ⚠️ Only the root draws its graph on its own. A folder's graph hangs *under* the folder's
+            title line rather than in place of it (#58): the line is the one place its menu lives,
+            and a folder that could only be renamed while the graph happened to be switched off
+            would be a folder one cannot rename. */}
+        {/* ⚠️ #454 took the view switch out of the GLOBAL header — there it applied to the whole
+            application although it is a view onto the selected item. For an item it now stands in
+            that item's title line.
+
+            ⚠️ The root has no title line, and that is exactly why it gets a row of its own here.
+            Without it the graph of the WHOLE tree would have been unreachable after the move — the
+            switch was its only way in and out. Moving a control must not abolish a view; that would
+            be a decision the ticket did not contain. */}
+        {selectedId === null ? (
+          <div className="flex shrink-0 items-center justify-end gap-2 border-b px-6 py-2">
+            <ViewMenu />
+          </div>
+        ) : null}
+        {selectedId === null && selection.graph ? (
+          <GraphPane
+            query={relations}
+            select={(node) =>
+              void navigate({
+                to: node.kind === "flow" ? "/flows" : "/nodes",
+                search: { select: node.id },
+              })
+            }
+          />
+        ) : !selectedId ? (
+          rootRefusal ? (
+            <RefusalNotice refusal={rootRefusal} />
+          ) : (
+            <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
+              {i18n.t("node.select")}
+            </div>
+          )
+        ) : document.isPending ? (
+          <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+        ) : refusal ? (
+          <RefusalNotice refusal={refusal} />
+        ) : document.isError || !selected ? (
+          <div role="alert" className="grid flex-1 place-items-center p-8 text-center text-sm">
+            <div className="space-y-3">
+              <p className="text-destructive">{i18n.t("node.loadFailed")}</p>
+              <button
+                type="button"
+                onClick={() => void document.refetch()}
+                className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {i18n.t("common.retry")}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* The document's own line: its name, and beside it only what acts on this one
+                document. What the four loose icons used to do is now one menu (#24) — and since #58
+                this line is the only place that menu appears at all, for every kind including a
+                folder, whose whole screen is this line.
+                ⚠️ #454: the view switch now stands HERE. It used to stand in the global header,
+                beside the search — where what applies everywhere stands. But a view is a view onto
+                THIS item, and each switch is drawn only where its views exist: the graph where
+                there is a graph, the source where there is markdown. A kind with one view gets
+                none, or the menu would promise a choice it does not have (#818). */}
+            {/* ⚠️ A board brings its OWN title row, because an open card changes what the line
+                identifies: not the board any more, but where the card sits on it. It is the same
+                `TitleRow` underneath, only with a path in place of the name (#692). */}
+            {selected.kind === "board" ? (
+              <BoardTitleRow node={selected} />
+            ) : (
+              <TitleRow title={selected.title} target={{ type: "node", node: selected }}>
+                {graphable ? <ViewMenu /> : null}
+                {/* ⚠️ A document has no graph and a folder has no source, so the two switches are
+                    never both drawn — which is also why neither has to know about the other. */}
+                {writesMarkdown(selected.kind) ? <ViewMenu views={DocumentViews} /> : null}
+              </TitleRow>
+            )}
+            {graphable && selection.graph ? (
+              <GraphPane
+                query={relations}
+                select={(node) =>
+                  void navigate({
+                    to: node.kind === "flow" ? "/flows" : "/nodes",
+                    search: { select: node.id },
+                  })
+                }
+              />
+            ) : selected.kind === "folder" ? (
+              <FolderContents folderId={selected.id} />
+            ) : selected.kind === "attachment" ? (
+              <Suspense
+                fallback={
+                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+                }
+              >
+                <AttachmentViewer document={document.data} />
+              </Suspense>
+            ) : selected.kind === "table" ? (
+              <NodeTablePanel node={selected} />
+            ) : selected.kind === "board" ? (
+              <BoardPanel node={selected} />
+            ) : document.data ? (
+              <Suspense
+                fallback={
+                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+                }
+              >
+                {selection.view === "code" ? (
+                  <NodeSource
+                    key={document.data.node.id}
+                    data={data}
+                    document={document.data}
+                    i18n={i18n}
+                    onSaved={(saved) => {
+                      queryClient.setQueryData(["node", selected.id], saved);
+                    }}
+                  />
+                ) : (
+                  <NodeEditor
+                    key={document.data.node.id}
+                    data={data}
+                    document={document.data}
+                    i18n={i18n}
+                    onSaved={(saved) => {
+                      queryClient.setQueryData(["node", selected.id], saved);
+                    }}
+                  />
+                )}
+              </Suspense>
+            ) : null}
+          </>
+        )}
+      </section>
+    </TitleRowFrame>
+  );
+}

package/ui/src/rename-resource/rename-resource.ts

@@ -0,0 +1,80 @@
+import type { Flow } from "@contract/flow.ts";
+import type { Node } from "@contract/node.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { allTreeLevelsKey } from "@/app/tree-move/tree-move.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/** The two things that carry a title, and the two doors that change one. */
+export type RenameTarget = { type: "node"; node: Node } | { type: "flow"; flow: Flow };
+
+/**
+ * Everything a change to one resource can make stale (#823).
+ *
+ * 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 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.
+ *
+ * ⚠️ It lives here rather than in either caller because there are now TWO ways to rename: the
+ * menu's dialog and the tree's own row (#823). A copy of this list is a second place for one rule
+ * to drift, and the direction it drifts in is silent — a name that stays right on the screen the
+ * renamer is looking at and wrong on the three they are not.
+ */
+export function useResourceRefresh(target: RenameTarget): () => Promise<void> {
+  const queryClient = useQueryClient();
+  const id = target.type === "flow" ? target.flow.id : target.node.id;
+  return async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: allTreeLevelsKey }),
+      queryClient.invalidateQueries({
+        queryKey: target.type === "flow" ? ["flow", id] : ["node", id],
+      }),
+      queryClient.invalidateQueries({
+        queryKey: [target.type === "flow" ? "flows" : "node-graph"],
+      }),
+      queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+    ]);
+  };
+}
+
+/**
+ * One new title, through the door the thing behind it has (#823).
+ *
+ * ⚠️ `baseUpdatedAt` is not optional decoration. Renaming takes the same conflict route as every
+ * other change, or two people renaming at once end with one of them silently overwritten — and the
+ * one who loses never learns that they did.
+ *
+ * ⚠️ A flow and a document are two doors, not one with a flag: `updateFlow` and `updateNode` write
+ * different tables and answer to different capabilities (ADR-0004 §1).
+ */
+export function useResourceRename(target: RenameTarget, onRenamed?: () => void) {
+  const { data } = useIntelRouterContext();
+  const refresh = useResourceRefresh(target);
+  return useMutation({
+    mutationFn: async (next: string) => {
+      if (target.type === "flow") {
+        await data.updateFlow({
+          flowId: target.flow.id,
+          baseUpdatedAt: target.flow.updatedAt,
+          title: next,
+          idempotencyKey: crypto.randomUUID(),
+        });
+        return;
+      }
+      await data.updateNode({
+        nodeId: target.node.id,
+        baseUpdatedAt: target.node.updatedAt,
+        title: next,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    },
+    onSuccess: async () => {
+      onRenamed?.();
+      await refresh();
+    },
+  });
+}

package/ui/src/resolved-names/resolved-names.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * The names behind a set of user ids a screen is currently showing (#700).
+ *
+ * ⚠️ **One request for the whole screen, not one per person.** A hook that resolved a single id
+ * would be called once per row and once per circle, and a board with forty cards would open forty
+ * requests for four distinct people. The ids are collected where they are already all in one
+ * place — the board view, the access summary — and asked for together.
+ *
+ * ⚠️ **Not a board thing**, though a board was the first to need it: `directory_resolve` names ids
+ * the caller already holds, and any screen that draws people can wrap itself in this (#803). It
+ * lives outside `board/` for that reason — the name that suggested otherwise cost a duplicated
+ * door once already (#751).
+ *
+ * ⚠️ **Absent is not an error.** An id that cannot be named is missing from the answer, and the
+ * map simply has no entry for it. Callers fall back to the same wording they used before names
+ * existed at all; nobody ever draws the raw id (#258).
+ */
+const ResolvedNames = createContext<ReadonlyMap<string, string> | null>(null);
+
+export function ResolvedNamesProvider({
+  ids,
+  children,
+}: {
+  ids: readonly (string | null)[];
+  children: ReactNode;
+}) {
+  const { data } = useIntelRouterContext();
+  // Sorted and de-duplicated so that the same screen produces the same key twice running: an
+  // unstable key would refetch on every render that reorders its rows, which a drag does
+  // constantly.
+  const wanted = useMemo(
+    () => [...new Set(ids.filter((id): id is string => id !== null))].sort(),
+    [ids],
+  );
+  const query = useQuery({
+    queryKey: ["resolved-names", wanted],
+    // ⚠️ Not `enabled: wanted.length > 0` alone — the queryFn must never be reached with an empty
+    // list, because the contract refuses it (`min(1)`) and the refusal would surface as a broken
+    // board rather than as the empty answer it means.
+    enabled: wanted.length > 0,
+    queryFn: async () => await data.resolveNames(wanted),
+    staleTime: 5 * 60 * 1000,
+  });
+  const names = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const person of query.data?.items ?? []) map.set(person.id, person.name);
+    return map;
+  }, [query.data]);
+  return <ResolvedNames.Provider value={names}>{children}</ResolvedNames.Provider>;
+}
+
+/**
+ * The name behind one id, or `null` where this browser cannot say.
+ *
+ * ⚠️ Outside a provider this answers `null` for everybody, which is exactly the behaviour every
+ * caller already handles. A screen that forgets the provider shows what it showed before this
+ * existed; it does not break, and it does not leak an id.
+ */
+export function useResolvedName(id: string | null): string | null {
+  const names = useContext(ResolvedNames);
+  if (id === null) return null;
+  return names?.get(id) ?? null;
+}

package/ui/src/resource-error.ts

@@ -0,0 +1,33 @@
+/**
+ * Which sentence a refused change to a resource is told with.
+ *
+ * ⚠️ A conflict is the one that must not be swallowed: every write in the product names the state it
+ * was made against — `baseUpdatedAt` for a record, `baseVersionId` for a table — and turns a parallel
+ * edit into a refusal. A refusal nobody words is indistinguishable from a change that went through.
+ *
+ * ⚠️ Flat and on its own since #531, where the table's column dialog became the second reader. It
+ * used to live in `resource-menu.tsx`; importing it from there would have made the menu and the
+ * dialog import each other, and a cycle is a thing that works until the bundler splits differently.
+ */
+export function resourceErrorKey(error: unknown): string {
+  const code =
+    typeof error === "object" && error !== null && "code" in error
+      ? String((error as { code: unknown }).code)
+      : null;
+  switch (code) {
+    // ⚠️ `version_conflict` is the table's word for the same event (`nodes.ts`, `tableStateFor`):
+    // the positions or the mapping were read from a version that is no longer the newest. It is the
+    // conflict sentence and not the general one — "reload it and try again" is exactly the way out,
+    // and letting it fall through to `resource.failed` would tell somebody to reload in the same
+    // breath as claiming nobody knows what happened.
+    case "version_conflict":
+    case "update_conflict":
+    case "flow_update_conflict":
+      return "resource.conflict";
+    case "node_forbidden":
+    case "flow_edit_forbidden":
+      return "resource.forbidden";
+    default:
+      return "resource.failed";
+  }
+}