@agent-native/dispatch 0.24.6 → 0.25.0

package/src/routes/pages/apps.$appId.tsx

@@ -1,249 +1,12 @@
-import {
-  useActionMutation,
-  useActionQuery,
-} from "@agent-native/core/client/hooks";
-import { useT } from "@agent-native/core/client/i18n";
-import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
-import { IconArrowLeft, IconClockHour4 } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Link, useParams } from "react-router";
+import { useParams } from "react-router";
 
-import { ActionQueryError } from "../../components/action-query-error";
-import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
-import { Skeleton } from "../../components/ui/skeleton";
-import { Spinner } from "../../components/ui/spinner";
-import { isEmbedSessionExpiredMessage } from "../../lib/embed-session-recovery";
-import {
-  workspaceAppDirectHref,
-  workspaceAppEmbedTarget,
-  workspaceAppHref,
-  type WorkspaceAppSummary,
-} from "../../lib/workspace-apps";
-
-interface EmbedSessionResult {
-  startUrl: string;
-  targetPath?: string;
-  expiresAt?: number;
-  app: string;
-}
-
-interface EmbedSessionInput {
-  app: string;
-  path?: string;
-  url?: string;
-  chrome: "minimal";
-}
+import { WorkspaceAppHost } from "../../components/workspace-app-host";
 
 export function meta() {
   return [{ title: "Workspace app - Dispatch" }];
 }
 
 export default function WorkspaceAppRoute() {
-  const t = useT();
   const { appId } = useParams();
-  const appsQuery = useActionQuery("list-workspace-apps", {
-    includeAgentCards: false,
-  });
-  const { data: apps = [], isLoading } = appsQuery;
-  const app = useMemo(
-    () =>
-      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
-    [appId, apps],
-  );
-  const href = app ? workspaceAppHref(app) : null;
-  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
-  const [embedError, setEmbedError] = useState<Error | null>(null);
-  const [embedAttempt, setEmbedAttempt] = useState(0);
-  const embedFrameRef = useRef<HTMLIFrameElement>(null);
-  const createEmbedSession = useActionMutation<
-    EmbedSessionResult,
-    EmbedSessionInput
-  >("create_embed_session", {
-    skipActionQueryInvalidation: true,
-  });
-  const embedInput = useMemo<EmbedSessionInput | null>(() => {
-    if (!app || !href) return null;
-    return {
-      app: app.id,
-      ...workspaceAppEmbedTarget(app),
-      chrome: "minimal",
-    };
-  }, [app?.id, app?.path, app?.url, href]);
-
-  useEffect(() => {
-    if (!app || app.status === "pending" || !embedInput) return;
-    let cancelled = false;
-    setEmbedUrl(null);
-    setEmbedError(null);
-    void createEmbedSession
-      .mutateAsync(embedInput)
-      .then((result) => {
-        if (!cancelled) setEmbedUrl(result.startUrl);
-      })
-      .catch((cause: unknown) => {
-        if (!cancelled) {
-          const directAppUrl = workspaceAppDirectHref(app, "/");
-          if (directAppUrl) setEmbedUrl(directAppUrl);
-          setEmbedError(
-            cause instanceof Error ? cause : new Error(String(cause)),
-          );
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    app?.id,
-    app?.path,
-    app?.status,
-    createEmbedSession.mutateAsync,
-    embedAttempt,
-    embedInput,
-  ]);
-
-  useEffect(() => {
-    const handleEmbedSessionExpired = (event: MessageEvent) => {
-      if (!isEmbedSessionExpiredMessage(event, embedFrameRef.current, null))
-        return;
-      setEmbedAttempt((attempt) => attempt + 1);
-    };
-
-    window.addEventListener("message", handleEmbedSessionExpired);
-    return () =>
-      window.removeEventListener("message", handleEmbedSessionExpired);
-  }, []);
-
-  if (appsQuery.isError) {
-    return (
-      <div className="flex h-full min-h-0 items-center justify-center p-6">
-        <div className="w-full max-w-2xl">
-          <ActionQueryError
-            error={appsQuery.error}
-            onRetry={() => void appsQuery.refetch()}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  if (isLoading && !app) {
-    return (
-      <div className="flex h-full min-h-0 items-center justify-center p-6">
-        <div className="w-full max-w-2xl space-y-3 rounded-xl border bg-card p-6">
-          <Skeleton className="h-5 w-48" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-2/3" />
-        </div>
-      </div>
-    );
-  }
-
-  if (!app) {
-    return (
-      <div className="flex h-full min-h-0 items-center justify-center p-6">
-        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
-          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
-            <Link to="/apps">
-              <IconArrowLeft size={15} className="mr-1.5" />
-              {t("dispatch.nav.apps")}
-            </Link>
-          </Button>
-          <div className="space-y-3">
-            <h2 className="text-base font-semibold text-foreground">
-              {t("dispatch.pages.appNotFound")}
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              {t("dispatch.pages.pageNotFoundDescription")}
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (app.status === "pending") {
-    return (
-      <div className="flex h-full min-h-0 items-center justify-center p-6">
-        <div className="w-full max-w-2xl rounded-xl border bg-card p-6">
-          <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
-            <Link to="/apps">
-              <IconArrowLeft size={15} className="mr-1.5" />
-              {t("dispatch.nav.apps")}
-            </Link>
-          </Button>
-          <div className="space-y-4">
-            <div className="flex flex-wrap items-center gap-2">
-              <h2 className="text-base font-semibold text-foreground">
-                {app.name}
-              </h2>
-              <Badge
-                variant="outline"
-                className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
-              >
-                <IconClockHour4 size={12} />
-                {t("dispatch.pages.building")}
-              </Badge>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {t("dispatch.pages.appBuildingPrefix")}{" "}
-              <span className="font-mono text-foreground">{app.path}</span>{" "}
-              {t("dispatch.pages.appBuildingSuffix")}
-            </p>
-            {app.builderUrl ? (
-              <Button asChild>
-                <a
-                  href={withBuilderUtmTrackingParams(app.builderUrl, {
-                    campaign: "product",
-                    content: "dispatch_branch",
-                  })}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {t("dispatch.pages.openBuilderBranch", {
-                    defaultValue: "Open in Builder",
-                  })}
-                </a>
-              </Button>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      data-dispatch-workspace-app-host
-      className="flex h-full min-h-0 flex-col bg-background"
-    >
-      <div className="min-h-0 flex-1 bg-muted/20">
-        {embedUrl ? (
-          <iframe
-            key={`${embedUrl}:${embedAttempt}`}
-            data-dispatch-workspace-app-frame
-            src={embedUrl}
-            title={app.name}
-            ref={embedFrameRef}
-            referrerPolicy="no-referrer"
-            className="h-full w-full border-0 bg-background"
-          />
-        ) : embedError ? (
-          <div className="flex h-full items-center justify-center p-6">
-            <div className="w-full max-w-2xl">
-              <ActionQueryError
-                error={embedError}
-                onRetry={() => setEmbedAttempt((attempt) => attempt + 1)}
-              />
-            </div>
-          </div>
-        ) : (
-          <div className="flex h-full items-center justify-center">
-            <Spinner className="size-5 text-muted-foreground" />
-            <span className="sr-only">{t("dispatch.pages.loading")}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+  return <WorkspaceAppHost appId={appId} />;
 }

package/src/routes/pages/chat.spec.tsx

@@ -8,6 +8,15 @@ import ChatRoute from "./chat";
 
 const clientState = vi.hoisted(() => ({
   surfaceProps: null as Record<string, unknown> | null,
+  agents: [] as Array<{
+    id: string;
+    name: string;
+    description: string | null;
+    path: string;
+    content: string;
+    scope: "all" | "selected";
+    updatedAt: number;
+  }>,
 }));
 
 vi.mock("@agent-native/core/client/agent-chat", () => ({
@@ -15,6 +24,7 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
     clientState.surfaceProps = props;
     return <>{props.composerSlot as ReactNode}</>;
   },
+  insertAgentComposerReference: vi.fn(),
   markAgentChatHomeHandoff: vi.fn(),
   readChatFirstMode: () => true,
   navigateWithAgentChatViewTransition: (
@@ -24,6 +34,16 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
   sendToAgentChat: vi.fn(),
 }));
 
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionQuery: () => ({
+    data: clientState.agents,
+    error: null,
+    isError: false,
+    isLoading: false,
+    refetch: vi.fn(),
+  }),
+}));
+
 vi.mock("../../components/layout/Layout", () => ({
   useDispatchExtensions: () => undefined,
 }));
@@ -52,6 +72,7 @@ describe("Dispatch ChatRoute", () => {
     vi.useFakeTimers();
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     clientState.surfaceProps = null;
+    clientState.agents = [];
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -118,4 +139,45 @@ describe("Dispatch ChatRoute", () => {
     );
     expect(container.textContent).not.toContain("Chat across your apps");
   });
+
+  it("keeps an agent chat scoped and preserves the scope in thread URLs", async () => {
+    clientState.agents = [
+      {
+        id: "agent-1",
+        name: "Research Partner",
+        description: "Synthesizes research",
+        path: "agents/research-partner.md",
+        content: "instructions",
+        scope: "all",
+        updatedAt: 1,
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={["/chat?agent=agents/research-partner.md"]}
+        >
+          <ChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(clientState.surfaceProps).toMatchObject({
+      scope: {
+        type: "agent",
+        id: "agent-1",
+        label: "Research Partner",
+      },
+      storageKey: "dispatch-agent-agent-1",
+      composerPlaceholder: "Ask Research Partner...",
+    });
+    expect(
+      (
+        clientState.surfaceProps?.threadUrlSync as {
+          getPath: (id: string) => string;
+        }
+      ).getPath("thread-1"),
+    ).toBe("/chat/thread-1?agent=agents%2Fresearch-partner.md");
+  });
 });

package/src/routes/pages/chat.tsx

@@ -1,9 +1,11 @@
 import {
   AgentChatSurface,
+  insertAgentComposerReference,
   markAgentChatHomeHandoff,
   readChatFirstMode,
 } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
+import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   useCallback,
@@ -14,11 +16,24 @@ import {
 } from "react";
 import { useLocation, useNavigate } from "react-router";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { useDispatchExtensions } from "../../components/layout/Layout";
+import { Skeleton } from "../../components/ui/skeleton";
 import { submitOverviewPrompt } from "../../lib/overview-chat";
 
-function chatThreadPath(threadId: string | null): string {
-  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
+interface WorkspaceAgentResource {
+  id: string;
+  name: string;
+  description: string | null;
+  path: string;
+  content: string;
+  scope: "all" | "selected";
+  updatedAt: number;
+}
+
+function chatThreadPath(threadId: string | null, agentPath?: string): string {
+  const path = threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
+  return agentPath ? `${path}?agent=${encodeURIComponent(agentPath)}` : path;
 }
 
 function stripBasePath(pathname: string): string {
@@ -94,6 +109,40 @@ export default function ChatRoute() {
   const location = useLocation();
   const navigate = useNavigate();
   const routeThreadId = threadIdFromPath(location.pathname);
+  const agentPath = new URLSearchParams(location.search).get("agent");
+  const agentsQuery = useActionQuery<WorkspaceAgentResource[]>(
+    "list-workspace-resources",
+    { kind: "agent" },
+    { enabled: Boolean(agentPath), staleTime: 30_000 },
+  );
+  const agent = useMemo(
+    () =>
+      agentPath
+        ? (agentsQuery.data ?? []).find((resource) => {
+            const profileId = resource.path
+              .replace(/^agents\//, "")
+              .replace(/\.md$/, "");
+            return (
+              resource.path === agentPath ||
+              resource.id === agentPath ||
+              profileId === agentPath
+            );
+          })
+        : undefined,
+    [agentPath, agentsQuery.data],
+  );
+  const agentScope = useMemo(
+    () =>
+      agent
+        ? {
+            type: "agent",
+            id: agent.id,
+            label: agent.name,
+            contextKey: `dispatch-agent:${agent.id}`,
+          }
+        : null,
+    [agent],
+  );
   const handledStateIds = useRef(new Set<string>());
   const extensions = useDispatchExtensions();
   const suppressInlineOpenApp =
@@ -109,10 +158,10 @@ export default function ChatRoute() {
   const threadUrlSync = useMemo<DispatchThreadUrlSync>(
     () => ({
       routeThreadId: routeThreadId ?? null,
-      getPath: chatThreadPath,
+      getPath: (threadId) => chatThreadPath(threadId, agentPath ?? undefined),
       navigate: navigateThreadUrl,
     }),
-    [routeThreadId, navigateThreadUrl],
+    [agentPath, routeThreadId, navigateThreadUrl],
   );
   const state = location.state as DispatchChatLocationState | null;
   const prompt = state?.dispatchPrompt;
@@ -176,14 +225,64 @@ export default function ChatRoute() {
       window.removeEventListener("agentNative.chatRunning", handleChatRunning);
   }, []);
 
+  useEffect(() => {
+    if (!agent) return;
+    const timer = window.setTimeout(() => {
+      insertAgentComposerReference(
+        {
+          label: agent.name,
+          icon: "agent",
+          source: "agent:custom",
+          refType: "custom-agent",
+          refId: agent.id,
+          refPath: agent.path,
+          slotKey: "dispatch-agent",
+          slotLabel: "Agent",
+        },
+        { openSidebar: false },
+      );
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [agent?.id, agent?.name, agent?.path]);
+
+  if (agentPath && agentsQuery.isLoading) {
+    return (
+      <div className="flex h-full min-h-0 flex-col gap-4 bg-background px-4 py-6 sm:px-6">
+        <Skeleton className="mx-auto h-6 w-48" />
+        <Skeleton className="mx-auto h-12 w-full max-w-2xl" />
+      </div>
+    );
+  }
+
+  if (agentPath && agentsQuery.isError) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center bg-background px-4">
+        <ActionQueryError
+          error={agentsQuery.error}
+          onRetry={() => void agentsQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  if (agentPath && !agent) {
+    return (
+      <div className="flex h-full min-h-0 items-center justify-center bg-background px-4 text-sm text-muted-foreground">
+        This agent is no longer available.
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
       <DispatchAgentChatSurface
+        key={agent ? `agent-${agent.id}` : "dispatch"}
         mode="page"
         chatViewTransition
         className="dispatch-chat-panel px-4 sm:px-6"
         defaultMode="chat"
-        storageKey="dispatch"
+        storageKey={agent ? `dispatch-agent-${agent.id}` : "dispatch"}
+        scope={agentScope}
         threadUrlSync={threadUrlSync}
         showHeader={false}
         showTabBar={false}
@@ -201,11 +300,20 @@ export default function ChatRoute() {
               composerLayoutVariant: "hero" as const,
             }
           : {})}
-        composerPlaceholder={t("dispatch.pages.chatPromptPlaceholder", {
-          defaultValue: "Ask Dispatch...",
-        })}
+        composerPlaceholder={
+          agent
+            ? `Ask ${agent.name}...`
+            : t("dispatch.pages.chatPromptPlaceholder", {
+                defaultValue: "Ask Dispatch...",
+              })
+        }
         composerSlot={
-          !prompt?.message ? (
+          agent ? (
+            <div className="dispatch-chat-intro">
+              <h1>{agent.name}</h1>
+              {agent.description ? <p>{agent.description}</p> : null}
+            </div>
+          ) : !prompt?.message ? (
             <div className="dispatch-chat-intro">
               <h1>
                 {t("dispatch.pages.chatAcrossApps", {

package/src/server/lib/agent-pack-store.ts

@@ -0,0 +1,35 @@
+import {
+  applyWorkspaceResourceCreate,
+  getWorkspaceResourceByPath,
+  requireWorkspaceResourceCtx,
+  type WorkspaceResourceInput,
+} from "./workspace-resources-store.js";
+
+/**
+ * Apply a pack as one logical operation. Approval is handled by the action
+ * before this helper is called, so this function must never call the
+ * approval-aware create wrapper for individual files.
+ */
+export async function applyAgentPackCreate(
+  inputs: WorkspaceResourceInput[],
+  actor?: string,
+  ctx?: { ownerEmail: string; orgId: string | null },
+) {
+  const resourceCtx = ctx ?? requireWorkspaceResourceCtx();
+  const existing = await Promise.all(
+    inputs.map((input) => getWorkspaceResourceByPath(input.path, resourceCtx)),
+  );
+  const duplicate = existing.find(Boolean);
+  if (duplicate) {
+    throw new Error(
+      `An agent pack resource already exists at ${duplicate.path}. Rename the source before importing it.`,
+    );
+  }
+
+  const created = [];
+  for (const input of inputs) {
+    const resource = await applyWorkspaceResourceCreate(input, actor, ctx);
+    if (resource) created.push(resource);
+  }
+  return created;
+}

package/src/server/lib/dispatch-store.ts

@@ -588,6 +588,14 @@ async function applyApprovedRequest(request: DispatchApprovalRequest) {
       requestCtx,
     );
   }
+  if (request.changeType === "workspace-agent-pack.create") {
+    const { applyAgentPackCreate } = await import("./agent-pack-store.js");
+    return applyAgentPackCreate(
+      payload.inputs,
+      request.reviewedBy || currentOwnerEmail(),
+      requestCtx,
+    );
+  }
   if (request.changeType === "workspace-resource.update") {
     const { applyWorkspaceResourceUpdate } =
       await import("./workspace-resources-store.js");