diff --git a/charm/src/IMAGINE-DESIGN.md b/charm/src/IMAGINE-DESIGN.md new file mode 100644 index 000000000..db8f05092 --- /dev/null +++ b/charm/src/IMAGINE-DESIGN.md @@ -0,0 +1,299 @@ +# Charm Workflow System: A Comprehensive Guide + +## Overview + +The Charm Workflow System provides an LLM-powered approach to charm generation and modification. It analyzes user intent, classifies operations into specific workflows, and generates appropriate code through a structured pipeline. The system is designed to be predictable, maintainable, and extensible. + +## Code Execution Flow + +```mermaid +flowchart TD + %% Entry Point + start([UI: user input]) --> A["imagine/modifyCharm"] + A --> B["executeWorkflow"] + + %% Main processing function + B --> C["processWorkflow"] + + %% 1. FORMAT stage + C --> F1["1. FORMAT: processInputSection"] + F1 --> FM["formatPromptWithMentions"] + FM --> DP1[/"Form Packet 1: + - rawInput + - processedInput + - references"/] + + %% 2. CLASSIFY stage + DP1 --> CL1["2. CLASSIFY: fillClassificationSection"] + CL1 --> CL2["classifyIntent"] + CL2 --> CL3["classifyWorkflow LLM"] + CL3 --> DP2[/"Form Packet 2: + - workflowType + - confidence + - reasoning"/] + + %% 3. PLAN stage + DP2 --> P1["3. PLAN: fillPlanningSection"] + P1 --> P2["generatePlan"] + P2 --> P3["generateWorkflowPlan LLM"] + P3 --> DP3[/"Form Packet 3: + - steps + - spec + - schema + - meta.isFilled = true"/] + + %% 4. GENERATE CODE stage - branching point + DP3 --> G1["4. GENERATE: generateCode"] + + %% Workflow type decision + G1 --> decision{Which workflow?} + decision -->|"fix"| FIX["executeFixWorkflow"] + decision -->|"edit"| EDIT["executeEditWorkflow"] + decision -->|"rework"| REWORK["executeReworkWorkflow"] + + %% Fix & Edit Path (via iterate) + FIX & EDIT --> IT1["iterate"] + IT1 --> IT2["getIframeRecipe"] + IT2 --> IT3["genSrc"] + IT3 --> IT4["generateNewRecipeVersion"] + IT4 --> DP4A[/"Data Packet 4A: + - recipeId + - newRecipeSrc + - newSpec"/] + + %% Rework Path + REWORK --> RW1["castNewRecipe"] + RW1 --> RW2["scrub/turnCellsIntoAliases"] + RW2 --> RW3["generateSpecAndSchema"] + RW3 --> RW4["genSrc"] + RW4 --> RW5["buildFullRecipe"] + RW5 --> DP4B[/"Data Packet 4B: + - newRecipeSrc + - newSpec + - scrubbed data"/] + + %% 5. COMPILE Stage - paths converge + DP4A & DP4B --> CO1["5. COMPILE: compileAndRunRecipe"] + CO1 --> CO2["compileRecipe"] + CO2 --> CO3["tsToExports"] + CO3 --> CO4["registerNewRecipe"] + + %% Result + CO4 --> Result[/"Final Form: + - generation.charm + - meta.isComplete = true"/] + Result --> final([Charm Cell]) +``` + +### Pipeline Description + +The workflow system flows through distinct stages with clear data assembly at each step: + +1. **FORMAT** - Processing input and references + - `processInputSection` handles raw user input + - `formatPromptWithMentions` resolves @mentions to charm references + - **Output Packet**: Form with processed input and references + +2. **CLASSIFY** - Determining the workflow type + - `fillClassificationSection` orchestrates classification + - `classifyIntent` analyzes input to choose workflow type + - Forces "rework" workflow when other charms are referenced + - **Output Packet**: Form with workflow type, confidence score, and reasoning + +3. **PLAN** - Generating execution plan + - `fillPlanningSection` develops the execution plan + - `generatePlan` creates steps, spec updates, and schema updates + - Preserves existing spec for "fix" workflow + - **Output Packet**: Form with execution plan, spec, and schema + +4. **GENERATE CODE** - Branching to workflow-specific implementation + - Routes form to appropriate workflow function: + + **4A. ITERATE** (Fix & Edit workflows) + - Both use `iterate()` but with different parameters + - Fix: Preserves spec, only updates code + - Edit: Updates both spec and code + - `generateNewRecipeVersion` creates new recipe with updates + - **Output Packet**: Recipe id, source, spec + + **4B. REWORK** (Rework workflow) + - Uses `castNewRecipe()` to create entirely new charm + - Processes charm references with `turnCellsIntoAliases` + - Generates new spec and schema + - **Output Packet**: Recipe source, spec, processed data references + +5. **COMPILE** - Final recipe compilation and charm creation + - `compileAndRunRecipe` takes recipe source and compiles it + - `compileRecipe` handles TypeScript compilation + - Updates form with the generated charm + - **Output Packet**: Completed form with charm cell, ready to return + +The form object is progressively enriched at each stage, with each stage building on the data packet from the previous stage. The system only branches after the planning stage when the workflow type must be handled differently. + +## Entry Points + +The workflow system can be initiated from several places in the UI: + +1. **Command Center** (`CommandCenter.tsx`) + - Global command palette (⌘K) + - Processes user input and @mentions + - Shows live preview with `useLiveSpecPreview` hook + - Uses `handleImagineOperation()` in `commands.ts` to dispatch workflow + - Entry point for both new charms and modifications to existing charms + - Supports "Fast" vs "Smart" model selection for preview generation + +2. **CharmDetailView** (`CharmDetailView.tsx`) + - Operation tab in the bottom sheet when viewing a charm + - Uses `useCharmOperation()` hook to manage operations + - Handles iterate, extend, and variant generation workflows + - Performs operations via `performOperation()` function + +3. **Direct Functions** + - External applications can call the core functions directly: + - `executeWorkflow()`: Main entry point for all workflow processing + - `imagine()`: Alias for `executeWorkflow()`, used in most places + - `modifyCharm()`: Higher-level function for modifying existing charms + +## Core Workflow Types + +The system supports three primary workflows: + +1. **Fix** + - **Purpose**: Correct issues without changing functionality + - **Updates**: Code only + - **Schema**: Preserved + - **Spec**: Preserved + - **Example**: "Fix the alignment of the buttons" + - **Implementation**: Uses `iterate()` with preserved spec + +2. **Edit** + - **Purpose**: Add features while preserving core data structure + - **Updates**: Code and specification + - **Schema**: Core structure preserved + - **Example**: "Add dark mode support" + - **Implementation**: Uses `iterate()` with spec updates + +3. **Rework** + - **Purpose**: Create something new, potentially combining data sources + - **Updates**: Code, specification, and schema + - **Schema**: Can be completely different + - **Example**: "Create a dashboard combining my tasks and calendar" + - **Implementation**: Uses `castNewRecipe()` + - **References**: Can reference multiple charms + +## Workflow Form Progression + +The system builds up a `WorkflowForm` object throughout the process: + +1. **Creation**: `createWorkflowForm(rawInput)` initializes the basic structure + ```typescript + { + input: { rawInput, processedInput: rawInput, references: {} }, + classification: { workflowType: "edit", confidence: 0, reasoning: "" }, + plan: { steps: [] }, + meta: { isComplete: false, isFilled: false } + } + ``` + +2. **Input Processing**: `processInputSection(form, options)` + - Processes @mentions in the input + - Resolves references to other charms + - Updates `form.input.processedInput` and `form.input.references` + - Sets `charmManager` in `form.meta` + +3. **Classification**: `fillClassificationSection(form, options)` + - Determines workflow type via LLM or heuristic fallbacks + - Forces "rework" workflow when other charms are referenced + - Updates `form.classification` + - Sets `modelId` in `form.meta` + +4. **Planning**: `fillPlanningSection(form, options)` + - Generates execution plan and updated spec/schema + - For "fix" workflow, preserves existing spec + - Updates `form.plan` with steps, spec, and schema + - Sets `form.meta.isFilled = true` + +5. **Generation**: `generateCode(form)` + - Executes the appropriate workflow function + - Sets `form.generation.charm` with the created charm + - Sets `form.meta.isComplete = true` + +## Charm References and @Mentions + +When a user references another charm with an @mention: + +1. The `formatPromptWithMentions()` function processes these references +2. The system forces a "rework" workflow even if manual override is attempted +3. The references are processed in `executeReworkWorkflow()` to create a new charm with access to referenced data + +## UI Integration + +1. **Live Preview**: The `useLiveSpecPreview` hook: + - Processes input as the user types + - Calls `generateWorkflowPreview()` which runs the workflow process in "dry run" mode + - Provides dynamic feedback on classification, plan, and spec + - Manages multiple loading states for different preview components + - Supports "Fast" vs "Smart" model selection + +2. **SpecPreview Component**: + - Displays workflow type with confidence score + - Shows execution plan as numbered steps + - Conditionally shows spec (hidden for "fix" workflow) + - Allows workflow type override through a toggle + +## Execution Pipeline + +The main entry point is `executeWorkflow()`, which: + +1. Processes the full form with `processWorkflow(input, false, options)` +2. Routes execution to the appropriate workflow function: + - `executeFixWorkflow()`: Preserves spec, updates implementation + - `executeEditWorkflow()`: Updates spec and implementation + - `executeReworkWorkflow()`: Creates new charm with new spec/schema + +## Integration with existing components: + +1. The system leverages existing functions: + - `iterate()`: Core function for Fix/Edit workflows + - `castNewRecipe()`: Core function for Rework workflow + - `genSrc()`: Generates source code for all workflows + +2. LLM integration: + - `classifyWorkflow()`: LLM-based classification + - `generateWorkflowPlan()`: LLM-based plan generation + - `generateSpecAndSchema()`: For creating new specifications and schemas + +## Fallback Mechanisms + +The system includes fallbacks at each stage: + +1. If LLM classification fails, it falls back to keyword heuristics +2. If plan generation fails, it provides default plans for each workflow +3. If mention processing fails, it continues with the raw input + +## Key Implementation Details + +- **Workflow Form**: Centralized data structure that evolves through the process +- **Force Rework**: References to other charms force the rework workflow +- **Input Processing**: Handles @mentions and creates charm references +- **Live Preview**: Progressive processing showing classification → plan → spec +- **Execution Plan**: Structured steps to fulfill the user's request + +## Extensibility + +The workflow system is designed to be extensible: + +1. **New Workflow Types**: The `WorkflowType` type and `WORKFLOWS` record can be expanded + - Add new entries to the `WORKFLOWS` record + - Update classification logic to recognize new types + - Implement specialized execution functions + +2. **Model Selection**: The system supports different LLM models for different stages + - Fast models for classification and preview + - More powerful models for code generation + - `getModelId()` function maps user-friendly names to model identifiers + +3. **UI Customization**: The workflow UI components are decoupled + - `SpecPreview` can be integrated in different contexts + - `useLiveSpecPreview` hook can be used in custom components + - Workflow type toggle allows manual override when appropriate \ No newline at end of file diff --git a/charm/src/commands.ts b/charm/src/commands.ts index f370bae72..a9a6ec347 100644 --- a/charm/src/commands.ts +++ b/charm/src/commands.ts @@ -3,8 +3,18 @@ import { Cell, getRecipe } from "@commontools/runner"; import { Charm, CharmManager } from "./charm.ts"; import { getIframeRecipe } from "./iframe/recipe.ts"; import { extractUserCode, injectUserCode } from "./iframe/static.ts"; -import { compileAndRunRecipe, generateNewRecipeVersion } from "./iterate.ts"; +import { + castNewRecipe, + compileAndRunRecipe, + generateNewRecipeVersion, +} from "./iterate.ts"; import { NAME } from "@commontools/builder"; +import { executeWorkflow } from "./imagine.ts"; +import { + ExecutionPlan, + formatPromptWithMentions, + WorkflowForm, +} from "./index.ts"; export const castSpellAsCharm = async ( charmManager: CharmManager, @@ -93,3 +103,82 @@ export async function addGithubRecipe( runOptions, ); } + +/** + * Modify a charm with the given prompt. This replaces the separate Etherate/Extend functionality. + * The prompt will be processed for mentions and the current charm will be included in the context. + * The workflow (edit, rework, fix) will be automatically determined based on the prompt. + * + * @param charmManager The CharmManager instance + * @param promptText The user's input describing what they want to do + * @param currentCharm The charm being modified + * @param model Optional LLM model to use + * @param workflowType Optional: Allow specifying workflow type (will be overridden to "rework" if references exist) + * @param previewPlan Optional: Pass through a pre-generated plan + * @returns A new or modified charm + */ +export function modifyCharm( + charmManager: CharmManager, + promptText: string, + currentCharm: Cell, + prefill?: Partial, + model?: string, +): Promise> { + // Include the current charm in the context + const context = { + currentCharm: currentCharm, + prefill, + model, + }; + + return executeWorkflow( + charmManager, + promptText, + context, + ); +} + +/** + * This function is equivalent to calling modifyCharm with workflowType="rework" + * It exists for backward compatibility and clarity in code + * + * @param charmManager CharmManager instance + * @param currentCharmId ID of the charm to extend from + * @param goal The prompt text describing what to create + * @param cells Optional additional data references to include + * @returns A new charm that extends from the current charm + */ +export async function extendCharm( + charmManager: CharmManager, + currentCharmId: string, + goal: string, + cells?: Record>, +): Promise> { + const charm = (await charmManager.get(currentCharmId, false))!; + + // Process any cells to include as references + const additionalReferences: Record> = {}; + + if (cells && Object.keys(cells).length > 0) { + // Add cells to additionalReferences + for (const [id, cell] of Object.entries(cells)) { + additionalReferences[id] = cell; + } + } + + const classification: WorkflowForm["classification"] = { + confidence: 1.0, + workflowType: "imagine", + reasoning: "Extend is always imagining since it changes argument schema", + }; + + const context = { + currentCharm: charm, + dataReferences: additionalReferences, + prefill: { + classification, + }, + }; + + return executeWorkflow(charmManager, goal, context); +} diff --git a/charm/src/format.ts b/charm/src/format.ts new file mode 100644 index 000000000..bf0380c4c --- /dev/null +++ b/charm/src/format.ts @@ -0,0 +1,257 @@ +import { Module, NAME, Recipe } from "@commontools/builder"; +import { Charm, CharmManager, charmSchema } from "./index.ts"; +import { Cell, getEntityId, isCell, isStream } from "@commontools/runner"; + +/** + * Converts a string of multiple words into camelCase format + * @param input - The string to convert + * @returns The camelCased string + * + * Examples: + * - "hello world" -> "helloWorld" + * - "The quick brown FOX" -> "theQuickBrownFox" + * - "this-is-a-test" -> "thisIsATest" + * - "already_camel_case" -> "alreadyCamelCase" + */ +function toCamelCase(input: string): string { + // Handle empty string case + if (!input) return ""; + + // Split the input string by non-alphanumeric characters + return input + .split(/[^a-zA-Z0-9]/) + .filter((word) => word.length > 0) // Remove empty strings + .map((word, index) => { + // First word should be all lowercase + if (index === 0) { + return word.toLowerCase(); + } + // Other words should have their first letter capitalized and the rest lowercase + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + }) + .join(""); +} + +export async function formatPromptWithMentions( + prompt: string, + charmManager: CharmManager, +): Promise< + { + text: string; + sources: Record< + string, + { name: string; cell: Cell; recipe?: Recipe | Module } + >; + } +> { + const payload = await parseComposerDocument( + prompt, + charmManager, + ); + + // Create a mapping of IDs to source objects + const sourcesMap: Record = {}; + + // Process the text to inject IDs where mentions are + let processedText = payload.text; + + // Check if there are any sources to process + if (payload.sources && Object.keys(payload.sources).length > 0) { + // Add each source to the map + Object.entries(payload.sources).forEach(([id, source]) => { + const shadowId = getCharmNameAsCamelCase(source.cell, sourcesMap); + sourcesMap[shadowId] = source; + + // Replace the markdown link mention with the ID + // Format: [character](charm://id) + processedText = processedText.replace( + new RegExp(`\\[(.*?)\\]\\(charm://${id}\\)`, "g"), + `\`${shadowId}\``, + ); + }); + } + + return { + text: processedText, + sources: sourcesMap, + }; +} + +export function getCharmNameAsCamelCase( + cell: Cell, + usedKeys: Record, +): string { + const charmName = toCamelCase(cell.asSchema(charmSchema).key(NAME).get()); + + let name = charmName; + let num = 0; + + while (name in usedKeys) name = charmName + `${++num}`; + + return name; +} + +// Type definition for Slate document node structure +type Descendant = { + type?: string; + text?: string; + id?: string; + character?: string; + bold?: boolean; + italic?: boolean; + children?: Descendant[]; +}; + +// Function to parse Slate document and extract mention references +export async function parseComposerDocument( + serializedDocument: string, + charmManager?: CharmManager, +): Promise<{ + text: string; + mentions: string[]; + sources: { + [id: string]: { name: string; cell: Cell; recipe?: Recipe | Module }; + }; +}> { + try { + if (serializedDocument.trim().length == 0) { + return { text: "", mentions: [], sources: {} }; + } + + const document = JSON.parse(serializedDocument) as Descendant[]; + let fullText = ""; + const mentions: string[] = []; + const sources: { + [id: string]: { name: string; cell: Cell }; + } = {}; + const mentionIndices: Record = {}; + + // Helper to add markdown styling based on node type + const processNode = async ( + node: any, + currentList: { type: string | null; level: number } = { + type: null, + level: 0, + }, + ) => { + if (node.type === "mention") { + if (node.id) { + // Add to mentions list if not already present + if (!mentionIndices[node.id]) { + mentions.push(node.id); + + // Create bibliography entry if charmManager is provided + const bibIndex = Object.keys(sources).length + 1; + + if (charmManager) { + const charm = await charmManager.get(node.id); + if (charm) { + sources[node.id] = { + name: node.character || `Reference ${bibIndex}`, + cell: charm, + }; + + mentionIndices[node.id] = bibIndex; + } + } + } + + // Add reference in markdown format + fullText += `[${node.character}](charm://${node.id})`; + } else { + // Handle mentions without explicit IDs (plain text mentions) + fullText += `@${node.character}`; + } + } else if (node.text !== undefined) { + // Handle text with formatting + let textContent = node.text; + if (node.bold) textContent = `**${textContent}**`; + if (node.italic) textContent = `*${textContent}*`; + fullText += textContent; + } else if (node.children) { + // Handle block elements with markdown syntax + switch (node.type) { + case "heading-one": + fullText += "# "; + break; + case "heading-two": + fullText += "## "; + break; + case "heading-three": + fullText += "### "; + break; + case "heading-four": + fullText += "#### "; + break; + case "heading-five": + fullText += "##### "; + break; + case "heading-six": + fullText += "###### "; + break; + case "block-quote": + fullText += "> "; + break; + case "bulleted-list": + // Just process children - the list items will add the markers + for (const child of node.children) { + await processNode(child, { + type: "bulleted-list", + level: currentList.level + 1, + }); + } + return; // Skip the default children processing below + case "list-item": + fullText += "* "; + break; + } + + // Process children + for (const child of node.children) { + await processNode(child, currentList); + } + + // Add appropriate line breaks after block elements + if (node.type && node.type !== "list-item") { + fullText += "\n\n"; + } else if (node.type === "list-item") { + fullText += "\n"; + } + } + }; + + // Process each node sequentially with await + for (const node of document) { + await processNode(node); + } + + return { + text: fullText.trim(), // Remove extra whitespace + mentions, + sources, + }; + } catch (error) { + console.error("Failed to parse document:", error); + return { text: "", mentions: [], sources: {} }; + } +} + +// Helper function to replace mentions with their actual content +export function replaceMentionsWithContent( + parsedDocument: { text: string; mentions: string[] }, + mentionContent: Record, +): string { + let result = parsedDocument.text; + + // Replace each mention with its content + for (const mentionId of parsedDocument.mentions) { + const content = mentionContent[mentionId]; + if (content) { + // Find the mention pattern in the text and replace it with content + const mentionRegex = new RegExp(`@[^@]+(#${mentionId})\\)`, "g"); + result = result.replace(mentionRegex, content); + } + } + + return result; +} diff --git a/charm/src/imagine.ts b/charm/src/imagine.ts new file mode 100644 index 000000000..d46a16839 --- /dev/null +++ b/charm/src/imagine.ts @@ -0,0 +1,31 @@ +import { Cell, getEntityId, isCell, isStream } from "@commontools/runner"; +import { isObj } from "@commontools/utils"; +import { JSONSchema } from "@commontools/builder"; +import { Charm, CharmManager } from "./charm.ts"; +import { getIframeRecipe } from "./iframe/recipe.ts"; +import { extractUserCode } from "./iframe/static.ts"; + +// Re-export workflow types and functions from workflow module +export type { WorkflowConfig, WorkflowType } from "./workflow.ts"; + +export { executeWorkflow, WORKFLOWS } from "./workflow.ts"; + +/** + * Structure representing a successfully parsed mention in a prompt + */ +export interface ParsedMention { + id: string; + name: string; + originalText: string; + startIndex: number; + endIndex: number; + charm: Cell; +} + +/** + * Result of processing a prompt with mentions + */ +export interface ProcessedPrompt { + text: string; // Processed text with mentions replaced by readable names + mentions: Record>; // Map of mention IDs to charm cells +} diff --git a/charm/src/index.ts b/charm/src/index.ts index 7a1c792e2..475278100 100644 --- a/charm/src/index.ts +++ b/charm/src/index.ts @@ -10,6 +10,7 @@ export { compileAndRunRecipe, compileRecipe, generateNewRecipeVersion, + genSrc, iterate, } from "./iterate.ts"; export { @@ -20,7 +21,34 @@ export { export { addGithubRecipe, castSpellAsCharm, + extendCharm, fixItCharm, + modifyCharm, renameCharm, } from "./commands.ts"; export { getIframeRecipe, type IFrameRecipe } from "./iframe/recipe.ts"; +export { type ParsedMention, type ProcessedPrompt } from "./imagine.ts"; +export { formatPromptWithMentions, parseComposerDocument } from "./format.ts"; + +// Export workflow module +export { + classifyIntent, + createWorkflowForm, + executeEditWorkflow, + executeFixWorkflow, + executeImagineWorkflow as executeReworkWorkflow, + executeWorkflow, + type ExecutionPlan, + fillClassificationSection, + fillPlanningSection, + formatSpecWithPlanAndPrompt, + generateCode, + generatePlan, + type IntentClassificationResult, + processInputSection, + processWorkflow, + type WorkflowConfig, + type WorkflowForm, + WORKFLOWS, + type WorkflowType, +} from "./workflow.ts"; diff --git a/charm/src/iterate.ts b/charm/src/iterate.ts index 9a9773c90..fd3fd59a2 100644 --- a/charm/src/iterate.ts +++ b/charm/src/iterate.ts @@ -5,7 +5,7 @@ import { registerNewRecipe, tsToExports, } from "@commontools/runner"; -import { client as llm } from "@commontools/llm"; +import { client as llm, formatForm } from "@commontools/llm"; import { isObj } from "@commontools/utils"; import { createJsonSchema, @@ -18,8 +18,12 @@ import { buildFullRecipe, getIframeRecipe } from "./iframe/recipe.ts"; import { buildPrompt, RESPONSE_PREFILL } from "./iframe/prompt.ts"; import { generateSpecAndSchema } from "@commontools/llm"; import { injectUserCode } from "./iframe/static.ts"; +import { WorkflowForm } from "./index.ts"; -const genSrc = async ({ +/** + * Generate source code for a charm based on its specification, schema, and optional existing source + */ +export const genSrc = async ({ src, spec, newSpec, @@ -47,11 +51,14 @@ const genSrc = async ({ return source; }; +/** + * Iterate on an existing charm by generating new source code based on a new specification + * This is a core function used by various workflows + */ export async function iterate( charmManager: CharmManager, charm: Cell, - spec: string, - shiftKey: boolean, + plan: WorkflowForm["plan"], model?: string, ): Promise> { const { iframe } = getIframeRecipe(charm); @@ -59,11 +66,13 @@ export async function iterate( throw new Error("Cannot iterate on a non-iframe. Must extend instead."); } - const newSpec = shiftKey ? iframe.spec + "\n" + spec : spec; + // TODO(bf): questionable logic... + const iframeSpec = iframe.spec; + const newSpec = plan?.spec ?? iframeSpec; const newIFrameSrc = await genSrc({ src: iframe.src, - spec: iframe.spec, + spec: iframeSpec, newSpec, schema: iframe.argumentSchema, model: model, @@ -196,13 +205,12 @@ function turnCellsIntoAliases(data: any): any { */ export async function castNewRecipe( charmManager: CharmManager, - goal: string, - cells?: any, + form: WorkflowForm, ): Promise> { - console.log("Processing goal:", goal, cells); + console.log("Processing form:", form); // Remove $UI, $NAME, and any streams from the cells - const scrubbed = scrub(cells); + const scrubbed = scrub(form.input.references); // First, extract any existing schema if we have data const existingSchema = createJsonSchema(scrubbed); @@ -214,12 +222,14 @@ export async function castNewRecipe( title, description, plan, - } = await generateSpecAndSchema(goal, existingSchema); + } = await generateSpecAndSchema(form, existingSchema); console.log("resultSchema", resultSchema); - const newSpec = - `${goal}\n${plan}\n${spec}`; + // We're goig from loose plan to detailed plan here. + const newSpec = `${ + formatForm(form) + }\n${plan}\n${spec}`; console.log("newSpec", newSpec); @@ -227,7 +237,7 @@ export async function castNewRecipe( // as a hack to work around iframes not supporting results schemas const schema = { ...existingSchema, - title, + title: title || "missing", description, } as Writable; @@ -259,7 +269,7 @@ export async function castNewRecipe( src: newIFrameSrc, spec, plan, - goal, + goal: form.input.processedInput, argumentSchema: schema, resultSchema, name, diff --git a/charm/src/workflow.ts b/charm/src/workflow.ts new file mode 100644 index 000000000..6059a0afe --- /dev/null +++ b/charm/src/workflow.ts @@ -0,0 +1,899 @@ +/** + * Workflow module - Contains the core workflow processing pipeline for charm operations + * + * This module defines: + * 1. Workflow types (Fix, Edit, Rework) + * 2. Classification process + * 3. Plan generation pipeline + * 4. Schema and specification generation + * 5. Workflow steps and execution + */ + +import { Cell } from "@commontools/runner"; +import { Charm, CharmManager } from "./charm.ts"; +import { JSONSchema } from "@commontools/builder"; +import { classifyWorkflow, generateWorkflowPlan } from "@commontools/llm"; +import { genSrc, iterate } from "./iterate.ts"; +import { getIframeRecipe } from "./iframe/recipe.ts"; +import { extractUserCode } from "./iframe/static.ts"; +import { formatPromptWithMentions } from "./format.ts"; +import { castNewRecipe } from "./iterate.ts"; + +// Types for workflow classification +export type WorkflowType = "fix" | "edit" | "imagine"; + +// Configuration for each workflow type +export interface WorkflowConfig { + name: WorkflowType; + description: string; + updateSpec: boolean; + updateSchema: boolean; + allowsDataReferences: boolean; +} + +export const WORKFLOWS: Record = { + fix: { + name: "fix", + description: + "Fix issues in the code without changing functionality or spec", + updateSpec: false, + updateSchema: false, + allowsDataReferences: false, + }, + edit: { + name: "edit", + description: + "Update functionality while maintaining the same core data structure", + updateSpec: true, + updateSchema: false, + allowsDataReferences: false, + }, + imagine: { + name: "imagine", + description: "Create a new charm with a potentially different data schema", + updateSpec: true, + updateSchema: true, + allowsDataReferences: true, + }, +}; + +/** + * Results from the intent classification stage + */ +export interface IntentClassificationResult { + workflowType: WorkflowType; + confidence: number; // 0-1 confidence score + reasoning: string; + enhancedPrompt?: string; // Optional refined prompt based on classification +} + +/** + * The execution plan for a workflow + */ +export interface ExecutionPlan { + workflowType: WorkflowType; + steps: string[]; + spec: string; + dataModel: string; +} + +/** + * Structure representing a successfully parsed mention in a prompt + */ +export interface ParsedMention { + id: string; + name: string; + originalText: string; + startIndex: number; + endIndex: number; + charm: Cell; +} + +/** + * Result of processing a prompt with mentions + */ +export interface ProcessedPrompt { + text: string; // Processed text with mentions replaced by readable names + mentions: Record>; // Map of mention IDs to charm cells +} + +/** + * Step 1: Classify user intent into one of the supported workflows + * + * This is the first step in the workflow pipeline. It processes the user + * input and determines which workflow type best matches their intent. + * + * @param input User input text + * @param currentCharm Current charm context (optional) + * @param model LLM model to use + * @param references Referenced charm data + * @returns Classification result + */ +export async function classifyIntent( + input: string, + currentCharm?: Cell, + model?: string, + references?: Record>, +): Promise { + // Process the input for @mentions if a CharmManager is provided + // Extract context from the current charm if available + let existingSpec: string | undefined; + let existingSchema: JSONSchema | undefined; + let existingCode: string | undefined; + + if (currentCharm) { + const { spec, schema, code } = extractContext(currentCharm); + existingSpec = spec; + existingSchema = schema; + existingCode = code; + } + + if (!existingSpec || !existingSchema) { + return { + workflowType: "imagine", + confidence: 1.0, + reasoning: + "Automatically classified as 'imagine' because there is nothing to refer to (either no current charm or no iframe recipe).", + enhancedPrompt: input, + }; + } + + // Check if we have any mentions of other charms (except the current charm) + // If so, we should automatically classify as "rework" since we need to build + // a combined schema and create a new argument cell that can access all referenced data + const hasOtherCharmReferences = references && + Object.keys(references).filter((key) => key !== "currentCharm") + .length > 0; + + if (hasOtherCharmReferences) { + // Auto-classify as rework when referencing other charms + return { + workflowType: "imagine", + confidence: 1.0, + reasoning: + "Automatically classified as 'imagine' because the prompt references other charms. " + + "When referencing other charms, we need to construct a new argument cell that can " + + "access data from all references with a combined schema.", + enhancedPrompt: input, + }; + } + + try { + const result = await classifyWorkflow( + input, + existingSpec, + existingSchema, + existingCode, + model, + ); + + return { + workflowType: result.workflowType, + confidence: result.confidence, + reasoning: result.reasoning, + enhancedPrompt: result.enhancedPrompt, + }; + } catch (error) { + console.error("Error during workflow classification:", error); + + // If no references, fallback to a simple heuristic based on keywords + const lowerInput = input.toLowerCase(); + + if ( + lowerInput.includes("fix") || lowerInput.includes("bug") || + lowerInput.includes("issue") + ) { + return { + workflowType: "fix", + confidence: 0.7, + reasoning: "Fallback classification: Input suggests a fix operation", + }; + } else if ( + lowerInput.includes("edit") || lowerInput.includes("update") || + lowerInput.includes("improve") || lowerInput.includes("add") + ) { + return { + workflowType: "edit", + confidence: 0.6, + reasoning: + "Fallback classification: Input suggests enhancing functionality", + }; + } else { + return { + workflowType: "imagine", + confidence: 0.5, + reasoning: "Fallback classification: Input suggests new functionality", + }; + } + } +} + +function extractContext(charm: Cell) { + let spec: string | undefined; + let schema: JSONSchema | undefined; + let code: string | undefined; + + try { + const iframeRecipe = getIframeRecipe(charm); + if (iframeRecipe && iframeRecipe.iframe) { + spec = iframeRecipe.iframe.spec; + schema = iframeRecipe.iframe.argumentSchema; + code = extractUserCode(iframeRecipe.iframe.src || "") || + undefined; + } + } catch { + console.warn("Failed to extract context from charm"); + } + + return { + spec, + schema, + code, + }; +} + +/** + * Step 2: Generate execution plan for the given intent and workflow + * + * This is the second step in the workflow pipeline. Based on the classified + * workflow type, it generates an execution plan, updated spec, and schema. + * + * @param input User input + * @param workflowType The classified workflow type + * @param currentCharm Current charm context + * @param model LLM model to use + * @param references Referenced charm data + * @returns Execution plan with steps, spec, and schema + */ +export async function generatePlan( + { input, workflowType, currentCharm, model }: { + input: string; + workflowType: WorkflowType; + currentCharm?: Cell; + model?: string; + }, +): Promise { + // Extract context from the current charm if available + let existingSpec: string | undefined; + let existingSchema: JSONSchema | undefined; + let existingCode: string | undefined; + + if (currentCharm) { + const { spec, schema, code } = extractContext(currentCharm); + existingSpec = spec; + existingSchema = schema; + existingCode = code; + } + + try { + const result = await generateWorkflowPlan( + input, + workflowType, + existingSpec, + existingSchema, + existingCode, + model, + ); + + return { + workflowType, + steps: result.steps, + spec: result.spec, + dataModel: result.dataModel, + }; + } catch (error) { + console.error("Error during plan generation:", error); + + // Fallback to a simple plan if LLM generation fails + const steps: string[] = []; + + if (workflowType === "fix") { + steps.push("Analyze existing code to identify the issue"); + steps.push("Implement fix while maintaining current functionality"); + steps.push("Verify the fix doesn't introduce side effects"); + } else if (workflowType === "edit") { + steps.push("Update specification to reflect new requirements"); + steps.push("Modify code to implement the new functionality"); + steps.push("Ensure backward compatibility with existing data"); + } else { // imagine + steps.push("Generate new specification and schema"); + steps.push("Create new implementation based on requirements"); + steps.push("Link to referenced data from existing charms"); + } + + return { + workflowType, + steps, + spec: input, + dataModel: "", + }; + } +} + +/** + * The workflow form that contains all the data needed for code generation + * This is progressively filled in through the workflow process + */ +export interface WorkflowForm { + // Input information + input: { + rawInput: string; + processedInput: string; + existingCharm?: Cell; + references: Record>; + }; + + // Classification information + classification: { + workflowType: WorkflowType; + confidence: number; + reasoning: string; + } | null; + + // Planning information + plan: { + steps: string[]; + spec?: string; + dataModel?: string; + } | null; + + // Generation information (only when actually generating code) + generation?: { + charm: Cell; + }; + + // Metadata and workflow state + meta: { + isComplete: boolean; + isFilled: boolean; + modelId?: string; + charmManager?: CharmManager; + }; +} + +/** + * Create a new workflow form with default values + */ +export function createWorkflowForm( + { input, modelId, charm }: { + input: string; + modelId?: string; + charm?: Cell; + }, +): WorkflowForm { + return { + input: { + rawInput: input, + processedInput: "", + references: {}, + existingCharm: charm, + }, + classification: null, + plan: null, + meta: { + isComplete: false, + isFilled: false, + modelId, + }, + }; +} + +/** + * Process the input part of the workflow form + * Handles mentions, references, and sets up the processedInput + */ +export async function processInputSection( + charmManager: CharmManager, + form: WorkflowForm, + options: Record = {}, +): Promise { + const newForm = { ...form }; + + // Skip for empty inputs + if (!form.input.rawInput || form.input.rawInput.trim().length === 0) { + throw new Error("Input is empty"); + } + + // Process mentions if CharmManager is provided + let processedInput = form.input.rawInput; + const references = { ...form.input.references }; + + try { + const { text, sources } = await formatPromptWithMentions( + form.input.rawInput, + charmManager, + ); + processedInput = text; + + // Merge mentioned charms into references + for (const [mentionId, charm] of Object.entries(sources)) { + if (!references[mentionId]) { + references[mentionId] = charm.cell; + } + } + } catch (error) { + console.warn("Error processing mentions in form:", error); + } + + newForm.input.processedInput = processedInput; + newForm.input.references = references; + newForm.meta.charmManager = charmManager; + + return newForm; +} + +/** + * Fill the classification section of the workflow form + */ +export async function fillClassificationSection( + form: WorkflowForm, + options: { model?: string } = {}, +): Promise { + const newForm = { ...form }; + + // Skip for empty inputs + if (!form.input.rawInput || form.input.rawInput.trim().length === 0) { + newForm.classification = { + workflowType: "edit", + confidence: 0, + reasoning: "Empty input", + }; + return newForm; + } + + const classification = await classifyIntent( + form.input.processedInput, + form.input.existingCharm, + form.meta.modelId, + form.input.references, + ); + + // Update classification in the form + newForm.classification = { + workflowType: classification.workflowType as WorkflowType, + confidence: classification.confidence, + reasoning: classification.reasoning, + }; + + return newForm; +} + +/** + * Fill the planning section of the workflow form + */ +export async function fillPlanningSection( + form: WorkflowForm, + options: Record = {}, +): Promise { + if (!form.classification) { + throw new Error("Classification is required"); + } + + const newForm = { ...form }; + + // Skip for empty inputs + if (!form.input.rawInput || form.input.rawInput.trim().length === 0) { + newForm.plan = { + steps: [], + }; + return newForm; + } + + let planningResult; + // Generate new plan based on workflow type + if ( + form.classification.workflowType === "fix" && form.input.existingCharm + ) { + // For fix workflow, preserve existing spec + let existingSpec: string | undefined; + let existingSchema: JSONSchema | undefined; + let existingCode: string | undefined; + + if (form.input.existingCharm) { + const { spec, schema, code } = extractContext(form.input.existingCharm); + existingSpec = spec; + existingSchema = schema; + existingCode = code; + } + + // Generate just the plan without updating spec + const executionPlan = await generatePlan( + { + input: form.input.processedInput, + workflowType: form.classification.workflowType, + currentCharm: form.input.existingCharm, + model: form.meta.modelId, + }, + ); + + planningResult = { + steps: executionPlan.steps, + spec: existingSpec, // Use existing spec for fix workflow + dataModel: "", + }; + } else { + // For edit/imagine, generate both plan and spec + const executionPlan = await generatePlan( + { + input: form.input.processedInput, + workflowType: form.classification.workflowType, + currentCharm: form.input.existingCharm, + model: form.meta.modelId, + }, + ); + + planningResult = { + steps: executionPlan.steps, + spec: executionPlan.spec, + dataModel: executionPlan.dataModel, + }; + } + + // Update planning in the form + newForm.plan = { + steps: planningResult.steps || [], + spec: planningResult.spec, + dataModel: planningResult.dataModel, + }; + + // Mark the form as filled (ready for generation) once we have a plan + newForm.meta.isFilled = true; + + return newForm; +} + +/** + * Generate code based on a filled workflow form + * This is the final step that actually creates a charm + */ +export async function generateCode(form: WorkflowForm): Promise { + if (!form.classification || !form.plan) { + throw new Error("Classification and plan are required for code generation"); + } + + const newForm = { ...form }; + + // Check if the form is filled properly + if (!newForm.meta.isFilled) { + throw new Error("Cannot generate code from an incomplete workflow form"); + } + + if (!newForm.meta.charmManager) { + throw new Error("CharmManager is required for code generation"); + } + + let charm: Cell; + + // Execute the appropriate workflow based on the classification + switch (form.classification.workflowType) { + case "fix": + if (!form.input.existingCharm) { + throw new Error("Fix workflow requires an existing charm"); + } + charm = await executeFixWorkflow( + newForm.meta.charmManager, + form.input.existingCharm, + form.plan, + form.meta.modelId, + ); + break; + + case "edit": + if (!form.input.existingCharm) { + throw new Error("Edit workflow requires an existing charm"); + } + charm = await executeEditWorkflow( + newForm.meta.charmManager, + form.input.existingCharm, + form.plan, + form.meta.modelId, + ); + break; + + case "imagine": + charm = await executeImagineWorkflow( + newForm.meta.charmManager, + form, + ); + break; + + default: + throw new Error( + `Unknown workflow type: ${form.classification.workflowType}`, + ); + } + + // Update the form with the generated charm + newForm.generation = { + charm, + }; + + // Mark the form as complete + newForm.meta.isComplete = true; + + return newForm; +} + +/** + * Process a workflow request from start to finish or just fill the form + * + * @param input The user's input text + * @param dryRun If true, only fills the form but doesn't generate code + * @param options Additional options for processing + * @returns The filled (and possibly completed) workflow form + */ +export async function processWorkflow( + input: string, + dryRun: boolean = false, + options: { + charmManager?: CharmManager; + existingCharm?: Cell; + prefill?: Partial; + model?: string; + } = {}, +): Promise { + // Create a new form or use prefilled form + let form = createWorkflowForm({ + input, + charm: options.existingCharm, + modelId: options.model, + }); + + if (options.prefill) { + form = { ...form, ...options.prefill }; + } + + // Step 1: Process input (mentions, references, etc.) if not already processed + if ( + !form.input?.processedInput || + form.input?.processedInput === form.input?.rawInput + ) { + if (!options.charmManager) { + throw new Error("charmManager required to format input"); + } + + form = await processInputSection(options.charmManager, form); + } + + // Step 2: Classification if not already classified + if (!form.classification) { + form = await fillClassificationSection(form, { + model: options.model, + }); + } + + // Step 3: Planning if not already planned + if (!form.plan) { + form = await fillPlanningSection(form); + } + + // Step 4: Generation (if not a dry run and not already generated) + if (!dryRun && options.charmManager && !form.generation?.charm) { + form = await generateCode(form); + } + + return form; +} + +/** + * Format a spec to include user prompt and execution plan + * This ensures the full context is preserved in the recipe + */ +export function formatSpecWithPlanAndPrompt( + originalSpec: string, + userPrompt: string, + plan: string[] | string, +): string { + // Format the plan as a string if it's an array + const planText = Array.isArray(plan) ? plan.join("\n- ") : plan; + + // Create a formatted spec with XML tags to separate sections + return ` +${originalSpec} + + + +${userPrompt} + + + +- ${planText} +`; +} + +/** + * Execute the Fix workflow + * + * The Fix workflow preserves the existing specification and schema, + * focusing only on fixing issues in the implementation. + */ +export function executeFixWorkflow( + charmManager: CharmManager, + currentCharm: Cell, + plan: WorkflowForm["plan"], + model?: string, +): Promise> { + console.log("Executing FIX workflow"); + + // Call iterate with the existing spec to ensure it's preserved + return iterate( + charmManager, + currentCharm, + plan, + model, + ); +} + +/** + * Execute the Edit workflow + * + * The Edit workflow builds upon the existing specification but retains + * the existing schema, modifying the implementation to add features + * or enhance functionality while maintaining compatibility. + */ +export function executeEditWorkflow( + charmManager: CharmManager, + currentCharm: Cell, + plan: WorkflowForm["plan"], + model?: string, +): Promise> { + console.log("Executing EDIT workflow"); + + // For edit workflow, we use the updated spec but pass shiftKey as true + // to ensure it preserves compatibility with existing data + return iterate( + charmManager, + currentCharm, + plan, + model, + ); +} + +/** + * Helper function to convert a string to camelCase + */ +function toCamelCase(input: string): string { + // Handle empty string case + if (!input) return "currentCharm"; + + // Split the input string by non-alphanumeric characters + return input + .split(/[^a-zA-Z0-9]/) + .filter((word) => word.length > 0) // Remove empty strings + .map((word, index) => { + // First word should be all lowercase + if (index === 0) { + return word.toLowerCase(); + } + // Other words should have their first letter capitalized and the rest lowercase + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + }) + .join(""); +} + +/** + * Execute the Rework workflow + * + * The Rework workflow creates a new charm with potentially different + * schema, allowing for more significant changes or combinations of + * data from multiple existing charms. + */ +export function executeImagineWorkflow( + charmManager: CharmManager, + form: WorkflowForm, +): Promise> { + console.log("Executing IMAGINE workflow"); + + // Process references - this allows the new charm to access data from multiple sources + let allReferences: Record> = {}; + + // Add all external references first with validation + if (form.input.references && Object.keys(form.input.references).length > 0) { + for (const [id, cell] of Object.entries(form.input.references)) { + if ( + !cell || typeof cell !== "object" || !("get" in cell) || + typeof cell.get !== "function" + ) { + console.warn(`Reference "${id}" is not a valid cell, skipping`); + continue; + } + + try { + // Create a valid camelCase identifier + const cellData = cell.get(); + const charmName = cellData && cellData["NAME"] ? cellData["NAME"] : id; + const camelCaseId = toCamelCase(charmName); + + // Make sure the ID is unique + let uniqueId = camelCaseId; + let counter = 1; + while (uniqueId in allReferences) { + uniqueId = `${camelCaseId}${counter++}`; + } + + allReferences[uniqueId] = cell; + console.log(`Added reference "${id}" as "${uniqueId}"`); + } catch (error) { + console.error(`Error processing reference "${id}":`, error); + } + } + } + + // Add current charm if available + if ( + form.input.existingCharm + ) { + try { + const charmData = form.input.existingCharm.get(); + const charmName = charmData && charmData["NAME"] + ? charmData["NAME"] + : "currentCharm"; + const camelCaseId = toCamelCase(charmName); + + // Make sure the ID is unique + let uniqueId = camelCaseId; + let counter = 1; + while (uniqueId in allReferences) { + uniqueId = `${camelCaseId}${counter++}`; + } + + // HACK: avoid nesting for a single self reference + if (Object.keys(allReferences).length === 0) { + allReferences = form.input.existingCharm as any; + } else { + allReferences[uniqueId] = form.input.existingCharm; + } + + console.log(`Added current charm as "${uniqueId}"`); + + // Remove any generic "currentCharm" entry + if (allReferences["currentCharm"]) { + delete allReferences["currentCharm"]; + } + } catch (error) { + console.error(`Error processing current charm:`, error); + } + } + + form.input.references = allReferences; + + // Cast a new recipe with references, spec, and schema + return castNewRecipe( + charmManager, + form, + ); +} + +/** + * Main entry point for all workflow processing + * + * This function orchestrates the entire workflow process: + * 1. Input processing and mention detection + * 2. Classification (if not overridden) + * 3. Plan generation + * 4. Code generation + */ +export async function executeWorkflow( + charmManager: CharmManager, + input: string, + context: { + currentCharm?: Cell; + prefill?: Partial; + model?: string; + }, +): Promise> { + // Process the workflow with dryRun=false to fully execute and generate code + const form = await processWorkflow(input, false, { + charmManager, + existingCharm: context.currentCharm, + model: context.model, + prefill: context.prefill, + }); + + // A completed form should have a generated charm + if (!form.generation?.charm) { + throw new Error("Workflow execution failed to create a charm"); + } + + return form.generation.charm; +} diff --git a/charm/test/iterate.test.ts b/charm/test/iterate.test.ts index 8309f2876..36fb45291 100644 --- a/charm/test/iterate.test.ts +++ b/charm/test/iterate.test.ts @@ -1,9 +1,10 @@ -import { assertEquals } from "@std/assert"; -import { beforeEach, describe, it } from "@std/testing/bdd"; +import { assertEquals, assertExists } from "@std/assert"; +import { beforeEach, describe, it, afterEach } from "@std/testing/bdd"; import { scrub } from "../src/iterate.ts"; -import { getImmutableCell, isCell, isStream } from "@commontools/runner"; +import { getImmutableCell, isCell, isStream, Cell } from "@commontools/runner"; import { JSONSchema } from "@commontools/builder"; import { isObj } from "@commontools/utils"; +import { Charm, CharmManager } from "../src/charm.ts"; describe("scrub function", () => { it("should return primitive values unchanged", () => { @@ -86,3 +87,6 @@ describe("scrub function", () => { assertEquals(result.get(), "test value"); }); }); + +// XML tag functions have been moved elsewhere +// Tests will be updated when we create proper tests for the workflow module diff --git a/charm/test/workflow-classification.test.ts b/charm/test/workflow-classification.test.ts new file mode 100644 index 000000000..4ac58e4e0 --- /dev/null +++ b/charm/test/workflow-classification.test.ts @@ -0,0 +1,35 @@ +import { describe, it } from "@std/testing/bdd"; +import { expect } from "@std/expect"; + +import { classifyIntent, generatePlan, WORKFLOWS } from "../src/workflow.ts"; + +describe("Workflow Classification", () => { + describe("WORKFLOWS constant", () => { + it("should define three workflow types", () => { + expect(Object.keys(WORKFLOWS).length).toBe(3); + expect(WORKFLOWS.fix).toBeDefined(); + expect(WORKFLOWS.edit).toBeDefined(); + expect(WORKFLOWS.imagine).toBeDefined(); + }); + + it("should have the correct properties for each workflow", () => { + // Fix workflow + expect(WORKFLOWS.fix.name).toBe("fix"); + expect(WORKFLOWS.fix.updateSpec).toBe(false); + expect(WORKFLOWS.fix.updateSchema).toBe(false); + expect(WORKFLOWS.fix.allowsDataReferences).toBe(false); + + // Edit workflow + expect(WORKFLOWS.edit.name).toBe("edit"); + expect(WORKFLOWS.edit.updateSpec).toBe(true); + expect(WORKFLOWS.edit.updateSchema).toBe(false); + expect(WORKFLOWS.edit.allowsDataReferences).toBe(false); + + // Rework workflow + expect(WORKFLOWS.imagine.name).toBe("imagine"); + expect(WORKFLOWS.imagine.updateSpec).toBe(true); + expect(WORKFLOWS.imagine.updateSchema).toBe(true); + expect(WORKFLOWS.imagine.allowsDataReferences).toBe(true); + }); + }); +}); diff --git a/jumble/integration/basic-flow.test.ts b/jumble/integration/basic-flow.test.ts index 66f2ca8e2..12e3444c4 100644 --- a/jumble/integration/basic-flow.test.ts +++ b/jumble/integration/basic-flow.test.ts @@ -212,12 +212,12 @@ Deno.test({ await page.keyboard.up("ControlLeft"); await sleep(1000); - await page.keyboard.type("extend"); + await page.keyboard.type("modify"); await sleep(1000); await page.keyboard.press("Enter"); - await sleep(300); - await page.keyboard.type("count of values"); + await sleep(500); + await page.keyboard.type("count the values in current"); await sleep(1000); await page.keyboard.press("Enter"); await sleep(1000); @@ -234,7 +234,7 @@ Deno.test({ await waitForSelectorWithText( page, "a[aria-roledescription='charm-link']", - "Value Counter", + "Value Counter Charm", ); // FIXME(ja): how to look at the actual iframe content? diff --git a/jumble/integration/cache/llm-api-cache/61063134e61d3f147733a0cf9711b6fa9cf9f2d5acf81bfeccf71285c0ed93f9.json b/jumble/integration/cache/llm-api-cache/61063134e61d3f147733a0cf9711b6fa9cf9f2d5acf81bfeccf71285c0ed93f9.json deleted file mode 100644 index d22b0d3c4..000000000 --- a/jumble/integration/cache/llm-api-cache/61063134e61d3f147733a0cf9711b6fa9cf9f2d5acf81bfeccf71285c0ed93f9.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "model": "anthropic:claude-3-7-sonnet-latest", - "system": "# React Component Builder\n\nCreate an interactive React component that fulfills the user's request. Focus on delivering a clean, useful implementation with appropriate features.\n\n## You Are Part of a Two-Phase Process\n\n1. First phase (already completed):\n - Analyzed the user's request\n - Created a detailed specification\n - Generated a structured data schema\n\n2. Your job (second phase):\n - Create a reactive UI component based on the provided specification and schema\n - Implement the UI exactly according to the specification\n - Strictly adhere to the data schema provided\n\n## Required Elements\n- Define a title with `const title = 'Your App Name';`\n- Implement both `onLoad` and `onReady` functions\n- Use Tailwind CSS for styling with tasteful defaults\n- Do not write inline, use emoji for icons\n- Carefully avoid infinite loops and recursion that may cause performance issues\n\n## Code Structure\n1. React and ReactDOM are pre-imported - don't import them again\n2. All React hooks must be namespaced (e.g., `React.useState`, `React.useEffect`)\n3. Follow React hooks rules - never nest or conditionally call hooks\n4. For form handling, use `onClick` handlers instead of `onSubmit`\n\n## Available APIs\n- **useDoc(key, defaultValue)** - Persistent data storage with reactive updates\n- **llm(promptPayload)** - Send requests to the language model\n- **readWebpage(url)** - Fetch and parse external web content\n- **generateImage(prompt)** - Create AI-generated images\n\n## Important Note About useDoc\n- **useDoc is a React Hook** and must follow all React hook rules\n- It should only be used for persistent state and must draw from the provided schema\n - For any ephemeral state, use `React.useState`\n- Only call useDoc at the top level of your function components or custom hooks\n- Do not call useDoc inside loops, conditions, or nested functions\n- useDoc cannot be used outside of `onReady` components - it must be called during rendering\n\n## Library Usage\n- Request additional libraries in `onLoad` by returning an array of module names\n- Available libraries:\n - imports : [object Object]\n- Only use the explicitly provided libraries\n\n## Security Restrictions\n- Do not use browser dialog functions (`prompt()`, `alert()`, `confirm()`)\n- Avoid any methods that could compromise security or user experience\n\n\n\n{\n \"type\": \"object\",\n \"properties\": {\n \"simpleValue2\": {\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n },\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Value Counts\",\n \"description\": \"Map of values to their occurrence counts\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 1\n }\n },\n \"total\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Total number of values counted\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"uniqueCount\": {\n \"type\": \"integer\",\n \"title\": \"Unique Count\",\n \"description\": \"Number of unique values found\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Identifier of the source array that was counted\",\n \"default\": \"simpleValue2.values\"\n }\n },\n \"title\": \"Value Counter\",\n \"description\": \"A utility to count occurrences of values in an array.\"\n}\n\n\n\n# SDK Usage Guide\n\n## 1. `useDoc` Hook\n\nThe `useDoc` hook binds to a reactive cell given key and returns a tuple `[doc, setDoc]`:\n\nAny keys from the view-model-schema are valid for useDoc, any other keys will fail. Provide a default as the second argument, **do not set an initial value explicitly**.\n\nFor this schema:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"counter\": {\n \"type\": \"number\",\n },\n \"title\": {\n \"type\": \"string\",\n \"default\": \"My Counter App\"\n }\n }\n}\n```\n\n```jsx\nfunction CounterComponent() {\n // Correct: useDoc called at top level of component\n const [counter, setCounter] = useDoc(\"counter\", -1); // default\n\n // Incorrect: would cause errors\n // if(something) {\n // const [data, setData] = useDoc(\"data\", {}); // Never do this!\n // }\n\n const onIncrement = useCallback(() => {\n // writing to the cell automatically triggers a re-render\n setCounter(counter + 1);\n }, [counter]);\n\n return (\n \n );\n}\n```\n\n## 2. llm Function\n\n```jsx\nasync function fetchLLMResponse() {\n // place user-level requirements in system prompt\n const promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke']\n };\n const result = await llm(promptPayload)\n console.log('LLM responded:', result);\n}\n```\n\nIf you need JSON to be returned from the LLM, you can enable the `mode: 'json'` in the `promptPayload`.\n\n```jsx\nconst promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke'],\n mode: 'json'\n};\nconst result = await llm(promptPayload);\nconsole.log('JSON response from llm:', result);\n```\n\n## 3. readWebpage Function\n\n```jsx\nasync function fetchFromUrl() {\n const url = 'https://twopm.studio';\n const result = await readWebpage(url);\n console.log('Markdown:', result.content);\n}\n```\n\n## 4. generateImage Function\n\n```jsx\nfunction ImageComponent() {\n return \"Generated;\n}\n\n```\n## 5. Using the Interface Functions\n\n```javascript\n// Import from modern ESM libraries:\n// - react\n// - react-dom\n// - react-dom/client\n// - d3\n// - moment\n// - marked\n// - @react-spring/web\n// - @use-gesture/react\n// - uuid\n// - tone\nfunction onLoad() {\n return ['@react-spring/web']; // Request the modules you need\n}\n\nconst title = 'My ESM App';\nfunction ImageComponent({ url }) {\n return \"Generated;\n}\n\nfunction MyComponent({ label, description }) {\n return (\n
\n

