@agent-native/dispatch 0.23.5 → 0.24.2

package/src/components/workspace-template-card.tsx

@@ -1,4 +1,5 @@
 import { useActionMutation } from "@agent-native/core/client/hooks";
+import { normalizeWorkspaceAppId } from "@agent-native/core/shared";
 import {
   IconArrowUpRight,
   IconCircleCheck,
@@ -12,6 +13,7 @@ import { cn } from "../lib/utils";
 import { AppIcon } from "./app-icon";
 import { AppListRow } from "./app-list-row";
 import { AppOpenActions } from "./app-open-actions";
+import { AppRowSettings } from "./app-row-settings";
 import { Button } from "./ui/button";
 import {
   Dialog,
@@ -94,17 +96,6 @@ export interface WorkspaceTemplateCardProps {
   ) => void;
 }
 
-function slugifyAppId(value: string): string {
-  return (
-    value
-      .trim()
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "")
-      .slice(0, 48) || "new-app"
-  );
-}
-
 function templateIdFor(template: CuratedWorkspaceTemplate): string {
   return template.templateId || template.id || template.appId || template.name;
 }
@@ -113,8 +104,9 @@ function defaultAppIdFor(
   template: CuratedWorkspaceTemplate,
   defaultAppId?: string,
 ): string {
-  if (defaultAppId) return slugifyAppId(defaultAppId);
-  const sourceId = slugifyAppId(template.appId || template.name);
+  if (defaultAppId) return normalizeWorkspaceAppId(defaultAppId) || "new-app";
+  const sourceId =
+    normalizeWorkspaceAppId(template.appId || template.name) || "new-app";
   return `${sourceId}-app`;
 }
 
