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

<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 { 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 (msg.content)}
        <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);
    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>