evalvault 1.61.0__tar.gz → 1.62.0__tar.gz

{evalvault-1.61.0 → evalvault-1.62.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: evalvault
-Version: 1.61.0
+Version: 1.62.0
 Summary: RAG evaluation system using Ragas with Phoenix/Langfuse tracing
 Project-URL: Homepage, https://github.com/ntts9990/EvalVault
 Project-URL: Documentation, https://github.com/ntts9990/EvalVault#readme
@@ -46,6 +46,7 @@ Requires-Dist: uvicorn>=0.40.0
 Requires-Dist: xlrd
 Provides-Extra: analysis
 Requires-Dist: scikit-learn>=1.3.0; extra == 'analysis'
+Requires-Dist: xgboost>=2.0.0; extra == 'analysis'
 Provides-Extra: anthropic
 Requires-Dist: anthropic; extra == 'anthropic'
 Requires-Dist: langchain-anthropic; extra == 'anthropic'
@@ -86,6 +87,7 @@ Requires-Dist: rank-bm25>=0.2.2; extra == 'dev'
 Requires-Dist: ruff; extra == 'dev'
 Requires-Dist: scikit-learn<1.4.0,>=1.3.0; extra == 'dev'
 Requires-Dist: sentence-transformers>=5.2.0; extra == 'dev'
+Requires-Dist: xgboost>=2.0.0; extra == 'dev'
 Provides-Extra: docs
 Requires-Dist: mkdocs-material>=9.5.0; extra == 'docs'
 Requires-Dist: mkdocs>=1.5.0; extra == 'docs'

{evalvault-1.61.0 → evalvault-1.62.0}/docs/guides/DEV_GUIDE.md

@@ -62,6 +62,15 @@ npm run dev
 
 ---
 
+## 타입체크 (Pyright 비활성화)
+
+EvalVault는 Ruff만 사용합니다. Pyright/Pylance 경고가 보이면 에디터 설정을 끄세요.
+
+- VS Code: 확장(“Pylance”, “Pyright”) 비활성화 또는 제거
+- VS Code 설정 예시: `"python.analysis.typeCheckingMode": "off"`
+
+---
+
 ## 문서 작업 규칙 (Docs)
 
 - `docs/`는 **현재 프로젝트에 필요한 문서만** 유지합니다. (중복/과거 정보는 삭제)

evalvault-1.62.0/docs/guides/rag_human_feedback_calibration_implementation_plan.md

@@ -0,0 +1,218 @@
+# RAG 인간 피드백 보정: 상세 구현 계획서
+
+본 문서는 `docs/guides/rag_human_feedback_calibration.md`의 설계를 기반으로 EvalVault에 **사람 만족도 보정(calibration) 기능**을 구현하기 위한 상세 실행 계획을 정리합니다.
+
+---
+
+## 1. 목표/성공 기준
+
+### 목표
+- 대표 샘플 기반 인간 평가 수집 → 보정 모델 학습 → 전체 결과에 보정 점수 적용.
+- RAGAS 점수와 사용자 만족도 괴리를 줄이고, 이해 가능한 보정 지표를 제공.
+
+### 성공 기준
+- DB에 `satisfaction_feedback` 저장/조회 가능.
+- Run 상세 응답에 `calibrated_satisfaction`, `imputed`, `imputation_source` 포함.
+- CLI `evalvault calibrate` 실행 시 보정 모델 성능 요약 출력.
+- Web UI에서 평가 입력/조회/보정 점수 표시.
+
+---
+
+## 2. 전제 및 스코프
+
+### 전제
+- 문서에 제시된 정책을 기본값으로 채택:
+  - 만족도 라벨: 1~5
+  - Thumb 피드백: up/down/none (약한 레이블)
+  - 보정 점수: `calibrated_satisfaction`
+  - 결측치 보정 규칙: thumb → 매핑, 없으면 모델 예측
+
+### 스코프
+- 백엔드: StoragePort, SQL 스키마, API, CLI, 도메인 서비스
+- 프론트엔드: RunDetails UI에 만족도 평가 탭 + 보정 점수 표시
+- 모델: 선형 회귀 + XGBoost 회귀(선형은 설명용)
+
+### 비스코프(초기)
+- 실시간 온라인 학습, A/B 실험 자동 트리거
+- 자동 평가자(LLM Judge) 연동
+
+---
+
+## 3. 아키텍처 개요
+
+### 데이터 플로우
+1) 대표 샘플 선정(클러스터링) → 2) 인간 평가 수집 → 3) 피처 생성 → 4) 모델 학습 → 5) 보정 점수 추정 → 6) UI 표시
+
+### 재사용 가능한 기존 컴포넌트
+- 클러스터링: `src/evalvault/domain/services/cluster_map_builder.py`
+- NLP 피처 패턴: `src/evalvault/adapters/outbound/analysis/nlp_adapter.py`
+- Storage 어댑터 패턴: `src/evalvault/adapters/outbound/storage/*_adapter.py`
+
+---
+
+## 4. 데이터 모델/스키마 설계
+
+### 신규 테이블
+`src/evalvault/adapters/outbound/storage/schema.sql`
+
+`satisfaction_feedback`
+- `id` (PK)
+- `run_id`
+- `test_case_id`
+- `satisfaction_score` (1~5, nullable)
+- `thumb_feedback` (`up`/`down`/`none`)
+- `comment` (nullable)
+- `rater_id` (nullable)
+- `created_at`
+
+### 결과 확장
+- 테스트 케이스 결과: `calibrated_satisfaction`, `imputed`, `imputation_source`
+- run summary: `avg_satisfaction_score`, `thumb_up_rate`, `imputed_ratio`
+
+---
+
+## 5. StoragePort/Adapter 설계
+
+### StoragePort 확장
+`src/evalvault/ports/outbound/storage_port.py`
+- `save_feedback(...)`
+- `list_feedback(run_id)`
+- `get_feedback_summary(run_id)`
+
+### 어댑터 확장
+- `src/evalvault/adapters/outbound/storage/sqlite_adapter.py`
+- `src/evalvault/adapters/outbound/storage/postgres_adapter.py`
+
+### 마이그레이션
+- 기존 DB에 `satisfaction_feedback` 테이블 추가
+- 인덱스: `run_id`, `test_case_id`
+
+---
+
+## 6. API 설계 (FastAPI)
+
+### 라우터 확장
+`src/evalvault/adapters/inbound/api/routers/runs.py`
+
+- `POST /api/v1/runs/{run_id}/feedback`
+  - 요청: `test_case_id`, `satisfaction_score?`, `thumb_feedback?`, `comment?`, `rater_id?`
+
+- `GET /api/v1/runs/{run_id}/feedback`
+  - 응답: 피드백 리스트
+
+- `GET /api/v1/runs/{run_id}`
+  - summary에 `avg_satisfaction_score`, `thumb_up_rate`, `imputed_ratio` 포함
+  - results[].metrics에 `calibrated_satisfaction`, `imputed`, `imputation_source` 포함
+
+---
+
+## 7. CLI 설계
+
+### 명령
+`src/evalvault/adapters/inbound/cli/commands/calibrate.py`
+
+```
+evalvault calibrate --run-id <ID> [--model linear|xgb|both] [--write-back]
+```
+
+### 출력
+- 모델 성능 요약: Pearson/Spearman, MAE
+- 피처 중요도(가능 시)
+
+---
+
+## 8. Web UI 설계
+
+`frontend/src/pages/RunDetails.tsx`
+
+### UI 기능
+- 탭: `만족도 평가`
+  - 별점(1~5), thumb up/down, 코멘트 입력
+  - 테스트 케이스별 저장
+
+### 표시
+- Summary 카드: 평균 만족도, Thumb Up 비율, 보정 비율
+- 메트릭 표에 `calibrated_satisfaction` 컬럼 추가
+
+---
+
+## 9. 보정/결측치 처리 규칙
+
+1. `satisfaction_score` 있음 → 그대로 사용
+2. 없고 `thumb_feedback` 있음 → 약한 레이블 매핑
+   - `up = 4.0`, `down = 2.0`
+3. 둘 다 없으면 모델 예측값 사용
+4. 모든 점수는 1~5로 클리핑
+5. `imputed` 및 `imputation_source` 필드 표시
+
+---
+
+## 10. 모델/피처 설계
+
+### 피처
+- RAGAS: `faithfulness`, `answer_relevancy`, `context_precision`, `context_recall`
+- 한국어 피처:
+  - 답변 길이
+  - 질문 키워드 누락률
+  - 형태소 다양성(TTR)
+
+### 모델
+- 기본: 선형회귀 (설명용)
+- 출력: XGBoost 회귀 (예측 성능용)
+
+### 의존성
+- `scikit-learn`은 이미 존재
+- `xgboost`는 `pyproject.toml`의 optional dependencies에 추가 필요
+
+---
+
+## 11. 대표 샘플링 전략
+
+### 1차 버전
+- `cluster_map_builder.py`의 KMeans + TF-IDF 임베딩 활용
+- 클러스터 당 centroid 가까운 케이스 1개씩 선택
+
+### 확장 버전
+- 불확실성 기반 샘플 추가 (예측값 2.4~2.6 등)
+
+---
+
+## 12. 테스트/검증 계획
+
+### 단위 테스트
+- StoragePort: save/list 피드백 동작
+- 보정 모델: 학습/예측 결과 shape 및 범위
+
+### 통합 테스트
+- API 엔드포인트: 저장/조회 동작
+
+### 품질 지표
+- 상관계수, MAE
+- Inter-rater agreement(가능 시): Cohen/Fleiss Kappa
+
+---
+
+## 13. 단계별 일정(제안)
+
+1. **DB/Storage 레이어 확장**
+2. **도메인 서비스(모델/보정 로직) 구현**
+3. **API 확장**
+4. **CLI 구현**
+5. **UI 통합**
+6. **테스트 및 검증**
+
+---
+
+## 14. 리스크 및 대응
+
+- **라벨 노이즈**: 평가 가이드 문서화 + 다중 평가자 평균
+- **샘플 편향**: 대표 샘플링 + 운영 중 추가 샘플링
+- **모델 과적합**: 단순 모델 우선, 교차검증
+
+---
+
+## 15. 참고 문서
+
+- `docs/guides/rag_human_feedback_calibration.md`
+- `src/evalvault/domain/services/cluster_map_builder.py`
+- `src/evalvault/adapters/outbound/analysis/nlp_adapter.py`

