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

<script lang="ts">
  import { CHARACTER_POOL } from "$lib/utils/agentCharacters";

  interface Props {
    onClose: () => void;
  }

  const { onClose }: Props = $props();
</script>

<div
  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
  onclick={onClose}
  role="button"
  tabindex="0"
  onkeydown={(e) => e.key === "Escape" && onClose()}
>
  <div
    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="cast-title"
    tabindex="-1"
  >
    <div class="flex items-center justify-between mb-6">
      <h2 id="cast-title" class="text-xl font-semibold text-[var(--text-primary)]">
        Meet the Team
      </h2>
      <button
        onclick={onClose}
        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
        aria-label="Close"
      >
        <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="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <!-- Principal cast: Hikari + Naomi -->
    <div class="grid grid-cols-1 gap-3 mb-6 sm:grid-cols-2">
      <div
        class="flex items-center gap-3 p-4 rounded-lg bg-[var(--bg-secondary)] border border-[var(--accent-primary)]/40"
      >
        <img
          src="https://cdn.nhcarrigan.com/hikari.png"
          alt="Hikari"
          class="w-16 h-16 object-cover rounded-full border-2 border-[var(--border-color)] shrink-0"
        />
        <div>
          <div class="flex items-center gap-2 mb-1">
            <span class="font-semibold text-[var(--text-primary)]">Hikari</span>
            <span
              class="text-xs px-2 py-0.5 rounded-full bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] font-medium"
            >
              Chief Operating Officer
            </span>
          </div>
          <p class="text-xs text-[var(--text-secondary)]">
            Holds the line so the others don't have to. Never without her clipboard — or her
            glasses.
          </p>
        </div>
      </div>
      <div
        class="flex items-center gap-3 p-4 rounded-lg bg-[var(--bg-secondary)] border border-[var(--accent-primary)]/40"
      >
        <img
          src="https://cdn.nhcarrigan.com/profile.png"
          alt="Naomi"
          class="w-16 h-16 object-cover rounded-full border-2 border-[var(--border-color)] shrink-0"
        />
        <div>
          <div class="flex items-center gap-2 mb-1">
            <span class="font-semibold text-[var(--text-primary)]">Naomi</span>
            <span
              class="text-xs px-2 py-0.5 rounded-full bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] font-medium"
            >
              Chief hEx-ecutive Officer
            </span>
          </div>
          <p class="text-xs text-[var(--text-secondary)]">
            A 525-year-old vampire running a tech company from behind a VTuber avatar. Fixes server
            crashes at 4 AM.
          </p>
        </div>
      </div>
    </div>

    <!-- Subagent girls grid -->
    <div>
      <h3 class="text-sm font-medium text-[var(--text-secondary)] uppercase tracking-wider mb-3">
        Subagent Squad
      </h3>
      <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
        {#each CHARACTER_POOL as character (character.name)}
          <div
            class="flex flex-col items-center gap-2 p-3 rounded-lg bg-[var(--bg-secondary)] border border-[var(--border-color)] text-center"
          >
            <img
              src={character.avatar}
              alt={character.name}
              class="w-14 h-14 object-cover rounded-full border-2 border-[var(--border-color)]"
            />
            <span class="text-sm font-medium text-[var(--text-primary)]">{character.name}</span>
            <span
              class="text-xs px-2 py-0.5 rounded-full bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] font-medium"
            >
              {character.title}
            </span>
            <p class="text-xs text-[var(--text-secondary)] leading-snug">{character.description}</p>
          </div>
        {/each}
      </div>
    </div>
  </div>
</div>

<style>
  [role="dialog"] {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
</style>