@jetcrab/pi-desk 1.1.12 → 1.1.16-dev

package/src/client/l2_biz/workbench/file-workspace/l2-plugin-standalone-file-preview.tsx

@@ -7,7 +7,12 @@ import type { PluginSource } from '@jetcrab/pi-desk-sdk/browser'
 import type { L2WorkSessionFileGetResponse } from '@common/l2_biz/work-session/l2-work-session-file-contract'
 import { createL4Base64ImageBlob } from '@client/l4_foundation/media/l4-base64-image'
 import { readL3ImagePreviewMode } from '@client/l3_modules/preferences/l3-work-session-file-preferences'
-import { L4CodePreview } from '@client/l4_foundation/ui/code/l4-code-preview'
+import {
+  L4CodePreview,
+  type L4CodePreviewState
+} from '@client/l4_foundation/ui/code/l4-code-preview'
+import { L3MarkdownPreview } from '@client/l3_modules/project-files/l3-markdown-preview'
+import { getL3ProjectTextPreviewKind } from '@client/l3_modules/project-files/l3-project-text-preview'
 import {
   L4AppDialogContent,
   L4AppDialogRoot,
@@ -56,7 +61,14 @@ export function L2PluginStandaloneFilePreview({
   onClose: () => void
 }): React.JSX.Element | null {
   const { t } = useTranslation('workbench')
+  const { t: filesT } = useTranslation('projectFiles')
   const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [view, setView] = useState<{ mode: 'preview' | 'source'; scrollTop: number }>({
+    mode: 'preview',
+    scrollTop: 0
+  })
+  const previewScrollTop = useRef(0)
+  const [editorState, setEditorState] = useState<L4CodePreviewState | null>(null)
   const [retry, setRetry] = useState(0)
   const [document, setDocument] = useState<StandaloneFileDocument>(() => {
     const url =
@@ -129,7 +141,7 @@ export function L2PluginStandaloneFilePreview({
 
   if (!target) return null
   const path = target.imagePaths?.[imageIndex] ?? target.path
-  const isHtml = /\.html?$/i.test(path)
+  const previewKind = getL3ProjectTextPreviewKind(path)
   return (
     <L4AppDialogRoot
       open
@@ -150,8 +162,8 @@ export function L2PluginStandaloneFilePreview({
           className="flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-background"
           aria-label={t('standaloneViewer', { name: target.projectName })}
         >
-          <header className="flex min-h-14 shrink-0 items-center border-b pl-3 pr-14 pt-[env(safe-area-inset-top)]">
-            <div className="min-w-0">
+          <header className="flex min-h-14 shrink-0 items-center gap-3 border-b pl-3 pr-14 pt-[env(safe-area-inset-top)]">
+            <div className="min-w-0 flex-1">
               <p className="truncate text-sm font-semibold" title={fileName(path)}>
                 {fileName(path)}
               </p>
@@ -162,6 +174,23 @@ export function L2PluginStandaloneFilePreview({
                 {target.projectName} · {path}
               </p>
             </div>
+            {previewKind === 'markdown' && document.status === 'text' ? (
+              <div className="flex shrink-0" role="group" aria-label={filesT('markdownMode')}>
+                {(['preview', 'source'] as const).map((mode) => (
+                  <Button
+                    key={mode}
+                    size="sm"
+                    variant={view.mode === mode ? 'secondary' : 'ghost'}
+                    aria-pressed={view.mode === mode}
+                    onClick={() => {
+                      if (view.mode !== mode) setView({ mode, scrollTop: previewScrollTop.current })
+                    }}
+                  >
+                    {filesT(mode === 'preview' ? 'previewMode' : 'sourceMode')}
+                  </Button>
+                ))}
+              </div>
+            ) : null}
           </header>
           <div className="min-h-0 flex-1 overflow-hidden pb-[env(safe-area-inset-bottom)]">
             {target.imagePaths ? (
@@ -197,7 +226,16 @@ export function L2PluginStandaloneFilePreview({
                 slides={[{ src: document.objectUrl, alt: target.path }]}
                 ariaLabel={t('standaloneImage', { name: fileName(target.path) })}
               />
-            ) : isHtml ? (
+            ) : previewKind === 'markdown' && view.mode === 'preview' ? (
+              <L3MarkdownPreview
+                content={document.content}
+                label={filesT('markdownPreview', { name: path })}
+                savedScrollTop={view.scrollTop}
+                onScroll={(scrollTop) => {
+                  previewScrollTop.current = scrollTop
+                }}
+              />
+            ) : previewKind === 'html' ? (
               <iframe
                 ref={iframeRef}
                 className="block size-full border-0 bg-white"
@@ -210,8 +248,8 @@ export function L2PluginStandaloneFilePreview({
                 path={target.path}
                 content={document.content}
                 size={document.size}
-                savedState={null}
-                onSaveState={() => undefined}
+                savedState={editorState}
+                onSaveState={(_path, state) => setEditorState(state)}
                 onEscape={onClose}
               />
             )}

package/src/client/l2_biz/workbench/hooks/l2-work-session-rename.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { L2WorkSessionListItem } from '@common/l2_biz/work-session/l2-work-session-contract'
+import type { L2WorkbenchBiz } from '../l2-workbench-biz'
+
+interface L2WorkSessionRename {
+  open: boolean
+  title: string
+  saving: boolean
+  error: string | null
+  show: (workSession: L2WorkSessionListItem) => void
+  close: () => void
+  setTitle: (title: string) => void
+  save: () => Promise<void>
+}
+
+export function useL2WorkSessionRename(
+  biz: Pick<L2WorkbenchBiz, 'renameWorkSession'>,
+  disabled: boolean
+): L2WorkSessionRename {
+  const { t } = useTranslation('workbench')
+  const [target, setTarget] = useState<Pick<L2WorkSessionListItem, 'workId' | 'sessionId'> | null>(
+    null
+  )
+  const [title, setTitle] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const show = useCallback((workSession: L2WorkSessionListItem): void => {
+    setTarget({ workId: workSession.workId, sessionId: workSession.sessionId })
+    setTitle(workSession.sessionTitle ?? '')
+    setError(null)
+  }, [])
+
+  const close = (): void => {
+    if (!saving) setTarget(null)
+  }
+
+  const save = async (): Promise<void> => {
+    const trimmedTitle = title.trim()
+    if (!target || saving || disabled || !trimmedTitle) return
+    setSaving(true)
+    setError(null)
+    try {
+      await biz.renameWorkSession({ ...target, title: trimmedTitle })
+      setTarget(null)
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : t('renameSessionFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return { open: target !== null, title, saving, error, show, close, setTitle, save }
+}

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

@@ -16,7 +16,6 @@ import type { L2ChatSource } from '@common/l2_biz/chat/l2-chat-contract'
 import type { L3CapabilityModeNames } from '@common/l3_modules/capability-modes/l3-capability-modes-contract'
 import type { L2WorkSessionListItem } from '@common/l2_biz/work-session/l2-work-session-contract'
 import { cn } from '@client/l4_foundation/lib/l4-utils'
-import { useL4WindowReveal } from '@client/l4_foundation/ui/l4-window-reveal'
 import {
   ResizableHandle,
   ResizablePanel,
@@ -52,7 +51,6 @@ import {
 import styles from './l2-work-session-columns.module.css'
 import motionStyles from './l2-workbench-motion.module.css'
 import { useL2WorkSessionColumnCapacity } from './hooks/l2-work-session-column-capacity'
-import { useL2WorkSessionColumnMotion } from './hooks/l2-work-session-column-motion'
 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'
@@ -212,10 +210,6 @@ const WorkSessionColumn = memo(function WorkSessionColumn({
 }: WorkSessionColumnProps): React.JSX.Element {
   const { t } = useTranslation('workbench')
   const columnRef = useRef<HTMLElement>(null)
-  useL4WindowReveal(
-    columnRef,
-    `${workSession.workId}:${workSession.sessionId}:${workSession.branchId}`
-  )
   const initializationIssue = useL2WorkbenchInitializationIssue(workSession, chatRuntime)
   useSyncExternalStore(fileRuntime.subscribe, fileRuntime.getRevision, fileRuntime.getRevision)
   const fileWorkspace = fileRuntime.getWorkspace(workSession.workId)
@@ -566,11 +560,6 @@ export function L2WorkSessionColumns({
   const panelGroupRef = useGroupRef()
   const panelIdsJson = JSON.stringify(columnItems.map((item) => item.key))
   const columnModesKey = columnModes.map((mode) => (mode === 'expanded' ? 'e' : 'c')).join('')
-  useL2WorkSessionColumnMotion(
-    containerRef,
-    `${panelIdsJson}:${columnModesKey}:${primaryWorkId}`,
-    !mobile
-  )
 
   useLayoutEffect(() => {
     const panelIds = JSON.parse(panelIdsJson) as string[]

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

@@ -25,6 +25,7 @@ import {
   MessageSquareTextIcon,
   PinIcon,
   PinOffIcon,
+  PencilIcon,
   PlusIcon,
   RefreshCwIcon,
   Repeat2Icon,
@@ -43,7 +44,10 @@ import {
   useState,
   type ReactNode
 } from 'react'
-import type { BrowserContributionIcon } from '@jetcrab/pi-desk-sdk/browser'
+import type {
+  BrowserContributionIcon,
+  BrowserSessionSidebarHeaderAction
+} from '@jetcrab/pi-desk-sdk/browser'
 import type { L2WorkSessionListItem } from '@common/l2_biz/work-session/l2-work-session-contract'
 import type { L3AppNotification } from '@common/l3_modules/app-runtime/l3-app-runtime-contract'
 import { copyL4BrowserText } from '@client/l4_foundation/lib/l4-browser-clipboard'
@@ -108,6 +112,7 @@ interface L2WorkSessionSidebarProps {
   mobile: boolean
   fileBrowser: ReactNode
   pluginTabContent: ReactNode
+  pluginHeaderActions?: readonly BrowserSessionSidebarHeaderAction[]
   pluginSessionTabs: readonly L2SidebarPluginSessionTab[]
   fileRefreshLoading: boolean
   canBrowseFiles: boolean
@@ -134,6 +139,7 @@ interface L2WorkSessionSidebarProps {
   onSelect: (workId: string) => void
   onTogglePin: (workId: string) => void
   onDelete: (workId: string) => void
+  onRename: (workSession: L2WorkSessionListItem) => void
   onArrangementChange: (arrangement: L2WorkSessionArrangement, movedWorkId: string) => void
 }
 
@@ -209,19 +215,22 @@ function SidebarHeaderGroup({
   className?: string
 }): React.JSX.Element {
   const { t } = useTranslation('workbench')
+  const overflow = appearance === 'action' && items.length > 3 ? items.slice(2) : []
+  const visibleItems = overflow.length > 0 ? items.slice(0, 2) : items
   return (
     <div
       className={cn('flex min-w-0 items-center gap-0', className)}
       role="group"
       aria-label={label}
     >
-      {items.map((item) => (
+      {visibleItems.map((item) => (
         <button
           key={item.key}
           data-testid={item.testId}
           type="button"
           disabled={item.disabled}
           aria-pressed={item.pressed}
+          aria-busy={item.busy || undefined}
           aria-label={
             appearance === 'mode' ? t('showSidebarMode', { name: item.label }) : item.label
           }
@@ -243,6 +252,30 @@ function SidebarHeaderGroup({
           </span>
         </button>
       ))}
+      {overflow.length > 0 ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                aria-label={label}
+                title={label}
+                className={SIDEBAR_HEADER_ACTION_BUTTON_CLASS}
+              >
+                <EllipsisIcon className="size-4" />
+              </button>
+            }
+          />
+          <DropdownMenuContent align="end">
+            {overflow.map((item) => (
+              <DropdownMenuItem key={item.key} disabled={item.disabled} onClick={item.onSelect}>
+                <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
+                {item.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
     </div>
   )
 }
@@ -309,7 +342,8 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
   now,
   onSelect,
   onTogglePin,
-  onDelete
+  onDelete,
+  onRename
 }: {
   workSession: L2WorkSessionListItem
   mobile: boolean
@@ -322,7 +356,10 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
   onSelect: (workId: string) => void
   onTogglePin: (workId: string) => void
   onDelete: (workId: string) => void
+  onRename: (workSession: L2WorkSessionListItem) => void
 }): React.JSX.Element {
+  const suppressTouchClick = useRef(false)
+  const lastPointer = useRef('')
   const actionsDisabled = disabled || ordering
   const {
     attributes,
@@ -518,9 +555,57 @@ const SortableWorkSessionRow = memo(function SortableWorkSessionRow({
   )
 
   return (
-    <ContextMenu>
-      <ContextMenuTrigger render={row} />
+    <ContextMenu
+      onOpenChange={(open, details) => {
+        if (open && (lastPointer.current === 'touch' || details.event.type.startsWith('touch'))) {
+          suppressTouchClick.current = true
+        }
+      }}
+    >
+      <ContextMenuTrigger
+        render={row}
+        onPointerDown={(event) => {
+          lastPointer.current = event.pointerType
+          suppressTouchClick.current = false
+        }}
+        onTouchEndCapture={(event) => {
+          // 长按打开菜单后，松手不能派生为选择会话的点击。
+          if (suppressTouchClick.current && event.cancelable) event.preventDefault()
+        }}
+        onClickCapture={(event) => {
+          if (!suppressTouchClick.current) return
+          event.preventDefault()
+          event.stopPropagation()
+          suppressTouchClick.current = false
+        }}
+        onKeyDownCapture={(event) => {
+          if (event.target !== event.currentTarget || event.nativeEvent.isComposing) return
+          lastPointer.current = 'keyboard'
+          suppressTouchClick.current = false
+          if (event.key !== 'ContextMenu' && !(event.key === 'F10' && event.shiftKey)) return
+          event.preventDefault()
+          event.stopPropagation()
+          const rect = event.currentTarget.getBoundingClientRect()
+          event.currentTarget.dispatchEvent(
+            new MouseEvent('contextmenu', {
+              bubbles: true,
+              cancelable: true,
+              button: 2,
+              clientX: rect.left + rect.width / 2,
+              clientY: rect.top + rect.height / 2
+            })
+          )
+        }}
+      />
       <ContextMenuContent>
+        <ContextMenuItem
+          data-testid={`work-session-rename-${workSession.workId}`}
+          disabled={actionsDisabled || deleting}
+          onClick={() => onRename(workSession)}
+        >
+          <PencilIcon />
+          {t('renameSessionTitle')}
+        </ContextMenuItem>
         <ContextMenuItem
           data-testid={`work-session-copy-project-path-${workSession.workId}`}
           onClick={copyProjectPath}
@@ -562,6 +647,7 @@ function L2WorkSessionSidebarComponent({
   mobile,
   fileBrowser,
   pluginTabContent,
+  pluginHeaderActions = [],
   pluginSessionTabs,
   fileRefreshLoading,
   canBrowseFiles,
@@ -588,6 +674,7 @@ function L2WorkSessionSidebarComponent({
   onSelect,
   onTogglePin,
   onDelete,
+  onRename,
   onArrangementChange
 }: L2WorkSessionSidebarProps): React.JSX.Element {
   const { t } = useTranslation('workbench')
@@ -696,7 +783,20 @@ function L2WorkSessionSidebarComponent({
               onSelect: onRefreshFiles
             }
           ]
-        : []
+        : pluginHeaderActions.map((action, index) => ({
+            key: String(index),
+            label: action.label,
+            icon: action.busy ? (
+              <LoaderCircleIcon className="animate-spin" />
+            ) : (
+              <L4PluginIcon icon={action.icon} />
+            ),
+            disabled: action.disabled || action.busy,
+            busy: action.busy,
+            onSelect: () => {
+              void action.onSelect()
+            }
+          }))
 
   useLayoutEffect(() => {
     const container = shortcutContainerRef.current
@@ -787,6 +887,7 @@ function L2WorkSessionSidebarComponent({
         onSelect={onSelect}
         onTogglePin={onTogglePin}
         onDelete={onDelete}
+        onRename={onRename}
       />
     )
   })

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

@@ -40,6 +40,7 @@ import type {
   L2CreateWorkSessionRequest,
   L2CreateWorkSessionResponse,
   L2ReplaceWorkSessionRequest,
+  L2RenameWorkSessionRequest,
   L2SortWorkSessionsRequest,
   L2WorkSessionListResponse
 } from '@common/l2_biz/work-session/l2-work-session-contract'
@@ -110,6 +111,7 @@ export interface L2WorkbenchBiz {
   applyAppRuntimeUpdate: (input: L3AppRuntimeApplyRequest) => Promise<void>
   sortWorkSessions: (input: L2SortWorkSessionsRequest) => Promise<L2WorkSessionListResponse>
   deleteWorkSession: (workId: string) => Promise<L2WorkSessionListResponse>
+  renameWorkSession: (input: L2RenameWorkSessionRequest) => Promise<void>
   listDirectories: (forceRefresh: boolean) => Promise<L2PiDirectoryListResponse>
   listIgnoredDirectories: (forceRefresh: boolean) => Promise<L2PiDirectoryIgnoreListResponse>
   replaceDirectoryIgnore: (input: L2PiDirectoryIgnoreReplaceRequest) => Promise<void>
@@ -205,6 +207,9 @@ export function createL2WorkbenchBiz(
       request<L2WorkSessionListResponse>('/api/work-sessions/sort', input),
     deleteWorkSession: (workId) =>
       request<L2WorkSessionListResponse>('/api/work-sessions/del', { workId }),
+    async renameWorkSession(input): Promise<void> {
+      await request<Record<string, never>>('/api/work-sessions/rename', input)
+    },
     async listDirectories(forceRefresh): Promise<L2PiDirectoryListResponse> {
       const response = await request<L2PiDirectoryListResponse>('/api/pi/directories/list', {
         forceRefresh