From 6f09a1fc78ec78ce4c81002363d0156a9500830e Mon Sep 17 00:00:00 2001
From: Harshit Singh Bhandari <dev@theharshitsingh.com>
Date: Fri, 3 Jul 2026 22:23:57 +0530
Subject: [PATCH] fix(frontend): show session display name in terminal toolbar
 header (#2382)

* fix(frontend): show session display name in terminal toolbar header

The terminal toolbar showed the raw session id. Show the display name
(session.title, same field the sidebar renders) instead, and
'Orchestrator' for orchestrator sessions.

Fixes #2380

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test(frontend): cover terminal toolbar session label

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .../renderer/components/CenterPane.test.tsx   | 38 +++++++++++++++++++
 .../src/renderer/components/CenterPane.tsx    |  6 ++-
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/renderer/components/CenterPane.test.tsx

diff --git a/frontend/src/renderer/components/CenterPane.test.tsx b/frontend/src/renderer/components/CenterPane.test.tsx
new file mode 100644
index 000000000..f4ebef8a1
--- /dev/null
+++ b/frontend/src/renderer/components/CenterPane.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { WorkspaceSession } from "../types/workspace";
+import { CenterPane } from "./CenterPane";
+
+// The terminal body pulls in xterm/SSE machinery irrelevant to the toolbar under test.
+vi.mock("./TerminalPane", () => ({ TerminalPane: () => <div>terminal body</div> }));
+
+const worker = {
+	id: "sess-1",
+	workspaceId: "proj-1",
+	workspaceName: "my-app",
+	title: "do the thing",
+	provider: "claude-code",
+	kind: "worker",
+	branch: "ao/sess-1",
+	status: "working",
+	updatedAt: "2026-06-10T00:00:00Z",
+	prs: [],
+} satisfies WorkspaceSession;
+
+describe("CenterPane toolbar session label", () => {
+	it("shows the session display name for a worker", () => {
+		render(<CenterPane session={worker} theme="dark" daemonReady />);
+		expect(screen.getByText("do the thing")).toBeInTheDocument();
+		expect(screen.queryByText("sess-1")).not.toBeInTheDocument();
+	});
+
+	it("shows 'Orchestrator' for an orchestrator session", () => {
+		render(<CenterPane session={{ ...worker, id: "sess-orch", kind: "orchestrator" }} theme="dark" daemonReady />);
+		expect(screen.getByText("Orchestrator")).toBeInTheDocument();
+	});
+
+	it("shows 'No session' when there is no session", () => {
+		render(<CenterPane theme="dark" daemonReady />);
+		expect(screen.getByText("No session")).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/renderer/components/CenterPane.tsx b/frontend/src/renderer/components/CenterPane.tsx
index 09d494ae5..e0a2fca45 100644
--- a/frontend/src/renderer/components/CenterPane.tsx
+++ b/frontend/src/renderer/components/CenterPane.tsx
@@ -2,7 +2,7 @@ import { ChevronLeft, Maximize2, Minimize2, Shield } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type WheelEvent } from "react";
 import type { Theme } from "../stores/ui-store";
 import type { TerminalTarget } from "../types/terminal";
-import type { WorkspaceSession } from "../types/workspace";
+import { isOrchestratorSession, type WorkspaceSession } from "../types/workspace";
 import { TerminalPane } from "./TerminalPane";
 
 type CenterPaneProps = {
@@ -99,7 +99,9 @@ export function CenterPane({ session, theme, daemonReady, terminalTarget, onSele
 			<div className="terminal-toolbar">
 				<div className="terminal-toolbar__label">
 					<span className="terminal-toolbar__eyebrow">TERMINAL</span>
-					<span className="terminal-toolbar__session">{session?.id ?? "No session"}</span>
+					<span className="terminal-toolbar__session">
+						{!session ? "No session" : isOrchestratorSession(session) ? "Orchestrator" : session.title}
+					</span>
 				</div>
 				<div className="terminal-toolbar__controls">
 					<button