@jetcrab/pi-desk 1.1.18-dev → 1.1.21

package/src/client/l2_biz/workbench/hooks/l2-workbench-chat-reload.ts

@@ -0,0 +1,42 @@
+'use client'
+
+import { useCallback, useMemo, useSyncExternalStore } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { L2WorkSessionListItem } from '@common/l2_biz/work-session/l2-work-session-contract'
+import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
+import type { L2WorkbenchChatRuntime } from '../l2-workbench-chat'
+
+export function useL2WorkbenchChatReload(
+  runtime: L2WorkbenchChatRuntime,
+  workSessions: readonly L2WorkSessionListItem[]
+): {
+  syncingWorkIds: readonly string[]
+  reload: (workSession: L2WorkSessionListItem) => void
+} {
+  const { t } = useTranslation('workbench')
+  const toast = useL4AppToast()
+  const getSyncing = useCallback(
+    (): string =>
+      JSON.stringify(
+        workSessions
+          .filter(
+            ({ workId, sessionId, branchId }) =>
+              runtime.getSourceState({ workId, sessionId, branchId }).syncStatus === 'syncing'
+          )
+          .map((session) => session.workId)
+      ),
+    [runtime, workSessions]
+  )
+  const syncing = useSyncExternalStore(runtime.subscribe, getSyncing, getSyncing)
+  const syncingWorkIds = useMemo((): string[] => JSON.parse(syncing), [syncing])
+  const reload = useCallback(
+    (session: L2WorkSessionListItem): void => {
+      const { workId, sessionId, branchId } = session
+      void runtime.reloadMessages({ workId, sessionId, branchId }).catch((cause: unknown) => {
+        toast.error(cause instanceof Error ? cause.message : t('reloadChatDataFailed'))
+      })
+    },
+    [runtime, t, toast]
+  )
+  return { syncingWorkIds, reload }
+}

package/src/client/l2_biz/workbench/hooks/l2-workbench-chat-viewport.ts

@@ -7,7 +7,8 @@ import {
   clearL3ConversationTailSpacer,
   findL3ConversationMessage,
   logL3ConversationScroll,
-  positionL3ConversationMessage
+  positionL3ConversationMessage,
+  refreshL3ConversationTailSpacer
 } from '@client/l3_modules/conversation/l3-conversation-viewport'
 import type { L2WorkbenchChatViewportSnapshot } from '../l2-workbench-chat'
 
