tmux-ide 2.9.0-beta.21 → 2.9.0-beta.26

package/packages/daemon/src/tui/mirror/runtime/application-machine-sidebar.tsx

@@ -1,3 +1,4 @@
+import type { TmuxServerDescriptor, TmuxServerScope } from "@tmux-ide/contracts";
 import { fleetHostColor, summarizeFleetActivity } from "./fleet-presentation.ts";
 import { TuiButton } from "../ui/button.tsx";
 /* @jsxImportSource @opentui/solid */
@@ -24,6 +25,7 @@ import { Surface } from "../ui/surface.tsx";
 import { useKeyboardRoute } from "../ui/keyboard-router.tsx";
 
 export interface ApplicationMachineAgent {
+  readonly server?: TmuxServerScope;
   readonly id: string;
   readonly name: string;
   readonly sessionName: string;
@@ -41,8 +43,11 @@ export interface ApplicationMachineGroup {
   readonly id: string;
   readonly label: string;
   readonly state: "ready" | "connecting" | "disconnected";
+  readonly servers?: readonly TmuxServerDescriptor[];
   readonly sessions: readonly {
     readonly id: string;
+    readonly server?: TmuxServerScope;
+    readonly serverLabel?: string;
     readonly name: string;
     readonly paneCount: number;
     readonly disabled?: boolean;
@@ -56,8 +61,15 @@ export interface ApplicationMachineSidebarModel {
   readonly onCollapse?: (key: string, enabled: boolean) => void;
   readonly activeMachineId: Accessor<string | null>;
   readonly activeSessionName: Accessor<string | null>;
+  readonly activeSessionKey?: Accessor<string | null>;
   readonly activePaneId?: Accessor<string | null>;
-  readonly onOpen: (machineId: string, sessionName: string, source: "keyboard" | "mouse") => void;
+  readonly onOpen: (
+    machineId: string,
+    sessionName: string,
+    source: "keyboard" | "mouse",
+    sessionKey?: string,
+  ) => void;
+  readonly onSelectServer?: (machineId: string, server: TmuxServerScope) => void;
   readonly onSelectMachine: (machineId: string, source: "keyboard" | "mouse") => void;
   readonly onOpenAgent?: (
     machineId: string,
@@ -92,6 +104,8 @@ type Row = {
   session?: ApplicationMachineGroup["sessions"][number];
   agent?: ApplicationMachineAgent;
   agentHeading?: boolean;
+  serverHeading?: string;
+  server?: TmuxServerDescriptor;
 };
 /** Pure machine navigation. All connection and session authority stays with the caller. */
 export function ApplicationMachineSidebar(props: {
@@ -145,9 +159,18 @@ export function ApplicationMachineSidebar(props: {
       ? row.group.state === "ready" &&
         !row.agent.disabled &&
         row.agent.sessionName === props.model.activeSessionName() &&
+        (!props.model.activeSessionKey ||
+          row.group.sessions.some(
+            (session) =>
+              session.id === props.model.activeSessionKey?.() &&
+              session.server?.serverId === row.agent?.server?.serverId &&
+              session.server?.generation === row.agent?.server?.generation,
+          )) &&
         row.agent.paneId !== null &&
         row.agent.paneId === props.model.activePaneId?.()
-      : row.session?.name === props.model.activeSessionName());
+      : props.model.activeSessionKey
+        ? row.session?.id === props.model.activeSessionKey()
+        : row.session?.name === props.model.activeSessionName());
   const preferenceKey = (group: ApplicationMachineGroup) => group.environmentId ?? group.id;
   const rows = createMemo<readonly Row[]>(() =>
     props.model.groups().flatMap((group) => [
@@ -158,13 +181,34 @@ export function ApplicationMachineSidebar(props: {
             !collapsed().has(preferenceKey(group)) ||
             props.model.favorites?.().includes(session.id) ||
             (group.id === props.model.activeMachineId() &&
-              session.name === props.model.activeSessionName()),
+              (props.model.activeSessionKey
+                ? session.id === props.model.activeSessionKey()
+                : session.name === props.model.activeSessionName())),
         )
-        .map((session) => ({
+        .map((session, index, sessions) => ({
+          serverHeading:
+            (group.servers?.length ??
+              new Set(group.sessions.map((row) => row.server?.serverId)).size) > 1 &&
+            session.server &&
+            (index === 0 || sessions[index - 1]?.server?.serverId !== session.server.serverId)
+              ? `${session.serverLabel ?? "Server"} · ${session.server.serverId.slice(-6)}`
+              : undefined,
           key: JSON.stringify([group.id, "session", session.id]),
           group,
           session,
         })),
+      ...(collapsed().has(preferenceKey(group))
+        ? []
+        : (group.servers ?? [])
+            .filter(
+              (server) =>
+                !group.sessions.some((session) => session.server?.serverId === server.serverId),
+            )
+            .map((server) => ({
+              key: JSON.stringify([group.id, "server", server.serverId]),
+              group,
+              server,
+            }))),
       ...(!collapsed().has(preferenceKey(group))
         ? (group.agents ?? []).map((agent, index) => ({
             key: JSON.stringify([group.id, "agent", agent.id]),
@@ -193,7 +237,11 @@ export function ApplicationMachineSidebar(props: {
   const activity = (row: Row) =>
     summarizeFleetActivity(
       (row.group.agents ?? []).filter(
-        (agent) => !row.session || agent.sessionName === row.session.name,
+        (agent) =>
+          !row.session ||
+          (agent.sessionName === row.session.name &&
+            agent.server?.serverId === row.session.server?.serverId &&
+            agent.server?.generation === row.session.server?.generation),
       ),
       row.group.state === "ready" && row.group.agentsAvailable !== false && !row.session?.disabled,
     );
@@ -229,6 +277,14 @@ export function ApplicationMachineSidebar(props: {
     setSelectedKey(row.key);
     setLocalFocused(true);
     props.model.onFocus?.();
+    if (row.server) {
+      if (row.server.state === "online")
+        props.model.onSelectServer?.(row.group.id, {
+          serverId: row.server.serverId,
+          generation: row.server.generation,
+        });
+      return;
+    }
     if (row.agent) {
       if (
         row.group.state === "ready" &&
@@ -242,7 +298,7 @@ export function ApplicationMachineSidebar(props: {
       }
     } else if (row.session) {
       if (row.group.state === "ready" && !row.session.disabled)
-        props.model.onOpen(row.group.id, row.session.name, source);
+        props.model.onOpen(row.group.id, row.session.name, source, row.session.id);
     } else if (
       row.group.state !== "ready" ||
       (row.group.sessions.length === 0 && !row.group.agents?.length)
@@ -252,7 +308,8 @@ export function ApplicationMachineSidebar(props: {
   };
   const revealFocusedRow = () => {
     if (!focused() || !scroll) return;
-    const rowHeight = (row: Row) => (row.agent ? (row.agentHeading ? 3 : 2) : 1);
+    const rowHeight = (row: Row) =>
+      row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1;
     const y = rows()
       .slice(0, index())
       .reduce((sum, row) => sum + rowHeight(row), 0);
@@ -457,6 +514,12 @@ export function ApplicationMachineSidebar(props: {
               get agent() {
                 return current().agent;
               },
+              get server() {
+                return current().server;
+              },
+              get serverHeading() {
+                return current().serverHeading;
+              },
               get agentHeading() {
                 return current().agentHeading;
               },
@@ -464,10 +527,23 @@ export function ApplicationMachineSidebar(props: {
             return (
               <box
                 width={Math.max(1, props.width - 1)}
-                height={row.agent ? (row.agentHeading ? 3 : 2) : 1}
+                height={row.agent ? (row.agentHeading ? 3 : 2) : row.serverHeading ? 2 : 1}
                 flexShrink={0}
                 flexDirection="column"
               >
+                <Show when={row.serverHeading}>
+                  <NavigationRow
+                    theme={props.theme}
+                    width={Math.max(1, props.width - 1)}
+                    id={`server:${row.group.id}:${row.session?.server?.serverId}`}
+                    label={row.serverHeading ?? "Server"}
+                    marker=" ▾"
+                    onActivate={() => {
+                      if (row.session?.server)
+                        props.model.onSelectServer?.(row.group.id, row.session.server);
+                    }}
+                  />
+                </Show>
                 <Show when={row.agentHeading}>
                   <text height={1} fg={props.theme.roles.text.secondary}>
                     {" "}
@@ -480,43 +556,51 @@ export function ApplicationMachineSidebar(props: {
                   width={Math.max(1, props.width - 1)}
                   labelColor={!row.agent && !row.session ? fleetHostColor(row.group) : undefined}
                   label={
-                    row.agent
-                      ? row.agent.name
-                      : row.session
-                        ? friendlySessionLabel(row.session.name)
-                        : row.group.label
+                    row.server
+                      ? `  ${row.server.label} · ${row.server.serverId.slice(-6)}`
+                      : row.agent
+                        ? row.agent.name
+                        : row.session
+                          ? friendlySessionLabel(row.session.name)
+                          : row.group.label
                   }
                   marker={
-                    row.agent
-                      ? active(row)
-                        ? row.agent.attention
-                          ? "›!"
-                          : "›"
-                        : row.agent.attention
-                          ? "!"
-                          : "•"
-                      : row.session
-                        ? props.model.favorites?.().includes(row.session.id)
-                          ? " ★"
-                          : active(row)
-                            ? " ›"
-                            : "  "
-                        : collapsed().has(preferenceKey(row.group))
-                          ? "▸"
-                          : "▾"
+                    row.server
+                      ? "  "
+                      : row.agent
+                        ? active(row)
+                          ? row.agent.attention
+                            ? "›!"
+                            : "›"
+                          : row.agent.attention
+                            ? "!"
+                            : "•"
+                        : row.session
+                          ? props.model.favorites?.().includes(row.session.id)
+                            ? " ★"
+                            : active(row)
+                              ? " ›"
+                              : "  "
+                          : collapsed().has(preferenceKey(row.group))
+                            ? "▸"
+                            : "▾"
                   }
                   detail={
-                    row.agent
-                      ? row.group.state !== "ready" || row.agent.disabled
-                        ? "unavailable"
-                        : `[${terminalAgentStatusLabel(row.agent.activity)}]`
-                      : row.session
-                        ? row.group.state !== "ready" || row.session.disabled
+                    row.server
+                      ? row.server.state === "offline"
+                        ? "offline"
+                        : "empty"
+                      : row.agent
+                        ? row.group.state !== "ready" || row.agent.disabled
                           ? "unavailable"
-                          : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
-                        : row.group.agents?.length && row.group.state === "ready"
-                          ? activity(row).label
-                          : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`
+                          : `[${terminalAgentStatusLabel(row.agent.activity)}]`
+                        : row.session
+                          ? row.group.state !== "ready" || row.session.disabled
+                            ? "unavailable"
+                            : `${row.session.paneCount}p${row.group.agents?.length ? ` ${activity(row).label}` : ""}`
+                          : row.group.agents?.length && row.group.state === "ready"
+                            ? activity(row).label
+                            : `${connectionDetail(row.group)}${row.group.agents?.length ? " ?" : ""}`
                   }
                   selected={Boolean((row.session || row.agent) && active(row))}
                   focused={Boolean(focused() && row.key === selectedKey())}

package/packages/daemon/src/tui/mirror/runtime/application-palette-preview.tsx

@@ -53,6 +53,8 @@ export function ApplicationPalettePreview(props: {
   const identity = () =>
     JSON.stringify([
       target()?.machineId,
+      target()?.server?.serverId,
+      target()?.server?.generation,
       target()?.liveSessionId,
       target()?.daemonInstanceId,
       paneId(),
@@ -77,6 +79,7 @@ export function ApplicationPalettePreview(props: {
       fleet &&
       Boolean(fleet.liveSessionId) &&
       !fleet.disabled &&
+      (!fleet.server || fleet.server.generation === fleet.daemonInstanceId) &&
       handle?.endpoint().state === "ready" &&
       handle.read()?.instanceId === fleet.daemonInstanceId;
     owner.select(

package/packages/daemon/src/tui/mirror/runtime/application-performance-log.ts

@@ -56,10 +56,13 @@ const LIFECYCLE_RUNTIME_PHASES = new Set([
 ]);
 
 const lifecycleRecords = new Map<string, string>();
+let closing = false;
+let closePromise: Promise<void> | null = null;
 
 function serializeMark(phase: string, details?: Readonly<Record<string, unknown>>): string | null {
   if (
     !stream ||
+    closing ||
     (!tuiPerfStream &&
       !LIFECYCLE_PHASES.has(phase) &&
       !(
@@ -160,10 +163,19 @@ async function flushTuiPerfMarks(): Promise<void> {
   });
 }
 
-export async function closeTuiPerfMarks(): Promise<void> {
-  if (!stream) return;
-  await flushTuiPerfMarks();
-  await new Promise<void>((resolveClose) => stream.end(resolveClose));
-  stream.off("error", fail);
-  stream.off("drain", drain);
+export function closeTuiPerfMarks(): Promise<void> {
+  if (closePromise) return closePromise;
+  // Renderer/runtime callbacks can still emit marks during asynchronous teardown.
+  // Stop accepting them before yielding, and let every caller await one close.
+  closing = true;
+  closePromise = (async () => {
+    if (!stream) return;
+    await flushTuiPerfMarks();
+    // No drain callback may enqueue another critical record after end().
+    stream.off("drain", drain);
+    await new Promise<void>((resolveClose) => stream.end(resolveClose));
+    // Keep the error listener through the underlying file descriptor teardown;
+    // an asynchronous close error must remain a logging failure, not a crash.
+  })();
+  return closePromise;
 }

package/packages/daemon/src/tui/mirror/runtime/application-root-configuration.ts

@@ -1,3 +1,4 @@
+import { TmuxServerIdSchemaZ } from "@tmux-ide/contracts";
 import { parseArgs } from "node:util";
 
 import { loadAppConfig, type AppConfig } from "../../../lib/app-config.ts";
@@ -6,11 +7,13 @@ import { tuiPerfMark } from "./application-performance-log.ts";
 
 export interface ApplicationArgs {
   readonly target: string | null;
+  readonly serverId?: string | null;
 }
 
 export interface ApplicationConfig {
   readonly app: AppConfig;
   readonly target: string | null;
+  readonly serverId?: string | null;
 }
 
 export interface StartApplicationRootOptions {
@@ -31,11 +34,17 @@ export const parseApplicationArgs = (argv: readonly string[]): ApplicationArgs =
     args: [...argv],
     allowPositionals: true,
     strict: false,
-    options: { target: { type: "string" } },
+    options: { target: { type: "string" }, server: { type: "string" } },
   });
   const positional = parsed.positionals.find((value) => value !== "app") ?? null;
   const target = typeof parsed.values.target === "string" ? parsed.values.target : positional;
-  return Object.freeze({ target: target && target !== "home" ? target : null });
+  return Object.freeze({
+    target: target && target !== "home" ? target : null,
+    serverId:
+      typeof parsed.values.server === "string"
+        ? TmuxServerIdSchemaZ.parse(parsed.values.server)
+        : null,
+  });
 };
 
 export async function loadApplicationConfig(args: ApplicationArgs): Promise<ApplicationConfig> {
@@ -43,5 +52,5 @@ export async function loadApplicationConfig(args: ApplicationArgs): Promise<Appl
   // Home discovery is daemon-authoritative and remains live after mount. The
   // immutable bootstrap config only carries an explicit user target.
   tuiPerfMark("config-load-end", { target: args.target });
-  return Object.freeze({ app: loadAppConfig(), target: args.target });
+  return Object.freeze({ app: loadAppConfig(), target: args.target, serverId: args.serverId });
 }

package/packages/daemon/src/tui/mirror/runtime/application-root-v2.tsx

@@ -1,9 +1,11 @@
+import type { TmuxServerScope } from "@tmux-ide/contracts";
+import { terminalWindowActionCallbacks } from "./application-terminal-workspace-policy.ts";
 import { applicationRouteConnection } from "./application-route-connection.ts";
 import { ApplicationMachineOverlays } from "./application-machine-overlays.tsx";
-import { handleFleetShortcut } from "./application-machine-navigation.ts";
 import { applicationMachineAuthorityManager } from "./application-machine-authority.ts";
 import { createApplicationMachineAgentNavigator } from "./application-machine-agent-navigation.ts";
 import { createApplicationMachineNavigation } from "./application-machine-navigation.ts";
+import { handleFleetShortcut } from "./application-machine-navigation.ts";
 import { disposeApplicationDaemonAuthority } from "./application-daemon-authority.ts";
 import { createTerminalLinkOpener } from "./terminal-link-opener.ts";
 import { createApplicationPaneActivityOwner } from "./application-pane-activity-owner.ts";
@@ -29,14 +31,14 @@ import {
   type StartApplicationRootOptions,
 } from "./application-root-configuration.ts";
 import { createApplicationHomeCatalogOwner } from "./application-home-catalog-owner.ts";
-import { createApplicationHomeNavigationOwner } from "./application-home-agents-owner.ts";
+import { createApplicationHomeExperience } from "./application-home-experience.ts";
 import { ApplicationShellView, applicationShellKeyAction } from "./application-shell-view.tsx";
 import {
   applicationGenerationNavigationKey,
   createApplicationGenerationStarter,
 } from "./application-generation-starter.ts";
 import { createApplicationInputReadiness } from "./application-input-readiness.ts";
-import { applyApplicationAppearanceToRenderer } from "./application-theme-repaint.ts";
+import { createApplicationAppearanceRendererBinding } from "./application-theme-repaint.ts";
 import { createApplicationTerminalInteractionController } from "./application-terminal-interaction-controller.ts";
 import {
   createApplicationHostFocusRecovery,
@@ -174,6 +176,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
         const makeSessionOwner = (
           machineId = applicationMachineAuthorityManager.snapshot().selectedMachineId,
           expectedLiveSessionId?: string,
+          server?: TmuxServerScope,
         ) => {
           const ownedEpoch = ++sessionOwnerEpoch;
           connectionProgress.replaceOwner();
@@ -181,6 +184,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
             applicationMachineAuthorityManager.getMachine(machineId)!,
             expectedLiveSessionId,
             tuiLifecycleStream ? tuiPerfMark : undefined,
+            server,
           );
           return createOpenTuiSessionOwner({
             onStartupFailure: (sessionName, failure) => {
@@ -315,19 +319,18 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
           | ReturnType<typeof createApplicationMachineAgentNavigator>
           | undefined;
         const machines = createApplicationMachineNavigation({
-          resetWorkspace(machineId, expectedLiveSessionId) {
-            if (initialPreparation) {
-              void initialPreparation.preparedConnection
-                .then((connection) => connection?.dispose())
-                .catch(() => undefined);
-              initialPreparation = null;
-            }
+          attachedGeneration: generation,
+          resetWorkspace(machineId, expectedLiveSessionId, server) {
+            void initialPreparation?.preparedConnection
+              .then((connection) => connection?.dispose())
+              .catch(() => undefined);
+            initialPreparation = null;
             interaction?.adoptGeneration(null);
             setGeneration(null);
             shellBinding.adoptGeneration(null);
             terminalHostFocus.adopt(null);
             void sessionOwner?.dispose().catch(() => undefined);
-            sessionOwner = makeSessionOwner(machineId, expectedLiveSessionId);
+            sessionOwner = makeSessionOwner(machineId, expectedLiveSessionId, server);
           },
           cancelOpen: () => {
             machineAgentNavigator?.cancel();
@@ -361,9 +364,11 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
         onCleanup(() => machineAgentNavigator?.dispose());
         const homeCatalog = createApplicationHomeCatalogOwner({
           lifecycle,
-          automaticOpen: config.target === null && machines.automaticOpen,
+          automaticOpen: config.target === null && !config.serverId && machines.automaticOpen,
           automaticOpenAllowed: machines.automaticOpenAllowed,
           catalog: machines.catalog.selectedCatalog,
+          openCatalogSession: (session) =>
+            machines.openSelectedSession(session.name, "keyboard", session.id),
           startGeneration,
           setNote: appearance.setNote,
         });
@@ -378,10 +383,16 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
           componentKeyboardRoutes.dispose();
           sessionFocusOwner?.dispose();
         });
-        const { homeAgents, paneRename, paletteCommands, paletteCommandList, openAgent } =
-          createApplicationHomeNavigationOwner({
-            fleetCommands: machines.paletteCommands,
-            openFleet: machines.openPalette,
+        const { homeAgents, paneRename, paletteCommands, paletteCommandList, openAgent, tour } =
+          createApplicationHomeExperience({
+            machines,
+            lifecycle,
+            generation,
+            generationMachineId,
+            layoutSnapshot,
+            appearance,
+            dimensions,
+            paletteModalOpen,
             focusedPane,
             catalog: homeCatalog,
             activeSurface,
@@ -398,16 +409,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
             setSurface,
             setNote: setTransientNote,
           });
-        let paintedAppearanceGeneration: number | null = null;
-        createEffect(() => {
-          const nextAppearance = appearance.appearance();
-          paintedAppearanceGeneration = applyApplicationAppearanceToRenderer(
-            renderer,
-            nextAppearance.theme,
-            nextAppearance.generation,
-            paintedAppearanceGeneration,
-          );
-        });
+        createApplicationAppearanceRendererBinding(renderer, appearance);
         createEffect(() => {
           const currentShell = shell();
           semanticViewportResize.adopt(dimensions(), currentShell.semantic, generation());
@@ -417,11 +419,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
         useKeyboard((event) => {
           noteHostInteraction();
           const name = event.name.toLowerCase();
-          if (paletteModalOpen()) {
-            componentKeyboardRoutes.route(event);
-            return;
-          }
-          if (machines.switching()) {
+          if (paletteModalOpen() || machines.switching()) {
             componentKeyboardRoutes.route(event);
             return;
           }
@@ -525,7 +523,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
         });
         onMount(() => {
           tuiPerfMark("solid-mounted");
-          machines.start(config.target);
+          machines.start(config.target, config.serverId);
         });
         const resizeIngress = tuiPerfStream ? interaction.beginResizePointerIngress : undefined;
         const applicationMouseIngress = applicationMousePointerIngressCapability(
@@ -541,6 +539,8 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               machineSidebar={machines.sidebar}
               appearanceOwner={appearance}
               homeAgents={homeAgents.presentation}
+              onOpenTutorial={tour.open}
+              tutorialLabel={tour.label()}
               dimensions={dimensions}
               surface={activeSurface}
               semantic={() => shell().semantic}
@@ -591,7 +591,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               onOpenSession={recoverHostFocus((sessionName, source) => {
                 machineAgentNavigator?.cancel();
                 homeAgents?.cancel();
-                void startGeneration(sessionName, false, source);
+                void machines.openSelectedSession(sessionName, source);
               })}
               onOpenAgent={recoverHostFocus((sessionName, paneId, source) => {
                 machineAgentNavigator?.cancel();
@@ -600,9 +600,12 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               })}
               onSetPaletteOpen={recoverHostFocus(paletteCommands.setOpen)}
               onPaletteActivate={recoverHostFocus(paletteCommands.activate)}
-              onZoomPane={recoverHostFocus((paneId) => {
-                void interaction.zoomPane(paneId).then(setTransientNote);
-              })}
+              {...terminalWindowActionCallbacks(
+                interaction,
+                setTransientNote,
+                recoverHostFocus,
+                () => machineAgentNavigator?.cancel(),
+              )}
               onCreateWindow={recoverHostFocus(() =>
                 paletteCommands.activate("new-window", "mouse"),
               )}
@@ -616,10 +619,6 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               onCancelPaneRename={recoverHostFocus(paneRename.cancel)}
               onSubmitPaneRename={recoverHostFocus(paneRename.submit)}
               onDismissNotification={recoverHostFocus(() => setTransientNote(null))}
-              onSelectPane={recoverHostFocus((paneId, source) => {
-                machineAgentNavigator?.cancel();
-                interaction.selectPane(paneId, source);
-              })}
               onResizePreview={recoverHostFocus(interaction.previewPaneResize)}
               onResizePane={recoverHostFocus(interaction.resizePane)}
               onCancelResize={interaction.cancelPaneResize}
@@ -636,6 +635,7 @@ export async function startApplicationRoot(options: StartApplicationRootOptions
               onWindowPresented={tuiPerfStream ? interaction.observeWindowPresentation : undefined}
               onInteraction={() => noteHostInteraction()}
             />
+            <tour.Coach />
             <ApplicationMachineOverlays
               machines={machines}
               active={rendererFocused()}