feat: add supported CLI version badge to header

Adds a second badge alongside the existing CLI version display showing
the highest audited version (currently 2.1.33). The badge is
colour-coded: green when installed matches supported, amber when ahead,
red when behind, and neutral grey whilst loading.

src/lib/components/CliVersion.svelte

@@ -2,15 +2,39 @@
   import { invoke } from "@tauri-apps/api/core";
   import { onMount } from "svelte";
 
-  let version = $state("Loading...");
+  const SUPPORTED_CLI_VERSION = "2.1.33";
+
+  let installedVersion = $state("Loading...");
+
+  function compareVersions(a: string, b: string): number {
+    const aParts = a.split(".").map(Number);
+    const bParts = b.split(".").map(Number);
+    for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+      const aVal = aParts[i] ?? 0;
+      const bVal = bParts[i] ?? 0;
+      if (aVal > bVal) return 1;
+      if (aVal < bVal) return -1;
+    }
+    return 0;
+  }
+
+  let supportedBadgeState = $derived.by(() => {
+    if (installedVersion === "Loading..." || installedVersion === "Unknown") {
+      return "neutral";
+    }
+    const cmp = compareVersions(installedVersion, SUPPORTED_CLI_VERSION);
+    if (cmp > 0) return "ahead";
+    if (cmp < 0) return "behind";
+    return "current";
+  });
 
   async function fetchVersion() {
     try {
       const result = await invoke<string>("get_claude_version");
-      version = result;
+      installedVersion = result;
     } catch (error) {
       console.error("Failed to get Claude CLI version:", error);
-      version = "Unknown";
+      installedVersion = "Unknown";
     }
   }
 
@@ -19,25 +43,50 @@
   });
 </script>
 
-<div class="cli-version">
+<div class="cli-versions">
-  <svg
+  <div class="cli-version">
-    class="terminal-icon"
+    <svg
-    width="14"
+      class="terminal-icon"
-    height="14"
+      width="14"
-    viewBox="0 0 24 24"
+      height="14"
-    fill="none"
+      viewBox="0 0 24 24"
-    stroke="currentColor"
+      fill="none"
-    stroke-width="2"
+      stroke="currentColor"
-    stroke-linecap="round"
+      stroke-width="2"
-    stroke-linejoin="round"
+      stroke-linecap="round"
-  >
+      stroke-linejoin="round"
-    <polyline points="4 17 10 11 4 5" />
+    >
-    <line x1="12" y1="19" x2="20" y2="19" />
+      <polyline points="4 17 10 11 4 5" />
-  </svg>
+      <line x1="12" y1="19" x2="20" y2="19" />
-  <span class="version-text">CLI {version}</span>
+    </svg>
+    <span class="version-text">CLI {installedVersion}</span>
+  </div>
+
+  <div class="cli-version supported {supportedBadgeState}" title="Highest audited CLI version">
+    <svg
+      class="terminal-icon"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </svg>
+    <span class="version-text">Supported {SUPPORTED_CLI_VERSION}</span>
+  </div>
 </div>
 
 <style>
+  .cli-versions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+
   .cli-version {
     display: flex;
     align-items: center;
@@ -57,6 +106,21 @@
     color: var(--accent-primary);
   }
 
+  .cli-version.supported.current {
+    border-color: var(--success-color, #4caf50);
+    color: var(--success-color, #4caf50);
+  }
+
+  .cli-version.supported.ahead {
+    border-color: var(--warning-color, #ff9800);
+    color: var(--warning-color, #ff9800);
+  }
+
+  .cli-version.supported.behind {
+    border-color: var(--error-color, #f44336);
+    color: var(--error-color, #f44336);
+  }
+
   .terminal-icon {
     flex-shrink: 0;
     opacity: 0.7;