@chatcode/cco-better-sidebar 0.18.0-alpha.0

package/src/client/TreePanel.tsx

@@ -0,0 +1,279 @@
+/**
+ * The files window's tree surface: a global file-name search box on top
+ * (300ms debounce; an in-flight search is aborted by the next keystroke)
+ * over either the shared controlled FileTree (empty query) or the flat
+ * result list (relative paths; click opens through the caller's mode-aware
+ * open). Owns its refresh tick: the icon next to the search input clears
+ * the tree cache. EditorHost docks it as the tab's right panel (wrapped in
+ * a drag-resize handle) and provides the file context-menu open escapes.
+ *
+ * Uploads (header pickers, the tree's drag-drop and "upload here" menu)
+ * all funnel through here: one session at a time, shown in a full-window
+ * progress overlay with cancel, followed by a tree refresh and a one-line
+ * hint under the search row (success fades, failures and cancels stay).
+ * OS file drags are shielded at the panel host (see Sidebar.tsx), so a
+ * drop over the file window uploads here and never reaches DSH's chat
+ * intake.
+ */
+import { useEffect, useRef, useState, type InputHTMLAttributes } from 'react'
+import clsx from 'clsx'
+import { IconFolderOpen16, IconRefreshOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { api } from './api.ts'
+import type { SidebarStore } from './state.ts'
+import { FileTree } from './FileTree.tsx'
+import { IconUploadOutline16 } from './icons.tsx'
+import type { OpenWithTarget } from './open-with.ts'
+import { t } from './locales.ts'
+import { resolveSidebarPath } from './produced-files.ts'
+import { UploadOverlay } from './UploadOverlay.tsx'
+import {
+  summarizeResults, uploadHintText, uploadItemsFromFiles, uploadToDir,
+  UPLOAD_HINT_MS, type UploadItem,
+} from './upload.ts'
+import css from './sidebar.module.css'
+
+/** One in-flight upload session (the overlay's progress source). */
+interface UploadSession {
+  dir: string
+  done: number
+  total: number
+  /** Relative path of the file being uploaded ('' when none is in flight). */
+  current: string
+  controller: AbortController
+}
+
+export function TreePanel(props: {
+  sessionId: string
+  cwd: string | undefined
+  /** The sidebar store (passed through to the tree's fence-refusal notice). */
+  store: SidebarStore
+  expanded: string[]
+  revealed: string[]
+  onToggle: (path: string) => void
+  onOpenFile: (path: string) => void
+  /** File context-menu "open in a new tab" (passed through to FileTree). */
+  onOpenFileNewTab?: (path: string) => void
+  /** File context-menu "open to the side" (passed through to FileTree). */
+  onOpenFileSide?: (path: string) => void
+  /** The "open with" menu surface (passed through to FileTree; absent →
+   *  the whole section is hidden). */
+  openWithTargets?: OpenWithTarget[]
+  openWithPinned?: string[]
+  openWithSsh?: boolean
+  onOpenWith?: (targetId: string, path: string) => void
+  onToggleOpenWithPin?: (targetId: string) => void
+  onReferenceFile: (path: string) => void
+  /** Full-window presentation: the panel fills its host instead of docking
+   *  at a fixed width. */
+  full?: boolean
+}) {
+  const { sessionId, cwd, store, expanded, revealed, onToggle, onOpenFile, onOpenFileNewTab, onOpenFileSide, openWithTargets, openWithPinned, openWithSsh, onOpenWith, onToggleOpenWithPin, onReferenceFile, full } = props
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<{ matches: string[]; truncated: boolean } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [refreshTick, setRefreshTick] = useState(0)
+  /** One-line upload status under the search row ('' hides the hint). */
+  const [uploadStatus, setUploadStatus] = useState('')
+  /** Whether the status line is a failure/cancel (error color, stays visible). */
+  const [uploadFailed, setUploadFailed] = useState(false)
+  /** The in-flight upload session (null → no overlay, buttons enabled). */
+  const [upload, setUpload] = useState<UploadSession | null>(null)
+  /** True between the cancel click and the session settling (button disabled). */
+  const [cancelling, setCancelling] = useState(false)
+  /** Set by cancelUpload; the settle path shows 'upload cancelled' instead of
+   *  summarizing the partial results. */
+  const cancelledRef = useRef(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const folderInputRef = useRef<HTMLInputElement>(null)
+
+  /** Start one upload session into `dir` (absolute, inside the workspace). */
+  const startUpload = (dir: string, items: UploadItem[]): void => {
+    if (items.length === 0 || cwd === undefined || upload !== null) return
+    cancelledRef.current = false
+    const controller = new AbortController()
+    setUploadFailed(false)
+    setUploadStatus(uploadHintText(0, items.length, '', dir, t))
+    setUpload({ dir, done: 0, total: items.length, current: '', controller })
+    void uploadToDir({ sessionId, cwd }, dir, items, (done, total, current) => {
+      if (current !== '') setUploadStatus(uploadHintText(done, total, current, dir, t))
+      setUpload(session => session === null ? session : { ...session, done, total, current })
+    }, controller.signal).then((results) => {
+      setUpload(null)
+      setCancelling(false)
+      // Reload the tree whatever the outcome: files may have landed before a
+      // cancel, and failures leave whatever did succeed visible.
+      setRefreshTick(tick => tick + 1)
+      if (cancelledRef.current) {
+        setUploadStatus(t('uploadCancelled'))
+        setUploadFailed(true)
+        return
+      }
+      const status = summarizeResults(results, t)
+      setUploadStatus(status)
+      setUploadFailed(results.some(result => !result.ok))
+      // Success messages are transient; failures stay until the next action.
+      if (results.every(result => result.ok)) {
+        window.setTimeout(() => {
+          setUploadStatus(current => current === status ? '' : current)
+        }, UPLOAD_HINT_MS)
+      }
+    })
+  }
+
+  /** Cancel the in-flight upload (aborts the request; the host drops its temp). */
+  const cancelUpload = (): void => {
+    if (upload === null || cancelling) return
+    cancelledRef.current = true
+    setCancelling(true)
+    upload.controller.abort()
+  }
+
+  const folderInputProps = { webkitdirectory: '' } as InputHTMLAttributes<HTMLInputElement>
+
+  const needle = query.trim()
+  useEffect(() => {
+    if (needle === '') {
+      setResults(null)
+      setError(null)
+      return
+    }
+    const controller = new AbortController()
+    const timer = window.setTimeout(() => {
+      api.fsSearch({ sessionId, cwd }, needle, controller.signal).then((found) => {
+        setResults(found)
+        setError(null)
+      }).catch((failure: unknown) => {
+        if (controller.signal.aborted) return
+        setResults(null)
+        setError(failure instanceof Error ? failure.message : String(failure))
+      })
+    }, 300)
+    return () => {
+      window.clearTimeout(timer)
+      controller.abort()
+    }
+  }, [sessionId, cwd, needle])
+
+  const busy = upload !== null
+
+  return (
+    <div className={clsx(css.editorTreePanel, full === true && css.editorTreePanelFull)}>
+      <div className={css.editorTreeSearch}>
+        <input
+          className={css.editorSearchInput}
+          value={query}
+          placeholder={t('editorSearchPlaceholder')}
+          spellCheck={false}
+          onChange={(event) => { setQuery(event.target.value) }}
+        />
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          onClick={() => { setRefreshTick(tick => tick + 1) }}
+        >
+          <IconRefreshOutline16 size={14} />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('uploadFiles')}
+          title={t('uploadFiles')}
+          disabled={busy}
+          onClick={() => { fileInputRef.current?.click() }}
+        >
+          <IconUploadOutline16 size={14} />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('uploadFolder')}
+          title={t('uploadFolder')}
+          disabled={busy}
+          onClick={() => { folderInputRef.current?.click() }}
+        >
+          <IconFolderOpen16 size={14} />
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          style={{ display: 'none' }}
+          onChange={(event) => {
+            if (cwd !== undefined) startUpload(cwd, uploadItemsFromFiles(event.target.files ?? []))
+            event.target.value = ''
+          }}
+        />
+        <input
+          ref={folderInputRef}
+          type="file"
+          multiple
+          {...folderInputProps}
+          style={{ display: 'none' }}
+          onChange={(event) => {
+            if (cwd !== undefined) startUpload(cwd, uploadItemsFromFiles(event.target.files ?? []))
+            event.target.value = ''
+          }}
+        />
+      </div>
+      {uploadStatus !== '' && (
+        <div className={clsx(css.editorSearchHint, uploadFailed && css.editorError)} title={uploadStatus}>{uploadStatus}</div>
+      )}
+      {needle === '' ? (
+        <FileTree
+          sessionId={sessionId}
+          cwd={cwd}
+          store={store}
+          expanded={expanded}
+          revealed={revealed}
+          onToggle={onToggle}
+          onOpenFile={onOpenFile}
+          onOpenFileNewTab={onOpenFileNewTab}
+          onOpenFileSide={onOpenFileSide}
+          openWithTargets={openWithTargets}
+          openWithPinned={openWithPinned}
+          openWithSsh={openWithSsh}
+          onOpenWith={onOpenWith}
+          onToggleOpenWithPin={onToggleOpenWithPin}
+          onReferenceFile={onReferenceFile}
+          refreshTick={refreshTick}
+          onUploadRequest={startUpload}
+          busy={busy}
+        />
+      ) : (
+        <div className={css.explorerBody}>
+          {error !== null && <div className={clsx(css.editorSearchHint, css.editorError)}>{error}</div>}
+          {error === null && results === null && <div className={css.editorSearchHint}>{t('loading')}</div>}
+          {error === null && results !== null && results.matches.length === 0 && (
+            <div className={css.editorSearchHint}>{t('editorSearchNoResults')}</div>
+          )}
+          {error === null && results !== null && results.matches.map(rel => (
+            <button
+              key={rel}
+              type="button"
+              className={css.editorSearchResult}
+              title={rel}
+              onClick={() => { onOpenFile(resolveSidebarPath(cwd, rel)) }}
+            >
+              {rel}
+            </button>
+          ))}
+          {error === null && results?.truncated === true && (
+            <div className={css.editorSearchHint}>{t('editorSearchTruncated')}</div>
+          )}
+        </div>
+      )}
+      {upload !== null && (
+        <UploadOverlay
+          dir={upload.dir}
+          done={upload.done}
+          total={upload.total}
+          current={upload.current}
+          onCancel={cancelUpload}
+          cancelling={cancelling}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/UpdateDialog.tsx

@@ -0,0 +1,186 @@
+/**
+ * "Check for updates / update now" panel. It asks the host to compare the
+ * ChatCode package against the npm registry, then — on a single "update now"
+ * click — upgrades it globally via the host. The upgrade runs on the DSH
+ * machine (npm install -g), not in the browser, so success is followed by a
+ * "restart to apply" hint.
+ *
+ * Two mount variants:
+ * - `variant: 'dialog'`: a full-screen modal overlay (legacy, for a menu
+ *   entry that floats above the app).
+ * - `variant: 'inline'` (default here): same content but NO overlay, NO modal
+ *   frame — it renders embedded in the host Settings panel, so it never
+ *   stacks a second white backdrop on top of the Settings dialog's own.
+ */
+import { useEffect, useState } from 'react'
+import {
+  api,
+  type ChatCodeUpdateCheck,
+  type ChatCodeUpdateResult,
+} from './api.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+type Phase = 'checking' | 'idle' | 'performing' | 'done' | 'error'
+
+interface UpdateDialogProps {
+  open: boolean
+  onClose: () => void
+  /** 'dialog' wraps content in a full-screen overlay; 'inline' renders the
+   *  same content bare so it can sit inside the host Settings panel without
+   *  a second backdrop. */
+  variant?: 'dialog' | 'inline'
+}
+
+/** Describe one package row, tagging whether it is out of date. */
+function PackageRow({ check }: { check: ChatCodeUpdateCheck }): JSX.Element {
+  const current = check.current ?? t('updateNotInstalled')
+  const latest = check.latest ?? t('updateUnknown')
+  return (
+    <li>
+      <strong>{check.packageName}</strong>
+      <span className={css.updateVersions}>{current} → {latest}</span>
+    </li>
+  )
+}
+
+export function UpdateDialog({ open, onClose, variant = 'dialog' }: UpdateDialogProps): JSX.Element | null {
+  const [phase, setPhase] = useState<Phase>('checking')
+  const [checks, setChecks] = useState<ChatCodeUpdateCheck[]>([])
+  const [results, setResults] = useState<ChatCodeUpdateResult[]>([])
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!open) return
+    setPhase('checking')
+    setResults([])
+    setError('')
+    const controller = new AbortController()
+    void api.chatcodeUpdateCheck(controller.signal)
+      .then(({ packages }) => {
+        setChecks(packages)
+        setPhase('idle')
+      })
+      .catch((reason: unknown) => {
+        setError(reason instanceof Error ? reason.message : String(reason))
+        setPhase('error')
+      })
+    return () => controller.abort()
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const anyUpdate = checks.some(check => check.needsUpdate)
+  const close = (): void => onClose()
+
+  const perform = async (): Promise<void> => {
+    setPhase('performing')
+    setError('')
+    try {
+      const { results: next } = await api.chatcodeUpdatePerform()
+      setResults(next)
+      setChecks(next.map(result => ({
+        packageName: result.packageName,
+        current: result.ok ? result.to : null,
+        latest: result.to,
+        needsUpdate: false,
+      })))
+      setPhase('done')
+    } catch (reason: unknown) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setPhase('error')
+    }
+  }
+
+  const body = (
+    <div className={css.updateBody}>
+      {phase === 'checking' && <p>{t('updateChecking')}</p>}
+      {phase === 'idle' && (
+        <>
+          <ul className={css.updateList}>
+            {checks.map(check => <PackageRow key={check.packageName} check={check} />)}
+          </ul>
+          {anyUpdate
+            ? <p>{t('updateConfirm')}</p>
+            : <p>{t('updateUpToDate')}</p>}
+        </>
+      )}
+      {phase === 'performing' && <p>{t('updatePerforming')}</p>}
+      {phase === 'done' && (
+        <>
+          <ul className={css.updateList}>
+            {results.map(result => (
+              <li key={result.packageName}>
+                <strong>{result.packageName}</strong>
+                <span className={css.updateVersions}>{result.from ?? t('updateNotInstalled')} → {result.to ?? '?'}</span>
+                {result.ok && <span className={css.updateOk}> ✓</span>}
+                {!result.ok && <span className={css.updateError}> ✗</span>}
+              </li>
+            ))}
+          </ul>
+          {results.some(result => !result.ok) ? (
+            <>
+              <p className={css.updateErrorText}>{t('updateError')}</p>
+              {results.filter(result => !result.ok).map(result => (
+                <pre key={result.packageName} className={css.updateCommand}>{result.message}</pre>
+              ))}
+            </>
+          ) : (
+            <p>{t('updateRestartHint')}</p>
+          )}
+        </>
+      )}
+      {phase === 'error' && <p className={css.updateErrorText}>{error}</p>}
+    </div>
+  )
+
+  const footer = (
+    <div className={css.updateFooter}>
+      {phase === 'idle' && anyUpdate && (
+        <button type="button" className={css.releaseNotesButton} onClick={() => void perform()}>{t('updateNow')}</button>
+      )}
+      {(phase === 'done' || phase === 'error' || phase === 'idle') && (
+        <button type="button" className={css.releaseNotesButton} onClick={close}>{t('close')}</button>
+      )}
+    </div>
+  )
+
+  if (variant === 'inline') {
+    // No overlay, no modal frame: this content lives on the Settings pane
+    // itself, whose own dialog already provides the dimmed backdrop.
+    return (
+      <div className={css.updateInline}>
+        {body}
+        {footer}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={css.releaseNotesOverlay}
+      role="presentation"
+      onMouseDown={event => { if (event.target === event.currentTarget) close() }}
+    >
+      <section className={css.releaseNotesDialog} role="dialog" aria-modal="true" aria-labelledby="update-notes-title">
+        <header className={css.releaseNotesHeader}>
+          <h2 id="update-notes-title">{t('updateMenu')}</h2>
+          <button type="button" className={css.releaseNotesIconButton} aria-label={t('close')} onClick={close}>×</button>
+        </header>
+        {body}
+        {footer}
+      </section>
+    </div>
+  )
+}

package/src/client/UpdateSettingsPanel.tsx

@@ -0,0 +1,29 @@
+/**
+ * "Check for updates / update now" entry surfaced inside the host Settings
+ * dialog (rendered via the "更新" settings.section panel). Keeps a slim
+ * inline row + the reusable {@link UpdateDialog} **inline** overlay, so no
+ * second modal/backdrop stacks on top of the Settings dialog's own — the
+ * update state unfolds directly in the panel body.
+ */
+import { useState } from 'react'
+import { t } from './locales.ts'
+import { UpdateDialog } from './UpdateDialog.tsx'
+import css from './sidebar.module.css'
+
+export function UpdateSettingsPanel(): JSX.Element {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className={css.updateSettingsBlock}>
+      <div className={css.updateSettingsRow}>
+        <div className={css.updateSettingsText}>
+          <span className={css.updateSettingsTitle}>{t('updateMenu')}</span>
+          <span className={css.updateSettingsDesc}>{t('updateSettingsDesc')}</span>
+        </div>
+        <button type="button" className={css.releaseNotesButton} onClick={() => setOpen(v => !v)}>
+          {t('updateNow')}
+        </button>
+      </div>
+      <UpdateDialog open={open} onClose={() => setOpen(false)} variant="inline" />
+    </div>
+  )
+}

package/src/client/UpdateSettingsSection.tsx

@@ -0,0 +1,22 @@
+/**
+ * The "更新" settings section: a dedicated nav entry in the DSH Settings
+ * shell (sibling of 侧边卡片 / Token 用量 / AI 代码占比) hosting the
+ * one-click ChatCode upgrade entry. It surfaces the reusable
+ * {@link UpdateSettingsPanel} row in the section body.
+ */
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { UpdateSettingsPanel } from './UpdateSettingsPanel.tsx'
+import css from './SideCardSection.module.css'
+
+/** Full section props: the settings shell's runtime share (close, …). */
+export type UpdateSettingsSectionProps = PropsRuntime<'settings.section'>
+
+export function UpdateSettingsSection(_props: UpdateSettingsSectionProps): JSX.Element {
+  return (
+    <div className={css.section}>
+      <div className={css.group}>
+        <UpdateSettingsPanel />
+      </div>
+    </div>
+  )
+}

package/src/client/UploadOverlay.tsx

@@ -0,0 +1,62 @@
+/**
+ * Full-window upload progress over the files tree: a blurred scrim (same mask
+ * token as the repo's Modal primitive) with a card showing the target
+ * directory, file-level progress, and a cancel button. Esc cancels too —
+ * clicking the scrim does not, so a stray click can never abort an upload.
+ * Rendered inside TreePanel (absolute inset-0), so it covers only the file
+ * window and never the conversation column.
+ */
+import { useEffect, type ReactNode } from 'react'
+import { IconUploadOutline16 } from './icons.tsx'
+import { t } from './locales.ts'
+import { uploadHintText } from './upload.ts'
+import css from './sidebar.module.css'
+
+export function UploadOverlay(props: {
+  /** Absolute upload directory (the session workspace or a tree directory). */
+  dir: string
+  done: number
+  total: number
+  /** Relative path of the file being uploaded ('' when none is in flight). */
+  current: string
+  onCancel: () => void
+  /** True while cancellation is in flight (disables the cancel button). */
+  cancelling?: boolean
+}): ReactNode {
+  const { dir, done, total, current, onCancel, cancelling } = props
+  // Esc cancels (MermaidModal-style native listener; the overlay is not a
+  // focus-trapped dialog, so a window listener is the honest scope).
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => { window.removeEventListener('keydown', onKey) }
+  }, [onCancel])
+
+  const percent = total === 0 ? 0 : Math.min(100, Math.round((done / total) * 100))
+  return (
+    <div className={css.uploadOverlay} role="dialog" aria-modal="true" aria-label={t('uploadingTo', { dir })}>
+      <div className={css.uploadOverlayCard}>
+        <div className={css.uploadOverlayTitle} title={dir}>
+          <IconUploadOutline16 size={16} />
+          <span>{t('uploadingTo', { dir })}</span>
+        </div>
+        <div
+          className={css.uploadOverlayProgress}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={total}
+          aria-valuenow={done}
+          aria-valuetext={t('uploadProgress', { done, total, name: current })}
+        >
+          <div className={css.uploadOverlayProgressFill} style={{ width: `${percent}%` }} />
+        </div>
+        <div className={css.uploadOverlayStatus}>{uploadHintText(done, total, current, dir, t)}</div>
+        <button type="button" className={css.uploadOverlayCancel} disabled={cancelling} onClick={onCancel}>
+          {t('cancel')}
+        </button>
+      </div>
+    </div>
+  )
+}