create-walle 0.4.5 → 0.5.0

package/bin/create-walle.js

@@ -151,6 +151,9 @@ function install(targetDir) {
   fs.mkdirSync(path.join(process.env.HOME, '.walle', 'data'), { recursive: true });
   try { execFileSync('git', ['init', '-q'], { cwd: targetDir, stdio: 'ignore' }); } catch {}
 
+  // Stamp version into root package.json so the settings page shows it
+  stampVersion(targetDir);
+
   saveWalleDir(path.resolve(targetDir));
 
   // Start the service
@@ -208,7 +211,10 @@ function update() {
     fs.writeFileSync(fullPath, content);
   }
 
-  // 5. Reinstall deps (in case package.json changed)
+  // 5. Stamp version
+  stampVersion(dir);
+
+  // 6. Reinstall deps (in case package.json changed)
   console.log(`  Installing dependencies...\n`);
   npmInstall(dir);
 
@@ -392,6 +398,17 @@ function npmInstall(dir) {
   }
 }
 
+function stampVersion(dir) {
+  try {
+    const ver = require('../package.json').version;
+    const pkgPath = path.join(dir, 'package.json');
+    let pkg = {};
+    try { pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')); } catch {}
+    pkg.version = ver;
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  } catch {}
+}
+
 function saveWalleDir(dir) {
   const metaDir = path.join(process.env.HOME, '.walle');
   fs.mkdirSync(metaDir, { recursive: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-walle",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Set up Wall-E — your personal digital twin",
   "bin": {
     "create-walle": "bin/create-walle.js"

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

@@ -82,6 +82,8 @@
 }
 .walle-btn:hover { background: rgba(255,255,255,0.08); }
 .walle-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.walle-btn.danger { color: #f85149; border-color: #f8514933; }
+.walle-btn.danger:hover { background: #f8514918; border-color: #f85149; }
 
 /* Loading / Empty */
 .walle-loading { text-align: center; padding: 40px; color: var(--fg-muted, #888); font-size: 13px; }

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

@@ -778,6 +778,7 @@ function renderChatUI() {
     html += '<span class="we-export-count">' + chatSelected.size + ' selected</span>';
     html += '<button class="walle-btn" onclick="WE._exportAsText()">Copy as Text</button>';
     html += '<button class="walle-btn" onclick="WE._exportAsImage()">Save as Image</button>';
+    html += '<button class="walle-btn danger" onclick="WE._deleteSelected()">Delete</button>';
     html += '<button class="we-chat-search-clear" onclick="WE._clearSelection()" title="Clear selection">&times;</button>';
     html += '</div>';
   }
@@ -1381,7 +1382,23 @@ WE._toggleTurn = function(turnIdx) {
   } else {
     chatSelected.add(turnIdx);
   }
-  renderChatUI();
+  // Update just the clicked turn visually — don't re-render (preserves scroll)
+  var el = document.querySelector('.we-turn-group[data-turn="' + turnIdx + '"]');
+  if (el) {
+    el.classList.toggle('we-selected', chatSelected.has(turnIdx));
+    var cb = el.querySelector('.we-turn-checkbox');
+    if (cb) cb.textContent = chatSelected.has(turnIdx) ? '\u2611' : '\u2610';
+  }
+  // Update the export bar
+  var bar = document.querySelector('.we-export-bar');
+  if (chatSelected.size > 0 && !bar) {
+    renderChatUI(); // first selection — need to add toolbar
+  } else if (chatSelected.size === 0 && bar) {
+    bar.remove();
+  } else if (bar) {
+    var countEl = bar.querySelector('.we-export-count');
+    if (countEl) countEl.textContent = chatSelected.size + ' selected';
+  }
 };
 
 WE._clearSelection = function() {
@@ -1515,6 +1532,36 @@ WE._exportAsImage = function() {
   }
 };
 
+WE._deleteSelected = function() {
+  var turns = _getSelectedTurns();
+  if (turns.length === 0) return;
+  if (!confirm('Delete ' + turns.length + ' message' + (turns.length > 1 ? 's' : '') + '? This cannot be undone.')) return;
+
+  var count = turns.length;
+  var promises = turns.map(function(t) {
+    return apiPost('/chat/delete', {
+      session_id: cache.chatSessionId || 'default',
+      user_content: t.userText || undefined,
+      assistant_content: t.assistantText || undefined,
+    });
+  });
+
+  Promise.all(promises).then(function() {
+    chatSelected.clear();
+    chatSelectMode = false;
+    // Reload chat history
+    api('/chat/history?session_id=' + encodeURIComponent(cache.chatSessionId || 'default') + '&limit=200').then(function(result) {
+      chatHistory = (result.data || []).map(function(m) {
+        return { role: m.role, text: m.content || m.text || '', ts: m.timestamp };
+      });
+      renderChatUI();
+      if (typeof showToast === 'function') showToast('Deleted ' + count + ' message' + (count > 1 ? 's' : ''));
+    });
+  }).catch(function(err) {
+    if (typeof showToast === 'function') showToast('Delete failed: ' + (err.message || 'unknown error'), 'var(--red)');
+  });
+};
+
 // ---- Chat Search ----
 WE._onChatSearch = function(val) {
   chatSearchQuery = val;

package/template/claude-task-manager/public/setup.html

@@ -17,7 +17,6 @@
     .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
     .status-dot.ok { background: var(--green); }
     .status-dot.missing { background: var(--yellow); }
-    .status-dot.error { background: var(--red); }
     label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--dim); }
     input[type="text"], input[type="password"] {
       width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
@@ -32,9 +31,8 @@
     .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
     .btn-secondary { background: var(--border); color: var(--text); }
     .btn-secondary:hover { background: #3d444d; }
-    .btn-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
-    .success-msg { color: var(--green); font-size: 13px; display: none; }
-    .error-msg { color: var(--red); font-size: 13px; display: none; }
+    .btn-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
+    .error-msg { color: var(--red); font-size: 13px; display: none; width: 100%; margin-top: 4px; }
     .integration { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
     .integration:last-child { border-bottom: none; }
     .integration-info { display: flex; align-items: center; gap: 12px; }
@@ -47,6 +45,19 @@
     .done-section { text-align: center; padding: 16px 0; }
     .done-section a { color: var(--accent); text-decoration: none; font-weight: 500; }
     .done-section a:hover { text-decoration: underline; }
+
+    /* Toast notification */
+    .toast {
+      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
+      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
+      padding: 12px 24px; font-size: 14px; font-weight: 500;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+      opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 100;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+    .toast.success { border-color: var(--green); color: var(--green); }
+    .toast.error { border-color: var(--red); color: var(--red); }
   </style>
 </head>
 <body>
@@ -54,7 +65,7 @@
     <h1>Welcome to Wall-E</h1>
     <p class="subtitle">Let's get you set up. This takes about 30 seconds.</p>
 
-    <!-- Step 1: Owner -->
+    <!-- Owner -->
     <div class="card">
       <h2><span class="status-dot ok" id="owner-dot"></span> Owner</h2>
       <p>Auto-detected from your system.</p>
@@ -64,7 +75,7 @@
       </div>
     </div>
 
-    <!-- Step 2: API Key -->
+    <!-- API Key -->
     <div class="card">
       <h2><span class="status-dot missing" id="api-dot"></span> Anthropic API Key</h2>
       <p>Required for AI features (chat, think, reflect). Get one at <a href="https://console.anthropic.com/settings/keys" target="_blank" style="color:var(--accent)">console.anthropic.com</a></p>
@@ -73,18 +84,16 @@
         <input type="password" id="api-key" placeholder="sk-ant-...">
       </div>
       <div class="btn-row">
-        <button class="btn btn-primary" id="save-btn" onclick="saveConfig()">Save & Continue</button>
-        <button class="btn btn-secondary" id="detect-btn" onclick="detectKey()" title="Check your shell environment for an existing API key">Detect from environment</button>
-        <span class="success-msg" id="save-ok">Saved!</span>
+        <button class="btn btn-primary" id="save-btn" onclick="saveConfig()">Save</button>
+        <button class="btn btn-secondary" id="detect-btn" onclick="detectKey()">Detect from environment</button>
         <span class="error-msg" id="save-err"></span>
       </div>
     </div>
 
-    <!-- Step 3: Integrations -->
+    <!-- Integrations -->
     <div class="card">
       <h2>Integrations</h2>
       <p>Optional — connect these anytime from the Wall-E settings.</p>
-
       <div class="integration" id="int-slack">
         <div class="integration-info">
           <div class="integration-icon">💬</div>
@@ -95,7 +104,6 @@
         </div>
         <button class="btn btn-secondary" id="slack-btn" onclick="connectSlack()">Connect</button>
       </div>
-
       <div class="integration">
         <div class="integration-info">
           <div class="integration-icon">📧</div>
@@ -106,7 +114,6 @@
         </div>
         <span class="badge badge-ready">Auto</span>
       </div>
-
       <div class="integration">
         <div class="integration-info">
           <div class="integration-icon">📅</div>
@@ -127,7 +134,19 @@
     </div>
   </div>
 
+  <!-- Toast -->
+  <div class="toast" id="toast"></div>
+
   <script>
+    function showToast(msg, type) {
+      const t = document.getElementById('toast');
+      t.className = 'toast ' + (type || 'success');
+      t.textContent = type === 'error' ? msg : '✓ ' + msg;
+      t.classList.add('show');
+      clearTimeout(t._timer);
+      t._timer = setTimeout(() => t.classList.remove('show'), 3000);
+    }
+
     async function loadStatus() {
       try {
         const r = await fetch('/api/setup/status');
@@ -138,7 +157,7 @@
           document.getElementById('api-key').placeholder = '••••••••••••••• (configured)';
         }
         if (d.slack_connected) {
-          document.getElementById('slack-btn').outerHTML = '<span class="badge badge-connected">Connected</span>';
+          _showSlackConnected(d.slack_team);
         }
         if (d.version) {
           document.getElementById('version-label').textContent = 'Wall-E v' + d.version;
@@ -148,9 +167,7 @@
 
     async function saveConfig() {
       const btn = document.getElementById('save-btn');
-      const okMsg = document.getElementById('save-ok');
       const errMsg = document.getElementById('save-err');
-      okMsg.style.display = 'none';
       errMsg.style.display = 'none';
       btn.disabled = true;
 
@@ -163,19 +180,18 @@
         btn.disabled = false;
         return;
       }
-      const body = { owner_name: ownerVal, api_key: apiVal };
 
       try {
         const r = await fetch('/api/setup/save', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
+          body: JSON.stringify({ owner_name: ownerVal, api_key: apiVal }),
         });
         const d = await r.json();
         if (d.ok) {
-          okMsg.style.display = 'inline';
-          document.getElementById('api-dot').className = 'status-dot ok';
           document.getElementById('owner-dot').className = 'status-dot ok';
+          if (apiVal) document.getElementById('api-dot').className = 'status-dot ok';
+          showToast('Settings saved');
         } else {
           errMsg.textContent = d.error || 'Save failed';
           errMsg.style.display = 'inline';
@@ -187,6 +203,16 @@
       btn.disabled = false;
     }
 
+    function _showSlackConnected(team) {
+      const el = document.getElementById('int-slack');
+      if (!el) return;
+      const badge = team
+        ? '<span class="badge badge-connected">Connected to ' + team + '</span>'
+        : '<span class="badge badge-connected">Connected</span>';
+      const btn = el.querySelector('#slack-btn');
+      if (btn) btn.outerHTML = badge;
+    }
+
     async function connectSlack() {
       const btn = document.getElementById('slack-btn');
       try {
@@ -195,10 +221,10 @@
         const r = await fetch('/api/wall-e/slack/auth', { method: 'POST' });
         const d = await r.json();
         if (d.ok && d.already) {
-          btn.outerHTML = '<span class="badge badge-connected">Connected</span>';
+          _showSlackConnected('');
+          showToast('Slack already connected');
         } else if (d.ok) {
-          btn.textContent = 'Check browser...';
-          // Poll for completion (OAuth callback happens server-side)
+          btn.textContent = 'Waiting for browser...';
           let attempts = 0;
           const poll = setInterval(async () => {
             attempts++;
@@ -207,10 +233,11 @@
               const sd = await sr.json();
               if (sd.slack_connected) {
                 clearInterval(poll);
-                btn.outerHTML = '<span class="badge badge-connected">Connected</span>';
-              } else if (attempts > 60) {
+                _showSlackConnected(sd.slack_team);
+                showToast('Slack connected' + (sd.slack_team ? ' to ' + sd.slack_team : ''));
+              } else if (attempts > 150) {
                 clearInterval(poll);
-                btn.textContent = 'Timed out';
+                btn.textContent = 'Timed out — try again';
                 btn.disabled = false;
               }
             } catch {}
@@ -218,6 +245,7 @@
         } else {
           btn.textContent = d.error || 'Failed';
           btn.disabled = false;
+          showToast(d.error || 'Slack connection failed', 'error');
         }
       } catch (e) {
         btn.textContent = 'Connect';
@@ -228,9 +256,7 @@
     async function detectKey() {
       const btn = document.getElementById('detect-btn');
       const errMsg = document.getElementById('save-err');
-      const okMsg = document.getElementById('save-ok');
       errMsg.style.display = 'none';
-      okMsg.style.display = 'none';
       btn.disabled = true;
       btn.textContent = 'Checking...';
       try {
@@ -240,8 +266,6 @@
           document.getElementById('api-key').value = '';
           document.getElementById('api-key').placeholder = '••••••••••••••• (from ' + (d.source || 'environment') + ')';
           document.getElementById('api-dot').className = 'status-dot ok';
-          okMsg.textContent = 'Detected: ' + (d.source || 'environment') + '!';
-          okMsg.style.display = 'inline';
           const ownerVal = document.getElementById('owner-name').value.trim();
           const saveBody = { owner_name: ownerVal };
           if (d.gateway) saveBody.gateway = d.gateway;
@@ -251,6 +275,7 @@
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(saveBody),
           });
+          showToast('Detected and saved: ' + (d.source || 'environment'));
         } else {
           errMsg.textContent = d.hint || 'No API key found. Enter one manually.';
           errMsg.style.display = 'inline';

package/template/claude-task-manager/server.js

@@ -197,14 +197,19 @@ function handleApi(req, res, url) {
       } catch {}
     }
     let slackConnected = false;
+    let slackTeam = '';
     try {
-      const tokPath = path.join(process.env.HOME, '.walle', 'data', 'oauth-tokens', 'slack.json');
-      slackConnected = fs.existsSync(tokPath);
+      const tokPath = path.join(process.env.HOME, '.claude', 'wall-e-slack-token.json');
+      if (fs.existsSync(tokPath)) {
+        const tok = JSON.parse(fs.readFileSync(tokPath, 'utf8'));
+        slackConnected = !!(tok.access_token);
+        slackTeam = tok.team_name || '';
+      }
     } catch {}
     res.writeHead(200, { 'Content-Type': 'application/json' });
     let version = '';
     try { version = require('../package.json').version; } catch {}
-    res.end(JSON.stringify({ owner_name: ownerName, has_api_key: hasApiKey, slack_connected: slackConnected, needs_setup: setup.needsSetup(), version }));
+    res.end(JSON.stringify({ owner_name: ownerName, has_api_key: hasApiKey, slack_connected: slackConnected, slack_team: slackTeam, needs_setup: setup.needsSetup(), version }));
     return;
   }
   if (url.pathname === '/api/setup/detect-key' && req.method === 'GET') {
@@ -313,16 +318,21 @@ function handleApi(req, res, url) {
         // Accept any non-empty key (Anthropic, Portkey, or other providers)
         const envPath = path.resolve(__dirname, '..', '.env');
         const lines = [];
-        // Build set of keys we're about to write
+        // Build set of keys to strip — API key and gateway are mutually exclusive
         const keysToReplace = new Set();
         if (ownerName) keysToReplace.add('WALLE_OWNER_NAME');
-        if (apiKey) keysToReplace.add('ANTHROPIC_API_KEY');
-        if (gw) { keysToReplace.add('ANTHROPIC_BASE_URL'); keysToReplace.add('ANTHROPIC_AUTH_TOKEN'); keysToReplace.add('ANTHROPIC_CUSTOM_HEADERS_B64'); }
+        if (apiKey || gw) {
+          // Always strip both — they're mutually exclusive
+          keysToReplace.add('ANTHROPIC_API_KEY');
+          keysToReplace.add('ANTHROPIC_BASE_URL');
+          keysToReplace.add('ANTHROPIC_AUTH_TOKEN');
+          keysToReplace.add('ANTHROPIC_CUSTOM_HEADERS_B64');
+        }
         // Read existing .env, keep lines that aren't being replaced
         try {
           const existing = fs.readFileSync(envPath, 'utf8');
           for (const line of existing.split('\n')) {
-            const m = line.match(/^\s*#?\s*([A-Z_]+)\s*=/);
+            const m = line.match(/^\s*#?\s*([A-Z0-9_]+)\s*=/);
             if (m && keysToReplace.has(m[1])) continue; // skip — will re-add below
             lines.push(line);
           }
@@ -336,16 +346,21 @@ function handleApi(req, res, url) {
           process.env.WALLE_OWNER_NAME = ownerName;
         }
         if (gw) {
-          // Gateway setup: save all three env vars
+          // Gateway setup: save gateway vars, clear direct API key
           lines.push(`ANTHROPIC_BASE_URL=${gw.base_url}`);
           lines.push(`ANTHROPIC_AUTH_TOKEN=${gw.auth_token}`);
           lines.push(`ANTHROPIC_CUSTOM_HEADERS_B64=${gw.custom_headers_b64}`);
           process.env.ANTHROPIC_BASE_URL = gw.base_url;
           process.env.ANTHROPIC_AUTH_TOKEN = gw.auth_token;
           process.env.ANTHROPIC_CUSTOM_HEADERS_B64 = gw.custom_headers_b64;
+          delete process.env.ANTHROPIC_API_KEY;
         } else if (apiKey) {
+          // Direct API key: save key, clear gateway vars
           lines.push(`ANTHROPIC_API_KEY=${apiKey}`);
           process.env.ANTHROPIC_API_KEY = apiKey;
+          delete process.env.ANTHROPIC_BASE_URL;
+          delete process.env.ANTHROPIC_AUTH_TOKEN;
+          delete process.env.ANTHROPIC_CUSTOM_HEADERS_B64;
         }
         fs.writeFileSync(envPath, lines.join('\n') + '\n', { mode: 0o600 });
         setup.clearSetupCache(); // so next / request goes to dashboard

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "walle",
-  "version": "0.1.1",
+  "version": "0.5.0",
   "private": true,
   "description": "Wall-E — your personal digital twin",
   "scripts": {