@vibe-forge/client 0.11.2 → 1.0.0

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

@@ -2,10 +2,10 @@
   &__list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
 
     &--horizontal {
-      gap: 10px;
+      gap: 8px;
 
       .automation-view__list-item {
         flex: 0 0 360px;
@@ -15,7 +15,7 @@
 
     &-scroll {
       display: flex;
-      gap: 12px;
+      gap: 8px;
       overflow-x: auto;
       padding-bottom: 4px;
 
@@ -29,11 +29,17 @@
   &__list-item {
     position: relative;
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 8px;
     padding: 12px;
     display: flex;
     flex-direction: column;
-    background: var(--tag-bg);
+    background: var(--bg-color);
+    transition: border-color .2s ease, background-color .2s ease;
+  }
+
+  &__list-item:hover {
+    border-color: rgba(37, 99, 235, .18);
+    background: var(--tag-hover-bg);
   }
 
   &__list-header {
@@ -59,7 +65,7 @@
   &__section-actions {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
   }
 
   &__section-count {
@@ -90,9 +96,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
     padding: 0;
+    border-radius: 6px;
   }
 
   &__action-icon {
@@ -101,15 +109,16 @@
 
   &__remove-button {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 32px;
-    height: 32px;
+    top: 6px;
+    right: 6px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: 6px;
   }
 
   &__task-index {
@@ -123,4 +132,26 @@
   &__task-index-icon {
     font-size: 14px;
   }
+
+  &__list-item .ant-form-item {
+    margin-bottom: 10px;
+  }
+
+  &__list-item .ant-form-item:last-child {
+    margin-bottom: 0;
+  }
+
+  &__list-item .ant-input,
+  &__list-item .ant-input-affix-wrapper,
+  &__list-item .ant-input-number,
+  &__list-item .ant-select-selector {
+    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;
+  }
 }

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

@@ -2,10 +2,10 @@
   &__list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
 
     &--horizontal {
-      gap: 10px;
+      gap: 8px;
 
       .automation-view__list-item {
         flex: 0 0 360px;
@@ -15,7 +15,7 @@
 
     &-scroll {
       display: flex;
-      gap: 12px;
+      gap: 8px;
       overflow-x: auto;
       padding-bottom: 4px;
 
@@ -29,11 +29,17 @@
   &__list-item {
     position: relative;
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 8px;
     padding: 12px;
     display: flex;
     flex-direction: column;
-    background: var(--tag-bg);
+    background: var(--bg-color);
+    transition: border-color .2s ease, background-color .2s ease;
+  }
+
+  &__list-item:hover {
+    border-color: rgba(37, 99, 235, .18);
+    background: var(--tag-hover-bg);
   }
 
   &__list-header {
@@ -59,7 +65,7 @@
   &__section-actions {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
   }
 
   &__section-count {
@@ -90,9 +96,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
     padding: 0;
+    border-radius: 6px;
   }
 
   &__action-icon {
@@ -101,15 +109,16 @@
 
   &__remove-button {
     position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 32px;
-    height: 32px;
+    top: 6px;
+    right: 6px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: 6px;
   }
 
   &__input-number {
@@ -146,11 +155,34 @@
     gap: 8px;
     padding: 8px 12px;
     border-radius: 8px;
-    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    background: var(--sub-bg-color);
     color: var(--sub-text-color);
   }
 
   &__webhook-label {
     font-size: 12px;
   }
+
+  &__list-item .ant-form-item {
+    margin-bottom: 10px;
+  }
+
+  &__list-item .ant-form-item:last-child {
+    margin-bottom: 0;
+  }
+
+  &__list-item .ant-input,
+  &__list-item .ant-input-affix-wrapper,
+  &__list-item .ant-input-number,
+  &__list-item .ant-select-selector {
+    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;
+  }
 }

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

@@ -1,7 +1,16 @@
 .automation-view {
+  &__body {
+    flex-direction: row;
+    gap: 0;
+    padding: 0;
+  }
+
+  &__mobile-switcher-shell {
+    display: none;
+  }
+
   display: flex;
   height: 100%;
-  padding: 24px;
   overflow: hidden;
 
   .ant-form-item {
@@ -9,22 +18,85 @@
   }
 
   &__left {
-    width: 360px;
-    min-width: 320px;
+    width: var(--subpage-secondary-panel-width);
+    min-width: var(--subpage-secondary-panel-width);
+    max-width: var(--subpage-secondary-panel-width);
     display: flex;
     flex-direction: column;
     overflow: hidden;
-  }
-
-  &__divider {
-    width: 1px;
-    background: var(--border-color);
-    margin: 0 24px;
+    background: var(--sub-bg-color);
   }
 
   &__right {
     flex: 1;
     overflow: hidden;
-    padding-right: 8px;
+    min-width: 0;
+    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);
+  }
+}
+
+@media (max-width: 1100px) {
+  .automation-view {
+    &__body {
+      flex-direction: column;
+    }
+
+    &__left {
+      width: 100%;
+      min-width: 0;
+      max-height: 360px;
+    }
+
+    &__right {
+      margin-top: 0;
+      margin-left: var(--subpage-content-card-gap);
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .automation-view--compact {
+    .automation-view__body {
+      gap: 0;
+    }
+
+    .automation-view__mobile-switcher-shell {
+      display: block;
+      padding: 12px;
+      padding-bottom: 0;
+    }
+
+    .automation-view__mobile-switcher {
+      width: 100%;
+
+      .ant-segmented-group {
+        gap: 4px;
+      }
+
+      .ant-segmented-item {
+        min-height: 32px;
+      }
+    }
+
+    .automation-view__left,
+    .automation-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;
+    }
+
+    .automation-view__right {
+      padding: 12px;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import { App } from 'antd'
+import { App, Segmented } from 'antd'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -16,6 +16,8 @@ import {
   runAutomationRule,
   updateAutomationRule
 } from '#~/api.js'
+import { PageShell } from '#~/components/layout/PageShell'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
 
 import { RuleFormPanel } from './RuleFormPanel.js'
@@ -36,6 +38,7 @@ interface AutomationQueryParams extends Record<string, 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',
@@ -44,6 +47,8 @@ export function AutomationView() {
   const rules = data?.rules ?? []
   const [panelMode, setPanelMode] = useState<PanelMode>('view')
   const [submitting, setSubmitting] = useState(false)
+  const [mobilePanel, setMobilePanel] = useState<'rules' | 'details'>('rules')
+  const isCompactView = isCompactLayout || isTouchInteraction
 
   const { values, update } = useQueryParams<AutomationQueryParams>({
     keys: ['rule', 'q', 'runQ', 'status', 'time', 'sort'],
@@ -89,23 +94,50 @@ export function AutomationView() {
     }
   }, [rules, update, values.rule])
 
+  useEffect(() => {
+    if (!isCompactView) return
+    if (panelMode !== 'view') {
+      setMobilePanel('details')
+      return
+    }
+    if (selectedRuleId == null) {
+      setMobilePanel('rules')
+    }
+  }, [isCompactView, panelMode, selectedRuleId])
+
   const handleSelectRule = useCallback((ruleId: string) => {
     setPanelMode('view')
     update({ rule: ruleId })
-  }, [update])
+    if (isCompactView) {
+      setMobilePanel('details')
+    }
+  }, [isCompactView, update])
 
   const handleCreateRule = useCallback(() => {
     setPanelMode('create')
-  }, [])
+    if (isCompactView) {
+      setMobilePanel('details')
+    }
+  }, [isCompactView])
 
   const handleEditRule = useCallback((rule: AutomationRule) => {
     setPanelMode('edit')
     update({ rule: rule.id })
-  }, [update])
+    if (isCompactView) {
+      setMobilePanel('details')
+    }
+  }, [isCompactView, update])
 
   const handleCancelForm = useCallback(() => {
     setPanelMode('view')
-  }, [])
+    if (isCompactView) {
+      setMobilePanel(selectedRuleId != null ? 'details' : 'rules')
+    }
+  }, [isCompactView, selectedRuleId])
+
+  const showRuleList = !isCompactView || mobilePanel === 'rules'
+  const showDetails = !isCompactView || mobilePanel === 'details'
+  const detailDisabled = panelMode === 'view' && selectedRule == null
 
   const handleSubmit = useCallback(async (
     payload: Partial<AutomationRule>,
@@ -173,57 +205,78 @@ export function AutomationView() {
   }, [message, mutate, t])
 
   return (
-    <div className='automation-view'>
-      <div className='automation-view__left'>
-        <RuleSidebar
-          rules={rules}
-          selectedRuleId={selectedRuleId}
-          query={values.q}
-          isCreating={panelMode === 'create'}
-          onCreate={handleCreateRule}
-          onSelect={handleSelectRule}
-          onRun={handleRun}
-          onDelete={handleDelete}
-          onToggle={handleToggle}
-          onQueryChange={(value: string) => update({ q: value })}
-        />
-      </div>
-      <div className='automation-view__divider' />
-      <div className='automation-view__right'>
-        {panelMode === 'create' && (
-          <RuleFormPanel
-            mode='create'
-            rule={null}
-            submitting={submitting}
-            onSubmit={handleSubmit}
-            onCancel={handleCancelForm}
-          />
-        )}
-        {panelMode === 'edit' && (
-          <RuleFormPanel
-            mode='edit'
-            rule={selectedRule}
-            submitting={submitting}
-            onSubmit={handleSubmit}
-            onCancel={handleCancelForm}
+    <PageShell
+      className={`automation-view ${isCompactView ? 'automation-view--compact' : ''}`}
+      bodyClassName='automation-view__body'
+    >
+      {isCompactView && (
+        <div className='automation-view__mobile-switcher-shell'>
+          <Segmented
+            block
+            className='automation-view__mobile-switcher'
+            value={mobilePanel}
+            onChange={(value) => setMobilePanel(value as 'rules' | 'details')}
+            options={[
+              { label: t('automation.mobileRules'), value: 'rules' },
+              { label: t('automation.mobileDetails'), value: 'details', disabled: detailDisabled }
+            ]}
           />
-        )}
-        {panelMode === 'view' && (
-          <RunHistoryPanel
-            rule={selectedRule}
-            runs={runs}
-            runQuery={values.runQ}
-            statusFilter={values.status}
-            timeFilter={values.time}
-            sortOrder={values.sort}
-            onEditRule={handleEditRule}
-            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>
+      )}
+      {showRuleList && (
+        <div className='automation-view__left'>
+          <RuleSidebar
+            rules={rules}
+            selectedRuleId={selectedRuleId}
+            query={values.q}
+            isCreating={panelMode === 'create'}
+            onCreate={handleCreateRule}
+            onSelect={handleSelectRule}
+            onRun={handleRun}
+            onDelete={handleDelete}
+            onToggle={handleToggle}
+            onQueryChange={(value: string) => update({ q: value })}
           />
-        )}
-      </div>
-    </div>
+        </div>
+      )}
+      {showDetails && (
+        <div className='automation-view__right'>
+          {panelMode === 'create' && (
+            <RuleFormPanel
+              mode='create'
+              rule={null}
+              submitting={submitting}
+              onSubmit={handleSubmit}
+              onCancel={handleCancelForm}
+            />
+          )}
+          {panelMode === 'edit' && (
+            <RuleFormPanel
+              mode='edit'
+              rule={selectedRule}
+              submitting={submitting}
+              onSubmit={handleSubmit}
+              onCancel={handleCancelForm}
+            />
+          )}
+          {panelMode === 'view' && (
+            <RunHistoryPanel
+              compact={isCompactView}
+              rule={selectedRule}
+              runs={runs}
+              runQuery={values.runQ}
+              statusFilter={values.status}
+              timeFilter={values.time}
+              sortOrder={values.sort}
+              onEditRule={handleEditRule}
+              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/benchmark-view/BenchmarkCasePanel.scss

@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    padding: 4px 0 16px;
+    padding: 0 0 2px;
   }
 
   &__case-title-row {
@@ -41,25 +41,30 @@
   &__section {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    padding: 16px 0;
+    gap: 10px;
+    padding: 0;
   }
 
   &__section--last {
-    padding-bottom: 24px;
+    padding-bottom: 0;
   }
 
   &__twin-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 24px;
+    gap: 20px;
     align-items: start;
   }
 
   &__goal-body {
+    min-height: 220px;
     max-height: 360px;
-    overflow-y: auto;
+    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 {
@@ -114,8 +119,8 @@
       align-items: flex-start;
     }
 
-    code,
-    span:last-child {
+    > code,
+    > span:last-child {
       max-width: 70%;
       text-align: right;
       white-space: pre-wrap;
@@ -133,6 +138,10 @@
     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 {
@@ -162,16 +171,23 @@
   &__score-strip {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 10px;
+    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: 10px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
+    padding: var(--subpage-tertiary-padding) 10px;
+    background: transparent;
+
+    &:not(:last-child) {
+      border-right: 1px solid var(--border-color);
+    }
 
     label {
       font-size: 12px;
@@ -197,10 +213,10 @@
   }
 
   &__subpanel {
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    background: var(--sub-bg-color);
-    padding: 12px;
+    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;
@@ -263,5 +279,9 @@
     &__score-strip {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+
+    &__twin-grid {
+      grid-template-columns: 1fr;
+    }
   }
 }