path: root/guide.html

<!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 — Quick Guide</title>
<script>!function(){var v=localStorage.getItem('webx11_cache_ver');if(!v)return;var m=v.match(/v([\d.]+)/);if(!m)return;document.title='WebX11 v'+m[1]+' — Guide';document.querySelector('.badge-v')&&(document.querySelector('.badge-v').textContent='v'+m[1]);var el=document.querySelector('h1 .ver');if(el)el.textContent='v'+m[1]}()</script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#0a0a14;--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:#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}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.7;padding:0 16px 80px;max-width:800px;margin:0 auto;min-height:100vh}
header{padding:24px 0 12px;border-bottom:1px solid var(--border);margin-bottom:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h1{font-size:1.4rem;font-weight:600;letter-spacing:-0.02em}
h2{font-size:1.15rem;font-weight:600;margin:28px 0 10px;color:var(--accent);letter-spacing:-0.01em}
h3{font-size:1rem;font-weight:500;margin:18px 0 8px;color:var(--cyan)}
p,li{color:var(--text2);font-size:.9rem;line-height:1.7}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--bg3);color:var(--green);padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.82rem}
pre{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;overflow-x:auto;margin:8px 0;font-size:.82rem;line-height:1.5;font-family:var(--font-mono)}
pre .hl{color:var(--amber)}
pre .cm{color:var(--text2)}
ul,ol{padding-left:20px;margin:6px 0}
li{margin:3px 0}
.guide-nav{border:1px solid var(--border);background:var(--bg2);border-radius:var(--radius);padding:14px 18px;margin-bottom:24px}
.guide-nav a{display:block;padding:4px 0;font-size:.88rem}
.badge-v{background:var(--bg4);color:var(--accent);font-family:var(--font-mono);font-size:.75rem;padding:2px 10px;border-radius:20px;border:1px solid var(--border)}
.module-ref{border-left:3px solid var(--accent);padding-left:12px;margin:8px 0}
.module-ref .ref-name{color:var(--accent);font-family:var(--font-mono);font-size:.82rem}
.module-ref .ref-desc{color:var(--text2);font-size:.82rem}
kbd{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:var(--font-mono);font-size:.76rem;color:var(--cyan)}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--border);text-align:center;font-size:.8rem;color:var(--text2)}
footer a{color:var(--accent);text-decoration:none}
@media(max-width:600px){body{padding:0 12px 60px}}
</style>
</head>
<body>
<header>
  <h1>📘 <span class="badge-v"></span> Quick Guide</h1>
</header>

<div class="guide-nav">
<a href="#basics">1. Basics</a>
<a href="#filesystem">2. Filesystem</a>
<a href="#ai-assistant">3. AI Assistant</a>
<a href="#modules">4. Modules & Packages</a>
<a href="#skills">5. Skills</a>
<a href="#search">6. Search & Web</a>
<a href="#config">7. Configuration</a>
<a href="#tools">8. Tools & Utility</a>
<a href="#security">9. Security</a>
</div>

<section id="basics">
<h2>1. Basics</h2>
<p>WebX11 is a browser-based OS built on a Virtual Filesystem (VFS). Everything runs in your browser — files, modules, AI assistant, packages.</p>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-fs">FileSystemModule</a></div>
  <div class="ref-desc">Core filesystem: <code>ls</code>, <code>cat</code>, <code>mkdir</code>, <code>rm</code>, <code>mv</code>, <code>cp</code>, <code>find</code>, <code>grep</code>, <code>tree</code>, <code>trash</code> and more.</div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-aiassist">WebX11AIAssistantModule</a></div>
  <div class="ref-desc">AI assistant: <code>ai</code>, <code>ask</code>, <code>ai-system</code>, <code>ai-model</code>, <code>ai-config</code></div>
</div>
</section>

<section id="filesystem">
<h2>2. Filesystem</h2>
<p>The VFS is a tree of directories and files in browser memory. Persisted to localStorage.</p>
<ul>
<li><code>ls</code> — list directory</li>
<li><code>cd &lt;path&gt;</code> — change directory</li>
<li><code>cat &lt;file&gt;</code> — read file</li>
<li><code>mkdir &lt;dir&gt;</code> — create directory</li>
<li><code>rm &lt;file&gt;</code> — delete file (use <code>trash</code> for directories)</li>
<li><code>trash &lt;path&gt;</code> — move to trash (safe delete)</li>
<li><code>mv &lt;src&gt; &lt;dst&gt;</code> — move/rename</li>
<li><code>cp &lt;src&gt; &lt;dst&gt;</code> — copy</li>
<li><code>tree</code> — visual directory tree</li>
<li><code>find &lt;name&gt;</code> — find files by name</li>
<li><code>grep &lt;pattern&gt;</code> — search file contents</li>
<li><code>pwd</code> — print working directory</li>
<li><code>upload</code> / <code>download</code> — transfer files</li>
</ul>
<p><strong>Trash:</strong> <code>trash-dir</code> lists trashed files, <code>empty-trash</code> permanently deletes, <code>ls-trash</code> shows trash contents.</p>
</section>

