total-recall-brain 3.44.0 → 3.46.0

package/scaffold/.agent/skills/total-recall/plugins/code-quality/ui/code-quality-report.mjs

@@ -1,14 +1,12 @@
 /**
  * <code-quality-report> — renders a code-quality report view.
  *
- * The host sets `view` to the JSON printed by `code-quality report json`
+ * Reads the JSON printed by `code-quality report --json` through the host
  * (core/report-data.mjs). Nothing here is computed locally: every number is a
  * field of that view, and a missing/unreadable/stale/partial view never renders
  * as passing. With no view set the element says so instead of showing data.
  *
- * Events (host runs the named plugin command, then sets a fresh `view`):
- *   run-check  detail { command: 'code-quality-check', args: ['--tier', tier] }
- *   reload     detail { command: 'code-quality-report', args: ['json'] }
+ * Explicit gate actions run the owner checker once and reload its report.
  */
 const STATUS_LABEL = {
   clean: 'Clean',
@@ -25,7 +23,7 @@ const STATUS_LABEL = {
 
 const STYLE = `
 :host { display: block; font: var(--font-body, inherit); color: var(--color-text, inherit); }
-.card { border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-md, 6px); padding: var(--space-4, 16px); background: var(--color-surface, transparent); }
+.report { border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-md, 6px); padding: var(--space-4, 16px); background: var(--color-surface, transparent); }
 .status { font-weight: 600; font-size: 1.1em; }
 .status[data-status="clean"] { color: var(--color-success, inherit); }
 .status[data-status="partial"], .status[data-status="stale"], .status[data-status="unknown-freshness"], .status[data-status="zero-scope"] { color: var(--color-warning, inherit); }
@@ -35,7 +33,7 @@ dt { opacity: .7; } dd { margin: 0; overflow-wrap: anywhere; }
 table { width: 100%; border-collapse: collapse; margin: 8px 0; }
 th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--color-border, currentColor); }
 ul { margin: 8px 0; padding-left: 20px; }
-button { font: inherit; margin-right: 8px; cursor: pointer; }
+button { font: inherit; min-height: 44px; margin-right: 8px; cursor: pointer; }
 `;
 
 function el(tag, props = {}, ...children) {
@@ -62,10 +60,13 @@ function fmtAge(ms) {
 export class CodeQualityReport extends HTMLElement {
   #view = null;
   #root = null;
+  #busy = false;
+  #notice = '';
 
   connectedCallback() {
     this.#root ||= this.attachShadow({ mode: 'open' });
     this.#render();
+    if (this.host) void this.#refresh();
   }
 
   get view() { return this.#view; }
@@ -74,19 +75,49 @@ export class CodeQualityReport extends HTMLElement {
     if (this.#root) this.#render();
   }
 
-  #emit(name, detail) {
-    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  async #read() {
+    let report;
+    try { report = await this.host.run('report', ['--json']); }
+    catch (error) { report = JSON.parse(error.message); }
+    if (typeof report?.status !== 'string') throw new Error('The owner returned no report.');
+    this.view = report;
+  }
+
+  async #refresh(tier) {
+    if (!this.host || this.#busy) return;
+    this.#busy = true;
+    this.#notice = tier ? `Running the ${tier} gates…` : 'Reading the report…';
+    this.#render();
+    const previous = this.#view?.finishedAt;
+    let failure;
+    try {
+      if (tier) {
+        try { await this.host.run('run', ['--tier', tier, '--json']); }
+        catch (error) {
+          try { failure = JSON.parse(error.message).error || 'The gate run exited nonzero.'; }
+          catch { failure = 'The gate run could not complete.'; }
+        }
+      }
+      await this.#read();
+      this.#notice = tier && (!this.#view?.finishedAt || this.#view.finishedAt === previous)
+        ? failure || 'The run did not produce a fresh report.' : '';
+    } catch {
+      this.#notice = failure || 'Could not read the latest report.';
+    } finally {
+      this.#busy = false;
+      this.#render();
+    }
   }
 
   #render() {
     const v = this.#view;
-    const card = el('div', { className: 'card' });
+    const report = el('div', { className: 'report' });
     if (!v || typeof v.status !== 'string') {
-      card.append(el('div', { className: 'status', text: 'No report data', 'data-status': 'missing' }),
-        el('p', { text: 'The host has not provided a report view. Run the code-quality-report json command.' }));
+      report.append(el('div', { className: 'status', text: 'No report data', 'data-status': 'missing' }),
+        el('p', { text: 'Reload the selected repository’s report or run its configured gates.' }));
     } else {
-      card.append(el('div', { className: 'status', text: STATUS_LABEL[v.status] || `Unknown status: ${v.status}`, 'data-status': v.status }));
-      if (v.reasons?.length) card.append(el('ul', {}, ...v.reasons.map((r) => el('li', { text: r }))));
+      report.append(el('div', { className: 'status', text: STATUS_LABEL[v.status] || `Unknown status: ${v.status}`, 'data-status': v.status }));
+      if (v.reasons?.length) report.append(el('ul', {}, ...v.reasons.map((r) => el('li', { text: r }))));
       if (v.startedAt) {
         const dl = el('dl');
         const row = (k, val) => { dl.append(el('dt', { text: k }), el('dd', { text: String(val ?? 'unknown') })); };
@@ -100,7 +131,7 @@ export class CodeQualityReport extends HTMLElement {
         row('Finished', `${v.finishedAt ?? 'unknown'} (${fmtAge(v.ageMs)})`);
         row('Duration', fmtMs(v.durationMs));
         row('Findings', `${v.totalFindings} total, ${v.blockingFindings} blocking`);
-        card.append(dl);
+        report.append(dl);
       }
       if (v.gates?.length) {
         const head = el('tr', {}, ...['Gate', 'Result', 'Files scanned', 'Findings', 'Time'].map((h) => el('th', { text: h })));
@@ -109,20 +140,21 @@ export class CodeQualityReport extends HTMLElement {
           return el('tr', {}, el('td', { text: g.id }), el('td', { text: result }),
             el('td', { text: g.scanned ?? '—' }), el('td', { text: g.skipped ? '—' : g.findings }), el('td', { text: g.skipped ? '—' : fmtMs(g.durationMs) }));
         });
-        card.append(el('table', {}, el('thead', {}, head), el('tbody', {}, ...body)));
+        report.append(el('table', {}, el('thead', {}, head), el('tbody', {}, ...body)));
       }
       if (v.findings?.length) {
-        card.append(el('ul', {}, ...v.findings.slice(0, 50).map((f) => el('li', { text: `${f.file}:${f.line}  ${f.code}  ${f.message}` }))));
-        if (v.findings.length > 50 || v.findingsTruncated) card.append(el('p', { text: 'More findings are in the report file.' }));
+        report.append(el('ul', {}, ...v.findings.slice(0, 50).map((f) => el('li', { text: `${f.file}:${f.line}  ${f.code}  ${f.message}` }))));
+        if (v.findings.length > 50 || v.findingsTruncated) report.append(el('p', { text: 'More findings are in the report file.' }));
       }
-      if (v.reportFile) card.append(el('p', { text: `Report file: ${v.reportFile}` }));
+      if (v.reportFile) report.append(el('p', { text: `Report file: ${v.reportFile}` }));
     }
-    card.append(
-      el('button', { type: 'button', text: 'Run fast check', onclick: () => this.#emit('run-check', { command: 'code-quality-check', args: ['--tier', 'fast'] }) }),
-      el('button', { type: 'button', text: 'Run full check', onclick: () => this.#emit('run-check', { command: 'code-quality-check', args: ['--tier', 'full'] }) }),
-      el('button', { type: 'button', text: 'Reload report', onclick: () => this.#emit('reload', { command: 'code-quality-report', args: ['json'] }) })
+    report.append(
+      el('button', { type: 'button', text: 'Run fast check', disabled: this.#busy, onclick: () => void this.#refresh('fast') }),
+      el('button', { type: 'button', text: 'Run full check', disabled: this.#busy, onclick: () => void this.#refresh('full') }),
+      el('button', { type: 'button', text: 'Reload report', disabled: this.#busy, onclick: () => void this.#refresh() }),
+      el('p', { role: 'status', text: this.#notice }),
     );
-    this.#root.replaceChildren(el('style', { textContent: STYLE }), card);
+    this.#root.replaceChildren(el('style', { textContent: STYLE }), report);
   }
 }
 

package/scaffold/.agent/skills/total-recall/plugins/code-quality/ui/home.mjs

@@ -0,0 +1,214 @@
+/**
+ * <code-quality-home> — the plugin's Home: where this repository's gates stand.
+ *
+ * Home reads the JSON printed by `code-quality report --json`
+ * (core/report-data.mjs), the same view the plugin's status command reads.
+ * Nothing is computed here beyond formatting: every value is a field of that
+ * view, and only status "clean" is ever shown in the success colour. With no
+ * view, Home says there is no report instead of showing data.
+ *
+ * Write subcommands (snapshot, gate, config, detect, init) are listed with
+ * their exact command and never fired from here.
+ */
+const STATUS_LABEL = {
+  clean: 'Clean',
+  partial: 'Partial coverage',
+  'unknown-freshness': 'Freshness unknown',
+  stale: 'Stale',
+  'zero-scope': 'Zero scope',
+  failed: 'Failed',
+  'unparsed-failure': 'Failed (unparsed)',
+  infrastructure: 'Infrastructure failure',
+  unreadable: 'Report unreadable',
+  missing: 'No report',
+};
+
+const TONE = {
+  clean: 'ok',
+  partial: 'warn', stale: 'warn', 'unknown-freshness': 'warn', 'zero-scope': 'warn',
+  failed: 'bad', 'unparsed-failure': 'bad', infrastructure: 'bad', unreadable: 'bad', missing: 'bad',
+};
+
+// The declared subcommands, as plugin.json names them.
+const OPERATIONS = [
+  { name: 'report', effect: 'read', command: 'total-recall code-quality report --json', what: 'Read the latest gate report. Never starts a check.' },
+  { name: 'run', effect: 'write', command: 'total-recall code-quality run --tier fast', what: 'Run the configured gates and persist a new report.' },
+  { name: 'snapshot', effect: 'write', command: 'total-recall code-quality snapshot --node <name>', what: 'Copy the exact source under test to the test node.' },
+  { name: 'gate', effect: 'write', command: 'total-recall code-quality gate list|add|remove', what: "Edit this repository's gate list." },
+  { name: 'config', effect: 'write', command: 'total-recall code-quality config get|set|validate|check', what: 'Read or change the repo-layer config.' },
+  { name: 'detect', effect: 'write', command: 'total-recall code-quality detect [--apply]', what: 'Propose gates from the repository.' },
+  { name: 'init', effect: 'write', command: 'total-recall code-quality init', what: 'Create the repo-layer config.' },
+];
+
+const STYLE = `
+:host { display: block; font: var(--font-body, inherit); color: var(--color-text, #f8fafc); }
+.home { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--color-border, #334155); border-radius: 8px; background: var(--color-background, #0f172a); }
+.mono { font-family: var(--font-mono, monospace); }
+.verdict { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
+.verdict h2 { margin: 0; font-size: 1.25em; }
+.tone-ok { color: var(--color-success, #10b981); }
+.tone-warn { color: var(--color-warning, #f59e0b); }
+.tone-bad { color: var(--color-danger, #ef4444); }
+.muted { color: var(--color-muted, #94a3b8); }
+.reasons { margin: 0; padding-left: 18px; }
+.panel { border: 1px solid var(--color-border, #334155); border-radius: 8px; background: var(--color-surface, #1e293b); padding: 12px; }
+.panel h3 { margin: 0 0 8px; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted, #94a3b8); }
+dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
+dt { color: var(--color-muted, #94a3b8); } dd { margin: 0; overflow-wrap: anywhere; }
+.gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
+.gate { border: 1px solid var(--color-border, #334155); border-radius: 6px; padding: 8px; display: grid; gap: 2px; }
+.findings { margin: 0; padding-left: 18px; }
+.ops { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.ops li { display: grid; gap: 2px; }
+.effect { font-size: .75em; text-transform: uppercase; }
+.actions { display: flex; flex-wrap: wrap; gap: 8px; }
+button { font: inherit; min-height: 44px; padding: 8px 14px; border-radius: 6px; cursor: pointer; color: var(--color-text, #f8fafc); background: transparent; border: 1px solid var(--color-border, #334155); }
+button.primary { color: var(--color-on-primary, #0f172a); background: var(--color-primary, #eab308); border-color: var(--color-primary, #eab308); }
+button.primary:hover { background: var(--color-primary-strong, #facc15); }
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
+`;
+
+function el(tag, props = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [k, v] of Object.entries(props)) {
+    if (k === 'text') node.textContent = v;
+    else if (k.startsWith('data-')) node.setAttribute(k, v);
+    else node[k] = v;
+  }
+  for (const c of children) if (c) node.append(c);
+  return node;
+}
+
+function fmtMs(ms) {
+  return typeof ms === 'number' ? `${(ms / 1000).toFixed(1)}s` : 'unknown';
+}
+
+function fmtAge(ms) {
+  if (typeof ms !== 'number') return 'unknown';
+  const min = Math.round(ms / 60000);
+  return min < 1 ? 'under a minute ago' : min < 120 ? `${min} min ago` : `${Math.round(min / 60)} h ago`;
+}
+
+function gateResult(g) {
+  if (g.skipped) return { text: `skipped (${g.tier})`, tone: 'warn' };
+  if (g.spawnError) return { text: 'spawn failed', tone: 'bad' };
+  if (g.timedOut) return { text: 'timed out', tone: 'bad' };
+  if (g.ok === true) return { text: 'passed', tone: 'ok' };
+  return { text: `failed (exit ${g.exitCode ?? 'unknown'})`, tone: 'bad' };
+}
+
+export class CodeQualityHome extends HTMLElement {
+  #view = null;
+  #root = null;
+  #readError = '';
+  #reading = false;
+
+  connectedCallback() {
+    this.#root ||= this.attachShadow({ mode: 'open' });
+    this.#render();
+    if (this.host) void this.#reload();
+  }
+
+  get view() { return this.#view; }
+  set view(value) {
+    this.#view = value && typeof value === 'object' ? value : null;
+    if (this.#root) this.#render();
+  }
+
+  async #reload() {
+    if (!this.host || this.#reading) return;
+    this.#reading = true;
+    this.#readError = '';
+    this.#render();
+    try {
+      this.view = await this.host.run('report', ['--json']);
+    } catch (error) {
+      try {
+        // A non-clean gate report exits nonzero and still returns its structured view.
+        const report = JSON.parse(error.message);
+        if (typeof report.status !== 'string') throw error;
+        this.view = report;
+      } catch {
+        this.#readError = 'The latest gate report could not be read.';
+      }
+    } finally {
+      this.#reading = false;
+      this.#render();
+    }
+  }
+
+  #verdict(v) {
+    const status = v && typeof v.status === 'string' ? v.status : null;
+    const tone = status ? TONE[status] || 'bad' : 'bad';
+    const label = status ? STATUS_LABEL[status] || `Unknown status: ${status}` : 'No report data';
+    const box = el('section', { className: 'verdict', 'data-design-component': 'verdict' },
+      el('h2', { className: `tone-${tone}`, text: label }),
+      el('span', { className: 'muted mono', text: status ? `tier ${v.tier ?? 'unknown'}` : '' }));
+    const reasons = status
+      ? (v.reasons || [])
+      : ['Reload to read the latest repository report.'];
+    return [box, reasons.length ? el('ul', { className: 'reasons' }, ...reasons.map((r) => el('li', { text: r }))) : null];
+  }
+
+  #freshness(v) {
+    const dl = el('dl');
+    const row = (k, val, mono) => dl.append(el('dt', { text: k }), el('dd', { className: mono ? 'mono' : '', text: String(val ?? 'unknown') }));
+    row('Revision at run', v.gitHead ? v.gitHead.slice(0, 12) : 'unknown', true);
+    row('Revision now', v.currentHead ? v.currentHead.slice(0, 12) : 'unknown', true);
+    row('Finished', `${v.finishedAt ?? 'unknown'} (${fmtAge(v.ageMs)})`);
+    row('Duration', fmtMs(v.durationMs));
+    row('Changed since run', Array.isArray(v.changedSinceRun) ? (v.changedSinceRun.length ? v.changedSinceRun.join(', ') : 'nothing') : 'unknown');
+    return el('section', { className: 'panel', 'data-design-component': 'freshness' }, el('h3', { text: 'Freshness' }), dl);
+  }
+
+  #coverage(v) {
+    const dl = el('dl');
+    const row = (k, val) => dl.append(el('dt', { text: k }), el('dd', { text: String(val ?? 'unknown') }));
+    row('Gates run', v.ranChecks?.length ? v.ranChecks.join(', ') : 'none');
+    row('Gates skipped', v.skippedChecks?.length ? v.skippedChecks.map((s) => `${s.id} (${s.tier})`).join(', ') : 'none');
+    row('Source files', v.sourceFileCount);
+    const gates = (v.gates || []).map((g) => {
+      const r = gateResult(g);
+      return el('div', { className: 'gate', 'data-design-component': 'gate' },
+        el('span', { className: 'mono', text: g.id }),
+        el('span', { className: `tone-${r.tone}`, text: r.text }),
+        el('span', { className: 'muted', text: g.skipped ? '' : `${g.findings ?? 0} findings · ${fmtMs(g.durationMs)}` }));
+    });
+    return el('section', { className: 'panel', 'data-design-component': 'coverage' },
+      el('h3', { text: 'Coverage' }), dl, gates.length ? el('div', { className: 'gates' }, ...gates) : el('p', { className: 'muted', text: 'No gate rows in this report.' }));
+  }
+
+  #findings(v) {
+    const list = (v.findings || []).slice(0, 10).map((f) => el('li', { className: 'mono', text: `${f.file ?? '(unknown file)'}:${f.line ?? '?'}  ${f.code ?? ''}  ${f.message ?? ''}` }));
+    return el('section', { className: 'panel', 'data-design-component': 'findings' },
+      el('h3', { text: 'Findings' }),
+      el('p', { className: v.blockingFindings ? 'tone-bad' : 'muted', text: `${v.totalFindings ?? 'unknown'} total, ${v.blockingFindings ?? 'unknown'} blocking` }),
+      list.length ? el('ul', { className: 'findings' }, ...list) : null,
+      (v.findings?.length > 10 || v.findingsTruncated) ? el('p', { className: 'muted', text: `More in ${v.reportFile ?? 'the report file'}.` }) : null);
+  }
+
+  #operations() {
+    const items = OPERATIONS.map((op) => el('li', {},
+      el('span', {}, el('span', { className: 'mono', text: op.name }), el('span', { className: `effect ${op.effect === 'read' ? 'muted' : 'tone-warn'}`, text: `  ${op.effect}` })),
+      el('span', { className: 'muted', text: op.what }),
+      el('code', { className: 'mono', text: op.command })));
+    return el('section', { className: 'panel', 'data-design-component': 'operations' }, el('h3', { text: 'Operations' }), el('ul', { className: 'ops' }, ...items));
+  }
+
+  #actions() {
+    return el('section', { className: 'actions', 'data-design-component': 'actions' },
+      el('button', { type: 'button', text: this.#reading ? 'Reading…' : 'Reload report',
+        disabled: this.#reading, onclick: () => void this.#reload() }),
+      this.#readError ? el('p', { role: 'status', text: this.#readError }) : null);
+  }
+
+  #render() {
+    const v = this.#view && typeof this.#view.status === 'string' ? this.#view : null;
+    const home = el('div', { className: 'home', 'data-design-component': 'home' }, ...this.#verdict(v));
+    if (v?.startedAt) home.append(this.#freshness(v), this.#coverage(v), this.#findings(v));
+    home.append(this.#actions(), this.#operations());
+    this.#root.replaceChildren(el('style', { textContent: STYLE }), home);
+  }
+}
+
+if (!customElements.get('code-quality-home')) customElements.define('code-quality-home', CodeQualityHome);

package/scaffold/.agent/skills/total-recall/plugins/composable-cli/DESIGN.md

@@ -0,0 +1,146 @@
+---
+version: alpha
+name: CmdSmith
+description: Pipeline Forge for composed Total Recall commands. Calm deep-teal workbench, cyan forge mark, risk read at a glance.
+colors:
+  primary: "#0891b2"
+  primary-strong: "#06b6d4"
+  primary-soft: "#0c3a47"
+  on-primary: "#ecfeff"
+  secondary: "#083344"
+  background: "#061a20"
+  surface: "#0b2731"
+  surface-raised: "#10333f"
+  line: "#1d4a57"
+  text: "#e6f6f9"
+  muted: "#93b5bd"
+  ok: "#22c55e"
+  ok-soft: "#0f3a26"
+  warn: "#eab308"
+  warn-soft: "#3a3110"
+  danger: "#ef4444"
+  danger-soft: "#3f1717"
+  info: "#38bdf8"
+  info-soft: "#0e3247"
+typography:
+  title:
+    fontFamily: "'Space Grotesk', system-ui, sans-serif"
+    fontSize: 15px
+    fontWeight: 700
+    lineHeight: 1.3
+  body:
+    fontFamily: "'Space Grotesk', system-ui, sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.5
+  label:
+    fontFamily: "'Space Grotesk', system-ui, sans-serif"
+    fontSize: 11px
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: 0.06em
+  code:
+    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.5
+rounded:
+  sm: 4px
+  md: 6px
+  lg: 10px
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  touch: 44px
+components:
+  forge-header:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.text}"
+    typography: "{typography.title}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.md}"
+  verb-row:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text}"
+    typography: "{typography.code}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.sm}"
+    height: "{spacing.touch}"
+  verb-row-selected:
+    backgroundColor: "{colors.primary-soft}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.md}"
+  risk-badge:
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.xs}"
+  inspector:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.lg}"
+  action-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.md}"
+    height: "{spacing.touch}"
+  action-danger:
+    backgroundColor: "{colors.danger-soft}"
+    textColor: "{colors.danger}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.md}"
+    height: "{spacing.touch}"
+  status-line:
+    backgroundColor: "{colors.surface-raised}"
+    textColor: "{colors.muted}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    padding: "{spacing.sm}"
+  op-sheet:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "{spacing.lg}"
+  field-list:
+    textColor: "{colors.muted}"
+    typography: "{typography.code}"
+---
+
+# CmdSmith
+
+CmdSmith is the Composable CLI plugin's brand: a forge where repeated command sequences become named, versioned verbs. The surface is a quiet deep-teal workbench. The cyan forge mark (`primary`) is reserved for the plugin wordmark, the selected verb and the one primary action on screen.
+
+## Colors
+
+- `background`, `surface`, `surface-raised` and `line` build the workbench in three depths. Text sits in `text`; supporting labels and paths in `muted`.
+- Risk is the most important signal and always reads the same way: `ok` for `read`, `warn` for `write`, `danger` for destructive and gated classes (`money`, `dns-cert`, `production-deploy`, `secret-revoke`), and `info` for scope and neutral facts. Each has a `-soft` fill for badge backgrounds so no transparency math is needed.
+
+## Typography
+
+Space Grotesk carries titles, body and labels. JetBrains Mono carries command names, paths, digests and source. Labels are uppercase with `letterSpacing` only in badges.
+
+## Layout
+
+Spacing steps are 4, 8, 12, 16 and 24 pixels. Every interactive target is at least `spacing.touch` (44px) tall. Corners are `rounded.md` on controls and `rounded.lg` on regions.
+
+## Components
+
+- `forge-header`: wordmark "CmdSmith", badge "Pipeline Forge", inventory count.
+- `verb-row` / `verb-row-selected`: one composed command with its scope tag and `risk-badge`.
+- `inspector`: the selected command's registry record, history and source.
+- `action-primary` for the single forward action (Run test); `action-danger` for remove, which always needs a second confirming click.
+- `status-line`: loading, unavailable and error states, stated in words.
+- `op-sheet` and `field-list`: the portable operation chunks.
+
+## Do and don't
+
+- Do state "Unavailable" and the reason when the host or an operation fails. Don't show placeholder numbers.
+- Don't name vendors or implementation details in visible text. Don't use neon glow, scanlines or glitch effects.

package/scaffold/.agent/skills/total-recall/plugins/composable-cli/package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "tr-plugin-composable-cli",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tr-plugin-composable-cli",
-      "version": "0.2.5",
+      "version": "0.3.0",
       "license": "MIT",
       "dependencies": {
         "@gregiteen/ssss-cli": "0.14.5"
       },
       "devDependencies": {
-        "total-recall-brain": "3.43.3"
+        "total-recall-brain": "3.45.0"
       }
     },
     "node_modules/@alcalzone/ansi-tokenize": {
@@ -5543,9 +5543,9 @@
       }
     },
     "node_modules/total-recall-brain": {
-      "version": "3.43.3",
-      "resolved": "https://registry.npmjs.org/total-recall-brain/-/total-recall-brain-3.43.3.tgz",
-      "integrity": "sha512-yjfPN/BQxEEa+iodyFXQov/6fRt1pZg/7RcmgsbpALwBt6Ki3JJjT3tzArBC7NxHQmXgGYyKnCYId6xe/W2rPg==",
+      "version": "3.45.0",
+      "resolved": "https://registry.npmjs.org/total-recall-brain/-/total-recall-brain-3.45.0.tgz",
+      "integrity": "sha512-HDYfROazZbsLHQsFPnlBcSpe1HL1QEi7JG8x/eNRUI06RxVQsZWl8LwBo2lTWjWRDrKmCy7BUmSXQDuWF3lrEw==",
       "dev": true,
       "license": "MIT",
       "workspaces": [
@@ -5553,7 +5553,7 @@
       ],
       "dependencies": {
         "@simplewebauthn/server": "^13.3.2",
-        "@ssss/cli": "npm:@gregiteen/ssss-cli@0.14.4",
+        "@ssss/cli": "npm:@gregiteen/ssss-cli@0.14.5",
         "bcrypt": "^6.0.0",
         "better-sqlite3": "^12.11.1",
         "cookie-parser": "^1.4.7",

package/scaffold/.agent/skills/total-recall/plugins/composable-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tr-plugin-composable-cli",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "type": "module",
   "description": "Total Recall composable CLI plugin: create, compose, register, test and safely run custom verbs; every command listed in the instruction surfaces.",
   "scripts": {
@@ -16,6 +16,7 @@
   "files": [
     "cli.mjs",
     "plugin.json",
+    "DESIGN.md",
     "README.md",
     "LICENSE",
     "examples/",

package/scaffold/.agent/skills/total-recall/plugins/composable-cli/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://github.com/gregiteen/total-recall/blob/main/metadata.plugin.schema.json",
   "id": "composable-cli",
   "name": "Composable CLI",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Dynamic agent command composition engine with pipeline registration, versioning, and execution.",
   "author": "Total Recall contributors",
   "license": "MIT",
@@ -117,42 +117,59 @@
       "description": "Total Recall composable CLI plugin: create, compose, register, test and safely run custom verbs; every command listed in the instruction surfaces."
     }
   ],
-  "card_face": {
-    "skin": "cyber-forge",
-    "theme": "vibrant",
-    "headline": "Dynamic Agent Command Composition",
-    "primary_color": "#0891b2",
-    "secondary_color": "#083344",
-    "accent_color": "#06b6d4",
-    "touch_layout": "comfortable",
-    "interactive": true,
-    "quick_actions": [
-      {
-        "subcommand": "library",
-        "label": "LIBRARY"
-      },
-      {
-        "subcommand": "list",
-        "label": "LIST"
-      },
-      {
-        "subcommand": "show",
-        "label": "SHOW"
-      },
-      {
-        "subcommand": "history",
-        "label": "HISTORY"
-      }
-    ]
-  },
   "ui": {
+    "home": "home",
+    "design_tokens": "DESIGN.md",
     "elements": [
       {
-        "id": "card",
-        "kind": "card",
-        "tag": "tr-composable-cli-card",
-        "module": "ui/card.js",
-        "description": "Pipeline Card Face"
+        "id": "home",
+        "kind": "panel",
+        "tag": "tr-composable-cli-home",
+        "module": "ui/home.js",
+        "description": "CmdSmith Home: composed commands, their records and history, with on-demand test, rollback and remove",
+        "tokens": [
+          "color-background",
+          "color-secondary",
+          "color-surface",
+          "color-surface-raised",
+          "color-line",
+          "color-text",
+          "color-muted",
+          "color-primary",
+          "color-primary-strong",
+          "color-primary-soft",
+          "color-on-primary",
+          "color-ok",
+          "color-ok-soft",
+          "color-warn",
+          "color-warn-soft",
+          "color-danger",
+          "color-danger-soft",
+          "color-info",
+          "color-info-soft",
+          "spacing-xs",
+          "spacing-sm",
+          "spacing-md",
+          "spacing-lg",
+          "spacing-touch",
+          "radius-sm",
+          "radius-md",
+          "radius-lg",
+          "typography-title-font-family",
+          "typography-title-font-size",
+          "typography-title-font-weight",
+          "typography-title-line-height",
+          "typography-body-font-family",
+          "typography-body-font-size",
+          "typography-body-line-height",
+          "typography-label-font-family",
+          "typography-label-font-size",
+          "typography-label-font-weight",
+          "typography-label-letter-spacing",
+          "typography-code-font-family",
+          "typography-code-font-size",
+          "typography-code-line-height"
+        ]
       }
     ]
   },