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

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 局部再复制树结构、展开状态或右键菜单逻辑。
 
 ## 消息级操作的当前约束
 

package/src/components/chat/ChatHeader.tsx

@@ -52,10 +52,12 @@ export function ChatHeader({
   lastUserMessage,
   activeView,
   isTerminalOpen,
+  isWorkspaceDrawerOpen,
   onCreateSession,
   onOpenSidebar,
   onViewChange,
-  onToggleTerminal
+  onToggleTerminal,
+  onToggleWorkspaceDrawer
 }: {
   sessionInfo: SessionInfo | null
   sessionId?: string
@@ -68,10 +70,12 @@ export function ChatHeader({
   lastUserMessage?: string
   activeView: ChatHeaderView
   isTerminalOpen: boolean
+  isWorkspaceDrawerOpen: boolean
   onCreateSession?: () => void
   onOpenSidebar?: () => void
   onViewChange: (view: ChatHeaderView) => void
   onToggleTerminal: () => void
+  onToggleWorkspaceDrawer: () => void
 }) {
   const { t } = useTranslation()
   const { message } = App.useApp()
@@ -94,7 +98,9 @@ export function ChatHeader({
 
   const summary = sessionInfo?.type === 'summary' ? sessionInfo.summary : null
   const title = (sessionInfo?.type === 'init' ? sessionInfo.title : null) ?? sessionTitle
-  const displayTitle = (title != null && title !== '')
+  const displayTitle = !hasSession
+    ? t('chat.newSessionTitle')
+    : (title != null && title !== '')
     ? title
     : (summary != null && summary !== '')
     ? summary
@@ -167,14 +173,6 @@ export function ChatHeader({
     }
   }))
   const compactMoreItems: MenuProps['items'] = [
-    {
-      key: 'terminal',
-      label: t('chat.viewTerminal'),
-      icon: <span className={`material-symbols-rounded chat-header-icon ${isTerminalOpen ? 'is-filled' : ''}`}>
-        terminal
-      </span>,
-      onClick: onToggleTerminal
-    },
     ...moreItems,
     ...(shouldShowDebugButton
       ? [{
@@ -187,6 +185,35 @@ export function ChatHeader({
       }]
       : [])
   ]
+  const terminalButton = (
+    <Tooltip title={resolveTooltipTitle(t('chat.viewTerminal'))}>
+      <Button
+        type='text'
+        className={`chat-header-action-button ${isTerminalOpen ? 'is-active' : ''}`}
+        title={t('chat.viewTerminal')}
+        aria-label={t('chat.viewTerminal')}
+        onClick={onToggleTerminal}
+        icon={<span className='chat-header-view-option material-symbols-rounded'>terminal</span>}
+      />
+    </Tooltip>
+  )
+  const workspaceDrawerButton = (
+    <Tooltip title={resolveTooltipTitle(t('chat.workspaceDrawerToggle'))}>
+      <Button
+        type='text'
+        className={`chat-header-action-button ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+        title={t('chat.workspaceDrawerToggle')}
+        aria-label={t('chat.workspaceDrawerToggle')}
+        aria-pressed={isWorkspaceDrawerOpen}
+        onClick={onToggleWorkspaceDrawer}
+        icon={
+          <span className='chat-header-view-option material-symbols-rounded'>
+            {isWorkspaceDrawerOpen ? 'folder_open' : 'folder'}
+          </span>
+        }
+      />
+    </Tooltip>
+  )
 
   useEffect(() => {
     return () => {
@@ -293,6 +320,8 @@ export function ChatHeader({
                   </Dropdown>
                 </Tooltip>
               )}
+              {terminalButton}
+              {workspaceDrawerButton}
               {hasSession && (
                 <Tooltip title={resolveTooltipTitle(t('common.moreActions'))}>
                   <Dropdown menu={{ items: compactMoreItems }} placement='bottomRight' trigger={['click']}>
@@ -310,7 +339,7 @@ export function ChatHeader({
           )
           : (
             <>
-              {viewItems.map(item => (
+              {hasSession && viewItems.map(item => (
                 <Tooltip key={item.value} title={resolveTooltipTitle(item.title)}>
                   <Button
                     type='text'
@@ -324,17 +353,9 @@ export function ChatHeader({
                   />
                 </Tooltip>
               ))}
-              <Tooltip title={resolveTooltipTitle(t('chat.viewTerminal'))}>
-                <Button
-                  type='text'
-                  className={`chat-header-action-button ${isTerminalOpen ? 'is-active' : ''}`}
-                  title={t('chat.viewTerminal')}
-                  aria-label={t('chat.viewTerminal')}
-                  onClick={onToggleTerminal}
-                  icon={<span className='chat-header-view-option material-symbols-rounded'>terminal</span>}
-                />
-              </Tooltip>
-              {shouldShowDebugButton && (
+              {terminalButton}
+              {workspaceDrawerButton}
+              {hasSession && shouldShowDebugButton && (
                 <Tooltip title={resolveTooltipTitle(isDebugMode ? t('chat.debugDisable') : t('chat.debugEnable'))}>
                   <Button
                     type='text'
@@ -346,17 +367,19 @@ export function ChatHeader({
                   />
                 </Tooltip>
               )}
-              <Tooltip title={resolveTooltipTitle(t('common.moreActions'))}>
-                <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
-                  <Button
-                    type='text'
-                    className='chat-header-action-button'
-                    title={t('common.moreActions')}
-                    aria-label={t('common.moreActions')}
-                    icon={<span className='chat-header-view-option material-symbols-rounded'>more_vert</span>}
-                  />
-                </Dropdown>
-              </Tooltip>
+              {hasSession && (
+                <Tooltip title={resolveTooltipTitle(t('common.moreActions'))}>
+                  <Dropdown menu={{ items: moreItems }} placement='bottomRight' trigger={['click']}>
+                    <Button
+                      type='text'
+                      className='chat-header-action-button'
+                      title={t('common.moreActions')}
+                      aria-label={t('common.moreActions')}
+                      icon={<span className='chat-header-view-option material-symbols-rounded'>more_vert</span>}
+                    />
+                  </Dropdown>
+                </Tooltip>
+              )}
             </>
           )}
       </div>