dsh-plugin-container 0.0.0-stage → 0.2.0

package/src/client/run-container.jsx

@@ -0,0 +1,187 @@
+/** Start a new container from a local image or a manually entered reference. */
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button, Modal } from './components.jsx'
+import { useDockerList } from './hooks.js'
+
+export default function RunContainerDialog({
+  open,
+  t,
+  api,
+  provider,
+  context,
+  status,
+  refreshToken = 0,
+  features = [],
+  initialImage = '',
+  onClose,
+  onSubmit,
+}) {
+  const [image, setImage] = useState('')
+  const [manual, setManual] = useState(false)
+  const [customImage, setCustomImage] = useState('')
+  const [name, setName] = useState('')
+  const [command, setCommand] = useState('')
+  const [ports, setPorts] = useState('')
+  const [env, setEnv] = useState('')
+  const [error, setError] = useState(null)
+  const [busy, setBusy] = useState(false)
+  const images = useDockerList(api, provider, 'images', context, {
+    refreshToken,
+    enabled: open && features.includes('run') && status?.daemon?.state === 'running',
+  })
+
+  const options = useMemo(() => {
+    const names = []
+    for (const item of images.data?.items ?? []) {
+      if (typeof item.name === 'string' && item.name !== '' && item.name !== '<none>' && !names.includes(item.name)) names.push(item.name)
+    }
+    if (initialImage !== '' && !names.includes(initialImage)) names.unshift(initialImage)
+    return names
+  }, [images.data, initialImage])
+
+  useEffect(() => {
+    if (!open) return
+    setImage(initialImage)
+    setManual(false)
+    setCustomImage(initialImage)
+    setName('')
+    setCommand('')
+    setPorts('')
+    setEnv('')
+    setError(null)
+    setBusy(false)
+  }, [open, initialImage])
+
+  useEffect(() => {
+    if (!open || manual) return
+    if (initialImage !== '' && options.includes(initialImage)) {
+      setImage(initialImage)
+      return
+    }
+    if (image === '' || !options.includes(image)) {
+      if (options.length > 0) setImage(options[0])
+    }
+  }, [open, options, image, manual, initialImage])
+
+  const reset = () => {
+    setImage('')
+    setManual(false)
+    setCustomImage('')
+    setName('')
+    setCommand('')
+    setPorts('')
+    setEnv('')
+    setError(null)
+    setBusy(false)
+  }
+
+  const close = () => {
+    reset()
+    onClose()
+  }
+
+  const submit = async (event) => {
+    event?.preventDefault()
+    const ref = (manual ? customImage : image).trim()
+    if (ref === '') {
+      setError(t('runImageRequired'))
+      return
+    }
+    setBusy(true)
+    setError(null)
+    try {
+      await onSubmit({
+        kind: 'container',
+        action: 'run',
+        image: ref,
+        name: name.trim() === '' ? undefined : name.trim(),
+        command: command.trim() === '' ? undefined : command.trim(),
+        ports: ports.split(/[\n,]+/u).map((entry) => entry.trim()).filter(Boolean),
+        env: env.split(/\n/u).map((entry) => entry.trim()).filter(Boolean),
+      })
+      reset()
+      onClose()
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : String(submitError))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={t('runContainerTitle')}
+      subtitle={provider === 'apple-container' ? t('providerApple') : t('providerDocker')}
+      onClose={close}
+      closeLabel={t('close')}
+      footer={
+        <>
+          <Button size="sm" variant="ghost" onClick={close} disabled={busy}>{t('modalCancel')}</Button>
+          <Button size="sm" variant="primary" onClick={submit} disabled={busy}>
+            {busy ? t('starting') : t('runStart')}
+          </Button>
+        </>
+      }
+    >
+      <form className="dsh-docker-run-form" onSubmit={submit}>
+        <label className="dsh-docker-field">
+          <span>{t('runImage')}</span>
+          <div className="dsh-docker-image-picker">
+            <select
+              className="dsh-docker-select"
+              value={manual ? '__custom__' : image}
+              onChange={(event) => {
+                if (event.target.value === '__custom__') {
+                  setManual(true)
+                  setCustomImage(image)
+                } else {
+                  setManual(false)
+                  setImage(event.target.value)
+                }
+              }}
+              autoFocus
+            >
+              <option value="">{t('runImageSelect')}</option>
+              {options.map((name) => <option key={name} value={name}>{name}</option>)}
+              <option value="__custom__">{t('runImageCustom')}</option>
+            </select>
+            <Button size="sm" variant="ghost" onClick={images.reload} disabled={images.loading}>{t('refresh')}</Button>
+          </div>
+          {manual && (
+            <input
+              className="dsh-docker-input"
+              value={customImage}
+              onChange={(event) => setCustomImage(event.target.value)}
+              placeholder={t('runImagePlaceholder')}
+              spellCheck="false"
+            />
+          )}
+          {images.data !== null && options.length === 0 && !manual && (
+            <span className="dsh-docker-muted">{t('runImageListEmpty')}</span>
+          )}
+        </label>
+        <div className="dsh-docker-run-grid">
+          <label className="dsh-docker-field">
+            <span>{t('runName')}</span>
+            <input className="dsh-docker-input" value={name} onChange={(event) => setName(event.target.value)} placeholder={t('runNamePlaceholder')} spellCheck="false" />
+          </label>
+          <label className="dsh-docker-field">
+            <span>{t('runPorts')}</span>
+            <input className="dsh-docker-input" value={ports} onChange={(event) => setPorts(event.target.value)} placeholder={t('runPortsPlaceholder')} spellCheck="false" />
+          </label>
+        </div>
+        <label className="dsh-docker-field">
+          <span>{t('runCommand')}</span>
+          <input className="dsh-docker-input" value={command} onChange={(event) => setCommand(event.target.value)} placeholder={t('runCommandPlaceholder')} spellCheck="false" />
+        </label>
+        <label className="dsh-docker-field">
+          <span>{t('runEnv')}</span>
+          <textarea className="dsh-docker-input dsh-docker-textarea" value={env} onChange={(event) => setEnv(event.target.value)} placeholder={t('runEnvPlaceholder')} spellCheck="false" rows={3} />
+        </label>
+        <div className="dsh-docker-muted">{t('runDetachedHint')}</div>
+        {error !== null && <div className="dsh-docker-form-error">{error}</div>}
+      </form>
+    </Modal>
+  )
+}

