One owl on each key screen

Home points at Start debate. Generate thinks while it writes and looks
surprised when the run fails. History's empty states sleep, the Library
reads, and the Debate Timer title holds a stopwatch. The Sparring
opponent argues, and the Ask coach gives a thumbs-up. Case Saved
celebrates beside its check. The 404 and the won ballot already had the
right pose.

Owls beside text stay decorative. The coach and opponent avatars get alt
text in English, Hungarian and Spanish. No other copy changes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Programcode

src/components/features/ask/AskChat.tsx

@@ -115,7 +115,7 @@ const MessageBubble = React.memo(function MessageBubble({ message, onSave }: { m
   return (
     <div className={cn('flex items-end gap-2.5', isUser ? 'justify-end motion-safe:animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-out-strong' : 'motion-safe:animate-in fade-in-0 slide-in-from-bottom-1 duration-200 ease-out-strong justify-start')}>
       {/* The coach is the owl. */}
-      {!isUser && <OwlAvatar pose="idea" size={32} className="mb-0.5 hidden sm:inline-flex" />}
+      {!isUser && <OwlAvatar pose="coach" size={32} label={t('askChat.coachAvatarAlt', 'The owl, your debate coach')} className="mb-0.5 hidden sm:inline-flex" />}
       <div
         className={cn(
           'max-w-[85%] rounded-[20px] px-4 py-3 space-y-3 relative group',
@@ -577,7 +577,7 @@ export function AskChat({ messages, streamingMessage, isLoading, error, onDismis
         {/* Wraps on a phone: the Hungarian title and two buttons do not fit one 375 px row. */}
         <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
           <div className="flex min-w-0 items-center gap-3">
-            <OwlAvatar pose={waitingForText && searchingWeb ? 'skeptical' : 'idea'} size={44} />
+            <OwlAvatar pose="coach" size={44} label={t('askChat.coachAvatarAlt', 'The owl, your debate coach')} />
             <div className="min-w-0">
               <CardTitle>{t('askChat.title')}</CardTitle>
               <CardDescription>{t('askChat.subtitle')}</CardDescription>
@@ -618,7 +618,8 @@ export function AskChat({ messages, streamingMessage, isLoading, error, onDismis
               {waitingForText && (
                 // One true status line: what is happening, and how long it has taken once that matters.
                 <p className="flex items-center gap-2.5 text-sm font-bold text-muted-foreground motion-safe:animate-in fade-in-0 duration-200" role="status" aria-live="polite">
-                  <OwlAvatar pose={searchingWeb ? 'skeptical' : 'idea'} size={32} />
+                  {/* Decorative: a label here would be announced with every status update. */}
+                  <OwlAvatar pose="coach" size={32} />
                   <span className="inline-flex items-center gap-2 rounded-[20px] rounded-bl-md border-2 border-border bg-card px-3.5 py-2.5">
                     {searchingWeb ? t('askChat.searchingWeb', 'Searching the web…') : t('askChat.working', 'Working…')}
                     <ThinkingDots className="text-primary" />

src/components/features/debate/UnsortedWork.tsx

@@ -102,7 +102,7 @@ export function UnsortedWork() {
   ].sort((a, b) => (b.kind === 'item' ? b.item.createdAt : b.createdAt) - (a.kind === 'item' ? a.item.createdAt : a.createdAt));
 
   if (entries.length === 0) {
-    return <EmptyState icon={Inbox} title={t('debate.unsortedEmpty', 'Nothing outside your debates')} description={t('debate.unsortedEmptyDesc', 'One-off results and older unsorted work appear here.')} />;
+    return <EmptyState pose="sleepy" icon={Inbox} title={t('debate.unsortedEmpty', 'Nothing outside your debates')} description={t('debate.unsortedEmptyDesc', 'One-off results and older unsorted work appear here.')} />;
   }
 
   return (

src/components/features/sparring/SparringRound.tsx

@@ -255,7 +255,7 @@ export function SparringRound({
                 // What you're answering stays in view above the composer, not below it in the transcript.
                 <article className="rounded-lg border-2 border-border bg-card p-4 sm:p-5" aria-labelledby="sparring-latest-opponent">
                   <div className="flex items-center gap-2.5">
-                    <OwlAvatar pose="skeptical" size={32} />
+                    <OwlAvatar pose="arguing" size={32} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
                     <h2 id="sparring-latest-opponent" className="text-sm font-extrabold text-heading">{t('sparring.round.latestOpponent', 'Opponent’s last speech')}</h2>
                     <span className="truncate text-xs text-muted-foreground">{t(`sparring.turns.${latestOpponentSpeech.turnId}`, latestOpponentSpeech.role)}</span>
                   </div>
@@ -304,7 +304,7 @@ export function SparringRound({
                 // The opponent's speech as it is written, in the place it will be read.
                 <article data-testid="sparring-live-speech" className="rounded-lg border-2 border-brand-tint-border bg-card p-4 motion-safe:animate-in fade-in-0 duration-200 sm:p-5" aria-busy="true" aria-labelledby="sparring-live-opponent">
                   <div className="flex items-center gap-2.5">
-                    <OwlAvatar pose="point" size={32} />
+                    <OwlAvatar pose="arguing" size={32} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />
                     <h2 id="sparring-live-opponent" className="text-sm font-extrabold text-heading">{t('sparring.round.opponentSpeaking', 'Opponent is speaking')}</h2>
                     {currentTurn && <span className="truncate text-xs text-muted-foreground">{t(`sparring.turns.${currentTurn.id}`, currentTurn.label)}</span>}
                   </div>
@@ -324,8 +324,8 @@ export function SparringRound({
                       <>
                         {/* One indicator: the owl opponent sizing up the round, bobbing while it works. */}
                         {aiLoading
-                          ? <OwlLoader pose="skeptical" size={104} />
-                          : <Owl pose="skeptical" size={104} />}
+                          ? <OwlLoader pose="arguing" size={104} />
+                          : <Owl pose="arguing" size={104} />}
                         <h2 className="mt-4 font-display text-xl font-[600] text-heading">{aiLoading ? t('sparring.round.opponentThinking', 'Opponent is thinking') : t('sparring.round.opponentUpNext', 'Opponent is up next')}</h2>
                         <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">{aiLoading ? t('sparring.round.opponentThinkingDescription', 'It is reading the motion and your speeches before choosing a response.') : t('sparring.round.opponentUpNextDescription', 'The next response will appear here.')}</p>
                       </>
@@ -358,7 +358,7 @@ export function SparringRound({
                           <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand text-white">
                             <UserRound className="h-4 w-4" aria-hidden="true" />
                           </div>
-                        ) : <OwlAvatar pose="skeptical" size={32} />}
+                        ) : <OwlAvatar pose="arguing" size={32} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />}
                         <div className="min-w-0">
                           <p className="truncate text-sm font-extrabold text-heading">{speech.speaker === 'user' ? t('sparring.user', 'You') : t('sparring.opponent', 'AI opponent')}</p>
                           <p className="truncate text-xs text-muted-foreground">{t(`sparring.turns.${speech.turnId}`, speech.role)}</p>

src/components/features/sparring/SparringScorecard.tsx

@@ -78,7 +78,7 @@ export function SparringScorecard({ session, scorecard, onRestart, onExport, onE
             </div>
             <div className="mt-8 grid gap-4 sm:grid-cols-2">
               <ScoreTotal label={t('sparring.scorecard.yourScore', 'Your score')} score={scorecard.userScore} icon={<UserRound className="h-4 w-4" aria-hidden="true" />} isWinner={scorecard.winner === 'user'} topScoreLabel={t('sparring.scorecard.topScore', 'Top score')} />
-              <ScoreTotal label={t('sparring.scorecard.opponentScore', 'Opponent score')} score={scorecard.aiScore} icon={<OwlAvatar pose="skeptical" size={22} />} isWinner={scorecard.winner === 'ai'} topScoreLabel={t('sparring.scorecard.topScore', 'Top score')} />
+              <ScoreTotal label={t('sparring.scorecard.opponentScore', 'Opponent score')} score={scorecard.aiScore} icon={<OwlAvatar pose="arguing" size={22} />} isWinner={scorecard.winner === 'ai'} topScoreLabel={t('sparring.scorecard.topScore', 'Top score')} />
             </div>
             <div className="mt-7 rounded-lg border-2 border-border bg-surface-sunken/60 p-4 sm:p-5">
               <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">{t('sparring.scorecard.verdict', "Judge's verdict")}</p>
@@ -179,7 +179,7 @@ export function SparringScorecard({ session, scorecard, onRestart, onExport, onE
             {session.speeches.map((speech) => (
               <article key={speech.id} className="rounded-xl border border-border/70 p-4">
                 <div className="flex flex-wrap items-center justify-between gap-2">
-                  <div className="flex items-center gap-2 text-sm font-semibold">{speech.speaker === 'user' ? <span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand text-white" aria-hidden="true"><UserRound className="h-4 w-4" /></span> : <OwlAvatar pose="skeptical" size={28} />}{speech.speaker === 'user' ? t('sparring.user', 'You') : t('sparring.opponent', 'AI opponent')} <span className="font-normal text-muted-foreground">· {t(`sparring.turns.${speech.turnId}`, speech.role)}</span></div>
+                  <div className="flex items-center gap-2 text-sm font-semibold">{speech.speaker === 'user' ? <span className="flex h-7 w-7 items-center justify-center rounded-full bg-brand text-white" aria-hidden="true"><UserRound className="h-4 w-4" /></span> : <OwlAvatar pose="arguing" size={28} label={t('sparring.opponentAvatarAlt', 'The owl, your AI opponent')} />}{speech.speaker === 'user' ? t('sparring.user', 'You') : t('sparring.opponent', 'AI opponent')} <span className="font-normal text-muted-foreground">· {t(`sparring.turns.${speech.turnId}`, speech.role)}</span></div>
                   <span className="font-mono text-xs tabular-nums text-muted-foreground">{speech.speaker === 'ai' ? t('sparring.round.estimatedTimeUsed', '{{time}} estimated', { time: formatRoundTime(speech.timeUsedSeconds) }) : t('sparring.round.timeUsed', '{{time}} used', { time: formatRoundTime(speech.timeUsedSeconds) })}</span>
                 </div>
                 <div className="mt-3 text-sm leading-7"><Markdown>{speech.content}</Markdown></div>

src/components/features/sparring/SparringSetup.tsx

@@ -234,7 +234,7 @@ export function SparringSetup({ onStart, roundCost = null, remainingRequests = n
 
           <Card className="relative mt-16 overflow-visible border-brand-tint-border">
             {/* The opponent, perched on the round card, sizes you up. */}
-            <Owl pose="skeptical" size={80} className="absolute -top-[68px] right-4" />
+            <Owl pose="arguing" size={80} className="absolute -top-[68px] right-4" />
             <CardContent className="space-y-4 pt-6">
               <details className="group rounded-md border-2 border-border bg-surface-sunken/60 p-3">
                 <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">

src/components/features/tools/live-draft.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Button, ThinkingDots } from '@/components/ui/button';
-import { OwlAvatar } from '@/components/brand/Owl';
+import { OwlAvatar, type OwlPose } from '@/components/brand/Owl';
 import type { LivePhase } from '@/lib/ai/client';
 import { cn } from '@/lib/utils';
 import { ToolRunStatus, useElapsedSeconds, type LiveRunState } from './tool-run';
@@ -59,18 +59,21 @@ export function LiveToolRun({
   live,
   sections,
   onCancel,
+  pose,
 }: {
   label: string;
   live: LiveRunState;
   sections: DraftSection[];
   onCancel?: () => void;
+  /** The tool's own owl for the whole run, in place of the phase poses. */
+  pose?: OwlPose;
 }) {
   const { t } = useTranslation();
   const status = useLivePhaseLabel(live.phase, label);
   const elapsed = useElapsedSeconds();
   // The owl looks things up while researching or checking sources, and has an idea before it writes.
   if (sections.length === 0) {
-    return <ToolRunStatus label={status} onCancel={onCancel} pose={live.phase === 'research' || live.phase === 'checking' ? 'skeptical' : 'idea'} />;
+    return <ToolRunStatus label={status} onCancel={onCancel} pose={pose ?? (live.phase === 'research' || live.phase === 'checking' ? 'skeptical' : 'idea')} />;
   }
 
   const lastSection = sections.length - 1;
@@ -79,7 +82,7 @@ export function LiveToolRun({
   return (
     <div data-testid="live-draft" className="space-y-4" aria-busy="true">
       <div className="flex items-center gap-3 rounded-lg border-2 border-brand-tint-border bg-brand-tint px-3 py-2.5">
-        <OwlAvatar pose={writing ? 'point' : 'idea'} size={36} />
+        <OwlAvatar pose={pose ?? (writing ? 'point' : 'idea')} size={36} />
         <p className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 text-sm font-bold text-foreground">
           <span role="status" aria-live="polite">{writing ? t('tools.live.writingLive', 'Writing live') : status}</span>
           <ThinkingDots className="text-primary" />

src/hooks/use-toast.ts

@@ -8,20 +8,22 @@ export interface ToastOptions {
   description?: ReactNode;
   variant?: "default" | "destructive" | "success";
   action?: SonnerOptions["action"];
+  /** Replaces the kind's icon, such as the owl beside a success check. */
+  icon?: ReactNode;
 }
 
 /**
  * Adapter over sonner that keeps the `{ title, description, variant }` call
  * shape used across the app. Replaces the previous hand-rolled toast reducer
  * and its Radix primitives.
  */
-export function toast({ title, description, variant, action }: ToastOptions) {
+export function toast({ title, description, variant, action, icon }: ToastOptions) {
   const render = variant === "destructive"
     ? sonner.error
     : variant === "success"
       ? sonner.success
       : sonner;
-  return render(title ?? "", { description, action });
+  return render(title ?? "", { description, action, ...(icon ? { icon, className: "toast-owl" } : {}) });
 }
 
 export function useToast() {

src/index.css

@@ -1161,6 +1161,18 @@ passes AA on every surface; buttons fill with --do-primary (#0A6FF0) and white t
   }
 }
 
+/* A toast whose icon is the owl beside its check: the slot grows to fit both instead of the
+   32 px tinted circle, and the check keeps its own circle. In the utilities layer, because the
+   Toaster's `size-8!` is a layered important rule, which an unlayered one cannot override. */
+@layer utilities {
+  [data-sonner-toast].toast-owl [data-icon] {
+    width: auto !important;
+    height: auto !important;
+    border-radius: 0 !important;
+    background: none !important;
+  }
+}
+
 @keyframes motion-swap {
   from {
     opacity: 0;

src/locales/en.json

@@ -1338,6 +1338,7 @@
   },
   "askChat": {
     "title": "Ask Your Coach",
+    "coachAvatarAlt": "The owl, your debate coach",
     "subtitle": "Get answers to debate questions",
     "startConversation": "Start a conversation",
     "startDesc": "Ask anything about debate strategy, arguments, or get help with your case.",
@@ -2019,6 +2020,7 @@
     "con": "Con",
     "user": "You",
     "opponent": "AI opponent",
+    "opponentAvatarAlt": "The owl, your AI opponent",
     "format": {
       "standard": "School 4-6-6-3",
       "ld": "Lincoln-Douglas",

src/locales/es.json

@@ -1338,6 +1338,7 @@
   },
   "askChat": {
     "title": "Pregunta a tu coach",
+    "coachAvatarAlt": "El búho, tu entrenador de debate",
     "subtitle": "Obtén respuestas a preguntas de debate",
     "startConversation": "Inicia una conversación",
     "startDesc": "Pregunta lo que sea sobre estrategia de debate, argumentos o pide ayuda con tu caso.",
@@ -2019,6 +2020,7 @@
     "con": "En contra",
     "user": "Tú",
     "opponent": "Oponente de IA",
+    "opponentAvatarAlt": "El búho, tu oponente de IA",
     "format": {
       "standard": "Formato escolar 4-6-6-3",
       "ld": "Lincoln-Douglas",