@anchrd/intel-ui 0.21.0 → 0.23.0

package/package.json

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

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

@@ -487,7 +487,16 @@ export function AppTree() {
               onClick={() => toggle(level, !isOpen)}
               // The icons inside a coloured row need a step of their own, or their hover would be
               // the row's colour on the row's colour and read as nothing at all.
-              className="shrink-0 rounded-md p-1 text-sidebar-foreground/70 outline-none hover:bg-sidebar-accent-foreground/10 focus-visible:ring-2 focus-visible:ring-sidebar-ring"
+              //
+              // ⚠️ A square of exactly `TREE_GUTTER` with the icon CENTRED in it (#453). It used to
+              // be `p-1` around a 14px icon — 22px wide, so the arrow's centre sat at 11px while the
+              // line of the level below started at 14px: the line ran PAST the arrow instead of
+              // under it. On the fourth level that line is the only thing left saying whose content
+              // one is reading, and missing its arrow it reads as a separation instead of a
+              // belonging. Centred, the hit area also gains the air on the left it never had, and it
+              // gets bigger rather than smaller — an arrow that sits well but is harder to hit is no
+              // improvement, on touch least of all.
+              className={`${TREE_GUTTER} flex items-center justify-center rounded-md text-sidebar-foreground/70 outline-none hover:bg-sidebar-accent-foreground/10 focus-visible:ring-2 focus-visible:ring-sidebar-ring`}
             >
               <ChevronRight
                 aria-hidden="true"
@@ -495,7 +504,9 @@ export function AppTree() {
               />
             </button>
           ) : (
-            <span aria-hidden="true" className="size-5 shrink-0" />
+            // ⚠️ The SAME width as the button, not one step less: a row without an arrow used to sit
+            // 2px left of one with an arrow, and nothing said why.
+            <span aria-hidden="true" className={TREE_GUTTER} />
           )}
           {/* The row's own control is what is grabbed and what is dropped on: a real button, so the
               gesture rides on something that is already focusable and named rather than on a bare
@@ -555,7 +566,7 @@ export function AppTree() {
             under — indentation says whose contents these are to anyone who can see it, and this is
             the same sentence for anyone who cannot. */}
         {isOpen ? (
-          <div className="ml-3.5 border-l border-sidebar-border pl-1.5">
+          <div className={TREE_LINE}>
             {renderLevel(
               level,
               new Set([...ancestors, entry.id]),
@@ -616,11 +627,14 @@ export function AppTree() {
           which is exactly when somebody needs to be told where to start. */}
       {root?.isPending ? null : (
         <div className="mt-1 flex items-center gap-0.5">
-          {/* The gutter the disclosure arrows occupy, so the plus lines up with the row icons
-              above it rather than half a step to their left. */}
-          <span aria-hidden="true" className="size-5 shrink-0" />
+          {/* ⚠️ No gutter here any more (#453). It was meant to line the plus up with the row ICONS
+              above it — and the price was that the row stood half a step right of everything
+              belonging to the top level, so it read as a child of the list while it means the list
+              itself. It begins on the same left edge as the arrows of the top level, which is the
+              edge that says "this level". */}
           <AddMenu
             label={i18n.t("tree.addRoot")}
+            description={i18n.t("tree.addRoot.long")}
             variant="row"
             onSelect={(kind) => {
               if (kind === "upload") startUpload(null);
@@ -657,6 +671,20 @@ export function AppTree() {
   );
 }
 
+// ── The geometry of the tree: two measurements that belong together (#453) ───────────────────────
+//
+// The disclosure arrow sits in a 24px SQUARE, and the vertical line of an open level starts at 12px
+// — the centre column of that square. The two used to be arrived at independently (`p-1` around a
+// 14px icon = 22px, line at `ml-3.5` = 14px), which is why the line ran BESIDE its arrow rather than
+// underneath it.
+//
+// ⚠️ The result is no small matter: on the fourth level the line is the only thing left saying whose
+// content you are reading. If it misses its arrow, it reads as a separation instead of a belonging.
+//
+// That is why the two stand HERE side by side: whoever changes one sees the other.
+const TREE_GUTTER = "size-6 shrink-0";
+const TREE_LINE = "ml-3 border-l border-sidebar-border pl-2";
+
 // ⚠️ Hover alone would hide this from a keyboard and from touch entirely, which is the same as not
 // having it. It stays in the tab order, focus makes it visible, and below `md` it is always shown.
 //
@@ -666,8 +694,19 @@ export function AppTree() {
 // ⚠️ The two variants do not offer the same things, and the type says so rather than a comment: only
 // the root can emit an import (#346), because only the root has no three-dot menu to hold one. A
 // single wide signature would leave the folder row with a branch nothing can reach.
+//
+// ⚠️ In the `row` form the visible text and the accessible name are NOT the same string (#453). The
+// sentence "Add at the top level" was cut to "Add at the top le…" in a 240px sidebar —
+// a truncated sentence says less than a short word. The word is what one reads; the sentence stays
+// as the name, because this row is the only way to start a tree and the only thing on screen when
+// the tree is empty. Shorter must not mean that nobody is told where to begin.
 type AddMenuProps =
-  | { label: string; variant: "row"; onSelect(kind: NewKind | "upload" | ImportKind): void }
+  | {
+      label: string;
+      description: string;
+      variant: "row";
+      onSelect(kind: NewKind | "upload" | ImportKind): void;
+    }
   | { label: string; variant?: "icon"; onSelect(kind: NewKind | "upload"): void };
 
 function AddMenu(props: AddMenuProps) {
@@ -687,7 +726,7 @@ function AddMenu(props: AddMenuProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        {...(variant === "row" ? {} : { "aria-label": label })}
+        aria-label={props.variant === "row" ? props.description : label}
         className={
           variant === "row"
             ? "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-sidebar-foreground/70 outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent"

package/src/app/app.tsx

@@ -1,32 +1,19 @@
-import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";
 import { useRef, useState } from "react";
 import { AppSidebar } from "@/app/app-sidebar/app-sidebar.tsx";
 import { HeaderSearch } from "@/app/header-search/header-search.tsx";
 import { createSidebarPreferences } from "@/app/sidebar-preferences/sidebar-preferences.ts";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useI18n } from "@/i18n/i18n-context.tsx";
 
-const sections = [
-  { path: "/nodes", labelKey: "nav.nodes" },
-  { path: "/flows", labelKey: "nav.flows" },
-  { path: "/tools", labelKey: "nav.tools" },
-] as const;
-
+// ⚠️ The breadcrumb is gone (#337). It was two levels deep and the first of them was constant —
+// `Intel > Knowledge`, `Intel > Flows`, `Intel > Tools`. The product name stands in the sidebar
+// anyway, the area is marked there as the active row, and what was left was a path that never grew
+// past two links and carried no navigation that did not already exist. The `Separator` beside the
+// sidebar trigger went with it: it separated the trigger from the breadcrumb, and there is nothing
+// left on that side to separate it from.
 export function App() {
   const i18n = useI18n();
-  const pathname = useRouterState({ select: (state) => state.location.pathname });
-  const current = sections.find(
-    (section) => pathname === section.path || pathname.startsWith(`${section.path}/`),
-  );
 
   // Read once: the stored preference is the starting point, after which the shell's own state is
   // the truth. Re-reading on every render would fight the drag.
@@ -73,24 +60,6 @@ export function App() {
       <SidebarInset className="min-w-0 overflow-hidden md:border">
         <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger className="-ml-1" aria-label={i18n.t("shell.toggleSidebar")} />
-          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
-                  <Link to="/nodes">{i18n.t("app.name")}</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              {current ? (
-                <>
-                  <BreadcrumbSeparator />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage>{i18n.t(current.labelKey)}</BreadcrumbPage>
-                  </BreadcrumbItem>
-                </>
-              ) : null}
-            </BreadcrumbList>
-          </Breadcrumb>
           {/* The bar for area-owned actions. A screen renders into the inner box through
               `ActionSlot`; search is the shell's own, because it has to open from every screen
               alike and belongs to none of them. It stays last, against the right edge, and a

package/src/app/settings-dialog/settings-dialog.tsx

@@ -16,17 +16,24 @@ import { useI18n, useLanguage } from "@/i18n/i18n-context.tsx";
 import { languageName } from "@/i18n/i18n-languages/i18n-languages.ts";
 import { type ThemeChoice, ThemeChoices } from "@/theme/theme.ts";
 import { useTheme } from "@/theme/theme-context.tsx";
+import { DeviceZone, deviceZone, ZoneOptions } from "@/time/time.ts";
+import { useTimeZone } from "@/time/time-context.tsx";
 
 // The settings that belong to the person rather than to the installation: language and appearance.
 // Both are client state — they live in localStorage, not in the Intel HTTP surface — so they do not
 // belong on a screen with a save button. A choice applies at once; a dialog that previews and only
 // commits on "Save" would carry two states too many for two dropdowns.
 //
-// ⚠️ There was a third, the reader's timezone, and it left with the Agents (#388). It was a
-// suggestion for a schedule and the lens its calendar was read through (#228); with both gone
-// nothing read the value, and a preference that changes nothing on screen is worse than none —
-// it invites the reader to set it and then contradicts them. Reading times in a chosen zone is a
-// feature, and it would come back as one.
+// ⚠️ The third one, the reader's timezone, is BACK — and the sentence that sent it away is the
+// reason it could come back (#467). It left with the Agents (#388) because it was a suggestion for
+// a schedule and the lens its calendar was read through (#228); with both gone nothing read the
+// value, "and a preference that changes nothing on screen is worse than none — it invites the
+// reader to set it and then contradicts them. Reading times in a chosen zone is a feature, and it
+// would come back as one."
+//
+// It came back as one, and in that order: FIRST every time on screen reads `useDateTime()`, THEN
+// this dropdown exists. Whoever adds a surface that shows a time reads that hook — a second
+// `toLocaleString` would be the old state again, only harder to find.
 //
 // The dialog is opened from outside (the user footer holds the state), because its trigger is a
 // DropdownMenuItem: Radix unmounts the menu content when an item is chosen and would take a dialog
@@ -40,6 +47,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
   const i18n = useI18n();
   const language = useLanguage();
   const theme = useTheme();
+  const zone = useTimeZone();
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -95,6 +103,31 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
               </Select>
             </div>
           ) : null}
+          {zone ? (
+            <div className="grid gap-2">
+              <label className="text-sm font-medium" htmlFor="settings-timezone">
+                {i18n.t("settings.timezone")}
+              </label>
+              <Select value={zone.current} onValueChange={zone.select}>
+                <SelectTrigger id="settings-timezone" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {/* The default is the device's zone and is NAMED as such — not an empty field
+                      that would look as if nothing were set. */}
+                  <SelectItem value={DeviceZone}>
+                    {i18n.t("settings.timezone.device", { zone: deviceZone() })}
+                  </SelectItem>
+                  {ZoneOptions.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">{i18n.t("settings.timezone.hint")}</p>
+            </div>
+          ) : null}
         </div>
       </DialogContent>
     </Dialog>

package/src/app/user-footer/user-footer.tsx

@@ -14,6 +14,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
@@ -89,6 +90,25 @@ export function UserFooter() {
             align="start"
             className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
           >
+            {/* #452: the head — who is signed in, above the things they can do. It used to stand
+                ONLY in the trigger BELOW the menu, so an open menu pointed at the answer instead of
+                giving it. Not a menu item: it is a reading, not an action, so it takes no focus and
+                nothing happens when it is pressed. */}
+            <DropdownMenuLabel className="font-normal">
+              <div className="grid text-left text-sm leading-tight">
+                <span className="truncate font-medium">{primary}</span>
+                {secondary ? (
+                  <span className="truncate text-xs text-muted-foreground">{secondary}</span>
+                ) : null}
+              </div>
+            </DropdownMenuLabel>
+            {/* ⚠️ The ONE separator, and the only one left (#452). There used to be three, each with
+                a good reason of its own: the settings change nothing anybody else sees, the reindex
+                belongs to the installation rather than the person, signing out is destructive.
+                Together they cut five rows into five groups — and a grouping that separates every
+                single row groups nothing. Above it stands who you are, below it what you can do;
+                that is the whole distinction the line carries, and it is the same one Gate draws. */}
+            <DropdownMenuSeparator />
             <DropdownMenuItem onSelect={() => void navigate({ to: "/tools" })}>
               <Wrench aria-hidden="true" />
               {i18n.t("nav.tools")}
@@ -99,9 +119,7 @@ export function UserFooter() {
               <ArchiveIcon aria-hidden="true" />
               {i18n.t("archive.title")}
             </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            {/* Language, appearance and timezone belong to the person, like everything else behind
-                this menu — and unlike the two rows above, they change nothing anybody else sees. */}
+            {/* Language and appearance belong to the person, like everything else behind this menu. */}
             <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
               <Settings aria-hidden="true" />
               {i18n.t("settings.title")}
@@ -109,18 +127,18 @@ export function UserFooter() {
             {/* ⚠️ Drawn only for an administrator, and that is a DRAWING decision — `POST
                 /nodes/reindex` asks Gate for `intel/admin` itself and would refuse this row's press
                 just the same (#416). Hiding it is not the check; it is not offering everybody a
-                door they cannot open. Its own separator, because the rows above belong to the
-                person and this one belongs to the installation. */}
+                door they cannot open.
+                ⚠️ Its own separator is GONE (#452): it set a single row apart, and that is exactly
+                the line this ticket removes. The reason it carried — this one belongs to the
+                installation — is true and still not worth a rule of its own on a five-row menu. */}
             {session.data?.isAdmin ? (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onSelect={() => setReindexOpen(true)}>
-                  <RefreshCw aria-hidden="true" />
-                  {i18n.t("reindex.title")}
-                </DropdownMenuItem>
-              </>
+              <DropdownMenuItem onSelect={() => setReindexOpen(true)}>
+                <RefreshCw aria-hidden="true" />
+                {i18n.t("reindex.title")}
+              </DropdownMenuItem>
             ) : null}
-            <DropdownMenuSeparator />
+            {/* Signing out stays recognisable as destructive — the COLOUR does that, and it needs no
+                line of its own to say it twice. */}
             <DropdownMenuItem
               disabled={logout.isPending}
               onSelect={() => logout.mutate()}

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,13 @@
 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, Trash2 } from "lucide-react";
+import { useState } from "react";
 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 +19,15 @@ 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 }>;
 }
 
 export function Archive() {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const queryClient = useQueryClient();
 
   const archived = useQuery({
@@ -47,6 +54,7 @@ export function Archive() {
                       archived: false,
                       idempotencyKey: crypto.randomUUID(),
                     }),
+                  purge: () => data.purgeNode({ nodeId: node.id }),
                 } satisfies ArchivedEntry,
               ]
             : [],
@@ -67,6 +75,7 @@ export function Archive() {
                       archived: false,
                       idempotencyKey: crypto.randomUUID(),
                     }),
+                  purge: () => data.purgeFlow({ flowId: flow.id }),
                 } satisfies ArchivedEntry,
               ]
             : [],
@@ -95,6 +104,25 @@ 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 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 +142,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,9 +170,14 @@ 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 icons stand PERMANENTLY, not only on hover — a deliberate exception to the
+                  row convention (#457). There are two of them, both rare, and this list is the only
+                  place they occur: the wall of icons anchrd/gate#237 was written against does not
+                  arise here. The way back keeps its text; the purge is a bare icon, so that the two
+                  do not weigh the same. */}
               <button
                 type="button"
                 disabled={restore.isPending}
@@ -148,10 +188,44 @@ export function Archive() {
                 <ArchiveRestore aria-hidden="true" className="size-4" />
                 {i18n.t("archive.restoreAction")}
               </button>
+              <button
+                type="button"
+                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"
+              >
+                <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>
+          <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}
+              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,8 @@ import {
   NodeList,
   NodeTable,
   NodeVersionList,
+  PurgeNodeInput,
+  PurgeNodeResult,
   ReindexResult,
   ResolveNodeLinksInput,
   ResolveNodeLinksResult,
@@ -326,6 +330,18 @@ 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",
+      });
+    },
+    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",