{label}

\n

{description}

\n \n
\n );\n}\n\nfunction TodoItem({ todo, onToggle, onDelete }) {\n return (\n
\n \n \n {todo.text}\n \n \n Delete\n \n
\n );\n}\n\nfunction TodoList({ todo, setTodos}) {\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim() === '') return;\n\n const newTodoItem = {\n id: Date.now(),\n text: newTodo,\n completed: false\n };\n\n setTodos([...todos, newTodoItem]);\n setNewTodo('');\n };\n\n const toggleTodo = (id) => {\n setTodos(todos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n const deleteTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n
\n

Todo List

\n\n
\n setNewTodo(e.target.value)}\n placeholder=\"Add a new todo\"\n className=\"flex-grow p-2 border rounded-l\"\n />\n \n Add\n \n
\n\n
\n {todos.length > 0 ? (\n todos.map(todo => (\n toggleTodo(todo.id)}\n onDelete={() => deleteTodo(todo.id)}\n />\n ))\n ) : (\n

No todos yet!

\n )}\n
\n
\n );\n}\n\n// Main application code with modules passed as third parameter\nfunction onReady(mount, sourceData, libs) {\n const { useState, useEffect } = React; // React is available globally\n const { useSpring, animated } = libs['@react-spring/web']; // Access imported module\n\n function MyApp() {\n const [count, setCount] = useDoc('count', 0);\n const [todos, setTodos] = useDoc('todos', [\n { id: 1, text: 'Learn React', completed: false },\n { id: 2, text: 'Build a Todo App', completed: false }\n ]);\n const props = useSpring({\n from: { opacity: 0 },\n to: { opacity: 1 }\n });\n\n return (\n
\n \n setCount(count + 1)}\n >\n Clicks: {count}\n \n \n \n
\n );\n }\n\n // Use the client API for React 18\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```\n\n", - "messages": [ - { - "role": "user", - "content": "The user asked you to create the source code with the following specification:\n```\ncount of values\n1. Extract the \"values\" array from the simpleValue2 object in the existing schema\n2. Process the array to count occurrences of each unique string value\n3. Return a result object with the counts mapped by value\nThe Value Counter will analyze the \"values\" array within the simpleValue2 object and count the occurrences of each unique string. It will return a summary object containing each unique value as a key and its count as the corresponding value. This simple counter will maintain the existing schema structure while providing useful aggregation functionality.\n```" - }, - { - "role": "assistant", - "content": "\nconst title = 'Value Counter';\n\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nfunction onReady(mountNode) {\n function ValueCounter() {\n // Get the values array from simpleValue2\n const [simpleValue2, setSimpleValue2] = useDoc('simpleValue2', { values: [] });\n // Get the counts object that maps values to their occurrence counts\n const [counts, setCounts] = useDoc('counts', {});\n // Get the total count of all values\n const [total, setTotal] = useDoc('total', 0);\n // Get the count of unique values\n const [uniqueCount, setUniqueCount] = useDoc('uniqueCount', 0);\n // Get the source identifier\n const [source, setSource] = useDoc('source', 'simpleValue2.values');\n \n // Input state for adding new values\n const [newValue, setNewValue] = React.useState('');\n \n // Function to count occurrences in the values array\n const countValues = React.useCallback(() => {\n const { values } = simpleValue2;\n if (!Array.isArray(values)) return;\n \n const newCounts = {};\n let newTotal = 0;\n \n // Count occurrences of each value\n values.forEach(value => {\n if (typeof value === 'string') {\n newCounts[value] = (newCounts[value] || 0) + 1;\n newTotal++;\n }\n });\n \n // Update the counts, total, and uniqueCount\n setCounts(newCounts);\n setTotal(newTotal);\n setUniqueCount(Object.keys(newCounts).length);\n }, [simpleValue2, setCounts, setTotal, setUniqueCount]);\n \n // Count values when the component mounts or when values change\n React.useEffect(() => {\n countValues();\n }, [simpleValue2, countValues]);\n \n // Function to add a new value to the array\n const handleAddValue = () => {\n if (newValue.trim() === '') return;\n \n const updatedValues = [...(simpleValue2.values || []), newValue.trim()];\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n setNewValue('');\n };\n \n // Function to remove a value from the array\n const handleRemoveValue = (valueToRemove) => {\n const updatedValues = (simpleValue2.values || []).filter(\n (_, index) => index !== valueToRemove\n );\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n };\n \n // Function to clear all values\n const handleClearValues = () => {\n setSimpleValue2({ ...simpleValue2, values: [] });\n };\n \n return (\n
\n

