@anchrd/intel-ui 0.2.1 → 0.4.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,51 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -16,6 +16,7 @@ import {
   KnowledgeNode,
   KnowledgeNodeList,
   KnowledgeVersionList,
+  ListFlowsInput,
   ListKnowledgeNodesInput,
   ProblemDetails,
   PublishFlowInput,
@@ -29,26 +30,22 @@ import {
   SaveKnowledgeVersionInput,
   SearchKnowledgeInput,
   SearchKnowledgeResult,
+  SessionUser,
   ShareFlowInput,
   ShareKnowledgeInput,
   StartFlowRunInput,
-  TestToolInput,
   ToolCatalog,
-  ToolTestResult,
+  UpdateFlowInput,
   UpdateKnowledgeNodeInput,
 } from "@anchrd/intel-contract";
 import { z } from "zod";
-import type { IntelDataProvider, KnowledgeTreeNode } from "./intel-data-provider.types.ts";
+import type { IntelDataProvider, TreeEntry } from "./intel-data-provider.types.ts";
 
 const DeleteResult = z.strictObject({ deleted: z.boolean() });
 
 // Attachment uploads and downloads share this budget, so it is generous rather than snappy.
 const RequestTimeoutMs = 60_000;
 
-// Deeper nesting than this is not a tree anyone navigates; the limit exists to bound the request
-// fan-out on first paint, not to express a product rule.
-const MaxTreeDepth = 12;
-
 // The Worker serves the login route, so the path belongs to the data layer rather than to any view.
 export function loginPath(returnTo?: string): string {
   return returnTo ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}` : "/auth/login";
@@ -106,6 +103,17 @@ export function createIntelDataProvider(
     return schema.parse(await (await response(path, init)).json());
   }
 
+  async function listFlows(input: ListFlowsInput = {}): Promise<z.infer<typeof FlowList>> {
+    const query = ListFlowsInput.parse(input);
+    // The parameter is only sent when the caller asked for one folder. Sending an empty one for
+    // "everything" would ask the server for the root instead.
+    const params = new URLSearchParams(
+      query.parentId === undefined ? {} : { parentId: query.parentId ?? "" },
+    );
+    const search = params.toString();
+    return await request(`/flows${search ? `?${search}` : ""}`, FlowList);
+  }
+
   async function listKnowledge(
     input: Partial<ListKnowledgeNodesInput> = {},
   ): Promise<z.infer<typeof KnowledgeNodeList>> {
@@ -115,31 +123,43 @@ export function createIntelDataProvider(
     return await request(`/knowledge?${params}`, KnowledgeNodeList);
   }
 
-  // One request per folder, so a deep tree is an N+1 on the first paint. The depth limit bounds that
-  // and, more importantly, makes a cyclic parentId impossible to hang on: without it a cycle would
-  // recurse until the tab dies. `seen` stops a cycle at the first repeat rather than at the limit.
-  async function loadChildren(
-    parentId: string | null,
-    depth = 0,
-    seen: ReadonlySet<string> = new Set(),
-  ): Promise<KnowledgeTreeNode[]> {
-    if (depth >= MaxTreeDepth) return [];
-    const { items } = await listKnowledge({ parentId });
-    return await Promise.all(
-      items.map(async (node) => ({
-        ...node,
-        children:
-          node.kind === "folder" && !seen.has(node.id)
-            ? await loadChildren(node.id, depth + 1, new Set([...seen, node.id]))
-            : [],
-      })),
-    );
-  }
-
   return {
+    async getSession() {
+      return await request("/session", SessionUser);
+    },
     listKnowledge,
-    async loadKnowledgeTree() {
-      return await loadChildren(null);
+    async listTreeChildren(parentId) {
+      // Both sides of one folder, asked for in parallel and merged here rather than on the server:
+      // the folder is shared, the two records are not, and no endpoint may return a row that is a
+      // bit of both (ADR-0004).
+      const [knowledge, flows] = await Promise.all([
+        listKnowledge({ parentId }),
+        listFlows({ parentId }),
+      ]);
+      const entries: TreeEntry[] = [
+        ...knowledge.items.map((node) => ({
+          type: "knowledge" as const,
+          id: node.id,
+          title: node.title,
+          kind: node.kind,
+          node,
+        })),
+        ...flows.items.map((flow) => ({
+          type: "flow" as const,
+          id: flow.id,
+          title: flow.title,
+          kind: "flow" as const,
+          flow,
+        })),
+      ];
+      // Folders first, then everything else by title: a document and a flow sit side by side, and
+      // the icon is what tells them apart.
+      return entries.sort(
+        (left, right) =>
+          Number(right.kind === "folder") - Number(left.kind === "folder") ||
+          left.title.localeCompare(right.title) ||
+          left.id.localeCompare(right.id),
+      );
     },
     async getKnowledge(nodeId) {
       return await request(`/knowledge/${encodeURIComponent(nodeId)}`, KnowledgeDocument);
@@ -240,9 +260,7 @@ export function createIntelDataProvider(
         { method: "POST", body: JSON.stringify(parsed) },
       );
     },
-    async listFlows() {
-      return await request("/flows", FlowList);
-    },
+    listFlows,
     async getFlow(flowId) {
       return await request(`/flows/${encodeURIComponent(flowId)}`, FlowDocument);
     },
@@ -252,6 +270,13 @@ export function createIntelDataProvider(
         body: JSON.stringify(CreateFlowInput.parse(input)),
       });
     },
+    async updateFlow(input) {
+      const parsed = UpdateFlowInput.parse(input);
+      return await request(`/flows/${encodeURIComponent(parsed.flowId)}`, Flow, {
+        method: "PATCH",
+        body: JSON.stringify(parsed),
+      });
+    },
     async listFlowGrants(flowId) {
       return await request(`/flows/${encodeURIComponent(flowId)}/grants`, ResourceGrantList);
     },
@@ -308,12 +333,6 @@ export function createIntelDataProvider(
     async listTools() {
       return await request("/tools", ToolCatalog);
     },
-    async testTool(input) {
-      return await request("/tools/test", ToolTestResult, {
-        method: "POST",
-        body: JSON.stringify(TestToolInput.parse(input)),
-      });
-    },
 
     portalConnectUrl(returnTo = "/tools") {
       return `${baseUrl}/auth/connect?returnTo=${encodeURIComponent(returnTo)}`;

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

@@ -14,8 +14,10 @@ import type {
   KnowledgeLink,
   KnowledgeLinkList,
   KnowledgeNode,
+  KnowledgeNodeKind,
   KnowledgeNodeList,
   KnowledgeVersionList,
+  ListFlowsInput,
   ListKnowledgeNodesInput,
   PublishFlowInput,
   ResourceGrant,
@@ -28,22 +30,27 @@ import type {
   SaveKnowledgeVersionInput,
   SearchKnowledgeInput,
   SearchKnowledgeResult,
+  SessionUser,
   ShareFlowInput,
   ShareKnowledgeInput,
   StartFlowRunInput,
-  TestToolInput,
   ToolCatalog,
-  ToolTestResult,
+  UpdateFlowInput,
   UpdateKnowledgeNodeInput,
 } from "@anchrd/intel-contract";
 
-export interface KnowledgeTreeNode extends KnowledgeNode {
-  children: KnowledgeTreeNode[];
-}
+// One row of the shared tree. Knowledge and Flows share the folder, not their nature (ADR-0004), so
+// this is a union that keeps each side's record whole — never a merged "node" that is a bit of both.
+export type TreeEntry =
+  | { type: "knowledge"; id: string; title: string; kind: KnowledgeNodeKind; node: KnowledgeNode }
+  | { type: "flow"; id: string; title: string; kind: "flow"; flow: Flow };
 
 export interface IntelDataProvider {
+  getSession(): Promise<SessionUser>;
   listKnowledge(input?: Partial<ListKnowledgeNodesInput>): Promise<KnowledgeNodeList>;
-  loadKnowledgeTree(): Promise<KnowledgeTreeNode[]>;
+  // One level of the shared tree: the documents and the flows filed in the same folder, in one
+  // sorted list. Per level rather than recursive, so opening a folder is what costs a request.
+  listTreeChildren(parentId: string | null): Promise<TreeEntry[]>;
   getKnowledge(nodeId: string): Promise<KnowledgeDocument>;
   createKnowledge(input: CreateKnowledgeNodeInput): Promise<KnowledgeNode>;
   getKnowledgeGraph(limit?: number): Promise<KnowledgeGraph>;
@@ -61,9 +68,10 @@ export interface IntelDataProvider {
   listKnowledgeGrants(resourceId: string): Promise<ResourceGrantList>;
   shareKnowledge(input: ShareKnowledgeInput): Promise<ResourceGrant>;
   revokeKnowledgeGrant(input: RevokeKnowledgeGrantInput): Promise<RevokeGrantResult>;
-  listFlows(): Promise<FlowList>;
+  listFlows(input?: ListFlowsInput): Promise<FlowList>;
   getFlow(flowId: string): Promise<FlowDocument>;
   createFlow(input: CreateFlowInput): Promise<Flow>;
+  updateFlow(input: UpdateFlowInput): Promise<Flow>;
   listFlowGrants(flowId: string): Promise<ResourceGrantList>;
   shareFlow(input: ShareFlowInput): Promise<ResourceGrant>;
   revokeFlowGrant(input: RevokeFlowGrantInput): Promise<RevokeGrantResult>;
@@ -72,7 +80,8 @@ export interface IntelDataProvider {
   startFlow(input: StartFlowRunInput): Promise<FlowRunStep>;
   getFlowRun(runId: string): Promise<FlowRunStep>;
   completeFlowStep(input: CompleteFlowRunStepInput): Promise<FlowRunStep>;
+  // Reading the catalog is the whole of the tool surface here: calling a tool belongs to a flow
+  // or to the Intel MCP surface, not to the screen that shows what the portal offers.
   listTools(): Promise<ToolCatalog>;
-  testTool(input: TestToolInput): Promise<ToolTestResult>;
   logout(): Promise<void>;
 }

package/src/flows/flows.tsx

@@ -1,5 +1,6 @@
-import type { FlowGraph, FlowNode, ResourceRole } from "@anchrd/intel-contract";
+import type { FlowGraph, FlowNode, KnowledgeNode, ResourceRole } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouterState } from "@tanstack/react-router";
 import {
   addEdge,
   applyEdgeChanges,
@@ -23,7 +24,6 @@ import {
   CirclePlay,
   FileSearch,
   GitBranch,
-  Plus,
   Save,
   Send,
   Share2,
@@ -33,9 +33,10 @@ import {
   Wrench,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import type { KnowledgeTreeNode } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { HeaderActions } from "@/app/header-actions/header-actions.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
 
 type CanvasNode = Node<{ node: FlowNode }, "intel">;
 type CanvasEdge = Edge;
@@ -229,21 +230,21 @@ function newNode(
 export function Flows() {
   const { data, i18n } = useIntelRouterContext();
   const queryClient = useQueryClient();
-  const flows = useQuery({
-    queryKey: ["flows"],
-    queryFn: () => data.listFlows(),
-  });
   const tools = useQuery({
     queryKey: ["tools"],
     queryFn: () => data.listTools(),
   });
+  // A knowledge step points at nodes, so the editor needs candidates. The graph is the authorized
+  // flat list of them; walking the folder tree for a picker would be the N+1 all over again.
   const knowledge = useQuery({
-    queryKey: ["knowledge-tree"],
-    queryFn: () => data.loadKnowledgeTree(),
+    queryKey: ["knowledge-graph"],
+    queryFn: () => data.getKnowledgeGraph(),
+  });
+  // The tree in the sidebar and the header search both name the flow to open through `?select=`.
+  const selectedFlowId = useRouterState({
+    select: (state) => selectedFrom(state.location.search),
   });
-  const [selectedFlowId, setSelectedFlowId] = useState<string | null>(null);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
-  const [creating, setCreating] = useState(false);
   const [sharing, setSharing] = useState(false);
   const document = useQuery({
     queryKey: ["flow", selectedFlowId],
@@ -274,9 +275,8 @@ export function Flows() {
         graph: graph(nodes, edges),
         idempotencyKey: crypto.randomUUID(),
       }),
-    onSuccess: async (saved) => {
+    onSuccess: (saved) => {
       queryClient.setQueryData(["flow", saved.flow.id], saved);
-      await queryClient.invalidateQueries({ queryKey: ["flows"] });
     },
   });
   const publish = useMutation({
@@ -287,10 +287,7 @@ export function Flows() {
         idempotencyKey: crypto.randomUUID(),
       }),
     onSuccess: async () => {
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["flows"] }),
-        queryClient.invalidateQueries({ queryKey: ["flow", selectedFlowId] }),
-      ]);
+      await queryClient.invalidateQueries({ queryKey: ["flow", selectedFlowId] });
     },
   });
   const run = useMutation({
@@ -311,80 +308,56 @@ export function Flows() {
   }
 
   return (
-    <div className="flex h-screen min-h-0 flex-col">
-      <header className="flex items-center justify-between gap-6 border-b px-8 py-5">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">{i18n.t("flows.title")}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{i18n.t("flows.description")}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          {selectedFlowId && (
-            <>
-              <button
-                type="button"
-                onClick={() => setSharing(true)}
-                className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <Share2 aria-hidden="true" className="size-4" /> {i18n.t("flows.share")}
-              </button>
-              <button
-                type="button"
-                onClick={() => save.mutate()}
-                disabled={!canMutate || save.isPending}
-                className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-              >
-                <Save aria-hidden="true" className="size-4" /> {i18n.t("common.save")}
-              </button>
-              <button
-                type="button"
-                onClick={() => publish.mutate()}
-                disabled={!canMutate || !document.data?.flow.currentVersionId || publish.isPending}
-                className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-              >
-                <Send aria-hidden="true" className="size-4" /> {i18n.t("flows.publish")}
-              </button>
-              <button
-                type="button"
-                onClick={() => run.mutate()}
-                disabled={!canMutate || !document.data?.flow.publishedVersionId || run.isPending}
-                className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-              >
-                <Bot aria-hidden="true" className="size-4" /> {i18n.t("flows.run")}
-              </button>
-            </>
-          )}
+    <div className="flex h-full min-h-0 flex-col">
+      {/* A flow's own actions, in the shell's action bar. Creating a flow is not among them: that
+          belongs to the tree, at the folder the flow is meant to live in. */}
+      {selectedFlowId ? (
+        <HeaderActions>
           <button
             type="button"
-            onClick={() => setCreating(true)}
-            className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => setSharing(true)}
+            className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <Plus aria-hidden="true" className="size-4" /> {i18n.t("flows.new")}
+            <Share2 aria-hidden="true" className="size-4" /> {i18n.t("flows.share")}
           </button>
-        </div>
-      </header>
+          <button
+            type="button"
+            onClick={() => save.mutate()}
+            disabled={!canMutate || save.isPending}
+            className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            <Save aria-hidden="true" className="size-4" /> {i18n.t("common.save")}
+          </button>
+          <button
+            type="button"
+            onClick={() => publish.mutate()}
+            disabled={!canMutate || !document.data?.flow.currentVersionId || publish.isPending}
+            className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            <Send aria-hidden="true" className="size-4" /> {i18n.t("flows.publish")}
+          </button>
+          <button
+            type="button"
+            onClick={() => run.mutate()}
+            disabled={!canMutate || !document.data?.flow.publishedVersionId || run.isPending}
+            className="inline-flex h-8 items-center gap-2 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            <Bot aria-hidden="true" className="size-4" /> {i18n.t("flows.run")}
+          </button>
+        </HeaderActions>
+      ) : null}
       <div className="flex min-h-0 flex-1">
-        <aside className="w-64 shrink-0 overflow-y-auto border-r bg-muted/20 p-3">
-          {flows.data?.items.map((flow) => (
-            <button
-              key={flow.id}
-              type="button"
-              onClick={() => setSelectedFlowId(flow.id)}
-              className={`mb-1 w-full rounded-md p-3 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring ${selectedFlowId === flow.id ? "bg-accent text-accent-foreground" : ""}`}
-            >
-              <span className="block truncate text-sm font-medium">{flow.title}</span>
-              <span className="mt-1 block text-xs text-muted-foreground">
-                {flow.publishedVersionId ? i18n.t("flows.published") : i18n.t("flows.draft")}
-              </span>
-            </button>
-          ))}
-          {flows.data?.items.length === 0 && (
-            <p className="p-3 text-sm text-muted-foreground">{i18n.t("flows.empty")}</p>
-          )}
-        </aside>
         {!selectedFlowId ? (
           <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
             {i18n.t("flows.select")}
           </div>
+        ) : document.isError ? (
+          <div
+            role="alert"
+            className="grid flex-1 place-items-center p-8 text-center text-sm text-destructive"
+          >
+            {i18n.t("flows.operationFailed")}
+          </div>
         ) : !documentReady ? (
           <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
             {i18n.t("common.loading")}
@@ -402,7 +375,7 @@ export function Flows() {
                       key={kind}
                       type="button"
                       onClick={() => {
-                        const item = newNode(kind, nodes.length, knowledge.data?.[0]?.id);
+                        const item = newNode(kind, nodes.length, knowledge.data?.nodes[0]?.id);
                         setNodes((current) => [
                           ...current,
                           {
@@ -449,7 +422,7 @@ export function Flows() {
               node={selectedNode}
               update={updateNode}
               tools={tools.data?.items ?? []}
-              knowledge={knowledge.data ?? []}
+              knowledge={knowledge.data?.nodes ?? []}
             />
           </>
         )}
@@ -470,7 +443,6 @@ export function Flows() {
           {i18n.t("flows.operationFailed")}
         </p>
       )}
-      {creating && <CreateFlow close={() => setCreating(false)} select={setSelectedFlowId} />}
       {sharing && selectedFlowId && (
         <ShareFlow flowId={selectedFlowId} close={() => setSharing(false)} />
       )}
@@ -599,7 +571,7 @@ function NodeInspector({
   node: CanvasNode | null;
   update(fn: (node: FlowNode) => FlowNode): void;
   tools: Array<{ name: string; title: string | null; fingerprint: string }>;
-  knowledge: KnowledgeTreeNode[];
+  knowledge: KnowledgeNode[];
 }) {
   const { i18n } = useIntelRouterContext();
   if (!node)
@@ -659,11 +631,10 @@ function NodeInspector({
         <>
           <fieldset className="mt-4 rounded-lg border p-3">
             <legend className="px-1 text-sm font-medium">{i18n.t("flows.knowledgeIds")}</legend>
-            {flattenKnowledge(knowledge).map((item) => (
+            {knowledge.map((item) => (
               <label
                 key={item.id}
                 className="flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
-                style={{ paddingLeft: `${item.depth * 12 + 8}px` }}
               >
                 <input
                   type="checkbox"
@@ -812,16 +783,6 @@ function ToolArgumentsEditor({
   );
 }
 
-function flattenKnowledge(
-  nodes: KnowledgeTreeNode[],
-  depth = 0,
-): Array<{ id: string; title: string; depth: number }> {
-  return nodes.flatMap((node) => [
-    { id: node.id, title: node.title, depth },
-    ...flattenKnowledge(node.children, depth + 1),
-  ]);
-}
-
 function Field({
   label,
   value,
@@ -863,47 +824,3 @@ function TextArea({
     </label>
   );
 }
-
-function CreateFlow({ close, select }: { close(): void; select(id: string): void }) {
-  const { data, i18n } = useIntelRouterContext();
-  const queryClient = useQueryClient();
-  const [title, setTitle] = useState("");
-  const create = useMutation({
-    mutationFn: () =>
-      data.createFlow({
-        title,
-        description: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async (flow) => {
-      await queryClient.invalidateQueries({ queryKey: ["flows"] });
-      select(flow.id);
-      close();
-    },
-  });
-  return (
-    <Modal title={i18n.t("flows.new")} close={close}>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          if (create.isPending) return;
-          create.mutate();
-        }}
-      >
-        <Field label={i18n.t("common.title")} value={title} setValue={setTitle} />
-        {create.isError ? (
-          <p role="alert" className="mt-3 text-sm text-destructive">
-            {i18n.t("flows.operationFailed")}
-          </p>
-        ) : null}
-        <button
-          type="submit"
-          disabled={create.isPending || title.trim().length === 0}
-          className="mt-5 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
-        >
-          {create.isPending ? i18n.t("common.saving") : i18n.t("common.create")}
-        </button>
-      </form>
-    </Modal>
-  );
-}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}