@agent-native/dispatch 0.24.0 → 0.24.2

package/src/components/dispatch-control-plane.tsx

@@ -12,6 +12,11 @@ import { Link, useNavigate } from "react-router";
 
 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,
@@ -33,6 +38,10 @@ import {
 } from "./ui/collapsible";
 import { Skeleton } from "./ui/skeleton";
 import { WorkspaceAppCard } from "./workspace-app-card";
+import {
+  WorkspaceAppSearch,
+  WorkspaceAppSearchEmpty,
+} from "./workspace-app-search";
 import type { CuratedWorkspaceTemplatesResult } from "./workspace-template-card";
 
 function SectionHeader({
@@ -65,9 +74,6 @@ function CommandPanel() {
   } = useChatModels({ storageKey: "dispatch" });
   const navigate = useNavigate();
   const promptSuggestions = [
-    t("dispatch.pages.suggestionWorkspaceHealth", {
-      defaultValue: "Summarize the current workspace health",
-    }),
     t("dispatch.pages.suggestionOnboardingApp", {
       defaultValue: "Create an app for onboarding requests",
     }),
@@ -165,11 +171,23 @@ function AppsPanel({
 }) {
   const t = useT();
   const [showPending, setShowPending] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { layout, persistenceError, togglePinned } = useWorkspaceAppLayout();
   const visibleApps = apps.filter(
     (app) => isWorkspaceAppVisibleInDefaultLaunchers(app) && !app.archived,
   );
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
+  const orderedActiveApps = orderWorkspaceApps(activeApps, layout);
+  const orderedPendingApps = orderWorkspaceApps(pendingApps, layout);
+  const filteredActiveApps = orderedActiveApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const filteredPendingApps = orderedPendingApps.filter((app) =>
+    workspaceAppMatchesQuery(app, searchQuery),
+  );
+  const hasSearchResults =
+    filteredActiveApps.length > 0 || filteredPendingApps.length > 0;
   const otherAppEntries = mergeOtherAppEntries({
     templates: curatedTemplates,
     connectedApps,
@@ -183,14 +201,23 @@ function AppsPanel({
       <SectionHeader
         title="Apps"
         action={
-          <div className="flex items-center gap-1.5">
-            <Button variant="outline" size="sm" asChild>
-              <Link to="/apps">View all</Link>
+          <div className="flex min-w-0 flex-wrap items-center justify-end gap-1.5">
+            <Button variant="ghost" size="sm" asChild>
+              <Link to="/apps" className="text-muted-foreground">
+                View all
+              </Link>
             </Button>
+            {!showSkeletons && visibleApps.length > 0 ? (
+              <WorkspaceAppSearch
+                className="w-[220px]"
+                query={searchQuery}
+                onQueryChange={setSearchQuery}
+              />
+            ) : null}
             <CreateAppPopover
               align="end"
               trigger={
-                <Button variant="ghost" size="sm" className="gap-1.5">
+                <Button variant="default" size="sm" className="gap-1.5">
                   <IconPlus size={14} />
                   {t("dispatch.pages.newApp", { defaultValue: "New" })}
                 </Button>
@@ -199,19 +226,38 @@ function AppsPanel({
           </div>
         }
       />
+      {!showSkeletons && visibleApps.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}
       {showSkeletons ? (
         <OverviewAppsSkeleton />
+      ) : searchQuery.trim() && !hasSearchResults ? (
+        <WorkspaceAppSearchEmpty
+          query={searchQuery}
+          onClear={() => setSearchQuery("")}
+        />
       ) : (
         <>
           <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)}
               />
             ))}
-            {activeApps.length === 0 &&
+            {filteredActiveApps.length === 0 &&
+            !searchQuery.trim() &&
             otherAppEntries.length === 0 &&
             !curatedTemplatesLoading &&
             !connectedAppsLoading &&
@@ -223,24 +269,30 @@ function AppsPanel({
                 })}
               </p>
             ) : null}
-            <OtherAppsSection
-              templates={curatedTemplates}
-              connectedApps={connectedApps}
-              workspaceApps={apps}
-              templatesLoading={curatedTemplatesLoading}
-              connectedAppsLoading={connectedAppsLoading}
-              templatesError={curatedTemplatesError}
-              connectedAppsError={connectedAppsError}
-              onRetryTemplates={onRetryCuratedTemplates}
-              onRetryConnectedApps={onRetryConnectedApps}
-              heading={null}
-              embeddedInList
-            />
+            {!searchQuery.trim() ? (
+              <OtherAppsSection
+                templates={curatedTemplates}
+                connectedApps={connectedApps}
+                workspaceApps={apps}
+                templatesLoading={curatedTemplatesLoading}
+                connectedAppsLoading={connectedAppsLoading}
+                templatesError={curatedTemplatesError}
+                connectedAppsError={connectedAppsError}
+                onRetryTemplates={onRetryCuratedTemplates}
+                onRetryConnectedApps={onRetryConnectedApps}
+                heading={null}
+                embeddedInList
+              />
+            ) : null}
           </AppList>
         </>
       )}
-      {pendingApps.length > 0 ? (
-        <Collapsible open={showPending} onOpenChange={setShowPending}>
+      {pendingApps.length > 0 &&
+      (!searchQuery.trim() || filteredPendingApps.length > 0) ? (
+        <Collapsible
+          open={showPending || Boolean(searchQuery.trim())}
+          onOpenChange={setShowPending}
+        >
           <div className="space-y-3 border-t pt-3">
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div className="flex min-w-0 items-center gap-2">
@@ -266,19 +318,23 @@ function AppsPanel({
                   size="sm"
                   className="h-7 gap-1.5 px-2 text-xs"
                 >
-                  {showPending
+                  {showPending || Boolean(searchQuery.trim())
                     ? t("dispatch.pages.hidePendingApps")
                     : t("dispatch.pages.showPendingApps")}
                   <IconChevronDown
                     size={13}
-                    className={showPending ? "rotate-180" : undefined}
+                    className={
+                      showPending || searchQuery.trim()
+                        ? "rotate-180"
+                        : undefined
+                    }
                   />
                 </Button>
               </CollapsibleTrigger>
             </div>
             <CollapsibleContent>
               <AppList className={APP_LIST_GRID_CLASS}>
-                {pendingApps.map((app) => (
+                {filteredPendingApps.map((app) => (
                   <WorkspaceAppCard
                     key={app.id}
                     app={app}

package/src/components/dispatch-shell.tsx

@@ -1,7 +1,9 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { type ReactNode } from "react";
+import { useLocation } from "react-router";
 
+import { dispatchDocsHrefForPath, DocsLink } from "./docs-link";
 import { useSetPageTitle } from "./layout/HeaderActions";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
@@ -21,12 +23,16 @@ export function DispatchShell({
   children: ReactNode;
 }) {
   const t = useT();
+  const location = useLocation();
+  const docsHref = dispatchDocsHrefForPath(location.pathname);
   useSetPageTitle(
     <div className="flex items-center gap-2 min-w-0">
       <h1 className="text-lg font-semibold tracking-tight truncate text-foreground">
         {title}
       </h1>
-      {description ? (
+      {docsHref ? (
+        <DocsLink href={docsHref} label={`Open ${title} documentation`} />
+      ) : description ? (
         <Popover>
           <PopoverTrigger asChild>
             <button

package/src/components/docs-link.tsx

@@ -0,0 +1,52 @@
+import { IconHelpCircle } from "@tabler/icons-react";
+
+import { cn } from "../lib/utils";
+
+export const DISPATCH_DOCS = {
+  dispatch: "https://agent-native.com/docs/dispatch#what-it-does",
+  workspace: "https://agent-native.com/docs/agent-resources#global-resources",
+  integrations: "https://agent-native.com/docs/dispatch#secret-vault",
+  audit: "https://agent-native.com/docs/audit-log",
+  threadDebug: "https://agent-native.com/docs/dispatch#reliability",
+  dreams: "https://agent-native.com/docs/dispatch#dreams",
+  settings: "https://agent-native.com/docs/agent-surfaces",
+} as const;
+
+export function dispatchDocsHrefForPath(pathname: string): string | undefined {
+  if (pathname === "/admin/workspace") return DISPATCH_DOCS.workspace;
+  if (pathname === "/admin/integrations") return DISPATCH_DOCS.integrations;
+  if (pathname === "/admin/audit") return DISPATCH_DOCS.audit;
+  if (pathname === "/admin/thread-debug") return DISPATCH_DOCS.threadDebug;
+  if (pathname === "/admin/dreams") return DISPATCH_DOCS.dreams;
+  if (pathname.startsWith("/admin/")) return DISPATCH_DOCS.dispatch;
+  if (pathname === "/settings" || pathname.startsWith("/settings/")) {
+    return DISPATCH_DOCS.settings;
+  }
+  return undefined;
+}
+
+export function DocsLink({
+  href,
+  label,
+  className,
+}: {
+  href: string;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      title={label}
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent/60 hover:text-foreground",
+        className,
+      )}
+    >
+      <IconHelpCircle className="size-3" />
+    </a>
+  );
+}

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

@@ -11,6 +11,7 @@ import {
   formatThreadAge,
   isElectronEmbeddedSearch,
   NavContent,
+  shouldAutoCollapseDispatchSidebar,
 } from "./Layout";
 
 const clientState = vi.hoisted(() => ({
@@ -128,6 +129,15 @@ describe("Electron control-plane mode", () => {
   });
 });
 
+describe("Dispatch workspace app sidebar", () => {
+  it("auto-collapses for app host routes but not the app catalog", () => {
+    expect(shouldAutoCollapseDispatchSidebar("/apps/mail")).toBe(true);
+    expect(shouldAutoCollapseDispatchSidebar("/apps/mail/settings")).toBe(true);
+    expect(shouldAutoCollapseDispatchSidebar("/apps")).toBe(false);
+    expect(shouldAutoCollapseDispatchSidebar("/chat")).toBe(false);
+  });
+});
+
 describe("Dispatch NavContent", () => {
   let container: HTMLDivElement;
   let root: Root;

package/src/components/layout/Layout.tsx

@@ -108,6 +108,7 @@ import {
   isDispatchWorkspaceAppId,
   isWorkspaceAppVisibleInDefaultLaunchers,
   mergeChatFirstWorkspaceApps,
+  workspaceAppDirectHref,
   workspaceAppIdFromRoute,
   workspaceAppRoute,
   type WorkspaceAppSummary,
@@ -306,6 +307,10 @@ export function isElectronEmbeddedSearch(search: string): boolean {
   return new URLSearchParams(search).get("electron") === "1";
 }
 
+export function shouldAutoCollapseDispatchSidebar(pathname: string): boolean {
+  return localDispatchPath(pathname).startsWith("/apps/");
+}
+
 function chatFirstPrimaryTabForPath(
   pathname: string,
 ): ChatFirstPrimaryTab | undefined {
@@ -534,16 +539,6 @@ function threadTitle(thread: ChatThreadSummary, fallback: string) {
   return thread.title || thread.preview || fallback;
 }
 
-function readChatHistoryIncludesExternal(): boolean {
-  if (typeof window === "undefined") return false;
-  try {
-    return localStorage.getItem(CHAT_HISTORY_SOURCE_KEY) === "all";
-  } catch {
-    // coercion-ok: localStorage is optional browser persistence.
-    return false;
-  }
-}
-
 function threadSourceIcon(platform: string | undefined): ReactNode {
   const normalized = platform?.trim().toLowerCase();
   if (!normalized) return null;
@@ -556,6 +551,16 @@ function threadSourceIcon(platform: string | undefined): ReactNode {
   return <IconWorld size={13} aria-hidden="true" />;
 }
 
+function readChatHistoryIncludesExternal(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return localStorage.getItem(CHAT_HISTORY_SOURCE_KEY) === "all";
+  } catch {
+    // coercion-ok: localStorage is optional browser persistence.
+    return false;
+  }
+}
+
 function threadUpdatedAt(thread: ChatThreadSummary) {
   return Number.isFinite(thread.updatedAt)
     ? thread.updatedAt
@@ -595,6 +600,7 @@ function DispatchChatsSection({
     threads,
     activeThreadId,
     isLoading: chatsLoading,
+    threadsLoadError,
     createThread,
     switchThread,
     renameThread,
@@ -611,7 +617,7 @@ function DispatchChatsSection({
           (thread) => thread.messageCount > 0 || thread.id === activeThreadId,
         )
         .sort((a, b) => threadUpdatedAt(b) - threadUpdatedAt(a))
-        .slice(0, 15),
+        .slice(0, 8),
     [activeThreadId, threads],
   );
   const localPathname = localDispatchPath(location.pathname);
@@ -650,6 +656,16 @@ function DispatchChatsSection({
           : formatThreadAge(threadUpdatedAt(thread)),
     };
   });
+  const chatHistoryError = threadsLoadError ? (
+    <button
+      type="button"
+      onClick={() => void refreshThreads()}
+      className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-xs text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+    >
+      <span>Could not load chats</span>
+      <span className="font-medium">Retry</span>
+    </button>
+  ) : undefined;
 
   useEffect(() => {
     setIncludeExternal(readChatHistoryIncludesExternal());
@@ -802,6 +818,7 @@ function DispatchChatsSection({
             </div>
           }
           label={t("dispatch.sidebar.chats", { defaultValue: "Chats" })}
+          error={chatHistoryError}
           onSelect={(threadId) => openThread(threadId)}
           renameMaxLength={160}
           onRename={(threadId, title) => void renameThread(threadId, title)}
@@ -870,6 +887,7 @@ function DispatchChatsSection({
             showMore: t("dispatch.sidebar.chats"),
             showLess: t("dispatch.sidebar.chats"),
           }}
+          error={chatHistoryError}
           renameMaxLength={160}
           onRename={(threadId, title) => void renameThread(threadId, title)}
           labels={{
@@ -924,7 +942,7 @@ function DispatchChatsSection({
               ) : null}
             </>
           )}
-          className={cn("min-w-0", chatFirstMode && "px-2")}
+          className="min-w-0 px-2"
         />
       )}
     </div>
@@ -1348,7 +1366,9 @@ export function Layout({
   const isChatRoute =
     localPathname === "/chat" || localPathname.startsWith("/chat/");
   const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
-  const isWorkspaceAppRoute = localPathname.startsWith("/apps/");
+  const isWorkspaceAppRoute = shouldAutoCollapseDispatchSidebar(
+    location.pathname,
+  );
   const isWorkspaceAppHostRoute =
     isWorkspaceAppRoute &&
     typeof window !== "undefined" &&
@@ -1373,12 +1393,6 @@ export function Layout({
       `${url.pathname}${url.search}${url.hash}`,
     );
   }, [electronEmbedded, location.pathname, location.search]);
-  useEffect(() => {
-    if (!chatFirstMode || chatFirstEmbedded || localPathname !== "/overview") {
-      return;
-    }
-    navigate(dispatchNavLinkTarget("/chat"), { replace: true });
-  }, [chatFirstEmbedded, chatFirstMode, localPathname, navigate]);
   const [chatFirstAppLayout, setChatFirstAppLayout] =
     useState<ChatFirstAppLayoutPreference>(() => readChatFirstAppLayout());
   const chatFirstAppLayoutHydratedRef = useRef(false);
@@ -1565,6 +1579,13 @@ export function Layout({
       })
       .catch((cause: unknown) => {
         if (!cancelled) {
+          const directAppUrl = activeChatFirstAppRegistration
+            ? workspaceAppDirectHref(
+                activeChatFirstAppRegistration,
+                chatFirstEmbedPath,
+              )
+            : null;
+          if (directAppUrl) setChatFirstEmbedUrl(directAppUrl);
           setChatFirstEmbedError(
             cause instanceof Error
               ? cause.message
@@ -1629,6 +1650,7 @@ export function Layout({
       placement: ChatFirstAppSurfacePlacement = "side",
     ) => {
       if (placement === "side" && !chatFirstHasActiveChat) return;
+      setSidebarCollapsed(true);
       setChatFirstNotice(null);
       closeChatFirstSessionWatch();
       if (!isChatRoute) {
@@ -2027,6 +2049,11 @@ export function Layout({
     isChatRoute,
   ]);
 
+  useEffect(() => {
+    if (!isWorkspaceAppRoute) return;
+    setSidebarCollapsed(true);
+  }, [isWorkspaceAppRoute, localPathname]);
+
   useEffect(() => {
     if (typeof window === "undefined" || isWorkspaceAppHostRoute) return;
     try {
@@ -2140,10 +2167,10 @@ export function Layout({
           <ChatFirstAppPane
             app={app}
             status={
-              chatFirstEmbedError
-                ? "error"
-                : chatFirstEmbedUrl
-                  ? "ready"
+              chatFirstEmbedUrl
+                ? "ready"
+                : chatFirstEmbedError
+                  ? "error"
                   : chatFirstAppsQuery.isLoading
                     ? "loading"
                     : app

package/src/components/messaging-setup-panel.tsx

@@ -57,6 +57,7 @@ import {
   CollapsibleTrigger,
 } from "./ui/collapsible";
 import { Input } from "./ui/input";
+import { Skeleton } from "./ui/skeleton";
 import { Switch } from "./ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
@@ -553,7 +554,11 @@ export function MessagingSetupPanel() {
                             : "Finish setup to connect"}
                       </p>
                       <p className="mt-0.5 text-xs text-muted-foreground">
-                        {credentialSummary}
+                        {envLoading ? (
+                          <Skeleton className="h-3 w-32" />
+                        ) : (
+                          credentialSummary
+                        )}
                       </p>
                     </div>
                     <div className="flex flex-wrap items-center gap-2">
@@ -1115,8 +1120,10 @@ export function MessagingSetupPanel() {
       </Accordion>
 
       {loading ? (
-        <div className="rounded-2xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
-          Loading messaging status...
+        <div className="space-y-3 rounded-2xl border border-dashed px-4 py-6">
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-3 w-2/3 max-w-md" />
+          <Skeleton className="h-9 w-full max-w-sm" />
         </div>
       ) : null}
     </div>