@jetcrab/pi-desk 1.1.12 → 1.1.16-dev

package/docs/plugins.md

@@ -77,7 +77,7 @@ plugin.addPreviewDirectory(directory, { default: true })
 
 `directory` 为服务端绝对目录；省略第二个参数只登记，`default: true` 同时设为默认预览目录，后登记的默认生效。原 CWD 始终可选；目录规范化后去重，最多登记 32 个。重复快照不会覆盖用户的手动选择。登记只在当前会话运行态内，插件在 `session_start`、`session_tree` 从自身数据恢复后重新登记；不要在普通查询时重复请求默认选择。
 
-调用不等待回执；非法路径或超限由宿主拒绝并记日志，实际目录内容按需读取。旧宿主或独立 Pi 不处理该登记；兼容旧 SDK 时使用 `plugin.addPreviewDirectory?.(...)`。`files.preview/reveal` 支持会话 CWD 下规范相对路径或服务端绝对文件路径（包括项目外文件）；`preview` 的 `imagePaths` 使用相同路径规则。宿主仍校验当前 Source，目录浏览边界不变。依赖项目外文件的插件需要同步更新宿主，旧宿主只接受项目内相对路径。`readImage` 仍只接受会话 CWD 下规范相对路径。
+调用不等待回执；非法路径或超限由宿主拒绝并记日志，实际目录内容按需读取。旧宿主或独立 Pi 不处理该登记；兼容旧 SDK 时使用 `plugin.addPreviewDirectory?.(...)`。`files.preview/reveal` 支持会话 CWD 下规范相对路径或服务端绝对文件路径（包括项目外文件）；`preview` 的 `imagePaths` 使用相同路径规则。宿主仍校验当前 Source，目录浏览边界不变。依赖项目外文件的插件需要同步更新宿主，旧宿主只接受项目内相对路径。`readImage` 仍只接受会话 CWD 下规范相对路径。`.md`、`.markdown` 在宿主文件查看器中默认以 Markdown 排版预览，可点击“源码”切换；会话文件视图与 `mode: 'standalone'` 独立查看器均支持，插件无需增加参数或自行渲染。
 
 ## Browser Entry 与懒界面
 
@@ -105,6 +105,26 @@ Application 使用 `chrome: 'host'` 让宿主负责 Dialog、标题、关闭、
 
 界面继承宿主明暗主题与字号，布局使用 `rem`、合理内边距和自身滚动；窄屏与触控可用，不以裁切或只靠 hover 隐藏必要操作。按钮、表单、加载/错误/重试优先复用 `/react/base`；需要 Markdown 时才加载 `/react/markdown`。
 
+### 侧栏顶部操作
+
+`session-sidebar-tab` 的 Lazy `mount({ target, host })` 内可为当前 Tab 设置顶部右侧按钮：
+
+```ts
+target.setHeaderActions?.([
+  {
+    label: '预览项目',
+    icon: { type: 'builtin', name: 'folder' },
+    onSelect: () => host.projects.preview(target.cwd)
+  }
+])
+```
+
+每次调用整体替换，`[]` 清空。按钮使用 `label` 作为可访问名称和提示，`icon` 复用 Contribution 图标；可选 `disabled` 禁用，`busy` 显示忙碌并禁用。状态变化时重新设置完整列表，不修改已提交对象。宿主保持列表顺序，超过三个操作时保留前两个，其余收进菜单。
+
+`onSelect` 可返回 `Promise<void>`；同一按钮回调尚未完成时不重复执行，异常由宿主记录并在当前挂载仍有效时提示。插件负责业务加载状态和结果展示；请求已经产生的副作用不因 Tab 关闭而回滚。
+
+按钮只属于当前挂载，切换 Tab、关闭侧栏／移动抽屉、Source 或 CWD 变化、挂载失败及插件重载时自动清空；旧按钮、迟到更新和旧 disposer 均不能操作新挂载。旧宿主可能没有此方法，使用可选调用，不自行访问宿主 DOM。`PluginPanelHeader.actions` 仍只作用于插件内容区标题，不是此顶栏入口。
+
 ## 通信、通知与后台
 
 Browser Method 示例：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetcrab/pi-desk",
-  "version": "1.1.12",
+  "version": "1.1.16-dev",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -69,7 +69,7 @@
     "viewerjs": "^1.11.8",
     "ws": "^8.21.3",
     "zod": "^4.4.3",
