@vibe-forge/client 2.0.0 → 2.0.1

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

@@ -1,12 +1,11 @@
 .automation-view {
+  position: relative;
+
   &__body {
     flex-direction: row;
     gap: 0;
     padding: 0;
-  }
-
-  &__mobile-switcher-shell {
-    display: none;
+    position: relative;
   }
 
   display: flex;
@@ -25,9 +24,29 @@
     flex-direction: column;
     overflow: hidden;
     background: var(--sub-bg-color);
+    transition:
+      width .3s cubic-bezier(.4, 0, .2, 1),
+      min-width .3s cubic-bezier(.4, 0, .2, 1),
+      max-width .3s cubic-bezier(.4, 0, .2, 1);
+
+    &.is-collapsed {
+      width: 0;
+      min-width: 0;
+      max-width: 0;
+      pointer-events: none;
+
+      .automation-view__sidebar {
+        transform: translateX(calc(-1 * var(--subpage-secondary-panel-width)));
+      }
+    }
   }
 
   &__right {
+    --automation-view-right-padding-x: 12px;
+    --automation-view-right-padding-bottom: 12px;
+
+    display: flex;
+    flex-direction: column;
     flex: 1;
     overflow: hidden;
     min-width: 0;
@@ -37,23 +56,81 @@
     border-radius: var(--subpage-content-card-radius);
     background: var(--subpage-content-card-bg);
   }
-}
 
-@media (max-width: 1100px) {
-  .automation-view {
-    &__body {
-      flex-direction: column;
+  &__mobile-rule-backdrop,
+  &__mobile-rule-sheet {
+    display: none;
+  }
+
+  &__select-arrow {
+    color: var(--sub-text-color);
+    font-size: 16px;
+    line-height: 1;
+    pointer-events: none;
+    transition: transform .18s ease, color .18s ease;
+  }
+
+  .ant-select-open &__select-arrow,
+  .ant-select-focused &__select-arrow {
+    color: var(--text-color);
+  }
+
+  .ant-select-open &__select-arrow {
+    transform: rotate(180deg);
+  }
+
+  &__title-leading-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  &__title-action-button.ant-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--sub-text-color);
+    box-shadow: none;
+
+    .ant-btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-end: 0;
+      line-height: 1;
     }
 
-    &__left {
-      width: 100%;
-      min-width: 0;
-      max-height: 360px;
+    &:not(:disabled):hover,
+    &:not(:disabled):focus-visible {
+      background: var(--nav-hover-bg, var(--tag-hover-bg));
+      color: var(--text-color);
+    }
+
+    &.is-active,
+    &.is-active:disabled {
+      border: 1px solid var(--primary-color);
+      background: transparent;
+      color: var(--primary-color);
+      opacity: 1;
     }
+  }
+
+  &__title-action-icon {
+    font-size: 16px;
+    line-height: 1;
+  }
 
-    &__right {
-      margin-top: 0;
-      margin-left: var(--subpage-content-card-gap);
+  &--left-collapsed {
+    .automation-view__right {
+      margin: 4px;
     }
   }
 }
@@ -62,24 +139,7 @@
   .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;
-      }
+      height: 100%;
     }
 
     .automation-view__left,
@@ -88,9 +148,9 @@
       min-width: 0;
       max-width: none;
       max-height: none;
-      margin: 12px;
-      margin-top: 12px;
-      border-radius: var(--subpage-content-card-radius);
+      height: 100%;
+      margin: 0;
+      border-radius: 0;
       background: var(--subpage-content-card-bg);
       overflow: hidden;
     }
@@ -98,5 +158,73 @@
     .automation-view__right {
       padding: 12px;
     }
