total-recall-brain 3.44.0 → 3.46.0

package/scaffold/.agent/skills/total-recall/plugins/automations/ui/home.js

@@ -0,0 +1,278 @@
+/** Automations control ledger. Values come only from the inventory owner. */
+const SCREENS = [
+  { id: 'scheduled', label: 'Scheduled' }, { id: 'nodes', label: 'Nodes' },
+  { id: 'audit', label: 'Audit' }, { id: 'run', label: 'Run' },
+];
+const escape = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const words = (value) => String(value ?? 'unknown').replaceAll('_', ' ').replaceAll('-', ' ');
+const date = (value) => value && Number.isFinite(Date.parse(value)) ? new Date(value).toLocaleString() : '— not recorded';
+const stateClass = (value) => ['error', 'failed', 'offline', 'unreachable', 'unauthorized'].includes(value) ? 'bad' : 'neutral';
+
+/** Decode the host wrapper without turning command failures into inventory. */
+export function decodeInventory(result) {
+  if (result?.success === false || (typeof result?.exitCode === 'number' && result.exitCode !== 0) || (typeof result?.code === 'number' && result.code !== 0)) {
+    throw new Error(result.error || 'Inventory command failed');
+  }
+  let data = result?.output !== undefined ? result.output : result;
+  if (typeof data === 'string') {
+    try { data = JSON.parse(data); } catch { throw new Error('Inventory returned invalid JSON'); }
+  }
+  if (!data || !Array.isArray(data.nodes) || data.nodes.some((node) => !node || !Array.isArray(node.automations))) {
+    throw new Error('Inventory response is incomplete or unsupported');
+  }
+  return data;
+}
+
+export class AutomationsElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.screen = 'scheduled';
+    this.filters = { node: '', source: '', trigger: '', state: '' };
+    this.inventory = null;
+    this.phase = 'unchecked';
+    this.error = '';
+    this.feedback = '';
+    this.selected = '';
+    this.request = 0;
+    this.attemptedAt = null;
+    this.pendingControl = null;
+    this.localOnly = true;
+    this.showInventoryJson = false;
+    this.boundClick = (event) => this.click(event);
+    this.boundChange = (event) => this.change(event);
+    this.boundKey = (event) => this.key(event);
+    this.boundScreen = (event) => {
+      if (event.detail?.pluginId === this.host?.pluginId) this.selectScreen(event.detail.screen);
+    };
+  }
+
+  get host() { return this._host; }
+  set host(value) {
+    this._host = value;
+    if (this.isConnected && value?.run) void this.refresh();
+  }
+  get screens() { return SCREENS; }
+
+  connectedCallback() {
+    this.shadowRoot.addEventListener('click', this.boundClick);
+    this.shadowRoot.addEventListener('change', this.boundChange);
+    this.shadowRoot.addEventListener('keydown', this.boundKey);
+    window.addEventListener('plugin-show-screen', this.boundScreen);
+    this.render();
+    if (this.host?.run) void this.refresh();
+  }
+
+  disconnectedCallback() {
+    this.request++;
+    this.controller?.abort();
+    this.shadowRoot.removeEventListener('click', this.boundClick);
+    this.shadowRoot.removeEventListener('change', this.boundChange);
+    this.shadowRoot.removeEventListener('keydown', this.boundKey);
+    window.removeEventListener('plugin-show-screen', this.boundScreen);
+  }
+
+  async invoke(command, args = []) {
+    if (!this.host?.run) throw new Error('Authenticated automation bridge unavailable');
+    return this.host.run(command, args);
+  }
+
+  async refresh() {
+    const request = ++this.request;
+    this.controller?.abort();
+    this.controller = new AbortController();
+    this.phase = 'loading'; this.inventory = null; this.error = ''; this.feedback = ''; this.pendingControl = null;
+    this.showInventoryJson = false;
+    this.attemptedAt = new Date().toISOString();
+    this.render();
+    try {
+      const data = decodeInventory(await this.invoke('list', this.localOnly ? ['--local'] : []));
+      if (request !== this.request || !this.isConnected) return;
+      this.inventory = data; this.phase = 'ready';
+    } catch (error) {
+      if (request !== this.request || !this.isConnected) return;
+      this.inventory = null; this.phase = 'error';
+      this.error = error.message || 'Automation inventory unavailable';
+    }
+    this.render();
+  }
+
+  records() {
+    return (this.inventory?.nodes || []).flatMap((node) => node.automations.map((item) => ({
+      ...item, _node: node, _key: `${node.node_id || node.ip || node.hostname}:${item.id || `${item.plugin_id}:${item.command}`}`,
+    })));
+  }
+  filteredRecords() {
+    return this.records().filter((item) =>
+      (!this.filters.node || this.nodeKey(item._node) === this.filters.node) &&
+      (!this.filters.source || item.source === this.filters.source) &&
+      (!this.filters.trigger || item.trigger?.kind === this.filters.trigger) &&
+      (!this.filters.state || item.state === this.filters.state));
+  }
+  nodeKey(node) { return String(node.node_id || node.ip || node.hostname || ''); }
+  selectedRecord() {
+    const records = this.filteredRecords();
+    return records.find((item) => item._key === this.selected) || records[0];
+  }
+  selectScreen(screen, focus = false) {
+    if (!SCREENS.some((item) => item.id === screen)) return;
+    this.screen = screen; this.feedback = ''; this.pendingControl = null; this.render();
+    this.host?.screenChanged?.(screen);
+    if (focus) this.shadowRoot.querySelector(`[data-screen="${screen}"]`)?.focus();
+  }
+  key(event) {
+    const tab = event.target.closest('[data-screen]');
+    if (!tab) return;
+    const index = SCREENS.findIndex((item) => item.id === tab.dataset.screen);
+    const next = event.key === 'ArrowRight' ? (index + 1) % SCREENS.length
+      : event.key === 'ArrowLeft' ? (index + SCREENS.length - 1) % SCREENS.length
+        : event.key === 'Home' ? 0 : event.key === 'End' ? SCREENS.length - 1 : null;
+    if (next === null) return;
+    event.preventDefault(); this.selectScreen(SCREENS[next].id, true);
+  }
+  change(event) {
+    const filter = event.target.dataset.filter;
+    if (!(filter in this.filters)) return;
+    this.filters[filter] = event.target.value; this.selected = ''; this.pendingControl = null; this.render();
+    this.shadowRoot.querySelector(`[data-filter="${filter}"]`)?.focus();
+  }
+  click(event) {
+    const button = event.target.closest('button');
+    if (!button || button.disabled) return;
+    if (button.dataset.screen) this.selectScreen(button.dataset.screen, true);
+    else if (button.dataset.record) {
+      this.selected = button.dataset.record; this.pendingControl = null; this.render();
+      const selected = [...this.shadowRoot.querySelectorAll('[data-record]')].find((item) => item.dataset.record === this.selected);
+      selected?.focus();
+    } else if (button.dataset.action === 'refresh') void this.refresh();
+    else if (button.dataset.action === 'scope') { this.localOnly = !this.localOnly; void this.refresh(); }
+    else if (button.dataset.action === 'inventory-json') this.toggleInventoryJson();
+    else if (button.dataset.action === 'confirm-control') void this.executeControl(this.pendingControl?.index, true);
+    else if (button.dataset.action === 'dismiss-control') { this.pendingControl = null; this.render(); }
+    else if (button.dataset.control) void this.executeControl(Number(button.dataset.control));
+  }
+
+  toggleInventoryJson() {
+    if (!this.inventory) return;
+    this.showInventoryJson = !this.showInventoryJson;
+    this.render();
+    if (this.showInventoryJson) {
+      const field = this.shadowRoot.querySelector('#inventory-json-value');
+      field.focus();
+      field.select();
+    } else {
+      this.shadowRoot.querySelector('[data-action="inventory-json"]').focus();
+    }
+  }
+
+  async executeControl(index, confirmed = false) {
+    const item = this.selectedRecord();
+    const action = item?.actions?.[index];
+    if (!action || typeof action.command !== 'string' || !Array.isArray(action.args) || !action.args.every((arg) => typeof arg === 'string')) return;
+    if (Array.isArray(this.host?.operations) && !this.host.operations.includes(action.command)) {
+      this.feedback = 'Action unavailable for this access level'; this.render(); return;
+    }
+    if (!['read', 'write', 'destructive', 'send'].includes(action.effect)) {
+      this.feedback = 'Action unavailable: source did not declare its effect'; this.render(); return;
+    }
+    if (action.effect !== 'read') {
+      if (!confirmed) { this.pendingControl = { key: item._key, index }; this.render(); return; }
+      if (this.pendingControl?.key !== item._key || this.pendingControl.index !== index) return;
+    }
+    this.pendingControl = null;
+    this.feedback = 'Submitting source action…'; this.render();
+    const request = this.request;
+    try {
+      const result = await this.invoke(action.command, action.args);
+      if (request !== this.request || !this.isConnected) return;
+      if (result?.success === false || result?.code > 0 || result?.exitCode > 0) throw new Error(result.error || 'Source rejected the action');
+      await this.refresh();
+      if (this.isConnected) this.feedback = 'Source action completed; inventory refreshed';
+    } catch (error) {
+      if (request !== this.request || !this.isConnected) return;
+      this.feedback = `Action failed: ${error.message}`;
+    }
+    if (this.isConnected) this.render();
+  }
+
+  renderFilters() {
+    const records = this.records();
+    const options = (values, selected) => '<option value="">All</option>' + [...new Set(values.filter(Boolean))].sort().map((value) => `<option value="${escape(value)}" ${selected === value ? 'selected' : ''}>${escape(words(value))}</option>`).join('');
+    return `<div class="filters">
+      <label>Node<select data-filter="node">${'<option value="">All</option>' + (this.inventory?.nodes || []).map((node) => `<option value="${escape(this.nodeKey(node))}" ${this.filters.node === this.nodeKey(node) ? 'selected' : ''}>${escape(node.hostname || node.ip || 'Unnamed node')}</option>`).join('')}</select></label>
+      <label>Source<select data-filter="source">${options(records.map((item) => item.source), this.filters.source)}</select></label>
+      <label>Trigger<select data-filter="trigger">${options(records.map((item) => item.trigger?.kind), this.filters.trigger)}</select></label>
+      <label>State<select data-filter="state">${options(records.map((item) => item.state), this.filters.state)}</select></label>
+    </div>`;
+  }
+
+  renderDetails(item, controls = false) {
+    if (!item) return '<section class="detail"><h3>No automation selected</h3><p>Select a record after discovery.</p></section>';
+    const knownBool = (value, yes, no) => value === true ? yes : value === false ? no : '— not reported';
+    const run = item.last_run;
+    return `<section class="detail"><p class="eyebrow">${escape(words(item.source || 'source not reported'))}</p><h3>${escape(item.name || item.intent || item.id || item.command)}</h3>
+      <dl>
+        <dt>Trigger</dt><dd>${escape(item.trigger?.summary || item.schedule || '— not reported')} <span class="subtle">${escape(item.trigger?.kind || '')}</span></dd>
+        <dt>Enabled</dt><dd>${escape(knownBool(item.enabled, 'Enabled', 'Disabled'))}</dd>
+        <dt>Runner</dt><dd>${escape(knownBool(item.runner_available, 'Available', 'Unavailable'))}</dd>
+        <dt>Node</dt><dd>${escape(item._node.hostname || item._node.ip || '— not reported')}</dd>
+        <dt>Placement</dt><dd>${escape(words(item.placement || 'not reported'))}</dd>
+        <dt>Origin</dt><dd class="mono">${escape(item.origin || item.id || '— not reported')}</dd>
+        <dt>Last handled slot</dt><dd>${escape(item.last_handled_slot || '— not recorded')}</dd>
+        <dt>Observed run</dt><dd>${run ? `${escape(words(run.state))} · ${escape(date(run.at))}${run.exit_code != null ? ` · exit ${escape(run.exit_code)}` : ''}` : '— no run outcome recorded'}</dd>
+      </dl>
+      ${controls ? this.renderControls(item) : '<p class="note">A handled slot is scheduling evidence. It does not establish a successful run.</p>'}
+    </section>`;
+  }
+  renderControls(item) {
+    const actions = Array.isArray(item.actions) ? item.actions : [];
+    const pending = this.pendingControl?.key === item._key ? actions[this.pendingControl.index] : null;
+    return `<div class="source-actions">${actions.length ? actions.map((action, index) => `<button data-control="${index}" ${this.feedback === 'Submitting source action…' ? 'disabled' : ''}>${escape(action.label || words(action.command))}<span class="effect">${escape(action.effect || 'effect not declared')}</span></button>`).join('') : '<p>No executable controls were advertised by this source.</p>'}</div>${pending ? `<section class="confirmation" role="group" aria-label="Confirm source action"><p>${escape(pending.label || words(pending.command))}: <strong>${escape(item.name || item.id)}</strong>?</p><div class="source-actions"><button data-action="confirm-control">Confirm ${escape(pending.label || words(pending.command))}</button><button data-action="dismiss-control">Keep unchanged</button></div></section>` : ''}<p class="note">Actions are delegated to the source owner. Available controls depend on its capabilities and your access.</p>`;
+  }
+  renderScheduled() {
+    const records = this.filteredRecords();
+    return `${this.renderFilters()}<div class="ledger"><section class="index"><h3>Automation index <span class="count">${records.length}</span></h3>${records.length ? `<ul>${records.map((item) => `<li><button data-record="${escape(item._key)}" aria-pressed="${this.selectedRecord()?._key === item._key}"><span><strong>${escape(item.name || item.intent || item.id || item.command)}</strong><small>${escape(item._node.hostname || item._node.ip)} · ${escape(words(item.source || 'source not reported'))}</small></span><span class="state ${stateClass(item.state)}">${escape(words(item.state))}</span></button></li>`).join('')}</ul>` : '<p>No records match these filters.</p>'}</section>${this.renderDetails(this.selectedRecord())}</div>`;
+  }
+  renderNodes() {
+    const nodes = this.inventory?.nodes || [];
+    return `<div class="node-grid">${nodes.map((node) => `<section class="node"><header><h3>${escape(node.hostname || node.ip || 'Unnamed node')}</h3><span class="state ${stateClass(node.status)}">${escape(words(node.status))}</span></header><p class="mono">${escape(node.ip || node.node_id || '— address not reported')}</p>${node.error ? `<p class="bad">${escape(node.error)}</p>` : ''}${Array.isArray(node.coverage) && node.coverage.length ? `<ul class="coverage">${node.coverage.map((coverage) => `<li><div><strong>${escape(words(coverage.source))}</strong><span class="state ${stateClass(coverage.status)}">${escape(words(coverage.status))}</span></div>${coverage.error ? `<p>${escape(coverage.error)}</p>` : ''}<small>${escape(date(coverage.checked_at))}</small></li>`).join('')}</ul>` : '<p>— source coverage was not reported. This node cannot establish complete discovery.</p>'}</section>`).join('') || '<p>No mesh nodes were reported.</p>'}</div>`;
+  }
+  renderAudit() {
+    const records = this.filteredRecords();
+    return `${this.renderFilters()}<p class="note">Observed outcomes only. Declarations and handled slots do not prove execution.</p><ul class="audit">${records.map((item) => `<li><div><strong>${escape(item.name || item.id || item.command)}</strong><small>${escape(item._node.hostname || item._node.ip)} · ${escape(words(item.source))}</small></div><div><span class="state ${stateClass(item.last_run?.state)}">${escape(item.last_run ? words(item.last_run.state) : 'No observed run')}</span><small>${escape(date(item.last_run?.at))}</small>${item.last_run?.exit_code != null ? `<small>Exit ${escape(item.last_run.exit_code)}</small>` : ''}</div></li>`).join('') || '<li>No records match these filters.</li>'}</ul>`;
+  }
+  renderRun() {
+    const records = this.filteredRecords();
+    return `${this.renderFilters()}<div class="ledger"><section class="index"><h3>Choose a source-owned action</h3><p>Only advertised controls are executable.</p><ul>${records.map((item) => `<li><button data-record="${escape(item._key)}" aria-pressed="${this.selectedRecord()?._key === item._key}"><span><strong>${escape(item.name || item.id || item.command)}</strong><small>${escape(item._node.hostname || item._node.ip)} · ${(item.actions || []).length} advertised controls</small></span></button></li>`).join('')}</ul></section>${this.renderDetails(this.selectedRecord(), true)}</div>`;
+  }
+  render() {
+    const focus = this.shadowRoot.activeElement;
+    const focusedAction = focus?.dataset.action;
+    const status = this.phase === 'loading' ? 'Checking sources' : this.phase === 'error' ? 'Inventory unavailable'
+      : this.phase === 'ready' ? (this.inventory.complete === true ? 'Discovery complete' : 'Partial discovery — inspect source coverage') : 'Not checked';
+    const content = this.phase !== 'ready' ? `<div class="empty"><h3>${escape(status)}</h3><p>${escape(this.phase === 'error' ? this.error : this.phase === 'loading' ? 'Reading automation sources and node availability…' : 'Refresh to inspect automation sources.')}</p></div>`
+      : this.screen === 'nodes' ? this.renderNodes() : this.screen === 'audit' ? this.renderAudit() : this.screen === 'run' ? this.renderRun() : this.renderScheduled();
+    const inventoryJson = this.showInventoryJson ? `
+      <label for="inventory-json-value">Inventory JSON</label>
+      <p id="inventory-json-help" class="note">Copy the selection with your browser’s Copy command or Ctrl+C / ⌘C.</p>
+      <textarea id="inventory-json-value" aria-describedby="inventory-json-help" rows="8" readonly>${escape(JSON.stringify(this.inventory, null, 2))}</textarea>` : '';
+    this.shadowRoot.innerHTML = `
+      <style>
+      .inventory-json { padding:0 16px 16px; }
+      .inventory-json .note { margin:4px 0 8px; }
+      .inventory-json textarea { width:100%; resize:vertical; padding:8px; border:1px solid var(--automation-border); border-radius:5px; background:var(--automation-surface); color:var(--automation-text); font:12px/1.5 ui-monospace,monospace; }
+      .inventory-json textarea:focus-visible { outline:3px solid var(--automation-focus); outline-offset:3px; }
+      :host { --automation-bg:var(--color-background,#181713); --automation-surface:var(--color-surface,#24221c); --automation-text:var(--color-text,#f4efe5); --automation-muted:var(--color-muted,#c5bca9); --automation-border:var(--color-border,#726652); --automation-accent:var(--color-primary,#f2bd63); --automation-error:var(--color-error,#ffb5a9); --automation-focus:var(--color-focus,#b8d9ff); display:block; color:var(--automation-text); font:var(--typography-body-font-size,14px)/1.45 var(--typography-body-font-family,system-ui,sans-serif); min-width:0; color-scheme:dark; }
+      *,*::before,*::after { box-sizing:border-box; } button,select { font:inherit; color:inherit; min-height:44px; min-width:44px; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.6; } button:focus-visible,select:focus-visible { outline:3px solid var(--automation-focus); outline-offset:3px; } .workspace { border:1px solid var(--automation-border); border-radius:12px; background:var(--automation-bg); overflow:hidden; } .masthead { padding:20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .brand { display:flex; gap:12px; align-items:center; flex:1; min-width:0; } svg { width:40px; height:40px; color:var(--automation-accent); flex:none; } h2,h3,p { margin:0; } h2 { font-size:20px; letter-spacing:-.03em; } h3 { font-size:15px; } .eyebrow { text-transform:uppercase; letter-spacing:.11em; font-size:10px; color:var(--automation-muted); margin-bottom:4px; } .subtle,small,.note { color:var(--automation-muted); } small { display:block; font-size:11px; margin-top:3px; overflow-wrap:anywhere; } .refresh { border:1px solid var(--automation-accent); background:var(--automation-accent); color:var(--automation-bg); border-radius:7px; padding:8px 14px; font-weight:700; } .status-line { padding:12px 20px; background:var(--automation-surface); border-block:1px solid var(--automation-border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .status-line strong { font-size:12px; font-weight:600; } .tabs { display:flex; padding:8px 12px 0; gap:4px; border-bottom:1px solid var(--automation-border); } .tabs button { flex:1; background:transparent; border:0; border-bottom:3px solid transparent; padding:10px 4px; color:var(--automation-muted); } .tabs button[aria-selected=true] { border-color:var(--automation-accent); color:var(--automation-text); font-weight:700; } .body { padding:16px; min-height:200px; animation:reveal .16s ease-out; } .filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; } label { font-size:11px; color:var(--automation-muted); display:grid; gap:4px; } select { width:100%; max-width:100%; background:var(--automation-surface); border:1px solid var(--automation-border); border-radius:5px; padding:6px; } .ledger { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } .index,.detail,.node { min-width:0; } .index h3 { margin-bottom:8px; } ul { list-style:none; padding:0; margin:0; } .index ul { max-height:380px; overflow:auto; } .index li+li { margin-top:6px; } .index button { width:100%; display:flex; justify-content:space-between; gap:12px; align-items:center; text-align:left; padding:12px; background:transparent; border:1px solid var(--automation-border); border-radius:7px; } .index button[aria-pressed=true] { border-color:var(--automation-accent); background:var(--automation-surface); } strong { overflow-wrap:anywhere; } .state { display:inline-block; text-transform:none; font:11px/1.4 ui-monospace,monospace; border:1px solid var(--automation-border); border-radius:4px; padding:3px 6px; overflow-wrap:anywhere; } .bad { color:var(--automation-error); } .detail { border-left:2px solid var(--automation-accent); padding:0 0 0 16px; } .detail h3 { font-size:19px; margin-bottom:12px; overflow-wrap:anywhere; } dl { display:grid; grid-template-columns:minmax(80px,.7fr) minmax(0,1fr); gap:9px 12px; margin:0; } dt { color:var(--automation-muted); font-size:11px; } dd { margin:0; overflow-wrap:anywhere; font-size:12px; } .mono { font-family:ui-monospace,monospace; overflow-wrap:anywhere; font-size:11px; } .note { font-size:11px; margin-top:16px; } .count { font:11px ui-monospace,monospace; margin-left:4px; color:var(--automation-muted); } .node-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px; } .node { border:1px solid var(--automation-border); border-radius:8px; padding:14px; } .node header { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:4px; } .coverage { margin-top:12px; } .coverage li { border-top:1px solid var(--automation-border); padding:10px 0; } .coverage li>div { display:flex; justify-content:space-between; align-items:center; gap:12px; } .coverage strong { font-size:12px; } .coverage p { font-size:12px; margin-top:6px; } .audit li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--automation-border); } .audit li>div { min-width:0; } .audit li>div:last-child { text-align:right; } .audit { margin-top:12px; } .source-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .source-actions button { border:1px solid var(--automation-accent); border-radius:5px; background:var(--automation-surface); padding:8px 12px; } .effect { display:block; font:10px ui-monospace,monospace; color:var(--automation-muted); } .footer { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; gap:12px; border-top:1px solid var(--automation-border); } .footer button { background:transparent; border:0; color:var(--automation-muted); padding:8px; font-size:12px; } .feedback { font-size:12px; overflow-wrap:anywhere; } .empty { padding:26px 12px; } .empty p { color:var(--automation-muted); margin-top:8px; } @keyframes reveal { from { opacity:.65; } to { opacity:1; } } @media(max-width:600px) { .masthead { padding:16px; gap:10px; } .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .ledger { grid-template-columns:minmax(0,1fr); } .detail { border-left:0; border-top:2px solid var(--automation-accent); padding:16px 0 0; } .index ul { max-height:260px; } .status-line { padding:10px 16px; } .body { padding:12px; } h2 { font-size:18px; } } @media(prefers-reduced-motion:reduce) { .body { animation:none; } }
+      </style>
+      <div class="workspace"><header class="masthead"><div class="brand"><svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M4 20h9m0 0 7-11h12m-19 11 7 11h12M13 20h19" stroke="currentColor" stroke-width="2"/><circle cx="5" cy="20" r="3" fill="currentColor"/><path d="M30 6h6v6h-6zM30 17h6v6h-6zM30 28h6v6h-6z" stroke="currentColor" stroke-width="2"/></svg><div><p class="eyebrow">Triggers · sources · outcomes</p><h2>Automations</h2></div></div><button class="refresh" data-action="refresh" ${this.phase === 'loading' ? 'disabled' : ''}>Refresh</button></header>
+      <div class="status-line"><div role="status" aria-live="polite"><strong class="${this.phase === 'error' ? 'bad' : ''}">${escape(status)} · ${this.localOnly ? 'This node' : 'Mesh'}</strong><small>${this.phase === 'ready' ? 'Checked' : 'Last attempt'} ${escape(date(this.phase === 'ready' ? this.inventory.checked_at : this.attemptedAt))}</small></div><button data-action="scope" ${this.phase === 'loading' ? 'disabled' : ''}>${this.localOnly ? 'Scan mesh' : 'Use this node'}</button></div>
+      <nav class="tabs" role="tablist" aria-label="Automation views">${SCREENS.map((screen) => `<button id="tab-${screen.id}" role="tab" aria-controls="panel-${screen.id}" aria-selected="${this.screen === screen.id}" tabindex="${this.screen === screen.id ? '0' : '-1'}" data-screen="${screen.id}">${screen.label}</button>`).join('')}</nav>
+      <div class="body" id="panel-${this.screen}" role="tabpanel" aria-labelledby="tab-${this.screen}" tabindex="0" aria-busy="${this.phase === 'loading'}">${content}</div>
+      <footer class="footer"><span class="feedback" role="status">${escape(this.feedback || (this.phase === 'ready' ? 'Coverage determines completeness.' : 'No current inventory.'))}</span><button type="button" data-action="inventory-json" aria-expanded="${this.showInventoryJson}" aria-controls="inventory-json" ${this.inventory ? '' : 'disabled'}>${this.showInventoryJson ? 'Hide inventory JSON' : 'Select inventory JSON'}</button></footer>
+      <div class="inventory-json" id="inventory-json" ${this.showInventoryJson ? '' : 'hidden'}>${inventoryJson}</div></div>`;
+    if (focusedAction) this.shadowRoot.querySelector(`[data-action="${focusedAction}"]`)?.focus();
+  }
+}
+
+if (!customElements.get('tr-automations')) customElements.define('tr-automations', AutomationsElement);

