@keith9681/dsh-sidebar 0.15.2

package/src/client/TreePanel.tsx

@@ -0,0 +1,273 @@
+/**
+ * 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 { 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
+  expanded: 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, expanded, 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}
+          expanded={expanded}
+          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/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>
+  )
+}

package/src/client/add-plugin-modal.tsx

@@ -0,0 +1,199 @@
+/**
+ * The "add plugin" modals (Side card settings → the dashed cards at the
+ * end of the 侧边栏内容 / 文件预览 grids): declare that the sidebar's
+ * extension points — tab pages and file previewers — are open to plugins
+ * (registered through `ctx.betterSidebar`), point at the GitHub topic page
+ * for discovery, and show the repo's recommended plugin catalog of the
+ * matching kind (name / url / description / install script).
+ *
+ * Per entry there are two actions:
+ * - 「跳转」opens the plugin's repo in a REAL new browser tab (window.open
+ *   — a button, so the sidebar link takeover cannot reroute it);
+ * - 「安装」only COPIES the install script to the clipboard (writeClipboard)
+ *   with a transient "已复制" feedback on the button — the user pastes and
+ *   runs it wherever they manage their DSH profile. No terminal is opened,
+ *   nothing is closed, nothing can fail outward.
+ *
+ * The body is extracted as {@link PluginListBody} so tests render it
+ * directly — the Modal primitive runs hooks unconditionally, so an open
+ * Modal must never be renderToString'd (same rule as the settingsFor popup
+ * in SideCardSection); the modal itself mounts only while open.
+ */
+import { useState, type ReactNode } from 'react'
+import { Modal, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { BetterSidebarService } from './service.ts'
+import { PLUGIN_TOPIC_URL, type PluginEntry } from './plugins-shared.ts'
+import { builtinTabPlugins } from './plugins-tabs.ts'
+import { builtinViewerPlugins } from './plugins-viewers.ts'
+import { t } from './locales.ts'
+import css from './SideCardSection.module.css'
+
+/** Which extension point the modal is adding a plugin for. */
+export type PluginKind = 'tab' | 'viewer'
+
+/** The catalog of one kind (kept in two repo files: plugins-tabs.ts /
+ *  plugins-viewers.ts). */
+function catalogOf(kind: PluginKind): readonly PluginEntry[] {
+  return kind === 'tab' ? builtinTabPlugins : builtinViewerPlugins
+}
+
+/** How long the "已复制" feedback stays on the copy button. */
+const COPIED_FEEDBACK_MS = 1500
+
+/** The modal body: the GitHub topic button + the recommended plugin list
+ *  with per-entry jump/copy buttons (extracted for direct testing). */
+export function PluginListBody(props: { service: BetterSidebarService; kind: PluginKind }) {
+  const { service, kind } = props
+  // Which entry's copy button currently shows the "已复制" feedback.
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+  // Live catalog filter (name / id / description). A free-text search keeps
+  // the list usable once the catalogs grow beyond a handful of entries:
+  // every keystroke narrows the rendered rows, so a long catalog never
+  // becomes a wall of scrolling.
+  const [query, setQuery] = useState('')
+
+  const catalog = catalogOf(kind)
+  const needle = query.trim().toLowerCase()
+  const matches = (entry: PluginEntry): boolean => {
+    if (needle === '') return true
+    const description = typeof entry.description === 'function' ? entry.description() : entry.description
+    return entry.name.toLowerCase().includes(needle)
+      || entry.id.toLowerCase().includes(needle)
+      || description.toLowerCase().includes(needle)
+  }
+  const filtered = catalog.filter(matches)
+  // Group by the optional category (stable order: category order of first
+  // appearance, uncategorized entries last under the plain list).
+  const groups = new Map<string | undefined, PluginEntry[]>()
+  for (const entry of filtered) {
+    const key = entry.category === undefined ? undefined : (typeof entry.category === 'function' ? entry.category() : entry.category)
+    const list = groups.get(key)
+    if (list === undefined) groups.set(key, [entry])
+    else list.push(entry)
+  }
+
+  /** Copy the entry's install script to the clipboard and flash the button's
+   *  "已复制" label for a moment. The feedback ONLY appears after a
+   *  successful write — when the clipboard is unavailable or denied
+   *  (writeClipboard resolves false) nothing is shown, so the user is never
+   *  told to paste a command that was not placed on the clipboard. Never
+   *  closes anything, never throws outward. */
+  const copy = async (entry: PluginEntry): Promise<void> => {
+    const written = await writeClipboard(entry.install)
+    if (!written) return
+    setCopiedId(entry.id)
+    window.setTimeout(() => {
+      setCopiedId(current => (current === entry.id ? null : current))
+    }, COPIED_FEEDBACK_MS)
+  }
+
+  /** Open the plugin's repo in a REAL new browser tab (window.open — a
+   *  button, so the sidebar link takeover cannot reroute it). */
+  const jump = (entry: PluginEntry): void => {
+    window.open(entry.url, '_blank', 'noopener')
+  }
+
+  /** One catalog row (extracted so the group render stays flat). */
+  const renderEntry = (entry: PluginEntry): ReactNode => (
+    <div key={entry.id} className={css.pluginEntry}>
+      <div className={css.pluginEntryHead}>
+        {/* The name is a BUTTON on the same window.open path as the
+            jump button: as an anchor it would be caught by the
+            document-capture link takeover (which ignores
+            target=_blank) and land in the sidebar browser. */}
+        <button
+          type="button"
+          className={css.pluginName}
+          aria-label={`${t('openPlugin')}: ${entry.name}`}
+          onClick={() => { jump(entry) }}
+        >
+          {entry.name}
+        </button>
+        <span className={css.pluginEntryActions}>
+          <button
+            type="button"
+            className={css.pluginJumpBtn}
+            aria-label={`${t('openPlugin')}: ${entry.name}`}
+            onClick={() => { jump(entry) }}
+          >
+            {t('openPlugin')}
+          </button>
+          <button
+            type="button"
+            className={css.pluginCopyBtn}
+            aria-label={`${t('copyInstall')}: ${entry.name}`}
+            onClick={() => { copy(entry) }}
+          >
+            {copiedId === entry.id ? t('copied') : t('copy')}
+          </button>
+        </span>
+      </div>
+      <div className={css.pluginDesc}>
+        {typeof entry.description === 'function' ? entry.description() : entry.description}
+      </div>
+      <code className={css.pluginInstall}>{entry.install}</code>
+    </div>
+  )
+
+  return (
+    <div className={css.pluginList}>
+      <button
+        type="button"
+        className={css.pluginTopicBtn}
+        onClick={() => { window.open(PLUGIN_TOPIC_URL, '_blank', 'noopener') }}
+      >
+        {t('addPluginsBrowseMore')}
+      </button>
+      <input
+        type="search"
+        className={css.pluginSearch}
+        placeholder={t('addPluginsSearch')}
+        aria-label={t('addPluginsSearch')}
+        value={query}
+        onChange={event => { setQuery(event.currentTarget.value) }}
+      />
+      <div className={css.groupHeading}>
+        <span>{t('addPluginsRecommended')}</span>
+        <span className={css.count}>{filtered.length}</span>
+      </div>
+      {catalog.length === 0 ? (
+        <div className={css.pluginEmpty}>{t('addPluginsEmpty')}</div>
+      ) : filtered.length === 0 ? (
+        <div className={css.pluginEmpty}>{t('addPluginsNoMatch')}</div>
+      ) : (
+        <div className={css.pluginEntries}>
+          {[...groups.entries()].map(([category, entries]) => (
+            <div key={category ?? '\u0000'} className={css.pluginGroup}>
+              {category !== undefined && (
+                <div className={css.pluginGroupHeading}>{category}</div>
+              )}
+              {entries.map(renderEntry)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** The modal itself (mounted only while open — see the module comment). */
+export function AddPluginModal(props: { service: BetterSidebarService; onClose: () => void; kind: PluginKind }) {
+  const { service, onClose, kind } = props
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title={kind === 'tab' ? t('addPluginsTabCard') : t('addPluginsViewerCard')}
+      description={kind === 'tab' ? t('addPluginsTabDesc') : t('addPluginsViewerDesc')}
+      closeLabel={t('close')}
+      className={css.pluginModal}
+      footer={(
+        <button type="button" className={css.done} onClick={onClose}>
+          {t('settingsDone')}
+        </button>
+      )}
+    >
+      <PluginListBody service={service} kind={kind} />
+    </Modal>
+  )
+}