From 355b471067455ea454870aba9f2e1e273f1f3c28 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Tue, 16 Jun 2026 11:13:10 +0000
Subject: [PATCH] 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 | 29 ++++++++++-----
 apps/web/src/styles/utilities.css     | 51 ++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/app-shell.tsx b/apps/web/src/components/app-shell.tsx
index b3ee9cb..6664a02 100644
--- a/apps/web/src/components/app-shell.tsx
+++ b/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];
-	if (session.workspace_name) tooltipParts.push(session.workspace_name);
-	else if (session.repository_name) tooltipParts.push(session.repository_name);
+	const contextName = session.workspace_name || session.repository_name;
+	const tooltipParts = [
+		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" : ""}`} />
-			<Icon name={session.tool_icon as IconName} size="sm" />
-			<span className="session-name">
-				{session.display_name}
-				<span className="session-tool">{session.tool_type_name}</span>
+			<span className="session-icon-wrap">
+				<Icon name={session.tool_icon as IconName} size="sm" />
+				<span className={`session-status ${isRunning ? "running" : ""}`} />
+			</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>
 	);
diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css
index 43f0f9c..56f6abb 100644
--- a/apps/web/src/styles/utilities.css
+++ b/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: 50%;
-	transform: translateY(-50%);
+	top: -2px;
+	right: -3px;
 	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 {
-	font-size: 10px;
-	color: var(--muted);
-	margin-left: 4px;
-	text-transform: uppercase;
-	letter-spacing: 0.03em;
+.session-display-name {
+	font-weight: 500;
+	color: var(--ink);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .nav-divider {