diff --git a/app/playground/filter-demo.tsx b/app/playground/filter-demo.tsx
new file mode 100644
index 0000000..a270f0a
--- /dev/null
+++ b/app/playground/filter-demo.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import {
+  Terminal,
+  TerminalCommand,
+  TerminalLog,
+  type LogEntry,
+} from '@/components/terminal'
+import {
+  TerminalFilterBar,
+  emptyFilterState,
+  filterEntries,
+  type FilterBarState,
+} from '@/components/terminal-filter-bar'
+
+const ALL_ENTRIES: LogEntry[] = [
+  { id:  '1', level: 'info',    timestamp: '10:23:44', source: 'server',  message: 'Application starting up...' },
+  { id:  '2', level: 'info',    timestamp: '10:23:45', source: 'server',  message: 'Listening on :3000' },
+  { id:  '3', level: 'debug',   timestamp: '10:23:45', source: 'cache',   message: 'HIT packages/react@19.1.0' },
+  { id:  '4', level: 'warn',    timestamp: '10:23:46', source: 'cache',   message: 'MISS @openknots/terminal-ui — fetching from registry' },
+  { id:  '5', level: 'info',    timestamp: '10:23:47', source: 'build',   message: 'Compiling 42 modules...' },
+  { id:  '6', level: 'debug',   timestamp: '10:23:47', source: 'build',   message: 'Resolved tsconfig paths in 4ms' },
+  { id:  '7', level: 'success', timestamp: '10:23:48', source: 'build',   message: 'Compiled in 1.2s — 0 errors' },
+  { id:  '8', level: 'info',    timestamp: '10:23:49', source: 'test',    message: 'Running 24 unit tests...' },
+  { id:  '9', level: 'error',   timestamp: '10:23:50', source: 'test',    message: 'FAIL src/utils.test.ts — 1 snapshot mismatch' },
+  { id: '10', level: 'info',    timestamp: '10:23:50', source: 'test',    message: 'Retrying with --updateSnapshot...' },
+  { id: '11', level: 'success', timestamp: '10:23:51', source: 'test',    message: '24 / 24 tests passed — coverage 94%' },
+  { id: '12', level: 'info',    timestamp: '10:23:52', source: 'deploy',  message: 'Uploading artifacts to CDN...' },
+  { id: '13', level: 'warn',    timestamp: '10:23:52', source: 'deploy',  message: 'Edge cache warm-up taking longer than 5s' },
+  { id: '14', level: 'success', timestamp: '10:23:53', source: 'deploy',  message: 'Published to production — https://example.app' },
+]
+
+const SOURCES = [...new Set(ALL_ENTRIES.map((e) => e.source!))]
+
+export function FilterBarDemo() {
+  const [filter, setFilter] = useState<FilterBarState>(emptyFilterState)
+
+  const visible = useMemo(() => filterEntries(ALL_ENTRIES, filter), [filter])
+
+  return (
+    <div className="flex flex-col gap-2">
+      <TerminalFilterBar
+        state={filter}
+        onChange={setFilter}
+        sources={SOURCES}
+      />
+      <Terminal title="pipeline.log">
+        <TerminalCommand>pnpm run ci</TerminalCommand>
+        <TerminalLog entries={visible} maxLines={20} />
+      </Terminal>
+      <p className="font-mono text-xs text-(--term-fg-dim)">
+        {visible.length} / {ALL_ENTRIES.length} entries shown
+      </p>
+    </div>
+  )
+}
diff --git a/app/playground/group-demo.tsx b/app/playground/group-demo.tsx
new file mode 100644
index 0000000..ecd6164
--- /dev/null
+++ b/app/playground/group-demo.tsx
@@ -0,0 +1,201 @@
+'use client'
+
+import { useState } from 'react'
+import { Terminal, TerminalCommand, TerminalGroup, TerminalLogLine } from '@/components/terminal'
+
+// ── Demo ──────────────────────────────────────────────────────────────────────
+
+/**
+ * Playground demo for TerminalGroup.
+ *
+ * Shows several groups in a single terminal window:
+ * - A success group (collapsed by default) — install step
+ * - A warn group (open) — test step with a warning
+ * - An error group (open) — build step with failures
+ * - An info group (open) — controlled open/close via external button
+ */
+export function GroupDemo() {
+  // Controlled group example
+  const [deployOpen, setDeployOpen] = useState(true)
+
+  return (
+    <Terminal title="ci-pipeline.log">
+      <TerminalCommand>pnpm run ci</TerminalCommand>
+
+      {/* ── Install step: collapsed by default ── */}
+      <div className="px-3 pt-2">
+        <TerminalGroup
+          title="install"
+          summary="42 packages resolved from cache"
+          countLabel="0.8s"
+          variant="success"
+          defaultOpen={false}
+        >
+          <TerminalLogLine
+            level="debug"
+            timestamp="10:23:44"
+            source="npm"
+            message="Resolving dependency tree…"
+          />
+          <TerminalLogLine
+            level="debug"
+            timestamp="10:23:44"
+            source="npm"
+            message="HIT react@19.2.0"
+          />
+          <TerminalLogLine
+            level="debug"
+            timestamp="10:23:44"
+            source="npm"
+            message="HIT typescript@5.8.2"
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:44"
+            source="npm"
+            message="42 packages installed from cache"
+          />
+        </TerminalGroup>
+      </div>
+
+      {/* ── Lint step: info, collapsed by default ── */}
+      <div className="px-3 pt-1">
+        <TerminalGroup
+          title="lint"
+          summary="ruff check — no issues"
+          countLabel="0.2s"
+          variant="info"
+          defaultOpen={false}
+        >
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:45"
+            source="ruff"
+            message="Checking 38 files…"
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:45"
+            source="ruff"
+            message="All checks passed"
+          />
+        </TerminalGroup>
+      </div>
+
+      {/* ── Test step: warn, open ── */}
+      <div className="px-3 pt-1">
+        <TerminalGroup
+          title="test"
+          summary="23/24 passed · 1 snapshot mismatch"
+          countLabel="4.1s"
+          variant="warn"
+          defaultOpen
+        >
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:46"
+            source="jest"
+            message="Running 24 test suites…"
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:49"
+            source="jest"
+            message="23 tests passed"
+          />
+          <TerminalLogLine
+            level="warn"
+            timestamp="10:23:49"
+            source="jest"
+            message="FAIL src/utils.test.ts — 1 snapshot out of date"
+          />
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:49"
+            source="jest"
+            message="Run with --updateSnapshot to fix"
+          />
+        </TerminalGroup>
+      </div>
+
+      {/* ── Build step: error, open ── */}
+      <div className="px-3 pt-1">
+        <TerminalGroup
+          title="build"
+          summary="TypeScript compilation failed"
+          countLabel="3 errors"
+          variant="error"
+          defaultOpen
+        >
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:50"
+            source="tsc"
+            message="Compiling 42 modules…"
+          />
+          <TerminalLogLine
+            level="error"
+            timestamp="10:23:51"
+            source="tsc"
+            message="src/api/handler.ts:14 — Property 'data' does not exist on type 'Response'"
+          />
+          <TerminalLogLine
+            level="error"
+            timestamp="10:23:51"
+            source="tsc"
+            message="src/api/handler.ts:22 — Argument of type 'string' is not assignable to 'number'"
+          />
+          <TerminalLogLine
+            level="error"
+            timestamp="10:23:51"
+            source="tsc"
+            message="src/utils/retry.ts:8 — Cannot find module '../types' or its type declarations"
+          />
+        </TerminalGroup>
+      </div>
+
+      {/* ── Deploy step: controlled ── */}
+      <div className="px-3 pt-1 pb-3">
+        <TerminalGroup
+          title="deploy"
+          summary="Production rollout"
+          countLabel="2.3s"
+          variant="info"
+          open={deployOpen}
+          onOpenChange={setDeployOpen}
+        >
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:52"
+            source="k8s"
+            message="Rolling update → deployment/api-server"
+          />
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:53"
+            source="k8s"
+            message="4/4 pods healthy"
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:54"
+            source="k8s"
+            message="Deployment complete. Live at https://api.example.com"
+          />
+        </TerminalGroup>
+
+        {/* External controlled toggle */}
+        <div className="mt-2 pl-1">
+          <button
+            type="button"
+            onClick={() => setDeployOpen((v) => !v)}
+            className="font-mono text-xs text-(--term-fg-dim) underline underline-offset-2
+              hover:text-(--term-fg) transition-colors"
+          >
+            {deployOpen ? '▲ collapse deploy (controlled)' : '▼ expand deploy (controlled)'}
+          </button>
+        </div>
+      </div>
+    </Terminal>
+  )
+}
diff --git a/app/playground/log-demo.tsx b/app/playground/log-demo.tsx
index 8441c4c..d17002d 100644
--- a/app/playground/log-demo.tsx
+++ b/app/playground/log-demo.tsx
@@ -1,7 +1,9 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Terminal, TerminalCommand, TerminalLog } from '@/components/terminal'
+import { Terminal, TerminalCommand, TerminalLog, type LogEntry } from '@/components/terminal'
+
+// ── String-mode demo (unchanged) ─────────────────────────────────────────────
 
 const STREAM_LINES = [
   '[info] Connecting to build worker...',
@@ -38,3 +40,60 @@ export function LogDemo() {
     </Terminal>
   )
 }
+
+// ── Structured-mode demo ─────────────────────────────────────────────────────
+
+const STREAM_ENTRIES: LogEntry[] = [
+  { level: 'info', timestamp: '10:23:45', source: 'server', message: 'Worker connected' },
+  { level: 'debug', timestamp: '10:23:46', source: 'cache', message: 'HIT packages/react@19.1.0' },
+  { level: 'warn', timestamp: '10:23:47', source: 'cache', message: 'MISS @openknots/terminal-ui' },
+  { level: 'info', timestamp: '10:23:48', source: 'build', message: 'Compiling 42 modules...' },
+  { level: 'success', timestamp: '10:23:49', source: 'build', message: 'Compiled in 1.2s' },
+  { level: 'info', timestamp: '10:23:50', source: 'test', message: 'Running 24 unit tests...' },
+  {
+    level: 'error',
+    timestamp: '10:23:51',
+    source: 'test',
+    message: 'FAIL src/utils.test.ts — 1 snapshot mismatch',
+  },
+  {
+    level: 'info',
+    timestamp: '10:23:52',
+    source: 'test',
+    message: 'Retrying with --updateSnapshot...',
+  },
+  { level: 'success', timestamp: '10:23:53', source: 'test', message: '24 / 24 tests passed' },
+  { level: 'success', timestamp: '10:23:54', source: 'deploy', message: 'Published to production' },
+]
+
+export function StructuredLogDemo() {
+  const [entries, setEntries] = useState<LogEntry[]>([
+    {
+      id: 'boot-0',
+      level: 'info',
+      timestamp: '10:23:44',
+      source: 'server',
+      message: 'Starting pipeline...',
+    },
+  ])
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setEntries((current) => {
+        const next = STREAM_ENTRIES[current.length % STREAM_ENTRIES.length]
+        return [...current, { ...next, id: String(current.length) }]
+      })
+    }, 900)
+
+    return () => {
+      window.clearInterval(timer)
+    }
+  }, [])
+
+  return (
+    <Terminal title="pipeline.log">
+      <TerminalCommand>pnpm run ci</TerminalCommand>
+      <TerminalLog entries={entries} maxLines={8} autoScroll />
+    </Terminal>
+  )
+}
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index f6a7bde..9b6ea1d 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,10 +1,25 @@
 import { TerminalApp } from '@/components/terminal-app'
