feat: add compact mode for minimal widget interface (#36)

Add a compact mode that shrinks the window to a small widget showing
just the character sprite, recent messages, and a quick input box.
Perfect for quick questions while working without the full UI.

- Add CompactMode.svelte component with minimal widget interface
- Add compact mode toggle in StatusBar (Ctrl+Shift+M shortcut)
- Save/restore window size when toggling compact mode
- Handle display scaling by converting physical to logical pixels
- Add compact_mode to config (Rust + TypeScript)
- Add required Tauri window permissions for resize operations

src-tauri/capabilities/default.json

@@ -19,6 +19,9 @@
     "core:tray:default",
     "fs:default",
     "fs:allow-read-text-file",
-    "fs:allow-write-text-file"
+    "fs:allow-write-text-file",
+    "core:window:allow-set-size",
+    "core:window:allow-set-always-on-top",
+    "core:window:allow-inner-size"
   ]
 }

src-tauri/src/config.rs

@@ -79,6 +79,9 @@ pub struct HikariConfig {
 
     #[serde(default)]
     pub streamer_hide_paths: bool,
+
+    #[serde(default)]
+    pub compact_mode: bool,
 }
 
 impl Default for HikariConfig {
@@ -101,6 +104,7 @@ impl Default for HikariConfig {
             minimize_to_tray: false,
             streamer_mode: false,
             streamer_hide_paths: false,
+            compact_mode: false,
         }
     }
 }
@@ -157,6 +161,7 @@ mod tests {
         assert!(!config.minimize_to_tray);
         assert!(!config.streamer_mode);
         assert!(!config.streamer_hide_paths);
+        assert!(!config.compact_mode);
     }
 
     #[test]
@@ -177,6 +182,9 @@ mod tests {
             character_panel_width: Some(400),
             font_size: 16,
             minimize_to_tray: true,
+            streamer_mode: false,
+            streamer_hide_paths: false,
+            compact_mode: false,
         };
 
         let json = serde_json::to_string(&config).unwrap();

src/lib/components/CompactMode.svelte

