dsh-plugin-container 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "dsh-plugin-container",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "private": false,
+  "description": "DSH sidebar container panel for macOS Docker runtimes and Apple container",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "lib/client.js",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "cordis.patch.yml",
+    "README.md",
+    "docs/*.png"
+  ],
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-ui-sidebar",
+        "@deepseek-ai/dsh-client-locale"
+      ]
+    },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build-client.mjs",
+    "install-profile": "node scripts/install-profile.mjs",
+    "test": "node --test test/*.test.mjs",
+    "prepack": "npm run build && npm test"
+  },
+  "devDependencies": {
+    "esbuild": "0.25.0"
+  },
+  "dependencies": {
+    "@deepseek-ai/dsh-tools": "^0.2.1-rc.5"
+  },
+  "license": "MIT",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "docker",
+    "apple-container",
+    "macos",
+    "containers"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/client/api.js

@@ -0,0 +1,94 @@
+/** Typed wrapper around the host `/docker` Connection RPC channel. */
+
+export const DOCKER_CHANNEL = '/docker'
+
+export class DockerApiError extends Error {
+  /**
+   * @param {string} code
+   * @param {string} message
+   * @param {Record<string, any>} [details]
+   * @param {unknown} [cause]
+   */
+  constructor(code, message, details = {}, cause = undefined) {
+    super(message)
+    this.name = 'DockerApiError'
+    this.code = code
+    this.details = details
+    this.cause = cause
+  }
+}
+
+/** @param {unknown} error */
+export function isAbortError(error) {
+  return error instanceof DOMException && error.name === 'AbortError' || error?.name === 'AbortError'
+}
+
+/** @param {unknown} value */
+function isResult(value) {
+  return typeof value === 'object' && value !== null && typeof value.ok === 'boolean'
+}
+
+/** @param {any} connection */
+export function createApi(connection) {
+  return {
+    connection,
+    /**
+     * @param {string} method
+     * @param {Record<string, any>} payload
+     * @param {AbortSignal} [signal]
+     */
+    async call(method, payload = {}, signal = undefined) {
+      let result
+      try {
+        result = await connection.rpc.call(DOCKER_CHANNEL, method, payload, signal)
+      } catch (error) {
+        if (isAbortError(error)) throw new DockerApiError('docker/cancelled', '请求已取消', {}, error)
+        throw new DockerApiError('docker/transport', transportMessage(error), {}, error)
+      }
+      if (!isResult(result)) throw new DockerApiError('docker/protocol', 'Docker 服务返回了无效响应')
+      if (result.ok !== true) {
+        const error = result.error ?? {}
+        throw new DockerApiError(
+          typeof error.code === 'string' ? error.code : 'docker/internal',
+          typeof error.message === 'string' ? error.message : 'Docker 服务调用失败',
+          error.details ?? {},
+        )
+      }
+      return result.value
+    },
+  }
+}
+
+/** @param {unknown} error */
+function transportMessage(error) {
+  const message = error instanceof Error ? error.message : String(error)
+  if (/HTTP 404|not found/iu.test(message)) return 'Docker 服务未加载（/docker 通道不可用），请刷新页面或重启 DSH'
+  if (/HTTP 500/iu.test(message)) return 'Docker 服务内部错误，请查看 DSH 日志'
+  if (/HTTP 401|HTTP 403/iu.test(message)) return '没有权限访问本机 Docker 服务'
+  return `Docker 服务连接失败：${message}`
+}
+
+/** Module-level query cache used by the tabs. Values only, never promises. */
+const queryCache = new Map()
+
+/** @param {string} key */
+export function cacheGet(key) {
+  const hit = queryCache.get(key)
+  if (hit === undefined) return undefined
+  if (Date.now() - hit.at > hit.ttl) {
+    queryCache.delete(key)
+    return undefined
+  }
+  return hit.value
+}
+
+/** @param {string} key @param {unknown} value @param {number} [ttl] */
+export function cacheSet(key, value, ttl = 2000) {
+  queryCache.set(key, { at: Date.now(), value, ttl })
+}
+
+/** @param {string} [prefix] */
+export function cacheClear(prefix = '') {
+  if (prefix === '') queryCache.clear()
+  else for (const key of [...queryCache.keys()]) if (key.startsWith(prefix)) queryCache.delete(key)
+}

package/src/client/attach.jsx

