@agent-native/dispatch 0.19.2 → 0.20.1

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

@@ -173,7 +173,7 @@ describe("Dispatch NavContent", () => {
     expect(lists[1].className).toContain("gap-1");
     expect(lists[1].querySelector('a[href="/admin"]')).not.toBeNull();
     expect(lists[1].querySelector('a[href="/settings"]')).not.toBeNull();
-    expect(lists[0].querySelector("a")?.className).toContain("h-8 w-8");
+    expect(lists[0].querySelector("a")?.className).toContain("size-9");
   });
 
   it("keeps management routes out of the primary navigation", async () => {
@@ -218,7 +218,7 @@ describe("Dispatch NavContent", () => {
     expect(shell?.querySelector('a[href="/admin/apps"]')).toBeNull();
   });
 
-  it("shows ready workspace apps as direct links and highlights the active app", async () => {
+  it("shows ready workspace apps as host links and highlights the active app", async () => {
     clientState.workspaceApps = [
       { id: "calendar", name: "Calendar", path: "/calendar", status: "ready" },
       { id: "pending", name: "Pending", path: "/pending", status: "pending" },
@@ -226,7 +226,7 @@ describe("Dispatch NavContent", () => {
 
     await act(async () => {
       root.render(
-        <MemoryRouter initialEntries={["/calendar/events"]}>
+        <MemoryRouter initialEntries={["/apps/calendar"]}>
           <TooltipProvider>
             <NavContent />
           </TooltipProvider>
@@ -239,7 +239,7 @@ describe("Dispatch NavContent", () => {
     expect(rail?.textContent).toContain("Calendar");
     expect(rail?.textContent).not.toContain("Pending");
 
-    const calendarLink = rail?.querySelector('a[href="/calendar"]');
+    const calendarLink = rail?.querySelector('a[href="/apps/calendar"]');
     expect(calendarLink).not.toBeNull();
     expect(calendarLink?.getAttribute("aria-current")).toBe("page");
   });

package/src/components/layout/Layout.tsx

@@ -41,7 +41,7 @@ import {
   type ComponentType,
   type ReactNode,
 } from "react";
-import { NavLink, useLocation, useNavigate } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 
 import { cn } from "../../lib/utils";
 import {
@@ -147,6 +147,7 @@ function pageOwnsToolbar(pathname: string): boolean {
   if (pathname === "/tools" || pathname.startsWith("/tools/")) return true;
   if (pathname === "/extensions" || pathname.startsWith("/extensions/"))
     return true;
+  if (pathname.startsWith("/apps/")) return true;
   return false;
 }
 
@@ -556,7 +557,7 @@ export function NavContent({
         {collapsed ? (
           <Tooltip>
             <TooltipTrigger asChild>
-              <NavLink
+              <Link
                 to={dispatchNavLinkTarget(item.to)}
                 onClick={(event) => {
                   if (
@@ -578,27 +579,24 @@ export function NavContent({
                   onNavigate?.();
                 }}
                 aria-label={label}
-                className={({ isActive }) => {
-                  const active = isActive || itemMatchesLocalPath;
-                  return cn(
-                    "flex h-8 w-8 items-center justify-center rounded-md text-sm",
-                    active
-                      ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-                      : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                  );
-                }}
+                className={cn(
+                  "flex size-9 items-center justify-center rounded-md text-sm",
+                  itemMatchesLocalPath
+                    ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                )}
               >
                 {Icon ? (
                   <Icon size={16} className="shrink-0" />
                 ) : (
                   <span className="h-4 w-4 shrink-0" aria-hidden="true" />
                 )}
-              </NavLink>
+              </Link>
             </TooltipTrigger>
             <TooltipContent side="right">{label}</TooltipContent>
           </Tooltip>
         ) : (
-          <NavLink
+          <Link
             to={dispatchNavLinkTarget(item.to)}
             onClick={(event) => {
               if (
@@ -619,15 +617,12 @@ export function NavContent({
               }
               onNavigate?.();
             }}
-            className={({ isActive }) => {
-              const active = isActive || itemMatchesLocalPath;
-              return cn(
-                "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm",
-                active
-                  ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-              );
-            }}
+            className={cn(
+              "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm",
+              itemMatchesLocalPath
+                ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            )}
           >
             {Icon ? (
               <Icon size={16} className="shrink-0" />
@@ -635,7 +630,7 @@ export function NavContent({
               <span className="h-4 w-4 shrink-0" aria-hidden="true" />
             )}
             <span className="truncate">{label}</span>
-          </NavLink>
+          </Link>
         )}
         {!collapsed && item.id === "chat" && itemMatchesLocalPath ? (
           <DispatchChatsSection onNavigate={onNavigate} />
@@ -646,46 +641,55 @@ export function NavContent({
 
   return (
     <>
-      <div className={cn("border-b py-3", collapsed ? "px-1" : "px-4")}>
+      <div
+        className={cn(
+          "flex h-12 shrink-0 items-center border-b border-sidebar-border",
+          collapsed ? "justify-center px-0" : "px-4",
+        )}
+      >
         <div
           className={cn(
             "flex items-center",
             collapsed ? "justify-center" : "gap-2",
           )}
         >
+          <img
+            src={appPath("/agent-native-icon-light.svg")}
+            alt=""
+            aria-hidden="true"
+            width={35}
+            height={20}
+            className={cn(
+              "block shrink-0 object-contain object-center dark:hidden",
+              collapsed ? "h-4 w-7" : "h-5 w-[35px]",
+            )}
+          />
+          <img
+            src={appPath("/agent-native-icon-dark.svg")}
+            alt=""
+            aria-hidden="true"
+            width={35}
+            height={20}
+            className={cn(
+              "hidden shrink-0 object-contain object-center dark:block",
+              collapsed ? "h-4 w-7" : "h-5 w-[35px]",
+            )}
+          />
           {!collapsed && (
-            <>
-              <img
-                src={appPath("/agent-native-icon-light.svg")}
-                alt=""
-                aria-hidden="true"
-                width={35}
-                height={20}
-                className="block h-5 w-[35px] shrink-0 object-contain object-center dark:hidden"
-              />
-              <img
-                src={appPath("/agent-native-icon-dark.svg")}
-                alt=""
-                aria-hidden="true"
-                width={35}
-                height={20}
-                className="hidden h-5 w-[35px] shrink-0 object-contain object-center dark:block"
-              />
-              <div className="min-w-0 flex-1">
-                <div
-                  data-dispatch-sidebar-label
-                  className="truncate text-lg font-bold tracking-tight text-foreground"
-                >
-                  {DISPATCH_SIDEBAR_LABEL}
-                </div>
+            <div className="min-w-0 flex-1">
+              <div
+                data-dispatch-sidebar-label
+                className="truncate text-lg font-bold tracking-tight text-foreground"
+              >
+                {DISPATCH_SIDEBAR_LABEL}
               </div>
-            </>
+            </div>
           )}
         </div>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-        <nav className={cn("py-3", collapsed ? "px-1" : "px-2")}>
+        <nav className={cn("py-2", collapsed ? "px-1.5" : "px-2")}>
           <ul
             className={cn(
               collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
@@ -698,7 +702,7 @@ export function NavContent({
         </nav>
 
         <div className="mt-auto shrink-0">
-          <nav className={cn("py-1", collapsed ? "px-1" : "px-2")}>
+          <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",
@@ -751,6 +755,9 @@ export function Layout({
   const localPathname = localDispatchPath(location.pathname);
   const isChatRoute =
     localPathname === "/chat" || localPathname.startsWith("/chat/");
+  const isWorkspaceAppHostRoute = localPathname.startsWith("/apps/");
+  const sidebarBeforeAppRef = useRef<boolean | null>(null);
+  const sidebarAutoCollapsedRef = useRef(false);
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: "dispatch",
     activePath: localPathname,
@@ -765,7 +772,29 @@ export function Layout({
   useAgentChatHomeHandoffLinks(chatHandoffLinkOptions);
 
   useEffect(() => {
-    if (typeof window === "undefined") return;
+    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 {
       window.localStorage.setItem(
         SIDEBAR_COLLAPSE_KEY,
@@ -774,7 +803,7 @@ export function Layout({
     } catch {
       // Ignore storage failures; the in-memory preference still works.
     }
-  }, [sidebarCollapsed]);
+  }, [isWorkspaceAppHostRoute, sidebarCollapsed]);
 
   if (CHROMELESS_PATHS.some((path) => localPathname === path)) {
     return <>{children}</>;
@@ -800,7 +829,9 @@ export function Layout({
       <main
         className={cn(
           "flex-1",
-          isChatRoute ? "min-h-0 overflow-hidden" : "overflow-y-auto",
+          isChatRoute || isWorkspaceAppHostRoute
+            ? "min-h-0 overflow-hidden"
+            : "overflow-y-auto",
         )}
       >
         {showHeader ? (
@@ -840,7 +871,7 @@ export function Layout({
           <aside
             data-collapsed={sidebarCollapsed ? "true" : "false"}
             className={cn(
-              "agent-layout-left-drawer hidden shrink-0 flex-col border-e bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
+              "agent-layout-left-drawer hidden shrink-0 flex-col border-e !border-e-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
               sidebarCollapsed ? "w-14" : "w-56",
             )}
           >

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

@@ -1,13 +1,15 @@
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { IconApps } from "@tabler/icons-react";
-import { useLocation } from "react-router";
+import { Link, useLocation } from "react-router";
 
 import { cn } from "../../lib/utils";
 import {
+  workspaceAppRoute,
   workspaceAppHref,
   type WorkspaceAppSummary,
 } from "../../lib/workspace-apps";
+import { AppIcon } from "../app-icon";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 function pathFromValue(value: string | null | undefined): string | null {
@@ -24,6 +26,11 @@ function pathFromValue(value: string | null | undefined): string | null {
 }
 
 function appMatchesPath(app: WorkspaceAppSummary, pathname: string): boolean {
+  const appRoute = workspaceAppRoute(app.id);
+  if (pathname === appRoute || pathname.startsWith(`${appRoute}/`)) {
+    return true;
+  }
+
   const candidatePaths = [app.path, app.url]
     .map(pathFromValue)
     .filter((path): path is string => !!path);
@@ -33,10 +40,6 @@ function appMatchesPath(app: WorkspaceAppSummary, pathname: string): boolean {
   );
 }
 
-function appInitial(name: string): string {
-  return name.trim().charAt(0).toUpperCase() || "A";
-}
-
 function appLabel(app: WorkspaceAppSummary): string {
   return app.name.trim() || app.id;
 }
@@ -77,31 +80,27 @@ export function WorkspaceAppsRail({
     const label = appLabel(app);
     const active = appMatchesPath(app, location.pathname);
     const link = (
-      <a
-        href={href}
+      <Link
+        to={workspaceAppRoute(app.id)}
         aria-current={active ? "page" : undefined}
         aria-label={collapsed ? label : undefined}
         onClick={onNavigate}
         className={cn(
-          "flex h-8 items-center rounded-md text-sm transition-colors",
-          collapsed ? "w-8 justify-center" : "w-full gap-2 px-2 text-start",
+          "flex h-9 items-center rounded-md text-sm transition-colors",
+          collapsed ? "w-9 justify-center" : "w-full gap-2 px-2 text-start",
           active
             ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
             : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         )}
       >
-        <span
-          className={cn(
-            "flex size-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold",
-            active
-              ? "bg-sidebar-primary text-sidebar-primary-foreground"
-              : "bg-sidebar-accent text-sidebar-foreground/70",
-          )}
-        >
-          {appInitial(label)}
-        </span>
+        <AppIcon
+          id={app.id}
+          name={label}
+          size="sm"
+          className={cn("size-5 rounded-md", active && "ring-1 ring-ring/30")}
+        />
         {!collapsed ? <span className="truncate">{label}</span> : null}
-      </a>
+      </Link>
     );
 
     if (!collapsed) return link;
@@ -118,7 +117,7 @@ export function WorkspaceAppsRail({
     <div
       className={cn(
         "mt-4 border-t border-sidebar-border pt-3",
-        collapsed ? "px-1" : "px-2",
+        collapsed ? "px-1.5" : "px-2",
       )}
       data-dispatch-apps-rail
     >

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

@@ -0,0 +1,195 @@
+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";
+import { cn } from "../lib/utils";
+import { ActionQueryError } from "./action-query-error";
+import {
+  APP_LIST_GRID_CLASS,
+  APP_LIST_GRID_ROW_CLASS,
+  AppList,
+} from "./app-list-row";
+import { ConnectedAppCard } from "./connected-app-card";
+import { Skeleton } from "./ui/skeleton";
+import {
+  WorkspaceTemplateCard,
+  type CuratedWorkspaceTemplate,
+  type CuratedWorkspaceTemplatesResult,
+  type WorkspaceTemplateLabels,
+} from "./workspace-template-card";
+
+type OtherAppEntry =
+  | { kind: "template"; template: CuratedWorkspaceTemplate }
+  | { kind: "connected"; app: ConnectedAppSummary };
+
+function templateKey(template: CuratedWorkspaceTemplate): string {
+  return (template.templateId || template.id || template.appId || template.name)
+    .trim()
+    .toLowerCase();
+}
+
+function getTemplateItems(
+  result: CuratedWorkspaceTemplatesResult | undefined,
+): CuratedWorkspaceTemplate[] {
+  if (!result) return [];
+  return Array.isArray(result) ? result : result.templates;
+}
+
+export function mergeOtherAppEntries({
+  templates,
+  connectedApps,
+  workspaceApps,
+}: {
+  templates?: CuratedWorkspaceTemplatesResult;
+  connectedApps: ConnectedAppSummary[];
+  workspaceApps: WorkspaceAppId[];
+}): OtherAppEntry[] {
+  const workspaceAppIds = new Set(
+    workspaceApps.map((app) => app.id.trim().toLowerCase()),
+  );
+  const seen = new Set<string>();
+  const entries: OtherAppEntry[] = [];
+
+  for (const template of getTemplateItems(templates)) {
+    const id = templateKey(template);
+    if (!id || template.installed || workspaceAppIds.has(id)) continue;
+    seen.add(id);
+    entries.push({ kind: "template", template });
+  }
+
+  for (const app of filterOtherApps(connectedApps, workspaceApps)) {
+    const id = app.id.trim().toLowerCase();
+    if (seen.has(id)) continue;
+    seen.add(id);
+    entries.push({ kind: "connected", app });
+  }
+
+  return entries;
+}
+
+export function OtherAppsSection({
+  templates,
+  connectedApps = [],
+  workspaceApps,
+  templatesLoading = false,
+  connectedAppsLoading = false,
+  templatesError,
+  connectedAppsError,
+  onRetryTemplates,
+  onRetryConnectedApps,
+  templateLabels,
+  onRemixSuccess,
+  className,
+}: {
+  templates?: CuratedWorkspaceTemplatesResult;
+  connectedApps?: ConnectedAppSummary[];
+  workspaceApps: WorkspaceAppId[];
+  templatesLoading?: boolean;
+  connectedAppsLoading?: boolean;
+  templatesError?: Error | null;
+  connectedAppsError?: Error | null;
+  onRetryTemplates?: () => void;
+  onRetryConnectedApps?: () => void;
+  templateLabels?: Partial<WorkspaceTemplateLabels>;
+  onRemixSuccess?: (
+    result: unknown,
+    template: CuratedWorkspaceTemplate,
+  ) => void;
+  className?: string;
+}) {
+  const t = useT();
+  const entries = mergeOtherAppEntries({
+    templates,
+    connectedApps,
+    workspaceApps,
+  });
+  const isLoading = templatesLoading || connectedAppsLoading;
+  const hasError = Boolean(templatesError || connectedAppsError);
+
+  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">
+          <h2 className="truncate text-sm font-semibold text-foreground">
+            {t("dispatch.pages.otherApps", { defaultValue: "Other apps" })}
+          </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>
+
+      {templatesError ? (
+        <ActionQueryError
+          error={templatesError}
+          onRetry={() => onRetryTemplates?.()}
+        />
+      ) : null}
+      {connectedAppsError ? (
+        <ActionQueryError
+          error={connectedAppsError}
+          onRetry={() => onRetryConnectedApps?.()}
+        />
+      ) : null}
+
+      {isLoading && entries.length === 0 ? (
+        <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>
+      ) : null}
+    </section>
+  );
+}
+
+function OtherAppsSkeletonList() {
+  return (
+    <AppList className={APP_LIST_GRID_CLASS}>
+      {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>
+      ))}
+    </AppList>
+  );
+}