Revert "feat(desktop): replace the session tab strip with a session header (#1513)"

This reverts commit 1443e22.

Author: NanmiCoder

desktop/src/App.tsx

@@ -6,7 +6,6 @@ import { RemoteAccessGate } from './pages/RemoteAccess'
 import { isPublicAccessRuntime } from './lib/publicAccessRuntime'
 import { useChatStore } from './stores/chatStore'
 import { installHiddenSessionRelease } from './stores/hiddenSessionRelease'
-import { installEmptySessionCleanup } from './stores/emptySessionCleanup'
 import { useMobileShellLayout } from './components/mobile/mobileShellLayout'
 import { isDesktopRuntime } from './lib/desktopRuntime'
 
@@ -25,7 +24,6 @@ function ConnectedApp() {
     }),
     [shellLayout],
   )
-  useEffect(() => installEmptySessionCleanup(useChatStore), [])
   useEffect(() => {
     let cleanup: (() => void) | undefined
     let cancelled = false

desktop/src/components/agentTeams/AgentTeamsWorkbenchTab.test.tsx

@@ -89,7 +89,7 @@ describe('AgentTeamsWorkbenchTab', () => {
   it('opens the 400px communication feed from a collapsed 56px rail', () => {
     installTimeline()
 
-    render(<AgentTeamsWorkbenchTab leadSessionId="lead-session" />)
+    render(<AgentTeamsWorkbenchTab tabId="__team__lead-session" leadSessionId="lead-session" />)
 
     expect(screen.getByTestId('agent-teams-canvas')).toBeTruthy()
     expect(screen.queryByTestId('agent-teams-communication')).toBeNull()
@@ -105,8 +105,7 @@ describe('AgentTeamsWorkbenchTab', () => {
     expect(screen.getByTestId('agent-teams-communication').className).toContain('h-full')
     expect(screen.getByText('Review is in progress.')).toBeTruthy()
     expect(screen.queryByRole('button', { name: /Open the workbench full screen/i })).toBeNull()
-    // The window header's breadcrumb leads back to the session.
-    expect(screen.queryByRole('button', { name: 'Back to session' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Back to session' })).toBeTruthy()
   })
 
   it('opens a member inspector before routing to execution and restores the Canvas on return', async () => {
@@ -128,7 +127,7 @@ describe('AgentTeamsWorkbenchTab', () => {
           </button>
         )
       }
-      return <AgentTeamsWorkbenchTab leadSessionId="lead-session" />
+      return <AgentTeamsWorkbenchTab tabId={teamTabId} leadSessionId="lead-session" />
     }
 
     render(<RoutedWorkbench />)

desktop/src/components/agentTeams/AgentTeamsWorkbenchTab.tsx

@@ -1,18 +1,24 @@
 import { useEffect } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '@/components/ui/Button'
+import { useTranslation } from '../../i18n'
+import { useTabStore } from '../../stores/tabStore'
 import { useTeamStore } from '../../stores/teamStore'
 import { AgentTeamsWorkbench } from './AgentTeamsWorkbench'
 
 /**
  * The detached, full-window form of the workbench. It reads the same
  * per-session timeline the docked panel does, so switching between the two
- * keeps history position and the selected member. The way back to the
- * session is the window header's breadcrumb.
+ * keeps history position and the selected member.
  */
 export function AgentTeamsWorkbenchTab({
+  tabId,
   leadSessionId,
 }: {
+  tabId: string
   leadSessionId: string
 }) {
+  const t = useTranslation()
   const hasTimeline = useTeamStore((state) =>
     Boolean(state.workbenchesBySession[leadSessionId]?.snapshots.length),
   )
@@ -27,6 +33,16 @@ export function AgentTeamsWorkbenchTab({
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-[var(--color-surface)]">
+      <div className="flex shrink-0 items-center gap-2 border-b border-[var(--color-border)] px-3 py-1.5">
+        <Button
+          variant="ghost"
+          size="sm"
+          icon={<ArrowLeft size={14} strokeWidth={2} aria-hidden="true" />}
+          onClick={() => useTabStore.getState().returnFromTeamWorkbench(tabId)}
+        >
+          {t('agentTeams.backToSession')}
+        </Button>
+      </div>
       <AgentTeamsWorkbench sessionId={leadSessionId} />
     </div>
   )

desktop/src/components/chat/SessionChatSurface.tsx

@@ -5,13 +5,6 @@ export type SessionHeaderMetaItem = {
   content: ReactNode
 }
 
-/**
- * The bar above a conversation. On the desktop the window header already names
- * the session (and its trail, for a run page), so callers there pass no
- * `title`: the bar is then a single line of what the title used to sit on —
- * badges first, then the metadata — and the actions centred beside it. Only
- * the phone, whose top bar has no room for metadata, still passes one.
- */
 export function SessionChatHeader({
   title,
   compact = false,
@@ -21,64 +14,53 @@ export function SessionChatHeader({
   metadata = [],
   children,
 }: {
-  title?: string
+  title: string
   compact?: boolean
   leading?: ReactNode
   titleAddon?: ReactNode
   actions?: ReactNode
   metadata?: SessionHeaderMetaItem[]
   children?: ReactNode
 }) {
-  const metadataRow = metadata.length > 0 || (!title && titleAddon) ? (
-    <div
-      data-testid="session-header-meta"
-      className={`flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-xs text-[var(--color-text-tertiary)] [&_svg]:shrink-0 ${title ? 'mt-[3px]' : 'min-h-7'}`}
-    >
-      {!title ? titleAddon : null}
-      {metadata.map((item, index) => (
-        <Fragment key={item.key}>
-          {index > 0 ? (
-            <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
-          ) : null}
-          {item.content}
-        </Fragment>
-      ))}
-    </div>
-  ) : null
-
   return (
     <div
       data-testid="session-header"
       className={[
         'w-full border-b border-[var(--color-border)]',
-        title
-          ? compact ? 'px-4 py-2.5' : 'px-7 py-3.5'
-          : compact ? 'px-4 py-1.5' : 'px-7 py-2',
+        compact ? 'px-4 py-2.5' : 'px-7 py-3.5',
       ].join(' ')}
     >
       <div className="mx-auto w-full min-w-0 max-w-[var(--chat-content-max-width)]">
         {/* Top-aligned so a goal / team strip below the meta line does not drag
-            the actions down; with a title they are offset to centre on title +
-            meta, without one the meta line and the actions share a 28px row. */}
+            the actions down; they are offset to centre on title + meta. */}
         <div className="flex min-w-0 items-start gap-4">
           {leading}
           <div className="min-w-0 flex-1">
-            {title ? (
-              <div className="flex min-w-0 items-center gap-2">
-                <h1
-                  className="min-w-0 truncate text-[15px] font-semibold leading-[1.35] tracking-[-0.01em] text-[var(--color-text-primary)]"
-                  style={{ fontFamily: 'var(--font-headline)' }}
-                  title={title}
-                >
-                  {title}
-                </h1>
-                {titleAddon}
+            <div className="flex min-w-0 items-center gap-2">
+              <h1
+                className="min-w-0 truncate text-[15px] font-semibold leading-[1.35] tracking-[-0.01em] text-[var(--color-text-primary)]"
+                style={{ fontFamily: 'var(--font-headline)' }}
+                title={title}
+              >
+                {title}
+              </h1>
+              {titleAddon}
+            </div>
+            {metadata.length > 0 ? (
+              <div className="mt-[3px] flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-xs text-[var(--color-text-tertiary)] [&_svg]:shrink-0">
+                {metadata.map((item, index) => (
+                  <Fragment key={item.key}>
+                    {index > 0 ? (
+                      <span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
+                    ) : null}
+                    {item.content}
+                  </Fragment>
+                ))}
               </div>
             ) : null}
-            {metadataRow}
             {children}
           </div>
-          {actions ? <div className={`flex shrink-0 items-center gap-2 ${title ? 'pt-1' : 'min-h-7'}`}>{actions}</div> : null}
+          {actions ? <div className="flex shrink-0 items-center gap-2 pt-1">{actions}</div> : null}
         </div>
       </div>
     </div>