@cluesmith/codev 1.2.3 → 1.4.0

package/templates/open.html

@@ -199,6 +199,78 @@
       outline: none;
     }
 
+    /* Search bar */
+    .search-bar {
+      display: none;
+      position: fixed;
+      top: 10px;
+      right: 20px;
+      background: #2a2a2a;
+      border: 1px solid #444;
+      border-radius: 6px;
+      padding: 8px 12px;
+      z-index: 250;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+    .search-bar.active {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .search-bar input {
+      background: #1a1a1a;
+      border: 1px solid #444;
+      border-radius: 4px;
+      color: #fff;
+      padding: 6px 10px;
+      font-size: 14px;
+      width: 250px;
+      outline: none;
+    }
+    .search-bar input:focus {
+      border-color: #3b82f6;
+    }
+    .search-bar .search-nav {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .search-bar .search-nav button {
+      background: #444;
+      border: none;
+      color: #fff;
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .search-bar .search-nav button:hover {
+      background: #555;
+    }
+    .search-bar .search-count {
+      color: #888;
+      font-size: 12px;
+      min-width: 60px;
+    }
+    .search-bar .search-close {
+      background: none;
+      border: none;
+      color: #888;
+      cursor: pointer;
+      font-size: 18px;
+      padding: 0 4px;
+    }
+    .search-bar .search-close:hover {
+      color: #fff;
+    }
+    .search-highlight {
+      background: rgba(250, 204, 21, 0.4);
+      border-radius: 2px;
+    }
+    .search-highlight.current {
+      background: rgba(59, 130, 246, 0.6);
+    }
+
     /* Notification toast */
     .notification {
       position: fixed;
@@ -401,6 +473,17 @@
   <!-- Editor mode -->
   <textarea id="editor" spellcheck="false"></textarea>
 
+  <!-- Search Bar -->
+  <div class="search-bar" id="searchBar">
+    <input type="text" id="searchInput" placeholder="Search..." autocomplete="off" />
+    <div class="search-nav">
+      <span class="search-count" id="searchCount"></span>
+      <button onclick="searchPrev()" title="Previous (Shift+Enter)">↑</button>
+      <button onclick="searchNext()" title="Next (Enter)">↓</button>
+    </div>
+    <button class="search-close" onclick="closeSearch()" title="Close (Esc)">×</button>
+  </div>
+
   <!-- Comment Dialog -->
   <div class="overlay" id="overlay">
     <div class="dialog">
@@ -1377,6 +1460,201 @@
       }
     });
 
+    // ==================== Search Functions ====================
+
+    let searchMatches = [];
+    let currentMatchIndex = -1;
+    let searchActive = false;
+
+    function openSearch() {
+      const searchBar = document.getElementById('searchBar');
+      const searchInput = document.getElementById('searchInput');
+      searchBar.classList.add('active');
+      searchInput.focus();
+      searchInput.select();
+      searchActive = true;
+    }
+
+    function closeSearch() {
+      const searchBar = document.getElementById('searchBar');
+      searchBar.classList.remove('active');
+      clearSearchHighlights();
+      searchMatches = [];
+      currentMatchIndex = -1;
+      searchActive = false;
+      document.getElementById('searchCount').textContent = '';
+    }
+
+    function clearSearchHighlights() {
+      document.querySelectorAll('.search-highlight').forEach(el => {
+        const parent = el.parentNode;
+        parent.replaceChild(document.createTextNode(el.textContent), el);
+        parent.normalize();
+      });
+    }
+
+    function performSearch(query) {
+      clearSearchHighlights();
+      searchMatches = [];
+      currentMatchIndex = -1;
+
+      if (!query) {
+        document.getElementById('searchCount').textContent = '';
+        return;
+      }
+
+      const viewMode = document.getElementById('viewMode');
+      const codeLines = viewMode.querySelectorAll('.code-line');
+      const queryLower = query.toLowerCase();
+
+      codeLines.forEach((codeLine, lineIndex) => {
+        const walker = document.createTreeWalker(codeLine, NodeFilter.SHOW_TEXT, null, false);
+        const textNodes = [];
+        while (walker.nextNode()) {
+          textNodes.push(walker.currentNode);
+        }
+
+        textNodes.forEach(textNode => {
+          const text = textNode.textContent;
+          const textLower = text.toLowerCase();
+          let startIndex = 0;
+          let index;
+
+          while ((index = textLower.indexOf(queryLower, startIndex)) !== -1) {
+            searchMatches.push({
+              node: textNode,
+              index: index,
+              length: query.length,
+              lineIndex: lineIndex
+            });
+            startIndex = index + 1;
+          }
+        });
+      });
+
+      // Highlight matches (in reverse to preserve indices)
+      const processedNodes = new Set();
+      searchMatches.slice().reverse().forEach((match, reverseIdx) => {
+        const idx = searchMatches.length - 1 - reverseIdx;
+        if (processedNodes.has(match.node)) return;
+
+        const text = match.node.textContent;
+        const parent = match.node.parentNode;
+
+        // Find all matches in this node
+        const nodeMatches = searchMatches.filter(m => m.node === match.node);
+        processedNodes.add(match.node);
+
+        // Build new content with highlights
+        let lastEnd = 0;
+        const fragment = document.createDocumentFragment();
+
+        nodeMatches.forEach((m, i) => {
+          // Text before match
+          if (m.index > lastEnd) {
+            fragment.appendChild(document.createTextNode(text.substring(lastEnd, m.index)));
+          }
+          // Highlighted match
+          const span = document.createElement('span');
+          span.className = 'search-highlight';
+          span.textContent = text.substring(m.index, m.index + m.length);
+          span.dataset.matchIndex = searchMatches.indexOf(m);
+          fragment.appendChild(span);
+          lastEnd = m.index + m.length;
+        });
+
+        // Text after last match
+        if (lastEnd < text.length) {
+          fragment.appendChild(document.createTextNode(text.substring(lastEnd)));
+        }
+
+        parent.replaceChild(fragment, match.node);
+      });
+
+      updateSearchCount();
+
+      // Jump to first match
+      if (searchMatches.length > 0) {
+        currentMatchIndex = 0;
+        highlightCurrentMatch();
+      }
+    }
+
+    function updateSearchCount() {
+      const countEl = document.getElementById('searchCount');
+      if (searchMatches.length === 0) {
+        countEl.textContent = 'No results';
+      } else {
+        countEl.textContent = `${currentMatchIndex + 1} of ${searchMatches.length}`;
+      }
+    }
+
+    function highlightCurrentMatch() {
+      // Remove current class from all
+      document.querySelectorAll('.search-highlight.current').forEach(el => {
+        el.classList.remove('current');
+      });
+
+      // Add current class to current match
+      const currentHighlight = document.querySelector(`.search-highlight[data-match-index="${currentMatchIndex}"]`);
+      if (currentHighlight) {
+        currentHighlight.classList.add('current');
+        currentHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+
+      updateSearchCount();
+    }
+
+    function searchNext() {
+      if (searchMatches.length === 0) return;
+      currentMatchIndex = (currentMatchIndex + 1) % searchMatches.length;
+      highlightCurrentMatch();
+    }
+
+    function searchPrev() {
+      if (searchMatches.length === 0) return;
+      currentMatchIndex = (currentMatchIndex - 1 + searchMatches.length) % searchMatches.length;
+      highlightCurrentMatch();
+    }
+
+    // Search input handlers
+    document.getElementById('searchInput').addEventListener('input', (e) => {
+      performSearch(e.target.value);
+    });
+
+    document.getElementById('searchInput').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          searchPrev();
+        } else {
+          searchNext();
+        }
+      } else if (e.key === 'Escape') {
+        closeSearch();
+      }
+    });
+
+    // Cmd/Ctrl+F to open search, Cmd/Ctrl+G for next match
+    document.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault();
+        openSearch();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
+        e.preventDefault();
+        if (searchActive) {
+          if (e.shiftKey) {
+            searchPrev();
+          } else {
+            searchNext();
+          }
+        } else {
+          openSearch();
+        }
+      }
+    });
+
     // FILE_CONTENT will be injected by the server
   </script>
 </body>

