@mattli/dotmd 0.1.0 → 0.1.2

package/dist/dashboard/settings.js

@@ -5,72 +5,87 @@ function escapeHtml(str) {
         .replace(/>/g, ">")
         .replace(/"/g, """);
 }
-function chipHtml(value, label, selected) {
-    const selectedClasses = selected
-        ? "bg-blue-100 text-blue-800 border-blue-300"
-        : "bg-gray-100 text-gray-600 border-gray-300";
-    return `<span data-chip data-value="${escapeHtml(value)}" data-selected="${selected}"
-    class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium border cursor-pointer select-none transition-colors ${selectedClasses}">
-    ${escapeHtml(label)}
+function folderChipHtml(value) {
+    return `<span data-folder-chip="${escapeHtml(value)}"
+    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300">
+    ${escapeHtml(value)} <button type="button" class="ml-1 text-blue-500 hover:text-blue-700 font-bold">&times;</button>
   </span>`;
 }
-export function settingsPage(config, suggestedRoots, suggestedPatterns) {
-    // Roots: show current config roots as selected, suggested ones not in config as deselected
-    const configRootSet = new Set(config.scan_roots);
-    const allRoots = [...config.scan_roots];
-    for (const r of suggestedRoots) {
-        if (!configRootSet.has(r))
-            allRoots.push(r);
-    }
-    const rootChips = allRoots
-        .map((r) => chipHtml(r, r, configRootSet.has(r)))
+function patternChipHtml(value) {
+    return `<span data-pattern-chip="${escapeHtml(value)}"
+    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300">
+    ${escapeHtml(value)} <button type="button" class="ml-1 text-blue-500 hover:text-blue-700 font-bold">&times;</button>
+  </span>`;
+}
+export function setupPage(config, suggestedRoots, suggestedPatterns, options = {}) {
+    const { isInit = false } = options;
+    // Folders: show configured roots as chips
+    const folderChips = config.scan_roots
+        .map((r) => folderChipHtml(r))
         .join("\n        ");
-    // Patterns: show current config patterns as selected, suggested ones not in config as deselected
+    // Patterns: show configured patterns as chips, unselected suggested as addable
     const configPatternSet = new Set(config.patterns);
-    const allPatterns = [...config.patterns];
-    for (const p of suggestedPatterns) {
-        if (!configPatternSet.has(p))
-            allPatterns.push(p);
-    }
-    const patternChips = allPatterns
-        .map((p) => chipHtml(p, p, configPatternSet.has(p)))
+    const patternChips = config.patterns
+        .map((p) => patternChipHtml(p))
         .join("\n        ");
+    const suggestedChips = suggestedPatterns
+        .map((p) => {
+        const hidden = configPatternSet.has(p) ? " hidden" : "";
+        return `<span data-suggested-pattern="${escapeHtml(p)}"
+    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-600 border border-gray-300 cursor-pointer hover:bg-gray-200 transition-colors select-none${hidden}">
+    + ${escapeHtml(p)}
+  </span>`;
+    })
+        .join("\n        ");
+    const allSuggestedHidden = suggestedPatterns.every((p) => configPatternSet.has(p));
+    const title = isInit ? "Set up dotmd" : "Settings";
+    const subtitle = isInit
+        ? "Pick the folders and file patterns dotmd should track, then confirm the discovered files below."
+        : "";
+    const saveLabel = isInit ? "Start Tracking" : "Save";
+    const saveRedirect = isInit ? "true" : "false";
     return `
-    <div class="max-w-3xl mx-auto">
-      <h1 class="text-2xl font-bold mb-6">Settings</h1>
+    <div class="max-w-3xl mx-auto pb-24">
+      <h1 class="text-2xl font-bold mb-2">${title}</h1>
+      ${subtitle ? `<p class="text-gray-500 mb-6">${subtitle}</p>` : '<div class="mb-4"></div>'}
 
       <!-- Folders -->
       <section class="mb-8">
         <h2 class="text-lg font-semibold mb-2">Folders</h2>
-        <p class="text-gray-500 text-sm mb-4">Directories to scan for instruction files. Click to toggle.</p>
-        <div id="roots-list" class="flex flex-wrap gap-2 mb-4">
-          ${rootChips}
+        <p class="text-gray-500 text-sm mb-4">Directories to scan for instruction files.</p>
+        <div id="folder-list" class="flex flex-wrap gap-2 mb-2">
+          ${folderChips}
         </div>
+        <p id="no-folders-msg" class="text-gray-400 text-sm mb-4 ${config.scan_roots.length > 0 ? "hidden" : ""}">No folders selected. Use the browser below to add folders.</p>
         <button id="open-browser" type="button"
           class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors border border-gray-300">
           Browse for folder...
         </button>
         <div id="folder-browser" class="hidden mt-3 bg-white border border-gray-200 rounded-lg overflow-hidden">
-          <div id="browser-header" class="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between text-sm">
-            <div class="flex items-center gap-2">
-              <button id="browser-up" type="button" class="text-blue-600 hover:underline font-medium">Up</button>
-              <span id="browser-path" class="text-gray-500 font-mono text-xs"></span>
-            </div>
-            <button id="browser-add" type="button" class="px-3 py-1 bg-blue-600 text-white rounded text-xs font-medium hover:bg-blue-700">Add this folder</button>
+          <div id="browser-header" class="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center gap-2 text-sm">
+            <button id="browser-up" type="button" class="text-blue-600 hover:underline font-medium">Up</button>
+            <span id="browser-path" class="text-gray-500 font-mono text-xs"></span>
           </div>
           <div id="browser-list" class="max-h-64 overflow-y-auto divide-y divide-gray-100"></div>
         </div>
       </section>
 
       <!-- Patterns -->
-      <section class="mb-8">
+      <section class="mb-8 pt-8 border-t border-gray-200">
         <h2 class="text-lg font-semibold mb-2">Patterns</h2>
-        <p class="text-gray-500 text-sm mb-4">Filename patterns to match within your folders. Click to toggle.</p>
-        <div id="patterns-list" class="flex flex-wrap gap-2 mb-4">
+        <p class="text-gray-500 text-sm mb-4">Filename patterns to match within your folders.</p>
+        <div id="pattern-list" class="flex flex-wrap gap-2 mb-2">
           ${patternChips}
         </div>
+        <p id="no-patterns-msg" class="text-gray-400 text-sm mb-4 ${config.patterns.length > 0 ? "hidden" : ""}">No patterns selected.</p>
+        <div id="suggestions-section" class="mb-4${allSuggestedHidden ? " hidden" : ""}">
+          <p class="text-gray-500 text-xs uppercase tracking-wide font-semibold mb-2">Suggestions</p>
+          <div id="suggested-patterns" class="flex flex-wrap gap-2">
+            ${suggestedChips}
+          </div>
+        </div>
         <div class="flex gap-2">
-          <input id="custom-input" type="text" placeholder="*.md"
+          <input id="custom-input" type="text" placeholder="rules/*.md"
             class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
           <button id="add-custom" type="button"
             class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors border border-gray-300">Add</button>
@@ -78,7 +93,7 @@ export function settingsPage(config, suggestedRoots, suggestedPatterns) {
       </section>
 
       <!-- File Preview -->
-      <section class="mb-8">
+      <section class="mb-8 pt-8 border-t border-gray-200">
         <h2 class="text-lg font-semibold mb-2">Tracked Files</h2>
         <p class="text-gray-500 text-sm mb-4">Files matching your current folders and patterns. Uncheck any you don't want to track.</p>
         <div id="file-preview" class="bg-white border border-gray-200 rounded-lg p-4 min-h-[100px]">
@@ -87,12 +102,12 @@ export function settingsPage(config, suggestedRoots, suggestedPatterns) {
       </section>
 
       <!-- Save -->
-      <div class="flex items-center gap-4">
-        <button id="save-btn" type="button"
+      <div class="flex items-center justify-end gap-4 pt-8 border-t border-gray-200">
+        <span id="save-status" class="text-sm text-green-600 hidden">Settings saved.</span>
+        <button id="save-btn" type="button" data-redirect="${saveRedirect}"
           class="px-6 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
-          Save
+          ${saveLabel}
         </button>
-        <span id="save-status" class="text-sm text-green-600 hidden">Settings saved.</span>
       </div>
     </div>`;
 }

package/dist/dashboard/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../src/dashboard/settings.ts"],"names":[],"mappings":"AAGA,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,SAAS,QAAQ,CACf,KAAa,EACb,KAAa,EACb,QAAiB;IAEjB,MAAM,eAAe,GAAG,QAAQ;QAC9B,CAAC,CAAC,2CAA2C;QAC7C,CAAC,CAAC,2CAA2C,CAAC;IAChD,OAAO,+BAA+B,UAAU,CAAC,KAAK,CAAC,oBAAoB,QAAQ;uIACkD,eAAe;MAChJ,UAAU,CAAC,KAAK,CAAC;UACb,CAAC;AACX,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,MAAmB,EACnB,cAAwB,EACxB,iBAA2B;IAE3B,2FAA2F;IAC3F,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACxC,KAAK,MAAM,CAAC,IAAI,cAAc,EAAE,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;YAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC9C,CAAC;IACD,MAAM,SAAS,GAAG,QAAQ;SACvB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAChD,IAAI,CAAC,YAAY,CAAC,CAAC;IAEtB,iGAAiG;IACjG,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzC,KAAK,MAAM,CAAC,IAAI,iBAAiB,EAAE,CAAC;QAClC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpD,CAAC;IACD,MAAM,YAAY,GAAG,WAAW;SAC7B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACnD,IAAI,CAAC,YAAY,CAAC,CAAC;IAEtB,OAAO;;;;;;;;;YASG,SAAS;;;;;;;;;;;;;;;;;;;;;;;YAuBT,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;WA2Bb,CAAC;AACZ,CAAC"}
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../src/dashboard/settings.ts"],"names":[],"mappings":"AAGA,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,SAAS,cAAc,CAAC,KAAa;IACnC,OAAO,2BAA2B,UAAU,CAAC,KAAK,CAAC;;MAE/C,UAAU,CAAC,KAAK,CAAC;UACb,CAAC;AACX,CAAC;AAED,SAAS,eAAe,CAAC,KAAa;IACpC,OAAO,4BAA4B,UAAU,CAAC,KAAK,CAAC;;MAEhD,UAAU,CAAC,KAAK,CAAC;UACb,CAAC;AACX,CAAC;AAOD,MAAM,UAAU,SAAS,CACvB,MAAmB,EACnB,cAAwB,EACxB,iBAA2B,EAC3B,UAA4B,EAAE;IAE9B,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,OAAO,CAAC;IAEnC,0CAA0C;IAC1C,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU;SAClC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;SAC7B,IAAI,CAAC,YAAY,CAAC,CAAC;IAEtB,+EAA+E;IAC/E,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ;SACjC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;SAC9B,IAAI,CAAC,YAAY,CAAC,CAAC;IAEtB,MAAM,cAAc,GAAG,iBAAiB;SACrC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACT,MAAM,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACxD,OAAO,iCAAiC,UAAU,CAAC,CAAC,CAAC;wMAC6I,MAAM;QACtM,UAAU,CAAC,CAAC,CAAC;UACX,CAAC;IACP,CAAC,CAAC;SACD,IAAI,CAAC,YAAY,CAAC,CAAC;IACtB,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CACvD,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CACxB,CAAC;IAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM;QACrB,CAAC,CAAC,iGAAiG;QACnG,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC;IACrD,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAE/C,OAAO;;4CAEmC,KAAK;QACzC,QAAQ,CAAC,CAAC,CAAC,iCAAiC,QAAQ,MAAM,CAAC,CAAC,CAAC,0BAA0B;;;;;;;YAOnF,WAAW;;mEAE4C,MAAM,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;YAmBnG,YAAY;;oEAE4C,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;mDAC3D,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;cAGxE,cAAc;;;;;;;;;;;;;;;;;;;;;;;6DAuBiC,YAAY;;YAE7D,SAAS;;;WAGV,CAAC;AACZ,CAAC"}

package/dist/dashboard/wizard-client.d.ts

@@ -1,2 +1,2 @@
-export declare const WIZARD_CLIENT_SCRIPT = "<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  // --- Chip toggling ---\n  document.querySelectorAll('[data-chip]').forEach(function(chip) {\n    chip.addEventListener('click', function() {\n      var isSelected = chip.getAttribute('data-selected') === 'true';\n      chip.setAttribute('data-selected', isSelected ? 'false' : 'true');\n      if (isSelected) {\n        chip.classList.remove('bg-blue-100', 'text-blue-800', 'border-blue-300');\n        chip.classList.add('bg-gray-100', 'text-gray-600', 'border-gray-300');\n      } else {\n        chip.classList.remove('bg-gray-100', 'text-gray-600', 'border-gray-300');\n        chip.classList.add('bg-blue-100', 'text-blue-800', 'border-blue-300');\n      }\n    });\n  });\n\n  // --- Folder browser ---\n  var openBrowserBtn = document.getElementById('open-browser');\n  var folderBrowser = document.getElementById('folder-browser');\n  var browserPath = document.getElementById('browser-path');\n  var browserList = document.getElementById('browser-list');\n  var browserUp = document.getElementById('browser-up');\n  var customList = document.getElementById('custom-list');\n  var browserAdd = document.getElementById('browser-add');\n  var currentBrowseDir = null;\n\n  if (browserAdd) {\n    browserAdd.addEventListener('click', function() {\n      if (currentBrowseDir) addFolderChip(currentBrowseDir);\n    });\n  }\n\n  function addFolderChip(folderPath) {\n    if (!customList) return;\n    // Don't add duplicates\n    var existing = customList.querySelectorAll('[data-custom-value]');\n    for (var i = 0; i < existing.length; i++) {\n      if (existing[i].getAttribute('data-custom-value') === folderPath) return;\n    }\n    // Also check if it's already a suggested chip that's selected\n    var chips = document.querySelectorAll('[data-chip]');\n    for (var i = 0; i < chips.length; i++) {\n      if (chips[i].getAttribute('data-value') === folderPath) return;\n    }\n\n    var tag = document.createElement('span');\n    tag.setAttribute('data-custom-value', folderPath);\n    tag.className = 'inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';\n    tag.innerHTML = folderPath + ' <button type=\"button\" class=\"ml-1 text-blue-500 hover:text-blue-700 font-bold\">&times;</button>';\n    tag.querySelector('button').addEventListener('click', function() {\n      tag.remove();\n    });\n    customList.appendChild(tag);\n  }\n\n  function loadBrowserDir(dir) {\n    fetch('/api/setup/browse?dir=' + encodeURIComponent(dir || '~'))\n      .then(function(res) { return res.json(); })\n      .then(function(data) {\n        if (data.error) return;\n        currentBrowseDir = data.current;\n        if (browserPath) browserPath.textContent = data.current;\n        if (browserUp) {\n          browserUp.style.display = data.parent ? '' : 'none';\n          browserUp.onclick = function() { loadBrowserDir(data.parent); };\n        }\n        if (!browserList) return;\n        browserList.innerHTML = '';\n\n        data.dirs.forEach(function(entry) {\n          var row = document.createElement('div');\n          row.className = 'px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center gap-2 text-sm';\n          row.innerHTML = '<span class=\"text-gray-400\">&#128193;</span> ' + entry.name;\n          row.addEventListener('click', function() {\n            loadBrowserDir(entry.path);\n          });\n          browserList.appendChild(row);\n        });\n      });\n  }\n\n  if (openBrowserBtn && folderBrowser) {\n    openBrowserBtn.addEventListener('click', function() {\n      var isHidden = folderBrowser.classList.contains('hidden');\n      if (isHidden) {\n        folderBrowser.classList.remove('hidden');\n        openBrowserBtn.textContent = 'Hide browser';\n        loadBrowserDir('~');\n      } else {\n        folderBrowser.classList.add('hidden');\n        openBrowserBtn.textContent = 'Browse folders...';\n      }\n    });\n  }\n\n  // --- Custom input for patterns (step 2) ---\n  var addBtn = document.getElementById('add-custom');\n  var customInput = document.getElementById('custom-input');\n\n  function addCustomItem() {\n    if (!customInput || !customList) return;\n    var value = customInput.value.trim();\n    if (!value) return;\n\n    var existing = customList.querySelectorAll('[data-custom-value]');\n    for (var i = 0; i < existing.length; i++) {\n      if (existing[i].getAttribute('data-custom-value') === value) return;\n    }\n\n    var tag = document.createElement('span');\n    tag.setAttribute('data-custom-value', value);\n    tag.className = 'inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';\n    tag.innerHTML = value + ' <button type=\"button\" class=\"ml-1 text-blue-500 hover:text-blue-700 font-bold\">&times;</button>';\n    tag.querySelector('button').addEventListener('click', function() {\n      tag.remove();\n    });\n    customList.appendChild(tag);\n    customInput.value = '';\n  }\n\n  if (addBtn) {\n    addBtn.addEventListener('click', addCustomItem);\n  }\n  if (customInput) {\n    customInput.addEventListener('keydown', function(e) {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        addCustomItem();\n      }\n    });\n  }\n\n  // --- Collect selected values ---\n  function getSelectedValues() {\n    var values = [];\n    document.querySelectorAll('[data-chip][data-selected=\"true\"]').forEach(function(chip) {\n      values.push(chip.getAttribute('data-value'));\n    });\n    if (customList) {\n      customList.querySelectorAll('[data-custom-value]').forEach(function(tag) {\n        values.push(tag.getAttribute('data-custom-value'));\n      });\n    }\n    return values;\n  }\n\n  // --- Step 1: Next button ---\n  var nextBtn = document.getElementById('next-btn');\n  if (nextBtn && nextBtn.getAttribute('data-step') === '1') {\n    nextBtn.addEventListener('click', function() {\n      var roots = getSelectedValues();\n      if (roots.length === 0) {\n        alert('Please select at least one folder.');\n        return;\n      }\n      var params = new URLSearchParams();\n      roots.forEach(function(r) { params.append('roots', r); });\n      window.location.href = '/setup/step2?' + params.toString();\n    });\n  }\n\n  // --- Step 2: Preview button ---\n  if (nextBtn && nextBtn.getAttribute('data-step') === '2') {\n    nextBtn.addEventListener('click', function() {\n      var patterns = getSelectedValues();\n      if (patterns.length === 0) {\n        alert('Please select at least one pattern.');\n        return;\n      }\n      // Get roots from URL\n      var urlParams = new URLSearchParams(window.location.search);\n      var roots = urlParams.getAll('roots');\n      var params = new URLSearchParams();\n      roots.forEach(function(r) { params.append('roots', r); });\n      patterns.forEach(function(p) { params.append('patterns', p); });\n      window.location.href = '/setup/step3?' + params.toString();\n    });\n  }\n\n  // --- Step 3: Select/deselect by group ---\n  document.querySelectorAll('[data-group-select]').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var group = btn.getAttribute('data-group-select');\n      var container = document.querySelector('[data-group=\"' + group + '\"]');\n      if (container) {\n        container.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n          cb.checked = true;\n        });\n      }\n    });\n  });\n  document.querySelectorAll('[data-group-deselect]').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var group = btn.getAttribute('data-group-deselect');\n      var container = document.querySelector('[data-group=\"' + group + '\"]');\n      if (container) {\n        container.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n          cb.checked = false;\n        });\n      }\n    });\n  });\n\n  // --- Step 3: Select all / Deselect all ---\n  var selectAllBtn = document.getElementById('select-all');\n  var deselectAllBtn = document.getElementById('deselect-all');\n\n  if (selectAllBtn) {\n    selectAllBtn.addEventListener('click', function() {\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        cb.checked = true;\n      });\n    });\n  }\n  if (deselectAllBtn) {\n    deselectAllBtn.addEventListener('click', function() {\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        cb.checked = false;\n      });\n    });\n  }\n\n  // --- Step 3: Confirm button ---\n  var confirmBtn = document.getElementById('confirm-btn');\n  if (confirmBtn) {\n    confirmBtn.addEventListener('click', function() {\n      confirmBtn.disabled = true;\n      confirmBtn.textContent = 'Saving...';\n\n      var urlParams = new URLSearchParams(window.location.search);\n      var roots = urlParams.getAll('roots');\n      var patterns = urlParams.getAll('patterns');\n\n      var excludedFiles = [];\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        if (!cb.checked) {\n          excludedFiles.push(cb.value);\n        }\n      });\n\n      fetch('/api/setup/confirm', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ roots: roots, patterns: patterns, excludedFiles: excludedFiles })\n      })\n      .then(function(res) { return res.json(); })\n      .then(function(data) {\n        if (data.success) {\n          window.location.href = '/setup/complete?count=' + data.trackedCount;\n        } else {\n          alert('Error saving config. Please try again.');\n          confirmBtn.disabled = false;\n          confirmBtn.textContent = 'Confirm & Start Tracking';\n        }\n      })\n      .catch(function() {\n        alert('Error saving config. Please try again.');\n        confirmBtn.disabled = false;\n        confirmBtn.textContent = 'Confirm & Start Tracking';\n      });\n    });\n  }\n});\n</script>";
+export declare const WIZARD_CLIENT_SCRIPT = "<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  // --- Pattern list (step 2) ---\n  var patternList = document.getElementById('pattern-list');\n  var suggestedPatternsDiv = document.getElementById('suggested-patterns');\n  var noPatternsMsg = document.getElementById('no-patterns-msg');\n\n  function updateNoPatternsMsg() {\n    if (!noPatternsMsg) return;\n    if (getSelectedValues().length === 0) {\n      noPatternsMsg.classList.remove('hidden');\n    } else {\n      noPatternsMsg.classList.add('hidden');\n    }\n  }\n\n  function addPatternChip(value) {\n    if (!patternList) return;\n    // Check for duplicates\n    var existing = patternList.querySelectorAll('[data-pattern-chip]');\n    for (var i = 0; i < existing.length; i++) {\n      if (existing[i].getAttribute('data-pattern-chip') === value) return;\n    }\n\n    var tag = document.createElement('span');\n    tag.setAttribute('data-pattern-chip', value);\n    tag.className = 'inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';\n    tag.innerHTML = value + ' <button type=\"button\" class=\"ml-1 text-blue-500 hover:text-blue-700 font-bold\">&times;</button>';\n    tag.querySelector('button').addEventListener('click', function() {\n      tag.remove();\n      updateNextBtn();\n      updateNoPatternsMsg();\n    });\n    patternList.appendChild(tag);\n    updateNextBtn();\n    updateNoPatternsMsg();\n  }\n\n  // Wire up x buttons on server-rendered pattern chips\n  if (patternList) {\n    patternList.querySelectorAll('[data-pattern-chip] button').forEach(function(btn) {\n      btn.addEventListener('click', function() {\n        btn.parentElement.remove();\n        updateNextBtn();\n        updateNoPatternsMsg();\n      });\n    });\n  }\n\n  // Wire up suggested pattern chips \u2014 click to add\n  if (suggestedPatternsDiv) {\n    suggestedPatternsDiv.querySelectorAll('[data-suggested-pattern]').forEach(function(chip) {\n      chip.addEventListener('click', function() {\n        var value = chip.getAttribute('data-suggested-pattern');\n        addPatternChip(value);\n        chip.remove();\n        // Hide suggestions section if empty\n        if (suggestedPatternsDiv.children.length === 0) {\n          suggestedPatternsDiv.parentElement.style.display = 'none';\n        }\n      });\n    });\n  }\n\n  // --- Folder list (step 1) ---\n  var folderList = document.getElementById('folder-list');\n  var noFoldersMsg = document.getElementById('no-folders-msg');\n\n  function getAddedFolders() {\n    var folders = [];\n    if (!folderList) return folders;\n    folderList.querySelectorAll('[data-folder-chip]').forEach(function(chip) {\n      folders.push(chip.getAttribute('data-folder-chip'));\n    });\n    return folders;\n  }\n\n  function isFolderAdded(folderPath) {\n    var folders = getAddedFolders();\n    for (var i = 0; i < folders.length; i++) {\n      if (folders[i] === folderPath) return true;\n    }\n    return false;\n  }\n\n  function isCoveredByParent(folderPath) {\n    var folders = getAddedFolders();\n    for (var i = 0; i < folders.length; i++) {\n      // Check if an existing folder is a parent of this one\n      if (folderPath !== folders[i] && folderPath.indexOf(folders[i] + '/') === 0) return true;\n    }\n    return false;\n  }\n\n  function updateNoFoldersMsg() {\n    if (!noFoldersMsg) return;\n    if (getAddedFolders().length === 0) {\n      noFoldersMsg.classList.remove('hidden');\n    } else {\n      noFoldersMsg.classList.add('hidden');\n    }\n  }\n\n  function removeFolderChip(chip) {\n    chip.remove();\n    updateNextBtn();\n    updateNoFoldersMsg();\n  }\n\n  function addFolderChip(folderPath) {\n    if (!folderList) return;\n    if (isFolderAdded(folderPath)) return;\n\n    var tag = document.createElement('span');\n    tag.setAttribute('data-folder-chip', folderPath);\n    tag.className = 'inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';\n    tag.innerHTML = folderPath + ' <button type=\"button\" class=\"ml-1 text-blue-500 hover:text-blue-700 font-bold\">&times;</button>';\n    tag.querySelector('button').addEventListener('click', function() {\n      removeFolderChip(tag);\n    });\n    folderList.appendChild(tag);\n    updateNextBtn();\n    updateNoFoldersMsg();\n  }\n\n  // Wire up x buttons on server-rendered folder chips\n  if (folderList) {\n    folderList.querySelectorAll('[data-folder-chip] button').forEach(function(btn) {\n      btn.addEventListener('click', function() {\n        removeFolderChip(btn.parentElement);\n      });\n    });\n  }\n\n  // --- Folder browser ---\n  var openBrowserBtn = document.getElementById('open-browser');\n  var folderBrowser = document.getElementById('folder-browser');\n  var browserPath = document.getElementById('browser-path');\n  var browserList = document.getElementById('browser-list');\n  var browserUp = document.getElementById('browser-up');\n\n  var currentBrowserDir = null;\n\n  function loadBrowserDir(dir) {\n    fetch('/api/setup/browse?dir=' + encodeURIComponent(dir || '~'))\n      .then(function(res) { return res.json(); })\n      .then(function(data) {\n        if (data.error) return;\n        currentBrowserDir = data.current;\n        if (browserPath) browserPath.textContent = data.current;\n        if (browserUp) {\n          browserUp.style.display = data.parent ? '' : 'none';\n          browserUp.onclick = function() { loadBrowserDir(data.parent); };\n        }\n        if (!browserList) return;\n        browserList.innerHTML = '';\n\n        data.dirs.forEach(function(entry) {\n          var added = isFolderAdded(entry.path);\n          var covered = isCoveredByParent(entry.path);\n\n          var row = document.createElement('div');\n          row.className = 'px-4 py-2 hover:bg-gray-50 flex items-center gap-2 text-sm';\n\n          var folderIcon = document.createElement('span');\n          folderIcon.innerHTML = '&#128193;';\n          folderIcon.className = covered ? 'text-gray-300' : 'text-gray-400';\n\n          var nameSpan = document.createElement('span');\n          nameSpan.textContent = entry.name;\n          nameSpan.className = covered\n            ? 'cursor-pointer flex-1 text-gray-300'\n            : 'cursor-pointer flex-1 hover:text-blue-600';\n          nameSpan.addEventListener('click', function() {\n            loadBrowserDir(entry.path);\n          });\n\n          row.appendChild(folderIcon);\n          row.appendChild(nameSpan);\n\n          if (added) {\n            var removeBtn = document.createElement('button');\n            removeBtn.textContent = 'Remove';\n            removeBtn.type = 'button';\n            removeBtn.className = 'text-red-500 hover:text-red-700 text-xs font-medium flex-shrink-0';\n            removeBtn.addEventListener('click', function(e) {\n              e.stopPropagation();\n              var chips = folderList.querySelectorAll('[data-folder-chip]');\n              for (var i = 0; i < chips.length; i++) {\n                if (chips[i].getAttribute('data-folder-chip') === entry.path) {\n                  removeFolderChip(chips[i]);\n                  break;\n                }\n              }\n              loadBrowserDir(currentBrowserDir);\n            });\n            row.appendChild(removeBtn);\n          } else if (!covered) {\n            var addBtn = document.createElement('button');\n            addBtn.textContent = 'Add';\n            addBtn.type = 'button';\n            addBtn.className = 'text-blue-600 hover:text-blue-800 text-xs font-medium flex-shrink-0';\n            addBtn.addEventListener('click', function(e) {\n              e.stopPropagation();\n              addFolderChip(entry.path);\n              loadBrowserDir(currentBrowserDir);\n            });\n            row.appendChild(addBtn);\n          }\n\n          browserList.appendChild(row);\n        });\n      });\n  }\n\n  if (openBrowserBtn && folderBrowser) {\n    openBrowserBtn.addEventListener('click', function() {\n      var isHidden = folderBrowser.classList.contains('hidden');\n      if (isHidden) {\n        folderBrowser.classList.remove('hidden');\n        openBrowserBtn.textContent = 'Hide browser';\n        loadBrowserDir('~');\n      } else {\n        folderBrowser.classList.add('hidden');\n        openBrowserBtn.textContent = 'Browse for folder...';\n      }\n    });\n  }\n\n  // --- Custom input for patterns (step 2) ---\n  var addCustomBtn = document.getElementById('add-custom');\n  var customInput = document.getElementById('custom-input');\n\n  function addCustomPattern() {\n    if (!customInput || !patternList) return;\n    var value = customInput.value.trim();\n    if (!value) return;\n    addPatternChip(value);\n    customInput.value = '';\n  }\n\n  if (addCustomBtn) {\n    addCustomBtn.addEventListener('click', addCustomPattern);\n  }\n  if (customInput) {\n    customInput.addEventListener('keydown', function(e) {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        addCustomPattern();\n      }\n    });\n  }\n\n  // --- Update Next button disabled state ---\n  function updateNextBtn() {\n    var btn = document.getElementById('next-btn');\n    if (!btn) return;\n    var hasSelection = getSelectedValues().length > 0;\n    btn.disabled = !hasSelection;\n    if (hasSelection) {\n      btn.classList.remove('opacity-50', 'cursor-not-allowed');\n    } else {\n      btn.classList.add('opacity-50', 'cursor-not-allowed');\n    }\n  }\n\n  // --- Collect selected values ---\n  function getSelectedValues() {\n    var values = [];\n    // Folder chips (step 1)\n    document.querySelectorAll('[data-folder-chip]').forEach(function(chip) {\n      values.push(chip.getAttribute('data-folder-chip'));\n    });\n    // Pattern chips (step 2)\n    document.querySelectorAll('[data-pattern-chip]').forEach(function(chip) {\n      values.push(chip.getAttribute('data-pattern-chip'));\n    });\n    return values;\n  }\n\n  // --- Initial button state ---\n  updateNextBtn();\n\n  // --- Step 1: Next button ---\n  var nextBtn = document.getElementById('next-btn');\n  if (nextBtn && nextBtn.getAttribute('data-step') === '1') {\n    nextBtn.addEventListener('click', function() {\n      var roots = getSelectedValues();\n      if (roots.length === 0) return;\n      var params = new URLSearchParams();\n      roots.forEach(function(r) { params.append('roots', r); });\n      // Preserve patterns if returning from step 2\n      var urlParams = new URLSearchParams(window.location.search);\n      urlParams.getAll('patterns').forEach(function(p) { params.append('patterns', p); });\n      window.location.href = '/setup/step2?' + params.toString();\n    });\n  }\n\n  // --- Step 2: Back button ---\n  var backBtn = document.getElementById('back-btn');\n  if (backBtn) {\n    backBtn.addEventListener('click', function() {\n      var urlParams = new URLSearchParams(window.location.search);\n      var roots = urlParams.getAll('roots');\n      var patterns = getSelectedValues();\n      var params = new URLSearchParams();\n      roots.forEach(function(r) { params.append('roots', r); });\n      patterns.forEach(function(p) { params.append('patterns', p); });\n      window.location.href = '/setup?' + params.toString();\n    });\n  }\n\n  // --- Step 2: Preview button ---\n  if (nextBtn && nextBtn.getAttribute('data-step') === '2') {\n    nextBtn.addEventListener('click', function() {\n      var patterns = getSelectedValues();\n      if (patterns.length === 0) return;\n      var urlParams = new URLSearchParams(window.location.search);\n      var roots = urlParams.getAll('roots');\n      var params = new URLSearchParams();\n      roots.forEach(function(r) { params.append('roots', r); });\n      patterns.forEach(function(p) { params.append('patterns', p); });\n      window.location.href = '/setup/step3?' + params.toString();\n    });\n  }\n\n  // --- Step 3: Select/deselect by group ---\n  document.querySelectorAll('[data-group-select]').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var group = btn.getAttribute('data-group-select');\n      var container = document.querySelector('[data-group=\"' + group + '\"]');\n      if (container) {\n        container.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n          cb.checked = true;\n        });\n      }\n    });\n  });\n  document.querySelectorAll('[data-group-deselect]').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var group = btn.getAttribute('data-group-deselect');\n      var container = document.querySelector('[data-group=\"' + group + '\"]');\n      if (container) {\n        container.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n          cb.checked = false;\n        });\n      }\n    });\n  });\n\n  // --- Step 3: Select all / Deselect all ---\n  var selectAllBtn = document.getElementById('select-all');\n  var deselectAllBtn = document.getElementById('deselect-all');\n\n  if (selectAllBtn) {\n    selectAllBtn.addEventListener('click', function() {\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        cb.checked = true;\n      });\n    });\n  }\n  if (deselectAllBtn) {\n    deselectAllBtn.addEventListener('click', function() {\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        cb.checked = false;\n      });\n    });\n  }\n\n  // --- Step 3: Confirm button ---\n  var confirmBtn = document.getElementById('confirm-btn');\n  if (confirmBtn) {\n    confirmBtn.addEventListener('click', function() {\n      confirmBtn.disabled = true;\n      confirmBtn.textContent = 'Saving...';\n\n      var urlParams = new URLSearchParams(window.location.search);\n      var roots = urlParams.getAll('roots');\n      var patterns = urlParams.getAll('patterns');\n\n      var excludedFiles = [];\n      document.querySelectorAll('input[name=\"files\"]').forEach(function(cb) {\n        if (!cb.checked) {\n          excludedFiles.push(cb.value);\n        }\n      });\n\n      fetch('/api/setup/confirm', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ roots: roots, patterns: patterns, excludedFiles: excludedFiles })\n      })\n      .then(function(res) { return res.json(); })\n      .then(function(data) {\n        if (data.success) {\n          window.location.href = '/setup/complete?count=' + data.trackedCount;\n        } else {\n          alert('Error saving config. Please try again.');\n          confirmBtn.disabled = false;\n          confirmBtn.textContent = 'Confirm & Start Tracking';\n        }\n      })\n      .catch(function() {\n        alert('Error saving config. Please try again.');\n        confirmBtn.disabled = false;\n        confirmBtn.textContent = 'Confirm & Start Tracking';\n      });\n    });\n  }\n});\n</script>";
 //# sourceMappingURL=wizard-client.d.ts.map

package/dist/dashboard/wizard-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-client.d.ts","sourceRoot":"","sources":["../../src/dashboard/wizard-client.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,83TAwQvB,CAAC"}
+{"version":3,"file":"wizard-client.d.ts","sourceRoot":"","sources":["../../src/dashboard/wizard-client.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,2pdA0ZvB,CAAC"}

package/dist/dashboard/wizard-client.js

@@ -1,65 +1,152 @@
 export const WIZARD_CLIENT_SCRIPT = `<script>
 document.addEventListener('DOMContentLoaded', function() {
-  // --- Chip toggling ---
-  document.querySelectorAll('[data-chip]').forEach(function(chip) {
-    chip.addEventListener('click', function() {
-      var isSelected = chip.getAttribute('data-selected') === 'true';
-      chip.setAttribute('data-selected', isSelected ? 'false' : 'true');
-      if (isSelected) {
-        chip.classList.remove('bg-blue-100', 'text-blue-800', 'border-blue-300');
-        chip.classList.add('bg-gray-100', 'text-gray-600', 'border-gray-300');
-      } else {
-        chip.classList.remove('bg-gray-100', 'text-gray-600', 'border-gray-300');
-        chip.classList.add('bg-blue-100', 'text-blue-800', 'border-blue-300');
-      }
+  // --- Pattern list (step 2) ---
+  var patternList = document.getElementById('pattern-list');
+  var suggestedPatternsDiv = document.getElementById('suggested-patterns');
+  var noPatternsMsg = document.getElementById('no-patterns-msg');
+
+  function updateNoPatternsMsg() {
+    if (!noPatternsMsg) return;
+    if (getSelectedValues().length === 0) {
+      noPatternsMsg.classList.remove('hidden');
+    } else {
+      noPatternsMsg.classList.add('hidden');
+    }
+  }
+
+  function addPatternChip(value) {
+    if (!patternList) return;
+    // Check for duplicates
+    var existing = patternList.querySelectorAll('[data-pattern-chip]');
+    for (var i = 0; i < existing.length; i++) {
+      if (existing[i].getAttribute('data-pattern-chip') === value) return;
+    }
+
+    var tag = document.createElement('span');
+    tag.setAttribute('data-pattern-chip', value);
+    tag.className = 'inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';
+    tag.innerHTML = value + ' <button type="button" class="ml-1 text-blue-500 hover:text-blue-700 font-bold">&times;</button>';
+    tag.querySelector('button').addEventListener('click', function() {
+      tag.remove();
+      updateNextBtn();
+      updateNoPatternsMsg();
     });
-  });
+    patternList.appendChild(tag);
+    updateNextBtn();
+    updateNoPatternsMsg();
+  }
 
-  // --- Folder browser ---
-  var openBrowserBtn = document.getElementById('open-browser');
-  var folderBrowser = document.getElementById('folder-browser');
-  var browserPath = document.getElementById('browser-path');
-  var browserList = document.getElementById('browser-list');
-  var browserUp = document.getElementById('browser-up');
-  var customList = document.getElementById('custom-list');
-  var browserAdd = document.getElementById('browser-add');
-  var currentBrowseDir = null;
+  // Wire up x buttons on server-rendered pattern chips
+  if (patternList) {
+    patternList.querySelectorAll('[data-pattern-chip] button').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        btn.parentElement.remove();
+        updateNextBtn();
+        updateNoPatternsMsg();
+      });
+    });
+  }
 
-  if (browserAdd) {
-    browserAdd.addEventListener('click', function() {
-      if (currentBrowseDir) addFolderChip(currentBrowseDir);
+  // Wire up suggested pattern chips — click to add
+  if (suggestedPatternsDiv) {
+    suggestedPatternsDiv.querySelectorAll('[data-suggested-pattern]').forEach(function(chip) {
+      chip.addEventListener('click', function() {
+        var value = chip.getAttribute('data-suggested-pattern');
+        addPatternChip(value);
+        chip.remove();
+        // Hide suggestions section if empty
+        if (suggestedPatternsDiv.children.length === 0) {
+          suggestedPatternsDiv.parentElement.style.display = 'none';
+        }
+      });
     });
   }
 
-  function addFolderChip(folderPath) {
-    if (!customList) return;
-    // Don't add duplicates
-    var existing = customList.querySelectorAll('[data-custom-value]');
-    for (var i = 0; i < existing.length; i++) {
-      if (existing[i].getAttribute('data-custom-value') === folderPath) return;
+  // --- Folder list (step 1) ---
+  var folderList = document.getElementById('folder-list');
+  var noFoldersMsg = document.getElementById('no-folders-msg');
+
+  function getAddedFolders() {
+    var folders = [];
+    if (!folderList) return folders;
+    folderList.querySelectorAll('[data-folder-chip]').forEach(function(chip) {
+      folders.push(chip.getAttribute('data-folder-chip'));
+    });
+    return folders;
+  }
+
+  function isFolderAdded(folderPath) {
+    var folders = getAddedFolders();
+    for (var i = 0; i < folders.length; i++) {
+      if (folders[i] === folderPath) return true;
+    }
+    return false;
+  }
+
+  function isCoveredByParent(folderPath) {
+    var folders = getAddedFolders();
+    for (var i = 0; i < folders.length; i++) {
+      // Check if an existing folder is a parent of this one
+      if (folderPath !== folders[i] && folderPath.indexOf(folders[i] + '/') === 0) return true;
     }
-    // Also check if it's already a suggested chip that's selected
-    var chips = document.querySelectorAll('[data-chip]');
-    for (var i = 0; i < chips.length; i++) {
-      if (chips[i].getAttribute('data-value') === folderPath) return;
+    return false;
+  }
+
+  function updateNoFoldersMsg() {
+    if (!noFoldersMsg) return;
+    if (getAddedFolders().length === 0) {
+      noFoldersMsg.classList.remove('hidden');
+    } else {
+      noFoldersMsg.classList.add('hidden');
     }
+  }
+
+  function removeFolderChip(chip) {
+    chip.remove();
+    updateNextBtn();
+    updateNoFoldersMsg();
+  }
+
+  function addFolderChip(folderPath) {
+    if (!folderList) return;
+    if (isFolderAdded(folderPath)) return;
 
     var tag = document.createElement('span');
-    tag.setAttribute('data-custom-value', folderPath);
-    tag.className = 'inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';
+    tag.setAttribute('data-folder-chip', folderPath);
+    tag.className = 'inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';
     tag.innerHTML = folderPath + ' <button type="button" class="ml-1 text-blue-500 hover:text-blue-700 font-bold">&times;</button>';
     tag.querySelector('button').addEventListener('click', function() {
-      tag.remove();
+      removeFolderChip(tag);
     });
-    customList.appendChild(tag);
+    folderList.appendChild(tag);
+    updateNextBtn();
+    updateNoFoldersMsg();
   }
 
+  // Wire up x buttons on server-rendered folder chips
+  if (folderList) {
+    folderList.querySelectorAll('[data-folder-chip] button').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        removeFolderChip(btn.parentElement);
+      });
+    });
+  }
+
+  // --- Folder browser ---
+  var openBrowserBtn = document.getElementById('open-browser');
+  var folderBrowser = document.getElementById('folder-browser');
+  var browserPath = document.getElementById('browser-path');
+  var browserList = document.getElementById('browser-list');
+  var browserUp = document.getElementById('browser-up');
+
+  var currentBrowserDir = null;
+
   function loadBrowserDir(dir) {
     fetch('/api/setup/browse?dir=' + encodeURIComponent(dir || '~'))
       .then(function(res) { return res.json(); })
       .then(function(data) {
         if (data.error) return;
-        currentBrowseDir = data.current;
+        currentBrowserDir = data.current;
         if (browserPath) browserPath.textContent = data.current;
         if (browserUp) {
           browserUp.style.display = data.parent ? '' : 'none';
@@ -69,12 +156,58 @@ document.addEventListener('DOMContentLoaded', function() {
         browserList.innerHTML = '';
 
         data.dirs.forEach(function(entry) {
+          var added = isFolderAdded(entry.path);
+          var covered = isCoveredByParent(entry.path);
+
           var row = document.createElement('div');
-          row.className = 'px-4 py-2 hover:bg-gray-50 cursor-pointer flex items-center gap-2 text-sm';
-          row.innerHTML = '<span class="text-gray-400">&#128193;</span> ' + entry.name;
-          row.addEventListener('click', function() {
+          row.className = 'px-4 py-2 hover:bg-gray-50 flex items-center gap-2 text-sm';
+
+          var folderIcon = document.createElement('span');
+          folderIcon.innerHTML = '&#128193;';
+          folderIcon.className = covered ? 'text-gray-300' : 'text-gray-400';
+
+          var nameSpan = document.createElement('span');
+          nameSpan.textContent = entry.name;
+          nameSpan.className = covered
+            ? 'cursor-pointer flex-1 text-gray-300'
+            : 'cursor-pointer flex-1 hover:text-blue-600';
+          nameSpan.addEventListener('click', function() {
             loadBrowserDir(entry.path);
           });
+
+          row.appendChild(folderIcon);
+          row.appendChild(nameSpan);
+
+          if (added) {
+            var removeBtn = document.createElement('button');
+            removeBtn.textContent = 'Remove';
+            removeBtn.type = 'button';
+            removeBtn.className = 'text-red-500 hover:text-red-700 text-xs font-medium flex-shrink-0';
+            removeBtn.addEventListener('click', function(e) {
+              e.stopPropagation();
+              var chips = folderList.querySelectorAll('[data-folder-chip]');
+              for (var i = 0; i < chips.length; i++) {
+                if (chips[i].getAttribute('data-folder-chip') === entry.path) {
+                  removeFolderChip(chips[i]);
+                  break;
+                }
+              }
+              loadBrowserDir(currentBrowserDir);
+            });
+            row.appendChild(removeBtn);
+          } else if (!covered) {
+            var addBtn = document.createElement('button');
+            addBtn.textContent = 'Add';
+            addBtn.type = 'button';
+            addBtn.className = 'text-blue-600 hover:text-blue-800 text-xs font-medium flex-shrink-0';
+            addBtn.addEventListener('click', function(e) {
+              e.stopPropagation();
+              addFolderChip(entry.path);
+              loadBrowserDir(currentBrowserDir);
+            });
+            row.appendChild(addBtn);
+          }
+
           browserList.appendChild(row);
         });
       });
@@ -89,86 +222,99 @@ document.addEventListener('DOMContentLoaded', function() {
         loadBrowserDir('~');
       } else {
         folderBrowser.classList.add('hidden');
-        openBrowserBtn.textContent = 'Browse folders...';
+        openBrowserBtn.textContent = 'Browse for folder...';
       }
     });
   }
 
   // --- Custom input for patterns (step 2) ---
-  var addBtn = document.getElementById('add-custom');
+  var addCustomBtn = document.getElementById('add-custom');
   var customInput = document.getElementById('custom-input');
 
-  function addCustomItem() {
-    if (!customInput || !customList) return;
+  function addCustomPattern() {
+    if (!customInput || !patternList) return;
     var value = customInput.value.trim();
     if (!value) return;
-
-    var existing = customList.querySelectorAll('[data-custom-value]');
-    for (var i = 0; i < existing.length; i++) {
-      if (existing[i].getAttribute('data-custom-value') === value) return;
-    }
-
-    var tag = document.createElement('span');
-    tag.setAttribute('data-custom-value', value);
-    tag.className = 'inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-300';
-    tag.innerHTML = value + ' <button type="button" class="ml-1 text-blue-500 hover:text-blue-700 font-bold">&times;</button>';
-    tag.querySelector('button').addEventListener('click', function() {
-      tag.remove();
-    });
-    customList.appendChild(tag);
+    addPatternChip(value);
     customInput.value = '';
   }
 
-  if (addBtn) {
-    addBtn.addEventListener('click', addCustomItem);
+  if (addCustomBtn) {
+    addCustomBtn.addEventListener('click', addCustomPattern);
   }
   if (customInput) {
     customInput.addEventListener('keydown', function(e) {
       if (e.key === 'Enter') {
         e.preventDefault();
-        addCustomItem();
+        addCustomPattern();
       }
     });
   }
 
+  // --- Update Next button disabled state ---
+  function updateNextBtn() {
+    var btn = document.getElementById('next-btn');
+    if (!btn) return;
+    var hasSelection = getSelectedValues().length > 0;
+    btn.disabled = !hasSelection;
+    if (hasSelection) {
+      btn.classList.remove('opacity-50', 'cursor-not-allowed');
+    } else {
+      btn.classList.add('opacity-50', 'cursor-not-allowed');
+    }
+  }
+
   // --- Collect selected values ---
   function getSelectedValues() {
     var values = [];
-    document.querySelectorAll('[data-chip][data-selected="true"]').forEach(function(chip) {
-      values.push(chip.getAttribute('data-value'));
+    // Folder chips (step 1)
+    document.querySelectorAll('[data-folder-chip]').forEach(function(chip) {
+      values.push(chip.getAttribute('data-folder-chip'));
+    });
+    // Pattern chips (step 2)
+    document.querySelectorAll('[data-pattern-chip]').forEach(function(chip) {
+      values.push(chip.getAttribute('data-pattern-chip'));
     });
-    if (customList) {
-      customList.querySelectorAll('[data-custom-value]').forEach(function(tag) {
-        values.push(tag.getAttribute('data-custom-value'));
-      });
-    }
     return values;
   }
 
+  // --- Initial button state ---
+  updateNextBtn();
+
   // --- Step 1: Next button ---
   var nextBtn = document.getElementById('next-btn');
   if (nextBtn && nextBtn.getAttribute('data-step') === '1') {
     nextBtn.addEventListener('click', function() {
       var roots = getSelectedValues();
-      if (roots.length === 0) {
-        alert('Please select at least one folder.');
-        return;
-      }
+      if (roots.length === 0) return;
       var params = new URLSearchParams();
       roots.forEach(function(r) { params.append('roots', r); });
+      // Preserve patterns if returning from step 2
+      var urlParams = new URLSearchParams(window.location.search);
+      urlParams.getAll('patterns').forEach(function(p) { params.append('patterns', p); });
       window.location.href = '/setup/step2?' + params.toString();
     });
   }
 
+  // --- Step 2: Back button ---
+  var backBtn = document.getElementById('back-btn');
+  if (backBtn) {
+    backBtn.addEventListener('click', function() {
+      var urlParams = new URLSearchParams(window.location.search);
+      var roots = urlParams.getAll('roots');
+      var patterns = getSelectedValues();
+      var params = new URLSearchParams();
+      roots.forEach(function(r) { params.append('roots', r); });
+      patterns.forEach(function(p) { params.append('patterns', p); });
+      window.location.href = '/setup?' + params.toString();
+    });
+  }
+
   // --- Step 2: Preview button ---
   if (nextBtn && nextBtn.getAttribute('data-step') === '2') {
     nextBtn.addEventListener('click', function() {
       var patterns = getSelectedValues();
-      if (patterns.length === 0) {
-        alert('Please select at least one pattern.');
-        return;
-      }
-      // Get roots from URL
+      if (patterns.length === 0) return;
       var urlParams = new URLSearchParams(window.location.search);
       var roots = urlParams.getAll('roots');
       var params = new URLSearchParams();