@anchrd/intel-ui 0.22.0 → 0.25.0

package/package.json

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

package/src/access-summary/access-summary.tsx

@@ -0,0 +1,282 @@
+import type { ResourceGrant } from "@anchrd/intel-contract/share";
+import { useQuery } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useUserName } from "@/user-name/user-name.ts";
+
+type Principal = ResourceGrant["principal"];
+
+type GrantGroup = {
+  key: string;
+  principal: Principal;
+  grants: ResourceGrant[];
+  owner: boolean;
+};
+
+function principalKey(principal: Principal): string {
+  if (principal.type === "organization") return "organization";
+  if (principal.type === "email") return `email:${principal.email.toLowerCase()}`;
+  return `user:${principal.id}`;
+}
+
+function groupGrants(grants: ResourceGrant[], ownerIds: string[] = []): GrantGroup[] {
+  const grouped = new Map<string, GrantGroup>();
+  for (const ownerId of ownerIds) {
+    grouped.set(`user:${ownerId}`, {
+      key: `user:${ownerId}`,
+      principal: { type: "user", id: ownerId },
+      grants: [],
+      owner: true,
+    });
+  }
+  for (const grant of grants) {
+    const key = principalKey(grant.principal);
+    const group = grouped.get(key);
+    if (group) group.grants.push(grant);
+    else grouped.set(key, { key, principal: grant.principal, grants: [grant], owner: false });
+  }
+  return [...grouped.values()];
+}
+
+function initials(value: string): string {
+  const parts = value
+    .replace(/@.*$/, "")
+    .split(/[\s._+-]+/)
+    .filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
+  return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
+}
+
+function usePrincipalLabel(principal: Principal): string {
+  const i18n = useI18n();
+  const userName = useUserName(principal.type === "user" ? principal.id : null);
+  if (principal.type === "organization") return i18n.t("node.organization");
+  if (principal.type === "email") return principal.email;
+  return userName ?? i18n.t("node.someUser");
+}
+
+const circleTones = [
+  "bg-muted text-muted-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-secondary text-secondary-foreground",
+] as const;
+
+function AccessCircle({
+  group,
+  position,
+  count,
+  expanded,
+  controls,
+  activate,
+}: {
+  group: GrantGroup;
+  position: number;
+  count: number;
+  expanded: boolean;
+  controls: string;
+  activate(element: HTMLButtonElement): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  const circle = (
+    <button
+      type="button"
+      aria-label={position === 0 ? `${i18n.t("node.accessDetails", { count })}: ${label}` : label}
+      aria-expanded={expanded}
+      aria-controls={controls}
+      data-organization-access={group.principal.type === "organization" ? "" : undefined}
+      onClick={(event) => activate(event.currentTarget)}
+      className={`relative flex size-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring ${circleTones[position % circleTones.length]}`}
+    >
+      {group.principal.type === "organization" ? (
+        <AppLogo className="size-4 rounded-none bg-transparent text-current [&_svg]:size-3" />
+      ) : (
+        initials(label)
+      )}
+    </button>
+  );
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>{circle}</TooltipTrigger>
+        <TooltipContent>
+          {group.principal.type === "organization" ? i18n.t("node.organizationAccess") : label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function AccessDetail({
+  group,
+  onRevoke,
+}: {
+  group: GrantGroup;
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  return (
+    <li className="flex items-start justify-between gap-3 text-sm">
+      <span className="min-w-0">
+        <span className="block truncate font-medium">{label}</span>
+        <span className="text-xs text-muted-foreground">
+          {[
+            ...(group.owner ? [i18n.t("node.owner")] : []),
+            ...group.grants.map((grant) => i18n.t(`node.verb.${grant.verb}`)),
+          ].join(", ")}
+        </span>
+      </span>
+      {onRevoke ? (
+        <span className="flex flex-wrap justify-end gap-1">
+          {group.grants.map((grant) => (
+            <button
+              key={grant.id}
+              type="button"
+              onClick={() => onRevoke(grant.id)}
+              aria-label={i18n.t("node.revokeVerbFor", {
+                verb: i18n.t(`node.verb.${grant.verb}`),
+                recipient: label,
+              })}
+              className="rounded px-2 py-1 text-xs text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("node.revokeVerb", { verb: i18n.t(`node.verb.${grant.verb}`) })}
+            </button>
+          ))}
+        </span>
+      ) : null}
+    </li>
+  );
+}
+
+export function AccessSummary({
+  grants,
+  ownerId,
+  ownerIds,
+  onRevoke,
+}: {
+  grants: ResourceGrant[];
+  ownerId?: string;
+  ownerIds?: string[];
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const groups = groupGrants(grants, ownerIds ?? (ownerId ? [ownerId] : []));
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 8, left: 8 });
+  const detailsId = useId();
+  const organizationDescriptionId = useId();
+  if (groups.length === 0) return null;
+  const visible = groups.slice(0, 3);
+  const overflow = groups.length - visible.length;
+  const toggle = (element: HTMLButtonElement) => {
+    setOpen((current) => {
+      if (!current) {
+        const rect = element.getBoundingClientRect();
+        const panelHeight = Math.min(320, window.innerHeight - 16);
+        const below = window.innerHeight - rect.bottom;
+        setPosition({
+          top: below >= panelHeight ? rect.bottom + 4 : Math.max(8, rect.top - panelHeight - 4),
+          left: Math.max(8, Math.min(rect.left, window.innerWidth - 328)),
+        });
+      }
+      return !current;
+    });
+  };
+
+  return (
+    <div className="relative flex w-fit items-center -space-x-2" data-access-summary="">
+      {visible.map((group, position) => (
+        <AccessCircle
+          key={group.key}
+          group={group}
+          position={position}
+          count={groups.length}
+          expanded={open}
+          controls={detailsId}
+          activate={toggle}
+        />
+      ))}
+      {overflow > 0 ? (
+        <button
+          type="button"
+          aria-label={i18n.t("node.accessDetails", { count: groups.length })}
+          aria-expanded={open}
+          aria-controls={detailsId}
+          onClick={(event) => toggle(event.currentTarget)}
+          className="relative flex size-7 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring"
+        >
+          +{overflow}
+        </button>
+      ) : null}
+      {groups.some((group) => group.principal.type === "organization") ? (
+        <span id={organizationDescriptionId} className="sr-only">
+          {i18n.t("node.organizationAccess")}
+        </span>
+      ) : null}
+      {open
+        ? createPortal(
+            <div
+              id={detailsId}
+              data-access-details=""
+              className="fixed z-50 max-h-[calc(100dvh-1rem)] w-80 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md"
+              style={position}
+            >
+              <ul className="space-y-3">
+                {groups.map((group) => (
+                  <AccessDetail key={group.key} group={group} {...(onRevoke ? { onRevoke } : {})} />
+                ))}
+              </ul>
+            </div>,
+            document.querySelector('[role="dialog"]') ?? document.body,
+          )
+        : null}
+    </div>
+  );
+}
+
+/**
+ * The compact access view for a resource the reader can manage.
+ *
+ * `node_grant_list` is itself authorized: a reader who may see the node but may not inspect its
+ * grants gets no names here. Treating that refusal as an empty summary is deliberate; rendering an
+ * error or retry would disclose that there are grants to ask about (#484).
+ */
+export function ResourceAccessSummary({
+  resourceId,
+  ownerId,
+}: {
+  resourceId: string;
+  ownerId: string;
+}) {
+  const { data } = useIntelRouterContext();
+  const grants = useQuery({
+    queryKey: ["effective-node-grants", resourceId],
+    queryFn: () => data.listEffectiveAccess(resourceId),
+    retry: false,
+    // Time cannot change this answer locally. Share mutations invalidate the whole effective prefix
+    // because changing one folder also changes every descendant summary already on screen.
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+  if (!grants.data) return null;
+  return (
+    <AccessSummary
+      grants={grants.data.items}
+      ownerIds={
+        grants.data.ownerIds.includes(ownerId)
+          ? grants.data.ownerIds
+          : [ownerId, ...grants.data.ownerIds]
+      }
+    />
+  );
+}

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()}