fix(app): use v2 tooltip for session context button

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>

packages/app/src/components/session-context-usage.tsx

@@ -1,5 +1,6 @@
 import { Match, Show, Switch, createMemo } from "solid-js"
 import { Tooltip, type TooltipProps } from "@opencode-ai/ui/tooltip"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
 import { Button } from "@opencode-ai/ui/button"
@@ -90,61 +91,78 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
     </div>
   )
 
-  const tooltipValue = () => (
+  const tooltipValue = () => {
-    <div>
+    const useV2 = buttonAppearance() === "v2"
-      <Show when={tokens()}>
+    const valueClass = useV2 ? "text-v2-text-text-base" : "text-text-invert-strong"
-        {(value) => (
+    const labelClass = useV2 ? "text-v2-text-text-muted" : "text-text-invert-base"
-          <div class="flex items-center gap-2">
+
-            <span class="text-text-invert-strong">
+    return (
-              {getSessionTokenTotal(value())?.toLocaleString(language.intl())}
+      <div classList={{ "flex flex-col gap-1": useV2 }}>
-            </span>
+        <Show when={tokens()}>
-            <span class="text-text-invert-base">{language.t("context.usage.tokens")}</span>
+          {(value) => (
-          </div>
+            <div class="flex items-center gap-2">
-        )}
+              <span class={valueClass}>{getSessionTokenTotal(value())?.toLocaleString(language.intl())}</span>
-      </Show>
+              <span class={labelClass}>{language.t("context.usage.tokens")}</span>
-      <Show when={context()}>
+            </div>
-        {(ctx) => (
+          )}
-          <div class="flex items-center gap-2">
+        </Show>
-            <span class="text-text-invert-strong">{ctx().usage ?? 0}%</span>
+        <Show when={context()}>
-            <span class="text-text-invert-base">{language.t("context.usage.usage")}</span>
+          {(ctx) => (
-          </div>
+            <div class="flex items-center gap-2">
-        )}
+              <span class={valueClass}>{ctx().usage ?? 0}%</span>
-      </Show>
+              <span class={labelClass}>{language.t("context.usage.usage")}</span>
-      <div class="flex items-center gap-2">
+            </div>
-        <span class="text-text-invert-strong">{cost()}</span>
+          )}
-        <span class="text-text-invert-base">{language.t("context.usage.cost")}</span>
+        </Show>
+        <div class="flex items-center gap-2">
+          <span class={valueClass}>{cost()}</span>
+          <span class={labelClass}>{language.t("context.usage.cost")}</span>
+        </div>
       </div>
-    </div>
+    )
+  }
+
+  const trigger = () => (
+    <Switch>
+      <Match when={variant() === "indicator"}>{circle()}</Match>
+      <Match when={buttonAppearance() === "v2"}>
+        <IconButtonV2
+          type="button"
+          variant="ghost-muted"
+          size="large"
+          icon={circleV2()}
+          onClick={openContext}
+          aria-label={language.t("context.usage.view")}
+        />
+      </Match>
+      <Match when={true}>
+        <Button
+          type="button"
+          variant="ghost"
+          class="size-6"
+          onClick={openContext}
+          aria-label={language.t("context.usage.view")}
+        >
+          {circle()}
+        </Button>
+      </Match>
+    </Switch>
   )
 
   return (
     <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
+      <Show
-        <Switch>
+        when={buttonAppearance() === "v2"}
-          <Match when={variant() === "indicator"}>{circle()}</Match>
+        fallback={
-          <Match when={buttonAppearance() === "v2"}>
+          <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
-            <IconButtonV2
+            {trigger()}
-              type="button"
+          </Tooltip>
-              variant="ghost-muted"
+        }
-              size="large"
+      >
-              icon={circleV2()}
+        <TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"}>
-              onClick={openContext}
+          {trigger()}
-              aria-label={language.t("context.usage.view")}
+        </TooltipV2>
-            />
+      </Show>
-          </Match>
-          <Match when={true}>
-            <Button
-              type="button"
-              variant="ghost"
-              class="size-6"
-              onClick={openContext}
-              aria-label={language.t("context.usage.view")}
-            >
-              {circle()}
-            </Button>
-          </Match>
-        </Switch>
-      </Tooltip>
     </Show>
   )
 }