fix(ui): show current chat title in conversation header

.changeset/chat-title-header.md

@@ -0,0 +1,5 @@
+---
+'@truefoundry/trueforge-ui': patch
+---
+
+Show the current chat title persistently above conversations in every layout.

packages/trueforge-ui/src/atoms/ChatTitleHeaderLabel.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useAuiState } from '../assistant-ui.js';
+import { cn } from './lib/cn.js';
+
+const UNTITLED_CHAT_LABEL = 'New Chat';
+
+/** Current chat title shown persistently above the conversation. */
+export function ChatTitleHeaderLabel({ className }: { className?: string }) {
+  const title = useAuiState(state => {
+    const { mainThreadId, threadItems } = state.threads;
+    return threadItems.find(item => item.id === mainThreadId)?.title;
+  });
+  const displayTitle = title?.trim() || UNTITLED_CHAT_LABEL;
+
+  return (
+    <h1
+      data-slot="aui_chat-title"
+      className={cn('min-w-0 flex-1 truncate px-1 text-sm font-medium text-text-primary', className)}
+      title={displayTitle}
+    >
+      {displayTitle}
+    </h1>
+  );
+}

packages/trueforge-ui/src/atoms/NamedAgentHeaderLabel.tsx

@@ -5,13 +5,16 @@ import { Icon } from '../icons/Icon.js';
 import { cn } from './lib/cn.js';
 import { Tooltip } from './primitives/Tooltip.js';
 
-/** Left-of-header title for a named agent, including its mutable edit state. */
+/** Context label for the named agent associated with the current chat. */
 export function NamedAgentHeaderLabel({ className }: { className?: string }) {
   const state = useNamedAgentHeaderState();
   if (state === null) return null;
 
   return (
-    <h1 className={cn('flex min-w-0 items-center gap-1.5 px-1 text-sm font-medium text-text-primary', className)}>
+    <div
+      data-slot="aui_named-agent-label"
+      className={cn('flex min-w-0 items-center gap-1.5 px-1 text-sm font-medium text-text-primary', className)}
+    >
       <Icon name="robot" className="size-3.5 shrink-0" />
       <span className="truncate" title={state.name}>
         {state.name}
@@ -24,6 +27,6 @@ export function NamedAgentHeaderLabel({ className }: { className?: string }) {
           </span>
         </Tooltip>
       ) : null}
-    </h1>
+    </div>
   );
 }

packages/trueforge-ui/src/hooks/useChatChromeActionsVisible.ts

@@ -23,6 +23,11 @@ export function useNamedAgentHeaderVisible(): boolean {
   return state !== null;
 }
 
