@superblocksteam/cli 2.0.3-next.160 → 2.0.3-next.161

package/README.md

@@ -14,7 +14,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/2.0.3-next.160 linux-x64 node-v20.19.0
+@superblocksteam/cli/2.0.3-next.161 linux-x64 node-v20.19.0
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND

package/dist/{generated-FORH4H64.js → generated-PNY22F3P.js}

@@ -32,7 +32,7 @@ var content2 = '### Rules for using Superblocks components:\n\n- ENSURE THAT ALL
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-custom-components.js
 init_cjs_shims();
-var content3 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to use custom components\n\n- If a user asks for something by name, like showing "metrics", and you do not find a "metrics" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little "badge" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than "32 (2m)" we use "32" in the main heading text and then a badge with the "2m" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n  Global,\n  Theme,\n  Embed,\n  Env,\n} from "@superblocksteam/library";\n\n<SbContainer\n  layout="horizontal"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant="none"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout="vertical"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant="card"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="space-between"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="Avg delivery time (min)"\n        textStyle={{\n          variant: "body2",\n          textColor: {\n            default: sbComputed(() => Theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon="route" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="left"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="32"\n        textStyle={{\n          variant: "heading1",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered "good" (lower delivery time is better) */}\n      <SbContainer\n        layout="horizontal"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant="none"\n        spacing={Dim.px(2)}\n        horizontalAlign="center"\n        verticalAlign="center"\n        backgroundColor="#c4e1af"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon="arrow_downward_alt"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text="2m"\n          width={Dim.fit()}\n          textStyle={{\n            variant: "body2",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n';
+var content3 = '# Custom Components\n\n- ULTRA CRITICAL: NEVER use Superblocks components in a custom component.\n\n- CRITICAL: Use custom components sparingly.\n\n- CRITICAL: ONLY when all else fails and a component is not available in the Superblocks library, you may construct it out of external component libraries by installing them.\n\n- CRITICAL: ALWAYS import React using a namespace import: `import * as React from \'react\'`.\n\nIn order to hook it up correctly, the platform needs to know what props the component exposes, their types, default values, and how they should be displayed to users.\n\nTo do this, you use the **`Prop` API** and **`registerComponent`** function.\n\n## Key Concepts\n\n- All custom components should live within the `components/` folder.\n- **`Prop`**: Defines a single editable property for your component.\n  - Can specify the data type (`string`, `number`, `boolean`, `event`, etc.).\n  - Can define a **default value**, **label** for the properties panel, and other validations.\n- **`registerComponent`**: Connects your React component with its editable schema (`properties`) so it appears correctly in the visual editor.\n- **`useUpdateProperties`**: A hook that lets your component programmatically update its properties during runtime (e.g., when a user interacts with it).\n\n---\n\n## Basic Example\n\n```tsx\nimport { Rate } from "antd";\nimport {\n  CustomComponentProps,\n  Prop,\n  registerComponent,\n  useUpdateProperties,\n} from "@superblocksteam/library";\n\n// 1. Define editable properties\nconst properties = {\n  value: Prop.number()\n    .default(3) // Default to 3 stars\n    .propertiesPanel({ label: "Default value" }), // Editor label\n  onChange: Prop.event().propertiesPanel({ label: "On change" }), // Editor label for event\n};\n\n// 2. Create typed props for your component\ntype ComponentProps = CustomComponentProps<typeof properties>;\n\n// 3. Build your React component\nconst Rating = ({ value, onChange }: ComponentProps) => {\n  const updateProperties = useUpdateProperties(); // Hook to update properties dynamically\n\n  return (\n    <div style={{ display: "flex" }}>\n      <Rate\n        value={value}\n        defaultValue={value}\n        onChange={(newValue) => {\n          updateProperties({ value: newValue }); // Update visual editor\n          onChange?.(); // Trigger custom event\n        }}\n      />\n    </div>\n  );\n};\n\n// 4. Register your component to make it available in the visual editor\nexport default registerComponent("Rating", properties, Rating);\n```\n\n---\n\n## How `Prop` Works\n\nYou can define different types of props:\n\n- **`string`**: `Prop.string()`\n- **`number`**: `Prop.number()`\n- **`boolean`**: `Prop.boolean()`\n- **`event`**: `Prop.event()` (for user interactions like clicks)\n- **`any`**: `Prop.any()` (for any type)\n- **`composite`**: `Prop.composite({ x: Prop.number(), y: Prop.number() })` (for nested objects)\n- **`record`**: `Prop.record({...})` (for key-value maps)\n- **`union`**: `Prop.union({...})` (for multiple variants)\n\nYou can chain additional methods:\n\n- `.default(value)` \u2014 Sets a default value.\n- `.propertiesPanel({ label: "Your Label" })` \u2014 Controls how the prop appears in the editor.\n- `.validate(fn)` \u2014 Adds custom validation logic.\n- `.readable()`, `.writable()` \u2014 Control read/write capabilities.\n\n---\n\n## Typical Flow\n\n1. **Define** the **editable schema** (`properties`) with `Prop`.\n2. **Type** your component\'s props using `CustomComponentProps`.\n3. **Use** `useUpdateProperties` to sync UI interactions back to the editor.\n4. **Register** the component using `registerComponent`.\n\n---# Tips\n\n- All `registeredComponent`s automatically support width and height using the `Dim` object.\n  ```\n  <CustomSlider\n    width={Dim.fill(2)} // Fill available space with a weight of 2\n    height={Dim.px(100)} // Fixed height of 100 pixels\n  />\n  ```\n\n## When not to use custom components\n\n- If a user asks for something by name, like showing "metrics", and you do not find a "metrics" component in the Superblocks library, do not immediately assume you need to use a custom component. Instead consider using one of the pre-designed templates built from existing Superblocks components.\n\n## Pre-designed templates to use instead of custom components\n\n### Rules for using pre-designed templates\n\n- Use the pre-designed templates as a base to work from. You can make changes to the content, but generally you do not need to change the layout or styling. Example: below there are width and height properties set on the icons and you should NOT change these or you will break the layout.\n\n### Metrics template\n\nThis template is a row of three large numerical metrics with icons and annotation text.\n\nTemplate code below and a few notes to help explain usage:\n\n- We use the SbContainer component to layout the metrics in a row\n- We use the SbText component to show the numerical values and how we use the textStyle prop variant to make the text a big heading\n- We use the SbIcon component to show nice icons that make sense for the metric\n- We create a little "badge" using the SbContainer component to show small annotation text. Prefer this over using brackets in the main heading text. Example: Rather than "32 (2m)" we use "32" in the main heading text and then a badge with the "2m" text\n- Keep the icon sizing you see in this template unless you are explicitly asked to change it\n\n```tsx\nimport {\n  SbIcon,\n  SbText,\n  SbContainer,\n  sbComputed,\n  Dim,\n  Global,\n  Theme,\n  Embed,\n  Env,\n} from "@superblocksteam/library";\n\n<SbContainer\n  layout="horizontal"\n  width={Dim.fill()}\n  height={Dim.fit()}\n  variant="none"\n  spacing={Dim.px(12)}\n>\n  {/* First card */}\n  <SbContainer\n    layout="vertical"\n    width={Dim.fill()}\n    height={Dim.fit()}\n    variant="card"\n    spacing={Dim.px(6)}\n  >\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="space-between"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="Avg delivery time (min)"\n        textStyle={{\n          variant: "body2",\n          textColor: {\n            default: sbComputed(() => Theme.colors.neutral500),\n          },\n        }}\n      />\n      <SbIcon icon="route" height={Dim.px(24)} width={Dim.fit()} />\n    </SbContainer>\n    <SbContainer\n      layout="horizontal"\n      width={Dim.fill()}\n      height={Dim.fit()}\n      variant="none"\n      horizontalAlign="left"\n      spacing={Dim.px(6)}\n    >\n      <SbText\n        text="32"\n        textStyle={{\n          variant: "heading1",\n        }}\n      />\n      {/* Smaller annotation badge, showing change. Container background color is green because the value change is considered "good" (lower delivery time is better) */}\n      <SbContainer\n        layout="horizontal"\n        width={Dim.fit()}\n        height={Dim.fit()}\n        variant="none"\n        spacing={Dim.px(2)}\n        horizontalAlign="center"\n        verticalAlign="center"\n        backgroundColor="#c4e1af"\n        padding={{\n          top: Dim.px(3),\n          right: Dim.px(6),\n          bottom: Dim.px(3),\n          left: Dim.px(6),\n        }}\n        borderRadius={{\n          topLeft: Dim.px(20),\n          topRight: Dim.px(20),\n          bottomRight: Dim.px(20),\n          bottomLeft: Dim.px(20),\n        }}\n      >\n        <SbIcon\n          icon="arrow_downward_alt"\n          height={Dim.px(24)}\n          width={Dim.fit()}\n        />\n        <SbText\n          text="2m"\n          width={Dim.fit()}\n          textStyle={{\n            variant: "body2",\n          }}\n        />\n      </SbContainer>\n    </SbContainer>\n  </SbContainer>\n</SbContainer>;\n```\n';
 
 // ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-event-flow.js
 init_cjs_shims();

package/dist/index.js

@@ -331437,7 +331437,7 @@ var import_dd_trace = __toESM(require_dd_trace2(), 1);
 // ../sdk/package.json
 var package_default = {
   name: "@superblocksteam/sdk",
-  version: "2.0.3-next.160",
+  version: "2.0.3-next.161",
   type: "module",
   description: "Superblocks JS SDK",
   homepage: "https://www.superblocks.com",
@@ -331467,8 +331467,8 @@ var package_default = {
     "@rollup/wasm-node": "^4.35.0",
     "@superblocksteam/bucketeer-sdk": "0.4.1",
     "@superblocksteam/shared": "0.9120.0",
-    "@superblocksteam/util": "2.0.3-next.160",
-    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.160",
+    "@superblocksteam/util": "2.0.3-next.161",
+    "@superblocksteam/vite-plugin-file-sync": "2.0.3-next.161",
     "@vitejs/plugin-react": "^4.3.4",
     axios: "^1.4.0",
     chokidar: "^4.0.3",
@@ -372301,6 +372301,12 @@ var SocketManager = class extends EventEmitter8 {
               await syncService?.commitLocalDraftChanges();
               await aiService?.handleUserAcceptedDraft(peer);
             }
+          ],
+          aiCancel: [
+            async () => {
+              await syncService?.discardLocalDraftChanges();
+              await aiService?.handleUserCanceled();
+            }
           ]
         }
       }), [], void 0, void 0));
@@ -376155,7 +376161,7 @@ async function startVite({ app, httpServer: httpServer2, root: root2, mode, port
   };
   const isCustomBuildEnabled2 = await isCustomComponentsEnabled();
   const customFolder = path21.join(root2, "custom");
-  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.160";
+  const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.3-next.161";
   const env3 = loadEnv(mode, root2, "");
   const hmrPort = await getFreePort();
   const hmrOptions = {
@@ -382348,7 +382354,7 @@ var AppShell = class {
       })));
     });
   }
