@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

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

@@ -1,369 +0,0 @@
-import './index.scss'
-
-import { App } from 'antd'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import useSWR from 'swr'
-
-import type { AutomationRule, AutomationRun } from '#~/api.js'
-import {
-  createAutomationRule,
-  deleteAutomationRule,
-  getApiErrorMessage,
-  listAutomationRules,
-  listAutomationRuns,
-  runAutomationRule,
-  updateAutomationRule
-} from '#~/api.js'
-import { useMobileSidebarModal } from '#~/components/layout/@hooks/use-mobile-sidebar-modal'
-import { PageShell } from '#~/components/layout/PageShell'
-import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-import { useQueryParams } from '#~/hooks/useQueryParams.js'
-
-import { RuleFormPanel } from './RuleFormPanel.js'
-import { RuleSidebar } from './RuleSidebar.js'
-import { RunHistoryPanel } from './RunHistoryPanel.js'
-
-type PanelMode = 'view' | 'create' | 'edit'
-
-interface AutomationQueryParams extends Record<string, string> {
-  rule: string
-  q: string
-  runQ: string
-  status: string
-  time: string
-  sort: string
-}
-
-export function AutomationView() {
-  const { t } = useTranslation()
-  const { message } = App.useApp()
-  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-  const navigate = useNavigate()
-  const { data, mutate } = useSWR<{ rules: AutomationRule[] }>(
-    '/api/automation/rules',
-    listAutomationRules
-  )
-  const rules = data?.rules ?? []
-  const [panelMode, setPanelMode] = useState<PanelMode>('view')
-  const [submitting, setSubmitting] = useState(false)
-  const [mobilePanel, setMobilePanel] = useState<'rules' | 'details'>('details')
-  const [isRulePanelCollapsed, setIsRulePanelCollapsed] = useState(false)
-  const detailPanelRef = useRef<HTMLDivElement | null>(null)
-  const mobileRulePanelSheetRef = useRef<HTMLDivElement | null>(null)
-  const [favorites, setFavorites] = useState<string[]>(() => {
-    try {
-      const raw = window.localStorage.getItem('automationRuleFavorites')
-      if (!raw) return []
-      const parsed = JSON.parse(raw) as string[]
-      if (!Array.isArray(parsed)) return []
-      return parsed
-    } catch {
-      return []
-    }
-  })
-  const isCompactView = isCompactLayout || isTouchInteraction
-  const isMobileRulePanelOpen = isCompactView && mobilePanel === 'rules'
-  const mobileRulePanelBackgroundRefs = useMemo(() => [detailPanelRef], [])
-
-  const { values, update } = useQueryParams<AutomationQueryParams>({
-    keys: ['rule', 'q', 'runQ', 'status', 'time', 'sort'],
-    defaults: {
-      rule: '',
-      q: '',
-      runQ: '',
-      status: 'all',
-      time: 'all',
-      sort: 'desc'
-    },
-    omit: {
-      rule: (value: string) => value === '',
-      q: (value: string) => value === '',
-      runQ: (value: string) => value === '',
-      status: (value: string) => value === 'all',
-      time: (value: string) => value === 'all',
-      sort: (value: string) => value === 'desc'
-    }
-  })
-
-  const selectedRuleId = useMemo(() => {
-    const fromUrl = values.rule
-    if (fromUrl && rules.some(rule => rule.id === fromUrl)) return fromUrl
-    return null
-  }, [rules, values.rule])
-
-  const selectedRule = useMemo(
-    () => rules.find(rule => rule.id === selectedRuleId) ?? null,
-    [rules, selectedRuleId]
-  )
-
-  const { data: runsData, mutate: mutateRuns } = useSWR<{ runs: AutomationRun[] }>(
-    selectedRuleId ? `/api/automation/rules/${selectedRuleId}/runs` : null,
-    () => listAutomationRuns(selectedRuleId ?? '')
-  )
-  const runs = runsData?.runs ?? []
-  const favoriteSet = useMemo(() => new Set(favorites), [favorites])
-
-  useEffect(() => {
-    window.localStorage.setItem('automationRuleFavorites', JSON.stringify(favorites))
-  }, [favorites])
-
-  useEffect(() => {
-    if (!values.rule) return
-    if (rules.some(rule => rule.id === values.rule)) return
-    update({ rule: '' })
-  }, [rules, update, values.rule])
-
-  useEffect(() => {
-    if (!isCompactView) return
-    if (panelMode !== 'view' || values.rule) {
-      setMobilePanel('details')
-    }
-  }, [isCompactView, panelMode, values.rule])
-
-  useMobileSidebarModal({
-    backgroundRefs: mobileRulePanelBackgroundRefs,
-    isCompactLayout: isCompactView,
-    isMobileSidebarOpen: isMobileRulePanelOpen,
-    setIsMobileSidebarOpen: (nextOpen) => setMobilePanel(nextOpen ? 'rules' : 'details'),
-    sheetRef: mobileRulePanelSheetRef
-  })
-
-  const handleSelectRule = useCallback((ruleId: string) => {
-    setPanelMode('view')
-    if (panelMode === 'view' && selectedRuleId === ruleId) {
-      update({ rule: '' })
-      if (isCompactView) {
-        setMobilePanel('details')
-      }
-      return
-    }
-    update({ rule: ruleId })
-    if (isCompactView) {
-      setMobilePanel('details')
-    }
-  }, [isCompactView, panelMode, selectedRuleId, update])
-
-  const handleCreateRule = useCallback(() => {
-    setPanelMode('create')
-    if (isCompactView) {
-      setMobilePanel('details')
-    }
-  }, [isCompactView])
-
-  const handleCollapseRulePanel = useCallback(() => {
-    if (isCompactView) {
-      setMobilePanel('details')
-      return
-    }
-
-    setIsRulePanelCollapsed(true)
-  }, [isCompactView])
-
-  const handleExpandRulePanel = useCallback(() => {
-    if (isCompactView) {
-      setMobilePanel('rules')
-      return
-    }
-
-    setIsRulePanelCollapsed(false)
-  }, [isCompactView])
-
-  const handleEditRule = useCallback((rule: AutomationRule) => {
-    setPanelMode('edit')
-    update({ rule: rule.id })
-    if (isCompactView) {
-      setMobilePanel('details')
-    }
-  }, [isCompactView, update])
-
-  const handleCancelForm = useCallback(() => {
-    setPanelMode('view')
-    if (isCompactView) {
-      setMobilePanel('details')
-    }
-  }, [isCompactView])
-
-  const detailsShouldShowRulePanelAction = isCompactView || (!isCompactView && isRulePanelCollapsed)
-
-  const handleSubmit = useCallback(async (
-    payload: Partial<AutomationRule>,
-    immediateRun: boolean
-  ) => {
-    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: AutomationRule) => {
-    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: AutomationRule) => {
-    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: AutomationRule, enabled: boolean) => {
-    try {
-      await updateAutomationRule(rule.id, { enabled })
-      void mutate()
-    } catch (error) {
-      void message.error(getApiErrorMessage(error, t('automation.toggleFailed')))
-    }
-  }, [message, mutate, t])
-
-  const handleToggleFavorite = useCallback((ruleId: string) => {
-    setFavorites(prev => prev.includes(ruleId) ? prev.filter(id => id !== ruleId) : [...prev, ruleId])
-  }, [])
-
-  const ruleSidebar = (
-    <RuleSidebar
-      rules={rules}
-      selectedRuleId={selectedRuleId}
-      query={values.q}
-      isCreating={panelMode === 'create'}
-      favoriteIds={favorites}
-      collapsible
-      onCreate={handleCreateRule}
-      onSelect={handleSelectRule}
-      onRun={handleRun}
-      onDelete={handleDelete}
-      onToggleFavorite={handleToggleFavorite}
-      onToggle={handleToggle}
-      onToggleCollapsed={handleCollapseRulePanel}
-      onQueryChange={(value: string) => update({ q: value })}
-    />
-  )
-
-  return (
-    <PageShell
-      className={[
-        'automation-view',
-        isCompactView ? 'automation-view--compact' : '',
-        !isCompactView && isRulePanelCollapsed ? 'automation-view--left-collapsed' : ''
-      ].filter(Boolean).join(' ')}
-      bodyClassName='automation-view__body'
-    >
-      {isCompactView
-        ? (
-          <>
-            <button
-              type='button'
-              className={`automation-view__mobile-rule-backdrop ${isMobileRulePanelOpen ? 'is-open' : ''}`}
-              aria-label={t('common.close')}
-              aria-hidden={!isMobileRulePanelOpen}
-              tabIndex={-1}
-              onClick={() => setMobilePanel('details')}
-            />
-            <div
-              ref={mobileRulePanelSheetRef}
-              className={`automation-view__mobile-rule-sheet ${isMobileRulePanelOpen ? 'is-open' : ''}`}
-              role='dialog'
-              aria-modal={isMobileRulePanelOpen ? 'true' : undefined}
-              aria-label={t('automation.mobileRules')}
-              aria-hidden={!isMobileRulePanelOpen}
-              tabIndex={-1}
-            >
-              <div className='automation-view__left automation-view__left--mobile-sheet'>
-                {ruleSidebar}
-              </div>
-            </div>
-          </>
-        )
-        : (
-          <div className={`automation-view__left ${!isCompactView && isRulePanelCollapsed ? 'is-collapsed' : ''}`}>
-            {ruleSidebar}
-          </div>
-        )}
-      <div ref={detailPanelRef} className='automation-view__right'>
-        {panelMode === 'create' && (
-          <RuleFormPanel
-            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
-            mode='create'
-            rule={null}
-            submitting={submitting}
-            onCreateRule={handleCreateRule}
-            onExpandRulePanel={handleExpandRulePanel}
-            onSubmit={handleSubmit}
-            onCancel={handleCancelForm}
-          />
-        )}
-        {panelMode === 'edit' && (
-          <RuleFormPanel
-            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
-            mode='edit'
-            rule={selectedRule}
-            submitting={submitting}
-            onCreateRule={handleCreateRule}
-            onExpandRulePanel={handleExpandRulePanel}
-            onSubmit={handleSubmit}
-            onCancel={handleCancelForm}
-          />
-        )}
-        {panelMode === 'view' && (
-          <RunHistoryPanel
-            compact={isCompactView}
-            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
-            rule={selectedRule}
-            runs={runs}
-            runQuery={values.runQ}
-            statusFilter={values.status}
-            timeFilter={values.time}
-            sortOrder={values.sort}
-            onCreateRule={handleCreateRule}
-            onExpandRulePanel={handleExpandRulePanel}
-            onEditRule={handleEditRule}
-            onRunRule={handleRun}
-            onDeleteRule={handleDelete}
-            isFavorite={selectedRule != null && favoriteSet.has(selectedRule.id)}
-            onToggleFavorite={handleToggleFavorite}
-            onRunQueryChange={(value: string) => update({ runQ: value })}
-            onStatusFilterChange={(value: string) => update({ status: value })}
-            onTimeFilterChange={(value: string) => update({ time: value })}
-            onSortOrderChange={(value: string) => update({ sort: value })}
-          />
-        )}
-      </div>
-    </PageShell>
-  )
-}

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

