specsmd 0.1.68 → 0.1.70

package/lib/dashboard/web/extension-adapter.js

@@ -634,6 +634,50 @@ function getOverviewViewHtml(data) {
         `).join('') : '<div class="empty-state"><div class="empty-state-text">No standards defined</div></div>'}
       </div>
     </div>
+    <div class="overview-resources-footer">
+      <div class="overview-fabriqa-card">
+        <div class="overview-fabriqa-brand">
+          <div class="overview-fabriqa-mark">FA</div>
+          <div>
+            <div class="overview-fabriqa-title">specs.md by Fabriqa.AI</div>
+            <div class="overview-fabriqa-subtitle">Spec-native agentic development environment</div>
+          </div>
+        </div>
+        <div class="overview-fabriqa-copy">
+          Use Fabriqa.AI with your existing AI subscription to design, run, and reuse agentic workflows around your specs. It is free to try.
+        </div>
+        <div class="overview-fabriqa-actions">
+          <div class="overview-fabriqa-link" data-url="https://fabriqa.ai">Explore Fabriqa.AI</div>
+          <div class="overview-fabriqa-link secondary" data-url="https://specs.md">Open specs.md</div>
+        </div>
+      </div>
+      <div class="overview-dashboard-tip">
+        <div>
+          <div class="overview-dashboard-title">Did you know?</div>
+          <div class="overview-dashboard-copy">
+            You can use the specsmd dashboard outside VS Code and VS Code variants. Run this from your project folder:
+          </div>
+          <code>npx specsmd@latest dashboard</code>
+        </div>
+        <div class="overview-fabriqa-link secondary" data-url="https://specs.md/getting-started/cli-dashboard">Dashboard docs</div>
+      </div>
+      <div class="overview-resources-title">Community</div>
+      <div class="overview-resources-links">
+        <div class="overview-resource-link" data-url="https://discord.specs.md" title="Discord">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+          </svg>
+        </div>
+        <div class="overview-resource-link" data-url="https://x.com/specsmd" title="X (Twitter)">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+        </div>
+      </div>
+      <div class="overview-feedback-message">
+        We're new! Help us improve — <span class="overview-feedback-link" data-url="https://specs.md/feedback">share your feedback</span>
+      </div>
+    </div>
   </div>`;
 }
 

package/lib/dashboard/web/public/app.js

