@rozek/nanoclaw 0.0.16 → 0.0.19

package/CLAUDE.md

@@ -19,10 +19,17 @@ Single Node.js process with skill-based channel system. Channels (WhatsApp, Tele
 | `src/task-scheduler.ts` | Runs scheduled tasks |
 | `src/db.ts` | SQLite operations |
 | `groups/{name}/CLAUDE.md` | Per-group memory (isolated) |
-| `container/skills/agent-browser.md` | Browser automation tool (available to all agents via Bash) |
+| `container/skills/` | Skills loaded inside agent containers (browser, status, formatting) |
 
 ## Skills
 
+Four types of skills exist in NanoClaw. See [CONTRIBUTING.md](CONTRIBUTING.md) for the full taxonomy and guidelines.
+
+- **Feature skills** — merge a `skill/*` branch to add capabilities (e.g. `/add-telegram`, `/add-slack`)
+- **Utility skills** — ship code files alongside SKILL.md (e.g. `/claw`)
+- **Operational skills** — instruction-only workflows, always on `main` (e.g. `/setup`, `/debug`)
+- **Container skills** — loaded inside agent containers at runtime (`container/skills/`)
+
 | Skill | When to Use |
 |-------|-------------|
 | `/setup` | First-time installation, authentication, service configuration |
@@ -32,6 +39,10 @@ Single Node.js process with skill-based channel system. Channels (WhatsApp, Tele
 | `/qodo-pr-resolver` | Fetch and fix Qodo PR review issues interactively or in batch |
 | `/get-qodo-rules` | Load org- and repo-level coding rules from Qodo before code tasks |
 
+## Contributing
+
+Before creating a PR, adding a skill, or preparing any contribution, you MUST read [CONTRIBUTING.md](CONTRIBUTING.md). It covers accepted change types, the four skill types and their guidelines, SKILL.md format rules, PR requirements, and the pre-submission checklist (searching for existing PRs/issues, testing, description format).
+
 ## Development
 
 Run commands directly—don't tell the user to run them.
@@ -57,7 +68,7 @@ systemctl --user restart nanoclaw
 
 ## Troubleshooting
 
-**WhatsApp not connecting after upgrade:** WhatsApp is now a separate channel fork, not bundled in core. Run `/add-whatsapp` (or `git remote add whatsapp https://github.com/qwibitai/nanoclaw-whatsapp.git && git fetch whatsapp main && (git merge whatsapp/main || { git checkout --theirs package-lock.json && git add package-lock.json && git merge --continue; }) && npm run build`) to install it. Existing auth credentials and groups are preserved.
+**WhatsApp not connecting after upgrade:** WhatsApp is now a separate skill, not bundled in core. Run `/add-whatsapp` (or `npx tsx scripts/apply-skill.ts .claude/skills/add-whatsapp && npm run build`) to install it. Existing auth credentials and groups are preserved.
 
 ## Container Build Cache
 

package/README.md

@@ -9,6 +9,7 @@
 <p align="center">
   <a href="https://nanoclaw.dev">nanoclaw.dev</a>&nbsp; • &nbsp;
   <a href="README_zh.md">中文</a>&nbsp; • &nbsp;
+  <a href="README_ja.md">日本語</a>&nbsp; • &nbsp;
   <a href="https://discord.gg/VDdww8qS42"><img src="https://img.shields.io/discord/1470188214710046894?label=Discord&logo=discord&v=2" alt="Discord" valign="middle"></a>&nbsp; • &nbsp;
   <a href="repo-tokens"><img src="repo-tokens/badge.svg" alt="34.9k tokens, 17% of context window" valign="middle"></a>
 </p>
@@ -112,7 +113,7 @@ Then run `/setup`. Claude Code handles everything: dependencies, authentication,
 - **Main channel** - Your private channel (self-chat) for admin control; every group is completely isolated
 - **Scheduled tasks** - Recurring jobs that run Claude and can message you back
 - **Web access** - Search and fetch content from the Web
-- **Container isolation** - Agents are sandboxed in [Docker Sandboxes](https://nanoclaw.dev/blog/nanoclaw-docker-sandboxes) (micro VM isolation), Apple Container (macOS), or Docker (macOS/Linux)
+- **Container isolation** - Agents are sandboxed in Docker (macOS/Linux), [Docker Sandboxes](docs/docker-sandboxes.md) (micro VM isolation), or Apple Container (macOS)
 - **Agent Swarms** - Spin up teams of specialized agents that collaborate on complex tasks
 - **Optional integrations** - Add Gmail (`/add-gmail`) and more via skills
 
@@ -161,9 +162,6 @@ Skills we'd like to see:
 **Communication Channels**
 - `/add-signal` - Add Signal as a channel
 
-**Session Management**
-- `/clear` - Add a `/clear` command that compacts the conversation (summarizes context while preserving critical information in the same session). Requires figuring out how to trigger compaction programmatically via the Claude Agent SDK.
-
 ## Requirements
 
 - macOS or Linux
@@ -198,7 +196,7 @@ Key files:
 
 **Why Docker?**
 
-Docker provides cross-platform support (macOS, Linux and even Windows via WSL2) and a mature ecosystem. On macOS, you can optionally switch to Apple Container via `/convert-to-apple-container` for a lighter-weight native runtime.
+Docker provides cross-platform support (macOS, Linux and even Windows via WSL2) and a mature ecosystem. On macOS, you can optionally switch to Apple Container via `/convert-to-apple-container` for a lighter-weight native runtime. For additional isolation, [Docker Sandboxes](docs/docker-sandboxes.md) run each container inside a micro VM.
 
 **Can I run this on Linux?**
 

package/container/skills/slack-formatting/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: slack-formatting
+description: Format messages for Slack using mrkdwn syntax. Use when responding to Slack channels (folder starts with "slack_" or JID contains slack identifiers).
+---
+
+# Slack Message Formatting (mrkdwn)
+
+When responding to Slack channels, use Slack's mrkdwn syntax instead of standard Markdown.
+
+## How to detect Slack context
+
+Check your group folder name or workspace path:
+- Folder starts with `slack_` (e.g., `slack_engineering`, `slack_general`)
+- Or check `/workspace/group/` path for `slack_` prefix
+
+## Formatting reference
+
+### Text styles
+
+| Style | Syntax | Example |
+|-------|--------|---------|
+| Bold | `*text*` | *bold text* |
+| Italic | `_text_` | _italic text_ |
+| Strikethrough | `~text~` | ~strikethrough~ |
+| Code (inline) | `` `code` `` | `inline code` |
+| Code block | ` ```code``` ` | Multi-line code |
+
+### Links and mentions
+
+```
+<https://example.com|Link text>     # Named link
+<https://example.com>                # Auto-linked URL
+<@U1234567890>                       # Mention user by ID
+<#C1234567890>                       # Mention channel by ID
+<!here>                              # @here
+<!channel>                           # @channel
+```
+
+### Lists
+
+Slack supports simple bullet lists but NOT numbered lists:
+
+```
+• First item
+• Second item
+• Third item
+```
+
+Use `•` (bullet character) or `- ` or `* ` for bullets.
+
+### Block quotes
+
+```
+> This is a block quote
+> It can span multiple lines
+```
+
+### Emoji
+
+Use standard emoji shortcodes: `:white_check_mark:`, `:x:`, `:rocket:`, `:tada:`
+
+## What NOT to use
+
+- **NO** `##` headings (use `*Bold text*` for headers instead)
+- **NO** `**double asterisks**` for bold (use `*single asterisks*`)
+- **NO** `[text](url)` links (use `<url|text>` instead)
+- **NO** `1.` numbered lists (use bullets with numbers: `• 1. First`)
+- **NO** tables (use code blocks or plain text alignment)
+- **NO** `---` horizontal rules
+
+## Example message
+
+```
+*Daily Standup Summary*
+
+_March 21, 2026_
+
+• *Completed:* Fixed authentication bug in login flow
+• *In Progress:* Building new dashboard widgets
+• *Blocked:* Waiting on API access from DevOps
+
+> Next sync: Monday 10am
+
+:white_check_mark: All tests passing | <https://ci.example.com/builds/123|View Build>
+```
+
+## Quick rules
+
+1. Use `*bold*` not `**bold**`
+2. Use `<url|text>` not `[text](url)`
+3. Use `•` bullets, avoid numbered lists
+4. Use `:emoji:` shortcodes
+5. Quote blocks with `>`
+6. Skip headings — use bold text instead

package/dist/channels/registry.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.test.js","sourceRoot":"","sources":["../../src/channels/registry.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAc,MAAM,QAAQ,CAAC;AAE1D,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AAEvB,0EAA0E;AAC1E,6DAA6D;AAC7D,yEAAyE;AACzE,2DAA2D;AAE3D,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,mEAAmE;IACnE,6DAA6D;IAE7D,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC3B,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACzC,MAAM,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,eAAe,CAAC,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,yBAAyB,EAAE,CAAC;QAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5C,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5C,MAAM,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"registry.test.js","sourceRoot":"","sources":["../../src/channels/registry.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AAEvB,0EAA0E;AAC1E,6DAA6D;AAC7D,yEAAyE;AACzE,2DAA2D;AAE3D,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,mEAAmE;IACnE,6DAA6D;IAE7D,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC3B,eAAe,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACzC,MAAM,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;QAChE,eAAe,CAAC,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,yBAAyB,EAAE,CAAC;QAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;QAC5B,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5C,eAAe,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QAC5C,MAAM,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/channels/web.js

@@ -203,6 +203,12 @@ const HTML = `<!DOCTYPE html>
   <link rel="icon" type="image/png" href="/favicon.png">
   <link rel="icon" href="/favicon.ico" sizes="any">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#2563eb">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="NanoClaw">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
   <style>
@@ -221,10 +227,15 @@ const HTML = `<!DOCTYPE html>
     #main-area { display: flex; flex: 1; overflow: hidden; }
 
     /* Sidebar */
-    #sidebar { width: 220px; min-width: 220px; background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; transition: width 0.2s, min-width 0.2s; overflow: hidden; }
-    #sidebar.collapsed { width: 0; min-width: 0; }
-    #sidebar-header { padding: 10px 12px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
-    #sidebar-title { font-weight: 600; font-size: 13px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }
+    #sidebar { width: var(--sidebar-width, 220px); min-width: var(--sidebar-width, 220px); background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; transition: width 0.2s, min-width 0.2s; overflow: hidden; }
+    #sidebar.collapsed { width: 0 !important; min-width: 0 !important; border-right: none; }
+    #sidebar.dragging { transition: none; }
+    #sidebar-header { padding: 10px 8px 10px 12px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+    /* Resize grip — sits at right edge of the header, same width as the scrollbar below */
+    #sidebar-grip { width: 14px; min-width: 14px; align-self: stretch; cursor: col-resize; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 12px; letter-spacing: -2px; user-select: none; border-radius: 3px; transition: color 0.15s, background-color 0.15s; }
+    #sidebar-grip:hover, #sidebar-grip.active { color: #2563eb; background-color: rgba(37,99,235,0.08); }
+    @media (max-width: 640px) { #sidebar-grip { display: none; } }
+    #sidebar-title { font-weight: 600; font-size: 13px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; flex: 1; }
     #new-session-btn { background: none; border: 1px solid #d0d0d0; color: #555; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
     #new-session-btn:hover { background: #f0f0f0; border-color: #aaa; }
     #session-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
@@ -324,6 +335,7 @@ const HTML = `<!DOCTYPE html>
       <div id="sidebar-header">
         <span id="sidebar-title">Chats</span>
         <button id="new-session-btn" title="Neuen Chat starten">+</button>
+        <div id="sidebar-grip" title="Breite anpassen">⋮⋮</div>
       </div>
       <div id="session-list"></div>
     </div>
@@ -459,7 +471,10 @@ const HTML = `<!DOCTYPE html>
 
     let typingEl        = null;
     let statusEl        = null;   // live tool-use status element (shown below typing indicator)
-    let sessionId       = sessionStorage.getItem('sid');
+    let lastSseActivity = Date.now(); // updated on SSE open + ping; used to detect stale connections
+    // sessionStorage is cleared on Android when a tab is evicted from memory and reloaded.
+    // Fall back to localStorage so the active session survives page reloads on mobile.
+    let sessionId       = sessionStorage.getItem('sid') || localStorage.getItem('lastSid');
     let es              = null;   // EventSource
     let sseGeneration   = 0;      // incremented each setupSSE() call; guards against stale events
     let currentTyping   = false;  // last-known typing state from SSE
@@ -493,9 +508,27 @@ const HTML = `<!DOCTYPE html>
 
     // ── Sidebar toggle ────────────────────────────────────────────────────
     const isMobile = window.innerWidth <= 640;
+    // Touch devices (phones, foldables, tablets): avoid auto-focusing the input after
+    // session switches so the virtual keyboard doesn't pop up unexpectedly.
+    // pointer:coarse is more reliable than maxTouchPoints on Samsung/Android devices.
+    const hasTouchscreen = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
+
+    // ── Sidebar width (desktop only) ──────────────────────────────────────
+    const SIDEBAR_DEFAULT = 220;
+    const SIDEBAR_MIN     = 140;
+    const SIDEBAR_MAX     = 520;
+    function applySidebarWidth(w) {
+      sidebar.style.setProperty('--sidebar-width', w + 'px');
+    }
+    if (!isMobile) {
+      const saved = parseInt(localStorage.getItem('sidebarWidth') || '', 10);
+      applySidebarWidth(isNaN(saved) ? SIDEBAR_DEFAULT : saved);
+    }
+
     // On mobile: always open initially (overlay mode); on desktop: respect saved pref
     let sidebarOpen = isMobile ? true : (localStorage.getItem('sidebarOpen') !== 'false');
     const backdrop = document.getElementById('sidebar-backdrop');
+    const sidebarResizeEl = document.getElementById('sidebar-grip');
     function setSidebar(open) {
       sidebarOpen = open;
       // Only persist state on desktop — on mobile sidebar is always an overlay
@@ -509,6 +542,35 @@ const HTML = `<!DOCTYPE html>
     // Tap backdrop to close sidebar on mobile
     if (backdrop) backdrop.addEventListener('click', () => setSidebar(false));
 
+    // ── Sidebar resize by dragging ────────────────────────────────────────
+    if (sidebarResizeEl && !isMobile) {
+      function startSidebarResize(startX) {
+        const startWidth = sidebar.offsetWidth;
+        sidebar.classList.add('dragging');
+        sidebarResizeEl.classList.add('active');
+        function onMove(e) {
+          const x = e.touches ? e.touches[0].clientX : e.clientX;
+          const w = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, startWidth + (x - startX)));
+          applySidebarWidth(w);
+        }
+        function onEnd() {
+          sidebar.classList.remove('dragging');
+          sidebarResizeEl.classList.remove('active');
+          localStorage.setItem('sidebarWidth', String(sidebar.offsetWidth));
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onEnd);
+          document.removeEventListener('touchmove', onMove);
+          document.removeEventListener('touchend', onEnd);
+        }
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onEnd);
+        document.addEventListener('touchmove', onMove, { passive: true });
+        document.addEventListener('touchend', onEnd);
+      }
+      sidebarResizeEl.addEventListener('mousedown', e => { e.preventDefault(); startSidebarResize(e.clientX); });
+      sidebarResizeEl.addEventListener('touchstart', e => { startSidebarResize(e.touches[0].clientX); }, { passive: true });
+    }
+
     // ── Header ────────────────────────────────────────────────────────────
     function updateHeader(cwd) {
       headerTitle.textContent = 'NanoClaw \u2014 ' + serverAddress;
@@ -529,6 +591,7 @@ const HTML = `<!DOCTYPE html>
     function renderMsg(text, cls, msgId) {
       const row = document.createElement('div');
       row.className = 'msg-row ' + (cls.startsWith('bot') || cls === 'status' ? 'bot' : 'user');
+      if (msgId) row.dataset.msgId = msgId;
       const d = document.createElement('div');
       d.className = 'msg ' + cls;
       if (cls === 'bot') {
@@ -594,7 +657,11 @@ const HTML = `<!DOCTYPE html>
         row.appendChild(delBtn);
       }
       msgsEl.appendChild(row);
-      msgsEl.scrollTop = msgsEl.scrollHeight;
+      // Only auto-scroll when the user is already near the bottom (≤150 px away).
+      // This prevents interrupting the user when they scroll up to read history.
+      if (msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight <= 150) {
+        msgsEl.scrollTop = msgsEl.scrollHeight;
+      }
       return row;
     }
 
