feat: default session name to '{workspace} {tool_type}', improve terminal tab title

ToolStarter:
- Auto-populate Session Name as '{workspace.name} {tool_type.display_name}'
  when a tool type is selected
- Track whether user has manually edited the name (nameEdited flag) to avoid
  overwriting their custom input

Terminal page:
- Fetch instance display_name via getUserSessions for tab title
- Tab title format: '{display_name} {terminal_session_name} — Terminal'
  instead of just '{session_name} — Terminal'

Quality gates: tsc --noEmit pass, npm run build pass, 82/82 tests pass

apps/web/src/components/features/tool/tool-starter.tsx

@@ -3,7 +3,10 @@
 import { useState, useEffect, useCallback } from "react";
 import { Icon } from "../../icon";
 import { listToolTypes, type ToolType } from "../../../api/tool-types";
-import { listConfigProfiles, type ConfigProfile } from "../../../api/config-profiles";
+import {
+	listConfigProfiles,
+	type ConfigProfile,
+} from "../../../api/config-profiles";
 import { listSSHKeys, type SSHKey } from "../../../api/ssh-keys";
 import type { Workspace } from "../../../types/workspace";
 import type { ToolInstance } from "../../../api/sessions";
@@ -34,6 +37,7 @@ export function ToolStarter({
 	const [selectedSshKeyIds, setSelectedSshKeyIds] = useState<string[]>([]);
 
 	const [displayName, setDisplayName] = useState(workspace.name);
+	const [nameEdited, setNameEdited] = useState(false);
 	const [starting, setStarting] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 
@@ -115,7 +119,9 @@ export function ToolStarter({
 		setStarting(true);
 		setError(null);
 		try {
-			const { createInstance, startInstance } = await import("../../../api/sessions");
+			const { createInstance, startInstance } = await import(
+				"../../../api/sessions"
+			);
 			const instance = await createInstance(
 				workspace.project_id,
 				workspace.repo_id,
@@ -141,7 +147,13 @@ export function ToolStarter({
 		} finally {
 			setStarting(false);
 		}
-	}, [selectedToolTypeId, selectedProfileId, displayName, workspace, onStarted]);
+	}, [
+		selectedToolTypeId,
+		selectedProfileId,
+		displayName,
+		workspace,
+		onStarted,
+	]);
 
 	return (
 		<div className="tool-starter">
@@ -171,8 +183,13 @@ export function ToolStarter({
 					id="tool-type"
 					value={selectedToolTypeId}
 					onChange={(e) => {
-						setSelectedToolTypeId(e.target.value);
+						const toolId = e.target.value;
+						setSelectedToolTypeId(toolId);
 						setError(null);
+						const tt = toolTypes.find((t) => t.id === toolId);
+						if (tt && !nameEdited) {
+							setDisplayName(`${workspace.name} ${tt.display_name}`);
+						}
 					}}
 					disabled={toolTypesLoading || starting}
 				>
@@ -192,12 +209,15 @@ export function ToolStarter({
 			<div className="form-group">
 				<label htmlFor="session-name">Session Name</label>
 				<input
-						id="session-name"
-						type="text"
-						value={displayName}
-						onChange={(e) => setDisplayName(e.target.value)}
-						placeholder="My dev environment"
-						disabled={starting}
+					id="session-name"
+					type="text"
+					value={displayName}
+					onChange={(e) => {
+						setDisplayName(e.target.value);
+						setNameEdited(true);
+					}}
+					placeholder="My dev environment"
+					disabled={starting}
 				/>
 			</div>