@triedotdev/mcp 1.0.70 → 1.0.71

package/README.md

@@ -944,29 +944,92 @@ The guardian reads your project's `.trie/` directory (incidents, patterns, memor
 
 ---
 
+## MCP Apps - Interactive UIs
+
+**New:** Trie now supports **MCP Apps**—interactive UI components that render directly in Claude, ChatGPT, VS Code, and other MCP clients.
+
+Instead of text-only output, Trie tools return rich, interactive interfaces:
+
+| Tool | UI App | What You Get |
+|------|--------|--------------|
+| `trie_scan` | **Scan Dashboard** | Filter by severity/agent, expand issues, one-click fix actions, export JSON |
+| `trie_memory` | **Memory Tree** | Hierarchical view with bar charts, cross-project patterns, collapsible sections |
+| `trie_pr_review` | **PR Review** | File tree, side-by-side diffs, inline comments, approve/request changes |
+| `trie_visual_qa_browser` | **Visual QA** | Screenshot gallery, viewport comparison, issue annotations |
+
+### Memory Tree Visualization
+
+When you use `trie_memory`, you get an interactive tree view:
+
+```
+MEMORY TREE [1000 issues]
+├──────────────────────────────────────┤
+  ▼ By Severity
+    │ critical (5)  █░░░░░░░░░░░░░░░
+    │ high (10)     █░░░░░░░░░░░░░░░
+    │ medium (75)   ███████████░░░░░
+    └ low (110)     ████████████████
+  ▼ By File (Hot Spots)
+    ├─ styles.css (57)          ████████████████
+    ├─ stack-detector.ts (23)   ██████░░░░░░░░░░
+    └─ attack-surface.ts (10)   ███░░░░░░░░░░░░░
+  ▼ Cross-Project Patterns (88 recurring)
+    ├─ "Loose equality check..." - seen in 2 projects
+    ├─ "Missing license header..." - seen in 2 projects
+    └─ "Potential N+1 query..." - seen in 2 projects
+```
+
+**Key features:**
+- Collapsible sections (severity, files, agents, patterns)
+- Visual bar charts showing issue distribution
+- **Cross-project patterns** - highlights recurring issues across your codebases
+- Click any category to drill down into specific issues
+- Resolve/unresolve actions inline
+
+### Client Support
+
+MCP Apps work in:
+- **Claude Desktop** ✅
+- **Claude Web** ✅
+- **ChatGPT** ✅
+- **VS Code Insiders** ✅
+- **Goose** ✅
+
+### How It Works
+
+1. You call a Trie tool like `trie_scan` or `trie_memory`
+2. Your AI client detects the UI resource and fetches it
+3. An interactive dashboard renders in your chat
+4. You can filter, expand, click actions—all within the conversation
+5. The model sees your interactions and responds accordingly
+
+No configuration needed—the UIs work automatically when you use Trie via MCP.
+
+---
+
 ## MCP Tools
 
 These tools are available when using Trie via MCP (Cursor, Claude Code, etc.).
 
 ### Scanning & Analysis
 
-| Tool | Description |
-|------|-------------|
-| `trie_scan` | Full scan with intelligent skill selection |
-| `trie_watch` | Watch mode—proactive nudging as you code |
-| `trie_check` | Quick risk check before push (< 500ms, no LLM) |
-| `trie_fix` | Generate fix recommendations for detected issues |
-| `trie_explain` | Explain code, issues, or changes in plain language |
+| Tool | Description | UI App |
+|------|-------------|--------|
+| `trie_scan` | Full scan with intelligent skill selection | ✅ Interactive dashboard |
+| `trie_watch` | Watch mode—proactive nudging as you code | — |
+| `trie_check` | Quick risk check before push (< 500ms, no LLM) | — |
+| `trie_fix` | Generate fix recommendations for detected issues | — |
+| `trie_explain` | Explain code, issues, or changes in plain language | — |
 
 ### Memory & Learning
 