<section id="ai-assistant">
<h2>3. AI Assistant</h2>
<p>The built-in AI can understand natural language requests and use tools to fulfill them.</p>
<ul>
<li><code>ai &lt;question&gt;</code> — ask the AI anything</li>
<li><code>ask &lt;question&gt;</code> — alias</li>
<li><code>ai-model</code> — show or change AI model</li>
<li><code>ai-system &lt;prompt&gt;</code> — override the system prompt</li>
<li><code>ai-config &lt;key&gt; [value]</code> — configure AI loop (max-turns, confirm-timeout, etc.)</li>
<li><code>ai-clear</code> — clear conversation context</li>
<li><code>ai-stop</code> — cancel running AI operation</li>
<li><code>ai-allow</code> / <code>ai-deny</code> — confirm or deny AI action</li>
</ul>
<p>AI tools available: <code>list_files</code>, <code>read_file</code>, <code>write_file</code>, <code>web_search</code>, <code>web_fetch</code>, <code>nvfs_resolve</code>, <code>vaultmind_query</code>, <code>create_mindmap</code>, <code>load_skills</code>, <code>delegate_task</code>, and more.</p>
</section>

<section id="modules">
<h2>4. Modules & Packages</h2>
<p>Modules extend the terminal with new commands. 50 modules total (27 core, 17 ext, 6 infrastructure).</p>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html">📄 Full module browser →</a></div>
  <div class="ref-desc">Browse, search, filter by type, see live status</div>
</div>

<h3>Core Modules (always loaded)</h3>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-neural-vfs">NeuralVFSModule</a></div>
  <div class="ref-desc">Semantic file search: <code>nvfs-index</code>, <code>nvfs-resolve</code>, <code>nvfs-status</code>, <code>nvfs-tree</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-config">ConfigManagerModule</a></div>
  <div class="ref-desc">System config: <code>config</code>, <code>config-set</code>, <code>config-list</code>, <code>config-export</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-mindmap">MindmapModule</a></div>
  <div class="ref-desc">Mindmaps: <code>mindmap new</code>, <code>mindmap add</code>, <code>mindmap svg</code>, <code>mindmap export</code></div>
</div>

<h3>Ext Modules (load on demand)</h3>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#floating">FloatingModule</a></div>
  <div class="ref-desc">Floating UI buttons/panels: <code>floating-add</code>, <code>floating-remove</code>, <code>floating-list</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#cryptogzip">CryptoGzipModule</a></div>
  <div class="ref-desc">Compression: <code>gzip</code>, <code>gunzip</code>, <code>encrypt</code>, <code>decrypt</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#module-cron">CronModule</a></div>
  <div class="ref-desc">Scheduler: <code>cron-every</code>, <code>cron-list</code>, <code>cron-stop</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#busybox">BusyBoxModule</a></div>
  <div class="ref-desc">Standard CLI: <code>which</code>, <code>env</code>, <code>date</code>, <code>cal</code>, <code>seq</code>, <code>base64</code>, <code>hostname</code>, <code>whoami</code>, <code>sleep</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#console">ConsoleModule</a></div>
  <div class="ref-desc">JavaScript REPL: <code>js</code>, <code>js-run</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#shell">ShellModule</a></div>
  <div class="ref-desc">Environment: <code>export</code>, <code>unset</code>, <code>script</code>, <code>set</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#editor">EditorModule</a></div>
  <div class="ref-desc">File editor: <code>edit</code></div>
</div>
<div class="module-ref">
  <div class="ref-name"><a href="modules.html#webdav">WebDAVModule</a></div>
  <div class="ref-desc">Cloud storage: <code>webdav-config</code>, <code>webdav-push</code>, <code>webdav-pull</code></div>
</div>
</section>

<section id="skills">
<h2>5. Skills</h2>
<p>Skills are reusable AI guides stored in the VFS. The AI loads them to understand complex workflows.</p>
<div class="module-ref">
  <div class="ref-name"><a href="skills.html">📄 Skill browser →</a></div>
  <div class="ref-desc">Browse 17+ skills, search by name/tag, view descriptions</div>