@@ -0,0 +1,560 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { get } from "svelte/store";
+  import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
+  import { characterState, characterInfo } from "$lib/stores/character";
+  import { configStore, isStreamerMode } from "$lib/stores/config";
+  import { handleNewUserMessage } from "$lib/notifications/rules";
+  import type { CharacterState, CharacterStateInfo } from "$lib/types/states";
+
+  interface Props {
+    onExpand: () => void;
+  }
+
+  let { onExpand }: Props = $props();
+
+  let inputValue = $state("");
+  let isSubmitting = $state(false);
+  let isConnected = $state(false);
+  let isProcessing = $state(false);
+  let streamerModeActive = $state(false);
+  let currentState: CharacterState = $state("idle");
+  let info: CharacterStateInfo = $state({
+    state: "idle",
+    label: "Ready",
+    description: "Waiting for your command~",
+    spriteFile: "idle.png",
+  });
+
+  // Recent messages for compact display
+  let recentMessages = $state<Array<{ type: string; content: string }>>([]);
+  const MAX_RECENT_MESSAGES = 3;
+
+  claudeStore.connectionStatus.subscribe((status) => {
+    isConnected = status === "connected";
+  });
+
+  isClaudeProcessing.subscribe((processing) => {
+    isProcessing = processing;
+  });
+
+  isStreamerMode.subscribe((value) => {
+    streamerModeActive = value;
+  });
+
+  characterState.subscribe((state) => {
+    currentState = state;
+  });
+
+  characterInfo.subscribe((i) => {
+    info = i;
+  });
+
+  // Track recent terminal output
+  claudeStore.terminalLines.subscribe((lines) => {
+    const recent = lines.slice(-MAX_RECENT_MESSAGES).map((line) => ({
+      type: line.type,
+      content: line.content.substring(0, 100) + (line.content.length > 100 ? "..." : ""),
+    }));
+    recentMessages = recent;
+  });
+
+  function getAnimationClass(): string {
+    switch (currentState) {
+      case "thinking":
+        return "animate-thinking";
+      case "typing":
+        return "animate-typing";
+      case "searching":
+        return "animate-searching";
+      case "success":
+        return "animate-celebrate";
+      case "error":
+        return "animate-shake";
+      default:
+        return "animate-idle";
+    }
+  }
+
+  function getStateGlow(): string {
+    switch (currentState) {
+      case "thinking":
+        return "glow-thinking";
+      case "typing":
+        return "glow-typing";
+      case "success":
+        return "glow-success";
+      case "error":
+        return "glow-error";
+      default:
+        return "";
+    }
+  }
+
+  async function handleSubmit(event: Event) {
+    event.preventDefault();
+
+    const message = inputValue.trim();
+    if (!message || isSubmitting || !isConnected) return;
+
+    isSubmitting = true;
+    inputValue = "";
+
+    handleNewUserMessage();
+    claudeStore.addLine("user", message);
+    characterState.setState("thinking");
+
+    try {
+      const conversationId = get(claudeStore.activeConversationId);
+      if (!conversationId) {
+        throw new Error("No active conversation");
+      }
+      await invoke("send_prompt", {
+        conversationId,
+        message,
+      });
+    } 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() {
+    try {
+      const conversationId = get(claudeStore.activeConversationId);
+      if (!conversationId) return;
+
+      await invoke("interrupt_claude", { conversationId });
+      claudeStore.addLine("system", "Interrupted");
+      characterState.setState("idle");
+    } catch (error) {
+      console.error("Failed to interrupt:", error);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      handleSubmit(event);
+    }
+    // Escape expands to full mode
+    if (event.key === "Escape") {
+      onExpand();
+    }
+  }
+</script>
+
+<div class="compact-container {getStateGlow()}">
+  <!-- Character sprite (smaller) -->
+  <div class="compact-character">
+    <div class="sprite-wrapper {getAnimationClass()}">
+      <img
+        src="/sprites/{info.spriteFile}"
+        alt="Hikari - {info.label}"
+        class="compact-sprite"
+        onerror={(e) => {
+          const target = e.currentTarget as HTMLImageElement;
+          target.src = "/sprites/placeholder.svg";
+        }}
+      />
+    </div>
+    <div class="state-badge">{info.label}</div>
+  </div>
+
+  <!-- Recent message preview -->
+  <div class="message-preview">
+    {#if recentMessages.length > 0}
+      {#each recentMessages.slice(-1) as msg}
+        <div class="preview-message {msg.type}">
+          {msg.content}
+        </div>
+      {/each}
+    {:else}
+      <div class="preview-message system">Ask me anything~</div>
+    {/if}
+  </div>
+
+  <!-- Compact input -->
+  <form onsubmit={handleSubmit} class="compact-input-form">
+    <input
+      type="text"
+      bind:value={inputValue}
+      onkeydown={handleKeyDown}
+      placeholder={isConnected ? "Quick message..." : "Not connected"}
+      disabled={isSubmitting || !isConnected}
+      class="compact-input"
+    />
+
+    <div class="compact-buttons">
+      {#if isProcessing}
+        <button type="button" onclick={handleInterrupt} class="compact-btn stop-btn" title="Stop">
+          ■
+        </button>
+      {:else}
+        <button
+          type="submit"
+          disabled={!isConnected || isSubmitting || !inputValue.trim()}
+          class="compact-btn send-btn"
+          title="Send"
+        >
+          →
+        </button>
+      {/if}
+
+      <button type="button" onclick={onExpand} class="compact-btn expand-btn" title="Expand (Esc)">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <polyline points="15 3 21 3 21 9"></polyline>
+          <polyline points="9 21 3 21 3 15"></polyline>
+          <line x1="21" y1="3" x2="14" y2="10"></line>
+          <line x1="3" y1="21" x2="10" y2="14"></line>
+        </svg>
+      </button>
+    </div>
+  </form>
+
+  <!-- Streamer mode indicator -->
+  {#if streamerModeActive}
+    <div class="compact-live-indicator" title="Streamer mode active"></div>
+  {/if}
+</div>
+
+<style>
+  .compact-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+    padding: 12px;
+    gap: 8px;
+    position: relative;
+    transition: all 0.3s ease;
+  }
+
+  .compact-container::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: 2px;
+    background: transparent;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+    border-radius: 8px;
+  }
+
+  .glow-thinking {
+    box-shadow: inset 0 0 30px rgba(147, 51, 234, 0.15);
+  }
+
+  .glow-thinking::before {
+    background: linear-gradient(180deg, #9333ea, var(--trans-blue));
+    opacity: 0.6;
+  }
+
+  .glow-typing {
+    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.15);
+  }
+
+  .glow-typing::before {
+    background: linear-gradient(180deg, #3b82f6, var(--trans-pink));
+    opacity: 0.6;
+  }
+
+  .glow-success {
+    box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.15);
+  }
+
+  .glow-success::before {
+    background: linear-gradient(180deg, #10b981, var(--trans-blue));
+    opacity: 0.6;
+  }
+
+  .glow-error {
+    box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.15);
+  }
+
+  .glow-error::before {
+    background: linear-gradient(180deg, #ef4444, var(--trans-pink));
+    opacity: 0.6;
+  }
+
+  .compact-character {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    min-height: 0;
+    gap: 4px;
+  }
+
+  .sprite-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+  }
+
+  .compact-sprite {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  .state-badge {
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 600;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    color: var(--accent-primary);
+  }
+
+  .message-preview {
+    min-height: 24px;
+    max-height: 48px;
+    overflow: hidden;
+  }
+
+  .preview-message {
+    font-size: 11px;
+    line-height: 1.3;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    padding: 4px 8px;
+    background: var(--bg-tertiary);
+    border-radius: 6px;
+  }
+
+  .preview-message.user {
+    color: var(--trans-pink);
+  }
+
+  .preview-message.assistant {
+    color: var(--trans-blue);
+  }
+
+  .preview-message.error {
+    color: #ef4444;
+  }
+
+  .compact-input-form {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .compact-input {
+    flex: 1;
+    padding: 8px 12px;
+    font-size: 12px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-primary);
+    outline: none;
+    transition: all 0.2s;
+  }
+
+  .compact-input:focus {
+    border-color: var(--trans-blue);
+    box-shadow: 0 0 0 2px rgba(91, 206, 250, 0.2);
+  }
+
+  .compact-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .compact-input::placeholder {
+    color: var(--text-tertiary);
+  }
+
+  .compact-buttons {
+    display: flex;
+    gap: 4px;
+  }
+
+  .compact-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .compact-btn:hover:not(:disabled) {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-primary);
+    color: var(--accent-primary);
+  }
+
+  .compact-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .send-btn:not(:disabled) {
+    background: var(--trans-gradient-vibrant);
+    border-color: transparent;
+    color: #1a1a2e;
+  }
+
+  .stop-btn {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: rgb(239, 68, 68);
+    color: rgb(248, 113, 113);
+  }
+
+  .stop-btn:hover {
+    background: rgba(239, 68, 68, 0.3);
+  }
+
+  .expand-btn {
+    background: transparent;
+  }
+
+  .compact-live-indicator {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgb(239, 68, 68);
+    animation: pulse-live 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse-live {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+    }
+    50% {
+      opacity: 0.7;
+      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
+    }
+  }
+
+  /* Character animations (smaller scale for compact) */
+  @keyframes idle-bob {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-3px);
+    }
+  }
+
+  @keyframes thinking-sway {
+    0%,
+    100% {
+      transform: rotate(-1deg);
+    }
+    50% {
+      transform: rotate(1deg);
+    }
+  }
+
+  @keyframes typing-bounce {
+    0%,
+    100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(-2px) scale(1.01);
+    }
+  }
+
+  @keyframes searching-look {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-3px);
+    }
+    75% {
+      transform: translateX(3px);
+    }
+  }
+
+  @keyframes celebrate {
+    0%,
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+    50% {
+      transform: scale(1.05) rotate(3deg);
+    }
+  }
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    25%,
+    75% {
+      transform: translateX(-3px);
+    }
+    50% {
+      transform: translateX(3px);
+    }
+  }
+
+  .animate-idle {
+    animation: idle-bob 3s ease-in-out infinite;
+  }
+
+  .animate-thinking {
+    animation: thinking-sway 2s ease-in-out infinite;
+  }
+
+  .animate-typing {
+    animation: typing-bounce 0.5s ease-in-out infinite;
+  }
+
+  .animate-searching {
+    animation: searching-look 1.5s ease-in-out infinite;
+  }
+
+  .animate-celebrate {
+    animation: celebrate 0.8s ease-in-out;
+  }
+
+  .animate-shake {
+    animation: shake 0.5s ease-in-out;
+  }
+</style>

