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

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

@@ -6,76 +6,135 @@
     height: 100%;
   }
 
+  &__form-panel--chat-create {
+    .automation-view__create-chat-panel {
+      margin-inline: calc(-1 * var(--automation-view-right-padding-x, 12px));
+      margin-bottom: calc(
+        -1 * var(--automation-view-right-padding-bottom, 12px)
+      );
+    }
+  }
+
   &__form-panel > .ant-form {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
   }
 
   &__form-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 10px;
+    min-width: 0;
   }
 
   &__form-header-actions {
     display: inline-flex;
     gap: 8px;
+    flex-shrink: 0;
   }
 
   &__form-title {
     display: flex;
     align-items: center;
     gap: 8px;
+    min-width: 0;
     font-weight: 600;
     color: var(--text-color);
   }
 
-  &__form-icon {
-    font-size: 18px;
-    color: var(--sub-text-color);
-  }
-
-  &__form-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
-    gap: 12px;
-    flex: 1;
+  &__form-title-text {
+    min-width: 0;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  &__form-left {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  &__form-icon {
+    font-size: 18px;
+    color: var(--sub-text-color);
   }
 
-  &__form-right {
+  &__form-stack {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    overflow: hidden;
+    flex: 1;
     min-height: 0;
-  }
-
-  &__form-right-scroll {
     overflow: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    min-height: 0;
   }
 
-  &__form-section {
-    padding: 12px;
+  &__create-mode-switch {
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    padding: 2px;
     border: 1px solid var(--border-color);
     border-radius: 8px;
-    background: var(--sub-bg-color);
+    background: var(--bg-color);
   }
 
-  &__label {
+  &__create-mode-button.ant-btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 6px;
+    height: 28px;
+    min-width: 0;
+    padding: 0 10px;
+    border: none;
+    border-radius: 6px;
+    color: var(--sub-text-color);
+    box-shadow: none;
+
+    .ant-btn-icon {
+      margin-inline-end: 0;
+    }
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus-visible {
+      background: var(--tag-hover-bg);
+      color: var(--text-color);
+    }
+
+    &.is-active {
+      background: var(--primary-soft-bg);
+      color: var(--primary-color);
+    }
+  }
+
+  &__create-mode-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &__create-chat-panel {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  &__form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  &__form-section--basic {
+    gap: 8px;
+  }
+
+  &__form-section > .ant-form-item {
+    margin-bottom: 0;
   }
 
   &__label-icon {
@@ -90,17 +149,15 @@
   &__toggle-group {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
   }
 
   &__toggle-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    background: var(--bg-color);
+    gap: 12px;
+    min-height: 30px;
   }
 
   &__toggle-label {
@@ -115,13 +172,53 @@
   }
 
   &__square-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 28px;
-    min-width: 28px;
-    padding: 0 10px;
-    border-radius: 6px;
+    &.ant-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px !important;
+      min-width: 32px !important;
+      max-width: 32px;
+      height: 32px !important;
+      min-height: 32px;
+      padding: 0 !important;
+      border-radius: 6px;
+      flex: 0 0 32px;
+      aspect-ratio: 1 / 1;
+      box-shadow: none !important;
+
+      .ant-btn-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-inline-end: 0 !important;
+        line-height: 1;
+      }
+
+      .ant-btn-loading-icon {
+        margin-inline-end: 0 !important;
+      }
+
+      .anticon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+    }
+
+    &--cancel.ant-btn-default {
+      border: 1px solid var(--border-color) !important;
+      background: transparent !important;
+      box-shadow: none;
+    }
+
+    &--cancel.ant-btn-default:not(:disabled):hover,
+    &--cancel.ant-btn-default:not(:disabled):focus-visible {
+      border-color: var(--border-color) !important;
+      background: var(--tag-hover-bg) !important;
+      color: var(--text-color) !important;
+    }
 
     &--confirm {
       font-weight: 600;
@@ -130,27 +227,53 @@
 
   &__action-icon {
     font-size: 18px;
+    line-height: 1;
   }
 
-  &__form-section .ant-input,
-  &__form-section .ant-input-affix-wrapper,
-  &__form-section .ant-input-number,
-  &__form-section .ant-select-selector {
+  &__icon-button--section-add:not(:disabled):hover,
+  &__icon-button--section-add:not(:disabled):focus-visible {
+    background: var(--tag-hover-bg) !important;
+    color: var(--text-color) !important;
+  }
+
+  &__form-section--basic > .ant-form-item .ant-input,
+  &__form-section--basic > .ant-form-item .ant-input-affix-wrapper {
     border-radius: 6px !important;
     background: var(--bg-color);
   }
 
-  &__form-section .ant-input,
-  &__form-section .ant-input-affix-wrapper,
-  &__form-section .ant-select-selector {
+  &__form-section--basic > .ant-form-item .ant-input,
+  &__form-section--basic > .ant-form-item .ant-input-affix-wrapper {
     min-height: 30px;
   }
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 960px) {
   .automation-view {
-    &__form-grid {
-      grid-template-columns: 1fr;
+    &__form-panel {
+      gap: 12px;
+    }
+
+    &__form-header {
+      align-items: flex-start;
+    }
+
+    &__form-title {
+      flex: 1;
+      padding-top: 4px;
+    }
+
+    &__form-stack {
+      gap: 14px;
+      padding-bottom: max(4px, env(safe-area-inset-bottom));
+    }
+
+    &__create-mode-switch {
+      width: 100%;
+    }
+
+    &__create-mode-button.ant-btn {
+      flex: 1;
     }
   }
 }

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

@@ -1,31 +1,66 @@
 import './RuleFormPanel.scss'
 
 import { Button, Form, Input, Switch, Tooltip } from 'antd'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { AutomationRule } from '#~/api.js'
-import { getServerHost, getServerPort } from '#~/api/base.js'
+import { createApiUrl } from '#~/api/base.js'
 
+import { DEFAULT_SELECT_VALUE, DEFAULT_STARTUP_FORM_VALUES } from './@utils/startup-options'
+import { AutomationEmptyLanding } from './AutomationEmptyLanding'
+import { AutomationPanelTitleActions } from './PanelTitleActions'
 import { TaskList } from './TaskList'
 import { TriggerList } from './TriggerList'
 import type { RuleFormValues } from './types'
 
+type CreateMode = 'form' | 'chat'
+
 interface RuleFormPanelProps {
+  isRulePanelCollapsed?: boolean
   mode: 'create' | 'edit'
   rule: AutomationRule | null
   submitting: boolean
+  onCreateRule?: () => void
+  onExpandRulePanel?: () => void
   onSubmit: (payload: Partial<AutomationRule>, immediateRun: boolean) => Promise<void>
   onCancel: () => void
 }
 
-const serverHost = getServerHost()
-const serverPort = getServerPort()
-const serverUrl = `http://${serverHost}:${serverPort}`
+const normalizeSelectText = (value?: string) => {
+  const normalized = value?.trim()
+  return normalized == null || normalized === '' ? null : normalized
+}
+
+const getCreateWorktreeMode = (
+  task: NonNullable<AutomationRule['tasks']>[number]
+): NonNullable<RuleFormValues['tasks'][number]['createWorktreeMode']> => {
+  if (task.createWorktree === true) return 'managed'
+  if (task.createWorktree === false) return 'local'
+  return 'default'
+}
+
+const getBranchAction = (
+  task: NonNullable<AutomationRule['tasks']>[number]
+): NonNullable<RuleFormValues['tasks'][number]['branchAction']> => {
+  if (task.branchName == null || task.branchName.trim() === '') return 'default'
+  return task.branchMode === 'create' ? 'create' : 'checkout'
+}
 
-export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: RuleFormPanelProps) {
+export function RuleFormPanel({
+  isRulePanelCollapsed = false,
+  mode,
+  rule,
+  submitting,
+  onCreateRule,
+  onExpandRulePanel,
+  onSubmit,
+  onCancel
+}: RuleFormPanelProps) {
   const { t } = useTranslation()
   const [form] = Form.useForm<RuleFormValues>()
+  const [createMode, setCreateMode] = useState<CreateMode>('form')
+  const isChatCreateMode = mode === 'create' && createMode === 'chat'
 
   const updateWeeklyCron = useCallback((index: number, nextDay?: string, nextTime?: string) => {
     const triggers = form.getFieldValue('triggers') as RuleFormValues['triggers'] | undefined
@@ -49,10 +84,15 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
 
   const getWebhookUrl = useCallback((triggerId?: string, webhookKey?: string) => {
     if (!triggerId || !webhookKey) return ''
-    return `${serverUrl}/api/automation/webhook/${triggerId}?key=${webhookKey}`
+    const url = createApiUrl(`/api/automation/webhook/${triggerId}`)
+    url.searchParams.set('key', webhookKey)
+    return url.toString()
   }, [])
 
   useEffect(() => {
+    if (mode === 'edit') {
+      setCreateMode('form')
+    }
     if (mode === 'create') {
       form.setFieldsValue({
         name: '',
@@ -72,7 +112,8 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
         tasks: [
           {
             title: t('automation.taskDefaultTitle', { index: 1 }),
-            prompt: ''
+            prompt: '',
+            ...DEFAULT_STARTUP_FORM_VALUES
           }
         ]
       })
@@ -93,10 +134,18 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
           weeklyTime: weeklyMatch ? `${weeklyMatch[2].padStart(2, '0')}:${weeklyMatch[1].padStart(2, '0')}` : '09:00'
         }
       })
-      const tasks = (rule.tasks ?? []).map((task, index) => ({
+      const tasks: RuleFormValues['tasks'] = (rule.tasks ?? []).map((task, index) => ({
         id: task.id,
         title: task.title || t('automation.taskDefaultTitle', { index: index + 1 }),
-        prompt: task.prompt
+        prompt: task.prompt,
+        model: task.model ?? DEFAULT_SELECT_VALUE,
+        adapter: task.adapter ?? DEFAULT_SELECT_VALUE,
+        effort: task.effort ?? 'default',
+        permissionMode: task.permissionMode ?? 'default',
+        createWorktreeMode: getCreateWorktreeMode(task),
+        branchAction: getBranchAction(task),
+        branchName: task.branchName ?? '',
+        branchKind: task.branchKind ?? 'local'
       }))
       form.setFieldsValue({
         name: rule.name,
@@ -113,7 +162,8 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
         }],
         tasks: tasks.length > 0 ? tasks : [{
           title: t('automation.taskDefaultTitle', { index: 1 }),
-          prompt: ''
+          prompt: '',
+          ...DEFAULT_STARTUP_FORM_VALUES
         }]
       })
     }
@@ -146,100 +196,156 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
           webhookKey: trigger.webhookKey?.trim() ?? ''
         }
       }) as AutomationRule['triggers'],
-      tasks: values.tasks.map((task) => ({
-        id: task.id,
-        title: task.title?.trim() ?? '',
-        prompt: task.prompt.trim()
-      })) as AutomationRule['tasks']
+      tasks: values.tasks.map((task) => {
+        const createWorktreeMode = task.createWorktreeMode ?? 'default'
+        const branchAction = task.branchAction ?? 'default'
+        return {
+          id: task.id,
+          title: task.title?.trim() ?? '',
+          prompt: task.prompt.trim(),
+          model: normalizeSelectText(task.model),
+          adapter: normalizeSelectText(task.adapter),
+          effort: task.effort === 'default' ? null : task.effort ?? null,
+          permissionMode: task.permissionMode ?? 'default',
+          createWorktree: createWorktreeMode === 'managed'
+            ? true
+            : createWorktreeMode === 'local'
+            ? false
+            : null,
+          branchName: branchAction === 'default' ? null : normalizeSelectText(task.branchName),
+          branchKind: branchAction === 'checkout' ? task.branchKind ?? 'local' : null,
+          branchMode: branchAction === 'default' ? null : branchAction
+        }
+      }) as AutomationRule['tasks']
     }
     await onSubmit(payload, values.immediateRun)
   }, [form, onSubmit])
 
   return (
-    <div className='automation-view__form-panel'>
+    <div
+      className={[
+        'automation-view__form-panel',
+        isChatCreateMode ? 'automation-view__form-panel--chat-create' : ''
+      ].filter(Boolean).join(' ')}
+    >
       <div className='automation-view__form-header'>
         <div className='automation-view__form-title'>
-          <span className='material-symbols-rounded automation-view__form-icon'>edit_square</span>
-          {mode === 'create' ? t('automation.newRule') : t('automation.editRule')}
+          <AutomationPanelTitleActions
+            collapsed={isRulePanelCollapsed}
+            defaultIcon='edit_square'
+            defaultIconClassName='automation-view__form-icon'
+            isCreating={mode === 'create'}
+            onCreateRule={onCreateRule}
+            onExpandRulePanel={onExpandRulePanel}
+          />
+          <span className='automation-view__form-title-text'>
+            {mode === 'create' ? t('automation.newRule') : t('automation.editRule')}
+          </span>
         </div>
         <div className='automation-view__form-header-actions'>
           <Tooltip title={t('common.cancel')}>
             <Button
-              className='automation-view__square-button'
+              className='automation-view__square-button automation-view__square-button--cancel'
+              aria-label={t('common.cancel')}
+              icon={<span className='material-symbols-rounded automation-view__action-icon'>close</span>}
               onClick={onCancel}
-            >
-              <span className='material-symbols-rounded automation-view__action-icon'>close</span>
-            </Button>
-          </Tooltip>
-          <Tooltip title={t('common.confirm')}>
-            <Button
-              className='automation-view__square-button automation-view__square-button--confirm'
-              type='primary'
-              loading={submitting}
-              onClick={() => void handleSubmit()}
-            >
-              <span className='material-symbols-rounded automation-view__action-icon'>check</span>
-            </Button>
+            />
           </Tooltip>
+          {!isChatCreateMode && (
+            <Tooltip title={t('common.confirm')}>
+              <Button
+                className='automation-view__square-button automation-view__square-button--confirm'
+                type='primary'
+                aria-label={t('common.confirm')}
+                loading={submitting}
+                icon={<span className='material-symbols-rounded automation-view__action-icon'>check</span>}
+                onClick={() => void handleSubmit()}
+              />
+            </Tooltip>
+          )}
         </div>
       </div>
-      <Form form={form} layout='vertical' initialValues={{ enabled: true, immediateRun: false }}>
-        <div className='automation-view__form-grid'>
-          <div className='automation-view__form-left'>
-            <div className='automation-view__form-section'>
-              <div className='automation-view__form-title'>
-                <span className='material-symbols-rounded automation-view__form-icon'>info</span>
-                {t('automation.sectionBasic')}
-              </div>
-              <Form.Item
-                name='name'
-                label={
-                  <span className='automation-view__label'>
-                    <span className='material-symbols-rounded automation-view__label-icon'>badge</span>
-                    {t('automation.ruleName')}
-                  </span>
-                }
-                rules={[{ required: true, message: t('automation.ruleNameRequired') }]}
-              >
-                <Input />
-              </Form.Item>
-              <Form.Item
-                name='description'
-                label={
-                  <span className='automation-view__label'>
-                    <span className='material-symbols-rounded automation-view__label-icon'>description</span>
-                    {t('automation.ruleDescription')}
-                  </span>
-                }
-              >
-                <Input.TextArea rows={2} />
-              </Form.Item>
-              <div className='automation-view__toggle-group'>
-                <div className='automation-view__toggle-row'>
-                  <span className='automation-view__toggle-label'>
-                    <span className='material-symbols-rounded automation-view__label-icon'>toggle_on</span>
-                    {t('automation.enabled')}
-                  </span>
-                  <Form.Item name='enabled' valuePropName='checked' noStyle>
-                    <Switch />
-                  </Form.Item>
-                </div>
-                <div className='automation-view__toggle-row'>
-                  <span className='automation-view__toggle-label automation-view__toggle-label--run'>
-                    <span className='material-symbols-rounded automation-view__label-icon automation-view__label-icon--run'>
-                      play_circle
+      {mode === 'create' && (
+        <div className='automation-view__create-mode-switch' role='tablist' aria-label={t('automation.createMode')}>
+          <Button
+            className={`automation-view__create-mode-button ${createMode === 'form' ? 'is-active' : ''}`.trim()}
+            type='text'
+            role='tab'
+            aria-selected={createMode === 'form'}
+            onClick={() => setCreateMode('form')}
+          >
+            <span className='material-symbols-rounded automation-view__create-mode-icon'>edit_note</span>
+            <span>{t('automation.createModeForm')}</span>
+          </Button>
+          <Button
+            className={`automation-view__create-mode-button ${createMode === 'chat' ? 'is-active' : ''}`.trim()}
+            type='text'
+            role='tab'
+            aria-selected={createMode === 'chat'}
+            onClick={() => setCreateMode('chat')}
+          >
+            <span className='material-symbols-rounded automation-view__create-mode-icon'>forum</span>
+            <span>{t('automation.createModeChat')}</span>
+          </Button>
+        </div>
+      )}
+      {isChatCreateMode
+        ? (
+          <div className='automation-view__create-chat-panel'>
+            <AutomationEmptyLanding />
+          </div>
+        )
+        : (
+          <Form
+            form={form}
+            layout='vertical'
+            initialValues={{
+              enabled: true,
+              immediateRun: false,
+              tasks: [{
+                ...DEFAULT_STARTUP_FORM_VALUES
+              }]
+            }}
+          >
+            <div className='automation-view__form-stack'>
+              <div className='automation-view__form-section automation-view__form-section--basic'>
+                <Form.Item
+                  name='name'
+                  rules={[{ required: true, message: t('automation.ruleNameRequired') }]}
+                >
+                  <Input aria-label={t('automation.ruleName')} placeholder={t('automation.ruleNameRequired')} />
+                </Form.Item>
+                <Form.Item name='description'>
+                  <Input.TextArea
+                    aria-label={t('automation.ruleDescription')}
+                    placeholder={t('automation.ruleDescriptionPlaceholder')}
+                    rows={1}
+                  />
+                </Form.Item>
+                <div className='automation-view__toggle-group'>
+                  <div className='automation-view__toggle-row'>
+                    <span className='automation-view__toggle-label'>
+                      <span className='material-symbols-rounded automation-view__label-icon'>toggle_on</span>
+                      {t('automation.enabledStatus')}
+                    </span>
+                    <Form.Item name='enabled' valuePropName='checked' noStyle>
+                      <Switch />
+                    </Form.Item>
+                  </div>
+                  <div className='automation-view__toggle-row'>
+                    <span className='automation-view__toggle-label automation-view__toggle-label--run'>
+                      <span className='material-symbols-rounded automation-view__label-icon automation-view__label-icon--run'>
+                        play_circle
+                      </span>
+                      {t('automation.immediateRun')}
                     </span>
-                    {t('automation.immediateRun')}
-                  </span>
-                  <Form.Item name='immediateRun' valuePropName='checked' noStyle>
-                    <Switch />
-                  </Form.Item>
+                    <Form.Item name='immediateRun' valuePropName='checked' noStyle>
+                      <Switch />
+                    </Form.Item>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className='automation-view__form-right'>
-            <div className='automation-view__form-right-scroll'>
+
               <div className='automation-view__form-section'>
                 <TriggerList
                   form={form}
@@ -249,12 +355,11 @@ export function RuleFormPanel({ mode, rule, submitting, onSubmit, onCancel }: Ru
               </div>
 
               <div className='automation-view__form-section'>
-                <TaskList />
+                <TaskList form={form} />
               </div>
             </div>
-          </div>
-        </div>
-      </Form>
+          </Form>
+        )}
     </div>
   )
 }