-    "@jetcrab/pi-desk-sdk": "^1.1.3"
+    "@jetcrab/pi-desk-sdk": "^1.1.6-dev"
   },
   "devDependencies": {
     "@earendil-works/pi-agent-core": "1.2.0",

package/src/app/api/model-settings/preview/route.ts

@@ -0,0 +1 @@
+export { POST } from '@server/l1_entry/api/l1-model-settings-preview-route'

package/src/app/api/work-sessions/rename/route.ts

@@ -0,0 +1 @@
+export { POST } from '@server/l1_entry/api/l1-work-session-rename-route'

package/src/client/l2_biz/auth/l2-login.tsx

@@ -96,7 +96,7 @@ export function L2Login(): React.JSX.Element {
                 name="password"
                 value={password}
                 autoComplete="current-password"
-                maxLength={256}
+                maxLength={64}
                 disabled={submitting}
                 aria-describedby={error ? 'login-error' : undefined}
                 onChange={(event) => setPassword(event.target.value)}

package/src/client/l2_biz/plugin-host/l2-plugin-session-sidebar-tab.tsx

@@ -2,6 +2,7 @@
 
 import type {
   BrowserFilePreviewOptions,
+  BrowserSessionSidebarHeaderAction,
   BrowserSessionSidebarTabTarget,
   PluginSource
 } from '@jetcrab/pi-desk-sdk/browser'
@@ -15,6 +16,7 @@ interface L2PluginSessionSidebarTabProps {
   cwd: string
   onPreviewFile: (path: string, options?: BrowserFilePreviewOptions) => void
   onRevealFile: (path: string) => Promise<void>
+  onHeaderActionsChange: (actions: readonly BrowserSessionSidebarHeaderAction[]) => void
 }
 
 export function L2PluginSessionSidebarTab({
@@ -23,13 +25,15 @@ export function L2PluginSessionSidebarTab({
   source,
   cwd,
   onPreviewFile,
-  onRevealFile
+  onRevealFile,
+  onHeaderActionsChange
 }: L2PluginSessionSidebarTabProps): React.JSX.Element {
   const target: BrowserSessionSidebarTabTarget = {
     kind: 'session-sidebar-tab',
     source,
     cwd,
-    files: { preview: onPreviewFile, reveal: onRevealFile }
+    files: { preview: onPreviewFile, reveal: onRevealFile },
+    setHeaderActions: onHeaderActionsChange
   }
   const targetKey = `${source.workId}\u0000${source.sessionId}\u0000${source.branchId}\u0000${cwd}`
 

package/src/client/l2_biz/settings/hooks/l2-use-model-provider-settings.ts

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import type {
   L2ModelConfig,
-  L2ModelProviderConfig
+  L2ModelProviderConfig,
+  L2ModelReplacement
 } from '@common/l2_biz/model-settings/l2-model-settings-contract'
 
 export interface ModelInputState {
@@ -45,7 +46,7 @@ function emptyModel(): L2ModelConfig {
 
 export function useL2ModelProviderSettings(
   providers: L2ModelProviderConfig[],
-  onChange: (providers: L2ModelProviderConfig[]) => void,
+  onChange: (providers: L2ModelProviderConfig[], replacements: L2ModelReplacement[]) => void,
   onInputState: (state: ModelInputState) => void,
   resetVersion: number
 ): {
@@ -79,6 +80,16 @@ export function useL2ModelProviderSettings(
     )
   )
   const nextKey = useRef(0)
+  const originalModels = useRef(
+    new Map(
+      providers.flatMap((provider, providerIndex) =>
+        provider.models.map((model, modelIndex) => [
+          `${providerIndex}:${modelIndex}`,
+          { provider: provider.provider, modelId: model.modelId }
+        ])
+      )
+    )
+  )
   const [inputStates, setInputStates] = useState<Record<string, ModelInputState>>({})
   const [serviceIndex, setServiceIndex] = useState<number | null>(null)
   const [newService, setNewService] = useState(false)
@@ -91,6 +102,14 @@ export function useL2ModelProviderSettings(
   useEffect(() => {
     queueMicrotask(() => {
       const current = latestProviders.current
+      originalModels.current = new Map(
+        current.flatMap((provider, providerIndex) =>
+          provider.models.map((model, modelIndex) => [
+            `${providerIndex}:${modelIndex}`,
+            { provider: provider.provider, modelId: model.modelId }
+          ])
+        )
+      )
       setInputStates({})
       setModelKeys(
         current.map((provider, providerIndex) =>
@@ -120,8 +139,22 @@ export function useL2ModelProviderSettings(
     )
   }
 
+  function changeProviders(next: L2ModelProviderConfig[], keys = modelKeys): void {
+    const replacements: L2ModelReplacement[] = []
+    next.forEach((provider, providerIndex) => {
+      provider.models.forEach((model, modelIndex) => {
+        const from = originalModels.current.get(keys[providerIndex][modelIndex])
+        const to = { provider: provider.provider.trim(), modelId: model.modelId.trim() }
+        if (from && (from.provider !== to.provider || from.modelId !== to.modelId)) {
+          replacements.push({ from, to })
+        }
+      })
+    })
+    onChange(next, replacements)
+  }
+
   function updateModel(providerIndex: number, modelIndex: number, model: L2ModelConfig): void {
-    onChange(
+    changeProviders(
       providers.map((provider, index) =>
         index === providerIndex
           ? {
@@ -155,10 +188,12 @@ export function useL2ModelProviderSettings(
     closeService,
     applyService: (provider) => {
       if (newService) {
-        onChange([...providers, provider])
+        changeProviders([...providers, provider], [...modelKeys, []])
         setModelKeys((keys) => [...keys, []])
       } else {
-        onChange(providers.map((current, index) => (index === serviceIndex ? provider : current)))
+        changeProviders(
+          providers.map((current, index) => (index === serviceIndex ? provider : current))
+        )
       }
       closeService()
     },
@@ -166,7 +201,10 @@ export function useL2ModelProviderSettings(
       if (serviceIndex === null) return
       removeInputKeys(modelKeys[serviceIndex])
       const nextProviders = providers.filter((_, index) => index !== serviceIndex)
-      onChange(nextProviders)
+      changeProviders(
+        nextProviders,
+        modelKeys.filter((_, index) => index !== serviceIndex)
+      )
       setModelKeys((keys) => keys.filter((_, index) => index !== serviceIndex))
       setSelection((current) => {
         if (!current || current.providerIndex === serviceIndex) {
@@ -182,14 +220,15 @@ export function useL2ModelProviderSettings(
     },
     addModel: (providerIndex) => {
       const provider = providers[providerIndex]
-      onChange(
+      const key = `new-${++nextKey.current}`
+      changeProviders(
         providers.map((current, index) =>
           index === providerIndex
             ? { ...current, models: [...current.models, emptyModel()] }
             : current
-        )
+        ),
+        modelKeys.map((current, index) => (index === providerIndex ? [...current, key] : current))
       )
-      const key = `new-${++nextKey.current}`
       setModelKeys((keys) =>
         keys.map((current, index) => (index === providerIndex ? [...current, key] : current))
       )
@@ -213,7 +252,12 @@ export function useL2ModelProviderSettings(
           ? { ...provider, models: provider.models.filter((_, index) => index !== modelIndex) }
           : provider
       )
-      onChange(nextProviders)
+      changeProviders(
+        nextProviders,
+        modelKeys.map((current, index) =>
+          index === providerIndex ? current.filter((_, index) => index !== modelIndex) : current
+        )
+      )
       setModelKeys((keys) =>
         keys.map((current, index) =>
           index === providerIndex ? current.filter((_, index) => index !== modelIndex) : current

package/src/client/l2_biz/settings/hooks/l2-use-model-settings.ts

@@ -1,16 +1,18 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { BrowserBeforeLeaveHandler } from '@jetcrab/pi-desk-sdk/browser'
 import type {
   L2AccountModelSelection,
   L2ModelPreset,
   L2ModelProviderConfig,
+  L2ModelReplacement,
   L2ModelSettingsGetResponse,
   L2ModelSettingsReplaceRequest
 } from '@common/l2_biz/model-settings/l2-model-settings-contract'
 import { useL4AppSocket } from '@client/l4_foundation/realtime/app-socket/l4-app-socket'
 import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
 import { useL4ConfirmDialog } from '@client/l4_foundation/ui/l4-confirm-dialog'
+import { L2ModelReplacementPreview } from '../views/l2-model-replacement-preview'
 import { createL2ModelSettingsBiz, type L2ModelSettingsBiz } from '../l2-model-settings-biz'
 import {
   readL2ModelSettingsTab,
@@ -53,7 +55,7 @@ interface ModelSettingsState {
   setServiceDirty: (dirty: boolean) => void
   dialog: React.JSX.Element | null
   setProjectDefaultDirty: (dirty: boolean) => void
-  changeProviders: (providers: L2ModelProviderConfig[]) => void
+  changeProviders: (providers: L2ModelProviderConfig[], replacements: L2ModelReplacement[]) => void
   changePresets: (presets: L2ModelPreset[]) => void
   selectTab: (tab: ModelSettingsTab) => void
   retry: () => void
@@ -95,6 +97,7 @@ export function useL2ModelSettings(
   const [nativeText, setNativeText] = useState('')
   const [nativeError, setNativeError] = useState<string | null>(null)
   const savingRef = useRef(false)
+  const modelReplacements = useRef<L2ModelReplacement[]>([])
   const nativeBaseline = settings ? JSON.stringify(settings.nativeConfig, null, 2) : ''
   const nativeDirty = nativeOpen && nativeText !== nativeBaseline
   const formDirty = providersDirty || presetsDirty || accountModelsDirty || inputState.dirty
@@ -127,6 +130,7 @@ export function useL2ModelSettings(
   }, [dirty])
 
   const applySettings = useCallback((result: L2ModelSettingsGetResponse): void => {
+    modelReplacements.current = []
     setSettings(result)
     setProviders(structuredClone(result.providers))
     setPresets(structuredClone(result.presets))
@@ -218,7 +222,35 @@ export function useL2ModelSettings(
         return !originalModels.has(key) || currentModels.has(key)
       })
       const removedPresetCount = presets.length - nextPresets.length
-      if (
+      const input: L2ModelSettingsReplaceRequest = {
+        ...(providersDirty || inputState.dirty ? { providers } : {}),
+        ...(accountModelsDirty ? { accountModels } : {}),
+        ...(presetsDirty || removedPresetCount > 0 ? { presets: nextPresets } : {}),
+        ...(modelReplacements.current.length
+          ? { modelReplacements: modelReplacements.current }
+          : {})
+      }
+      const { projectDefaults } = modelReplacements.current.length
+        ? await biz.previewSettings(input)
+        : { projectDefaults: [] }
+      if (projectDefaults.length > 0) {
+        const description = [
+          t('replaceProjectDefaultsDescription'),
+          ...(removedPresetCount > 0
+            ? [t('removeInvalidPresets', { count: removedPresetCount })]
+            : [])
+        ].join(' ')
+        if (
+          !(await confirm({
+            title: t('replaceProjectDefaultsTitle'),
+            description,
+            content: createElement(L2ModelReplacementPreview, { projectDefaults }),
+            confirmLabel: t('confirmAndSaveModels'),
+            confirmVariant: 'default'
+          }))
+        )
+          return
+      } else if (
         removedPresetCount > 0 &&
         !(await confirm({
           title: t('removeInvalidPresetsTitle'),
@@ -229,11 +261,6 @@ export function useL2ModelSettings(
         return
       }
 
-      const input: L2ModelSettingsReplaceRequest = {
-        ...(providersDirty || inputState.dirty ? { providers } : {}),
-        ...(accountModelsDirty ? { accountModels } : {}),
-        ...(presetsDirty || removedPresetCount > 0 ? { presets: nextPresets } : {})
-      }
       await biz.replaceSettings(input)
       applySettings(await biz.getSettings())
       setProvidersDirty(false)
@@ -375,7 +402,8 @@ export function useL2ModelSettings(
     setServiceDirty,
     dialog,
     setProjectDefaultDirty,
-    changeProviders: (nextProviders) => {
+    changeProviders: (nextProviders, replacements) => {
+      modelReplacements.current = replacements
       setProviders(nextProviders)
       setProvidersDirty(JSON.stringify(nextProviders) !== JSON.stringify(settings?.providers))
     },

package/src/client/l2_biz/settings/l2-auth-settings.tsx

@@ -99,7 +99,7 @@ export function L2AuthSettings(): React.JSX.Element {
                   className="[&::-ms-reveal]:hidden"
                   autoComplete="new-password"
                   minLength={12}
-                  maxLength={256}
+                  maxLength={64}
                   required
                   disabled={busy}
                   value={state.password}

package/src/client/l2_biz/settings/l2-model-settings-biz.ts

@@ -4,6 +4,7 @@ import {
   L2ModelCatalogListRequestSchema,
   L2ModelCatalogListResponseSchema,
   L2ModelSettingsGetResponseSchema,
+  L2ModelSettingsPreviewResponseSchema,
   L2ModelSettingsReplaceRequestSchema,
   L2ModelSettingsReplaceResponseSchema,
   L2ProjectModelDefaultGetResponseSchema,
@@ -12,6 +13,7 @@ import {
   type L2ModelCatalogListRequest,
   type L2ModelCatalogListResponse,
   type L2ModelSettingsGetResponse,
+  type L2ModelSettingsPreviewResponse,
   type L2ModelSettingsReplaceRequest,
   type L2ProjectModelDefaultGetResponse,
   type L2ProjectModelDefaultReplaceRequest
@@ -25,6 +27,7 @@ import { saveL2ProjectModelDefaultCache } from './l2-model-settings-cache'
 export interface L2ModelSettingsBiz {
   parseNativeConfig: (text: string) => L2ModelNativeConfig
   getSettings: () => Promise<L2ModelSettingsGetResponse>
+  previewSettings: (input: L2ModelSettingsReplaceRequest) => Promise<L2ModelSettingsPreviewResponse>
   replaceSettings: (input: L2ModelSettingsReplaceRequest) => Promise<void>
   listCatalog: (input: L2ModelCatalogListRequest) => Promise<L2ModelCatalogListResponse>
   listDirectories: () => Promise<z.infer<typeof L2PiDirectoryListResponseSchema>>
@@ -32,6 +35,21 @@ export interface L2ModelSettingsBiz {
   replaceProjectDefault: (input: L2ProjectModelDefaultReplaceRequest) => Promise<void>
 }
 
+function parseSettingsInput(input: L2ModelSettingsReplaceRequest): L2ModelSettingsReplaceRequest {
+  const parsed = L2ModelSettingsReplaceRequestSchema.safeParse(input)
+  if (!parsed.success) {
+    const field = parsed.error.issues[0]?.path.at(-1)
+    if (field === 'modelId') {
+      throw new Error('请填写模型 ID 后再保存配置。')
+    }
+    if (field === 'provider') {
+      throw new Error('请填写 Provider ID 后再保存配置。')
+    }
+    throw new Error('模型配置不完整或格式不正确，请检查必填字段和数值。')
+  }
+  return parsed.data
+}
+
 export function createL2ModelSettingsBiz(clientId: string): L2ModelSettingsBiz {
   let settingsRequest: Promise<L2ModelSettingsGetResponse> | null = null
   return {
@@ -52,22 +70,18 @@ export function createL2ModelSettingsBiz(clientId: string): L2ModelSettingsBiz {
       }
       return settingsRequest
     },
+    previewSettings: (input) =>
+      request(
+        clientId,
+        '/api/model-settings/preview',
+        parseSettingsInput(input),
+        L2ModelSettingsPreviewResponseSchema
+      ),
     async replaceSettings(input): Promise<void> {
-      const parsed = L2ModelSettingsReplaceRequestSchema.safeParse(input)
-      if (!parsed.success) {
-        const field = parsed.error.issues[0]?.path.at(-1)
-        if (field === 'modelId') {
-          throw new Error('请填写模型 ID 后再保存配置。')
-        }
-        if (field === 'provider') {
-          throw new Error('请填写 Provider ID 后再保存配置。')
-        }
-        throw new Error('模型配置不完整或格式不正确，请检查必填字段和数值。')
-      }
       await request(
         clientId,
         '/api/model-settings/replace',
-        parsed.data,
+        parseSettingsInput(input),
         L2ModelSettingsReplaceResponseSchema
       )
     },

package/src/client/l2_biz/settings/views/l2-appearance-settings.tsx

@@ -17,7 +17,6 @@ import {
   subscribeL4DisplaySize
 } from '@client/l4_foundation/ui/l4-display-size-provider'
 import { L3ConversationMarkdown } from '@client/l3_modules/conversation/l3-conversation-markdown'
-import { saveL4PowerSaving, useL4PowerSaving } from '@client/l4_foundation/ui/l4-power-saving'
 
 const THEME_OPTIONS = [
   { value: 'system', label: 'common:system', icon: MonitorIcon },
@@ -34,7 +33,6 @@ const DISPLAY_SIZE_OPTIONS = [
 export function L2AppearanceSettings(): React.JSX.Element {
   const { t } = useTranslation('settings')
   const theme = useSyncExternalStore(subscribeL4Theme, readL4Theme, () => L4_DEFAULT_THEME)
-  const powerSaving = useL4PowerSaving()
   const size = useSyncExternalStore(
     subscribeL4DisplaySize,
     readL4DisplaySize,
@@ -58,7 +56,7 @@ export function L2AppearanceSettings(): React.JSX.Element {
               onChange={saveL4Theme}
             />
           </div>
-          <div className="space-y-2 border-b pb-4">
+          <div className="space-y-2">
             <h3 className="text-sm font-medium">{t('displaySize')}</h3>
             <L4ChoiceGroup<L4DisplaySize>
               label={t('displaySize')}
@@ -71,19 +69,6 @@ export function L2AppearanceSettings(): React.JSX.Element {
               onChange={saveL4DisplaySize}
             />
           </div>
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium">{t('powerSaving')}</h3>
-            <L4ChoiceGroup<'off' | 'on'>
-              label={t('powerSaving')}
-              layout="segmented"
-              value={powerSaving ? 'on' : 'off'}
-              options={[
-                { value: 'off', label: t('powerSavingOff'), testId: 'power-saving-off' },
-                { value: 'on', label: t('powerSavingOn'), testId: 'power-saving-on' }
-              ]}
-              onChange={(value) => saveL4PowerSaving(value === 'on')}
-            />
-          </div>
         </div>
         <div className="min-w-0 space-y-2">
           <h3 className="text-sm font-medium">{t('displayPreview')}</h3>

package/src/client/l2_biz/settings/views/l2-model-provider-settings.tsx

@@ -16,7 +16,8 @@ import type {
   L2ModelSettingsGetResponse,
   L2ModelOption,
   L2ModelPreset,
-  L2ModelProviderConfig
+  L2ModelProviderConfig,
+  L2ModelReplacement
 } from '@common/l2_biz/model-settings/l2-model-settings-contract'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
 import { Input } from '@client/l4_foundation/ui/shadcn/input'
@@ -61,7 +62,7 @@ interface Props {
   savedProviders: L2ModelProviderConfig[]
   presets: L2ModelPreset[]
   resetVersion: number
-  onChange: (providers: L2ModelProviderConfig[]) => void
+  onChange: (providers: L2ModelProviderConfig[], replacements: L2ModelReplacement[]) => void
   onPresetsChange: (presets: L2ModelPreset[]) => void
   onInputState: (state: ModelInputState) => void
   onServiceDirtyChange: (dirty: boolean) => void

package/src/client/l2_biz/settings/views/l2-model-replacement-preview.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next'
+import type { L2ModelSettingsPreviewResponse } from '@common/l2_biz/model-settings/l2-model-settings-contract'
+
+const THINKING_LABELS = {
+  off: 'thinkingOff',
+  minimal: 'thinkingMinimal',
+  low: 'thinkingLow',
+  medium: 'thinkingMedium',
+  high: 'thinkingHigh',
+  xhigh: 'thinkingXhigh',
+  max: 'thinkingMax'
+} as const
+
+export function L2ModelReplacementPreview({
+  projectDefaults
+}: L2ModelSettingsPreviewResponse): React.JSX.Element {
+  const { t } = useTranslation('settings')
+  return (
+    <ul className="space-y-3 px-4 pb-4">
+      {projectDefaults.map(({ cwd, from, to }) => (
+        <li key={cwd} className="space-y-1">
+          <p className="break-all font-medium">{cwd}</p>
+          <p className="break-all text-muted-foreground">
+            {from.provider}/{from.modelId} · {t(THINKING_LABELS[from.thinkingLevel])}
+            <span className="mx-1.5">→</span>
+            <span className="text-foreground">
+              {to.provider}/{to.modelId} · {t(THINKING_LABELS[to.thinkingLevel])}
+            </span>
+          </p>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/client/l2_biz/task-center/l2-task-center.tsx

@@ -14,7 +14,7 @@ import {
   XCircleIcon,
   XIcon
 } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   type L2TaskDetailBody,
@@ -50,7 +50,6 @@ import {
 } from '@client/l3_modules/conversation/l3-conversation-messages'
 import { L3ConversationTailSpacerObserver } from '@client/l3_modules/conversation/l3-conversation-viewport'
 import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
-import { useL4WindowReveal } from '@client/l4_foundation/ui/l4-window-reveal'
 import type { L2TaskCenterRuntime } from './l2-task-center-runtime'
 
 interface L2TaskCenterProps {
@@ -443,8 +442,6 @@ function TaskCenterPanel({
   }, [runtime])
   useSyncExternalStore(runtime.subscribe, getPanelSnapshot, getPanelSnapshot)
   const state = runtime.getState()
-  const closeButtonRef = useRef<HTMLButtonElement>(null)
-  const desktopCloseButtonRef = useRef<HTMLButtonElement>(null)
   const [mobileDetail, setMobileDetail] = useState(false)
   const selectedTask = tasks.find((task) => task.taskId === state.selectedTaskId) ?? null
 
@@ -455,17 +452,6 @@ function TaskCenterPanel({
 
   const showMobileDetail = mobileDetail && state.selectedTaskId !== null
   const panelOpen = state.open && sameSource(state.source, source)
-  const listRef = useRef<HTMLDivElement>(null)
-  const detailRef = useRef<HTMLDivElement>(null)
-  useL4WindowReveal(listRef, panelOpen && !showMobileDetail ? 'task-list' : null)
-  useL4WindowReveal(
-    detailRef,
-    panelOpen ? `${state.selectedTaskId ?? 'no-task'}:${showMobileDetail}` : null
-  )
-
-  if (!state.open || !sameSource(state.source, source) || typeof document === 'undefined') {
-    return null
-  }
 
   const select = (taskId: string): void => {
     runtime.selectTask(taskId)
@@ -474,23 +460,17 @@ function TaskCenterPanel({
 
   return (
     <L4AppDialogRoot
-      open
+      open={panelOpen}
       onOpenChange={(open) => {
         if (!open) runtime.close()
       }}
     >
       <L4AppDialogContent
         aria-label={t('title')}
-        initialFocus={() =>
-          desktopCloseButtonRef.current?.getClientRects().length
-            ? desktopCloseButtonRef.current
-            : closeButtonRef.current
-        }
         showCloseButton={false}
-        className="h-[calc(100dvh-2rem)] max-w-[70rem] flex-row bg-background data-open:animate-none max-lg:h-dvh max-lg:max-h-dvh max-lg:w-dvw max-lg:max-w-none max-lg:rounded-none max-lg:border-0"
+        className="h-[calc(100dvh-2rem)] max-w-[70rem] flex-row bg-background max-lg:h-dvh max-lg:max-h-dvh max-lg:w-dvw max-lg:max-w-none max-lg:rounded-none max-lg:border-0"
       >
         <div
-          ref={listRef}
           className={cn(
             'flex min-w-0 flex-1 flex-col border-r bg-sidebar lg:max-w-80',
             showMobileDetail && 'hidden lg:flex'
@@ -505,7 +485,6 @@ function TaskCenterPanel({
               </p>
             </div>
             <Button
-              ref={showMobileDetail ? undefined : closeButtonRef}
               className="lg:hidden"
               type="button"
               variant="ghost"
@@ -576,10 +555,7 @@ function TaskCenterPanel({
           </div>
         </div>
 
-        <div
-          ref={detailRef}
-          className={cn('min-w-0 flex-1', !showMobileDetail && 'hidden lg:block')}
-        >
+        <div className={cn('min-w-0 flex-1', !showMobileDetail && 'hidden lg:block')}>
           <div className="flex h-full min-h-0 flex-col">
             <div className="flex min-h-12 items-center gap-2 border-b bg-muted/10 px-3 lg:hidden">
               <Button
@@ -595,7 +571,6 @@ function TaskCenterPanel({
                 {selectedTask?.title ?? t('detail')}
               </span>
               <Button
-                ref={showMobileDetail ? closeButtonRef : undefined}
                 type="button"
                 variant="ghost"
                 size="icon"
@@ -616,7 +591,6 @@ function TaskCenterPanel({
           </div>
         </div>
         <Button
-          ref={desktopCloseButtonRef}
           className="absolute right-4 top-3 z-10 hidden lg:inline-flex"
           type="button"
           variant="ghost"