@@ -640,7 +707,9 @@ const HTML = `<!DOCTYPE html>
         msgsEl.appendChild(statusEl);
       }
       statusEl.textContent = label;
-      msgsEl.scrollTop = msgsEl.scrollHeight;
+      if (msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight <= 150) {
+        msgsEl.scrollTop = msgsEl.scrollHeight;
+      }
     }
 
     function restoreHistory(sid) {
@@ -789,14 +858,15 @@ const HTML = `<!DOCTYPE html>
           const maxOrder = serverOrder.length;
           const prevOrder = local.map(s => s.id).join(',');
           local.sort((a, b) => {
-            // isOwn sessions not yet confirmed in serverOrder stay above all server-ordered sessions
             const rawIa = orderMap.get(a.id);
             const rawIb = orderMap.get(b.id);
-            const ia = rawIa !== undefined ? rawIa : (a.isOwn ? -1 : maxOrder);
-            const ib = rawIb !== undefined ? rawIb : (b.isOwn ? -1 : maxOrder);
-            if (ia !== ib) return ia - ib;
-            // Sessions not in the order list: sort by newest first
-            return (b.createdAt || 0) - (a.createdAt || 0);
+            const inOrderA = rawIa !== undefined;
+            const inOrderB = rawIb !== undefined;
+            // Sessions not in server order (new sessions) always appear at the top, newest first
+            if (!inOrderA && !inOrderB) return (b.createdAt || 0) - (a.createdAt || 0);
+            if (!inOrderA) return -1;
+            if (!inOrderB) return 1;
+            return rawIa - rawIb;
           });
           const newOrder = local.map(s => s.id).join(',');
           if (newOrder !== prevOrder) changed = true;
