@anchrd/intel-ui 0.8.2 → 0.8.3

package/package.json

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

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

@@ -6,7 +6,6 @@ import {
   FileText,
   Folder,
   FolderOpen,
-  Paperclip,
   Plus,
   Table,
   Upload,
@@ -36,6 +35,7 @@ import {
 } from "@/components/ui/sidebar";
 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 { kindIcons } from "@/kind-icon.ts";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
@@ -43,14 +43,6 @@ import { selectedFrom } from "@/router/selection-search.ts";
 type NewKind = "folder" | "document" | "table" | "flow";
 type Creating = { parentId: string | null; kind: NewKind };
 
-const icons = {
-  folder: Folder,
-  document: FileText,
-  attachment: Paperclip,
-  table: Table,
-  flow: Workflow,
-} as const;
-
 // Attachments are inlined as base64, so the browser holds the file twice while it uploads.
 const MaxUploadBytes = 15_000_000;
 
@@ -385,7 +377,7 @@ export function AppTree() {
     const expandable = entry.openable;
     const isOpen =
       expandable && expanded.some((open) => open.id === entry.id && open.type === level.type);
-    const Icon = isOpen && isFolder ? FolderOpen : icons[entry.kind];
+    const Icon = isOpen && isFolder ? FolderOpen : kindIcons[entry.kind];
     const area = entry.type === "flow" ? "/flows" : "/knowledge";
     const isActive = location.select === entry.id && location.pathname === area;
     // A row's plus files into that row's place: inside a folder, beside anything else.

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

@@ -10,15 +10,17 @@ import {
   TableRow,
 } from "@/components/ui/table.tsx";
 import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { kindIcons } from "@/kind-icon.ts";
+import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 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",
-};
+// The same record the menu is handed everywhere else, read off a level row. A re-labelling, never a
+// second source of truth — a rename works on the whole record, not on a summary of it.
+function targetOf(entry: TreeEntry): ResourceTarget {
+  return entry.type === "flow"
+    ? { type: "flow", flow: entry.flow }
+    : { type: "knowledge", node: entry.node };
+}
 
 /**
  * A folder's own screen: what lies directly in it, as a table.
@@ -27,7 +29,13 @@ const icons: Record<TreeEntry["kind"], string> = {
  * `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.
+ * every invalidation the tree already does after a create, a move or an archive lands here too, and
+ * that now includes the ones this screen's own menu makes: `ResourceMenu` invalidates
+ * `["tree", parentId]`, which is this level.
+ *
+ * ⚠️ There is no "Kind" column since issue 101. The icon says what a row is, in the same picture the
+ * sidebar draws two centimetres to its left, and `sr-only` says it in words for everyone who does
+ * not read pictures. A column repeating the icon in prose costs the width the title needs.
  */
 export function FolderContents({ folderId }: { folderId: string }) {
   const { data, i18n } = useIntelRouterContext();
@@ -61,46 +69,75 @@ export function FolderContents({ folderId }: { folderId: string }) {
   }
 
   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 className="min-h-0 flex-1 overflow-y-auto p-6">
+      <div className="overflow-hidden rounded-lg border bg-card">
+        <Table>
+          <TableHeader className="[&_tr]:bg-muted/40">
+            <TableRow className="hover:bg-transparent">
+              <TableHead className="h-9 px-4 text-xs tracking-wide uppercase">
+                {i18n.t("common.title")}
+              </TableHead>
+              <TableHead className="h-9 px-4 text-right text-xs tracking-wide uppercase">
+                {i18n.t("knowledge.changed")}
+              </TableHead>
+              {/* A `<th>` with nothing in it leaves the column unnamed for anyone reading the table
+                  by its headers. The word is there; only the eye is spared it. */}
+              <TableHead className="h-9 w-14">
+                <span className="sr-only">{i18n.t("knowledge.rowActions")}</span>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {entries.map((entry) => {
+              const changed = entry.type === "flow" ? entry.flow.updatedAt : entry.node.updatedAt;
+              const Icon = kindIcons[entry.kind];
+              return (
+                <TableRow key={entry.id} className="group/row hover:bg-muted">
+                  {/* ⚠️ 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="flex w-full min-w-0 items-center gap-3 px-4 py-2.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+                    >
+                      {/* The icon gets a tile of its own so five kinds under one another read as a
+                          column, instead of five loose glyphs at five different widths. */}
+                      <span
+                        aria-hidden="true"
+                        className="grid size-8 shrink-0 place-items-center rounded-md border bg-muted/50 text-muted-foreground transition-colors group-hover/row:bg-accent group-hover/row:text-accent-foreground"
+                      >
+                        <Icon className="size-4" />
+                      </span>
+                      <span className="min-w-0 truncate font-medium group-hover/row:underline">
+                        {entry.title}
+                      </span>
+                      {/* The icon carries the type on screen; this carries it everywhere else, and
+                          it is why a flow needs no suffix in its name to be told from a document. */}
+                      <span className="sr-only">{i18n.t(`knowledge.kind.${entry.kind}`)}</span>
+                    </button>
+                  </TableCell>
+                  <TableCell className="px-4 text-right text-sm text-muted-foreground tabular-nums">
+                    {new Date(changed).toLocaleDateString(i18n.locale)}
+                  </TableCell>
+                  {/* ⚠️ The same menu as the title line of the open thing, not a shorter one built
+                      for here. #58 collected every action in one place so that place is always the
+                      same; a folder listing offering three of the six would be a second place. */}
+                  <TableCell className="px-3 text-right">
+                    <ResourceMenu target={targetOf(entry)} variant="row" />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }

package/src/i18n/en.json

@@ -85,8 +85,8 @@
   "knowledge.select": "Select a document or folder to work with it.",
   "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.rowActions": "Actions",
   "knowledge.kind.folder": "Folder",
   "knowledge.kind.document": "Document",
   "knowledge.kind.attachment": "Upload",
@@ -157,6 +157,9 @@
   "tools.inputSchema": "Input schema",
   "tools.outputSchema": "Result schema",
   "tools.destructiveShort": "Destructive",
+  "tools.destructiveCount": "{count} destructive",
+  "tools.toolCount": "{count} tools",
+  "tools.toolCountOne": "1 tool",
   "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.arguments": "Arguments",
   "tools.invalidJson": "The arguments must be a JSON object in curly braces; a list or a single value will not work.",

package/src/kind-icon.ts

@@ -0,0 +1,19 @@
+import { FileText, Folder, type LucideIcon, Paperclip, Table, Workflow } from "lucide-react";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+
+/**
+ * The one place a kind becomes a picture.
+ *
+ * ⚠️ Two screens draw the same row — the sidebar tree and the folder's own table — and they must
+ * draw it the same. A second map beside this one drifts the first time a kind is added: the tree
+ * would show the new icon and the folder screen the old one, for the same thing on the same screen.
+ * The picture is also only half the answer; both places still name the kind for a reader who cannot
+ * see it (`tree.kind.*`, `knowledge.kind.*`), because an icon has no text.
+ */
+export const kindIcons: Record<TreeEntry["kind"], LucideIcon> = {
+  folder: Folder,
+  document: FileText,
+  attachment: Paperclip,
+  table: Table,
+  flow: Workflow,
+};

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

@@ -102,11 +102,14 @@ export function resourceErrorKey(error: unknown): string {
 /**
  * The three-dot menu.
  *
- * `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.
+ * `variant` is only how the trigger is painted, never which entries it holds. `title` is 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 form for a row in a list — quiet until the
+ * row is hovered or something in it takes focus — and since issue 101 that list is the folder table.
+ *
+ * ⚠️ `row` needs a `group/row` on the row it sits in, or it stays invisible to the mouse: the
+ * reveal is `group-hover/row`, and a group that is not there never hovers. Below `md` and under
+ * focus it is shown regardless, because hover is not a gesture every input has.
  */
 export function ResourceMenu({
   target,
@@ -218,7 +221,7 @@ export function ResourceMenu({
           aria-label={i18n.t("resource.menu", { title })}
           className={
             variant === "row"
-              ? "shrink-0 rounded-md p-1 text-sidebar-foreground outline-none transition-opacity hover:bg-sidebar-accent-foreground/10 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
+              ? "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:opacity-100 group-focus-within/row:opacity-100 group-hover/row:opacity-100 md:opacity-0"
               : "inline-flex size-8 shrink-0 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
           }
         >

package/src/tools/tools.tsx

@@ -19,6 +19,30 @@ function toolOrigin(name: string): string | null {
   return boundary > 0 ? name.slice(0, boundary) : null;
 }
 
+interface ToolGroup {
+  // `null` is a tool the portal answers without a namespace: its origin is the portal itself.
+  origin: string | null;
+  items: ToolCapability[];
+}
+
+// The catalog arrives as one flat list of a hundred-odd names, and the namespace is the only thing
+// that says which server a tool belongs to. Grouping is therefore not decoration — it is the one
+// piece of structure the wire carries, made visible (#99).
+//
+// The order is the portal's own: a group appears where its first tool appears. Sorting here would
+// replace an answer with a preference, and the portal already returns a server's tools together.
+function groupByOrigin(items: ToolCapability[]): ToolGroup[] {
+  const groups = new Map<string, ToolGroup>();
+  for (const item of items) {
+    const origin = toolOrigin(item.name);
+    const key = origin ?? "";
+    const group = groups.get(key) ?? { origin, items: [] };
+    group.items.push(item);
+    groups.set(key, group);
+  }
+  return [...groups.values()];
+}
+
 // 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
@@ -140,19 +164,16 @@ export function Tools() {
           />
         ) : (
           <>
-            <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
-              <ul className="divide-y">
-                {catalog.data.items.map((capability) => (
-                  <li key={capability.name}>
-                    <ToolEntry
-                      capability={capability}
-                      i18n={i18n}
-                      open={capability.name === requested}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </section>
+            <div className="space-y-3">
+              {groupByOrigin(catalog.data.items).map((group) => (
+                <ServerGroup
+                  key={group.origin ?? ""}
+                  group={group}
+                  i18n={i18n}
+                  requested={requested}
+                />
+              ))}
+            </div>
             <p className="text-xs text-muted-foreground">{i18n.t("tools.liveNote")}</p>
           </>
         )}
@@ -187,6 +208,74 @@ function Notice({
   );
 }
 
+// One server, one box, closed until asked. Closed is the point: a hundred rows spread over a
+// handful of servers is a list nobody reads, and which server a tool speaks to is the first thing
+// somebody wants to know about it (#99).
+function ServerGroup({
+  group,
+  i18n,
+  requested,
+}: {
+  group: ToolGroup;
+  i18n: I18n;
+  requested: string | null;
+}) {
+  // A hit from the header search names a tool, not a server, and the box it sits in has to open
+  // with it — otherwise Enter on a hit lands on a screen where nothing happened.
+  const holdsRequested = group.items.some((item) => item.name === requested);
+  const destructive = group.items.filter((item) => item.annotations.destructiveHint).length;
+  const label = group.origin ?? i18n.t("tools.originPortal");
+  const count =
+    group.items.length === 1
+      ? i18n.t("tools.toolCountOne")
+      : i18n.t("tools.toolCount", { count: group.items.length });
+  // The badges beside the name read as one run-on word when a screen reader concatenates them
+  // ("wiki1 tool"), so the control says its own name instead of being read off its contents.
+  const spoken = [`${i18n.t("tools.origin")}: ${label}`, count];
+  if (destructive > 0) spoken.push(i18n.t("tools.destructiveCount", { count: destructive }));
+
+  return (
+    <Collapsible defaultOpen={holdsRequested} asChild>
+      <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
+        <CollapsibleTrigger
+          aria-label={spoken.join(", ")}
+          className="group flex w-full items-center gap-3 px-5 py-4 text-left outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          <ChevronRight
+            aria-hidden="true"
+            className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90"
+          />
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-semibold">{label}</span>
+          </span>
+          {/* Closed, the box hides every destructive badge inside it. The count says so on the lid
+              rather than making somebody open each server to find out. */}
+          {destructive > 0 && (
+            <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
+              <AlertTriangle aria-hidden="true" className="size-3.5" />
+              {i18n.t("tools.destructiveCount", { count: destructive })}
+            </span>
+          )}
+          <span className="shrink-0 text-xs text-muted-foreground">{count}</span>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ul className="divide-y border-t">
+            {group.items.map((capability) => (
+              <li key={capability.name}>
+                <ToolEntry
+                  capability={capability}
+                  i18n={i18n}
+                  open={capability.name === requested}
+                />
+              </li>
+            ))}
+          </ul>
+        </CollapsibleContent>
+      </section>
+    </Collapsible>
+  );
+}
+
 // One tool, one disclosure. The row is the only control in the list: it opens the schema and does
 // nothing else — enabling, sharing or permitting a tool happens in the portal, never here.
 function ToolEntry({
@@ -198,11 +287,9 @@ function ToolEntry({
   i18n: I18n;
   open: boolean;
 }) {
-  const origin = toolOrigin(capability.name);
-
   return (
     <Collapsible defaultOpen={open}>
-      <CollapsibleTrigger className="group flex w-full items-start gap-4 px-5 py-4 text-left outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
+      <CollapsibleTrigger className="group flex w-full items-start gap-4 px-5 py-3 text-left outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
         <ChevronRight
           aria-hidden="true"
           className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90"
@@ -210,10 +297,6 @@ function ToolEntry({
         <span className="min-w-0 flex-1">
           <span className="flex flex-wrap items-center gap-2">
             <span className="text-sm font-medium">{capability.title ?? capability.name}</span>
-            <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
-              <span className="sr-only">{i18n.t("tools.origin")}: </span>
-              {origin ?? i18n.t("tools.originPortal")}
-            </span>
             {capability.annotations.destructiveHint && (
               <span className="inline-flex items-center gap-1.5 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
                 <AlertTriangle aria-hidden="true" className="size-3.5" />
@@ -228,14 +311,14 @@ function ToolEntry({
               {capability.name}
             </span>
           )}
-          {capability.description && (
-            <span className="mt-2 block text-xs text-muted-foreground">
-              {capability.description}
-            </span>
-          )}
         </span>
       </CollapsibleTrigger>
+      {/* ⚠️ The description belongs here, not in the closed row. Held open it was the whole reason
+          the list could not be scanned: a paragraph per tool, a hundred times over. */}
       <CollapsibleContent className="space-y-3 px-5 pb-4 pl-13">
+        {capability.description && (
+          <p className="text-xs text-muted-foreground">{capability.description}</p>
+        )}
         <Schema label={i18n.t("tools.inputSchema")} value={capability.inputSchema} />
         {capability.outputSchema && (
           <Schema label={i18n.t("tools.outputSchema")} value={capability.outputSchema} />