agent_backend/app/demos.tsx

'use client';
import { useEffect, useState } from 'react';
import {
  ArrowRight,
  ArrowLeftRight,
  Laptop,
  Server,
  Play,
  RotateCcw,
  SkipForward,
  Check,
  Pause,
} from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';

const protocols = {
  http: {
    name: '普通 HTTP',
    hint: '一次请求，返回一个完整 JSON 响应。',
    steps: [
      '客户端发送 POST /generate',
      '服务端处理；客户端等待完整结果',
      '完整 JSON 到达，客户端显示结果',
      '本次响应结束；底层连接可以复用',
    ],
    packets: [
      'POST /generate\n{"prompt":"解释 API"}',
      '正在生成完整结果…',
      'HTTP/1.1 200 OK\nContent-Type: application/json\n\n{"text":"API 是程序之间约定的调用接口。"}',
      '响应已完成',
    ],
    labels: ['请求', '等待结果', '完整响应', '完成'],
  },
  sse: {
    name: 'SSE 流式响应',
    hint: '一次 HTTP 请求，服务端在同一个响应里连续发送事件。',
    steps: [
      '客户端发送 GET /stream，等待事件',
      '服务端发送第一个 token 事件',
      '服务端继续发送 token，客户端追加显示',
      '服务端发送 done；示例客户端主动关闭 EventSource',
    ],
    packets: [
      'GET /stream?prompt=hello\nAccept: text/event-stream',
      'event: token\ndata: {"text":"API 是"}\n\n',
      'event: token\ndata: {"text":"程序之间的接口。"}\n\n',
      'event: done\ndata: {}\n\n',
    ],
    labels: ['建立请求', '第 1 个事件', '第 2 个事件', 'done / close'],
  },
  ws: {
    name: 'WebSocket',
    hint: '握手完成后，客户端和服务端都可以独立发送消息。',
    steps: [
      'WebSocket 通过握手建立连接',
      '客户端发送 hello',
      '服务端回复 echo 消息；连接继续保持',
      '客户端发送 ping，服务端回复 pong；仍可继续通信',
    ],
    packets: [
      'new WebSocket("ws://127.0.0.1:8000/ws")',
      '客户端 → 服务端\nhello',
      '服务端 → 客户端\n{"type":"echo","text":"hello"}',
      '客户端 → 服务端: ping\n服务端 → 客户端: {"type":"pong"}',
    ],
    labels: ['连接建立', '客户端发消息', '服务端发消息', '双向持续通信'],
  },
};
export function ProtocolDemo() {
  const [mode, setMode] = useState<keyof typeof protocols>('sse');
  const [step, setStep] = useState(-1);
  const [playing, setPlaying] = useState(false);
  const data = protocols[mode];
  useEffect(() => {
    if (!playing) return;
    const id = window.setTimeout(() => {
      const next = Math.min(step + 1, 3);
      setStep(next);
      if (next === 3) setPlaying(false);
    }, 950);
    return () => window.clearTimeout(id);
  }, [playing, step]);
  const reset = () => {
    setPlaying(false);
    setStep(-1);
  };
  return (
    <div className="demo">
      <div className="demo-top">
        <span className="demo-label">通信过程演示</span>
        <span className="simulation">浏览器内模拟 · 不发送网络请求</span>
      </div>
      <Tabs
        value={mode}
        onValueChange={(v) => {
          reset();
          setMode(v as keyof typeof protocols);
        }}
      >
        <TabsList className="protocol-tabs">
          {Object.entries(protocols).map(([key, value]) => (
            <TabsTrigger value={key} key={key}>
              {value.name}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <p className="demo-description">{data.hint}</p>
      <div className="connection-scene">
        <div className="endpoint">
          <Laptop size={26} />
          <strong>客户端</strong>
          <span>Browser / Python</span>
        </div>
        <div className={`connection-track ${step >= 0 ? 'active' : ''}`}>
          <span>{step < 0 ? '等待开始' : data.labels[step]}</span>
          <div className="wire">
            {mode === 'ws' ? (
              <ArrowLeftRight size={20} />
            ) : (
              <ArrowRight
                size={20}
                className={step > 0 ? 'return-arrow' : ''}
              />
            )}
          </div>
          <small>
            {mode === 'http'
              ? 'application/json'
              : mode === 'sse'
                ? 'text/event-stream'
                : 'ws:// · 双向消息'}
          </small>
        </div>
        <div className="endpoint">
          <Server size={25} />
          <strong>API 服务</strong>
          <span>FastAPI / Uvicorn</span>
        </div>
      </div>
      <div className="demo-result" aria-live="polite">
        <span className="step-indicator">
          {step < 0 ? 'READY' : `0${step + 1} / 04`}
        </span>
        <p>
          {step < 0 ? '点击播放或单步，观察消息的发送顺序。' : data.steps[step]}
        </p>
      </div>
      <pre className="packet">
        <code>{step < 0 ? '// 消息将在这里显示' : data.packets[step]}</code>
      </pre>
      <div className="demo-controls">
        <Button
          onClick={() => {
            if (step === 3) setStep(-1);
            setPlaying(!playing);
          }}
          variant="outline"
        >
          {playing ? <Pause /> : <Play />}
          {playing ? '暂停' : '播放过程'}
        </Button>
        <Button
          variant="ghost"
          disabled={step === 3 || playing}
          onClick={() => setStep((s) => s + 1)}
        >
          <SkipForward />
          单步
        </Button>
        <Button variant="ghost" onClick={reset} aria-label="重置通信演示">
          <RotateCcw />
          重置
        </Button>
        <span className="step-dots" aria-hidden="true">
          {[0, 1, 2, 3].map((s) => (
            <i className={s <= step ? 'on' : ''} key={s} />
          ))}
        </span>
      </div>
    </div>
  );
}

const requestParts = [
  {
    label: '请求行',
    code: 'POST /notes HTTP/1.1',
    description:
      'POST 是请求方法，/notes 是资源路径，HTTP/1.1 是协议版本。方法与路径共同决定匹配哪个路由。',
  },
  {
    label: '请求头',
    code: 'Host: 127.0.0.1:8000\nContent-Type: application/json\nAccept: application/json',
    description:
      'Content-Type 描述发送的正文格式；Accept 表示希望接收的响应格式。它们属于请求元数据。',
  },
  {
    label: '请求体',
    code: '{"title":"第一条笔记","content":"hello","pinned":false}',
    description:
      'JSON 是传输格式。FastAPI 读取正文后，由 Pydantic 按字段类型和约束进行校验，再把数据交给函数。',
  },
];
export function HttpDemo() {
  const [part, setPart] = useState(0);
  const [stage, setStage] = useState(-1);
  const [invalid, setInvalid] = useState(false);
  const steps = ['匹配路由', '校验输入', '执行函数', '序列化响应'];
  const done = stage === 3 || (invalid && stage === 1);
  return (
    <div className="demo">
      <div className="demo-top">
        <span className="demo-label">拆开一次 HTTP 请求</span>
        <span className="simulation">请求模型演示</span>
      </div>
      <Tabs value={String(part)} onValueChange={(v) => setPart(Number(v))}>
        <TabsList className="protocol-tabs">
          {requestParts.map((p, i) => (
            <TabsTrigger value={String(i)} key={p.label}>
              {p.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <pre className="packet">
        <code>
          {invalid && part === 2
            ? '{"content":"hello","pinned":false}'
            : requestParts[part].code}
        </code>
      </pre>
      <p className="demo-description">{requestParts[part].description}</p>
      <div className="request-path">
        {steps.map((s, i) => (
          <div key={s} className={stage >= i ? 'reached' : ''}>
            <span>{stage > i ? <Check size={13} /> : i + 1}</span>
            <small>{s}</small>
            {i < 3 && <ArrowRight size={13} />}
          </div>
        ))}
      </div>
      <Tabs
        value={invalid ? 'invalid' : 'valid'}
        onValueChange={(v) => {
          setInvalid(v === 'invalid');
          setStage(-1);
        }}
      >
        <TabsList>
          <TabsTrigger value="valid">合法请求</TabsTrigger>
          <TabsTrigger value="invalid">缺少 title</TabsTrigger>
        </TabsList>
      </Tabs>
      <div className="demo-result" aria-live="polite">
        <p>
          {stage < 0
            ? '单步查看服务端如何处理这个请求。'
            : invalid && stage === 1
              ? '422 Unprocessable Entity：缺少 title；路由函数没有执行。'
              : stage === 3
                ? '201 Created：返回新笔记的 JSON，响应中包含 id。'
                : `当前：${steps[stage]}。继续查看下一步。`}
        </p>
      </div>
      <div className="demo-controls">
        <Button
          variant="outline"
          disabled={done}
          onClick={() => setStage((s) => s + 1)}
        >
          <SkipForward />
          {stage < 0 ? '发送请求' : '下一步'}
        </Button>
        <Button variant="ghost" onClick={() => setStage(-1)}>
          <RotateCcw />
          重置
        </Button>
      </div>
    </div>
  );
}

export function AsyncDemo() {
  const [tick, setTick] = useState(0);
  const [playing, setPlaying] = useState(false);
  useEffect(() => {
    if (!playing) return;
    const id = setTimeout(() => {
      const next = Math.min(6, tick + 1);
      setTick(next);
      if (next === 6) setPlaying(false);
    }, 750);
    return () => clearTimeout(id);
  }, [playing, tick]);
  return (
    <div className="demo">
      <div className="demo-top">
        <span className="demo-label">两个请求，各等待 3 秒 I/O</span>
        <span className="simulation">简化时间线 · 忽略其他开销</span>
      </div>
      <p className="demo-description">
        假设两个请求同时到达同一个事件循环。阻塞调用占用线程；可等待的 I/O
        会让出事件循环，让另一个请求先开始等待。
      </p>
      <div className="async-lanes">
        {[
          {
            label: '在 async 路由中阻塞',
            total: 6,
            rows: [
              { n: 'A', start: 0 },
              { n: 'B', start: 3 },
            ],
          },
          {
            label: '使用 await 等待 I/O',
            total: 3,
            rows: [
              { n: 'A', start: 0 },
              { n: 'B', start: 0 },
            ],
          },
        ].map((l) => (
          <div key={l.label}>
            <div className="lane-label">
              <strong>{l.label}</strong>
              <span>总耗时约 {l.total}s</span>
            </div>
            {l.rows.map((r) => (
              <div className="timeline-row" key={r.n}>
                <span>{r.n}</span>
                <div className="timeline">
                  {Array.from({ length: 6 }, (_, i) => (
                    <i
                      key={i}
                      className={
                        i >= r.start && i < r.start + 3
                          ? tick > i
                            ? 'elapsed'
                            : 'pending'
                          : ''
                      }
                    >
                      {i >= r.start && i < r.start + 3
                        ? tick > i
                          ? 'I/O'
                          : '等待'
                        : ''}
                    </i>
                  ))}
                </div>
                <span>
                  {tick >= r.start + 3 ? (
                    <Check size={14} />
                  ) : tick >= r.start ? (
                    '…'
                  ) : (
                    '—'
                  )}
                </span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="demo-controls">
        <Button
          variant="outline"
          onClick={() => {
            if (tick === 6) setTick(0);
            setPlaying(!playing);
          }}
        >
          {playing ? <Pause /> : <Play />}
          {playing ? '暂停' : '播放时间线'}
        </Button>
        <Button
          variant="ghost"
          disabled={tick === 6 || playing}
          onClick={() => setTick((t) => t + 1)}
        >
          <SkipForward />
          +1 秒
        </Button>
        <Button
          variant="ghost"
          onClick={() => {
            setPlaying(false);
            setTick(0);
          }}
          aria-label="重置异步演示"
        >
          <RotateCcw />
        </Button>
        <span className="time-readout" aria-live="polite">
          t = {tick}s
        </span>
      </div>
      <p className="demo-footnote">
        这里比较 I/O 等待。CPU 密集计算不会因为添加 async 而变快；FastAPI 的普通
        def 路由会在线程池中执行。
      </p>
    </div>
  );
}