You've already forked zblade.dev
kekePower
ca47c7bae9
Add hamburger menu toggle with ARIA support for mobile nav. Introduce responsive breakpoints at 768px (tablet) and 480px (phone) with stacked nav, adjusted spacing, and full-width elements. Add table overflow protection and responsive refinements across all page layouts.
1788 lines
53 KiB
Plaintext
1788 lines
53 KiB
Plaintext
---
|
||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||
---
|
||
|
||
<BaseLayout title="Documentation - Zaguán Blade" description="How to set up, configure, and work with AI in Zaguán Blade. Covers the interface, AI collaboration, and local/cloud setup.">
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="docs-hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-label">User Guide</div>
|
||
<h1 class="hero-title">
|
||
<span class="title-line-1">Documentation</span>
|
||
<span class="title-accent">Get Started</span>
|
||
</h1>
|
||
<p class="hero-description">
|
||
How to use Blade, from zero setup to advanced workflows.
|
||
This guide covers the interface, AI collaboration, and configuration.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- The Concept Section -->
|
||
<section id="concept" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">The Concept</div>
|
||
<div class="concept-card">
|
||
<div class="concept-header">
|
||
<h2>AI-Native Editor</h2>
|
||
<div class="concept-tag">Core Principle</div>
|
||
</div>
|
||
<p class="concept-lead">
|
||
Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
|
||
</p>
|
||
<p class="concept-lead">
|
||
It supports Local AI through Ollama and any OpenAI-compatible connection, so you can run models on your own machine or point to self-hosted gateways without changing your workflow.
|
||
</p>
|
||
<div class="concept-grid">
|
||
<div class="concept-item">
|
||
<div class="concept-icon">👁</div>
|
||
<h3>It reads your context</h3>
|
||
<p>The AI knows your active file, cursor position, open tabs, project structure, and recent diagnostics — no copy-paste needed.</p>
|
||
</div>
|
||
<div class="concept-item">
|
||
<div class="concept-icon">🔧</div>
|
||
<h3>It edits files directly</h3>
|
||
<p>No pasting code blocks into your editor. The AI writes inline diff blocks you can review, accept, or reject before they touch your code.</p>
|
||
</div>
|
||
<div class="concept-item">
|
||
<div class="concept-icon">⚡</div>
|
||
<h3>It runs what it needs</h3>
|
||
<p>Terminal commands, file searches, web research — the AI can execute tools in your workspace, but you approve every command.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Getting Started Section -->
|
||
<section id="getting-started" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Getting Started</div>
|
||
<h2 class="section-title">Quick Start Guide</h2>
|
||
|
||
<div class="steps-grid">
|
||
<div class="step-card step-highlight">
|
||
<div class="step-num">1</div>
|
||
<h3>Choose Your AI Path</h3>
|
||
<p>Zaguán Blade supports both <strong>Local AI</strong> (private, no API key) and <strong>Cloud AI</strong> (faster hosted models). You can use either or both.</p>
|
||
<div class="step-options">
|
||
<span class="option-tag option-recommended">Local AI</span>
|
||
<span class="option-tag">Cloud AI</span>
|
||
<span class="option-tag">Hybrid</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card">
|
||
<div class="step-num">2</div>
|
||
<h3>Set Up Your AI Provider</h3>
|
||
<p><strong>For Local AI:</strong> Open <strong>Settings > Local AI</strong> and enable Ollama or an OpenAI-compatible server. No API key required.</p>
|
||
<p class="step-or"><strong>For Cloud AI:</strong> Go to <strong>Settings > Account</strong> and add your Zaguán API key for hosted models.</p>
|
||
</div>
|
||
|
||
<div class="step-card">
|
||
<div class="step-num">3</div>
|
||
<h3>Choose Storage Mode</h3>
|
||
<p>When opening a project for the first time, select your preferred storage mode for conversation history.</p>
|
||
<div class="step-options">
|
||
<span class="option-tag option-recommended">Local Storage</span>
|
||
<span class="option-tag">Server Storage</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Interface Section -->
|
||
<section id="interface" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">The Interface</div>
|
||
<h2 class="section-title">Interface Overview</h2>
|
||
|
||
<div class="interface-grid">
|
||
<div class="interface-card">
|
||
<div class="interface-header">
|
||
<span class="interface-icon">📁</span>
|
||
<h3>Activity Bar</h3>
|
||
</div>
|
||
<ul class="interface-list">
|
||
<li><strong>Files</strong> - Project file explorer</li>
|
||
<li><strong>Git</strong> - Stage, commit, push</li>
|
||
<li><strong>History</strong> - Browse file history</li>
|
||
<li><strong>Settings</strong> - Preferences & account</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="interface-card interface-highlight">
|
||
<div class="interface-header">
|
||
<span class="interface-icon">💻</span>
|
||
<h3>Center Stage</h3>
|
||
<span class="interface-tag">Editor</span>
|
||
</div>
|
||
<p class="interface-desc">High-performance CodeMirror 6 editor with syntax highlighting. <strong>Diff Blocks</strong> appear inline when the AI proposes changes.</p>
|
||
</div>
|
||
|
||
<div class="interface-card">
|
||
<div class="interface-header">
|
||
<span class="interface-icon">🤖</span>
|
||
<h3>Right Panel</h3>
|
||
<span class="interface-tag">AI Assistant</span>
|
||
</div>
|
||
<ul class="interface-list">
|
||
<li><strong>Chat</strong> - Main communication channel</li>
|
||
<li><strong>Model Selector</strong> - Choose AI model</li>
|
||
<li><strong>Command Center</strong> - Type <code>@</code> for special commands</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="interface-card">
|
||
<div class="interface-header">
|
||
<span class="interface-icon">⌨️</span>
|
||
<h3>Bottom Panel</h3>
|
||
<span class="interface-tag">Terminal</span>
|
||
</div>
|
||
<p class="interface-desc">Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Keyboard Shortcuts Section -->
|
||
<section id="shortcuts" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Keyboard Shortcuts</div>
|
||
<h2 class="section-title">Keyboard Shortcuts</h2>
|
||
|
||
<div class="shortcuts-layout">
|
||
<div class="shortcuts-card">
|
||
<h3>Global Shortcuts</h3>
|
||
<table class="shortcuts-table">
|
||
<tr><td><kbd>F11</kbd></td><td>Toggle fullscreen mode</td></tr>
|
||
<tr><td><kbd>Ctrl+W</kbd></td><td>Close current tab</td></tr>
|
||
<tr><td><kbd>Ctrl+Tab</kbd></td><td>Cycle to next tab</td></tr>
|
||
<tr><td><kbd>Ctrl+Shift+Tab</kbd></td><td>Cycle to previous tab</td></tr>
|
||
<tr><td><kbd>Escape</kbd></td><td>Close modals/popups</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="shortcuts-card">
|
||
<h3>File Operations</h3>
|
||
<table class="shortcuts-table">
|
||
<tr><td><kbd>Ctrl+N</kbd></td><td>New File</td></tr>
|
||
<tr><td><kbd>Ctrl+O</kbd></td><td>Open Folder</td></tr>
|
||
<tr><td><kbd>Ctrl+S</kbd></td><td>Save current file</td></tr>
|
||
<tr><td><kbd>Ctrl+Shift+S</kbd></td><td>Save As</td></tr>
|
||
<tr><td><kbd>Alt+F4</kbd></td><td>Exit application</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="shortcuts-card">
|
||
<h3>Editor Shortcuts</h3>
|
||
<table class="shortcuts-table">
|
||
<tr><td><kbd>Ctrl+Z</kbd></td><td>Undo</td></tr>
|
||
<tr><td><kbd>Ctrl+Shift+Z</kbd></td><td>Redo</td></tr>
|
||
<tr><td><kbd>Ctrl+F</kbd></td><td>Find in file</td></tr>
|
||
<tr><td><kbd>F2</kbd></td><td>Rename symbol</td></tr>
|
||
<tr><td><kbd>Ctrl+E</kbd></td><td>Toggle Edit/View mode (Markdown)</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="shortcuts-card">
|
||
<h3>Chat Input</h3>
|
||
<table class="shortcuts-table">
|
||
<tr><td><kbd>Enter</kbd></td><td>Send message</td></tr>
|
||
<tr><td><kbd>Shift+Enter</kbd></td><td>New line (without sending)</td></tr>
|
||
<tr><td><kbd>Arrow Up/Down</kbd></td><td>Navigate command suggestions</td></tr>
|
||
<tr><td><kbd>Tab</kbd> or <kbd>Enter</kbd></td><td>Select command from autocomplete</td></tr>
|
||
<tr><td><kbd>Escape</kbd></td><td>Close command autocomplete</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- At Commands Section -->
|
||
<section id="commands" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Commands</div>
|
||
<h2 class="section-title">Special Commands</h2>
|
||
<p class="section-desc">Type <code class="inline-code">@</code> in the chat input to access these special commands:</p>
|
||
|
||
<div class="commands-grid">
|
||
<div class="command-card">
|
||
<div class="command-syntax">@web <url></div>
|
||
<p>Fetches content from a URL and uses it as context for the AI. Great for referencing documentation or articles.</p>
|
||
</div>
|
||
<div class="command-card">
|
||
<div class="command-syntax">@research <topic></div>
|
||
<p>Performs deep research on a topic and displays results in a new tab. AI-powered web research at your fingertips.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Working with AI Section -->
|
||
<section id="ai" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Working with AI</div>
|
||
<h2 class="section-title">AI Collaboration</h2>
|
||
|
||
<div class="ai-content">
|
||
<div class="ai-block">
|
||
<h3>What the AI knows about your project</h3>
|
||
<p>The AI doesn't need you to describe your codebase. It reads it directly from the editor.</p>
|
||
<ul>
|
||
<li><strong>Active file</strong> - The file you are currently viewing</li>
|
||
<li><strong>Open files</strong> - All open tabs in the editor</li>
|
||
<li><strong>Cursor & selection</strong> - Your cursor position and any selected text</li>
|
||
<li><strong>Mentioned paths</strong> - Files referenced via <code>@path</code> in chat</li>
|
||
<li><strong>Diagnostics</strong> - Recent build errors and compiler warnings</li>
|
||
<li><strong>Project structure</strong> - File tree and symbol index when needed</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="ai-block ai-block-highlight">
|
||
<h3>Reviewing Changes</h3>
|
||
<p>When the AI writes code, it doesn't just overwrite your work. It proposes <strong>Edits</strong>.</p>
|
||
<ol>
|
||
<li>The AI will indicate it is writing code.</li>
|
||
<li>You will see <span class="diff-add">Green</span> (added) and <span class="diff-remove">Red</span> (removed) lines appear directly in your editor.</li>
|
||
<li><strong>Review</strong> the changes carefully.</li>
|
||
<li><strong>Accept/Reject</strong>: Click Accept (✓) to apply, or Reject (✗) to discard. Use "Accept All" or "Reject All" for multiple changes.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Chat Modes Section -->
|
||
<section id="chat-modes" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Chat Modes</div>
|
||
<h2 class="section-title">Chat Modes</h2>
|
||
<p class="section-desc">Zaguán Blade supports two chat modes accessible from the <strong>Command Center</strong>:</p>
|
||
|
||
<div class="commands-grid">
|
||
<div class="command-card">
|
||
<div class="command-syntax">Code Mode</div>
|
||
<p>The default mode for implementing and executing. The AI can read files, edit code, run terminal commands, and make changes to your project.</p>
|
||
</div>
|
||
<div class="command-card">
|
||
<div class="command-syntax">Planning Mode</div>
|
||
<p>Investigate and build a plan before coding. The AI explores your codebase, researches approaches, and proposes architecture — no edits or commands are executed.</p>
|
||
</div>
|
||
<div class="command-card">
|
||
<div class="command-syntax">Implement Action</div>
|
||
<p>After reviewing a plan in Planning mode, use <strong>Implement</strong> to convert the plan into a code-mode request and start building.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Settings Section -->
|
||
<section id="settings" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Settings</div>
|
||
<h2 class="section-title">Configuration</h2>
|
||
|
||
<div class="settings-grid">
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">⚙</span>
|
||
<h3>Configuration</h3>
|
||
</div>
|
||
<ul>
|
||
<li><strong>Theme</strong> - Zaguán Dark, Blade Coder, Blade Cream, Blade Robot</li>
|
||
<li><strong>Language</strong> - UI language preference</li>
|
||
<li><strong>Markdown View</strong> - Toggle edit/view mode for markdown files</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">👤</span>
|
||
<h3>Account Tab</h3>
|
||
</div>
|
||
<ul>
|
||
<li><strong>API Key</strong> - Your Zaguán subscription key for cloud AI models</li>
|
||
<li><strong>Manage Subscription</strong> - Link to your account dashboard</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">🤖</span>
|
||
<h3>Local AI Tab</h3>
|
||
</div>
|
||
<ul>
|
||
<li><strong>Ollama</strong> - Connect to a local Ollama instance</li>
|
||
<li><strong>Ollama Cloud</strong> - Connect to Ollama via ngrok/remote</li>
|
||
<li><strong>OpenAI-compatible</strong> - Any OpenAI-compatible server endpoint</li>
|
||
<li><strong>Test Connection</strong> - Verify your local AI setup</li>
|
||
<li><strong>Refresh Models</strong> - Reload available models from providers</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">💾</span>
|
||
<h3>Storage Tab</h3>
|
||
</div>
|
||
<ul>
|
||
<li><strong>Storage Mode</strong> - Local (.zblade/ folder) or Server storage</li>
|
||
<li><strong>Sync Metadata</strong> - Sync conversation titles to server (no code)</li>
|
||
<li><strong>Enable Cache</strong> - Cache recent context for faster access</li>
|
||
<li><strong>Max Cache Size</strong> - Configure cache (10-500 MB)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">🧠</span>
|
||
<h3>Context Tab</h3>
|
||
<span class="setting-tag">Per-project</span>
|
||
</div>
|
||
<ul>
|
||
<li><strong>Max Context Tokens</strong> - Control context sent to AI (2K-32K)</li>
|
||
<li><strong>Enable Compression</strong> - Remote (cloud) or Local compression</li>
|
||
<li><strong>Allow .gitignored Files</strong> - Include gitignored files in AI context</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="setting-card">
|
||
<div class="setting-header">
|
||
<span class="setting-icon">ℹ</span>
|
||
<h3>About Tab</h3>
|
||
</div>
|
||
<ul>
|
||
<li><strong>Version</strong> - Current Zaguán Blade version</li>
|
||
<li><strong>Runtime</strong> - Tauri runtime information</li>
|
||
<li><strong>Engine</strong> - WebView engine details</li>
|
||
<li><strong>Local-First</strong> - Privacy and data control details</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Project Instructions Section -->
|
||
<section id="project-instructions" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Project Instructions</div>
|
||
<h2 class="section-title">Teach the AI About Your Project</h2>
|
||
|
||
<div class="instructions-content">
|
||
<p class="instructions-intro">
|
||
Zaguán Blade creates a <code class="inline-code">.zblade/</code> folder in your project with an <code class="inline-code">instructions.md</code> file. Edit this file to provide project-specific instructions to the AI.
|
||
</p>
|
||
|
||
<div class="code-block">
|
||
<div class="code-header">
|
||
<span class="code-filename">.zblade/instructions.md</span>
|
||
<span class="code-lang">markdown</span>
|
||
</div>
|
||
<pre><code># Project Instructions
|
||
|
||
## Project Overview
|
||
<!-- Describe your project briefly -->
|
||
|
||
## Coding Guidelines
|
||
<!-- Add any specific coding conventions or patterns to follow -->
|
||
|
||
## Important Files
|
||
<!-- List key files the AI should be aware of --></code></pre>
|
||
</div>
|
||
|
||
<p class="instructions-note">The AI reads this file to understand your project's conventions and requirements.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Editor Features Section -->
|
||
<section id="features" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Editor Features</div>
|
||
<h2 class="section-title">Additional Features</h2>
|
||
|
||
<div class="features-list">
|
||
<div class="feature-detail">
|
||
<h3>Context Menu (Right-Click)</h3>
|
||
<div class="feature-tags">
|
||
<span>Cut / Copy / Paste</span>
|
||
<span>Undo / Redo</span>
|
||
<span>Find</span>
|
||
<span>Rename Symbol</span>
|
||
<span>Show Call Graph</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-detail">
|
||
<h3>File Explorer Context Menu</h3>
|
||
<div class="feature-tags">
|
||
<span>New File / Folder</span>
|
||
<span>Rename</span>
|
||
<span>Delete</span>
|
||
<span>Cut / Copy / Paste</span>
|
||
<span>Open in Terminal</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-detail feature-detail-highlight">
|
||
<h3>Markdown Support</h3>
|
||
<p>Markdown files automatically enable line wrapping. Use <kbd>Ctrl+E</kbd> to toggle between Edit and View modes.</p>
|
||
</div>
|
||
|
||
<div class="feature-detail">
|
||
<h3>PDF Viewing</h3>
|
||
<p>Open PDF files directly in the editor. Zaguán Blade uses <strong>PDF.js</strong> to render PDFs natively — no external viewer required. PDFs are displayed in read-only mode, so you can review documents alongside your code without leaving the editor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Screenshot Capture Section -->
|
||
<section id="screenshot" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Screenshot Capture</div>
|
||
<h2 class="section-title">Screenshot Capture</h2>
|
||
<p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
|
||
|
||
<div class="screenshot-grid">
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon">🖼</div>
|
||
<h3>Capture Window</h3>
|
||
<p>Select a window from the picker and attach a full screenshot of it.</p>
|
||
</div>
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon">✂</div>
|
||
<h3>Capture Region</h3>
|
||
<p>Select a window, then drag to crop a specific region from it.</p>
|
||
</div>
|
||
<div class="screenshot-card">
|
||
<div class="screenshot-icon">📤</div>
|
||
<h3>Upload Image</h3>
|
||
<p>Attach an existing image file to the chat conversation for visual context.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshot-notes">
|
||
<h3>Platform Notes (Linux / X11)</h3>
|
||
<p>On X11-based desktops (e.g., Openbox, i3, Fluxbox), window capture has the following limitations:</p>
|
||
<ul>
|
||
<li><strong>Current workspace only</strong> - The window picker only shows windows on your active workspace. Windows on other virtual desktops cannot be captured because X11 does not render off-screen windows.</li>
|
||
<li><strong>Window must be visible</strong> - The target window must be visible and not fully obscured by another window. If a window is covered, the capture may return a black image. <strong>Click the window to bring it to the front before capturing.</strong></li>
|
||
<li><strong>Compositors help</strong> - If you run a compositor such as <code class="inline-code">picom</code> or <code class="inline-code">compton</code>, these limitations are largely eliminated - compositors maintain off-screen buffers for all windows, enabling capture of obscured or unfocused windows.</li>
|
||
</ul>
|
||
<p class="screenshot-note-wayland">These limitations do not apply to <strong>Wayland</strong> desktops (GNOME, KDE Plasma 6) or <strong>macOS</strong>, which use compositing by default.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Privacy Section -->
|
||
<section id="privacy" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Privacy & Data</div>
|
||
<h2 class="section-title">Privacy</h2>
|
||
|
||
<div class="privacy-grid">
|
||
<div class="privacy-item">
|
||
<div class="privacy-icon">🚫</div>
|
||
<h3>No Telemetry</h3>
|
||
<p>Zaguán Blade does not collect usage telemetry.</p>
|
||
</div>
|
||
<div class="privacy-item">
|
||
<div class="privacy-icon">🤖</div>
|
||
<h3>Local AI Privacy</h3>
|
||
<p>Local AI models run entirely on your machine. Prompts and code never leave your computer when using Ollama or local OpenAI-compatible servers.</p>
|
||
</div>
|
||
<div class="privacy-item">
|
||
<div class="privacy-icon">🔒</div>
|
||
<h3>Local Storage Mode</h3>
|
||
<p>When using local storage, your code and conversations never leave your machine.</p>
|
||
</div>
|
||
<div class="privacy-item">
|
||
<div class="privacy-icon">🔐</div>
|
||
<h3>Server Storage Mode</h3>
|
||
<p>Conversations are encrypted on Zaguán servers. Cloud AI requests are processed on Zaguán infrastructure.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Local AI System Prompts Section -->
|
||
<section id="local-ai-prompts" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Local AI System Prompts</div>
|
||
<h2 class="section-title">Custom System Prompts</h2>
|
||
|
||
<div class="instructions-content">
|
||
<p class="instructions-intro">
|
||
When using Local AI models (Ollama or OpenAI-compatible), you can customize the system prompt for each model by creating a file with the model name or a compatible fallback name.
|
||
</p>
|
||
|
||
<div class="prompt-paths">
|
||
<div class="prompt-path-item">
|
||
<strong>Linux:</strong> <code class="inline-code">~/.config/zblade/prompts/[model-name].md</code>
|
||
</div>
|
||
<div class="prompt-path-item">
|
||
<strong>Windows:</strong> <code class="inline-code">%APPDATA%\zblade\prompts\[model-name].md</code>
|
||
</div>
|
||
<div class="prompt-path-item">
|
||
<strong>macOS:</strong> <code class="inline-code">~/Library/Application Support/zblade/prompts/[model-name].md</code>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="instructions-note">
|
||
Blade tries provider-qualified, stripped, lowercased, and base-model prompt filenames, so exact case and format is no longer required.
|
||
</p>
|
||
|
||
<div class="code-block">
|
||
<div class="code-header">
|
||
<span class="code-filename">~/.config/zblade/prompts/glm-4.7-flash:Q4_K_M.md</span>
|
||
<span class="code-lang">markdown</span>
|
||
</div>
|
||
<pre><code>You are an AI coding assistant in Zaguán Blade. Help users write, understand, and improve code efficiently.
|
||
|
||
# Core Rules
|
||
|
||
- When asked who and what you are, you are "glm-4.7-flash, an AI coding assistant in Zaguán Blade."
|
||
- Understand context before acting
|
||
- Match existing code style and conventions
|
||
- Verify libraries exist before using them (check imports, package.json, etc.)
|
||
- Use absolute file paths
|
||
- Read files before editing them
|
||
- Prefer symbol_search -> symbol_resolve -> read_file_range for code understanding
|
||
- Use grep_search when you need text-pattern search rather than symbol lookup
|
||
- Add comments sparingly - focus on "why" not "what"
|
||
- If unclear, ask for clarification
|
||
|
||
# Communication
|
||
|
||
- Be concise and direct
|
||
- Use markdown for code blocks
|
||
- No preamble ("Great!", "Certainly!")
|
||
- Jump straight to the task
|
||
|
||
# Available Tools
|
||
|
||
**get_editor_state** - Get active file, cursor position, and open files
|
||
**symbol_search** - Find functions, classes, methods, and types by name
|
||
**symbol_resolve** - Resolve a symbol to its exact file and line range
|
||
**symbol_references** - Find where a symbol is used
|
||
**read_file_range** - Read targeted line ranges from a file
|
||
**read_file** - Read full file contents when broader context is needed
|
||
**get_workspace_structure** - Get the project directory tree
|
||
**grep_search** - Search for text or regex patterns across files
|
||
**apply_patch** - Make precise edits to existing files
|
||
**write_file** - Create or overwrite a file
|
||
**run_command** - Execute shell commands
|
||
**todo_write** - Track multi-step work and show progress</code></pre>
|
||
</div>
|
||
|
||
<p class="instructions-note">
|
||
We encourage you to try Local AI and <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener">report any bugs or issues</a> you encounter!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tool Calls Reference Section -->
|
||
<section id="tool-calls" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Tool Calls Reference</div>
|
||
<h2 class="section-title">Tool Calls Reference</h2>
|
||
|
||
<div class="instructions-content">
|
||
<p class="instructions-intro">
|
||
When creating custom system prompts for Local AI models, you'll need to include definitions for the tool calls Zaguán Blade supports. This reference document describes all available tools with their parameters and usage examples.
|
||
</p>
|
||
|
||
<div class="tool-calls-cta">
|
||
<a href="/tools" class="tool-calls-link">
|
||
<span class="tool-calls-icon">📖</span>
|
||
<span class="tool-calls-text">
|
||
<strong>View Complete Tool Calls Reference</strong>
|
||
<p class="tool-calls-subtext">Full documentation of all available tool calls for Local AI system prompts</p>
|
||
</span>
|
||
<span class="tool-calls-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Known Bugs Section -->
|
||
<section id="known-bugs" class="docs-section section-alt">
|
||
<div class="container">
|
||
<div class="section-label">Known Bugs</div>
|
||
<h2 class="section-title">Known Issues</h2>
|
||
<p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
|
||
|
||
<div class="bugs-grid">
|
||
<div class="bug-card">
|
||
<div class="bug-icon">⚠️</div>
|
||
<h3>Local AI Support</h3>
|
||
<p>Local AI support may not work consistently in all scenarios. We're actively improving reliability.</p>
|
||
</div>
|
||
|
||
<div class="bug-card">
|
||
<div class="bug-icon">📝</div>
|
||
<h3>Search Functionality</h3>
|
||
<p>Global search across project files is not yet implemented. The search icon has been hidden until this feature is ready.</p>
|
||
</div>
|
||
|
||
<div class="bug-card">
|
||
<div class="bug-icon">📝</div>
|
||
<h3>Diff/Patch View</h3>
|
||
<p>The Diff/Patch view may not be 100% complete. Edge cases in code review might behave unexpectedly.</p>
|
||
</div>
|
||
|
||
<div class="bug-card">
|
||
<div class="bug-icon">💾</div>
|
||
<h3>Local Storage Mode</h3>
|
||
<p>Local Storage Mode hasn't been extensively tested. Use with caution and report any issues.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bug-cta">
|
||
<p>Found a bug not listed here? Please <a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener">report it on GitHub</a>.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Support Section -->
|
||
<section id="support" class="docs-section">
|
||
<div class="container">
|
||
<div class="section-label">Support & Feedback</div>
|
||
<div class="support-card">
|
||
<div class="support-header">
|
||
<h2>Alpha Release</h2>
|
||
<span class="status-badge">Alpha</span>
|
||
</div>
|
||
<p class="support-lead">
|
||
We define "Alpha" as "Feature incomplete, but good enough to be useful."
|
||
</p>
|
||
<p>You <em>will</em> encounter bugs. When you do:</p>
|
||
<div class="support-actions">
|
||
<a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener" class="support-link">
|
||
<span>🐛 Report Bugs</span>
|
||
<span class="link-arrow">→</span>
|
||
</a>
|
||
<a href="https://github.com/ZaguanLabs/ZaguanBlade/issues" target="_blank" rel="noopener" class="support-link">
|
||
<span>💡 Feature Requests</span>
|
||
<span class="link-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
<p class="support-thanks">Thank you for being part of the future of coding.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</BaseLayout>
|
||
|
||
<style>
|
||
/* Docs Page Specific Styles */
|
||
|
||
/* Hero */
|
||
.docs-hero {
|
||
min-height: 35vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: calc(var(--space-2xl) + 60px);
|
||
padding-bottom: var(--space-lg);
|
||
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.docs-hero .hero-content {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.docs-hero .hero-title {
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.title-line-1 {
|
||
display: block;
|
||
font-size: clamp(2rem, 6vw, 3.5rem);
|
||
font-weight: 900;
|
||
line-height: 0.95;
|
||
letter-spacing: -0.03em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.title-accent {
|
||
display: block;
|
||
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
||
font-weight: 700;
|
||
color: var(--color-accent);
|
||
font-family: var(--font-mono);
|
||
margin-top: 0.25rem;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Sections */
|
||
.docs-section {
|
||
padding: var(--space-3xl) 0;
|
||
}
|
||
|
||
.section-alt {
|
||
background: var(--color-bg-secondary);
|
||
}
|
||
|
||
.section-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: var(--color-accent);
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(2rem, 5vw, 3rem);
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 1.125rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
/* Concept Section */
|
||
.concept-card {
|
||
background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%);
|
||
border: 2px solid var(--color-accent);
|
||
padding: var(--space-2xl);
|
||
position: relative;
|
||
}
|
||
|
||
.concept-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-lg);
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.concept-header h2 {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.concept-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
padding: 0.4rem 0.8rem;
|
||
background: var(--color-accent);
|
||
color: var(--color-bg);
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.concept-lead {
|
||
font-size: 1.25rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: var(--space-xl);
|
||
max-width: 800px;
|
||
}
|
||
|
||
.concept-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.concept-item {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.concept-item:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.concept-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.concept-item h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-xs);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.concept-item p {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Steps Grid */
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.step-card {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-xl);
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.step-card:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateX(8px);
|
||
}
|
||
|
||
.step-highlight {
|
||
border-color: var(--color-accent);
|
||
background: var(--color-bg-elevated);
|
||
}
|
||
|
||
.step-highlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
.step-num {
|
||
font-family: var(--font-mono);
|
||
font-size: 3rem;
|
||
font-weight: 900;
|
||
color: var(--color-accent);
|
||
line-height: 1;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.step-card h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-sm);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.step-card p {
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.step-card a {
|
||
color: var(--color-accent);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.step-card a:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.step-note {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
padding-top: var(--space-sm);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.step-or {
|
||
font-size: 0.85rem;
|
||
color: var(--color-text-secondary);
|
||
margin-top: var(--space-sm);
|
||
padding-top: var(--space-sm);
|
||
border-top: 1px dashed var(--color-border);
|
||
}
|
||
|
||
.step-options {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
margin-top: var(--space-sm);
|
||
}
|
||
|
||
.option-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
padding: 0.3rem 0.6rem;
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.option-recommended {
|
||
border-color: var(--color-accent);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* Interface Grid */
|
||
.interface-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.interface-card {
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.interface-card:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.interface-highlight {
|
||
border-color: var(--color-accent);
|
||
background: var(--color-bg-elevated);
|
||
position: relative;
|
||
}
|
||
|
||
.interface-highlight::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: var(--color-accent);
|
||
}
|
||
|
||
.interface-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.interface-icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.interface-header h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
flex: 1;
|
||
}
|
||
|
||
.interface-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.65rem;
|
||
padding: 0.2rem 0.5rem;
|
||
background: var(--color-accent);
|
||
color: var(--color-bg);
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.interface-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.interface-list li {
|
||
padding: var(--space-xs) 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.interface-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.interface-list strong {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.interface-desc {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Shortcuts */
|
||
.shortcuts-layout {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.shortcuts-card {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.shortcuts-card h3 {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-md);
|
||
text-transform: uppercase;
|
||
color: var(--color-accent);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.shortcuts-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.shortcuts-table tr {
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.shortcuts-table tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.shortcuts-table td {
|
||
padding: var(--space-sm) 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.shortcuts-table td:first-child {
|
||
width: 45%;
|
||
}
|
||
|
||
kbd {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
padding: 0.2rem 0.5rem;
|
||
background: var(--color-bg-elevated);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--border-radius);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* Commands */
|
||
.commands-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.command-card {
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.command-card:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateX(8px);
|
||
}
|
||
|
||
.command-syntax {
|
||
font-family: var(--font-mono);
|
||
font-size: 1.125rem;
|
||
color: var(--color-accent);
|
||
margin-bottom: var(--space-sm);
|
||
padding: var(--space-sm);
|
||
background: var(--color-bg);
|
||
border-left: 3px solid var(--color-accent);
|
||
}
|
||
|
||
.command-card p {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.inline-code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9em;
|
||
padding: 0.1rem 0.3rem;
|
||
background: var(--color-bg-elevated);
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* AI Section */
|
||
.ai-content {
|
||
display: grid;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.ai-block {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-xl);
|
||
}
|
||
|
||
.ai-block h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-md);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.ai-block p, .ai-block li {
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.ai-block ul, .ai-block ol {
|
||
margin-left: var(--space-lg);
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
.ai-block li {
|
||
margin-bottom: var(--space-xs);
|
||
}
|
||
|
||
.ai-block strong {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.ai-block-highlight {
|
||
border-color: var(--color-accent);
|
||
background: var(--color-bg-elevated);
|
||
}
|
||
|
||
.diff-add {
|
||
color: var(--color-accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.diff-remove {
|
||
color: var(--color-accent-alt);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Settings */
|
||
.settings-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.setting-card {
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.setting-card:hover {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.setting-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.setting-icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.setting-header h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
flex: 1;
|
||
}
|
||
|
||
.setting-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.6rem;
|
||
padding: 0.2rem 0.4rem;
|
||
background: var(--color-accent-blue);
|
||
color: var(--color-bg);
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.setting-card ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.setting-card li {
|
||
padding: var(--space-xs) 0;
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.9rem;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.setting-card li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.setting-card strong {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* Instructions */
|
||
.instructions-content {
|
||
max-width: 900px;
|
||
}
|
||
|
||
.instructions-intro {
|
||
font-size: 1.125rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-xl);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.code-block {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.code-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--space-sm) var(--space-md);
|
||
background: var(--color-bg-elevated);
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
.code-filename {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.code-lang {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
padding: 0.2rem 0.5rem;
|
||
background: var(--color-bg-secondary);
|
||
color: var(--color-accent);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.code-block pre {
|
||
padding: var(--space-md);
|
||
margin: 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.code-block code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.instructions-note {
|
||
color: var(--color-text-tertiary);
|
||
font-style: italic;
|
||
}
|
||
|
||
.instructions-note a {
|
||
color: var(--color-accent);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.instructions-note a:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.prompt-paths {
|
||
display: grid;
|
||
gap: var(--space-md);
|
||
margin-bottom: var(--space-xl);
|
||
background: var(--color-bg-elevated);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.prompt-path-item {
|
||
font-size: 0.95rem;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.prompt-path-item strong {
|
||
color: var(--color-text);
|
||
display: inline-block;
|
||
min-width: 80px;
|
||
}
|
||
|
||
/* Known Bugs */
|
||
.bugs-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.bug-card {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.bug-card:hover {
|
||
border-color: var(--color-accent-alt);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.bug-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.bug-card h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-sm);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.bug-card p {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.bug-cta {
|
||
text-align: center;
|
||
padding: var(--space-lg);
|
||
background: var(--color-bg-elevated);
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.bug-cta p {
|
||
font-size: 1.125rem;
|
||
color: var(--color-text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.bug-cta a {
|
||
color: var(--color-accent);
|
||
text-decoration: underline;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bug-cta a:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* Features List */
|
||
.features-list {
|
||
display: grid;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.feature-detail {
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.feature-detail h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-md);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.feature-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.feature-tags span {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
padding: 0.4rem 0.8rem;
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.feature-detail p {
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.feature-detail-highlight {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
/* Screenshot Capture */
|
||
.screenshot-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.screenshot-card {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-xl);
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.screenshot-card:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.screenshot-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.screenshot-card h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-sm);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.screenshot-card p {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.screenshot-notes {
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
border-left: 4px solid var(--color-accent-alt);
|
||
padding: var(--space-xl);
|
||
}
|
||
|
||
.screenshot-notes h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-md);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.screenshot-notes p {
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.screenshot-notes ul {
|
||
list-style: none;
|
||
margin: var(--space-md) 0;
|
||
}
|
||
|
||
.screenshot-notes li {
|
||
padding: var(--space-sm) 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.screenshot-notes li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.screenshot-notes strong {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.screenshot-note-wayland {
|
||
font-style: italic;
|
||
color: var(--color-text-tertiary) !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* Privacy */
|
||
.privacy-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.privacy-item {
|
||
text-align: center;
|
||
padding: var(--space-xl);
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.privacy-item:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.privacy-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.privacy-item h3 {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-sm);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.privacy-item p {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Support */
|
||
.support-card {
|
||
background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%);
|
||
border: 2px solid var(--color-accent-alt);
|
||
padding: var(--space-2xl);
|
||
position: relative;
|
||
}
|
||
|
||
.support-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
margin-bottom: var(--space-lg);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.support-header h2 {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.status-badge {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
padding: 0.4rem 0.8rem;
|
||
background: var(--color-accent-alt);
|
||
color: var(--color-bg);
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.support-lead {
|
||
font-size: 1.25rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.support-card p {
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.support-actions {
|
||
display: flex;
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-xl);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.support-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
padding: 1rem 1.5rem;
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text);
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.support-link:hover {
|
||
border-color: var(--color-accent);
|
||
transform: translateX(8px);
|
||
}
|
||
|
||
.link-arrow {
|
||
color: var(--color-accent);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.support-link:hover .link-arrow {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.support-thanks {
|
||
font-style: italic;
|
||
color: var(--color-accent) !important;
|
||
}
|
||
|
||
/* Tool Calls Section */
|
||
.tool-calls-cta {
|
||
margin-top: var(--space-xl);
|
||
}
|
||
|
||
.tool-calls-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
padding: var(--space-xl);
|
||
background: var(--color-bg);
|
||
border: 2px solid var(--color-accent);
|
||
border-radius: var(--border-radius);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tool-calls-link:hover {
|
||
background: var(--color-bg-elevated);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.tool-calls-icon {
|
||
font-size: 2.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tool-calls-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.tool-calls-link strong {
|
||
display: block;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
margin-bottom: var(--space-xs);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.tool-calls-subtext {
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.95rem;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tool-calls-arrow {
|
||
font-size: 1.5rem;
|
||
color: var(--color-accent);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.tool-calls-link:hover .tool-calls-arrow {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.tool-calls-link:hover {
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.docs-hero {
|
||
min-height: auto;
|
||
padding-top: calc(var(--space-xl) + 60px);
|
||
padding-bottom: var(--space-md);
|
||
}
|
||
|
||
.docs-section {
|
||
padding: var(--space-xl) 0;
|
||
}
|
||
|
||
.concept-card,
|
||
.support-card {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.concept-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.concept-header h2 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.concept-lead {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.support-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.support-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.support-link {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tool-calls-link {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.step-options {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.docs-hero {
|
||
padding-top: calc(var(--space-lg) + 60px);
|
||
}
|
||
|
||
.concept-card,
|
||
.support-card,
|
||
.ai-block,
|
||
.step-card,
|
||
.setting-card,
|
||
.feature-detail,
|
||
.screenshot-notes {
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.code-block pre {
|
||
padding: var(--space-sm);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.code-block code {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.step-num {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style>
|