skannr 0.1.6 → 0.2.0

package/tests/skeletonizer.test.ts

@@ -1,149 +0,0 @@
-/**
- * Tests for skeleton generation
- */
-
-import * as fs from 'fs';
-import * as os from 'os';
-import * as path from 'path';
-import { buildSkeletonForFile } from '../src/skeletonizer';
-
-describe('buildSkeletonForFile', () => {
-  let tempDir: string;
-  let testFilePath: string;
-
-  beforeEach(() => {
-    // Create a temporary directory for test files
-    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'skel-test-'));
-    testFilePath = path.join(tempDir, 'test.ts');
-  });
-
-  afterEach(() => {
-    // Clean up
-    if (fs.existsSync(tempDir)) {
-      fs.rmSync(tempDir, { recursive: true, force: true });
-    }
-  });
-
-  it('should generate skeleton for a simple class', () => {
-    const sourceCode = `
-export class Calculator {
-  /**
-   * Adds two numbers
-   */
-  add(a: number, b: number): number {
-    return a + b;
-  }
-
-  multiply(x: number, y: number): number {
-    const result = x * y;
-    return result;
-  }
-}
-    `;
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton, lineRanges } = buildSkeletonForFile(testFilePath, tempDir);
-
-    // Should contain class declaration
-    expect(skeleton).toContain('export class Calculator');
-
-    // Should contain method signatures
-    expect(skeleton).toContain('add(a: number, b: number): number');
-    expect(skeleton).toContain('multiply(x: number, y: number): number');
-
-    // Should not contain implementation details
-    expect(skeleton).toContain('/* trimmed */');
-    expect(skeleton).not.toContain('return a + b');
-    expect(skeleton).not.toContain('const result = x * y');
-
-    expect(skeleton).toMatch(/\/\/ test\.ts:\d+/);
-    expect(lineRanges?.some((r) => r.symbol === 'class Calculator')).toBe(true);
-    expect(lineRanges?.some((r) => r.symbol === 'Calculator.add')).toBe(true);
-  });
-
-  it('should keep interface definitions intact', () => {
-    const sourceCode = `
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-}
-    `;
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton, lineRanges } = buildSkeletonForFile(testFilePath, tempDir);
-
-    expect(skeleton).toContain('export interface User');
-    expect(skeleton).toContain('id: string');
-    expect(skeleton).toContain('name: string');
-    expect(skeleton).toContain('email: string');
-    expect(skeleton).toMatch(/\/\/ test\.ts:\d+/);
-    expect(lineRanges?.some((r) => r.symbol === 'interface User')).toBe(true);
-  });
-
-  it('should keep import statements', () => {
-    const sourceCode = `
-import { Something } from './somewhere';
-import * as fs from 'fs';
-
-export function doWork(): void {
-  console.log('working');
-}
-    `;
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton } = buildSkeletonForFile(testFilePath, tempDir);
-
-    expect(skeleton).toContain("import { Something } from './somewhere'");
-    expect(skeleton).toContain("import * as fs from 'fs'");
-    expect(skeleton).toContain('export function doWork(): void');
-    expect(skeleton).not.toContain("console.log('working')");
-  });
-
-  it('should handle type aliases', () => {
-    const sourceCode = `
-export type Status = 'active' | 'inactive' | 'pending';
-export type UserId = string;
-    `;
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton, lineRanges } = buildSkeletonForFile(testFilePath, tempDir);
-
-    expect(skeleton).toContain("export type Status = 'active' | 'inactive' | 'pending'");
-    expect(skeleton).toContain('export type UserId = string');
-    expect(lineRanges?.some((r) => r.symbol === 'type Status')).toBe(true);
-  });
-
-  it('should handle functions with JSDoc', () => {
-    const sourceCode = `
-/**
- * Calculates the sum of an array
- * @param numbers Array of numbers
- * @returns The sum
- */
-export function sum(numbers: number[]): number {
-  return numbers.reduce((a, b) => a + b, 0);
-}
-    `;
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton } = buildSkeletonForFile(testFilePath, tempDir);
-
-    expect(skeleton).toContain('Calculates the sum');
-    expect(skeleton).toContain('export function sum(numbers: number[]): number');
-    expect(skeleton).toContain('/* trimmed */');
-    expect(skeleton).not.toContain('reduce');
-  });
-
-  it('should handle malformed TypeScript gracefully', () => {
-    const sourceCode = 'export const x = {{{';
-
-    fs.writeFileSync(testFilePath, sourceCode);
-    const { skeleton } = buildSkeletonForFile(testFilePath, tempDir);
-
-    // ts-morph is robust and may still parse partial content
-    // Just verify it returns some output without crashing
-    expect(skeleton).toBeDefined();
-    expect(skeleton.length).toBeGreaterThan(0);
-  });
-});