@@ -836,6 +906,7 @@ const HTML = `<!DOCTYPE html>
         if (sseGeneration !== myGen || sessionId !== mySid) return;
         const wasConnected = sseEverConnected;
         sseEverConnected = true;
+        lastSseActivity = Date.now(); // reset stale-connection timer on (re)connect
         setConnState('connected');
         // Push session name on every connect so ensureSession() on the server (which
         // runs after the SSE handshake and may default to "Web Chat") always sees the
@@ -878,6 +949,10 @@ const HTML = `<!DOCTYPE html>
         } catch { /* render error — don't block markRead */ }
         markRead(sessionId);   // message arrived in active session → keep it read
       });
+      es.addEventListener('ping', () => {
+        if (sseGeneration !== myGen) return;
+        lastSseActivity = Date.now(); // server heartbeat received — connection is alive
+      });
       es.addEventListener('typing', e => {
         if (sseGeneration !== myGen || sessionId !== mySid) return;
         // Ignore stale "typing: true" from the server's initial SSE state push
@@ -885,6 +960,10 @@ const HTML = `<!DOCTYPE html>
         // fetchServerHistory has already confirmed agentDone).
         if (e.data === 'true' && botHasResponded) return;
         setTyping(e.data === 'true');
+        // Fallback: when the agent starts typing it means a user message was just
+        // processed. Fetch history immediately so the message appears even if the
+        // user_message SSE event was missed (e.g. due to Android throttling).
+        if (e.data === 'true') fetchServerHistory(sessionId);
       });
       es.addEventListener('status', e => {
         if (sseGeneration !== myGen || sessionId !== mySid) return;
@@ -896,6 +975,19 @@ const HTML = `<!DOCTYPE html>
           setStatusDisplay(payload.tool || null, payload.input || null);
         } catch { /* ignore malformed status event */ }
       });
