aboutsummaryrefslogtreecommitdiff
path: root/help.html
diff options
context:
space:
mode:
Diffstat (limited to 'help.html')
-rw-r--r--help.html926
1 files changed, 926 insertions, 0 deletions
diff --git a/help.html b/help.html
new file mode 100644
index 0000000..80c2e9c
--- /dev/null
+++ b/help.html
@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="theme-color" content="#0a0a14">
+<title>WebX11 v4.2 — Help</title>
+<style>
+/* ── Reset & Base ── */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
+:root{
+ --bg:#0a0a14;
+ --bg2:#111122;
+ --bg3:#16162a;
+ --bg4:#1c1c36;
+ --text:#d0d0e8;
+ --text2:#8888aa;
+ --accent:#7c5cfc;
+ --accent2:#a78bfa;
+ --green:#34d399;
+ --cyan:#22d3ee;
+ --amber:#fbbf24;
+ --rose:#fb7185;
+ --pink:#e879f9;
+ --border:#2a2a4a;
+ --radius:12px;
+ --font-mono:'JetBrains Mono','Fira Code','Cascadia Code','Courier New',monospace;
+ --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter','SF Pro',Roboto,sans-serif
+}
+html{scroll-behavior:smooth}
+body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
+@media(max-width:600px){body{font-size:13.5px}}
+
+/* ── Header ── */
+header{
+ position:sticky;top:0;z-index:100;
+ background:rgba(10,10,20,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
+ border-bottom:1px solid var(--border);padding:0
+}
+header::after{
+ content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;
+ background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5
+}
+.header-inner{max-width:960px;margin:0 auto;padding:20px 24px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
+.header-left{display:flex;align-items:center;gap:14px}
+.header-logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--pink));display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
+h1{font-size:1.35em;font-weight:700;letter-spacing:-.02em;color:#fff}
+h1 span{color:var(--accent2)}
+.header-meta{display:flex;align-items:center;gap:10px;font-size:.8em;color:var(--text2)}
+.badge{
+ display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7em;font-weight:600;
+ letter-spacing:.03em;text-transform:uppercase
+}
+.badge-v{background:rgba(124,92,252,.2);color:var(--accent2);border:1px solid rgba(124,92,252,.3)}
+.badge-new{background:rgba(52,211,153,.15);color:var(--green);border:1px solid rgba(52,211,153,.25)}
+
+/* ── Nav ── */
+nav{
+ position:sticky;top:74px;z-index:99;
+ background:rgba(10,10,20,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
+ border-bottom:1px solid var(--border);padding:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none
+}
+nav::-webkit-scrollbar{display:none}
+.nav-inner{max-width:960px;margin:0 auto;padding:8px 24px;display:flex;gap:4px;flex-wrap:nowrap}
+.nav-link{
+ flex-shrink:0;color:var(--text2);text-decoration:none;padding:6px 14px;border-radius:8px;
+ font-size:.78em;font-weight:500;transition:all .15s;white-space:nowrap
+}
+.nav-link:hover{color:#fff;background:rgba(124,92,252,.12)}
+
+/* ── Main ── */
+main{max-width:960px;margin:0 auto;padding:32px 24px 80px}
+
+/* ── Search ── */
+.search-box{
+ display:flex;gap:8px;margin-bottom:40px;
+ background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
+ padding:4px;transition:border-color .2s
+}
+.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,.15)}
+.search-box input{
+ flex:1;background:transparent;border:none;color:var(--text);font-family:var(--font-mono);
+ font-size:.9em;outline:none;padding:10px 14px
+}
+.search-box input::placeholder{color:var(--text2);opacity:.6}
+.search-box button{
+ background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:8px;
+ font-size:.8em;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:inherit
+}
+.search-box button:hover{opacity:.85}
+.search-result-msg{color:var(--amber);font-size:.85em;margin-top:8px;display:none}
+
+/* ── Sections ── */
+section{margin-bottom:56px;scroll-margin-top:130px}
+h2{
+ font-size:1.35em;font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:-.01em;
+ display:flex;align-items:center;gap:10px
+}
+h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
+h3{
+ font-size:1.05em;font-weight:600;color:var(--text);margin:28px 0 12px;
+ display:flex;align-items:center;gap:8px
+}
+h4{font-size:.92em;font-weight:600;color:var(--accent2);margin:20px 0 8px}
+p{margin-bottom:14px;color:var(--text);line-height:1.8}
+ul,ol{margin-bottom:14px;padding-left:22px;color:var(--text)}
+li{margin-bottom:6px}
+a{color:var(--accent2);text-decoration:none;transition:color .15s}
+a:hover{color:#fff}
+
+/* ── Tables ── */
+.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border-radius:var(--radius);border:1px solid var(--border)}
+table{width:100%;border-collapse:collapse;font-size:.88em}
+th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
+th{background:var(--bg3);color:var(--accent2);font-weight:600;font-size:.82em;text-transform:uppercase;letter-spacing:.04em}
+tr:last-child td{border-bottom:none}
+tr:hover td{background:rgba(124,92,252,.04)}
+code{
+ font-family:var(--font-mono);font-size:.88em;padding:2px 7px;border-radius:5px;
+ background:rgba(124,92,252,.12);color:var(--accent2);border:1px solid rgba(124,92,252,.15)
+}
+pre code{background:transparent;border:none;padding:0;color:var(--text);font-size:.88em}
+
+/* ── Pre / Code Blocks ── */
+pre{
+ background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
+ padding:16px 20px;overflow-x:auto;margin:16px 0;font-family:var(--font-mono);font-size:.85em;line-height:1.6
+}
+pre .cmt{color:var(--text2);opacity:.6} /* comment style */
+
+/* ── Callouts ── */
+.callout{
+ padding:16px 20px;border-radius:var(--radius);margin:16px 0;
+ border-left:3px solid;position:relative
+}
+.callout::before{content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:.06;pointer-events:none}
+.callout-success{border-color:var(--green)}.callout-success::before{background:var(--green)}
+.callout-info{border-color:var(--cyan)}.callout-info::before{background:var(--cyan)}
+.callout-warning{border-color:var(--amber)}.callout-warning::before{background:var(--amber)}
+.callout-error{border-color:var(--rose)}.callout-error::before{background:var(--rose)}
+.callout-ollama{border-color:var(--pink)}.callout-ollama::before{background:var(--pink)}
+.callout-title{font-weight:700;margin-bottom:6px;display:block;font-size:.92em}
+
+/* ── Feature Grid ── */
+.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0}
+.feature-card{
+ background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
+ padding:16px;transition:border-color .2s,transform .15s
+}
+.feature-card:hover{border-color:rgba(124,92,252,.4);transform:translateY(-1px)}
+.feature-card h4{margin:0 0 6px;font-size:.88em}
+.feature-card p{font-size:.82em;color:var(--text2);margin:0;line-height:1.5}
+
+/* ── Quick Ref ── */
+.quick-ref{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:16px 0}
+.quick-ref-title{color:var(--accent2);font-weight:700;text-align:center;margin-bottom:16px;font-size:.95em;letter-spacing:.02em;text-transform:uppercase}
+.quick-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
+.quick-ref-item{background:var(--bg3);padding:10px 12px;border-radius:8px;border:1px solid var(--border)}
+.quick-ref-item .cmd{color:var(--accent2);font-family:var(--font-mono);font-weight:600;font-size:.85em;display:block}
+.quick-ref-item .desc{color:var(--text2);font-size:.78em;margin-top:3px}
+
+/* ── Version Items ── */
+.version-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:12px 0;transition:border-color .2s}
+.version-item:hover{border-color:rgba(124,92,252,.3)}
+.version-item .v-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
+.version-item .v-num{color:var(--accent2);font-weight:700;font-size:.95em}
+.version-item .v-date{color:var(--text2);font-size:.82em}
+.version-item ul{margin:0;padding-left:18px}
+.version-item li{margin-bottom:4px;font-size:.88em;color:var(--text)}
+
+/* ── Footer ── */
+footer{
+ text-align:center;padding:32px 24px;border-top:1px solid var(--border);
+ color:var(--text2);font-size:.82em
+}
+footer .links{display:flex;justify-content:center;gap:20px;margin-bottom:14px;flex-wrap:wrap}
+footer .links a{color:var(--text);font-weight:500}
+footer .links a:hover{color:var(--accent2)}
+footer .tagline{color:var(--accent2);margin-top:10px;font-weight:500}
+
+/* ── Back to Top ── */
+.back-top{
+ position:fixed;bottom:24px;right:24px;
+ background:var(--bg3);border:1px solid var(--border);color:var(--text2);
+ width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
+ font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:all .2s;z-index:50;
+ backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none
+}
+.back-top.visible{opacity:1;pointer-events:auto}
+.back-top:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
+
+/* ── Responsive ── */
+@media(max-width:600px){
+ .header-inner{padding:16px 16px 12px}
+ .header-meta{display:none}
+ .nav-inner{padding:6px 12px;gap:2px}
+ .nav-link{padding:5px 10px;font-size:.74em}
+ main{padding:20px 16px 60px}
+ h2{font-size:1.15em}
+ .feature-grid{grid-template-columns:1fr}
+ .quick-ref-grid{grid-template-columns:1fr 1fr}
+ pre{font-size:.8em;padding:12px 14px}
+ th,td{padding:8px 10px;font-size:.82em}
+}
+@media(max-width:400px){
+ .quick-ref-grid{grid-template-columns:1fr}
+ .badge-new{display:none}
+}
+</style>
+</head>
+<body>
+
+<header>
+ <div class="header-inner">
+ <div class="header-left">
+ <div class="header-logo">⚡</div>
+ <h1>WebX11 <span>Docs</span></h1>
+ </div>
+ <div class="header-meta">
+ <span class="badge badge-v">v4.2</span>
+ <span class="badge badge-new">24 core · 12 ext</span>
+ <span style="color:var(--text2)">110+ commands</span>
+ </div>
+ </div>
+</header>
+
+<nav>
+ <div class="nav-inner">
+ <a href="#overview" class="nav-link">Overview</a>
+ <a href="#start" class="nav-link">Quick Start</a>
+ <a href="#commands" class="nav-link">Commands</a>
+ <a href="#filesystem" class="nav-link">Filesystem</a>
+ <a href="#ai" class="nav-link">AI Agent</a>
+ <a href="#skills" class="nav-link">Skills</a>
+ <a href="#ollama" class="nav-link">Ollama</a>
+ <a href="#web" class="nav-link">Search & Web</a>
+ <a href="#voice" class="nav-link">Voice & Sound</a>
+ <a href="#config" class="nav-link">Config</a>
+ <a href="#modules" class="nav-link">Modules</a>
+ <a href="#extras" class="nav-link">Extras</a>
+ <a href="#sessions" class="nav-link">Sessions</a>
+ <a href="#storage" class="nav-link">Storage</a>
+ <a href="#security" class="nav-link">Security</a>
+ <a href="#trouble" class="nav-link">Troubleshoot</a>
+ <a href="#ref" class="nav-link">Quick Ref</a>
+ <a href="#history" class="nav-link">Changelog</a>
+ </div>
+</nav>
+
+<main>
+ <div class="search-box">
+ <input type="text" id="search-input" placeholder="Search docs…" spellcheck="false">
+ <button onclick="searchDocs()">Search</button>
+ </div>
+ <div class="search-result-msg" id="search-result-msg"></div>
+
+ <!-- ── Overview ── -->
+ <section id="overview">
+ <h2>⛅ Overview</h2>
+ <p>WebX11 v4.2 is a browser-based Unix-like terminal — dynamic modules, AI assistant (Ollama), persistent virtual filesystem, web search, voice input, code editor, and a full skill system. Everything runs client-side in your browser.</p>
+ <div class="feature-grid">
+ <div class="feature-card"><h4>🧩 24 Core + 12 Ext</h4><p>Modules loaded at startup. Load new ones from any URL at runtime.</p></div>
+ <div class="feature-card"><h4>🤖 Agent with Tools</h4><p>15+ tools — file ops, web search, skills, modules. Destructive action confirmations with inline bar + countdown.</p></div>
+ <div class="feature-card"><h4>📚 Skills System</h4><p>Persistent procedural memory. Create, patch, search, export skills for repeatable workflows.</p></div>
+ <div class="feature-card"><h4>💾 VFS + Sessions</h4><p>Virtual filesystem persists in localStorage. Save/load/export sessions.</p></div>
+ <div class="feature-card"><h4>🎤 Voice Input</h4><p>Speech recognition in the terminal. Works in Chrome, Edge, Safari.</p></div>
+ <div class="feature-card"><h4>🌐 Web Search</h4><p>SearXNG + DuckDuckGo fallback + URL fetch/extract. All built-in.</p></div>
+ <div class="feature-card"><h4>☁️ WebDAV Sync</h4><p>Push, pull, backup VFS to any WebDAV server.</p></div>
+ <div class="feature-card"><h4>📱 Mobile First</h4><p>Touch-optimized. <code>srcdoc</code> HTML preview works on mobile.</p></div>
+ <div class="feature-card"><h4>✏️ Text Editor</h4><p>Inline VFS editor — <code>edit &lt;path&gt;</code> opens a modal with save/cancel.</p></div>
+ <div class="feature-card"><h4>🔗 Aliases</h4><p><code>ll</code>, <code>h</code>, <code>cls</code> built-in. Define custom aliases with <code>alias x=y</code>.</p></div>
+ </div>
+ </section>
+
+ <!-- ── Quick Start ── -->
+ <section id="start">
+ <h2>🚀 Quick Start</h2>
+ <ol style="margin-bottom:8px">
+ <li><strong>Open</strong> <code>index.html</code> in Chrome/Edge</li>
+ <li>Watch the splash screen load modules</li>
+ <li>Type <code>help</code> + Enter</li>
+ <li>Use the quick-action buttons above the input area</li>
+ </ol>
+
+ <h3>First Commands</h3>
+ <pre><span class="cmt"># List VFS files</span>
+ls
+
+<span class="cmt"># List files faster</span>
+ll
+
+<span class="cmt"># Connect to Ollama AI</span>
+ollamaconnect
+
+<span class="cmt"># Chat with AI</span>
+ai what's in this directory?
+
+<span class="cmt"># Create a file</span>
+put hello.txt Hello World
+
+<span class="cmt"># Edit a file</span>
+edit hello.txt
+
+<span class="cmt"># Search the web</span>
+search quantum computing
+
+<span class="cmt"># Find files</span>
+find hello
+
+<span class="cmt"># Compare two files</span>
+diff a.txt b.txt</pre>
+
+ <div class="callout callout-info">
+ <span class="callout-title">⌨️ Keyboard Shortcuts</span>
+ <ul style="margin:0">
+ <li><strong>Enter</strong> — Execute</li>
+ <li><strong>Tab</strong> — Cycle autocomplete</li>
+ <li><strong>↑/↓</strong> — Command history</li>
+ <li><strong>Esc</strong> — Hide autocomplete / stop AI</li>
+ <li><strong>|</strong> — Pipe: <code>ls | grep hello</code></li>
+ </ul>
+ </div>
+ </section>
+
+ <!-- ── Commands ── -->
+ <section id="commands">
+ <h2>📖 Full Command Reference</h2>
+
+ <h3>System</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>help</code></td><td>Show all commands</td><td><code>help</code></td></tr>
+ <tr><td><code>clear</code> / <code>cls</code></td><td>Clear terminal</td><td><code>cls</code></td></tr>
+ <tr><td><code>echo</code></td><td>Print text</td><td><code>echo Hello</code></td></tr>
+ <tr><td><code>mem</code></td><td>Show memory usage</td><td><code>mem</code></td></tr>
+ <tr><td><code>status</code></td><td>System status</td><td><code>status</code></td></tr>
+ <tr><td><code>font-size</code></td><td>Change font size (8–32)</td><td><code>font-size 16</code></td></tr>
+ <tr><td><code>load-local</code></td><td>Load module from VFS or URL</td><td><code>load-local modules/ext/calc.js</code></td></tr>
+ <tr><td><code>startup-modules</code></td><td>Open startup module selector</td><td><code>startup-modules</code></td></tr>
+ <tr><td><code>preview</code></td><td>Preview HTML in iframe</td><td><code>preview test.html</code></td></tr>
+ <tr><td><code>factory-reset</code></td><td>Reset config</td><td><code>factory-reset</code></td></tr>
+ <tr><td><code>reset-vfs</code></td><td>Reset VFS</td><td><code>reset-vfs</code></td></tr>
+ </table></div>
+
+ <h3>AI Assistant</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>ai</code> / <code>ask</code></td><td>Chat with AI (tool-calling)</td><td><code>ai create a notes file</code></td></tr>
+ <tr><td><code>ai-clear</code></td><td>Reset conversation context</td><td><code>ai-clear</code></td></tr>
+ <tr><td><code>ai-system</code></td><td>View/set system prompt</td><td><code>ai-system</code></td></tr>
+ <tr><td><code>ai-context</code></td><td>Show conversation memory</td><td><code>ai-context</code></td></tr>
+ <tr><td><code>ai-allow</code></td><td>Allow pending destructive action</td><td><code>ai-allow</code></td></tr>
+ <tr><td><code>ai-deny</code></td><td>Deny pending destructive action</td><td><code>ai-deny</code></td></tr>
+ <tr><td><code>ai-stop</code></td><td>Cancel running AI request</td><td><code>ai-stop</code></td></tr>
+ </table></div>
+
+ <h3>Smart Context</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>context</code></td><td>Set active profile</td><td><code>context expert</code></td></tr>
+ <tr><td><code>contexts</code></td><td>List profiles</td><td><code>contexts</code></td></tr>
+ <tr><td><code>context-new</code></td><td>Create profile</td><td><code>context-new myprofile</code></td></tr>
+ <tr><td><code>context-delete</code></td><td>Delete profile</td><td><code>context-delete old</code></td></tr>
+ <tr><td><code>smart-ask</code></td><td>Ask with current profile</td><td><code>smart-ask explain this</code></td></tr>
+ </table></div>
+
+ <h3>Dynamic Prompts</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>prompt</code></td><td>Use saved template</td><td><code>prompt summarize</code></td></tr>
+ <tr><td><code>prompt-save</code></td><td>Save template</td><td><code>prompt-save myprompt</code></td></tr>
+ <tr><td><code>prompt-list</code></td><td>List saved prompts</td><td><code>prompt-list</code></td></tr>
+ <tr><td><code>prompt-delete</code></td><td>Delete prompt</td><td><code>prompt-delete old</code></td></tr>
+ <tr><td><code>prompt-var</code></td><td>Set template variable</td><td><code>prompt-var name Alice</code></td></tr>
+ <tr><td><code>prompt-vars</code></td><td>List variables</td><td><code>prompt-vars</code></td></tr>
+ </table></div>
+
+ <h3>Skills</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>skill-list</code></td><td>List all skills</td><td><code>skill-list</code></td></tr>
+ <tr><td><code>skill-view</code></td><td>View skill content</td><td><code>skill-view web-scraper</code></td></tr>
+ <tr><td><code>skill-create</code></td><td>Create a skill</td><td><code>skill-create name desc "steps" tags</code></td></tr>
+ <tr><td><code>skill-patch</code></td><td>Update a skill</td><td><code>skill-patch name "new content"</code></td></tr>
+ <tr><td><code>skill-delete</code></td><td>Delete a skill</td><td><code>skill-delete oldskill</code></td></tr>
+ <tr><td><code>skill-export</code></td><td>Export skill to JSON</td><td><code>skill-export myskill</code></td></tr>
+ <tr><td><code>skill-import</code></td><td>Import skill from JSON</td><td><code>skill-import</code></td></tr>
+ <tr><td><code>skill-sync</code></td><td>Rebuild skill index</td><td><code>skill-sync</code></td></tr>
+ </table></div>
+
+ <h3>Config</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>config</code></td><td>Get a config value</td><td><code>config</code></td></tr>
+ <tr><td><code>config-set</code></td><td>Set a config value</td><td><code>config-set key value</code></td></tr>
+ <tr><td><code>config-list</code></td><td>List all config</td><td><code>config-list</code></td></tr>
+ <tr><td><code>config-delete</code></td><td>Delete a config entry</td><td><code>config-delete key</code></td></tr>
+ <tr><td><code>config-export</code></td><td>Export config as JSON</td><td><code>config-export</code></td></tr>
+ <tr><td><code>config-reset</code></td><td>Reset all config</td><td><code>config-reset</code></td></tr>
+ </table></div>
+ </section>
+
+ <!-- ── Filesystem ── -->
+ <section id="filesystem">
+ <h2>📁 Filesystem</h2>
+ <p>All VFS files persist in <code>localStorage</code>. <code>ls</code>, <code>cd</code>, <code>pwd</code> work like a real terminal. Clickable output — tap a file to <code>cat</code>, tap a dir to <code>cd</code>.</p>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>ls</code> / <code>ll</code></td><td>List files</td><td><code>ll</code></td></tr>
+ <tr><td><code>cd</code></td><td>Change directory</td><td><code>cd notes</code></td></tr>
+ <tr><td><code>pwd</code></td><td>Print working directory</td><td><code>pwd</code></td></tr>
+ <tr><td><code>cat</code></td><td>View file</td><td><code>cat readme.txt</code></td></tr>
+ <tr><td><code>put</code></td><td>Create file with content</td><td><code>put hello.txt Hello World</code></td></tr>
+ <tr><td><code>edit</code></td><td>Open in modal editor</td><td><code>edit notes.md</code></td></tr>
+ <tr><td><code>rm</code></td><td>Delete file</td><td><code>rm temp.txt</code></td></tr>
+ <tr><td><code>mkdir</code></td><td>Create directory</td><td><code>mkdir projects</code></td></tr>
+ <tr><td><code>rmdir</code></td><td>Remove directory</td><td><code>rmdir empty</code></td></tr>
+ <tr><td><code>mv</code></td><td>Move/rename</td><td><code>mv old.txt new.txt</code></td></tr>
+ <tr><td><code>cp</code></td><td>Copy file</td><td><code>cp a.txt b.txt</code></td></tr>
+ <tr><td><code>touch</code></td><td>Create empty file</td><td><code>touch newfile.txt</code></td></tr>
+ <tr><td><code>tree</code></td><td>Directory tree</td><td><code>tree</code></td></tr>
+ <tr><td><code>find</code></td><td>Recursive file search</td><td><code>find .txt</code></td></tr>
+ <tr><td><code>diff</code></td><td>Compare two files</td><td><code>diff a.txt b.txt</code></td></tr>
+ <tr><td><code>grep</code></td><td>Search file contents</td><td><code>grep hello *.txt</code></td></tr>
+ <tr><td><code>head</code></td><td>First N lines</td><td><code>head file.txt 10</code></td></tr>
+ <tr><td><code>tail</code></td><td>Last N lines</td><td><code>tail file.txt 10</code></td></tr>
+ <tr><td><code>sort</code></td><td>Sort file lines</td><td><code>sort file.txt</code></td></tr>
+ <tr><td><code>wc</code></td><td>Count lines/words/chars</td><td><code>wc file.txt</code></td></tr>
+ <tr><td><code>du</code></td><td>Disk usage</td><td><code>du</code></td></tr>
+ <tr><td><code>upload</code></td><td>Upload file from device</td><td><code>upload</code></td></tr>
+ <tr><td><code>download</code></td><td>Download file</td><td><code>download file.txt</code></td></tr>
+ <tr><td><code>vfs-export</code></td><td>Download VFS as JSON</td><td><code>vfs-export</code></td></tr>
+ <tr><td><code>vfs-import</code></td><td>Import VFS from JSON</td><td><code>vfs-import</code></td></tr>
+ </table></div>
+ </section>
+
+ <!-- ── AI Agent ── -->
+ <section id="ai">
+ <h2>🤖 AI Assistant</h2>
+ <div class="callout callout-success">
+ <span class="callout-title">Tool-Calling Agent</span>
+ The AI runs a full agent loop with 15+ tools: filesystem, web search, URL fetch, skills, WPM, session memory, user profile, module introspection.
+ </div>
+
+ <h3>How It Works</h3>
+ <ol>
+ <li>Type <code>ai &lt;request&gt;</code></li>
+ <li>AI loads relevant skills + recent session memory</li>
+ <li>Decides which tools to call (up to 5 turns)</li>
+ <li><strong>Destructive tools</strong> trigger an inline confirm bar — no dark overlay</li>
+ <li>120s countdown: yellow → bold red at 30s → pulsing at 10s</li>
+ <li>Type <code>ai-allow</code> / <code>ai-deny</code> or tap the buttons</li>
+ <li>After complex tasks, AI suggests creating a skill</li>
+ </ol>
+
+ <div class="callout callout-warning">
+ <span class="callout-title">⚠️ Destructive Tools</span>
+ <code>write_file</code>, <code>delete_file</code>, <code>run_command</code>, <code>make_directory</code>, <code>edit_module</code> all require confirmation before executing.
+ </div>
+
+ <h3>Available Tools</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Tool</th><th>Description</th><th>Destructive?</th></tr>
+ <tr><td><code>list_files</code></td><td>List VFS directory</td><td>❌</td></tr>
+ <tr><td><code>read_file</code></td><td>Read file (8k trunc)</td><td>❌</td></tr>
+ <tr><td><code>write_file</code></td><td>Write to file</td><td>✅</td></tr>
+ <tr><td><code>make_directory</code></td><td>Create directory</td><td>✅</td></tr>
+ <tr><td><code>delete_file</code></td><td>Delete file/dir</td><td>✅</td></tr>
+ <tr><td><code>get_status</code></td><td>System status</td><td>❌</td></tr>
+ <tr><td><code>get_help</code></td><td>List commands</td><td>❌</td></tr>
+ <tr><td><code>web_search</code></td><td>SearXNG + DDG</td><td>❌</td></tr>
+ <tr><td><code>web_fetch</code></td><td>Extract URL content</td><td>❌</td></tr>
+ <tr><td><code>run_command</code></td><td>Execute terminal cmd</td><td>✅</td></tr>
+ <tr><td><code>load_skills</code></td><td>Search relevant skills</td><td>❌</td></tr>
+ <tr><td><code>create/patch/list_skills</code></td><td>Skill management</td><td>❌</td></tr>
+ <tr><td><code>view/edit/test/reload</code></td><td>Module operations</td><td>edit ✅</td></tr>
+ <tr><td><code>user_get/set/list/forget</code></td><td>User profile</td><td>❌</td></tr>
+ <tr><td><code>session_save/load/recent/stats</code></td><td>Session memory</td><td>❌</td></tr>
+ </table></div>
+
+ <h3>Sound Notification</h3>
+ <p>A short <strong>"ding"</strong> plays via WebAudio when AI finishes. Toggle with the <strong>🔊 Sound</strong> button in quick-actions. Persists in localStorage.</p>
+ </section>
+
+ <!-- ── Skills ── -->
+ <section id="skills">
+ <h2>📚 Skills System</h2>
+ <div class="callout callout-success">
+ <span class="callout-title">Procedural Memory</span>
+ Skills are reusable markdown procedures stored in VFS <code>/skills/</code>. The AI auto-loads relevant skills at task start. Create skills after complex workflows (3+ tool calls) to save the approach.
+ </div>
+
+ <h3>Format</h3>
+ <pre>---
+name: web-scrape-and-summarize
+description: Scrape a URL and summarize
+tags: [web, research]
+category: general
+---
+## Steps
+1. Use web_fetch(url) to get content
+2. Present a concise summary
+3. Save with create_skill</pre>
+
+ <h3>Commands</h3>
+ <pre><span class="cmt"># List all skills</span>
+skill-list
+
+<span class="cmt"># Create a skill</span>
+skill-create my-skill "Does X" "Steps to do X" "tag1,tag2"
+
+<span class="cmt"># View / patch / delete</span>
+skill-view my-skill
+skill-patch my-skill "Updated steps"
+skill-delete my-skill
+
+<span class="cmt"># Export / Import</span>
+skill-export my-skill
+skill-import</pre>
+
+ <h3>Auto-Creation</h3>
+ <p>When the AI encounters the same tool error 3+ times, a workaround skill is auto-created. Every 20 messages, skills are audited for staleness.</p>
+ </section>
+
+ <!-- ── Ollama ── -->
+ <section id="ollama">
+ <h2>🤖 Ollama</h2>
+ <div class="callout callout-ollama">
+ <span class="callout-title">Local or Remote AI</span>
+ WebX11 connects to any Ollama instance. All tool-calling and chat features require a connection.
+ </div>
+
+ <h3>Setup</h3>
+ <pre><span class="cmt"># Install & pull a model</span>
+curl -fsSL https://ollama.com/install.sh | sh
+ollama pull llama2
+
+<span class="cmt"># Start Ollama</span>
+ollama serve
+
+<span class="cmt"># In WebX11</span>
+ollamaconnect</pre>
+
+ <h3>Commands</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th></tr>
+ <tr><td><code>ollamaconnect</code></td><td>Connect to Ollama</td></tr>
+ <tr><td><code>ollamasetproxy</code></td><td>Set remote endpoint</td></tr>
+ <tr><td><code>ollamamodels</code></td><td>List models</td></tr>
+ <tr><td><code>ollamasetmodel</code></td><td>Set active model</td></tr>
+ <tr><td><code>ollamadisconnect</code></td><td>Disconnect</td></tr>
+ <tr><td><code>ollama</code></td><td>Open Ollama Manager UI</td></tr>
+ <tr><td><code>models</code></td><td>List all models</td></tr>
+ <tr><td><code>model-info</code></td><td>Model details</td></tr>
+ <tr><td><code>model-pull</code></td><td>Pull a model</td></tr>
+ <tr><td><code>model-delete</code></td><td>Delete a model</td></tr>
+ <tr><td><code>model-run</code></td><td>Run model with prompt</td></tr>
+ </table></div>
+
+ <div class="callout callout-warning">
+ <span class="callout-title">🔌 CORS for Remote</span>
+ <code>OLLAMA_ORIGINS="*" ollama serve</code>
+ </div>
+ </section>
+
+ <!-- ── Search & Web ── -->
+ <section id="web">
+ <h2>🌐 Search & Web</h2>
+ <div class="callout callout-info">
+ <span class="callout-title">SearXNG + DDG + URL Fetcher</span>
+ Three modules provide comprehensive web capabilities via the proxy API.
+ </div>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Module</th><th>Description</th><th>Example</th></tr>
+ <tr><td><code>search</code> / <code>s</code></td><td>SearXNG</td><td>Web search</td><td><code>search raspberry pi</code></td></tr>
+ <tr><td><code>ddg</code> / <code>duck</code></td><td>DDG</td><td>DuckDuckGo fallback</td><td><code>ddg news today</code></td></tr>
+ <tr><td><code>fetch</code> / <code>web</code></td><td>Fetcher</td><td>Fetch URL content</td><td><code>fetch https://example.com</code></td></tr>
+ <tr><td><code>extract</code></td><td>Fetcher</td><td>Clean readable text</td><td><code>extract https://news.article</code></td></tr>
+ </table></div>
+ <p>The AI agent also has <code>web_search</code> and <code>web_fetch</code> tools using the same APIs.</p>
+ </section>
+
+ <!-- ── Voice & Sound ── -->
+ <section id="voice">
+ <h2>🎤 Voice & Sound</h2>
+ <div class="callout callout-success">
+ <span class="callout-title">Speech Recognition</span>
+ A <strong>🎤 button</strong> in the input area activates SpeechRecognition. Chrome, Edge, Safari 14.1+. Not Firefox.
+ </div>
+ <ul>
+ <li>Tap 🎤 to start listening — button pulses green</li>
+ <li>Say your command — recognized text fills the input</li>
+ <li>Tap again or wait to stop</li>
+ <li>Red flash indicates failure</li>
+ </ul>
+ <h3>Sound</h3>
+ <p>Toggle AI response "ding" with the <strong>🔊 Sound</strong> button. Persists in localStorage.</p>
+ </section>
+
+ <!-- ── Config ── -->
+ <section id="config">
+ <h2>⚙️ Configuration</h2>
+ <p>All config values stored as <code>webx11_config_*</code> in localStorage. Use the ⚙ Config button or CLI commands.</p>
+ <h3>Notable Keys</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Key</th><th>Description</th><th>Values</th></tr>
+ <tr><td><code>webx11_config_ai_sound</code></td><td>AI sound toggle</td><td><code>on</code>, <code>off</code></td></tr>
+ <tr><td><code>webx11_config_voice_visible</code></td><td>Mic button visibility</td><td><code>on</code>, <code>off</code></td></tr>
+ </table></div>
+ <h3>Persisted State</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Key</th><th>Description</th></tr>
+ <tr><td><code>webx11_filesystem</code></td><td>VFS JSON</td></tr>
+ <tr><td><code>webx11_modules</code></td><td>Loaded module URLs</td></tr>
+ <tr><td><code>webx11_ollama_endpoint</code></td><td>Ollama API URL</td></tr>
+ <tr><td><code>webx11_ollama_model</code></td><td>Selected model</td></tr>
+ <tr><td><code>webx11_startup_modules</code></td><td>Startup selection</td></tr>
+ <tr><td><code>webx11_font_size</code></td><td>Font size (8–32)</td></tr>
+ <tr><td><code>webx11_command_history</code></td><td>Command history</td></tr>
+ <tr><td><code>webx11_terminal_output</code></td><td>Persisted output</td></tr>
+ <tr><td><code>webx11_ai_context</code></td><td>AI conversation history</td></tr>
+ <tr><td><code>webx11_user_profile</code></td><td>AI user profile</td></tr>
+ <tr><td><code>webx11_aliases</code></td><td>User-defined aliases</td></tr>
+ </table></div>
+ </section>
+
+ <!-- ── Modules ── -->
+ <section id="modules">
+ <h2>🧩 Module System</h2>
+ <div class="callout callout-info">
+ <span class="callout-title">24 Core + 12 Ext</span>
+ Modules loaded in dependency order at startup. Toggle ext modules with ⚙ gear on splash.
+ </div>
+ <h3>Commands</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th></tr>
+ <tr><td><code>modules</code></td><td>Open Module Manager UI</td></tr>
+ <tr><td><code>loadmod &lt;url&gt;</code></td><td>Load module from URL</td></tr>
+ <tr><td><code>removemod &lt;name&gt;</code></td><td>Remove a module</td></tr>
+ <tr><td><code>listmods</code></td><td>List all loaded modules</td></tr>
+ </table></div>
+
+ <h3>Boot Order</h3>
+ <ol>
+ <li>Splash screen with ⚙ gear</li>
+ <li>Foundation: <code>virtual-fs.js</code> → <code>module-manager.js</code> → <code>ollama-manager.js</code> → <code>terminal.js</code></li>
+ <li>Built-in modules loaded async</li>
+ <li>Ext modules loaded if selected</li>
+ <li>Splash hides, terminal ready</li>
+ </ol>
+
+ <h3>Code Editor</h3>
+ <p>The AI can <code>edit_module(name)</code> to copy source into the Code Editor modal. Edit inline, then <strong>💾 Save & Test</strong> to load live from <code>/_mods/</code>. Use <code>test_module</code> without reloading the page.</p>
+ </section>
+
+ <!-- ── Extras ── -->
+ <section id="extras">
+ <h2>🧰 Extended Modules</h2>
+
+ <h3>WebDAV Sync</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th></tr>
+ <tr><td><code>webdav-config</code></td><td>Configure server</td></tr>
+ <tr><td><code>webdav-status</code></td><td>Connection status</td></tr>
+ <tr><td><code>webdav-ls</code></td><td>List remote dir</td></tr>
+ <tr><td><code>webdav-push</code></td><td>Push file</td></tr>
+ <tr><td><code>webdav-pull</code></td><td>Pull file</td></tr>
+ <tr><td><code>webdav-backup</code></td><td>Backup VFS</td></tr>
+ <tr><td><code>webdav-restore</code></td><td>Restore VFS</td></tr>
+ <tr><td><code>webdav-backup-list</code></td><td>List backups</td></tr>
+ </table></div>
+
+ <h3>Calculator & Cron</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Module</th><th>Description</th></tr>
+ <tr><td><code>calc</code></td><td>calc.js</td><td>Evaluate math / unit conversion</td></tr>
+ <tr><td><code>cron-every</code></td><td>cron.js</td><td>Schedule a command</td></tr>
+ <tr><td><code>cron-list</code></td><td>cron.js</td><td>List scheduled jobs</td></tr>
+ <tr><td><code>cron-stop</code></td><td>cron.js</td><td>Stop a job</td></tr>
+ <tr><td><code>cron-clear</code></td><td>cron.js</td><td>Clear all jobs</td></tr>
+ </table></div>
+
+ <h3>Theme, WPM & Mindmap</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Module</th><th>Description</th></tr>
+ <tr><td><code>theme</code></td><td>theme.js</td><td>Set color theme (dark, light, amber, cyber, …)</td></tr>
+ <tr><td><code>wpm</code></td><td>wpm.js</td><td>Package manager</td></tr>
+ <tr><td><code>mindmap</code></td><td>mindmap.js</td><td>Show file structure as mindmap</td></tr>
+ </table></div>
+
+ <h3>Server Monitor</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th></tr>
+ <tr><td><code>server</code></td><td>Add server to monitor</td></tr>
+ <tr><td><code>servers</code></td><td>List monitored servers</td></tr>
+ <tr><td><code>server-check</code></td><td>Ping a server</td></tr>
+ <tr><td><code>server-remove</code></td><td>Remove server</td></tr>
+ <tr><td><code>monitor</code></td><td>Toggle auto-monitoring</td></tr>
+ </table></div>
+
+ <h3>IO / Backup</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Command</th><th>Description</th></tr>
+ <tr><td><code>export-mods</code></td><td>Export module configs</td></tr>
+ <tr><td><code>import-mods</code></td><td>Import module configs</td></tr>
+ <tr><td><code>backup</code></td><td>Full system backup</td></tr>
+ <tr><td><code>restore</code></td><td>Restore from backup</td></tr>
+ <tr><td><code>share-mod</code></td><td>Share module as text</td></tr>
+ </table></div>
+
+ <h3>Aliases</h3>
+ <p>Built-in: <code>ll</code> = <code>ls</code>, <code>h</code> = <code>help</code>, <code>cls</code> = <code>clear</code>. Define custom: <code>alias x=ls -la</code>. Remove: <code>unalias x</code>. Persists in localStorage.</p>
+ </section>
+
+ <!-- ── Sessions ── -->
+ <section id="sessions">
+ <h2>💬 Sessions</h2>
+ <p>Sessions persist AI conversation logs in VFS <code>/memory/</code>. The AI auto-loads recent sessions at start for continuity.</p>
+ <h3>AI Tools</h3>
+ <div class="table-wrap"><table>
+ <tr><th>Tool</th><th>Description</th></tr>
+ <tr><td><code>session_save</code></td><td>Save summary</td></tr>
+ <tr><td><code>session_load</code></td><td>Load by date</td></tr>
+ <tr><td><code>session_recent</code></td><td>Show last N</td></tr>
+ <tr><td><code>session_stats</code></td><td>Aggregate statistics</td></tr>
+ </table></div>
+ <p>The terminal auto-saves session state every 60s and auto-restores on page reload.</p>
+ </section>
+
+ <!-- ── Storage ── -->
+ <section id="storage">
+ <h2>💾 Storage</h2>
+ <div class="callout callout-success">
+ <span class="callout-title">localStorage Persistence</span>
+ Everything survives hard refreshes via 15+ localStorage keys.
+ </div>
+ <pre><span class="cmt"># Clear all WebX11 data</span>
+localStorage.clear()
+location.reload()
+
+<span class="cmt"># Back up / restore VFS</span>
+vfs-export
+vfs-import</pre>
+ <p>~5–10MB per domain. Only URLs (not code) are stored for modules.</p>
+ </section>
+
+ <!-- ── Security ── -->
+ <section id="security">
+ <h2>🔒 Security</h2>
+ <div class="table-wrap"><table>
+ <tr><th>Feature</th><th>Status</th></tr>
+ <tr><td>Input Validation</td><td>✅</td></tr>
+ <tr><td>Output Escaping</td><td>✅</td></tr>
+ <tr><td>No eval() on User Input</td><td>✅</td></tr>
+ <tr><td>Path Traversal Prevention</td><td>✅</td></tr>
+ <tr><td>Sandboxed File System</td><td>✅</td></tr>
+ <tr><td>AI Destructive Confirmations</td><td>✅ Required + timeout</td></tr>
+ <tr><td>Iframe Preview Sandbox</td><td>✅ allow-same-origin allow-scripts</td></tr>
+ </table></div>
+ <div class="callout callout-warning">
+ <span class="callout-title">⚠️ Module Loading</span>
+ Only load modules from trusted sources — they have full terminal access.
+ </div>
+ </section>
+
+ <!-- ── Troubleshooting ── -->
+ <section id="trouble">
+ <h2>🔧 Troubleshooting</h2>
+ <div class="table-wrap"><table>
+ <tr><th>Issue</th><th>Solution</th></tr>
+ <tr><td>AI not responding</td><td>Run <code>ollamaconnect</code> first, ensure Ollama is running</td></tr>
+ <tr><td>Voice not working</td><td>Chrome/Edge/Safari only. Grant mic permission</td></tr>
+ <tr><td>Module fails to load</td><td>Check CORS on the hosting server</td></tr>
+ <tr><td>Data lost after refresh</td><td>Check localStorage is enabled. Private mode clears data</td></tr>
+ <tr><td>AI actions not confirming</td><td>Confirm bar auto-denies after 120s. Type <code>ai-allow</code></td></tr>
+ <tr><td>Sound not playing</td><td>Browser may need first user gesture. Toggle off/on</td></tr>
+ <tr><td>Ollama CORS error</td><td><code>OLLAMA_ORIGINS="*" ollama serve</code></td></tr>
+ </table></div>
+ <h3>Debug</h3>
+ <pre><span class="cmt"># Console</span>
+F12 → Console
+
+<span class="cmt"># View AI state</span>
+ai-system
+ai-context
+
+<span class="cmt"># Module status</span>
+listmods</pre>
+ </section>
+
+ <!-- ── Quick Ref ── -->
+ <section id="ref">
+ <h2>⚡ Quick Reference</h2>
+ <div class="quick-ref">
+ <div class="quick-ref-title">WebX11 v4.2</div>
+ <div class="quick-ref-grid">
+ <div class="quick-ref-item"><span class="cmd">help</span><span class="desc">Show all commands</span></div>
+ <div class="quick-ref-item"><span class="cmd">cls</span><span class="desc">Clear terminal</span></div>
+ <div class="quick-ref-item"><span class="cmd">ll</span><span class="desc">List files</span></div>
+ <div class="quick-ref-item"><span class="cmd">cd &lt;dir&gt;</span><span class="desc">Change directory</span></div>
+ <div class="quick-ref-item"><span class="cmd">cat &lt;f&gt;</span><span class="desc">View file</span></div>
+ <div class="quick-ref-item"><span class="cmd">edit &lt;f&gt;</span><span class="desc">Edit file</span></div>
+ <div class="quick-ref-item"><span class="cmd">ai &lt;msg&gt;</span><span class="desc">Chat with AI</span></div>
+ <div class="quick-ref-item"><span class="cmd">search &lt;q&gt;</span><span class="desc">Web search</span></div>
+ <div class="quick-ref-item"><span class="cmd">find &lt;q&gt;</span><span class="desc">File search</span></div>
+ <div class="quick-ref-item"><span class="cmd">diff a b</span><span class="desc">Compare files</span></div>
+ <div class="quick-ref-item"><span class="cmd">ollamaconnect</span><span class="desc">Connect AI</span></div>
+ <div class="quick-ref-item"><span class="cmd">ai-allow</span><span class="desc">Allow destructive</span></div>
+ <div class="quick-ref-item"><span class="cmd">ai-deny</span><span class="desc">Deny destructive</span></div>
+ <div class="quick-ref-item"><span class="cmd">modules</span><span class="desc">Module Manager</span></div>
+ <div class="quick-ref-item"><span class="cmd">skill-list</span><span class="desc">List skills</span></div>
+ <div class="quick-ref-item"><span class="cmd">alias</span><span class="desc">List aliases</span></div>
+ <div class="quick-ref-item"><span class="cmd">preview</span><span class="desc">HTML preview</span></div>
+ <div class="quick-ref-item"><span class="cmd">upload</span><span class="desc">Upload file</span></div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ── Changelog ── -->
+ <section id="history">
+ <h2>📋 Changelog</h2>
+
+ <div class="version-item">
+ <div class="v-header"><span class="v-num">v4.2 — May 2026</span><span class="v-date">2026-05-25</span></div>
+ <ul>
+ <li><strong>Editor</strong> — <code>edit &lt;path&gt;</code> opens inline VFS editor modal</li>
+ <li><strong>Diff</strong> — <code>diff a b</code> LCS-based comparison + <code>diff --module</code></li>
+ <li><strong>Aliases</strong> — <code>ll</code>, <code>h</code>, <code>cls</code> defaults + custom alias definition</li>
+ <li><strong>File Finder</strong> — <code>find &lt;query&gt;</code> recursive VFS search</li>
+ <li>Agent loop: capped at 5 turns (was 1), <code>edit_module</code> destructive confirmation, model auto-validation</li>
+ <li><code>ai-stop</code> now cancels chat + stream, not just tool calls</li>
+ <li>Unknown commands awaited, "Command not found" suppressed on AI route</li>
+ <li><code>loopResult</code> scope fix — no more undefined error on AI fail</li>
+ <li>Preview iframe allows JS (<code>allow-scripts</code>), cache bump <code>v=18</code></li>
+ <li>Splash fallback + startup modal list all 12 ext modules</li>
+ </ul>
+ </div>
+
+ <div class="version-item">
+ <div class="v-header"><span class="v-num">v4.1</span><span class="v-date">2026-05-23</span></div>
+ <ul>
+ <li>AI Agent with full tool-calling loop (15+ tools)</li>
+ <li>Inline destructive confirmation bar with 120s countdown timer</li>
+ <li>Skills system (8 CLI commands + UI modal)</li>
+ <li>Voice input (🎤 button, SpeechRecognition, show/hide toggle)</li>
+ <li>Sound notification (🔊 toggle, WebAudio ding)</li>
+ <li>AI spinner in status bar</li>
+ <li>Session system (save/load/recent/stats)</li>
+ <li>WebDAV sync (8 commands)</li>
+ <li>Web search (SearXNG + DDG + URL fetch/extract)</li>
+ <li>Config manager (6 commands + UI)</li>
+ <li>Startup modules selector (⚙ gear on splash)</li>
+ <li>Code editor modal (module editing, save & test live)</li>
+ <li>HTML preview via srcdoc (mobile)</li>
+ <li>File/dir autocomplete, pipe support</li>
+ <li>Smart context profiles, dynamic prompts with variables</li>
+ <li>Server monitor, ChatStudio overlay</li>
+ <li>Modular architecture: 23 JS modules, async loader</li>
+ </ul>
+ </div>
+
+ <div class="version-item">
+ <div class="v-header"><span class="v-num">v4.0</span><span class="v-date">2026-05-20</span></div>
+ <ul>
+ <li>Monolith refactored into core/ext modules</li>
+ <li>Async module loader with splash screen</li>
+ <li>Config manager modal</li>
+ <li>Bootloader fix for disabled modules</li>
+ </ul>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="links">
+ <a href="./index.html">Launch WebX11</a>
+ <a href="https://ollama.com" target="_blank">Ollama</a>
+ </div>
+ <p>WebX11 v4.2 · 2026</p>
+ <p class="tagline">Happy Hacking 🖥️🤖🎤</p>
+</footer>
+
+<a href="#" class="back-top" id="backTop">↑</a>
+
+<script>
+/* ── Back to Top ── */
+const bt = document.getElementById('backTop');
+window.addEventListener('scroll',()=>{bt.classList.toggle('visible',window.scrollY>300)});
+
+/* ── Search ── */
+function searchDocs(){
+ const q=document.getElementById('search-input').value.toLowerCase().trim();
+ const msg=document.getElementById('search-result-msg');
+ if(!q){msg.style.display='none';return}
+ const sections=document.querySelectorAll('section');
+ let found=false;
+ sections.forEach(s=>{
+ if(s.textContent.toLowerCase().includes(q)){
+ s.scrollIntoView({behavior:'smooth'});
+ s.style.border='2px solid var(--accent)';s.style.borderRadius='12px';
+ s.style.padding='0 20px';s.style.transition='border .3s';
+ setTimeout(()=>{s.style.border='none';s.style.padding='0'},2000);
+ found=true;
+ }
+ });
+ if(!found){
+ msg.textContent='No results for "'+q+'"';
+ msg.style.display='block';
+ setTimeout(()=>{msg.style.display='none'},3000);
+ }else{msg.style.display='none'}
+}
+document.getElementById('search-input').addEventListener('keypress',e=>{if(e.key==='Enter')searchDocs()});
+
+/* ── Smooth scroll nav ── */
+document.querySelectorAll('.nav-link').forEach(l=>{
+ l.addEventListener('click',e=>{
+ e.preventDefault();
+ const t=document.querySelector(l.getAttribute('href'));
+ if(t)t.scrollIntoView({behavior:'smooth'});
+ });
+});
+
+console.log('WebX11 v4.2 Docs — Modern');
+</script>
+</body>
+</html>