@vibe-forge/tsconfigs 0.7.2 → 0.8.0

package/dist/apps/client/src/components/automation-view/TriggerList.d.ts

@@ -0,0 +1,10 @@
+import './TriggerList.scss';
+import type { FormInstance } from 'antd';
+import type { RuleFormValues } from './types';
+interface TriggerListProps {
+    form: FormInstance<RuleFormValues>;
+    updateWeeklyCron: (index: number, nextDay?: string, nextTime?: string) => void;
+    getWebhookUrl: (triggerId?: string, webhookKey?: string) => string;
+}
+export declare function TriggerList({ form, updateWeeklyCron, getWebhookUrl }: TriggerListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/apps/client/src/components/automation-view/TriggerList.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TriggerList.scss';
+import { Button, Form, Input, InputNumber, Select, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+export function TriggerList({ form, updateWeeklyCron, getWebhookUrl }) {
+    const { t } = useTranslation();
+    return (_jsx(Form.List, { name: 'triggers', children: (fields, { add, remove }) => (_jsxs("div", { className: 'automation-view__list automation-view__list--horizontal', children: [_jsxs("div", { className: 'automation-view__section-header', children: [_jsxs("div", { className: 'automation-view__section-heading', children: [_jsxs("div", { className: 'automation-view__form-title', children: [_jsx("span", { className: 'material-symbols-rounded automation-view__form-icon', children: "bolt" }), t('automation.sectionTriggers')] }), _jsx("span", { className: 'automation-view__section-count', children: t('automation.triggerCount', { count: fields.length }) })] }), _jsx("div", { className: 'automation-view__section-actions', children: _jsx(Tooltip, { title: t('automation.addTrigger'), children: _jsx(Button, { className: 'automation-view__icon-button', type: 'text', onClick: () => add({
+                                        type: 'interval',
+                                        intervalMinutes: 30,
+                                        cronExpression: '',
+                                        weeklyDay: '1',
+                                        weeklyTime: '09:00'
+                                    }), children: _jsx("span", { className: 'material-symbols-rounded automation-view__action-icon', children: "add" }) }) }) })] }), _jsx("div", { className: 'automation-view__form-desc', children: t('automation.triggerAny') }), _jsx("div", { className: 'automation-view__list-scroll', children: fields.map((field, index) => (_jsx(Form.Item, { noStyle: true, shouldUpdate: (prevValues, nextValues) => {
+                            const prevTrigger = prevValues.triggers?.[field.name];
+                            const nextTrigger = nextValues.triggers?.[field.name];
+                            return prevTrigger?.type !== nextTrigger?.type ||
+                                prevTrigger?.webhookKey !== nextTrigger?.webhookKey ||
+                                prevTrigger?.id !== nextTrigger?.id;
+                        }, children: (formInstance) => {
+                            const triggerType = formInstance.getFieldValue([
+                                'triggers',
+                                field.name,
+                                'type'
+                            ]);
+                            const triggerId = formInstance.getFieldValue(['triggers', field.name, 'id']);
+                            const webhookKey = formInstance.getFieldValue(['triggers', field.name, 'webhookKey']);
+                            const webhookUrl = getWebhookUrl(triggerId, webhookKey);
+                            return (_jsxs("div", { className: 'automation-view__list-item', children: [_jsx(Form.Item, { name: [field.name, 'id'], hidden: true, children: _jsx(Input, {}) }), _jsx(Tooltip, { title: t('automation.remove'), children: _jsx(Button, { className: 'automation-view__remove-button', type: 'text', danger: true, onClick: () => remove(field.name), disabled: fields.length <= 1, children: _jsx("span", { className: 'material-symbols-rounded automation-view__action-icon', children: "close" }) }) }), _jsx("div", { className: 'automation-view__list-header', children: _jsx(Form.Item, { name: [field.name, 'type'], label: t('automation.ruleType'), rules: [{ required: true, message: t('automation.ruleTypeRequired') }], children: _jsx(Select, { options: [
+                                                    { label: t('automation.typeInterval'), value: 'interval' },
+                                                    { label: t('automation.typeWebhook'), value: 'webhook' },
+                                                    { label: t('automation.typeCron'), value: 'cron' }
+                                                ], onChange: (value) => {
+                                                    if (value === 'interval') {
+                                                        form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30);
+                                                        form.setFieldValue(['triggers', field.name, 'cronExpression'], '');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00');
+                                                        form.setFieldValue(['triggers', field.name, 'webhookKey'], '');
+                                                    }
+                                                    if (value === 'cron') {
+                                                        form.setFieldValue(['triggers', field.name, 'cronExpression'], '');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00');
+                                                        form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30);
+                                                        form.setFieldValue(['triggers', field.name, 'webhookKey'], '');
+                                                    }
+                                                    if (value === 'webhook') {
+                                                        form.setFieldValue(['triggers', field.name, 'webhookKey'], '');
+                                                        form.setFieldValue(['triggers', field.name, 'intervalMinutes'], 30);
+                                                        form.setFieldValue(['triggers', field.name, 'cronExpression'], '');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyDay'], '1');
+                                                        form.setFieldValue(['triggers', field.name, 'weeklyTime'], '09:00');
+                                                    }
+                                                } }) }) }), triggerType === 'interval' && (_jsx(Form.Item, { name: [field.name, 'intervalMinutes'], label: t('automation.intervalMinutes'), rules: [{ required: true, message: t('automation.intervalRequired') }], children: _jsx(InputNumber, { min: 1, className: 'automation-view__input-number' }) })), triggerType === 'cron' && (_jsxs("div", { className: 'automation-view__cron-section', children: [_jsx(Form.Item, { name: [field.name, 'cronExpression'], label: t('automation.cronExpressionLabel'), rules: [{ required: true, message: t('automation.cronExpressionRequired') }], children: _jsx(Input, { placeholder: t('automation.cronExpressionHint') }) }), _jsx(Form.Item, { name: [field.name, 'cronPreset'], label: t('automation.cronPreset'), children: _jsx(Select, { options: [
+                                                        { label: t('automation.cronPresetHourly'), value: '0 * * * *' },
+                                                        { label: t('automation.cronPresetDaily9'), value: '0 9 * * *' },
+                                                        { label: t('automation.cronPresetWeekday9'), value: '0 9 * * 1-5' },
+                                                        { label: t('automation.cronPresetWeekend10'), value: '0 10 * * 6,0' }
+                                                    ], onChange: (value) => form.setFieldValue(['triggers', field.name, 'cronExpression'], value), placeholder: t('automation.cronPresetHint'), allowClear: true }) }), _jsx("div", { className: 'automation-view__cron-hint', children: t('automation.cronInputHint') }), _jsxs("div", { className: 'automation-view__cron-weekly', children: [_jsx(Form.Item, { name: [field.name, 'weeklyDay'], label: t('automation.weeklyDay'), children: _jsx(Select, { options: [
+                                                                { label: t('automation.weekdaySun'), value: '0' },
+                                                                { label: t('automation.weekdayMon'), value: '1' },
+                                                                { label: t('automation.weekdayTue'), value: '2' },
+                                                                { label: t('automation.weekdayWed'), value: '3' },
+                                                                { label: t('automation.weekdayThu'), value: '4' },
+                                                                { label: t('automation.weekdayFri'), value: '5' },
+                                                                { label: t('automation.weekdaySat'), value: '6' }
+                                                            ], onChange: (value) => updateWeeklyCron(index, value) }) }), _jsx(Form.Item, { name: [field.name, 'weeklyTime'], label: t('automation.weeklyTime'), children: _jsx(Input, { placeholder: t('automation.weeklyTimeHint'), onChange: (event) => updateWeeklyCron(index, undefined, event.target.value) }) })] })] })), triggerType === 'webhook' && (_jsxs("div", { className: 'automation-view__webhook', children: [_jsx(Form.Item, { name: [field.name, 'webhookKey'], label: t('automation.webhookKey'), children: _jsx(Input, { placeholder: t('automation.webhookKeyHint') }) }), webhookUrl && (_jsxs("div", { className: 'automation-view__webhook-row', children: [_jsx("span", { className: 'automation-view__webhook-label', children: t('automation.webhookUrl') }), _jsx(Tooltip, { title: t('automation.copy'), children: _jsx(Button, { className: 'automation-view__icon-button', type: 'text', onClick: () => {
+                                                                void navigator.clipboard.writeText(webhookUrl);
+                                                            }, children: _jsx("span", { className: 'material-symbols-rounded automation-view__action-icon', children: "content_copy" }) }) })] }))] }))] }));
+                        } }, field.key))) })] })) }));
+}

package/dist/apps/client/src/components/automation-view/index.d.ts

@@ -0,0 +1,2 @@
+import './index.scss';
+export declare function AutomationView(): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/automation-view/index.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import { App } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import useSWR from 'swr';
+import { createAutomationRule, deleteAutomationRule, getApiErrorMessage, listAutomationRules, listAutomationRuns, runAutomationRule, updateAutomationRule } from '#~/api.js';
+import { useQueryParams } from '#~/hooks/useQueryParams.js';
+import { RuleFormPanel } from './RuleFormPanel.js';
+import { RuleSidebar } from './RuleSidebar.js';
+import { RunHistoryPanel } from './RunHistoryPanel.js';
+export function AutomationView() {
+    const { t } = useTranslation();
+    const { message } = App.useApp();
+    const navigate = useNavigate();
+    const { data, mutate } = useSWR('/api/automation/rules', listAutomationRules);
+    const rules = data?.rules ?? [];
+    const [panelMode, setPanelMode] = useState('view');
+    const [submitting, setSubmitting] = useState(false);
+    const { values, update } = useQueryParams({
+        keys: ['rule', 'q', 'runQ', 'status', 'time', 'sort'],
+        defaults: {
+            rule: '',
+            q: '',
+            runQ: '',
+            status: 'all',
+            time: 'all',
+            sort: 'desc'
+        },
+        omit: {
+            rule: (value) => value === '',
+            q: (value) => value === '',
+            runQ: (value) => value === '',
+            status: (value) => value === 'all',
+            time: (value) => value === 'all',
+            sort: (value) => value === 'desc'
+        }
+    });
+    const selectedRuleId = useMemo(() => {
+        const fromUrl = values.rule;
+        if (fromUrl && rules.some(rule => rule.id === fromUrl))
+            return fromUrl;
+        return rules[0]?.id ?? null;
+    }, [rules, values.rule]);
+    const selectedRule = useMemo(() => rules.find(rule => rule.id === selectedRuleId) ?? null, [rules, selectedRuleId]);
+    const { data: runsData, mutate: mutateRuns } = useSWR(selectedRuleId ? `/api/automation/rules/${selectedRuleId}/runs` : null, () => listAutomationRuns(selectedRuleId ?? ''));
+    const runs = runsData?.runs ?? [];
+    useEffect(() => {
+        if (rules.length === 0)
+            return;
+        if (!values.rule || !rules.some(rule => rule.id === values.rule)) {
+            update({ rule: rules[0].id });
+        }
+    }, [rules, update, values.rule]);
+    const handleSelectRule = useCallback((ruleId) => {
+        setPanelMode('view');
+        update({ rule: ruleId });
+    }, [update]);
+    const handleCreateRule = useCallback(() => {
+        setPanelMode('create');
+    }, []);
+    const handleEditRule = useCallback((rule) => {
+        setPanelMode('edit');
+        update({ rule: rule.id });
+    }, [update]);
+    const handleCancelForm = useCallback(() => {
+        setPanelMode('view');
+    }, []);
+    const handleSubmit = useCallback(async (payload, immediateRun) => {
+        try {
+            setSubmitting(true);
+            if (panelMode === 'create') {
+                const res = await createAutomationRule({ ...payload, immediateRun });
+                await mutate();
+                if (res.rule?.id) {
+                    update({ rule: res.rule.id });
+                }
+                setPanelMode('view');
+                return;
+            }
+            if (panelMode === 'edit' && selectedRule) {
+                await updateAutomationRule(selectedRule.id, { ...payload, immediateRun });
+                await mutate();
+                void mutateRuns();
+                setPanelMode('view');
+            }
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('automation.saveFailed')));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [panelMode, mutate, mutateRuns, message, selectedRule, t]);
+    const handleDelete = useCallback(async (rule) => {
+        try {
+            await deleteAutomationRule(rule.id);
+            if (selectedRuleId === rule.id) {
+                update({ rule: '' });
+                setPanelMode('view');
+            }
+            void mutate();
+            void message.success(t('automation.deleted'));
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('automation.deleteFailed')));
+        }
+    }, [message, mutate, selectedRuleId, t]);
+    const handleRun = useCallback(async (rule) => {
+        try {
+            const res = await runAutomationRule(rule.id);
+            const nextSessionId = res.sessionIds?.[0];
+            if (nextSessionId) {
+                void message.success(t('automation.runStarted'));
+                void mutateRuns();
+                void navigate(`/session/${nextSessionId}`);
+            }
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('automation.runFailed')));
+        }
+    }, [message, mutateRuns, navigate, t]);
+    const handleToggle = useCallback(async (rule, enabled) => {
+        try {
+            await updateAutomationRule(rule.id, { enabled });
+            void mutate();
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('automation.toggleFailed')));
+        }
+    }, [message, mutate, t]);
+    return (_jsxs("div", { className: 'automation-view', children: [_jsx("div", { className: 'automation-view__left', children: _jsx(RuleSidebar, { rules: rules, selectedRuleId: selectedRuleId, query: values.q, isCreating: panelMode === 'create', onCreate: handleCreateRule, onSelect: handleSelectRule, onRun: handleRun, onDelete: handleDelete, onToggle: handleToggle, onQueryChange: (value) => update({ q: value }) }) }), _jsx("div", { className: 'automation-view__divider' }), _jsxs("div", { className: 'automation-view__right', children: [panelMode === 'create' && (_jsx(RuleFormPanel, { mode: 'create', rule: null, submitting: submitting, onSubmit: handleSubmit, onCancel: handleCancelForm })), panelMode === 'edit' && (_jsx(RuleFormPanel, { mode: 'edit', rule: selectedRule, submitting: submitting, onSubmit: handleSubmit, onCancel: handleCancelForm })), panelMode === 'view' && (_jsx(RunHistoryPanel, { rule: selectedRule, runs: runs, runQuery: values.runQ, statusFilter: values.status, timeFilter: values.time, sortOrder: values.sort, onEditRule: handleEditRule, onRunQueryChange: (value) => update({ runQ: value }), onStatusFilterChange: (value) => update({ status: value }), onTimeFilterChange: (value) => update({ time: value }), onSortOrderChange: (value) => update({ sort: value }) }))] })] }));
+}

package/dist/apps/client/src/components/automation-view/types.d.ts

@@ -0,0 +1,21 @@
+export interface RuleFormValues {
+    name: string;
+    description?: string;
+    enabled: boolean;
+    immediateRun: boolean;
+    triggers: Array<{
+        id?: string;
+        type: 'interval' | 'webhook' | 'cron';
+        intervalMinutes?: number;
+        webhookKey?: string;
+        cronExpression?: string;
+        cronPreset?: string;
+        weeklyDay?: string;
+        weeklyTime?: string;
+    }>;
+    tasks: Array<{
+        id?: string;
+        title?: string;
+        prompt: string;
+    }>;
+}

package/dist/apps/client/src/components/automation-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/apps/client/src/components/benchmark-view/BenchmarkCasePanel.d.ts

@@ -0,0 +1,12 @@
+import './BenchmarkCasePanel.scss';
+import type { BenchmarkCase, BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types';
+interface BenchmarkCasePanelProps {
+    selectedCase: BenchmarkCase | null;
+    latestResult: BenchmarkResult | null;
+    activeRun: BenchmarkRunSummary | null | undefined;
+    activeRunId: string;
+    progressPercent: number;
+    onRunCase: () => void;
+}
+export declare function BenchmarkCasePanel({ selectedCase, latestResult, activeRun, activeRunId, progressPercent, onRunCase }: BenchmarkCasePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/apps/client/src/components/benchmark-view/BenchmarkCasePanel.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './BenchmarkCasePanel.scss';
+import { Button, Divider, Empty, Progress, Tag, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { MarkdownContent } from '#~/components/MarkdownContent';
+import { formatTimestamp, getResultStatusMeta } from './utils.js';
+function ResultStatusTag({ result }) {
+    const { t } = useTranslation();
+    const meta = getResultStatusMeta(result);
+    const colorMap = {
+        'no-result': 'default',
+        pass: 'success',
+        partial: 'warning',
+        fail: 'error'
+    };
+    return (_jsxs(Tag, { color: colorMap[meta.statusKey], className: 'benchmark-view__status-tag', children: [_jsx("span", { className: 'material-symbols-rounded benchmark-view__tag-icon', children: meta.icon }), meta.statusKey === 'no-result' ? t('benchmark.noResult') : t(`benchmark.status.${meta.statusKey}`)] }));
+}
+function SectionLabel({ icon, title, extra }) {
+    return (_jsxs("div", { className: 'benchmark-view__section-label', children: [_jsxs("div", { className: 'benchmark-view__section-title', children: [_jsx("span", { className: 'material-symbols-rounded benchmark-view__section-icon', children: icon }), _jsx("span", { children: title })] }), extra != null ? _jsx("div", { className: 'benchmark-view__section-extra', children: extra }) : null] }));
+}
+export function BenchmarkCasePanel({ selectedCase, latestResult, activeRun, activeRunId, progressPercent, onRunCase }) {
+    const { t } = useTranslation();
+    if (selectedCase == null) {
+        return (_jsx("div", { className: 'benchmark-view__empty', children: _jsx(Empty, { description: t('benchmark.emptyCases') }) }));
+    }
+    const displayTitle = selectedCase.frontmatter.title ?? selectedCase.title;
+    const displayDescription = selectedCase.frontmatter.description ?? selectedCase.summary ?? '';
+    return (_jsxs("div", { className: 'benchmark-view__canvas', children: [_jsxs("div", { className: 'benchmark-view__case-header', children: [_jsxs("div", { className: 'benchmark-view__case-title-row', children: [_jsx(Typography.Title, { level: 3, className: 'benchmark-view__case-title', children: displayTitle }), _jsx(Button, { type: 'primary', icon: _jsx("span", { className: 'material-symbols-rounded', children: "play_circle" }), onClick: onRunCase })] }), displayDescription
+                        ? (_jsx(Typography.Paragraph, { type: 'secondary', className: 'benchmark-view__case-desc', children: displayDescription }))
+                        : null, _jsx("div", { className: 'benchmark-view__case-meta', children: _jsxs("span", { className: 'benchmark-view__meta-item', children: [_jsx("span", { className: 'material-symbols-rounded', children: "history" }), t('benchmark.lastRunAt'), ': ', formatTimestamp(latestResult?.timestamp)] }) })] }), _jsx(Divider, { className: 'benchmark-view__sep' }), _jsxs("div", { className: 'benchmark-view__twin-grid', children: [_jsxs("div", { className: 'benchmark-view__section', children: [_jsx(SectionLabel, { icon: 'tune', title: t('benchmark.configTitle') }), _jsxs("div", { className: 'benchmark-view__info-grid', children: [_jsxs("div", { className: 'benchmark-view__info-row', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "commit" }), t('benchmark.baseCommit')] }), _jsx("code", { children: selectedCase.frontmatter.baseCommit })] }), _jsxs("div", { className: 'benchmark-view__info-row', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "timer" }), t('benchmark.timeoutSec')] }), _jsx("span", { children: selectedCase.frontmatter.timeoutSec })] }), _jsxs("div", { className: 'benchmark-view__info-row benchmark-view__info-row--block', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "build" }), t('benchmark.setupCommand')] }), _jsx(MarkdownContent, { content: `\`\`\`bash\n${selectedCase.frontmatter.setupCommand}\n\`\`\`` })] }), _jsxs("div", { className: 'benchmark-view__info-row benchmark-view__info-row--block', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "science" }), t('benchmark.testCommand')] }), _jsx(MarkdownContent, { content: `\`\`\`bash\n${selectedCase.frontmatter.testCommand}\n\`\`\`` })] })] })] }), _jsxs("div", { className: 'benchmark-view__section benchmark-view__task-goal', children: [_jsx(SectionLabel, { icon: 'assignment', title: t('benchmark.taskGoal') }), _jsx("div", { className: 'benchmark-view__goal-body', children: _jsx(MarkdownContent, { content: selectedCase.rfcBody }) })] })] }), _jsx(Divider, { className: 'benchmark-view__sep' }), _jsxs("div", { className: 'benchmark-view__twin-grid benchmark-view__section--last', children: [_jsx(RunStateSection, { activeRunId: activeRunId, activeRun: activeRun, progressPercent: progressPercent, t: t }), _jsx(ResultSection, { latestResult: latestResult, t: t })] })] }));
+}
+// ─── Sub-sections ─────────────────────────────────────────────────────────────
+function RunStateSection({ activeRunId, activeRun, progressPercent, t }) {
+    return (_jsxs("div", { className: 'benchmark-view__section', children: [_jsx(SectionLabel, { icon: 'pulse_alert', title: t('benchmark.runState'), extra: activeRun ? _jsx(Tag, { children: activeRun.status }) : null }), activeRunId === ''
+                ? (_jsx(Typography.Text, { type: 'secondary', className: 'benchmark-view__hint', children: t('benchmark.noActiveRun') }))
+                : (_jsxs("div", { className: 'benchmark-view__run-block', children: [_jsxs("div", { className: 'benchmark-view__run-metric', children: [_jsx("label", { children: t('benchmark.progress') }), _jsx("strong", { children: `${activeRun?.completedCount ?? 0}/${activeRun?.totalCount ?? '-'}` })] }), _jsx(Progress, { percent: progressPercent, showInfo: false }), _jsxs("div", { className: 'benchmark-view__info-grid', children: [_jsxs("div", { className: 'benchmark-view__info-row', children: [_jsx("label", { children: t('benchmark.runStatus') }), _jsx("span", { children: activeRun?.status ?? '-' })] }), _jsxs("div", { className: 'benchmark-view__info-row', children: [_jsx("label", { children: t('benchmark.lastMessage') }), _jsx(Typography.Text, { children: activeRun?.lastMessage ?? '-' })] })] })] }))] }));
+}
+function ResultSection({ latestResult, t }) {
+    return (_jsxs("div", { className: 'benchmark-view__section', children: [_jsx(SectionLabel, { icon: 'insights', title: t('benchmark.resultTitle'), extra: latestResult ? _jsx(ResultStatusTag, { result: latestResult }) : null }), latestResult == null
+                ? (_jsx(Typography.Text, { type: 'secondary', className: 'benchmark-view__hint', children: t('benchmark.noResult') }))
+                : (_jsxs("div", { className: 'benchmark-view__result', children: [_jsxs("div", { className: 'benchmark-view__score-strip', children: [_jsxs("div", { className: 'benchmark-view__score-item', children: [_jsx("label", { children: t('benchmark.finalScore') }), _jsx("strong", { children: latestResult.finalScore })] }), _jsxs("div", { className: 'benchmark-view__score-item', children: [_jsx("label", { children: t('benchmark.testScore') }), _jsx("strong", { children: latestResult.scores.testScore })] }), _jsxs("div", { className: 'benchmark-view__score-item', children: [_jsx("label", { children: t('benchmark.goalScore') }), _jsx("strong", { children: latestResult.scores.goalScore })] }), _jsxs("div", { className: 'benchmark-view__score-item', children: [_jsx("label", { children: t('benchmark.referenceScore') }), _jsx("strong", { children: latestResult.scores.referenceScore })] })] }), _jsxs("div", { className: 'benchmark-view__info-grid', children: [_jsxs("div", { className: 'benchmark-view__info-row', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "schedule" }), t('benchmark.durationMs')] }), _jsx("span", { children: latestResult.durationMs })] }), _jsxs("div", { className: 'benchmark-view__info-row', children: [_jsxs("label", { children: [_jsx("span", { className: 'material-symbols-rounded', children: "monitoring" }), t('benchmark.testExitCode')] }), _jsx("span", { children: latestResult.testExitCode })] })] }), _jsx(Typography.Paragraph, { className: 'benchmark-view__judge-summary', children: latestResult.judgeSummary }), _jsxs("div", { className: 'benchmark-view__subgrid', children: [_jsxs("div", { className: 'benchmark-view__subpanel', children: [_jsxs("div", { className: 'benchmark-view__subpanel-title', children: [_jsx("span", { className: 'material-symbols-rounded', children: "plagiarism" }), _jsx("span", { children: t('benchmark.changedFiles') })] }), latestResult.changedFiles != null && latestResult.changedFiles.length > 0
+                                            ? (_jsx("div", { className: 'benchmark-view__file-list', children: latestResult.changedFiles.map((file) => (_jsx("span", { className: 'benchmark-view__file-tag', children: file }, file))) }))
+                                            : (_jsx(Typography.Text, { type: 'secondary', children: t('benchmark.noChangedFiles') }))] }), _jsxs("div", { className: 'benchmark-view__subpanel', children: [_jsxs("div", { className: 'benchmark-view__subpanel-title', children: [_jsx("span", { className: 'material-symbols-rounded', children: "report" }), _jsx("span", { children: t('benchmark.issues') })] }), latestResult.issues.length === 0
+                                            ? _jsx(Typography.Text, { type: 'secondary', children: t('benchmark.noIssues') })
+                                            : (_jsx("ul", { className: 'benchmark-view__issues-list', children: latestResult.issues.map((issue) => _jsx("li", { children: issue }, issue)) }))] })] })] }))] }));
+}

package/dist/apps/client/src/components/benchmark-view/BenchmarkSidebar.d.ts

@@ -0,0 +1,20 @@
+import './BenchmarkSidebar.scss';
+import type { BenchmarkCase, BenchmarkCategory } from '@vibe-forge/types';
+interface BenchmarkSidebarProps {
+    cases: BenchmarkCase[];
+    categories: BenchmarkCategory[];
+    selectedCase: BenchmarkCase | null;
+    query: string;
+    expandedKeys: string[];
+    checkedKeys: string[];
+    checkedCaseCount: number;
+    onQueryChange: (value: string) => void;
+    onExpandedKeysChange: (keys: string[]) => void;
+    onCheckedKeysChange: (keys: string[]) => void;
+    onSelectCase: (category: string, title: string) => void;
+    onRunCase: (item: BenchmarkCase) => void;
+    onRunCategory: (category: string) => void;
+    onBatchRun: () => void;
+}
+export declare function BenchmarkSidebar({ cases, categories, selectedCase, query, expandedKeys, checkedKeys, checkedCaseCount, onQueryChange, onExpandedKeysChange, onCheckedKeysChange, onSelectCase, onRunCase, onRunCategory, onBatchRun }: BenchmarkSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/apps/client/src/components/benchmark-view/BenchmarkSidebar.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './BenchmarkSidebar.scss';
+import { Badge, Button, Empty, Input, Tooltip, Tree, Typography } from 'antd';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getResultStatusMeta } from './utils.js';
+function ResultStatusIcon({ result }) {
+    const meta = getResultStatusMeta(result);
+    return (_jsx("span", { className: `material-symbols-rounded benchmark-view__status-icon benchmark-view__status-icon--${meta.statusKey}`, children: meta.icon }));
+}
+// ─── Tree builder ─────────────────────────────────────────────────────────────
+function buildCaseTreeData(params) {
+    const { categories, cases, query, t, onRunCase, onRunCategory } = params;
+    const keyword = query.trim().toLowerCase();
+    const categoriesOrder = categories.length > 0
+        ? categories
+        : Array.from(new Set(cases.map(item => item.category))).map(category => ({
+            category,
+            caseCount: cases.filter(item => item.category === category).length,
+            lastStatuses: { pass: 0, partial: 0, fail: 0 }
+        }));
+    const nodes = categoriesOrder
+        .map((category) => {
+        const categoryCases = cases.filter(item => item.category === category.category);
+        const categoryMatches = keyword === '' || category.category.toLowerCase().includes(keyword);
+        const matchedCases = categoryMatches
+            ? categoryCases
+            : categoryCases.filter((item) => {
+                const rfcTitle = item.frontmatter.title ?? '';
+                return (item.title.toLowerCase().includes(keyword) ||
+                    rfcTitle.toLowerCase().includes(keyword));
+            });
+        if (matchedCases.length === 0)
+            return null;
+        return {
+            key: `category:${category.category}`,
+            selectable: true,
+            title: (_jsxs("div", { className: 'benchmark-view__tree-category', children: [_jsx("span", { className: 'material-symbols-rounded benchmark-view__tree-icon benchmark-view__tree-icon--category', children: "folder_open" }), _jsx(Typography.Text, { strong: true, className: 'benchmark-view__tree-title', children: category.category }), _jsx(Tooltip, { title: t('benchmark.runCategory'), children: _jsx(Button, { type: 'text', size: 'small', className: 'benchmark-view__tree-run-btn benchmark-view__tree-run-btn--category', icon: _jsx("span", { className: 'material-symbols-rounded', children: "play_circle" }), onClick: (e) => {
+                                e.stopPropagation();
+                                onRunCategory(category.category);
+                            } }) })] })),
+            children: matchedCases.map((item) => {
+                const nodeCase = { ...item, key: `case:${item.category}/${item.title}` };
+                const displayTitle = item.frontmatter.title ?? item.title;
+                return {
+                    key: nodeCase.key,
+                    isLeaf: true,
+                    title: (_jsxs("div", { className: 'benchmark-view__tree-case', children: [_jsx(ResultStatusIcon, { result: nodeCase.latestResult }), _jsx("span", { className: 'material-symbols-rounded benchmark-view__tree-icon', children: "draft" }), _jsx(Typography.Text, { className: 'benchmark-view__tree-title', children: displayTitle }), _jsx(Tooltip, { title: t('benchmark.runCase'), children: _jsx(Button, { type: 'text', size: 'small', className: 'benchmark-view__tree-run-btn', icon: _jsx("span", { className: 'material-symbols-rounded', children: "play_circle" }), onClick: (e) => {
+                                        e.stopPropagation();
+                                        onRunCase(item);
+                                    } }) })] })),
+                    caseData: nodeCase
+                };
+            })
+        };
+    })
+        .filter(node => node != null);
+    return nodes;
+}
+export function BenchmarkSidebar({ cases, categories, selectedCase, query, expandedKeys, checkedKeys, checkedCaseCount, onQueryChange, onExpandedKeysChange, onCheckedKeysChange, onSelectCase, onRunCase, onRunCategory, onBatchRun }) {
+    const { t } = useTranslation();
+    const treeData = useMemo(() => buildCaseTreeData({
+        categories,
+        cases,
+        query,
+        t,
+        onRunCase,
+        onRunCategory
+    }), [cases, categories, query, t]);
+    const handleTreeCheck = (checked) => {
+        const keys = Array.isArray(checked) ? checked : checked.checked;
+        onCheckedKeysChange(keys.map(String));
+    };
+    const handleTreeSelect = (_keys, info) => {
+        const caseData = info.node.caseData;
+        if (caseData != null) {
+            onSelectCase(caseData.category, caseData.title);
+            return;
+        }
+        const categoryKey = String(info.node.key);
+        if (!categoryKey.startsWith('category:'))
+            return;
+        const category = categoryKey.replace('category:', '');
+        const nextCase = cases.find(item => item.category === category);
+        onSelectCase(category, nextCase?.title ?? '');
+    };
+    return (_jsxs("div", { className: 'benchmark-view__sidebar', children: [_jsx("div", { className: 'benchmark-view__sidebar-header', children: _jsx(Typography.Title, { level: 4, className: 'benchmark-view__sidebar-title', children: t('benchmark.title') }) }), _jsxs("div", { className: 'benchmark-view__search-row', children: [_jsx(Input, { value: query, placeholder: t('benchmark.searchPlaceholder'), prefix: _jsx("span", { className: 'material-symbols-rounded benchmark-view__search-icon', children: "search" }), allowClear: true, onChange: event => onQueryChange(event.target.value), className: 'benchmark-view__search' }), _jsx(Tooltip, { title: t('benchmark.expandAll'), children: _jsx(Button, { type: 'text', size: 'small', icon: _jsx("span", { className: 'material-symbols-rounded', children: "unfold_more" }), onClick: () => onExpandedKeysChange(categories.map(item => `category:${item.category}`)) }) }), _jsx(Tooltip, { title: t('benchmark.collapseAll'), children: _jsx(Button, { type: 'text', size: 'small', icon: _jsx("span", { className: 'material-symbols-rounded', children: "unfold_less" }), onClick: () => onExpandedKeysChange([]) }) }), _jsx(Tooltip, { title: checkedCaseCount > 0
+                            ? t('benchmark.runSelected', { count: checkedCaseCount })
+                            : t('benchmark.runAll'), children: _jsx(Badge, { count: checkedCaseCount, size: 'small', children: _jsx(Button, { type: 'text', size: 'small', icon: _jsx("span", { className: 'material-symbols-rounded', children: "play_circle" }), onClick: onBatchRun }) }) })] }), _jsx("div", { className: 'benchmark-view__tree-shell', children: treeData.length === 0
+                    ? (_jsx("div", { className: 'benchmark-view__tree-empty', children: _jsx(Empty, { description: t('benchmark.emptyCases'), image: Empty.PRESENTED_IMAGE_SIMPLE }) }))
+                    : (_jsx(Tree, { blockNode: true, checkable: true, showIcon: false, switcherIcon: _jsx("span", { className: 'material-symbols-rounded benchmark-view__switcher', children: "chevron_right" }), selectedKeys: selectedCase ? [`case:${selectedCase.category}/${selectedCase.title}`] : [], expandedKeys: expandedKeys, checkedKeys: checkedKeys, treeData: treeData, onExpand: (keys) => onExpandedKeysChange(keys.map(String)), onSelect: handleTreeSelect, onCheck: handleTreeCheck })) })] }));
+}

package/dist/apps/client/src/components/benchmark-view/index.d.ts

@@ -0,0 +1,2 @@
+import './BenchmarkView.scss';
+export declare function BenchmarkView(): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/benchmark-view/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './BenchmarkView.scss';
+import { App } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+import { getApiErrorMessage, getBenchmarkResult, getBenchmarkRun, listBenchmarkCases, listBenchmarkCategories, startBenchmarkRun } from '#~/api.js';
+import { useQueryParams } from '#~/hooks/useQueryParams.js';
+import { BenchmarkCasePanel } from './BenchmarkCasePanel.js';
+import { BenchmarkSidebar } from './BenchmarkSidebar.js';
+import { isTerminalRun } from './utils.js';
+export function BenchmarkView() {
+    const { t } = useTranslation();
+    const { message } = App.useApp();
+    // State
+    const [activeRunId, setActiveRunId] = useState('');
+    const [treeQuery, setTreeQuery] = useState('');
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [checkedKeys, setCheckedKeys] = useState([]);
+    const { values, update } = useQueryParams({
+        keys: ['category', 'title'],
+        defaults: { category: '', title: '' },
+        omit: {
+            category: (value) => value === '',
+            title: (value) => value === ''
+        }
+    });
+    // Data
+    const { data: categoriesData, mutate: mutateCategories } = useSWR('/api/benchmark/categories', listBenchmarkCategories);
+    const categories = categoriesData?.categories ?? [];
+    const { data: casesData, mutate: mutateCases } = useSWR('/api/benchmark/cases', () => listBenchmarkCases());
+    const cases = casesData?.cases ?? [];
+    const selectedCase = useMemo(() => {
+        if (cases.length === 0)
+            return null;
+        const exact = cases.find(item => item.category === values.category && item.title === values.title);
+        if (exact)
+            return exact;
+        const sameCategoryFirst = values.category
+            ? cases.find(item => item.category === values.category) ?? null
+            : null;
+        return sameCategoryFirst ?? cases[0] ?? null;
+    }, [cases, values.category, values.title]);
+    const { data: resultData, mutate: mutateResult } = useSWR(selectedCase ? `/api/benchmark/results/${selectedCase.category}/${selectedCase.title}` : null, () => getBenchmarkResult(selectedCase?.category ?? '', selectedCase?.title ?? ''));
+    const latestResult = resultData?.result ?? selectedCase?.latestResult ?? null;
+    const { data: runData, mutate: mutateRun } = useSWR(activeRunId ? `/api/benchmark/runs/${activeRunId}` : null, () => getBenchmarkRun(activeRunId), { refreshInterval: activeRunId ? 2000 : 0 });
+    const activeRun = runData?.run;
+    const progressPercent = useMemo(() => {
+        const totalCount = activeRun?.totalCount ?? 0;
+        if (totalCount <= 0)
+            return 0;
+        const completedCount = activeRun?.completedCount ?? 0;
+        return Math.min(100, Math.round((completedCount / totalCount) * 100));
+    }, [activeRun?.completedCount, activeRun?.totalCount]);
+    // Handlers
+    const handleRunSpecificCase = useCallback(async (item) => {
+        try {
+            const res = await startBenchmarkRun({ category: item.category, title: item.title });
+            setActiveRunId(res.run.runId);
+            void message.success(t('benchmark.runStarted'));
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('benchmark.runFailed')));
+        }
+    }, [message, t]);
+    const handleRunCategory = useCallback(async (category) => {
+        try {
+            const res = await startBenchmarkRun({ category });
+            setActiveRunId(res.run.runId);
+            void message.success(t('benchmark.categoryRunStarted'));
+        }
+        catch (error) {
+            void message.error(getApiErrorMessage(error, t('benchmark.runFailed')));
+        }
+    }, [message, t]);
+    const handleBatchRun = useCallback(async () => {
+        const caseKeys = checkedKeys.filter(k => k.startsWith('case:'));
+        const casesToRun = cases.filter(item => caseKeys.includes(`case:${item.category}/${item.title}`));
+        if (casesToRun.length === 0) {
+            for (const item of cases) {
+                try {
+                    await startBenchmarkRun({ category: item.category, title: item.title });
+                }
+                catch { /* continue */ }
+            }
+            void message.success(t('benchmark.runStarted'));
+            return;
+        }
+        let started = 0;
+        for (const item of casesToRun) {
+            try {
+                await startBenchmarkRun({ category: item.category, title: item.title });
+                started++;
+            }
+            catch { /* continue */ }
+        }
+        if (started > 0) {
+            setCheckedKeys([]);
+            void mutateCases();
+            void mutateCategories();
+            void message.success(t('benchmark.runStarted'));
+        }
+    }, [checkedKeys, cases, mutateCases, mutateCategories, message, t]);
+    // Effects
+    useEffect(() => {
+        const nextKeys = categories.map(item => `category:${item.category}`);
+        setExpandedKeys((prev) => {
+            if (prev.length > 0 && treeQuery.trim() === '')
+                return prev;
+            return nextKeys;
+        });
+    }, [categories, treeQuery]);
+    useEffect(() => {
+        if (selectedCase == null)
+            return;
+        if (values.category !== selectedCase.category || values.title !== selectedCase.title) {
+            update({ category: selectedCase.category, title: selectedCase.title });
+        }
+    }, [selectedCase, update, values.category, values.title]);
+    useEffect(() => {
+        if (!isTerminalRun(activeRun))
+            return;
+        void mutateCases();
+        void mutateCategories();
+        void mutateResult();
+        if (activeRunId !== '')
+            void mutateRun();
+        const summary = activeRun?.status === 'completed'
+            ? t('benchmark.runCompleted')
+            : t('benchmark.runFailed');
+        void message.info(summary);
+        setActiveRunId('');
+    }, [activeRun, activeRunId, message, mutateCases, mutateCategories, mutateResult, mutateRun, t]);
+    const checkedCaseCount = checkedKeys.filter(k => k.startsWith('case:')).length;
+    return (_jsxs("div", { className: 'benchmark-view', children: [_jsx("div", { className: 'benchmark-view__left', children: _jsx(BenchmarkSidebar, { cases: cases, categories: categories, selectedCase: selectedCase, query: treeQuery, expandedKeys: expandedKeys, checkedKeys: checkedKeys, checkedCaseCount: checkedCaseCount, onQueryChange: setTreeQuery, onExpandedKeysChange: setExpandedKeys, onCheckedKeysChange: setCheckedKeys, onSelectCase: (category, title) => update({ category, title }), onRunCase: (item) => void handleRunSpecificCase(item), onRunCategory: (category) => void handleRunCategory(category), onBatchRun: () => void handleBatchRun() }) }), _jsx("div", { className: 'benchmark-view__divider' }), _jsx("div", { className: 'benchmark-view__right', children: _jsx(BenchmarkCasePanel, { selectedCase: selectedCase, latestResult: latestResult, activeRun: activeRun, activeRunId: activeRunId, progressPercent: progressPercent, onRunCase: () => void (selectedCase && handleRunSpecificCase(selectedCase)) }) })] }));
+}

