@jetcrab/pi-desk 1.1.1-dev → 1.1.5-dev

package/src/client/l2_biz/plugin-host/views/l2-plugin-management-dialog.tsx

@@ -18,137 +18,115 @@ import {
 } from '../l2-use-plugin-management'
 
 interface ManagementDialogProps {
-  open: boolean
-  title: string
   confirmation: PluginManagementAction | null
   onClose: () => void
   onConfirm: (action: PluginManagementAction) => void
-  children: React.ReactNode
 }
 
 export function L2PluginManagementDialog({
-  open,
-  title,
   confirmation,
   onClose,
-  onConfirm,
-  children
+  onConfirm
 }: ManagementDialogProps): React.JSX.Element {
   const { t } = useTranslation('pluginManagement')
   const action = confirmation ? t(pluginManagementActionLabel(confirmation)) : null
+  const removing =
+    confirmation?.kind === 'del' ||
+    (confirmation?.kind === 'batch' && confirmation.input.action === 'del')
+  const installing =
+    confirmation?.kind === 'add' ||
+    (confirmation?.kind === 'batch' && confirmation.input.action === 'add')
   return (
     <L4AppDialogRoot
-      open={open}
+      open={Boolean(confirmation)}
       onOpenChange={(value) => {
         if (!value) onClose()
       }}
     >
-      <L4AppDialogContent
-        finalFocus
-        className={confirmation ? 'max-w-lg' : 'h-[min(85dvh,52rem)] max-w-3xl'}
-      >
+      <L4AppDialogContent className="z-[150] max-w-lg" backdropClassName="z-[140]">
         <L4AppDialogHeader className="p-4 pr-12">
-          <L4AppDialogTitle className="min-w-0 [overflow-wrap:anywhere]">
-            {confirmation ? t('confirmAction', { action }) : title}
-          </L4AppDialogTitle>
+          <L4AppDialogTitle>{t('confirmAction', { action })}</L4AppDialogTitle>
           <L4AppDialogDescription>
-            {confirmation
-              ? confirmation.kind === 'del' ||
-                (confirmation.kind === 'batch' && confirmation.input.action === 'del')
-                ? t('removeDescription')
-                : confirmation.kind === 'add' ||
-                    (confirmation.kind === 'batch' && confirmation.input.action === 'add')
-                  ? t('thirdPartyDescription')
-                  : confirmation.kind === 'reload'
-                    ? t(
-                        confirmation.mode === 'normal'
-                          ? 'restartNormalDescription'
-                          : 'restartDescription'
-                      )
-                    : t('confirmChange')
-              : t('pluginDetails')}
+            {removing
+              ? t('removeDescription')
+              : installing
+                ? t('thirdPartyDescription')
+                : confirmation?.kind === 'reload'
+                  ? t(
+                      confirmation.mode === 'normal'
+                        ? 'restartNormalDescription'
+                        : 'restartDescription'
+                    )
+                  : t('confirmChange')}
           </L4AppDialogDescription>
         </L4AppDialogHeader>
         <L4AppDialogBody className="min-h-0">
           <div className="min-w-0 p-4 pt-0">
-            {confirmation ? (
-              confirmation.kind === 'batch' ? (
-                <ul className="space-y-2 text-sm">
-                  {(confirmation.input.action === 'add'
-                    ? confirmation.input.items.map((item) => item.source)
-                    : confirmation.input.sources
-                  ).map((source) => (
-                    <li key={source} className="font-medium [overflow-wrap:anywhere]">
-                      {source}
-                    </li>
-                  ))}
-                </ul>
-              ) : confirmation.kind === 'add' ? (
-                <dl className="space-y-3 text-sm">
-                  <div>
-                    <dt className="text-muted-foreground">{t('packageName')}</dt>
-                    <dd className="mt-1 font-medium [overflow-wrap:anywhere]">
-                      {confirmation.package?.name ?? confirmation.input.source}
-                    </dd>
-                  </div>
-                  <div>
-                    <dt className="text-muted-foreground">{t('version')}</dt>
-                    <dd className="[overflow-wrap:anywhere]">
-                      {confirmation.package?.version ??
-                        pluginNpmSpec(confirmation.input.source)?.version ??
-                        t('fromSource')}
-                    </dd>
-                  </div>
-                  {confirmation.input.tag ? (
-                    <div>
-                      <dt className="text-muted-foreground">{t('installChannel')}</dt>
-                      <dd>{confirmation.input.tag}</dd>
-                    </div>
-                  ) : null}
-                  <div>
-                    <dt className="text-muted-foreground">{t('publisher')}</dt>
-                    <dd className="[overflow-wrap:anywhere]">
-                      {confirmation.package?.publisher ?? t('unknownPublisher')}
-                    </dd>
-                  </div>
-                  <div>
-                    <dt className="text-muted-foreground">{t('source')}</dt>
-                    <dd className="[overflow-wrap:anywhere]">
-                      {confirmation.input.registry ??
-                        confirmation.package?.registry ??
-                        confirmation.input.source}
-                    </dd>
-                  </div>
-                </dl>
-              ) : confirmation.kind !== 'reload' ? (
-                <p className="text-sm font-medium [overflow-wrap:anywhere]">
-                  {confirmation.source}
-                </p>
-              ) : null
-            ) : (
-              children
-            )}
+            {confirmation?.kind === 'batch' ? (
+              <ul className="space-y-2 text-sm">
+                {(confirmation.input.action === 'add'
+                  ? confirmation.input.items.map((item) => item.source)
+                  : confirmation.input.sources
+                ).map((source) => (
+                  <li key={source} className="font-medium [overflow-wrap:anywhere]">
+                    {source.startsWith('npm:') ? (pluginNpmSpec(source)?.name ?? source) : source}
+                  </li>
+                ))}
+              </ul>
+            ) : confirmation?.kind === 'add' ? (
+              <dl className="space-y-3 text-sm">
+                <div>
+                  <dt className="text-muted-foreground">{t('packageName')}</dt>
+                  <dd className="mt-1 font-medium [overflow-wrap:anywhere]">
+                    {confirmation.package?.name ?? confirmation.input.source}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">{t('version')}</dt>
+                  <dd className="[overflow-wrap:anywhere]">
+                    {confirmation.package?.version ??
+                      pluginNpmSpec(confirmation.input.source)?.version ??
+                      t('fromSource')}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">{t('publisher')}</dt>
+                  <dd className="[overflow-wrap:anywhere]">
+                    {confirmation.package?.publisher ?? t('unknownPublisher')}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">{t('source')}</dt>
+                  <dd className="[overflow-wrap:anywhere]">
+                    {confirmation.input.registry ??
+                      confirmation.package?.registry ??
+                      confirmation.input.source}
+                  </dd>
+                </div>
+              </dl>
+            ) : confirmation && confirmation.kind !== 'reload' ? (
+              <p className="text-sm font-medium [overflow-wrap:anywhere]">
+                {confirmation.source.startsWith('npm:')
+                  ? (pluginNpmSpec(confirmation.source)?.name ?? confirmation.source)
+                  : confirmation.source}
+              </p>
+            ) : null}
           </div>
         </L4AppDialogBody>
-        {confirmation ? (
-          <L4AppDialogFooter>
-            <Button size="sm" variant="outline" onClick={onClose}>
-              {t('cancel')}
-            </Button>
-            <Button
-              size="sm"
-              variant={
-                confirmation.kind === 'del' ||
-                (confirmation.kind === 'batch' && confirmation.input.action === 'del')
-                  ? 'destructive'
-                  : 'default'
-              }
-              onClick={() => onConfirm(confirmation)}
-            >
-              {action}
-            </Button>
-          </L4AppDialogFooter>
-        ) : null}
+        <L4AppDialogFooter>
+          <Button size="sm" variant="outline" onClick={onClose}>
+            {t('cancel')}
+          </Button>
+          <Button
+            size="sm"
+            variant={removing ? 'destructive' : 'default'}
+            onClick={() => {
+              if (confirmation) onConfirm(confirmation)
+            }}
+          >
+            {action}
+          </Button>
+        </L4AppDialogFooter>
       </L4AppDialogContent>
     </L4AppDialogRoot>
   )

package/src/client/l2_biz/plugin-host/views/l2-plugin-readme.tsx

@@ -8,6 +8,13 @@ import {
 } from '@common/l4_foundation/locale/l4-localized-text'
 import { useL4Region } from '@client/l4_foundation/locale/l4-region-provider'
 import { MessageResponse } from '@client/l4_foundation/ui/ai-elements/message'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@client/l4_foundation/ui/shadcn/select'
 
 export function L2PluginReadme({ readme }: { readme: L4LocalizedText | null }): React.JSX.Element {
   const { t } = useTranslation('pluginManagement')
@@ -26,21 +33,28 @@ export function L2PluginReadme({ readme }: { readme: L4LocalizedText | null }):
       <div className="flex flex-wrap items-center justify-between gap-2">
         <h3 className="text-sm font-semibold">{t('readme')}</h3>
         {languages.length > 0 ? (
-          <label className="flex items-center gap-2 text-sm">
-            {t('readmeLanguage')}
-            <select
-              value={selected ?? ''}
-              onChange={(event) => setLanguage(event.target.value || null)}
-              className="min-h-8 rounded-lg border border-input bg-background px-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              <option value="">{t('defaultLanguage')}</option>
-              {languages.map((key) => (
-                <option key={key} value={key}>
-                  {key.startsWith('zh') ? '中文' : 'English'}
-                </option>
-              ))}
-            </select>
-          </label>
+          <div className="flex items-center gap-2 text-sm">
+            <span>{t('readmeLanguage')}</span>
+            <Select value={selected ?? ''} onValueChange={(value) => setLanguage(value || null)}>
+              <SelectTrigger aria-label={t('readmeLanguage')}>
+                <SelectValue>
+                  {selected
+                    ? selected.startsWith('zh')
+                      ? '中文'
+                      : 'English'
+                    : t('defaultLanguage')}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent positionerClassName="z-[160]">
+                <SelectItem value="">{t('defaultLanguage')}</SelectItem>
+                {languages.map((key) => (
+                  <SelectItem key={key} value={key}>
+                    {key.startsWith('zh') ? '中文' : 'English'}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         ) : null}
       </div>
       {content ? (

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

@@ -24,6 +24,7 @@ import {
 interface ProjectModelDefaultSettingsState {
   directories: L2PiDirectoryListResponse['directories']
   cwd: string
+  loadedCwd: string | null
   models: L2ModelOption[]
   selection: L2ModelSelection | null
   fixed: boolean
@@ -66,9 +67,11 @@ export function useL2ProjectModelDefaultSettings(
   const [projectError, setProjectError] = useState<string | null>(null)
   const [directoryAttempt, setDirectoryAttempt] = useState(0)
   const [projectAttempt, setProjectAttempt] = useState(0)
-  const projectReady = loadedCwd === cwd && projectError === null
+  const projectReady =
+    loadedCwd === cwd && projectError === null && !projectLoading && !projectRefreshing
   const projectDraftDirtyRef = useRef(false)
   const projectCwdRef = useRef('')
+  const projectRequestRef = useRef(0)
   const markDraftDirty = useCallback(
     (dirty: boolean): void => {
       projectDraftDirtyRef.current = dirty
@@ -137,12 +140,16 @@ export function useL2ProjectModelDefaultSettings(
 
   useEffect(() => {
     let disposed = false
+    const request = ++projectRequestRef.current
+    function isCurrent(): boolean {
+      return !disposed && request === projectRequestRef.current
+    }
     const projectChanged = projectCwdRef.current !== cwd
     projectCwdRef.current = cwd
     if (projectChanged) markDraftDirty(false)
     if (!cwd) {
       queueMicrotask((): void => {
-        if (disposed) return
+        if (!isCurrent()) return
         setModels([])
         setSelection(null)
         setFixed(false)
@@ -158,18 +165,13 @@ export function useL2ProjectModelDefaultSettings(
 
     const cached = readL2ProjectModelDefaultCache(cwd)
     queueMicrotask((): void => {
-      if (disposed) return
+      if (!isCurrent()) return
       setProjectError(null)
       // 同一项目重试或后台刷新时，缓存和远端结果都不能替换未保存草稿。
       if (!projectDraftDirtyRef.current) {
         if (cached) {
           applyProjectResult(cached)
           setLoadedCwd(cwd)
-        } else {
-          setModels([])
-          setSelection(null)
-          setFixed(false)
-          setLoadedCwd(null)
         }
       }
       setProjectLoading(!cached && !projectDraftDirtyRef.current)
@@ -179,17 +181,17 @@ export function useL2ProjectModelDefaultSettings(
     void (async (): Promise<void> => {
       try {
         const result = await biz.getProjectDefault(cwd)
-        if (disposed) return
+        if (!isCurrent()) return
         if (!projectDraftDirtyRef.current) applyProjectResult(result)
         setLoadedCwd(cwd)
       } catch (error) {
-        if (!disposed) {
+        if (isCurrent()) {
           const message = error instanceof Error ? error.message : t('projectDefaultFailed')
           console.warn('[Pi Desk][ProjectModelDefault] 读取项目模型配置失败', { cwd, message })
           setProjectError(message)
         }
       } finally {
-        if (!disposed) {
+        if (isCurrent()) {
           setProjectLoading(false)
           setProjectRefreshing(false)
         }
@@ -213,16 +215,20 @@ export function useL2ProjectModelDefaultSettings(
     ) {
       return false
     }
+    projectRequestRef.current += 1
+    setProjectRefreshing(true)
     setCwd(nextCwd)
     return true
   }
 
   function changeFixed(value: boolean): void {
+    if (!projectReady || saving) return
     markDraftDirty(true)
     setFixed(value)
   }
 
   function selectModel(model: L2ModelOption): void {
+    if (!projectReady || saving) return
     markDraftDirty(true)
     setSelection({
       provider: model.provider,
@@ -232,6 +238,7 @@ export function useL2ProjectModelDefaultSettings(
   }
 
   function selectThinking(value: string): void {
+    if (!projectReady || saving) return
     const model = models.find(
       (item): boolean => item.provider === selection?.provider && item.modelId === selection.modelId
     )
@@ -242,6 +249,7 @@ export function useL2ProjectModelDefaultSettings(
   }
 
   function applyPreset(preset: L2ModelPreset): void {
+    if (!projectReady || saving) return
     markDraftDirty(true)
     setSelection({
       provider: preset.provider,
@@ -255,6 +263,8 @@ export function useL2ProjectModelDefaultSettings(
   }
 
   function retryProject(): void {
+    projectRequestRef.current += 1
+    setProjectRefreshing(true)
     setProjectAttempt((attempt): number => attempt + 1)
   }
 
@@ -289,6 +299,7 @@ export function useL2ProjectModelDefaultSettings(
   return {
     directories,
     cwd,
+    loadedCwd,
     models,
     selection,
     fixed,

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

@@ -39,7 +39,6 @@ import {
 import { cn } from '@client/l4_foundation/lib/l4-utils'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
 import { L4BrandIcon } from '@client/l4_foundation/ui/l4-brand-icon'
-import { useL4WindowReveal } from '@client/l4_foundation/ui/l4-window-reveal'
 import {
   Collapsible,
   CollapsibleContent,
@@ -241,8 +240,6 @@ export function L2Settings({
     activeSection.startsWith('plugin:') && !activePluginPage ? 'appearance' : activeSection
   const activeBuiltinSection = SETTINGS_SECTIONS.find((section) => section.id === effectiveSection)
   const ActiveBuiltinIcon = activeBuiltinSection?.icon
-  const contentRef = useRef<HTMLDivElement>(null)
-  useL4WindowReveal(contentRef, open && !activePluginPage ? effectiveSection : null)
 
   const runAfterGuard = useCallback(async (action: () => void): Promise<void> => {
     if (guardPendingRef.current) return
@@ -475,7 +472,7 @@ export function L2Settings({
               />
             </div>
           ) : effectiveSection === 'skills' ? (
-            <div ref={contentRef} className="min-h-0 flex-1 overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-hidden">
               {open && (
                 <L2SkillsSettings
                   projects={skillProjects}
@@ -485,7 +482,7 @@ export function L2Settings({
               )}
             </div>
           ) : effectiveSection === 'mcp-settings' ? (
-            <div ref={contentRef} className="min-h-0 min-w-0 flex-1 overflow-hidden">
+            <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {open && (
                 <ExternalSettingsSection
                   render={renderMcpSettings}
@@ -494,7 +491,7 @@ export function L2Settings({
               )}
             </div>
           ) : effectiveSection === 'capability-modes' ? (
-            <div ref={contentRef} className="min-h-0 min-w-0 flex-1 overflow-hidden">
+            <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {open && (
                 <ExternalSettingsSection
                   render={renderCapabilityModesSettings}
@@ -503,7 +500,7 @@ export function L2Settings({
               )}
             </div>
           ) : effectiveSection === 'models' ? (
-            <div ref={contentRef} className="min-h-0 flex-1 overflow-hidden">
+            <div className="min-h-0 flex-1 overflow-hidden">
               {open && (
                 <L2ModelSettingsView
                   connectionReady={connectionReady}
@@ -513,12 +510,10 @@ export function L2Settings({
               )}
             </div>
           ) : effectiveSection === 'plugins' ? (
-            <div ref={contentRef} className="min-h-0 flex-1 overflow-hidden">
-              {renderPluginManagement()}
-            </div>
+            <div className="min-h-0 flex-1 overflow-hidden">{renderPluginManagement()}</div>
           ) : (
             <L4AppDialogBody className="min-w-0 max-h-none">
-              <div ref={contentRef} className="p-4 sm:p-6">
+              <div className="p-4 sm:p-6">
                 {effectiveSection === 'appearance' ? (
                   <L2AppearanceSettings />
                 ) : effectiveSection === 'habits' ? (

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

@@ -76,7 +76,8 @@ export function L2ProjectModelDefaultSettings({
       description: model.provider
     })
   )
-  const formDisabled = state.projectLoading || state.projectRefreshing || state.saving
+  const formDisabled = !state.projectReady || state.saving
+  const displayedCwd = state.loadedCwd ?? state.cwd
 
   async function selectProject(cwd: string): Promise<void> {
     if (await state.selectProject(cwd)) setMobileDetail(true)
@@ -198,17 +199,19 @@ export function L2ProjectModelDefaultSettings({
               <div className="pi-desk-chat-scrollbar min-h-0 flex-1 overflow-y-auto p-4 @[48rem]/project-default:p-6">
                 <div className="max-w-[40rem] space-y-6">
                   <header className="space-y-1">
-                    <h3 className="break-all text-lg font-semibold">{projectName(state.cwd)}</h3>
-                    <p className="break-all text-sm text-muted-foreground">{state.cwd}</p>
-                    {state.projectLoading && !state.projectReady ? (
-                      <p
-                        role="status"
-                        className="flex items-center gap-2 text-xs text-muted-foreground"
-                      >
-                        <LoaderCircleIcon aria-hidden="true" className="size-3.5 animate-spin" />
-                        {t('projectLoading')}
-                      </p>
-                    ) : null}
+                    <h3 className="flex items-center gap-2 text-lg font-semibold">
+                      <span className="min-w-0 break-all">{projectName(displayedCwd)}</span>
+                      <span className="inline-flex size-4 shrink-0">
+                        {!state.projectReady && !state.projectError && (
+                          <LoaderCircleIcon
+                            role="status"
+                            aria-label={t('projectLoading')}
+                            className="size-4 animate-spin text-muted-foreground"
+                          />
+                        )}
+                      </span>
+                    </h3>
+                    <p className="break-all text-sm text-muted-foreground">{displayedCwd}</p>
                   </header>
 
                   {state.projectError ? (
@@ -221,11 +224,13 @@ export function L2ProjectModelDefaultSettings({
                         variant="outline"
                         size="sm"
                         onClick={state.retryProject}
+                        disabled={state.projectLoading || state.projectRefreshing}
                       >
                         {t('retry', { ns: 'common' })}
                       </Button>
                     </div>
-                  ) : !state.projectReady ? null : (
+                  ) : null}
+                  {state.loadedCwd !== null ? (
                     <fieldset disabled={formDisabled} className="min-w-0 space-y-6">
                       <div className="space-y-1">
                         <p className="text-sm font-medium">{t('projectDefaultSource')}</p>
@@ -289,6 +294,7 @@ export function L2ProjectModelDefaultSettings({
                                       type="button"
                                       variant="outline"
                                       size="xs"
+                                      disabled={formDisabled}
                                       className="h-auto min-h-7 max-w-full whitespace-normal text-left"
                                       onClick={(): void => state.applyPreset(preset)}
                                     >
@@ -309,7 +315,7 @@ export function L2ProjectModelDefaultSettings({
                         </div>
                       ) : null}
                     </fieldset>
-                  )}
+                  ) : null}
                 </div>
               </div>
               <div className="shrink-0 border-t px-4 py-3 @[48rem]/project-default:px-6">

package/src/client/l2_biz/terminal/l2-terminal-workspace.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useSyncExternalStore, type ReactNode } from 'react'
+import { useCallback, useEffect, useSyncExternalStore, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LoaderCircleIcon, TerminalIcon } from 'lucide-react'
 import { preloadL4TerminalRenderer } from '@client/l4_foundation/terminal/l4-terminal-renderer'
@@ -51,12 +51,46 @@ export function L2TerminalWorkspace({
   } = useL2TerminalLayout(biz, mobile, expanded)
   const selected = state.terminals.find((item) => item.terminalId === state.selectedId)
   const chatHidden = expanded && (mobile || maximized)
+  const handleSystemBack = useCallback(
+    (event: KeyboardEvent): void => {
+      // Android 通过合成 Escape 请求返回；真实键盘 Escape 仍交给 Shell。
+      if (
+        !mobile ||
+        !expanded ||
+        event.isTrusted ||
+        event.key !== 'Escape' ||
+        event.defaultPrevented ||
+        event.isComposing ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey ||
+        root.current?.closest('[inert]')
+      )
+        return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      collapse()
+    },
+    [collapse, expanded, mobile, root]
+  )
+  useEffect(() => {
+    if (!mobile || !expanded) return
+    // 失焦时等菜单、弹窗先消费，再收起终端。
+    window.addEventListener('keydown', handleSystemBack)
+    return () => window.removeEventListener('keydown', handleSystemBack)
+  }, [expanded, handleSystemBack, mobile])
 
   return (
     <div
       ref={root}
       className={cn('relative flex size-full min-h-0 min-w-0', right ? 'flex-row' : 'flex-col')}
       data-terminal-dock={mobile ? 'mobile' : preferences.dock}
+      onKeyDownCapture={(event) => {
+        if (event.target instanceof Node && event.currentTarget.contains(event.target)) {
+          handleSystemBack(event.nativeEvent)
+        }
+      }}
     >
       <ResizablePanelGroup
         orientation={right ? 'horizontal' : 'vertical'}

package/src/client/l2_biz/workbench/file-workspace/l2-work-session-file-preview.tsx

@@ -36,6 +36,10 @@ export function L2WorkSessionFilePreview({
   useSyncExternalStore(runtime.subscribe, runtime.getRevision, runtime.getRevision)
   const workSession = workSessions.find((item) => item.workId === runtime.getExpandedWorkId())
   if (!workSession) return null
+  const closePreview = (): void => {
+    if (mobile) runtime.hideWindow(workSession.workId)
+    else runtime.collapseExpandedWindow()
+  }
   const switchToChat = (): void => {
     const input = document.querySelector<HTMLElement>(
       `[data-work-id="${CSS.escape(workSession.workId)}"] textarea`
@@ -49,7 +53,7 @@ export function L2WorkSessionFilePreview({
     <L4AppDialogRoot
       open
       onOpenChange={(open) => {
-        if (!open) runtime.collapseExpandedWindow()
+        if (!open) closePreview()
       }}
     >
       <L4AppDialogContent
@@ -103,7 +107,7 @@ export function L2WorkSessionFilePreview({
           onSwitchPane={switchToChat}
           onOpenTerminal={onOpenTerminal}
           onHide={() => runtime.hideWindow(workSession.workId)}
-          onExpand={() => runtime.collapseExpandedWindow()}
+          onExpand={closePreview}
         />
       </L4AppDialogContent>
     </L4AppDialogRoot>