dembrandt 0.12.9 → 0.13.0

package/README.md

@@ -43,6 +43,23 @@ Or add to your project's `.mcp.json`:
 
 7 tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.
 
+Pair with **[dembrandt-skills](https://github.com/dembrandt/dembrandt-skills)** to give your agent UX intelligence on top of extracted tokens — hierarchy, accessibility, interaction states, and a full 6-stage design pipeline orchestrator.
+
+```bash
+npx skills add dembrandt/dembrandt-skills
+```
+
+## Dembrandt App (Beta)
+
+The **[Dembrandt App](https://www.dembrandt.com/app)** is the new home for your design system audits. It replaces the legacy Local UI with a more powerful, web-based management experience.
+
+* **Visual Management:** View typography, color palettes, and spacing scales in a clean, human-readable dashboard.
+* **Privacy-First:** No login required. No analytics. Your data is stored locally in your browser and is never sent to our servers.
+* **CLI Integration:** Simply run your extraction with `--save-output` and open the resulting JSON in the App for deep analysis.
+* **AI-Ready:** Copy tokens directly into your agentic workflows (Cursor, Claude, etc.) with one click.
+* **Public Beta:** More best-in-class features will be added to dembrandt App in upcoming weeks.
+
+
 ## What to expect from extraction?
 
 - Colors (semantic, palette, CSS variables, gradients)
@@ -67,9 +84,9 @@ dembrandt example.com --mobile         # Use mobile viewport (390x844) for respo
 dembrandt example.com --slow           # 3x longer timeouts (24s hydration) for JavaScript-heavy sites
 dembrandt example.com --brand-guide    # Generate a brand guide PDF
 dembrandt example.com --design-md      # Generate a DESIGN.md file for AI agents
-dembrandt example.com --pages 5        # Analyze 5 pages (homepage + 4 discovered pages), merges results
+dembrandt example.com --crawl 5        # Analyze 5 pages (homepage + 4 discovered pages), merges results
 dembrandt example.com --sitemap        # Discover pages from sitemap.xml instead of DOM links
-dembrandt example.com --pages 10 --sitemap # Combine: up to 10 pages discovered via sitemap
+dembrandt example.com --crawl 10 --sitemap # Combine: up to 10 pages discovered via sitemap
 dembrandt example.com --no-sandbox     # Disable Chromium sandbox (required for Docker/CI)
 dembrandt example.com --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
 dembrandt example.com --wcag           # WCAG 2.1 contrast analysis — real DOM pairs, AA/AAA grades
@@ -83,13 +100,13 @@ Analyze multiple pages to get a more complete picture of a site's design system.
 
 ```bash
 # Analyze homepage + 4 auto-discovered pages (default: 5 total)
-dembrandt example.com --pages 5
+dembrandt example.com --crawl 5
 
 # Use sitemap.xml for page discovery instead of DOM link scraping
 dembrandt example.com --sitemap
 
 # Combine both: up to 10 pages from sitemap
-dembrandt example.com --pages 10 --sitemap
+dembrandt example.com --crawl 10 --sitemap
 ```
 
 **Page discovery** works two ways:
@@ -197,7 +214,7 @@ dembrandt braintree.com --save-output
 
 **Multi-page audit** — get a fuller picture across the whole site
 ```bash
-dembrandt stripe.com --pages 10 --sitemap --save-output
+dembrandt stripe.com --crawl 10 --sitemap --save-output
 ```
 
 **Spot-check a value** — verify a specific token fast

package/index.js

@@ -132,6 +132,7 @@ program
             screenshotPath: opts.screenshot,
             discoverLinks: isAutoCrawl ? crawlN - 1 : null,
             wcag: opts.wcag,
+            includeRawColors: opts.rawColors,
           });
 
           // Build list of additional URLs to extract

package/lib/extractors/index.js

@@ -168,9 +168,9 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     spinner.stop();
     console.log(color.info("\n  Extracting design tokens...\n"));
 
