npm - htmlboard - Versions diffs - 0.4.0 → 0.6.0 - Mend

htmlboard 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/README.md +190 -15
package/bin/htmlboard.js +176 -4
package/package.json +1 -1
package/skills/htmlboard/SKILL.md +28 -33
package/skills/htmlboard-components/SKILL.md +36 -0
package/skills/htmlboard-designs-json/SKILL.md +25 -0
package/src/canvases.js +38 -0
package/src/catalog.js +449 -0
package/src/check.js +143 -0
package/src/client/check.js +349 -0
package/src/client/explorer.js +68 -2
package/src/client/probe.js +41 -0
package/src/components.js +95 -0
package/src/designs.js +107 -23
package/src/index.js +18 -0
package/src/migrate.js +2 -2
package/src/server.js +167 -11
package/src/skills.js +2 -1
package/src/templates/01-screens/01-dashboard.html +112 -0
package/src/templates/01-screens/02-customers.html +77 -0
package/src/templates/01-screens/{02-mobile.html → 03-mobile.html} +4 -54
package/src/templates/{02-components/01-ui-kit.html → 02-ui-kit/01-overview.html} +16 -4
package/src/templates/components/app-sidebar.html +67 -0
package/src/templates/components/app-topbar.html +19 -0
package/src/templates/components/stat-card.html +14 -0
package/src/templates/components/tx-item.html +33 -0
package/src/templates/components.js +180 -0
package/src/templates/styles.css +24 -2
package/src/templates/01-screens/01-desktop.html +0 -281

package/src/designs.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { COMPONENTS_FOLDER, PREVIEW_WIDTH, isPage, isTagName } from './components.js';
 // Which designs a folder holds, and how the canvas shows them.
 //
@@ -16,6 +17,9 @@ import path from 'node:path';
 // A designs.json beside them is optional and only curates: sections with their titles, the order,
 // overrides for a design's values. Designs it doesn't list come after the ones it does (unless it
 // says "unlisted": "hide").
+//
+// The components in components/ (pieces of pages, see components.js) aren't designs. A designs.json
+// can show them anyway, each in a frame of its own: "components": "show", or listing them.
 /** Folders discovery leaves alone (hidden ones too) */
 const IGNORED_DIRS = new Set(['node_modules', 'dist', 'build']);
@@ -93,7 +97,8 @@ function decode(text) {
   });
 }