package/scaffold/.agent/skills/total-recall/plugins/code-quality/DESIGN.md

@@ -0,0 +1,53 @@
+---
+name: "Code Quality Gates"
+plugin: code-quality
+tokens:
+  color-primary: "#eab308"
+  color-primary-strong: "#facc15"
+  color-background: "#0f172a"
+  color-surface: "#1e293b"
+  color-border: "#334155"
+  color-text: "#f8fafc"
+  color-muted: "#94a3b8"
+  color-accent: "#38bdf8"
+  color-success: "#10b981"
+  color-warning: "#f59e0b"
+  color-danger: "#ef4444"
+  color-on-primary: "#0f172a"
+  font-body: "'Space Grotesk', system-ui, sans-serif"
+  font-mono: "'JetBrains Mono', 'Fira Code', monospace"
+  radius-md: "8px"
+  space-4: "16px"
+components:
+  report:
+    backgroundColor: "{tokens.color-surface}"
+    textColor: "{tokens.color-text}"
+    rounded: "{tokens.radius-md}"
+    padding: "{tokens.space-4}"
+  workflow:
+    backgroundColor: "{tokens.color-background}"
+    textColor: "{tokens.color-text}"
+    rounded: "{tokens.radius-md}"
+    padding: "{tokens.space-4}"
+---
+
+# Code Quality Gates — design
+
+The plugin's own visual language, for the Home panel, the SSSS UI chunks and any
+host that themes them. Values follow `branding.color` in `plugin.json` and the
+card palette in `ui/DESIGN.md`.
+
+## Meaning of colour
+
+- `color-success`: a report with status `clean` and nothing else.
+- `color-warning`: `partial`, `stale`, `unknown-freshness`, `zero-scope`, and skipped gates.
+- `color-danger`: `failed`, `unparsed-failure`, `infrastructure`, `unreadable`, `missing`, and failing gates.
+- `color-primary`: the one action that runs gates.
+
+No colour ever signals "passing" without a `clean` report view. Absent data is
+shown as absent, in `color-muted`.
+
+## Type
+
+`font-mono` for gate ids, file paths, revisions and commands; `font-body` for
+everything else.

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

