@jetcrab/pi-desk 1.1.18-dev → 1.1.21

package/src/client/l2_biz/plugin-host/l2-plugin-session-header.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import { EllipsisIcon } from 'lucide-react'
+import { useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BrowserSessionHeaderItemTarget, PluginSource } from '@jetcrab/pi-desk-sdk/browser'
+import { useL4PluginRegistry } from '@client/l4_foundation/plugin-host/l4-plugin-host-context'
+import { L4PluginIcon } from '@client/l4_foundation/plugin-host/l4-plugin-icon'
+import type { L4PluginBrowserContributionDescriptor } from '@client/l4_foundation/plugin-host/l4-plugin-host-runtime'
+import { Button, buttonVariants } from '@client/l4_foundation/ui/shadcn/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger
+} from '@client/l4_foundation/ui/shadcn/popover'
+import { L2PluginContributionHost } from './l2-plugin-contribution-host'
+import { calculateL2PluginSessionHeaderInlineCount } from './l2-plugin-session-header-layout'
+import { L2PluginSessionHeaderAction } from './views/l2-plugin-session-header-action'
+
+interface HeaderItem {
+  pluginName: string
+  descriptor: Extract<L4PluginBrowserContributionDescriptor, { kind: 'session-header-item' }>
+}
+
+interface L2PluginSessionHeaderProps {
+  source: PluginSource
+  title: ReactNode
+}
+
+function itemKey(item: HeaderItem): string {
+  return `${item.pluginName}:${item.descriptor.contributionName}`
+}
+
+function HeaderItemView({
+  item,
+  source,
+  presentation,
+  onSelected
+}: {
+  item: HeaderItem
+  source: PluginSource
+  presentation: 'inline' | 'overflow'
+  onSelected?: () => void
+}): React.JSX.Element {
+  const definition = item.descriptor[presentation]
+  const target = useMemo<BrowserSessionHeaderItemTarget>(
+    () => ({ kind: 'session-header-item', source, presentation }),
+    [presentation, source]
+  )
+  const sourceKey = JSON.stringify([source.workId, source.sessionId, source.branchId, presentation])
+  if (definition.type === 'action') {
+    return (
+      <L2PluginSessionHeaderAction
+        pluginName={item.pluginName}
+        contributionName={item.descriptor.contributionName}
+        presentation={presentation}
+        source={source}
+        icon={definition.icon}
+        label={definition.label}
+        onSelected={onSelected}
+      />
+    )
+  }
+  return (
+    <div
+      data-testid="plugin-session-header-custom"
+      data-plugin-name={item.pluginName}
+      data-contribution-name={item.descriptor.contributionName}
+      data-presentation={presentation}
+      className="min-w-0 shrink-0"
+      style={
+        presentation === 'inline' && item.descriptor.inline.type === 'custom'
+          ? { width: `${item.descriptor.inline.minWidthRem}rem` }
+          : undefined
+      }
+    >
+      <L2PluginContributionHost
+        pluginName={item.pluginName}
+        kind="session-header-item"
+        contributionName={item.descriptor.contributionName}
+        target={target}
+        targetKey={sourceKey}
+        layout="inline"
+      />
+    </div>
+  )
+}
+
+export function L2PluginSessionHeader({
+  source,
+  title
+}: L2PluginSessionHeaderProps): React.JSX.Element {
+  const { t } = useTranslation('workbench')
+  const registry = useL4PluginRegistry()
+  const items = useMemo<HeaderItem[]>(
+    () =>
+      registry.flatMap((entry) =>
+        entry.contributions.flatMap((descriptor) =>
+          descriptor.kind === 'session-header-item'
+            ? [{ pluginName: entry.pluginName, descriptor }]
+            : []
+        )
+      ),
+    [registry]
+  )
+  const rootRef = useRef<HTMLDivElement>(null)
+  const measurementsRef = useRef<HTMLDivElement>(null)
+  const [measurement, setMeasurement] = useState<{
+    items: readonly HeaderItem[]
+    count: number
+  } | null>(null)
+  const [open, setOpen] = useState(false)
+  const count = measurement?.items === items ? measurement.count : 0
+  const inlineItems = items.slice(0, count)
+  const overflowItems = items.slice(count)
+
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    const measurements = measurementsRef.current
+    if (!root || !measurements || items.length === 0) return
+    const probes = [...measurements.querySelectorAll<HTMLElement>('[data-header-item-width]')]
+    const titleProbe = measurements.querySelector<HTMLElement>('[data-header-title-width]')!
+    const moreProbe = measurements.querySelector<HTMLElement>('[data-header-more-width]')!
+    const gapProbe = measurements.querySelector<HTMLElement>('[data-header-gap-width]')!
+    const measure = (): void => {
+      const gap = gapProbe.getBoundingClientRect().width
+      const available =
+        root.getBoundingClientRect().width - titleProbe.getBoundingClientRect().width - gap
+      const nextCount = calculateL2PluginSessionHeaderInlineCount(
+        probes.map((probe) => probe.getBoundingClientRect().width),
+        available,
+        moreProbe.getBoundingClientRect().width,
+        gap
+      )
+      if (nextCount === items.length) setOpen(false)
+      setMeasurement((current) =>
+        current?.items === items && current.count === nextCount
+          ? current
+          : { items, count: nextCount }
+      )
+    }
+    const observer = new ResizeObserver(measure)
+    observer.observe(root)
+    for (const probe of [...probes, titleProbe, moreProbe, gapProbe]) observer.observe(probe)
+    measure()
+    return () => observer.disconnect()
+  }, [items])
+
+  return (
+    <div
+      ref={rootRef}
+      className="relative flex min-w-0 flex-1 items-center gap-1"
+      data-testid="plugin-session-header"
+    >
+      <div className="min-w-[3rem] flex-1">{title}</div>
+      {items.length > 0 ? (
+        <>
+          <div className="flex shrink-0 items-center gap-1" data-testid="session-header-items">
+            {inlineItems.map((item) => (
+              <HeaderItemView
+                key={itemKey(item)}
+                item={item}
+                source={source}
+                presentation="inline"
+              />
+            ))}
+            {overflowItems.length > 0 ? (
+              <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger
+                  render={
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label={t('moreActions')}
+                      data-testid="session-header-more"
+                    />
+                  }
+                >
+                  <EllipsisIcon className="size-4" />
+                </PopoverTrigger>
+                <PopoverContent
+                  align="end"
+                  finalFocus
+                  className="pi-desk-chat-scrollbar max-h-[min(28rem,var(--available-height))] gap-1 overflow-auto p-1"
+                  data-testid="session-header-overflow"
+                  aria-label={t('moreActions')}
+                >
+                  <PopoverTitle className="sr-only">{t('moreActions')}</PopoverTitle>
+                  {open
+                    ? overflowItems.map((item) => (
+                        <HeaderItemView
+                          key={itemKey(item)}
+                          item={item}
+                          source={source}
+                          presentation="overflow"
+                          onSelected={() => setOpen(false)}
+                        />
+                      ))
+                    : null}
+                </PopoverContent>
+              </Popover>
+            ) : null}
+          </div>
+          {/* 只测量可克隆元数据；custom 业务视图仅在当前展示位置挂载。 */}
+          <div
+            ref={measurementsRef}
+            aria-hidden="true"
+            inert
+            className="pointer-events-none invisible absolute inset-0 overflow-hidden"
+          >
+            <div className="flex w-max items-center">
+              <span data-header-title-width className="inline-block w-[3rem]" />
+              <span data-header-gap-width className="inline-block w-1" />
+              <span
+                data-header-more-width
+                className={buttonVariants({ variant: 'ghost', size: 'icon-sm' })}
+              >
+                <EllipsisIcon className="size-4" />
+              </span>
+              {items.map((item) =>
+                item.descriptor.inline.type === 'action' ? (
+                  <span
+                    key={itemKey(item)}
+                    data-header-item-width
+                    className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+                  >
+                    <L4PluginIcon icon={item.descriptor.inline.icon} className="size-4" />
+                    <span>{item.descriptor.inline.label}</span>
+                  </span>
+                ) : (
+                  <span
+                    key={itemKey(item)}
+                    data-header-item-width
+                    className="inline-block shrink-0"
+                    style={{ width: `${item.descriptor.inline.minWidthRem}rem` }}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}

package/src/client/l2_biz/plugin-host/l2-plugin-widgets.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BrowserWidgetTarget, PluginSource } from '@jetcrab/pi-desk-sdk/browser'
+import { useL4PluginRegistry } from '@client/l4_foundation/plugin-host/l4-plugin-host-context'
+import { L2PluginContributionHost } from './l2-plugin-contribution-host'
+
+interface L2PluginWidgetsProps {
+  source: PluginSource
+  placement: 'aboveEditor' | 'belowEditor'
+}
+
+export function L2PluginWidgets({
+  source,
+  placement
+}: L2PluginWidgetsProps): React.JSX.Element | null {
+  const { t } = useTranslation('workbench')
+  const registry = useL4PluginRegistry()
+  const target = useMemo<BrowserWidgetTarget>(() => ({ kind: 'widget', source }), [source])
+  const sourceKey = JSON.stringify([source.workId, source.sessionId, source.branchId])
+  const widgets = registry.flatMap((entry) =>
+    entry.contributions.flatMap((descriptor) =>
+      descriptor.kind === 'widget' && descriptor.placement === placement
+        ? [{ pluginName: entry.pluginName, descriptor }]
+        : []
+    )
+  )
+  if (widgets.length === 0) return null
+
+  return (
+    <div
+      data-testid={`plugin-widgets-${placement}`}
+      aria-label={t('composer')}
+      className="min-w-0 w-full"
+    >
+      {widgets.map(({ pluginName, descriptor }) => (
+        <L2PluginContributionHost
+          key={`${pluginName}:${descriptor.contributionName}:${sourceKey}`}
+          pluginName={pluginName}
+          kind="widget"
+          contributionName={descriptor.contributionName}
+          target={target}
+          targetKey={sourceKey}
+          layout="inline"
+        />
+      ))}
+    </div>
+  )
+}

package/src/client/l2_biz/plugin-host/views/l2-plugin-session-header-action.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BrowserContributionIcon, PluginSource } from '@jetcrab/pi-desk-sdk/browser'
+import {
+  useL4PluginHost,
+  useL4PluginRegistry
+} from '@client/l4_foundation/plugin-host/l4-plugin-host-context'
+import { L4PluginIcon } from '@client/l4_foundation/plugin-host/l4-plugin-icon'
+import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
+import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import { cn } from '@client/l4_foundation/lib/l4-utils'
+
+interface L2PluginSessionHeaderActionProps {
+  pluginName: string
+  contributionName: string
+  presentation: 'inline' | 'overflow'
+  source: PluginSource
+  icon: BrowserContributionIcon
+  label: string
+  onSelected?: () => void
+}
+
+export function L2PluginSessionHeaderAction({
+  pluginName,
+  contributionName,
+  presentation,
+  source,
+  icon,
+  label,
+  onSelected
+}: L2PluginSessionHeaderActionProps): React.JSX.Element {
+  const runtime = useL4PluginHost()
+  useL4PluginRegistry()
+  const entryState = runtime.getEntryState(pluginName)
+  const toast = useL4AppToast()
+  const { t } = useTranslation('workbench')
+  const lifecycle = useRef<AbortController | null>(null)
+  const pendingRef = useRef(false)
+  const [pending, setPending] = useState(false)
+
+  useLayoutEffect(() => {
+    const controller = new AbortController()
+    lifecycle.current = controller
+    pendingRef.current = false
+    queueMicrotask(() => {
+      if (!controller.signal.aborted) setPending(false)
+    })
+    return () => {
+      controller.abort()
+      if (lifecycle.current === controller) lifecycle.current = null
+    }
+  }, [entryState, presentation, source])
+
+  const select = async (): Promise<void> => {
+    const controller = lifecycle.current
+    if (!controller || controller.signal.aborted || pendingRef.current) return
+    const active = (): boolean =>
+      !controller.signal.aborted && runtime.getEntryState(pluginName) === entryState
+    pendingRef.current = true
+    setPending(true)
+    try {
+      await runtime.invokeSessionHeaderAction({
+        pluginName,
+        contributionName,
+        presentation,
+        source,
+        signal: controller.signal
+      })
+      if (active()) onSelected?.()
+    } catch (cause: unknown) {
+      if (!active()) return
+      const message = cause instanceof Error ? cause.message : t('operationFailed')
+      console.error('[Pi Desk][PluginHost] 会话标题操作失败', {
+        pluginName,
+        contributionName,
+        presentation,
+        source,
+        message
+      })
+      toast.error(message)
+    } finally {
+      if (active()) {
+        pendingRef.current = false
+        setPending(false)
+      }
+    }
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      aria-label={label}
+      aria-busy={pending}
+      disabled={pending}
+      data-testid="plugin-session-header-action"
+      data-plugin-name={pluginName}
+      data-contribution-name={contributionName}
+      data-presentation={presentation}
+      className={cn(
+        presentation === 'overflow' && 'w-full justify-start whitespace-normal text-left'
+      )}
+      onClick={() => void select()}
+    >
+      <L4PluginIcon icon={icon} className="size-4" />
+      <span className="min-w-0 [overflow-wrap:anywhere]">{label}</span>
+    </Button>
+  )
+}

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type {
+  L2PiDirectoryListResponse,
+  L2PiDirectoryEntryListResponse
+} from '@common/l2_biz/pi-session/l2-pi-session-contract'
+import { L3ProjectRequestError } from '@client/l3_modules/project-files/l3-project-reader'
+import { browseL2PreviewDirectory, listL2PreviewProjects } from '../l2-project-preview-biz'
+
+type Target = { view: 'projects' } | { view: 'browser'; cwd: string | null }
+interface PickerState {
+  target: Target
+  projects: L2PiDirectoryListResponse['directories']
+  browser: L2PiDirectoryEntryListResponse | null
+  loading: boolean
+  error: string | null
+}
+export interface L2ProjectPicker extends PickerState {
+  showProjects: () => void
+  browse: (cwd: string | null) => void
+  retry: () => void
+}
+
+export function useL2ProjectPicker(clientId: string, onUnauthorized: () => void): L2ProjectPicker {
+  const [state, setState] = useState<PickerState>({
+    target: { view: 'projects' },
+    projects: [],
+    browser: null,
+    loading: true,
+    error: null
+  })
+  const pending = useRef<AbortController | null>(null)
+  const load = useCallback(
+    (target: Target): void => {
+      pending.current?.abort()
+      const controller = new AbortController()
+      pending.current = controller
+      setState((current) => ({ ...current, target, loading: true, error: null }))
+      void (async (): Promise<void> => {
+        try {
+          if (target.view === 'projects') {
+            const result = await listL2PreviewProjects(clientId, controller.signal)
+            if (!controller.signal.aborted)
+              setState((current) => ({ ...current, projects: result.directories, loading: false }))
+          } else {
+            const browser = await browseL2PreviewDirectory(clientId, target.cwd, controller.signal)
+            if (!controller.signal.aborted)
+              setState((current) => ({ ...current, browser, loading: false }))
+          }
+        } catch (cause) {
+          if (controller.signal.aborted) return
+          if (cause instanceof L3ProjectRequestError && cause.status === 401) onUnauthorized()
+          setState((current) => ({
+            ...current,
+            loading: false,
+            error: cause instanceof Error ? cause.message : String(cause)
+          }))
+        }
+      })()
+    },
+    [clientId, onUnauthorized]
+  )
+
+  useEffect(() => {
+    load({ view: 'projects' })
+    return () => pending.current?.abort()
+  }, [load])
+
+  return {
+    ...state,
+    showProjects: () => load({ view: 'projects' }),
+    browse: (cwd) => load({ view: 'browser', cwd }),
+    retry: () => load(state.target)
+  }
+}

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

@@ -0,0 +1,214 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
+import { createL2ProjectPreviewOwner, type L2ProjectPreviewOwner } from '../l2-project-preview-biz'
+import {
+  loadL2ProjectPreviewGlobal,
+  openL2ProjectPreviewProject,
+  saveL2ProjectPreviewGlobal,
+  saveL2ProjectPreviewProject,
+  type L2ProjectPreviewGlobal,
+  type L2ProjectPreviewProject
+} from '../l2-project-preview-storage'
+
+type Page = 'files' | 'code' | 'git'
+type HistoryPane = 'log' | 'files'
+interface PreviewState extends Pick<L2ProjectPreviewOwner, 'files' | 'git' | 'history'> {
+  global: L2ProjectPreviewGlobal
+  updateGlobal: (change: Partial<L2ProjectPreviewGlobal>) => void
+  page: Page
+  setPage: (page: Page) => void
+  historyPane: HistoryPane
+  setHistoryPane: (pane: HistoryPane) => void
+  setContainer: (element: HTMLDivElement | null) => void
+  narrow: boolean
+  stacked: boolean
+  width: number
+  openGit: (root?: string) => void
+  refresh: () => void
+}
+
+export function useL2ProjectPreview(
+  clientId: string,
+  cwd: string,
+  refreshOnFocus: boolean,
+  onUnauthorized?: () => void
+): PreviewState {
+  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,
+      { lazyHistory: !refreshOnFocus, onUnauthorized }
+    )
+  )
+  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 [page, setPage] = useState<Page>(saved?.page ?? 'files')
+  const [historyPane, setHistoryPane] = useState<HistoryPane>(saved?.historyPane ?? 'log')
+  const [size, setSize] = useState({ width: 1200, height: 800 })
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
+  const live = useRef(false)
+  const saveCurrent = useRef<() => void>(() => undefined)
+  const narrow = size.width < 900
+  const stacked = narrow || size.height < 680
+  const repositories = git.getWorkspace(cwd)!.snapshot.repositories
+  const state = files.state
+
+  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(() => {
+    live.current = true
+    owner.restore()
+    void files.ensureRoot()
+    void git.ensureSnapshot(cwd)
+    const saveOnLeave = (): void => saveCurrent.current()
+    window.addEventListener('pagehide', saveOnLeave)
+    return () => {
+      live.current = false
+      window.removeEventListener('pagehide', saveOnLeave)
+      // StrictMode 的同一实例重挂载不能释放仍被使用的 reader。
+      queueMicrotask(() => {
+        if (!live.current) {
+          saveCurrent.current()
+          owner.dispose()
+        }
+      })
+    }
+  }, [cwd, files, git, owner])
+
+  useEffect(() => {
+    if (!refreshOnFocus) return
+    let lastFocus = Date.now()
+    const focus = (): void => {
+      if (Date.now() - lastFocus < 5000) return
+      lastFocus = Date.now()
+      void git.refreshSnapshot(cwd)
+    }
+    window.addEventListener('focus', focus)
+    return () => window.removeEventListener('focus', focus)
+  }, [cwd, git, refreshOnFocus])
+
+  useEffect(() => {
+    if (!container) return
+    const measure = (): void =>
+      setSize({ width: container.clientWidth, height: container.clientHeight })
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [container])
+
+  const historyVisible = global.gitOpen && (!stacked || page === 'git')
+  useEffect(() => {
+    if (!historyVisible || !repositories.length) return
+    if (repositories.some((repository) => repository.root === history.state.repositoryRoot)) {
+      history.setRepository(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
+    )
+  }, [historyVisible, 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]
+  )
+
+  return {
+    files,
+    git,
+    history,
+    global,
+    updateGlobal,
+    page,
+    setPage,
+    historyPane,
+    setHistoryPane,
+    setContainer,
+    narrow,
+    stacked,
+    width: size.width,
+    openGit(root): void {
+      updateGlobal({ gitOpen: true })
+      setPage('git')
+      if (root !== undefined) history.setRepository(root)
+    },
+    refresh(): void {
+      files.refreshTree()
+      void git.refreshSnapshot(cwd)
+      if (state.activeDiff) files.reloadDiff()
+      else if (state.activePath) files.reloadFile(state.activePath)
+      if (historyVisible) history.refresh()
+    }
+  }
+}