@yuku123/z-agent-frontend-component 0.1.1

package/src/pages/trace/DebugPlayground.jsx

@@ -0,0 +1,357 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+    Alert,
+    AutoComplete,
+    Badge,
+    Button,
+    Card,
+    Col,
+    Divider,
+    Empty,
+    Input,
+    Layout,
+    List,
+    message,
+    Row,
+    Segmented,
+    Select,
+    Space,
+    Spin,
+    Tabs,
+    Tag,
+    Tooltip,
+    Tree,
+    Typography,
+} from 'antd';
+import {
+    ApiOutlined,
+    AppstoreOutlined,
+    ArrowLeftOutlined,
+    BulbOutlined,
+    ClockCircleOutlined,
+    CodeOutlined,
+    DashboardOutlined,
+    FileSearchOutlined,
+    FilterOutlined,
+    HistoryOutlined,
+    ReloadOutlined,
+    SearchOutlined,
+    ThunderboltOutlined,
+} from '@ant-design/icons';
+import MetricsDashboard from './components/MetricsDashboard';
+import Timeline from './components/Timeline';
+import ToolCallTree from './components/ToolCallTree';
+import RagFragments from './components/RagFragments';
+import {traceApi} from '@/api';
+
+const {Sider, Content} = Layout;
+const {Text, Title} = Typography;
+
+/**
+ * Agent Debug Playground 主页面 (FEATURE013 T7)
+ *
+ * <p>布局:
+ * <pre>
+ *   ┌──────────────────────────────────────────────────┐
+ *   │ Toolbar: 刷新 / 状态过滤 / 类型过滤 / 搜索       │
+ *   ├─────────┬────────────────────────────────────────┤
+ *   │ Trace   │ MetricsDashboard (KPI + 调用分布)     │
+ *   │ 列表    ├────────────────────────────────────────┤
+ *   │         │ Tabs: Timeline / Tool Tree / RAG       │
+ *   └─────────┴────────────────────────────────────────┘
+ * </pre>
+ */
+const DebugPlayground = () => {
+    // ====== Trace 列表 ======
+    const [traces, setTraces] = useState([]);
+    const [tracesLoading, setTracesLoading] = useState(false);
+    const [statusFilter, setStatusFilter] = useState('ALL');
+    const [keyword, setKeyword] = useState('');
+
+    // ====== 当前选中 trace ======
+    const [selectedTraceId, setSelectedTraceId] = useState(null);
+    const [traceDetail, setTraceDetail] = useState(null); // {trace, spans}
+    const [detailLoading, setDetailLoading] = useState(false);
+
+    // ====== Tab ======
+    const [activeTab, setActiveTab] = useState('timeline');
+
+    // ====== 健康检查 ======
+    const [health, setHealth] = useState(null);
+
+    // ============ 加载 trace 列表 ============
+    const loadTraces = useCallback(async () => {
+        setTracesLoading(true);
+        try {
+            const resp = await traceApi.list({pageNum: 1, pageSize: 50});
+            const data = resp?.data || resp?.records || resp || [];
+            setTraces(Array.isArray(data) ? data : []);
+        } catch (e) {
+            message.error('加载 trace 列表失败: ' + (e?.message || '未知错误'));
+        } finally {
+            setTracesLoading(false);
+        }
+    }, []);
+
+    // ============ 加载健康检查 ============
+    const loadHealth = useCallback(async () => {
+        try {
+            const resp = await traceApi.health();
+            setHealth(resp?.data || resp);
+        } catch {
+            setHealth(null);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadTraces();
+        loadHealth();
+    }, [loadTraces, loadHealth]);
+
+    // ============ 过滤 trace 列表 ============
+    const filteredTraces = useMemo(() => {
+        let arr = traces;
+        if (statusFilter !== 'ALL') {
+            arr = arr.filter(t => t.status === statusFilter);
+        }
+        if (keyword.trim()) {
+            const kw = keyword.trim().toLowerCase();
+            arr = arr.filter(t =>
+                (t.traceId && t.traceId.toLowerCase().includes(kw)) ||
+                (t.agentName && t.agentName.toLowerCase().includes(kw)) ||
+                (t.userGoal && t.userGoal.toLowerCase().includes(kw)) ||
+                (t.appCode && t.appCode.toLowerCase().includes(kw)),
+            );
+        }
+        return arr;
+    }, [traces, statusFilter, keyword]);
+
+    // ============ 选中 trace 后加载详情 ============
+    const loadTraceDetail = useCallback(async (traceId) => {
+        setDetailLoading(true);
+        try {
+            const resp = await traceApi.get(traceId);
+            const data = resp?.data || resp;
+            if (data && data.trace) {
+                setTraceDetail(data);
+                setSelectedTraceId(traceId);
+            } else {
+                message.warning('未找到 trace: ' + traceId);
+                setTraceDetail(null);
+            }
+        } catch (e) {
+            message.error('加载 trace 详情失败: ' + (e?.message || '未知错误'));
+            setTraceDetail(null);
+        } finally {
+            setDetailLoading(false);
+        }
+    }, []);
+
+    // 自动加载最新一个 trace
+    useEffect(() => {
+        if (traces.length && !selectedTraceId) {
+            loadTraceDetail(traces[0].traceId);
+        }
+    }, [traces, selectedTraceId, loadTraceDetail]);
+
+    // ============ 渲染左侧 trace 列表项 ============
+    const renderTraceItem = (trace) => {
+        const isSelected = selectedTraceId === trace.traceId;
+        const statusBadge = {
+            SUCCESS: 'success', FAILURE: 'error', RUNNING: 'processing', ERROR: 'error',
+        }[trace.status] || 'default';
+
+        return (
+            <List.Item
+                key={trace.traceId}
+                style={{
+                    padding: '10px 12px',
+                    cursor: 'pointer',
+                    background: isSelected ? '#e6f4ff' : 'transparent',
+                    borderLeft: isSelected ? '3px solid #1677ff' : '3px solid transparent',
+                }}
+                onClick={() => loadTraceDetail(trace.traceId)}
+            >
+                <div style={{width: '100%'}}>
+                    <div style={{display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4}}>
+                        <Badge status={statusBadge}/>
+                        <Tag color={statusBadge === 'success' ? 'green' : statusBadge === 'error' ? 'red' : 'blue'}>
+                            {trace.status}
+                        </Tag>
+                        <Tooltip title="DB ID">
+                            <span style={{fontSize: 11, color: '#999'}}>#{trace.id}</span>
+                        </Tooltip>
+                        <div style={{flex: 1}}/>
+                        <span style={{fontSize: 11, color: '#999'}}>
+                            {trace.durationMs != null ? `${trace.durationMs}ms` : '—'}
+                        </span>
+                    </div>
+                    <div style={{fontSize: 12, color: '#333', fontWeight: 500, marginBottom: 4}}
+                         title={trace.userGoal}>
+                        {truncate(trace.userGoal, 60)}
+                    </div>
+                    <div style={{fontSize: 10, color: '#999', display: 'flex', gap: 6}}>
+                        <Tag color="cyan" style={{margin: 0}}>{trace.agentName || '—'}</Tag>
+                        <span>{trace.startedAt ? new Date(trace.startedAt).toLocaleTimeString() : '—'}</span>
+                    </div>
+                </div>
+            </List.Item>
+        );
+    };
+
+    const trace = traceDetail?.trace;
+    const spans = traceDetail?.spans || [];
+
+    return (
+        <Layout style={{height: 'calc(100vh - 64px)', background: '#f5f5f5'}}>
+            {/* ============ 左侧 trace 列表 ============ */}
+            <Sider width={340} theme="light" style={{
+                borderRight: '1px solid #e8e8e8',
+                overflow: 'auto',
+            }}>
+                {/* 健康检查横幅 */}
+                {health && (
+                    <div style={{
+                        padding: '8px 12px',
+                        background: health.trace_mapper_ready ? '#f6ffed' : '#fff7e6',
+                        borderBottom: '1px solid #e8e8e8',
+                        fontSize: 11,
+                    }}>
+                        <Space size={4}>
+                            <Badge status={health.trace_mapper_ready ? 'success' : 'warning'}/>
+                            <span>
+                                trace 模块: {health.trace_mapper_ready ? '就绪' : '未启动'}
+                                {health.total_traces != null && ` · 共 ${health.total_traces} 条`}
+                            </span>
+                        </Space>
+                    </div>
+                )}
+
+                {/* Toolbar */}
+                <div style={{padding: '10px 12px', borderBottom: '1px solid #e8e8e8'}}>
+                    <Title level={5} style={{margin: '0 0 8px 0'}}>
+                        <HistoryOutlined/> Trace 列表
+                    </Title>
+                    <Space.Compact style={{width: '100%', marginBottom: 8}}>
+                        <Input
+                            prefix={<SearchOutlined/>}
+                            placeholder="搜索 trace_id / agent / goal"
+                            value={keyword}
+                            onChange={e => setKeyword(e.target.value)}
+                            allowClear
+                        />
+                        <Button icon={<ReloadOutlined/>} onClick={loadTraces}/>
+                    </Space.Compact>
+                    <Segmented
+                        block
+                        size="small"
+                        value={statusFilter}
+                        onChange={setStatusFilter}
+                        options={[
+                            {label: '全部', value: 'ALL'},
+                            {label: '成功', value: 'SUCCESS'},
+                            {label: '失败', value: 'FAILURE'},
+                            {label: '运行中', value: 'RUNNING'},
+                        ]}
+                    />
+                </div>
+
+                {/* Trace 列表 */}
+                <Spin spinning={tracesLoading}>
+                    {filteredTraces.length > 0 ? (
+                        <List
+                            size="small"
+                            dataSource={filteredTraces}
+                            renderItem={renderTraceItem}
+                            split={false}
+                            locale={{emptyText: <Empty description="无匹配 trace" image={Empty.PRESENTED_IMAGE_SIMPLE}/>}}
+                        />
+                    ) : !tracesLoading && (
+                        <Empty
+                            image={Empty.PRESENTED_IMAGE_SIMPLE}
+                            description={health?.trace_mapper_ready === false ? 'trace 表未启用' : '暂无 trace'}
+                            style={{padding: '40px 0'}}
+                        />
+                    )}
+                </Spin>
+            </Sider>
+
+            {/* ============ 右侧详情 ============ */}
+            <Content style={{padding: '16px', overflow: 'auto'}}>
+                <Spin spinning={detailLoading}>
+                    {!trace ? (
+                        <Empty
+                            image={Empty.PRESENTED_IMAGE_SIMPLE}
+                            description="选择左侧 trace 查看详情"
+                            style={{paddingTop: 100}}
+                        />
+                    ) : (
+                        <Space direction="vertical" size="middle" style={{width: '100%'}}>
+                            {/* 顶部 Metrics 仪表盘 */}
+                            <Card
+                                title={<span><DashboardOutlined/> 调试仪表盘</span>}
+                                size="small"
+                                extra={
+                                    <Space>
+                                        <Tooltip title="刷新">
+                                            <Button
+                                                size="small" icon={<ReloadOutlined/>}
+                                                onClick={() => loadTraceDetail(trace.traceId)}
+                                            />
+                                        </Tooltip>
+                                        <Tag color="blue">{trace.traceId}</Tag>
+                                    </Space>
+                                }
+                            >
+                                <MetricsDashboard trace={trace} spans={spans}/>
+                            </Card>
+
+                            {/* 4 段式 Tab */}
+                            <Card size="small" styles={{body: {paddingTop: 4}}}>
+                                <Tabs
+                                    activeKey={activeTab}
+                                    onChange={setActiveTab}
+                                    items={[
+                                        {
+                                            key: 'timeline',
+                                            label: <span><HistoryOutlined/> 时间线 ({spans.length})</span>,
+                                            children: <Timeline spans={spans}/>,
+                                        },
+                                        {
+                                            key: 'tools',
+                                            label: (
+                                                <span>
+                                                    <CodeOutlined/> 工具/LLM 树 (
+                                                    {spans.filter(s =>
+                                                        s.spanType === 'tool_call' || s.spanType === 'llm_call').length})
+                                                </span>
+                                            ),
+                                            children: <ToolCallTree spans={spans}/>,
+                                        },
+                                        {
+                                            key: 'rag',
+                                            label: (
+                                                <span>
+                                                    <FileSearchOutlined/> RAG 片段 (
+                                                    {spans.filter(s => s.spanType === 'retrieve').length})
+                                                </span>
+                                            ),
+                                            children: <RagFragments spans={spans}/>,
+                                        },
+                                    ]}
+                                />
+                            </Card>
+                        </Space>
+                    )}
+                </Spin>
+            </Content>
+        </Layout>
+    );
+};
+
+function truncate(s, max) {
+    if (!s) return s;
+    return s.length > max ? s.substring(0, max) + '…' : s;
+}
+
+export default DebugPlayground;

package/src/pages/trace/components/MetricsDashboard.jsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import {Card, Col, Empty, Progress, Row, Statistic, Tag} from 'antd';
+import {
+    ClockCircleOutlined,
+    CommentOutlined,
+    ThunderboltOutlined,
+    CodeOutlined,
+    FileSearchOutlined,
+    RocketOutlined,
+} from '@ant-design/icons';
+
+/**
+ * MetricsDashboard 组件 (FEATURE013 T7)
+ *
+ * <p>顶部 KPI 卡 + Token/延迟仪表盘:
+ * <ul>
+ *   <li>总耗时 / 状态 / 调用计数 (LLM / Tool / RAG)</li>
+ *   <li>各类型 span 数量占比</li>
+ *   <li>Token 使用 (若 trace 包含 metrics 信息)</li>
+ * </ul>
+ */
+const MetricsDashboard = ({trace, spans = []}) => {
+    if (!trace) return <Empty description="请选择左侧 trace" image={Empty.PRESENTED_IMAGE_SIMPLE}/>;
+
+    // 计算各类 span 数量
+    const counts = spans.reduce((acc, s) => {
+        acc[s.spanType] = (acc[s.spanType] || 0) + 1;
+        return acc;
+    }, {});
+    const totalSpans = spans.length;
+    const llmCalls = counts.llm_call || 0;
+    const toolCalls = counts.tool_call || 0;
+    const ragCalls = counts.retrieve || 0;
+    const thinkSteps = counts.think || 0;
+    const failedSpans = spans.filter(s => s.status === 'FAILURE' || s.status === 'ERROR').length;
+
+    // 状态颜色
+    const statusColor = {
+        SUCCESS: 'success', FAILURE: 'error', RUNNING: 'processing', ERROR: 'error',
+    }[trace.status] || 'default';
+
+    return (
+        <div>
+            {/* 顶部 KPI 卡 */}
+            <Row gutter={[12, 12]}>
+                <Col xs={24} sm={12} md={4}>
+                    <Card size="small" hoverable>
+                        <Statistic
+                            title={<span><RocketOutlined/> 状态</span>}
+                            value={trace.status}
+                            valueStyle={{color: statusColor === 'success' ? '#3f8600' :
+                                statusColor === 'error' ? '#cf1322' : '#1677ff', fontSize: 16}}
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={12} md={4}>
+                    <Card size="small" hoverable>
+                        <Statistic
+                            title={<span><ClockCircleOutlined/> 总耗时</span>}
+                            value={trace.durationMs || 0}
+                            suffix="ms"
+                            valueStyle={{color: '#1677ff'}}
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={12} md={4}>
+                    <Card size="small" hoverable>
+                        <Statistic
+                            title={<span><CommentOutlined/> Span 总数</span>}
+                            value={totalSpans}
+                            suffix="个"
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={12} md={4}>
+                    <Card size="small" hoverable>
+                        <Statistic
+                            title="失败 Span"
+                            value={failedSpans}
+                            suffix="个"
+                            valueStyle={{color: failedSpans > 0 ? '#cf1322' : '#3f8600'}}
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={12} md={8}>
+                    <Card size="small" hoverable>
+                        <Statistic
+                            title={<span><CommentOutlined/> 用户目标 / Agent</span>}
+                            value={trace.userGoal || '(空)'}
+                            valueStyle={{fontSize: 13, lineHeight: 1.4}}
+                        />
+                        <div style={{marginTop: 6, fontSize: 11, color: '#666'}}>
+                            agent: <Tag>{trace.agentName || '—'}</Tag>
+                            app: <Tag>{trace.appCode || '—'}</Tag>
+                            session: <Tag>{trace.sessionId || '—'}</Tag>
+                        </div>
+                    </Card>
+                </Col>
+            </Row>
+
+            {/* 调用分布 */}
+            <Row gutter={[12, 12]} style={{marginTop: 12}}>
+                <Col xs={24} sm={8}>
+                    <Card size="small" title={<span><ThunderboltOutlined/> LLM 调用</span>}>
+                        <Statistic value={llmCalls} suffix="次" valueStyle={{color: '#1677ff'}}/>
+                        <Progress
+                            percent={totalSpans ? Math.round(llmCalls * 100 / totalSpans) : 0}
+                            strokeColor="#1677ff" size="small" showInfo={false}
+                            style={{marginTop: 6}}
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                    <Card size="small" title={<span><CodeOutlined/> 工具调用</span>}>
+                        <Statistic value={toolCalls} suffix="次" valueStyle={{color: '#fa8c16'}}/>
+                        <Progress
+                            percent={totalSpans ? Math.round(toolCalls * 100 / totalSpans) : 0}
+                            strokeColor="#fa8c16" size="small" showInfo={false}
+                            style={{marginTop: 6}}
+                        />
+                    </Card>
+                </Col>
+                <Col xs={24} sm={8}>
+                    <Card size="small" title={<span><FileSearchOutlined/> RAG 检索</span>}>
+                        <Statistic value={ragCalls} suffix="次" valueStyle={{color: '#52c41a'}}/>
+                        <Progress
+                            percent={totalSpans ? Math.round(ragCalls * 100 / totalSpans) : 0}
+                            strokeColor="#52c41a" size="small" showInfo={false}
+                            style={{marginTop: 6}}
+                        />
+                    </Card>
+                </Col>
+            </Row>
+
+            {/* 时间线 + Trace 元信息 */}
+            <Card size="small" title="Trace 元信息" style={{marginTop: 12}}>
+                <Row gutter={[8, 4]}>
+                    <Col span={12}>
+                        <span style={{color: '#666'}}>trace_id:</span>{' '}
+                        <code>{trace.traceId}</code>
+                    </Col>
+                    <Col span={12}>
+                        <span style={{color: '#666'}}>DB ID:</span> {trace.id}
+                    </Col>
+                    <Col span={12}>
+                        <span style={{color: '#666'}}>开始:</span> {trace.startedAt}
+                    </Col>
+                    <Col span={12}>
+                        <span style={{color: '#666'}}>结束:</span> {trace.endedAt || '(进行中)'}
+                    </Col>
+                    <Col span={24}>
+                        <span style={{color: '#666'}}>LLM 调用 / Tool 调用 / RAG / Think:</span>{' '}
+                        <Tag color="blue">{llmCalls}</Tag>
+                        <Tag color="orange">{toolCalls}</Tag>
+                        <Tag color="green">{ragCalls}</Tag>
+                        <Tag color="gold">{thinkSteps}</Tag>
+                    </Col>
+                </Row>
+            </Card>
+        </div>
+    );
+};
+
+export default MetricsDashboard;

package/src/pages/trace/components/RagFragments.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import {Empty, Tag, Tooltip} from 'antd';
+import {FileTextOutlined} from '@ant-design/icons';
+
+/**
+ * RagFragments 组件 (FEATURE013 T7)
+ *
+ * <p>展示 retrieve 类型的 span 召回的 top-k 分块, 含相似度分数.
+ */
+const RagFragments = ({spans = []}) => {
+    // 找所有 retrieve span
+    const retrieveSpans = spans.filter(s => s.spanType === 'retrieve');
+    if (!retrieveSpans.length) {
+        return (
+            <Empty
+                description="本次执行没有 RAG 检索"
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+            />
+        );
+    }
+
+    let totalFragments = 0;
+    let topScore = -1;
+
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
+            {retrieveSpans.map((span, idx) => {
+                let chunks = [];
+                let retrievalType = 'VECTOR';
+                let knowledgeBaseCode = null;
+                try {
+                    const attrs = span.attributes
+                        ? (typeof span.attributes === 'string' ? JSON.parse(span.attributes) : span.attributes)
+                        : null;
+                    if (attrs) {
+                        chunks = attrs.chunks || attrs.results || [];
+                        retrievalType = attrs.retrieval_type || attrs.retrievalType || 'VECTOR';
+                        knowledgeBaseCode = attrs.knowledge_base_code || attrs.knowledgeBaseCode;
+                    }
+                } catch { /* ignore */ }
+                if (!Array.isArray(chunks)) chunks = [];
+
+                totalFragments += chunks.length;
+                chunks.forEach(c => {
+                    const s = parseFloat(c.score);
+                    if (!isNaN(s) && s > topScore) topScore = s;
+                });
+
+                return (
+                    <div key={span.spanId || idx} style={{
+                        border: '1px solid #b7eb8f',
+                        borderRadius: 6,
+                        background: '#f6ffed',
+                        padding: '10px 12px',
+                    }}>
+                        <div style={{
+                            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
+                        }}>
+                            <FileTextOutlined style={{color: '#52c41a'}}/>
+                            <Tag color="green">{retrievalType}</Tag>
+                            {knowledgeBaseCode && (
+                                <Tag color="blue">知识库: {knowledgeBaseCode}</Tag>
+                            )}
+                            <Tag>{chunks.length} 个分块</Tag>
+                            <div style={{flex: 1}}/>
+                            <span style={{fontSize: 11, color: '#999'}}>
+                                耗时 {span.durationMs != null ? `${span.durationMs}ms` : '—'}
+                            </span>
+                        </div>
+                        {chunks.length > 0 ? (
+                            <div style={{display: 'flex', flexDirection: 'column', gap: 6}}>
+                                {chunks.map((chunk, ci) => {
+                                    const score = parseFloat(chunk.score) || 0;
+                                    const scoreColor = score >= 0.8 ? 'green' : score >= 0.5 ? 'orange' : 'red';
+                                    return (
+                                        <div key={ci} style={{
+                                            background: '#fff',
+                                            padding: '8px 10px',
+                                            borderRadius: 4,
+                                            border: '1px solid #d9f7be',
+                                        }}>
+                                            <div style={{
+                                                display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4,
+                                            }}>
+                                                <Tag color="cyan">#{ci + 1}</Tag>
+                                                {chunk.document_code && (
+                                                    <span style={{fontSize: 11, color: '#666'}}>
+                                                        doc: {chunk.document_code}
+                                                    </span>
+                                                )}
+                                                {chunk.chunk_index != null && (
+                                                    <span style={{fontSize: 11, color: '#999'}}>
+                                                        chunk #{chunk.chunk_index}
+                                                    </span>
+                                                )}
+                                                <div style={{flex: 1}}/>
+                                                <Tooltip title="相似度分数">
+                                                    <Tag color={scoreColor}>{(score * 100).toFixed(1)}%</Tag>
+                                                </Tooltip>
+                                            </div>
+                                            <div style={{
+                                                fontSize: 12, color: '#333',
+                                                lineHeight: 1.5,
+                                                whiteSpace: 'pre-wrap',
+                                                wordBreak: 'break-word',
+                                                maxHeight: 100, overflow: 'auto',
+                                            }}>
+                                                {truncate(chunk.chunk_content || chunk.content || '(空)', 300)}
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : (
+                            <div style={{fontSize: 12, color: '#999', padding: '6px 8px'}}>
+                                无召回结果
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+            <div style={{fontSize: 11, color: '#666', textAlign: 'right'}}>
+                汇总: {retrieveSpans.length} 次检索 / {totalFragments} 个分块 / top score {topScore >= 0 ? topScore.toFixed(3) : '—'}
+            </div>
+        </div>
+    );
+};
+
+function truncate(s, max) {
+    if (!s) return s;
+    return s.length > max ? s.substring(0, max) + '…' : s;
+}
+
+export default RagFragments;