+export function useChatTitleHeaderVisible(): boolean {
+  const shell = useOptionalShellMode();
+  return shell?.mode.status === 'active';
+}
+
 // Mutable draft/edit with a selected model — drives Save Agent + header chrome.
 export function useSaveAgentVisible(): boolean {
   const shell = useOptionalShellMode();
@@ -40,8 +45,9 @@ export function useChatChromeActionsVisible(): boolean {
 // True when the thread header has anything to show (title, Save, and/or Clear).
 // Clear alone matters for orphaned immutable history (deleted agent, no name).
 export function useChatHeaderContentVisible(): boolean {
+  const titleVisible = useChatTitleHeaderVisible();
   const namedVisible = useNamedAgentHeaderVisible();
   const saveVisible = useSaveAgentVisible();
   const clearVisible = useChatChromeActionsVisible();
-  return namedVisible || saveVisible || clearVisible;
+  return titleVisible || namedVisible || saveVisible || clearVisible;
 }

packages/trueforge-ui/src/layouts/DrawerLayout.tsx

@@ -3,6 +3,7 @@
 import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 
 import { useAui } from '../assistant-ui.js';
+import { ChatTitleHeaderLabel } from '../atoms/ChatTitleHeaderLabel.js';
 import { NamedAgentHeaderLabel } from '../atoms/NamedAgentHeaderLabel.js';
 import { ShellActions } from '../atoms/ShellActions.js';
 import { auiButtonClass } from '../atoms/lib/buttonClasses.js';
@@ -70,8 +71,8 @@ export function DrawerLayout({ className }: { className?: string }) {
       <header className="flex shrink-0 items-center gap-1 border-b border-border bg-topbar-bg px-2 py-1.5">
         {!settingsOpen ? (
           <>
-            <NamedAgentHeaderLabel />
-            <span className="min-w-0 flex-1" />
+            <ChatTitleHeaderLabel />
+            <NamedAgentHeaderLabel className="max-w-[40%] shrink-0" />
             <ClearChatButton />
             <SaveAgentButton />
           </>

packages/trueforge-ui/src/layouts/SidebarLayout.tsx

@@ -3,6 +3,7 @@
 import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 
 import { useAui } from '../assistant-ui.js';
+import { ChatTitleHeaderLabel } from '../atoms/ChatTitleHeaderLabel.js';
 import { auiButtonClass } from '../atoms/lib/buttonClasses.js';
 import { cn } from '../atoms/lib/cn.js';
 import { NamedAgentHeaderLabel } from '../atoms/NamedAgentHeaderLabel.js';
@@ -160,8 +161,8 @@ export function SidebarLayout({ className }: { className?: string }) {
               >
                 <Icon name="bars" />
               </button>
-              <NamedAgentHeaderLabel />
-              <span className="min-w-0 flex-1" />
+              <ChatTitleHeaderLabel />
+              <NamedAgentHeaderLabel className="max-w-[40%] shrink-0" />
               <ClearChatButton />
               <SaveAgentButton />
             </>

packages/trueforge-ui/src/layouts/StackChatPanel.tsx

@@ -3,6 +3,7 @@
 import { lazy, Suspense, useEffect, useState, type ReactNode } from 'react';
 
 import { useAui } from '../assistant-ui.js';
+import { ChatTitleHeaderLabel } from '../atoms/ChatTitleHeaderLabel.js';
 import { NamedAgentHeaderLabel } from '../atoms/NamedAgentHeaderLabel.js';
 import { ShellActions } from '../atoms/ShellActions.js';
 import { auiButtonClass } from '../atoms/lib/buttonClasses.js';
@@ -75,8 +76,8 @@ export function StackChatPanel({ className, threadHeaderEnd }: StackChatPanelPro
             >
               <Icon name="clock-rotate-left" />
             </button>
-            <NamedAgentHeaderLabel />
-            <span className="min-w-0 flex-1" />
+            <ChatTitleHeaderLabel />
+            <NamedAgentHeaderLabel className="max-w-[40%] shrink-0" />
             <ClearChatButton />
             <SaveAgentButton />
             {threadHeaderEnd}

packages/trueforge-ui/test/atoms/ChatTitleHeaderLabel.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const useAuiState = vi.fn();
+
+vi.mock('@/assistant-ui.js', () => ({
+  useAuiState: (selector: (state: unknown) => unknown) => useAuiState(selector),
+}));
+
+import { ChatTitleHeaderLabel } from '@/atoms/ChatTitleHeaderLabel.js';
+
+describe('ChatTitleHeaderLabel', () => {
+  beforeEach(() => {
+    useAuiState.mockImplementation((selector: (state: unknown) => unknown) =>
+      selector({ threads: { mainThreadId: 'main', threadItems: [{ id: 'main', title: undefined }] } }),
+    );
+  });
+
+  it('shows a placeholder for an untitled chat', () => {
+    render(<ChatTitleHeaderLabel />);
+
+    expect(screen.getByRole('heading', { name: 'New Chat' })).toBeInTheDocument();
+  });
+
+  it('shows the current title with truncation and a full-title tooltip', () => {
+    const title = 'A very long conversation title that should stay on one line';
+    useAuiState.mockImplementation((selector: (state: unknown) => unknown) =>
+      selector({
+        threads: {
+          mainThreadId: 'active-thread',
+          threadItems: [
+            { id: 'other-thread', title: 'Another conversation' },
+            { id: 'active-thread', title },
+          ],
+        },
+      }),
+    );
+
+    render(<ChatTitleHeaderLabel />);
+
+    expect(screen.getByRole('heading', { name: title })).toHaveClass('min-w-0', 'flex-1', 'truncate');
+    expect(screen.getByRole('heading', { name: title })).toHaveAttribute('title', title);
+  });
+});

packages/trueforge-ui/test/atoms/NamedAgentHeaderLabel.test.tsx

@@ -40,16 +40,16 @@ describe('NamedAgentHeaderLabel', () => {
         <NamedAgentHeaderLabel />
       </ShellModeProvider>,
     );
-    expect(screen.getByRole('heading', { name: 'support' })).toBeInTheDocument();
+    expect(screen.getByText('support')).toBeInTheDocument();
   });
 
   it('is hidden for unnamed draft chats', () => {
-    render(
+    const { container } = render(
       <ShellModeProvider agentConfig={{ mode: 'AgentComposer' }}>
         <NamedAgentHeaderLabel />
       </ShellModeProvider>,
     );
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(container.querySelector('[data-slot="aui_named-agent-label"]')).not.toBeInTheDocument();
   });
 
   it('shows an Editing label for a saved agent opened in mutable mode', () => {
@@ -64,7 +64,8 @@ describe('NamedAgentHeaderLabel', () => {
       screen.getByRole('button', { name: 'edit' }).click();
     });
 
-    expect(screen.getByRole('heading', { name: 'reviewer Editing' })).toBeInTheDocument();
+    expect(screen.getByText('reviewer')).toBeInTheDocument();
+    expect(screen.getByText('Editing')).toBeInTheDocument();
   });
 
   it('is hidden while idle, then appears after selecting a named agent', () => {
@@ -74,11 +75,11 @@ describe('NamedAgentHeaderLabel', () => {
         <NamedAgentHeaderLabel />
       </ShellModeProvider>,
     );
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.queryByText('reviewer')).not.toBeInTheDocument();
 
     act(() => {
       screen.getByRole('button', { name: 'select' }).click();
     });
-    expect(screen.getByRole('heading', { name: 'reviewer' })).toBeInTheDocument();
+    expect(screen.getByText('reviewer')).toBeInTheDocument();
   });
 });

packages/trueforge-ui/test/hooks/useChatChromeActionsVisible.test.tsx

@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 import {
   useChatChromeActionsVisible,
   useChatHeaderContentVisible,
+  useChatTitleHeaderVisible,
   useNamedAgentHeaderVisible,
   useSaveAgentVisible,
 } from '@/hooks/useChatChromeActionsVisible.js';
@@ -44,6 +45,7 @@ describe('useChatHeaderContentVisible', () => {
         return {
           shell,
           named: useNamedAgentHeaderVisible(),
+          title: useChatTitleHeaderVisible(),
           save: useSaveAgentVisible(),
           clear: useChatChromeActionsVisible(),
           header: useChatHeaderContentVisible(),
@@ -57,6 +59,7 @@ describe('useChatHeaderContentVisible', () => {
     });
 
     expect(result.current.named).toBe(false);
+    expect(result.current.title).toBe(true);
     expect(result.current.save).toBe(false);
     expect(result.current.clear).toBe(true);
     expect(result.current.header).toBe(true);
@@ -66,6 +69,7 @@ describe('useChatHeaderContentVisible', () => {
     const { result } = renderHook(
       () => ({
         named: useNamedAgentHeaderVisible(),
+        title: useChatTitleHeaderVisible(),
         save: useSaveAgentVisible(),
         clear: useChatChromeActionsVisible(),
         header: useChatHeaderContentVisible(),
@@ -78,6 +82,8 @@ describe('useChatHeaderContentVisible', () => {
     );
 
     expect(result.current.named).toBe(false);
+    expect(result.current.title).toBe(true);
     expect(result.current.clear).toBe(false);
+    expect(result.current.header).toBe(true);
   });
 });