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

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Multiple Conversations</h4>
    <p>
      Use tabs at the top of the chat area to manage multiple simultaneous sessions with Hikari.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Click <strong>+</strong> to open a new conversation tab</li>
      <li>• Click a tab to switch between active conversations</li>
      <li>• Click <strong>×</strong> on a tab to close that conversation</li>
    </ul>
    <p class="mt-2">
      Each tab runs its own independent Claude Code session with separate context and history.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Session History</h4>
    <p>
      Open <strong>Session History</strong> from the menu to browse and restore past conversations. Sessions
      are saved automatically and indexed by date.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Context Compaction</h4>
    <p>
      As conversations grow long, use <strong>Compact Conversation</strong> from the menu to summarise
      the history and free up context window space — without losing important information.
    </p>
    <p class="mt-2">
      <strong>Start Fresh with Context</strong> creates a brand-new session but carries over a summary
      of the previous conversation.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Tool Permissions</h4>
    <p>
      When Hikari needs to use a tool (file access, terminal, web fetch, etc.) she may ask for your
      approval first. You can:
    </p>
    <ul class="space-y-1 mt-2">
      <li>• <strong>Allow once</strong> — approve this single use</li>
      <li>• <strong>Allow for session</strong> — approve all uses of this tool this session</li>
      <li>• <strong>Deny</strong> — block the action</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Stats Panel</h4>
    <p>
      Open <strong>Stats</strong> from the menu to see real-time usage data: token counts, estimated cost,
      context window usage, and per-session totals.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Streamer Mode</h4>
    <p>
      Toggle streamer mode (<kbd class="kbd">Ctrl+Shift+S</kbd>) to redact your API key and other
      sensitive information from the display — useful for streaming or screen sharing.
    </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>
