From c37c530f8972bb5826fd25b375adcd13888ce849 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Tue, 20 Jan 2026 16:29:57 -0800
Subject: [PATCH] feat: add help panel

---
 src/lib/components/HelpPanel.svelte | 155 ++++++++++++++++++++++++++++
 src/lib/components/StatusBar.svelte |  20 ++++
 2 files changed, 175 insertions(+)
 create mode 100644 src/lib/components/HelpPanel.svelte

diff --git a/src/lib/components/HelpPanel.svelte b/src/lib/components/HelpPanel.svelte
new file mode 100644
index 0000000..bf7208e
--- /dev/null
+++ b/src/lib/components/HelpPanel.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+  interface Props {
+    onClose: () => void;
+  }
+
+  const { onClose }: Props = $props();
+
+  const sections = [
+    {
+      title: "Getting Started",
+      items: [
+        "Enter your Claude API key in Settings (gear icon)",
+        "Set your working directory and click Connect",
+        "Start chatting with Hikari - your AI assistant!"
+      ]
+    },
+    {
+      title: "Key Features",
+      items: [
+        "🗂️ File Management: Hikari can read, write, and edit files in your project",
+        "💻 Terminal Access: Execute commands and run scripts",
+        "🔍 Code Search: Find files and search through code",
+        "🌐 Web Access: Fetch information from the web",
+        "📊 MCP Servers: Connect to external tools via Model Context Protocol",
+        "📁 Multi-tab Support: Work on multiple conversations simultaneously"
+      ]
+    },
+    {
+      title: "Available Commands",
+      items: [
+        "Type naturally - Hikari understands context!",
+        "Ask to read, create, or modify files",
+        "Request code explanations or debugging help",
+        "Have Hikari run tests or build commands",
+        "Search for specific functions or patterns"
+      ]
+    },
+    {
+      title: "Tips & Tricks",
+      items: [
+        "💡 Use the stats panel to track your usage",
+        "🎯 Be specific about file paths and requirements",
+        "🔒 Grant tool permissions as needed for security",
+        "📌 Pin important conversations for quick access",
+        "🎨 Customize your theme and preferences in Settings"
+      ]
+    },
+    {
+      title: "Keyboard Shortcuts",
+      items: [
+        "Ctrl/Cmd + Enter: Send message",
+        "Ctrl/Cmd + K: Clear chat (when supported)",
+        "Escape: Close modals and panels"
+      ]
+    }
+  ];
+</script>
+
+<div
+  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+  onclick={onClose}
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => e.key === "Escape" && onClose()}
+>
+  <div
+    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"
+    onclick={(e) => e.stopPropagation()}
+    role="dialog"
+    aria-labelledby="help-title"
+  >
+    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
+      <h2 id="help-title" class="text-xl font-semibold text-gray-100">
+        How to Use Hikari Desktop
+      </h2>
+      <button
+        onclick={onClose}
+        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        aria-label="Close"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-6 space-y-6">
+      {#each sections as section}
+        <div>
+          <h3 class="font-medium text-gray-200 mb-3">{section.title}</h3>
+          <ul class="space-y-2 text-sm text-gray-400">
+            {#each section.items as item}
+              <li class="flex items-start">
+                <span class="text-[var(--accent-primary)] mr-2 mt-0.5">•</span>
+                <span>{item}</span>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+
+      <div class="pt-4 border-t border-[var(--border-color)]">
+        <p class="text-sm text-gray-500">
+          <strong>Need more help?</strong> Join our Discord community for support and updates!
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Ensure the panel appears above other content */
+  [role="dialog"] {
+    animation: slideIn 0.2s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  /* Custom scrollbar styling */
+  .overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: var(--border-color);
+    border-radius: 4px;
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-primary);
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index c387ea9..10c5d54 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -16,6 +16,7 @@
   import { onMount } from "svelte";
   import StatsDisplay from "./StatsDisplay.svelte";
   import AboutPanel from "./AboutPanel.svelte";
+  import HelpPanel from "./HelpPanel.svelte";
   import { achievementProgress } from "$lib/stores/achievements";
 
   const DISCORD_URL = "https://chat.nhcarrigan.com";
@@ -29,6 +30,7 @@
   let appVersion = $state("");
   let showStats = $state(false);
   let showAbout = $state(false);
+  let showHelp = $state(false);
   const progress = $derived($achievementProgress);
   let currentConfig: HikariConfig = $state({
     model: null,
@@ -269,6 +271,20 @@
         />
       </svg>
     </button>
+    <button
+      onclick={() => (showHelp = true)}
+      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
+      title="Help"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    </button>
     <button
       onclick={() => openUrl(DISCORD_URL)}
       class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
@@ -320,3 +336,7 @@
 {#if showAbout}
   <AboutPanel onClose={() => (showAbout = false)} />
 {/if}
+
+{#if showHelp}
+  <HelpPanel onClose={() => (showHelp = false)} />
+{/if}