`;
showModal('Execution Detail', modalContent);
@@ -171,12 +220,69 @@ async function filterCliHistory(tool) {
renderCliHistory();
}
+function searchCliHistory(query) {
+ cliHistorySearch = query;
+ renderCliHistory();
+ // Preserve focus and cursor position
+ const searchInput = document.querySelector('.cli-history-search');
+ if (searchInput) {
+ searchInput.focus();
+ searchInput.setSelectionRange(query.length, query.length);
+ }
+}
+
async function refreshCliHistory() {
await loadCliHistory();
renderCliHistory();
showRefreshToast('History refreshed', 'success');
}
+// ========== Delete Execution ==========
+function confirmDeleteExecution(executionId) {
+ if (confirm('Delete this execution record? This action cannot be undone.')) {
+ deleteExecution(executionId);
+ }
+}
+
+async function deleteExecution(executionId) {
+ try {
+ const response = await fetch(`/api/cli/execution?path=${encodeURIComponent(projectPath)}&id=${encodeURIComponent(executionId)}`, {
+ method: 'DELETE'
+ });
+
+ if (!response.ok) {
+ const error = await response.json();
+ throw new Error(error.error || 'Failed to delete');
+ }
+
+ // Remove from local state
+ cliExecutionHistory = cliExecutionHistory.filter(exec => exec.id !== executionId);
+ renderCliHistory();
+ showRefreshToast('Execution deleted', 'success');
+ } catch (err) {
+ console.error('Failed to delete execution:', err);
+ showRefreshToast('Delete failed: ' + err.message, 'error');
+ }
+}
+
+// ========== Copy Prompt ==========
+async function copyExecutionPrompt(executionId) {
+ const detail = await loadExecutionDetail(executionId);
+ if (!detail) {
+ showRefreshToast('Execution not found', 'error');
+ return;
+ }
+
+ if (navigator.clipboard) {
+ try {
+ await navigator.clipboard.writeText(detail.prompt);
+ showRefreshToast('Prompt copied to clipboard', 'success');
+ } catch (err) {
+ showRefreshToast('Failed to copy', 'error');
+ }
+ }
+}
+
// ========== Helpers ==========
function formatDuration(ms) {
if (ms >= 60000) {
diff --git a/ccw/src/templates/dashboard-js/components/global-notifications.js b/ccw/src/templates/dashboard-js/components/global-notifications.js
index 2fbdb5a8..03c8b057 100644
--- a/ccw/src/templates/dashboard-js/components/global-notifications.js
+++ b/ccw/src/templates/dashboard-js/components/global-notifications.js
@@ -79,17 +79,22 @@ function addGlobalNotification(type, message, details = null, source = null) {
timestamp: new Date().toISOString(),
read: false
};
-
+
globalNotificationQueue.unshift(notification);
-
+
// Keep only last 100 notifications
if (globalNotificationQueue.length > 100) {
globalNotificationQueue = globalNotificationQueue.slice(0, 100);
}
-
+
+ // Persist to localStorage
+ if (typeof saveNotificationsToStorage === 'function') {
+ saveNotificationsToStorage();
+ }
+
renderGlobalNotifications();
updateGlobalNotifBadge();
-
+
// Show toast for important notifications
if (type === 'error' || type === 'success') {
showNotificationToast(notification);
@@ -204,6 +209,12 @@ function updateGlobalNotifBadge() {
*/
function clearGlobalNotifications() {
globalNotificationQueue = [];
+
+ // Clear from localStorage
+ if (typeof saveNotificationsToStorage === 'function') {
+ saveNotificationsToStorage();
+ }
+
renderGlobalNotifications();
updateGlobalNotifBadge();
}
@@ -213,6 +224,12 @@ function clearGlobalNotifications() {
*/
function markAllNotificationsRead() {
globalNotificationQueue.forEach(n => n.read = true);
+
+ // Save to localStorage
+ if (typeof saveNotificationsToStorage === 'function') {
+ saveNotificationsToStorage();
+ }
+
renderGlobalNotifications();
updateGlobalNotifBadge();
}
diff --git a/ccw/src/templates/dashboard-js/components/modals.js b/ccw/src/templates/dashboard-js/components/modals.js
index c67e63a7..2238189e 100644
--- a/ccw/src/templates/dashboard-js/components/modals.js
+++ b/ccw/src/templates/dashboard-js/components/modals.js
@@ -2,6 +2,56 @@
// MODAL DIALOGS
// ==========================================
+// Generic Modal Functions
+function showModal(title, content, options = {}) {
+ // Remove existing modal if any
+ closeModal();
+
+ const overlay = document.createElement('div');
+ overlay.className = 'generic-modal-overlay';
+ overlay.innerHTML = `
+
+
+
${escapeHtml(title)}
+
+
+
+ ${content}
+
+
+ `;
+
+ document.body.appendChild(overlay);
+
+ // Trigger animation
+ requestAnimationFrame(() => overlay.classList.add('active'));
+
+ // Initialize Lucide icons in modal
+ if (window.lucide) lucide.createIcons();
+
+ // Close on overlay click
+ overlay.addEventListener('click', (e) => {
+ if (e.target === overlay) closeModal();
+ });
+
+ // Close on Escape key
+ const escHandler = (e) => {
+ if (e.key === 'Escape') {
+ closeModal();
+ document.removeEventListener('keydown', escHandler);
+ }
+ };
+ document.addEventListener('keydown', escHandler);
+}
+
+function closeModal() {
+ const overlay = document.querySelector('.generic-modal-overlay');
+ if (overlay) {
+ overlay.classList.remove('active');
+ setTimeout(() => overlay.remove(), 200);
+ }
+}
+
// SVG Icons
const icons = {
folder: '',
diff --git a/ccw/src/templates/dashboard-js/components/navigation.js b/ccw/src/templates/dashboard-js/components/navigation.js
index 3af5597f..f324281e 100644
--- a/ccw/src/templates/dashboard-js/components/navigation.js
+++ b/ccw/src/templates/dashboard-js/components/navigation.js
@@ -116,6 +116,8 @@ function updateContentTitle() {
titleEl.textContent = 'MCP Server Management';
} else if (currentView === 'explorer') {
titleEl.textContent = 'File Explorer';
+ } else if (currentView === 'cli-manager') {
+ titleEl.textContent = 'CLI Tools & CCW';
} else if (currentView === 'liteTasks') {
const names = { 'lite-plan': 'Lite Plan Sessions', 'lite-fix': 'Lite Fix Sessions' };
titleEl.textContent = names[currentLiteType] || 'Lite Tasks';
diff --git a/ccw/src/templates/dashboard-js/components/notifications.js b/ccw/src/templates/dashboard-js/components/notifications.js
index dadb2f71..c412b7a5 100644
--- a/ccw/src/templates/dashboard-js/components/notifications.js
+++ b/ccw/src/templates/dashboard-js/components/notifications.js
@@ -3,6 +3,42 @@
// ==========================================
// Real-time silent refresh (no notification bubbles)
+/**
+ * Format JSON object for display in notifications
+ * @param {Object} obj - Object to format
+ * @param {number} maxLen - Max string length
+ * @returns {string} Formatted string
+ */
+function formatJsonDetails(obj, maxLen = 150) {
+ if (!obj || typeof obj !== 'object') return String(obj);
+
+ // Try pretty format first
+ try {
+ const formatted = JSON.stringify(obj, null, 2);
+ if (formatted.length <= maxLen) {
+ return formatted;
+ }
+
+ // For longer content, show key-value pairs on separate lines
+ const entries = Object.entries(obj);
+ if (entries.length === 0) return '{}';
+
+ const lines = entries.slice(0, 5).map(([key, val]) => {
+ let valStr = typeof val === 'object' ? JSON.stringify(val) : String(val);
+ if (valStr.length > 50) valStr = valStr.substring(0, 47) + '...';
+ return `${key}: ${valStr}`;
+ });
+
+ if (entries.length > 5) {
+ lines.push(`... +${entries.length - 5} more`);
+ }
+
+ return lines.join('\n');
+ } catch (e) {
+ return JSON.stringify(obj).substring(0, maxLen) + '...';
+ }
+}
+
let wsConnection = null;
let autoRefreshInterval = null;
let lastDataHash = null;
@@ -132,9 +168,7 @@ function handleToolExecutionNotification(payload) {
notifType = 'info';
message = `Executing ${toolName}...`;
if (params) {
- // Show truncated params
- const paramStr = JSON.stringify(params);
- details = paramStr.length > 100 ? paramStr.substring(0, 100) + '...' : paramStr;
+ details = formatJsonDetails(params, 150);
}
break;
@@ -142,12 +176,10 @@ function handleToolExecutionNotification(payload) {
notifType = 'success';
message = `${toolName} completed`;
if (result) {
- // Show truncated result
if (result._truncated) {
details = result.preview;
} else {
- const resultStr = JSON.stringify(result);
- details = resultStr.length > 150 ? resultStr.substring(0, 150) + '...' : resultStr;
+ details = formatJsonDetails(result, 200);
}
}
break;
diff --git a/ccw/src/templates/dashboard-js/state.js b/ccw/src/templates/dashboard-js/state.js
index 3fbe372e..b42abe68 100644
--- a/ccw/src/templates/dashboard-js/state.js
+++ b/ccw/src/templates/dashboard-js/state.js
@@ -37,9 +37,45 @@ const liteTaskDataStore = {};
const taskJsonStore = {};
// ========== Global Notification Queue ==========
-// Notification queue visible from any view
-let globalNotificationQueue = [];
+// Notification queue visible from any view (persisted to localStorage)
+const NOTIFICATION_STORAGE_KEY = 'ccw_notifications';
+const NOTIFICATION_MAX_STORED = 100;
+
+// Load notifications from localStorage on init
+let globalNotificationQueue = loadNotificationsFromStorage();
let isNotificationPanelVisible = false;
+
+/**
+ * Load notifications from localStorage
+ * @returns {Array} Notification array
+ */
+function loadNotificationsFromStorage() {
+ try {
+ const stored = localStorage.getItem(NOTIFICATION_STORAGE_KEY);
+ if (stored) {
+ const parsed = JSON.parse(stored);
+ // Filter out notifications older than 7 days
+ const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+ return parsed.filter(n => new Date(n.timestamp).getTime() > sevenDaysAgo);
+ }
+ } catch (e) {
+ console.error('[Notifications] Failed to load from storage:', e);
+ }
+ return [];
+}
+
+/**
+ * Save notifications to localStorage
+ */
+function saveNotificationsToStorage() {
+ try {
+ // Keep only the last N notifications
+ const toSave = globalNotificationQueue.slice(0, NOTIFICATION_MAX_STORED);
+ localStorage.setItem(NOTIFICATION_STORAGE_KEY, JSON.stringify(toSave));
+ } catch (e) {
+ console.error('[Notifications] Failed to save to storage:', e);
+ }
+}
// ========== Event Handler ==========
/**
* Handle granular workflow events from CLI
diff --git a/ccw/src/templates/dashboard-js/views/cli-manager.js b/ccw/src/templates/dashboard-js/views/cli-manager.js
index cc37b3c9..6e966f91 100644
--- a/ccw/src/templates/dashboard-js/views/cli-manager.js
+++ b/ccw/src/templates/dashboard-js/views/cli-manager.js
@@ -1,15 +1,15 @@
// CLI Manager View
-// Main view combining CLI status and history panels
+// Main view combining CLI status, CCW installations, and history panels
// ========== CLI Manager State ==========
-let currentCliExecution = null;
-let cliExecutionOutput = '';
+var currentCliExecution = null;
+var cliExecutionOutput = '';
+var ccwInstallations = [];
// ========== Initialization ==========
function initCliManager() {
- // Initialize CLI navigation
- document.querySelectorAll('.nav-item[data-view="cli-manager"]').forEach(item => {
- item.addEventListener('click', () => {
+ document.querySelectorAll('.nav-item[data-view="cli-manager"]').forEach(function(item) {
+ item.addEventListener('click', function() {
setActiveNavItem(item);
currentView = 'cli-manager';
currentFilter = null;
@@ -21,262 +21,461 @@ function initCliManager() {
});
}
+// ========== CCW Installations ==========
+async function loadCcwInstallations() {
+ try {
+ var response = await fetch('/api/ccw/installations');
+ if (!response.ok) throw new Error('Failed to load CCW installations');
+ var data = await response.json();
+ ccwInstallations = data.installations || [];
+ return ccwInstallations;
+ } catch (err) {
+ console.error('Failed to load CCW installations:', err);
+ ccwInstallations = [];
+ return [];
+ }
+}
+
// ========== Rendering ==========
async function renderCliManager() {
- const mainContent = document.querySelector('.main-content');
- if (!mainContent) return;
+ var container = document.getElementById('mainContent');
+ if (!container) return;
+
+ // Hide stats grid and search for CLI view
+ var statsGrid = document.getElementById('statsGrid');
+ var searchInput = document.getElementById('searchInput');
+ if (statsGrid) statsGrid.style.display = 'none';
+ if (searchInput) searchInput.parentElement.style.display = 'none';
// Load data
await Promise.all([
loadCliToolStatus(),
- loadCliHistory()
+ loadCliHistory(),
+ loadCcwInstallations()
]);
- mainContent.innerHTML = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Execution Output
-
-
- Running...
-
-
-
-
-
- `;
+ container.innerHTML = '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
';
// Render sub-panels
renderCliStatus();
- renderCliExecutePanel();
+ renderCcwInstallPanel();
renderCliHistory();
// Initialize Lucide icons
- if (window.lucide) {
- lucide.createIcons();
+ if (window.lucide) lucide.createIcons();
+}
+
+// CCW Install Carousel State
+var ccwCarouselIndex = 0;
+
+function renderCcwInstallPanel() {
+ var container = document.getElementById('ccw-install-panel');
+ if (!container) return;
+
+ var html = '
CCW Installations
' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '
';
+
+ if (ccwInstallations.length === 0) {
+ html += '
' +
+ '' +
+ '
No installations found
' +
+ '
';
+ } else {
+ // Carousel container
+ html += '
';
+
+ // Left arrow (show only if more than 1 installation)
+ if (ccwInstallations.length > 1) {
+ html += '';
+ }
+
+ html += '
';
+
+ for (var i = 0; i < ccwInstallations.length; i++) {
+ var inst = ccwInstallations[i];
+ var isGlobal = inst.installation_mode === 'Global';
+ var modeIcon = isGlobal ? 'home' : 'folder';
+ var version = inst.application_version || 'unknown';
+ var installDate = new Date(inst.installation_date).toLocaleDateString();
+ var activeClass = i === ccwCarouselIndex ? 'active' : '';
+
+ html += '