Upload 2 files

static/js/app.js

@@ -0,0 +1,847 @@
+const LOCAL_STORAGE_KEY = 'treeState';
+
+// State Management
+const Store = (function () {
+  let instance;
+  let subscribers = new Set();
+
+  // We'll keep an initialState here
+  const initialState = {
+    root: null,
+    selectedPaths: new Set(),
+    fileContents: {},
+    expandedNodes: new Set(),
+    stats: {
+      selectedCount: 0,
+      totalTokens: 0,
+    },
+  };
+
+  function createInstance() {
+    let state = Object.freeze({ ...initialState, ...loadState() });
+
+    return {
+      getState() {
+        // Return a shallow clone or structured clone:
+        // but in a big app, you might just return references 
+        // to reduce overhead. For now, keep a safe copy.
+        return structuredClone(state);
+      },
+
+      dispatch(action) {
+        // Instead of multiple calls, we expect a single "mutation function"
+        const draft = structuredClone(state);
+        action(draft);
+
+        // Freeze next state to maintain immutability
+        const nextState = Object.freeze(draft);
+
+        if (nextState !== state) {
+          state = nextState;
+          this.notify();
+          saveState(state);
+        }
+      },
+
+      subscribe(callback) {
+        subscribers.add(callback);
+        return () => subscribers.delete(callback);
+      },
+
+      notify() {
+        subscribers.forEach((callback) => callback(state));
+      },
+    };
+  }
+
+  function saveState(state) {
+    const serializedState = {
+      ...state,
+      selectedPaths: Array.from(state.selectedPaths),
+      expandedNodes: Array.from(state.expandedNodes),
+    };
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(serializedState));
+  }
+
+  function loadState() {
+    const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!saved) return {};
+
+    const state = JSON.parse(saved);
+    return {
+      ...state,
+      selectedPaths: new Set(state.selectedPaths),
+      expandedNodes: new Set(state.expandedNodes),
+    };
+  }
+
+  return {
+    getInstance() {
+      if (!instance) {
+        instance = createInstance();
+      }
+      return instance;
+    },
+  };
+})();
+
+// Actions
+const actions = {
+  setRoot: (root) => (state) => {
+    state.root = root;
+  },
+
+  // Instead of toggling each item repeatedly, we accept an array or set of paths
+  // to add or remove in a single batch.
+  bulkSelectPaths: (pathsToSelect = [], pathsToDeselect = []) => (state) => {
+    for (const path of pathsToSelect) {
+      state.selectedPaths.add(path);
+    }
+    for (const path of pathsToDeselect) {
+      state.selectedPaths.delete(path);
+    }
+  },
+
+  // Toggling a single path is still allowed, but we generally encourage 
+  // single dispatch usage with "bulkSelectPaths".
+  toggleSelected: (path, selected) => (state) => {
+    if (selected) {
+      state.selectedPaths.add(path);
+    } else {
+      state.selectedPaths.delete(path);
+    }
+  },
+
+  toggleExpanded: (path) => (state) => {
+    if (state.expandedNodes.has(path)) {
+      state.expandedNodes.delete(path);
+    } else {
+      state.expandedNodes.add(path);
+    }
+  },
+
+  setExpanded: (path, expand) => (state) => {
+    if (expand) {
+      state.expandedNodes.add(path);
+    } else {
+      state.expandedNodes.delete(path);
+    }
+  },
+
+  setFileContents: (path, content) => (state) => {
+    state.fileContents[path] = content;
+  },
+
+  updateStats: () => (state) => {
+    state.stats.selectedCount = state.selectedPaths.size;
+    state.stats.totalTokens = calculateTokens(state.fileContents, state.selectedPaths);
+  },
+
+  reset: () => (state) => {
+    // Re-initialize everything to the original initialState
+    state.root = null;
+    state.selectedPaths = new Set();
+    state.fileContents = {};
+    state.expandedNodes = new Set();
+    state.stats.selectedCount = 0;
+    state.stats.totalTokens = 0;
+  },
+
+  bulkSetExpanded: (pathsToExpand = [], pathsToCollapse = []) => (state) => {
+    for (const path of pathsToExpand) {
+      state.expandedNodes.add(path);
+    }
+    for (const path of pathsToCollapse) {
+      state.expandedNodes.delete(path);
+    }
+  },
+};
+
+// Helper: determine if a file is a spreadsheet
+function isSpreadsheet(filename) {
+  if (!filename) return false;
+
+  const spreadsheetExtensions = [
+    '.xls', '.xlsx', '.xlsm', '.xlsb', 
+    '.xlt', '.ods', '.fods', '.numbers',
+  ];
+  const lower = filename.toLowerCase();
+  return spreadsheetExtensions.some((ext) => lower.endsWith(ext));
+}
+
+// Helper: determine if a file is a PDF
+function isPDF(filename) {
+  if (!filename) return false;
+  return filename.toLowerCase().endsWith('.pdf');
+}
+
+// Parse PDF file
+async function parsePDFFile(file) {
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const typedArray = new Uint8Array(arrayBuffer);
+    const loadingTask = pdfjsLib.getDocument({ data: typedArray });
+    const pdf = await loadingTask.promise;
+    let textOutput = '';
+
+    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+      const page = await pdf.getPage(pageNum);
+      const textContent = await page.getTextContent();
+
+      // Filter out empty strings and join with proper spacing
+      const pageText = textContent.items
+        .filter((item) => item.str.trim().length > 0)
+        .map((item) => {
+          // Handle different types of spaces and line breaks
+          if (item.hasEOL) return item.str + '\n';
+          return item.str + ' ';
+        })
+        .join('')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+      if (pageText) {
+        textOutput += pageText + '\n\n';
+      }
+    }
+
+    return textOutput.trim();
+  } catch (err) {
+    console.error('PDF parsing error:', err);
+    throw new Error(`Failed to parse PDF: ${err.message}`);
+  }
+}
+
+// Parse spreadsheet file
+async function parseSpreadsheetFile(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = new Uint8Array(e.target.result);
+        const workbook = XLSX.read(data, { type: 'array' });
+        let textOutput = '';
+
+        // Convert each sheet in the workbook to CSV and append
+        workbook.SheetNames.forEach((sheetName) => {
+          const worksheet = workbook.Sheets[sheetName];
+          const csv = XLSX.utils.sheet_to_csv(worksheet);
+          textOutput += `Sheet: ${sheetName}\n${csv}\n\n`;
+        });
+
+        resolve(textOutput.trim());
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.onerror = (err) => reject(err);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+class FileTreeViewer {
+  constructor(store) {
+    this.store = store;
+    this.container = document.getElementById('fileTree');
+
+    // Adjust these ignored paths as needed
+    this.IGNORED_DIRECTORIES = ['node_modules', 'venv', '.git', '__pycache__', '.idea', '.vscode'];
+    this.IGNORED_FILES = [
+      '.DS_Store',
+      'Thumbs.db',
+      '.env',
+      '.pyc',
+      '.jpg',
+      '.jpeg',
+      '.png',
+      '.gif',
+      '.mp4',
+      '.mov',
+      '.avi',
+      '.webp',
+      '.mkv',
+      '.wmv',
+      '.flv',
+      '.svg',
+      '.zip',
+      '.tar',
+      '.gz',
+      '.rar',
+      '.exe',
+      '.bin',
+      '.iso',
+      '.dll',
+      '.psd',
+      '.ai',
+      '.eps',
+      '.tiff',
+      '.woff',
+      '.woff2',
+      '.ttf',
+      '.otf',
+      '.flac',
+      '.m4a',
+      '.aac',
+      '.mov',
+      '.3gp',
+    ];
+
+    // Add LIKELY_TEXT_FILES list
+    this.LIKELY_TEXT_FILES = [
+      '.txt', '.md', '.markdown', '.json', '.js', '.ts', '.jsx', '.tsx',
+      '.css', '.scss', '.sass', '.less', '.html', '.htm', '.xml', '.yaml',
+      '.yml', '.ini', '.conf', '.cfg', '.config', '.py', '.rb', '.php',
+      '.java', '.c', '.cpp', '.h', '.hpp', '.cs', '.go', '.rs', '.swift',
+      '.kt', '.kts', '.sh', '.bash', '.zsh', '.fish', '.sql', '.graphql',
+      '.vue', '.svelte', '.astro', '.env.example', '.gitignore', '.dockerignore',
+      '.editorconfig', '.eslintrc', '.prettierrc', '.babelrc', 'LICENSE',
+      'README', 'CHANGELOG', 'TODO', '.csv', '.tsv'
+    ];
+
+    // Subscribe to store updates
+    this.store.subscribe(this.handleStateChange.bind(this));
+    this.setupEventListeners();
+  }
+
+  async isTextFile(file) {
+    // First check known text extensions
+    if (this.LIKELY_TEXT_FILES.some(ext => 
+      file.name.toLowerCase().endsWith(ext.toLowerCase())
+    )) {
+      return true;
+    }
+
+    // Then check spreadsheets and PDFs
+    if (isSpreadsheet(file.name) || isPDF(file.name)) {
+      return true;
+    }
+
+    // Fall back to content analysis for unknown extensions
+    const slice = file.slice(0, 4096);
+    const text = await slice.text();
+    const printableChars = text.match(/[\x20-\x7E\n\r\t\u00A0-\u02AF\u0370-\u1CFF]/g);
+    return printableChars && printableChars.length / text.length > 0.7;
+  }
+
+  async handleFileSelect(event) {
+    const files = Array.from(event.target.files || []).filter(
+      (file) =>
+        !this.IGNORED_DIRECTORIES.some((dir) => file.webkitRelativePath.split('/').includes(dir)) &&
+        !this.IGNORED_FILES.some((ignoredFile) => {
+          // If ignoredFile starts with a dot, treat it as an extension
+          if (ignoredFile.startsWith('.')) {
+            return file.name.toLowerCase().endsWith(ignoredFile.toLowerCase());
+          }
+          // Otherwise, do an exact filename match
+          return file.name === ignoredFile;
+        })
+    );
+
+    if (!files.length) return;
+
+    // Determine if each file is text
+    const fileTypeMap = new Map();
+    for (const file of files) {
+      fileTypeMap.set(file.webkitRelativePath, await this.isTextFile(file));
+    }
+
+    // Build the root tree structure
+    const root = this.buildFileTree(files, fileTypeMap);
+    this.store.dispatch(actions.setRoot(root));
+
+    // Parse file contents in batch
+    for (const file of files) {
+      if (!fileTypeMap.get(file.webkitRelativePath)) {
+        continue; // skip binary or unsupported
+      }
+
+      let text = '';
+      if (isSpreadsheet(file.name)) {
+        text = await parseSpreadsheetFile(file);
+      } else if (isPDF(file.name)) {
+        text = await parsePDFFile(file);
+      } else {
+        text = await file.text();
+      }
+
+      this.store.dispatch(actions.setFileContents(file.webkitRelativePath, text));
+    }
+
+    this.store.dispatch(actions.updateStats());
+    event.target.value = '';
+  }
+
+  buildFileTree(files, fileTypeMap) {
+    // The first part (index 0) is the root folder name
+    // This is a naive approach if multiple top-level folders are possible 
+    // but usually there's one main folder from the input.
+    const root = {
+      name: files[0].webkitRelativePath.split('/')[0],
+      path: files[0].webkitRelativePath.split('/')[0],
+      isDir: true,
+      children: [],
+    };
+
+    files.forEach((file) => {
+      const pathParts = file.webkitRelativePath.split('/');
+      let currentNode = root;
+
+      pathParts.forEach((part, index) => {
+        if (index === 0) return;
+
+        const currentPath = pathParts.slice(0, index + 1).join('/');
+
+        if (index === pathParts.length - 1) {
+          const isTextFile = fileTypeMap.get(file.webkitRelativePath);
+          currentNode.children.push({
+            name: part,
+            path: currentPath,
+            isDir: false,
+            size: file.size,
+            isTextFile,
+          });
+        } else {
+          let childNode = currentNode.children.find((n) => n.name === part);
+          if (!childNode) {
+            childNode = {
+              name: part,
+              path: currentPath,
+              isDir: true,
+              children: [],
+            };
+            currentNode.children.push(childNode);
+          }
+          currentNode = childNode;
+        }
+      });
+    });
+
+    return root;
+  }
+
+  renderTree() {
+    const state = this.store.getState();
+    if (!state.root) {
+      this.container.innerHTML =
+        '<div class="upload-message">Select a directory to view its contents</div>';
+      return;
+    }
+
+    // We'll do a single pass to compute each node's selection state
+    // so we don't repeatedly call expensive functions in `renderNode`.
+    const selectionMap = this.computeSelectionStates(state);
+
+    // Render the tree HTML
+    this.container.innerHTML = this.renderNode(state.root, selectionMap);
+
+    // After the container has been populated, set `indeterminate` on each checkbox
+    const allCheckboxes = this.container.querySelectorAll('.tree-checkbox');
+    allCheckboxes.forEach((checkbox) => {
+      const isIndeterminate = checkbox.getAttribute('data-indeterminate') === 'true';
+      checkbox.indeterminate = isIndeterminate;
+    });
+  }
+
+  // Single pass to compute each node's "checked" and "indeterminate" state:
+  computeSelectionStates(state) {
+    // We'll store a map of path -> { checked: bool, indeterminate: bool }
+    const selectionMap = {};
+
+    // Recursive function that returns { totalFiles, selectedFiles }
+    // so we can compute folder selection state in one pass.
+    const computeStateForNode = (node) => {
+      if (!node.isDir) {
+        if (node.isTextFile && state.selectedPaths.has(node.path)) {
+          // 1 selected file
+          selectionMap[node.path] = { checked: true, indeterminate: false };
+          return { totalFiles: 1, selectedFiles: 1 };
+        } else {
+          selectionMap[node.path] = { checked: false, indeterminate: false };
+          return { totalFiles: node.isTextFile ? 1 : 0, selectedFiles: 0 };
+        }
+      }
+
+      let total = 0;
+      let selected = 0;
+      node.children?.forEach((child) => {
+        const result = computeStateForNode(child);
+        total += result.totalFiles;
+        selected += result.selectedFiles;
+      });
+
+      if (total > 0 && selected === total) {
+        selectionMap[node.path] = { checked: true, indeterminate: false };
+      } else if (selected > 0 && selected < total) {
+        selectionMap[node.path] = { checked: false, indeterminate: true };
+      } else {
+        selectionMap[node.path] = { checked: false, indeterminate: false };
+      }
+      return { totalFiles: total, selectedFiles: selected };
+    };
+
+    // Start with root
+    computeStateForNode(state.root);
+    return selectionMap;
+  }
+
+  renderNode(node, selectionMap, level = 0) {
+    const state = this.store.getState();
+    const indent = level * 20;
+    const icon = node.isDir
+      ? state.expandedNodes.has(node.path)
+        ? '📂'
+        : '📁'
+      : node.isTextFile
+      ? '📄'
+      : '📦';
+
+    const selState = selectionMap[node.path] || { checked: false, indeterminate: false };
+
+    let html = `
+      <div class="tree-node" style="margin-left: ${indent}px" data-path="${node.path}">
+        <div class="tree-node-content">
+          ${
+            node.isTextFile !== false
+              ? `
+                <input
+                  type="checkbox"
+                  class="tree-checkbox"
+                  data-path="${node.path}"
+                  ${selState.checked ? 'checked' : ''}
+                  data-indeterminate="${selState.indeterminate}"
+                >
+              `
+              : ''
+          }
+          <span class="tree-node-icon">${icon}</span>
+          <span class="tree-node-name">${node.name}${
+      node.size ? ` (${this.formatSize(node.size)})` : ''
+    }</span>
+        </div>
+      </div>
+    `;
+
+    if (node.isDir && state.expandedNodes.has(node.path) && node.children) {
+      const sortedChildren = [...node.children].sort((a, b) => {
+        if (a.isDir === b.isDir) return a.name.localeCompare(b.name);
+        return b.isDir - a.isDir;
+      });
+
+      sortedChildren.forEach((child) => {
+        html += this.renderNode(child, selectionMap, level + 1);
+      });
+    }
+
+    return html;
+  }
+
+  formatSize(bytes) {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  }
+
+  handleNodeClick(event) {
+    const checkbox = event.target.closest('.tree-checkbox');
+    const content = event.target.closest('.tree-node-content');
+    if (!content) return;
+
+    const path = content.closest('.tree-node').dataset.path;
+    const node = this.findNode(path);
+    if (!node) return;
+
+    if (checkbox) {
+      this.toggleNodeSelection(node);
+    } else if (node.isDir) {
+      // If directory, expand/collapse
+      this.store.dispatch(actions.toggleExpanded(node.path));
+    }
+  }
+
+  toggleNodeSelection(node) {
+    const state = this.store.getState();
+    // We'll do a recursive approach in a single pass, then one dispatch
+    const pathsToSelect = [];
+    const pathsToDeselect = [];
+
+    // Instead of repeated dispatches, gather everything first
+    const recurse = (currentNode) => {
+      if (!currentNode.isDir && currentNode.isTextFile) {
+        // Check if currently selected or not
+        const isCurrentlySelected = state.selectedPaths.has(currentNode.path);
+        if (isCurrentlySelected) {
+          // We'll mark for deselect
+          pathsToDeselect.push(currentNode.path);
+        } else {
+          // We'll mark for select
+          pathsToSelect.push(currentNode.path);
+        }
+      }
+      currentNode.children?.forEach(recurse);
+    };
+
+    if (node.isDir) {
+      // For a folder, we see if it is fully selected 
+      // (meaning all text files are selected)
+      // or partially/none selected -> then we do the opposite.
+      const { totalFiles, selectedFiles } = this.countFiles(node, state.selectedPaths);
+      const isFullySelected = totalFiles > 0 && selectedFiles === totalFiles;
+
+      if (isFullySelected) {
+        // Deselect everything under it
+        const collectAll = (n) => {
+          if (!n.isDir && n.isTextFile) {
+            pathsToDeselect.push(n.path);
+          }
+          n.children?.forEach(collectAll);
+        };
+        collectAll(node);
+      } else {
+        // Select everything under it
+        const collectAll = (n) => {
+          if (!n.isDir && n.isTextFile) {
+            pathsToSelect.push(n.path);
+          }
+          n.children?.forEach(collectAll);
+        };
+        collectAll(node);
+      }
+    } else {
+      // It's a file
+      const isSelected = state.selectedPaths.has(node.path);
+      if (isSelected) {
+        pathsToDeselect.push(node.path);
+      } else {
+        pathsToSelect.push(node.path);
+      }
+    }
+
+    // Now one dispatch for all changes
+    this.store.dispatch(actions.bulkSelectPaths(pathsToSelect, pathsToDeselect));
+    this.store.dispatch(actions.updateStats());
+  }
+
+  findNode(path, node = this.store.getState().root) {
+    if (!node) return null;
+    if (node.path === path) return node;
+    if (!node.children) return null;
+
+    for (const child of node.children) {
+      const found = this.findNode(path, child);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  setupEventListeners() {
+    const directoryInput = document.getElementById('directoryInput');
+    directoryInput.addEventListener('change', (e) => this.handleFileSelect(e));
+
+    document.getElementById('expandAllButton').addEventListener('click', () => this.toggleAll(true));
+    document.getElementById('collapseAllButton').addEventListener('click', () =>
+      this.toggleAll(false)
+    );
+    document.getElementById('selectAllButton').addEventListener('click', () => this.selectAll(true));
+    document.getElementById('deselectAllButton').addEventListener('click', () =>
+      this.selectAll(false)
+    );
+    document.getElementById('clearButton').addEventListener('click', () => this.clearAll());
+    document.getElementById('copyButton').addEventListener('click', () => this.copyToClipboard());
+
+    this.container.addEventListener('click', this.handleNodeClick.bind(this));
+  }
+
+  // Instead of dispatching for every node, we do one pass through the tree
+  // and then dispatch a single bulk update.
+  toggleAll(expand) {
+    const state = this.store.getState();
+    const pathsToExpand = [];
+    const pathsToCollapse = [];
+
+    const gather = (node) => {
+      if (node.isDir) {
+        if (expand) {
+          pathsToExpand.push(node.path);
+        } else {
+          pathsToCollapse.push(node.path);
+        }
+        node.children?.forEach(gather);
+      }
+    };
+
+    if (state.root) {
+      gather(state.root);
+      // Single dispatch for all changes
+      this.store.dispatch(actions.bulkSetExpanded(pathsToExpand, pathsToCollapse));
+    }
+  }
+
+  // Single pass for selectAll or deselectAll
+  selectAll(select) {
+    const state = this.store.getState();
+    const pathsToSelect = [];
+    const pathsToDeselect = [];
+
+    const gather = (node) => {
+      if (!node.isDir && node.isTextFile) {
+        const isSelected = state.selectedPaths.has(node.path);
+        if (select && !isSelected) {
+          pathsToSelect.push(node.path);
+        } else if (!select && isSelected) {
+          pathsToDeselect.push(node.path);
+        }
+      }
+      node.children?.forEach(gather);
+    };
+
+    if (state.root) {
+      gather(state.root);
+      // Single dispatch
+      this.store.dispatch(actions.bulkSelectPaths(pathsToSelect, pathsToDeselect));
+      this.store.dispatch(actions.updateStats());
+    }
+  }
+
+  clearAll() {
+    this.store.dispatch(actions.reset());
+    document.getElementById('directoryInput').value = '';
+    document.getElementById('selectedFilesContent').textContent = '';
+    this.renderTree();
+    this.updateUI();
+    // delete the local storage key
+    localStorage.removeItem(LOCAL_STORAGE_KEY);
+  }
+
+  copyToClipboard() {
+    const content = this.generateSelectedContent();
+    navigator.clipboard.writeText(content).then(() => {
+      const button = document.getElementById('copyButton');
+      button.textContent = 'Copied!';
+      setTimeout(() => (button.textContent = 'Copy to Clipboard'), 2000);
+    });
+  }
+
+  generateSelectedContent() {
+    const state = this.store.getState();
+    if (!state.root) return '';
+
+    const content = [];
+    content.push(`<folder-structure>\n${this.generateAsciiTree()}\n</folder-structure>`);
+
+    for (const path of state.selectedPaths) {
+      const text = state.fileContents[path];
+      if (text) {
+        content.push(`<document path="${path}">\n${text}\n</document>`);
+      }
+    }
+
+    return content.join('\n\n');
+  }
+
+  generateAsciiTree() {
+    const state = this.store.getState();
+    if (!state.root) return '';
+
+    const generateBranch = (node, prefix = '', isLast = true) => {
+      // If neither this node nor its descendants are selected, skip
+      const nodeSelected = state.selectedPaths.has(node.path);
+      const descendantSelected = this.hasSelectedDescendant(node, state.selectedPaths);
+      if (!nodeSelected && !descendantSelected) {
+        return '';
+      }
+
+      const connector = isLast ? '└── ' : '├── ';
+      const childPrefix = isLast ? '    ' : '│   ';
+      let result = prefix + connector + node.name + '\n';
+
+      if (node.children) {
+        const visibleChildren = node.children.filter(
+          (child) => state.selectedPaths.has(child.path) || this.hasSelectedDescendant(child, state.selectedPaths)
+        );
+
+        visibleChildren.forEach((child, index) => {
+          result += generateBranch(
+            child,
+            prefix + childPrefix,
+            index === visibleChildren.length - 1
+          );
+        });
+      }
+
+      return result;
+    };
+
+    return generateBranch(state.root);
+  }
+
+  hasSelectedDescendant(node, selectedPaths) {
+    if (!node.children) return false;
+    return node.children.some(
+      (child) => selectedPaths.has(child.path) || this.hasSelectedDescendant(child, selectedPaths)
+    );
+  }
+
+  // Utility to count how many text files are under this node and 
+  // how many are selected, so we can decide if it's "fully" selected or not.
+  countFiles(node, selectedPaths) {
+    let total = 0;
+    let selected = 0;
+
+    const recurse = (currentNode) => {
+      if (!currentNode.isDir && currentNode.isTextFile) {
+        total++;
+        if (selectedPaths.has(currentNode.path)) {
+          selected++;
+        }
+      }
+      currentNode.children?.forEach(recurse);
+    };
+    recurse(node);
+
+    return { totalFiles: total, selectedFiles: selected };
+  }
+
+  handleStateChange(state) {
+    this.renderTree();
+    this.updateUI();
+    document.getElementById('selectedFilesContent').textContent = this.generateSelectedContent();
+    document.getElementById('selectedCount').textContent = state.stats.selectedCount;
+    document.getElementById('estimatedTokens').textContent = state.stats.totalTokens;
+  }
+
+  updateUI() {
+    const state = this.store.getState();
+    document.getElementById('selectedFilesContent').textContent = this.generateSelectedContent();
+    document.getElementById('selectedCount').textContent = state.stats.selectedCount;
+    document.getElementById('estimatedTokens').textContent = state.stats.totalTokens;
+  }
+}
+
+function calculateTokens(fileContents, selectedPaths) {
+  let totalChars = 0;
+  for (const path of selectedPaths) {
+    const content = fileContents[path];
+    if (content) {
+      totalChars += content.length;
+    }
+  }
+  // Estimate 1 token per 4 characters as a rough approximation
+  return Math.ceil(totalChars / 4);
+}
+
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+  const store = Store.getInstance();
+  const viewer = new FileTreeViewer(store);
+
+  // If we have existing state, render it
+  if (store.getState().root) {
+    viewer.renderTree();
+    viewer.updateUI();
+  }
+});