package/src/client/runs.js

@@ -0,0 +1,182 @@
+/** Single active command controller shared by the console and quick actions. */
+
+import { DockerApiError, isAbortError } from './api.js'
+
+const POLL_MS = 400
+const UI_OUTPUT_LIMIT = 1_500_000
+
+/** @param {number} ms */
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+/** @param {string} text */
+function trimOutput(text) {
+  if (text.length <= UI_OUTPUT_LIMIT) return { text, truncated: false }
+  return { text: `…[前面的输出已省略]\n${text.slice(-UI_OUTPUT_LIMIT)}`, truncated: true }
+}
+
+export class RunController {
+  /** @param {{call: Function}} api */
+  constructor(api) {
+    this.api = api
+    this.snapshot = {
+      run: null,
+      stdout: '',
+      stderr: '',
+      truncated: false,
+      error: null,
+    }
+    this.subscribers = new Set()
+    this.generation = 0
+    this.stdoutOffset = 0
+    this.stderrOffset = 0
+    this.polling = false
+    this.onFinished = undefined
+  }
+
+  subscribe = (listener) => {
+    this.subscribers.add(listener)
+    return () => this.subscribers.delete(listener)
+  }
+
+  getSnapshot = () => this.snapshot
+
+  /** @param {Partial<typeof this.snapshot>} patch */
+  update(patch) {
+    this.snapshot = { ...this.snapshot, ...patch }
+    for (const listener of [...this.subscribers]) listener()
+  }
+
+  get active() {
+    const status = this.snapshot.run?.status
+    return status === 'running' || status === 'cancelling'
+  }
+
+  /**
+   * Start one docker command. Throws DockerApiError on validation/transport
+   * errors, including `docker/confirmation-required`.
+   */
+  async start(input) {
+    if (this.active) throw new DockerApiError('docker/run-active', '已有命令正在运行，请先取消')
+    const generation = ++this.generation
+    this.polling = false
+    this.stdoutOffset = 0
+    this.stderrOffset = 0
+    this.update({ run: null, stdout: '', stderr: '', truncated: false, error: null })
+    const value = await this.api.call('run', input)
+    if (generation !== this.generation) return value?.run ?? null
+    this.update({ run: value?.run ?? null })
+    if (value?.run !== undefined && value.run !== null) this.beginPolling(value.run.id, generation)
+    return value?.run ?? null
+  }
+
+  /** Start a runtime lifecycle action (colima/Docker Desktop/OrbStack). */
+  async startRuntime(action, context, confirm = false, provider = 'docker') {
+    if (this.active) throw new DockerApiError('docker/run-active', '已有命令正在运行，请先取消')
+    const generation = ++this.generation
+    this.polling = false
+    this.stdoutOffset = 0
+    this.stderrOffset = 0
+    this.update({ run: null, stdout: '', stderr: '', truncated: false, error: null })
+    const value = await this.api.call('runtimeAction', { provider, action, context: context ?? undefined, confirm })
+    if (generation !== this.generation) return value
+    if (value?.run !== undefined && value.run !== null) {
+      this.update({ run: value.run })
+      this.beginPolling(value.run.id, generation)
+    }
+    return value
+  }
+
+  /** Start one semantic quick action (provider-specific mapping lives on the host). */
+  async startAction(input) {
+    if (this.active) throw new DockerApiError('docker/run-active', '已有命令正在运行，请先取消')
+    const generation = ++this.generation
+    this.polling = false
+    this.stdoutOffset = 0
+    this.stderrOffset = 0
+    this.update({ run: null, stdout: '', stderr: '', truncated: false, error: null })
+    const value = await this.api.call('action', input)
+    if (generation !== this.generation) return value?.run ?? null
+    this.update({ run: value?.run ?? null })
+    if (value?.run !== undefined && value.run !== null) this.beginPolling(value.run.id, generation)
+    return value?.run ?? null
+  }
+
+  /** @param {string} runId @param {number} generation */
+  beginPolling(runId, generation) {
+    this.polling = true
+    const loop = async () => {
+      while (this.polling && generation === this.generation) {
+        await sleep(POLL_MS)
+        if (!this.polling || generation !== this.generation) return
+        let value
+        try {
+          value = await this.api.call('poll', {
+            runId,
+            stdoutOffset: this.stdoutOffset,
+            stderrOffset: this.stderrOffset,
+          })
+        } catch (error) {
+          if (isAbortError(error)) return
+          this.update({ error: error instanceof Error ? error.message : String(error) })
+          this.polling = false
+          return
+        }
+        if (generation !== this.generation) return
+        const stdout = `${this.snapshot.stdout}${value.stdout?.text ?? ''}`
+        const stderr = `${this.snapshot.stderr}${value.stderr?.text ?? ''}`
+        this.stdoutOffset = value.stdout?.nextOffset ?? this.stdoutOffset
+        this.stderrOffset = value.stderr?.nextOffset ?? this.stderrOffset
+        const trimmed = trimOutput(stdout)
+        const trimmedErr = trimOutput(stderr)
+        const run = value.run ?? this.snapshot.run
+        this.update({
+          run,
+          stdout: trimmed.text,
+          stderr: trimmedErr.text,
+          truncated: this.snapshot.truncated || trimmed.truncated || trimmedErr.truncated || value.stdout?.lossy === true || value.stderr?.lossy === true,
+        })
+        const status = run?.status
+        if (status !== 'running' && status !== 'cancelling') {
+          this.polling = false
+          this.onFinished?.(run)
+          return
+        }
+      }
+    }
+    loop().catch((error) => {
+      this.update({ error: error instanceof Error ? error.message : String(error) })
+      this.polling = false
+    })
+  }
+
+  async cancel() {
+    const run = this.snapshot.run
+    if (run === null || (run.status !== 'running' && run.status !== 'cancelling')) return
+    try {
+      const value = await this.api.call('cancel', { runId: run.id })
+      this.update({ run: value?.run ?? run })
+    } catch (error) {
+      if (!isAbortError(error)) this.update({ error: error instanceof Error ? error.message : String(error) })
+    }
+  }
+
+  reset() {
+    this.generation += 1
+    this.polling = false
+    this.stdoutOffset = 0
+    this.stderrOffset = 0
+    this.update({ run: null, stdout: '', stderr: '', truncated: false, error: null })
+  }
+
+  dispose() {
+    this.generation += 1
+    this.polling = false
+    const run = this.snapshot.run
+    if (run !== null && (run.status === 'running' || run.status === 'cancelling')) {
+      this.api.call('cancel', { runId: run.id }).catch(() => {})
+    }
+    this.subscribers.clear()
+  }
+}