package/uca-landing/index.html

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Universal Code Analyzer</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

package/uca-landing/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "uca-landing",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "lucide-react": "^0.525.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17",
-    "vite": "^5.4.10"
-  }
-}

package/uca-landing/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/uca-landing/src/App.jsx

@@ -1,45 +0,0 @@
-import Navbar from './components/Navbar'
-import Hero from './components/Hero'
-import Problem from './components/Problem'
-import TokenSavings from './components/TokenSavings'
-import HowItWorks from './components/HowItWorks'
-import Features from './components/Features'
-import LanguageSupport from './components/LanguageSupport'
-import Install from './components/Install'
-import CliReference from './components/CliReference'
-import WorksWith from './components/WorksWith'
-import AgentMode from './components/AgentMode'
-import Footer from './components/Footer'
-
-export default function App() {
-  return (
-    <div className="relative min-h-screen overflow-x-hidden bg-bg text-white font-sans">
-      <div
-        className="pointer-events-none fixed inset-0 -z-10"
-        aria-hidden
-      >
-        <div
-          className="absolute -left-[20%] top-[10%] h-[520px] w-[520px] rounded-full bg-accent/[0.07] blur-[120px] motion-safe:animate-drift"
-        />
-        <div
-          className="absolute -right-[15%] top-[40%] h-[420px] w-[420px] rounded-full bg-purple/[0.08] blur-[100px] motion-safe:animate-drift motion-safe:[animation-delay:-7s] motion-safe:[animation-duration:28s]"
-        />
-        <div
-          className="absolute bottom-0 left-1/3 h-[380px] w-[380px] rounded-full bg-green/[0.05] blur-[90px] motion-safe:animate-drift motion-safe:[animation-delay:-12s] motion-safe:[animation-duration:26s]"
-        />
-      </div>
-      <Navbar />
-      <Hero />
-      <Problem />
-      <TokenSavings />
-      <HowItWorks />
-      <Features />
-      <LanguageSupport />
-      <Install />
-      <CliReference />
-      <WorksWith />
-      <AgentMode />
-      <Footer />
-    </div>
-  )
-}

package/uca-landing/src/components/AgentMode.jsx

