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-tauri/src/commands.rs

@@ -25,6 +25,12 @@ pub async fn stop_claude(app: AppHandle, bridge: State<'_, SharedBridge>) -> Res
     Ok(())
 }
 
+#[tauri::command]
+pub async fn interrupt_claude(app: AppHandle, bridge: State<'_, SharedBridge>) -> Result<(), String> {
+    let mut bridge = bridge.lock();
+    bridge.interrupt(&app)
+}
+
 #[tauri::command]
 pub async fn send_prompt(bridge: State<'_, SharedBridge>, message: String) -> Result<(), String> {
     let mut bridge = bridge.lock();

src-tauri/src/config.rs

@@ -19,6 +19,9 @@ pub struct ClaudeStartOptions {
 
     #[serde(default)]
     pub allowed_tools: Vec<String>,
+
+    #[serde(default)]
+    pub skip_greeting: bool,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]

src-tauri/src/lib.rs

@@ -32,6 +32,7 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             start_claude,
             stop_claude,
+            interrupt_claude,
             send_prompt,
             is_claude_running,
             get_working_directory,

src-tauri/src/wsl_bridge.rs

@@ -332,6 +332,30 @@ impl WslBridge {
         Ok(())
     }
 
+    pub fn interrupt(&mut self, app: &AppHandle) -> Result<(), String> {
+        // Due to persistent bug in Claude Code where ESC/Ctrl+C doesn't work,
+        // we have to kill the process. This is the only reliable way to stop it.
+        // See: https://github.com/anthropics/claude-code/issues/3455
+        if let Some(mut process) = self.process.take() {
+            // Kill the process immediately
+            let _ = process.kill();
+            let _ = process.wait();
+
+            // Clear stdin
+            self.stdin = None;
+
+            // Keep session_id and working directory for user reference
+            // The user will see what session was interrupted
+
+            // Emit disconnected status
+            emit_connection_status(app, ConnectionStatus::Disconnected);
+
+            Ok(())
+        } else {
+            Err("No active process to interrupt".to_string())
+        }
+    }
+
     pub fn stop(&mut self, app: &AppHandle) {
         if let Some(mut process) = self.process.take() {
             let _ = process.kill();

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>

src/lib/stores/claude.ts

@@ -1,5 +1,6 @@
 import { writable, derived } from "svelte/store";
 import type { ConnectionStatus, PermissionRequest } from "$lib/types/messages";
+import { characterState } from "$lib/stores/character";
 
 export interface TerminalLine {
   id: string;
@@ -18,6 +19,8 @@ function createClaudeStore() {
   const isProcessing = writable<boolean>(false);
   const grantedTools = writable<Set<string>>(new Set());
   const pendingRetryMessage = writable<string | null>(null);
+  const shouldRestoreHistory = writable<boolean>(false);
+  const savedConversationHistory = writable<string | null>(null);
 
   let lineIdCounter = 0;
 
@@ -34,6 +37,8 @@ function createClaudeStore() {
     isProcessing: { subscribe: isProcessing.subscribe },
     grantedTools: { subscribe: grantedTools.subscribe },
     pendingRetryMessage: { subscribe: pendingRetryMessage.subscribe },
+    shouldRestoreHistory: { subscribe: shouldRestoreHistory.subscribe },
+    savedConversationHistory: { subscribe: savedConversationHistory.subscribe },
 
     setConnectionStatus: (status: ConnectionStatus) => connectionStatus.set(status),
     setSessionId: (id: string | null) => sessionId.set(id),
@@ -106,6 +111,21 @@ function createClaudeStore() {
 
     setPendingRetryMessage: (message: string | null) => pendingRetryMessage.set(message),
 
+    setShouldRestoreHistory: (should: boolean) => shouldRestoreHistory.set(should),
+    setSavedConversationHistory: (history: string | null) => savedConversationHistory.set(history),
+
+    getShouldRestoreHistory: (): boolean => {
+      let should = false;
+      shouldRestoreHistory.subscribe((s) => (should = s))();
+      return should;
+    },
+
+    getSavedConversationHistory: (): string | null => {
+      let history: string | null = null;
+      savedConversationHistory.subscribe((h) => (history = h))();
+      return history;
+    },
+
     reset: () => {
       connectionStatus.set("disconnected");
       sessionId.set(null);
@@ -115,6 +135,8 @@ function createClaudeStore() {
       isProcessing.set(false);
       grantedTools.set(new Set());
       pendingRetryMessage.set(null);
+      shouldRestoreHistory.set(false);
+      savedConversationHistory.set(null);
     },
   };
 }
@@ -125,3 +147,15 @@ export const hasPermissionPending = derived(
   claudeStore.pendingPermission,
   ($permission) => $permission !== null
 );
+
+// Derived store to check if Claude is currently processing (can be interrupted)
+export const isClaudeProcessing = derived(
+  [claudeStore.connectionStatus, characterState],
+  ([$connectionStatus, $characterState]) => {
+    // Must be connected and in one of the processing states
+    return (
+      $connectionStatus === "connected" &&
+      ["thinking", "typing", "searching", "coding", "mcp"].includes($characterState)
+    );
+  }
+);

src/lib/stores/historyRestore.ts

@@ -0,0 +1,29 @@
+// Separate module for history restoration to ensure persistence across reconnects
+let shouldRestore = false;
+let savedHistory: string | null = null;
+
+export function setShouldRestoreHistory(should: boolean) {
+  shouldRestore = should;
+  console.log("Setting shouldRestoreHistory to:", should);
+}
+
+export function setSavedHistory(history: string | null) {
+  savedHistory = history;
+  console.log("Setting savedHistory, length:", history?.length || 0);
+}
+
+export function getShouldRestoreHistory(): boolean {
+  console.log("Getting shouldRestoreHistory:", shouldRestore);
+  return shouldRestore;
+}
+
+export function getSavedHistory(): string | null {
+  console.log("Getting savedHistory, length:", savedHistory?.length || 0);
+  return savedHistory;
+}
+
+export function clearHistoryRestore() {
+  console.log("Clearing history restore flags");
+  shouldRestore = false;
+  savedHistory = null;
+}

src/lib/stores/messageMode.ts

@@ -0,0 +1,20 @@
+import { writable } from "svelte/store";
+
+// Default to chat mode
+const messageModeStore = writable<string>("chat");
+
+export const messageMode = {
+  subscribe: messageModeStore.subscribe,
+  set: (mode: string) => {
+    console.log("Setting message mode to:", mode);
+    messageModeStore.set(mode);
+  },
+  reset: () => messageModeStore.set("chat"),
+};
+
+// Helper to get current mode
+export function getCurrentMode(): string {
+  let currentMode = "chat";
+  messageMode.subscribe((mode) => (currentMode = mode))();
+  return currentMode;
+}

src/lib/tauri.ts

@@ -21,6 +21,11 @@ interface StateChangePayload {
 
 let hasConnectedThisSession = false;
 let unlisteners: Array<() => void> = [];
+let skipNextGreeting = false;
+
+export function setSkipNextGreeting(skip: boolean) {
+  skipNextGreeting = skip;
+}
 
 function getTimeOfDay(): string {
   const hour = new Date().getHours();
@@ -42,6 +47,12 @@ function generateGreetingPrompt(): string {
 }
 
 async function sendGreeting() {
+  // Check if we should skip this greeting
+  if (skipNextGreeting) {
+    skipNextGreeting = false; // Reset the flag
+    return;
+  }
+
   const config = configStore.getConfig();
 
   if (!config.greeting_enabled) {
@@ -100,8 +111,16 @@ export async function initializeTauriListeners() {
         await sendGreeting();
       }
     } else if (status === "disconnected") {
-      hasConnectedThisSession = false;
-      claudeStore.addLine("system", "Disconnected from Claude Code");
+      // Only reset session flag if we're not about to reconnect
+      if (!skipNextGreeting) {
+        hasConnectedThisSession = false;
+      }
+
+      // Don't add system message if we're about to reconnect
+      if (!skipNextGreeting) {
+        claudeStore.addLine("system", "Disconnected from Claude Code");
+      }
+
       characterState.setState("idle");
     } else if (status === "error") {
       hasConnectedThisSession = false;

src/lib/types/messageMode.ts

@@ -0,0 +1,69 @@
+export interface MessageMode {
+  id: string;
+  name: string;
+  description: string;
+  prefix?: string;
+  icon: string;
+}
+
+export const MESSAGE_MODES: MessageMode[] = [
+  {
+    id: "chat",
+    name: "Chat",
+    description: "Normal conversation mode",
+    icon: "💬",
+  },
+  {
+    id: "architect",
+    name: "Architect",
+    description: "High-level design and architecture planning",
+    prefix: "[Architect Mode] ",
+    icon: "🏗️",
+  },
+  {
+    id: "code",
+    name: "Code",
+    description: "Focused on writing and editing code",
+    prefix: "[Code Mode] ",
+    icon: "💻",
+  },
+  {
+    id: "debug",
+    name: "Debug",
+    description: "Help with debugging and troubleshooting",
+    prefix: "[Debug Mode] ",
+    icon: "🐛",
+  },
+  {
+    id: "ask",
+    name: "Ask",
+    description: "Technical questions and explanations",
+    prefix: "[Ask Mode] ",
+    icon: "❓",
+  },
+  {
+    id: "review",
+    name: "Review",
+    description: "Code review and feedback",
+    prefix: "[Review Mode] ",
+    icon: "👀",
+  },
+];
+
+export function getMessageMode(id: string): MessageMode | undefined {
+  return MESSAGE_MODES.find((mode) => mode.id === id);
+}
+
+export function formatMessageWithMode(message: string, modeId: string): string {
+  const mode = getMessageMode(modeId);
+  if (!mode || !mode.prefix) {
+    return message;
+  }
+
+  // Don't double-prefix if the message already starts with the prefix
+  if (message.startsWith(mode.prefix)) {
+    return message;
+  }
+
+  return mode.prefix + message;
+}