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,36 +91,38 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
     </div>
   )
 
-  const tooltipValue = () => (
+  const tooltipValue = () => {
-    <div>
+    const useV2 = buttonAppearance() === "v2"
+    const valueClass = useV2 ? "text-v2-text-text-base" : "text-text-invert-strong"
+    const labelClass = useV2 ? "text-v2-text-text-muted" : "text-text-invert-base"
+
+    return (
+      <div classList={{ "flex flex-col gap-1": useV2 }}>
         <Show when={tokens()}>
           {(value) => (
             <div class="flex items-center gap-2">
-            <span class="text-text-invert-strong">
+              <span class={valueClass}>{getSessionTokenTotal(value())?.toLocaleString(language.intl())}</span>
-              {getSessionTokenTotal(value())?.toLocaleString(language.intl())}
+              <span class={labelClass}>{language.t("context.usage.tokens")}</span>
-            </span>
-            <span class="text-text-invert-base">{language.t("context.usage.tokens")}</span>
             </div>
           )}
         </Show>
         <Show when={context()}>
           {(ctx) => (
             <div class="flex items-center gap-2">
-            <span class="text-text-invert-strong">{ctx().usage ?? 0}%</span>
+              <span class={valueClass}>{ctx().usage ?? 0}%</span>
-            <span class="text-text-invert-base">{language.t("context.usage.usage")}</span>
+              <span class={labelClass}>{language.t("context.usage.usage")}</span>
             </div>
           )}
         </Show>
         <div class="flex items-center gap-2">
-        <span class="text-text-invert-strong">{cost()}</span>
+          <span class={valueClass}>{cost()}</span>
-        <span class="text-text-invert-base">{language.t("context.usage.cost")}</span>
+          <span class={labelClass}>{language.t("context.usage.cost")}</span>
         </div>
       </div>
     )
+  }
 
-  return (
+  const trigger = () => (
-    <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
     <Switch>
       <Match when={variant() === "indicator"}>{circle()}</Match>
       <Match when={buttonAppearance() === "v2"}>
@@ -144,7 +147,22 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
         </Button>
       </Match>
     </Switch>
+  )
+
+  return (
+    <Show when={params.id}>
+      <Show
+        when={buttonAppearance() === "v2"}
+        fallback={
+          <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
+            {trigger()}
           </Tooltip>
+        }
+      >
+        <TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"}>
+          {trigger()}
+        </TooltipV2>
+      </Show>
     </Show>
   )
 }