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

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

@@ -0,0 +1,342 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Columns2Icon,
+  FileCode2Icon,
+  FolderTreeIcon,
+  GitBranchIcon,
+  Maximize2Icon,
+  Minimize2Icon,
+  PanelBottomCloseIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  RefreshCwIcon
+} from 'lucide-react'
+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 { useL2ProjectPreview } from './hooks/l2-use-project-preview'
+import { L2ProjectHistoryView } from './views/l2-project-history-view'
+
+const ignoreEscape = (): void => {}
+
+export function L2ProjectPreview({
+  clientId,
+  cwd,
+  refreshOnFocus,
+  title,
+  actions,
+  onEscape = ignoreEscape,
+  onUnauthorized
+}: {
+  clientId: string
+  cwd: string
+  refreshOnFocus: boolean
+  title?: ReactNode
+  actions?: ReactNode
+  onEscape?: () => void
+  onUnauthorized?: () => void
+}): React.JSX.Element {
+  const { t } = useTranslation('projectHistory')
+  const toast = useL4AppToast()
+  const {
+    files,
+    git,
+    history,
+    global,
+    updateGlobal,
+    page,
+    setPage,
+    historyPane,
+    setHistoryPane,
+    setContainer,
+    narrow,
+    stacked,
+    width,
+    openGit,
+    refresh
+  } = useL2ProjectPreview(clientId, cwd, refreshOnFocus, onUnauthorized)
+  const { directoryOpen, gitOpen, gitMaximized } = global
+  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
+  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={width < 1100}
+        refreshOnFocus={refreshOnFocus}
+        onEscape={onEscape}
+      />
+    </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 (
+    <div
+      ref={setContainer}
+      className="flex size-full min-h-0 min-w-0 flex-col overflow-hidden"
+      data-testid="project-preview"
+    >
+      <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">
+          {title ?? (
+            <h1 className="truncate text-lg font-semibold" title={cwd}>
+              {projectName}
+            </h1>
+          )}
+          <p className="truncate text-xs text-muted-foreground" title={cwd}>
+            {cwd}
+          </p>
+        </div>
+        <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>
+        {actions}
+      </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>
+            <Button
+              size="sm"
+              variant={page === 'code' ? 'secondary' : 'ghost'}
+              onClick={() => setPage('code')}
+            >
+              <FileCode2Icon className="size-4" />
+              {t('code')}
+            </Button>
+            <Button
+              size="sm"
+              variant={page === 'git' ? 'secondary' : 'ghost'}
+              onClick={() => openGit()}
+            >
+              <Columns2Icon className="size-4" />
+              Git
+            </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>
+      )}
+    </div>
+  )
+}

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

