tmux-ide 2.9.0-beta.8 → 2.9.2

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

@@ -1,3 +1,4 @@
+import { createAgentStatusMarker } from "../ui/agent-status-marker.ts";
 /* @jsxImportSource @opentui/solid */
 import type { AgentActivity } from "@tmux-ide/contracts";
 import type { JSX } from "solid-js";
@@ -120,6 +121,30 @@ export function ApplicationShellSidebar(props: ApplicationShellSidebarProps): JS
           );
         }}
       </For>
+      <ApplicationSidebarAgents {...props} />
+      <box flexGrow={1} />
+    </Surface>
+  );
+}
+
+/** Agent rows for the selected workspace, shared by flat and machine sidebars. */
+export function ApplicationSidebarAgents(
+  props: ApplicationShellSidebarProps & { readonly width?: number },
+): JSX.Element {
+  const rowWidth = () => Math.max(1, (props.width ?? props.shell.layout.sidebar.width) - 1);
+  const sidebarFocused = () => props.shell.semantic.focus.zone === "sidebar";
+  const focusedAgentPane = () => props.shell.semantic.focus.appFocusedPaneId;
+  return (
+    <box
+      width={props.width ?? props.shell.layout.sidebar.width}
+      height={
+        props.shell.semantic.sidebar.agents.length > 0
+          ? props.shell.semantic.sidebar.agents.length + 2
+          : 0
+      }
+      flexDirection="column"
+      flexShrink={0}
+    >
       <For each={props.shell.semantic.sidebar.agents.length > 0 ? [true] : []}>
         {() => (
           <Surface theme={props.theme} variant="panel" height={1} marginTop={1}>
@@ -132,6 +157,12 @@ export function ApplicationShellSidebar(props: ApplicationShellSidebarProps): JS
       <For each={props.shell.semantic.sidebar.agents}>
         {(agent) => {
           const status = () => agentStatus(agent.activity);
+          const marker = createAgentStatusMarker({
+            theme: () => props.theme,
+            status: () => agent.activity,
+            attention: () => agent.attention,
+            unavailable: () => !agent.paneId,
+          });
           return (
             <NavigationRow
               theme={props.theme}
@@ -141,7 +172,7 @@ export function ApplicationShellSidebar(props: ApplicationShellSidebarProps): JS
               detailMarker={agent.attention ? "!" : undefined}
               detailAlign="adjacent"
               width={rowWidth()}
-              marker={agent.attention ? "!" : "•"}
+              marker={marker()}
               focused={sidebarFocused() && agent.paneId === focusedAgentPane()}
               status={status()}
               attention={agent.attention || status() === "blocked"}
@@ -159,7 +190,6 @@ export function ApplicationShellSidebar(props: ApplicationShellSidebarProps): JS
           );
         }}
       </For>
-      <box flexGrow={1} />
-    </Surface>
+    </box>
   );
 }

package/packages/daemon/src/tui/mirror/runtime/application-shell-view.tsx

@@ -1,10 +1,22 @@
+import { ApplicationNewAgentDialog } from "./application-new-agent-dialog.tsx";
+import type { createApplicationNewAgentOwner } from "./application-new-agent-owner.ts";
+import {
+  interactionForCurrentPane,
+  nameForCurrentEndpoint,
+} from "../ui/pane-interaction-presentation.ts";
+import { isSidebarToggleKey } from "./application-sidebar-shortcuts.ts";
+import {
+  ApplicationMachineSidebar,
+  type ApplicationMachineSidebarModel,
+} from "./application-machine-sidebar.tsx";
+import type { InteractionJournalEntry } from "@tmux-ide/contracts";
 import type { ApplicationConnectionFeedback } from "../workspace/connection-feedback.ts";
 import { appearanceDialogLayer } from "./application-shell-overlays.tsx";
 import type { ApplicationAppearanceOwner } from "./application-appearance-owner.ts";
 /* @jsxImportSource @opentui/solid */
 import type { ApplicationShellProjectionV1 } from "@tmux-ide/contracts";
 import type { Accessor, ComponentProps, JSX } from "solid-js";
-import { Show, createMemo } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 
 import { friendlySessionLabel } from "../terminal-text.ts";
 import { ApplicationShell } from "../workspace/application-shell-view.tsx";
@@ -23,7 +35,7 @@ import {
 import type { ApplicationPaneRenameDraft } from "./application-pane-rename-input.ts";
 import { applicationShellViewport } from "./application-shell-viewport.ts";
 import type { OverlayLayer } from "../ui/overlay-host.tsx";
-import { ApplicationShellSidebar } from "./application-shell-sidebar.tsx";
+import { ApplicationShellSidebar, ApplicationSidebarAgents } from "./application-shell-sidebar.tsx";
 import { ApplicationShellOverlayStack } from "./application-shell-overlay-stack.tsx";
 import { ApplicationHomeSurface } from "./application-shell-home.tsx";
 import type { ApplicationHomeAgentPresentation } from "./application-home-agents-owner.ts";
@@ -43,13 +55,25 @@ export { applicationShellViewport } from "./application-shell-viewport.ts";
 type TerminalWorkspaceProps = ComponentProps<typeof ApplicationTerminalWorkspace>;
 export type RootSurface = "home" | "terminals";
 type InputSource = "keyboard" | "mouse";
-export type ApplicationShellKeyAction = "home" | "terminals" | "palette-open" | "palette-close";
+export type ApplicationShellKeyAction =
+  | "home"
+  | "terminals"
+  | "palette-open"
+  | "palette-close"
+  | "sidebar-toggle";
 
 export function applicationShellKeyAction(
-  key: { readonly name: string },
+  key: {
+    readonly name: string;
+    readonly shift?: boolean;
+    readonly ctrl?: boolean;
+    readonly meta?: boolean;
+    readonly eventType?: string;
+  },
   paletteOpen: boolean,
 ): ApplicationShellKeyAction | null {
   const name = key.name.toLowerCase();
+  if (isSidebarToggleKey(key)) return "sidebar-toggle";
   if (name === "f1") return "home";
   if (name === "f2") return "terminals";
   if (name === "f5") return "palette-open";
@@ -58,7 +82,14 @@ export function applicationShellKeyAction(
 }
 
 export interface ApplicationShellViewProps {
+  readonly machineSidebar?: ApplicationMachineSidebarModel;
+  readonly sidebarVisible?: boolean;
+  readonly machineColor?: string;
+  readonly machineLabel?: string | null;
+  readonly interactionObservation?: TerminalWorkspaceProps["interactionObservation"];
   readonly paneInteractions?: TerminalWorkspaceProps["paneInteractions"];
+  readonly activityDaemonId?: () => string | null;
+  readonly recentPaneActivity?: () => readonly InteractionJournalEntry[];
   readonly appearanceOwner?: ApplicationAppearanceOwner;
   readonly homeAgents?: ApplicationHomeAgentPresentation;
   readonly dimensions: Accessor<{ readonly width: number; readonly height: number }>;
@@ -74,10 +105,18 @@ export interface ApplicationShellViewProps {
   readonly catalogPhase?: Accessor<"loading" | "live" | "unavailable">;
   readonly catalogNote?: Accessor<string | null>;
   readonly paletteOpen: Accessor<boolean>;
+  readonly newAgentOwner?: ReturnType<typeof createApplicationNewAgentOwner>;
   readonly paneRenameDialog?: Accessor<ApplicationPaneRenameDraft | null>;
   readonly paletteSelection?: Accessor<number>;
+  readonly paletteReferencePage?: Accessor<"shortcuts" | "changes" | "help" | undefined>;
+  readonly onPaletteReferenceChange?: (page: "shortcuts" | "changes" | "help" | undefined) => void;
+  readonly paletteKeyboardHint?: Accessor<string>;
+  readonly palettePreviewActive?: Accessor<boolean>;
+  readonly onPaletteModalChange?: (open: boolean) => void;
   readonly paletteQuery?: Accessor<string>;
   readonly paletteDisabledReason?: (command: ApplicationPaletteCommand) => string | null;
+  readonly onPaletteViewport?: (rows: number) => void;
+  readonly onPaletteFavorite?: (command: ApplicationPaletteCommand) => void;
   readonly onPaletteSelect?: (index: number) => void;
   readonly paletteCommands?: Accessor<readonly ApplicationPaletteCommand[]>;
   readonly terminalRendererSource: Accessor<{
@@ -103,18 +142,26 @@ export interface ApplicationShellViewProps {
   readonly onCreateWindow?: () => void;
   readonly onCreateSession?: () => void;
   readonly onCycleTheme?: () => void;
+  readonly onOpenTutorial?: () => void;
+  readonly tutorialLabel?: string;
   readonly onBeginPaneRename?: (paneId: string, currentName: string) => void;
   readonly onCancelPaneRename?: () => void;
   readonly onSubmitPaneRename?: () => void;
   readonly onDismissNotification?: () => void;
   readonly paletteCloseArmed?: Accessor<boolean>;
   readonly onSelectPane: TerminalWorkspaceProps["onSelectPane"];
+  readonly onSelectWindowLink?: TerminalWorkspaceProps["onSelectWindowLink"];
+  readonly onUnlinkWindowLink?: TerminalWorkspaceProps["onUnlinkWindowLink"];
   readonly onResizePreview: TerminalWorkspaceProps["onResizePreview"];
   readonly onResizePane: TerminalWorkspaceProps["onResizePane"];
+  readonly onCancelResize?: TerminalWorkspaceProps["onCancelResize"];
   readonly onResizePointerIngress?: TerminalWorkspaceProps["onResizePointerIngress"];
+  readonly onWheelObservation?: TerminalWorkspaceProps["onWheelObservation"];
   readonly onTerminalInput?: TerminalWorkspaceProps["onTerminalInput"];
   readonly terminalGestureRuntime?: TerminalWorkspaceProps["terminalGestureRuntime"];
   readonly onApplicationMousePointerIngress?: TerminalWorkspaceProps["onApplicationMousePointerIngress"];
+  readonly onOpenLink?: TerminalWorkspaceProps["onOpenLink"];
+  readonly copyFeedback?: TerminalWorkspaceProps["copyFeedback"];
   readonly onCopyText?: TerminalWorkspaceProps["onCopyText"];
   readonly onSelectionCopyOwner?: TerminalWorkspaceProps["onSelectionCopyOwner"];
   readonly onSelectionKeyOwner?: TerminalWorkspaceProps["onSelectionKeyOwner"];
@@ -124,13 +171,14 @@ export interface ApplicationShellViewProps {
 
 /** Pure Solid composition over the WorkspaceClient semantic projection. */
 export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Element {
+  const [scrollback, setScrollback] = createSignal(false);
   const projection = createMemo(() => {
     const semantic = props.semantic();
     if (!semantic) return null;
     return projectApplicationShell({
       width: props.dimensions().width,
       height: props.dimensions().height,
-      preferredSidebarWidth: 28,
+      preferredSidebarWidth: props.sidebarVisible === false ? 0 : 28,
       shell: semantic,
       hoveredTabIndex: null,
       quitHint: "^q quit",
@@ -170,6 +218,26 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
     },
   };
   const projectionOwner = createMemo(() => (projection() ? appearance : null));
+  const nativePaneIdentities = createMemo(
+    () =>
+      new Map(
+        (props.semantic()?.terminalInventory?.resources ?? []).flatMap((resource) =>
+          resource.attachability.status === "available" && resource.nativeIdentity
+            ? [[resource.attachability.semanticPaneId, resource.nativeIdentity] as const]
+            : [],
+        ),
+      ),
+  );
+  const interactionEndpoints = createMemo(
+    () =>
+      new Map(
+        (props.semantic()?.terminalInventory?.resources ?? []).flatMap((resource) =>
+          resource.attachability.status === "available" && resource.interactionEndpoint
+            ? [[resource.attachability.semanticPaneId, resource.interactionEndpoint] as const]
+            : [],
+        ),
+      ),
+  );
   const agentIndicators = createMemo<ReadonlyMap<string, ApplicationTerminalAgentIndicator>>(
     () =>
       new Map(
@@ -180,6 +248,7 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                   agent.paneId,
                   {
                     name: agent.name,
+                    nameResolved: true,
                     activity: agent.activity,
                     attention: agent.attention,
                   },
@@ -193,9 +262,21 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
     if (props.appearanceOwner?.pickerOpen()) return;
     const shell = projection();
     if (!shell) return;
+    if (props.machineSidebar && props.surface() === "terminals") {
+      const sidebar = shell.layout.sidebar;
+      if (
+        x >= sidebar.x &&
+        x < sidebar.x + sidebar.width &&
+        y >= sidebar.y &&
+        y < sidebar.y + sidebar.height
+      )
+        return;
+      props.machineSidebar.onBlur?.();
+    }
     const hit = applicationShellHitTest(shell, x, y);
     if (hit?.kind === "view") props.onOpenSurface(hit.viewId, "mouse");
-    else if (hit?.kind === "session") props.onOpenSession(hit.session, "mouse");
+    else if (hit?.kind === "session" && props.surface() === "terminals")
+      props.onOpenSession(hit.session, "mouse");
     else if (hit?.kind === "palette") props.onSetPaletteOpen(true, "mouse");
   };
 
@@ -205,6 +286,10 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
       keyed
       fallback={
         <ApplicationCatalogShell
+          sidebarVisible={props.sidebarVisible}
+          machineSidebar={props.machineSidebar}
+          machineLabel={props.machineLabel}
+          machineColor={props.machineColor}
           appearanceOwner={props.appearanceOwner}
           homeAgents={props.homeAgents}
           dimensions={props.dimensions}
@@ -220,8 +305,15 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
           paletteOpen={props.paletteOpen}
           paletteSelection={props.paletteSelection}
           paletteQuery={props.paletteQuery}
+          paletteReferencePage={props.paletteReferencePage}
+          onPaletteReferenceChange={props.onPaletteReferenceChange}
+          paletteKeyboardHint={props.paletteKeyboardHint}
+          palettePreviewActive={props.palettePreviewActive}
+          onPaletteModalChange={props.onPaletteModalChange}
           paletteDisabledReason={props.paletteDisabledReason}
           onPaletteSelect={props.onPaletteSelect}
+          onPaletteViewport={props.onPaletteViewport}
+          onPaletteFavorite={props.onPaletteFavorite}
           paletteCommands={props.paletteCommands}
           paletteCloseArmed={props.paletteCloseArmed}
           theme={props.theme}
@@ -231,6 +323,8 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
           onPaletteActivate={props.onPaletteActivate}
           onCreateSession={props.onCreateSession}
           onCycleTheme={props.onCycleTheme}
+          onOpenTutorial={props.onOpenTutorial}
+          tutorialLabel={props.tutorialLabel}
         />
       }
     >
@@ -265,8 +359,17 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                   height={props.dimensions().height}
                   selected={props.paletteSelection?.() ?? 0}
                   query={props.paletteQuery?.() ?? ""}
+                  referencePage={props.paletteReferencePage?.()}
+                  onReferenceChange={props.onPaletteReferenceChange}
+                  keyboardHint={props.paletteKeyboardHint?.()}
+                  previewActive={
+                    props.palettePreviewActive?.() ?? props.rendererFocused?.() !== false
+                  }
+                  onModalChange={props.onPaletteModalChange}
                   disabledReason={props.paletteDisabledReason}
                   onSelect={props.onPaletteSelect}
+                  onViewport={props.onPaletteViewport}
+                  onFavorite={props.onPaletteFavorite}
                   closeArmed={props.paletteCloseArmed?.() ?? false}
                   commands={
                     props.paletteCommands?.() ?? applicationPaletteCommands(props.semantic())
@@ -283,6 +386,22 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                 />
               ),
             });
+          const agentDraft = props.newAgentOwner?.draft();
+          if (agentDraft && props.newAgentOwner)
+            layers.push({
+              id: "new-agent",
+              render: ({ active, zIndex }) => (
+                <ApplicationNewAgentDialog
+                  draft={agentDraft}
+                  owner={props.newAgentOwner!}
+                  width={props.dimensions().width}
+                  height={props.dimensions().height}
+                  theme={appearance.theme}
+                  active={active}
+                  zIndex={zIndex}
+                />
+              ),
+            });
           const draft = props.paneRenameDialog?.();
           if (draft)
             layers.push({
@@ -321,36 +440,119 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
             }}
           >
             <ApplicationShell
+              onFooterAction={(key) => {
+                props.machineSidebar?.onBlur?.();
+                if (key === "F6") props.machineSidebar?.onOpenSwitcher?.();
+                else if (key === "F7") props.machineSidebar?.onOpenAttention?.();
+                else
+                  props.onPaletteActivate?.(
+                    props.sidebarVisible === false ? "show-sidebar" : "hide-sidebar",
+                    "mouse",
+                  );
+              }}
+              footerContext={props.surface() === "home" ? "home" : "terminals"}
+              scrollback={props.surface() === "terminals" && scrollback()}
+              rightChips={
+                props.surface() === "terminals" && props.dimensions().width >= 60
+                  ? [
+                      {
+                        id: "workspace-context",
+                        label: ` ${props.machineLabel ?? "Local"} · ${friendlySessionLabel(shell.activeSession)} `,
+                      },
+                    ]
+                  : undefined
+              }
               theme={appearance.theme}
               projection={shell}
               help="F5 commands"
               onHelp={() => props.onSetPaletteOpen(true, "mouse")}
               note={
                 props.bootstrapNote() ??
+                (props.copyFeedback
+                  ? props.copyFeedback.copied
+                    ? "Copied"
+                    : "Copy unavailable"
+                  : null) ??
                 (props.generationStatus() === "read-only"
                   ? `Read-only input · select a pane to request control · shared tmux ${props.layout().current?.cols ?? "?"}×${props.layout().current?.rows ?? "?"}`
                   : props.generationStatus())
               }
               showToolStatus={false}
-              showSidebar={props.surface() === "terminals"}
+              showSidebar={props.surface() === "terminals" && props.sidebarVisible !== false}
               sidebar={
-                <ApplicationShellSidebar
-                  shell={shell}
-                  liveSessions={
-                    typeof props.sessions === "function" ? props.sessions() : props.sessions
+                <Show
+                  when={props.machineSidebar}
+                  fallback={
+                    <ApplicationShellSidebar
+                      shell={shell}
+                      liveSessions={
+                        typeof props.sessions === "function" ? props.sessions() : props.sessions
+                      }
+                      theme={appearance.theme}
+                      onIntent={(intent) => {
+                        if (intent.type === "session.open")
+                          props.onOpenSession(intent.sessionName, intent.source);
+                        else props.onOpenAgent?.(intent.sessionName, intent.paneId, intent.source);
+                      }}
+                    />
                   }
-                  theme={appearance.theme}
-                  onIntent={(intent) => {
-                    if (intent.type === "session.open")
-                      props.onOpenSession(intent.sessionName, intent.source);
-                    else props.onOpenAgent?.(intent.sessionName, intent.paneId, intent.source);
-                  }}
-                />
+                >
+                  {(model) => (
+                    <ApplicationMachineSidebar
+                      model={model()}
+                      paneName={(endpoint) =>
+                        nameForCurrentEndpoint(
+                          model()
+                            .groups()
+                            .flatMap((group) => group.agents ?? []),
+                          endpoint,
+                        )
+                      }
+                      interactionForAgent={(agent) =>
+                        interactionForCurrentPane(
+                          props.paneInteractions?.(),
+                          agent.interactionEndpoint,
+                          agent.nativeIdentity,
+                        )
+                      }
+                      onHelp={(source) => {
+                        props.onSetPaletteOpen(true, source);
+                        props.onPaletteReferenceChange?.("help");
+                      }}
+                      agentRows={
+                        model()
+                          .groups()
+                          .some((group) => group.agents !== undefined)
+                          ? 0
+                          : shell.semantic.sidebar.agents.length
+                      }
+                      agents={
+                        <ApplicationSidebarAgents
+                          shell={shell}
+                          theme={appearance.theme}
+                          width={Math.max(1, shell.layout.sidebar.width - 1)}
+                          onIntent={(intent) => {
+                            if (intent.type !== "agent.open") return;
+                            model().onBlur?.();
+                            props.onOpenAgent?.(intent.sessionName, intent.paneId, intent.source);
+                          }}
+                        />
+                      }
+                      width={shell.layout.sidebar.width}
+                      height={shell.layout.sidebar.height}
+                      theme={appearance.theme}
+                    />
+                  )}
+                </Show>
               }
             >
               <Show when={props.surface() !== "terminals"}>
                 <ApplicationHomeSurface
                   {...props.homeAgents}
+                  interactionObservation={props.interactionObservation}
+                  paneInteractions={props.paneInteractions?.()}
+                  recentPaneActivity={props.recentPaneActivity?.()}
+                  activityDaemonId={props.activityDaemonId?.()}
                   project={shell.semantic.project.name}
                   status={props.generationStatus()}
                   note={props.bootstrapNote()}
@@ -363,7 +565,11 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                   theme={appearance.theme}
                   onOpenTerminals={() => props.onOpenSurface("terminals", "mouse")}
                   onOpenCommands={() => props.onSetPaletteOpen(true, "mouse")}
+                  onBrowseSessions={props.machineSidebar?.onOpenSwitcher}
+                  onAddMachine={props.machineSidebar?.onAddMachine}
                   onCycleTheme={props.onCycleTheme}
+                  onOpenTutorial={props.onOpenTutorial}
+                  tutorialLabel={props.tutorialLabel}
                 />
               </Show>
               <box
@@ -394,6 +600,8 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                 >
                   {(source) => (
                     <ApplicationTerminalWorkspace
+                      connectionStatus={props.generationStatus()}
+                      onScrollbackChange={setScrollback}
                       layout={props.layout}
                       adapter={source.adapter}
                       rendererEpoch={source.rendererEpoch}
@@ -401,6 +609,7 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                         props.surface() === "terminals" &&
                         !props.paletteOpen() &&
                         !props.paneRenameDialog?.() &&
+                        !props.newAgentOwner?.draft() &&
                         !props.appearanceOwner?.pickerOpen()
                       }
                       width={shell.content.width}
@@ -417,8 +626,20 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                       theme={appearance.theme}
                       palette={appearance.palette}
                       agentIndicators={agentIndicators}
+                      interactionObservation={props.interactionObservation}
                       paneInteractions={props.paneInteractions}
+                      interactionEndpoints={interactionEndpoints}
+                      interactionPaneName={(endpoint) =>
+                        nameForCurrentEndpoint(
+                          props.machineSidebar?.groups().flatMap((group) => group.agents ?? []) ??
+                            [],
+                          endpoint,
+                        )
+                      }
+                      nativePaneIdentities={nativePaneIdentities}
                       onSelectPane={props.onSelectPane}
+                      onSelectWindowLink={props.onSelectWindowLink}
+                      onUnlinkWindowLink={props.onUnlinkWindowLink}
                       onCreateWindow={props.onCreateWindow}
                       onPaneContextAction={(paneId, action, currentName) => {
                         if (action === "rename-pane")
@@ -428,10 +649,14 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                       }}
                       onResizePreview={props.onResizePreview}
                       onResizePane={props.onResizePane}
+                      onCancelResize={props.onCancelResize}
                       onResizePointerIngress={props.onResizePointerIngress}
+                      onWheelObservation={props.onWheelObservation}
                       onTerminalInput={props.onTerminalInput}
                       terminalGestureRuntime={props.terminalGestureRuntime}
                       onApplicationMousePointerIngress={props.onApplicationMousePointerIngress}
+                      onOpenLink={props.onOpenLink}
+                      copyFeedback={props.copyFeedback}
                       onCopyText={props.onCopyText}
                       onSelectionCopyOwner={props.onSelectionCopyOwner}
                       onSelectionKeyOwner={props.onSelectionKeyOwner}
@@ -458,7 +683,8 @@ export function ApplicationShellView(props: ApplicationShellViewProps): JSX.Elem
                   props.onSelectPane(id.slice("pane:".length));
               }}
               onIntent={({ id }) => {
-                if (id === "pane-rename") props.onCancelPaneRename?.();
+                if (id === "new-agent") props.newAgentOwner?.cancel();
+                else if (id === "pane-rename") props.onCancelPaneRename?.();
                 else if (id === "palette") props.onSetPaletteOpen(false, "keyboard");
                 else if (id === "notification") props.onDismissNotification?.();
               }}

package/packages/daemon/src/tui/mirror/runtime/application-shell-viewport.ts

@@ -4,13 +4,14 @@ import { shellChromeLayout } from "../shell-chrome.ts";
 export function applicationShellViewport(
   dimensions: { readonly width: number; readonly height: number },
   hasSemanticShell: boolean,
+  sidebarVisible = true,
 ): { readonly width: number; readonly height: number } {
   if (!hasSemanticShell)
     return {
       width: Math.max(1, dimensions.width),
       height: Math.max(2, dimensions.height - 2),
     };
-  const shell = shellChromeLayout(dimensions.width, dimensions.height, 28);
+  const shell = shellChromeLayout(dimensions.width, dimensions.height, sidebarVisible ? 28 : 0);
   return {
     width: Math.max(1, shell.main.width),
     height: Math.max(2, shell.main.height - shell.status.height - 1),

package/packages/daemon/src/tui/mirror/runtime/application-sidebar-shortcuts.ts

@@ -0,0 +1,51 @@
+interface Key {
+  readonly name: string;
+  readonly ctrl?: boolean;
+  readonly shift?: boolean;
+  readonly meta?: boolean;
+  readonly eventType?: string;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
+export function isSidebarToggleKey(key: Omit<Key, "preventDefault" | "stopPropagation">): boolean {
+  return (
+    key.name.toLowerCase() === "f10" &&
+    !key.shift &&
+    !key.ctrl &&
+    !key.meta &&
+    key.eventType !== "release"
+  );
+}
+
+export function createApplicationSidebarShortcuts(
+  surface: () => string,
+  visible: () => boolean,
+  setVisible: (update: (value: boolean) => boolean) => unknown,
+  machines: {
+    showSwitcher(attention: boolean): void;
+    focus(): void;
+    sidebar: { onBlur?: () => void };
+  },
+  palette: { setOpen(open: boolean, source: "keyboard"): void },
+): (event: Key) => boolean {
+  return (event) => {
+    if (event.name.toLowerCase() === "f5") {
+      machines.sidebar.onBlur?.();
+      palette.setOpen(true, "keyboard");
+      return true;
+    }
+    if (isSidebarToggleKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.eventType === "press") setVisible((value) => !value);
+      return true;
+    }
+    if (event.ctrl && event.name.toLowerCase() === "g") {
+      if (surface() === "home" || !visible()) machines.showSwitcher(false);
+      else machines.focus();
+      return true;
+    }
+    return false;
+  };
+}

package/packages/daemon/src/tui/mirror/runtime/application-team-groups.ts

@@ -0,0 +1,40 @@
+import {
+  paneTeamGroupKey,
+  type PaneTeamMembership,
+  type TmuxServerScope,
+} from "@tmux-ide/contracts";
+
+interface TeamRow {
+  readonly team?: PaneTeamMembership;
+  readonly machineId?: string;
+  readonly server?: TmuxServerScope;
+  readonly daemonInstanceId?: string;
+}
+
+export function applicationTeamKey(row: TeamRow): string | null {
+  return row.team
+    ? paneTeamGroupKey(
+        row.team,
+        row.machineId ?? "local",
+        row.server?.serverId ?? "default",
+        row.server?.generation ?? row.daemonInstanceId ?? "",
+      )
+    : null;
+}
+
+/** Group by membership, never by name, activity, or current tmux window. Stable within groups. */
+export function groupApplicationTeamRows<T extends TeamRow>(rows: readonly T[]): T[] {
+  const groups = new Map<string, T[]>();
+  const ungrouped: T[] = [];
+  for (const row of rows) {
+    const key = applicationTeamKey(row);
+    if (key === null) {
+      ungrouped.push(row);
+      continue;
+    }
+    const group = groups.get(key) ?? [];
+    group.push(row);
+    groups.set(key, group);
+  }
+  return [...groups.values()].flat().concat(ungrouped);
+}