feat(mobile): v1.8 tab switcher + branch indicator + git_status tool

Mobile header is now two rows. Row 1: hamburger | project · branch
indicator (live via GET /api/projects/:id/git, 30s poll) | ModelPicker |
FolderTree. Row 2: pane-switcher pill (hand-rolled BottomSheet) +
NewPaneMenu. Chat-within-pane navigation hidden on mobile; users switch
panes via the sheet. Cross-tab status sync via chat_status frames
published from inference.ts at working/idle/error transitions; StatusDot
component renders amber-pulse/green/red/gray on each pane row and on
desktop ChatTabBar tabs. Level 1 git awareness exposes a read-only
git_status tool to the model, backed by services/git_meta.ts (execFile
+ 2s timeout + 30s cache). Workspace.tsx now receives panes/chats hooks
as props (hoisted into Session.tsx) so the header pill shares state
with the pane grid.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/pages/Session.tsx

@@ -1,5 +1,11 @@
-import { useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
 import { ChevronRight, FolderTree, Menu } from 'lucide-react';
 import { api } from '@/api/client';
 import type { Project, Session as SessionType } from '@/api/types';
@@ -8,12 +14,28 @@ import { useActivePane } from '@/hooks/useActivePane';
 import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
 import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
+import { useWorkspacePanes, MAX_PANES } from '@/hooks/useWorkspacePanes';
+import { useSessionChats } from '@/hooks/useSessionChats';
+import { useProjectGit } from '@/hooks/useProjectGit';
 import { Workspace } from '@/components/Workspace';
 import { ModelPicker } from '@/components/ModelPicker';
+import { MobileTabSwitcher } from '@/components/MobileTabSwitcher';
+import { NewPaneMenu } from '@/components/NewPaneMenu';
+import { cn } from '@/lib/utils';
 
 export function Session() {
   const { id } = useParams<{ id: string }>();
+  if (!id) return null;
+  // v1.8: key on id so route navigation remounts SessionInner — the hoisted
+  // useWorkspacePanes + useSessionChats then reinitialize cleanly from the
+  // new sessionId instead of carrying stale state across sessions.
+  return <SessionInner key={id} sessionId={id} />;
+}
+
+function SessionInner({ sessionId }: { sessionId: string }) {
   const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
   const [session, setSession] = useState<SessionType | null>(null);
   const [project, setProject] = useState<Project | null>(null);
   const [name, setName] = useState('');
@@ -23,23 +45,53 @@ export function Session() {
   const { toggle: toggleRightRail } = useRightRailDrawer();
   const { isMobile } = useViewport();
 
+  // v1.8: pane + chat state hoisted into Session so the mobile header pill
+  // (MobileTabSwitcher) shares one source of truth with the pane grid below.
+  const panesHook = useWorkspacePanes(sessionId);
+  const {
+    panes,
+    activePaneIdx,
+    setActivePaneIdx,
+    openChatInPane,
+    activePaneIdxRef,
+    addSplitPane,
+    removePane,
+    removeChatFromPanes,
+    initializeFirstChatIfEmpty,
+  } = panesHook;
+
+  const openChatInActivePane = useCallback(
+    (chatId: string) => openChatInPane(activePaneIdxRef.current, chatId),
+    [openChatInPane, activePaneIdxRef],
+  );
+  const chatsHook = useSessionChats(sessionId, {
+    removeChatFromPanes,
+    openChatInPane,
+    openChatInActivePane,
+    initializeFirstChatIfEmpty,
+  });
+  const { chats, renameChat } = chatsHook;
+
+  // v1.8 Level 1: branch indicator. Polls every 30s; server caches the same
+  // span so back-to-back loads are cheap. Returns null until the first fetch
+  // resolves or if the project isn't a git repo.
+  const git = useProjectGit(project?.id);
+
   useEffect(() => {
-    if (!id) return;
     setSession(null);
     setProject(null);
     let cancelled = false;
     api.sessions
-      .get(id)
+      .get(sessionId)
       .then((s) => {
         if (cancelled) return;
         setSession(s);
         setName(s.name);
         sessionEvents.emit({
           type: 'session_loaded',
-          session_id: id,
+          session_id: sessionId,
           project_id: s.project_id,
         });
-        // Load project for breadcrumb. Listing is fine — small N, cached by client.
         api.projects.list().then((projects) => {
           if (cancelled) return;
           const p = projects.find((x) => x.id === s.project_id);
@@ -50,34 +102,61 @@ export function Session() {
     return () => {
       cancelled = true;
     };
-  }, [id]);
+  }, [sessionId]);
 
   useEffect(() => {
-    if (!id) return;
     return sessionEvents.subscribe((event) => {
-      if (event.type === 'session_renamed' && event.session_id === id) {
+      if (event.type === 'session_renamed' && event.session_id === sessionId) {
         setSession((prev) => (prev ? { ...prev, name: event.name } : prev));
         setName((prev) => (editingName ? prev : event.name));
         return;
       }
       if (
         (event.type === 'session_deleted' || event.type === 'session_archived') &&
-        event.session_id === id
+        event.session_id === sessionId
       ) {
         navigate(`/project/${event.project_id}`);
       }
     });
-  }, [id, editingName, navigate]);
+  }, [sessionId, editingName, navigate]);
+
+  // v1.8: URL ?pane= sync (mobile only). Lifted from Workspace.tsx so
+  // MobileTabSwitcher's onSwitchPane can push the same URL state and the
+  // browser Back button continues to walk pane history on mobile.
+  useEffect(() => {
+    if (!isMobile || panes.length === 0) return;
+    const paneId = searchParams.get('pane');
+    if (!paneId) {
+      if (activePaneIdx !== 0) setActivePaneIdx(0);
+      return;
+    }
+    const idx = panes.findIndex((p) => p.id === paneId);
+    if (idx >= 0 && idx !== activePaneIdx) setActivePaneIdx(idx);
+  }, [isMobile, searchParams, panes, activePaneIdx, setActivePaneIdx]);
+
+  const switchActivePane = useCallback(
+    (idx: number) => {
+      setActivePaneIdx(idx);
+      if (isMobile) {
+        const pane = panes[idx];
+        if (!pane) return;
+        const params = new URLSearchParams(location.search);
+        params.set('pane', pane.id);
+        navigate(`${location.pathname}?${params.toString()}`);
+      }
+    },
+    [setActivePaneIdx, isMobile, panes, navigate, location.pathname, location.search],
+  );
 
   async function saveName() {
-    if (!id || !session) return;
+    if (!session) return;
     const trimmed = name.trim();
     if (!trimmed || trimmed === session.name) {
       setName(session.name);
       setEditingName(false);
       return;
     }
-    const updated = await api.sessions.update(id, { name: trimmed });
+    const updated = await api.sessions.update(sessionId, { name: trimmed });
     setSession(updated);
     setEditingName(false);
     // Server publishes session_renamed via broker.publishUser; no local emit needed.
@@ -85,122 +164,179 @@ export function Session() {
 
   // Workspace only sets activeFile for file-browser panes; checking it alone
   // suffices and is forward-compatible with future pane kinds.
-  const showActiveFile = active.sessionId === id && !!active.activeFile;
+  const showActiveFile = active.sessionId === sessionId && !!active.activeFile;
 
   return (
     <div className="flex-1 flex flex-col min-h-0">
       <header
-        className="border-b px-3 sm:px-4 py-2 flex items-center gap-1.5 shrink-0 text-sm"
+        className={cn(
+          'border-b shrink-0 text-sm',
+          isMobile
+            ? 'flex flex-col gap-1.5 px-3 py-2'
+            : 'flex items-center gap-1.5 px-3 sm:px-4 py-2',
+        )}
         style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
       >
-        {isMobile && (
-          <button
-            type="button"
-            onClick={() => setDrawerOpen(true)}
-            className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
-            aria-label="Open sidebar"
-          >
-            <Menu className="size-5" />
-          </button>
-        )}
-
-        {/* Breadcrumb — desktop only */}
-        <div className="hidden sm:flex items-center gap-1.5 min-w-0">
-          <Link to="/" className="text-muted-foreground hover:text-foreground shrink-0 text-xs">
-            Projects
-          </Link>
-          <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
-          {project ? (
-            <Link
-              to={`/project/${project.id}`}
-              className="text-muted-foreground hover:text-foreground truncate max-w-[200px]"
-              title={project.name}
-            >
-              {project.name}
-            </Link>
-          ) : (
-            <span className="text-muted-foreground/60">…</span>
-          )}
-          <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
-        </div>
-
-        {/* Session name — always visible, truncated, editable */}
-        {editingName ? (
-          <input
-            autoFocus
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            onBlur={() => void saveName()}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') void saveName();
-              if (e.key === 'Escape') {
-                setName(session?.name ?? '');
-                setEditingName(false);
-              }
-            }}
-            className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring min-w-0"
-          />
-        ) : (
-          <button
-            type="button"
-            className="text-sm font-medium hover:underline truncate max-w-[140px] sm:max-w-[280px] min-w-0"
-            onClick={() => setEditingName(true)}
-            title={session?.name ?? ''}
-          >
-            {session?.name ?? '…'}
-          </button>
-        )}
-
-        {/* Active file — desktop only */}
-        {showActiveFile && active.activeFile && (
+        {isMobile ? (
           <>
-            <span className="text-muted-foreground/40 mx-1 hidden sm:inline">·</span>
-            <span
-              className="text-xs font-mono text-muted-foreground truncate max-w-[200px] hidden sm:inline"
-              title={active.activeFile}
-            >
-              {active.activeFile}
-            </span>
-          </>
-        )}
+            {/* v1.8 mobile row 1: hamburger | repo+branch | ModelPicker | FolderTree.
+                Gear/kebab cluster lands in Batch 7; ModelPicker stays here until
+                then so mobile users keep model-switching access. */}
+            <div className="flex items-center gap-1.5">
+              <button
+                type="button"
+                onClick={() => setDrawerOpen(true)}
+                className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
+                aria-label="Open sidebar"
+              >
+                <Menu className="size-5" />
+              </button>
 
-        {/* Model picker — right-aligned */}
-        <div className="ml-auto shrink-0">
-          {session && (
-            <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1">
-              <ModelPicker
-                value={session.model}
-                onChange={async (model) => {
-                  const updated = await api.sessions.update(session.id, { model });
-                  setSession(updated);
-                }}
+              <div className="flex-1 min-w-0 flex items-center justify-center gap-1.5">
+                {project ? (
+                  <span className="text-sm font-medium truncate" title={project.name}>
+                    {project.name}
+                  </span>
+                ) : (
+                  <span className="text-muted-foreground/60">…</span>
+                )}
+                {git?.branch && (
+                  <span
+                    className="text-muted-foreground/80 text-xs truncate"
+                    title={`branch: ${git.branch}${git.is_dirty ? ' (dirty)' : ''}`}
+                  >
+                    · {git.branch}
+                  </span>
+                )}
+              </div>
+
+              {session && (
+                <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1 shrink-0">
+                  <ModelPicker
+                    value={session.model}
+                    onChange={async (model) => {
+                      const updated = await api.sessions.update(session.id, { model });
+                      setSession(updated);
+                    }}
+                  />
+                </div>
+              )}
+
+              <button
+                type="button"
+                onClick={toggleRightRail}
+                className="inline-flex items-center justify-center -mr-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
+                aria-label="Toggle file browser"
+              >
+                <FolderTree className="size-5" />
+              </button>
+            </div>
+
+            {/* v1.8 mobile row 2: pane-switcher pill + new-pane menu. Pill
+                expands; NewPaneMenu is the trailing 44x44 trigger. */}
+            <div className="flex items-center gap-1.5">
+              <MobileTabSwitcher
+                panes={panes}
+                activePaneIdx={activePaneIdx}
+                chats={chats}
+                onSwitchPane={switchActivePane}
+                onRemovePane={removePane}
+                onRenameChat={renameChat}
+              />
+              <NewPaneMenu
+                onAddPane={addSplitPane}
+                disabled={panes.length >= MAX_PANES}
               />
             </div>
-          )}
-        </div>
+          </>
+        ) : (
+          <>
+            {/* Desktop: unchanged single-row header. */}
+            <div className="hidden sm:flex items-center gap-1.5 min-w-0">
+              <Link to="/" className="text-muted-foreground hover:text-foreground shrink-0 text-xs">
+                Projects
+              </Link>
+              <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
+              {project ? (
+                <Link
+                  to={`/project/${project.id}`}
+                  className="text-muted-foreground hover:text-foreground truncate max-w-[200px]"
+                  title={project.name}
+                >
+                  {project.name}
+                </Link>
+              ) : (
+                <span className="text-muted-foreground/60">…</span>
+              )}
+              <ChevronRight className="size-3 text-muted-foreground/60 shrink-0" />
+            </div>
 
-        {/* File browser toggle — mobile only */}
-        {isMobile && (
-          <button
-            type="button"
-            onClick={toggleRightRail}
-            className="inline-flex items-center justify-center -mr-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
-            aria-label="Toggle file browser"
-          >
-            <FolderTree className="size-5" />
-          </button>
+            {editingName ? (
+              <input
+                autoFocus
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                onBlur={() => void saveName()}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') void saveName();
+                  if (e.key === 'Escape') {
+                    setName(session?.name ?? '');
+                    setEditingName(false);
+                  }
+                }}
+                className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring min-w-0"
+              />
+            ) : (
+              <button
+                type="button"
+                className="text-sm font-medium hover:underline truncate max-w-[280px] min-w-0"
+                onClick={() => setEditingName(true)}
+                title={session?.name ?? ''}
+              >
+                {session?.name ?? '…'}
+              </button>
+            )}
+
+            {showActiveFile && active.activeFile && (
+              <>
+                <span className="text-muted-foreground/40 mx-1">·</span>
+                <span
+                  className="text-xs font-mono text-muted-foreground truncate max-w-[200px]"
+                  title={active.activeFile}
+                >
+                  {active.activeFile}
+                </span>
+              </>
+            )}
+
+            <div className="ml-auto shrink-0">
+              {session && (
+                <div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1">
+                  <ModelPicker
+                    value={session.model}
+                    onChange={async (model) => {
+                      const updated = await api.sessions.update(session.id, { model });
+                      setSession(updated);
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </>
         )}
       </header>
 
-      {id && session && (
+      {session && (
         <Workspace
-          sessionId={id}
+          sessionId={sessionId}
           projectId={session.project_id}
           agentId={session.agent_id}
           onAgentChange={async (agent_id) => {
             const updated = await api.sessions.update(session.id, { agent_id });
             setSession(updated);
           }}
+          panesHook={panesHook}
+          chatsHook={chatsHook}
         />
       )}
     </div>