+
+    .automation-view__mobile-rule-backdrop {
+      position: absolute;
+      inset: 0;
+      display: block;
+      border: none;
+      background: rgba(0, 0, 0, .28);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition: opacity .24s ease, visibility 0s linear .24s;
+      z-index: 30;
+    }
+
+    .automation-view__mobile-rule-backdrop.is-open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transition-delay: 0s;
+    }
+
+    .automation-view__mobile-rule-sheet {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      display: block;
+      width: min(320px, calc(100% - 24px));
+      max-width: calc(100% - 24px);
+      transform: translateX(-100%);
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        transform .24s cubic-bezier(.4, 0, .2, 1),
+        visibility 0s linear .24s;
+      z-index: 31;
+      overscroll-behavior: contain;
+    }
+
+    .automation-view__mobile-rule-sheet.is-open {
+      transform: translateX(0);
+      visibility: visible;
+      pointer-events: auto;
+      transition-delay: 0s;
+    }
+
+    .automation-view__left--mobile-sheet {
+      width: 100%;
+      min-width: 0;
+      max-width: none;
+      height: 100%;
+      border-right: 1px solid var(--border-color);
+      border-radius: 0 8px 8px 0;
+      background: var(--sub-bg-color);
+      box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
+      overflow: hidden;
+      overscroll-behavior: contain;
+    }
+  }
+}
+
+html.dark .automation-view--compact {
+  .automation-view__mobile-rule-backdrop {
+    background: rgba(0, 0, 0, .48);
+  }
+
+  .automation-view__left--mobile-sheet {
+    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
   }
 }

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

@@ -1,7 +1,7 @@
 import './index.scss'
 
-import { App, Segmented } from 'antd'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { App } from 'antd'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import useSWR from 'swr'
@@ -16,6 +16,7 @@ import {
   runAutomationRule,
   updateAutomationRule
 } from '#~/api.js'
+import { useMobileSidebarModal } from '#~/components/layout/@hooks/use-mobile-sidebar-modal'
 import { PageShell } from '#~/components/layout/PageShell'
 import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import { useQueryParams } from '#~/hooks/useQueryParams.js'
@@ -47,8 +48,24 @@ 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 [mobilePanel, setMobilePanel] = useState<'rules' | 'details'>('details')
+  const [isRulePanelCollapsed, setIsRulePanelCollapsed] = useState(false)
+  const detailPanelRef = useRef<HTMLDivElement | null>(null)
+  const mobileRulePanelSheetRef = useRef<HTMLDivElement | null>(null)
+  const [favorites, setFavorites] = useState<string[]>(() => {
+    try {
+      const raw = window.localStorage.getItem('automationRuleFavorites')
+      if (!raw) return []
+      const parsed = JSON.parse(raw) as string[]
+      if (!Array.isArray(parsed)) return []
+      return parsed
+    } catch {
+      return []
+    }
+  })
   const isCompactView = isCompactLayout || isTouchInteraction
