feat: another wave of features (#61)

## Explanation

This PR bundles several user-facing improvements and feature additions for the v0.3.0 release, including quality-of-life improvements to the UI, new slash commands, better state persistence, and auto-update checking.

## Included Changes

- **Resizable chat input** with drag handle (#58 partial)
- **Arrow key navigation fix** - cursor keys now navigate text when user has typed input (#58)
- **Scroll position persistence** per conversation tab
- **/skill command** for invoking Claude Code skills (#57)
- **Stats persistence fix** - stats now persist across session changes, only reset on disconnect (#59)
- **Auto-update checker** on startup (#17)
- **Resizable character panel** with full-height sprites (#10)
- **Font size and zoom settings** with keyboard shortcuts (Ctrl++/Ctrl+-/Ctrl+0) (#19)

## Closes

Closes #10, #17, #19, #57, #58, #59

## Attestations

- [x] I have read and agree to the Code of Conduct
- [x] I have read and agree to the Community Guidelines
- [x] My contribution complies with the Contributor Covenant
- [x] I have run the linter and resolved any errors
- [x] My pull request uses an appropriate title, matching the conventional commit standards
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request
- [x] All new and existing tests pass locally with my changes
- [x] Code coverage remains at or above the configured threshold

## Documentation

N/A - Internal app features

## Versioning

Minor - My pull request introduces new non-breaking features.

---
✨ This PR was created with help from Hikari~ 🌸

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

src/lib/components/AnimeGirl.svelte

@@ -57,30 +57,34 @@
   }
 </script>
 
-<div class="anime-girl-container flex flex-col items-center justify-end h-full p-4">
-  <div class="character-frame relative {getBackgroundGlow()} w-full max-w-md">
-    <div class="sprite-container {getAnimationClass()}">
+<div
+  class="anime-girl-container flex flex-col items-center justify-between h-full p-4 overflow-hidden"
+>
+  <div
+    class="character-frame relative {getBackgroundGlow()} flex-1 flex items-center justify-center min-h-0"
+  >
+    <div class="sprite-container {getAnimationClass()} h-full flex items-center justify-center">
       <img
         src="/sprites/{info.spriteFile}"
         alt="Hikari - {info.label}"
-        class="character-sprite w-full h-auto object-contain"
+        class="character-sprite h-full w-auto max-w-full object-contain"
         onerror={(e) => {
           const target = e.currentTarget as HTMLImageElement;
           target.src = "/sprites/placeholder.svg";
         }}
       />
     </div>
+  </div>
 
-    <div class="state-indicator absolute -bottom-2 left-1/2 transform -translate-x-1/2">
-      <div
-        class="px-3 py-1 rounded-full text-xs font-medium bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--accent-primary)]"
-      >
-        {info.label}
-      </div>
+  <div class="state-indicator mt-2">
+    <div
+      class="px-3 py-1 rounded-full text-xs font-medium bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--accent-primary)]"
+    >
+      {info.label}
     </div>
   </div>
 
-  <div class="speech-bubble mt-4 max-w-xs">
+  <div class="speech-bubble mt-2 max-w-xs flex-shrink-0">
     <div
       class="relative bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]"
     >

src/lib/components/ConfigSidebar.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
-  import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
+  import {
+    configStore,
+    type HikariConfig,
+    type Theme,
+    applyFontSize,
+    MIN_FONT_SIZE,
+    MAX_FONT_SIZE,
+    DEFAULT_FONT_SIZE,
+  } from "$lib/stores/config";
   import { claudeStore } from "$lib/stores/claude";
   import { getCurrentWindow } from "@tauri-apps/api/window";
 
@@ -15,6 +23,9 @@
     notifications_enabled: true,
     notification_volume: 0.7,
     always_on_top: false,
+    update_checks_enabled: true,
+    character_panel_width: null,
+    font_size: 14,
   });
 
   let isOpen = $state(false);
@@ -386,23 +397,61 @@
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
         Appearance
       </h3>
-      <div class="flex gap-2">
-        <button
-          onclick={() => handleThemeChange("dark")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Dark
-        </button>
-        <button
-          onclick={() => handleThemeChange("light")}
-          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
-            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
-            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
-        >
-          Light
-        </button>
+
+      <!-- Theme Selection -->
+      <div class="mb-4">
+        <label class="block text-sm text-[var(--text-secondary)] mb-2">Theme</label>
+        <div class="flex gap-2">
+          <button
+            onclick={() => handleThemeChange("dark")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Dark
+          </button>
+          <button
+            onclick={() => handleThemeChange("light")}
+            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+          >
+            Light
+          </button>
+        </div>
+      </div>
+
+      <!-- Font Size -->
+      <div class="mb-4">
+        <label for="font-size" class="block text-sm text-[var(--text-secondary)] mb-2">
+          Terminal Font Size
+        </label>
+        <div class="flex items-center gap-3">
+          <input
+            id="font-size"
+            type="range"
+            bind:value={config.font_size}
+            oninput={() => applyFontSize(config.font_size)}
+            min={MIN_FONT_SIZE}
+            max={MAX_FONT_SIZE}
+            step="1"
+            class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer"
+          />
+          <span class="text-sm text-gray-300 w-12 text-right">{config.font_size}px</span>
+          <button
+            onclick={() => {
+              config.font_size = DEFAULT_FONT_SIZE;
+              applyFontSize(DEFAULT_FONT_SIZE);
+            }}
+            class="px-2 py-1 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded hover:border-[var(--accent-primary)] text-[var(--text-secondary)] transition-colors"
+            title="Reset to default (14px)"
+          >
+            Reset
+          </button>
+        </div>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1">
+          Use Ctrl++ / Ctrl+- to quickly adjust, Ctrl+0 to reset
+        </p>
       </div>
     </section>
 
@@ -427,6 +476,21 @@
           Keep the window above other windows
         </p>
       </div>
+
+      <!-- Update Checks Toggle -->
+      <div class="mb-4">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            bind:checked={config.update_checks_enabled}
+            class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
+          />
+          <span class="text-sm text-[var(--text-primary)]">Check for updates on startup</span>
+        </label>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
+          Notify when a new version is available
+        </p>
+      </div>
     </section>
 
     <!-- Notifications Section -->

src/lib/components/InputBar.svelte

@@ -38,6 +38,38 @@
   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[] {
@@ -81,6 +113,13 @@
   });
 
   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 = "";
@@ -125,6 +164,7 @@
       addToHistory(message);
       historyIndex = -1;
       tempInput = "";
+      userHasTyped = false;
 
       const wasCommand = await executeSlashCommand();
       if (wasCommand) return;
@@ -144,6 +184,7 @@
     addToHistory(message);
     historyIndex = -1;
     tempInput = "";
+    userHasTyped = false;
 
     isSubmitting = true;
     inputValue = "";
@@ -277,8 +318,9 @@ User: ${formattedMessage}`;
       }
     }
 
-    // Handle input history navigation (when command menu is closed)
-    if (event.key === "ArrowUp" && inputHistory.length > 0) {
+    // 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
@@ -291,12 +333,13 @@ User: ${formattedMessage}`;
       return;
     }
 
-    if (event.key === "ArrowDown" && historyIndex >= 0) {
+    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];
       }
@@ -314,13 +357,15 @@ User: ${formattedMessage}`;
     <MessageModeSelector />
   </div>
 
-  <div class="input-row flex gap-3 items-end">
-    <div class="flex-1 relative">
+  <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:value={inputValue}
         onkeydown={handleKeyDown}
@@ -330,41 +375,39 @@ User: ${formattedMessage}`;
           : "Connect to Claude first..."}
         disabled={isSubmitting}
         rows={1}
+        style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px);"
         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"
+             disabled:opacity-50 disabled:cursor-not-allowed"
       ></textarea>
     </div>
 
-    {#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}
-      <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}
+    <div class="button-wrapper">
+      {#if isProcessing}
+        <button
+          type="button"
+          onclick={handleInterrupt}
+          class="send-button bg-red-600 hover:bg-red-700"
+          title="Interrupt the current response (Ctrl+C)"
+        >
+          <span class="font-bold">■</span> Stop
+        </button>
+      {:else}
+        <button
+          type="submit"
+          disabled={!isConnected || isSubmitting || !inputValue.trim()}
+          class="send-button bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
+               disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {#if isSubmitting}
+            <span class="inline-block animate-spin">⏳</span>
+          {:else}
+            Send
+          {/if}
+        </button>
+      {/if}
+    </div>
   </div>
 </form>
 
@@ -386,4 +429,61 @@ User: ${formattedMessage}`;
     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%;
+  }
+
+  .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);
+  }
 </style>

src/lib/components/StatusBar.svelte

@@ -46,6 +46,9 @@
     notifications_enabled: true,
     notification_volume: 0.5,
     always_on_top: false,
+    update_checks_enabled: true,
+    character_panel_width: null,
+    font_size: 14,
   });
 
   onMount(async () => {

src/lib/components/Terminal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { claudeStore, type TerminalLine } from "$lib/stores/claude";
-  import { afterUpdate } from "svelte";
+  import { afterUpdate, tick } from "svelte";
   import ConversationTabs from "./ConversationTabs.svelte";
   import Markdown from "./Markdown.svelte";
   import HighlightedText from "./HighlightedText.svelte";
@@ -10,6 +10,8 @@
   let shouldAutoScroll = true;
   let lines: TerminalLine[] = [];
   let currentSearchQuery = "";
+  let currentConversationId: string | null = null;
+  let isRestoringScroll = false;
 
   searchQuery.subscribe((value) => {
     currentSearchQuery = value;
@@ -19,14 +21,46 @@
     lines = value;
   });
 
+  claudeStore.activeConversationId.subscribe(async (newId) => {
+    if (!newId) return;
+
+    // Save current conversation's scroll position before switching
+    if (currentConversationId && currentConversationId !== newId && terminalElement) {
+      const position = shouldAutoScroll ? -1 : terminalElement.scrollTop;
+      claudeStore.saveScrollPosition(currentConversationId, position);
+    }
+
+    currentConversationId = newId;
+
+    // Restore scroll position for the new conversation after DOM updates
+    await tick();
+    if (terminalElement) {
+      const savedPosition = claudeStore.getScrollPosition(newId);
+      isRestoringScroll = true;
+      if (savedPosition === -1) {
+        // Auto-scroll to bottom
+        shouldAutoScroll = true;
+        terminalElement.scrollTop = terminalElement.scrollHeight;
+      } else {
+        // Restore to saved position
+        shouldAutoScroll = false;
+        terminalElement.scrollTop = savedPosition;
+      }
+      // Small delay to prevent the scroll handler from overriding our restore
+      setTimeout(() => {
+        isRestoringScroll = false;
+      }, 50);
+    }
+  });
+
   function handleScroll() {
-    if (!terminalElement) return;
+    if (!terminalElement || isRestoringScroll) return;
     const { scrollTop, scrollHeight, clientHeight } = terminalElement;
     shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
   }
 
   afterUpdate(() => {
-    if (shouldAutoScroll && terminalElement) {
+    if (shouldAutoScroll && terminalElement && !isRestoringScroll) {
       terminalElement.scrollTop = terminalElement.scrollHeight;
     }
   });
@@ -109,7 +143,8 @@
   <div
     bind:this={terminalElement}
     onscroll={handleScroll}
-    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono text-sm"
+    class="terminal-content h-[calc(100%-76px)] overflow-y-auto p-4 font-mono"
+    style="font-size: var(--terminal-font-size, 14px);"
   >
     {#if lines.length === 0}
       <div class="terminal-waiting italic">

src/lib/components/UpdateNotification.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { openUrl } from "@tauri-apps/plugin-opener";
+  import type { UpdateInfo } from "$lib/types/messages";
+  import { configStore } from "$lib/stores/config";
+
+  let updateInfo = $state<UpdateInfo | null>(null);
+  let dismissed = $state(false);
+
+  export async function checkForUpdates() {
+    // Check if update checks are enabled
+    const config = configStore.getConfig();
+    if (!config.update_checks_enabled) {
+      return;
+    }
+
+    try {
+      const info = await invoke<UpdateInfo>("check_for_updates");
+      if (info.has_update) {
+        updateInfo = info;
+        dismissed = false;
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      console.error("Failed to check for updates:", errorMessage);
+    }
+  }
+
+  function dismiss() {
+    dismissed = true;
+  }
+
+  async function openRelease() {
+    if (updateInfo?.release_url) {
+      await openUrl(updateInfo.release_url);
+    }
+  }
+</script>
+
+{#if updateInfo && !dismissed}
+  <div
+    class="fixed bottom-4 right-4 max-w-sm bg-[var(--bg-tertiary)] border border-[var(--accent-primary)] rounded-lg shadow-lg p-4 z-50"
+  >
+    <div class="flex items-start gap-3">
+      <div class="text-2xl">🎉</div>
+      <div class="flex-1">
+        <h3 class="text-[var(--text-primary)] font-semibold mb-1">Update Available!</h3>
+        <p class="text-[var(--text-secondary)] text-sm mb-2">
+          A new version of Hikari Desktop is available:
+          <span class="text-[var(--accent-primary)] font-mono">{updateInfo.latest_version}</span>
+        </p>
+        <p class="text-[var(--text-muted)] text-xs mb-3">
+          Current version: {updateInfo.current_version}
+        </p>
+        <div class="flex gap-2">
+          <button
+            onclick={openRelease}
+            class="px-3 py-1.5 bg-[var(--accent-primary)] text-white rounded text-sm hover:brightness-110 transition-all"
+          >
+            View Release
+          </button>
+          <button
+            onclick={dismiss}
+            class="px-3 py-1.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded text-sm hover:bg-[var(--bg-primary)] transition-all"
+          >
+            Later
+          </button>
+        </div>
+      </div>
+      <button
+        onclick={dismiss}
+        class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+        aria-label="Dismiss"
+      >
+        <svg
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}