@@ -1,34 +0,0 @@
-import type { EffortLevel, GitBranchKind, SessionPermissionMode } from '@vibe-forge/types'
-
-export type AutomationCreateWorktreeMode = 'default' | 'managed' | 'local'
-export type AutomationBranchAction = 'default' | 'checkout' | 'create'
-
-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
-    model?: string
-    adapter?: string
-    effort?: EffortLevel | 'default'
-    permissionMode?: SessionPermissionMode | 'default'
-    createWorktreeMode?: AutomationCreateWorktreeMode
-    branchAction?: AutomationBranchAction
-    branchName?: string
-    branchKind?: GitBranchKind
-  }>
-}

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

@@ -1,287 +0,0 @@
-.benchmark-view {
-  // Case header
-  &__case-header {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 0 0 2px;
-  }
-
-  &__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: 10px;
-    padding: 0;
-  }
-
-  &__section--last {
-    padding-bottom: 0;
-  }
-
-  &__twin-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-    align-items: start;
-  }
-
-  &__goal-body {
-    min-height: 220px;
-    max-height: 360px;
-    overflow: auto;
-    overflow-x: hidden;
-    padding: var(--subpage-tertiary-padding);
-    border: var(--subpage-tertiary-border);
-    border-radius: var(--subpage-tertiary-radius);
-    background: var(--subpage-tertiary-bg);
-  }
-
-  &__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;
-    padding: var(--subpage-tertiary-padding);
-    border: var(--subpage-tertiary-border);
-    border-radius: var(--subpage-tertiary-radius);
-    background: var(--subpage-tertiary-bg);
-  }
-
-  &__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: 0;
-    border: var(--subpage-tertiary-border);
-    border-radius: var(--subpage-tertiary-radius);
-    overflow: hidden;
-    background: var(--subpage-tertiary-bg);
-  }
-
-  &__score-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: var(--subpage-tertiary-padding) 10px;
-    background: transparent;
-
-    &:not(:last-child) {
-      border-right: 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: var(--subpage-tertiary-radius);
-    border: var(--subpage-tertiary-border);
-    background: var(--subpage-tertiary-bg);
-    padding: var(--subpage-tertiary-padding);
-    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));
-    }
-
-    &__twin-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-}