@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/layout/Layout.tsx

@@ -0,0 +1,2532 @@
+import {
+  CHAT_FIRST_MODE_CHANGED_EVENT,
+  AgentChatSurface,
+  chatFirstSurfaceTabId,
+  AgentSidebar,
+  ChatFirstSurfacePanelToggle,
+  closeChatFirstSessionWatch,
+  emitChatFirstSessionWatch,
+  getChatFirstSurfaceTabsStore,
+  focusAgentChat,
+  navigateWithAgentChatViewTransition,
+  readChatFirstAppLayout,
+  readChatFirstMode,
+  resolveChatFirstBrowserTarget,
+  resolveChatFirstAppTarget,
+  subscribeChatFirstOpenBrowser,
+  subscribeChatFirstOpenApp,
+  writeChatFirstAppLayout,
+  useChatFirstSessionWatch,
+  useChatFirstSurfacePanel,
+  useChatFirstSurfaceResize,
+  useChatFirstSurfaceTabs,
+  type ChatFirstAppRegistration,
+  type ChatFirstAppLayoutPreference,
+  type ChatFirstAppResolution,
+  type ChatFirstAppSurfacePlacement,
+  type ChatFirstOpenBrowserDetail,
+  type ChatFirstOpenAppDetail,
+  type ChatFirstSessionReference,
+  type ChatFirstSurfaceTab,
+  type ChatFirstSurfaceKind,
+  useAgentChatHomeHandoff,
+  useAgentChatHomeHandoffLinks,
+  useChatThreads,
+  type ChatThreadSummary,
+} from "@agent-native/core/client/agent-chat";
+import { appBasePath, appPath } from "@agent-native/core/client/api-path";
+import {
+  readClientAppState,
+  writeClientAppState,
+} from "@agent-native/core/client/application-state";
+import {
+  ChatFirstAgentsPane,
+  ChatFirstAppPane,
+  ChatFirstAppsRail,
+  ChatFirstBrowserPane,
+  ChatFirstChatHistory,
+  ChatFirstPrimaryNavigation,
+  ChatFirstSessionWatchPane,
+  ChatFirstSurfacePanel,
+  ChatFirstSurfaceContent,
+  ChatFirstSurfaceTabs,
+  defaultChatFirstCopy,
+  type ChatFirstAgentActivity,
+  type ChatFirstAppItem,
+  type ChatFirstCopy,
+  type ChatFirstEmbedTarget,
+  type ChatFirstPrimaryTab,
+} from "@agent-native/core/client/chat-first";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
+import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
+import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
+import {
+  ChatHistoryRail,
+  type ChatHistoryItem,
+} from "@agent-native/toolkit/chat-history";
+import {
+  IconApps,
+  IconBrandSlack,
+  IconBrandTelegram,
+  IconCopy,
+  IconEye,
+  IconHierarchy2,
+  IconMessageQuestion,
+  IconBroadcast,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+  IconSettings,
+  IconShield,
+  IconSearch,
+  IconWorld,
+  IconDeviceDesktop,
+  IconPlus,
+} from "@tabler/icons-react";
+import {
+  createContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useContext,
+  useCallback,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { Link, useLocation, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import { cn } from "../../lib/utils";
+import {
+  isDispatchWorkspaceAppId,
+  isPathMountedWorkspaceApp,
+  isWorkspaceAppVisibleInDefaultLaunchers,
+  isWorkspaceSsoApp,
+  mergeChatFirstWorkspaceApps,
+  navigateToWorkspaceApp,
+  workspaceAppIdFromRoute,
+  workspaceAppDirectHref,
+  workspaceAppRoute,
+  type WorkspaceAppSummary,
+} from "../../lib/workspace-apps";
+import { CHAT_FIRST_PANE_STATE_KEY } from "../../shared/chat-first-pane";
+import { AppIcon } from "../app-icon";
+import { CreateAppPopover } from "../create-app-popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
+import { Skeleton } from "../ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import {
+  WorkspaceAppChatRail,
+  WorkspaceAppFrame,
+  WorkspaceAppKeepAlive,
+} from "../workspace-app-host";
+import { Header } from "./Header";
+import { HeaderActionsProvider } from "./HeaderActions";
+
+export { buildChatFirstEmbedSessionInput } from "../workspace-app-host";
+
+export type DispatchNavSection = "primary" | "operations";
+
+export type DispatchNavIcon = ComponentType<{
+  size?: number | string;
+  className?: string;
+}>;
+
+export interface DispatchNavItem {
+  /** Stable id used for keys and navigation.view. Avoid built-in ids. */
+  id: string;
+  /** React Router path for the tab, usually backed by an app/routes/*.tsx file. */
+  to: string;
+  label: string;
+  icon?: DispatchNavIcon;
+  /** Defaults to "operations", which renders under the Admin control plane. */
+  section?: DispatchNavSection;
+  /** Override active matching for nested or multi-route tools. */
+  match?: (pathname: string) => boolean;
+  /** Canonical path inside the Admin shell for management tabs. */
+  adminTo?: string;
+}
+
+export interface DispatchExtensionConfig {
+  /** Opt into the Codex/T3-like chat-first shell for chat routes. */
+  chatFirst?: boolean;
+  /** Extra sidebar tabs supplied by the generated workspace. */
+  navItems?: readonly DispatchNavItem[];
+  /** Extra React Query keys to invalidate when Dispatch receives DB sync events. */
+  queryKeys?: readonly string[];
+}
+
+const PRIMARY_NAV_ITEMS = [
+  {
+    id: "overview",
+    to: "/overview",
+    label: "Overview",
+    icon: IconBroadcast,
+    section: "primary",
+  },
+  {
+    id: "chat",
+    to: "/chat",
+    label: "Chat",
+    icon: IconMessageQuestion,
+    section: "primary",
+  },
+  {
+    id: "apps",
+    to: "/apps",
+    label: "Apps",
+    icon: IconApps,
+    section: "primary",
+  },
+  {
+    id: "agents",
+    to: "/agents",
+    label: "Agents",
+    icon: IconHierarchy2,
+    section: "primary",
+  },
+] as const satisfies readonly DispatchNavItem[];
+
+const BOTTOM_NAV_ITEMS = [
+  {
+    id: "admin",
+    to: "/admin",
+    label: "Admin",
+    icon: IconShield,
+  },
+  {
+    id: "settings",
+    to: "/settings",
+    label: "Settings",
+    icon: IconSettings,
+  },
+] as const satisfies readonly DispatchNavItem[];
+
+const EMPTY_NAV_ITEMS: readonly DispatchNavItem[] = [];
+const DISPATCH_SIDEBAR_LABEL = "Dispatch";
+
+const CHROMELESS_PATHS = ["/approval", "/browser-chat", "/browser-connect"];
+const SIDEBAR_COLLAPSE_KEY = "dispatch.sidebar.collapsed";
+const CHAT_HISTORY_SOURCE_KEY = "dispatch.chat-history.source";
+
+interface DispatchChatFirstPane {
+  appId: string;
+  placement?: ChatFirstAppSurfacePlacement;
+  path?: string;
+  view?: string;
+}
+
+interface ChatFirstGrantedAppSummary {
+  id: string;
+  name: string;
+  url?: string | null;
+}
+
+interface ChatFirstGrantedAppsResult {
+  apps: ChatFirstGrantedAppSummary[];
+}
+
+interface DispatchAgentThreadSummary {
+  id: string;
+  title: string;
+  preview?: string;
+  snippet?: string;
+  updatedAt?: number;
+}
+
+interface SearchAgentThreadsResult {
+  threads: DispatchAgentThreadSummary[];
+}
+
+const DispatchExtensionsContext = createContext<
+  DispatchExtensionConfig | undefined
+>(undefined);
+
+export function useDispatchExtensions(): DispatchExtensionConfig | undefined {
+  return useContext(DispatchExtensionsContext);
+}
+
+// Routes whose page renders its own toolbar.
+// Layout still mounts the sidebar + AgentSidebar, but skips its own Header so
+// there's no double-header.
+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;
+}
+
+function sectionFor(item: DispatchNavItem): DispatchNavSection {
+  return item.section ?? "operations";
+}
+
+function navItemMatchesPath(item: DispatchNavItem, pathname: string): boolean {
+  if (item.match) {
+    try {
+      if (item.match(pathname)) return true;
+    } catch {
+      return false;
+    }
+  }
+  return pathname === item.to || pathname.startsWith(`${item.to}/`);
+}
+
+function navItemsForSection(
+  items: readonly DispatchNavItem[],
+  section: DispatchNavSection,
+): DispatchNavItem[] {
+  return items.filter((item) => sectionFor(item) === section);
+}
+
+function localDispatchPath(pathname: string): string {
+  const basePath = appBasePath();
+  if (!basePath) return pathname;
+  if (pathname === basePath) return "/";
+  if (pathname.startsWith(`${basePath}/`)) {
+    return pathname.slice(basePath.length) || "/";
+  }
+  return pathname;
+}
+
+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 {
+  if (pathname === "/chat" || pathname.startsWith("/chat/")) {
+    return "new-chat";
+  }
+  if (
+    pathname === "/integrations" ||
+    pathname.startsWith("/integrations/") ||
+    pathname === "/admin/integrations" ||
+    pathname.startsWith("/admin/integrations/")
+  ) {
+    return "integrations";
+  }
+  if (
+    pathname === "/automations" ||
+    pathname.startsWith("/automations/") ||
+    pathname === "/admin/automations" ||
+    pathname.startsWith("/admin/automations/")
+  ) {
+    return "scheduled";
+  }
+  return undefined;
+}
+
+function dispatchNavLinkTarget(path: string): string {
+  if (typeof window === "undefined") return path;
+  const basePath = appBasePath();
+  if (!basePath) return path;
+  // Mirror the basename calculation entry.client.tsx uses to configure the
+  // router (basePath iff the current URL is under that mount, "" otherwise).
+  // Reading the live URL directly avoids races with the previous check on
+  // `__reactRouterContext.basename`, which could read undefined before the
+  // entry script set it — that race produced /dispatch/dispatch/<route>
+  // history entries that 404'd on back-button navigation.
+  const pathname = window.location.pathname;
+  const routerHasBasename =
+    pathname === basePath || pathname.startsWith(`${basePath}/`);
+  return routerHasBasename ? path : appPath(path);
+}
+
+function chatFirstResolutionMessage(
+  reason: Exclude<ChatFirstAppResolution, { status: "ready" }>["reason"],
+): string {
+  switch (reason) {
+    case "empty-detail":
+      return "The agent did not provide an app target to open.";
+    case "invalid-url":
+      return "The requested app route was not registered for this workspace app.";
+    case "unknown-app":
+      return "That app is not available in this workspace.";
+  }
+  return "The requested app could not be opened.";
+}
+
+function chatFirstBrowserResolutionMessage(
+  reason: "empty-detail" | "invalid-url",
+): string {
+  return reason === "empty-detail"
+    ? "The agent did not provide a browser URL to open."
+    : "The requested browser URL is not a safe HTTP(S) address.";
+}
+
+const DISPATCH_CHAT_FIRST_COPY_KEYS: Record<string, string> = {
+  workspaceApps: "chatFirstWorkspaceApps",
+  createWorkspaceApp: "chatFirstCreateWorkspaceApp",
+  openApp: "chatFirstOpenApp",
+  appsLoadError: "chatFirstAppsLoadError",
+  noWorkspaceApps: "chatFirstNoWorkspaceApps",
+  createApp: "chatFirstCreateApp",
+  retry: "chatFirstRetry",
+  dismiss: "chatFirstDismiss",
+  unpinApp: "chatFirstUnpinApp",
+  pinApp: "chatFirstPinApp",
+  removePinned: "chatFirstRemovePinned",
+  pinTop: "chatFirstPinTop",
+  openSideSurfaces: "chatFirstOpenSideSurfaces",
+  closeTab: "chatFirstCloseTab",
+  close: "chatFirstClose",
+  closeOthers: "chatFirstCloseOthers",
+  closeToRight: "chatFirstCloseToRight",
+  closeAll: "chatFirstCloseAll",
+  unavailable: "chatFirstUnavailable",
+  openActivity: "chatFirstOpenActivity",
+  deferred: "chatFirstDeferred",
+  browserBack: "chatFirstBrowserBack",
+  browserForward: "chatFirstBrowserForward",
+  browserReload: "chatFirstBrowserReload",
+  browserAddress: "chatFirstBrowserAddress",
+  browserOpenExternal: "chatFirstBrowserOpenExternal",
+  browserClose: "chatFirstBrowserClose",
+  browserPage: "chatFirstBrowserPage",
+  browserInvalidUrl: "chatFirstBrowserInvalidUrl",
+  browserPreviewStarting: "chatFirstBrowserPreviewStarting",
+  browserPreviewError: "chatFirstBrowserPreviewError",
+  appUnavailable: "chatFirstAppUnavailable",
+  appLoading: "chatFirstLoadingApp",
+  agentActivityEyebrow: "chatFirstAgentActivityEyebrow",
+  agentActivityTitle: "chatFirstAgentActivityTitle",
+  agentActivityDescription: "chatFirstAgentActivityDescription",
+  refreshAgentActivity: "chatFirstRefreshAgentActivity",
+  noAgentSessions: "chatFirstNoAgentSessions",
+  startAgentSession: "chatFirstStartAgentSession",
+  watchSession: "chatFirstWatchSession",
+  copySessionId: "chatFirstCopySessionId",
+  copySessionIdFor: "chatFirstCopySessionIdFor",
+  sessionIdCopied: "chatFirstSessionIdCopied",
+  sessionIdShort: "chatFirstSessionIdShort",
+  copied: "chatFirstCopied",
+  agentActivityStatusQueued: "chatFirstAgentActivityStatusQueued",
+  agentActivityStatusRunning: "chatFirstAgentActivityStatusRunning",
+  agentActivityStatusPaused: "chatFirstAgentActivityStatusPaused",
+  agentActivityStatusNeedsApproval: "chatFirstAgentActivityStatusNeedsApproval",
+  agentActivityStatusCompleted: "chatFirstAgentActivityStatusCompleted",
+  agentActivityStatusErrored: "chatFirstAgentActivityStatusErrored",
+  agentActivityStatusRecent: "chatFirstAgentActivityStatusRecent",
+  agentActivityStatusUnknown: "chatFirstAgentActivityStatusUnknown",
+  watchingSession: "chatFirstWatchingSession",
+  session: "chatFirstSession",
+  stopWatchingSession: "chatFirstStopWatchingSession",
+  stopWatching: "chatFirstStopWatching",
+  watchedSession: "chatFirstWatchedSession",
+  agentsTitle: "chatFirstAgentsTitle",
+};
+
+const DISPATCH_CHAT_FIRST_SURFACE_COPY_KEYS: Record<
+  string,
+  { label: string; reason: string }
+> = {
+  browser: {
+    label: "chatFirstSurfaceBrowserLabel",
+    reason: "chatFirstSurfaceBrowserReason",
+  },
+  terminal: {
+    label: "chatFirstSurfaceTerminalLabel",
+    reason: "chatFirstSurfaceTerminalReason",
+  },
+  files: {
+    label: "chatFirstSurfaceFilesLabel",
+    reason: "chatFirstSurfaceFilesReason",
+  },
+  diff: {
+    label: "chatFirstSurfaceDiffLabel",
+    reason: "chatFirstSurfaceDiffReason",
+  },
+  "side-chat": {
+    label: "chatFirstSurfaceSideChatLabel",
+    reason: "chatFirstSurfaceSideChatReason",
+  },
+  agents: {
+    label: "chatFirstSurfaceAgentsLabel",
+    reason: "chatFirstSurfaceAgentsReason",
+  },
+};
+
+function createDispatchChatFirstCopy(
+  t: (key: string, options?: Record<string, unknown>) => string,
+): ChatFirstCopy {
+  return (key, values) => {
+    if (key.startsWith("surface.")) {
+      const [, kind, field] = key.split(".");
+      const surface = DISPATCH_CHAT_FIRST_SURFACE_COPY_KEYS[kind];
+      const translationKey =
+        surface && (field === "label" || field === "reason")
+          ? surface[field]
+          : undefined;
+      if (translationKey) {
+        return t(`dispatch.pages.${translationKey}`, {
+          ...(values ?? {}),
+          defaultValue: defaultChatFirstCopy(key, values),
+        });
+      }
+    }
+    const translationKey = DISPATCH_CHAT_FIRST_COPY_KEYS[key];
+    if (!translationKey) return defaultChatFirstCopy(key, values);
+    return t(`dispatch.pages.${translationKey}`, {
+      ...(values ?? {}),
+      defaultValue: defaultChatFirstCopy(key, values),
+    });
+  };
+}
+
+function chatThreadPath(threadId: string | null): string {
+  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
+}
+
+function persistedChatFirstPane(value: unknown): DispatchChatFirstPane | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (typeof record.appId !== "string" || !record.appId.trim()) return null;
+  return {
+    appId: record.appId,
+    ...(record.placement === "main" || record.placement === "side"
+      ? { placement: record.placement }
+      : {}),
+    ...(typeof record.path === "string" ? { path: record.path } : {}),
+    ...(typeof record.view === "string" ? { view: record.view } : {}),
+  };
+}
+
+function threadIdFromPath(pathname: string): string | null {
+  const match = pathname.match(/^\/chat\/([^/]+)/);
+  if (!match) return null;
+  try {
+    const value = decodeURIComponent(match[1]).trim();
+    return value || null;
+  } catch {
+    return null;
+  }
+}
+
+export function formatThreadAge(updatedAt: number, now = Date.now()) {
+  const diffMs = Math.max(0, now - updatedAt);
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 14) return `${days}d`;
+  if (days < 365) return `${Math.floor(days / 7)}w`;
+  return `${Math.floor(days / 365)}y`;
+}
+
+function threadTitle(thread: ChatThreadSummary, fallback: string) {
+  return thread.title || thread.preview || fallback;
+}
+
+function threadSourceIcon(platform: string | undefined): ReactNode {
+  const normalized = platform?.trim().toLowerCase();
+  if (!normalized) return null;
+  if (normalized === "slack") {
+    return <IconBrandSlack size={13} aria-hidden="true" />;
+  }
+  if (normalized === "telegram") {
+    return <IconBrandTelegram size={13} aria-hidden="true" />;
+  }
+  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
+    : Number.isFinite(thread.createdAt)
+      ? thread.createdAt
+      : 0;
+}
+
+function DispatchChatsSection({
+  onNavigate,
+  showNewChat = false,
+  prelude,
+  chatFirstMode = false,
+  chatFirstEmbedded = false,
+  collapsed = false,
+  chatFirstNavigation,
+}: {
+  onNavigate?: () => void;
+  showNewChat?: boolean;
+  prelude?: ReactNode;
+  chatFirstMode?: boolean;
+  chatFirstEmbedded?: boolean;
+  collapsed?: boolean;
+  chatFirstNavigation?: {
+    activeTab?: ChatFirstPrimaryTab;
+    onNewChat?: () => void;
+    onOpenIntegrations: () => void;
+    onOpenScheduled: () => void;
+  };
+}) {
+  const t = useT();
+  const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [includeExternal, setIncludeExternal] = useState(false);
+  const [historyPreferenceReady, setHistoryPreferenceReady] = useState(false);
+  const historyModeRef = useRef(includeExternal);
+  const {
+    threads,
+    activeThreadId,
+    isLoading: chatsLoading,
+    threadsLoadError,
+    createThread,
+    switchThread,
+    renameThread,
+    refreshThreads,
+  } = useChatThreads(undefined, "dispatch", undefined, {
+    autoCreate: false,
+    includeExternal,
+  });
+
+  const visibleThreads = useMemo(
+    () =>
+      threads
+        .filter(
+          (thread) => thread.messageCount > 0 || thread.id === activeThreadId,
+        )
+        .sort((a, b) => threadUpdatedAt(b) - threadUpdatedAt(a))
+        .slice(0, 8),
+    [activeThreadId, threads],
+  );
+  const localPathname = localDispatchPath(location.pathname);
+  const displayedActiveThreadId =
+    threadIdFromPath(localPathname) ??
+    (localPathname === "/chat" ? null : activeThreadId);
+  const chatItems: ChatHistoryItem[] = visibleThreads.map((thread) => {
+    const title = threadTitle(thread, t("dispatch.sidebar.newChat"));
+    const sourceIcon = threadSourceIcon(thread.source?.platform);
+    const sourceLabel = thread.source?.platform
+      ? thread.source.platform[0].toUpperCase() +
+        thread.source.platform.slice(1)
+      : null;
+    return {
+      id: thread.id,
+      title: (
+        <span
+          className="flex min-w-0 items-center gap-1"
+          title={sourceLabel ? `${sourceLabel}: ${title}` : title}
+        >
+          {sourceIcon ? (
+            <span
+              className="shrink-0 text-sidebar-foreground/55"
+              aria-label={sourceLabel ?? "Connected source"}
+            >
+              {sourceIcon}
+            </span>
+          ) : null}
+          <span className="truncate">{title}</span>
+        </span>
+      ),
+      titleText: title,
+      timestamp:
+        thread.id === displayedActiveThreadId
+          ? ""
+          : 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());
+    setHistoryPreferenceReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (!historyPreferenceReady) return;
+    try {
+      localStorage.setItem(
+        CHAT_HISTORY_SOURCE_KEY,
+        includeExternal ? "all" : "local",
+      );
+    } catch {} // coercion-ok: localStorage is optional browser persistence.
+    if (historyModeRef.current !== includeExternal) {
+      historyModeRef.current = includeExternal;
+      refreshThreads();
+    }
+  }, [historyPreferenceReady, includeExternal, refreshThreads]);
+
+  useEffect(() => {
+    const refresh = () => refreshThreads();
+    const handleRunning = (event: Event) => {
+      const detail = (event as CustomEvent).detail as
+        | { isRunning?: unknown }
+        | undefined;
+      if (detail?.isRunning === false) refreshThreads();
+    };
+
+    window.addEventListener("agent-chat:threads-updated", refresh);
+    window.addEventListener("agentNative.chatRunning", handleRunning);
+    window.addEventListener("focus", refresh);
+    return () => {
+      window.removeEventListener("agent-chat:threads-updated", refresh);
+      window.removeEventListener("agentNative.chatRunning", handleRunning);
+      window.removeEventListener("focus", refresh);
+    };
+  }, [refreshThreads]);
+
+  function openThread(threadId: string, options?: { isNew?: boolean }) {
+    switchThread(threadId);
+    navigateWithAgentChatViewTransition(
+      navigate,
+      dispatchNavLinkTarget(
+        options?.isNew ? "/chat" : chatThreadPath(threadId),
+      ),
+    );
+    onNavigate?.();
+    window.requestAnimationFrame(() => {
+      window.dispatchEvent(
+        new CustomEvent("agent-chat:open-thread", {
+          detail: { threadId, newThread: options?.isNew === true },
+        }),
+      );
+    });
+  }
+
+  async function handleNewChat() {
+    const threadId = await createThread();
+    if (threadId) openThread(threadId, { isNew: true });
+  }
+
+  const collapsedChatFirst = collapsed && chatFirstMode;
+
+  return (
+    <div
+      className={cn(
+        "min-w-0 space-y-0.5",
+        showNewChat && "dispatch-chat-first-chats",
+      )}
+    >
+      {showNewChat && chatFirstNavigation ? (
+        <nav className={cn("space-y-0.5 py-2", collapsed ? "px-1.5" : "px-2")}>
+          <ChatFirstPrimaryNavigation
+            copy={chatFirstCopy}
+            onNewChat={() => {
+              chatFirstNavigation.onNewChat?.();
+              void handleNewChat();
+            }}
+            onOpenIntegrations={chatFirstNavigation.onOpenIntegrations}
+            onOpenScheduled={chatFirstNavigation.onOpenScheduled}
+            onSearch={openCommandMenu}
+            activeTab={chatFirstNavigation.activeTab}
+            collapsed={collapsed}
+          />
+        </nav>
+      ) : null}
+      {prelude}
+      {!collapsedChatFirst && !chatFirstMode ? (
+        <div className="flex justify-end px-2 pt-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                data-dispatch-chat-source-toggle
+                aria-pressed={includeExternal}
+                aria-label={
+                  includeExternal
+                    ? t("dispatch.sidebar.showLocalChats", {
+                        defaultValue: "Show local chats",
+                      })
+                    : t("dispatch.sidebar.showAllChats", {
+                        defaultValue: "Show all chats",
+                      })
+                }
+                onClick={() => setIncludeExternal((current) => !current)}
+                className="flex size-6 items-center justify-center rounded-md text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                {includeExternal ? (
+                  <IconWorld size={14} aria-hidden="true" />
+                ) : (
+                  <IconDeviceDesktop size={14} aria-hidden="true" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {includeExternal
+                ? t("dispatch.sidebar.showLocalChats", {
+                    defaultValue: "Show local chats",
+                  })
+                : t("dispatch.sidebar.showAllChats", {
+                    defaultValue: "Show all chats",
+                  })}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      ) : null}
+      {!collapsedChatFirst &&
+        !chatFirstMode &&
+        chatsLoading &&
+        visibleThreads.length === 0 &&
+        Array.from({ length: 3 }).map((_, index) => (
+          <div
+            key={`chat-skeleton-${index}`}
+            className="flex items-center gap-2 px-3 py-1"
+          >
+            <Skeleton className="size-3.5 shrink-0 rounded-sm" />
+            <Skeleton className="h-3 w-3/4 rounded" />
+          </div>
+        ))}
+      {!collapsedChatFirst &&
+      chatFirstMode &&
+      (chatsLoading || visibleThreads.length > 0) ? (
+        <ChatFirstChatHistory
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          loading={chatsLoading && visibleThreads.length === 0}
+          loadingLabel={
+            <div className="space-y-1 px-2 py-1">
+              {[0, 1, 2].map((index) => (
+                <div key={index} className="flex items-center gap-2 px-1 py-1">
+                  <Skeleton className="size-3.5 shrink-0 rounded-sm" />
+                  <Skeleton className="h-3 w-3/4 rounded" />
+                </div>
+              ))}
+            </div>
+          }
+          label={t("dispatch.sidebar.chats", { defaultValue: "Chats" })}
+          error={chatHistoryError}
+          onSelect={(threadId) => openThread(threadId)}
+          renameMaxLength={160}
+          onRename={(threadId, title) => void renameThread(threadId, title)}
+          labels={{
+            options: (item) =>
+              t("dispatch.sidebar.chatOptions", {
+                title: item.titleText ?? "",
+              }),
+            renameInput: (item) =>
+              t("dispatch.sidebar.renameThread", {
+                title: item.titleText ?? "",
+              }),
+            rename: t("dispatch.sidebar.renameChat"),
+          }}
+          renderAdditionalRowActions={(item, closeMenu) => (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                className="an-chat-history-row__menu-item"
+                onClick={() => {
+                  closeMenu();
+                  void writeClipboardText(item.id).then((copied) => {
+                    toast[copied ? "success" : "error"](
+                      copied
+                        ? "Session ID copied"
+                        : "Could not copy the session ID",
+                    );
+                  });
+                }}
+              >
+                <IconCopy size={13} strokeWidth={1.8} />
+                <span>Copy session ID</span>
+              </button>
+              {!chatFirstEmbedded ? (
+                <button
+                  type="button"
+                  role="menuitem"
+                  className="an-chat-history-row__menu-item"
+                  onClick={() => {
+                    closeMenu();
+                    emitChatFirstSessionWatch({
+                      sessionId: item.id,
+                      title: item.titleText,
+                      kind: "agent-chat",
+                      sourceSessionId: displayedActiveThreadId ?? undefined,
+                    });
+                  }}
+                >
+                  <IconEye size={13} strokeWidth={1.8} />
+                  <span>Watch and message session</span>
+                </button>
+              ) : null}
+            </>
+          )}
+          className="min-w-0 px-2"
+        />
+      ) : !collapsedChatFirst ? (
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          onSelect={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("dispatch.sidebar.newChat"),
+            showMore: t("dispatch.sidebar.chats"),
+            showLess: t("dispatch.sidebar.chats"),
+          }}
+          error={chatHistoryError}
+          renameMaxLength={160}
+          onRename={(threadId, title) => void renameThread(threadId, title)}
+          labels={{
+            options: (item) =>
+              t("dispatch.sidebar.chatOptions", {
+                title: item.titleText ?? "",
+              }),
+            renameInput: (item) =>
+              t("dispatch.sidebar.renameThread", {
+                title: item.titleText ?? "",
+              }),
+            rename: t("dispatch.sidebar.renameChat"),
+          }}
+          renderAdditionalRowActions={(item, closeMenu) => (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                className="an-chat-history-row__menu-item"
+                onClick={() => {
+                  closeMenu();
+                  void writeClipboardText(item.id).then((copied) => {
+                    toast[copied ? "success" : "error"](
+                      copied
+                        ? "Session ID copied"
+                        : "Could not copy the session ID",
+                    );
+                  });
+                }}
+              >
+                <IconCopy size={13} strokeWidth={1.8} />
+                <span>Copy session ID</span>
+              </button>
+              {chatFirstMode && !chatFirstEmbedded ? (
+                <button
+                  type="button"
+                  role="menuitem"
+                  className="an-chat-history-row__menu-item"
+                  onClick={() => {
+                    closeMenu();
+                    emitChatFirstSessionWatch({
+                      sessionId: item.id,
+                      title: item.titleText,
+                      kind: "agent-chat",
+                      sourceSessionId: displayedActiveThreadId ?? undefined,
+                    });
+                  }}
+                >
+                  <IconEye size={13} strokeWidth={1.8} />
+                  <span>Watch and message session</span>
+                </button>
+              ) : null}
+            </>
+          )}
+          className="min-w-0 px-2"
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function NavContent({
+  onNavigate,
+  extensions,
+  chatFirstMode = false,
+  chatFirstEmbedded = false,
+  collapsed = false,
+  collapsible = false,
+  onCollapsedChange,
+  chatFirstAppLayout,
+  onChatFirstAppLayoutChange,
+  chatFirstApps = [],
+  chatFirstAppsLoading = false,
+  chatFirstAppsError,
+  chatFirstActiveAppId,
+  chatFirstActivePrimaryTab,
+  onChatFirstNewChat,
+  onChatFirstAppOpen,
+  onChatFirstAppsRetry,
+}: {
+  onNavigate?: () => void;
+  extensions?: DispatchExtensionConfig;
+  chatFirstMode?: boolean;
+  chatFirstEmbedded?: boolean;
+  collapsed?: boolean;
+  collapsible?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  chatFirstAppLayout?: ChatFirstAppLayoutPreference;
+  onChatFirstAppLayoutChange?: (layout: ChatFirstAppLayoutPreference) => void;
+  chatFirstApps?: readonly ChatFirstAppItem[];
+  chatFirstAppsLoading?: boolean;
+  chatFirstAppsError?: string | null;
+  chatFirstActiveAppId?: string;
+  chatFirstActivePrimaryTab?: ChatFirstPrimaryTab;
+  onChatFirstNewChat?: () => void;
+  onChatFirstAppOpen?: (app: ChatFirstAppItem) => void;
+  onChatFirstAppsRetry?: () => void;
+}) {
+  const t = useT();
+  const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const extensionNavItems = extensions?.navItems ?? EMPTY_NAV_ITEMS;
+  const primaryNavItems = [
+    ...PRIMARY_NAV_ITEMS,
+    ...navItemsForSection(extensionNavItems, "primary"),
+  ];
+  const localPathname = localDispatchPath(location.pathname);
+  const navLabel = (item: DispatchNavItem) => {
+    const key =
+      item.id === "thread-debug"
+        ? "threadDebug"
+        : item.id === "workspace"
+          ? "resources"
+          : item.id;
+    return t(`dispatch.nav.${key}`, { defaultValue: item.label });
+  };
+
+  const collapseButton = collapsible ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => onCollapsedChange?.(!collapsed)}
+          aria-label={
+            collapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          {collapsed ? (
+            <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+          ) : (
+            <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("sidebar.search")}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("sidebar.search")}</TooltipContent>
+    </Tooltip>
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={collapsed ? "icon" : "sidebar"}
+      side="right"
+      className={collapsed ? "size-8" : "min-w-0"}
+    />
+  );
+  const chatFirstCreateAppTrigger = (
+    <CreateAppPopover
+      align="start"
+      trigger={
+        <button
+          type="button"
+          className="flex size-6 items-center justify-center rounded text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground"
+          aria-label={chatFirstCopy("createWorkspaceApp")}
+          title={chatFirstCopy("createWorkspaceApp")}
+        >
+          <IconPlus size={14} aria-hidden="true" />
+        </button>
+      }
+    />
+  );
+
+  const chatFirstAppsRail = (
+    <ChatFirstAppsRail
+      apps={chatFirstApps}
+      activeAppId={chatFirstActiveAppId}
+      collapsed={collapsed}
+      loading={chatFirstAppsLoading}
+      error={chatFirstAppsError}
+      layout={chatFirstAppLayout}
+      onLayoutChange={onChatFirstAppLayoutChange}
+      onRetry={onChatFirstAppsRetry}
+      onOpenApp={(app) => {
+        onChatFirstAppOpen?.(app);
+        onNavigate?.();
+      }}
+      onOpenAllApps={() => {
+        navigate(dispatchNavLinkTarget("/apps"));
+        onNavigate?.();
+      }}
+      createAppTrigger={chatFirstCreateAppTrigger}
+      renderIcon={(app, options) => (
+        <AppIcon
+          id={app.id}
+          name={app.name}
+          size="sm"
+          monochrome={options?.isInactive}
+          className="size-7 rounded-lg"
+        />
+      )}
+      copy={chatFirstCopy}
+    />
+  );
+
+  const renderNavItem = (item: DispatchNavItem) => {
+    const Icon = item.icon;
+    const itemMatchesLocalPath = navItemMatchesPath(item, localPathname);
+    const label = navLabel(item);
+    return (
+      <li key={item.id}>
+        {collapsed ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                to={dispatchNavLinkTarget(item.to)}
+                onClick={(event) => {
+                  if (
+                    item.id === "chat" &&
+                    localPathname !== "/chat" &&
+                    !event.metaKey &&
+                    !event.ctrlKey &&
+                    !event.shiftKey &&
+                    !event.altKey
+                  ) {
+                    event.preventDefault();
+                    navigateWithAgentChatViewTransition(
+                      navigate,
+                      dispatchNavLinkTarget("/chat"),
+                    );
+                    onNavigate?.();
+                    return;
+                  }
+                  onNavigate?.();
+                }}
+                aria-label={label}
+                aria-current={itemMatchesLocalPath ? "page" : undefined}
+                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" />
+                )}
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">{label}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Link
+            to={dispatchNavLinkTarget(item.to)}
+            onClick={(event) => {
+              if (
+                item.id === "chat" &&
+                localPathname !== "/chat" &&
+                !event.metaKey &&
+                !event.ctrlKey &&
+                !event.shiftKey &&
+                !event.altKey
+              ) {
+                event.preventDefault();
+                navigateWithAgentChatViewTransition(
+                  navigate,
+                  dispatchNavLinkTarget("/chat"),
+                );
+                onNavigate?.();
+                return;
+              }
+              onNavigate?.();
+            }}
+            aria-current={itemMatchesLocalPath ? "page" : undefined}
+            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" />
+            ) : (
+              <span className="h-4 w-4 shrink-0" aria-hidden="true" />
+            )}
+            <span className="truncate">{label}</span>
+          </Link>
+        )}
+        {!collapsed && item.id === "chat" && itemMatchesLocalPath ? (
+          <DispatchChatsSection
+            onNavigate={onNavigate}
+            chatFirstMode={chatFirstMode}
+            chatFirstEmbedded={chatFirstEmbedded}
+          />
+        ) : null}
+      </li>
+    );
+  };
+
+  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 currentAppId="dispatch" />
+    </div>
+  );
+  const sidebarFooterActions = (
+    <SidebarFooterActions
+      collapsed={collapsed}
+      feedback={feedbackButton}
+      search={searchButton}
+      collapse={collapseButton}
+    />
+  );
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex h-12 shrink-0 items-center border-b border-sidebar-border",
+          collapsed ? "justify-center px-0" : "px-4",
+        )}
+      >
+        <Link
+          to={dispatchNavLinkTarget("/overview")}
+          aria-label={`${DISPATCH_SIDEBAR_LABEL} overview`}
+          data-dispatch-logo
+          className={cn(
+            "flex items-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+            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 && (
+            <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>
+          )}
+        </Link>
+      </div>
+
+      {chatFirstMode ? (
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <DispatchChatsSection
+            onNavigate={onNavigate}
+            showNewChat
+            chatFirstMode
+            chatFirstEmbedded={chatFirstEmbedded}
+            collapsed={collapsed}
+            chatFirstNavigation={{
+              activeTab: chatFirstActivePrimaryTab,
+              onNewChat: onChatFirstNewChat,
+              onOpenIntegrations: () => {
+                navigate(dispatchNavLinkTarget("/admin/integrations"));
+                onNavigate?.();
+              },
+              onOpenScheduled: () => {
+                navigate(dispatchNavLinkTarget("/admin/automations"));
+                onNavigate?.();
+              },
+            }}
+            prelude={chatFirstAppsRail}
+          />
+        </div>
+      ) : null}
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col overflow-y-auto",
+          chatFirstMode && "hidden",
+        )}
+      >
+        <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",
+            )}
+          >
+            {primaryNavItems.map(renderNavItem)}
+          </ul>
+        </nav>
+
+        <div className="mt-auto shrink-0">
+          {bottomNavigation}
+          {organizationPicker}
+        </div>
+        {sidebarFooterActions}
+      </div>
+      {chatFirstMode ? (
+        <div className="mt-auto shrink-0">
+          {bottomNavigation}
+          {organizationPicker}
+          {sidebarFooterActions}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function Layout({
+  children,
+  extensions,
+  agentPageHref,
+}: {
+  children: ReactNode;
+  extensions?: DispatchExtensionConfig;
+  agentPageHref?: string;
+}) {
+  const t = useT();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const localPathname = localDispatchPath(location.pathname);
+  const [electronEmbedded] = useState(() =>
+    typeof window !== "undefined"
+      ? isElectronEmbeddedSearch(window.location.search)
+      : false,
+  );
+  const isChatRoute =
+    localPathname === "/chat" || localPathname.startsWith("/chat/");
+  const chatFirstSurfaceScope = threadIdFromPath(localPathname) ?? "new";
+  const isWorkspaceAppRoute = shouldAutoCollapseDispatchSidebar(
+    location.pathname,
+  );
+  const workspaceAppId = isWorkspaceAppRoute
+    ? workspaceAppIdFromRoute(localPathname)
+    : null;
+  const workspaceAppRouteActive = Boolean(workspaceAppId);
+  const isWorkspaceAppHostRoute =
+    isWorkspaceAppRoute &&
+    typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).get("embedded") === "1";
+  const [chatFirstPreference, setChatFirstPreference] = useState(() =>
+    readChatFirstMode(),
+  );
+  const chatFirstEmbedded =
+    typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).get("chatFirst") === "1";
+  const chatFirstMode =
+    extensions?.chatFirst === true || chatFirstPreference || chatFirstEmbedded;
+  const chatFirstHasActiveChat = chatFirstSurfaceScope !== "new";
+  useEffect(() => {
+    if (!electronEmbedded || typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    if (isElectronEmbeddedSearch(url.search)) return;
+    url.searchParams.set("electron", "1");
+    window.history.replaceState(
+      window.history.state,
+      "",
+      `${url.pathname}${url.search}${url.hash}`,
+    );
+  }, [electronEmbedded, location.pathname, location.search]);
+  const [chatFirstAppLayout, setChatFirstAppLayout] =
+    useState<ChatFirstAppLayoutPreference>(() => readChatFirstAppLayout());
+  const chatFirstAppLayoutHydratedRef = useRef(false);
+  const chatFirstAppsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    { includeAgentCards: false, includeArchived: true },
+    { enabled: chatFirstMode },
+  );
+  const chatFirstGrantedAppsQuery = useActionQuery<ChatFirstGrantedAppsResult>(
+    "list_apps",
+    {},
+    { enabled: chatFirstMode },
+  );
+  const chatFirstWorkspaceApps = useMemo(
+    () => mergeChatFirstWorkspaceApps(chatFirstAppsQuery.data),
+    [chatFirstAppsQuery.data],
+  );
+  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,
+      });
+    }
+    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[]>(
+    () =>
+      chatFirstAppRegistrations
+        .filter(
+          (app) => app.enabled && isWorkspaceAppVisibleInDefaultLaunchers(app),
+        )
+        .map((app) => ({
+          id: app.id,
+          name: app.name ?? app.id,
+        })),
+    [chatFirstAppRegistrations],
+  );
+  const openChatFirstApp = useCallback(
+    (app: ChatFirstAppItem) => {
+      if (isDispatchWorkspaceAppId(app.id)) return;
+      const registration = chatFirstAppRegistrations.find(
+        (candidate) => candidate.id.toLowerCase() === app.id.toLowerCase(),
+      );
+      const directHref =
+        registration &&
+        !isWorkspaceSsoApp(registration) &&
+        isPathMountedWorkspaceApp(registration)
+          ? workspaceAppDirectHref(registration, "/")
+          : null;
+      if (directHref) {
+        navigateToWorkspaceApp(directHref);
+        return;
+      }
+      navigate(dispatchNavLinkTarget(workspaceAppRoute(app.id)));
+    },
+    [chatFirstAppRegistrations, navigate],
+  );
+  const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
+  const [chatFirstPane, setChatFirstPane] =
+    useState<DispatchChatFirstPane | null>(null);
+  const [chatFirstNotice, setChatFirstNotice] = useState<string | null>(null);
+  const chatFirstSessionWatch = useChatFirstSessionWatch();
+  const chatFirstSurfaceTabs = useChatFirstSurfaceTabs(chatFirstSurfaceScope);
+  const chatFirstSurfaceTabsStore = getChatFirstSurfaceTabsStore(
+    chatFirstSurfaceScope,
+  );
+  const chatFirstAgentsQuery = useActionQuery<SearchAgentThreadsResult>(
+    "search-agent-threads",
+    { sourceId: "current", limit: 12 },
+    {
+      enabled:
+        chatFirstMode &&
+        isChatRoute &&
+        chatFirstSurfaceTabs.activeTabId?.startsWith("agents:") === true,
+    },
+  );
+  const chatFirstSurfacePanel = useChatFirstSurfacePanel(chatFirstSurfaceScope);
+  const { setOpen: setChatFirstSurfacePanelOpen } = chatFirstSurfacePanel;
+  const chatFirstSurfaceResize = useChatFirstSurfaceResize(
+    chatFirstSurfaceScope,
+  );
+  const chatFirstPaneHydratedRef = useRef(false);
+  const pendingChatFirstOpenAppRef = useRef<ChatFirstOpenAppDetail | null>(
+    null,
+  );
+  const previousChatFirstSurfaceScopeRef = useRef(chatFirstSurfaceScope);
+  const previousChatFirstSurfaceTabCountRef = useRef<number | null>(null);
+  const activeChatFirstSurfaceTab = useMemo(
+    () =>
+      chatFirstSurfaceTabs.tabs.find(
+        (tab) => tab.id === chatFirstSurfaceTabs.activeTabId,
+      ) ?? null,
+    [chatFirstSurfaceTabs],
+  );
+  const chatFirstAppTakesMain =
+    chatFirstMode &&
+    isChatRoute &&
+    activeChatFirstSurfaceTab?.kind === "app" &&
+    activeChatFirstSurfaceTab.placement === "main";
+  const chatFirstAppSelected =
+    chatFirstMode && activeChatFirstSurfaceTab?.kind === "app";
+  const chatFirstActivePrimaryTab = chatFirstAppSelected
+    ? activeChatFirstSurfaceTab?.kind === "app" &&
+      activeChatFirstSurfaceTab.appId === "dispatch"
+      ? chatFirstPrimaryTabForPath(activeChatFirstSurfaceTab.path ?? "")
+      : undefined
+    : chatFirstPrimaryTabForPath(localPathname);
+  const chatFirstActiveAppId = isWorkspaceAppRoute
+    ? (workspaceAppIdFromRoute(localPathname) ?? undefined)
+    : chatFirstAppSelected && activeChatFirstSurfaceTab?.kind === "app"
+      ? activeChatFirstSurfaceTab.appId
+      : undefined;
+  const chatFirstAgentActivities = useMemo<ChatFirstAgentActivity[]>(
+    () =>
+      (chatFirstAgentsQuery.data?.threads ?? []).map((thread) => ({
+        sessionId: thread.id,
+        title:
+          thread.title || chatFirstCopy("agentsTitle", { name: thread.id }),
+        subtitle: thread.snippet || thread.preview || chatFirstCopy("session"),
+        status: "recent",
+        ...(thread.updatedAt ? { updatedAt: thread.updatedAt } : {}),
+      })),
+    [chatFirstAgentsQuery.data, chatFirstCopy],
+  );
+  const persistChatFirstPane = useCallback(
+    (pane: DispatchChatFirstPane | null) => {
+      setChatFirstPane(pane);
+      void writeClientAppState(CHAT_FIRST_PANE_STATE_KEY, pane).catch(() => {
+        setChatFirstNotice(
+          "The app pane opened locally, but its focus could not be synced.",
+        );
+      });
+    },
+    [],
+  );
+  useEffect(() => {
+    if (!chatFirstMode || isChatRoute) return;
+    persistChatFirstPane(null);
+    closeChatFirstSessionWatch();
+    chatFirstSurfaceTabsStore.closeAll();
+  }, [
+    chatFirstMode,
+    chatFirstSurfaceTabsStore,
+    isChatRoute,
+    persistChatFirstPane,
+  ]);
+  const openChatFirstPane = useCallback(
+    (
+      pane: DispatchChatFirstPane,
+      placement: ChatFirstAppSurfacePlacement = "side",
+    ) => {
+      if (placement === "side" && !chatFirstHasActiveChat) return;
+      setSidebarCollapsed(true);
+      setChatFirstNotice(null);
+      closeChatFirstSessionWatch();
+      if (!isChatRoute) {
+        navigateWithAgentChatViewTransition(
+          navigate,
+          dispatchNavLinkTarget("/chat"),
+        );
+      }
+      const app = chatFirstAppRegistrations.find(
+        (candidate) => candidate.id === pane.appId,
+      );
+      chatFirstSurfaceTabsStore.open({
+        id: chatFirstSurfaceTabId(
+          "app",
+          `${pane.appId}:${pane.path ?? pane.view ?? "/"}`,
+        ),
+        kind: "app",
+        title: app?.name ?? pane.appId,
+        appId: pane.appId,
+        placement,
+        ...(pane.path ? { path: pane.path } : {}),
+        ...(pane.view ? { view: pane.view } : {}),
+      });
+      setChatFirstSurfacePanelOpen(true);
+      persistChatFirstPane({ ...pane, placement });
+    },
+    [
+      chatFirstAppRegistrations,
+      chatFirstSurfaceTabsStore,
+      chatFirstHasActiveChat,
+      persistChatFirstPane,
+      isChatRoute,
+      navigate,
+      setChatFirstSurfacePanelOpen,
+    ],
+  );
+  const openChatFirstSurface = useCallback(
+    (kind: ChatFirstSurfaceKind) => {
+      if (kind === "browser") {
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        chatFirstSurfaceTabsStore.open({
+          id: chatFirstSurfaceTabId("browser", "homepage"),
+          kind: "browser",
+          title: "Browser",
+          url: "https://www.google.com/",
+        });
+        return;
+      }
+      if (kind !== "agents") return;
+      persistChatFirstPane(null);
+      closeChatFirstSessionWatch();
+      chatFirstSurfaceTabsStore.open({
+        id: chatFirstSurfaceTabId("agents", "activity"),
+        kind: "agents",
+        title: "Agents",
+      });
+    },
+    [chatFirstSurfaceTabsStore, persistChatFirstPane],
+  );
+  const resolveChatFirstOpenBrowser = useCallback(
+    (detail: ChatFirstOpenBrowserDetail) => {
+      const resolution = resolveChatFirstBrowserTarget(detail);
+      if (resolution.status === "unresolved") {
+        setChatFirstNotice(
+          chatFirstBrowserResolutionMessage(resolution.reason),
+        );
+        return;
+      }
+      if (resolution.target.openExternally && typeof window !== "undefined") {
+        try {
+          // Builder's Visual Editor rejects iframe ancestors with CSP/X-Frame-
+          // Options. Prefer the real browser tab; the browser pane below is a
+          // visible fallback when popup policy blocks this non-click event.
+          if (
+            window.open(resolution.target.url, "_blank", "noopener,noreferrer")
+          ) {
+            return;
+          }
+        } catch (error) {
+          console.warn(
+            "[chat-first] external browser open failed; keeping link fallback",
+            error,
+          );
+          // Fall through to the non-iframe browser pane below.
+        }
+      }
+      persistChatFirstPane(null);
+      closeChatFirstSessionWatch();
+      setChatFirstNotice(null);
+      chatFirstSurfaceTabsStore.open({
+        id: chatFirstSurfaceTabId("browser", resolution.target.url),
+        kind: "browser",
+        title: resolution.target.title ?? "Browser",
+        url: resolution.target.url,
+      });
+    },
+    [chatFirstSurfaceTabsStore, persistChatFirstPane],
+  );
+  const resolveChatFirstOpenApp = useCallback(
+    (detail: ChatFirstOpenAppDetail) => {
+      if (chatFirstAppsQuery.isLoading || chatFirstGrantedAppsQuery.isLoading) {
+        pendingChatFirstOpenAppRef.current = detail;
+        return;
+      }
+      if (chatFirstAppsQuery.isError) {
+        pendingChatFirstOpenAppRef.current = null;
+        setChatFirstNotice(
+          "Workspace apps could not be loaded, so the requested app was not opened.",
+        );
+        return;
+      }
+
+      const resolution = resolveChatFirstAppTarget(
+        detail,
+        chatFirstAppRegistrations,
+        {
+          currentOrigin:
+            typeof window === "undefined" ? undefined : window.location.origin,
+        },
+      );
+      pendingChatFirstOpenAppRef.current = null;
+      if (resolution.status === "unresolved") {
+        setChatFirstNotice(chatFirstResolutionMessage(resolution.reason));
+        return;
+      }
+      if (isDispatchWorkspaceAppId(resolution.target.appId)) {
+        closeChatFirstSessionWatch();
+        chatFirstSurfaceTabsStore.closeAll();
+        setChatFirstSurfacePanelOpen(false);
+        persistChatFirstPane(null);
+        if (resolution.target.path) {
+          navigateWithAgentChatViewTransition(
+            navigate,
+            dispatchNavLinkTarget(resolution.target.path),
+          );
+        }
+        return;
+      }
+      openChatFirstPane(resolution.target);
+    },
+    [
+      chatFirstAppRegistrations,
+      chatFirstAppsQuery.isError,
+      chatFirstAppsQuery.isLoading,
+      chatFirstGrantedAppsQuery.isLoading,
+      chatFirstSurfaceTabsStore,
+      closeChatFirstSessionWatch,
+      openChatFirstPane,
+      navigate,
+      persistChatFirstPane,
+      setChatFirstSurfacePanelOpen,
+    ],
+  );
+  const chatHomeHandoffActive = useAgentChatHomeHandoff({
+    storageKey: "dispatch",
+    activePath: localPathname,
+    enabled: !isChatRoute,
+  });
+  const chatHandoffLinkOptions = {
+    storageKey: "dispatch",
+    isChatPath: (pathname: string) =>
+      pathname === "/chat" || pathname.startsWith("/chat/"),
+    requireActiveHandoff: true,
+  };
+  useAgentChatHomeHandoffLinks(chatHandoffLinkOptions);
+
+  useEffect(() => {
+    const handleModeChange = (event: Event) => {
+      const enabled = (event as CustomEvent<{ enabled?: unknown }>).detail
+        ?.enabled;
+      setChatFirstPreference(enabled === true);
+    };
+    window.addEventListener(CHAT_FIRST_MODE_CHANGED_EVENT, handleModeChange);
+    return () =>
+      window.removeEventListener(
+        CHAT_FIRST_MODE_CHANGED_EVENT,
+        handleModeChange,
+      );
+  }, []);
+
+  useEffect(() => {
+    if (
+      !chatFirstMode ||
+      !isChatRoute ||
+      chatFirstAppLayoutHydratedRef.current
+    ) {
+      return;
+    }
+    chatFirstAppLayoutHydratedRef.current = true;
+    void readClientAppState<unknown>("chat-first-app-layout")
+      .then((value) => {
+        if (!value || typeof value !== "object") return;
+        const candidate = value as Partial<ChatFirstAppLayoutPreference>;
+        const ids = (input: unknown) =>
+          Array.isArray(input)
+            ? input.filter(
+                (id): id is string =>
+                  typeof id === "string" && id.trim().length > 0,
+              )
+            : [];
+        setChatFirstAppLayout({
+          pinnedIds: [...new Set(ids(candidate.pinnedIds))],
+          orderedIds: [...new Set(ids(candidate.orderedIds))],
+        });
+      })
+      .catch(() => {
+        // Device-local layout remains the fallback when workspace state is unavailable.
+      });
+  }, [chatFirstMode, isChatRoute]);
+
+  const persistChatFirstAppLayout = useCallback(
+    (layout: ChatFirstAppLayoutPreference) => {
+      setChatFirstAppLayout(layout);
+      void writeClientAppState("chat-first-app-layout", layout).catch(() => {
+        setChatFirstNotice(
+          "App order changed locally, but workspace state could not be synced.",
+        );
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!chatFirstMode) {
+      setChatFirstPane(null);
+      closeChatFirstSessionWatch();
+      chatFirstSurfaceTabsStore.closeAll();
+      setChatFirstNotice(null);
+      pendingChatFirstOpenAppRef.current = null;
+      chatFirstPaneHydratedRef.current = false;
+      return;
+    }
+    const unsubscribeApp = subscribeChatFirstOpenApp(resolveChatFirstOpenApp);
+    const unsubscribeBrowser = subscribeChatFirstOpenBrowser(
+      resolveChatFirstOpenBrowser,
+    );
+    return () => {
+      unsubscribeApp();
+      unsubscribeBrowser();
+    };
+  }, [
+    chatFirstMode,
+    isChatRoute,
+    chatFirstSurfaceTabsStore,
+    resolveChatFirstOpenApp,
+    resolveChatFirstOpenBrowser,
+  ]);
+
+  useEffect(() => {
+    if (
+      !chatFirstMode ||
+      !isChatRoute ||
+      chatFirstPaneHydratedRef.current ||
+      chatFirstAppsQuery.isLoading ||
+      chatFirstAppsQuery.isError
+    ) {
+      return;
+    }
+    chatFirstPaneHydratedRef.current = true;
+    if (chatFirstPane) return;
+    let active = true;
+    void readClientAppState<unknown>(CHAT_FIRST_PANE_STATE_KEY)
+      .then((value) => {
+        if (!active) return;
+        const persisted = persistedChatFirstPane(value);
+        if (!persisted) return;
+        const resolution = resolveChatFirstAppTarget(
+          {
+            app: persisted.appId,
+            path: persisted.path,
+            view: persisted.view,
+          },
+          chatFirstAppRegistrations,
+          {
+            currentOrigin:
+              typeof window === "undefined"
+                ? undefined
+                : window.location.origin,
+          },
+        );
+        if (resolution.status === "ready") {
+          openChatFirstPane(resolution.target, persisted.placement);
+        }
+      })
+      .catch(() => {
+        if (active) {
+          setChatFirstNotice(
+            "The last app pane could not be restored from workspace state.",
+          );
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [
+    chatFirstAppsQuery.isError,
+    chatFirstAppsQuery.isLoading,
+    chatFirstAppRegistrations,
+    chatFirstMode,
+    chatFirstPane,
+    isChatRoute,
+    openChatFirstPane,
+  ]);
+
+  useEffect(() => {
+    if (previousChatFirstSurfaceScopeRef.current === chatFirstSurfaceScope) {
+      return;
+    }
+    previousChatFirstSurfaceScopeRef.current = chatFirstSurfaceScope;
+    persistChatFirstPane(null);
+    setChatFirstNotice(null);
+    pendingChatFirstOpenAppRef.current = null;
+    chatFirstPaneHydratedRef.current = true;
+    chatFirstSurfaceTabsStore.closeAll();
+    setChatFirstSurfacePanelOpen(false);
+    closeChatFirstSessionWatch();
+  }, [
+    chatFirstSurfaceScope,
+    chatFirstSurfaceTabsStore,
+    persistChatFirstPane,
+    setChatFirstSurfacePanelOpen,
+  ]);
+
+  useEffect(() => {
+    const tabCount = chatFirstSurfaceTabs.tabs.length;
+    const previousTabCount = previousChatFirstSurfaceTabCountRef.current;
+    if (!chatFirstMode || !chatFirstHasActiveChat) {
+      setChatFirstSurfacePanelOpen(false);
+    } else if (
+      tabCount > 0 &&
+      (previousTabCount === null || previousTabCount === 0)
+    ) {
+      setChatFirstSurfacePanelOpen(true);
+    } else if (
+      tabCount === 0 &&
+      previousTabCount !== null &&
+      previousTabCount > 0
+    ) {
+      setChatFirstSurfacePanelOpen(false);
+    }
+    previousChatFirstSurfaceTabCountRef.current = tabCount;
+  }, [
+    chatFirstMode,
+    chatFirstHasActiveChat,
+    setChatFirstSurfacePanelOpen,
+    chatFirstSurfaceTabs.tabs.length,
+    isChatRoute,
+  ]);
+
+  useEffect(() => {
+    const activeTab = activeChatFirstSurfaceTab;
+    if (
+      activeTab?.kind === "side-chat" &&
+      activeTab.session &&
+      !chatFirstSessionWatch.target
+    ) {
+      emitChatFirstSessionWatch(activeTab.session);
+    }
+  }, [activeChatFirstSurfaceTab, chatFirstSessionWatch.target]);
+
+  useEffect(() => {
+    const pending = pendingChatFirstOpenAppRef.current;
+    if (
+      !pending ||
+      chatFirstAppsQuery.isLoading ||
+      chatFirstGrantedAppsQuery.isLoading
+    )
+      return;
+    resolveChatFirstOpenApp(pending);
+  }, [
+    chatFirstAppsQuery.data,
+    chatFirstAppsQuery.isError,
+    chatFirstAppsQuery.isLoading,
+    chatFirstGrantedAppsQuery.data,
+    chatFirstGrantedAppsQuery.isLoading,
+    resolveChatFirstOpenApp,
+  ]);
+
+  useEffect(() => {
+    const target = chatFirstSessionWatch.target;
+    if (!target || !chatFirstMode || !isChatRoute) return;
+    setChatFirstPane(null);
+    chatFirstSurfaceTabsStore.open({
+      id: chatFirstSurfaceTabId("side-chat", target.sessionId),
+      kind: "side-chat",
+      title: target.title ? `Watch · ${target.title}` : "Watched session",
+      session: target,
+    });
+  }, [
+    chatFirstMode,
+    chatFirstSessionWatch.target,
+    chatFirstSurfaceTabsStore,
+    isChatRoute,
+  ]);
+
+  useEffect(() => {
+    if (!isWorkspaceAppRoute) return;
+    setSidebarCollapsed(true);
+  }, [isWorkspaceAppRoute, localPathname]);
+
+  useEffect(() => {
+    if (!workspaceAppRouteActive && !chatFirstAppTakesMain) return;
+
+    const handleWorkspaceAppMessage = (event: MessageEvent) => {
+      if (event.data?.type !== "agentNative.toggleSidebar") return;
+      const frame = [
+        ...document.querySelectorAll<HTMLIFrameElement>(
+          "[data-dispatch-workspace-app-frame]",
+        ),
+      ].find(
+        (candidate) =>
+          candidate
+            .closest("[data-chat-first-surface-content]")
+            ?.getAttribute("aria-hidden") !== "true",
+      );
+      if (!(frame instanceof HTMLIFrameElement)) return;
+      if (event.source !== frame.contentWindow) return;
+
+      const open = event.data.data?.open;
+      if (open === true) {
+        window.dispatchEvent(new Event("agent-panel:open"));
+      } else if (open === false) {
+        window.dispatchEvent(new Event("agent-panel:close"));
+      } else {
+        window.dispatchEvent(new Event("agent-panel:toggle"));
+      }
+    };
+
+    window.addEventListener("message", handleWorkspaceAppMessage);
+    return () =>
+      window.removeEventListener("message", handleWorkspaceAppMessage);
+  }, [chatFirstAppTakesMain, workspaceAppRouteActive]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || isWorkspaceAppHostRoute) return;
+    try {
+      window.localStorage.setItem(
+        SIDEBAR_COLLAPSE_KEY,
+        sidebarCollapsed ? "1" : "0",
+      );
+    } catch {
+      // Ignore storage failures; the in-memory preference still works.
+    }
+  }, [isWorkspaceAppHostRoute, sidebarCollapsed]);
+
+  const activateChatFirstSurfaceTab = useCallback(
+    (tab: (typeof chatFirstSurfaceTabs.tabs)[number]) => {
+      chatFirstSurfaceTabsStore.activate(tab.id);
+      if (tab.kind === "app" && tab.appId) {
+        closeChatFirstSessionWatch();
+        persistChatFirstPane({
+          appId: tab.appId,
+          placement: tab.placement,
+          ...(tab.path ? { path: tab.path } : {}),
+          ...(tab.view ? { view: tab.view } : {}),
+        });
+        return;
+      }
+      if (tab.kind === "browser" && tab.url) {
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+        return;
+      }
+      if (tab.kind === "side-chat" && tab.session) {
+        persistChatFirstPane(null);
+        emitChatFirstSessionWatch(tab.session);
+        return;
+      }
+      if (tab.kind === "agents") {
+        persistChatFirstPane(null);
+        closeChatFirstSessionWatch();
+      }
+    },
+    [
+      chatFirstSurfaceTabs.tabs,
+      chatFirstSurfaceTabsStore,
+      persistChatFirstPane,
+    ],
+  );
+
+  const closeChatFirstSurfaceTab = useCallback(
+    (tab: (typeof chatFirstSurfaceTabs.tabs)[number]) => {
+      const isActive = chatFirstSurfaceTabs.activeTabId === tab.id;
+      if (tab.kind === "app" && isActive) persistChatFirstPane(null);
+      if (tab.kind === "side-chat" && isActive) {
+        closeChatFirstSessionWatch();
+      }
+      chatFirstSurfaceTabsStore.close(tab.id);
+    },
+    [chatFirstSurfaceTabs, chatFirstSurfaceTabsStore, persistChatFirstPane],
+  );
+
+  const closeAllChatFirstSurfaceTabs = useCallback(() => {
+    persistChatFirstPane(null);
+    closeChatFirstSessionWatch();
+    chatFirstSurfaceTabsStore.closeAll();
+  }, [chatFirstSurfaceTabsStore, persistChatFirstPane]);
+
+  const renderChatFirstWatchChat = useCallback(
+    (target: ChatFirstSessionReference) => (
+      <AgentChatSurface
+        mode="page"
+        className="h-full min-h-0 w-full"
+        defaultMode="chat"
+        storageKey={`dispatch-session-watch:${target.sessionId}`}
+        restoreActiveThread={false}
+        threadUrlSync={{
+          routeThreadId: target.sessionId,
+          getPath: chatThreadPath,
+          navigate: () => undefined,
+        }}
+        showHeader={false}
+        showTabBar={false}
+        showPageNewChatButton={false}
+        chatOnly
+        dynamicSuggestions={false}
+        suggestions={[]}
+        suppressInlineOpenApp={chatFirstMode}
+        emptyStateDisplay="hidden"
+        composerPlaceholder={t(
+          "dispatch.pages.chatFirstSessionMessagePlaceholder",
+        )}
+      />
+    ),
+    [chatFirstMode, t],
+  );
+
+  const renderChatFirstSurfaceTab = useCallback(
+    (tab: ChatFirstSurfaceTab) => {
+      if (tab.kind === "app") {
+        const registration = tab.appId
+          ? (chatFirstAppRegistrations.find(
+              (candidate) => candidate.id === tab.appId,
+            ) ?? null)
+          : null;
+        if (!registration) {
+          return (
+            <ChatFirstAppPane
+              app={null}
+              status={chatFirstAppsQuery.isLoading ? "loading" : "unresolved"}
+              renderEmbed={() => null}
+              copy={chatFirstCopy}
+            />
+          );
+        }
+        const embedPath = tab.path ?? registration.path ?? "/";
+        if (!embedPath.startsWith("/")) {
+          return (
+            <ChatFirstAppPane
+              app={{
+                id: registration.id,
+                name: registration.name ?? registration.id,
+              }}
+              status="error"
+              errorMessage={chatFirstCopy("appUnavailable")}
+              renderEmbed={() => null}
+              copy={chatFirstCopy}
+            />
+          );
+        }
+        return (
+          <WorkspaceAppFrame
+            app={{
+              id: registration.id,
+              name: registration.name ?? registration.id,
+              path: registration.path,
+              url: registration.url,
+            }}
+            embedPath={embedPath}
+            chatSidebar
+            copy={chatFirstCopy}
+          />
+        );
+      }
+      if (tab.kind === "browser" && tab.url) {
+        return (
+          <ChatFirstBrowserPane
+            url={tab.url}
+            title={tab.title}
+            onClose={() => closeChatFirstSurfaceTab(tab)}
+            renderEmbed={({ url, title, key }: ChatFirstEmbedTarget) => (
+              <iframe
+                key={key}
+                src={url}
+                title={title ?? chatFirstCopy("browserPage")}
+                referrerPolicy="no-referrer"
+                allow="clipboard-read; clipboard-write"
+                className="h-full w-full border-0 bg-background"
+              />
+            )}
+            copy={chatFirstCopy}
+          />
+        );
+      }
+      if (tab.kind === "side-chat") {
+        const target =
+          tab.session ??
+          (tab.id === chatFirstSurfaceTabs.activeTabId
+            ? chatFirstSessionWatch.target
+            : null);
+        return target ? (
+          <ChatFirstSessionWatchPane
+            target={target}
+            onClose={() => closeChatFirstSurfaceTab(tab)}
+            renderChat={renderChatFirstWatchChat}
+            copy={chatFirstCopy}
+          />
+        ) : null;
+      }
+      if (tab.kind === "agents") {
+        return (
+          <ChatFirstAgentsPane
+            activities={chatFirstAgentActivities}
+            loading={chatFirstAgentsQuery.isLoading}
+            error={
+              chatFirstAgentsQuery.isError
+                ? chatFirstAgentsQuery.error.message
+                : null
+            }
+            onRefresh={() => void chatFirstAgentsQuery.refetch()}
+            onWatch={(activity) =>
+              emitChatFirstSessionWatch({
+                sessionId: activity.sessionId,
+                title: activity.title,
+                kind: "agent-chat",
+                ...(activity.goalId ? { goalId: activity.goalId } : {}),
+              })
+            }
+            copy={chatFirstCopy}
+          />
+        );
+      }
+      return null;
+    },
+    [
+      chatFirstAgentActivities,
+      chatFirstAgentsQuery.error,
+      chatFirstAgentsQuery.isError,
+      chatFirstAgentsQuery.isLoading,
+      chatFirstAppsQuery.isLoading,
+      chatFirstCopy,
+      chatFirstSessionWatch.target,
+      chatFirstSurfaceTabs.activeTabId,
+      chatFirstAppRegistrations,
+      closeChatFirstSurfaceTab,
+      renderChatFirstWatchChat,
+    ],
+  );
+
+  if (CHROMELESS_PATHS.some((path) => localPathname === path)) {
+    return <>{children}</>;
+  }
+
+  if (electronEmbedded) {
+    return (
+      <DispatchExtensionsContext.Provider value={extensions}>
+        <HeaderActionsProvider>
+          <div
+            data-dispatch-electron-control-plane
+            className="flex h-screen w-full overflow-hidden bg-background"
+          >
+            <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+              <Header showAgentToggle={false} />
+              <InvitationBanner />
+              <main className="flex-1 overflow-y-auto">
+                <div className="mx-auto max-w-7xl space-y-10 px-4 py-6 sm:px-6">
+                  {children}
+                </div>
+              </main>
+            </div>
+          </div>
+        </HeaderActionsProvider>
+      </DispatchExtensionsContext.Provider>
+    );
+  }
+
+  if (isWorkspaceAppHostRoute) {
+    return (
+      <DispatchExtensionsContext.Provider value={extensions}>
+        <HeaderActionsProvider>
+          <div
+            data-dispatch-workspace-app-chrome-less
+            className="h-screen w-full overflow-hidden bg-background"
+          >
+            {children}
+          </div>
+        </HeaderActionsProvider>
+      </DispatchExtensionsContext.Provider>
+    );
+  }
+
+  const showHeader = !isChatRoute && !pageOwnsToolbar(localPathname);
+  function openAskAgentFullscreen() {
+    focusAgentChat();
+    navigateWithAgentChatViewTransition(
+      navigate,
+      dispatchNavLinkTarget("/chat"),
+    );
+  }
+  const sidebarSuggestions = [
+    t("dispatch.sidebar.suggestionBuildApp"),
+    t("dispatch.sidebar.suggestionRouteSlack"),
+    t("dispatch.sidebar.suggestionGrantKey"),
+  ];
+  const appContent = (
+    <div className="relative flex h-full min-w-0 flex-1 flex-col overflow-hidden">
+      {showHeader ? <Header onOpenMobile={() => setMobileOpen(true)} /> : null}
+      <InvitationBanner />
+      {isChatRoute && chatFirstMode && chatFirstHasActiveChat ? (
+        <ChatFirstSurfacePanelToggle
+          open={chatFirstSurfacePanel.open}
+          onToggle={chatFirstSurfacePanel.toggle}
+          className="absolute right-3 top-2 z-[4]"
+        />
+      ) : null}
+      {isChatRoute && chatFirstMode && chatFirstNotice ? (
+        <div
+          className="dispatch-chat-first-notice"
+          role="status"
+          aria-live="polite"
+        >
+          <span>{chatFirstNotice}</span>
+          <button
+            type="button"
+            onClick={() => setChatFirstNotice(null)}
+            aria-label="Dismiss app notice"
+          >
+            Dismiss
+          </button>
+        </div>
+      ) : null}
+      <main
+        className={cn(
+          "flex-1",
+          isChatRoute || isWorkspaceAppRoute
+            ? "min-h-0 overflow-hidden"
+            : "overflow-y-auto",
+        )}
+      >
+        {showHeader ? (
+          <div className="mx-auto max-w-7xl space-y-10 px-4 py-6 sm:px-6">
+            {children}
+          </div>
+        ) : (
+          children
+        )}
+      </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}
+        apps={chatFirstAppItems}
+        onOpenApp={(app) => openChatFirstPane({ appId: app.id }, "side")}
+        renderAppIcon={(app) => (
+          <AppIcon
+            id={app.id}
+            name={app.name}
+            size="sm"
+            className="size-7 rounded-lg"
+          />
+        )}
+        copy={chatFirstCopy}
+      />
+    );
+  const chatFirstSurfaceContent =
+    chatFirstSurfaceTabs.tabs.length > 0 ? (
+      <ChatFirstSurfaceContent
+        tabs={chatFirstSurfaceTabs.tabs}
+        activeTabId={chatFirstSurfaceTabs.activeTabId}
+        renderTab={renderChatFirstSurfaceTab}
+      />
+    ) : null;
+  const workspaceAppChatName =
+    (workspaceAppId
+      ? chatFirstAppRegistrations.find(
+          (app) => app.id.toLowerCase() === workspaceAppId.toLowerCase(),
+        )?.name
+      : null) ??
+    workspaceAppId ??
+    "Workspace app";
+  const workspaceAppContent =
+    workspaceAppRouteActive && workspaceAppId ? (
+      <WorkspaceAppChatRail
+        appId={workspaceAppId}
+        appName={workspaceAppChatName}
+        agentPageHref={agentPageHref}
+        onFullscreenRequest={openAskAgentFullscreen}
+      >
+        <WorkspaceAppKeepAlive activeAppId={workspaceAppId} />
+      </WorkspaceAppChatRail>
+    ) : (
+      <WorkspaceAppKeepAlive
+        activeAppId={workspaceAppRouteActive ? workspaceAppId : null}
+      />
+    );
+  const content = isChatRoute ? (
+    <div
+      className={cn(
+        "agent-layout-main-surface flex h-full min-w-0 flex-1 overflow-hidden",
+        chatFirstMode && "dispatch-chat-first-surface",
+      )}
+    >
+      {chatFirstAppTakesMain ? (
+        <div
+          className="flex min-w-0 flex-1 flex-col overflow-hidden"
+          data-dispatch-chat-first-main-app
+        >
+          {chatFirstSurfaceContent}
+        </div>
+      ) : (
+        <>
+          {appContent}
+          {chatFirstMode &&
+          chatFirstHasActiveChat &&
+          chatFirstSurfacePanel.open ? (
+            <ChatFirstSurfacePanel
+              width={chatFirstSurfaceResize.width}
+              onResizePointerDown={chatFirstSurfaceResize.onPointerDown}
+              copy={chatFirstCopy}
+            >
+              {chatFirstSurfaceTabsBar}
+              {chatFirstSurfaceContent}
+            </ChatFirstSurfacePanel>
+          ) : null}
+        </>
+      )}
+    </div>
+  ) : workspaceAppRouteActive ? null : isWorkspaceAppRoute ? (
+    appContent
+  ) : (
+    <AgentSidebar
+      position="right"
+      defaultOpen={false}
+      agentPageHref={agentPageHref}
+      chatViewTransition
+      storageKey="dispatch"
+      openOnChatRunning={chatHomeHandoffActive}
+      onFullscreenRequest={openAskAgentFullscreen}
+      emptyStateText={t("dispatch.sidebar.emptyAgentText")}
+      suggestions={sidebarSuggestions}
+    >
+      {appContent}
+    </AgentSidebar>
+  );
+
+  return (
+    <DispatchExtensionsContext.Provider value={extensions}>
+      <HeaderActionsProvider>
+        <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background">
+          <aside
+            data-collapsed={sidebarCollapsed ? "true" : "false"}
+            className={cn(
+              "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",
+            )}
+          >
+            <NavContent
+              extensions={extensions}
+              chatFirstMode={chatFirstMode}
+              chatFirstEmbedded={chatFirstEmbedded}
+              collapsed={sidebarCollapsed}
+              chatFirstAppLayout={chatFirstAppLayout}
+              onChatFirstAppLayoutChange={persistChatFirstAppLayout}
+              chatFirstApps={chatFirstAppItems}
+              chatFirstAppsLoading={chatFirstAppsQuery.isLoading}
+              chatFirstAppsError={
+                chatFirstAppsQuery.isError
+                  ? chatFirstCopy("appsLoadError")
+                  : null
+              }
+              chatFirstActiveAppId={chatFirstActiveAppId}
+              chatFirstActivePrimaryTab={chatFirstActivePrimaryTab}
+              onChatFirstNewChat={() => {
+                closeChatFirstSessionWatch();
+                chatFirstSurfaceTabsStore.closeAll();
+                setChatFirstSurfacePanelOpen(false);
+              }}
+              onChatFirstAppOpen={(app) => {
+                if (isDispatchWorkspaceAppId(app.id)) return;
+                setSidebarCollapsed(true);
+                openChatFirstApp(app);
+              }}
+              onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
+              collapsible
+              onCollapsedChange={setSidebarCollapsed}
+            />
+          </aside>
+
+          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+            <SheetContent
+              side="left"
+              className="w-72 bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            >
+              <SheetTitle className="sr-only">
+                {t("dispatch.nav.navigation")}
+              </SheetTitle>
+              <SheetDescription className="sr-only">
+                {t("dispatch.nav.navigationDescription")}
+              </SheetDescription>
+              <div className="flex h-full w-full flex-col">
+                <NavContent
+                  extensions={extensions}
+                  chatFirstMode={chatFirstMode}
+                  chatFirstEmbedded={chatFirstEmbedded}
+                  collapsed={false}
+                  chatFirstAppLayout={chatFirstAppLayout}
+                  onChatFirstAppLayoutChange={persistChatFirstAppLayout}
+                  chatFirstApps={chatFirstAppItems}
+                  chatFirstAppsLoading={chatFirstAppsQuery.isLoading}
+                  chatFirstAppsError={
+                    chatFirstAppsQuery.isError
+                      ? chatFirstCopy("appsLoadError")
+                      : null
+                  }
+                  chatFirstActiveAppId={chatFirstActiveAppId}
+                  chatFirstActivePrimaryTab={chatFirstActivePrimaryTab}
+                  onChatFirstNewChat={() => {
+                    closeChatFirstSessionWatch();
+                    chatFirstSurfaceTabsStore.closeAll();
+                    setChatFirstSurfacePanelOpen(false);
+                  }}
+                  onChatFirstAppOpen={openChatFirstApp}
+                  onChatFirstAppsRetry={() => void chatFirstAppsQuery.refetch()}
+                  onNavigate={() => setMobileOpen(false)}
+                />
+              </div>
+            </SheetContent>
+          </Sheet>
+
+          <div className="relative min-w-0 flex-1 overflow-hidden">
+            {content}
+            {workspaceAppContent}
+          </div>
+        </div>
+      </HeaderActionsProvider>
+    </DispatchExtensionsContext.Provider>
+  );
+}