Skip to content

Display chat name and model badge in chat panel header#3

Merged
super3 merged 5 commits into
mainfrom
claude/display-current-model-jE3I7
Apr 2, 2026
Merged

Display chat name and model badge in chat panel header#3
super3 merged 5 commits into
mainfrom
claude/display-current-model-jE3I7

Conversation

@super3

@super3 super3 commented Apr 2, 2026

Copy link
Copy Markdown
Owner

Summary

This PR adds dynamic chat panel header updates to display the current chat name and the AI model being used. The chat panel title now reflects the active chat session, and a model badge shows which model generated the response.

Key Changes

  • New .model-badge CSS class: Styled badge element for displaying the model name with smaller font size and muted color
  • Dynamic chat panel title: The chat panel header now displays the current chat's name instead of static "Chat" text
  • Model badge display: Added a badge element that shows the model name returned from the API response
  • New updatePanelTitle() function: Updates the chat panel title to reflect the currently active chat session
  • Server-side model tracking: Modified /api/chat endpoint to include the model field in the JSON response
  • Title updates on chat actions: Panel title is refreshed when:
    • Creating a new chat
    • Switching between chats
    • Renaming a chat
    • Receiving a new message (which auto-names the chat)
    • Initial page load

Implementation Details

  • The model badge is populated from the API response's data.model field
  • Chat panel title defaults to "Chat" if no active chat is found
  • All chat-related operations that change the active session now trigger updatePanelTitle() to keep the UI in sync

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj

@railway-app

railway-app Bot commented Apr 2, 2026

Copy link
Copy Markdown

🚅 Deployed to the padtask-pr-3 environment in padtask

Service Status Web Updated (UTC)
padtask ✅ Success (View Logs) Web Apr 2, 2026 at 2:52 pm

@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:38 Destroyed
- Add model badge (right-justified) in chat panel header showing the
  model returned by the API (e.g. claude-sonnet-4-20250514)
- Replace hardcoded "Chat" title with dynamic chat name that syncs
  with the sidebar (updates on rename, first message, and chat switch)
- Server now returns `model` field from the Anthropic API response

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj
@super3 super3 force-pushed the claude/display-current-model-jE3I7 branch from ad42bd0 to 0bbeb15 Compare April 2, 2026 14:40
@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:40 Destroyed
- Changed model badge color from #555 to #888 for better contrast
  against the dark #111 header background
- Show default model name on page load instead of empty span

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj
@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:44 Destroyed
- Added background, border, and padding to make the badge stand out
- Bumped font size and weight for better readability

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj
@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:46 Destroyed
Maps API model IDs to clean display names:
- claude-sonnet-* → Sonnet 4.6
- claude-opus-* → Opus 4.6
- claude-haiku-* → Haiku 4.5

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj
@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:48 Destroyed
Use same font-size, color, background, padding, border-radius,
and border as the task count badge for visual consistency.

https://claude.ai/code/session_01WjjDjbvTo4TkS8taZKpBrj
@railway-app railway-app Bot temporarily deployed to padtask / padtask-pr-3 April 2, 2026 14:51 Destroyed
@super3 super3 merged commit 7eb652b into main Apr 2, 2026
3 checks passed
@super3 super3 deleted the claude/display-current-model-jE3I7 branch April 2, 2026 14:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants