From c881bbdad3b5f79c354ada56db4afaee5b0ecd88 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Thu, 11 Jun 2026 09:04:34 +0000
Subject: [PATCH] fix: clean up tab titles and sidebar session display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove useless document.title from handleOpen (it only changed the
  caller page's title, not the new tab)
- Terminal tab title: simpler format without extra '— Headquarter' suffix
  - Single session: '{name} — Terminal'
  - Multiple sessions: '{name} · {session_name} — Terminal'
- Sidebar live sessions: show tool type in small muted text next to
  display_name so sessions aren't indistinguishable when display_name
  is just the workspace name

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
---
 apps/web/src/components/app-shell.tsx      |  5 ++++-
 apps/web/src/hooks/use-instance-actions.ts |  1 -
 apps/web/src/hooks/use-terminal-page.ts    | 16 +++++++++++-----
 apps/web/src/styles/utilities.css          |  8 ++++++++
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/app-shell.tsx b/apps/web/src/components/app-shell.tsx
index 6b258d1..5e07e69 100644
--- a/apps/web/src/components/app-shell.tsx
+++ b/apps/web/src/components/app-shell.tsx
@@ -63,7 +63,10 @@ const SessionItem = ({ session }: { session: Session }) => {
 		>
 			<span className={`session-status ${isRunning ? "running" : ""}`} />
 			<Icon name={session.tool_icon as IconName} size="sm" />
-			<span className="session-name">{session.display_name}</span>
+			<span className="session-name">
+				{session.display_name}
+				<span className="session-tool">{session.tool_type_name}</span>
+			</span>
 		</a>
 	);
 };
diff --git a/apps/web/src/hooks/use-instance-actions.ts b/apps/web/src/hooks/use-instance-actions.ts
index 9c9459d..2c66bd0 100644
--- a/apps/web/src/hooks/use-instance-actions.ts
+++ b/apps/web/src/hooks/use-instance-actions.ts
@@ -54,7 +54,6 @@ export function useInstanceActions(
 			url = `/projects/${session.project_id}`;
 		}
 
-		document.title = `${session.display_name} — Headquarter`;
 		const w = window.open(url, `session-${session.id}`);
 		tabRefs.current.set(key, w);
 	}, []);
diff --git a/apps/web/src/hooks/use-terminal-page.ts b/apps/web/src/hooks/use-terminal-page.ts
index dfeb820..38ada14 100644
--- a/apps/web/src/hooks/use-terminal-page.ts
+++ b/apps/web/src/hooks/use-terminal-page.ts
@@ -9,7 +9,6 @@ import { useTerminalSessions } from "./use-terminal-sessions";
 import type { TerminalSession } from "../api/terminal";
 import type { ModifierKey } from "./use-special-keys";
 
-
 const SESSIONS_TO_INFO = (sessions: TerminalSession[]): TerminalSessionInfo[] =>
 	sessions.map((s) => ({
 		id: s.id,
@@ -92,13 +91,20 @@ export const useTerminalPage = () => {
 	// Update document title based on active terminal session
 	useEffect(() => {
 		if (!instanceId) {
-			document.title = "Terminal — Headquarter";
+			document.title = "Terminal";
 			return;
 		}
 		const active = sessions.find((s) => s.id === activeSessionId);
-		const sessionName = active?.name ?? "Session";
-		const baseName = instanceDisplayName ?? `Instance ${instanceId.slice(0, 8)}`;
-		document.title = `${baseName} ${sessionName} — Terminal — Headquarter`;
+		const baseName =
+			instanceDisplayName ?? `Instance ${instanceId.slice(0, 8)}`;
+		// Single session: just show "{name} — Terminal"
+		// Multiple sessions: "{name} · {session_name} — Terminal"
+		if (sessions.length <= 1) {
+			document.title = `${baseName} — Terminal`;
+		} else {
+			const sessionName = active?.name ?? "Session";
+			document.title = `${baseName} · ${sessionName} — Terminal`;
+		}
 		return () => {
 			document.title = "Headquarter";
 		};
diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css
index 105b365..a84f962 100644
--- a/apps/web/src/styles/utilities.css
+++ b/apps/web/src/styles/utilities.css
@@ -298,6 +298,14 @@ a.nav-item,
 	max-width: 140px;
 }
 
+.session-tool {
+	font-size: 10px;
+	color: var(--muted);
+	margin-left: 4px;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+}
+
 .nav-divider {
 	height: 1px;
 	background: var(--border);