@vibe-forge/client 0.11.2 → 1.0.0

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

@@ -99,10 +99,15 @@ export function RuleSidebar({
 
   return (
     <div className='automation-view__sidebar'>
-      <div className='automation-view__sidebar-header'>
-        <div className='automation-view__title'>
-          <h2 className='automation-view__title-text'>{t('automation.title')}</h2>
-        </div>
+      <div className='automation-view__sidebar-search-row'>
+        <Input
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          placeholder={t('automation.searchRule')}
+          prefix={<span className='material-symbols-rounded automation-view__search-icon'>search</span>}
+          allowClear
+          className='automation-view__sidebar-search-input'
+        />
         <Tooltip title={isCreating ? t('automation.creatingRule') : t('automation.newRule')}>
           <Button
             className='automation-view__icon-button automation-view__icon-button--add'
@@ -116,15 +121,6 @@ export function RuleSidebar({
           </Button>
         </Tooltip>
       </div>
-      <div className='automation-view__sidebar-search'>
-        <Input
-          value={query}
-          onChange={(event) => onQueryChange(event.target.value)}
-          placeholder={t('automation.searchRule')}
-          prefix={<span className='material-symbols-rounded automation-view__search-icon'>search</span>}
-          allowClear
-        />
-      </div>
 
       {filteredRules.length === 0
         ? (

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

@@ -1,15 +1,32 @@
 .automation-view {
+  &__surface {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 18px;
     height: 100%;
   }
 
+  &__detail-surface,
+  &__history-surface {
+    padding: 0;
+  }
+
+  &__history-surface {
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+  }
+
   &__content-header {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
+    margin-bottom: 10px;
   }
 
   &__content-title {
@@ -32,7 +49,7 @@
   &__detail {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
   }
 
   &__detail-header {
@@ -63,19 +80,28 @@
   &__detail-body {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: 16px;
+    gap: 12px;
   }
 
-  &__detail-left {
+  &__detail-column {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
   }
 
-  &__detail-right {
+  &__detail-panel {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: var(--subpage-tertiary-gap);
+    min-height: 0;
+    padding: var(--subpage-tertiary-padding);
+    border: var(--subpage-tertiary-border);
+    border-radius: var(--subpage-tertiary-radius);
+    background: var(--subpage-tertiary-bg);
+  }
+
+  &__detail-panel--list {
+    min-height: 120px;
   }
 
   &__detail-row {
@@ -95,7 +121,6 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-    padding-left: 22px;
   }
 
   &__run-item {
@@ -177,20 +202,78 @@
 
   &__run-filters {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
   }
 
   &__run-search {
-    max-width: 240px;
+    flex: 1 1 220px;
+    min-width: 220px;
   }
 
   &__run-select {
-    min-width: 140px;
+    min-width: 132px;
   }
 
   &__run-table {
     flex: 1;
+    min-height: 0;
+
+    .ant-table-container {
+      border: var(--subpage-tertiary-border);
+      border-radius: var(--subpage-tertiary-radius);
+      overflow: hidden;
+      background: var(--subpage-tertiary-bg);
+    }
+
+    .ant-table-thead > tr > th {
+      background: var(--subpage-tertiary-bg);
+    }
+  }
+
+  &__run-card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__run-card {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px 12px;
+    border: var(--subpage-tertiary-border);
+    border-radius: var(--subpage-tertiary-radius);
+    background: var(--subpage-tertiary-bg);
+    color: inherit;
+  }
+
+  &__run-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  &__run-card-title {
+    min-width: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-color);
+  }
+
+  &__run-card-time,
+  &__run-card-summary {
+    font-size: 12px;
+    color: var(--sub-text-color);
+  }
+
+  &__run-card-summary {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
 
   &__run-summary {
@@ -260,8 +343,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
     padding: 0;
 
     &--edit .automation-view__action-icon {
@@ -283,4 +367,48 @@
     align-items: center;
     justify-content: center;
   }
+
+  &__run-search .ant-input-affix-wrapper,
+  &__run-select .ant-select-selector {
+    height: 30px !important;
+    border-radius: 6px !important;
+    background: var(--bg-color);
+  }
+
+  &__run-select .ant-select-selector {
+    align-items: center !important;
+  }
+}
+
+@media (max-width: 960px) {
+  .automation-view {
+    &__content {
+      gap: 14px;
+    }
+
+    &__detail-header,
+    &__content-header {
+      align-items: flex-start;
+      gap: 10px;
+    }
+
+    &__detail-description {
+      align-items: flex-start;
+    }
+
+    &__run-filters {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    &__run-search,
+    &__run-select {
+      min-width: 0;
+      width: 100%;
+    }
+
+    &__detail-body {
+      grid-template-columns: 1fr;
+    }
+  }
 }

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import type { AutomationRule, AutomationRun } from '#~/api.js'
 
 interface RunHistoryPanelProps {
+  compact?: boolean
   rule: AutomationRule | null
   runs: AutomationRun[]
   runQuery: string
@@ -23,6 +24,7 @@ interface RunHistoryPanelProps {
 }
 
 export function RunHistoryPanel({
+  compact = false,
   rule,
   runs,
   runQuery,
@@ -140,181 +142,221 @@ export function RunHistoryPanel({
 
   return (
     <div className='automation-view__content'>
-      <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>
-          <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-left'>
-            <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>
-            <div className='automation-view__detail-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__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>
-            {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>
-            )}
+            <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-right'>
-            <div className='automation-view__detail-section'>
-              <div className='automation-view__detail-section-title'>
-                <span className='material-symbols-rounded automation-view__meta-icon'>bolt</span>
-                {t('automation.sectionTriggers')}
+          <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-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 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>
             </div>
-            <div className='automation-view__detail-section'>
-              <div className='automation-view__detail-section-title'>
-                <span className='material-symbols-rounded automation-view__meta-icon'>task</span>
-                {t('automation.sectionTasks')}
+            <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>
-              <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>}
+              <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>}
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div className='automation-view__content-header'>
-        <div className='automation-view__content-title'>
-          <span className='material-symbols-rounded automation-view__content-icon'>history</span>
-          <h3 className='automation-view__content-text'>{t('automation.runHistory')}</h3>
-        </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>
-      {filteredRuns.length === 0
-        ? (
-          <div className='automation-view__empty'>
-            <Empty description={t('automation.noRuns')} />
+      <div className='automation-view__surface automation-view__history-surface'>
+        <div className='automation-view__content-header'>
+          <div className='automation-view__content-title'>
+            <span className='material-symbols-rounded automation-view__content-icon'>history</span>
+            <h3 className='automation-view__content-text'>{t('automation.runHistory')}</h3>
           </div>
-        )
-        : (
-          <Table
-            rowKey='id'
-            className='automation-view__run-table'
-            columns={columns}
-            dataSource={filteredRuns}
-            pagination={{ pageSize: 8, hideOnSinglePage: true }}
+        </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>
+        {filteredRuns.length === 0
+          ? (
+            <div className='automation-view__empty'>
+              <Empty description={t('automation.noRuns')} />
+            </div>
+          )
+          : compact
+          ? (
+            <div className='automation-view__run-card-list'>
+              {filteredRuns.map((run) => (
+                <a
+                  key={run.id}
+                  className='automation-view__run-card'
+                  href={`/session/${run.sessionId}`}
+                >
+                  <div className='automation-view__run-card-header'>
+                    <span className='automation-view__run-card-title'>
+                      {run.taskTitle ?? t('automation.taskUnknown')}
+                    </span>
+                    {run.status
+                      ? (
+                        <span className='automation-view__status' data-status={run.status}>
+                          <span className='material-symbols-rounded automation-view__status-icon'>
+                            fiber_manual_record
+                          </span>
+                          {t(`common.status.${run.status}`, run.status)}
+                        </span>
+                      )
+                      : null}
+                  </div>
+                  <div className='automation-view__run-card-time'>
+                    {dayjs(run.runAt).format('YYYY-MM-DD HH:mm')}
+                  </div>
+                  <div className='automation-view__run-card-summary'>
+                    {run.title ?? run.lastMessage ?? run.lastUserMessage ?? '-'}
+                  </div>
+                </a>
+              ))}
+            </div>
+          )
+          : (
+            <Table
+              rowKey='id'
+              className='automation-view__run-table'
+              columns={columns}
+              dataSource={filteredRuns}
+              pagination={{ pageSize: 8, hideOnSinglePage: true }}
+            />
+          )}
+      </div>
     </div>
   )
 }