@anchrd/intel-ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/app/action-slot/action-slot.tsx

@@ -10,6 +10,10 @@ import { createPortal } from "react-dom";
 // ⚠️ The slot lives above the component that fills it, so it is not in the document while that
 // component first renders. Looking it up in an effect costs one extra render and is the only order
 // that works; reading it during render finds nothing on the first paint.
+//
+// ⚠️ A portal only ever appends, so the slot decides where its content sits and mount order decides
+// nothing. That is why the shell gives the screens a box of their own next to the search rather
+// than one shared list (see `app.tsx`, #56).
 export function ActionSlot({
   name = "header-actions",
   children,

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

@@ -15,10 +15,11 @@ import {
 import { useRef, useState } from "react";
 import {
   type MoveDestination,
-  MoveDialog,
   moveErrorKey,
   moveVerdict,
   parentOf,
+  treeLevelKey,
+  useTreeMove,
 } from "@/app/tree-move/tree-move.tsx";
 import {
   DropdownMenu,
@@ -36,7 +37,6 @@ import {
 import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
 import { Modal } from "@/modal/modal.tsx";
-import { ResourceMenu } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
 
@@ -79,15 +79,7 @@ type Level = { id: string | null; type: "folder" | "flow" };
 // One key per level. `null` is the root; every expanded row adds one of its own, and nothing else is
 // ever asked for.
 function levelKey(level: Level): readonly unknown[] {
-  return level.type === "flow" ? ["flow-calls", level.id] : ["tree", level.id];
-}
-
-// 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 } };
+  return level.type === "flow" ? ["flow-calls", level.id] : treeLevelKey(level.id);
 }
 
 export function AppTree() {
@@ -103,10 +95,14 @@ export function AppTree() {
   // Which target the pointer is over: `undefined` for none, `null` for the root strip, an id for a
   // folder row. Three answers, because "the root" and "nothing" are not the same drop.
   const [over, setOver] = useState<string | null | undefined>(undefined);
-  const [moving, setMoving] = useState<{
-    entry: TreeEntry;
-    initial: MoveDestination | null;
-  } | null>(null);
+  // The drop's half of the move. The other half is the folder picker in the title line's menu, and
+  // both go through the same mutation (#58, `useTreeMove`) — the tree only adds what a tree can add,
+  // which is opening the folder the row just landed in.
+  const move = useTreeMove({
+    onMoved: (destination) => {
+      if (destination.id !== null) toggle({ id: destination.id, type: "folder" }, true);
+    },
+  });
 
   const location = useRouterState({
     select: (state) => ({
@@ -251,86 +247,6 @@ export function AppTree() {
     },
   });
 
-  // ⚠️ 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, so a
-  // rejected move cannot leave a row standing twice or nowhere at all.
-  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 = levelKey({ id: parentOf(entry), type: "folder" });
-      const toKey = levelKey({ id: destination.id, type: "folder" });
-      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 }) => {
-      if (destination.id !== null) toggle({ id: destination.id, type: "folder" }, true);
-    },
-    onSettled: async (_result, _error, { entry, destination }) => {
-      await Promise.all([
-        queryClient.invalidateQueries({
-          queryKey: levelKey({ id: parentOf(entry), type: "folder" }),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: levelKey({ id: destination.id, type: "folder" }),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: [entry.type === "flow" ? "flows" : "knowledge-graph"],
-        }),
-        queryClient.invalidateQueries({ queryKey: ["relation-graph"] }),
-      ]);
-    },
-  });
-
-  function startMove(entry: TreeEntry, destination: MoveDestination | null) {
-    move.reset();
-    setMoving({ entry, initial: destination });
-  }
-
   // What a drop on this target would do. `undefined` means nothing is being dragged, so the target
   // is not a target at all.
   function verdictFor(
@@ -374,7 +290,7 @@ export function AppTree() {
           setDragged(null);
           draggedRef.current = null;
           if (carried && verdictFor(carried, target.id, ancestors) === "ok") {
-            startMove(carried, target);
+            move.start(carried, target);
           }
         },
       },
@@ -559,17 +475,12 @@ export function AppTree() {
               else setCreating({ parentId: target, kind });
             }}
           />
-          {/* ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no
-              touch worth the name. A capability that exists only for a mouse is missing for
-              everyone else, so moving has a second, equal route — this menu's folder picker. #27
-              opened the menu with that one item; the rest of the row's actions moved in here from
-              the header, which is what #24 is. A row under a flow is what that flow calls, read out
-              of its graph rather than from `parent_id` (ADR-0004 §3): it has no place of its own to
-              be moved from, so it gets no move — and no menu, since renaming the shared flow from
-              under one of its callers would rename it for all of them without saying so. */}
-          {derived ? null : (
-            <ResourceMenu target={entry} variant="row" onMove={() => startMove(entry, null)} />
-          )}
+          {/* ⚠️ Nothing else. The three-dot menu stood here until #58 and does not any more: two
+              buttons per row put ten of them into a 240px column, and one then reads buttons instead
+              of titles — the tree is for reading. Every action it held is in the title line of the
+              thing itself, which every row opens by being clicked, including a folder, whose screen
+              is nothing but that line. Do not put a second one back here: the point of the menu is
+              that it is always in the same place, and two places are not one. */}
         </div>
         {/* The same rows one indent deeper: one row component for every depth, so the plus on the
             fourth level is the same plus as on the first. The list is named after the row it hangs
@@ -598,7 +509,7 @@ export function AppTree() {
         <button
           type="button"
           {...rootDrop.props}
-          onClick={() => startMove(dragged, { id: null, title: i18n.t("tree.move.root") })}
+          onClick={() => move.start(dragged, { id: null, title: i18n.t("tree.move.root") })}
           data-drop={rootDrop.verdict}
           className={`mb-1 flex w-full items-center gap-1 rounded-md border border-dashed px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring ${
             rootDrop.verdict === "ok"
@@ -622,7 +533,7 @@ export function AppTree() {
       ) : null}
       {/* Four refusals, four sentences — and by the time one is read the row is already back where
           it started, because the rollback happens in `onError` rather than here. */}
-      {move.isError ? (
+      {move.error ? (
         <p role="alert" className="px-2 py-1.5 text-sm text-destructive">
           {i18n.t(moveErrorKey(move.error))}
         </p>
@@ -666,17 +577,7 @@ export function AppTree() {
           />
         </Modal>
       ) : null}
-      {moving ? (
-        <MoveDialog
-          entry={moving.entry}
-          initial={moving.initial}
-          close={() => setMoving(null)}
-          submit={(destination) => {
-            setMoving(null);
-            move.mutate({ entry: moving.entry, destination });
-          }}
-        />
-      ) : null}
+      {move.dialog}
     </SidebarGroup>
   );
 }

package/src/app/app.tsx

@@ -91,10 +91,21 @@ export function App() {
               ) : null}
             </BreadcrumbList>
           </Breadcrumb>
-          {/* The bar for area-owned actions. A screen renders into it 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 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/tree-move/tree-move.tsx

@@ -1,5 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+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";
@@ -17,6 +18,20 @@ 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
@@ -195,3 +210,122 @@ export function MoveDialog({
     </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/data/intel-data-provider/intel-data-provider.ts

@@ -84,10 +84,20 @@ export function flowEntry(flow: Flow): TreeEntry {
 }
 
 export function createIntelDataProvider(
-  deps: { fetch?: typeof fetch; baseUrl?: string; onUnauthorized?(): void } = {},
+  deps: {
+    fetch?: typeof fetch;
+    baseUrl?: string;
+    onUnauthorized?(): void;
+    navigate?(url: string): void;
+  } = {},
 ): IntelDataProvider {
   const doFetch = deps.fetch ?? fetch;
   const baseUrl = deps.baseUrl?.replace(/\/$/, "") ?? "";
+  const navigate =
+    deps.navigate ??
+    ((url: string) => {
+      if (typeof window !== "undefined") window.location.assign(url);
+    });
   const unauthorized =
     deps.onUnauthorized ??
     (() => {
@@ -400,8 +410,10 @@ export function createIntelDataProvider(
       return await request("/tools", ToolCatalog);
     },
 
-    portalConnectUrl(returnTo = "/tools") {
-      return `${baseUrl}/auth/connect?returnTo=${encodeURIComponent(returnTo)}`;
+    // The Worker serves the connect route, so this navigation belongs to the data layer for the
+    // same reason `loginPath` does. `silent=1` is what makes it a redirect nobody has to watch.
+    startPortalSignIn(returnTo = "/tools") {
+      navigate(`${baseUrl}/auth/connect?returnTo=${encodeURIComponent(returnTo)}&silent=1`);
     },
     async logout() {
       const response = await doFetch(`${baseUrl}/auth/logout`, {

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

@@ -77,7 +77,10 @@ export interface IntelDataProvider {
   appendKnowledgeTableRows(
     input: AppendKnowledgeTableRowsInput,
   ): Promise<AppendKnowledgeTableRowsResult>;
-  portalConnectUrl(returnTo?: string): string;
+  // Walks the browser through the portal's OAuth flow without asking anybody anything: Gate is the
+  // identity provider Cloudflare Access consumes, so a signed-in person is already known there
+  // (#60). It navigates away — the caller renders no button for it and gets no answer back.
+  startPortalSignIn(returnTo?: string): void;
   listKnowledgeVersions(nodeId: string): Promise<KnowledgeVersionList>;
   updateKnowledge(input: UpdateKnowledgeNodeInput): Promise<KnowledgeNode>;
   archiveKnowledge(input: ArchiveKnowledgeNodeInput): Promise<KnowledgeNode>;

package/src/flows/flows.tsx

@@ -28,11 +28,11 @@ import { nodeIcon } from "@/flows/node-icon/node-icon.ts";
 import { NodePalette, usePaletteOpen } from "@/flows/node-palette/node-palette.tsx";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
 import { Modal } from "@/modal/modal.tsx";
-import { ResourceMenu } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom, viewFrom } from "@/router/selection-search.ts";
 import { SaveButton, UnsavedChangesGuard } from "@/save-button/save-button.tsx";
 import { useSystemTheme } from "@/theme/theme.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
 
 type CanvasNode = Node<{ node: FlowNode }, "intel">;
 type CanvasEdge = Edge;
@@ -664,49 +664,44 @@ function FlowTitle({
     !publishable ? "flows.publishNothing" : unpublished ? "flows.publishNeeded" : "flows.publish",
   );
   return (
-    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
-      <div className="min-w-0">
-        <h2 className="truncate text-lg font-semibold">{flow.title}</h2>
-        {flow.description ? (
-          <p className="mt-1 text-sm text-muted-foreground">{flow.description}</p>
-        ) : null}
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex">
-                {/* Publishing goes through the preview, always. ADR-0004 §5 asks the author to see
+    // ⚠️ The menu stands to the RIGHT of the run button, not before it (#53, deliberate). Run is the
+    // loudest thing in this line and used to hold the edge; the menu takes it, because a menu one can
+    // hit without looking is worth more than the primary button being outermost. `TitleRow` is what
+    // enforces that — nothing passed in here can get past the menu.
+    <TitleRow title={flow.title} description={flow.description} target={{ type: "flow", flow }}>
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex">
+              {/* Publishing goes through the preview, always. ADR-0004 §5 asks the author to see
                     the freeze before it happens, and a second, quieter path around the dialog would
                     be the one everybody ends up using. */}
-                <button
-                  type="button"
-                  onClick={onPublish}
-                  disabled={!publishable}
-                  aria-label={publishLabel}
-                  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 disabled:opacity-50 ${
-                    publishable && unpublished ? "border-primary text-primary" : ""
-                  }`}
-                >
-                  <Send aria-hidden="true" className="size-4" />
-                </button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>{publishLabel}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        <ResourceMenu target={{ type: "flow", flow }} variant="title" />
-        <SaveButton dirty={dirty && canMutate} saving={saving} onSave={onSave} />
-        <button
-          type="button"
-          onClick={onRun}
-          disabled={!canMutate || unpublished || running}
-          className="inline-flex h-8 items-center rounded-md bg-primary px-3 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("flows.run")}
-        </button>
-      </div>
-    </div>
+              <button
+                type="button"
+                onClick={onPublish}
+                disabled={!publishable}
+                aria-label={publishLabel}
+                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 disabled:opacity-50 ${
+                  publishable && unpublished ? "border-primary text-primary" : ""
+                }`}
+              >
+                <Send aria-hidden="true" className="size-4" />
+              </button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>{publishLabel}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <SaveButton dirty={dirty && canMutate} saving={saving} onSave={onSave} />
+      <button
+        type="button"
+        onClick={onRun}
+        disabled={!canMutate || unpublished || running}
+        className="inline-flex h-8 items-center rounded-md bg-primary px-3 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("flows.run")}
+      </button>
+    </TitleRow>
   );
 }
 

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

