@veolab/discoverylab 1.4.4 → 1.6.5

package/dist/index.d.ts

@@ -13,16 +13,35 @@ interface MCPTool {
     name: string;
     description: string;
     inputSchema: z.ZodType<any>;
+    _meta?: Record<string, any>;
     handler: (params: any) => Promise<MCPToolResult>;
 }
+interface MCPToolContent {
+    type: 'text' | 'image';
+    text?: string;
+    data?: string;
+    mimeType?: string;
+}
 interface MCPToolResult {
-    content: Array<{
-        type: 'text' | 'image';
-        text?: string;
-        data?: string;
-        mimeType?: string;
-    }>;
+    content: MCPToolContent[];
     isError?: boolean;
+    structuredContent?: Record<string, any>;
+    _meta?: Record<string, any>;
+}
+interface MCPResourceContents {
+    uri: string;
+    mimeType: string;
+    text?: string;
+    blob?: string;
+    _meta?: Record<string, any>;
+}
+interface MCPResource {
+    uri: string;
+    name: string;
+    title?: string;
+    description?: string;
+    mimeType: string;
+    contents?: MCPResourceContents[];
 }
 interface MCPRequest {
     jsonrpc: '2.0';
@@ -42,12 +61,17 @@ interface MCPResponse {
 }
 declare class MCPServer {
     private tools;
+    private resources;
     private serverInfo;
     registerTool(tool: MCPTool): void;
     registerTools(tools: MCPTool[]): void;
+    registerResource(resource: MCPResource): void;
+    upsertResourceContents(uri: string, resource: Omit<MCPResource, 'uri'>): void;
     handleRequest(request: MCPRequest): Promise<MCPResponse>;
     private handleInitialize;
     private handleToolsList;
+    private handleResourcesList;
+    private handleResourcesRead;
     private handleToolCall;
     private zodToJsonSchema;
     runStdio(): Promise<void>;

package/dist/index.html

@@ -806,6 +806,10 @@
             opacity: 1;
         }
 
+        .project-card.select-mode .project-claude-action {
+            display: none;
+        }
+
         .project-card.select-mode.checked .checkbox-circle {
             opacity: 0;
         }
@@ -920,6 +924,44 @@
             object-fit: cover;
         }
 
+        .project-claude-action {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 999px;
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: rgba(11, 16, 24, 0.78);
+            color: #f5f0e6;
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
+            z-index: 2;
+            cursor: pointer;
+            transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .project-claude-action.secondary {
+            background: rgba(18, 24, 34, 0.6);
+            border-color: rgba(255, 255, 255, 0.1);
+            color: var(--text-secondary);
+        }
+
+        .project-claude-action:hover {
+            transform: translateY(-1px);
+            border-color: rgba(245, 240, 230, 0.5);
+            background: rgba(17, 24, 32, 0.92);
+        }
+
+        .project-claude-action svg,
+        .project-claude-action img {
+            width: 16px;
+            height: 16px;
+        }
+
         .project-info {
             padding: 12px;
         }
@@ -987,6 +1029,84 @@
             font-weight: 700;
         }
 
+        .claude-integration-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid var(--border);
+        }
+
+        .claude-integration-meta {
+            min-width: 0;
+        }
+
+        .claude-integration-title {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.4px;
+            margin-bottom: 4px;
+        }
+
+        .claude-integration-copy {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.45;
+        }
+
+        .claude-integration-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+        }
+
+        .claude-action-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            border: 1px solid rgba(236, 229, 215, 0.18);
+            background: linear-gradient(135deg, rgba(34, 25, 18, 0.96), rgba(17, 12, 9, 0.96));
+            color: #f5f0e6;
+            padding: 9px 12px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+            font-size: 12px;
+            font-weight: 600;
+            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
+        }
+
+        .claude-action-btn:hover {
+            transform: translateY(-1px);
+            border-color: rgba(245, 240, 230, 0.34);
+        }
+
+        .claude-action-btn.secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+            box-shadow: none;
+            border-color: var(--border);
+        }
+
+        .claude-action-btn:disabled {
+            opacity: 0.56;
+            cursor: default;
+            transform: none;
+        }
+
+        .claude-action-btn svg,
+        .claude-action-btn img {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+            object-fit: contain;
+        }
+
         .project-meta {
             font-size: 11px;
             color: var(--text-muted);
@@ -6795,7 +6915,7 @@
                     <span>App Intelligence</span>
                 </div>
                 <div class="welcome-footnote">
-                    Built with the open <a href="https://esvp.dev" target="_blank" rel="noreferrer">ESVP protocol</a> by Entropy Lab for reproducible mobile sessions, replay, and network-aware validation.
+                    Built with the open ESVP protocol by Entropy Lab for reproducible mobile sessions, replay, and network-aware validation.
                 </div>
             </div>
         </div>
@@ -8109,6 +8229,265 @@
             }
         }
 