{title}

\n \n {/* Input form to add new values */}\n
\n
\n setNewValue(e.target.value)}\n placeholder=\"Enter a value\"\n className=\"flex-grow p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n Add Value\n \n
\n
\n \n {/* Display current values */}\n
\n

Current Values

\n {simpleValue2.values && simpleValue2.values.length > 0 ? (\n
\n
    \n {simpleValue2.values.map((value, index) => (\n
  • \n {value}\n handleRemoveValue(index)}\n className=\"text-red-500 hover:text-red-700\"\n >\n 🗑️\n \n
    • \n ))}\n
\n
\n \n Clear All\n \n
\n
\n ) : (\n

No values added yet.

\n )}\n
\n \n {/* Display counts */}\n
\n

Value Counts

\n
\n
\n
\n

Total Values

\n

{total}

\n
\n
\n

Unique Values

\n

{uniqueCount}

\n
\n
\n \n {Object.keys(counts).length > 0 ? (\n
\n

Breakdown

\n
\n \n \n \n \n \n \n \n \n \n {Object.entries(counts).map(([value, count]) => (\n \n \n \n \n \n ))}\n \n
ValueCountPercentage
{value}{count}\n {total > 0 ? `${((count / total) * 100).toFixed(1)}%` : '0%'}\n
\n
\n
\n ) : (\n

No data to display.

\n )}\n
\n
\n \n
\n Source: {source}\n
\n
\n );\n }\n \n ReactDOM.createRoot(mountNode).render();\n}\n```" - }, - { - "role": "assistant", - "content": "\nconst title = 'Value Counter';\n\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nfunction onReady(mountNode) {\n function ValueCounter() {\n // Get the values array from simpleValue2\n const [simpleValue2, setSimpleValue2] = useDoc('simpleValue2', { values: [] });\n // Get the counts object that maps values to their occurrence counts\n const [counts, setCounts] = useDoc('counts', {});\n // Get the total count of all values\n const [total, setTotal] = useDoc('total', 0);\n // Get the count of unique values\n const [uniqueCount, setUniqueCount] = useDoc('uniqueCount', 0);\n // Get the source identifier\n const [source, setSource] = useDoc('source', 'simpleValue2.values');\n \n // Input state for adding new values\n const [newValue, setNewValue] = React.useState('');\n \n // Function to count occurrences in the values array\n const countValues = React.useCallback(() => {\n const { values } = simpleValue2;\n if (!Array.isArray(values)) return;\n \n const newCounts = {};\n let newTotal = 0;\n \n // Count occurrences of each value\n values.forEach(value => {\n if (typeof value === 'string') {\n newCounts[value] = (newCounts[value] || 0) + 1;\n newTotal++;\n }\n });\n \n // Update the counts, total, and uniqueCount\n setCounts(newCounts);\n setTotal(newTotal);\n setUniqueCount(Object.keys(newCounts).length);\n }, [simpleValue2, setCounts, setTotal, setUniqueCount]);\n \n // Count values when the component mounts or when values change\n React.useEffect(() => {\n countValues();\n }, [simpleValue2, countValues]);\n \n // Function to add a new value to the array\n const handleAddValue = () => {\n if (newValue.trim() === '') return;\n \n const updatedValues = [...(simpleValue2.values || []), newValue.trim()];\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n setNewValue('');\n };\n \n // Function to remove a value from the array\n const handleRemoveValue = (valueToRemove) => {\n const updatedValues = (simpleValue2.values || []).filter(\n (_, index) => index !== valueToRemove\n );\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n };\n \n // Function to clear all values\n const handleClearValues = () => {\n setSimpleValue2({ ...simpleValue2, values: [] });\n };\n \n return (\n
\n

{title}

\n \n {/* Input form to add new values */}\n
\n
\n setNewValue(e.target.value)}\n placeholder=\"Enter a value\"\n className=\"flex-grow p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n Add Value\n \n
\n
\n \n {/* Display current values */}\n
\n

Current Values

\n {simpleValue2.values && simpleValue2.values.length > 0 ? (\n
\n
    \n {simpleValue2.values.map((value, index) => (\n
  • \n {value}\n handleRemoveValue(index)}\n className=\"text-red-500 hover:text-red-700\"\n >\n 🗑️\n \n
    • \n ))}\n
\n
\n \n Clear All\n \n
\n
\n ) : (\n

No values added yet.

\n )}\n
\n \n {/* Display counts */}\n
\n

Value Counts

\n
\n
\n
\n

Total Values

\n

{total}

\n
\n
\n

Unique Values

\n

{uniqueCount}

\n
\n
\n \n {Object.keys(counts).length > 0 ? (\n
\n

Breakdown

\n
\n \n \n \n \n \n \n \n \n \n {Object.entries(counts).map(([value, count]) => (\n \n \n \n \n \n ))}\n \n
ValueCountPercentage
{value}{count}\n {total > 0 ? `${((count / total) * 100).toFixed(1)}%` : '0%'}\n
\n
\n
\n ) : (\n

No data to display.

\n )}\n
\n
\n \n
\n Source: {source}\n
\n
\n );\n }\n \n ReactDOM.createRoot(mountNode).render();\n}\n```" - } - ], - "stop": "\n```", - "stream": false -} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/647bbc8fe58321b81dc6dd9adff87197a67b14ed3766d5ffe06fb3ff16c0cfc2.json b/jumble/integration/cache/llm-api-cache/647bbc8fe58321b81dc6dd9adff87197a67b14ed3766d5ffe06fb3ff16c0cfc2.json new file mode 100644 index 000000000..caaa8e777 --- /dev/null +++ b/jumble/integration/cache/llm-api-cache/647bbc8fe58321b81dc6dd9adff87197a67b14ed3766d5ffe06fb3ff16c0cfc2.json @@ -0,0 +1,16 @@ +{ + "model": "anthropic:claude-3-7-sonnet-latest", + "system": "# React Component Builder\n\nCreate an interactive React component that fulfills the user's request. Focus on delivering a clean, useful implementation with appropriate features.\n\n## You Are Part of a Two-Phase Process\n\n1. First phase (already completed):\n - Analyzed the user's request\n - Created a detailed specification\n - Generated a structured data schema\n\n2. Your job (second phase):\n - Create a reactive UI component based on the provided specification and schema\n - Implement the UI exactly according to the specification\n - Strictly adhere to the data schema provided\n\n## Required Elements\n- Define a title with `const title = 'Your App Name';`\n- Implement both `onLoad` and `onReady` functions\n- Use Tailwind CSS for styling with tasteful defaults\n- Do not write inline, use emoji for icons\n- Carefully avoid infinite loops and recursion that may cause performance issues\n\n## Code Structure\n1. React and ReactDOM are pre-imported - don't import them again\n2. All React hooks must be namespaced (e.g., `React.useState`, `React.useEffect`)\n3. Follow React hooks rules - never nest or conditionally call hooks\n4. For form handling, use `onClick` handlers instead of `onSubmit`\n\n## Available APIs\n- **useDoc(key, defaultValue)** - Persistent data storage with reactive updates\n- **llm(promptPayload)** - Send requests to the language model\n- **readWebpage(url)** - Fetch and parse external web content\n- **generateImage(prompt)** - Create AI-generated images\n\n## Important Note About useDoc\n- **useDoc is a React Hook** and must follow all React hook rules\n- It should only be used for persistent state and must draw from the provided schema\n - For any ephemeral state, use `React.useState`\n- Only call useDoc at the top level of your function components or custom hooks\n- Do not call useDoc inside loops, conditions, or nested functions\n- useDoc cannot be used outside of `onReady` components - it must be called during rendering\n\n## Library Usage\n- Request additional libraries in `onLoad` by returning an array of module names\n- Available libraries:\n - imports : [object Object]\n- Only use the explicitly provided libraries\n\n## Security Restrictions\n- Do not use browser dialog functions (`prompt()`, `alert()`, `confirm()`)\n- Avoid any methods that could compromise security or user experience\n\n\n\n{\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n },\n \"count\": {\n \"type\": \"integer\",\n \"title\": \"Count\",\n \"description\": \"Number of elements counted in the input\",\n \"default\": 0\n },\n \"type\": {\n \"type\": \"string\",\n \"title\": \"Data Type\",\n \"description\": \"Type of the input data that was counted\",\n \"enum\": [\n \"array\",\n \"object\",\n \"string\",\n \"number\",\n \"boolean\",\n \"null\"\n ]\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Description of what was counted\",\n \"default\": \"values\"\n },\n \"details\": {\n \"type\": \"object\",\n \"title\": \"Count Details\",\n \"description\": \"Additional details about the count operation\",\n \"properties\": {\n \"isEmpty\": {\n \"type\": \"boolean\",\n \"title\": \"Is Empty\",\n \"description\": \"Whether the input contains no elements\"\n }\n }\n }\n },\n \"title\": \"Value Counter Charm\",\n \"description\": \"A charm to count elements in the current data structure.\"\n}\n\n\n\n# SDK Usage Guide\n\n## 1. `useDoc` Hook\n\nThe `useDoc` hook binds to a reactive cell given key and returns a tuple `[doc, setDoc]`:\n\nAny keys from the view-model-schema are valid for useDoc, any other keys will fail. Provide a default as the second argument, **do not set an initial value explicitly**.\n\nFor this schema:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"counter\": {\n \"type\": \"number\",\n },\n \"title\": {\n \"type\": \"string\",\n \"default\": \"My Counter App\"\n }\n }\n}\n```\n\n```jsx\nfunction CounterComponent() {\n // Correct: useDoc called at top level of component\n const [counter, setCounter] = useDoc(\"counter\", -1); // default\n\n // Incorrect: would cause errors\n // if(something) {\n // const [data, setData] = useDoc(\"data\", {}); // Never do this!\n // }\n\n const onIncrement = useCallback(() => {\n // writing to the cell automatically triggers a re-render\n setCounter(counter + 1);\n }, [counter]);\n\n return (\n \n );\n}\n```\n\n## 2. llm Function\n\n```jsx\nasync function fetchLLMResponse() {\n // place user-level requirements in system prompt\n const promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke']\n };\n const result = await llm(promptPayload)\n console.log('LLM responded:', result);\n}\n```\n\nIf you need JSON to be returned from the LLM, you can enable the `mode: 'json'` in the `promptPayload`.\n\n```jsx\nconst promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke'],\n mode: 'json'\n};\nconst result = await llm(promptPayload);\nconsole.log('JSON response from llm:', result);\n```\n\n## 3. readWebpage Function\n\n```jsx\nasync function fetchFromUrl() {\n const url = 'https://twopm.studio';\n const result = await readWebpage(url);\n console.log('Markdown:', result.content);\n}\n```\n\n## 4. generateImage Function\n\n```jsx\nfunction ImageComponent() {\n return \"Generated;\n}\n\n```\n## 5. Using the Interface Functions\n\n```javascript\n// Import from modern ESM libraries:\n// - react\n// - react-dom\n// - react-dom/client\n// - d3\n// - moment\n// - marked\n// - @react-spring/web\n// - @use-gesture/react\n// - uuid\n// - tone\nfunction onLoad() {\n return ['@react-spring/web']; // Request the modules you need\n}\n\nconst title = 'My ESM App';\nfunction ImageComponent({ url }) {\n return \"Generated;\n}\n\nfunction MyComponent({ label, description }) {\n return (\n
\n

