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

<script lang="ts">
  interface Props {
    onToggleAchievements?: () => void;
    onToggleCompact?: () => void;
  }

  const { onToggleAchievements = () => {}, onToggleCompact = () => {} }: Props = $props();

  import { invoke } from "@tauri-apps/api/core";
  import { getVersion } from "@tauri-apps/api/app";
  import { open } from "@tauri-apps/plugin-dialog";
  import { get } from "svelte/store";
  import { claudeStore } from "$lib/stores/claude";
  import { configStore, type HikariConfig, isStreamerMode } from "$lib/stores/config";
  import type { ConnectionStatus } from "$lib/types/messages";
  import { onMount } from "svelte";
  import { PROJECT_CONTEXT_SYSTEM_ADDENDUM } from "$lib/stores/projectContext";
  import { conversationsStore } from "$lib/stores/conversations";
  import {
    generateContextInjection,
    createSummary,
    sanitizeForJson,
  } from "$lib/utils/conversationUtils";
  import { updateDiscordRpc, setSkipNextGreeting } from "$lib/tauri";
  import WorkspaceTrustModal from "./WorkspaceTrustModal.svelte";
  import type { WorkspaceHookInfo } from "$lib/types/messages";
  import NavMenu from "./NavMenu.svelte";
  import { taskLoopStore } from "$lib/stores/taskLoop";

  let connectionStatus: ConnectionStatus = $state("disconnected");
  let workingDirectory = $state("");
  let worktreeInfo: import("$lib/types/worktree").WorktreeInfo | null = $state(null);
  let selectedDirectory = $state("/home/naomi");
  let isConnecting = $state(false);
  let grantedToolsList: string[] = $state([]);
  let appVersion = $state("");
  let isSummarising = $state(false);
  let showWorkspaceTrust = $state(false);
  let pendingHookInfo: WorkspaceHookInfo | null = $state(null);
  let currentConfig: 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.5,
    always_on_top: 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,
    custom_theme_colors: {
      bg_primary: null,
      bg_secondary: null,
      bg_terminal: null,
      accent_primary: null,
      accent_secondary: null,
      text_primary: null,
      text_secondary: null,
      border_color: null,
    },
    budget_enabled: false,
    session_token_budget: null,
    session_cost_budget: null,
    budget_action: "warn",
    budget_warning_threshold: 0.8,
    discord_rpc_enabled: true,
    show_thinking_blocks: true,
    use_worktree: false,
    disable_1m_context: false,
    max_output_tokens: null,
    trusted_workspaces: [],
    background_image_path: null,
    background_image_opacity: 0.3,
    custom_font_path: null,
    custom_font_family: null,
    custom_ui_font_path: null,
    custom_ui_font_family: null,
    task_loop_auto_commit: false,
    task_loop_commit_prefix: "feat",
    task_loop_include_summary: false,
    disable_cron: false,
    include_git_instructions: true,
    enable_claudeai_mcp_servers: true,
    auto_memory_directory: null,
    model_overrides: null,
  });

  let streamerModeActive = $state(false);
  isStreamerMode.subscribe((value) => {
    streamerModeActive = value;
  });

  const loopStatus = $derived(taskLoopStore.loopStatus);
  const loopTasks = $derived(taskLoopStore.tasks);
  const loopCurrentIndex = $derived(taskLoopStore.currentTaskIndex);
  const loopCompletedCount = $derived(
    $loopTasks.filter((t) => t.status === "completed" || t.status === "failed").length
  );
  const loopTotalCount = $derived($loopTasks.length);

  onMount(async () => {
    appVersion = await getVersion();
  });

  claudeStore.connectionStatus.subscribe((status) => {
    connectionStatus = status;
    isConnecting = status === "connecting";
  });

  claudeStore.currentWorkingDirectory.subscribe((dir) => {
    workingDirectory = dir;
  });

  claudeStore.worktreeInfo.subscribe((info) => {
    worktreeInfo = info;
  });

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

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

  async function handleBrowse() {
    try {
      const selected = await open({
        directory: true,
        multiple: false,
        defaultPath: selectedDirectory,
        title: "Select Working Directory",
      });
      if (selected && typeof selected === "string") {
        selectedDirectory = selected;
      }
    } catch (error) {
      console.error("Failed to open directory picker:", error);
    }
  }

  async function doConnect(targetDir: string) {
    // Combine session-granted tools with config auto-granted tools
    const allAllowedTools = [
      ...new Set([...grantedToolsList, ...currentConfig.auto_granted_tools]),
    ];

    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("start_claude", {
        conversationId,
        options: {
          working_dir: targetDir,
          model: currentConfig.model || null,
          api_key: currentConfig.api_key || null,
          custom_instructions:
            (currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
          mcp_servers_json: currentConfig.mcp_servers_json || null,
          allowed_tools: allAllowedTools,
          use_worktree: currentConfig.use_worktree ?? false,
          disable_1m_context: currentConfig.disable_1m_context ?? false,
          max_output_tokens: currentConfig.max_output_tokens ?? null,
          include_git_instructions: currentConfig.include_git_instructions ?? true,
          enable_claudeai_mcp_servers: currentConfig.enable_claudeai_mcp_servers ?? true,
          auto_memory_directory: currentConfig.auto_memory_directory || null,
          model_overrides: currentConfig.model_overrides || null,
        },
      });

      // Update Discord RPC when a new session starts
      const activeConversation = get(conversationsStore.activeConversation);
      if (activeConversation) {
        await updateDiscordRpc(
          activeConversation.name,
          currentConfig.model || "claude",
          activeConversation.startedAt
        );
      }
    } catch (error) {
      console.error("Failed to start Claude:", error);
      claudeStore.addLine("error", `Connection failed: ${error}`);
    }
  }

  async function handleConnect() {
    if (isConnecting || connectionStatus === "connected") return;

    const targetDir = selectedDirectory || "/home/naomi";

    if (currentConfig.trusted_workspaces?.includes(targetDir)) {
      await doConnect(targetDir);
      return;
    }

    try {
      const hookInfo = await invoke<WorkspaceHookInfo>("check_workspace_hooks", {
        workingDir: targetDir,
      });

      if (hookInfo.has_concerns) {
        pendingHookInfo = hookInfo;
        showWorkspaceTrust = true;
        return;
      }
    } catch (error) {
      // Fail open: if we can't check hooks, proceed with connection
      console.error("Failed to check workspace hooks:", error);
    }

    await doConnect(targetDir);
  }

  async function handleTrustAndConnect() {
    showWorkspaceTrust = false;
    const targetDir = selectedDirectory || "/home/naomi";
    pendingHookInfo = null;
    const alreadyTrusted = currentConfig.trusted_workspaces?.includes(targetDir) ?? false;
    if (!alreadyTrusted) {
      await configStore.updateConfig({
        trusted_workspaces: [...(currentConfig.trusted_workspaces ?? []), targetDir],
      });
    }
    doConnect(targetDir);
  }

  function handleCancelConnect() {
    showWorkspaceTrust = false;
    pendingHookInfo = null;
  }

  async function handleDisconnect() {
    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("stop_claude", { conversationId });

      // Clear granted permissions when user explicitly disconnects
      claudeStore.revokeAllTools();
    } catch (error) {
      console.error("Failed to stop Claude:", error);
    }
  }

  function getStatusColor(): string {
    switch (connectionStatus) {
      case "connected":
        return "bg-green-500";
      case "connecting":
        return "bg-yellow-500 animate-pulse";
      case "error":
        return "bg-red-500";
      default:
        return "bg-gray-500";
    }
  }

  function getStatusText(): string {
    switch (connectionStatus) {
      case "connected":
        return "Connected";
      case "connecting":
        return "Connecting...";
      case "error":
        return "Error";
      default:
        return "Disconnected";
    }
  }

  async function handleCompactConversation() {
    const activeId = get(conversationsStore.activeConversationId);
    if (!activeId) return;

    isSummarising = true;

    try {
      const conversationContent = conversationsStore.getConversationForSummary(activeId);
      const messageCount =
        get(conversationsStore.activeConversation)?.terminalLines.filter(
          (l) => l.type === "user" || l.type === "assistant"
        ).length || 0;
      const tokenEstimate = conversationsStore.estimateTokenCount(activeId);

      // Create a summary from the conversation content (truncate if too long)
      // Apply sanitization early to handle any problematic escape sequences
      const sanitizedContent = sanitizeForJson(conversationContent);
      const summaryContent =
        sanitizedContent.length > 4000
          ? `${sanitizedContent.slice(0, 4000)}\n\n[Truncated for length - original had ${messageCount} messages]`
          : sanitizedContent;

      // Step 1: Disconnect from Claude to reset context
      // Prevent stats reset on reconnection
      setSkipNextGreeting(true);

      if (connectionStatus === "connected") {
        await invoke("stop_claude", { conversationId: activeId });
      }

      // Step 2: Clear messages and store summary
      conversationsStore.compactWithSummary(activeId, summaryContent, messageCount, tokenEstimate);

      // Step 3: Reconnect to Claude with fresh context
      const allAllowedTools = [
        ...(currentConfig.auto_granted_tools || []),
        ...Array.from(get(claudeStore.grantedTools)),
      ];

      await invoke("start_claude", {
        conversationId: activeId,
        options: {
          working_dir: workingDirectory || selectedDirectory,
          model: currentConfig.model || null,
          api_key: currentConfig.api_key || null,
          custom_instructions:
            (currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
          mcp_servers_json: currentConfig.mcp_servers_json || null,
          allowed_tools: allAllowedTools,
          use_worktree: currentConfig.use_worktree ?? false,
          disable_1m_context: currentConfig.disable_1m_context ?? false,
          max_output_tokens: currentConfig.max_output_tokens ?? null,
          include_git_instructions: currentConfig.include_git_instructions ?? true,
          enable_claudeai_mcp_servers: currentConfig.enable_claudeai_mcp_servers ?? true,
          auto_memory_directory: currentConfig.auto_memory_directory || null,
          model_overrides: currentConfig.model_overrides || null,
        },
      });

      // Step 4: Send the context summary to Claude as the first message
      const contextPrompt = generateContextInjection(
        createSummary(summaryContent, messageCount, tokenEstimate)
      );

      await invoke("send_prompt", {
        conversationId: activeId,
        message: contextPrompt,
      });

      claudeStore.addLine(
        "system",
        "Conversation compacted. Context from previous session has been provided to Claude."
      );
    } catch (error) {
      console.error("Failed to compact conversation:", error);
      claudeStore.addLine("error", `Failed to compact conversation: ${error}`);
    } finally {
      isSummarising = false;
    }
  }

  async function handleStartFreshWithContext() {
    const activeId = get(conversationsStore.activeConversationId);
    if (!activeId) return;

    const conversationContent = conversationsStore.getConversationForSummary(activeId);
    const messageCount =
      get(conversationsStore.activeConversation)?.terminalLines.filter(
        (l) => l.type === "user" || l.type === "assistant"
      ).length || 0;
    const tokenEstimate = conversationsStore.estimateTokenCount(activeId);

    const summary = createSummary(
      `This is a continuation of a previous conversation. Here's what was discussed:\n\n${conversationContent.slice(0, 4000)}${conversationContent.length > 4000 ? "\n\n[Truncated for length...]" : ""}`,
      messageCount,
      tokenEstimate
    );

    const newConvId = conversationsStore.createConversation("Fresh Start");

    conversationsStore.setSummary(newConvId, summary);

    // Context injection is generated but the actual injection happens via the summary
    generateContextInjection(summary);
    claudeStore.addLine("system", "Started fresh conversation with context from previous session.");
    claudeStore.addLine(
      "system",
      `Previous session had ${messageCount} messages (~${tokenEstimate.toLocaleString()} tokens).`
    );
  }
</script>

<div
  class="status-bar flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
>
  <div class="flex items-center gap-4">
    <div class="flex items-center gap-2">
      <div class="w-2.5 h-2.5 rounded-full {getStatusColor()}"></div>
      <span class="text-sm text-gray-300">{getStatusText()}</span>
    </div>

    {#if connectionStatus === "connected"}
      {#if workingDirectory}
        <div class="text-sm text-gray-500">
          <span class="text-gray-600">cwd:</span>
          {workingDirectory}
        </div>
      {/if}
      {#if worktreeInfo}
        <div
          class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 text-xs"
          title="Worktree: {worktreeInfo.name} | Base: {worktreeInfo.original_repo_directory}"
        >
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 10V3L4 14h7v7l9-11h-7z"
            />
          </svg>
          {worktreeInfo.branch}
        </div>
      {/if}
    {:else}
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-600">cwd:</span>
        <input
          type="text"
          bind:value={selectedDirectory}
          disabled={isConnecting}
          class="px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-md text-gray-300 w-64 focus:outline-none focus:border-[var(--accent-primary)] disabled:opacity-50"
          placeholder="/path/to/project"
        />
        <button
          onclick={handleBrowse}
          disabled={isConnecting}
          class="px-2 py-1 text-sm bg-[var(--bg-primary)] hover:bg-[var(--bg-hover)] border border-[var(--border-color)] text-gray-400 rounded-md transition-colors disabled:opacity-50"
          title="Browse..."
        >
          ...
        </button>
      </div>
    {/if}
  </div>

  <div class="flex items-center gap-2">
    {#if streamerModeActive}
      <div
        class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shrink-0"
        title="Streamer mode active (Ctrl+Shift+S to toggle)"
      ></div>
    {/if}

    {#if $loopStatus === "running" || $loopStatus === "paused"}
      <span
        class="text-xs px-2 py-0.5 rounded-full border shrink-0 {$loopStatus === 'running'
          ? 'bg-blue-500/20 text-blue-400 border-blue-500/30 animate-pulse'
          : 'bg-amber-500/20 text-amber-400 border-amber-500/30'}"
        title="Task loop {$loopStatus}"
      >
        Loop {$loopStatus === "running" ? "▶" : "⏸"}
        {loopCompletedCount +
          ($loopStatus === "running" && $loopCurrentIndex >= 0 ? 1 : 0)}/{loopTotalCount}
      </span>
    {/if}

    <NavMenu
      {connectionStatus}
      {workingDirectory}
      {selectedDirectory}
      {isSummarising}
      {onToggleCompact}
      {onToggleAchievements}
      onCompactConversation={handleCompactConversation}
      onStartFreshWithContext={handleStartFreshWithContext}
    />

    {#if appVersion}
      <span class="text-xs text-gray-600">v{appVersion}</span>
    {/if}

    {#if connectionStatus === "connected"}
      <button
        onclick={handleDisconnect}
        class="px-3 py-1 text-sm bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-md transition-colors"
      >
        Disconnect
      </button>
    {:else}
      <button
        onclick={handleConnect}
        disabled={isConnecting}
        class="px-3 py-1 text-sm bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-md transition-colors disabled:opacity-50"
      >
        {isConnecting ? "Connecting..." : "Connect"}
      </button>
    {/if}
  </div>
</div>

{#if showWorkspaceTrust && pendingHookInfo}
  <WorkspaceTrustModal
    hookInfo={pendingHookInfo}
    onTrust={handleTrustAndConnect}
    onCancel={handleCancelConnect}
  />
{/if}

<style>
  /* Responsive status bar styling */
  .status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Make all buttons shrink but not grow */
  .status-bar button {
    flex-shrink: 0;
  }

  /* Stack left and right sections on very small screens */
  @media (max-width: 768px) {
    .status-bar {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
</style>