feat(studio): add conversational DevEnv Skill workbench

frontend/README.md

@@ -42,8 +42,21 @@ server that `veadk frontend` launches — no separate backend.
   the normal conversation renderer; leaving the conversation only disconnects
   it, so the Agent remains available until the user deletes it. OpenClaw and
   Hermes expose their main interface and Terminal through Studio.
-- **AgentKit Skill center**: browse Skill Spaces and their skills with
-  server-side pagination by region, then inspect the selected Skill content.
+- **AgentKit Skill center**: browse Skill Spaces and complete Skill packages
+  with server-side pagination by region. A new-chat-style composer starts
+  create or optimize conversations directly from the center, using either a
+  selected Skill or an uploaded ZIP as the optimization source. Skill
+  conversations share the normal sidebar history, preserve DevEnv progress
+  across navigation, and expose the complete generated file tree in a
+  read-only browser. Cloud deployment binds the active provider's hosted model
+  credential to both the chat CodeEnv and Skill Workbench DevEnv. Studio uses
+  the VeFaaS IAM role's temporary credentials for AgentKit control-plane calls;
+  deployer AK/SK are not copied into the function environment. Skill sources
+  and publication regions come from the active provider (Beijing/Shanghai for
+  Volcengine and Singapore for BytePlus). Publishing streams each AgentKit
+  stage, requires a concrete Skill Space destination, and links the completed
+  version back to that destination in the center. Preview, ZIP download, and
+  publishing are bound to the same immutable revision and content digest.
 - **Automation directory**: browse development and message-channel integrations
   from the Studio sidebar. The local Coding Agents integration detects Trae,
   Claude Code, and Codex across macOS, Linux, and Windows, then globally installs

frontend/package.json

@@ -17,6 +17,7 @@
     "@codemirror/lang-markdown": "^6.5.1",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/legacy-modes": "^6.5.3",
     "@dagrejs/dagre": "^3.0.0",
     "@mdxeditor/editor": "^4.1.0",
     "@openai/apps-sdk-ui": "^0.2.2",

frontend/src/App.tsx

