@mohityadav0903/branintelle-mcp 2.2.0 → 3.1.0

package/MCP-V3-RELEASE-NOTES.md

@@ -0,0 +1,231 @@
+# 🎉 MCP v3.1 - Enhanced with Base64 Image Support for LLM Vision
+
+## ✅ What Was Completed
+
+### 1. **6 Figma Screenshots Uploaded to S3**
+```
+✅ screen_001_briefs_listing_drafts.png (184 KB)
+✅ screen_002_rfp_triage_assign_buyer.png (198 KB)
+✅ screen_003_rfp_in_progress_all_status.png (153 KB)
+✅ screen_004_brief_creation_step2_supporting.png (98 KB)
+✅ screen_005_brief_creation_step4_vendor_recommendation.png (116 KB)
+✅ screen_006_provisions_listing_grouped.png (140 KB)
+```
+
+**Base URL:** `https://figr-branintelle-assets.s3.amazonaws.com/screens/`
+
+### 2. **Created `screen-patterns.json`**
+Comprehensive screen pattern database including:
+- Screen metadata (type, route, module)
+- Workflow patterns
+- Components used
+- Features (bulk selection, tabs, filters, etc.)
+- Design patterns
+- Key interactions
+- **Screenshot URLs** 🎯
+
+### 3. **Enhanced MCP Server (v3.1.0)**
+
+#### 🆕 New Tools Added:
+
+**`get_screen_patterns`**
+```typescript
+// Get all listing page patterns
+get_screen_patterns({ screen_type: "listing_page" })
+
+// Filter by workflow
+get_screen_patterns({ workflow: "triage_assignment" })
+
+// Filter by module
+get_screen_patterns({ module: "P2P" })
+```
+
+**`get_screen_details`**
+```typescript
+// Get full details of a specific screen with screenshot
+get_screen_details({ 
+  screen_id: "screen_001",
+  include_components: true 
+})
+
+// Returns:
+{
+  screen: {
+    name: "Briefs Listing - Drafts Tab",
+    screenshot_url: "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_001_briefs_listing_drafts.png",
+    components_used: ["stats-cards", "tabs", "scrollable-data-table"],
+    features: { has_bulk_selection: true, has_tabs: true }
+  },
+  components_breakdown: [...]
+}
+```
+
+**`search_by_pattern`**
+```typescript
+// Find screens with specific features
+search_by_pattern({ 
+  features: ["bulk_selection", "inline_actions"],
+  components: ["stats-cards", "data-table"]
+})
+
+// Find by workflow
+search_by_pattern({ workflow: "active_management" })
+```
+
+**🆕 `get_screen_image` - NEW IN v3.1!**
+```typescript
+// Fetch screenshot as base64 data URL for LLM vision
+get_screen_image({ screen_id: "screen_001" })
+
+// Returns:
+{
+  screen_id: "screen_001",
+  screen_name: "Briefs Listing - Drafts Tab",
+  image_data_url: "data:image/png;base64,iVBORw0KGgoAAAANS...",
+  image_url: "https://...",
+  size_kb: 245
+}
+```
+
+### 4. **All Existing Tools Still Work**
+✅ `list_components`
+✅ `get_component_docs`
+✅ `get_design_tokens`
+✅ `search_components`
+✅ `get_usage_pattern`
+
+---
+
+## 🎯 **How LLMs Can Use This**
+
+### Example 1: "Show me how to build a listing page"
+```typescript
+// Step 1: Get pattern with screenshot URL
+get_screen_patterns({ screen_type: "listing_page" })
+
+// Step 2: Fetch the actual image for vision analysis
+get_screen_image({ screen_id: "screen_001" })
+
+// LLM can now SEE the screen layout, colors, spacing, and UI patterns!
+
+// Step 3: Get component documentation
+get_component_docs({ components: ["StatsCards", "Tabs", "ScrollableDataTable"] })
+
+// And implement the exact pattern with visual context!
+```
+
+### Example 2: "What does the RFP triage screen look like?"
+```typescript
+get_screen_image({ screen_id: "screen_002" })
+
+// Returns base64 image that LLM can analyze visually
+// LLM can identify:
+// - "Assign Buyer" inline action buttons
+// - Time urgency indicators
+// - Stats cards layout
+// - Bulk selection checkboxes
+```
+
+### Example 3: "Show me wizard form examples"
+```typescript
+get_screen_patterns({ screen_type: "form_wizard" })
+// Returns screen_004 and screen_005
+
+get_screen_image({ screen_id: "screen_004" })
+// LLM sees the step-by-step wizard with visual stepper
+```
+
+---
+
+## 📊 **Screen Types Available**
+
+| Type | Count | Examples |
+|------|-------|----------|
+| `listing_page` | 1 | Briefs Listing |
+| `listing_page_workflow` | 1 | RFP Triage |
+| `listing_page_complex` | 1 | RFP In Progress |
+| `listing_page_grouped` | 1 | Provisions Listing |
+| `form_wizard` | 2 | Brief Creation Steps |
+
+---
+
+## 🔄 **Workflow Patterns**
+
+- `classic_list_index` - Standard listing with tabs
+- `triage_assignment` - Items awaiting assignment
+- `active_management` - Complex status management
+- `grouped_listing_readonly` - Collapsible vendor groups
+- `multi_step_form` - Wizard-based forms
+
+---
+
+## 🚀 **Publishing**
+
+```bash
+cd /Users/mohityadav/Downloads/branintelle-mcp
+npm publish
+```
+
+Version: **3.1.0**
+
+---
+
+## 🎁 **Benefits**
+
+✅ **Visual Context** - LLMs can SEE actual screens via base64 images
+✅ **Pattern-Based** - Find by workflow, not just components
+✅ **Feature-Driven** - Search by capabilities (bulk ops, filters, etc.)
+✅ **Base64 Data URLs** - Direct image analysis for vision-enabled LLMs
+✅ **Component Mapping** - Know exactly which components to use
+✅ **Workflow Guidance** - Understand the user flow
+✅ **No External Dependencies** - Images fetched on-demand from S3
+
+---
+
+## 🆕 **What's New in v3.1?**
+
+### `get_screen_image` Tool
+- **Fetches screenshots from S3** and converts to base64
+- **Returns data URLs** in `data:image/png;base64,...` format
+- **LLM vision compatible** - Can be analyzed by Claude, GPT-4V, etc.
+- **245 KB average** - Optimized PNG images
+- **On-demand loading** - Only fetches when requested
+
+### Why Base64?
+- ✅ LLMs can "see" the image directly
+- ✅ No external image hosting required for LLM context
+- ✅ Works with any vision-enabled model
+- ✅ Self-contained responses
+
+---
+
+## 📝 **Next Steps**
+
+1. ✅ Publish MCP v3.1.0
+2. ✅ Test with Claude/LLMs with vision
+3. ⏳ Add more screens as they're designed
+4. ⏳ Consider image caching for performance
+5. ⏳ Add thumbnail versions for faster previews
+
+---
+
+## 🔗 **Quick Test**
+
+Try these in your MCP-enabled LLM:
+
+```
+"Show me the briefs listing screen"
+→ get_screen_image({ screen_id: "screen_001" })
+
+"What UI patterns are used in the RFP triage screen?"
+→ get_screen_image({ screen_id: "screen_002" }) + pattern analysis
+
+"Find screens with bulk selection and show me one"
+→ search_by_pattern + get_screen_image
+
+"Show me all wizard form screens"
+→ get_screen_patterns({ screen_type: "form_wizard" }) + get_screen_image for each
+```
+
+The LLM will now get back **visual references as base64 images** + component documentation! 🎯👀
+

