diff --git a/desktop/src/app/AppHuddleShell.tsx b/desktop/src/app/AppHuddleShell.tsx
index 736dad1f6a..8370e8efd4 100644
--- a/desktop/src/app/AppHuddleShell.tsx
+++ b/desktop/src/app/AppHuddleShell.tsx
@@ -17,12 +17,6 @@ type AppHuddleShellProps = {
   onShowHuddleInMainApp: (ephemeralChannelId: string) => void;
   onViewHuddleChannel: (ephemeralChannelId: string) => void;
   onVisibilityChange: (visible: boolean) => void;
-  /**
-   * Terminal substrate layer. Rendered behind the app surface (which carries
-   * z-10) so the ⌘J handoff can reveal it by fading the surface above. Not
-   * mounted in the dedicated Huddle room window.
-   */
-  terminal?: React.ReactNode;
 };
 
 export function AppHuddleShell({
@@ -37,7 +31,6 @@ export function AppHuddleShell({
   onShowHuddleInMainApp,
   onViewHuddleChannel,
   onVisibilityChange,
-  terminal,
 }: AppHuddleShellProps) {
   return (
     <HuddleProvider
@@ -55,7 +48,6 @@ export function AppHuddleShell({
           data-huddle-open={isDrawerOpen}
           data-huddle-window={isRoom}
         >
-          {isRoom ? null : terminal}
           <div
             className={cn(
               "buzz-huddle-app-surface z-10 flex min-h-0 flex-row overflow-hidden bg-background",
diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index 41bcf04bf7..36e6106c1c 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -774,7 +774,6 @@ export function AppShell() {
             onShowHuddleInMainApp={showHuddleInMainApp}
             onViewHuddleChannel={viewHuddleChannel}
             onVisibilityChange={handleHuddleVisibilityChange}
-            terminal={<TerminalBootstrap {...terminalContext} />}
           >
             {hasCommunityRail && !isHuddleRoom ? (
               <CommunityRail
@@ -942,6 +941,7 @@ export function AppShell() {
                       isHuddleRoom={isHuddleRoom}
                       isHuddleRoomStarting={isHuddleRoomStarting}
                       mainInsetRef={mainInsetRef}
+                      terminal={<TerminalBootstrap {...terminalContext} />}
                     >
                       <Outlet />
                     </AppShellChannelSurface>
diff --git a/desktop/src/app/AppShellChannelSurface.tsx b/desktop/src/app/AppShellChannelSurface.tsx
index 4ab2ea1df3..37be3448ee 100644
--- a/desktop/src/app/AppShellChannelSurface.tsx
+++ b/desktop/src/app/AppShellChannelSurface.tsx
@@ -11,6 +11,7 @@ type AppShellChannelSurfaceProps = {
   isHuddleRoom: boolean;
   isHuddleRoomStarting: boolean;
   mainInsetRef: React.RefObject<HTMLElement | null>;
+  terminal?: React.ReactNode;
 };
 
 export function AppShellChannelSurface({
@@ -18,6 +19,7 @@ export function AppShellChannelSurface({
   isHuddleRoom,
   isHuddleRoomStarting,
   mainInsetRef,
+  terminal,
 }: AppShellChannelSurfaceProps) {
   return (
     <MainInsetProvider mainInsetRef={mainInsetRef}>
@@ -34,7 +36,7 @@ export function AppShellChannelSurface({
         style={chromeCssVarDefaults as React.CSSProperties}
       >
         {isHuddleRoom && !isHuddleRoomStarting ? <HuddleRoomHeader /> : null}
-        <BuzzTheme.ContentSurface unframed={isHuddleRoom}>
+        <BuzzTheme.ContentSurface terminal={terminal} unframed={isHuddleRoom}>
           {isHuddleRoomStarting ? <HuddleStartingView /> : children}
         </BuzzTheme.ContentSurface>
       </SidebarInset>
diff --git a/desktop/src/app/BuzzThemeSurfaces.tsx b/desktop/src/app/BuzzThemeSurfaces.tsx
index 4976fc2ed8..b7912c98bc 100644
--- a/desktop/src/app/BuzzThemeSurfaces.tsx
+++ b/desktop/src/app/BuzzThemeSurfaces.tsx
@@ -23,8 +23,10 @@ export function GradientLayer() {
 export function ContentSurface({
   children,
   unframed = false,
+  terminal,
 }: {
   children: ReactNode;
+  terminal?: ReactNode;
   /** Used by dedicated huddle windows, which should not resemble app cards. */
   unframed?: boolean;
 }) {
@@ -38,7 +40,12 @@ export function ContentSurface({
       data-buzz-content-surface
       data-buzz-content-unframed={unframed ? true : undefined}
     >
-      {children}
+      <div className="buzz-content-primary flex min-h-0 flex-1 flex-col overflow-hidden">
+        {children}
+      </div>
+      <div className="buzz-terminal-dock-host" data-terminal-dock>
+        {terminal}
+      </div>
     </div>
   );
 }
diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index 4c545baf68..358a0e637b 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -1,4 +1,4 @@
-import { LogIn } from "lucide-react";
+import { LogIn, SquareTerminal } from "lucide-react";
 import type * as React from "react";
 
 import { ChatHeader } from "@/features/chat/ui/ChatHeader";
@@ -17,6 +17,10 @@ import { UserProfilePopover } from "@/features/profile/ui/UserProfilePopover";
 import { Button } from "@/shared/ui/button";
 import type { Channel, PresenceStatus } from "@/shared/api/types";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
+import {
+  toggleTerminalPanel,
+  useTerminalPanel,
+} from "@/features/terminal/terminalPanelStore";
 
 const DM_HEADER_AVATAR_SIZE = 32;
 const DM_HEADER_AVATAR_STATUS_GEOMETRY = scaleProfileAvatarStatusGeometry(
@@ -74,7 +78,22 @@ export function ChannelScreenHeader({
     !activeChannel.archivedAt &&
     onJoinChannel;
 
-  const actions = activeChannel ? (
+  const terminalPanel = useTerminalPanel();
+  const terminalButton = activeChannel ? (
+    <Button
+      aria-label={
+        terminalPanel.mode === "closed" ? "Open Buzz Term" : "Hide Buzz Term"
+      }
+      onClick={toggleTerminalPanel}
+      size="icon"
+      title="Buzz Term (⌘J)"
+      type="button"
+      variant={terminalPanel.mode === "closed" ? "outline" : "secondary"}
+    >
+      <SquareTerminal />
+    </Button>
+  ) : null;
+  const channelActions = activeChannel ? (
     showJoinButton ? (
       <Button
         disabled={isJoining}
@@ -97,6 +116,12 @@ export function ChannelScreenHeader({
       />
     )
   ) : null;
+  const actions = activeChannel ? (
+    <div className="flex items-center gap-1">
+      {terminalButton}
+      {channelActions}
+    </div>
+  ) : null;
 
   if (!showHeaderContent) {
     return null;
diff --git a/desktop/src/features/terminal/TerminalBootstrap.test.mjs b/desktop/src/features/terminal/TerminalBootstrap.test.mjs
index 34eb11ce7f..5a849a8174 100644
--- a/desktop/src/features/terminal/TerminalBootstrap.test.mjs
+++ b/desktop/src/features/terminal/TerminalBootstrap.test.mjs
@@ -1,7 +1,8 @@
 import assert from "node:assert/strict";
-import { after, afterEach, before, test } from "node:test";
+import { after, afterEach, before, beforeEach, test } from "node:test";
 
 import { JSDOM } from "jsdom";
+import { setTerminalPanelMode } from "./terminalPanelStore.ts";
 
 // `pretendToBeVisual` is what gives jsdom requestAnimationFrame. The banner's
 // animation loop needs it; without it the loop silently never runs and every
@@ -18,6 +19,8 @@ let resizeCallback;
 let canvasWidth = 840;
 let attachResolver = null;
 let deferResizes = false;
+let deferClose = false;
+let closeResolver = null;
 const pendingResizes = [];
 
 before(async () => {
@@ -33,7 +36,10 @@ before(async () => {
   dom.window.localStorage.setItem("buzz-follow-system", "false");
   dom.window.isTauri = true;
   dom.window.matchMedia = () => ({
-    matches: false,
+    // This suite exercises bootstrap/IPC behavior, not banner motion. Keeping
+    // animation disabled avoids competing perpetual rAF loops under the full
+    // parallel test runner; motion itself is covered by TerminalSubstrate.
+    matches: true,
     addEventListener() {},
     removeEventListener() {},
   });
@@ -79,9 +85,12 @@ before(async () => {
       calls.push({ command, args });
       if (command === "terminal_attach") {
         channel = args.onFrame;
+        const sessionNumber = calls.filter(
+          ({ command }) => command === "terminal_attach",
+        ).length;
         const response = {
-          sessionId: "session-1",
-          subscriptionId: "subscription-1",
+          sessionId: `session-${sessionNumber}`,
+          subscriptionId: `subscription-${sessionNumber}`,
           viewport: { columns: 100, generation: 0, screenLines: 24 },
         };
         return attachResolver
@@ -101,6 +110,11 @@ before(async () => {
           pendingResizes.push(() => resolve(value));
         });
       }
+      if (command === "terminal_close" && deferClose) {
+        return new Promise((resolve) => {
+          closeResolver = resolve;
+        });
+      }
       return Promise.resolve();
     },
     transformCallback(callback) {
@@ -115,11 +129,17 @@ before(async () => {
 });
 
 after(() => dom.window.close());
-afterEach(() => {
+beforeEach(() => setTerminalPanelMode("docked"));
+afterEach(async () => {
+  const { cleanup } = await import("@testing-library/react");
+  cleanup();
+  setTerminalPanelMode("closed");
   calls.length = 0;
   canvasWidth = 840;
   attachResolver = null;
   deferResizes = false;
+  deferClose = false;
+  closeResolver = null;
   pendingResizes.length = 0;
 });
 
@@ -172,6 +192,9 @@ test("mounted bootstrap passes GUI context and ACKs only after consuming a frame
     threadId: "thread-1",
   });
 
+  const sessionNumber = calls.filter(
+    ({ command }) => command === "terminal_attach",
+  ).length;
   const frameMessage = {
     type: "frame",
     payload: {
@@ -181,7 +204,7 @@ test("mounted bootstrap passes GUI context and ACKs only after consuming a frame
       full: true,
       rows: [],
       sequence: 7,
-      subscriptionId: "subscription-1",
+      subscriptionId: `subscription-${sessionNumber}`,
       viewport: { columns: 100, generation: 0, screenLines: 24 },
     },
   };
@@ -195,8 +218,8 @@ test("mounted bootstrap passes GUI context and ACKs only after consuming a frame
     calls.find(({ command }) => command === "terminal_ack").args,
     {
       sequence: 7,
-      sessionId: "session-1",
-      subscriptionId: "subscription-1",
+      sessionId: `session-${sessionNumber}`,
+      subscriptionId: `subscription-${sessionNumber}`,
     },
   );
 
@@ -300,11 +323,6 @@ test("opening a tab keeps terminal ownership while its attachment is pending", a
     await Promise.resolve();
   });
   const substrate = view.container.querySelector(".buzz-terminal-substrate");
-  const chord = { bubbles: true, code: "KeyJ", metaKey: true };
-  act(() => {
-    window.dispatchEvent(new KeyboardEvent("keydown", chord));
-    window.dispatchEvent(new KeyboardEvent("keyup", chord));
-  });
   await waitFor(() =>
     assert.equal(substrate.dataset.terminalOwner, "terminal"),
   );
@@ -323,7 +341,124 @@ test("opening a tab keeps terminal ownership while its attachment is pending", a
   view.unmount();
 });
 
-test("a successful close removes the tab even if the exit event is lost", async () => {
+test("restoring a channel resizes its PTY to the current dock viewport", async () => {
+  const { createElement } = await import("react");
+  const { act, render, waitFor } = await import("@testing-library/react");
+  const { ThemeProvider } = await import("@/shared/theme/ThemeProvider");
+  const { TerminalBootstrap } = await import("./TerminalBootstrap.tsx");
+
+  const props = (channelId, channelName) => ({
+    channelId,
+    channelName,
+    npub: "npub1owner",
+    relayUrl: "wss://relay.example",
+    threadId: null,
+  });
+  const tree = (channelId, channelName) =>
+    createElement(
+      ThemeProvider,
+      null,
+      createElement(TerminalBootstrap, props(channelId, channelName)),
+    );
+  const view = render(tree("channel-a", "alpha"));
+  await waitFor(() =>
+    assert.ok(
+      calls.some(
+        ({ command, args }) =>
+          command === "terminal_attach" &&
+          args.request.channelId === "channel-a",
+      ),
+    ),
+  );
+
+  view.rerender(tree("channel-b", "beta"));
+  await waitFor(() =>
+    assert.ok(
+      calls.some(
+        ({ command, args }) =>
+          command === "terminal_attach" &&
+          args.request.channelId === "channel-b",
+      ),
+    ),
+  );
+  canvasWidth = 1_680;
+  await act(async () => resizeCallback());
+  await waitFor(() =>
+    assert.ok(
+      calls.some(
+        ({ command, args }) =>
+          command === "terminal_resize" &&
+          args.sessionId === "session-2" &&
+          args.columns === 200,
+      ),
+    ),
+  );
+
+  view.rerender(tree("channel-a", "alpha"));
+  await waitFor(() =>
+    assert.ok(
+      calls.some(
+        ({ command, args }) =>
+          command === "terminal_resize" &&
+          args.sessionId === "session-1" &&
+          args.columns === 200,
+      ),
+    ),
+  );
+  view.unmount();
+});
+
+test("closing a tab while attach is pending closes the eventual session", async () => {
+  const { createElement } = await import("react");
+  const { act, fireEvent, render, waitFor } = await import(
+    "@testing-library/react"
+  );
+  const { ThemeProvider } = await import("@/shared/theme/ThemeProvider");
+  const { TerminalBootstrap } = await import("./TerminalBootstrap.tsx");
+
+  attachResolver = () => {};
+  const view = render(
+    createElement(
+      ThemeProvider,
+      null,
+      createElement(TerminalBootstrap, {
+        channelId: "channel-1",
+        channelName: "general",
+        npub: "npub1owner",
+        relayUrl: "wss://relay.example",
+        threadId: null,
+      }),
+    ),
+  );
+  await waitFor(() => assert.equal(typeof attachResolver, "function"));
+  await waitFor(() =>
+    assert.ok(view.queryByRole("tab", { name: /Terminal 1/ })),
+  );
+
+  await act(async () => {
+    fireEvent.click(view.getByLabelText("Close SHELL"));
+    setTerminalPanelMode("closed");
+  });
+  await waitFor(() => assert.equal(view.queryByRole("tab"), null));
+  assert.equal(
+    calls.some(({ command }) => command === "terminal_close"),
+    false,
+    "a not-yet-attached session cannot be closed by backend id",
+  );
+
+  await act(async () => attachResolver());
+  await waitFor(() =>
+    assert.ok(
+      calls.some(
+        ({ command, args }) =>
+          command === "terminal_close" && args.sessionId === "session-1",
+      ),
+    ),
+  );
+  view.unmount();
+});
+
+test("closing removes the tab before native shutdown resolves", async () => {
   const { createElement } = await import("react");
   const { fireEvent, render, waitFor } = await import("@testing-library/react");
   const { ThemeProvider } = await import("@/shared/theme/ThemeProvider");
@@ -349,14 +484,19 @@ test("a successful close removes the tab even if the exit event is lost", async
   await waitFor(() =>
     assert.ok(calls.some(({ command }) => command === "terminal_attach")),
   );
-  await waitFor(() => assert.ok(view.queryByRole("tab", { name: /SHELL/ })));
+  await waitFor(() =>
+    assert.ok(view.queryByRole("tab", { name: /Terminal 1/ })),
+  );
 
+  deferClose = true;
   fireEvent.click(view.getByLabelText("Close SHELL"));
 
   await waitFor(() =>
     assert.ok(calls.some(({ command }) => command === "terminal_close")),
   );
   await waitFor(() => assert.equal(view.queryByRole("tab"), null));
+  assert.equal(typeof closeResolver, "function");
+  closeResolver();
   view.unmount();
 });
 
@@ -423,3 +563,43 @@ test("wheel deltas reach terminal_scroll with the DOM sign intact", async () =>
 
   view.unmount();
 });
+
+test("a non-channel route closes the panel and ignores the terminal shortcut", async () => {
+  const { createElement } = await import("react");
+  const { act, render, waitFor } = await import("@testing-library/react");
+  const { ThemeProvider } = await import("@/shared/theme/ThemeProvider");
+  const { TerminalBootstrap } = await import("./TerminalBootstrap.tsx");
+  const { getTerminalPanelSnapshotForTests } = await import(
+    "./terminalPanelStore.ts"
+  );
+
+  setTerminalPanelMode("docked");
+  const view = render(
+    createElement(
+      ThemeProvider,
+      null,
+      createElement(TerminalBootstrap, {
+        channelId: null,
+        channelName: null,
+        npub: "npub1owner",
+        relayUrl: "wss://relay.example",
+        threadId: null,
+      }),
+    ),
+  );
+  await waitFor(() =>
+    assert.equal(getTerminalPanelSnapshotForTests().mode, "closed"),
+  );
+
+  const chord = {
+    bubbles: true,
+    code: "KeyJ",
+    metaKey: true,
+  };
+  act(() => {
+    window.dispatchEvent(new KeyboardEvent("keydown", chord));
+    window.dispatchEvent(new KeyboardEvent("keyup", chord));
+  });
+  assert.equal(getTerminalPanelSnapshotForTests().mode, "closed");
+  view.unmount();
+});
diff --git a/desktop/src/features/terminal/TerminalBootstrap.tsx b/desktop/src/features/terminal/TerminalBootstrap.tsx
index 20905e9fb7..5ed653c6a1 100644
--- a/desktop/src/features/terminal/TerminalBootstrap.tsx
+++ b/desktop/src/features/terminal/TerminalBootstrap.tsx
@@ -11,6 +11,12 @@ import {
   TerminalSubstrate,
   type TerminalViewportSize,
 } from "./TerminalSubstrate";
+import {
+  setTerminalPanelMode,
+  setTerminalSessionChannels,
+  toggleTerminalPanel,
+  useTerminalPanel,
+} from "./terminalPanelStore";
 
 type TerminalContext = {
   channelId: string;
@@ -27,6 +33,7 @@ type Session = {
   frame: TerminalFrameMessage | undefined;
   title: string;
   closing: boolean;
+  context: TerminalContext;
 };
 
 const INITIAL_SIZE: TerminalViewportSize = {
@@ -68,13 +75,98 @@ export function TerminalBootstrap({
   const mountedRef = React.useRef(true);
   const sizeRef = React.useRef(INITIAL_SIZE);
   const resizeChainRef = React.useRef(Promise.resolve());
+  const connectionSizesRef = React.useRef(
+    new WeakMap<TerminalConnection, TerminalViewportSize>(),
+  );
+  const closedSessionKeysRef = React.useRef(new Set<string>());
   const [sessions, setSessions] = React.useState<Session[]>([]);
   const [activeKey, setActiveKey] = React.useState<string | null>(null);
   const [available, setAvailable] = React.useState(() => isTauri());
+  const panel = useTerminalPanel();
+  const [renderedMode, setRenderedMode] = React.useState<
+    "docked" | "maximized"
+  >(panel.mode === "maximized" ? "maximized" : "docked");
+  const [panelVisible, setPanelVisible] = React.useState(
+    panel.mode !== "closed",
+  );
+  const [panelMounted, setPanelMounted] = React.useState(
+    panel.mode !== "closed",
+  );
+  const [splashPending, setSplashPending] = React.useState(true);
+  const [viewportReportingEnabled, setViewportReportingEnabled] =
+    React.useState(panel.mode !== "closed");
+  const previousPanelModeRef = React.useRef(panel.mode);
   const acknowledgedSequenceRef = React.useRef(new Map<string, number>());
   const sessionsRef = React.useRef(sessions);
   sessionsRef.current = sessions;
 
+  React.useEffect(() => {
+    const previousMode = previousPanelModeRef.current;
+    if (previousMode === panel.mode) return;
+    previousPanelModeRef.current = panel.mode;
+    setViewportReportingEnabled(false);
+
+    let firstFrame = 0;
+    let secondFrame = 0;
+    let timeout = 0;
+    if (panel.mode !== "closed") {
+      setRenderedMode(panel.mode);
+      setPanelMounted(true);
+      if (previousMode === "closed") {
+        // Give the collapsed substrate a painted frame before expanding it.
+        // A single rAF can still be batched into the mount commit by React.
+        setPanelVisible(false);
+        firstFrame = window.requestAnimationFrame(() => {
+          secondFrame = window.requestAnimationFrame(() =>
+            setPanelVisible(true),
+          );
+        });
+      } else {
+        setPanelVisible(true);
+      }
+      // Resizing the PTY through every animation frame causes shell reflow and
+      // leaves transient filler rows in the scrollback. Publish only the final
+      // settled viewport.
+      timeout = window.setTimeout(() => setViewportReportingEnabled(true), 200);
+    } else {
+      setPanelVisible(false);
+      timeout = window.setTimeout(() => setPanelMounted(false), 180);
+    }
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+      window.clearTimeout(timeout);
+    };
+  }, [panel.mode]);
+
+  React.useEffect(() => {
+    if (!context && panel.mode !== "closed") setTerminalPanelMode("closed");
+  }, [context, panel.mode]);
+
+  React.useEffect(() => {
+    const toggle = (event: KeyboardEvent) => {
+      if (
+        !context ||
+        panel.mode !== "closed" ||
+        event.code !== "KeyJ" ||
+        (!event.metaKey && !event.ctrlKey) ||
+        event.altKey ||
+        event.shiftKey ||
+        event.isComposing
+      )
+        return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (event.type === "keyup") toggleTerminalPanel();
+    };
+    window.addEventListener("keydown", toggle, true);
+    window.addEventListener("keyup", toggle, true);
+    return () => {
+      window.removeEventListener("keydown", toggle, true);
+      window.removeEventListener("keyup", toggle, true);
+    };
+  }, [context, panel.mode]);
+
   const fail = React.useCallback((error: unknown) => {
     report(error);
     setAvailable(false);
@@ -102,6 +194,7 @@ export function TerminalBootstrap({
       frame: undefined,
       title: "SHELL",
       closing: false,
+      context: spawnContext,
     };
     setSessions((current) => [...current, initial]);
     setActiveKey(key);
@@ -144,6 +237,8 @@ export function TerminalBootstrap({
     )
       .then((connection) => {
         if (!mountedRef.current) return connection.detach();
+        if (closedSessionKeysRef.current.delete(key)) return connection.close();
+        connectionSizesRef.current.set(connection, size);
         update((session) => ({ ...session, connection }));
         if (sizeRef.current !== size) {
           const currentSize = sizeRef.current;
@@ -155,20 +250,49 @@ export function TerminalBootstrap({
                 currentSize.pixelWidth,
                 currentSize.pixelHeight,
               );
+              connectionSizesRef.current.set(connection, currentSize);
               await connection.viewportReady(viewport);
             })
             .catch(fail);
         }
       })
       .catch((error) => {
+        if (closedSessionKeysRef.current.delete(key)) return;
         removeSession(key);
         fail(error);
       });
   }, [available, fail, removeSession]);
 
+  const contextChannelId = context?.channelId ?? null;
+  const channelSessions = React.useMemo(
+    () =>
+      contextChannelId
+        ? sessions.filter(
+            (session) => session.context.channelId === contextChannelId,
+          )
+        : [],
+    [contextChannelId, sessions],
+  );
+
+  React.useEffect(() => {
+    setTerminalSessionChannels(
+      sessions.map((session) => session.context.channelId),
+    );
+  }, [sessions]);
+
   React.useEffect(() => {
-    if (available && context && sessions.length === 0) createSession();
-  }, [available, context, createSession, sessions.length]);
+    if (panel.mode === "closed" || !available || !context) return;
+    if (channelSessions.length === 0) createSession();
+    else if (!channelSessions.some((session) => session.key === activeKey))
+      setActiveKey(channelSessions.at(-1)?.key ?? null);
+  }, [
+    activeKey,
+    available,
+    channelSessions,
+    context,
+    createSession,
+    panel.mode,
+  ]);
 
   React.useEffect(() => {
     mountedRef.current = true;
@@ -180,8 +304,34 @@ export function TerminalBootstrap({
     };
   }, []);
 
-  const active = sessions.find((session) => session.key === activeKey) ?? null;
+  const active =
+    channelSessions.find((session) => session.key === activeKey) ??
+    channelSessions.at(-1) ??
+    null;
+
+  React.useEffect(() => {
+    const connection = active?.connection;
+    if (!connection) return;
+    const size = sizeRef.current;
+    if (connectionSizesRef.current.get(connection) === size) return;
+    resizeChainRef.current = resizeChainRef.current
+      .then(async () => {
+        const viewport = await connection.resize(
+          size.columns,
+          size.rows,
+          size.pixelWidth,
+          size.pixelHeight,
+        );
+        connectionSizesRef.current.set(connection, size);
+        await connection.viewportReady(viewport);
+      })
+      .catch(fail);
+  }, [active?.connection, fail]);
+
   const send = (operation: Promise<void> | undefined) => operation?.catch(fail);
+  const handleSplashStarted = React.useCallback(() => {
+    setSplashPending(false);
+  }, []);
 
   const handleSize = React.useCallback(
     (size: TerminalViewportSize) => {
@@ -198,6 +348,7 @@ export function TerminalBootstrap({
             size.pixelWidth,
             size.pixelHeight,
           );
+          connectionSizesRef.current.set(connection, size);
           await connection.viewportReady(viewport);
         })
         .catch(fail);
@@ -205,14 +356,24 @@ export function TerminalBootstrap({
     [activeKey, fail],
   );
 
+  if (!panelMounted) return null;
+
   return (
     <TerminalSubstrate
       bracketedPaste={active?.frame?.bracketedPaste ?? false}
-      channelName={channelName}
-      enabled={available && Boolean(active)}
+      channelName={active?.context.channelName ?? channelName}
+      enabled={available && Boolean(context)}
+      mode={renderedMode}
+      visible={panelVisible}
+      onHide={() => setTerminalPanelMode("closed")}
+      onModeChange={setTerminalPanelMode}
+      onToggle={toggleTerminalPanel}
       focusReportingEnabled={active?.frame?.focusReporting ?? false}
       frame={active?.frame}
-      sessionFrames={sessions.flatMap((session) =>
+      viewportReportingEnabled={viewportReportingEnabled}
+      showSplash={splashPending}
+      onSplashStarted={handleSplashStarted}
+      sessionFrames={channelSessions.flatMap((session) =>
         session.frame ? [{ sessionId: session.key, frame: session.frame }] : [],
       )}
       onCloseSession={(key) => {
@@ -225,6 +386,7 @@ export function TerminalBootstrap({
           (session) => session.key === key,
         )?.connection;
         if (!connection) {
+          closedSessionKeysRef.current.add(key);
           removeSession(key);
           return;
         }
@@ -263,12 +425,14 @@ export function TerminalBootstrap({
         send(active?.connection?.focus(focused))
       }
       onViewportSize={handleSize}
-      sessions={sessions.map((session) => ({
-        active: session.key === activeKey,
-        closing: session.closing,
-        id: session.key,
-        title: session.title,
-      }))}
+      sessions={channelSessions
+        .filter((session) => !session.closing)
+        .map((session) => ({
+          active: session.key === activeKey,
+          closing: session.closing,
+          id: session.key,
+          title: session.title,
+        }))}
     />
   );
 }
diff --git a/desktop/src/features/terminal/TerminalSubstrate.test.mjs b/desktop/src/features/terminal/TerminalSubstrate.test.mjs
index dad8c0dd1a..ef138396b9 100644
--- a/desktop/src/features/terminal/TerminalSubstrate.test.mjs
+++ b/desktop/src/features/terminal/TerminalSubstrate.test.mjs
@@ -57,6 +57,7 @@ before(async () => {
     playbackRate: 1,
     reverse() {},
   });
+  dom.window.HTMLElement.prototype.setPointerCapture = () => {};
   ({ act, cleanup, fireEvent, render, waitFor } = await import(
     "@testing-library/react"
   ));
@@ -232,6 +233,89 @@ test("tab actions restore terminal input focus", async () => {
   }
 });
 
+test("drag resize batches visual updates and commits state only on release", async () => {
+  const { view } = fixture({ mode: "docked" });
+  await ready(view);
+  const substrate = view.container.querySelector(".buzz-terminal-substrate");
+  const handle = view.getByLabelText("Resize Buzz Term");
+
+  fireEvent.pointerDown(handle, { clientY: 500, pointerId: 1 });
+  fireEvent.pointerMove(handle, { clientY: 400, pointerId: 2 });
+  fireEvent.pointerUp(handle, { clientY: 400, pointerId: 2 });
+  assert.equal(substrate.dataset.terminalResizing, "true");
+  fireEvent.pointerMove(handle, { clientY: 460, pointerId: 1 });
+  fireEvent.pointerMove(handle, { clientY: 440, pointerId: 1 });
+  assert.equal(substrate.dataset.terminalResizing, "true");
+  assert.equal(window.localStorage.getItem("buzz-terminal-dock-height"), null);
+
+  await waitFor(() => assert.equal(substrate.style.height, "380px"));
+  fireEvent.pointerUp(handle, { clientY: 440, pointerId: 1 });
+  assert.equal(substrate.dataset.terminalResizing, undefined);
+  assert.equal(window.localStorage.getItem("buzz-terminal-dock-height"), "380");
+});
+
+test("drag resize repaints the canvas without reporting PTY geometry until release", async () => {
+  let canvasHeight = 280;
+  const viewportSizes = [];
+  dom.window.HTMLCanvasElement.prototype.getBoundingClientRect = () => ({
+    bottom: canvasHeight,
+    height: canvasHeight,
+    left: 0,
+    right: 940.8,
+    top: 0,
+    width: 940.8,
+    x: 0,
+    y: 0,
+    toJSON() {},
+  });
+  const { view } = fixture({
+    mode: "docked",
+    onViewportSize(size) {
+      viewportSizes.push(size);
+    },
+  });
+  await ready(view);
+  const canvas = view.container.querySelector(
+    ".buzz-terminal-viewport > canvas:not(.buzz-terminal-welcome)",
+  );
+  const handle = view.getByLabelText("Resize Buzz Term");
+  await waitFor(() => assert.equal(canvas.height, 280));
+  const reportsBeforeDrag = viewportSizes.length;
+
+  fireEvent.pointerDown(handle, { clientY: 500, pointerId: 1 });
+  canvasHeight = 340;
+  fireEvent.pointerMove(handle, { clientY: 440, pointerId: 1 });
+
+  await waitFor(() => assert.equal(canvas.height, 340));
+  assert.equal(
+    viewportSizes.length,
+    reportsBeforeDrag,
+    "visual repaint must not resize the PTY during drag",
+  );
+
+  fireEvent.pointerUp(handle, { clientY: 440, pointerId: 1 });
+  await waitFor(() => assert.equal(viewportSizes.at(-1).pixelHeight, 340));
+});
+
+test("unmount cancels a queued drag update", async () => {
+  const { view } = fixture({ mode: "docked" });
+  await ready(view);
+  const handle = view.getByLabelText("Resize Buzz Term");
+  const previousHeight = handle.closest(".buzz-terminal-substrate").style
+    .height;
+
+  fireEvent.pointerDown(handle, { clientY: 500, pointerId: 1 });
+  fireEvent.pointerMove(handle, { clientY: 440, pointerId: 1 });
+  view.unmount();
+  await new Promise((resolve) => window.requestAnimationFrame(resolve));
+
+  assert.equal(window.localStorage.getItem("buzz-terminal-dock-height"), null);
+  assert.equal(
+    handle.closest(".buzz-terminal-substrate").style.height,
+    previousHeight,
+  );
+});
+
 const EMPTY_FRAME = {
   cursor: { column: 0, line: 0, visible: false },
   full: false,
@@ -275,74 +359,83 @@ async function reveal(view) {
   );
 }
 
-test("spawn-time output before the first reveal keeps the welcome overlay", async () => {
-  const subject = fixture({ frame: EMPTY_FRAME });
-  await ready(subject.view);
-  await expectWelcome(subject.view, true);
-
-  subject.rerender({ frame: VISIBLE_FRAME });
-  await expectWelcome(subject.view, true);
-
-  await reveal(subject.view);
-  await expectWelcome(subject.view, true);
-});
-
-test("the first keystroke dismisses the welcome overlay", async () => {
-  const subject = fixture({ frame: VISIBLE_FRAME });
+test("the first settled reveal runs one bounded splash", async () => {
+  let starts = 0;
+  const subject = fixture({
+    frame: EMPTY_FRAME,
+    onSplashStarted() {
+      starts += 1;
+    },
+    showSplash: true,
+    viewportReportingEnabled: false,
+    visible: true,
+  });
   await ready(subject.view);
-  await reveal(subject.view);
-  await expectWelcome(subject.view, true);
+  await expectWelcome(subject.view, false);
 
-  fireEvent.input(subject.view.getByLabelText("Terminal input"), {
-    target: { value: "l" },
+  subject.rerender({
+    frame: EMPTY_FRAME,
+    onSplashStarted() {
+      starts += 1;
+    },
+    showSplash: true,
+    viewportReportingEnabled: true,
+    visible: true,
   });
+  await expectWelcome(subject.view, true);
+  assert.equal(starts, 1);
+  await act(async () => new Promise((resolve) => setTimeout(resolve, 2_550)));
   await expectWelcome(subject.view, false);
 });
 
-test("non-empty output after the reveal dismisses the welcome overlay", async () => {
-  const subject = fixture({ frame: EMPTY_FRAME });
+test("later reveals do not replay a consumed splash", async () => {
+  const subject = fixture({
+    frame: EMPTY_FRAME,
+    showSplash: true,
+    viewportReportingEnabled: true,
+    visible: true,
+  });
   await ready(subject.view);
-  await reveal(subject.view);
   await expectWelcome(subject.view, true);
 
-  subject.rerender({ frame: VISIBLE_FRAME });
+  subject.rerender({ frame: EMPTY_FRAME, showSplash: false, visible: false });
+  await expectWelcome(subject.view, false);
+  subject.rerender({ frame: EMPTY_FRAME, showSplash: false, visible: true });
   await expectWelcome(subject.view, false);
 });
 
-test("empty active output keeps the welcome overlay", async () => {
-  const subject = fixture({ frame: EMPTY_FRAME });
-  await ready(subject.view);
-  await reveal(subject.view);
-  await expectWelcome(subject.view, true);
-
-  subject.rerender({
-    frame: {
-      ...EMPTY_FRAME,
-      viewport: { ...EMPTY_FRAME.viewport, generation: 2 },
-    },
+test("a consumed splash stays absent after substrate remount", async () => {
+  const first = fixture({
+    frame: EMPTY_FRAME,
+    showSplash: true,
+    visible: true,
   });
-  await expectWelcome(subject.view, true);
+  await ready(first.view);
+  await expectWelcome(first.view, true);
+  first.view.unmount();
+
+  const second = fixture({
+    frame: EMPTY_FRAME,
+    showSplash: false,
+    visible: true,
+  });
+  await ready(second.view);
+  await expectWelcome(second.view, false);
 });
 
-test("non-empty output from an inactive PTY keeps the welcome overlay", async () => {
+test("the first keystroke dismisses the welcome overlay early", async () => {
   const subject = fixture({
-    sessionFrames: [{ frame: EMPTY_FRAME, sessionId: "one" }],
-    sessions: [
-      { active: true, closing: false, id: "one", title: "SHELL" },
-      { active: false, closing: false, id: "two", title: "LOG" },
-    ],
+    frame: EMPTY_FRAME,
+    showSplash: true,
+    visible: true,
   });
   await ready(subject.view);
-  await reveal(subject.view);
   await expectWelcome(subject.view, true);
 
-  subject.rerender({
-    sessionFrames: [
-      { frame: EMPTY_FRAME, sessionId: "one" },
-      { frame: VISIBLE_FRAME, sessionId: "two" },
-    ],
+  fireEvent.input(subject.view.getByLabelText("Terminal input"), {
+    target: { value: "l" },
   });
-  await expectWelcome(subject.view, true);
+  await expectWelcome(subject.view, false);
 });
 
 test("mounted wheel path accumulates fractional lines per active session", async () => {
@@ -764,213 +857,3 @@ test("the handoff chord still toggles with the tab layer installed", async () =>
 // Splash animation lifecycle.
 //
 // This substrate is mounted unconditionally on every route and merely
-// CSS-concealed in Buzz mode, so "is the splash animating?" is a question about
-// `owner`, not about mounting. A loop gated only on `welcomeVisible` ran at
-// 120 rAF/s behind the whole app forever for anyone who never opened the
-// terminal; that is the defect these arms exist to keep dead.
-//
-// The rAF clock is driven by hand rather than by jsdom's visual loop: a real
-// clock can only show "frames happened", while a manual one can advance AFTER a
-// transition and prove no successor callback was scheduled. Distinguishing a
-// cancelled frame from a frame that was never scheduled needs that.
-function splashClock() {
-  const real = {
-    request: dom.window.requestAnimationFrame,
-    cancel: dom.window.cancelAnimationFrame,
-  };
-  const pending = new Map();
-  let nextHandle = 1;
-  let scheduled = 0;
-  let cancelled = 0;
-  dom.window.requestAnimationFrame = (callback) => {
-    const handle = nextHandle++;
-    pending.set(handle, callback);
-    scheduled += 1;
-    return handle;
-  };
-  dom.window.cancelAnimationFrame = (handle) => {
-    if (pending.delete(handle)) cancelled += 1;
-  };
-  return {
-    get scheduled() {
-      return scheduled;
-    },
-    get cancelled() {
-      return cancelled;
-    },
-    get outstanding() {
-      return pending.size;
-    },
-    /** Run every queued callback once, as one frame would. */
-    advance(now = 16) {
-      const due = [...pending.entries()];
-      pending.clear();
-      act(() => {
-        for (const [, callback] of due) callback(now);
-      });
-      return due.length;
-    },
-    restore() {
-      dom.window.requestAnimationFrame = real.request;
-      dom.window.cancelAnimationFrame = real.cancel;
-    },
-  };
-}
-
-/** Draws issued to the banner/splash canvas only. */
-function bannerDraws(view) {
-  const banner = view.container.querySelector(".buzz-terminal-welcome");
-  if (!banner) return [];
-  return paintLog.filter((entry) => entry.canvas === banner);
-}
-
-test("the splash animation runs only while the terminal is revealed", async () => {
-  const clock = splashClock();
-  try {
-    // ARM 1 — concealed entry. `enabled` defaults true, so this is the
-    // production-shaped state that used to animate behind the channel view.
-    const subject = fixture();
-    await ready(subject.view);
-    const substrate = subject.view.container.querySelector(
-      ".buzz-terminal-substrate",
-    );
-    assert.equal(substrate.dataset.terminalOwner, "buzz");
-    await expectWelcome(subject.view, true);
-    assert.equal(
-      clock.scheduled,
-      0,
-      "ARM 1: no splash frame is scheduled while Buzz owns the screen",
-    );
-    clock.advance();
-    assert.equal(
-      bannerDraws(subject.view).length,
-      0,
-      "ARM 1: and no hidden banner paint happens either",
-    );
-
-    // ARM 2 — revealed. The positive control: the loop must actually run, or
-    // arms 1/3 are satisfied by a loop that is simply broken everywhere.
-    await reveal(subject.view);
-    assert.ok(
-      clock.scheduled > 0,
-      "ARM 2: revealing the terminal starts the splash loop",
-    );
-    const afterReveal = clock.scheduled;
-    assert.equal(clock.advance(), 1, "ARM 2: exactly one frame was pending");
-    assert.ok(
-      bannerDraws(subject.view).length > 0,
-      "ARM 2: the revealed splash actually paints",
-    );
-    assert.ok(
-      clock.scheduled > afterReveal,
-      "ARM 2: the loop reschedules itself while revealed",
-    );
-
-    // ARM 3 — terminal -> buzz. The regression users hit: leaving the terminal
-    // must CANCEL the outstanding frame, not merely stop new ones. Advancing
-    // the clock afterwards is what separates those two.
-    const beforeConceal = clock.scheduled;
-    const cancelledBefore = clock.cancelled;
-    toggleChord();
-    await waitFor(() => assert.equal(substrate.dataset.terminalOwner, "buzz"));
-    assert.ok(
-      clock.cancelled > cancelledBefore,
-      "ARM 3: concealing cancels the frame that was already scheduled",
-    );
-    assert.equal(
-      clock.outstanding,
-      0,
-      "ARM 3: nothing is left queued after cleanup",
-    );
-    const drawsBefore = bannerDraws(subject.view).length;
-    clock.advance();
-    clock.advance();
-    assert.equal(
-      clock.scheduled,
-      beforeConceal,
-      "ARM 3: no successor callback is scheduled after concealing",
-    );
-    assert.equal(
-      bannerDraws(subject.view).length,
-      drawsBefore,
-      "ARM 3: and no further hidden banner paint occurs",
-    );
-
-    // ARM 4 — buzz -> terminal again. Proves cleanup did not poison the
-    // positive path: a fix that permanently kills the loop passes 1 and 3.
-    await reveal(subject.view);
-    assert.ok(
-      clock.scheduled > beforeConceal,
-      "ARM 4: re-revealing restarts the splash loop",
-    );
-    clock.advance();
-    assert.ok(
-      bannerDraws(subject.view).length > drawsBefore,
-      "ARM 4: and it paints again",
-    );
-  } finally {
-    clock.restore();
-  }
-});
-
-// The gate above reads `owner` alone, which is only sound because
-// `owner === "terminal"` implies `enabled`: the sole `commitOwner("terminal")`
-// call site sits behind an `!enabled` early return, and dropping `enabled`
-// forces ownership back to Buzz. That implication is true by construction
-// today and nothing else in this file pins it, so a refactor adding a second
-// reveal path outside the `enabled` guard would silently widen the gate. This
-// arm is that implication, held as a regression test in both directions.
-test("a disabled terminal cannot reveal, so owner-gating cannot widen", async () => {
-  const clock = splashClock();
-  try {
-    const subject = fixture({ enabled: false });
-    await ready(subject.view);
-    const substrate = subject.view.container.querySelector(
-      ".buzz-terminal-substrate",
-    );
-
-    toggleChord();
-    await waitFor(() => assert.ok(substrate.dataset.terminalOwner));
-    assert.equal(
-      substrate.dataset.terminalOwner,
-      "buzz",
-      "the toggle chord must not reveal a terminal that has no session",
-    );
-    assert.equal(
-      clock.scheduled,
-      0,
-      "and no splash frame is scheduled while disabled",
-    );
-    clock.advance();
-    assert.equal(
-      bannerDraws(subject.view).length,
-      0,
-      "nor any hidden banner paint",
-    );
-
-    // The other direction: losing `enabled` while revealed must concede
-    // ownership and cancel the loop, which is what makes the `enabled` term
-    // redundant in the animation gate rather than merely absent from it.
-    subject.rerender({ enabled: true });
-    await reveal(subject.view);
-    assert.ok(clock.scheduled > 0, "the enabled terminal does reveal and run");
-    const afterReveal = clock.scheduled;
-
-    subject.rerender({ enabled: false });
-    await waitFor(() => assert.equal(substrate.dataset.terminalOwner, "buzz"));
-    assert.equal(
-      clock.outstanding,
-      0,
-      "losing the session cancels the outstanding splash frame",
-    );
-    clock.advance();
-    clock.advance();
-    assert.equal(
-      clock.scheduled,
-      afterReveal,
-      "and schedules no successor once disabled",
-    );
-  } finally {
-    clock.restore();
-  }
-});
diff --git a/desktop/src/features/terminal/TerminalSubstrate.tsx b/desktop/src/features/terminal/TerminalSubstrate.tsx
index f1414d7d5e..6f3735fa3c 100644
--- a/desktop/src/features/terminal/TerminalSubstrate.tsx
+++ b/desktop/src/features/terminal/TerminalSubstrate.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
+import { ChevronRight, Maximize2, Minimize2, Plus, X } from "lucide-react";
 
 import { useTheme } from "@/shared/theme/ThemeProvider";
 import { cn } from "@/shared/lib/cn";
 import { isMacPlatform } from "@/shared/lib/platform";
-import { FadeController } from "./fadeController";
 import {
   INITIAL_HANDOFF_STATE,
   accumulateScrollLines,
@@ -37,7 +37,6 @@ export type TerminalSessionTab = {
 };
 
 type TerminalSubstrateProps = {
-  appSurfaceRef?: React.RefObject<HTMLDivElement | null>;
   channelName: string | null;
   frame?: TerminalFrame;
   sessionFrames?: readonly { sessionId: string; frame: TerminalFrame }[];
@@ -45,8 +44,16 @@ type TerminalSubstrateProps = {
   bracketedPaste: boolean;
   focusReportingEnabled: boolean;
   enabled?: boolean;
+  mode?: "docked" | "maximized";
+  visible?: boolean;
+  onHide?: () => void;
+  onModeChange?: (mode: "docked" | "maximized") => void;
+  onToggle?: () => void;
   onFrameConsumed?: (frame: TerminalFrame) => void;
   onViewportSize?: (size: TerminalViewportSize) => void;
+  viewportReportingEnabled?: boolean;
+  showSplash?: boolean;
+  onSplashStarted?: () => void;
   onInput: (text: string) => void;
   /** Whole cells scrolled, keeping the DOM's sign: negative goes back. */
   onScroll: (lines: number) => void;
@@ -66,26 +73,26 @@ function isToggleChord(event: KeyboardEvent): boolean {
 }
 
 const { width: CELL_WIDTH, height: CELL_HEIGHT } = TERMINAL_CELL_METRICS;
-
-function hasVisibleOutput(frame: TerminalFrame): boolean {
-  return frame.rows.some((row) =>
-    row.spans.some((span) =>
-      span.clusters.some((cluster) => cluster.text.trim().length > 0),
-    ),
-  );
-}
+const NOOP = () => {};
+const SPLASH_DURATION_MS = 2_500;
 
 export function TerminalSubstrate({
-  appSurfaceRef,
-  channelName,
   frame,
   sessionFrames,
   sessions,
   bracketedPaste,
   focusReportingEnabled,
   enabled = true,
+  mode = "docked",
+  visible = true,
+  onHide = NOOP,
+  onModeChange = NOOP,
+  onToggle,
   onFrameConsumed,
   onViewportSize,
+  viewportReportingEnabled = true,
+  showSplash = true,
+  onSplashStarted,
   onInput,
   onScroll,
   onTerminalFocusChange,
@@ -97,17 +104,20 @@ export function TerminalSubstrate({
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const bannerCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  const fadeRef = React.useRef<FadeController | null>(null);
   const handoffRef = React.useRef(INITIAL_HANDOFF_STATE);
   const gridsRef = React.useRef(new Map<string, TerminalGrid>());
   const appliedFramesRef = React.useRef(new WeakSet<TerminalFrame>());
   const gridRef = React.useRef<TerminalGrid | null>(null);
   const paintedPaletteRef = React.useRef(terminalPalette);
   const paintedSessionRef = React.useRef<string | null>(null);
-  const previousFocusRef = React.useRef<HTMLElement | null>(null);
   const reportedFocusRef = React.useRef<boolean | null>(null);
+  const reportedViewportSizeRef = React.useRef<TerminalViewportSize | null>(
+    null,
+  );
+  const dragCleanupRef = React.useRef<(() => void) | null>(null);
+  const resizeReportFrameRef = React.useRef(0);
+  const resizingRef = React.useRef(false);
   const scrollBySessionRef = React.useRef(new Map<string, number>());
-  const revealedRef = React.useRef(false);
   const activeSession = sessions.find((session) => session.active);
   const activeSessionId = activeSession?.id ?? null;
   const frames = React.useMemo(
@@ -118,21 +128,19 @@ export function TerminalSubstrate({
   );
   const [owner, setOwner] = React.useState<"buzz" | "terminal">("buzz");
   const [viewport, setViewport] = React.useState({ columns: 1, rows: 1 });
-  const [welcomeVisible, setWelcomeVisible] = React.useState(true);
+  const [welcomeVisible, setWelcomeVisible] = React.useState(false);
   const [cursorPainted, setCursorPainted] = React.useState(true);
   const [cursorReset, setCursorReset] = React.useState(0);
   const [reducedMotion, setReducedMotion] = React.useState(
     () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
   );
-  const shortcutLabel = /Mac|iPhone|iPad/.test(navigator.platform)
-    ? "⌘J"
-    : "CTRL+J";
-  const getAppSurface = React.useCallback(
-    () =>
-      appSurfaceRef?.current ??
-      document.querySelector<HTMLDivElement>(".buzz-huddle-app-surface"),
-    [appSurfaceRef],
-  );
+  const [dockHeight, setDockHeight] = React.useState(() => {
+    const stored = Number.parseInt(
+      window.localStorage.getItem("buzz-terminal-dock-height") ?? "",
+      10,
+    );
+    return Number.isFinite(stored) ? stored : 320;
+  });
   const banner = React.useMemo(
     () =>
       buildTerminalBanner(
@@ -149,32 +157,9 @@ export function TerminalSubstrate({
       } as React.CSSProperties)
     : undefined;
 
-  const commitOwner = React.useEffectEvent((next: "buzz" | "terminal") => {
-    const appSurface = getAppSurface();
-    if (!appSurface) return;
-    if (next === "terminal") {
-      revealedRef.current = true;
-      previousFocusRef.current =
-        document.activeElement instanceof HTMLElement
-          ? document.activeElement
-          : null;
-      appSurface.inert = true;
-      appSurface.setAttribute("aria-hidden", "true");
-      textareaRef.current?.focus({ preventScroll: true });
-    } else {
-      appSurface.inert = false;
-      appSurface.removeAttribute("aria-hidden");
-      const previous = previousFocusRef.current;
-      if (previous?.isConnected) previous.focus({ preventScroll: true });
-      else appSurface.focus({ preventScroll: true });
-    }
-    setOwner(next);
-  });
-
   const forceBuzzFallback = React.useEffectEvent(() => {
     handoffRef.current = { ...INITIAL_HANDOFF_STATE };
-    commitOwner("buzz");
-    fadeRef.current?.settle("conceal");
+    setOwner("buzz");
   });
 
   const sendInput = React.useEffectEvent((text: string) => {
@@ -187,6 +172,12 @@ export function TerminalSubstrate({
   const consumeFrame = React.useEffectEvent((nextFrame: TerminalFrame) => {
     onFrameConsumed?.(nextFrame);
   });
+  const beginSplash = React.useEffectEvent(() => {
+    if (!showSplash) return false;
+    onSplashStarted?.();
+    setWelcomeVisible(true);
+    return true;
+  });
   /**
    * Tab chords are handled at the window in capture phase, like the ⌘J
    * handoff, so they win over the focused textarea. Gated on terminal
@@ -212,6 +203,7 @@ export function TerminalSubstrate({
     return true;
   });
   const reportViewportSize = React.useEffectEvent(() => {
+    if (!viewportReportingEnabled) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     const bounds = canvas.getBoundingClientRect();
@@ -220,14 +212,33 @@ export function TerminalSubstrate({
     const pixelHeight = Math.max(1, Math.round(bounds.height * dpr));
     const columns = Math.max(1, Math.floor(bounds.width / CELL_WIDTH));
     const rows = Math.max(1, Math.floor(bounds.height / CELL_HEIGHT));
+    const size = { columns, rows, pixelWidth, pixelHeight };
+    if (resizingRef.current) return;
     setViewport((current) =>
       current.columns === columns && current.rows === rows
         ? current
         : { columns, rows },
     );
-    onViewportSize?.({ columns, rows, pixelWidth, pixelHeight });
+    const reported = reportedViewportSizeRef.current;
+    if (
+      reported?.columns === columns &&
+      reported.rows === rows &&
+      reported.pixelWidth === pixelWidth &&
+      reported.pixelHeight === pixelHeight
+    )
+      return;
+    reportedViewportSizeRef.current = size;
+    onViewportSize?.(size);
   });
 
+  React.useEffect(
+    () => () => {
+      dragCleanupRef.current?.();
+      window.cancelAnimationFrame(resizeReportFrameRef.current);
+    },
+    [],
+  );
+
   React.useEffect(() => {
     if (!enabled) forceBuzzFallback();
   }, [enabled]);
@@ -258,11 +269,15 @@ export function TerminalSubstrate({
     reportViewportSize();
     const ResizeObserverConstructor = window.ResizeObserver;
     if (!ResizeObserverConstructor) return;
-    const observer = new ResizeObserverConstructor(reportViewportSize);
+    const observer = new ResizeObserverConstructor(() => reportViewportSize());
     observer.observe(canvas);
     return () => observer.disconnect();
   }, []);
 
+  React.useLayoutEffect(() => {
+    if (viewportReportingEnabled) reportViewportSize();
+  }, [viewportReportingEnabled]);
+
   React.useEffect(() => {
     if (!focusReportingEnabled) {
       reportedFocusRef.current = null;
@@ -284,92 +299,71 @@ export function TerminalSubstrate({
   }, [focusReportingEnabled, onTerminalFocusChange, owner]);
 
   React.useLayoutEffect(() => {
-    const appSurface = getAppSurface();
-    if (!appSurface) return;
-    fadeRef.current = new FadeController(appSurface);
+    if (!enabled) {
+      forceBuzzFallback();
+      return;
+    }
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (!enabled) return;
       if (runTabChord(event)) {
         event.preventDefault();
         event.stopImmediatePropagation();
         return;
       }
-      if (!isToggleChord(event)) return;
-      if (event.isComposing) {
-        handoffRef.current = reduceHandoff(handoffRef.current, {
-          type: "focus-lost",
-        }).state;
-        return;
-      }
+      if (!isToggleChord(event) || event.isComposing) return;
       event.preventDefault();
       event.stopImmediatePropagation();
-      const result = reduceHandoff(handoffRef.current, {
-        type: "chord-down",
-        repeat: event.repeat,
-      });
-      handoffRef.current = result.state;
     };
     const handleKeyUp = (event: KeyboardEvent) => {
-      if (!enabled || !isToggleChord(event)) return;
+      if (!isToggleChord(event) || event.isComposing) return;
       event.preventDefault();
       event.stopImmediatePropagation();
-      if (event.isComposing) return;
-      const result = reduceHandoff(handoffRef.current, { type: "chord-up" });
-      handoffRef.current = result.state;
-      if (!result.toggled) return;
-      commitOwner(result.state.owner);
-      fadeRef.current?.toggle(
-        window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-      );
-    };
-    const cancelChord = () => {
-      handoffRef.current = reduceHandoff(handoffRef.current, {
-        type: "focus-lost",
-      }).state;
+      if (onToggle) onToggle();
+      else {
+        setOwner((current) => {
+          const next = current === "terminal" ? "buzz" : "terminal";
+          if (next === "terminal") {
+            textareaRef.current?.focus({ preventScroll: true });
+          }
+          return next;
+        });
+      }
     };
     window.addEventListener("keydown", handleKeyDown, true);
     window.addEventListener("keyup", handleKeyUp, true);
-    window.addEventListener("blur", cancelChord);
-    document.addEventListener("visibilitychange", cancelChord);
+    if (onToggle) {
+      setOwner("terminal");
+      textareaRef.current?.focus({ preventScroll: true });
+    }
     return () => {
-      fadeRef.current?.settle("conceal");
-      fadeRef.current = null;
-      appSurface.inert = false;
-      appSurface.removeAttribute("aria-hidden");
       window.removeEventListener("keydown", handleKeyDown, true);
       window.removeEventListener("keyup", handleKeyUp, true);
-      window.removeEventListener("blur", cancelChord);
-      document.removeEventListener("visibilitychange", cancelChord);
     };
-  }, [enabled, getAppSurface]);
+  }, [enabled, onToggle]);
 
-  // The banner's animation loop. It runs only while the splash is ON SCREEN,
-  // which needs BOTH conditions below — they are different questions:
-  //   - `welcomeVisible`: the splash has not been dismissed by terminal output.
-  //   - `owner === "terminal"`: the terminal layer is revealed at all.
-  //
-  // `owner` is the load-bearing one and it is not optional. This substrate is
-  // mounted unconditionally by AppShell on every route and merely CSS-concealed
-  // in Buzz mode (`.buzz-terminal-substrate` is `position:absolute; inset:0`),
-  // and `welcomeVisible` starts `true` and only clears on terminal INPUT. So a
-  // loop gated on `welcomeVisible` alone runs forever behind the whole app for
-  // anyone who never opens the terminal — measured at 120 rAF/s in the channel
-  // view, repainting a canvas nobody can see and slowing every other paint.
-  //
-  // Deliberately NOT gated on `enabled`: that is `available && Boolean(active)`
-  // where `available` is `isTauri()`, and a session is auto-created on channel
-  // open (TerminalBootstrap), so `enabled` is true while still concealed in the
-  // app and permanently false in the browser — it would gate the tests green
-  // and leave real users paying the cost. `owner` is user-gestured in both.
-  //
-  // `prefers-reduced-motion` takes the STATIC path (no motion argument), which
-  // is the shipped painter call, not a paused animation. Those are different:
-  // a stopped loop still parks on whatever phase it halted at.
   React.useEffect(() => {
-    const canvas = bannerCanvasRef.current;
-    if (!canvas || !banner || !terminalPalette || !welcomeVisible) return;
-    if (owner !== "terminal") return;
+    if (!visible) {
+      setWelcomeVisible(false);
+      return;
+    }
+    if (!viewportReportingEnabled || !banner || !beginSplash()) return;
+  }, [banner, viewportReportingEnabled, visible]);
+
+  React.useEffect(() => {
+    if (!welcomeVisible) return;
+    const timeout = window.setTimeout(
+      () => setWelcomeVisible(false),
+      SPLASH_DURATION_MS,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [welcomeVisible]);
 
+  // The splash is a bounded decoration, never a PTY-readiness gate. Each open
+  // gets one animation epoch; input may dismiss it early and the deadline ends
+  // it unconditionally even when an idle shell emits no new frames.
+  React.useEffect(() => {
+    const canvas = bannerCanvasRef.current;
+    if (!canvas || !banner || !terminalPalette || !welcomeVisible || !visible)
+      return;
     const dpr = window.devicePixelRatio || 1;
     if (reducedMotion) {
       if (!paintTerminalBanner(canvas, banner, terminalPalette, dpr))
@@ -377,7 +371,6 @@ export function TerminalSubstrate({
       return;
     }
 
-    // Built once per palette, not per frame: the table is phase-independent.
     const table = buildBannerColorTable(terminalPalette);
     const start = performance.now();
     let frame = 0;
@@ -395,47 +388,11 @@ export function TerminalSubstrate({
     };
     frame = window.requestAnimationFrame(tick);
     return () => window.cancelAnimationFrame(frame);
-  }, [banner, owner, reducedMotion, terminalPalette, welcomeVisible]);
-
-  React.useEffect(() => {
-    for (const delivered of frames) {
-      if (appliedFramesRef.current.has(delivered.frame)) continue;
-      appliedFramesRef.current.add(delivered.frame);
-      let grid = gridsRef.current.get(delivered.sessionId);
-      if (!grid) {
-        grid = new TerminalGrid(delivered.frame.viewport);
-        gridsRef.current.set(delivered.sessionId, grid);
-      } else if (
-        grid.viewport.generation !== delivered.frame.viewport.generation ||
-        grid.viewport.columns !== delivered.frame.viewport.columns ||
-        grid.viewport.screenLines !== delivered.frame.viewport.screenLines
-      ) {
-        grid.resize(delivered.frame.viewport);
-      }
-      grid.apply(delivered.frame);
-      consumeFrame(delivered.frame);
-      if (
-        delivered.sessionId === activeSessionId &&
-        revealedRef.current &&
-        hasVisibleOutput(delivered.frame)
-      ) {
-        // Policy: the banner is a splash for the reveal, so spawn-time shell
-        // output must not dismiss it. Only visible output from the active PTY
-        // that arrives after the terminal has been revealed (or the first
-        // keystroke, see sendInput) removes the overlay.
-        setWelcomeVisible(false);
-      }
-    }
-    gridRef.current = activeSessionId
-      ? (gridsRef.current.get(activeSessionId) ?? null)
-      : null;
+  }, [banner, reducedMotion, terminalPalette, visible, welcomeVisible]);
 
+  const paintTerminal = React.useEffectEvent(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
-    if (!terminalPalette) {
-      forceBuzzFallback();
-      return;
-    }
+    if (!canvas || !terminalPalette) return;
     const context = canvas.getContext("2d", { alpha: false });
     if (!context) {
       forceBuzzFallback();
@@ -473,6 +430,34 @@ export function TerminalSubstrate({
     }
     gridRef.current?.setCursorPainted(cursorPainted);
     gridRef.current?.paint(context, TERMINAL_CELL_METRICS, terminalPalette);
+  });
+
+  // Palette and blink changes must trigger a repaint; paintTerminal is an
+  // Effect Event, so the dependency analyzer cannot see those reads.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: visual-only inputs intentionally trigger this paint effect.
+  React.useEffect(() => {
+    for (const delivered of frames) {
+      if (appliedFramesRef.current.has(delivered.frame)) continue;
+      appliedFramesRef.current.add(delivered.frame);
+      let grid = gridsRef.current.get(delivered.sessionId);
+      if (!grid) {
+        grid = new TerminalGrid(delivered.frame.viewport);
+        gridsRef.current.set(delivered.sessionId, grid);
+      } else if (
+        grid.viewport.generation !== delivered.frame.viewport.generation ||
+        grid.viewport.columns !== delivered.frame.viewport.columns ||
+        grid.viewport.screenLines !== delivered.frame.viewport.screenLines
+      ) {
+        grid.resize(delivered.frame.viewport);
+      }
+      grid.apply(delivered.frame);
+      consumeFrame(delivered.frame);
+    }
+    gridRef.current = activeSessionId
+      ? (gridsRef.current.get(activeSessionId) ?? null)
+      : null;
+
+    paintTerminal();
   }, [activeSessionId, cursorPainted, frames, terminalPalette]);
 
   const runTabAction = (action: () => void) => {
@@ -486,8 +471,13 @@ export function TerminalSubstrate({
     <section
       aria-label="Buzz Term"
       className="buzz-terminal-substrate"
+      data-terminal-mode={mode}
       data-terminal-owner={owner}
-      style={terminalStyle}
+      data-terminal-visible={visible ? "true" : "false"}
+      style={{
+        ...terminalStyle,
+        ...(mode === "docked" ? { height: dockHeight } : undefined),
+      }}
       onWheel={(event) => {
         event.preventDefault();
         const sessionId = activeSession?.id;
@@ -507,6 +497,103 @@ export function TerminalSubstrate({
         if (result.lines !== 0) onScroll(result.lines);
       }}
     >
+      {mode === "docked" ? (
+        <hr
+          aria-label="Resize Buzz Term"
+          aria-orientation="horizontal"
+          aria-valuemax={Math.round(window.innerHeight * 0.7)}
+          aria-valuemin={180}
+          aria-valuenow={Math.round(dockHeight)}
+          className="buzz-terminal-resize-handle"
+          onKeyDown={(event) => {
+            if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+            event.preventDefault();
+            const delta = event.key === "ArrowUp" ? 16 : -16;
+            const next = Math.max(
+              180,
+              Math.min(window.innerHeight * 0.7, dockHeight + delta),
+            );
+            setDockHeight(next);
+            window.localStorage.setItem(
+              "buzz-terminal-dock-height",
+              String(Math.round(next)),
+            );
+          }}
+          onPointerDown={(event) => {
+            event.preventDefault();
+            dragCleanupRef.current?.();
+            window.cancelAnimationFrame(resizeReportFrameRef.current);
+            const handle = event.currentTarget;
+            const substrate = handle.closest<HTMLElement>(
+              ".buzz-terminal-substrate",
+            );
+            if (!substrate) return;
+            const pointerId = event.pointerId;
+            handle.setPointerCapture(pointerId);
+            resizingRef.current = true;
+            substrate.dataset.terminalResizing = "true";
+            const startY = event.clientY;
+            const startHeight = dockHeight;
+            let nextHeight = startHeight;
+            let frame = 0;
+            const applyHeight = () => {
+              frame = 0;
+              substrate.style.height = `${nextHeight}px`;
+              // Repaint the canvas at its new CSS size in the same visual
+              // frame. PTY geometry is still reported only on release, but
+              // leaving the old backing bitmap in a `height: 100%` canvas
+              // makes the browser stretch terminal rows during the drag.
+              paintTerminal();
+            };
+            const cleanup = () => {
+              window.cancelAnimationFrame(frame);
+              frame = 0;
+              handle.removeEventListener("pointermove", move);
+              handle.removeEventListener("pointerup", finish);
+              handle.removeEventListener("pointercancel", finish);
+              if (dragCleanupRef.current === cleanup)
+                dragCleanupRef.current = null;
+            };
+            const move = (moveEvent: PointerEvent) => {
+              if (moveEvent.pointerId !== pointerId) return;
+              nextHeight = Math.max(
+                180,
+                Math.min(
+                  window.innerHeight * 0.7,
+                  startHeight + startY - moveEvent.clientY,
+                ),
+              );
+              if (!frame) frame = window.requestAnimationFrame(applyHeight);
+            };
+            const finish = (finishEvent: PointerEvent) => {
+              if (finishEvent.pointerId !== pointerId) return;
+              if (frame) {
+                window.cancelAnimationFrame(frame);
+                applyHeight();
+              }
+              cleanup();
+              resizingRef.current = false;
+              delete substrate.dataset.terminalResizing;
+              setDockHeight(nextHeight);
+              window.localStorage.setItem(
+                "buzz-terminal-dock-height",
+                String(Math.round(nextHeight)),
+              );
+              resizeReportFrameRef.current = window.requestAnimationFrame(
+                () => {
+                  resizeReportFrameRef.current = 0;
+                  if (!resizingRef.current) reportViewportSize();
+                },
+              );
+            };
+            dragCleanupRef.current = cleanup;
+            handle.addEventListener("pointermove", move);
+            handle.addEventListener("pointerup", finish);
+            handle.addEventListener("pointercancel", finish);
+          }}
+          tabIndex={0}
+        />
+      ) : null}
       <div className="buzz-terminal-contract-bar">
         <div className="buzz-terminal-tabs" role="tablist">
           {sessions.map((session, index) => (
@@ -519,26 +606,36 @@ export function TerminalSubstrate({
               role="presentation"
             >
               <button
-                aria-selected={session.active}
-                className="buzz-terminal-tab-select"
+                aria-label={`Close ${session.title}`}
+                className="buzz-terminal-close"
                 disabled={session.closing}
-                onClick={() => runTabAction(() => onSelectSession(session.id))}
-                role="tab"
+                onClick={() => runTabAction(() => onCloseSession(session.id))}
                 type="button"
               >
-                <span className="buzz-terminal-designator">
-                  SYS.{String(index + 1).padStart(2, "0")}
-                </span>
-                <span>{session.closing ? "CLOSING" : session.title}</span>
+                <X />
               </button>
               <button
-                aria-label={`Close ${session.title}`}
-                className="buzz-terminal-close"
+                aria-label={`Terminal ${index + 1}${session.closing ? ", closing" : session.title !== "SHELL" ? `, ${session.title}` : ""}`}
+                aria-selected={session.active}
+                className="buzz-terminal-tab-select"
                 disabled={session.closing}
-                onClick={() => runTabAction(() => onCloseSession(session.id))}
+                onClick={() => runTabAction(() => onSelectSession(session.id))}
+                role="tab"
                 type="button"
               >
-                ×
+                <span className="buzz-terminal-designator buzz-terminal-tab-title">
+                  {session.title === "SHELL" ? (
+                    <>
+                      <ChevronRight />
+                      <span>{index + 1}</span>
+                    </>
+                  ) : (
+                    session.title
+                  )}
+                </span>
+                {session.closing ? (
+                  <span className="buzz-terminal-tab-title">Closing…</span>
+                ) : null}
               </button>
             </div>
           ))}
@@ -548,20 +645,36 @@ export function TerminalSubstrate({
             onClick={() => runTabAction(onNewSession)}
             type="button"
           >
-            +
+            <Plus />
           </button>
         </div>
         <div className="buzz-terminal-readout">
-          <span>{channelName ? `#${channelName}` : "BUZZ"}</span>
-          <span>LOCAL PTY · PRIVATE</span>
-          <span>{shortcutLabel} BUZZ</span>
+          <button
+            aria-label={
+              mode === "maximized" ? "Restore Buzz Term" : "Maximize Buzz Term"
+            }
+            className="buzz-terminal-window-action"
+            onClick={() =>
+              onModeChange(mode === "maximized" ? "docked" : "maximized")
+            }
+            type="button"
+          >
+            {mode === "maximized" ? <Minimize2 /> : <Maximize2 />}
+          </button>
+          <button
+            aria-label="Hide Buzz Term"
+            className="buzz-terminal-window-action"
+            onClick={onHide}
+            type="button"
+          >
+            <X />
+          </button>
         </div>
       </div>
       {/* biome-ignore lint/a11y/noStaticElementInteractions: the hidden textarea owns keyboard semantics; this only preserves its focus across canvas clicks. */}
       <div
-        className="buzz-terminal-viewport"
+        className="buzz-terminal-viewport px-5 pt-2"
         onMouseDown={(event) => {
-          if (owner !== "terminal") return;
           // Preventing the canvas mousedown also suppresses selection. Revisit
           // this when the terminal gains mouse selection support.
           event.preventDefault();
@@ -616,7 +729,7 @@ export function TerminalSubstrate({
           }}
           ref={textareaRef}
           spellCheck={false}
-          tabIndex={owner === "terminal" ? 0 : -1}
+          tabIndex={0}
         />
       </div>
       <div aria-live="polite" className="sr-only">
diff --git a/desktop/src/features/terminal/terminalPanelStore.test.mjs b/desktop/src/features/terminal/terminalPanelStore.test.mjs
new file mode 100644
index 0000000000..8a3020f0cb
--- /dev/null
+++ b/desktop/src/features/terminal/terminalPanelStore.test.mjs
@@ -0,0 +1,33 @@
+import assert from "node:assert/strict";
+import { beforeEach, test } from "node:test";
+
+import {
+  resetTerminalPanelForTests,
+  setTerminalPanelMode,
+  setTerminalSessionChannels,
+  toggleTerminalPanel,
+  getTerminalPanelSnapshotForTests,
+} from "./terminalPanelStore.ts";
+
+beforeEach(resetTerminalPanelForTests);
+
+test("panel toggles between closed and the docked default", () => {
+  toggleTerminalPanel();
+  assert.equal(getTerminalPanelSnapshotForTests().mode, "docked");
+  toggleTerminalPanel();
+  assert.equal(getTerminalPanelSnapshotForTests().mode, "closed");
+  setTerminalPanelMode("maximized");
+  toggleTerminalPanel();
+  assert.equal(getTerminalPanelSnapshotForTests().mode, "closed");
+});
+
+test("session channel identities are de-duplicated", () => {
+  setTerminalSessionChannels(["one", "one", "two"]);
+  // Regression guard: accepting an iterable (rather than Session objects) keeps
+  // this store UI-only and prevents mutable PTYs from leaking into header state.
+  setTerminalSessionChannels(new Set(["one", "two"]));
+  assert.deepEqual(
+    [...getTerminalPanelSnapshotForTests().sessionChannelIds],
+    ["one", "two"],
+  );
+});
diff --git a/desktop/src/features/terminal/terminalPanelStore.ts b/desktop/src/features/terminal/terminalPanelStore.ts
new file mode 100644
index 0000000000..3c8fa778a7
--- /dev/null
+++ b/desktop/src/features/terminal/terminalPanelStore.ts
@@ -0,0 +1,53 @@
+import * as React from "react";
+
+export type TerminalPanelMode = "closed" | "docked" | "maximized";
+
+type Snapshot = {
+  mode: TerminalPanelMode;
+  sessionChannelIds: ReadonlySet<string>;
+};
+
+let snapshot: Snapshot = { mode: "closed", sessionChannelIds: new Set() };
+const listeners = new Set<() => void>();
+
+function publish(next: Snapshot) {
+  snapshot = next;
+  for (const listener of listeners) listener();
+}
+
+export function setTerminalPanelMode(mode: TerminalPanelMode) {
+  if (snapshot.mode === mode) return;
+  publish({ ...snapshot, mode });
+}
+
+export function toggleTerminalPanel() {
+  setTerminalPanelMode(snapshot.mode === "closed" ? "docked" : "closed");
+}
+
+export function setTerminalSessionChannels(channelIds: Iterable<string>) {
+  const next = new Set(channelIds);
+  if (
+    next.size === snapshot.sessionChannelIds.size &&
+    [...next].every((id) => snapshot.sessionChannelIds.has(id))
+  )
+    return;
+  publish({ ...snapshot, sessionChannelIds: next });
+}
+
+export function useTerminalPanel() {
+  return React.useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    () => snapshot,
+  );
+}
+
+export function resetTerminalPanelForTests() {
+  snapshot = { mode: "closed", sessionChannelIds: new Set() };
+}
+
+export function getTerminalPanelSnapshotForTests() {
+  return snapshot;
+}
diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css
index c45bee4136..0d5a103219 100644
--- a/desktop/src/shared/styles/globals.css
+++ b/desktop/src/shared/styles/globals.css
@@ -10,6 +10,7 @@
 @import "./globals/skeleton.css";
 @import "./globals/spoilers.css";
 @import "./globals/components.css";
+@import "./globals/terminal.css";
 @import "./globals/utilities.css";
 @import "./globals/media-controls.css";
 @import "./globals/avatar-framing.css";
diff --git a/desktop/src/shared/styles/globals/components.css b/desktop/src/shared/styles/globals/components.css
index fe4001a876..27f641578b 100644
--- a/desktop/src/shared/styles/globals/components.css
+++ b/desktop/src/shared/styles/globals/components.css
@@ -751,119 +751,3 @@
     }
   }
 }
-
-@layer components {
-  .buzz-terminal-substrate {
-    background: var(--buzz-terminal-background, #101014);
-    color: var(--buzz-terminal-foreground, #e8e8ec);
-    display: flex;
-    flex-direction: column;
-    font-family: "JetBrains Mono", monospace;
-    font-variant-ligatures: none;
-    inset: 0;
-    position: absolute;
-    user-select: none;
-    z-index: 0;
-  }
-
-  .buzz-terminal-contract-bar {
-    align-items: stretch;
-    border-bottom: 1px solid hsl(var(--border));
-    display: flex;
-    flex: 0 0 32px;
-    justify-content: space-between;
-    min-width: 0;
-  }
-
-  .buzz-terminal-tabs,
-  .buzz-terminal-readout {
-    align-items: center;
-    display: flex;
-    min-width: 0;
-  }
-
-  .buzz-terminal-tab,
-  .buzz-terminal-tab-select,
-  .buzz-terminal-close,
-  .buzz-terminal-new-tab {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    display: flex;
-    font: inherit;
-    gap: 8px;
-    height: 100%;
-    opacity: 0.62;
-    padding: 0 10px;
-    position: relative;
-  }
-
-  .buzz-terminal-tab-active {
-    opacity: 1;
-  }
-
-  .buzz-terminal-tab-active::after {
-    background: hsl(var(--buzz-selected-accent));
-    bottom: 0;
-    content: "";
-    height: 1px;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  .buzz-terminal-designator,
-  .buzz-terminal-readout {
-    font-size: 0.5625rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-  }
-
-  .buzz-terminal-close {
-    opacity: 0;
-  }
-
-  .buzz-terminal-tab:hover .buzz-terminal-close,
-  .buzz-terminal-close:focus {
-    opacity: 1;
-  }
-
-  .buzz-terminal-readout {
-    gap: 14px;
-    padding: 0 12px;
-    white-space: nowrap;
-  }
-
-  .buzz-terminal-viewport,
-  .buzz-terminal-viewport canvas {
-    height: 100%;
-    min-height: 0;
-    width: 100%;
-  }
-
-  .buzz-terminal-viewport {
-    overflow: hidden;
-    position: relative;
-  }
-
-  .buzz-terminal-viewport canvas {
-    display: block;
-  }
-
-  .buzz-terminal-welcome {
-    inset: 0;
-    pointer-events: none;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .buzz-terminal-input {
-    height: 1px;
-    left: -10000px;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 1px;
-  }
-}
diff --git a/desktop/src/shared/styles/globals/terminal.css b/desktop/src/shared/styles/globals/terminal.css
new file mode 100644
index 0000000000..26b5f42ba8
--- /dev/null
+++ b/desktop/src/shared/styles/globals/terminal.css
@@ -0,0 +1,302 @@
+@layer components {
+  .buzz-terminal-substrate {
+    background: var(--buzz-terminal-background, #101014);
+    color: var(--buzz-terminal-foreground, #e8e8ec);
+    display: flex;
+    flex-direction: column;
+    font-family: "JetBrains Mono", monospace;
+    font-variant-ligatures: none;
+    inset: 0;
+    position: absolute;
+    user-select: none;
+    z-index: 0;
+  }
+
+  .buzz-terminal-contract-bar {
+    align-items: center;
+    background: hsl(var(--secondary));
+    border-bottom: 1px solid hsl(var(--border));
+    color: hsl(var(--secondary-foreground));
+    display: flex;
+    flex: 0 0 40px;
+    font-family: inherit;
+    font-variant-ligatures: normal;
+    gap: 8px;
+    justify-content: space-between;
+    min-width: 0;
+    padding: 4px 1.25rem;
+  }
+
+  .buzz-terminal-tabs,
+  .buzz-terminal-readout {
+    align-items: center;
+    display: flex;
+    min-width: 0;
+  }
+
+  .buzz-terminal-tab,
+  .buzz-terminal-tab-select,
+  .buzz-terminal-close,
+  .buzz-terminal-new-tab {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: calc(var(--radius) - 2px);
+    color: hsl(var(--muted-foreground));
+    display: flex;
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    gap: 6px;
+    height: 30px;
+    padding: 0 9px;
+    position: relative;
+  }
+
+  .buzz-terminal-tabs {
+    flex: 1 1 auto;
+    gap: 4px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+  }
+
+  .buzz-terminal-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .buzz-terminal-readout {
+    background: hsl(var(--secondary));
+    flex: 0 0 auto;
+    gap: 4px;
+    padding: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .buzz-terminal-tab {
+    background: hsl(var(--background));
+    border-radius: 4px;
+    flex: 0 0 auto;
+    padding: 0;
+  }
+
+  .buzz-terminal-tab-active {
+    background: hsl(var(--background));
+  }
+
+  .buzz-terminal-tab:hover,
+  .buzz-terminal-tab:focus-within {
+    background: hsl(var(--foreground) / 0.06);
+  }
+
+  .buzz-terminal-tab-select {
+    border-radius: inherit;
+    max-width: 12rem;
+    min-width: 0;
+    padding-left: 32px;
+  }
+
+  .buzz-terminal-tab-active .buzz-terminal-tab-select {
+    color: hsl(var(--foreground));
+  }
+
+  .buzz-terminal-new-tab:hover {
+    background: hsl(var(--foreground) / 0.06);
+    color: hsl(var(--foreground));
+  }
+
+  .buzz-terminal-new-tab {
+    align-items: center;
+    background: hsl(var(--background));
+    border-radius: 4px;
+    height: 30px;
+    justify-content: center;
+    padding: 7px;
+    width: 30px;
+  }
+
+  .buzz-terminal-new-tab svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  .buzz-terminal-tab-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .buzz-terminal-designator {
+    align-items: center;
+    display: inline-flex;
+    font-size: 0.75rem;
+    gap: 2px;
+    letter-spacing: 0;
+  }
+
+  .buzz-terminal-designator svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  .buzz-terminal-close {
+    height: 16px;
+    left: 8px;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 16px;
+    z-index: 1;
+  }
+
+  .buzz-terminal-tab:hover .buzz-terminal-close,
+  .buzz-terminal-tab:focus-within .buzz-terminal-close {
+    color: hsl(var(--foreground));
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .buzz-terminal-close svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  .buzz-terminal-readout {
+    white-space: nowrap;
+  }
+
+  .buzz-terminal-viewport,
+  .buzz-terminal-viewport canvas {
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .buzz-terminal-viewport {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .buzz-terminal-viewport canvas {
+    display: block;
+  }
+
+  .buzz-terminal-welcome {
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .buzz-terminal-input {
+    height: 1px;
+    left: -10000px;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 1px;
+  }
+}
+
+@layer components {
+  .buzz-terminal-dock-host:has(.buzz-terminal-substrate) {
+    align-items: flex-end;
+    display: flex;
+    flex: 0 0 auto;
+    min-height: 0;
+    overflow: hidden;
+    transition:
+      flex-grow 180ms ease,
+      flex-basis 180ms ease;
+  }
+
+  .buzz-content-primary {
+    transition:
+      flex-grow 180ms ease,
+      flex-basis 180ms ease;
+  }
+
+  .buzz-terminal-dock-host:has([data-terminal-mode="maximized"]) {
+    flex: 1 1 auto;
+  }
+
+  .buzz-content-primary:has(
+    + .buzz-terminal-dock-host [data-terminal-mode="maximized"]
+  ) {
+    flex: 0 1 0%;
+    min-height: 0;
+  }
+
+  .buzz-terminal-substrate {
+    border-top: 1px solid hsl(var(--border));
+    inset: auto;
+    min-height: 180px;
+    opacity: 1;
+    position: relative;
+    transform: translateY(0);
+    transition:
+      height 180ms ease,
+      transform 180ms ease;
+    width: 100%;
+    z-index: 20;
+  }
+
+  .buzz-terminal-substrate[data-terminal-resizing="true"] {
+    transition: none;
+  }
+
+  .buzz-terminal-substrate[data-terminal-visible="false"] {
+    height: 0 !important;
+    min-height: 0;
+    pointer-events: none;
+    transform: translateY(16px);
+  }
+
+  .buzz-terminal-dock-host [data-terminal-mode="maximized"] {
+    flex: 1 1 auto;
+    height: 100%;
+  }
+
+  .buzz-terminal-resize-handle {
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: -3px;
+    z-index: 2;
+  }
+
+  .buzz-terminal-window-action {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: calc(var(--radius) - 2px);
+    color: hsl(var(--muted-foreground));
+    display: inline-flex;
+    height: 30px;
+    justify-content: center;
+    width: 30px;
+  }
+
+  .buzz-terminal-window-action:hover,
+  .buzz-terminal-window-action:focus-visible {
+    background: hsl(var(--foreground) / 0.06);
+    color: hsl(var(--foreground));
+  }
+
+  .buzz-terminal-window-action svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .buzz-content-primary,
+    .buzz-terminal-dock-host:has(.buzz-terminal-substrate),
+    .buzz-terminal-substrate {
+      transition: none;
+    }
+  }
+}
diff --git a/desktop/tests/e2e/terminal-wheel.spec.ts b/desktop/tests/e2e/terminal-wheel.spec.ts
index d90fb9da85..c6c6fc5c76 100644
--- a/desktop/tests/e2e/terminal-wheel.spec.ts
+++ b/desktop/tests/e2e/terminal-wheel.spec.ts
@@ -156,16 +156,17 @@ async function reveal(page: Page) {
     "data-terminal-owner",
     "terminal",
   );
-  // data-terminal-owner flips synchronously at chord-up; the 360ms reveal fade
-  // is still running. Every capture below must wait for it to settle or it
-  // photographs a half-faded app surface and reads as a rendering defect.
+  // The dock opens in the normal app surface now; unlike the removed
+  // full-screen takeover, it must not fade that surface away. Wait for the
+  // dock's own height transition before interacting with its viewport.
+  await expect(page.locator(TERM)).toHaveAttribute(
+    "data-terminal-mode",
+    "docked",
+  );
+  await expect(page.locator(TERM)).toBeVisible();
   await expect
-    .poll(async () =>
-      page
-        .locator(".buzz-huddle-app-surface")
-        .evaluate((el) => getComputedStyle(el).opacity),
-    )
-    .toBe("0");
+    .poll(async () => page.locator(TERM).evaluate((el) => el.clientHeight))
+    .toBeGreaterThanOrEqual(180);
 }
 
 test("scrollback: wheel over Buzz Term reaches terminal_scroll", async ({
@@ -217,16 +218,16 @@ test("concealed terminal viewport does not steal Buzz focus", async ({
 }) => {
   await reveal(page);
   await page.keyboard.press("Meta+j");
-  await expect(page.locator(TERM)).toHaveAttribute(
-    "data-terminal-owner",
-    "buzz",
-  );
+  await expect(page.locator(TERM)).toHaveCount(0);
 
   const input = page.getByLabel("Terminal input");
-  await expect(input).not.toBeFocused();
-  await page.locator(".buzz-terminal-viewport").click({
-    force: true,
-    position: { x: 40, y: 40 },
-  });
-  await expect(input).not.toBeFocused();
+  await expect(input).toHaveCount(0);
+  await page.getByTestId("chat-title").click();
+  await page.keyboard.type("BUZZ_KEYSTROKE");
+  const terminalInputs = await page.evaluate(
+    () =>
+      (window as typeof window & { __SAMI_TERM__: { inputs: string[] } })
+        .__SAMI_TERM__.inputs,
+  );
+  expect(terminalInputs.join("")).not.toContain("BUZZ_KEYSTROKE");
 });