enhance(chat): show mode icon and label under thread titles

The sidebar conversation list gains a second line per thread: the icon and
localized name of the mode the thread was last used in (lastChatMode),
matching the design mockups. formatModeLabel is extracted to
lib/config/modes.ts with the same contract the mode switcher and embedded
settings already inline (known modes translate via chat.modes.*, free-form
names fall back capitalized). Threads without a stored mode render exactly
as before — no empty line. 3 new unit tests.

Author: rschlaefli

apps/chat/src/components/thread-list.tsx

@@ -7,7 +7,7 @@ import { createElement, useMemo, useState } from 'react'
 import { TextField, useSidebar } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { useParams, useRouter } from 'next/navigation'
-import { getModeIcon } from '../lib/config/modes'
+import { formatModeLabel, getModeIcon } from '../lib/config/modes'
 import { useChatStore, type Thread } from '../stores/chatStore'
 
 export const ThreadList: FC = () => {
@@ -297,18 +297,29 @@ const ThreadListItem: FC<ThreadListItemProps> = ({
             data-cy="chat-thread-select"
             onClick={onSelect}
             aria-current={isActive ? 'page' : undefined}
-            className="flex min-w-0 flex-grow items-center gap-2 px-3 py-1 text-start"
+            className="flex min-w-0 flex-grow flex-col gap-0.5 px-3 py-1 text-start"
           >
-            {/* Badge the row with the icon of the mode the thread was last
+            <p className="truncate text-sm">{getThreadTitle()}</p>
+            {/* Second line: the icon + name of the mode the thread was last
                 used in (D6). Rendered via createElement rather than bound to a
                 capitalized local: assigning the looked-up icon in the render
                 body reads to the React Compiler lint as defining a new
-                component on every render. */}
-            {thread.lastChatMode &&
-              createElement(getModeIcon(thread.lastChatMode), {
-                className: 'text-muted-foreground size-4 shrink-0',
-              })}
-            <p className="truncate text-sm">{getThreadTitle()}</p>
+                component on every render. Omitted entirely (no empty line)
+                when the thread has no stored mode, e.g. threads created
+                before mode tracking shipped. */}
+            {thread.lastChatMode && (
+              <p
+                data-cy="chat-thread-mode"
+                className="text-muted-foreground flex items-center gap-1 text-xs"
+              >
+                {createElement(getModeIcon(thread.lastChatMode), {
+                  className: 'size-3 shrink-0',
+                })}
+                <span className="truncate">
+                  {formatModeLabel(t, thread.lastChatMode)}
+                </span>
+              </p>
+            )}
           </button>
           <button
             type="button"

apps/chat/src/lib/config/modes.ts

@@ -4,6 +4,7 @@ import {
   Sparkles,
   type LucideIcon,
 } from 'lucide-react'
+import type { useTranslations } from 'next-intl'
 
 // Presentation metadata for the chatbot mode keys exposed via `systemPrompts`.
 // Modes are configured per chatbot, so only the well-known keys get a dedicated
@@ -23,3 +24,22 @@ export function isKnownMode(mode: string): mode is KnownMode {
 export function getModeIcon(mode: string): LucideIcon {
   return isKnownMode(mode) ? MODE_ICONS[mode] : Sparkles
 }
+
+/**
+ * Localized label for a chat mode, e.g. for the sidebar thread-list mode
+ * line. Same contract as `mode-switcher.tsx` / `embedded-settings.tsx`
+ * (isKnownMode + `chat.modes.*`, capitalized raw name otherwise) and
+ * `lib/config/reasoning.ts`'s `formatReasoningEffort` — pulled out here so a
+ * new call site doesn't have to re-inline the ternary.
+ */
+export function formatModeLabel(
+  // `<never>` is the root-namespace instantiation, i.e. the one every caller
+  // gets from a bare `useTranslations()`. Without it the generic resolves to a
+  // union over every namespace and only relative keys typecheck.
+  t: ReturnType<typeof useTranslations<never>>,
+  mode: string
+): string {
+  return isKnownMode(mode)
+    ? t(`chat.modes.${mode}`)
+    : mode.charAt(0).toUpperCase() + mode.slice(1)
+}

apps/chat/test/mode-label.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest'
+import { formatModeLabel } from '../src/lib/config/modes'
+
+// Stands in for next-intl's `t`, using the same shape the real English
+// messages produce for the `chat.modes.*` keys this module reads.
+const t = ((key: string) => {
+  if (key === 'chat.modes.tutor') return 'Tutor'
+  if (key === 'chat.modes.explainer') return 'Explainer'
+  return key
+}) as unknown as Parameters<typeof formatModeLabel>[0]
+
+describe('formatModeLabel', () => {
+  test('returns the localized label for a well-known mode', () => {
+    expect(formatModeLabel(t, 'tutor')).toBe('Tutor')
+    expect(formatModeLabel(t, 'explainer')).toBe('Explainer')
+  })
+
+  test('falls back to the capitalized raw name for an unknown mode', () => {
+    expect(formatModeLabel(t, 'socratic')).toBe('Socratic')
+  })
+
+  test('only capitalizes the first character of an unknown mode', () => {
+    expect(formatModeLabel(t, 'examPrep')).toBe('ExamPrep')
+  })
+})