@jetcrab/pi-desk 1.1.23-dev → 1.1.25

package/src/client/l2_biz/project-preview/views/l2-project-change-tree.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ChevronRightIcon, Columns2Icon, FolderIcon, FolderOpenIcon } from 'lucide-react'
-import type { KeyboardEvent } from 'react'
+import { useRef, type KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { L4GitChanges } from '@common/l4_foundation/git/l4-git-history-contract'
 import type { L3ProjectRevealTargetType } from '@common/l3_modules/project-files/l3-project-files-contract'
@@ -28,6 +28,7 @@ interface Props {
   changes: L4GitChanges['items']
   selectedPath: string | null
   scrollTop: number
+  rowHeight: number
   onScroll: (value: number) => void
   onSelect: (path: string) => void
   onToggle: (path: string) => void
@@ -42,6 +43,7 @@ export function L2ProjectChangeTree({
   changes,
   selectedPath,
   scrollTop,
+  rowHeight,
   onScroll,
   onSelect,
   onToggle,
@@ -49,6 +51,12 @@ export function L2ProjectChangeTree({
   onReveal
 }: Props): React.JSX.Element {
   const { t } = useTranslation('projectHistory')
+  const pendingFocus = useRef<string | null>(null)
+  const focusRow = (element: HTMLElement | null, key: string): void => {
+    if (!element || pendingFocus.current !== key) return
+    pendingFocus.current = null
+    element.focus({ preventScroll: true })
+  }
   const changesByPath = new Map(changes.map((change) => [change.path, change]))
   const keyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     if (event.defaultPrevented || !event.currentTarget.contains(event.target as Node)) return
@@ -84,14 +92,17 @@ export function L2ProjectChangeTree({
     const target = rows[next]
     if (!target) return
     const viewport = event.currentTarget
-    if (next * 36 < viewport.scrollTop) viewport.scrollTop = next * 36
-    else if ((next + 1) * 36 > viewport.scrollTop + viewport.clientHeight)
-      viewport.scrollTop = (next + 1) * 36 - viewport.clientHeight
-    requestAnimationFrame(() => {
-      ;[...viewport.querySelectorAll<HTMLElement>('[data-tree-key]')]
-        .find((item) => item.dataset.treeKey === target.key)
-        ?.focus()
-    })
+    if (next * rowHeight < viewport.scrollTop) viewport.scrollTop = next * rowHeight
+    else if ((next + 1) * rowHeight > viewport.scrollTop + viewport.clientHeight)
+      viewport.scrollTop = (next + 1) * rowHeight - viewport.clientHeight
+    pendingFocus.current = target.key
+    // 虚拟行可能尚未挂载，未命中时由该行的 ref 在提交后接续聚焦。
+    focusRow(
+      [...viewport.querySelectorAll<HTMLElement>('[data-tree-key]')].find(
+        (item) => item.dataset.treeKey === target.key
+      ) ?? null,
+      target.key
+    )
   }
 
   return (
@@ -100,6 +111,7 @@ export function L2ProjectChangeTree({
       label={t('changeFiles')}
       items={rows}
       scrollTop={scrollTop}
+      rowHeight={rowHeight}
       onScroll={onScroll}
       onKeyDown={keyDown}
       render={(row) => {
@@ -125,6 +137,7 @@ export function L2ProjectChangeTree({
             onReveal={onReveal}
             trigger={
               <div
+                ref={(element) => focusRow(element, row.key)}
                 role="treeitem"
                 tabIndex={0}
                 aria-level={row.depth + 1}
@@ -132,10 +145,13 @@ export function L2ProjectChangeTree({
                 aria-selected={row.type === 'file' && selectedPath === row.path}
                 data-tree-key={row.key}
                 className={cn(
-                  'flex h-9 min-w-0 cursor-pointer items-center gap-2 pr-2 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                  'flex min-w-0 cursor-pointer items-center gap-1 pr-1 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
                   row.type === 'file' && selectedPath === row.path && 'bg-accent'
                 )}
-                style={{ paddingLeft: 8 + row.depth * 16 }}
+                style={{
+                  height: rowHeight,
+                  paddingLeft: 4 + row.depth * (rowHeight === 24 ? 12 : 24)
+                }}
                 title={
                   change?.oldPath && row.type === 'file'
                     ? `${joinL3ProjectPath(repositoryRoot, change.oldPath)} → ${projectPath}`
@@ -190,6 +206,7 @@ export function L2ProjectChangeTree({
                   <Button
                     size="icon-sm"
                     variant="ghost"
+                    className={rowHeight === 24 ? 'size-6' : undefined}
                     aria-label={t('viewDiffPath', { path: row.path })}
                     onDoubleClick={(event) => event.stopPropagation()}
                     onClick={(event) => {

package/src/client/l2_biz/project-preview/views/l2-project-history-list.tsx

@@ -1,5 +1,12 @@
 'use client'
-import { useLayoutEffect, useRef, useState, type ReactNode, type KeyboardEventHandler } from 'react'
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type KeyboardEventHandler
+} from 'react'
 
 export function L2ProjectHistoryList<T>({
   items,
@@ -8,7 +15,10 @@ export function L2ProjectHistoryList<T>({
   onScroll,
   render,
   role = 'listbox',
-  onKeyDown
+  onKeyDown,
+  rowHeight = 36,
+  onNearEnd,
+  footer
 }: {
   items: readonly T[]
   label: string
@@ -17,6 +27,9 @@ export function L2ProjectHistoryList<T>({
   render: (item: T, index: number) => ReactNode
   role?: 'listbox' | 'tree'
   onKeyDown?: KeyboardEventHandler<HTMLDivElement>
+  rowHeight?: number
+  onNearEnd?: () => void
+  footer?: ReactNode
 }): React.JSX.Element {
   const viewport = useRef<HTMLDivElement>(null)
   const [window, setWindow] = useState({ top: scrollTop, height: 300 })
@@ -33,10 +46,23 @@ export function L2ProjectHistoryList<T>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   useLayoutEffect(() => {
-    if (viewport.current) viewport.current.scrollTop = scrollTop
-  }, [items, scrollTop])
-  const start = Math.max(0, Math.floor(window.top / 36) - 8)
-  const end = Math.min(items.length, Math.ceil((window.top + window.height) / 36) + 8)
+    const element = viewport.current
+    if (!element) return
+    element.scrollTop = scrollTop
+    setWindow((previous) =>
+      previous.top === element.scrollTop ? previous : { ...previous, top: element.scrollTop }
+    )
+  }, [items, scrollTop, rowHeight])
+  useEffect(() => {
+    if (
+      items.length &&
+      window.height > 0 &&
+      items.length * rowHeight - window.top - window.height <= 200
+    )
+      onNearEnd?.()
+  }, [items.length, rowHeight, window.top, window.height, onNearEnd])
+  const start = Math.max(0, Math.floor(window.top / rowHeight) - 8)
+  const end = Math.min(items.length, Math.ceil((window.top + window.height) / rowHeight) + 8)
   return (
     <div
       ref={viewport}
@@ -51,11 +77,12 @@ export function L2ProjectHistoryList<T>({
         onScroll(top)
       }}
     >
-      <div style={{ height: items.length * 36, position: 'relative' }}>
-        <div style={{ position: 'absolute', top: start * 36, left: 0, right: 0 }}>
+      <div style={{ height: items.length * rowHeight, position: 'relative' }}>
+        <div style={{ position: 'absolute', top: start * rowHeight, left: 0, right: 0 }}>
           {items.slice(start, end).map((item, index) => render(item, start + index))}
         </div>
       </div>
+      {footer}
     </div>
   )
 }

package/src/client/l2_biz/project-preview/views/l2-project-history-view.tsx

@@ -18,6 +18,7 @@ import { cn } from '@client/l4_foundation/lib/l4-utils'
 import type { L2ProjectHistoryState } from '../runtime/l2-project-history-runtime'
 import { L2ProjectHistoryList } from './l2-project-history-list'
 import { L2ProjectChangeTree } from './l2-project-change-tree'
+import { L2ProjectBranchSelect } from './l2-project-branch-select'
 import type { L3PathTreeRow } from '@client/l3_modules/project-files/l3-project-path-tree'
 import type { L3ProjectRevealTargetType } from '@common/l3_modules/project-files/l3-project-files-contract'
 
@@ -25,6 +26,7 @@ interface Props {
   state: L2ProjectHistoryState
   cwd: string
   changeRows: readonly L3PathTreeRow[]
+  changeRowHeight: number
   onSelectChange: (path: string) => void
   onToggleDirectory: (path: string) => void
   onReveal: (path: string, type: L3ProjectRevealTargetType) => Promise<void>
@@ -86,30 +88,17 @@ export function L2ProjectHistoryView(props: Props): React.JSX.Element {
   const data = state.changes.data
   const context = `${state.repositoryRoot}:${data?.comparison.original}:${data?.comparison.target}`
   const selectedPath = state.selectedChangePath
-  const refs = [
-    { value: 'HEAD', label: t('currentHead') },
-    ...(state.branches.data?.local ?? []).map((name) => ({
-      value: `refs/heads/${name}`,
-      label: name,
-      description: t('localBranch')
-    })),
-    ...(state.branches.data?.remote ?? []).map((name) => ({
-      value: `refs/remotes/${name}`,
-      label: name,
-      description: t('remoteBranch')
-    }))
-  ]
   const upstream = state.branches.data?.upstream
   const commit = data?.commit
   const chooseCommit = (oid: string): void => {
     props.onCommit(oid)
     if (narrow) setMobilePane('files')
   }
-  const feedback = (error: string | null): React.JSX.Element | null =>
+  const feedback = (error: string | null, retry = props.onRefresh): React.JSX.Element | null =>
     error ? (
       <div role="alert" className="flex flex-wrap items-center gap-2 p-3 text-sm text-destructive">
         <span className="min-w-0 flex-1 break-words">{error}</span>
-        <Button size="sm" variant="outline" onClick={props.onRefresh}>
+        <Button size="sm" variant="outline" onClick={retry}>
           {t('retry')}
         </Button>
         {state.mode === 'compare' && state.strategy === 'merge-base' ? (
@@ -122,19 +111,47 @@ export function L2ProjectHistoryView(props: Props): React.JSX.Element {
 
   const log = (
     <div className="flex size-full min-h-0 min-w-0 flex-col">
-      {feedback(state.log.error)}
-      {state.log.status === 'loading' ? (
-        <div className="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground">
-          <LoaderCircleIcon className="size-4 animate-spin" />
-          {t('loadingCommits')}
-        </div>
-      ) : null}
       <L2ProjectHistoryList
         key={`${state.repositoryRoot}:${state.mode}:${state.tip}:${state.base}:${state.target}:${state.query}:${state.author}`}
         items={state.log.data?.items ?? []}
         label={t('commitList')}
         scrollTop={scroll.log}
         onScroll={(value) => props.onScroll('log', value)}
+        onNearEnd={
+          state.log.status === 'ready' &&
+          state.log.data?.hasMore &&
+          state.log.data.items.length < 2000
+            ? props.onMoreLog
+            : undefined
+        }
+        footer={
+          <>
+            {feedback(state.log.error, state.log.data ? props.onMoreLog : props.onRefresh)}
+            {state.log.status === 'loading' ? (
+              <div
+                role="status"
+                className="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground"
+              >
+                <LoaderCircleIcon className="size-4 animate-spin" />
+                {t('loadingCommits')}
+              </div>
+            ) : null}
+            {state.log.status === 'ready' && !state.log.data?.items.length ? (
+              <p className="px-3 py-4 text-sm text-muted-foreground">
+                {state.query || state.author ? t('noMatchingCommits') : t('noCommits')}
+              </p>
+            ) : null}
+            {state.log.data?.truncated ? (
+              <p className="px-3 py-2 text-xs text-muted-foreground">{t('scanLimit')}</p>
+            ) : (state.log.data?.items.length ?? 0) >= 2000 ? (
+              <p className="px-3 py-2 text-xs text-muted-foreground">{t('loadedLimit')}</p>
+            ) : state.log.status === 'ready' &&
+              state.log.data?.items.length &&
+              !state.log.data.hasMore ? (
+              <p className="px-3 py-2 text-xs text-muted-foreground">{t('noMoreCommits')}</p>
+            ) : null}
+          </>
+        }
         render={(item) => (
           <button
             key={item.oid}
@@ -168,26 +185,6 @@ export function L2ProjectHistoryView(props: Props): React.JSX.Element {
           </button>
         )}
       />
-      {state.log.status === 'ready' && !state.log.data?.items.length ? (
-        <p className="px-3 py-4 text-sm text-muted-foreground">
-          {state.query || state.author ? t('noMatchingCommits') : t('noCommits')}
-        </p>
-      ) : null}
-      {state.log.data?.truncated ? (
-        <p className="px-3 py-2 text-xs text-muted-foreground">{t('scanLimit')}</p>
-      ) : null}
-      {(state.log.data?.items.length ?? 0) >= 2000 ? (
-        <p className="px-3 py-2 text-xs text-muted-foreground">{t('loadedLimit')}</p>
-      ) : state.log.data?.hasMore ? (
-        <Button
-          variant="ghost"
-          size="sm"
-          disabled={state.log.status === 'loading'}
-          onClick={props.onMoreLog}
-        >
-          {t('loadMoreCommits')}
-        </Button>
-      ) : null}
     </div>
   )
 
@@ -247,6 +244,7 @@ export function L2ProjectHistoryView(props: Props): React.JSX.Element {
               cwd={props.cwd}
               repositoryRoot={state.repositoryRoot ?? ''}
               rows={props.changeRows}
+              rowHeight={props.changeRowHeight}
               changes={data?.items ?? []}
               selectedPath={selectedPath}
               scrollTop={scroll.changes}
@@ -387,29 +385,29 @@ export function L2ProjectHistoryView(props: Props): React.JSX.Element {
           onChange={props.onRepository}
         />
         {state.mode === 'history' ? (
-          <L4SearchSelect
+          <L2ProjectBranchSelect
             className="w-48"
             ariaLabel={t('viewBranch')}
             value={state.tip}
-            options={refs}
+            branches={state.branches.data}
             onChange={(value) => props.onRevision('tip', value)}
           />
         ) : (
           <>
-            <L4SearchSelect
+            <L2ProjectBranchSelect
               className="w-44"
               ariaLabel={t('baseBranch')}
               placeholder={t('chooseBase')}
               value={state.base}
-              options={refs}
+              branches={state.branches.data}
               onChange={(value) => props.onRevision('base', value)}
             />
             <span className="text-xs text-muted-foreground">→</span>
-            <L4SearchSelect
+            <L2ProjectBranchSelect
               className="w-44"
               ariaLabel={t('targetBranch')}
               value={state.target}
-              options={refs}
+              branches={state.branches.data}
               onChange={(value) => props.onRevision('target', value)}
             />
             <L4SearchSelect

package/src/client/l2_biz/workbench/file-workspace/l2-file-workspace-runtime.ts

@@ -9,6 +9,7 @@ import { readL3ImagePreviewMode } from '@client/l3_modules/preferences/l3-work-s
 import {
   L3ProjectFileRuntime,
   type L3ProjectFileState,
+  type L3FileTabTarget,
   type L3FileTabCloseScope
 } from '@client/l3_modules/project-files/l3-project-file-runtime'
 import type { L2WorkSessionGitBiz } from '../git-workspace/l2-work-session-git-biz'
@@ -222,7 +223,7 @@ export class L2FileWorkspaceRuntime {
   closeFile(id: string, path: string): void {
     this.closeTabs(id, path, 'current')
   }
-  closeTabs(id: string, target: string | null, scope: L3FileTabCloseScope): void {
+  closeTabs(id: string, target: L3FileTabTarget | null, scope: L3FileTabCloseScope): void {
     this.workspaces.get(id)?.files.closeTabs(target, scope)
   }
   hideWindow(id: string): void {

package/src/client/l2_biz/workbench/file-workspace/l2-file-workspace-view.tsx

@@ -214,9 +214,13 @@ export function L2FileWorkspaceView({
             gitRuntime={gitRuntime}
             paths={workspace.tabs}
             activePath={activePath}
-            diffPath={diffPath}
+            diffs={workspace.diffs}
+            activeDiff={activeDiff}
             mobile={mobile}
-            onActivate={(path) => runtime.activateFile(workId, path)}
+            onActivate={(target) => {
+              if (typeof target === 'string') runtime.activateFile(workId, target)
+              else runtime.openDiff(workId, target.repositoryRoot, target.path)
+            }}
             onClose={(path, scope) => runtime.closeTabs(workId, path, scope)}
           />
           <L3ProjectDocumentView

package/src/client/l3_modules/conversation/l3-conversation-viewport.tsx

@@ -235,37 +235,47 @@ export function L3ConversationTailSpacerObserver({ active = true }: { active?: b
       scheduleRefresh()
     })
     let previousHeight: number | undefined
+    let previousWidth: number | undefined
     let viewportDifference = 0
     let resizeReleaseFrame: number | null = null
     let resizeReleaseTimer: number | null = null
     const viewportObserver = new ResizeObserver(([entry]) => {
-      const height = entry?.contentRect.height
-      if (height === undefined) return
+      if (!entry) return
+      const { height, width } = entry.contentRect
       const difference = height - (previousHeight ?? height)
+      const widthDifference = width - (previousWidth ?? width)
       previousHeight = height
-      if (!difference) {
+      previousWidth = width
+      if (!difference && !widthDifference) {
         scheduleRefresh()
         return
       }
 
       logL3ConversationScroll('viewport:resize', scrollElement, {
         difference,
+        widthDifference,
         isAtBottom: state.isAtBottom,
         escapedFromLock: state.escapedFromLock
       })
-      // 库只观察内容高度；视口缩放引起的滚动也不能被当成用户上翻。
-      viewportDifference = difference
-      state.resizeDifference = difference
+      // 库只观察内容高度；仅宽度变化时保留库标记的内容高度差。
+      if (difference) {
+        viewportDifference = difference
+        state.resizeDifference = difference
+      }
       if (refreshFrame !== null) {
         window.cancelAnimationFrame(refreshFrame)
         refreshFrame = null
       }
-      // 视口变高时浏览器可能已截短 scrollTop；绘制前补齐留白并同步跟底，避免下一帧再弹回。
+      // 宽度重排和高度变化都在绘制前同步跟底；库的 instant 仍会等到下一帧。
       refreshL3ConversationTailSpacer(scrollElement)
       if (state.isAtBottom) {
         state.scrollTop = Math.max(0, state.calculatedTargetScrollTop)
       }
-      logL3ConversationScroll('viewport:resize:positioned', scrollElement, { difference })
+      logL3ConversationScroll('viewport:resize:positioned', scrollElement, {
+        difference,
+        widthDifference
+      })
+      if (!difference) return
       if (resizeReleaseFrame !== null) window.cancelAnimationFrame(resizeReleaseFrame)
       if (resizeReleaseTimer !== null) window.clearTimeout(resizeReleaseTimer)
       resizeReleaseFrame = window.requestAnimationFrame(() => {

package/src/client/l3_modules/project-files/l3-project-document-view.tsx

@@ -33,7 +33,7 @@ import { useL4CodePreferences } from '@client/l4_foundation/ui/code/l4-code-pref
 import { L4ImageViewer } from '@client/l4_foundation/ui/l4-image-viewer'
 import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
-import type { L3ProjectFileRuntime } from './l3-project-file-runtime'
+import { getL3FileDiffKey, type L3ProjectFileRuntime } from './l3-project-file-runtime'
 import type { L3ProjectGitBrowser } from './l3-project-git-runtime'
 import { useL3ProjectDocumentGit } from './l3-project-document-git'
 import { L3CodeSurfaceToolbarButton } from './l3-code-surface-toolbar-button'
@@ -158,7 +158,10 @@ export function L3ProjectDocumentView({
         {activeDiff ? (
           <>
             <span className="mr-auto shrink-0 px-1 text-xs text-muted-foreground">
-              {activeDiff.label ?? t('headToWorking')}
+              {activeDiff.label ??
+                (activeDiff.comparison
+                  ? `${activeDiff.comparison.baseCommit?.slice(0, 7) ?? '∅'} → ${activeDiff.comparison.targetCommit.slice(0, 7)}`
+                  : t('headToWorking'))}
               {activeDiff.status === 'text' &&
               activeDiff.original.content === activeDiff.modified.content
                 ? t('noDiffChanges')
@@ -333,7 +336,7 @@ export function L3ProjectDocumentView({
         {activeDiff ? (
           activeDiff.status === 'text' ? (
             <L4CodeDiff
-              key={`${activeDiff.repositoryRoot}:${activeDiff.path}`}
+              key={getL3FileDiffKey(activeDiff)}
               ref={diffRef}
               original={activeDiff.original}
               modified={activeDiff.modified}
@@ -352,7 +355,7 @@ export function L3ProjectDocumentView({
                 {activeDiff.modifiedMetadata}
               </pre>
             </div>
-          ) : activeDiff.status === 'loading' ? (
+          ) : activeDiff.status === 'loading' || activeDiff.status === 'unloaded' ? (
             <Loading />
           ) : (
             <div className="flex size-full flex-col items-center justify-center gap-3 p-6 text-center text-sm">