@cluesmith/codev 1.4.0 → 1.4.2

package/templates/dashboard-split.html

@@ -651,6 +651,156 @@
       color: #ef4444;
     }
 
+    /* Activity Summary Modal (Spec 0059) */
+    .activity-dialog {
+      width: 600px;
+      max-width: 90vw;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .activity-dialog-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .activity-dialog-header h3 {
+      margin: 0;
+    }
+
+    .activity-close-btn {
+      background: none;
+      border: none;
+      font-size: 24px;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 0 8px;
+      line-height: 1;
+    }
+
+    .activity-close-btn:hover {
+      color: var(--text-primary);
+    }
+
+    .activity-dialog-content {
+      flex: 1;
+      overflow-y: auto;
+      max-height: 50vh;
+      margin-bottom: 16px;
+    }
+
+    .activity-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 40px 20px;
+      color: var(--text-muted);
+    }
+
+    .activity-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .activity-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--text-muted);
+    }
+
+    .activity-error {
+      text-align: center;
+      padding: 40px 20px;
+      color: #ef4444;
+    }
+
+    .activity-summary {
+      line-height: 1.6;
+    }
+
+    .activity-ai-summary {
+      background: var(--bg-tertiary);
+      border-left: 3px solid var(--accent);
+      padding: 12px 16px;
+      margin-bottom: 20px;
+      font-style: italic;
+      color: var(--text-secondary);
+    }
+
+    .activity-section {
+      margin-bottom: 16px;
+    }
+
+    .activity-section h4 {
+      font-size: 13px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin: 0 0 8px 0;
+      letter-spacing: 0.5px;
+    }
+
+    .activity-section ul {
+      margin: 0;
+      padding-left: 20px;
+      color: var(--text-secondary);
+    }
+
+    .activity-section li {
+      margin-bottom: 4px;
+    }
+
+    .activity-section p {
+      margin: 4px 0;
+      color: var(--text-secondary);
+    }
+
+    .activity-time-value {
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+
+    .activity-dialog-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border);
+    }
+
+    /* Activity Tab Styles (Spec 0059) */
+    .activity-tab-container {
+      padding: 24px;
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .activity-tab-container .activity-summary {
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      padding: 20px;
+    }
+
+    .activity-tab-container .activity-actions {
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+    }
+
     /* Projects Tab Styles (Spec 0045) */
     .projects-container {
       flex: 1;
@@ -1157,56 +1307,7 @@
       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 Styles (used by dashboard file browser) */
     .tree-item {
       display: flex;
       align-items: center;
@@ -1270,25 +1371,6 @@
       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;
-    }
-
     /* Dashboard Tab Styles (Spec 0057) */
     .dashboard-container {
       flex: 1;
@@ -1298,8 +1380,7 @@
     }
 
     .dashboard-header {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
+      display: flex;
       gap: 16px;
       padding: 16px;
       flex-shrink: 0;
@@ -1307,10 +1388,118 @@
 
     @media (max-width: 900px) {
       .dashboard-header {
-        grid-template-columns: 1fr;
+        flex-direction: column;
       }
     }
 
+    /* Collapsible section styles */
+    .dashboard-section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .dashboard-section.section-tabs,
+    .dashboard-section.section-files {
+      flex: 1;
+      max-height: 280px;
+    }
+
+    .dashboard-section.section-projects {
+      flex: 0 0 auto;
+      margin: 0 16px 16px 16px;
+      max-height: 50%;
+      overflow-y: auto;
+    }
+
+    .dashboard-section.section-projects .dashboard-section-content {
+      flex: 0 0 auto;
+    }
+
+    /* Tabs/Files expand to fill remaining space above Projects */
+    .dashboard-header {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .dashboard-section.section-tabs,
+    .dashboard-section.section-files {
+      max-height: none;
+    }
+
+    .dashboard-section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      cursor: pointer;
+      user-select: none;
+      flex-shrink: 0;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .dashboard-section-header:hover {
+      background: var(--bg-tertiary);
+    }
+
+    .dashboard-section-header h3 {
+      font-size: 12px;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      letter-spacing: 0.5px;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .dashboard-section-header .collapse-icon {
+      font-size: 10px;
+      transition: transform 0.2s;
+    }
+
+    .dashboard-section.collapsed .collapse-icon {
+      transform: rotate(-90deg);
+    }
+
+    .dashboard-section.collapsed .dashboard-section-header {
+      border-bottom: none;
+    }
+
+    .dashboard-section-header .header-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .dashboard-section-header .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;
+    }
+
+    .dashboard-section-header .header-actions button:hover {
+      background: var(--tab-hover);
+      color: var(--text-primary);
+    }
+
+    .dashboard-section-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+    }
+
+    .dashboard-section.collapsed .dashboard-section-content {
+      display: none;
+    }
+
+    /* Legacy support */
     .dashboard-column {
       background: var(--bg-secondary);
       border: 1px solid var(--border);
@@ -1437,17 +1626,183 @@
       font-size: 12px;
     }
 
-    .dashboard-empty-state {
+    /* File search styles (Spec 0058) */
+    .files-search-container {
+      display: flex;
+      align-items: center;
+      padding: 6px 8px;
+      gap: 6px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .files-search-input {
+      flex: 1;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 6px 10px;
+      font-size: 12px;
+      color: var(--text-primary);
+      outline: none;
+    }
+
+    .files-search-input:focus {
+      border-color: var(--accent);
+    }
+
+    .files-search-input::placeholder {
+      color: var(--text-muted);
+    }
+
+    .files-search-clear {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 14px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      line-height: 1;
+    }
+
+    .files-search-clear:hover {
+      color: var(--text-primary);
+      background: var(--bg-tertiary);
+    }
+
+    .files-search-clear.hidden {
+      display: none;
+    }
+
+    .files-search-results {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .files-search-result {
+      padding: 6px 12px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .files-search-result:hover,
+    .files-search-result.selected {
+      background: var(--bg-tertiary);
+    }
+
+    .files-search-result-name {
+      font-size: 12px;
+      color: var(--text-primary);
+    }
+
+    .files-search-result-path {
+      font-size: 11px;
+      color: var(--text-muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .files-search-highlight {
+      color: var(--accent);
+      font-weight: 500;
+    }
+
+    /* Cmd+P Palette styles (Spec 0058) */
+    .file-palette {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      justify-content: center;
+      padding-top: 80px;
+    }
+
+    .file-palette.hidden {
+      display: none;
+    }
+
+    .file-palette-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .file-palette-container {
+      position: relative;
+      width: 500px;
+      max-width: 90vw;
+      max-height: 450px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .file-palette-input {
+      width: 100%;
+      padding: 14px 16px;
+      background: var(--bg-tertiary);
+      border: none;
+      border-bottom: 1px solid var(--border);
+      font-size: 14px;
+      color: var(--text-primary);
+      outline: none;
+    }
+
+    .file-palette-input::placeholder {
       color: var(--text-muted);
-      font-size: 13px;
-      padding: 12px;
-      text-align: center;
     }
 
-    .dashboard-projects {
+    .file-palette-results {
       flex: 1;
       overflow-y: auto;
-      padding: 0 16px 16px 16px;
+      max-height: 380px;
+    }
+
+    .file-palette-result {
+      padding: 10px 16px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .file-palette-result:hover,
+    .file-palette-result.selected {
+      background: var(--bg-tertiary);
+    }
+
+    .file-palette-result-name {
+      font-size: 13px;
+      color: var(--text-primary);
+    }
+
+    .file-palette-result-path {
+      font-size: 12px;
+      color: var(--text-muted);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .file-palette-empty {
+      padding: 16px;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+
+    .dashboard-empty-state {
+      color: var(--text-muted);
+      font-size: 13px;
+      padding: 12px;
+      text-align: center;
     }
 
     /* Status indicators in dashboard tab list */
@@ -1485,6 +1840,11 @@
 <body>
   <header class="header">
     <h1>Agent Farm - {{PROJECT_NAME}}</h1>
+    <div class="header-actions">
+      <button class="btn activity-summary-btn" onclick="showActivitySummary()" title="What did I do today?">
+        🕐 Today
+      </button>
+    </div>
   </header>
 
   <main class="main">
@@ -1506,10 +1866,6 @@
           <span class="overflow-count" id="overflow-count">+0</span>
         </button>
         <div class="overflow-menu hidden" id="overflow-menu" role="menu"></div>
-        <div class="add-buttons">
-          <button class="add-btn" onclick="spawnBuilder()" title="Spawn worktree builder">+ 🔨</button>
-          <button class="add-btn" onclick="spawnShell()" title="New shell">+ >_</button>
-        </div>
       </div>
       <div class="tab-content" id="tab-content"></div>
     </div>
@@ -1563,6 +1919,7 @@
   <!-- Context menu -->
   <div class="context-menu hidden" id="context-menu" role="menu">
     <div class="context-menu-item" role="menuitem" tabindex="0" data-action="openContextTab" onclick="openContextTab()" onkeydown="handleContextMenuKeydown(event)">Open in New Tab</div>
+    <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="reloadContextTab" id="context-reload" onclick="reloadContextTab()" onkeydown="handleContextMenuKeydown(event)">Reload</div>
     <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeActiveTab" onclick="closeActiveTab()" onkeydown="handleContextMenuKeydown(event)">Close</div>
     <div class="context-menu-item" role="menuitem" tabindex="-1" data-action="closeOtherTabs" onclick="closeOtherTabs()" onkeydown="handleContextMenuKeydown(event)">Close Others</div>
     <div class="context-menu-item danger" role="menuitem" tabindex="-1" data-action="closeAllTabs" onclick="closeAllTabs()" onkeydown="handleContextMenuKeydown(event)">Close All</div>
@@ -1571,6 +1928,40 @@
   <!-- Toast container -->
   <div class="toast-container" id="toast-container"></div>
 
+  <!-- Activity Summary Modal (Spec 0059) -->
+  <div class="dialog-overlay hidden" id="activity-modal">
+    <div class="dialog activity-dialog">
+      <div class="activity-dialog-header">
+        <h3>Today's Summary</h3>
+        <button class="activity-close-btn" onclick="closeActivityModal()" title="Close (Esc)">×</button>
+      </div>
+      <div class="activity-dialog-content" id="activity-content">
+        <div class="activity-loading">
+          <span class="activity-spinner"></span>
+          Loading activity...
+        </div>
+      </div>
+      <div class="activity-dialog-footer">
+        <button class="btn" onclick="copyActivitySummary()">📋 Copy to Clipboard</button>
+        <button class="btn" onclick="closeActivityModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- File search palette (Cmd+P) - Spec 0058 -->
+  <div id="file-palette" class="file-palette hidden">
+    <div class="file-palette-backdrop" onclick="closePalette()"></div>
+    <div class="file-palette-container">
+      <input type="text"
+             id="palette-input"
+             class="file-palette-input"
+             placeholder="Search files by name..."
+             oninput="onPaletteInput(this.value)"
+             onkeydown="onPaletteKeydown(event)" />
+      <div id="palette-results" class="file-palette-results"></div>
+    </div>
+  </div>
+
   <script>
     // STATE_INJECTION_POINT
 
@@ -1588,6 +1979,30 @@
     let pendingCloseTabId = null;
     let contextMenuTabId = null;
 
+    // Collapsible section state (persisted to localStorage)
+    const SECTION_STATE_KEY = 'codev-dashboard-sections';
+    let sectionState = loadSectionState();
+
+    function loadSectionState() {
+      try {
+        const saved = localStorage.getItem(SECTION_STATE_KEY);
+        if (saved) return JSON.parse(saved);
+      } catch (e) { /* ignore */ }
+      return { tabs: true, files: true, projects: true };
+    }
+
+    function saveSectionState() {
+      try {
+        localStorage.setItem(SECTION_STATE_KEY, JSON.stringify(sectionState));
+      } catch (e) { /* ignore */ }
+    }
+
+    function toggleSection(section) {
+      sectionState[section] = !sectionState[section];
+      saveSectionState();
+      renderDashboardTabContent();
+    }
+
     // Initialize
     function init() {
       buildTabsFromState();
@@ -1652,8 +2067,9 @@
         // Check if file is already open
         const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
         if (existingTab) {
-          // Just switch to the existing tab
+          // Switch to the existing tab and refresh content
           selectTab(existingTab.id);
+          refreshFileTab(existingTab.id); // Refresh content in case file changed
           showToast(`Switched to ${getFileName(filePath)}`, 'success');
           // TODO: scroll to line if lineNumber provided
           return;
@@ -1703,9 +2119,25 @@
     let filesTreeError = null;
     let filesTreeLoaded = false;
 
+    // File search state (Spec 0058)
+    let filesTreeFlat = [];  // Flattened array of {name, path} objects for searching
+    let filesSearchQuery = '';
+    let filesSearchResults = [];
+    let filesSearchIndex = 0;
+    let filesSearchDebounceTimer = null;
+
+    // Cmd+P palette state (Spec 0058)
+    let paletteOpen = false;
+    let paletteQuery = '';
+    let paletteResults = [];
+    let paletteIndex = 0;
+    let paletteDebounceTimer = null;
+
     // Build tabs from initial state
     function buildTabsFromState() {
       const previousTabIds = new Set(tabs.map(t => t.id));
+      // Preserve client-side-only tabs (like activity)
+      const clientSideTabs = tabs.filter(t => t.type === 'activity');
       tabs = [];
 
       // Dashboard tab is ALWAYS first and uncloseable (Spec 0045, 0057)
@@ -1716,14 +2148,6 @@
         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({
@@ -1759,6 +2183,11 @@
         });
       }
 
+      // Re-add preserved client-side tabs
+      for (const tab of clientSideTabs) {
+        tabs.push(tab);
+      }
+
       // Detect new tabs and auto-switch to them (skip projects tab)
       for (const tab of tabs) {
         if (tab.id !== 'dashboard' && tab.id !== 'files' && !knownTabIds.has(tab.id) && previousTabIds.size > 0) {
@@ -1777,10 +2206,13 @@
       }
     }
 
-    // Get filename from path
+    // Get filename from path (includes parent dir for context)
     function getFileName(path) {
-      const parts = path.split('/');
-      return parts[parts.length - 1];
+      const parts = path.split('/').filter(p => p);
+      if (parts.length >= 2) {
+        return parts.slice(-2).join('/');
+      }
+      return parts[parts.length - 1] || path;
     }
 
     // Track current architect port to avoid re-rendering iframe unnecessarily
@@ -1855,7 +2287,7 @@
     // Get tab icon
     function getTabIcon(type) {
       switch (type) {
-        case 'dashboard': return '📋';
+        case 'dashboard': return '🏠';
         case 'files': return '📁';
         case 'file': return '📄';
         case 'builder': return '🔨';
@@ -1964,12 +2396,12 @@
         return;
       }
 
-      // Handle files tab specially (no iframe, inline content)
-      if (tab.type === 'files') {
-        if (currentTabType !== 'files') {
-          currentTabType = 'files';
+      // Handle activity tab specially (no iframe, inline content)
+      if (tab.type === 'activity') {
+        if (currentTabType !== 'activity') {
+          currentTabType = 'activity';
           currentTabPort = null;
-          renderFilesTab();
+          renderActivityTab();
         }
         return;
       }
@@ -1982,6 +2414,22 @@
       }
     }
 
+    // Force refresh the iframe for a file tab (reloads content from server)
+    function refreshFileTab(tabId) {
+      const tab = tabs.find(t => t.id === tabId);
+      if (!tab || tab.type !== 'file' || !tab.port) return;
+
+      // If this tab is currently active, force iframe reload
+      if (activeTabId === tabId) {
+        const content = document.getElementById('tab-content');
+        const iframe = content.querySelector('iframe');
+        if (iframe) {
+          // Add cache-busting query param to force reload
+          iframe.src = `http://localhost:${tab.port}?t=${Date.now()}`;
+        }
+      }
+    }
+
     // Update status bar
     function updateStatusBar() {
       // Architect status
@@ -2260,6 +2708,13 @@
       menu.style.top = event.clientY + 'px';
       menu.classList.remove('hidden');
 
+      // Show/hide reload option based on tab type
+      const tab = tabs.find(t => t.id === tabId);
+      const reloadItem = document.getElementById('context-reload');
+      if (reloadItem) {
+        reloadItem.style.display = (tab && tab.type === 'file') ? 'block' : 'none';
+      }
+
       // Focus first item for keyboard navigation
       const firstItem = menu.querySelector('.context-menu-item');
       if (firstItem) firstItem.focus();
@@ -2270,6 +2725,15 @@
       }, 0);
     }
 
+    // Reload file tab content
+    function reloadContextTab() {
+      if (contextMenuTabId) {
+        refreshFileTab(contextMenuTabId);
+        showToast('Reloaded', 'success');
+      }
+      hideContextMenu();
+    }
+
     function hideContextMenu() {
       document.getElementById('context-menu').classList.add('hidden');
       contextMenuTabId = null;
@@ -2534,6 +2998,11 @@
         hideCloseDialog();
         hideContextMenu();
         hideOverflowMenu();
+        // Activity modal (Spec 0059)
+        const activityModal = document.getElementById('activity-modal');
+        if (activityModal && !activityModal.classList.contains('hidden')) {
+          closeActivityModal();
+        }
       }
 
       // Enter in dialogs
@@ -3172,58 +3641,61 @@
         filesTreeData = await response.json();
         filesTreeError = null;
         filesTreeLoaded = true;
+        // Flatten tree for search (Spec 0058)
+        filesTreeFlat = flattenFilesTree(filesTreeData);
       } catch (err) {
         console.error('Failed to load files tree:', err);
         filesTreeError = 'Could not load file tree: ' + err.message;
         filesTreeData = [];
+        filesTreeFlat = [];
       }
     }
 
-    // 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;
+    // Flatten the file tree into a searchable array (Spec 0058)
+    function flattenFilesTree(nodes, result = []) {
+      for (const node of nodes) {
+        if (node.type === 'file') {
+          result.push({ name: node.name, path: node.path });
+        } else if (node.children) {
+          flattenFilesTree(node.children, result);
+        }
       }
-
-      // First load - show loading state and fetch
-      content.innerHTML = '<div class="files-loading">Loading files...</div>';
-      await loadFilesTree();
-      renderFilesTabContent();
+      return result;
     }
 
-    // Render the files tab content (internal - called after data is loaded)
-    function renderFilesTabContent() {
-      const content = document.getElementById('tab-content');
+    // Search files with relevance sorting (Spec 0058)
+    function searchFiles(query) {
+      if (!query) return [];
+      const q = query.toLowerCase();
 
-      if (filesTreeError) {
-        content.innerHTML = `
-          <div class="files-container">
-            <div class="files-error">${escapeHtml(filesTreeError)}</div>
-          </div>
-        `;
-        return;
-      }
+      const matches = filesTreeFlat.filter(f =>
+        f.path.toLowerCase().includes(q)
+      );
 
-      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>
-      `;
+      // Sort by relevance: exact filename > filename prefix > filename contains > path
+      matches.sort((a, b) => {
+        const aName = a.name.toLowerCase();
+        const bName = b.name.toLowerCase();
+        const aPath = a.path.toLowerCase();
+        const bPath = b.path.toLowerCase();
+
+        // Exact filename match first
+        if (aName === q && bName !== q) return -1;
+        if (bName === q && aName !== q) return 1;
+
+        // Filename starts with query
+        if (aName.startsWith(q) && !bName.startsWith(q)) return -1;
+        if (bName.startsWith(q) && !aName.startsWith(q)) return 1;
+
+        // Filename contains query
+        if (aName.includes(q) && !bName.includes(q)) return -1;
+        if (bName.includes(q) && !aName.includes(q)) return 1;
+
+        // Alphabetical by path
+        return aPath.localeCompare(bPath);
+      });
+
+      return matches.slice(0, 15);
     }
 
     // Escape a string for use inside a JavaScript string literal in onclick handlers
@@ -3311,16 +3783,273 @@
     // Re-render file browser in current context (dashboard or files tab)
     function rerenderFilesBrowser() {
       if (activeTabId === 'dashboard') {
-        // Re-render just the files column in dashboard
-        const filesListEl = document.getElementById('dashboard-files-list');
-        if (filesListEl) {
-          filesListEl.innerHTML = renderDashboardFilesBrowser();
+        // Re-render just the files content in dashboard
+        const filesContentEl = document.getElementById('dashboard-files-content');
+        if (filesContentEl) {
+          filesContentEl.innerHTML = filesSearchQuery
+            ? renderFilesSearchResults()
+            : renderDashboardFilesBrowserWithWrapper();
+        }
+      }
+    }
+
+    // Wrapper for file browser that includes the list element ID (Spec 0058)
+    function renderDashboardFilesBrowserWithWrapper() {
+      return `<div class="dashboard-files-list" id="dashboard-files-list">${renderDashboardFilesBrowser()}</div>`;
+    }
+
+    // ========================================
+    // File Search Functions (Spec 0058)
+    // ========================================
+
+    // Debounced search input handler for Files column
+    function onFilesSearchInput(value) {
+      clearTimeout(filesSearchDebounceTimer);
+      filesSearchDebounceTimer = setTimeout(() => {
+        filesSearchQuery = value;
+        filesSearchResults = searchFiles(value);
+        filesSearchIndex = 0;
+        rerenderFilesSearch();
+      }, 100);
+    }
+
+    // Clear files search and restore tree view
+    function clearFilesSearch() {
+      filesSearchQuery = '';
+      filesSearchResults = [];
+      filesSearchIndex = 0;
+      const input = document.getElementById('files-search-input');
+      if (input) {
+        input.value = '';
+      }
+      rerenderFilesSearch();
+    }
+
+    // Re-render the files search area (results or tree)
+    function rerenderFilesSearch() {
+      const filesContentEl = document.getElementById('dashboard-files-content');
+      if (filesContentEl) {
+        filesContentEl.innerHTML = filesSearchQuery
+          ? renderFilesSearchResults()
+          : renderDashboardFilesBrowserWithWrapper();
+      }
+      // Update clear button visibility
+      const clearBtn = document.querySelector('.files-search-clear');
+      if (clearBtn) {
+        clearBtn.classList.toggle('hidden', !filesSearchQuery);
+      }
+    }
+
+    // Render search results for Files column
+    function renderFilesSearchResults() {
+      if (!filesSearchResults.length) {
+        return '<div class="dashboard-empty-state">No files found</div>';
+      }
+
+      return `<div class="files-search-results">${filesSearchResults.map((file, index) =>
+        renderSearchResult(file, index, index === filesSearchIndex, filesSearchQuery, 'files')
+      ).join('')}</div>`;
+    }
+
+    // Highlight matching text in search results
+    function highlightMatch(text, query) {
+      if (!query) return escapeHtml(text);
+      const q = query.toLowerCase();
+      const t = text.toLowerCase();
+      const idx = t.indexOf(q);
+      if (idx === -1) return escapeHtml(text);
+
+      return escapeHtml(text.substring(0, idx)) +
+             '<span class="files-search-highlight">' + escapeHtml(text.substring(idx, idx + query.length)) + '</span>' +
+             escapeHtml(text.substring(idx + query.length));
+    }
+
+    // Render a single search result (shared by Files column and palette)
+    function renderSearchResult(file, index, isSelected, query, context) {
+      const classPrefix = context === 'palette' ? 'file-palette' : 'files-search';
+      const jsPath = escapeJsString(file.path);
+
+      return `
+        <div class="${classPrefix}-result ${isSelected ? 'selected' : ''}"
+             data-index="${index}"
+             onclick="openFileFromSearch('${jsPath}', '${context}')">
+          <div class="${classPrefix}-result-name">${highlightMatch(file.name, query)}</div>
+          <div class="${classPrefix}-result-path">${highlightMatch(file.path, query)}</div>
+        </div>
+      `;
+    }
+
+    // Keyboard handler for Files search input
+    function onFilesSearchKeydown(event) {
+      if (!filesSearchResults.length) {
+        if (event.key === 'Escape') {
+          clearFilesSearch();
+          event.target.blur();
+        }
+        return;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        filesSearchIndex = Math.min(filesSearchIndex + 1, filesSearchResults.length - 1);
+        rerenderFilesSearch();
+        scrollSelectedIntoView('files');
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        filesSearchIndex = Math.max(filesSearchIndex - 1, 0);
+        rerenderFilesSearch();
+        scrollSelectedIntoView('files');
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (filesSearchResults[filesSearchIndex]) {
+          openFileFromSearch(filesSearchResults[filesSearchIndex].path, 'files');
+        }
+      } else if (event.key === 'Escape') {
+        clearFilesSearch();
+        event.target.blur();
+      }
+    }
+
+    // Scroll selected result into view
+    function scrollSelectedIntoView(context) {
+      const selector = context === 'palette'
+        ? '.file-palette-result.selected'
+        : '.files-search-result.selected';
+      const selected = document.querySelector(selector);
+      if (selected) {
+        selected.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    }
+
+    // Open file from search result (shared by Files column and palette)
+    function openFileFromSearch(filePath, context) {
+      // Check if file is already open
+      const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
+      if (existingTab) {
+        selectTab(existingTab.id);
+        refreshFileTab(existingTab.id); // Refresh content in case file changed
+      } else {
+        openFileFromTree(filePath);
+      }
+
+      // Clear search / close palette
+      if (context === 'palette') {
+        closePalette();
+      } else {
+        clearFilesSearch();
+      }
+    }
+
+    // ========================================
+    // Cmd+P Palette Functions (Spec 0058)
+    // ========================================
+
+    // Open the file search palette
+    function openPalette() {
+      paletteOpen = true;
+      paletteQuery = '';
+      paletteResults = [];
+      paletteIndex = 0;
+      document.getElementById('file-palette').classList.remove('hidden');
+      const input = document.getElementById('palette-input');
+      input.value = '';
+      input.focus();
+      rerenderPaletteResults();
+    }
+
+    // Close the file search palette
+    function closePalette() {
+      paletteOpen = false;
+      paletteQuery = '';
+      paletteResults = [];
+      paletteIndex = 0;
+      document.getElementById('file-palette').classList.add('hidden');
+    }
+
+    // Debounced palette input handler
+    function onPaletteInput(value) {
+      clearTimeout(paletteDebounceTimer);
+      paletteDebounceTimer = setTimeout(() => {
+        paletteQuery = value;
+        paletteResults = searchFiles(value);
+        paletteIndex = 0;
+        rerenderPaletteResults();
+      }, 100);
+    }
+
+    // Re-render palette results
+    function rerenderPaletteResults() {
+      const resultsEl = document.getElementById('palette-results');
+      if (!resultsEl) return;
+
+      if (!paletteQuery) {
+        resultsEl.innerHTML = '<div class="file-palette-empty">Type to search files...</div>';
+        return;
+      }
+
+      if (!paletteResults.length) {
+        resultsEl.innerHTML = '<div class="file-palette-empty">No files found</div>';
+        return;
+      }
+
+      resultsEl.innerHTML = paletteResults.map((file, index) =>
+        renderSearchResult(file, index, index === paletteIndex, paletteQuery, 'palette')
+      ).join('');
+    }
+
+    // Keyboard handler for palette input
+    function onPaletteKeydown(event) {
+      if (event.key === 'Escape') {
+        closePalette();
+        return;
+      }
+
+      if (!paletteResults.length) return;
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        paletteIndex = Math.min(paletteIndex + 1, paletteResults.length - 1);
+        rerenderPaletteResults();
+        scrollSelectedIntoView('palette');
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        paletteIndex = Math.max(paletteIndex - 1, 0);
+        rerenderPaletteResults();
+        scrollSelectedIntoView('palette');
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        if (paletteResults[paletteIndex]) {
+          openFileFromSearch(paletteResults[paletteIndex].path, 'palette');
         }
-      } else if (activeTabId === 'files') {
-        renderFilesTabContent();
       }
     }
 
+    // Global keyboard handler for Cmd+P / Ctrl+P and Escape
+    document.addEventListener('keydown', (e) => {
+      // Global Escape handler for palette (works even if input loses focus)
+      if (e.key === 'Escape' && paletteOpen) {
+        closePalette();
+        return;
+      }
+
+      // Cmd+P (macOS) or Ctrl+P (Windows/Linux)
+      if ((e.metaKey || e.ctrlKey) && e.key === 'p') {
+        // Skip if user is typing in an input/textarea (except our search inputs)
+        const active = document.activeElement;
+        const isOurInput = active?.id === 'palette-input' || active?.id === 'files-search-input';
+        const isEditable = active?.tagName === 'INPUT' || active?.tagName === 'TEXTAREA' || active?.isContentEditable;
+
+        if (!isOurInput && isEditable) return; // Let native behavior happen
+
+        e.preventDefault(); // Prevent browser Print dialog
+        if (paletteOpen) {
+          closePalette();
+        } else {
+          openPalette();
+        }
+      }
+    });
+
     // Collapse all folders
     function collapseAllFolders() {
       filesTreeExpanded.clear();
@@ -3357,6 +4086,7 @@
         const existingTab = tabs.find(t => t.type === 'file' && t.path === filePath);
         if (existingTab) {
           selectTab(existingTab.id);
+          refreshFileTab(existingTab.id); // Refresh content in case file changed
           return;
         }
 
@@ -3394,10 +4124,9 @@
     function renderInfoHeader() {
       return `
         <div class="projects-info">
-          <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/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>
+          <h1 style="font-size: 20px; margin-bottom: 12px; color: var(--text-primary);">Agent Farm Dashboard</h1>
+          <p>Coordinate AI builders working on your codebase. The left panel shows the Architect terminal – tell it what you want to build. <strong>Tabs</strong> shows open terminals (Architect, Builders, utility shells). <strong>Files</strong> lets you browse and open project files. <strong>Projects</strong> tracks work as it moves from conception to integration.</p>
+          <p>Docs: <a href="#" onclick="openProjectFile('codev/resources/cheatsheet.md'); return false;">Cheatsheet</a> · <a href="#" onclick="openProjectFile('codev/resources/lifecycle.md'); return false;">Lifecycle</a> · <a href="#" onclick="openProjectFile('codev/resources/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> · <a href="https://discord.gg/mJ92DhDa6n" target="_blank">Discord</a></p>
         </div>
       `;
     }
@@ -3408,36 +4137,60 @@
 
       content.innerHTML = `
         <div class="dashboard-container">
+          ${renderInfoHeader()}
           <div class="dashboard-header">
-            <!-- Left Column: Tabs -->
-            <div class="dashboard-column">
-              <div class="dashboard-column-header">
-                <h3>Tabs</h3>
-              </div>
-              <div class="dashboard-tabs-list" id="dashboard-tabs-list">
-                ${renderDashboardTabsList()}
+            <!-- Tabs Section -->
+            <div class="dashboard-section section-tabs ${sectionState.tabs ? '' : 'collapsed'}">
+              <div class="dashboard-section-header" onclick="toggleSection('tabs')">
+                <h3><span class="collapse-icon">▼</span> Tabs</h3>
+                <div class="header-actions" onclick="event.stopPropagation()">
+                  <button onclick="spawnBuilder()" title="New Worktree">+ Worktree</button>
+                  <button onclick="spawnShell()" title="New Shell">+ Shell</button>
+                </div>
               </div>
-              <div class="dashboard-actions">
-                <button class="btn-action" onclick="createNewShell()" title="New utility shell">+ New Shell</button>
-                <button class="btn-action" onclick="createNewWorktreeShell()" title="New worktree shell">+ New Worktree</button>
+              <div class="dashboard-section-content">
+                <div class="dashboard-tabs-list" id="dashboard-tabs-list">
+                  ${renderDashboardTabsList()}
+                </div>
               </div>
             </div>
-            <!-- Right Column: Files -->
-            <div class="dashboard-column">
-              <div class="dashboard-column-header">
-                <h3>Files</h3>
-                <div class="header-actions">
+            <!-- Files Section -->
+            <div class="dashboard-section section-files ${sectionState.files ? '' : 'collapsed'}">
+              <div class="dashboard-section-header" onclick="toggleSection('files')">
+                <h3><span class="collapse-icon">▼</span> Files</h3>
+                <div class="header-actions" onclick="event.stopPropagation()">
+                  <button onclick="refreshFilesTree()" title="Refresh">↻</button>
                   <button onclick="collapseAllFolders()" title="Collapse All">⊟</button>
                   <button onclick="expandAllFolders()" title="Expand All">⊞</button>
                 </div>
               </div>
-              <div class="dashboard-files-list" id="dashboard-files-list">
-                ${renderDashboardFilesBrowser()}
+              <div class="dashboard-section-content">
+                <div class="files-search-container" onclick="event.stopPropagation()">
+                  <input type="text"
+                         id="files-search-input"
+                         class="files-search-input"
+                         placeholder="Search files by name..."
+                         oninput="onFilesSearchInput(this.value)"
+                         onkeydown="onFilesSearchKeydown(event)"
+                         value="${escapeHtml(filesSearchQuery)}" />
+                  <button class="files-search-clear ${filesSearchQuery ? '' : 'hidden'}"
+                          onclick="clearFilesSearch()"
+                          title="Clear search">×</button>
+                </div>
+                <div id="dashboard-files-content">
+                  ${filesSearchQuery ? renderFilesSearchResults() : renderDashboardFilesBrowserWithWrapper()}
+                </div>
               </div>
             </div>
           </div>
-          <div class="dashboard-projects" id="dashboard-projects">
-            ${renderDashboardProjectsSection()}
+          <!-- Projects Section -->
+          <div class="dashboard-section section-projects ${sectionState.projects ? '' : 'collapsed'}">
+            <div class="dashboard-section-header" onclick="toggleSection('projects')">
+              <h3><span class="collapse-icon">▼</span> Projects</h3>
+            </div>
+            <div class="dashboard-section-content" id="dashboard-projects">
+              ${renderDashboardProjectsSection()}
+            </div>
           </div>
         </div>
       `;
@@ -3516,9 +4269,8 @@
         `;
       }
 
-      // Render the existing project view (unchanged)
+      // Render the existing project view
       return `
-        ${renderInfoHeader()}
         ${renderKanbanGrid(projectsData)}
         ${renderTerminalProjects(projectsData)}
       `;
@@ -3719,6 +4471,269 @@
     // Start projectlist polling (separate from main state polling)
     setInterval(pollProjectlist, 5000);
 
+    // ========================================
+    // Activity Summary (Spec 0059)
+    // ========================================
+
+    let activityData = null;
+
+    // Show activity summary modal
+    async function showActivitySummary() {
+      // Check if activity tab already exists
+      let activityTab = tabs.find(t => t.type === 'activity');
+
+      if (!activityTab) {
+        // Create new activity tab
+        activityTab = {
+          id: 'activity-today',
+          type: 'activity',
+          name: 'Today'
+        };
+        tabs.push(activityTab);
+      }
+
+      // Switch to activity tab
+      activeTabId = activityTab.id;
+      currentTabType = null; // Force re-render
+      renderTabs();
+      renderTabContent();
+    }
+
+    // Render the activity tab content
+    async function renderActivityTab() {
+      const content = document.getElementById('tab-content');
+
+      // Show loading state
+      content.innerHTML = `
+        <div class="activity-tab-container">
+          <div class="activity-loading">
+            <span class="activity-spinner"></span>
+            Loading activity...
+          </div>
+        </div>
+      `;
+
+      try {
+        const response = await fetch('/api/activity-summary');
+        if (!response.ok) {
+          throw new Error(await response.text());
+        }
+        activityData = await response.json();
+        renderActivityTabContent(activityData);
+      } catch (err) {
+        content.innerHTML = `
+          <div class="activity-tab-container">
+            <div class="activity-error">
+              Failed to load activity: ${escapeHtml(err.message)}
+            </div>
+          </div>
+        `;
+      }
+    }
+
+    // Render activity tab content (similar to modal but in tab)
+    function renderActivityTabContent(data) {
+      const content = document.getElementById('tab-content');
+
+      // Check for zero activity
+      if (data.commits.length === 0 && data.prs.length === 0 && data.builders.length === 0) {
+        content.innerHTML = `
+          <div class="activity-tab-container">
+            <div class="activity-empty">
+              <p>No activity recorded today</p>
+              <p style="font-size: 12px; margin-top: 8px;">Make some commits or create PRs to see your daily summary!</p>
+            </div>
+          </div>
+        `;
+        return;
+      }
+
+      const hours = Math.floor(data.timeTracking.activeMinutes / 60);
+      const mins = data.timeTracking.activeMinutes % 60;
+      const uniqueBranches = new Set(data.commits.map(c => c.branch)).size;
+      const mergedPrs = data.prs.filter(p => p.state === 'MERGED').length;
+
+      // Format time strings
+      const formatTime = (isoString) => {
+        if (!isoString) return '--';
+        const date = new Date(isoString);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      };
+
+      let html = '<div class="activity-tab-container"><div class="activity-summary">';
+
+      // AI Summary (if available)
+      if (data.aiSummary) {
+        html += `<div class="activity-ai-summary">${escapeHtml(data.aiSummary)}</div>`;
+      }
+
+      // Activity section
+      html += `
+        <div class="activity-section">
+          <h4>Activity</h4>
+          <ul>
+            <li>${data.commits.length} commits across ${uniqueBranches} branch${uniqueBranches !== 1 ? 'es' : ''}</li>
+            <li>${data.files.length} files modified</li>
+            <li>${data.prs.length} PR${data.prs.length !== 1 ? 's' : ''} created${mergedPrs > 0 ? `, ${mergedPrs} merged` : ''}</li>
+          </ul>
+        </div>
+      `;
+
+      // Projects section (if any status changes)
+      if (data.projectChanges && data.projectChanges.length > 0) {
+        html += `
+          <div class="activity-section">
+            <h4>Projects Touched</h4>
+            <ul>
+              ${data.projectChanges.map(p => `<li>${escapeHtml(p.id)}: ${escapeHtml(p.title)} (${escapeHtml(p.oldStatus)} → ${escapeHtml(p.newStatus)})</li>`).join('')}
+            </ul>
+          </div>
+        `;
+      }
+
+      // Time section
+      html += `
+        <div class="activity-section">
+          <h4>Time</h4>
+          <p><span class="activity-time-value">~${hours}h ${mins}m</span> active time</p>
+          <p>First activity: ${formatTime(data.timeTracking.firstActivity)}</p>
+          <p>Last activity: ${formatTime(data.timeTracking.lastActivity)}</p>
+        </div>
+      `;
+
+      // Copy button
+      html += `
+        <div class="activity-actions">
+          <button class="btn" onclick="copyActivityToClipboard()">Copy to Clipboard</button>
+        </div>
+      `;
+
+      html += '</div></div>';
+      content.innerHTML = html;
+    }
+
+    // Render activity summary content
+    function renderActivitySummary(data) {
+      const content = document.getElementById('activity-content');
+
+      // Check for zero activity
+      if (data.commits.length === 0 && data.prs.length === 0 && data.builders.length === 0) {
+        content.innerHTML = `
+          <div class="activity-empty">
+            <p>No activity recorded today</p>
+            <p style="font-size: 12px; margin-top: 8px;">Make some commits or create PRs to see your daily summary!</p>
+          </div>
+        `;
+        return;
+      }
+
+      const hours = Math.floor(data.timeTracking.activeMinutes / 60);
+      const mins = data.timeTracking.activeMinutes % 60;
+      const uniqueBranches = new Set(data.commits.map(c => c.branch)).size;
+      const mergedPrs = data.prs.filter(p => p.state === 'MERGED').length;
+
+      // Format time strings
+      const formatTime = (isoString) => {
+        if (!isoString) return '--';
+        const date = new Date(isoString);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      };
+
+      let html = '<div class="activity-summary">';
+
+      // AI Summary (if available)
+      if (data.aiSummary) {
+        html += `<div class="activity-ai-summary">${escapeHtml(data.aiSummary)}</div>`;
+      }
+
+      // Activity section
+      html += `
+        <div class="activity-section">
+          <h4>Activity</h4>
+          <ul>
+            <li>${data.commits.length} commits across ${uniqueBranches} branch${uniqueBranches !== 1 ? 'es' : ''}</li>
+            <li>${data.files.length} files modified</li>
+            <li>${data.prs.length} PR${data.prs.length !== 1 ? 's' : ''} created${mergedPrs > 0 ? `, ${mergedPrs} merged` : ''}</li>
+          </ul>
+        </div>
+      `;
+
+      // Projects section (if any status changes)
+      if (data.projectChanges && data.projectChanges.length > 0) {
+        html += `
+          <div class="activity-section">
+            <h4>Projects Touched</h4>
+            <ul>
+              ${data.projectChanges.map(p => `<li>${escapeHtml(p.id)}: ${escapeHtml(p.title)} (${escapeHtml(p.oldStatus)} → ${escapeHtml(p.newStatus)})</li>`).join('')}
+            </ul>
+          </div>
+        `;
+      }
+
+      // Time section
+      html += `
+        <div class="activity-section">
+          <h4>Time</h4>
+          <p><span class="activity-time-value">~${hours}h ${mins}m</span> active time</p>
+          <p>First activity: ${formatTime(data.timeTracking.firstActivity)}</p>
+          <p>Last activity: ${formatTime(data.timeTracking.lastActivity)}</p>
+        </div>
+      `;
+
+      html += '</div>';
+      content.innerHTML = html;
+    }
+
+    // Close activity modal
+    function closeActivityModal() {
+      document.getElementById('activity-modal').classList.add('hidden');
+    }
+
+    // Copy activity summary to clipboard
+    function copyActivitySummary() {
+      if (!activityData) return;
+
+      const hours = Math.floor(activityData.timeTracking.activeMinutes / 60);
+      const mins = activityData.timeTracking.activeMinutes % 60;
+      const uniqueBranches = new Set(activityData.commits.map(c => c.branch)).size;
+      const mergedPrs = activityData.prs.filter(p => p.state === 'MERGED').length;
+
+      let markdown = `## Today's Summary\n\n`;
+
+      if (activityData.aiSummary) {
+        markdown += `${activityData.aiSummary}\n\n`;
+      }
+
+      markdown += `### Activity\n`;
+      markdown += `- ${activityData.commits.length} commits across ${uniqueBranches} branches\n`;
+      markdown += `- ${activityData.files.length} files modified\n`;
+      markdown += `- ${activityData.prs.length} PRs${mergedPrs > 0 ? ` (${mergedPrs} merged)` : ''}\n\n`;
+
+      if (activityData.projectChanges && activityData.projectChanges.length > 0) {
+        markdown += `### Projects Touched\n`;
+        activityData.projectChanges.forEach(p => {
+          markdown += `- ${p.id}: ${p.title} (${p.oldStatus} → ${p.newStatus})\n`;
+        });
+        markdown += '\n';
+      }
+
+      markdown += `### Time\n`;
+      markdown += `Active time: ~${hours}h ${mins}m\n`;
+
+      navigator.clipboard.writeText(markdown).then(() => {
+        showToast('Copied to clipboard', 'success');
+      }).catch(() => {
+        showToast('Failed to copy', 'error');
+      });
+    }
+
+    // Close activity modal when clicking backdrop
+    document.getElementById('activity-modal').addEventListener('click', (e) => {
+      if (e.target.id === 'activity-modal') {
+        closeActivityModal();
+      }
+    });
+
     // Initialize on load
     init();
   </script>