@@ -1,5 +1,43 @@
 (function () {
+  var themeKey = 'specsmd:webview-state';
+
+  function readTheme() {
+    try {
+      var stored = localStorage.getItem(themeKey);
+      if (stored === '"dark"' || stored === 'dark') {
+        return 'dark';
+      }
+      if (stored === '"light"' || stored === 'light') {
+        return 'light';
+      }
+      var parsed = JSON.parse(stored);
+      if (parsed === 'dark' || parsed === 'light') {
+        return parsed;
+      }
+    } catch (error) {
+      return 'dark';
+    }
+
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+      ? 'light'
+      : 'dark';
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+    document.documentElement.style.colorScheme = theme;
+  }
+
   document.documentElement.dataset.host = 'dashboard-web';
+  applyTheme(readTheme());
+
+  window.addEventListener('storage', function (event) {
+    if (event.key !== themeKey) {
+      return;
+    }
+
+    applyTheme(readTheme());
+  });
 
   window.addEventListener('message', function (event) {
     if (event.data && event.data.type === 'setData') {

package/lib/dashboard/web/public/index.html

@@ -8,7 +8,7 @@
   </head>
   <body>
     <specsmd-app></specsmd-app>
-    <script src="/webview-bundle.js"></script>
     <script src="/app.js"></script>
+    <script src="/webview-bundle.js"></script>
   </body>
 </html>

package/lib/dashboard/web/public/styles.css

@@ -1,5 +1,8 @@
 :root {
-  color-scheme: dark;
+  color-scheme: var(--specsmd-color-scheme, dark);
+}
+
+:root[data-theme="dark"] {
   --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --vscode-font-size: 13px;
   --vscode-foreground: #cccccc;
@@ -9,9 +12,36 @@
   --vscode-sideBarSectionHeader-background: #2d2d30;
   --vscode-sideBarSectionHeader-border: #454545;
   --vscode-input-background: #3c3c3c;
+  --vscode-input-border: #3f3f46;
   --vscode-list-hoverBackground: #2a2d2e;
+  --vscode-list-activeSelectionBackground: #094771;
+  --vscode-badge-background: #4d4d4d;
+  --vscode-badge-foreground: #ffffff;
+  --vscode-button-background: #0e639c;
+  --vscode-button-foreground: #ffffff;
+  --vscode-scrollbarSlider-background: #686868;
+  --specsmd-color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --vscode-font-size: 13px;
+  --vscode-foreground: #1f2328;
+  --vscode-descriptionForeground: #57606a;
+  --vscode-sideBar-background: #f6f8fa;
+  --vscode-editor-background: #ffffff;
+  --vscode-sideBarSectionHeader-background: #eef2f7;
+  --vscode-sideBarSectionHeader-border: #d0d7de;
+  --vscode-input-background: #ffffff;
+  --vscode-input-border: #d0d7de;
+  --vscode-list-hoverBackground: #eef2f7;
+  --vscode-list-activeSelectionBackground: #dbeafe;
+  --vscode-badge-background: #d0d7de;
+  --vscode-badge-foreground: #24292f;
   --vscode-button-background: #0e639c;
   --vscode-button-foreground: #ffffff;
+  --vscode-scrollbarSlider-background: #b6c2cf;
+  --specsmd-color-scheme: light;
 }
 
 html,

package/lib/dashboard/web/public/webview-bundle.js

@@ -604,6 +604,114 @@
   }
 
   // src/webview/styles/theme.ts
+  var THEME_STORAGE_KEY = "specsmd:webview-theme";
+  var THEME_PALETTES = {
+    dark: {
+      "--vscode-foreground": "#cccccc",
+      "--vscode-descriptionForeground": "#8b8b8b",
+      "--vscode-sideBar-background": "#252526",
+      "--vscode-editor-background": "#1e1e1e",
+      "--vscode-sideBarSectionHeader-background": "#2d2d30",
+      "--vscode-sideBarSectionHeader-border": "#454545",
+      "--vscode-input-background": "#3c3c3c",
+      "--vscode-input-border": "#3f3f46",
+      "--vscode-list-hoverBackground": "#2a2d2e",
+      "--vscode-list-activeSelectionBackground": "#094771",
+      "--vscode-badge-background": "#4d4d4d",
+      "--vscode-badge-foreground": "#ffffff",
+      "--vscode-button-background": "#0e639c",
+      "--vscode-button-foreground": "#ffffff",
+      "--vscode-scrollbarSlider-background": "#686868",
+      "--vscode-font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      "--vscode-font-size": "13px",
+      "--specsmd-color-scheme": "dark",
+      "--specsmd-surface-glow": "rgba(249, 115, 22, 0.05)"
+    },
+    light: {
+      "--vscode-foreground": "#1f2328",
+      "--vscode-descriptionForeground": "#57606a",
+      "--vscode-sideBar-background": "#f6f8fa",
+      "--vscode-editor-background": "#ffffff",
+      "--vscode-sideBarSectionHeader-background": "#eef2f7",
+      "--vscode-sideBarSectionHeader-border": "#d0d7de",
+      "--vscode-input-background": "#ffffff",
+      "--vscode-input-border": "#d0d7de",
+      "--vscode-list-hoverBackground": "#eef2f7",
+      "--vscode-list-activeSelectionBackground": "#dbeafe",
+      "--vscode-badge-background": "#d0d7de",
+      "--vscode-badge-foreground": "#24292f",
+      "--vscode-button-background": "#0e639c",
+      "--vscode-button-foreground": "#ffffff",
+      "--vscode-scrollbarSlider-background": "#b6c2cf",
+      "--vscode-font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      "--vscode-font-size": "13px",
+      "--specsmd-color-scheme": "light",
+      "--specsmd-surface-glow": "rgba(14, 99, 156, 0.06)"
+    }
+  };
+  function isThemeMode(value) {
+    return value === "dark" || value === "light";
+  }
+  function getThemeRoot(target) {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    if (!target) {
+      return document.documentElement;
+    }
+    if (target instanceof Document) {
+      return target.documentElement;
+    }
+    return target;
+  }
+  function readStoredTheme() {
+    if (typeof window === "undefined" || typeof localStorage === "undefined") {
+      return null;
+    }
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      return isThemeMode(stored) ? stored : null;
+    } catch {
+      return null;
+    }
+  }
+  function getSystemTheme() {
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+    }
+    return "dark";
+  }
+  function getInitialTheme(state2) {
+    if (isThemeMode(state2)) {
+      return state2;
+    }
+    const stored = readStoredTheme();
+    if (stored) {
+      return stored;
+    }
+    return getSystemTheme();
+  }
+  function persistTheme(theme) {
+    if (typeof window === "undefined" || typeof localStorage === "undefined") {
+      return;
+    }
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+    }
+  }
+  function applyTheme(theme, target) {
+    const root = getThemeRoot(target);
+    if (!root) {
+      return;
+    }
+    const palette = THEME_PALETTES[theme];
+    for (const [name, value] of Object.entries(palette)) {
+      root.style.setProperty(name, value);
+    }
+    root.dataset.theme = theme;
+    root.style.setProperty("color-scheme", palette["--specsmd-color-scheme"]);
+  }
   var themeStyles = i`
     :host {
         /* VS Code font */
@@ -623,6 +731,8 @@
         --status-active: #f97316;
         --status-pending: #6b7280;
         --status-blocked: #ef4444;
+
+        color-scheme: var(--specsmd-color-scheme, dark);
     }
 `;
   var resetStyles = i`
@@ -6497,8 +6607,17 @@
 
   // src/webview/vscode-api.ts
   function createStandaloneApi() {
+    const stateKey = "specsmd:webview-state";
     let state2 = null;
     let eventsConnected = false;
+    try {
+      const stored = typeof localStorage !== "undefined" ? localStorage.getItem(stateKey) : null;
+      if (stored !== null) {
+        state2 = JSON.parse(stored);
+      }
+    } catch {
+      state2 = null;
+    }
     const connectEvents = () => {
       if (eventsConnected || typeof EventSource !== "function") {
         return;
@@ -6537,6 +6656,12 @@
       },
       setState(nextState) {
         state2 = nextState;
+        try {
+          if (typeof localStorage !== "undefined") {
+            localStorage.setItem(stateKey, JSON.stringify(nextState));
+          }
+        } catch {
+        }
       }
     };
   }
@@ -6555,6 +6680,7 @@
       this._availableFlows = [];
       this._fireData = null;
       this._fireActiveTab = "runs";
+      this._theme = "dark";
       /**
        * Version counter for specs HTML to track when handlers need reattachment.
        * Incremented each time _specsHtml changes.
@@ -6650,6 +6776,9 @@
     }
     connectedCallback() {
       super.connectedCallback();
+      this._theme = getInitialTheme(vscode.getState());
+      this._applyTheme(this._theme);
+      vscode.setState(this._theme);
       window.addEventListener("message", this._handleMessage);
       vscode.postMessage({ type: "ready" });
     }
@@ -6759,7 +6888,7 @@
           }
         });
       });
-      overviewView.querySelectorAll(".overview-resource-link").forEach((link) => {
+      overviewView.querySelectorAll(".overview-resource-link, .overview-fabriqa-link").forEach((link) => {
         const htmlLink = link;
         link.addEventListener("click", () => {
           const url = htmlLink.dataset.url;
@@ -6799,11 +6928,44 @@
     }
     render() {
       if (!this._loaded) {
-        return b2`<div class="loading">Loading...</div>`;
+        return b2`
+                <div class="shell">
+                    <div class="shell-chrome">
+                        <div class="shell-brand">
+                            <span class="shell-mark">⚡</span>
+                            <div class="shell-brand-copy">
+                                <div class="shell-title">SpecsMD</div>
+                                <div class="shell-subtitle">Loading dashboard</div>
+                            </div>
+                        </div>
+                        <div class="shell-actions">
+                            ${this._renderThemeToggle()}
+                        </div>
+                    </div>
+                    <div class="loading">Loading...</div>
+                </div>
+            `;
       }
       const isFireFlow = this._activeFlow?.id === "fire";
       return b2`
-            ${isFireFlow ? this._renderFireApp() : this._renderAidlcApp()}
+            <div class="shell">
+                <div class="shell-chrome">
+                    <div class="shell-brand">
+                        <span class="shell-mark">⚡</span>
+                        <div class="shell-brand-copy">
+                            <div class="shell-title">SpecsMD</div>
+                            <div class="shell-subtitle">${isFireFlow ? "FIRE dashboard" : "AI-DLC dashboard"}</div>
+                        </div>
+                    </div>
+                    <div class="shell-actions">
+                        ${this._renderThemeToggle()}
+                    </div>
+                </div>
+
+                <div class="app-body">
+                    ${isFireFlow ? this._renderFireApp() : this._renderAidlcApp()}
+                </div>
+            </div>
         `;
     }
     /**
@@ -6893,6 +7055,28 @@
             ></fire-view>
         `;
     }
