feat: add TerminalAccordion component

app/playground/page.tsx

@@ -1,5 +1,5 @@
 import { TerminalApp } from '@/components/terminal-app'
-import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher } from '@/components/terminal'
+import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher, TerminalAccordion } from '@/components/terminal'
 import { TerminalProgress } from '@/components/terminal-progress'
 import { LogDemo } from './log-demo'
 import { PromptDemo } from './prompt-demo'
@@ -161,6 +161,24 @@ export default function PlaygroundPage() {
         </Terminal>
       </section>
 
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
+          TerminalAccordion
+        </h2>
+        <Terminal title="accordion-demo.sh">
+          <TerminalCommand>npm run test</TerminalCommand>
+          <TerminalOutput type="error">Tests failed: 1 failed, 42 passed</TerminalOutput>
+          <TerminalAccordion title="View Error Stack Trace" className="mt-2">
+            <TerminalOutput type="normal">
+{`Error: Expected received value to equal expected value
+    at Object.<anonymous> (src/utils.test.ts:42:15)
+    at runMicrotasks (<anonymous>)
+    at processTicksAndRejections (node:internal/process/task_queues:96:5)`}
+            </TerminalOutput>
+          </TerminalAccordion>
+        </Terminal>
+      </section>
+
       <section className="flex flex-col gap-2">
         <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
           Typing Animation

components/terminal-accordion.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+
+export interface TerminalAccordionProps {
+  /** The title of the accordion header */
+  title: string | ReactNode
+  /** The content to display when expanded */
+  children: ReactNode
+  /** Whether the accordion is expanded by default (default: false) */
+  defaultExpanded?: boolean
+  /** Additional classes applied to the root element */
+  className?: string
+}
+
+/**
+ * An expandable section for long content or details.
+ * 
+ * @param title - The header text or element
+ * @param children - The content inside the accordion
+ * @param defaultExpanded - Initial expanded state
+ * @param className - Additional classes
+ * 
+ * @example
+ * ```tsx
+ * <TerminalAccordion title="Show Details">
+ *   <TerminalOutput>Detailed logs...</TerminalOutput>
+ * </TerminalAccordion>
+ * ```
+ */
+export function TerminalAccordion({
+  title,
+  children,
+  defaultExpanded = false,
+  className = '',
+}: TerminalAccordionProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+
+  return (
+    <div className={`flex flex-col font-mono text-sm ${className}`.trim()}>
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
+        className="flex items-center gap-2 hover:bg-[rgba(255,255,255,0.04)] px-1 py-0.5 -mx-1 rounded text-left transition-colors text-[var(--term-fg)] focus:outline-none focus:ring-1 focus:ring-[var(--term-blue)]/50"
+      >
+        <span className="text-[var(--term-blue)] w-3 flex justify-center shrink-0">
+          {expanded ? '▼' : '▶'}
+        </span>
+        <span className="flex-1">{title}</span>
+      </button>
+      {expanded && (
+        <div className="pl-4 mt-1 border-l-2 border-[rgba(255,255,255,0.1)] ml-[5px] py-1 text-[var(--term-fg-dim)]">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

components/terminal.tsx

@@ -264,3 +264,4 @@ export { TerminalAutocomplete, useAutocomplete, COMMON_COMMANDS, COMMON_FLAGS, f
 export { TerminalGhosttyTheme, GhosttyThemePicker } from './terminal-ghostty'
 export { ThemeSwitcher } from './theme-switcher'
 export { TerminalBadge } from './terminal-badge'
+export { TerminalAccordion } from './terminal-accordion'