@@ -0,0 +1,133 @@
+/** Interactive PTY attach viewer: raw output plus keyboard/paste input. */
+import { useEffect, useRef, useState } from 'react'
+
+import { Button, CopyButton, Modal, Spinner } from './components.jsx'
+
+/** Keep common terminal output readable without pulling xterm into this modal. */
+function cleanTerminal(text) {
+  return text
+    .replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/gu, '')
+    .replace(/\x1b\[[0-?]*[ -/]*[@-~]/gu, '')
+    .replace(/\x1b[@-_]/gu, '')
+    .replace(/\r/gu, '')
+}
+
+function statusLabel(t, status) {
+  if (status === 'running') return t('attachRunning')
+  if (status === 'exited') return t('attachExited')
+  if (status === 'failed') return t('attachFailed')
+  if (status === 'closed') return t('attachClosed')
+  return t('attachStarting')
+}
+
+function keyBytes(event) {
+  if (event.metaKey) return null
+  if (event.ctrlKey && event.key.length === 1) {
+    const code = event.key.toUpperCase().charCodeAt(0)
+    if (code >= 64 && code <= 95) return String.fromCharCode(code - 64)
+    return null
+  }
+  if (event.altKey) return null
+  if (event.key === 'Enter') return '\r'
+  if (event.key === 'Backspace') return '\x7f'
+  if (event.key === 'Tab') return '\t'
+  if (event.key === 'Escape') return '\x1b'
+  if (event.key === 'ArrowUp') return '\x1b[A'
+  if (event.key === 'ArrowDown') return '\x1b[B'
+  if (event.key === 'ArrowRight') return '\x1b[C'
+  if (event.key === 'ArrowLeft') return '\x1b[D'
+  if (event.key === 'Home') return '\x1b[H'
+  if (event.key === 'End') return '\x1b[F'
+  if (event.key === 'Delete') return '\x1b[3~'
+  if (event.key === 'PageUp') return '\x1b[5~'
+  if (event.key === 'PageDown') return '\x1b[6~'
+  if (event.key.length === 1) return event.key
+  return null
+}
+
+export default function AttachDialog({ open, t, session, output, loading, error, onInput, onClose }) {
+  const screenRef = useRef(null)
+  const preRef = useRef(null)
+  const [stick, setStick] = useState(true)
+
+  useEffect(() => {
+    if (!open) return undefined
+    setStick(true)
+    const timer = setTimeout(() => screenRef.current?.focus(), 60)
+    return () => clearTimeout(timer)
+  }, [open])
+
+  useEffect(() => {
+    if (!stick) return
+    const element = preRef.current
+    if (element !== null) element.scrollTop = element.scrollHeight
+  }, [output, stick])
+
+  const running = session?.status === 'running'
+  const shown = cleanTerminal(output)
+  return (
+    <Modal
+      open={open}
+      title={`${t('attachTitle')} · ${session?.containerName ?? ''}`}
+      subtitle={session?.command ?? undefined}
+      wide
+      onClose={onClose}
+      closeLabel={t('close')}
+      footer={
+        <>
+          <span className="dsh-docker-muted">{t('attachInputHint')}</span>
+          <span style={{ flex: 1 }} />
+          {session?.exitCode !== null && session?.exitCode !== undefined && <span className="dsh-docker-muted">{t('exitCode')}: {session.exitCode}</span>}
+          <CopyButton text={shown} label={t('copy')} copiedLabel={t('copied')} />
+          <Button size="sm" onClick={onClose}>{t('attachClose')}</Button>
+        </>
+      }
+    >
+      <div className="dsh-docker-attach-status">
+        <span className="dsh-docker-status" data-state={running ? 'running' : session?.status === 'failed' ? 'error' : 'stopped'}>
+          <span className="dsh-docker-dot" />
+          {statusLabel(t, session?.status)}
+        </span>
+        <span className="dsh-docker-muted">{session?.cols ?? 120} × {session?.rows ?? 30}</span>
+      </div>
+      <div
+        ref={screenRef}
+        className="dsh-docker-attach-screen"
+        tabIndex={0}
+        role="textbox"
+        aria-label={t('attachTitle')}
+        onKeyDown={(event) => {
+          if (!running || loading) return
+          const data = keyBytes(event)
+          if (data === null) return
+          event.preventDefault()
+          onInput(data)
+        }}
+        onPaste={(event) => {
+          if (!running || loading) return
+          event.preventDefault()
+          const text = event.clipboardData.getData('text')
+          if (text !== '') onInput(text)
+        }}
+      >
+        {loading ? (
+          <div className="dsh-docker-attach-loading"><Spinner size={16} /> {t('attachStarting')}</div>
+        ) : error !== null ? (
+          <pre className="dsh-docker-attach-pre dsh-docker-attach-error">{error.message ?? String(error)}</pre>
+        ) : shown === '' ? (
+          <pre className="dsh-docker-attach-pre dsh-docker-no-output">{t('attachHint')}</pre>
+        ) : (
+          <pre
+            ref={preRef}
+            className="dsh-docker-attach-pre"
+            onScroll={() => {
+              const element = preRef.current
+              if (element === null) return
+              setStick(element.scrollHeight - element.scrollTop - element.clientHeight < 28)
+            }}
+          >{shown}</pre>
+        )}
+      </div>
+    </Modal>
+  )
+}

