diff --git a/src/components/input/ExampleContentMenu.tsx b/src/components/input/ExampleContentMenu.tsx
index 9ca95b4..b1e0e41 100644
--- a/src/components/input/ExampleContentMenu.tsx
+++ b/src/components/input/ExampleContentMenu.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useId, useRef, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
 import { exampleContents, type ExampleContent } from '@/constants/exampleContent'
 
 interface ExampleContentMenuProps {
@@ -21,10 +22,10 @@ export const ExampleContentMenu = ({
 
   const getCategoryColor = (category: ExampleContent['category']) => {
     const colors = {
-      technical: 'bg-blue-100 text-blue-700',
-      academic: 'bg-purple-100 text-purple-700',
-      news: 'bg-green-100 text-green-700',
-      legal: 'bg-amber-100 text-amber-700',
+      technical: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-200',
+      academic: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-200',
+      news: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-200',
+      legal: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
     }
     return colors[category]
   }
@@ -143,7 +144,7 @@ export const ExampleContentMenu = ({
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
         disabled={disabled}
-        className="flex items-center gap-2 rounded-xl border border-neutral-300 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral-300 disabled:hover:bg-white disabled:hover:text-neutral-700"
+        className="flex items-center gap-2 rounded-xl border border-neutral-300 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:border-neutral-600 dark:bg-neutral-900/70 dark:text-neutral-200 dark:hover:border-primary-400 dark:hover:bg-primary-500/10 dark:hover:text-primary-200 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0"
         aria-haspopup="menu"
         aria-expanded={isOpen}
         aria-controls={isOpen ? menuId : undefined}
@@ -164,7 +165,7 @@ export const ExampleContentMenu = ({
         </svg>
         <span>Load example</span>
         <svg
-          className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -174,53 +175,63 @@ export const ExampleContentMenu = ({
         </svg>
       </button>
 
-      {isOpen && (
-        <div
-          id={menuId}
-          className="absolute left-0 right-0 z-10 mt-2 min-w-[320px] rounded-xl border border-neutral-200 bg-white shadow-soft"
-          role="menu"
-          aria-orientation="vertical"
-          onKeyDown={handleMenuKeyDown}
-        >
-          <div className="border-b border-neutral-200 px-4 py-3">
-            <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
-              Example content
-            </p>
-          </div>
-
-          <div className="max-h-[400px] overflow-y-auto py-2">
-            {exampleContents.map((example, index) => (
-              <button
-                key={example.id}
-                ref={(el) => {
-                  menuItemsRef.current[index] = el
-                }}
-                type="button"
-                tabIndex={focusedIndex === index ? 0 : -1}
-                onClick={() => handleSelectExample(example)}
-                onFocus={() => setFocusedIndex(index)}
-                className="w-full px-4 py-3 text-left transition hover:bg-neutral-50 focus:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
-                role="menuitem"
-              >
-                <div className="flex items-start gap-3">
-                  <span
-                    className={`mt-1 rounded-full px-2 py-0.5 text-xs font-semibold uppercase tracking-wide ${getCategoryColor(example.category)}`}
-                  >
-                    {example.category}
-                  </span>
-
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-neutral-900">{example.title}</p>
-                    <p className="mt-1 line-clamp-2 text-xs text-neutral-600">
-                      {example.description}
-                    </p>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            id={menuId}
+            className="absolute left-0 right-0 z-10 mt-2 min-w-[320px] rounded-xl border border-neutral-200 bg-white/95 shadow-soft backdrop-blur-sm dark:border-neutral-700 dark:bg-neutral-900/95 dark:shadow-[0_20px_45px_-20px_rgba(15,23,42,0.65)]"
+            role="menu"
+            aria-orientation="vertical"
+            onKeyDown={handleMenuKeyDown}
+            initial={{ opacity: 0, transform: 'translateY(-8px) scale(0.98)' }}
+            animate={{ opacity: 1, transform: 'translateY(0) scale(1)' }}
+            transition={{ duration: 0.16, ease: 'easeOut' }}
+          >
+            <div className="border-b border-neutral-200 px-4 py-3 dark:border-neutral-700">
+              <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+                Example content
+              </p>
+            </div>
+
+            <div className="max-h-[400px] overflow-y-auto py-2">
+              {exampleContents.map((example, index) => (
+                <motion.button
+                  key={example.id}
+                  ref={(el) => {
+                    menuItemsRef.current[index] = el
+                  }}
+                  type="button"
+                  tabIndex={focusedIndex === index ? 0 : -1}
+                  onClick={() => handleSelectExample(example)}
+                  onFocus={() => setFocusedIndex(index)}
+                  className="w-full px-4 py-3 text-left transition-all duration-150 hover:bg-neutral-50 focus:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:hover:bg-neutral-800/70 dark:focus:bg-neutral-800/70"
+                  role="menuitem"
+                  initial={{ opacity: 0, transform: 'translateY(4px)' }}
+                  animate={{ opacity: 1, transform: 'translateY(0)' }}
+                  transition={{ duration: 0.14, ease: 'easeOut' }}
+                >
+                  <div className="flex items-start gap-3">
+                    <span
+                      className={`mt-1 rounded-full px-2 py-0.5 text-xs font-semibold uppercase tracking-wide ${getCategoryColor(example.category)}`}
+                    >
+                      {example.category}
+                    </span>
+
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium text-neutral-900 dark:text-neutral-100">
+                        {example.title}
+                      </p>
+                      <p className="mt-1 line-clamp-2 text-xs text-neutral-600 dark:text-neutral-400">
+                        {example.description}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
+                </motion.button>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   )
 }
diff --git a/src/components/input/TextInputPanel.tsx b/src/components/input/TextInputPanel.tsx
index 58ed73b..5fef5e6 100644
--- a/src/components/input/TextInputPanel.tsx
+++ b/src/components/input/TextInputPanel.tsx
@@ -284,12 +284,12 @@ export const TextInputPanel = ({
   // Get border color based on validation state
   const getBorderColor = () => {
     if (validation && !validation.isValid && text.length > 0) {
-      return 'border-red-300 focus:border-red-500 focus:ring-red-500'
+      return 'border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-500/70 dark:focus:border-red-400 dark:focus:ring-red-400'
     }
     if (warningMessage) {
-      return 'border-orange-300 focus:border-orange-500 focus:ring-orange-500'
+      return 'border-orange-300 focus:border-orange-500 focus:ring-orange-500 dark:border-orange-500/60 dark:focus:border-orange-400 dark:focus:ring-orange-400'
     }
-    return 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500'
+    return 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500 dark:border-neutral-700 dark:focus:border-primary-400 dark:focus:ring-primary-400'
   }
 
   return (
@@ -298,14 +298,16 @@ export const TextInputPanel = ({
       <div className="flex items-start justify-between gap-4">
         <div>
           <div className="flex items-center gap-2">
-            <h2 className="font-display text-2xl font-semibold text-neutral-900">Input text</h2>
+            <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+              Input text
+            </h2>
             <InlineHelp label="What can I do in the text input panel?">
               Paste or type text that you want to rewrite or translate. Use ⌘/Ctrl + Enter to
               process and ⌘/Ctrl + K to clear. Synapse sanitizes pasted content to remove stray
               control characters automatically.
             </InlineHelp>
           </div>
-          <p className="mt-1 text-sm text-neutral-600">
+          <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
             Paste or type the text you want to process. Maximum 10,000 words.
           </p>
         </div>
@@ -388,7 +390,7 @@ export const TextInputPanel = ({
           onChange={(e) => setText(e.target.value)}
           disabled={isDisabled}
           placeholder="Paste or type your text here..."
-          className={`w-full rounded-xl border bg-white px-4 py-3 text-neutral-900 placeholder-neutral-400 transition focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:text-neutral-500 ${getBorderColor()}`}
+          className={`w-full rounded-xl border bg-white px-4 py-3 text-neutral-900 placeholder-neutral-400 transition focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:text-neutral-500 dark:bg-neutral-900/70 dark:text-neutral-100 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900/40 dark:disabled:text-neutral-500 ${getBorderColor()}`}
           rows={12}
           aria-label="Text input"
           aria-invalid={validation && !validation.isValid ? 'true' : 'false'}
diff --git a/src/lib/motion.tsx b/src/lib/motion.tsx
index fa4b355..7e1662e 100644
--- a/src/lib/motion.tsx
+++ b/src/lib/motion.tsx
@@ -5,8 +5,10 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ButtonHTMLAttributes,
   type CSSProperties,
   type HTMLAttributes,
+  type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from 'react'
 import type { JSX } from 'react'
@@ -20,7 +22,11 @@ type TransitionConfig = {
 type VariantStyles = CSSProperties
 type Variants = Record<string, VariantStyles>
 
-type MotionProps<T> = HTMLAttributes<T> & {
+type BaseElementProps<T extends HTMLElement> = T extends HTMLButtonElement
+  ? ButtonHTMLAttributes<T>
+  : HTMLAttributes<T>
+
+type MotionProps<T extends HTMLElement> = BaseElementProps<T> & {
   initial?: VariantStyles | string
   animate?: VariantStyles | string
   whileHover?: VariantStyles
@@ -97,8 +103,10 @@ const createMotionComponent = <T extends HTMLElement>(element: keyof JSX.Intrins
         } as CSSProperties
       }, [transition?.duration, transition?.delay, transition?.ease])
 
-      const handleMouseEnter: typeof onMouseEnter = (event) => {
-        onMouseEnter?.(event)
+      const handleMouseEnter = (event: ReactMouseEvent<T>) => {
+        if (onMouseEnter) {
+          onMouseEnter(event as never)
+        }
         if (whileHover) {
           setCurrentStyle((prev) => ({
             ...prev,
@@ -107,8 +115,10 @@ const createMotionComponent = <T extends HTMLElement>(element: keyof JSX.Intrins
         }
       }
 
-      const handleMouseLeave: typeof onMouseLeave = (event) => {
-        onMouseLeave?.(event)
+      const handleMouseLeave = (event: ReactMouseEvent<T>) => {
+        if (onMouseLeave) {
+          onMouseLeave(event as never)
+        }
         if (whileHover && resolvedAnimate) {
           setCurrentStyle((prev) => ({
             ...prev,
diff --git a/src/pages/DemosPage.tsx b/src/pages/DemosPage.tsx
index 0ec3aaa..1fccfb4 100644
--- a/src/pages/DemosPage.tsx
+++ b/src/pages/DemosPage.tsx
@@ -68,21 +68,6 @@ export const DemosPage = () => {
           delay={0.05}
         />
 
-        <DemoCard
-          title="Summarizer API"
-          description="Generate concise summaries and key points from long-form content."
-          status="planned"
-          link="/demos/summarizer"
-          features={[
-            'Key points extraction',
-            'TL;DR summaries',
-            'Multiple summary formats',
-            'Adjustable length',
-            'Context preservation',
-          ]}
-          delay={0.1}
-        />
-
         <DemoCard
           title="Language Detector API"
           description="Detect the language of text with confidence scores for multiple possibilities."
@@ -112,21 +97,6 @@ export const DemosPage = () => {
           ]}
           delay={0.2}
         />
-
-        <DemoCard
-          title="Writer & Proofreader APIs"
-          description="Generate content, check grammar, and improve writing quality with AI assistance."
-          status="planned"
-          link="/demos/writer"
-          features={[
-            'Content generation',
-            'Grammar correction',
-            'Tone adjustment',
-            'Writing suggestions',
-            'Style improvements',
-          ]}
-          delay={0.25}
-        />
       </div>
 
       <motion.div
diff --git a/src/pages/workspace/WorkspacePage.tsx b/src/pages/workspace/WorkspacePage.tsx
index f93230e..4fdaf2b 100644
--- a/src/pages/workspace/WorkspacePage.tsx
+++ b/src/pages/workspace/WorkspacePage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 import { TextInputPanel } from '@/components/input/TextInputPanel'
 import { FileUploadDropzone } from '@/components/input/FileUploadDropzone'
 import { FileList } from '@/components/input/FileList'
@@ -28,6 +28,7 @@ type InputMode = 'text' | 'file' | 'url' | 'writing-tools'
 type ViewMode = 'output' | 'comparison'
 
 const DEFAULT_SAMPLE_TEXT = `Chrome's built-in AI can reshape dense product guides into approachable explanations for every reader. Paste a tricky paragraph here and Synapse will reformat it for you.`
+const DEFAULT_TRANSITION = { duration: 0.2, ease: 'easeOut' } as const
 
 export const WorkspacePage = () => {
   const [inputMode, setInputMode] = useState<InputMode>('text')
@@ -366,8 +367,10 @@ export const WorkspacePage = () => {
     setViewMode('output')
     setLastSuccessMeta(null)
     setProcessingStartedAt(null)
+    setProcessingError(null)
     setStreamingResults({})
     setCompletedFormats(new Set())
+    setIsStreaming(false)
     streamingResultsRef.current = {}
     completedFormatsRef.current = new Set()
   }
@@ -623,6 +626,9 @@ export const WorkspacePage = () => {
     setProcessingStartedAt(null)
     setLastSuccessMeta(null)
     setViewMode('output')
+    setIsStreaming(false)
+    streamingResultsRef.current = {}
+    completedFormatsRef.current = new Set()
   }
 
   // Clear extracted text when switching back to file mode
@@ -634,12 +640,26 @@ export const WorkspacePage = () => {
 
   const hasFileInput = fileUpload.files.length > 0
   const hasUrlContent = Boolean(content) || isLoading
+
+  const hasExtractedFileText = fileUpload.files.some((file) => {
+    const extracted = file.result?.text
+    return file.status === 'complete' && typeof extracted === 'string' && extracted.trim().length > 0
+  })
+  const urlTextContent = content?.textContent
+  const hasUrlTextContent =
+    typeof urlTextContent === 'string' && urlTextContent.trim().length > 0
+  const hasProcessableInput =
+    hasTextInput ||
+    extractedText.trim().length > 0 ||
+    hasExtractedFileText ||
+    hasUrlTextContent
+
   const hasGeneratedOutput =
     Boolean(processedResult) ||
     Boolean(processedResults && Object.keys(processedResults).length > 0) ||
     Object.keys(streamingResults).length > 0
   const hasAnyInput =
-    hasTextInput || extractedText.trim().length > 0 || hasFileInput || hasUrlContent
+    hasProcessableInput || hasFileInput || hasUrlContent
 
   const activeStep = hasGeneratedOutput ? 3 : hasAnyInput ? 2 : 1
   const formatSummary =
@@ -848,12 +868,12 @@ export const WorkspacePage = () => {
                           <span>Next: Add content</span>
                         </button>
                       )}
-                      {step.id === 2 && !hasTextInput && (
+                      {step.id === 2 && !hasAnyInput && (
                         <p className="text-xs text-amber-700 dark:text-amber-300">
                           ⚠️ Please add content in Step 1 first
                         </p>
                       )}
-                      {step.id === 2 && hasTextInput && selectedFormats.length === 0 && (
+                      {step.id === 2 && hasAnyInput && selectedFormats.length === 0 && (
                         <button
                           type="button"
                           onClick={() => {
@@ -876,7 +896,7 @@ export const WorkspacePage = () => {
                           <span>Next: Select formats</span>
                         </button>
                       )}
-                      {step.id === 2 && hasTextInput && selectedFormats.length > 0 && (
+                      {step.id === 2 && hasProcessableInput && selectedFormats.length > 0 && (
                         <p className="flex items-center gap-1.5 text-xs text-green-700 dark:text-green-300">
                           <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
                             <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
@@ -884,12 +904,12 @@ export const WorkspacePage = () => {
                           <span>Ready to process!</span>
                         </p>
                       )}
-                      {step.id === 3 && !hasTextInput && (
+                      {step.id === 3 && !hasProcessableInput && (
                         <p className="text-xs text-amber-700 dark:text-amber-300">
                           ⚠️ Complete Steps 1 & 2 first
                         </p>
                       )}
-                      {step.id === 3 && hasTextInput && (
+                      {step.id === 3 && inputMode === 'text' && hasTextInput && (
                         <button
                           type="button"
                           onClick={() => {
@@ -1073,56 +1093,84 @@ export const WorkspacePage = () => {
                   </p>
                 </div>
 
-                <FileUploadDropzone
-                  onFilesSelected={handleFilesSelected}
-                  disabled={fileUpload.isProcessing}
-                  multiple={true}
-                />
+                  <FileUploadDropzone
+                    onFilesSelected={handleFilesSelected}
+                    disabled={fileUpload.isProcessing}
+                    multiple={true}
+                  />
 
-                {fileUpload.files.length > 0 && (
-                  <>
-                    <FileList
-                      files={fileUpload.files}
-                      onRemoveFile={fileUpload.removeFile}
-                      showProgress={true}
-                    />
+                  {fileUpload.files.length > 0 && (
+                    <>
+                      <FileList
+                        files={fileUpload.files}
+                        onRemoveFile={fileUpload.removeFile}
+                        showProgress={true}
+                      />
 
-                    <div className="flex flex-wrap items-center gap-3">
-                      {!fileUpload.files.some((f) => f.status === 'complete') ? (
-                        <button
-                          type="button"
-                          onClick={handleExtractText}
-                          disabled={
-                            fileUpload.isProcessing ||
-                            fileUpload.files.every((f) => f.status !== 'pending')
-                          }
-                          className="flex items-center gap-2 rounded-xl bg-synapse-600 px-6 py-3 text-sm font-semibold text-white shadow-brand transition hover:bg-synapse-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-synapse-600"
-                        >
-                          <svg
-                            className="h-5 w-5"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                            aria-hidden="true"
+                      <div className="flex flex-wrap items-center gap-3">
+                        {!fileUpload.files.some((f) => f.status === 'complete') ? (
+                          <button
+                            type="button"
+                            onClick={handleExtractText}
+                            disabled={
+                              fileUpload.isProcessing ||
+                              fileUpload.files.every((f) => f.status !== 'pending')
+                            }
+                            className="flex items-center gap-2 rounded-xl bg-synapse-600 px-6 py-3 text-sm font-semibold text-white shadow-brand transition hover:bg-synapse-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-synapse-600"
                           >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                            />
-                          </svg>
-                          <span>Extract text</span>
-                        </button>
-                      ) : (
-                        <>
-                          <div className="flex flex-col gap-2">
+                            <svg
+                              className="h-5 w-5"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              aria-hidden="true"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                              />
+                            </svg>
+                            <span>Extract text</span>
+                          </button>
+                        ) : (
+                          <>
+                            <div className="flex flex-col gap-2">
+                              <button
+                                type="button"
+                                onClick={handleProcessExtractedFileContent}
+                                disabled={selectedFormats.length === 0}
+                                className="flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-semibold text-white shadow-brand transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-primary-600"
+                                title={selectedFormats.length === 0 ? 'Please select output formats first' : 'Transform extracted text'}
+                              >
+                                <svg
+                                  className="h-5 w-5"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  aria-hidden="true"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M13 10V3L4 14h7v7l9-11h-7z"
+                                  />
+                                </svg>
+                                <span>Transform with Chrome AI</span>
+                              </button>
+                              {selectedFormats.length === 0 && (
+                                <p className="text-xs text-amber-700 dark:text-amber-300">
+                                  ⚠️ Please select at least one output format above
+                                </p>
+                              )}
+                            </div>
+
                             <button
                               type="button"
-                              onClick={handleProcessExtractedFileContent}
-                              disabled={selectedFormats.length === 0}
-                              className="flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-semibold text-white shadow-brand transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-primary-600"
-                              title={selectedFormats.length === 0 ? 'Please select output formats first' : 'Transform extracted text'}
+                              onClick={handleUseExtractedText}
+                              className="flex items-center gap-2 rounded-xl border border-primary-500 bg-white px-6 py-3 text-sm font-semibold text-primary-600 transition hover:border-primary-600 hover:bg-primary-50 dark:border-primary-400 dark:bg-neutral-900/70 dark:text-primary-200 dark:hover:border-primary-300 dark:hover:bg-primary-500/10"
                             >
                               <svg
                                 className="h-5 w-5"
@@ -1135,71 +1183,22 @@ export const WorkspacePage = () => {
                                   strokeLinecap="round"
                                   strokeLinejoin="round"
                                   strokeWidth={2}
-                                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                                 />
                               </svg>
-                              <span>Transform with Chrome AI</span>
+                              <span>Edit as text</span>
                             </button>
-                            {selectedFormats.length === 0 && (
-                              <p className="text-xs text-amber-700 dark:text-amber-300">
-                                ⚠️ Please select at least one output format above
-                              </p>
-                            )}
-                          </div>
+                          </>
+                        )}
 
-                          <button
-                            type="button"
-                            onClick={handleUseExtractedText}
-                            className="flex items-center gap-2 rounded-xl border border-primary-500 bg-white px-6 py-3 text-sm font-semibold text-primary-600 transition hover:border-primary-600 hover:bg-primary-50"
-                          >
-                            <svg
-                              className="h-5 w-5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              aria-hidden="true"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                              />
-                            </svg>
-                            <span>Edit as text</span>
-                          </button>
-                        </>
-                      )}
-
-                      <button
-                        type="button"
-                        onClick={fileUpload.clearFiles}
-                        disabled={fileUpload.isProcessing}
-                        className="flex items-center gap-2 rounded-xl border border-neutral-300 px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:border-neutral-400 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral-300 disabled:hover:bg-white dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-800"
-                      >
-                        <svg
-                          className="h-5 w-5"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                          aria-hidden="true"
+                        <button
+                          type="button"
+                          onClick={fileUpload.clearFiles}
+                          disabled={fileUpload.isProcessing}
+                          className="flex items-center gap-2 rounded-xl border border-neutral-300 px-4 py-2.5 text-sm font-medium text-neutral-700 transition hover:border-neutral-400 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-neutral-300 disabled:hover:bg-white dark:border-neutral-600 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-800/70"
                         >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                          />
-                        </svg>
-                        <span>Clear all</span>
-                      </button>
-                    </div>
-
-                    {fileUpload.files.some((f) => f.status === 'complete') && (
-                      <div className="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-500/30 dark:bg-green-500/10">
-                        <div className="flex items-start gap-3">
                           <svg
-                            className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-300"
+                            className="h-5 w-5"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -1209,143 +1208,167 @@ export const WorkspacePage = () => {
                               strokeLinecap="round"
                               strokeLinejoin="round"
                               strokeWidth={2}
-                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                             />
                           </svg>
-                          <div className="flex-1">
-                            <p className="font-semibold text-green-900 dark:text-green-100">
-                              Text extraction complete
-                            </p>
-                            <p className="mt-1 text-sm text-green-800 dark:text-green-200">
-                              Extracted {fileUpload.getAllExtractedText().length.toLocaleString()} characters from {fileUpload.files.filter((f) => f.status === 'complete').length} file(s). Click "Use extracted text" to process.
-                            </p>
+                          <span>Clear all</span>
+                        </button>
+                      </div>
+
+                      {fileUpload.files.some((f) => f.status === 'complete') && (
+                        <div className="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-500/30 dark:bg-green-500/10">
+                          <div className="flex items-start gap-3">
+                            <svg
+                              className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-300"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              aria-hidden="true"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                              />
+                            </svg>
+                            <div className="flex-1">
+                              <p className="font-semibold text-green-900 dark:text-green-100">
+                                Text extraction complete
+                              </p>
+                              <p className="mt-1 text-sm text-green-800 dark:text-green-200">
+                                Extracted {fileUpload.getAllExtractedText().length.toLocaleString()} characters from {fileUpload.files.filter((f) => f.status === 'complete').length} file(s). Click "Use extracted text" to process.
+                              </p>
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    )}
-                  </>
-                )}
+                      )}
+                    </>
+                  )}
               </div>
             ) : inputMode === 'writing-tools' ? (
               <div className="grid gap-6">
-                <div>
-                  <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-                    Chrome writing tools (preview)
-                  </h2>
-                  <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
-                    Proofread drafts, adjust tone, or expand copy with Chrome's on-device AI. Pick a template or jump back into the text workspace to run a full transformation.
-                  </p>
-                </div>
-                <div className="grid gap-3 sm:grid-cols-2">
-                  {writingToolHighlights.map((item) => (
-                    <div
-                      key={item.title}
-                      className="rounded-2xl border border-neutral-200 bg-white/80 p-4 text-sm text-neutral-600 transition hover:border-synapse-200 hover:shadow-brand dark:border-neutral-700 dark:bg-neutral-900/60 dark:text-neutral-300"
+                  <div>
+                    <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+                      Chrome writing tools (preview)
+                    </h2>
+                    <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
+                      Proofread drafts, adjust tone, or expand copy with Chrome's on-device AI. Pick a template or jump back into the text workspace to run a full transformation.
+                    </p>
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {writingToolHighlights.map((item) => (
+                      <div
+                        key={item.title}
+                        className="rounded-2xl border border-neutral-200 bg-white/80 p-4 text-sm text-neutral-600 transition hover:-translate-y-0.5 hover:border-synapse-200 hover:shadow-brand dark:border-neutral-700 dark:bg-neutral-900/60 dark:text-neutral-300 dark:hover:border-synapse-400/40 dark:hover:bg-neutral-800/80"
+                      >
+                        <h3 className="mb-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
+                          {item.title}
+                        </h3>
+                        <p>{item.description}</p>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="flex flex-wrap gap-3">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        resetWorkspaceOutputs()
+                        setInputMode('text')
+                        setExtractedText(DEFAULT_SAMPLE_TEXT)
+                        setHasTextInput(true)
+                        setTextInputKey((prev) => prev + 1)
+                      }}
+                      className="inline-flex items-center gap-2 rounded-xl bg-synapse-600 px-4 py-2 text-sm font-semibold text-white shadow-brand transition hover:-translate-y-0.5 hover:bg-synapse-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-synapse-500"
                     >
-                      <h3 className="mb-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
-                        {item.title}
-                      </h3>
-                      <p>{item.description}</p>
-                    </div>
-                  ))}
-                </div>
-                <div className="flex flex-wrap gap-3">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      resetWorkspaceOutputs()
-                      setInputMode('text')
-                      setExtractedText(DEFAULT_SAMPLE_TEXT)
-                      setHasTextInput(true)
-                      setTextInputKey((prev) => prev + 1)
-                    }}
-                    className="inline-flex items-center gap-2 rounded-xl bg-synapse-600 px-4 py-2 text-sm font-semibold text-white shadow-brand transition hover:-translate-y-0.5 hover:bg-synapse-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-synapse-500"
-                  >
-                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M12 6v6l4 2m4-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                      />
-                    </svg>
-                    Try the sample workflow
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      resetWorkspaceOutputs()
-                      setInputMode('text')
-                      setOriginalText('')
-                      setHasTextInput(false)
-                    }}
-                    className="inline-flex items-center gap-2 rounded-xl border border-synapse-200 bg-white/80 px-4 py-2 text-sm font-semibold text-synapse-700 transition hover:-translate-y-0.5 hover:border-synapse-300 hover:bg-synapse-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-synapse-500 dark:border-synapse-500/40 dark:text-synapse-200 dark:hover:border-synapse-400/60 dark:hover:bg-neutral-900/60"
-                  >
-                    Return to workspace editor
-                  </button>
-                </div>
+                      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 6v6l4 2m4-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                      Try the sample workflow
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        resetWorkspaceOutputs()
+                        setInputMode('text')
+                        setOriginalText('')
+                        setHasTextInput(false)
+                      }}
+                      className="inline-flex items-center gap-2 rounded-xl border border-synapse-200 bg-white/80 px-4 py-2 text-sm font-semibold text-synapse-700 transition hover:-translate-y-0.5 hover:border-synapse-300 hover:bg-synapse-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-synapse-500 dark:border-synapse-500/40 dark:text-synapse-200 dark:hover:border-synapse-400/60 dark:hover:bg-neutral-900/60"
+                    >
+                      Return to workspace editor
+                    </button>
+                  </div>
               </div>
             ) : (
               <div className="grid gap-6">
-                <div>
-                  <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-                    Extract from URL
-                  </h2>
-                  <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
-                    Enter a URL to extract and process article content
-                  </p>
-                </div>
-                <URLInput
-                  onSubmit={handleURLExtract}
-                  isLoading={isLoading}
-                  error={extractionError?.message}
-                />
-
-                {content && (
-                  <div className="mt-4">
-                    <ExtractedContent
-                      content={content}
-                      onClear={handleClearExtraction}
-                      onProcessWithAI={handleProcessExtractedURLContent}
-                      onEditAsText={handleUseExtractedURLContent}
-                      processDisabled={selectedFormats.length === 0}
-                      processDisabledReason="Please select at least one output format above"
-                    />
-                  </div>
-                )}
-
-                {!content && (
-                  <div className="mt-4 grid gap-3 border-t border-neutral-200 pt-6 dark:border-neutral-700">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-                      What we extract
+                  <div>
+                    <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+                      Extract from URL
+                    </h2>
+                    <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-300">
+                      Enter a URL to extract and process article content
                     </p>
-                    <ul className="grid gap-2 text-sm text-neutral-700 dark:text-neutral-300">
-                      <li className="flex items-start gap-2">
-                        <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
-                        <span>Main article text without ads or navigation</span>
-                      </li>
-                      <li className="flex items-start gap-2">
-                        <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
-                        <span>Images with alt text and captions</span>
-                      </li>
-                      <li className="flex items-start gap-2">
-                        <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
-                        <span>Article metadata (author, reading time, word count)</span>
-                      </li>
-                      <li className="flex items-start gap-2">
-                        <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
-                        <span>Cleaned and sanitized HTML for security</span>
-                      </li>
-                    </ul>
                   </div>
-                )}
+                  <URLInput
+                    onSubmit={handleURLExtract}
+                    isLoading={isLoading}
+                    error={extractionError?.message}
+                  />
+
+                  {content && (
+                    <div className="mt-4">
+                      <ExtractedContent
+                        content={content}
+                        onClear={handleClearExtraction}
+                        onProcessWithAI={handleProcessExtractedURLContent}
+                        onEditAsText={handleUseExtractedURLContent}
+                        processDisabled={selectedFormats.length === 0}
+                        processDisabledReason="Please select at least one output format above"
+                      />
+                    </div>
+                  )}
+
+                  {!content && (
+                    <div className="mt-4 grid gap-3 border-t border-neutral-200 pt-6 dark:border-neutral-700">
+                      <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+                        What we extract
+                      </p>
+                      <ul className="grid gap-2 text-sm text-neutral-700 dark:text-neutral-300">
+                        <li className="flex items-start gap-2">
+                          <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
+                          <span>Main article text without ads or navigation</span>
+                        </li>
+                        <li className="flex items-start gap-2">
+                          <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
+                          <span>Images with alt text and captions</span>
+                        </li>
+                        <li className="flex items-start gap-2">
+                          <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
+                          <span>Article metadata (author, reading time, word count)</span>
+                        </li>
+                        <li className="flex items-start gap-2">
+                          <span className="mt-1 h-1.5 w-1.5 rounded-full bg-synapse-500 dark:bg-synapse-300" aria-hidden />
+                          <span>Cleaned and sanitized HTML for security</span>
+                        </li>
+                      </ul>
+                    </div>
+                  )}
               </div>
             )}
           </div>
         </section>
 
         {/* Output panel */}
-        <section className="rounded-3xl border border-neutral-200 bg-white/90 p-8 shadow-soft transition dark:border-neutral-700 dark:bg-neutral-900/70">
+        <motion.section
+          className="rounded-3xl border border-neutral-200 bg-white/90 p-8 shadow-soft transition dark:border-neutral-700 dark:bg-neutral-900/70"
+          transition={DEFAULT_TRANSITION}
+        >
           <div className="grid gap-6">
             <div className="flex items-start justify-between gap-4">
               <div>
@@ -1393,58 +1416,54 @@ export const WorkspacePage = () => {
               )}
             </div>
 
-            {processingError ? (
-              <ProcessingState status="error" title="Processing failed" description={processingError.message} />
-            ) : shouldShowProcessingState ? (
-              <div className="space-y-4">
-                <ProcessingState
-                  status={hasStreamingContent || isStreaming ? 'processing' : 'preparing'}
-                  description={
-                    currentlyProcessingLabel
-                      ? `Currently generating ${currentlyProcessingLabel}.`
-                      : 'Chrome is reshaping your text with the selected formats.'
-                  }
-                  progress={selectedFormats.length > 0 ? processingProgress : undefined}
-                  showProgress={selectedFormats.length === 1}
-                  operationProgress={selectedFormats.length === 1 ? operationProgress : null}
-                  showStage={selectedFormats.length === 1}
-                  showTimeRemaining={selectedFormats.length === 1}
-                >
-                  {selectedFormats.length > 1 && (
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                      {completedFormats.size} of {selectedFormats.length} formats finished.
-                    </p>
+            <div className="space-y-4">
+              {processingError ? (
+                <ProcessingState status="error" title="Processing failed" description={processingError.message} />
+              ) : shouldShowProcessingState ? (
+                <>
+                  <ProcessingState
+                    status={hasStreamingContent || isStreaming ? 'processing' : 'preparing'}
+                    description={
+                      currentlyProcessingLabel
+                        ? `Currently generating ${currentlyProcessingLabel}.`
+                        : 'Chrome is reshaping your text with the selected formats.'
+                    }
+                    progress={selectedFormats.length > 0 ? processingProgress : undefined}
+                    showProgress={selectedFormats.length === 1}
+                    operationProgress={selectedFormats.length === 1 ? operationProgress : null}
+                    showStage={selectedFormats.length === 1}
+                    showTimeRemaining={selectedFormats.length === 1}
+                  >
+                    {selectedFormats.length > 1 && (
+                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        {completedFormats.size} of {selectedFormats.length} formats finished.
+                      </p>
+                    )}
+                  </ProcessingState>
+
+                  {selectedFormats.length > 1 && multiFormatProgressMap.size > 0 && (
+                    <MultiFormatProgress
+                      formats={multiFormatProgressMap}
+                      aggregate={aggregateProgress}
+                      variant="compact"
+                      showPartialResults={false}
+                    />
                   )}
-                </ProcessingState>
-
-                {/* Show multi-format progress when processing multiple formats */}
-                {selectedFormats.length > 1 && multiFormatProgressMap.size > 0 && (
-                  <MultiFormatProgress
-                    formats={multiFormatProgressMap}
-                    aggregate={aggregateProgress}
-                    variant="compact"
-                    showPartialResults={false}
-                  />
-                )}
-              </div>
-            ) : null}
-
-            {!processingError && !shouldShowProcessingState && lastSuccessMeta && (
-              <SuccessMessage
-                icon={
-                  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                }
-                message="Content transformed successfully!"
-                metrics={lastSuccessMeta}
-              />
-            )}
+                </>
+              ) : !processingError && !shouldShowProcessingState && lastSuccessMeta ? (
+                <SuccessMessage
+                  icon={
+                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  }
+                  message="Content transformed successfully!"
+                  metrics={lastSuccessMeta}
+                />
+              ) : null}
+            </div>
 
             <div className="transition-opacity duration-300 ease-in-out">
-              {(() => {
-                return null
-              })()}
               {hasStreamingContent ? (
                 <FormattedOutput
                   results={streamingResults}
@@ -1530,11 +1549,11 @@ export const WorkspacePage = () => {
               )}
             </div>
           </div>
-        </section>
+        </motion.section>
       </div>
 
       {/* History Section with Toggle */}
-      <div className="space-y-4">
+      <motion.div className="space-y-4" transition={DEFAULT_TRANSITION}>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <h2 className="font-display text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
@@ -1570,19 +1589,32 @@ export const WorkspacePage = () => {
           </button>
         </div>
 
-        {historyExpanded && (
-          <ProcessingHistoryPanel
-            entries={historyEntries}
-            onToggleFavorite={toggleHistoryFavorite}
-            onClearHistory={clearHistoryEntries}
-            onExportHistory={handleHistoryExport}
-            onRestoreEntry={handleHistoryRestore}
-          />
-        )}
-      </div>
+        <AnimatePresence>
+          {historyExpanded && (
+            <motion.div
+              key="history-panel"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              transition={DEFAULT_TRANSITION}
+              className="overflow-hidden"
+            >
+              <ProcessingHistoryPanel
+                entries={historyEntries}
+                onToggleFavorite={toggleHistoryFavorite}
+                onClearHistory={clearHistoryEntries}
+                onExportHistory={handleHistoryExport}
+                onRestoreEntry={handleHistoryRestore}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
 
       {/* Info section */}
-      <section className="rounded-2xl border border-dashed border-synapse-200 bg-synapse-50/70 p-6 dark:border-synapse-500/30 dark:bg-neutral-900/50">
+      <motion.section
+        className="rounded-2xl border border-dashed border-synapse-200 bg-synapse-50/70 p-6 dark:border-synapse-500/30 dark:bg-neutral-900/50"
+        transition={DEFAULT_TRANSITION}
+      >
         <div className="flex items-start gap-4">
           <div className="rounded-lg bg-synapse-100 p-2 dark:bg-synapse-500/15">
             <svg
@@ -1601,43 +1633,58 @@ export const WorkspacePage = () => {
             </svg>
           </div>
           <div className="flex-1">
-            <h3 className="font-semibold text-neutral-900">
-              {inputMode === 'text' ? 'Keyboard shortcuts' : inputMode === 'file' ? 'Supported formats' : 'Note about CORS'}
-            </h3>
-            {inputMode === 'text' ? (
-              <div className="mt-2 grid gap-2 text-sm text-neutral-700 dark:text-neutral-300 sm:grid-cols-2">
-                <div className="flex items-center gap-2">
-                  <kbd className="rounded bg-white px-2 py-1 font-mono text-xs shadow-sm">
-                    ⌘ + Enter
-                  </kbd>
-                  <span>Process text</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <kbd className="rounded bg-white px-2 py-1 font-mono text-xs shadow-sm">
-                    ⌘ + K
-                  </kbd>
-                  <span>Clear input</span>
-                </div>
-              </div>
-            ) : inputMode === 'file' ? (
-              <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
-                Supported: TXT, PDF, DOCX files up to 10MB. Files are processed securely with content validation and automatic retry for failed extractions.
-              </p>
-            ) : inputMode === 'writing-tools' ? (
-              <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
-                Writing tools seed the text workspace with guided prompts so you can run a full Chrome AI transformation.
-                Load the sample workflow or return to the editor to start with your own content.
-              </p>
-            ) : (
-              <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
-                Some websites may block cross-origin requests due to CORS policies. If you
-                encounter errors, you can use a CORS proxy for development or install a browser
-                extension that enables CORS.
-              </p>
-            )}
+            <AnimatePresence>
+              <motion.div
+                key={inputMode}
+                initial={{ opacity: 0, transform: 'translateY(8px)' }}
+                animate={{ opacity: 1, transform: 'translateY(0)' }}
+                transition={DEFAULT_TRANSITION}
+              >
+                <h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
+                  {inputMode === 'text'
+                    ? 'Keyboard shortcuts'
+                    : inputMode === 'file'
+                      ? 'Supported formats'
+                      : inputMode === 'writing-tools'
+                        ? 'Writing tools tips'
+                        : 'Note about CORS'}
+                </h3>
+                {inputMode === 'text' ? (
+                  <div className="mt-2 grid gap-2 text-sm text-neutral-700 dark:text-neutral-300 sm:grid-cols-2">
+                    <div className="flex items-center gap-2">
+                      <kbd className="rounded bg-white px-2 py-1 font-mono text-xs shadow-sm dark:bg-neutral-900 dark:text-neutral-100">
+                        ⌘ + Enter
+                      </kbd>
+                      <span>Process text</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <kbd className="rounded bg-white px-2 py-1 font-mono text-xs shadow-sm dark:bg-neutral-900 dark:text-neutral-100">
+                        ⌘ + K
+                      </kbd>
+                      <span>Clear input</span>
+                    </div>
+                  </div>
+                ) : inputMode === 'file' ? (
+                  <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
+                    Supported: TXT, PDF, DOCX files up to 10MB. Files are processed securely with content validation
+                    and automatic retry for failed extractions.
+                  </p>
+                ) : inputMode === 'writing-tools' ? (
+                  <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
+                    Writing tools seed the text workspace with guided prompts so you can run a full Chrome AI transformation.
+                    Load the sample workflow or return to the editor to start with your own content.
+                  </p>
+                ) : (
+                  <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">
+                    Some websites may block cross-origin requests due to CORS policies. If you encounter errors, you can
+                    use a CORS proxy for development or install a browser extension that enables CORS.
+                  </p>
+                )}
+              </motion.div>
+            </AnimatePresence>
           </div>
         </div>
-      </section>
+      </motion.section>
     </div>
   )
 }