-function attributes(tag) {
+/** The attributes of an HTML tag (`<meta name="x" content="y">`), names in lowercase, values decoded */
+export function attributes(tag) {
   const attrs = {};
   for (const m of tag.matchAll(/([^\s"'<>/=]+)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
     attrs[m[1].toLowerCase()] = decode(m[2] ?? m[3] ?? m[4] ?? '');
@@ -115,19 +120,43 @@ function parseSettings(content) {
   return settings;
 }
-/** <meta name="htmlboard:variant" content="?tema=escuro · escuro">: the query, then a label */
+// A variant's own setting, as the htmlboard tag says it: width=390, height=844, category=mobile
+const VARIANT_SETTING = /^(width|height|category)=[^,;\s]+[,;]?$/i;
+const LABEL_START = /^[·|:,\-–—]+\s*/;
+/**
+ * <meta name="htmlboard:variant" content="?tema=escuro · escuro">: the file once more, with a
+ * query string, a size (width=390, height=844) or both, then a label. A query may leave out its "?".
+ */
 function parseVariant(content) {
-  const [, first, rest] = content.match(/^(\S+)\s*(.*)$/s);
-  const query = first.startsWith('?') ? first : `?${first}`;
-  if (query === '?') return null;
-  return { query, label: rest.replace(/^[·|:,\-–—]+\s*/, '').trim() };
+  const tokens = content.trim().split(/\s+/);
+  let query = '';
+  const settings = [];
+  let i = 0;
+  for (; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (VARIANT_SETTING.test(token)) settings.push(token.replace(/[,;]$/, ''));
+    else if (token.startsWith('?') && !query) query = token;
+    else if (i === 0 && !LABEL_START.test(token)) query = `?${token}`;
+    else break;
+  }
+  if (query === '?') query = '';
+  const { width, height, category } = parseSettings(settings.join(','));
+  if (!query && !width && !height) return null;
+  return { query, label: tokens.slice(i).join(' ').replace(LABEL_START, '').trim(), ...compact({ width, height, category }) };
+}
+/** A variant as its tag's content says it: "?theme=dark width=390, height=844 · dark mobile" */
+export function formatVariant({ query = '', label = '', width, height, category }) {
+  const size = [width && `width=${width}`, height && `height=${height}`, category && `category=${category}`].filter(Boolean).join(', ');
+  return [query, size].filter(Boolean).join(' ') + (label ? ` · ${label}` : '');
 }
 /** What an HTML file says about itself, from its <head> (see the top of this file) */
 export function parseDesignMeta(html) {
   const end = html.search(/<\/head\s*>|<body[\s>]/i);
   const head = end >= 0 ? html.slice(0, end) : html.slice(0, 65536);
-  const meta = { variants: [] };
+  const meta = { variants: [], page: isPage(html) };
   const title = head.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
   if (title) {
     const text = decode(title[1]).replace(/\s+/g, ' ').trim();
@@ -191,19 +220,32 @@ function fileDesign(file, folder, meta) {
   });
 }
-function variantDesign(base, { query, label }) {
+// A variant of a file's design: another query string (a state the page builds from its URL), another
+// size (the same page at a phone's width), or both. Without a height of its own, a variant that
+// changes the width grows with its page. One that only changes the size loads the same URL as its
+// file, so its id comes from its label.
+function variantDesign(base, { query = '', label, width, height, category }) {
+  const sized = Boolean(width || height);
+  const size = sized ? { width: width ?? base.width, height: height ?? (width ? undefined : base.height) } : {};
+  const sizeName = sized ? `${size.width}${size.height ? ` × ${size.height}` : ''}` : '';
+  const name = label || [query.slice(1), sizeName].filter(Boolean).join(' · ');
   return compact({
     ...base,
-    key: base.file + query,
+    ...size,
+    key: base.file + query + (sized ? `@${size.width}x${size.height ?? ''}` : ''),
     file: base.file + query,
-    title: `${base.baseTitle} · ${label || query.slice(1)}`,
+    title: `${base.baseTitle} · ${name}`,
+    // A new size is a new device: its category comes from its size, unless it says one
+    category: sized ? category : category ?? base.category,
+    id: sized ? `${designId(base.file + query)}-${slugify(name)}` : undefined,
     variantOf: base.file
   });
 }
 /**
  * Every design in the folder, in order: the files of a folder by name (number prefixes order
- * them), each followed by its variants, then its subfolders by name.
+ * them), each followed by its variants, then its subfolders by name. The components in
+ * components/ are left out (a whole page there is still a design).
  */
 export function scanDesigns(baseDir) {
   const designs = [];
@@ -219,7 +261,7 @@ export function scanDesigns(baseDir) {
       if (!entry.isFile() || !/\.html?$/i.test(entry.name)) continue;
       const file = folder ? `${folder}/${entry.name}` : entry.name;
       const meta = readDesignMeta(path.join(dir, entry.name));
-      if (!meta || meta.skip) continue;
+      if (!meta || meta.skip || (folder === COMPONENTS_FOLDER && !meta.page)) continue;
       const base = fileDesign(file, folder, meta);
       designs.push(base);
       for (const variant of meta.variants) designs.push(variantDesign(base, variant));
@@ -232,6 +274,43 @@ export function scanDesigns(baseDir) {
   return designs;
 }
+/**
+ * The components in the folder's components/, by name, as designs that show each one alone (its
+ * file's example, at components/<tag>.html?preview). For designs.json, which can show them.
+ * A component's file can give its preview's size with the same tag as a design.
+ */
+export function scanComponents(baseDir) {
+  const dir = path.join(baseDir, COMPONENTS_FOLDER);
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.html') && isTagName(entry.name.slice(0, -5)))
+    .sort((a, b) => byName(a.name, b.name))
+    .flatMap((entry) => {
+      const meta = readDesignMeta(path.join(dir, entry.name));
+      if (!meta || meta.skip || meta.page) return [];
+      const tag = entry.name.slice(0, -5);
+      const file = `${COMPONENTS_FOLDER}/${entry.name}`;
+      return [compact({
+        key: file,
+        file: `${file}?preview`,
+        folder: COMPONENTS_FOLDER,
+        id: designId(file),
+        title: `<${tag}>`,
+        description: meta.description,
+        width: meta.width || PREVIEW_WIDTH,
+        height: meta.height,
+        fit: !meta.height || undefined, // the frame is as tall as what it shows, however short
+        category: 'components',
+        component: true
+      })];
+    });
+}
 /** Designs grouped into one section per folder, in order (`rootName` for the files at the top) */
 function groupByFolder(designs, rootName = '') {
   const groups = new Map();
@@ -274,8 +353,13 @@ function resolveEntry(entry, byKey) {
   return design;
 }
-/** designs.json's sections filled from the files, then the designs it doesn't list */
-function curate(config, found) {
+/**
+ * designs.json's sections filled from the files, then the designs it doesn't list. Components
+ * (see scanComponents) show where it lists them, and all of them with "components": "show".
+ */
+function curate(config, designs, components = []) {
+  const showComponents = config.components === 'show' || config.components === true;
+  const found = [...designs, ...components];
   const byKey = new Map(found.map((d) => [d.key, d]));
   const sources = (Array.isArray(config.sections) ? config.sections : []).map((section) => ({
     section,
@@ -313,14 +397,16 @@ function curate(config, found) {
     owners.set(folders[0], owners.has(folders[0]) && owners.get(folders[0]) !== i ? -1 : i);
   });
-  const unlisted = found.filter((d) => !used.has(d.key));
+  const unlisted = found.filter((d) => !used.has(d.key) && (!d.component || showComponents));
   const rest = [];
   for (const design of unlisted) {
     const owner = owners.get(design.folder ?? '');
     if (owner !== undefined && owner >= 0) sections[owner].artboards.push(design);
-    else rest.push(design);
+    else if (design.component || config.unlisted !== 'hide') rest.push(design);
   }
-  if (config.unlisted !== 'hide') sections.push(...groupByFolder(rest, 'Unlisted'));
+  // Without sections of its own, designs.json only sets things: the files at the top keep a first
+  // row without a title, as without designs.json.
+  sections.push(...groupByFolder(rest, sources.length ? 'Unlisted' : ''));
   const { sections: _sections, ...top } = config;
   return { ...top, sections };
@@ -343,7 +429,7 @@ function finalize(manifest, prefix = '') {
       id: section.id ?? (slugify(name) || (folder ? slugify(folder.split('/').map(stripPrefix).join('-')) : `section-${i + 1}`)),
       name,
       artboards: artboards.map((design) => {
-        const { key, folder: _folder, baseTitle, variantOf, ...board } = design;
+        const { key, folder: _folder, baseTitle, variantOf, component, ...board } = design;
         const category = board.category ?? inferCategory(design.file.split('?')[0], board.width, board.height);
         return compact({
           ...board,
@@ -381,18 +467,16 @@ export function normalizeManifest(manifest, prefix = '') {
  */
 export function loadDesignsManifest(baseDir, rootDir = baseDir) {
   const prefix = path.relative(rootDir, baseDir).split(path.sep).join('/');
+  const title = path.basename(path.resolve(baseDir)) || 'Designs';
   const found = scanDesigns(baseDir);
   const configPath = path.join(baseDir, 'designs.json');
   if (fs.existsSync(configPath)) {
     try {
       const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-      return { ...finalize(curate(config, found), prefix), autoDiscovered: false };
+      return { ...finalize(curate({ title, ...config }, found, scanComponents(baseDir)), prefix), autoDiscovered: false };
     } catch (err) {
       console.warn(`[htmlboard] Failed parsing designs.json: ${err.message}. Showing the files without it.`);
     }
   }
-  return {
-    ...finalize({ title: path.basename(path.resolve(baseDir)) || 'Designs', sections: groupByFolder(found) }, prefix),
-    autoDiscovered: true
-  };
+  return { ...finalize({ title, sections: groupByFolder(found) }, prefix), autoDiscovered: true };
 }

package/src/index.js CHANGED Viewed

@@ -15,9 +15,27 @@ export {
   normalizeManifest,
   inferCategory,
   parseDesignMeta,
+  scanComponents,
   scanDesigns
 } from './designs.js';
+export {
+  installComponents,
+  componentPreview,
+  COMPONENTS_FOLDER,
+  COMPONENTS_SCRIPT
+} from './components.js';
+export {
+  buildCatalog,
+  formatCatalog
+} from './catalog.js';
+export {
+  runCheck,
+  formatReport
+} from './check.js';
 export {
   installSkills,
   uninstallSkills,

package/src/migrate.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { loadDesignsManifest, parseDesignMeta, stripPrefix } from './designs.js';
+import { loadDesignsManifest, parseDesignMeta, stripPrefix, formatVariant } from './designs.js';
 // `htmlboard migrate`: moves what a designs.json says about each design into the design's own file
 // (its size, category, label, variants and description) and leaves designs.json with what only it
@@ -110,7 +110,7 @@ export function planMigration(designsDir) {
       }
       for (const key of ['description', 'tags', 'id']) if (item.entry[key] !== undefined) item.keep[key] = item.entry[key];
     }
-    for (const v of declared) lines.push(`<meta name="htmlboard:variant" content="${escapeAttr(v.query + (v.label ? SEP + v.label : ''))}">`);
+    for (const v of declared) lines.push(`<meta name="htmlboard:variant" content="${escapeAttr(formatVariant(v))}">`);
     const next = rewriteHead(html, lines);
     if (next !== html) files.push({ file: base, lines, html: next });

package/src/server.js CHANGED Viewed

@@ -2,8 +2,10 @@ import http from 'node:http';
 import net from 'node:net';
 import fs from 'node:fs';
 import path from 'node:path';
+import { randomUUID } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 import { loadDesignsManifest } from './designs.js';
+import { componentPreview } from './components.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -32,6 +34,50 @@ const MIME_TYPES = {
   '.mp4': 'video/mp4'
 };
+// The probe (client/probe.js) notes what goes wrong while a page builds, for `htmlboard check`. It
+// goes first in the pages the canvas shows in frames, before anything that could go wrong.
+const PROBE = Buffer.from('<script src="/__explorer/probe.js"></script>');
+/** A page with the probe first in it: in its <head>, else after <html> or <!DOCTYPE>, else first */
+export function withProbe(page) {
+  const text = page.toString('latin1'); // a byte per character: positions in it are positions in page
+  for (const tag of [/<head\b[^>]*>/i, /<html\b[^>]*>/i, /<!doctype\b[^>]*>/i]) {
+    const match = tag.exec(text);
+    if (match) {
+      const at = match.index + match[0].length;
+      return Buffer.concat([page.subarray(0, at), PROBE, page.subarray(at)]);
+    }
+  }
+  return Buffer.concat([PROBE, page]);
+}
+function json(res, status, body) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(JSON.stringify(body));
+}
+function readBody(req, limit = 16 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > limit) {
+        reject(new Error('Too large'));
+        req.destroy();
+      } else {
+        chunks.push(chunk);
+      }
+    });
+    req.on('end', () => resolve(Buffer.concat(chunks).toString('utf8')));
+    req.on('error', reject);
+  });
+}
+/** How long a canvas has to take a check (htmlboard check), then to do it */
+const CLAIM_MS = 15000;
+const CHECK_MS = 180000;
 /** True when target is base itself or inside it */
 function isInside(base, target) {
   const rel = path.relative(base, target);
@@ -152,13 +198,106 @@ export function createServer(options = {}) {
   if (!isInside(rootDir, targetDir)) {
     throw new Error(`The designs folder (${targetDir}) must be inside the root (${rootDir})`);
   }
-  const manifestFile = path.posix.join(path.relative(rootDir, targetDir).split(path.sep).join('/'), 'designs.json');
+  const designsPath = path.relative(rootDir, targetDir).split(path.sep).join('/'); // '' when they're the same
+  const manifestFile = path.posix.join(designsPath, 'designs.json');
   const clients = new Set();
+  const send = (event, data) => {
+    for (const client of clients) client.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+  };
+  // Checks (htmlboard check). GET /api/check asks the canvases open in a browser (over the live
+  // reload events) to check the designs; the first to claim the check does it, and what it posts
+  // back answers the request.
+  const checks = new Map(); // id → { res, claimed, timer }
+  function endCheck(id, status, body) {
+    const check = checks.get(id);
+    if (!check) return;
+    clearTimeout(check.timer);
+    checks.delete(id);
+    json(check.res, status, body);
+  }
+  // only: files or folders (from the designs folder) to check; all the designs when there's none
+  function startCheck(res, only) {
+    const wanted = only.map((item) => item.replace(/\\/g, '/').replace(/^\.?\/+|\/+$/g, ''));
+    const designs = loadDesignsManifest(targetDir, rootDir).sections
+      .flatMap((section) => section.artboards)
+      .map(({ id, file, title, width, height, fit }) => ({ id, file, title, width, height, fit }))
+      .filter(({ file }) => {
+        const own = (designsPath ? file.slice(designsPath.length + 1) : file).split('?')[0];
+        return !wanted.length || wanted.some((item) => !item || own === item || own.startsWith(`${item}/`));
+      });
+    if (!designs.length) {
+      json(res, 404, { error: wanted.some(Boolean) ? `No design on the canvas is in ${only.join(', ')}` : 'There are no designs to check' });
+      return;
+    }
+    if (!clients.size) {
+      json(res, 409, { error: "The canvas isn't open in a browser" });
+      return;
+    }
+    const id = randomUUID();
+    const check = {
+      res,
+      claimed: false,
+      timer: setTimeout(() => endCheck(id, 504, { error: "The canvas didn't take the check (reload it in the browser)" }), CLAIM_MS)
+    };
+    checks.set(id, check);
+    res.on('close', () => {
+      if (checks.get(id) !== check) return; // answered
+      clearTimeout(check.timer);
+      checks.delete(id);
+    });
+    send('check', { id, designs });
+  }
+  function claimCheck(id, res) {
+    const check = checks.get(id);
+    if (!check || check.claimed) {
+      json(res, 409, { error: 'Taken' });
+      return;
+    }
+    check.claimed = true;
+    clearTimeout(check.timer);
+    check.timer = setTimeout(() => endCheck(id, 504, { error: `The canvas didn't finish the check in ${CHECK_MS / 1000} s` }), CHECK_MS);
+    json(res, 200, { ok: true });
+  }
+  async function finishCheck(id, req, res) {
+    let report;
+    try {
+      report = JSON.parse(await readBody(req));
+    } catch {
+      json(res, 400, { error: 'Not a report' });
+      return;
+    }
+    if (!checks.get(id)?.claimed) {
+      json(res, 404, { error: 'No such check' });
+      return;
+    }
+    if (report.error) endCheck(id, 500, { error: `The canvas couldn't check the designs: ${report.error}` });
+    else endCheck(id, 200, { dir: targetDir, root: rootDir, designs: Array.isArray(report.designs) ? report.designs : [] });
+    res.writeHead(204).end();
+  }
   const server = http.createServer((req, res) => {
     const parsedUrl = new URL(req.url, 'http://localhost');
     let pathname = decodeURIComponent(parsedUrl.pathname);
+    // API: checking the designs (htmlboard check), which the canvas does
+    if (pathname === '/api/check' && req.method === 'GET') {
+      startCheck(res, parsedUrl.searchParams.getAll('only'));
+      return;
+    }
+    if (pathname.startsWith('/api/check/') && req.method === 'POST') {
+      const [id, action, ...rest] = pathname.slice('/api/check/'.length).split('/');
+      if (action === 'claim' && !rest.length) claimCheck(id, res);
+      else if (action === undefined) finishCheck(id, req, res);
+      else json(res, 404, { error: 'Not found' });
+      return;
+    }
     // API: Designs Manifest
     if (pathname === '/api/designs') {
       const manifest = loadDesignsManifest(targetDir, rootDir);
@@ -202,7 +341,7 @@ export function createServer(options = {}) {
     // Serve HtmlBoard Explorer client files
     if (pathname === '/' || pathname === '/index.html') {
-      serveStaticFile(path.join(CLIENT_DIR, 'index.html'), res);
+      serveStaticFile(path.join(CLIENT_DIR, 'index.html'), req, res);
       return;
     }
@@ -214,7 +353,7 @@ export function createServer(options = {}) {
         res.writeHead(403).end('Forbidden');
         return;
       }
-      serveStaticFile(clientFilePath, res);
+      serveStaticFile(clientFilePath, req, res);
       return;
     }
@@ -232,24 +371,43 @@ export function createServer(options = {}) {
       return;
     }
+    // The pages the canvas shows in frames get the probe (htmlboard check); a page opened on its own doesn't
+    const framed = req.headers['sec-fetch-dest'] === 'iframe';
+    // A component alone, as the canvas shows it (components/<tag>.html?preview): its example in a page
+    if (parsedUrl.searchParams.has('preview')) {
+      const preview = componentPreview(targetDir, filePath);
+      if (preview !== null) {
+        res.writeHead(200, {
+          'Content-Type': MIME_TYPES['.html'],
+          'Cache-Control': 'no-cache, no-store, must-revalidate'
+        });
+        res.end(framed ? withProbe(Buffer.from(preview)) : preview);
+        return;
+      }
+    }
     if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
-      serveStaticFile(filePath, res);
+      serveStaticFile(filePath, req, res, { probe: framed });
     } else {
       res.writeHead(404, { 'Content-Type': 'text/plain' });
       res.end(`File not found: ${pathname}`);
     }
   });
-  function serveStaticFile(filePath, res) {
+  function serveStaticFile(filePath, req, res, { probe = false } = {}) {
     try {
       const ext = path.extname(filePath).toLowerCase();
       const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-      const content = fs.readFileSync(filePath);
+      // HEAD (htmlboard check asks which files are there) needs no reading
+      let content = req.method === 'HEAD' ? null : fs.readFileSync(filePath);
+      if (content && probe && (ext === '.html' || ext === '.htm')) content = withProbe(content);
       res.writeHead(200, {
         'Content-Type': contentType,
         'Cache-Control': 'no-cache, no-store, must-revalidate'
       });
-      res.end(content);
+      if (content) res.end(content);
+      else res.end();
     } catch {
       res.writeHead(500, { 'Content-Type': 'text/plain' });
       res.end('Error reading file');
@@ -271,15 +429,12 @@ export function createServer(options = {}) {
         const files = [...changed];
         changed.clear();
         for (const [file, isFolder] of files) {
-          const eventData = JSON.stringify({
+          send('change', {
             type: file === manifestFile ? 'manifest' : isFolder ? 'folder' : 'file',
             file,
             isHtml: !isFolder && /\.html?$/i.test(file),
             timestamp: Date.now()
           });
-          for (const client of clients) {
-            client.write(`event: change\ndata: ${eventData}\n\n`);
-          }
         }
       }, 100);
     });
@@ -294,6 +449,7 @@ export function createServer(options = {}) {
     close: () => {
       clearTimeout(watchDebounceTimer);
       if (stopWatching) stopWatching();
+      for (const id of [...checks.keys()]) endCheck(id, 503, { error: 'htmlboard stopped' });
       for (const client of clients) {
         client.end();
       }

package/src/skills.js CHANGED Viewed

@@ -21,7 +21,8 @@ export const SKILL_TARGETS = {
 function bundledSkills() {
   return fs.readdirSync(SKILLS_DIR, { withFileTypes: true })
     .filter((entry) => entry.isDirectory() && fs.existsSync(path.join(SKILLS_DIR, entry.name, 'SKILL.md')))
-    .map((entry) => entry.name);
+    .map((entry) => entry.name)
+    .sort();
 }
 function resolveTargets(agent = 'all') {

package/src/templates/01-screens/01-dashboard.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard</title>
+  <meta name="description" content="Analytics dashboard with sidebar, metric cards, and charts">
+  <meta name="htmlboard" content="width=1280, height=820">
+  <link rel="stylesheet" href="../styles.css">
+  <script type="module" src="../components.js"></script>
+  <style>
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 20px;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 20px;
+    }
+    .grid-2 .card { padding: 22px; }
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      font-size: 12px;
+    }
+    .panel-title { font-size: 16px; font-weight: 600; }
+    .chart-container { width: 100%; height: 180px; }
+  </style>
+</head>
+<body class="app">
+  <app-sidebar active="Dashboard"></app-sidebar>
+  <main class="app-main">
+    <app-topbar search="Search resources, clients, reports...">
+      <span class="muted">Last sync: Just now</span>
+      <button class="btn btn-primary">+ New Deployment</button>
+    </app-topbar>
+    <div class="app-content">
+      <div>
+        <h1 class="page-title">Executive Overview</h1>
+        <p class="page-sub">Performance metrics and active client deployments</p>
+      </div>
+      <div class="stats-row">
+        <stat-card label="Monthly Recurring Revenue" value="$184,290" trend="▲ +12.4% vs last mo"></stat-card>
+        <stat-card label="Active Organizations" value="1,428" trend="▲ +48 new"></stat-card>
+        <stat-card label="API Requests (24h)" value="42.8M" trend="▲ 99.98% uptime"></stat-card>
+        <stat-card label="Average Latency" value="34ms" trend="▼ -2ms target" warn></stat-card>
+      </div>
+      <div class="grid-2">
+        <div class="card">
+          <div class="panel-header">
+            <h2 class="panel-title">Throughput & Workload Trends</h2>
+            <span class="muted">Trailing 7 Days</span>
+          </div>
+          <div class="chart-container">
+            <svg viewBox="0 0 500 150" width="100%" height="100%" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#6366f1" stop-opacity="0.5"/>
+                  <stop offset="100%" stop-color="#6366f1" stop-opacity="0.0"/>
+                </linearGradient>
+              </defs>
+              <path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20 L 500 150 L 0 150 Z" fill="url(#chartGrad)"/>
+              <path d="M 0 130 Q 80 70, 150 90 T 300 40 T 420 50 T 500 20" fill="none" stroke="#6366f1" stroke-width="3"/>
+              <circle cx="500" cy="20" r="4" fill="#a855f7" stroke="#fff" stroke-width="2"/>
+            </svg>
+          </div>
+        </div>
+        <div class="card">
+          <div class="panel-header">
+            <h2 class="panel-title">Recent Audits</h2>
+          </div>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Service</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>us-east-cluster-01</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+              <tr>
+                <td>auth-gateway-proxy</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+              <tr>
+                <td>edge-cache-frankfurt</td>
+                <td><span class="badge badge-amber">Rebalancing</span></td>
+              </tr>
+              <tr>
+                <td>db-replica-primary</td>
+                <td><span class="badge badge-emerald">Optimal</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>