hikari-desktop/src/lib/components/docs/DocsPanelsTools.svelte

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

<div class="space-y-4 text-sm text-[var(--text-secondary)]">
  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Agent Monitor</h4>
    <p>
      Displays a live dashboard of all Claude Code agents running during a session — useful when
      using the Task Loop or any feature that spawns subagents.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Hierarchical tree view showing parent agents and their subagents</li>
      <li>
        • Status indicators: <span class="text-blue-400">● running</span>,
        <span class="text-green-400">● completed</span>,
        <span class="text-red-400">● errored</span>
      </li>
      <li>• Live duration timers for running agents</li>
      <li>• Kill all / clear finished buttons</li>
      <li>• A badge on the menu icon shows the count of active agents</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">To-Do List</h4>
    <p>
      Shows Hikari's internal todo list in real time — the same tasks she tracks using the
      <code class="code">TodoWrite</code> tool during complex multi-step work.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• See pending, in-progress, and completed tasks at a glance</li>
      <li>• Progress bar shows overall completion percentage</li>
      <li>• Updates live as Hikari works through her plan</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Profile</h4>
    <p>Your personal profile within Hikari Desktop, with lifetime stats and sharing.</p>
    <ul class="space-y-1 mt-2">
      <li>• Edit your display name and bio</li>
      <li>• Upload a profile avatar</li>
      <li>
        • View lifetime stats: messages sent, tokens used, code blocks generated, files
        created/edited, total spend
      </li>
      <li>• Track achievement progress</li>
      <li>• Generate a shareable profile card image</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Achievements</h4>
    <p>
      Hikari Desktop includes a fun achievement system that unlocks as you use the app — milestones
      like your first message, first code block, staying up late, and more.
    </p>
    <p class="mt-2">
      Open <strong>Achievements</strong> from the menu to see your progress. Newly unlocked achievements
      show a badge count on the menu item.
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Plugins</h4>
    <p>
      Plugins extend Hikari's capabilities with community-built additions. Open
      <strong>Plugins</strong> from the menu to manage them.
    </p>
    <ul class="space-y-1 mt-2">
      <li>• Install plugins from named sources or custom marketplace URLs</li>
      <li>• Enable or disable individual plugins without uninstalling them</li>
      <li>• Update plugins to their latest versions</li>
      <li>• Add custom plugin marketplace sources (GitHub-hosted)</li>
    </ul>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Debug Console</h4>
    <p>
      A developer-facing log console that captures frontend events, errors, and debug output. Open
      it via <strong>Debug Console</strong> in the menu or press
      <kbd class="kbd">Ctrl+`</kbd>.
    </p>
    <p class="mt-2">
      Useful when troubleshooting unexpected behaviour or reporting issues. Filter by log level
      (info, warn, error, debug).
    </p>
  </div>

  <div>
    <h4 class="font-medium text-[var(--text-primary)] mb-2">Workspace Trust</h4>
    <p>
      When you connect to a working directory, Hikari scans it for potentially powerful
      configurations and may display a trust prompt before proceeding. This includes:
    </p>
    <ul class="space-y-1 mt-2">
      <li>• <strong>Hooks</strong> — shell commands that run automatically during sessions</li>
      <li>• <strong>MCP servers</strong> — local processes with system-level access</li>
      <li>• <strong>Custom slash commands</strong> — instructions that execute at invocation</li>
    </ul>
    <p class="mt-2">
      Review each item carefully. Click <strong>Trust &amp; Connect</strong> to proceed or
      <strong>Cancel</strong> to abort. Trusted workspaces remember your decision for future sessions.
    </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);
  }

  code.code {
    font-family: monospace;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    color: var(--text-primary);
  }
</style>