+  const isMobileRulePanelOpen = isCompactView && mobilePanel === 'rules'
+  const mobileRulePanelBackgroundRefs = useMemo(() => [detailPanelRef], [])
 
   const { values, update } = useQueryParams<AutomationQueryParams>({
     keys: ['rule', 'q', 'runQ', 'status', 'time', 'sort'],
@@ -73,7 +90,7 @@ export function AutomationView() {
   const selectedRuleId = useMemo(() => {
     const fromUrl = values.rule
     if (fromUrl && rules.some(rule => rule.id === fromUrl)) return fromUrl
-    return rules[0]?.id ?? null
+    return null
   }, [rules, values.rule])
 
   const selectedRule = useMemo(
@@ -86,32 +103,47 @@ export function AutomationView() {
     () => listAutomationRuns(selectedRuleId ?? '')
   )
   const runs = runsData?.runs ?? []
+  const favoriteSet = useMemo(() => new Set(favorites), [favorites])
 
   useEffect(() => {
-    if (rules.length === 0) return
-    if (!values.rule || !rules.some(rule => rule.id === values.rule)) {
-      update({ rule: rules[0].id })
-    }
+    window.localStorage.setItem('automationRuleFavorites', JSON.stringify(favorites))
+  }, [favorites])
+
+  useEffect(() => {
+    if (!values.rule) return
+    if (rules.some(rule => rule.id === values.rule)) return
+    update({ rule: '' })
   }, [rules, update, values.rule])
 
   useEffect(() => {
     if (!isCompactView) return
-    if (panelMode !== 'view') {
+    if (panelMode !== 'view' || values.rule) {
       setMobilePanel('details')
-      return
     }
-    if (selectedRuleId == null) {
-      setMobilePanel('rules')
-    }
-  }, [isCompactView, panelMode, selectedRuleId])
+  }, [isCompactView, panelMode, values.rule])
+
+  useMobileSidebarModal({
+    backgroundRefs: mobileRulePanelBackgroundRefs,
+    isCompactLayout: isCompactView,
+    isMobileSidebarOpen: isMobileRulePanelOpen,
+    setIsMobileSidebarOpen: (nextOpen) => setMobilePanel(nextOpen ? 'rules' : 'details'),
+    sheetRef: mobileRulePanelSheetRef
+  })
 
   const handleSelectRule = useCallback((ruleId: string) => {
     setPanelMode('view')
+    if (panelMode === 'view' && selectedRuleId === ruleId) {
+      update({ rule: '' })
+      if (isCompactView) {
+        setMobilePanel('details')
+      }
+      return
+    }
     update({ rule: ruleId })
     if (isCompactView) {
       setMobilePanel('details')
     }
-  }, [isCompactView, update])
+  }, [isCompactView, panelMode, selectedRuleId, update])
 
   const handleCreateRule = useCallback(() => {
     setPanelMode('create')
@@ -120,6 +152,24 @@ export function AutomationView() {
     }
   }, [isCompactView])
 
+  const handleCollapseRulePanel = useCallback(() => {
+    if (isCompactView) {
+      setMobilePanel('details')
+      return
+    }
+
+    setIsRulePanelCollapsed(true)
+  }, [isCompactView])
+
+  const handleExpandRulePanel = useCallback(() => {
+    if (isCompactView) {
+      setMobilePanel('rules')
+      return
+    }
+
+    setIsRulePanelCollapsed(false)
+  }, [isCompactView])
+
   const handleEditRule = useCallback((rule: AutomationRule) => {
     setPanelMode('edit')
     update({ rule: rule.id })
@@ -131,13 +181,11 @@ export function AutomationView() {
   const handleCancelForm = useCallback(() => {
     setPanelMode('view')
     if (isCompactView) {
-      setMobilePanel(selectedRuleId != null ? 'details' : 'rules')
+      setMobilePanel('details')
     }
-  }, [isCompactView, selectedRuleId])
+  }, [isCompactView])
 
-  const showRuleList = !isCompactView || mobilePanel === 'rules'
-  const showDetails = !isCompactView || mobilePanel === 'details'
-  const detailDisabled = panelMode === 'view' && selectedRule == null
+  const detailsShouldShowRulePanelAction = isCompactView || (!isCompactView && isRulePanelCollapsed)
 
   const handleSubmit = useCallback(async (
     payload: Partial<AutomationRule>,
@@ -204,79 +252,118 @@ export function AutomationView() {
     }
   }, [message, mutate, t])
 
+  const handleToggleFavorite = useCallback((ruleId: string) => {
+    setFavorites(prev => prev.includes(ruleId) ? prev.filter(id => id !== ruleId) : [...prev, ruleId])
+  }, [])
+
+  const ruleSidebar = (
+    <RuleSidebar
+      rules={rules}
+      selectedRuleId={selectedRuleId}
+      query={values.q}
+      isCreating={panelMode === 'create'}
+      favoriteIds={favorites}
+      collapsible
+      onCreate={handleCreateRule}
+      onSelect={handleSelectRule}
+      onRun={handleRun}
+      onDelete={handleDelete}
+      onToggleFavorite={handleToggleFavorite}
+      onToggle={handleToggle}
+      onToggleCollapsed={handleCollapseRulePanel}
+      onQueryChange={(value: string) => update({ q: value })}
+    />
+  )
+
   return (
     <PageShell
-      className={`automation-view ${isCompactView ? 'automation-view--compact' : ''}`}
+      className={[
+        'automation-view',
+        isCompactView ? 'automation-view--compact' : '',
+        !isCompactView && isRulePanelCollapsed ? 'automation-view--left-collapsed' : ''
+      ].filter(Boolean).join(' ')}
       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 }
-            ]}
+      {isCompactView
+        ? (
+          <>
+            <button
+              type='button'
+              className={`automation-view__mobile-rule-backdrop ${isMobileRulePanelOpen ? 'is-open' : ''}`}
+              aria-label={t('common.close')}
+              aria-hidden={!isMobileRulePanelOpen}
+              tabIndex={-1}
+              onClick={() => setMobilePanel('details')}
+            />
+            <div
+              ref={mobileRulePanelSheetRef}
+              className={`automation-view__mobile-rule-sheet ${isMobileRulePanelOpen ? 'is-open' : ''}`}
+              role='dialog'
+              aria-modal={isMobileRulePanelOpen ? 'true' : undefined}
+              aria-label={t('automation.mobileRules')}
+              aria-hidden={!isMobileRulePanelOpen}
+              tabIndex={-1}
+            >
+              <div className='automation-view__left automation-view__left--mobile-sheet'>
+                {ruleSidebar}
+              </div>
+            </div>
+          </>
+        )
+        : (
+          <div className={`automation-view__left ${!isCompactView && isRulePanelCollapsed ? 'is-collapsed' : ''}`}>
+            {ruleSidebar}
+          </div>
+        )}
+      <div ref={detailPanelRef} className='automation-view__right'>
+        {panelMode === 'create' && (
+          <RuleFormPanel
+            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
+            mode='create'
+            rule={null}
+            submitting={submitting}
+            onCreateRule={handleCreateRule}
+            onExpandRulePanel={handleExpandRulePanel}
+            onSubmit={handleSubmit}
+            onCancel={handleCancelForm}
           />
-        </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 })}
+        )}
+        {panelMode === 'edit' && (
+          <RuleFormPanel
+            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
+            mode='edit'
+            rule={selectedRule}
+            submitting={submitting}
+            onCreateRule={handleCreateRule}
+            onExpandRulePanel={handleExpandRulePanel}
+            onSubmit={handleSubmit}
+            onCancel={handleCancelForm}
           />
-        </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>
-      )}
+        )}
+        {panelMode === 'view' && (
+          <RunHistoryPanel
+            compact={isCompactView}
+            isRulePanelCollapsed={detailsShouldShowRulePanelAction}
+            rule={selectedRule}
+            runs={runs}
+            runQuery={values.runQ}
+            statusFilter={values.status}
+            timeFilter={values.time}
+            sortOrder={values.sort}
+            onCreateRule={handleCreateRule}
+            onExpandRulePanel={handleExpandRulePanel}
+            onEditRule={handleEditRule}
+            onRunRule={handleRun}
+            onDeleteRule={handleDelete}
+            isFavorite={selectedRule != null && favoriteSet.has(selectedRule.id)}
+            onToggleFavorite={handleToggleFavorite}
+            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/automation-view/types.ts

@@ -1,3 +1,8 @@
+import type { EffortLevel, GitBranchKind, SessionPermissionMode } from '@vibe-forge/types'
+
+export type AutomationCreateWorktreeMode = 'default' | 'managed' | 'local'
+export type AutomationBranchAction = 'default' | 'checkout' | 'create'
+
 export interface RuleFormValues {
   name: string
   description?: string
@@ -17,5 +22,13 @@ export interface RuleFormValues {
     id?: string
     title?: string
     prompt: string
+    model?: string
+    adapter?: string
+    effort?: EffortLevel | 'default'
+    permissionMode?: SessionPermissionMode | 'default'
+    createWorktreeMode?: AutomationCreateWorktreeMode
+    branchAction?: AutomationBranchAction
+    branchName?: string
+    branchKind?: GitBranchKind
   }>
 }

package/src/components/chat/AGENTS.md

@@ -37,7 +37,9 @@
   - 统一承载标题、meta、关闭动作和拖拽调高能力。
   - terminal 以及后续其他底部面板优先复用这里，不要再各自复制一套 resize/header 逻辑。
 - `../../components/workspace/ContextFilePicker.tsx`
-  - 工作区文件选择器；如果别的输入入口也要复用目录树选择，直接走这里。
+  - 工作区文件选择器；如果别的输入入口也要复用文件引用弹窗，直接走这里。
+- `../../components/workspace/project-file-tree/ProjectFileTree.tsx`
+  - 可复用项目目录树；目录抽屉和文件引用弹窗共用这里，不要在 chat 局部再复制树结构、展开状态或右键菜单逻辑。
 
 ## 消息级操作的当前约束