src/lib/components/ConfigSidebar.svelte

@@ -29,6 +29,7 @@
     font_size: 14,
     streamer_mode: false,
     streamer_hide_paths: false,
+    compact_mode: false,
   });
 
   let isOpen = $state(false);

src/lib/components/KeyboardShortcutsModal.svelte

@@ -12,6 +12,8 @@
         { keys: ["Escape"], description: "Close modals and panels" },
         { keys: ["Ctrl", "L"], description: "Clear the terminal" },
         { keys: ["Ctrl", ","], description: "Open settings" },
+        { keys: ["Ctrl", "Shift", "M"], description: "Toggle compact mode" },
+        { keys: ["Ctrl", "Shift", "S"], description: "Toggle streamer mode" },
       ],
     },
     {

src/lib/components/StatusBar.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   interface Props {
     onToggleAchievements?: () => void;
+    onToggleCompact?: () => void;
   }
 
-  const { onToggleAchievements = () => {} }: Props = $props();
+  const { onToggleAchievements = () => {}, onToggleCompact = () => {} }: Props = $props();
 
   import { invoke } from "@tauri-apps/api/core";
   import { getVersion } from "@tauri-apps/api/app";
@@ -56,6 +57,7 @@
     minimize_to_tray: false,
     streamer_mode: false,
     streamer_hide_paths: false,
+    compact_mode: false,
   });
 
   let streamerModeActive = $state(false);
