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>