@agent-native/dispatch 0.23.5 → 0.24.2

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}

package/src/routes/pages/audit.tsx

@@ -2,6 +2,7 @@ import { useActionQuery } from "@agent-native/core/client/hooks";
 
 import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
+import { Skeleton } from "../../components/ui/skeleton";
 
 export function meta() {
   return [{ title: "Audit — Dispatch" }];
@@ -16,30 +17,49 @@ export default function AuditRoute() {
       title="Audit"
       description="Change history for routes, settings, and approvals."
     >
-      <section className="rounded-2xl bg-card p-5">
+      <section className="overflow-hidden rounded-lg bg-card">
         {query.isError ? (
           <ActionQueryError
             error={query.error}
             onRetry={() => void query.refetch()}
           />
+        ) : query.isLoading ? (
+          <div>
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="grid gap-2 border-b px-4 py-3 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
+              >
+                <div>
+                  <Skeleton className="h-4 w-2/3 max-w-sm" />
+                  <Skeleton className="mt-2 h-3 w-1/2 max-w-xs" />
+                </div>
+                <Skeleton className="h-3 w-28" />
+              </div>
+            ))}
+          </div>
         ) : (
-          <div className="space-y-3">
+          <div>
             {(data || []).map((event: any) => (
               <div
                 key={event.id}
-                className="rounded-xl border bg-muted/30 px-4 py-3"
+                className="grid gap-1 border-b px-4 py-3 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
               >
-                <div className="text-sm font-medium text-foreground">
-                  {event.summary}
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-medium text-foreground">
+                    {event.summary}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {event.actor} · {event.action}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {event.actor} · {event.action} ·{" "}
+                <div className="text-xs text-muted-foreground sm:text-right">
                   {new Date(event.createdAt).toLocaleString()}
                 </div>
               </div>
             ))}
             {(data?.length || 0) === 0 && (
-              <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+              <div className="px-4 py-10 text-center text-sm text-muted-foreground">
                 No audit entries yet.
               </div>
             )}

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

@@ -16,6 +16,7 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
     return <>{props.composerSlot as ReactNode}</>;
   },
   markAgentChatHomeHandoff: vi.fn(),
+  readChatFirstMode: () => true,
   navigateWithAgentChatViewTransition: (
     navigate: (path: string) => void,
     path: string,
@@ -23,6 +24,10 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
   sendToAgentChat: vi.fn(),
 }));
 
+vi.mock("../../components/layout/Layout", () => ({
+  useDispatchExtensions: () => undefined,
+}));
+
 vi.mock("@agent-native/core/client/api-path", () => ({
   agentNativePath: (path: string) => path,
   appApiPath: (path: string) => path,
@@ -74,6 +79,7 @@ describe("Dispatch ChatRoute", () => {
       centerComposerWhenEmpty: true,
       composerLayoutVariant: "hero",
       composerPlaceholder: "Ask Dispatch...",
+      suppressInlineOpenApp: true,
     });
     expect(container.textContent).toContain("Chat across your apps");
   });
@@ -106,6 +112,10 @@ describe("Dispatch ChatRoute", () => {
     expect(clientState.surfaceProps).not.toHaveProperty(
       "composerLayoutVariant",
     );
+    expect(clientState.surfaceProps).toHaveProperty(
+      "suppressInlineOpenApp",
+      true,
+    );
     expect(container.textContent).not.toContain("Chat across your apps");
   });
 });

package/src/routes/pages/chat.tsx

@@ -1,6 +1,7 @@
 import {
   AgentChatSurface,
   markAgentChatHomeHandoff,
+  readChatFirstMode,
 } from "@agent-native/core/client/agent-chat";
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
@@ -13,6 +14,7 @@ import {
 } from "react";
 import { useLocation, useNavigate } from "react-router";
 
+import { useDispatchExtensions } from "../../components/layout/Layout";
 import { submitOverviewPrompt } from "../../lib/overview-chat";
 
 function chatThreadPath(threadId: string | null): string {
@@ -93,6 +95,11 @@ export default function ChatRoute() {
   const navigate = useNavigate();
   const routeThreadId = threadIdFromPath(location.pathname);
   const handledStateIds = useRef(new Set<string>());
+  const extensions = useDispatchExtensions();
+  const suppressInlineOpenApp =
+    extensions?.chatFirst === true ||
+    readChatFirstMode() ||
+    new URLSearchParams(location.search).get("chatFirst") === "1";
 
   const navigateThreadUrl = useCallback(
     (path: string, options?: { replace?: boolean }) =>
@@ -181,6 +188,7 @@ export default function ChatRoute() {
         showHeader={false}
         showTabBar={false}
         dynamicSuggestions={false}
+        suppressInlineOpenApp={suppressInlineOpenApp}
         suggestions={[]}
         emptyStateText={t("dispatch.pages.chatAcrossAppsDescription", {
           defaultValue: