@vibe-forge/client 0.2.0-alpha.9 → 0.4.0

package/src/components/BenchmarkView/BenchmarkCasePanel.scss

@@ -0,0 +1,267 @@
+.benchmark-view {
+  // Case header
+  &__case-header {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 4px 0 16px;
+  }
+
+  &__case-title-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  &__case-title.ant-typography {
+    margin: 0;
+  }
+
+  &__case-desc.ant-typography {
+    margin: 0;
+  }
+
+  &__case-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  &__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+  }
+
+  // Sections
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 0;
+  }
+
+  &__section--last {
+    padding-bottom: 24px;
+  }
+
+  &__twin-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+  }
+
+  &__goal-body {
+    max-height: 360px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  &__task-goal {
+    min-width: 0;
+  }
+
+  &__section-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__section-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-color);
+  }
+
+  &__section-icon {
+    font-size: 16px;
+    color: var(--primary-color);
+  }
+
+  // Info grid
+  &__info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+    font-size: 13px;
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--sub-text-color);
+      flex-shrink: 0;
+    }
+
+    &--block {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    code,
+    span:last-child {
+      max-width: 70%;
+      text-align: right;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      color: var(--text-color);
+    }
+  }
+
+  &__hint {
+    font-size: 13px;
+  }
+
+  // Run state
+  &__run-block {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__run-metric {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 13px;
+
+    label {
+      color: var(--sub-text-color);
+    }
+
+    strong {
+      font-size: 18px;
+      line-height: 1;
+    }
+  }
+
+  // Result
+  &__result {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__score-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  &__score-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+
+    label {
+      font-size: 12px;
+      color: var(--sub-text-color);
+    }
+
+    strong {
+      font-size: 20px;
+      line-height: 1;
+      color: var(--text-color);
+    }
+  }
+
+  &__judge-summary.ant-typography {
+    margin: 0;
+    font-size: 13px;
+  }
+
+  &__subgrid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__subpanel {
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    background: var(--sub-bg-color);
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__subpanel-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-color);
+  }
+
+  &__file-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  &__file-tag {
+    padding: 3px 8px;
+    border-radius: 4px;
+    background: var(--code-bg);
+    color: var(--text-color);
+    font-size: 12px;
+    font-family: 'SFMono-Regular', 'SF Mono', Monaco, Consolas, monospace;
+  }
+
+  &__issues-list {
+    margin: 0;
+    padding-left: 16px;
+    font-size: 13px;
+
+    li + li {
+      margin-top: 6px;
+    }
+  }
+
+  // Ensure Material Symbols font renders inside markdown-body
+  .markdown-body .material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+  }
+
+  // Status tag (shown next to result section label)
+  &__status-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-inline-end: 0;
+  }
+
+  &__tag-icon {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .benchmark-view {
+    &__score-strip {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}

package/src/components/BenchmarkView/BenchmarkCasePanel.tsx

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