@agent-native/dispatch 0.24.5 → 0.25.0

package/src/actions/view-screen.ts

@@ -93,6 +93,19 @@ export default defineAction({
         purpose:
           "Create apps, manage workspace resources, route work to connected agents, and continue Dispatch conversations.",
       };
+      const agentPath =
+        typeof navigation.agentPath === "string"
+          ? navigation.agentPath.trim()
+          : "";
+      if (agentPath) {
+        const agents = await listWorkspaceResourceOptions({ kind: "agent" });
+        const agent = agents.find((resource) => resource.path === agentPath);
+        screen.chatSurface = {
+          ...(screen.chatSurface as Record<string, unknown>),
+          agentPath,
+          ...(agent ? { agent } : {}),
+        };
+      }
     }
     if (navigation?.view === "overview") {
       screen.recentAudit = overview.recentAudit.slice(0, 5);
@@ -101,7 +114,7 @@ export default defineAction({
     if (navigation?.view === "destinations") {
       screen.recentDestinations = overview.recentDestinations;
     }
-    if (navigation?.view === "agents") {
+    if (navigation?.view === "connected-agents") {
       const [connectedAgents, mcpAccess] = await Promise.all([
         runLocalDispatchAction("list-connected-agents", {}),
         runLocalDispatchAction("list-mcp-app-access", {}),
@@ -109,6 +122,11 @@ export default defineAction({
       screen.connectedAgents = connectedAgents;
       screen.mcpAppAccess = mcpAccess;
     }
+    if (navigation?.view === "agents") {
+      screen.simpleAgents = await listWorkspaceResourceOptions({
+        kind: "agent",
+      });
+    }
     if (navigation?.view === "operations") {
       const nav = navigation as { operationsView?: string };
       screen.operatorConsole = {

package/src/components/app-icon.spec.tsx

@@ -31,4 +31,14 @@ describe("AppIcon", () => {
     );
     expect(icon.style.color).toBe("rgb(var(--dispatch-app-icon-color-rgb))");
   });
+
+  it("removes the colored background for monochrome rail icons", () => {
+    act(() => {
+      root.render(<AppIcon id="plan" name="Plan" monochrome />);
+    });
+
+    const icon = container.firstElementChild as HTMLElement;
+    expect(icon.className).toContain("bg-transparent");
+    expect(icon.style.cssText).not.toContain("background-color");
+  });
 });

package/src/components/index.ts

@@ -17,3 +17,4 @@ export type {
 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";

package/src/components/layout/Layout.spec.tsx

@@ -61,6 +61,7 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "dispatch.nav.chat": "Chat",
       "dispatch.nav.overview": "Overview",
       "dispatch.nav.apps": "Apps",
+      "dispatch.nav.agents": "Agents",
       "dispatch.pages.workspaceApps": "Workspace apps",
       "dispatch.nav.operate": "Operate",
       "dispatch.nav.advanced": "Advanced",
@@ -196,6 +197,7 @@ describe("Dispatch NavContent", () => {
     expect(primaryLabels.indexOf("Overview")).toBeLessThan(
       primaryLabels.indexOf("Chat"),
     );
+    expect(primaryLabels).toContain("Agents");
   });
 
   it("keeps collapsed navigation compact and preserves section spacing", async () => {

package/src/components/layout/Layout.tsx

@@ -77,6 +77,7 @@ import {
   IconBrandTelegram,
   IconCopy,
   IconEye,
+  IconHierarchy2,
   IconMessageQuestion,
   IconBroadcast,
   IconLayoutSidebarLeftCollapse,
@@ -102,13 +103,11 @@ import {
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import { isEmbedSessionExpiredMessage } from "../../lib/embed-session-recovery";
 import { cn } from "../../lib/utils";
 import {
   isDispatchWorkspaceAppId,
   isWorkspaceAppVisibleInDefaultLaunchers,
   mergeChatFirstWorkspaceApps,
-  workspaceAppDirectHref,
   workspaceAppIdFromRoute,
   workspaceAppRoute,
   type WorkspaceAppSummary,
@@ -124,9 +123,15 @@ import {
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
 import { Skeleton } from "../ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import {
+  WorkspaceAppFrame,
+  WorkspaceAppKeepAlive,
+} from "../workspace-app-host";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
 
+export { buildChatFirstEmbedSessionInput } from "../workspace-app-host";
+
 export type DispatchNavSection = "primary" | "operations";
 
 export type DispatchNavIcon = ComponentType<{
@@ -180,6 +185,13 @@ const PRIMARY_NAV_ITEMS = [
     icon: IconApps,
     section: "primary",
   },
+  {
+    id: "agents",
+    to: "/agents",
+    label: "Agents",
+    icon: IconHierarchy2,
+    section: "primary",
+  },
 ] as const satisfies readonly DispatchNavItem[];
 
 const BOTTOM_NAV_ITEMS = [
@@ -212,17 +224,6 @@ interface DispatchChatFirstPane {
   view?: string;
 }
 
-interface ChatFirstEmbedSessionResult {
-  startUrl: string;
-}
-
-interface ChatFirstEmbedSessionInput {
-  app?: string;
-  path?: string;
-  url?: string;
-  chrome: "minimal";
-}
-
 interface ChatFirstGrantedAppSummary {
   id: string;
   name: string;
@@ -233,13 +234,6 @@ interface ChatFirstGrantedAppsResult {
   apps: ChatFirstGrantedAppSummary[];
 }
 
-export function buildChatFirstEmbedSessionInput(
-  appId: string,
-  path: string,
-): ChatFirstEmbedSessionInput {
-  return { app: appId, path, chrome: "minimal" };
-}
-
 interface DispatchAgentThreadSummary {
   id: string;
   title: string;
@@ -1088,11 +1082,12 @@ export function NavContent({
         onNavigate?.();
       }}
       createAppTrigger={chatFirstCreateAppTrigger}
-      renderIcon={(app) => (
+      renderIcon={(app, options) => (
         <AppIcon
           id={app.id}
           name={app.name}
           size="sm"
+          monochrome={options?.isInactive}
           className="size-7 rounded-lg"
         />
       )}
@@ -1369,6 +1364,10 @@ export function Layout({
   const isWorkspaceAppRoute = shouldAutoCollapseDispatchSidebar(
     location.pathname,
   );
+  const workspaceAppId = isWorkspaceAppRoute
+    ? workspaceAppIdFromRoute(localPathname)
+    : null;
+  const workspaceAppRouteActive = Boolean(workspaceAppId);
   const isWorkspaceAppHostRoute =
     isWorkspaceAppRoute &&
     typeof window !== "undefined" &&
@@ -1446,20 +1445,8 @@ export function Layout({
     [chatFirstAppRegistrations],
   );
   const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
-  const createChatFirstEmbedSession = useActionMutation<
-    ChatFirstEmbedSessionResult,
-    ChatFirstEmbedSessionInput
-  >("create_embed_session", { skipActionQueryInvalidation: true });
   const [chatFirstPane, setChatFirstPane] =
     useState<DispatchChatFirstPane | null>(null);
-  const [chatFirstEmbedUrl, setChatFirstEmbedUrl] = useState<string | null>(
-    null,
-  );
-  const [chatFirstEmbedError, setChatFirstEmbedError] = useState<string | null>(
-    null,
-  );
-  const [chatFirstEmbedAttempt, setChatFirstEmbedAttempt] = useState(0);
-  const chatFirstAppFrameRef = useRef<HTMLIFrameElement>(null);
   const [chatFirstNotice, setChatFirstNotice] = useState<string | null>(null);
   const chatFirstSessionWatch = useChatFirstSessionWatch();
   const chatFirstSurfaceTabs = useChatFirstSurfaceTabs(chatFirstSurfaceScope);
@@ -1512,28 +1499,6 @@ export function Layout({
     : chatFirstAppSelected && activeChatFirstSurfaceTab?.kind === "app"
       ? activeChatFirstSurfaceTab.appId
       : undefined;
-  const activeChatFirstAppRegistration = useMemo(
-    () =>
-      activeChatFirstSurfaceTab?.kind === "app" &&
-      activeChatFirstSurfaceTab.appId
-        ? (chatFirstAppRegistrations.find(
-            (app) => app.id === activeChatFirstSurfaceTab.appId,
-          ) ?? null)
-        : null,
-    [activeChatFirstSurfaceTab, chatFirstAppRegistrations],
-  );
-  const activeChatFirstApp = useMemo(
-    () =>
-      activeChatFirstAppRegistration
-        ? {
-            id: activeChatFirstAppRegistration.id,
-            name:
-              activeChatFirstAppRegistration.name ??
-              activeChatFirstAppRegistration.id,
-          }
-        : null,
-    [activeChatFirstAppRegistration],
-  );
   const chatFirstAgentActivities = useMemo<ChatFirstAgentActivity[]>(
     () =>
       (chatFirstAgentsQuery.data?.threads ?? []).map((thread) => ({
@@ -1546,82 +1511,6 @@ export function Layout({
       })),
     [chatFirstAgentsQuery.data, chatFirstCopy],
   );
-  const chatFirstEmbedPath =
-    activeChatFirstSurfaceTab?.kind === "app"
-      ? (activeChatFirstSurfaceTab.path ??
-        chatFirstPane?.path ??
-        activeChatFirstAppRegistration?.path ??
-        "/")
-      : null;
-  useEffect(() => {
-    if (!chatFirstMode || !isChatRoute || !activeChatFirstApp) {
-      setChatFirstEmbedUrl(null);
-      setChatFirstEmbedError(null);
-      return;
-    }
-    if (!chatFirstEmbedPath?.startsWith("/")) {
-      setChatFirstEmbedUrl(null);
-      setChatFirstEmbedError(chatFirstCopy("appUnavailable"));
-      return;
-    }
-    let cancelled = false;
-    setChatFirstEmbedUrl(null);
-    setChatFirstEmbedError(null);
-    void createChatFirstEmbedSession
-      .mutateAsync(
-        buildChatFirstEmbedSessionInput(
-          activeChatFirstApp.id,
-          chatFirstEmbedPath,
-        ),
-      )
-      .then((result) => {
-        if (!cancelled) setChatFirstEmbedUrl(result.startUrl);
-      })
-      .catch((cause: unknown) => {
-        if (!cancelled) {
-          const directAppUrl = activeChatFirstAppRegistration
-            ? workspaceAppDirectHref(
-                activeChatFirstAppRegistration,
-                chatFirstEmbedPath,
-              )
-            : null;
-          if (directAppUrl) setChatFirstEmbedUrl(directAppUrl);
-          setChatFirstEmbedError(
-            cause instanceof Error
-              ? cause.message
-              : chatFirstCopy("appUnavailable"),
-          );
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    activeChatFirstApp,
-    chatFirstCopy,
-    chatFirstEmbedAttempt,
-    chatFirstEmbedPath,
-    chatFirstMode,
-    createChatFirstEmbedSession.mutateAsync,
-    isChatRoute,
-  ]);
-
-  useEffect(() => {
-    if (!chatFirstMode || !isChatRoute || !activeChatFirstApp) return;
-
-    const handleEmbedSessionExpired = (event: MessageEvent) => {
-      if (
-        !isEmbedSessionExpiredMessage(event, chatFirstAppFrameRef.current, null)
-      )
-        return;
-      setChatFirstEmbedAttempt((attempt) => attempt + 1);
-    };
-
-    window.addEventListener("message", handleEmbedSessionExpired);
-    return () =>
-      window.removeEventListener("message", handleEmbedSessionExpired);
-  }, [activeChatFirstApp, chatFirstMode, isChatRoute]);
-
   const persistChatFirstPane = useCallback(
     (pane: DispatchChatFirstPane | null) => {
       setChatFirstPane(pane);
@@ -1962,8 +1851,6 @@ export function Layout({
     }
     previousChatFirstSurfaceScopeRef.current = chatFirstSurfaceScope;
     persistChatFirstPane(null);
-    setChatFirstEmbedUrl(null);
-    setChatFirstEmbedError(null);
     setChatFirstNotice(null);
     pendingChatFirstOpenAppRef.current = null;
     chatFirstPaneHydratedRef.current = true;
@@ -2151,47 +2038,45 @@ export function Layout({
   const renderChatFirstSurfaceTab = useCallback(
     (tab: ChatFirstSurfaceTab) => {
       if (tab.kind === "app") {
-        if (tab.id !== chatFirstSurfaceTabs.activeTabId) return null;
         const registration = tab.appId
           ? (chatFirstAppRegistrations.find(
               (candidate) => candidate.id === tab.appId,
             ) ?? null)
           : null;
-        const app = registration
-          ? {
+        if (!registration) {
+          return (
+            <ChatFirstAppPane
+              app={null}
+              status={chatFirstAppsQuery.isLoading ? "loading" : "unresolved"}
+              renderEmbed={() => null}
+              copy={chatFirstCopy}
+            />
+          );
+        }
+        const embedPath = tab.path ?? registration.path ?? "/";
+        if (!embedPath.startsWith("/")) {
+          return (
+            <ChatFirstAppPane
+              app={{
+                id: registration.id,
+                name: registration.name ?? registration.id,
+              }}
+              status="error"
+              errorMessage={chatFirstCopy("appUnavailable")}
+              renderEmbed={() => null}
+              copy={chatFirstCopy}
+            />
+          );
+        }
+        return (
+          <WorkspaceAppFrame
+            app={{
               id: registration.id,
               name: registration.name ?? registration.id,
-            }
-          : null;
-        return (
-          <ChatFirstAppPane
-            app={app}
-            status={
-              chatFirstEmbedUrl
-                ? "ready"
-                : chatFirstEmbedError
-                  ? "error"
-                  : chatFirstAppsQuery.isLoading
-                    ? "loading"
-                    : app
-                      ? "loading"
-                      : "unresolved"
-            }
-            embedUrl={chatFirstEmbedUrl}
-            errorMessage={chatFirstEmbedError}
-            onRetry={() => setChatFirstEmbedAttempt((value) => value + 1)}
-            renderEmbed={({ url, title }: ChatFirstEmbedTarget) => (
-              <iframe
-                key={`${url}:${chatFirstEmbedAttempt}`}
-                data-dispatch-chat-first-app-frame
-                src={url}
-                title={title ?? chatFirstCopy("appUnavailable")}
-                ref={chatFirstAppFrameRef}
-                referrerPolicy="no-referrer"
-                allow="clipboard-read; clipboard-write"
-                className="h-full w-full border-0 bg-background"
-              />
-            )}
+              path: registration.path,
+              url: registration.url,
+            }}
+            embedPath={embedPath}
             copy={chatFirstCopy}
           />
         );
@@ -2263,8 +2148,6 @@ export function Layout({
       chatFirstAgentsQuery.isLoading,
       chatFirstAppsQuery.isLoading,
       chatFirstCopy,
-      chatFirstEmbedError,
-      chatFirstEmbedUrl,
       chatFirstSessionWatch.target,
       chatFirstSurfaceTabs.activeTabId,
       chatFirstAppRegistrations,
@@ -2449,7 +2332,7 @@ export function Layout({
         </>
       )}
     </div>
-  ) : isWorkspaceAppRoute ? (
+  ) : workspaceAppRouteActive ? null : isWorkspaceAppRoute ? (
     appContent
   ) : (
     <AgentSidebar
@@ -2553,7 +2436,12 @@ export function Layout({
             </SheetContent>
           </Sheet>
 
-          {content}
+          <div className="relative min-w-0 flex-1 overflow-hidden">
+            {content}
+            <WorkspaceAppKeepAlive
+              activeAppId={workspaceAppRouteActive ? workspaceAppId : null}
+            />
+          </div>
         </div>
       </HeaderActionsProvider>
     </DispatchExtensionsContext.Provider>

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

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  handleAgentPackMutationSuccess,
+  isPendingWorkspaceResourceApproval,
+} from "./simple-agents-panel";
+
+describe("agent pack resource mutations", () => {
+  it("recognizes pending workspace-resource approvals", () => {
+    expect(
+      isPendingWorkspaceResourceApproval({
+        status: "pending",
+        changeType: "workspace-resource.update",
+      }),
+    ).toBe(true);
+    expect(
+      isPendingWorkspaceResourceApproval({
+        status: "pending",
+        changeType: "workspace-resource.create",
+      }),
+    ).toBe(true);
+  });
+
+  it("does not treat applied resources or unrelated pending results as approvals", () => {
+    expect(
+      isPendingWorkspaceResourceApproval({
+        id: "resource_1",
+        status: "applied",
+        changeType: "workspace-resource.update",
+      }),
+    ).toBe(false);
+    expect(
+      isPendingWorkspaceResourceApproval({
+        status: "pending",
+        changeType: "destination.upsert",
+      }),
+    ).toBe(false);
+    expect(isPendingWorkspaceResourceApproval(null)).toBe(false);
+  });
+
+  it("reports queued approval without running applied-only refresh work", () => {
+    const notifications: string[] = [];
+    const onApplied = () => notifications.push("refreshed");
+
+    handleAgentPackMutationSuccess(
+      { status: "pending", changeType: "workspace-resource.update" },
+      {
+        appliedMessage: "Pack file updated",
+        approvalMessage: "Pack file update queued for approval",
+        onApplied,
+        notify: (message) => notifications.push(message),
+      },
+    );
+
+    expect(notifications).toEqual(["Pack file update queued for approval"]);
+  });
+
+  it("reports applied and runs refresh work for an applied resource", () => {
+    const notifications: string[] = [];
+
+    handleAgentPackMutationSuccess(
+      { id: "resource_1" },
+      {
+        appliedMessage: "Pack file added",
+        approvalMessage: "Pack file addition queued for approval",
+        onApplied: () => notifications.push("refreshed"),
+        notify: (message) => notifications.push(message),
+      },
+    );
+
+    expect(notifications).toEqual(["Pack file added", "refreshed"]);
+  });
+});