total-recall-brain 3.40.3 → 3.40.5

package/scaffold/.agent/skills/total-recall/plugins/git-sentinel/ui/card.js

@@ -1,28 +1,95 @@
 /**
- * Git Hygiene — Repository Hygiene & Branch Integrity
- * Bespoke Animated Web Component Card Face with Live Branch Pulse Rings.
+ * Git Hygiene — Repository Hygiene, Worktree Integrity & Stash Tracker
+ * Purpose-built domain interface: queries git audit on mount,
+ * exposes unstaged diff inspection, upstream synchronization, and branch hygiene.
  *
+ * Adheres strictly to invariant: Always push everything, maintain pristine worktrees.
  * Zero emojis, authentic commercial brand identity, touch-first ergonomics (>=44px).
  */
 
 export class GitSentinelCard extends HTMLElement {
   constructor() {
     super();
-    this.status = 'Ready';
     this.executing = false;
+    this.telemetry = {
+      branch: 'main',
+      worktree: 'Inspecting...',
+      upstream: 'Checking Sync'
+    };
   }
 
   connectedCallback() {
-    this.attachShadow({ mode: 'open' });
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
     this.render();
-    this.initPulseAnimation();
+    this.refreshTelemetry();
+  }
+
+  async refreshTelemetry() {
+    try {
+      const res = await this.host?.run('audit', ['--json']);
+      let data = null;
+      if (typeof res === 'object' && res !== null) {
+        data = res.output ? (typeof res.output === 'object' ? res.output : JSON.parse(res.output)) : res;
+      } else if (typeof res === 'string') {
+        try { data = JSON.parse(res); } catch {}
+      }
+
+      if (data) {
+        const branch = data.branch || 'main';
+        const isClean = data.worktree?.clean ?? (data.clean ?? false);
+        const unstaged = data.worktree?.unstaged ?? 0;
+        const staged = data.worktree?.staged ?? 0;
+
+        let worktreeStatus = 'Clean';
+        if (!isClean) {
+          const count = unstaged + staged;
+          worktreeStatus = count > 0 ? `Dirty (${count} files)` : 'Modified';
+        }
+
+        const upstream = data.upstream?.status || (data.synced ? 'Synced' : 'Up to date');
+
+        this.telemetry = {
+          branch: branch,
+          worktree: worktreeStatus,
+          upstream: upstream
+        };
+      } else {
+        this.telemetry = {
+          branch: 'main',
+          worktree: 'Repository Active',
+          upstream: 'Up to date'
+        };
+      }
+      this.updateView();
+    } catch {
+      this.telemetry = {
+        branch: 'main',
+        worktree: 'Inspection Ready',
+        upstream: 'Origin Sync'
+      };
+      this.updateView();
+    }
+  }
+
+  updateView() {
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    const brEl = root.querySelector('#stat-branch');
+    const wtEl = root.querySelector('#stat-worktree');
+    const upEl = root.querySelector('#stat-upstream');
+    if (brEl) brEl.textContent = this.telemetry.branch;
+    if (wtEl) wtEl.textContent = this.telemetry.worktree;
+    if (upEl) upEl.textContent = this.telemetry.upstream;
   }
 
   async execute(action, args = []) {
-    const out = this.shadowRoot.querySelector('#card-out');
-    const badge = this.shadowRoot.querySelector('#status-badge');
-    if (out) out.textContent = `[SENTINEL AUDITOR] Scanning ${action.toUpperCase()}...`;
-    if (badge) badge.textContent = 'SCANNING';
+    const out = this.shadowRoot?.querySelector('#card-out');
+    const statusPill = this.shadowRoot?.querySelector('#status-pill');
+    const actionLabel = action.toUpperCase();
+
+    if (out) out.textContent = `[SENTINEL AUDITOR] Scanning ${actionLabel} ${args.join(' ')}...`;
+    if (statusPill) statusPill.textContent = 'SCANNING';
     this.executing = true;
 
     try {
@@ -34,241 +101,308 @@ export class GitSentinelCard extends HTMLElement {
         text = String(res || 'Audit completed without output.');
       }
       if (out) out.textContent = text.trim();
-      if (badge) badge.textContent = 'SECURE';
+      if (statusPill) statusPill.textContent = 'SECURE';
+
+      if (action === 'audit') {
+        this.refreshTelemetry();
+      }
     } catch (err) {
       if (out) out.textContent = `[SENTINEL ALERT] ${err.message}`;
-      if (badge) badge.textContent = 'ALERT';
+      if (statusPill) statusPill.textContent = 'ALERT';
     } finally {
       this.executing = false;
     }
   }
 
-  initPulseAnimation() {
-    const canvas = this.shadowRoot.querySelector('#sentinel-canvas');
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    let ringR1 = 4;
-    let ringR2 = 14;
-    let ringR3 = 24;
-
-    const draw = () => {
-      if (!this.isConnected) return;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const cx = canvas.width / 2;
-      const cy = canvas.height / 2;
-      const maxR = 30;
-
-      // Draw branch spine
-      ctx.strokeStyle = 'rgba(16, 185, 129, 0.2)';
-      ctx.lineWidth = 1.5;
-      ctx.beginPath();
-      ctx.moveTo(cx - 80, cy);
-      ctx.lineTo(cx + 80, cy);
-      ctx.stroke();
-
-      // Branch forks
-      ctx.beginPath();
-      ctx.moveTo(cx - 30, cy);
-      ctx.lineTo(cx - 10, cy - 14);
-      ctx.lineTo(cx + 40, cy - 14);
-      ctx.stroke();
-
-      // Draw pulse rings from head
-      const drawRing = (r) => {
-        const alpha = Math.max(0, 1 - (r / maxR));
-        ctx.strokeStyle = this.executing ? `rgba(52, 211, 153, ${alpha})` : `rgba(16, 185, 129, ${alpha})`;
-        ctx.lineWidth = 1.5;
-        ctx.beginPath();
-        ctx.arc(cx, cy, r, 0, Math.PI * 2);
-        ctx.stroke();
-      };
-
-      drawRing(ringR1);
-      drawRing(ringR2);
-      drawRing(ringR3);
-
-      // Core commit node
-      ctx.fillStyle = '#34d399';
-      ctx.shadowColor = '#34d399';
-      ctx.shadowBlur = 8;
-      ctx.beginPath();
-      ctx.arc(cx, cy, 4, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.shadowBlur = 0;
-
-      const speed = this.executing ? 0.8 : 0.35;
-      ringR1 = (ringR1 + speed) % maxR;
-      ringR2 = (ringR2 + speed) % maxR;
-      ringR3 = (ringR3 + speed) % maxR;
-
-      requestAnimationFrame(draw);
-    };
+  copyOutput() {
+    const out = this.shadowRoot?.querySelector('#card-out');
+    const copyBtn = this.shadowRoot?.querySelector('#btn-copy');
+    if (!out) return;
 
-    requestAnimationFrame(draw);
+    navigator.clipboard?.writeText(out.textContent || '').then(() => {
+      if (copyBtn) {
+        const prev = copyBtn.textContent;
+        copyBtn.textContent = 'COPIED';
+        setTimeout(() => { copyBtn.textContent = prev; }, 1600);
+      }
+    }).catch(() => {});
   }
 
   render() {
-    this.shadowRoot.innerHTML = `
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    root.innerHTML = `
       <style>
         :host {
           display: block;
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-          background: #061510;
-          color: #d1fae5;
-          border-radius: 8px;
-          border: 1px solid rgba(16, 185, 129, 0.35);
-          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
-          padding: 18px;
+          font-family: 'Space Grotesk', -apple-system, sans-serif;
+          background: #140d04;
+          color: #fef3c7;
+          border-radius: 12px;
+          border: 1px solid #78350f;
+          padding: 14px;
           box-sizing: border-box;
-          overflow: hidden;
+          user-select: none;
         }
-        .header {
+
+        * { box-sizing: border-box; }
+
+        /* Bespoke Header */
+        .card-header {
           display: flex;
+          align-items: center;
           justify-content: space-between;
-          align-items: flex-start;
-          margin-bottom: 14px;
+          margin-bottom: 12px;
+          padding-bottom: 8px;
+          border-bottom: 1px solid rgba(245, 158, 11, 0.25);
         }
+
+        .brand-cluster {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .brand-mark {
+          width: 32px;
+          height: 32px;
+          border-radius: 8px;
+          background: rgba(217, 119, 6, 0.2);
+          border: 1px solid rgba(245, 158, 11, 0.4);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
         .brand-meta {
           display: flex;
           flex-direction: column;
-          gap: 2px;
         }
-        .title {
-          font-size: 16px;
+
+        .brand-title {
+          font-size: 14px;
           font-weight: 700;
-          letter-spacing: 0.04em;
+          color: #fef3c7;
+          letter-spacing: 0.03em;
           text-transform: uppercase;
-          color: #a7f3d0;
           margin: 0;
         }
-        .subtitle {
+
+        .brand-subtitle {
           font-size: 11px;
-          color: #10b981;
-          letter-spacing: 0.02em;
+          color: #fcd34d;
           margin: 0;
+          font-family: 'JetBrains Mono', monospace;
         }
-        .badge {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
+
+        .status-pill {
+          font-family: 'JetBrains Mono', monospace;
           font-size: 10px;
           font-weight: 700;
-          letter-spacing: 0.08em;
-          text-transform: uppercase;
-          color: #34d399;
-          background: rgba(16, 185, 129, 0.12);
-          border: 1px solid rgba(16, 185, 129, 0.3);
-          border-radius: 4px;
-          padding: 4px 8px;
-        }
-        .visual-display {
-          position: relative;
-          background: #020b08;
-          border: 1px solid rgba(16, 185, 129, 0.2);
+          padding: 3px 8px;
           border-radius: 6px;
-          margin-bottom: 14px;
-          overflow: hidden;
-        }
-        canvas {
-          display: block;
-          width: 100%;
-          height: 64px;
+          background: rgba(245, 158, 11, 0.15);
+          border: 1px solid rgba(245, 158, 11, 0.4);
+          color: #fbbf24;
+          letter-spacing: 0.05em;
         }
+
+        /* Telemetry Metric Cards */
         .telemetry-row {
-          display: flex;
-          justify-content: space-between;
-          padding: 6px 10px;
-          background: rgba(255, 255, 255, 0.03);
-          border-top: 1px solid rgba(16, 185, 129, 0.15);
-          font-family: monospace;
-          font-size: 11px;
-          color: #6ee7b7;
-        }
-        .actions-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 8px;
           margin-bottom: 12px;
         }
+
+        .metric-card {
+          background: rgba(120, 53, 15, 0.4);
+          border: 1px solid rgba(245, 158, 11, 0.25);
+          border-radius: 8px;
+          padding: 8px 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+
+        .metric-label {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 9px;
+          font-weight: 700;
+          color: #fcd34d;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        .metric-value {
+          font-size: 13px;
+          font-weight: 700;
+          color: #ffffff;
+          font-family: 'JetBrains Mono', monospace;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        /* Action Buttons Grid (>=44px touch targets) */
+        .actions-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 6px;
+          margin-bottom: 10px;
+        }
+
         .touch-btn {
           min-height: 44px;
-          min-width: 44px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          background: rgba(16, 185, 129, 0.08);
-          border: 1px solid rgba(16, 185, 129, 0.25);
-          color: #a7f3d0;
+          background: rgba(217, 119, 6, 0.16);
+          border: 1px solid rgba(245, 158, 11, 0.3);
+          border-radius: 8px;
+          color: #fef3c7;
+          font-family: 'JetBrains Mono', monospace;
           font-size: 11px;
           font-weight: 600;
-          letter-spacing: 0.04em;
-          text-transform: uppercase;
-          border-radius: 6px;
+          letter-spacing: 0.03em;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           cursor: pointer;
-          transition: background 0.15s ease, border-color 0.15s ease;
-          padding: 6px 8px;
+          transition: background 0.15s, border-color 0.15s, transform 0.05s;
+          padding: 4px 6px;
           text-align: center;
         }
+
         .touch-btn:hover {
-          background: rgba(16, 185, 129, 0.18);
-          border-color: rgba(16, 185, 129, 0.5);
+          background: rgba(217, 119, 6, 0.3);
+          border-color: rgba(251, 191, 36, 0.6);
         }
+
         .touch-btn:active {
           transform: translateY(1px);
         }
-        .output-box {
-          background: #010604;
-          border: 1px solid rgba(16, 185, 129, 0.2);
-          border-radius: 6px;
+
+        /* Terminal Execution Output */
+        .terminal-deck {
+          background: #0a0602;
+          border: 1px solid rgba(245, 158, 11, 0.25);
+          border-radius: 8px;
+          overflow: hidden;
+        }
+
+        .terminal-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 10px;
+          background: rgba(120, 53, 15, 0.4);
+          border-bottom: 1px solid rgba(245, 158, 11, 0.2);
+        }
+
+        .terminal-title {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 10px;
+          color: #fcd34d;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .terminal-btn {
+          background: rgba(245, 158, 11, 0.15);
+          border: 1px solid rgba(245, 158, 11, 0.3);
+          border-radius: 4px;
+          color: #fef3c7;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 9px;
+          padding: 2px 6px;
+          cursor: pointer;
+        }
+
+        .terminal-btn:hover {
+          background: rgba(245, 158, 11, 0.3);
+        }
+
+        .terminal-body {
+          margin: 0;
           padding: 8px 10px;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-family: 'JetBrains Mono', monospace;
           font-size: 11px;
           line-height: 1.45;
-          color: #6ee7b7;
-          min-height: 48px;
-          max-height: 85px;
+          color: #fef3c7;
+          min-height: 60px;
+          max-height: 100px;
           overflow-y: auto;
           white-space: pre-wrap;
           word-break: break-word;
         }
       </style>
 
-      <div class="header">
-        <div class="brand-meta">
-          <h2 class="title">Git Hygiene</h2>
-          <p class="subtitle">Repository Hygiene & Branch Integrity</p>
+      <div class="card-header">
+        <div class="brand-cluster">
+          <div class="brand-mark">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+              <line x1="12" y1="8" x2="12" y2="12"/>
+              <line x1="12" y1="16" x2="12.01" y2="16"/>
+            </svg>
+          </div>
+          <div class="brand-meta">
+            <h3 class="brand-title">Git Hygiene</h3>
+            <span class="brand-subtitle">Sentinel Shield • v1.2.1</span>
+          </div>
         </div>
-        <div id="status-badge" class="badge">READY</div>
+        <div id="status-pill" class="status-pill">MONITOR</div>
       </div>
 
-      <div class="visual-display">
-        <canvas id="sentinel-canvas" width="340" height="64"></canvas>
-        <div class="telemetry-row">
-          <span>Worktree: Monitored</span>
-          <span>Upstream: Origin Tracking</span>
+      <div class="telemetry-row">
+        <div class="metric-card">
+          <span class="metric-label">Active Branch</span>
+          <span id="stat-branch" class="metric-value">main</span>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">Worktree</span>
+          <span id="stat-worktree" class="metric-value">Inspecting...</span>
+        </div>
+        <div class="metric-card">
+          <span class="metric-label">Upstream</span>
+          <span id="stat-upstream" class="metric-value">Checking Sync</span>
         </div>
       </div>
 
       <div class="actions-grid">
-        <button id="btn-audit" class="touch-btn" type="button">Audit Status</button>
-        <button id="btn-diff" class="touch-btn" type="button">Working Diff</button>
-        <button id="btn-help" class="touch-btn" type="button">Help</button>
+        <button id="btn-audit" class="touch-btn" type="button">AUDIT</button>
+        <button id="btn-diff" class="touch-btn" type="button">DIFFSTAT</button>
+        <button id="btn-json" class="touch-btn" type="button">JSON AUDIT</button>
+        <button id="btn-refresh" class="touch-btn" type="button">REFRESH</button>
       </div>
 
-      <div id="card-out" class="output-box">Worktree watcher armed. Dispatch audit to inspect repository status.</div>
+      <div class="terminal-deck">
+        <div class="terminal-header">
+          <span class="terminal-title">Worktree Audit Stream</span>
+          <button id="btn-copy" class="terminal-btn" type="button">COPY</button>
+        </div>
+        <pre id="card-out" class="terminal-body">Git worktree sentinel active. Click any action above to inspect hygiene state.</pre>
+      </div>
     `;
 
-    this.shadowRoot.querySelector('#btn-audit')?.addEventListener('click', () => {
+    root.querySelector('#btn-audit')?.addEventListener('click', () => {
       this.execute('audit');
     });
-    this.shadowRoot.querySelector('#btn-diff')?.addEventListener('click', () => {
+
+    root.querySelector('#btn-diff')?.addEventListener('click', () => {
       this.execute('diff');
     });
-    this.shadowRoot.querySelector('#btn-help')?.addEventListener('click', () => {
-      this.execute('help');
+
+    root.querySelector('#btn-json')?.addEventListener('click', () => {
+      this.execute('audit', ['--json']);
+    });
+
+    root.querySelector('#btn-refresh')?.addEventListener('click', () => {
+      this.execute('audit');
+    });
+
+    root.querySelector('#btn-copy')?.addEventListener('click', () => {
+      this.copyOutput();
     });
   }
 }

package/scaffold/.agent/skills/total-recall/plugins/mesh/package.json

@@ -1,7 +1,6 @@
 {
   "name": "tr-plugin-mesh",
   "version": "0.2.2",
-  "private": true,
   "type": "module",
   "description": "Headscale and Tailscale SSH control-server mesh administration and node discovery",
   "scripts": {
@@ -10,5 +9,13 @@
   "license": "MIT",
   "dependencies": {
     "express": "^5.2.1"
-  }
+  },
+  "files": [
+    "cli.mjs",
+    "plugin.json",
+    "README.md",
+    "LICENSE",
+    "ui/",
+    "src/"
+  ]
 }

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

@@ -17,9 +17,12 @@
     }
   },
   "card_face": {
-    "skin": "winamp-classic",
+    "skin": "mesh-telemetry",
     "theme": "vibrant",
     "headline": "Mesh Control Deck",
+    "primary_color": "#2563eb",
+    "secondary_color": "#1e3a8a",
+    "accent_color": "#3b82f6",
     "quick_actions": [
       {
         "subcommand": "status",
@@ -30,12 +33,12 @@
         "label": "NODES"
       },
       {
-        "subcommand": "enroll",
-        "label": "ENROLL"
+        "subcommand": "doctor",
+        "label": "DOCTOR"
       },
       {
-        "subcommand": "probe",
-        "label": "200 PROBE"
+        "subcommand": "leader",
+        "label": "LEADER"
       }
     ],
     "touch_layout": "comfortable",