@@ -173,15 +165,16 @@ export function WorkspaceTemplateCard({
   }, [defaultAppId, open, template]);
 
   function submitRemix() {
-    const trimmedAppId = appId.trim();
-    if (!trimmedAppId) {
+    const normalizedAppId = normalizeWorkspaceAppId(appId);
+    if (!normalizedAppId) {
       toast.error(labels.appIdRequired);
       return;
     }
+    setAppId(normalizedAppId);
 
     remix.mutate({
       templateId: templateIdFor(template),
-      appId: trimmedAppId,
+      appId: normalizedAppId,
     });
   }
 
@@ -219,20 +212,16 @@ export function WorkspaceTemplateCard({
               <AppOpenActions
                 name={template.name}
                 href={liveUrl}
-                target="_blank"
                 rel="noreferrer"
                 labels={{ openApp: labels.openApp }}
+                showNewTabOption
               />
             ) : null}
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setOpen(true)}
-            >
-              <IconPlus />
-              {labels.remix}
-            </Button>
+            <AppRowSettings
+              name={template.name}
+              addAppLabel={labels.remix}
+              onAddApp={() => setOpen(true)}
+            />
           </>
         ) : liveUrl ? (
           <Button variant="ghost" size="sm" className="shrink-0" asChild>
@@ -280,6 +269,7 @@ export function WorkspaceTemplateCard({
                   value={appId}
                   autoComplete="off"
                   onChange={(event) => setAppId(event.target.value)}
+                  onBlur={() => setAppId(normalizeWorkspaceAppId(appId))}
                   disabled={remix.isPending}
                 />
               </div>

package/src/hooks/use-navigation-state.ts

@@ -32,6 +32,8 @@ export interface NavigationState {
   query?: string;
   runId?: string;
   threadId?: string;
+  usageScope?: "me" | "workspace";
+  usageUserEmail?: string;
 }
 
 export function useNavigationState(extensions?: DispatchExtensionConfig) {
@@ -177,6 +179,16 @@ export function buildDispatchNavigationState(
     if (selectedThreadId) state.threadId = selectedThreadId;
   }
 
+  if (state.view === "metrics") {
+    const params = new URLSearchParams(search);
+    const usageScope = params.get("scope");
+    const usageUserEmail = params.get("user");
+    if (usageScope === "me" || usageScope === "workspace") {
+      state.usageScope = usageScope;
+    }
+    if (usageUserEmail) state.usageUserEmail = usageUserEmail;
+  }
+
   return state;
 }
 

package/src/lib/embed-session-recovery.spec.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  EMBED_SESSION_EXPIRED_MESSAGE,
+  isEmbedSessionExpiredMessage,
+} from "./embed-session-recovery";
+
+const frameWindow = {} as Window;
+const frame = {
+  contentWindow: frameWindow,
+  src: "https://mail.example.test/_agent-native/embed/start?ticket=one",
+} as HTMLIFrameElement;
+
+describe("isEmbedSessionExpiredMessage", () => {
+  it("accepts a message from the active app frame", () => {
+    expect(
+      isEmbedSessionExpiredMessage(
+        { data: { type: EMBED_SESSION_EXPIRED_MESSAGE }, source: frameWindow },
+        frame,
+      ),
+    ).toBe(true);
+  });
+
+  it("rejects messages from another frame", () => {
+    expect(
+      isEmbedSessionExpiredMessage(
+        { data: { type: EMBED_SESSION_EXPIRED_MESSAGE }, source: {} as Window },
+        frame,
+      ),
+    ).toBe(false);
+  });
+
+  it("accepts a matching start URL when the browser omits event.source", () => {
+    expect(
+      isEmbedSessionExpiredMessage(
+        {
+          data: {
+            type: EMBED_SESSION_EXPIRED_MESSAGE,
+            embedStartUrl: frame.src,
+          },
+          source: null,
+        },
+        frame,
+      ),
+    ).toBe(true);
+  });
+
+  it("can match the expected URL before the iframe ref is available", () => {
+    expect(
+      isEmbedSessionExpiredMessage(
+        {
+          data: {
+            type: EMBED_SESSION_EXPIRED_MESSAGE,
+            embedStartUrl: frame.src,
+          },
+          source: null,
+        },
+        null,
+        frame.src,
+      ),
+    ).toBe(true);
+  });
+});

package/src/lib/embed-session-recovery.ts

@@ -0,0 +1,26 @@
+export const EMBED_SESSION_EXPIRED_MESSAGE = "agentNative.embedSessionExpired";
+
+interface EmbedSessionExpiredMessage {
+  type?: unknown;
+  embedStartUrl?: unknown;
+}
+
+export function isEmbedSessionExpiredMessage(
+  event: Pick<MessageEvent, "data" | "source">,
+  frame: Pick<HTMLIFrameElement, "contentWindow" | "src"> | null,
+  expectedStartUrl?: string | null,
+): boolean {
+  const data =
+    event.data && typeof event.data === "object"
+      ? (event.data as EmbedSessionExpiredMessage)
+      : null;
+  if (data?.type !== EMBED_SESSION_EXPIRED_MESSAGE) return false;
+
+  const frameWindow = frame?.contentWindow;
+  if (frameWindow && event.source === frameWindow) return true;
+  if (event.source !== null) return false;
+  if (typeof data.embedStartUrl !== "string") return false;
+
+  const frameUrl = frame?.src || expectedStartUrl;
+  return Boolean(frameUrl && data.embedStartUrl === frameUrl);
+}

package/src/lib/other-apps.ts

@@ -5,6 +5,8 @@ export interface ConnectedAppSummary {
   name: string;
   description?: string;
   url: string;
+  /** Canonical app-home URL used for launchers; `url` remains the A2A endpoint. */
+  homeUrl?: string;
   color?: string;
   source?: "builtin" | "custom" | "workspace";
 }

package/src/lib/workspace-app-layout.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  normalizeWorkspaceAppLayout,
+  orderWorkspaceApps,
+  toggleWorkspaceAppPinned,
+  workspaceAppMatchesQuery,
+} from "./workspace-app-layout";
+
+describe("workspace app layout", () => {
+  it("keeps pinned apps first without changing the remaining catalog order", () => {
+    const apps = [
+      { id: "mail", name: "Mail" },
+      { id: "analytics", name: "Analytics" },
+      { id: "calendar", name: "Calendar" },
+    ];
+
+    expect(
+      orderWorkspaceApps(apps, {
+        pinnedIds: ["calendar", "calendar"],
+        orderedIds: ["mail", "analytics", "calendar"],
+      }).map((app) => app.id),
+    ).toEqual(["calendar", "mail", "analytics"]);
+  });
+
+  it("matches app names and descriptions case-insensitively", () => {
+    expect(
+      workspaceAppMatchesQuery(
+        { name: "Analytics", description: "Explore product health" },
+        "PRODUCT",
+      ),
+    ).toBe(true);
+    expect(workspaceAppMatchesQuery({ name: "Mail" }, "calendar")).toBe(false);
+  });
+
+  it("normalizes persisted layout ids and toggles pin state", () => {
+    const layout = normalizeWorkspaceAppLayout({
+      pinnedIds: ["mail", "mail", 42],
+      orderedIds: ["calendar", "", "calendar"],
+    });
+
+    expect(toggleWorkspaceAppPinned(layout, "calendar")).toEqual({
+      pinnedIds: ["calendar", "mail"],
+      orderedIds: ["calendar"],
+    });
+  });
+});

package/src/lib/workspace-app-layout.ts

@@ -0,0 +1,121 @@
+import {
+  orderChatFirstAppIds,
+  readChatFirstAppLayout,
+  writeChatFirstAppLayout,
+  type ChatFirstAppLayoutPreference,
+} from "@agent-native/core/client/agent-chat";
+import {
+  readClientAppState,
+  writeClientAppState,
+} from "@agent-native/core/client/application-state";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export const WORKSPACE_APP_LAYOUT_STATE_KEY = "chat-first-app-layout";
+
+export type WorkspaceAppLayoutPersistenceError =
+  | "device"
+  | "workspace"
+  | "both";
+
+export function normalizeWorkspaceAppLayout(
+  value: unknown,
+): ChatFirstAppLayoutPreference {
+  if (!value || typeof value !== "object") {
+    return { pinnedIds: [], orderedIds: [] };
+  }
+
+  const candidate = value as Partial<ChatFirstAppLayoutPreference>;
+  const ids = (input: unknown): string[] =>
+    Array.isArray(input)
+      ? input.filter(
+          (id): id is string => typeof id === "string" && id.trim().length > 0,
+        )
+      : [];
+
+  return {
+    pinnedIds: [...new Set(ids(candidate.pinnedIds))],
+    orderedIds: [...new Set(ids(candidate.orderedIds))],
+  };
+}
+
+export function orderWorkspaceApps<T extends { id: string }>(
+  apps: readonly T[],
+  layout: ChatFirstAppLayoutPreference,
+): T[] {
+  const appsById = new Map(apps.map((app) => [app.id, app]));
+  return orderChatFirstAppIds(
+    apps.map((app) => app.id),
+    layout,
+  )
+    .map((id) => appsById.get(id))
+    .filter((app): app is T => Boolean(app));
+}
+
+export function workspaceAppMatchesQuery(
+  app: { name: string; description?: string },
+  query: string,
+): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return true;
+  return `${app.name} ${app.description ?? ""}`
+    .toLowerCase()
+    .includes(normalizedQuery);
+}
+
+export function toggleWorkspaceAppPinned(
+  layout: ChatFirstAppLayoutPreference,
+  appId: string,
+): ChatFirstAppLayoutPreference {
+  const pinnedIds = layout.pinnedIds.includes(appId)
+    ? layout.pinnedIds.filter((id) => id !== appId)
+    : [appId, ...layout.pinnedIds];
+  return { ...layout, pinnedIds };
+}
+
+export function useWorkspaceAppLayout() {
+  const [layout, setLayout] = useState<ChatFirstAppLayoutPreference>(() =>
+    readChatFirstAppLayout(),
+  );
+  const [persistenceError, setPersistenceError] =
+    useState<WorkspaceAppLayoutPersistenceError | null>(null);
+  const hydratedRef = useRef(false);
+  const localChangeRef = useRef(false);
+
+  useEffect(() => {
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    void readClientAppState<unknown>(WORKSPACE_APP_LAYOUT_STATE_KEY)
+      .then((value) => {
+        if (value !== null && !localChangeRef.current) {
+          setLayout(normalizeWorkspaceAppLayout(value));
+        }
+      })
+      .catch(() => {
+        // Device-local preferences remain usable when workspace state is unavailable.
+      });
+  }, []);
+
+  const persistLayout = useCallback((next: ChatFirstAppLayoutPreference) => {
+    localChangeRef.current = true;
+    setLayout(next);
+    const deviceResult = writeChatFirstAppLayout(next);
+    const deviceFailed = !deviceResult.ok;
+
+    void writeClientAppState(WORKSPACE_APP_LAYOUT_STATE_KEY, next)
+      .then(() => {
+        setPersistenceError(deviceFailed ? "device" : null);
+      })
+      .catch(() => {
+        setPersistenceError(deviceFailed ? "both" : "workspace");
+      });
+  }, []);
+
+  const togglePinned = useCallback(
+    (appId: string) => {
+      persistLayout(toggleWorkspaceAppPinned(layout, appId));
+    },
+    [layout, persistLayout],
+  );
+
+  return { layout, persistenceError, persistLayout, togglePinned };
+}

