@anchrd/intel-ui 0.6.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -28,7 +28,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.2.0",
+    "@anchrd/intel-contract": "^0.3.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",

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

@@ -82,6 +82,11 @@ function levelKey(level: Level): readonly unknown[] {
   return level.type === "flow" ? ["flow-calls", level.id] : treeLevelKey(level.id);
 }
 
+// What a row puts on the clipboard for anybody outside the tree. Its own media type rather than
+// `text/plain`, so a drop target that means "move this row" and one that means "make a node for
+// this" cannot be confused by the same payload.
+export const TreeEntryMediaType = "application/x-intel-tree-entry";
+
 export function AppTree() {
   const { data, i18n } = useIntelRouterContext();
   const queryClient = useQueryClient();
@@ -176,7 +181,6 @@ export function AppTree() {
         kind,
         title,
         description: null,
-        contextPolicy: "relevant",
         idempotencyKey: crypto.randomUUID(),
       });
       // ⚠️ Two calls, because they are two things: the node is a row in the tree, the header is the
@@ -212,7 +216,6 @@ export function AppTree() {
         kind: "attachment",
         title: file.name,
         description: null,
-        contextPolicy: "relevant",
         idempotencyKey: crypto.randomUUID(),
       });
       try {
@@ -445,8 +448,17 @@ export function AppTree() {
             isActive={isActive}
             draggable={!derived}
             onDragStart={(event) => {
-              event.dataTransfer.effectAllowed = "move";
+              // ⚠️ Two formats, one gesture. `text/plain` is what a drop inside the tree reads —
+              // that is a MOVE, and it only ever needed the id. The flow canvas needs the kind as
+              // well, to know which node to make, and resolving an id there would mean a second
+              // read of something the drag already knows. `effectAllowed` says both are allowed;
+              // each drop target picks the one it means (#75).
+              event.dataTransfer.effectAllowed = "copyMove";
               event.dataTransfer.setData("text/plain", entry.id);
+              event.dataTransfer.setData(
+                TreeEntryMediaType,
+                JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
+              );
               draggedRef.current = entry;
               setDragged(entry);
             }}

package/src/components/ui/table.tsx

@@ -0,0 +1,82 @@
+import type * as React from "react";
+import { cn } from "@/lib/utils.ts";
+
+// The shadcn table primitive. A real `<table>` and not a grid of divs: the row and column
+// relationships are what a screen reader reads out, and no `role` patch on a div reproduces them
+// as reliably as the element that means it.
+//
+// ⚠️ The horizontal scroll lives on the wrapper, not on the page. A wide table has to be able to
+// scroll inside its own box, or the whole layout scrolls sideways with it.
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

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

@@ -14,6 +14,7 @@ import {
   FlowRunHistory,
   FlowRunList,
   FlowRunStep,
+  FlowValidation,
   KnowledgeDocument,
   KnowledgeGraph,
   KnowledgeLinkList,
@@ -316,6 +317,9 @@ export function createIntelDataProvider(
     async getFlow(flowId) {
       return await request(`/flows/${encodeURIComponent(flowId)}`, FlowDocument);
     },
+    async validateFlow(flowId) {
+      return await request(`/flows/${encodeURIComponent(flowId)}/validation`, FlowValidation);
+    },
     async listFlowCalls(flowId) {
       return await request(`/flows/${encodeURIComponent(flowId)}/calls`, FlowList);
     },

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

@@ -14,6 +14,7 @@ import type {
   FlowRunHistory,
   FlowRunList,
   FlowRunStep,
+  FlowValidation,
   KnowledgeDocument,
   KnowledgeGraph,
   KnowledgeLinkList,
@@ -95,6 +96,8 @@ export interface IntelDataProvider {
   // What a flow calls, read out of its graph. It answers a different question from `listTreeChildren`
   // and deliberately gives a different answer: a shared sub-flow is listed under every caller.
   listFlowCalls(flowId: string): Promise<FlowList>;
+  // Would this flow start for me, right now. A question, not an action: nothing is created (#72).
+  validateFlow(flowId: string): Promise<FlowValidation>;
   // What accesses what, for one level of the shared tree: a folder for its contents, a flow for
   // itself. ⚠️ Only nodes the signed-in user may see come back, and one they may not is absent
   // altogether — never a placeholder, because the edge into one would already say that it exists.

package/src/entry-picker/entry-picker.tsx

@@ -0,0 +1,166 @@
+import type { KnowledgeNode, KnowledgeNodeKind } from "@anchrd/intel-contract";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, Folder, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * One picker for everything a node can name: search by name, or click down through the tree from
+ * the top-level folders.
+ *
+ * ⚠️ Both halves read ONE source — the authorized flat graph the editor already loads. Not because
+ * a search endpoint would be hard, but because `searchKnowledge` answers a different question: it
+ * searches PASSAGES and hands back citations. Someone looking for a document by name would get
+ * results ranked by what is written inside it, which is the wrong list in a picker. Filtering names
+ * here is also instant, and it cannot disagree with the tree about what exists.
+ *
+ * ⚠️ What the caller may not see is absent from the graph, so it is absent here — and an empty
+ * result never says which of the two it is (#17, #19).
+ */
+export function EntryPicker({
+  kind,
+  value,
+  onSelect,
+  label,
+}: {
+  // Which kind of node may be chosen. `null` offers every kind — what the Flow step uses.
+  kind: KnowledgeNodeKind | null;
+  value: string;
+  onSelect(nodeId: string): void;
+  label: string;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const [query, setQuery] = useState("");
+  const [openFolder, setOpenFolder] = useState<string | null>(null);
+  const graph = useQuery({
+    queryKey: ["knowledge-graph"],
+    queryFn: () => data.getKnowledgeGraph(),
+  });
+
+  const nodes = useMemo(() => graph.data?.nodes ?? [], [graph.data]);
+  const eligible = useMemo(
+    () => nodes.filter((node) => kind === null || node.kind === kind),
+    [nodes, kind],
+  );
+
+  // Searching looks at every eligible node wherever it sits; browsing looks at one level. The two
+  // are the same list seen two ways, which is why a result can be picked from either.
+  const searching = query.trim().length > 0;
+  const shown = useMemo(() => {
+    if (searching) {
+      const needle = query.trim().toLowerCase();
+      return eligible.filter((node) => node.title.toLowerCase().includes(needle)).slice(0, 50);
+    }
+    return nodes.filter((node) => node.parentId === openFolder);
+  }, [searching, query, eligible, nodes, openFolder]);
+
+  // The way back up, as the chain of folders that leads to the open one.
+  const trail = useMemo(() => {
+    const chain: KnowledgeNode[] = [];
+    let current = openFolder;
+    while (current !== null) {
+      const folder = nodes.find((node) => node.id === current);
+      if (!folder) break;
+      chain.unshift(folder);
+      current = folder.parentId;
+    }
+    return chain;
+  }, [openFolder, nodes]);
+
+  const chosen = nodes.find((node) => node.id === value) ?? null;
+
+  return (
+    <div className="mt-4">
+      <span className="block text-sm font-medium">{label}</span>
+      {chosen ? (
+        <p className="mt-1 truncate text-sm text-muted-foreground">{chosen.title}</p>
+      ) : (
+        <p className="mt-1 text-sm text-muted-foreground">{i18n.t("flows.linkEmpty")}</p>
+      )}
+
+      <div className="mt-2 rounded-lg border">
+        <label className="flex items-center gap-2 border-b px-2 py-1.5">
+          <Search aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+          <span className="sr-only">{i18n.t("picker.search")}</span>
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={i18n.t("picker.search")}
+            className="w-full bg-transparent text-sm outline-none"
+          />
+        </label>
+
+        {/* The trail is hidden while searching: a result can come from anywhere, so "where you are"
+            would be a claim about a place the list is no longer showing. */}
+        {!searching && trail.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-1 border-b px-2 py-1 text-xs">
+            <button
+              type="button"
+              onClick={() => setOpenFolder(null)}
+              className="rounded px-1 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("picker.top")}
+            </button>
+            {trail.map((folder) => (
+              <span key={folder.id} className="flex items-center gap-1">
+                <ChevronRight aria-hidden="true" className="size-3 text-muted-foreground" />
+                <button
+                  type="button"
+                  onClick={() => setOpenFolder(folder.id)}
+                  className="rounded px-1 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {folder.title}
+                </button>
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <ul className="max-h-56 overflow-y-auto py-1">
+          {shown.map((node) => {
+            // A folder is two things while browsing: somewhere to go, and — when folders are what
+            // is being picked — something to choose. It gets both, side by side, rather than one
+            // control that has to guess which was meant.
+            const canOpen = node.kind === "folder" && !searching;
+            const canPick = kind === null || node.kind === kind;
+            return (
+              <li key={node.id} className="flex items-center gap-1 px-1">
+                {canPick ? (
+                  <button
+                    type="button"
+                    onClick={() => onSelect(node.id)}
+                    aria-current={node.id === value}
+                    className={`min-w-0 flex-1 truncate rounded px-2 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring ${
+                      node.id === value ? "bg-muted font-medium" : ""
+                    }`}
+                  >
+                    {node.title}
+                    <span className="sr-only"> — {i18n.t(`knowledge.kind.${node.kind}`)}</span>
+                  </button>
+                ) : (
+                  <span className="min-w-0 flex-1 truncate px-2 py-1.5 text-sm text-muted-foreground">
+                    {node.title}
+                  </span>
+                )}
+                {canOpen ? (
+                  <button
+                    type="button"
+                    onClick={() => setOpenFolder(node.id)}
+                    aria-label={i18n.t("picker.open", { title: node.title })}
+                    className="inline-flex size-7 shrink-0 items-center justify-center rounded outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <Folder aria-hidden="true" className="size-4" />
+                  </button>
+                ) : null}
+              </li>
+            );
+          })}
+          {shown.length === 0 ? (
+            <li className="px-3 py-2 text-sm text-muted-foreground">{i18n.t("picker.nothing")}</li>
+          ) : null}
+        </ul>
+      </div>
+    </div>
+  );
+}