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(" · ")}
>
-
-
-
- {session.display_name}
- {session.tool_type_name}
+
+
+
+
+
+ {contextName && (
+ {contextName}
+ )}
+ {session.display_name}
+
+ {session.tool_type_name} · {session.project_name}
+
);
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 {