total-recall-brain 3.41.2 → 3.41.3

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

@@ -1,23 +1,35 @@
 /**
- * OpenWiki — Multi-Repo Knowledge Graph & Documentation Wiki
- * Bespoke Web Component Card Face: Knowledge Amber & Ink Theme.
+ * Brain Dump — Multi-Repo Knowledge Graph & Documentation Console
  *
- * Real hub telemetry, documentation ingest controls, zero fake animations or canvases.
+ * Bespoke operator interface for cross-repository documentation and knowledge graphs.
+ * Displays real-time hub trees, file metrics, structured ingestion controllers,
+ * and bootstrap verification without 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 OpenWikiCard extends HTMLElement {
   constructor() {
     super();
-    this.status = 'READY';
+    this.hubs = [];
+    this.totalLines = 0;
     this.executing = false;
     this.targetPath = 'openwiki';
-    this.hubs = [
-      { title: 'OpenWiki', path: 'openwiki/README.md', lines: 11, size_bytes: 339 },
-      { title: 'Architecture', path: 'openwiki/architecture.md', lines: 6, size_bytes: 221 },
-      { title: 'Memory', path: 'openwiki/memory.md', lines: 12, size_bytes: 299 },
-      { title: 'Secrets & API keys', path: 'openwiki/secrets.md', lines: 8, size_bytes: 286 },
-      { title: 'Software Factory', path: 'openwiki/software-factory.md', lines: 36, size_bytes: 1833 }
-    ];
+    this.dryRun = true;
+    this.lastResult = null;
+    this.screens = [{ id: 'knowledge', label: 'Knowledge Hubs' }];
+    this.screen = 'knowledge';
   }
 
   connectedCallback() {
@@ -25,428 +37,498 @@ export class OpenWikiCard extends HTMLElement {
       this.attachShadow({ mode: 'open' });
     }
     this.render();
-    this.loadHubs();
+    this.refreshHubs();
   }
 
-  async loadHubs() {
+  async refreshHubs() {
+    if (!this.host) return;
     try {
-      if (this.host?.run) {
-        const res = await this.host.run('hubs', ['--json']);
-        if (res && Array.isArray(res.hubs)) {
-          this.hubs = res.hubs;
-          this.updateHubsUI();
-        }
+      const res = await this.host.run('status', ['--json']);
+      let parsed = [];
+      if (res && typeof res === 'object') {
+        if (Array.isArray(res.hubs)) {
+          parsed = res.hubs;
+          this.totalLines = res.total_lines || 0;
+        } else if (Array.isArray(res)) {
+          parsed = res;
+        }
+      } else if (typeof res === 'string' && res.trim().startsWith('{')) {
+        const json = JSON.parse(res);
+        parsed = Array.isArray(json.hubs) ? json.hubs : [];
+        this.totalLines = json.total_lines || 0;
       }
+
+      this.hubs = parsed;
+      this.render();
     } catch {
-      // Retain fallback hubs in disconnected state
+      this.hubs = [];
+      this.render();
     }
   }
 
-  updateHubsUI() {
-    const countEl = this.shadowRoot.querySelector('#hubs-count');
-    if (countEl) countEl.textContent = `${this.hubs.length} Hubs`;
-
-    const container = this.shadowRoot.querySelector('#hubs-container');
-    if (!container) return;
-    container.innerHTML = this.hubs.slice(0, 4).map((h) => `
-      <div class="hub-item">
-        <span class="hub-title">${h.title}</span>
-        <span class="hub-meta">${h.lines} lines · ${Math.round(h.size_bytes / 1024 * 10) / 10}KB</span>
-      </div>
-    `).join('') + (this.hubs.length > 4 ? `<div class="hub-more">+${this.hubs.length - 4} more indexed hubs</div>` : '');
-  }
-
-  async execute(action, customArgs = []) {
-    const out = this.shadowRoot.querySelector('#card-out');
-    const badge = this.shadowRoot.querySelector('#status-badge');
-    const pathInput = this.shadowRoot.querySelector('#path-input');
-    const target = pathInput ? pathInput.value.trim() : this.targetPath;
+  async runIngest() {
+    if (!this.host || this.executing) return;
+    this.executing = true;
+    this.lastResult = null;
+    this.render();
 
-    let args = [...customArgs];
-    if (action === 'ingest' && args.length === 0) {
-      args = [target || 'openwiki'];
+    try {
+      const args = [this.targetPath || 'openwiki'];
+      if (this.dryRun) args.push('--dry-run');
+      args.push('--json');
+
+      const res = await this.host.run('ingest', args);
+      this.lastResult = {
+        ok: true,
+        message: this.dryRun ? 'Dry-run preview completed' : 'Ingestion completed successfully',
+        data: res
+      };
+      await this.refreshHubs();
+    } catch (err) {
+      this.lastResult = {
+        ok: false,
+        message: err instanceof Error ? err.message : 'Ingestion failed'
+      };
+    } finally {
+      this.executing = false;
+      this.render();
     }
+  }
 
-    if (out) out.textContent = `[OPENWIKI-CLI] Executing openwiki ${action} ${args.join(' ')}...`;
-    if (badge) {
-      badge.textContent = 'BUSY';
-      badge.className = 'badge busy';
-    }
+  async runBootstrap() {
+    if (!this.host || this.executing) return;
     this.executing = true;
+    this.lastResult = null;
+    this.render();
 
     try {
-      let resultText = '';
-      if (this.host && typeof this.host.run === 'function') {
-        const res = await this.host.run(action, args);
-        if (typeof res === 'object') {
-          resultText = res.output || JSON.stringify(res, null, 2);
-        } else {
-          resultText = String(res || 'Execution completed without output.');
-        }
-      } else {
-        if (action === 'status') {
-          resultText = 'OpenWiki: implemented subcommands: probe, hubs, ingest';
-        } else if (action === 'hubs') {
-          resultText = `Discovered ${this.hubs.length} OpenWiki Hub(s):\n` + this.hubs.map((h) => `  - ${h.title}: ${h.path} (${h.lines} lines)`).join('\n');
-        } else if (action === 'probe') {
-          resultText = 'Health probe: HTTP 200 (14ms) from http://127.0.0.1:3000';
-        } else if (action === 'ingest') {
-          resultText = `OpenWiki Ingest: Processed ${args[0] || 'openwiki'} into knowledge graph. Ingest completed successfully.`;
-        }
-      }
-
-      if (out) out.textContent = resultText.trim();
-      if (badge) {
-        badge.textContent = 'READY';
-        badge.className = 'badge ready';
-      }
+      const res = await this.host.run('bootstrap', ['--json']);
+      this.lastResult = {
+        ok: true,
+        message: 'OpenWiki skeleton bootstrapped',
+        data: res
+      };
+      await this.refreshHubs();
     } catch (err) {
-      if (out) out.textContent = `[OPENWIKI ERROR] ${err.message || err}`;
-      if (badge) {
-        badge.textContent = 'ERROR';
-        badge.className = 'badge error';
-      }
+      this.lastResult = {
+        ok: false,
+        message: err instanceof Error ? err.message : 'Bootstrap failed'
+      };
     } finally {
       this.executing = false;
+      this.render();
     }
   }
 
   render() {
-    this.shadowRoot.innerHTML = `
+    const root = this.shadowRoot;
+    if (!root) return;
+
+    root.innerHTML = `
       <style>
         :host {
+          --face-bg: #0f172a;
+          --face-surface: #1e293b;
+          --face-line: #334155;
+          --face-text: #f8fafc;
+          --face-muted: #94a3b8;
+          --face-brand: #3b82f6;
+          --face-brand-hover: #60a5fa;
+          --face-accent: #facc15;
+          --face-ok: #10b981;
+          --face-warn: #f59e0b;
+          --face-danger: #ef4444;
+          --face-dark: #0f172a;
+
           display: block;
-          font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-          background: #140f06;
-          color: #fef3c7;
-          border-radius: 10px;
-          border: 1px solid rgba(217, 119, 6, 0.35);
-          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
-          padding: 18px;
+          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;
           overflow: hidden;
         }
 
+        @media (prefers-reduced-motion: reduce) {
+          *, ::before, ::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
+        }
+
+        /* Header Bar */
         .header {
           display: flex;
+          align-items: center;
           justify-content: space-between;
-          align-items: flex-start;
-          margin-bottom: 14px;
+          flex-wrap: wrap;
+          gap: 12px;
+          padding-bottom: 14px;
+          border-bottom: 1px solid var(--border, var(--face-line));
+          margin-bottom: 16px;
         }
 
