refactor: 静态变量提到对话外 + System Prompt 模板展开可视化

- 新建 SessionBar：会话变量独立于消息气泡，显示在对话顶部
- 重写 SystemPromptView：解析 {{var}} 占位符并内联展示模板→变量映射
- 重构 MessageList：提取 static_var 到 varMap，过滤后传入气泡
- 更新 SegmentRenderer + MessageBubble：传递 varMap 到 SystemPromptView
- 更新所有 Demo：static_var 从 user 消息迁移到 system 消息，使用真实会话配置（current_date、language、knowledge_cutoff）
- 更新导出逻辑：system 消息中收集 static_var 并在模板中展开 {{var}}
- 更新测试：新增模板展开用例，18 tests pass

src/components/SessionBar.tsx

@@ -0,0 +1,39 @@
+import type { StaticVarSegment } from '../types/protocol'
+import { Sliders } from 'lucide-react'
+
+interface SessionBarProps {
+  variables: StaticVarSegment[]
+}
+
+/**
+ * 对话区顶部的会话变量横栏 —— 会话级别的配置变量，独立于任何消息。
+ * 这些变量在对话开始时被注入到 System Prompt 模板中。
+ */
+export default function SessionBar({ variables }: SessionBarProps) {
+  if (variables.length === 0) return null
+
+  return (
+    <div className="shrink-0 border-b border-gray-200 bg-gradient-to-r from-blue-50/60 to-white px-4 py-2">
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* 标题 */}
+        <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-blue-400 uppercase tracking-wider mr-1">
+          <Sliders size={12} />
+          会话变量
+        </span>
+
+        {/* 变量列表 */}
+        {variables.map((v, i) => (
+          <span
+            key={i}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-white border border-blue-200 text-[11px] font-mono shadow-sm"
+            title={v.description}
+          >
+            <span className="text-blue-400">{'{{'}{v.name}{'}}'}</span>
+            <span className="text-gray-300">→</span>
+            <span className="text-blue-700 font-medium">{v.value}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}