package/src/lib/workspace-apps.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  workspaceAppDirectHref,
+  workspaceAppEmbedTarget,
+} from "./workspace-apps";
+
+describe("workspaceAppEmbedTarget", () => {
+  it("uses the app URL as the embed root when a mount path is also present", () => {
+    expect(
+      workspaceAppEmbedTarget({
+        path: "/content",
+        url: "https://workspace.example.test/content",
+      }),
+    ).toEqual({ url: "https://workspace.example.test/content" });
+  });
+
+  it("falls back to the mounted path when no app URL is available", () => {
+    expect(workspaceAppEmbedTarget({ path: "/content", url: null })).toEqual({
+      path: "/content",
+    });
+  });
+});
+
+describe("workspaceAppDirectHref", () => {
+  it("joins an app-relative route onto an absolute app URL", () => {
+    expect(
+      workspaceAppDirectHref(
+        { path: "/atlas", url: "https://workspace.example.test/atlas" },
+        "/emails?status=failed#latest",
+      ),
+    ).toBe("https://workspace.example.test/atlas/emails?status=failed#latest");
+  });
+
+  it("does not duplicate a mount path already present in the target", () => {
+    expect(
+      workspaceAppDirectHref(
+        { path: "/atlas", url: "https://workspace.example.test/atlas" },
+        "/atlas",
+      ),
+    ).toBe("https://workspace.example.test/atlas");
+  });
+
+  it("resolves a mounted relative app path", () => {
+    expect(workspaceAppDirectHref({ path: "/atlas" }, "/emails")).toBe(
+      "/atlas/emails",
+    );
+  });
+
+  it("falls back to a safe mount path when the app URL is invalid", () => {
+    expect(
+      workspaceAppDirectHref(
+        { path: "/atlas", url: "javascript:alert(1)" },
+        "/",
+      ),
+    ).toBe("/atlas");
+  });
+
+  it("rejects an unsafe target path", () => {
+    expect(workspaceAppDirectHref({ path: "/atlas" }, "//evil.example")).toBe(
+      null,
+    );
+  });
+});

