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/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>