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

<div class="space-y-4 text-sm">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">General</h4>
    <table class="w-full">
      <tbody class="divide-y divide-[var(--border-color)]">
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">?</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Open this help panel</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Escape</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Close the active panel</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+,</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Open settings</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+L</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Clear the terminal output</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+C</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]"
            >Interrupt Claude (when no text is selected)</td
          >
        </tr>
      </tbody>
    </table>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Font Size</h4>
    <table class="w-full">
      <tbody class="divide-y divide-[var(--border-color)]">
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl++</kbd> / <kbd class="kbd">Ctrl+=</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Increase font size</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+-</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Decrease font size</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+0</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Reset font size to default</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Display Modes</h4>
    <table class="w-full">
      <tbody class="divide-y divide-[var(--border-color)]">
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+Shift+S</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Toggle streamer mode</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+Shift+M</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Toggle compact mode</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+`</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Toggle debug console</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Code Editor</h4>
    <table class="w-full">
      <tbody class="divide-y divide-[var(--border-color)]">
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+E</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Toggle editor panel (when connected)</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+B</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Toggle file browser (in editor)</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+S</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Save current file (in editor)</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+W</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Close current tab (in editor)</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">Ctrl+N</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">New file (in editor)</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Help Panel Navigation</h4>
    <table class="w-full">
      <tbody class="divide-y divide-[var(--border-color)]">
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">←</kbd> / <kbd class="kbd">↑</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Previous page</td>
        </tr>
        <tr>
          <td class="py-1.5 pr-4"><kbd class="kbd">→</kbd> / <kbd class="kbd">↓</kbd></td>
          <td class="py-1.5 text-[var(--text-secondary)]">Next page</td>
        </tr>
      </tbody>
    </table>
  </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>