@@ -217,6 +219,20 @@
     {#if streamerModeActive}
       <div class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse" title="Streamer mode active (Ctrl+Shift+S to toggle)"></div>
     {/if}
+    <button
+      onclick={onToggleCompact}
+      class="p-1 text-gray-500 icon-trans-hover"
+      title="Compact Mode (Ctrl+Shift+M)"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+        />
+      </svg>
+    </button>
     <button
       onclick={toggleAchievements}
       class="p-1 text-gray-500 icon-trans-hover relative"

src/lib/stores/config.ts

@@ -21,6 +21,7 @@ export interface HikariConfig {
   font_size: number;
   streamer_mode: boolean;
   streamer_hide_paths: boolean;
+  compact_mode: boolean;
 }
 
 const defaultConfig: HikariConfig = {
@@ -41,6 +42,7 @@ const defaultConfig: HikariConfig = {
   font_size: 14,
   streamer_mode: false,
   streamer_hide_paths: false,
+  compact_mode: false,
 };
 
 function createConfigStore() {
@@ -155,6 +157,16 @@ function createConfigStore() {
       config.subscribe((c) => (currentConfig = c))();
       await updateConfig({ streamer_mode: !currentConfig.streamer_mode });
     },
+
+    toggleCompactMode: async () => {
+      let currentConfig: HikariConfig = defaultConfig;
+      config.subscribe((c) => (currentConfig = c))();
+      await updateConfig({ compact_mode: !currentConfig.compact_mode });
+    },
+
+    setCompactMode: async (enabled: boolean) => {
+      await updateConfig({ compact_mode: enabled });
+    },
   };
 }
 
@@ -186,6 +198,7 @@ export const configStore = createConfigStore();
 export const isDarkTheme = derived(configStore.config, ($config) => $config.theme === "dark");
 
 export const isStreamerMode = derived(configStore.config, ($config) => $config.streamer_mode);
+export const isCompactMode = derived(configStore.config, ($config) => $config.compact_mode);
 export const shouldHidePaths = derived(
   configStore.config,
   ($config) => $config.streamer_mode && $config.streamer_hide_paths

src/routes/+page.svelte

@@ -3,16 +3,17 @@
   import { invoke } from "@tauri-apps/api/core";
   import { get } from "svelte/store";
   import { initializeTauriListeners, cleanupTauriListeners } from "$lib/tauri";
-  import { configStore, applyTheme, applyFontSize } from "$lib/stores/config";
+  import { configStore, applyTheme, applyFontSize, isCompactMode } from "$lib/stores/config";
   import { initNotificationSync, cleanupNotificationSync } from "$lib/stores/notifications";
   import { conversationsStore } from "$lib/stores/conversations";
   import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
-  import { getCurrentWindow } from "@tauri-apps/api/window";
+  import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
   import "$lib/notifications/testNotifications";
   import Terminal from "$lib/components/Terminal.svelte";
   import InputBar from "$lib/components/InputBar.svelte";
   import StatusBar from "$lib/components/StatusBar.svelte";
   import AnimeGirl from "$lib/components/AnimeGirl.svelte";
+  import CompactMode from "$lib/components/CompactMode.svelte";
   import { characterState } from "$lib/stores/character";
   import type { CharacterState } from "$lib/types/states";
   import PermissionModal from "$lib/components/PermissionModal.svelte";
@@ -26,11 +27,23 @@
   let updateNotification: UpdateNotification;
   let achievementPanelOpen = $state(false);
   let currentCharacterState: CharacterState = $state("idle");
+  let compactModeActive = $state(false);
+
+  // Window size constants
+  const COMPACT_WIDTH = 280;
+  const COMPACT_HEIGHT = 400;
+
+  // Store the previous window size to restore when exiting compact mode
+  let previousWindowSize: { width: number; height: number } | null = null;
 
   characterState.subscribe((state) => {
     currentCharacterState = state;
   });
 
+  isCompactMode.subscribe((value) => {
+    compactModeActive = value;
+  });
+
   function getPanelGlowClass(): string {
     switch (currentCharacterState) {
       case "thinking":
@@ -156,6 +169,13 @@
       configStore.toggleStreamerMode();
       return;
     }
+
+    // Ctrl+Shift+M - Toggle compact mode
+    if (event.ctrlKey && event.shiftKey && event.key === "M") {
+      event.preventDefault();
+      toggleCompactMode();
+      return;
+    }
   }
 
   async function handleInterrupt() {
@@ -170,6 +190,59 @@
     }
   }
 
+  async function enterCompactMode() {
+    try {
+      const window = getCurrentWindow();
+      const currentSize = await window.innerSize();
+      const scaleFactor = await window.scaleFactor();
+
+      // Save current window size (convert from physical to logical pixels)
+      // innerSize() returns physical pixels, but setSize() with LogicalSize expects logical
+      previousWindowSize = {
+        width: Math.round(currentSize.width / scaleFactor),
+        height: Math.round(currentSize.height / scaleFactor),
+      };
+
+      // Resize to compact dimensions
+      await window.setSize(new LogicalSize(COMPACT_WIDTH, COMPACT_HEIGHT));
+
+      // Enable compact mode in config
+      await configStore.setCompactMode(true);
+    } catch (error) {
+      console.error("Failed to enter compact mode:", error);
+    }
+  }
+
+  async function exitCompactMode() {
+    try {
+      const window = getCurrentWindow();
+
+      // Only resize if we have a saved previous size
+      // (i.e., user entered compact mode during this session)
+      // Otherwise, just expand to a reasonable default
+      if (previousWindowSize) {
+        await window.setSize(new LogicalSize(previousWindowSize.width, previousWindowSize.height));
+        previousWindowSize = null;
+      } else {
+        // No saved size (e.g., app started in compact mode) - use modest default
+        await window.setSize(new LogicalSize(900, 650));
+      }
+
+      // Disable compact mode in config
+      await configStore.setCompactMode(false);
+    } catch (error) {
+      console.error("Failed to exit compact mode:", error);
+    }
+  }
+
+  async function toggleCompactMode() {
+    if (compactModeActive) {
+      await exitCompactMode();
+    } else {
+      await enterCompactMode();
+    }
+  }
+
   onMount(async () => {
     if (!initialized) {
       initialized = true;
@@ -206,6 +279,12 @@
       if (config.update_checks_enabled) {
         updateNotification?.checkForUpdates();
       }
+
+      // Apply compact mode if saved (resize window)
+      if (config.compact_mode) {
+        const window = getCurrentWindow();
+        await window.setSize(new LogicalSize(COMPACT_WIDTH, COMPACT_HEIGHT));
+      }
     }
   });
 
@@ -219,43 +298,54 @@
   });
 </script>
 
