create-walle 0.9.3 → 0.9.4

package/template/claude-task-manager/public/js/walle.js

@@ -55,6 +55,13 @@ function apiPut(path, body) {
   }).then(function(r) { return r.json(); });
 }
 
+function apiDelete(path) {
+  var token = window._ctmState?.token || '';
+  return fetch(WALLE_BASE + '/api/wall-e' + path + '?token=' + token, {
+    method: 'DELETE'
+  }).then(function(r) { return r.json(); });
+}
+
 // Sanitize all user content — uses DOMPurify if available, otherwise manual escaping.
 // SECURITY: Every piece of user-generated data MUST pass through this function before
 // being placed into innerHTML. This prevents XSS by either sanitizing via DOMPurify
@@ -174,9 +181,14 @@ function renderMarkdown(s) {
 
 function timeAgo(ts) {
   if (!ts) return '';
-  var d = new Date(ts);
+  // SQLite datetime('now') stores UTC without timezone suffix — append Z if missing
+  var s = String(ts);
+  if (/^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}/.test(s) && !/[Z+-]\d{0,4}$/.test(s)) s += 'Z';
+  var d = new Date(s);
+  if (isNaN(d.getTime())) return ts;
   var now = new Date();
   var diff = Math.floor((now - d) / 1000);
+  if (diff < 0) return 'just now';
   if (diff < 60) return diff + 's ago';
   if (diff < 3600) return Math.floor(diff/60) + 'm ago';
   if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
@@ -208,6 +220,13 @@ WE._closeMoreTabsOutside = function(e) {
   if (!document.getElementById('we-more-wrap').contains(e.target)) WE.closeMoreTabs();
 };
 
+// Stop background pollers when leaving WALL-E tab (prevents jank in session terminals)
+WE.pausePollers = function() {
+  Object.keys(_logPollers).forEach(_stopLogPoller);
+  if (_taskRefreshTimer) { clearInterval(_taskRefreshTimer); _taskRefreshTimer = null; }
+  if (_thinkingTimer) { clearInterval(_thinkingTimer); _thinkingTimer = null; }
+};
+
 WE.showView = function(view) {
   // Clean up task pollers/timers when leaving tasks view
   if (currentView === 'tasks' && view !== 'tasks') {
@@ -804,11 +823,13 @@ WE._toggleAnswered = function() {
 WE.renderStatus = function() {
   Promise.all([
     api('/status'),
-    api('/stats')
+    api('/stats'),
+    api('/config')
   ]).then(function(results) {
     var status = results[0].data || results[0] || {};
     var stats = results[1].data || results[1] || {};
-    renderStatusContent(status, stats);
+    var config = results[2].data || results[2] || {};
+    renderStatusContent(status, stats, config);
     // Try to load daily brief
     var today = new Date().toISOString().slice(0, 10);
     api('/brief?date=' + today).then(function(brief) {
@@ -833,7 +854,7 @@ WE.renderStatus = function() {
   });
 };
 
-function renderStatusContent(status, stats) {
+function renderStatusContent(status, stats, config) {
   var body = document.getElementById('walle-body');
   if (!body) return;
 
@@ -867,11 +888,133 @@ function renderStatusContent(status, stats) {
     html += '</div>';
   }
 
+  // Channels settings
+  html += renderChannelsSettings(config);
+
   html += '<div id="walle-daily-brief"><div class="walle-empty">No daily summary yet.</div></div>';
 
   safeSetHtml(body, html);
 }
 
+function renderChannelsSettings(config) {
+  var channels = (config && config.channels) || {};
+  var tg = channels.telegram || {};
+  var slack = channels.slack_dm || {};
+  var imsg = channels.imessage || {};
+
+  var html = '<div class="walle-section-title" style="margin-top:16px">Channels</div>';
+  html += '<div class="walle-card" style="padding:12px 16px">';
+
+  // Telegram
+  html += '<div style="margin-bottom:14px">';
+  html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">';
+  html += '<strong style="font-size:13px">Telegram</strong>';
+  html += '<label style="display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer">';
+  html += '<input type="checkbox" id="we-cfg-tg-enabled" ' + (tg.enabled ? 'checked' : '') + '> Enabled';
+  html += '</label>';
+  html += '</div>';
+  html += '<div style="display:flex;flex-direction:column;gap:6px">';
+  html += '<div style="display:flex;align-items:center;gap:8px">';
+  html += '<label style="font-size:11px;color:var(--fg-muted,#888);width:80px;flex-shrink:0">Bot Token</label>';
+  html += '<input type="password" id="we-cfg-tg-token" value="' + esc(tg.bot_token || '') + '" placeholder="From @BotFather" style="flex:1;font-size:12px;padding:4px 8px;background:var(--bg-input,#1a1a2e);color:var(--fg,#e0e0e0);border:1px solid var(--border,#333);border-radius:4px">';
+  html += '</div>';
+  html += '<div style="display:flex;align-items:center;gap:8px">';
+  html += '<label style="font-size:11px;color:var(--fg-muted,#888);width:80px;flex-shrink:0">Owner Chat ID</label>';
+  html += '<input type="text" id="we-cfg-tg-chatid" value="' + esc(String(tg.owner_chat_id || '')) + '" placeholder="Send /whoami to your bot" style="flex:1;font-size:12px;padding:4px 8px;background:var(--bg-input,#1a1a2e);color:var(--fg,#e0e0e0);border:1px solid var(--border,#333);border-radius:4px">';
+  html += '</div>';
+  html += '<div style="font-size:10px;color:var(--fg-dim,#666);margin-top:2px">Create a bot via <a href="https://t.me/BotFather" target="_blank" style="color:var(--accent,#7b68ee)">@BotFather</a>, then message it and send /whoami to get your chat ID.</div>';
+  html += '</div></div>';
+
+  // Divider
+  html += '<div style="border-top:1px solid var(--border,#333);margin:10px 0"></div>';
+
+  // iMessage
+  html += '<div style="margin-bottom:14px">';
+  html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">';
+  html += '<strong style="font-size:13px">iMessage</strong>';
+  html += '<label style="display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer">';
+  html += '<input type="checkbox" id="we-cfg-imsg-enabled" ' + (imsg.enabled ? 'checked' : '') + '> Enabled';
+  html += '</label>';
+  html += '</div>';
+  html += '<div style="display:flex;align-items:center;gap:8px">';
+  html += '<label style="font-size:11px;color:var(--fg-muted,#888);width:80px;flex-shrink:0">Buddy ID</label>';
+  html += '<input type="text" id="we-cfg-imsg-buddy" value="' + esc(imsg.buddy_id || '') + '" placeholder="Phone or email" style="flex:1;font-size:12px;padding:4px 8px;background:var(--bg-input,#1a1a2e);color:var(--fg,#e0e0e0);border:1px solid var(--border,#333);border-radius:4px">';
+  html += '</div></div>';
+
+  // Divider
+  html += '<div style="border-top:1px solid var(--border,#333);margin:10px 0"></div>';
+
+  // Slack DM
+  html += '<div style="margin-bottom:14px">';
+  html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">';
+  html += '<strong style="font-size:13px">Slack DM</strong>';
+  html += '<label style="display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer">';
+  html += '<input type="checkbox" id="we-cfg-slack-enabled" ' + (slack.enabled ? 'checked' : '') + '> Enabled';
+  html += '</label>';
+  html += '</div>';
+  html += '<div style="display:flex;align-items:center;gap:8px">';
+  html += '<label style="font-size:11px;color:var(--fg-muted,#888);width:80px;flex-shrink:0">Bot Token</label>';
+  html += '<input type="password" id="we-cfg-slack-token" value="' + esc(slack.bot_token || '') + '" placeholder="xoxb-..." style="flex:1;font-size:12px;padding:4px 8px;background:var(--bg-input,#1a1a2e);color:var(--fg,#e0e0e0);border:1px solid var(--border,#333);border-radius:4px">';
+  html += '</div></div>';
+
+  // Save button
+  html += '<div style="display:flex;gap:8px;margin-top:12px">';
+  html += '<button class="walle-btn primary" onclick="WE._saveChannelConfig()" id="we-cfg-save-btn">Save</button>';
+  html += '<span id="we-cfg-save-msg" style="font-size:11px;color:var(--fg-muted,#888);align-self:center"></span>';
+  html += '</div>';
+
+  html += '</div>';
+  return html;
+}
+
+WE._saveChannelConfig = function() {
+  var payload = {
+    channels: {
+      telegram: {
+        enabled: document.getElementById('we-cfg-tg-enabled').checked,
+        bot_token: document.getElementById('we-cfg-tg-token').value.trim(),
+        owner_chat_id: parseInt(document.getElementById('we-cfg-tg-chatid').value.trim(), 10) || null
+      },
+      imessage: {
+        enabled: document.getElementById('we-cfg-imsg-enabled').checked,
+        buddy_id: document.getElementById('we-cfg-imsg-buddy').value.trim()
+      },
+      slack_dm: {
+        enabled: document.getElementById('we-cfg-slack-enabled').checked,
+        bot_token: document.getElementById('we-cfg-slack-token').value.trim()
+      }
+    }
+  };
+
+  var btn = document.getElementById('we-cfg-save-btn');
+  var msg = document.getElementById('we-cfg-save-msg');
+  btn.disabled = true;
+  btn.textContent = 'Saving...';
+  msg.textContent = '';
+
+  fetch('/api/wall-e/config', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    btn.disabled = false;
+    btn.textContent = 'Save';
+    if (data.error) {
+      msg.textContent = 'Error: ' + data.error;
+      msg.style.color = '#e74c3c';
+    } else {
+      msg.textContent = data.message || 'Saved!';
+      msg.style.color = '#2ecc71';
+      setTimeout(function() { msg.textContent = ''; }, 4000);
+    }
+  }).catch(function(err) {
+    btn.disabled = false;
+    btn.textContent = 'Save';
+    msg.textContent = 'Error: ' + err.message;
+    msg.style.color = '#e74c3c';
+  });
+};
+
 // ---- Chat View ----
 var chatHistory = [];
 var chatHistoryLoaded = false;
@@ -882,6 +1025,39 @@ var activeChatController = null; // AbortController for in-flight request
 var lastEscTime = 0;         // for double-ESC detection
 var chatAttachments = [];     // pending image/file attachments [{type, name, data}]
 var editingMessageIndex = -1; // index of message being edited, -1 = none
+// ChatGPT-style branching: when user edits & resends, old continuation is saved
+// chatBranches[splitIndex] = [ [branch0_messages], [branch1_messages], ... ]
+// chatBranchActive[splitIndex] = which branch index is currently shown
+var chatBranches = {};       // { splitIndex: [ [...msgs], [...msgs] ] }
+var chatBranchActive = {};   // { splitIndex: activeIdx }
+
+// Persist branches to SQLite via API so they survive page reloads.
+// Also saves a snapshot of chatHistory so it can be reconstructed if chat_messages
+// table gets cleared (e.g. by a failed _syncDbFull).
+function _saveBranches() {
+  apiPost('/chat/branches', {
+    session_id: 'default',
+    branches: chatBranches,
+    active: chatBranchActive,
+    history: chatHistory,
+  }).catch(function(e) { console.warn('[WALL-E] Branch save failed:', e); });
+}
+function _loadBranches(callback) {
+  api('/chat/branches?session_id=default').then(function(resp) {
+    var d = resp.data || {};
+    chatBranches = d.branches || {};
+    chatBranchActive = d.active || {};
+    // If chatHistory is empty but we have a saved snapshot, restore from it
+    if (chatHistory.length === 0 && Array.isArray(d.history) && d.history.length > 0) {
+      chatHistory = d.history;
+    }
+    if (callback) callback();
+  }).catch(function() {
+    chatBranches = {};
+    chatBranchActive = {};
+    if (callback) callback();
+  });
+}
 var chatSearchQuery = '';     // current search query
 var chatSearchResults = [];   // search results from API
 var chatSearchDone = false;   // true when search has completed
@@ -918,7 +1094,21 @@ WE.renderChat = function() {
           }
         }
       }
-      renderChatUI();
+      // Load branches from DB, reconcile chatHistory with active branch, then render
+      _loadBranches(function() {
+        // Reconstruct chatHistory from active branch data if available.
+        // This handles cases where chat_messages DB was cleared but branches survived.
+        var splitKeys = Object.keys(chatBranches).map(Number).sort(function(a,b){return a-b;});
+        for (var si = 0; si < splitKeys.length; si++) {
+          var splitIdx = splitKeys[si];
+          var activeIdx = chatBranchActive[splitIdx] || 0;
+          var branchTail = (chatBranches[splitIdx] || [])[activeIdx];
+          if (Array.isArray(branchTail) && branchTail.length > 0 && branchTail[0] && branchTail[0].role) {
+            chatHistory = chatHistory.slice(0, splitIdx).concat(branchTail);
+          }
+        }
+        renderChatUI();
+      });
     }).catch(function() { renderChatUI(); });
     return;
   }
@@ -991,6 +1181,16 @@ function renderChatUI() {
         html += '<div class="walle-chat-msg-role user">You';
         html += ' <button class="we-edit-btn" onclick="WE._editMessage(' + i + ')" title="Edit & resend">&#9998;</button>';
         html += ' <button class="we-edit-btn we-delete-btn" onclick="WE._deleteMessage(' + i + ')" title="Delete this exchange">&#128465;</button>';
+        // Branch navigation arrows (ChatGPT-style)
+        if (chatBranches[i] && chatBranches[i].length > 1) {
+          var bIdx = chatBranchActive[i] || 0;
+          var bTotal = chatBranches[i].length;
+          html += '<span class="we-branch-nav">';
+          html += '<button class="we-branch-btn' + (bIdx <= 0 ? ' disabled' : '') + '" onclick="event.stopPropagation();WE._switchBranch(' + i + ',-1)" title="Previous version">&lsaquo;</button>';
+          html += '<span class="we-branch-label">' + (bIdx + 1) + '/' + bTotal + '</span>';
+          html += '<button class="we-branch-btn' + (bIdx >= bTotal - 1 ? ' disabled' : '') + '" onclick="event.stopPropagation();WE._switchBranch(' + i + ',1)" title="Next version">&rsaquo;</button>';
+          html += '</span>';
+        }
         html += '</div>';
         if (editingMessageIndex === i) {
           html += '<div class="we-edit-row">';
@@ -1411,10 +1611,25 @@ function _finishStreaming(reply) {
   chatThinkingState.startTime = null;
   if (reply) {
     chatHistory.push({ role: 'assistant', text: reply });
+    // Update the active branch with the assistant reply
+    _updateActiveBranch();
   }
   WE.renderChat();
 }
 
+// Keep active branch data in sync with chatHistory
+function _updateActiveBranch() {
+  Object.keys(chatBranches).forEach(function(k) {
+    var splitIdx = parseInt(k);
+    var activeIdx = chatBranchActive[splitIdx] || 0;
+    // Update the active branch's messages from the current chatHistory
+    if (splitIdx < chatHistory.length) {
+      chatBranches[splitIdx][activeIdx] = chatHistory.slice(splitIdx);
+    }
+  });
+  _saveBranches();
+}
+
 WE._sendChat = function() {
   var input = document.getElementById('walle-chat-input');
   if (!input || (!input.value.trim() && chatAttachments.length === 0)) return;
@@ -1524,9 +1739,27 @@ WE._submitEdit = function(idx) {
   var newText = editInput.value.trim();
   editingMessageIndex = -1;
 
+  // Save old continuation as a branch before truncating
+  var oldTail = chatHistory.slice(idx); // includes the old user msg + assistant reply + rest
+  if (oldTail.length > 0) {
+    if (!chatBranches[idx]) {
+      // First edit at this point — save the original as branch 0
+      chatBranches[idx] = [oldTail];
+      chatBranchActive[idx] = 1; // new branch will be index 1
+    } else {
+      chatBranchActive[idx] = chatBranches[idx].length; // new branch index
+    }
+    // New branch starts with just the user message — assistant reply added by _finishStreaming
+    chatBranches[idx].push([{ role: 'user', text: newText }]);
+    _saveBranches();
+  }
+
   // Branch: truncate history from this point and resend
-  chatHistory = chatHistory.slice(0, idx);
-  chatHistory.push({ role: 'user', text: newText });
+  var prefix = chatHistory.slice(0, idx); // messages to preserve
+  chatHistory = prefix.concat([{ role: 'user', text: newText }]);
+
+  // Sync DB: clear and re-insert the prefix. The backend's chat() will add user+assistant.
+  _syncDbPrefix(prefix);
 
   // Add to user message history
   if (userMessageHistory.length === 0 || userMessageHistory[0] !== newText) {
@@ -1537,6 +1770,63 @@ WE._submitEdit = function(idx) {
   _streamChat(newText, []);
 };
 
+// Switch to a different branch at a given split point
+WE._switchBranch = function(splitIdx, direction) {
+  var branches = chatBranches[splitIdx];
+  if (!branches) return;
+  var cur = chatBranchActive[splitIdx] || 0;
+  var next = cur + direction;
+  if (next < 0 || next >= branches.length) return;
+
+  // Save current tail back to its branch slot
+  chatBranches[splitIdx][cur] = chatHistory.slice(splitIdx);
+
+  // Switch to the target branch
+  chatBranchActive[splitIdx] = next;
+  chatHistory = chatHistory.slice(0, splitIdx).concat(branches[next]);
+
+  // Clear any sub-branches that started after this split point
+  // (they belong to the old branch's indices and are invalid now)
+  Object.keys(chatBranches).forEach(function(k) {
+    if (parseInt(k) > splitIdx) {
+      delete chatBranches[k];
+      delete chatBranchActive[k];
+    }
+  });
+
+  _saveBranches();
+  renderChatUI();
+  // Note: we intentionally do NOT call _syncDbFull() here.
+  // _syncDbFull clears chat_messages then re-inserts — if inserts fail, the DB
+  // is left empty and the next reload loses history. Branch data (persisted via
+  // _saveBranches) is sufficient; chatHistory is reconstructed on load.
+};
+
+// Sync DB: clear session and re-insert messages. In-memory chatHistory is the
+// source of truth; DB sync is best-effort. Errors are logged but don't block UI.
+function _syncDbPrefix(messages) {
+  apiPost('/chat/clear', { session_id: 'default' }).then(function() {
+    var chain = Promise.resolve();
+    messages.forEach(function(msg) {
+      chain = chain.then(function() {
+        return apiPost('/chat/insert', {
+          session_id: 'default',
+          role: msg.role,
+          content: msg.text,
+        });
+      });
+    });
+    return chain;
+  }).catch(function(err) {
+    console.warn('[WALL-E] DB sync failed (in-memory history is unaffected):', err);
+  });
+}
+
+// Sync DB with full chatHistory (used after branch switch, not during edit)
+function _syncDbFull() {
+  _syncDbPrefix(chatHistory);
+}
+
 // ---- Chat Select & Export ----
 WE._toggleSelectMode = function() {
   chatSelectMode = !chatSelectMode;
@@ -1856,6 +2146,15 @@ WE.renderTasks = function() {
   ]).then(function(results) {
     var tasks = results[0].data || [];
     var items = results[1].data || [];
+    // Rewrite Slack URLs to enterprise domain across all text fields
+    tasks.forEach(function(t) {
+      if (t.source === 'slack') {
+        var fix = function(s) { return s ? s.replace(/https:\/\/(\w+)\.slack\.com\//g, 'https://$1.enterprise.slack.com/') : s; };
+        t.source_ref = fix(t.source_ref);
+        t.description = fix(t.description);
+        t.result = fix(t.result);
+      }
+    });
     cache.allTasks = tasks;
     cache.briefingItems = items;
     // Index items by task_id and skill for quick lookup
@@ -1919,18 +2218,20 @@ WE._reconnectSlack = function() {
         if (resp.data && resp.data.authenticated) {
           clearInterval(poll);
           if (typeof showToast === 'function') showToast('Slack reconnected! Resuming tasks...', '#5c940d', 5000);
-          // Resume all paused/failed Slack tasks and clear their errors
-          var updates = [];
-          (cache.allTasks || []).forEach(function(t) {
-            var isSlackTask = t.script && t.script.includes('slack');
-            var needsResume = isSlackTask && (t.status === 'paused' || t.status === 'failed');
-            var needsClearError = isSlackTask && t.error && (t.error.includes('Slack token expired') || t.error.includes('invalid_auth'));
-            if (needsResume || needsClearError) {
-              updates.push(apiPut('/tasks/' + t.id, { status: 'pending', error: null, result: null }));
-            }
-          });
-          // Wait for all updates to complete, then refresh
-          Promise.all(updates).then(function() {
+          // Fetch fresh task list, then resume paused/failed Slack tasks and clear errors
+          api('/tasks').then(function(taskResp) {
+            var freshTasks = (taskResp.data || taskResp || []);
+            var updates = [];
+            freshTasks.forEach(function(t) {
+              var isSlackTask = t.script && t.script.includes('slack');
+              var needsResume = isSlackTask && (t.status === 'paused' || t.status === 'failed');
+              var needsClearError = isSlackTask && t.error && (t.error.includes('Slack token expired') || t.error.includes('invalid_auth'));
+              if (needsResume || needsClearError) {
+                updates.push(apiPut('/tasks/' + t.id, { status: 'pending', error: null, result: null }));
+              }
+            });
+            return Promise.all(updates);
+          }).then(function() {
             WE.renderTasks();
           }).catch(function() {
             WE.renderTasks();
@@ -2093,11 +2394,25 @@ function _renderTasksContentInner(tasks) {
     html += '</div>';
   }
 
-  // Slack auth banner
-  var hasSlackAuthError = allTasks.some(function(t) {
-    return t.error && (t.error.includes('Slack token expired') || t.error.includes('invalid_auth'));
+  // Slack auth banner — only show for tasks that are still actionable (not completed/cancelled)
+  var slackErrorTasks = allTasks.filter(function(t) {
+    return t.status !== 'completed' && t.status !== 'cancelled' && t.status !== 'dismissed' &&
+      t.error && (t.error.includes('Slack token expired') || t.error.includes('invalid_auth'));
   });
-  if (hasSlackAuthError) {
+  if (slackErrorTasks.length > 0) {
+    // Check if Slack is actually connected now — if so, auto-clear stale errors
+    if (!WE._slackAutoClearing) {
+      WE._slackAutoClearing = true;
+      api('/slack/status').then(function(resp) {
+        WE._slackAutoClearing = false;
+        if (resp.data && resp.data.authenticated) {
+          var updates = slackErrorTasks.map(function(t) {
+            return apiPut('/tasks/' + t.id, { status: 'pending', error: null, result: null });
+          });
+          Promise.all(updates).then(function() { WE.renderTasks(); });
+        }
+      }).catch(function() { WE._slackAutoClearing = false; });
+    }
     html += '<div class="we-task-alert">';
     html += '<span class="we-task-alert-icon">\u26A0\uFE0F</span>';
     html += '<span class="we-task-alert-text">Slack disconnected — tasks paused. </span>';
@@ -2615,10 +2930,9 @@ function renderTaskCard(t) {
     html += '<span class="we-task-running-timer" data-start-ms="' + startMs + '" style="color:#228be6">\u23F3 ' + elStr + '</span>';
   }
   if (t.run_count > 0 && !isExpanded) html += '<span>' + t.run_count + ' runs</span>';
-  // Slack source_ref link (rewrite to enterprise domain if needed)
+  // Slack source_ref link
   if (t.source === 'slack' && t.source_ref) {
-    var slackUrl = t.source_ref.replace(/^(https:\/\/\w+)\.slack\.com/, '$1.enterprise.slack.com');
-    html += '<a class="we-src-link" href="' + esc(slackUrl) + '" target="_blank" onclick="event.stopPropagation()" title="Open Slack thread">\u2197 thread</a>';
+    html += '<a class="we-src-link" href="' + esc(t.source_ref) + '" target="_blank" onclick="event.stopPropagation()" title="Open Slack thread">\u2197 thread</a>';
   }
   // Compact inline actions
   if (!isExpanded) {
@@ -3271,77 +3585,191 @@ WE._saveTaskEdit = function(id) {
 };
 
 // ---- Skills View ----
+
+// Skills state
+var _skillsData = [];
+var _skillsSuggestions = {};
+var _skillsFilter = { search: '', category: 'All', status: 'All', sort: 'name' };
+var _skillDetailOpen = null; // skill id or null
+var _skillDetailTab = 'overview';
+var _skillEditorMode = null; // null, 'create', or skill id
+
 WE.renderSkills = function() {
   Promise.all([
     api('/skills'),
     api('/skills/suggestions')
   ]).then(function(results) {
-    var skills = results[0].data || [];
-    var suggestions = results[1].data || {};
-    if (!Array.isArray(skills)) skills = [];
-    renderSkillsContent(skills, suggestions);
+    _skillsData = results[0].data || [];
+    if (!Array.isArray(_skillsData)) _skillsData = [];
+    _skillsSuggestions = results[1].data || {};
+    renderSkillsContent(_skillsData, _skillsSuggestions);
   }).catch(function(err) {
     var body = document.getElementById('walle-body');
     if (body) { body.textContent = ''; var d = document.createElement('div'); d.className = 'walle-empty'; d.textContent = 'Failed to load skills: ' + (err.message || ''); body.appendChild(d); }
   });
 };
 
+// Re-filter and re-render only the card list (no API call, preserves search focus)
+function _refilterSkillCards() {
+  var container = document.getElementById('we-skills-card-list');
+  if (!container) return;
+  var filtered = filterSkills(_skillsData, _skillsFilter);
+  var html = '';
+  if (filtered.length === 0) {
+    html = '<div class="walle-empty">No skills match your filters.</div>';
+  }
+  filtered.forEach(function(s) { html += renderSkillCard(s); });
+  safeSetHtml(container, html);
+  // Update category pills active state
+  var pills = document.querySelectorAll('#we-skills-cat-pills .we-skills-pill');
+  pills.forEach(function(pill) {
+    if (pill.getAttribute('data-cat') === _skillsFilter.category) pill.classList.add('active');
+    else pill.classList.remove('active');
+  });
+}
+
+function getSkillCategories(skills) {
+  var cats = new Set();
+  skills.forEach(function(s) {
+    (s.tags || []).forEach(function(t) { cats.add(t); });
+  });
+  return ['All'].concat(Array.from(cats).sort());
+}
+
+function filterSkills(skills, f) {
+  var result = skills;
+  if (f.search) {
+    var q = f.search.toLowerCase();
+    result = result.filter(function(s) {
+      return (s.name || '').toLowerCase().includes(q) ||
+             (s.description || '').toLowerCase().includes(q) ||
+             (s.tags || []).join(' ').toLowerCase().includes(q);
+    });
+  }
+  if (f.category && f.category !== 'All') {
+    result = result.filter(function(s) { return (s.tags || []).indexOf(f.category) !== -1; });
+  }
+  if (f.status && f.status !== 'All') {
+    if (f.status === 'Enabled') result = result.filter(function(s) { return s.enabled; });
+    else if (f.status === 'Disabled') result = result.filter(function(s) { return !s.enabled; });
+    else if (f.status === 'Failing') result = result.filter(function(s) { return s.last_result === 'failure'; });
+  }
+  // Sort
+  result.sort(function(a, b) {
+    if (f.sort === 'last_run') return (b.last_run || '').localeCompare(a.last_run || '');
+    if (f.sort === 'runs') return ((b.success_count + b.failure_count) - (a.success_count + a.failure_count));
+    if (f.sort === 'success') {
+      var aRate = (a.success_count + a.failure_count) > 0 ? a.success_count / (a.success_count + a.failure_count) : -1;
+      var bRate = (b.success_count + b.failure_count) > 0 ? b.success_count / (b.success_count + b.failure_count) : -1;
+      return bRate - aRate;
+    }
+    return (a.name || '').localeCompare(b.name || '');
+  });
+  return result;
+}
+
 function renderSkillsContent(skills, suggestions) {
   var body = document.getElementById('walle-body');
   if (!body) return;
   var html = '';
 
+  // Analytics summary bar
+  var totalSkills = skills.length;
+  var enabledCount = skills.filter(function(s) { return s.enabled; }).length;
+  var now = new Date();
+  var day = 24 * 60 * 60 * 1000;
+  var ran24h = skills.filter(function(s) { return s.last_run && (now - new Date(s.last_run)) < day; }).length;
+  var totalRuns = 0, totalSuccess = 0, failingCount = 0;
+  skills.forEach(function(s) {
+    totalRuns += (s.success_count || 0) + (s.failure_count || 0);
+    totalSuccess += s.success_count || 0;
+    if (s.last_result === 'failure' && s.enabled) failingCount++;
+  });
+  var overallRate = totalRuns > 0 ? Math.round(totalSuccess / totalRuns * 100) : 0;
+
+  // Count by source
+  var srcCounts = {};
+  skills.forEach(function(s) { var src = s.source || 'unknown'; srcCounts[src] = (srcCounts[src] || 0) + 1; });
+  var srcParts = Object.keys(srcCounts).map(function(k) { return srcCounts[k] + ' ' + k; });
+
+  html += '<div class="we-skills-analytics">';
+  html += '<div class="we-skills-analytics-item"><div class="we-skills-analytics-value">' + totalSkills + '</div><div class="we-skills-analytics-label">Total (' + esc(srcParts.join(', ')) + ')</div></div>';
+  html += '<div class="we-skills-analytics-item"><div class="we-skills-analytics-value">' + enabledCount + '</div><div class="we-skills-analytics-label">Enabled</div></div>';
+  html += '<div class="we-skills-analytics-item"><div class="we-skills-analytics-value">' + ran24h + '</div><div class="we-skills-analytics-label">Run in 24h</div></div>';
+  html += '<div class="we-skills-analytics-item"><div class="we-skills-analytics-value">' + overallRate + '%</div><div class="we-skills-analytics-label">Success Rate</div></div>';
+  if (failingCount > 0) {
+    html += '<div class="we-skills-analytics-item failing" onclick="WE._filterSkills(\'Failing\')"><div class="we-skills-analytics-value">' + failingCount + '</div><div class="we-skills-analytics-label">Failing</div></div>';
+  }
+  html += '</div>';
+
+  // Toolbar: search + filters + sort + actions
+  var categories = getSkillCategories(skills);
+  html += '<div class="we-skills-toolbar">';
+  html += '<input type="text" class="we-skills-search" id="we-skills-search" placeholder="Search skills..." value="' + esc(_skillsFilter.search) + '">';
+
+  html += '<div class="we-skills-pills" id="we-skills-cat-pills">';
+  categories.forEach(function(c) {
+    var active = _skillsFilter.category === c ? ' active' : '';
+    html += '<button class="we-skills-pill' + active + '" data-cat="' + esc(c) + '">' + esc(c) + '</button>';
+  });
+  html += '</div>';
+
+  html += '<select class="walle-filter-select" id="we-skills-status">';
+  ['All', 'Enabled', 'Disabled', 'Failing'].forEach(function(s) {
+    html += '<option' + (_skillsFilter.status === s ? ' selected' : '') + '>' + s + '</option>';
+  });
+  html += '</select>';
+
+  html += '<select class="walle-filter-select" id="we-skills-sort">';
+  [['name','Name'],['last_run','Last Run'],['success','Success Rate'],['runs','Run Count']].forEach(function(p) {
+    html += '<option value="' + p[0] + '"' + (_skillsFilter.sort === p[0] ? ' selected' : '') + '>' + p[1] + '</option>';
+  });
+  html += '</select>';
+
+  html += '<button class="walle-btn primary" onclick="WE._openSkillEditor()">+ New Skill</button>';
+  html += '<button class="walle-btn" onclick="WE._importSkillPrompt()">Import</button>';
+  html += '</div>';
+
   // Check for Slack ingest skill and show special progress section
   var slackSkill = skills.find(function(s) { return s.name === 'ingest-slack-history'; });
   if (slackSkill) {
-    html += '<div class="walle-section-title">Slack History Ingestion</div>';
     html += '<div class="walle-card" id="walle-slack-ingest-card">';
-    html += '<div class="walle-card-body"><div class="walle-loading">Loading progress...</div></div>';
+    html += '<div class="walle-card-body"><div class="walle-loading">Loading Slack ingest progress...</div></div>';
     html += '</div>';
   }
 
-  // Active skills
-  html += '<div class="walle-section-title">Learned Skills (' + skills.length + ')</div>';
-  if (skills.length === 0) {
-    html += '<div class="walle-empty">No skills yet. WALL-E will create bootstrap skills on next daemon restart.</div>';
+  // Filtered skill cards (in a container for fast re-filter without full re-render)
+  var filtered = filterSkills(skills, _skillsFilter);
+  html += '<div id="we-skills-card-list">';
+  if (filtered.length === 0) {
+    html += '<div class="walle-empty">No skills match your filters.</div>';
   }
-  skills.forEach(function(s) {
-    var rate = (s.success_count + s.failure_count) > 0
-      ? Math.round(s.success_count / (s.success_count + s.failure_count) * 100) + '%' : 'N/A';
-    var enabledLabel = s.enabled ? 'Enabled' : 'Disabled';
-    var enabledColor = s.enabled ? '#5c940d' : '#888';
-    html += '<div class="walle-action-card">';
-    html += '<div class="walle-action-header">';
-    html += '<span class="walle-action-type">' + esc(s.name) + '</span>';
-    html += '<span style="color:' + enabledColor + ';font-size:11px">' + enabledLabel + ' | Success: ' + esc(rate) + '</span>';
-    html += '</div>';
-    html += '<div class="walle-card-body">' + esc(s.description || '') + '</div>';
-    html += '<div class="walle-card-meta">Trigger: ' + esc(s.trigger_type || 'interval') + ' | Runs: ' + (s.success_count + s.failure_count) + ' | Last: ' + esc(timeAgo(s.last_run)) + '</div>';
-    html += '<div class="walle-action-buttons" style="margin-top:6px">';
-    html += '<button class="walle-btn primary" onclick="WE._runSkill(\'' + esc(s.id) + '\')">Run Now</button>';
-    html += '<button class="walle-btn" onclick="WE._toggleSkill(\'' + esc(s.id) + '\',' + (s.enabled ? 0 : 1) + ')">' + (s.enabled ? 'Disable' : 'Enable') + '</button>';
-    html += '</div></div>';
+  filtered.forEach(function(s) {
+    html += renderSkillCard(s);
   });
+  html += '</div>';
 
   // Suggestions from Claude Code
-  var mcpServers = suggestions.mcpServers || [];
-  var claudeSkills = suggestions.claudeSkills || [];
-  var skillSuggestions = suggestions.suggestions || [];
+  var mcpServers = (suggestions && suggestions.mcpServers) || [];
+  var claudeSkills = (suggestions && suggestions.claudeSkills) || [];
+  var skillSuggestions = (suggestions && suggestions.suggestions) || [];
 
   if (mcpServers.length > 0 || claudeSkills.length > 0) {
-    html += '<div class="walle-section-title">Claude Code Capabilities Discovered</div>';
+    html += '<div class="walle-section-title">Claude Code Capabilities</div>';
     if (mcpServers.length > 0) {
       html += '<div class="walle-card"><div class="walle-card-title">MCP Servers (' + mcpServers.length + ')</div><div class="walle-card-body">';
       mcpServers.forEach(function(m) { html += esc(m.name) + ' (' + esc(m.command) + ')<br>'; });
       html += '</div></div>';
     }
     if (claudeSkills.length > 0) {
-      html += '<div class="walle-card"><div class="walle-card-title">Claude Code Skills (' + claudeSkills.length + ')</div><div class="walle-card-body">';
-      claudeSkills.forEach(function(s) { html += '<b>' + esc(s.name) + '</b>: ' + esc(s.description || '').slice(0, 100) + '<br>'; });
-      html += '</div></div>';
+      html += _renderClaudeSkillsSection(claudeSkills);
     }
   }
 
+  // Filter out suggestions that already exist as learned skills
+  var existingNames = new Set(skills.map(function(s) { return s.name; }));
+  skillSuggestions = skillSuggestions.filter(function(s) { return !existingNames.has(s.name); });
+
   if (skillSuggestions.length > 0) {
     html += '<div class="walle-section-title">Suggested Skills</div>';
     skillSuggestions.forEach(function(s) {
@@ -3353,41 +3781,783 @@ function renderSkillsContent(skills, suggestions) {
     });
   }
 
+  // Detail panel backdrop + panel container
+  html += '<div class="we-skill-detail-backdrop" id="we-skill-backdrop" onclick="WE._closeSkillDetail()"></div>';
+  html += '<div class="we-skill-detail" id="we-skill-detail"></div>';
+
   safeSetHtml(body, html);
 
-  // Load Slack ingest progress if the card exists
+  // Bind search/filter events — use _refilterSkillCards() to avoid re-fetching and losing focus
+  var searchInput = document.getElementById('we-skills-search');
+  if (searchInput) {
+    searchInput.addEventListener('input', function() {
+      _skillsFilter.search = this.value;
+      _refilterSkillCards();
+    });
+  }
+  var catPills = document.querySelectorAll('#we-skills-cat-pills .we-skills-pill');
+  catPills.forEach(function(pill) {
+    pill.addEventListener('click', function() {
+      _skillsFilter.category = this.getAttribute('data-cat');
+      _refilterSkillCards();
+    });
+  });
+  var statusSel = document.getElementById('we-skills-status');
+  if (statusSel) statusSel.addEventListener('change', function() { _skillsFilter.status = this.value; _refilterSkillCards(); });
+  var sortSel = document.getElementById('we-skills-sort');
+  if (sortSel) sortSel.addEventListener('change', function() { _skillsFilter.sort = this.value; _refilterSkillCards(); });
+
+  // Bind Claude Code Skills search
+  _bindCcSearch();
+
+  // Load Slack ingest progress if applicable
   if (slackSkill) {
-    api('/slack-ingest/progress').then(function(result) {
-      var card = document.getElementById('walle-slack-ingest-card');
-      if (!card) return;
-      var p = result.data || {};
-      var phaseLabel = p.phase === 'done' ? 'Complete' : p.phase === 'history' ? 'Fetching messages' : p.phase === 'conversations' ? 'Waiting to start' : esc(p.phase || 'unknown');
-      var pct = p.percent || 0;
-      var ih = '<div class="walle-card-body">';
-      ih += '<div style="margin-bottom:6px"><strong>Phase:</strong> ' + esc(phaseLabel) + '</div>';
-      ih += '<div style="margin-bottom:6px"><strong>Conversations:</strong> ' + (p.conversations_processed || 0) + ' / ' + (p.conversations_total || 0) + '</div>';
-      ih += '<div style="margin-bottom:6px"><strong>Messages ingested:</strong> ' + (p.messages_ingested || 0) + '</div>';
-      ih += '<div style="background:#333;border-radius:4px;height:18px;margin:8px 0;overflow:hidden">';
-      ih += '<div style="background:var(--accent,#228be6);height:100%;width:' + pct + '%;transition:width 0.3s;border-radius:4px"></div></div>';
-      ih += '<div style="font-size:11px;color:var(--fg-muted,#888)">' + pct + '% complete';
-      if (p.started_at) ih += ' | Started: ' + esc(timeAgo(p.started_at));
-      if (p.completed_at) ih += ' | Done: ' + esc(timeAgo(p.completed_at));
-      ih += '</div>';
-      ih += '<div style="margin-top:8px">';
-      if (p.phase !== 'done' && !slackSkill.enabled) {
-        ih += '<button class="walle-btn primary" onclick="WE._startSlackIngest()">Start Ingestion</button> ';
+    _loadSlackIngestProgress(slackSkill);
+  }
+
+  // Re-open detail panel if it was open
+  if (_skillDetailOpen) {
+    var detailSkill = skills.find(function(s) { return s.id === _skillDetailOpen; });
+    if (detailSkill) _showSkillDetail(detailSkill);
+  }
+}
+
+function renderSkillCard(s) {
+  var total = (s.success_count || 0) + (s.failure_count || 0);
+  var rate = total > 0 ? Math.round(s.success_count / total * 100) : -1;
+  var rateStr = rate >= 0 ? rate + '%' : 'N/A';
+  var stripeClass = !s.enabled ? 'disabled' : (s.last_result === 'failure' ? 'failing' : 'healthy');
+  var rateBarClass = rate >= 80 ? '' : rate >= 50 ? ' mid' : ' low';
+
+  var h = '<div class="we-skill-card" onclick="WE._openSkillDetail(\'' + esc(s.id) + '\')">';
+  h += '<div class="we-skill-card-stripe ' + stripeClass + '"></div>';
+  h += '<div class="we-skill-card-body">';
+
+  // Header: name + badges
+  h += '<div class="we-skill-card-header">';
+  h += '<span class="we-skill-card-name">' + esc(s.name) + '</span>';
+  if (s.version && s.version !== '0.0.0') h += '<span class="we-skill-card-badge version">v' + esc(s.version) + '</span>';
+  if (s.source) h += '<span class="we-skill-card-badge ' + esc(s.source) + '">' + esc(s.source) + '</span>';
+  if (s.execution) h += '<span class="we-skill-card-badge ' + esc(s.execution) + '">' + esc(s.execution) + '</span>';
+  h += '</div>';
+
+  // Tags
+  var tags = s.tags || [];
+  if (tags.length > 0) {
+    h += '<div class="we-skill-card-tags">';
+    tags.forEach(function(t) {
+      var tagClass = '';
+      if (['sync','data'].indexOf(t) !== -1) tagClass = ' ' + t;
+      else if (['communication','slack','email'].indexOf(t) !== -1) tagClass = ' communication';
+      else if (['coding','orchestration'].indexOf(t) !== -1) tagClass = ' coding';
+      else if (['monitoring'].indexOf(t) !== -1) tagClass = ' monitoring';
+      else if (['automation'].indexOf(t) !== -1) tagClass = ' automation';
+      h += '<span class="we-skill-tag' + tagClass + '">' + esc(t) + '</span>';
+    });
+    h += '</div>';
+  }
+
+  // Description
+  h += '<div class="we-skill-card-desc">' + esc(s.description || '') + '</div>';
+
+  // Stats row
+  h += '<div class="we-skill-card-stats">';
+  if (rate >= 0) {
+    h += '<span><span class="we-skill-rate-bar"><span class="we-skill-rate-fill' + rateBarClass + '" style="width:' + rate + '%"></span></span> ' + rateStr + '</span>';
+  }
+  h += '<span>' + total + ' runs</span>';
+  h += '<span>' + esc(timeAgo(s.last_run)) + '</span>';
+  if (s.last_result) {
+    var dotColor = s.last_result === 'success' ? '#5c940d' : '#e03131';
+    h += '<span style="color:' + dotColor + '">●</span>';
+  }
+  h += '</div>';
+
+  h += '</div>'; // end card-body
+
+  // Actions column (stop propagation to prevent detail open)
+  h += '<div class="we-skill-card-actions" onclick="event.stopPropagation()">';
+  h += '<button class="walle-btn primary" style="padding:4px 10px;font-size:11px" onclick="WE._runSkill(\'' + esc(s.id) + '\')">Run</button>';
+  h += '<label class="we-toggle"><input type="checkbox"' + (s.enabled ? ' checked' : '') + ' onchange="WE._toggleSkill(\'' + esc(s.id) + '\',this.checked?1:0)"><span class="we-toggle-slider"></span></label>';
+  h += '<div class="we-skill-overflow">';
+  h += '<button class="we-skill-overflow-btn" onclick="WE._toggleOverflow(this)">⋯</button>';
+  h += '<div class="we-skill-overflow-menu">';
+  h += '<div class="we-skill-overflow-item" onclick="WE._openSkillDetail(\'' + esc(s.id) + '\')">View Details</div>';
+  if (s.source !== 'bundled') h += '<div class="we-skill-overflow-item" onclick="WE._openSkillEditor(\'' + esc(s.id) + '\')">Edit</div>';
+  h += '<div class="we-skill-overflow-item" onclick="WE._exportSkill(\'' + esc(s.id) + '\')">Export</div>';
+  if (s.source !== 'bundled') h += '<div class="we-skill-overflow-item danger" onclick="WE._deleteSkill(\'' + esc(s.id) + '\',\'' + esc(s.name) + '\')">Delete</div>';
+  h += '</div></div>';
+  h += '</div>';
+
+  h += '</div>'; // end card
+  return h;
+}
+
+// ---- Claude Code Skills Section (grouped, collapsed, searchable) ----
+
+function _categorizeClaudeSkill(s) {
+  var n = (s.name || '').toLowerCase();
+  var d = (s.description || '').toLowerCase();
+  if (/financ|lbo|dcf|comps|earnings|model|valuation|bond|swap|portfolio|option|equity|fx|macro|tax/.test(n + ' ' + d)) return 'Finance';
+  if (/invest|deal|cim|teaser|pitch|buyer|merger|ic.memo|process.letter|sector/.test(n + ' ' + d)) return 'Investment Banking';
+  if (/slack|email|message|channel|standup|announcement/.test(n + ' ' + d)) return 'Communication';
+  if (/code|review|pr|commit|debug|test|feature|git|lint/.test(n + ' ' + d)) return 'Development';
+  if (/pua|ralph|agent|loop|high.agency/.test(n + ' ' + d)) return 'Productivity';
+  if (/frontend|design|ux|ui|css|web/.test(n + ' ' + d)) return 'Design';
+  if (/skill|plugin|setup|claude|config|management/.test(n + ' ' + d)) return 'System';
+  if (/ppt|deck|pdf|sheet|xls|data.?pack|strip|report/.test(n + ' ' + d)) return 'Documents';
+  return 'Other';
+}
+
+function _renderClaudeSkillsSection(claudeSkills) {
+  // Group by category
+  var groups = {};
+  claudeSkills.forEach(function(s) {
+    var cat = _categorizeClaudeSkill(s);
+    if (!groups[cat]) groups[cat] = [];
+    groups[cat].push(s);
+  });
+  var sortedCats = Object.keys(groups).sort();
+
+  var h = '<div class="we-cc-skills">';
+  h += '<div class="we-cc-skills-header" onclick="WE._toggleCcSkills()">';
+  h += '<span class="we-cc-skills-toggle" id="we-cc-toggle">▶</span> ';
+  h += 'Claude Code Skills (' + claudeSkills.length + ')';
+  h += '<input type="text" class="we-cc-search" id="we-cc-search" placeholder="Search..." onclick="event.stopPropagation()">';
+  h += '</div>';
+  h += '<div class="we-cc-skills-body" id="we-cc-body" style="display:none">';
+
+  sortedCats.forEach(function(cat) {
+    var skills = groups[cat];
+    h += '<div class="we-cc-group" data-cat="' + esc(cat) + '">';
+    h += '<div class="we-cc-group-header" onclick="WE._toggleCcGroup(this)">';
+    h += '<span class="we-cc-group-toggle">▶</span> ' + esc(cat) + ' <span class="we-cc-group-count">(' + skills.length + ')</span>';
+    h += '</div>';
+    h += '<div class="we-cc-group-body" style="display:none">';
+    skills.forEach(function(s) {
+      h += '<div class="we-cc-skill-card" data-name="' + esc(s.name) + '" data-desc="' + esc(s.description || '') + '">';
+      h += '<div class="we-cc-skill-name">' + esc(s.name) + '</div>';
+      h += '<div class="we-cc-skill-desc">' + esc((s.description || '').slice(0, 120)) + '</div>';
+      h += '</div>';
+    });
+    h += '</div></div>';
+  });
+
+  h += '</div></div>';
+  return h;
+}
+
+WE._toggleCcSkills = function() {
+  var body = document.getElementById('we-cc-body');
+  var toggle = document.getElementById('we-cc-toggle');
+  if (!body) return;
+  var show = body.style.display === 'none';
+  body.style.display = show ? '' : 'none';
+  if (toggle) toggle.textContent = show ? '▼' : '▶';
+};
+
+WE._toggleCcGroup = function(header) {
+  var body = header.nextElementSibling;
+  var toggle = header.querySelector('.we-cc-group-toggle');
+  if (!body) return;
+  var show = body.style.display === 'none';
+  body.style.display = show ? '' : 'none';
+  if (toggle) toggle.textContent = show ? '▼' : '▶';
+};
+
+// Bind search after render (called from renderSkillsContent event binding section)
+function _bindCcSearch() {
+  var input = document.getElementById('we-cc-search');
+  if (!input) return;
+  input.addEventListener('input', function() {
+    var q = this.value.toLowerCase();
+    var body = document.getElementById('we-cc-body');
+    if (!body) return;
+    // Show the body if searching
+    if (q && body.style.display === 'none') {
+      body.style.display = '';
+      var toggle = document.getElementById('we-cc-toggle');
+      if (toggle) toggle.textContent = '▼';
+    }
+    // Filter cards and auto-expand matching groups
+    var groups = body.querySelectorAll('.we-cc-group');
+    groups.forEach(function(g) {
+      var cards = g.querySelectorAll('.we-cc-skill-card');
+      var visibleCount = 0;
+      cards.forEach(function(c) {
+        var name = (c.getAttribute('data-name') || '').toLowerCase();
+        var desc = (c.getAttribute('data-desc') || '').toLowerCase();
+        var match = !q || name.includes(q) || desc.includes(q);
+        c.style.display = match ? '' : 'none';
+        if (match) visibleCount++;
+      });
+      g.style.display = visibleCount > 0 ? '' : 'none';
+      // Auto-expand groups with matches when searching
+      var groupBody = g.querySelector('.we-cc-group-body');
+      var groupToggle = g.querySelector('.we-cc-group-toggle');
+      if (q && visibleCount > 0 && groupBody) {
+        groupBody.style.display = '';
+        if (groupToggle) groupToggle.textContent = '▼';
       }
-      if (slackSkill.enabled && p.phase !== 'done') {
-        ih += '<span style="color:#5c940d;font-size:12px;margin-right:8px">Running...</span>';
+      // Update count
+      var countEl = g.querySelector('.we-cc-group-count');
+      if (countEl) countEl.textContent = q ? '(' + visibleCount + ')' : '(' + cards.length + ')';
+    });
+  });
+}
+
+WE._toggleOverflow = function(btn) {
+  var menu = btn.nextElementSibling;
+  // Close all other open menus first
+  document.querySelectorAll('.we-skill-overflow-menu.open').forEach(function(m) {
+    if (m !== menu) m.classList.remove('open');
+  });
+  menu.classList.toggle('open');
+  // Close on outside click
+  var closer = function(e) {
+    if (!btn.contains(e.target) && !menu.contains(e.target)) {
+      menu.classList.remove('open');
+      document.removeEventListener('click', closer);
+    }
+  };
+  setTimeout(function() { document.addEventListener('click', closer); }, 0);
+};
+
+WE._filterSkills = function(status) {
+  _skillsFilter.status = status;
+  // Update dropdown to match
+  var statusSel = document.getElementById('we-skills-status');
+  if (statusSel) statusSel.value = status;
+  _refilterSkillCards();
+};
+
+// ---- Skill Detail Panel ----
+
+WE._openSkillDetail = function(id) {
+  var skill = _skillsData.find(function(s) { return s.id === id; });
+  if (!skill) return;
+  _skillDetailOpen = id;
+  _showSkillDetail(skill);
+};
+
+WE._closeSkillDetail = function() {
+  _skillDetailOpen = null;
+  var panel = document.getElementById('we-skill-detail');
+  var backdrop = document.getElementById('we-skill-backdrop');
+  if (panel) panel.classList.remove('open');
+  if (backdrop) backdrop.classList.remove('open');
+};
+
+function _showSkillDetail(skill) {
+  var panel = document.getElementById('we-skill-detail');
+  var backdrop = document.getElementById('we-skill-backdrop');
+  if (!panel) return;
+
+  var tabs = ['overview', 'config', 'history', 'source', 'logs'];
+  var h = '<div class="we-skill-detail-header">';
+  h += '<button class="we-skill-detail-close" onclick="WE._closeSkillDetail()">✕</button>';
+  h += '<div class="we-skill-detail-title">' + esc(skill.name) + '</div>';
+  h += '<label class="we-toggle"><input type="checkbox"' + (skill.enabled ? ' checked' : '') + ' onchange="WE._toggleSkill(\'' + esc(skill.id) + '\',this.checked?1:0)"><span class="we-toggle-slider"></span></label>';
+  h += '</div>';
+
+  h += '<div class="we-skill-detail-tabs">';
+  tabs.forEach(function(t) {
+    var active = _skillDetailTab === t ? ' active' : '';
+    h += '<button class="we-skill-detail-tab' + active + '" onclick="WE._setDetailTab(\'' + t + '\',\'' + esc(skill.id) + '\')">' + t.charAt(0).toUpperCase() + t.slice(1) + '</button>';
+  });
+  h += '</div>';
+
+  h += '<div class="we-skill-detail-content" id="we-skill-detail-content">';
+  h += _renderDetailTab(skill, _skillDetailTab);
+  h += '</div>';
+
+  safeSetHtml(panel, h);
+  panel.classList.add('open');
+  if (backdrop) backdrop.classList.add('open');
+}
+
+WE._setDetailTab = function(tab, skillId) {
+  _skillDetailTab = tab;
+  var skill = _skillsData.find(function(s) { return s.id === skillId; });
+  if (!skill) return;
+  // Update tabs active state
+  document.querySelectorAll('.we-skill-detail-tab').forEach(function(t) {
+    t.classList.toggle('active', t.textContent.toLowerCase() === tab);
+  });
+  var content = document.getElementById('we-skill-detail-content');
+  if (content) safeSetHtml(content, _renderDetailTab(skill, tab));
+};
+
+function _renderDetailTab(skill, tab) {
+  if (tab === 'overview') return _renderOverviewTab(skill);
+  if (tab === 'config') return _renderConfigTab(skill);
+  if (tab === 'history') return _renderHistoryTab(skill);
+  if (tab === 'source') return _renderSourceTab(skill);
+  if (tab === 'logs') return _renderLogsTab(skill);
+  return '';
+}
+
+function _renderOverviewTab(skill) {
+  var h = '';
+  h += '<div style="margin-bottom:12px">';
+  h += '<div style="font-size:13px;color:var(--fg);line-height:1.5">' + esc(skill.description || 'No description') + '</div>';
+  h += '</div>';
+
+  // Metadata
+  h += '<div class="walle-card" style="margin-bottom:10px">';
+  h += '<div class="walle-card-title">Details</div><div class="walle-card-body">';
+  h += '<div style="display:grid;grid-template-columns:100px 1fr;gap:4px 12px;font-size:12px">';
+  h += '<span style="color:#888">Version</span><span>' + esc(skill.version || '—') + '</span>';
+  h += '<span style="color:#888">Author</span><span>' + esc(skill.author || '—') + '</span>';
+  h += '<span style="color:#888">Source</span><span>' + esc(skill.source || '—') + '</span>';
+  h += '<span style="color:#888">Execution</span><span>' + esc(skill.execution || skill.trigger_type || '—') + '</span>';
+  h += '<span style="color:#888">Trigger</span><span>' + esc(skill.trigger_type || '—') + '</span>';
+  if (skill.skill_dir) h += '<span style="color:#888">Path</span><span style="font-size:11px;word-break:break-all">' + esc(skill.skill_dir) + '</span>';
+  h += '</div></div></div>';
+
+  // Tags
+  var tags = skill.tags || [];
+  if (tags.length > 0) {
+    h += '<div style="margin-bottom:10px"><strong style="font-size:12px;color:#888">Tags:</strong> ';
+    tags.forEach(function(t) { h += '<span class="we-skill-tag">' + esc(t) + '</span> '; });
+    h += '</div>';
+  }
+
+  // Permissions
+  var perms = skill.permissions || [];
+  if (perms.length > 0) {
+    h += '<div style="margin-bottom:10px"><strong style="font-size:12px;color:#888">Permissions:</strong> ';
+    perms.forEach(function(p) { h += '<span class="we-skill-tag">' + esc(p) + '</span> '; });
+    h += '</div>';
+  }
+
+  // Requirements check
+  var requires = skill.requires || {};
+  if (Object.keys(requires).length > 0) {
+    h += '<div class="walle-card"><div class="walle-card-title">Requirements</div><div class="walle-card-body">';
+    h += '<div id="we-skill-req-check"><div class="walle-loading">Checking...</div></div>';
+    h += '</div></div>';
+    // Fire validation
+    apiPost('/skills/' + skill.id + '/validate', {}).then(function(result) {
+      var el = document.getElementById('we-skill-req-check');
+      if (!el) return;
+      var v = result.data || {};
+      var ih = '<ul class="we-req-list">';
+      if (v.valid) {
+        ih += '<li class="we-req-item"><span class="we-req-icon ok">✓</span>All requirements met</li>';
       }
-      ih += '<button class="walle-btn" onclick="WE._resetSlackIngest()">Reset</button>';
-      ih += '</div></div>';
-      safeSetHtml(card, ih);
+      (v.missing || []).forEach(function(m) {
+        ih += '<li class="we-req-item"><span class="we-req-icon missing">✗</span><span>' + esc(m.type) + ': <strong>' + esc(m.name) + '</strong></span><span class="we-req-suggestion">' + esc(m.suggestion || '') + '</span></li>';
+      });
+      ih += '</ul>';
+      safeSetHtml(el, ih);
     }).catch(function() {
-      var card = document.getElementById('walle-slack-ingest-card');
-      if (card) card.innerHTML = '<div class="walle-card-body">Failed to load progress.</div>';
+      var el = document.getElementById('we-skill-req-check');
+      if (el) el.textContent = 'Validation unavailable';
+    });
+  }
+
+  // Stats
+  var total = (skill.success_count || 0) + (skill.failure_count || 0);
+  var rate = total > 0 ? Math.round(skill.success_count / total * 100) : -1;
+  h += '<div class="walle-card"><div class="walle-card-title">Statistics</div><div class="walle-card-body">';
+  h += '<div style="display:grid;grid-template-columns:100px 1fr;gap:4px 12px;font-size:12px">';
+  h += '<span style="color:#888">Total Runs</span><span>' + total + '</span>';
+  h += '<span style="color:#888">Successes</span><span style="color:#5c940d">' + (skill.success_count || 0) + '</span>';
+  h += '<span style="color:#888">Failures</span><span style="color:#e03131">' + (skill.failure_count || 0) + '</span>';
+  h += '<span style="color:#888">Success Rate</span><span>' + (rate >= 0 ? rate + '%' : 'N/A') + '</span>';
+  h += '<span style="color:#888">Last Run</span><span>' + esc(timeAgo(skill.last_run)) + '</span>';
+  h += '<span style="color:#888">Last Result</span><span>' + esc(skill.last_result || '—') + '</span>';
+  h += '</div></div></div>';
+
+  return h;
+}
+
+function _renderConfigTab(skill) {
+  var schema = skill.config_schema || {};
+  var keys = Object.keys(schema);
+  if (keys.length === 0) return '<div class="walle-empty">This skill has no configurable options.</div>';
+
+  var saved = {};
+  try { saved = JSON.parse(skill.config_values || '{}'); } catch (e) { saved = {}; }
+
+  var h = '<form class="we-config-form" onsubmit="WE._saveConfig(event,\'' + esc(skill.id) + '\')">';
+  keys.forEach(function(k) {
+    var field = schema[k];
+    var val = saved[k] !== undefined ? saved[k] : (field.default !== undefined ? field.default : '');
+    h += '<div class="we-config-field">';
+    h += '<label class="we-config-label">' + esc(k) + '</label>';
+    if (field.description) h += '<div class="we-config-help">' + esc(field.description) + '</div>';
+
+    if (field.type === 'boolean') {
+      h += '<label class="we-toggle"><input type="checkbox" name="' + esc(k) + '"' + (val ? ' checked' : '') + '><span class="we-toggle-slider"></span></label>';
+    } else if (field.enum) {
+      h += '<select class="we-config-select" name="' + esc(k) + '">';
+      field.enum.forEach(function(opt) {
+        h += '<option' + (String(val) === String(opt) ? ' selected' : '') + '>' + esc(opt) + '</option>';
+      });
+      h += '</select>';
+    } else if (field.type === 'number') {
+      h += '<input type="number" class="we-config-input" name="' + esc(k) + '" value="' + esc(String(val)) + '">';
+    } else {
+      h += '<input type="text" class="we-config-input" name="' + esc(k) + '" value="' + esc(String(val)) + '">';
+    }
+    h += '</div>';
+  });
+  h += '<button type="submit" class="walle-btn primary we-config-save">Save Config</button>';
+  h += '</form>';
+  return h;
+}
+
+WE._saveConfig = function(e, skillId) {
+  e.preventDefault();
+  var form = e.target;
+  var schema = {};
+  var skill = _skillsData.find(function(s) { return s.id === skillId; });
+  if (skill && skill.config_schema) schema = skill.config_schema;
+  var values = {};
+  Object.keys(schema).forEach(function(k) {
+    var el = form.elements[k];
+    if (!el) return;
+    if (schema[k].type === 'boolean') values[k] = el.checked;
+    else if (schema[k].type === 'number') values[k] = parseFloat(el.value) || 0;
+    else values[k] = el.value;
+  });
+  apiPut('/skills/' + skillId + '/config', values).then(function() {
+    if (typeof showToast === 'function') showToast('Config saved', 'var(--accent)');
+  }).catch(function(err) {
+    if (typeof showToast === 'function') showToast('Error: ' + (err.message || ''), '#f00');
+  });
+};
+
+function _renderHistoryTab(skill) {
+  var h = '<div id="we-skill-history"><div class="walle-loading">Loading execution history...</div></div>';
+  // Load async
+  api('/skills/' + skill.id + '/executions?limit=30').then(function(result) {
+    var el = document.getElementById('we-skill-history');
+    if (!el) return;
+    var execs = result.data || [];
+    if (execs.length === 0) { safeSetHtml(el, '<div class="walle-empty">No execution history.</div>'); return; }
+    var ih = '<table class="we-exec-table"><thead><tr><th>Time</th><th>Status</th><th>Duration</th><th>Memories</th><th>Error</th></tr></thead><tbody>';
+    execs.forEach(function(ex) {
+      ih += '<tr>';
+      ih += '<td>' + esc(timeAgo(ex.created_at)) + '</td>';
+      ih += '<td><span class="we-exec-status ' + esc(ex.status) + '">' + esc(ex.status) + '</span></td>';
+      ih += '<td>' + (ex.duration_ms ? (ex.duration_ms / 1000).toFixed(1) + 's' : '—') + '</td>';
+      ih += '<td>' + (ex.memories_created || 0) + '</td>';
+      ih += '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + esc(ex.error || '') + '">' + esc(ex.error || '—') + '</td>';
+      ih += '</tr>';
     });
+    ih += '</tbody></table>';
+    safeSetHtml(el, ih);
+  }).catch(function() {
+    var el = document.getElementById('we-skill-history');
+    if (el) el.textContent = 'Failed to load history.';
+  });
+  return h;
+}
+
+function _renderSourceTab(skill) {
+  var h = '<div id="we-skill-source"><div class="walle-loading">Loading source...</div></div>';
+  api('/skills/' + skill.id + '/source').then(function(result) {
+    var el = document.getElementById('we-skill-source');
+    if (!el) return;
+    var data = result.data || {};
+    var ih = '';
+    if (data.path) ih += '<div style="font-size:11px;color:#888;margin-bottom:8px">' + esc(data.path) + '</div>';
+    ih += '<div class="we-skill-source-view">' + esc(data.content || 'Source not available') + '</div>';
+    safeSetHtml(el, ih);
+  }).catch(function() {
+    var el = document.getElementById('we-skill-source');
+    if (el) el.textContent = 'Source not available.';
+  });
+  return h;
+}
+
+function _renderLogsTab(skill) {
+  var h = '<div id="we-skill-logs"><div class="walle-loading">Loading last execution logs...</div></div>';
+  api('/skills/' + skill.id + '/executions?limit=1').then(function(result) {
+    var el = document.getElementById('we-skill-logs');
+    if (!el) return;
+    var execs = result.data || [];
+    if (execs.length === 0) { safeSetHtml(el, '<div class="walle-empty">No execution logs.</div>'); return; }
+    var ex = execs[0];
+    var ih = '<div style="margin-bottom:8px;font-size:12px;color:#888">' + esc(timeAgo(ex.created_at)) + ' — <span class="we-exec-status ' + esc(ex.status) + '">' + esc(ex.status) + '</span>';
+    if (ex.duration_ms) ih += ' (' + (ex.duration_ms / 1000).toFixed(1) + 's)';
+    ih += '</div>';
+    if (ex.tool_calls) {
+      ih += '<div style="margin-bottom:8px"><strong style="font-size:12px;color:#888">Tool Calls:</strong>';
+      ih += '<pre class="we-skill-source-view" style="margin-top:4px;max-height:200px">' + esc(ex.tool_calls) + '</pre></div>';
+    }
+    if (ex.tool_results) {
+      ih += '<div><strong style="font-size:12px;color:#888">Tool Results:</strong>';
+      ih += '<pre class="we-skill-source-view" style="margin-top:4px;max-height:200px">' + esc(ex.tool_results) + '</pre></div>';
+    }
+    if (ex.error) {
+      ih += '<div style="margin-top:8px"><strong style="font-size:12px;color:#e03131">Error:</strong>';
+      ih += '<pre class="we-skill-source-view" style="margin-top:4px;color:#c97070">' + esc(ex.error) + '</pre></div>';
+    }
+    safeSetHtml(el, ih);
+  }).catch(function() {
+    var el = document.getElementById('we-skill-logs');
+    if (el) el.textContent = 'Failed to load logs.';
+  });
+  return h;
+}
+
+// ---- Skill CRUD ----
+
+WE._deleteSkill = function(id, name) {
+  if (!confirm('Delete skill "' + name + '"? This cannot be undone.')) return;
+  apiDelete('/skills/' + id).then(function(result) {
+    if (result.error) { if (typeof showToast === 'function') showToast('Error: ' + result.error, '#f00'); return; }
+    if (typeof showToast === 'function') showToast('Deleted: ' + name, 'var(--accent)');
+    _skillDetailOpen = null;
+    WE.renderSkills();
+  });
+};
+
+WE._exportSkill = function(id) {
+  api('/skills/' + id + '/export').then(function(result) {
+    var bundle = result.data;
+    if (!bundle) { if (typeof showToast === 'function') showToast('Export failed', '#f00'); return; }
+    var blob = new Blob([JSON.stringify(bundle, null, 2)], { type: 'application/json' });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement('a');
+    a.href = url; a.download = (bundle.name || 'skill') + '.json'; a.click();
+    URL.revokeObjectURL(url);
+    if (typeof showToast === 'function') showToast('Exported: ' + (bundle.name || ''), 'var(--accent)');
+  }).catch(function(err) {
+    if (typeof showToast === 'function') showToast('Export error: ' + (err.message || ''), '#f00');
+  });
+};
+
+WE._importSkillPrompt = function() {
+  var input = document.createElement('input');
+  input.type = 'file'; input.accept = '.json';
+  input.onchange = function() {
+    var file = input.files[0];
+    if (!file) return;
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      try {
+        var bundle = JSON.parse(e.target.result);
+        apiPost('/skills/import', bundle).then(function(result) {
+          if (result.error) { if (typeof showToast === 'function') showToast('Import failed: ' + result.error, '#f00'); return; }
+          if (typeof showToast === 'function') showToast('Imported: ' + (result.data?.name || ''), 'var(--accent)');
+          WE.renderSkills();
+        });
+      } catch (err) {
+        if (typeof showToast === 'function') showToast('Invalid JSON file', '#f00');
+      }
+    };
+    reader.readAsText(file);
+  };
+  input.click();
+};
+
+// ---- Skill Editor ----
+
+WE._openSkillEditor = function(skillId) {
+  _skillEditorMode = skillId || 'create';
+  var panel = document.getElementById('we-skill-detail');
+  var backdrop = document.getElementById('we-skill-backdrop');
+  if (!panel) return;
+
+  var isEdit = skillId && skillId !== 'create';
+  var skill = isEdit ? _skillsData.find(function(s) { return s.id === skillId; }) : null;
+
+  var h = '<div class="we-skill-detail-header">';
+  h += '<button class="we-skill-detail-close" onclick="WE._closeSkillDetail()">✕</button>';
+  h += '<div class="we-skill-detail-title">' + (isEdit ? 'Edit Skill' : 'Create New Skill') + '</div>';
+  h += '</div>';
+
+  h += '<div class="we-skill-detail-content">';
+
+  if (!isEdit) {
+    // Template selection
+    h += '<div class="walle-section-title">Start from a template</div>';
+    h += '<div class="we-template-grid">';
+    var templates = [
+      { name: 'Data Fetcher', desc: 'Agent that fetches data via tools', tpl: 'data-fetcher' },
+      { name: 'Script Runner', desc: 'Script skill with run.js', tpl: 'script-runner' },
+      { name: 'Periodic Checker', desc: 'Interval-triggered monitor', tpl: 'periodic-checker' },
+      { name: 'Manual Action', desc: 'One-shot manual trigger', tpl: 'manual-action' },
+    ];
+    templates.forEach(function(t) {
+      h += '<div class="we-template-card" onclick="WE._loadTemplate(\'' + t.tpl + '\')">';
+      h += '<div class="we-template-name">' + esc(t.name) + '</div>';
+      h += '<div class="we-template-desc">' + esc(t.desc) + '</div>';
+      h += '</div>';
+    });
+    h += '</div>';
+    h += '<div class="walle-section-title" style="margin-top:16px">Or start from scratch</div>';
   }
+
+  // Form
+  h += '<div class="we-skill-editor" id="we-skill-editor-form">';
+  h += '<div class="we-config-field"><label class="we-config-label">Name</label>';
+  h += '<input type="text" class="we-config-input" id="we-ed-name" value="' + esc(skill ? skill.name : '') + '" placeholder="my-skill-name"></div>';
+
+  h += '<div class="we-config-field"><label class="we-config-label">Description</label>';
+  h += '<textarea class="we-config-input" id="we-ed-desc" rows="2" placeholder="What does this skill do?">' + esc(skill ? (skill.description || '') : '') + '</textarea></div>';
+
+  h += '<div class="we-skill-editor-row">';
+  h += '<div class="we-config-field"><label class="we-config-label">Execution</label>';
+  h += '<select class="we-config-select" id="we-ed-exec">';
+  h += '<option value="agent"' + (skill && skill.execution === 'agent' ? ' selected' : '') + '>Agent</option>';
+  h += '<option value="script"' + (skill && skill.execution === 'script' ? ' selected' : '') + '>Script</option>';
+  h += '</select></div>';
+
+  h += '<div class="we-config-field"><label class="we-config-label">Trigger</label>';
+  h += '<select class="we-config-select" id="we-ed-trigger">';
+  h += '<option value="manual"' + (skill && skill.trigger_type === 'manual' ? ' selected' : '') + '>Manual</option>';
+  h += '<option value="interval"' + (skill && skill.trigger_type === 'interval' ? ' selected' : '') + '>Interval</option>';
+  h += '</select></div>';
+  h += '</div>';
+
+  h += '<div class="we-config-field"><label class="we-config-label">Tags (comma-separated)</label>';
+  h += '<input type="text" class="we-config-input" id="we-ed-tags" value="' + esc(skill && skill.tags ? skill.tags.join(', ') : '') + '" placeholder="data, sync"></div>';
+
+  h += '<div class="we-config-field"><label class="we-config-label">Instructions (Markdown)</label>';
+  h += '<textarea class="we-skill-editor-textarea" id="we-ed-instructions" placeholder="# My Skill\n\nDescribe what the skill should do...">' + (skill ? esc(skill.prompt_template || '') : '') + '</textarea></div>';
+
+  // Raw SKILL.md toggle
+  h += '<div style="margin-top:8px"><button class="walle-btn" onclick="WE._toggleRawEditor()">Toggle Raw SKILL.md</button></div>';
+  h += '<div id="we-ed-raw-wrap" style="display:none"><div class="we-config-field"><label class="we-config-label">Raw SKILL.md</label>';
+  h += '<textarea class="we-skill-editor-textarea" id="we-ed-raw" rows="15" placeholder="---\nname: my-skill\n..."></textarea></div></div>';
+
+  h += '<div style="display:flex;gap:8px;margin-top:12px">';
+  h += '<button class="walle-btn primary" onclick="WE._saveSkillEditor()">' + (isEdit ? 'Save Changes' : 'Create Skill') + '</button>';
+  h += '<button class="walle-btn" onclick="WE._closeSkillDetail()">Cancel</button>';
+  h += '</div>';
+
+  h += '</div>'; // editor
+  h += '</div>'; // content
+
+  safeSetHtml(panel, h);
+  panel.classList.add('open');
+  if (backdrop) backdrop.classList.add('open');
+};
+
+WE._toggleRawEditor = function() {
+  var wrap = document.getElementById('we-ed-raw-wrap');
+  if (wrap) wrap.style.display = wrap.style.display === 'none' ? 'block' : 'none';
+};
+
+WE._loadTemplate = function(tplName) {
+  var templates = {
+    'data-fetcher': { name: 'my-data-fetcher', desc: 'Fetches data from an external source and stores observations as memories', exec: 'agent', trigger: 'interval', tags: 'data, sync', instructions: '# Data Fetcher\n\nUse the available tools to fetch data from the configured source.\nParse the response and return a structured list of observations.' },
+    'script-runner': { name: 'my-script', desc: 'Runs a custom Node.js script', exec: 'script', trigger: 'manual', tags: 'automation', instructions: '# Script Runner\n\nThis skill executes run.js in the skill directory.' },
+    'periodic-checker': { name: 'my-checker', desc: 'Periodically checks a condition and reports changes', exec: 'agent', trigger: 'interval', tags: 'monitoring', instructions: '# Periodic Checker\n\nCheck the configured target at each interval.\nCompare current state with previous run.\nOnly report meaningful changes.' },
+    'manual-action': { name: 'my-action', desc: 'A manually triggered one-shot action', exec: 'agent', trigger: 'manual', tags: 'utility', instructions: '# Manual Action\n\nWhen triggered:\n1. Gather context\n2. Execute the action\n3. Report the result' },
+  };
+  var t = templates[tplName];
+  if (!t) return;
+  var el = function(id) { return document.getElementById(id); };
+  if (el('we-ed-name')) el('we-ed-name').value = t.name;
+  if (el('we-ed-desc')) el('we-ed-desc').value = t.desc;
+  if (el('we-ed-exec')) el('we-ed-exec').value = t.exec;
+  if (el('we-ed-trigger')) el('we-ed-trigger').value = t.trigger;
+  if (el('we-ed-tags')) el('we-ed-tags').value = t.tags;
+  if (el('we-ed-instructions')) el('we-ed-instructions').value = t.instructions;
+};
+
+WE._saveSkillEditor = function() {
+  var rawWrap = document.getElementById('we-ed-raw-wrap');
+  var rawMode = rawWrap && rawWrap.style.display !== 'none';
+  var rawContent = document.getElementById('we-ed-raw');
+
+  if (rawMode && rawContent && rawContent.value.trim()) {
+    // Save raw SKILL.md
+    var name = (document.getElementById('we-ed-name') || {}).value || '';
+    if (_skillEditorMode && _skillEditorMode !== 'create') {
+      // Edit existing
+      apiPut('/skills/' + _skillEditorMode + '/source', { content: rawContent.value }).then(function(result) {
+        if (result.error) { if (typeof showToast === 'function') showToast('Error: ' + result.error, '#f00'); return; }
+        if (typeof showToast === 'function') showToast('Skill updated', 'var(--accent)');
+        WE._closeSkillDetail();
+        WE.renderSkills();
+      });
+    } else {
+      // Create new from raw
+      apiPost('/skills/create-file', { name: name || 'unnamed', content: rawContent.value }).then(function(result) {
+        if (result.error) { if (typeof showToast === 'function') showToast('Error: ' + result.error, '#f00'); return; }
+        if (typeof showToast === 'function') showToast('Skill created', 'var(--accent)');
+        WE._closeSkillDetail();
+        WE.renderSkills();
+      });
+    }
+    return;
+  }
+
+  // Form mode
+  var name = (document.getElementById('we-ed-name') || {}).value || '';
+  var desc = (document.getElementById('we-ed-desc') || {}).value || '';
+  var exec = (document.getElementById('we-ed-exec') || {}).value || 'agent';
+  var trigger = (document.getElementById('we-ed-trigger') || {}).value || 'manual';
+  var tags = (document.getElementById('we-ed-tags') || {}).value || '';
+  var instructions = (document.getElementById('we-ed-instructions') || {}).value || '';
+
+  if (!name.trim()) { if (typeof showToast === 'function') showToast('Name is required', '#f00'); return; }
+
+  var tagsArr = tags.split(',').map(function(t) { return t.trim(); }).filter(Boolean);
+
+  if (_skillEditorMode && _skillEditorMode !== 'create') {
+    // Edit existing — update DB + source file
+    apiPut('/skills/' + _skillEditorMode, {
+      name: name, description: desc, trigger_type: trigger, prompt_template: instructions
+    }).then(function() {
+      if (typeof showToast === 'function') showToast('Skill updated', 'var(--accent)');
+      WE._closeSkillDetail();
+      WE.renderSkills();
+    });
+  } else {
+    // Create new
+    apiPost('/skills/create-file', {
+      name: name, description: desc, execution: exec, trigger_type: trigger,
+      tags: tagsArr, instructions: instructions
+    }).then(function(result) {
+      if (result.error) { if (typeof showToast === 'function') showToast('Error: ' + result.error, '#f00'); return; }
+      if (typeof showToast === 'function') showToast('Skill created!', 'var(--accent)');
+      WE._closeSkillDetail();
+      WE.renderSkills();
+    });
+  }
+};
+
+// Slack ingest progress loader (extracted to keep renderSkillsContent cleaner)
+function _loadSlackIngestProgress(slackSkill) {
+  api('/slack-ingest/progress').then(function(result) {
+    var card = document.getElementById('walle-slack-ingest-card');
+    if (!card) return;
+    var p = result.data || {};
+    var phaseLabel = p.phase === 'done' ? 'Complete' : p.phase === 'history' ? 'Fetching messages' : p.phase === 'conversations' ? 'Waiting to start' : esc(p.phase || 'unknown');
+    var pct = p.percent || 0;
+    var ih = '<div class="walle-card-body">';
+    ih += '<div style="margin-bottom:6px"><strong>Slack Ingestion — Phase:</strong> ' + esc(phaseLabel) + '</div>';
+    ih += '<div style="margin-bottom:6px"><strong>Conversations:</strong> ' + (p.conversations_processed || 0) + ' / ' + (p.conversations_total || 0) + '</div>';
+    ih += '<div style="margin-bottom:6px"><strong>Messages ingested:</strong> ' + (p.messages_ingested || 0) + '</div>';
+    ih += '<div style="background:#333;border-radius:4px;height:18px;margin:8px 0;overflow:hidden">';
+    ih += '<div style="background:var(--accent,#228be6);height:100%;width:' + pct + '%;transition:width 0.3s;border-radius:4px"></div></div>';
+    ih += '<div style="font-size:11px;color:var(--fg-muted,#888)">' + pct + '% complete';
+    if (p.started_at) ih += ' | Started: ' + esc(timeAgo(p.started_at));
+    if (p.completed_at) ih += ' | Done: ' + esc(timeAgo(p.completed_at));
+    ih += '</div>';
+    ih += '<div style="margin-top:8px">';
+    if (p.phase !== 'done' && !slackSkill.enabled) {
+      ih += '<button class="walle-btn primary" onclick="WE._startSlackIngest()">Start Ingestion</button> ';
+    }
+    if (slackSkill.enabled && p.phase !== 'done') {
+      ih += '<span style="color:#5c940d;font-size:12px;margin-right:8px">Running...</span>';
+    }
+    ih += '<button class="walle-btn" onclick="WE._resetSlackIngest()">Reset</button>';
+    ih += '</div></div>';
+    safeSetHtml(card, ih);
+  }).catch(function() {
+    var card = document.getElementById('walle-slack-ingest-card');
+    if (card) card.textContent = 'Failed to load progress.';
+  });
 }
 
 WE._startSlackIngest = function() {