package/templates/tower.html

@@ -152,28 +152,42 @@
       font-size: 15px;
     }
 
-    /* Instance cards - 4 column grid */
+    /* Instance cards - dynamic grid based on count */
     .instances {
       display: grid;
-      grid-template-columns: repeat(4, 1fr);
       gap: 16px;
       margin-bottom: 32px;
     }
 
-    @media (max-width: 1600px) {
-      .instances {
-        grid-template-columns: repeat(3, 1fr);
-      }
+    .instances-1 {
+      grid-template-columns: 1fr;
+    }
+
+    .instances-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .instances-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .instances-many {
+      grid-template-columns: repeat(3, 1fr);
     }
 
     @media (max-width: 1200px) {
-      .instances {
+      .instances-2,
+      .instances-3,
+      .instances-many {
         grid-template-columns: repeat(2, 1fr);
       }
     }
 
     @media (max-width: 800px) {
-      .instances {
+      .instances-1,
+      .instances-2,
+      .instances-3,
+      .instances-many {
         grid-template-columns: 1fr;
       }
     }
@@ -204,10 +218,28 @@
     }
 
     .instance-path-row {
-      padding: 0 20px 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 20px;
       border-bottom: 1px solid var(--border);
     }
 
+    .copy-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px;
+      font-size: 12px;
+      opacity: 0.6;
+      transition: opacity 0.15s;
+    }
+
+    .copy-btn:hover {
+      opacity: 1;
+    }
+
     .instance-name {
       font-size: 20px;
       font-weight: 600;
@@ -254,9 +286,14 @@
     }
 
     .instance-path {
-      font-size: 14px;
+      font-size: 12px;
       color: var(--text-muted);
       font-family: monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
     }
 
     .instance-body {
@@ -282,11 +319,14 @@
       display: flex;
       align-items: center;
       gap: 12px;
+      min-width: 0;
+      flex: 1;
     }
 
     .port-type {
       font-size: 15px;
       color: var(--text-secondary);
+      flex-shrink: 0;
       min-width: 100px;
     }
 
@@ -294,6 +334,9 @@
       font-size: 15px;
       font-family: monospace;
       color: var(--text-muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .port-status {
@@ -313,6 +356,7 @@
     .port-actions {
       display: flex;
       gap: 8px;
+      flex-shrink: 0;
     }
 
     .port-actions a {
@@ -643,9 +687,13 @@
           </div>
         `;
       } else {
+        const countClass = runningInstances.length === 1 ? 'instances-1'
+          : runningInstances.length === 2 ? 'instances-2'
+          : runningInstances.length === 3 ? 'instances-3'
+          : 'instances-many';
         content.innerHTML = `
           <h2 class="section-header">Running Instances</h2>
-          <div class="instances">
+          <div class="instances ${countClass}">
             ${runningInstances.map(renderInstance).join('')}
           </div>
         `;
@@ -677,7 +725,7 @@
           <div class="port-info">
             <span class="port-status ${port.active ? 'active' : 'inactive'}"></span>
             <span class="port-type">${escapeHtml(port.type)}</span>
-            <span class="port-url">${escapeHtml(port.url)}</span>
+            <span class="port-url">Port ${port.port}</span>
           </div>
           <div class="port-actions">
             <a href="${escapeHtml(port.url)}" target="_blank" class="${port.active ? '' : 'disabled'}">
@@ -714,6 +762,7 @@
             <span class="instance-path" title="${escapeHtml(instance.projectPath)}">
               ${escapeHtml(instance.projectPath)}
             </span>
+            <button class="copy-btn" onclick="copyPath('${escapeHtml(instance.projectPath)}')" title="Copy path">📋</button>
           </div>
           <div class="instance-body">
             <div class="ports-list">
@@ -1001,6 +1050,16 @@
       return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     }
 
+    // Copy path to clipboard
+    async function copyPath(path) {
+      try {
+        await navigator.clipboard.writeText(path);
+        showToast('Path copied', 'success');
+      } catch (err) {
+        showToast('Failed to copy', 'error');
+      }
+    }
+
     // HTML escape
     function escapeHtml(str) {
       if (!str) return '';

package/dist/agent-farm/index.d.ts

@@ -1,7 +0,0 @@
-#!/usr/bin/env node
-/**
- * Agent Farm CLI
- * A multi-agent orchestration tool for software development
- */
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/agent-farm/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/agent-farm/index.ts"],"names":[],"mappings":";AAEA;;;GAGG"}