@anchrd/intel-ui 0.22.0 → 0.25.0

package/src/app-root/app-root.tsx

@@ -0,0 +1,109 @@
+import { useQuery } from "@tanstack/react-query";
+import { RouterProvider } from "@tanstack/react-router";
+import { useSyncExternalStore } from "react";
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
+import type { AppRootDeps, RefusalStore } from "./app-root.types.ts";
+
+/**
+ * The one decision this application makes before it draws anything: **is there a session?**
+ *
+ * ⚠️ Without a session there is NO SHELL — not the sidebar, not the header, not the search (#456).
+ * It used to paint first and ask afterwards: the `RouterProvider` started, the shell stood, the
+ * queries went out, and only when the first of them came back 401 did the redirect happen. Between
+ * "painted" and "redirected" lay a full network round trip in which a stranger saw the application.
+ * A slow answer stretched that window arbitrarily, and a route that fires no query at all never
+ * closed it.
+ *
+ * ⚠️ What is NOT claimed: that data would become visible. The api answers 401 and the lists stay
+ * empty. But that one server answer was then the ONLY defence — the client had none. Any surface
+ * that later renders something before the first request (a cache, a `localStorage`, an optimistic
+ * value) would break it without meaning to. And an application that looks as if one were inside it
+ * and contains nothing is the wrong first impression from a product whose business is access
+ * control.
+ *
+ * ⚠️ **This is the file #130 asked for.** The logic sat in `main.tsx`, `main.tsx` had no test, and
+ * therefore none of the eleven tests written for #118 ever touched it: *"the entry point is exactly
+ * the place where 'this is only wiring' sounds most plausible and costs most."* The decision now
+ * lives somewhere a test can call.
+ */
+export function AppRoot({ data, router, refusal }: AppRootDeps) {
+  const refused = useSyncExternalStore(refusal.subscribe, refusal.isRefused, refusal.isRefused);
+  if (refused) return <SignInRefused />;
+  return <SessionGate data={data} router={router} />;
+}
+
+/**
+ * ⚠️ Its own component, and not merged into `AppRoot`: the hook below may only run once a
+ * `QueryClientProvider` is above it, and `refused` has to be answerable without one — the refusal
+ * screen is what stands there when nothing else works.
+ */
+function SessionGate({ data, router }: { data: IntelDataProvider; router: AppRootDeps["router"] }) {
+  const i18n = useI18n();
+  // ⚠️ `retry: false`, deliberately against the client's default policy: this answer is
+  // authoritative in both directions. A 401 is not a hiccup to be retried — the provider's
+  // `onUnauthorized` is already taking the reader to Gate while this promise rejects — and a retry
+  // here would additionally be PAUSED while the tab is unfocused (`packages/ui/CLAUDE.md`), which
+  // is how a guard turns into a permanent "Loading" for somebody looking elsewhere.
+  //
+  // The key is the one `UserFooter` reads, so the shell's own session query is already answered
+  // when it mounts. One question, asked once.
+  const session = useQuery({
+    queryKey: ["session"],
+    queryFn: () => data.getSession(),
+    retry: false,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  // ⚠️ Both the waiting and the failing case render NO shell. The failing one is not the same as
+  // "not signed in": a 401 has already sent the reader away by the time it lands here, so what is
+  // left is a surface that could not be reached at all — and saying that is better than a spinner
+  // that never ends. Neither of them draws a sidebar.
+  if (session.isPending) {
+    return (
+      <div className="grid min-h-dvh place-items-center bg-background p-8">
+        <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+      </div>
+    );
+  }
+  if (session.isError) {
+    return (
+      <div role="alert" className="grid min-h-dvh place-items-center bg-background p-8">
+        <div className="max-w-prose text-center">
+          <p className="text-sm text-muted-foreground">{i18n.t("signIn.unreachable")}</p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="mt-6 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("common.retry")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return <RouterProvider router={router} />;
+}
+
+/**
+ * ⚠️ Latching, and that is not an optimisation: once the surface has turned down a freshly issued
+ * credential, later 401s say nothing new. Without the latch every request the page still had in
+ * flight would notify again, and the screen would flicker once per answer.
+ */
+export function createRefusalStore(): RefusalStore {
+  let refused = false;
+  const listeners = new Set<() => void>();
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    isRefused: () => refused,
+    refuse() {
+      if (refused) return;
+      refused = true;
+      for (const listener of listeners) listener();
+    },
+  };
+}

package/src/app-root/app-root.types.ts

@@ -0,0 +1,27 @@
+import type { IntelDataProvider } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import type { createIntelRouter } from "@/router/router.tsx";
+
+/**
+ * Whether the surface has turned down a freshly issued credential (#118) — a store rather than a
+ * module-level `let`, and that is the whole point of #456.
+ *
+ * The refusal arrives from inside a `fetch`, not from React: the data provider calls
+ * `onUnauthorized`, and something on screen has to change because of it. That used to be a
+ * `let refused = false` in `main.tsx` with a hand-written repaint — a decision in bare module body,
+ * which is exactly what nothing could call and therefore what no test ever touched (#130).
+ */
+export interface RefusalStore {
+  subscribe(listener: () => void): () => void;
+  isRefused(): boolean;
+  refuse(): void;
+}
+
+export type IntelRouter = ReturnType<typeof createIntelRouter>;
+
+export interface AppRootDeps {
+  // ⚠️ The provider is handed in rather than read from the router context: that context only exists
+  // INSIDE `RouterProvider`, and the whole point of the gate is to decide before it mounts.
+  data: IntelDataProvider;
+  router: IntelRouter;
+  refusal: RefusalStore;
+}

package/src/archive/archive.tsx

@@ -1,10 +1,14 @@
 import type { Flow } from "@anchrd/intel-contract/flow";
 import type { Node } from "@anchrd/intel-contract/node";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ArchiveRestore } from "lucide-react";
+import { ArchiveRestore, LoaderCircle, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
+import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useDateTime } from "@/time/time-context.tsx";
 
 // One archived thing, whichever side of the tree it came from. The two records stay apart
 // everywhere else (ADR-0004); here they are one list because "what did I throw away" is one
@@ -16,11 +20,16 @@ interface ArchivedEntry {
   archivedAt: string;
   updatedAt: string;
   restore(): Promise<unknown>;
+  // Both sides of the tree can be purged (#457) — each through its own door, because node and flow
+  // stay separate everywhere else (ADR-0004).
+  purge(): Promise<{ purged: true; title: string }>;
+  previewPurge?(): Promise<{ inboundLinks: number; totalItems: number }>;
 }
 
 export function Archive() {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const queryClient = useQueryClient();
 
   const archived = useQuery({
@@ -31,8 +40,10 @@ export function Archive() {
         data.listFlows({ archivedOnly: true }),
       ]);
       const entries: ArchivedEntry[] = [
-        ...nodes.items.flatMap((node) =>
-          node.archivedAt
+        ...nodes.items.flatMap((node) => {
+          // Stable across reloads: after D1 commits, only this key can reach an R2 cleanup receipt.
+          const purgeKey = `purge-${node.id}`;
+          return node.archivedAt
             ? [
                 {
                   id: node.id,
@@ -47,10 +58,12 @@ export function Archive() {
                       archived: false,
                       idempotencyKey: crypto.randomUUID(),
                     }),
+                  purge: () => data.purgeNode({ nodeId: node.id, idempotencyKey: purgeKey }),
+                  previewPurge: () => data.previewNodePurge({ nodeId: node.id }),
                 } satisfies ArchivedEntry,
               ]
-            : [],
-        ),
+            : [];
+        }),
         ...flows.items.flatMap((flow: Flow) =>
           flow.archivedAt
             ? [
@@ -67,6 +80,7 @@ export function Archive() {
                       archived: false,
                       idempotencyKey: crypto.randomUUID(),
                     }),
+                  purge: () => data.purgeFlow({ flowId: flow.id }),
                 } satisfies ArchivedEntry,
               ]
             : [],
@@ -95,6 +109,31 @@ export function Archive() {
     },
   });
 
+  // ⚠️ The confirmation is a real dialog, not a `window.confirm` — it has to name the thing and say
+  // that it does not come back. The state lives here because the row underneath disappears the
+  // moment the purge goes through.
+  const [confirming, setConfirming] = useState<ArchivedEntry | null>(null);
+  const preview = useQuery({
+    queryKey: ["purge-preview", confirming?.id],
+    queryFn: async () => await confirming?.previewPurge?.(),
+    enabled: Boolean(confirming?.previewPurge),
+    retry: false,
+  });
+  const purge = useMutation({
+    mutationFn: async (entry: ArchivedEntry) => await entry.purge(),
+    onSuccess: async () => {
+      setConfirming(null);
+      await Promise.all([
+        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: ["node-graph"] }),
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       <div className="border-b px-6 py-4">
@@ -114,6 +153,13 @@ export function Archive() {
             {i18n.t("archive.restoreFailed")}
           </p>
         ) : null}
+        {/* ⚠️ The refusal stands HERE and not in the dialog: it carries the reason — folder not
+            empty, a flow still uses it — and it has to stay readable after the dialog is closed. */}
+        {purge.isError ? (
+          <p role="alert" className="mb-4 text-sm text-destructive">
+            {i18n.t("archive.purgeFailed")}
+          </p>
+        ) : null}
         {archived.data?.length === 0 ? (
           <p className="text-sm text-muted-foreground">{i18n.t("archive.empty")}</p>
         ) : null}
@@ -135,23 +181,110 @@ export function Archive() {
               <span className="grid min-w-0 flex-1 leading-tight">
                 <span className="truncate text-sm font-medium">{entry.title}</span>
                 <span className="truncate text-xs text-muted-foreground">
-                  {i18n.t("archive.archivedAt", { when: entry.archivedAt.slice(0, 10) })}
+                  {i18n.t("archive.archivedAt", { when: dateTime.at(entry.archivedAt) })}
                 </span>
               </span>
+              {/* Both actions stay permanently visible: the archive is the one place where getting
+                  an item back must never depend on discovering a hover-only control. */}
+              <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                  {/* The wrapper keeps the tooltip available while the button is disabled. */}
+                  <TooltipTrigger asChild>
+                    <span className="inline-flex shrink-0">
+                      <button
+                        type="button"
+                        disabled={restore.isPending}
+                        onClick={() => restore.mutate(entry)}
+                        aria-label={i18n.t(
+                          restore.isPending && restore.variables?.id === entry.id
+                            ? "archive.restoring"
+                            : "archive.restore",
+                          { title: entry.title },
+                        )}
+                        aria-busy={restore.isPending && restore.variables?.id === entry.id}
+                        className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                      >
+                        {restore.isPending && restore.variables?.id === entry.id ? (
+                          <LoaderCircle aria-hidden="true" className="size-4 animate-spin" />
+                        ) : (
+                          <ArchiveRestore aria-hidden="true" className="size-4" />
+                        )}
+                      </button>
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {i18n.t(
+                      restore.isPending && restore.variables?.id === entry.id
+                        ? "archive.restoringAction"
+                        : "archive.restoreAction",
+                    )}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <button
                 type="button"
-                disabled={restore.isPending}
-                onClick={() => restore.mutate(entry)}
-                aria-label={i18n.t("archive.restore", { title: entry.title })}
-                className="inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+                disabled={purge.isPending}
+                onClick={() => setConfirming(entry)}
+                aria-label={i18n.t("archive.purge", { title: entry.title })}
+                className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border text-destructive outline-none hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
               >
-                <ArchiveRestore aria-hidden="true" className="size-4" />
-                {i18n.t("archive.restoreAction")}
+                <Trash2 aria-hidden="true" className="size-4" />
               </button>
             </li>
           ))}
         </ul>
       </div>
+      {confirming ? (
+        <Modal title={i18n.t("archive.purge.title")} close={() => setConfirming(null)}>
+          <p className="text-sm text-muted-foreground">
+            {i18n.t("archive.purge.body", { title: confirming.title })}
+          </p>
+          {confirming.previewPurge && preview.data ? (
+            <div className="mt-2 space-y-2 text-sm text-muted-foreground">
+              <p>{i18n.t("archive.purge.items", { count: preview.data.totalItems })}</p>
+              <p>
+                {preview.data.inboundLinks === 0
+                  ? i18n.t("archive.purge.links.none")
+                  : preview.data.inboundLinks === 1
+                    ? i18n.t("archive.purge.links.one")
+                    : i18n.t("archive.purge.links.many", { count: preview.data.inboundLinks })}
+              </p>
+            </div>
+          ) : null}
+          {confirming.previewPurge && preview.isPending ? (
+            <p className="mt-2 text-sm text-muted-foreground">
+              {i18n.t("archive.purge.previewLoading")}
+            </p>
+          ) : null}
+          {confirming.previewPurge && preview.isError ? (
+            <p role="alert" className="mt-2 text-sm text-destructive">
+              {i18n.t("archive.purge.previewFailed")}
+            </p>
+          ) : null}
+          <p className="mt-2 text-sm text-muted-foreground">{i18n.t("archive.purge.grants")}</p>
+          <div className="mt-6 flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setConfirming(null)}
+              className="inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("archive.purge.cancel")}
+            </button>
+            <button
+              type="button"
+              disabled={
+                purge.isPending ||
+                (Boolean(confirming.previewPurge) && (preview.isPending || preview.isError))
+              }
+              onClick={() => purge.mutate(confirming)}
+              className="inline-flex h-8 items-center gap-2 rounded-md bg-destructive px-3 text-sm font-medium text-destructive-foreground outline-none hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+            >
+              <Trash2 aria-hidden="true" className="size-4" />
+              {i18n.t("archive.purge.confirm")}
+            </button>
+          </div>
+        </Modal>
+      ) : null}
     </div>
   );
 }

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

