@jetcrab/pi-desk 1.1.28-dev → 1.1.29-dev

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

@@ -15,6 +15,7 @@ import {
   FolderIcon,
   Layers3Icon,
   LoaderCircleIcon,
+  RotateCcwIcon,
   SearchIcon,
   TerminalIcon,
   WrenchIcon
@@ -566,11 +567,16 @@ function UserMessageText({ text }: { text: string }): React.JSX.Element {
 
 function UserMessage({
   message,
-  onAcquireImage
+  onAcquireImage,
+  onResend,
+  resendDisabled
 }: {
   message: L3ConversationDisplayMessage
   onAcquireImage: L3ConversationAcquireImage
+  onResend?: (entryId: string) => void
+  resendDisabled?: boolean
 }): React.JSX.Element {
+  const { t } = useTranslation('conversation')
   if (message.summary.type !== 'user') throw new Error('UserMessage requires a user summary')
 
   return (
@@ -595,6 +601,18 @@ function UserMessage({
       </MessageContent>
       {message.timestampMs === null ? null : (
         <MessageToolbar className="mt-0 justify-end gap-1 text-xs text-muted-foreground">
+          {message.durable && onResend ? (
+            <MessageAction
+              tooltip={t('resendMessage')}
+              label={t('resendMessage')}
+              size="icon-sm"
+              className={cn(styles.messageCopyAction, 'text-muted-foreground')}
+              disabled={resendDisabled}
+              onClick={() => onResend(message.durable!.location.entryId)}
+            >
+              <RotateCcwIcon className="size-3.5" />
+            </MessageAction>
+          ) : null}
           <MessageCopyAction text={message.summary.text} />
           <MessageTime timestampMs={message.timestampMs} />
         </MessageToolbar>
@@ -1849,6 +1867,8 @@ interface L3ConversationTurnViewProps {
   turn: L3ConversationTurn
   cwd: string
   logicalTail?: boolean
+  onResend?: (entryId: string) => void
+  resendDisabled?: boolean
   onLoadDetail: L3ConversationLoadDetail
   onAcquireImage: L3ConversationAcquireImage
   onPreviewFile?: L3ConversationPreviewFile
@@ -1910,17 +1930,28 @@ function sameTurn(left: L3ConversationTurn, right: L3ConversationTurn): boolean
 function TurnUserMessageComponent({
   message,
   onLoadDetail,
-  onAcquireImage
+  onAcquireImage,
+  onResend,
+  resendDisabled
 }: {
   message: L3ConversationDisplayMessage
   onLoadDetail: L3ConversationLoadDetail
   onAcquireImage: L3ConversationAcquireImage
+  onResend?: (entryId: string) => void
+  resendDisabled?: boolean
 }): React.JSX.Element {
   return (
     <L3ConversationMessageView
       message={message}
       loadDetail={onLoadDetail}
-      defaultView={<UserMessage message={message} onAcquireImage={onAcquireImage} />}
+      defaultView={
+        <UserMessage
+          message={message}
+          onAcquireImage={onAcquireImage}
+          onResend={onResend}
+          resendDisabled={resendDisabled}
+        />
+      }
     />
   )
 }
@@ -1930,6 +1961,8 @@ const TurnUserMessage = memo(
   (previous, next) =>
     previous.onLoadDetail === next.onLoadDetail &&
     previous.onAcquireImage === next.onAcquireImage &&
+    previous.onResend === next.onResend &&
+    previous.resendDisabled === next.resendDisabled &&
     sameDisplayMessage(previous.message, next.message)
 )
 
@@ -1963,7 +1996,9 @@ function L3ConversationTurnViewComponent({
   logicalTail = false,
   onLoadDetail,
   onAcquireImage,
-  onPreviewFile
+  onPreviewFile,
+  onResend,
+  resendDisabled
 }: L3ConversationTurnViewProps): React.JSX.Element {
   if (turn.compaction) {
     return (
@@ -1995,6 +2030,8 @@ function L3ConversationTurnViewComponent({
           message={turn.user}
           onLoadDetail={onLoadDetail}
           onAcquireImage={onAcquireImage}
+          onResend={onResend}
+          resendDisabled={resendDisabled}
         />
       ) : null}
       <L3ConversationImageContext.Provider value={onAcquireImage}>
@@ -2020,6 +2057,8 @@ export const L3ConversationTurnView = memo(
   (previous, next) =>
     previous.cwd === next.cwd &&
     previous.logicalTail === next.logicalTail &&
+    previous.onResend === next.onResend &&
+    previous.resendDisabled === next.resendDisabled &&
     previous.onAcquireImage === next.onAcquireImage &&
     previous.onLoadDetail === next.onLoadDetail &&
     previous.onPreviewFile === next.onPreviewFile &&

package/src/client/l3_modules/project-files/l3-markdown-preview.module.css

@@ -1,7 +1,7 @@
 .document {
   box-sizing: border-box;
   width: 100%;
-  max-width: 1200px;
+  max-width: 80ch;
   min-width: 0;
   margin-inline: auto;
   padding: 1.5rem;

package/src/client/l3_modules/project-files/l3-project-document-git.ts

@@ -4,19 +4,20 @@ import { useCallback, useEffect, useRef, useSyncExternalStore, type RefObject }
 import type { L3ProjectFileRuntime } from './l3-project-file-runtime'
 import type { L3ProjectGitBrowser } from './l3-project-git-runtime'
 import { findL3GitFile } from './l3-project-git-model'
+import { useL3ProjectRefresh } from './l3-use-project-refresh'
 
 export function useL3ProjectDocumentGit(
   runtime: L3ProjectFileRuntime,
   git: L3ProjectGitBrowser,
   host: RefObject<HTMLDivElement | null>,
   savePosition: () => void,
-  active: boolean,
-  refreshOnFocus = true
+  active: boolean
 ): { refresh: () => void; unavailable: boolean } {
   useSyncExternalStore(git.subscribe, git.getRevision, git.getRevision)
   const snapshot = git.getWorkspace(runtime.cwd)?.snapshot
   const path = runtime.state.activePath
-  const diffActive = Boolean(runtime.state.activeDiff)
+  const diff = runtime.state.activeDiff
+  const diffActive = Boolean(diff)
   const document = path ? runtime.state.documents.get(path) : undefined
   const save = useRef(savePosition)
   useEffect(() => {
@@ -29,36 +30,19 @@ export function useL3ProjectDocumentGit(
     void git.refreshSnapshot(runtime.cwd)
   }, [diffActive, git, path, runtime])
 
-  useEffect(() => {
-    if (!refreshOnFocus || !active || !path || diffActive) return
-    const visible = (): boolean =>
-      window.document.visibilityState === 'visible' &&
-      Boolean(host.current?.getClientRects().length) &&
-      !host.current?.closest('[inert], [aria-hidden="true"]')
-    let lastRefresh = Date.now()
-    if (visible()) {
-      // 已打开的标签重新展示时重读；首次打开仍复用正在进行的正文请求。
-      if (runtime.state.documents.get(path)?.status === 'text') {
-        save.current()
-        runtime.reloadFile(path)
-      }
-      void git.refreshSnapshot(runtime.cwd)
-    }
-    const onFocus = (): void => {
-      if (!visible() || Date.now() - lastRefresh < 1000) return
-      lastRefresh = Date.now()
-      refresh()
+  const refreshVisible = useCallback((): void => {
+    if (diff) runtime.refreshDiff()
+    else if (path) {
+      save.current()
+      void runtime.ensureDocument(path, true)
     }
-    window.addEventListener('focus', onFocus)
-    window.document.addEventListener('visibilitychange', onFocus)
-    return () => {
-      window.removeEventListener('focus', onFocus)
-      window.document.removeEventListener('visibilitychange', onFocus)
-    }
-  }, [active, diffActive, git, host, path, refresh, refreshOnFocus, runtime])
+    void git.refreshSnapshot(runtime.cwd)
+  }, [diff, git, path, runtime])
+  useL3ProjectRefresh(host, refreshVisible, active)
 
   useEffect(() => {
     if (!active || !path || diffActive || document?.status !== 'text') return
+    if (snapshot?.status === 'loading') return
     const controller = new AbortController()
     const file =
       snapshot?.status === 'ready' ? findL3GitFile(runtime.cwd, path, snapshot.repositories) : null

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

@@ -54,7 +54,6 @@ export function L3ProjectDocumentView({
   gitRuntime,
   compact,
   visible = true,
-  refreshOnFocus = true,
   onEscape,
   onSwitchPane,
   renderHeader
@@ -64,7 +63,6 @@ export function L3ProjectDocumentView({
   gitRuntime: L3ProjectGitBrowser
   compact: boolean
   visible?: boolean
-  refreshOnFocus?: boolean
   onEscape: () => void
   onSwitchPane?: () => void
   renderHeader?: (actions: ReactNode) => ReactNode
@@ -112,8 +110,7 @@ export function L3ProjectDocumentView({
     gitRuntime,
     hostRef,
     savePosition,
-    visible,
-    refreshOnFocus
+    visible
   )
   const comparison = document?.status === 'text' ? document.comparison : undefined
   const [computed, setComputed] = useState<{

package/src/client/l3_modules/project-files/l3-project-file-browser.module.css

@@ -6,25 +6,21 @@
   padding: 0 4px;
 }
 
-.tree [data-slot='collapsible-content'] > div {
-  border-left-color: color-mix(in oklab, var(--border) 50%, transparent);
+.tree [role='treeitem']:not([aria-expanded]),
+.tree [role='treeitem'][aria-expanded] > div:first-child {
+  min-height: 24px;
+  gap: 4px;
+  border-radius: 3px;
+  padding: 0 4px;
 }
 
-@media (pointer: fine) {
-  .tree [role='treeitem']:not([aria-expanded]),
-  .tree [role='treeitem'][aria-expanded] > div:first-child {
-    min-height: 24px;
-    gap: 4px;
-    padding: 0 4px;
-  }
-
-  .tree [role='treeitem'][aria-expanded] > div:first-child > button {
-    min-height: 24px;
-    gap: 4px;
-  }
+.tree [role='treeitem'][aria-expanded] > div:first-child > button {
+  min-height: 24px;
+  gap: 4px;
+}
 
-  .tree [data-slot='collapsible-content'] > div {
-    margin-left: 8px;
-    padding-left: 3px;
-  }
+.tree [data-slot='collapsible-content'] > div {
+  margin-left: 8px;
+  border-left-color: color-mix(in oklab, var(--border) 35%, transparent);
+  padding-left: 3px;
 }

package/src/client/l3_modules/project-files/l3-project-file-browser.tsx

@@ -1,15 +1,10 @@
 'use client'
 
 import {
-  BracesIcon,
   ChevronRightIcon,
-  FileCode2Icon,
-  FileIcon,
-  FileTextIcon,
   FolderGit2Icon,
   FolderIcon,
   GitBranchIcon,
-  ImageIcon,
   ListFilterIcon,
   LoaderCircleIcon,
   SearchIcon
@@ -23,11 +18,12 @@ import { cn } from '@client/l4_foundation/lib/l4-utils'
 import {
   FileTree,
   FileTreeFile,
-  FileTreeFolder,
   FileTreeIcon,
   FileTreeName
 } from '@client/l4_foundation/ui/ai-elements/file-tree'
 import { L4ScrollArea } from '@client/l4_foundation/ui/l4-scroll-area'
+import { L4FileIcon } from '@client/l4_foundation/ui/file-icons/l4-file-icon'
+import { L3ProjectTreeFolder } from './views/l3-project-tree-folder'
 import { buttonVariants } from '@client/l4_foundation/ui/shadcn/button'
 import { L3ProjectSearchControls } from './views/l3-project-search-controls'
 import { L3ProjectSearchResults } from './views/l3-project-search-results'
@@ -43,6 +39,7 @@ import {
 } from './l3-project-git-model'
 import type { L3DirectoryState, L3ProjectFileRuntime } from './l3-project-file-runtime'
 import { L3ProjectPathMenu } from './l3-project-path-menu'
+import { useL3ProjectRefresh } from './l3-use-project-refresh'
 import styles from './l3-project-file-browser.module.css'
 import {
   buildL3ProjectPathTree,
@@ -74,47 +71,7 @@ function compactPath(path: string): string {
 }
 
 function fileIcon(path: string): React.JSX.Element {
-  const name = path.split('/').at(-1)?.toLocaleLowerCase() ?? ''
-  const extension = name.includes('.') ? (name.split('.').at(-1) ?? '') : ''
-  if (['png', 'jpg', 'jpeg', 'webp', 'gif'].includes(extension)) {
-    return <ImageIcon className="size-4 text-muted-foreground" />
-  }
-  if (extension === 'json' || extension === 'jsonl') {
-    return <BracesIcon className="size-4 text-muted-foreground" />
-  }
-  if (['md', 'mdx', 'txt'].includes(extension)) {
-    return <FileTextIcon className="size-4 text-muted-foreground" />
-  }
-  if (
-    [
-      'ts',
-      'tsx',
-      'js',
-      'jsx',
-      'mjs',
-      'cjs',
-      'py',
-      'go',
-      'rs',
-      'java',
-      'c',
-      'cpp',
-      'h',
-      'hpp',
-      'css',
-      'scss',
-      'html',
-      'xml',
-      'yaml',
-      'yml',
-      'toml',
-      'sql',
-      'sh'
-    ].includes(extension)
-  ) {
-    return <FileCode2Icon className="size-4 text-muted-foreground" />
-  }
-  return <FileIcon className="size-4 text-muted-foreground" />
+  return <L4FileIcon path={path} className="size-4 text-muted-foreground" />
 }
 
 function changedFileNameClass(change: L3GitProjectChange | null): string | undefined {
@@ -166,6 +123,7 @@ export function L3ProjectFileBrowser({
   useSyncExternalStore(gitRuntime.subscribe, gitRuntime.getRevision, gitRuntime.getRevision)
   const workspace = runtime.state
   const gitWorkspace = gitRuntime.getWorkspace(cwd)
+  const hostRef = useRef<HTMLElement>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const searchResultsRef = useRef<HTMLDivElement>(null)
@@ -210,10 +168,32 @@ export function L3ProjectFileBrowser({
   const changeByProjectPath = new Map(projectChanges.map((change) => [change.projectPath, change]))
   const readyRepositoryRoots = repositories.map((repository) => repository.root).filter(Boolean)
 
-  useEffect(() => {
-    void runtime.ensureRoot()
-    void gitRuntime.ensureSnapshot(cwd)
+  const refreshVisible = useCallback((): void => {
+    void gitRuntime.refreshSnapshot(cwd)
+    const current = gitRuntime.getWorkspace(cwd)
+    if (runtime.state.searchOpen || current?.changesOnly) return
+    const repositoryLayout =
+      current?.layout === 'repository' &&
+      !(current.snapshot.repositories.length === 1 && current.snapshot.repositories[0]?.root === '')
+    const roots = repositoryLayout
+      ? [...current.expandedRepositories].sort((left, right) => right.length - left.length)
+      : ['']
+    const expanded = runtime.state.expandedPaths
+    const paths = new Set(roots)
+    for (const path of expanded) {
+      const root = roots.find((candidate) => !candidate || path.startsWith(`${candidate}/`))
+      if (root === undefined) continue
+      const parts = path.slice(root ? root.length + 1 : 0).split('/')
+      if (
+        parts
+          .slice(0, -1)
+          .every((_, index) => expanded.has(joinPath(root, parts.slice(0, index + 1).join('/'))))
+      )
+        paths.add(path)
+    }
+    runtime.refreshDirectories(paths)
   }, [cwd, gitRuntime, runtime])
+  useL3ProjectRefresh(hostRef, refreshVisible)
 
   useEffect(() => {
     const scrollElement = scrollRef.current
@@ -238,10 +218,6 @@ export function L3ProjectFileBrowser({
   }, [expandedRepositoryRootsKey, gitWorkspace, runtime])
 
   const boundaries = new Set(readyRepositoryRoots)
-  const displayedDirectories = new Map<string, L3CompactDirectory>()
-  const expandedKeys = new Set(
-    [...workspace.expandedPaths].map((path) => keyL3ProjectTree('directory', path))
-  )
   const toggleDirectory = (directory: L3CompactDirectory, expanded: boolean): void => {
     const next = new Set(workspace.expandedPaths)
     for (const path of directory.paths) {
@@ -249,16 +225,11 @@ export function L3ProjectFileBrowser({
       else next.delete(path)
     }
     runtime.setExpandedPaths(next, false)
-    if (expanded && !gitWorkspace?.changesOnly)
-      void runtime.expandDirectoryChain(directory.path, boundaries)
-  }
-  const applyExpanded = (keys: Set<string>): void => {
-    const changed = [...displayedDirectories].filter(
-      ([path]) =>
-        keys.has(keyL3ProjectTree('directory', path)) !== workspace.expandedPaths.has(path)
-    )
-    for (const [path, directory] of changed)
-      toggleDirectory(directory, keys.has(keyL3ProjectTree('directory', path)))
+    if (expanded && !gitWorkspace?.changesOnly) {
+      void Promise.all(directory.paths.map((path) => runtime.ensureDirectory(path, true))).then(
+        () => runtime.expandDirectoryChain(directory.path, boundaries)
+      )
+    }
   }
 
   const openPreview = (path: string, line?: number): void => {
@@ -391,13 +362,12 @@ export function L3ProjectFileBrowser({
               false
             )
           const directory = runtime.compactDirectory(childPath, boundaries)
-          displayedDirectories.set(childPath, directory)
           return directoryMenu(
             directory,
-            <FileTreeFolder
-              path={keyL3ProjectTree('directory', childPath)}
-              name={directory.label}
-              title={directory.targetPath}
+            <L3ProjectTreeFolder
+              directory={directory}
+              expanded={workspace.expandedPaths.has(childPath)}
+              onToggle={() => toggleDirectory(directory, !workspace.expandedPaths.has(childPath))}
               data-testid={`project-folder-${childPath}`}
             >
               {renderDirectory(
@@ -405,7 +375,7 @@ export function L3ProjectFileBrowser({
                 currentRepositoryRoot,
                 respectRepositoryBoundaries
               )}
-            </FileTreeFolder>
+            </L3ProjectTreeFolder>
           )
         })}
         {moreEntries(`directory:${path}`, entries.length)}
@@ -434,17 +404,16 @@ export function L3ProjectFileBrowser({
       <>
         {directories.slice(0, limit).map((childPath) => {
           const directory = compactL3PathTreeDirectory(childPath, tree, boundaries)
-          displayedDirectories.set(childPath, directory)
           return directoryMenu(
             directory,
-            <FileTreeFolder
-              path={keyL3ProjectTree('directory', childPath)}
-              name={directory.label}
-              title={directory.targetPath}
+            <L3ProjectTreeFolder
+              directory={directory}
+              expanded={workspace.expandedPaths.has(childPath)}
+              onToggle={() => toggleDirectory(directory, !workspace.expandedPaths.has(childPath))}
               data-testid={`project-folder-${childPath}`}
             >
               {renderChangeNodes(tree, directory.targetPath)}
-            </FileTreeFolder>
+            </L3ProjectTreeFolder>
           )
         })}
         {files
@@ -462,12 +431,7 @@ export function L3ProjectFileBrowser({
     )
   }
 
-  const selectDirectoryPath = (key: string): void => {
-    if (key.startsWith('directory:')) {
-      const directory = displayedDirectories.get(key.slice('directory:'.length))
-      if (directory) toggleDirectory(directory, !workspace.expandedPaths.has(directory.path))
-      return
-    }
+  const selectFile = (key: string): void => {
     const path = key.slice('file:'.length)
     const change = changeByProjectPath.get(path)
     if (gitWorkspace?.changesOnly && change) openDiff(change)
@@ -480,7 +444,6 @@ export function L3ProjectFileBrowser({
       return (
         <FileTree
           className="rounded-none border-0 bg-transparent"
-          expanded={expandedKeys}
           selectedPath={
             workspace?.activeDiff
               ? keyL3ProjectTree(
@@ -494,8 +457,7 @@ export function L3ProjectFileBrowser({
                 ? keyL3ProjectTree('file', workspace.activePath)
                 : undefined
           }
-          onExpandedChange={applyExpanded}
-          onSelect={selectDirectoryPath}
+          onSelect={selectFile}
         >
           {projectChanges.length > 0 ? (
             renderChangeNodes(root, '')
@@ -513,12 +475,10 @@ export function L3ProjectFileBrowser({
     return (
       <FileTree
         className="rounded-none border-0 bg-transparent"
-        expanded={expandedKeys}
         selectedPath={
           workspace.activePath ? keyL3ProjectTree('file', workspace.activePath) : undefined
         }
-        onExpandedChange={applyExpanded}
-        onSelect={selectDirectoryPath}
+        onSelect={selectFile}
       >
         {renderDirectory('', null, false)}
       </FileTree>
@@ -557,7 +517,7 @@ export function L3ProjectFileBrowser({
             onClick={() => {
               if (expanded) runtime.cancelDirectoryExpansion(root)
               gitRuntime.toggleRepository(cwd, root)
-              if (!expanded) void runtime.ensureDirectory(root)
+              if (!expanded) void runtime.ensureDirectory(root, true)
             }}
           >
             <ChevronRightIcon
@@ -613,7 +573,6 @@ export function L3ProjectFileBrowser({
           gitWorkspace?.changesOnly ? (
             <FileTree
               className="rounded-none border-0 bg-transparent px-1 pb-1"
-              expanded={expandedKeys}
               selectedPath={
                 workspace?.activeDiff
                   ? keyL3ProjectTree(
@@ -625,8 +584,7 @@ export function L3ProjectFileBrowser({
                     )
                   : undefined
               }
-              onExpandedChange={applyExpanded}
-              onSelect={selectDirectoryPath}
+              onSelect={selectFile}
             >
               {count > 0 ? (
                 renderChangeNodes(changeRoot, root)
@@ -637,12 +595,10 @@ export function L3ProjectFileBrowser({
           ) : (
             <FileTree
               className="rounded-none border-0 bg-transparent px-1 pb-1"
-              expanded={expandedKeys}
               selectedPath={
                 workspace.activePath ? keyL3ProjectTree('file', workspace.activePath) : undefined
               }
-              onExpandedChange={applyExpanded}
-              onSelect={selectDirectoryPath}
+              onSelect={selectFile}
             >
               {renderDirectory(root, repository?.root ?? null, true)}
             </FileTree>
@@ -777,6 +733,7 @@ export function L3ProjectFileBrowser({
 
   return (
     <section
+      ref={hostRef}
       className="flex h-full min-h-0 flex-col bg-sidebar"
       aria-label={t('projectFiles', { name: projectName })}
       onKeyDown={(event) => {