@@ -79,6 +79,9 @@ import {
 import { Sidebar, type SidebarPage } from "./ui/Sidebar";
 import { AgentInfoPanel } from "./ui/AgentTopology";
 import { SkillCenterView } from "./ui/SkillCenter";
+import { SkillWorkbench } from "./ui/skill-workbench/SkillWorkbench";
+import { useSkillWorkbenchTasks } from "./ui/skill-workbench/useSkillWorkbenchTasks";
+import type { SkillWorkbenchPublishResult } from "./ui/skill-workbench/types";
 import { AddAgentKitView } from "./ui/AddAgentKit";
 import { AgentWorkspace } from "./ui/AgentWorkspace";
 import {
@@ -1145,6 +1148,13 @@ export default function App() {
   // flashing the notice in the common, configured case).
   const [hasCreds, setHasCreds] = useState(true);
   const [skillCenter, setSkillCenter] = useState(false);
+  const [skillWorkbenchOpen, setSkillWorkbenchOpen] = useState(false);
+  const [skillCenterFocus, setSkillCenterFocus] =
+    useState<SkillWorkbenchPublishResult | null>(null);
+  const skillWorkbenchTasks = useSkillWorkbenchTasks(
+    features.skillCenter !== false,
+    userId,
+  );
   const [addAgent, setAddAgent] = useState(false);
   // The "添加 Agent" chooser (two cards: AgentKit / 从 0 快速创建).
   const [addMenu, setAddMenu] = useState(false);
@@ -1203,7 +1213,7 @@ export default function App() {
     appName?: string;
     currentVersion?: number | null;
   } | null>(null);
-  const [newRuntimeRegion, setNewRuntimeRegion] = useState(
+  const [newRuntimeRegion, setNewRuntimeRegion] = useState<string>(
     defaultCloudRegion(cloudProvider),
   );
   const [focusedDeploymentTaskId, setFocusedDeploymentTaskId] = useState("");
@@ -1733,6 +1743,7 @@ export default function App() {
           setAppName("");
           setCreateView(null);
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setAddMenu(false);
           setSearchView(false);
@@ -3015,6 +3026,7 @@ export default function App() {
     setPlatformFeedbackOrigin(null);
     setCreateView(null);
     setSkillCenter(false);
+    setSkillWorkbenchOpen(false);
     setAddAgent(false);
     setAddMenu(false);
     setSearchView(false);
@@ -3997,6 +4009,7 @@ export default function App() {
     setManageAgents(false);
     setCreateView(null);
     setSkillCenter(false);
+    setSkillWorkbenchOpen(false);
     setAddAgent(false);
     setAddMenu(false);
     setSearchView(false);
@@ -4192,10 +4205,18 @@ export default function App() {
         ? "search"
         : myAgents || manageAgents || sandboxAgentDetailTarget || sandboxAgentWorkspace
           ? "agents"
-          : sessionId || createView || skillCenter || addAgent || addMenu
+          : sessionId || createView || skillCenter || skillWorkbenchOpen || addAgent || addMenu
             ? null
             : "new-chat";
 
+  const deleteSkillConversation = async (jobId: string) => {
+    await skillWorkbenchTasks.deleteTask(jobId);
+    if (skillWorkbenchTasks.activeJobId === jobId) {
+      setSkillWorkbenchOpen(false);
+      setSkillCenter(true);
+    }
+  };
+
   return (
     <div className="layout">
       <Sidebar
@@ -4208,12 +4229,38 @@ export default function App() {
         activePage={sidebarActivePage}
         streamingSids={streamingSids}
         evaluatingSids={evaluatingSids}
+        skillConversations={skillWorkbenchTasks.tasks}
+        skillConversationsLoading={skillWorkbenchTasks.tasksLoading}
+        skillConversationsError={skillWorkbenchTasks.tasksError}
+        activeSkillConversationId={skillWorkbenchOpen ? skillWorkbenchTasks.activeJobId : ""}
+        onRetrySkillConversations={() => void skillWorkbenchTasks.refreshTasks()}
+        onDeleteSkillConversation={deleteSkillConversation}
+        onOpenSkillConversation={(jobId) => {
+          if (sandboxSession) exitSandboxSession();
+          viewSidRef.current = "";
+          setSessionId("");
+          setCreateView(null);
+          setAddAgent(false);
+          setAddMenu(false);
+          setSearchView(false);
+          setManageAgents(false);
+          setAgentDetailTarget(null);
+          setSandboxAgentDetailTarget(null);
+          setSandboxAgentWorkspace(null);
+          setMyAgents(false);
+          setApplicationsView(null);
+          setSkillCenter(false);
+          skillWorkbenchTasks.selectTask(jobId);
+          setSkillWorkbenchOpen(true);
+          setError("");
+        }}
         onNewChat={openNewChat}
         onSearch={() => {
           setPlatformFeedbackOrigin(null);
           if (sandboxSession) exitSandboxSession();
           setCreateView(null);
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setAddMenu(false);
           setManageAgents(false);
@@ -4235,6 +4282,7 @@ export default function App() {
           viewSidRef.current = "";
           setSessionId("");
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setSearchView(false);
           setManageAgents(false);
@@ -4261,6 +4309,8 @@ export default function App() {
           setSandboxAgentWorkspace(null);
           setMyAgents(false);
           setApplicationsView(null);
+          setSkillWorkbenchOpen(false);
+          setSkillCenterFocus(null);
           setSkillCenter(true);
           setError("");
         }}
@@ -4303,6 +4353,7 @@ export default function App() {
           setPlatformFeedbackOrigin(null);
           setCreateView(null);
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setAddMenu(false);
           setSearchView(false);
@@ -4820,8 +4871,48 @@ export default function App() {
                 }}
                 onCancel={() => setAddAgent(false)}
               />
+            ) : skillWorkbenchOpen ? (
+              <SkillWorkbench
+                cloudProvider={cloudProvider}
+                task={skillWorkbenchTasks.activeTask}
+                provisioningTask={skillWorkbenchTasks.activeProvisioningTask}
+                taskLoading={skillWorkbenchTasks.activeTaskLoading || skillWorkbenchTasks.startingTask}
+                taskError={skillWorkbenchTasks.activeTaskError || skillWorkbenchTasks.startError}
+                taskRecovering={skillWorkbenchTasks.activeTaskRecovering}
+                artifact={skillWorkbenchTasks.activeArtifact}
+                artifactLoading={skillWorkbenchTasks.activeArtifactLoading}
+                artifactError={skillWorkbenchTasks.activeArtifactError}
+                onTaskChanged={skillWorkbenchTasks.upsertTask}
+                onCancelProvisioning={skillWorkbenchTasks.cancelProvisioning}
+                onStopTask={skillWorkbenchTasks.stopTask}
+                onRetryTask={() => void skillWorkbenchTasks.refreshActiveTask()}
+                onRetryArtifact={() => {
+                  void skillWorkbenchTasks.refreshActiveArtifact().catch(() => undefined);
+                }}
+                onBack={() => {
+                  setSkillWorkbenchOpen(false);
+                  setSkillCenter(true);
+                }}
+                onViewPublished={(result) => {
+                  setSkillCenterFocus(result);
+                  setSkillWorkbenchOpen(false);
+                  setSkillCenter(true);
+                }}
+              />
             ) : skillCenter ? (
-              <SkillCenterView cloudProvider={cloudProvider} />
+              <SkillCenterView
+                cloudProvider={cloudProvider}
+                focus={skillCenterFocus}
+                onFocusHandled={() => setSkillCenterFocus(null)}
+                onStartTask={(args) => {
+                  skillWorkbenchTasks.clearActiveTask();
+                  setSkillCenterFocus(null);
+                  const pending = skillWorkbenchTasks.startTask(args);
+                  setSkillCenter(false);
+                  setSkillWorkbenchOpen(true);
+                  return pending;
+                }}
+              />
             ) : visibleCreateView !== null && !hasCreds ? (
               <div
                 style={{

frontend/src/adk/cloudProvider.ts

@@ -1,7 +1,8 @@
 export type CloudProvider = "volcengine" | "byteplus";
+export type CloudRegion = "cn-beijing" | "cn-shanghai" | "ap-southeast-1";
 
 export interface CloudRegionOption {
-  value: string;
+  value: CloudRegion;
   label: string;
 }
 
@@ -24,15 +25,22 @@ const VOLCENGINE_REGIONS: CloudRegionOption[] = [
 const BYTEPLUS_REGIONS: CloudRegionOption[] = [
   { value: BYTEPLUS_DEFAULT_REGION, label: BYTEPLUS_DEFAULT_REGION },
 ];
+const SUPPORTED_CLOUD_REGIONS: ReadonlySet<string> = new Set(
+  [...VOLCENGINE_REGIONS, ...BYTEPLUS_REGIONS].map((option) => option.value),
+);
 
 export function cloudRegionOptions(provider: CloudProvider): CloudRegionOption[] {
   return provider === "byteplus" ? BYTEPLUS_REGIONS : VOLCENGINE_REGIONS;
 }
 
-export function defaultCloudRegion(provider: CloudProvider): string {
+export function defaultCloudRegion(provider: CloudProvider): CloudRegion {
   return cloudRegionOptions(provider)[0]?.value || VOLCENGINE_DEFAULT_REGION;
 }
 
+export function isSupportedCloudRegion(value: unknown): value is CloudRegion {
+  return typeof value === "string" && SUPPORTED_CLOUD_REGIONS.has(value);
+}
+
 export function formatCloudRegion(region: string, provider?: CloudProvider): string {
   const options = provider
     ? cloudRegionOptions(provider)

frontend/src/create/skills/skillspace.ts

@@ -49,6 +49,11 @@ export interface SkillSpacePageOptions {
   project?: string;
 }
 
+export function formatSkillVersion(version?: string): string {
+  const normalized = (version || "").trim().replace(/^v+/i, "");
+  return normalized ? `v${normalized}` : "—";
+}
+
 async function jfetch<T>(url: string): Promise<T> {
   const res = await fetch(url, {
     headers: { accept: "application/json" },