feat: implement modes

src/lib/components/InputBar.svelte

@@ -11,6 +11,9 @@
     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);
@@ -34,8 +37,12 @@
     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 = message;
+    let messageToSend = formattedMessage;
     if (getShouldRestoreHistory()) {
       const savedHistory = getSavedHistory();
       console.log("Should restore history:", true);
@@ -47,7 +54,7 @@
 ${savedHistory}
 
 [Continuing conversation after reconnection:]
-User: ${message}`;
+User: ${formattedMessage}`;
 
         console.log("Message with history:", messageToSend);
 
@@ -61,7 +68,7 @@ User: ${message}`;
     // Reset notification state for new user message
     handleNewUserMessage();
 
-    claudeStore.addLine("user", message);
+    claudeStore.addLine("user", formattedMessage);
     characterState.setState("thinking");
 
     try {
@@ -131,8 +138,13 @@ User: ${message}`;
   }
 </script>
 
-<form onsubmit={handleSubmit} class="input-bar flex gap-3 items-end">
+<form onsubmit={handleSubmit} class="input-bar">
-  <div class="flex-1 relative">
+  <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}
@@ -174,4 +186,25 @@ User: ${message}`;
       {/if}
     </button>
   {/if}
+  </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(event: MouseEvent) {
+    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}
+        <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/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/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;
+}