From 8a7bec8df28aad753aa7122f221feca47c48c6ba Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Thu, 11 Jun 2026 09:12:04 +0000
Subject: [PATCH] fix: terminal tab title uses workspace + tool type + session
 name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of relying on display_name (which for old instances is just the
workspace name), fetch the full session info and build the title from
individual fields:

- Base: '{workspace_name} {tool_type_name}'
- With multiple terminal sessions: '{workspace_name} {tool_type_name} {session_name}'
- Fallback: 'Instance {id}' if session lookup fails

This gives meaningful titles like 'MyWorkspace code-server Session 1'
instead of just 'MyWorkspace — Terminal'.

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass
---
 apps/web/src/hooks/use-terminal-page.ts | 29 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/hooks/use-terminal-page.ts b/apps/web/src/hooks/use-terminal-page.ts
index 38ada14..4d50366 100644
--- a/apps/web/src/hooks/use-terminal-page.ts
+++ b/apps/web/src/hooks/use-terminal-page.ts
@@ -45,9 +45,11 @@ export const useTerminalPage = () => {
 	const { isOpen: isKeyboardOpen, height: keyboardHeight } =
 		useVirtualKeyboard();
 
-	const [instanceDisplayName, setInstanceDisplayName] = useState<string | null>(
-		null,
-	);
+	const [instanceInfo, setInstanceInfo] = useState<{
+		display_name: string;
+		workspace_name?: string | null;
+		tool_type_name: string;
+	} | null>(null);
 
 	const {
 		sessions,
@@ -66,13 +68,15 @@ export const useTerminalPage = () => {
 		if (!instanceId) return;
 		const load = async () => {
 			try {
-				// Try to find instance in user sessions first
 				const { getUserSessions } = await import("../api/sessions");
 				const allSessions = await getUserSessions();
 				const match = allSessions.find((s) => s.id === instanceId);
 				if (match) {
-					setInstanceDisplayName(match.display_name);
-					return;
+					setInstanceInfo({
+						display_name: match.display_name,
+						workspace_name: match.workspace_name,
+						tool_type_name: match.tool_type_name,
+					});
 				}
 			} catch {
 				// ignore
@@ -95,20 +99,19 @@ export const useTerminalPage = () => {
 			return;
 		}
 		const active = sessions.find((s) => s.id === activeSessionId);
-		const baseName =
-			instanceDisplayName ?? `Instance ${instanceId.slice(0, 8)}`;
-		// Single session: just show "{name} — Terminal"
-		// Multiple sessions: "{name} · {session_name} — Terminal"
+		const baseName = instanceInfo
+			? `${instanceInfo.workspace_name ?? instanceInfo.display_name} ${instanceInfo.tool_type_name}`
+			: `Instance ${instanceId.slice(0, 8)}`;
 		if (sessions.length <= 1) {
-			document.title = `${baseName} — Terminal`;
+			document.title = baseName;
 		} else {
 			const sessionName = active?.name ?? "Session";
-			document.title = `${baseName} · ${sessionName} — Terminal`;
+			document.title = `${baseName} ${sessionName}`;
 		}
 		return () => {
 			document.title = "Headquarter";
 		};
-	}, [instanceId, activeSessionId, sessions, instanceDisplayName]);
+	}, [instanceId, activeSessionId, sessions, instanceInfo]);
 
 	// Sync refs with sessions
 	useEffect(() => {