From 7b841bac66cc12557a7c44ad70d7d434f21a1106 Mon Sep 17 00:00:00 2001
From: Jason Carter <jsyqrt@gmail.com>
Date: Wed, 5 Aug 2026 17:10:00 +0800
Subject: [PATCH] feat: keep JK/HL pane focus across L2, Cmd+B, and pointer
 clicks

Claim keyboard panes on click, blur the composer when clicking outside,
and stop Cmd+B / L0 navigation from dumping focus into content so vim
nav stays usable on Team L1/L2 and other L1 rails.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/web-ui/src/App.tsx                   |   8 +-
 .../web-ui/src/components/ChatTeamSidebar.tsx |  17 ++-
 .../web-ui/src/components/ProjectSidebar.tsx  |   5 +
 packages/web-ui/src/components/Sidebar.tsx    |   2 +-
 .../web-ui/src/components/TeamDetailPanel.tsx | 115 +++++++++++++++++-
 .../web-ui/src/contexts/LayoutContext.tsx     |  50 +++++++-
 packages/web-ui/src/lib/keyboard-shortcuts.ts |   3 +-
 packages/web-ui/src/locales/en/common.json    |   3 +-
 packages/web-ui/src/locales/zh-CN/common.json |   3 +-
 packages/web-ui/src/pages/Deliverables.tsx    |  12 +-
 packages/web-ui/src/pages/Settings.tsx        |   2 +-
 packages/web-ui/src/pages/Store.tsx           |   5 +-
 packages/web-ui/src/pages/Team.tsx            |  79 ++++++++++--
 packages/web-ui/src/pages/Work.tsx            |  21 +++-
 14 files changed, 286 insertions(+), 39 deletions(-)

