claude-code-workflow 6.2.5 → 6.2.6

package/src/templates/dashboard-js/views/claude-manager.js

@@ -1,912 +0,0 @@
-// CLAUDE.md Manager View
-// Three-column layout: File Tree | Viewer/Editor | Metadata & Actions
-
-// ========== State Management ==========
-var claudeFilesData = {
-  user: { main: null },
-  project: { main: null },
-  modules: [],
-  summary: { totalFiles: 0, totalSize: 0 }
-};
-var selectedFile = null;
-var isEditMode = false;
-var isDirty = false;
-var fileTreeExpanded = {
-  user: true,
-  project: true,
-  modules: {}
-};
-var searchQuery = '';
-var freshnessData = {}; // { [filePath]: FreshnessResult }
-var freshnessSummary = null;
-
-// ========== Main Render Function ==========
-async function renderClaudeManager() {
-  var container = document.getElementById('mainContent');
-  if (!container) return;
-
-  // Hide stats grid and search for claude-manager view
-  var statsGrid = document.getElementById('statsGrid');
-  var searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = 'none';
-  if (searchInput) searchInput.parentElement.style.display = 'none';
-
-  // Show loading state
-  container.innerHTML = '<div class="claude-manager-view loading">' +
-    '<div class="loading-spinner"><i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i></div>' +
-    '<p>' + t('common.loading') + '</p>' +
-    '</div>';
-
-  // Load file data first (fast operation)
-  await loadClaudeFiles();
-
-  // Render layout immediately without waiting for freshness data
-  container.innerHTML = '<div class="claude-manager-view">' +
-    '<div class="claude-manager-header">' +
-    '<div class="claude-manager-header-left">' +
-    '<h2><i data-lucide="file-code" class="w-5 h-5"></i> ' + t('claudeManager.title') + '</h2>' +
-    '<span class="file-count-badge">' + claudeFilesData.summary.totalFiles + ' ' + t('claudeManager.files') + '</span>' +
-    '</div>' +
-    '<div class="claude-manager-header-right">' +
-    '<button class="btn btn-sm btn-primary" onclick="showCreateFileDialog()">' +
-    '<i data-lucide="file-plus" class="w-4 h-4"></i> ' + t('claude.createFile') +
-    '</button>' +
-    '<button class="btn btn-sm btn-secondary" onclick="refreshClaudeFiles()">' +
-    '<i data-lucide="refresh-cw" class="w-4 h-4"></i> ' + t('common.refresh') +
-    '</button>' +
-    '</div>' +
-    '</div>' +
-    '<div class="claude-manager-columns">' +
-    '<div class="claude-manager-column left" id="claude-file-tree"></div>' +
-    '<div class="claude-manager-column center" id="claude-file-viewer"></div>' +
-    '<div class="claude-manager-column right" id="claude-file-metadata"></div>' +
-    '</div>' +
-    '</div>';
-
-  // Render each column immediately (without freshness data)
-  renderFileTree();
-  renderFileViewer();
-  renderFileMetadata();
-
-  // Initialize Lucide icons
-  if (window.lucide) lucide.createIcons();
-
-  // Load freshness data asynchronously in the background (non-blocking)
-  loadFreshnessDataAsync();
-}
-
-// Async freshness loader - loads in background and updates UI when ready
-function loadFreshnessDataAsync() {
-  // Use setTimeout to ensure UI is rendered first
-  setTimeout(async function() {
-    try {
-      await loadFreshnessData();
-      // Re-render file tree and metadata with freshness data
-      renderFileTree();
-      if (selectedFile) {
-        renderFileMetadata();
-      }
-      if (window.lucide) lucide.createIcons();
-    } catch (error) {
-      console.error('Error loading freshness data in background:', error);
-    }
-  }, 100);
-}
-
-// ========== Data Loading ==========
-async function loadClaudeFiles() {
-  try {
-    var res = await fetch('/api/memory/claude/scan?path=' + encodeURIComponent(projectPath || ''));
-    if (!res.ok) throw new Error('Failed to load CLAUDE.md files');
-    claudeFilesData = await res.json();
-    updateClaudeBadge(); // Update navigation badge
-  } catch (error) {
-    console.error('Error loading CLAUDE.md files:', error);
-    addGlobalNotification('error', t('claudeManager.loadError'), null, 'CLAUDE.md');
-  }
-}
-
-async function refreshClaudeFiles() {
-  await loadClaudeFiles();
-  // Re-render file tree immediately
-  renderFileTree();
-  renderFileViewer();
-  renderFileMetadata();
-  if (window.lucide) lucide.createIcons();
-  addGlobalNotification('success', t('claudeManager.refreshed'), null, 'CLAUDE.md');
-  // Load freshness data in background
-  loadFreshnessDataAsync();
-}
-
-// ========== Freshness Data Loading ==========
-async function loadFreshnessData() {
-  try {
-    var res = await fetch('/api/memory/claude/freshness?path=' + encodeURIComponent(projectPath || ''));
-    if (!res.ok) throw new Error('Failed to load freshness data');
-    var data = await res.json();
-
-    // Build lookup map
-    freshnessData = {};
-    if (data.files) {
-      data.files.forEach(function(f) {
-        freshnessData[f.path] = f;
-      });
-    }
-    freshnessSummary = data.summary || null;
-  } catch (error) {
-    console.error('Error loading freshness data:', error);
-    freshnessData = {};
-    freshnessSummary = null;
-  }
-}
-
-async function markFileAsUpdated() {
-  if (!selectedFile) return;
-
-  try {
-    var res = await fetch('/api/memory/claude/mark-updated', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        path: selectedFile.path,
-        source: 'dashboard'
-      })
-    });
-
-    if (!res.ok) throw new Error('Failed to mark file as updated');
-
-    addGlobalNotification('success', t('claudeManager.markedAsUpdated') || 'Marked as updated', null, 'CLAUDE.md');
-
-    // Reload freshness data
-    await loadFreshnessData();
-    renderFileTree();
-    renderFileMetadata();
-  } catch (error) {
-    console.error('Error marking file as updated:', error);
-    addGlobalNotification('error', t('claudeManager.markUpdateError') || 'Failed to mark as updated', null, 'CLAUDE.md');
-  }
-}
-
-// ========== File Tree Rendering ==========
-function renderFileTree() {
-  var container = document.getElementById('claude-file-tree');
-  if (!container) return;
-
-  var html = '<div class="file-tree">' +
-    // Search Box
-    '<div class="file-tree-search">' +
-    '<input type="text" id="fileSearchInput" placeholder="' + t('claude.searchPlaceholder') + '" ' +
-    'value="' + escapeHtml(searchQuery) + '" oninput="filterFileTree(this.value)">' +
-    '<i data-lucide="search" class="w-4 h-4"></i>' +
-    '</div>' +
-    renderClaudeFilesTree() +
-    '</div>'; // end file-tree
-
-  container.innerHTML = html;
-  if (window.lucide) lucide.createIcons();
-}
-
-function renderClaudeFilesTree() {
-  var html = '<div class="file-tree-section">' +
-    '<div class="file-tree-header" onclick="toggleTreeSection(\'user\')">' +
-    '<i data-lucide="' + (fileTreeExpanded.user ? 'chevron-down' : 'chevron-right') + '" class="w-4 h-4"></i>' +
-    '<i data-lucide="user" class="w-4 h-4 text-orange-500"></i>' +
-    '<span>' + t('claudeManager.userLevel') + '</span>' +
-    '<span class="file-count">' + (claudeFilesData.user.main ? 1 : 0) + '</span>' +
-    '</div>';
-
-  if (fileTreeExpanded.user) {
-    // User CLAUDE.md (only main file, no rules)
-    if (claudeFilesData.user.main) {
-      html += renderFileTreeItem(claudeFilesData.user.main, 1);
-    } else {
-      html += '<div class="file-tree-item empty" style="padding-left: 1.5rem;">' +
-        '<i data-lucide="file-x" class="w-4 h-4"></i>' +
-        '<span>' + t('claudeManager.noFile') + '</span>' +
-        '</div>';
-    }
-  }
-
-  html += '</div>'; // end user section
-
-  // Project section
-  html += '<div class="file-tree-section">' +
-    '<div class="file-tree-header" onclick="toggleTreeSection(\'project\')">' +
-    '<i data-lucide="' + (fileTreeExpanded.project ? 'chevron-down' : 'chevron-right') + '" class="w-4 h-4"></i>' +
-    '<i data-lucide="folder" class="w-4 h-4 text-green-500"></i>' +
-    '<span>' + t('claudeManager.projectLevel') + '</span>' +
-    '<span class="file-count">' + (claudeFilesData.project.main ? 1 : 0) + '</span>' +
-    '</div>';
-
-  if (fileTreeExpanded.project) {
-    // Project CLAUDE.md (only main file, no rules)
-    if (claudeFilesData.project.main) {
-      html += renderFileTreeItem(claudeFilesData.project.main, 1);
-    } else {
-      html += '<div class="file-tree-item empty" style="padding-left: 1.5rem;">' +
-        '<i data-lucide="file-x" class="w-4 h-4"></i>' +
-        '<span>' + t('claudeManager.noFile') + '</span>' +
-        '</div>';
-    }
-  }
-
-  html += '</div>'; // end project section
-
-  // Modules section
-  html += '<div class="file-tree-section">' +
-    '<div class="file-tree-header">' +
-    '<i data-lucide="package" class="w-4 h-4 text-blue-500"></i>' +
-    '<span>' + t('claudeManager.moduleLevel') + '</span>' +
-    '<span class="file-count">' + claudeFilesData.modules.length + '</span>' +
-    '</div>';
-
-  if (claudeFilesData.modules.length > 0) {
-    claudeFilesData.modules.forEach(function (file) {
-      html += renderFileTreeItem(file, 1);
-    });
-  } else {
-    html += '<div class="file-tree-item empty" style="padding-left: 1.5rem;">' +
-      '<i data-lucide="file-x" class="w-4 h-4"></i>' +
-      '<span>' + t('claudeManager.noModules') + '</span>' +
-      '</div>';
-  }
-
-  html += '</div>'; // end modules section
-
-  return html;
-}
-
-function renderFileTreeItem(file, indentLevel) {
-  var isSelected = selectedFile && selectedFile.id === file.id;
-  var indentPx = indentLevel * 1.5;
-  var safeId = file.id.replace(/'/g, "&apos;");
-
-  // Get freshness data for this file
-  var fd = freshnessData[file.path];
-  var freshnessClass = '';
-  var freshnessBadge = '';
-
-  // Check if freshness data is loaded (freshnessSummary is set after load)
-  var freshnessLoaded = freshnessSummary !== null || Object.keys(freshnessData).length > 0;
-
-  if (fd) {
-    if (fd.freshness >= 75) {
-      freshnessClass = ' freshness-good';
-      freshnessBadge = '<span class="freshness-badge good">' + fd.freshness + '%</span>';
-    } else if (fd.freshness >= 50) {
-      freshnessClass = ' freshness-warn';
-      freshnessBadge = '<span class="freshness-badge warn">' + fd.freshness + '%</span>';
-    } else {
-      freshnessClass = ' freshness-stale';
-      freshnessBadge = '<span class="freshness-badge stale">' + fd.freshness + '%</span>';
-    }
-  } else if (!freshnessLoaded) {
-    // Show loading badge while freshness data is being fetched
-    freshnessBadge = '<span class="freshness-badge loading">...</span>';
-  }
-
-  return '<div class="file-tree-item' + freshnessClass + (isSelected ? ' selected' : '') + '" ' +
-    'onclick="selectClaudeFile(\'' + safeId + '\')" ' +
-    'style="padding-left: ' + indentPx + 'rem;">' +
-    '<i data-lucide="file-text" class="w-4 h-4"></i>' +
-    '<span class="file-name">' + escapeHtml(file.name) + '</span>' +
-    freshnessBadge +
-    (file.parentDirectory ? '<span class="file-path-hint">' + escapeHtml(file.parentDirectory) + '</span>' : '') +
-    '</div>';
-}
-
-function toggleTreeSection(section) {
-  fileTreeExpanded[section] = !fileTreeExpanded[section];
-  renderFileTree();
-}
-
-async function selectClaudeFile(fileId) {
-  // Find file in data (only main CLAUDE.md files, no rules)
-  var allFiles = [
-    claudeFilesData.user.main,
-    claudeFilesData.project.main,
-    ...claudeFilesData.modules
-  ].filter(function (f) { return f !== null; });
-
-  selectedFile = allFiles.find(function (f) { return f.id === fileId; }) || null;
-
-  if (selectedFile) {
-    // Load full content if not already loaded
-    if (!selectedFile.content) {
-      try {
-        var res = await fetch('/api/memory/claude/file?path=' + encodeURIComponent(selectedFile.path));
-        if (res.ok) {
-          var data = await res.json();
-          selectedFile.content = data.content;
-          selectedFile.stats = data.stats;
-        }
-      } catch (error) {
-        console.error('Error loading file content:', error);
-      }
-    }
-  }
-
-  renderFileTree();
-  renderFileViewer();
-  renderFileMetadata();
-}
-
-// ========== File Viewer Rendering ==========
-function renderFileViewer() {
-  var container = document.getElementById('claude-file-viewer');
-  if (!container) return;
-
-  if (!selectedFile) {
-    container.innerHTML = '<div class="empty-state">' +
-      '<i data-lucide="file-search" class="w-12 h-12 opacity-20"></i>' +
-      '<p>' + t('claudeManager.selectFile') + '</p>' +
-      '</div>';
-    if (window.lucide) lucide.createIcons();
-    return;
-  }
-
-  container.innerHTML = '<div class="file-viewer">' +
-    '<div class="file-viewer-header">' +
-    '<h3>' + escapeHtml(selectedFile.name) + '</h3>' +
-    '<div class="file-viewer-actions">' +
-    '<button class="btn btn-sm btn-secondary" onclick="copyFileContent()" title="' + t('claude.copyContent') + '">' +
-    '<i data-lucide="copy" class="w-4 h-4"></i>' +
-    '</button>' +
-    '<button class="btn btn-sm btn-secondary" onclick="toggleEditMode()" title="' + t('common.edit') + '">' +
-    '<i data-lucide="' + (isEditMode ? 'eye' : 'edit-2') + '" class="w-4 h-4"></i>' +
-    '</button>' +
-    '</div>' +
-    '</div>' +
-    '<div class="file-viewer-content">' +
-    (isEditMode ? renderEditor() : renderMarkdownContent(selectedFile.content || '')) +
-    '</div>' +
-    '</div>';
-
-  if (window.lucide) lucide.createIcons();
-}
-
-function renderMarkdownContent(content) {
-  // Check if marked.js is available for enhanced rendering
-  if (typeof marked !== 'undefined') {
-    try {
-      marked.setOptions({
-        gfm: true,
-        breaks: true,
-        tables: true,
-        smartLists: true,
-        highlight: function(code, lang) {
-          // Check if highlight.js or Prism is available
-          if (typeof hljs !== 'undefined' && lang) {
-            try {
-              return hljs.highlight(code, { language: lang }).value;
-            } catch (e) {
-              return escapeHtml(code);
-            }
-          } else if (typeof Prism !== 'undefined' && lang && Prism.languages[lang]) {
-            return Prism.highlight(code, Prism.languages[lang], lang);
-          }
-          return escapeHtml(code);
-        }
-      });
-      return '<div class="markdown-content">' + marked.parse(content) + '</div>';
-    } catch (e) {
-      console.error('Error rendering markdown with marked.js:', e);
-    }
-  }
-
-  // Fallback: Enhanced basic rendering
-  var html = escapeHtml(content);
-
-  // Headers
-  html = html
-    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-    .replace(/^#### (.*$)/gim, '<h4>$1</h4>');
-
-  // Inline formatting
-  html = html
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`([^`]+)`/g, '<code>$1</code>');
-
-  // Links
-  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
-
-  // Task lists
-  html = html
-    .replace(/- \[ \] (.+)$/gim, '<li class="task-list-item"><input type="checkbox" disabled> $1</li>')
-    .replace(/- \[x\] (.+)$/gim, '<li class="task-list-item"><input type="checkbox" disabled checked> $1</li>');
-
-  // Lists
-  html = html.replace(/^- (.+)$/gim, '<li>$1</li>');
-  html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
-
-  // Code blocks
-  html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, function(match, lang, code) {
-    return '<pre><code class="language-' + (lang || 'plaintext') + '">' + code + '</code></pre>';
-  });
-
-  // Line breaks
-  html = html.replace(/\n/g, '<br>');
-
-  return '<div class="markdown-content">' + html + '</div>';
-}
-
-function renderEditor() {
-  return '<textarea id="claudeFileEditor" class="file-editor" ' +
-    'oninput="markDirty()">' +
-    escapeHtml(selectedFile.content || '') +
-    '</textarea>';
-}
-
-function toggleEditMode() {
-  if (isEditMode && isDirty) {
-    if (!confirm(t('claudeManager.unsavedChanges'))) {
-      return;
-    }
-  }
-
-  isEditMode = !isEditMode;
-  isDirty = false;
-  renderFileViewer();
-}
-
-function markDirty() {
-  isDirty = true;
-}
-
-async function saveClaudeFile() {
-  if (!selectedFile || !isEditMode) return;
-
-  var editor = document.getElementById('claudeFileEditor');
-  if (!editor) return;
-
-  var newContent = editor.value;
-
-  try {
-    var res = await fetch('/api/memory/claude/file', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        path: selectedFile.path,
-        content: newContent,
-        createBackup: true
-      })
-    });
-
-    if (!res.ok) throw new Error('Failed to save file');
-
-    selectedFile.content = newContent;
-    selectedFile.stats = calculateFileStats(newContent);
-    isDirty = false;
-
-    addGlobalNotification('success', t('claudeManager.saved'), null, 'CLAUDE.md');
-    renderFileMetadata();
-  } catch (error) {
-    console.error('Error saving file:', error);
-    addGlobalNotification('error', t('claudeManager.saveError'), null, 'CLAUDE.md');
-  }
-}
-
-function calculateFileStats(content) {
-  var lines = content.split('\n').length;
-  var words = content.split(/\s+/).filter(function (w) { return w.length > 0; }).length;
-  var characters = content.length;
-  return { lines: lines, words: words, characters: characters };
-}
-
-// ========== File Metadata Rendering ==========
-function renderFileMetadata() {
-  var container = document.getElementById('claude-file-metadata');
-  if (!container) return;
-
-  if (!selectedFile) {
-    container.innerHTML = '<div class="empty-state">' +
-      '<i data-lucide="info" class="w-8 h-8 opacity-20"></i>' +
-      '<p>' + t('claudeManager.noMetadata') + '</p>' +
-      '</div>';
-    if (window.lucide) lucide.createIcons();
-    return;
-  }
-
-  var html = '<div class="file-metadata">' +
-    '<div class="metadata-section">' +
-    '<h4>' + t('claudeManager.fileInfo') + '</h4>' +
-    '<div class="metadata-item">' +
-    '<span class="label">' + t('claudeManager.level') + '</span>' +
-    '<span class="value">' + t('claudeManager.level_' + selectedFile.level) + '</span>' +
-    '</div>' +
-    '<div class="metadata-item">' +
-    '<span class="label">' + t('claudeManager.path') + '</span>' +
-    '<span class="value path">' + escapeHtml(selectedFile.relativePath) + '</span>' +
-    '</div>' +
-    '<div class="metadata-item">' +
-    '<span class="label">' + t('claudeManager.size') + '</span>' +
-    '<span class="value">' + formatFileSize(selectedFile.size) + '</span>' +
-    '</div>' +
-    '<div class="metadata-item">' +
-    '<span class="label">' + t('claudeManager.modified') + '</span>' +
-    '<span class="value">' + formatDate(selectedFile.lastModified) + '</span>' +
-    '</div>' +
-    '</div>';
-
-  if (selectedFile.stats) {
-    html += '<div class="metadata-section">' +
-      '<h4>' + t('claudeManager.statistics') + '</h4>' +
-      '<div class="metadata-item">' +
-      '<span class="label">' + t('claudeManager.lines') + '</span>' +
-      '<span class="value">' + selectedFile.stats.lines + '</span>' +
-      '</div>' +
-      '<div class="metadata-item">' +
-      '<span class="label">' + t('claudeManager.words') + '</span>' +
-      '<span class="value">' + selectedFile.stats.words + '</span>' +
-      '</div>' +
-      '<div class="metadata-item">' +
-      '<span class="label">' + t('claudeManager.characters') + '</span>' +
-      '<span class="value">' + selectedFile.stats.characters + '</span>' +
-      '</div>' +
-      '</div>';
-  }
-
-  // Freshness section
-  var fd = freshnessData[selectedFile.path];
-  var freshnessLoaded = freshnessSummary !== null || Object.keys(freshnessData).length > 0;
-
-  if (fd) {
-    var freshnessBarClass = fd.freshness >= 75 ? 'good' : fd.freshness >= 50 ? 'warn' : 'stale';
-    html += '<div class="metadata-section freshness-section">' +
-      '<h4><i data-lucide="activity" class="w-4 h-4"></i> ' + (t('claudeManager.freshness') || 'Freshness') + '</h4>' +
-      '<div class="freshness-gauge">' +
-      '<div class="freshness-bar ' + freshnessBarClass + '" style="width: ' + fd.freshness + '%"></div>' +
-      '</div>' +
-      '<div class="freshness-value-display">' + fd.freshness + '%</div>' +
-      '<div class="metadata-item">' +
-      '<span class="label">' + (t('claudeManager.lastContentUpdate') || 'Last Content Update') + '</span>' +
-      '<span class="value">' + (fd.lastUpdated ? formatDate(fd.lastUpdated) : (t('claudeManager.never') || 'Never tracked')) + '</span>' +
-      '</div>' +
-      '<div class="metadata-item">' +
-      '<span class="label">' + (t('claudeManager.changedFiles') || 'Changed Files') + '</span>' +
-      '<span class="value">' + fd.changedFilesCount + ' ' + (t('claudeManager.filesSinceUpdate') || 'files since update') + '</span>' +
-      '</div>';
-
-    if (fd.needsUpdate) {
-      html += '<div class="update-reminder">' +
-        '<i data-lucide="alert-triangle" class="w-4 h-4"></i>' +
-        '<span>' + (t('claudeManager.updateReminder') || 'This file may need updating') + '</span>' +
-        '</div>';
-    }
-
-    html += '<button class="btn btn-sm btn-secondary full-width" onclick="markFileAsUpdated()">' +
-      '<i data-lucide="check-circle" class="w-4 h-4"></i> ' + (t('claudeManager.markAsUpdated') || 'Mark as Updated') +
-      '</button>' +
-      '</div>';
-  } else if (!freshnessLoaded) {
-    // Show loading state while freshness data is being fetched
-    html += '<div class="metadata-section freshness-section">' +
-      '<h4><i data-lucide="activity" class="w-4 h-4"></i> ' + (t('claudeManager.freshness') || 'Freshness') + '</h4>' +
-      '<div class="freshness-loading">' +
-      '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>' +
-      '<span>' + (t('claudeManager.loadingFreshness') || 'Loading freshness data...') + '</span>' +
-      '</div>' +
-      '</div>';
-  }
-
-  html += '<div class="metadata-section">' +
-    '<h4>' + t('claudeManager.actions') + '</h4>';
-
-  if (isEditMode) {
-    html += '<button class="btn btn-sm btn-primary full-width" onclick="saveClaudeFile()"' +
-      (isDirty ? '' : ' disabled') + '>' +
-      '<i data-lucide="save" class="w-4 h-4"></i> ' + t('common.save') +
-      '</button>';
-    html += '<button class="btn btn-sm btn-secondary full-width" onclick="toggleEditMode()">' +
-      '<i data-lucide="x" class="w-4 h-4"></i> ' + t('common.cancel') +
-      '</button>';
-  } else {
-    html += '<button class="btn btn-sm btn-secondary full-width" onclick="toggleEditMode()">' +
-      '<i data-lucide="edit-2" class="w-4 h-4"></i> ' + t('common.edit') +
-      '</button>';
-  }
-
-  // Delete button (only for CLAUDE.md files, not in edit mode)
-  if (!isEditMode && selectedFile.level !== 'file') {
-    html += '<button class="btn btn-sm btn-danger full-width" onclick="confirmDeleteFile()">' +
-      '<i data-lucide="trash-2" class="w-4 h-4"></i> ' + t('claude.deleteFile') +
-      '</button>';
-  }
-
-  html += '</div>'; // end actions section
-
-  // CLI Sync Panel
-  html += '<div class="metadata-section cli-sync-panel">' +
-    '<div class="panel-header">' +
-    '<i data-lucide="sparkles" class="w-4 h-4"></i>' +
-    '<span>' + (t('claude.cliSync') || 'CLI Auto-Sync') + '</span>' +
-    '</div>' +
-    '<div class="sync-config">' +
-    '<label>' + (t('claude.tool') || 'Tool') + '</label>' +
-    '<select id="cliToolSelect" class="sync-select">' +
-    '<option value="gemini">Gemini</option>' +
-    '<option value="qwen">Qwen</option>' +
-    '</select>' +
-    '<label>' + (t('claude.mode') || 'Mode') + '</label>' +
-    '<select id="cliModeSelect" class="sync-select">' +
-    '<option value="update">' + (t('claude.modeUpdate') || 'Update (Smart Merge)') + '</option>' +
-    '<option value="generate">' + (t('claude.modeGenerate') || 'Generate (Full Replace)') + '</option>' +
-    '<option value="append">' + (t('claude.modeAppend') || 'Append') + '</option>' +
-    '</select>' +
-    '</div>' +
-    '<button class="btn btn-sm btn-primary full-width sync-button" onclick="syncFileWithCLI()" id="cliSyncButton">' +
-    '<i data-lucide="refresh-cw" class="w-4 h-4"></i> ' +
-    (t('claude.syncButton') || 'Sync with CLI') +
-    '</button>' +
-    '<div id="syncProgress" class="sync-progress" style="display:none;">' +
-    '<i data-lucide="loader" class="w-4 h-4"></i>' +
-    '<span id="syncProgressText">' + (t('claude.syncing') || 'Analyzing...') + '</span>' +
-    '</div>' +
-    '</div>'; // end cli-sync-panel
-
-  html += '</div>'; // end file-metadata
-
-  container.innerHTML = html;
-  if (window.lucide) lucide.createIcons();
-}
-
-// ========== CLI Sync Functions ==========
-async function syncFileWithCLI() {
-  if (!selectedFile) return;
-
-  var tool = document.getElementById('cliToolSelect').value;
-  var mode = document.getElementById('cliModeSelect').value;
-
-  // Show progress
-  showSyncProgress(true, tool);
-
-  // Disable sync button
-  var syncButton = document.getElementById('cliSyncButton');
-  if (syncButton) syncButton.disabled = true;
-
-  try {
-    var response = await fetch('/api/memory/claude/sync', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        level: selectedFile.level,
-        path: selectedFile.level === 'module' ? selectedFile.path.replace(/CLAUDE\.md$/, '').replace(/\/$/, '') : undefined,
-        tool: tool,
-        mode: mode
-      })
-    });
-
-    var result = await response.json();
-
-    if (result.success) {
-      // Reload file content and freshness data
-      var fileData = await loadFileContent(selectedFile.path);
-      if (fileData) {
-        selectedFile = fileData;
-        await loadFreshnessData();
-        renderFileTree();
-        renderFileViewer();
-        renderFileMetadata();
-      }
-      showClaudeNotification('success', (t('claude.syncSuccess') || 'Synced successfully').replace('{file}', selectedFile.name));
-    } else {
-      showClaudeNotification('error', (t('claude.syncError') || 'Sync failed').replace('{error}', result.error || 'Unknown error'));
-    }
-  } catch (error) {
-    console.error('CLI sync error:', error);
-    showClaudeNotification('error', (t('claude.syncError') || 'Sync failed').replace('{error}', error.message));
-  } finally {
-    showSyncProgress(false);
-    if (syncButton) syncButton.disabled = false;
-  }
-}
-
-function showSyncProgress(show, tool) {
-  var progressEl = document.getElementById('syncProgress');
-  var progressText = document.getElementById('syncProgressText');
-  if (!progressEl) return;
-
-  if (show) {
-    progressEl.style.display = 'flex';
-    if (progressText) {
-      var text = (t('claude.syncing') || 'Analyzing with {tool}...').replace('{tool}', tool || 'CLI');
-      progressText.textContent = text;
-    }
-    if (window.lucide) lucide.createIcons();
-  } else {
-    progressEl.style.display = 'none';
-  }
-}
-
-async function loadFileContent(filePath) {
-  try {
-    var res = await fetch('/api/memory/claude/file?path=' + encodeURIComponent(filePath));
-    if (!res.ok) return null;
-    return await res.json();
-  } catch (error) {
-    console.error('Error loading file content:', error);
-    return null;
-  }
-}
-
-function showClaudeNotification(type, message) {
-  // Use global notification system if available
-  if (typeof addGlobalNotification === 'function') {
-    addGlobalNotification(type, message, null, 'CLAUDE.md');
-  } else {
-    // Fallback to simple alert
-    alert(message);
-  }
-}
-
-// ========== Search Functions ==========
-function filterFileTree(query) {
-  searchQuery = query.toLowerCase();
-  renderFileTree();
-
-  // Add keyboard shortcut handler
-  if (query && !window.claudeSearchKeyboardHandlerAdded) {
-    document.addEventListener('keydown', handleSearchKeyboard);
-    window.claudeSearchKeyboardHandlerAdded = true;
-  }
-}
-
-function handleSearchKeyboard(e) {
-  // Ctrl+F or Cmd+F
-  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
-    e.preventDefault();
-    var searchInput = document.getElementById('fileSearchInput');
-    if (searchInput) {
-      searchInput.focus();
-      searchInput.select();
-    }
-  }
-}
-
-// ========== File Creation Functions ==========
-function showCreateFileDialog() {
-  var dialog = '<div class="modal-overlay" onclick="closeCreateDialog()">' +
-    '<div class="create-dialog" onclick="event.stopPropagation()">' +
-    '<h3>' + t('claude.createDialogTitle') + '</h3>' +
-    '<div class="dialog-form">' +
-    '<label>' + t('claude.selectLevel') + '</label>' +
-    '<select id="createLevel" onchange="toggleModulePathInput(this.value)">' +
-    '<option value="user">' + t('claude.levelUser') + '</option>' +
-    '<option value="project">' + t('claude.levelProject') + '</option>' +
-    '<option value="module">' + t('claude.levelModule') + '</option>' +
-    '</select>' +
-    '<label id="modulePathLabel" style="display:none;">' + t('claude.modulePath') + '</label>' +
-    '<input id="modulePath" type="text" style="display:none;" placeholder="e.g., src/components">' +
-    '<label>' + t('claude.selectTemplate') + '</label>' +
-    '<select id="createTemplate">' +
-    '<option value="default">' + t('claude.templateDefault') + '</option>' +
-    '<option value="minimal">' + t('claude.templateMinimal') + '</option>' +
-    '<option value="comprehensive">' + t('claude.templateComprehensive') + '</option>' +
-    '</select>' +
-    '</div>' +
-    '<div class="dialog-buttons">' +
-    '<button onclick="closeCreateDialog()" class="btn btn-sm btn-secondary">' + t('common.cancel') + '</button>' +
-    '<button onclick="createNewFile()" class="btn btn-sm btn-primary">' + t('claude.createFile') + '</button>' +
-    '</div>' +
-    '</div>' +
-    '</div>';
-
-  document.body.insertAdjacentHTML('beforeend', dialog);
-  if (window.lucide) lucide.createIcons();
-}
-
-function closeCreateDialog() {
-  var overlay = document.querySelector('.modal-overlay');
-  if (overlay) overlay.remove();
-}
-
-function toggleModulePathInput(level) {
-  var pathLabel = document.getElementById('modulePathLabel');
-  var pathInput = document.getElementById('modulePath');
-
-  if (level === 'module') {
-    pathLabel.style.display = 'block';
-    pathInput.style.display = 'block';
-  } else {
-    pathLabel.style.display = 'none';
-    pathInput.style.display = 'none';
-  }
-}
-
-async function createNewFile() {
-  var level = document.getElementById('createLevel').value;
-  var template = document.getElementById('createTemplate').value;
-  var modulePath = document.getElementById('modulePath').value;
-
-  if (level === 'module' && !modulePath) {
-    addGlobalNotification('error', t('claude.modulePathRequired') || 'Module path is required', null, 'CLAUDE.md');
-    return;
-  }
-
-  try {
-    var res = await fetch('/api/memory/claude/create', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        level: level,
-        path: modulePath || undefined,
-        template: template
-      })
-    });
-
-    if (!res.ok) throw new Error('Failed to create file');
-
-    var result = await res.json();
-    closeCreateDialog();
-    addGlobalNotification('success', t('claude.fileCreated') || 'File created successfully', null, 'CLAUDE.md');
-
-    // Refresh file tree
-    await refreshClaudeFiles();
-  } catch (error) {
-    console.error('Error creating file:', error);
-    addGlobalNotification('error', t('claude.createFileError') || 'Failed to create file', null, 'CLAUDE.md');
-  }
-}
-
-// ========== File Deletion Functions ==========
-async function confirmDeleteFile() {
-  if (!selectedFile) return;
-
-  var confirmed = confirm(
-    (t('claude.deleteConfirm') || 'Are you sure you want to delete {file}?').replace('{file}', selectedFile.name) + '\n\n' +
-    'Path: ' + selectedFile.path + '\n\n' +
-    (t('claude.deleteWarning') || 'This action cannot be undone.')
-  );
-
-  if (!confirmed) return;
-
-  try {
-    var res = await fetch('/api/memory/claude/file?path=' + encodeURIComponent(selectedFile.path) + '&confirm=true', {
-      method: 'DELETE'
-    });
-
-    if (!res.ok) throw new Error('Failed to delete file');
-
-    addGlobalNotification('success', t('claude.fileDeleted') || 'File deleted successfully', null, 'CLAUDE.md');
-    selectedFile = null;
-
-    // Refresh file tree
-    await refreshClaudeFiles();
-  } catch (error) {
-    console.error('Error deleting file:', error);
-    addGlobalNotification('error', t('claude.deleteFileError') || 'Failed to delete file', null, 'CLAUDE.md');
-  }
-}
-
-// ========== Copy Content Function ==========
-function copyFileContent() {
-  if (!selectedFile || !selectedFile.content) return;
-
-  navigator.clipboard.writeText(selectedFile.content).then(function() {
-    addGlobalNotification('success', t('claude.contentCopied') || 'Content copied to clipboard', null, 'CLAUDE.md');
-  }).catch(function(error) {
-    console.error('Error copying content:', error);
-    addGlobalNotification('error', t('claude.copyError') || 'Failed to copy content', null, 'CLAUDE.md');
-  });
-}
-
-// ========== Utility Functions ==========
-// Note: escapeHtml and formatDate are imported from utils.js
-
-function formatFileSize(bytes) {
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-// Update navigation badge with total file count
-function updateClaudeBadge() {
-  var badge = document.getElementById('badgeClaude');
-  if (badge && claudeFilesData && claudeFilesData.summary) {
-    var total = claudeFilesData.summary.totalFiles;
-    badge.textContent = total;
-  }
-}