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

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">1. Enter your API key</h4>
    <p>
      Open Settings (<kbd class="kbd">Ctrl+,</kbd>) and paste your Anthropic API key. Keys are
      stored locally on your device and never sent anywhere except the Anthropic API.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">2. Set a working directory</h4>
    <p>
      Click the folder icon in the connection bar and choose the project directory you want Hikari
      to work in. This gives her context for your files and project structure.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">3. Connect</h4>
    <p>
      Click <strong>Connect</strong> to start a Claude Code session. The status indicator will turn green
      when you're connected.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">4. Start chatting</h4>
    <p>
      Type a message and press <kbd class="kbd">Enter</kbd> (or <kbd class="kbd">Ctrl+Enter</kbd>)
      to send. Hikari can read, write, and edit files; run terminal commands; search code; fetch web
      content; and connect to external tools via MCP.
    </p>
  </div>

  <div class="pt-2 border-t border-[var(--border-color)]">
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Key Features</h4>
    <ul class="space-y-1.5">
      <li>🗂️ <strong>File Management</strong> — read, write, and edit files in your project</li>
      <li>💻 <strong>Terminal Access</strong> — execute commands and run scripts</li>
      <li>🔍 <strong>Code Search</strong> — find files and search through code</li>
      <li>🌐 <strong>Web Access</strong> — fetch information from the web</li>
      <li>📊 <strong>MCP Servers</strong> — connect external tools via Model Context Protocol</li>
      <li>📁 <strong>Multi-tab Support</strong> — work on multiple conversations simultaneously</li>
    </ul>
  </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>
