From 5cdb4508aa5395aa934ff26264c303784eb5954e Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Tue, 24 Feb 2026 13:12:37 -0800
Subject: [PATCH] feat: clean up CLI version display and add compatibility
 warnings

Strips the '(Claude Code)' suffix from the installed version badge so
it shows cleanly as 'CLI 2.1.50'. Also adds an italic warning message
after the supported badge when versions differ: amber text for newer
installs, red text for outdated installs.
---
 src/lib/components/CliVersion.svelte | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/CliVersion.svelte b/src/lib/components/CliVersion.svelte
index 8c1e11e..d55763a 100644
--- a/src/lib/components/CliVersion.svelte
+++ b/src/lib/components/CliVersion.svelte
@@ -18,6 +18,8 @@
     return 0;
   }
 
+  let displayVersion = $derived(installedVersion.split(" (")[0]);
+
   let supportedBadgeState = $derived.by(() => {
     if (installedVersion === "Loading..." || installedVersion === "Unknown") {
       return "neutral";
@@ -61,7 +63,7 @@
       <polyline points="4 17 10 11 4 5" />
       <line x1="12" y1="19" x2="20" y2="19" />
     </svg>
-    <span class="version-text">CLI {installedVersion}</span>
+    <span class="version-text">CLI {displayVersion}</span>
   </div>
 
   <div class="cli-version supported {supportedBadgeState}" title="Highest audited CLI version">
@@ -80,6 +82,16 @@
     </svg>
     <span class="version-text">Supported {SUPPORTED_CLI_VERSION}</span>
   </div>
+
+  {#if supportedBadgeState === "ahead"}
+    <span class="version-warning ahead"
+      >Your version is newer, some features may not be supported</span
+    >
+  {:else if supportedBadgeState === "behind"}
+    <span class="version-warning behind"
+      >Your version is out of date, please update to ensure compatibility</span
+    >
+  {/if}
 </div>
 
 <style>
@@ -131,4 +143,18 @@
   .version-text {
     white-space: nowrap;
   }
+
+  .version-warning {
+    font-size: 0.75rem;
+    font-style: italic;
+    white-space: nowrap;
+  }
+
+  .version-warning.ahead {
+    color: var(--warning-color, #ff9800);
+  }
+
+  .version-warning.behind {
+    color: var(--error-color, #f44336);
+  }
 </style>