hikari-desktop/src/lib/components/ConfigSidebar.svelte

<script lang="ts">
  import {
    configStore,
    type HikariConfig,
    type Theme,
    applyFontSize,
    MIN_FONT_SIZE,
    MAX_FONT_SIZE,
    DEFAULT_FONT_SIZE,
  } from "$lib/stores/config";
  import { claudeStore } from "$lib/stores/claude";
  import { getCurrentWindow } from "@tauri-apps/api/window";

  let config: HikariConfig = $state({
    model: null,
    api_key: null,
    custom_instructions: null,
    mcp_servers_json: null,
    auto_granted_tools: [],
    theme: "dark",
    greeting_enabled: true,
    greeting_custom_prompt: null,
    notifications_enabled: true,
    notification_volume: 0.7,
    always_on_top: false,
    minimize_to_tray: false,
    update_checks_enabled: true,
    character_panel_width: null,
    font_size: 14,
    streamer_mode: false,
    streamer_hide_paths: false,
    compact_mode: false,
    profile_name: null,
    profile_avatar_path: null,
    profile_bio: null,
  });

  let isOpen = $state(false);
  let isSaving = $state(false);
  let saveError: string | null = $state(null);
  let newToolName = $state("");
  let showApiKey = $state(false);
  let grantedTools: string[] = $state([]);

  configStore.config.subscribe((c) => {
    config = { ...c };
  });

  configStore.isSidebarOpen.subscribe((open) => {
    isOpen = open;
  });

  configStore.saveError.subscribe((error) => {
    saveError = error;
  });

  claudeStore.grantedTools.subscribe((tools) => {
    grantedTools = Array.from(tools);
  });

  const availableModels = [
    { value: "", label: "Default (from ~/.claude)" },
    { value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4" },
    { value: "claude-opus-4-20250514", label: "Claude Opus 4" },
  ];

  const commonTools = [
    "Read",
    "Write",
    "Edit",
    "Bash",
    "Glob",
    "Grep",
    "WebFetch",
    "WebSearch",
    "Task",
  ];

  async function handleSave() {
    isSaving = true;
    saveError = null;
    try {
      await configStore.saveConfig(config);
      configStore.closeSidebar();
    } catch {
      // Error is handled by the store
    } finally {
      isSaving = false;
    }
  }

  async function handleThemeChange(theme: Theme) {
    config.theme = theme;
    await configStore.setTheme(theme);
  }

  function toggleTool(tool: string) {
    if (config.auto_granted_tools.includes(tool)) {
      config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
    } else {
      config.auto_granted_tools = [...config.auto_granted_tools, tool];
    }
  }

  function addCustomTool() {
    if (newToolName.trim() && !config.auto_granted_tools.includes(newToolName.trim())) {
      config.auto_granted_tools = [...config.auto_granted_tools, newToolName.trim()];
      newToolName = "";
    }
  }

  function removeTool(tool: string) {
    config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
  }

  function importFromSession() {
    config.auto_granted_tools = [...new Set([...config.auto_granted_tools, ...grantedTools])];
  }

  async function handleAlwaysOnTopChange(enabled: boolean) {
    config.always_on_top = enabled;
    const window = getCurrentWindow();
    await window.setAlwaysOnTop(enabled);
    await configStore.updateConfig({ always_on_top: enabled });
  }
</script>

<!-- Backdrop -->
{#if isOpen}
  <div
    class="fixed inset-0 bg-black/50 z-40 transition-opacity"
    onclick={configStore.closeSidebar}
    onkeydown={(e) => e.key === "Escape" && configStore.closeSidebar()}
    role="button"
    tabindex="-1"
    aria-label="Close sidebar"
  ></div>
{/if}

<!-- Sidebar -->
<aside
  class="fixed right-0 top-0 h-full w-96 bg-[var(--bg-secondary)] border-l border-[var(--border-color)] z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto {isOpen
    ? 'translate-x-0'
    : 'translate-x-full'}"
>
  <div class="p-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
      <button
        onclick={configStore.closeSidebar}
        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
        aria-label="Close settings"
      >
        <svg class="w-6 h-6" 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>

    {#if saveError}
      <div class="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-sm">
        {saveError}
      </div>
    {/if}

    <!-- Agent Settings Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Agent Settings
      </h3>

      <!-- Model Selection -->
      <div class="mb-4">
        <label for="model" class="block text-sm text-[var(--text-secondary)] mb-1">Model</label>
        <select
          id="model"
          bind:value={config.model}
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
        >
          {#each availableModels as model (model.value)}
            <option value={model.value}>{model.label}</option>
          {/each}
        </select>
      </div>

      <!-- API Key -->
      <div class="mb-4">
        <label for="api-key" class="block text-sm text-[var(--text-secondary)] mb-1">
          API Key <span class="text-[var(--text-tertiary)]">(optional override)</span>
          {#if config.streamer_mode}
            <span class="text-yellow-500 text-xs ml-2">🔒 Hidden (Streamer Mode)</span>
          {/if}
        </label>
        <div class="relative">
          {#if config.streamer_mode}
            <input
              id="api-key"
              type="password"
              value="••••••••••••••••••••••••"
              disabled
              class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-tertiary)] focus:outline-none cursor-not-allowed"
            />
          {:else}
            <input
              id="api-key"
              type={showApiKey ? "text" : "password"}
              bind:value={config.api_key}
              placeholder="Falls back to ~/.claude settings"
              class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
            />
            <button
              type="button"
              onclick={() => (showApiKey = !showApiKey)}
              class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
              aria-label={showApiKey ? "Hide API key" : "Show API key"}
            >
              {#if showApiKey}
                <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                  />
                </svg>
              {:else}
                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                  />
                </svg>
              {/if}
            </button>
          {/if}
        </div>
      </div>

      <!-- Custom Instructions -->
      <div class="mb-4">
        <label for="instructions" class="block text-sm text-[var(--text-secondary)] mb-1"
          >Custom Instructions</label
        >
        <textarea
          id="instructions"
          bind:value={config.custom_instructions}
          rows="4"
          placeholder="Additional instructions for the agent..."
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
        ></textarea>
      </div>
    </section>

    <!-- Greeting Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Greeting
      </h3>

      <!-- Enable/Disable Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.greeting_enabled}
            class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
          />
          <span class="text-sm text-[var(--text-primary)]">Send greeting on connect</span>
        </label>
        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
          Automatically greet you when a session starts with time-based messages
        </p>
      </div>

      <!-- Custom Greeting Prompt -->
      {#if config.greeting_enabled}
        <div class="mb-4">
          <label for="greeting-prompt" class="block text-sm text-[var(--text-secondary)] mb-1">
            Custom Greeting Prompt <span class="text-[var(--text-tertiary)]">(optional)</span>
          </label>
          <textarea
            id="greeting-prompt"
            bind:value={config.greeting_custom_prompt}
            rows="3"
            placeholder="Leave empty for time-based greetings, or customize how you'd like to be greeted..."
            class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
          ></textarea>
        </div>
      {/if}
    </section>

    <!-- MCP Servers Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        MCP Servers
      </h3>
      <div class="mb-2">
        <label for="mcp-config" class="block text-sm text-[var(--text-secondary)] mb-1">
          Server Configuration <span class="text-[var(--text-tertiary)]">(JSON)</span>
        </label>
        <textarea
          id="mcp-config"
          bind:value={config.mcp_servers_json}
          rows="6"
          placeholder={`{\n  "servers": {\n    "example": {\n      "command": "npx",\n      "args": ["-y", "@example/mcp-server"]\n    }\n  }\n}`}
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] font-mono text-sm focus:outline-none focus:border-[var(--accent-primary)] resize-none"
        ></textarea>
      </div>
    </section>

    <!-- Auto-Granted Tools Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Auto-Granted Tools
      </h3>
      <p class="text-xs text-[var(--text-tertiary)] mb-3">
        These tools will be pre-approved for every session (no permission prompts).
      </p>

      <!-- Common tools checkboxes -->
      <div class="grid grid-cols-2 gap-2 mb-3">
        {#each commonTools as tool (tool)}
          <label class="flex items-center gap-2 text-sm text-[var(--text-primary)] cursor-pointer">
            <input
              type="checkbox"
              checked={config.auto_granted_tools.includes(tool)}
              onchange={() => toggleTool(tool)}
              class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
            />
            {tool}
          </label>
        {/each}
      </div>

      <!-- Currently granted tools (with import) -->
      {#if grantedTools.length > 0}
        <div class="mb-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-[var(--text-tertiary)]">Session-granted tools:</span>
            <button
              onclick={importFromSession}
              class="text-xs text-[var(--accent-primary)] hover:text-[var(--accent-secondary)] transition-colors"
            >
              Import all
            </button>
          </div>
          <div class="flex flex-wrap gap-1">
            {#each grantedTools as tool (tool)}
              <span
                class="px-2 py-0.5 text-xs bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] rounded"
              >
                {tool}
              </span>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Custom tools list -->
      {#if config.auto_granted_tools.filter((t) => !commonTools.includes(t)).length > 0}
        <div class="mb-3">
          <span class="text-xs text-[var(--text-tertiary)] block mb-2">Custom tools:</span>
          <div class="flex flex-wrap gap-1">
            {#each config.auto_granted_tools.filter((t) => !commonTools.includes(t)) as tool (tool)}
              <span
                class="px-2 py-0.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded flex items-center gap-1"
              >
                {tool}
                <button
                  onclick={() => removeTool(tool)}
                  class="text-[var(--text-tertiary)] hover:text-red-400"
                  aria-label="Remove {tool}"
                >
                  ×
                </button>
              </span>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Add custom tool -->
      <div class="flex gap-2">
        <input
          type="text"
          bind:value={newToolName}
          placeholder="Add custom tool..."
          onkeydown={(e) => e.key === "Enter" && addCustomTool()}
          class="flex-1 px-3 py-1.5 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
        />
        <button
          onclick={addCustomTool}
          disabled={!newToolName.trim()}
          class="btn-trans-gradient px-3 py-1.5 text-sm rounded-lg"
        >
          Add
        </button>
      </div>
    </section>

    <!-- Appearance Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Appearance
      </h3>

      <!-- Theme Selection -->
      <div class="mb-4">
        <label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
        <div class="flex gap-2">
          <button
            onclick={() => handleThemeChange("dark")}
            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'dark'
              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
          >
            Dark
          </button>
          <button
            onclick={() => handleThemeChange("light")}
            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'light'
              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
          >
            Light
          </button>
          <button
            onclick={() => handleThemeChange("high-contrast")}
            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme ===
            'high-contrast'
              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
            title="High contrast mode for improved accessibility"
          >
            High Contrast
          </button>
        </div>
      </div>

      <!-- Font Size -->
      <div class="mb-4">
        <label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
          Terminal Font Size
        </label>
        <div class="flex items-center gap-3">
          <input
            id="font-size"
            type="range"
            bind:value={config.font_size}
            oninput={() => applyFontSize(config.font_size)}
            min={MIN_FONT_SIZE}
            max={MAX_FONT_SIZE}
            step="1"
            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
          />
          <span class="text-sm text-gray-300 w-12 text-right">{config.font_size}px</span>
          <button
            onclick={() => {
              config.font_size = DEFAULT_FONT_SIZE;
              applyFontSize(DEFAULT_FONT_SIZE);
            }}
            class="px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent-primary)] text-[var(--text-secondary)] transition-colors"
            title="Reset to default (14px)"
          >
            Reset
          </button>
        </div>
        <p class="text-xs text-[var(--text-tertiary)] mt-1">
          Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
        </p>
      </div>
    </section>

    <!-- Window Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Window
      </h3>

      <!-- Always on Top Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={config.always_on_top}
            onchange={(e) => handleAlwaysOnTopChange(e.currentTarget.checked)}
            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
          />
          <span class="text-sm text-[var(--text-primary)]">Always on top</span>
        </label>
        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
          Keep the window above other windows
        </p>
      </div>

      <!-- Minimize to Tray Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.minimize_to_tray}
            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
          />
          <span class="text-sm text-[var(--text-primary)]">Minimize to system tray</span>
        </label>
        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
          Hide to tray instead of closing when you click the X button
        </p>
      </div>

      <!-- Update Checks Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.update_checks_enabled}
            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
          />
          <span class="text-sm text-[var(--text-primary)]">Check for updates on startup</span>
        </label>
        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
          Notify when a new version is available
        </p>
      </div>
    </section>

    <!-- Privacy / Streamer Mode Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Privacy / Streamer Mode
      </h3>

      <!-- Streamer Mode Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.streamer_mode}
            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
          />
          <span class="text-sm text-[var(--text-primary)]">Enable streamer mode</span>
        </label>
        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
          Hide sensitive information like API keys when streaming (Ctrl+Shift+S to toggle)
        </p>
      </div>

      <!-- Hide Paths Toggle -->
      {#if config.streamer_mode}
        <div class="mb-4">
          <label class="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              bind:checked={config.streamer_hide_paths}
              class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
            />
            <span class="text-sm text-[var(--text-primary)]">Also hide file paths</span>
          </label>
          <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
            Mask directory paths (e.g., /home/user → /home/****)
          </p>
        </div>
      {/if}
    </section>

    <!-- Notifications Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Notifications
      </h3>

      <!-- Enable/Disable Notifications -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.notifications_enabled}
            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
          />
          <span class="text-sm text-[var(--text-primary)]">Enable sound notifications</span>
        </label>
      </div>

      <!-- Volume Control -->
      <div class="mb-4">
        <label for="notification-volume" class="block text-sm text-[var(--text-secondary)] mb-2">
          Notification Volume
        </label>
        <div class="flex items-center gap-3">
          <input
            id="notification-volume"
            type="range"
            bind:value={config.notification_volume}
            min="0"
            max="1"
            step="0.1"
            disabled={!config.notifications_enabled}
            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer disabled:opacity-50"
          />
          <span class="text-sm text-gray-300 w-12 text-right">
            {Math.round(config.notification_volume * 100)}%
          </span>
        </div>
      </div>

      <div class="text-xs text-[var(--text-tertiary)]">
        Sound notifications will play when I complete tasks, encounter errors, or need permissions.
      </div>
    </section>

    <!-- Save Button -->
    <div class="sticky bottom-0 pt-4 pb-2 bg-[var(--bg-secondary)]">
      <button
        onclick={handleSave}
        disabled={isSaving}
        class="btn-trans-gradient w-full py-3 font-medium rounded-lg"
      >
        {isSaving ? "Saving..." : "Save Settings"}
      </button>
    </div>
  </div>
</aside>

<style>
  /* Custom range input styling */
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }

  input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--text-tertiary);
    cursor: not-allowed;
  }

  input[type="range"]:disabled::-moz-range-thumb {
    background: var(--text-tertiary);
    cursor: not-allowed;
  }
</style>