+    /**
+     * Render the theme toggle control.
+     */
+    _renderThemeToggle() {
+      const isDark = this._theme === "dark";
+      const nextTheme = isDark ? "light" : "dark";
+      const label = isDark ? "Light" : "Dark";
+      const title = `Switch to ${nextTheme} mode`;
+      const icon = isDark ? w`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8.25A3.75 3.75 0 1 0 12 15.75 3.75 3.75 0 0 0 12 8.25Zm0-6a1 1 0 0 1 1 1.06l-.05 1.94a1 1 0 1 1-2 0l-.05-1.94A1 1 0 0 1 12 2.25Zm0 16.5a1 1 0 0 1 1 1.06l-.05 1.94a1 1 0 1 1-2 0l-.05-1.94a1 1 0 0 1 1.05-1.06Zm10.5-6a1 1 0 0 1-1.06 1l-1.94-.05a1 1 0 1 1 0-2l1.94-.05a1 1 0 0 1 1.06 1.1ZM4.5 12a1 1 0 0 1-1.06 1l-1.94-.05a1 1 0 1 1 0-2l1.94-.05A1 1 0 0 1 4.5 12Zm14.45-7.95a1 1 0 0 1 .04 1.41l-1.37 1.37a1 1 0 1 1-1.41-1.41l1.37-1.37a1 1 0 0 1 1.37 0Zm-11.14 11.1a1 1 0 0 1 .04 1.41l-1.37 1.37a1 1 0 1 1-1.41-1.41l1.37-1.37a1 1 0 0 1 1.37 0Zm11.14 2.78a1 1 0 0 1-1.41.04l-1.37-1.37a1 1 0 1 1 1.41-1.41l1.37 1.37a1 1 0 0 1 0 1.37ZM7.81 7.81a1 1 0 0 1-1.41.04L5.03 6.48a1 1 0 1 1 1.41-1.41l1.37 1.37a1 1 0 0 1 0 1.37Z"/></svg>` : w`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21.75 14.2A9.7 9.7 0 0 1 9.8 2.25a1 1 0 0 0-1.16 1.16 8.5 8.5 0 1 0 12.95 11.95 1 1 0 0 0 .16-1.16Z"/></svg>`;
+      return b2`
+            <button
+                class="theme-toggle"
+                type="button"
+                title=${title}
+                aria-label=${title}
+                @click=${this._toggleTheme}
+            >
+                <span class="theme-toggle-icon">${icon}</span>
+                <span class="theme-toggle-text">${label}</span>
+            </button>
+        `;
+    }
     // ==================== FIRE Event Handlers ====================
     _handleFireTabChange(e7) {
       this._fireActiveTab = e7.detail.tab;
@@ -6932,6 +7116,21 @@
     _handleFlowSwitch(e7) {
       vscode.postMessage({ type: "switchFlow" });
     }
+    /**
+     * Toggle the dashboard theme and persist it locally.
+     */
+    _toggleTheme() {
+      this._theme = this._theme === "dark" ? "light" : "dark";
+      this._applyTheme(this._theme);
+      vscode.setState(this._theme);
+      persistTheme(this._theme);
+    }
+    /**
+     * Apply the selected theme to the document root.
+     */
+    _applyTheme(theme) {
+      applyTheme(theme, document.documentElement);
+    }
     /**
      * Handle tab change from the tabs component.
      */
@@ -7001,15 +7200,126 @@
     ...BaseElement.baseStyles,
     i`
             :host {
-                display: flex;
-                flex-direction: column;
+                display: block;
                 height: 100vh;
                 overflow: hidden;
+                position: relative;
                 background: var(--background);
             }
 
+            .shell {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                inset: 0;
+                width: 100%;
+                height: 100%;
+                min-height: 0;
+                overflow: hidden;
+            }
+
+            .shell-chrome {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 12px;
+                padding: 10px 12px;
+                background: linear-gradient(180deg, var(--editor-background) 0%, var(--vscode-sideBarSectionHeader-background) 100%);
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            .shell-brand {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                min-width: 0;
+            }
+
+            .shell-mark {
+                width: 24px;
+                height: 24px;
+                border-radius: 6px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                background: var(--accent-primary);
+                color: #ffffff;
+                font-size: 13px;
+                flex-shrink: 0;
+            }
+
+            .shell-brand-copy {
+                min-width: 0;
+            }
+
+            .shell-title {
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 1.2;
+            }
+
+            .shell-subtitle {
+                font-size: 10px;
+                color: var(--description-foreground);
+                line-height: 1.2;
+            }
+
+            .shell-actions {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                flex-shrink: 0;
+            }
+
+            .theme-toggle {
+                display: inline-flex;
+                align-items: center;
+                gap: 6px;
+                padding: 6px 10px;
+                border-radius: 6px;
+                border: 1px solid var(--border-color);
+                background: var(--vscode-input-background);
+                color: var(--foreground);
+                font-size: 11px;
+                font-weight: 500;
+                transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+            }
+
+            .theme-toggle:hover {
+                background: var(--vscode-list-hoverBackground);
+                border-color: var(--accent-primary);
+            }
+
+            .theme-toggle-icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 14px;
+                height: 14px;
+                flex-shrink: 0;
+            }
+
+            .theme-toggle-icon svg {
+                width: 14px;
+                height: 14px;
+                fill: currentColor;
+            }
+
+            .theme-toggle-text {
+                min-width: 0;
+            }
+
+            .app-body {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                min-height: 0;
+                overflow: hidden;
+            }
+
             .view-container {
                 flex: 1;
+                min-height: 0;
                 overflow-y: auto;
                 display: none;
             }
@@ -7017,6 +7327,7 @@
             .view-container.active {
                 display: flex;
                 flex-direction: column;
+                min-height: 0;
             }
 
             bolts-view {
@@ -7441,6 +7752,114 @@
                 border-top: 1px solid var(--border-color);
             }
 
+            .overview-fabriqa-card {
+                margin-bottom: 14px;
+                padding: 14px;
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                background: var(--editor-background);
+            }
+
+            .overview-fabriqa-brand {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                margin-bottom: 10px;
+            }
+
+            .overview-fabriqa-mark {
+                width: 34px;
+                height: 34px;
+                border-radius: 8px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                background: var(--accent-primary);
+                color: #ffffff;
+                font-size: 12px;
+                font-weight: 700;
+                flex-shrink: 0;
+            }
+
+            .overview-fabriqa-title {
+                font-size: 13px;
+                font-weight: 700;
+                color: var(--foreground);
+                line-height: 1.25;
+            }
+
+            .overview-fabriqa-subtitle,
+            .overview-fabriqa-copy,
+            .overview-dashboard-copy {
+                color: var(--description-foreground);
+                font-size: 11px;
+                line-height: 1.45;
+            }
+
+            .overview-fabriqa-copy {
+                margin-bottom: 12px;
+            }
+
+            .overview-fabriqa-actions {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+            }
+
+            .overview-fabriqa-link {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                min-height: 30px;
+                padding: 0 10px;
+                border-radius: 6px;
+                background: var(--accent-primary);
+                color: #ffffff;
+                font-size: 11px;
+                font-weight: 700;
+                cursor: pointer;
+            }
+
+            .overview-fabriqa-link.secondary {
+                background: var(--vscode-input-background);
+                color: var(--foreground);
+                border: 1px solid var(--border-color);
+            }
+
+            .overview-fabriqa-link:hover {
+                opacity: 0.88;
+            }
+
+            .overview-dashboard-tip {
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-between;
+                gap: 12px;
+                margin-bottom: 14px;
+                padding: 12px;
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                background: var(--vscode-input-background);
+            }
+
+            .overview-dashboard-title {
+                margin-bottom: 4px;
+                color: var(--foreground);
+                font-size: 12px;
+                font-weight: 700;
+            }
+
+            .overview-dashboard-tip code {
+                display: inline-block;
+                margin-top: 8px;
+                padding: 5px 7px;
+                border-radius: 4px;
+                background: var(--editor-background);
+                color: var(--foreground);
+                font-size: 10px;
+                white-space: nowrap;
+            }
+
             .overview-resources-title {
                 font-size: 9px;
                 font-weight: 600;
@@ -7546,6 +7965,9 @@
   __decorateClass([
     r5()
   ], SpecsmdApp.prototype, "_fireActiveTab", 2);
+  __decorateClass([
+    r5()
+  ], SpecsmdApp.prototype, "_theme", 2);
   SpecsmdApp = __decorateClass([
     t3("specsmd-app")
   ], SpecsmdApp);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "specsmd",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "description": "Multi-agent orchestration system for AI-native software development. Delivers AI-DLC, Agile, and custom SDLC flows as markdown-based agent systems.",
   "main": "lib/installer.js",
   "bin": {