@compilr-dev/sdk 0.17.5 → 0.17.7

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/capabilities/packs.js

@@ -233,6 +233,16 @@ export const CAPABILITY_PACKS = {
         estimatedPromptTokens: 150,
         estimatedToolTokens: 1500,
     },
+    canvas: {
+        id: 'canvas',
+        label: 'Visual Canvas',
+        tools: ['canvas_write', 'canvas_edit', 'canvas_list', 'canvas_get', 'canvas_delete'],
+        readOnly: false,
+        promptModules: ['platform-tool-hints'],
+        promptSnippet: 'Visual canvases (infographic/carousel/board) rendered from sandboxed HTML/SVG. Create/replace with canvas_write (raw HTML only — host injects the CSP; inline <style>/<script> only, no network/remote assets; optional Tweaks controls manifest). EDIT via canvas_get (outline=true or startLine/maxLines) then canvas_edit (str_replace/append/prepend) — never re-send the whole document.',
+        estimatedPromptTokens: 150,
+        estimatedToolTokens: 1500,
+    },
     plans: {
         id: 'plans',
         label: 'Planning',
@@ -443,6 +453,7 @@ export const FORBIDDEN_PACK_SUGGESTIONS = {
     backlog_write: '$pm',
     backlog_read: '$pm',
     documents: '$pm',
+    canvas: '$default',
     plans: '$pm',
     search: '$arch',
     dependencies: '$arch',

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.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Canvas Skills
+ *
+ * canvas — author and edit a visual canvas (infographic, carousel, or board)
+ * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
+ */
+export declare const canvasSkill: import("@compilr-dev/agents").Skill;

package/dist/skills/canvas-skills.js

@@ -0,0 +1,60 @@
+/**
+ * Canvas Skills
+ *
+ * canvas — author and edit a visual canvas (infographic, carousel, or board)
+ * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
+ */
+import { defineSkill } from '@compilr-dev/agents';
+// =============================================================================
+// /canvas — visual canvas authoring
+// =============================================================================
+export const canvasSkill = defineSkill({
+    name: 'canvas',
+    description: 'Author or edit a visual canvas — an infographic, a slide carousel, or an infinite board — rendered ' +
+        'from HTML/SVG in a sandboxed preview, optionally with live "Tweaks" controls the user can adjust. ' +
+        'Use when the user wants something visual: a diagram, poster, stat card, one-pager, slide deck, or ' +
+        'explainer graphic, rather than prose or a code file.',
+    tags: ['visual', 'canvas', 'design'],
+    prompt: `You are in CANVAS MODE. Your job is to produce a VISUAL artifact — a rendered HTML/SVG canvas — not prose and not a code file. The canvas renders in a sandboxed preview and can carry live "Tweaks" the user adjusts.
+
+## When to Use
+- The user wants something visual: infographic, poster, stat card, one-pager, diagram, explainer, slide deck.
+- The user says "make a canvas", "visualize this", "turn this into slides", "draw me a…".
+
+## When NOT to Use
+- They want prose (a doc, PRD, notes) → use the document tools / relevant writing skill.
+- They want real application code/files on disk → use write_file / build.
+- They want a data model → use the factory model tools.
+
+## Canvas types (pick one)
+- **infographic** — a single self-contained composition (poster / stat card / one-pager). Default when unsure.
+- **carousel** — multiple slide "sheets"; author each slide as a top-level \`<section data-sheet>…</section>\`.
+- **board** — an infinite 2D board of loosely-placed elements.
+
+## STEPS
+
+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:
+   - 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>\`.
+   - **Build in steps for anything rich — do NOT try to emit a huge HTML document in one canvas_write.** A single very large tool call can be truncated and silently dropped. Instead: first \`canvas_write\` a COMPACT version — the \`<style>\` block plus the overall structure and the first section or two. Then use \`canvas_edit\` (operation=append, or str_replace to fill placeholders) to add the remaining sections one at a time. Each call stays small and reliable, and the preview grows as you go.
+
+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).
+   - Text binding: \`<span data-bind="param"></span>\` gets replaced with the value.
+   - Visibility: \`[data-show="param"]\` shows/hides based on a toggle.
+   - For computed updates, define \`window.applyParams(values)\` in a \`<script>\` and read \`values.param\`.
+   Give every canvas at least 2–4 sensible controls (accent color, a headline size slider, a toggle to show/hide a section) so the user has something to play with. Seed \`default\` values that match what you authored.
+
+4. **To EDIT an existing canvas, do NOT re-send the whole document.** First call \`canvas_get\` with \`outline=true\` (or a \`startLine\`/\`maxLines\` slice) to find the exact snippet, then \`canvas_edit\` with \`operation=str_replace\` (old_str must be unique — include surrounding context — or set replace_all=true), or append/prepend. Reserve \`canvas_write\` with \`canvas_id\` for a full intentional rewrite.
+
+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.
+- 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/dist/skills/platform-skills.d.ts

@@ -11,7 +11,8 @@ export { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
 export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
 export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
 export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
+export { canvasSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (34 total).
+ * All platform-specific skills (35 total).
  */
 export declare const platformSkills: Skill[];

package/dist/skills/platform-skills.js

@@ -16,6 +16,8 @@ export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createCont
 export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
 // Book
 export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
+// Canvas (visual)
+export { canvasSkill } from './canvas-skills.js';
 // Import all for the aggregate array
 import { designSkill, sketchSkill, prdSkill, refineSkill, refineItemSkill, architectureSkill, sessionNotesSkill, buildSkill, scaffoldSkill, } from './software-skills.js';
 import { outlineSkill, literatureReviewSkill, draftSectionSkill, peerReviewSkill, researchScaffoldSkill, } from './research-skills.js';
@@ -23,8 +25,9 @@ import { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
 import { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
 import { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
 import { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
+import { canvasSkill } from './canvas-skills.js';
 /**
- * All platform-specific skills (34 total).
+ * All platform-specific skills (35 total).
  */
 export const platformSkills = [
     // Software (9)
@@ -67,4 +70,6 @@ export const platformSkills = [
     plotThreadsSkill,
     sceneBreakdownSkill,
     bookReviewSkill,
+    // Canvas (1)
+    canvasSkill,
 ];

package/dist/team/tool-config.js

@@ -284,6 +284,14 @@ export const TOOL_GROUPS = {
         readOnly: false,
         tier: 'meta',
     },
+    canvas: {
+        label: 'Visual Canvas',
+        // Canvas tools are defined in @compilr-dev/sdk (createPlatformTools), not in
+        // the agents-lib TOOL_NAMES registry, so they are referenced by literal name.
+        tools: ['canvas_write', 'canvas_edit', 'canvas_list', 'canvas_get', 'canvas_delete'],
+        readOnly: false,
+        tier: 'meta',
+    },
     plans: {
         label: 'Planning',
         tools: [
@@ -514,6 +522,7 @@ export const TOOL_PROFILES = {
         'backlog_read',
         'backlog_write',
         'documents',
+        'canvas',
         'plans',
         'artifacts',
         'anchors',
@@ -553,6 +562,7 @@ export const TOOL_PROFILES = {
         'project',
         'search',
         'documents',
+        'canvas',
         'web',
         'factory_models',
     ],
@@ -608,6 +618,7 @@ export const TOOL_PROFILES = {
         'dependencies',
         'backlog_read',
         'documents',
+        'canvas',
         'plans',
         'artifacts',
         'anchors',
@@ -631,6 +642,7 @@ export const TOOL_PROFILES = {
         'backlog_read',
         'backlog_write',
         'documents',
+        'canvas',
         'plans',
         'artifacts',
         'anchors',
@@ -652,6 +664,7 @@ export const TOOL_PROFILES = {
         'backlog_read',
         'backlog_write',
         'documents',
+        'canvas',
         'artifacts',
         'anchors',
         'web',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/sdk",
-  "version": "0.17.5",
+  "version": "0.17.7",
   "description": "Universal agent runtime for building AI-powered applications",
   "type": "module",
   "main": "dist/index.js",