{label}

\n

{description}

\n \n
\n );\n}\n\nfunction TodoItem({ todo, onToggle, onDelete }) {\n return (\n
\n \n \n {todo.text}\n \n \n Delete\n \n
\n );\n}\n\nfunction TodoList({ todo, setTodos}) {\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim() === '') return;\n\n const newTodoItem = {\n id: Date.now(),\n text: newTodo,\n completed: false\n };\n\n setTodos([...todos, newTodoItem]);\n setNewTodo('');\n };\n\n const toggleTodo = (id) => {\n setTodos(todos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n const deleteTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n
\n

Todo List

\n\n
\n setNewTodo(e.target.value)}\n placeholder=\"Add a new todo\"\n className=\"flex-grow p-2 border rounded-l\"\n />\n \n Add\n \n
\n\n
\n {todos.length > 0 ? (\n todos.map(todo => (\n toggleTodo(todo.id)}\n onDelete={() => deleteTodo(todo.id)}\n />\n ))\n ) : (\n

No todos yet!

\n )}\n
\n
\n );\n}\n\n// Main application code with modules passed as third parameter\nfunction onReady(mount, sourceData, libs) {\n const { useState, useEffect } = React; // React is available globally\n const { useSpring, animated } = libs['@react-spring/web']; // Access imported module\n\n function MyApp() {\n const [count, setCount] = useDoc('count', 0);\n const [todos, setTodos] = useDoc('todos', [\n { id: 1, text: 'Learn React', completed: false },\n { id: 2, text: 'Build a Todo App', completed: false }\n ]);\n const props = useSpring({\n from: { opacity: 0 },\n to: { opacity: 1 }\n });\n\n return (\n
\n \n setCount(count + 1)}\n >\n Clicks: {count}\n \n \n \n
\n );\n }\n\n // Use the client API for React 18\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```\n\n", + "messages": [ + { + "role": "user", + "content": "The user asked you to create the source code with the following specification:\n```\n\ncount the values in current\nAnalyze the user's request to understand what \"count the values in current\" means in this context\nDesign a simple charm that can count values in an array or object\nImplement the core counting logic to handle different data types (arrays, objects, strings)\nCreate a user-friendly output format that displays the count results\nAdd error handling for invalid inputs and edge cases\nThis charm counts the values in the provided input data. It analyzes the input and returns a count of elements based on the data type. For arrays, it counts the number of elements. For objects, it counts the number of key-value pairs. For strings, it counts the number of characters. For numbers, it simply returns 1 (as a single value). The charm provides a simple way to get a quick count of elements in any data structure, which is useful for data analysis, validation, or debugging purposes. The output includes both the count and the type of data that was counted to provide context.\n\"Input: Any → can be array, object, string, number, boolean, or null\\nProcess: Input → analyze type → count elements → format output\\nOutput: { count: number, type: string, [details]: object }\\n\\nThe charm processes data by:\\n1. Determining the type of the input data\\n2. Counting elements based on the type:\\n - Arrays: number of elements\\n - Objects: number of key-value pairs\\n - Strings: number of characters\\n - Other primitives: count as 1\\n3. Returning a structured result with the count and type information\\n\\nFor complex nested structures, the charm can optionally provide detailed counts of nested elements.\"\n\n1. Analyze the input data to determine its type (array, object, string, or primitive)\n2. Count the elements based on the identified type using the existing schema structure\n3. Return a formatted result with the count, type, and optional details\nThis charm analyzes the input data and returns the count of elements based on the data type. It will count the number of elements in arrays, key-value pairs in objects, characters in strings, or return 1 for primitive values. The charm will work with the existing schema that contains a \"values\" array property, and will provide a simple count result with type information.\n```" + }, + { + "role": "assistant", + "content": "\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nconst title = 'Value Counter Charm';\n\nfunction onReady(mount, sourceData) {\n function ValueCounter() {\n // State management using the schema\n const [values, setValues] = React.useState([]);\n const [count, setCount] = useDoc('count', 0);\n const [type, setType] = useDoc('type', '');\n const [source, setSource] = useDoc('source', 'values');\n const [details, setDetails] = useDoc('details', { isEmpty: true });\n \n // Input state\n const [inputValue, setInputValue] = React.useState('');\n const [error, setError] = React.useState('');\n\n // Function to count values based on input type\n const countValues = (input) => {\n try {\n let parsedInput;\n \n // Try to parse as JSON if it's a string\n if (typeof input === 'string' && (input.startsWith('[') || input.startsWith('{'))) {\n try {\n parsedInput = JSON.parse(input);\n } catch (e) {\n // If parsing fails, treat as regular string\n parsedInput = input;\n }\n } else {\n parsedInput = input;\n }\n \n // Determine type and count\n let countResult = 0;\n let typeResult = '';\n let sourceDesc = '';\n let isEmpty = false;\n \n if (Array.isArray(parsedInput)) {\n countResult = parsedInput.length;\n typeResult = 'array';\n sourceDesc = 'array elements';\n isEmpty = countResult === 0;\n setValues(parsedInput.map(item => JSON.stringify(item)));\n } else if (parsedInput !== null && typeof parsedInput === 'object') {\n const keys = Object.keys(parsedInput);\n countResult = keys.length;\n typeResult = 'object';\n sourceDesc = 'object properties';\n isEmpty = countResult === 0;\n setValues(keys.map(key => `${key}: ${JSON.stringify(parsedInput[key])}`));\n } else if (typeof parsedInput === 'string') {\n countResult = parsedInput.length;\n typeResult = 'string';\n sourceDesc = 'characters';\n isEmpty = countResult === 0;\n setValues([...parsedInput].map(char => char));\n } else if (typeof parsedInput === 'number') {\n countResult = 1;\n typeResult = 'number';\n sourceDesc = 'numeric value';\n isEmpty = false;\n setValues([parsedInput.toString()]);\n } else if (typeof parsedInput === 'boolean') {\n countResult = 1;\n typeResult = 'boolean';\n sourceDesc = 'boolean value';\n isEmpty = false;\n setValues([parsedInput.toString()]);\n } else if (parsedInput === null) {\n countResult = 0;\n typeResult = 'null';\n sourceDesc = 'null value';\n isEmpty = true;\n setValues([]);\n } else {\n throw new Error('Unsupported data type');\n }\n \n // Update state with results\n setCount(countResult);\n setType(typeResult);\n setSource(sourceDesc);\n setDetails({ isEmpty });\n setError('');\n } catch (err) {\n setError(`Error processing input: ${err.message}`);\n }\n };\n\n // Handle form submission\n const handleSubmit = () => {\n if (!inputValue.trim()) {\n setError('Please enter a value to count');\n return;\n }\n \n countValues(inputValue);\n };\n\n // Handle example clicks\n const handleExampleClick = (example) => {\n setInputValue(example);\n countValues(example);\n };\n\n return (\n
\n

{title}

\n

\n Count elements in different data structures. Enter an array, object, string, or primitive value.\n

\n \n {/* Input section */}\n
\n \n setInputValue(e.target.value)}\n placeholder='Enter a value like [1,2,3] or {\"a\":1,\"b\":2} or \"hello\"'\n />\n \n {error && (\n

{error}

\n )}\n \n \n Count Values\n \n
\n \n {/* Examples */}\n
\n

Try examples:

\n
\n \n \n \n \n \n \n
\n
\n \n {/* Results section */}\n {type && (\n
\n

Results

\n \n
\n
\n

Count

\n

{count}

\n

Number of {source}

\n
\n \n
\n

Type

\n

{type}

\n

\n {details.isEmpty ? 'Empty' : 'Non-empty'} {type}\n

\n
\n
\n \n {values.length > 0 && (\n
\n

Values:

\n
\n {values.map((value, index) => (\n
\n {index}: {value}\n
\n ))}\n
\n
\n )}\n
\n )}\n
\n );\n }\n\n // Render the component\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```" + } + ], + "stop": "\n```", + "stream": false +} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/8470c0b7d9c0e106c2403f8f403a146329b41f6526898635bdc8ee3577bdbd34.json b/jumble/integration/cache/llm-api-cache/8470c0b7d9c0e106c2403f8f403a146329b41f6526898635bdc8ee3577bdbd34.json new file mode 100644 index 000000000..3648947c2 --- /dev/null +++ b/jumble/integration/cache/llm-api-cache/8470c0b7d9c0e106c2403f8f403a146329b41f6526898635bdc8ee3577bdbd34.json @@ -0,0 +1,15 @@ +{ + "model": "anthropic:claude-3-7-sonnet-latest", + "system": "\nYou are creating a simple MVP based on the user's goal, using an existing data schema. Focus on the simplest implementation that works with the provided schema.\n\nGiven a user's feature request and an existing data schema, you will:\n1. Create a short title (2-5 words) that names the artifact\n2. Create a one-sentence description in the format \"A to \"\n3. Create a concise specification (3-5 sentences max) that works with the existing schema\n4. Generate a brief implementation plan (3 steps max)\n5. Design a minimal JSON schema that represents the core data model\n\nYour response must be structured as follows:\n\n\n[Short title for the artifact, 2-5 words]\n\n\n\n[One-sentence description in the format \"A to \"]\n\n\n\n[Concise specification that captures only the essential requirements]\n\n\n\n[Brief 3-step implementation plan using the existing schema]\n\n\n\n[Minimal JSON Schema in valid JSON format that represents data created by the artifact]\n\n\nSCHEMA GUIDELINES:\n1. Keep it minimal:\n - Include only essential fields (5-7 properties max)\n - Focus on the core functionality\n - If user requested complex features, simplify for this first version\n\n2. Each property should have:\n - A descriptive \"title\" field\n - A brief \"description\" field\n - A sensible default value where appropriate\n\n3. Example of a simple schema:\n```json\n{\n \"type\": \"object\",\n \"title\": \"Note\",\n \"description\": \"A simple note for the user\",\n \"properties\": {\n \"title\": {\n \"type\": \"string\",\n \"title\": \"Title\",\n \"description\": \"Title of the note\",\n \"default\": \"New Note\"\n },\n \"content\": {\n \"type\": \"string\",\n \"title\": \"Content\",\n \"description\": \"Content of the note\"\n },\n \"created\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Created Date\",\n \"description\": \"When the note was created\",\n }\n },\n \"required\": [\"title\", \"content\"]\n}\n\nGUIDELINES:\n- Aim for the simplest possible solution that works with the existing schema\n- The specification should take into account the existing schema structure\n- Focus on what can be achieved quickly with the existing data model\n- Avoid suggesting modifications to the schema if possible\n\nIMPORTANT:\n- Focus on the simplest working version\n- Aim for fewer fields rather than more\n- But still capture all the important state the user is creating\n- The user can always iterate and improve the solution later\n", + "stream": false, + "messages": [ + { + "role": "user", + "content": "\n\ncount the values in current\nAnalyze the user's request to understand what \"count the values in current\" means in this context\nDesign a simple charm that can count values in an array or object\nImplement the core counting logic to handle different data types (arrays, objects, strings)\nCreate a user-friendly output format that displays the count results\nAdd error handling for invalid inputs and edge cases\nThis charm counts the values in the provided input data. It analyzes the input and returns a count of elements based on the data type. For arrays, it counts the number of elements. For objects, it counts the number of key-value pairs. For strings, it counts the number of characters. For numbers, it simply returns 1 (as a single value). The charm provides a simple way to get a quick count of elements in any data structure, which is useful for data analysis, validation, or debugging purposes. The output includes both the count and the type of data that was counted to provide context.\n\"Input: Any → can be array, object, string, number, boolean, or null\\nProcess: Input → analyze type → count elements → format output\\nOutput: { count: number, type: string, [details]: object }\\n\\nThe charm processes data by:\\n1. Determining the type of the input data\\n2. Counting elements based on the type:\\n - Arrays: number of elements\\n - Objects: number of key-value pairs\\n - Strings: number of characters\\n - Other primitives: count as 1\\n3. Returning a structured result with the count and type information\\n\\nFor complex nested structures, the charm can optionally provide detailed counts of nested elements.\"\n\n\nExisting Schema:\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n}\n```\n\nBased on this goal and the existing schema, please provide a title, description, any additional schema,detailed specification, and implementation plan.\n" + }, + { + "role": "assistant", + "content": "\nValue Counter Charm\n\n\n\nA charm to count elements in the current data structure.\n\n\n\nThis charm analyzes the input data and returns the count of elements based on the data type. It will count the number of elements in arrays, key-value pairs in objects, characters in strings, or return 1 for primitive values. The charm will work with the existing schema that contains a \"values\" array property, and will provide a simple count result with type information.\n\n\n\n1. Analyze the input data to determine its type (array, object, string, or primitive)\n2. Count the elements based on the identified type using the existing schema structure\n3. Return a formatted result with the count, type, and optional details\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"Count Result\",\n \"description\": \"Result of counting elements in the input data\",\n \"properties\": {\n \"count\": {\n \"type\": \"integer\",\n \"title\": \"Count\",\n \"description\": \"Number of elements counted in the input\",\n \"default\": 0\n },\n \"type\": {\n \"type\": \"string\",\n \"title\": \"Data Type\",\n \"description\": \"Type of the input data that was counted\",\n \"enum\": [\"array\", \"object\", \"string\", \"number\", \"boolean\", \"null\"]\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Description of what was counted\",\n \"default\": \"values\"\n },\n \"details\": {\n \"type\": \"object\",\n \"title\": \"Count Details\",\n \"description\": \"Additional details about the count operation\",\n \"properties\": {\n \"isEmpty\": {\n \"type\": \"boolean\",\n \"title\": \"Is Empty\",\n \"description\": \"Whether the input contains no elements\"\n }\n }\n }\n },\n \"required\": [\"count\", \"type\", \"source\"]\n}\n" + } + ] +} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/867276562b188f66b047b5f0e25a7551a42a4d04206c08ab88f2698b3ed563ba.json b/jumble/integration/cache/llm-api-cache/867276562b188f66b047b5f0e25a7551a42a4d04206c08ab88f2698b3ed563ba.json new file mode 100644 index 000000000..76eddb348 --- /dev/null +++ b/jumble/integration/cache/llm-api-cache/867276562b188f66b047b5f0e25a7551a42a4d04206c08ab88f2698b3ed563ba.json @@ -0,0 +1,15 @@ +{ + "system": "You are a helpful AI assistant tasked with planning code generation workflows", + "messages": [ + { + "role": "user", + "content": "\nYou are creating a brief execution plan and specification for a tool to fulfill a user's intent.\nThe user's request has been classified as a IMAGINE operation.\n\nUser's request: \"count the values in current\"\n\n\nNo existing charm context available.\n\n\nBased on the workflow type, follow these guidelines:\n\n- FIX workflow:\n * PURPOSE: Fix bugs without changing functionality\n * SPEC: Keep existing specification exactly as-is\n * SCHEMA: No schema changes needed\n * CODE: Focus solely on fixing the implementation\n\n- EDIT workflow:\n * PURPOSE: Enhance functionality within existing data structure\n * SPEC: Build upon the existing specification\n * SCHEMA: Can add properties but never remove existing ones\n * CODE: Modify implementation while maintaining backward compatibility\n\n- IMAGINE workflow:\n * PURPOSE: Create new functionality, possibly using existing charms as sources\n * SPEC: Write a fresh specification, possibly referencing existing ones\n * SCHEMA: Will receive combined input schema, generate output schemas\n * CODE: Create a new implementation that may use data from other charms\n\nPlease create a medium-detail plan with BOTH a step-by-step execution plan AND a clear specification.\nAlways include all XML tags in your response and ensure JSON schemas are correctly formatted.\n\nRespond in the following format:\n\n(include ~5 steps)\n\n1. First step of the plan\n2. Second step of the plan\n3. ...\n\n\n(include ~1 paragraph)\n\nA clear description of what the charm does, its purpose, and functionality.\nInclude a clear explanation of how it works and what problems it solves.\nFor EDIT and IMAGINE, explain how it builds upon or differs from the existing charm.\n\n\n\nSketch key entity types as type signature.\nExplain how data is processed and output with arrow diagrams.\nFor EDIT and IMAGINE, explain any changes to the existing data model.\nInclude how this charm uses any referenced data from other charms.\n\n\nDO NOT GENERATE A SCHEMA.\n" + }, + { + "role": "assistant", + "content": "\n1. Analyze the user's request to understand what \"count the values in current\" means in this context\n2. Design a simple charm that can count values in an array or object\n3. Implement the core counting logic to handle different data types (arrays, objects, strings)\n4. Create a user-friendly output format that displays the count results\n5. Add error handling for invalid inputs and edge cases\n\n\n\nThis charm counts the values in the provided input data. It analyzes the input and returns a count of elements based on the data type. For arrays, it counts the number of elements. For objects, it counts the number of key-value pairs. For strings, it counts the number of characters. For numbers, it simply returns 1 (as a single value). The charm provides a simple way to get a quick count of elements in any data structure, which is useful for data analysis, validation, or debugging purposes. The output includes both the count and the type of data that was counted to provide context.\n\n\n\nInput: Any → can be array, object, string, number, boolean, or null\nProcess: Input → analyze type → count elements → format output\nOutput: { count: number, type: string, [details]: object }\n\nThe charm processes data by:\n1. Determining the type of the input data\n2. Counting elements based on the type:\n - Arrays: number of elements\n - Objects: number of key-value pairs\n - Strings: number of characters\n - Other primitives: count as 1\n3. Returning a structured result with the count and type information\n\nFor complex nested structures, the charm can optionally provide detailed counts of nested elements.\n" + } + ], + "model": "anthropic:claude-3-7-sonnet-latest", + "stream": false +} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/c02a73eaaab29ba5c9f480e301afa7f4dd0f0009012cf01e01c725a837301f03.json b/jumble/integration/cache/llm-api-cache/c02a73eaaab29ba5c9f480e301afa7f4dd0f0009012cf01e01c725a837301f03.json deleted file mode 100644 index 0c5ad8c24..000000000 --- a/jumble/integration/cache/llm-api-cache/c02a73eaaab29ba5c9f480e301afa7f4dd0f0009012cf01e01c725a837301f03.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "model": "anthropic:claude-3-7-sonnet-latest", - "system": "\nYou are creating a simple MVP based on the user's goal, using an existing data schema. Focus on the simplest implementation that works with the provided schema.\n\nGiven a user's feature request and an existing data schema, you will:\n1. Create a short title (2-5 words) that names the artifact\n2. Create a one-sentence description in the format \"A to \"\n3. Create a concise specification (3-5 sentences max) that works with the existing schema\n4. Generate a brief implementation plan (3 steps max)\n5. Design a minimal JSON schema that represents the core data model\n\nYour response must be structured as follows:\n\n\n[Short title for the artifact, 2-5 words]\n\n\n\n[One-sentence description in the format \"A to \"]\n\n\n\n[Concise specification that captures only the essential requirements]\n\n\n\n[Brief 3-step implementation plan using the existing schema]\n\n\n\n[Minimal JSON Schema in valid JSON format that represents data created by the artifact]\n\n\nSCHEMA GUIDELINES:\n1. Keep it minimal:\n - Include only essential fields (5-7 properties max)\n - Focus on the core functionality\n - If user requested complex features, simplify for this first version\n \n2. Each property should have:\n - A descriptive \"title\" field\n - A brief \"description\" field\n - A sensible default value where appropriate\n \n3. Example of a simple schema:\n```json\n{\n \"type\": \"object\",\n \"title\": \"Note\",\n \"description\": \"A simple note for the user\",\n \"properties\": {\n \"title\": {\n \"type\": \"string\",\n \"title\": \"Title\",\n \"description\": \"Title of the note\",\n \"default\": \"New Note\"\n },\n \"content\": {\n \"type\": \"string\",\n \"title\": \"Content\",\n \"description\": \"Content of the note\"\n },\n \"created\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Created Date\",\n \"description\": \"When the note was created\",\n }\n },\n \"required\": [\"title\", \"content\"]\n}\n\nGUIDELINES:\n- Aim for the simplest possible solution that works with the existing schema\n- The specification should take into account the existing schema structure\n- Focus on what can be achieved quickly with the existing data model\n- Avoid suggesting modifications to the schema if possible\n\nIMPORTANT:\n- Focus on the simplest working version\n- Aim for fewer fields rather than more\n- But still capture all the important state the user is creating\n- The user can always iterate and improve the solution later\n", - "stream": false, - "messages": [ - { - "role": "user", - "content": "\nGoal: count of values\n\nExisting Schema:\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"simpleValue2\": {\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n }\n }\n}\n```\n\nBased on this goal and the existing schema, please provide a title, description, any additional schema,detailed specification, and implementation plan.\n" - }, - { - "role": "assistant", - "content": "\nValue Counter\n\n\n\nA utility to count occurrences of values in an array.\n\n\n\nThe Value Counter will analyze the \"values\" array within the simpleValue2 object and count the occurrences of each unique string. It will return a summary object containing each unique value as a key and its count as the corresponding value. This simple counter will maintain the existing schema structure while providing useful aggregation functionality.\n\n\n\n1. Extract the \"values\" array from the simpleValue2 object in the existing schema\n2. Process the array to count occurrences of each unique string value\n3. Return a result object with the counts mapped by value\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"Value Count Result\",\n \"description\": \"Count of occurrences for each unique value in the array\",\n \"properties\": {\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Value Counts\",\n \"description\": \"Map of values to their occurrence counts\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 1\n }\n },\n \"total\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Total number of values counted\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"uniqueCount\": {\n \"type\": \"integer\",\n \"title\": \"Unique Count\",\n \"description\": \"Number of unique values found\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Identifier of the source array that was counted\",\n \"default\": \"simpleValue2.values\"\n }\n },\n \"required\": [\"counts\", \"total\", \"uniqueCount\"]\n}\n" - }, - { - "role": "assistant", - "content": "\nValue Counter\n\n\n\nA utility to count occurrences of values in an array.\n\n\n\nThe Value Counter will analyze the \"values\" array within the simpleValue2 object and count the occurrences of each unique string. It will return a summary object containing each unique value as a key and its count as the corresponding value. This simple counter will maintain the existing schema structure while providing useful aggregation functionality.\n\n\n\n1. Extract the \"values\" array from the simpleValue2 object in the existing schema\n2. Process the array to count occurrences of each unique string value\n3. Return a result object with the counts mapped by value\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"Value Count Result\",\n \"description\": \"Count of occurrences for each unique value in the array\",\n \"properties\": {\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Value Counts\",\n \"description\": \"Map of values to their occurrence counts\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 1\n }\n },\n \"total\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Total number of values counted\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"uniqueCount\": {\n \"type\": \"integer\",\n \"title\": \"Unique Count\",\n \"description\": \"Number of unique values found\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Identifier of the source array that was counted\",\n \"default\": \"simpleValue2.values\"\n }\n },\n \"required\": [\"counts\", \"total\", \"uniqueCount\"]\n}\n" - } - ] -} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/cfbaaaf5efb72c9d307842196b35ed8a9106ec2f5e150b3f95b4fcab9d1f112f.json b/jumble/integration/cache/llm-api-cache/cfbaaaf5efb72c9d307842196b35ed8a9106ec2f5e150b3f95b4fcab9d1f112f.json deleted file mode 100644 index dfd73f789..000000000 --- a/jumble/integration/cache/llm-api-cache/cfbaaaf5efb72c9d307842196b35ed8a9106ec2f5e150b3f95b4fcab9d1f112f.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "model": "anthropic:claude-3-7-sonnet-latest", - "system": "\nYou are creating a simple minimal viable product (MVP) based on a user's goal. Focus on the simplest implementation that works.\n\nGiven a user's feature request, you will:\n1. Create a short title (2-5 words) that names the artifact\n2. Create a one-sentence description in the format \"A to \"\n3. Create a concise specification (3-5 sentences max)\n4. Generate a brief implementation plan (3 steps max)\n5. Design a minimal JSON schema that represents the core data model\n\nYour response must be structured as follows:\n\n\n[Short title for the artifact, 2-5 words]\n\n\n\n[One-sentence description in the format \"A to \"]\n\n\n\n[Concise specification that captures only the essential requirements]\n\n\n\n[Brief 3-step implementation plan]\n\n\n\n[Minimal JSON Schema in valid JSON format that represents the core data model]\n\n\n\n[Simple example data that conforms to the schema]\n\n\nSCHEMA GUIDELINES:\n1. Keep it minimal:\n - Include only essential fields (5-7 properties max)\n - Focus on the core functionality\n - If user requested complex features, simplify for this first version\n \n2. Each property should have:\n - A descriptive \"title\" field\n - A brief \"description\" field\n - A sensible default value where appropriate\n \n3. Example of a simple schema:\n```json\n{\n \"type\": \"object\",\n \"title\": \"Note\",\n \"description\": \"A simple note for the user\",\n \"properties\": {\n \"title\": {\n \"type\": \"string\",\n \"title\": \"Title\",\n \"description\": \"Title of the note\",\n \"default\": \"New Note\"\n },\n \"content\": {\n \"type\": \"string\",\n \"title\": \"Content\",\n \"description\": \"Content of the note\"\n },\n \"created\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Created Date\",\n \"description\": \"When the note was created\",\n }\n },\n \"required\": [\"title\", \"content\"]\n}\n```\n\nIMPORTANT:\n- Focus on the simplest working version\n- Aim for fewer fields rather than more\n- But still capture all the important state the user is creating\n- Remember, the user can always iterate and improve the solution later\n", - "stream": false, - "messages": [ - { - "role": "user", - "content": "[{\"type\":\"paragraph\",\"children\":[{\"text\":\"count of values\"}]}]" - }, - { - "role": "assistant", - "content": "\nValue Counter\n\n\n\nA tool to count and track the frequency of values.\n\n\n\nThe Value Counter allows users to track occurrences of different values. It maintains a running count for each unique value entered. Users can add new values, increment existing ones, and view the current counts for all tracked values.\n\n\n\n1. Create a data structure to store values and their counts\n2. Implement functions to add/increment values and retrieve counts\n3. Build a simple interface to interact with the counter\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"ValueCounter\",\n \"description\": \"Tracks the frequency of different values\",\n \"properties\": {\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Counts\",\n \"description\": \"Map of values to their occurrence counts\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 0\n },\n \"default\": {}\n },\n \"totalCount\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Sum of all value counts\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"lastUpdated\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Last Updated\",\n \"description\": \"When the counter was last modified\"\n }\n },\n \"required\": [\"counts\", \"totalCount\"]\n}\n\n\n\n{\n \"counts\": {\n \"apple\": 5,\n \"banana\": 3,\n \"orange\": 2,\n \"grape\": 1\n },\n \"totalCount\": 11,\n \"lastUpdated\": \"2023-05-15T14:30:45Z\"\n}\n" - }, - { - "role": "assistant", - "content": "\nValue Counter\n\n\n\nA tool to count and track the frequency of values.\n\n\n\nThe Value Counter allows users to track occurrences of different values. It maintains a running count for each unique value entered. Users can add new values, increment existing ones, and view the current counts for all tracked values.\n\n\n\n1. Create a data structure to store values and their counts\n2. Implement functions to add/increment values and retrieve counts\n3. Build a simple interface to interact with the counter\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"ValueCounter\",\n \"description\": \"Tracks the frequency of different values\",\n \"properties\": {\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Counts\",\n \"description\": \"Map of values to their occurrence counts\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 0\n },\n \"default\": {}\n },\n \"totalCount\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Sum of all value counts\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"lastUpdated\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Last Updated\",\n \"description\": \"When the counter was last modified\"\n }\n },\n \"required\": [\"counts\", \"totalCount\"]\n}\n\n\n\n{\n \"counts\": {\n \"apple\": 5,\n \"banana\": 3,\n \"orange\": 2,\n \"grape\": 1\n },\n \"totalCount\": 11,\n \"lastUpdated\": \"2023-05-15T14:30:45Z\"\n}\n" - } - ] -} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/d62fdd4fd8616f9e94add2234ce7bb0536bfbe59a9a68150658ce044a856ba66.json b/jumble/integration/cache/llm-api-cache/d62fdd4fd8616f9e94add2234ce7bb0536bfbe59a9a68150658ce044a856ba66.json deleted file mode 100644 index 02d28eff6..000000000 --- a/jumble/integration/cache/llm-api-cache/d62fdd4fd8616f9e94add2234ce7bb0536bfbe59a9a68150658ce044a856ba66.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "model": "anthropic:claude-3-7-sonnet-latest", - "system": "# React Component Builder\n\nCreate an interactive React component that fulfills the user's request. Focus on delivering a clean, useful implementation with appropriate features.\n\n## You Are Part of a Two-Phase Process\n\n1. First phase (already completed):\n - Analyzed the user's request\n - Created a detailed specification\n - Generated a structured data schema\n\n2. Your job (second phase):\n - Create a reactive UI component based on the provided specification and schema\n - Implement the UI exactly according to the specification\n - Strictly adhere to the data schema provided\n\n## Required Elements\n- Define a title with `const title = 'Your App Name';`\n- Implement both `onLoad` and `onReady` functions\n- Use Tailwind CSS for styling with tasteful defaults\n- Do not write inline, use emoji for icons\n- Carefully avoid infinite loops and recursion that may cause performance issues\n\n## Code Structure\n1. React and ReactDOM are pre-imported - don't import them again\n2. All React hooks must be namespaced (e.g., `React.useState`, `React.useEffect`)\n3. Follow React hooks rules - never nest or conditionally call hooks\n4. For form handling, use `onClick` handlers instead of `onSubmit`\n\n## Available APIs\n- **useDoc(key, defaultValue)** - Persistent data storage with reactive updates\n- **llm(promptPayload)** - Send requests to the language model\n- **readWebpage(url)** - Fetch and parse external web content\n- **generateImage(prompt)** - Create AI-generated images\n\n## Important Note About useDoc\n- **useDoc is a React Hook** and must follow all React hook rules\n- It should only be used for persistent state and must draw from the provided schema\n - For any ephemeral state, use `React.useState`\n- Only call useDoc at the top level of your function components or custom hooks\n- Do not call useDoc inside loops, conditions, or nested functions\n- useDoc cannot be used outside of `onReady` components - it must be called during rendering\n\n## Library Usage\n- Request additional libraries in `onLoad` by returning an array of module names\n- Available libraries:\n - imports : [object Object]\n- Only use the explicitly provided libraries\n\n## Security Restrictions\n- Do not use browser dialog functions (`prompt()`, `alert()`, `confirm()`)\n- Avoid any methods that could compromise security or user experience\n\n\n\n{\n \"type\": \"object\",\n \"properties\": {\n \"simpleValue2\": {\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n },\n \"counts\": {\n \"type\": \"object\",\n \"title\": \"Value Counts\",\n \"description\": \"Map of each unique value to its count\",\n \"additionalProperties\": {\n \"type\": \"integer\",\n \"minimum\": 1\n }\n },\n \"total\": {\n \"type\": \"integer\",\n \"title\": \"Total Count\",\n \"description\": \"Total number of values counted\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"uniqueCount\": {\n \"type\": \"integer\",\n \"title\": \"Unique Count\",\n \"description\": \"Number of unique values found\",\n \"minimum\": 0,\n \"default\": 0\n },\n \"source\": {\n \"type\": \"string\",\n \"title\": \"Source\",\n \"description\": \"Identifier of the source array that was counted\",\n \"default\": \"simpleValue2.values\"\n }\n },\n \"title\": \"Value Counter\",\n \"description\": \"A utility to count occurrences of values in an array.\"\n}\n\n\n\n# SDK Usage Guide\n\n## 1. `useDoc` Hook\n\nThe `useDoc` hook binds to a reactive cell given key and returns a tuple `[doc, setDoc]`:\n\nAny keys from the view-model-schema are valid for useDoc, any other keys will fail. Provide a default as the second argument, **do not set an initial value explicitly**.\n\nFor this schema:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"counter\": {\n \"type\": \"number\",\n },\n \"title\": {\n \"type\": \"string\",\n \"default\": \"My Counter App\"\n }\n }\n}\n```\n\n```jsx\nfunction CounterComponent() {\n // Correct: useDoc called at top level of component\n const [counter, setCounter] = useDoc(\"counter\", -1); // default\n\n // Incorrect: would cause errors\n // if(something) {\n // const [data, setData] = useDoc(\"data\", {}); // Never do this!\n // }\n\n const onIncrement = useCallback(() => {\n // writing to the cell automatically triggers a re-render\n setCounter(counter + 1);\n }, [counter]);\n\n return (\n \n );\n}\n```\n\n## 2. llm Function\n\n```jsx\nasync function fetchLLMResponse() {\n // place user-level requirements in system prompt\n const promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke']\n };\n const result = await llm(promptPayload)\n console.log('LLM responded:', result);\n}\n```\n\nIf you need JSON to be returned from the LLM, you can enable the `mode: 'json'` in the `promptPayload`.\n\n```jsx\nconst promptPayload = {\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke'],\n mode: 'json'\n};\nconst result = await llm(promptPayload);\nconsole.log('JSON response from llm:', result);\n```\n\n## 3. readWebpage Function\n\n```jsx\nasync function fetchFromUrl() {\n const url = 'https://twopm.studio';\n const result = await readWebpage(url);\n console.log('Markdown:', result.content);\n}\n```\n\n## 4. generateImage Function\n\n```jsx\nfunction ImageComponent() {\n return \"Generated;\n}\n\n```\n## 5. Using the Interface Functions\n\n```javascript\n// Import from modern ESM libraries:\n// - react\n// - react-dom\n// - react-dom/client\n// - d3\n// - moment\n// - marked\n// - @react-spring/web\n// - @use-gesture/react\n// - uuid\n// - tone\nfunction onLoad() {\n return ['@react-spring/web']; // Request the modules you need\n}\n\nconst title = 'My ESM App';\nfunction ImageComponent({ url }) {\n return \"Generated;\n}\n\nfunction MyComponent({ label, description }) {\n return (\n
\n

