@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

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

@@ -1,22 +1,33 @@
 import './RunHistoryPanel.scss'
 
-import { Button, Empty, Input, Select, Table } from 'antd'
+import { Button, Empty, Input, Select, Table, Tooltip } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import dayjs from 'dayjs'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { AutomationRule, AutomationRun } from '#~/api.js'
 
+import { AutomationEmptyLanding } from './AutomationEmptyLanding'
+import { AutomationRuleDetailPreview } from './AutomationRuleDetailPreview'
+import { AutomationPanelTitleActions } from './PanelTitleActions'
+
 interface RunHistoryPanelProps {
   compact?: boolean
+  isRulePanelCollapsed?: boolean
   rule: AutomationRule | null
   runs: AutomationRun[]
   runQuery: string
   statusFilter: string
   timeFilter: string
   sortOrder: string
+  onCreateRule?: () => void
+  onExpandRulePanel?: () => void
   onEditRule: (rule: AutomationRule) => void
+  onRunRule: (rule: AutomationRule) => void
+  onDeleteRule: (rule: AutomationRule) => void
+  isFavorite: boolean
+  onToggleFavorite: (ruleId: string) => void
   onRunQueryChange: (value: string) => void
   onStatusFilterChange: (value: string) => void
   onTimeFilterChange: (value: string) => void
@@ -25,19 +36,27 @@ interface RunHistoryPanelProps {
 
 export function RunHistoryPanel({
   compact = false,
+  isRulePanelCollapsed = false,
   rule,
   runs,
   runQuery,
   statusFilter,
   timeFilter,
   sortOrder,
+  onCreateRule,
+  onExpandRulePanel,
   onEditRule,
+  onRunRule,
+  onDeleteRule,
+  isFavorite,
+  onToggleFavorite,
   onRunQueryChange,
   onStatusFilterChange,
   onTimeFilterChange,
   onSortOrderChange
 }: RunHistoryPanelProps) {
   const { t } = useTranslation()
+  const [runFiltersOpen, setRunFiltersOpen] = useState(false)
 
   const filteredRuns = useMemo(() => {
     const keyword = runQuery.trim().toLowerCase()
@@ -109,151 +128,141 @@ export function RunHistoryPanel({
     }
   ], [t])
 
-  const recentRuns = useMemo(() => {
-    if (runs.length === 0) return []
-    const sorted = [...runs].sort((a, b) => b.runAt - a.runAt)
-    const latestSessionId = sorted[0]?.sessionId
-    if (!latestSessionId) return sorted.slice(0, 1)
-    return sorted.filter((run) => run.sessionId === latestSessionId)
-  }, [runs])
-
   if (!rule) {
     return (
-      <div className='automation-view__empty'>
-        <Empty description={t('automation.selectRule')} />
-      </div>
+      <AutomationEmptyLanding
+        flushPanelPadding
+        isRulePanelCollapsed={isRulePanelCollapsed}
+        onCreateRule={onCreateRule}
+        onExpandRulePanel={onExpandRulePanel}
+      />
     )
   }
 
-  const triggerLabels = (rule.triggers ?? []).map((trigger) => {
-    if (trigger.type === 'interval') {
-      const minutes = trigger.intervalMs ? Math.max(1, Math.round(trigger.intervalMs / 60000)) : 1
-      return t('automation.intervalEvery', { minutes })
-    }
-    if (trigger.type === 'cron') {
-      const expression = trigger.cronExpression?.trim() || '-'
-      return t('automation.cronExpression', { expression })
-    }
-    return t('automation.webhookTrigger')
-  })
-  const taskLabels = (rule.tasks ?? []).map((task, index) => (
-    task.title || t('automation.taskDefaultTitle', { index: index + 1 })
-  ))
+  const statusOptions = [
+    { label: t('automation.statusAll'), value: 'all' },
+    { label: t('common.status.running'), value: 'running' },
+    { label: t('common.status.completed'), value: 'completed' },
+    { label: t('common.status.failed'), value: 'failed' },
+    { label: t('common.status.terminated'), value: 'terminated' },
+    { label: t('common.status.waiting_input'), value: 'waiting_input' }
+  ]
+  const timeOptions = [
+    { label: t('automation.timeAll'), value: 'all' },
+    { label: t('automation.time24h'), value: '24h' },
+    { label: t('automation.time7d'), value: '7d' },
+    { label: t('automation.time30d'), value: '30d' }
+  ]
+  const sortOptions = [
+    { label: t('automation.sortDesc'), value: 'desc' },
+    { label: t('automation.sortAsc'), value: 'asc' }
+  ]
+  const primaryType = rule.triggers?.[0]?.type ?? rule.type
+  const titleIcon = primaryType === 'interval' ? 'timer' : primaryType === 'cron' ? 'schedule' : 'webhook'
 
   return (
     <div className='automation-view__content'>
       <div className='automation-view__surface automation-view__detail-surface'>
         <div className='automation-view__detail'>
           <div className='automation-view__detail-header'>
-            <div className='automation-view__detail-title'>
-              <h3 className='automation-view__content-text'>{rule.name}</h3>
-              <span className='automation-view__detail-id'>{rule.id}</span>
+            <div className='automation-view__detail-title-shell'>
+              <AutomationPanelTitleActions
+                collapsed={isRulePanelCollapsed}
+                isCreating={false}
+                onCreateRule={onCreateRule}
+                onExpandRulePanel={onExpandRulePanel}
+              />
+              <div className='automation-view__detail-title'>
+                <span
+                  className={`material-symbols-rounded automation-view__detail-title-icon automation-view__detail-title-icon--${primaryType}`}
+                >
+                  {titleIcon}
+                </span>
+                <h3 className='automation-view__content-text'>{rule.name}</h3>
+              </div>
+            </div>
+            <div className='automation-view__detail-actions'>
+              <Tooltip title={t('automation.run')}>
+                <Button
+                  className='automation-view__icon-button automation-view__icon-button--detail-run'
+                  type='text'
+                  onClick={() => onRunRule(rule)}
+                >
+                  <span className='material-symbols-rounded automation-view__action-icon'>play_arrow</span>
+                </Button>
+              </Tooltip>
+              <Tooltip title={isFavorite ? t('automation.unfavorite') : t('automation.favorite')}>
+                <Button
+                  className={`automation-view__icon-button automation-view__icon-button--detail-favorite ${
+                    isFavorite ? 'automation-view__icon-button--active' : ''
+                  }`}
+                  type='text'
+                  onClick={() => onToggleFavorite(rule.id)}
+                >
+                  <span
+                    className={`material-symbols-rounded automation-view__action-icon ${isFavorite ? 'filled' : ''}`}
+                  >
+                    {isFavorite ? 'star' : 'star_outline'}
+                  </span>
+                </Button>
+              </Tooltip>
+              <Tooltip title={t('automation.delete')}>
+                <Button
+                  className='automation-view__icon-button automation-view__icon-button--detail-delete'
+                  type='text'
+                  onClick={() => onDeleteRule(rule)}
+                >
+                  <span className='material-symbols-rounded automation-view__action-icon'>delete</span>
+                </Button>
+              </Tooltip>
+              <Tooltip title={t('automation.edit')}>
+                <Button
+                  className='automation-view__icon-button automation-view__icon-button--edit'
+                  type='text'
+                  onClick={() => onEditRule(rule)}
+                >
+                  <span className='material-symbols-rounded automation-view__action-icon'>edit</span>
+                </Button>
+              </Tooltip>
             </div>
-            <Button
-              className='automation-view__icon-button automation-view__icon-button--edit'
-              type='text'
-              onClick={() => onEditRule(rule)}
-            >
-              <span className='material-symbols-rounded automation-view__action-icon'>edit</span>
-            </Button>
           </div>
           <div className='automation-view__detail-description'>
             <span className='material-symbols-rounded automation-view__meta-icon'>description</span>
             <span>{rule.description || t('automation.noDescription')}</span>
           </div>
           <div className='automation-view__detail-body'>
-            <div className='automation-view__detail-column'>
-              <div className='automation-view__detail-panel'>
-                <div className='automation-view__detail-row'>
-                  <span className='material-symbols-rounded automation-view__meta-icon'>event</span>
-                  <span className='automation-view__detail-label'>{t('automation.createdAt')}</span>
-                  <span className='automation-view__detail-value'>
-                    {dayjs(rule.createdAt).format('YYYY-MM-DD HH:mm')}
-                  </span>
-                </div>
-                <div className='automation-view__detail-row'>
-                  <span className='material-symbols-rounded automation-view__meta-icon'>toggle_on</span>
-                  <span className='automation-view__detail-label'>{t('automation.ruleStatus')}</span>
-                  <span className='automation-view__detail-value' data-status={rule.enabled ? 'enabled' : 'disabled'}>
-                    {rule.enabled ? t('automation.enabledOn') : t('automation.enabledOff')}
-                  </span>
-                </div>
-                {rule.lastSessionId && (
-                  <div className='automation-view__detail-row'>
-                    <span className='material-symbols-rounded automation-view__meta-icon'>open_in_new</span>
-                    <a
-                      className='automation-view__detail-label automation-view__detail-link'
-                      href={`/session/${rule.lastSessionId}?tag=${
-                        encodeURIComponent(`automation:${rule.id}:${rule.name}`)
-                      }`}
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      {t('automation.relatedSession')}
-                    </a>
-                  </div>
-                )}
-              </div>
-              <div className='automation-view__detail-panel automation-view__detail-panel--list'>
-                <div className='automation-view__detail-row'>
-                  <span className='material-symbols-rounded automation-view__meta-icon'>update</span>
-                  <span className='automation-view__detail-label'>{t('automation.lastRunLabel')}</span>
-                </div>
-                <div className='automation-view__run-list'>
-                  {recentRuns.length > 0
-                    ? recentRuns.map((run) => (
-                      <div key={run.id} className='automation-view__run-item'>
-                        <a
-                          className='automation-view__run-link'
-                          href={`/session/${run.sessionId}?tag=${
-                            encodeURIComponent(`automation:${rule.id}:${rule.name}`)
-                          }`}
-                          target='_blank'
-                          rel='noreferrer'
-                        >
-                          {run.taskTitle ?? t('automation.taskUnknown')}
-                        </a>
-                        <span className='automation-view__run-time'>
-                          {dayjs(run.runAt).format('YYYY-MM-DD HH:mm')}
-                        </span>
-                      </div>
-                    ))
-                    : <span className='automation-view__detail-value'>{t('automation.noRunYet')}</span>}
-                </div>
+            <div className='automation-view__detail-section automation-view__detail-section--meta'>
+              <div className='automation-view__detail-row'>
+                <span className='material-symbols-rounded automation-view__meta-icon'>event</span>
+                <span className='automation-view__detail-label'>{t('automation.createdAt')}</span>
+                <span className='automation-view__detail-value'>
+                  {dayjs(rule.createdAt).format('YYYY-MM-DD HH:mm')}
+                </span>
               </div>
-            </div>
-            <div className='automation-view__detail-column'>
-              <div className='automation-view__detail-panel'>
-                <div className='automation-view__detail-section-title'>
-                  <span className='material-symbols-rounded automation-view__meta-icon'>bolt</span>
-                  {t('automation.sectionTriggers')}
-                </div>
-                <div className='automation-view__detail-chips'>
-                  {triggerLabels.length
-                    ? triggerLabels.map((label, index) => (
-                      <span key={`${label}-${index}`} className='automation-view__detail-chip'>
-                        {label}
-                      </span>
-                    ))
-                    : <span className='automation-view__detail-placeholder'>{t('automation.noTriggers')}</span>}
-                </div>
+              <div className='automation-view__detail-row'>
+                <span className='material-symbols-rounded automation-view__meta-icon'>toggle_on</span>
+                <span className='automation-view__detail-label'>{t('automation.ruleStatus')}</span>
+                <span className='automation-view__detail-value' data-status={rule.enabled ? 'enabled' : 'disabled'}>
+                  {rule.enabled ? t('automation.enabledOn') : t('automation.enabledOff')}
+                </span>
               </div>
-              <div className='automation-view__detail-panel'>
-                <div className='automation-view__detail-section-title'>
-                  <span className='material-symbols-rounded automation-view__meta-icon'>task</span>
-                  {t('automation.sectionTasks')}
-                </div>
-                <div className='automation-view__detail-chips'>
-                  {taskLabels.length
-                    ? taskLabels.map((label, index) => (
-                      <span key={`${label}-${index}`} className='automation-view__detail-chip'>
-                        {label}
-                      </span>
-                    ))
-                    : <span className='automation-view__detail-placeholder'>{t('automation.noTasks')}</span>}
+              {rule.lastSessionId && (
+                <div className='automation-view__detail-row'>
+                  <span className='material-symbols-rounded automation-view__meta-icon'>open_in_new</span>
+                  <a
+                    className='automation-view__detail-label automation-view__detail-link'
+                    href={`/session/${rule.lastSessionId}?tag=${
+                      encodeURIComponent(`automation:${rule.id}:${rule.name}`)
+                    }`}
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    {t('automation.relatedSession')}
+                  </a>
                 </div>
-              </div>
+              )}
             </div>
+            <AutomationRuleDetailPreview rule={rule} />
           </div>
         </div>
       </div>
@@ -266,46 +275,57 @@ export function RunHistoryPanel({
           </div>
         </div>
         <div className='automation-view__run-filters'>
-          <Input
-            value={runQuery}
-            onChange={(event) => onRunQueryChange(event.target.value)}
-            placeholder={t('automation.runSearch')}
-            className='automation-view__run-search'
-            allowClear
-          />
-          <Select
-            value={statusFilter}
-            onChange={onStatusFilterChange}
-            className='automation-view__run-select'
-            options={[
-              { label: t('automation.statusAll'), value: 'all' },
-              { label: t('common.status.running'), value: 'running' },
-              { label: t('common.status.completed'), value: 'completed' },
-              { label: t('common.status.failed'), value: 'failed' },
-              { label: t('common.status.terminated'), value: 'terminated' },
-              { label: t('common.status.waiting_input'), value: 'waiting_input' }
-            ]}
-          />
-          <Select
-            value={timeFilter}
-            onChange={onTimeFilterChange}
-            className='automation-view__run-select'
-            options={[
-              { label: t('automation.timeAll'), value: 'all' },
-              { label: t('automation.time24h'), value: '24h' },
-              { label: t('automation.time7d'), value: '7d' },
-              { label: t('automation.time30d'), value: '30d' }
-            ]}
-          />
-          <Select
-            value={sortOrder}
-            onChange={onSortOrderChange}
-            className='automation-view__run-select'
-            options={[
-              { label: t('automation.sortDesc'), value: 'desc' },
-              { label: t('automation.sortAsc'), value: 'asc' }
-            ]}
-          />
+          <div className='automation-view__run-filter-main'>
+            <Input
+              value={runQuery}
+              onChange={(event) => onRunQueryChange(event.target.value)}
+              placeholder={t('automation.runSearch')}
+              className='automation-view__run-search'
+              allowClear
+              suffix={
+                <Button
+                  className={`automation-view__run-search-toggle ${runFiltersOpen ? 'is-open' : ''}`.trim()}
+                  type='text'
+                  aria-label={t('automation.runFilters')}
+                  icon={<span className='material-symbols-rounded automation-view__run-filter-icon'>expand_more</span>}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => setRunFiltersOpen((open) => !open)}
+                />
+              }
+            />
+            {runFiltersOpen && (
+              <div className='automation-view__run-filter-panel'>
+                <Select
+                  value={statusFilter}
+                  onChange={onStatusFilterChange}
+                  className='automation-view__run-select'
+                  options={statusOptions}
+                />
+              </div>
+            )}
+          </div>
+          <Tooltip title={t('automation.timeRange')}>
+            <Select
+              aria-label={t('automation.timeRange')}
+              className={`automation-view__run-icon-select ${timeFilter !== 'all' ? 'is-active' : ''}`.trim()}
+              value={timeFilter}
+              onChange={onTimeFilterChange}
+              options={timeOptions}
+              popupMatchSelectWidth={false}
+              suffixIcon={<span className='material-symbols-rounded automation-view__run-filter-icon'>schedule</span>}
+            />
+          </Tooltip>
+          <Tooltip title={t('automation.sortOrder')}>
+            <Select
+              aria-label={t('automation.sortOrder')}
+              className={`automation-view__run-icon-select ${sortOrder !== 'desc' ? 'is-active' : ''}`.trim()}
+              value={sortOrder}
+              onChange={onSortOrderChange}
+              options={sortOptions}
+              popupMatchSelectWidth={false}
+              suffixIcon={<span className='material-symbols-rounded automation-view__run-filter-icon'>sort</span>}
+            />
+          </Tooltip>
         </div>
         {filteredRuns.length === 0
           ? (