@@ -1,45 +0,0 @@
-import Reveal from './Reveal'
-
-export default function AgentMode() {
-  return (
-    <section className="py-24 px-5">
-      <div className="max-w-5xl mx-auto">
-        <Reveal>
-          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
-            Agent mode. For when you need to explore.
-          </h2>
-        </Reveal>
-
-        <Reveal delay={100} className="mt-12 block">
-          <div className="overflow-hidden rounded-xl border border-border bg-card transition-all duration-300 hover:border-white/10 hover:shadow-[0_0_40px_-12px_rgba(0,212,255,0.12)]">
-            <div className="flex items-center gap-2 border-b border-white/5 px-4 py-3">
-              <span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
-              <span className="h-3 w-3 rounded-full bg-[#febc2e]" />
-              <span className="h-3 w-3 rounded-full bg-[#28c840]" />
-              <span className="ml-2 font-mono text-xs text-[#888]">bash</span>
-            </div>
-            <pre className="overflow-x-auto p-5 font-mono text-sm leading-7 text-[#e8e8e8]">
-            <span>$ skannr-agent --root ./my-project</span>
-            {'\n\n'}
-            <span className="text-accent">{'>'}</span> <span>/help</span>
-            {'\n'}  <span className="text-white">/files</span>               List currently retrieved files
-            {'\n'}  <span className="text-white">/symbols &lt;query&gt;</span>     Search for symbols in the codebase
-            {'\n'}  <span className="text-white">/symbol &lt;id&gt;</span>         Get full implementation of a symbol
-            {'\n'}  <span className="text-white">/deps &lt;filePath&gt;</span>     Show imports and exports for a file
-            {'\n'}  <span className="text-white">/refresh</span>             Re-analyze project with new context
-            {'\n'}  <span className="text-white">/stats</span>               Show cache and mapping statistics
-            {'\n'}  <span className="text-white">/exit</span>                Quit
-            {'\n\n'}
-            <span className="text-accent">{'>'}</span> <span>/symbols auth</span>
-            {'\n'}  Found 4 symbols:
-            {'\n'}  <span className="text-accent">→</span> AuthManager (class)     <span className="text-[#888]">src/auth/AuthManager.ts:12</span>
-            {'\n'}  <span className="text-accent">→</span> validateToken (fn)      <span className="text-[#888]">src/auth/AuthManager.ts:24</span>
-            {'\n'}  <span className="text-accent">→</span> AuthMiddleware (class)  <span className="text-[#888]">src/middleware/auth.ts:8</span>
-            {'\n'}  <span className="text-accent">→</span> authRouter (const)      <span className="text-[#888]">src/routes/auth.ts:3</span>
-            </pre>
-          </div>
-        </Reveal>
-      </div>
-    </section>
-  )
-}

package/uca-landing/src/components/CliReference.jsx

