@compilr-dev/sdk 0.17.6 → 0.17.8

package/dist/agent.js

@@ -100,6 +100,7 @@ class CompilrAgentImpl {
             model: config?.model,
             apiKey: config?.apiKey,
             extendedContext: config?.context?.extendedContext,
+            maxTokens: config?.maxTokens,
         });
         // Resolve preset — non-software projects get 'general' by default
         const defaultPreset = config?.projectCategory && config.projectCategory !== 'software' ? 'general' : 'coding';

package/dist/config.d.ts

@@ -199,6 +199,11 @@ export interface CompilrAgentConfig {
     model?: string;
     /** API key (uses env var if omitted) */
     apiKey?: string;
+    /** Default max OUTPUT tokens per LLM call. Providers default to 4096, which
+     *  truncates large single tool calls (e.g. authoring a full canvas) — raise
+     *  it for hosts that emit big tool payloads. Stays within the model's own
+     *  output limit; do not exceed it. */
+    maxTokens?: number;
     /** Preset to use. Default: 'coding' (or 'general' for non-software projectCategory) */
     preset?: 'coding' | 'general' | 'read-only' | 'none' | Preset;
     /** Project type category — determines default preset when preset is omitted */

package/dist/provider.d.ts

@@ -18,6 +18,9 @@ export declare function createProviderFromType(type: ProviderType, options?: {
     siteName?: string;
     estimateTokens?: (text: string) => number;
     extendedContext?: boolean;
+    /** Default max OUTPUT tokens per call. Providers default to 4096, which is
+     *  too low for large single tool calls (e.g. authoring a full canvas). */
+    maxTokens?: number;
 }): LLMProvider;
 /**
  * Resolve a provider from config.
@@ -28,4 +31,6 @@ export declare function resolveProvider(config?: {
     model?: string;
     apiKey?: string;
     extendedContext?: boolean;
+    /** Default max OUTPUT tokens per call (forwarded to the provider). */
+    maxTokens?: number;
 }): LLMProvider;

package/dist/provider.js