-| Tool | Description |
-|------|-------------|
-| `trie_tell` | Report an incident to build the agent's memory |
-| `trie_feedback` | Give thumbs up/down on warnings (updates confidence) |
-| `trie_memory` | Search and manage issue memory across projects |
-| `trie_context` | Read full context (memory + patterns + history) |
-| `trie_checkpoint` | Quick save context without running a full scan |
+| Tool | Description | UI App |
+|------|-------------|--------|
+| `trie_tell` | Report an incident to build the agent's memory | — |
+| `trie_feedback` | Give thumbs up/down on warnings (updates confidence) | — |
+| `trie_memory` | Search and manage issue memory across projects | ✅ Interactive tree |
+| `trie_context` | Read full context (memory + patterns + history) | — |
+| `trie_checkpoint` | Quick save context without running a full scan | — |
 
 ### Project & Configuration
 
@@ -998,14 +1061,15 @@ These tools are available when using Trie via MCP (Cursor, Claude Code, etc.).
 
 ### UI/UX Skills
 
-| Tool | What It Analyzes |
-|------|------------------|
-| `trie_accessibility` | WCAG 2.1 AA: icon-only buttons, touch targets, heading levels, ARIA validation, 20+ checks. **Guardian auto-suggests visual QA when critical a11y issues found.** |
-| `trie_design` | AI slop detection, verified token systems, contrast validation, design health scoring |
-| `trie_ux` | User testing simulations: happy path, security tester, confused user, impatient user |
-| `trie_visual_qa` | Static CSS/layout analysis: CLS risks, responsive patterns, overflow issues |
-| `trie_visual_qa_browser` | **Browser screenshots** at mobile/tablet/desktop for Guardian visual analysis (requires dev server) |
-| `trie_e2e` | End-to-end test coverage, user flow validation |
+| Tool | What It Analyzes | UI App |
+|------|------------------|--------|
+| `trie_accessibility` | WCAG 2.1 AA: icon-only buttons, touch targets, heading levels, ARIA validation, 20+ checks. **Guardian auto-suggests visual QA when critical a11y issues found.** | — |
+| `trie_design` | AI slop detection, verified token systems, contrast validation, design health scoring | — |
+| `trie_ux` | User testing simulations: happy path, security tester, confused user, impatient user | — |
+| `trie_visual_qa` | Static CSS/layout analysis: CLS risks, responsive patterns, overflow issues | — |
+| `trie_visual_qa_browser` | **Browser screenshots** at mobile/tablet/desktop for Guardian visual analysis (requires dev server) | ✅ Screenshot gallery |
+| `trie_e2e` | End-to-end test coverage, user flow validation | — |
+| `trie_pr_review` | **PR reviews**: File-by-file diff viewer with inline actions | ✅ Interactive diff viewer |
 
 ### Operations Skills
 

package/dist/index.js

@@ -5491,6 +5491,10 @@ var ToolRegistry = class {
               description: "Use worker threads for parallel execution"
             }
           }
+        },
+        // MCP Apps: Interactive scan dashboard
+        _meta: {
+          ui: { resourceUri: "ui://trie/scan-dashboard" }
         }
       },
       {
@@ -5799,6 +5803,10 @@ var ToolRegistry = class {
               description: "Project directory (defaults to current workspace)"
             }
           }
+        },
+        // MCP Apps: Interactive memory viewer
+        _meta: {
+          ui: { resourceUri: "ui://trie/memory-viewer" }
         }
       },
       {
@@ -5942,6 +5950,10 @@ var ToolRegistry = class {
             waitForSelector: { type: "string", description: "CSS selector to wait for" },
             waitMs: { type: "number", description: "Additional wait time" }
           }
+        },
+        // MCP Apps: Interactive visual QA gallery
+        _meta: {
+          ui: { resourceUri: "ui://trie/visual-qa" }
         }
       },
       {
@@ -5963,6 +5975,10 @@ var ToolRegistry = class {
               description: "Specific files to review"
             }
           }