-    spinner.start("Analyzing design system (16 parallel tasks)...");
+    spinner.start("Analyzing design system (17 parallel tasks)...");
     const [
-      { logo, instances: logoInstances, favicons },
+      logoResult,
       colors,
       typography,
       spacing,
@@ -184,7 +184,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       breakpoints,
       iconSystem,
       frameworks,
-      siteName,
+      siteNameRaw,
       gradients,
       motion,
     ] = await Promise.all([
@@ -207,7 +207,71 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       extractMotion(page),
     ]);
 
+    const { logo, instances: logoInstances, favicons, manifest } = logoResult;
+    let siteName = siteNameRaw;
+
     spinner.stop();
+
+    // Inject manifest theme_color / background_color as high-confidence palette entries
+    if (manifest) {
+      const manifestColorEntries = [
+        manifest.themeColor && { color: manifest.themeColor, label: 'manifest:theme_color' },
+        manifest.backgroundColor && { color: manifest.backgroundColor, label: 'manifest:background_color' },
+      ].filter(Boolean);
+
+      const rawManifestColors = manifestColorEntries.map(e => e.color);
+      const manifestNormMap = rawManifestColors.length ? await page.evaluate((cols) => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        const out = {};
+        for (const c of cols) {
+          if (/^#[0-9a-f]{6}$/i.test(c)) { out[c] = c.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{3}$/i.test(c)) { out[c] = `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{8}$/i.test(c)) { out[c] = c.toLowerCase().slice(0, 7); continue; }
+          const m = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+          if (m) { out[c] = `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}`; continue; }
+          if (ctx) {
+            try {
+              ctx.clearRect(0, 0, 1, 1);
+              ctx.fillStyle = 'rgba(0,0,0,0)';
+              ctx.fillStyle = c;
+              ctx.fillRect(0, 0, 1, 1);
+              const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+              if (a > 0) { out[c] = `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`; continue; }
+            } catch {}
+          }
+          out[c] = c.toLowerCase();
+        }
+        return out;
+      }, rawManifestColors) : {};
+
+      for (const { color: raw, label } of manifestColorEntries) {
+        const normalized = manifestNormMap[raw] ?? raw.toLowerCase();
+        if (!colors.palette.some(c => c.normalized === normalized)) {
+          colors.palette.push({ color: raw, normalized, count: 10, confidence: 'high', sources: [label] });
+        } else {
+          const existing = colors.palette.find(c => c.normalized === normalized);
+          if (existing) {
+            existing.confidence = 'high';
+            if (!existing.sources.includes(label)) existing.sources.push(label);
+          }
+        }
+      }
+
+      if (!siteName && (manifest.name || manifest.shortName)) {
+        siteName = manifest.name || manifest.shortName;
+      }
+    }
+
+    if (manifest) {
+      const parts = [
+        manifest.themeColor && `theme: ${manifest.themeColor}`,
+        manifest.backgroundColor && `bg: ${manifest.backgroundColor}`,
+        manifest.name && `name: "${manifest.name}"`,
+      ].filter(Boolean);
+      console.log(color.success(`  ✓ Manifest: ${parts.join(', ')}`));
+    }
     console.log(colors.palette.length > 0 ? color.success(`  ✓ Colors: ${colors.palette.length} found`) : color.warning(`  ! Colors: 0 found`));
     console.log(typography.styles.length > 0 ? color.success(`  ✓ Typography: ${typography.styles.length} styles`) : color.warning(`  ! Typography: 0 styles`));
     console.log(spacing.commonValues.length > 0 ? color.success(`  ✓ Spacing: ${spacing.commonValues.length} values`) : color.warning(`  ! Spacing: 0 values`));
@@ -546,6 +610,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       logo,
       logoInstances,
       favicons,
+      ...(manifest ? { manifest } : {}),
       colors,
       typography,
       spacing,

package/lib/extractors/logo.js

@@ -44,6 +44,7 @@ export async function extractLogo(page, url) {
   }, url);
 
   let pwaIcons = [];