-import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher } from '@/components/terminal'
+import {
+  Terminal,
+  TerminalCommand,
+  TerminalDiff,
+  TerminalOutput,
+  TerminalSpinner,
+  TerminalBadge,
+  TerminalMarker,
+  TerminalLogLine,
+  ThemeSwitcher,
+} from '@/components/terminal'
 import { TerminalProgress } from '@/components/terminal-progress'
-import { LogDemo } from './log-demo'
+import { LogDemo, StructuredLogDemo } from './log-demo'
+import { FilterBarDemo } from './filter-demo'
+import { TerminalJsonLine } from '@/components/terminal'
 import { PromptDemo } from './prompt-demo'
+import { GroupDemo } from './group-demo'
+import { SearchDemo } from './search-demo'
 import { TreeDemo } from './tree-demo'
 import { TreeKeyboardDemo } from './tree-keyboard-demo'
+import { StackTraceDemo } from './stack-trace-demo'
 
 export const metadata = {
   title: 'Playground',
@@ -14,25 +29,19 @@ export default function PlaygroundPage() {
   return (
     <main className="flex flex-col gap-8 p-6 min-h-screen">
       <section className="flex flex-wrap items-center justify-between gap-3">
-        <h1 className="text-xl font-semibold font-mono text-[var(--term-fg)]">
-          Playground
-        </h1>
+        <h1 className="text-xl font-semibold font-mono text-[var(--term-fg)]">Playground</h1>
         <ThemeSwitcher />
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          Terminal App
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">Terminal App</h2>
         <div className="h-[480px]">
           <TerminalApp className="h-full" />
         </div>
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalPrompt
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalPrompt</h2>
         <p className="text-sm text-[var(--term-fg-dim)] font-mono">
           Interactive command input with history navigation (up / down).
         </p>
@@ -40,9 +49,7 @@ export default function PlaygroundPage() {
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalProgress
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalProgress</h2>
         <Terminal title="progress-demo.sh">
           <TerminalCommand>pnpm install</TerminalCommand>
           <TerminalProgress label="Resolving packages..." percent={25} variant="yellow" />
@@ -53,9 +60,7 @@ export default function PlaygroundPage() {
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalSpinner
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalSpinner</h2>
         <Terminal title="spinner-demo.sh">
           <TerminalCommand>pnpm run build</TerminalCommand>
           <TerminalSpinner text="Compiling components..." />
@@ -64,7 +69,7 @@ export default function PlaygroundPage() {
 
       <section className="flex flex-col gap-2">
         <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalLog
+          TerminalLog — string mode
         </h2>
         <p className="text-sm text-[var(--term-fg-dim)] font-mono">
           Simulated streaming logs with capped history and auto-scroll.
@@ -74,19 +79,28 @@ export default function PlaygroundPage() {
 
       <section className="flex flex-col gap-2">
         <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          Copy Button
+          TerminalLog — structured mode
         </h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Structured entries with level badges, timestamps, and source labels via{' '}
+          <code>entries</code> prop.
+        </p>
+        <StructuredLogDemo />
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">Copy Button</h2>
         <Terminal title="copy-demo.sh">
           <TerminalCommand>pnpm run build</TerminalCommand>
           <TerminalOutput type="success">Compiled successfully in 1.2s</TerminalOutput>
-          <TerminalOutput type="info">Click the copy icon in the header to copy this output.</TerminalOutput>
+          <TerminalOutput type="info">
+            Click the copy icon in the header to copy this output.
+          </TerminalOutput>
         </Terminal>
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalDiff
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalDiff</h2>
         <Terminal title="diff-demo.sh">
           <TerminalCommand>git diff -- src/config.ts</TerminalCommand>
           <TerminalOutput type="info">Unified</TerminalOutput>
@@ -124,9 +138,7 @@ export default function PlaygroundPage() {
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalTree
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalTree</h2>
         <p className="text-sm text-[var(--term-fg-dim)] font-mono">
           Expandable tree with custom icon, label, and row render props.
         </p>
@@ -138,16 +150,14 @@ export default function PlaygroundPage() {
           Tree Keyboard Navigation
         </h2>
         <p className="text-sm text-[var(--term-fg-dim)] font-mono">
-          Arrow keys to navigate, Enter/Space to toggle, ArrowRight to expand/enter, ArrowLeft to collapse/parent.
+          Arrow keys to navigate, Enter/Space to toggle, ArrowRight to expand/enter, ArrowLeft to
+          collapse/parent.
         </p>
         <TreeKeyboardDemo />
       </section>
 
-
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          TerminalBadge
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalBadge</h2>
         <Terminal title="badge-demo.sh">
           <TerminalCommand>pnpm run release</TerminalCommand>
           <TerminalOutput type="info">
@@ -162,9 +172,101 @@ export default function PlaygroundPage() {
       </section>
 
       <section className="flex flex-col gap-2">
-        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
-          Typing Animation
-        </h2>
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalMarker</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Phase separators for visual boundaries in terminal feeds.
+        </p>
+        <Terminal title="deploy-pipeline.sh">
+          <TerminalCommand>npm run deploy:full</TerminalCommand>
+          <TerminalMarker label="BUILD" timestamp="10:23:45" variant="info" />
+          <TerminalOutput type="success">✓ Compiled 42 modules</TerminalOutput>
+          <TerminalOutput type="normal"> dist/main.js 124 KB</TerminalOutput>
+          <TerminalMarker label="TEST" timestamp="10:24:01" variant="success" />
+          <TerminalOutput type="success">✓ 24 tests passed</TerminalOutput>
+          <TerminalOutput type="normal"> coverage: 94%</TerminalOutput>
+          <TerminalMarker label="DEPLOY" timestamp="10:24:30" variant="warning" />
+          <TerminalOutput type="info">→ Deploying to production...</TerminalOutput>
+          <TerminalOutput type="success">✓ Deployed successfully</TerminalOutput>
+          <TerminalMarker label="DONE" timestamp="10:24:45" variant="success" />
+        </Terminal>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalLogLine</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Structured log row primitive with level badge, timestamp, source, and message.
+        </p>
+        <Terminal title="app.log">
+          <TerminalCommand>pnpm run start</TerminalCommand>
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:44"
+            source="server"
+            message="Starting application..."
+          />
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:45"
+            source="server"
+            message="Listening on :3000"
+          />
+          <TerminalLogLine
+            level="debug"
+            timestamp="10:23:46"
+            source="worker"
+            message="Spawned 4 worker threads"
+          />
+          <TerminalLogLine
+            level="warn"
+            timestamp="10:23:47"
+            source="auth"
+            message="Token expiring in 5 min for user #42"
+          />
+          <TerminalLogLine
+            level="error"
+            timestamp="10:23:48"
+            source="db"
+            message="Connection refused: ECONNREFUSED 127.0.0.1:5432"
+          />
+          <TerminalLogLine
+            level="info"
+            timestamp="10:23:48"
+            source="db"
+            message="Retrying connection (attempt 1/3)..."
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:49"
+            source="db"
+            message="Connected to postgres in 84ms"
+          />
+          <TerminalLogLine
+            level="success"
+            timestamp="10:23:50"
+            source="build"
+            message="Compiled 42 modules in 1.2s"
+          />
+        </Terminal>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalGroup</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Collapsible command/output sections with header, summary, count pill, and variant accent.
+        </p>
+        <GroupDemo />
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalSearch</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          In-feed search with next / prev navigation (Enter / Shift+Enter) and match highlighting.
+        </p>
+        <SearchDemo />
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">Typing Animation</h2>
         <Terminal title="deploy-log.sh">
           <TerminalCommand>npm run deploy</TerminalCommand>
           <TerminalOutput type="info" animate delay={28}>
@@ -175,6 +277,77 @@ export default function PlaygroundPage() {
           </TerminalOutput>
         </Terminal>
       </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
+          TerminalStackTrace
+        </h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Foldable stack trace viewer with per-frame collapse, node_modules filtering, and
+          keyboard-accessible toggles.
+        </p>
+        <StackTraceDemo />
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalFilterBar</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Controlled filter bar — level toggles, text search, and source toggles. Pair with{' '}
+          <code>filterEntries()</code> to apply.
+        </p>
+        <FilterBarDemo />
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">TerminalJsonLine</h2>
+        <p className="text-sm text-[var(--term-fg-dim)] font-mono">
+          Collapsible JSON payload renderer — click to expand, handles invalid JSON safely.
+        </p>
+        <Terminal title="events.log">
+          <TerminalCommand>tail -f logs/events.log</TerminalCommand>
+          <TerminalJsonLine
+            label="deploy"
+            payload={{
+              type: 'deploy',
+              status: 'success',
+              durationMs: 1240,
+              region: 'us-east-1',
+              sha: 'a3f9c12',
+            }}
+          />
+          <TerminalJsonLine
+            label="request"
+            payload={{
+              method: 'POST',
+              path: '/api/publish',
+              statusCode: 200,
+              latencyMs: 84,
+              userId: 'u_8f3a',
+            }}
+          />
+          <TerminalJsonLine
+            label="error"
+            payload={{
+              code: 'ECONNREFUSED',
+              host: '127.0.0.1',
+              port: 5432,
+              retries: 3,
+              fatal: false,
+            }}
+            defaultExpanded
+          />
+          <TerminalJsonLine label="response" payload="not { valid ] json at all" />
+          <TerminalJsonLine
+            label="config"
+            payload={{
+              version: '2.1.0',
+              features: { darkMode: true, telemetry: false, maxConnections: 10 },
+              plugins: ['auth', 'cache', 'ratelimit'],
+              endpoints: { api: 'https://api.example.com', cdn: 'https://cdn.example.com' },
+            }}
+          />
+        </Terminal>
+      </section>
     </main>
   )
 }
diff --git a/app/playground/search-demo.tsx b/app/playground/search-demo.tsx
new file mode 100644
index 0000000..2f24278
--- /dev/null
+++ b/app/playground/search-demo.tsx
@@ -0,0 +1,243 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+import {
+  Terminal,
+  TerminalCommand,
+  TerminalLogLine,
+  TerminalSearch,
+  useTerminalSearch,
+  type LogEntry,
+} from '@/components/terminal'
+import { TerminalLog } from '@/components/terminal-log'
+
+// ── Static log fixture ────────────────────────────────────────────────────────
+
+const SEARCH_ENTRIES: LogEntry[] = [
+  {
+    id: '0',
+    level: 'info',
+    timestamp: '12:00:01',
+    source: 'server',
+    message: 'HTTP server listening on :3000',
+  },
+  {
+    id: '1',
+    level: 'info',
+    timestamp: '12:00:02',
+    source: 'db',
+    message: 'PostgreSQL connection pool ready (max: 10)',
+  },
+  {
+    id: '2',
+    level: 'debug',
+    timestamp: '12:00:03',
+    source: 'cache',
+    message: 'Redis connected at 127.0.0.1:6379',
+  },
+  {
+    id: '3',
+    level: 'info',
+    timestamp: '12:00:04',
+    source: 'server',
+    message: 'GET /api/health → 200 OK (3ms)',
+  },
+  {
+    id: '4',
+    level: 'warn',
+    timestamp: '12:00:05',
+    source: 'db',
+    message: 'Slow query detected: SELECT * FROM sessions (450ms)',
+  },
+  {
+    id: '5',
+    level: 'info',
+    timestamp: '12:00:06',
+    source: 'server',
+    message: 'POST /api/login → 200 OK (22ms)',
+  },
+  {
+    id: '6',
+    level: 'debug',
+    timestamp: '12:00:07',
+    source: 'cache',
+    message: 'MISS sessions:user:42',
+  },
+  {
+    id: '7',
+    level: 'info',
+    timestamp: '12:00:08',
+    source: 'db',
+    message: 'Inserted session for user:42',
+  },
+  {
+    id: '8',
+    level: 'error',
+    timestamp: '12:00:09',
+    source: 'server',
+    message: 'POST /api/upload → 413 Payload Too Large',
+  },
+  {
+    id: '9',
+    level: 'warn',
+    timestamp: '12:00:10',
+    source: 'server',
+    message: 'Rate limit exceeded for IP 203.0.113.7',
+  },
+  {
+    id: '10',
+    level: 'info',
+    timestamp: '12:00:11',
+    source: 'server',
+    message: 'GET /api/users → 200 OK (11ms)',
+  },
+  {
+    id: '11',
+    level: 'debug',
+    timestamp: '12:00:12',
+    source: 'cache',
+    message: 'HIT sessions:user:42',
+  },
+  {
+    id: '12',
+    level: 'success',
+    timestamp: '12:00:13',
+    source: 'deploy',
+    message: 'Rolling update complete — 4/4 instances healthy',
+  },
+  {
+    id: '13',
+    level: 'error',
+    timestamp: '12:00:14',
+    source: 'db',
+    message: 'Connection timeout after 5000ms — retrying…',
+  },
+  {
+    id: '14',
+    level: 'success',
+    timestamp: '12:00:15',
+    source: 'db',
+    message: 'Reconnected to PostgreSQL successfully',
+  },
+  {
+    id: '15',
+    level: 'info',
+    timestamp: '12:00:16',
+    source: 'server',
+    message: 'DELETE /api/sessions/user:42 → 204 No Content',
+  },
+]
+
+// ── Highlight helper ──────────────────────────────────────────────────────────
+
+/**
+ * Wraps every case-insensitive occurrence of `query` within `text` in a
+ * highlight `<mark>` span. Returns the original string when `query` is empty.
+ */
+function highlight(text: string, query: string): ReactNode {
+  if (!query) return text
+  const lc = text.toLowerCase()
+  const lcQ = query.toLowerCase()
+  const nodes: ReactNode[] = []
+  let cursor = 0
+
+  while (cursor < text.length) {
+    const found = lc.indexOf(lcQ, cursor)
+    if (found === -1) {
+      nodes.push(text.slice(cursor))
+      break
+    }
+    if (found > cursor) nodes.push(text.slice(cursor, found))
+    nodes.push(
+      <mark
+        key={found}
+        className="rounded-[2px] bg-[color-mix(in_oklab,var(--term-yellow)_35%,transparent)] text-(--term-yellow) not-italic px-px"
+      >
+        {text.slice(found, found + query.length)}
+      </mark>
+    )
+    cursor = found + query.length
+  }
+
+  return nodes.length === 1 ? nodes[0] : <>{nodes}</>
+}
+
+// ── Demo component ────────────────────────────────────────────────────────────
+
+/**
+ * Playground demo for TerminalSearch + useTerminalSearch.
+ *
+ * Displays a static log feed with an in-line search bar.
+ * Matching rows are outlined; the focused match is scrolled into view.
+ */
+export function SearchDemo() {
+  // Build the flat string array the hook needs.
+  const searchItems = SEARCH_ENTRIES.map((e) =>
+    [e.message, e.source ?? '', e.level ?? ''].join(' ')
+  )
+
+  const search = useTerminalSearch(searchItems)
+
+  // Scroll current match into view.
+  const rowRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (search.currentIndex < 0) return
+    const matchItemIndex = search.matchIndices[search.currentIndex]
+    rowRefs.current[matchItemIndex]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  }, [search.currentIndex, search.matchIndices])
+
+  return (
+    <Terminal title="server.log">
+      <TerminalCommand>tail -f logs/server.log | grep …</TerminalCommand>
+
+      {/* ── Search bar ── */}
+      <div className="px-3 pt-2 pb-1">
+        <TerminalSearch
+          query={search.query}
+          onQueryChange={search.setQuery}
+          matchCount={search.matchCount}
+          currentMatch={search.currentMatchNumber}
+          onNext={search.next}
+          onPrev={search.prev}
+        />
+      </div>
+
+      {/* ── Log feed ── */}
+      <div
+        className="max-h-64 overflow-auto px-3 pb-3 font-mono text-xs"
+        role="log"
+        aria-live="off"
+        aria-relevant="additions text"
+      >
+        {SEARCH_ENTRIES.map((entry, index) => {
+          const isCurrent = search.isCurrentMatch(index)
+          const isAnyMatch = search.isMatch(index)
+
+          return (
+            <div
+              key={entry.id}
+              ref={(el) => {
+                rowRefs.current[index] = el
+              }}
+              className={`rounded transition-colors
+                ${
+                  isCurrent
+                    ? 'ring-1 ring-(--term-yellow)/50 bg-[color-mix(in_oklab,var(--term-yellow)_6%,transparent)]'
+                    : isAnyMatch
+                      ? 'ring-1 ring-(--term-yellow)/20 bg-[color-mix(in_oklab,var(--term-yellow)_3%,transparent)]'
+                      : ''
+                }`}
+            >
+              <TerminalLogLine
+                level={entry.level}
+                timestamp={entry.timestamp}
+                source={entry.source}
+                message={highlight(entry.message, search.query)}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </Terminal>
+  )
+}
diff --git a/components/terminal-filter-bar.tsx b/components/terminal-filter-bar.tsx
new file mode 100644
index 0000000..6409ee6
--- /dev/null
+++ b/components/terminal-filter-bar.tsx
@@ -0,0 +1,292 @@
+'use client'
+
+import { useId } from 'react'
+import type { TerminalLogLineProps } from './terminal-log-line'
+import type { LogEntry } from './terminal-log'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type LogLevel = NonNullable<TerminalLogLineProps['level']>
+
+/**
+ * The controlled state for `TerminalFilterBar`.
+ *
+ * - `levels`  — set of active levels. Empty array = all levels visible.
+ * - `text`    — case-insensitive substring filter applied to `message` and `source`.
+ * - `sources` — set of active sources. Empty array = all sources visible.
+ */
+export interface FilterBarState {
+  levels: LogLevel[]
+  text: string
+  sources: string[]
+}
+
+/** Returns a `FilterBarState` with all filters cleared (show everything). */
+export function emptyFilterState(): FilterBarState {
+  return { levels: [], text: '', sources: [] }
+}
+
+export interface TerminalFilterBarProps {
+  /** Current filter state (controlled). */
+  state: FilterBarState
+  /** Called whenever the user changes any filter value. */
+  onChange: (next: FilterBarState) => void
+  /**
+   * Available source options to show as toggle buttons.
+   * When empty or omitted the source row is hidden.
+   */
+  sources?: string[]
+  /** Additional CSS classes for layout overrides. */
+  className?: string
+}
+
+// ── Level metadata ────────────────────────────────────────────────────────────
+
+const LEVELS: LogLevel[] = ['debug', 'info', 'warn', 'error', 'success']
+
+/** Active (toggled-on) Tailwind classes per level — mirrors TerminalLogLine badge palette. */
+const levelActiveClasses: Record<LogLevel, string> = {
+  debug: 'border-(--glass-border)      text-(--term-fg-dim)    bg-[rgba(255,255,255,0.06)]',
+  info: 'border-[var(--term-blue)]/40  text-(--term-blue)      bg-[color-mix(in_oklab,var(--term-blue)_14%,transparent)]',
+  warn: 'border-[var(--term-yellow)]/40 text-(--term-yellow)   bg-[color-mix(in_oklab,var(--term-yellow)_14%,transparent)]',
+  error:
+    'border-[var(--term-red)]/40   text-(--term-red)       bg-[color-mix(in_oklab,var(--term-red)_14%,transparent)]',
+  success:
+    'border-[var(--term-green)]/40 text-(--term-green)     bg-[color-mix(in_oklab,var(--term-green)_14%,transparent)]',
+}
+
+const levelLabel: Record<LogLevel, string> = {
+  debug: 'DBG',
+  info: 'INF',
+  warn: 'WRN',
+  error: 'ERR',
+  success: 'OK',
+}
+
+// ── Utility ───────────────────────────────────────────────────────────────────
+
+/**
+ * Pure filtering helper — apply a `FilterBarState` to a `LogEntry[]`.
+ *
+ * Rules:
+ * - If `state.levels` is empty, all levels pass.
+ * - If `state.sources` is empty, all sources pass.
+ * - `state.text` is trimmed and matched case-insensitively against `message` and `source`.
+ *
+ * @example
+ * ```tsx
+ * const visible = filterEntries(entries, filterState)
+ * <TerminalLog entries={visible} />
+ * ```
+ */
+export function filterEntries(entries: LogEntry[], state: FilterBarState): LogEntry[] {
+  const needle = state.text.trim().toLowerCase()
+
+  return entries.filter((entry) => {
+    // Level filter
+    if (state.levels.length > 0) {
+      const entryLevel: LogLevel = entry.level ?? 'info'
+      if (!state.levels.includes(entryLevel)) return false
+    }
+
+    // Source filter
+    if (state.sources.length > 0) {
+      if (!entry.source || !state.sources.includes(entry.source)) return false
+    }
+
+    // Text filter
+    if (needle) {
+      const msg = (typeof entry.message === 'string' ? entry.message : '').toLowerCase()
+      const src = (entry.source ?? '').toLowerCase()
+      if (!msg.includes(needle) && !src.includes(needle)) return false
+    }
+
+    return true
+  })
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/**
+ * A compact controlled filter bar for terminal feed views.
+ *
+ * Provides three composable filters:
+ * 1. **Level toggles** — click to include/exclude `debug | info | warn | error | success`.
+ *    No levels selected = all levels shown.
+ * 2. **Text search** — case-insensitive substring match across `message` and `source`.
+ * 3. **Source toggles** — only rendered when the `sources` prop is non-empty.
+ *    No sources selected = all sources shown.
+ *
+ * Pair with the exported `filterEntries` helper to apply the state:
+ * ```tsx
+ * const [filter, setFilter] = useState(emptyFilterState)
+ * const visible = filterEntries(entries, filter)
+ *
+ * <TerminalFilterBar state={filter} onChange={setFilter} sources={allSources} />
+ * <TerminalLog entries={visible} autoScroll />
+ * ```
+ *
+ * All controls are keyboard-accessible (native `<button>` and `<input>`).
+ *
+ * @param state     - Controlled filter state
+ * @param onChange  - Callback fired on every change
+ * @param sources   - Available source labels rendered as toggle buttons
+ * @param className - Additional CSS classes
+ */
+export function TerminalFilterBar({
+  state,
+  onChange,
+  sources = [],
+  className = '',
+}: TerminalFilterBarProps) {
+  const inputId = useId()
+
+  function toggleLevel(level: LogLevel) {
+    const next = state.levels.includes(level)
+      ? state.levels.filter((l) => l !== level)
+      : [...state.levels, level]
+    onChange({ ...state, levels: next })
+  }
+
+  function toggleSource(source: string) {
+    const next = state.sources.includes(source)
+      ? state.sources.filter((s) => s !== source)
+      : [...state.sources, source]
+    onChange({ ...state, sources: next })
+  }
+
+  function clearText() {
+    onChange({ ...state, text: '' })
+  }
+
+  const hasActiveFilters =
+    state.levels.length > 0 || state.sources.length > 0 || state.text.trim().length > 0
+
+  return (
+    <div
+      className={`flex flex-col gap-2 rounded border border-(--glass-border) bg-(--term-bg-light) p-2 font-mono text-xs ${className}`.trim()}
+    >
+      {/* Row 1: level toggles + text input */}
+      <div className="flex flex-wrap items-center gap-1.5">
+        {/* Level toggles */}
+        <span className="shrink-0 text-(--term-fg-dim) select-none">level:</span>
+        {LEVELS.map((level) => {
+          const active = state.levels.includes(level)
+          return (
+            <button
+              key={level}
+              type="button"
+              aria-pressed={active}
+              aria-label={`Toggle ${level} level`}
+              onClick={() => toggleLevel(level)}
+              className={[
+                'inline-flex items-center rounded border px-1.5 py-px font-mono text-[10px] font-semibold leading-none tracking-wider transition-opacity',
+                active
+                  ? levelActiveClasses[level]
+                  : 'border-(--glass-border) text-(--term-fg-dim) bg-transparent opacity-40 hover:opacity-70',
+              ].join(' ')}
+            >
+              {levelLabel[level]}
+            </button>
+          )
+        })}
+
+        {/* Separator */}
+        <span className="mx-0.5 h-3 w-px bg-(--glass-border) shrink-0" aria-hidden="true" />
+
+        {/* Text search */}
+        <label htmlFor={inputId} className="sr-only">
+          Filter by text
+        </label>
+        <div className="relative flex items-center">
+          {/* Search icon — inline SVG avoids lucide React-version type conflicts */}
+          <svg
+            viewBox="0 0 16 16"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            className="pointer-events-none absolute left-2 text-(--term-fg-dim)"
+            aria-hidden="true"
+          >
+            <circle cx="6.5" cy="6.5" r="4" />
+            <line x1="10" y1="10" x2="14" y2="14" />
+          </svg>
+          <input
+            id={inputId}
+            type="text"
+            value={state.text}
+            onChange={(e) => onChange({ ...state, text: e.target.value })}
+            placeholder="filter…"
+            spellCheck={false}
+            className="h-5 w-36 rounded border border-(--glass-border) bg-transparent pl-6 pr-5 text-xs text-(--term-fg) placeholder:text-(--term-fg-dim) focus:outline-none focus:border-(--term-blue)/60 transition-colors"
+          />
+          {state.text && (
+            <button
+              type="button"
+              aria-label="Clear text filter"
+              onClick={clearText}
+              className="absolute right-1.5 text-(--term-fg-dim) hover:text-(--term-fg) transition-colors"
+            >
+              {/* Clear icon — inline SVG */}
+              <svg
+                viewBox="0 0 16 16"
+                width="10"
+                height="10"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                aria-hidden="true"
+              >
+                <line x1="3" y1="3" x2="13" y2="13" />
+                <line x1="13" y1="3" x2="3" y2="13" />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* Clear-all pill — only shown when any filter is active */}
+        {hasActiveFilters && (
+          <button
+            type="button"
+            aria-label="Clear all filters"
+            onClick={() => onChange(emptyFilterState())}
+            className="ml-auto shrink-0 rounded border border-(--glass-border) px-1.5 py-px text-[10px] text-(--term-fg-dim) hover:text-(--term-fg) hover:border-(--term-fg-dim)/60 transition-colors"
+          >
+            clear
+          </button>
+        )}
+      </div>
+
+      {/* Row 2: source toggles (only when sources provided) */}
+      {sources.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span className="shrink-0 text-(--term-fg-dim) select-none">source:</span>
+          {sources.map((src) => {
+            const active = state.sources.includes(src)
+            return (
+              <button
+                key={src}
+                type="button"
+                aria-pressed={active}
+                aria-label={`Toggle source ${src}`}
+                onClick={() => toggleSource(src)}
+                className={[
+                  'inline-flex items-center rounded border px-1.5 py-px text-[10px] leading-none transition-opacity',
+                  active
+                    ? 'border-(--glass-border) text-(--term-fg) bg-[rgba(255,255,255,0.06)] opacity-100'
+                    : 'border-(--glass-border) text-(--term-fg-dim) bg-transparent opacity-40 hover:opacity-70',
+                ].join(' ')}
+              >
+                {src}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/terminal-group.tsx b/components/terminal-group.tsx
new file mode 100644
index 0000000..ba0bfb1
--- /dev/null
+++ b/components/terminal-group.tsx
@@ -0,0 +1,203 @@
+'use client'
+
+import { useId, useState, type ReactNode } from 'react'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type GroupVariant = 'default' | 'info' | 'warn' | 'error' | 'success'
+
+export interface TerminalGroupProps {
+  /**
+   * Header title displayed next to the expand/collapse caret.
+   * Keep it short — it sits in a monospace row alongside summary and count.
+   */
+  title: string
+  /**
+   * Optional one-line description shown after the title in dim foreground.
+   * Ideal for a status message, step description, or abbreviated output.
+   */
+  summary?: string
+  /**
+   * Hint label rendered as a pill on the right of the header row.
+   * Typical use: `"42 lines"`, `"3 errors"`, `"1.2s"`.
+   */
+  countLabel?: string
+  /**
+   * Left-border accent colour (default: `'default'` — no accent).
+   * Maps to the same CSS custom properties as `TerminalLogLine` level badges.
+   */
+  variant?: GroupVariant
+  /**
+   * Uncontrolled initial open state (default: `true`).
+   * Ignored when `open` is provided.
+   */
+  defaultOpen?: boolean
+  /**
+   * Controlled open state.  Must be paired with `onOpenChange`.
+   */
+  open?: boolean
+  /**
+   * Called when the user toggles the group header.
+   */
+  onOpenChange?: (open: boolean) => void
+  /** Content rendered inside the collapsible region. */
+  children: ReactNode
+  /** Additional wrapper classes for layout overrides. */
+  className?: string
+}
+
+// ── Variant tokens ────────────────────────────────────────────────────────────
+
+const variantTokens: Record<
+  GroupVariant,
+  { border: string; headerHover: string; countBadge: string }
+> = {
+  default: {
+    border: 'border-(--glass-border)',
+    headerHover: 'hover:bg-[rgba(255,255,255,0.03)]',
+    countBadge: 'border-(--glass-border) text-(--term-fg-dim) bg-[rgba(255,255,255,0.04)]',
+  },
+  info: {
+    border: 'border-[var(--term-blue)]/30',
+    headerHover: 'hover:bg-[color-mix(in_oklab,var(--term-blue)_5%,transparent)]',
+    countBadge:
+      'border-[var(--term-blue)]/30 text-(--term-blue) bg-[color-mix(in_oklab,var(--term-blue)_10%,transparent)]',
+  },
+  warn: {
+    border: 'border-[var(--term-yellow)]/30',
+    headerHover: 'hover:bg-[color-mix(in_oklab,var(--term-yellow)_5%,transparent)]',
+    countBadge:
+      'border-[var(--term-yellow)]/30 text-(--term-yellow) bg-[color-mix(in_oklab,var(--term-yellow)_10%,transparent)]',
+  },
+  error: {
+    border: 'border-[var(--term-red)]/30',
+    headerHover: 'hover:bg-[color-mix(in_oklab,var(--term-red)_5%,transparent)]',
+    countBadge:
+      'border-[var(--term-red)]/30 text-(--term-red) bg-[color-mix(in_oklab,var(--term-red)_10%,transparent)]',
+  },
+  success: {
+    border: 'border-[var(--term-green)]/30',
+    headerHover: 'hover:bg-[color-mix(in_oklab,var(--term-green)_5%,transparent)]',
+    countBadge:
+      'border-[var(--term-green)]/30 text-(--term-green) bg-[color-mix(in_oklab,var(--term-green)_10%,transparent)]',
+  },
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/**
+ * A collapsible command/output group for terminal-style log feeds.
+ *
+ * Renders a single-row header (caret · title · summary · count pill) above a
+ * content region that can be toggled open or closed.  Supports both
+ * **uncontrolled** (`defaultOpen`) and **controlled** (`open` + `onOpenChange`)
+ * modes.
+ *
+ * ```
+ * ▾ Install dependencies          Resolving packages…   42 lines
+ * │ [INF] 10:23:45  npm  Fetching react@19.2.0
+ * │ [INF] 10:23:46  npm  Fetching typescript@5.8.2
+ * │  …
+ * ```
+ *
+ * ARIA: the toggle `<button>` carries `aria-expanded` and `aria-controls`;
+ * the content region has `role="region"` and a matching `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <TerminalGroup
+ *   title="Install"
+ *   summary="42 packages"
+ *   countLabel="1.4s"
+ *   variant="success"
+ *   defaultOpen={false}
+ * >
+ *   <TerminalLogLine level="info" message="Fetching react@19.2.0" />
+ *   <TerminalLogLine level="success" message="Installed 42 packages" />
+ * </TerminalGroup>
+ * ```
+ */
+export function TerminalGroup({
+  title,
+  summary,
+  countLabel,
+  variant = 'default',
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  className = '',
+}: TerminalGroupProps) {
+  const regionId = useId()
+  const headerId = useId()
+
+  // Support both controlled and uncontrolled modes.
+  const isControlled = controlledOpen !== undefined
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const isOpen = isControlled ? controlledOpen : internalOpen
+
+  function toggle() {
+    const next = !isOpen
+    if (!isControlled) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  const tokens = variantTokens[variant]
+
+  return (
+    <div className={`font-mono text-xs ${className}`.trim()}>
+      {/* ── Header row ── */}
+      <button
+        type="button"
+        id={headerId}
+        onClick={toggle}
+        aria-expanded={isOpen}
+        aria-controls={regionId}
+        className={`group flex w-full min-w-0 items-center gap-2 rounded px-2 py-1
+          text-left transition-colors
+          focus-visible:ring-2 focus-visible:ring-(--term-blue)/60 focus-visible:ring-offset-1
+          ${tokens.headerHover}`}
+      >
+        {/* Caret — rotates 90° when open */}
+        <span
+          aria-hidden="true"
+          className={`shrink-0 text-(--term-fg-dim) transition-transform duration-150
+            ${isOpen ? 'rotate-90' : 'rotate-0'}`}
+          style={{ display: 'inline-block' }}
+        >
+          ▶
+        </span>
+
+        {/* Title */}
+        <span className="shrink-0 font-semibold text-(--term-fg)">{title}</span>
+
+        {/* Summary — grows to fill available space */}
+        {summary && <span className="min-w-0 flex-1 truncate text-(--term-fg-dim)">{summary}</span>}
+
+        {/* Spacer when no summary */}
+        {!summary && <span className="flex-1" aria-hidden="true" />}
+
+        {/* Count / duration pill */}
+        {countLabel && (
+          <span
+            className={`shrink-0 rounded border px-1.5 py-px text-[10px] leading-none
+              ${tokens.countBadge}`}
+          >
+            {countLabel}
+          </span>
+        )}
+      </button>
+
+      {/* ── Collapsible content region ── */}
+      <div
+        id={regionId}
+        role="region"
+        aria-labelledby={headerId}
+        hidden={!isOpen}
+        className={`ml-4 border-l pl-3 ${tokens.border}`}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/components/terminal-json-line.tsx b/components/terminal-json-line.tsx
new file mode 100644
index 0000000..0d670f3
--- /dev/null
+++ b/components/terminal-json-line.tsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useId, useMemo, useState } from 'react'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-json'
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TerminalJsonLineProps {
+  /**
+   * The data to render. Accepts:
+   * - A plain JS object / array / primitive — serialised automatically.
+   * - A raw JSON string — parsed and validated; shown as invalid if malformed.
+   */
+  payload: unknown
+  /**
+   * Optional label rendered before the collapsed summary (e.g. a field name or event type).
+   */
+  label?: string
+  /** Start in expanded state (default: false). */
+  defaultExpanded?: boolean
+  /** Additional CSS classes for layout overrides. */
+  className?: string
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+interface ParseResult {
+  value: unknown
+  pretty: string
+  invalid: boolean
+  /** Short one-line summary for the collapsed row. */
+  summary: string
+}
+
+function parse(payload: unknown): ParseResult {
+  // If the caller passed a raw string, try to parse it as JSON.
+  if (typeof payload === 'string') {
+    try {
+      const parsed = JSON.parse(payload)
+      const pretty = JSON.stringify(parsed, null, 2)
+      return { value: parsed, pretty, invalid: false, summary: summarise(parsed) }
+    } catch {
+      // Not valid JSON — treat as opaque string.
+      const truncated = payload.length > 60 ? payload.slice(0, 60) + '…' : payload
+      return {
+        value: payload,
+        pretty: payload,
+        invalid: true,
+        summary: `"${truncated}"`,
+      }
+    }
+  }
+
+  // Already a JS value — serialise directly.
+  try {
+    const pretty = JSON.stringify(payload, null, 2)
+    return { value: payload, pretty, invalid: false, summary: summarise(payload) }
+  } catch {
+    return { value: payload, pretty: String(payload), invalid: true, summary: String(payload) }
+  }
+}
+
+function summarise(value: unknown): string {
+  if (value === null) return 'null'
+  if (Array.isArray(value)) return `[ ${value.length} item${value.length === 1 ? '' : 's'} ]`
+  if (typeof value === 'object') {
+    const keys = Object.keys(value as object).length
+    return `{ ${keys} key${keys === 1 ? '' : 's'} }`
+  }
+  // Primitives — show inline, truncated.
+  const str = JSON.stringify(value) ?? String(value)
+  return str.length > 60 ? str.slice(0, 60) + '…' : str
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/**
+ * A collapsible JSON payload renderer for terminal log feeds.
+ *
+ * Renders a compact one-line summary by default. Clicking the row (or pressing
+ * Enter / Space) toggles a fully expanded, Prism-highlighted pretty-print view.
+ *
+ * Handles invalid JSON gracefully — shows the raw value with a warning indicator
+ * instead of throwing. Large payloads are constrained to a scrollable code block.
+ *
+ * @param payload          - JS value or raw JSON string to display
+ * @param label            - Optional label prefix shown before the summary
+ * @param defaultExpanded  - Start in expanded state (default: false)
+ * @param className        - Additional CSS classes
+ *
+ * @example
+ * ```tsx
+ * // Object payload
+ * <TerminalJsonLine label="event" payload={{ type: 'deploy', status: 'ok', ts: 1709900000 }} />
+ *
+ * // Raw JSON string
+ * <TerminalJsonLine label="response" payload='{"status":200,"body":"ok"}' />
+ *
+ * // Invalid JSON — rendered safely
+ * <TerminalJsonLine payload="not { valid ] json" />
+ *
+ * // Start expanded
+ * <TerminalJsonLine payload={largeObject} defaultExpanded />
+ * ```
+ */
+export function TerminalJsonLine({
+  payload,
+  label,
+  defaultExpanded = false,
+  className = '',
+}: TerminalJsonLineProps) {
+  const id = useId()
+  const [expanded, setExpanded] = useState(defaultExpanded)
+
+  const parsed = useMemo(() => parse(payload), [payload])
+
+  const highlightedHtml = useMemo(() => {
+    if (parsed.invalid) return null
+    const grammar = Prism.languages['json']
+    if (!grammar) return null
+    try {
+      return Prism.highlight(parsed.pretty, grammar, 'json')
+    } catch {
+      return null
+    }
+  }, [parsed])
+
+  function toggle() {
+    setExpanded((v) => !v)
+  }
+
+  return (
+    <div className={`font-mono text-xs leading-5 ${className}`.trim()}>
+      {/* ── Collapsed row (always visible) ── */}
+      <button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls={id}
+        onClick={toggle}
+        className="flex w-full min-w-0 items-baseline gap-1.5 text-left hover:opacity-80 transition-opacity focus:outline-none focus-visible:ring-1 focus-visible:ring-(--term-blue)/60 rounded"
+      >
+        {/* Chevron */}
+        <span
+          className="shrink-0 text-(--term-fg-dim) transition-transform duration-150"
+          style={{ display: 'inline-block', transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          aria-hidden="true"
+        >
+          ▶
+        </span>
+
+        {/* Label */}
+        {label && (
+          <span className="shrink-0 text-(--term-fg-dim)">{label}:</span>
+        )}
+
+        {/* Invalid indicator */}
+        {parsed.invalid && (
+          <span className="shrink-0 rounded border border-(--term-yellow)/40 px-1 py-px text-[10px] font-semibold leading-none text-(--term-yellow) bg-[color-mix(in_oklab,var(--term-yellow)_10%,transparent)]">
+            INVALID
+          </span>
+        )}
+
+        {/* Summary */}
+        <span className={`min-w-0 truncate ${parsed.invalid ? 'text-(--term-yellow)' : 'text-(--term-fg)'}`}>
+          {parsed.summary}
+        </span>
+      </button>
+
+      {/* ── Expanded view ── */}
+      {expanded && (
+        <div
+          id={id}
+          className="mt-1 max-h-72 overflow-auto rounded border border-(--glass-border) bg-(--term-bg-light) p-3"
+        >
+          {highlightedHtml ? (
+            <code
+              className="terminal-code block whitespace-pre text-xs leading-5"
+              dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+            />
+          ) : (
+            <pre className="whitespace-pre-wrap break-all text-xs leading-5 text-(--term-yellow)">
+              {parsed.pretty}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/terminal-log-line.tsx b/components/terminal-log-line.tsx
new file mode 100644
index 0000000..c82d751
--- /dev/null
+++ b/components/terminal-log-line.tsx
@@ -0,0 +1,124 @@
+'use client'
+
+import { ReactNode } from 'react'
+
+export interface TerminalLogLineProps {
+  /** Primary log message content. */
+  message: ReactNode
+  /** Severity level — controls the label color (default: 'info'). */
+  level?: 'debug' | 'info' | 'warn' | 'error' | 'success'
+  /** Optional timestamp string (e.g. "10:23:45" or ISO). */
+  timestamp?: string
+  /** Optional source / subsystem label (e.g. "server", "db"). */
+  source?: string
+  /** Additional classes for layout overrides. */
+  className?: string
+}
+
+/**
+ * Per-level color tokens — border, background tint, and text colors.
+ *
+ * `badge`   — the [LEVEL] indicator pill (border + bg tint, consistent with TerminalBadge)
+ * `message` — foreground for the message body (dimmed for debug, red for error)
+ */
+const levelClasses: Record<
+  NonNullable<TerminalLogLineProps['level']>,
+  { badge: string; message: string }
+> = {
+  debug: {
+    badge: 'border-(--glass-border) text-(--term-fg-dim) bg-[rgba(255,255,255,0.03)]',
+    message: 'text-(--term-fg-dim)',
+  },
+  info: {
+    badge:
+      'border-[var(--term-blue)]/40 text-(--term-blue) bg-[color-mix(in_oklab,var(--term-blue)_10%,transparent)]',
+    message: 'text-(--term-fg)',
+  },
+  warn: {
+    badge:
+      'border-[var(--term-yellow)]/40 text-(--term-yellow) bg-[color-mix(in_oklab,var(--term-yellow)_10%,transparent)]',
+    message: 'text-(--term-fg)',
+  },
+  error: {
+    badge:
+      'border-[var(--term-red)]/40 text-(--term-red) bg-[color-mix(in_oklab,var(--term-red)_10%,transparent)]',
+    message: 'text-(--term-red)',
+  },
+  success: {
+    badge:
+      'border-[var(--term-green)]/40 text-(--term-green) bg-[color-mix(in_oklab,var(--term-green)_10%,transparent)]',
+    message: 'text-(--term-fg)',
+  },
+}
+
+/**
+ * 3-character uppercase level labels.
+ * All entries are exactly 3 chars so the badge pill stays a consistent width
+ * across levels in a monospace font.
+ */
+const levelLabel: Record<NonNullable<TerminalLogLineProps['level']>, string> = {
+  debug: 'DBG',
+  info: 'INF',
+  warn: 'WRN',
+  error: 'ERR',
+  success: 'OK',
+}
+
+/**
+ * A single structured log row primitive for terminal-style feeds.
+ *
+ * Renders a monospace row with an optional timestamp, a compact level badge,
+ * an optional source label, and the log message. All color tokens are derived
+ * from CSS custom properties, making the component fully theme-aware.
+ *
+ * Layout (left → right):
+ * ```
+ * [timestamp]  [LVL]  source  message
+ * ```
+ *
+ * @param message   - Log message body (string or any React node)
+ * @param level     - Severity (debug | info | warn | error | success); default 'info'
+ * @param timestamp - Optional timestamp string shown in dim foreground
+ * @param source    - Optional subsystem / service label shown after the badge
+ * @param className - Additional CSS classes
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogLine level="info"    timestamp="10:23:45" source="server" message="Listening on :3000" />
+ * <TerminalLogLine level="warn"    timestamp="10:23:47" source="auth"   message="Token expiring in 5 min" />
+ * <TerminalLogLine level="error"   timestamp="10:23:48" source="db"     message="Connection refused" />
+ * <TerminalLogLine level="success" timestamp="10:23:49" source="build"  message="Compiled 42 modules" />
+ * <TerminalLogLine level="debug"   timestamp="10:23:50" source="worker" message="Spawned 4 threads" />
+ * ```
+ */
+export function TerminalLogLine({
+  message,
+  level = 'info',
+  timestamp,
+  source,
+  className = '',
+}: TerminalLogLineProps) {
+  const cls = levelClasses[level]
+
+  return (
+    <div
+      className={`flex min-w-0 items-baseline gap-2 py-0.5 font-mono text-xs leading-5 ${className}`.trim()}
+    >
+      {/* Timestamp */}
+      {timestamp && <span className="shrink-0 tabular-nums text-(--term-fg-dim)">{timestamp}</span>}
+
+      {/* Level badge — fixed width keeps columns aligned in monospace feeds */}
+      <span
+        className={`shrink-0 inline-flex w-[calc(3ch+0.5rem)] justify-center rounded border py-px font-mono text-[10px] font-semibold leading-none tracking-wider ${cls.badge}`}
+      >
+        {levelLabel[level]}
+      </span>
+
+      {/* Source */}
+      {source && <span className="shrink-0 text-(--term-fg-dim)">{source}</span>}
+
+      {/* Message */}
+      <span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span>
+    </div>
+  )
+}
diff --git a/components/terminal-log.tsx b/components/terminal-log.tsx
index e3b8a4a..a5a0233 100644
--- a/components/terminal-log.tsx
+++ b/components/terminal-log.tsx
@@ -1,10 +1,40 @@
 'use client'
 
 import { useEffect, useMemo, useRef } from 'react'
+import { TerminalLogLine, type TerminalLogLineProps } from './terminal-log-line'
+
+// ── Structured entry type ─────────────────────────────────────────────────────
+
+/**
+ * A structured log entry for use with the `entries` prop on `TerminalLog`.
+ * All fields except `message` are optional to keep the type lightweight.
+ */
+export interface LogEntry {
+  /** Unique key for React reconciliation. Falls back to index when omitted. */
+  id?: string
+  /** Log message body. */
+  message: string
+  /** Severity level — controls badge color (default: 'info'). */
+  level?: TerminalLogLineProps['level']
+  /** Optional timestamp string (e.g. "10:23:45"). */
+  timestamp?: string
+  /** Optional source / subsystem label (e.g. "server", "db"). */
+  source?: string
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
 
 export interface TerminalLogProps {
-  /** Log lines displayed in the terminal stream. */
-  lines: string[]
+  /**
+   * Plain string lines (backward-compatible path).
+   * Ignored when `entries` is also provided.
+   */
+  lines?: string[]
+  /**
+   * Structured log entries rendered via `TerminalLogLine` with level badges,
+   * timestamps, and source labels. Takes precedence over `lines`.
+   */
+  entries?: LogEntry[]
   /** Maximum number of lines rendered (default: 200). */
   maxLines?: number
   /** Auto-scroll to the newest line when new logs arrive (default: false). */
@@ -13,21 +43,38 @@ export interface TerminalLogProps {
   className?: string
 }
 
+// ── Component ─────────────────────────────────────────────────────────────────
+
 /**
  * Displays a terminal-style scrolling log buffer.
  *
- * @param lines - Current log lines to render
- * @param maxLines - Maximum number of visible lines kept in view
- * @param autoScroll - Whether to stick to the latest line on updates
- * @param className - Additional wrapper classes
+ * Supports two rendering modes:
  *
- * @example
+ * **String mode** (backward-compatible):
  * ```tsx
  * <TerminalLog lines={streamingLogs} maxLines={100} autoScroll />
  * ```
+ *
+ * **Structured mode** (uses `TerminalLogLine` internally):
+ * ```tsx
+ * const entries: LogEntry[] = [
+ *   { id: '1', level: 'info',  timestamp: '10:23:45', source: 'server', message: 'Listening on :3000' },
+ *   { id: '2', level: 'error', timestamp: '10:23:48', source: 'db',     message: 'Connection refused' },
+ * ]
+ * <TerminalLog entries={entries} maxLines={100} autoScroll />
+ * ```
+ *
+ * When both props are supplied, `entries` takes precedence.
+ *
+ * @param lines     - Plain string lines (existing API, fully backward-compatible)
+ * @param entries   - Structured log entries with optional level/timestamp/source
+ * @param maxLines  - Maximum number of visible lines kept in view (default: 200)
+ * @param autoScroll - Stick to the latest line on updates (default: false)
+ * @param className - Additional wrapper classes
  */
 export function TerminalLog({
-  lines,
+  lines = [],
+  entries,
   maxLines = 200,
   autoScroll = false,
   className = '',
@@ -35,32 +82,56 @@ export function TerminalLog({
   const containerRef = useRef<HTMLDivElement>(null)
   const safeMaxLines = Math.max(1, Math.floor(maxLines))
 
+  // Determine render mode once per render.
+  const structured = entries !== undefined
+
+  const visibleEntries = useMemo(
+    () =>
+      structured
+        ? (entries as LogEntry[]).slice(Math.max(0, (entries as LogEntry[]).length - safeMaxLines))
+        : null,
+    [structured, entries, safeMaxLines]
+  )
+
   const visibleLines = useMemo(
-    () => lines.slice(Math.max(0, lines.length - safeMaxLines)),
-    [lines, safeMaxLines],
+    () => (structured ? null : lines.slice(Math.max(0, lines.length - safeMaxLines))),
+    [structured, lines, safeMaxLines]
   )
 
-  useEffect(() => {
-    if (!autoScroll || !containerRef.current) {
-      return
-    }
+  // Scroll sentinel: depend on whichever array is active.
+  const scrollDep = structured ? visibleEntries : visibleLines
 
+  useEffect(() => {
+    if (!autoScroll || !containerRef.current) return
     containerRef.current.scrollTop = containerRef.current.scrollHeight
-  }, [autoScroll, visibleLines])
+  }, [autoScroll, scrollDep])
 
   return (
     <div
       ref={containerRef}
-      className={`max-h-64 overflow-auto rounded border border-[var(--glass-border)] bg-[var(--term-bg)]/40 p-3 font-mono text-sm ${className}`.trim()}
+      className={`max-h-64 overflow-auto rounded border border-(--glass-border) bg-(--term-bg)/40 p-3 font-mono text-xs ${className}`.trim()}
       role="log"
       aria-live={autoScroll ? 'polite' : 'off'}
       aria-relevant="additions text"
     >
-      {visibleLines.map((line, index) => (
-        <div key={`${index}-${line}`} className="whitespace-pre-wrap break-all text-[var(--term-fg-dim)]">
-          {line}
-        </div>
-      ))}
+      {structured
+        ? visibleEntries!.map((entry, index) => (
+            <TerminalLogLine
+              key={entry.id ?? index}
+              message={entry.message}
+              level={entry.level}
+              timestamp={entry.timestamp}
+              source={entry.source}
+            />
+          ))
+        : visibleLines!.map((line, index) => (
+            <div
+              key={`${index}-${line}`}
+              className="whitespace-pre-wrap break-all text-(--term-fg-dim) leading-5 py-0.5"
+            >
+              {line}
+            </div>
+          ))}
     </div>
   )
 }
diff --git a/components/terminal-marker.tsx b/components/terminal-marker.tsx
new file mode 100644
index 0000000..bc44621
--- /dev/null
+++ b/components/terminal-marker.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+export interface TerminalMarkerProps {
+  /** Label text displayed as the phase marker. */
+  label: string
+  /** Optional timestamp to display after the label. */
+  timestamp?: string
+  /** Visual style variant (default: 'neutral'). */
+  variant?: 'info' | 'success' | 'warning' | 'error' | 'neutral'
+  /** Additional classes for layout tweaks. */
+  className?: string
+}
+
+/**
+ * Per-variant Tailwind classes for border, background tint, label, and timestamp.
+ * Background tints use `color-mix` for consistent translucency across themes.
+ */
+const variantClasses: Record<
+  NonNullable<TerminalMarkerProps['variant']>,
+  { root: string; label: string; timestamp: string }
+> = {
+  neutral: {
+    root: 'border-[var(--glass-border)] bg-[rgba(255,255,255,0.03)]',
+    label: 'text-[var(--term-fg)]',
+    timestamp: 'text-[var(--term-fg-dim)]',
+  },
+  info: {
+    root: 'border-[var(--term-blue)]/40 bg-[color-mix(in_oklab,var(--term-blue)_8%,transparent)]',
+    label: 'text-[var(--term-blue)]',
+    timestamp: 'text-[var(--term-blue)]/60',
+  },
+  success: {
+    root: 'border-[var(--term-green)]/40 bg-[color-mix(in_oklab,var(--term-green)_8%,transparent)]',
+    label: 'text-[var(--term-green)]',
+    timestamp: 'text-[var(--term-green)]/60',
+  },
+  warning: {
+    root: 'border-[var(--term-yellow)]/40 bg-[color-mix(in_oklab,var(--term-yellow)_8%,transparent)]',
+    label: 'text-[var(--term-yellow)]',
+    timestamp: 'text-[var(--term-yellow)]/60',
+  },
+  error: {
+    root: 'border-[var(--term-red)]/40 bg-[color-mix(in_oklab,var(--term-red)_8%,transparent)]',
+    label: 'text-[var(--term-red)]',
+    timestamp: 'text-[var(--term-red)]/60',
+  },
+}
+
+/**
+ * Displays a terminal-style phase separator for visual boundaries in feeds.
+ * Used to mark different phases like "Build", "Test", "Deploy" in sequential outputs.
+ *
+ * Renders a left-bordered row with a semantic background tint, a bold phase label,
+ * and an optional timestamp. Fully theme-aware via CSS custom properties and
+ * naturally responsive at any width.
+ *
+ * @param label     - Phase label text (e.g., "Build", "Test", "Deploy")
+ * @param timestamp - Optional timestamp to display after the label
+ * @param variant   - Visual style for semantic coloring (default: 'neutral')
+ * @param className - Additional CSS classes for layout overrides
+ *
+ * @example
+ * ```tsx
+ * <TerminalMarker label="BUILD"  timestamp="10:23:45" variant="info" />
+ * <TerminalMarker label="TEST"   timestamp="10:24:01" variant="success" />
+ * <TerminalMarker label="DEPLOY" timestamp="10:24:30" variant="warning" />
+ * <TerminalMarker label="DONE"   timestamp="10:24:45" variant="success" />
+ * ```
+ */
+export function TerminalMarker({
+  label,
+  timestamp,
+  variant = 'neutral',
+  className = '',
+}: TerminalMarkerProps) {
+  const cls = variantClasses[variant]
+
+  return (
+    <div
+      className={`flex min-w-0 items-center gap-3 border-l-2 pl-3 py-1.5 my-2 rounded-r ${cls.root} ${className}`.trim()}
+    >
+      <span
+        className={`shrink-0 font-mono text-xs font-semibold tracking-widest uppercase ${cls.label}`}
+      >
+        {label}
+      </span>
+      {timestamp && (
+        <span className={`font-mono text-xs truncate ${cls.timestamp}`}>{timestamp}</span>
+      )}
+    </div>
+  )
+}
diff --git a/components/terminal-search.tsx b/components/terminal-search.tsx
new file mode 100644
index 0000000..e7b4ca4
--- /dev/null
+++ b/components/terminal-search.tsx
@@ -0,0 +1,304 @@
+'use client'
+
+import { useCallback, useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { ChevronDown, ChevronUp, Search, X } from 'lucide-react'
+
+// ── useTerminalSearch hook ────────────────────────────────────────────────────
+
+export interface UseTerminalSearchOptions {
+  /** Case-sensitive matching (default: false). */
+  caseSensitive?: boolean
+}
+
+export interface UseTerminalSearchResult {
+  query: string
+  setQuery: (q: string) => void
+  /** Indices of `items` entries whose text contains the query. */
+  matchIndices: number[]
+  /** Total number of matching entries. */
+  matchCount: number
+  /** 0-based position within `matchIndices` (−1 when no query / no matches). */
+  currentIndex: number
+  /** 1-based match number for display ("2 of 5"), or 0 when no match. */
+  currentMatchNumber: number
+  /** Advance to the next match (wraps around). */
+  next: () => void
+  /** Go to the previous match (wraps around). */
+  prev: () => void
+  /** Returns true when `itemIndex` is any matched entry. */
+  isMatch: (itemIndex: number) => boolean
+  /** Returns true when `itemIndex` is the *current* highlighted entry. */
+  isCurrentMatch: (itemIndex: number) => boolean
+}
+
+/**
+ * Stateful hook that drives in-feed search over a flat string array.
+ *
+ * Each item in `items` is compared against the controlled `query`.
+ * For structured log entries, map them to strings before passing in:
+ *
+ * ```ts
+ * const searchItems = entries.map(e => [e.message, e.source ?? ''].join(' '))
+ * const search = useTerminalSearch(searchItems)
+ * ```
+ *
+ * @param items   - Flat array of strings to search within.
+ * @param options - Optional configuration.
+ */
+export function useTerminalSearch(
+  items: string[],
+  options: UseTerminalSearchOptions = {}
+): UseTerminalSearchResult {
+  const { caseSensitive = false } = options
+  const [query, setQueryRaw] = useState('')
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const matchIndices = useMemo<number[]>(() => {
+    const q = caseSensitive ? query : query.toLowerCase()
+    if (!q) return []
+    return items.reduce<number[]>((acc, item, i) => {
+      const haystack = caseSensitive ? item : item.toLowerCase()
+      if (haystack.includes(q)) acc.push(i)
+      return acc
+    }, [])
+  }, [items, query, caseSensitive])
+
+  // Clamp currentIndex whenever matchIndices changes.
+  const safeCurrentIndex =
+    matchIndices.length === 0 ? -1 : Math.min(currentIndex, matchIndices.length - 1)
+
+  const setQuery = useCallback((q: string) => {
+    setQueryRaw(q)
+    setCurrentIndex(0)
+  }, [])
+
+  const next = useCallback(() => {
+    if (matchIndices.length === 0) return
+    setCurrentIndex((prev) => (prev + 1) % matchIndices.length)
+  }, [matchIndices.length])
+
+  const prev = useCallback(() => {
+    if (matchIndices.length === 0) return
+    setCurrentIndex((prev) => (prev - 1 + matchIndices.length) % matchIndices.length)
+  }, [matchIndices.length])
+
+  const matchSet = useMemo(() => new Set(matchIndices), [matchIndices])
+
+  const isMatch = useCallback((itemIndex: number) => matchSet.has(itemIndex), [matchSet])
+
+  const isCurrentMatch = useCallback(
+    (itemIndex: number) => safeCurrentIndex >= 0 && matchIndices[safeCurrentIndex] === itemIndex,
+    [safeCurrentIndex, matchIndices]
+  )
+
+  return {
+    query,
+    setQuery,
+    matchIndices,
+    matchCount: matchIndices.length,
+    currentIndex: safeCurrentIndex,
+    currentMatchNumber: safeCurrentIndex >= 0 ? safeCurrentIndex + 1 : 0,
+    next,
+    prev,
+    isMatch,
+    isCurrentMatch,
+  }
+}
+
+// ── TerminalSearch component ──────────────────────────────────────────────────
+
+export interface TerminalSearchProps {
+  /** Controlled query value. */
+  query: string
+  /** Called when the user edits the query. */
+  onQueryChange: (q: string) => void
+  /**
+   * Total number of matches across the feed.
+   * When `undefined` the match counter is hidden.
+   */
+  matchCount?: number
+  /**
+   * 1-based index of the currently focused match (e.g. `2` → "2 / 5").
+   * When `undefined` or `0` only `matchCount` is shown.
+   */
+  currentMatch?: number
+  /** Navigate to the next match. Bound to `Enter` / ↓ button. */
+  onNext?: () => void
+  /** Navigate to the previous match. Bound to `Shift+Enter` / ↑ button. */
+  onPrev?: () => void
+  /** Input placeholder text (default: "Search logs…"). */
+  placeholder?: string
+  /** Additional wrapper classes for layout overrides. */
+  className?: string
+}
+
+/**
+ * In-feed search bar for terminal log viewers.
+ *
+ * Keyboard bindings (when the input is focused):
+ * - **Enter** → next match
+ * - **Shift+Enter** → previous match
+ * - **Escape** → clear query
+ *
+ * Pair with `useTerminalSearch` to drive the match state:
+ *
+ * ```tsx
+ * const search = useTerminalSearch(items)
+ *
+ * <TerminalSearch
+ *   query={search.query}
+ *   onQueryChange={search.setQuery}
+ *   matchCount={search.matchCount}
+ *   currentMatch={search.currentMatchNumber}
+ *   onNext={search.next}
+ *   onPrev={search.prev}
+ * />
+ * ```
+ */
+export function TerminalSearch({
+  query,
+  onQueryChange,
+  matchCount,
+  currentMatch,
+  onNext,
+  onPrev,
+  placeholder = 'Search logs…',
+  className = '',
+}: TerminalSearchProps) {
+  const inputId = useId()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Derived state
+  const hasQuery = query.length > 0
+  const noMatches = hasQuery && matchCount !== undefined && matchCount === 0
+  const showCounter = hasQuery && matchCount !== undefined && matchCount > 0
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (e.shiftKey) {
+        onPrev?.()
+      } else {
+        onNext?.()
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      onQueryChange('')
+      inputRef.current?.blur()
+    }
+  }
+
+  function handleClear() {
+    onQueryChange('')
+    inputRef.current?.focus()
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-1 rounded border font-mono text-xs transition-colors
+        ${
+          noMatches
+            ? 'border-(--term-red)/50 bg-[color-mix(in_oklab,var(--term-red)_6%,transparent)]'
+            : 'border-(--glass-border) bg-(--term-bg)/40'
+        }
+        ${className}`.trim()}
+      role="search"
+    >
+      {/* Search icon */}
+      <label htmlFor={inputId} className="pl-2.5 shrink-0">
+        <Search
+          size={12}
+          className={`transition-colors ${noMatches ? 'text-(--term-red)' : 'text-(--term-fg-dim)'}`}
+          aria-hidden="true"
+        />
+        <span className="sr-only">Search logs</span>
+      </label>
+
+      {/* Input */}
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="search"
+        value={query}
+        onChange={(e) => onQueryChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        autoComplete="off"
+        spellCheck={false}
+        aria-label="Search logs"
+        aria-live="polite"
+        aria-atomic="true"
+        className={`min-w-0 flex-1 bg-transparent py-1.5 outline-none placeholder:text-(--term-fg-dim)/50
+          ${noMatches ? 'text-(--term-red)' : 'text-(--term-fg)'}`}
+      />
+
+      {/* Match counter */}
+      {showCounter && (
+        <span
+          className="shrink-0 whitespace-nowrap tabular-nums text-(--term-fg-dim) pr-1"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {currentMatch ? `${currentMatch} / ${matchCount}` : matchCount}
+        </span>
+      )}
+
+      {/* No-match label */}
+      {noMatches && (
+        <span
+          className="shrink-0 whitespace-nowrap text-(--term-red) pr-1"
+          role="status"
+          aria-live="polite"
+        >
+          no match
+        </span>
+      )}
+
+      {/* Prev / Next navigation buttons */}
+      {(onPrev || onNext) && (
+        <div className="flex shrink-0 items-center border-l border-(--glass-border)">
+          <button
+            type="button"
+            onClick={onPrev}
+            disabled={!hasQuery || (matchCount !== undefined && matchCount === 0)}
+            aria-label="Previous match (Shift+Enter)"
+            title="Previous match (Shift+Enter)"
+            className="flex items-center justify-center px-1.5 py-1.5
+              text-(--term-fg-dim) transition-colors
+              hover:text-(--term-fg)
+              disabled:pointer-events-none disabled:opacity-30"
+          >
+            <ChevronUp size={12} aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            onClick={onNext}
+            disabled={!hasQuery || (matchCount !== undefined && matchCount === 0)}
+            aria-label="Next match (Enter)"
+            title="Next match (Enter)"
+            className="flex items-center justify-center px-1.5 py-1.5
+              text-(--term-fg-dim) transition-colors
+              hover:text-(--term-fg)
+              disabled:pointer-events-none disabled:opacity-30"
+          >
+            <ChevronDown size={12} aria-hidden="true" />
+          </button>
+        </div>
+      )}
+
+      {/* Clear button */}
+      {hasQuery && (
+        <button
+          type="button"
+          onClick={handleClear}
+          aria-label="Clear search"
+          title="Clear (Escape)"
+          className="flex shrink-0 items-center justify-center px-2 py-1.5
+            text-(--term-fg-dim) transition-colors hover:text-(--term-fg)"
+        >
+          <X size={11} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/components/terminal.tsx b/components/terminal.tsx
index 56c9e1f..8904550 100644
--- a/components/terminal.tsx
+++ b/components/terminal.tsx
@@ -18,12 +18,12 @@ const TerminalPromptContext = createContext('$')
 /**
  * Displays a terminal window with macOS-style chrome and content area.
  * Renders a terminal emulator UI with title bar, window controls, and monospace content.
- * 
+ *
  * @param children - Terminal content (TerminalCommand, TerminalOutput, TerminalSpinner components)
  * @param title - Window title shown in the chrome (default: 'Terminal')
  * @param prompt - Command prompt symbol (default: '$')
  * @param className - Additional CSS classes to apply to the container
- * 
+ *
  * @example
  * ```tsx
  * <Terminal title="my-app" prompt="user@host">
@@ -32,7 +32,12 @@ const TerminalPromptContext = createContext('$')
  * </Terminal>
  * ```
  */
-export function Terminal({ children, title = 'Terminal', prompt = '$', className = '' }: TerminalProps) {
+export function Terminal({
+  children,
+  title = 'Terminal',
+  prompt = '$',
+  className = '',
+}: TerminalProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [copied, setCopied] = useState(false)
@@ -60,7 +65,9 @@ export function Terminal({ children, title = 'Terminal', prompt = '$', className
   }
 
   return (
-    <div className={`flex flex-col bg-[var(--term-bg-light)] border border-[var(--glass-border)] rounded-lg overflow-hidden ${className}`}>
+    <div
+      className={`flex flex-col bg-[var(--term-bg-light)] border border-[var(--glass-border)] rounded-lg overflow-hidden ${className}`}
+    >
       {/* Window Chrome */}
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--glass-border)] bg-[rgba(0,0,0,0.2)]">
         <div className="flex items-center gap-2">
@@ -68,9 +75,7 @@ export function Terminal({ children, title = 'Terminal', prompt = '$', className
           <div className="w-3 h-3 rounded-full bg-[#eab308]" />
           <div className="w-3 h-3 rounded-full bg-[#10b981]" />
         </div>
-        <div className="text-xs text-[var(--term-fg-dim)] font-mono">
-          {title}
-        </div>
+        <div className="text-xs text-[var(--term-fg-dim)] font-mono">{title}</div>
         <button
           type="button"
           aria-label={copied ? 'Copied terminal content' : 'Copy terminal content'}
@@ -80,9 +85,12 @@ export function Terminal({ children, title = 'Terminal', prompt = '$', className
           {copied ? <Check size={12} className="text-[var(--term-green)]" /> : <Copy size={12} />}
         </button>
       </div>
-      
+
       {/* Terminal Content */}
-      <div ref={contentRef} className="terminal-scroll min-h-0 flex-1 overflow-auto p-4 font-mono text-sm">
+      <div
+        ref={contentRef}
+        className="terminal-scroll min-h-0 flex-1 overflow-auto p-4 font-mono text-sm"
+      >
         <TerminalPromptContext.Provider value={prompt}>{children}</TerminalPromptContext.Provider>
       </div>
     </div>
@@ -98,10 +106,10 @@ interface TerminalCommandProps {
  * Displays a command line in the terminal with a prompt symbol.
  * Renders text with a leading prompt indicator (typically '$' or '#').
  * Inherits prompt from parent Terminal component via context if not specified.
- * 
+ *
  * @param children - The command text to display
  * @param prompt - The prompt symbol to display before the command (inherited from Terminal if omitted)
- * 
+ *
  * @example
  * ```tsx
  * <TerminalCommand prompt="user@host:~$">ls -la</TerminalCommand>
@@ -134,13 +142,13 @@ interface TerminalOutputProps {
  * Displays output text with semantic coloring based on message type.
  * Uses theme colors to indicate success (green), error (red), info (blue), or warning (yellow).
  * Supports optional typing animation for string children and Prism.js syntax highlighting.
- * 
+ *
  * @param children - The output text to display
  * @param type - The type of output message (default: 'normal')
  * @param animate - Enable typing animation (default: false)
  * @param delay - Milliseconds per character when animating (default: 35)
  * @param language - Language for syntax highlighting (e.g. 'json', 'typescript')
- * 
+ *
  * @example
  * ```tsx
  * <TerminalOutput type="success">Build completed successfully</TerminalOutput>
@@ -207,7 +215,11 @@ export function TerminalOutput({
     <div className={`mb-1 whitespace-pre-wrap ${colors[type]}`}>
       {highlightedHtml ? (
         <code className="terminal-code" dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
-      ) : animate && textContent !== null ? typedText : children}
+      ) : animate && textContent !== null ? (
+        typedText
+      ) : (
+        children
+      )}
     </div>
   )
 }
@@ -219,9 +231,9 @@ interface TerminalSpinnerProps {
 /**
  * Displays an animated spinner with optional text for loading states.
  * Uses Unicode braille characters for smooth animation.
- * 
+ *
  * @param text - Optional text to display next to the spinner
- * 
+ *
  * @example
  * ```tsx
  * <TerminalSpinner text="Installing dependencies..." />
@@ -252,7 +264,7 @@ export { TerminalProgress } from './terminal-progress'
 export { TerminalPrompt } from './terminal-prompt'
 export { TerminalTree } from './terminal-tree'
 export type { TreeNode, TreeRenderContext, TerminalTreeProps } from './terminal-tree'
-export { TerminalLog } from './terminal-log'
+export { TerminalLog, type LogEntry } from './terminal-log'
 export { TerminalTable, type ColumnAlign } from './terminal-table'
 export { TerminalBarChart, TerminalSparkline, type BarChartVariant } from './terminal-chart'
 export { TerminalSelect } from './terminal-select'
@@ -260,7 +272,35 @@ export { TerminalAlert } from './terminal-alert'
 export { TerminalTabs } from './terminal-tabs'
 export { TerminalSplit } from './terminal-split'
 export { TerminalDiff } from './terminal-diff'
-export { TerminalAutocomplete, useAutocomplete, COMMON_COMMANDS, COMMON_FLAGS, filterSuggestions, type TerminalAutocompleteProps, type AutocompleteSuggestion } from './terminal-autocomplete'
+export {
+  TerminalAutocomplete,
+  useAutocomplete,
+  COMMON_COMMANDS,
+  COMMON_FLAGS,
+  filterSuggestions,
+  type TerminalAutocompleteProps,
+  type AutocompleteSuggestion,
+} from './terminal-autocomplete'
 export { TerminalGhosttyTheme, GhosttyThemePicker } from './terminal-ghostty'
 export { ThemeSwitcher } from './theme-switcher'
 export { TerminalBadge } from './terminal-badge'
+export { TerminalMarker } from './terminal-marker'
+export { TerminalLogLine, type TerminalLogLineProps } from './terminal-log-line'
+export { TerminalGroup, type TerminalGroupProps, type GroupVariant } from './terminal-group'
+export {
+  TerminalSearch,
+  useTerminalSearch,
+  type TerminalSearchProps,
+  type UseTerminalSearchOptions,
+  type UseTerminalSearchResult,
+} from './terminal-search'
+export {
+  TerminalFilterBar,
+  filterEntries,
+  emptyFilterState,
+  type TerminalFilterBarProps,
+  type FilterBarState,
+  type LogLevel,
+} from './terminal-filter-bar'
+export { TerminalStackTrace, type TerminalStackTraceProps } from './terminal-stack-trace'
+export { TerminalJsonLine, type TerminalJsonLineProps } from './terminal-json-line'