diff --git a/packages/web-ui/src/App.tsx b/packages/web-ui/src/App.tsx
index 30f5fb68..0e2bee8f 100644
--- a/packages/web-ui/src/App.tsx
+++ b/packages/web-ui/src/App.tsx
@@ -806,7 +806,13 @@ export function App() {
           >
             <Sidebar
               currentPage={page}
-              onNavigate={(p) => { navigate(p); setSidebarOpen(false); setKeyboardPane?.('content'); }}
+              onNavigate={(p) => {
+                navigate(p);
+                setSidebarOpen(false);
+                // Clicking the app rail claims L0 — never dump into content (that kills JK/HL).
+                setKeyboardPane?.('l0');
+                setL0FocusPageId?.(p);
+              }}
               authUser={authUser}
               collapsed={sidebar.collapsed}
               onToggleCollapse={sidebar.toggle}
diff --git a/packages/web-ui/src/components/ChatTeamSidebar.tsx b/packages/web-ui/src/components/ChatTeamSidebar.tsx
index 6a8bbb6a..e83195e1 100644
--- a/packages/web-ui/src/components/ChatTeamSidebar.tsx
+++ b/packages/web-ui/src/components/ChatTeamSidebar.tsx
@@ -70,6 +70,8 @@ interface ChatTeamSidebarProps {
   previewMode?: boolean;
   /** Keyboard focus is on this L1 pane (H/L navigation). */
   focused?: boolean;
+  /** When true, L from L1 enters Team L2 instead of jumping to chat content. */
+  l2Available?: boolean;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -215,6 +217,7 @@ export const ChatTeamSidebar = memo(function ChatTeamSidebar({
   initialLoading,
   previewMode,
   focused,
+  l2Available,
 }: ChatTeamSidebarProps) {
   const { t } = useTranslation(['team', 'common']);
   const isMobile = useIsMobile();
@@ -1027,19 +1030,19 @@ export const ChatTeamSidebar = memo(function ChatTeamSidebar({
     });
   }, [onSelectDm, onSelectChannel, onSelectAgent, onSelectTeam]);
 
-  // L1 keyboard: j/k move roster, H → L0, L → content (chat)
+  // L1 keyboard: j/k move roster, H → L0, L → L2 (if open) or content
   useEffect(() => {
     if (previewMode || isMobile || !isActive || hidden) return;
     const onKey = (e: KeyboardEvent) => {
       const pane = layout?.keyboardPane ?? 'content';
-      if (pane === 'l0') return;
+      if (pane === 'l0' || pane === 'l2') return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
       if (isEditableTarget(e.target)) return;
 
       const bare = e.key.length === 1 ? e.key.toLowerCase() : e.key;
 
       if (bare === 'h' || bare === 'ArrowLeft') {
-        if (pane !== 'l1') return; // Team.tsx handles content → L1
+        if (pane !== 'l1') return; // Team.tsx / L2 handle other panes
         e.preventDefault();
         e.stopPropagation();
         layout?.setL0FocusPageId(PAGE.TEAM);
@@ -1051,7 +1054,9 @@ export const ChatTeamSidebar = memo(function ChatTeamSidebar({
         if (pane !== 'l1') return;
         e.preventDefault();
         e.stopPropagation();
-        layout?.setKeyboardPane('content');
+        // Only enter L2 when it exists. Never dump into chat content —
+        // deepest pane keeps JK focus (L would leave the user without JK).
+        if (l2Available) layout?.setKeyboardPane('l2');
         return;
       }
 
@@ -1088,7 +1093,7 @@ export const ChatTeamSidebar = memo(function ChatTeamSidebar({
     document.addEventListener('keydown', onKey, true);
     return () => document.removeEventListener('keydown', onKey, true);
   }, [
-    previewMode, isMobile, isActive, hidden, layout, focused,
+    previewMode, isMobile, isActive, hidden, layout, focused, l2Available,
     chatMode, activeDmUserId, authUser?.id, selectedAgent, activeChannel, selectedTeamId,
     activateL1Item,
   ]);
@@ -1100,7 +1105,7 @@ export const ChatTeamSidebar = memo(function ChatTeamSidebar({
 
   return (
     <>
-      <div className={`bg-surface-primary flex flex-col ${width != null ? 'shrink-0' : 'flex-1 min-w-0'} ${focused ? 'ring-1 ring-inset ring-brand-500/30' : ''}`} style={hidden ? { display: 'none' } : width != null ? { width } : undefined}>
+      <div data-keyboard-pane="l1" className={`bg-surface-primary flex flex-col ${width != null ? 'shrink-0' : 'flex-1 min-w-0'} ${focused ? 'ring-1 ring-inset ring-brand-500/30' : ''}`} style={hidden ? { display: 'none' } : width != null ? { width } : undefined}>
         {/* Header with title + manage button */}
         <div data-electron-drag className="px-4 h-14 flex items-center shrink-0 gap-2">
           {isMobile && <MobileMenuButton />}
diff --git a/packages/web-ui/src/components/ProjectSidebar.tsx b/packages/web-ui/src/components/ProjectSidebar.tsx
index 199b5b11..2ed53efd 100644
--- a/packages/web-ui/src/components/ProjectSidebar.tsx
+++ b/packages/web-ui/src/components/ProjectSidebar.tsx
@@ -16,6 +16,8 @@ export interface ProjectSidebarProps {
   onResizeStart?: (e: React.MouseEvent) => void;
   hidden?: boolean;
   focused?: boolean;
+  /** Called when the user pointer-activates this L1 rail (in addition to data-keyboard-pane). */
+  onActivate?: () => void;
 }
 
 export function ProjectSidebar({
@@ -32,6 +34,7 @@ export function ProjectSidebar({
   onResizeStart,
   hidden,
   focused,
+  onActivate,
 }: ProjectSidebarProps) {
   const { t } = useTranslation(['work', 'common']);
   const allIsSelected = allSelected ?? selectedProjectId == null;
@@ -39,6 +42,8 @@ export function ProjectSidebar({
   return (
     <>
       <div
+        data-keyboard-pane="l1"
+        onPointerDown={() => onActivate?.()}
         className="bg-surface-primary flex flex-col shrink-0 border-r border-border-default/60"
         style={hidden ? { display: 'none' } : width != null ? { width } : undefined}
       >
diff --git a/packages/web-ui/src/components/Sidebar.tsx b/packages/web-ui/src/components/Sidebar.tsx
index 437e76a8..f0044b36 100644
--- a/packages/web-ui/src/components/Sidebar.tsx
+++ b/packages/web-ui/src/components/Sidebar.tsx
@@ -31,7 +31,7 @@ export function Sidebar({
   const { t } = useTranslation(['nav', 'common']);
 
   return (
-    <aside className="markus-app-sidebar h-dvh bg-surface-secondary flex flex-col shrink-0 overflow-hidden">
+    <aside data-keyboard-pane="l0" className="markus-app-sidebar h-dvh bg-surface-secondary flex flex-col shrink-0 overflow-hidden">
       {/* Drag region includes traffic-light clearance (padding is on this node, not aside). */}
       <div
         data-electron-drag
diff --git a/packages/web-ui/src/components/TeamDetailPanel.tsx b/packages/web-ui/src/components/TeamDetailPanel.tsx
index 0a6fa16e..baabb9f1 100644
--- a/packages/web-ui/src/components/TeamDetailPanel.tsx
+++ b/packages/web-ui/src/components/TeamDetailPanel.tsx
@@ -1,11 +1,20 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { api } from '../api.ts';
 import type { AgentInfo, TeamInfo, HumanUserInfo, AuthUser } from '../api.ts';
 import { Avatar } from './Avatar.tsx';
+import { useLayout } from '../contexts/LayoutContext.tsx';
+import { isEditableTarget } from '../lib/keyboard-shortcuts.ts';
+import { PAGE } from '../routes.ts';
+import { usePageActive } from '../hooks/usePageActive.ts';
 
 type ChatMode = 'channel' | 'direct' | 'dm';
 
+type L2NavItem =
+  | { kind: 'channel'; id: string; channelKey: string }
+  | { kind: 'agent'; id: string; agentId: string }
+  | { kind: 'dm'; id: string; userId: string };
+
 interface TeamDetailPanelProps {
   team: TeamInfo;
   agents: AgentInfo[];
@@ -15,6 +24,7 @@ interface TeamDetailPanelProps {
   chatMode: ChatMode;
   selectedAgent: string;
   activeChannel: string;
+  activeDmUserId?: string;
   teams: TeamInfo[];
   onSelectAgent: (agentId: string) => void;
   onSelectChannel: (channelKey: string) => void;
@@ -27,18 +37,23 @@ interface TeamDetailPanelProps {
   unreadByAgent?: Map<string, number>;
   width?: number;
   onResizeStart?: (e: React.MouseEvent) => void;
+  /** Keyboard focus is on this L2 pane. */
+  focused?: boolean;
 }
 
 export function TeamDetailPanel({
   team, agents, humans, authUser, groupChat,
-  chatMode, selectedAgent, activeChannel,
+  chatMode, selectedAgent, activeChannel, activeDmUserId,
   teams,
   onSelectAgent, onSelectChannel, onSelectDm, onBack, onViewProfile,
   onRefreshAgents, onRefreshTeams,
   unreadByAgent,
   width, onResizeStart,
+  focused,
 }: TeamDetailPanelProps) {
   const { t } = useTranslation(['team', 'common']);
+  const layout = useLayout();
+  const isPageActive = usePageActive(PAGE.TEAM);
   const isAdmin = authUser?.role === 'owner' || authUser?.role === 'admin';
 
   const teamAgents = useMemo(
@@ -55,6 +70,87 @@ export function TeamDetailPanel({
 
   const isGcActive = groupChat && chatMode === 'channel' && activeChannel === groupChat.channelKey;
 
+  const l2NavItems = useMemo((): L2NavItem[] => {
+    const items: L2NavItem[] = [];
+    if (groupChat) {
+      items.push({ kind: 'channel', id: `channel:${groupChat.channelKey}`, channelKey: groupChat.channelKey });
+    }
+    for (const a of teamAgents) {
+      items.push({ kind: 'agent', id: `agent:${a.id}`, agentId: a.id });
+    }
+    for (const h of teamHumans) {
+      items.push({ kind: 'dm', id: `dm:${h.id}`, userId: h.id });
+    }
+    return items;
+  }, [groupChat, teamAgents, teamHumans]);
+  const l2NavItemsRef = useRef(l2NavItems);
+  l2NavItemsRef.current = l2NavItems;
+
+  const activateL2Item = useCallback((item: L2NavItem) => {
+    if (item.kind === 'channel') onSelectChannel(item.channelKey);
+    else if (item.kind === 'agent') onSelectAgent(item.agentId);
+    else onSelectDm(item.userId);
+    requestAnimationFrame(() => {
+      document.querySelector(`[data-l2-nav-id="${item.id}"]`)?.scrollIntoView({ block: 'nearest' });
+    });
+  }, [onSelectChannel, onSelectAgent, onSelectDm]);
+
+  // L2 keyboard: j/k move members, H → L1, L → content
+  useEffect(() => {
+    if (!isPageActive) return;
+    const onKey = (e: KeyboardEvent) => {
+      const pane = layout?.keyboardPane ?? 'content';
+      if (pane !== 'l2') return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (isEditableTarget(e.target)) return;
+
+      const bare = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+
+      if (bare === 'h' || bare === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        layout?.setKeyboardPane('l1');
+        return;
+      }
+      // L2 is the deepest Team pane — ignore L so JK focus is never lost.
+      if (bare === 'l' || bare === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      const move = bare === 'j' || bare === 'ArrowDown' ? 1
+        : bare === 'k' || bare === 'ArrowUp' ? -1
+        : 0;
+      if (!move) return;
+      e.preventDefault();
+      e.stopPropagation();
+
+      const items = l2NavItemsRef.current;
+      if (items.length === 0) return;
+      let cur = -1;
+      if (chatMode === 'channel') {
+        cur = items.findIndex(it => it.kind === 'channel' && it.channelKey === activeChannel);
+      } else if (chatMode === 'direct') {
+        cur = items.findIndex(it => it.kind === 'agent' && it.agentId === selectedAgent);
+      } else if (chatMode === 'dm' && activeDmUserId) {
+        cur = items.findIndex(it => it.kind === 'dm' && it.userId === activeDmUserId);
+      }
+      if (cur < 0) cur = move > 0 ? -1 : 0;
+      const nextIdx = Math.max(0, Math.min(items.length - 1, cur + move));
+      activateL2Item(items[nextIdx]!);
+    };
+    document.addEventListener('keydown', onKey, true);
+    return () => document.removeEventListener('keydown', onKey, true);
+  }, [
+    isPageActive, layout, chatMode, activeChannel, selectedAgent, activeDmUserId, activateL2Item,
+  ]);
+
+  const l2SelectedClass = (isSelected: boolean) =>
+    isSelected
+      ? (focused ? 'bg-brand-500/25 ring-1 ring-inset ring-brand-500/40' : 'bg-surface-overlay')
+      : 'hover:bg-surface-overlay/60';
+
   // ── Agent context menu ──
   const [agentMenu, setAgentMenu] = useState<{ agentId: string; x: number; y: number } | null>(null);
   const [moveToOpen, setMoveToOpen] = useState(false);
@@ -108,7 +204,8 @@ export function TeamDetailPanel({
   return (
     <>
       <div
-        className="bg-surface-primary flex flex-col shrink-0"
+        data-keyboard-pane="l2"
+        className={`bg-surface-primary flex flex-col shrink-0 ${focused ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}
         style={width != null ? { width } : { width: 260 }}
       >
         {/* Header */}
@@ -140,9 +237,10 @@ export function TeamDetailPanel({
                 {t('chat.groupChat', { defaultValue: 'Group Chat' })}
               </p>
               <button
+                data-l2-nav-id={`channel:${groupChat.channelKey}`}
                 onClick={() => onSelectChannel(groupChat.channelKey)}
                 className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-xs transition-colors text-fg-primary ${
-                  isGcActive ? 'bg-surface-overlay' : 'hover:bg-surface-overlay/60'
+                  l2SelectedClass(!!isGcActive)
                 }`}
               >
                 <div className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 bg-surface-overlay text-fg-primary">
@@ -177,6 +275,7 @@ export function TeamDetailPanel({
                 return (
                   <button
                     key={a.id}
+                    data-l2-nav-id={`agent:${a.id}`}
                     onClick={() => onSelectAgent(a.id)}
                     onContextMenu={e => {
                       if (!isAdmin) return;
@@ -189,7 +288,7 @@ export function TeamDetailPanel({
                     className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-xs mb-0.5 transition-colors ${
                       isStopped ? 'opacity-50 text-fg-tertiary' : 'text-fg-primary'
                     } ${
-                      isActive ? 'bg-surface-overlay' : 'hover:bg-surface-overlay/60'
+                      l2SelectedClass(isActive)
                     }`}
                   >
                     <Avatar
@@ -231,11 +330,15 @@ export function TeamDetailPanel({
               </p>
               {teamHumans.map(h => {
                 const isSelf = h.id === authUser?.id;
+                const isDmActive = chatMode === 'dm' && activeDmUserId === h.id;
                 return (
                   <button
                     key={h.id}
+                    data-l2-nav-id={`dm:${h.id}`}
                     onClick={() => onSelectDm(h.id)}
-                    className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-xs mb-0.5 transition-colors text-fg-primary hover:bg-white/[0.08]`}
+                    className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-xs mb-0.5 transition-colors text-fg-primary ${
+                      l2SelectedClass(isDmActive)
+                    }`}
                   >
                     <Avatar
                       name={h.name}
diff --git a/packages/web-ui/src/contexts/LayoutContext.tsx b/packages/web-ui/src/contexts/LayoutContext.tsx
index caf75dbb..2e7bbcce 100644
--- a/packages/web-ui/src/contexts/LayoutContext.tsx
+++ b/packages/web-ui/src/contexts/LayoutContext.tsx
@@ -14,8 +14,8 @@ export type RightPanelPayload =
 
 export type RightPanelMode = 'browser' | 'terminal';
 
-/** Keyboard focus zone for H/L pane navigation across L0 app rail and page L1. */
-export type KeyboardPane = 'l0' | 'l1' | 'content';
+/** Keyboard focus zone for H/L pane navigation: L0 app rail ↔ L1 ↔ L2 (Team) ↔ content. */
+export type KeyboardPane = 'l0' | 'l1' | 'l2' | 'content';
 
 export interface RightPanelTab {
   id: string;
@@ -236,8 +236,8 @@ export interface LayoutContextValue {
   toggleLeftCollapsed: () => void;
 
   /**
-   * Keyboard focus zone: L0 app rail ↔ page L1 ↔ page content.
-   * H moves left (content→l1→l0); L moves right (l0→l1→content).
+   * Keyboard focus zone: L0 app rail ↔ page L1 ↔ L2 (when present) ↔ content.
+   * H moves left; L moves right.
    */
   keyboardPane: KeyboardPane;
   setKeyboardPane: (pane: KeyboardPane) => void;
@@ -317,6 +317,48 @@ export function LayoutProvider({ children }: { children: React.ReactNode }) {
   const setKeyboardPane = useCallback((pane: KeyboardPane) => setKeyboardPaneState(pane), []);
   const setL0FocusPageId = useCallback((pageId: string | null) => setL0FocusPageIdState(pageId), []);
 
+  // Pointer: (1) blur text fields when clicking outside so JK/HL resume without Escape;
+  // (2) claim a keyboard pane via [data-keyboard-pane]. Clicks outside pane regions do
+  // NOT clear the pane. Mark composer chrome with [data-keep-edit-focus] to keep typing.
+  useEffect(() => {
+    const isTextField = (el: Element | null): el is HTMLElement => {
+      if (!(el instanceof HTMLElement)) return false;
+      const tag = el.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+      return el.isContentEditable;
+    };
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (!(e.target instanceof Element)) return;
+
+      const active = document.activeElement;
+      if (isTextField(active)) {
+        const insideField = active === e.target || active.contains(e.target);
+        const keepEdit = !!e.target.closest('[data-keep-edit-focus]');
+        const otherField = isTextField(e.target)
+          || !!e.target.closest('input, textarea, select, [contenteditable="true"]');
+        // Never steal focus from an embedded terminal.
+        const intoXterm = !!e.target.closest('.xterm');
+        if (!insideField && !keepEdit && !otherField && !intoXterm) {
+          active.blur();
+        }
+      }
+
+      const hit = e.target.closest('[data-keyboard-pane]');
+      if (!hit) return;
+      const pane = hit.getAttribute('data-keyboard-pane');
+      if (pane !== 'l0' && pane !== 'l1' && pane !== 'l2' && pane !== 'content') return;
+      setKeyboardPaneState(pane);
+      if (pane === 'l0') {
+        const pageEl = e.target.closest('[data-l0-page-id]');
+        const pageId = pageEl?.getAttribute('data-l0-page-id');
+        if (pageId) setL0FocusPageIdState(pageId);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, []);
+
   const lastBrowserTabsRef = useRef<RightPanelTab[]>(initialPanel.browserTabs);
   const lastBrowserActiveRef = useRef<string | null>(initialPanel.browserActiveId);
   const lastTerminalTabsRef = useRef<RightPanelTab[]>(initialPanel.terminalTabs);
diff --git a/packages/web-ui/src/lib/keyboard-shortcuts.ts b/packages/web-ui/src/lib/keyboard-shortcuts.ts
index e39bd0e5..9cc7f769 100644
--- a/packages/web-ui/src/lib/keyboard-shortcuts.ts
+++ b/packages/web-ui/src/lib/keyboard-shortcuts.ts
@@ -32,8 +32,9 @@ export const KEYBOARD_SHORTCUTS: ShortcutDef[] = [
   { id: 'nav-jk-settings', group: 'navigation', keys: ['J / K'], label: 'Settings L1: switch settings tabs', labelKey: 'shortcuts.navJkSettings', page: 'any', bare: true },
   { id: 'nav-hl-work', group: 'navigation', keys: ['H / L'], label: 'Tasks: item list ↔ project L1 ↔ app rail', labelKey: 'shortcuts.navHlWork', page: 'work', bare: true },
   { id: 'nav-jk-work', group: 'navigation', keys: ['J / K'], label: 'Tasks: move project / item selection', labelKey: 'shortcuts.navJkWork', page: 'work', bare: true },
-  { id: 'nav-hl-team', group: 'navigation', keys: ['H / L'], label: 'Team: chat ↔ roster L1 ↔ app rail', labelKey: 'shortcuts.navHlTeam', page: 'team', bare: true },
+  { id: 'nav-hl-team', group: 'navigation', keys: ['H / L'], label: 'Team: L0 ↔ L1 ↔ L2 (L ignored on deepest pane)', labelKey: 'shortcuts.navHlTeam', page: 'team', bare: true },
   { id: 'nav-jk-team', group: 'navigation', keys: ['J / K'], label: 'Team L1: move roster selection', labelKey: 'shortcuts.navJkTeam', page: 'team', bare: true },
+  { id: 'nav-jk-team-l2', group: 'navigation', keys: ['J / K'], label: 'Team L2: move team member selection', labelKey: 'shortcuts.navJkTeamL2', page: 'team', bare: true },
   { id: 'nav-jk-deliverables', group: 'navigation', keys: ['J / K'], label: 'Output L1: move deliverable selection', labelKey: 'shortcuts.navJkDeliverables', page: 'deliverables', bare: true },
   { id: 'nav-jk-store', group: 'navigation', keys: ['J / K'], label: 'Store L1: switch store tabs', labelKey: 'shortcuts.navJkStore', page: 'store', bare: true },
 
diff --git a/packages/web-ui/src/locales/en/common.json b/packages/web-ui/src/locales/en/common.json
index fd931695..f9d2b31d 100644
--- a/packages/web-ui/src/locales/en/common.json
+++ b/packages/web-ui/src/locales/en/common.json
@@ -510,8 +510,9 @@
     "navJkSettings": "Settings L1: switch settings tabs",
     "navHlWork": "Tasks: item list ↔ project L1 ↔ app rail",
     "navJkWork": "Tasks: move project or item selection",
-    "navHlTeam": "Team: chat ↔ roster L1 ↔ app rail",
+    "navHlTeam": "Team: L0 ↔ L1 ↔ L2 (deepest pane ignores L so JK stays)",
     "navJkTeam": "Team L1: move roster selection",
+    "navJkTeamL2": "Team L2: move team member / channel selection",
     "navJkDeliverables": "Output L1: move deliverable selection",
     "navJkStore": "Store L1: switch store tabs",
     "navJk": "Move selection up / down",
diff --git a/packages/web-ui/src/locales/zh-CN/common.json b/packages/web-ui/src/locales/zh-CN/common.json
index 4443b6c0..0585516d 100644
--- a/packages/web-ui/src/locales/zh-CN/common.json
+++ b/packages/web-ui/src/locales/zh-CN/common.json
@@ -510,8 +510,9 @@
     "navJkSettings": "设置 L1：上下切换设置分类",
     "navHlWork": "任务页：列表 ↔ 项目 L1 ↔ 应用侧栏",
     "navJkWork": "任务页：上下移动项目或条目选中项",
-    "navHlTeam": "团队聊天：对话 ↔ 花名册 L1 ↔ 应用侧栏",
+    "navHlTeam": "团队：L0 ↔ L1 ↔ L2（最末级忽略 L，保持 JK）",
     "navJkTeam": "团队 L1：上下移动花名册选中项",
+    "navJkTeamL2": "团队 L2：上下移动成员 / 频道选中项",
     "navJkDeliverables": "产出 L1：上下移动交付物选中项",
     "navJkStore": "商店 L1：上下切换商店分类",
     "navJk": "上下移动选中项",
diff --git a/packages/web-ui/src/pages/Deliverables.tsx b/packages/web-ui/src/pages/Deliverables.tsx
index a3d8ea2d..30dea55b 100644
--- a/packages/web-ui/src/pages/Deliverables.tsx
+++ b/packages/web-ui/src/pages/Deliverables.tsx
@@ -536,10 +536,13 @@ export function DeliverablesPage({ authUser: _authUser, previewMode, previewData
 
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  // Entering L1 from L0: expand the deliverables list rail.
+  // Entering L1 from L0: expand only on pane *entry* — never fight Cmd+B.
+  const prevDeliverablesKeyboardPaneRef = useRef(keyboardPane);
   useEffect(() => {
     if (previewMode || isMobile || !isActive) return;
-    if (keyboardPane !== 'l1') return;
+    const prev = prevDeliverablesKeyboardPaneRef.current;
+    prevDeliverablesKeyboardPaneRef.current = keyboardPane;
+    if (keyboardPane !== 'l1' || prev === 'l1') return;
     if (sidebarCollapsed) setSidebarCollapsed(false);
   }, [keyboardPane, previewMode, isMobile, isActive, sidebarCollapsed]);
 
@@ -573,10 +576,11 @@ export function DeliverablesPage({ authUser: _authUser, previewMode, previewData
         layout?.setKeyboardPane('l0');
         return;
       }
+      // L1 list is deepest — L only re-asserts list focus (never leaves the JK pane).
       if (bare === 'l' || bare === 'ArrowRight') {
         e.preventDefault();
         if (sidebarCollapsed) setSidebarCollapsed(false);
-        layout?.setKeyboardPane('l1');
+        if (layout?.keyboardPane !== 'l1') layout?.setKeyboardPane('l1');
         return;
       }
 
@@ -788,7 +792,7 @@ export function DeliverablesPage({ authUser: _authUser, previewMode, previewData
   return (
     <div className="flex-1 overflow-hidden flex">
       {/* Left sidebar — always mounted on mobile to preserve scroll position */}
-      <div className={`${isMobile ? 'flex-1 min-w-0' : 'shrink-0'} flex flex-col bg-surface-secondary rounded-xl m-1 mr-0 ${!isMobile && keyboardPane === 'l1' ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}
+      <div data-keyboard-pane="l1" className={`${isMobile ? 'flex-1 min-w-0' : 'shrink-0'} flex flex-col bg-surface-secondary rounded-xl m-1 mr-0 ${!isMobile && keyboardPane === 'l1' ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}
         style={isMobile ? (mobileShowDetail ? { display: 'none' } : undefined) : sidebarCollapsed ? { display: 'none' } : { width: listPanel.width }}>
         <div data-electron-drag className="p-4 space-y-3">
           <div className="flex items-center justify-between gap-2">
diff --git a/packages/web-ui/src/pages/Settings.tsx b/packages/web-ui/src/pages/Settings.tsx
index 3766b978..2a019c82 100644
--- a/packages/web-ui/src/pages/Settings.tsx
+++ b/packages/web-ui/src/pages/Settings.tsx
@@ -963,7 +963,7 @@ export function Settings({ theme, onThemeChange, authUser, onLogout, onUserUpdat
     <div className="flex-1 flex overflow-hidden">
       {/* Settings Sidebar — on macOS Electron this is the window edge (main app
           sidebar is hidden), so the header must clear traffic lights. */}
-      <aside className={`hidden md:flex flex-col w-56 shrink-0 border-r border-border-default bg-surface-secondary overflow-y-auto ${l1Focused ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}>
+      <aside data-keyboard-pane="l1" className={`hidden md:flex flex-col w-56 shrink-0 border-r border-border-default bg-surface-secondary overflow-y-auto ${l1Focused ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}>
         <div data-electron-drag className="electron-mac-top-safe px-3 pt-4 pb-2">
           <button
             data-no-drag
diff --git a/packages/web-ui/src/pages/Store.tsx b/packages/web-ui/src/pages/Store.tsx
index 45a316b0..45096ddc 100644
--- a/packages/web-ui/src/pages/Store.tsx
+++ b/packages/web-ui/src/pages/Store.tsx
@@ -190,9 +190,10 @@ export function StorePage({ authUser }: { authUser?: AuthUser }) {
         layout?.setKeyboardPane('l0');
         return;
       }
+      // L1 is deepest — L only re-asserts L1 focus (never leaves the JK pane).
       if (bare === 'l' || bare === 'ArrowRight') {
         e.preventDefault();
-        layout?.setKeyboardPane('l1');
+        if (layout?.keyboardPane !== 'l1') layout?.setKeyboardPane('l1');
         return;
       }
 
@@ -289,7 +290,7 @@ export function StorePage({ authUser }: { authUser?: AuthUser }) {
 
   return (
     <div className="flex-1 overflow-hidden flex flex-row">
-      <nav className={`w-36 shrink-0 bg-surface-secondary rounded-xl m-1 mr-0 flex flex-col py-4 px-2 gap-1 ${keyboardPane === 'l1' ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}>
+      <nav data-keyboard-pane="l1" className={`w-36 shrink-0 bg-surface-secondary rounded-xl m-1 mr-0 flex flex-col py-4 px-2 gap-1 ${keyboardPane === 'l1' ? 'ring-1 ring-inset ring-brand-500/30' : ''}`}>
         <div className="px-3 pb-3 mb-1">
           <h2 className="text-xs font-semibold text-fg-tertiary uppercase tracking-wider">{t('title')}</h2>
         </div>
diff --git a/packages/web-ui/src/pages/Team.tsx b/packages/web-ui/src/pages/Team.tsx
index 84016226..cc84058e 100644
--- a/packages/web-ui/src/pages/Team.tsx
+++ b/packages/web-ui/src/pages/Team.tsx
@@ -232,22 +232,32 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
   }, [layoutLeftCollapsed]);
 
   const keyboardPane = layout?.keyboardPane ?? 'content';
+  /**
+   * L2 can be entered via L from L1 when a team context exists.
+   * Independent of Cmd+B collapse — focus may stay on L1/L2 while rails are hidden.
+   */
+  const l2AvailableRef = useRef(false);
+  const prevKeyboardPaneRef = useRef(keyboardPane);
 
-  // Entering L1 from L0: ensure roster sidebars are visible.
+  // Only auto-expand sidebars when *entering* L1/L2 (e.g. L from L0) — never fight Cmd+B.
   useEffect(() => {
     if (previewMode || isMobile || !isActive) return;
-    if (keyboardPane !== 'l1') return;
+    const prev = prevKeyboardPaneRef.current;
+    prevKeyboardPaneRef.current = keyboardPane;
+    const entered = (keyboardPane === 'l1' || keyboardPane === 'l2') && prev !== keyboardPane;
+    if (!entered) return;
     if (sidebarsCollapsed) {
       setSidebarsCollapsed(false);
       layout?.setLeftCollapsed(false);
     }
   }, [keyboardPane, previewMode, isMobile, isActive, sidebarsCollapsed, layout]);
 
-  // Content → L1 via H (L1 → L0 is handled inside ChatTeamSidebar).
+  // Content → L2 (if open) or L1 via H. Further left moves are handled in L2/L1 components.
   useEffect(() => {
     if (previewMode || isMobile || !isActive) return;
     const onKey = (e: KeyboardEvent) => {
-      if (layout?.keyboardPane === 'l0' || layout?.keyboardPane === 'l1') return;
+      const pane = layout?.keyboardPane ?? 'content';
+      if (pane === 'l0' || pane === 'l1' || pane === 'l2') return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
       if (e.target instanceof HTMLElement) {
         const tag = e.target.tagName;
@@ -261,7 +271,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
         setSidebarsCollapsedPersisted(false);
         layout?.setLeftCollapsed(false);
       }
-      layout?.setKeyboardPane('l1');
+      layout?.setKeyboardPane(l2AvailableRef.current ? 'l2' : 'l1');
     };
     document.addEventListener('keydown', onKey, true);
     return () => document.removeEventListener('keydown', onKey, true);
@@ -3509,7 +3519,10 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
     setMentionSelectedIndex(0);
     const newCursor = atIdx + mention.length + 1;
     requestAnimationFrame(() => {
-      textareaRef.current?.setSelectionRange(newCursor, newCursor);
+      const el = textareaRef.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(newCursor, newCursor);
     });
   };
 
@@ -3596,6 +3609,46 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
 
   // ── Derived ───────────────────────────────────────────────────────────────────
   const currentAgent = agents.find(a => a.id === selectedAgent);
+  const l2TeamId = activeTeamId ?? (chatMode === 'direct' ? currentAgent?.teamId : undefined);
+  /** Team context exists so L from L1 may enter L2 (even if Cmd+B currently hides rails). */
+  const l2Navigable = !!(
+    !isMobile && !rightPanelFullscreen && l2TeamId
+    && teams.some(t => t.id === l2TeamId)
+  );
+  /** L2 panel is actually on screen (not collapsed by Cmd+B). */
+  const l2Visible = !!(
+    l2Navigable && !sidebarsCollapsed
+    && ((showTeamDetailPanel && !l2SpaceTight) || l2Floating)
+  );
+  l2AvailableRef.current = l2Navigable;
+
+  // Leave L2 focus only when the user closes L2 or loses team context — not on Cmd+B collapse.
+  useEffect(() => {
+    if (keyboardPane !== 'l2') return;
+    if (!l2Navigable) {
+      layout?.setKeyboardPane('l1');
+      return;
+    }
+    if (!sidebarsCollapsed && !showTeamDetailPanel && !l2Floating) {
+      layout?.setKeyboardPane('l1');
+    }
+  }, [keyboardPane, l2Navigable, sidebarsCollapsed, showTeamDetailPanel, l2Floating, layout]);
+
+  // When *entering* L2 (L from L1), open the team detail panel. Do not undo Cmd+B.
+  const prevPaneForL2Ref = useRef(keyboardPane);
+  useEffect(() => {
+    if (previewMode || isMobile || !isActive) return;
+    const prev = prevPaneForL2Ref.current;
+    prevPaneForL2Ref.current = keyboardPane;
+    if (keyboardPane !== 'l2' || prev === 'l2') return;
+    if (!l2TeamId) {
+      layout?.setKeyboardPane('l1');
+      return;
+    }
+    if (l2SpaceTight) setL2Floating(true);
+    else setShowTeamDetailPanel(true);
+  }, [keyboardPane, previewMode, isMobile, isActive, l2TeamId, l2SpaceTight, layout]);
+
   const currentUserName = authUser?.name ?? t('page.fallbackYou');
   const lastMsg = visibleMessages[visibleMessages.length - 1];
   const isLastPending = sending && lastMsg?.sender === 'agent';
@@ -3829,6 +3882,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
         onCollapse={() => setSidebarsCollapsedPersisted(true)}
         initialLoading={initialLoading}
         focused={!isMobile && !sidebarsCollapsed && keyboardPane === 'l1'}
+        l2Available={l2Navigable}
       />}
 
       {/* ── L2: Mobile team detail view ── */}
@@ -3932,6 +3986,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
             chatMode={chatMode}
             selectedAgent={selectedAgent}
             activeChannel={activeChannel}
+            activeDmUserId={activeDmUserId}
             teams={teams}
             onSelectAgent={(agentId) => { setChatMode('direct'); setSelectedAgent(agentId); setMainTab('chat'); setShowMemberPanel(false); }}
             onSelectChannel={(channelKey) => { setChatMode('channel'); setActiveChannel(channelKey); setMainTab('chat'); setShowMemberPanel(false); }}
@@ -3943,12 +3998,12 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
             unreadByAgent={unreadByAgent}
             width={teamDetailPanel.width}
             onResizeStart={teamDetailPanel.onResizeStart}
+            focused={keyboardPane === 'l2' && l2Visible}
           />
         );
       })()}
       {/* Floating mode: when space is tight, show as overlay */}
       {!rightPanelFullscreen && l2Floating && !isMobile && !sidebarsCollapsed && (() => {
-        const l2TeamId = activeTeamId ?? (chatMode === 'direct' ? currentAgent?.teamId : undefined);
         if (!l2TeamId) return null;
         const panelTeam = teams.find(t => t.id === l2TeamId);
         if (!panelTeam) return null;
@@ -3966,6 +4021,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
                 chatMode={chatMode}
                 selectedAgent={selectedAgent}
                 activeChannel={activeChannel}
+                activeDmUserId={activeDmUserId}
                 teams={teams}
                 onSelectAgent={(agentId) => { setChatMode('direct'); setSelectedAgent(agentId); setMainTab('chat'); setShowMemberPanel(false); setL2Floating(false); }}
                 onSelectChannel={(channelKey) => { setChatMode('channel'); setActiveChannel(channelKey); setMainTab('chat'); setShowMemberPanel(false); setL2Floating(false); }}
@@ -3976,6 +4032,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
                 onRefreshTeams={refreshTeams}
                 unreadByAgent={unreadByAgent}
                 width={teamDetailPanel.width}
+                focused={keyboardPane === 'l2' && l2Visible}
               />
             </div>
           </div>
@@ -4950,7 +5007,7 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
         )}
 
         {/* Input (only in chat tab) */}
-        <div className={`${isMobile ? 'px-3 py-2' : 'px-5 py-3'} relative shrink-0 ${isEmptyChat ? '' : chatRightReserve}`} onDrop={handleDrop} onDragOver={handleDragOver}>
+        <div data-keep-edit-focus className={`${isMobile ? 'px-3 py-2' : 'px-5 py-3'} relative shrink-0 ${isEmptyChat ? '' : chatRightReserve}`} onDrop={handleDrop} onDragOver={handleDragOver}>
           <div className={`bg-surface-primary border border-border-default shadow-lg shadow-black/10 ${
             isMobile
               ? `${compactComposer ? 'rounded-2xl p-2' : 'rounded-2xl p-3'}`
@@ -5099,6 +5156,12 @@ export function TeamPage({ initialAgentId, authUser, previewMode, previewData }:
                     }
                     if (isClose) { e.preventDefault(); setMentionDropdown(false); return; }
                   }
+                  // Escape leaves the composer so JK/HL on the current keyboard pane work again.
+                  if (e.key === 'Escape') {
+                    e.preventDefault();
+                    e.currentTarget.blur();
+                    return;
+                  }
                   if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); void send(); }
                 }}
                 onPaste={handlePaste}
diff --git a/packages/web-ui/src/pages/Work.tsx b/packages/web-ui/src/pages/Work.tsx
index 0de722dd..b26167a2 100644
--- a/packages/web-ui/src/pages/Work.tsx
+++ b/packages/web-ui/src/pages/Work.tsx
@@ -5406,16 +5406,20 @@ export function WorkPage({ authUser, previewMode, previewData }: { authUser?: Au
     }
   }, [l1Collapsed, isMobile, openItemDetail]);
 
-  // Entering L1 from L0 (App H/L): expand project rail and focus it.
+  // Entering L1 from L0 (App H/L): expand project rail only on pane *entry* — never fight Cmd+B.
   const keyboardPane = layout?.keyboardPane ?? 'content';
+  const prevWorkKeyboardPaneRef = useRef(keyboardPane);
   useEffect(() => {
     if (previewMode || isMobile || !isActive) return;
+    const prev = prevWorkKeyboardPaneRef.current;
+    prevWorkKeyboardPaneRef.current = keyboardPane;
     if (keyboardPane !== 'l1') return;
+    setNavFocus('projects');
+    if (prev === 'l1') return; // already on L1 — allow Cmd+B collapse to stick
     if (l1CollapsedRef.current) {
       setL1CollapsedPersisted(false);
       layout?.setLeftCollapsed(false);
     }
-    setNavFocus('projects');
   }, [keyboardPane, previewMode, isMobile, isActive, setL1CollapsedPersisted, layout]);
 
   // Tasks-page keyboard: Cmd+J/L, Ctrl+Tab, H/L focus panes (content↔L1↔L0), j/k navigation
@@ -5483,6 +5487,7 @@ export function WorkPage({ authUser, previewMode, previewData }: { authUser?: Au
         layout?.setKeyboardPane('l0');
         return;
       }
+      // L from L1 → item list (JK-capable). Item list is deepest — L there is ignored.
       if (
         (bare === 'l' || bare === 'ArrowRight' || (bare === 'Tab' && !e.shiftKey))
         && !l1CollapsedRef.current
@@ -5493,6 +5498,13 @@ export function WorkPage({ authUser, previewMode, previewData }: { authUser?: Au
         layout?.setKeyboardPane('content');
         return;
       }
+      if (
+        (bare === 'l' || bare === 'ArrowRight')
+        && (l1CollapsedRef.current || navFocusRef.current === 'items')
+      ) {
+        e.preventDefault();
+        return;
+      }
 
       const move = bare === 'j' || bare === 'ArrowDown' ? 1
         : bare === 'k' || bare === 'ArrowUp' ? -1
@@ -5593,12 +5605,15 @@ export function WorkPage({ authUser, previewMode, previewData }: { authUser?: Au
           width={projectSidebar.width}
           onResizeStart={projectSidebar.onResizeStart}
           hidden={l1Collapsed}
-          focused={navFocus === 'projects' && !l1Collapsed}
+          focused={keyboardPane === 'l1' && navFocus === 'projects' && !l1Collapsed}
+          onActivate={() => setNavFocus('projects')}
         />
       )}
 
       {/* ── Task Board + Project Context (main) ── */}
       <div
+        data-keyboard-pane="content"
+        onPointerDown={() => setNavFocus('items')}
         className={`${isMobile ? 'flex-1 min-w-0' : dualDetail ? 'w-0 shrink-0 overflow-hidden' : 'flex-1 min-w-0'} overflow-hidden flex flex-col bg-surface-primary`}
         style={isMobile && mobileShowDetail ? { display: 'none' } : undefined}
       >