feat: add chat modes and interrupt feature (#46)

### Explanation

_No response_

### Issue

Closes #40

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #46
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/lib/components/InputBar.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
-  import { claudeStore } from "$lib/stores/claude";
+  import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
   import { characterState } from "$lib/stores/character";
   import { handleNewUserMessage } from "$lib/notifications/rules";
+  import { setSkipNextGreeting } from "$lib/tauri";
+  import {
+    setShouldRestoreHistory,
+    setSavedHistory,
+    getShouldRestoreHistory,
+    getSavedHistory,
+    clearHistoryRestore,
+  } from "$lib/stores/historyRestore";
+  import MessageModeSelector from "$lib/components/MessageModeSelector.svelte";
+  import { getCurrentMode } from "$lib/stores/messageMode";
+  import { formatMessageWithMode } from "$lib/types/messageMode";
 
   let inputValue = $state("");
   let isSubmitting = $state(false);
   let isConnected = $state(false);
+  let isProcessing = $state(false);
 
   claudeStore.connectionStatus.subscribe((status) => {
     isConnected = status === "connected";
   });
 
+  isClaudeProcessing.subscribe((processing) => {
+    isProcessing = processing;
+  });
+
   async function handleSubmit(event: Event) {
     event.preventDefault();
 
@@ -21,14 +37,42 @@
     isSubmitting = true;
     inputValue = "";
 
+    // Apply mode prefix if needed
+    const currentMode = getCurrentMode();
+    const formattedMessage = formatMessageWithMode(message, currentMode);
+
+    // Check if we need to restore conversation history
+    let messageToSend = formattedMessage;
+    if (getShouldRestoreHistory()) {
+      const savedHistory = getSavedHistory();
+      console.log("Should restore history:", true);
+      console.log("Saved history:", savedHistory);
+
+      if (savedHistory) {
+        // Prepend the conversation history with a context message
+        messageToSend = `[Previous conversation context:]
+${savedHistory}
+
+[Continuing conversation after reconnection:]
+User: ${formattedMessage}`;
+
+        console.log("Message with history:", messageToSend);
+
+        // Clear the restoration flags
+        clearHistoryRestore();
+      }
+    } else {
+      console.log("Should restore history:", false);
+    }
+
     // Reset notification state for new user message
     handleNewUserMessage();
 
-    claudeStore.addLine("user", message);
+    claudeStore.addLine("user", formattedMessage);
     characterState.setState("thinking");
 
     try {
-      await invoke("send_prompt", { message });
+      await invoke("send_prompt", { message: messageToSend });
     } catch (error) {
       console.error("Failed to send prompt:", error);
       claudeStore.addLine("error", `Failed to send: ${error}`);
@@ -38,6 +82,54 @@
     }
   }
 
+  async function handleInterrupt() {
+    // Save the conversation history FIRST before anything else
+    const history = claudeStore.getConversationHistory();
+    console.log("Saving conversation history:", history);
+
+    if (history) {
+      setSavedHistory(history);
+      setShouldRestoreHistory(true);
+      console.log("History saved and restoration flag set");
+    } else {
+      console.log("No history to save");
+    }
+
+    try {
+      await invoke("interrupt_claude");
+      claudeStore.addLine("system", "Process interrupted - reconnecting...");
+      characterState.setState("idle");
+
+      // Show connecting status while we reconnect
+      claudeStore.setConnectionStatus("connecting");
+
+      // Auto-reconnect after a brief delay
+      setTimeout(async () => {
+        try {
+          // Get current working directory before reconnecting
+          const workingDir = await invoke<string>("get_working_directory");
+
+          // Set the flag to skip greeting on next connection
+          setSkipNextGreeting(true);
+
+          // Reconnect to Claude
+          await invoke("start_claude", {
+            options: {
+              working_dir: workingDir,
+            },
+          });
+        } catch (reconnectError) {
+          console.error("Failed to auto-reconnect:", reconnectError);
+          claudeStore.addLine("error", `Failed to reconnect: ${reconnectError}`);
+          claudeStore.addLine("system", "Please manually reconnect to continue");
+        }
+      }, 500); // Brief delay to ensure process is fully terminated
+    } catch (error) {
+      console.error("Failed to interrupt:", error);
+      claudeStore.addLine("error", `Failed to interrupt: ${error}`);
+    }
+  }
+
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === "Enter" && !event.shiftKey) {
       handleSubmit(event);
@@ -45,34 +137,73 @@
   }
 </script>
 
