Make the Brain the Chat's living background; float components on legibility-floored Glass

packages/app/e2e/perf/brain-governor-trace.spec.ts

@@ -0,0 +1,161 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+/* Headless-Chromium rAF-interval trace over the real app — issue #63's
+   PRE-GATE PROXY. It boots the Chat on the >=40-card fixture thread with the
+   dev force-full-tempo hook (`?brainForceActive`: Brain pinned busy, perf
+   governor disabled), scrolls continuously for >=10s in EACH theme, and
+   emits a p95 / max-frame-time / frames>33ms report.
+
+   THIS IS NOT THE RELEASE GATE. A passing trace never closes #63's perf
+   criterion: only a manual sign-off on the pinned reference laptop
+   (battery-powered, VS Code webview, both themes) does — see the perf-gate
+   checklist on the PR. Accordingly this spec asserts the harness RUNS and
+   REPORTS (shape, duration, theme coverage, forced worst case); it asserts
+   no numeric frame-time outcome. */
+
+const SCROLL_MS = 11_000 // >=10s of continuous scroll per theme
+const PROXY_LABEL = "pre-gate proxy — does NOT close the release gate (manual reference-laptop sign-off required)"
+
+type ThemeTrace = {
+  theme: "dark" | "light"
+  colorScheme: string | undefined
+  forced: boolean
+  motion: string | undefined
+  durationMs: number
+  frames: number
+  meanMs: number
+  p95Ms: number
+  maxMs: number
+  over33: number
+  cardsSeen: number
+}
+
+test.describe("perf proxy: brain governor trace", () => {
+  test.setTimeout(300_000)
+
+  test("headless rAF trace over a >=40-card thread at forced full tempo, both themes", async ({ page }) => {
+    expect(fixture.messages[fixture.targetID].length).toBeGreaterThanOrEqual(40) // the long-thread fixture
+
+    await mockOpenCodeServer(page, {
+      sessions: fixture.sessions,
+      provider: fixture.provider,
+      directory: fixture.directory,
+      project: fixture.project,
+      pageMessages,
+    })
+    await seedStorage(page, fixture.directory)
+
+    const traces: ThemeTrace[] = []
+    for (const theme of ["dark", "light"] as const) {
+      await page.emulateMedia({ colorScheme: theme }) // chat colorScheme defaults to "system"
+      await page.goto(`/${base64Encode(fixture.directory)}/session/${fixture.targetID}?brainForceActive`)
+      await expectSessionTitle(page, fixture.expected.targetTitle)
+      await expect(page.locator("[data-timeline-row]").first()).toBeVisible()
+      await expect(page.locator('[data-component="brain-atmosphere"] canvas')).toBeAttached()
+
+      // the force hook must be live: Brain pinned busy, governor disabled
+      const stats = await page.evaluate(
+        () => (window as Window & { __amicoBrainStats?: () => { active: boolean; motion: string } }).__amicoBrainStats?.(),
+      )
+      expect(stats?.active).toBe(true)
+      expect(stats?.motion).toBe("full")
+
+      const trace = await tracedScroll(page, SCROLL_MS)
+      traces.push({
+        theme,
+        colorScheme: trace.colorScheme,
+        forced: stats?.active === true && stats?.motion === "full",
+        motion: stats?.motion,
+        ...trace.report,
+      })
+    }
+
+    const report = { label: PROXY_LABEL, traces }
+    console.log(`[brain-perf-proxy] ${JSON.stringify(report, null, 2)}`)
+
+    // the harness ran and reported — shape only, never a numeric perf verdict
+    expect(report.label).toContain("pre-gate proxy")
+    expect(traces).toHaveLength(2)
+    for (const t of traces) {
+      expect(t.colorScheme).toBe(t.theme) // the theme actually applied
+      expect(t.forced).toBe(true) // un-eased worst case measured
+      expect(t.durationMs).toBeGreaterThanOrEqual(10_000) // >=10s continuous scroll
+      expect(t.frames).toBeGreaterThan(100)
+      expect(t.p95Ms).toBeGreaterThan(0)
+      expect(t.maxMs).toBeGreaterThanOrEqual(t.p95Ms)
+      expect(t.over33).toBeGreaterThanOrEqual(0)
+      expect(t.cardsSeen).toBeGreaterThanOrEqual(10) // the sweep truly moved through the thread
+    }
+  })
+})
+
+/** rAF-interval sampler: scrolls the timeline continuously (up through
+    history, bouncing at the ends) inside the SAME rAF loop that samples the
+    frame intervals — the trace measures the app under scroll, not idle. */
+async function tracedScroll(page: Page, minMs: number) {
+  return page.evaluate(async (durationMs) => {
+    const scroller = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((el) =>
+      el.querySelector("[data-timeline-row]"),
+    )
+    if (!scroller) throw new Error("perf trace: no timeline scroller found")
+    const seen = new Set<string>()
+    const intervals: number[] = []
+    let dir = -1 // start at the thread's foot, sweep up through history
+    await new Promise<void>((resolve) => {
+      let last = -1
+      let t0 = -1
+      const step = (now: number) => {
+        if (t0 < 0) {
+          t0 = now
+          last = now
+        } else {
+          intervals.push(now - last)
+          last = now
+        }
+        scroller.scrollTop += dir * 90
+        if (scroller.scrollTop <= 2) dir = 1
+        else if (scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2) dir = -1
+        if (intervals.length % 20 === 0) {
+          for (const el of scroller.querySelectorAll<HTMLElement>("[data-message-id]")) {
+            if (el.dataset.messageId) seen.add(el.dataset.messageId)
+          }
+        }
+        if (now - t0 >= durationMs) return resolve()
+        requestAnimationFrame(step)
+      }
+      requestAnimationFrame(step)
+    })
+    const sorted = intervals.slice().sort((a, b) => a - b)
+    const q = (p: number) => sorted[Math.min(sorted.length - 1, Math.ceil(sorted.length * p) - 1)] ?? 0
+    const round = (v: number) => Math.round(v * 100) / 100
+    return {
+      colorScheme: document.documentElement.dataset.colorScheme,
+      report: {
+        durationMs: Math.round(intervals.reduce((a, b) => a + b, 0)),
+        frames: intervals.length,
+        meanMs: round(intervals.reduce((a, b) => a + b, 0) / Math.max(intervals.length, 1)),
+        p95Ms: round(q(0.95)),
+        maxMs: round(sorted[sorted.length - 1] ?? 0),
+        over33: intervals.filter((d) => d > 33).length,
+        cardsSeen: seen.size,
+      },
+    }
+  }, minMs)
+}
+
+/** the same storage seed the smoke spec uses: a known project + settings */
+async function seedStorage(page: Page, directory: string) {
+  await page.addInitScript((dir) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({
+        projects: { local: [{ worktree: dir, expanded: true }] },
+        lastProject: { local: dir },
+      }),
+    )
+  }, directory)
+}

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -9,6 +9,7 @@ import { type Component, Show } from "solid-js"
 import { useLocal } from "@/context/local"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { ModelTooltip } from "./model-tooltip"
