@anchrd/intel-ui 0.5.0 → 0.7.0

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

@@ -1,6 +1,8 @@
+import { flowNodeLayer } from "@anchrd/intel-contract";
 import { Plus, X } from "lucide-react";
-import { useId, useRef, useState } from "react";
+import { Fragment, 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 +113,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 +143,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,28 +166,45 @@ 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];
             const reason = disabledReason?.(kind) ?? null;
+            // ⚠️ A separator before the first entry of each layer after the first (D25). It is
+            // decoration, not structure: the toolbar's keyboard walks `[data-palette-item]`, so a
+            // divider in between must not be one — otherwise the arrows would stop on a line.
+            const opensLayer =
+              index > 0 && flowNodeLayer[kind] !== flowNodeLayer[kinds[index - 1] ?? kind];
             return (
-              <button
-                key={kind}
-                type="button"
-                data-palette-item=""
-                disabled={reason !== null}
-                title={reason ?? undefined}
-                tabIndex={index === active ? 0 : -1}
-                onClick={() => {
-                  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"
-              >
-                <Icon aria-hidden="true" className="size-3.5" />
-                {i18n.t(`flows.node.${kind}`)}
-              </button>
+              <Fragment key={kind}>
+                {opensLayer ? (
+                  <span
+                    aria-hidden="true"
+                    className="mx-1 my-1.5 w-px self-stretch bg-border"
+                    title={i18n.t(`flows.layer.${flowNodeLayer[kind]}`)}
+                  />
+                ) : null}
+                <button
+                  type="button"
+                  data-palette-item=""
+                  disabled={reason !== null}
+                  title={reason ?? undefined}
+                  tabIndex={index === active ? 0 : -1}
+                  onClick={() => {
+                    setActive(index);
+                    add(kind);
+                  }}
+                  // `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}`)}
+                </button>
+              </Fragment>
             );
           })}
         </div>

package/src/folder-contents/folder-contents.tsx

