@agent-native/dispatch 0.27.21 → 0.28.0

package/src/components/layout/Layout.tsx

@@ -125,6 +125,7 @@ import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
 import { Skeleton } from "../ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import {
+  WorkspaceAppChatRail,
   WorkspaceAppFrame,
   WorkspaceAppKeepAlive,
 } from "../workspace-app-host";
@@ -2349,28 +2350,14 @@ export function Layout({
     "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}`}
+      <WorkspaceAppChatRail
+        appId={workspaceAppId}
+        appName={workspaceAppChatName}
         agentPageHref={agentPageHref}
         onFullscreenRequest={openAskAgentFullscreen}
       >
         <WorkspaceAppKeepAlive activeAppId={workspaceAppId} />
-      </AgentSidebar>
+      </WorkspaceAppChatRail>
     ) : (
       <WorkspaceAppKeepAlive
         activeAppId={workspaceAppRouteActive ? workspaceAppId : null}

package/src/components/workspace-app-chat-rail.spec.tsx

@@ -0,0 +1,182 @@
+// @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";
+
+const railState = vi.hoisted(() => ({
+  sidebarProps: [] as Array<Record<string, unknown>>,
+  fetchImpl: vi.fn(),
+  // Stable identity: the embed effect depends on it, so a fresh mock per
+  // render would re-run the effect forever.
+  mutateAsync: vi.fn().mockResolvedValue({ startUrl: "about:blank" }),
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  AgentSidebar: (props: Record<string, unknown>) => {
+    railState.sidebarProps.push(props);
+    return (
+      <div data-agent-sidebar data-api-url={String(props.apiUrl ?? "")}>
+        {props.children as React.ReactNode}
+      </div>
+    );
+  },
+}));
+
+vi.mock("@agent-native/core/client/api-path", () => ({
+  agentNativePath: (path: string) => path,
+}));
+
+vi.mock("@agent-native/core/client/chat-first", () => ({
+  ChatFirstAppPane: ({ app }: { app: { name: string } | null }) => (
+    <div data-app-pane>{app?.name}</div>
+  ),
+  defaultChatFirstCopy: (key: string) => key,
+}));
+
+vi.mock("@agent-native/core/client/feature-flags", () => ({
+  useFeatureFlag: () => false,
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: () => ({ mutateAsync: railState.mutateAsync }),
+  useActionQuery: () => ({
+    data: [],
+    isError: false,
+    isLoading: false,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string, options?: { defaultValue?: string }) =>
+    options?.defaultValue ?? key,
+}));
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ resolvedTheme: "light" }),
+}));
+
+import { WorkspaceAppChatRail, WorkspaceAppFrame } from "./workspace-app-host";
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+describe("WorkspaceAppChatRail", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    railState.sidebarProps.length = 0;
+    railState.fetchImpl.mockReset();
+    vi.stubGlobal("fetch", railState.fetchImpl);
+    vi.spyOn(console, "warn").mockImplementation(() => undefined);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  async function render(node: React.ReactNode) {
+    await act(async () => {
+      root.render(node);
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+  }
+
+  it("points the rail at the app's own agent through the Dispatch proxy", async () => {
+    railState.fetchImpl.mockResolvedValue(
+      jsonResponse(200, { devMode: false, canToggle: false }),
+    );
+
+    await render(
+      <WorkspaceAppChatRail appId="mail" appName="Mail">
+        <div data-app-surface />
+      </WorkspaceAppChatRail>,
+    );
+
+    expect(railState.fetchImpl).toHaveBeenCalledWith(
+      "/_agent-native/workspace-app-chat/mail/mode",
+      { credentials: "include" },
+    );
+    const sidebar = container.querySelector("[data-agent-sidebar]");
+    expect(sidebar?.getAttribute("data-api-url")).toBe(
+      "/_agent-native/workspace-app-chat/mail",
+    );
+    expect(container.querySelector("[data-app-surface]")).not.toBeNull();
+  });
+
+  it("shows an error instead of quietly answering from Dispatch's own agent", async () => {
+    railState.fetchImpl.mockResolvedValue(
+      jsonResponse(502, { error: "mail chat is unavailable: no app session" }),
+    );
+
+    await render(
+      <WorkspaceAppChatRail appId="mail" appName="Mail">
+        <div data-app-surface />
+      </WorkspaceAppChatRail>,
+    );
+
+    expect(
+      container.querySelector("[data-dispatch-app-chat-unavailable]"),
+    ).not.toBeNull();
+    // The rail is absent rather than falling back to a Dispatch-scoped chat,
+    // which would run the wrong tools and instructions while looking healthy.
+    expect(container.querySelector("[data-agent-sidebar]")).toBeNull();
+    expect(container.querySelector("[data-app-surface]")).not.toBeNull();
+  });
+
+  it("re-probes the proxy when the error state is retried", async () => {
+    railState.fetchImpl.mockResolvedValueOnce(
+      jsonResponse(502, { error: "temporarily unavailable" }),
+    );
+    railState.fetchImpl.mockResolvedValue(
+      jsonResponse(200, { devMode: false }),
+    );
+
+    await render(
+      <WorkspaceAppChatRail appId="mail" appName="Mail">
+        <div data-app-surface />
+      </WorkspaceAppChatRail>,
+    );
+    const retry = container.querySelector<HTMLButtonElement>(
+      "[data-dispatch-app-chat-unavailable] button",
+    );
+    expect(retry).not.toBeNull();
+
+    await act(async () => {
+      retry?.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(railState.fetchImpl).toHaveBeenCalledTimes(2);
+    expect(container.querySelector("[data-agent-sidebar]")).not.toBeNull();
+  });
+
+  it("leaves surfaces with no open app alone — no app rail and no proxy probe", async () => {
+    await render(
+      <WorkspaceAppFrame app={{ id: "mail", name: "Mail", path: "/mail" }} />,
+    );
+
+    expect(container.querySelector("[data-agent-sidebar]")).toBeNull();
+    expect(railState.fetchImpl).not.toHaveBeenCalledWith(
+      expect.stringContaining("workspace-app-chat"),
+      expect.anything(),
+    );
+  });
+});

package/src/components/workspace-app-host.tsx

@@ -1,4 +1,5 @@
 import { AgentSidebar } from "@agent-native/core/client/agent-chat";
+import { agentNativePath } from "@agent-native/core/client/api-path";
 import {
   ChatFirstAppPane,
   defaultChatFirstCopy,
@@ -11,9 +12,20 @@ import {
 } 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 {
+  IconAlertTriangle,
+  IconArrowLeft,
+  IconClockHour4,
+} from "@tabler/icons-react";
 import { useTheme } from "next-themes";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { Link } from "react-router";
 
 import { isEmbedSessionExpiredMessage } from "../lib/embed-session-recovery";
@@ -25,7 +37,9 @@ import {
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
 import { DISPATCH_WORKSPACE_SSO_FLAG } from "../shared/feature-flags";
+import { workspaceAppChatProxyPath } from "../shared/workspace-app-chat";
 import { ActionQueryError } from "./action-query-error";
+import { Alert, AlertDescription } from "./ui/alert";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
@@ -67,6 +81,160 @@ export function buildChatFirstEmbedSessionInput(
   return { app: appId, path, chrome: "minimal" };
 }
 
+async function readWorkspaceAppChatProxyError(
+  response: Response,
+): Promise<string> {
+  let body: string;
+  try {
+    body = await response.text();
+  } catch {
+    // coercion-ok: an unreadable body is reported as such, not as an empty error.
+    return `Agent chat proxy returned ${response.status} with an unreadable body.`;
+  }
+  try {
+    const parsed = JSON.parse(body) as { error?: unknown };
+    if (typeof parsed.error === "string" && parsed.error) return parsed.error;
+  } catch {
+    // coercion-ok: a non-JSON body is still reportable as the status line.
+  }
+  return body.trim() || `Agent chat proxy returned ${response.status}.`;
+}
+
+/**
+ * Point the app pane's chat rail at the app's OWN agent through the Dispatch
+ * proxy, and prove the proxy answers before claiming it works. A rail that
+ * quietly fell back to Dispatch's agent would look identical while running the
+ * wrong tools, instructions, and app resources, so a failed probe is a visible
+ * error state instead.
+ */
+function useWorkspaceAppChatApi(appId: string) {
+  const apiUrl = useMemo(
+    () => agentNativePath(workspaceAppChatProxyPath(appId)),
+    [appId],
+  );
+  const [attempt, setAttempt] = useState(0);
+  const [unavailable, setUnavailable] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setUnavailable(false);
+    // `/mode` is the app's own dev-mode surface: reaching it proves the proxy
+    // minted an app session and the app's agent-chat routes answer.
+    void fetch(`${apiUrl}/mode`, { credentials: "include" })
+      .then(async (response) => {
+        if (response.ok) return;
+        throw new Error(await readWorkspaceAppChatProxyError(response));
+      })
+      .catch((cause: unknown) => {
+        if (cancelled) return;
+        console.warn(
+          `[dispatch] app chat proxy unavailable for ${appId}`,
+          cause,
+        );
+        setUnavailable(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, appId, attempt]);
+
+  return {
+    apiUrl,
+    unavailable,
+    retry: useCallback(() => setAttempt((value) => value + 1), []),
+  };
+}
+
+export interface WorkspaceAppChatRailProps {
+  appId: string;
+  appName: string;
+  children: ReactNode;
+  copy?: ChatFirstCopy;
+  agentPageHref?: string;
+  onFullscreenRequest?: () => void;
+}
+
+/**
+ * The chat beside an open workspace app. Every surface that hosts an app pane
+ * must go through here so the rail is always the app's own agent — same tools,
+ * AGENTS.md, skills, app-scoped resources, and dev-mode surface as the app's
+ * native chat — and so an unreachable app is one visible error state rather
+ * than a per-surface silent handoff back to Dispatch's agent.
+ */
+export function WorkspaceAppChatRail({
+  appId,
+  appName,
+  children,
+  copy = defaultChatFirstCopy,
+  agentPageHref,
+  onFullscreenRequest,
+}: WorkspaceAppChatRailProps) {
+  const t = useT();
+  const appChat = useWorkspaceAppChatApi(appId);
+
+  if (appChat.unavailable) {
+    return (
+      <div className="flex h-full min-h-0">
+        <div
+          data-dispatch-app-chat-unavailable
+          className="w-88 shrink-0 overflow-auto border-r p-4"
+        >
+          <Alert variant="destructive">
+            <IconAlertTriangle className="size-4" />
+            <AlertDescription className="flex flex-wrap items-center justify-between gap-3">
+              <span>
+                {t("dispatch.pages.appChatUnavailable", {
+                  defaultValue:
+                    "Dispatch could not connect to {{name}}'s agent, so its chat is unavailable here.",
+                  name: appName,
+                })}
+              </span>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={appChat.retry}
+              >
+                {copy("retry")}
+              </Button>
+            </AlertDescription>
+          </Alert>
+        </div>
+        <div className="min-w-0 flex-1">{children}</div>
+      </div>
+    );
+  }
+
+  return (
+    <AgentSidebar
+      position="left"
+      defaultOpen
+      openStorageKey="dispatch-app-chat"
+      storageKey={`dispatch-app-chat:${appId}`}
+      scope={{
+        type: "workspace-app",
+        id: appId,
+        label: appName,
+        contextKey: `workspace-app:${appId}`,
+      }}
+      // The app's own server answers this chat, so its tools, AGENTS.md,
+      // skills, app-scoped resources, and dev-mode surface are the real ones
+      // rather than a copy maintained inside Dispatch.
+      apiUrl={appChat.apiUrl}
+      agentChatSurface="app"
+      showTabBar
+      suppressInlineOpenApp
+      dynamicSuggestions={false}
+      suggestions={[]}
+      emptyStateText={`Ask about ${appName}`}
+      {...(agentPageHref ? { agentPageHref } : {})}
+      {...(onFullscreenRequest ? { onFullscreenRequest } : {})}
+    >
+      {children}
+    </AgentSidebar>
+  );
+}
+
 export interface WorkspaceAppFrameApp {
   id: string;
   name: string;
@@ -250,26 +418,9 @@ export function WorkspaceAppFrame({
   if (!chatSidebar) return appPane;
 
   return (
-    <AgentSidebar
-      position="left"
-      defaultOpen
-      openStorageKey="dispatch-app-chat"
-      storageKey={`dispatch-app-chat:${app.id}`}
-      scope={{
-        type: "workspace-app",
-        id: app.id,
-        label: app.name,
-        contextKey: `workspace-app:${app.id}`,
-      }}
-      agentChatSurface="app"
-      showTabBar
-      suppressInlineOpenApp
-      dynamicSuggestions={false}
-      suggestions={[]}
-      emptyStateText={`Ask about ${app.name}`}
-    >
+    <WorkspaceAppChatRail appId={app.id} appName={app.name} copy={copy}>
       {appPane}
-    </AgentSidebar>
+    </WorkspaceAppChatRail>
   );
 }
 

package/src/server/lib/app-creation-store.spec.ts

@@ -504,31 +504,43 @@ describe("listWorkspaceApps", () => {
         }),
       },
     });
-    expect(mocks.getDbExec).toHaveBeenCalled();
   });
 
-  it("blocks non-admin workspace members from updating app display metadata", async () => {
+  it("lets workspace members update app display metadata", async () => {
     mocks.state.orgRole = "member";
     stubNoPendingContext();
-    stubManifest([{ id: "todo", name: "Todo", path: "/todo" }]);
-
-    await expect(
-      runWithRequestContext(
-        { userEmail: "dev@example.test", orgId: "org-123" },
-        () =>
-          updateWorkspaceAppMetadata({
-            appId: "todo",
-            name: "Todo Board",
-          }),
-      ),
-    ).rejects.toMatchObject({
-      message:
-        "Only organization owners and admins can update app creation settings.",
-      statusCode: 403,
+    stubManifest([
+      {
+        id: "todo",
+        name: "Todo",
+        description: "Original description",
+        path: "/todo",
+      },
+    ]);
+
+    const updated = await runWithRequestContext(
+      { userEmail: "dev@example.test", orgId: "org-123" },
+      () =>
+        updateWorkspaceAppMetadata({
+          appId: "todo",
+          name: "Todo Board",
+          description: "Tracks team work.",
+        }),
+    );
+
+    expect(updated).toMatchObject({
+      name: "Todo Board",
+      description: "Tracks team work.",
+    });
+    expect(mocks.settings.get("workspace-app-metadata:org:org-123")).toEqual({
+      apps: {
+        todo: expect.objectContaining({
+          name: "Todo Board",
+          description: "Tracks team work.",
+          updatedBy: "dev@example.test",
+        }),
+      },
     });
-    expect(
-      mocks.settings.get("workspace-app-metadata:org:org-123"),
-    ).toBeUndefined();
   });
 
   it("generates a concise seed description from an app prompt", () => {

package/src/server/lib/app-creation-store.ts

@@ -1355,7 +1355,6 @@ export async function updateWorkspaceAppMetadata(input: {
   name?: string | null;
   description?: string | null;
 }): Promise<WorkspaceAppSummary> {
-  await assertCanManageAppCreationSettings();
   const appId = input.appId.trim();
   assertValidWorkspaceAppId(appId);