@@ -12,6 +12,8 @@ import {
   ListFlowsInput,
   PreviewFlowPublishInput,
   PublishFlowInput,
+  PurgeFlowInput,
+  PurgeFlowResult,
   RelationGraph,
   RelationGraphInput,
   SaveFlowVersionInput,
@@ -36,6 +38,10 @@ import {
   NodeList,
   NodeTable,
   NodeVersionList,
+  PurgeNodeInput,
+  PurgeNodePreview,
+  PurgeNodePreviewInput,
+  PurgeNodeResult,
   ReindexResult,
   ResolveNodeLinksInput,
   ResolveNodeLinksResult,
@@ -46,6 +52,7 @@ import {
   UpdateNodeInput,
 } from "@anchrd/intel-contract/node";
 import {
+  ResourceAccessList,
   ResourceGrantList,
   RevokeGrantInput,
   RevokeGrantResult,
@@ -326,6 +333,26 @@ export function createIntelDataProvider(
         body: JSON.stringify(parsed),
       });
     },
+    async purgeNode(input) {
+      const parsed = PurgeNodeInput.parse(input);
+      return await request(`/nodes/${encodeURIComponent(parsed.nodeId)}`, PurgeNodeResult, {
+        method: "DELETE",
+        body: JSON.stringify(parsed),
+      });
+    },
+    async previewNodePurge(input) {
+      const parsed = PurgeNodePreviewInput.parse(input);
+      return await request(
+        `/nodes/${encodeURIComponent(parsed.nodeId)}/purge-preview`,
+        PurgeNodePreview,
+      );
+    },
+    async purgeFlow(input) {
+      const parsed = PurgeFlowInput.parse(input);
+      return await request(`/flows/${encodeURIComponent(parsed.flowId)}`, PurgeFlowResult, {
+        method: "DELETE",
+      });
+    },
     async searchNodes(input) {
       return await request("/nodes/search", SearchResult, {
         method: "POST",
@@ -335,6 +362,12 @@ export function createIntelDataProvider(
     async listGrants(resourceId) {
       return await request(`/nodes/${encodeURIComponent(resourceId)}/grants`, ResourceGrantList);
     },
+    async listEffectiveAccess(resourceId) {
+      return await request(
+        `/nodes/${encodeURIComponent(resourceId)}/effective-access`,
+        ResourceAccessList,
+      );
+    },
     async shareNode(input) {
       const parsed = ShareInput.parse(input);
       return await request(`/nodes/${encodeURIComponent(parsed.resourceId)}/grants`, ShareResult, {

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

@@ -12,6 +12,8 @@ import type {
   ListFlowsInput,
   PreviewFlowPublishInput,
   PublishFlowInput,
+  PurgeFlowInput,
+  PurgeFlowResult,
   RelationGraph,
   RelationGraphScope,
   SaveFlowVersionInput,
@@ -37,6 +39,9 @@ import type {
   NodeList,
   NodeTable,
   NodeVersionList,
+  PurgeNodeInput,
+  PurgeNodePreviewInput,
+  PurgeNodeResult,
   ReindexResult,
   ResolveNodeLinksInput,
   ResolveNodeLinksResult,
@@ -125,8 +130,18 @@ export interface IntelDataProvider {
   listNodeVersions(nodeId: string): Promise<NodeVersionList>;
   updateNode(input: UpdateNodeInput): Promise<Node>;
   archiveNode(input: ArchiveNodeInput): Promise<Node>;
+  // ⚠️ The one way across this seam after which nothing is really left (#457). The title comes back
+  // because nothing can look it up afterwards.
+  purgeNode(input: PurgeNodeInput): Promise<PurgeNodeResult>;
+  previewNodePurge(
+    input: PurgeNodePreviewInput,
+  ): Promise<import("@anchrd/intel-contract/node").PurgeNodePreview>;
+  purgeFlow(input: PurgeFlowInput): Promise<PurgeFlowResult>;
   searchNodes(input: SearchInput): Promise<SearchResult>;
   listGrants(resourceId: string): Promise<ResourceGrantList>;
+  listEffectiveAccess(
+    resourceId: string,
+  ): Promise<import("@anchrd/intel-contract/share").ResourceAccessList>;
   // The grant, and what the grant does not cover: the documents the flows in this folder read that
   // the new principal still cannot. A warning, never a refusal (ADR-0004 §4).
   shareNode(input: ShareInput): Promise<ShareResult>;

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

@@ -5,6 +5,7 @@ import { useState } from "react";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useDateTime } from "@/time/time-context.tsx";
 
 // One page is what a person reads before deciding, not what a database can return. The server caps
 // it at fifty; twenty is what fits on a screen without scrolling past the answer.
@@ -115,6 +116,7 @@ export function FlowRuns({ flowId }: { flowId: string }) {
 
 function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; toggle(): void }) {
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const failed = run.status === "failed";
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
@@ -133,7 +135,7 @@ function RunRow({ run, open, toggle }: { run: FlowRunSummary; open: boolean; tog
             >
               {i18n.t(`runs.status.${run.status}`)}
             </span>
-            <span>{new Date(run.startedAt).toLocaleString(i18n.locale)}</span>
+            <span>{dateTime.at(run.startedAt)}</span>
             <span className="text-muted-foreground">
               {run.durationMs === null
                 ? i18n.t("runs.stillRunning")

package/src/flows/flows.tsx

@@ -24,7 +24,6 @@ import {
 } from "@xyflow/react";
 import { FileSearch, Info, Send, Wrench } from "lucide-react";
 import { useEffect, useId, useMemo, useState } from "react";
-import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { TreeEntryMediaType } from "@/app/app-tree/app-tree.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -457,16 +456,6 @@ function FlowsEditor() {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      {/* Only the view switch belongs to the area: it says how the thing the breadcrumb names is
-          being shown, and it is mounted only where there is a flow to draw — a switch with nothing
-          to point at is what #19 rules out for the header. A flow is the one level that has runs,
-          so it is the one that offers the third view (#35). Everything that acts on the flow itself
-          left this bar for the flow's own title line below (#24). */}
-      {selectedFlowId ? (
-        <ActionSlot>
-          <ViewToggle views={["editor", "graph", "runs"]} />
-        </ActionSlot>
-      ) : null}
       {selectedFlowId && document.data ? (
         <FlowTitle
           flow={document.data.flow}
@@ -736,6 +725,11 @@ function FlowTitle({
     // hit without looking is worth more than the primary button being outermost. `TitleRow` is what
     // enforces that — nothing passed in here can get past the menu.
     <TitleRow title={flow.title} description={flow.description} target={{ type: "flow", flow }}>
+      {/* ⚠️ #454: the toggle used to stand in the global header, beside the search — where what
+          applies EVERYWHERE stands. But it says how THIS flow is shown, and so belongs in the line
+          that names this flow. A flow is the only level with runs, and therefore the only one with
+          three views (#35). */}
+      <ViewToggle views={["editor", "graph", "runs"]} />
       <TooltipProvider delayDuration={300}>
         <Tooltip>
           <TooltipTrigger asChild>

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

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
+import { ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
 import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
 import {
   Table,
@@ -14,6 +15,7 @@ import { useI18n } from "@/i18n/i18n-context.tsx";
 import { kindIcons } from "@/kind-icon.ts";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useDateTime } from "@/time/time-context.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.
@@ -41,6 +43,7 @@ function targetOf(entry: TreeEntry): ResourceTarget {
 export function FolderContents({ folderId }: { folderId: string }) {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const navigate = useNavigate();
   const level = useQuery({
     queryKey: treeLevelKey(folderId),
@@ -82,6 +85,9 @@ export function FolderContents({ folderId }: { folderId: string }) {
               <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">
@@ -126,7 +132,15 @@ export function FolderContents({ folderId }: { folderId: string }) {
                     </button>
                   </TableCell>
                   <TableCell className="px-4 text-right text-sm text-muted-foreground tabular-nums">
-                    {new Date(changed).toLocaleDateString(i18n.locale)}
+                    {dateTime.on(changed)}
+                  </TableCell>
+                  <TableCell className="px-4">
+                    <ResourceAccessSummary
+                      resourceId={
+                        entry.type === "flow" ? (entry.flow.parentId ?? folderId) : entry.id
+                      }
+                      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