package/src/client/store.js

@@ -0,0 +1,91 @@
+/** Browser-local view state: active tab, selected context, console cwd. */
+import { defineStore } from '@deepseek-ai/dsh-client-store'
+
+const TAB_KEY = 'dsh.docker.tab'
+const CONTEXT_KEY = 'dsh.docker.context'
+const CWD_KEY = 'dsh.docker.cwd'
+const PROVIDER_KEY = 'dsh.docker.provider'
+const HISTORY_KEY = 'dsh.docker.history'
+const VALID_TABS = new Set(['overview', 'containers', 'images', 'volumes', 'networks', 'compose', 'console'])
+const VALID_PROVIDERS = new Set(['docker', 'apple-container'])
+
+/** @param {string} key */
+function read(key) {
+  try {
+    return typeof localStorage === 'undefined' ? null : localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+/** @param {string} key @param {string | null} value */
+function write(key, value) {
+  try {
+    if (typeof localStorage === 'undefined') return
+    if (value === null || value === '') localStorage.removeItem(key)
+    else localStorage.setItem(key, value)
+  } catch {
+    // Storage can be unavailable in private contexts; view state still works.
+  }
+}
+
+export function readHistory() {
+  try {
+    const raw = read(HISTORY_KEY)
+    if (raw === null) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed.filter((entry) => typeof entry === 'string').slice(0, 50) : []
+  } catch {
+    return []
+  }
+}
+
+/** @param {string[]} entries */
+export function writeHistory(entries) {
+  try {
+    write(HISTORY_KEY, JSON.stringify(entries.slice(0, 50)))
+  } catch {
+    // ignore
+  }
+}
+
+export function createDockerStore() {
+  return defineStore({
+    init: () => {
+      const storedTab = read(TAB_KEY)
+      const storedContext = read(CONTEXT_KEY)
+      const storedCwd = read(CWD_KEY)
+      const storedProvider = read(PROVIDER_KEY)
+      return {
+        provider: storedProvider !== null && VALID_PROVIDERS.has(storedProvider) ? storedProvider : 'docker',
+        tab: storedTab !== null && VALID_TABS.has(storedTab) ? storedTab : 'overview',
+        context: storedContext !== null && storedContext !== '' ? storedContext : null,
+        cwd: storedCwd ?? '',
+      }
+    },
+    actions: {
+      /** @param {{provider: string}} draft @param {string} provider */
+      setProvider(draft, provider) {
+        if (!VALID_PROVIDERS.has(provider)) return
+        draft.provider = provider
+        write(PROVIDER_KEY, provider)
+      },
+      /** @param {{tab: string}} draft @param {string} tab */
+      setTab(draft, tab) {
+        if (!VALID_TABS.has(tab)) return
+        draft.tab = tab
+        write(TAB_KEY, tab)
+      },
+      /** @param {{context: string | null}} draft @param {string | null} context */
+      setContext(draft, context) {
+        draft.context = context === '' ? null : context
+        write(CONTEXT_KEY, draft.context)
+      },
+      /** @param {{cwd: string}} draft @param {string} cwd */
+      setCwd(draft, cwd) {
+        draft.cwd = cwd
+        write(CWD_KEY, cwd)
+      },
+    },
+  })
+}