@agent-native/dispatch 0.23.5 → 0.24.2

package/src/components/layout/Layout.tsx

@@ -102,11 +102,13 @@ import {
 import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { isEmbedSessionExpiredMessage } from "../../lib/embed-session-recovery";
 import { cn } from "../../lib/utils";
 import {
   isDispatchWorkspaceAppId,
   isWorkspaceAppVisibleInDefaultLaunchers,
   mergeChatFirstWorkspaceApps,
+  workspaceAppDirectHref,
   workspaceAppIdFromRoute,
   workspaceAppRoute,
   type WorkspaceAppSummary,
@@ -305,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 {
@@ -533,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;
@@ -555,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
@@ -594,6 +600,7 @@ function DispatchChatsSection({
     threads,
     activeThreadId,
     isLoading: chatsLoading,
+    threadsLoadError,
     createThread,
     switchThread,
     renameThread,
@@ -610,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);
@@ -649,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());
@@ -801,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)}
@@ -869,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={{
@@ -923,7 +942,7 @@ function DispatchChatsSection({
               ) : null}
             </>
           )}
-          className={cn("min-w-0", chatFirstMode && "px-2")}
+          className="min-w-0 px-2"
         />
       )}
     </div>
@@ -1193,7 +1212,7 @@ export function NavContent({
     <div
       className={cn("py-2", collapsed ? "flex justify-center px-1" : "px-3")}
     >
-      <OrgSwitcher compact={collapsed} reserveSpace />
+      <OrgSwitcher compact={collapsed} reserveSpace currentAppId="dispatch" />
     </div>
   );
   const sidebarFooterActions = (
@@ -1213,9 +1232,12 @@ export function NavContent({
           collapsed ? "justify-center px-0" : "px-4",
         )}
       >
-        <div
+        <Link
+          to={dispatchNavLinkTarget("/overview")}
+          aria-label={`${DISPATCH_SIDEBAR_LABEL} overview`}
+          data-dispatch-logo
           className={cn(
-            "flex items-center",
+            "flex items-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
             collapsed ? "justify-center" : "gap-2",
           )}
         >
@@ -1251,7 +1273,7 @@ export function NavContent({
               </div>
             </div>
           )}
-        </div>
+        </Link>
       </div>
 
       {chatFirstMode ? (
@@ -1344,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" &&
@@ -1369,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);
@@ -1561,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
@@ -1586,11 +1611,9 @@ export function Layout({
 
     const handleEmbedSessionExpired = (event: MessageEvent) => {
       if (
-        event.data?.type !== "agentNative.embedSessionExpired" ||
-        event.source !== chatFirstAppFrameRef.current?.contentWindow
-      ) {
+        !isEmbedSessionExpiredMessage(event, chatFirstAppFrameRef.current, null)
+      )
         return;
-      }
       setChatFirstEmbedAttempt((attempt) => attempt + 1);
     };
 
@@ -1627,6 +1650,7 @@ export function Layout({
       placement: ChatFirstAppSurfacePlacement = "side",
     ) => {
       if (placement === "side" && !chatFirstHasActiveChat) return;
+      setSidebarCollapsed(true);
       setChatFirstNotice(null);
       closeChatFirstSessionWatch();
       if (!isChatRoute) {
@@ -2025,6 +2049,11 @@ export function Layout({
     isChatRoute,
   ]);
 
+  useEffect(() => {
+    if (!isWorkspaceAppRoute) return;
+    setSidebarCollapsed(true);
+  }, [isWorkspaceAppRoute, localPathname]);
+
   useEffect(() => {
     if (typeof window === "undefined" || isWorkspaceAppHostRoute) return;
     try {
@@ -2109,13 +2138,14 @@ export function Layout({
         chatOnly
         dynamicSuggestions={false}
         suggestions={[]}
+        suppressInlineOpenApp={chatFirstMode}
         emptyStateDisplay="hidden"
         composerPlaceholder={t(
           "dispatch.pages.chatFirstSessionMessagePlaceholder",
         )}
       />
     ),
-    [t],
+    [chatFirstMode, t],
   );
 
   const renderChatFirstSurfaceTab = useCallback(
@@ -2137,10 +2167,10 @@ export function Layout({
           <ChatFirstAppPane
             app={app}
             status={
-              chatFirstEmbedError
-                ? "error"
-                : chatFirstEmbedUrl
-                  ? "ready"
+              chatFirstEmbedUrl
+                ? "ready"
+                : chatFirstEmbedError
+                  ? "error"
                   : chatFirstAppsQuery.isLoading
                     ? "loading"
                     : app
@@ -2152,6 +2182,7 @@ export function Layout({
             onRetry={() => setChatFirstEmbedAttempt((value) => value + 1)}
             renderEmbed={({ url, title }: ChatFirstEmbedTarget) => (
               <iframe
+                key={`${url}:${chatFirstEmbedAttempt}`}
                 data-dispatch-chat-first-app-frame
                 src={url}
                 title={title ?? chatFirstCopy("appUnavailable")}

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>