@anchrd/intel-ui 0.4.0 → 0.6.0

package/src/app/app.tsx

@@ -36,7 +36,17 @@ export function App() {
   const [width, setWidth] = useState(stored.width);
 
   return (
+    // ⚠️ `h-svh` is what keeps the box inside the screen. The registry's wrapper only carries
+    // `min-h-svh`, so its height follows its content — and the inset, an `inset` variant with a
+    // margin all round, then stands 16px taller than the viewport at best and grows with a long
+    // document at worst. Both times the lower border and its two rounded corners end up under the
+    // fold and the whole page scrolls. With a definite height the inset stretches to
+    // `100svh - 16px`, and the overflow below belongs to the container around the outlet, which
+    // already carries `min-h-0 overflow-auto` for exactly that. Set here rather than in
+    // `components/ui/sidebar.tsx`: that is registry code and an edit in it is silently gone at the
+    // next sync.
     <SidebarProvider
+      className="h-svh"
       open={open}
       onOpenChange={(next) => {
         setOpen(next);
@@ -55,7 +65,12 @@ export function App() {
           `min-width: auto`, so it never shrinks below its content's min-content width. One wide
           child (a flow canvas, a table of raw JSON) would widen the page instead of scrolling
           inside its own container. Learned in gate, GATE-76 D. */}
-      <SidebarInset className="min-w-0 md:border">
+      {/* `overflow-hidden` is the second half of the rounding: the box is rounded but nothing
+          clipped its children, so an opaque panel inside it — the flow editor's inspector carries
+          `bg-card` — painted its own square corner over the rounded one. Invisible in the light
+          theme, where card and background are the same white, and plain to see in the dark one.
+          Scrolling is unaffected: the container around the outlet below owns it. */}
+      <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" />
@@ -76,10 +91,21 @@ export function App() {
               ) : null}
             </BreadcrumbList>
           </Breadcrumb>
-          {/* The bar for area-owned actions. A screen renders into it through `HeaderActions`;
-              search is the shell's own, because it has to open from every screen alike and belongs
-              to none of them. It stays first, so a screen's actions line up to its right. */}
-          <div data-slot="header-actions" className="ml-auto flex items-center gap-2">
+          {/* 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
+              screen's actions line up to its left: the search is the one thing in this bar that is
+              on every screen, so it is the one whose place must not depend on what a screen happens
+              to bring. Pinned the other way round it was the constant that moved (#56).
+
+              ⚠️ Two boxes rather than one list, and that is the whole of the mechanism: a portal
+              only ever appends to its container, so with the search a sibling of the portalled
+              actions a screen that mounts them later — Flows does, once a flow is selected — would
+              land to its right. Giving the screens a container of their own takes mount order out
+              of the question entirely. `data-slot="header-actions"` therefore names the inner box:
+              it is the name every `ActionSlot` looks up. */}
+          <div data-slot="header-bar" className="ml-auto flex items-center gap-2">
+            <div data-slot="header-actions" className="flex items-center gap-2" />
             <HeaderSearch />
           </div>
         </header>

package/src/app/sidebar-resize-handle/sidebar-resize-handle.tsx

@@ -40,7 +40,8 @@ export function SidebarResizeHandle({
         "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
         "hover:after:bg-sidebar-ring focus-visible:after:bg-sidebar-ring",
         "focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        // Collapsed the sidebar is a fixed icon rail; there is no width left to drag.
+        // Collapsed there is no sidebar left to drag. The shell already unmounts the whole panel
+        // then; this keeps the handle from reappearing should it ever be mounted collapsed.
         "group-data-[state=collapsed]:hidden",
       )}
       onPointerDown={(event) => {

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

@@ -0,0 +1,331 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ChevronLeft, Folder } from "lucide-react";
+import type * as React from "react";
+import { useState } from "react";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// Where a row would land. `null` is the root of the shared tree; the title is carried along because
+// the dialog names the destination and the row that supplied it is not always still on screen.
+export type MoveDestination = { id: string | null; title: string };
+
+export type MoveVerdict = "ok" | "self" | "descendant" | "same-place";
+
+// The parent a row is filed under. Knowledge and Flows keep their own record (ADR-0004), so the
+// answer is read from whichever one this row is, never from a merged shape.
+export function parentOf(entry: TreeEntry): string | null {
+  return entry.type === "knowledge" ? entry.node.parentId : entry.flow.parentId;
+}
+
+// One level of the shared tree, as a query key. The move writes into two of them and the picker
+// reads a third, so the shape is stated once rather than spelled out at each of those places.
+export function treeLevelKey(parentId: string | null): readonly unknown[] {
+  return ["tree", parentId];
+}
+
+// The optimistic row, filed where it is about to land. Its own parent has to travel with it, or the
+// plus on the moved row would still file into the folder it just left.
+function withParent(entry: TreeEntry, parentId: string | null): TreeEntry {
+  return entry.type === "knowledge"
+    ? { ...entry, node: { ...entry.node, parentId } }
+    : { ...entry, flow: { ...entry.flow, parentId } };
+}
+
+/**
+ * ⚠️ The trap this ticket is built around: a node must not travel into its own descendants. The
+ * service refuses it (`move_cycle`, `knowledge.ts:421`), but a refusal that only arrives once the
+ * mouse button is already up is the one answer worse than no dragging at all — the drop has to be
+ * offered or withheld while the pointer is still moving.
+ *
+ * It costs no request. The tree already carries the ancestor path of every rendered row for its own
+ * cycle guard (`app-tree.tsx`), and "is this target inside the row I am dragging" is exactly the
+ * question that path answers: the dragged id appears above the target, or it does not.
+ */
+export function moveVerdict(input: {
+  draggedId: string;
+  draggedParentId: string | null;
+  targetId: string | null;
+  targetAncestors: ReadonlySet<string>;
+}): MoveVerdict {
+  if (input.targetId === input.draggedId) return "self";
+  if (input.targetId !== null && input.targetAncestors.has(input.draggedId)) return "descendant";
+  if (input.targetId === input.draggedParentId) return "same-place";
+  return "ok";
+}
+
+// ⚠️ Four refusals, four sentences. The service tells them apart by `code`
+// (`knowledge.ts:331/335/338/361`, `flows.ts:205–217/752`), and so does this: one message for all
+// of them would leave the reader guessing which of "you may not write there", "that is not a
+// folder", "that would be a loop" and "somebody else was faster" they have just hit.
+export function moveErrorKey(error: unknown): string {
+  const code =
+    typeof error === "object" && error !== null && "code" in error
+      ? String((error as { code: unknown }).code)
+      : null;
+  switch (code) {
+    case "knowledge_forbidden":
+    case "flow_edit_forbidden":
+      return "tree.move.failed.forbidden";
+    case "parent_not_folder":
+      return "tree.move.failed.notFolder";
+    case "move_cycle":
+      return "tree.move.failed.cycle";
+    case "update_conflict":
+    case "flow_update_conflict":
+      return "tree.move.failed.conflict";
+    case "flow_parent_not_found":
+      return "tree.move.failed.gone";
+    default:
+      return "tree.move.failed.other";
+  }
+}
+
+/**
+ * The move, named before it happens.
+ *
+ * ⚠️ Since #16 a share hangs on the folder and reaches everything beneath it (`db-grants.ts`,
+ * `nodeVerbQuery`), so moving a document is a change of who may read it — without the word "share"
+ * appearing anywhere. That is why every move is confirmed rather than performed on drop.
+ *
+ * What this deliberately does not do is name the people. `listKnowledgeGrants` answers with the
+ * grants sitting on that one folder, needs `share` on it (`knowledge.ts:459`), and says nothing
+ * about the grants above it that reach down. A list built from that would be short of exactly the
+ * entries that matter and would read as complete — "nobody is on this folder" while an ancestor
+ * opens it to the whole organization. Naming the mechanism truthfully beats enumerating it wrongly;
+ * an effective-audience answer is the server's to give, and no endpoint offers one today.
+ */
+export function MoveDialog({
+  entry,
+  initial,
+  close,
+  submit,
+}: {
+  entry: TreeEntry;
+  initial: MoveDestination | null;
+  close(): void;
+  submit(destination: MoveDestination): void;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const [destination, setDestination] = useState<MoveDestination | null>(initial);
+  // The browsed path, root first. It is also the descendant guard for the keyboard route: the row
+  // being moved is never offered, so its subtree can never be entered in the first place.
+  const [path, setPath] = useState<MoveDestination[]>([]);
+  const here: MoveDestination = path.at(-1) ?? { id: null, title: i18n.t("tree.move.root") };
+  const level = useQuery({
+    queryKey: ["tree", here.id],
+    queryFn: async () => await data.listTreeChildren(here.id),
+    enabled: destination === null,
+  });
+  const folders = (level.data ?? []).filter(
+    (child) => child.kind === "folder" && child.id !== entry.id,
+  );
+  const verdict = moveVerdict({
+    draggedId: entry.id,
+    draggedParentId: parentOf(entry),
+    targetId: here.id,
+    targetAncestors: new Set(path.map((step) => step.id).filter((id) => id !== null)),
+  });
+
+  return (
+    <Modal title={i18n.t("tree.move.title", { title: entry.title })} close={close}>
+      {destination === null ? (
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">{i18n.t("tree.move.pick")}</p>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              disabled={path.length === 0}
+              onClick={() => setPath((current) => current.slice(0, -1))}
+              aria-label={i18n.t("tree.move.up")}
+              className="rounded-md border p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              <ChevronLeft aria-hidden="true" className="size-4" />
+            </button>
+            <p className="min-w-0 flex-1 truncate text-sm font-medium">{here.title}</p>
+          </div>
+          <ul className="max-h-56 space-y-1 overflow-y-auto">
+            {level.isPending ? (
+              <li className="px-2 py-1.5 text-sm text-muted-foreground">
+                {i18n.t("common.loading")}
+              </li>
+            ) : folders.length === 0 ? (
+              <li className="px-2 py-1.5 text-sm text-muted-foreground">
+                {i18n.t("tree.move.noFolders")}
+              </li>
+            ) : (
+              folders.map((folder) => (
+                <li key={folder.id}>
+                  <button
+                    type="button"
+                    onClick={() => setPath((current) => [...current, folder])}
+                    aria-label={i18n.t("tree.move.open", { title: folder.title })}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <Folder aria-hidden="true" className="size-4 shrink-0" />
+                    <span className="truncate">{folder.title}</span>
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+          <button
+            type="button"
+            disabled={verdict !== "ok"}
+            onClick={() => setDestination(here)}
+            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {i18n.t("tree.move.here", { title: here.title })}
+          </button>
+          {verdict === "same-place" ? (
+            <p className="text-sm text-muted-foreground">{i18n.t("tree.move.alreadyThere")}</p>
+          ) : null}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <p className="text-sm">{i18n.t("tree.move.destination", { title: destination.title })}</p>
+          {/* Not a footnote: this is the only place the change of audience is stated, and it is
+              stated before the move, not in the audit log afterwards. */}
+          <p role="note" className="rounded-md border border-destructive/50 p-3 text-sm">
+            {i18n.t("tree.move.sharingWarning", { title: destination.title })}
+          </p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => setDestination(null)}
+              className="flex-1 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("tree.move.elsewhere")}
+            </button>
+            <button
+              type="button"
+              onClick={() => submit(destination)}
+              className="flex-1 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("tree.move.confirm")}
+            </button>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+/**
+ * Moving a row, wherever it is asked for.
+ *
+ * ⚠️ It is asked for from two places now (#58): a drop on a folder in the tree, and the menu in the
+ * title line — the keyboard route, which since #58 is the only one the menu still has anywhere. Both
+ * are the same move, so both take it from here rather than each carrying its own mutation. Two
+ * copies of an optimistic update that rewrites two cached levels is how a rejected move ends up
+ * leaving a row standing twice.
+ *
+ * ⚠️ Optimistic, never authoritative. The row is lifted out of one level and dropped into the other
+ * before the server answers, and every refusal — 403, `parent_not_folder`, `move_cycle`,
+ * `update_conflict` — puts both levels back exactly as they were and then re-reads them.
+ *
+ * The caller renders `dialog` where it likes and words `error` itself with `moveErrorKey`: the tree
+ * says it in the sidebar, the menu over the screen, and neither position belongs to the move.
+ */
+export function useTreeMove({
+  onMoved,
+}: {
+  // What the caller wants to do with the destination once the move is through — the tree opens that
+  // folder so the row is where the eye follows it. Nobody else has a tree to open.
+  onMoved?: ((destination: MoveDestination) => void) | undefined;
+} = {}): {
+  start(entry: TreeEntry, destination: MoveDestination | null): void;
+  error: unknown;
+  dialog: React.ReactNode;
+} {
+  const { data } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+  const [moving, setMoving] = useState<{
+    entry: TreeEntry;
+    initial: MoveDestination | null;
+  } | null>(null);
+
+  const move = useMutation({
+    mutationFn: async ({
+      entry,
+      destination,
+    }: {
+      entry: TreeEntry;
+      destination: MoveDestination;
+    }) => {
+      // `baseUpdatedAt` travels with the move: it is what turns a concurrent edit into a 409 the
+      // view can act on instead of an overwrite nobody notices.
+      if (entry.type === "flow") {
+        await data.updateFlow({
+          flowId: entry.id,
+          baseUpdatedAt: entry.flow.updatedAt,
+          parentId: destination.id,
+          idempotencyKey: crypto.randomUUID(),
+        });
+      } else {
+        await data.updateKnowledge({
+          nodeId: entry.id,
+          baseUpdatedAt: entry.node.updatedAt,
+          parentId: destination.id,
+          idempotencyKey: crypto.randomUUID(),
+        });
+      }
+    },
+    onMutate: async ({ entry, destination }) => {
+      const fromKey = treeLevelKey(parentOf(entry));
+      const toKey = treeLevelKey(destination.id);
+      await Promise.all([
+        queryClient.cancelQueries({ queryKey: fromKey }),
+        queryClient.cancelQueries({ queryKey: toKey }),
+      ]);
+      const snapshot = [
+        [fromKey, queryClient.getQueryData<TreeEntry[]>(fromKey)],
+        [toKey, queryClient.getQueryData<TreeEntry[]>(toKey)],
+      ] as const;
+      queryClient.setQueryData<TreeEntry[]>(fromKey, (current) =>
+        current?.filter((row) => row.id !== entry.id),
+      );
+      // A level nobody has opened stays unloaded: writing one here would show a folder's contents
+      // that were never read.
+      queryClient.setQueryData<TreeEntry[]>(toKey, (current) =>
+        current === undefined
+          ? current
+          : [...current.filter((row) => row.id !== entry.id), withParent(entry, destination.id)],
+      );
+      return { snapshot };
+    },
+    onError: (_error, _variables, context) => {
+      for (const [key, value] of context?.snapshot ?? []) queryClient.setQueryData(key, value);
+    },
+    onSuccess: (_result, { destination }) => onMoved?.(destination),
+    onSettled: async (_result, _error, { entry, destination }) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: treeLevelKey(parentOf(entry)) }),
+        queryClient.invalidateQueries({ queryKey: treeLevelKey(destination.id) }),
+        queryClient.invalidateQueries({
+          queryKey: [entry.type === "flow" ? "flows" : "knowledge-graph"],
+        }),
+        queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
+      ]);
+    },
+  });
+
+  return {
+    start(entry, destination) {
+      move.reset();
+      setMoving({ entry, initial: destination });
+    },
+    error: move.isError ? move.error : null,
+    dialog: moving ? (
+      <MoveDialog
+        entry={moving.entry}
+        initial={moving.initial}
+        close={() => setMoving(null)}
+        submit={(destination) => {
+          setMoving(null);
+          move.mutate({ entry: moving.entry, destination });
+        }}
+      />
+    ) : null,
+  };
+}

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

@@ -1,15 +1,31 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Link, useRouterState } from "@tanstack/react-router";
-import { LogOut, User, Wrench } from "lucide-react";
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuItem } from "@/components/ui/sidebar";
 import { loginPath } from "@/data/intel-data-provider/intel-data-provider.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
-// Everything that belongs to the person rather than to the content: the tool catalogue — a live
-// portal query with the signed-in user's own token (ADR-0003), so what it shows depends on who is
-// asking — then the user, then the sign-out.
+/**
+ * Everything that belongs to the person rather than to the content, behind the person (#24).
+ *
+ * The three rows this used to be — the tool catalogue, the name, the sign-out — spent three lines of
+ * sidebar on things nobody opens twice a day. The name and the address stay on screen, because they
+ * are the answer to "who am I signed in as", which is a reading and not an action; the two actions
+ * move behind them.
+ *
+ * The catalogue itself is a live portal query with the signed-in user's own token (ADR-0003), so
+ * what it shows depends on who is asking.
+ */
 export function UserFooter() {
   const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
   const pathname = useRouterState({ select: (state) => state.location.pathname });
   const session = useQuery({ queryKey: ["session"], queryFn: () => data.getSession() });
   const logout = useMutation({
@@ -18,59 +34,70 @@ export function UserFooter() {
   });
 
   const user = session.data ?? null;
-  const primary = user ? (user.name ?? user.email) : null;
+  const primary = user
+    ? (user.name ?? user.email)
+    : session.isPending
+      ? i18n.t("common.loading")
+      : i18n.t("shell.userUnavailable");
   const secondary = user?.name ? user.email : null;
 
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <SidebarMenuButton asChild isActive={pathname === "/tools"} tooltip={i18n.t("nav.tools")}>
-          <Link to="/tools">
-            <Wrench aria-hidden="true" />
-            <span>{i18n.t("nav.tools")}</span>
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-      <SidebarMenuItem>
-        <div
-          data-slot="signed-in-user"
-          className="flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm group-data-[collapsible=icon]:p-0"
-        >
-          <span className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
-            <User aria-hidden="true" className="size-4" />
-          </span>
-          {/* Collapsed to icons the name is not on screen, so the label has to carry it for a
-              screen reader. It is read out in both states; sighted users see it in neither. */}
-          <span className="sr-only">{i18n.t("shell.signedInUser")}</span>
-          <span className="grid flex-1 leading-tight group-data-[collapsible=icon]:hidden">
-            <span className="truncate font-medium">
-              {session.isPending
-                ? i18n.t("common.loading")
-                : (primary ?? i18n.t("shell.userUnavailable"))}
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("shell.userMenu", { name: primary })}
+            data-slot="signed-in-user"
+            data-active={pathname === "/tools"}
+            className="flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[state=open]:bg-sidebar-accent"
+          >
+            <span className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
+              <User aria-hidden="true" className="size-4" />
+            </span>
+            {/* Read out in both states; sighted users see it in neither. It is what tells a screen
+                reader that the name below is a name and not a heading. */}
+            <span className="sr-only">{i18n.t("shell.signedInUser")}</span>
+            <span className="grid min-w-0 flex-1 leading-tight">
+              <span className="truncate font-medium">{primary}</span>
+              {secondary ? (
+                <span className="truncate text-xs text-muted-foreground">{secondary}</span>
+              ) : null}
             </span>
-            {secondary ? (
-              <span className="truncate text-xs text-muted-foreground">{secondary}</span>
-            ) : null}
-          </span>
-        </div>
+            <ChevronsUpDown aria-hidden="true" className="ml-auto size-4 shrink-0" />
+          </DropdownMenuTrigger>
+          {/* Upwards and as wide as its trigger: it opens from the bottom edge of the screen, and
+              a menu that has to be hunted for beside its button is a menu that was not found. */}
+          <DropdownMenuContent
+            side="top"
+            align="start"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+          >
+            <DropdownMenuItem onSelect={() => void navigate({ to: "/tools" })}>
+              <Wrench aria-hidden="true" />
+              {i18n.t("nav.tools")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              disabled={logout.isPending}
+              onSelect={() => logout.mutate()}
+              className="text-destructive focus:text-destructive"
+            >
+              <LogOut aria-hidden="true" />
+              {i18n.t("auth.signOut")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </SidebarMenuItem>
+      {/* ⚠️ Outside the menu on purpose. Choosing sign-out closes the popup, so a refusal rendered
+          inside it would be gone in the same frame it was written — the one message that must
+          survive is the one saying you are still signed in. */}
       {logout.isError ? (
         <SidebarMenuItem>
-          <p role="alert" className="px-2 text-sm text-destructive">
+          <p role="alert" className="px-2 py-1 text-sm text-destructive">
             {i18n.t("auth.signOutFailed")}
           </p>
         </SidebarMenuItem>
       ) : null}
-      <SidebarMenuItem>
-        <SidebarMenuButton
-          onClick={() => logout.mutate()}
-          disabled={logout.isPending}
-          tooltip={i18n.t("auth.signOut")}
-        >
-          <LogOut aria-hidden="true" />
-          <span>{i18n.t("auth.signOut")}</span>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
     </SidebarMenu>
   );
 }

package/src/app/view-toggle/view-toggle.tsx

@@ -0,0 +1,77 @@
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { History, Network, PencilRuler } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { type IntelView, viewFrom } from "@/router/selection-search.ts";
+
+const icons = { editor: PencilRuler, graph: Network, runs: History } as const;
+const labels = {
+  editor: "view.showEditor",
+  graph: "view.showGraph",
+  runs: "view.showRuns",
+} as const;
+
+/**
+ * The switch between the ways the level the sidebar has selected can be shown: editor ↔ graph
+ * everywhere (#19), and editor ↔ graph ↔ runs on a flow (#35).
+ *
+ * **Head, not row — the decision and its reason.** The switch changes how the *current view* is
+ * shown, and the current view is what the header already names in its breadcrumb; a state of the
+ * view belongs beside its name. In the tree row it would have to live inside the row's overflow
+ * menu (#24), and switching back would mean opening that menu again — a toggle that costs two
+ * clicks in one direction and two in the other is no longer a toggle. The objection the ticket
+ * raises against the header is answered by not rendering the switch where there is no graph: a
+ * document, an attachment and the tools screen never mount it, so it cannot stand there with
+ * nothing to point at.
+ *
+ * **Icon, no text.** The visible label is gone and nothing else: the accessible name is on the
+ * button and repeated as a tooltip, so the header stops growing with every new view while a screen
+ * reader still hears the whole sentence.
+ *
+ * ⚠️ It offers the views you are *not* in, one button each, rather than cycling through them. With
+ * two views that is the single toggle #19 decided on, unchanged. With three, a cycle would put the
+ * runs two clicks away from the graph and make the button's meaning depend on where you already
+ * are — every destination stays one click, and every button keeps one name.
+ */
+export function ViewToggle({ views = ["editor", "graph"] }: { views?: readonly IntelView[] }) {
+  const { i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const state = useRouterState({
+    select: (current) => ({
+      pathname: current.location.pathname,
+      search: current.location.search as Record<string, unknown>,
+      view: viewFrom(current.location.search),
+    }),
+  });
+  return (
+    // Its own provider: the shell supplies one, but these buttons are portalled into the header
+    // from a screen and have to keep working wherever they are mounted.
+    <TooltipProvider delayDuration={300}>
+      {views
+        .filter((view) => view !== state.view)
+        .map((view) => {
+          const label = i18n.t(labels[view]);
+          const Icon = icons[view];
+          return (
+            <Tooltip key={view}>
+              <TooltipTrigger
+                type="button"
+                aria-label={label}
+                onClick={() => {
+                  const { view: _view, ...rest } = state.search;
+                  void navigate({
+                    to: state.pathname,
+                    search: view === "editor" ? rest : { ...rest, view },
+                  });
+                }}
+                className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Icon aria-hidden="true" className="size-4" />
+              </TooltipTrigger>
+              <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+          );
+        })}
+    </TooltipProvider>
+  );
+}

package/src/blocknote-view/blocknote-view.tsx

@@ -1,13 +1,30 @@
+import { type DefaultReactSuggestionItem, getDefaultReactSlashMenuItems } from "@blocknote/react";
 import { BlockNoteView as LibraryBlockNoteView } from "@blocknote/shadcn";
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 // BlockNote 0.52's generic view declaration conflicts with exactOptionalPropertyTypes even though
 // useCreateBlockNote returns its matching default editor. Keep that upstream type seam in one place.
 const CompatibleBlockNoteView = LibraryBlockNoteView as unknown as ComponentType<{
   editor: unknown;
   onChange(): void;
+  children?: ReactNode;
 }>;
 
-export function BlockNoteView(props: { editor: unknown; onChange(): void }) {
+// `children` is how BlockNote mounts its own controllers — the slash menu among them — inside the
+// editor's context. It travels through this seam rather than around it, so there is still one place
+// that knows about the library's types.
+export function BlockNoteView(props: { editor: unknown; onChange(): void; children?: ReactNode }) {
   return <CompatibleBlockNoteView {...props} />;
 }
+
+// The same seam once more: the parameter type of BlockNote's own slash-menu helper does not accept
+// an editor built from a schema of ours, because `heading`'s optional `isToggleable` prop fails the
+// library's own `PropSchema` constraint under `exactOptionalPropertyTypes`. The editor is exactly
+// what the helper wants at run time — it is the declaration that cannot say so.
+const compatibleDefaultSlashMenuItems = getDefaultReactSlashMenuItems as unknown as (
+  editor: unknown,
+) => DefaultReactSuggestionItem[];
+
+export function defaultSlashMenuItems(editor: unknown): DefaultReactSuggestionItem[] {
+  return compatibleDefaultSlashMenuItems(editor);
+}