feat(playground): settings popover + logout

.gitignore

@@ -14,3 +14,4 @@ coverage/
 
 .claude/settings.local.json
 .vercel
+.superpowers/

api/agent.ts

@@ -2,13 +2,12 @@ import type { VercelRequest, VercelResponse } from '@vercel/node'
 import { stepCountIs, streamText, tool } from 'ai'
 import { z } from 'zod'
 import { BUILTIN_KINDS } from '../src/types.js'
+import { resolveModel } from './model.js'
 
 if (!process.env.AI_GATEWAY_API_KEY && process.env.VERCEL_AI_GATEWAY_API_KEY) {
   process.env.AI_GATEWAY_API_KEY = process.env.VERCEL_AI_GATEWAY_API_KEY
 }
 
-const MODEL = process.env.AI_MODEL ?? 'anthropic/claude-sonnet-4-6'
-
 const componentSpecSchema = z
   .object({
     kind: z.string().describe('Component kind, e.g. "button", "card", "alert"'),
@@ -135,6 +134,8 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     return
   }
 
+  const model = resolveModel(body as { model?: unknown } | undefined, process.env)
+
   res.setHeader('Content-Type', 'text/event-stream; charset=utf-8')
   res.setHeader('Cache-Control', 'no-cache, no-transform')
   res.setHeader('Connection', 'keep-alive')
@@ -148,7 +149,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
 
   try {
     const result = streamText({
-      model: MODEL,
+      model,
       system: systemPrompt,
       messages: toCoreMessages(messages),
       tools: {

api/logout.ts

@@ -0,0 +1,6 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+
+export default function handler(_req: VercelRequest, res: VercelResponse) {
+  res.setHeader('WWW-Authenticate', 'Basic realm="stream-ui playground"')
+  res.status(401).send('Logged out')
+}

api/model.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest'
+import { DEFAULT_MODEL, resolveModel } from './model'
+
+describe('resolveModel', () => {
+  test('returns default when nothing supplied', () => {
+    expect(resolveModel(undefined, {})).toBe(DEFAULT_MODEL)
+  })
+
+  test('uses AI_MODEL env when body model absent', () => {
+    expect(resolveModel({}, { AI_MODEL: 'anthropic/claude-opus-4-7' })).toBe(
+      'anthropic/claude-opus-4-7',
+    )
+  })
+
+  test('accepts valid body.model over env', () => {
+    expect(
+      resolveModel({ model: 'openai/gpt-5' }, { AI_MODEL: 'anthropic/claude-sonnet-4-6' }),
+    ).toBe('openai/gpt-5')
+  })
+
+  test('ignores empty string body.model', () => {
+    expect(resolveModel({ model: '' }, { AI_MODEL: 'openai/gpt-4o' })).toBe('openai/gpt-4o')
+  })
+
+  test('rejects malformed slug (no slash)', () => {
+    expect(resolveModel({ model: 'claude-sonnet-4-6' }, {})).toBe(DEFAULT_MODEL)
+  })
+
+  test('rejects slug with spaces or quotes', () => {
+    expect(resolveModel({ model: 'anthropic/claude 4; drop table' }, {})).toBe(DEFAULT_MODEL)
+  })
+
+  test('accepts slug with dots, dashes, underscores', () => {
+    expect(resolveModel({ model: 'vendor.x/my-model_v1.2' }, {})).toBe('vendor.x/my-model_v1.2')
+  })
+})

api/model.ts

@@ -0,0 +1,14 @@
+export const DEFAULT_MODEL = 'anthropic/claude-sonnet-4-6'
+
+const MODEL_SLUG = /^[\w.-]+\/[\w.-]+$/
+
+export function resolveModel(
+  body: { model?: unknown } | undefined,
+  env: { AI_MODEL?: string },
+): string {
+  const candidate = body && typeof body.model === 'string' ? body.model : ''
+  if (candidate && MODEL_SLUG.test(candidate)) return candidate
+  const fromEnv = env.AI_MODEL
+  if (fromEnv && MODEL_SLUG.test(fromEnv)) return fromEnv
+  return DEFAULT_MODEL
+}