-<div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
+{#if compactModeActive}
-  <StatusBar onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)} />
+  <!-- Compact mode: minimal widget interface -->
+  <div class="app-container compact-app h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
+    <CompactMode onExpand={exitCompactMode} />
+  </div>
+{:else}
+  <!-- Full mode: standard interface -->
+  <div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
+    <StatusBar
+      onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)}
+      onToggleCompact={enterCompactMode}
+    />
 
-  <main class="flex-1 flex overflow-hidden">
+    <main class="flex-1 flex overflow-hidden">
-    <!-- Left panel: Character display -->
+      <!-- Left panel: Character display -->
-    <div
+      <div
-      class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
+        class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
-      style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
+        style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
-    >
+      >
-      <AnimeGirl />
+        <AnimeGirl />
-    </div>
+      </div>
 
-    <!-- Resize handle -->
+      <!-- Resize handle -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
+      <div
-      class="resize-handle w-1 cursor-col-resize bg-[var(--border-color)] hover:bg-[var(--accent-primary)] transition-colors flex-shrink-0"
+        class="resize-handle w-1 cursor-col-resize bg-[var(--border-color)] hover:bg-[var(--accent-primary)] transition-colors flex-shrink-0"
-      class:bg-[var(--accent-primary)]={isResizing}
+        class:bg-[var(--accent-primary)]={isResizing}
-      onmousedown={startResize}
+        onmousedown={startResize}
-    ></div>
+      ></div>
 
-    <!-- Right panel: Terminal and input -->
+      <!-- Right panel: Terminal and input -->
-    <div class="terminal-panel flex-1 flex flex-col min-w-0">
+      <div class="terminal-panel flex-1 flex flex-col min-w-0">
-      <Terminal />
+        <Terminal />
-      <InputBar />
+        <InputBar />
-    </div>
+      </div>
-  </main>
+    </main>
 
-  <PermissionModal />
+    <PermissionModal />
-  <UserQuestionModal />
+    <UserQuestionModal />
-  <ConfigSidebar />
+    <ConfigSidebar />
-  <AchievementNotification />
+    <AchievementNotification />
-  <AchievementsPanel
+    <AchievementsPanel
-    bind:isOpen={achievementPanelOpen}
+      bind:isOpen={achievementPanelOpen}
-    onClose={() => (achievementPanelOpen = false)}
+      onClose={() => (achievementPanelOpen = false)}
-  />
+    />
-  <UpdateNotification bind:this={updateNotification} />
+    <UpdateNotification bind:this={updateNotification} />
-</div>
+  </div>
+{/if}
 
 <style>
   .app-container {