@@ -252,25 +253,18 @@ export function L2WorkbenchChatViewportManager({
       const enterRunningAtBottom =
         entryPosition?.follow ?? (initializing && running && snapshot === null)
       const entryTarget = target
-      const positionEntry = (): void => {
-        stopScroll()
-        if (entryTarget) {
-          positionL3ConversationMessage(scrollElement, entryTarget, targetOffset, containsTail)
-        } else {
-          clearL3ConversationTailSpacer(scrollElement)
-        }
-        if (enterRunningAtBottom || !entryTarget) {
-          // 首屏懒布局展开后也在绘制前置底，不交给后续缓动收敛。
-          scrollElement.scrollTop = Math.max(
-            0,
-            scrollElement.scrollHeight - scrollElement.clientHeight
-          )
-        }
-        markProgrammaticScroll(state, scrollElement)
-        // 同步确立跟随，立即切走也不能丢失这个状态。
-        if (followAfterPosition || !entryTarget) void scrollToBottom({ animation: 'instant' })
+      stopScroll()
+      if (entryTarget) {
+        positionL3ConversationMessage(scrollElement, entryTarget, targetOffset, containsTail)
+      } else {
+        clearL3ConversationTailSpacer(scrollElement)
+      }
+      if (enterRunningAtBottom || !entryTarget) {
+        scrollElement.scrollTop = Math.max(0, state.calculatedTargetScrollTop)
       }
-      positionEntry()
+      markProgrammaticScroll(state, scrollElement)
+      // 同步确立跟随，立即切走也不能丢失这个状态。
+      if (followAfterPosition || !entryTarget) void scrollToBottom({ animation: 'instant' })
 
       logL3ConversationScroll('viewport:initialize:positioned', scrollElement, {
         initializing,
@@ -288,7 +282,18 @@ export function L2WorkbenchChatViewportManager({
           anchor: anchor ? { messageId: anchor, offset: targetOffset } : null,
           follow: followAfterPosition || target === null
         }
-        const observer = new ResizeObserver(positionEntry)
+        const observer = new ResizeObserver(() => {
+          // 懒布局与拖宽只校正既定目标，不再重走提问定位、停止和启动跟随。
+          if (followAfterPosition || !entryTarget) {
+            refreshL3ConversationTailSpacer(scrollElement)
+            scrollElement.scrollTop = Math.max(0, state.calculatedTargetScrollTop)
+          } else {
+            // 内容收缩时库可能自动恢复跟随；首屏阅读锚点仍优先。
+            if (state.isAtBottom) stopScroll()
+            positionL3ConversationMessage(scrollElement, entryTarget, targetOffset, containsTail)
+          }
+          markProgrammaticScroll(state, scrollElement)
+        })
         observer.observe(scrollElement)
         if (scrollElement.firstElementChild) observer.observe(scrollElement.firstElementChild)
         const interactionElement = scrollElement.parentElement!
@@ -356,13 +361,15 @@ export function L2WorkbenchChatViewportManager({
           isAtBottom: state.isAtBottom,
           escapedFromLock: state.escapedFromLock
         })
+        // 新视图会在旧视图清理前读取快照，恢复跟随时就释放旧阅读位置。
+        onClearSnapshot()
         void scrollToBottom({ animation: 'instant' })
       }
     }
 
     scrollElement.addEventListener('scroll', resumeFollowAtBottom, { passive: true })
     return () => scrollElement.removeEventListener('scroll', resumeFollowAtBottom)
-  }, [latestUserAnchor, scrollRef, scrollToBottom, state, visible])
+  }, [latestUserAnchor, onClearSnapshot, scrollRef, scrollToBottom, state, visible])
 
   useLayoutEffect(() => {
     if (!running || !visible) return

package/src/client/l2_biz/workbench/l2-work-session-columns.module.css

@@ -1,3 +1,35 @@
+.chatContainer {
+  container-name: work-session-chat;
+  container-type: inline-size;
+}
+
+.headerActionIcon {
+  display: none;
+}
+
+@container work-session-chat (width < 28rem) {
+  .sessionHeader {
+    gap: 0.5rem;
+  }
+
+  .headerAction {
+    width: 1.75rem;
+    height: 1.75rem;
+    min-height: 1.75rem;
+    gap: 0;
+    border-radius: 0.375rem;
+    padding: 0;
+  }
+
+  .headerActionLabel {
+    display: none;
+  }
+
+  .headerActionIcon {
+    display: block;
+  }
+}
+
 .collapsedText {
   overflow: hidden;
   text-overflow: ellipsis;

package/src/client/l2_biz/workbench/l2-work-session-columns.tsx

@@ -54,8 +54,10 @@ import { useL2WorkSessionColumnCapacity } from './hooks/l2-work-session-column-c
 import type { L2FileWorkspaceRuntime } from './file-workspace/l2-file-workspace-runtime'
 import { L2WorkSessionFileLayout } from './file-workspace/l2-work-session-file-layout'
 import { Button, buttonVariants } from '@client/l4_foundation/ui/shadcn/button'
+import type { L2WorkbenchPluginSessionSlots } from './l2-workbench-plugin-slots'
 
-interface L2WorkSessionColumnsProps extends L2WorkbenchComposerSlots {
+interface L2WorkSessionColumnsProps
+  extends L2WorkbenchComposerSlots, L2WorkbenchPluginSessionSlots {
   onOpenSettings?: (target?: 'model-presets') => void
   workSessions: readonly L2WorkSessionListItem[]
   primaryWorkId: string | null
@@ -126,7 +128,7 @@ function SidebarToggle({
   )
 }
 
-interface WorkSessionColumnProps extends L2WorkbenchComposerSlots {
+interface WorkSessionColumnProps extends L2WorkbenchComposerSlots, L2WorkbenchPluginSessionSlots {
   onOpenSettings?: (target?: 'model-presets') => void
   workSession: L2WorkSessionListItem
   fixed: boolean
@@ -181,6 +183,8 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
   renderTaskSummary,
   renderTaskMenu,
   renderPluginComposerPanel,
+  renderPluginWidgets,
+  renderPluginSessionHeader,
   gitRuntime,
   invokePluginMethod,
   listPiCommands,
@@ -214,6 +218,34 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
   useSyncExternalStore(fileRuntime.subscribe, fileRuntime.getRevision, fileRuntime.getRevision)
   const fileWorkspace = fileRuntime.getWorkspace(workSession.workId)
   const fileCount = (fileWorkspace?.tabs.length ?? 0) + (fileWorkspace?.activeDiff ? 1 : 0)
+  const source = useMemo<L2ChatSource>(
+    () => ({
+      workId: workSession.workId,
+      sessionId: workSession.sessionId,
+      branchId: workSession.branchId
+    }),
+    [workSession.workId, workSession.sessionId, workSession.branchId]
+  )
+  const title = (
+    <div className="min-w-0">
+      <p
+        className={cn(
+          'truncate text-sm transition-colors duration-150 motion-reduce:transition-none',
+          focused ? 'font-semibold text-foreground' : 'font-medium text-muted-foreground'
+        )}
+        title={workSession.projectName}
+      >
+        {workSession.projectName}
+      </p>
+      <p
+        className="truncate text-xs text-muted-foreground"
+        data-testid="session-header-title"
+        title={workSession.sessionTitle ?? t('newSession')}
+      >
+        {workSession.sessionTitle ?? t('newSession')}
+      </p>
+    </div>
+  )
 
   useEffect(() => {
     const column = columnRef.current
@@ -259,23 +291,18 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
         onOpenSidebar={() => onOpenFileSidebar(workSession.workId)}
       >
         {(chatVisible) => (
-          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
-            <header className="flex min-h-14 items-center gap-3 px-3">
+          <div className={cn(styles.chatContainer, 'flex h-full min-h-0 min-w-0 flex-1 flex-col')}>
+            <header
+              className={cn(styles.sessionHeader, 'flex min-h-14 shrink-0 items-center gap-3 px-3')}
+              data-testid="session-header"
+            >
               {fixed && !mobile ? null : (
                 <SidebarToggle sidebarOpen={sidebarOpen} onToggle={onToggleSidebar} />
               )}
               <div className="min-w-0 flex-1">
-                <p
-                  className={cn(
-                    'truncate text-sm transition-colors duration-150 motion-reduce:transition-none',
-                    focused ? 'font-semibold text-foreground' : 'font-medium text-muted-foreground'
-                  )}
-                >
-                  {workSession.projectName}
-                </p>
-                <p className="truncate text-xs text-muted-foreground">
-                  {workSession.sessionTitle ?? t('newSession')}
-                </p>
+                {chatVisible && contentActive
+                  ? renderPluginSessionHeader({ source, title })
+                  : title}
               </div>
               <div className="-mr-1 flex shrink-0 items-center">
                 {initializationIssue.error ? (
@@ -292,13 +319,17 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
                 {fileCount > 0 ? (
                   <Button
                     variant="ghost"
+                    className={styles.headerAction}
                     data-testid="session-files-entry"
                     aria-label={t('openSessionFiles')}
+                    title={t('sessionFiles', { count: fileCount })}
                     aria-pressed={fileWorkspace?.windowOpen ?? false}
                     onClick={() => fileRuntime.showWindow(workSession.workId)}
                   >
                     <FilesIcon className="size-4" />
-                    {t('sessionFiles', { count: fileCount })}
+                    <span className={styles.headerActionLabel}>
+                      {t('sessionFiles', { count: fileCount })}
+                    </span>
                   </Button>
                 ) : null}
                 {onUnpinWorkSession ? (
@@ -338,6 +369,8 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
                 renderTaskSummary={renderTaskSummary}
                 renderTaskMenu={renderTaskMenu}
                 renderPluginComposerPanel={renderPluginComposerPanel}
+                renderPluginWidgets={renderPluginWidgets}
+                widgetsVisible={chatVisible && contentActive}
                 gitRuntime={gitRuntime}
                 active={composerActive}
                 mobile={mobile}
@@ -473,6 +506,8 @@ export function L2WorkSessionColumns({
   renderTaskSummary,
   renderTaskMenu,
   renderPluginComposerPanel,
+  renderPluginWidgets,
+  renderPluginSessionHeader,
   gitRuntime,
   invokePluginMethod,
   listPiCommands,
@@ -660,6 +695,8 @@ export function L2WorkSessionColumns({
               renderTaskSummary={renderTaskSummary}
               renderTaskMenu={renderTaskMenu}
               renderPluginComposerPanel={renderPluginComposerPanel}
+              renderPluginWidgets={renderPluginWidgets}
+              renderPluginSessionHeader={renderPluginSessionHeader}
               gitRuntime={gitRuntime}
               invokePluginMethod={invokePluginMethod}
               listPiCommands={listPiCommands}
@@ -758,6 +795,8 @@ export function L2WorkSessionColumns({
                   renderTaskSummary={renderTaskSummary}
                   renderTaskMenu={renderTaskMenu}
                   renderPluginComposerPanel={renderPluginComposerPanel}
+                  renderPluginWidgets={renderPluginWidgets}
+                  renderPluginSessionHeader={renderPluginSessionHeader}
                   gitRuntime={gitRuntime}
                   invokePluginMethod={invokePluginMethod}
                   listPiCommands={listPiCommands}

package/src/client/l2_biz/workbench/l2-work-session-sidebar.tsx

@@ -21,6 +21,7 @@ import {
   EllipsisIcon,
   FolderTreeIcon,
   FolderSearchIcon,
+  ExternalLinkIcon,
   LoaderCircleIcon,
   MessageSquareTextIcon,
   PinIcon,
@@ -131,6 +132,7 @@ interface L2WorkSessionSidebarProps {
   onModeChange: (mode: L2WorkSessionSidebarMode) => void
   onRefreshFiles: () => void
   onPreviewProject: () => void
+  onPreviewProjectWindow: () => void
   onOpenTerminal: () => void
   onCreate: () => void
   onReplace: () => void
@@ -140,6 +142,8 @@ interface L2WorkSessionSidebarProps {
   onTogglePin: (workId: string) => void
   onDelete: (workId: string) => void
   onRename: (workSession: L2WorkSessionListItem) => void
+  syncingWorkIds: readonly string[]
+  onReloadChat: (workSession: L2WorkSessionListItem) => void
   onArrangementChange: (arrangement: L2WorkSessionArrangement, movedWorkId: string) => void
 }
 
@@ -343,7 +347,9 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
   onSelect,
   onTogglePin,
   onDelete,
-  onRename
+  onRename,
+  syncing,
+  onReloadChat
 }: {
   workSession: L2WorkSessionListItem
   mobile: boolean
@@ -357,6 +363,8 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
   onTogglePin: (workId: string) => void
   onDelete: (workId: string) => void
   onRename: (workSession: L2WorkSessionListItem) => void
+  syncing: boolean
+  onReloadChat: (workSession: L2WorkSessionListItem) => void
 }): React.JSX.Element {
   const suppressTouchClick = useRef(false)
   const lastPointer = useRef('')
@@ -606,6 +614,14 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
           <PencilIcon />
           {t('renameSessionTitle')}
         </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`work-session-reload-chat-${workSession.workId}`}
+          disabled={actionsDisabled || deleting || syncing}
+          onClick={() => onReloadChat(workSession)}
+        >
+          {syncing ? <LoaderCircleIcon className="animate-spin" /> : <RefreshCwIcon />}
+          {t('reloadChatData')}
+        </ContextMenuItem>
         <ContextMenuItem
           data-testid={`work-session-copy-project-path-${workSession.workId}`}
           onClick={copyProjectPath}
@@ -666,6 +682,7 @@ function L2WorkSessionSidebarComponent({
   onModeChange,
   onRefreshFiles,
   onPreviewProject,
+  onPreviewProjectWindow,
   onOpenTerminal,
   onCreate,
   onReplace,
@@ -675,6 +692,8 @@ function L2WorkSessionSidebarComponent({
   onTogglePin,
   onDelete,
   onRename,
+  syncingWorkIds,
+  onReloadChat,
   onArrangementChange
 }: L2WorkSessionSidebarProps): React.JSX.Element {
   const { t } = useTranslation('workbench')
@@ -753,14 +772,6 @@ function L2WorkSessionSidebarComponent({
         ]
       : mode === 'files'
         ? [
-            {
-              key: 'new-terminal',
-              label: t('newTerminal'),
-              disabled,
-              icon: <TerminalIcon />,
-              testId: 'project-files-terminal-open',
-              onSelect: onOpenTerminal
-            },
             {
               key: 'preview-project',
               label: t('projectPreview'),
@@ -769,6 +780,22 @@ function L2WorkSessionSidebarComponent({
               testId: 'project-preview-open',
               onSelect: onPreviewProject
             },
+            {
+              key: 'preview-project-window',
+              label: t('projectPreviewWindow'),
+              disabled: !canBrowseFiles,
+              icon: <ExternalLinkIcon />,
+              testId: 'project-preview-window-open',
+              onSelect: onPreviewProjectWindow
+            },
+            {
+              key: 'new-terminal',
+              label: t('newTerminal'),
+              disabled,
+              icon: <TerminalIcon />,
+              testId: 'project-files-terminal-open',
+              onSelect: onOpenTerminal
+            },
             {
               key: 'refresh-files',
               label: t('refreshFiles'),
@@ -888,6 +915,8 @@ function L2WorkSessionSidebarComponent({
         onTogglePin={onTogglePin}
         onDelete={onDelete}
         onRename={onRename}
+        syncing={syncingWorkIds.includes(workSession.workId)}
+        onReloadChat={onReloadChat}
       />
     )
   })

package/src/client/l2_biz/workbench/l2-workbench-chat-composer.tsx

@@ -89,6 +89,7 @@ import type { L3CapabilityModeNames } from '@common/l3_modules/capability-modes/
 import { L2WorkbenchCapabilityModePicker } from './l2-workbench-capability-mode-picker'
 import { useL2NativeUi } from './native-ui/l2-native-ui'
 import { L2NativeUiExtras, L2NativeUiQuestions } from './native-ui/l2-native-ui-view'
+import type { L2WorkbenchPluginWidgetSlots } from './l2-workbench-plugin-slots'
 
 interface L2WorkbenchTaskSlotInput {
   source: L2ChatSource
@@ -107,13 +108,15 @@ export interface L2WorkbenchComposerSlots {
   }) => ReactNode
 }
 
-interface L2WorkbenchChatComposerProps extends L2WorkbenchComposerSlots {
+interface L2WorkbenchChatComposerProps
+  extends L2WorkbenchComposerSlots, L2WorkbenchPluginWidgetSlots {
   onOpenSettings?: (target?: 'model-presets') => void
   workSession: L2WorkSessionListItem
   chatRuntime: L2WorkbenchChatRuntime
   inputRuntime: L2WorkbenchChatInputRuntime
   gitRuntime: L2GitWorkspaceRuntime
   active: boolean
+  widgetsVisible: boolean
   mobile: boolean
   invokePluginMethod: L2WorkbenchBiz['invokePluginMethod']
   listPiCommands: L2WorkbenchBiz['listPiCommands']
@@ -161,8 +164,10 @@ function L2WorkbenchChatComposerComponent({
   renderTaskSummary,
   renderTaskMenu,
   renderPluginComposerPanel,
+  renderPluginWidgets,
   gitRuntime,
   active,
+  widgetsVisible,
   mobile,
   invokePluginMethod,
   listPiCommands,
@@ -633,6 +638,9 @@ function L2WorkbenchChatComposerComponent({
         <p className="mb-1 px-1 text-xs text-muted-foreground">{t('nativeUiComposer')}</p>
       ) : null}
 
+      {widgetsVisible && !basicChat
+        ? renderPluginWidgets({ source, placement: 'aboveEditor' })
+        : null}
       <form
         aria-label={
           workSessionRunning
@@ -1021,6 +1029,9 @@ function L2WorkbenchChatComposerComponent({
           </PromptInputFooter>
         </InputGroup>
       </form>
+      {widgetsVisible && !basicChat
+        ? renderPluginWidgets({ source, placement: 'belowEditor' })
+        : null}
       <L2NativeUiExtras snapshot={nativeUi.state.snapshot} placement="belowEditor" />
 
       {activePluginPanel &&

package/src/client/l2_biz/workbench/l2-workbench-chat.ts

@@ -73,6 +73,7 @@ export interface L2WorkbenchChatRuntime {
   ) => Promise<L2ChatMessageDetail>
   compact: (source: L2ChatSource) => Promise<void>
   reload: (source: L2ChatSource, mode?: L2ChatMode) => Promise<void>
+  reloadMessages: (source: L2ChatSource) => Promise<void>
   setPresentation: (source: L2ChatSource, mode: L2ChatMode) => Promise<void>
   disconnected: () => void
   dispose: () => void
@@ -611,6 +612,50 @@ export function createL2WorkbenchChatRuntime(
       )
     },
 
+    async reloadMessages(sourceInput): Promise<void> {
+      const source = L2ChatSourceSchema.parse(sourceInput)
+      const key = sourceKey(source)
+      const workSession = currentWorkSessions.get(source.workId)
+      if (!workSession || !sameSource(sourceFor(workSession), source)) {
+        throw new Error(l2WorkbenchText('reloadChatSourceChanged'))
+      }
+      const previous = statesBySource.get(key)
+      if (
+        !workSessionsReady ||
+        disposed ||
+        pendingSyncs.has(key) ||
+        previous?.syncStatus === 'syncing'
+      ) {
+        throw new Error(l2WorkbenchText('sourceSyncing'))
+      }
+      const epoch = connectionEpoch
+      const queue = eventQueues.get(key)
+      const previousSyncEpoch = queue?.syncEpoch ?? null
+      if (queue) queue.syncEpoch = null
+      subscriptionPool.set(source.workId, source)
+      setSourceState(source, { ...(previous ?? EMPTY_CHAT_SOURCE_STATE), syncStatus: 'syncing' })
+      try {
+        // 重拉期间继续接收旧基线上的实时消息，失败时无需丢弃缓存或补偿重放。
+        await appSocket.request(L2ChatSocketContracts.subscribe, {
+          subscriptions: [{ source, cursor: null }]
+        })
+      } catch (error) {
+        if (!disposed && epoch === connectionEpoch && isCurrentAndSubscribed(source)) {
+          if (queue && eventQueues.get(key) === queue) queue.syncEpoch = previousSyncEpoch
+          const current = statesBySource.get(key)
+          if (current)
+            setSourceState(source, { ...current, syncStatus: previous?.syncStatus ?? 'loading' })
+        }
+        console.error('[Pi Desk][WorkbenchChat] 重新加载聊天数据失败，保留已有缓存', {
+          workId: source.workId,
+          sessionId: source.sessionId,
+          branchId: source.branchId,
+          message: error instanceof Error ? error.message : String(error)
+        })
+        throw error
+      }
+    },
+
     async setPresentation(sourceInput, mode): Promise<void> {
       const source = L2ChatSourceSchema.parse(sourceInput)
       const key = sourceKey(source)

package/src/client/l2_biz/workbench/l2-workbench-initialization-notice.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { CheckIcon, CopyIcon, LoaderCircleIcon, RefreshCwIcon } from 'lucide-react'
+import { CheckIcon, CircleAlertIcon, CopyIcon, LoaderCircleIcon, RefreshCwIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
+import styles from './l2-work-session-columns.module.css'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
 import {
   Popover,
@@ -36,11 +38,14 @@ export function L2WorkbenchInitializationNotice({
           <Button
             variant="ghost"
             size="sm"
-            className="text-xs text-destructive hover:text-destructive"
+            aria-label={t('initializationDegraded')}
+            title={t('initializationDegraded')}
+            className={cn(styles.headerAction, 'text-xs text-destructive hover:text-destructive')}
           />
         }
       >
-        {t('initializationDegraded')}
+        <CircleAlertIcon className={cn(styles.headerActionIcon, 'size-4')} aria-hidden="true" />
+        <span className={styles.headerActionLabel}>{t('initializationDegraded')}</span>
       </PopoverTrigger>
       <PopoverContent
         align="end"

package/src/client/l2_biz/workbench/l2-workbench-plugin-slots.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+import type { PluginSource } from '@jetcrab/pi-desk-sdk/browser'
+
+export interface L2WorkbenchPluginWidgetSlots {
+  renderPluginWidgets: (input: {
+    source: PluginSource
+    placement: 'aboveEditor' | 'belowEditor'
+  }) => ReactNode
+}
+
+export interface L2WorkbenchPluginSessionSlots extends L2WorkbenchPluginWidgetSlots {
+  renderPluginSessionHeader: (input: { source: PluginSource; title: ReactNode }) => ReactNode
+}

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

@@ -66,6 +66,7 @@ import { L4_APP_VERSION } from '@client/l4_foundation/l4-app-info'
 import { L2WorkbenchSidebarLayout } from './l2-workbench-sidebar-layout'
 import type { L4PluginBrowserContributionDescriptor } from '@client/l4_foundation/plugin-host/l4-plugin-host-runtime'
 import type { L2WorkbenchComposerSlots } from './l2-workbench-chat-composer'
+import type { L2WorkbenchPluginSessionSlots } from './l2-workbench-plugin-slots'
 import { createL2WorkbenchBiz } from './l2-workbench-biz'
 import { createL2WorkbenchVersionRefresh } from './l2-workbench-version-refresh'
 import { L2FileWorkspaceRuntime } from './file-workspace/l2-file-workspace-runtime'
@@ -112,6 +113,7 @@ import {
 } from './l2-work-session-sidebar-order'
 import { useL2WorkbenchBranchPicker } from './hooks/l2-workbench-branch-picker'
 import { useL2WorkSessionRename } from './hooks/l2-work-session-rename'
+import { useL2WorkbenchChatReload } from './hooks/l2-workbench-chat-reload'
 import { L2WorkSessionRenameDialog } from './views/l2-work-session-rename-dialog'
 import { useL2WorkbenchPluginHealth } from './hooks/l2-workbench-plugin-health'
 import { useL2WorkbenchSessionHistory } from './hooks/l2-workbench-session-history'
@@ -171,10 +173,11 @@ function WorkbenchDisplaySlot<Input>({
   return render(input)
 }
 
-interface L2WorkbenchProps extends L2WorkbenchComposerSlots {
+interface L2WorkbenchProps extends L2WorkbenchComposerSlots, L2WorkbenchPluginSessionSlots {
   onTerminalReady: () => Promise<void>
   onTerminalDisconnected: () => void
   onOpenTerminal: (cwd?: string) => Promise<void>
+  onOpenProjectPreviewWindow: (cwd: string) => void
   renderTerminalWorkspace: (input: { mobile: boolean; children: ReactNode }) => ReactNode
   listPluginManagement: () => Promise<L2PluginManagementSnapshot>
   subscribePluginManagementChanges: (listener: () => void) => () => void
@@ -220,6 +223,7 @@ export function L2Workbench({
   onTerminalReady,
   onTerminalDisconnected,
   onOpenTerminal,
+  onOpenProjectPreviewWindow,
   renderTerminalWorkspace,
   listPluginManagement,
   subscribePluginManagementChanges,
@@ -233,7 +237,9 @@ export function L2Workbench({
   renderSettings,
   renderTaskSummary,
   renderTaskMenu,
-  renderPluginComposerPanel
+  renderPluginComposerPanel,
+  renderPluginWidgets,
+  renderPluginSessionHeader
 }: L2WorkbenchProps): React.JSX.Element {
   const { t } = useTranslation('workbench')
   const { clientId, appSocket } = useL4AppSocket()
@@ -370,6 +376,7 @@ export function L2Workbench({
       createL2WorkbenchChatRuntime(appSocket, (input) => workbenchBiz.getChatMessageDetail(input)),
     [appSocket, workbenchBiz]
   )
+  const chatReload = useL2WorkbenchChatReload(chatRuntime, workSessions)
   const chatInputRuntime = useMemo(
     () => createL2WorkbenchChatInputRuntime(workbenchBiz, chatRuntime),
     [chatRuntime, workbenchBiz]
@@ -1915,6 +1922,12 @@ export function L2Workbench({
         fileRuntime.collapseExpandedWindow()
         pluginHost.previewProject(activeWorkId ? fileRuntime.getDirectory(activeWorkId) : activeCwd)
       }}
+      onPreviewProjectWindow={() => {
+        if (!activeCwd) return
+        onOpenProjectPreviewWindow(
+          activeWorkId ? fileRuntime.getDirectory(activeWorkId) : activeCwd
+        )
+      }}
       onOpenTerminal={() => {
         closeMobileDrawer()
         fileRuntime.collapseExpandedWindow()
@@ -1928,6 +1941,8 @@ export function L2Workbench({
       onTogglePin={togglePinnedWorkSession}
       onDelete={requestDeleteWorkSession}
       onRename={renameSession.show}
+      syncingWorkIds={chatReload.syncingWorkIds}
+      onReloadChat={chatReload.reload}
       onArrangementChange={requestArrangementUpdate}
     />
   )
@@ -1969,6 +1984,8 @@ export function L2Workbench({
           renderTaskSummary={renderTaskSummary}
           renderTaskMenu={renderTaskMenu}
           renderPluginComposerPanel={renderPluginComposerPanel}
+          renderPluginWidgets={renderPluginWidgets}
+          renderPluginSessionHeader={renderPluginSessionHeader}
           gitRuntime={gitRuntime}
           invokePluginMethod={workbenchBiz.invokePluginMethod}
           listPiCommands={workbenchBiz.listPiCommands}