From 56f31d91b6407254d68e4e895454b4f92ae984a4 Mon Sep 17 00:00:00 2001
From: pascalandr <pascalandr@gmail.com>
Date: Sat, 18 Apr 2026 13:59:08 +0200
Subject: [PATCH 1/7] feat(ui): show the active session title in the header

Render the current session title in the instance header for both compact and regular layouts, while keeping the existing status indicators and command controls in place.
---
 .../components/instance/instance-shell2.tsx   | 28 +++++++++++++++++--
 .../ui/src/styles/panels/session-layout.css   | 24 ++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 0ead3c1aa..eda54c869 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -364,6 +364,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     )
   }
 
+  const activeSessionTitle = createMemo(() => {
+    const activeSessionId = activeSessionIdForInstance()
+    if (!activeSessionId || activeSessionId === "info") return null
+
+    const title = activeSessionForInstance()?.title?.trim()
+    return title || t("sessionList.session.untitled")
+  })
+
   const renderYoloModePill = () => {
     if (!yoloModeEnabled()) return null
     return (
@@ -390,6 +398,20 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     </div>
   )
 
+  const renderSessionHeaderMeta = (compact = false) => {
+    const title = activeSessionTitle()
+    if (!title) return renderSessionHeaderIndicators()
+
+    return (
+      <div class={`session-header-meta ${compact ? "session-header-meta--compact" : ""}`}>
+        <div class="session-header-title" dir="auto" title={title}>
+          {title}
+        </div>
+        {renderSessionHeaderIndicators()}
+      </div>
+    )
+  }
+
   const handleCommandPaletteClick = () => {
     showCommandPalette(props.instance.id)
   }
@@ -717,7 +739,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     </Show>
 
                     <div class="flex-1 flex items-center justify-center min-w-0">
-                      {renderSessionHeaderIndicators()}
+                      {renderSessionHeaderMeta(true)}
                     </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-1">
@@ -808,8 +830,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   />
                 </Show>
 
-                <div class="ml-auto flex items-center session-header-hints">
-                  {renderSessionHeaderIndicators()}
+                <div class="ml-auto flex items-center session-header-hints min-w-0">
+                  {renderSessionHeaderMeta()}
                 </div>
               </div>
 
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 1ff0dc3f6..2a19f802a 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -144,6 +144,30 @@ session-sidebar-controls .selector-trigger-primary {
   @apply flex-shrink-0;
 }
 
+.session-header-meta {
+  @apply flex items-center gap-2 min-w-0;
+}
+
+.session-header-meta--compact {
+  @apply flex-col gap-1.5 w-full;
+}
+
+.session-header-title {
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  max-width: min(32rem, 40vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-header-meta--compact .session-header-title {
+  max-width: 100%;
+  text-align: center;
+}
+
 .session-sidebar-separator {
   background-color: var(--border-base);
   height: 1px;

From 2a6242106420248bd635c87b8ea22116e8cc1e02 Mon Sep 17 00:00:00 2001
From: pascalandr <pascalandr@gmail.com>
Date: Sat, 18 Apr 2026 15:43:10 +0200
Subject: [PATCH 2/7] feat(ui): show the session title in the tab bar

Display the active session title next to the new-tab control, and only when the left session drawer is closed so the title adds context without competing with the sidebar.
---
 packages/ui/src/App.tsx                       | 21 ++++++++++++
 packages/ui/src/components/instance-tabs.tsx  |  7 ++++
 .../components/instance/instance-shell2.tsx   | 33 +++++--------------
 .../ui/src/styles/panels/session-layout.css   | 24 --------------
 packages/ui/src/styles/panels/tabs.css        | 12 +++++++
 5 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 462c0c168..eb8652b23 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -93,6 +93,7 @@ const App: Component = () => {
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
   const [sidecarPickerOpen, setSidecarPickerOpen] = createSignal(false)
+  const [leftDrawerTitleVisibility, setLeftDrawerTitleVisibility] = createSignal<Record<string, boolean>>({})
 
   const phoneQuery = useMediaQuery("(max-width: 767px)")
   const isPhoneLayout = createMemo(() => phoneQuery())
@@ -249,6 +250,22 @@ const App: Component = () => {
     return activeSessionId().get(instance.id) || null
   })
 
+  const activeSessionTitleForInstance = createMemo(() => {
+    const instance = activeInstance()
+    const sessionId = activeSessionIdForInstance()
+    if (!instance || !sessionId || sessionId === "info") return null
+
+    const session = getSessions(instance.id).find((entry) => entry.id === sessionId)
+    const title = session?.title?.trim()
+    return title || t("sessionList.session.untitled")
+  })
+
+  const showActiveSessionTitleInTabs = createMemo(() => {
+    const instance = activeInstance()
+    if (!instance) return false
+    return leftDrawerTitleVisibility()[instance.id] ?? false
+  })
+
   const launchErrorPath = () => {
     const value = launchError()?.binaryPath
     if (!value) return "opencode"
@@ -539,6 +556,8 @@ const App: Component = () => {
                 <InstanceTabs
                   tabs={appTabs()}
                   activeTabId={activeAppTabId()}
+                  activeSessionTitle={activeSessionTitleForInstance()}
+                  showActiveSessionTitle={showActiveSessionTitleInTabs()}
                   onSelect={selectAppTab}
                   onClose={(tabId) => void handleCloseAppTab(tabId)}
                   onNew={handleNewInstanceRequest}
@@ -568,6 +587,8 @@ const App: Component = () => {
                           handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(tab.instance.id, sessionId, agent)}
                           handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(tab.instance.id, sessionId, model)}
                           onExecuteCommand={executeCommand}
+                          onLeftDrawerTitleVisibilityChange={(instanceId, visible) =>
+                            setLeftDrawerTitleVisibility((current) => ({ ...current, [instanceId]: visible }))}
                           tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
                           mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
                           onEnterMobileFullscreen={() => void enterMobileFullscreen()}
diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 86e2c4986..7df5b7664 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -13,6 +13,8 @@ import type { AppTabRecord } from "../stores/app-tabs"
 interface InstanceTabsProps {
   tabs: AppTabRecord[]
   activeTabId: string | null
+  activeSessionTitle?: string | null
+  showActiveSessionTitle?: boolean
   onSelect: (tabId: string) => void
   onClose: (tabId: string) => void
   onNew: () => void
@@ -70,6 +72,11 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               >
                 <Plus class="w-4 h-4" />
               </button>
+              <Show when={props.showActiveSessionTitle && props.activeSessionTitle}>
+                <div class="tab-bar-session-title" dir="auto" title={props.activeSessionTitle ?? undefined}>
+                  {props.activeSessionTitle}
+                </div>
+              </Show>
             </div>
             <div class="tab-strip-spacer" />
             <Show when={props.tabs.length > 1}>
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index eda54c869..597ced329 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -86,6 +86,7 @@ interface InstanceShellProps {
   mobileFullscreenMode: boolean
   onEnterMobileFullscreen: () => void
   onExitMobileFullscreen: () => void
+  onLeftDrawerTitleVisibilityChange?: (instanceId: string, visible: boolean) => void
 }
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
@@ -183,6 +184,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     handleRightAppBarButtonClick,
   } = drawerChrome
 
+  createEffect(() => {
+    props.onLeftDrawerTitleVisibilityChange?.(props.instance.id, leftDrawerState() === "floating-closed")
+  })
+
   createEffect(() => {
     const instanceId = props.instance.id
     loadBackgroundProcesses(instanceId).catch((error) => {
@@ -364,14 +369,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     )
   }
 
-  const activeSessionTitle = createMemo(() => {
-    const activeSessionId = activeSessionIdForInstance()
-    if (!activeSessionId || activeSessionId === "info") return null
-
-    const title = activeSessionForInstance()?.title?.trim()
-    return title || t("sessionList.session.untitled")
-  })
-
   const renderYoloModePill = () => {
     if (!yoloModeEnabled()) return null
     return (
@@ -398,20 +395,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     </div>
   )
 
-  const renderSessionHeaderMeta = (compact = false) => {
-    const title = activeSessionTitle()
-    if (!title) return renderSessionHeaderIndicators()
-
-    return (
-      <div class={`session-header-meta ${compact ? "session-header-meta--compact" : ""}`}>
-        <div class="session-header-title" dir="auto" title={title}>
-          {title}
-        </div>
-        {renderSessionHeaderIndicators()}
-      </div>
-    )
-  }
-
   const handleCommandPaletteClick = () => {
     showCommandPalette(props.instance.id)
   }
@@ -739,7 +722,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     </Show>
 
                     <div class="flex-1 flex items-center justify-center min-w-0">
-                      {renderSessionHeaderMeta(true)}
+                      {renderSessionHeaderIndicators()}
                     </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-1">
@@ -830,8 +813,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   />
                 </Show>
 
-                <div class="ml-auto flex items-center session-header-hints min-w-0">
-                  {renderSessionHeaderMeta()}
+                <div class="ml-auto flex items-center session-header-hints">
+                  {renderSessionHeaderIndicators()}
                 </div>
               </div>
 
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 2a19f802a..1ff0dc3f6 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -144,30 +144,6 @@ session-sidebar-controls .selector-trigger-primary {
   @apply flex-shrink-0;
 }
 
-.session-header-meta {
-  @apply flex items-center gap-2 min-w-0;
-}
-
-.session-header-meta--compact {
-  @apply flex-col gap-1.5 w-full;
-}
-
-.session-header-title {
-  color: var(--text-primary);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.2;
-  max-width: min(32rem, 40vw);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-header-meta--compact .session-header-title {
-  max-width: 100%;
-  text-align: center;
-}
-
 .session-sidebar-separator {
   background-color: var(--border-base);
   height: 1px;
diff --git a/packages/ui/src/styles/panels/tabs.css b/packages/ui/src/styles/panels/tabs.css
index 3d6c251fa..2c95c520e 100644
--- a/packages/ui/src/styles/panels/tabs.css
+++ b/packages/ui/src/styles/panels/tabs.css
@@ -30,6 +30,18 @@
   @apply flex items-center gap-1 flex-shrink-0;
 }
 
+.tab-bar-session-title {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.2;
+  margin-left: 0.375rem;
+  max-width: min(24rem, 28vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tab-strip-spacer {
   @apply flex-1;
   min-width: 1px;

From 275851480df7539ea6fb7e24fe32823caa9ae0dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sat, 9 May 2026 13:50:30 +0200
Subject: [PATCH 3/7] fix(ui): move session title into header

Show the active session title in the session header when the left sidebar is not pinned so the tab strip stays focused on workspace tabs.

The header slot reserves the sidebar width and reuses existing session title styling to avoid layout jumps while preserving the compact/mobile toolbar controls.

Validated with git diff --cached --check, npm run typecheck --workspace @codenomad/ui, and npm run build --workspace @codenomad/ui.
---
 packages/ui/src/App.tsx                       |  22 ---
 packages/ui/src/components/instance-tabs.tsx  |   7 -
 .../components/instance/instance-shell2.tsx   | 183 ++++++++++--------
 .../ui/src/styles/panels/session-layout.css   |  13 ++
 4 files changed, 112 insertions(+), 113 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 7160ede08..6d970a3f0 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -94,8 +94,6 @@ const App: Component = () => {
   const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
   const [sidecarPickerOpen, setSidecarPickerOpen] = createSignal(false)
-  const [leftDrawerTitleVisibility, setLeftDrawerTitleVisibility] = createSignal<Record<string, boolean>>({})
-
   const phoneQuery = useMediaQuery("(max-width: 767px)")
   const isPhoneLayout = createMemo(() => phoneQuery())
 
@@ -250,22 +248,6 @@ const App: Component = () => {
     return activeSessionId().get(instance.id) || null
   })
 
-  const activeSessionTitleForInstance = createMemo(() => {
-    const instance = activeInstance()
-    const sessionId = activeSessionIdForInstance()
-    if (!instance || !sessionId || sessionId === "info") return null
-
-    const session = getSessions(instance.id).find((entry) => entry.id === sessionId)
-    const title = session?.title?.trim()
-    return title || t("sessionList.session.untitled")
-  })
-
-  const showActiveSessionTitleInTabs = createMemo(() => {
-    const instance = activeInstance()
-    if (!instance) return false
-    return leftDrawerTitleVisibility()[instance.id] ?? false
-  })
-
   const launchErrorPath = () => {
     const value = launchError()?.binaryPath
     if (!value) return "opencode"
@@ -556,8 +538,6 @@ const App: Component = () => {
                 <InstanceTabs
                   tabs={appTabs()}
                   activeTabId={activeAppTabId()}
-                  activeSessionTitle={activeSessionTitleForInstance()}
-                  showActiveSessionTitle={showActiveSessionTitleInTabs()}
                   onSelect={selectAppTab}
                   onClose={(tabId) => void handleCloseAppTab(tabId)}
                   onNew={handleNewInstanceRequest}
@@ -588,8 +568,6 @@ const App: Component = () => {
                           handleSidebarAgentChange={(sessionId, agent) => handleSidebarAgentChange(tab.instance.id, sessionId, agent)}
                           handleSidebarModelChange={(sessionId, model) => handleSidebarModelChange(tab.instance.id, sessionId, model)}
                           onExecuteCommand={executeCommand}
-                          onLeftDrawerTitleVisibilityChange={(instanceId, visible) =>
-                            setLeftDrawerTitleVisibility((current) => ({ ...current, [instanceId]: visible }))}
                           tabBarOffset={isPhoneLayout() && mobileFullscreenMode() ? 0 : instanceTabBarHeight()}
                           mobileFullscreenMode={isPhoneLayout() && mobileFullscreenMode()}
                           onEnterMobileFullscreen={() => void enterMobileFullscreen()}
diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index af8bf8c80..44528cc85 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -22,8 +22,6 @@ import type { AppTabRecord } from "../stores/app-tabs"
 interface InstanceTabsProps {
   tabs: AppTabRecord[]
   activeTabId: string | null
-  activeSessionTitle?: string | null
-  showActiveSessionTitle?: boolean
   onSelect: (tabId: string) => void
   onClose: (tabId: string) => void
   onNew: () => void
@@ -149,11 +147,6 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               >
                 <Plus class="w-4 h-4" />
               </button>
-              <Show when={props.showActiveSessionTitle && props.activeSessionTitle}>
-                <div class="tab-bar-session-title" dir="auto" title={props.activeSessionTitle ?? undefined}>
-                  {props.activeSessionTitle}
-                </div>
-              </Show>
             </div>
             <div class="tab-strip-spacer" />
             <Show when={props.tabs.length > 1}>
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 41c9e0286..0befbe559 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -87,7 +87,6 @@ interface InstanceShellProps {
   mobileFullscreenMode: boolean
   onEnterMobileFullscreen: () => void
   onExitMobileFullscreen: () => void
-  onLeftDrawerTitleVisibilityChange?: (instanceId: string, visible: boolean) => void
 }
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
@@ -185,10 +184,6 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     handleRightAppBarButtonClick,
   } = drawerChrome
 
-  createEffect(() => {
-    props.onLeftDrawerTitleVisibilityChange?.(props.instance.id, leftDrawerState() === "floating-closed")
-  })
-
   createEffect(() => {
     const instanceId = props.instance.id
     loadBackgroundProcesses(instanceId).catch((error) => {
@@ -702,6 +697,48 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const hasSessions = createMemo(() => activeSessions().size > 0)
 
   const showingInfoView = createMemo(() => activeSessionIdForInstance() === "info")
+  const activeSessionTitle = createMemo(() => {
+    if (showingInfoView()) return null
+    const title = activeSessionForInstance()?.title?.trim()
+    return title || t("sessionList.session.untitled")
+  })
+  const showHeaderSessionTitle = createMemo(() => !leftPinned() && Boolean(activeSessionTitle()))
+
+  const renderActiveSessionHeaderTitle = () => (
+    <Show when={showHeaderSessionTitle()}>
+      <div
+        class="session-header-active-title session-item-base session-item-active"
+        dir="auto"
+        title={activeSessionTitle() ?? undefined}
+      >
+        <div class="session-item-row session-item-header">
+          <div class="session-item-title-row">
+            <span class="session-item-title session-item-title--clamp">{activeSessionTitle()}</span>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+
+  const renderHeaderLeftSlot = () => (
+    <Show when={showHeaderSessionTitle()}>
+      <div class="session-header-left-slot" style={{ width: `${sessionSidebarWidth()}px` }}>
+        <Show when={leftDrawerState() === "floating-closed"}>
+          <IconButton
+            ref={setLeftToggleButtonEl}
+            color="inherit"
+            onClick={handleLeftAppBarButtonClick}
+            aria-label={leftAppBarButtonLabel()}
+            size="small"
+            aria-expanded={leftDrawerState() !== "floating-closed"}
+          >
+            {leftAppBarButtonIcon()}
+          </IconButton>
+        </Show>
+        {renderActiveSessionHeaderTitle()}
+      </div>
+    </Show>
+  )
 
   const sessionLayout = (
     <div
@@ -722,82 +759,71 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 fallback={
                   <div class="flex flex-col w-full gap-1.5">
                     <div class="flex flex-wrap items-center justify-between gap-2 w-full">
-                    <Show when={leftDrawerState() === "floating-closed"}>
-                      <IconButton
-                        ref={setLeftToggleButtonEl}
-                        color="inherit"
-                        onClick={handleLeftAppBarButtonClick}
-                        aria-label={leftAppBarButtonLabel()}
-                        size="small"
-                        aria-expanded={leftDrawerState() !== "floating-closed"}
-                      >
-                       {leftAppBarButtonIcon()}
-                      </IconButton>
-                    </Show>
+                      {renderHeaderLeftSlot()}
 
-                    <div class="flex-1 flex items-center justify-center min-w-0">
-                      {renderSessionHeaderIndicators()}
-                    </div>
+                      <div class="flex-1 flex items-center justify-center min-w-0">
+                        {renderSessionHeaderIndicators()}
+                      </div>
 
-                    <div class="flex flex-wrap items-center justify-center gap-1">
-                      <Show when={!showingInfoView()}>
+                      <div class="flex flex-wrap items-center justify-center gap-1">
+                        <Show when={!showingInfoView()}>
+                          <IconButton
+                            color="inherit"
+                            onClick={handleChatSearchClick}
+                            aria-label={t("instanceShell.chatSearch.openAriaLabel")}
+                            title={t("instanceShell.chatSearch.openAriaLabel")}
+                            size="small"
+                          >
+                            <Search class="w-5 h-5" aria-hidden="true" />
+                          </IconButton>
+                        </Show>
+                        <button
+                          type="button"
+                          class="connection-status-button command-palette-button"
+                          onClick={handleCommandPaletteClick}
+                          aria-label={t("instanceShell.commandPalette.openAriaLabel")}
+                          style={{ flex: "0 0 auto", width: "auto" }}
+                        >
+                          {t("instanceShell.commandPalette.button")}
+                        </button>
+                        <span class="connection-status-shortcut-hint kbd-hint">
+                          <Kbd shortcut="cmd+shift+p" />
+                        </span>
+                      </div>
+
+                      <div class="flex-1 flex items-center justify-center min-w-0">
+                        <span
+                          class={`status-indicator ${connectionStatusClass()}`}
+                          aria-label={t("instanceShell.connection.ariaLabel", { status: connectionStatusLabel() })}
+                        >
+                          <span class="status-dot" />
+                        </span>
+                      </div>
+
+                      <Show when={isPhoneLayout() && !props.mobileFullscreenMode}>
                         <IconButton
                           color="inherit"
-                          onClick={handleChatSearchClick}
-                          aria-label={t("instanceShell.chatSearch.openAriaLabel")}
-                          title={t("instanceShell.chatSearch.openAriaLabel")}
+                          onClick={props.onEnterMobileFullscreen}
+                          aria-label={t("instanceShell.fullscreen.enter")}
+                          title={t("instanceShell.fullscreen.enter")}
                           size="small"
                         >
-                          <Search class="w-5 h-5" aria-hidden="true" />
+                          <Maximize2 class="w-5 h-5" aria-hidden="true" />
                         </IconButton>
                       </Show>
-                      <button
-                        type="button"
-                        class="connection-status-button command-palette-button"
-                        onClick={handleCommandPaletteClick}
-                        aria-label={t("instanceShell.commandPalette.openAriaLabel")}
-                        style={{ flex: "0 0 auto", width: "auto" }}
-                      >
-                        {t("instanceShell.commandPalette.button")}
-                      </button>
-                      <span class="connection-status-shortcut-hint kbd-hint">
-                        <Kbd shortcut="cmd+shift+p" />
-                     </span>
-                     </div>
-
-                    <div class="flex-1 flex items-center justify-center min-w-0">
-                      <span
-                        class={`status-indicator ${connectionStatusClass()}`}
-                        aria-label={t("instanceShell.connection.ariaLabel", { status: connectionStatusLabel() })}
-                      >
-                        <span class="status-dot" />
-                      </span>
-                    </div>
-
-                    <Show when={isPhoneLayout() && !props.mobileFullscreenMode}>
-                      <IconButton
-                        color="inherit"
-                        onClick={props.onEnterMobileFullscreen}
-                        aria-label={t("instanceShell.fullscreen.enter")}
-                        title={t("instanceShell.fullscreen.enter")}
-                        size="small"
-                      >
-                        <Maximize2 class="w-5 h-5" aria-hidden="true" />
-                      </IconButton>
-                    </Show>
 
-                    <Show when={rightDrawerState() === "floating-closed"}>
-                      <IconButton
-                        ref={setRightToggleButtonEl}
-                        color="inherit"
-                        onClick={handleRightAppBarButtonClick}
-                        aria-label={rightAppBarButtonLabel()}
-                        size="small"
-                        aria-expanded={rightDrawerState() !== "floating-closed"}
-                      >
-                        {rightAppBarButtonIcon()}
-                      </IconButton>
-                    </Show>
+                      <Show when={rightDrawerState() === "floating-closed"}>
+                        <IconButton
+                          ref={setRightToggleButtonEl}
+                          color="inherit"
+                          onClick={handleRightAppBarButtonClick}
+                          aria-label={rightAppBarButtonLabel()}
+                          size="small"
+                          aria-expanded={rightDrawerState() !== "floating-closed"}
+                        >
+                          {rightAppBarButtonIcon()}
+                        </IconButton>
+                      </Show>
                     </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
@@ -815,18 +841,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               }
             >
               <div class="session-toolbar-left flex-1 flex items-center gap-3 min-w-0">
-                <Show when={leftDrawerState() === "floating-closed"}>
-                  <IconButton
-                    ref={setLeftToggleButtonEl}
-                    color="inherit"
-                    onClick={handleLeftAppBarButtonClick}
-                    aria-label={leftAppBarButtonLabel()}
-                    size="small"
-                    aria-expanded={leftDrawerState() !== "floating-closed"}
-                  >
-                    {leftAppBarButtonIcon()}
-                  </IconButton>
-                </Show>
+                {renderHeaderLeftSlot()}
 
                 <Show when={!showingInfoView()}>
                   <ContextMeter
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 1ff0dc3f6..abd6d962a 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -90,6 +90,19 @@
   color: var(--text-primary);
 }
 
+.session-header-left-slot {
+  @apply flex items-center gap-2 min-w-0;
+  flex: 0 0 auto;
+}
+
+.session-header-active-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  border-bottom: 0;
+  border-radius: var(--radius-md);
+  padding-block: 0.375rem;
+}
+
 .session-sidebar-shortcuts {
   @apply flex flex-col gap-1;
 }

From 1de1189db46e6d95afc3e7f81dcdd5be053b01b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sat, 9 May 2026 14:05:10 +0200
Subject: [PATCH 4/7] fix(ui): align header session title with floating sidebar

Subtract the Material toolbar inset from the reserved header title slot so the active session title ends at the same edge as the floating session sidebar.

This prevents the title background from peeking out beside the open drawer while keeping the closed-drawer menu button and title aligned with the sidebar width.

Validated with npm run typecheck --workspace @codenomad/ui and npm run build --workspace @codenomad/ui.
---
 packages/ui/src/components/instance/instance-shell2.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 0befbe559..1be5c1cd1 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -703,6 +703,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return title || t("sessionList.session.untitled")
   })
   const showHeaderSessionTitle = createMemo(() => !leftPinned() && Boolean(activeSessionTitle()))
+  const headerToolbarHorizontalInset = createMemo(() => (isPhoneLayout() ? 16 : 24))
+  const headerLeftSlotWidth = createMemo(() => Math.max(0, sessionSidebarWidth() - headerToolbarHorizontalInset()))
 
   const renderActiveSessionHeaderTitle = () => (
     <Show when={showHeaderSessionTitle()}>
@@ -722,7 +724,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   const renderHeaderLeftSlot = () => (
     <Show when={showHeaderSessionTitle()}>
-      <div class="session-header-left-slot" style={{ width: `${sessionSidebarWidth()}px` }}>
+      <div class="session-header-left-slot" style={{ width: `${headerLeftSlotWidth()}px` }}>
         <Show when={leftDrawerState() === "floating-closed"}>
           <IconButton
             ref={setLeftToggleButtonEl}

From f24a74ba46c2110e217bcafb41b6c474a6585307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sat, 9 May 2026 17:54:27 +0200
Subject: [PATCH 5/7] fix(ui): soften header session title

Keep the floating-sidebar reopen control available even when the active session title is absent, so info and empty states do not strand the user after closing the drawer.

Render the header session title as a quiet two-line text treatment with subtle vertical separators instead of reusing the active session item highlight. This preserves the drawer-width alignment while reducing visual weight in the toolbar.

Validated with git diff --check, npm run typecheck --workspace @codenomad/ui, npm run build --workspace @codenomad/ui, and a rebuilt raw Tauri executable for visual review.
---
 .../components/instance/instance-shell2.tsx   | 40 +++++++++----------
 .../ui/src/styles/panels/session-layout.css   | 19 +++++++--
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 1be5c1cd1..1bfbf8fff 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -702,41 +702,39 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const title = activeSessionForInstance()?.title?.trim()
     return title || t("sessionList.session.untitled")
   })
-  const showHeaderSessionTitle = createMemo(() => !leftPinned() && Boolean(activeSessionTitle()))
+  const showHeaderLeftSlot = createMemo(() => leftDrawerState() === "floating-closed")
+  const showHeaderSessionTitle = createMemo(() => showHeaderLeftSlot() && Boolean(activeSessionTitle()))
   const headerToolbarHorizontalInset = createMemo(() => (isPhoneLayout() ? 16 : 24))
   const headerLeftSlotWidth = createMemo(() => Math.max(0, sessionSidebarWidth() - headerToolbarHorizontalInset()))
 
   const renderActiveSessionHeaderTitle = () => (
     <Show when={showHeaderSessionTitle()}>
       <div
-        class="session-header-active-title session-item-base session-item-active"
+        class="session-header-active-title"
         dir="auto"
         title={activeSessionTitle() ?? undefined}
       >
-        <div class="session-item-row session-item-header">
-          <div class="session-item-title-row">
-            <span class="session-item-title session-item-title--clamp">{activeSessionTitle()}</span>
-          </div>
-        </div>
+        <span class="session-header-active-title-text">{activeSessionTitle()}</span>
       </div>
     </Show>
   )
 
   const renderHeaderLeftSlot = () => (
-    <Show when={showHeaderSessionTitle()}>
-      <div class="session-header-left-slot" style={{ width: `${headerLeftSlotWidth()}px` }}>
-        <Show when={leftDrawerState() === "floating-closed"}>
-          <IconButton
-            ref={setLeftToggleButtonEl}
-            color="inherit"
-            onClick={handleLeftAppBarButtonClick}
-            aria-label={leftAppBarButtonLabel()}
-            size="small"
-            aria-expanded={leftDrawerState() !== "floating-closed"}
-          >
-            {leftAppBarButtonIcon()}
-          </IconButton>
-        </Show>
+    <Show when={showHeaderLeftSlot()}>
+      <div
+        class="session-header-left-slot"
+        style={showHeaderSessionTitle() ? { width: `${headerLeftSlotWidth()}px` } : undefined}
+      >
+        <IconButton
+          ref={setLeftToggleButtonEl}
+          color="inherit"
+          onClick={handleLeftAppBarButtonClick}
+          aria-label={leftAppBarButtonLabel()}
+          size="small"
+          aria-expanded={leftDrawerState() !== "floating-closed"}
+        >
+          {leftAppBarButtonIcon()}
+        </IconButton>
         {renderActiveSessionHeaderTitle()}
       </div>
     </Show>
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index abd6d962a..c55b44238 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -96,11 +96,24 @@
 }
 
 .session-header-active-title {
+  display: flex;
+  align-items: center;
   flex: 1 1 auto;
   min-width: 0;
-  border-bottom: 0;
-  border-radius: var(--radius-md);
-  padding-block: 0.375rem;
+  align-self: stretch;
+  padding-inline: 0.75rem;
+  border-inline: 1px solid color-mix(in oklab, var(--border-base) 72%, transparent);
+  color: var(--text-secondary);
+}
+
+.session-header-active-title-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.15;
 }
 
 .session-sidebar-shortcuts {

From cdbe594affa47b60241fc921e9765b2deca2a18c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sat, 9 May 2026 18:05:31 +0200
Subject: [PATCH 6/7] fix(ui): preserve toolbar offset for floating sidebar

Keep the header left slot mounted while the unpinned session drawer is open so toolbar controls remain offset from the floating panel instead of sliding underneath it.

The slot now acts as an empty spacer in the floating-open state, while the reopen button and quiet two-line session title remain limited to the floating-closed state.

Validated with git diff --check and npm run typecheck --workspace @codenomad/ui.
---
 .../components/instance/instance-shell2.tsx   | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 1bfbf8fff..00837c20f 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -702,10 +702,13 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const title = activeSessionForInstance()?.title?.trim()
     return title || t("sessionList.session.untitled")
   })
-  const showHeaderLeftSlot = createMemo(() => leftDrawerState() === "floating-closed")
-  const showHeaderSessionTitle = createMemo(() => showHeaderLeftSlot() && Boolean(activeSessionTitle()))
+  const showHeaderLeftSlot = createMemo(() => !leftPinned())
+  const showHeaderSessionTitle = createMemo(() => leftDrawerState() === "floating-closed" && Boolean(activeSessionTitle()))
   const headerToolbarHorizontalInset = createMemo(() => (isPhoneLayout() ? 16 : 24))
   const headerLeftSlotWidth = createMemo(() => Math.max(0, sessionSidebarWidth() - headerToolbarHorizontalInset()))
+  const headerLeftSlotStyle = createMemo(() =>
+    leftDrawerState() === "floating-open" || showHeaderSessionTitle() ? { width: `${headerLeftSlotWidth()}px` } : undefined,
+  )
 
   const renderActiveSessionHeaderTitle = () => (
     <Show when={showHeaderSessionTitle()}>
@@ -723,18 +726,20 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     <Show when={showHeaderLeftSlot()}>
       <div
         class="session-header-left-slot"
-        style={showHeaderSessionTitle() ? { width: `${headerLeftSlotWidth()}px` } : undefined}
+        style={headerLeftSlotStyle()}
       >
-        <IconButton
-          ref={setLeftToggleButtonEl}
-          color="inherit"
-          onClick={handleLeftAppBarButtonClick}
-          aria-label={leftAppBarButtonLabel()}
-          size="small"
-          aria-expanded={leftDrawerState() !== "floating-closed"}
-        >
-          {leftAppBarButtonIcon()}
-        </IconButton>
+        <Show when={leftDrawerState() === "floating-closed"}>
+          <IconButton
+            ref={setLeftToggleButtonEl}
+            color="inherit"
+            onClick={handleLeftAppBarButtonClick}
+            aria-label={leftAppBarButtonLabel()}
+            size="small"
+            aria-expanded={leftDrawerState() !== "floating-closed"}
+          >
+            {leftAppBarButtonIcon()}
+          </IconButton>
+        </Show>
         {renderActiveSessionHeaderTitle()}
       </div>
     </Show>

From 064cffdf91df195026e8d44b3ca1fe7d06cc22b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sat, 9 May 2026 18:08:13 +0200
Subject: [PATCH 7/7] fix(ui): keep header session title under floating sidebar

Keep the quiet header session title mounted in the left slot for all unpinned drawer states, so opening the floating sidebar covers the title instead of pushing it to the right.

The reopen control is still limited to the closed state, while the slot width remains reserved when the floating drawer is open to keep toolbar controls out from under the overlay.

Validated with git diff --check and npm run typecheck --workspace @codenomad/ui.
---
 packages/ui/src/components/instance/instance-shell2.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 00837c20f..310dab669 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -703,7 +703,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return title || t("sessionList.session.untitled")
   })
   const showHeaderLeftSlot = createMemo(() => !leftPinned())
-  const showHeaderSessionTitle = createMemo(() => leftDrawerState() === "floating-closed" && Boolean(activeSessionTitle()))
+  const showHeaderSessionTitle = createMemo(() => showHeaderLeftSlot() && Boolean(activeSessionTitle()))
   const headerToolbarHorizontalInset = createMemo(() => (isPhoneLayout() ? 16 : 24))
   const headerLeftSlotWidth = createMemo(() => Math.max(0, sessionSidebarWidth() - headerToolbarHorizontalInset()))
   const headerLeftSlotStyle = createMemo(() =>
@@ -724,10 +724,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   const renderHeaderLeftSlot = () => (
     <Show when={showHeaderLeftSlot()}>
-      <div
-        class="session-header-left-slot"
-        style={headerLeftSlotStyle()}
-      >
+      <div class="session-header-left-slot" style={headerLeftSlotStyle()}>
         <Show when={leftDrawerState() === "floating-closed"}>
           <IconButton
             ref={setLeftToggleButtonEl}