@@ -1,6 +1,7 @@
 import { Plus, X } from "lucide-react";
 import { useId, useRef, useState } from "react";
 import { type NodeIcon, nodeIcon } from "@/flows/node-icon/node-icon.ts";
+import { cn } from "@/lib/utils.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import type { NodePaletteProps, PaletteKind } from "./node-palette.types.ts";
 
@@ -111,11 +112,29 @@ export function NodePalette<K extends PaletteKind>({
     }
   }
 
-  // ⚠️ `w-max` below: an absolutely positioned box shrink-wraps its widest child, and collapsed that
-  // is the 36px trigger. Without it the open bar inherits those 36px as its own maximum and folds
-  // seven entries into a single column — the flex row wraps after every item.
+  // Open, the trigger is the first segment of the bar itself rather than a second box above it: one
+  // closes a bar where it is. Two details carry that and neither is decoration:
+  //
+  // ⚠️ The negative margin is the frame's own padding plus its border. Opening hands the frame from
+  // the trigger to the row around it, and a frame drawn inside would push the trigger down and right
+  // by exactly that sum. The margin lets the row grow outwards instead, so the 36px one clicks stays
+  // on the same pixel open and collapsed. Change `p-1` and this has to change with it.
+  //
+  // ⚠️ The toolbar stays an element of its own inside the row: it is what `aria-controls` names and
+  // what the arrow keys walk, and the trigger must not become an eighth entry in that ring.
+  //
+  // The `w-max` that used to stand here went with the structure it guarded. While the bar was a
+  // block below the trigger, the shrink-wrapped box took the collapsed 36px as its maximum and
+  // folded the entries into a column; one flex row is sized from its content in either state, which
+  // was measured at 1280px and at 420px with the class and without it (#55).
   return (
-    <div className="absolute left-4 top-4 z-10 w-max max-w-[calc(100%-2rem)]">
+    <div
+      className={cn(
+        "absolute left-4 top-4 z-10 max-w-[calc(100%-2rem)]",
+        open &&
+          "-m-[calc(0.25rem+1px)] flex flex-wrap items-center gap-1 rounded-lg border bg-card/95 p-1 shadow-sm backdrop-blur",
+      )}
+    >
       <button
         ref={triggerRef}
         type="button"
@@ -123,7 +142,10 @@ export function NodePalette<K extends PaletteKind>({
         aria-controls={listId}
         onClick={() => (open ? close() : setOpen(true))}
         onKeyDown={onTriggerKeyDown}
-        className="inline-flex size-9 items-center justify-center rounded-lg border bg-card/95 text-card-foreground shadow-sm outline-none backdrop-blur hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-card-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+          !open && "border bg-card/95 shadow-sm backdrop-blur",
+        )}
       >
         {open ? (
           <X aria-hidden="true" className="size-4" />
@@ -143,7 +165,9 @@ export function NodePalette<K extends PaletteKind>({
           aria-orientation="horizontal"
           aria-label={i18n.t("flows.nodePalette")}
           onKeyDown={onListKeyDown}
-          className="mt-2 flex max-w-full flex-wrap gap-1 rounded-lg border bg-card/95 p-2 shadow-sm backdrop-blur"
+          // `min-w-0` so a narrow bar makes the entries wrap among themselves instead of forcing the
+          // whole row wider than the canvas allows.
+          className="flex min-w-0 max-w-full flex-wrap gap-1"
         >
           {kinds.map((kind, index) => {
             const Icon: NodeIcon = nodeIcon[kind];
@@ -160,7 +184,9 @@ export function NodePalette<K extends PaletteKind>({
                   setActive(index);
                   add(kind);
                 }}
-                className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+                // `h-9` is the trigger's height: sharing one row only reads as one row if the entries
+                // start on the trigger's top edge instead of floating in the middle of it.
+                className="inline-flex h-9 items-center gap-1.5 rounded-md px-2 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
               >
                 <Icon aria-hidden="true" className="size-3.5" />
                 {i18n.t(`flows.node.${kind}`)}

package/src/i18n/en.json

@@ -138,10 +138,9 @@
   "knowledge.link.unresolved": "Unavailable document",
   "knowledge.saveConflict": "This document changed elsewhere. Reload it before saving again.",
   "knowledge.saveError": "This document could not be saved. Reload and try again.",
-  "tools.connect": "Connect the portal",
-  "tools.reconnect": "Reconnect the portal",
-  "tools.disconnected": "Portal not connected",
-  "tools.disconnectedHelp": "Sign in to the company MCP portal once. The portal decides which servers you may use and holds their credentials; Intel never sees them.",
+  "tools.signingIn": "Signing you in to the company portal…",
+  "tools.noAccess": "No access to the company portal",
+  "tools.noAccessHelp": "Your Intel account does not reach the company MCP portal, so there is nothing to show here. An administrator decides in the portal who may use which server; ask them to include you.",
   "tools.empty": "No tools available to you",
   "tools.emptyHelp": "The portal answered, and it offers your account no tools. An administrator decides in the portal which servers exist and who may reach them.",
   "tools.unreachable": "Portal not reachable",
@@ -152,7 +151,6 @@
   "tools.outputSchema": "Result schema",
   "tools.destructiveShort": "Destructive",
   "tools.liveNote": "This list is a live query with your own portal access. Intel stores neither the tools nor who may use them; the portal decides both.",
-  "tools.connectFailed": "The portal could not be connected with your current access.",
   "tools.arguments": "Arguments",
   "tools.invalidJson": "The arguments must be a JSON object in curly braces; a list or a single value will not work.",
   "flows.select": "Select a flow or create one to open the visual editor.",

package/src/knowledge/knowledge.tsx

@@ -8,9 +8,9 @@ import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { GraphPane } from "@/graph-pane/graph-pane.tsx";
 import { KnowledgeTablePanel } from "@/knowledge-table/knowledge-table.tsx";
-import { ResourceMenu } from "@/resource-menu/resource-menu.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
 
 const KnowledgeEditor = lazy(async () => ({
   default: (await import("@/knowledge-editor/knowledge-editor.tsx")).KnowledgeEditor,
@@ -57,7 +57,11 @@ export function Knowledge() {
         </ActionSlot>
       ) : null}
       <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
-        {graphable && selection.graph ? (
+        {/* ⚠️ Only the root draws its graph on its own. A folder's graph hangs *under* the folder's
+            title line rather than in place of it (#58): the line is the one place its menu lives,
+            and a folder that could only be renamed while the graph happened to be switched off
+            would be a folder one cannot rename. */}
+        {selectedId === null && selection.graph ? (
           <GraphPane
             query={relations}
             select={(node) =>
@@ -89,42 +93,48 @@ export function Knowledge() {
         ) : (
           <>
             {/* The document's own line: its name, and beside it only what acts on this one
-                document. What the four loose icons used to do is now one menu, the same one the
-                tree row carries — the point of #24 was that there be one place per action, not a
-                second row of them here. Saving joins it from the strip it used to own below
-                (`title-actions`), so the editor starts one screen row higher than it did.
+                document. What the four loose icons used to do is now one menu (#24) — and since #58
+                this line is the only place that menu appears at all, for every kind including a
+                folder, whose whole screen is this line.
+                ⚠️ The order of the right-hand group is `TitleRow`'s (#53), not this screen's: the
+                version button is handed over as a child and lands before the menu whatever else
+                shows up later.
                 ⚠️ The view switch is deliberately NOT here: it changes how the current area is
                 shown, not the document, and it stays beside the breadcrumb where the area is
                 named. */}
-            <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
-              <div className="min-w-0">
-                <h2 className="truncate text-lg font-semibold">{selected.title}</h2>
-                {selected.description && (
-                  <p className="mt-1 text-sm text-muted-foreground">{selected.description}</p>
-                )}
-              </div>
-              <div className="flex shrink-0 items-center gap-2">
-                {selected.kind !== "folder" && (
-                  <TooltipProvider delayDuration={300}>
-                    <Tooltip>
-                      <TooltipTrigger
-                        type="button"
-                        onClick={() => setVersionsOpen((value) => !value)}
-                        aria-label={i18n.t("knowledge.versions")}
-                        aria-expanded={versionsOpen}
-                        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"
-                      >
-                        <History aria-hidden="true" className="size-4" />
-                      </TooltipTrigger>
-                      <TooltipContent>{i18n.t("knowledge.versions")}</TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
-                <ResourceMenu target={{ type: "knowledge", node: selected }} variant="title" />
-                <div data-slot="title-actions" className="flex items-center gap-2" />
-              </div>
-            </div>
-            {selected.kind === "folder" ? (
+            <TitleRow
+              title={selected.title}
+              description={selected.description}
+              target={{ type: "knowledge", node: selected }}
+            >
+              {selected.kind !== "folder" && (
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger
+                      type="button"
+                      onClick={() => setVersionsOpen((value) => !value)}
+                      aria-label={i18n.t("knowledge.versions")}
+                      aria-expanded={versionsOpen}
+                      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"
+                    >
+                      <History aria-hidden="true" className="size-4" />
+                    </TooltipTrigger>
+                    <TooltipContent>{i18n.t("knowledge.versions")}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </TitleRow>
+            {graphable && selection.graph ? (
+              <GraphPane
+                query={relations}
+                select={(node) =>
+                  void navigate({
+                    to: node.kind === "flow" ? "/flows" : "/knowledge",
+                    search: { select: node.id },
+                  })
+                }
+              />
+            ) : selected.kind === "folder" ? (
               <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
                 {i18n.t("knowledge.folderHelp")}
               </div>

package/src/knowledge-table/knowledge-table.tsx

@@ -1,6 +1,7 @@
 import type { KnowledgeNode } from "@anchrd/intel-contract";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Download } from "lucide-react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
 /**
@@ -43,25 +44,36 @@ export function KnowledgeTablePanel({ node }: { node: KnowledgeNode }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex items-center justify-between gap-4 border-b px-4 py-2">
-        <p className="text-sm text-muted-foreground">
-          {table.data
-            ? i18n.t("knowledge.table.summary", {
-                rows: table.data.rows.length,
-                columns: table.data.columns.length,
-              })
-            : ""}
-        </p>
+      {/* ⚠️ Both of these used to be a second bar of their own, directly under the title line (#54):
+          two headers stacked, and the table starting a whole row lower for it. A table is one
+          Knowledge kind among four, not a screen with its own chrome — so the count goes beside the
+          title as a quiet word and the export joins the buttons in the title line. They are rendered
+          from here rather than from the screen because this is where the query lives; the screen
+          would otherwise have to load a table it does not show. */}
+      <ActionSlot name="title-meta">
+        {table.data
+          ? i18n.t("knowledge.table.summary", {
+              rows: table.data.rows.length,
+              columns: table.data.columns.length,
+            })
+          : ""}
+      </ActionSlot>
+      <ActionSlot name="title-actions">
         <button
           type="button"
           onClick={() => download.mutate()}
+          // Unchanged: nothing to export before the header is known, and a button that answers with
+          // an empty file is worse than one that says it is not ready.
           disabled={download.isPending || !table.data?.columns.length}
-          className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          className="inline-flex h-8 items-center gap-2 rounded-md border px-3 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
         >
           <Download aria-hidden="true" className="size-4" />
           {i18n.t("knowledge.table.download")}
         </button>
-      </div>
+      </ActionSlot>
+      {/* ⚠️ The refusal stays down here, in the body, where a sentence has room to be read. The
+          title line has none — a failed export that only greyed a button in a header would be a
+          failure nobody is told about. */}
       {download.isError ? (
         <p role="alert" className="mx-6 mt-4 text-sm text-destructive">
           {i18n.t("knowledge.downloadFailed")}

package/src/resource-menu/resource-menu.tsx

@@ -8,7 +8,9 @@ import type {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { Archive, CornerLeftUp, Ellipsis, Link2, Pencil, Share2, Trash2 } from "lucide-react";
+import type * as React from "react";
 import { useState } from "react";
+import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,6 +23,8 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { flowEntry } from "@/data/intel-data-provider/intel-data-provider.ts";
+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";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -28,9 +32,11 @@ import { selectedFrom } from "@/router/selection-search.ts";
 /**
  * What a resource's own actions are, at the place the resource stands (#24).
  *
- * One component for both places it appears — the tree row in the sidebar and the title line of the
- * open document or flow — because they are the same menu on the same thing. Two components would be
- * the loose icon row this ticket removes, only spread over two files instead of one.
+ * ⚠️ Since #58 there is exactly one such place: the title line of the open document, table,
+ * attachment, folder or flow. The tree row used to carry the same menu, which put ten buttons into a
+ * 240px column and made the sidebar something to read buttons in rather than titles. Everything the
+ * row menu could do is reached here — including moving, which is why this component owns the folder
+ * picker rather than being handed one.
  *
  * ⚠️ An entry that does not apply is absent, never disabled: a folder has no retrieval mode, a flow
  * is shared through the folder it is filed in rather than on its own (ADR-0004 §2). A greyed-out row
@@ -40,6 +46,21 @@ export type ResourceTarget =
   | { type: "knowledge"; node: KnowledgeNode }
   | { type: "flow"; flow: Flow };
 
+// The same thing as a tree row, because that is what a move works on: a row with a place in the
+// shared tree. The two shapes are the same record seen from two screens, so this is a re-labelling
+// and never a second source of truth.
+function entryOf(target: ResourceTarget): TreeEntry {
+  return target.type === "flow"
+    ? flowEntry(target.flow)
+    : {
+        type: "knowledge",
+        id: target.node.id,
+        title: target.node.title,
+        kind: target.node.kind,
+        node: target.node,
+      };
+}
+
 function idOf(target: ResourceTarget): string {
   return target.type === "knowledge" ? target.node.id : target.flow.id;
 }
@@ -77,19 +98,18 @@ const contextPolicies: readonly ContextPolicy[] = ["pinned", "relevant", "explic
 /**
  * The three-dot menu.
  *
- * `variant` is only how the trigger is painted. In the sidebar it follows the plus exactly — hidden
- * until the row is hovered or something in it takes focus, always there below `md` — because a
- * capability a keyboard cannot reach is missing for everyone who does not use a mouse. In a title
- * line it is a plain icon button beside the other header actions.
+ * `variant` is only how the trigger is painted. `title` is the one in use: a plain icon button at
+ * the end of a title line, put there by `TitleRow` and by nobody else, so it is always the last
+ * thing in that line (#53). `row` is the sidebar form — hidden until the row is hovered or something
+ * in it takes focus — and is unused since #58; it is kept because the trigger's two paintings are
+ * the only difference between the two places, and re-deriving it would be the harder half.
  */
 export function ResourceMenu({
   target,
   variant,
-  onMove,
 }: {
   target: ResourceTarget;
   variant: "row" | "title";
-  onMove?: (() => void) | undefined;
 }) {
   const { data, i18n } = useIntelRouterContext();
   const queryClient = useQueryClient();
@@ -98,6 +118,10 @@ export function ResourceMenu({
   const [sharing, setSharing] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
   const selected = useRouterState({ select: (state) => selectedFrom(state.location.search) });
+  // ⚠️ Dragging is a pointer gesture and nothing else: no keyboard, no screen reader, no touch worth
+  // the name. #27 gave moving a second, equal route through a folder picker, and that route lived in
+  // the tree row's menu. With the row menu gone (#58) it lives here, or it does not exist.
+  const move = useTreeMove();
 
   const id = idOf(target);
   const title = titleOf(target);
@@ -193,6 +217,7 @@ export function ResourceMenu({
     <>
       <DropdownMenu>
         <DropdownMenuTrigger
+          data-resource-menu=""
           aria-label={i18n.t("resource.menu", { title })}
           className={
             variant === "row"
@@ -207,12 +232,10 @@ export function ResourceMenu({
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
-          {onMove ? (
-            <DropdownMenuItem onSelect={onMove}>
-              <CornerLeftUp aria-hidden="true" />
-              {i18n.t("tree.move.action")}
-            </DropdownMenuItem>
-          ) : null}
+          <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
+            <CornerLeftUp aria-hidden="true" />
+            {i18n.t("tree.move.action")}
+          </DropdownMenuItem>
           {retrievable || linkable || node ? <DropdownMenuSeparator /> : null}
           {/* ⚠️ A submenu with a checked value, not an embedded `select`. A form control inside a
               menu takes the keyboard away from the menu that contains it, and the current value is
@@ -264,15 +287,15 @@ export function ResourceMenu({
         </DropdownMenuContent>
       </DropdownMenu>
       {/* The menu closes on selection, so a refusal has nowhere to live inside it. It stands over
-          the screen instead, where it is read whether the tree or the title line asked. */}
+          the screen instead, where it is read whatever the title line asked for. */}
       {failure !== undefined && failure !== null ? (
-        <p
-          role="alert"
-          className="fixed inset-x-0 bottom-5 z-50 mx-auto w-fit max-w-md rounded-lg border border-destructive/30 bg-card px-4 py-3 text-sm text-destructive shadow-xl"
-        >
-          {i18n.t(resourceErrorKey(failure))}
-        </p>
+        <MenuFailure>{i18n.t(resourceErrorKey(failure))}</MenuFailure>
       ) : null}
+      {/* ⚠️ A move has four refusals of its own and they are told apart by `moveErrorKey`, not by
+          `resourceErrorKey`: "that is not a folder" and "that would be a loop" have no equivalent
+          among the changes above, and one shared sentence would leave the reader guessing. */}
+      {move.error ? <MenuFailure>{i18n.t(moveErrorKey(move.error))}</MenuFailure> : null}
+      {move.dialog}
       {renaming ? (
         <RenameDialog
           title={title}
@@ -291,6 +314,18 @@ export function ResourceMenu({
   );
 }
 
+// One refusal, over the screen rather than in the menu that is already gone by the time it arrives.
+function MenuFailure({ children }: { children: React.ReactNode }) {
+  return (
+    <p
+      role="alert"
+      className="fixed inset-x-0 bottom-5 z-50 mx-auto w-fit max-w-md rounded-lg border border-destructive/30 bg-card px-4 py-3 text-sm text-destructive shadow-xl"
+    >
+      {children}
+    </p>
+  );
+}
+
 function RenameDialog({
   title,
   pending,

package/src/title-row/title-row.tsx

@@ -0,0 +1,49 @@
+import type * as React from "react";
+import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
+
+/**
+ * The one line an open thing gets: its name on the left, everything that acts on it on the right
+ * (#53).
+ *
+ * ⚠️ The order of the right-hand group belongs to this component, not to its callers. Whatever they
+ * pass as `children` is rendered before the menu and the menu is appended last, always — so a screen
+ * that grows a new button cannot push the three dots to the left, and there is no second place where
+ * the rule could be forgotten. That is the whole point: the menu holds rename, move, share and
+ * archive, and a position one has to look for is a position one stops using.
+ *
+ * The two slots are for what belongs to this thing but lives further down the tree, where its state
+ * is. `title-meta` is a quiet word beside the name (a table's row count); `title-actions` is a
+ * button in the group (saving a document, exporting a table). Both are filled through `ActionSlot`
+ * and both sit before the menu for the same reason `children` do.
+ */
+export function TitleRow({
+  title,
+  description,
+  target,
+  children,
+}: {
+  title: string;
+  description?: string | null;
+  target: ResourceTarget;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-baseline gap-3">
+          <h2 className="truncate text-lg font-semibold">{title}</h2>
+          <span data-slot="title-meta" className="shrink-0 text-sm text-muted-foreground" />
+        </div>
+        {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {/* ⚠️ Document order is tab order here — nothing carries a `tabIndex`. The menu is therefore
+          reached last by the keyboard for the same reason it stands last on screen, and the two
+          cannot drift apart without someone rewriting this line. */}
+      <div className="flex shrink-0 items-center gap-2">
+        <div data-slot="title-actions" className="flex items-center gap-2" />
+        {children}
+        <ResourceMenu target={target} variant="title" />
+      </div>
+    </div>
+  );
+}

package/src/tools/tools.tsx

@@ -1,10 +1,9 @@
 import type { ToolCapability } from "@anchrd/intel-contract";
 import { useQuery } from "@tanstack/react-query";
 import { useRouterState } from "@tanstack/react-router";
-import { AlertTriangle, ChevronRight, LogIn, PlugZap, Wrench } from "lucide-react";
-import type * as React from "react";
-import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { AlertTriangle, ChevronRight, PlugZap, ShieldOff, Wrench } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import type { I18n } from "@/i18n/i18n.types.ts";
 import { useIntelRouterContext } from "@/router/router-context.ts";
@@ -20,6 +19,23 @@ function toolOrigin(name: string): string | null {
   return boundary > 0 ? name.slice(0, boundary) : null;
 }
 
+// Signed in to Intel is signed in to the portal, so the sign-in is attempted at most once per
+// visit. A second attempt after a refusal would be a redirect loop with an unchanging answer, and
+// the marker in the URL only survives until the next navigation — the browser session remembers it
+// instead (#60).
+const SignInAttemptKey = "intel.portal-sign-in-attempted";
+
+// Reading `sessionStorage` throws outright in a few privacy modes, so the guard is a try, not a
+// feature check. Losing the note costs one extra redirect, and the marker the refusal leaves in the
+// URL still ends the walk — it must never cost the screen.
+function attemptStore(): Storage | null {
+  try {
+    return typeof window === "undefined" ? null : window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
 // The catalog is one live `tools/list` with the signed-in user's own portal token. Nothing here is
 // stored, mirrored or administered — the screen shows what the portal answers and nothing else.
 export function Tools() {
@@ -28,36 +44,34 @@ export function Tools() {
   // A hit from the header search arrives as `?select=<tool name>`, and the row it names opens with
   // the list. Nothing else about the row changes: it is still only a disclosure.
   const requested = useRouterState({ select: (state) => selectedFrom(state.location.search) });
-  // The portal connect flow returns here with a marker when it refuses. Only its presence is used:
-  // the value is attacker-controlled and could carry provider detail, so it is never rendered.
-  const connectFailed =
+  // The silent sign-in returns here with a marker when the portal refused. Only its presence is
+  // used: the value comes from outside and could carry provider detail, so it is never rendered.
+  const refused =
     typeof window !== "undefined" &&
     new URLSearchParams(window.location.search).has("connectError");
+  const [signingIn, setSigningIn] = React.useState(false);
+
+  // ⚠️ Nobody is asked to start this. The portal sign-in is a browser redirect, so the screen
+  // begins it itself the moment the catalog says there is no portal session yet — that is the whole
+  // of what replaced the "Connect the portal" button.
+  React.useEffect(() => {
+    if (!catalog.data) return;
+    const attempts = attemptStore();
+    if (catalog.data.portalConnected) {
+      // An answered sign-in frees the next one: when the token later expires beyond renewal, the
+      // same silent walk runs again rather than stopping at a screen.
+      attempts?.removeItem(SignInAttemptKey);
+      return;
+    }
+    if (refused || attempts?.getItem(SignInAttemptKey)) return;
+    attempts?.setItem(SignInAttemptKey, "1");
+    setSigningIn(true);
+    data.startPortalSignIn("/tools");
+  }, [catalog.data, data, refused]);
 
   return (
     <div className="min-h-full p-8">
-      {catalog.data?.portalConnected ? (
-        <ActionSlot>
-          <a
-            href={data.portalConnectUrl("/tools")}
-            className={buttonVariants({ variant: "outline", size: "sm" })}
-          >
-            <LogIn aria-hidden="true" />
-            {i18n.t("tools.reconnect")}
-          </a>
-        </ActionSlot>
-      ) : null}
-
       <div className="mx-auto w-full max-w-4xl space-y-5">
-        {connectFailed && (
-          <p
-            role="alert"
-            className="rounded-md border border-destructive/30 p-3 text-sm text-destructive"
-          >
-            {i18n.t("tools.connectFailed")}
-          </p>
-        )}
-
         {catalog.isPending ? (
           <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
         ) : catalog.isError ? (
@@ -74,16 +88,21 @@ export function Tools() {
             </Button>
           </Notice>
         ) : !catalog.data.portalConnected ? (
-          <Notice
-            icon={<PlugZap aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}
-            title={i18n.t("tools.disconnected")}
-            help={i18n.t("tools.disconnectedHelp")}
-          >
-            <a href={data.portalConnectUrl("/tools")} className={buttonVariants()}>
-              <LogIn aria-hidden="true" />
-              {i18n.t("tools.connect")}
-            </a>
-          </Notice>
+          signingIn ? (
+            <p className="text-sm text-muted-foreground">{i18n.t("tools.signingIn")}</p>
+          ) : (
+            // The end of the silent walk for somebody no Access policy carries. It is a sentence
+            // about access, not an invitation to connect: there is nothing they could click that
+            // would change the answer, and what the portal replied is not repeated here.
+            <Notice
+              alert
+              icon={
+                <ShieldOff aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />
+              }
+              title={i18n.t("tools.noAccess")}
+              help={i18n.t("tools.noAccessHelp")}
+            />
+          )
         ) : catalog.data.items.length === 0 ? (
           <Notice
             icon={<Wrench aria-hidden="true" className="mx-auto size-8 text-muted-foreground" />}