@agent-native/dispatch 0.24.0 → 0.24.2

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

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 
-import { workspaceAppEmbedTarget } from "./workspace-apps";
+import {
+  workspaceAppDirectHref,
+  workspaceAppEmbedTarget,
+} from "./workspace-apps";
 
 describe("workspaceAppEmbedTarget", () => {
   it("uses the app URL as the embed root when a mount path is also present", () => {
@@ -18,3 +21,44 @@ describe("workspaceAppEmbedTarget", () => {
     });
   });
 });
+
+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";
 }
@@ -80,6 +85,73 @@ export function workspaceAppEmbedTarget(
   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

@@ -15,6 +15,7 @@ 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,
@@ -82,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)),
           );
@@ -187,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
@@ -202,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}

package/src/routes/pages/apps.tsx

@@ -27,12 +27,21 @@ import {
 } from "../../components/ui/collapsible";
 import { Skeleton } from "../../components/ui/skeleton";
 import { WorkspaceAppCard } from "../../components/workspace-app-card";
+import {
+  WorkspaceAppSearch,
+  WorkspaceAppSearchEmpty,
+} from "../../components/workspace-app-search";
 import type {
   CuratedWorkspaceTemplatesResult,
   WorkspaceTemplateLabels,
 } from "../../components/workspace-template-card";
 import type { ConnectedAppSummary } from "../../lib/other-apps";
 import { cn } from "../../lib/utils";