package/src/lib/workspace-apps.ts

@@ -27,6 +27,11 @@ export interface WorkspaceAppSummary {
   archived?: boolean;
 }
 
+interface WorkspaceAppHrefSource {
+  path?: string | null;
+  url?: string | null;
+}
+
 export function isDispatchWorkspaceAppId(appId: string): boolean {
   return appId.trim().toLowerCase() === "dispatch";
 }
@@ -70,6 +75,83 @@ export function workspaceAppHref(app: WorkspaceAppSummary): string | null {
   return app.path || app.url || null;
 }
 
+export function workspaceAppEmbedTarget(
+  app: Pick<WorkspaceAppSummary, "path" | "url">,
+): { path?: string; url?: string } {
+  const url = app.url?.trim();
+  if (url) return { url };
+
+  const path = app.path.trim();
+  return path.startsWith("/") ? { path } : path ? { url: path } : {};
+}
+
+/**
+ * Resolve an app route without an embed ticket so the target can render its
+ * own error document when session setup fails.
+ */
+export function workspaceAppDirectHref(
+  app: WorkspaceAppHrefSource,
+  targetPath: string,
+): string | null {
+  const target = targetPath.trim();
+  if (!target || !target.startsWith("/") || target.startsWith("//")) {
+    return null;
+  }
+
+  let targetUrl: URL;
+  try {
+    targetUrl = new URL(target, "https://agent-native.invalid");
+  } catch {
+    // coercion-ok: invalid relative target input has no safe href.
+    return null;
+  }
+  const targetPathname = targetUrl.pathname || "/";
+
+  let absoluteBase: URL | null = null;
+  const rawUrl = app.url?.trim();
+  if (rawUrl) {
+    try {
+      const parsedBase = new URL(rawUrl);
+      if (parsedBase.protocol === "http:" || parsedBase.protocol === "https:") {
+        absoluteBase = parsedBase;
+      }
+      // coercion-ok: invalid app URLs use the mounted path fallback below.
+    } catch {
+      absoluteBase = null;
+    }
+  }
+
+  const mountedPath = app.path?.trim();
+  const basePath = absoluteBase
+    ? absoluteBase.pathname
+    : mountedPath
+      ? `/${mountedPath.replace(/^[/\\]+/, "").split(/[?#]/, 1)[0]}`
+      : null;
+  if (!basePath) return null;
+
+  const normalizedBasePath = basePath.replace(/\/+$/, "") || "/";
+  const targetIsMountedPath =
+    normalizedBasePath !== "/" &&
+    (targetPathname === normalizedBasePath ||
+      targetPathname.startsWith(`${normalizedBasePath}/`));
+  const resolvedPath = targetIsMountedPath
+    ? targetPathname
+    : normalizedBasePath === "/"
+      ? targetPathname
+      : targetPathname === "/"
+        ? normalizedBasePath
+        : `${normalizedBasePath}/${targetPathname.replace(/^\/+/, "")}`;
+
+  if (absoluteBase) {
+    absoluteBase.pathname = resolvedPath;
+    absoluteBase.search = targetUrl.search;
+    absoluteBase.hash = targetUrl.hash;
+    return absoluteBase.toString();
+  }
+
+  return `${resolvedPath}${targetUrl.search}${targetUrl.hash}`;
+}
+
 export function isPendingBuilderHref(app: WorkspaceAppSummary): boolean {
   return app.status === "pending" && !!app.builderUrl;
 }

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

