@jetcrab/pi-desk 1.1.20-dev → 1.1.22-dev

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

@@ -1,11 +1,55 @@
 import { revealL3ProjectPath } from '@client/l3_modules/project-files/l3-project-file-actions'
-import { createL3ProjectReader } from '@client/l3_modules/project-files/l3-project-reader'
+import {
+  createL3ProjectReader,
+  requestL3Project
+} from '@client/l3_modules/project-files/l3-project-reader'
+import {
+  L2PiDirectoryListRequestSchema,
+  L2PiDirectoryListResponseSchema,
+  L2PiDirectoryEntryListRequestSchema,
+  L2PiDirectoryEntryListResponseSchema,
+  type L2PiDirectoryListResponse,
+  type L2PiDirectoryEntryListResponse
+} from '@common/l2_biz/pi-session/l2-pi-session-contract'
 import { L3ProjectFileRuntime } from '@client/l3_modules/project-files/l3-project-file-runtime'
 import { L3ProjectGitRuntime } from '@client/l3_modules/project-files/l3-project-git-runtime'
 import { readL3ImagePreviewMode } from '@client/l3_modules/preferences/l3-work-session-file-preferences'
 import { L2ProjectHistoryRuntime } from './runtime/l2-project-history-runtime'
 import type { L2ProjectPreviewGlobal, L2ProjectPreviewProject } from './l2-project-preview-storage'
 