package/src/client/components.jsx

@@ -0,0 +1,301 @@
+/** Small presentational building blocks shared by the Docker tabs. */
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { IconAlert, IconCheck, IconCopy, IconSearch, IconSpinner, IconX } from './icons.jsx'
+
+export function cx(...values) {
+  return values.filter(Boolean).join(' ')
+}
+
+export function Button({ variant = 'ghost', size = 'md', className, type = 'button', children, ...rest }) {
+  return (
+    <button
+      type={type}
+      className={cx(
+        'dsh-docker-btn',
+        variant === 'primary' && 'dsh-docker-primary',
+        variant === 'danger' && 'dsh-docker-danger',
+        variant === 'danger-solid' && 'dsh-docker-danger-solid',
+        variant === 'ghost' && 'dsh-docker-ghost',
+        size === 'sm' && 'dsh-docker-sm',
+        size === 'lg' && 'dsh-docker-lg',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function IconButton({ label, size = 'md', className, children, ...rest }) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={cx('dsh-docker-icon-btn', size === 'sm' && 'dsh-docker-sm', className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function Spinner({ size = 16, className }) {
+  return <IconSpinner size={size} className={className} />
+}
+
+export function StatusDot({ state = 'unknown' }) {
+  return <span className="dsh-docker-dot" data-state={state} aria-hidden="true" />
+}
+
+export function StateLabel({ state, t }) {
+  const normalized = state === 'running' ? 'running'
+    : state === 'restarting' ? 'restarting'
+      : state === 'paused' ? 'paused'
+        : state === 'dead' ? 'dead'
+          : 'exited'
+  const label = normalized === 'running' ? t('running')
+    : normalized === 'restarting' ? t('statusStarting')
+      : normalized === 'paused' ? t('statusStarting')
+        : normalized === 'dead' ? t('failed')
+          : t('stopped')
+  return (
+    <span className="dsh-docker-state" data-state={normalized}>
+      <StatusDot state={normalized} />
+      {label}
+    </span>
+  )
+}
+
+export function Modal({ open, title, subtitle, wide, onClose, children, footer, closeLabel = 'Close' }) {
+  useEffect(() => {
+    if (!open) return undefined
+    const onKey = (event) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+        onClose?.()
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+  return createPortal(
+    <div
+      className="dsh-docker-modal-backdrop"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose?.()
+      }}
+    >
+      <div
+        className={cx('dsh-docker-modal', wide && 'dsh-docker-modal-wide')}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+      >
+        <div className="dsh-docker-modal-head">
+          <div>
+            <h2 className="dsh-docker-modal-title">{title}</h2>
+            {subtitle !== undefined && <p className="dsh-docker-modal-sub">{subtitle}</p>}
+          </div>
+          <IconButton label={closeLabel} autoFocus onClick={onClose}>
+            <IconX size={16} />
+          </IconButton>
+        </div>
+        <div className="dsh-docker-modal-body">{children}</div>
+        {footer !== undefined && <div className="dsh-docker-modal-foot">{footer}</div>}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+export function ConfirmDialog({ open, title, body, command, confirmLabel, cancelLabel, closeLabel = 'Close', danger = false, busy = false, onConfirm, onCancel }) {
+  return (
+    <Modal
+      open={open}
+      title={title}
+      closeLabel={closeLabel}
+      onClose={onCancel}
+      footer={
+        <>
+          <Button onClick={onCancel} disabled={busy}>{cancelLabel}</Button>
+          <Button variant={danger ? 'danger-solid' : 'primary'} onClick={onConfirm} disabled={busy}>
+            {busy ? <Spinner size={14} /> : null}
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <div className={cx(danger && 'dsh-docker-modal-danger')} style={{ whiteSpace: 'pre-wrap' }}>
+        <div>{body}</div>
+        {command !== undefined && (
+          <pre className="dsh-docker-json" style={{ marginTop: 10, whiteSpace: 'pre-wrap' }}>{command}</pre>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export function ToastStack({ toasts, onDismiss }) {
+  if (toasts.length === 0) return null
+  return createPortal(
+    <div className="dsh-docker-toast-wrap" aria-live="polite">
+      {toasts.map((toast) => (
+        <div key={toast.id} className="dsh-docker-toast" data-tone={toast.tone}>
+          <span style={{ marginTop: 1 }}>
+            {toast.tone === 'success' ? <IconCheck size={14} /> : toast.tone === 'error' ? <IconAlert size={14} /> : null}
+          </span>
+          <span className="dsh-docker-toast-main">{toast.message}</span>
+          <IconButton label="Close" size="sm" onClick={() => onDismiss(toast.id)}>
+            <IconX size={13} />
+          </IconButton>
+        </div>
+      ))}
+    </div>,
+    document.body,
+  )
+}
+
+export function EmptyState({ icon, title, text, action }) {
+  return (
+    <div className="dsh-docker-empty">
+      {icon !== undefined && <span className="dsh-docker-empty-icon">{icon}</span>}
+      <div className="dsh-docker-empty-title">{title}</div>
+      {text !== undefined && <div className="dsh-docker-empty-text">{text}</div>}
+      {action}
+    </div>
+  )
+}
+
+export function ErrorState({ title, text, retryLabel, onRetry }) {
+  return (
+    <div className="dsh-docker-error">
+      <span className="dsh-docker-empty-icon"><IconAlert size={21} /></span>
+      <div className="dsh-docker-error-title">{title}</div>
+      {text !== undefined && <div className="dsh-docker-error-text">{text}</div>}
+      {onRetry !== undefined && <Button onClick={onRetry}>{retryLabel}</Button>}
+    </div>
+  )
+}
+
+export function LoadingSkeleton({ rows = 3 }) {
+  return (
+    <div className="dsh-docker-skeleton" aria-label="Loading">
+      {Array.from({ length: rows }, (_, index) => <div key={index} className="dsh-docker-skel-line" />)}
+    </div>
+  )
+}
+
+export function SearchInput({ value, onChange, placeholder, label }) {
+  return (
+    <label className="dsh-docker-search">
+      <span className="dsh-docker-search-icon"><IconSearch size={14} /></span>
+      <input
+        className="dsh-docker-input"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        aria-label={label ?? placeholder}
+        spellCheck="false"
+      />
+    </label>
+  )
+}
+
+export function CopyButton({ text, label, copiedLabel, className, children }) {
+  const [copied, setCopied] = useState(false)
+  const write = async () => {
+    try {
+      if (navigator.clipboard?.writeText !== undefined) await navigator.clipboard.writeText(text)
+      else {
+        const area = document.createElement('textarea')
+        area.value = text
+        area.style.position = 'fixed'
+        area.style.opacity = '0'
+        document.body.appendChild(area)
+        area.select()
+        document.execCommand('copy')
+        area.remove()
+      }
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      setCopied(false)
+    }
+  }
+  return (
+    <Button onClick={write} className={className} title={label}>
+      {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+      {children ?? (copied ? copiedLabel : label)}
+    </Button>
+  )
+}
+
+export function Chips({ values, className, mono = false }) {
+  if (values.length === 0) return <span className="dsh-docker-muted">—</span>
+  return (
+    <span className={cx('dsh-docker-chips', className)}>
+      {values.map((value, index) => (
+        <span key={`${value}-${index}`} className={cx('dsh-docker-chip', mono && 'dsh-docker-chip-code')} title={value}>
+          {value}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+/** @param {number} bytes */
+export function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return '—'
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  return `${unit === 0 ? Math.round(value) : value.toFixed(value >= 10 ? 1 : 2)} ${units[unit]}`
+}
+
+/** @param {number} ms */
+export function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`
+  const hours = Math.floor(minutes / 60)
+  return `${hours}h ${minutes % 60}m`
+}
+
+/** @param {number | undefined} timestamp */
+export function formatTime(timestamp) {
+  if (typeof timestamp !== 'number') return '—'
+  const date = new Date(timestamp)
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+/** @param {string} value */
+export function shortId(value) {
+  if (typeof value !== 'string') return ''
+  return value.replace(/^sha256:/u, '').slice(0, 12)
+}
+
+/** @param {unknown} value */
+export function displayValue(value) {
+  if (value === undefined || value === null || value === '') return '—'
+  if (typeof value === 'boolean') return value ? 'true' : 'false'
+  return String(value)
+}
+
+/** @param {unknown} error */
+export function errorMessage(error) {
+  if (error === undefined || error === null) return ''
+  if (error instanceof Error) return error.message
+  return String(error)
+}