Resurrect compileAndRun example and integrate omnibot (commontoolsinc#2025)

* fix(compiler): Wait for charm initialization before navigating

The issue was that navigateTo was being called immediately with the result
from compileAndRun, but the result Cell is initially undefined and only gets
populated asynchronously after compilation completes.

Solution follows the same pattern used in chatbot-list-view.tsx:
- Use a lift to monitor the result Cell reactively
- Only navigate once the result is populated (not undefined)
- Use an isNavigated flag to ensure navigation only happens once

Changes:
- Add navigateWhenReady lift that waits for result to be ready
- Update visit handler to use the lift instead of calling navigateTo directly
- Show actual error messages in the UI instead of generic "fix the errors"

This fixes the "blackhole" issue where navigateTo appeared to do nothing.

* fix(compiler): Reuse compileAndRun result instead of creating new action

The previous approach called compileAndRun inside the handler, which:
- Created a NEW compileAndRun action on every handler invocation
- Caused double invocation due to re-renders from pending state changes
- Hit the run index check at compile-and-run.ts:191 and bailed early

Solution:
- Call compileAndRun once in the recipe body (already done for error display)
- Reuse the stable result cell from that single compileAndRun call
- Handler just calls navigateTo(result) on the existing cell
- navigateTo is an Action, so it re-runs when result populates

This is much simpler and avoids the double invocation issue entirely.
No need for the navigateWhenReady lift workaround!

* Copy across cancellation pattern from `llm.ts`

* Move `compiler.tsx` to patterns package

* fix(compiler): Clear pending state after cancellation

Remove abort signal check from finally block to ensure pending state is always reset to false when compilation completes, whether successfully, with error, or cancelled. This prevents the compile action from getting stuck in pending=true state after cancellation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Claude <[email protected]>

Author: bfollington

recipes/compiler.tsx renamed to packages/patterns/compiler.tsx

@@ -28,25 +28,28 @@ const updateCode = handler<
 );
 
 const visit = handler<
-  { detail: { value: string } },
-  { code: string }
+  unknown,
+  { result: Cell<any> }
 >(
-  (_, state) => {
-    const { result } = compileAndRun({
-      files: [{ name: "/main.tsx", contents: state.code }],
-      main: "/main.tsx",
-    });
-
-    console.log("result", result);
-
+  (_, { result }) => {
+    console.log("visit: navigating to compiled result", result);
     return navigateTo(result);
   },
 );
 
+const handleEditContent = handler<
+  { code: string },
+  { code: Cell<string> }
+>(
+  (event, { code }) => {
+    code.set(event.code);
+  },
+);
+
 export default recipe<Input>(
   "Compiler",
   ({ code }) => {
-    const { error, errors } = compileAndRun({
+    const { result, error, errors } = compileAndRun({
       files: [{ name: "/main.tsx", contents: code }],
       main: "/main.tsx",
     });
@@ -63,16 +66,18 @@ export default recipe<Input>(
           />
           {ifElse(
             error,
-            <b>fix the errors</b>,
+            <b>fix the error: {error}</b>,
             <ct-button
-              onClick={visit({ code })}
+              onClick={visit({ result })}
             >
               Navigate To Charm
             </ct-button>,
           )}
         </div>
       ),
       code,
+      updateCode: handleEditContent({ code }),
+      visit: visit({ result }),
     };
   },
 );

packages/runner/src/builtins/compile-and-run.ts

@@ -28,12 +28,13 @@ import { CompilerError } from "@commontools/js-runtime/typescript";
 export function compileAndRun(
   inputsCell: Cell<BuiltInCompileAndRunParams<any>>,
   sendResult: (tx: IExtendedStorageTransaction, result: any) => void,
-  _addCancel: (cancel: () => void) => void,
+  addCancel: (cancel: () => void) => void,
   cause: any,
   parentCell: Cell<any>,
   runtime: IRuntime,
 ): Action {
-  let currentRun = 0;
+  let requestId: string | undefined = undefined;
+  let abortController: AbortController | undefined = undefined;
   let previousCallHash: string | undefined = undefined;
   let cellsInitialized = false;
   let pending: Cell<boolean>;
@@ -52,6 +53,12 @@ export function compileAndRun(
     | undefined
   >;
 
+  // This is called when the recipe containing this node is being stopped.
+  addCancel(() => {
+    // Abort any in-flight compilation if it's still pending.
+    abortController?.abort("Recipe stopped");
+  });
+
   return (tx: IExtendedStorageTransaction) => {
     if (!cellsInitialized) {
       pending = runtime.getCell<boolean>(
@@ -97,7 +104,7 @@ export function compileAndRun(
       sendResult(tx, { pending, result, error, errors });
       cellsInitialized = true;
     }
-    const thisRun = ++currentRun;
+
     const pendingWithLog = pending.withTx(tx);
     const resultWithLog = result.withTx(tx);
     const errorWithLog = error.withTx(tx);
@@ -135,6 +142,11 @@ export function compileAndRun(
     if (hash === previousCallHash) return;
     previousCallHash = hash;
 
+    // Abort any in-flight compilation before starting a new one
+    abortController?.abort("New compilation started");
+    abortController = new AbortController();
+    requestId = crypto.randomUUID();
+
     runtime.runner.stop(result);
     resultWithLog.set(undefined);
     errorWithLog.set(undefined);
@@ -156,10 +168,15 @@ export function compileAndRun(
     // Now we're sure that we have a new file to compile
     pendingWithLog.set(true);
 
+    // Capture requestId for this compilation run
+    const thisRequestId = requestId;
+
     const compilePromise = runtime.harness.run(program)
       .catch(
         (err) => {
-          if (thisRun !== currentRun) return;
+          // Only process this error if the request hasn't been superseded
+          if (requestId !== thisRequestId) return;
+          if (abortController?.signal.aborted) return;
 
           runtime.editWithRetry((asyncTx) => {
             // Extract structured errors if this is a CompilerError
@@ -180,15 +197,20 @@ export function compileAndRun(
           });
         },
       ).finally(() => {
-        if (thisRun !== currentRun) return;
+        // Only update pending if this is still the current request
+        if (requestId !== thisRequestId) return;
+        // Always clear pending state, even if cancelled, to avoid stuck state
 
         runtime.editWithRetry((asyncTx) => {
           pending.withTx(asyncTx).set(false);
         });
       });
 
     compilePromise.then((recipe) => {
-      if (thisRun !== currentRun) return;
+      // Only run the result if this is still the current request
+      if (requestId !== thisRequestId) return;
+      if (abortController?.signal.aborted) return;
+
       if (recipe) {
         // TODO(ja): to support editting of existing charms / running with
         // inputs from other charms, we will need to think more about