feat(web): redesign navbar live session items for scanability

Restructure live session nav entries into a 3-line layout:
- workspace/repository context on top
- session display name in the middle
- tool type and project on the bottom

Tool icon now has a status-dot badge, and the tooltip lists
display name, tool, project, context, and status.

apps/web/src/components/app-shell.tsx

@@ -46,9 +46,13 @@ const SessionItem = ({ session }: { session: Session }) => {
 				? `/instances/${session.id}/terminal`
 				: `/projects/${session.project_id}`;
 
-	const tooltipParts = [session.display_name, session.project_name];
+	const contextName = session.workspace_name || session.repository_name;
-	if (session.workspace_name) tooltipParts.push(session.workspace_name);
+	const tooltipParts = [
-	else if (session.repository_name) tooltipParts.push(session.repository_name);
+		session.display_name,
+		session.tool_type_name,
+		session.project_name,
+	];
+	if (contextName) tooltipParts.push(contextName);
 	tooltipParts.push(`(${session.status})`);
 
 	return (
@@ -57,13 +61,20 @@ const SessionItem = ({ session }: { session: Session }) => {
 			target={`session-${session.id}`}
 			rel="noreferrer"
 			className="nav-item session-item"
-			title={tooltipParts.join(" ")}
+			title={tooltipParts.join(" · ")}
 		>
-			<span className={`session-status ${isRunning ? "running" : ""}`} />
+			<span className="session-icon-wrap">
-			<Icon name={session.tool_icon as IconName} size="sm" />
+				<Icon name={session.tool_icon as IconName} size="sm" />
-			<span className="session-name">
+				<span className={`session-status ${isRunning ? "running" : ""}`} />
-				{session.display_name}
+			</span>
-				<span className="session-tool">{session.tool_type_name}</span>
+			<span className="session-meta">
+				{contextName && (
+					<span className="session-workspace">{contextName}</span>
+				)}
+				<span className="session-display-name">{session.display_name}</span>
+				<span className="session-context">
+					{session.tool_type_name} · {session.project_name}
+				</span>
 			</span>
 		</a>
 	);

apps/web/src/styles/utilities.css

@@ -272,38 +272,65 @@ a.nav-item,
 
 /* Session Navigation */
 .session-item {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding-left: var(--space-2);
+}
+
+.session-icon-wrap {
 	position: relative;
-	padding-left: var(--space-6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.25rem;
+	height: 1.25rem;
+	flex-shrink: 0;
+	align-self: flex-start;
+}
+
+.session-icon-wrap .icon {
+	margin-right: 0;
 }
 
 .session-status {
 	position: absolute;
-	left: var(--space-2);
+	top: -2px;
-	top: 50%;
+	right: -3px;
-	transform: translateY(-50%);
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background: var(--muted);
+	border: 2px solid var(--panel);
 }
 
 .session-status.running {
 	background: var(--success);
 }
 
-.session-name {
+.session-meta {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	flex: 1;
+	line-height: 1.25;
+}
+
+.session-workspace,
+.session-context {
+	font-size: var(--font-size-xs);
+	color: var(--muted);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	max-width: 140px;
 }
 
-.session-tool {
+.session-display-name {
-	font-size: 10px;
+	font-weight: 500;
-	color: var(--muted);
+	color: var(--ink);
-	margin-left: 4px;
+	overflow: hidden;
-	text-transform: uppercase;
+	text-overflow: ellipsis;
-	letter-spacing: 0.03em;
+	white-space: nowrap;
 }
 
 .nav-divider {