@anchrd/intel-ui 0.5.0 → 0.7.0

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

@@ -1,26 +1,34 @@
 import type {
-  ContextPolicy,
   Flow,
+  FlowValidation,
   KnowledgeNode,
   ResourceVerb,
   UnreadableKnowledge,
 } from "@anchrd/intel-contract";
 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 {
+  Archive,
+  CornerLeftUp,
+  Ellipsis,
+  Link2,
+  Pencil,
+  Share2,
+  ShieldCheck,
+  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,
   DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  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 +36,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 +50,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;
 }
@@ -72,24 +97,21 @@ export function resourceErrorKey(error: unknown): string {
   }
 }
 
-const contextPolicies: readonly ContextPolicy[] = ["pinned", "relevant", "explicit"];
-
 /**
  * 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 +120,18 @@ 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();
+  // ⚠️ Not a query. A validation is a snapshot taken when somebody asks (#72, ADR-0003): cached
+  // under a key it would be re-served later as if it still held, and the one thing it must never
+  // claim is that a moment which has passed is still true.
+  const [validation, setValidation] = useState<FlowValidation | null>(null);
+  const validate = useMutation({
+    mutationFn: () => data.validateFlow(id),
+    onSuccess: setValidation,
+  });
 
   const id = idOf(target);
   const title = titleOf(target);
@@ -168,31 +202,17 @@ export function ResourceMenu({
     },
   });
 
-  const setContextPolicy = useMutation({
-    mutationFn: async (contextPolicy: ContextPolicy) => {
-      if (target.type === "flow") throw new Error("A flow has no retrieval mode");
-      await data.updateKnowledge({
-        nodeId: target.node.id,
-        baseUpdatedAt: target.node.updatedAt,
-        contextPolicy,
-        idempotencyKey: crypto.randomUUID(),
-      });
-    },
-    onSuccess: refresh,
-  });
-
   const failure = rename.isError
     ? null // the rename dialog words its own refusal, beside the field that caused it
     : archive.isError
       ? archive.error
-      : setContextPolicy.isError
-        ? setContextPolicy.error
-        : undefined;
+      : undefined;
 
   return (
     <>
       <DropdownMenu>
         <DropdownMenuTrigger
+          data-resource-menu=""
           aria-label={i18n.t("resource.menu", { title })}
           className={
             variant === "row"
@@ -207,33 +227,19 @@ 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 onSelect={() => move.start(entryOf(target), null)}>
+            <CornerLeftUp aria-hidden="true" />
+            {i18n.t("tree.move.action")}
+          </DropdownMenuItem>
+          {/* Only a flow can be run, so only a flow can be asked whether it would. Rarely needed —
+              which is why it is in the menu and not in the title line (#72). */}
+          {node === null ? (
+            <DropdownMenuItem onSelect={() => validate.mutate()}>
+              <ShieldCheck aria-hidden="true" />
+              {i18n.t("flows.validate")}
             </DropdownMenuItem>
           ) : null}
           {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
-              then only readable by opening a second widget. */}
-          {retrievable && node ? (
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>{i18n.t("knowledge.contextPolicy")}</DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuRadioGroup
-                  value={node.contextPolicy}
-                  onValueChange={(value) => setContextPolicy.mutate(value as ContextPolicy)}
-                >
-                  {contextPolicies.map((policy) => (
-                    <DropdownMenuRadioItem key={policy} value={policy}>
-                      {i18n.t(`knowledge.context.${policy}`)}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          ) : null}
           {linkable ? (
             <DropdownMenuItem onSelect={() => setLinksOpen(true)}>
               <Link2 aria-hidden="true" />
@@ -264,15 +270,42 @@ 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}
+      {/* ⚠️ Every reason at once, not the first one. Somebody with two missing tools should not have
+          to ask twice — and a success says so out loud, because an empty menu after a click reads
+          as "nothing happened" rather than "nothing is in the way". */}
+      {validation ? (
+        <Modal title={i18n.t("flows.validate")} close={() => setValidation(null)}>
+          {validation.problems.length === 0 ? (
+            <p className="text-sm">{i18n.t("flows.validateReady")}</p>
+          ) : (
+            <ul className="space-y-2">
+              {validation.problems.map((problem) => (
+                <li key={problem.code} className="rounded-md border p-3 text-sm">
+                  <span className="block font-medium">
+                    {i18n.t(`flows.problem.${problem.code}`)}
+                  </span>
+                  <span className="mt-1 block text-xs text-muted-foreground">{problem.detail}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+          {/* A snapshot says when it was taken, or it will be read as a standing verdict. */}
+          <p className="mt-4 text-xs text-muted-foreground">
+            {i18n.t("flows.validateWhen", {
+              when: new Date(validation.checkedAt).toLocaleString(),
+            })}
+          </p>
+        </Modal>
+      ) : null}
+      {move.dialog}
       {renaming ? (
         <RenameDialog
           title={title}
@@ -291,6 +324,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" />}