+  let manifestMeta = {};
   if (manifestIcons.length > 0) {
     try {
       const manifestUrl = manifestIcons[0].manifestUrl;
@@ -63,6 +64,13 @@ export async function extractLogo(page, url) {
           purpose: icon.purpose || 'any',
         }));
       }
+
+      if (response) {
+        if (response.theme_color) manifestMeta.themeColor = response.theme_color;
+        if (response.background_color) manifestMeta.backgroundColor = response.background_color;
+        if (response.name) manifestMeta.name = response.name;
+        if (response.short_name) manifestMeta.shortName = response.short_name;
+      }
     } catch {}
   }
 
@@ -558,6 +566,7 @@ export async function extractLogo(page, url) {
 
   // Merge PWA icons into favicons
   result.favicons = [...result.favicons, ...pwaIcons];
+  result.manifest = Object.keys(manifestMeta).length > 0 ? manifestMeta : null;
 
   return result;
 }

package/lib/formatters/terminal.js

@@ -292,17 +292,18 @@ function displayTypography(typography) {
     const fontFamilies = new Map();
 
     typography.styles.forEach(style => {
-      // Skip styles without a family name
       if (!style.family) return;
 
       if (!fontFamilies.has(style.family)) {
-        fontFamilies.set(style.family, { sizes: new Set(), weights: new Set() });
+        fontFamilies.set(style.family, { sizeContexts: new Map(), weights: new Set() });
       }
 
       const familyData = fontFamilies.get(style.family);
       if (style.size) {
         const px = Math.round(parseFloat(style.size) || 0);
-        if (px) familyData.sizes.add(px);
+        if (px && !familyData.sizeContexts.has(px)) {
+          familyData.sizeContexts.set(px, style.context || null);
+        }
       }
       if (style.weight && style.weight !== 400) {
         familyData.weights.add(style.weight);
@@ -317,11 +318,11 @@ function displayTypography(typography) {
       const isFontLast = fontIndex === totalFonts;
       const fontBranch = isFontLast ? '└─' : '├─';
 
-      const sizes = [...data.sizes]
-        .sort((a, b) => b - a)
-        .map(px => `${px}px`);
-      const sizeList = sizes.length
-        ? ' ' + chalk.dim('[ ') + sizes.join(', ') + chalk.dim(' ]')
+      const sizeTokens = [...data.sizeContexts.entries()]
+        .sort((a, b) => b[0] - a[0])
+        .map(([px, ctx]) => ctx ? `${px}px ${chalk.dim(`(${ctx})`)}` : `${px}px`);
+      const sizeList = sizeTokens.length
+        ? ' ' + chalk.dim('[ ') + sizeTokens.join(', ') + chalk.dim(' ]')
         : '';
 
       console.log(chalk.dim(`│  ${fontBranch}`) + ' ' + chalk.bold(family) + sizeList);

package/lib/merger.js

@@ -275,6 +275,56 @@ function mergeByName(results, getter) {
   return out;
 }
 
+function mergeGradients(results) {
+  const map = new Map();
+  results.forEach(r => {
+    (r.gradients || []).forEach(g => {
+      const key = g.gradient;
+      if (!map.has(key)) {
+        map.set(key, { ...g });
+      } else {
+        map.get(key).count += (g.count || 1);
+      }
+    });
+  });
+  return [...map.values()].sort((a, b) => b.count - a.count);
+}
+
+function mergeMotion(results) {
+  const base = results[0].motion || { durations: [], easings: [], animations: [], contexts: {}, interactiveDeltas: [] };
+
+  const durationMap = new Map();
+  results.forEach(r => {
+    (r.motion?.durations || []).forEach(d => {
+      if (!durationMap.has(d.value)) durationMap.set(d.value, { ...d });
+      else durationMap.get(d.value).count += (d.count || 1);
+    });
+  });
+
+  const easingMap = new Map();
+  results.forEach(r => {
+    (r.motion?.easings || []).forEach(e => {
+      if (!easingMap.has(e.value)) easingMap.set(e.value, { ...e });
+      else easingMap.get(e.value).count += (e.count || 1);
+    });
+  });
+
+  const animMap = new Map();
+  results.forEach(r => {
+    (r.motion?.animations || []).forEach(a => {
+      if (!animMap.has(a.name || a.value)) animMap.set(a.name || a.value, { ...a });
+      else animMap.get(a.name || a.value).count += (a.count || 1);
+    });
+  });
+
+  return {
+    ...base,
+    durations: [...durationMap.values()].sort((a, b) => a.ms - b.ms),
+    easings: [...easingMap.values()].sort((a, b) => b.count - a.count).slice(0, 8),
+    animations: [...animMap.values()].sort((a, b) => b.count - a.count).slice(0, 8),
+  };
+}
+
 /**
  * Merge an array of per-page result objects into a single unified result.
  * @param {Object[]} results - Array of extractBranding() result objects
@@ -298,6 +348,8 @@ export function mergeResults(results) {
     borderRadius: mergeBorderRadius(results),
     borders: mergeBorders(results),
     shadows: mergeShadows(results),
+    gradients: mergeGradients(results),
+    motion: mergeMotion(results),
     components: mergeComponents(results),
     breakpoints: [
       ...new Map(

package/mcp-server.js

@@ -99,16 +99,119 @@ function errorResult(message) {
   return { content: [{ type: "text", text: message }], isError: true };
 }
 
+// ── Job Queue ──────────────────────────────────────────────────────────
+
+class JobQueue {
+  #jobs = new Map();
+  #queue = [];
+  #running = new Set();
+  #maxConcurrent = 2;
+
+  enqueue(url, opts, pick) {
+    const id = `job_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    this.#jobs.set(id, {
+      status: "queued",
+      url,
+      opts,
+      pick,
+      createdAt: Date.now(),
+      startedAt: undefined,
+      completedAt: undefined,
+      result: undefined,
+      error: undefined,
+    });
+    this.#queue.push(id);
+    void this.#drain();
+    return id;
+  }
+
+  get(id) {
+    return this.#jobs.get(id) ?? null;
+  }
+
+  cancel(id) {
+    const job = this.#jobs.get(id);
+    if (!job || job.status !== "queued") return false;
+    job.status = "cancelled";
+    job.completedAt = Date.now();
+    const idx = this.#queue.indexOf(id);
+    if (idx !== -1) this.#queue.splice(idx, 1);
+    return true;
+  }
+
+  async #drain() {
+    while (this.#queue.length > 0 && this.#running.size < this.#maxConcurrent) {
+      const id = this.#queue.shift();
+      const job = this.#jobs.get(id);
+      if (!job || job.status === "cancelled") continue;
+
+      job.status = "running";
+      job.startedAt = Date.now();
+      this.#running.add(id);
+
+      runExtraction(job.url, job.opts)
+        .then((result) => {
+          if (job.status === "cancelled") return;
+          if (result.ok) {
+            job.status = "completed";
+            job.result = job.pick(result.data);
+          } else {
+            job.status = "failed";
+            job.error = result.error;
+          }
+        })
+        .catch((err) => {
+          if (job.status !== "cancelled") {
+            job.status = "failed";
+            job.error = err.message || String(err);
+          }
+        })
+        .finally(() => {
+          job.completedAt = Date.now();
+          this.#running.delete(id);
+          void this.#drain();
+        });
+    }
+  }
+
+  // Remove completed/failed/cancelled jobs older than 1 hour
+  cleanup() {
+    const cutoff = Date.now() - 3_600_000;
+    for (const [id, job] of this.#jobs) {
+      if (
+        ["completed", "failed", "cancelled"].includes(job.status) &&
+        job.completedAt !== undefined &&
+        job.completedAt < cutoff
+      ) {
+        this.#jobs.delete(id);
+      }
+    }
+  }
+}
+
+const jobQueue = new JobQueue();
+setInterval(() => jobQueue.cleanup(), 600_000);
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
 /**
- * Wrapper that handles extraction + error formatting for all tools.
- * `pick` receives the full result and returns the filtered subset.
+ * Wrapper for extraction tools.
+ * Async by default: enqueues and returns a job_id immediately.
+ * Pass sync: true to block and return the result directly.
  */
 function toolHandler(pick, extraOptions = {}) {
   return async (params) => {
-    const { url, slow, darkMode } = params;
-    const result = await runExtraction(url, { slow, darkMode, ...extraOptions });
-    if (!result.ok) return errorResult(result.error);
-    return jsonResult(pick(result.data));
+    const { url, slow, darkMode, sync } = params;
+    const opts = { slow, darkMode, ...extraOptions };
+
+    if (sync) {
+      const result = await runExtraction(url, opts);
+      if (!result.ok) return errorResult(result.error);
+      return jsonResult(pick(result.data));
+    }
+
+    const jobId = jobQueue.enqueue(url, opts, pick);
+    return jsonResult({ job_id: jobId, status: "queued" });
   };
 }
 
@@ -116,21 +219,22 @@ function toolHandler(pick, extraOptions = {}) {
 
 const url = z.string().describe("Website URL (e.g. example.com)");
 const slow = z.boolean().optional().default(false).describe("3x timeouts for heavy SPAs");
+const sync = z.boolean().optional().default(false).describe("Wait for result directly instead of returning a job_id (blocks 15-40s)");
 
-// ── Tools ──────────────────────────────────────────────────────────────
+// ── Extraction tools ───────────────────────────────────────────────────
 
 server.tool(
   "get_design_tokens",
-  "Extract the full design system from a live website. Launches a real browser, navigates to the site, and returns production-ready design tokens: color palette (hex, RGB, LCH, OKLCH) with semantic roles and CSS custom properties, typography scale (families, fallbacks, sizes, weights, line heights, letter spacing by context), spacing system with grid detection, border radii, border patterns, box shadows for elevation, component styles (buttons with hover/focus states, inputs, links, badges), responsive breakpoints, logo and favicons, site name, detected CSS frameworks, and icon systems. Takes 15-40 seconds depending on site complexity.",
-  { url, slow },
+  "Extract the full design system from a live website. Launches a real browser, navigates to the site, and returns production-ready design tokens: color palette (hex, RGB, LCH, OKLCH) with semantic roles and CSS custom properties, typography scale (families, fallbacks, sizes, weights, line heights, letter spacing by context), spacing system with grid detection, border radii, border patterns, box shadows for elevation, component styles (buttons with hover/focus states, inputs, links, badges), responsive breakpoints, logo and favicons, site name, detected CSS frameworks, and icon systems. Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => d),
 );
 
 server.tool(
   "get_color_palette",
-  "Extract brand colors from a live website. Returns semantic colors (primary, secondary, accent), full palette ranked by usage frequency and confidence (high/medium/low), CSS custom properties with their design-system names, and hover/focus state colors discovered by simulating real user interactions. Each color in hex, RGB, LCH, and OKLCH.",
+  "Extract brand colors from a live website. Returns semantic colors (primary, secondary, accent), full palette ranked by usage frequency and confidence (high/medium/low), CSS custom properties with their design-system names, and hover/focus state colors discovered by simulating real user interactions. Each color in hex, RGB, LCH, and OKLCH. Returns a job_id by default — use get_job_status to poll for the result.",
   {
-    url, slow,
+    url, slow, sync,
     darkMode: z.boolean().optional().default(false).describe("Also extract dark mode palette"),
   },
   toolHandler((d) => ({ url: d.url, colors: d.colors })),
@@ -138,22 +242,22 @@ server.tool(
 
 server.tool(
   "get_typography",
-  "Extract typography from a live website. Returns every font family with its fallback stack, the complete type scale grouped by context (heading, body, button, link, caption) with pixel and rem sizes, weights, line heights, letter spacing, and text transforms. Also reports font sources: Google Fonts URLs, Adobe Fonts usage, and variable font detection.",
-  { url, slow },
+  "Extract typography from a live website. Returns every font family with its fallback stack, the complete type scale grouped by context (heading, body, button, link, caption) with pixel and rem sizes, weights, line heights, letter spacing, and text transforms. Also reports font sources: Google Fonts URLs, Adobe Fonts usage, and variable font detection. Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => ({ url: d.url, typography: d.typography })),
 );
 
 server.tool(
   "get_component_styles",
-  "Extract UI component styles from a live website. Returns button variants with default, hover, active, and focus states (background, text color, padding, border radius, border, shadow, outline, opacity), input field styles (border, focus ring, padding, placeholder), link styles (color, text decoration, hover changes), and badge/tag styles.",
-  { url, slow },
+  "Extract UI component styles from a live website. Returns button variants with default, hover, active, and focus states (background, text color, padding, border radius, border, shadow, outline, opacity), input field styles (border, focus ring, padding, placeholder), link styles (color, text decoration, hover changes), and badge/tag styles. Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => ({ url: d.url, components: d.components })),
 );
 
 server.tool(
   "get_surfaces",
-  "Extract surface treatment tokens from a live website: border radii with element context (which radii are used on buttons vs cards vs inputs vs modals), border patterns (width + style + color combinations), and box shadow elevation levels.",
-  { url, slow },
+  "Extract surface treatment tokens from a live website: border radii with element context (which radii are used on buttons vs cards vs inputs vs modals), border patterns (width + style + color combinations), and box shadow elevation levels. Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => ({
     url: d.url,
     borderRadius: d.borderRadius,
@@ -164,15 +268,15 @@ server.tool(
 
 server.tool(
   "get_spacing",
-  "Extract the spacing system from a live website: common margin and padding values sorted by frequency, pixel and rem values, and grid system detection (4px, 8px, or custom scale).",
-  { url, slow },
+  "Extract the spacing system from a live website: common margin and padding values sorted by frequency, pixel and rem values, and grid system detection (4px, 8px, or custom scale). Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => ({ url: d.url, spacing: d.spacing })),
 );
 
 server.tool(
   "get_brand_identity",
-  "Extract brand identity from a live website: site name, logo (source, dimensions, safe zone), all favicon variants (icon, apple-touch-icon, og:image, twitter:image with sizes and URLs), detected CSS frameworks (Tailwind, Bootstrap, MUI, etc.), icon systems (Font Awesome, Material Icons, SVG), and responsive breakpoints.",
-  { url, slow },
+  "Extract brand identity from a live website: site name, logo (source, dimensions, safe zone), all favicon variants (icon, apple-touch-icon, og:image, twitter:image with sizes and URLs), detected CSS frameworks (Tailwind, Bootstrap, MUI, etc.), icon systems (Font Awesome, Material Icons, SVG), and responsive breakpoints. Returns a job_id by default — use get_job_status to poll for the result.",
+  { url, slow, sync },
   toolHandler((d) => ({
     url: d.url,
     siteName: d.siteName,
@@ -184,6 +288,31 @@ server.tool(
   })),
 );
 
+// ── Job management tools ───────────────────────────────────────────────
+
+server.tool(
+  "get_job_status",
+  "Poll for the result of an async extraction job. Returns status (queued/running/completed/failed/cancelled) and the full result once completed. Call this after any extraction tool that returned a job_id.",
+  { job_id: z.string().describe("The job_id returned by an extraction tool") },
+  ({ job_id }) => {
+    const job = jobQueue.get(job_id);
+    if (!job) return errorResult(`No job found with id: ${job_id}`);
+    if (job.status === "completed") return jsonResult({ job_id, status: "completed", result: job.result });
+    if (job.status === "failed") return errorResult(`Job failed: ${job.error}`);
+    return jsonResult({ job_id, status: job.status });
+  },
+);
+
+server.tool(
+  "cancel_job",
+  "Cancel a queued extraction job. Has no effect on jobs that are already running.",
+  { job_id: z.string().describe("The job_id to cancel") },
+  ({ job_id }) => {
+    const cancelled = jobQueue.cancel(job_id);
+    return jsonResult({ job_id, cancelled });
+  },
+);
+
 // ── Start ──────────────────────────────────────────────────────────────
 
 const transport = new StdioServerTransport();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.9",
+  "version": "0.13.0",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",