+import { ModelVariantRow } from "./dialog-select-model"
 import { useLanguage } from "@/context/language"
 
 type ModelState = ReturnType<typeof useLocal>["model"]
@@ -83,6 +84,9 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
             </div>
           )}
         </List>
+        {/* thinking effort folded into the model surface (Kate 2026-07-25) —
+            the unpaid path keeps the control the footer Select used to carry */}
+        <ModelVariantRow model={model} class="px-5 pb-1" />
       </div>
       <div class="px-1.5 pb-1.5">
         <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">

packages/app/src/components/dialog-select-model.tsx

@@ -1,5 +1,5 @@
 import { Popover as Kobalte } from "@kobalte/core/popover"
-import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js"
+import { Component, ComponentProps, createMemo, For, JSX, Show, ValidComponent } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -85,6 +85,52 @@ const ModelList: Component<{
   )
 }
 
+/** Thinking effort, INSIDE the model surface (Kate 2026-07-25): one control
+    for "which brain, how hard". Renders nothing unless the current model
+    exposes variants; picking one never dismisses the host — effort is an
+    attribute, not a selection. Shared by the paid popover and the unpaid
+    dialog so no path loses the control the standalone footer Select had. */
+export const ModelVariantRow: Component<{ model?: ModelState; class?: string }> = (props) => {
+  const model = props.model ?? useLocal().model
+  const language = useLanguage()
+  const options = createMemo(() => {
+    const list = model.variant.list()
+    return list.length > 0 ? ["default", ...list] : []
+  })
+  return (
+    <Show when={options().length > 0}>
+      <div class={`flex shrink-0 items-center gap-2 ${props.class ?? ""}`}>
+        <span class="text-[13px] font-[440] leading-5 text-v2-text-text-faint">
+          {language.t("dialog.model.variant.label")}
+        </span>
+        <div class="ml-auto flex items-center gap-1">
+          <For each={options()}>
+            {(option) => {
+              const selected = () => (model.variant.current() ?? "default") === option
+              return (
+                <button
+                  type="button"
+                  aria-pressed={selected()}
+                  class="h-6 rounded-md px-2 text-[12px] font-[500] capitalize transition-colors duration-120 focus-visible:outline-none"
+                  classList={{
+                    "bg-[var(--accent-fill-soft)] text-v2-text-text-base shadow-[inset_0_0_0_1px_var(--accent-edge)]":
+                      selected(),
+                    "text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base focus-visible:bg-v2-background-bg-layer-02 focus-visible:text-v2-text-text-base":
+                      !selected(),
+                  }}
+                  onClick={() => model.variant.set(option === "default" ? undefined : option)}
+                >
+                  {option === "default" ? language.t("common.default") : option}
+                </button>
+              )
+            }}
+          </For>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
 type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
 type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
 
@@ -125,6 +171,11 @@ export function ModelSelectorPopover(props: {
   }
   const language = useLanguage()
 
+  // Kate 2026-07-25: thinking effort lives INSIDE the model menu — see
+  // ModelVariantRow (shared with the unpaid dialog; the footer Select is gone)
+  const model = props.model ?? useLocal().model
+  const hasVariants = createMemo(() => model.variant.list().length > 0)
+
   return (
     <Kobalte
       open={store.open}
@@ -140,8 +191,10 @@ export function ModelSelectorPopover(props: {
         {props.children}
       </Kobalte.Trigger>
       <Kobalte.Portal>
+        {/* glass sweep (#56): the model menu floats on the single glass recipe */}
         <Kobalte.Content
-          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          data-glass="standard"
+          class="w-72 h-80 flex flex-col p-2 rounded-md z-50 outline-none overflow-hidden"
           onEscapeKeyDown={(event) => {
             close("escape")
             event.preventDefault()
@@ -190,6 +243,10 @@ export function ModelSelectorPopover(props: {
               </div>
             }
           />
+          <Show when={hasVariants()}>
+            <div class="mx-1 mt-1 h-px shrink-0 bg-v2-border-border-muted" />
+            <ModelVariantRow model={props.model} class="px-2 pb-1 pt-2" />
+          </Show>
         </Kobalte.Content>
       </Kobalte.Portal>
     </Kobalte>