Merge pull request #118 from ClayPulse/dev

Shellishack · web-flow · commit e7e87f7b2200 · 2025-11-16T08:21:42.000+08:00
Fix npm lib bugs &amp; support MCP client
diff --git a/.changeset/afraid-rockets-camp.md b/.changeset/afraid-rockets-camp.md
@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Allow optional args for workflow handler
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -10,6 +10,7 @@
   },
   "changesets": [
     "afraid-moments-punch",
+    "afraid-rockets-camp",
     "angry-llamas-smash",
     "beige-pandas-rhyme",
     "beige-pumas-run",
@@ -50,6 +51,7 @@
     "real-knives-rest",
     "rude-ducks-design",
     "sad-tables-join",
+    "shaggy-geckos-bow",
     "sharp-memes-give",
     "shiny-doodles-jump",
     "silent-glasses-kick",
diff --git a/.changeset/shaggy-geckos-bow.md b/.changeset/shaggy-geckos-bow.md
@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Fix object type issue in typed variable
diff --git a/README.md b/README.md
@@ -60,12 +60,16 @@ Running vibe coding workflow in canvas view allows you to develop software on an
 ### Vibe Coding agent -- code modification
 
 ![VibeCoding_CodeEditorControl](https://cdn.pulse-editor.com/assets/VibeCode_CodeEditorControlAgent.gif)
+## 2. MCP client
 
-## 2. Serverless ComfyUI Image/Video Generation (WIP)
+You can connect MCP servers and Pulse full-stack apps to agentic chat. e.g. installation-free browser agent with chrome-devtools-mcp and chrome remote debugging:
+![Browser_Controller](https://cdn.pulse-editor.com/assets/MCP_Agent.png)
+
+## 3. Serverless ComfyUI Image/Video Generation (WIP)
 
 You can run workflows with [Pulse App ComfyUI Workflow](https://github.com/Shellishack/pulse-app-comfyui-workflow).
 
-## 3. Video Editing (WIP)
+## 4. Video Editing (WIP)
 
 ## Remote or local workspace
 
diff --git a/npm-packages/cli/package.json b/npm-packages/cli/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.1.1-beta.0",
+	"version": "0.1.1-beta.1",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"
diff --git a/npm-packages/cli/source/components/commands/create.tsx b/npm-packages/cli/source/components/commands/create.tsx
@@ -125,15 +125,23 @@ export default function Create({cli}: {cli: Result<Flags>}) {
 					<Text> Initializing project...</Text>
 				</Box>,
 			);
+
+			/* Setup pulse.config.ts */
+			const pulseConfigPath = path.join(process.cwd(), name, 'pulse.config.ts');
+			let pulseConfig = fs.readFileSync(pulseConfigPath, 'utf8');
+			// Modify visibility by matching the block that starts with 'visibility:',
+			// and replacing the entire line with the new visibility value.
+			pulseConfig = pulseConfig.replace(
+				/visibility:\s*['"`](public|unlisted|private)['"`],?/,
+				`visibility: '${visibility}',`,
+			);
+			fs.writeFileSync(pulseConfigPath, pulseConfig);
+
+			/* Setup packages.json */
 			const packageJsonPath = path.join(process.cwd(), name, 'package.json');
 			const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 			packageJson.name = name.replaceAll('-', '_');
 
-			// Modify the visibility
-			packageJson['pulse-editor-marketplace'] = {
-				visibility,
-			};
-
 			// Write the modified package.json back to the file
 			fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
 
diff --git a/npm-packages/react-api/CHANGELOG.md b/npm-packages/react-api/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @pulse-editor/react-api
 
+## 0.1.1-beta.59
+
+### Patch Changes
+
+- Fix object type issue in typed variable
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-beta.59
+
+## 0.1.1-beta.58
+
+### Patch Changes
+
+- Allow optional args for workflow handler
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-beta.58
+
 ## 0.1.1-beta.57
 
 ### Patch Changes
diff --git a/npm-packages/react-api/package.json b/npm-packages/react-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-beta.57",
+  "version": "0.1.1-beta.59",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -37,7 +37,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-beta.57",
+    "@pulse-editor/shared-utils": "0.1.1-beta.59",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
diff --git a/npm-packages/react-api/src/hooks/editor/use-register-action.ts b/npm-packages/react-api/src/hooks/editor/use-register-action.ts
@@ -123,9 +123,14 @@ export default function useRegisterAction(
           }
           // Validate parameters
           const actionParams = actionInfo.parameters ?? {};
-          if (Object.keys(args).length !== Object.keys(actionParams).length) {
+
+          const requiredParamCount = Object.entries(actionParams).filter(
+            ([, paramInfo]) => !(paramInfo as TypedVariable).optional,
+          ).length;
+
+          if (Object.keys(args).length < requiredParamCount) {
             throw new Error(
-              `Invalid number of parameters: expected ${
+              `Invalid number of parameters: expected at least${
                 Object.keys(actionParams).length
               }, got ${Object.keys(args).length}`,
             );
diff --git a/npm-packages/shared-utils/CHANGELOG.md b/npm-packages/shared-utils/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-beta.59
+
+### Patch Changes
+
+- Fix object type issue in typed variable
+
+## 0.1.1-beta.58
+
+### Patch Changes
+
+- Allow optional args for workflow handler
+
 ## 0.1.1-beta.57
 
 ### Patch Changes
diff --git a/npm-packages/shared-utils/package.json b/npm-packages/shared-utils/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-beta.57",
+    "version": "0.1.1-beta.59",
     "main": "dist/main.js",
     "files": [
         "dist"
diff --git a/npm-packages/shared-utils/src/types/types.ts b/npm-packages/shared-utils/src/types/types.ts
@@ -215,7 +215,7 @@ export type TypedVariableType =
   | "string"
   | "number"
   | "boolean"
-  | "any"
+  | "object"
   // An app instance is a reference to another app.
   // This instance could be possessed by the owner,
   // or it can be initialized by the caller.
diff --git a/web/components/interface/command-viewer.tsx b/web/components/interface/command-viewer.tsx
@@ -1,5 +1,5 @@
 import usePlatformAIAssistant from "@/lib/hooks/use-platform-ai-assistant";
-import useScopedActions from "@/lib/hooks/use-scoped-actions";
+import useActionExecutor from "@/lib/hooks/use-action-executor";
 import { ScopedAction } from "@/lib/types";
 import {
   addToast,
@@ -28,7 +28,7 @@ export default function CommandViewer() {
   const editorContext = useContext(EditorContext);
 
   const { chatWithAssistant, history } = usePlatformAIAssistant();
-  const { actions, runScopedAction, setKeywordFilter } = useScopedActions();
+  const { actions, runScopedAction, setKeywordFilter } = useActionExecutor();
 
   const [inputPlaceholder, setInputPlaceholder] = useState("");
   const [selectActionIndex, setSelectActionIndex] = useState(-1);
diff --git a/web/components/marketplace/app/app-preview-card.tsx b/web/components/marketplace/app/app-preview-card.tsx
@@ -14,6 +14,7 @@ import { ContextMenuState, ExtensionApp } from "@/lib/types";
 import { DraggableAttributes } from "@dnd-kit/core";
 import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import {
+  addToast,
   Button,
   Chip,
   Skeleton,
@@ -362,14 +363,18 @@ export default function AppPreviewCard({
               <Button
                 color="primary"
                 size="sm"
-                onPress={(e) => {
-                  installExtension(
+                onPress={async (e) => {
+                  await installExtension(
                     extension.remoteOrigin,
                     extension.config.id,
                     extension.config.version,
                   )
                     .then(() => {
-                      toast.success("Extension installed");
+                      addToast({
+                        title: "Extension installed",
+                        description: `Extension ${extension.config.id} installed successfully.`,
+                        color: "success",
+                      });
                       setIsInstalled(true);
                       setIsEnabled(extension.isEnabled);
                     })
@@ -387,7 +392,11 @@ export default function AppPreviewCard({
                   size="sm"
                   onPress={(e) => {
                     uninstallExtension(extension.config.id).then(() => {
-                      toast.success("Extension uninstalled");
+                      addToast({
+                        title: "Extension uninstalled",
+                        description: `Extension ${extension.config.id} uninstalled successfully.`,
+                        color: "success",
+                      });
                       setIsInstalled(false);
                     });
                   }}
@@ -407,7 +416,11 @@ export default function AppPreviewCard({
                   variant="light"
                   onPress={(e) => {
                     uninstallExtension(extension.config.id).then(() => {
-                      toast.success("Extension uninstalled");
+                      addToast({
+                        title: "Extension uninstalled",
+                        description: `Extension ${extension.config.id} uninstalled successfully.`,
+                        color: "success",
+                      });
                     });
                     setContextMenuState({ x: 0, y: 0, isOpen: false });
                   }}
@@ -425,7 +438,11 @@ export default function AppPreviewCard({
                       extension.config.version,
                     )
                       .then(() => {
-                        toast.success("Extension installed");
+                        addToast({
+                          title: "Extension installed",
+                          description: `Extension ${extension.config.id} installed successfully.`,
+                          color: "success",
+                        });
                         setIsInstalled(true);
                         setIsEnabled(extension.isEnabled);
                       })
diff --git a/web/components/views/canvas/nodes/app-node/app-node.tsx b/web/components/views/canvas/nodes/app-node/app-node.tsx
@@ -1,4 +1,4 @@
-import useScopedActions from "@/lib/hooks/use-scoped-actions";
+import useActionExecutor from "@/lib/hooks/use-action-executor";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
 import { AppNodeData } from "@/lib/types";
 import { Node } from "@xyflow/react";
@@ -19,7 +19,7 @@ const AppNode = memo((props: any) => {
   const viewId = config.viewId;
 
   const { createAppTabView, deleteAppViewInCanvasView } = useTabViewManager();
-  const { actions } = useScopedActions(config.app);
+  const { actions } = useActionExecutor(config.app);
 
   async function openViewInFullScreen() {
     await createAppTabView({
diff --git a/web/components/views/canvas/nodes/app-node/layout.tsx b/web/components/views/canvas/nodes/app-node/layout.tsx
@@ -404,6 +404,7 @@ function InputHandle({
           paramName={paramName}
           node={node}
           editorContext={editorContext}
+          isOptional={param.optional ?? false}
         />
       </div>
     );
@@ -414,6 +415,7 @@ function InputHandle({
         param={param}
         position={Position.Left}
         type="target"
+        isOptional={param.optional ?? false}
       />
     );
   }
@@ -423,10 +425,12 @@ function DroppableInputHandle({
   paramName,
   node,
   editorContext,
+  isOptional,
 }: {
   paramName: string;
   node: ReactFlowNode<AppNodeData>;
   editorContext: EditorContextType | undefined;
+  isOptional: boolean;
 }) {
   const { updateNodeData } = useReactFlow();
 
@@ -456,6 +460,7 @@ function DroppableInputHandle({
       <div className="py-2 text-center">
         <p>{paramName}</p>
         <p>(app-instance)</p>
+        {!isOptional && <p className="text-danger">*required</p>}
         {node.data.ownedAppViews[paramName] ? (
           <p>{node.data.ownedAppViews[paramName].viewId}</p>
         ) : (
diff --git a/web/components/views/canvas/nodes/app-node/node-handle.tsx b/web/components/views/canvas/nodes/app-node/node-handle.tsx
@@ -6,11 +6,13 @@ export default function NodeHandle({
   param,
   position,
   type,
+  isOptional,
 }: {
   id: string;
   param: TypedVariable;
   position: Position;
   type: HandleType;
+  isOptional?: boolean;
 }) {
   return (
     <div
@@ -21,6 +23,7 @@ export default function NodeHandle({
       <div className="text-center text-sm">
         <p>{id}</p>
         <p>({param?.type.toString()})</p>
+        {isOptional !== undefined && !isOptional && <p className="text-danger">*required</p>}
       </div>
       <Handle
         id={id}
diff --git a/web/components/views/canvas/nodes/backend-node/backend-node.tsx b/web/components/views/canvas/nodes/backend-node/backend-node.tsx
@@ -1,5 +1,5 @@
 import BaseAppView from "@/components/views/base/base-app-view";
-import useScopedActions from "@/lib/hooks/use-scoped-actions";
+import useActionExecutor from "@/lib/hooks/use-action-executor";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
 import { AppNodeData } from "@/lib/types";
 import { Node } from "@xyflow/react";
@@ -16,7 +16,7 @@ const BackendNode = memo((props: any) => {
   const viewId = config.viewId;
 
   const { createAppTabView, deleteAppViewInCanvasView } = useTabViewManager();
-  const { actions } = useScopedActions(config.app);
+  const { actions } = useActionExecutor(config.app);
 
   async function openViewInFullScreen() {
     await createAppTabView({
diff --git a/web/lib/agent/built-in-agents/editor-assistant.ts b/web/lib/agent/built-in-agents/editor-assistant.ts
@@ -99,7 +99,7 @@ Pulse Editor extensions and its features.`,
                   },
                   // CanvasViewConfig
                   workflow: {
-                    type: "any",
+                    type: "object",
                     description: `The workflow that the canvas is using. This contains nodes and edges information required for a xyflow/ReactFlow graph. \
 This field exists if the view type is 'Canvas'.`,
                     optional: true,
@@ -189,7 +189,7 @@ with Pulse Editor and extension commands.`,
                   "Whether the file system object is a folder or not.",
               },
               subDirItems: {
-                type: "any",
+                type: "object",
                 description:
                   "The sub-directory items of the file system object. ",
                 optional: true,
diff --git a/web/lib/hooks/use-action-executor.ts b/web/lib/hooks/use-action-executor.ts
@@ -18,7 +18,7 @@ import { useTabViewManager } from "./use-tab-view-manager";
  *  This hook provides actions from the active tab
  *  view and static actions from all installed apps.
  */
-export default function useScopedActions(appName?: string) {
+export default function useActionExecutor(appName?: string) {
   const imcContext = useContext(IMCContext);
   const editorContext = useContext(EditorContext);
 
diff --git a/web/lib/hooks/use-canvas-workflow.ts b/web/lib/hooks/use-canvas-workflow.ts
@@ -11,15 +11,15 @@ import {
 import { useCallback, useContext, useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { AppNodeData, WorkflowContent } from "../types";
-import useScopedActions from "./use-scoped-actions";
+import useActionExecutor from "./use-action-executor";
 
 export default function useCanvasWorkflow(
   initialWorkflowContent?: WorkflowContent,
 ) {
   const editorContext = useContext(EditorContext);
   const imcContext = useContext(IMCContext);
 
-  const { runScopedAction } = useScopedActions();
+  const { runScopedAction } = useActionExecutor();
 
   const [pendingNodes, setPendingNodes] = useState<
     ReactFlowNode<AppNodeData>[]
diff --git a/web/lib/hooks/use-extension-manager.ts b/web/lib/hooks/use-extension-manager.ts
diff --git a/web/lib/hooks/use-platform-ai-assistant.ts b/web/lib/hooks/use-platform-ai-assistant.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@pulse-editor/cli",`
`3`		`- "version": "0.1.1-beta.0",`
	`3`	`+ "version": "0.1.1-beta.1",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"bin": {`
`6`	`6`	`"pulse": "dist/cli.js"`