total-recall-brain 3.41.2 → 3.41.4

package/scaffold/.agent/skills/total-recall/plugins/composable-cli/ui/card.js

@@ -1,445 +1,571 @@
 /**
- * CmdSmith — Dynamic Agent Command Composition Engine
- * Bespoke Purpose-Built Web Component Card Face.
+ * Pipe Dream — Composable CLI Pipeline Forge Console
  *
- * Exposes live composed command inventory, dynamic execution inspection,
- * version history, and interactive pipeline actions with zero decorative gimmicks.
- *
- * Zero emojis, authentic commercial brand identity, touch-first ergonomics (>=44px).
+ * Bespoke operator interface for dynamic agent command composition.
+ * Displays real-time command matrix, risk classifications, argument schema,
+ * and version snapshot controls with zero template wrappers or terminal dumps.
  */
 
+const DASH = '\u2014';
+
+function escapeHtml(str) {
+  if (str === null || str === undefined) return '';
+  return String(str).replace(/[&<>"']/g, c => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  }[c]));
+}
+
 export class PipelineComposerCard extends HTMLElement {
   constructor() {
     super();
+    this.commands = [];
+    this.selectedCommand = null;
+    this.commandDetail = null;
     this.executing = false;
-    this.telemetry = {
-      commandsCount: '7 Active',
-      scope: 'Global / Project',
-      status: 'Engine Ready'
-    };
+    this.activeScope = 'all';
+    this.screens = [{ id: 'forge', label: 'Command Forge' }];
+    this.screen = 'forge';
   }
 
   connectedCallback() {
-    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
     this.render();
-    this.refreshTelemetry();
+    this.refreshCommands();
   }
 
-  async refreshTelemetry() {
+  async refreshCommands() {
+    if (!this.host) return;
     try {
-      const res = await this.host?.run('list', []);
-      let text = '';
-      if (typeof res === 'object') {
-        text = res.output || JSON.stringify(res, null, 2);
+      const res = await this.host.run('library', ['--json']);
+      let parsed = [];
+      if (Array.isArray(res)) {
+        parsed = res;
+      } else if (res && typeof res === 'object' && Array.isArray(res.commands)) {
+        parsed = res.commands;
+      } else if (typeof res === 'string' && res.trim().startsWith('[')) {
+        parsed = JSON.parse(res);
       } else {
-        text = String(res || '');
+        // Fallback to list
+        const listRes = await this.host.run('list', ['--json']);
+        if (Array.isArray(listRes)) parsed = listRes;
+        else if (listRes && typeof listRes === 'object' && Array.isArray(listRes.commands)) parsed = listRes.commands;
       }
 
-      const lines = text.split('\n').filter(l => l.trim().startsWith('-'));
-      const count = lines.length;
-
-      this.telemetry = {
-        commandsCount: count > 0 ? `${count} Commands` : '0 Commands',
-        scope: text.includes('global') ? 'Global & Project' : 'Project Scope',
-        status: 'Engine Ready'
-      };
-      this.updateView();
+      this.commands = parsed;
+      if (this.commands.length > 0 && !this.selectedCommand) {
+        this.selectedCommand = this.commands[0].name;
+        await this.inspectCommand(this.selectedCommand);
+      } else {
+        this.render();
+      }
     } catch {
-      this.telemetry = {
-        commandsCount: 'Registry Active',
-        scope: 'Local Scope',
-        status: 'Online'
-      };
-      this.updateView();
+      this.commands = [];
+      this.render();
     }
   }
 
-  updateView() {
-    const root = this.shadowRoot;
-    if (!root) return;
-
-    const countEl = root.querySelector('#stat-count');
-    const scopeEl = root.querySelector('#stat-scope');
-    const statusEl = root.querySelector('#stat-status');
-    if (countEl) countEl.textContent = this.telemetry.commandsCount;
-    if (scopeEl) scopeEl.textContent = this.telemetry.scope;
-    if (statusEl) statusEl.textContent = this.telemetry.status;
+  async inspectCommand(name) {
+    this.selectedCommand = name;
+    if (!this.host) return;
+    try {
+      const detail = await this.host.run('read', [name, '--json']);
+      this.commandDetail = detail && typeof detail === 'object' ? detail : { name, code: String(detail || '') };
+    } catch {
+      this.commandDetail = null;
+    }
+    this.render();
   }
 
-  async execute(action, args = []) {
-    const out = this.shadowRoot?.querySelector('#card-out');
-    const statusBadge = this.shadowRoot?.querySelector('#status-pill');
-    const actionLabel = action.toUpperCase();
-
-    if (out) out.textContent = `[CMDSMITH ROUTER] Invoking ${actionLabel} ${args.join(' ')}...`;
-    if (statusBadge) statusBadge.textContent = 'ROUTING';
+  async testCommand(name) {
+    if (!this.host || this.executing) return;
     this.executing = true;
+    this.render();
 
     try {
-      const res = await this.host?.run(action, args);
-      let text = '';
-      if (typeof res === 'object') {
-        text = res.output || JSON.stringify(res, null, 2);
-      } else {
-        text = String(res || 'Execution completed with no return payload.');
-      }
-      if (out) out.textContent = text.trim();
-      if (statusBadge) statusBadge.textContent = 'READY';
-
-      if (['create', 'update', 'remove', 'rollback', 'promote'].includes(action)) {
-        this.refreshTelemetry();
+      const result = await this.host.run('test', [name, '--json']);
+      if (this.commandDetail) {
+        this.commandDetail.lastResult = result;
       }
     } catch (err) {
-      if (out) out.textContent = `[CMDSMITH FAULT] ${err.message}`;
-      if (statusBadge) statusBadge.textContent = 'ERROR';
+      if (this.commandDetail) {
+        this.commandDetail.lastError = err instanceof Error ? err.message : 'Execution failed';
+      }
     } finally {
       this.executing = false;
+      this.render();
     }
   }
 
-  copyOutput() {
-    const out = this.shadowRoot?.querySelector('#card-out');
-    const copyBtn = this.shadowRoot?.querySelector('#btn-copy');
-    if (!out) return;
-
-    navigator.clipboard?.writeText(out.textContent || '').then(() => {
-      if (copyBtn) {
-        const prev = copyBtn.textContent;
-        copyBtn.textContent = 'COPIED';
-        setTimeout(() => { copyBtn.textContent = prev; }, 1600);
-      }
-    }).catch(() => {});
+  setScopeFilter(scope) {
+    this.activeScope = scope;
+    this.render();
   }
 
   render() {
     const root = this.shadowRoot;
     if (!root) return;
 
+    const filtered = this.commands.filter(c => {
+      if (this.activeScope === 'project') return c.scope === 'project';
+      if (this.activeScope === 'global') return c.scope === 'global';
+      return true;
+    });
+
+    const activeCmd = this.commands.find(c => c.name === this.selectedCommand) || this.commands[0];
+    const detail = this.commandDetail;
+
     root.innerHTML = `
       <style>
         :host {
+          --face-bg: #09090b;
+          --face-surface: #18181b;
+          --face-line: #27272a;
+          --face-text: #f4f4f5;
+          --face-muted: #a1a1aa;
+          --face-brand: #a855f7;
+          --face-brand-hover: #c084fc;
+          --face-accent: #22c55e;
+          --face-ok: #22c55e;
+          --face-warn: #eab308;
+          --face-danger: #ef4444;
+          --face-info: #38bdf8;
+          --face-dark: #09090b;
+
           display: block;
-          font-family: 'Space Grotesk', -apple-system, sans-serif;
-          background: #03151e;
-          color: #ecfeff;
-          border-radius: 12px;
-          border: 1px solid #0e4a5e;
-          padding: 14px;
+          font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+          color: var(--text-primary, var(--face-text));
+          background: var(--bg-secondary, var(--face-bg));
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 8px;
+          padding: 16px;
           box-sizing: border-box;
-          user-select: none;
+          overflow: hidden;
         }
 
-        * { box-sizing: border-box; }
+        @media (prefers-reduced-motion: reduce) {
+          *, ::before, ::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
+        }
 
-        /* Bespoke Header */
-        .card-header {
+        /* Header Bar */
+        .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          margin-bottom: 12px;
-          padding-bottom: 8px;
-          border-bottom: 1px solid rgba(6, 182, 212, 0.2);
+          flex-wrap: wrap;
+          gap: 12px;
+          padding-bottom: 14px;
+          border-bottom: 1px solid var(--border, var(--face-line));
+          margin-bottom: 16px;
         }
 
-        .brand-cluster {
+        .brand-group {
           display: flex;
           align-items: center;
           gap: 10px;
         }
 
-        .brand-mark {
-          width: 32px;
-          height: 32px;
-          border-radius: 8px;
-          background: rgba(8, 145, 178, 0.2);
-          border: 1px solid rgba(6, 182, 212, 0.4);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
+        .wordmark-badge {
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 13px;
+          font-weight: 800;
+          letter-spacing: 0.05em;
+          color: var(--card-accent, var(--face-brand));
+          background: rgba(168, 85, 247, 0.12);
+          padding: 6px 10px;
+          border-radius: 6px;
+          border: 1px solid rgba(168, 85, 247, 0.3);
         }
 
-        .brand-meta {
+        .title-meta {
           display: flex;
           flex-direction: column;
         }
 
-        .brand-title {
+        .plugin-title {
           font-size: 14px;
           font-weight: 700;
-          color: #cffafe;
-          letter-spacing: 0.03em;
-          text-transform: uppercase;
+          color: var(--text-primary, var(--face-text));
           margin: 0;
         }
 
-        .brand-subtitle {
+        .plugin-subtitle {
           font-size: 11px;
-          color: #67e8f9;
+          color: var(--text-secondary, var(--face-muted));
           margin: 0;
-          font-family: 'JetBrains Mono', monospace;
         }
 
-        .status-pill {
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 10px;
+        .inventory-chip {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 11px;
           font-weight: 700;
-          padding: 3px 8px;
+          color: var(--face-accent);
+          background: rgba(34, 197, 94, 0.12);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+          padding: 5px 12px;
           border-radius: 6px;
-          background: rgba(6, 182, 212, 0.15);
-          border: 1px solid rgba(6, 182, 212, 0.4);
-          color: #22d3ee;
-          letter-spacing: 0.05em;
+          text-transform: uppercase;
         }
 
-        /* Telemetry Metric Cards */
-        .telemetry-row {
+        /* Main Workspace Split */
+        .workspace-split {
           display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 8px;
-          margin-bottom: 12px;
-        }
-
-        .metric-card {
-          background: rgba(8, 47, 61, 0.6);
-          border: 1px solid rgba(6, 182, 212, 0.25);
-          border-radius: 8px;
-          padding: 8px 10px;
-          display: flex;
-          flex-direction: column;
-          gap: 2px;
+          grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.6fr);
+          gap: 14px;
+          margin-bottom: 16px;
         }
 
-        .metric-label {
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 9px;
-          font-weight: 700;
-          color: #67e8f9;
-          letter-spacing: 0.05em;
-          text-transform: uppercase;
+        @media (max-width: 680px) {
+          .workspace-split {
+            grid-template-columns: 1fr;
+          }
         }
 
-        .metric-value {
-          font-size: 13px;
-          font-weight: 700;
-          color: #ffffff;
-          font-family: 'JetBrains Mono', monospace;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+        /* Command List Deck */
+        .deck-column {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
         }
 
-        /* Target Command Input Selector */
-        .target-box {
+        .scope-filters {
           display: flex;
           align-items: center;
-          gap: 8px;
-          margin-bottom: 10px;
-          background: rgba(0, 0, 0, 0.35);
-          border: 1px solid rgba(6, 182, 212, 0.2);
-          border-radius: 8px;
-          padding: 4px 8px;
-        }
-
-        .target-label {
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 10px;
-          color: #67e8f9;
-          text-transform: uppercase;
-          white-space: nowrap;
+          gap: 6px;
         }
 
-        .target-input {
-          flex: 1;
+        .btn-scope {
+          min-height: 44px;
+          min-width: 44px;
+          padding: 6px 12px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 11px;
+          font-weight: 600;
+          color: var(--text-secondary, var(--face-muted));
           background: transparent;
-          border: none;
-          color: #ecfeff;
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 12px;
-          outline: none;
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 5px;
+          cursor: pointer;
         }
 
-        .target-input::placeholder {
-          color: rgba(103, 232, 249, 0.4);
+        .btn-scope[data-active="true"] {
+          color: var(--text-primary, var(--face-text));
+          background: rgba(168, 85, 247, 0.15);
+          border-color: var(--card-accent, var(--face-brand));
         }
 
-        /* Action Buttons Grid (>=44px touch targets) */
-        .actions-grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
+        .command-list {
+          display: flex;
+          flex-direction: column;
           gap: 6px;
-          margin-bottom: 10px;
+          max-height: 320px;
+          overflow-y: auto;
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 6px;
+          padding: 6px;
+          background: rgba(24, 24, 27, 0.5);
         }
 
-        .touch-btn {
+        .command-item {
           min-height: 44px;
-          background: rgba(8, 145, 178, 0.16);
-          border: 1px solid rgba(6, 182, 212, 0.3);
-          border-radius: 8px;
-          color: #ecfeff;
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 11px;
-          font-weight: 600;
-          letter-spacing: 0.03em;
+          padding: 8px 10px;
           display: flex;
           align-items: center;
-          justify-content: center;
+          justify-content: space-between;
+          border: 1px solid transparent;
+          border-radius: 5px;
+          background: transparent;
+          color: var(--text-primary, var(--face-text));
           cursor: pointer;
-          transition: background 0.15s, border-color 0.15s, transform 0.05s;
-          padding: 4px 6px;
-          text-align: center;
+          text-align: left;
+          width: 100%;
+          box-sizing: border-box;
+          transition: background 0.15s ease;
         }
 
-        .touch-btn:hover {
-          background: rgba(8, 145, 178, 0.3);
-          border-color: rgba(6, 182, 212, 0.6);
+        .command-item:hover {
+          background: rgba(39, 39, 42, 0.5);
         }
 
-        .touch-btn:active {
-          transform: translateY(1px);
+        .command-item[data-selected="true"] {
+          background: rgba(168, 85, 247, 0.18);
+          border-color: var(--face-brand);
         }
 
-        /* Terminal Execution Output */
-        .terminal-deck {
-          background: #010c12;
-          border: 1px solid rgba(6, 182, 212, 0.25);
-          border-radius: 8px;
-          overflow: hidden;
+        .cmd-name {
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 12px;
+          font-weight: 700;
         }
 
-        .terminal-header {
+        .badges-group {
           display: flex;
           align-items: center;
-          justify-content: space-between;
-          padding: 6px 10px;
-          background: rgba(8, 47, 61, 0.4);
-          border-bottom: 1px solid rgba(6, 182, 212, 0.2);
+          gap: 6px;
         }
 
-        .terminal-title {
-          font-family: 'JetBrains Mono', monospace;
-          font-size: 10px;
-          color: #67e8f9;
+        .risk-badge {
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 9px;
+          font-weight: 700;
+          padding: 2px 6px;
+          border-radius: 4px;
           text-transform: uppercase;
-          letter-spacing: 0.05em;
         }
 
-        .terminal-btn {
-          background: rgba(6, 182, 212, 0.15);
-          border: 1px solid rgba(6, 182, 212, 0.3);
-          border-radius: 4px;
-          color: #cffafe;
-          font-family: 'JetBrains Mono', monospace;
+        .risk-read {
+          color: var(--face-ok);
+          background: rgba(34, 197, 94, 0.15);
+        }
+
+        .risk-write {
+          color: var(--face-warn);
+          background: rgba(234, 179, 8, 0.15);
+        }
+
+        .risk-destructive {
+          color: var(--face-danger);
+          background: rgba(239, 68, 68, 0.15);
+        }
+
+        .risk-send {
+          color: var(--face-info);
+          background: rgba(56, 189, 248, 0.15);
+        }
+
+        .scope-tag {
           font-size: 9px;
-          padding: 2px 6px;
-          cursor: pointer;
+          color: var(--text-secondary, var(--face-muted));
+          border: 1px solid var(--border, var(--face-line));
+          padding: 1px 4px;
+          border-radius: 3px;
         }
 
-        .terminal-btn:hover {
-          background: rgba(6, 182, 212, 0.3);
+        /* Inspector View */
+        .inspector-panel {
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 6px;
+          background: rgba(24, 24, 27, 0.5);
+          padding: 14px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
         }
 
-        .terminal-body {
+        .inspector-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-bottom: 10px;
+          border-bottom: 1px solid var(--border, var(--face-line));
+        }
+
+        .inspector-title {
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 13px;
+          font-weight: 700;
+          color: var(--text-primary, var(--face-text));
           margin: 0;
-          padding: 8px 10px;
-          font-family: 'JetBrains Mono', monospace;
+        }
+
+        .action-run {
+          min-height: 44px;
+          padding: 8px 16px;
+          font-family: var(--font-sans, sans-serif);
+          font-size: 12px;
+          font-weight: 700;
+          color: var(--face-dark);
+          background: var(--face-brand);
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          transition: background 0.2s ease;
+        }
+
+        .action-run:hover {
+          background: var(--face-brand-hover);
+        }
+
+        .action-run:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .detail-meta-row {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          font-size: 11px;
+          color: var(--text-secondary, var(--face-muted));
+        }
+
+        .meta-entry {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+
+        .meta-entry strong {
+          color: var(--text-primary, var(--face-text));
+        }
+
+        .code-preview-box {
+          background: rgba(9, 9, 11, 0.8);
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 5px;
+          padding: 10px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
           font-size: 11px;
-          line-height: 1.45;
-          color: #cffafe;
-          min-height: 60px;
-          max-height: 100px;
+          line-height: 1.5;
+          color: var(--text-primary, var(--face-text));
+          max-height: 160px;
           overflow-y: auto;
           white-space: pre-wrap;
-          word-break: break-word;
+          word-break: break-all;
+        }
+
+        .result-container {
+          padding: 8px 12px;
+          border-radius: 5px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 11px;
+        }
+
+        .result-success {
+          background: rgba(34, 197, 94, 0.12);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+          color: var(--face-ok);
+        }
+
+        .result-failure {
+          background: rgba(239, 68, 68, 0.12);
+          border: 1px solid rgba(239, 68, 68, 0.3);
+          color: var(--face-danger);
+        }
+
+        .empty-command-box {
+          padding: 32px 16px;
+          text-align: center;
+          font-size: 12px;
+          color: var(--text-secondary, var(--face-muted));
+        }
+
+        /* Footer Telemetry */
+        .footer-bar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 12px;
+          margin-top: 14px;
+          border-top: 1px solid var(--border, var(--face-line));
+          font-size: 10px;
+          color: var(--text-secondary, var(--face-muted));
         }
       </style>
 
-      <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="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M4 17l6-6-6-6"/>
-              <path d="M12 19h8"/>
-              <circle cx="16" cy="8" r="2"/>
-            </svg>
-          </div>
-          <div class="brand-meta">
-            <h3 class="brand-title">CmdSmith</h3>
-            <span class="brand-subtitle">Pipeline Forge • v0.2.1</span>
+      <div class="header">
+        <div class="brand-group">
+          <div class="wordmark-badge">[PIPE//DREAM]</div>
+          <div class="title-meta">
+            <h3 class="plugin-title">Composable CLI Forge</h3>
+            <p class="plugin-subtitle">Dynamic agent command composition and execution</p>
           </div>
         </div>
-        <div id="status-pill" class="status-pill">READY</div>
-      </div>
-
-      <div class="telemetry-row">
-        <div class="metric-card">
-          <span class="metric-label">Commands</span>
-          <span id="stat-count" class="metric-value">7 Active</span>
-        </div>
-        <div class="metric-card">
-          <span class="metric-label">Scope</span>
-          <span id="stat-scope" class="metric-value">Global / Project</span>
-        </div>
-        <div class="metric-card">
-          <span class="metric-label">Engine</span>
-          <span id="stat-status" class="metric-value">Engine Ready</span>
+        <div class="inventory-chip">
+          ${this.commands.length > 0 ? `${this.commands.length} Verbs Active` : 'No Commands'}
         </div>
       </div>
 
-      <div class="target-box">
-        <span class="target-label">Target Command:</span>
-        <input id="cmd-input" class="target-input" type="text" value="tr-first" placeholder="e.g. tr-first, brand-lint" />
-      </div>
+      <div class="workspace-split">
+        <div class="deck-column">
+          <div class="scope-filters">
+            <button class="btn-scope" data-active="${this.activeScope === 'all'}" type="button" id="scope-all">All</button>
+            <button class="btn-scope" data-active="${this.activeScope === 'project'}" type="button" id="scope-project">Project</button>
+            <button class="btn-scope" data-active="${this.activeScope === 'global'}" type="button" id="scope-global">Global</button>
+          </div>
 
-      <div class="actions-grid">
-        <button id="btn-library" class="touch-btn" type="button">LIBRARY</button>
-        <button id="btn-list" class="touch-btn" type="button">LIST</button>
-        <button id="btn-show" class="touch-btn" type="button">SHOW</button>
-        <button id="btn-history" class="touch-btn" type="button">HISTORY</button>
-        <button id="btn-test" class="touch-btn" type="button">TEST</button>
-        <button id="btn-status" class="touch-btn" type="button">STATUS</button>
-      </div>
+          <div class="command-list">
+            ${filtered.length > 0 ? filtered.map(c => `
+              <button class="command-item" data-selected="${c.name === this.selectedCommand}" type="button" data-cmd="${escapeHtml(c.name)}">
+                <span class="cmd-name">${escapeHtml(c.name)}</span>
+                <div class="badges-group">
+                  <span class="risk-badge risk-${escapeHtml(c.risk || 'read')}">${escapeHtml(c.risk || 'read')}</span>
+                  <span class="scope-tag">${escapeHtml(c.scope || 'proj')}</span>
+                </div>
+              </button>
+            `).join('') : `
+              <div class="empty-command-box">No composed commands in this scope.</div>
+            `}
+          </div>
+        </div>
 
-      <div class="terminal-deck">
-        <div class="terminal-header">
-          <span class="terminal-title">Console Output</span>
-          <button id="btn-copy" class="terminal-btn" type="button">COPY</button>
+        <div class="inspector-panel">
+          ${activeCmd ? `
+            <div class="inspector-header">
+              <h4 class="inspector-title">${escapeHtml(activeCmd.name)}</h4>
+              <button class="action-run" type="button" id="btn-test" ${this.executing ? 'disabled' : ''}>
+                ${this.executing ? 'Executing...' : 'Test Verb'}
+              </button>
+            </div>
+
+            <div class="detail-meta-row">
+              <div class="meta-entry"><span>Scope:</span> <strong>${escapeHtml(activeCmd.scope || 'project')}</strong></div>
+              <div class="meta-entry"><span>Risk:</span> <strong class="risk-badge risk-${escapeHtml(activeCmd.risk || 'read')}">${escapeHtml(activeCmd.risk || 'read')}</strong></div>
+              <div class="meta-entry"><span>Updated:</span> <strong>${activeCmd.updated_at ? new Date(activeCmd.updated_at).toLocaleDateString() : DASH}</strong></div>
+            </div>
+
+            ${detail?.lastResult ? `
+              <div class="result-container result-success">
+                Return: ${escapeHtml(JSON.stringify(detail.lastResult))}
+              </div>
+            ` : detail?.lastError ? `
+              <div class="result-container result-failure">
+                Failure: ${escapeHtml(detail.lastError)}
+              </div>
+            ` : ''}
+
+            <div class="code-preview-box">${escapeHtml(detail?.code || detail?.source || '// Select a composed verb to inspect implementation')}</div>
+          ` : `
+            <div class="empty-command-box">Select or create a composed command to inspect properties.</div>
+          `}
         </div>
-        <pre id="card-out" class="terminal-body">Dynamic agent command composition engine ready. Click any action above to inspect pipeline state.</pre>
       </div>
-    `;
 
-    const getTarget = () => {
-      const input = root.querySelector('#cmd-input');
-      return (input?.value || 'tr-first').trim();
-    };
-
-    root.querySelector('#btn-library')?.addEventListener('click', () => {
-      this.execute('library');
-    });
+      <div class="footer-bar">
+        <span>Engine: Composable CLI v0.2.2</span>
+        <span>Scope: ${this.activeScope.toUpperCase()}</span>
+      </div>
+    `;
 
-    root.querySelector('#btn-list')?.addEventListener('click', () => {
-      this.execute('list');
-    });
+    // Event listeners
+    root.querySelector('#scope-all')?.addEventListener('click', () => this.setScopeFilter('all'));
+    root.querySelector('#scope-project')?.addEventListener('click', () => this.setScopeFilter('project'));
+    root.querySelector('#scope-global')?.addEventListener('click', () => this.setScopeFilter('global'));
 
-    root.querySelector('#btn-show')?.addEventListener('click', () => {
-      this.execute('show', [getTarget()]);
-    });
-
-    root.querySelector('#btn-history')?.addEventListener('click', () => {
-      this.execute('history', [getTarget()]);
+    root.querySelectorAll('.command-item').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const cmd = btn.getAttribute('data-cmd');
+        if (cmd) this.inspectCommand(cmd);
+      });
     });
 
     root.querySelector('#btn-test')?.addEventListener('click', () => {
-      this.execute('test', [getTarget()]);
-    });
-
-    root.querySelector('#btn-status')?.addEventListener('click', () => {
-      this.execute('status');
-    });
-
-    root.querySelector('#btn-copy')?.addEventListener('click', () => {
-      this.copyOutput();
+      if (this.selectedCommand) this.testCommand(this.selectedCommand);
     });
   }
 }