feat: agent monitor characters, cast panel, WSL fixes, and Sonnet 4.6 (#149)

## Summary ### New Features - **Claude Sonnet 4.6 support** — added `claude-sonnet-4-6` as a selectable model in the config sidebar - **Anime girl characters for subagents** — each subagent in the agent monitor is automatically assigned one of six characters (Amari, Keiko, Minori, Reina, Tatsumi, Yumiko) with a unique name, CDN avatar, title, and lore-flavoured description; assignment avoids duplicates when possible - **"Meet the Team" cast panel** — a new modal accessible from the status bar introduces the full cast: Naomi (Chief hEx-ecutive Officer), Hikari (Chief Operating Officer), and the six subagent girls with their C-suite titles and character bios ### Bug Fixes - **"Already running" error on invalid working directory** — if a spawned Claude process exits unexpectedly (e.g. because the working directory doesn't exist), `try_wait()` now detects the stale handle and clears it before allowing a restart - **Working directory pre-validation** — on Windows, the app now runs `wsl -e test -d <dir>` before launching Claude; invalid directories surface a clear error immediately - **WSL binary detection** — on Windows, `wsl -e bash -lc "which claude"` is used to probe for the Claude binary inside WSL; on Linux/WSLg, `bash -lc "which claude"` is used as a login-shell fallback so GUI apps find the binary even without shell PATH - **WSL detection fix for production builds** — `detect_wsl()` now short-circuits at compile time on Windows targets, preventing inherited `WSL_DISTRO_NAME` env vars from misrouting native Windows binaries through the Linux code path ✨ This PR was crafted with love by Hikari~ 🌸 Reviewed-on: #149 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-02-23 21:36:09 -08:00
parent bd3438c7be
commit d8cf5504d6
12 changed files with 467 additions and 41 deletions
@@ -270,6 +270,14 @@
                    />
                  </svg>
                {/if}
+                <img
+                  src={agent.characterAvatar}
+                  alt={agent.characterName}
+                  class="w-5 h-5 rounded-full object-cover"
+                />
+                <span class="text-[10px] font-medium text-[var(--text-primary)]">
+                  {agent.characterName}
+                </span>
                <span
                  class="px-1.5 py-0.5 text-[10px] rounded border {getStatusBadgeClass(
                    agent.status
@@ -0,0 +1,140 @@
+<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>
@@ -83,8 +83,9 @@
    { value: "", label: "Default (from ~/.claude)" },
    // Current generation (Claude 4.6)
    { value: "claude-opus-4-6", label: "Claude Opus 4.6 (Most Capable)" },
+    { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6 (Recommended)" },
    // Previous generation (Claude 4.5)
-    { value: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5 (Recommended)" },
+    { value: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5" },
    { value: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5 (Fast & Cheap)" },
    { value: "claude-opus-4-5-20251101", label: "Claude Opus 4.5" },
    // Previous generation (Claude 4.x)
@@ -27,6 +27,7 @@
  import GitPanel from "./GitPanel.svelte";
  import ProfilePanel from "./ProfilePanel.svelte";
  import AgentMonitorPanel from "./AgentMonitorPanel.svelte";
+  import CastPanel from "./CastPanel.svelte";
  import PluginManagementPanel from "./PluginManagementPanel.svelte";
  import McpManagementPanel from "./McpManagementPanel.svelte";
  import { conversationsStore } from "$lib/stores/conversations";
@@ -56,6 +57,7 @@
  let showGitPanel = $state(false);
  let showProfile = $state(false);
  let showAgentMonitor = $state(false);
+  let showCastPanel = $state(false);
  let showPluginPanel = $state(false);
  let showMcpPanel = $state(false);
  let isSummarising = $state(false);
@@ -519,6 +521,20 @@
        />
      </svg>
    </button>
+    <button
+      onclick={() => (showCastPanel = true)}
+      class="p-1 text-gray-500 icon-trans-hover"
+      title="Meet the Team"
+    >
+      <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+        />
+      </svg>
+    </button>
    <button
      onclick={() => (showAgentMonitor = !showAgentMonitor)}
      class="p-1 text-gray-500 icon-trans-hover relative {showAgentMonitor
@@ -737,6 +753,10 @@
  <AgentMonitorPanel isOpen={showAgentMonitor} onClose={() => (showAgentMonitor = false)} />
 {/if}

+{#if showCastPanel}
+  <CastPanel onClose={() => (showCastPanel = false)} />
+{/if}
+
 {#if showPluginPanel}
  <PluginManagementPanel onClose={() => (showPluginPanel = false)} />
 {/if}