feat(web): thinking spinner, live timer, consistent stop button

- Replace blinking cursor with 3-dot amber pulsing spinner + "thinking..."
- Add live elapsed timer in right rail (MM:SS, ticks every second)
- Show final duration when session completes
- Replace Button stop with chip-sized danger button (matches status chip)
- Refresh session data on completion to get completed_at for timer

Author: mariuspruvot

apps/web/src/features/session/ContainerSession.tsx

@@ -116,13 +116,17 @@ export default function ContainerSession({
     })
   }, [appendMessage])
 
-  // Fetch scorecard when session completes
-  const loadScorecard = useCallback(async (sessionId: string) => {
+  // Refresh session data (to get completed_at for the timer) and scorecard
+  const refreshSessionData = useCallback(async (sessionId: string) => {
     try {
-      const data = await fetchScorecard(sessionId)
-      if (data) setScorecard(data)
+      const [fresh, sc] = await Promise.all([
+        getContainerSession(sessionId).catch(() => null),
+        fetchScorecard(sessionId).catch(() => null),
+      ])
+      if (fresh) setSession(fresh)
+      if (sc) setScorecard(sc)
     } catch {
-      // Scorecard is optional — silently ignore
+      // best-effort
     }
   }, [])
 
@@ -159,7 +163,7 @@ export default function ContainerSession({
           const isTerminalStatus = ['completed', 'failed', 'timeout', 'stopped'].includes(existing.status)
           if (isTerminalStatus) {
             await loadStoredEvents(existing.id)
-            await loadScorecard(existing.id)
+            await refreshSessionData(existing.id)
           } else if (existing.status === 'running') {
             connectStream(existing.id)
           }
@@ -219,7 +223,7 @@ export default function ContainerSession({
         if (fresh.status === 'completed') {
           appendStatus('Session completed.')
           await loadStoredEvents(sessionId)
-          await loadScorecard(sessionId)
+          await refreshSessionData(sessionId)
         } else if (fresh.status === 'failed') {
           setError('Container failed')
           appendError('Container failed.')
@@ -306,7 +310,7 @@ export default function ContainerSession({
         }
         // Load scorecard after completion
         if (session?.id) {
-          loadScorecard(session.id)
+          refreshSessionData(session.id)
         }
       })
 
@@ -347,7 +351,7 @@ export default function ContainerSession({
         eventSourceRef.current = null
       }
     }
-  }, [installationId, repoFullName, prNumber, skillName, existingSessionId, appendMessage, appendStatus, appendError, loadScorecard])
+  }, [installationId, repoFullName, prNumber, skillName, existingSessionId, appendMessage, appendStatus, appendError, refreshSessionData])
 
   const handleStop = useCallback(async () => {
     if (!session) return
@@ -439,18 +443,18 @@ export default function ContainerSession({
         <Chip variant="accent">{session?.skill_name ?? skillName}</Chip>
 
         {/* Status + controls right-aligned */}
-        <div className="ml-auto flex items-center gap-3">
+        <div className="ml-auto flex items-center gap-2">
           <span data-testid="session-status"><Chip variant={statusVariant}>{status}</Chip></span>
 
           {isRunning && (
-            <Button
-              variant="danger"
+            <button
               onClick={handleStop}
               disabled={stopping}
               data-testid="stop-button"
+              className="font-mono text-[11px] font-medium px-2 py-0.5 rounded-default border border-danger/35 text-danger bg-danger/10 hover:bg-danger/20 transition-colors cursor-pointer disabled:opacity-40"
             >
-              {stopping ? 'Stopping...' : 'Stop'}
-            </Button>
+              {stopping ? 'stopping...' : 'stop'}
+            </button>
           )}
         </div>
       </div>

apps/web/src/features/session/ConversationOutput.tsx

@@ -52,10 +52,14 @@ export default function ConversationOutput({ messages, isRunning }: Conversation
           <MessageBlock key={message.id} message={message} />
         ))}
         {isRunning && messages.length > 0 && (
-          <span
-            data-testid="conversation-cursor"
-            className="inline-block w-2 h-4 bg-accent animate-pulse mt-2"
-          />
+          <div data-testid="conversation-cursor" className="flex items-center gap-2 mt-3 py-2">
+            <div className="flex gap-1">
+              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+            </div>
+            <span className="font-mono text-[11px] text-dim">thinking...</span>
+          </div>
         )}
       </div>
     </div>

apps/web/src/features/session/SessionRail.tsx

@@ -1,9 +1,10 @@
 /**
  * SessionRail — right sidebar for the session view.
- * Shows progress tracker, scorecard, session meta, and privacy note.
+ * Shows live timer, progress tracker, scorecard, session meta, and privacy note.
  */
 
-import { Chip, Overline } from '../../shared/components'
+import { useEffect, useState } from 'react'
+import { Chip, Dot, Overline } from '../../shared/components'
 import type { ScorecardResponse } from './containerApi'
 import type { ContainerSessionResponse, ContainerStatus } from './containerTypes'
 import ProgressTracker from './ProgressTracker'
@@ -18,6 +19,44 @@ interface SessionRailProps {
   isComplete: boolean
 }
 
+function formatElapsed(ms: number): string {
+  const totalSec = Math.floor(ms / 1000)
+  const min = Math.floor(totalSec / 60)
+  const sec = totalSec % 60
+  return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+}
+
+function LiveTimer({ startedAt }: { startedAt: string }) {
+  const [elapsed, setElapsed] = useState(0)
+
+  useEffect(() => {
+    const start = new Date(startedAt).getTime()
+    setElapsed(Date.now() - start)
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - start)
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [startedAt])
+
+  return (
+    <div className="flex items-center gap-2">
+      <Dot color="ok" pulse />
+      <span className="font-mono text-lg font-bold text-ink tabular-nums">
+        {formatElapsed(elapsed)}
+      </span>
+    </div>
+  )
+}
+
+function FinalDuration({ startedAt, completedAt }: { startedAt: string; completedAt: string }) {
+  const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime()
+  return (
+    <span className="font-mono text-lg font-bold text-dim tabular-nums">
+      {formatElapsed(ms)}
+    </span>
+  )
+}
+
 export default function SessionRail({
   session,
   status,
@@ -27,10 +66,25 @@ export default function SessionRail({
   isComplete,
 }: SessionRailProps) {
   const isTerminal = status === 'completed' || status === 'failed' || status === 'stopped'
+  const isRunning = status === 'running' || status === 'starting'
 
   return (
     <div className="w-[260px] shrink-0 border-l border-rule bg-bg2 overflow-y-auto">
       <div className="p-4 space-y-6">
+        {/* Timer */}
+        {session?.started_at && (
+          <section>
+            <Overline className="mb-2">{'\u25b8'} ELAPSED</Overline>
+            {isRunning && <LiveTimer startedAt={session.started_at} />}
+            {isTerminal && session.completed_at && (
+              <FinalDuration startedAt={session.started_at} completedAt={session.completed_at} />
+            )}
+            {isTerminal && !session.completed_at && (
+              <span className="font-mono text-lg font-bold text-dim">--:--</span>
+            )}
+          </section>
+        )}
+
         {/* Progress tracker */}
         {questionCount > 0 && (
           <section>
@@ -76,14 +130,6 @@ export default function SessionRail({
                   {session.repo_full_name.split('/').pop()}
                 </span>
               </div>
-              {session.started_at && (
-                <div className="flex justify-between">
-                  <span className="text-dim font-mono">Started</span>
-                  <span className="text-ink2 font-mono">
-                    {new Date(session.started_at).toLocaleTimeString()}
-                  </span>
-                </div>
-              )}
             </div>
           </section>
         )}

apps/web/src/index.css

@@ -6,6 +6,11 @@ html, body, #root {
   min-height: 100vh;
 }
 
+@keyframes pulse-dot {
+  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
 /* JetBrains Mono — primary monospace font */
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');