Intent-based preview (#1113)

* Hackhackhack

* Find existing charms during preview generation

* Thread preview through the stack

* More examples

* Remove duplicate method declaration

* Remove searchCharms command

* Tweak searchCharms formatting

* Omit empty plan

* Improve schema prompting + actually pass it through to code gen

* Fix type error

* Update LLM cache and tests

There is still a bug with extending / referencing recipes and the generated schema.

* Tweak prompt

* Resolve type errors after rebase

* Update cache

Author: bfollington

charm/src/index.ts

@@ -6,6 +6,7 @@ export {
   charmSchema,
   processSchema,
 } from "./manager.ts";
+export { searchCharms } from "./search.ts";
 export {
   castNewRecipe,
   compileAndRunRecipe,

charm/src/iterate.ts

@@ -105,17 +105,17 @@ export async function iterate(
   const { iframe } = getIframeRecipe(charm);
 
   const prevSpec = iframe?.spec;
-  if (!plan?.spec) {
+  if (!plan?.description) {
     throw new Error("No specification provided");
   }
-  const newSpec = plan.spec;
+  const newSpec = plan.description;
 
   const { content: newIFrameSrc, llmRequestId } = await genSrc({
     src: iframe?.src,
     spec: prevSpec,
     newSpec,
     schema: iframe?.argumentSchema || { type: "object" },
-    steps: plan?.steps,
+    steps: plan?.features,
   }, optionsWithDefaults);
 
   return {
@@ -327,7 +327,7 @@ async function singlePhaseCodeGeneration(
     });
   }
 
-  if (!form.plan?.spec || !form.plan?.steps) {
+  if (!form.plan?.description || !form.plan?.features) {
     throw new Error("Plan is missing spec or steps");
   }
 
@@ -336,18 +336,20 @@ async function singlePhaseCodeGeneration(
   const name = extractTitle(sourceCode, title); // Use the generated title as fallback
   const newRecipeSrc = buildFullRecipe({
     src: fullCode,
-    spec: form.plan.spec,
-    plan: Array.isArray(form.plan.steps)
-      ? form.plan.steps.map((step, index) => `${index + 1}. ${step}`).join("\n")
-      : form.plan.steps,
+    spec: form.plan.description,
+    plan: Array.isArray(form.plan.features)
+      ? form.plan.features.map((step, index) => `${index + 1}. ${step}`).join(
+        "\n",
+      )
+      : form.plan.features,
     goal: form.input.processedInput,
     argumentSchema: schema,
     resultSchema,
     name,
   });
 
   return {
-    newSpec: form.plan.spec,
+    newSpec: form.plan.description,
     newIFrameSrc: fullCode,
     newRecipeSrc,
     name,
@@ -421,7 +423,7 @@ async function twoPhaseCodeGeneration(
   const { content: newIFrameSrc, llmRequestId } = await genSrc({
     newSpec,
     schema,
-    steps: form.plan?.steps,
+    steps: form.plan?.features,
   }, {
     model: form.meta.model,
     generationId: form.meta.generationId,

charm/src/search.ts

@@ -0,0 +1,120 @@
+import {
+  Charm,
+  charmId,
+  CharmManager,
+  DEFAULT_MODEL,
+} from "@commontools/charm";
+import { NAME, Recipe, recipe } from "@commontools/builder";
+import { LLMClient } from "@commontools/llm";
+import { Cell, recipeManager } from "@commontools/runner";
+
+export type CharmSearchResult = {
+  charm: Cell<Charm>;
+  name: string;
+  reason: string;
+};
+
+export async function searchCharms(
+  input: string,
+  charmManager: CharmManager,
+): Promise<{
+  charms: CharmSearchResult[];
+  thinking: string;
+}> {
+  try {
+    const charms = charmManager.getCharms();
+    await charmManager.sync(charms);
+    const results = await Promise.all(
+      charms.get().map(async (charm) => {
+        const data = charm.get();
+        const title = data?.[NAME] ?? "Untitled";
+
+        const recipeId = await charmManager.syncRecipe(charm);
+        const recipe = recipeManager.recipeById(recipeId!)!;
+
+        return {
+          title: title + ` (#${charmId(charm.entityId!)!.slice(-4)})`,
+          description: (recipe as Recipe).argumentSchema.description,
+          id: charmId(charm.entityId!)!,
+          value: charm.entityId!,
+        };
+      }),
+    );
+
+    // Early return if no charms are found
+    if (!results.length) {
+      return {
+        thinking: "No charms are available to search through.",
+        charms: [],
+      };
+    }
+
+    const response = await new LLMClient().sendRequest({
+      system:
+        `Pick up to the 3 most appropriate (if any) charms from the list that match the user's request:
+      <charms>
+        ${
+          results.map((result) =>
+            `<charm id="${result.id}">
+          <title>${result.title}</title>
+          <description>${result.description}</description>
+        </charm>`
+          ).join("\n          ")
+        }
+      </charms>
+
+      When responding, you may include a terse paragraph of your reasoning within a <thinking> tag, then return a list of charms using <charm id="" name="...">Reason it's appropriate</charm> in the text.`,
+      messages: [{ role: "user", content: input }],
+      model: DEFAULT_MODEL,
+      cache: false,
+      metadata: {
+        context: "workflow",
+        workflow: "search-charms",
+        generationId: crypto.randomUUID(),
+      },
+    });
+
+    // Parse the thinking tag content
+    const thinkingMatch = response.content?.match(
+      /<thinking>([\s\S]*?)<\/thinking>/,
+    );
+    const thinking = thinkingMatch ? thinkingMatch[1].trim() : "";
+
+    // Parse all charm tags
+    const charmMatches = response.content?.matchAll(
+      /<charm id="([^"]+)" name="([^"]+)">([\s\S]*?)<\/charm>/g,
+    );
+
+    const selectedCharms = [];
+    if (charmMatches) {
+      for (const match of charmMatches) {
+        const charmId = match[1];
+        const charmName = match[2];
+        const reason = match[3].trim();
+
+        // Find the original charm data from results
+        const originalCharm = await charmManager.get(charmId);
+
+        if (originalCharm) {
+          selectedCharms.push({
+            charm: originalCharm,
+            name: charmName,
+            reason,
+          });
+        }
+      }
+    }
+
+    return {
+      thinking,
+      charms: selectedCharms,
+    };
+  } catch (error) {
+    console.error("Search charms error:", error);
+
+    return {
+      thinking: "An error occurred while searching for charms.",
+      charms: [],
+    };
+  }
+}

charm/src/workflow.ts

@@ -21,6 +21,7 @@ import { formatPromptWithMentions } from "./format.ts";
 import { castNewRecipe } from "./iterate.ts";
 import { VNode } from "@commontools/html";
 import { applyDefaults, GenerationOptions } from "@commontools/llm";
+import { CharmSearchResult, searchCharms } from "./search.ts";
 
 export interface RecipeRecord {
   argumentSchema: JSONSchema; // Schema type from jsonschema
@@ -262,10 +263,26 @@ export async function generatePlan(
     { existingSpec, existingSchema, existingCode },
   );
 
+  globalThis.dispatchEvent(
+    new CustomEvent("job-update", {
+      detail: {
+        type: "job-update",
+        jobId: form.meta.generationId,
+        title: form.input.processedInput,
+        status: `Search for relevant data ${form.meta.model}...`,
+      },
+    }),
+  );
+
+  const { charms } = await searchCharms(
+    form.input.processedInput,
+    form.meta.charmManager,
+  );
+
   return {
-    steps: result.steps,
-    spec: result.spec,
-    dataModel: result.dataModel,
+    description: result.autocompletion,
+    features: result.features,
+    charms,
   };
 }
 
@@ -291,9 +308,9 @@ export interface WorkflowForm {
 
   // Planning information
   plan: {
-    steps?: string[];
-    spec?: string;
-    dataModel?: string;
+    features?: string[];
+    description?: string;
+    charms?: CharmSearchResult[];
   } | null;
 
   generation: {
@@ -467,34 +484,7 @@ export async function fillPlanningSection(
 
   const newForm = { ...form };
 
-  // Skip for empty inputs
-  if (!form.input.rawInput || form.input.rawInput.trim().length === 0) {
-    newForm.plan = {
-      steps: [],
-    };
-    return newForm;
-  }
-
-  let planningResult: WorkflowForm["plan"];
-  // Generate new plan based on workflow type
-  if (
-    form.classification.workflowType === "fix" && form.input.existingCharm
-  ) {
-    if (form.input.existingCharm) {
-      const { spec, schema, code } = extractContext(form.input.existingCharm);
-
-      if (!form.plan) {
-        form.plan = { spec };
-      } else {
-        form.plan.spec = spec;
-      }
-    }
-
-    planningResult = await generatePlan(form);
-  } else {
-    // For edit/imagine, generate everything
-    planningResult = await generatePlan(form);
-  }
+  const planningResult = await generatePlan(form);
 
   newForm.plan = planningResult;
   return newForm;
@@ -627,21 +617,12 @@ export async function processWorkflow(
     // Check for cancellation before starting work
     checkCancellation();
 
+    // Apply any prefilled values if provided
     if (options.prefill) {
       console.log("prefilling form", options.prefill);
-      // Only use prefill values for fields that aren't null or undefined in the prefill
-      // Intentionally omit the meta
-      form = {
-        ...form,
-        input: options.prefill?.input
-          ? { ...form.input, ...options.prefill.input }
-          : form.input,
-        classification: options.prefill?.classification || form.classification,
-        plan: options.prefill?.plan || form.plan,
-        generation: options.prefill?.generation || form.generation,
-        searchResults: options.prefill?.searchResults || form.searchResults,
-        spellToCast: options.prefill?.spellToCast || form.spellToCast,
-      };
+      form = { ...form, ...options.prefill };
+      // Preserve the original meta section
+      form.meta = { ...form.meta };
     }
 
     // Step 1: Process input (mentions, references, etc.) if not already processed
@@ -827,7 +808,7 @@ export async function processWorkflow(
     }
 
     // Step 3: Planning if not already planned
-    if (!form.plan || !form.plan.spec || !form.plan.steps) {
+    if (!form.plan) {
       console.log("planning task");
       globalThis.dispatchEvent(
         new CustomEvent("job-update", {

jumble/integration/basic-flow.test.ts

@@ -219,7 +219,7 @@ Deno.test({
           await page.keyboard.press("Enter");
 
           await sleep(500);
-          await page.keyboard.type("count the values in @v");
+          await page.keyboard.type("show the data from @v");
           await sleep(500);
           await page.keyboard.press("Tab");
           await sleep(500);
@@ -238,7 +238,7 @@ Deno.test({
           await waitForSelectorWithText(
             page,
             "a[aria-roledescription='charm-link']",
-            "Value Counter Utility",
+            "SimpleValue2 Viewer",
           );
 
           // FIXME(ja): how to look at the actual iframe content?