npm - @cluesmith/codev - Versions diffs - 1.2.2 → 1.3.0 - Mend

@cluesmith/codev 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/bin/generate-image.js +7 -0
package/dist/agent-farm/cli.d.ts.map +1 -1
package/dist/agent-farm/cli.js +0 -36
package/dist/agent-farm/cli.js.map +1 -1
package/dist/agent-farm/commands/start.js +32 -0
package/dist/agent-farm/commands/start.js.map +1 -1
package/dist/agent-farm/servers/dashboard-server.d.ts +0 -2
package/dist/agent-farm/servers/dashboard-server.d.ts.map +1 -1
package/dist/agent-farm/servers/dashboard-server.js +89 -4
package/dist/agent-farm/servers/dashboard-server.js.map +1 -1
package/dist/agent-farm/servers/open-server.d.ts +0 -2
package/dist/agent-farm/servers/open-server.d.ts.map +1 -1
package/dist/agent-farm/servers/open-server.js +51 -7
package/dist/agent-farm/servers/open-server.js.map +1 -1
package/dist/agent-farm/servers/tower-server.d.ts +0 -2
package/dist/agent-farm/servers/tower-server.d.ts.map +1 -1
package/dist/agent-farm/servers/tower-server.js +16 -4
package/dist/agent-farm/servers/tower-server.js.map +1 -1
package/dist/agent-farm/utils/shell.d.ts +2 -1
package/dist/agent-farm/utils/shell.d.ts.map +1 -1
package/dist/agent-farm/utils/shell.js +35 -2
package/dist/agent-farm/utils/shell.js.map +1 -1
package/dist/cli.d.ts.map +1 -1
package/dist/cli.js +24 -0
package/dist/cli.js.map +1 -1
package/dist/commands/generate-image.d.ts +13 -0
package/dist/commands/generate-image.d.ts.map +1 -0
package/dist/commands/generate-image.js +155 -0
package/dist/commands/generate-image.js.map +1 -0
package/package.json +5 -3
package/templates/dashboard-split.html +378 -3
package/templates/open.html +48 -1

package/templates/dashboard-split.html CHANGED Viewed

@@ -1156,6 +1156,138 @@
     .tab.tab-uncloseable .close {
       display: none;
     }