@@ -2,6 +2,7 @@
  * `total-recall code-quality <verb>` for the repository you run it from.
  *
  *   report [view] [arg]      read the latest gate report; never starts a check
+ *   run --tier fast|full    run the configured gates once
  *   snapshot --node <name>   put the exact source under test on the test node (git file list only)
  *   gate list|add|remove     edit the repo's gate list
  *   config get|set|…, detect [--apply], init
@@ -74,6 +75,28 @@ export async function run(argv = []) {
     return;
   }
 
+  if (verb === 'run') {
+    const usage = 'Usage: total-recall code-quality run [--tier fast|full] [--json]';
+    if (rest.includes('--help') || rest.includes('-h')) { console.log(usage); return; }
+    const json = rest.includes('--json');
+    const options = rest.filter((arg) => arg !== '--json');
+    const tier = options.length ? options[1] : 'fast';
+    const emitFailure = (exitCode, error) => {
+      if (json) console.log(JSON.stringify({ ok: false, exitCode, error }));
+      else console.error(error);
+      process.exitCode = exitCode;
+    };
+    if ((options.length && (options.length !== 2 || options[0] !== '--tier')) || !['fast', 'full'].includes(tier)) {
+      return emitFailure(2, usage);
+    }
+    try {
+      const { exitCode } = runCore('check.mjs', ['--tier', tier], { quiet: json });
+      if (json) console.log(JSON.stringify({ ok: exitCode === 0, exitCode, tier }));
+      if (exitCode) process.exitCode = exitCode;
+    } catch (error) { emitFailure(error.exitCode || 1, error.message); }
+    return;
+  }
+
   const moduleUrl = skillConfigModule();
   if (!moduleUrl) {
     return fail('Run this through the total-recall CLI: config verbs need a Total Recall install with skill config support.', 2);

package/scaffold/.agent/skills/total-recall/plugins/code-quality/commands/run-core.mjs

@@ -15,13 +15,15 @@ export function findSkillDir(start = process.cwd()) {
   return stateDir(start);
 }
 
-export function runCore(script, args) {
+export function runCore(script, args, { quiet = false } = {}) {
   if (!fs.existsSync(stateDir())) {
-    const error = new Error('No code-quality state in this repository (.agent/skills/code-quality). Create it: total-recall code-quality init');
+    const error = new Error('No code-quality state in this repository (.agent/skills/code-quality). Create configuration: total-recall code-quality detect --apply');
     error.exitCode = 2;
     throw error;
   }
-  const result = spawnSync(process.execPath, [path.join(CORE_DIR, script), ...args], { stdio: 'inherit' });
+  const result = spawnSync(process.execPath, [path.join(CORE_DIR, script), ...args], {
+    stdio: quiet ? ['ignore', 'ignore', 'inherit'] : 'inherit',
+  });
   if (result.error) throw result.error;
   return { exitCode: result.status ?? 1, data: { state_dir: stateDir(), script } };
 }

package/scaffold/.agent/skills/total-recall/plugins/code-quality/core/check.mjs

@@ -80,7 +80,7 @@ function loadConfig() {
   if (!existsSync(CONFIG_PATH)) {
     fail(
       `No config.json at ${CONFIG_PATH}\n` +
-      `Run:  total-recall skill config code-quality init`
+      `Run:  total-recall code-quality detect --apply`
     );
   }
   let cfg;
@@ -204,12 +204,14 @@ function acquireLock(lockPath, label) {
   const ageMs = held?.startedAt ? Date.now() - Date.parse(held.startedAt) : Infinity;
   const expired = Number.isFinite(ageMs) && ageMs > STALE_AFTER_MS;
 
-  if (STEAL_LOCK && state === 'alive') {
+  const protectedHolder = state === 'alive' || state === 'alive-foreign' ||
+    (state === 'unverifiable' && !expired);
+  if (STEAL_LOCK && protectedHolder) {
     // The machine-wide lock is shared by every repo on this host. A verified
     // live holder is another repo's (or this repo's) real run: stealing its
     // lock, or killing it, silently destroys that run's result.
     fail(
-      `--steal-lock refused: the ${label} lock is held by a verified running check ` +
+      `--steal-lock refused: the ${label} lock has a protected holder (state=${state}) ` +
       `(pid ${held.pid}, ${held.repoRoot ?? 'unknown repo'}, started ${held.startedAt ?? 'unknown'}).\n` +
       `   Wait for it to finish, or stop that process yourself if you own it.`,
       3
@@ -678,6 +680,51 @@ function runCheck(check) {
 
 // ─── Main ─────────────────────────────────────────────────────────────────────
 
+/**
+ * Restore the repository's locked dependencies before any gate runs. Idle repositories have
+ * their node_modules removed by the scheduled disk cleanup, and a gate run against a missing
+ * tree reports import failures as if the code were broken. Installs exactly what the lockfile
+ * pins, only when the installed tree is missing or older than the lockfile.
+ */
+const LOCKFILES = [
+  { file: 'package-lock.json', manager: 'npm', marker: path.join('node_modules', '.package-lock.json'), args: ['ci', '--no-audit', '--no-fund'] },
+  { file: 'pnpm-lock.yaml', manager: 'pnpm', marker: path.join('node_modules', '.modules.yaml'), args: ['install', '--frozen-lockfile'] },
+  { file: 'yarn.lock', manager: 'yarn', marker: path.join('node_modules', '.yarn-integrity'), args: ['install', '--frozen-lockfile'] },
+];
+
+function dependencyState(root) {
+  if (!existsSync(path.join(root, 'package.json'))) return { action: 'none', reason: 'no package.json' };
+  const lock = LOCKFILES.find((entry) => existsSync(path.join(root, entry.file)));
+  if (!lock) return { action: 'none', reason: 'no lockfile' };
+  const marker = path.join(root, lock.marker);
+  const stale = !existsSync(marker) || statSync(marker).mtimeMs < statSync(path.join(root, lock.file)).mtimeMs;
+  return { action: stale ? 'install' : 'present', manager: lock.manager, lockfile: lock.file, args: lock.args };
+}
+
+function ensureDependencies() {
+  const state = dependencyState(REPO_ROOT);
+  if (config.installDependencies === false || state.action !== 'install') {
+    return { ...state, action: config.installDependencies === false && state.action === 'install' ? 'disabled' : state.action, args: undefined };
+  }
+  const started = Date.now();
+  console.error(`   → dependencies: ${state.manager} ${state.args.join(' ')} (${state.lockfile})`);
+  return new Promise((resolve) => {
+    const child = spawn(state.manager, state.args, { cwd: REPO_ROOT, stdio: ['ignore', 'pipe', 'pipe'], env: process.env });
+    currentChild = child;
+    let tail = '';
+    const keep = (chunk) => { tail = (tail + chunk).slice(-4000); };
+    child.stdout.on('data', keep);
+    child.stderr.on('data', keep);
+    const done = (code, error) => {
+      currentChild = null;
+      resolve({ action: code === 0 ? 'installed' : 'failed', manager: state.manager, lockfile: state.lockfile,
+        durationMs: Date.now() - started, ...(code === 0 ? {} : { error: error || tail.trim().split('\n').slice(-20).join('\n') }) });
+    };
+    child.on('error', (err) => done(null, err.message));
+    child.on('close', (code) => done(code));
+  });
+}
+
 async function main() {
   const wantTier = TIER_ORDER[TIER];
   if (!wantTier) fail(`Unknown --tier ${TIER} (expected: fast | full | remote)`);
@@ -709,10 +756,16 @@ async function main() {
 
   const startedAt = new Date().toISOString();
   const startedMs = Date.now();
+  const testedHead = gitHead();
   console.error(` [code-quality] ${config.toolchain} — ${checks.length} check(s) in ${REPO_ROOT}`);
 
+  const dependencies = await ensureDependencies();
+  if (dependencies.action === 'failed') {
+    console.error(`      dependency install failed (${dependencies.manager}, ${dependencies.lockfile}); no gate ran:\n${dependencies.error}`);
+  }
+
   const results = [];
-  for (const check of checks) {
+  for (const check of dependencies.action === 'failed' ? [] : checks) {
     const label = check.kind === 'grep-forbid'
       ? `grep-forbid (${(check.patterns || []).length} pattern(s))`
       : (check.cmd || []).join(' ');
@@ -739,15 +792,16 @@ async function main() {
     tier: TIER,
     // Coverage is stated explicitly so a partial run can never be mistaken
     // for a clean full run when someone reads the report later.
-    ranChecks: checks.map((c) => c.id),
+    ranChecks: results.map((r) => r.id),
     skippedChecks: config.checks.filter((c) => !checks.includes(c)).map((c) => ({ id: c.id, tier: c.tier || 'fast' })),
     startedAt,
     finishedAt: new Date().toISOString(),
     durationMs: Date.now() - startedMs,
-    gitHead: gitHead(),
+    gitHead: testedHead,
     sourceFileCount: sources.length,
+    dependencies,
     checks: results.map(({ raw, findings: _f, ...meta }) => meta),
-    infrastructureFailure: results.some((r) => r.spawnError || r.timedOut),
+    infrastructureFailure: dependencies.action === 'failed' || results.some((r) => r.spawnError || r.timedOut),
     totalFindings: findings.length,
     findings
   };