@agent-native/dispatch 0.25.0 → 0.26.0

package/src/components/create-app-popover.tsx

@@ -60,6 +60,10 @@ interface CreateAppPopoverProps {
    * Override the popover alignment. Defaults to "center" with a 10px offset.
    */
   align?: "start" | "center" | "end";
+  /**
+   * Called after the server accepts a Builder app creation request.
+   */
+  onCreated?: () => void;
 }
 
 async function fetchJson(url: string, init?: RequestInit): Promise<any> {
@@ -107,9 +111,11 @@ function isErrorFailureReason(reason: string | null): boolean {
  */
 export function CreateAppFlow({
   onClose,
+  onCreated,
   className = "",
 }: {
   onClose?: () => void;
+  onCreated?: () => void;
   className?: string;
 }) {
   const [step, setStep] = useState<"prompt" | "access">("prompt");
@@ -269,6 +275,7 @@ export function CreateAppFlow({
           },
         );
         if (result?.mode === "builder") {
+          onCreated?.();
           setBranchUrl(result?.url || null);
           setStatusMessage("Builder branch created.");
         } else if (result?.mode === "local-agent") {
@@ -634,6 +641,7 @@ export function CreateAppFlow({
 export function CreateAppPopover({
   trigger,
   align = "center",
+  onCreated,
 }: CreateAppPopoverProps) {
   const [open, setOpen] = useState(false);
   return (
@@ -656,7 +664,7 @@ export function CreateAppPopover({
         sideOffset={10}
         className="w-[calc(100vw-2rem)] rounded-xl p-3 shadow-xl sm:w-[460px]"
       >
-        <CreateAppFlow onClose={() => setOpen(false)} />
+        <CreateAppFlow onClose={() => setOpen(false)} onCreated={onCreated} />
       </PopoverContent>
     </Popover>
   );

package/src/components/index.ts

@@ -18,3 +18,4 @@ export { CreateAppPopover, CreateAppFlow } from "./create-app-popover.js";
 export { AppKeysPopover } from "./app-keys-popover.js";
 export { ActionQueryError } from "./action-query-error.js";
 export { SimpleAgentsPanel } from "./simple-agents-panel.js";
+export { WorkspaceAppCard } from "./workspace-app-card.js";

package/src/components/layout/Layout.app-chat.spec.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+describe("Dispatch workspace app chat rail", () => {
+  it("owns the iframe chat toggle and persists app-specific threads", () => {
+    const source = readFileSync(
+      new URL("./Layout.tsx", import.meta.url),
+      "utf8",
+    );
+
+    expect(source).toContain('openStorageKey="dispatch-app-chat"');
+    expect(source).toContain(
+      "storageKey={`dispatch-app-chat:${workspaceAppId}`}",
+    );
+    expect(source).toContain("data-dispatch-workspace-app-frame");
+    expect(source).toContain("chatSidebar");
+    expect(source).toContain(
+      'window.dispatchEvent(new Event("agent-panel:toggle"))',
+    );
+  });
+});

package/src/components/layout/Layout.tsx

@@ -1941,6 +1941,39 @@ export function Layout({
     setSidebarCollapsed(true);
   }, [isWorkspaceAppRoute, localPathname]);
 
+  useEffect(() => {
+    if (!workspaceAppRouteActive && !chatFirstAppTakesMain) return;
+
+    const handleWorkspaceAppMessage = (event: MessageEvent) => {
+      if (event.data?.type !== "agentNative.toggleSidebar") return;
+      const frame = [
+        ...document.querySelectorAll<HTMLIFrameElement>(
+          "[data-dispatch-workspace-app-frame]",
+        ),
+      ].find(
+        (candidate) =>
+          candidate
+            .closest("[data-chat-first-surface-content]")
+            ?.getAttribute("aria-hidden") !== "true",
+      );
+      if (!(frame instanceof HTMLIFrameElement)) return;
+      if (event.source !== frame.contentWindow) return;
+
+      const open = event.data.data?.open;
+      if (open === true) {
+        window.dispatchEvent(new Event("agent-panel:open"));
+      } else if (open === false) {
+        window.dispatchEvent(new Event("agent-panel:close"));
+      } else {
+        window.dispatchEvent(new Event("agent-panel:toggle"));
+      }
+    };
+
+    window.addEventListener("message", handleWorkspaceAppMessage);
+    return () =>
+      window.removeEventListener("message", handleWorkspaceAppMessage);
+  }, [chatFirstAppTakesMain, workspaceAppRouteActive]);
+
   useEffect(() => {
     if (typeof window === "undefined" || isWorkspaceAppHostRoute) return;
     try {
@@ -2077,6 +2110,7 @@ export function Layout({
               url: registration.url,
             }}
             embedPath={embedPath}
+            chatSidebar
             copy={chatFirstCopy}
           />
         );
@@ -2300,6 +2334,43 @@ export function Layout({
         renderTab={renderChatFirstSurfaceTab}
       />
     ) : null;
+  const workspaceAppChatName =
+    (workspaceAppId
+      ? chatFirstAppRegistrations.find(
+          (app) => app.id.toLowerCase() === workspaceAppId.toLowerCase(),
+        )?.name
+      : null) ??
+    workspaceAppId ??
+    "Workspace app";
+  const workspaceAppContent =
+    workspaceAppRouteActive && workspaceAppId ? (
+      <AgentSidebar
+        position="left"
+        defaultOpen
+        openStorageKey="dispatch-app-chat"
+        storageKey={`dispatch-app-chat:${workspaceAppId}`}
+        scope={{
+          type: "workspace-app",
+          id: workspaceAppId,
+          label: workspaceAppChatName,
+          contextKey: `workspace-app:${workspaceAppId}`,
+        }}
+        agentChatSurface="app"
+        showTabBar
+        suppressInlineOpenApp
+        dynamicSuggestions={false}
+        suggestions={[]}
+        emptyStateText={`Ask about ${workspaceAppChatName}`}
+        agentPageHref={agentPageHref}
+        onFullscreenRequest={openAskAgentFullscreen}
+      >
+        <WorkspaceAppKeepAlive activeAppId={workspaceAppId} />
+      </AgentSidebar>
+    ) : (
+      <WorkspaceAppKeepAlive
+        activeAppId={workspaceAppRouteActive ? workspaceAppId : null}
+      />
+    );
   const content = isChatRoute ? (
     <div
       className={cn(
@@ -2438,9 +2509,7 @@ export function Layout({
 
           <div className="relative min-w-0 flex-1 overflow-hidden">
             {content}
-            <WorkspaceAppKeepAlive
-              activeAppId={workspaceAppRouteActive ? workspaceAppId : null}
-            />
+            {workspaceAppContent}
           </div>
         </div>
       </HeaderActionsProvider>

package/src/components/simple-agents-panel.spec.tsx

@@ -1,10 +1,46 @@
-import { describe, expect, it } from "vitest";
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
   handleAgentPackMutationSuccess,
   isPendingWorkspaceResourceApproval,
+  SimpleAgentsPanel,
 } from "./simple-agents-panel";
 
+const queryState = vi.hoisted(() => ({
+  data: [],
+  isError: false,
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  navigateWithAgentChatViewTransition: vi.fn(),
+  sendToAgentChat: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: () => ({ mutate: vi.fn(), isPending: false }),
+  useActionQuery: () => queryState,
+}));
+
+vi.mock("@agent-native/core/resources/metadata", () => ({
+  parseCustomAgentProfile: vi.fn(),
+}));
+
+vi.mock("react-router", () => ({ useNavigate: () => vi.fn() }));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: vi.fn(),
+    info: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
 describe("agent pack resource mutations", () => {
   it("recognizes pending workspace-resource approvals", () => {
     expect(
@@ -71,3 +107,47 @@ describe("agent pack resource mutations", () => {
     expect(notifications).toEqual(["Pack file added", "refreshed"]);
   });
 });
+
+describe("SimpleAgentsPanel", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    queryState.data = [];
+    queryState.isError = false;
+    queryState.isLoading = false;
+    queryState.error = null;
+    queryState.refetch.mockReset();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body
+      .querySelectorAll("[data-radix-portal]")
+      .forEach((portal) => portal.remove());
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps import and connect available when the workspace has no agents", async () => {
+    await act(async () => {
+      root.render(<SimpleAgentsPanel />);
+    });
+
+    const importButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Import or connect"),
+    );
+    expect(importButton).not.toBeUndefined();
+
+    await act(async () => {
+      importButton?.click();
+    });
+
+    expect(document.body.textContent).toContain("Import an agent");
+    expect(document.body.textContent).toContain("Connect endpoint");
+  });
+});

package/src/components/simple-agents-panel.tsx

@@ -10,6 +10,7 @@ import { parseCustomAgentProfile } from "@agent-native/core/resources/metadata";
 import {
   IconAdjustmentsHorizontal,
   IconChevronDown,
+  IconDotsVertical,
   IconEdit,
   IconFileImport,
   IconFolder,
@@ -19,7 +20,6 @@ import {
   IconPlus,
   IconTrash,
   IconUpload,
-  IconUser,
 } from "@tabler/icons-react";
 import {
   useEffect,
@@ -36,6 +36,7 @@ import {
   slugifyAgentName,
 } from "../lib/simple-agent-profile.js";
 import { ActionQueryError } from "./action-query-error";
+import { AppIcon } from "./app-icon";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -63,6 +64,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import {
@@ -101,6 +109,25 @@ interface AgentPackFileInput {
   content: string;
 }
 
+const AGENT_ICON_KEYS = [
+  "brain",
+  "users",
+  "filetext",
+  "chartbar",
+  "route",
+  "listcheck",
+  "code",
+  "messagecircle",
+] as const;
+
+function agentIconKey(resource: Pick<WorkspaceAgentResource, "id" | "name">) {
+  let hash = 0;
+  for (const character of `${resource.id}:${resource.name}`) {
+    hash = (hash * 31 + character.charCodeAt(0)) | 0;
+  }
+  return AGENT_ICON_KEYS[Math.abs(hash) % AGENT_ICON_KEYS.length];
+}
+
 export function isPendingWorkspaceResourceApproval(result: unknown) {
   if (!result || typeof result !== "object") return false;
   const mutation = result as { status?: unknown; changeType?: unknown };
@@ -133,6 +160,8 @@ interface AgentEditorProps {
   resource?: WorkspaceAgentResource;
   trigger?: ReactNode;
   onSaved?: () => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 function profileFields(resource?: WorkspaceAgentResource) {
@@ -158,9 +187,17 @@ function profileFields(resource?: WorkspaceAgentResource) {
   };
 }
 
-function AgentEditorDialog({ resource, trigger, onSaved }: AgentEditorProps) {
+function AgentEditorDialog({
+  resource,
+  trigger,
+  onSaved,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: AgentEditorProps) {
   const isEditing = Boolean(resource);
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = controlledOnOpenChange ?? setUncontrolledOpen;
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [instructions, setInstructions] = useState("");
@@ -231,14 +268,16 @@ function AgentEditorDialog({ resource, trigger, onSaved }: AgentEditorProps) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {trigger || (
-          <Button>
+      {trigger ? (
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
+      ) : controlledOpen === undefined ? (
+        <DialogTrigger asChild>
+          <Button size="sm">
             <IconPlus size={16} />
             Create agent
           </Button>
-        )}
-      </DialogTrigger>
+        </DialogTrigger>
+      ) : null}
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>
@@ -355,12 +394,18 @@ function AgentPackDialog({
   resource,
   onChanged,
   trigger,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
 }: {
   resource: WorkspaceAgentResource;
   onChanged?: () => void;
   trigger?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = controlledOnOpenChange ?? setUncontrolledOpen;
   const [selectedId, setSelectedId] = useState(resource.id);
   const [content, setContent] = useState(resource.content);
   const [addOpen, setAddOpen] = useState(false);
@@ -460,14 +505,16 @@ function AgentPackDialog({
         if (!nextOpen) setAddOpen(false);
       }}
     >
-      <DialogTrigger asChild>
-        {trigger || (
+      {trigger ? (
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
+      ) : controlledOpen === undefined ? (
+        <DialogTrigger asChild>
           <Button variant="ghost" size="sm">
             <IconFolder size={15} />
             Pack
           </Button>
-        )}
-      </DialogTrigger>
+        </DialogTrigger>
+      ) : null}
       <DialogContent className="max-w-4xl">
         <DialogHeader>
           <DialogTitle>Agent pack</DialogTitle>
@@ -753,7 +800,7 @@ function ImportAgentDialog({ onImported }: { onImported?: () => void }) {
       }}
     >
       <DialogTrigger asChild>
-        <Button variant="outline">
+        <Button variant="outline" size="sm">
           <IconFileImport size={16} />
           Import or connect
         </Button>
@@ -957,10 +1004,17 @@ function ImportAgentDialog({ onImported }: { onImported?: () => void }) {
 function DeleteAgentButton({
   resource,
   onDeleted,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
 }: {
   resource: WorkspaceAgentResource;
   onDeleted?: () => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = controlledOnOpenChange ?? setUncontrolledOpen;
   const remove = useActionMutation("delete-workspace-resource", {
     onSuccess: () => {
       toast.success("Agent removed");
@@ -970,16 +1024,7 @@ function DeleteAgentButton({
   });
 
   return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={`Remove ${resource.name}`}
-        >
-          <IconTrash size={16} />
-        </Button>
-      </AlertDialogTrigger>
+    <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>Remove {resource.name}?</AlertDialogTitle>
@@ -1011,6 +1056,9 @@ function AgentRow({
   onSaved?: () => void;
 }) {
   const navigate = useNavigate();
+  const [packOpen, setPackOpen] = useState(false);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
   const packQuery = useActionQuery<AgentPackResponse>(
     "list-agent-pack",
     { agentId: resource.id },
@@ -1072,10 +1120,13 @@ function AgentRow({
   }
 
   return (
-    <div className="flex items-start gap-3 rounded-xl border bg-card px-4 py-3">
-      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-        <IconUser size={18} />
-      </div>
+    <div className="flex min-w-0 items-start gap-3 rounded-2xl border bg-card px-4 py-4">
+      <AppIcon
+        id={resource.id}
+        name={resource.name}
+        icon={agentIconKey(resource)}
+        size="sm"
+      />
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2">
           <span className="text-sm font-medium text-foreground">
@@ -1090,11 +1141,8 @@ function AgentRow({
             {resource.description}
           </div>
         ) : null}
-        <div className="mt-1 font-mono text-[11px] text-muted-foreground/70">
-          {resource.path}
-        </div>
       </div>
-      <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+      <div className="flex shrink-0 items-center gap-1">
         <Button
           variant="outline"
           size="sm"
@@ -1104,43 +1152,63 @@ function AgentRow({
           <IconMessageCircle size={15} />
           Chat
         </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => void buildApp()}
-          disabled={promote.isPending}
-          aria-label={`Build an app for ${resource.name}`}
-        >
-          <IconLayoutGrid size={15} />
-          {promote.isPending ? "Starting..." : "Build app"}
-        </Button>
-        <AgentPackDialog
-          resource={resource}
-          onChanged={onSaved}
-          trigger={
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
-              aria-label={`Manage files for ${resource.name}`}
+              aria-label={`More actions for ${resource.name}`}
+              title="More actions"
             >
-              <IconFolder size={16} />
+              <IconDotsVertical size={16} />
             </Button>
-          }
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem
+              onSelect={() => {
+                void buildApp();
+              }}
+              disabled={promote.isPending}
+            >
+              <IconLayoutGrid className="me-2 size-4" />
+              {promote.isPending ? "Starting..." : "Build app"}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => setPackOpen(true)}>
+              <IconFolder className="me-2 size-4" />
+              Manage files
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => setEditorOpen(true)}>
+              <IconEdit className="me-2 size-4" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive"
+              onSelect={() => setDeleteOpen(true)}
+            >
+              <IconTrash className="me-2 size-4" />
+              Remove
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <AgentPackDialog
+          resource={resource}
+          onChanged={onSaved}
+          open={packOpen}
+          onOpenChange={setPackOpen}
         />
         <AgentEditorDialog
           resource={resource}
           onSaved={onSaved}
-          trigger={
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label={`Edit ${resource.name}`}
-            >
-              <IconEdit size={16} />
-            </Button>
-          }
+          open={editorOpen}
+          onOpenChange={setEditorOpen}
+        />
+        <DeleteAgentButton
+          resource={resource}
+          onDeleted={onDeleted}
+          open={deleteOpen}
+          onOpenChange={setDeleteOpen}
         />
-        <DeleteAgentButton resource={resource} onDeleted={onDeleted} />
       </div>
     </div>
   );
@@ -1160,12 +1228,18 @@ interface AgentAppCreationResult {
   url?: string;
 }
 
-export function SimpleAgentsPanel() {
+export function SimpleAgentsPanel({
+  title,
+}: {
+  title?: ReactNode;
+} = {}) {
   const query = useActionQuery<WorkspaceAgentResource[]>(
     "list-workspace-resources",
     { kind: "agent" },
   );
   const agents = query.data ?? [];
+  const refreshAgents = () => void query.refetch();
+  const importAction = <ImportAgentDialog onImported={refreshAgents} />;
 
   if (query.isError) {
     return (
@@ -1178,21 +1252,32 @@ export function SimpleAgentsPanel() {
 
   return (
     <section className="flex flex-col gap-4">
-      <div className="flex flex-wrap items-center justify-end gap-2">
-        <ImportAgentDialog onImported={() => void query.refetch()} />
-        <AgentEditorDialog onSaved={() => void query.refetch()} />
-      </div>
+      {title || agents.length > 0 ? (
+        <div
+          className={`flex flex-wrap items-center gap-3 ${title ? "justify-between" : "justify-end"}`}
+        >
+          {title ? (
+            <h2 className="text-base font-medium text-foreground">{title}</h2>
+          ) : null}
+          {agents.length > 0 ? (
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              {importAction}
+              <AgentEditorDialog onSaved={refreshAgents} />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       {query.isLoading && agents.length === 0 ? (
-        <div className="flex flex-col gap-3">
+        <div className="grid gap-3 md:grid-cols-2">
           {[0, 1, 2].map((item) => (
-            <div key={item} className="rounded-xl border bg-card px-4 py-3">
+            <div key={item} className="rounded-2xl border bg-card px-4 py-4">
               <Skeleton className="h-4 w-1/3" />
               <Skeleton className="mt-2 h-3 w-2/3" />
             </div>
           ))}
         </div>
       ) : agents.length > 0 ? (
-        <div className="flex flex-col gap-2">
+        <div className="grid gap-3 md:grid-cols-2">
           {agents.map((agent) => (
             <AgentRow
               key={agent.id}
@@ -1203,21 +1288,21 @@ export function SimpleAgentsPanel() {
           ))}
         </div>
       ) : (
-        <div className="rounded-xl border border-dashed px-6 py-14 text-center">
+        <div className="rounded-2xl border border-dashed bg-card px-4 py-12 text-center">
           <div className="text-sm font-medium text-foreground">
             No agents yet
           </div>
           <div className="mt-4 flex flex-wrap justify-center gap-2">
             <AgentEditorDialog
-              onSaved={() => void query.refetch()}
+              onSaved={refreshAgents}
               trigger={
-                <Button>
+                <Button size="sm">
                   <IconPlus size={16} />
                   Create an agent
                 </Button>
               }
             />
-            <ImportAgentDialog onImported={() => void query.refetch()} />
+            {importAction}
           </div>
         </div>
       )}