htm 0.0.15 → 0.0.17

data/examples/rails_app/app/views/files/index.html.erb

@@ -0,0 +1,108 @@
+<div class="space-y-6">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-white">File Sources</h1>
+      <p class="mt-1 text-sm text-gray-400">Manage files loaded into HTM memory</p>
+    </div>
+    <div class="flex gap-3">
+      <% if @file_sources.any? %>
+        <%= button_to sync_all_files_path, method: :post, class: 'inline-flex items-center gap-2 rounded-md bg-gray-700 px-4 py-2 text-sm font-medium text-white hover:bg-gray-600 transition-colors' do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          Sync All
+        <% end %>
+      <% end %>
+      <%= link_to new_file_path, class: 'inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors' do %>
+        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        Load File
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Info Box -->
+  <div class="rounded-lg bg-blue-900/30 border border-blue-500/30 p-4">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <svg class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <div class="ml-3">
+        <p class="text-sm text-blue-300">
+          <strong>File Loading:</strong> HTM can load markdown files into memory with automatic chunking. Each chunk becomes a separate memory node with its own embedding and tags. Changes are tracked for re-sync.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- File Sources List -->
+  <% if @file_sources.any? %>
+    <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden">
+      <table class="min-w-full divide-y divide-gray-700">
+        <thead class="bg-gray-800/50">
+          <tr>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">File</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Chunks</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Last Synced</th>
+            <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-700">
+          <% @file_sources.each do |source| %>
+            <tr class="hover:bg-gray-700/50 transition-colors">
+              <td class="px-6 py-4">
+                <%= link_to file_path(source), class: 'text-sm text-indigo-400 hover:text-indigo-300' do %>
+                  <span class="font-mono"><%= source.file_path %></span>
+                <% end %>
+                <% if source.frontmatter.present? && source.frontmatter['title'] %>
+                  <p class="text-xs text-gray-500 mt-1"><%= source.frontmatter['title'] %></p>
+                <% end %>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                <%= source.chunks.count %>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <% if source.needs_sync? %>
+                  <span class="inline-flex items-center gap-1 rounded-full bg-yellow-900/50 border border-yellow-500/30 px-2 py-0.5 text-xs text-yellow-400">
+                    <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+                    Needs Sync
+                  </span>
+                <% else %>
+                  <span class="inline-flex items-center gap-1 rounded-full bg-green-900/50 border border-green-500/30 px-2 py-0.5 text-xs text-green-400">
+                    <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+                    Synced
+                  </span>
+                <% end %>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
+                <%= time_ago_in_words(source.updated_at) %> ago
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                <%= link_to 'View', file_path(source), class: 'text-indigo-400 hover:text-indigo-300' %>
+                <span class="mx-2 text-gray-600">|</span>
+                <%= button_to 'Sync', sync_file_path(source), method: :post, class: 'text-indigo-400 hover:text-indigo-300 bg-transparent border-0 cursor-pointer' %>
+                <span class="mx-2 text-gray-600">|</span>
+                <%= button_to 'Unload', file_path(source), method: :delete, class: 'text-red-400 hover:text-red-300 bg-transparent border-0 cursor-pointer', data: { turbo_confirm: 'Unload this file? All chunks will be soft-deleted.' } %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% else %>
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
+      <svg class="mx-auto h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+      <h3 class="mt-4 text-lg font-medium text-white">No files loaded</h3>
+      <p class="mt-2 text-sm text-gray-400">
+        <%= link_to 'Load a file', new_file_path, class: 'text-indigo-400 hover:text-indigo-300' %> to get started.
+      </p>
+    </div>
+  <% end %>
+</div>

data/examples/rails_app/app/views/files/new.html.erb