</div>
<ul>
<li><code>load_skills(query)</code> — AI loads matching skills for the current task</li>
<li><code>create_skill(name, description, content)</code> — save a new skill</li>
<li><code>patch_skill(name, content)</code> — update a skill</li>
<li><code>list_skills(category?)</code> — browse available skills</li>
<li><code>skill-pack-core</code> — install the core skill pack</li>
</ul>
</section>

<section id="search">
<h2>6. Search & Web</h2>
<ul>
<li><code>web_search(query)</code> — AI tool: SearXNG + DuckDuckGo search</li>
<li><code>web_fetch(url, method?, body?)</code> — AI tool: fetch & extract web content</li>
<li><code>ddg</code> / <code>duck</code> — terminal commands for DuckDuckGo</li>
<li><code>nvfs-resolve(concept)</code> — semantic search across VFS files</li>
</ul>
</section>

<section id="config">
<h2>7. Configuration</h2>
<ul>
<li><code>config</code> — view all settings</li>
<li><code>config-set &lt;key&gt; &lt;value&gt;</code> — change a setting</li>
<li><code>config-list</code> — list with types</li>
<li><code>config-export</code> — export config as JSON</li>
<li><code>config-reset</code> — reset to defaults</li>
<li><code>ai-config max-turns 12</code> — AI loop limits</li>
<li><code>ai-config confirm-timeout 0</code> — disable confirmation timeout</li>
<li><code>ai-model gemma4:31b-cloud</code> — switch AI model</li>
</ul>
</section>

<section id="tools">
<h2>8. Tools & Utility</h2>
<ul>
<li><code>wpm install &lt;package&gt;</code> — install packages from registry</li>
<li><code>wpm search &lt;keyword&gt;</code> — find packages</li>
<li><code>tutorial</code> — interactive walkthrough</li>
<li><code>test</code> — run test suite</li>
<li><code>calc</code> — calculator with unit conversion</li>
<li><code>diff</code> — compare files</li>
<li><code>alias</code> / <code>unalias</code> — command shortcuts</li>
<li><code>js &lt;code&gt;</code> — run JavaScript inline</li>
<li><code>js-run &lt;file&gt;</code> — run JS from a file</li>
<li><code>theme</code> — switch UI theme (dark, light, amber, cyber)</li>
<li><code>voice</code> — speech-to-text input</li>
<li><code>gzip</code> / <code>gunzip</code> — compress/decompress</li>
<li><code>encrypt</code> / <code>decrypt</code> — file encryption</li>
<li><code>webdav-push</code> / <code>webdav-pull</code> — cloud sync</li>
<li><code>floating-add &lt;type&gt; &lt;label&gt; &lt;cmd&gt;</code> — add floating UI elements</li>
<li><code>export</code> / <code>unset</code> — environment variables</li>
<li><code>script</code> — run multi-line scripts</li>
<li><code>which</code> / <code>whoami</code> / <code>hostname</code> / <code>date</code> — standard CLI</li>
<li><code>secret-set</code> / <code>secret-get</code> / <code>secret-list</code> — secret vault</li>
<li><code>mem-debug</code> — memory breakdown</li>
<li><code>reset-mem</code> — reset AI patterns</li>
<li><code>guardrail</code> / <code>guardrail-add</code> / <code>guardrail-remove</code> — safety rules</li>
<li><code>shadow</code> / <code>shadow-commit</code> / <code>shadow-rollback</code> — VFS shadow mode</li>
</ul>
</section>

<section id="security">
<h2>9. Security</h2>
<p>WebX11 has 3 security levels. Default is level 1.</p>
<ul>
<li><code>security</code> — show current level</li>
<li><code>security 0</code> — all commands allowed (no confirmation)</li>
<li><code>security 1</code> — unknown commands blocked, known ones need confirmation if destructive</li>
<li><code>security 2</code> — all commands need confirmation</li>
<li><code>guardrail</code> — list guardrail rules</li>
<li><code>guardrail-add 'pattern' deny</code> — block matching commands</li>
<li><code>guardrail-remove &lt;id&gt;</code> — remove a guardrail</li>
</ul>
</section>

<footer>
<a href="modules.html">Modules</a> · <a href="skills.html">Skills</a> · <a href="help.html">Full Help</a> · <a href="cheatsheet.html">Cheatsheet</a> ·
<a href="/spaces/agando/downloads/changelog.html">Changelog</a> · <a href="/spaces/agando/downloads/maintenance.html">Maintenance</a>
</footer>
</body>
</html>