{label}

\n

{description}

\n \n
\n );\n}\n\nfunction TodoItem({ todo, onToggle, onDelete }) {\n return (\n
\n \n \n {todo.text}\n \n \n Delete\n \n
\n );\n}\n\nfunction TodoList({ todo, setTodos}) {\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim() === '') return;\n\n const newTodoItem = {\n id: Date.now(),\n text: newTodo,\n completed: false\n };\n\n setTodos([...todos, newTodoItem]);\n setNewTodo('');\n };\n\n const toggleTodo = (id) => {\n setTodos(todos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n const deleteTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n
\n

Todo List

\n\n
\n setNewTodo(e.target.value)}\n placeholder=\"Add a new todo\"\n className=\"flex-grow p-2 border rounded-l\"\n />\n \n Add\n \n
\n\n
\n {todos.length > 0 ? (\n todos.map(todo => (\n toggleTodo(todo.id)}\n onDelete={() => deleteTodo(todo.id)}\n />\n ))\n ) : (\n

No todos yet!

\n )}\n
\n
\n );\n}\n\n// Main application code with modules passed as third parameter\nfunction onReady(mount, sourceData, libs) {\n const { useState, useEffect } = React; // React is available globally\n const { useSpring, animated } = libs['@react-spring/web']; // Access imported module\n\n function MyApp() {\n const [count, setCount] = useDoc('count', 0);\n const [todos, setTodos] = useDoc('todos', [\n { id: 1, text: 'Learn React', completed: false },\n { id: 2, text: 'Build a Todo App', completed: false }\n ]);\n const props = useSpring({\n from: { opacity: 0 },\n to: { opacity: 1 }\n });\n\n return (\n
\n \n setCount(count + 1)}\n >\n Clicks: {count}\n \n \n \n
\n );\n }\n\n // Use the client API for React 18\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```\n\n", - "messages": [ - { - "role": "user", - "content": "The user asked you to create the source code with the following specification:\n```\ncount of values\n1. Extract the \"values\" array from the simpleValue2 object in the existing schema\n2. Process the array to count occurrences of each unique string value\n3. Return a result object with the counts mapped by value\nThe Value Counter will analyze the \"values\" array within the simpleValue2 object and count the occurrences of each unique string. It will return a summary object containing each unique value as a key and its count as the corresponding value. This simple counter will maintain the existing schema structure while providing useful aggregation functionality.\n```" - }, - { - "role": "assistant", - "content": "\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nconst title = 'Value Counter';\n\nfunction onReady(mount) {\n function ValueCounter() {\n // Get the source array from simpleValue2.values\n const [simpleValue2, setSimpleValue2] = useDoc(\"simpleValue2\", { values: [] });\n const [counts, setCounts] = useDoc(\"counts\", {});\n const [total, setTotal] = useDoc(\"total\", 0);\n const [uniqueCount, setUniqueCount] = useDoc(\"uniqueCount\", 0);\n const [source, setSource] = useDoc(\"source\", \"simpleValue2.values\");\n \n // Local state for input field\n const [newValue, setNewValue] = React.useState(\"\");\n \n // Process the array to count occurrences\n React.useEffect(() => {\n if (!simpleValue2 || !simpleValue2.values) return;\n \n const valueArray = simpleValue2.values;\n const countMap = {};\n \n // Count occurrences of each value\n valueArray.forEach(value => {\n countMap[value] = (countMap[value] || 0) + 1;\n });\n \n // Update the counts, total, and uniqueCount\n setCounts(countMap);\n setTotal(valueArray.length);\n setUniqueCount(Object.keys(countMap).length);\n }, [simpleValue2, setCounts, setTotal, setUniqueCount]);\n \n // Handle adding a new value\n const handleAddValue = () => {\n if (!newValue.trim()) return;\n \n const updatedValues = [...(simpleValue2.values || []), newValue.trim()];\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n setNewValue(\"\");\n };\n \n // Handle removing a value\n const handleRemoveValue = (valueToRemove) => {\n const updatedValues = simpleValue2.values.filter(value => value !== valueToRemove);\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n };\n \n // Handle clearing all values\n const handleClearAll = () => {\n setSimpleValue2({ values: [] });\n };\n \n return (\n
\n

{title}

\n \n {/* Input section */}\n
\n

Add Values

\n
\n setNewValue(e.target.value)}\n className=\"flex-grow p-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter a value\"\n />\n \n Add\n \n
\n \n
\n \n Clear All\n \n
\n
\n \n {/* Values list */}\n
\n
\n

Values List

\n {simpleValue2.values && simpleValue2.values.length > 0 ? (\n
    \n {simpleValue2.values.map((value, index) => (\n
  • \n {value}\n handleRemoveValue(value)}\n className=\"text-red-500 hover:text-red-700\"\n >\n ❌\n \n
    • \n ))}\n
\n ) : (\n

No values added yet

\n )}\n
\n \n {/* Counts display */}\n
\n

Value Counts

\n {Object.keys(counts).length > 0 ? (\n
    \n {Object.entries(counts).map(([value, count], index) => (\n
  • \n {value}\n \n {count}\n \n
    • \n ))}\n
\n ) : (\n

No counts available

\n )}\n
\n
\n \n {/* Summary statistics */}\n
\n

Summary

\n
\n
\n

Total Values

\n

{total}

\n
\n
\n

Unique Values

\n

{uniqueCount}

\n
\n
\n

Source

\n

{source}

\n
\n
\n
\n
\n );\n }\n\n // Render the component\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```" - }, - { - "role": "assistant", - "content": "\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nconst title = 'Value Counter';\n\nfunction onReady(mount) {\n function ValueCounter() {\n // Get the source array from simpleValue2.values\n const [simpleValue2, setSimpleValue2] = useDoc(\"simpleValue2\", { values: [] });\n const [counts, setCounts] = useDoc(\"counts\", {});\n const [total, setTotal] = useDoc(\"total\", 0);\n const [uniqueCount, setUniqueCount] = useDoc(\"uniqueCount\", 0);\n const [source, setSource] = useDoc(\"source\", \"simpleValue2.values\");\n \n // Local state for input field\n const [newValue, setNewValue] = React.useState(\"\");\n \n // Process the array to count occurrences\n React.useEffect(() => {\n if (!simpleValue2 || !simpleValue2.values) return;\n \n const valueArray = simpleValue2.values;\n const countMap = {};\n \n // Count occurrences of each value\n valueArray.forEach(value => {\n countMap[value] = (countMap[value] || 0) + 1;\n });\n \n // Update the counts, total, and uniqueCount\n setCounts(countMap);\n setTotal(valueArray.length);\n setUniqueCount(Object.keys(countMap).length);\n }, [simpleValue2, setCounts, setTotal, setUniqueCount]);\n \n // Handle adding a new value\n const handleAddValue = () => {\n if (!newValue.trim()) return;\n \n const updatedValues = [...(simpleValue2.values || []), newValue.trim()];\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n setNewValue(\"\");\n };\n \n // Handle removing a value\n const handleRemoveValue = (valueToRemove) => {\n const updatedValues = simpleValue2.values.filter(value => value !== valueToRemove);\n setSimpleValue2({ ...simpleValue2, values: updatedValues });\n };\n \n // Handle clearing all values\n const handleClearAll = () => {\n setSimpleValue2({ values: [] });\n };\n \n return (\n
\n

{title}

\n \n {/* Input section */}\n
\n

Add Values

\n
\n setNewValue(e.target.value)}\n className=\"flex-grow p-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter a value\"\n />\n \n Add\n \n
\n \n
\n \n Clear All\n \n
\n
\n \n {/* Values list */}\n
\n
\n

Values List

\n {simpleValue2.values && simpleValue2.values.length > 0 ? (\n
    \n {simpleValue2.values.map((value, index) => (\n
  • \n {value}\n handleRemoveValue(value)}\n className=\"text-red-500 hover:text-red-700\"\n >\n ❌\n \n
    • \n ))}\n
\n ) : (\n

No values added yet

\n )}\n
\n \n {/* Counts display */}\n
\n

Value Counts

\n {Object.keys(counts).length > 0 ? (\n
    \n {Object.entries(counts).map(([value, count], index) => (\n
  • \n {value}\n \n {count}\n \n
    • \n ))}\n
\n ) : (\n

No counts available

\n )}\n
\n
\n \n {/* Summary statistics */}\n
\n

Summary

\n
\n
\n

Total Values

\n

{total}

\n
\n
\n

Unique Values

\n

{uniqueCount}

\n
\n
\n

Source

\n

{source}

