@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/benchmark-view/BenchmarkSidebar.tsx

@@ -1,269 +0,0 @@
-import './BenchmarkSidebar.scss'
-
-import { Badge, Button, Empty, Input, Tooltip, Tree, Typography } from 'antd'
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { BenchmarkCase, BenchmarkCategory, BenchmarkResult } from '@vibe-forge/types'
-
-import type { TreeNodeCase } from './types.js'
-import { getResultStatusMeta } from './utils.js'
-
-interface BenchmarkTreeNode {
-  key: React.Key
-  title: React.ReactNode
-  selectable?: boolean
-  isLeaf?: boolean
-  children?: BenchmarkTreeNode[]
-  caseData?: TreeNodeCase
-}
-
-function ResultStatusIcon({ result }: { result: BenchmarkResult | null | undefined }) {
-  const meta = getResultStatusMeta(result)
-  return (
-    <span
-      className={`material-symbols-rounded benchmark-view__status-icon benchmark-view__status-icon--${meta.statusKey}`}
-    >
-      {meta.icon}
-    </span>
-  )
-}
-
-// ─── Tree builder ─────────────────────────────────────────────────────────────
-
-function buildCaseTreeData(params: {
-  categories: BenchmarkCategory[]
-  cases: BenchmarkCase[]
-  query: string
-  t: ReturnType<typeof useTranslation>['t']
-  onRunCase: (item: BenchmarkCase) => void
-  onRunCategory: (category: string) => void
-}) {
-  const { categories, cases, query, t, onRunCase, onRunCategory } = params
-  const keyword = query.trim().toLowerCase()
-
-  const categoriesOrder: BenchmarkCategory[] = 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: (
-          <div className='benchmark-view__tree-category'>
-            <span className='material-symbols-rounded benchmark-view__tree-icon benchmark-view__tree-icon--category'>
-              folder_open
-            </span>
-            <Typography.Text strong className='benchmark-view__tree-title'>
-              {category.category}
-            </Typography.Text>
-            <Tooltip title={t('benchmark.runCategory')}>
-              <Button
-                type='text'
-                size='small'
-                className='benchmark-view__tree-run-btn benchmark-view__tree-run-btn--category'
-                icon={<span className='material-symbols-rounded'>play_circle</span>}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onRunCategory(category.category)
-                }}
-              />
-            </Tooltip>
-          </div>
-        ),
-        children: matchedCases.map((item) => {
-          const nodeCase: TreeNodeCase = { ...item, key: `case:${item.category}/${item.title}` }
-          const displayTitle = item.frontmatter.title ?? item.title
-          return {
-            key: nodeCase.key,
-            isLeaf: true,
-            title: (
-              <div className='benchmark-view__tree-case'>
-                <ResultStatusIcon result={nodeCase.latestResult} />
-                <span className='material-symbols-rounded benchmark-view__tree-icon'>draft</span>
-                <Typography.Text className='benchmark-view__tree-title'>{displayTitle}</Typography.Text>
-                <Tooltip title={t('benchmark.runCase')}>
-                  <Button
-                    type='text'
-                    size='small'
-                    className='benchmark-view__tree-run-btn'
-                    icon={<span className='material-symbols-rounded'>play_circle</span>}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onRunCase(item)
-                    }}
-                  />
-                </Tooltip>
-              </div>
-            ),
-            caseData: nodeCase
-          }
-        })
-      }
-    })
-    .filter(node => node != null)
-
-  return nodes as BenchmarkTreeNode[]
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-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 function BenchmarkSidebar({
-  cases,
-  categories,
-  selectedCase,
-  query,
-  expandedKeys,
-  checkedKeys,
-  checkedCaseCount,
-  onQueryChange,
-  onExpandedKeysChange,
-  onCheckedKeysChange,
-  onSelectCase,
-  onRunCase,
-  onRunCategory,
-  onBatchRun
-}: BenchmarkSidebarProps) {
-  const { t } = useTranslation()
-
-  const treeData = useMemo<BenchmarkTreeNode[]>(() =>
-    buildCaseTreeData({
-      categories,
-      cases,
-      query,
-      t,
-      onRunCase,
-      onRunCategory
-    }), [cases, categories, query, t])
-
-  const handleTreeCheck = (
-    checked: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[] }
-  ) => {
-    const keys = Array.isArray(checked) ? checked : checked.checked
-    onCheckedKeysChange(keys.map(String))
-  }
-
-  const handleTreeSelect = (_keys: React.Key[], info: {
-    node: {
-      key: React.Key
-      caseData?: TreeNodeCase
-    }
-  }) => {
-    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 (
-    <div className='benchmark-view__sidebar'>
-      <div className='benchmark-view__search-row'>
-        <Input
-          value={query}
-          placeholder={t('benchmark.searchPlaceholder')}
-          prefix={<span className='material-symbols-rounded benchmark-view__search-icon'>search</span>}
-          allowClear
-          onChange={event => onQueryChange(event.target.value)}
-          className='benchmark-view__search'
-        />
-        <Tooltip title={t('benchmark.expandAll')}>
-          <Button
-            type='text'
-            size='small'
-            icon={<span className='material-symbols-rounded'>unfold_more</span>}
-            onClick={() => onExpandedKeysChange(categories.map(item => `category:${item.category}`))}
-          />
-        </Tooltip>
-        <Tooltip title={t('benchmark.collapseAll')}>
-          <Button
-            type='text'
-            size='small'
-            icon={<span className='material-symbols-rounded'>unfold_less</span>}
-            onClick={() => onExpandedKeysChange([])}
-          />
-        </Tooltip>
-        <Tooltip
-          title={checkedCaseCount > 0
-            ? t('benchmark.runSelected', { count: checkedCaseCount })
-            : t('benchmark.runAll')}
-        >
-          <Badge count={checkedCaseCount} size='small'>
-            <Button
-              type='text'
-              size='small'
-              icon={<span className='material-symbols-rounded'>play_circle</span>}
-              onClick={onBatchRun}
-            />
-          </Badge>
-        </Tooltip>
-      </div>
-
-      <div className='benchmark-view__tree-shell'>
-        {treeData.length === 0
-          ? (
-            <div className='benchmark-view__tree-empty'>
-              <Empty description={t('benchmark.emptyCases')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
-            </div>
-          )
-          : (
-            <Tree
-              blockNode
-              checkable
-              showIcon={false}
-              switcherIcon={<span className='material-symbols-rounded benchmark-view__switcher'>chevron_right</span>}
-              selectedKeys={selectedCase ? [`case:${selectedCase.category}/${selectedCase.title}`] : []}
-              expandedKeys={expandedKeys}
-              checkedKeys={checkedKeys}
-              treeData={treeData}
-              onExpand={(keys) => onExpandedKeysChange(keys.map(String))}
-              onSelect={handleTreeSelect}
-              onCheck={handleTreeCheck}
-            />
-          )}
-      </div>
-    </div>
-  )
-}

package/src/components/benchmark-view/BenchmarkView.scss

@@ -1,121 +0,0 @@
-.benchmark-view {
-  &__body {
-    flex-direction: row;
-    gap: 0;
-    padding: 0;
-  }
-
-  &__mobile-switcher-shell {
-    display: none;
-  }
-
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-
-  &__left {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    width: var(--subpage-secondary-panel-width);
-    min-width: var(--subpage-secondary-panel-width);
-    max-width: var(--subpage-secondary-panel-width);
-    background: var(--sub-bg-color);
-  }
-
-  &__right {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    margin: var(--subpage-content-card-gap);
-    margin-left: 0;
-    padding: 10px 12px 12px;
-    border-radius: var(--subpage-content-card-radius);
-    background: var(--subpage-content-card-bg);
-  }
-
-  &__canvas {
-    height: 100%;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    padding-right: 4px;
-  }
-
-  &__empty {
-    height: 100%;
-    display: grid;
-    place-items: center;
-  }
-
-  &__sep.ant-divider {
-    margin: 0;
-    border-color: var(--border-color);
-  }
-}
-
-@media (max-width: 1100px) {
-  .benchmark-view {
-    &__body {
-      flex-direction: column;
-    }
-
-    &__left {
-      width: 100%;
-      min-width: 0;
-      max-height: 320px;
-    }
-
-    &__right {
-      margin-top: 0;
-      margin-left: var(--subpage-content-card-gap);
-    }
-  }
-}
-
-@media (max-width: 720px) {
-  .benchmark-view {
-    &__right {
-      padding: 10px 12px;
-    }
-  }
-}
-
-@media (max-width: 960px) {
-  .benchmark-view--compact {
-    .benchmark-view__mobile-switcher-shell {
-      display: block;
-      padding: 12px;
-      padding-bottom: 0;
-    }
-
-    .benchmark-view__mobile-switcher {
-      width: 100%;
-
-      .ant-segmented-group {
-        gap: 4px;
-      }
-
-      .ant-segmented-item {
-        min-height: 32px;
-      }
-    }
-
-    .benchmark-view__left,
-    .benchmark-view__right {
-      width: auto;
-      min-width: 0;
-      max-width: none;
-      max-height: none;
-      margin: 12px;
-      margin-top: 12px;
-      border-radius: var(--subpage-content-card-radius);
-      background: var(--subpage-content-card-bg);
-      overflow: hidden;
-    }
-
-    .benchmark-view__right {
-      padding: 12px;
-    }
-  }
-}

package/src/components/benchmark-view/index.tsx

@@ -1,237 +0,0 @@
-import './BenchmarkView.scss'
-
-import { App, Segmented } from 'antd'
-import React, { 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 { PageShell } from '#~/components/layout/PageShell'
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-import type { BenchmarkCase } from '@vibe-forge/types'
-
-import { BenchmarkCasePanel } from './BenchmarkCasePanel.js'
-import { BenchmarkSidebar } from './BenchmarkSidebar.js'
-import type { BenchmarkQueryParams } from './types.js'
-import { isTerminalRun } from './utils.js'
-
-export function BenchmarkView() {
-  const { t } = useTranslation()
-  const { message } = App.useApp()
-  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-
-  // State
-  const [activeRunId, setActiveRunId] = useState('')
-  const [treeQuery, setTreeQuery] = useState('')
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([])
-  const [checkedKeys, setCheckedKeys] = useState<string[]>([])
-  const [mobilePanel, setMobilePanel] = useState<'cases' | 'details'>('cases')
-  const isCompactView = isCompactLayout || isTouchInteraction
-
-  const { values, update } = useQueryParams<BenchmarkQueryParams>({
-    keys: ['category', 'title'],
-    defaults: { category: '', title: '' },
-    omit: {
-      category: (value: string) => value === '',
-      title: (value: string) => 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<BenchmarkCase | null>(() => {
-    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: BenchmarkCase) => {
-    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: string) => {
-    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 (!isCompactView) return
-    if (selectedCase == null) {
-      setMobilePanel('cases')
-    }
-  }, [isCompactView, selectedCase])
-
-  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
-  const showCases = !isCompactView || mobilePanel === 'cases'
-  const showDetails = !isCompactView || mobilePanel === 'details'
-
-  return (
-    <PageShell
-      className={`benchmark-view ${isCompactView ? 'benchmark-view--compact' : ''}`}
-      bodyClassName='benchmark-view__body'
-    >
-      {isCompactView && (
-        <div className='benchmark-view__mobile-switcher-shell'>
-          <Segmented
-            block
-            className='benchmark-view__mobile-switcher'
-            value={mobilePanel}
-            onChange={(value) => setMobilePanel(value as 'cases' | 'details')}
-            options={[
-              { label: t('benchmark.mobileCases'), value: 'cases' },
-              { label: t('benchmark.mobileDetails'), value: 'details', disabled: selectedCase == null }
-            ]}
-          />
-        </div>
-      )}
-      {showCases && (
-        <div className='benchmark-view__left'>
-          <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 })
-              if (isCompactView) {
-                setMobilePanel('details')
-              }
-            }}
-            onRunCase={(item) => void handleRunSpecificCase(item)}
-            onRunCategory={(category) => void handleRunCategory(category)}
-            onBatchRun={() => void handleBatchRun()}
-          />
-        </div>
-      )}
-      {showDetails && (
-        <div className='benchmark-view__right'>
-          <BenchmarkCasePanel
-            selectedCase={selectedCase}
-            latestResult={latestResult}
-            activeRun={activeRun}
-            activeRunId={activeRunId}
-            progressPercent={progressPercent}
-            onRunCase={() => void (selectedCase && handleRunSpecificCase(selectedCase))}
-          />
-        </div>
-      )}
-    </PageShell>
-  )
-}

package/src/components/benchmark-view/types.ts

@@ -1,11 +0,0 @@
-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/src/components/benchmark-view/utils.ts

@@ -1,20 +0,0 @@
-import type { BenchmarkResult, BenchmarkRunSummary } from '@vibe-forge/types'
-
-// ─── Formatting ───────────────────────────────────────────────────────────────
-
-export const isTerminalRun = (run?: BenchmarkRunSummary | null) =>
-  run?.status === 'completed' || run?.status === 'failed'
-
-export const formatTimestamp = (value?: string | null): string => {
-  if (!value) return '-'
-  return new Date(value).toLocaleString()
-}
-
-// ─── Result status helpers ────────────────────────────────────────────────────
-
-export const getResultStatusMeta = (result?: BenchmarkResult | null) => {
-  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' }
-}