feat(studio): add conversational DevEnv Skill workbench

frontend/README.md

@@ -42,8 +42,18 @@ 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 same hosted Ark key and
+  `doubao-seed-evolving` default Codex model to the chat CodeEnv and Skill
+  Workbench DevEnv. 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);
@@ -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);
@@ -3996,6 +4008,7 @@ export default function App() {
     setManageAgents(false);
     setCreateView(null);
     setSkillCenter(false);
+    setSkillWorkbenchOpen(false);
     setAddAgent(false);
     setAddMenu(false);
     setSearchView(false);
@@ -4191,10 +4204,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
@@ -4207,12 +4228,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);
@@ -4234,6 +4281,7 @@ export default function App() {
           viewSidRef.current = "";
           setSessionId("");
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setSearchView(false);
           setManageAgents(false);
@@ -4260,6 +4308,8 @@ export default function App() {
           setSandboxAgentWorkspace(null);
           setMyAgents(false);
           setApplicationsView(null);
+          setSkillWorkbenchOpen(false);
+          setSkillCenterFocus(null);
           setSkillCenter(true);
           setError("");
         }}
@@ -4302,6 +4352,7 @@ export default function App() {
           setPlatformFeedbackOrigin(null);
           setCreateView(null);
           setSkillCenter(false);
+          setSkillWorkbenchOpen(false);
           setAddAgent(false);
           setAddMenu(false);
           setSearchView(false);
@@ -4819,8 +4870,47 @@ export default function App() {
                 }}
                 onCancel={() => setAddAgent(false)}
               />
+            ) : skillWorkbenchOpen ? (
+              <SkillWorkbench
+                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/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" },