fix(ui): refine branded expert workspace heading

apps/ui/src/features/chat/ConversationWorkspaceView.tsx

@@ -256,13 +256,16 @@ export function ConversationWorkspaceView({
         {homeMicrocopyStatus}
       </span>
     </div>
+  ) : expertWorkspaceLogo ? (
+    <div className="expert-hero-heading">
+      {expertWorkspaceLogo}
+      <strong className="expert-hero-title">{activeExpertName}</strong>
+    </div>
   ) : (
     <div className="conversation-panel-kicker expert-hero-kicker">
-      {expertWorkspaceLogo ?? (
-        <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
-          {renderExpertIcon(activeExpertVisualKey)}
-        </span>
-      )}
+      <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
+        {renderExpertIcon(activeExpertVisualKey)}
+      </span>
       <span className="expert-hero-copy">
         <strong>{activeExpertName}</strong>
       </span>

apps/ui/src/features/experts/ExpertsView.tsx

@@ -79,13 +79,16 @@ export function ExpertsView({
 
   return (
     <ChatWorkspace
-      panelLead={(
+      panelLead={expertWorkspaceLogo ? (
+        <div className="expert-hero-heading">
+          {expertWorkspaceLogo}
+          <strong className="expert-hero-title">{activeExpertName}</strong>
+        </div>
+      ) : (
         <div className="conversation-panel-kicker expert-hero-kicker">
-          {expertWorkspaceLogo ?? (
-            <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
-              {renderExpertIcon(activeExpertVisualKey)}
-            </span>
-          )}
+          <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
+            {renderExpertIcon(activeExpertVisualKey)}
+          </span>
           <span className="expert-hero-copy">
             <strong>{activeExpertName}</strong>
           </span>

apps/ui/src/styles/chat.css

@@ -564,6 +564,22 @@
   min-width: 0;
 }
 
+.conversation-shell .expert-hero-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 1em;
+  min-width: 0;
+}
+
+.conversation-shell .expert-hero-title {
+  min-width: 0;
+  color: #12355f;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
 .conversation-shell .expert-workspace-logo {
   width: 44px;
   height: 44px;

apps/ui/test/expertWorkspaceHeaderSource.test.ts

+import test from "node:test"
+import assert from "node:assert/strict"
+import { readFileSync } from "node:fs"
+
+const conversationWorkspaceSource = readFileSync(new URL("../src/features/chat/ConversationWorkspaceView.tsx", import.meta.url), "utf8")
+const expertsViewSource = readFileSync(new URL("../src/features/experts/ExpertsView.tsx", import.meta.url), "utf8")
+const chatStylesSource = readFileSync(new URL("../src/styles/chat.css", import.meta.url), "utf8")
+
+function cssBlock(source: string, selector: string): string {
+  const start = source.indexOf(`${selector} {`)
+  assert.notEqual(start, -1, `Missing CSS selector: ${selector}`)
+  const end = source.indexOf("\n}", start)
+  assert.notEqual(end, -1, `Missing CSS block end: ${selector}`)
+  return source.slice(start, end + 2)
+}
+
+test("branded expert workspace heading renders as icon followed by plain text", () => {
+  assert.match(conversationWorkspaceSource, /expertWorkspaceLogo \? \(\s*<div className="expert-hero-heading">[\s\S]*?\{expertWorkspaceLogo\}[\s\S]*?<strong className="expert-hero-title">\{activeExpertName\}<\/strong>[\s\S]*?<\/div>\s*\) : \(/)
+  assert.match(expertsViewSource, /expertWorkspaceLogo \? \(\s*<div className="expert-hero-heading">[\s\S]*?\{expertWorkspaceLogo\}[\s\S]*?<strong className="expert-hero-title">\{activeExpertName\}<\/strong>[\s\S]*?<\/div>\s*\) : \(/)
+  assert.doesNotMatch(conversationWorkspaceSource.match(/expertWorkspaceLogo \? \([\s\S]*?\) : \(/)?.[0] ?? "", /conversation-panel-kicker/)
+  assert.doesNotMatch(expertsViewSource.match(/expertWorkspaceLogo \? \([\s\S]*?\) : \(/)?.[0] ?? "", /conversation-panel-kicker/)
+  assert.match(cssBlock(chatStylesSource, ".conversation-shell .expert-hero-heading"), /display:\s*inline-flex;[\s\S]*?gap:\s*1em;/)
+})