+import {
+  orderWorkspaceApps,
+  useWorkspaceAppLayout,
+  workspaceAppMatchesQuery,
+} from "../../lib/workspace-app-layout";
 import {
   isWorkspaceAppVisibleInDefaultLaunchers,
   type WorkspaceAppSummary,
@@ -57,6 +66,8 @@ function AppsRoute() {
   const t = useT();
   const [showPending, setShowPending] = useState(false);
   const [showHidden, setShowHidden] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { layout, persistenceError, togglePinned } = useWorkspaceAppLayout();
   const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
     includeArchived: true,
@@ -81,6 +92,22 @@ function AppsRoute() {
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
   const archivedApps = allApps.filter((app) => app.archived);
+  const orderedActiveApps = orderWorkspaceApps(activeApps, layout);
+  const orderedPendingApps = orderWorkspaceApps(pendingApps, layout);
+  const orderedArchivedApps = orderWorkspaceApps(archivedApps, layout);
+  const filteredActiveApps = orderedActiveApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const filteredPendingApps = orderedPendingApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const filteredArchivedApps = orderedArchivedApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const hasSearchResults =
+    filteredActiveApps.length > 0 ||
+    filteredPendingApps.length > 0 ||
+    filteredArchivedApps.length > 0;
   const showAppSkeletons = appsLoading && allApps.length === 0;
   const templateLabels: WorkspaceTemplateLabels = {
     appId: t("dispatch.pages.remixAppIdLabel"),
@@ -111,7 +138,7 @@ function AppsRoute() {
     >
       <div className="space-y-8">
         <section className="space-y-3">
-          <div className="flex flex-wrap items-end justify-between gap-3">
+          <div className="flex flex-wrap items-center justify-between gap-3">
             <div className="flex min-w-0 items-start gap-2">
               <IconApps
                 size={16}
@@ -121,36 +148,44 @@ function AppsRoute() {
                 <h2 className="truncate text-sm font-semibold text-foreground">
                   {t("dispatch.pages.yourApps", { defaultValue: "Your apps" })}
                 </h2>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  {t("dispatch.pages.activeCount", {
-                    count: activeApps.length,
-                  })}
-                  {pendingApps.length > 0
-                    ? ` · ${t("dispatch.pages.pendingCount", {
-                        count: pendingApps.length,
-                      })}`
-                    : ""}
-                  {archivedApps.length > 0
-                    ? ` · ${t("dispatch.pages.hiddenCount", {
-                        count: archivedApps.length,
-                      })}`
-                    : ""}
-                </p>
               </div>
             </div>
-            {activeApps.length > 0 || pendingApps.length > 0 ? (
-              <CreateAppPopover
-                align="end"
-                trigger={
-                  <Button size="sm" variant="outline">
-                    <IconPlus size={15} className="mr-1.5" />
-                    {t("dispatch.pages.addApp", { defaultValue: "Add app" })}
-                  </Button>
-                }
-              />
-            ) : null}
+            <div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+              {!showAppSkeletons && allApps.length > 0 ? (
+                <WorkspaceAppSearch
+                  className="w-full sm:w-[250px]"
+                  query={searchQuery}
+                  onQueryChange={setSearchQuery}
+                />
+              ) : null}
+              {activeApps.length > 0 || pendingApps.length > 0 ? (
+                <CreateAppPopover
+                  align="end"
+                  trigger={
+                    <Button size="sm" variant="outline">
+                      <IconPlus size={15} className="mr-1.5" />
+                      {t("dispatch.pages.addApp", {
+                        defaultValue: "Add app",
+                      })}
+                    </Button>
+                  }
+                />
+              ) : null}
+            </div>
           </div>
 
+          {!showAppSkeletons && allApps.length > 0 && persistenceError ? (
+            <p className="text-xs text-muted-foreground" role="status">
+              {persistenceError === "both"
+                ? t("dispatch.pages.appPinSaveFailed", {
+                    defaultValue: "App pins could not be saved.",
+                  })
+                : t("dispatch.pages.appPinSavedLocally", {
+                    defaultValue: "App pins are saved on this device only.",
+                  })}
+            </p>
+          ) : null}
+
           {appsQuery.isError ? (
             <ActionQueryError
               error={appsQuery.error}
@@ -158,25 +193,36 @@ function AppsRoute() {
             />
           ) : showAppSkeletons ? (
             <AppsSkeletonGrid />
-          ) : activeApps.length > 0 ? (
+          ) : !hasSearchResults && searchQuery.trim() ? (
+            <WorkspaceAppSearchEmpty
+              query={searchQuery}
+              onClear={() => setSearchQuery("")}
+            />
+          ) : filteredActiveApps.length > 0 ? (
             <AppList className={APP_LIST_GRID_CLASS}>
-              {activeApps.map((app) => (
+              {filteredActiveApps.map((app) => (
                 <WorkspaceAppCard
                   key={app.id}
                   app={app}
                   className={APP_LIST_GRID_ROW_CLASS}
+                  isPinned={layout.pinnedIds.includes(app.id)}
+                  onTogglePinned={() => togglePinned(app.id)}
                 />
               ))}
             </AppList>
-          ) : pendingApps.length > 0 ? (
+          ) : searchQuery.trim() ? null : pendingApps.length > 0 ? (
             <EmptyActiveAppsState />
           ) : (
             <EmptyAppsState />
           )}
         </section>
 
-        {pendingApps.length > 0 ? (
-          <Collapsible open={showPending} onOpenChange={setShowPending}>
+        {pendingApps.length > 0 &&
+        (!searchQuery.trim() || filteredPendingApps.length > 0) ? (
+          <Collapsible
+            open={showPending || Boolean(searchQuery.trim())}
+            onOpenChange={setShowPending}
+          >
             <section className="space-y-3 border-t pt-6">
               <div className="flex flex-wrap items-center justify-between gap-3">
                 <div className="flex min-w-0 items-center gap-2">
@@ -202,14 +248,15 @@ function AppsRoute() {
                     size="sm"
                     className="gap-1.5"
                   >
-                    {showPending
+                    {showPending || Boolean(searchQuery.trim())
                       ? t("dispatch.pages.hidePendingApps")
                       : t("dispatch.pages.showPendingApps")}
                     <IconChevronDown
                       size={14}
                       className={cn(
                         "transition-transform",
-                        showPending && "rotate-180",
+                        (showPending || Boolean(searchQuery.trim())) &&
+                          "rotate-180",
                       )}
                     />
                   </Button>
@@ -217,7 +264,7 @@ function AppsRoute() {
               </div>
               <CollapsibleContent>
                 <AppList className={APP_LIST_GRID_CLASS}>
-                  {pendingApps.map((app) => (
+                  {filteredPendingApps.map((app) => (
                     <WorkspaceAppCard
                       key={app.id}
                       app={app}
@@ -230,31 +277,37 @@ function AppsRoute() {
           </Collapsible>
         ) : null}
 
-        <OtherAppsSection
-          templates={
-            curatedTemplatesQuery.data as
-              | CuratedWorkspaceTemplatesResult
-              | undefined
-          }
-          connectedApps={
-            connectedAppsQuery.data as ConnectedAppSummary[] | undefined
-          }
-          workspaceApps={allApps}
-          templatesLoading={curatedTemplatesQuery.isLoading}
-          connectedAppsLoading={connectedAppsQuery.isLoading}
-          templatesError={curatedTemplatesQuery.error}
-          connectedAppsError={connectedAppsQuery.error}
-          onRetryTemplates={() => void curatedTemplatesQuery.refetch()}
-          onRetryConnectedApps={() => void connectedAppsQuery.refetch()}
-          templateLabels={templateLabels}
-          onRemixSuccess={() => {
-            void appsQuery.refetch();
-            void curatedTemplatesQuery.refetch();
-          }}
-        />
+        {!searchQuery.trim() ? (
+          <OtherAppsSection
+            templates={
+              curatedTemplatesQuery.data as
+                | CuratedWorkspaceTemplatesResult
+                | undefined
+            }
+            connectedApps={
+              connectedAppsQuery.data as ConnectedAppSummary[] | undefined
+            }
+            workspaceApps={allApps}
+            templatesLoading={curatedTemplatesQuery.isLoading}
+            connectedAppsLoading={connectedAppsQuery.isLoading}
+            templatesError={curatedTemplatesQuery.error}
+            connectedAppsError={connectedAppsQuery.error}
+            onRetryTemplates={() => void curatedTemplatesQuery.refetch()}
+            onRetryConnectedApps={() => void connectedAppsQuery.refetch()}
+            templateLabels={templateLabels}
+            onRemixSuccess={() => {
+              void appsQuery.refetch();
+              void curatedTemplatesQuery.refetch();
+            }}
+          />
+        ) : null}
 
-        {archivedApps.length > 0 ? (
-          <Collapsible open={showHidden} onOpenChange={setShowHidden}>
+        {archivedApps.length > 0 &&
+        (!searchQuery.trim() || filteredArchivedApps.length > 0) ? (
+          <Collapsible
+            open={showHidden || Boolean(searchQuery.trim())}
+            onOpenChange={setShowHidden}
+          >
             <section className="space-y-3">
               <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
                 <div className="flex min-w-0 items-center gap-2">
@@ -280,14 +333,15 @@ function AppsRoute() {
                     size="sm"
                     className="gap-1.5"
                   >
-                    {showHidden
+                    {showHidden || Boolean(searchQuery.trim())
                       ? t("dispatch.pages.hide")
                       : t("dispatch.pages.show")}
                     <IconChevronDown
                       size={14}
                       className={cn(
                         "transition-transform",
-                        showHidden && "rotate-180",
+                        (showHidden || Boolean(searchQuery.trim())) &&
+                          "rotate-180",
                       )}
                     />
                   </Button>
@@ -295,7 +349,7 @@ function AppsRoute() {
               </div>
               <CollapsibleContent>
                 <AppList className={APP_LIST_GRID_CLASS}>
-                  {archivedApps.map((app) => (
+                  {filteredArchivedApps.map((app) => (
                     <WorkspaceAppCard
                       key={app.id}
                       app={app}