fix(frontend): support task resources in offline mode

monster · monster · commit 5355cc44a12e · 2026-07-14T20:32:02.000+08:00
diff --git a/frontend/src/components/console/project/issue-design-dialog.tsx b/frontend/src/components/console/project/issue-design-dialog.tsx
@@ -3,13 +3,12 @@ import { useCommonData } from "@/components/console/data-provider"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Spinner } from "@/components/ui/spinner"
-import { selectHost, selectImage } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
 import { IconSparkles } from "@tabler/icons-react"
 import { useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { TaskConcurrentLimitDialog } from "@/components/console/task/task-concurrent-limit-dialog"
-import { IssueTaskModelSelect, IssueTaskProjectFields, useIssueTaskModelSelection, useProjectBranchSelection } from "./issue-task-dialog-shared"
+import { IssueTaskHostSelect, IssueTaskImageSelect, IssueTaskModelSelect, IssueTaskProjectFields, useIssueTaskHostSelection, useIssueTaskImageSelection, useIssueTaskModelSelection, useProjectBranchSelection } from "./issue-task-dialog-shared"
 import { toast } from "sonner"
 import { useTranslation } from "react-i18next"
 
@@ -36,6 +35,8 @@ export default function IssueDesignDialog({
   const { images, models, hosts, reloadProjects, reloadUnlinkedTasks, subscription } = useCommonData()
   const { branches, loadingBranches, selectedBranch, selectBranch } = useProjectBranchSelection(open, project)
   const { selectedModel, selectedModelId, setSelectedModelId } = useIssueTaskModelSelection(open, models, subscription)
+  const { selectedHostId, setSelectedHostId } = useIssueTaskHostSelection(open, hosts, selectedModel)
+  const { selectedImageId, setSelectedImageId } = useIssueTaskImageSelection(open, images, project?.image_id)
   const { t } = useTranslation()
 
   const handleOpenChange = (open: boolean) => {
@@ -69,14 +70,24 @@ ${issue?.requirement_document?.replaceAll("`", "\\`")}
       return
     }
 
+    if (!selectedImageId) {
+      toast.error(t("consoleProject.issueTask.toast.imageRequired"))
+      return
+    }
+
+    if (!selectedHostId) {
+      toast.error(t("consoleProject.issueTask.toast.hostRequired"))
+      return
+    }
+
     setSubmitting(true)
   
     await apiRequest('v1UsersTasksCreate', {
       content: renderPrompt,
       cli_name: ConstsCliName.CliNameOpencode,
       model_id: selectedModelId,
-      image_id: selectImage(images, false),
-      host_id: selectHost(hosts, false),
+      image_id: selectedImageId,
+      host_id: selectedHostId,
       repo: {
         branch: project?.platform === ConstsGitPlatform.GitPlatformInternal ? '' : selectedBranch,
       },
@@ -134,6 +145,17 @@ ${issue?.requirement_document?.replaceAll("`", "\\`")}
             setSelectedModelId={setSelectedModelId}
             subscription={subscription}
           />
+          <IssueTaskHostSelect
+            hosts={hosts}
+            selectedHostId={selectedHostId}
+            selectedModel={selectedModel}
+            setSelectedHostId={setSelectedHostId}
+          />
+          <IssueTaskImageSelect
+            images={images}
+            selectedImageId={selectedImageId}
+            setSelectedImageId={setSelectedImageId}
+          />
         </div>
         <DialogFooter className="shrink-0 border-t pt-4">
           <Button onClick={handleConfirm} disabled={submitting}>
diff --git a/frontend/src/components/console/project/issue-dev-dialog.tsx b/frontend/src/components/console/project/issue-dev-dialog.tsx
@@ -3,13 +3,12 @@ import { useCommonData } from "@/components/console/data-provider"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Spinner } from "@/components/ui/spinner"
-import { selectHost, selectImage } from "@/utils/common"
 import { apiRequest } from "@/utils/requestUtils"
 import { IconSparkles } from "@tabler/icons-react"
 import { useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { TaskConcurrentLimitDialog } from "@/components/console/task/task-concurrent-limit-dialog"
-import { IssueTaskModelSelect, IssueTaskProjectFields, useIssueTaskModelSelection, useProjectBranchSelection } from "./issue-task-dialog-shared"
+import { IssueTaskHostSelect, IssueTaskImageSelect, IssueTaskModelSelect, IssueTaskProjectFields, useIssueTaskHostSelection, useIssueTaskImageSelection, useIssueTaskModelSelection, useProjectBranchSelection } from "./issue-task-dialog-shared"
 import { toast } from "sonner"
 import { useTranslation } from "react-i18next"
 
@@ -36,6 +35,8 @@ export default function IssueDevelopDialog({
   const { images, models, hosts, reloadProjects, reloadUnlinkedTasks, subscription } = useCommonData()
   const { branches, loadingBranches, selectedBranch, selectBranch } = useProjectBranchSelection(open, project)
   const { selectedModel, selectedModelId, setSelectedModelId } = useIssueTaskModelSelection(open, models, subscription)
+  const { selectedHostId, setSelectedHostId } = useIssueTaskHostSelection(open, hosts, selectedModel)
+  const { selectedImageId, setSelectedImageId } = useIssueTaskImageSelection(open, images, project?.image_id)
   const { t } = useTranslation()
 
   const handleOpenChange = (open: boolean) => {
@@ -75,14 +76,24 @@ ${issue?.design_document?.replaceAll("`", "\\`")}
       return
     }
 
+    if (!selectedImageId) {
+      toast.error(t("consoleProject.issueTask.toast.imageRequired"))
+      return
+    }
+
+    if (!selectedHostId) {
+      toast.error(t("consoleProject.issueTask.toast.hostRequired"))
+      return
+    }
+
     setSubmitting(true)
   
     await apiRequest('v1UsersTasksCreate', {
       content: renderPrompt,
       cli_name: ConstsCliName.CliNameOpencode,
       model_id: selectedModelId,
-      image_id: selectImage(images, false),
-      host_id: selectHost(hosts, false),
+      image_id: selectedImageId,
+      host_id: selectedHostId,
       repo: {
         branch: project?.platform === ConstsGitPlatform.GitPlatformInternal ? '' : selectedBranch,
       },
@@ -139,6 +150,17 @@ ${issue?.design_document?.replaceAll("`", "\\`")}
             setSelectedModelId={setSelectedModelId}
             subscription={subscription}
           />
+          <IssueTaskHostSelect
+            hosts={hosts}
+            selectedHostId={selectedHostId}
+            selectedModel={selectedModel}
+            setSelectedHostId={setSelectedHostId}
+          />
+          <IssueTaskImageSelect
+            images={images}
+            selectedImageId={selectedImageId}
+            setSelectedImageId={setSelectedImageId}
+          />
         </div>
         <DialogFooter className="shrink-0 border-t pt-4">
           <Button onClick={handleConfirm} disabled={submitting}>
diff --git a/frontend/src/components/console/project/issue-task-dialog-shared.tsx b/frontend/src/components/console/project/issue-task-dialog-shared.tsx
@@ -1,10 +1,14 @@
-import { ConstsGitPlatform, type DomainBranch, type DomainModel, type DomainProject, type DomainSubscriptionResp } from "@/api/Api"
+import { ConstsGitPlatform, ConstsHostStatus, ConstsOwnerType, type DomainBranch, type DomainHost, type DomainImage, type DomainModel, type DomainProject, type DomainSubscriptionResp } from "@/api/Api"
+import Icon from "@/components/common/Icon"
+import { Badge } from "@/components/ui/badge"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Spinner } from "@/components/ui/spinner"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import ModelSelect from "@/components/console/task/model-select"
-import { selectPreferredTaskModel } from "@/utils/common"
+import { getHostBadges, getImageShortName, getOSFromImageName, getOwnerTypeBadge, selectHost, selectImage, selectPreferredTaskModel } from "@/utils/common"
+import { IS_OFFLINE_EDITION } from "@/utils/edition"
 import { apiRequest } from "@/utils/requestUtils"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { toast } from "sonner"
@@ -62,6 +66,76 @@ export function useIssueTaskModelSelection(
   }
 }
 
+export function useIssueTaskImageSelection(
+  open: boolean,
+  images: DomainImage[],
+  projectImageId?: string,
+) {
+  const [selectedImageId, setSelectedImageId] = useState("")
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedImageId("")
+      return
+    }
+
+    const selectedImageIsValid = images.some((image) => image.id === selectedImageId)
+    if (selectedImageIsValid) {
+      return
+    }
+
+    const projectImageIsValid = !!projectImageId && images.some((image) => image.id === projectImageId)
+    setSelectedImageId(projectImageIsValid ? projectImageId : selectImage(images, true))
+  }, [images, open, projectImageId, selectedImageId])
+
+  return {
+    selectedImageId,
+    setSelectedImageId,
+  }
+}
+
+function getDefaultIssueTaskHostId(hosts: DomainHost[]) {
+  if (IS_OFFLINE_EDITION) {
+    return hosts.find((host) => host.id && host.status === ConstsHostStatus.HostStatusOnline)?.id || ""
+  }
+
+  return selectHost(hosts, false)
+}
+
+export function useIssueTaskHostSelection(
+  open: boolean,
+  hosts: DomainHost[],
+  selectedModel?: DomainModel,
+) {
+  const [selectedHostId, setSelectedHostId] = useState("")
+  const selectedPublicModel = selectedModel?.owner?.type === ConstsOwnerType.OwnerTypePublic
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedHostId("")
+      return
+    }
+
+    if (!IS_OFFLINE_EDITION && selectedPublicModel) {
+      setSelectedHostId("public_host")
+      return
+    }
+
+    const selectedHostIsValid = selectedHostId === "public_host"
+      ? !IS_OFFLINE_EDITION
+      : hosts.some((host) => host.id === selectedHostId && host.status === ConstsHostStatus.HostStatusOnline)
+
+    if (!selectedHostIsValid) {
+      setSelectedHostId(getDefaultIssueTaskHostId(hosts))
+    }
+  }, [hosts, open, selectedHostId, selectedPublicModel])
+
+  return {
+    selectedHostId,
+    setSelectedHostId,
+  }
+}
+
 export function useProjectBranchSelection(open: boolean, project?: DomainProject) {
   const { t } = useTranslation()
   const [branches, setBranches] = useState<string[]>([])
@@ -248,3 +322,90 @@ export function IssueTaskModelSelect({
     </div>
   )
 }
+
+export function IssueTaskImageSelect({
+  images,
+  selectedImageId,
+  setSelectedImageId,
+}: {
+  images: DomainImage[]
+  selectedImageId: string
+  setSelectedImageId: (imageId: string) => void
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-2">
+      <Label>{t("consoleProject.issueTask.image")}</Label>
+      <Select value={selectedImageId} onValueChange={setSelectedImageId}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={t("consoleProject.issueTask.selectImage")} />
+        </SelectTrigger>
+        <SelectContent>
+          {images.filter((image) => image.id).map((image) => (
+            <SelectItem key={image.id} value={image.id!}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="flex items-center gap-2">
+                    <Icon name={getOSFromImageName(image.name || "")} className="size-4" />
+                    <span>{image.remark || getImageShortName(image.name || "")}</span>
+                    {getOwnerTypeBadge(image.owner)}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="right">{image.name}</TooltipContent>
+              </Tooltip>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+export function IssueTaskHostSelect({
+  hosts,
+  selectedHostId,
+  selectedModel,
+  setSelectedHostId,
+}: {
+  hosts: DomainHost[]
+  selectedHostId: string
+  selectedModel?: DomainModel
+  setSelectedHostId: (hostId: string) => void
+}) {
+  const { t } = useTranslation()
+  const selectedPublicModel = selectedModel?.owner?.type === ConstsOwnerType.OwnerTypePublic
+
+  return (
+    <div className="space-y-2">
+      <Label>{t("consoleProject.issueTask.host")}</Label>
+      <Select value={selectedHostId} onValueChange={setSelectedHostId}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={t("consoleProject.issueTask.selectHost")} />
+        </SelectTrigger>
+        <SelectContent>
+          {!IS_OFFLINE_EDITION && (
+            <SelectItem value="public_host">
+              <div className="flex items-center gap-2">
+                <span>MonkeyCode</span>
+                <Badge className="!text-primary-foreground">{t("consoleProject.issueTask.free")}</Badge>
+              </div>
+            </SelectItem>
+          )}
+          {hosts.filter((host) => host.id).map((host) => (
+            <SelectItem
+              key={host.id}
+              value={host.id!}
+              disabled={host.status !== ConstsHostStatus.HostStatusOnline || (!IS_OFFLINE_EDITION && selectedPublicModel)}
+            >
+              <div className="flex items-center gap-2">
+                <span>{host.remark || `${host.name}-${host.external_ip}`}</span>
+                {getHostBadges(host)}
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/frontend/src/components/console/task/create-default-task-dialog.tsx b/frontend/src/components/console/task/create-default-task-dialog.tsx
@@ -313,6 +313,11 @@ export default function CreateDefaultTaskDialog({
       return
     }
 
+    if (!selectedImageId) {
+      toast.error(t("taskWorkflow.toast.missingImage"))
+      return
+    }
+
     if (!selectedRepoDisplayName.endsWith(".zip") && selectedRepo && !selectedIdentityId) {
       setSelectedIdentityId("none")
     }
diff --git a/frontend/src/components/console/task/task-input.tsx b/frontend/src/components/console/task/task-input.tsx
@@ -184,6 +184,11 @@ export function TaskInput({ repos, onTaskCreated }: TaskInputProps) {
       return;
     }
 
+    if (!selectedImageId) {
+      toast.error(t("taskWorkflow.toast.missingImage"));
+      return;
+    }
+
     if (!IS_OFFLINE_EDITION && selectedModel?.owner?.type === ConstsOwnerType.OwnerTypePublic && selectedHostId !== "public_host") {
       toast.warning(t("taskWorkflow.toast.builtinModelHostOnly"));
       return;
diff --git a/frontend/src/i18n/resources/cn.ts b/frontend/src/i18n/resources/cn.ts
@@ -635,12 +635,19 @@ const cn = {
       branch: "选择分支",
       selectBranch: "请选择分支",
       model: "大模型",
+      image: "系统镜像",
+      selectImage: "请选择系统镜像",
+      host: "宿主机",
+      selectHost: "请选择宿主机",
+      free: "免费",
       toast: {
         repositoryUnavailable: "无法获取仓库信息",
         fetchBranchesFailedWithMessage: "获取分支列表失败: {{message}}",
         fetchBranchesFailed: "获取分支列表失败",
         branchRequired: "请选择分支",
         modelRequired: "请选择大模型",
+        imageRequired: "请选择系统镜像",
+        hostRequired: "请选择宿主机",
         startFailed: "任务启动失败",
       },
       design: {
@@ -3863,6 +3870,7 @@ const cn = {
       fetchPluginsFailed: "获取插件列表失败",
       missingContent: "请输入任务内容",
       missingModel: "请选择大模型",
+      missingImage: "请选择系统镜像",
       builtinModelHostOnly: "内置模型只能在内置宿主机上使用",
       taskStarted: "任务启动成功",
       taskStartFailed: "任务启动失败",
diff --git a/frontend/src/i18n/resources/en.ts b/frontend/src/i18n/resources/en.ts
diff --git a/frontend/test/issue-task-image-selection.test.ts b/frontend/test/issue-task-image-selection.test.ts

Original file line number	Diff line number	Diff line change
`@@ -313,6 +313,11 @@ export default function CreateDefaultTaskDialog({`
`313`	`313`	`return`
`314`	`314`	`}`
`315`	`315`
	`316`	`+ if (!selectedImageId) {`
	`317`	`+ toast.error(t("taskWorkflow.toast.missingImage"))`
	`318`	`+ return`
	`319`	`+ }`
	`320`	`+`
`316`	`321`	`if (!selectedRepoDisplayName.endsWith(".zip") && selectedRepo && !selectedIdentityId) {`
`317`	`322`	`setSelectedIdentityId("none")`
`318`	`323`	`}`