@vibe-forge/client 2.0.0 → 2.0.1

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
           ? (

package/src/components/automation-view/TaskList.scss

@@ -1,52 +1,109 @@
 .automation-view {
-  &__list {
+  &__task-list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8px;
+    min-width: 0;
+  }
 
-    &--horizontal {
-      gap: 8px;
+  &__task-stack {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
 
-      .automation-view__list-item {
-        flex: 0 0 360px;
-        min-width: 360px;
-      }
-    }
+  &__task-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
 
-    &-scroll {
-      display: flex;
-      gap: 8px;
-      overflow-x: auto;
-      padding-bottom: 4px;
-
-      .automation-view__list-item {
-        min-width: 340px;
-        flex: 0 0 340px;
-      }
-    }
+  &__task-card + &__task-card {
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
   }
 
-  &__list-item {
-    position: relative;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 12px;
+  &__task-composer {
     display: flex;
     flex-direction: column;
-    background: var(--bg-color);
-    transition: border-color .2s ease, background-color .2s ease;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  &__task-title-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__task-collapse-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 6px;
+    color: var(--sub-text-color);
+  }
+
+  &__task-collapse-button:not(:disabled):hover,
+  &__task-collapse-button:not(:disabled):focus-visible {
+    background: var(--tag-hover-bg) !important;
+    color: var(--text-color) !important;
+  }
+
+  &__task-title-item,
+  &__task-prompt-item {
+    width: 100%;
   }
 
-  &__list-item:hover {
-    border-color: rgba(37, 99, 235, .18);
-    background: var(--tag-hover-bg);
+  &__task-title-item {
+    box-sizing: border-box;
+    padding-right: 42px;
+    min-width: 0;
   }
 
-  &__list-header {
+  &__task-title-input {
+    width: 100%;
+    font-weight: 600;
+  }
+
+  &__task-collapsible {
     display: flex;
-    align-items: flex-end;
-    gap: 12px;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  &__task-collapsible[hidden] {
+    display: none;
+  }
+
+  &__task-sender {
+    width: 100%;
+    min-width: 0;
+  }
+
+  &__task-status-bar {
+    min-width: 0;
+    width: 100%;
+    margin-top: -4px;
+
+    .chat-status-bar__content {
+      display: flex;
+      justify-content: flex-start;
+    }
   }
 
   &__section-header {
@@ -87,9 +144,9 @@
   }
 
   &__form-desc {
+    margin-bottom: 0;
     font-size: 12px;
     color: var(--sub-text-color);
-    margin-bottom: 12px;
   }
 
   &__icon-button {
@@ -103,55 +160,60 @@
     border-radius: 6px;
   }
 
-  &__action-icon {
-    font-size: 18px;
-  }
-
-  &__remove-button {
+  &__task-remove-button {
     position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
+    top: 0;
+    right: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0;
     border-radius: 6px;
   }
 
-  &__task-index {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--sub-text-color);
+  &__task-card + &__task-card &__task-remove-button {
+    top: 16px;
   }
 
-  &__task-index-icon {
-    font-size: 14px;
+  &__action-icon {
+    font-size: 18px;
   }
 
-  &__list-item .ant-form-item {
+  &__task-card .ant-form-item {
     margin-bottom: 10px;
   }
 
-  &__list-item .ant-form-item:last-child {
+  &__task-composer .ant-form-item {
     margin-bottom: 0;
   }
 
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-input-number,
-  &__list-item .ant-select-selector {
+  &__task-title-input.ant-input {
     border-radius: 6px !important;
     background: var(--sub-bg-color);
   }
 
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-select-selector {
-    min-height: 30px;
+  &__task-title-input.ant-input {
+    min-height: 32px;
+  }
+}
+
+.automation-view__sender-adapter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.automation-view__sender-adapter-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+
+  &--fallback {
+    font-size: 16px;
+    color: var(--sub-text-color);
   }
 }