@@ -99,7 +99,7 @@ export class L2ProjectHistoryRuntime {
   getChangeRows(): readonly L3PathTreeRow[] {
     return this.changeRows
   }
-  restoreBrowsing(input: L2ProjectPreviewProject['history']): void {
+  restoreBrowsing(input: L2ProjectPreviewProject['history'], load = true): void {
     Object.assign(this.state, {
       repositoryRoot: input.repositoryRoot,
       mode: input.mode,
@@ -114,7 +114,7 @@ export class L2ProjectHistoryRuntime {
     this.restoredChangesScroll = input.changesScroll
     this.restoredCommit = input.selectedCommit
     this.restoredChangePath = input.selectedChangePath
-    if (input.repositoryRoot !== null) {
+    if (load && input.repositoryRoot !== null) {
       void this.loadBranches()
       void this.reload()
     }
@@ -138,7 +138,13 @@ export class L2ProjectHistoryRuntime {
   }
 
   setRepository(root: string): void {
-    if (root === this.state.repositoryRoot) return
+    if (root === this.state.repositoryRoot) {
+      if (this.state.branches.status === 'idle') {
+        void this.loadBranches()
+        void this.reload()
+      }
+      return
+    }
     this.cancel('branches')
     this.state.repositoryRoot = root
     this.state.tip = this.state.target = 'HEAD'

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

@@ -0,0 +1,168 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  ArrowLeftIcon,
+  ChevronRightIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  LoaderCircleIcon
+} from 'lucide-react'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import { Input } from '@client/l4_foundation/ui/shadcn/input'
+import type { L2ProjectPicker } from '../hooks/l2-use-project-picker'
+
+export function L2ProjectPickerView({
+  picker,
+  onSelect
+}: {
+  picker: L2ProjectPicker
+  onSelect: (cwd: string) => void
+}): React.JSX.Element {
+  const { t } = useTranslation('projectHistory')
+  const [path, setPath] = useState('')
+  const browsing = picker.target.view === 'browser'
+  const open = (): void => {
+    const directory = path
+      .trim()
+      .replace(/^(["'])(.*)\1$/, '$2')
+      .trim()
+    if (directory) onSelect(directory)
+  }
+  return (
+    <section
+      className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-8 sm:px-6 sm:py-12"
+      data-testid="project-picker"
+    >
+      <div>
+        <h1 className="text-xl font-semibold">{t('chooseProject')}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{t('serverDirectoryHint')}</p>
+      </div>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          open()
+        }}
+        className="space-y-2"
+      >
+        <label htmlFor="project-directory" className="text-sm font-medium">
+          {t('directoryPath')}
+        </label>
+        <div className="flex gap-2">
+          <Input
+            id="project-directory"
+            value={path}
+            onChange={(event) => setPath(event.target.value)}
+            placeholder={t('directoryPlaceholder')}
+            autoComplete="off"
+            className="min-w-0 flex-1 font-mono"
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && event.nativeEvent.isComposing) event.preventDefault()
+            }}
+          />
+          <Button type="submit" disabled={!path.trim()}>
+            {t('openProject')}
+          </Button>
+        </div>
+      </form>
+      <div className="min-w-0">
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+          <Button
+            variant={browsing ? 'ghost' : 'secondary'}
+            onClick={picker.showProjects}
+            disabled={picker.loading}
+          >
+            {t('recentProjects')}
+          </Button>
+          <Button
+            variant={browsing ? 'secondary' : 'ghost'}
+            onClick={() => picker.browse(null)}
+            disabled={picker.loading}
+          >
+            <FolderOpenIcon className="size-4" />
+            {t('browseDirectories')}
+          </Button>
+        </div>
+        {picker.error ? (
+          <div role="alert" className="space-y-3 rounded-lg border p-4">
+            <p className="break-words text-sm text-destructive">{picker.error}</p>
+            <Button variant="outline" onClick={picker.retry}>
+              {t('retry')}
+            </Button>
+          </div>
+        ) : picker.loading ? (
+          <div role="status" className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            {t('loadingDirectories')}
+          </div>
+        ) : browsing && picker.browser ? (
+          <div>
+            <div className="mb-2 flex items-center gap-2">
+              <Button
+                size="icon-sm"
+                variant="ghost"
+                aria-label={t('parentDirectory')}
+                disabled={picker.browser.cwd === null}
+                onClick={() => picker.browse(picker.browser?.parentCwd ?? null)}
+              >
+                <ArrowLeftIcon className="size-4" />
+              </Button>
+              <span className="min-w-0 flex-1 break-all font-mono text-sm">
+                {picker.browser.cwd ?? t('directoryRoots')}
+              </span>
+              {picker.browser.cwd ? (
+                <Button size="sm" onClick={() => onSelect(picker.browser!.cwd!)}>
+                  {t('openThisDirectory')}
+                </Button>
+              ) : null}
+            </div>
+            <div className="divide-y rounded-lg border">
+              {picker.browser.directories.map((directory) => (
+                <button
+                  key={directory.cwd}
+                  type="button"
+                  className="flex min-h-10 w-full items-center gap-2 px-3 py-2 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
+                  onClick={() => picker.browse(directory.cwd)}
+                >
+                  <FolderIcon className="size-4 shrink-0 text-muted-foreground" />
+                  <span className="min-w-0 flex-1 break-all text-sm">{directory.name}</span>
+                  <ChevronRightIcon className="size-4 shrink-0" />
+                </button>
+              ))}
+              {!picker.browser.directories.length ? (
+                <p className="p-4 text-sm text-muted-foreground">{t('noSubdirectories')}</p>
+              ) : null}
+            </div>
+          </div>
+        ) : (
+          <div className="divide-y rounded-lg border">
+            {picker.projects.map((project) => (
+              <button
+                key={project.cwd}
+                type="button"
+                className="flex min-h-14 w-full items-center gap-3 px-3 py-2 text-left hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
+                onClick={() => onSelect(project.cwd)}
+              >
+                <FolderIcon className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">
+                    {project.cwd.replaceAll('\\', '/').split('/').filter(Boolean).at(-1) ??
+                      project.cwd}
+                  </span>
+                  <span className="block break-all font-mono text-xs text-muted-foreground">
+                    {project.cwd}
+                  </span>
+                </span>
+                <ChevronRightIcon className="size-4 shrink-0" />
+              </button>
+            ))}
+            {!picker.projects.length ? (
+              <p className="p-4 text-sm text-muted-foreground">{t('noRecentProjects')}</p>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/client/l2_biz/settings/hooks/l2-use-model-settings.ts

@@ -196,6 +196,36 @@ export function useL2ModelSettings(
     }
   }
 
+  async function confirmModelChanges(
+    input: L2ModelSettingsReplaceRequest,
+    removedPresetCount = 0
+  ): Promise<boolean> {
+    const { projectDefaults } = await biz.previewSettings(input)
+    if (projectDefaults.length > 0) {
+      const description = [
+        t('replaceProjectDefaultsDescription'),
+        ...(removedPresetCount > 0
+          ? [t('removeInvalidPresets', { count: removedPresetCount })]
+          : [])
+      ].join(' ')
+      return confirm({
+        title: t('replaceProjectDefaultsTitle'),
+        description,
+        content: createElement(L2ModelReplacementPreview, { projectDefaults }),
+        confirmLabel: t('confirmAndSaveModels'),
+        confirmVariant: 'default'
+      })
+    }
+    return (
+      removedPresetCount === 0 ||
+      confirm({
+        title: t('removeInvalidPresetsTitle'),
+        description: t('removeInvalidPresets', { count: removedPresetCount }),
+        confirmLabel: t('removeAndSave')
+      })
+    )
+  }
+
   async function saveConfig(): Promise<void> {
     if (savingRef.current || inputState.invalid || serviceDirty || nativeOpen) return
     if (!settings || !formDirty) {
@@ -230,36 +260,7 @@ export function useL2ModelSettings(
           ? { modelReplacements: modelReplacements.current }
           : {})
       }
-      const { projectDefaults } = modelReplacements.current.length
-        ? await biz.previewSettings(input)
-        : { projectDefaults: [] }
-      if (projectDefaults.length > 0) {
-        const description = [
-          t('replaceProjectDefaultsDescription'),
-          ...(removedPresetCount > 0
-            ? [t('removeInvalidPresets', { count: removedPresetCount })]
-            : [])
-        ].join(' ')
-        if (
-          !(await confirm({
-            title: t('replaceProjectDefaultsTitle'),
-            description,
-            content: createElement(L2ModelReplacementPreview, { projectDefaults }),
-            confirmLabel: t('confirmAndSaveModels'),
-            confirmVariant: 'default'
-          }))
-        )
-          return
-      } else if (
-        removedPresetCount > 0 &&
-        !(await confirm({
-          title: t('removeInvalidPresetsTitle'),
-          description: t('removeInvalidPresets', { count: removedPresetCount }),
-          confirmLabel: t('removeAndSave')
-        }))
-      ) {
-        return
-      }
+      if (!(await confirmModelChanges(input, removedPresetCount))) return
 
       await biz.replaceSettings(input)
       applySettings(await biz.getSettings())
@@ -335,7 +336,9 @@ export function useL2ModelSettings(
     setNativeError(null)
     try {
       const nativeConfig = biz.parseNativeConfig(nativeText)
-      await biz.replaceSettings({ nativeConfig })
+      const input = { nativeConfig }
+      if (!(await confirmModelChanges(input))) return
+      await biz.replaceSettings(input)
       applySettings(await biz.getSettings())
       setNativeOpen(false)
       toast.success(t('modelSaved'))

package/src/client/l2_biz/settings/views/l2-model-replacement-preview.tsx

@@ -24,7 +24,13 @@ export function L2ModelReplacementPreview({
             {from.provider}/{from.modelId} · {t(THINKING_LABELS[from.thinkingLevel])}
             <span className="mx-1.5">→</span>
             <span className="text-foreground">
-              {to.provider}/{to.modelId} · {t(THINKING_LABELS[to.thinkingLevel])}
+              {to ? (
+                <>
+                  {to.provider}/{to.modelId} · {t(THINKING_LABELS[to.thinkingLevel])}
+                </>
+              ) : (
+                t('clearProjectDefault')
+              )}
             </span>
           </p>
         </li>

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

@@ -35,11 +35,12 @@ export function subscribeL2ProjectPreviewDirectories(
     )
     syncL2ProjectPreviewGitReferences(files, git, getSessions(), getFocusedWorkId())
   })
-  for (const session of getSessions()) {
-    const state = chat.getSourceState(session)
+  for (const { workId, sessionId, branchId } of getSessions()) {
+    const source = { workId, sessionId, branchId }
+    const state = chat.getSourceState(source)
     if (state.syncStatus === 'loading') continue
     files.applyPreviewDirectories(
-      session,
+      source,
       readL4ProjectPreviewState(state.runtime.plugins[L4_PROJECT_PREVIEW_PLUGIN_KEY])
     )
   }