@compilr-dev/sdk 0.17.13 → 0.17.15

package/dist/skills/canvas-skills.js

@@ -46,7 +46,7 @@ export const canvasSkill = defineSkill({
    - 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).
    - **Match the app theme by default.** The host injects its live theme palette as CSS variables you MUST use instead of hardcoded colors: \`var(--canvas-bg)\` (page background), \`var(--canvas-fg)\` (text), \`var(--canvas-accent)\` and \`var(--canvas-secondary)\` (highlights), \`var(--canvas-muted)\` (secondary text), \`var(--canvas-border)\` (lines), \`var(--canvas-card)\` (raised surfaces). Only hardcode specific colors when the user explicitly asks for a particular palette or brand.
-   - **Always set the page background EXPLICITLY to \`var(--canvas-bg)\`** — on your outermost wrapper (and, for a carousel, on each \`<section data-sheet>\`). Do NOT use \`background: transparent\`, and do NOT hardcode a fixed color like \`#0a0a0a\`. Transparent looks fine inside the app (the frame is dark behind the canvas) but it is a trap: when the canvas is **exported to PDF or standalone HTML it renders on WHITE**, and a fixed color ignores the user's theme. \`var(--canvas-bg)\` is the only choice that both follows the theme and survives export.
+   - **Background — infographic & carousel: always set it EXPLICITLY to \`var(--canvas-bg)\`** on your outermost wrapper (and each \`<section data-sheet>\` for a carousel). Do NOT use \`background: transparent\` and do NOT hardcode a fixed color like \`#0a0a0a\`: transparent looks fine in-app but **exports to PDF/HTML on WHITE**, and a fixed color ignores the theme. **EXCEPTION — infinite board: do the OPPOSITE.** Keep the \`data-board\` root **transparent** (do not fill it) — the host paints a dot-grid backdrop that must show through, and filling it turns the infinite surface into a finite rectangle. On a board you style only the node cards; the space between them stays transparent. (See the \`board\` skill.)
    - Make it look intentional: a clear grid, strong type scale, generous spacing. Use \`var(--canvas-accent)\` sparingly for emphasis. Prefer inline SVG for shapes/charts/icons (fill/stroke with the theme vars).
    - For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
 
@@ -164,12 +164,37 @@ export const boardSkill = defineSkill({
     tags: ['visual', 'canvas', 'board', 'diagram', 'design'],
     prompt: `Craft guide for an INFINITE BOARD — a pannable/zoomable 2D space (mind-map, system/architecture diagram, UI-layout sketch). This is design guidance; author with the canvas tools (see the \`canvas\` skill). YOU author the board; the user pans, zooms, and lightly restyles — they do NOT drag nodes, so your layout is the final layout.
 
+## SHOW, don't TELL (the #1 rule)
+A board is a VISUAL surface — its value is that it *depicts* things, not that it holds text. If your board is mostly paragraphs and bullet lists, you've built a text document on a grid and failed the medium. That is what the "propose alternatives" text tool is for — a board must EARN its place by being visual.
+- **Depict, don't describe.** Exploring website / UI options? DRAW each option as a **wireframe mock** — a browser/window frame with a nav bar, a hero block, and content sections as labeled BOXES — laid side by side so they can be compared at a glance. Do NOT write "Option A: terminal-first hero, CLI-style product list…" as prose; SKETCH it.
+- **Architecture / flow?** Draw boxes-and-arrows (nodes + inline-SVG connectors), not a written description of the components.
+- **Mind-map?** A central node with branches and sub-nodes, not an outline.
+- Text belongs INSIDE the visual as short labels (titles, captions, a few key words) — never as the primary content of a node.
+
+### Wireframe node — the shape to reach for (UI/website boards)
+Build each screen mock as nested boxes so it reads as a *picture of a page*:
+\`\`\`
+<div style="position:absolute;left:80px;top:120px;width:520px;background:var(--canvas-card);
+     border:1px solid var(--canvas-border);border-radius:8px;overflow:hidden">
+  <div style="height:28px;background:var(--canvas-bg);display:flex;align-items:center;gap:6px;padding:0 10px">
+    <span style="width:8px;height:8px;border-radius:50%;background:var(--canvas-muted)"></span> …traffic lights…
+  </div>
+  <div style="height:44px;border-bottom:1px solid var(--canvas-border);display:flex;align-items:center;
+       justify-content:space-between;padding:0 16px"><b style="color:var(--canvas-fg)">logo</b><span style="color:var(--canvas-muted)">nav · nav · nav</span></div>
+  <div style="padding:28px 16px"><div style="height:18px;width:70%;background:var(--canvas-fg);opacity:.85"></div>
+    <div style="height:10px;width:50%;background:var(--canvas-muted);margin-top:10px"></div>
+    <div style="height:32px;width:120px;background:var(--canvas-accent);margin-top:16px;border-radius:6px"></div></div>
+  <div style="display:flex;gap:10px;padding:0 16px 20px"><div style="flex:1;height:70px;background:var(--canvas-bg);border:1px solid var(--canvas-border)"></div>…cards…</div>
+</div>
+\`\`\`
+Give each mock a small title above it ("OPTION A — Terminal-first"). Two or three of these side by side IS the deliverable.
+
 ## The coordinate-space contract (REQUIRED)
 - The board is ONE HTML document laid out in a logical pixel coordinate space. Wrap everything in a root with an EXPLICIT declared size:
   \`<div data-board style="position:relative;width:2400px;height:1500px">…</div>\`
   The \`data-board\` element and its px \`width\`/\`height\` ARE the board's extent — the host uses them to fit-to-view and to export. Pick a size that comfortably holds your content with margins (e.g. 2000–4000 wide). Keep all content INSIDE these bounds.
 - **Nodes** are self-contained blocks, ABSOLUTELY positioned inside the board: \`position:absolute; left:Xpx; top:Ypx; width:Wpx\`. Snap X/Y/W to a grid (e.g. multiples of 20) so the board reads as ordered, not scattered.
-- Do NOT paint the board background — the host draws a dot-grid backdrop on \`var(--canvas-bg)\`. Style the NODE CARDS with the theme vars (\`var(--canvas-card)\` fill, \`var(--canvas-border)\` edge, \`var(--canvas-fg)\` text, \`var(--canvas-accent)\` for emphasis).
+- **Keep the \`data-board\` root TRANSPARENT** — do NOT set a background on it (this is the one canvas type where you do NOT paint \`var(--canvas-bg)\`). The host paints a dot-grid backdrop that must show through; a solid fill turns the infinite surface into a finite dark rectangle. Style only the NODE CARDS with the theme vars (\`var(--canvas-card)\` fill, \`var(--canvas-border)\` edge, \`var(--canvas-fg)\` text, \`var(--canvas-accent)\` for emphasis) — the space BETWEEN nodes stays transparent (the grid).
 
 ## Connectors — inline SVG overlay
 - Draw relationships as ONE inline-SVG layer spanning the whole board, BEHIND the nodes:
@@ -189,5 +214,5 @@ export const boardSkill = defineSkill({
 - Add 2–4 **bound** Tweaks (accent color, node title size, a toggle for connector labels or a cluster).
 
 ## Anti-patterns (fix on sight)
-- No \`data-board\` wrapper / no declared size (breaks fit + export). • Content outside the declared bounds. • Nodes scattered off-grid with no clusters. • Painting a full-board background (the host owns the backdrop). • Connectors that cross through nodes or are unlabeled where the relation is ambiguous. • Text only readable when zoomed in. • Reinventing a whiteboard — this is an authored diagram, not a drag-and-drop surface.`,
+- **Text cards instead of visuals** — paragraphs/bullet lists where a wireframe, diagram, or sketch belongs. This is the most common failure: a board of prose is just the alternatives text tool in disguise. SHOW it. • Filling the \`data-board\` background (turns the infinite surface into a finite rectangle — keep it transparent). • No \`data-board\` wrapper / no declared size (breaks fit + export). • Content outside the declared bounds. • Nodes scattered off-grid with no clusters. • Connectors that cross through nodes or are unlabeled where the relation is ambiguous. • Text only readable when zoomed in. • Reinventing a whiteboard — this is an authored diagram, not a drag-and-drop surface.`,
 });

