diff --git a/apps/web/src/components/AppShell.tsx b/apps/web/src/components/AppShell.tsx
index 8292831..28721bb 100644
--- a/apps/web/src/components/AppShell.tsx
+++ b/apps/web/src/components/AppShell.tsx
@@ -31,6 +31,7 @@ export function AppShell() {
   const railCollapsed = useWorkspace((state) => state.railCollapsed);
   const railWidth = useWorkspace((state) => state.railWidth);
   const railOverlayOpen = useWorkspace((state) => state.railOverlayOpen);
+  const focusMode = useWorkspace((state) => state.focusMode);
   const sessionListView = useWorkspace((state) => state.sessionListView);
   const projectExpandedById = useWorkspace((state) => state.projectExpandedById);
   const dismissedEmptyProjectIds = useWorkspace((state) => state.dismissedEmptyProjectIds);
@@ -105,7 +106,12 @@ export function AppShell() {
         // Dialog-based surfaces (palette, sheets) close themselves; the
         // docked pane is plain layout, so Escape peels it here.
         const state = workspaceStore.getState();
-        if (state.paletteOpen || state.railOverlayOpen) return;
+        if (state.paletteOpen || (state.railOverlayOpen && !state.focusMode)) return;
+        if (state.focusMode) {
+          state.setFocusMode(false);
+          event.preventDefault();
+          return;
+        }
         const activeId = state.activeSessionId;
         if (activeId !== null && selectSessionView(state, activeId).paneOpen) {
           state.setPaneOpen(activeId, false);
@@ -123,8 +129,26 @@ export function AppShell() {
       if (action.kind === "palette") {
         state.setPaletteOpen(!state.paletteOpen);
       } else if (action.kind === "toggle-rail") {
-        if (railOverlaid) state.setRailOverlayOpen(!state.railOverlayOpen);
+        if (state.focusMode) {
+          state.setFocusMode(false);
+          state.setRailCollapsed(false);
+        } else if (railOverlaid) state.setRailOverlayOpen(!state.railOverlayOpen);
         else state.setRailCollapsed(!state.railCollapsed);
+      } else if (action.kind === "toggle-terminal") {
+        const activeId = state.activeSessionId;
+        const activeSession =
+          activeId === null ? undefined : getShellData().sessions.find((session) => session.id === activeId);
+        if (activeId !== null && activeSession?.archivedAt === undefined) {
+          const view = selectSessionView(state, activeId);
+          if (state.focusMode) {
+            state.setFocusMode(false);
+            state.setTerminalDrawerOpen(activeId, true);
+          } else {
+            state.setTerminalDrawerOpen(activeId, !view.terminalDrawerOpen);
+          }
+        }
+      } else if (action.kind === "toggle-focus") {
+        state.setFocusMode(!state.focusMode);
       } else if (action.kind === "settings") {
         void navigate({ to: "/settings" });
       } else {
@@ -153,24 +177,29 @@ export function AppShell() {
   const railToggle = resolveRailTogglePresentation({
     overlaid: railOverlaid,
     overlayOpen: railOverlayOpen,
-    collapsed: railCollapsed,
+    collapsed: railCollapsed || focusMode,
   });
 
   return (
     <div className="flex h-full min-h-0 min-w-0 max-w-full flex-col overflow-x-hidden bg-background text-foreground">
       <Titlebar
+        focusMode={focusMode}
+        onExitFocus={() => workspaceStore.getState().setFocusMode(false)}
         onToggleRail={() => {
           const state = workspaceStore.getState();
-          if (railOverlaid) state.setRailOverlayOpen(!state.railOverlayOpen);
+          if (state.focusMode) {
+            state.setFocusMode(false);
+            state.setRailCollapsed(false);
+          } else if (railOverlaid) state.setRailOverlayOpen(!state.railOverlayOpen);
           else state.setRailCollapsed(!state.railCollapsed);
         }}
         railToggle={railToggle}
       />
       <div className="flex min-h-0 flex-1">
-        {!railOverlaid && (
+        {!railOverlaid && !focusMode && (
           <>
             <div
-              className="rail-dock flex h-full shrink-0 flex-col overflow-hidden bg-background"
+              className="rail-dock flex h-full shrink-0 flex-col overflow-hidden border-border/60 border-r bg-(--sidebar-background)"
               style={{ width: railCollapsed ? RAIL_COLLAPSED_WIDTH : effectiveRailWidth }}
             >
               {railCollapsed ? (
@@ -219,7 +248,7 @@ export function AppShell() {
       {railOverlaid && (
         <Sheet
           onOpenChange={(open) => workspaceStore.getState().setRailOverlayOpen(open)}
-          open={railOverlayOpen}
+          open={railOverlayOpen && !focusMode}
         >
           <SheetPopup
             aria-label="Working folders and sessions"
@@ -229,7 +258,7 @@ export function AppShell() {
           >
             <div className="flex h-14 shrink-0 items-center border-border border-b px-3">
               <SheetTitle className="text-sm">
-                <span aria-hidden="true">Sessions</span>
+                <span aria-hidden="true">T4 Code</span>
                 <span className="sr-only">Working folders and sessions</span>
               </SheetTitle>
               <SheetClose
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 8c22f53..38af7dc 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -3,22 +3,34 @@
 // focus (dialog primitive owns the focus contract).
 import { cn, Dialog, DialogPopup, StatusPill } from "@t4-code/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { CornerDownLeft, Search } from "lucide-react";
-import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { CornerDownLeft, Search, SquareTerminal } from "lucide-react";
+import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 
 import type { ProjectGroup } from "../lib/session-tree.ts";
 import { handoffTranscriptSearchQuery } from "../features/transcript-search/index.ts";
 import { TRANSCRIPT_SEARCH_ROUTE } from "../features/transcript-search/route.ts";
 import { useWorkspace, workspaceStore } from "../state/store-instance.ts";
+import { selectSessionView } from "../state/workspace-store.ts";
 import { resolveTheme } from "../theme/theme.ts";
+import { PANE_FAMILY_META } from "./pane-families.tsx";
 interface PaletteItem {
   readonly id: string;
+  readonly group: "recent" | "workspace" | "navigate" | "app";
   readonly label: string;
   readonly hint: string;
   readonly status: ReactNode;
   readonly run: () => void;
 }
 
+const GROUP_LABEL = {
+  recent: "Recent work",
+  workspace: "Workspace",
+  navigate: "Navigate",
+  app: "App",
+} as const;
+
+const DEFAULT_RECENT_LIMIT = 5;
+
 function buildItems(
   groups: readonly ProjectGroup[],
   navigate: (sessionId: string) => void,
@@ -32,6 +44,7 @@ function buildItems(
     for (const row of group.sessions) {
       items.push({
         id: `session:${row.session.id}`,
+        group: "recent",
         label: row.session.title,
         hint: `${group.project.name} · ${row.session.model}`,
         status:
@@ -43,27 +56,82 @@ function buildItems(
     }
   }
   const state = workspaceStore.getState();
+  const activeSessionId = state.activeSessionId;
+  const activeSessionVisible =
+    activeSessionId !== null &&
+    groups.some((group) => group.sessions.some((row) => row.session.id === activeSessionId));
+  if (activeSessionId !== null && activeSessionVisible) {
+    const view = selectSessionView(state, activeSessionId);
+    for (const meta of PANE_FAMILY_META) {
+      const active = !state.focusMode && view.paneOpen && view.paneFamily === meta.id;
+      const Icon = meta.icon;
+      const label = meta.id === "terminals" ? "Agent terminals" : meta.label;
+      items.push({
+        id: `action:pane:${meta.id}`,
+        group: "workspace",
+        label: active ? `Close ${label}` : `Open ${label}`,
+        hint: "Workspace · Right",
+        status: <Icon aria-hidden="true" className="size-3.5 text-muted-foreground" />,
+        run: () => {
+          const current = workspaceStore.getState();
+          const currentView = selectSessionView(current, activeSessionId);
+          if (current.focusMode) {
+            current.setFocusMode(false);
+            if (!(currentView.paneOpen && currentView.paneFamily === meta.id)) {
+              current.togglePaneFamily(activeSessionId, meta.id);
+            }
+          } else {
+            current.togglePaneFamily(activeSessionId, meta.id);
+          }
+        },
+      });
+    }
+    items.push({
+      id: "action:terminal",
+      group: "workspace",
+      label: !state.focusMode && view.terminalDrawerOpen ? "Close terminal" : "Open terminal",
+      hint: "Workspace · Below · ⌘J",
+      status: <SquareTerminal aria-hidden="true" className="size-3.5 text-muted-foreground" />,
+      run: () => {
+        const current = workspaceStore.getState();
+        const currentView = selectSessionView(current, activeSessionId);
+        if (current.focusMode) {
+          current.setFocusMode(false);
+          current.setTerminalDrawerOpen(activeSessionId, true);
+        } else {
+          current.setTerminalDrawerOpen(activeSessionId, !currentView.terminalDrawerOpen);
+        }
+      },
+    });
+  }
   items.push(
     {
-      id: "action:theme",
-      label:
-        resolveTheme(state.theme) === "dark" ? "Switch to light colors" : "Switch to dark colors",
-      hint: "Appearance",
+      id: "action:focus",
+      group: "workspace",
+      label: state.focusMode ? "Exit focus mode" : "Enter focus mode",
+      hint: "⌘⇧F",
       status: null,
-      run: () => {
-        const current = resolveTheme(workspaceStore.getState().theme);
-        workspaceStore.getState().setTheme(current === "dark" ? "light" : "dark");
-      },
+      run: () => workspaceStore.getState().setFocusMode(!state.focusMode),
     },
     {
       id: "action:rail",
-      label: state.railCollapsed ? "Show session list" : "Hide session list",
-      hint: "Layout",
+      group: "workspace",
+      label: state.focusMode || state.railCollapsed ? "Show session list" : "Hide session list",
+      hint: "Sidebar",
       status: null,
-      run: () => workspaceStore.getState().setRailCollapsed(!state.railCollapsed),
+      run: () => {
+        const current = workspaceStore.getState();
+        if (current.focusMode) {
+          current.setFocusMode(false);
+          current.setRailCollapsed(false);
+        } else {
+          current.setRailCollapsed(!current.railCollapsed);
+        }
+      },
     },
     {
       id: "action:inbox",
+      group: "navigate",
       label: "Open Inbox",
       hint: "Attention across sessions",
       status: null,
@@ -71,6 +139,7 @@ function buildItems(
     },
     {
       id: "action:transcript-search",
+      group: "navigate",
       label: "Open transcript search",
       hint: "Prior decisions and code discussions",
       status: <Search aria-hidden="true" className="size-3.5 text-muted-foreground" />,
@@ -78,6 +147,7 @@ function buildItems(
     },
     {
       id: "action:agents",
+      group: "navigate",
       label: "Open Agent View",
       hint: "Agents",
       status: null,
@@ -85,11 +155,24 @@ function buildItems(
     },
     {
       id: "action:settings",
+      group: "app",
       label: "Open settings",
-      hint: "App",
+      hint: "Preferences",
       status: null,
       run: openSettings,
     },
+    {
+      id: "action:theme",
+      group: "app",
+      label:
+        resolveTheme(state.theme) === "dark" ? "Switch to light colors" : "Switch to dark colors",
+      hint: "Appearance",
+      status: null,
+      run: () => {
+        const current = resolveTheme(workspaceStore.getState().theme);
+        workspaceStore.getState().setTheme(current === "dark" ? "light" : "dark");
+      },
+    },
   );
   return items;
 }
@@ -126,9 +209,15 @@ export function CommandPalette({ groups }: { groups: readonly ProjectGroup[] })
   );
 
   const needle = query.trim().toLowerCase();
+  const defaultRecentIds = new Set(
+    items
+      .filter((item) => item.group === "recent")
+      .slice(0, DEFAULT_RECENT_LIMIT)
+      .map((item) => item.id),
+  );
   const baseFiltered =
     needle === ""
-      ? items
+      ? items.filter((item) => item.group !== "recent" || defaultRecentIds.has(item.id))
       : items.filter((item) => `${item.label} ${item.hint}`.toLowerCase().includes(needle));
   const filtered =
     needle.length < 2
@@ -137,6 +226,7 @@ export function CommandPalette({ groups }: { groups: readonly ProjectGroup[] })
           ...baseFiltered,
           {
             id: "action:transcript-search-query",
+            group: "navigate" as const,
             label: "View all transcript results",
             hint: `Search for “${query.trim()}”`,
             status: <Search aria-hidden="true" className="size-3.5 text-muted-foreground" />,
@@ -177,33 +267,39 @@ export function CommandPalette({ groups }: { groups: readonly ProjectGroup[] })
         className="w-full max-w-lg overflow-hidden p-0"
         showCloseButton={false}
       >
-        <input
-          aria-activedescendant={filtered.length > 0 ? `palette-item-${highlighted}` : undefined}
-          aria-controls="palette-results"
-          aria-expanded="true"
-          autoFocus
-          className="h-11 w-full border-border border-b bg-transparent px-4 text-foreground text-sm outline-none placeholder:text-muted-foreground"
-          onChange={(event) => setQuery(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "ArrowDown") {
-              event.preventDefault();
-              setHighlighted((index) => Math.min(index + 1, filtered.length - 1));
-            } else if (event.key === "ArrowUp") {
-              event.preventDefault();
-              setHighlighted((index) => Math.max(index - 1, 0));
-            } else if (event.key === "Enter") {
-              event.preventDefault();
-              runItem(filtered[highlighted]);
-            }
-          }}
-          placeholder="Search sessions, transcripts, and commands"
-          role="combobox"
-          type="text"
-          value={query}
-        />
+        <div className="relative border-border border-b">
+          <Search
+            aria-hidden="true"
+            className="pointer-events-none absolute start-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+          />
+          <input
+            aria-activedescendant={filtered.length > 0 ? `palette-item-${highlighted}` : undefined}
+            aria-controls="palette-results"
+            aria-expanded="true"
+            autoFocus
+            className="h-12 w-full bg-transparent pe-4 ps-10 text-foreground text-sm outline-none placeholder:text-muted-foreground"
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setHighlighted((index) => Math.min(index + 1, filtered.length - 1));
+              } else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setHighlighted((index) => Math.max(index - 1, 0));
+              } else if (event.key === "Enter") {
+                event.preventDefault();
+                runItem(filtered[highlighted]);
+              }
+            }}
+            placeholder="Search sessions, transcripts, and commands"
+            role="combobox"
+            type="text"
+            value={query}
+          />
+        </div>
         <ul
           aria-label="Results"
-          className="max-h-80 overflow-y-auto p-1.5"
+          className="max-h-[min(34rem,calc(100dvh-8rem))] overflow-y-auto p-1.5"
           id="palette-results"
           ref={listRef}
           role="listbox"
@@ -213,32 +309,61 @@ export function CommandPalette({ groups }: { groups: readonly ProjectGroup[] })
               Nothing matches "{query}". Try a session title, project, or transcript phrase.
             </li>
           )}
-          {filtered.map((item, index) => (
-            <li
-              aria-selected={index === highlighted}
-              className={cn(
-                "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-2",
-                index === highlighted && "bg-secondary",
-              )}
-              data-index={index}
-              id={`palette-item-${index}`}
-              key={item.id}
-              onClick={() => runItem(item)}
-              onMouseMove={() => setHighlighted(index)}
-              role="option"
-            >
-              <span className="min-w-0 flex-1 truncate text-sm">{item.label}</span>
-              <span className="shrink-0 text-muted-foreground text-xs">{item.hint}</span>
-              {item.status}
-              {index === highlighted && (
-                <CornerDownLeft
-                  aria-hidden="true"
-                  className="size-3.5 shrink-0 text-muted-foreground"
-                />
-              )}
-            </li>
-          ))}
+          {filtered.map((item, index) => {
+            const startsGroup = index === 0 || filtered[index - 1]?.group !== item.group;
+            return (
+              <Fragment key={item.id}>
+                {startsGroup && (
+                  <li
+                    className="px-2.5 pt-2 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider first:pt-1"
+                    role="presentation"
+                  >
+                    {GROUP_LABEL[item.group]}
+                  </li>
+                )}
+                <li
+                  aria-selected={index === highlighted}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-2",
+                    index === highlighted && "bg-secondary ring-1 ring-border/60",
+                  )}
+                  data-index={index}
+                  id={`palette-item-${index}`}
+                  onClick={() => runItem(item)}
+                  onMouseMove={() => setHighlighted(index)}
+                  role="option"
+                >
+                  <span className="min-w-0 flex-1 truncate text-sm">{item.label}</span>
+                  <span className="shrink-0 text-muted-foreground text-xs">{item.hint}</span>
+                  {item.status}
+                  {index === highlighted && (
+                    <CornerDownLeft
+                      aria-hidden="true"
+                      className="size-3.5 shrink-0 text-muted-foreground"
+                    />
+                  )}
+                </li>
+              </Fragment>
+            );
+          })}
         </ul>
+        <div
+          aria-label="Command menu keyboard help"
+          className="flex min-h-9 items-center gap-3 border-border border-t px-3 text-[10px] text-muted-foreground"
+        >
+          <span className="flex items-center gap-1">
+            <kbd className="font-mono text-foreground/80">↑↓</kbd>
+            Navigate
+          </span>
+          <span className="flex items-center gap-1">
+            <kbd className="font-mono text-foreground/80">↵</kbd>
+            Open
+          </span>
+          <span className="ml-auto flex items-center gap-1">
+            <kbd className="font-mono text-foreground/80">Esc</kbd>
+            Close
+          </span>
+        </div>
       </DialogPopup>
     </Dialog>
   );
diff --git a/apps/web/src/components/Rail.tsx b/apps/web/src/components/Rail.tsx
index 9555fbd..11c4ad6 100644
--- a/apps/web/src/components/Rail.tsx
+++ b/apps/web/src/components/Rail.tsx
@@ -966,18 +966,18 @@ export function Rail({
   return (
     <nav
       aria-label="Working folders and sessions"
-      className="flex h-full min-h-0 flex-col overflow-y-auto px-1.5 py-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      className="flex h-full min-h-0 flex-col overflow-y-auto px-1.5 py-1.5 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
       onKeyDown={handleRailKeyDown}
       ref={navRef}
       tabIndex={-1}
     >
-      <div className="px-1.5 pb-2">
-        <h2 className="font-medium text-foreground text-sm">Working folders</h2>
-        <p className="mt-0.5 text-muted-foreground text-xs leading-snug">
-          OMP groups sessions by the folder they were started in.
-        </p>
+      <div className="px-1.5 pb-1.5">
+        <div className="flex h-7 items-center">
+          <h2 className="font-medium text-foreground text-xs">Sessions</h2>
+          <span className="ml-auto font-mono text-[10px] text-muted-foreground">⌘K</span>
+        </div>
         <button
-          className="mt-2 flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md border border-border bg-card px-2.5 text-left outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:min-h-9"
+          className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:min-h-8"
           onClick={() => {
             workspaceStore.getState().setRailOverlayOpen(false);
             void navigate({ to: "/inbox" });
@@ -985,7 +985,7 @@ export function Rail({
           type="button"
         >
           <Inbox aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate font-medium text-sm">Inbox</span>
+          <span className="min-w-0 flex-1 truncate text-sm">Attention</span>
           {attentionCount > 0 && (
             <Badge aria-label={`${attentionCount} items need attention`} variant="secondary">
               {attentionCount}
diff --git a/apps/web/src/components/SessionScreen.tsx b/apps/web/src/components/SessionScreen.tsx
index 942d4c1..6059f73 100644
--- a/apps/web/src/components/SessionScreen.tsx
+++ b/apps/web/src/components/SessionScreen.tsx
@@ -10,17 +10,30 @@ import {
   Sheet,
   SheetPopup,
   StatusPill,
-  Tooltip,
-  TooltipPopup,
-  TooltipTrigger,
   useReducedMotion,
 } from "@t4-code/ui";
 import { Popover } from "@base-ui/react/popover";
 import { Link } from "@tanstack/react-router";
-import { Check, PanelBottomClose, PanelBottomOpen, PanelRight, X } from "lucide-react";
+import {
+  Check,
+  ChevronDown,
+  Cpu,
+  FolderGit2,
+  Laptop,
+  Maximize2,
+  PanelsTopLeft,
+  Server,
+  SquareTerminal,
+  Wifi,
+  X,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 
-import type { WorkspaceProject, WorkspaceSession } from "../lib/workspace-data.ts";
+import type {
+  WorkspaceHost,
+  WorkspaceProject,
+  WorkspaceSession,
+} from "../lib/workspace-data.ts";
 import { PaneContent } from "../features/panes/PaneContent.tsx";
 import { TerminalDrawer } from "../features/terminal/TerminalDrawer.tsx";
 import { FreshnessBadge, SessionMain, SessionOwnershipBadge } from "../features/transcript/SessionMain.tsx";
@@ -28,6 +41,7 @@ import { RIGHT_PANE_DOCK_QUERY, useMediaQuery } from "../hooks/useMediaQuery.ts"
 import { useWorkspace, workspaceStore } from "../state/store-instance.ts";
 import { useDesktopRuntimeSnapshot } from "../platform/desktop-runtime.ts";
 import { resolveLiveSession } from "../platform/live-workspace.ts";
+import { useShellData } from "../state/shell-data.ts";
 import {
   type PaneFamily,
   RIGHT_PANE_WIDTH,
@@ -36,84 +50,140 @@ import {
 import { PANE_FAMILY_META } from "./pane-families.tsx";
 import { ResizeHandle } from "./ResizeHandle.tsx";
 
-function FamilyToggles({
-  sessionId,
-  paneOpen,
-  paneFamily,
+const FRESHNESS_LABEL = {
+  live: "Live connection",
+  cached: "Cached session",
+  offline: "Host offline",
+} as const;
+
+function SessionContextMenu({
+  host,
+  onOpenHostHealth,
+  project,
+  session,
 }: {
-  sessionId: string;
-  paneOpen: boolean;
-  paneFamily: PaneFamily;
+  host: WorkspaceHost | undefined;
+  onOpenHostHealth: () => void;
+  project: WorkspaceProject;
+  session: WorkspaceSession;
 }) {
+  const [open, setOpen] = useState(false);
+  const HostIcon = host?.kind === "remote" ? Server : Laptop;
   return (
-    <>
-      <div aria-label="Session panels" className="hidden items-center gap-0.5 sm:flex" role="group">
-        {PANE_FAMILY_META.map((meta) => {
-          const active = paneOpen && paneFamily === meta.id;
-          const Icon = meta.icon;
-          return (
-            <Tooltip key={meta.id}>
-              <TooltipTrigger
-                render={
-                  <IconButton
-                    aria-label={active ? `Close ${meta.label}` : `Open ${meta.label}`}
-                    aria-pressed={active}
-                    className={cn(active && "bg-secondary text-foreground")}
-                    onClick={() => workspaceStore.getState().togglePaneFamily(sessionId, meta.id)}
-                    size="icon-sm"
-                  >
-                    <Icon aria-hidden="true" />
-                  </IconButton>
-                }
+    <Popover.Root onOpenChange={setOpen} open={open}>
+      <Popover.Trigger
+        aria-label={`Session context: ${project.name}${host === undefined ? "" : ` on ${host.name}`}`}
+        className={cn(
+          "flex size-11 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent text-muted-foreground outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring sm:h-7 sm:w-auto sm:max-w-56 sm:justify-start sm:rounded-md sm:px-1.5",
+          open && "bg-secondary text-foreground",
+        )}
+      >
+        <FolderGit2 aria-hidden="true" className="size-3.5 shrink-0" />
+        <span className="hidden truncate text-xs sm:inline">{project.name}</span>
+        <ChevronDown aria-hidden="true" className="hidden size-3 shrink-0 sm:block" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner align="start" className="z-50" side="bottom" sideOffset={6}>
+          <Popover.Popup className="w-[min(19rem,calc(100vw-1rem))] rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-(--overlay-shadow) outline-none transition-[scale,opacity] duration-(--motion-duration-fast) data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0">
+            <div className="flex items-start gap-2 px-1.5 pt-1 pb-2">
+              <div className="min-w-0 flex-1">
+                <Popover.Title className="truncate font-medium text-sm">{project.name}</Popover.Title>
+                <Popover.Description className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground">
+                  {project.path}
+                </Popover.Description>
+              </div>
+              <span
+                className={cn(
+                  "mt-1.5 size-2 shrink-0 rounded-full",
+                  session.freshness === "live"
+                    ? "bg-success"
+                    : session.freshness === "cached"
+                      ? "bg-warning"
+                      : "bg-muted-foreground",
+                )}
               />
-              <TooltipPopup side="bottom">{meta.label}</TooltipPopup>
-            </Tooltip>
-          );
-        })}
-      </div>
-      <MobileFamilyMenu paneFamily={paneFamily} paneOpen={paneOpen} sessionId={sessionId} />
-    </>
+            </div>
+            <dl className="rounded-lg bg-secondary/60 px-2.5 py-1">
+              <div className="flex min-h-9 items-center gap-2 border-border border-b">
+                <HostIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
+                <dt className="text-muted-foreground text-xs">Host</dt>
+                <dd className="ml-auto max-w-40 truncate text-xs">{host?.name ?? "Unknown host"}</dd>
+              </div>
+              <div className="flex min-h-9 items-center gap-2 border-border border-b">
+                <Cpu aria-hidden="true" className="size-3.5 text-muted-foreground" />
+                <dt className="text-muted-foreground text-xs">Model</dt>
+                <dd className="ml-auto max-w-40 truncate font-mono text-[10px]">{session.model}</dd>
+              </div>
+              <div className="flex min-h-9 items-center gap-2">
+                <Wifi aria-hidden="true" className="size-3.5 text-muted-foreground" />
+                <dt className="text-muted-foreground text-xs">Connection</dt>
+                <dd className="ml-auto text-xs">{FRESHNESS_LABEL[session.freshness]}</dd>
+              </div>
+            </dl>
+            <button
+              className="mt-1 flex min-h-9 w-full cursor-pointer items-center justify-center rounded-lg text-muted-foreground text-xs outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => {
+                setOpen(false);
+                onOpenHostHealth();
+              }}
+              type="button"
+            >
+              View host health
+            </button>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
 
-function MobileFamilyMenu({
+function WorkspaceMenu({
   sessionId,
   paneOpen,
   paneFamily,
+  terminalOpen,
 }: {
   sessionId: string;
   paneOpen: boolean;
   paneFamily: PaneFamily;
+  terminalOpen: boolean;
 }) {
   const [open, setOpen] = useState(false);
-  const activeMeta = PANE_FAMILY_META.find((entry) => entry.id === paneFamily);
-  const TriggerIcon = paneOpen && activeMeta !== undefined ? activeMeta.icon : PanelRight;
+  const workspaceActive = paneOpen || terminalOpen;
   return (
     <Popover.Root onOpenChange={setOpen} open={open}>
       <Popover.Trigger
-        aria-label="Session panels"
+        aria-label="Workspace tools"
+        aria-pressed={workspaceActive}
         className={cn(
-          "flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-foreground outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:hidden",
-          paneOpen && "bg-secondary",
+          "flex size-11 shrink-0 cursor-pointer items-center justify-center gap-1 rounded-lg border border-transparent px-2 text-foreground outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:h-7 sm:w-auto sm:rounded-md",
+          (workspaceActive || open) && "bg-secondary",
         )}
       >
-        <TriggerIcon aria-hidden="true" className="size-5 text-muted-foreground" />
+        <PanelsTopLeft aria-hidden="true" className="size-4 text-muted-foreground" />
+        <span className="hidden text-xs lg:inline">Workspace</span>
+        <ChevronDown aria-hidden="true" className="hidden size-3 text-muted-foreground sm:block" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner align="end" className="z-50" side="bottom" sideOffset={6}>
-          <Popover.Popup className="w-[min(13rem,calc(100vw-1rem))] rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-(--overlay-shadow) outline-none transition-[scale,opacity] duration-(--motion-duration-fast) data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0">
-            <Popover.Title className="px-2 pt-1 pb-1.5 font-medium text-muted-foreground text-xs">
-              Session panels
+          <Popover.Popup className="w-[min(17rem,calc(100vw-1rem))] rounded-xl border border-border bg-popover p-1.5 text-popover-foreground shadow-(--overlay-shadow) outline-none transition-[scale,opacity] duration-(--motion-duration-fast) data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0">
+            <Popover.Title className="px-2 pt-1 pb-2 font-medium text-sm">
+              Workspace
             </Popover.Title>
+            <p className="px-2 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+              Open on the right
+            </p>
             <ul>
               {PANE_FAMILY_META.map((meta) => {
                 const active = paneOpen && paneFamily === meta.id;
                 const Icon = meta.icon;
+                const label = meta.id === "terminals" ? "Agent terminals" : meta.label;
                 return (
                   <li key={meta.id}>
                     <button
+                      aria-label={`${active ? "Close" : "Open"} ${label} panel`}
                       aria-pressed={active}
-                      className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-sm outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                      className="flex min-h-11 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 text-left text-sm outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:min-h-9"
                       onClick={() => {
                         workspaceStore.getState().togglePaneFamily(sessionId, meta.id);
                         setOpen(false);
@@ -121,13 +191,50 @@ function MobileFamilyMenu({
                       type="button"
                     >
                       <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
-                      <span className="min-w-0 flex-1 truncate">{meta.label}</span>
+                      <span className="min-w-0 flex-1 truncate">{label}</span>
+                      <span className="text-[10px] text-muted-foreground">Right</span>
                       {active && <Check aria-hidden="true" className="size-4 text-accent-text" />}
                     </button>
                   </li>
                 );
               })}
             </ul>
+            <div aria-hidden="true" className="my-1 h-px bg-border" />
+            <p className="px-2 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+              Open below
+            </p>
+            <button
+              aria-label={terminalOpen ? "Close terminal below" : "Open terminal below"}
+              aria-pressed={terminalOpen}
+              className="flex min-h-11 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 text-left text-sm outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:min-h-9"
+              onClick={() => {
+                workspaceStore.getState().setTerminalDrawerOpen(sessionId, !terminalOpen);
+                setOpen(false);
+              }}
+              type="button"
+            >
+              <SquareTerminal aria-hidden="true" className="size-4 text-muted-foreground" />
+              <span className="min-w-0 flex-1 truncate">Terminal</span>
+              <span className="font-mono text-[10px] text-muted-foreground">⌘J</span>
+              {terminalOpen && <Check aria-hidden="true" className="size-4 text-accent-text" />}
+            </button>
+            <div aria-hidden="true" className="my-1 h-px bg-border" />
+            <p className="px-2 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+              Layout
+            </p>
+            <button
+              aria-label="Enter focus mode"
+              className="flex min-h-11 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 text-left text-sm outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:min-h-9"
+              onClick={() => {
+                workspaceStore.getState().setFocusMode(true);
+                setOpen(false);
+              }}
+              type="button"
+            >
+              <Maximize2 aria-hidden="true" className="size-4 text-muted-foreground" />
+              <span className="min-w-0 flex-1 truncate">Enter focus mode</span>
+              <span className="font-mono text-[10px] text-muted-foreground">⌘⇧F</span>
+            </button>
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>
@@ -161,7 +268,10 @@ export function SessionScreen({
   const terminalDrawerOpen = useWorkspace(
     (state) => selectSessionView(state, session.id).terminalDrawerOpen,
   );
+  const focusMode = useWorkspace((state) => state.focusMode);
   const paneDocks = useMediaQuery(RIGHT_PANE_DOCK_QUERY);
+  const shellData = useShellData();
+  const host = shellData.hosts.find((entry) => entry.id === project.hostId);
   const runtimeSnapshot = useDesktopRuntimeSnapshot();
   const previewAddress =
     runtimeSnapshot === null ? null : resolveLiveSession(runtimeSnapshot, session.id);
@@ -202,13 +312,18 @@ export function SessionScreen({
   return (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col">
       <div className="surface-subheader gap-1.5 px-1.5 sm:gap-2 sm:px-3">
-        <span className="min-w-0 truncate font-medium text-sm">{session.title}</span>
-        <span className="hidden shrink-0 text-muted-foreground text-xs sm:inline">
-          {project.name}
-        </span>
-        <span className="hidden shrink-0 font-mono text-muted-foreground text-xs md:inline">
-          {session.model}
-        </span>
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 truncate font-medium text-sm">{session.title}</span>
+          <span aria-hidden="true" className="hidden shrink-0 text-border sm:inline">/</span>
+          <span className="shrink-0 sm:min-w-0 sm:shrink">
+            <SessionContextMenu
+              host={host}
+              onOpenHostHealth={onOpenHostHealth}
+              project={project}
+              session={session}
+            />
+          </span>
+        </div>
         {archived && <Badge variant="outline">Archived · read-only</Badge>}
         {session.status !== null && (
           <>
@@ -230,34 +345,14 @@ export function SessionScreen({
             <Badge variant="outline">Preview{previewCount === 1 ? "" : ` · ${previewCount}`}</Badge>
           </Link>
         )}
-        {!archived && (
-          <FamilyToggles paneFamily={viewPaneFamily} paneOpen={viewPaneOpen} sessionId={session.id} />
-        )}
-        {!archived && <span aria-hidden="true" className="mx-1 hidden h-4 w-px bg-border sm:block" />}
-        {!archived && <Tooltip>
-          <TooltipTrigger
-            render={
-              <IconButton
-                aria-label={
-                  terminalDrawerOpen ? "Close terminal drawer" : "Open terminal drawer"
-                }
-                aria-pressed={terminalDrawerOpen}
-                className="size-11 sm:size-7"
-                onClick={() =>
-                  workspaceStore
-                    .getState()
-                    .setTerminalDrawerOpen(session.id, !terminalDrawerOpen)
-                }
-                size="icon-sm"
-              >
-                {terminalDrawerOpen ? <PanelBottomClose /> : <PanelBottomOpen />}
-              </IconButton>
-            }
+        {!archived && !focusMode && (
+          <WorkspaceMenu
+            paneFamily={viewPaneFamily}
+            paneOpen={viewPaneOpen}
+            sessionId={session.id}
+            terminalOpen={terminalDrawerOpen}
           />
-          <TooltipPopup side="bottom">
-            {terminalDrawerOpen ? "Close terminal drawer" : "Open terminal drawer"}
-          </TooltipPopup>
-        </Tooltip>}
+        )}
       </div>
 
       <div className="flex min-h-0 flex-1">
@@ -271,10 +366,12 @@ export function SessionScreen({
               session={session}
             />
           </div>
-          {!archived && <TerminalDrawer open={terminalDrawerOpen} sessionId={session.id} />}
+          {!archived && (
+            <TerminalDrawer open={!focusMode && terminalDrawerOpen} sessionId={session.id} />
+          )}
         </div>
 
-        {!archived && paneDocks && paneRendered && activeMeta !== undefined && (
+        {!archived && !focusMode && paneDocks && paneRendered && activeMeta !== undefined && (
           <div
             aria-hidden={paneOpen ? undefined : "true"}
             className="pane-dock flex min-h-0 shrink-0"
@@ -299,7 +396,7 @@ export function SessionScreen({
             />
             <aside
               aria-label={activeMeta.label}
-              className="flex min-h-0 shrink-0 flex-col bg-background"
+              className="flex min-h-0 shrink-0 flex-col bg-(--sidebar-background)"
               style={{ width: `min(${paneWidth}px, 42vw)` }}
             >
               <div className="surface-subheader gap-2 px-3">
@@ -326,7 +423,7 @@ export function SessionScreen({
         )}
       </div>
 
-      {!archived && !paneDocks && activeMeta !== undefined && (
+      {!archived && !focusMode && !paneDocks && activeMeta !== undefined && (
         <Sheet
           onOpenChange={(open) => workspaceStore.getState().setPaneOpen(session.id, open)}
           open={viewPaneOpen}
diff --git a/apps/web/src/components/Titlebar.tsx b/apps/web/src/components/Titlebar.tsx
index 4a278fc..7805439 100644
--- a/apps/web/src/components/Titlebar.tsx
+++ b/apps/web/src/components/Titlebar.tsx
@@ -3,7 +3,7 @@
 // Linux window controls are injected by the desktop shell later.
 import { Badge, BrandLockup, IconButton, Tooltip, TooltipPopup, TooltipTrigger } from "@t4-code/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { Moon, PanelLeft, Search, Settings, Sun, UsersRound } from "lucide-react";
+import { Minimize2, Moon, PanelLeft, Search, Settings, Sun, UsersRound } from "lucide-react";
 import { useEffect } from "react";
 
 import { updateIsAvailable } from "../features/updates/update-model.ts";
@@ -25,7 +25,7 @@ function ThemeToggle() {
         render={
           <IconButton
             aria-label={nextLabel}
-            className="size-11 sm:size-7"
+            className="hidden size-11 sm:inline-flex sm:size-7"
             onClick={() =>
               workspaceStore.getState().setTheme(resolved === "dark" ? "light" : "dark")
             }
@@ -84,16 +84,20 @@ function SettingsButton() {
 }
 
 export function Titlebar({
+  focusMode,
+  onExitFocus,
   onToggleRail,
   railToggle,
 }: {
+  focusMode: boolean;
+  onExitFocus: () => void;
   onToggleRail: () => void;
   railToggle: RailTogglePresentation;
 }) {
   const navigate = useNavigate();
   return (
     <header
-      className="drag-region workspace-topbar titlebar-traffic-light-inset titlebar-window-controls-reserve shrink-0 gap-1 border-border border-b bg-background px-1 sm:gap-2 sm:px-3"
+      className="drag-region workspace-topbar titlebar-traffic-light-inset titlebar-window-controls-reserve shrink-0 gap-1 border-border/60 border-b bg-(--sidebar-background) px-1 sm:gap-1.5 sm:px-2.5"
       data-window-chrome={
         rendererPlatform.mode === "desktop" ? rendererPlatform.platform : undefined
       }
@@ -116,6 +120,24 @@ export function Titlebar({
       </Tooltip>
       <BrandLockup className="min-w-0" />
       <div className="flex-1" />
+      {focusMode && (
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                aria-label="Exit focus mode"
+                className="flex size-11 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-border/60 bg-secondary/60 text-foreground outline-none transition-colors duration-(--motion-duration-fast) hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring sm:h-7 sm:w-auto sm:rounded-md sm:px-2"
+                onClick={onExitFocus}
+                type="button"
+              >
+                <Minimize2 aria-hidden="true" className="size-3.5" />
+                <span className="hidden text-xs md:inline">Focus mode</span>
+              </button>
+            }
+          />
+          <TooltipPopup side="bottom">Exit focus mode (Ctrl+Shift+F)</TooltipPopup>
+        </Tooltip>
+      )}
       {rendererPlatform.mode === "browser" && (
         <Tooltip>
           <TooltipTrigger
diff --git a/apps/web/src/features/settings/SettingsWorkspace.tsx b/apps/web/src/features/settings/SettingsWorkspace.tsx
index f3fd0ff..5099ee3 100644
--- a/apps/web/src/features/settings/SettingsWorkspace.tsx
+++ b/apps/web/src/features/settings/SettingsWorkspace.tsx
@@ -49,6 +49,35 @@ interface SettingsRailEntry {
   readonly label: string;
 }
 
+export interface SettingsRailGroup {
+  readonly id: string;
+  readonly label: string;
+  readonly sections: readonly SettingsRailEntry[];
+}
+
+const SETTINGS_RAIL_GROUPS = [
+  {
+    id: "personal",
+    label: "Personal",
+    sectionIds: ["general", "appearance", "interaction", "keybindings", "notifications", "speech"],
+  },
+  {
+    id: "intelligence",
+    label: "AI & agents",
+    sectionIds: ["model", "models", "providers", "roles", "context", "tasks", "agents", "memory"],
+  },
+  {
+    id: "tools",
+    label: "Tools",
+    sectionIds: ["files", "shell", "tools", "browser", "terminal"],
+  },
+  {
+    id: "integrations",
+    label: "Integrations",
+    sectionIds: ["mcp", "extensions", "remote-hosts"],
+  },
+] as const;
+
 export function buildSettingsRailSections(sections: readonly SettingsSection[]): readonly SettingsRailEntry[] {
   const entries = sections.map(({ id, label }) => ({ id, label }));
   const diagnostics = entries.findIndex((section) => section.id === "diagnostics");
@@ -60,6 +89,43 @@ export function buildSettingsRailSections(sections: readonly SettingsSection[]):
   ];
 }
 
+export function buildSettingsRailGroups(
+  sections: readonly SettingsSection[],
+): readonly SettingsRailGroup[] {
+  return groupSettingsRailEntries(buildSettingsRailSections(sections));
+}
+
+function groupSettingsRailEntries(
+  entries: readonly SettingsRailEntry[],
+): readonly SettingsRailGroup[] {
+  const entryById = new Map(entries.map((entry) => [entry.id, entry]));
+  const used = new Set<string>();
+  const groups: SettingsRailGroup[] = [];
+
+  for (const definition of SETTINGS_RAIL_GROUPS) {
+    const grouped = definition.sectionIds.flatMap((id) => {
+      const entry = entryById.get(id);
+      if (entry === undefined) return [];
+      used.add(id);
+      return [entry];
+    });
+    if (grouped.length > 0) {
+      groups.push({ id: definition.id, label: definition.label, sections: grouped });
+    }
+  }
+
+  const systemIds = new Set([UPDATE_SECTION_ID, "diagnostics"]);
+  const hostSections = entries.filter((entry) => !used.has(entry.id) && !systemIds.has(entry.id));
+  if (hostSections.length > 0) {
+    groups.push({ id: "host", label: "Host settings", sections: hostSections });
+  }
+  const systemSections = entries.filter((entry) => systemIds.has(entry.id));
+  if (systemSections.length > 0) {
+    groups.push({ id: "system", label: "System", sections: systemSections });
+  }
+  return groups;
+}
+
 function ScopeTabs({
   api,
   scopes,
@@ -112,6 +178,8 @@ function SectionRail({
 }) {
   const drafts = useSettings(api, (state) => state.drafts);
   const itemRefs = useRef(new Map<string, HTMLButtonElement>());
+  const groups = useMemo(() => groupSettingsRailEntries(sections), [sections]);
+  const orderedSections = groups.flatMap((group) => group.sections);
 
   const dirtyBySection = useMemo(() => {
     const counts = new Map<string, number>();
@@ -124,9 +192,14 @@ function SectionRail({
   }, [api, drafts]);
 
   return (
-    <nav aria-label="Settings sections" className="flex w-52 shrink-0 flex-col overflow-y-auto border-border border-e py-2">
-      <ul className="flex flex-col gap-px px-2">
-        {sections.map((section) => {
+    <nav aria-label="Settings sections" className="flex w-56 shrink-0 flex-col overflow-y-auto border-border border-e bg-(--sidebar-background)/40 px-2 py-3">
+      {groups.map((group, groupIndex) => (
+        <div className={cn(groupIndex > 0 && "mt-3")} key={group.id}>
+          <p className="px-2.5 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
+            {group.label}
+          </p>
+          <ul className="flex flex-col gap-px">
+            {group.sections.map((section) => {
           const active = section.id === activeSectionId;
           const dimmed = matchedIds !== null && !matchedIds.has(section.id);
           const dirtyCount = dirtyBySection.get(section.id) ?? 0;
@@ -152,7 +225,7 @@ function SectionRail({
                     return;
                   }
                   const target = railFocusTarget(
-                    sections.map((entry) => entry.id),
+                    orderedSections.map((entry) => entry.id),
                     section.id,
                     event.key as RailKey,
                   );
@@ -183,8 +256,10 @@ function SectionRail({
               </button>
             </li>
           );
-        })}
-      </ul>
+            })}
+          </ul>
+        </div>
+      ))}
     </nav>
   );
 }
@@ -205,7 +280,7 @@ function SectionRows({
   const rows = section.rows.filter((row) => !hiddenIds.has(row.id));
   if (rows.length === 0) return null;
   return (
-    <div className="divide-y divide-border rounded-lg border border-border bg-card">
+    <div className="divide-y divide-border rounded-xl border border-border bg-card">
       {rows.map((row) =>
         row.control.kind === "nested" ? (
           <div key={row.id}>
@@ -392,6 +467,7 @@ export function SettingsWorkspace({
   const shownUpdate = searching ? updateMatches : appSectionActive;
   const selectedSectionId = appSectionActive ? UPDATE_SECTION_ID : activeSectionId;
   const sectionsForRail = useMemo(() => buildSettingsRailSections(viewModel.sections), [viewModel.sections]);
+  const railGroups = useMemo(() => buildSettingsRailGroups(viewModel.sections), [viewModel.sections]);
 
   const dirtyCount = Object.keys(drafts).length;
   const errorCount = Object.keys(draftErrors).length;
@@ -552,20 +628,24 @@ export function SettingsWorkspace({
           )}
 
           <div className="min-h-0 flex-1 overflow-y-auto" ref={contentRef}>
-            <div className="mx-auto flex max-w-3xl flex-col gap-6 pt-4 pr-[max(1rem,var(--app-safe-area-right))] pb-[calc(1rem+var(--app-safe-area-bottom))] pl-[max(1rem,var(--app-safe-area-left))]">
+            <div className="mx-auto flex max-w-4xl flex-col gap-8 pt-6 pr-[max(1rem,var(--app-safe-area-right))] pb-[calc(1rem+var(--app-safe-area-bottom))] pl-[max(1rem,var(--app-safe-area-left))] max-sm:gap-6 max-sm:pt-4">
               {railOverlaid && (
                 <label className="flex flex-col gap-1">
-                  <span className="font-medium text-muted-foreground text-xs">Section</span>
+                  <span className="font-medium text-muted-foreground text-xs">Settings category</span>
                   <select
                     className={cn(FIELD_CLASS, "w-full")}
                     onChange={(event) => selectSection(event.target.value)}
                     value={selectedSectionId}
                   >
-                    {sectionsForRail.map((section) => (
-                      <option key={section.id} value={section.id}>
-                        {section.label}
-                        {section.id === UPDATE_SECTION_ID && updateIsAvailable(update.phase) ? " · Update available" : ""}
-                      </option>
+                    {railGroups.map((group) => (
+                      <optgroup key={group.id} label={group.label}>
+                        {group.sections.map((section) => (
+                          <option key={section.id} value={section.id}>
+                            {section.label}
+                            {section.id === UPDATE_SECTION_ID && updateIsAvailable(update.phase) ? " · Update available" : ""}
+                          </option>
+                        ))}
+                      </optgroup>
                     ))}
                   </select>
                 </label>
@@ -584,15 +664,15 @@ export function SettingsWorkspace({
 
               {shownSections.map((section) => (
                 <section aria-labelledby={`section-${section.id}`} key={section.id}>
-                  <div className="mb-2 flex flex-col gap-0.5">
+                  <div className="mb-4 flex flex-col gap-1">
                     <h2
-                      className="font-heading font-semibold text-foreground text-sm"
+                      className="font-heading font-semibold text-foreground text-xl tracking-tight"
                       id={`section-${section.id}`}
                       tabIndex={-1}
                     >
                       {section.label}
                     </h2>
-                    <p className="max-w-[70ch] text-muted-foreground text-xs">{section.summary}</p>
+                    <p className="max-w-[70ch] text-muted-foreground text-sm leading-relaxed">{section.summary}</p>
                   </div>
                   <SectionRows api={api} hiddenIds={hiddenIds} section={section} />
                   {section.id === rolesHome && (
diff --git a/apps/web/src/keyboard/shortcuts.ts b/apps/web/src/keyboard/shortcuts.ts
index 99a72ba..23eb676 100644
--- a/apps/web/src/keyboard/shortcuts.ts
+++ b/apps/web/src/keyboard/shortcuts.ts
@@ -15,21 +15,27 @@ export interface ShortcutEventLike {
 export type ShortcutAction =
   | { readonly kind: "palette" }
   | { readonly kind: "toggle-rail" }
+  | { readonly kind: "toggle-terminal" }
+  | { readonly kind: "toggle-focus" }
   | { readonly kind: "settings" }
   | { readonly kind: "session-index"; readonly index: number };
 
 /**
  * Map a keydown to a shell action. Cmd/Ctrl+K → palette, Cmd/Ctrl+B → rail,
- * Cmd/Ctrl+Comma → settings, Cmd/Ctrl+1..9 → visible session by position.
+ * Cmd/Ctrl+J → terminal, Cmd/Ctrl+Shift+F → focus mode,
+ * Cmd/Ctrl+Comma → settings,
+ * Cmd/Ctrl+1..9 → visible session by position.
  * Anything else is null.
  */
 export function resolveShortcut(event: ShortcutEventLike): ShortcutAction | null {
   const mod = event.metaKey || event.ctrlKey;
-  if (!mod || event.altKey || event.shiftKey) return null;
+  if (!mod || event.altKey) return null;
 
   const key = event.key.toLowerCase();
+  if (event.shiftKey) return key === "f" ? { kind: "toggle-focus" } : null;
   if (key === "k") return { kind: "palette" };
   if (key === "b") return { kind: "toggle-rail" };
+  if (key === "j") return { kind: "toggle-terminal" };
   if (key === ",") return { kind: "settings" };
 
   const digit = event.code?.match(/^Digit([1-9])$/)?.[1] ?? key.match(/^([1-9])$/)?.[1];
diff --git a/apps/web/src/state/workspace-store.ts b/apps/web/src/state/workspace-store.ts
index fb7cc19..59af94d 100644
--- a/apps/web/src/state/workspace-store.ts
+++ b/apps/web/src/state/workspace-store.ts
@@ -88,6 +88,8 @@ export interface WorkspaceState {
   readonly railOverlayOpen: boolean;
   /** Command palette visibility; ephemeral, never persisted. */
   readonly paletteOpen: boolean;
+  /** Distraction-free presentation; ephemeral and never mutates saved panel state. */
+  readonly focusMode: boolean;
   readonly activeSessionId: string | null;
   readonly projectExpandedById: Record<string, boolean>;
   /** View-only dismissals; a current session makes its project visible again. */
@@ -105,6 +107,7 @@ export interface WorkspaceActions {
   setSessionListView(view: SessionListView): void;
   setRailOverlayOpen(open: boolean): void;
   setPaletteOpen(open: boolean): void;
+  setFocusMode(enabled: boolean): void;
   /** Make a session active and stamp it visited. */
   activateSession(sessionId: string, visitedAt: string): void;
   /** Stamp a visit; timestamps only move forward. */
@@ -137,6 +140,7 @@ const INITIAL_STATE: WorkspaceState = {
   sessionListView: "current",
   railOverlayOpen: false,
   paletteOpen: false,
+  focusMode: false,
   activeSessionId: null,
   projectExpandedById: {},
   dismissedEmptyProjectIds: {},
@@ -360,6 +364,7 @@ export function createWorkspaceStore(options: CreateWorkspaceStoreOptions): Work
     setSessionListView: (view) => set({ sessionListView: view }),
     setRailOverlayOpen: (open) => set({ railOverlayOpen: open }),
     setPaletteOpen: (open) => set({ paletteOpen: open }),
+    setFocusMode: (enabled) => set({ focusMode: enabled }),
     activateSession: (sessionId, visitedAt) =>
       set((state) => ({
         activeSessionId: sessionId,
diff --git a/apps/web/test/live-settings-screen.test.ts b/apps/web/test/live-settings-screen.test.ts
index 7513b40..5257198 100644
--- a/apps/web/test/live-settings-screen.test.ts
+++ b/apps/web/test/live-settings-screen.test.ts
@@ -25,7 +25,12 @@ import {
   type LiveSettingsScreenState,
 } from "../src/features/settings/live-screen-model.ts";
 import { SCOPE_LABEL } from "../src/features/settings/SettingRow.tsx";
-import { buildSettingsRailSections, SCOPE_TAB_LABEL, UPDATE_SECTION_ID } from "../src/features/settings/SettingsWorkspace.tsx";
+import {
+  buildSettingsRailGroups,
+  buildSettingsRailSections,
+  SCOPE_TAB_LABEL,
+  UPDATE_SECTION_ID,
+} from "../src/features/settings/SettingsWorkspace.tsx";
 import { filterSections } from "../src/features/settings/view-model.ts";
 
 const SETTINGS_SRC = join(import.meta.dirname, "../src/features/settings");
@@ -476,6 +481,24 @@ describe("defensive labels and advanced grouping", () => {
     ]);
     expect(rail.map((entry) => entry.id)).toEqual(["appearance", "advanced", UPDATE_SECTION_ID]);
   });
+
+  it("groups familiar settings while keeping unknown host sections honest and reachable", () => {
+    const groups = buildSettingsRailGroups([
+      { id: "general", label: "General", summary: "", rows: [] },
+      { id: "models", label: "Models", summary: "", rows: [] },
+      { id: "mcp", label: "MCP", summary: "", rows: [] },
+      { id: "vendor-runtime", label: "Vendor runtime", summary: "", rows: [] },
+      { id: "diagnostics", label: "Diagnostics", summary: "", rows: [] },
+    ]);
+    expect(groups.map((group) => [group.label, group.sections.map((section) => section.id)])).toEqual([
+      ["Personal", ["general"]],
+      ["AI & agents", ["models"]],
+      ["Integrations", ["mcp"]],
+      ["Host settings", ["vendor-runtime"]],
+      ["System", [UPDATE_SECTION_ID, "diagnostics"]],
+    ]);
+    expect(groups.flatMap((group) => group.sections).map((section) => section.id)).toHaveLength(6);
+  });
 });
 
 // ─── Honest scope labels ────────────────────────────────────────────────────
diff --git a/apps/web/test/mobile-touch-targets.test.tsx b/apps/web/test/mobile-touch-targets.test.tsx
index 68f95cd..d631b7e 100644
--- a/apps/web/test/mobile-touch-targets.test.tsx
+++ b/apps/web/test/mobile-touch-targets.test.tsx
@@ -141,15 +141,24 @@ describe("phone touch targets", () => {
     expect(controls).toContain("flex min-h-11 w-full cursor-pointer items-center");
     expect(controls).toContain("flex max-h-[min(24rem,var(--available-height))]");
     expect(controls).toContain("min-h-0 overflow-y-auto overscroll-contain");
-    expect(titlebar.match(/className="size-11 sm:size-7"/g)).toHaveLength(5);
+    expect(titlebar.match(/className="size-11 sm:size-7"/g)).toHaveLength(4);
+    expect(titlebar).toContain('className="hidden size-11 sm:inline-flex sm:size-7"');
+    expect(titlebar).toContain('aria-label="Exit focus mode"');
+    expect(titlebar).toContain("Focus mode</span>");
     const hostedAppAction = readFileSync(
       join(import.meta.dirname, "../src/components/HostedAppAction.tsx"),
       "utf8",
     );
     expect(hostedAppAction).toContain('className="size-11 lg:size-7"');
-    expect(session).toContain('aria-label="Session panels"');
+    expect(session).toContain('aria-label="Workspace tools"');
     expect(session).toContain("flex size-11 shrink-0 cursor-pointer");
+    expect(session).toContain("Session context:");
+    expect(session).toContain("View host health");
     expect(session).toContain("flex min-h-11 w-full cursor-pointer items-center");
+    expect(session).toContain("Agent terminals");
+    expect(session).toContain("⌘J");
+    expect(session).toContain("Enter focus mode");
+    expect(session).toContain("⌘⇧F");
     expect(rail).toContain("flex min-h-11 min-w-0 flex-1 items-center");
     // Project-row create actions are labeled `New`, stay 44px on touch, and
     // announce that the chosen OMP profile owns the session.
diff --git a/apps/web/test/shortcuts.test.ts b/apps/web/test/shortcuts.test.ts
index fa015c1..9594777 100644
--- a/apps/web/test/shortcuts.test.ts
+++ b/apps/web/test/shortcuts.test.ts
@@ -23,6 +23,24 @@ describe("resolveShortcut", () => {
     expect(resolveShortcut(event({ key: "b", ctrlKey: true }))).toEqual({ kind: "toggle-rail" });
   });
 
+  it("maps Cmd/Ctrl+J to the active session terminal", () => {
+    expect(resolveShortcut(event({ key: "j", ctrlKey: true }))).toEqual({
+      kind: "toggle-terminal",
+    });
+    expect(resolveShortcut(event({ key: "J", metaKey: true }))).toEqual({
+      kind: "toggle-terminal",
+    });
+  });
+
+  it("maps Cmd/Ctrl+Shift+F to focus mode", () => {
+    expect(resolveShortcut(event({ key: "f", ctrlKey: true, shiftKey: true }))).toEqual({
+      kind: "toggle-focus",
+    });
+    expect(resolveShortcut(event({ key: "F", metaKey: true, shiftKey: true }))).toEqual({
+      kind: "toggle-focus",
+    });
+  });
+
   it("maps Cmd/Ctrl+1..9 to zero-based session positions", () => {
     expect(resolveShortcut(event({ key: "1", code: "Digit1", ctrlKey: true }))).toEqual({
       kind: "session-index",
diff --git a/apps/web/test/workspace-store.test.ts b/apps/web/test/workspace-store.test.ts
index bed7a68..ffeec84 100644
--- a/apps/web/test/workspace-store.test.ts
+++ b/apps/web/test/workspace-store.test.ts
@@ -90,6 +90,30 @@ describe("session continuity (A→B→A)", () => {
     expect(selectSessionView(s(), "A").paneOpen).toBe(false);
     expect(selectSessionView(s(), "A").paneFamily).toBe("terminals");
   });
+
+  it("keeps the underlying workspace intact while focus mode is active", () => {
+    const { store } = makeStore();
+    const state = () => store.getState();
+    state().setRailOverlayOpen(true);
+    state().togglePaneFamily("A", "activity");
+    state().setTerminalDrawerOpen("A", true);
+
+    state().setFocusMode(true);
+    expect(state().focusMode).toBe(true);
+    expect(state().railOverlayOpen).toBe(true);
+    expect(selectSessionView(state(), "A")).toMatchObject({
+      paneFamily: "activity",
+      paneOpen: true,
+      terminalDrawerOpen: true,
+    });
+
+    state().setFocusMode(false);
+    expect(selectSessionView(state(), "A")).toMatchObject({
+      paneFamily: "activity",
+      paneOpen: true,
+      terminalDrawerOpen: true,
+    });
+  });
 });
 
 describe("visited and unread", () => {
@@ -153,6 +177,7 @@ describe("persistence", () => {
     first.getState().setSessionPreviewScale("A", "actual");
     first.getState().markAttentionOutcomeSeen("A", "outcome-1");
     first.getState().setPaletteOpen(true); // ephemeral, must not persist
+    first.getState().setFocusMode(true); // ephemeral, must not persist
 
     const second = createWorkspaceStore({ persistence });
     const state = second.getState();
@@ -168,6 +193,7 @@ describe("persistence", () => {
     expect(state.dismissedEmptyProjectIds).toEqual({ "host/project": true });
     expect(state.lastSeenAttentionOutcomeBySessionKey).toEqual({ A: "outcome-1" });
     expect(state.paletteOpen).toBe(false);
+    expect(state.focusMode).toBe(false);
     expect(state.railOverlayOpen).toBe(false);
   });
 
@@ -293,9 +319,11 @@ describe("persistence", () => {
     const { store } = makeStore();
     store.getState().setPaletteOpen(true);
     store.getState().setRailOverlayOpen(true);
+    store.getState().setFocusMode(true);
     const snapshot = toPersistedWorkspace(store.getState()) as unknown as Record<string, unknown>;
     expect("paletteOpen" in snapshot).toBe(false);
     expect("railOverlayOpen" in snapshot).toBe(false);
+    expect("focusMode" in snapshot).toBe(false);
   });
 
   it("can clear an empty-project dismissal without disturbing other projects", () => {
diff --git a/docs/assets/workspace-refresh/after-command-menu.jpg b/docs/assets/workspace-refresh/after-command-menu.jpg
new file mode 100644
index 0000000..f58cf7b
Binary files /dev/null and b/docs/assets/workspace-refresh/after-command-menu.jpg differ
diff --git a/docs/assets/workspace-refresh/after-focus-mode.jpg b/docs/assets/workspace-refresh/after-focus-mode.jpg
new file mode 100644
index 0000000..fcf1e88
Binary files /dev/null and b/docs/assets/workspace-refresh/after-focus-mode.jpg differ
diff --git a/docs/assets/workspace-refresh/after-mobile-settings.jpg b/docs/assets/workspace-refresh/after-mobile-settings.jpg
new file mode 100644
index 0000000..d440062
Binary files /dev/null and b/docs/assets/workspace-refresh/after-mobile-settings.jpg differ
diff --git a/docs/assets/workspace-refresh/after-session-context.jpg b/docs/assets/workspace-refresh/after-session-context.jpg
new file mode 100644
index 0000000..f74e713
Binary files /dev/null and b/docs/assets/workspace-refresh/after-session-context.jpg differ
diff --git a/docs/assets/workspace-refresh/after-settings.jpg b/docs/assets/workspace-refresh/after-settings.jpg
new file mode 100644
index 0000000..064b7d1
Binary files /dev/null and b/docs/assets/workspace-refresh/after-settings.jpg differ
diff --git a/docs/assets/workspace-refresh/after-shell.jpg b/docs/assets/workspace-refresh/after-shell.jpg
new file mode 100644
index 0000000..3cde6dd
Binary files /dev/null and b/docs/assets/workspace-refresh/after-shell.jpg differ
diff --git a/docs/assets/workspace-refresh/after-workspace-tools.jpg b/docs/assets/workspace-refresh/after-workspace-tools.jpg
new file mode 100644
index 0000000..18634bb
Binary files /dev/null and b/docs/assets/workspace-refresh/after-workspace-tools.jpg differ
diff --git a/docs/assets/workspace-refresh/before-focus-mode.jpg b/docs/assets/workspace-refresh/before-focus-mode.jpg
new file mode 100644
index 0000000..f2f220c
Binary files /dev/null and b/docs/assets/workspace-refresh/before-focus-mode.jpg differ
diff --git a/docs/assets/workspace-refresh/before-mobile-settings.jpg b/docs/assets/workspace-refresh/before-mobile-settings.jpg
new file mode 100644
index 0000000..ce62f99
Binary files /dev/null and b/docs/assets/workspace-refresh/before-mobile-settings.jpg differ
diff --git a/docs/assets/workspace-refresh/before-session.jpg b/docs/assets/workspace-refresh/before-session.jpg
new file mode 100644
index 0000000..e01df18
Binary files /dev/null and b/docs/assets/workspace-refresh/before-session.jpg differ
diff --git a/docs/assets/workspace-refresh/before-settings.jpg b/docs/assets/workspace-refresh/before-settings.jpg
new file mode 100644
index 0000000..e0bc3ef
Binary files /dev/null and b/docs/assets/workspace-refresh/before-settings.jpg differ
diff --git a/docs/assets/workspace-refresh/before-shell.jpg b/docs/assets/workspace-refresh/before-shell.jpg
new file mode 100644
index 0000000..2f6d611
Binary files /dev/null and b/docs/assets/workspace-refresh/before-shell.jpg differ
diff --git a/e2e/pwa-install.spec.ts b/e2e/pwa-install.spec.ts
index 2825777..31c12f1 100644
--- a/e2e/pwa-install.spec.ts
+++ b/e2e/pwa-install.spec.ts
@@ -137,7 +137,7 @@ test("reserves macOS traffic-light space only for native window chrome", async (
 
   const titlebar = page.locator("header");
   await expect(titlebar).not.toHaveAttribute("data-window-chrome");
-  await expect(titlebar).toHaveCSS("padding-left", "12px");
+  await expect(titlebar).toHaveCSS("padding-left", "10px");
 
   await titlebar.evaluate((element) => element.setAttribute("data-window-chrome", "darwin"));
   await expect(titlebar).toHaveCSS("padding-left", "76px");
diff --git a/e2e/remote-app.spec.ts b/e2e/remote-app.spec.ts
index 8002a85..f0a6af5 100644
--- a/e2e/remote-app.spec.ts
+++ b/e2e/remote-app.spec.ts
@@ -1064,6 +1064,144 @@ test("keeps an empty Archived filter selected on the home route", async ({ page
   ).toHaveAttribute("aria-pressed", "true");
 });
 
+test("opens supporting tools from one workspace menu and toggles the terminal shortcut", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await openSession(page, false);
+
+  const workspace = page.getByRole("button", { name: "Workspace tools", exact: true });
+  await expect(workspace).toBeVisible();
+  await workspace.click();
+  await expect(page.getByText("Open on the right", { exact: true })).toBeVisible();
+  await expect(page.getByText("Open below", { exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Open Agent terminals panel" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Open Activity panel", exact: true }).click();
+  await expect(page.getByRole("complementary", { name: "Activity", exact: true })).toBeVisible();
+  await expect(workspace).toHaveAttribute("aria-pressed", "true");
+
+  await page.keyboard.press("Control+j");
+  await expect(page.getByRole("button", { name: "Close terminal drawer", exact: true })).toBeVisible();
+  await page.keyboard.press("Control+j");
+  await expect(
+    page.getByRole("button", { name: "Close terminal drawer", exact: true }),
+  ).toBeHidden();
+});
+
+test("temporarily hides workspace chrome in focus mode and restores it", async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await openSession(page, false);
+
+  const workspace = page.getByRole("button", { name: "Workspace tools", exact: true });
+  await workspace.click();
+  await page.getByRole("button", { name: "Open Activity panel", exact: true }).click();
+  await page.keyboard.press("Control+j");
+  await expect(page.getByRole("complementary", { name: "Activity", exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Close terminal drawer", exact: true })).toBeVisible();
+
+  await workspace.click();
+  await page.getByRole("button", { name: "Enter focus mode", exact: true }).click();
+  await expect(page.getByRole("navigation", { name: "Working folders and sessions" })).toBeHidden();
+  await expect(page.getByRole("complementary", { name: "Activity", exact: true })).toBeHidden();
+  await expect(page.getByRole("button", { name: "Close terminal drawer", exact: true })).toBeHidden();
+  await expect(page.getByRole("button", { name: "Workspace tools", exact: true })).toBeHidden();
+
+  const exitFocus = page.getByRole("button", { name: "Exit focus mode", exact: true });
+  await expect(exitFocus).toBeVisible();
+  await exitFocus.click();
+  await expect(page.getByRole("navigation", { name: "Working folders and sessions" })).toBeVisible();
+  await expect(page.getByRole("complementary", { name: "Activity", exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Close terminal drawer", exact: true })).toBeVisible();
+
+  await page.keyboard.press("Control+Shift+f");
+  await expect(exitFocus).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(exitFocus).toBeHidden();
+  await page.getByRole("button", { name: "Close Activity", exact: true }).click();
+  await page.getByRole("button", { name: "Close terminal drawer", exact: true }).click();
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.keyboard.press("Control+Shift+f");
+  await expect(exitFocus).toBeVisible();
+  const exitBox = await exitFocus.boundingBox();
+  expect(exitBox).not.toBeNull();
+  expect(exitBox!.width).toBeGreaterThanOrEqual(MIN_TOUCH_TARGET_PX);
+  expect(exitBox!.height).toBeGreaterThanOrEqual(MIN_TOUCH_TARGET_PX);
+  await exitFocus.click();
+  await expect(page.getByRole("textbox", { name: "Message the session" })).toBeVisible();
+});
+
+test("shows verified session context and groups command-palette actions", async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await openSession(page, false);
+
+  const context = page.getByRole("button", { name: /^Session context:/u });
+  await expect(context).toBeVisible();
+  await context.click();
+  await expect(page.getByText("Host", { exact: true })).toBeVisible();
+  await expect(page.getByText("Model", { exact: true })).toBeVisible();
+  await expect(page.getByText("Connection", { exact: true })).toBeVisible();
+  await expect(page.getByText("Live connection", { exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "View host health", exact: true })).toBeVisible();
+  await page.keyboard.press("Escape");
+
+  await page.keyboard.press("Control+k");
+  const palette = page.getByRole("dialog", {
+    name: "Search sessions, transcripts, and commands",
+  });
+  await expect(palette.getByText("Recent work", { exact: true })).toBeVisible();
+  await expect(palette.getByText("Workspace", { exact: true })).toBeVisible();
+  await expect(palette.getByText("Navigate", { exact: true })).toBeVisible();
+  await expect(palette.getByText("App", { exact: true })).toBeVisible();
+  await expect(palette.getByLabel("Command menu keyboard help")).toContainText(
+    /Navigate.*Open.*Esc.*Close/u,
+  );
+
+  const search = palette.getByRole("combobox");
+  await search.fill("open terminal");
+  await expect(palette.getByText("Workspace", { exact: true })).toBeVisible();
+  await page.keyboard.press("Enter");
+  await expect(page.getByRole("button", { name: "Close terminal drawer", exact: true })).toBeVisible();
+});
+
+test("groups sample settings on desktop and in the mobile category picker", async ({ page }) => {
+  await page.route("**/*", async (route) => {
+    const requestUrl = new URL(route.request().url());
+    const appUrl = new URL(web.url);
+    if (requestUrl.origin === appUrl.origin && requestUrl.pathname === "/") {
+      const response = await route.fetch();
+      const body = (await response.text()).replace(
+        /<script id="t4-backend" type="application\/json">.*?<\/script>/u,
+        "",
+      );
+      await route.fulfill({ body, response });
+      return;
+    }
+    await route.continue();
+  });
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.goto(`${web.url}#/settings`, { waitUntil: "domcontentloaded" });
+
+  const sections = page.getByRole("navigation", { name: "Settings sections" });
+  await expect(sections.getByText("Personal", { exact: true })).toBeVisible();
+  await expect(sections.getByText("AI & agents", { exact: true })).toBeVisible();
+  await expect(sections.getByText("Tools", { exact: true })).toBeVisible();
+  await expect(sections.getByText("Integrations", { exact: true })).toBeVisible();
+  await expect(sections.getByText("System", { exact: true })).toBeVisible();
+  await sections.getByRole("button", { name: "Diagnostics", exact: true }).click();
+  await expect(page.getByRole("heading", { name: "Diagnostics", exact: true })).toBeVisible();
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  const picker = page.getByLabel("Settings category");
+  await expect(picker).toBeVisible();
+  await expect(picker.locator('optgroup[label="Personal"] option')).toHaveCount(5);
+  await expect(picker.locator('optgroup[label="AI & agents"] option')).toHaveCount(4);
+  await expect(picker.locator('optgroup[label="System"] option')).toHaveCount(2);
+  await picker.selectOption("general");
+  await expect(page.getByRole("heading", { name: "General", exact: true })).toBeVisible();
+});
+
 for (const viewport of [
   { width: 390, height: 844 },
   { width: 390, height: 500 },
@@ -1190,10 +1328,8 @@ test("manages a session from a phone and converges another live client", async (
     await page.getByRole("button", { name: "Show session list", exact: true }).click();
     const rail = page.getByRole("dialog", { name: "Working folders and sessions" });
     await expect(rail).toBeVisible();
-    await expect(rail.getByRole("heading", { name: "Working folders", exact: true })).toBeVisible();
-    await expect(
-      rail.getByText("OMP groups sessions by the folder they were started in.", { exact: true }),
-    ).toBeVisible();
+    await expect(rail.getByRole("heading", { name: "Sessions", exact: true })).toBeVisible();
+    await expect(rail.getByRole("button", { name: /Attention/ })).toBeVisible();
     await expect(rail.getByRole("button", { name: "Current · 1", exact: true })).toBeVisible();
     await expect(rail.getByRole("button", { name: "Archived · 0", exact: true })).toBeVisible();
 
diff --git a/e2e/site-mobile-docs.spec.ts b/e2e/site-mobile-docs.spec.ts
index cccb9a1..f29c9aa 100644
--- a/e2e/site-mobile-docs.spec.ts
+++ b/e2e/site-mobile-docs.spec.ts
@@ -132,8 +132,8 @@ test("offers the Android APK without hiding desktop downloads", async ({ page })
     "href",
     "https://github.com/LycaonLLC/t4-code/releases/download/v0.1.25/T4-Code-0.1.25-android.apk",
   );
-  await expect(page.getByRole("link", { name: "Download for Linux" }).first()).toBeVisible();
-  await expect(page.getByRole("link", { name: "macOS build" }).first()).toBeVisible();
+  await expect(page.getByRole("link", { name: /Linux/u }).first()).toBeVisible();
+  await expect(page.getByRole("link", { name: /macOS/u }).first()).toBeVisible();
   await expect(page.getByText("TestFlight coming soon", { exact: true }).first()).toBeVisible();
   const handoff = page.locator('img[src="/screenshots/t4-code-tui-handoff.gif"]');
   await handoff.scrollIntoViewIfNeeded();
diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css
index fe55e3e..3f0815b 100644
--- a/packages/ui/src/tokens.css
+++ b/packages/ui/src/tokens.css
@@ -25,7 +25,7 @@
 
   /* Window control / titlebar geometry (T3 workspace vars, kept 1:1). */
   --app-scrollbar-width: 6px;
-  --workspace-topbar-height: 52px;
+  --workspace-topbar-height: 44px;
   --workspace-controls-top: 0px;
   --workspace-controls-left: calc(var(--app-safe-area-left) + 0.75rem);
   --workspace-controls-right: calc(var(--app-safe-area-right) + 0.75rem);
@@ -48,7 +48,7 @@
 }
 
 .wco {
-  --workspace-topbar-height: env(titlebar-area-height, 52px);
+  --workspace-topbar-height: env(titlebar-area-height, 44px);
   --workspace-controls-top: env(titlebar-area-y, 0px);
   --workspace-controls-left: calc(env(titlebar-area-x, 0px) + 0.75rem);
   --workspace-controls-right: calc(
@@ -61,7 +61,7 @@
 
 :root {
   color-scheme: light;
-  --radius: 0.625rem;
+  --radius: 0.75rem;
 
   /* Neutral surfaces (pure neutral, zero chroma) */
   --background: #ffffff;
@@ -129,13 +129,14 @@
   /* Panels / transcript / composer / overlay */
   --panel-background: var(--card);
   --panel-border: var(--border);
+  --sidebar-background: color-mix(in srgb, var(--background) 97%, var(--foreground));
   --panel-tab-height: 36px;
-  --transcript-measure: 48rem;
+  --transcript-measure: 46rem;
   --transcript-background: var(--background);
   --composer-background: color-mix(in srgb, var(--popover) 92%, transparent);
   --composer-border: var(--border);
   --composer-blur: 12px;
-  --composer-shadow: 0 8px 24px rgb(0 0 0 / 8%);
+  --composer-shadow: 0 6px 20px rgb(0 0 0 / 10%);
   --overlay-backdrop: color-mix(in srgb, var(--background) 60%, transparent);
   --overlay-shadow: 0 16px 40px rgb(0 0 0 / 10%);
 
@@ -187,19 +188,19 @@
 .dark {
   color-scheme: dark;
 
-  --background: color-mix(in srgb, oklch(0.145 0 0) 95%, #ffffff);
+  --background: #0f0f11;
   --app-chrome-background: var(--background);
-  --foreground: oklch(0.97 0 0);
-  --card: color-mix(in srgb, var(--background) 98%, #ffffff);
-  --card-foreground: oklch(0.97 0 0);
-  --popover: color-mix(in srgb, var(--background) 98%, #ffffff);
-  --popover-foreground: oklch(0.97 0 0);
+  --foreground: #e3e4e6;
+  --card: color-mix(in srgb, var(--background) 96%, #ffffff);
+  --card-foreground: var(--foreground);
+  --popover: color-mix(in srgb, var(--background) 93%, #ffffff);
+  --popover-foreground: var(--foreground);
   --secondary: rgb(255 255 255 / 4%);
-  --secondary-foreground: oklch(0.97 0 0);
+  --secondary-foreground: var(--foreground);
   --muted: rgb(255 255 255 / 4%);
   --muted-foreground: oklch(0.708 0 0);
   --accent: rgb(255 255 255 / 4%);
-  --accent-foreground: oklch(0.97 0 0);
+  --accent-foreground: var(--foreground);
   --border: rgb(255 255 255 / 6%);
   --input: rgb(255 255 255 / 8%);
 
diff --git a/provenance/t3code/imports/f0-20260711.json b/provenance/t3code/imports/f0-20260711.json
index c506538..9f3ed4d 100644
--- a/provenance/t3code/imports/f0-20260711.json
+++ b/provenance/t3code/imports/f0-20260711.json
@@ -101,14 +101,14 @@
       "sourceBlobSha": "1641bb6b109b44f2c7b0f2576fcf0750a96da88f",
       "targetPath": "packages/ui/src/tokens.css + packages/ui/src/terminal/xtermTheme.ts",
       "classification": "reference-only",
-      "checksum": "sha256:c43520f3e36cd96811e6cb3edf3864b4bde0b7605de3d53d6db031294384edd7;sha256:3168d798b2274b85ef07a06bcc03af060b179a173449a53b91a9c4960dacf0d2"
+      "checksum": "sha256:79a1e32e3947f4bec2e503135535bce98255d1545334b547970ce89efbc9747a;sha256:3168d798b2274b85ef07a06bcc03af060b179a173449a53b91a9c4960dacf0d2"
     },
     {
       "sourcePath": "apps/web/src/index.css",
       "sourceBlobSha": "3ae42a3e61cac54e9fe75cb58a67313241989ec9",
       "targetPath": "packages/ui/src/tokens.css",
       "classification": "reference-only",
-      "checksum": "sha256:c43520f3e36cd96811e6cb3edf3864b4bde0b7605de3d53d6db031294384edd7"
+      "checksum": "sha256:79a1e32e3947f4bec2e503135535bce98255d1545334b547970ce89efbc9747a"
     }
   ]
 }
diff --git a/provenance/t3code/imports/f1-shell-20260711.json b/provenance/t3code/imports/f1-shell-20260711.json
index d7f901c..178f163 100644
--- a/provenance/t3code/imports/f1-shell-20260711.json
+++ b/provenance/t3code/imports/f1-shell-20260711.json
@@ -9,7 +9,7 @@
       "sourceBlobSha": "4a97f0542b4c95e96eae835a8d01db56e7156f1a;70d163306cca5b32d32319359c8ecc9a68c3dbf8",
       "targetPath": "apps/web/src/state/workspace-store.ts",
       "classification": "adapted",
-      "checksum": "sha256:114958f57d4814ff4c9a9a40a9c5455f4b81df5678a58fa1477ba5a0cc6e5ada"
+      "checksum": "sha256:c5c428e175cf309d379226ec3b0a1516f75b7d748f2c9a7992563c2c76f26a23"
     },
     {
       "sourcePath": "apps/web/src/hooks/useTheme.ts",
@@ -44,7 +44,7 @@
       "sourceBlobSha": "9d6109a7780654557d165d9b2bd9a6246573b2f1",
       "targetPath": "apps/web/src/keyboard/shortcuts.ts",
       "classification": "reference-only",
-      "checksum": "sha256:09febf119f383753d1e414a03f7b6e4d9bc0489a0245c51b6c65e2c4f63cce70"
+      "checksum": "sha256:cb3a524c3b3ef4f415e2e00ee58e40e5bd5f1ef791337ff35bca3e1c2cdeba16"
     },
     {
       "sourcePath": "apps/web/src/components/Sidebar.logic.ts",