@@ -176,11 +176,6 @@ export default function WorkspaceAppCatchAllRoute() {
               <span className="font-mono text-foreground">{app.path}</span>{" "}
               {t("dispatch.pages.appBuildingSuffix")}
             </p>
-            {app.branchName ? (
-              <p className="text-xs text-muted-foreground">
-                {t("dispatch.pages.branch", { branch: app.branchName })}
-              </p>
-            ) : null}
             {app.builderUrl ? (
               <Button asChild>
                 <a
@@ -191,7 +186,9 @@ export default function WorkspaceAppCatchAllRoute() {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  {t("dispatch.pages.openBuilderBranch")}
+                  {t("dispatch.pages.openBuilderBranch", {
+                    defaultValue: "Open in Builder",
+                  })}
                   <IconArrowUpRight size={15} className="ml-1.5" />
                 </a>
               </Button>

package/src/routes/pages/agents.tsx

@@ -15,6 +15,7 @@ import {
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import { Skeleton } from "../../components/ui/skeleton";
 import { Switch } from "../../components/ui/switch";
 
 export function meta() {
@@ -123,9 +124,11 @@ function DispatchMcpAccessPanel() {
                 : t("dispatch.pages.selectedApps")}
             </div>
             <div className="text-xs text-muted-foreground">
-              {isLoading
-                ? t("dispatch.pages.loading")
-                : t("dispatch.pages.grantedCount", { count: grantedCount })}
+              {isLoading ? (
+                <Skeleton className="h-3 w-16" />
+              ) : (
+                t("dispatch.pages.grantedCount", { count: grantedCount })
+              )}
             </div>
           </div>
           <Switch

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

@@ -13,7 +13,10 @@ 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";
@@ -61,12 +64,12 @@ export default function WorkspaceAppRoute() {
   });
   const embedInput = useMemo<EmbedSessionInput | null>(() => {
     if (!app || !href) return null;
-    const path = app.path.trim();
-    if (path.startsWith("/")) {
-      return { app: app.id, path, chrome: "minimal" };
-    }
-    return { app: app.id, url: href, chrome: "minimal" };
-  }, [app?.id, app?.path, href]);
+    return {
+      app: app.id,
+      ...workspaceAppEmbedTarget(app),
+      chrome: "minimal",
+    };
+  }, [app?.id, app?.path, app?.url, href]);
 
   useEffect(() => {
     if (!app || app.status === "pending" || !embedInput) return;
@@ -80,6 +83,8 @@ export default function WorkspaceAppRoute() {
       })
       .catch((cause: unknown) => {
         if (!cancelled) {
+          const directAppUrl = workspaceAppDirectHref(app, "/");
+          if (directAppUrl) setEmbedUrl(directAppUrl);
           setEmbedError(
             cause instanceof Error ? cause : new Error(String(cause)),
           );
@@ -99,12 +104,8 @@ export default function WorkspaceAppRoute() {
 
   useEffect(() => {
     const handleEmbedSessionExpired = (event: MessageEvent) => {
-      if (
-        event.data?.type !== "agentNative.embedSessionExpired" ||
-        event.source !== embedFrameRef.current?.contentWindow
-      ) {
+      if (!isEmbedSessionExpiredMessage(event, embedFrameRef.current, null))
         return;
-      }
       setEmbedAttempt((attempt) => attempt + 1);
     };
 
@@ -189,11 +190,6 @@ export default function WorkspaceAppRoute() {
               <span className="font-mono text-foreground">{app.path}</span>{" "}
               {t("dispatch.pages.appBuildingSuffix")}
             </p>
-            {app.branchName ? (
-              <p className="text-xs text-muted-foreground">
-                {t("dispatch.pages.branch", { branch: app.branchName })}
-              </p>
-            ) : null}
             {app.builderUrl ? (
               <Button asChild>
                 <a
@@ -204,7 +200,9 @@ export default function WorkspaceAppRoute() {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  {t("dispatch.pages.openBuilderBranch")}
+                  {t("dispatch.pages.openBuilderBranch", {
+                    defaultValue: "Open in Builder",
+                  })}
                 </a>
               </Button>
             ) : null}
@@ -222,6 +220,7 @@ export default function WorkspaceAppRoute() {
       <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}