total-recall-brain 3.41.2 → 3.41.4

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

@@ -1,452 +1,1158 @@
 /**
- * OpenWiki — Multi-Repo Knowledge Graph & Documentation Wiki
- * Bespoke Web Component Card Face: Knowledge Amber & Ink Theme.
+ * OpenWiki — Knowledge Graph & Multi-Repo Documentation Wiki
+ * Bespoke Card Face: Deep Slate & Knowledge Amber Interface.
  *
- * Real hub telemetry, documentation ingest controls, zero fake animations or canvases.
+ * Exposes live hub discovery, markdown file inspection, upstream release surveillance,
+ * and structured fleet propagation controls. Operates without mock data or boilerplate sinks.
  */
 
 export class OpenWikiCard extends HTMLElement {
+  static get screens() {
+    return [
+      { id: 'hubs', label: 'Hubs' },
+      { id: 'config', label: 'Configuration' },
+      { id: 'refresh', label: 'Fleet Refresh' },
+      { id: 'upstream', label: 'Upstream Watcher' }
+    ];
+  }
+
+  get screens() {
+    return OpenWikiCard.screens;
+  }
+
   constructor() {
     super();
-    this.status = 'READY';
-    this.executing = false;
+    this.activeScreen = 'hubs';
+    this.hubs = [];
+    this.loading = false;
+    this.statusText = 'READY';
     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 = false;
+    this.executionResult = null;
+    this.errorMessage = null;
+    this.lastRefreshedAt = null;
+    this.upstream = null;
+    this.config = {
+      provider: 'openrouter',
+      model: 'deepseek/deepseek-v4.1-flash',
+      fallback_model: 'qwen/qwen-2.5-coder-32b-instruct',
+      max_tokens: 4096,
+      timeout_ms: 300000
+    };
+    this.refreshReports = [];
+    this.refreshCounts = null;
+    this._boundOnScreenChange = this.handleExternalScreenChange.bind(this);
   }
 
   connectedCallback() {
     if (!this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
     }
+    this.addEventListener('tr:screen-change', this._boundOnScreenChange);
+    this.addEventListener('plugin-show-screen', this._boundOnScreenChange);
     this.render();
-    this.loadHubs();
+    this.refreshHubs();
+    this.loadConfig();
   }
 
-  async loadHubs() {
+  disconnectedCallback() {
+    this.removeEventListener('tr:screen-change', this._boundOnScreenChange);
+    this.removeEventListener('plugin-show-screen', this._boundOnScreenChange);
+  }
+
+  handleExternalScreenChange(event) {
+    const screenId = event.detail?.screen || event.detail?.screenId || event.detail?.id;
+    if (screenId && OpenWikiCard.screens.some((s) => s.id === screenId)) {
+      this.setScreen(screenId);
+    }
+  }
+
+  setScreen(id) {
+    if (this.activeScreen === id) return;
+    this.activeScreen = id;
+    this.errorMessage = null;
+    this.render();
+    if (typeof this.host?.screenChanged === 'function') {
+      try {
+        this.host.screenChanged({ screen: id });
+      } catch {
+        // Host screenChanged callback optional
+      }
+    }
+    if (id === 'refresh' && (!this.refreshReports || this.refreshReports.length === 0)) {
+      this.loadRefreshReport();
+    } else if (id === 'config') {
+      this.loadConfig();
+    }
+  }
+
+  async loadConfig() {
     try {
-      if (this.host?.run) {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('config', ['show', '--json']);
+        if (res?.config) {
+          this.config = res.config;
+          this.render();
+        }
+      }
+    } catch {
+      // Retain active config defaults if host call fails
+    }
+  }
+
+  async setConfigValue(key, value) {
+    this.loading = true;
+    this.errorMessage = null;
+    this.render();
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('config', ['set', key, String(value), '--json']);
+        if (res?.config) {
+          this.config = res.config;
+        }
+      }
+    } catch (err) {
+      this.errorMessage = err.message || `Failed to update ${key}`;
+    } finally {
+      this.loading = false;
+      this.render();
+    }
+  }
+
+  async resetConfig() {
+    this.loading = true;
+    this.errorMessage = null;
+    this.render();
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('config', ['reset', '--json']);
+        if (res?.config) {
+          this.config = res.config;
+        }
+      }
+    } catch (err) {
+      this.errorMessage = err.message || 'Failed to reset configuration';
+    } finally {
+      this.loading = false;
+      this.render();
+    }
+  }
+
+  async refreshHubs() {
+    this.loading = true;
+    this.errorMessage = null;
+    this.render();
+
+    try {
+      if (this.host && typeof this.host.run === 'function') {
         const res = await this.host.run('hubs', ['--json']);
         if (res && Array.isArray(res.hubs)) {
           this.hubs = res.hubs;
-          this.updateHubsUI();
+          this.statusText = 'SYNCHRONIZED';
+        } else {
+          this.hubs = [];
+          this.statusText = 'UNINDEXED';
+        }
+
+        try {
+          const statusRes = await this.host.run('status', ['--json']);
+          if (statusRes?.upstream) {
+            this.upstream = statusRes.upstream;
+          }
+        } catch {
+          // Upstream metadata optional
         }
+      } else {
+        this.statusText = 'DISCONNECTED';
       }
-    } catch {
-      // Retain fallback hubs in disconnected state
+      this.lastRefreshedAt = new Date().toLocaleTimeString();
+    } catch (err) {
+      this.statusText = 'ERROR';
+      this.errorMessage = err.message || 'Hub synchronization failure';
+      this.hubs = [];
+    } finally {
+      this.loading = false;
+      this.render();
+    }
+  }
+
+  async loadRefreshReport() {
+    this.loading = true;
+    this.errorMessage = null;
+    this.render();
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('refresh', ['--json']);
+        if (res) {
+          this.refreshReports = Array.isArray(res.reports) ? res.reports : [];
+          this.refreshCounts = res.counts || null;
+        }
+      }
+    } catch (err) {
+      this.errorMessage = err.message || 'Fleet status check failure';
+    } finally {
+      this.loading = false;
+      this.render();
     }
   }
 
