feat: streaming markdown optimization, shimmer effect, elapsed time in thinking

Streaming Markdown:
- Debounced parsing during streaming (150ms / 100-char threshold)
- Prevents re-parsing entire content on every delta (~50ms)
- Pass streaming prop from message-list to MarkdownPreview

Shimmer Effect:
- .shimmer-text CSS class: gradient text animation on thinking state
- Uses theme-aware --text-secondary/--text-tertiary for all 7 themes
- prefers-reduced-motion: falls back to static text

Thinking State:
- Shows elapsed seconds counter next to thinking trail
- Formats as Xs (e.g. '12s') for at-a-glance timing

Author: BunsDev

app/globals.css

@@ -2170,6 +2170,28 @@ p {
   animation: shimmer 2s infinite;
 }
 
+.shimmer-text {
+  background: linear-gradient(
+    90deg,
+    var(--text-tertiary) 0%,
+    var(--text-secondary) 40%,
+    var(--text-tertiary) 80%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 2.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    background: none;
+    -webkit-text-fill-color: var(--text-tertiary);
+    animation: none;
+  }
+}
+
 .animate-spin {
   animation: spin 1s linear infinite;
 }

components/chat/message-list.tsx

@@ -631,7 +631,7 @@ export function MessageList({
                   style={{ fontSize: `${chatFontSize}px`, fontFamily: chatFontCss }}
                 >
                   <div className="prose-chat">
-                    <MarkdownPreview content={streamBuffer} />
+                    <MarkdownPreview content={streamBuffer} streaming />
                   </div>
                   <span className="inline-block w-1.5 h-3.5 bg-[var(--brand)] animate-pulse ml-0.5 align-text-bottom rounded-sm" />
                 </div>
@@ -704,11 +704,16 @@ export function MessageList({
                     <span />
                     <span />
                   </div>
-                  <span className="text-[11px] text-[var(--text-tertiary)]">
+                  <span className="text-[11px] text-[var(--text-tertiary)] shimmer-text">
                     {thinkingTrail.length > 0
                       ? thinkingTrail[thinkingTrail.length - 1]
                       : 'Thinking...'}
                   </span>
+                  {turnElapsedMs > 0 && (
+                    <span className="text-[9px] text-[var(--text-disabled)] tabular-nums">
+                      {turnElapsedMs < 1000 ? '' : `${(turnElapsedMs / 1000).toFixed(0)}s`}
+                    </span>
+                  )}
                 </div>
               </div>
             )}

components/markdown-preview.tsx

@@ -195,15 +195,34 @@ function FloatingCard({
   )
 }
 
-export function MarkdownPreview({ content, className }: MarkdownPreviewProps) {
+export function MarkdownPreview({ content, className, streaming }: MarkdownPreviewProps & { streaming?: boolean }) {
+  // Debounce parsing during streaming — parse at most every 150ms
+  const lastParsedRef = useRef('')
+  const lastBlocksRef = useRef<ReturnType<typeof parse>>([])
+  const lastParseTimeRef = useRef(0)
+
   const blocks = useMemo(() => {
+    // During streaming, skip re-parse if content hasn't grown enough or too recent
+    if (streaming && lastBlocksRef.current.length > 0) {
+      const now = Date.now()
+      const timeSince = now - lastParseTimeRef.current
+      const growth = content.length - lastParsedRef.current.length
+      if (timeSince < 150 && growth < 100) {
+        return lastBlocksRef.current
+      }
+    }
+
     const clean =
       typeof window !== 'undefined'
         ? DOMPurify.sanitize(content, { ALLOWED_TAGS: [], KEEP_CONTENT: true })
         : content.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
     const normalized = normalizeToMarkdown(clean)
-    return parse(normalized)
-  }, [content])
+    const result = parse(normalized)
+    lastParsedRef.current = content
+    lastBlocksRef.current = result
+    lastParseTimeRef.current = Date.now()
+    return result
+  }, [content, streaming])
 
   const containerRef = useRef<HTMLDivElement>(null)
   const [hoverTarget, setHoverTarget] = useState<HoverTarget | null>(null)