@@ -0,0 +1,321 @@
+<!-- Full-page loading overlay -->
+<div id="upload-overlay" class="hidden fixed inset-0 bg-gray-900/90 z-50 flex items-center justify-center">
+  <div class="bg-gray-800 rounded-lg border border-gray-700 p-8 max-w-md w-full mx-4 text-center">
+    <svg class="animate-spin h-12 w-12 text-indigo-500 mx-auto mb-4" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <h3 class="text-lg font-medium text-white mb-2" id="overlay-title">Uploading Files...</h3>
+    <p class="text-sm text-gray-400 mb-4" id="overlay-status">Preparing upload</p>
+    <div class="w-full bg-gray-700 rounded-full h-2 mb-2">
+      <div id="overlay-progress" class="bg-indigo-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
+    </div>
+    <p class="text-xs text-gray-500" id="overlay-detail">This may take a moment while files are chunked and processed...</p>
+  </div>
+</div>
+
+<div class="space-y-6">
+  <!-- Back link -->
+  <div>
+    <%= link_to files_path, class: 'inline-flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors' do %>
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+      </svg>
+      Back to Files
+    <% end %>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <!-- Upload Files -->
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+      <h2 class="text-lg font-bold text-white mb-4">Upload Files</h2>
+
+      <%= form_with url: upload_files_path, method: :post, multipart: true, class: 'space-y-4', id: 'upload-files-form', data: { turbo: false } do %>
+        <div>
+          <label for="files" class="block text-sm font-medium text-gray-300 mb-2">Select Files</label>
+          <input
+            type="file"
+            name="files[]"
+            id="files"
+            multiple
+            accept=".md,.markdown,.txt"
+            class="w-full rounded-md bg-gray-700 border border-gray-600 text-white file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:bg-indigo-600 file:text-white file:cursor-pointer hover:file:bg-indigo-500 focus:ring-indigo-500 focus:border-indigo-500"
+          />
+          <p class="mt-1 text-xs text-gray-500">Select one or more markdown files (.md, .markdown, .txt)</p>
+          <div id="files-selected" class="mt-2 text-sm text-indigo-400 hidden"></div>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input type="checkbox" name="force" value="true" id="upload_force" class="rounded bg-gray-700 border-gray-600 text-indigo-600 focus:ring-indigo-500">
+          <label for="upload_force" class="text-sm text-gray-300">Force reload (re-sync even if unchanged)</label>
+        </div>
+
+        <div class="pt-4 border-t border-gray-700">
+          <button type="submit" id="upload-files-btn" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+            <svg id="upload-files-spinner" class="hidden animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span id="upload-files-text">Upload Files</span>
+          </button>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Upload Directory -->
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+      <h2 class="text-lg font-bold text-white mb-4">Upload Directory</h2>
+
+      <%= form_with url: upload_directory_files_path, method: :post, multipart: true, class: 'space-y-4', id: 'upload-dir-form', data: { turbo: false } do %>
+        <div>
+          <label for="directory" class="block text-sm font-medium text-gray-300 mb-2">Select Directory</label>
+          <input
+            type="file"
+            name="files[]"
+            id="directory"
+            webkitdirectory
+            directory
+            multiple
+            class="w-full rounded-md bg-gray-700 border border-gray-600 text-white file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:bg-indigo-600 file:text-white file:cursor-pointer hover:file:bg-indigo-500 focus:ring-indigo-500 focus:border-indigo-500"
+          />
+          <p class="mt-1 text-xs text-gray-500">Select a folder - all markdown files will be loaded</p>
+          <div id="dir-selected" class="mt-2 text-sm text-indigo-400 hidden"></div>
+        </div>
+
+        <div>
+          <label for="upload_pattern" class="block text-sm font-medium text-gray-300 mb-2">File Extension Filter</label>
+          <select name="extension" id="upload_pattern" class="w-full rounded-md bg-gray-700 border-gray-600 text-white text-sm focus:ring-indigo-500 focus:border-indigo-500">
+            <option value=".md">Markdown (.md)</option>
+            <option value=".markdown">Markdown (.markdown)</option>
+            <option value=".txt">Text (.txt)</option>
+            <option value="">All files</option>
+          </select>
+          <p class="mt-1 text-xs text-gray-500">Filter files by extension</p>
+        </div>
+
+        <div class="pt-4 border-t border-gray-700">
+          <button type="submit" id="upload-dir-btn" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+            <svg id="upload-dir-spinner" class="hidden animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span id="upload-dir-text">Upload Directory</span>
+          </button>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Divider -->
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center">
+      <div class="w-full border-t border-gray-700"></div>
+    </div>
+    <div class="relative flex justify-center text-sm">
+      <span class="px-2 bg-gray-900 text-gray-500">or load by path</span>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <!-- Load Single File by Path -->
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+      <h2 class="text-lg font-bold text-white mb-4">Load File by Path</h2>
+
+      <%= form_with url: files_path, method: :post, class: 'space-y-4' do %>
+        <div>
+          <label for="path" class="block text-sm font-medium text-gray-300 mb-2">File Path</label>
+          <input
+            type="text"
+            name="path"
+            id="path"
+            placeholder="/path/to/document.md"
+            class="w-full rounded-md bg-gray-700 border-gray-600 text-white placeholder-gray-400 font-mono text-sm focus:ring-indigo-500 focus:border-indigo-500"
+          />
+          <p class="mt-1 text-xs text-gray-500">Absolute path to a markdown file on the server</p>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input type="checkbox" name="force" value="true" id="force" class="rounded bg-gray-700 border-gray-600 text-indigo-600 focus:ring-indigo-500">
+          <label for="force" class="text-sm text-gray-300">Force reload (re-sync even if unchanged)</label>
+        </div>
+
+        <div class="pt-4 border-t border-gray-700">
+          <%= submit_tag 'Load File', class: 'rounded-md bg-gray-600 px-4 py-2 text-sm font-medium text-white hover:bg-gray-500 cursor-pointer transition-colors' %>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Load Directory by Path -->
+    <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+      <h2 class="text-lg font-bold text-white mb-4">Load Directory by Path</h2>
+
+      <%= form_with url: load_directory_files_path, method: :post, class: 'space-y-4' do %>
+        <div>
+          <label for="dir_path" class="block text-sm font-medium text-gray-300 mb-2">Directory Path</label>
+          <input
+            type="text"
+            name="path"
+            id="dir_path"
+            placeholder="/path/to/docs/"
+            class="w-full rounded-md bg-gray-700 border-gray-600 text-white placeholder-gray-400 font-mono text-sm focus:ring-indigo-500 focus:border-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label for="pattern" class="block text-sm font-medium text-gray-300 mb-2">Glob Pattern</label>
+          <input
+            type="text"
+            name="pattern"
+            id="pattern"
+            value="**/*.md"
+            placeholder="**/*.md"
+            class="w-full rounded-md bg-gray-700 border-gray-600 text-white placeholder-gray-400 font-mono text-sm focus:ring-indigo-500 focus:border-indigo-500"
+          />
+          <p class="mt-1 text-xs text-gray-500">Pattern to match files (default: **/*.md)</p>
+        </div>
+
+        <div class="pt-4 border-t border-gray-700">
+          <%= submit_tag 'Load Directory', class: 'rounded-md bg-gray-600 px-4 py-2 text-sm font-medium text-white hover:bg-gray-500 cursor-pointer transition-colors' %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Info -->
+  <div class="rounded-lg bg-gray-800/50 border border-gray-700 p-4">
+    <h3 class="text-sm font-medium text-gray-300 mb-2">How File Loading Works</h3>
+    <ul class="text-xs text-gray-400 space-y-1 list-disc list-inside">
+      <li>Markdown files are split into chunks using the Baran gem's markdown-aware splitter</li>
+      <li>Each chunk becomes a separate memory node with its own embedding and tags</li>
+      <li>YAML frontmatter is extracted and stored as file metadata</li>
+      <li>Files are tracked by path with mtime-based change detection for efficient re-sync</li>
+      <li>Default chunk size: <%= HTM.configuration.chunk_size %> characters, overlap: <%= HTM.configuration.chunk_overlap %> characters</li>
+    </ul>
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Overlay elements
+  const overlay = document.getElementById('upload-overlay');
+  const overlayTitle = document.getElementById('overlay-title');
+  const overlayStatus = document.getElementById('overlay-status');
+  const overlayProgress = document.getElementById('overlay-progress');
+  const overlayDetail = document.getElementById('overlay-detail');
+
+  let fileCount = 0;
+  let progressInterval = null;
+
+  function showOverlay(title, count) {
+    fileCount = count;
+    overlayTitle.textContent = title;
+    overlayStatus.textContent = 'Uploading ' + count + ' file' + (count > 1 ? 's' : '') + '...';
+    overlayProgress.style.width = '0%';
+    overlayDetail.textContent = 'This may take a moment while files are chunked and processed...';
+    overlay.classList.remove('hidden');
+
+    // Simulate progress since we can't track actual server progress
+    let progress = 0;
+    const stages = [
+      { pct: 15, status: 'Uploading files to server...' },
+      { pct: 30, status: 'Reading file contents...' },
+      { pct: 45, status: 'Splitting into chunks...' },
+      { pct: 60, status: 'Creating memory nodes...' },
+      { pct: 75, status: 'Generating embeddings...' },
+      { pct: 85, status: 'Extracting tags...' },
+      { pct: 95, status: 'Finalizing...' }
+    ];
+    let stageIndex = 0;
+
+    progressInterval = setInterval(function() {
+      if (stageIndex < stages.length) {
+        const stage = stages[stageIndex];
+        if (progress < stage.pct) {
+          progress += 1;
+          overlayProgress.style.width = progress + '%';
+        } else {
+          overlayStatus.textContent = stage.status;
+          stageIndex++;
+        }
+      }
+    }, 200);
+  }
+
+  // File selection display for single files
+  const filesInput = document.getElementById('files');
+  const filesSelected = document.getElementById('files-selected');
+
+  if (filesInput) {
+    filesInput.addEventListener('change', function() {
+      if (this.files.length > 0) {
+        const names = Array.from(this.files).map(f => f.name);
+        if (names.length <= 3) {
+          filesSelected.textContent = 'Selected: ' + names.join(', ');
+        } else {
+          filesSelected.textContent = 'Selected: ' + names.slice(0, 3).join(', ') + ' and ' + (names.length - 3) + ' more';
+        }
+        filesSelected.classList.remove('hidden');
+      } else {
+        filesSelected.classList.add('hidden');
+      }
+    });
+  }
+
+  // File selection display for directory
+  const dirInput = document.getElementById('directory');
+  const dirSelected = document.getElementById('dir-selected');
+
+  if (dirInput) {
+    dirInput.addEventListener('change', function() {
+      if (this.files.length > 0) {
+        const mdFiles = Array.from(this.files).filter(f => /\.(md|markdown|txt)$/i.test(f.name));
+        if (mdFiles.length > 0) {
+          dirSelected.textContent = 'Found ' + mdFiles.length + ' matching file(s) in selected folder';
+        } else {
+          dirSelected.textContent = 'No markdown files found in selected folder';
+        }
+        dirSelected.classList.remove('hidden');
+      } else {
+        dirSelected.classList.add('hidden');
+      }
+    });
+  }
+
+  // Upload files form submission
+  const uploadFilesForm = document.getElementById('upload-files-form');
+  const uploadFilesBtn = document.getElementById('upload-files-btn');
+  const uploadFilesSpinner = document.getElementById('upload-files-spinner');
+  const uploadFilesText = document.getElementById('upload-files-text');
+
+  if (uploadFilesForm) {
+    uploadFilesForm.addEventListener('submit', function() {
+      const files = filesInput.files;
+      if (files.length === 0) return;
+
+      uploadFilesBtn.disabled = true;
+      uploadFilesSpinner.classList.remove('hidden');
+      uploadFilesText.textContent = 'Processing...';
+      showOverlay('Uploading Files...', files.length);
+    });
+  }
+
+  // Upload directory form submission
+  const uploadDirForm = document.getElementById('upload-dir-form');
+  const uploadDirBtn = document.getElementById('upload-dir-btn');
+  const uploadDirSpinner = document.getElementById('upload-dir-spinner');
+  const uploadDirText = document.getElementById('upload-dir-text');
+
+  if (uploadDirForm) {
+    uploadDirForm.addEventListener('submit', function() {
+      const files = dirInput.files;
+      const mdFiles = Array.from(files).filter(f => /\.(md|markdown|txt)$/i.test(f.name));
+      if (mdFiles.length === 0) return;
+
+      uploadDirBtn.disabled = true;
+      uploadDirSpinner.classList.remove('hidden');
+      uploadDirText.textContent = 'Processing...';
+      showOverlay('Uploading Directory...', mdFiles.length);
+    });
+  }
+});
+</script>

data/examples/rails_app/app/views/files/show.html.erb

@@ -0,0 +1,130 @@
+<div class="space-y-6">
+  <!-- Back link -->
+  <div>
+    <%= link_to files_path, class: 'inline-flex items-center gap-1 text-sm text-gray-400 hover:text-white transition-colors' do %>
+      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+      </svg>
+      Back to Files
+    <% end %>
+  </div>
+
+  <!-- File Header -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6">
+    <div class="flex items-start justify-between">
+      <div>
+        <div class="flex items-center gap-3">
+          <div class="rounded-full bg-blue-900/50 border border-blue-500/30 p-2">
+            <svg class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          </div>
+          <div>
+            <h1 class="text-xl font-bold text-white font-mono"><%= @file_source.file_path %></h1>
+            <% if @file_source.frontmatter.present? && @file_source.frontmatter['title'] %>
+              <p class="text-sm text-gray-400 mt-1"><%= @file_source.frontmatter['title'] %></p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <% if @file_source.needs_sync? %>
+          <span class="inline-flex items-center gap-1 rounded-full bg-yellow-900/50 border border-yellow-500/30 px-3 py-1 text-sm text-yellow-400">
+            <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+            Needs Sync
+          </span>
+        <% else %>
+          <span class="inline-flex items-center gap-1 rounded-full bg-green-900/50 border border-green-500/30 px-3 py-1 text-sm text-green-400">
+            <svg class="h-2 w-2" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
+            Synced
+          </span>
+        <% end %>
+
+        <%= button_to sync_file_path(@file_source), method: :post, class: 'inline-flex items-center gap-2 rounded-md bg-gray-700 px-3 py-2 text-sm font-medium text-white hover:bg-gray-600 transition-colors' do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          Sync Now
+        <% end %>
+
+        <%= button_to file_path(@file_source), method: :delete, class: 'inline-flex items-center gap-2 rounded-md bg-red-600/80 px-3 py-2 text-sm font-medium text-white hover:bg-red-600 transition-colors', data: { turbo_confirm: 'Unload this file? All chunks will be soft-deleted.' } do %>
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+          Unload
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="mt-6 grid grid-cols-3 gap-4 pt-6 border-t border-gray-700">
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @chunks.count %></p>
+        <p class="text-sm text-gray-400">Chunks</p>
+      </div>
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @file_source.mtime&.strftime('%Y-%m-%d %H:%M') || 'N/A' %></p>
+        <p class="text-sm text-gray-400">File Modified</p>
+      </div>
+      <div>
+        <p class="text-2xl font-bold text-white"><%= @file_source.updated_at.strftime('%Y-%m-%d %H:%M') %></p>
+        <p class="text-sm text-gray-400">Last Synced</p>
+      </div>
+    </div>
+
+    <!-- Frontmatter -->
+    <% if @file_source.frontmatter.present? && @file_source.frontmatter.any? %>
+      <div class="mt-6 pt-6 border-t border-gray-700">
+        <h3 class="text-sm font-medium text-gray-400 mb-2">Frontmatter</h3>
+        <div class="rounded-md bg-gray-900 p-3">
+          <pre class="text-xs text-gray-300 overflow-x-auto"><%= JSON.pretty_generate(@file_source.frontmatter) %></pre>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Chunks -->
+  <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden">
+    <div class="px-6 py-4 bg-gray-800/50 border-b border-gray-700">
+      <h2 class="text-lg font-medium text-white">Chunks</h2>
+      <p class="text-sm text-gray-400">Each chunk is stored as a separate memory node</p>
+    </div>
+
+    <% if @chunks.any? %>
+      <ul class="divide-y divide-gray-700">
+        <% @chunks.each_with_index do |chunk, i| %>
+          <li class="p-4 hover:bg-gray-700/50 transition-colors">
+            <div class="flex items-start gap-4">
+              <span class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-sm text-gray-400 font-mono">
+                <%= i + 1 %>
+              </span>
+              <div class="flex-1 min-w-0">
+                <%= link_to memory_path(chunk), class: 'block group' do %>
+                  <p class="text-sm text-gray-300 group-hover:text-white transition-colors whitespace-pre-wrap line-clamp-4">
+                    <%= chunk.content %>
+                  </p>
+                <% end %>
+                <div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
+                  <span>Node ID: <%= chunk.id %></span>
+                  <% if chunk.metadata && chunk.metadata['cursor'] %>
+                    <span>Position: <%= chunk.metadata['cursor'] %></span>
+                  <% end %>
+                  <% if chunk.embedding.present? %>
+                    <span class="text-green-500">embedded</span>
+                  <% else %>
+                    <span class="text-yellow-500">pending</span>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <div class="p-8 text-center">
+        <p class="text-sm text-gray-500">No chunks found.</p>
+      </div>
+    <% end %>
+  </div>
+</div>