+export function listL2PreviewProjects(
+  clientId: string,
+  signal: AbortSignal
+): Promise<L2PiDirectoryListResponse> {
+  return requestL3Project(
+    clientId,
+    {
+      path: '/api/pi/directories/list',
+      request: L2PiDirectoryListRequestSchema,
+      response: L2PiDirectoryListResponseSchema
+    },
+    { forceRefresh: false },
+    signal
+  )
+}
+
+export function browseL2PreviewDirectory(
+  clientId: string,
+  cwd: string | null,
+  signal: AbortSignal
+): Promise<L2PiDirectoryEntryListResponse> {
+  return requestL3Project(
+    clientId,
+    {
+      path: '/api/pi/directory-entries/list',
+      request: L2PiDirectoryEntryListRequestSchema,
+      response: L2PiDirectoryEntryListResponseSchema
+    },
+    { cwd },
+    signal
+  )
+}
+
 export interface L2ProjectPreviewOwner {
   files: L3ProjectFileRuntime
   git: L3ProjectGitRuntime
@@ -18,9 +62,10 @@ export function createL2ProjectPreviewOwner(
   cwd: string,
   onNotice: (message: string) => void,
   initial: L2ProjectPreviewProject | null,
-  global: L2ProjectPreviewGlobal
+  global: L2ProjectPreviewGlobal,
+  options: { lazyHistory?: boolean; onUnauthorized?: () => void } = {}
 ): L2ProjectPreviewOwner {
-  const reader = createL3ProjectReader(clientId, { cwd })
+  const reader = createL3ProjectReader(clientId, { cwd }, options.onUnauthorized)
   const files = new L3ProjectFileRuntime(cwd, reader, {
     imagePreviewMode: readL3ImagePreviewMode,
     onNotice,
@@ -42,7 +87,7 @@ export function createL2ProjectPreviewOwner(
       git.setChangesOnly(cwd, initial.changesOnly)
       for (const root of initial.expandedRepositories) git.toggleRepository(cwd, root)
       files.restoreBrowsing(initial)
-      history.restoreBrowsing(initial.history)
+      history.restoreBrowsing(initial.history, !options.lazyHistory)
     },
     dispose(): void {
       history.dispose()

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

@@ -1,46 +1,20 @@
 'use client'
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  Columns2Icon,
-  FileCode2Icon,
-  FolderTreeIcon,
-  GitBranchIcon,
-  Maximize2Icon,
-  Minimize2Icon,
-  PanelBottomCloseIcon,
-  PanelLeftCloseIcon,
-  PanelLeftOpenIcon,
-  RefreshCwIcon,
-  XIcon
-} from 'lucide-react'
+import { Maximize2Icon, Minimize2Icon, XIcon } from 'lucide-react'
 import {
   L4AppDialogRoot,
   L4AppDialogContent,
   L4AppDialogTitle,
   L4AppDialogDescription
 } from '@client/l4_foundation/ui/l4-app-dialog'
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle
-} from '@client/l4_foundation/ui/shadcn/resizable'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
-import { L3ProjectFileBrowser } from '@client/l3_modules/project-files/l3-project-file-browser'
-import { L3ProjectFileTabs } from '@client/l3_modules/project-files/l3-project-file-tabs'
-import { L3ProjectDocumentView } from '@client/l3_modules/project-files/l3-project-document-view'
-import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
-import { copyL4BrowserText } from '@client/l4_foundation/lib/l4-browser-clipboard'
 import { cn } from '@client/l4_foundation/lib/l4-utils'
-import { createL2ProjectPreviewOwner } from './l2-project-preview-biz'
-import { L2ProjectHistoryView } from './views/l2-project-history-view'
+import { L2ProjectPreview } from './l2-project-preview'
 import {
   loadL2ProjectPreviewGlobal,
-  openL2ProjectPreviewProject,
-  saveL2ProjectPreviewGlobal,
-  saveL2ProjectPreviewProject,
-  type L2ProjectPreviewGlobal,
-  type L2ProjectPreviewProject
+  saveL2ProjectPreviewGlobal
 } from './l2-project-preview-storage'
 
 export function L2ProjectPreviewDialog({
@@ -53,306 +27,8 @@ export function L2ProjectPreviewDialog({
   onClose: () => void
 }): React.JSX.Element {
   const { t } = useTranslation('projectHistory')
-  const toast = useL4AppToast()
-  const [initialGlobal] = useState(loadL2ProjectPreviewGlobal)
-  const [global, setGlobal] = useState(initialGlobal)
-  const updateGlobal = useCallback((change: Partial<L2ProjectPreviewGlobal>): void => {
-    setGlobal((current) => ({ ...current, ...change }))
-    saveL2ProjectPreviewGlobal({ ...loadL2ProjectPreviewGlobal(), ...change })
-  }, [])
-  const [saved] = useState(() => openL2ProjectPreviewProject(cwd))
-  const [owner] = useState(() =>
-    createL2ProjectPreviewOwner(
-      clientId,
-      cwd,
-      (text) => toast.show({ level: 'info', title: text }),
-      saved,
-      initialGlobal
-    )
-  )
-  const { files, git, history } = owner
-  useSyncExternalStore(files.subscribe, files.getRevision, files.getRevision)
-  const gitRevision = useSyncExternalStore(git.subscribe, git.getRevision, git.getRevision)
-  useSyncExternalStore(history.subscribe, history.getRevision, history.getRevision)
-  const { directoryOpen, gitOpen, gitMaximized, maximized } = global
-  const [page, setPage] = useState<'files' | 'code' | 'git'>(saved?.page ?? 'files')
-  const [size, setSize] = useState({ width: 1200, height: 800 })
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
-  const [historyPane, setHistoryPane] = useState<'log' | 'files'>(saved?.historyPane ?? 'log')
-  const live = useRef<object | null>(null)
-  const saveCurrent = useRef<() => void>(() => undefined)
-  const narrow = size.width < 900
-  const stacked = narrow || size.height < 680
+  const [maximized, setMaximized] = useState(() => loadL2ProjectPreviewGlobal().maximized)
   const projectName = cwd.replaceAll('\\', '/').split('/').filter(Boolean).at(-1) ?? cwd
-  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
-  useEffect(() => {
-    saveCurrent.current = (): void => {
-      const currentGit = git.getWorkspace(cwd)!
-      const currentHistory = history.state
-      const snapshot: L2ProjectPreviewProject = {
-        page,
-        historyPane,
-        tabs: [...files.state.tabs],
-        activePath: files.state.activePath,
-        ...files.getBrowsingDocumentSettings(),
-        expandedPaths: [...files.state.expandedPaths].slice(0, 500),
-        treeScrollTop: files.state.treeScrollTop,
-        searchQuery: files.state.search.query.slice(0, 200),
-        changesOnly: currentGit.changesOnly,
-        expandedRepositories: [...currentGit.expandedRepositories].slice(0, 100),
-        history: {
-          repositoryRoot: currentHistory.repositoryRoot,
-          mode: currentHistory.mode,
-          tip: currentHistory.tip,
-          base: currentHistory.base,
-          target: currentHistory.target,
-          strategy: currentHistory.strategy,
-          query: currentHistory.query.slice(0, 200),
-          author: currentHistory.author.slice(0, 200),
-          selectedCommit: currentHistory.selectedCommit,
-          selectedChangePath: currentHistory.selectedChangePath,
-          logScroll: history.scroll.log,
-          changesScroll: history.scroll.changes
-        },
-        activeDiff: files.state.activeDiff
-          ? {
-              repositoryRoot: files.state.activeDiff.repositoryRoot,
-              path: files.state.activeDiff.path,
-              ...(files.state.activeDiff.comparison
-                ? { comparison: files.state.activeDiff.comparison }
-                : {})
-            }
-          : null
-      }
-      saveL2ProjectPreviewProject(cwd, snapshot)
-    }
-  }, [cwd, files, git, history, historyPane, page])
-
-  useEffect(() => {
-    const token = {}
-    live.current = token
-    owner.restore()
-    void files.ensureRoot()
-    void git.ensureSnapshot(cwd)
-    let lastFocus = Date.now()
-    const focus = (): void => {
-      if (Date.now() - lastFocus < 5000) return
-      lastFocus = Date.now()
-      void git.refreshSnapshot(cwd)
-    }
-    window.addEventListener('focus', focus)
-    const saveOnLeave = (): void => saveCurrent.current()
-    window.addEventListener('pagehide', saveOnLeave)
-    return () => {
-      live.current = null
-      window.removeEventListener('focus', focus)
-      window.removeEventListener('pagehide', saveOnLeave)
-      queueMicrotask(() => {
-        if (live.current === null) {
-          saveCurrent.current()
-          owner.dispose()
-        }
-      })
-    }
-  }, [cwd, files, git, owner])
-  useEffect(() => {
-    if (!container) return
-    // Portal 的 DOM 可能晚于外层 effect；跟随实际节点绑定与释放。
-    const observer = new ResizeObserver(() =>
-      setSize({ width: container.clientWidth, height: container.clientHeight })
-    )
-    observer.observe(container)
-    return () => observer.disconnect()
-  }, [container])
-  useEffect(() => {
-    if (!gitOpen || !repositories.length) return
-    if (repositories.some((repository) => repository.root === history.state.repositoryRoot)) return
-    const active = state.activeDiff
-      ? [state.activeDiff.repositoryRoot, state.activeDiff.path].filter(Boolean).join('/')
-      : state.activePath
-    const belonging = active
-      ? [...repositories]
-          .sort((left, right) => right.root.length - left.root.length)
-          .find((repository) => !repository.root || active.startsWith(`${repository.root}/`))
-      : null
-    history.setRepository(
-      belonging?.root ??
-        repositories.find((item) => item.root === '')?.root ??
-        repositories[0]!.root
-    )
-  }, [gitOpen, gitRevision, history, repositories, state.activeDiff, state.activePath])
-
-  useEffect(
-    () =>
-      git.subscribe(() => {
-        const treeLayout = git.getWorkspace(cwd)?.layout
-        if (treeLayout && treeLayout !== global.treeLayout) updateGlobal({ treeLayout })
-      }),
-    [cwd, git, global.treeLayout, updateGlobal]
-  )
-
-  const openGit = (root?: string): void => {
-    updateGlobal({ gitOpen: true })
-    setPage('git')
-    if (root !== undefined) history.setRepository(root)
-  }
-  const refresh = (): void => {
-    files.refreshTree()
-    void git.refreshSnapshot(cwd)
-    if (state.activeDiff) files.reloadDiff()
-    else if (state.activePath) files.reloadFile(state.activePath)
-    if (gitOpen) history.refresh()
-  }
-  const fileTree = (
-    <L3ProjectFileBrowser
-      cwd={cwd}
-      projectName={projectName}
-      runtime={files}
-      gitRuntime={git}
-      onOpenGitBranches={openGit}
-      onFileOpened={() => setPage('code')}
-    />
-  )
-  const code = (
-    <div className="flex size-full min-h-0 min-w-0 flex-col">
-      <L3ProjectFileTabs
-        cwd={cwd}
-        gitRuntime={git}
-        paths={state.tabs}
-        activePath={state.activePath}
-        diffPath={diffPath}
-        mobile={narrow}
-        onActivate={(path) => files.openFile(path)}
-        onClose={(path, scope) => files.closeTabs(path, scope)}
-      />
-      <L3ProjectDocumentView
-        runtime={files}
-        gitRuntime={git}
-        compact={size.width < 1100 || narrow}
-        onEscape={onClose}
-      />
-    </div>
-  )
-  const gitView = (
-    <div className="flex size-full min-h-0 min-w-0 flex-col">
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b bg-muted px-3">
-        <GitBranchIcon className="size-4" />
-        <span className="flex-1 text-sm font-medium">Git</span>
-        {!stacked ? (
-          <Button
-            size="icon-sm"
-            variant="ghost"
-            aria-label={t(gitMaximized ? 'restoreGit' : 'maximizeGit')}
-            onClick={() => updateGlobal({ gitMaximized: !gitMaximized })}
-          >
-            {gitMaximized ? (
-              <Minimize2Icon className="size-4" />
-            ) : (
-              <Maximize2Icon className="size-4" />
-            )}
-          </Button>
-        ) : null}
-        <Button
-          size="icon-sm"
-          variant="ghost"
-          aria-label={t('collapseGit')}
-          onClick={() => {
-            updateGlobal({ gitOpen: false, gitMaximized: false })
-            setPage('code')
-          }}
-        >
-          <PanelBottomCloseIcon className="size-4" />
-        </Button>
-      </div>
-      {repositories.length ? (
-        <L2ProjectHistoryView
-          state={history.state}
-          cwd={cwd}
-          changeRows={history.getChangeRows()}
-          onSelectChange={(path) => history.selectChange(path)}
-          onToggleDirectory={(path) => history.toggleChangeDirectory(path)}
-          onReveal={(path, type) => files.revealFile(path, type)}
-          repositories={repositories}
-          projectName={projectName}
-          narrow={narrow}
-          mobilePane={historyPane}
-          onMobilePane={setHistoryPane}
-          scroll={history.scroll}
-          onScroll={(pane, value) => history.setScroll(pane, value)}
-          panelSizes={{ log: global.logSize, changes: global.changeSize }}
-          onPanelSize={(panel, value) =>
-            updateGlobal(panel === 'log' ? { logSize: value } : { changeSize: value })
-          }
-          onRepository={(root) => {
-            history.setRepository(root)
-            setHistoryPane('log')
-          }}
-          onMode={(mode) => history.setMode(mode)}
-          onRevision={(field, value) => history.setRevision(field, value)}
-          onStrategy={(strategy) => history.setStrategy(strategy)}
-          onQuery={(query) => history.setQuery(query)}
-          onAuthor={(author) => history.setAuthor(author)}
-          onCommit={(oid, parent) => history.selectCommit(oid, parent)}
-          onAggregate={() => history.showAggregate()}
-          onMoreLog={() => history.loadMoreLog()}
-          onMoreChanges={() => history.loadMoreChanges()}
-          onOpenFile={(path) => {
-            history.openChange(path)
-            setPage('code')
-            updateGlobal({ gitMaximized: false })
-          }}
-          onRefresh={() => history.refresh()}
-          onCopy={(text) => {
-            void copyL4BrowserText(text).then((ok) => {
-              if (!ok) toast.error(t('copyFailed'))
-            })
-          }}
-        />
-      ) : (
-        <p className="p-4 text-sm text-muted-foreground">
-          {gitState.snapshot.status === 'loading' || gitState.snapshot.status === 'idle'
-            ? t('findingGit')
-            : (gitState.snapshot.error ?? t('noGit'))}
-        </p>
-      )}
-    </div>
-  )
-  const upper = (
-    <ResizablePanelGroup
-      key={directoryOpen ? 'tree-visible' : 'tree-hidden'}
-      orientation="horizontal"
-      defaultLayout={
-        directoryOpen
-          ? { 'project-tree': global.directorySize, 'project-code': 100 - global.directorySize }
-          : undefined
-      }
-      onLayoutChanged={(layout, meta) => {
-        if (meta.isUserInteraction && layout['project-tree'] !== undefined)
-          updateGlobal({ directorySize: layout['project-tree'] })
-      }}
-    >
-      {directoryOpen ? (
-        <ResizablePanel
-          id="project-tree"
-          defaultSize={`${global.directorySize}%`}
-          minSize="180px"
-          maxSize="40%"
-        >
-          {fileTree}
-        </ResizablePanel>
-      ) : null}
-      {directoryOpen ? <ResizableHandle /> : null}
-      <ResizablePanel id="project-code" minSize="40%">
-        {code}
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  )
-
   return (
     <L4AppDialogRoot
       open
@@ -361,7 +37,6 @@ export function L2ProjectPreviewDialog({
       }}
     >
       <L4AppDialogContent
-        ref={setContainer}
         showCloseButton={false}
         data-testid="project-preview-dialog"
         className={cn(
@@ -370,134 +45,51 @@ export function L2ProjectPreviewDialog({
           'max-sm:h-dvh max-sm:max-h-none max-sm:w-dvw max-sm:rounded-none'
         )}
       >
-        <header className="flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b bg-muted px-3 py-2 pt-[max(8px,env(safe-area-inset-top))]">
-          {!stacked ? (
-            <Button
-              size="icon-sm"
-              variant="ghost"
-              aria-label={t(directoryOpen ? 'collapseDirectory' : 'expandDirectory')}
-              onClick={() => updateGlobal({ directoryOpen: !directoryOpen })}
-            >
-              {directoryOpen ? (
-                <PanelLeftCloseIcon className="size-4" />
-              ) : (
-                <PanelLeftOpenIcon className="size-4" />
-              )}
-            </Button>
-          ) : null}
-          <div className="min-w-0 flex-1">
+        <L4AppDialogDescription className="sr-only">
+          {t('previewDescription')}
+        </L4AppDialogDescription>
+        <L2ProjectPreview
+          clientId={clientId}
+          cwd={cwd}
+          refreshOnFocus
+          onEscape={onClose}
+          title={
             <L4AppDialogTitle className="truncate" title={cwd}>
               {projectName}
             </L4AppDialogTitle>
-            <p className="truncate text-xs text-muted-foreground" title={cwd}>
-              {cwd}
-            </p>
-          </div>
-          <L4AppDialogDescription className="sr-only">
-            {t('previewDescription')}
-          </L4AppDialogDescription>
-          <Button
-            size="sm"
-            variant={gitOpen ? 'secondary' : 'ghost'}
-            aria-pressed={gitOpen}
-            onClick={() => openGit()}
-          >
-            <GitBranchIcon className="size-4" />
-            <span className="max-sm:hidden">{t('gitRecords')}</span>
-          </Button>
-          <Button size="icon-sm" variant="ghost" aria-label={t('refreshPreview')} onClick={refresh}>
-            <RefreshCwIcon className="size-4" />
-          </Button>
-          {!narrow ? (
-            <Button
-              size="icon-sm"
-              variant="ghost"
-              aria-label={t(maximized ? 'restoreWindow' : 'maximizeWindow')}
-              onClick={() => updateGlobal({ maximized: !maximized })}
-            >
-              {maximized ? (
-                <Minimize2Icon className="size-4" />
-              ) : (
-                <Maximize2Icon className="size-4" />
-              )}
-            </Button>
-          ) : null}
-          <Button size="icon-sm" variant="ghost" aria-label={t('closePreview')} onClick={onClose}>
-            <XIcon className="size-4" />
-          </Button>
-        </header>
-        {gitState.snapshot.error ? (
-          <p role="alert" className="shrink-0 border-b px-3 py-2 text-sm text-destructive">
-            {gitState.snapshot.error}
-          </p>
-        ) : null}
-        {stacked ? (
-          <>
-            <div
-              className="flex shrink-0 gap-1 border-b px-2 py-1"
-              role="group"
-              aria-label={t('previewArea')}
-            >
-              <Button
-                size="sm"
-                variant={page === 'files' ? 'secondary' : 'ghost'}
-                onClick={() => setPage('files')}
-              >
-                <FolderTreeIcon className="size-4" />
-                {t('files')}
-              </Button>
+          }
+          actions={
+            <>
               <Button
-                size="sm"
-                variant={page === 'code' ? 'secondary' : 'ghost'}
-                onClick={() => setPage('code')}
+                size="icon-sm"
+                variant="ghost"
+                className="max-md:hidden"
+                aria-label={t(maximized ? 'restoreWindow' : 'maximizeWindow')}
+                onClick={() => {
+                  setMaximized(!maximized)
+                  saveL2ProjectPreviewGlobal({
+                    ...loadL2ProjectPreviewGlobal(),
+                    maximized: !maximized
+                  })
+                }}
               >
-                <FileCode2Icon className="size-4" />
-                {t('code')}
+                {maximized ? (
+                  <Minimize2Icon className="size-4" />
+                ) : (
+                  <Maximize2Icon className="size-4" />
+                )}
               </Button>
               <Button
-                size="sm"
-                variant={page === 'git' ? 'secondary' : 'ghost'}
-                onClick={() => openGit()}
+                size="icon-sm"
+                variant="ghost"
+                aria-label={t('closePreview')}
+                onClick={onClose}
               >
-                <Columns2Icon className="size-4" />
-                Git
+                <XIcon className="size-4" />
               </Button>
-            </div>
-            <div className="min-h-0 flex-1">
-              {page === 'files' ? fileTree : page === 'git' ? gitView : code}
-            </div>
-          </>
-        ) : gitMaximized && gitOpen ? (
-          gitView
-        ) : (
-          <ResizablePanelGroup
-            key={gitOpen ? 'git-visible' : 'git-hidden'}
-            orientation="vertical"
-            defaultLayout={
-              gitOpen
-                ? { 'project-main': 100 - global.gitSize, 'project-git': global.gitSize }
-                : undefined
-            }
-            onLayoutChanged={(layout, meta) => {
-              if (meta.isUserInteraction && layout['project-git'] !== undefined)
-                updateGlobal({ gitSize: layout['project-git'] })
-            }}
-          >
-            <ResizablePanel
-              id="project-main"
-              defaultSize={gitOpen ? `${100 - global.gitSize}%` : '100%'}
-              minSize="35%"
-            >
-              {upper}
-            </ResizablePanel>
-            {gitOpen ? <ResizableHandle /> : null}
-            {gitOpen ? (
-              <ResizablePanel id="project-git" defaultSize={`${global.gitSize}%`} minSize="300px">
-                {gitView}
-              </ResizablePanel>
-            ) : null}
-          </ResizablePanelGroup>
-        )}
+            </>
+          }
+        />
       </L4AppDialogContent>
     </L4AppDialogRoot>
   )

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

@@ -0,0 +1,61 @@
+'use client'
+
+import { FolderOpenIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import { L2ProjectPreview } from './l2-project-preview'
+import { useL2ProjectPicker } from './hooks/l2-use-project-picker'
+import { L2ProjectPickerView } from './views/l2-project-picker'
+
+function ProjectPicker({
+  clientId,
+  onSelect,
+  onUnauthorized
+}: {
+  clientId: string
+  onSelect: (cwd: string) => void
+  onUnauthorized: () => void
+}): React.JSX.Element {
+  const picker = useL2ProjectPicker(clientId, onUnauthorized)
+  return <L2ProjectPickerView picker={picker} onSelect={onSelect} />
+}
+
+export function L2ProjectPreviewPage({
+  clientId,
+  cwd,
+  onSelect,
+  onUnauthorized
+}: {
+  clientId: string
+  cwd: string | null
+  onSelect: (cwd: string | null) => void
+  onUnauthorized: () => void
+}): React.JSX.Element {
+  const { t } = useTranslation('projectHistory')
+  return (
+    <main
+      className="flex h-dvh min-w-0 flex-col overflow-hidden bg-background text-foreground"
+      data-testid="project-preview-page"
+    >
+      {cwd ? (
+        <L2ProjectPreview
+          key={cwd}
+          clientId={clientId}
+          cwd={cwd}
+          refreshOnFocus={false}
+          onUnauthorized={onUnauthorized}
+          actions={
+            <Button size="sm" variant="outline" onClick={() => onSelect(null)}>
+              <FolderOpenIcon className="size-4" />
+              <span>{t('switchProject')}</span>
+            </Button>
+          }
+        />
+      ) : (
+        <div className="min-h-0 flex-1 overflow-auto">
+          <ProjectPicker clientId={clientId} onSelect={onSelect} onUnauthorized={onUnauthorized} />
+        </div>
+      )}
+    </main>
+  )
+}