{evalvault-1.61.0 → evalvault-1.62.0}/frontend/src/pages/RunDetails.tsx

@@ -1,6 +1,14 @@
 import { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useParams, Link, useLocation } from "react-router-dom";
-import { fetchRunDetails, type RunDetailsResponse } from "../services/api";
+import {
+    fetchRunDetails,
+    fetchRunFeedback,
+    saveRunFeedback,
+    fetchRunFeedbackSummary,
+    type RunDetailsResponse,
+    type FeedbackResponse
+} from "../services/api";
 import { Layout } from "../components/Layout";
 import { InsightSpacePanel } from "../components/InsightSpacePanel";
 import { formatScore, normalizeScore, safeAverage } from "../utils/score";
@@ -15,10 +23,171 @@ import {
     MessageSquare,
     BookOpen,
     ExternalLink,
+    ThumbsUp,
+    ThumbsDown,
+    Star,
+    Save,
 } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts";
 import { SUMMARY_METRICS, SUMMARY_METRIC_THRESHOLDS } from "../utils/summaryMetrics";
 
+function FeedbackItem({
+    result,
+    feedback,
+    onSave,
+}: {
+    result: RunDetailsResponse["results"][number];
+    feedback?: FeedbackResponse;
+    onSave: (
+        id: string,
+        score: number | null,
+        thumb: "up" | "down" | "none" | null,
+        comment: string | null
+    ) => void;
+}) {
+    const [score, setScore] = useState<number | null>(feedback?.satisfaction_score ?? null);
+    const resolveThumb = (value: string | null | undefined): "up" | "down" | "none" => {
+        if (value === "up" || value === "down") {
+            return value;
+        }
+        return "none";
+    };
+    const [thumb, setThumb] = useState<"up" | "down" | "none" | null>(
+        resolveThumb(feedback?.thumb_feedback)
+    );
+    const [comment, setComment] = useState<string>(feedback?.comment ?? "");
+    const [isDirty, setIsDirty] = useState(false);
+
+    useEffect(() => {
+        setScore(feedback?.satisfaction_score ?? null);
+        setThumb(resolveThumb(feedback?.thumb_feedback));
+        setComment(feedback?.comment ?? "");
+        setIsDirty(false);
+    }, [feedback]);
+
+    const handleSave = () => {
+        onSave(result.test_case_id, score, thumb, comment || null);
+        setIsDirty(false);
+    };
+
+    return (
+        <div className="bg-card border border-border rounded-xl p-4 transition-all hover:border-primary/50">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="space-y-3">
+                    <div>
+                        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1">
+                            Question
+                        </h4>
+                        <p className="text-sm font-medium text-foreground line-clamp-2">
+                            {result.question}
+                        </p>
+                    </div>
+                    <div>
+                        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1">
+                            Answer
+                        </h4>
+                        <p className="text-sm text-muted-foreground line-clamp-3">
+                            {result.answer}
+                        </p>
+                    </div>
+                    {result.calibrated_satisfaction !== null && result.calibrated_satisfaction !== undefined && (
+                        <div className="flex items-center gap-2 mt-2">
+                            <span className="text-xs font-mono text-muted-foreground bg-secondary px-2 py-1 rounded">
+                                Calibrated: {result.calibrated_satisfaction.toFixed(2)}
+                            </span>
+                            {result.imputed && (
+                                <span className="text-[10px] text-amber-500 border border-amber-500/30 px-1.5 rounded">
+                                    Imputed
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                <div className="space-y-4 border-l border-border/50 pl-0 lg:pl-6">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-1">
+                                {[1, 2, 3, 4, 5].map((s) => (
+                                    <button
+                                        key={s}
+                                        onClick={() => {
+                                            setScore(s);
+                                            setIsDirty(true);
+                                        }}
+                                        className={`p-1 transition-colors ${
+                                            (score ?? 0) >= s
+                                                ? "text-yellow-400"
+                                                : "text-muted-foreground/30 hover:text-yellow-400/50"
+                                        }`}
+                                    >
+                                        <Star
+                                            className="w-5 h-5"
+                                            fill={(score ?? 0) >= s ? "currentColor" : "none"}
+                                        />
+                                    </button>
+                                ))}
+                            </div>
+
+                            <div className="flex items-center gap-2 border-l border-border pl-4">
+                                <button
+                                    onClick={() => {
+                                        setThumb(thumb === "up" ? "none" : "up");
+                                        setIsDirty(true);
+                                    }}
+                                    className={`p-2 rounded-full transition-colors ${
+                                        thumb === "up"
+                                            ? "bg-emerald-500/10 text-emerald-500"
+                                            : "hover:bg-secondary text-muted-foreground"
+                                    }`}
+                                >
+                                    <ThumbsUp className="w-4 h-4" />
+                                </button>
+                                <button
+                                    onClick={() => {
+                                        setThumb(thumb === "down" ? "none" : "down");
+                                        setIsDirty(true);
+                                    }}
+                                    className={`p-2 rounded-full transition-colors ${
+                                        thumb === "down"
+                                            ? "bg-rose-500/10 text-rose-500"
+                                            : "hover:bg-secondary text-muted-foreground"
+                                    }`}
+                                >
+                                    <ThumbsDown className="w-4 h-4" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <button
+                            onClick={handleSave}
+                            disabled={!isDirty}
+                            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
+                                isDirty
+                                    ? "bg-primary text-primary-foreground shadow-md hover:bg-primary/90"
+                                    : "bg-secondary text-muted-foreground opacity-50 cursor-not-allowed"
+                            }`}
+                        >
+                            <Save className="w-3.5 h-3.5" />
+                            Save
+                        </button>
+                    </div>
+
+                    <textarea
+                        value={comment}
+                        onChange={(e) => {
+                            setComment(e.target.value);
+                            setIsDirty(true);
+                        }}
+                        placeholder="Add a comment about this result..."
+                        className="w-full h-20 p-3 bg-secondary/20 border border-border rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-primary/50 resize-none"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export function RunDetails() {
     const { id } = useParams<{ id: string }>();
     const location = useLocation();
@@ -26,8 +195,11 @@ export function RunDetails() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     // Tabs
-    const [activeTab, setActiveTab] = useState<"overview" | "performance">("overview");
+    const [activeTab, setActiveTab] = useState<"overview" | "performance" | "feedback">("overview");
     const [expandedCases, setExpandedCases] = useState<Set<string>>(new Set());
+    const [feedbackMap, setFeedbackMap] = useState<Record<string, FeedbackResponse>>({});
+    const [loadingFeedback, setLoadingFeedback] = useState(false);
+
     const summaryMetricSet = new Set(SUMMARY_METRICS);
 
     const previewPrompt = (content?: string) => {
@@ -52,6 +224,20 @@ export function RunDetails() {
         loadDetails();
     }, [id]);
 
+    useEffect(() => {
+        if (activeTab === "feedback" && id) {
+            setLoadingFeedback(true);
+            fetchRunFeedback(id)
+                .then((feedbacks) => {
+                    const map: Record<string, FeedbackResponse> = {};
+                    feedbacks.forEach((f) => (map[f.test_case_id] = f));
+                    setFeedbackMap(map);
+                })
+                .catch((err) => console.error("Failed to load feedback", err))
+                .finally(() => setLoadingFeedback(false));
+        }
+    }, [activeTab, id]);
+
     useEffect(() => {
         if (!data || !location.hash) return;
         const match = location.hash.match(/^#case-(.+)$/);
@@ -113,6 +299,44 @@ export function RunDetails() {
         setExpandedCases(newSet);
     };
 
+    const handleSaveFeedback = async (
+        caseId: string,
+        score: number | null,
+        thumb: "up" | "down" | "none" | null,
+        comment: string | null
+    ) => {
+        if (!id) return;
+        try {
+            const result = await saveRunFeedback(id, {
+                test_case_id: caseId,
+                satisfaction_score: score,
+                thumb_feedback: thumb,
+                comment: comment,
+            });
+            setFeedbackMap((prev) => ({ ...prev, [caseId]: result }));
+
+            try {
+                const summaryData = await fetchRunFeedbackSummary(id);
+                setData((prev) => {
+                    if (!prev) return prev;
+                    return {
+                        ...prev,
+                        summary: {
+                            ...prev.summary,
+                            avg_satisfaction_score: summaryData.avg_satisfaction_score,
+                            thumb_up_rate: summaryData.thumb_up_rate,
+                        },
+                    };
+                });
+            } catch (summaryErr) {
+                console.error("Failed to update feedback summary", summaryErr);
+            }
+        } catch (e) {
+            console.error("Failed to save feedback", e);
+            alert("Failed to save feedback");
+        }
+    };
+
     // Prepare chart data
     const metricScores = data?.summary.metrics_evaluated?.map(metric => {
         if (!data?.results) return { name: metric, score: 0 };
@@ -219,6 +443,12 @@ export function RunDetails() {
                             >
                                 Performance
                             </button>
+                            <button
+                                onClick={() => setActiveTab("feedback")}
+                                className={`tab-pill ${activeTab === "feedback" ? "tab-pill-active" : "tab-pill-inactive"}`}
+                            >
+                                Feedback
+                            </button>
                         </div>
 
                         {summary.phoenix_drift != null && (
@@ -306,7 +536,7 @@ export function RunDetails() {
                     </div>
                 )}
 
-                {activeTab === "overview" ? (
+                {activeTab === "overview" && (
                     <>
                         {/* Charts & Summary Grid (Overview) */}
                         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
@@ -402,8 +632,9 @@ export function RunDetails() {
                             </div>
                         )}
                     </>
-                ) : (
-                    /* Performance Tab Content */
+                )}
+
+                {activeTab === "performance" && (
                     /* Performance Tab Content */
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8 animate-in fade-in duration-300">
                         {/* Latency Analysis */}
@@ -457,11 +688,59 @@ export function RunDetails() {
                     </div>
                 )}
 
-                {/* Test Case Explorer */}
-                <h3 className="font-semibold text-xl mb-4">Test Case Explorer</h3>
-                <div className="space-y-4">
-                    {(results || []).map((result) => {
-                        const isExpanded = expandedCases.has(result.test_case_id);
+                {activeTab === "feedback" && (
+                    <div className="animate-in fade-in duration-300">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                            <div className="surface-panel p-6">
+                                <h3 className="font-semibold text-muted-foreground text-sm mb-2">Avg. Satisfaction</h3>
+                                <p className="text-3xl font-bold text-foreground">
+                                    {summary.avg_satisfaction_score ? summary.avg_satisfaction_score.toFixed(2) : "N/A"}
+                                    <span className="text-sm font-normal text-muted-foreground ml-2">/ 5.0</span>
+                                </p>
+                            </div>
+                            <div className="surface-panel p-6">
+                                <h3 className="font-semibold text-muted-foreground text-sm mb-2">Thumb Up Rate</h3>
+                                <p className="text-3xl font-bold text-emerald-500">
+                                    {summary.thumb_up_rate !== null && summary.thumb_up_rate !== undefined
+                                        ? `${(summary.thumb_up_rate * 100).toFixed(1)}%`
+                                        : "N/A"}
+                                </p>
+                            </div>
+                            <div className="surface-panel p-6">
+                                <h3 className="font-semibold text-muted-foreground text-sm mb-2">Imputed Ratio</h3>
+                                <p className="text-3xl font-bold text-amber-500">
+                                    {summary.imputed_ratio !== null && summary.imputed_ratio !== undefined
+                                        ? `${(summary.imputed_ratio * 100).toFixed(1)}%`
+                                        : "0.0%"}
+                                </p>
+                                <p className="text-xs text-muted-foreground mt-1">Cases with auto-calibrated feedback</p>
+                            </div>
+                        </div>
+
+                        <div className="space-y-4">
+                            {loadingFeedback ? (
+                                <div className="text-center py-10 text-muted-foreground">Loading feedback...</div>
+                            ) : (
+                                results.map((result) => (
+                                    <FeedbackItem
+                                        key={result.test_case_id}
+                                        result={result}
+                                        feedback={feedbackMap[result.test_case_id]}
+                                        onSave={handleSaveFeedback}
+                                    />
+                                ))
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {activeTab !== "feedback" && (
+                    <>
+                        {/* Test Case Explorer */}
+                        <h3 className="font-semibold text-xl mb-4">Test Case Explorer</h3>
+                        <div className="space-y-4">
+                            {(results || []).map((result) => {
+                                const isExpanded = expandedCases.has(result.test_case_id);
                         const allPassed = result.metrics.every(m => m.passed);
 
                         return (
@@ -485,7 +764,14 @@ export function RunDetails() {
                                     </div>
                                     <div className="flex-1 min-w-0">
                                         <p className="font-medium text-foreground line-clamp-1">{result.question}</p>
-                                        <p className="text-sm text-muted-foreground line-clamp-1 mt-1">{result.answer}</p>
+                                        <div className="flex items-center gap-2 mt-1">
+                                            <p className="text-sm text-muted-foreground line-clamp-1">{result.answer}</p>
+                                            {result.calibrated_satisfaction !== null && result.calibrated_satisfaction !== undefined && (
+                                                <span className="shrink-0 px-1.5 py-0.5 rounded bg-secondary text-[10px] font-mono text-muted-foreground border border-border">
+                                                    Satisf: {result.calibrated_satisfaction.toFixed(1)}
+                                                </span>
+                                            )}
+                                        </div>
                                     </div>
 
                                     <div className="flex items-center gap-3">
@@ -595,10 +881,12 @@ export function RunDetails() {
                                         </div>
                                     </div>
                                 )}
-                            </div>
-                        );
-                    })}
-                </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </>
+                )}
             </div>
         </Layout>
     );