@@ -32,7 +32,7 @@ export function detectProviderFromEnv() {
  * Create an LLM provider from a provider type string.
  */
 export function createProviderFromType(type, options) {
-    const { model, apiKey, baseUrl, siteName, estimateTokens, extendedContext } = options ?? {};
+    const { model, apiKey, baseUrl, siteName, estimateTokens, extendedContext, maxTokens } = options ?? {};
     switch (type) {
         case 'claude':
             return createClaudeProvider({
@@ -40,26 +40,27 @@ export function createProviderFromType(type, options) {
                 apiKey,
                 estimateTokens,
                 enableExtendedContext: extendedContext,
+                maxTokens,
             });
         case 'openai':
-            return createOpenAIProvider({ model, apiKey, estimateTokens });
+            return createOpenAIProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'gemini':
-            return createGeminiNativeProvider({ model, apiKey, estimateTokens });
+            return createGeminiNativeProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'ollama':
-            return createOllamaProvider({ model, baseUrl, estimateTokens });
+            return createOllamaProvider({ model, baseUrl, estimateTokens, maxTokens });
         case 'together':
-            return createTogetherProvider({ model, apiKey, estimateTokens });
+            return createTogetherProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'groq':
-            return createGroqProvider({ model, apiKey, estimateTokens });
+            return createGroqProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'fireworks':
-            return createFireworksProvider({ model, apiKey, estimateTokens });
+            return createFireworksProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'perplexity':
-            return createPerplexityProvider({ model, apiKey, estimateTokens });
+            return createPerplexityProvider({ model, apiKey, estimateTokens, maxTokens });
         case 'openrouter':
-            return createOpenRouterProvider({ model, apiKey, siteName, estimateTokens });
+            return createOpenRouterProvider({ model, apiKey, siteName, estimateTokens, maxTokens });
         case 'custom':
             // Custom endpoints use OpenAI-compatible format
-            return createOpenAIProvider({ model, apiKey, estimateTokens });
+            return createOpenAIProvider({ model, apiKey, estimateTokens, maxTokens });
     }
 }
 /**
@@ -77,6 +78,7 @@ export function resolveProvider(config) {
             model: config.model,
             apiKey: config.apiKey,
             extendedContext: config.extendedContext,
+            maxTokens: config.maxTokens,
         });
     }
     // Auto-detect from env
@@ -86,6 +88,7 @@ export function resolveProvider(config) {
             model: config?.model,
             apiKey: config?.apiKey,
             extendedContext: config?.extendedContext,
+            maxTokens: config?.maxTokens,
         });
     }
     throw new Error('No LLM provider configured. Either:\n' +

package/dist/skills/canvas-skills.js

@@ -35,11 +35,16 @@ export const canvasSkill = defineSkill({
 
 1. **Clarify only if needed.** If the request is concrete, go straight to authoring. If the subject or type is ambiguous, ask ONE short question (what should it show, or which type) — do not run a long interview.
 
-2. **Author the content with canvas_write** (type, title, html). This is the ONLY way to create a canvas — describing it in chat does nothing. Write raw HTML/SVG for the \`html\` field:
+2. **Build the canvas in small steps — never one giant tool call.** A canvas is HTML/SVG you emit as tool arguments; a single very large \`canvas_write\` can overrun the output limit, get cut off mid-arguments, and fail. So author it incrementally, and emit each tool call immediately with NO prose preamble (narration competes with the HTML for the same output budget):
+   - **2a. First \`canvas_write\`** (type, title, html) = a COMPACT skeleton: the \`<style>\` block, the overall layout, and just the first section or heading. This is the ONLY way to create a canvas — describing it in chat does nothing.
+   - **2b. Then \`canvas_edit\` (operation=append)** to add each remaining section, one call per section. The preview grows as you go, and every call stays small and reliable. (You can also leave \`<!-- placeholder -->\` markers in 2a and str_replace them.)
+   - Put the whole thing in one \`canvas_write\` ONLY if it is genuinely small (a single stat card / short poster).
+
+   HTML constraints for every write:
    - Do NOT include \`<html>\`, \`<head>\`, \`<meta>\`, \`<!doctype>\`, or your own CSP — the host injects the sandbox and CSP. Just the body content + a \`<style>\` and optional \`<script>\`.
    - The sandbox is \`allow-scripts\` with NO same-origin and CSP \`default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:\`. So: inline \`<style>\`/\`<script>\` only, no external fonts/CSS/JS/network, no remote images (use inline SVG or data: URIs).
    - Make it look intentional: a clear grid, strong type scale, generous spacing, a small cohesive palette. Prefer inline SVG for shapes/charts/icons.
-   - For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\`.
+   - For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
 
 3. **Add a Tweaks controls manifest when it helps** (the \`controls\` argument). Each control is \`{ type, param, label, default, …type config }\` where type ∈ slider | number | toggle | select | color | text. Bind params in your HTML three ways:
    - CSS custom property: use \`var(--param)\` in your styles (the host sets \`--param\` on the root).
@@ -53,7 +58,8 @@ export const canvasSkill = defineSkill({
 5. **After writing, tell the user what you made in one line** and point them at the Tweaks they can adjust. The canvas opens in its own tab.
 
 ## Rules
-- CALL THE TOOL. Do not describe the HTML you "would" write and stop — emit \`canvas_write\` with real content. A canvas only exists once the tool succeeds.
+- CALL THE TOOL — don't describe the HTML you "would" write and stop. A canvas only exists once the tool succeeds.
+- Keep every tool call SMALL. Emit \`canvas_write\`/\`canvas_edit\` with no prose preamble, and split rich canvases across several small calls (step 2). One huge call risks being cut off at the output limit.
 - Keep \`html\` self-contained and within the sandbox limits above — anything that needs the network or same-origin will silently fail to render.
 - One canvas per request unless the user asks for several.`,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/sdk",
-  "version": "0.17.6",
+  "version": "0.17.8",
   "description": "Universal agent runtime for building AI-powered applications",
   "type": "module",
   "main": "dist/index.js",
@@ -72,7 +72,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "@compilr-dev/agents": "^0.6.0",
+    "@compilr-dev/agents": "^0.6.1",
     "@compilr-dev/logger": "^0.1.0",
     "ajv": "^6.14.0",
     "yaml": "^2.8.4"