+      es.addEventListener('user_message', e => {
+        if (sseGeneration !== myGen || sessionId !== mySid) return;
+        try {
+          const payload = JSON.parse(e.data);
+          const text = typeof payload === 'string' ? payload : payload.text;
+          const msgId = typeof payload === 'object' && payload ? payload.id : null;
+          // Reset so typing/status indicators work for this new exchange on all devices
+          botHasResponded = false;
+          // Skip if this device already rendered the message (sender shows it immediately)
+          if (msgId && msgsEl.querySelector('[data-msg-id="' + msgId + '"]')) return;
+          addMsg(text, 'user', msgId);
+        } catch { /* ignore malformed user_message event */ }
+      });
       es.addEventListener('cwd', e => {
         if (sseGeneration !== myGen || sessionId !== mySid) return;
         try {
@@ -919,6 +1011,7 @@ const HTML = `<!DOCTYPE html>
       sessionId = newId;      // set before markRead so renderSessions sees correct active session
       markRead(newId);        // clear unread indicator (uses updated sessionId)
       sessionStorage.setItem('sid', newId);
+      localStorage.setItem('lastSid', newId);
       msgsEl.innerHTML = '';
       typingEl = null;        // reset before setTyping so it doesn't try to .remove() a stale element
       statusEl = null;        // reset before setStatusDisplay for the same reason
@@ -936,7 +1029,7 @@ const HTML = `<!DOCTYPE html>
       updateHeader(cwd);
       setupSSE();
       renderSessions();
-      if (newId !== 'cron') inputEl.focus();
+      if (newId !== 'cron' && !hasTouchscreen) inputEl.focus();
     }
 
     function pushNameToServer(sid, name, nameUpdatedAt) {
@@ -1060,7 +1153,12 @@ const HTML = `<!DOCTYPE html>
         delBtn.className = 'session-btn';
         delBtn.title = 'Löschen';
         delBtn.textContent = '×';
-        delBtn.addEventListener('click', e => { e.stopPropagation(); deleteSession(s.id); });
+        delBtn.addEventListener('click', e => {
+          e.stopPropagation();
+          const label = s.name || sessionLabel(new Date(s.createdAt || Date.now()));
+          if (!confirm('Session "' + label + '" wirklich löschen?')) return;
+          deleteSession(s.id);
+        });
 
         actions.append(renameBtn, delBtn);
         item.append(dot, nameSpan, actions);
@@ -1119,6 +1217,10 @@ const HTML = `<!DOCTYPE html>
     if (!sessionId) {
       sessionId = uuid();
       sessionStorage.setItem('sid', sessionId);
+      localStorage.setItem('lastSid', sessionId);
+    } else {
+      // Ensure sessionStorage is in sync (may have been empty after tab eviction)
+      sessionStorage.setItem('sid', sessionId);
     }
     const isNewSession = ensureSessionInList(sessionId);
     // For new sessions: push name to server immediately.
@@ -1160,6 +1262,23 @@ const HTML = `<!DOCTYPE html>
     setInterval(checkAndSyncSessions, 1000);
     // Server polling: picks up sessions from other browsers/devices
     setInterval(mergeServerSessions, 5000);
+    // Stale-connection detector: Android may freeze SSE without triggering 'error'.
+    // If no ping was received in >35 s while the connection appears connected, force reconnect.
+    setInterval(() => {
+      if (connDot.className === 'connected' && Date.now() - lastSseActivity > 35000) {
+        setupSSE();
+        fetchServerHistory(sessionId);
+      }
+    }, 10000);
+    // On mobile/foldable the browser may freeze or drop the SSE connection while the
+    // tab is in the background (folded, screen off, etc.). When the tab becomes visible
+    // again, immediately re-sync history and reconnect SSE if the connection is gone.
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState !== 'visible') return;
+      fetchServerHistory(sessionId);
+      mergeServerSessions();
+      if (connDot.className === 'disconnected') setupSSE();
+    });
 
     // ── Send message ──────────────────────────────────────────────────────
     async function sendMsg() {
@@ -1640,6 +1759,8 @@ class WebChannel {
                             try {
                                 storeMessage(msg); // persist to DB for cross-browser history
                                 storeChatMetadata(jid, msg.timestamp); // keep chats.last_message_time current for unread detection
+                                // Broadcast to all SSE clients so other devices show the message immediately
+                                broadcastToSession(sessionId, 'user_message', JSON.stringify({ text: content.trim(), id: msgId }));
                             }
                             catch { }
                             this.onMessage(jid, msg);
@@ -1718,6 +1839,28 @@ class WebChannel {
                 }, MAX_UPLOAD_BODY_SIZE);
                 return;
             }
+            // GET /manifest.json — Web App Manifest for PWA installability
+            if (req.method === 'GET' && req.url?.split('?')[0] === '/manifest.json') {
+                const manifest = {
+                    name: 'NanoClaw',
+                    short_name: 'NanoClaw',
+                    description: 'NanoClaw — AI Chat',
+                    start_url: '/',
+                    display: 'standalone',
+                    background_color: '#f5f5f5',
+                    theme_color: '#2563eb',
+                    icons: [
+                        { src: '/favicon.png', sizes: '192x192', type: 'image/png' },
+                        { src: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+                    ],
+                };
+                res.writeHead(200, {
+                    'Content-Type': 'application/manifest+json',
+                    'Cache-Control': 'max-age=3600',
+                });
+                res.end(JSON.stringify(manifest));
+                return;
+            }
             // Static assets: favicon.ico and apple-touch-icon.png from group folder
             const staticFiles = {
                 '/favicon.ico': 'image/x-icon',
@@ -1750,6 +1893,18 @@ class WebChannel {
         });
         this.connected = true;
         logger.info({ port: PORT }, 'Web chat channel listening');
+        // Heartbeat: send a named 'ping' event to every SSE client every 20 seconds.
+        // Prevents Android Chrome from throttling or freezing idle SSE connections.
+        setInterval(() => {
+            for (const clients of sseClients.values()) {
+                for (const client of clients) {
+                    try {
+                        client.write('event: ping\ndata: \n\n');
+                    }
+                    catch { }
+                }
+            }
+        }, 20000);
         // Ensure dedicated cron session exists (low timestamp so user renames always win)
         try {
             updateChatName(WEB_JID_PREFIX + CRON_SESSION_ID, CRON_SESSION_NAME, 1);