+        },
+        // MCP Apps: Interactive PR review UI
+        _meta: {
+          ui: { resourceUri: "ui://trie/pr-review" }
         }
       },
       {
@@ -6046,7 +6062,26 @@ var ToolRegistry = class {
 // src/server/resource-manager.ts
 import { readdir as readdir2, readFile as readFile6 } from "fs/promises";
 import { existsSync as existsSync8 } from "fs";
-import { join as join6 } from "path";
+import { join as join6, dirname as dirname2 } from "path";
+import { fileURLToPath } from "url";
+var UI_APPS = {
+  "scan-dashboard": {
+    name: "Scan Dashboard",
+    description: "Interactive dashboard for viewing and managing scan results"
+  },
+  "memory-viewer": {
+    name: "Memory Viewer",
+    description: "Search and browse issue history with context preview"
+  },
+  "pr-review": {
+    name: "PR Review",
+    description: "File-by-file diff viewer with inline actions"
+  },
+  "visual-qa": {
+    name: "Visual QA",
+    description: "Screenshot gallery with viewport comparison"
+  }
+};
 var ResourceManager = class {
   skillRegistry = getSkillRegistry();
   /**
@@ -6136,6 +6171,7 @@ var ResourceManager = class {
     );
     resources.push(...await this.getScanReportResources());
     resources.push(...await this.getCustomSkillResources());
+    resources.push(...this.getUIAppResources());
     return resources;
   }
   async getScanReportResources() {
@@ -6171,6 +6207,10 @@ var ResourceManager = class {
    * Read content for a specific resource
    */
   async readResourceContent(uri) {
+    if (uri.startsWith("ui://trie/")) {
+      const appId = uri.replace("ui://trie/", "");
+      return await this.getUIAppResource(uri, appId);
+    }
     const parsedUri = uri.replace("trie://", "");
     if (parsedUri === "context") {
       return await this.getContextResource(uri);
@@ -6219,6 +6259,143 @@ var ResourceManager = class {
     }
     throw new Error(`Unknown resource: ${uri}`);
   }
+  /**
+   * Get UI App resources for MCP Apps
+   */
+  getUIAppResources() {
+    return Object.entries(UI_APPS).map(([id, app]) => ({
+      uri: `ui://trie/${id}`,
+      name: app.name,
+      description: app.description,
+      mimeType: "text/html"
+    }));
+  }
+  /**
+   * Read UI App resource content (bundled HTML)
+   */
+  async getUIAppResource(uri, appId) {
+    const currentFile = fileURLToPath(import.meta.url);
+    const distDir = dirname2(dirname2(currentFile));
+    const uiDir = join6(distDir, "ui");
+    const htmlPath = join6(uiDir, `${appId}.html`);
+    try {
+      if (!existsSync8(htmlPath)) {
+        return {
+          contents: [{
+            uri,
+            mimeType: "text/html",
+            text: this.getFallbackUIHtml(appId)
+          }]
+        };
+      }
+      const content = await readFile6(htmlPath, "utf-8");
+      return {
+        contents: [{
+          uri,
+          mimeType: "text/html",
+          text: content
+        }]
+      };
+    } catch (error) {
+      return {
+        contents: [{
+          uri,
+          mimeType: "text/html",
+          text: this.getFallbackUIHtml(appId)
+        }]
+      };
+    }
+  }
+  /**
+   * Generate fallback HTML for UI apps that haven't been built yet
+   */
+  getFallbackUIHtml(appId) {
+    const app = UI_APPS[appId];
+    const title = app?.name || "Trie UI";
+    const description = app?.description || "Loading...";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title} - Trie</title>
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --border: #30363d;
+      --text: #e6edf3;
+      --text-muted: #8b949e;
+      --primary: #58a6ff;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 24px;
+    }
+    .container {
+      text-align: center;
+      max-width: 400px;
+    }
+    h1 {
+      font-size: 24px;
+      margin-bottom: 8px;
+    }
+    p {
+      color: var(--text-muted);
+      margin-bottom: 24px;
+    }
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--primary);
+    }
+    .spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--border);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>${title}</h1>
+    <p>${description}</p>
+    <div class="status">
+      <div class="spinner"></div>
+      <span>Connecting to Trie...</span>
+    </div>
+  </div>
+  <script type="module">
+    // MCP Apps SDK connection
+    import { App } from "@modelcontextprotocol/ext-apps";
+    
+    const app = new App();
+    await app.connect();
+    
+    app.ontoolresult = (result) => {
+      document.querySelector('.status span').textContent = 'Connected! Waiting for data...';
+      console.log('Received tool result:', result);
+    };
+  </script>
+</body>
+</html>`;
+  }
   async getContextResource(uri) {
     const workDir = getWorkingDirectory(void 0, true);
     const state = await loadContextState();
@@ -7238,7 +7415,12 @@ var MCPServer = class {
       {
         capabilities: {
           tools: {},
-          resources: {}
+          resources: {},
+          // Enable MCP Apps - interactive UI components in AI clients
+          // See: https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/
+          experimental: {
+            ui: {}
+          }
         }
       }
     );