package/dist/apps/client/src/components/benchmark-view/types.d.ts

@@ -0,0 +1,9 @@
+import type { BenchmarkCase, BenchmarkResult } from '@vibe-forge/types';
+export interface BenchmarkQueryParams extends Record<string, string> {
+    category: string;
+    title: string;
+}
+export interface TreeNodeCase extends Pick<BenchmarkCase, 'category' | 'title' | 'frontmatter'> {
+    key: string;
+    latestResult?: BenchmarkResult | null;
+}

package/dist/apps/client/src/components/benchmark-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/apps/client/src/components/benchmark-view/utils.d.ts

@@ -0,0 +1,7 @@
+import type { BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types';
+export declare const isTerminalRun: (run?: BenchmarkRunSummary | null) => boolean;
+export declare const formatTimestamp: (value?: string | null) => string;
+export declare const getResultStatusMeta: (result?: BenchmarkResult | null) => {
+    icon: string;
+    statusKey: string;
+};

package/dist/apps/client/src/components/benchmark-view/utils.js

@@ -0,0 +1,17 @@
+// ─── Formatting ───────────────────────────────────────────────────────────────
+export const isTerminalRun = (run) => run?.status === 'completed' || run?.status === 'failed';
+export const formatTimestamp = (value) => {
+    if (!value)
+        return '-';
+    return new Date(value).toLocaleString();
+};
+// ─── Result status helpers ────────────────────────────────────────────────────
+export const getResultStatusMeta = (result) => {
+    if (result == null)
+        return { icon: 'radio_button_unchecked', statusKey: 'no-result' };
+    if (result.status === 'pass')
+        return { icon: 'check_circle', statusKey: 'pass' };
+    if (result.status === 'partial')
+        return { icon: 'rule', statusKey: 'partial' };
+    return { icon: 'cancel', statusKey: 'fail' };
+};