-  updateHubsUI() {
-    const countEl = this.shadowRoot.querySelector('#hubs-count');
-    if (countEl) countEl.textContent = `${this.hubs.length} Hubs`;
+  async executeFleetRefresh() {
+    if (this.loading) return;
+    this.loading = true;
+    this.executionResult = null;
+    this.errorMessage = null;
+    this.render();
 
-    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>` : '');
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('refresh', ['--apply', '--json']);
+        this.executionResult = {
+          action: 'fleet-refresh',
+          target: 'all-registered-projects',
+          details: res && typeof res === 'object' ? res : { message: String(res || 'Completed') },
+          timestamp: new Date().toLocaleTimeString()
+        };
+        if (res?.reports) {
+          this.refreshReports = res.reports;
+          this.refreshCounts = res.counts;
+        }
+      } else {
+        throw new Error('Host execution context unavailable');
+      }
+    } catch (err) {
+      this.errorMessage = err.message || 'Fleet refresh execution failure';
+    } finally {
+      this.loading = false;
+      this.render();
+    }
   }
 
-  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 executeIngest() {
+    if (this.loading) return;
+    this.loading = true;
+    this.executionResult = null;
+    this.errorMessage = null;
+    this.render();
 
-    let args = [...customArgs];
-    if (action === 'ingest' && args.length === 0) {
-      args = [target || 'openwiki'];
+    const args = [this.targetPath || 'openwiki'];
+    if (this.dryRun) args.push('--dry-run');
+
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('ingest', args);
+        this.executionResult = {
+          action: 'ingest',
+          target: this.targetPath,
+          dryRun: this.dryRun,
+          details: res && typeof res === 'object' ? res : { message: String(res || 'Completed') },
+          timestamp: new Date().toLocaleTimeString()
+        };
+      } else {
+        throw new Error('Host execution context unavailable');
+      }
+    } catch (err) {
+      this.errorMessage = err.message || 'Ingestion cycle failure';
+    } finally {
+      this.loading = false;
+      this.refreshHubs();
     }
+  }
 
-    if (out) out.textContent = `[OPENWIKI-CLI] Executing openwiki ${action} ${args.join(' ')}...`;
-    if (badge) {
-      badge.textContent = 'BUSY';
-      badge.className = 'badge busy';
+  async executeBootstrap() {
+    if (this.loading) return;
+    this.loading = true;
+    this.executionResult = null;
+    this.errorMessage = null;
+    this.render();
+
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('bootstrap', ['--brain', '.', '--json']);
+        this.executionResult = {
+          action: 'bootstrap',
+          details: res && typeof res === 'object' ? res : { message: String(res || 'Completed') },
+          timestamp: new Date().toLocaleTimeString()
+        };
+      } else {
+        throw new Error('Host execution context unavailable');
+      }
+    } catch (err) {
+      this.errorMessage = err.message || 'Bootstrap procedure failure';
+    } finally {
+      this.loading = false;
+      this.refreshHubs();
     }
-    this.executing = true;
+  }
+
+  async executeWatch() {
+    if (this.loading) return;
+    this.loading = true;
+    this.executionResult = null;
+    this.errorMessage = 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.');
+        const res = await this.host.run('watch', ['--json']);
+        this.executionResult = {
+          action: 'watch',
+          details: res && typeof res === 'object' ? res : { message: String(res || 'Completed') },
+          timestamp: new Date().toLocaleTimeString()
+        };
+        if (res?.status) {
+          this.upstream = {
+            recordedVersion: res.status.currentVersion,
+            latestVersion: res.status.latestVersion
+          };
         }
       } 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.`;
-        }
+        throw new Error('Host execution context unavailable');
       }