+        let claudeDesktopStatus = {
+            ready: false,
+            appDetected: false,
+            launcherSupported: false,
+            mcpConfigured: false,
+            serverName: null,
+            installCommand: 'npx -y @veolab/discoverylab@latest install --target desktop',
+            message: 'Checking Claude Desktop...',
+            checking: false,
+            error: null,
+            lastCheckedAt: null
+        };
+
+        function getClaudeIconSvg() {
+            return `
+                <img src="/assets/icons/icons8-claude-150.png" alt="" aria-hidden="true" />
+            `;
+        }
+
+        function projectHasRenderableThumb(project) {
+            if (!project) return false;
+            if (project.thumbnailPath) return true;
+            if (!project.videoPath) return false;
+
+            const ext = String(project.videoPath).toLowerCase().split('.').pop();
+            return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'mp4', 'mov', 'webm'].includes(ext);
+        }
+
+        function isProjectReadyForClaude(project) {
+            if (!project) return false;
+            if (isProjectAnalyzing(project.status || '')) return false;
+            return Boolean(
+                (project.aiSummary && project.aiSummary.trim()) ||
+                (project.ocrText && project.ocrText.trim()) ||
+                (Array.isArray(project.frames) && project.frames.length > 0) ||
+                project.frameCount > 0
+            );
+        }
+
+        function buildClaudeDesktopPrompt(project) {
+            const projectId = project?.id || '';
+            const projectName = project?.name || 'this DiscoveryLab project';
+            return [
+                `Use DiscoveryLab local tools to open project "${projectName}" (projectId: "${projectId}") in an interactive flow canvas.`,
+                `Call dlab.knowledge.open with projectId "${projectId}".`,
+                'After opening the canvas, explain the flow, key screens, and important risks or opportunities.',
+            ].join(' ');
+        }
+
+        function renderClaudeProjectQuickAction(project) {
+            if (!isProjectReadyForClaude(project) || !claudeDesktopStatus.launcherSupported || !projectHasRenderableThumb(project)) {
+                return '';
+            }
+
+            const setupNeeded = claudeDesktopStatus.appDetected && !claudeDesktopStatus.mcpConfigured;
+            const ready = claudeDesktopStatus.ready;
+            const promptTitle = ready
+                ? `Copy prompt and open ${project.name} in Claude Desktop`
+                : setupNeeded
+                    ? `Copy the ${project.name} prompt and open Claude Desktop`
+                    : `Copy the ${project.name} prompt and check Claude Desktop`;
+            const buttonClass = ready ? 'project-claude-action' : 'project-claude-action secondary';
+
+            return `
+                <button
+                    class="${buttonClass}"
+                    type="button"
+                    data-project-id="${escapeAttr(project.id)}"
+                    title="${escapeAttr(promptTitle)}"
+                    aria-label="${escapeAttr(promptTitle)}"
+                    onclick="event.stopPropagation(); openProjectInClaudeById(this.dataset.projectId);"
+                >
+                    ${getClaudeIconSvg()}
+                </button>
+            `;
+        }
+
+        function renderClaudeProjectLaunchRow(project) {
+            const projectReady = isProjectReadyForClaude(project);
+            const statusCopy = !projectReady
+                ? 'Finish analysis or capture enough frames before opening this project in Claude Desktop.'
+                : claudeDesktopStatus.error
+                    ? claudeDesktopStatus.error
+                    : claudeDesktopStatus.message || 'Claude Desktop status unavailable.';
+            const ready = claudeDesktopStatus.ready && projectReady;
+            const setupNeeded = claudeDesktopStatus.appDetected && !claudeDesktopStatus.mcpConfigured;
+            const buttonLabel = ready
+                ? 'Open in Claude Desktop'
+                : !projectReady
+                    ? 'Analyze first'
+                    : setupNeeded
+                        ? 'Copy prompt'
+                        : 'Reload';
+            const buttonClass = ready ? 'claude-action-btn' : 'claude-action-btn secondary';
+            const action = ready
+                ? 'openCurrentProjectInClaude()'
+                : !projectReady
+                    ? ''
+                    : setupNeeded
+                    ? 'copyCurrentProjectClaudePrompt()'
+                    : 'refreshClaudeDesktopStatus()';
+
+            return `
+                <div class="claude-integration-row">
+                    <div class="claude-integration-meta">
+                        <div class="claude-integration-title">Claude Desktop</div>
+                        <div class="claude-integration-copy">${escapeHtml(statusCopy)}</div>
+                    </div>
+                    <div class="claude-integration-actions">
+                        <button class="${buttonClass}" type="button" ${action ? `onclick="${action}"` : 'disabled'}>
+                            ${getClaudeIconSvg()}
+                            <span>${escapeHtml(buttonLabel)}</span>
+                        </button>
+                    </div>
+                </div>
+            `;
+        }
+
+        function rerenderClaudeDesktopAffordances() {
+            if (currentView === 'projects') {
+                renderProjects();
+            } else if (currentView === 'analysis' && currentProject) {
+                updateAnalysisTab();
+            } else if (currentView === 'export' && currentProject) {
+                updateExportTab();
+            }
+        }
+
+        async function refreshClaudeDesktopStatus(options = {}) {
+            const { silent = false } = options;
+            claudeDesktopStatus.checking = true;
+
+            try {
+                const response = await fetch('/api/integrations/claude-desktop/status');
+                const data = await response.json();
+                if (data?.error) {
+                    throw new Error(data.error);
+                }
+
+                claudeDesktopStatus = {
+                    ...claudeDesktopStatus,
+                    ready: !!data.ready,
+                    appDetected: !!data.appDetected,
+                    launcherSupported: !!data.launcherSupported,
+                    mcpConfigured: !!data.mcpConfigured,
+                    serverName: data.serverName || null,
+                    installCommand: data.installCommand || claudeDesktopStatus.installCommand,
+                    message: data.message || 'Claude Desktop status loaded.',
+                    checking: false,
+                    error: null,
+                    lastCheckedAt: new Date().toISOString()
+                };
+            } catch (error) {
+                claudeDesktopStatus = {
+                    ...claudeDesktopStatus,
+                    checking: false,
+                    error: error instanceof Error ? error.message : 'Failed to check Claude Desktop status',
+                    message: 'Could not check Claude Desktop status.'
+                };
+                if (!silent) {
+                    showToast('Failed to check Claude Desktop status', 'error');
+                }
+            }
+
+            rerenderClaudeDesktopAffordances();
+        }
+
+        function copyClaudeDesktopInstallCommand() {
+            void copyToClipboard(
+                claudeDesktopStatus.installCommand || 'npx -y @veolab/discoverylab@latest install --target desktop',
+                { silent: true }
+            ).then((copied) => {
+                showToast(copied ? 'Claude Desktop install command copied' : 'Failed to copy install command', copied ? 'success' : 'error');
+            });
+        }
+
+        async function copyClaudeProjectPrompt(project) {
+            if (!project) return false;
+
+            const copied = await copyToClipboard(buildClaudeDesktopPrompt(project), { silent: true });
+            if (!copied) {
+                showToast('Failed to copy Claude Desktop prompt', 'error');
+                return false;
+            }
+
+            return true;
+        }
+
+        async function copyCurrentProjectClaudePrompt() {
+            if (!currentProject?.id) {
+                showToast('Select a project first', 'warning');
+                return;
+            }
+
+            const copied = await copyClaudeProjectPrompt(currentProject);
+            if (!copied) return;
+
+            showToast('Claude Desktop prompt copied', 'success');
+        }
+
+        async function launchClaudeDesktop() {
+            const response = await fetch('/api/integrations/claude-desktop/launch', { method: 'POST' });
+            const data = await response.json();
+            if (!response.ok || data?.success === false) {
+                throw new Error(data?.error || 'Failed to open Claude Desktop');
+            }
+        }
+
+        async function copyPromptAndLaunchClaude(project) {
+            if (!project) return;
+
+            const copied = await copyClaudeProjectPrompt(project);
+            if (!copied) {
+                return;
+            }
+
+            try {
+                await launchClaudeDesktop();
+                showToast('Prompt copied and Claude Desktop opened', 'success');
+            } catch (error) {
+                showToast(error instanceof Error ? error.message : 'Prompt copied, but Claude Desktop could not be opened', 'warning');
+            }
+        }
+
+        async function openProjectInClaudeById(projectId) {
+            const project = projects.find((item) => item.id === projectId) || (currentProject?.id === projectId ? currentProject : null);
+            if (!project) {
+                showToast('Project not found', 'error');
+                return;
+            }
+
+            if (!claudeDesktopStatus.ready) {
+                if (claudeDesktopStatus.appDetected && !claudeDesktopStatus.mcpConfigured) {
+                    const copied = await copyClaudeProjectPrompt(project);
+                    if (copied) {
+                        showToast('Project prompt copied. Enable the DiscoveryLab extension in Claude Desktop to open it there.', 'warning');
+                    }
+                    return;
+                }
+
+                const copied = await copyClaudeProjectPrompt(project);
+                if (copied) {
+                    showToast(claudeDesktopStatus.message || 'Project prompt copied. Claude Desktop is not ready yet.', 'warning');
+                }
+                return;
+            }
+
+            await copyPromptAndLaunchClaude(project);
+        }
+
+        async function openCurrentProjectInClaude() {
+            if (!currentProject?.id) {
+                showToast('Select a project first', 'warning');
+                return;
+            }
+
+            await openProjectInClaudeById(currentProject.id);
+        }
+
         let jiraMcpStatus = {
             available: false,
             configured: false,
@@ -11288,6 +11667,7 @@
                         <div class="processing-text">${processingText}</div>
                     </div>
                     <div class="project-thumb">
+                        ${renderClaudeProjectQuickAction(p)}
                         ${getProjectThumb(p)}
                     </div>
                     <div class="project-info">
@@ -12418,6 +12798,7 @@
                                 <button class="btn btn-primary btn-small" onclick="retryProjectAnalysis()" id="retryProjectAnalysisBtn">Retry Analysis</button>
                             </div>
                         ` : ''}
+                        ${renderClaudeProjectLaunchRow(currentProject)}
                         <div class="project-integration-row">
                             <div class="project-integration-label">Jira MCP</div>
                             <div class="project-integration-status">
@@ -12864,6 +13245,23 @@
 
                 if (favoriteTemplate && currentTemplateProps?.templatesAllowed !== false) {
                     switchTemplate(favoriteTemplate);
+                } else if (currentTemplateProps?.templatesAllowed !== false) {
+                    // Auto-select cached template if available (no re-render needed)
+                    const templates = templateStatus.templates || [];
+                    for (const t of templates) {
+                        try {
+                            const checkRes = await fetch('/api/templates/render', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ projectId: currentProject?.id, templateId: t.id }),
+                            });
+                            const checkData = await checkRes.json();
+                            if (checkData.cached) {
+                                switchTemplate(t.id);
+                                break;
+                            }
+                        } catch { /* skip */ }
+                    }
                 }
             } catch (e) {
                 console.log('[Templates] Init error:', e);
@@ -12983,7 +13381,7 @@
             }
         }
 
-        async function switchTemplate(templateId) {
+        async function switchTemplate(templateId, force = false) {
             // Skip if already on this template
             if (templateId === activeTemplate) return;
             if (templateId !== 'raw' && currentTemplateProps?.templatesAllowed === false) {
@@ -13028,7 +13426,7 @@
                 const res = await fetch('/api/templates/render', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ projectId: currentProject.id, templateId }),
+                    body: JSON.stringify({ projectId: currentProject.id, templateId, force }),
                 });
                 const data = await res.json();
 
@@ -13038,6 +13436,20 @@
                     return;
                 }
 
+                // Cached render - show immediately without polling
+                if (data.cached && data.previewUrl) {
+                    const skeleton = document.getElementById('templateSkeleton');
+                    const templateContainer = document.getElementById('templatePreviewContainer');
+                    const templateVideo = document.getElementById('templateVideo');
+                    if (skeleton) skeleton.style.display = 'none';
+                    if (templateVideo) {
+                        templateVideo.src = data.previewUrl + '&t=' + Date.now();
+                        templateVideo.load();
+                    }
+                    if (templateContainer) templateContainer.style.display = '';
+                    return;
+                }
+
                 if (data.jobId) {
                     pollRenderJob(data.jobId, templateId);
                 }
@@ -13490,11 +13902,11 @@
                     deviceMockup: data.content?.deviceMockup || deviceMockup,
                 };
 
-                // Force re-render
+                // Force re-render after content edit
                 if (activeTemplate !== 'raw') {
                     const prevTemplate = activeTemplate;
                     activeTemplate = '__force_rerender__';
-                    switchTemplate(prevTemplate);
+                    switchTemplate(prevTemplate, true);
                 }
             } catch {
                 showToast('Failed to save content', 'error');
@@ -15571,9 +15983,34 @@
             showToast(`Copied "${command}" - paste in Claude Code`, 'success', 5000);
         }
 
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text);
-            showToast('Copied to clipboard', 'success');
+        async function copyToClipboard(text, options = {}) {
+            const { silent = false } = options;
+
+            try {
+                if (navigator.clipboard?.writeText) {
+                    await navigator.clipboard.writeText(text);
+                } else {
+                    const textarea = document.createElement('textarea');
+                    textarea.value = text;
+                    textarea.setAttribute('readonly', 'true');
+                    textarea.style.position = 'absolute';
+                    textarea.style.left = '-9999px';
+                    document.body.appendChild(textarea);
+                    textarea.select();
+                    document.execCommand('copy');
+                    textarea.remove();
+                }
+
+                if (!silent) {
+                    showToast('Copied to clipboard', 'success');
+                }
+                return true;
+            } catch (error) {
+                if (!silent) {
+                    showToast('Failed to copy to clipboard', 'error');
+                }
+                return false;
+            }
         }
 
         async function openMaestroStudio() {
@@ -15868,6 +16305,7 @@
                 if (el && data.version) el.textContent = 'v' + data.version;
             }).catch(() => {});
             void loadProxySafetySettings().catch(() => null);
+            void refreshClaudeDesktopStatus({ silent: true });
 
             // Auto-check dependencies on first load — open Settings if critical deps missing
             fetch('/api/setup/status').then(r => r.json()).then(data => {
@@ -21984,8 +22422,8 @@ appId: ${platform === 'ios' ? 'com.apple.Preferences' : 'com.android.settings'}
                 jpg: 'Exports the current capture as JPEG images.',
                 mp4: 'Exports the current capture as an MP4 video.',
                 gif: 'Exports the current capture as an animated GIF.',
-                applab: 'Packages everything App Lab has locally for this project: media, recording session, test script, network trace, OCR, app intelligence, Task Hub data, and prior export artifacts like grids.',
-                esvp: 'Packages the full local project plus the attached ESVP session snapshot when available, so you can share trace, scripts, media, OCR, and app intelligence together.',
+                applab: 'Packages a Claude-friendly App Lab bundle: analyzed frames, thumbnail, OCR, app intelligence, network trace, ESVP snapshot, and Task Hub metadata without heavy renders or long recordings.',
+                esvp: 'Packages a lightweight ESVP-ready bundle with analyzed frames, OCR, app intelligence, network trace, and the attached ESVP snapshot when available.',
             };
 
             help.textContent = descriptions[select.value] || '';
@@ -22043,13 +22481,37 @@ appId: ${platform === 'ios' ? 'com.apple.Preferences' : 'com.android.settings'}
                         <div id="exportFormatHelp" style="margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.5;"></div>
                     </div>
 
-                    <button class="btn btn-primary" onclick="exportProject()">Export</button>
+                    <div style="display: flex; gap: 8px;">
+                        <button class="btn btn-primary" onclick="exportProject()">Export</button>
+                        <button class="btn btn-secondary" onclick="exportInfographicHtml()" style="font-size: 11px;">Infographic HTML</button>
+                    </div>
                 </div>
             `;
 
             updateExportFormatHelp();
         }
 