package/mcp-server.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 /**
- * Branintelle UI Library - MCP Server v2.0
- * Enhanced with full component metadata, design tokens, and usage patterns
+ * Branintelle UI Library - MCP Server v3.1
+ * Enhanced with screen patterns, Figma screenshots, and base64 image fetching
  */
 
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
@@ -14,6 +14,7 @@ import {
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
+import https from 'https';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -26,11 +27,38 @@ const designTokens = JSON.parse(
 // Load component data
 import { COMPONENTS_DATA, COMPONENT_CATEGORIES, USAGE_PATTERNS } from './components-data.js';
 
+// Load screen patterns
+const screenPatterns = JSON.parse(
+  readFileSync(join(__dirname, 'screen-patterns.json'), 'utf-8')
+);
+
+// Helper function to fetch image and convert to base64
+async function fetchImageAsBase64(url) {
+  return new Promise((resolve, reject) => {
+    https.get(url, (response) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Failed to fetch image: ${response.statusCode}`));
+        return;
+      }
+
+      const chunks = [];
+      response.on('data', (chunk) => chunks.push(chunk));
+      response.on('end', () => {
+        const buffer = Buffer.concat(chunks);
+        const base64 = buffer.toString('base64');
+        const mimeType = response.headers['content-type'] || 'image/png';
+        resolve(`data:${mimeType};base64,${base64}`);
+      });
+      response.on('error', reject);
+    }).on('error', reject);
+  });
+}
+
 // Create server instance
 const server = new Server(
   {
     name: 'branintelle-ui-lib',
-    version: '2.0.0',
+    version: '3.1.0',
   },
   {
     capabilities: {
@@ -127,6 +155,84 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           },
         },
       },
+      {
+        name: 'get_screen_patterns',
+        description: 'Get Figma screen patterns with screenshots. Filter by screen type, workflow, or module to find relevant UI patterns.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            screen_type: {
+              type: 'string',
+              description: 'Filter by screen type',
+              enum: ['listing_page', 'listing_page_workflow', 'listing_page_complex', 'listing_page_grouped', 'form_wizard', 'all'],
+            },
+            workflow: {
+              type: 'string',
+              description: 'Filter by workflow pattern (e.g., triage_assignment, active_management)',
+            },
+            module: {
+              type: 'string',
+              description: 'Filter by module (e.g., P2P, Plan to Impact)',
+            },
+          },
+        },
+      },
+      {
+        name: 'get_screen_details',
+        description: 'Get detailed information about a specific screen including screenshot URL, components used, and interactions',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            screen_id: {
+              type: 'string',
+              description: 'Screen ID (screen_001, screen_002, etc.)',
+            },
+            include_components: {
+              type: 'boolean',
+              description: 'Include full component documentation',
+              default: true
+            }
+          },
+          required: ['screen_id'],
+        },
+      },
+      {
+        name: 'search_by_pattern',
+        description: 'Search screens and components by workflow pattern or features (bulk_selection, inline_actions, etc.)',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            workflow: {
+              type: 'string',
+              description: 'Workflow pattern to search for',
+            },
+            features: {
+              type: 'array',
+              items: { type: 'string' },
+              description: 'Required features (e.g., bulk_selection, tabs, filters)',
+            },
+            components: {
+              type: 'array',
+              items: { type: 'string' },
+              description: 'Required components (e.g., stats-cards, data-table)',
+            },
+          },
+        },
+      },
+      {
+        name: 'get_screen_image',
+        description: 'Fetch a screen screenshot as base64 data URL so LLMs can see the actual UI. Returns image in data:image/png;base64,... format.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            screen_id: {
+              type: 'string',
+              description: 'Screen ID (screen_001, screen_002, etc.)',
+            },
+          },
+          required: ['screen_id'],
+        },
+      },
     ],
   };
 });
@@ -366,6 +472,191 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       };
     }
 
+    // GET SCREEN PATTERNS
+    if (name === 'get_screen_patterns') {
+      const screen_type = args?.screen_type;
+      const workflow = args?.workflow;
+      const module = args?.module;
+      
+      let screens = Object.values(screenPatterns.screens);
+      
+      if (screen_type && screen_type !== 'all') {
+        screens = screens.filter(s => s.type === screen_type);
+      }
+      
+      if (workflow) {
+        screens = screens.filter(s => s.workflow_pattern === workflow);
+      }
+      
+      if (module) {
+        screens = screens.filter(s => s.module === module);
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              filters: { screen_type, workflow, module },
+              count: screens.length,
+              screens: screens,
+              screen_types: Object.keys(screenPatterns.screenTypes || {}),
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    // GET SCREEN DETAILS
+    if (name === 'get_screen_details') {
+      const screen_id = args?.screen_id;
+      const include_components = args?.include_components !== false;
+      
+      const screen = screenPatterns.screens[screen_id];
+      
+      if (!screen) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Screen not found',
+                available_screens: Object.keys(screenPatterns.screens)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      const result = { screen };
+      
+      if (include_components) {
+        result.components_breakdown = screen.components_used
+          .map(name => COMPONENTS_DATA[name + 'Component'])
+          .filter(Boolean);
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify(result, null, 2),
+          },
+        ],
+      };
+    }
+
+    // SEARCH BY PATTERN
+    if (name === 'search_by_pattern') {
+      const workflow = args?.workflow;
+      const features = args?.features || [];
+      const components = args?.components || [];
+      
+      let screens = Object.values(screenPatterns.screens);
+      
+      if (workflow) {
+        screens = screens.filter(s => s.workflow_pattern === workflow);
+      }
+      
+      if (features.length > 0) {
+        screens = screens.filter(s => 
+          features.every(f => s.features[f] === true)
+        );
+      }
+      
+      if (components.length > 0) {
+        screens = screens.filter(s => 
+          components.every(c => s.components_used.includes(c))
+        );
+      }
+
+      // Get recommended components based on matching screens
+      const allComponents = new Set();
+      screens.forEach(s => s.components_used.forEach(c => allComponents.add(c)));
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text: JSON.stringify({
+              filters: { workflow, features, components },
+              matching_screens: screens,
+              count: screens.length,
+              recommended_components: Array.from(allComponents),
+            }, null, 2),
+          },
+        ],
+      };
+    }
+
+    // GET SCREEN IMAGE
+    if (name === 'get_screen_image') {
+      const screen_id = args?.screen_id;
+      
+      if (!screen_id) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'screen_id is required',
+                available_screens: Object.keys(screenPatterns.screens)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      const screen = screenPatterns.screens[screen_id];
+      
+      if (!screen) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Screen not found',
+                available_screens: Object.keys(screenPatterns.screens)
+              }, null, 2),
+            },
+          ],
+        };
+      }
+
+      try {
+        const base64Image = await fetchImageAsBase64(screen.screenshot_url);
+        
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                screen_id: screen.id,
+                screen_name: screen.name,
+                image_data_url: base64Image,
+                image_url: screen.screenshot_url,
+                usage: 'Use the image_data_url in <img src="..." /> or display directly',
+                size_kb: Math.round(base64Image.length / 1024)
+              }, null, 2),
+            },
+          ],
+        };
+      } catch (error) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: JSON.stringify({
+                error: 'Failed to fetch image',
+                message: error.message,
+                screenshot_url: screen.screenshot_url
+              }, null, 2),
+            },
+          ],
+        };
+      }
+    }
+
     return {
       content: [
         {
@@ -390,8 +681,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 async function main() {
   const transport = new StdioServerTransport();
   await server.connect(transport);
-  console.error('Branintelle UI Library MCP Server v2.0 running on stdio');
-  console.error('Enhanced with full component metadata and design tokens');
+  console.error('Branintelle UI Library MCP Server v3.1 running on stdio');
+  console.error('✨ Enhanced with screen patterns and Figma screenshots');
+  console.error('📸 6 screens with base64 image support for LLM vision');
 }
 
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohityadav0903/branintelle-mcp",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "type": "module",
   "description": "MCP server for Branintelle UI Library - provides component documentation via Model Context Protocol",
   "main": "mcp-server.js",

package/screen-patterns.json

@@ -0,0 +1,392 @@
+{
+  "screens": {
+    "screen_001": {
+      "id": "screen_001",
+      "name": "Briefs Listing - Drafts Tab",
+      "type": "listing_page",
+      "route": "/briefs",
+      "module": "Plan to Impact",
+      "workflow_pattern": "classic_list_index",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_001_briefs_listing_drafts.png",
+      "components_used": [
+        "stats-cards",
+        "tabs",
+        "action-bar",
+        "scrollable-data-table"
+      ],
+      "features": {
+        "has_bulk_selection": true,
+        "has_row_actions": true,
+        "has_tabs": true,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": true,
+        "has_wizard": false,
+        "has_grouping": false
+      },
+      "design_patterns": [
+        "Stats cards",
+        "Tab navigation",
+        "Data table with sorting",
+        "Bulk selection",
+        "Row actions menu",
+        "Search and filter",
+        "Primary/secondary CTAs"
+      ],
+      "key_interactions": [
+        "Bulk select briefs via checkboxes",
+        "Filter briefs using filter button",
+        "Search briefs by keyword",
+        "Sort columns by clicking headers",
+        "Access row actions via 3-dot menu",
+        "Create new brief via primary CTA",
+        "Export data via Export Report button",
+        "Click on brief ID to view details",
+        "Switch between tabs to filter by status"
+      ]
+    },
+    "screen_002": {
+      "id": "screen_002",
+      "name": "RFP Listing - Assign Buyer (Triage)",
+      "type": "listing_page_workflow",
+      "route": "/rfp/triage",
+      "module": "P2P",
+      "workflow_pattern": "triage_assignment",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_002_rfp_triage_assign_buyer.png",
+      "components_used": [
+        "stats-cards",
+        "action-bar",
+        "scrollable-data-table",
+        "inline-actions"
+      ],
+      "features": {
+        "has_bulk_selection": true,
+        "has_row_actions": true,
+        "has_tabs": false,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": true,
+        "has_wizard": false,
+        "has_grouping": false
+      },
+      "design_patterns": [
+        "Stats cards with multi-label",
+        "Inline action buttons",
+        "Time urgency indicators",
+        "Bulk selection with disabled-until-selection CTA",
+        "Helper text for workflow guidance",
+        "No tabs for single-state listings",
+        "Relative time display"
+      ],
+      "key_interactions": [
+        "Bulk select briefs via checkboxes",
+        "Click inline 'Assign Buyer' button on any row",
+        "Select multiple and use bulk 'Assign Buyer' action",
+        "Filter briefs using filter button",
+        "Search briefs by keyword",
+        "Sort columns by clicking headers",
+        "Export data via Export Report button",
+        "View time urgency indicators"
+      ]
+    },
+    "screen_003": {
+      "id": "screen_003",
+      "name": "RFP Listing - In Progress (All Status)",
+      "type": "listing_page_complex",
+      "route": "/rfp/in-progress",
+      "module": "P2P",
+      "workflow_pattern": "active_management",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_003_rfp_in_progress_all_status.png",
+      "components_used": [
+        "stats-cards",
+        "action-bar",
+        "scrollable-data-table",
+        "inline-actions"
+      ],
+      "features": {
+        "has_bulk_selection": false,
+        "has_row_actions": true,
+        "has_tabs": false,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": false,
+        "has_wizard": false,
+        "has_grouping": false
+      },
+      "design_patterns": [
+        "Stats cards with state",
+        "Dropdown filters (status and user)",
+        "Inline action buttons",
+        "Progress bars with fractions",
+        "Status badges with semantic colors",
+        "Icon badges for round types",
+        "User avatar with name",
+        "No bulk selection",
+        "Row-level management"
+      ],
+      "key_interactions": [
+        "Filter by status via dropdown",
+        "Filter by buyer lead via user dropdown",
+        "Add new rounds via inline + button",
+        "Expand round details via expand button",
+        "Access more options via 3-dot menu",
+        "Sort columns by clicking headers",
+        "Click RFP ID to view details",
+        "Monitor vendor participation progress",
+        "Track submission deadlines"
+      ]
+    },
+    "screen_004": {
+      "id": "screen_004",
+      "name": "Brief Creation - Supporting Documents (Step 2)",
+      "type": "form_wizard",
+      "route": "/briefs/create/supporting",
+      "module": "Plan to Impact",
+      "workflow_pattern": "multi_step_form",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_004_brief_creation_step2_supporting.png",
+      "components_used": [
+        "stats-cards",
+        "action-bar",
+        "scrollable-data-table",
+        "form-sections"
+      ],
+      "features": {
+        "has_bulk_selection": false,
+        "has_row_actions": false,
+        "has_tabs": false,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": false,
+        "has_wizard": true,
+        "has_grouping": false
+      },
+      "design_patterns": [
+        "Wizard stepper",
+        "Sub-step indicators",
+        "File upload dropzone",
+        "File cards with actions",
+        "Error states",
+        "Confidential badge/lock",
+        "Progress tracking",
+        "Draft saving",
+        "Navigation buttons (Prev/Next)"
+      ],
+      "key_interactions": [
+        "Navigate between wizard steps via left sidebar",
+        "Upload files via drag-drop or click",
+        "Mark files as confidential via lock icon",
+        "Edit file metadata via edit icon",
+        "Delete uploaded files via delete icon",
+        "Save progress as draft",
+        "Navigate to previous step",
+        "Proceed to next step (KPI's)",
+        "Go back to brief listing"
+      ]
+    },
+    "screen_005": {
+      "id": "screen_005",
+      "name": "Brief Creation - Vendor Recommendation (Step 4)",
+      "type": "form_wizard",
+      "route": "/briefs/create/vendor-recommendation",
+      "module": "Plan to Impact",
+      "workflow_pattern": "multi_step_form",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_005_brief_creation_step4_vendor_recommendation.png",
+      "components_used": [
+        "stats-cards",
+        "action-bar",
+        "scrollable-data-table",
+        "form-sections"
+      ],
+      "features": {
+        "has_bulk_selection": false,
+        "has_row_actions": false,
+        "has_tabs": false,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": false,
+        "has_wizard": true,
+        "has_grouping": false
+      },
+      "design_patterns": [
+        "Wizard stepper",
+        "Preference cards (highlighted for top choice)",
+        "Vendor status badges",
+        "MSME type badge",
+        "Attachment count indicator",
+        "Comments section",
+        "Card actions (edit, lock, delete)",
+        "Secondary table for additional items",
+        "Add button (top-right)",
+        "Status icons (user_check, user_group)",
+        "Highlight border for active selection"
+      ],
+      "key_interactions": [
+        "Add new vendors via '+ Add Vendor' button",
+        "Reorder vendor preferences (drag-drop or edit)",
+        "Mark vendors as Registered/Unregistered",
+        "Add/edit vendor comments",
+        "Attach supporting documents to vendor cards (count: 3)",
+        "Edit vendor details via edit icon",
+        "Lock vendor information via lock icon (for registered)",
+        "Delete vendors via delete icon",
+        "Move vendors between preference levels and 'Other Considerations'",
+        "View more details via 3-dot menu in table",
+        "Save progress as draft",
+        "Navigate to previous step (Cost Details)",
+        "Proceed to next step (Review and Save)"
+      ]
+    },
+    "screen_006": {
+      "id": "screen_006",
+      "name": "Provisions Listing - Grouped by Vendor",
+      "type": "listing_page_grouped",
+      "route": "/p2p/provisions",
+      "module": "P2P",
+      "workflow_pattern": "grouped_listing_readonly",
+      "screenshot_url": "https://figr-branintelle-assets.s3.amazonaws.com/screens/screen_006_provisions_listing_grouped.png",
+      "components_used": [
+        "stats-cards",
+        "tabs",
+        "action-bar",
+        "scrollable-data-table"
+      ],
+      "features": {
+        "has_bulk_selection": false,
+        "has_row_actions": false,
+        "has_tabs": true,
+        "has_filters": true,
+        "has_search": true,
+        "has_export": false,
+        "has_wizard": false,
+        "has_grouping": true
+      },
+      "design_patterns": [
+        "Grouped/collapsible table",
+        "View switching tabs",
+        "Stats cards with time filters",
+        "MSME vendor badges",
+        "Clickable links (PO) vs static text (WC)",
+        "Currency formatting",
+        "Date range display",
+        "Search and filter",
+        "Export report",
+        "Auto-sync indicator"
+      ],
+      "key_interactions": [
+        "Switch between Vendor/Brand/PO views via tabs",
+        "Expand/collapse vendor groups",
+        "Click PO links to view details",
+        "Filter provisions",
+        "Search across provisions",
+        "Sort columns",
+        "Download Provision Report",
+        "Switch between Current Month and All Months views"
+      ]
+    }
+  },
+  "workflowPatterns": {
+    "stats_cards": {
+      "count": 4,
+      "position": "top_of_page",
+      "contains": [
+        "count",
+        "budget",
+        "filter_option"
+      ],
+      "interactive": true
+    },
+    "action_bar": {
+      "layout": "split",
+      "left": [
+        "filters",
+        "add",
+        "search"
+      ],
+      "right": [
+        "secondary_action",
+        "primary_cta"
+      ]
+    },
+    "data_table": {
+      "features": [
+        "sorting",
+        "bulk_selection",
+        "row_actions"
+      ],
+      "frozen_columns": [
+        "checkbox",
+        "actions_or_id"
+      ]
+    },
+    "color_coding": {
+      "brief_ids": "orange",
+      "status_badges": "semantic_colors",
+      "action_buttons": "blue"
+    }
+  },
+  "screenTypes": {
+    "listing_page": {
+      "examples": [
+        "screen_001"
+      ],
+      "characteristics": [
+        "stats cards",
+        "tabs",
+        "data table",
+        "bulk actions",
+        "row actions menu"
+      ]
+    },
+    "listing_page_workflow": {
+      "examples": [
+        "screen_002"
+      ],
+      "characteristics": [
+        "stats cards",
+        "no tabs",
+        "inline actions",
+        "helper text",
+        "disabled CTAs"
+      ]
+    },
+    "listing_page_complex": {
+      "examples": [
+        "screen_003"
+      ],
+      "characteristics": [
+        "stats cards",
+        "dropdown filters",
+        "inline actions",
+        "progress bars",
+        "status badges"
+      ]
+    },
+    "listing_page_grouped": {
+      "examples": [
+        "screen_006"
+      ],
+      "characteristics": [
+        "stats cards",
+        "view tabs",
+        "grouped/collapsible rows",
+        "read-only",
+        "auto-sync"
+      ]
+    },
+    "form_wizard": {
+      "examples": [
+        "screen_004",
+        "screen_005"
+      ],
+      "characteristics": [
+        "stepper",
+        "sub-steps",
+        "prev/next nav",
+        "draft saving",
+        "validation",
+        "progress tracking"
+      ]
+    }
+  },
+  "useCases": {}
+}

package/test-image-tool.js

@@ -0,0 +1,88 @@
+import { spawn } from 'child_process';
+
+const mcpServer = spawn('node', ['mcp-server.js'], {
+  stdio: ['pipe', 'pipe', 'inherit']
+});
+
+const responses = [];
+let buffer = '';
+
+mcpServer.stdout.on('data', (data) => {
+  buffer += data.toString();
+  const lines = buffer.split('\n');
+  
+  for (let i = 0; i < lines.length - 1; i++) {
+    const line = lines[i].trim();
+    if (line && line.startsWith('{')) {
+      try {
+        const response = JSON.parse(line);
+        responses.push(response);
+      } catch (e) {
+        // Ignore non-JSON lines
+      }
+    }
+  }
+  
+  buffer = lines[lines.length - 1];
+});
+
+// Send initialize request
+const initRequest = {
+  jsonrpc: '2.0',
+  id: 1,
+  method: 'initialize',
+  params: {
+    protocolVersion: '2024-11-05',
+    capabilities: {},
+    clientInfo: {
+      name: 'test-client',
+      version: '1.0.0'
+    }
+  }
+};
+
+mcpServer.stdin.write(JSON.stringify(initRequest) + '\n');
+
+// Wait a bit then request screen image
+setTimeout(() => {
+  const imageRequest = {
+    jsonrpc: '2.0',
+    id: 2,
+    method: 'tools/call',
+    params: {
+      name: 'get_screen_image',
+      arguments: {
+        screen_id: 'screen_001'
+      }
+    }
+  };
+  
+  mcpServer.stdin.write(JSON.stringify(imageRequest) + '\n');
+  
+  // Wait for response then exit
+  setTimeout(() => {
+    console.log('\n🎯 Testing get_screen_image tool...\n');
+    
+    const imageResponse = responses.find(r => r.id === 2);
+    if (imageResponse && imageResponse.result) {
+      const content = JSON.parse(imageResponse.result.content[0].text);
+      console.log('✅ Screen ID:', content.screen_id);
+      console.log('✅ Screen Name:', content.screen_name);
+      console.log('✅ Image Size:', content.size_kb + ' KB');
+      console.log('✅ Image Data URL:', content.image_data_url.substring(0, 100) + '...');
+      console.log('\n🎉 Image tool working! Base64 data URL returned successfully.');
+    } else {
+      console.log('❌ Failed to get image response');
+      console.log(JSON.stringify(responses, null, 2));
+    }
+    
+    mcpServer.kill();
+    process.exit(0);
+  }, 3000);
+}, 1000);
+
+setTimeout(() => {
+  console.log('⏱️  Timeout - killing process');
+  mcpServer.kill();
+  process.exit(1);
+}, 10000);