refactor(chat): pair welcome capability icons explicitly at the call site

Author: rschlaefli

apps/chat/src/components/manage-assistant.tsx

@@ -5,7 +5,12 @@ import {
   AssistantChatTransport,
   useChatRuntime,
 } from '@assistant-ui/react-ai-sdk'
-import { WandSparkles } from 'lucide-react'
+import {
+  FilePenLineIcon,
+  MessageSquareTextIcon,
+  SearchIcon,
+  WandSparkles,
+} from 'lucide-react'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useEmbeddedManageContext } from '../hooks/useEmbeddedManageContext'
@@ -17,14 +22,20 @@ import {
 } from '../services/manageContext'
 import { ChatUiProvider, useChatUi } from './chat-ui-context'
 import { EmbeddedSettings } from './embedded-settings'
-import { Thread } from './thread'
+import { Thread, type ThreadWelcomeCapability } from './thread'
 
 const MANAGE_ASSISTANT_NAME = 'KlickerUZH Assistant'
 const MANAGE_ASSISTANT_WELCOME = 'Hello! How can I help you?'
-const MANAGE_ASSISTANT_CAPABILITIES = [
-  'Search your courses and question pool',
-  'Draft single-choice, multiple-choice, and free-text questions — saved to your pool only after you confirm',
-  'Suggest improvements to question feedback',
+const MANAGE_ASSISTANT_CAPABILITIES: ThreadWelcomeCapability[] = [
+  { icon: SearchIcon, text: 'Search your courses and question pool' },
+  {
+    icon: FilePenLineIcon,
+    text: 'Draft single-choice, multiple-choice, and free-text questions — saved to your pool only after you confirm',
+  },
+  {
+    icon: MessageSquareTextIcon,
+    text: 'Suggest improvements to question feedback',
+  },
 ]
 const MANAGE_ASSISTANT_LIMITS_NOTE =
   'Read-only for everything else — it never publishes or edits existing content.'

apps/chat/src/components/thread.tsx

@@ -21,13 +21,10 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   CopyIcon,
-  FilePenLineIcon,
   ImagePlusIcon,
-  MessageSquareTextIcon,
   PencilIcon,
   PencilOffIcon,
   RefreshCwIcon,
-  SearchIcon,
   SendHorizontalIcon,
   SquareIcon,
   XIcon,
@@ -80,10 +77,10 @@ type ThreadProps = {
   // Friendly greeting shown above the suggestions (e.g. the manage assistant).
   // When unset, the welcome falls back to `Ask {chatbotName}`.
   welcomeMessage?: string
-  // Short capability bullets shown between the greeting and the suggestions
-  // (e.g. the manage assistant explaining what it can help with). When
-  // unset/empty, nothing extra is rendered.
-  capabilities?: string[]
+  // Short capability bullets (icon + text) shown between the greeting and the
+  // suggestions (e.g. the manage assistant explaining what it can help with).
+  // When unset/empty, nothing extra is rendered.
+  capabilities?: ThreadWelcomeCapability[]
   // One-line note shown below the capability bullets (e.g. clarifying the
   // assistant's limits). Ignored when `capabilities` is unset/empty.
   limitsNote?: string
@@ -337,7 +334,7 @@ const ThreadWelcome: FC<{
   contextLabel?: string | null
   suggestions: ThreadSuggestion[]
   welcomeMessage?: string
-  capabilities?: string[]
+  capabilities?: ThreadWelcomeCapability[]
   limitsNote?: string
 }> = ({
   chatbotAvatar,
@@ -398,27 +395,26 @@ const ThreadWelcome: FC<{
   )
 }
 
-// Icons for `ThreadWelcomeCapabilities`, matched to bullets by position.
-const CAPABILITY_ICONS = [SearchIcon, FilePenLineIcon, MessageSquareTextIcon]
+export type ThreadWelcomeCapability = {
+  icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }>
+  text: string
+}
 
 const ThreadWelcomeCapabilities: FC<{
-  capabilities: string[]
+  capabilities: ThreadWelcomeCapability[]
   limitsNote?: string
 }> = ({ capabilities, limitsNote }) => (
   <div className="mt-3 flex w-full max-w-sm flex-col gap-1.5 text-left">
     <ul className="flex flex-col gap-1">
-      {capabilities.map((capability, index) => {
-        const Icon = CAPABILITY_ICONS[index % CAPABILITY_ICONS.length]!
-        return (
-          <li
-            key={capability}
-            className="text-muted-foreground flex items-start gap-1.5 text-xs leading-snug"
-          >
-            <Icon className="mt-0.5 size-3 shrink-0" />
-            <span>{capability}</span>
-          </li>
-        )
-      })}
+      {capabilities.map(({ icon: Icon, text }, index) => (
+        <li
+          key={`${text}-${index}`}
+          className="text-muted-foreground flex items-start gap-1.5 text-xs leading-snug"
+        >
+          <Icon aria-hidden className="mt-0.5 size-3 shrink-0" />
+          <span>{text}</span>
+        </li>
+      ))}
     </ul>
     {limitsNote && (
       <p className="text-muted-foreground/70 text-[11px] leading-snug">

project/2026-07-23-pr-5109-assistant-production-readiness-plan.md

@@ -195,3 +195,4 @@ agy (Gemini 3.6 Flash High, sandbox/plan mode) reviewed commit `b58112c23`. Veri
 - 2026-07-24: **Slice 4 done.** `BASE_MANAGE_ASSISTANT_PROMPT` hardened: any create/make/save/store/persist/add request is a persistence intent that must call `klicker_lecturer_element_create_draft_proposal`; never print a proposal or question as JSON in message text; draft-only scaffold tools are brainstorm-only prose; only an explicit do-not-save request keeps a draft in prose. Two new vitest cases lock the invariants and cover both `buildManageAssistantSystemPrompt` branches (tools available/unavailable). Eval matrix (live, standalone chat `/manage`, gpt-5.5): "Create a question about X" → card; "Save this as a draft" (after a prose draft) → card; "Add it to my pool" → card; "Make an MC question (5 options + feedback)" → prose twice on the first prompt version → per plan iterated once (added "make" to the verb list + explicit do-not-save exception) → card; "Draft one but do not save it" → prose, no card, no JSON leak (re-validated after iteration); "Store the one above" → card. Final matrix 6/6 (requirement ≥5/6 persistence + do-not-save prose). Token headroom measured via direct litellm gpt-5.5 call generating an equivalent 5-choice-MC-with-feedback JSON: 545 completion tokens (179 reasoning + ~366 payload for 1508 chars) vs `maxOutputTokens` 2048 → ~3.7x headroom, and no live proposal ever truncated — registry unchanged, no mini-commit needed. Ops note: a host-side edit of `manageAssistantRuntime.ts` mid-compile poisoned the Turbopack persistent cache (truncated parse survived touches and content changes); recovery required `devrouter stop .` + key-injected `devrouter ensure .` with `apps/chat/.next` removed while stopped — remove the cache only while the server is down. Checks: chat check green, 26 files / 124 tests. Next: Slice 4 reviews.
 - 2026-07-24: Slice 4 reviews closed. agy (git-show-only on `ac937b5bc`): no blocking defects — prompt internally coherent, tests cover both branches, diff strictly prompt+tests; two low findings both resolved as keep-as-is (verb-list substring is deliberate invariant locking; the no-JSON rule vs raw-technical-detail rule tension is the intended UX constraint forcing card rendering). Simplification: accepted 3 of 6 — shrank the full-sentence post-tool assertion to a short fragment, asserted shared invariants only against the tools-unavailable branch (available branch covered by earlier tests), dropped a superfluous `as const`; rejected the rest per low confidence/own recommendation. Re-verified: 26 files / 124 tests green. Next: Slice 5.
 - 2026-07-24: **Slice 5 done.** `Thread`/`ThreadWelcome` gained optional `capabilities?: string[]` + `limitsNote?: string`; new `ThreadWelcomeCapabilities` renders 3 icon bullets (Search/FilePenLine/MessageSquareText, matched by position) plus a more-muted one-line limits note between the greeting/contextLabel and the suggestions — nothing renders when the props are unset, so the student `[chatbotId]` path is byte-identical (Playwright `Y-chat` welcome assertion still guards it in CI). `manage-assistant.tsx` passes the 4 hardcoded EN strings per the chat app's convention. `manage.assistant.subtitle` sharpened: EN 'Manage' → 'AI assistant for your courses and question pool'; DE → 'KI-Assistent für Ihre Kurse und Ihren Fragepool' (formal Sie matches surrounding de.ts strings). Verified live: embedded drawer shows greeting → context pill → capabilities → limits note → 3 suggestions with no scrolling at drawer width, new subtitle fits the header pill on one line; standalone `/manage` tab shows the same explainer (screenshots slice5-drawer-welcome.png, slice5-standalone-welcome.png). Checks in-container: chat check + 26 files / 124 tests green, chat lint 0 errors (5 pre-existing warnings), prettier clean. Next: Slice 5 reviews.
+- 2026-07-24: Slice 5 reviews closed. agy (git-show-only on `2777d9d6c`): no blocking defects — student welcome DOM strictly identical (props unset → falsy gate), no 28-rem overflow risk (max-w-sm block, shrink-0 icons), no hidden behavior change; three low findings: applied `aria-hidden` on the decorative bullet icons and a collision-proof `${text}-${index}` key; the render-path unit test is deferred to Slice 8's Playwright welcome assertions (apps/chat tests are node-environment only — component rendering is explicitly mocked out per manage-proposal-card.test.ts). Simplification: commit near-minimal; accepted making the icon-bullet pairing explicit — `capabilities` is now `ThreadWelcomeCapability[]` (`{icon, text}`) paired at the call site in manage-assistant.tsx, dropping the cross-file position-matched `CAPABILITY_ICONS` array, modulo wraparound, and non-null assertion. Re-verified: chat check green, 26 files / 124 tests, standalone `/manage` welcome renders identically (slice5-standalone-after-simplify.png). Next: Slice 6.