refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조
에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: wiki-2026-0508-v-component-evaluation-interface
|
||||
title: V-component (Evaluation Interface)
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Eval UI Component, V-component]
|
||||
duplicate_of: none
|
||||
source_trust_level: B
|
||||
confidence_score: 0.85
|
||||
verification_status: applied
|
||||
tags: [llm-eval, ui, component, dashboard, observability]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: typescript
|
||||
framework: React-19
|
||||
---
|
||||
|
||||
# V-component (Evaluation Interface)
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 LLM eval result 의 매 inspect · compare · annotate 위한 매 reusable UI primitive."** Braintrust · Langfuse · Phoenix (Arize) 같은 매 eval platform 의 핵심 building block — 매 trace tree + 매 score panel + 매 diff view 의 통합. 매 custom dashboard 의 build 시 매 in-house V-component 의 생성 이 매 일반 패턴.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 V-component 의 구성
|
||||
- **Trace viewer**: 매 LLM call chain 의 tree (input → tool calls → output).
|
||||
- **Score panel**: 매 metric (accuracy, faithfulness, latency, cost) 의 numeric + sparkline.
|
||||
- **Diff view**: 매 two run 의 side-by-side comparison.
|
||||
- **Annotation**: 매 human reviewer 의 매 label · comment.
|
||||
- **Filter / search**: 매 trace 의 fail · slow · expensive 만 isolation.
|
||||
|
||||
### 매 data shape
|
||||
- **Trace**: { id, name, input, output, children: Span[], metadata }.
|
||||
- **Score**: { name, value, type: "numeric" | "categorical", confidence }.
|
||||
- **Annotation**: { author, label, comment, ts }.
|
||||
|
||||
### 매 design 결정
|
||||
- **Virtualization**: 매 1000+ trace 의 render — react-virtuoso · TanStack Virtual.
|
||||
- **Streaming**: 매 in-progress trace 의 real-time update — SSE · WebSocket.
|
||||
- **Diff algorithm**: 매 string-level (diff-match-patch) + 매 structural (json-diff).
|
||||
|
||||
### 매 응용
|
||||
1. **Internal eval dashboard**: 매 ML team 의 매 model regression 의 detect.
|
||||
2. **PR review**: 매 prompt change 의 매 before/after diff.
|
||||
3. **Production monitoring**: 매 live trace 의 매 anomaly detection.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### 매 Trace tree component (React)
|
||||
```tsx
|
||||
type Span = {
|
||||
id: string;
|
||||
name: string;
|
||||
input: unknown;
|
||||
output: unknown;
|
||||
durationMs: number;
|
||||
children: Span[];
|
||||
};
|
||||
|
||||
function TraceTree({ root }: { root: Span }) {
|
||||
return (
|
||||
<ul className="font-mono text-sm">
|
||||
<SpanNode span={root} depth={0} />
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function SpanNode({ span, depth }: { span: Span; depth: number }) {
|
||||
const [open, setOpen] = useState(depth < 2);
|
||||
return (
|
||||
<li style={{ paddingLeft: depth * 16 }}>
|
||||
<button onClick={() => setOpen(o => !o)}>
|
||||
{open ? "▼" : "▶"} {span.name} <span className="text-gray-500">{span.durationMs}ms</span>
|
||||
</button>
|
||||
{open && (
|
||||
<>
|
||||
<pre className="text-xs">{JSON.stringify(span.input, null, 2)}</pre>
|
||||
{span.children.map(c => <SpanNode key={c.id} span={c} depth={depth + 1} />)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Score panel
|
||||
```tsx
|
||||
type Score = { name: string; value: number; series?: number[] };
|
||||
|
||||
function ScorePanel({ scores }: { scores: Score[] }) {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{scores.map(s => (
|
||||
<div key={s.name} className="rounded border p-2">
|
||||
<div className="text-xs text-gray-500">{s.name}</div>
|
||||
<div className="text-2xl font-bold">{s.value.toFixed(3)}</div>
|
||||
{s.series && <Sparkline data={s.series} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Diff view (two runs)
|
||||
```tsx
|
||||
import { diffLines } from "diff";
|
||||
|
||||
function DiffView({ a, b }: { a: string; b: string }) {
|
||||
const parts = diffLines(a, b);
|
||||
return (
|
||||
<pre className="text-xs">
|
||||
{parts.map((p, i) => (
|
||||
<span key={i} className={
|
||||
p.added ? "bg-green-100" : p.removed ? "bg-red-100" : ""
|
||||
}>{p.value}</span>
|
||||
))}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Virtualized trace list (1000+ items)
|
||||
```tsx
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
|
||||
function TraceList({ traces }: { traces: Trace[] }) {
|
||||
return (
|
||||
<Virtuoso
|
||||
data={traces}
|
||||
itemContent={(_, t) => (
|
||||
<TraceRow trace={t} status={t.scores.faithfulness < 0.7 ? "fail" : "ok"} />
|
||||
)}
|
||||
style={{ height: "100vh" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Streaming trace (SSE)
|
||||
```tsx
|
||||
function useLiveTraces(runId: string) {
|
||||
const [traces, setTraces] = useState<Trace[]>([]);
|
||||
useEffect(() => {
|
||||
const es = new EventSource(`/api/runs/${runId}/stream`);
|
||||
es.onmessage = e => {
|
||||
const span: Span = JSON.parse(e.data);
|
||||
setTraces(prev => mergeSpan(prev, span));
|
||||
};
|
||||
return () => es.close();
|
||||
}, [runId]);
|
||||
return traces;
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Annotation (human-in-the-loop)
|
||||
```tsx
|
||||
function AnnotationPanel({ traceId }: { traceId: string }) {
|
||||
const [label, setLabel] = useState<"good" | "bad" | "unsure">();
|
||||
const [comment, setComment] = useState("");
|
||||
|
||||
const submit = async () => {
|
||||
await fetch(`/api/traces/${traceId}/annotations`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ label, comment, author: currentUser.id }),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<RadioGroup value={label} onChange={setLabel} options={["good", "bad", "unsure"]} />
|
||||
<textarea value={comment} onChange={e => setComment(e.target.value)} />
|
||||
<button onClick={submit}>Save</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Filter / query (Braintrust-style)
|
||||
```typescript
|
||||
type FilterExpr = {
|
||||
field: "score.faithfulness" | "duration_ms" | "model";
|
||||
op: "<" | ">" | "==" | "contains";
|
||||
value: number | string;
|
||||
};
|
||||
|
||||
function applyFilters(traces: Trace[], filters: FilterExpr[]) {
|
||||
return traces.filter(t => filters.every(f => evalExpr(t, f)));
|
||||
}
|
||||
|
||||
// 매 UI: 매 query builder + 매 saved filter
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 매 hosted eval platform 가능 | 매 Braintrust / Langfuse / Phoenix (build X) |
|
||||
| 매 internal-only, 매 specific domain | 매 custom V-component (Tailwind + TanStack) |
|
||||
| 매 small team | 매 hosted — 매 build cost 의 prohibitive |
|
||||
| 매 1000+ traces / day | 매 virtualization 필수 |
|
||||
|
||||
**기본값**: 매 startup 은 매 Langfuse self-host, 매 enterprise 는 매 Braintrust / Arize.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[LLM Eval]] · [[Observability]]
|
||||
- 변형: [[Trace Viewer]]
|
||||
- 응용: [[Braintrust]] · [[Langfuse]]
|
||||
- Adjacent: [[OpenTelemetry]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 V-component 의 boilerplate (trace tree, virtualized list) 의 generation — 매 well-typed React + TanStack 패턴.
|
||||
**언제 X**: 매 domain-specific scoring logic — 매 hand-author.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **매 No virtualization**: 매 5000 trace 의 매 single render — 매 browser freeze.
|
||||
- **매 Score 의 raw number 만**: 매 sparkline · histogram 부재 — 매 trend 의 invisible.
|
||||
- **매 Mixed run units**: 매 different prompt versions 의 매 scores 의 average — 매 misleading.
|
||||
- **매 No annotation persistence**: 매 reviewer label 의 매 lost — 매 future training data 의 source 의 X.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Braintrust docs 2025; Langfuse v3 docs; Arize Phoenix 2024).
|
||||
- 신뢰도 B (매 design pattern — 매 standardized spec 부재).
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — trace tree, score panel, diff, streaming 패턴 추가 |
|
||||
Reference in New Issue
Block a user