-        .brand-meta {
+        .brand-group {
           display: flex;
           align-items: center;
           gap: 10px;
         }
 
-        .brand-icon {
-          width: 32px;
-          height: 32px;
-          flex-shrink: 0;
-          color: #f59e0b;
+        .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-accent));
+          background: rgba(250, 204, 21, 0.12);
+          padding: 6px 10px;
+          border-radius: 6px;
+          border: 1px solid rgba(250, 204, 21, 0.3);
         }
 
-        .title-block {
+        .title-meta {
           display: flex;
           flex-direction: column;
-          gap: 2px;
         }
 
-        .title {
-          font-size: 15px;
+        .plugin-title {
+          font-size: 14px;
           font-weight: 700;
-          letter-spacing: 0.03em;
-          text-transform: uppercase;
-          color: #fde68a;
+          color: var(--text-primary, var(--face-text));
           margin: 0;
         }
 
-        .subtitle {
+        .plugin-subtitle {
           font-size: 11px;
-          color: #d97706;
+          color: var(--text-secondary, var(--face-muted));
           margin: 0;
         }
 
-        .badge {
-          display: inline-flex;
+        .hub-count-chip {
+          display: flex;
           align-items: center;
-          font-size: 10px;
+          gap: 6px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 11px;
           font-weight: 700;
-          letter-spacing: 0.08em;
+          color: var(--face-accent);
+          background: rgba(250, 204, 21, 0.12);
+          border: 1px solid rgba(250, 204, 21, 0.3);
+          padding: 5px 12px;
+          border-radius: 6px;
           text-transform: uppercase;
-          border-radius: 4px;
-          padding: 4px 8px;
-          background: rgba(217, 119, 6, 0.15);
-          color: #fbbf24;
-          border: 1px solid rgba(217, 119, 6, 0.3);
         }
 
-        .badge.ready {
-          background: rgba(16, 185, 129, 0.15);
-          color: #34d399;
-          border-color: rgba(16, 185, 129, 0.35);
+        /* Split Layout */
+        .workspace-split {
+          display: grid;
+          grid-template-columns: minmax(260px, 1.4fr) minmax(240px, 1fr);
+          gap: 14px;
+          margin-bottom: 16px;
         }
 
-        .badge.busy {
-          background: rgba(56, 189, 248, 0.15);
-          color: #38bdf8;
-          border-color: rgba(56, 189, 248, 0.35);
+        @media (max-width: 700px) {
+          .workspace-split {
+            grid-template-columns: 1fr;
+          }
         }
 
-        .badge.error {
-          background: rgba(239, 68, 68, 0.2);
-          color: #f87171;
-          border-color: rgba(239, 68, 68, 0.4);
+        /* Hub Tree Matrix */
+        .hub-panel {
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 6px;
+          background: rgba(30, 41, 59, 0.4);
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
         }
 
-        .section-label {
-          font-size: 10px;
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: #f59e0b;
+        .panel-title {
+          font-size: 11px;
           font-weight: 700;
-          margin-bottom: 6px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--text-secondary, var(--face-muted));
+          margin: 0;
         }
 
-        .hubs-panel {
-          background: #080602;
-          border: 1px solid rgba(217, 119, 6, 0.2);
-          border-radius: 6px;
-          padding: 8px 10px;
-          margin-bottom: 12px;
+        .hub-list {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          max-height: 280px;
+          overflow-y: auto;
         }
 
         .hub-item {
+          padding: 10px 12px;
+          background: rgba(15, 23, 42, 0.6);
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 5px;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          padding: 4px 0;
-          border-bottom: 1px solid rgba(217, 119, 6, 0.1);
-          font-size: 11px;
+          justify-content: space-between;
+          gap: 10px;
         }
 
-        .hub-item:last-child {
-          border-bottom: none;
+        .hub-main {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
         }
 
         .hub-title {
-          color: #fde68a;
-          font-weight: 600;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 12px;
+          font-weight: 700;
+          color: var(--text-primary, var(--face-text));
         }
 
-        .hub-meta {
-          color: #d97706;
-          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        .hub-path {
           font-size: 10px;
+          color: var(--text-secondary, var(--face-muted));
         }
 
-        .hub-more {
+        .hub-metrics {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
           font-size: 10px;
-          color: #f59e0b;
-          text-align: center;
-          padding-top: 4px;
+          color: var(--face-accent);
         }
 
-        .target-bar {
+        /* Ingest Deck Column */
+        .ingest-deck {
           display: flex;
-          gap: 6px;
-          align-items: center;
-          margin-bottom: 12px;
+          flex-direction: column;
+          gap: 10px;
         }
 
-        .path-input {
-          flex: 1;
-          background: #080602;
-          border: 1px solid rgba(217, 119, 6, 0.3);
+        .form-card {
+          border: 1px solid var(--border, var(--face-line));
           border-radius: 6px;
-          color: #fef3c7;
-          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-          font-size: 11px;
-          padding: 7px 10px;
-          outline: none;
-          box-sizing: border-box;
+          background: rgba(30, 41, 59, 0.4);
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
         }
 
-        .path-input:focus {
-          border-color: #f59e0b;
-          box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
+        .input-row {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
         }
 
-        .preset-btn {
-          background: rgba(217, 119, 6, 0.1);
-          border: 1px solid rgba(217, 119, 6, 0.25);
-          color: #fde68a;
-          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        .input-label {
           font-size: 10px;
-          padding: 6px 8px;
-          border-radius: 4px;
-          cursor: pointer;
+          text-transform: uppercase;
+          color: var(--text-secondary, var(--face-muted));
+          letter-spacing: 0.05em;
         }
 
-        .preset-btn:hover {
-          background: rgba(217, 119, 6, 0.2);
+        .text-input {
+          min-height: 44px;
+          padding: 8px 12px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
+          font-size: 12px;
+          color: var(--text-primary, var(--face-text));
+          background: rgba(15, 23, 42, 0.8);
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 5px;
+          box-sizing: border-box;
+          width: 100%;
         }
 
-        .actions-grid {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 6px;
-          margin-bottom: 12px;
+        .text-input:focus {
+          outline: none;
+          border-color: var(--card-accent, var(--face-brand));
         }
 
-        .touch-btn {
-          min-height: 44px;
-          min-width: 44px;
-          display: inline-flex;
+        .toggle-row {
+          display: flex;
           align-items: center;
-          justify-content: center;
-          background: rgba(217, 119, 6, 0.1);
-          border: 1px solid rgba(217, 119, 6, 0.28);
-          color: #fde68a;
+          gap: 8px;
           font-size: 11px;
-          font-weight: 600;
-          letter-spacing: 0.03em;
-          text-transform: uppercase;
-          border-radius: 6px;
+          color: var(--text-secondary, var(--face-muted));
           cursor: pointer;
-          transition: background 0.15s ease, border-color 0.15s ease;
-          padding: 6px;
-          text-align: center;
-        }
-
-        .touch-btn:hover {
-          background: rgba(217, 119, 6, 0.22);
-          border-color: #f59e0b;
         }
 
-        .touch-btn:active {
-          transform: translateY(1px);
+        .toggle-check {
+          min-height: 20px;
+          min-width: 20px;
+          cursor: pointer;
         }
 
-        .touch-btn.primary {
-          background: #b45309;
-          color: #ffffff;
-          border-color: #f59e0b;
+        .btn-action-primary {
+          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-accent);
+          border: none;
+          border-radius: 5px;
+          cursor: pointer;
+          transition: background 0.15s ease;
         }
 
-        .touch-btn.primary:hover {
-          background: #d97706;
+        .btn-action-primary:hover {
+          background: #fde047;
         }
 
-        .output-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 4px;
+        .btn-action-primary:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
         }
 
-        .copy-btn {
-          background: none;
-          border: none;
-          color: #f59e0b;
-          font-size: 10px;
+        .btn-action-secondary {
+          min-height: 44px;
+          padding: 8px 16px;
+          font-family: var(--font-sans, sans-serif);
+          font-size: 12px;
+          font-weight: 700;
+          color: var(--text-primary, var(--face-text));
+          background: transparent;
+          border: 1px solid var(--border, var(--face-line));
+          border-radius: 5px;
           cursor: pointer;
-          padding: 2px 4px;
-          text-decoration: underline;
+          transition: background 0.15s ease;
         }
 
-        .copy-btn:hover {
-          color: #fde68a;
+        .btn-action-secondary:hover {
+          background: rgba(255, 255, 255, 0.05);
         }
 
-        .output-box {
-          background: #030201;
-          border: 1px solid rgba(217, 119, 6, 0.22);
-          border-radius: 6px;
-          padding: 8px 10px;
-          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        .feedback-banner {
+          padding: 8px 12px;
+          border-radius: 5px;
+          font-family: var(--font-mono, 'JetBrains Mono', monospace);
           font-size: 11px;
-          line-height: 1.45;
-          color: #fbbf24;
-          min-height: 52px;
-          max-height: 90px;
-          overflow-y: auto;
-          white-space: pre-wrap;
-          word-break: break-word;
+        }
+
+        .feedback-ok {
+          background: rgba(16, 185, 129, 0.15);
+          border: 1px solid rgba(16, 185, 129, 0.4);
+          color: var(--face-ok);
+        }
+
+        .feedback-fail {
+          background: rgba(239, 68, 68, 0.15);
+          border: 1px solid rgba(239, 68, 68, 0.4);
+          color: var(--face-danger);
+        }
+
+        .empty-hubs {
+          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="header">
-        <div class="brand-meta">
-          <svg class="brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
-            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
-            <circle cx="12" cy="10" r="2"></circle>
-          </svg>
-          <div class="title-block">
-            <h2 class="title">OpenWiki Engine</h2>
-            <p class="subtitle">Multi-Repo Knowledge Graph &amp; Docs</p>
+        <div class="brand-group">
+          <div class="wordmark-badge">[BRAIN//DUMP]</div>
+          <div class="title-meta">
+            <h3 class="plugin-title">OpenWiki Knowledge Graph</h3>
+            <p class="plugin-subtitle">Multi-repository documentation and knowledge ingestion engine</p>
           </div>
         </div>
-        <div id="status-badge" class="badge ready">READY</div>
+        <div class="hub-count-chip">
+          ${this.hubs.length > 0 ? `${this.hubs.length} Hubs Indexed` : 'No Hubs'}
+        </div>
       </div>
 
-      <div class="section-label">
-        <span>Discovered Hubs</span>
-        <span id="hubs-count" style="font-family:ui-monospace, monospace; color:#fde68a;">${this.hubs.length} Hubs</span>
-      </div>
-      <div class="hubs-panel">
-        <div id="hubs-container">
-          ${this.hubs.slice(0, 4).map((h) => `
-            <div class="hub-item">
-              <span class="hub-title">${h.title}</span>
-              <span class="hub-meta">${h.lines} lines · ${Math.round(h.size_bytes / 1024 * 10) / 10}KB</span>
-            </div>
-          `).join('')}
-          ${this.hubs.length > 4 ? `<div class="hub-more">+${this.hubs.length - 4} more indexed hubs</div>` : ''}
+      <div class="workspace-split">
+        <div class="hub-panel">
+          <h4 class="panel-title">Verified Documentation Hubs</h4>
+          <div class="hub-list">
+            ${this.hubs.length > 0 ? this.hubs.map(h => `
+              <div class="hub-item">
+                <div class="hub-main">
+                  <span class="hub-title">${escapeHtml(h.title || h.path)}</span>
+                  <span class="hub-path">${escapeHtml(h.path)}</span>
+                </div>
+                <div class="hub-metrics">
+                  <span>${h.lines !== undefined ? `${h.lines} lines` : DASH}</span>
+                </div>
+              </div>
+            `).join('') : `
+              <div class="empty-hubs">No markdown documentation hubs indexed yet. Click Bootstrap below to initialize.</div>
+            `}
+          </div>
         </div>
-      </div>
 
-      <div class="section-label">Target Ingest Directory</div>
-      <div class="target-bar">
-        <input id="path-input" class="path-input" type="text" value="openwiki" placeholder="Directory to ingest..." />
-        <button id="preset-openwiki" class="preset-btn" type="button">openwiki</button>
-        <button id="preset-docs" class="preset-btn" type="button">docs</button>
-      </div>
+        <div class="ingest-deck">
+          <div class="form-card">
+            <h4 class="panel-title">Knowledge Ingest</h4>
+            <div class="input-row">
+              <span class="input-label">Target Hub Path</span>
+              <input class="text-input" type="text" id="input-path" placeholder="openwiki" />
+            </div>
+            <label class="toggle-row">
+              <input class="toggle-check" type="checkbox" id="check-dryrun" ${this.dryRun ? 'checked' : ''} />
+              <span>Dry Run (Preview changes without writing)</span>
+            </label>
+            <button class="btn-action-primary" type="button" id="btn-ingest" ${this.executing ? 'disabled' : ''}>
+              ${this.executing ? 'Processing...' : 'Run Ingestion'}
+            </button>
+            <button class="btn-action-secondary" type="button" id="btn-bootstrap" ${this.executing ? 'disabled' : ''}>
+              Bootstrap OpenWiki Skeleton
+            </button>
+          </div>
 
-      <div class="actions-grid">
-        <button id="btn-status" class="touch-btn" type="button">Status</button>
-        <button id="btn-hubs" class="touch-btn" type="button">Hubs</button>
-        <button id="btn-probe" class="touch-btn" type="button">Probe</button>
-        <button id="btn-ingest" class="touch-btn primary" type="button">Ingest</button>
+          ${this.lastResult ? `
+            <div class="feedback-banner ${this.lastResult.ok ? 'feedback-ok' : 'feedback-fail'}">
+              ${escapeHtml(this.lastResult.message)}
+            </div>
+          ` : ''}
+        </div>
       </div>
 
-      <div class="output-header">
-        <span class="section-label" style="margin-bottom:0;">Engine Output</span>
-        <button id="btn-copy" class="copy-btn" type="button">Copy output</button>
+      <div class="footer-bar">
+        <span>Engine: OpenWiki v0.1.2</span>
+        <span>Storage: Markdown + SSSS Projections</span>
       </div>
-      <div id="card-out" class="output-box">Knowledge graph index operational. Ready for cross-repo documentation queries.</div>
     `;
 
-    const pathInput = this.shadowRoot.querySelector('#path-input');
-    this.shadowRoot.querySelector('#preset-openwiki')?.addEventListener('click', () => {
-      if (pathInput) pathInput.value = 'openwiki';
-    });
-    this.shadowRoot.querySelector('#preset-docs')?.addEventListener('click', () => {
-      if (pathInput) pathInput.value = 'docs';
-    });
-
-    this.shadowRoot.querySelector('#btn-status')?.addEventListener('click', () => this.execute('status'));
-    this.shadowRoot.querySelector('#btn-hubs')?.addEventListener('click', () => this.execute('hubs'));
-    this.shadowRoot.querySelector('#btn-probe')?.addEventListener('click', () => this.execute('probe'));
-    this.shadowRoot.querySelector('#btn-ingest')?.addEventListener('click', () => this.execute('ingest'));
-
-    this.shadowRoot.querySelector('#btn-copy')?.addEventListener('click', () => {
-      const text = this.shadowRoot.querySelector('#card-out')?.textContent || '';
-      if (navigator.clipboard) {
-        navigator.clipboard.writeText(text);
-      }
-    });
+    // Event listeners
+    const pathInput = root.querySelector('#input-path');
+    if (pathInput) {
+      pathInput.value = this.targetPath;
+      pathInput.addEventListener('input', e => {
+        this.targetPath = e.target.value;
+      });
+    }
+
+    const dryRunCheck = root.querySelector('#check-dryrun');
+    if (dryRunCheck) {
+      dryRunCheck.addEventListener('change', e => {
+        this.dryRun = e.target.checked;
+      });
+    }
+
+    root.querySelector('#btn-ingest')?.addEventListener('click', () => this.runIngest());
+    root.querySelector('#btn-bootstrap')?.addEventListener('click', () => this.runBootstrap());
   }
 }