dsh-plugin-container 0.4.5 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-container",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "private": false,
   "description": "DSH sidebar container panel for macOS Docker runtimes and Apple container",
   "type": "module",
@@ -41,7 +41,8 @@
     "prepack": "npm run build && npm test"
   },
   "devDependencies": {
-    "esbuild": "0.25.0"
+    "esbuild": "0.25.0",
+    "@deepseek-ai/dsh-tools": "^0.2.1-rc.5"
   },
   "license": "MIT",
   "keywords": [

package/src/client/build-image.jsx

@@ -1,43 +1,106 @@
-/** Build a Docker/Apple image from a Dockerfile. */
-import { useEffect, useState } from 'react'
+/** Build an image from a project directory, validating the directory as the user types. */
+import { useEffect, useMemo, useRef, useState } from 'react'
 
-import { Button, Modal } from './components.jsx'
+import { Button, Modal, fill } from './components.jsx'
+import { PLATFORMS } from './platforms.js'
 
 const IMAGE_REF = /^[A-Za-z0-9][A-Za-z0-9_.:/@-]*$/u
 
-export default function BuildImageDialog({ open, t, provider, cwd, onClose, onSubmit }) {
+export default function BuildImageDialog({ open, t, api, provider, defaultDir = '', pickDirectory, onClose, onSubmit }) {
+  const [dir, setDir] = useState('')
+  const [info, setInfo] = useState(null)
+  const [file, setFile] = useState('')
   const [tag, setTag] = useState('')
-  const [contextPath, setContextPath] = useState('')
-  const [dockerfile, setDockerfile] = useState('Dockerfile')
+  const [tagEdited, setTagEdited] = useState(false)
+  const [platform, setPlatform] = useState('')
   const [noCache, setNoCache] = useState(false)
+  const [buildArgs, setBuildArgs] = useState('')
   const [error, setError] = useState(null)
   const [busy, setBusy] = useState(false)
+  const requestId = useRef(0)
+  const canPick = typeof pickDirectory === 'function' && (pickDirectory.available?.() ?? true)
+
+  const choose = async () => {
+    try {
+      const picked = await pickDirectory()
+      if (typeof picked === 'string' && picked !== '') {
+        setDir(picked)
+        setError(null)
+      }
+    } catch (pickError) {
+      setError(pickError instanceof Error && pickError.message !== 'unsupported' ? pickError.message : t('imgBuildDirPickFailed'))
+    }
+  }
 
   useEffect(() => {
     if (!open) return
+    setDir(defaultDir)
+    setInfo(null)
+    setFile('')
     setTag('')
-    setContextPath(cwd || '')
-    setDockerfile('Dockerfile')
+    setTagEdited(false)
+    setPlatform('')
     setNoCache(false)
+    setBuildArgs('')
     setError(null)
     setBusy(false)
-  }, [open, cwd])
+  }, [open, defaultDir])
 
-  const close = () => {
-    if (busy) return
-    onClose()
-  }
+  // Validate the directory shortly after the user stops typing.
+  useEffect(() => {
+    if (!open) return undefined
+    const path = dir.trim()
+    if (path === '') {
+      setInfo(null)
+      return undefined
+    }
+    const id = ++requestId.current
+    const timer = setTimeout(async () => {
+      try {
+        const value = await api.call('buildContext', { path })
+        if (id !== requestId.current) return
+        setInfo(value)
+        setFile((current) => (value.dockerfiles.includes(current) ? current : (value.dockerfiles[0] ?? '')))
+        if (value.suggestedTag !== '') setTag((current) => (tagEdited || current !== '' ? current : value.suggestedTag))
+      } catch {
+        if (id === requestId.current) setInfo(null)
+      }
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [api, dir, open, tagEdited])
+
+  const args = useMemo(() => buildArgs.split(/\n/u).map((line) => line.trim()).filter(Boolean), [buildArgs])
+  const tagValid = IMAGE_REF.test(tag.trim())
+  const dirOk = info !== null && info.isDirectory && info.dockerfiles.length > 0
+  const trimmedDir = dir.trim()
+  const dirChecked = info !== null && info.path === trimmedDir
+
+  let dirLine = null
+  if (trimmedDir !== '' && !dirChecked) dirLine = { tone: 'hint', text: t('imgBuildDirChecking') }
+  else if (dirChecked && !info.exists) dirLine = { tone: 'err', text: t('imgBuildDirMissing') }
+  else if (dirChecked && !info.isDirectory) dirLine = { tone: 'err', text: t('imgBuildDirNotDir') }
+  else if (dirChecked && info.dockerfiles.length === 0) dirLine = { tone: 'err', text: t('imgBuildDirNoFile') }
+  else if (dirChecked) dirLine = { tone: 'ok', text: fill(t('imgBuildDirOk'), { count: info.dockerfiles.length }) }
+
+  const command = useMemo(() => {
+    const cli = provider === 'apple-container' ? 'container' : 'docker'
+    const parts = [cli, 'build', '-t', tag.trim() || '<name:tag>']
+    if (file !== '' && file !== 'Dockerfile') parts.push('-f', file)
+    if (platform !== '') parts.push('--platform', platform)
+    if (noCache) parts.push('--no-cache')
+    for (const arg of args) parts.push('--build-arg', arg)
+    parts.push('.')
+    return `cd ${trimmedDir || '<dir>'}\n${parts.join(' ')}`
+  }, [args, file, noCache, platform, provider, tag, trimmedDir])
 
   const submit = async (event) => {
     event?.preventDefault()
-    const imageTag = tag.trim()
-    const context = contextPath.trim()
-    if (!IMAGE_REF.test(imageTag)) {
-      setError(t('buildInvalidTag'))
+    if (!dirOk) {
+      setError(dirLine?.tone === 'err' ? dirLine.text : t('imgBuildDirPlaceholder'))
       return
     }
-    if (!context.startsWith('/')) {
-      setError(t('buildInvalidContext'))
+    if (!tagValid) {
+      setError(t('imgBuildTagRequired'))
       return
     }
     setBusy(true)
@@ -46,12 +109,14 @@ export default function BuildImageDialog({ open, t, provider, cwd, onClose, onSu
       await onSubmit({
         kind: 'image',
         action: 'build',
-        tag: imageTag,
-        contextPath: context,
-        dockerfile: dockerfile.trim() === '' ? undefined : dockerfile.trim(),
+        tag: tag.trim(),
+        name: tag.trim(),
+        contextDir: trimmedDir,
+        file: file === '' ? undefined : file,
+        platform: platform === '' ? undefined : platform,
         noCache,
+        buildArgs: args,
       })
-      setBusy(false)
       onClose()
     } catch (submitError) {
       setError(submitError instanceof Error ? submitError.message : String(submitError))
@@ -62,56 +127,94 @@ export default function BuildImageDialog({ open, t, provider, cwd, onClose, onSu
   return (
     <Modal
       open={open}
-      title={t('buildImageTitle')}
+      title={t('imgBuildTitle')}
       subtitle={provider === 'apple-container' ? t('providerApple') : t('providerDocker')}
-      onClose={close}
+      onClose={onClose}
       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('buildStart')}
+          <Button size="sm" variant="ghost" onClick={onClose} disabled={busy}>{t('modalCancel')}</Button>
+          <Button size="sm" variant="primary" onClick={submit} disabled={busy || !dirOk || !tagValid}>
+            {busy ? t('imgBuilding') : t('imgBuildStart')}
           </Button>
         </>
       }
     >
       <form className="dsh-docker-run-form" onSubmit={submit}>
         <label className="dsh-docker-field">
-          <span>{t('buildTag')}</span>
-          <input
-            className="dsh-docker-input"
-            value={tag}
-            onChange={(event) => setTag(event.target.value)}
-            placeholder="my-app:latest"
-            spellCheck="false"
-            autoFocus
-          />
+          <span>{t('imgBuildDir')}</span>
+          <div className="dsh-docker-image-picker">
+            <input
+              className="dsh-docker-input dsh-docker-mono"
+              style={{ flex: 1, minWidth: 0 }}
+              value={dir}
+              onChange={(event) => setDir(event.target.value)}
+              onClick={canPick ? choose : undefined}
+              readOnly={canPick}
+              placeholder={canPick ? t('imgBuildDirChoose') : t('imgBuildDirPlaceholder')}
+              spellCheck="false"
+              autoFocus={!canPick}
+            />
+            {canPick && <Button size="sm" onClick={choose}>{dir.trim() === '' ? t('imgBuildDirChoose') : t('imgBuildDirChange')}</Button>}
+          </div>
+          {dirLine === null || dirLine.tone === 'hint'
+            ? <span className="dsh-docker-hint">{dirLine?.text ?? t('imgBuildDirHint')}</span>
+            : <span className={dirLine.tone === 'ok' ? 'dsh-docker-line-ok' : 'dsh-docker-line-err'}>{dirLine.text}</span>}
         </label>
+        {dirOk && info.dockerfiles.length > 1 && (
+          <label className="dsh-docker-field">
+            <span>{t('imgBuildFile')}</span>
+            <select className="dsh-docker-select" value={file} onChange={(event) => setFile(event.target.value)}>
+              {info.dockerfiles.map((name) => <option key={name} value={name}>{name}</option>)}
+            </select>
+          </label>
+        )}
         <label className="dsh-docker-field">
-          <span>{t('buildContext')}</span>
+          <span>{t('imgBuildTag')}</span>
           <input
-            className="dsh-docker-input"
-            value={contextPath}
-            onChange={(event) => setContextPath(event.target.value)}
-            placeholder="/Users/me/project"
+            className="dsh-docker-input dsh-docker-mono"
+            value={tag}
+            onChange={(event) => {
+              setTag(event.target.value)
+              setTagEdited(true)
+            }}
+            placeholder={t('imgBuildTagPlaceholder')}
             spellCheck="false"
           />
-          <small className="dsh-docker-muted">{t('buildContextHint')}</small>
+          <span className="dsh-docker-hint">{t('imgBuildTagHint')}</span>
         </label>
+        <details className="dsh-docker-advanced">
+          <summary>{t('imgBuildAdvanced')}</summary>
+          <div className="dsh-docker-advanced-body">
+            <label className="dsh-docker-field">
+              <span>{t('imgBuildPlatform')}</span>
+              <select className="dsh-docker-select" value={platform} onChange={(event) => setPlatform(event.target.value)}>
+                <option value="">{t('imgBuildPlatformAuto')}</option>
+                {PLATFORMS.map((name) => <option key={name} value={name}>{name}</option>)}
+              </select>
+            </label>
+            <label className="dsh-docker-check">
+              <input type="checkbox" checked={noCache} onChange={(event) => setNoCache(event.target.checked)} />
+              <span>{t('imgBuildNoCache')}</span>
+            </label>
+            <label className="dsh-docker-field">
+              <span>{t('imgBuildArgs')}</span>
+              <textarea
+                className="dsh-docker-input dsh-docker-textarea"
+                value={buildArgs}
+                onChange={(event) => setBuildArgs(event.target.value)}
+                placeholder={t('imgBuildArgsPlaceholder')}
+                spellCheck="false"
+                rows={3}
+              />
+            </label>
+          </div>
+        </details>
         <label className="dsh-docker-field">
-          <span>{t('buildDockerfile')}</span>
-          <input
-            className="dsh-docker-input"
-            value={dockerfile}
-            onChange={(event) => setDockerfile(event.target.value)}
-            placeholder="Dockerfile"
-            spellCheck="false"
-          />
-        </label>
-        <label className="dsh-docker-check">
-          <input type="checkbox" checked={noCache} onChange={(event) => setNoCache(event.target.checked)} />
-          {t('buildNoCache')}
+          <span>{t('imgCommandPreview')}</span>
+          <pre className="dsh-docker-preview">{command}</pre>
         </label>
+        <div className="dsh-docker-hint">{t('imgBuildHint')}</div>
         {error !== null && <div className="dsh-docker-form-error">{error}</div>}
       </form>
     </Modal>

package/src/client/components.jsx

@@ -313,6 +313,11 @@ export function displayValue(value) {
 }
 
 /** @param {unknown} error */
+/** Replace `{key}` placeholders in a localized string. */
+export function fill(text, values = {}) {
+  return String(text).replace(/\{(\w+)\}/gu, (match, key) => (values[key] === undefined ? match : String(values[key])))
+}
+
 export function errorMessage(error) {
   if (error === undefined || error === null) return ''
   if (error instanceof Error) return error.message

package/src/client/i18n.js

@@ -117,17 +117,6 @@ export const zh = {
   removeNetwork: '删除网络',
   pull: '拉取',
   pullPlaceholder: 'nginx:latest',
-  pushImage: '推送镜像',
-  buildImage: '构建镜像',
-  buildImageTitle: '构建镜像',
-  buildTag: '镜像标签',
-  buildContext: '构建上下文（绝对路径）',
-  buildContextHint: '例如 /Users/me/project，必须包含 Dockerfile。',
-  buildDockerfile: 'Dockerfile',
-  buildNoCache: '不使用构建缓存',
-  buildStart: '开始构建',
-  buildInvalidTag: '请输入合法的镜像标签，例如 my-app:latest',
-  buildInvalidContext: '构建上下文必须是绝对路径',
   pullAction: '拉取镜像',
   emptyContainers: '没有容器',
   emptyImages: '没有镜像',
@@ -264,6 +253,56 @@ export const zh = {
   restartToApply: '需要重启 DSH 才能应用 host 变更',
   notInstalled: '未安装',
   unknown: '未知',
+  imgPush: '推送',
+  imgPushTitle: '推送镜像',
+  imgPushSource: '本地镜像',
+  imgPushTarget: '推送到',
+  imgPushTargetHint: '格式：[仓库地址/]用户名/镜像名:标签。推送到 Docker Hub 必须带用户名前缀。',
+  imgPushNeedsNamespace: '这个名字没有用户名前缀，推送到 Docker Hub 通常会被拒绝。例如：myname/{name}',
+  imgPushRetag: '目标名和本地名不同，会先打标签（tag）再推送；本地镜像不会被改名。',
+  imgPushLoginDocker: '推送前需要先登录仓库：在终端运行 docker login（私有仓库加上地址，例如 docker login ghcr.io）。',
+  imgPushLoginApple: '推送前需要先登录仓库：在终端运行 container registry login <仓库地址>。',
+  imgPushPresets: '常用仓库',
+  imgPushStart: '开始推送',
+  imgPushing: '推送中…',
+  imgPushDone: '镜像已推送：{name}',
+  imgPushFailed: '推送失败，详情见控制台',
+  imgPushAuthFailed: '推送被拒绝：请先登录仓库，并确认镜像名带有你的用户名前缀。',
+  imgCommandPreview: '将执行',
+  imgBuild: '构建镜像',
+  imgBuildTitle: '构建镜像',
+  imgBuildDir: '构建目录',
+  imgBuildDirPlaceholder: '/Users/你/项目目录（包含 Dockerfile）',
+  imgBuildDirHint: '选择包含 Dockerfile 的项目文件夹，默认使用控制台的工作目录。',
+  imgBuildDirChecking: '正在检查目录…',
+  imgBuildDirMissing: '目录不存在，请检查路径。',
+  imgBuildDirNotDir: '这不是一个目录。',
+  imgBuildDirNoFile: '目录里没有 Dockerfile 或 Containerfile。',
+  imgBuildDirOk: '找到 {count} 个构建文件',
+  imgBuildFile: '构建文件',
+  imgBuildTag: '镜像名:标签',
+  imgBuildTagPlaceholder: 'myapp:latest',
+  imgBuildTagHint: '仓库部分必须小写。要推送到 Docker Hub，请写成 用户名/镜像名:标签。',
+  imgBuildTagRequired: '请填写镜像名，例如 myapp:latest',
+  imgBuildAdvanced: '高级选项',
+  imgBuildPlatform: '目标平台',
+  imgBuildPlatformAuto: '默认（当前架构）',
+  imgBuildNoCache: '不使用缓存（--no-cache）',
+  imgBuildArgs: '构建参数（每行一个）',
+  imgBuildArgsPlaceholder: 'KEY=VALUE',
+  imgBuildStart: '开始构建',
+  imgBuilding: '构建中…',
+  imgBuildDone: '镜像构建完成：{name}',
+  imgBuildFailed: '构建失败，详情见控制台',
+  imgBuildHint: '构建可能需要几分钟，进度在“控制台”标签查看。',
+  imgPullDone: '镜像已拉取：{name}',
+  imgPullFailed: '拉取失败，详情见控制台',
+  imgPullHint: '输入镜像名，例如 nginx:latest；没写标签时默认 latest。',
+  imgJobBusy: '已有命令正在运行，请等它结束或先取消。',
+  imgPullPlatform: '镜像架构',
+  imgBuildDirChoose: '选择文件夹…',
+  imgBuildDirChange: '更换',
+  imgBuildDirPickFailed: '无法打开文件夹选择器，请重试。',
 }
 
 export const en = {
@@ -374,17 +413,6 @@ export const en = {
   removeNetwork: 'Remove network',
   pull: 'Pull',
   pullPlaceholder: 'nginx:latest',
-  pushImage: 'Push image',
-  buildImage: 'Build image',
-  buildImageTitle: 'Build image',
-  buildTag: 'Image tag',
-  buildContext: 'Build context (absolute path)',
-  buildContextHint: 'For example /Users/me/project; it must contain the Dockerfile.',
-  buildDockerfile: 'Dockerfile',
-  buildNoCache: 'Disable build cache',
-  buildStart: 'Build',
-  buildInvalidTag: 'Enter a valid image tag, for example my-app:latest',
-  buildInvalidContext: 'Build context must be an absolute path',
   pullAction: 'Pull image',
   emptyContainers: 'No containers',
   emptyImages: 'No images',
@@ -521,4 +549,54 @@ export const en = {
   restartToApply: 'Restart DSH to apply host-side changes',
   notInstalled: 'Not installed',
   unknown: 'Unknown',
+  imgPush: 'Push',
+  imgPushTitle: 'Push image',
+  imgPushSource: 'Local image',
+  imgPushTarget: 'Push to',
+  imgPushTargetHint: 'Format: [registry/]username/image:tag. Docker Hub requires a username prefix.',
+  imgPushNeedsNamespace: 'This name has no username prefix, so Docker Hub will usually reject the push. For example: myname/{name}',
+  imgPushRetag: 'The target differs from the local name, so the image is tagged first and then pushed. The local image is not renamed.',
+  imgPushLoginDocker: 'Log in to the registry first: run docker login in a terminal (add the address for private registries, e.g. docker login ghcr.io).',
+  imgPushLoginApple: 'Log in to the registry first: run container registry login <registry> in a terminal.',
+  imgPushPresets: 'Common registries',
+  imgPushStart: 'Start push',
+  imgPushing: 'Pushing…',
+  imgPushDone: 'Image pushed: {name}',
+  imgPushFailed: 'Push failed, see the console for details',
+  imgPushAuthFailed: 'Push was denied: log in to the registry first and make sure the image name has your username prefix.',
+  imgCommandPreview: 'Will run',
+  imgBuild: 'Build image',
+  imgBuildTitle: 'Build image',
+  imgBuildDir: 'Build directory',
+  imgBuildDirPlaceholder: '/Users/you/project (contains a Dockerfile)',
+  imgBuildDirHint: 'Choose the project folder that contains a Dockerfile. Defaults to the console working directory.',
+  imgBuildDirChecking: 'Checking directory…',
+  imgBuildDirMissing: 'Directory not found. Check the path.',
+  imgBuildDirNotDir: 'This is not a directory.',
+  imgBuildDirNoFile: 'No Dockerfile or Containerfile in this directory.',
+  imgBuildDirOk: 'Found {count} build file(s)',
+  imgBuildFile: 'Build file',
+  imgBuildTag: 'Image name:tag',
+  imgBuildTagPlaceholder: 'myapp:latest',
+  imgBuildTagHint: 'The repository part must be lowercase. To push to Docker Hub, use username/image:tag.',
+  imgBuildTagRequired: 'Enter an image name, for example myapp:latest',
+  imgBuildAdvanced: 'Advanced options',
+  imgBuildPlatform: 'Target platform',
+  imgBuildPlatformAuto: 'Default (this machine)',
+  imgBuildNoCache: 'Do not use cache (--no-cache)',
+  imgBuildArgs: 'Build arguments (one per line)',
+  imgBuildArgsPlaceholder: 'KEY=VALUE',
+  imgBuildStart: 'Start build',
+  imgBuilding: 'Building…',
+  imgBuildDone: 'Image built: {name}',
+  imgBuildFailed: 'Build failed, see the console for details',
+  imgBuildHint: 'A build can take a few minutes. Follow the progress in the Console tab.',
+  imgPullDone: 'Image pulled: {name}',
+  imgPullFailed: 'Pull failed, see the console for details',
+  imgPullHint: 'Enter an image name such as nginx:latest. Without a tag, latest is used.',
+  imgJobBusy: 'Another command is running. Wait for it to finish or cancel it first.',
+  imgPullPlatform: 'Image architecture',
+  imgBuildDirChoose: 'Choose folder…',
+  imgBuildDirChange: 'Change',
+  imgBuildDirPickFailed: 'Could not open the folder picker. Try again.',
 }

package/src/client/icons.jsx

@@ -191,6 +191,18 @@ export const IconDownload = (props) => (
   </Svg>
 )
 
+export const IconUpload = (props) => (
+  <Svg {...props}>
+    <path d="M12 15.5V5.3M7.8 9.4 12 5.2l4.2 4.2M5 18.8h14" />
+  </Svg>
+)
+
+export const IconHammer = (props) => (
+  <Svg {...props}>
+    <path d="m13.2 8.4 2.4 2.4M10.6 11 4.8 16.8a1.7 1.7 0 0 0 2.4 2.4L13 13.4M12.4 5.6l3-3 5.6 5.6-3 3z" />
+  </Svg>
+)
+
 export const IconExternal = (props) => (
   <Svg {...props}>
     <path d="M13.5 5H19v5.5M19 5l-7.4 7.4" />
@@ -214,20 +226,6 @@ export const IconExec = (props) => (
   </Svg>
 )
 
-export const IconUpload = (props) => (
-  <Svg {...props}>
-    <path d="M12 16V4M7.5 8.5 12 4l4.5 4.5" />
-    <path d="M5 15v3.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V15" />
-  </Svg>
-)
-
-export const IconBuild = (props) => (
-  <Svg {...props}>
-    <path d="M14.5 5.5 18.5 9.5M4 20l4.2-1 10.9-10.9a2.1 2.1 0 0 0-3-3L5.2 16 4 20Z" />
-    <path d="m13.2 6.8 4 4" />
-  </Svg>
-)
-
 export const IconAttach = (props) => (
   <Svg {...props}>
     <path d="M9.5 14.5 14.5 9.5" />

package/src/client/index.jsx

@@ -38,6 +38,20 @@ export function apply(ctx) {
     return sessionId
   }
 
+  // Desktop exposes the OS chooser directly; other peers go through the workspace UI.
+  const pickDirectory = async () => {
+    const desktop = globalThis.__DSH_DIRECTORY_PICKER__
+    if (desktop !== undefined && typeof desktop.pick === 'function') return desktop.pick()
+    const workspace = ctx.get('uiWorkspace')
+    if (typeof workspace?.pickDirectory === 'function') return workspace.pickDirectory()
+    throw new Error('unsupported')
+  }
+  const canPickDirectory = () => (
+    (globalThis.__DSH_DIRECTORY_PICKER__ !== undefined && typeof globalThis.__DSH_DIRECTORY_PICKER__.pick === 'function') ||
+    typeof ctx.get('uiWorkspace')?.pickDirectory === 'function'
+  )
+  pickDirectory.available = canPickDirectory
+
   const handle = createDockerStore()
   const instance = handle.create()
   const store = { ...handle, create: () => instance }
@@ -51,7 +65,7 @@ export function apply(ctx) {
         key: 'docker',
         locale: NS,
         store,
-        inject: () => ({ api, runs, startDiagnosis }),
+        inject: () => ({ api, runs, startDiagnosis, pickDirectory }),
       },
       DockerPage,
     )

package/src/client/page.jsx

@@ -2,6 +2,8 @@
 import { Component, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
 
 import AttachDialog from './attach.jsx'
+import BuildImageDialog from './build-image.jsx'
+import PushImageDialog from './push-image.jsx'
 import RunContainerDialog from './run-container.jsx'
 import { cacheClear, DockerApiError } from './api.js'
 import {
@@ -16,6 +18,7 @@ import {
   ToastStack,
   cx,
   errorMessage,
+  fill,
   formatTime,
 } from './components.jsx'
 import { useDockerStatus, useProviders } from './hooks.js'
@@ -85,7 +88,7 @@ function tabCount(tab, status, counts) {
 }
 
 export default function DockerPage(props) {
-  const { t, api, runs, useStore, actions, startDiagnosis } = props
+  const { t, api, runs, useStore, actions, startDiagnosis, pickDirectory } = props
   const store = useStore((snapshot) => snapshot)
   const tab = store.tab
   const provider = store.provider
@@ -99,6 +102,9 @@ export default function DockerPage(props) {
   const [confirm, setConfirm] = useState(null)
   const [attach, setAttach] = useState({ open: false, loading: false, mode: 'attach', session: null, output: '', error: null })
   const [runDialog, setRunDialog] = useState({ open: false, image: '' })
+  const [pushDialog, setPushDialog] = useState({ open: false, image: '' })
+  const [buildDialog, setBuildDialog] = useState(false)
+  const watchedJob = useRef(null)
   const attachRef = useRef(null)
   const attachRequest = useRef(0)
   const [toasts, setToasts] = useState([])
@@ -464,6 +470,49 @@ export default function DockerPage(props) {
     }
   }, [actions, confirmThen, notify, provider, runs, scheduleListRefresh, t])
 
+  const openPush = useCallback((image) => setPushDialog({ open: true, image }), [])
+  const closePush = useCallback(() => setPushDialog({ open: false, image: '' }), [])
+  const openBuild = useCallback(() => setBuildDialog(true), [])
+  const closeBuild = useCallback(() => setBuildDialog(false), [])
+
+  /** Start pull/push/build; throws so dialogs can show the error inline. */
+  const startImageJob = useCallback(async ({ name, ...input }) => {
+    if (runs.active) throw new Error(t('imgJobBusy'))
+    const run = await runs.startAction({ provider, context: provider === 'docker' ? selectedContext : undefined, ...input })
+    if (run !== null) {
+      watchedJob.current = { id: run.id, action: input.action, name: name ?? input.id ?? input.tag }
+      actions.setTab('console')
+      scheduleListRefresh()
+    }
+    return run
+  }, [actions, provider, runs, scheduleListRefresh, selectedContext, t])
+
+  const pullImage = useCallback(async (reference, platform) => {
+    try {
+      await startImageJob({ kind: 'image', action: 'pull', id: reference, platform, name: platform === undefined ? reference : `${reference} (${platform})` })
+    } catch (error) {
+      notify('error', errorMessage(error))
+    }
+  }, [notify, startImageJob])
+
+  // Tell the user how a pull/push/build ended, with a login hint for rejected pushes.
+  useEffect(() => {
+    const watched = watchedJob.current
+    const run = runState.run
+    if (watched === null || run === null || run === undefined || run.id !== watched.id) return
+    if (run.status === 'running' || run.status === 'cancelling') return
+    watchedJob.current = null
+    if (run.status === 'cancelled') return
+    const key = watched.action === 'push' ? 'imgPush' : watched.action === 'build' ? 'imgBuild' : 'imgPull'
+    if (run.status === 'exited') {
+      notify('success', fill(t(`${key}Done`), { name: watched.name }))
+    } else if (key === 'imgPush' && /denied|unauthorized|authentication required|access forbidden/iu.test(`${runState.stderr}${runState.stdout}`)) {
+      notify('error', t('imgPushAuthFailed'))
+    } else {
+      notify('error', t(`${key}Failed`))
+    }
+  }, [notify, runState.run, runState.stderr, runState.stdout, t])
+
   const openTab = useCallback((next) => actions.setTab(next), [actions])
 
   const tabProps = {
@@ -479,6 +528,9 @@ export default function DockerPage(props) {
     onAction: runAction,
     onAttach: openAttach,
     onRunContainer: openRun,
+    onPullImage: pullImage,
+    onPushImage: openPush,
+    onBuildImage: openBuild,
     onAskAI: askAI,
     canAskAI,
     onRuntime: runRuntime,
@@ -655,6 +707,26 @@ export default function DockerPage(props) {
           onSubmit={async (payload) => { await runAction(payload) }}
         />
 
+        <PushImageDialog
+          open={pushDialog.open}
+          t={t}
+          provider={provider}
+          image={pushDialog.image}
+          onClose={closePush}
+          onSubmit={startImageJob}
+        />
+
+        <BuildImageDialog
+          open={buildDialog}
+          t={t}
+          api={api}
+          provider={provider}
+          defaultDir={cwd}
+          pickDirectory={pickDirectory}
+          onClose={closeBuild}
+          onSubmit={startImageJob}
+        />
+
         <AttachDialog
           open={attach.open}
           mode={attach.mode}

package/src/client/platforms.js

@@ -0,0 +1,2 @@
+/** Image platforms offered in the pull and build forms. */
+export const PLATFORMS = ['linux/amd64', 'linux/arm64']