fix(app): expose context pane on mobile web

* workaround tooltip ignoring touch events
* introduce third mobile tab state for context panel
* two-tap pattern for opening context tab from tooltip

Author: brittlewis12

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

@@ -1,4 +1,4 @@
-import { Match, Show, Switch, createMemo } from "solid-js"
+import { Match, Show, Switch, createMemo, createSignal, onCleanup } from "solid-js"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { Button } from "@opencode-ai/ui/button"
@@ -14,11 +14,17 @@ interface SessionContextUsageProps {
   variant?: "button" | "indicator"
 }
 
+const isTouch = () => window.matchMedia("(hover: none)").matches
+
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
   const params = useParams()
   const layout = useLayout()
   const language = useLanguage()
+  const [touchTooltip, setTouchTooltip] = createSignal(false)
+  let tooltipTimer: number | undefined
+
+  onCleanup(() => clearTimeout(tooltipTimer))
 
   const variant = createMemo(() => props.variant ?? "button")
   const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
@@ -59,10 +65,30 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const openContext = () => {
     if (!params.id) return
     view().reviewPanel.open()
+    view().mobileTab.set("context")
     tabs().open("context")
     tabs().setActive("context")
   }
 
+  const handleClick = () => {
+    if (variant() === "indicator") return
+    if (isTouch() && !touchTooltip()) {
+      setTouchTooltip(true)
+      clearTimeout(tooltipTimer)
+      tooltipTimer = window.setTimeout(() => setTouchTooltip(false), 3000)
+      return
+    }
+    setTouchTooltip(false)
+    openContext()
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    // On touch devices, we control the tooltip state ourselves via handleClick
+    // Ignore Kobalte's attempts to close it
+    if (isTouch()) return
+    setTouchTooltip(open)
+  }
+
   const circle = () => (
     <div class="p-1">
       <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
@@ -94,15 +120,20 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement="top">
+      <Tooltip
+        value={tooltipValue()}
+        placement="top"
+        open={touchTooltip() || undefined}
+        onOpenChange={handleOpenChange}
+      >
         <Switch>
           <Match when={variant() === "indicator"}>{circle()}</Match>
           <Match when={true}>
             <Button
               type="button"
               variant="ghost"
               class="size-6"
-              onClick={openContext}
+              onClick={handleClick}
               aria-label={language.t("context.usage.view")}
             >
               {circle()}

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

@@ -367,14 +367,14 @@ export function SessionContextTab(props: SessionContextTabProps) {
 
   return (
     <div
-      class="@container h-full overflow-y-auto no-scrollbar pb-10"
+      class="@container h-full overflow-y-auto no-scrollbar md:pb-10 pb-[calc(var(--prompt-height,6rem)+32px)]"
       ref={(el) => {
         scroll = el
         restoreScroll()
       }}
       onScroll={handleScroll}
     >
-      <div class="px-6 pt-4 flex flex-col gap-10">
+      <div class="px-4 md:px-6 pt-4 flex flex-col gap-10">
         <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
           <For each={stats()}>{(stat) => <Stat label={stat.label} value={stat.value} />}</For>
         </div>

packages/app/src/context/layout.tsx

@@ -92,6 +92,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         mobileSidebar: {
           opened: false,
         },
+        mobileTab: "session" as "session" | "review" | "context",
         sessionTabs: {} as Record<string, SessionTabs>,
         sessionView: {} as Record<string, SessionView>,
       }),
@@ -600,6 +601,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
               setStore("sessionView", session, "reviewOpen", open)
             },
           },
+          mobileTab: {
+            value: createMemo(() => store.mobileTab),
+            set(tab: "session" | "review" | "context") {
+              setStore("mobileTab", tab)
+            },
+          },
         }
       },
       tabs(sessionKey: string | Accessor<string>) {