@agent-native/dispatch 0.22.0 → 0.23.0

package/src/components/layout/Layout.tsx

@@ -214,6 +214,16 @@ interface ChatFirstEmbedSessionInput {
   chrome: "minimal";
 }
 
+interface ChatFirstGrantedAppSummary {
+  id: string;
+  name: string;
+  url?: string | null;
+}
+
+interface ChatFirstGrantedAppsResult {
+  apps: ChatFirstGrantedAppSummary[];
+}
+
 export function buildChatFirstEmbedSessionInput(
   appId: string,
   path: string,
@@ -663,7 +673,7 @@ function DispatchChatsSection({
   return (
     <div
       className={cn(
-        "ms-4 min-w-0 space-y-0.5",
+        "min-w-0 space-y-0.5",
         showNewChat && "dispatch-chat-first-chats",
       )}
     >
@@ -730,7 +740,7 @@ function DispatchChatsSection({
             <Skeleton className="h-3 w-3/4 rounded" />
           </div>
         ))}
-      {chatFirstMode ? (
+      {chatFirstMode && (chatsLoading || visibleThreads.length > 0) ? (
         <ChatFirstChatHistory
           items={chatItems}
           activeId={displayedActiveThreadId}
@@ -1005,12 +1015,17 @@ export function NavContent({
         onChatFirstAppOpen?.(app);
         onNavigate?.();
       }}
+      onOpenAllApps={() => {
+        navigate(dispatchNavLinkTarget("/apps"));
+        onNavigate?.();
+      }}
       createAppTrigger={chatFirstCreateAppTrigger}
       renderIcon={(app) => (
         <AppIcon
           id={app.id}
           name={app.name}
           size="sm"
+          monochrome
           className="size-5 rounded-md"
         />
       )}
@@ -1115,6 +1130,33 @@ export function NavContent({
     );
   };
 
+  const bottomNavigation = (
+    <nav className={cn("py-1", collapsed ? "px-1.5" : "px-2")}>
+      <ul
+        className={cn(
+          collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
+        )}
+      >
+        {BOTTOM_NAV_ITEMS.map(renderNavItem)}
+      </ul>
+    </nav>
+  );
+  const organizationPicker = (
+    <div
+      className={cn("py-2", collapsed ? "flex justify-center px-1" : "px-3")}
+    >
+      <OrgSwitcher compact={collapsed} reserveSpace />
+    </div>
+  );
+  const sidebarFooterActions = (
+    <SidebarFooterActions
+      collapsed={collapsed}
+      feedback={feedbackButton}
+      search={searchButton}
+      collapse={collapseButton}
+    />
+  );
+
   return (
     <>
       <div
@@ -1206,39 +1248,16 @@ export function NavContent({
         </nav>
 
         <div className="mt-auto shrink-0">
-          <nav className={cn("py-1", collapsed ? "px-1.5" : "px-2")}>
-            <ul
-              className={cn(
-                collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
-              )}
-            >
-              {BOTTOM_NAV_ITEMS.map(renderNavItem)}
-            </ul>
-          </nav>
-          <div
-            className={cn(
-              "py-2",
-              collapsed ? "flex justify-center px-1" : "px-3",
-            )}
-          >
-            <OrgSwitcher compact={collapsed} reserveSpace />
-          </div>
+          {bottomNavigation}
+          {organizationPicker}
         </div>
-        <SidebarFooterActions
-          collapsed={collapsed}
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
+        {sidebarFooterActions}
       </div>
-      {chatFirstMode && collapsed ? (
+      {chatFirstMode ? (
         <div className="mt-auto shrink-0">
-          <SidebarFooterActions
-            collapsed
-            feedback={feedbackButton}
-            search={searchButton}
-            collapse={collapseButton}
-          />
+          {bottomNavigation}
+          {organizationPicker}
+          {collapsed ? sidebarFooterActions : null}
         </div>
       ) : null}
     </>
@@ -1270,7 +1289,11 @@ export function Layout({
   const isChatRoute =
     localPathname === "/chat" || localPathname.startsWith("/chat/");
   const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
-  const isWorkspaceAppHostRoute = localPathname.startsWith("/apps/");
+  const isWorkspaceAppRoute = localPathname.startsWith("/apps/");
+  const isWorkspaceAppHostRoute =
+    isWorkspaceAppRoute &&
+    typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).get("embedded") === "1";
   const [chatFirstPreference, setChatFirstPreference] = useState(() =>
     readChatFirstMode(),
   );
@@ -1285,23 +1308,40 @@ export function Layout({
   const chatFirstAppsQuery = useActionQuery<WorkspaceAppSummary[]>(
     "list-workspace-apps",
     { includeAgentCards: false },
-    { enabled: chatFirstMode && isChatRoute },
+    { enabled: chatFirstMode },
+  );
+  const chatFirstGrantedAppsQuery = useActionQuery<ChatFirstGrantedAppsResult>(
+    "list_apps",
+    {},
+    { enabled: chatFirstMode },
   );
   const chatFirstWorkspaceApps = useMemo(
     () => mergeChatFirstWorkspaceApps(chatFirstAppsQuery.data),
     [chatFirstAppsQuery.data],
   );
-  const chatFirstAppRegistrations = useMemo<ChatFirstAppRegistration[]>(
-    () =>
-      chatFirstWorkspaceApps.map((app) => ({
+  const chatFirstAppRegistrations = useMemo<ChatFirstAppRegistration[]>(() => {
+    const registrations = new Map<string, ChatFirstAppRegistration>();
+    for (const app of chatFirstWorkspaceApps) {
+      registrations.set(app.id.toLowerCase(), {
         id: app.id,
         name: app.name,
         path: app.path,
         url: app.url,
         enabled: app.status !== "pending" && app.archived !== true,
-      })),
-    [chatFirstWorkspaceApps],
-  );
+      });
+    }
+    for (const app of chatFirstGrantedAppsQuery.data?.apps ?? []) {
+      const id = app.id.trim();
+      if (!id || registrations.has(id.toLowerCase())) continue;
+      registrations.set(id.toLowerCase(), {
+        id,
+        name: app.name,
+        url: app.url,
+        enabled: true,
+      });
+    }
+    return [...registrations.values()];
+  }, [chatFirstGrantedAppsQuery.data?.apps, chatFirstWorkspaceApps]);
   const chatFirstAppItems = useMemo<ChatFirstAppItem[]>(
     () =>
       chatFirstWorkspaceApps.map((app) => ({
@@ -1358,15 +1398,29 @@ export function Layout({
       ) ?? null,
     [chatFirstSurfaceTabs],
   );
-  const activeChatFirstApp = useMemo(
+  const chatFirstAppTakesMain =
+    chatFirstMode && isChatRoute && activeChatFirstSurfaceTab?.kind === "app";
+  const activeChatFirstAppRegistration = useMemo(
     () =>
       activeChatFirstSurfaceTab?.kind === "app" &&
       activeChatFirstSurfaceTab.appId
-        ? (chatFirstWorkspaceApps.find(
+        ? (chatFirstAppRegistrations.find(
             (app) => app.id === activeChatFirstSurfaceTab.appId,
           ) ?? null)
         : null,
-    [activeChatFirstSurfaceTab, chatFirstWorkspaceApps],
+    [activeChatFirstSurfaceTab, chatFirstAppRegistrations],
+  );
+  const activeChatFirstApp = useMemo(
+    () =>
+      activeChatFirstAppRegistration
+        ? {
+            id: activeChatFirstAppRegistration.id,
+            name:
+              activeChatFirstAppRegistration.name ??
+              activeChatFirstAppRegistration.id,
+          }
+        : null,
+    [activeChatFirstAppRegistration],
   );
   const chatFirstAgentActivities = useMemo<ChatFirstAgentActivity[]>(
     () =>
@@ -1384,7 +1438,8 @@ export function Layout({
     activeChatFirstSurfaceTab?.kind === "app"
       ? (activeChatFirstSurfaceTab.path ??
         chatFirstPane?.path ??
-        activeChatFirstApp?.path)
+        activeChatFirstAppRegistration?.path ??
+        "/")
       : null;
   useEffect(() => {
     if (!chatFirstMode || !isChatRoute || !activeChatFirstApp) {
@@ -1446,6 +1501,12 @@ export function Layout({
     (pane: DispatchChatFirstPane) => {
       setChatFirstNotice(null);
       closeChatFirstSessionWatch();
+      if (!isChatRoute) {
+        navigateWithAgentChatViewTransition(
+          navigate,
+          dispatchNavLinkTarget("/chat"),
+        );
+      }
       const app = chatFirstAppRegistrations.find(
         (candidate) => candidate.id === pane.appId,
       );
@@ -1460,12 +1521,16 @@ export function Layout({
         ...(pane.path ? { path: pane.path } : {}),
         ...(pane.view ? { view: pane.view } : {}),
       });
+      setChatFirstSurfacePanelOpen(true);
       persistChatFirstPane(pane);
     },
     [
       chatFirstAppRegistrations,
       chatFirstSurfaceTabsStore,
       persistChatFirstPane,
+      isChatRoute,
+      navigate,
+      setChatFirstSurfacePanelOpen,
     ],
   );
   const openChatFirstSurface = useCallback(
@@ -1504,7 +1569,7 @@ export function Layout({
   );
   const resolveChatFirstOpenApp = useCallback(
     (detail: ChatFirstOpenAppDetail) => {
-      if (chatFirstAppsQuery.isLoading) {
+      if (chatFirstAppsQuery.isLoading || chatFirstGrantedAppsQuery.isLoading) {
         pendingChatFirstOpenAppRef.current = detail;
         return;
       }
@@ -1535,11 +1600,10 @@ export function Layout({
       chatFirstAppRegistrations,
       chatFirstAppsQuery.isError,
       chatFirstAppsQuery.isLoading,
+      chatFirstGrantedAppsQuery.isLoading,
       openChatFirstPane,
     ],
   );
-  const sidebarBeforeAppRef = useRef<boolean | null>(null);
-  const sidebarAutoCollapsedRef = useRef(false);
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: "dispatch",
     activePath: localPathname,
@@ -1610,7 +1674,7 @@ export function Layout({
   );
 
   useEffect(() => {
-    if (!chatFirstMode || !isChatRoute) {
+    if (!chatFirstMode) {
       setChatFirstPane(null);
       closeChatFirstSessionWatch();
       chatFirstSurfaceTabsStore.closeAll();
@@ -1713,7 +1777,7 @@ export function Layout({
   useEffect(() => {
     const tabCount = chatFirstSurfaceTabs.tabs.length;
     const previousTabCount = previousChatFirstSurfaceTabCountRef.current;
-    if (!chatFirstMode || !isChatRoute) {
+    if (!chatFirstMode) {
       setChatFirstSurfacePanelOpen(false);
     } else if (
       tabCount > 0 &&
@@ -1748,12 +1812,19 @@ export function Layout({
 
   useEffect(() => {
     const pending = pendingChatFirstOpenAppRef.current;
-    if (!pending || chatFirstAppsQuery.isLoading) return;
+    if (
+      !pending ||
+      chatFirstAppsQuery.isLoading ||
+      chatFirstGrantedAppsQuery.isLoading
+    )
+      return;
     resolveChatFirstOpenApp(pending);
   }, [
     chatFirstAppsQuery.data,
     chatFirstAppsQuery.isError,
     chatFirstAppsQuery.isLoading,
+    chatFirstGrantedAppsQuery.data,
+    chatFirstGrantedAppsQuery.isLoading,
     resolveChatFirstOpenApp,
   ]);
 
@@ -1774,28 +1845,6 @@ export function Layout({
     isChatRoute,
   ]);
 
-  useEffect(() => {
-    if (isWorkspaceAppHostRoute) {
-      if (!sidebarAutoCollapsedRef.current) {
-        sidebarAutoCollapsedRef.current = true;
-        sidebarBeforeAppRef.current = sidebarCollapsed;
-      }
-      if (!sidebarCollapsed) setSidebarCollapsed(true);
-      return;
-    }
-
-    if (!sidebarAutoCollapsedRef.current) return;
-    sidebarAutoCollapsedRef.current = false;
-    const previousSidebarState = sidebarBeforeAppRef.current;
-    sidebarBeforeAppRef.current = null;
-    if (
-      previousSidebarState !== null &&
-      previousSidebarState !== sidebarCollapsed
-    ) {
-      setSidebarCollapsed(previousSidebarState);
-    }
-  }, [isWorkspaceAppHostRoute, sidebarCollapsed]);
-
   useEffect(() => {
     if (typeof window === "undefined" || isWorkspaceAppHostRoute) return;
     try {
@@ -1892,11 +1941,17 @@ export function Layout({
     (tab: ChatFirstSurfaceTab) => {
       if (tab.kind === "app") {
         if (tab.id !== chatFirstSurfaceTabs.activeTabId) return null;
-        const app = tab.appId
-          ? (chatFirstWorkspaceApps.find(
+        const registration = tab.appId
+          ? (chatFirstAppRegistrations.find(
               (candidate) => candidate.id === tab.appId,
             ) ?? null)
           : null;
+        const app = registration
+          ? {
+              id: registration.id,
+              name: registration.name ?? registration.id,
+            }
+          : null;
         return (
           <ChatFirstAppPane
             app={app}
@@ -1999,7 +2054,7 @@ export function Layout({
       chatFirstEmbedUrl,
       chatFirstSessionWatch.target,
       chatFirstSurfaceTabs.activeTabId,
-      chatFirstWorkspaceApps,
+      chatFirstAppRegistrations,
       closeChatFirstSurfaceTab,
       renderChatFirstWatchChat,
     ],
@@ -2067,7 +2122,7 @@ export function Layout({
       <main
         className={cn(
           "flex-1",
-          isChatRoute || isWorkspaceAppHostRoute
+          isChatRoute || isWorkspaceAppRoute
             ? "min-h-0 overflow-hidden"
             : "overflow-y-auto",
         )}
@@ -2082,6 +2137,40 @@ export function Layout({
       </main>
     </div>
   );
+  const chatFirstSurfaceTabsBar =
+    activeChatFirstSurfaceTab?.kind === "app" ? null : (
+      <ChatFirstSurfaceTabs
+        tabs={chatFirstSurfaceTabs.tabs}
+        activeTabId={chatFirstSurfaceTabs.activeTabId}
+        onActivate={activateChatFirstSurfaceTab}
+        onClose={closeChatFirstSurfaceTab}
+        onCloseOthers={(tab) => {
+          activateChatFirstSurfaceTab(tab);
+          chatFirstSurfaceTabsStore.closeOthers(tab.id);
+        }}
+        onCloseToRight={(tab) => {
+          const targetIndex = chatFirstSurfaceTabs.tabs.findIndex(
+            (candidate) => candidate.id === tab.id,
+          );
+          const activeIndex = chatFirstSurfaceTabs.tabs.findIndex(
+            (candidate) => candidate.id === chatFirstSurfaceTabs.activeTabId,
+          );
+          if (activeIndex > targetIndex) activateChatFirstSurfaceTab(tab);
+          chatFirstSurfaceTabsStore.closeToRight(tab.id);
+        }}
+        onCloseAll={closeAllChatFirstSurfaceTabs}
+        onOpenSurface={openChatFirstSurface}
+        copy={chatFirstCopy}
+      />
+    );
+  const chatFirstSurfaceContent =
+    chatFirstSurfaceTabs.tabs.length > 0 ? (
+      <ChatFirstSurfaceContent
+        tabs={chatFirstSurfaceTabs.tabs}
+        activeTabId={chatFirstSurfaceTabs.activeTabId}
+        renderTab={renderChatFirstSurfaceTab}
+      />
+    ) : null;
   const content = isChatRoute ? (
     <div
       className={cn(
@@ -2089,47 +2178,31 @@ export function Layout({
         chatFirstMode && "dispatch-chat-first-surface",
       )}
     >
-      {appContent}
-      {chatFirstMode && chatFirstSurfacePanel.open ? (
-        <ChatFirstSurfacePanel
-          width={chatFirstSurfaceResize.width}
-          onResizePointerDown={chatFirstSurfaceResize.onPointerDown}
-          copy={chatFirstCopy}
+      {chatFirstAppTakesMain ? (
+        <div
+          className="flex min-w-0 flex-1 flex-col overflow-hidden"
+          data-dispatch-chat-first-main-app
         >
-          <ChatFirstSurfaceTabs
-            tabs={chatFirstSurfaceTabs.tabs}
-            activeTabId={chatFirstSurfaceTabs.activeTabId}
-            onActivate={activateChatFirstSurfaceTab}
-            onClose={closeChatFirstSurfaceTab}
-            onCloseOthers={(tab) => {
-              activateChatFirstSurfaceTab(tab);
-              chatFirstSurfaceTabsStore.closeOthers(tab.id);
-            }}
-            onCloseToRight={(tab) => {
-              const targetIndex = chatFirstSurfaceTabs.tabs.findIndex(
-                (candidate) => candidate.id === tab.id,
-              );
-              const activeIndex = chatFirstSurfaceTabs.tabs.findIndex(
-                (candidate) =>
-                  candidate.id === chatFirstSurfaceTabs.activeTabId,
-              );
-              if (activeIndex > targetIndex) activateChatFirstSurfaceTab(tab);
-              chatFirstSurfaceTabsStore.closeToRight(tab.id);
-            }}
-            onCloseAll={closeAllChatFirstSurfaceTabs}
-            onOpenSurface={openChatFirstSurface}
-            copy={chatFirstCopy}
-          />
-          {chatFirstSurfaceTabs.tabs.length > 0 ? (
-            <ChatFirstSurfaceContent
-              tabs={chatFirstSurfaceTabs.tabs}
-              activeTabId={chatFirstSurfaceTabs.activeTabId}
-              renderTab={renderChatFirstSurfaceTab}
-            />
+          {chatFirstSurfaceContent}
+        </div>
+      ) : (
+        <>
+          {appContent}
+          {chatFirstMode && chatFirstSurfacePanel.open ? (
+            <ChatFirstSurfacePanel
+              width={chatFirstSurfaceResize.width}
+              onResizePointerDown={chatFirstSurfaceResize.onPointerDown}
+              copy={chatFirstCopy}
+            >
+              {chatFirstSurfaceTabsBar}
+              {chatFirstSurfaceContent}
+            </ChatFirstSurfacePanel>
           ) : null}
-        </ChatFirstSurfacePanel>
-      ) : null}
+        </>
+      )}
     </div>
+  ) : isWorkspaceAppRoute ? (
+    appContent
   ) : (
     <AgentSidebar
       position="right"

package/src/components/layout/workspace-apps-rail.tsx

@@ -97,6 +97,7 @@ export function WorkspaceAppsRail({
           id={app.id}
           name={label}
           size="sm"
+          monochrome
           className={cn("size-5 rounded-md", active && "ring-1 ring-ring/30")}
         />
         {!collapsed ? <span className="truncate">{label}</span> : null}

package/src/components/other-apps-section.tsx

@@ -1,5 +1,4 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconStack2 } from "@tabler/icons-react";
 
 import { filterOtherApps, type ConnectedAppSummary } from "../lib/other-apps";
 import type { WorkspaceAppId } from "../lib/other-apps";
@@ -80,6 +79,8 @@ export function OtherAppsSection({
   onRetryConnectedApps,
   templateLabels,
   onRemixSuccess,
+  heading = "Other apps",
+  embeddedInList = false,
   className,
 }: {
   templates?: CuratedWorkspaceTemplatesResult;
@@ -96,6 +97,8 @@ export function OtherAppsSection({
     result: unknown,
     template: CuratedWorkspaceTemplate,
   ) => void;
+  heading?: string | null;
+  embeddedInList?: boolean;
   className?: string;
 }) {
   const t = useT();
@@ -109,26 +112,15 @@ export function OtherAppsSection({
 
   if (!isLoading && !hasError && entries.length === 0) return null;
 
-  return (
-    <section className={cn("space-y-3 border-t pt-6", className)}>
-      <div className="flex min-w-0 items-start gap-2">
-        <IconStack2
-          size={16}
-          className="mt-0.5 shrink-0 text-muted-foreground"
-        />
-        <div className="min-w-0">
+  const content = (
+    <>
+      {heading ? (
+        <div className="flex min-w-0 items-center">
           <h2 className="truncate text-sm font-semibold text-foreground">
-            {t("dispatch.pages.otherApps", { defaultValue: "Other apps" })}
+            {t("dispatch.pages.otherApps", { defaultValue: heading })}
           </h2>
-          {entries.length > 0 ? (
-            <p className="mt-0.5 text-xs text-muted-foreground">
-              {t("dispatch.pages.availableCount", {
-                count: entries.length,
-              })}
-            </p>
-          ) : null}
         </div>
-      </div>
+      ) : null}
 
       {templatesError ? (
         <ActionQueryError
@@ -144,31 +136,37 @@ export function OtherAppsSection({
       ) : null}
 
       {isLoading && entries.length === 0 ? (
-        <OtherAppsSkeletonList />
+        embeddedInList ? (
+          <OtherAppsSkeletonRows />
+        ) : (
+          <OtherAppsSkeletonList />
+        )
       ) : entries.length > 0 ? (
-        <AppList className={APP_LIST_GRID_CLASS}>
-          {entries.map((entry) =>
-            entry.kind === "template" ? (
-              <WorkspaceTemplateCard
-                key={`template:${templateKey(entry.template)}`}
-                template={entry.template}
-                labels={templateLabels}
-                catalog
-                className={APP_LIST_GRID_ROW_CLASS}
-                onRemixSuccess={onRemixSuccess}
-              />
-            ) : (
-              <ConnectedAppCard
-                key={`connected:${entry.app.id}`}
-                app={entry.app}
-                className={APP_LIST_GRID_ROW_CLASS}
-              />
-            ),
-          )}
-        </AppList>
+        entries.map((entry) =>
+          entry.kind === "template" ? (
+            <WorkspaceTemplateCard
+              key={`template:${templateKey(entry.template)}`}
+              template={entry.template}
+              labels={templateLabels}
+              catalog
+              className={APP_LIST_GRID_ROW_CLASS}
+              onRemixSuccess={onRemixSuccess}
+            />
+          ) : (
+            <ConnectedAppCard
+              key={`connected:${entry.app.id}`}
+              app={entry.app}
+              className={APP_LIST_GRID_ROW_CLASS}
+            />
+          ),
+        )
       ) : null}
-    </section>
+    </>
   );
+
+  if (embeddedInList) return content;
+
+  return <section className={cn("space-y-3", className)}>{content}</section>;
 }
 
 function OtherAppsSkeletonList() {
@@ -193,3 +191,26 @@ function OtherAppsSkeletonList() {
     </AppList>
   );
 }
+
+function OtherAppsSkeletonRows() {
+  return (
+    <>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div
+          key={index}
+          className={cn(
+            "flex min-w-0 items-center gap-3 border-b px-4 py-3.5 last:border-b-0",
+            APP_LIST_GRID_ROW_CLASS,
+          )}
+        >
+          <Skeleton className="size-8 shrink-0 rounded-xl" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+          <Skeleton className="h-9 w-24 shrink-0 rounded-md" />
+        </div>
+      ))}
+    </>
+  );
+}