-  async runTypecheck() {
+  async runTypecheck(abortSignal) {
     const checkForErrors = new Promise((resolve8) => {
       exec([
         "npx tsc",
@@ -382361,7 +382367,8 @@ var AppShell = class {
         "--tsBuildInfoFile .superblocks/app.tsbuildinfo"
       ].join(" "), {
         cwd: this.appRootDirPath,
-        encoding: "utf-8"
+        encoding: "utf-8",
+        signal: abortSignal
       }, (_error, stdout, stderr) => {
         resolve8(stdout || stderr);
       });
@@ -382380,7 +382387,7 @@ var AppShell = class {
     }, {});
     return Object.keys(parsed).length > 0 ? parsed : null;
   }
-  async runNpmInstall() {
+  async runNpmInstall(abortSignal) {
     return await new Promise((resolve8, reject) => {
       const command = (
         // if we're running in csb mock server, we need to avoid conflicts with the workspace
@@ -382388,7 +382395,8 @@ var AppShell = class {
       );
       exec(command, {
         cwd: this.appRootDirPath,
-        timeout: 3e4
+        timeout: 3e4,
+        signal: abortSignal
       }, (error, _stdout, stderr) => {
         if (error) {
           return reject(new NpmInstallError(stderr));
@@ -382564,6 +382572,7 @@ var ClarkStateNames = $;
 var USER_SENT_PROMPT = "userSentPrompt";
 var USER_ACCEPTED_DRAFT = "userAcceptedDraft";
 var USER_REJECTED_DRAFT = "userRejectedDraft";
+var USER_CANCELED = "userCanceled";
 var AGENT_PLANNED = "agentPlanned";
 var AGENT_NEEDS_USER_INPUT = "agentNeedsUserInput";
 var AGENT_GAVE_UP = "agentGaveUp";
@@ -382586,29 +382595,34 @@ var transitions = {
   [$.AgentPlanning]: {
     [AGENT_PLANNED]: $.LLMGenerating,
     [AGENT_NEEDS_USER_INPUT]: $.AwaitingUser,
-    [AGENT_GAVE_UP]: $.Dead
+    [AGENT_GAVE_UP]: $.Dead,
+    [USER_CANCELED]: $.Idle
   },
   [$.LLMGenerating]: {
     [LLM_FINISHED]: $.PostProcessing,
     [LLM_ERRORED]: $.AgentPlanning,
     [LLM_FINISHED_UNEXPECTEDLY]: $.AgentPlanning,
     [LLM_REQUESTED_CONTEXT]: $.AgentPlanning,
-    [APP_RUNTIME_UPDATED_WITHOUT_EDITS]: $.Idle
+    [APP_RUNTIME_UPDATED_WITHOUT_EDITS]: $.Idle,
+    [USER_CANCELED]: $.Idle
   },
   [$.PostProcessing]: {
     [POST_PROCESSING_FINISHED]: $.RuntimeReviewing,
-    [POST_PROCESSING_ERRORED]: $.AgentPlanning
+    [POST_PROCESSING_ERRORED]: $.AgentPlanning,
+    [USER_CANCELED]: $.Idle
   },
   [$.RuntimeReviewing]: {
     [RUNTIME_REVIEW_ERRORED]: $.AgentPlanning,
     [BUILD_SYSTEM_ERRORED]: $.AgentPlanning,
     [RUNTIME_REVIEW_FINISHED]: $.AwaitingUser,
-    [APP_RUNTIME_UPDATED_WITHOUT_EDITS]: $.Idle
+    [APP_RUNTIME_UPDATED_WITHOUT_EDITS]: $.Idle,
+    [USER_CANCELED]: $.Idle
   },
   [$.AwaitingUser]: {
     [USER_ACCEPTED_DRAFT]: $.Idle,
     [USER_REJECTED_DRAFT]: $.RuntimeReviewing,
-    [USER_SENT_PROMPT]: $.AgentPlanning
+    [USER_SENT_PROMPT]: $.AgentPlanning,
+    [USER_CANCELED]: $.Idle
   },
   [$.Dead]: {}
 };
@@ -382870,7 +382884,7 @@ init_cjs_shims();
 init_cjs_shims();
 var generated = {};
 try {
-  generated = await import("./generated-FORH4H64.js");
+  generated = await import("./generated-PNY22F3P.js");
 } catch (_error) {
   getLogger().warn("[ai-service] Generated markdown modules not found. Run `pnpm generate:markdown` first.");
 }
@@ -383327,6 +383341,9 @@ var sendUserCompletionChannel = (clark) => async (payload) => {
 init_cjs_shims();
 var transitionFrom = (clark) => {
   return (event) => {
+    if (clark.context.abortController?.signal.aborted && event.type !== USER_CANCELED) {
+      return clark.send({ type: USER_CANCELED });
+    }
     return clark.send(event);
   };
 };
@@ -383376,9 +383393,11 @@ Address the errors and return the fixed code.`;
     switch (event.type) {
       case USER_SENT_PROMPT: {
         const { request, peer } = event;
-        clark.updateContext({
+        clark.updateContext((context3) => ({
+          ...context3,
+          abortController: context3.abortController ?? new AbortController(),
           peer
-        });
+        }));
         if (clark.context.hasSuggestions) {
           const meta2 = getMeta();
           const previousPrompts = meta2?.promptsForCurrentDraft ?? [];
@@ -383599,12 +383618,18 @@ var doAwaitingUser = (clark, { signals }) => {
 // ../../../vite-plugin-file-sync/dist/ai-service/state-machine/handlers/idle.js
 init_cjs_shims();
 var doIdle = (clark) => {
+  const sendUserMessage = sendUserMessageChannel(clark);
   return async ({ event }) => {
     switch (event.type) {
       case USER_ACCEPTED_DRAFT:
         break;
       case APP_RUNTIME_UPDATED_WITHOUT_EDITS:
         break;
+      case USER_CANCELED:
+        void sendUserMessage({
+          text: "Canceled."
+        });
+        break;
       default:
         throw new Error(`Unhandled event: ${event}`);
     }
@@ -389755,12 +389780,14 @@ var doLLMGenerating = (clark, { anthropicProvider, artifactProcessor }) => {
     switch (event.type) {
       case AGENT_PLANNED: {
         const { systemPrompt, userPrompt, debugging } = event;
+        const { abortController } = clark.context;
         const { fullStream } = streamText({
           model: anthropicProvider("claude-4-sonnet-20250514"),
           system: systemPrompt,
           prompt: userPrompt,
           experimental_transform: smoothStream(),
-          maxTokens: 32e3
+          maxTokens: 32e3,
+          abortSignal: abortController?.signal
         });
         let pendingArtifacts = false;
         let artifactChunk = null;
@@ -390112,7 +390139,7 @@ var doPostProcessing = (clark, { applicationId, organizationId, draftInterface,
               text: "Installing dependencies\u2026"
             });
             await createDraftFiles([packageJson]);
-            await appShell.runNpmInstall();
+            await appShell.runNpmInstall(clark.context.abortController?.signal);
           }
           await createDraftFiles(scopes);
           await createDraftFiles(apiYamls);
@@ -390154,7 +390181,7 @@ var doRuntimeReviewing = (clark, params) => {
             ...context3,
             hasSuggestions: context3.hasSuggestions || files.length > 0
           }));
-          const tsErrorsByPath = await params.appShell.runTypecheck();
+          const tsErrorsByPath = await params.appShell.runTypecheck(clark.context.abortController?.signal);
           if (tsErrorsByPath) {
             transitionTo({
               type: RUNTIME_REVIEW_ERRORED,
@@ -390198,7 +390225,7 @@ var AiService = class extends EventEmitter10 {
     this.clark = new FSM({
       transitions,
       initialState: ClarkStateNames.Idle,
-      initialContext: {},
+      initialContext: { abortController: new AbortController() },
       createTransitionHandler: this.createClarkTransitionHandler()
     });
     this.config.draftInterface.hasLocalDraftChanges().then((hasDraft) => {
@@ -390281,6 +390308,12 @@ var AiService = class extends EventEmitter10 {
     const transitionTo = transitionFrom(this.clark);
     transitionTo({ type: USER_REJECTED_DRAFT });
   }
+  async handleUserCanceled() {
+    if (!this.isBusy()) {
+      return;
+    }
+    this.clark.context.abortController?.abort();
+  }
   handleBuildSystemError(error) {
     if (this.clark.state !== ClarkStateNames.RuntimeReviewing) {
       getLogger().warn("[ai-service] Build system error occurred but AI service is not in runtime reviewing state", getErrorMeta(error));

package/oclif.manifest.json

@@ -509,5 +509,5 @@
       "strict": true
     }
   },
-  "version": "2.0.3-next.160"
+  "version": "2.0.3-next.161"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "2.0.3-next.160",
+  "version": "2.0.3-next.161",
   "type": "module",
   "description": "Official Superblocks CLI",
   "homepage": "https://www.superblocks.com",
@@ -42,9 +42,9 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@oclif/test": "^4.1.11",
-    "@superblocksteam/sdk": "2.0.3-next.160",
+    "@superblocksteam/sdk": "2.0.3-next.161",
     "@superblocksteam/shared": "0.9120.0",
-    "@superblocksteam/util": "2.0.3-next.160",
+    "@superblocksteam/util": "2.0.3-next.161",
     "@types/babel__core": "^7.20.0",
     "@types/chai": "^4",
     "@types/fs-extra": "^11.0.1",