@@ -1,89 +0,0 @@
-import Reveal from './Reveal'
-
-const commands = [
-  ['skannr "<question>"', 'Ask about the codebase (positional argument)'],
-  ['skannr risk', 'Check downstream impact and risk of uncommitted changes'],
-  ['skannr risk --diff <path>', 'Analyze a specific diff/patch file'],
-  ['skannr risk -n <hops>', 'Set max traversal hops (default: 2)'],
-  ['skannr risk --json', 'JSON output for CI pipelines'],
-  ['skannr report', 'Print repository health summary as JSON'],
-  ['skannr agent', 'Interactive exploration mode'],
-  ['skannr cache stats', 'Show cache hit/miss statistics'],
-  ['skannr cache clear', 'Clear all cached analysis results'],
-]
-
-const flags = [
-  ['--root <path>', 'Project root (default: current directory)'],
-  ['-n, --limit <number>', 'Number of top files to return (default: 10)'],
-  ['--json', 'Shortcut for --format json'],
-  ['--format <fmt>', 'human | markdown | json (default: human)'],
-  ['--lang <mode>', 'typescript | javascript | python | auto (default: auto)'],
-  ['--modules <keys>', 'Comma-separated module keys (auto-discovered when omitted)'],
-  ['--watch', 'Watch the tree and re-run analysis when files change'],
-  ['--skip-cache', 'Skip cache and force a full analysis'],
-  ['--with-mapping', 'Generate symbol mapping for on-demand retrieval'],
-  ['--mcp', 'Run as Model Context Protocol stdio server'],
-  ['--telemetry-on / --telemetry-off', 'Toggle anonymous flag-only telemetry'],
-]
-
-export default function CliReference() {
-  return (
-    <section className="py-24 px-5">
-      <div className="max-w-5xl mx-auto">
-        <Reveal>
-          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">Commands & options.</h2>
-        </Reveal>
-
-        <Reveal delay={80}>
-          <h3 className="mt-12 mb-4 text-xl font-semibold text-white/80">Commands</h3>
-          <div className="overflow-hidden rounded-xl border border-border bg-card transition-colors duration-300 hover:border-white/10">
-            <table className="w-full text-left">
-              <thead className="border-b border-white/5">
-                <tr className="text-[#888] text-sm">
-                  <th className="px-6 py-4 font-medium">Command</th>
-                  <th className="px-6 py-4 font-medium">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                {commands.map(([cmd, description]) => (
-                  <tr
-                    key={cmd}
-                    className="border-b border-white/5 transition-colors duration-200 last:border-b-0 hover:bg-white/[0.03]"
-                  >
-                    <td className="px-6 py-4 font-mono text-accent">{cmd}</td>
-                    <td className="px-6 py-4 text-[#d0d0d0]">{description}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Reveal>
-
-        <Reveal delay={160}>
-          <h3 className="mt-10 mb-4 text-xl font-semibold text-white/80">Options</h3>
-          <div className="overflow-hidden rounded-xl border border-border bg-card transition-colors duration-300 hover:border-white/10">
-            <table className="w-full text-left">
-              <thead className="border-b border-white/5">
-                <tr className="text-[#888] text-sm">
-                  <th className="px-6 py-4 font-medium">Flag</th>
-                  <th className="px-6 py-4 font-medium">Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                {flags.map(([flag, description]) => (
-                  <tr
-                    key={flag}
-                    className="border-b border-white/5 transition-colors duration-200 last:border-b-0 hover:bg-white/[0.03]"
-                  >
-                    <td className="px-6 py-4 font-mono text-accent">{flag}</td>
-                    <td className="px-6 py-4 text-[#d0d0d0]">{description}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Reveal>
-      </div>
-    </section>
-  )
-}

package/uca-landing/src/components/Features.jsx

@@ -1,88 +0,0 @@
-import {
-  AlertTriangle,
-  Code2,
-  Database,
-  FileSearch,
-  Network,
-  Plug,
-  RefreshCw,
-  ShieldCheck,
-  Zap,
-} from 'lucide-react'
-import Reveal from './Reveal'
-
-const features = [
-  {
-    icon: Network,
-    title: 'Hybrid Retrieval',
-    body: 'Lexical + structural + dependency-graph ranking. Finds architecturally central files, not just keyword matches.',
-  },
-  {
-    icon: Zap,
-    title: '96.5% Token Reduction',
-    body: 'Skeleton generation strips bodies while preserving signatures and types. Feed entire codebases to your AI without hitting limits.',
-  },
-  {
-    icon: AlertTriangle,
-    title: 'Risk Analysis',
-    body: 'Run "skannr risk" before pushing. Traverses the dependency graph, finds downstream affected files, flags untested code, and scores risk 0-10. Deterministic and instant.',
-  },
-  {
-    icon: Code2,
-    title: 'Auto Language Detection',
-    body: "Detects the repo's dominant language automatically. TypeScript, JavaScript, and Python supported. Generic fallback for everything else.",
-  },
-  {
-    icon: Database,
-    title: 'Smart Caching',
-    body: 'MD5-based file hashing detects changes automatically. Repeated queries run in milliseconds. 24-hour TTL with manual controls.',
-  },
-  {
-    icon: FileSearch,
-    title: 'Grounded Citations',
-    body: 'Every response includes an Evidence section listing the exact files and symbols used. Verify AI answers by tracing to source.',
-  },
-  {
-    icon: Plug,
-    title: 'MCP Server Built In',
-    body: 'Runs as a Model Context Protocol server. Plug into Gemini CLI, Claude Code, Cursor, or any MCP-compatible tool.',
-  },
-  {
-    icon: RefreshCw,
-    title: 'Watch Mode',
-    body: 'Use --watch on large repos you touch daily. Skannr debounces file changes and re-analyzes with a fresh run (cache bypassed per pass) so output stays current.',
-  },
-  {
-    icon: ShieldCheck,
-    title: 'Opt-in Telemetry',
-    body: 'Anonymous, flag-only usage stats if you enable them. No code, questions, or paths leave your machine. Turn on or off anytime with --telemetry-on / --telemetry-off.',
-  },
-]
-
-export default function Features() {
-  return (
-    <section id="features" className="py-24 px-5">
-      <div className="max-w-6xl mx-auto">
-        <Reveal>
-          <h2 className="text-3xl md:text-5xl font-bold text-center tracking-tight">
-            Everything you need. Nothing you don't.
-          </h2>
-        </Reveal>
-        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-          {features.map(({ icon: Icon, title, body }, i) => (
-            <Reveal key={title} delay={i * 70} className="h-full">
-              <article className="group h-full rounded-xl border border-border bg-card p-6 transition-all duration-300 hover:-translate-y-1 hover:border-accent/40 hover:bg-card-hover hover:shadow-[0_0_36px_rgba(0,212,255,0.12)]">
-                <Icon
-                  size={24}
-                  className="mb-4 text-accent transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
-                />
-                <h3 className="mb-2 text-xl font-semibold">{title}</h3>
-                <p className="text-[#888]">{body}</p>
-              </article>
-            </Reveal>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

package/uca-landing/src/components/Footer.jsx

@@ -1,35 +0,0 @@
-import Reveal from './Reveal'
-
-export default function Footer() {
-  return (
-    <footer className="border-t border-white/5 py-12 px-5">
-      <Reveal>
-        <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-8 md:grid-cols-3">
-          <div>
-            <p className="font-mono text-lg">Skannr</p>
-            <p className="mt-1 text-[#888]">Open-source · MIT License</p>
-          </div>
-
-          <p className="text-[#888] md:text-center">
-            Built by Vignesh <span className="text-accent">♥</span>
-          </p>
-
-          <div className="flex gap-5 md:justify-self-end">
-            <a
-              href="https://github.com/7vignesh/code-analyzer"
-              className="text-[#888] transition-colors hover:text-accent"
-            >
-              GitHub
-            </a>
-            <a
-              href="https://npmjs.com/package/skannr"
-              className="text-[#888] transition-colors hover:text-accent"
-            >
-              npm
-            </a>
-          </div>
-        </div>
-      </Reveal>
-    </footer>
-  )
-}

package/uca-landing/src/components/Hero.jsx

@@ -1,125 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useTypewriter } from '../hooks/useTypewriter'
-
-function renderLine(line, showCursor) {
-  const baseClass = line.startsWith('✓')
-    ? 'text-green'
-    : line.startsWith('───') || line.startsWith('────────────────')
-      ? 'text-[#333]'
-      : line.startsWith('Evidence:')
-        ? 'text-accent'
-        : 'text-[#e8e8e8]'
-
-  const parts = line.split('{ ... }')
-
-  return (
-    <span className={baseClass}>
-      {parts.map((part, idx) => (
-        <span key={`${part}-${idx}`}>
-          {part}
-          {idx < parts.length - 1 && <span className="text-[#777]">{'{ ... }'}</span>}
-        </span>
-      ))}
-      {showCursor && <span className="animate-pulse text-white">|</span>}
-    </span>
-  )
-}
-
-export default function Hero() {
-  const [start, setStart] = useState(false)
-
-  const lines = useMemo(
-    () => [
-      '$ skannr "how does authentication work?"',
-      '',
-      '✓ Detected language: TypeScript',
-      '✓ Discovered modules: auth, api, middleware, db',
-      '✓ Scanning 1,847 files...',
-      '',
-      '  Ranked 8 relevant files in 1.1s',
-      '  Token reduction: 96.5% vs full scan',
-      '',
-      '─── src/auth/AuthManager.ts ──────────────────',
-      '  export class AuthManager {',
-      '    constructor(private db: Database) {}',
-      '    async validateToken(token: string): Promise<User | null> { ... }',
-      '    async createSession(userId: string): Promise<Session> { ... }',
-      '  }',
-      '──────────────────────────────────────────────',
-      '',
-      'Evidence: AuthManager.ts · SessionStore.ts · middleware/auth.ts',
-    ],
-    []
-  )
-
-  useEffect(() => {
-    const t = setTimeout(() => setStart(true), 800)
-    return () => clearTimeout(t)
-  }, [])
-
-  const { displayed, done } = useTypewriter(start ? lines : [], 30, 400)
-
-  return (
-    <section
-      className="relative px-5 pt-32 pb-24 min-h-screen flex flex-col items-center justify-center"
-      style={{
-        backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)',
-        backgroundSize: '32px 32px',
-      }}
-    >
-      <div
-        className="inline-flex items-center gap-2 border border-white/10 rounded-full px-4 py-1 text-sm text-gray-400 mb-8 opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:0ms]"
-      >
-        <span className="w-2 h-2 rounded-full bg-green motion-safe:animate-pulse" />
-        CLI + MCP · Watch mode · Open source
-      </div>
-
-      <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-center leading-tight opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:80ms]">
-        Any repo. Any question.
-        <br />
-        <span className="text-accent">Instantly understood.</span>
-      </h1>
-
-      <p className="mt-6 max-w-xl text-center text-lg text-[#888] opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:180ms]">
-        Skannr helps AI assistants understand entire codebases using structural
-        skeletons and hybrid ranking. Human, Markdown, or JSON output; optional watch mode for
-        live re-analysis; MCP for IDE tools—all without shipping your source off the CLI.
-      </p>
-
-      <div className="flex flex-col sm:flex-row gap-4 mt-10 opacity-0 motion-safe:animate-fade-in-up motion-reduce:opacity-100 motion-reduce:translate-y-0 [animation-delay:280ms]">
-        <a
-          href="#install"
-          className="bg-accent text-black font-semibold px-6 py-3 rounded-lg shadow-[0_0_24px_-4px_rgba(0,212,255,0.5)] transition-all duration-300 hover:opacity-95 hover:shadow-[0_0_32px_-2px_rgba(0,212,255,0.65)] hover:-translate-y-0.5 active:translate-y-0"
-        >
-          Get started
-        </a>
-        <a
-          href="https://github.com/7vignesh/code-analyzer"
-          className="border border-white/20 px-6 py-3 rounded-lg transition-all duration-300 hover:border-accent/60 hover:text-accent hover:-translate-y-0.5 active:translate-y-0"
-        >
-          View on GitHub
-        </a>
-      </div>
-
-      <div className="w-full max-w-3xl mx-auto mt-16 rounded-xl border border-border bg-card overflow-hidden opacity-0 shadow-[0_0_40px_-16px_rgba(0,212,255,0.12)] motion-safe:animate-scale-in motion-safe:[animation-delay:420ms] motion-reduce:opacity-100 motion-reduce:translate-y-0 transition-[box-shadow,border-color] duration-500 hover:border-accent/25 hover:shadow-[0_0_48px_-12px_rgba(0,212,255,0.2)]">
-        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/5">
-          <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />
-          <span className="w-3 h-3 rounded-full bg-[#febc2e]" />
-          <span className="w-3 h-3 rounded-full bg-[#28c840]" />
-          <span className="ml-2 text-xs font-mono text-[#888]">bash</span>
-        </div>
-        <pre className="p-5 overflow-x-auto font-mono text-sm leading-7">
-          {lines.map((_, idx) => {
-            const current = displayed[idx] ?? ''
-            const showCursor = !done && idx === displayed.length - 1
-            return (
-              <div key={`line-${idx}`} className="min-h-6">
-                {renderLine(current, showCursor)}
-              </div>
-            )
-          })}
-        </pre>
-      </div>
-    </section>
-  )
-}