\n
\n
\n
\n
\n );\n }\n\n // Render the component\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```" - } - ], - "stop": "\n```", - "stream": false -} \ No newline at end of file diff --git a/jumble/src/components/CommandCenter.tsx b/jumble/src/components/CommandCenter.tsx index 543973ac0..65a5f0c3f 100644 --- a/jumble/src/components/CommandCenter.tsx +++ b/jumble/src/components/CommandCenter.tsx @@ -18,13 +18,14 @@ import { SelectCommandItem, TranscribeCommandItem, } from "./commands.ts"; -import { usePreferredLanguageModel } from "@/contexts/LanguageModelContext.tsx"; +import { formatPromptWithMentions } from "@commontools/charm"; import { TranscribeInput } from "./TranscribeCommand.tsx"; import { useBackgroundTasks } from "@/contexts/BackgroundTaskContext.tsx"; import { Composer, ComposerSubmitBar } from "@/components/Composer.tsx"; import { charmId, getMentionableCharms } from "@/utils/charms.ts"; -import { formatPromptWithMentions } from "@/utils/format.ts"; import { NAME } from "@commontools/builder"; +import { Cell } from "@commontools/runner"; +import { Charm } from "@commontools/charm"; import { SpecPreviewModel, useLiveSpecPreview, @@ -52,14 +53,45 @@ function CommandProcessor({ "think", ); + // Get the focused charm if available + const { focusedCharmId } = context; + const [focusedCharm, setFocusedCharm] = useState | undefined>( + undefined, + ); + + // Fetch the focused charm when ID changes + useEffect(() => { + if (focusedCharmId) { + charmManager.get(focusedCharmId, false).then((charm) => { + if (charm) { + setFocusedCharm(charm); + } + }).catch((err) => { + console.error("Error fetching focused charm:", err); + }); + } else { + setFocusedCharm(undefined); + } + }, [focusedCharmId, charmManager]); + // Get spec preview as user types in command center - const { previewSpec, previewPlan, loading: isPreviewLoading } = - useLiveSpecPreview( - inputValue, - true, - 1000, - previewModel, - ); + const { + previewForm, + loading: isPreviewLoading, + classificationLoading, + planLoading, + setWorkflowType, // Add the setter function to allow changing workflow type manually + } = useLiveSpecPreview( + inputValue, + charmManager, // Explicitly pass CharmManager instance + true, + 1000, + previewModel, + focusedCharm, // Pass the current charm for context + ); + + // Update the command context with the current workflow form data + context.previewForm = previewForm; if (context.loading && mode.type !== "input") { return ( @@ -71,18 +103,19 @@ function CommandProcessor({ ); } - const onSubmit = useCallback(async () => { + const onSubmit = useCallback(() => { if (mode.type !== "input") { return; } - const { text, sources } = await formatPromptWithMentions( - inputValue, - charmManager, - ); if ((mode.command as InputCommandItem).handler) { - (mode.command as InputCommandItem).handler(text, sources); + (mode.command as InputCommandItem).handler(inputValue); } - }, [mode, inputValue, charmManager]); + }, [ + mode, + inputValue, + charmManager, + previewForm, + ]); switch (mode.type) { case "input": { @@ -91,11 +124,13 @@ function CommandProcessor({
{/* The floating spec preview will be positioned above the composer */} setPreviewModel(value as SpecPreviewModel)} + onChange={(value) => + setPreviewModel(value as SpecPreviewModel)} size="small" />
@@ -215,7 +251,9 @@ export function useCharmMentions() { id, name: `${name} (#${id.slice(-4)})`, }; - }).filter((mention): mention is {id: string, name: string} => mention !== null); + }).filter((mention): mention is { id: string; name: string } => + mention !== null + ); setCharmMentions(mentions); } catch (error) { @@ -235,7 +273,6 @@ export function CommandCenter() { const [mode, setMode] = useState({ type: "main" }); const [commandPathIds, setCommandPathIds] = useState([]); const [search, setSearch] = useState(""); - const { modelId, setPreferredModel } = usePreferredLanguageModel(); const { stopJob, startJob, addJobMessage, listJobs, updateJobProgress } = useBackgroundTasks(); @@ -259,8 +296,6 @@ export function CommandCenter() { focusedCharmId, focusedReplicaId, setOpen, - preferredModel: modelId ?? undefined, - setPreferredModel, setMode, loading, setLoading, @@ -282,11 +317,9 @@ export function CommandCenter() { navigate, focusedCharmId, focusedReplicaId, - modelId, loading, commandPathIds, setMode, - setPreferredModel, stopJob, startJob, addJobMessage, @@ -363,7 +396,9 @@ export function CommandCenter() { const handleEditRecipe = (e: KeyboardEvent) => { if (e.key === "i" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); - const editRecipeCommand = allCommands.find((cmd) => cmd.id === "edit-recipe"); + const editRecipeCommand = allCommands.find((cmd) => + cmd.id === "edit-recipe" + ); if (!editRecipeCommand) { console.warn("Edit recipe command not found"); return; @@ -379,7 +414,9 @@ export function CommandCenter() { const handleEditRecipeEvent = () => { if (focusedCharmId) { - const editRecipeCommand = allCommands.find((cmd) => cmd.id === "edit-recipe"); + const editRecipeCommand = allCommands.find((cmd) => + cmd.id === "edit-recipe" + ); if (!editRecipeCommand) { console.warn("Edit recipe command not found"); return; @@ -411,8 +448,6 @@ export function CommandCenter() { focusedCharmId, focusedReplicaId, setOpen, - preferredModel: modelId ?? undefined, - setPreferredModel, setMode, loading, setLoading, diff --git a/jumble/src/components/Composer.tsx b/jumble/src/components/Composer.tsx index aee8facd6..6b03df03f 100644 --- a/jumble/src/components/Composer.tsx +++ b/jumble/src/components/Composer.tsx @@ -133,155 +133,6 @@ interface MentionElement extends BaseElement { children: { text: string; bold?: boolean; italic?: boolean }[]; } -// Function to parse Slate document and extract mention references -export async function parseComposerDocument( - serializedDocument: string, - charmManager: CharmManager, -): Promise<{ - text: string; - mentions: string[]; - sources: { - [id: string]: { name: string; cell: Cell; recipe?: Recipe | Module }; - }; -}> { - try { - const document = JSON.parse(serializedDocument) as Descendant[]; - let fullText = ""; - const mentions: string[] = []; - const sources: { - [id: string]: { name: string; cell: Cell }; - } = {}; - const mentionIndices: Record = {}; - - // Helper to add markdown styling based on node type - const processNode = async ( - node: any, - currentList: { type: string | null; level: number } = { - type: null, - level: 0, - }, - ) => { - if (node.type === "mention") { - if (node.id) { - // Add to mentions list if not already present - if (!mentionIndices[node.id]) { - mentions.push(node.id); - - // Create bibliography entry - const bibIndex = Object.keys(sources).length + 1; - const charm = await charmManager.get(node.id); - if (!charm) { - throw new Error(`Charm not found for mention ${node.id}`); - } - - sources[node.id] = { - name: node.character || `Reference ${bibIndex}`, - cell: charm, - }; - - mentionIndices[node.id] = bibIndex; - } - - // Add reference in markdown format - fullText += `[${node.character}](charm://${node.id})`; - } else { - // Handle mentions without explicit IDs (plain text mentions) - fullText += `@${node.character}`; - } - } else if (node.text !== undefined) { - // Handle text with formatting - let textContent = node.text; - if (node.bold) textContent = `**${textContent}**`; - if (node.italic) textContent = `*${textContent}*`; - fullText += textContent; - } else if (node.children) { - // Handle block elements with markdown syntax - switch (node.type) { - case "heading-one": - fullText += "# "; - break; - case "heading-two": - fullText += "## "; - break; - case "heading-three": - fullText += "### "; - break; - case "heading-four": - fullText += "#### "; - break; - case "heading-five": - fullText += "##### "; - break; - case "heading-six": - fullText += "###### "; - break; - case "block-quote": - fullText += "> "; - break; - case "bulleted-list": - // Just process children - the list items will add the markers - for (const child of node.children) { - await processNode(child, { - type: "bulleted-list", - level: currentList.level + 1, - }); - } - return; // Skip the default children processing below - case "list-item": - fullText += "* "; - break; - } - - // Process children - for (const child of node.children) { - await processNode(child, currentList); - } - - // Add appropriate line breaks after block elements - if (node.type && node.type !== "list-item") { - fullText += "\n\n"; - } else if (node.type === "list-item") { - fullText += "\n"; - } - } - }; - - // Process each node sequentially with await - for (const node of document) { - await processNode(node); - } - - return { - text: fullText.trim(), // Remove extra whitespace - mentions, - sources, - }; - } catch (error) { - console.error("Failed to parse document:", error); - return { text: "", mentions: [], sources: {} }; - } -} - -// Helper function to replace mentions with their actual content -export function replaceMentionsWithContent( - parsedDocument: { text: string; mentions: string[] }, - mentionContent: Record, -): string { - let result = parsedDocument.text; - - // Replace each mention with its content - for (const mentionId of parsedDocument.mentions) { - const content = mentionContent[mentionId]; - if (content) { - // Find the mention pattern in the text and replace it with content - const mentionRegex = new RegExp(`@[^@]+(#${mentionId})\\)`, "g"); - result = result.replace(mentionRegex, content); - } - } - - return result; -} - interface BulletedListElement extends BaseElement { type: "bulleted-list"; children: Descendant[]; diff --git a/jumble/src/components/SpecPreview.tsx b/jumble/src/components/SpecPreview.tsx index e76fdf2b7..912e733b2 100644 --- a/jumble/src/components/SpecPreview.tsx +++ b/jumble/src/components/SpecPreview.tsx @@ -1,84 +1,267 @@ -import React, { useRef } from "react"; +import React, { useRef, useState } from "react"; import { DitheredCube } from "./DitherCube.tsx"; import { animated, useSpring, useTransition } from "@react-spring/web"; +import { ToggleButton } from "./common/CommonToggle.tsx"; +import type { + ExecutionPlan, + WorkflowForm, + WorkflowType, +} from "@commontools/charm"; +import { JSONSchema } from "@commontools/builder"; interface SpecPreviewProps { - spec?: string; - plan?: string; + form: Partial; loading: boolean; + classificationLoading?: boolean; // Separate loading state for classification + planLoading?: boolean; // Separate loading state for plan generation visible: boolean; floating?: boolean; + onWorkflowChange?: (workflow: WorkflowType) => void; + onFormChange?: (formData: Partial) => void; // Callback to expose form data +} + +// Accordion component for collapsible sections +interface AccordionProps { + title: React.ReactNode; + children: React.ReactNode; + defaultOpen?: boolean; + badge?: React.ReactNode; +} + +function Accordion( + { title, children, defaultOpen = false, badge }: AccordionProps, +) { + const [isOpen, setIsOpen] = useState(defaultOpen); + + // Force a rerender when children content changes to fix animation issues + const childrenContentKey = React.useMemo(() => { + return typeof children === "string" ? children : JSON.stringify( + React.Children.toArray(children).map((child) => + React.isValidElement(child) ? child.key : child + ), + ); + }, [children]); + + const contentStyles = useSpring({ + from: { + opacity: 0, + height: 0, + transform: "translateY(-10px)", + overflow: "hidden", + visibility: "hidden", + }, + to: { + opacity: isOpen ? 1 : 0, + height: isOpen ? "auto" : 0, + transform: isOpen ? "translateY(0)" : "translateY(-10px)", + overflow: "hidden", + visibility: isOpen ? "visible" : "hidden", + }, + // Reset animation when content changes to avoid stale animations + reset: true, + // Only animate when closing, immediate when opening to avoid height calculation issues + immediate: !isOpen, + config: { + tension: 300, + friction: 26, + clamp: true, + }, + }); + + // Force update the accordion when content changes + React.useEffect(() => { + // Intentionally empty, just to trigger a re-render + console.log("Accordion content changed:", childrenContentKey); + }, [childrenContentKey]); + + // Compact accordion with minimal styling + return ( +
+ + {/* Simplified rendering that doesn't use react-spring for height */} + {isOpen && ( +
+ {children} +
+ )} +
+ ); } export function SpecPreview({ - spec, - plan, + form, loading, + classificationLoading = false, + planLoading = false, visible, floating = false, + onWorkflowChange, + onFormChange, }: SpecPreviewProps) { - const hasContent = loading || plan || spec; + const hasContent = + (loading || form.classification || form.plan?.steps || form.plan?.spec) && + visible; // Create a reference to measure content height const contentRef = useRef(null); - // Calculate different heights for different states - const loaderHeight = 80; // Height for just the loader (48px cube + padding) + // Calculate different heights for different states (more compact) + const loaderHeight = 60; // Height for just the loader (smaller cube + padding) const maxContentHeight = floating - ? 200 + ? 280 : typeof window !== "undefined" - ? Math.min(300, globalThis.innerHeight * 0.5) - : 200; + ? Math.min(260, globalThis.innerHeight * 0.45) + : 280; + + // Force a re-render when any of these change + React.useEffect(() => { + // This effect just forces a re-render + console.log("Content/Progress changed:", { + hasContent, + form, + }); + + // Force a re-render when plan data arrives + // if (plan && progress.plan) { + // const forceUpdate = setTimeout(() => { + // console.log("Force updating component due to plan data"); + // }, 50); + // return () => clearTimeout(forceUpdate); + // } + }, [hasContent, form]); - // Container animation that handles visibility and dimensions + // Directly set the height style without animation + const containerHeight = React.useMemo(() => { + console.log("Recalculating container height", { + visible, + hasContent, + loading, + classification: !!form.classification, + plan: !!form.plan?.steps, + spec: !!form.plan?.spec, + maxContentHeight, + }); + + // Never show content if not visible or no actual content to display + if (!visible || !hasContent) { + console.log("Container hidden, height: 0"); + return 0; + } + + // If we're loading and no progress, show minimal height + if (loading && !form.classification) { + console.log("Loading state, height:", loaderHeight); + return loaderHeight; + } + + // If we have a complete plan, show full height + if (form.plan && form.plan.steps && form.plan.spec) { + console.log("Full plan state, height:", maxContentHeight); + return maxContentHeight; + } + + // If we only have classification, show half height + if (form.classification) { + const height = maxContentHeight / 3 * 2; + console.log("Classification only state, height:", height); + return height; + } + + // Default height for other cases + console.log("Default state, height:", maxContentHeight); + return maxContentHeight; + }, [ + visible, + hasContent, + loading, + form.classification, + form.plan?.steps, + form.plan?.spec, + loaderHeight, + maxContentHeight, + ]); + + console.log("containerHeight", containerHeight); + + // Create a key that changes when progress state changes to force re-renders + const progressKey = `${Boolean(form.classification)}-${ + Boolean(form.plan?.steps) + }-${Boolean(form.plan?.spec)}-${Boolean(form.plan?.steps)}-${ + Boolean(form.plan?.spec) + }`; + + // Container animation that handles visibility only const containerSpring = useSpring({ opacity: visible && hasContent ? 1 : 0, transform: visible && hasContent ? "translateY(0%)" : "translateY(-20%)", - // Adjust height based on loading state - height: !visible || !hasContent - ? 0 - : loading - ? loaderHeight - : maxContentHeight, width: visible && hasContent ? "100%" : "95%", + height: containerHeight, config: { tension: 280, friction: 24, }, + // Don't reset on height changes to allow smooth transitions + reset: false, + // Remove key dependency on progressKey to prevent animation resets }); - // Content transition between loading and content - const contentTransition = useTransition(loading, { - from: { opacity: 0, transform: "scale(0.9)" }, - enter: { opacity: 1, transform: "scale(1)" }, - leave: { - opacity: 0, - transform: "scale(0.9)", - position: "absolute", - top: 0, - left: 0, - right: 0, - }, - config: { - tension: 300, - friction: 26, - }, - }); - - // Text reveal animation + // Text reveal animation - updates based on progress state not just loading const textSpring = useSpring({ - opacity: !loading && visible ? 1 : 0, - transform: !loading && visible ? "translateY(0)" : "translateY(10px)", + opacity: (visible && (!loading || form.classification)) ? 1 : 0, + transform: (visible && (!loading || form.classification)) + ? "translateY(0)" + : "translateY(10px)", config: { tension: 300, friction: 20, }, + // Reset animation when progress changes + reset: true, + // Add key to force update when progress changes + key: progressKey, }); const containerClasses = floating ? "preview-container border border-2 fixed z-50 bg-gray-200" : "preview-container border-t-2 border-black pt-2 bg-gray-200 "; + // Format the confidence as a percentage + const confidencePercentage = Math.round( + (form.classification?.confidence ?? 0) * 100, + ); + + if ( + !form.plan?.spec && (!form.plan?.steps || form.plan?.steps.length === 0) && + !form.classification && + !loading && !planLoading + ) { + return null; + } + return ( o === 0 ? "hidden" : "visible" ), pointerEvents: containerSpring.opacity.to((o) => o === 0 ? "none" : "auto" ), + // Set an explicit height to override the reactive value if needed + height: containerHeight, + // Add explicit transition for height - this is key to smooth animation + transition: "height 500ms ease-in-out, opacity 300ms ease-in-out", }} > -
+
- {contentTransition((style, isLoading) => - isLoading - ? ( - - - - ) - : ( - - {plan && ( -
-
PLAN
-
+ {/* Only show main loading spinner while we wait for classification */} + {loading && !form.classification + ? ( +
+ +
+ ) + : ( +
+ {/* Workflow Classification Section */} + {(classificationLoading || + !form.classification?.workflowType) + ? ( +
+ + + Classifying workflow... + +
+ ) + : ( + <> +
+
+ + onWorkflowChange?.(value as WorkflowType)} + size="small" + className="w-full" + /> +
+ + {/* Compact workflow explanation */} + { + /*
+ {workflowType === "fix" && + "🛠️ Preserves existing spec, only modifies code"} + {workflowType === "edit" && + "✏️ Preserves data structure, updates functionality"} + {workflowType === "imagine" && + "🔄 Creates new spec with potentially different schema"} +
*/ + } +
+ + {/* Show plan and spec in a 2-column layout */} + { +
+ {/* Spec Section */} + {form.classification?.workflowType !== "fix" + ? ( +
+
+ SPEC +
+ {/* Show spec when available, otherwise loading */} + {form.plan?.spec + ? ( +
+ {form.plan?.spec} +
+ ) + : ( +
+ + + Generating... + +
+ )} +
+ ) + : ( +
+
+ ORIGINAL SPEC{" "} + + (preserved) + +
+ {form.plan?.spec + ? ( +
+ {form.plan?.spec} +
+ ) + : ( +
+ Loading original specification... +
+ )} +
+ )} + {/* Plan Section */} +
+
+ PLAN +
+ {/* Show loading spinner whenever plan is still loading */} + {(loading || planLoading) && !form.plan?.spec + ? ( +
+ + + Generating... + +
+ ) + : form.plan?.steps + ? ( +
+ {form.plan?.steps.map((step, index) => ( +
+ + {index + 1}. + {" "} + {step} +
+ ))} +
+ ) + : ( +
+ Plan will appear here... +
+ )} +
+
+ } + + )} + + {/* Classification Reasoning Accordion */} + {form.classification?.reasoning && ( +
+ Reasoning + + {form.classification?.confidence > 0 && ( + 0.7 + ? "text-green-700" + : "text-amber-600" + }`} + > + ({confidencePercentage}% confidence) + + )} +
+ } + defaultOpen={false} + badge={null} > - {plan} - -
- )} - {spec && ( -
-
SPEC
-
+ {form.classification?.reasoning} +
+ + )} + + {form.plan?.dataModel && ( + Data Model} + defaultOpen={false} + badge={null} > - {spec} - -
- )} - {!spec && !plan && ( - - Your specification preview will appear here as you type... - - )} - - ) + 
+                          {form.plan.dataModel}
+
+ + )} + + {/* Empty state message */} + {!form.plan?.spec && !form.plan?.steps && + !classificationLoading && !planLoading && + ( + + Your preview will appear here as you type... + + )} +
+ )} +
)}
diff --git a/jumble/src/components/__tests__/workflow-commands.test.ts b/jumble/src/components/__tests__/workflow-commands.test.ts new file mode 100644 index 000000000..bdc771828 --- /dev/null +++ b/jumble/src/components/__tests__/workflow-commands.test.ts @@ -0,0 +1,75 @@ +import { beforeEach, describe, it } from "@std/testing/bdd"; +import { expect } from "@std/expect"; +import { assertSpyCall, spy } from "@std/testing/mock"; +// handleImagineOperation is not exported, so we'll just test the WorkflowFormData interface +import type { CommandContext } from "../commands.ts"; +import { ExecutionPlan } from "@commontools/charm"; + +// Mock the dependencies +const mockImagine = spy(() => Promise.resolve({ entityId: "mocked-charm-id" })); +const mockModifyCharm = spy(() => + Promise.resolve({ entityId: "mocked-modified-charm-id" }) +); + +// Mock the imports +const mockImport = { + "@commontools/charm": { + imagine: mockImagine, + modifyCharm: mockModifyCharm, + }, +}; + +describe("Workflow Commands", () => { + let mockContext: Partial; + + beforeEach(() => { + // Reset mocks + mockImagine.calls = []; + mockModifyCharm.calls = []; + + // Create mock context with the necessary properties + mockContext = { + charmManager: { + get: () => Promise.resolve({ entityId: "existing-charm-id" }), + } as any, + navigate: spy(() => {}), + focusedCharmId: null, + focusedReplicaId: "test-replica", + setLoading: spy(() => {}), + setOpen: spy(() => {}), + previewForm: undefined, + }; + }); + + describe("handleImagineOperation with workflow form data", () => { + it("should use workflow data from form for commands", () => { + // This test verifies that handleImagineOperation correctly uses + // the workflow form data from the context + + // Define what we'd expect handleImagineOperation to do with + // the workflow form data + + // A real implementation would verify: + // 1. That workflowForm.workflowType is used to determine the correct operation + // 2. That workflowForm.plan is properly converted to the expected format + // 3. That additional data like spec and schema are passed through + + const workflowFormData: ExecutionPlan = { + workflowType: "edit", + steps: ["Step 1", "Step 2"], + spec: "Test specification", + dataModel: "an email", + }; + + // In a real test with proper mocking, we would: + // 1. Set this data in the context + // 2. Call handleImagineOperation + // 3. Verify that modifyCharm or imagine were called with the correct arguments + + // Since we can't easily mock imports in this environment, we'll just + // verify the basic structure + expect(workflowFormData.workflowType).toBe("edit"); + expect(workflowFormData.steps).toEqual(["Step 1", "Step 2"]); + }); + }); +}); diff --git a/jumble/src/components/__tests__/workflow-form.test.ts b/jumble/src/components/__tests__/workflow-form.test.ts new file mode 100644 index 000000000..d4d1749b6 --- /dev/null +++ b/jumble/src/components/__tests__/workflow-form.test.ts @@ -0,0 +1,25 @@ +import { describe, it } from "@std/testing/bdd"; +import { expect } from "@std/expect"; +import { ExecutionPlan, WorkflowType } from "@commontools/charm"; + +describe("WorkflowFormData", () => { + it("should properly structure workflow form data", () => { + // Test with a basic form data object + const formData: ExecutionPlan = { + workflowType: "edit", + steps: ["Step 1", "Step 2"], + spec: "Test specification", + dataModel: "an email", + }; + + // Ensure properties have the expected types + expect(typeof formData.workflowType).toBe("string"); + expect(Array.isArray(formData.steps)).toBe(true); + expect(typeof formData.spec).toBe("string"); + expect(typeof formData.dataModel).toBe("string"); + + // Ensure workflowType is a valid type + const validTypes: WorkflowType[] = ["fix", "edit", "imagine"]; + expect(validTypes).toContain(formData.workflowType); + }); +}); diff --git a/jumble/src/components/commands.ts b/jumble/src/components/commands.ts index 98e4e8922..7b6aa8b71 100644 --- a/jumble/src/components/commands.ts +++ b/jumble/src/components/commands.ts @@ -6,15 +6,21 @@ import { Charm, CharmManager, compileAndRunRecipe, - iterate, + createWorkflowForm, renameCharm, + WorkflowForm, + WorkflowType, +} from "@commontools/charm"; +import { + executeWorkflow, + ExecutionPlan, + modifyCharm, } from "@commontools/charm"; // Import NavigateFunction from our types rather than directly from react-router-dom import type { NavigateFunction } from "react-router-dom"; import { charmId } from "@/utils/charms.ts"; import { NAME } from "@commontools/builder"; import { EntityId, isStream } from "@commontools/runner"; -import { extendCharm } from "@/utils/charm-operations.ts"; import { BackgroundJob } from "@/contexts/BackgroundTaskContext.tsx"; import { startCharmIndexing } from "@/utils/indexing.ts"; import { createPath, createPathWithHash, ROUTES } from "@/routes.ts"; @@ -133,8 +139,6 @@ export interface CommandContext { setOpen: (open: boolean) => void; setMode: (mode: CommandMode) => void; loading: boolean; - preferredModel?: string; - setPreferredModel: (model: string) => void; setLoading: (loading: boolean) => void; setModeWithInput: (mode: CommandMode, initialInput: string) => void; listJobs: () => BackgroundJob[]; @@ -143,6 +147,7 @@ export interface CommandContext { addJobMessage: (jobId: string, message: string) => void; updateJobProgress: (jobId: string, progress: number) => void; commandPathIds: string[]; + previewForm?: Partial; } export type CommandMode = @@ -249,33 +254,64 @@ async function handleExecuteCharmAction(deps: CommandContext) { } // Command handlers -async function handleNewCharm( +// Unified handler for charm operations using the imagine function +async function handleImagineOperation( deps: CommandContext, input: string, - sources?: SourceSet, + workflowType?: WorkflowType, // Optional workflow type override + model?: string, ) { + if (!input) return; deps.setLoading(true); try { - // Pass the goal directly to castNewRecipe, which will handle the two-phase process - const newCharm = await castNewRecipe( - deps.charmManager, - input, - grabCells(sources), - ); + let newCharm; + + // bf: I suspect this is pointless and already handled in executeWorkflow + if (deps.focusedCharmId) { + // Get the current charm + const charm = await deps.charmManager.get(deps.focusedCharmId, false); + if (!charm) { + throw new Error("Failed to load charm"); + } + + // Use modifyCharm for existing charms - this handles both iterate and extend cases + newCharm = await modifyCharm( + deps.charmManager, + input, + charm, + deps.previewForm, + model, + ); + } else { + newCharm = await executeWorkflow( + deps.charmManager, + input, + { + prefill: deps.previewForm, + model: model, + }, + ); + } + if (!newCharm) { - throw new Error("Failed to cast charm"); + throw new Error("Failed to create charm"); } + + // Navigate to the new charm const id = charmId(newCharm); if (!id || !deps.focusedReplicaId) { throw new Error("Missing charm ID or replica name"); } + deps.navigate( createPath("charmShow", { charmId: id, replicaName: deps.focusedReplicaId, }), ); + } catch (error) { + console.error("Imagine operation error:", error); } finally { deps.setLoading(false); deps.setOpen(false); @@ -324,54 +360,9 @@ async function handleSearchCharms(deps: CommandContext) { } } -async function handleEditRecipe( - deps: CommandContext, - input: string | undefined, -) { - if (!input || !deps.focusedCharmId || !deps.focusedReplicaId) return; - deps.setLoading(true); - - const charm = (await deps.charmManager.get(deps.focusedCharmId, false))!; - try { - const newCharm = await iterate( - deps.charmManager, - charm, - input, - false, - deps.preferredModel, - ); - deps.navigate(createPath("charmShow", { - charmId: charmId(newCharm)!, - replicaName: deps.focusedReplicaId!, - })); - } catch (e) { - console.error("Error editing recipe:", e); - } finally { - deps.setLoading(false); // FIXME(ja): load status should update on exception - deps.setOpen(false); - } -} +// handleEditRecipe now uses handleImagineOperation with a 'fix' workflow type -async function handleExtendRecipe( - deps: CommandContext, - input?: string, - sources?: SourceSet, -) { - if (!input || !deps.focusedCharmId || !deps.focusedReplicaId) return; - deps.setLoading(true); - const newCharm = await extendCharm( - deps.charmManager, - deps.focusedCharmId, - input, - grabCells(sources), - ); - deps.navigate(createPath("charmShow", { - charmId: charmId(newCharm)!, - replicaName: deps.focusedReplicaId, - })); - deps.setLoading(false); - deps.setOpen(false); -} +// handleExtendRecipe now uses handleImagineOperation with an 'edit' workflow type async function handleRenameCharm( deps: CommandContext, @@ -449,7 +440,10 @@ async function handleImportJSON(deps: CommandContext) { const title = prompt("Enter a title for your imported recipe:"); if (!title) return; - const newCharm = await castNewRecipe(deps.charmManager, title, data); + const form = createWorkflowForm({ input: title }); + form.input.references = data; + + const newCharm = await castNewRecipe(deps.charmManager, form); if (!newCharm) throw new Error("Failed to create new charm"); const id = charmId(newCharm); @@ -514,44 +508,6 @@ async function handleLoadRecipe(deps: CommandContext) { } } -async function handleSelectModel(deps: CommandContext) { - deps.setLoading(true); - try { - const response = await fetch("/api/ai/llm/models"); - const models = await response.json(); - - const modelOptions = Object.entries(models).map(( - [key, model]: [string, any], - ) => ({ - id: key, - title: - `${key} (${model.capabilities.contextWindow.toLocaleString()} tokens)`, - value: { - id: key, - ...model, - }, - })); - - deps.setMode({ - type: "select", - command: { - id: "model-select", - type: "select", - title: "Select Model", - handler: (selectedModel) => { - deps.setPreferredModel(selectedModel.id); - deps.setOpen(false); - }, - }, - options: modelOptions, - }); - } catch (error) { - console.error("Failed to fetch models:", error); - } finally { - deps.setLoading(false); - } -} - function navigateToCharm(charm: Charm | EntityId, deps: CommandContext) { if (!charm) { throw new Error("Failed to cast charm"); @@ -773,7 +729,8 @@ export function getCommands(deps: CommandContext): CommandItem[] { type: "input", title: "New Charm", group: "Create", - handler: (input, data) => handleNewCharm(deps, input, data), + handler: (input, data) => + handleImagineOperation(deps, input, data, "imagine"), }, { id: "search-charms", @@ -872,20 +829,11 @@ export function getCommands(deps: CommandContext): CommandItem[] { { id: "edit-recipe", type: "input", - title: `Iterate on Recipe`, + title: `Modify Charm`, group: "Edit", predicate: !!deps.focusedCharmId, placeholder: "What would you like to change?", - handler: (input) => handleEditRecipe(deps, input), - }, - { - id: "extend-recipe", - type: "input", - title: `Extend Recipe`, - group: "Edit", - predicate: !!deps.focusedCharmId, - placeholder: "What you like to see?", - handler: (input, data) => handleExtendRecipe(deps, input, data), + handler: (input, data) => handleImagineOperation(deps, input, data), }, { id: "delete-charm", @@ -1150,40 +1098,6 @@ export function getCommands(deps: CommandContext): CommandItem[] { }, ], }, - { - id: "select-model", - type: "action", - title: "Select AI Model", - group: "Settings", - handler: () => handleSelectModel(deps), - }, - { - id: "edit-recipe-voice", - type: "transcribe", - title: `Iterate (Voice)${ - deps.preferredModel ? ` (${deps.preferredModel})` : "" - }`, - group: "Edit", - predicate: !!deps.focusedCharmId, - handler: (transcription) => { - if (!transcription) return; - - const commands = getCommands(deps); - const editRecipeCommand = commands.find((cmd) => - cmd.id === "edit-recipe" - )!; - - deps.setModeWithInput( - { - type: "input", - command: editRecipeCommand, - placeholder: "What would you like to change?", - preserveInput: true, - }, - transcription, - ); - }, - }, { id: "background-jobs", type: "menu", diff --git a/jumble/src/hooks/__tests__/use-live-spec-preview.test.ts b/jumble/src/hooks/__tests__/use-live-spec-preview.test.ts new file mode 100644 index 000000000..925115003 --- /dev/null +++ b/jumble/src/hooks/__tests__/use-live-spec-preview.test.ts @@ -0,0 +1,118 @@ +import { beforeEach, describe, it } from "@std/testing/bdd"; +import { expect } from "@std/expect"; +import { assertSpyCall, spy } from "@std/testing/mock"; +import { useLiveSpecPreview } from "../use-live-spec-preview.ts"; + +// We'll need to stub or mock some external dependencies +// since we can't use Jest mocking in Deno + +// Mock the CommonTools charm module +const mockGenerateWorkflowPreview = spy(() => + Promise.resolve({ + workflowType: "edit", + confidence: 0.8, + plan: ["Step 1", "Step 2"], + spec: "Preview specification", + updatedSchema: { type: "object", properties: {} }, + reasoning: "Classification reasoning", + processedInput: "processed text", + mentionedCharms: {}, + }) +); + +class MockReactHooks { + values: Record = {}; + stateSetter: Record void> = {}; + + useState(initialValue: T): [T, (value: T) => void] { + const key = Math.random().toString(); + this.values[key] = initialValue; + this.stateSetter[key] = (newValue: T) => { + this.values[key] = newValue; + }; + return [this.values[key], this.stateSetter[key]]; + } + + useCallback any>(callback: T): T { + return callback; + } + + useEffect(effect: () => void | (() => void), deps?: any[]): void { + effect(); + } + + useMemo(factory: () => T, deps?: any[]): T { + return factory(); + } +} + +// Test implementation +describe("useLiveSpecPreview", () => { + let reactHooks: MockReactHooks; + + beforeEach(() => { + reactHooks = new MockReactHooks(); + mockGenerateWorkflowPreview.calls = []; + }); + + it("should provide form data with default values when input is empty", () => { + // Create a test hook implementation + const hook = { + useState: reactHooks.useState.bind(reactHooks), + useCallback: reactHooks.useCallback.bind(reactHooks), + useEffect: reactHooks.useEffect.bind(reactHooks), + useMemo: reactHooks.useMemo.bind(reactHooks), + }; + + // Mock CharmManager + const mockCharmManager = { + get: () => Promise.resolve(null), + getCharms: () => ({ get: () => [] }), + }; + + // Test initialization + const result = { + workflowType: "edit", + previewSpec: "", + previewPlan: "", + workflowConfidence: 0, + formData: { + workflowType: "edit", + plan: "", + spec: "", + schema: undefined, + }, + }; + + // Verify form data has expected structure + expect(result.formData).toBeDefined(); + expect(result.formData.workflowType).toBe("edit"); + expect(result.formData.plan).toBe(""); + }); + + it("should include form data in returned object", () => { + // Create a simple mock of what the hook returns + const hookResult = { + previewSpec: "Test spec", + previewPlan: ["Step 1", "Step 2"], + workflowType: "edit", + formData: { + workflowType: "edit", + plan: ["Step 1", "Step 2"], + spec: "Test spec", + }, + }; + + // Verify the formData shape matches our expectations + expect(hookResult.formData).toEqual({ + workflowType: "edit", + plan: ["Step 1", "Step 2"], + spec: "Test spec", + }); + + // Verify it matches the rest of the data + expect(hookResult.formData.workflowType).toBe(hookResult.workflowType); + expect(hookResult.formData.plan).toBe(hookResult.previewPlan); + expect(hookResult.formData.spec).toBe(hookResult.previewSpec); + }); +}); diff --git a/jumble/src/hooks/use-live-spec-preview.ts b/jumble/src/hooks/use-live-spec-preview.ts index 7bf179f47..fe4983a7d 100644 --- a/jumble/src/hooks/use-live-spec-preview.ts +++ b/jumble/src/hooks/use-live-spec-preview.ts @@ -1,64 +1,327 @@ import { generateSpecAndSchema } from "@commontools/llm"; import { useCallback, useEffect, useState } from "react"; import { useDebounce } from "./use-debounce.ts"; +import { useRef } from "react"; +import { + CharmManager, + createWorkflowForm, + fillClassificationSection, + fillPlanningSection, + formatPromptWithMentions as formatMentions, + parseComposerDocument, + processInputSection, + WorkflowForm, + WorkflowType, +} from "@commontools/charm"; +import { Cell } from "@commontools/runner"; +import { Charm, formatPromptWithMentions } from "@commontools/charm"; +import { JSONSchema } from "@commontools/builder"; export type SpecPreviewModel = "fast" | "think"; /** - * Hook for generating a live preview of the spec as the user types + * Progress state for the preview generation + * Used to track which parts of the preview have been generated + */ +export interface PreviewProgress { + classification: boolean; + plan: boolean; + spec: boolean; +} + +/** + * Hook for generating a live preview of the spec and plan as the user types, + * along with workflow type classification. * @param input The user's input text + * @param charmManager The CharmManager instance for handling mentions * @param enabled Whether the preview is enabled * @param debounceTime The debounce time in ms * @param model The model to use ("fast" or "think") + * @param currentCharm Optional current charm for context */ export function useLiveSpecPreview( input: string, + charmManager: CharmManager, // Properly typed CharmManager instance enabled: boolean = true, - debounceTime: number = 250, + debounceTime: number = 300, // Increased to 300ms as requested model: SpecPreviewModel = "think", + currentCharm?: Cell, ) { - const [loading, setLoading] = useState(false); - const [previewSpec, setPreviewSpec] = useState(""); - const [previewPlan, setPreviewPlan] = useState(""); + // Track loading states separately for classification and plan generation + const [classificationLoading, setClassificationLoading] = useState(false); + const [planLoading, setPlanLoading] = useState(false); + const [loading, setLoading] = useState(false); // Combined loading state for compatibility + + // Track which parts of the preview have been generated + const [progress, setProgress] = useState({ + classification: false, + plan: false, + spec: false, + }); + + // Track the current generation process to cancel outdated requests + const currentGenerationRef = useRef(0); + + // Track the text input that generated the current displayed results + const [lastSuccessfulText, setLastSuccessfulText] = useState(""); + + // Track if input is a completely new topic vs. refinement of existing one + const isCompleteTopic = useRef(true); + + // Preview content state + const [previewForm, setPreviewForm] = useState>({}); const debouncedInput = useDebounce(input, debounceTime); // Map the model type to actual model identifiers const getModelId = useCallback((modelType: SpecPreviewModel) => { return modelType === "fast" - ? "google:gemini-2.0-flash-thinking" + ? "gemini-2.5-pro" : "anthropic:claude-3-7-sonnet-latest"; }, []); const generatePreview = useCallback(async (text: string) => { - if (!text.trim() || !enabled) { - setPreviewSpec(""); - setPreviewPlan(""); + console.log( + "generatePreview called with:", + text?.substring(0, 30), + "enabled:", + enabled, + ); + + // Create a unique ID for this generation process + const generationId = Date.now(); + currentGenerationRef.current = generationId; + + // Reset states based on whether this is a refinement or new topic + const resetState = () => { + const textInvalid = !text || !text.trim() || text.trim().length < 10 || + !enabled; + const isNewTopic = isCompleteTopic.current; + + console.log("Reset state check:", { + textInvalid, + isNewTopic, + lastSuccessfulText: lastSuccessfulText.substring(0, 20) + "...", + currentText: text.substring(0, 20) + "...", + }); + + // Always reset content when starting a completely new topic + if (isNewTopic) { + console.log("Resetting preview content - new topic detected"); + setPreviewForm({}); + } + + // Always reset loading states + setClassificationLoading(false); + setPlanLoading(false); + setLoading(false); + + // Only reset progress flags if: + // 1. Text is invalid (too short/empty/disabled) OR + // 2. This is a completely new topic (not a refinement) + if (textInvalid || isNewTopic) { + console.log( + "Full reset of progress flags - " + + (textInvalid ? "invalid input" : "new topic"), + ); + setProgress({ + classification: false, + plan: false, + spec: false, + }); + } else { + console.log("Preserving progress state - refinement of existing text"); + } + }; + + // Helper function to check if this generation process is still current + const isCurrentGeneration = () => + currentGenerationRef.current === generationId; + + // Don't generate previews for short inputs (less than 16 chars) or if disabled + // This helps prevent unnecessary API calls and LLM requests + if (!text || !text.trim() || text.trim().length < 16 || !enabled) { + console.log("Skipping preview generation - text too short or disabled"); + resetState(); return; } + console.log("Starting preview generation..."); + + // Set loading states to true at the start, but DON'T reset progress states + // This is critical to prevent erasing progress when user is typing quickly + setClassificationLoading(true); + setPlanLoading(true); setLoading(true); + + // IMPORTANT: We're NOT resetting progress flags here anymore + // Only show loading indicators but keep any existing progress + console.log( + "Starting new request but preserving progress state:", + progress, + ); + + // Instead, set loading without touching progress + // If previous sections completed, they should stay completed + try { - // Generate spec and plan from input using the selected model + // Define a shared model ID for both calls const modelId = getModelId(model); - const result = await generateSpecAndSchema(text, undefined, modelId); - setPreviewSpec(result.spec); - setPreviewPlan(result.plan); + + let form = createWorkflowForm({ + input: text, + charm: currentCharm, + modelId, + }); + setPreviewForm(form); + + form = await processInputSection(charmManager, form); + setPreviewForm(form); + console.log("formatted input", form); + + // Check if this is still the current generation before proceeding + if (!isCurrentGeneration()) { + console.log("Abandoning outdated generation process"); + return; + } + + form = await fillClassificationSection(form); + setPreviewForm(form); + setClassificationLoading(false); + setProgress((prev) => ({ ...prev, classification: true })); + + // Important: Turn off the main loading state after classification + // so UI can show partial results while plan and spec are loading + setLoading(false); + + console.log("classified task", form); + + // Check if this is still the current generation before proceeding + if (!isCurrentGeneration()) { + console.log("Abandoning outdated generation process"); + return; + } + + form = await fillPlanningSection(form); + setPreviewForm(form); + + console.log("got plan", form); + + // Record this successful text for future comparison + setLastSuccessfulText(text); + + // Clear any remaining loading states + setLoading(false); } catch (error) { - console.error("Error generating spec preview:", error); + console.error("Error generating preview:", error); } finally { - setLoading(false); + // Only reset loading states if this is still the current generation + if (isCurrentGeneration()) { + setLoading(false); + // Reset any lingering loading states to ensure UI doesn't get stuck + setClassificationLoading(false); + setPlanLoading(false); + } } - }, [enabled, model, getModelId]); + }, [enabled, model, getModelId, currentCharm, charmManager]); + // Check if input is a significant change from previous content useEffect(() => { - generatePreview(debouncedInput); - }, [debouncedInput, generatePreview]); + if (!lastSuccessfulText || !debouncedInput) return; + + // Determine if this is a refinement of the same topic or a completely new topic + // A simple heuristic: if 50% or more of the content has changed, consider it a new topic + const similarity = calculateTextSimilarity( + lastSuccessfulText, + debouncedInput, + ); + isCompleteTopic.current = similarity < 0.5; + + console.log( + "Text similarity:", + similarity, + isCompleteTopic.current + ? "NEW TOPIC - Will reset all progress" + : "Refinement - Will preserve progress", + ); + }, [debouncedInput, lastSuccessfulText]); + + // Calculate text similarity as a rough percentage of how much text is preserved + const calculateTextSimilarity = (textA: string, textB: string): number => { + if (!textA || !textB) return 0; + + // Use a simple character-based comparison for efficiency + const lengthA = textA.length; + const lengthB = textB.length; + const maxLength = Math.max(lengthA, lengthB); + + // Early exit for empty strings + if (maxLength === 0) return 1; + + // If lengths are very different, likely a new topic + if (Math.abs(lengthA - lengthB) / maxLength > 0.5) return 0.25; + + // Simple character-based similarity for quick comparison + let commonChars = 0; + const minLength = Math.min(lengthA, lengthB); + + for (let i = 0; i < minLength; i++) { + if (textA[i] === textB[i]) commonChars++; + } + + return commonChars / maxLength; + }; + + // Generate preview when input changes + useEffect(() => { + console.log("debouncedInput changed:", debouncedInput); + + async function fx() { + const { text } = await parseComposerDocument(debouncedInput); + if (text && text.trim().length >= 10 && enabled) { + console.log("Generating preview for:", text); + generatePreview(debouncedInput); + } else { + console.log( + "Not generating preview. Length:", + text?.trim().length, + "Enabled:", + enabled, + ); + } + } + + fx(); + }, [debouncedInput, generatePreview, enabled, charmManager]); + + // Function to manually change the workflow type + const setWorkflowType = useCallback((type: WorkflowType) => { + // Create a unique ID for this generation process + const generationId = Date.now(); + currentGenerationRef.current = generationId; + + // Helper function to check if this generation process is still current + const isCurrentGeneration = () => + currentGenerationRef.current === generationId; + + // Update the workflow type state immediately + setPreviewForm({ + ...previewForm, + classification: { + workflowType: type, + confidence: 1.0, + reasoning: "Manual override", + }, + }); + }, [input, currentCharm, model, getModelId, charmManager]); return { - previewSpec, - previewPlan, + previewForm, loading, + classificationLoading, + planLoading, regenerate: () => generatePreview(input), model, + setWorkflowType, + progress, }; } diff --git a/jumble/src/utils/charm-operations.ts b/jumble/src/utils/charm-operations.ts index 913afc1e6..929ebd66a 100644 --- a/jumble/src/utils/charm-operations.ts +++ b/jumble/src/utils/charm-operations.ts @@ -1,20 +1,20 @@ -import { castNewRecipe, Charm, CharmManager } from "@commontools/charm"; +import { + Charm, + CharmManager, + extendCharm as charmExtendCharm, +} from "@commontools/charm"; import { Cell } from "@commontools/runner"; -import { getCharmNameAsCamelCase } from "@/utils/format.ts"; -export async function extendCharm( +/** + * @deprecated Use the extendCharm function from @commontools/charm instead + * This function is kept for backward compatibility but will be removed in a future version + */ +export function extendCharm( charmManager: CharmManager, focusedCharmId: string, goal: string, cells?: Record>, ): Promise> { - const charm = (await charmManager.get(focusedCharmId, false))!; - - const shadowId = getCharmNameAsCamelCase(charm, cells ?? {}); - - return castNewRecipe( - charmManager, - goal, - { ...cells, [shadowId]: charm }, - ); + // Use the unified implementation from the charm package + return charmExtendCharm(charmManager, focusedCharmId, goal, cells); } diff --git a/jumble/src/utils/format.ts b/jumble/src/utils/format.ts index 15574a354..0a6d97cb9 100644 --- a/jumble/src/utils/format.ts +++ b/jumble/src/utils/format.ts @@ -1,7 +1,5 @@ -import { CharmManager, charmSchema } from "@commontools/charm"; import { Cell } from "@commontools/runner"; import { Module, NAME, Recipe } from "@commontools/builder"; -import { parseComposerDocument } from "@/components/Composer.tsx"; export function formatCell( cell: Cell, @@ -50,57 +48,6 @@ export function formatRecipe(recipe: Recipe | Module) { } } -export async function formatPromptWithMentions( - prompt: string, - charmManager: CharmManager, -): Promise<{ text: string; sources: Record }> { - const payload = await parseComposerDocument( - prompt, - charmManager, - ); - - // Create a mapping of IDs to source objects - const sourcesMap: Record = {}; - - // Process the text to inject IDs where mentions are - let processedText = payload.text; - - // Check if there are any sources to process - if (payload.sources && Object.keys(payload.sources).length > 0) { - // Add each source to the map - Object.entries(payload.sources).forEach(([id, source]) => { - const shadowId = getCharmNameAsCamelCase(source.cell, sourcesMap); - sourcesMap[shadowId] = source; - - // Replace the markdown link mention with the ID - // Format: [character](charm://id) - processedText = processedText.replace( - new RegExp(`\\[(.*?)\\]\\(charm://${id}\\)`, "g"), - `\`${shadowId}\``, - ); - }); - } - - return { - text: processedText, - sources: sourcesMap, - }; -} - -export function getCharmNameAsCamelCase( - cell: Cell, - usedKeys: Record, -): string { - const charmName = toCamelCase(cell.asSchema(charmSchema).key(NAME).get()); - - let name = charmName; - let num = 0; - - while (name in usedKeys) name = charmName + `${++num}`; - - return name; -} - /** * Converts a string of multiple words into camelCase format * @param input - The string to convert @@ -112,7 +59,7 @@ export function getCharmNameAsCamelCase( * - "this-is-a-test" -> "thisIsATest" * - "already_camel_case" -> "alreadyCamelCase" */ -function toCamelCase(input: string): string { +export function toCamelCase(input: string): string { // Handle empty string case if (!input) return ""; diff --git a/jumble/src/views/CharmDetailView.tsx b/jumble/src/views/CharmDetailView.tsx index e5dce87ef..30388ee92 100644 --- a/jumble/src/views/CharmDetailView.tsx +++ b/jumble/src/views/CharmDetailView.tsx @@ -1,5 +1,6 @@ import { Charm, + ExecutionPlan, extractUserCode, extractVersionTag, generateNewRecipeVersion, @@ -7,6 +8,9 @@ import { IFrameRecipe, injectUserCode, iterate, + modifyCharm, + WorkflowForm, + WorkflowType, } from "@commontools/charm"; import { useCharmReferences } from "@/hooks/use-charm-references.ts"; import { isCell, isStream } from "@commontools/runner"; @@ -33,7 +37,6 @@ import { useCharm } from "@/hooks/use-charm.ts"; import CodeMirror from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { CharmRenderer } from "@/components/CharmRunner.tsx"; -import { extendCharm } from "@/utils/charm-operations.ts"; import { charmId } from "@/utils/charms.ts"; import { DitheredCube } from "@/components/DitherCube.tsx"; import { @@ -45,7 +48,7 @@ import { createPath } from "@/routes.ts"; import JsonView from "@uiw/react-json-view"; import { Composer, ComposerSubmitBar } from "@/components/Composer.tsx"; import { useCharmMentions } from "@/components/CommandCenter.tsx"; -import { formatPromptWithMentions } from "@/utils/format.ts"; +import { formatPromptWithMentions } from "@commontools/charm"; import { CharmLink } from "@/components/CharmLink.tsx"; import { useResizableDrawer } from "@/hooks/use-resizeable-drawer.ts"; import { SpecPreview } from "@/components/SpecPreview.tsx"; @@ -65,13 +68,16 @@ const variantModels = [ ] as const; // =================== Context for Shared State =================== +// +// TODO(bf): this is also super bloated interface CharmOperationContextType { input: string; + previewForm: Partial; setInput: (input: string) => void; selectedModel: string; setSelectedModel: (model: string) => void; - operationType: OperationType; - setOperationType: (type: OperationType) => void; + classificationLoading: boolean; // Loading state for workflow classification + planLoading: boolean; // Loading state for plan generation showVariants: boolean; setShowVariants: (show: boolean) => void; showPreview: boolean; @@ -84,13 +90,12 @@ interface CharmOperationContextType { setSelectedVariant: (variant: Cell | null) => void; expectedVariantCount: number; setExpectedVariantCount: (count: number) => void; - previewSpec: string; - previewPlan: string; isPreviewLoading: boolean; previewModel: SpecPreviewModel; setPreviewModel: (model: SpecPreviewModel) => void; handlePerformOperation: () => void; handleCancelVariants: () => void; + setWorkflowType: (workflowType: WorkflowType) => void; performOperation: ( charmId: string, input: string, @@ -255,7 +260,6 @@ function useCharmOperation() { const [selectedModel, setSelectedModel] = useState( "anthropic:claude-3-7-sonnet-latest", ); - const [operationType, setOperationType] = useState("iterate"); const [showVariants, setShowVariants] = useState(false); const [showPreview, setShowPreview] = useState(true); const [loading, setLoading] = useState(false); @@ -271,44 +275,50 @@ function useCharmOperation() { // Preview model state const [previewModel, setPreviewModel] = useState("think"); - // Live preview generation + // Live preview generation with workflow classification const { - previewSpec, - previewPlan, + previewForm, loading: isPreviewLoading, + classificationLoading, + planLoading, model, - } = useLiveSpecPreview(input, showPreview, 250, previewModel); + setWorkflowType, + } = useLiveSpecPreview( + input, + charmManager, // Explicitly pass CharmManager instance + showPreview, + 250, + previewModel, + charm || undefined, + ); - // Function that performs the selected operation (iterate or extend) + // Function that performs the selected operation using modifyCharm const performOperation = useCallback( ( charmId: string, input: string, model: string, - data: any, ) => { - if (operationType === "iterate") { - // TODO(bf): do we use @-ref data for iterate? - return charmManager.get(charmId, false).then((fetched) => { - const charm = fetched!; - return iterate( - charmManager, - charm, - input, - false, - model, - ); - }); - } else { - return extendCharm( + // First get the charm by ID + return charmManager.get(charmId, false).then((fetched) => { + if (!fetched) { + throw new Error(`Charm with ID ${charmId} not found`); + } + + // Use modifyCharm which supports all workflow types + return modifyCharm( charmManager, - charmId, input, - data, + fetched, + previewForm, + model, ); - } + }); }, - [operationType, charmManager], + [ + charmManager, + previewForm, + ], ); // Handle performing the operation @@ -316,11 +326,6 @@ function useCharmOperation() { if (!input || !charm || !paramCharmId || !replicaName) return; setLoading(true); - const { text, sources } = await formatPromptWithMentions( - input, - charmManager, - ); - const handleVariants = async () => { setVariants([]); setSelectedVariant(charm); @@ -328,9 +333,8 @@ function useCharmOperation() { const gens = variantModels.map(async (model) => { const newCharm = await performOperation( charmId(charm)!, - text, + input, model, - sources, ); // Store the variant and keep track of which model was used setVariants((prev) => [...prev, newCharm]); @@ -354,16 +358,15 @@ function useCharmOperation() { try { const newCharm = await performOperation( charmId(charm)!, - text, + input, selectedModel, - sources, ); navigate(createPath("charmShow", { charmId: charmId(newCharm)!, replicaName, })); } catch (error) { - console.error(`${operationType} error:`, error); + console.error(`performOperation error:`, error); } finally { setLoading(false); } @@ -378,7 +381,7 @@ function useCharmOperation() { performOperation, charmManager, navigate, - operationType, + previewForm, ]); const handleCancelVariants = useCallback(() => { @@ -387,13 +390,15 @@ function useCharmOperation() { setExpectedVariantCount(0); }, []); + // TODO(bf): this is stupidly bloated return { input, setInput, selectedModel, setSelectedModel, - operationType, - setOperationType, + setWorkflowType, + classificationLoading, // Add the classification loading state + planLoading, // Add the plan loading state showVariants, setShowVariants, showPreview, @@ -406,15 +411,14 @@ function useCharmOperation() { setSelectedVariant, expectedVariantCount, setExpectedVariantCount, - previewSpec, - previewPlan, + previewForm, isPreviewLoading, previewModel, setPreviewModel, handlePerformOperation, handleCancelVariants, performOperation, - }; + } as CharmOperationContextType; } // =================== Components =================== @@ -596,15 +600,11 @@ const Suggestions = () => { const { suggestions, loadingSuggestions } = useSuggestions(charm); const { setInput, - setShowVariants, - handlePerformOperation, - setOperationType, selectedModel, setLoading, setVariants, setSelectedVariant, setExpectedVariantCount, - operationType, performOperation, showVariants, } = useCharmOperationContext(); @@ -621,20 +621,13 @@ const Suggestions = () => { // React to suggestion selection const handleSuggestion = useCallback((suggestion: CharmSuggestion) => { - // Set the operation type based on suggestion type - if (suggestion.type.toLowerCase().includes("extend")) { - setOperationType("extend"); - } else { - setOperationType("iterate"); - } - // Update the input state setInput(suggestion.prompt); // Store the suggestion for the effect to handle setSelectedSuggestion(suggestion); setLoading(true); - }, [setOperationType, setInput, setLoading]); + }, [setInput, setLoading]); // Handle the actual operation when selectedSuggestion changes useEffect(() => { @@ -765,19 +758,16 @@ const OperationTab = () => { setInput, selectedModel, setSelectedModel, - operationType, - setOperationType, showVariants, setShowVariants, showPreview, - setShowPreview, loading, handlePerformOperation, - previewSpec, - previewPlan, isPreviewLoading, - previewModel, - setPreviewModel, + classificationLoading, + setWorkflowType, + planLoading, + previewForm, } = useCharmOperationContext(); const mentions = useCharmMentions(); @@ -786,23 +776,14 @@ const OperationTab = () => { return (
- setOperationType(value as OperationType)} - size="large" - className="mb-2" - /> -
{ - {/* TODO(bf): restore in https://github.com/commontoolsinc/labs/issues/876 */} - { - /*
- setShowPreview(e.target.checked)} - className="border-2 border-black mr-2" - /> - -
- - {showPreview && ( -
-
- - -
-
- )} */ - } - { {/* Content Container with single scrollbar */}
- {/* TODO(bf): restore in https://github.com/commontoolsinc/labs/issues/876 */} - { - /* */ - } + classificationLoading={classificationLoading} + planLoading={planLoading} + visible={showPreview && input.trim().length >= 16} + onWorkflowChange={setWorkflowType} + />
diff --git a/llm-workflow-design.md b/llm-workflow-design.md new file mode 100644 index 000000000..324fe3052 --- /dev/null +++ b/llm-workflow-design.md @@ -0,0 +1,167 @@ +# LLM-Based Code Generation Workflows + +## Current Architecture Analysis + +### Core Components + +1. **iterate.ts** + - Main functions: + - `iterate()`: Updates existing charms with new specs + - `castNewRecipe()`: Creates new charms from a goal + - `genSrc()`: Core function that handles LLM prompting + - Flow: user input → prepare prompt → call LLM → process response → compile recipe → run recipe + +2. **SpecPreview.tsx** + - UI component showing live preview of specifications and plans + - Connected to `useLiveSpecPreview` hook for real-time generation + +3. **iframe/prompt.ts & static.ts** + - Contains prompt templates and utilities + - `buildPrompt()`: Creates LLM requests + - `injectUserCode()`: Places generated code into template + +4. **spec-and-schema-gen.ts** + - Contains prompts for spec/schema generation + - `generateSpecAndSchema()`: Creates specifications and schemas + +5. **CharmDetailView.tsx** + - Primary UI for all operations + - Contains tabs for: Operation (iterate/extend), Code, Data + - Manages variants generation across multiple models + +### Current Workflows + +1. **Iterate Workflow** + - User edits existing charm specification + - System preserves schema and code structure + - LLM updates only user code + - Lineage tracked as "iterate" relation + +2. **Extend Workflow** + - User provides a goal with optional referenced data + - System generates spec and schema from scratch + - LLM creates new code + - Lineage tracked as "extend" relation + +3. **Live Preview** + - As user types, real-time spec/plan is generated + - Uses either "fast" or "precise" model based on user selection + +4. **Variant Generation** + - Can generate multiple versions across different models + - Models defined in `variantModels` array + +### Issues with Current Architecture + +1. **Poor Abstraction** + - Multiple entry points with overlapping functionality + - Code duplication in CharmDetailView for suggestions and direct input + - Multiple message handlers in static.ts + +2. **Schema Handling** + - Results are injected into argument schema as a hack + - Lacks clear separation between input/output schemas + +3. **Code Organization** + - Lack of unified workflow layer + - Direct coupling between UI components and LLM generation + - Hard-coded model selection in multiple places + +4. **Error Handling** + - Limited fallback mechanisms for LLM failures + - No structured validation of generated outputs + +## Proposed Architecture + +### New Funnel Workflow + +1. **Intent Classification Stage** + - Input: User query/command and context + - Output: Operation type (create/iterate/extend) and structured plan + - Purpose: Determine the most appropriate workflow path + +2. **Planning Stage** + - Input: Classified intent and context + - Output: Execution plan with detailed steps + - Purpose: Create a structured execution plan before code generation + +3. **Execution Stage** + - Input: Execution plan and context + - Output: Generated code/artifacts based on plan + - Purpose: Execute plan steps using appropriate generators + +4. **Validation Stage** + - Input: Generated code/artifacts + - Output: Validation results and suggestions + - Purpose: Ensure output meets requirements + +5. **Refinement Stage** + - Input: Validation results and user feedback + - Output: Refined code/artifacts + - Purpose: Fix any issues identified during validation + +### Core Components + +1. **IntentClassifier** + - Analyzes user input to determine operation type + - Maps input to appropriate workflow + - Uses LLM to understand ambiguous requests + +2. **PlanGenerator** + - Creates a structured execution plan + - Breaks down complex operations into steps + - Includes schema requirements and validation criteria + +3. **CodeGenerator** + - Executes plan to produce code + - Specializes based on operation type + - Maintains context between generation steps + +4. **SchemaGenerator** + - Creates or updates schemas + - Handles both input and output schemas + - Ensures schema compatibility + +5. **ValidationService** + - Verifies generated output meets requirements + - Checks for code correctness and spec adherence + - Suggests refinements when issues found + +### Implementation Path + +1. **Phase 1: Extract Core Logic** + - Create new abstractions for intent classification and planning + - Refactor existing code to use these abstractions + - Maintain backward compatibility + +2. **Phase 2: Enhance Generation Pipeline** + - Implement validation and refinement stages + - Add better error handling and fallback mechanisms + - Improve schema handling + +3. **Phase 3: UI Integration** + - Update UI to support new workflow stages + - Add visibility into the generation process + - Enhance feedback mechanisms + +### Benefits + +1. **Better Abstraction** + - Clear separation of concerns + - Unified entry point + - Consistent model selection + +2. **Improved User Experience** + - More predictable results + - Better error handling + - More detailed feedback + +3. **Enhanced Extensibility** + - Easier to add new operation types + - Simpler to integrate new models + - More flexible validation rules + +4. **Better Code Organization** + - Reduced duplication + - Clearer dependencies + - More testable components \ No newline at end of file diff --git a/llm/src/index.ts b/llm/src/index.ts index 6b117c43e..3fe42c3ae 100644 --- a/llm/src/index.ts +++ b/llm/src/index.ts @@ -6,3 +6,5 @@ export * from "./prompts/prompting.ts"; export * from "./prompts/recipe-fix.ts"; export * from "./prompts/recipe-guide.ts"; export * from "./prompts/spec-and-schema-gen.ts"; +export * from "./prompts/workflow-classification.ts"; +export * from "./prompts/prompting.ts"; diff --git a/llm/src/prompts/spec-and-schema-gen.ts b/llm/src/prompts/spec-and-schema-gen.ts index 515faaa23..54cd7fce9 100644 --- a/llm/src/prompts/spec-and-schema-gen.ts +++ b/llm/src/prompts/spec-and-schema-gen.ts @@ -1,6 +1,7 @@ import { hydratePrompt, parseTagFromResponse } from "./prompting.ts"; import { client } from "../client.ts"; import type { JSONSchema, JSONSchemaWritable } from "@commontools/builder"; +import { WorkflowForm } from "@commontools/charm"; // Prompt for generating schema and specification from a goal export const SCHEMA_FROM_GOAL_PROMPT = ` @@ -44,12 +45,12 @@ SCHEMA GUIDELINES: - Include only essential fields (5-7 properties max) - Focus on the core functionality - If user requested complex features, simplify for this first version - + 2. Each property should have: - A descriptive "title" field - A brief "description" field - A sensible default value where appropriate - + 3. Example of a simple schema: \`\`\`json { @@ -124,12 +125,12 @@ SCHEMA GUIDELINES: - Include only essential fields (5-7 properties max) - Focus on the core functionality - If user requested complex features, simplify for this first version - + 2. Each property should have: - A descriptive "title" field - A brief "description" field - A sensible default value where appropriate - + 3. Example of a simple schema: \`\`\`json { @@ -171,6 +172,17 @@ IMPORTANT: - The user can always iterate and improve the solution later `; +export function formatForm(form: WorkflowForm) { + return ` +${form.input.processedInput} +${ + form.plan?.steps.map((step) => `${step}`).join("\n") + } +${form.plan?.spec} +${JSON.stringify(form.plan?.dataModel)} +`; +} + /** * Generates a complete specification, schema, and plan from a goal. * @param goal The user's goal or request @@ -179,7 +191,7 @@ IMPORTANT: * @returns Object containing title, description, specification, schema */ export async function generateSpecAndSchema( - goal: string, + form: WorkflowForm, existingSchema?: JSONSchema, model: string = "anthropic:claude-3-7-sonnet-latest", ): Promise<{ @@ -191,12 +203,15 @@ export async function generateSpecAndSchema( argumentSchema: JSONSchema; }> { let systemPrompt, userContent; + if (!form.plan) { + throw new Error("Plan is required"); + } if (existingSchema && Object.keys(existingSchema).length > 0) { // When we have an existing schema, focus on generating specification systemPrompt = SPEC_FROM_SCHEMA_PROMPT; userContent = ` -Goal: ${goal} +${formatForm(form)} Existing Schema: \`\`\`json @@ -208,7 +223,7 @@ Based on this goal and the existing schema, please provide a title, description, } else { // When generating from scratch, use the full schema generation prompt systemPrompt = SCHEMA_FROM_GOAL_PROMPT; - userContent = goal; + userContent = formatForm(form); } // Send the request to the LLM using the specified model or default @@ -226,9 +241,8 @@ Based on this goal and the existing schema, please provide a title, description, // Extract sections from the response const title = parseTagFromResponse(response, "title") || "New Charm"; - const description = parseTagFromResponse(response, "description") || - `A tool to ${goal}`; - const spec = parseTagFromResponse(response, "spec") || goal; + const description = parseTagFromResponse(response, "description"); + const spec = parseTagFromResponse(response, "spec"); const plan = parseTagFromResponse(response, "plan"); // If we have an existing schema, use it; otherwise parse the generated schema diff --git a/llm/src/prompts/workflow-classification.ts b/llm/src/prompts/workflow-classification.ts new file mode 100644 index 000000000..930a5f2ca --- /dev/null +++ b/llm/src/prompts/workflow-classification.ts @@ -0,0 +1,327 @@ +import { hydratePrompt, parseTagFromResponse } from "./prompting.ts"; +import { client } from "../client.ts"; +import type { JSONSchema } from "@commontools/builder"; +import { WorkflowType } from "@commontools/charm"; + +/** + * Basic prompt for classifying user intent into a workflow type + */ +export const WORKFLOW_CLASSIFICATION_PROMPT = ` +You are analyzing a user's request to determine the most appropriate workflow for code generation. +Based on the user's request, classify it into one of the following workflows: + +1. FIX: Correct issues in the code without changing functionality or specification + - Example: "Fix the alignment of buttons" or "Correct the calculation bug" + - Only modifies code, not the specification or schema + +2. EDIT: Add features or modify functionality while preserving core data structure + - Example: "Add dark mode support" or "Include a search feature" + - Modifies code and specification, but preserves core schema structure + +3. IMAGINE: Create something new, potentially combining multiple data sources + - Example: "Create a dashboard combining my tasks and calendar" + - Creates new code, specification, and potentially new schema + +User's request: "{{ INPUT }}" + +Current Charm Context: +{{ CONTEXT }} + +Please analyze this request and respond in the following format: + +FIX|EDIT|IMAGINE +0.0-1.0 +Brief explanation of your classification +Optional improved or clarified version of the user's request +`; + +/** + * Prompt for generating an execution plan with comprehensive specification + */ +export const PLAN_GENERATION_PROMPT = ` +You are creating a brief execution plan and specification for a tool to fulfill a user's intent. +The user's request has been classified as a {{ WORKFLOW_TYPE }} operation. + +User's request: "{{ INPUT }}" + + +{{ CONTEXT }} + + +Based on the workflow type, follow these guidelines: + +- FIX workflow: + * PURPOSE: Fix bugs without changing functionality + * SPEC: Keep existing specification exactly as-is + * SCHEMA: No schema changes needed + * CODE: Focus solely on fixing the implementation + +- EDIT workflow: + * PURPOSE: Enhance functionality within existing data structure + * SPEC: Build upon the existing specification + * SCHEMA: Can add properties but never remove existing ones + * CODE: Modify implementation while maintaining backward compatibility + +- IMAGINE workflow: + * PURPOSE: Create new functionality, possibly using existing charms as sources + * SPEC: Write a fresh specification, possibly referencing existing ones + * SCHEMA: Will receive combined input schema, generate output schemas + * CODE: Create a new implementation that may use data from other charms + +Please create a medium-detail plan with BOTH a step-by-step execution plan AND a clear specification. +Always include all XML tags in your response and ensure JSON schemas are correctly formatted. + +Respond in the following format: + +(include ~5 steps) + +1. First step of the plan +2. Second step of the plan +3. ... + + +(include ~1 paragraph) + +A clear description of what the charm does, its purpose, and functionality. +Include a clear explanation of how it works and what problems it solves. +For EDIT and IMAGINE, explain how it builds upon or differs from the existing charm. + + + +Sketch key entity types as type signature. +Explain how data is processed and output with arrow diagrams. +For EDIT and IMAGINE, explain any changes to the existing data model. +Include how this charm uses any referenced data from other charms. + + +DO NOT GENERATE A SCHEMA. +`; + +/** + * Generate the context section for a charm + */ +function generateCharmContext( + existingSpec?: string, + existingSchema?: JSONSchema, + existingCode?: string, +): string { + if (!existingSpec && !existingSchema && !existingCode) { + return "No existing charm context available."; + } + + let context = ""; + + if (existingSpec) { + context += `\nExisting Specification:\n\`\`\`\n${existingSpec}\n\`\`\`\n`; + } + + if (existingSchema) { + // Provide more detailed schema context with clear labeling + context += + `\nExisting Schema (IMPORTANT - preserve this structure):\n\`\`\`json\n${ + JSON.stringify(existingSchema, null, 2) + }\n\`\`\`\n`; + + // Add explicit guidance on handling the existing schema + context += `\nSchema Handling Guidelines: +- For FIX workflows: This schema must be preserved exactly as-is +- For EDIT workflows: Keep this basic structure, but you may add new properties +- For IMAGINE workflows: Use this as reference, but you can create a new schema structure\n`; + } + + if (existingCode) { + context += `\nExisting Code (excerpt):\n\`\`\`javascript\n${ + existingCode.substring(0, 500) + }${existingCode.length > 500 ? "..." : ""}\n\`\`\`\n`; + } + + return context; +} + +/** + * Classifies the user's intent into a workflow type + */ +export async function classifyWorkflow( + input: string, + existingSpec?: string, + existingSchema?: JSONSchema, + existingCode?: string, + model?: string, +): Promise<{ + workflowType: WorkflowType; + confidence: number; + reasoning: string; + enhancedPrompt?: string; +}> { + const context = generateCharmContext( + existingSpec, + existingSchema, + existingCode, + ); + + const prompt = hydratePrompt(WORKFLOW_CLASSIFICATION_PROMPT, { + INPUT: input, + CONTEXT: context, + }); + + const response = await client.sendRequest({ + system: + "You are a helpful AI assistant tasked with classifying user intents for code generation", + messages: [{ role: "user", content: prompt }], + model: model || "anthropic:claude-3-7-sonnet-latest", + }); + + try { + const workflow = parseTagFromResponse(response, "workflow").toLowerCase(); + const confidence = parseFloat(parseTagFromResponse(response, "confidence")); + const reasoning = parseTagFromResponse(response, "reasoning"); + + let enhancedPrompt: string | undefined; + try { + enhancedPrompt = parseTagFromResponse(response, "enhanced_prompt"); + } catch (e) { + // Enhanced prompt is optional + } + + return { + workflowType: workflow as WorkflowType, + confidence: isNaN(confidence) ? 0.5 : confidence, + reasoning, + enhancedPrompt, + }; + } catch (error) { + console.error("Error parsing workflow classification response:", error); + // Default to "edit" if parsing fails + return { + workflowType: "edit", + confidence: 0.5, + reasoning: "Default classification due to parsing error", + }; + } +} + +/** + * Helper function to clean JSON strings from LLM responses + * Handles markdown code blocks and other common issues + */ +function cleanJsonString(jsonStr: string): string { + // Strip markdown code blocks if present + let cleaned = jsonStr.trim(); + + // Remove markdown code block markers + const codeBlockRegex = /^```(?:json)?\s*([\s\S]*?)```$/; + const match = cleaned.match(codeBlockRegex); + if (match) { + cleaned = match[1].trim(); + console.log("Removed markdown code block markers"); + } + + // Check and fix common JSON issues + // Sometimes LLM adds explanatory text before or after the JSON + try { + // Try to find the start of a JSON object or array + const jsonStartRegex = /(\{|\[)/; + const jsonStart = cleaned.search(jsonStartRegex); + if (jsonStart > 0) { + // There's text before the JSON starts + cleaned = cleaned.substring(jsonStart); + console.log("Trimmed text before JSON starts"); + } + + // Try to find the end of a JSON object or array + const lastBrace = Math.max( + cleaned.lastIndexOf("}"), + cleaned.lastIndexOf("]"), + ); + if (lastBrace > 0 && lastBrace < cleaned.length - 1) { + // There's text after the JSON ends + cleaned = cleaned.substring(0, lastBrace + 1); + console.log("Trimmed text after JSON ends"); + } + + // Validate JSON by parsing it + JSON.parse(cleaned); + } catch (e) { + console.warn( + "Could not automatically fix JSON, returning cleaned string as-is", + ); + } + + return cleaned; +} + +/** + * Generates an execution plan for a workflow + */ +export async function generateWorkflowPlan( + input: string, + workflowType: WorkflowType, + existingSpec?: string, + existingSchema?: JSONSchema, + existingCode?: string, + model?: string, +): Promise<{ + steps: string[]; + spec: string; + dataModel: string; +}> { + const context = generateCharmContext( + existingSpec, + existingSchema, + existingCode, + ); + + const prompt = hydratePrompt(PLAN_GENERATION_PROMPT, { + INPUT: input, + WORKFLOW_TYPE: workflowType.toUpperCase(), + CONTEXT: context, + }); + + const response = await client.sendRequest({ + system: + "You are a helpful AI assistant tasked with planning code generation workflows", + messages: [{ role: "user", content: prompt }], + model: model || "anthropic:claude-3-7-sonnet-latest", + }); + + try { + // Parse the steps + const stepsText = parseTagFromResponse(response, "steps"); + const steps = stepsText + .split(/\d+\.\s+/) + .filter((step) => step.trim().length > 0) + .map((step) => step.trim()); + + // Get individual components for specific usage + let specification = ""; + let dataModel = ""; + let schema: JSONSchema | undefined; + const references = ""; + + try { + specification = parseTagFromResponse(response, "specification"); + } catch (e) { + // Specification might not be available + } + + try { + dataModel = parseTagFromResponse(response, "data_model"); + } catch (e) { + // Data model might not be available + } + + // For fix workflow, if we have an existing spec, use that instead + const updatedSpec = workflowType === "fix" && existingSpec + ? existingSpec + : specification; + + return { + steps, + spec: updatedSpec, + dataModel, + }; + } catch (error) { + console.error(error); + throw new Error("Error parsing workflow plan response:"); + } +}