<h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">File Editor</h3>

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <p>
    The built-in file editor lets you read and edit project files directly in Hikari Desktop,
    alongside your conversation. Open it via <strong>File Editor</strong> in the menu or press
    <kbd class="kbd">Ctrl+E</kbd> (requires an active connection).
  </p>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">File Browser</h4>
    <p>
      The file browser panel (toggle with <kbd class="kbd">Ctrl+B</kbd>) shows your working
      directory tree. From it you can:
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Click a file to open it in a new editor tab</li>
      <li>• Right-click for context menu options (rename, delete)</li>
      <li>• Press <kbd class="kbd">Ctrl+N</kbd> to create a new file</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Editor Tabs</h4>
    <p>Each open file gets its own tab. You can have multiple files open at once.</p>
    <ul class="space-y-1 mt-2">
      <li>• Click a tab to switch to that file</li>
      <li>• Click <strong>×</strong> on a tab to close it (<kbd class="kbd">Ctrl+W</kbd>)</li>
      <li>• Unsaved changes are indicated with a dot on the tab</li>
      <li>• Press <kbd class="kbd">Ctrl+S</kbd> to save the current file</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Syntax Highlighting</h4>
    <p>
      The editor automatically applies syntax highlighting for a wide range of languages, including:
    </p>
    <p class="mt-1">
      JavaScript · TypeScript · Python · Rust · Go · Java · C++ · HTML · CSS · JSON · YAML ·
      Markdown · SQL · Shell · PHP · Ruby · Swift · R · TOML · Dockerfile · PowerShell
    </p>
    <p class="mt-2">
      The editor theme follows your app theme — dark themes use dark editor backgrounds.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Editor Features</h4>
    <ul class="space-y-1">
      <li>• Line numbers, bracket matching, and code folding</li>
      <li>• Search and replace (<kbd class="kbd">Ctrl+F</kbd> in most editors)</li>
      <li>• Right-click context menu for common operations</li>
      <li>• Full CodeMirror keybindings</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Working with Hikari</h4>
    <p>
      Hikari can read and edit files directly through her tool access — you don't need the file
      editor open for her to work on files. The editor is most useful for reviewing changes she's
      made, manually editing files alongside the conversation, or browsing the project structure.
    </p>
  </div>
</div>

<style>
  kbd.kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
  }
</style>
