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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetcrab/pi-desk",
-  "version": "1.1.24-dev",
+  "version": "1.1.28-dev",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -70,7 +70,7 @@
     "viewerjs": "^1.11.8",
     "ws": "^8.21.3",
     "zod": "^4.4.3",
-    "@jetcrab/pi-desk-sdk": "^1.1.9-dev"
+    "@jetcrab/pi-desk-sdk": "^1.1.10"
   },
   "devDependencies": {
     "@earendil-works/pi-agent-core": "1.2.0",

package/src/app/project-preview/page.tsx

@@ -1,5 +1,18 @@
 import { Suspense } from 'react'
+import type { Metadata } from 'next'
 import { L1ProjectPreviewPage } from '@client/l1_entry/pages/l1-project-preview-page'
+import { buildL2ProjectPreviewTitle } from '@common/l2_biz/project-preview/l2-project-preview-navigation'
+import { getL4HostSettingsStore } from '@server/l4_foundation/l4-host-settings-store'
+
+export async function generateMetadata({
+  searchParams
+}: {
+  searchParams: Promise<{ cwd?: string | string[] }>
+}): Promise<Metadata> {
+  const { cwd } = await searchParams
+  const { region } = getL4HostSettingsStore().getSnapshot()
+  return { title: buildL2ProjectPreviewTitle(Array.isArray(cwd) ? cwd[0] : cwd, region.locale) }
+}
 
 export default function ProjectPreview(): React.JSX.Element {
   return (

package/src/client/l1_entry/pages/l1-project-preview-page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { L2BuildLoginHref } from '@common/l2_biz/auth/l2-auth-return-to'
 import { buildL2ProjectPreviewHref } from '@common/l2_biz/project-preview/l2-project-preview-navigation'
@@ -18,10 +18,6 @@ export function L1ProjectPreviewPage(): React.JSX.Element {
     redirecting.current = true
     window.location.assign(L2BuildLoginHref(window.location.pathname + window.location.search))
   }, [])
-  useEffect(() => {
-    const name = cwd?.replaceAll('\\', '/').split('/').filter(Boolean).at(-1)
-    document.title = name ? `${name} · Pi Desk` : 'Pi Desk'
-  }, [cwd])
   return (
     <L2ProjectPreviewPage
       clientId={clientId}

package/src/client/l2_biz/project-preview/hooks/l2-use-project-preview.ts

@@ -12,6 +12,18 @@ import {
   type L2ProjectPreviewProject
 } from '../l2-project-preview-storage'
 
+function subscribePointer(listener: () => void): () => void {
+  const media = window.matchMedia('(pointer: fine)')
+  media.addEventListener('change', listener)
+  return () => media.removeEventListener('change', listener)
+}
+function readFinePointer(): boolean {
+  return window.matchMedia('(pointer: fine)').matches
+}
+function readServerPointer(): boolean {
+  return false
+}
+
 type Page = 'files' | 'code' | 'git'
 type HistoryPane = 'log' | 'files'
 interface PreviewState extends Pick<L2ProjectPreviewOwner, 'files' | 'git' | 'history'> {
@@ -25,6 +37,7 @@ interface PreviewState extends Pick<L2ProjectPreviewOwner, 'files' | 'git' | 'hi
   narrow: boolean
   stacked: boolean
   width: number
+  changeRowHeight: number
   openGit: (root?: string) => void
   refresh: () => void
 }
@@ -67,6 +80,12 @@ export function useL2ProjectPreview(
   const stacked = narrow || size.height < 680
   const repositories = git.getWorkspace(cwd)!.snapshot.repositories
   const state = files.state
+  const finePointer = useSyncExternalStore(subscribePointer, readFinePointer, readServerPointer)
+  const changeRowHeight = finePointer ? 24 : 36
+
+  useEffect(() => {
+    history.setChangeRowHeight(changeRowHeight)
+  }, [history, changeRowHeight])
 
   useEffect(() => {
     saveCurrent.current = (): void => {
@@ -97,6 +116,11 @@ export function useL2ProjectPreview(
           logScroll: history.scroll.log,
           changesScroll: history.scroll.changes
         },
+        diffs: files.state.diffs.map(({ repositoryRoot, path, comparison }) => ({
+          repositoryRoot,
+          path,
+          ...(comparison ? { comparison } : {})
+        })),
         activeDiff: files.state.activeDiff
           ? {
               repositoryRoot: files.state.activeDiff.repositoryRoot,
@@ -198,6 +222,7 @@ export function useL2ProjectPreview(
     narrow,
     stacked,
     width: size.width,
+    changeRowHeight,
     openGit(root): void {
       updateGlobal({ gitOpen: true })
       setPage('git')

package/src/client/l2_biz/project-preview/l2-project-preview-storage.ts

@@ -57,6 +57,11 @@ const editorStateSchema = z.custom<L4CodePreviewState>(
     Array.isArray((value as { cursorState?: unknown }).cursorState) &&
     typeof (value as { viewState?: unknown }).viewState === 'object'
 )
+const diffSchema = z.object({
+  repositoryRoot: z.string(),
+  path: L4ProjectFilePathSchema,
+  comparison: L4GitHistoricalDiffSchema.optional()
+})
 const projectSchema = z.object({
   page: z.enum(['files', 'code', 'git']),
   historyPane: z.enum(['log', 'files']),
@@ -70,13 +75,8 @@ const projectSchema = z.object({
   changesOnly: z.boolean(),
   expandedRepositories: z.array(z.string()).max(100),
   history: historySchema,
-  activeDiff: z
-    .object({
-      repositoryRoot: z.string(),
-      path: L4ProjectFilePathSchema,
-      comparison: L4GitHistoricalDiffSchema.optional()
-    })
-    .nullable()
+  diffs: z.array(diffSchema).max(20).optional(),
+  activeDiff: diffSchema.nullable()
 })
 export type L2ProjectPreviewProject = z.infer<typeof projectSchema>
 const entrySchema = z.object({ cwd: z.string(), lastOpenedAt: z.number(), state: projectSchema })

package/src/client/l2_biz/project-preview/l2-project-preview.tsx

@@ -63,6 +63,7 @@ export function L2ProjectPreview({
     narrow,
     stacked,
     width,
+    changeRowHeight,
     openGit,
     refresh
   } = useL2ProjectPreview(clientId, cwd, refreshOnFocus, onUnauthorized)
@@ -71,9 +72,6 @@ export function L2ProjectPreview({
   const gitState = git.getWorkspace(cwd)!
   const repositories = gitState.snapshot.repositories
   const state = files.state
-  const diffPath = state.activeDiff
-    ? [state.activeDiff.repositoryRoot, state.activeDiff.path].filter(Boolean).join('/')
-    : null
   const fileTree = (
     <L3ProjectFileBrowser
       cwd={cwd}
@@ -98,10 +96,14 @@ export function L2ProjectPreview({
           gitRuntime={git}
           paths={state.tabs}
           activePath={state.activePath}
-          diffPath={diffPath}
+          diffs={state.diffs}
+          activeDiff={state.activeDiff}
           mobile={narrow}
           actions={actions}
-          onActivate={(path) => files.openFile(path)}
+          onActivate={(target) => {
+            if (typeof target === 'string') files.openFile(target)
+            else files.openDiff(target.repositoryRoot, target.path, target.comparison)
+          }}
           onClose={(path, scope) => files.closeTabs(path, scope)}
         />
       )}
@@ -143,6 +145,7 @@ export function L2ProjectPreview({
           state={history.state}
           cwd={cwd}
           changeRows={history.getChangeRows()}
+          changeRowHeight={changeRowHeight}
           onSelectChange={(path) => history.selectChange(path)}
           onToggleDirectory={(path) => history.toggleChangeDirectory(path)}
           onReveal={(path, type) => files.revealFile(path, type)}

package/src/client/l2_biz/project-preview/runtime/l2-project-history-runtime.ts

@@ -86,6 +86,7 @@ export class L2ProjectHistoryRuntime {
   private readonly collapsedDirectories = new Set<string>()
   private changeTree = buildL3ProjectPathTree([])
   private changeRows: L3PathTreeRow[] = []
+  private changeRowHeight = 36
   constructor(
     private readonly reader: L3ProjectReader,
     private readonly files: L3ProjectFileRuntime
@@ -137,6 +138,13 @@ export class L2ProjectHistoryRuntime {
     this.scroll[pane] = value
   }
 
+  setChangeRowHeight(height: number): void {
+    if (this.changeRowHeight === height) return
+    this.scroll.changes = (this.scroll.changes / this.changeRowHeight) * height
+    this.changeRowHeight = height
+    this.publish()
+  }
+
   setRepository(root: string): void {
     if (root === this.state.repositoryRoot) {
       if (this.state.branches.status === 'idle') {
@@ -213,18 +221,16 @@ export class L2ProjectHistoryRuntime {
     const oid = typeof commit === 'string' ? commit : commit.oid
     this.state.selectedCommit = oid
     this.scroll.changes = 0
-    this.clearHistoricalDiff()
     void this.loadChanges({ commit: oid, ...(parent ? { parent } : {}) }, 1)
   }
   showAggregate(): void {
     if (!this.range) return
     this.state.selectedCommit = null
-    this.clearHistoricalDiff()
     void this.loadChanges(this.range, 1)
   }
   loadMoreLog(): void {
     if (
-      this.state.log.status !== 'ready' ||
+      (this.state.log.status !== 'ready' && this.state.log.status !== 'error') ||
       !this.state.log.data?.hasMore ||
       this.state.log.data.items.length >= 2000
     )
@@ -416,7 +422,6 @@ export class L2ProjectHistoryRuntime {
     this.state.log = empty()
     this.state.changes = empty()
     this.resetChangeTree()
-    this.clearHistoricalDiff()
     this.publish()
   }
   private resetChangeTree(): void {
@@ -427,18 +432,16 @@ export class L2ProjectHistoryRuntime {
     this.scroll.changes = 0
   }
   private rebuildChangeRows(): void {
-    const index = Math.floor(this.scroll.changes / 36)
+    const height = this.changeRowHeight
+    const index = Math.floor(this.scroll.changes / height)
     const anchor = this.changeRows[index]
-    const offset = this.scroll.changes % 36
+    const offset = this.scroll.changes % height
     this.changeRows = flattenL3ProjectPathTree(this.changeTree, this.collapsedDirectories)
     const next = anchor ? this.changeRows.findIndex((row) => row.key === anchor.key) : -1
     this.scroll.changes =
       next >= 0
-        ? next * 36 + offset
-        : Math.min(this.scroll.changes, Math.max(0, (this.changeRows.length - 1) * 36))
-  }
-  private clearHistoricalDiff(): void {
-    if (this.files.state.activeDiff?.comparison) this.files.closeDiff()
+        ? next * height + offset
+        : Math.min(this.scroll.changes, Math.max(0, (this.changeRows.length - 1) * height))
   }
   private begin(key: 'branches' | 'log' | 'changes'): AbortController {
     this.cancel(key)

package/src/client/l2_biz/project-preview/views/l2-project-branch-select.tsx

@@ -0,0 +1,347 @@
+'use client'
+
+import { useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronsUpDownIcon } from 'lucide-react'
+import type { L4GitReadBranches } from '@common/l4_foundation/git/l4-git-history-contract'
+import {
+  buildL3GitBranchTree,
+  type L3GitBranchTreeNode
+} from '@client/l3_modules/project-files/l3-project-git-model'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import { Input } from '@client/l4_foundation/ui/shadcn/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@client/l4_foundation/ui/shadcn/popover'
+
+interface Props {
+  branches: L4GitReadBranches | null
+  value: string
+  onChange: (value: string) => void
+  ariaLabel: string
+  placeholder?: string
+  className?: string
+}
+
+interface BranchRow {
+  key: string
+  label: string
+  fullName: string
+  parentKey: string | null
+  level: number
+  position: number
+  siblingCount: number
+  expandable: boolean
+}
+
+function branchAncestors(value: string): string[] {
+  const result: string[] = []
+  let parent = value
+  while (parent.includes('/')) {
+    parent = parent.slice(0, parent.lastIndexOf('/'))
+    if (parent === 'refs') break
+    result.push(parent)
+  }
+  return result
+}
+
+export function L2ProjectBranchSelect({
+  branches,
+  value,
+  onChange,
+  ariaLabel,
+  placeholder,
+  className
+}: Props): React.JSX.Element {
+  const { t } = useTranslation('projectHistory')
+  const { t: common } = useTranslation('common')
+  const treeId = useId()
+  const searchRef = useRef<HTMLInputElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const rowRefs = useRef(new Map<string, HTMLButtonElement>())
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [activeKey, setActiveKey] = useState(value)
+  const [expanded, setExpanded] = useState(
+    () => new Set(['refs/heads', 'refs/remotes', ...branchAncestors(value)])
+  )
+  const search = query.trim().toLocaleLowerCase()
+  const selectedLabel =
+    value === 'HEAD' ? t('currentHead') : value.replace(/^refs\/(heads|remotes)\//, '')
+
+  const rows = useMemo((): BranchRow[] => {
+    const result: BranchRow[] = []
+    const groups = [
+      { key: 'refs/heads', label: t('localBranch'), names: branches?.local ?? [] },
+      { key: 'refs/remotes', label: t('remoteBranch'), names: branches?.remote ?? [] }
+    ]
+      .map((group) => ({
+        ...group,
+        nodes: buildL3GitBranchTree(
+          group.names.filter((name) => name.toLocaleLowerCase().includes(search))
+        )
+      }))
+      .filter((group) => group.nodes.length > 0)
+    const showHead = `HEAD ${t('currentHead')}`.toLocaleLowerCase().includes(search)
+    const rootCount = groups.length + Number(showHead)
+    if (showHead) {
+      result.push({
+        key: 'HEAD',
+        label: t('currentHead'),
+        fullName: t('currentHead'),
+        parentKey: null,
+        level: 1,
+        position: 1,
+        siblingCount: rootCount,
+        expandable: false
+      })
+    }
+    const append = (
+      nodes: readonly L3GitBranchTreeNode[],
+      prefix: string,
+      parentKey: string,
+      level: number
+    ): void => {
+      nodes.forEach((node, index) => {
+        const key = `${prefix}/${node.path}`
+        result.push({
+          key,
+          label: node.name,
+          fullName: node.path,
+          parentKey,
+          level,
+          position: index + 1,
+          siblingCount: nodes.length,
+          expandable: node.children.length > 0
+        })
+        if (expanded.has(key)) append(node.children, prefix, key, level + 1)
+      })
+    }
+    groups.forEach((group, index) => {
+      result.push({
+        key: group.key,
+        label: group.label,
+        fullName: group.label,
+        parentKey: null,
+        level: 1,
+        position: index + Number(showHead) + 1,
+        siblingCount: rootCount,
+        expandable: true
+      })
+      if (expanded.has(group.key)) append(group.nodes, group.key, group.key, 2)
+    })
+    return result
+  }, [branches, expanded, search, t])
+
+  const activeRow =
+    rows.find((row) => row.key === activeKey) ??
+    rows.find((row) => row.key === value) ??
+    rows.find((row) => !row.expandable) ??
+    rows[0]
+
+  const changeOpen = (next: boolean): void => {
+    if (next) {
+      setQuery('')
+      setActiveKey(value)
+      setExpanded((previous) => new Set([...previous, ...branchAncestors(value)]))
+    }
+    setOpen(next)
+  }
+
+  const changeSearch = (text: string): void => {
+    setQuery(text)
+    setActiveKey('')
+    const filter = text.trim().toLocaleLowerCase()
+    if (!filter) return
+    const keys = [
+      ...(branches?.local ?? [])
+        .filter((name) => name.toLocaleLowerCase().includes(filter))
+        .map((name) => `refs/heads/${name}`),
+      ...(branches?.remote ?? [])
+        .filter((name) => name.toLocaleLowerCase().includes(filter))
+        .map((name) => `refs/remotes/${name}`)
+    ]
+    setExpanded((previous) => new Set([...previous, ...keys.flatMap(branchAncestors)]))
+  }
+
+  const focusRow = (row: BranchRow | undefined): void => {
+    if (!row) return
+    setActiveKey(row.key)
+    const element = rowRefs.current.get(row.key)
+    element?.focus({ preventScroll: true })
+    element?.scrollIntoView({ block: 'nearest' })
+  }
+
+  const toggle = (row: BranchRow): void => {
+    setExpanded((previous) => {
+      const next = new Set(previous)
+      if (next.has(row.key)) next.delete(row.key)
+      else next.add(row.key)
+      return next
+    })
+  }
+
+  const handleTreeKey = (event: KeyboardEvent<HTMLButtonElement>, row: BranchRow): void => {
+    if (event.nativeEvent.isComposing || event.altKey || event.ctrlKey || event.metaKey) return
+    const index = rows.indexOf(row)
+    switch (event.key) {
+      case 'ArrowDown':
+        focusRow(rows[Math.min(index + 1, rows.length - 1)])
+        break
+      case 'ArrowUp':
+        focusRow(rows[Math.max(index - 1, 0)])
+        break
+      case 'Home':
+        focusRow(rows[0])
+        break
+      case 'End':
+        focusRow(rows.at(-1))
+        break
+      case 'ArrowRight':
+        if (row.expandable) {
+          if (expanded.has(row.key)) focusRow(rows[index + 1])
+          else toggle(row)
+        }
+        break
+      case 'ArrowLeft':
+        if (row.expandable && expanded.has(row.key)) toggle(row)
+        else focusRow(rows.find((candidate) => candidate.key === row.parentKey))
+        break
+      default:
+        return
+    }
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={changeOpen}
+      onOpenChangeComplete={(next) => {
+        if (next && document.activeElement === searchRef.current) {
+          rowRefs.current.get(value)?.scrollIntoView({ block: 'nearest' })
+        }
+      }}
+    >
+      <PopoverTrigger
+        render={
+          <Button
+            ref={triggerRef}
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-haspopup="dialog"
+            aria-label={ariaLabel}
+            aria-expanded={open}
+            title={selectedLabel || placeholder}
+            className={cn(
+              'w-full min-w-0 justify-between border-input px-2.5 font-normal focus-visible:-outline-offset-2',
+              className
+            )}
+          >
+            <span className={cn('min-w-0 truncate', !value && 'text-muted-foreground')}>
+              {selectedLabel || placeholder || common('selectPlaceholder')}
+            </span>
+            <ChevronsUpDownIcon className="text-muted-foreground" />
+          </Button>
+        }
+      />
+      <PopoverContent
+        align="start"
+        aria-label={ariaLabel}
+        initialFocus={searchRef}
+        finalFocus={triggerRef}
+        positionerClassName="z-[120]"
+        className="max-h-[min(30rem,var(--available-height))] w-[max(26rem,calc(var(--anchor-width)+8rem))] max-w-[min(calc(100vw-2rem),var(--available-width))] gap-0 overflow-hidden p-0"
+      >
+        <div className="shrink-0 border-b p-2">
+          <Input
+            ref={searchRef}
+            type="search"
+            aria-label={common('searchPlaceholder')}
+            aria-controls={treeId}
+            placeholder={common('searchPlaceholder')}
+            value={query}
+            onChange={(event) => changeSearch(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.nativeEvent.isComposing || event.altKey || event.ctrlKey || event.metaKey)
+                return
+              if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+              event.preventDefault()
+              event.stopPropagation()
+              focusRow(event.key === 'ArrowDown' ? activeRow : rows.at(-1))
+            }}
+          />
+        </div>
+        <div
+          id={treeId}
+          role="tree"
+          aria-label={ariaLabel}
+          className="min-h-0 overflow-y-auto overscroll-contain p-1"
+        >
+          {rows.map((row) => {
+            const selected = !row.expandable && row.key === value
+            const expandedRow = row.expandable ? expanded.has(row.key) : undefined
+            return (
+              <button
+                key={row.key}
+                ref={(element) => {
+                  if (element) rowRefs.current.set(row.key, element)
+                  else rowRefs.current.delete(row.key)
+                }}
+                type="button"
+                role="treeitem"
+                aria-label={row.fullName}
+                aria-level={row.level}
+                aria-posinset={row.position}
+                aria-setsize={row.siblingCount}
+                aria-selected={row.expandable ? undefined : selected}
+                aria-expanded={expandedRow}
+                tabIndex={activeRow?.key === row.key ? 0 : -1}
+                title={row.fullName}
+                className={cn(
+                  'flex min-h-8 w-full items-center gap-1.5 rounded-md py-1 pr-2 text-left text-sm outline-none transition-colors duration-150 hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [@media(pointer:coarse)]:min-h-10',
+                  selected && 'bg-accent text-accent-foreground',
+                  row.level === 1 && row.expandable && 'font-medium text-muted-foreground'
+                )}
+                style={{ paddingLeft: 8 + Math.min(row.level - 1, 8) * 12 }}
+                onFocus={() => setActiveKey(row.key)}
+                onKeyDown={(event) => handleTreeKey(event, row)}
+                onClick={() => {
+                  setActiveKey(row.key)
+                  if (row.expandable) toggle(row)
+                  else {
+                    onChange(row.key)
+                    setOpen(false)
+                  }
+                }}
+              >
+                {row.expandable ? (
+                  expandedRow ? (
+                    <ChevronDownIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                  ) : (
+                    <ChevronRightIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                  )
+                ) : (
+                  <span aria-hidden="true" className="size-3.5 shrink-0" />
+                )}
+                <span className="min-w-0 flex-1 break-all">{row.label}</span>
+                {selected ? <CheckIcon aria-hidden="true" className="size-3.5 shrink-0" /> : null}
+              </button>
+            )
+          })}
+        </div>
+        {!rows.length ? (
+          <p role="status" className="px-3 py-6 text-center text-sm text-muted-foreground">
+            {common('noMatches')}
+          </p>
+        ) : null}
+        {activeRow && activeRow.fullName !== activeRow.label ? (
+          <div className="max-h-24 shrink-0 overflow-y-auto border-t px-3 py-2 text-xs break-all text-muted-foreground">
+            {activeRow.fullName}
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  )
+}