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

<script lang="ts">
  import { invoke } from "@tauri-apps/api/core";
  import { open } from "@tauri-apps/plugin-dialog";
  import { readImage } from "@tauri-apps/plugin-clipboard-manager";
  import { get } from "svelte/store";
  import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
  import { characterState } from "$lib/stores/character";
  import { handleNewUserMessage } from "$lib/notifications/rules";
  import { setSkipNextGreeting, updateDiscordRpc } from "$lib/tauri";
  import { clipboardStore } from "$lib/stores/clipboard";
  import {
    setShouldRestoreHistory,
    setSavedHistory,
    getShouldRestoreHistory,
    getSavedHistory,
    clearHistoryRestore,
  } from "$lib/stores/historyRestore";
  import MessageModeSelector from "$lib/components/MessageModeSelector.svelte";
  import SlashCommandMenu from "$lib/components/SlashCommandMenu.svelte";
  import SystemClock from "$lib/components/SystemClock.svelte";
  import CliVersion from "$lib/components/CliVersion.svelte";
  import { getCurrentMode } from "$lib/stores/messageMode";
  import { formatMessageWithMode } from "$lib/types/messageMode";
  import {
    parseSlashCommand,
    getMatchingCommands,
    isSlashCommand,
    type SlashCommand,
  } from "$lib/commands/slashCommands";
  import { configStore, isStreamerMode } from "$lib/stores/config";
  import { conversationsStore } from "$lib/stores/conversations";
  import { stats, estimateMessageCost, formatTokenCount } from "$lib/stores/stats";
  import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
  import SnippetLibraryPanel from "$lib/components/SnippetLibraryPanel.svelte";
  import QuickActionsPanel from "$lib/components/QuickActionsPanel.svelte";
  import ClipboardHistoryPanel from "$lib/components/ClipboardHistoryPanel.svelte";
  import DraftPanel from "$lib/components/DraftPanel.svelte";
  import TextInputContextMenu from "$lib/components/TextInputContextMenu.svelte";
  import { draftsStore } from "$lib/stores/drafts";
  import { injectTextStore } from "$lib/stores/projectContext";
  import type { Attachment } from "$lib/types/messages";

  const INPUT_HISTORY_KEY = "hikari-input-history";
  const MAX_HISTORY_SIZE = 100;

  let inputValue = $state("");
  let isSubmitting = $state(false);
  let isConnected = $state(false);
  let isProcessing = $state(false);
  let showCommandMenu = $state(false);
  let matchingCommands = $state<SlashCommand[]>([]);
  let selectedCommandIndex = $state(0);
  let attachments = $state<Attachment[]>([]);
  let isDragging = $state(false);
  let showSnippetLibrary = $state(false);
  let showQuickActions = $state(false);
  let showClipboardHistory = $state(false);
  let showDraftPanel = $state(false);
  let streamerModeActive = $state(false);

  // Cost estimation for pre-submission display
  let costEstimate = $derived(
    inputValue.trim()
      ? estimateMessageCost(inputValue, $stats.context_tokens_used, $stats.model)
      : null
  );

  // Context menu state
  let textareaElement: HTMLTextAreaElement | undefined = $state();
  let contextMenuShow = $state(false);
  let contextMenuX = $state(0);
  let contextMenuY = $state(0);

  function handleContextMenu(event: MouseEvent) {
    event.preventDefault();
    contextMenuShow = true;
    contextMenuX = event.clientX;
    contextMenuY = event.clientY;
  }

  function closeContextMenu() {
    contextMenuShow = false;
  }

  isStreamerMode.subscribe((value) => {
    streamerModeActive = value;
  });

  // Input history state
  let inputHistory = $state<string[]>([]);
  let historyIndex = $state(-1);
  let tempInput = $state("");
  let userHasTyped = $state(false); // Track if user manually typed (vs history navigation)

  // Textarea resize state
  let textareaHeight = $state(48);
  const MIN_HEIGHT = 48;
  const MAX_HEIGHT = 200;
  let isResizing = $state(false);
  let startY = 0;
  let startHeight = 0;

  function handleResizeStart(event: MouseEvent) {
    isResizing = true;
    startY = event.clientY;
    startHeight = textareaHeight;
    document.addEventListener("mousemove", handleResizeMove);
    document.addEventListener("mouseup", handleResizeEnd);
    event.preventDefault();
  }

  function handleResizeMove(event: MouseEvent) {
    if (!isResizing) return;
    // Dragging up (negative deltaY) should increase height
    const deltaY = startY - event.clientY;
    const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight + deltaY));
    textareaHeight = newHeight;
  }

  function handleResizeEnd() {
    isResizing = false;
    document.removeEventListener("mousemove", handleResizeMove);
    document.removeEventListener("mouseup", handleResizeEnd);
  }

  // Load history from localStorage on init
  function loadHistory(): string[] {
    try {
      const stored = localStorage.getItem(INPUT_HISTORY_KEY);
      return stored ? JSON.parse(stored) : [];
    } catch {
      return [];
    }
  }

  function saveHistory(history: string[]) {
    try {
      localStorage.setItem(INPUT_HISTORY_KEY, JSON.stringify(history));
    } catch {
      // Ignore storage errors
    }
  }

  function addToHistory(input: string) {
    const trimmed = input.trim();
    if (!trimmed) return;

    // Don't add duplicates of the most recent entry
    if (inputHistory.length > 0 && inputHistory[0] === trimmed) return;

    // Add to front of history
    inputHistory = [trimmed, ...inputHistory.slice(0, MAX_HISTORY_SIZE - 1)];
    saveHistory(inputHistory);
  }

  // Initialize history on mount
  inputHistory = loadHistory();

  claudeStore.connectionStatus.subscribe((status) => {
    isConnected = status === "connected";
  });

  isClaudeProcessing.subscribe((processing) => {
    isProcessing = processing;
  });

  claudeStore.attachments.subscribe((storedAttachments) => {
    attachments = storedAttachments;
  });

  // Per-tab draft persistence — restore the draft text whenever the active
  // conversation changes, and save it back on every keystroke.
  claudeStore.activeConversationId.subscribe((conversationId) => {
    if (conversationId) {
      const conv = get(claudeStore.conversations).get(conversationId);
      inputValue = conv?.draftText ?? "";
    } else {
      inputValue = "";
    }
  });

  // Project context injection — set by StatusBar via injectTextStore signal.
  injectTextStore.subscribe((text) => {
    if (text === null) return;
    inputValue = inputValue.trim() ? text + "\n\n" + inputValue : text;
    userHasTyped = true;
    injectTextStore.set(null);
  });

  function clearInput() {
    inputValue = "";
    const activeId = get(claudeStore.activeConversationId);
    if (activeId) {
      claudeStore.setDraftText(activeId, "");
    }
  }

  function handleInputChange() {
    // If input is empty, allow history navigation again
    // Otherwise, mark that user has manually typed
    if (inputValue === "") {
      userHasTyped = false;
    } else {
      userHasTyped = true;
    }
    // Reset history navigation when user types
    historyIndex = -1;
    tempInput = "";

    // Save the current draft so it persists if the user switches tabs.
    const activeId = get(claudeStore.activeConversationId);
    if (activeId) {
      claudeStore.setDraftText(activeId, inputValue);
    }

    if (isSlashCommand(inputValue)) {
      matchingCommands = getMatchingCommands(inputValue);
      showCommandMenu = matchingCommands.length > 0;
      selectedCommandIndex = 0;
    } else {
      showCommandMenu = false;
      matchingCommands = [];
    }
  }

  function selectCommand(command: SlashCommand) {
    inputValue = `/${command.name} `;
    showCommandMenu = false;
    matchingCommands = [];
  }

  async function executeSlashCommand(): Promise<boolean> {
    const { command, args } = parseSlashCommand(inputValue);
    if (command) {
      clearInput();
      showCommandMenu = false;
      matchingCommands = [];
      await command.execute(args);
      return true;
    }
    return false;
  }

  async function handleSubmit(event: Event) {
    event.preventDefault();

    const message = inputValue.trim();
    const hasAttachments = attachments.length > 0;

    // Need either a message or attachments to submit
    if ((!message && !hasAttachments) || isSubmitting || isProcessing) return;

    // Check for slash commands first (these work even when disconnected)
    if (message && isSlashCommand(message)) {
      // Add slash commands to history too
      addToHistory(message);
      historyIndex = -1;
      tempInput = "";
      userHasTyped = false;

      const wasCommand = await executeSlashCommand();
      if (wasCommand) return;
      // If it started with / but wasn't a valid command, show error
      claudeStore.addLine(
        "error",
        `Unknown command: ${message.split(" ")[0]}. Type /help for available commands.`
      );
      clearInput();
      return;
    }

    // Regular messages require connection
    if (!isConnected) return;

    // Add to history before clearing (only if there's text)
    if (message) {
      addToHistory(message);
    }
    historyIndex = -1;
    tempInput = "";
    userHasTyped = false;

    isSubmitting = true;
    clearInput();

    // Capture attachments before clearing
    const currentAttachments = [...attachments];

    // Apply mode prefix if needed (only if there's a message)
    const currentMode = getCurrentMode();
    const formattedMessage = message ? formatMessageWithMode(message, currentMode) : "";

    // Build message with attachments
    let messageWithAttachments = formattedMessage;
    if (currentAttachments.length > 0) {
      const attachmentPaths = currentAttachments.map((a) => a.path).join("\n");
      const attachmentPrefix = formattedMessage ? `${formattedMessage}\n\n` : "";
      messageWithAttachments = `${attachmentPrefix}[Attached files - please read these files to see their contents:]\n${attachmentPaths}`;

      // Log attached files to the output
      for (const attachment of currentAttachments) {
        claudeStore.addLine("system", `📎 Attached: ${attachment.filename} (${attachment.path})`);
      }
    }

    // Clear attachments after capturing them
    claudeStore.clearAttachments();

    // Check if we need to restore conversation history
    let messageToSend = messageWithAttachments;
    if (getShouldRestoreHistory()) {
      const savedHistory = getSavedHistory();

      if (savedHistory) {
        // Prepend the conversation history with a context message
        messageToSend = `[Previous conversation context:]
${savedHistory}

[Continuing conversation after reconnection:]
User: ${formattedMessage}`;

        // Clear the restoration flags
        clearHistoryRestore();
      }
    }

    // Reset notification state for new user message
    handleNewUserMessage();

    claudeStore.addLine("user", formattedMessage);
    characterState.setState("thinking");

    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("send_prompt", {
        conversationId,
        message: messageToSend,
      });
      claudeStore.setProcessing(true);
    } catch (error) {
      console.error("Failed to send prompt:", error);
      claudeStore.addLine("error", `Failed to send: ${error}`);
      characterState.setTemporaryState("error", 3000);
    } finally {
      isSubmitting = false;
    }
  }

  async function handleInterrupt() {
    // Save the conversation history FIRST before anything else
    const history = claudeStore.getConversationHistory();

    if (history) {
      setSavedHistory(history);
      setShouldRestoreHistory(true);
    }

    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("interrupt_claude", { conversationId });
      claudeStore.addLine("system", "Process interrupted via stop button — reconnecting...");
      characterState.setState("idle");

      // Show connecting status while we reconnect
      claudeStore.setConnectionStatus("connecting");

      // Auto-reconnect after a brief delay
      setTimeout(async () => {
        try {
          const conversationId = get(claudeStore.activeConversationId);
          if (!conversationId) {
            throw new Error("No active conversation");
          }

          // Get current working directory and granted tools before reconnecting
          const workingDir = await invoke<string>("get_working_directory", { conversationId });
          const activeConversation = get(conversationsStore.activeConversation);
          const grantedTools = activeConversation
            ? Array.from(activeConversation.grantedTools)
            : [];
          const config = configStore.getConfig();
          const allAllowedTools = [...new Set([...grantedTools, ...config.auto_granted_tools])];

          // Set the flag to skip greeting on next connection
          setSkipNextGreeting(true);

          // Reconnect to Claude with preserved permissions
          await invoke("start_claude", {
            conversationId,
            options: {
              working_dir: workingDir,
              model: config.model || null,
              api_key: config.api_key || null,
              custom_instructions: config.custom_instructions || null,
              mcp_servers_json: config.mcp_servers_json || null,
              allowed_tools: allAllowedTools,
              use_worktree: config.use_worktree ?? false,
              disable_1m_context: config.disable_1m_context ?? false,
              include_git_instructions: config.include_git_instructions ?? true,
              enable_claudeai_mcp_servers: config.enable_claudeai_mcp_servers ?? true,
              auto_memory_directory: config.auto_memory_directory || null,
              model_overrides: config.model_overrides || null,
              session_name: null,
            },
          });

          // Update Discord RPC when reconnecting
          if (activeConversation) {
            await updateDiscordRpc(
              activeConversation.name,
              config.model || "claude",
              activeConversation.startedAt
            );
          }
        } 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 handleRemoveAttachment(id: string) {
    claudeStore.removeAttachment(id);
  }

  function getFileTypeFromExtension(extension: string): "image" | "document" | "other" {
    const imageExtensions = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"];
    const documentExtensions = ["pdf", "txt", "md", "doc", "docx", "csv", "json", "xml"];

    if (imageExtensions.includes(extension)) {
      return "image";
    } else if (documentExtensions.includes(extension)) {
      return "document";
    }
    return "other";
  }

  function handleDragEnter(event: DragEvent) {
    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer?.types.includes("Files")) {
      isDragging = true;
    }
  }

  function handleDragOver(event: DragEvent) {
    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer) {
      event.dataTransfer.dropEffect = "copy";
    }
  }

  function handleDragLeave(event: DragEvent) {
    event.preventDefault();
    event.stopPropagation();
    // Only set isDragging to false if we're leaving the form element entirely
    const relatedTarget = event.relatedTarget as Node | null;
    const currentTarget = event.currentTarget as HTMLElement;
    if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
      isDragging = false;
    }
  }

  async function handleDrop(event: DragEvent) {
    event.preventDefault();
    event.stopPropagation();
    isDragging = false;

    const files = event.dataTransfer?.files;
    if (!files || files.length === 0) return;

    const conversationId = get(claudeStore.activeConversationId);

    for (const file of files) {
      const filename = file.name;
      const extension = filename.split(".").pop()?.toLowerCase() || "";
      const fileType = getFileTypeFromExtension(extension);

      // Create attachment from dropped file
      // Note: For dropped files, we create a preview URL for images
      let previewUrl: string | undefined;
      if (fileType === "image") {
        previewUrl = URL.createObjectURL(file);
      }

      // Check if the file has a native path (from Tauri's file drop)
      // If not, we need to save it to a temp file
      let savedPath = (file as File & { path?: string }).path;

      if (!savedPath && conversationId) {
        try {
          const arrayBuffer = await file.arrayBuffer();
          const bytes = Array.from(new Uint8Array(arrayBuffer));
          const result = await invoke<{ path: string; filename: string }>("save_temp_file", {
            conversationId,
            filename,
            data: bytes,
          });
          savedPath = result.path;
        } catch (error) {
          console.error("Failed to save dropped file to temp:", error);
          savedPath = file.name;
        }
      }

      const attachment: Attachment = {
        id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
        filename,
        path: savedPath || file.name,
        size: file.size,
        type: fileType,
        mimeType: file.type,
        previewUrl,
      };

      claudeStore.addAttachment(attachment);
    }
  }

  async function handleFilePicker() {
    try {
      const selected = await open({
        multiple: true,
        filters: [
          {
            name: "All Files",
            extensions: ["*"],
          },
          {
            name: "Images",
            extensions: ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"],
          },
          {
            name: "Documents",
            extensions: ["pdf", "txt", "md", "doc", "docx", "csv", "json", "xml"],
          },
          {
            name: "Code",
            extensions: [
              "js",
              "ts",
              "jsx",
              "tsx",
              "py",
              "rs",
              "go",
              "java",
              "c",
              "cpp",
              "h",
              "hpp",
              "css",
              "html",
              "svelte",
              "vue",
            ],
          },
        ],
      });

      if (!selected) return;

      // Handle both single and multiple file selection
      const files = Array.isArray(selected) ? selected : [selected];

      for (const filePath of files) {
        const filename = filePath.split(/[/\\]/).pop() || "unknown";
        const extension = filename.split(".").pop()?.toLowerCase() || "";
        const fileType = getFileTypeFromExtension(extension);

        // Get file size from Tauri
        let fileSize = 0;
        try {
          fileSize = await invoke<number>("get_file_size", { filePath });
        } catch (e) {
          console.warn("Could not get file size:", e);
        }

        const attachment: Attachment = {
          id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
          filename,
          path: filePath,
          size: fileSize,
          type: fileType,
        };

        claudeStore.addAttachment(attachment);
      }
    } catch (error) {
      console.error("Failed to open file picker:", error);
    }
  }

  async function handlePaste(event: ClipboardEvent) {
    // First, try the web clipboard API for files
    const items = event.clipboardData?.items;
    let handledFile = false;

    // Also capture text content to clipboard history
    const textContent = event.clipboardData?.getData("text/plain");
    if (textContent && textContent.trim().length > 0) {
      // Only capture multi-line or longer text (likely code snippets)
      if (textContent.includes("\n") || textContent.length > 50) {
        clipboardStore.captureClipboard(textContent, null, "Pasted into chat");
      }
    }

    if (items && items.length > 0) {
      for (const item of items) {
        if (item.kind === "file") {
          const file = item.getAsFile();
          if (!file) continue;

          event.preventDefault();
          handledFile = true;

          const filename = file.name || `pasted-${Date.now()}.${file.type.split("/")[1] || "png"}`;
          const extension = filename.split(".").pop()?.toLowerCase() || "";
          const fileType = getFileTypeFromExtension(extension);

          let previewUrl: string | undefined;
          if (fileType === "image" || file.type.startsWith("image/")) {
            previewUrl = URL.createObjectURL(file);
          }

          const conversationId = get(claudeStore.activeConversationId);
          let savedPath = filename;

          if (conversationId) {
            try {
              const arrayBuffer = await file.arrayBuffer();
              const bytes = Array.from(new Uint8Array(arrayBuffer));
              const result = await invoke<{ path: string; filename: string }>("save_temp_file", {
                conversationId,
                filename,
                data: bytes,
              });
              savedPath = result.path;
            } catch (error) {
              console.error("Failed to save pasted file to temp:", error);
            }
          }

          const attachment: Attachment = {
            id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
            filename,
            path: savedPath,
            size: file.size,
            type: file.type.startsWith("image/") ? "image" : fileType,
            mimeType: file.type,
            previewUrl,
          };

          claudeStore.addAttachment(attachment);
        }
      }
    }

    // If web clipboard didn't have files, try Tauri's native clipboard for images
    if (!handledFile) {
      try {
        const image = await readImage();
        const rgba = await image.rgba();
        const size = await image.size();

        if (rgba && rgba.length > 0) {
          event.preventDefault();

          const conversationId = get(claudeStore.activeConversationId);
          const filename = `screenshot-${Date.now()}.png`;

          // Convert RGBA to PNG using canvas
          const canvas = document.createElement("canvas");
          canvas.width = size.width;
          canvas.height = size.height;
          const ctx = canvas.getContext("2d");

          if (ctx) {
            const imgData = ctx.createImageData(size.width, size.height);
            imgData.data.set(new Uint8ClampedArray(rgba));
            ctx.putImageData(imgData, 0, 0);

            // Create preview URL from canvas
            const previewUrl = canvas.toDataURL("image/png");

            // Convert to blob for saving
            const blob = await new Promise<Blob | null>((resolve) =>
              canvas.toBlob(resolve, "image/png")
            );

            let savedPath = filename;
            if (blob && conversationId) {
              try {
                const arrayBuffer = await blob.arrayBuffer();
                const bytes = Array.from(new Uint8Array(arrayBuffer));
                const result = await invoke<{ path: string; filename: string }>("save_temp_file", {
                  conversationId,
                  filename,
                  data: bytes,
                });
                savedPath = result.path;
              } catch (error) {
                console.error("Failed to save clipboard image to temp:", error);
              }
            }

            const attachment: Attachment = {
              id: `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
              filename,
              path: savedPath,
              size: blob?.size || 0,
              type: "image",
              mimeType: "image/png",
              previewUrl,
            };

            claudeStore.addAttachment(attachment);
          }
        }
      } catch (error) {
        // No image in clipboard or clipboard read failed - that's fine, just ignore
        console.log("No image in native clipboard:", error);
      }
    }
  }

  function handleSnippetInsert(content: string): void {
    // Insert snippet at cursor position or append to input
    if (inputValue.trim()) {
      inputValue = inputValue + "\n\n" + content;
    } else {
      inputValue = content;
    }
    userHasTyped = true;
  }

  function handleDraftInsert(content: string): void {
    inputValue = content;
    userHasTyped = true;
    const activeId = get(claudeStore.activeConversationId);
    if (activeId) {
      claudeStore.setDraftText(activeId, content);
    }
  }

  async function handleSaveAsDraft(): Promise<void> {
    const content = inputValue.trim();
    if (!content) return;
    await draftsStore.saveDraft(content);
    clearInput();
  }

  function handleClipboardInsert(content: string): void {
    // Insert clipboard content at cursor position or append to input
    if (inputValue.trim()) {
      inputValue = inputValue + "\n\n" + content;
    } else {
      inputValue = content;
    }
    userHasTyped = true;
  }

  async function handleQuickAction(prompt: string): Promise<void> {
    // Quick actions send the prompt directly
    if (!isConnected || isSubmitting || isProcessing) return;

    // Add to history
    addToHistory(prompt);
    historyIndex = -1;
    tempInput = "";
    userHasTyped = false;

    isSubmitting = true;

    // Reset notification state for new user message
    handleNewUserMessage();

    claudeStore.addLine("user", prompt);
    characterState.setState("thinking");

    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("send_prompt", {
        conversationId,
        message: prompt,
      });
      claudeStore.setProcessing(true);
    } catch (error) {
      console.error("Failed to send quick action:", error);
      claudeStore.addLine("error", `Failed to send: ${error}`);
      characterState.setTemporaryState("error", 3000);
    } finally {
      isSubmitting = false;
    }
  }

  function handleKeyDown(event: KeyboardEvent) {
    // Handle command menu navigation
    if (showCommandMenu && matchingCommands.length > 0) {
      if (event.key === "ArrowDown") {
        event.preventDefault();
        selectedCommandIndex = (selectedCommandIndex + 1) % matchingCommands.length;
        return;
      }
      if (event.key === "ArrowUp") {
        event.preventDefault();
        selectedCommandIndex =
          (selectedCommandIndex - 1 + matchingCommands.length) % matchingCommands.length;
        return;
      }
      if (event.key === "Tab") {
        event.preventDefault();
        const selected = matchingCommands[selectedCommandIndex];
        if (selected) {
          selectCommand(selected);
        }
        return;
      }
      if (event.key === "Escape") {
        event.preventDefault();
        showCommandMenu = false;
        return;
      }
    }

    // Handle input history navigation (when command menu is closed AND user hasn't typed)
    // If user has typed something, let arrow keys navigate the cursor instead
    if (event.key === "ArrowUp" && inputHistory.length > 0 && !userHasTyped) {
      event.preventDefault();
      if (historyIndex === -1) {
        // Save current input before navigating history
        tempInput = inputValue;
      }
      if (historyIndex < inputHistory.length - 1) {
        historyIndex++;
        inputValue = inputHistory[historyIndex];
      }
      return;
    }

    if (event.key === "ArrowDown" && historyIndex >= 0 && !userHasTyped) {
      event.preventDefault();
      historyIndex--;
      if (historyIndex === -1) {
        // Restore the temp input when going back to current
        inputValue = tempInput;
        userHasTyped = false; // Reset since we're back to empty/temp state
      } else {
        inputValue = inputHistory[historyIndex];
      }
      return;
    }

    if (event.key === "Enter" && !event.shiftKey) {
      handleSubmit(event);
    }
  }
</script>

<form
  onsubmit={handleSubmit}
  ondragenter={handleDragEnter}
  ondragover={handleDragOver}
  ondragleave={handleDragLeave}
  ondrop={handleDrop}
  class="input-bar"
  class:is-dragging={isDragging}
>
  <AttachmentPreview {attachments} onRemove={handleRemoveAttachment} />

  <div class="input-controls flex gap-2 mb-2">
    <MessageModeSelector />
    <button
      type="button"
      onclick={() => configStore.toggleStreamerMode()}
      class="control-button streamer-toggle"
      class:streamer-active={streamerModeActive}
      title="Toggle Streamer Mode (Ctrl+Shift+S)"
    >
      {#if streamerModeActive}
        <div class="live-indicator"></div>
        <span>LIVE</span>
      {:else}
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
          <circle cx="12" cy="12" r="3" />
          <line x1="1" y1="1" x2="23" y2="23" />
        </svg>
        <span>Stream</span>
      {/if}
    </button>
    <button
      type="button"
      onclick={() => (showQuickActions = true)}
      class="control-button"
      title="Quick Actions"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
      <span>Actions</span>
    </button>
    <button
      type="button"
      onclick={() => (showSnippetLibrary = true)}
      class="control-button"
      title="Snippet Library"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
        <polyline points="14,2 14,8 20,8" />
        <line x1="16" y1="13" x2="8" y2="13" />
        <line x1="16" y1="17" x2="8" y2="17" />
        <line x1="10" y1="9" x2="8" y2="9" />
      </svg>
      <span>Snippets</span>
    </button>
    <button
      type="button"
      onclick={() => (showClipboardHistory = true)}
      class="control-button"
      title="Clipboard History"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" />
        <rect x="9" y="3" width="6" height="4" rx="1" />
      </svg>
      <span>Clipboard</span>
    </button>

    <button
      type="button"
      onclick={() => (showDraftPanel = true)}
      class="control-button"
      title="Saved Drafts"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
        />
      </svg>
      <span>Drafts</span>
    </button>

    <CliVersion />
    <SystemClock />
  </div>

  <div class="input-row">
    <div class="textarea-wrapper">
      <SlashCommandMenu
        commands={matchingCommands}
        selectedIndex={selectedCommandIndex}
        onSelect={selectCommand}
      />
      <!-- svelte-ignore a11y_no_static_element_interactions -->
      <div class="resize-handle" onmousedown={handleResizeStart} title="Drag to resize"></div>
      <textarea
        bind:this={textareaElement}
        bind:value={inputValue}
        onkeydown={handleKeyDown}
        oninput={handleInputChange}
        onpaste={handlePaste}
        oncontextmenu={handleContextMenu}
        placeholder={isConnected
          ? "Ask Hikari anything... (type / for commands)"
          : "Connect to Claude first..."}
        disabled={isSubmitting || isProcessing}
        rows={1}
        style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px); font-family: var(--terminal-font-family, monospace);"
        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
             input-trans-focus disabled:opacity-50 disabled:cursor-not-allowed"
      ></textarea>
    </div>

    <div class="button-wrapper">
      {#if costEstimate && isConnected && !isProcessing}
        <div class="cost-estimate" title="Estimated input cost for this message">
          <span class="cost-tokens">+{formatTokenCount(costEstimate.messageTokens)}</span>
          <span class="cost-value">${costEstimate.estimatedCost.toFixed(4)}</span>
        </div>
      {/if}

      <button
        type="button"
        onclick={handleSaveAsDraft}
        disabled={!inputValue.trim()}
        class="attach-button"
        title="Save as Draft"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
          <polyline points="17 21 17 13 7 13 7 21" />
          <polyline points="7 3 7 8 15 8" />
        </svg>
      </button>

      <button type="button" onclick={handleFilePicker} class="attach-button" title="Attach files">
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path
            d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
          />
        </svg>
      </button>

      {#if isProcessing}
        <button
          type="button"
          onclick={handleInterrupt}
          class="send-button btn-trans-gradient"
          title="Interrupt the current response (Ctrl+C)"
        >
          <span class="font-bold">■</span> Stop
        </button>
      {:else}
        <button
          type="submit"
          disabled={!isConnected ||
            isSubmitting ||
            (!inputValue.trim() && attachments.length === 0)}
          class="send-button trans-gradient-button
               disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {#if isSubmitting}
            <span class="inline-block animate-spin">⏳</span>
          {:else}
            Send
          {/if}
        </button>
      {/if}
    </div>
  </div>
</form>

{#if showSnippetLibrary}
  <SnippetLibraryPanel
    onClose={() => (showSnippetLibrary = false)}
    onInsert={handleSnippetInsert}
  />
{/if}

{#if showQuickActions}
  <QuickActionsPanel onClose={() => (showQuickActions = false)} onAction={handleQuickAction} />
{/if}

{#if showClipboardHistory}
  <ClipboardHistoryPanel
    isOpen={showClipboardHistory}
    onClose={() => (showClipboardHistory = false)}
    onInsert={handleClipboardInsert}
  />
{/if}

{#if showDraftPanel}
  <DraftPanel onClose={() => (showDraftPanel = false)} onInsert={handleDraftInsert} />
{/if}

{#if contextMenuShow && textareaElement}
  <TextInputContextMenu
    x={contextMenuX}
    y={contextMenuY}
    inputElement={textareaElement}
    onClose={closeContextMenu}
  />
{/if}

<style>
  .input-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition:
      border-color 0.2s,
      background 0.2s;
  }

  .input-bar.is-dragging {
    background: var(--bg-secondary);
    border: 2px dashed var(--accent-primary);
    border-radius: 12px;
    padding: 8px;
  }

  .input-bar.is-dragging::before {
    content: "Drop files here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 500;
    color: var(--accent-primary);
    pointer-events: none;
    z-index: 10;
  }

  .input-bar.is-dragging > * {
    opacity: 0.3;
    pointer-events: none;
  }

  .input-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hide button text on smaller screens, show icons only */
  @media (max-width: 640px) {
    .control-button span {
      display: none;
    }
    .control-button {
      padding: 10px;
      min-width: 40px;
    }
  }

  .control-button:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .control-button:active {
    transform: scale(0.95);
  }

  .streamer-toggle.streamer-active {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgb(239, 68, 68);
    color: rgb(248, 113, 113);
    animation: pulse-red 2s ease-in-out infinite;
  }

  .streamer-toggle.streamer-active:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgb(248, 113, 113);
  }

  .live-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(239, 68, 68);
    animation: pulse-dot 1.5s ease-in-out infinite;
  }

  @keyframes pulse-red {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
  }

  @keyframes pulse-dot {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .input-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }

  .textarea-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .resize-handle {
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    border-radius: 3px;
    margin-bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .resize-handle::before {
    content: "";
    width: 40px;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    opacity: 0.5;
    transition: opacity 0.2s;
  }

  .resize-handle:hover::before {
    opacity: 1;
    background: var(--accent-primary);
  }

  .button-wrapper {
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 8px;
  }

  .cost-estimate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 60px;
    height: 48px;
  }

  .cost-tokens {
    opacity: 0.8;
  }

  .cost-value {
    font-family: var(--font-mono, monospace);
    color: var(--accent-primary);
  }

  .attach-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
  }

  .attach-button:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.05);
  }

  .attach-button:active {
    transform: scale(0.95);
  }

  .send-button {
    padding: 0 24px;
    height: 48px;
    color: white;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .send-button:hover:not(:disabled) {
    transform: scale(1.05);
  }

  .send-button:active:not(:disabled) {
    transform: scale(0.95);
  }

  .trans-gradient-button {
    background: var(--trans-gradient-vibrant);
    border: none;
    color: #1a1a2e;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  }

  .trans-gradient-button:hover:not(:disabled) {
    filter: brightness(1.1);
    box-shadow:
      0 0 20px rgba(91, 206, 250, 0.4),
      0 0 30px rgba(245, 169, 184, 0.3);
  }
</style>