package/dist/team/role-aliases.js

@@ -31,8 +31,10 @@ export const ROLE_NAME_ALIASES = {
     developer: 'dev',
     architect: 'arch',
     'technical-writer': 'docs',
-    security: 'reviewer',
-    designer: 'default',
+    // 'security' is now a canonical role (Security Auditor) — passthrough handles it.
+    designer: 'visual',
+    'art-director': 'visual',
+    'visual-director': 'visual',
     'character-dev': 'writer',
     'content-designer': 'writer',
     plotter: 'writer',

package/dist/team/tool-config.d.ts

@@ -7,7 +7,7 @@
  * Tool names are defined as string constants below. These cover all tools
  * from @compilr-dev/agents, @compilr-dev/agents-coding, and platform tools.
  */
-export type ToolProfile = 'full' | 'read-only' | 'developer' | 'security' | 'docs' | 'devops' | 'qa' | 'architect' | 'planner' | 'analyst' | 'custom';
+export type ToolProfile = 'full' | 'read-only' | 'developer' | 'security' | 'docs' | 'devops' | 'qa' | 'architect' | 'planner' | 'analyst' | 'designer' | 'custom';
 export interface ToolConfig {
     /** Tool profile (predefined set) */
     profile: ToolProfile;

package/dist/team/tool-config.js

@@ -670,6 +670,25 @@ export const TOOL_PROFILES = {
         'web',
         'factory_models',
     ],
+    // Designer - visual canvas authoring (canvas/artifacts/documents), reads code
+    // but does not edit source files.
+    designer: [
+        'file_read',
+        'interaction',
+        'handoff',
+        'consult',
+        'guide',
+        'subagents',
+        'meta',
+        'project',
+        'search',
+        'documents',
+        'canvas',
+        'artifacts',
+        'anchors',
+        'web',
+        'factory_models',
+    ],
     // Custom - user selected (groups specified in customGroups)
     custom: [],
 };
@@ -724,6 +743,11 @@ export const PROFILE_INFO = {
         description: 'Requirements gathering - user stories, documents, business analysis',
         isReadOnly: true,
     },
+    designer: {
+        label: 'Visual Designer',
+        description: 'Create visual canvases, infographics, and decks - reads code, no source edits',
+        isReadOnly: true,
+    },
     custom: {
         label: 'Custom',
         description: 'Select tool groups manually',

package/dist/team/types.d.ts

@@ -5,7 +5,7 @@
  */
 import type { AgentConfig, AgentState } from '@compilr-dev/agents';
 import type { ModelTier } from '../models/index.js';
-export type ToolProfile = 'full' | 'read-only' | 'developer' | 'security' | 'docs' | 'devops' | 'qa' | 'architect' | 'planner' | 'analyst' | 'custom';
+export type ToolProfile = 'full' | 'read-only' | 'developer' | 'security' | 'docs' | 'devops' | 'qa' | 'architect' | 'planner' | 'analyst' | 'designer' | 'custom';
 /**
  * Information about a background agent session.
  * Used by /bg overlay to display status.
@@ -29,11 +29,11 @@ export interface BackgroundSessionInfo {
 /**
  * Mascot expressions for visual differentiation of agents
  */
-export type MascotExpression = '[•_•]' | '[◈_◈]' | '[▣_▣]' | '[◉_◉]' | '[▲_▲]' | '[◆_◆]' | '[○_○]' | '[◇_◇]' | '[◎_◎]' | '[⊘_⊘]' | '[✎_✎]' | '[◒_◒]' | '[◔_◔]' | '[◓_◓]' | '[◕_◕]' | '[□_□]';
+export type MascotExpression = '[•_•]' | '[◈_◈]' | '[▣_▣]' | '[◉_◉]' | '[▲_▲]' | '[◆_◆]' | '[○_○]' | '[◇_◇]' | '[◎_◎]' | '[⊘_⊘]' | '[✎_✎]' | '[◒_◒]' | '[◔_◔]' | '[◓_◓]' | '[◕_◕]' | '[◐_◐]' | '[⊗_⊗]' | '[□_□]';
 /**
  * Predefined agent roles with default configurations
  */
-export type AgentRole = 'default' | 'pm' | 'arch' | 'qa' | 'dev' | 'ops' | 'docs' | 'ba' | 'researcher' | 'reviewer' | 'editor' | 'writer' | 'analyst' | 'strategist' | 'instructor' | 'custom';
+export type AgentRole = 'default' | 'pm' | 'arch' | 'qa' | 'dev' | 'ops' | 'docs' | 'ba' | 'researcher' | 'reviewer' | 'editor' | 'writer' | 'analyst' | 'strategist' | 'instructor' | 'visual' | 'security' | 'custom';
 /**
  * Role groups for UI display (Workshop, team overlay).
  * Groups roles by domain — used for visual categorization.
@@ -42,7 +42,7 @@ export declare const ROLE_GROUPS: Record<string, AgentRole[]>;
 /**
  * List of predefined role IDs (for validation against custom agent IDs)
  */
-export declare const PREDEFINED_ROLE_IDS: readonly ["default", "pm", "arch", "qa", "dev", "ops", "docs", "ba", "researcher", "reviewer", "editor", "writer", "analyst", "strategist", "instructor"];
+export declare const PREDEFINED_ROLE_IDS: readonly ["default", "pm", "arch", "qa", "dev", "ops", "docs", "ba", "researcher", "reviewer", "editor", "writer", "analyst", "strategist", "instructor", "visual", "security"];
 /**
  * Role metadata for predefined roles
  */

package/dist/team/types.js

@@ -8,8 +8,9 @@
  * Groups roles by domain — used for visual categorization.
  */
 export const ROLE_GROUPS = {
-    Software: ['dev', 'arch', 'qa', 'pm', 'ops'],
+    Software: ['dev', 'arch', 'qa', 'pm', 'ops', 'security'],
     'Writing & Analysis': ['writer', 'editor', 'reviewer', 'researcher', 'analyst', 'docs', 'ba'],
+    Design: ['visual'],
     'Business & Education': ['strategist', 'instructor'],
 };
 /**
@@ -31,6 +32,8 @@ export const PREDEFINED_ROLE_IDS = [
     'analyst',
     'strategist',
     'instructor',
+    'visual',
+    'security',
 ];
 /**
  * Role expertise keywords for team awareness
@@ -70,6 +73,8 @@ export const ROLE_EXPERTISE = {
     analyst: ['market research', 'data analysis', 'competitive intelligence', 'trends'],
     strategist: ['business strategy', 'vision', 'go-to-market', 'planning'],
     instructor: ['curriculum design', 'lesson planning', 'assessment', 'pedagogy'],
+    visual: ['infographics', 'carousels', 'boards', 'data-viz', 'visual hierarchy'],
+    security: ['security review', 'OWASP', 'vulnerabilities', 'dependency risk', 'threat modeling'],
     custom: [], // User-defined
 };
 /**
@@ -901,6 +906,51 @@ You are the **Instructor** in this multi-agent team. You specialize in education
         defaultToolProfile: 'docs', // Read + write educational content
         defaultModelTier: 'balanced',
     },
+    visual: {
+        displayName: 'Visual Director',
+        mascot: '[◐_◐]',
+        description: 'Visual canvases — infographics, carousels, boards',
+        defaultToolProfile: 'designer',
+        defaultModelTier: 'balanced',
+        defaultSystemPromptAddition: `# ROLE: VISUAL DIRECTOR
+
+You are the **Visual Director**. Your PRIMARY deliverable is a **visual canvas**, not prose.
+
+## How you work
+- When a request can be answered visually — a stat, a comparison, a process, an announcement, a summary, a pitch, a layout — you produce a CANVAS, not a text reply.
+- Pick the type deliberately: **infographic** (one composition), **carousel** (a sequence / deck), **board** (spatial mind-map / UI sketch). Then follow the matching craft skill (infographic / carousel / board) for the design rules.
+- Author with \`canvas_write\` / \`canvas_edit\` incrementally (small calls). Theme with \`var(--canvas-*)\`; set an explicit \`var(--canvas-bg)\` (except boards — keep those transparent); add 2–4 bound Tweaks.
+- You MAY add a one-line framing note, but the ARTIFACT is the canvas.
+
+## Collaboration
+- Take copy, data, and structure from the writer / strategist / researcher and turn it into visuals. You are the team's eyes: turn text into something worth looking at.
+
+## Guardrail
+- Canvas is your DEFAULT, not your cage. If the user explicitly asks for text, a document, or prose, honor that — don't force a canvas where words are wanted.`,
+    },
+    security: {
+        displayName: 'Security Auditor',
+        mascot: '[⊗_⊗]',
+        description: 'Security review — vulnerabilities, dependencies, unsafe patterns',
+        defaultToolProfile: 'security',
+        defaultModelTier: 'balanced',
+        defaultSystemPromptAddition: `# ROLE: SECURITY AUDITOR
+
+You are the **Security Auditor**. You review code, config, and dependencies for vulnerabilities and unsafe patterns — you do NOT ship features or edit code.
+
+## Focus
+- OWASP Top 10: injection, broken authn/authz, secrets in code, SSRF, path traversal, unsafe deserialization, insecure defaults.
+- Dependencies: known-vuln packages, supply-chain risk, over-broad permissions.
+- Input validation, output encoding, least privilege, safe defaults.
+
+## How you work
+- READ code / config / dependencies (you have read + search + dependency tools; you have NO edit tools — that is intentional).
+- Use the \`security-review\` / \`code-review\` skills for structured passes.
+- Report findings with **SEVERITY**, \`file:line\`, and a concrete fix. Rank by exploitability × impact; surface the top risks first. Hand off remediation to the developer.
+
+## Boundary
+- Advisory only — you flag and recommend; you do not apply the fix.`,
+    },
     custom: {
         displayName: 'Custom Agent',
         mascot: '[□_□]',
@@ -986,4 +1036,14 @@ export const ROLE_COPY = {
         bestFor: "you're teaching something and need it structured for learners.",
         pairsWith: ['reviewer', 'writer'],
     },
+    visual: {
+        tagline: 'Turns ideas and copy into visual canvases — infographics, decks, boards.',
+        bestFor: 'you want something SHOWN, not written — a one-pager, a carousel, a mind-map.',
+        pairsWith: ['writer', 'strategist'],
+    },
+    security: {
+        tagline: 'Audits code and dependencies for vulnerabilities — advisory, no edits.',
+        bestFor: 'you want a security pass — OWASP risks, dependency vulns, unsafe patterns.',
+        pairsWith: ['dev', 'arch'],
+    },
 };

package/package.json

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