+        async function exportInfographicHtml() {
+            if (!currentProject) return;
+            showToast('Generating infographic...', 'info');
+            try {
+                const resp = await fetch('/api/export/infographic', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ projectId: currentProject.id, open: true }),
+                });
+                const data = await resp.json();
+                if (data.success) {
+                    const sizeKb = ((data.size || 0) / 1024).toFixed(1);
+                    showToast(`Infographic exported (${sizeKb}KB, ${data.frameCount} frames)`, 'success');
+                } else {
+                    showToast(data.error || 'Export failed', 'error');
+                }
+            } catch (err) {
+                showToast('Export failed', 'error');
+            }
+        }
+
         async function exportProject() {
             if (!currentProject) return;
 

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   startServer,
   stopServer
-} from "./chunk-2UUMLAVR.js";
+} from "./chunk-V6RREMYD.js";
 import {
   analyzeTools,
   canvasTools,
@@ -16,15 +16,15 @@ import {
   templateTools,
   testingTools,
   uiTools
-} from "./chunk-HB3YPWF3.js";
+} from "./chunk-Q7Q3A2ZI.js";
+import "./chunk-34GGYFXX.js";
 import "./chunk-PMCXEA7J.js";
 import {
   setupTools
-} from "./chunk-CUBQRT5L.js";
+} from "./chunk-JAA53ES7.js";
 import {
   mcpServer
-} from "./chunk-XKX6NBHF.js";
-import "./chunk-34GGYFXX.js";
+} from "./chunk-TWRWARU4.js";
 import "./chunk-6GK5K6CS.js";
 import "./chunk-7R5YNOXE.js";
 import "./chunk-3ERJNXYM.js";