-<form onsubmit={handleSubmit} class="input-bar flex gap-3 items-end">
-  <div class="flex-1 relative">
-    <textarea
-      bind:value={inputValue}
-      onkeydown={handleKeyDown}
-      placeholder={isConnected ? "Ask Hikari anything..." : "Connect to Claude first..."}
-      disabled={!isConnected || isSubmitting}
-      rows={1}
-      class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
+<form onsubmit={handleSubmit} class="input-bar">
+  <div class="input-controls flex gap-2 mb-2">
+    <MessageModeSelector />
+  </div>
+
+  <div class="input-row flex gap-3 items-end">
+    <div class="flex-1 relative">
+      <textarea
+        bind:value={inputValue}
+        onkeydown={handleKeyDown}
+        placeholder={isConnected ? "Ask Hikari anything..." : "Connect to Claude first..."}
+        disabled={!isConnected || isSubmitting}
+        rows={1}
+        class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
              rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
              focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]
              disabled:opacity-50 disabled:cursor-not-allowed
              transition-all duration-200"
-    ></textarea>
-  </div>
+      ></textarea>
+    </div>
 
-  <button
-    type="submit"
-    disabled={!isConnected || isSubmitting || !inputValue.trim()}
-    class="px-6 py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
-           text-white font-medium rounded-lg
-           disabled:opacity-50 disabled:cursor-not-allowed
-           transition-all duration-200 transform hover:scale-105 active:scale-95"
-  >
-    {#if isSubmitting}
-      <span class="inline-block animate-spin">⏳</span>
+    {#if isProcessing}
+      <button
+        type="button"
+        onclick={handleInterrupt}
+        class="px-6 py-3 bg-red-600 hover:bg-red-700
+             text-white font-medium rounded-lg
+             transition-all duration-200 transform hover:scale-105 active:scale-95"
+        title="Interrupt the current response (Ctrl+C)"
+      >
+        <span class="font-bold">■</span> Stop
+      </button>
     {:else}
-      Send
+      <button
+        type="submit"
+        disabled={!isConnected || isSubmitting || !inputValue.trim()}
+        class="px-6 py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
+             text-white font-medium rounded-lg
+             disabled:opacity-50 disabled:cursor-not-allowed
+             transition-all duration-200 transform hover:scale-105 active:scale-95"
+      >
+        {#if isSubmitting}
+          <span class="inline-block animate-spin">⏳</span>
+        {:else}
+          Send
+        {/if}
+      </button>
     {/if}
-  </button>
+  </div>
 </form>
+
+<style>
+  .input-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .input-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .input-row {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+  }
+</style>

src/lib/components/MessageModeSelector.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { MESSAGE_MODES, type MessageMode } from "$lib/types/messageMode";
+  import { messageMode } from "$lib/stores/messageMode";
+
+  let currentMode = $state("chat");
+  let isOpen = $state(false);
+
+  messageMode.subscribe((mode) => {
+    currentMode = mode;
+  });
+
+  let selectedMode = $derived(MESSAGE_MODES.find((m) => m.id === currentMode) || MESSAGE_MODES[0]);
+
+  function selectMode(mode: MessageMode) {
+    messageMode.set(mode.id);
+    isOpen = false;
+  }
+
+  function toggleDropdown(event: MouseEvent) {
+    event.stopPropagation();
+    isOpen = !isOpen;
+  }
+
+  // Close dropdown when clicking outside
+  function handleClickOutside() {
+    if (isOpen) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+<div class="mode-selector-container">
+  <button
+    class="mode-selector-button"
+    onclick={toggleDropdown}
+    title={`Current mode: ${selectedMode.name} - ${selectedMode.description}`}
+  >
+    <span class="mode-icon">{selectedMode.icon}</span>
+    <span class="mode-name">{selectedMode.name}</span>
+    <svg class="dropdown-arrow" class:open={isOpen} width="12" height="12" viewBox="0 0 12 12">
+      <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" fill="none" />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div class="dropdown-menu">
+      {#each MESSAGE_MODES as mode (mode.id)}
+        <button
+          class="dropdown-item"
+          class:active={mode.id === currentMode}
+          onclick={() => selectMode(mode)}
+        >
+          <span class="mode-icon">{mode.icon}</span>
+          <div class="mode-info">
+            <div class="mode-name">{mode.name}</div>
+            <div class="mode-description">{mode.description}</div>
+          </div>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .mode-selector-container {
+    position: relative;
+  }
+
+  .mode-selector-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .mode-selector-button:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent-primary);
+  }
+
+  .mode-icon {
+    font-size: 16px;
+  }
+
+  .mode-name {
+    font-weight: 500;
+  }
+
+  .dropdown-arrow {
+    margin-left: 4px;
+    transition: transform 0.2s;
+  }
+
+  .dropdown-arrow.open {
+    transform: rotate(180deg);
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 0;
+    min-width: 280px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 0.2s;
+    text-align: left;
+  }
+
+  .dropdown-item:hover {
+    background: var(--bg-hover);
+  }
+
+  .dropdown-item.active {
+    background: var(--accent-primary);
+    color: white;
+  }
+
+  .mode-info {
+    flex: 1;
+  }
+
+  .dropdown-item .mode-name {
+    font-weight: 500;
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  .mode-description {
+    font-size: 12px;
+    opacity: 0.7;
+  }
+</style>