@anchrd/intel 0.59.0

package/ui/src/flows/node-icon/node-icon.ts

@@ -0,0 +1,34 @@
+import type { FlowNode } from "@contract/flow.ts";
+import {
+  CircleDot,
+  CirclePlay,
+  FileText,
+  Folder,
+  GitBranch,
+  Paperclip,
+  Sparkles,
+  Table,
+  Workflow,
+  Wrench,
+} from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
+
+// The canvas card and the palette entry have to show the same symbol for the same kind — a step that
+// looks one way in the bar and another on the graph is two things to learn instead of one. The map
+// lives apart from both so neither has to import the other.
+export type NodeIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+export const nodeIcon: Record<FlowNode["kind"], NodeIcon> = {
+  trigger: CirclePlay,
+  instruction: Sparkles,
+  condition: GitBranch,
+  subflow: Workflow,
+  // The four links wear the symbol their kind wears in the tree, so a document is the same shape
+  // wherever it is seen — the sidebar, the picker and the canvas do not each teach their own.
+  folder: Folder,
+  document: FileText,
+  upload: Paperclip,
+  table: Table,
+  tool: Wrench,
+  output: CircleDot,
+};

package/ui/src/flows/node-palette/node-palette.tsx

@@ -0,0 +1,214 @@
+import { flowNodeLayer } from "@contract/flow.ts";
+import { Plus, X } from "lucide-react";
+import { Fragment, useId, useRef, useState } from "react";
+import { type NodeIcon, nodeIcon } from "@/flows/node-icon/node-icon.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils.ts";
+import type { NodePaletteProps, PaletteKind } from "./node-palette.types.ts";
+
+const storageKey = "intel.flow-palette";
+
+// ⚠️ Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+// typeof check — the same reason `sidebar-preferences` guards it that way. Losing the preference is
+// acceptable; losing the editor is not.
+function readOpen(): boolean {
+  try {
+    return typeof window !== "undefined" && window.localStorage.getItem(storageKey) === "open";
+  } catch {
+    return false;
+  }
+}
+
+function writeOpen(open: boolean): void {
+  try {
+    if (typeof window !== "undefined")
+      window.localStorage.setItem(storageKey, open ? "open" : "closed");
+  } catch {}
+}
+
+// Closed is the default, and the preference is written through: the bar is chrome, exactly like the
+// sidebar whose open state already survives a reload. Someone who builds flows all day would
+// otherwise re-open it on every load, and the ticket's own reason for collapsing it — the canvas
+// belongs to the graph — is just as true for someone who never opens it.
+export function usePaletteOpen(): [boolean, (open: boolean) => void] {
+  const [open, setOpen] = useState(readOpen);
+  return [
+    open,
+    (next: boolean) => {
+      setOpen(next);
+      writeOpen(next);
+    },
+  ];
+}
+
+export function NodePalette<K extends PaletteKind>({
+  kinds,
+  open,
+  setOpen,
+  add,
+  disabledReason,
+}: NodePaletteProps<K>) {
+  const i18n = useI18n();
+  const listId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  // A toolbar carries one tab stop, so the group is entered with a single Tab and left with the
+  // next one instead of costing seven.
+  const [active, setActive] = useState(0);
+
+  // The focus goes back where it came from, so closing does not drop the caret at the top of the
+  // document and make the next Tab start over from the page.
+  function close() {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function entries(): HTMLButtonElement[] {
+    return [
+      ...(listRef.current?.querySelectorAll<HTMLButtonElement>("button[data-palette-item]") ?? []),
+    ];
+  }
+
+  // A disabled entry is stepped over rather than focused: its reason is already on the entry, and
+  // stopping there would only be a dead end for the keyboard.
+  function focusEntry(from: number, delta: number) {
+    const items = entries();
+    if (items.length === 0) return;
+    for (let step = 1; step <= items.length; step += 1) {
+      const index = (((from + delta * step) % items.length) + items.length) % items.length;
+      const item = items[index];
+      if (item && !item.disabled) {
+        setActive(index);
+        item.focus();
+        return;
+      }
+    }
+  }
+
+  function onListKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    const forward = event.key === "ArrowDown" || event.key === "ArrowRight";
+    const backward = event.key === "ArrowUp" || event.key === "ArrowLeft";
+    if (!forward && !backward) return;
+    event.preventDefault();
+    const items = entries();
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    focusEntry(current < 0 ? 0 : current, forward ? 1 : -1);
+  }
+
+  function onTriggerKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    if (!open) return;
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      focusEntry(-1, 1);
+    }
+  }
+
+  // Open, the trigger is the first segment of the bar itself rather than a second box above it: one
+  // closes a bar where it is. Two details carry that and neither is decoration:
+  //
+  // ⚠️ The negative margin is the frame's own padding plus its border. Opening hands the frame from
+  // the trigger to the row around it, and a frame drawn inside would push the trigger down and right
+  // by exactly that sum. The margin lets the row grow outwards instead, so the 36px one clicks stays
+  // on the same pixel open and collapsed. Change `p-1` and this has to change with it.
+  //
+  // ⚠️ The toolbar stays an element of its own inside the row: it is what `aria-controls` names and
+  // what the arrow keys walk, and the trigger must not become an eighth entry in that ring.
+  //
+  // The `w-max` that used to stand here went with the structure it guarded. While the bar was a
+  // block below the trigger, the shrink-wrapped box took the collapsed 36px as its maximum and
+  // folded the entries into a column; one flex row is sized from its content in either state, which
+  // was measured at 1280px and at 420px with the class and without it (#55).
+  return (
+    <div
+      className={cn(
+        "absolute left-4 top-4 z-10 max-w-[calc(100%-2rem)]",
+        open &&
+          "-m-[calc(0.25rem+1px)] flex flex-wrap items-center gap-1 rounded-lg border bg-card/95 p-1 shadow-sm backdrop-blur",
+      )}
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-expanded={open}
+        aria-controls={listId}
+        onClick={() => (open ? close() : setOpen(true))}
+        onKeyDown={onTriggerKeyDown}
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-card-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+          !open && "border bg-card/95 shadow-sm backdrop-blur",
+        )}
+      >
+        {open ? (
+          <X aria-hidden="true" className="size-4" />
+        ) : (
+          <Plus aria-hidden="true" className="size-4" />
+        )}
+        <span className="sr-only">{i18n.t(open ? "flows.closePalette" : "flows.addNode")}</span>
+      </button>
+      {/* Over the canvas rather than pushing it: the graph is a spatial workspace, and resizing the
+          viewport would shift every node under the pointer each time the bar opens. It is dismissed
+          instead — the trigger, Escape, or a click on the canvas. */}
+      {open && (
+        <div
+          ref={listRef}
+          id={listId}
+          role="toolbar"
+          aria-orientation="horizontal"
+          aria-label={i18n.t("flows.nodePalette")}
+          onKeyDown={onListKeyDown}
+          // `min-w-0` so a narrow bar makes the entries wrap among themselves instead of forcing the
+          // whole row wider than the canvas allows.
+          className="flex min-w-0 max-w-full flex-wrap gap-1"
+        >
+          {kinds.map((kind, index) => {
+            const Icon: NodeIcon = nodeIcon[kind];
+            const reason = disabledReason?.(kind) ?? null;
+            // ⚠️ A separator before the first entry of each layer after the first (D25). It is
+            // decoration, not structure: the toolbar's keyboard walks `[data-palette-item]`, so a
+            // divider in between must not be one — otherwise the arrows would stop on a line.
+            const opensLayer =
+              index > 0 && flowNodeLayer[kind] !== flowNodeLayer[kinds[index - 1] ?? kind];
+            return (
+              <Fragment key={kind}>
+                {opensLayer ? (
+                  <span
+                    aria-hidden="true"
+                    className="mx-1 my-1.5 w-px self-stretch bg-border"
+                    title={i18n.t(`flows.layer.${flowNodeLayer[kind]}`)}
+                  />
+                ) : null}
+                <button
+                  type="button"
+                  data-palette-item=""
+                  disabled={reason !== null}
+                  title={reason ?? undefined}
+                  tabIndex={index === active ? 0 : -1}
+                  onClick={() => {
+                    setActive(index);
+                    add(kind);
+                  }}
+                  // `h-9` is the trigger's height: sharing one row only reads as one row if the entries
+                  // start on the trigger's top edge instead of floating in the middle of it.
+                  className="inline-flex h-9 items-center gap-1.5 rounded-md px-2 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+                >
+                  <Icon aria-hidden="true" className="size-3.5" />
+                  {i18n.t(`flows.node.${kind}`)}
+                </button>
+              </Fragment>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/flows/node-palette/node-palette.types.ts

@@ -0,0 +1,15 @@
+import type { FlowNode } from "@contract/flow.ts";
+
+export type PaletteKind = FlowNode["kind"];
+
+// Generic over the kinds it is given: the caller decides which subset the bar offers, and `add` is
+// handed back exactly that subset rather than "any node kind" it would have to re-narrow.
+export interface NodePaletteProps<K extends PaletteKind = PaletteKind> {
+  kinds: readonly K[];
+  open: boolean;
+  setOpen(open: boolean): void;
+  add(kind: K): void;
+  // Why an entry is off, in words, or `null` when it is not. One function rather than a flag and a
+  // string: an entry that is greyed out without a reason is just a broken button.
+  disabledReason?(kind: K): string | null;
+}

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

@@ -0,0 +1,321 @@
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { type ReactNode, useEffect, useState } from "react";
+import { effectiveAccessQuery, ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
+import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { folderContentsOf } from "@/folder-index/folder-index.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { iconFor } from "@/kind-icon.ts";
+import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
+import { TitleRowScrollArea } from "@/title-row/title-row.tsx";
+
+// The same record the menu is handed everywhere else, read off a level row. A re-labelling, never a
+// second source of truth — a rename works on the whole record, not on a summary of it.
+function targetOf(entry: TreeEntry): ResourceTarget {
+  return entry.type === "flow"
+    ? { type: "flow", flow: entry.flow }
+    : { type: "node", node: entry.node };
+}
+
+/**
+ * Whose access a level row shows (#817).
+ *
+ * The function exists because two places need the same answer — the cell that draws the summary,
+ * and the table that waits for every one of them before it draws itself. Two expressions would
+ * share nothing but their author's intention, and one of them would eventually watch a key the
+ * other never asks for.
+ *
+ * ⚠️ For a FLOW row it answers with the folder the flow lies in, and that is carried over from
+ * before this ticket rather than decided in it. It is not the whole truth any more: since D51
+ * (`anchrd/intel#530`, amendment to ADR-0004) a flow carries grants of its own, and
+ * `listEffectiveFlowAccess` is the call that would name them. Changing what this column shows is a
+ * different question from making the table load in one piece, so it has a ticket of its own (#844)
+ * rather than a quiet fix in the middle of this one.
+ */
+function accessResourceId(entry: TreeEntry, folderId: string): string {
+  return entry.type === "flow" ? (entry.flow.parentId ?? folderId) : entry.id;
+}
+
+/**
+ * The placeholder rows, and how many there are (#817).
+ *
+ * The count IS this array's length — a separate constant beside it is joined to the widths by
+ * nothing but agreement, and the row that outlives the agreement has no width. The bars shrink from
+ * row to row so the block does not read as one grey rectangle. Same three widths, same `h-4` bar and
+ * same one-skeleton-per-column shape as the Gate half (`anchrd/gate#440`), because the two tables
+ * are supposed to look alike.
+ */
+const skeletonRowWidths = ["w-full", "w-5/6", "w-2/3"];
+
+/**
+ * How long the table holds itself back for the access cells (#817).
+ *
+ * ⚠️ A ceiling, not a timeout: nothing is cancelled when it passes. The table simply stops waiting
+ * and draws itself with whatever the access cells have — which for an undecided row is an empty
+ * cell that fills itself the moment its answer lands. Without the ceiling one slow row would keep a
+ * whole folder off the screen, and the reader would be worse off than with the sentence this
+ * replaced.
+ */
+export const accessWaitMs = 1500;
+
+/**
+ * Whether the table may draw itself yet (#817).
+ *
+ * ⚠️ DECIDED, not answered. The access queries run with `retry: false`, so a refusal is a final
+ * state — waiting for `success` would leave a whole folder off the screen forever because one row
+ * may not be inspected. `status !== "pending"` is both outcomes, and that word is the trap this
+ * ticket is about.
+ *
+ * ⚠️ It is a function of its own because a rendered table cannot tell the two apart. A build that
+ * waited for `success` looks identical on screen — the ceiling below rescues it a second and a half
+ * later and every cell ends up in the same place. Only the CLOCK differs, and a clock is what a
+ * test under load may not measure. Here the difference is a value, and a value can be asserted.
+ */
+export function tableIsReady(
+  accessStatuses: Array<"pending" | "error" | "success">,
+  ceilingPassed: boolean,
+): boolean {
+  return ceilingPassed || accessStatuses.every((status) => status !== "pending");
+}
+
+/**
+ * A folder's own screen: what lies directly in it, as a table.
+ *
+ * ⚠️ It reads the SAME query the sidebar reads for the same folder — `treeLevelKey`, filled by
+ * `listTreeChildren`. Not a second call and not a second cache entry: two readers of one folder that
+ * 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: 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
+ * not read pictures. A column repeating the icon in prose costs the width the title needs.
+ *
+ * ⚠️ The table appears as a whole (#817). Every row used to ask for its own effective access and
+ * draw nothing until the answer arrived, so six rows were six answers trickling in one after
+ * another. The waiting is done here instead, over the very same query keys, so nothing is asked
+ * twice — `useQueries` and the cells below share one cache entry per resource.
+ */
+export function FolderContents({ folderId }: { folderId: string }) {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const navigate = useNavigate();
+  const level = useQuery({
+    queryKey: treeLevelKey(folderId),
+    queryFn: () => data.listTreeChildren(folderId),
+  });
+  // The folder's own text is not one of its contents (#824) — the same reading the tree does, from
+  // the same function, because two answers to "what is in this folder" is how they come to differ.
+  // ⚠️ It has to happen HERE, above the access queries: the folder text is not a row, so it must
+  // not be one of the answers the table waits for either.
+  const entries = folderContentsOf(folderId, level.data ?? []);
+  // ⚠️ The same options object the cells use, from the same factory. The point is the shared cache
+  // entry: this starts the requests while the placeholders are on screen, and the cell that renders
+  // afterwards reads the answer rather than asking again.
+  const access = useQueries({
+    queries: entries.map((entry) =>
+      effectiveAccessQuery(data, {
+        resourceId: accessResourceId(entry, folderId),
+        kind: "node",
+      }),
+    ),
+  });
+  // ⚠️ Both pieces of state below remember WHICH folder they are about rather than a bare `true`,
+  // so opening the next folder invalidates them by itself. A boolean would need a reset beside it,
+  // and a reset that runs one commit late shows the new folder through the old folder's decision.
+  const entryIds = entries.map((entry) => entry.id).join(",");
+
+  // The clock starts when the rows are known, not when the screen mounts: otherwise a slow folder
+  // listing would spend the access budget before a single access query had been sent.
+  const [ceilingFor, setCeilingFor] = useState("");
+  useEffect(() => {
+    if (entryIds === "") return;
+    const timer = setTimeout(() => setCeilingFor(entryIds), accessWaitMs);
+    return () => clearTimeout(timer);
+  }, [entryIds]);
+
+  /**
+   * ⚠️ Once the table is up it stays up, and that is not a nicety (#817).
+   *
+   * Waiting for every row is what the FIRST appearance is about. Afterwards it would be the very
+   * thing this ticket is against: the access queries go pending again whenever the effective-grants
+   * prefix is invalidated, which a single share does to every summary on screen, and an added row
+   * puts one pending query beside four settled ones. Either way the whole folder would blink back
+   * to placeholders — a table that disappears as a whole, which is worse than the trickle it
+   * replaced, because the rows that were readable a moment ago are gone too.
+   *
+   * ⚠️ It is keyed on the FOLDER, not on the row set. Keyed on the rows it dissolves the moment
+   * somebody creates a document in the open folder, which is exactly the case it exists for; the
+   * new row then arrives with an empty access cell that fills itself, and nothing else moves.
+   */
+  const [revealedFor, setRevealedFor] = useState("");
+  const ready =
+    revealedFor === folderId ||
+    tableIsReady(
+      access.map((query) => query.status),
+      ceilingFor === entryIds,
+    );
+  useEffect(() => {
+    if (ready && entryIds !== "") setRevealedFor(folderId);
+  }, [ready, entryIds, folderId]);
+
+  if (level.isError) {
+    return (
+      <p role="alert" className="p-6 text-sm text-destructive">
+        {i18n.t("node.folderFailed")}
+      </p>
+    );
+  }
+  // ⚠️ An empty folder keeps a sentence, unlike an empty row in the tree (#59). A folder IS this
+  // screen: a blank rectangle leaves someone who just created it with nowhere to go, which is the
+  // same reason `tree.empty` survives at the root.
+  if (!level.isPending && entries.length === 0) {
+    return (
+      <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+        {i18n.t("node.folderEmpty")}
+      </div>
+    );
+  }
+
+  if (level.isPending || !ready) {
+    return (
+      <LevelTable i18n={i18n}>
+        {/* The word the sentence used to carry, kept for the readers a pulsing rectangle says
+            nothing to. The placeholder rows themselves are hidden from them: they are a picture of
+            a table, and an accessibility tree that lists twelve empty cells is worse than silence. */}
+        <TableRow className="hover:bg-transparent">
+          <TableCell colSpan={4} className="h-0 p-0">
+            <span role="status" className="sr-only">
+              {i18n.t("common.loading")}
+            </span>
+          </TableCell>
+        </TableRow>
+        {skeletonRowWidths.map((width) => (
+          <TableRow key={width} aria-hidden="true" className="hover:bg-transparent">
+            <TableCell className="px-4 py-2.5">
+              <Skeleton className={`h-4 ${width}`} />
+            </TableCell>
+            <TableCell className="px-4">
+              <Skeleton className={`h-4 ${width}`} />
+            </TableCell>
+            <TableCell className="px-4">
+              <Skeleton className={`h-4 ${width}`} />
+            </TableCell>
+            <TableCell className="w-14 px-3">
+              <Skeleton className="h-4 w-4" />
+            </TableCell>
+          </TableRow>
+        ))}
+      </LevelTable>
+    );
+  }
+
+  return (
+    <LevelTable i18n={i18n}>
+      {entries.map((entry) => {
+        const changed = entry.type === "flow" ? entry.flow.updatedAt : entry.node.updatedAt;
+        const Icon = iconFor(entry);
+        return (
+          <TableRow key={entry.id} className="group/row hover:bg-muted">
+            {/* ⚠️ The button carries the whole cell rather than the cell carrying an onClick.
+                A row that only reacts to a mouse is a row nobody can reach with a keyboard, and
+                a `<tr onClick>` has no name to read out either. */}
+            <TableCell className="p-0">
+              <button
+                type="button"
+                onClick={() =>
+                  void navigate({
+                    to: entry.type === "flow" ? "/flows" : "/nodes",
+                    search: { select: entry.id },
+                  })
+                }
+                className="flex w-full min-w-0 items-center gap-3 px-4 py-2.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+              >
+                {/* The icon gets a tile of its own so five kinds under one another read as a
+                    column, instead of five loose glyphs at five different widths. */}
+                <span
+                  aria-hidden="true"
+                  className="grid size-8 shrink-0 place-items-center rounded-md bg-muted/50 text-muted-foreground transition-colors group-hover/row:bg-accent group-hover/row:text-accent-foreground"
+                >
+                  <Icon className="size-4" />
+                </span>
+                <span className="min-w-0 truncate font-medium group-hover/row:underline">
+                  {entry.title}
+                </span>
+                {/* The icon carries the type on screen; this carries it everywhere else, and
+                    it is why a flow needs no suffix in its name to be told from a document. */}
+                <span className="sr-only">{i18n.t(`node.kind.${entry.kind}`)}</span>
+              </button>
+            </TableCell>
+            <TableCell className="px-4 text-right text-sm text-muted-foreground tabular-nums">
+              <RelativeTime value={changed} />
+            </TableCell>
+            <TableCell className="px-4">
+              <ResourceAccessSummary
+                resourceId={accessResourceId(entry, folderId)}
+                ownerId={entry.type === "flow" ? entry.flow.ownerId : entry.node.ownerId}
+              />
+            </TableCell>
+            {/* ⚠️ The same menu as the title line of the open thing, not a shorter one built
+                for here. #58 collected every action in one place so that place is always the
+                same; a folder listing offering three of the six would be a second place. */}
+            <TableCell className="px-3 text-right">
+              <ResourceMenu target={targetOf(entry)} variant="row" />
+            </TableCell>
+          </TableRow>
+        );
+      })}
+    </LevelTable>
+  );
+}
+
+/**
+ * The chrome both states are drawn in (#817).
+ *
+ * ⚠️ One shell rather than two, and that is what keeps the columns from jumping: the header row
+ * governs the widths and it is the SAME header in both states, over a body whose cell count matches.
+ * Two tables that merely look alike would be two places to change a column in.
+ */
+function LevelTable({ i18n, children }: { i18n: ReturnType<typeof useI18n>; children: ReactNode }) {
+  return (
+    <TitleRowScrollArea className="min-h-0 flex-1 overflow-y-auto p-6">
+      <div className="overflow-hidden rounded-lg border bg-card">
+        <Table>
+          <TableHeader className="[&_tr]:bg-muted/40">
+            <TableRow className="hover:bg-transparent">
+              <TableHead className="h-9 px-4 text-xs tracking-wide uppercase">
+                {i18n.t("common.title")}
+              </TableHead>
+              <TableHead className="h-9 px-4 text-right text-xs tracking-wide uppercase">
+                {i18n.t("node.changed")}
+              </TableHead>
+              <TableHead className="h-9 px-4 text-xs tracking-wide uppercase">
+                {i18n.t("node.access")}
+              </TableHead>
+              {/* A `<th>` with nothing in it leaves the column unnamed for anyone reading the table
+                  by its headers. The word is there; only the eye is spared it. */}
+              <TableHead className="h-9 w-14">
+                <span className="sr-only">{i18n.t("node.rowActions")}</span>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>{children}</TableBody>
+        </Table>
+      </div>
+    </TitleRowScrollArea>
+  );
+}

package/ui/src/folder-index/folder-index.ts

@@ -0,0 +1,55 @@
+import { isFolderIndexTitle } from "@contract/node.ts";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+
+/**
+ * Which row of a folder is the folder's own text, and which rows are its contents (#824).
+ *
+ * ⚠️ **The split happens here and not in the data provider.** The provider answers what the server
+ * said, and the server hides nothing — over MCP an `index` is a document like any other, which is
+ * the point of doing this in the view. A provider that filtered would make the browser's cache a
+ * second, quieter truth about the tree, and the folder's own details panel — which needs the very
+ * row the tree drops — would have to ask again for what it already had.
+ *
+ * ⚠️ **Only a document**, never a folder, a table or a board of that name. What is being served is
+ * a convention about TEXT, and a folder called `index` disappearing into its parent's details is
+ * the same word meaning two things.
+ */
+export function folderIndexOf(
+  parentId: string | null,
+  entries: readonly TreeEntry[],
+): TreeEntry | null {
+  /**
+   * ⚠️ **The top level is not a folder, and the convention does not reach it** (found in review of
+   * #843). A folder shows its own text in its details; the root has no node, no details panel and
+   * no menu — so a document called `index` up there would lose its only row and gain nothing in
+   * exchange, reachable afterwards through the search or a link somebody already had. The rule
+   * lives here rather than in the two callers, because a rule that has to be remembered twice is
+   * one that will be remembered once.
+   */
+  if (parentId === null) return null;
+  const candidates = entries.filter(
+    (entry) =>
+      entry.type === "node" && entry.kind === "document" && isFolderIndexTitle(entry.title),
+  );
+  /**
+   * ⚠️ **Two documents of that name can exist, and exactly ONE of them becomes the folder's text:
+   * the oldest.** The ids are ULIDs, so the smallest is the one written first — the one whose
+   * author meant the convention, before anybody added a second.
+   *
+   * ⚠️ And the others STAY IN THE TREE. That is the answer to "then one of them would be
+   * invisible": a row that no list draws and no menu reaches is a document nobody can move,
+   * archive or even find, and nothing in the folder would say it exists. Two rows called `index`,
+   * one of them the folder's text and one of them an ordinary document, is a state somebody can
+   * see and put right.
+   */
+  return candidates.sort((left, right) => left.id.localeCompare(right.id))[0] ?? null;
+}
+
+/** Everything a folder shows as its contents: its rows, minus the one that is its own text. */
+export function folderContentsOf(
+  parentId: string | null,
+  entries: readonly TreeEntry[],
+): TreeEntry[] {
+  const index = folderIndexOf(parentId, entries);
+  return index === null ? [...entries] : entries.filter((entry) => entry.id !== index.id);
+}