test(tui): render-test the welcome panel variants (real component)

Mounts the real WelcomePanel through the app context stack at fixed available
sizes and asserts each variant renders its distinct content (full: "What is
Altimate Code"; medium: the condensed line, no what-is section; compact: the
single connect-CTA line). Covers the .tsx Switch that the pure
welcomePanelVariant unit test can't. Deliberately not a full Home/Session route
render — that drags in Prompt's ~28-context dependency graph; the route wiring
is now a shared one-liner through homeAvailable/sessionAvailable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: saravmajestic

packages/tui/test/component/welcome-panel.test.tsx

@@ -0,0 +1,97 @@
+/** @jsxImportSource @opentui/solid */
+import { testRender } from "@opentui/solid"
+import { afterEach, expect, test } from "bun:test"
+import { resetSetupComplete } from "../../src/component/altimate-onboarding"
+import { WelcomePanel } from "../../src/component/welcome-panel"
+import { TuiConfigProvider } from "../../src/config"
+import { FULL_MIN_HEIGHT, FULL_MIN_WIDTH, MEDIUM_MIN_WIDTH } from "../../src/component/welcome-panel-utils"
+import { ArgsProvider } from "../../src/context/args"
+import { ExitProvider } from "../../src/context/exit"
+import { KVProvider } from "../../src/context/kv"
+import { ProjectProvider } from "../../src/context/project"
+import { RouteProvider } from "../../src/context/route"
+import { SDKProvider } from "../../src/context/sdk"
+import { SyncProvider } from "../../src/context/sync"
+import { ThemeProvider } from "../../src/context/theme"
+import { ToastProvider } from "../../src/ui/toast"
+import { TestTuiContexts } from "../fixture/tui-environment"
+import { createTuiResolvedConfig } from "../fixture/tui-runtime"
+import { createEventSource, createFetch, directory } from "../fixture/tui-sdk"
+
+// Render the REAL WelcomePanel through the routes' variant sizing and assert the
+// rendered content per variant — the piece the pure welcomePanelVariant unit test
+// can't cover (that the .tsx Switch actually renders the right box for a variant).
+// Sizing is driven by the availableWidth/availableHeight props exactly as the
+// routes pass them; the canvas is generous so content is captured without clipping.
+async function renderPanel(availableWidth: number, availableHeight: number) {
+  resetSetupComplete() // ready() = false → deterministic (unconnected: shows the connect CTA)
+  const calls = createFetch()
+  const source = createEventSource()
+  const app = await testRender(
+    () => (
+      <TestTuiContexts>
+        <ExitProvider exit={() => {}}>
+          <TuiConfigProvider config={createTuiResolvedConfig()}>
+            <ArgsProvider>
+              <KVProvider>
+                <ToastProvider>
+                  <RouteProvider>
+                    <SDKProvider url="http://test" directory={directory} fetch={calls.fetch} events={source.source}>
+                      <ProjectProvider>
+                        <SyncProvider>
+                          <ThemeProvider mode="dark">
+                            <WelcomePanel availableWidth={availableWidth} availableHeight={availableHeight} />
+                          </ThemeProvider>
+                        </SyncProvider>
+                      </ProjectProvider>
+                    </SDKProvider>
+                  </RouteProvider>
+                </ToastProvider>
+              </KVProvider>
+            </ArgsProvider>
+          </TuiConfigProvider>
+        </ExitProvider>
+      </TestTuiContexts>
+    ),
+    { width: 160, height: 40 },
+  )
+  await app.renderOnce()
+  await new Promise((resolve) => setTimeout(resolve, 25))
+  await app.renderOnce()
+  let frame = app.captureCharFrame()
+  for (let attempt = 0; attempt < 5 && frame.trim().length === 0; attempt++) {
+    await new Promise((resolve) => setTimeout(resolve, 25))
+    await app.renderOnce()
+    frame = app.captureCharFrame()
+  }
+  return { app, frame }
+}
+
+let current: Awaited<ReturnType<typeof testRender>> | undefined
+afterEach(() => {
+  current?.renderer.destroy()
+  current = undefined
+})
+
+test("full variant renders the wordmark + what-is section at a large available size", async () => {
+  const { app, frame } = await renderPanel(FULL_MIN_WIDTH, FULL_MIN_HEIGHT)
+  current = app
+  // "What is Altimate Code" is unique to the full two-column box.
+  expect(frame).toContain("What is Altimate Code")
+})
+
+test("medium variant renders the condensed line (no what-is section) below the full width floor", async () => {
+  const { app, frame } = await renderPanel(FULL_MIN_WIDTH - 1, FULL_MIN_HEIGHT)
+  current = app
+  expect(frame).toContain("Gives your AI real context")
+  expect(frame).not.toContain("What is Altimate Code")
+})
+
+test("compact variant renders a single line below the medium width floor", async () => {
+  const { app, frame } = await renderPanel(MEDIUM_MIN_WIDTH - 1, FULL_MIN_HEIGHT)
+  current = app
+  // Unconnected → the connect CTA; neither the medium nor full body is present.
+  expect(frame).toContain("Connect your AI model to start")
+  expect(frame).not.toContain("Gives your AI real context")
+  expect(frame).not.toContain("What is Altimate Code")
+})