+    } catch (err) {
+      this.errorMessage = err.message || 'Upstream surveillance failure';
+    } finally {
+      this.loading = false;
+      this.refreshHubs();
+    }
+  }
 
-      if (out) out.textContent = resultText.trim();
-      if (badge) {
-        badge.textContent = 'READY';
-        badge.className = 'badge ready';
+  async executePropagate() {
+    if (this.loading) return;
+    this.loading = true;
+    this.executionResult = null;
+    this.errorMessage = null;
+    this.render();
+
+    try {
+      if (this.host && typeof this.host.run === 'function') {
+        const res = await this.host.run('propagate', ['--json']);
+        this.executionResult = {
+          action: 'propagate',
+          details: res && typeof res === 'object' ? res : { message: String(res || 'Completed') },
+          timestamp: new Date().toLocaleTimeString()
+        };
+      } else {
+        throw new Error('Host execution context unavailable');
       }
     } catch (err) {
-      if (out) out.textContent = `[OPENWIKI ERROR] ${err.message || err}`;
-      if (badge) {
-        badge.textContent = 'ERROR';
-        badge.className = 'badge error';
-      }
+      this.errorMessage = err.message || 'Fleet propagation failure';
     } finally {
-      this.executing = false;
+      this.loading = false;
+      this.refreshHubs();
     }
   }
 
   render() {
+    if (!this.shadowRoot) return;
+
+    const countText = this.hubs.length ? `${this.hubs.length} Hubs` : '—';
+    const totalLines = this.hubs.reduce((acc, h) => acc + (h.lines || 0), 0);
+    const linesText = this.hubs.length ? `${totalLines.toLocaleString()} Lines` : '—';
+    const upstreamText = this.upstream?.latestVersion ? `v${this.upstream.latestVersion}` : 'Tracking';
+
     this.shadowRoot.innerHTML = `
       <style>
         :host {
           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;
           box-sizing: border-box;
-          overflow: hidden;
+          --face-bg: #0f172a;
+          --face-surface: #1e293b;
+          --face-surface-subtle: #334155;
+          --face-border: #475569;
+          --face-text: #f8fafc;
+          --face-text-muted: #94a3b8;
+          --face-accent: #f59e0b;
+          --face-accent-hover: #d97706;
+          --face-ok: #10b981;
+          --face-danger: #ef4444;
+          background: var(--face-bg);
+          color: var(--text-primary, var(--face-text));
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 8px;
+          padding: 16px;
+          font-family: system-ui, -apple-system, sans-serif;
         }
 
-        .header {
+        *, *::before, *::after {
+          box-sizing: inherit;
+        }
+
+        .header-bar {
           display: flex;
+          align-items: center;
           justify-content: space-between;
-          align-items: flex-start;
-          margin-bottom: 14px;
+          gap: 12px;
+          margin-bottom: 12px;
+          border-bottom: 1px solid var(--border, var(--face-border));
+          padding-bottom: 12px;
         }
 
-        .brand-meta {
+        .brand-cluster {
           display: flex;
           align-items: center;
-          gap: 10px;
+          gap: 8px;
         }
 
-        .brand-icon {
-          width: 32px;
-          height: 32px;
-          flex-shrink: 0;
-          color: #f59e0b;
+        .wordmark-badge {
+          display: inline-flex;
+          align-items: center;
+          font-family: ui-monospace, monospace;
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          color: var(--face-accent);
+          background: var(--face-surface-subtle);
+          padding: 4px 8px;
+          border-radius: 4px;
         }
 
-        .title-block {
-          display: flex;
-          flex-direction: column;
-          gap: 2px;
+        .system-title {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--text-primary, var(--face-text));
         }
 
-        .title {
-          font-size: 15px;
+        .status-pill {
+          display: inline-flex;
+          align-items: center;
+          padding: 4px 10px;
+          border-radius: 12px;
+          font-size: 11px;
           font-weight: 700;
-          letter-spacing: 0.03em;
+          letter-spacing: 0.04em;
           text-transform: uppercase;
-          color: #fde68a;
-          margin: 0;
+          background: var(--face-surface-subtle);
+          color: var(--face-text-muted);
+          border: 1px solid var(--border, var(--face-border));
         }
 
-        .subtitle {
-          font-size: 11px;
-          color: #d97706;
-          margin: 0;
+        .status-pill.ok {
+          color: var(--face-ok);
+          border-color: var(--face-ok);
+        }
+
+        .status-pill.danger {
+          color: var(--face-danger);
+          border-color: var(--face-danger);
         }
 
-        .badge {
+        .screen-tabs {
+          display: flex;
+          gap: 6px;
+          margin-bottom: 16px;
+          border-bottom: 1px solid var(--border, var(--face-border));
+          padding-bottom: 8px;
+          overflow-x: auto;
+        }
+
+        .screen-tab-btn {
+          min-height: 36px;
+          padding: 0 12px;
+          font-size: 12px;
+          font-weight: 600;
+          border-radius: 6px;
+          border: 1px solid transparent;
+          background: transparent;
+          color: var(--face-text-muted);
+          cursor: pointer;
+          transition: all 0.15s ease;
           display: inline-flex;
           align-items: center;
-          font-size: 10px;
-          font-weight: 700;
-          letter-spacing: 0.08em;
-          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);
+          white-space: nowrap;
         }
 
-        .badge.ready {
-          background: rgba(16, 185, 129, 0.15);
-          color: #34d399;
-          border-color: rgba(16, 185, 129, 0.35);
+        .screen-tab-btn:hover {
+          color: var(--face-text);
+          background: var(--face-surface-subtle);
         }
 
-        .badge.busy {
-          background: rgba(56, 189, 248, 0.15);
-          color: #38bdf8;
-          border-color: rgba(56, 189, 248, 0.35);
+        .screen-tab-btn.active {
+          color: var(--face-accent);
+          background: var(--face-surface);
+          border-color: var(--face-accent);
         }
 
-        .badge.error {
-          background: rgba(239, 68, 68, 0.2);
-          color: #f87171;
-          border-color: rgba(239, 68, 68, 0.4);
+        .stats-grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 8px;
+          margin-bottom: 16px;
         }
 
-        .section-label {
-          font-size: 10px;
+        .stat-card {
+          background: var(--face-surface);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 6px;
+          padding: 10px;
+        }
+
+        .stat-label {
+          font-size: 11px;
           text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: #f59e0b;
+          letter-spacing: 0.04em;
+          color: var(--face-text-muted);
+          margin-bottom: 4px;
+        }
+
+        .stat-value {
+          font-size: 16px;
           font-weight: 700;
-          margin-bottom: 6px;
+          color: var(--text-primary, var(--face-text));
+          font-family: ui-monospace, monospace;
+        }
+
+        .section-header {
           display: flex;
-          justify-content: space-between;
           align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
         }
 
-        .hubs-panel {
-          background: #080602;
-          border: 1px solid rgba(217, 119, 6, 0.2);
-          border-radius: 6px;
-          padding: 8px 10px;
-          margin-bottom: 12px;
+        .section-title {
+          font-size: 12px;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--face-accent);
         }
 
-        .hub-item {
+        .hub-list {
           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;
+          flex-direction: column;
+          gap: 6px;
+          margin-bottom: 16px;
+          max-height: 180px;
+          overflow-y: auto;
         }
 
-        .hub-item:last-child {
-          border-bottom: none;
+        .hub-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: var(--face-surface);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 6px;
+          padding: 8px 12px;
+          font-size: 13px;
         }
 
         .hub-title {
-          color: #fde68a;
           font-weight: 600;
+          color: var(--text-primary, var(--face-text));
         }
 
         .hub-meta {
-          color: #d97706;
-          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-          font-size: 10px;
+          font-family: ui-monospace, monospace;
+          font-size: 11px;
+          color: var(--face-text-muted);
         }
 
-        .hub-more {
-          font-size: 10px;
-          color: #f59e0b;
-          text-align: center;
-          padding-top: 4px;
+        .empty-state {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+          color: var(--face-text-muted);
+          background: var(--face-surface);
+          border: 1px dashed var(--border, var(--face-border));
+          border-radius: 6px;
+          font-size: 13px;
+        }
+
+        .ingest-deck {
+          background: var(--face-surface);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 6px;
+          padding: 12px;
+          margin-bottom: 16px;
+        }
+
+        .config-deck {
+          background: var(--face-surface);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 6px;
+          padding: 14px;
+          margin-bottom: 16px;
+        }
+
+        .config-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 12px;
+          margin-bottom: 14px;
         }
 
-        .target-bar {
+        .field-group {
           display: flex;
-          gap: 6px;
-          align-items: center;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .field-group.full-width {
+          grid-column: 1 / -1;
+        }
+
+        .field-label {
+          font-size: 11px;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--face-text-muted);
+        }
+
+        .input-group {
+          display: flex;
+          gap: 8px;
           margin-bottom: 12px;
         }
 
-        .path-input {
-          flex: 1;
-          background: #080602;
-          border: 1px solid rgba(217, 119, 6, 0.3);
+        .path-input, .text-input, .select-input {
+          min-height: 44px;
+          background: var(--face-surface-subtle);
+          border: 1px solid var(--border, var(--face-border));
           border-radius: 6px;
-          color: #fef3c7;
-          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-          font-size: 11px;
-          padding: 7px 10px;
+          padding: 8px 12px;
+          color: var(--text-primary, var(--face-text));
+          font-family: ui-monospace, monospace;
+          font-size: 13px;
+          width: 100%;
+        }
+
+        .path-input:focus, .text-input:focus, .select-input:focus {
           outline: none;
-          box-sizing: border-box;
+          border-color: var(--face-accent);
         }
 
-        .path-input:focus {
-          border-color: #f59e0b;
-          box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
+        .presets-bar {
+          display: flex;
+          gap: 6px;
+          flex-wrap: wrap;
+          margin-bottom: 14px;
         }
 
-        .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;
-          font-size: 10px;
-          padding: 6px 8px;
-          border-radius: 4px;
+        .preset-chip {
+          min-height: 32px;
+          padding: 4px 10px;
+          background: var(--face-surface-subtle);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 16px;
+          font-size: 11px;
+          font-family: ui-monospace, monospace;
+          color: var(--face-text);
           cursor: pointer;
+          transition: all 0.15s ease;
         }
 
-        .preset-btn:hover {
-          background: rgba(217, 119, 6, 0.2);
+        .preset-chip:hover {
+          border-color: var(--face-accent);
+          color: var(--face-accent);
         }
 
-        .actions-grid {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 6px;
-          margin-bottom: 12px;
+        .auth-notice-card {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: #022c22;
+          border: 1px solid var(--face-ok);
+          border-radius: 6px;
+          padding: 10px 14px;
+          margin-bottom: 14px;
+          font-size: 12px;
+          color: #a7f3d0;
         }
 
-        .touch-btn {
+        .toggle-label {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
           min-height: 44px;
-          min-width: 44px;
+          font-size: 13px;
+          color: var(--text-primary, var(--face-text));
+          cursor: pointer;
+          user-select: none;
+          padding: 0 4px;
+        }
+
+        .button-group {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+        }
+
+        .btn {
           display: inline-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;
-          font-size: 11px;
+          min-height: 44px;
+          padding: 0 12px;
+          font-size: 12px;
           font-weight: 600;
-          letter-spacing: 0.03em;
-          text-transform: uppercase;
           border-radius: 6px;
+          border: 1px solid transparent;
           cursor: pointer;
-          transition: background 0.15s ease, border-color 0.15s ease;
-          padding: 6px;
+          transition: background-color 0.15s ease, border-color 0.15s ease;
           text-align: center;
         }
 
-        .touch-btn:hover {
-          background: rgba(217, 119, 6, 0.22);
-          border-color: #f59e0b;
+        .btn-primary {
+          background: var(--face-accent);
+          color: var(--face-bg);
         }
 
-        .touch-btn:active {
-          transform: translateY(1px);
+        .btn-primary:hover:not(:disabled) {
+          background: var(--face-accent-hover);
         }
 
-        .touch-btn.primary {
-          background: #b45309;
-          color: #ffffff;
-          border-color: #f59e0b;
-          font-weight: 700;
+        .btn-secondary {
+          background: var(--face-surface-subtle);
+          border-color: var(--border, var(--face-border));
+          color: var(--text-primary, var(--face-text));
         }
 
-        .touch-btn.primary:hover {
-          background: #d97706;
+        .btn-secondary:hover:not(:disabled) {
+          border-color: var(--face-accent);
         }
 
-        .output-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 4px;
+        .btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .result-deck {
+          background: var(--face-surface-subtle);
+          border: 1px solid var(--border, var(--face-border));
+          border-radius: 6px;
+          padding: 12px;
+          font-family: ui-monospace, monospace;
+          font-size: 12px;
+          color: var(--text-primary, var(--face-text));
+          margin-top: 12px;
+        }
+
+        .result-title {
+          font-weight: 600;
+          color: var(--face-accent);
+          margin-bottom: 6px;
+        }
+
+        .error-deck {
+          background: var(--face-surface);
+          border: 1px solid var(--face-danger);
+          border-radius: 6px;
+          padding: 12px;
+          color: var(--face-danger);
+          font-size: 12px;
+          margin-bottom: 12px;
         }
 
-        .copy-btn {
-          background: none;
-          border: none;
-          color: #f59e0b;
+        .repo-status-badge {
+          display: inline-flex;
+          align-items: center;
+          padding: 2px 6px;
+          border-radius: 4px;
           font-size: 10px;
-          cursor: pointer;
-          padding: 2px 4px;
-          text-decoration: underline;
+          font-weight: 700;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+        }
+
+        .repo-status-badge.current {
+          background: #064e3b;
+          color: #6ee7b7;
         }
 
-        .copy-btn:hover {
+        .repo-status-badge.due {
+          background: #78350f;
           color: #fde68a;
         }
 
-        .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;
-          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;
+        .repo-status-badge.uninit {
+          background: #831843;
+          color: #fbcfe8;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          *, *::before, *::after {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+            scroll-behavior: auto !important;
+          }
         }
       </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="header-bar">
+        <div class="brand-cluster">
+          <span class="wordmark-badge">[BRAIN//DUMP]</span>
+          <span class="system-title">Knowledge Graph Engine</span>
+        </div>
+        <span class="status-pill ${this.statusText === 'SYNCHRONIZED' ? 'ok' : this.statusText === 'ERROR' ? 'danger' : ''}">
+          ${this.statusText}
+        </span>
+      </div>
+
+      <nav class="screen-tabs" aria-label="OpenWiki navigation screens">
+        ${OpenWikiCard.screens.map((screen) => `
+          <button
+            class="screen-tab-btn ${this.activeScreen === screen.id ? 'active' : ''}"
+            data-screen="${screen.id}"
+          >
+            ${screen.label}
+          </button>
+        `).join('')}
+      </nav>
+
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-label">Discovered Hubs</div>
+          <div class="stat-value">${countText}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Documentation Lines</div>
+          <div class="stat-value">${linesText}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Active Model Routing</div>
+          <div class="stat-value" style="font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${this.config.model}">
+            ${this.config.model.split('/').pop() || this.config.model}
           </div>
         </div>
-        <div id="status-badge" class="badge ready">READY</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>
+      ${this.errorMessage ? `
+        <div class="error-deck">
+          ${this.errorMessage}
+        </div>
+      ` : ''}
+
+      ${this.renderActiveScreen()}
+
+      ${this.executionResult ? `
+        <div class="result-deck">
+          <div class="result-title">Execution Receipt (${this.executionResult.timestamp})</div>
+          <div>Action: ${this.executionResult.action}</div>
+          <div>Target: ${this.executionResult.target || 'project'}</div>
+          <div>Result: ${JSON.stringify(this.executionResult.details)}</div>
+        </div>
+      ` : ''}
+    `;
+
+    this.bindEvents();
+  }
+
+  renderActiveScreen() {
+    if (this.activeScreen === 'config') {
+      return this.renderConfigScreen();
+    }
+    if (this.activeScreen === 'refresh') {
+      return this.renderRefreshScreen();
+    }
+    if (this.activeScreen === 'upstream') {
+      return this.renderUpstreamScreen();
+    }
+    return this.renderHubsScreen();
+  }
+
+  renderHubsScreen() {
+    return `
+      <div class="section-header">
+        <span class="section-title">Knowledge Hubs</span>
+        <button id="btn-refresh" class="btn btn-secondary" style="min-height: 32px; padding: 0 10px; font-size: 11px;" ${this.loading ? 'disabled' : ''}>
+          Sync
+        </button>
       </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="hub-list">
+        ${this.hubs.length === 0 ? `
+          <div class="empty-state">No documentation hubs indexed in ${this.targetPath}</div>
+        ` : this.hubs.map((h) => `
+          <div class="hub-item">
+            <span class="hub-title">${h.title}</span>
+            <span class="hub-meta">${h.lines} lines · ${h.path}</span>
+          </div>
+        `).join('')}
+      </div>
+
+      <div class="ingest-deck">
+        <div class="input-group">
+          <input
+            id="target-path-input"
+            class="path-input"
+            type="text"
+            value="${this.targetPath}"
+            placeholder="Directory path (openwiki)"
+            aria-label="Target documentation path"
+          />
+          <label class="toggle-label">
+            <input
+              id="dry-run-checkbox"
+              type="checkbox"
+              ${this.dryRun ? 'checked' : ''}
+            />
+            Dry Run
+          </label>
+        </div>
+
+        <div class="button-group">
+          <button id="btn-ingest" class="btn btn-primary" ${this.loading ? 'disabled' : ''}>
+            ${this.loading ? 'Processing…' : 'Ingest Documentation'}
+          </button>
+          <button id="btn-bootstrap" class="btn btn-secondary" ${this.loading ? 'disabled' : ''}>
+            Bootstrap Wiki
+          </button>
         </div>
       </div>
+    `;
+  }
+
+  renderConfigScreen() {
+    return `
+      <div class="config-deck">
+        <div class="section-header">
+          <span class="section-title">Documentation Model & Provider Routing</span>
+        </div>
+
+        <div class="auth-notice-card">
+          <span>✓ Model credentials routed via Total Recall Auth store (<code>total-recall auth secret</code>)</span>
+          <span style="font-family: ui-monospace, monospace; font-size: 10px;">AUTH_PLUGIN: ACTIVE</span>
+        </div>
+
+        <div class="field-label" style="margin-bottom: 6px;">Recommended Model Presets:</div>
+        <div class="presets-bar">
+          <button class="preset-chip" data-provider="openrouter" data-model="deepseek/deepseek-v4.1-flash" data-fallback="qwen/qwen-2.5-coder-32b-instruct">
+            DeepSeek V4.1 Flash ($0.025/1M)
+          </button>
+          <button class="preset-chip" data-provider="openrouter" data-model="qwen/qwen-2.5-coder-32b-instruct" data-fallback="deepseek/deepseek-v4.1-flash">
+            Qwen 2.5 Coder 32B ($0.06/1M)
+          </button>
+          <button class="preset-chip" data-provider="google" data-model="gemini-2.5-flash-lite" data-fallback="gemini-2.5-flash">
+            Gemini 2.5 Flash-Lite ($0.075/1M)
+          </button>
+        </div>
+
+        <div class="config-grid">
+          <div class="field-group">
+            <label class="field-label" for="cfg-provider">Provider</label>
+            <select id="cfg-provider" class="select-input">
+              <option value="openrouter" ${this.config.provider === 'openrouter' ? 'selected' : ''}>OpenRouter (Multi-Model Hub)</option>
+              <option value="google" ${this.config.provider === 'google' ? 'selected' : ''}>Google (Gemini Direct)</option>
+              <option value="custom" ${this.config.provider === 'custom' ? 'selected' : ''}>Custom Provider</option>
+            </select>
+          </div>
+
+          <div class="field-group">
+            <label class="field-label" for="cfg-model">Primary Model Identifier</label>
+            <input id="cfg-model" class="text-input" type="text" value="${this.config.model}" placeholder="e.g. deepseek/deepseek-v4.1-flash" />
+          </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 class="field-group">
+            <label class="field-label" for="cfg-fallback">Fallback Model Identifier</label>
+            <input id="cfg-fallback" class="text-input" type="text" value="${this.config.fallback_model}" placeholder="e.g. qwen/qwen-2.5-coder-32b-instruct" />
+          </div>
+
+          <div class="field-group">
+            <label class="field-label" for="cfg-tokens">Max Output Tokens</label>
+            <input id="cfg-tokens" class="text-input" type="number" value="${this.config.max_tokens}" min="512" max="131072" />
+          </div>
+
+          <div class="field-group full-width">
+            <label class="field-label" for="cfg-timeout">Timeout (milliseconds)</label>
+            <input id="cfg-timeout" class="text-input" type="number" value="${this.config.timeout_ms}" min="30000" max="1800000" />
+          </div>
+        </div>
+
+        <div class="button-group">
+          <button id="btn-save-config" class="btn btn-primary" ${this.loading ? 'disabled' : ''}>
+            Save Configuration
+          </button>
+          <button id="btn-reset-config" class="btn btn-secondary" ${this.loading ? 'disabled' : ''}>
+            Reset to Defaults
+          </button>
+        </div>
       </div>
+    `;
+  }
+
+  renderRefreshScreen() {
+    const dueCount = this.refreshCounts?.due ?? this.refreshReports.filter((r) => r.action === 'due').length;
+    const uninitCount = this.refreshCounts?.uninitialized ?? this.refreshReports.filter((r) => r.uninitialized).length;
 
-      <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>
+    return `
+      <div class="ingest-deck">
+        <div class="section-header">
+          <span class="section-title">Fleet Documentation Governance</span>
+          <button id="btn-sync-refresh" class="btn btn-secondary" style="min-height: 32px; padding: 0 10px; font-size: 11px;" ${this.loading ? 'disabled' : ''}>
+            Check Fleet
+          </button>
+        </div>
+
+        <div style="font-size: 12px; color: var(--face-text-muted); margin-bottom: 12px;">
+          Registered Projects: <strong>${this.refreshReports.length}</strong> · Due for Update: <strong>${dueCount}</strong> · Uninitialized: <strong>${uninitCount}</strong>
+        </div>
+
+        <div class="hub-list" style="max-height: 240px;">
+          ${this.refreshReports.length === 0 ? `
+            <div class="empty-state">No fleet report loaded. Click Check Fleet to inspect registered repositories.</div>
+          ` : this.refreshReports.map((r) => {
+            let badgeClass = 'current';
+            let badgeText = 'CURRENT';
+            if (r.uninitialized) {
+              badgeClass = 'uninit';
+              badgeText = 'MISSING WIKI';
+            } else if (r.action === 'due') {
+              badgeClass = 'due';
+              badgeText = 'DUE';
+            }
+            return `
+              <div class="hub-item">
+                <div>
+                  <span class="hub-title">${r.name}</span>
+                  <div class="hub-meta">${r.generatedAt ? `Generated ${r.generatedAt.slice(0, 10)}` : 'Never generated'} · ${r.commitsSince ? `${r.commitsSince} commits behind` : 'Up to date'}</div>
+                </div>
+                <span class="repo-status-badge ${badgeClass}">${badgeText}</span>
+              </div>
+            `;
+          }).join('')}
+        </div>
+
+        <div style="margin-top: 12px;">
+          <button id="btn-fleet-refresh-apply" class="btn btn-primary" style="width: 100%;" ${this.loading ? 'disabled' : ''}>
+            ${this.loading ? 'Executing Fleet Refresh…' : `Regenerate Stale & Initialize Missing Wikis (${dueCount} due)`}
+          </button>
+        </div>
       </div>
+    `;
+  }
+
+  renderUpstreamScreen() {
+    const currentVer = this.upstream?.recordedVersion || '0.7.2';
+    const latestVer = this.upstream?.latestVersion || '0.7.3';
+
+    return `
+      <div class="ingest-deck">
+        <div class="section-header">
+          <span class="section-title">Upstream Package Surveillance</span>
+        </div>
+
+        <div class="stats-grid" style="margin-bottom: 14px;">
+          <div class="stat-card">
+            <div class="stat-label">Recorded Version</div>
+            <div class="stat-value">v${currentVer}</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Latest Registry</div>
+            <div class="stat-value">v${latestVer}</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Watcher Status</div>
+            <div class="stat-value" style="color: var(--face-ok);">MONITORING</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="button-group">
+          <button id="btn-watch" class="btn btn-secondary" ${this.loading ? 'disabled' : ''}>
+            Check Upstream Registry
+          </button>
+          <button id="btn-propagate" class="btn btn-primary" ${this.loading ? 'disabled' : ''}>
+            Propagate Latest Generator
+          </button>
+        </div>
       </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';
+  bindEvents() {
+    const shadow = this.shadowRoot;
+    if (!shadow) return;
+
+    shadow.querySelectorAll('.screen-tab-btn').forEach((tab) => {
+      tab.addEventListener('click', () => {
+        const targetScreen = tab.getAttribute('data-screen');
+        if (targetScreen) this.setScreen(targetScreen);
+      });
     });
 
-    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'));
+    const pathInput = shadow.querySelector('#target-path-input');
+    if (pathInput) {
+      pathInput.addEventListener('input', (e) => {
+        this.targetPath = e.target.value.trim();
+      });
+    }
+
+    const dryRunCheckbox = shadow.querySelector('#dry-run-checkbox');
+    if (dryRunCheckbox) {
+      dryRunCheckbox.addEventListener('change', (e) => {
+        this.dryRun = e.target.checked;
+      });
+    }
 
-    this.shadowRoot.querySelector('#btn-copy')?.addEventListener('click', () => {
-      const text = this.shadowRoot.querySelector('#card-out')?.textContent || '';
-      if (navigator.clipboard) {
-        navigator.clipboard.writeText(text);
-      }
+    const btnIngest = shadow.querySelector('#btn-ingest');
+    if (btnIngest) {
+      btnIngest.addEventListener('click', () => this.executeIngest());
+    }
+
+    const btnBootstrap = shadow.querySelector('#btn-bootstrap');
+    if (btnBootstrap) {
+      btnBootstrap.addEventListener('click', () => this.executeBootstrap());
+    }
+
+    const btnRefresh = shadow.querySelector('#btn-refresh');
+    if (btnRefresh) {
+      btnRefresh.addEventListener('click', () => this.refreshHubs());
+    }
+
+    const btnSyncRefresh = shadow.querySelector('#btn-sync-refresh');
+    if (btnSyncRefresh) {
+      btnSyncRefresh.addEventListener('click', () => this.loadRefreshReport());
+    }
+
+    const btnFleetApply = shadow.querySelector('#btn-fleet-refresh-apply');
+    if (btnFleetApply) {
+      btnFleetApply.addEventListener('click', () => this.executeFleetRefresh());
+    }
+
+    const btnWatch = shadow.querySelector('#btn-watch');
+    if (btnWatch) {
+      btnWatch.addEventListener('click', () => this.executeWatch());
+    }
+
+    const btnPropagate = shadow.querySelector('#btn-propagate');
+    if (btnPropagate) {
+      btnPropagate.addEventListener('click', () => this.executePropagate());
+    }
+
+    shadow.querySelectorAll('.preset-chip').forEach((chip) => {
+      chip.addEventListener('click', async () => {
+        const p = chip.getAttribute('data-provider');
+        const m = chip.getAttribute('data-model');
+        const f = chip.getAttribute('data-fallback');
+        if (p) await this.setConfigValue('provider', p);
+        if (m) await this.setConfigValue('model', m);
+        if (f) await this.setConfigValue('fallback_model', f);
+      });
     });
+
+    const btnSaveConfig = shadow.querySelector('#btn-save-config');
+    if (btnSaveConfig) {
+      btnSaveConfig.addEventListener('click', async () => {
+        const provider = shadow.querySelector('#cfg-provider')?.value;
+        const model = shadow.querySelector('#cfg-model')?.value;
+        const fallback = shadow.querySelector('#cfg-fallback')?.value;
+        const tokens = shadow.querySelector('#cfg-tokens')?.value;
+        const timeout = shadow.querySelector('#cfg-timeout')?.value;
+
+        if (provider) await this.setConfigValue('provider', provider);
+        if (model) await this.setConfigValue('model', model);
+        if (fallback) await this.setConfigValue('fallback_model', fallback);
+        if (tokens) await this.setConfigValue('max_tokens', tokens);
+        if (timeout) await this.setConfigValue('timeout_ms', timeout);
+      });
+    }
+
+    const btnResetConfig = shadow.querySelector('#btn-reset-config');
+    if (btnResetConfig) {
+      btnResetConfig.addEventListener('click', () => this.resetConfig());
+    }
   }
 }