feat(agent): display model name at end of completed chat session

packages/browseros-agent/apps/agent/entrypoints/sidepanel/index/Chat.tsx

@@ -22,6 +22,7 @@ import { ChatError } from './ChatError'
 import { ChatFooter } from './ChatFooter'
 import { ChatMessages } from './ChatMessages'
 import type { ChatMode } from './chatTypes'
+import { SessionCompletedFooter } from './SessionCompletedFooter'
 
 /**
  * @public
@@ -240,6 +241,12 @@ export const Chat = () => {
         {chatError && (
           <ChatError error={chatError} providerType={selectedProvider?.type} />
         )}
+        {messages.length > 0 &&
+          status === 'ready' &&
+          !chatError &&
+          !agentUrlError && (
+            <SessionCompletedFooter provider={selectedProvider} />
+          )}
       </main>
 
       <ChatFooter

packages/browseros-agent/apps/agent/entrypoints/sidepanel/index/SessionCompletedFooter.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'bun:test'
+import type { Provider } from '@/components/chat/chatComponentTypes'
+import { formatSessionCompletedLabel } from './SessionCompletedFooter'
+
+describe('formatSessionCompletedLabel', () => {
+  it('returns null when provider is undefined', () => {
+    expect(formatSessionCompletedLabel(undefined)).toBeNull()
+  })
+
+  it('returns the display name for an llm provider', () => {
+    const provider: Provider = {
+      id: 'p1',
+      name: 'OpenAI GPT-4',
+      type: 'openai',
+      kind: 'llm',
+    }
+    expect(formatSessionCompletedLabel(provider)).toBe('OpenAI GPT-4')
+  })
+
+  it('joins adapter name and model label for an acp target', () => {
+    const provider: Provider = {
+      id: 'a1',
+      name: 'Claude Code · Sonnet 3.5',
+      type: 'acp',
+      kind: 'acp',
+      agentId: 'a1',
+      adapterName: 'Claude Code',
+      modelLabel: 'Sonnet 3.5',
+    }
+    expect(formatSessionCompletedLabel(provider)).toBe(
+      'Claude Code · Sonnet 3.5',
+    )
+  })
+
+  it('falls back to adapter name when model label is missing for acp', () => {
+    const provider: Provider = {
+      id: 'a1',
+      name: 'Claude Code',
+      type: 'acp',
+      kind: 'acp',
+      agentId: 'a1',
+      adapterName: 'Claude Code',
+    }
+    expect(formatSessionCompletedLabel(provider)).toBe('Claude Code')
+  })
+
+  it('falls back to model label when adapter name is missing for acp', () => {
+    const provider: Provider = {
+      id: 'a1',
+      name: 'Sonnet 3.5',
+      type: 'acp',
+      kind: 'acp',
+      agentId: 'a1',
+      modelLabel: 'Sonnet 3.5',
+    }
+    expect(formatSessionCompletedLabel(provider)).toBe('Sonnet 3.5')
+  })
+
+  it('falls back to provider.name when both adapter name and model label are missing for acp', () => {
+    const provider: Provider = {
+      id: 'a1',
+      name: 'Some Agent',
+      type: 'acp',
+      kind: 'acp',
+      agentId: 'a1',
+    }
+    expect(formatSessionCompletedLabel(provider)).toBe('Some Agent')
+  })
+})

packages/browseros-agent/apps/agent/entrypoints/sidepanel/index/SessionCompletedFooter.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react'
+import type { Provider } from '@/components/chat/chatComponentTypes'
+
+export function formatSessionCompletedLabel(
+  provider: Provider | undefined,
+): string | null {
+  if (!provider) return null
+  if (provider.kind === 'acp') {
+    if (provider.adapterName && provider.modelLabel) {
+      return `${provider.adapterName} · ${provider.modelLabel}`
+    }
+    return provider.adapterName ?? provider.modelLabel ?? provider.name
+  }
+  return provider.name
+}
+
+interface SessionCompletedFooterProps {
+  provider: Provider | undefined
+}
+
+export const SessionCompletedFooter: FC<SessionCompletedFooterProps> = ({
+  provider,
+}) => {
+  const label = formatSessionCompletedLabel(provider)
+  if (!label) return null
+
+  return (
+    <div className="flex justify-center px-3 pt-1 pb-2">
+      <span className="text-muted-foreground/70 text-xs">
+        Session completed with{' '}
+        <span className="font-medium text-muted-foreground">{label}</span>
+      </span>
+    </div>
+  )
+}