feat: show update-available indicator in TUI footer (#175)

* feat: show update-available indicator in TUI footer

Add a persistent, subtle upgrade indicator in both the home page and
session footers. When a newer version of Altimate Code is available,
the footer shows `current → latest · altimate upgrade` in muted/accent
colors instead of just the version number.

- Add `UpgradeIndicator` component and `getAvailableVersion` utility
- Store available version in KV on `UpdateAvailable` event for persistence
- Show indicator in both home and session footers
- Fix toast message to say `altimate upgrade` instead of `opencode upgrade`
- Add 24 tests covering version comparison, KV integration, and event flow

Closes #173

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address bot review findings for upgrade indicator

- F1: Clear KV on `Updated` event — set `update_available_version` to
  current `VERSION` after autoupgrade so indicator hides immediately
- F2: Add semver comparison via `isNewer()` — prevents downgrade arrow
  when user upgrades externally past the stored version
- F3: Reject empty string as invalid version in `getAvailableVersion()`
- Update tests to cover all three fixes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address code review findings for upgrade indicator

- Replace custom `isNewer` with `semver.gt()` — `semver` is already a
  dependency; handles prerelease tags and rejects corrupted KV values
- Use `UPGRADE_KV_KEY` constant in `app.tsx` instead of magic string
- Add `fallback` prop to `UpgradeIndicator` — eliminates duplicate
  `getAvailableVersion` call in `home.tsx` (Gemini design suggestion)
- Remove unused `UPGRADE_KV_KEY` re-export from `upgrade-indicator.tsx`
- Add conditional check before `kv.set` on `Updated` event to avoid
  unnecessary file writes
- Fix tautological test, add tests for corrupted/prerelease versions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* test: add e2e tests for upgrade indicator lifecycle

Add 21 end-to-end tests covering the full upgrade indicator flow:
- Full lifecycle: fresh install → UpdateAvailable → indicator shown →
  Updated → indicator hidden
- F1 regression: stale indicator after autoupgrade is cleared
- F2 regression: downgrade arrow prevention with `semver.gt()`
- F3 regression: empty/corrupted/non-string KV values rejected
- Semver integration: prerelease, build metadata, v-prefix handling
- Edge cases: rapid events, Updated without UpdateAvailable, same
  version available as current

Uses mock KV store pattern consistent with codebase test conventions
(algorithm extraction, no Solid.js context required).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: clarify upgrade indicator wording

Change "available" to "update available" so users clearly understand
a new version upgrade is pending, not just that a version exists.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: make upgrade indicator responsive for small screens

On narrow terminals (<100 cols), hide "update available ·" text and
show only the essential: ↑ 0.6.0 altimate upgrade

Wide (100+): ↑ 0.6.0 update available · altimate upgrade
Narrow (<100): ↑ 0.6.0 altimate upgrade

Uses useTerminalDimensions() for reactive width detection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: anandgupta42

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -6,6 +6,7 @@ import { RouteProvider, useRoute } from "@tui/context/route"
 import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
 import { win32DisableProcessedInput, win32FlushInputBuffer, win32InstallCtrlCGuard } from "./win32"
 import { Installation } from "@/installation"
+import { UPGRADE_KV_KEY } from "./component/upgrade-indicator-utils"
 import { Flag } from "@/flag/flag"
 import { Log } from "@/util/log"
 import { DialogProvider, useDialog } from "@tui/ui/dialog"
@@ -842,13 +843,20 @@ function App() {
 
   // altimate_change start — branding: altimate upgrade
   sdk.event.on(Installation.Event.UpdateAvailable.type, (evt) => {
+    kv.set(UPGRADE_KV_KEY, evt.properties.version)
     toast.show({
       variant: "info",
       title: "Update Available",
       message: `Altimate Code v${evt.properties.version} is available. Run 'altimate upgrade' to update manually.`,
       duration: 10000,
     })
   })
+
+  sdk.event.on(Installation.Event.Updated.type, () => {
+    if (kv.get(UPGRADE_KV_KEY) !== Installation.VERSION) {
+      kv.set(UPGRADE_KV_KEY, Installation.VERSION)
+    }
+  })
   // altimate_change end
 
   return (

packages/opencode/src/cli/cmd/tui/component/upgrade-indicator-utils.ts

@@ -0,0 +1,22 @@
+import semver from "semver"
+import { Installation } from "@/installation"
+
+export const UPGRADE_KV_KEY = "update_available_version"
+
+function isNewer(candidate: string, current: string): boolean {
+  // Dev mode: show indicator for any valid semver candidate
+  if (current === "local") {
+    return semver.valid(candidate) !== null
+  }
+  if (!semver.valid(candidate) || !semver.valid(current)) {
+    return false
+  }
+  return semver.gt(candidate, current)
+}
+
+export function getAvailableVersion(kvValue: unknown): string | undefined {
+  if (typeof kvValue !== "string" || !kvValue) return undefined
+  if (kvValue === Installation.VERSION) return undefined
+  if (!isNewer(kvValue, Installation.VERSION)) return undefined
+  return kvValue
+}

packages/opencode/src/cli/cmd/tui/component/upgrade-indicator.tsx

@@ -0,0 +1,29 @@
+import { createMemo, Show, type JSX } from "solid-js"
+import { useTerminalDimensions } from "@opentui/solid"
+import { useTheme } from "@tui/context/theme"
+import { useKV } from "../context/kv"
+import { UPGRADE_KV_KEY, getAvailableVersion } from "./upgrade-indicator-utils"
+
+export function UpgradeIndicator(props: { fallback?: JSX.Element }) {
+  const { theme } = useTheme()
+  const kv = useKV()
+  const dimensions = useTerminalDimensions()
+
+  const latestVersion = createMemo(() => getAvailableVersion(kv.get(UPGRADE_KV_KEY)))
+  const isCompact = createMemo(() => dimensions().width < 100)
+
+  return (
+    <Show when={latestVersion()} fallback={props.fallback}>
+      {(version) => (
+        <box flexDirection="row" gap={1} flexShrink={0}>
+          <text fg={theme.success}>↑</text>
+          <text fg={theme.accent}>{version()}</text>
+          <Show when={!isCompact()}>
+            <text fg={theme.textMuted}>update available ·</text>
+          </Show>
+          <text fg={theme.textMuted}>altimate upgrade</text>
+        </box>
+      )}
+    </Show>
+  )
+}

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -15,6 +15,7 @@ import { Installation } from "@/installation"
 import { useKV } from "../context/kv"
 import { useCommandDialog } from "../component/dialog-command"
 import { useLocal } from "../context/local"
+import { UpgradeIndicator } from "../component/upgrade-indicator"
 
 // TODO: what is the best way to do this?
 let once = false
@@ -152,7 +153,7 @@ export function Home() {
         </box>
         <box flexGrow={1} />
         <box flexShrink={0}>
-          <text fg={theme.textMuted}>{Installation.VERSION}</text>
+          <UpgradeIndicator fallback={<text fg={theme.textMuted}>{Installation.VERSION}</text>} />
         </box>
       </box>
     </>

packages/opencode/src/cli/cmd/tui/routes/session/footer.tsx

@@ -8,6 +8,7 @@ import { useRoute } from "../../context/route"
 // altimate_change start - yolo mode visual indicator
 import { Flag } from "@/flag/flag"
 // altimate_change end
+import { UpgradeIndicator } from "../../component/upgrade-indicator"
 
 export function Footer() {
   const { theme } = useTheme()
@@ -95,6 +96,7 @@ export function Footer() {
             <text fg={theme.textMuted}>/status</text>
           </Match>
         </Switch>
+        <UpgradeIndicator />
       </box>
     </box>
   )