@@ -0,0 +1,106 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { treeLevelKey } from "@/app/tree-move/tree-move.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const icons: Record<TreeEntry["kind"], string> = {
+  folder: "knowledge.kind.folder",
+  document: "knowledge.kind.document",
+  attachment: "knowledge.kind.attachment",
+  table: "knowledge.kind.table",
+  flow: "knowledge.kind.flow",
+};
+
+/**
+ * A folder's own screen: what lies directly in it, as a table.
+ *
+ * ⚠️ It reads the SAME query the sidebar reads for the same folder — `treeLevelKey`, filled by
+ * `listTreeChildren`. Not a second call and not a second cache entry: two readers of one folder that
+ * fetch separately show it differently the moment one of them is stale, and that is the kind of
+ * difference a customer finds before anybody here does. The other half of the bargain is free —
+ * every invalidation the tree already does after a create, a move or an archive lands here too.
+ */
+export function FolderContents({ folderId }: { folderId: string }) {
+  const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const level = useQuery({
+    queryKey: treeLevelKey(folderId),
+    queryFn: () => data.listTreeChildren(folderId),
+  });
+
+  if (level.isPending) {
+    return <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>;
+  }
+  if (level.isError) {
+    return (
+      <p role="alert" className="p-6 text-sm text-destructive">
+        {i18n.t("knowledge.folderFailed")}
+      </p>
+    );
+  }
+
+  const entries = level.data ?? [];
+  // ⚠️ An empty folder keeps a sentence, unlike an empty row in the tree (#59). A folder IS this
+  // screen: a blank rectangle leaves someone who just created it with nowhere to go, which is the
+  // same reason `tree.empty` survives at the root.
+  if (entries.length === 0) {
+    return (
+      <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+        {i18n.t("knowledge.folderEmpty")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto p-4">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{i18n.t("common.title")}</TableHead>
+            <TableHead>{i18n.t("knowledge.kind")}</TableHead>
+            <TableHead>{i18n.t("knowledge.changed")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {entries.map((entry) => {
+            const changed = entry.type === "flow" ? entry.flow.updatedAt : entry.node.updatedAt;
+            return (
+              <TableRow key={entry.id}>
+                {/* ⚠️ The button carries the whole cell rather than the cell carrying an onClick.
+                    A row that only reacts to a mouse is a row nobody can reach with a keyboard, and
+                    a `<tr onClick>` has no name to read out either. */}
+                <TableCell className="p-0">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      void navigate({
+                        to: entry.type === "flow" ? "/flows" : "/knowledge",
+                        search: { select: entry.id },
+                      })
+                    }
+                    className="w-full px-2 py-2 text-left outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {entry.title}
+                  </button>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{i18n.t(icons[entry.kind])}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  {new Date(changed).toLocaleDateString()}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/i18n/en.json

@@ -84,11 +84,15 @@
   "knowledge.table.empty": "No rows yet. Rows are appended by flows and agents.",
   "knowledge.table.undefined": "This table has no columns yet.",
   "knowledge.select": "Select a document or folder to work with it.",
-  "knowledge.folderHelp": "Select a child document, or create something inside this folder.",
-  "knowledge.contextPolicy": "AI context policy",
-  "knowledge.context.pinned": "Pinned in scope",
-  "knowledge.context.relevant": "Load when relevant",
-  "knowledge.context.explicit": "Only when referenced",
+  "knowledge.folderEmpty": "Nothing in this folder yet. Create something with the plus in the sidebar.",
+  "knowledge.folderFailed": "This folder could not be read.",
+  "knowledge.kind": "Kind",
+  "knowledge.changed": "Changed",
+  "knowledge.kind.folder": "Folder",
+  "knowledge.kind.document": "Document",
+  "knowledge.kind.attachment": "Upload",
+  "knowledge.kind.table": "Table",
+  "knowledge.kind.flow": "Flow",
   "knowledge.share": "Share",
   "knowledge.shareAction": "Grant access",
   "knowledge.email": "Email address",
@@ -138,10 +142,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 +155,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.",
@@ -160,25 +162,40 @@
   "flows.publish": "Publish",
   "flows.publishNothing": "Nothing new to publish",
   "flows.publishNeeded": "Publish — no run can start until you do",
-  "flows.run": "Start run",
-  "flows.runStarted": "Durable run started",
+  "flows.validate": "Check whether it would run",
+  "flows.validateReady": "This flow would start now.",
+  "flows.validateWhen": "Checked {when}. Tool access is asked with your own token each time, so this answer is a snapshot.",
+  "flows.problem.flow_execute_forbidden": "You may not run this flow",
+  "flows.problem.flow_not_published": "The flow is not published",
+  "flows.problem.flow_graph_invalid": "The graph cannot be run",
+  "flows.problem.flow_tools_unavailable": "A tool is out of reach",
+  "flows.problem.flow_knowledge_forbidden": "Material a step reads is out of reach",
+  "flows.problem.flow_subflow_unavailable": "A called flow is unavailable",
+  "flows.problem.flow_subflow_not_published": "A called flow is not published",
   "flows.addNode": "Add a step",
   "flows.closePalette": "Close the step bar",
   "flows.nodePalette": "Step types",
   "flows.node.trigger": "Start",
   "flows.startExists": "A flow has exactly one start, and this one already has it.",
   "flows.node.instruction": "Instruction",
-  "flows.node.knowledge": "Knowledge",
+  "flows.node.folder": "Folder",
+  "flows.node.document": "Document",
+  "flows.node.upload": "Upload",
+  "flows.node.table": "Table",
   "flows.node.tool": "Tool",
   "flows.node.condition": "Condition",
-  "flows.node.approval": "Approval",
-  "flows.node.subflow": "Sub-flow",
-  "flows.node.output": "Output",
+  "flows.node.subflow": "Flow",
+  "flows.node.output": "End",
   "flows.instruction": "Instruction for the AI or person",
   "flows.instructionHint": "Conditions, checks and branches can be described here in words. You do not need a separate node for every small decision.",
-  "flows.knowledgeIds": "Knowledge references",
-  "flows.knowledgeEmpty": "Create a knowledge item before adding this step.",
-  "flows.knowledgeQuery": "Semantic retrieval hint",
+  "flows.linkEmpty": "Nothing chosen yet",
+  "picker.search": "Search by name",
+  "picker.top": "All folders",
+  "picker.open": "Open {title}",
+  "picker.nothing": "Nothing here",
+  "flows.layer.marker": "Markers",
+  "flows.layer.step": "Steps",
+  "flows.layer.link": "Links",
   "flows.subflowTarget": "Flow to call",
   "flows.selectSubflow": "Select a flow to call",
   "flows.subflowRule": "A flow may call a flow in its own folder or below it, or one in a folder every user may run. Publishing names the reason if it may not.",

package/src/knowledge/knowledge.tsx

@@ -6,11 +6,12 @@ import { lazy, Suspense, useState } from "react";
 import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
 import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { FolderContents } from "@/folder-contents/folder-contents.tsx";
 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 +58,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,45 +94,49 @@ 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" ? (
-              <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
-                {i18n.t("knowledge.folderHelp")}
-              </div>
+            <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" ? (
+              <FolderContents folderId={selected.id} />
             ) : selected.kind === "attachment" ? (
               <AttachmentPanel node={selected} />
             ) : selected.kind === "table" ? (

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