+    /* Files Tab Styles (Spec 0055) */
+    .files-container {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+    .files-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+    }
+    .files-header-title {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .files-header-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .files-header-actions button {
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+    }
+    .files-header-actions button:hover {
+      background: var(--tab-hover);
+      color: var(--text-primary);
+    }
+    .files-tree {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+    .tree-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .tree-item:hover {
+      background: var(--bg-secondary);
+    }
+    .tree-item.selected {
+      background: var(--tab-active);
+    }
+    .tree-item-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+    .tree-item-icon.folder-toggle {
+      cursor: pointer;
+    }
+    .tree-item-icon.folder-toggle:hover {
+      color: var(--text-secondary);
+    }
+    .tree-item-name {
+      font-size: 13px;
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .tree-item:hover .tree-item-name {
+      color: var(--text-primary);
+    }
+    .tree-item[data-type="dir"] .tree-item-name {
+      color: var(--text-primary);
+    }
+    .tree-item[data-type="file"]:hover .tree-item-name {
+      color: var(--accent);
+    }
+    .tree-children {
+      overflow: hidden;
+    }
+    .tree-children.collapsed {
+      display: none;
+    }
+    .files-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+    .files-error {
+      padding: 16px;
+      margin: 8px;
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid var(--status-error);
+      border-radius: 6px;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
   </style>
 </head>
 <body>
@@ -1183,7 +1315,6 @@
         </button>
         <div class="overflow-menu hidden" id="overflow-menu" role="menu"></div>
         <div class="add-buttons">
-          <button class="add-btn" onclick="showFileDialog()" title="Open file">+ 📄</button>
           <button class="add-btn" onclick="spawnBuilder()" title="Spawn worktree builder">+ 🔨</button>
           <button class="add-btn" onclick="spawnShell()" title="New shell">+ >_</button>
         </div>
@@ -1374,6 +1505,12 @@
     let projectlistError = null;
     let projectlistDebounce = null;
+    // Files tab state (Spec 0055)
+    let filesTreeData = [];
+    let filesTreeExpanded = new Set();  // Set of expanded folder paths
+    let filesTreeError = null;
+    let filesTreeLoaded = false;
     // Build tabs from initial state
     function buildTabsFromState() {
       const previousTabIds = new Set(tabs.map(t => t.id));
@@ -1387,6 +1524,14 @@
         closeable: false
       });
+      // Files tab is second and uncloseable (Spec 0055)
+      tabs.push({
+        id: 'files',
+        type: 'files',
+        name: 'Files',
+        closeable: false
+      });
       // Add file tabs from annotations
       for (const annotation of state.annotations || []) {
         tabs.push({
@@ -1424,7 +1569,7 @@
       // Detect new tabs and auto-switch to them (skip projects tab)
       for (const tab of tabs) {
-        if (tab.id !== 'projects' && !knownTabIds.has(tab.id) && previousTabIds.size > 0) {
+        if (tab.id !== 'projects' && tab.id !== 'files' && !knownTabIds.has(tab.id) && previousTabIds.size > 0) {
           // This is a new tab - switch to it
           activeTabId = tab.id;
           break;
@@ -1519,6 +1664,7 @@
     function getTabIcon(type) {
       switch (type) {
         case 'projects': return '📋';
+        case 'files': return '📁';
         case 'file': return '📄';
         case 'builder': return '🔨';
         case 'shell': return '>_';
@@ -1626,6 +1772,16 @@
         return;
       }
+      // Handle files tab specially (no iframe, inline content)
+      if (tab.type === 'files') {
+        if (currentTabType !== 'files') {
+          currentTabType = 'files';
+          currentTabPort = null;
+          renderFilesTab();
+        }
+        return;
+      }
       // For other tabs, only update iframe if port changed (avoid flashing on poll)
       if (currentTabPort !== tab.port || currentTabType !== tab.type) {
         currentTabPort = tab.port;
@@ -2810,6 +2966,225 @@
       `;
     }
+    // ========================================
+    // Files Tab Functions (Spec 0055)
+    // ========================================
+    // Load the file tree from the API
+    async function loadFilesTree() {
+      try {
+        const response = await fetch('/api/files');
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        filesTreeData = await response.json();
+        filesTreeError = null;
+        filesTreeLoaded = true;
+      } catch (err) {
+        console.error('Failed to load files tree:', err);
+        filesTreeError = 'Could not load file tree: ' + err.message;
+        filesTreeData = [];
+      }
+    }
+    // Render the files tab (entry point)
+    // Only fetches on first load; use refreshFilesTree() to force reload
+    async function renderFilesTab() {
+      const content = document.getElementById('tab-content');
+      // If already loaded, just render cached data (no network request)
+      if (filesTreeLoaded) {
+        renderFilesTabContent();
+        return;
+      }
+      // First load - show loading state and fetch
+      content.innerHTML = '<div class="files-loading">Loading files...</div>';
+      await loadFilesTree();
+      renderFilesTabContent();
+    }
+    // Render the files tab content (internal - called after data is loaded)
+    function renderFilesTabContent() {
+      const content = document.getElementById('tab-content');
+      if (filesTreeError) {
+        content.innerHTML = `
+          <div class="files-container">
+            <div class="files-error">${escapeHtml(filesTreeError)}</div>
+          </div>
+        `;
+        return;
+      }
+      content.innerHTML = `
+        <div class="files-container">
+          <div class="files-header">
+            <span class="files-header-title">Explorer</span>
+            <div class="files-header-actions">
+              <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
+              <button onclick="expandAllFolders()" title="Expand All">⊞</button>
+              <button onclick="refreshFilesTree()" title="Refresh">↻</button>
+            </div>
+          </div>
+          <div class="files-tree" id="files-tree">
+            ${renderTreeNodes(filesTreeData, 0)}
+          </div>
+        </div>
+      `;
+    }
+    // Escape a string for use inside a JavaScript string literal in onclick handlers
+    // This handles quotes, backslashes, and other special characters
+    function escapeJsString(str) {
+      return str
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r');
+    }
+    // Render tree nodes recursively
+    function renderTreeNodes(nodes, depth) {
+      if (!nodes || nodes.length === 0) return '';
+      return nodes.map(node => {
+        const indent = depth * 16;
+        const isExpanded = filesTreeExpanded.has(node.path);
+        // Use escapeJsString for onclick handlers (handles quotes correctly)
+        // Use escapeHtml for data attributes and display text (handles XSS)
+        const jsPath = escapeJsString(node.path);
+        if (node.type === 'dir') {
+          const icon = isExpanded ? '▼' : '▶';
+          const childrenHtml = node.children && node.children.length > 0
+            ? `<div class="tree-children ${isExpanded ? '' : 'collapsed'}" data-path="${escapeHtml(node.path)}">${renderTreeNodes(node.children, depth + 1)}</div>`
+            : '';
+          return `
+            <div class="tree-item" data-type="dir" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="toggleFolder('${jsPath}')">
+              <span class="tree-item-icon folder-toggle">${icon}</span>
+              <span class="tree-item-name">${escapeHtml(node.name)}</span>
+            </div>
+            ${childrenHtml}
+          `;
+        } else {
+          return `
+            <div class="tree-item" data-type="file" data-path="${escapeHtml(node.path)}" style="padding-left: ${indent + 8}px;" onclick="openFileFromTree('${jsPath}')">
+              <span class="tree-item-icon">${getFileIcon(node.name)}</span>
+              <span class="tree-item-name">${escapeHtml(node.name)}</span>
+            </div>
+          `;
+        }
+      }).join('');
+    }
+    // Get file icon based on extension
+    function getFileIcon(filename) {
+      const ext = filename.split('.').pop().toLowerCase();
+      const iconMap = {
+        'js': '📜',
+        'ts': '📜',
+        'jsx': '⚛️',
+        'tsx': '⚛️',
+        'json': '{}',
+        'md': '📝',
+        'html': '🌐',
+        'css': '🎨',
+        'py': '🐍',
+        'sh': '⚙️',
+        'bash': '⚙️',
+        'yml': '⚙️',
+        'yaml': '⚙️',
+        'png': '🖼️',
+        'jpg': '🖼️',
+        'jpeg': '🖼️',
+        'gif': '🖼️',
+        'svg': '🖼️',
+      };
+      return iconMap[ext] || '📄';
+    }
+    // Toggle folder expanded/collapsed state
+    function toggleFolder(path) {
+      if (filesTreeExpanded.has(path)) {
+        filesTreeExpanded.delete(path);
+      } else {
+        filesTreeExpanded.add(path);
+      }
+      renderFilesTabContent();
+    }
+    // Collapse all folders
+    function collapseAllFolders() {
+      filesTreeExpanded.clear();
+      renderFilesTabContent();
+    }
+    // Expand all folders
+    function expandAllFolders() {
+      function collectPaths(nodes) {
+        for (const node of nodes) {
+          if (node.type === 'dir') {
+            filesTreeExpanded.add(node.path);
+            if (node.children) {
+              collectPaths(node.children);
+            }
+          }
+        }
+      }
+      collectPaths(filesTreeData);
+      renderFilesTabContent();
+    }
+    // Refresh files tree
+    async function refreshFilesTree() {
+      await loadFilesTree();
+      renderFilesTabContent();
+      showToast('Files refreshed', 'success');
+    }
+    // Open file from tree click
+    async function openFileFromTree(filePath) {
+      try {
+        // Check if file is already open
+        const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
+        if (existingTab) {
+          selectTab(existingTab.id);
+          return;
+        }
+        // Open the file via API
+        const response = await fetch('/api/tabs/file', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: filePath })
+        });
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+        // Refresh state and switch to the new tab
+        await refresh();
+        // Find and select the new file tab
+        const newTab = tabs.find(t => t.type === 'file' && t.path === filePath);
+        if (newTab) {
+          selectTab(newTab.id);
+        }
+        showToast(`Opened ${getFileName(filePath)}`, 'success');
+      } catch (err) {
+        showToast('Failed to open file: ' + err.message, 'error');
+      }
+    }
+    // ========================================
+    // Projects Tab Functions (Spec 0045)
+    // ========================================
     // Render the info header with helpful links
     function renderInfoHeader() {
       return `
@@ -2817,7 +3192,7 @@
           <h1 style="font-size: 20px; margin-bottom: 12px; color: var(--text-primary);">Codev: Project View</h1>
           <p>This shows the state of all projects. Our goal is to move each project through all the stages until it reaches INTGR'D (integrated). Hover over column headers to learn about each stage.</p>
           <p>To add projects, update status, or approve stages, use the <strong>Architect</strong> terminal on the left.</p>
-          <p>Docs: <a href="#" onclick="openProjectFile('codev/docs/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/docs/commands/overview.md'); return false;">CLI Reference</a> · <a href="#" onclick="openProjectFile('codev/protocols/spider/protocol.md'); return false;">SPIDER Protocol</a> · <a href="https://github.com/cluesmith/codev#readme" target="_blank">README</a></p>
+          <p>Docs: <a href="#" onclick="openProjectFile('codev/resources/cheatsheet.md'); return false;">Cheatsheet</a> · <a href="#" onclick="openProjectFile('codev/docs/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/docs/commands/overview.md'); return false;">CLI Reference</a> · <a href="#" onclick="openProjectFile('codev/protocols/spider/protocol.md'); return false;">SPIDER Protocol</a> · <a href="https://github.com/cluesmith/codev#readme" target="_blank">README</a></p>
         </div>
       `;
     }

package/templates/open.html CHANGED Viewed

@@ -348,7 +348,7 @@
     }
   </style>
 </head>
-<body data-builder="{{BUILDER_ID}}" data-file="{{FILE_PATH}}" data-lang="{{LANG}}" data-is-image="{{IS_IMAGE}}" data-file-size="{{FILE_SIZE}}">
+<body data-builder="{{BUILDER_ID}}" data-file="{{FILE_PATH}}" data-lang="{{LANG}}" data-is-image="{{IS_IMAGE}}" data-is-video="{{IS_VIDEO}}" data-file-size="{{FILE_SIZE}}">
   <div class="header">
     <h1 class="path">{{FILE_PATH}}</h1>
     <div class="subtitle" id="subtitle">Click on a line number to leave an annotation.</div>
@@ -388,6 +388,16 @@
     </div>
   </div>
+  <!-- Video viewer mode -->
+  <div id="video-viewer" style="display: none; padding: 15px; height: calc(100vh - 80px);">
+    <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #222; border-radius: 4px;">
+      <video id="video-display" controls style="max-width: 100%; max-height: 100%;">
+        Your browser does not support the video tag.
+      </video>
+      <div id="video-error" style="display: none; color: #ef4444; text-align: center; padding: 40px;"></div>
+    </div>
+  </div>
   <!-- Editor mode -->
   <textarea id="editor" spellcheck="false"></textarea>
@@ -448,6 +458,9 @@
     let imageNaturalWidth = 0;
     let imageNaturalHeight = 0;
+    // Video viewer state
+    const isVideoFile = {{IS_VIDEO}};
     // Comment patterns by file extension
     const COMMENT_PATTERNS = {
       js: { prefix: '// REVIEW', regex: /^(\s*)\/\/\s*REVIEW(\(@\w+\))?:\s*(.*)$/ },
@@ -525,6 +538,40 @@
       img.src = '/api/image?t=' + Date.now();
     }
+    // Initialize video viewer
+    function initVideo(fileSize) {
+      // Hide code view elements
+      document.getElementById('viewMode').style.display = 'none';
+      document.getElementById('editBtn').style.display = 'none';
+      document.getElementById('togglePreviewBtn').style.display = 'none';
+      // Update subtitle
+      const sizeStr = formatFileSize(fileSize);
+      document.querySelector('.subtitle').textContent = 'Video player · ' + sizeStr;
+      // Show video viewer
+      const videoViewer = document.getElementById('video-viewer');
+      videoViewer.style.display = 'block';
+      // Load video
+      const video = document.getElementById('video-display');
+      const videoError = document.getElementById('video-error');
+      video.onloadedmetadata = function() {
+        videoError.style.display = 'none';
+        video.style.display = 'block';
+      };
+      video.onerror = function() {
+        videoError.textContent = 'Failed to load video. The file may be corrupted or in an unsupported format.';
+        videoError.style.display = 'block';
+        video.style.display = 'none';
+      };
+      // Add cache-busting query param to allow reload
+      video.src = '/api/video?t=' + Date.now();
+    }
     // Update image info display (in both header and controls)
     function updateImageInfo(fileSize) {
       const sizeStr = formatFileSize(fileSize);