diff options
Diffstat (limited to 'help.html')
| -rw-r--r-- | help.html | 254 |
1 files changed, 228 insertions, 26 deletions
@@ -10,26 +10,26 @@ *,*::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; + --bg2:#141428; + --bg3:#1c1c36; + --bg4:#24244a; + --text:#e8e8ff; + --text2:#b0b0cc; + --accent:#818cf8; --accent2:#a78bfa; --green:#34d399; --cyan:#22d3ee; --amber:#fbbf24; --rose:#fb7185; --pink:#e879f9; - --border:#2a2a4a; + --border:#3a3a5a; --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}} +body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased} +@media(max-width:600px){body{font-size:15px}} /* ── Header ── */ header{ @@ -206,6 +206,20 @@ footer .tagline{color:var(--accent2);margin-top:10px;font-weight:500} .quick-ref-grid{grid-template-columns:1fr} .badge-new{display:none} } + +/* ── Doc Tabs ── */ +.doc-tabs{display:flex;gap:0;margin-bottom:32px;border-bottom:1px solid var(--border);flex-wrap:wrap} +.doc-tabs input{display:none} +.doc-tabs label{ + flex-shrink:0;padding:12px 20px;cursor:pointer;font-size:.82em;font-weight:600; + color:var(--text2);border-bottom:2px solid transparent;transition:all .15s; + font-family:var(--font-sans);user-select:none;-webkit-user-select:none +} +.doc-tabs label:hover{color:var(--text)} +.doc-tabs input:checked+label{color:var(--accent2);border-color:var(--accent2)} +.doc-tab{display:none} +.doc-tab.active{display:block} + </style> </head> <body> @@ -250,19 +264,160 @@ footer .tagline{color:var(--accent2);margin-top:10px;font-weight:500} </nav> <main> +<div class="doc-tabs"> + <input type="radio" name="doc-layer" id="tab-basics" checked> + <label for="tab-basics">🌱 Start in 5 Min</label> + <input type="radio" name="doc-layer" id="tab-guide"> + <label for="tab-guide">📘 User Guide</label> + <input type="radio" name="doc-layer" id="tab-dev"> + <label for="tab-dev">🔧 Dev Reference</label> +</div> +<div class="doc-tab active" id="content-basics"> + <section id="basics-overview"> + <h2>🚀 Welcome to newOS4</h2> + <div class="callout callout-success"> + <span class="callout-title">🎮 New here?</span> + Type <code>tutorial</code> in the terminal to start a 2-minute interactive tour! + </div> + <div class="feature-grid"> + <div class="feature-card"><h4>🖥️ Terminal OS</h4><p>Full virtual filesystem with ls, cd, cat, touch, edit, find, grep and 50+ Unix-like commands.</p></div> + <div class="feature-card"><h4>🤖 AI Assistant</h4><p>Built-in AI agent with tool calling, skills, memory, and 28 tools. Just type <code>ai "your question"</code>.</p></div> + <div class="feature-card"><h4>🧩 Module System</h4><p>40+ modules including cron, mindmap, calculator, voice, WebDAV, themes, and shell scripting.</p></div> + <div class="feature-card"><h4>📚 Skills</h4><p>Self-improving AI remembers workflows and teaches you new capabilities — type <code>skill-list</code> to see what's installed.</p></div> + </div> + </section> + + <section id="basics-first"> + <h3>🔤 First 6 Commands</h3> + <div class="quick-ref"> + <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">ls</span><span class="desc">List files</span></div> + <div class="quick-ref-item"><span class="cmd">cat</span><span class="desc">View file content</span></div> + <div class="quick-ref-item"><span class="cmd">clear</span><span class="desc">Clear terminal</span></div> + <div class="quick-ref-item"><span class="cmd">touch</span><span class="desc">Create a file</span></div> + <div class="quick-ref-item"><span class="cmd">ai</span><span class="desc">Ask the AI assistant</span></div> + </div> + </div> + <h3>📋 Workflow</h3> + <ol style="margin-bottom:14px;padding-left:22px;color:var(--text)"> + <li>Type <code>help</code> — see every available command</li> + <li>Type <code>ls</code> — browse files in your virtual drive</li> + <li>Type <code>touch hello.txt</code> — create a file</li> + <li>Type <code>edit hello.txt</code> — write something and save</li> + <li>Type <code>ai "summarize this"</code> — let AI analyze your files</li> + <li>Type <code>status</code> — check system health</li> + </ol> + </section> + + <section> + <h3>🔧 Quick Start</h3> + <p>Type <code>help</code> to see all 130+ commands grouped by category. Use <code>help <command></code> for details on a specific one.</p> + <p>The <strong>📋 Quick Commands</strong> panel (Ctrl+K) has clickable cards for common tasks.</p> + <p>For the full reference, switch to the <strong>📘 User Guide</strong> tab — it covers every module, filesystem, AI, skills, configuration, and all extended modules in detail.</p> + </section> +</div> <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> + <div class="doc-tab" id="content-dev"> + <section id="dev-api"> + <h2>🔧 Module Development API</h2> + <h3>Ext Module Structure</h3> + <p>Modules are ES6 classes with 3 required and 1 optional method:</p> + <pre><code>class MyModule { + constructor() { this.commands = {}; this.terminal = null; } + requirements() { return { met: true, missing: [] }; } + getHelpInfo() { return { 'mycmd': 'mycmd — What it does' }; } + registerCommands() { this.commands['mycmd'] = (args) => { /* ... */ }; } +} +// Auto-register: +if (typeof window.webx11 !== 'undefined' && window.webx11) { + webx11.moduleManager.registerModule(new MyModule(), 'url'); +}</code></pre> + + <h3>VFS (Virtual FileSystem) API</h3> + <p>Access via <code>this.terminal.fs</code>:</p> + <div class="table-wrap"><table> + <tr><th>Method</th><th>Returns</th><th>Description</th></tr> + <tr><td><code>readFile(path)</code></td><td>string or null</td><td>Read file content</td></tr> + <tr><td><code>writeFile(path, content)</code></td><td>boolean</td><td>Write string to file</td></tr> + <tr><td><code>ls(path)</code></td><td>array</td><td>List directory entries</td></tr> + <tr><td><code>mkdir(path)</code></td><td>boolean</td><td>Create directory</td></tr> + <tr><td><code>rm(path)</code></td><td>boolean</td><td>Remove file</td></tr> + <tr><td><code>rmdir(path)</code></td><td>boolean</td><td>Remove empty directory</td></tr> + <tr><td><code>touch(path)</code></td><td>boolean</td><td>Create empty file</td></tr> + <tr><td><code>cd(path)</code></td><td>boolean</td><td>Change current directory</td></tr> + <tr><td><code>pwd()</code></td><td>string</td><td>Current directory path</td></tr> + <tr><td><code>mv(old, new)</code></td><td>boolean</td><td>Move/rename file</td></tr> + <tr><td><code>cp(src, dst)</code></td><td>boolean</td><td>Copy file</td></tr> + </table></div> + + <h3>AI Tool Definition Format</h3> + <p>Add tools to <code>module-aiassist.js</code> in <code>getToolDefinitions()</code> (around line 300):</p> + <pre><code>{ + type: 'function', + function: { + name: 'my_tool', + description: 'What it does — AI reads this to decide when to call it.', + parameters: { type: 'object', properties: { + paramName: { type: 'string', description: 'What this param does' } + }, required: ['paramName'] } + } +}</code></pre> + <p>Then add a <code>case 'my_tool':</code> handler in <code>runTool()</code> (around line 1000). Return <code>JSON.stringify(...)</code>.</p> + </section> + + <section id="dev-skills"> + <h3>Skill Format</h3> + <p>Skills are markdown files with YAML frontmatter, stored in <code>/skills/</code> in VFS:</p> + <pre><code>--- +name: my-skill +description: Brief description +tags: [tag1, tag2] +--- +# Skill Body + +Instructions, examples, and workflows here.</code></pre> + </section> + + <section id="dev-ollama"> + <h3>OllamaManager API</h3> + <div class="table-wrap"><table> + <tr><th>Property/Method</th><th>Description</th></tr> + <tr><td><code>.endpoint</code></td><td>Current Ollama API URL</td></tr> + <tr><td><code>.currentModel</code></td><td>Active model name</td></tr> + <tr><td><code>.models</code></td><td>Array of available models</td></tr> + <tr><td><code>.connected</code></td><td>Boolean connection state</td></tr> + <tr><td><code>.connect()</code></td><td>Connect to Ollama, load models</td></tr> + <tr><td><code>.chatWithTools()</code></td><td>AI chat with tool calling support</td></tr> + </table></div> + </section> + + <section id="dev-global"> + <h3>window.webx11 Global</h3> + <p>The terminal instance is exposed globally as <code>window.webx11</code> (aliased as <code>webx11</code>). This gives access to everything:</p> + <pre><code>webx11.fs // VFS instance +webx11.moduleManager // Module registry +webx11.ollamaManager // Ollama connection +webx11.security // Security manager +webx11.executeCommand(cmd) // Run a terminal command programmatically +webx11.print(text, type) // Print to terminal output +webx11.tutorialModule // Tutorial progress (if active) +webx11.inputField // DOM input element</code></pre> + </section> +</div> +<div class="doc-tab" id="content-guide"> <!-- ── 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>🧩 26 Core + 14 Ext</h4><p>Modules loaded at startup. Shell with pipes, redirects, vars, and scripts.</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>🤖 Agent with Tools</h4><p>28 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> @@ -441,14 +596,14 @@ diff a.txt b.txt</pre> <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. + The AI runs a full agent loop with 28 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 <request></code></li> <li>AI loads relevant skills + recent session memory</li> - <li>Decides which tools to call (up to 5 turns)</li> + <li>Decides which tools to call (up to 8 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> @@ -578,6 +733,7 @@ ollamaconnect</pre> <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> + <tr><td><code>images</code></td><td>SearXNG</td><td>Image search</td><td><code>images cats</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> @@ -931,6 +1087,10 @@ listmods</pre> </div> </section> + <div style="text-align:center;margin-bottom:32px;"> + <p>📄 One-page <a href="cheatsheet.html" style="color:var(--accent2);font-weight:600;">Quick Reference cheat sheet</a> — printable, dark mode, all commands.</p> + </div> + <!-- ── Changelog ── --> <section id="history"> <h2>📋 Changelog</h2> @@ -955,7 +1115,7 @@ listmods</pre> <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 <query></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>Agent loop: capped at 8 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> @@ -967,7 +1127,7 @@ listmods</pre> <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>AI Agent with full tool-calling loop (28 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> @@ -997,6 +1157,7 @@ listmods</pre> </ul> </div> </section> +</div> </main> <footer> @@ -1020,15 +1181,29 @@ 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; + // Search in ALL tabs, switch to the one with results + const tabs = document.querySelectorAll('.doc-tab'); + let found = false; + tabs.forEach(tab => { + if (tab.textContent.toLowerCase().includes(q)) { + // Found a match in this tab — switch to it + const tabId = tab.id.replace('content-', 'tab-'); + const radio = document.getElementById(tabId); + if (radio) { + radio.checked = true; + radio.dispatchEvent(new Event('change')); + } + // Highlight the matching element + const sections = tab.querySelectorAll('section, .quick-ref-item, .feature-card, .callout'); + sections.forEach(s => { + if (s.textContent.toLowerCase().includes(q)) { + s.scrollIntoView({behavior:'smooth', block:'center'}); + 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){ @@ -1039,14 +1214,41 @@ function searchDocs(){ } document.getElementById('search-input').addEventListener('keypress',e=>{if(e.key==='Enter')searchDocs()}); -/* ── Smooth scroll nav ── */ +/* ── Smooth scroll nav — switch to User Guide tab first ── */ 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'}); + const href = l.getAttribute('href'); + // Switch to User Guide tab first + const guideTab = document.getElementById('tab-guide'); + if (guideTab) { + guideTab.checked = true; + guideTab.dispatchEvent(new Event('change')); + } + // Then scroll after a short delay so tab content becomes visible + setTimeout(() => { + const t = document.querySelector(href); + if (t) t.scrollIntoView({behavior:'smooth', block:'start'}); + }, 100); + }); +}); +/* ── Doc Tabs ── */ +document.querySelectorAll('.doc-tabs input').forEach(radio=>{ + radio.addEventListener('change',function(){ + document.querySelectorAll('.doc-tab').forEach(t=>t.classList.remove('active')); + const tab=document.getElementById('content-'+this.id.replace('tab-','')); + if(tab)tab.classList.add('active'); + localStorage.setItem('webx11_help_tab',this.id); }); }); +// Restore last tab +(function(){ + const saved = localStorage.getItem('webx11_help_tab'); + if(saved){ + const el = document.getElementById(saved); + if(el){ el.checked = true; el.dispatchEvent(new Event('change')); } + } +})(); console.log('WebX11 v4.2 Docs — Modern'); </script> |