feat: Prompt Envelope Protocol MVP

- 定义 11 种 Segment 类型（text, static_var, system_prompt, memory, skills, tool_overview, tool_call_request/result, document, long_text, media）
- 每种 Segment 有独立的颜色编码和折叠交互
- 通用 CollapsiblePanel + SegmentRenderer 路由架构
- 4 个 Demo 场景覆盖全部 9 种上下文类型
- 导出为 OpenAI Chat Completions Format（model + messages + tools）
- tool_overview -> 请求级 tools[]（含 JSON Schema）
- tool_call_request -> assistant.tool_calls[]
- tool_call_result -> tool-role message（ID 配对）
- 17 个单元测试全部通过
- React 18 + TypeScript + Vite + Tailwind CSS

src/components/MessageList.tsx

@@ -0,0 +1,24 @@
+import type { Message } from '../types/protocol'
+import MessageBubble from './MessageBubble'
+
+interface MessageListProps {
+  messages: Message[]
+}
+
+export default function MessageList({ messages }: MessageListProps) {
+  if (messages.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-gray-300 text-sm">
+        选择一个 Demo 场景开始
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
+      {messages.map((msg) => (
+        <MessageBubble key={msg.id} message={msg} />
+      ))}
+    </div>
+  )
+}