fix(web): align playground chat layout

apps/web/src/components/layout/AppShell.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
-import { BookOpen, Boxes, Home, RefreshCw, ShieldCheck, UserCircle } from 'lucide-react';
+import { BookOpen, Boxes, Home, RefreshCw, ShieldCheck, Sparkles, UserCircle } from 'lucide-react';
 import type { HealthResponse } from '../../api';
 import type { LoadState, PageKey } from '../../types';
 import { Button, Badge } from '../ui';
 
 const navItems: Array<{ key: PageKey; label: string; icon: ReactNode }> = [
   { key: 'home', label: '首页', icon: <Home size={17} /> },
+  { key: 'playground', label: '在线测试', icon: <Sparkles size={17} /> },
   { key: 'models', label: '模型', icon: <Boxes size={17} /> },
   { key: 'workspace', label: '用户工作台', icon: <UserCircle size={17} /> },
   { key: 'admin', label: '管理工作台', icon: <ShieldCheck size={17} /> },
@@ -24,7 +25,7 @@ export function AppShell(props: {
   onSignOut: () => void;
 }) {
   return (
-    <div className="appShell">
+    <div className="appShell" data-page={props.activePage}>
       <header className="appTopbar">
         <div className="brandBlock">
           <div className="brandMark">AI</div>
@@ -72,7 +73,7 @@ export function AppShell(props: {
       </header>
 
       <div className="workspaceShell">
-        <main className="contentShell">
+        <main className="contentShell" data-page={props.activePage}>
           {props.state === 'error' && <Badge variant="destructive">数据加载失败</Badge>}
           {props.children}
         </main>

apps/web/src/pages/PlaygroundPage.tsx

@@ -0,0 +1,713 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useMessagePartText,
+  useLocalRuntime,
+  type ChatModelAdapter,
+  type ThreadMessage,
+} from '@assistant-ui/react';
+import { StreamdownTextPrimitive } from '@assistant-ui/react-streamdown';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import { math } from '@streamdown/math';
+import { mermaid } from '@streamdown/mermaid';
+import type { GatewayApiKey, PlatformModel } from '@easyai-ai-gateway/contracts';
+import { Bot, ChevronDown, Image as ImageIcon, MessageSquarePlus, Paperclip, Send, Sparkles, Video } from 'lucide-react';
+import { Badge, Button, Select, Textarea } from '../components/ui';
+import { streamChatCompletionText } from '../api';
+import type { PlaygroundMode } from '../types';
+
+type VideoCreateMode = 'text_to_video' | 'first_last_frame' | 'omni_reference';
+
+interface ModelOption {
+  count: number;
+  label: string;
+  provider: string;
+  value: string;
+}
+
+const modeOptions: Array<{ description: string; icon: ReactNode; label: string; value: PlaygroundMode }> = [
+  { value: 'chat', label: '大模型对话', description: '对话、推理、结构化输出', icon: <Bot size={16} /> },
+  { value: 'image', label: '图像生成', description: '文生图、图像编辑参数预览', icon: <ImageIcon size={16} /> },
+  { value: 'video', label: '视频生成', description: '图生视频、文生视频任务测试', icon: <Video size={16} /> },
+];
+
+const videoModeOptions: Array<{ label: string; value: VideoCreateMode }> = [
+  { value: 'text_to_video', label: '文生视频' },
+  { value: 'first_last_frame', label: '首尾帧' },
+  { value: 'omni_reference', label: '全能参考' },
+];
+
+const placeholderByMode: Record<PlaygroundMode, string> = {
+  chat: '输入问题、角色设定或测试提示词，支持 OpenAI 兼容格式验证...',
+  image: '描述你想生成的画面，例如：未来城市中的玻璃温室，晨光，电影级构图...',
+  video: '描述视频镜头、主体运动和风格，例如：低角度跟拍，一辆复古跑车穿过雨夜街道...',
+};
+
+const quickPrompts: Record<PlaygroundMode, string[]> = {
+  chat: ['写一个产品发布摘要', '生成接口调用示例', '分析失败重试策略'],
+  image: ['产品海报', '角色设定图', '电商主图'],
+  video: ['5 秒运镜', '首帧转视频', '宣传短片'],
+};
+
+const publicWorks = [
+  { title: '雨夜霓虹街区', type: '图像生成', image: 'https://picsum.photos/seed/easyai-neon-city/720/960' },
+  { title: '玻璃温室晨光', type: '图像生成', image: 'https://picsum.photos/seed/easyai-glasshouse/720/540' },
+  { title: '山谷航拍镜头', type: '视频生成', image: 'https://picsum.photos/seed/easyai-valley-flight/720/1040' },
+  { title: '极简产品广告', type: '图像生成', image: 'https://picsum.photos/seed/easyai-product-ad/720/680' },
+  { title: '机械结构设定', type: '图像编辑', image: 'https://picsum.photos/seed/easyai-mecha-sketch/720/920' },
+  { title: '城市模型推演', type: '大模型', image: 'https://picsum.photos/seed/easyai-city-plan/720/620' },
+  { title: '海边人物电影感', type: '图像生成', image: 'https://picsum.photos/seed/easyai-cinematic-sea/720/980' },
+  { title: '空间站漫游', type: '视频生成', image: 'https://picsum.photos/seed/easyai-orbital-walk/720/860' },
+  { title: '水彩建筑手稿', type: '图像生成', image: 'https://picsum.photos/seed/easyai-watercolor-arch/720/760' },
+  { title: '品牌 KV 探索', type: '图像生成', image: 'https://picsum.photos/seed/easyai-brand-kv/720/560' },
+  { title: '古城夜游镜头', type: '视频生成', image: 'https://picsum.photos/seed/easyai-night-town/720/1020' },
+  { title: '界面概念板', type: '大模型', image: 'https://picsum.photos/seed/easyai-ui-board/720/650' },
+];
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+export function PlaygroundPage(props: {
+  apiKeySecretsById: Record<string, string>;
+  apiKeys: GatewayApiKey[];
+  mode: PlaygroundMode;
+  models: PlatformModel[];
+  selectedApiKeyId: string;
+  token: string;
+  onApiKeyChange: (apiKeyId: string) => void;
+  onCreateApiKey: () => void;
+  onLogin: () => void;
+  onModeChange: (mode: PlaygroundMode) => void;
+}) {
+  const [prompt, setPrompt] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+  const [imageHasReference, setImageHasReference] = useState(false);
+  const [videoMode, setVideoMode] = useState<VideoCreateMode>('text_to_video');
+  const [threadKey, setThreadKey] = useState(0);
+  const activeMode = useMemo(() => modeOptions.find((item) => item.value === props.mode) ?? modeOptions[0], [props.mode]);
+  const modelOptions = useMemo(
+    () => buildModelOptions(filterModelsForMode(props.models, props.mode, imageHasReference, videoMode)),
+    [imageHasReference, props.mode, props.models, videoMode],
+  );
+
+  useEffect(() => {
+    setSelectedModel((current) => modelOptions.some((item) => item.value === current) ? current : modelOptions[0]?.value ?? '');
+  }, [modelOptions]);
+
+  return (
+    <div className="playgroundPage">
+      <aside className="playgroundSidebar">
+        <div className="playgroundSidebarTitle">
+          <strong>开启创作</strong>
+          <Badge variant="secondary">Test</Badge>
+        </div>
+        <button type="button" className="playgroundSideItem active" onClick={() => setThreadKey((value) => value + 1)}>
+          <MessageSquarePlus size={15} />
+          新对话
+        </button>
+        <button type="button" className="playgroundSideItem">
+          <Sparkles size={15} />
+          默认创作
+        </button>
+      </aside>
+
+      <main className="playgroundStage">
+        <section className="playgroundHero" data-chat={props.mode === 'chat'}>
+          {props.mode === 'chat' ? (
+            <AssistantChatPlayground
+              key={threadKey}
+              apiKeySecretsById={props.apiKeySecretsById}
+              apiKeys={props.apiKeys}
+              modelOptions={modelOptions}
+              selectedApiKeyId={props.selectedApiKeyId}
+              selectedModel={selectedModel}
+              token={props.token}
+              onApiKeyChange={props.onApiKeyChange}
+              onCreateApiKey={props.onCreateApiKey}
+              onModeChange={props.onModeChange}
+              onModelChange={setSelectedModel}
+              onLogin={props.onLogin}
+            />
+          ) : (
+            <>
+              <ModeSwitch activeMode={props.mode} onModeChange={props.onModeChange} />
+              <PlaygroundGreeting activeMode={activeMode} />
+              <Composer
+                apiKeySecretsById={props.apiKeySecretsById}
+                apiKeys={props.apiKeys}
+                mode={props.mode}
+                modelOptions={modelOptions}
+                prompt={prompt}
+                selectedApiKeyId={props.selectedApiKeyId}
+                selectedModel={selectedModel}
+                imageHasReference={imageHasReference}
+                videoMode={videoMode}
+                onApiKeyChange={props.onApiKeyChange}
+                onCreateApiKey={props.onCreateApiKey}
+                onImageReferenceChange={setImageHasReference}
+                onModeChange={props.onModeChange}
+                onModelChange={setSelectedModel}
+                onPromptChange={setPrompt}
+                onSubmit={() => undefined}
+                onVideoModeChange={setVideoMode}
+              />
+            </>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export function PlaygroundEntry(props: {
+  onModeChange: (mode: PlaygroundMode) => void;
+}) {
+  const [mode, setMode] = useState<PlaygroundMode>('chat');
+  const [prompt, setPrompt] = useState('');
+  const activeMode = modeOptions.find((item) => item.value === mode) ?? modeOptions[0];
+
+  function openPlayground(nextMode = mode) {
+    props.onModeChange(nextMode);
+  }
+
+  return (
+    <section className="homePlaygroundEntry">
+      <h2>
+        开启你的 <button type="button" onClick={() => openPlayground(mode)}>{activeMode.label}<ChevronDown size={20} /></button> 即刻测试
+      </h2>
+      <Composer
+        mode={mode}
+        modelOptions={[]}
+        prompt={prompt}
+        compact
+        onModeChange={(nextMode) => {
+          setMode(nextMode);
+          openPlayground(nextMode);
+        }}
+        onModelChange={() => undefined}
+        onPromptChange={setPrompt}
+        onSubmit={() => openPlayground(mode)}
+      />
+      <div className="playgroundModeCards">
+        {modeOptions.map((item) => (
+          <button type="button" key={item.value} onClick={() => openPlayground(item.value)}>
+            <span>{item.icon}</span>
+            <strong>{item.label}</strong>
+            <small>{item.description}</small>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function PublicWorksGallery() {
+  return (
+    <section className="publicWorksSection">
+      <div className="publicWorksHeader">
+        <div>
+          <p className="eyebrow">Community Gallery</p>
+          <h2>公开作品展示</h2>
+        </div>
+        <div className="publicWorksTabs" aria-label="作品类型">
+          <button type="button" data-active="true">发现</button>
+          <button type="button">图片</button>
+          <button type="button">视频</button>
+        </div>
+      </div>
+      <div className="publicWorksMasonry">
+        {publicWorks.map((item) => (
+          <article className="publicWorkCard" key={item.title}>
+            <img src={item.image} alt={item.title} loading="lazy" />
+            <div>
+              <Badge variant="secondary">{item.type}</Badge>
+              <strong>{item.title}</strong>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function AssistantChatPlayground(props: {
+  apiKeySecretsById: Record<string, string>;
+  apiKeys: GatewayApiKey[];
+  modelOptions: ModelOption[];
+  selectedApiKeyId: string;
+  selectedModel: string;
+  token: string;
+  onApiKeyChange: (apiKeyId: string) => void;
+  onCreateApiKey: () => void;
+  onLogin: () => void;
+  onModeChange: (mode: PlaygroundMode) => void;
+  onModelChange: (value: string) => void;
+}) {
+  const activeApiKeyId = resolveSelectedApiKeyId(props.apiKeys, props.apiKeySecretsById, props.selectedApiKeyId);
+  const activeApiKeySecret = activeApiKeyId ? props.apiKeySecretsById[activeApiKeyId] ?? '' : '';
+  const canRun = Boolean(props.token && props.selectedModel && activeApiKeySecret);
+  const apiKeyNotice = apiKeyNoticeText(props.apiKeys, props.apiKeySecretsById);
+  const adapter = useMemo<ChatModelAdapter>(() => ({
+    async *run({ abortSignal, messages }) {
+      if (!props.token) {
+        props.onLogin();
+        throw new Error('请先登录后再测试模型。');
+      }
+      if (!activeApiKeySecret) {
+        throw new Error('请选择可用于测试的 API Key；如果列表为空，请刷新或重新创建一个 Key。');
+      }
+      if (!props.selectedModel) {
+        throw new Error('当前没有可用的大模型，请确认用户组权限或平台模型配置。');
+      }
+      let text = '';
+      for await (const delta of streamChatCompletionText(
+        activeApiKeySecret,
+        {
+          messages: toGatewayChatMessages(messages),
+          model: props.selectedModel,
+        },
+        abortSignal,
+      )) {
+        text += delta;
+        yield {
+          content: [{ type: 'text', text }],
+        };
+      }
+      yield {
+        content: [{ type: 'text', text }],
+        status: { type: 'complete', reason: 'stop' },
+      };
+    },
+  }), [activeApiKeySecret, props]);
+  const runtime = useLocalRuntime(adapter);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitive.Root className="assistantThreadRoot">
+        <ThreadPrimitive.Empty>
+          <div className="assistantEmptyStage">
+            <AssistantEmptyState
+              apiKeyNotice={apiKeyNotice}
+              apiKeySecretsById={props.apiKeySecretsById}
+              apiKeys={props.apiKeys}
+              canRun={canRun}
+              modelOptions={props.modelOptions}
+              selectedApiKeyId={activeApiKeyId}
+              selectedModel={props.selectedModel}
+              token={props.token}
+              activeApiKeySecret={activeApiKeySecret}
+              onApiKeyChange={props.onApiKeyChange}
+              onCreateApiKey={props.onCreateApiKey}
+              onModeChange={props.onModeChange}
+              onModelChange={props.onModelChange}
+            />
+          </div>
+        </ThreadPrimitive.Empty>
+        <ThreadPrimitive.If empty={false}>
+          <div className="assistantShell" data-has-notice={Boolean(apiKeyNotice)}>
+            {apiKeyNotice && (
+              <div className="assistantApiKeyNotice">
+                <span>{apiKeyNotice}</span>
+                <Button type="button" size="sm" variant="secondary" onClick={props.onCreateApiKey}>
+                  去创建 API Key
+                </Button>
+              </div>
+            )}
+            <ThreadPrimitive.Viewport className="assistantThreadViewport">
+              <div className="assistantMessageList">
+                <ThreadPrimitive.Messages components={{ Message: AssistantMessage }} />
+              </div>
+              <ThreadPrimitive.ViewportFooter className="assistantComposerDock">
+                <AssistantChatComposer
+                  apiKeyNotice={apiKeyNotice}
+                  apiKeySecretsById={props.apiKeySecretsById}
+                  apiKeys={props.apiKeys}
+                  canRun={canRun}
+                  docked
+                  modelOptions={props.modelOptions}
+                  placeholder={assistantPlaceholder(props.token, props.selectedModel, activeApiKeySecret)}
+                  selectedApiKeyId={activeApiKeyId}
+                  selectedModel={props.selectedModel}
+                  onApiKeyChange={props.onApiKeyChange}
+                  onCreateApiKey={props.onCreateApiKey}
+                  onModeChange={props.onModeChange}
+                  onModelChange={props.onModelChange}
+                />
+              </ThreadPrimitive.ViewportFooter>
+            </ThreadPrimitive.Viewport>
+          </div>
+        </ThreadPrimitive.If>
+      </ThreadPrimitive.Root>
+    </AssistantRuntimeProvider>
+  );
+}
+
+function ModeSwitch(props: {
+  activeMode: PlaygroundMode;
+  onModeChange: (mode: PlaygroundMode) => void;
+}) {
+  return (
+    <div className="playgroundModeSwitch">
+      {modeOptions.map((item) => (
+        <button
+          type="button"
+          key={item.value}
+          data-active={props.activeMode === item.value}
+          onClick={() => props.onModeChange(item.value)}
+        >
+          {item.icon}
+          <span>{item.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function PlaygroundGreeting(props: {
+  activeMode: { description: string; label: string };
+}) {
+  return (
+    <div className="playgroundGreeting">
+      <span>你好，想测试什么？</span>
+      <strong>{props.activeMode.label}</strong>
+      <small>{props.activeMode.description}</small>
+    </div>
+  );
+}
+
+function AssistantEmptyState(props: {
+  activeApiKeySecret: string;
+  apiKeyNotice: string;
+  apiKeySecretsById: Record<string, string>;
+  apiKeys: GatewayApiKey[];
+  canRun: boolean;
+  modelOptions: ModelOption[];
+  selectedApiKeyId: string;
+  selectedModel: string;
+  token: string;
+  onApiKeyChange: (apiKeyId: string) => void;
+  onCreateApiKey: () => void;
+  onModeChange: (mode: PlaygroundMode) => void;
+  onModelChange: (value: string) => void;
+}) {
+  const activeMode = modeOptions.find((item) => item.value === 'chat') ?? modeOptions[0];
+  const placeholder = props.canRun ? placeholderByMode.chat : assistantPlaceholder(props.token, props.selectedModel, props.activeApiKeySecret);
+
+  return (
+    <div className="assistantEmpty">
+      <ModeSwitch activeMode="chat" onModeChange={props.onModeChange} />
+      <PlaygroundGreeting activeMode={activeMode} />
+      <AssistantChatComposer
+        apiKeyNotice={props.apiKeyNotice}
+        apiKeySecretsById={props.apiKeySecretsById}
+        apiKeys={props.apiKeys}
+        canRun={props.canRun}
+        modelOptions={props.modelOptions}
+        placeholder={placeholder}
+        selectedApiKeyId={props.selectedApiKeyId}
+        selectedModel={props.selectedModel}
+        onApiKeyChange={props.onApiKeyChange}
+        onCreateApiKey={props.onCreateApiKey}
+        onModeChange={props.onModeChange}
+        onModelChange={props.onModelChange}
+      />
+    </div>
+  );
+}
+
+function AssistantChatComposer(props: {
+  apiKeyNotice: string;
+  apiKeySecretsById: Record<string, string>;
+  apiKeys: GatewayApiKey[];
+  canRun: boolean;
+  docked?: boolean;
+  modelOptions: ModelOption[];
+  placeholder: string;
+  selectedApiKeyId: string;
+  selectedModel: string;
+  onApiKeyChange: (apiKeyId: string) => void;
+  onCreateApiKey: () => void;
+  onModeChange: (mode: PlaygroundMode) => void;
+  onModelChange: (value: string) => void;
+}) {
+  const className = ['playgroundComposer', 'assistantChatComposer', props.docked ? 'assistantDockComposer' : 'assistantEmptyComposer'].join(' ');
+
+  return (
+    <ComposerPrimitive.Root className={className}>
+      <div className="composerBody">
+        <button type="button" className="composerUpload" aria-label="上传参考" disabled>
+          <Paperclip size={18} />
+        </button>
+        <ComposerPrimitive.Input
+          className="assistantEmptyInput"
+          disabled={!props.canRun}
+          placeholder={props.placeholder}
+        />
+      </div>
+      <div className="composerFooter">
+        <Select value="chat" onChange={(event) => props.onModeChange(event.target.value as PlaygroundMode)}>
+          {modeOptions.map((item) => <option value={item.value} key={item.value}>{item.label}</option>)}
+        </Select>
+        <Select
+          className="playgroundModelSelect"
+          value={props.selectedModel}
+          disabled={!props.modelOptions.length}
+          onChange={(event) => props.onModelChange(event.target.value)}
+        >
+          {props.modelOptions.length ? props.modelOptions.map((item) => (
+            <option value={item.value} key={item.value}>{modelOptionLabel(item)}</option>
+          )) : <option value="">没有可用模型</option>}
+        </Select>
+        <ApiKeySelect
+          apiKeySecretsById={props.apiKeySecretsById}
+          apiKeys={props.apiKeys}
+          selectedApiKeyId={props.selectedApiKeyId}
+          onApiKeyChange={props.onApiKeyChange}
+        />
+        {props.apiKeyNotice && (
+          <Button type="button" size="sm" variant="secondary" onClick={props.onCreateApiKey}>
+            创建 API Key
+          </Button>
+        )}
+        <ComposerPrimitive.Send className="composerSendButton" disabled={!props.canRun} aria-label="发送消息">
+          <Send size={18} />
+        </ComposerPrimitive.Send>
+      </div>
+    </ComposerPrimitive.Root>
+  );
+}
+
+function AssistantMessage() {
+  return (
+    <MessagePrimitive.Root className="assistantMessage">
+      <MessagePrimitive.If user>
+        <div className="assistantBubble user">
+          <MessagePrimitive.Parts components={{ Text: PlainMessageText }} />
+        </div>
+      </MessagePrimitive.If>
+      <MessagePrimitive.If assistant>
+        <div className="assistantBubble assistant">
+          <MessagePrimitive.Parts components={{ Text: AssistantMarkdownText }} />
+          <MessagePrimitive.If hasContent={false}>
+            <span className="assistantTyping">模型正在回复...</span>
+          </MessagePrimitive.If>
+        </div>
+      </MessagePrimitive.If>
+      <MessagePrimitive.Error>
+        <div className="assistantBubble error">调用失败，请检查模型、平台凭证或测试模式配置。</div>
+      </MessagePrimitive.Error>
+    </MessagePrimitive.Root>
+  );
+}
+
+function PlainMessageText() {
+  const { text } = useMessagePartText();
+  return <span className="assistantPlainText">{text}</span>;
+}
+
+function AssistantMarkdownText() {
+  return (
+    <StreamdownTextPrimitive
+      containerClassName="assistantMarkdown"
+      plugins={streamdownPlugins}
+      shikiTheme={['github-light', 'github-dark']}
+    />
+  );
+}
+
+function toGatewayChatMessages(messages: readonly ThreadMessage[]) {
+  return messages
+    .filter((message) => message.role === 'user' || message.role === 'assistant')
+    .map((message) => ({
+      content: threadMessageText(message),
+      role: message.role,
+    }))
+    .filter((message) => message.content.trim().length > 0);
+}
+
+function threadMessageText(message: ThreadMessage) {
+  return message.content
+    .map((part) => part.type === 'text' ? part.text : '')
+    .join('')
+    .trim();
+}
+
+function resolveSelectedApiKeyId(apiKeys: GatewayApiKey[], secretsById: Record<string, string>, selectedApiKeyId: string) {
+  if (selectedApiKeyId && secretsById[selectedApiKeyId]) return selectedApiKeyId;
+  const firstUsable = apiKeys.find((item) => Boolean(secretsById[item.id]));
+  return firstUsable?.id ?? '';
+}
+
+function apiKeyNoticeText(apiKeys: GatewayApiKey[], secretsById: Record<string, string>) {
+  if (!apiKeys.length) return '当前账号还没有可用 API Key，请先创建一个 Key。';
+  if (!apiKeys.some((item) => Boolean(secretsById[item.id]))) {
+    return '当前没有可用于在线测试的完整 API Key，请重新加载或创建一个 Key。';
+  }
+  return '';
+}
+
+function assistantPlaceholder(token: string, selectedModel: string, apiKeySecret: string) {
+  if (!token) return '请先登录后再测试模型';
+  if (!apiKeySecret) return '请选择可用于测试的 API Key';
+  if (!selectedModel) return '当前没有可用模型';
+  return '输入消息，Enter 发送，Shift + Enter 换行';
+}
+
+function Composer(props: {
+  apiKeySecretsById?: Record<string, string>;
+  apiKeys?: GatewayApiKey[];
+  compact?: boolean;
+  imageHasReference?: boolean;
+  mode: PlaygroundMode;
+  modelOptions: ModelOption[];
+  prompt: string;
+  selectedApiKeyId?: string;
+  selectedModel?: string;
+  videoMode?: VideoCreateMode;
+  onApiKeyChange?: (apiKeyId: string) => void;
+  onCreateApiKey?: () => void;
+  onImageReferenceChange?: (value: boolean) => void;
+  onModeChange: (mode: PlaygroundMode) => void;
+  onModelChange: (value: string) => void;
+  onPromptChange: (value: string) => void;
+  onSubmit?: () => void;
+  onVideoModeChange?: (value: VideoCreateMode) => void;
+}) {
+  const quickItems = quickPrompts[props.mode];
+  const apiKeyNotice = props.apiKeys && props.apiKeySecretsById ? apiKeyNoticeText(props.apiKeys, props.apiKeySecretsById) : '';
+  return (
+    <div className={props.compact ? 'playgroundComposer compact' : 'playgroundComposer'}>
+      <div className="composerBody">
+        <button
+          type="button"
+          className="composerUpload"
+          aria-label="上传参考"
+          data-active={props.imageHasReference === true}
+          onClick={() => props.mode === 'image' && props.onImageReferenceChange?.(!props.imageHasReference)}
+        >
+          <Paperclip size={18} />
+        </button>
+        <Textarea
+          size={props.compact ? 'sm' : 'md'}
+          value={props.prompt}
+          placeholder={placeholderByMode[props.mode]}
+          onChange={(event) => props.onPromptChange(event.target.value)}
+        />
+      </div>
+      <div className="composerFooter">
+        <Select value={props.mode} onChange={(event) => props.onModeChange(event.target.value as PlaygroundMode)}>
+          {modeOptions.map((item) => <option value={item.value} key={item.value}>{item.label}</option>)}
+        </Select>
+        {props.mode === 'video' && (
+          <Select value={props.videoMode ?? 'text_to_video'} onChange={(event) => props.onVideoModeChange?.(event.target.value as VideoCreateMode)}>
+            {videoModeOptions.map((item) => <option value={item.value} key={item.value}>{item.label}</option>)}
+          </Select>
+        )}
+        <Select className="playgroundModelSelect" value={props.selectedModel ?? ''} disabled={!props.modelOptions.length} onChange={(event) => props.onModelChange(event.target.value)}>
+          {props.modelOptions.length ? props.modelOptions.map((item) => (
+            <option value={item.value} key={item.value}>{modelOptionLabel(item)}</option>
+          )) : <option value="">模型选择</option>}
+        </Select>
+        {props.apiKeys && props.apiKeySecretsById && props.onApiKeyChange && (
+          <ApiKeySelect
+            apiKeySecretsById={props.apiKeySecretsById}
+            apiKeys={props.apiKeys}
+            selectedApiKeyId={props.selectedApiKeyId ?? ''}
+            onApiKeyChange={props.onApiKeyChange}
+          />
+        )}
+        {apiKeyNotice && props.onCreateApiKey && (
+          <Button type="button" size="sm" variant="secondary" onClick={props.onCreateApiKey}>
+            创建 API Key
+          </Button>
+        )}
+        <div className="composerQuickPrompts">
+          {quickItems.map((item) => <button type="button" key={item} onClick={() => props.onPromptChange(item)}>{item}</button>)}
+        </div>
+        <Button type="button" size="icon" aria-label="发送测试" onClick={props.onSubmit}>
+          <Send size={15} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ApiKeySelect(props: {
+  apiKeySecretsById: Record<string, string>;
+  apiKeys: GatewayApiKey[];
+  selectedApiKeyId: string;
+  onApiKeyChange: (apiKeyId: string) => void;
+}) {
+  const activeApiKeyId = resolveSelectedApiKeyId(props.apiKeys, props.apiKeySecretsById, props.selectedApiKeyId);
+  return (
+    <Select
+      className="playgroundApiKeySelect"
+      value={activeApiKeyId}
+      disabled={!props.apiKeys.length}
+      onChange={(event) => props.onApiKeyChange(event.target.value)}
+    >
+      {!activeApiKeyId && <option value="">{props.apiKeys.length ? '选择 API Key' : '暂无 API Key'}</option>}
+      {props.apiKeys.map((item) => {
+        const usable = Boolean(props.apiKeySecretsById[item.id]);
+        return (
+          <option value={item.id} key={item.id} disabled={!usable}>
+            {item.name} · {item.keyPrefix}
+          </option>
+        );
+      })}
+    </Select>
+  );
+}
+
+function filterModelsForMode(models: PlatformModel[], mode: PlaygroundMode, hasReference: boolean, videoMode: VideoCreateMode) {
+  if (mode === 'chat') {
+    return filterWithFallback(models, ['text_generate', 'chat', 'responses', 'text']);
+  }
+  if (mode === 'image') {
+    const preferredTypes = hasReference ? ['image_edit', 'images.edits'] : ['image_generate', 'images.generations'];
+    return filterWithFallback(models, [...preferredTypes, 'image']);
+  }
+  const videoTypesByMode: Record<VideoCreateMode, string[]> = {
+    first_last_frame: ['image_to_video', 'video_first_last_frame', 'video_generate'],
+    omni_reference: ['omni_video', 'video_reference', 'video_generate'],
+    text_to_video: ['text_to_video', 'video_generate'],
+  };
+  return filterWithFallback(models, [...videoTypesByMode[videoMode], 'video']);
+}
+
+function filterWithFallback(models: PlatformModel[], modelTypes: string[]) {
+  const exact = models.filter((model) => modelTypes.includes(model.modelType));
+  return exact.length ? exact : models.filter((model) => modelTypes.some((type) => model.modelType.includes(type) || type.includes(model.modelType)));
+}
+
+function buildModelOptions(models: PlatformModel[]): ModelOption[] {
+  const grouped = new Map<string, ModelOption>();
+  models.forEach((model) => {
+    const value = model.modelAlias || model.modelName;
+    if (!value) return;
+    const current = grouped.get(value);
+    if (current) {
+      current.count += 1;
+      if (!current.provider.includes(model.provider || '')) {
+        current.provider = [current.provider, model.provider].filter(Boolean).join(' / ');
+      }
+      return;
+    }
+    grouped.set(value, {
+      count: 1,
+      label: model.modelAlias || model.displayName || model.modelName,
+      provider: model.provider || model.platformName || '',
+      value,
+    });
+  });
+  return Array.from(grouped.values()).sort((a, b) => a.label.localeCompare(b.label));
+}
+
+function modelOptionLabel(option: ModelOption) {
+  const count = option.count > 1 ? ` · ${option.count} 个客户端` : '';
+  const provider = option.provider ? ` · ${option.provider}` : '';
+  return `${option.label}${provider}${count}`;
+}

apps/web/src/styles.css

@@ -1,24 +1,103 @@
+@import "tailwindcss";
+@source "../node_modules/streamdown/dist/*.js";
+@source "../node_modules/@streamdown/code/dist/*.js";
+@source "../node_modules/@streamdown/math/dist/*.js";
+@source "../node_modules/@streamdown/mermaid/dist/*.js";
+@source "../node_modules/@streamdown/cjk/dist/*.js";
 @import './styles/ui.css';
 @import './styles/pages.css';
+@import './styles/admin-capabilities.css';
 @import './styles/pricing.css';
 @import './styles/api-docs.css';
 @import './styles/landing.css';
+@import './styles/playground.css';
+
+@theme inline {
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-destructive: var(--destructive);
+  --color-ring: var(--ring);
+  --color-surface: var(--surface);
+  --color-surface-subtle: var(--surface-subtle);
+  --color-text-strong: var(--text-strong);
+  --color-text-normal: var(--text-normal);
+  --color-text-soft: var(--text-soft);
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-base: 14px;
+  --text-md: 15px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 22px;
+  --text-3xl: 30px;
+  --radius-sm: 7px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-dialog: 0 22px 60px rgba(16, 24, 40, 0.16);
+}
 
 :root {
-  --background: #f7f8fa;
+  --background: #ffffff;
-  --foreground: #101318;
+  --foreground: #09090b;
   --card: #ffffff;
-  --card-foreground: #101318;
+  --card-foreground: #09090b;
-  --muted: #f2f4f7;
+  --surface: #ffffff;
-  --muted-foreground: #6b7280;
+  --surface-subtle: #fafafa;
-  --border: #e4e7ec;
+  --surface-muted: #f4f4f5;
-  --input: #d8dee6;
+  --muted: #f4f4f5;
-  --primary: #111827;
+  --muted-foreground: #71717a;
+  --border: #e4e4e7;
+  --border-subtle: #e4e4e7;
+  --input: #e4e4e7;
+  --primary: #18181b;
   --primary-foreground: #ffffff;
-  --secondary: #f4f6f8;
+  --secondary: #f4f4f5;
-  --secondary-foreground: #202734;
+  --secondary-foreground: #18181b;
-  --destructive: #b42318;
+  --destructive: #dc2626;
-  --ring: #64748b;
+  --destructive-foreground: #ffffff;
+  --accent: #f4f4f5;
+  --accent-foreground: #18181b;
+  --popover: #ffffff;
+  --popover-foreground: #09090b;
+  --ring: #a1a1aa;
+  --text-strong: #09090b;
+  --text-normal: #27272a;
+  --text-soft: #71717a;
+  --text-faint: #a1a1aa;
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-md: 15px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 22px;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.55;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-strong: 650;
+  --control-height-sm: 32px;
+  --control-height: 40px;
+  --control-radius: 6px;
+  --card-radius: 12px;
+  --focus-ring: 0 0 0 3px rgba(24, 24, 27, 0.12);
+  --shadow-soft: none;
+  --shadow-panel: none;
   color: var(--foreground);
   background: var(--background);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -32,6 +111,11 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  color: var(--text-normal);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  background: var(--background);
 }
 
 button,
@@ -39,6 +123,7 @@ input,
 select,
 textarea {
   font: inherit;
+  color: inherit;
 }
 
 button {
@@ -58,15 +143,28 @@ p {
 }
 
 h1 {
-  font-size: 30px;
+  color: var(--text-strong);
+  font-size: 28px;
+  font-weight: var(--font-weight-semibold);
   line-height: 1.15;
 }
 
+h2,
+h3 {
+  color: var(--text-strong);
+  font-weight: var(--font-weight-semibold);
+}
+
+b,
+strong {
+  font-weight: var(--font-weight-semibold);
+}
+
 .eyebrow {
   margin-bottom: 5px;
   color: var(--muted-foreground);
   font-size: 12px;
-  font-weight: 800;
+  font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
 
@@ -92,11 +190,11 @@ h1 {
   width: 38px;
   height: 38px;
   place-items: center;
-  border-radius: 10px;
+  border-radius: var(--card-radius);
-  background: #111827;
+  background: var(--primary);
   color: #fff;
-  font-size: 13px;
+  font-size: var(--font-size-sm);
-  font-weight: 900;
+  font-weight: var(--font-weight-semibold);
 }
 
 .authShell {
@@ -130,13 +228,23 @@ h1 {
   min-height: 100vh;
 }
 
+.appShell[data-page="playground"] {
+  display: grid;
+  height: 100dvh;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+
 .brandBlock {
   min-width: 210px;
 }
 
 .brandBlock strong {
   display: block;
-  font-size: 15px;
+  color: var(--text-strong);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
 }
 
 .brandBlock span,
@@ -147,7 +255,7 @@ h1 {
 .docNote span,
 .capabilityCard small {
   color: var(--muted-foreground);
-  font-size: 13px;
+  font-size: var(--font-size-sm);
 }
 
 .topNav {
@@ -155,47 +263,52 @@ h1 {
   align-items: center;
   gap: 2px;
   padding: 3px;
-  border: 1px solid #e7ebf0;
+  border: 1px solid var(--border);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.72);
 }
 
 .topNavItem {
   display: flex;
-  min-height: 38px;
+  min-height: 34px;
   align-items: center;
   gap: 7px;
   padding: 0 14px;
   border: 0;
   border-radius: 999px;
   background: transparent;
-  color: #5d6675;
+  color: var(--text-soft);
-  font-size: 14px;
+  font-size: var(--font-size-sm);
-  font-weight: 800;
+  font-weight: var(--font-weight-medium);
   white-space: nowrap;
 }
 
 .topNavItem:hover,
 .topNavItem[data-active="true"] {
   background: #ffffff;
-  color: #111827;
+  color: var(--text-strong);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
+  box-shadow: var(--shadow-soft);
 }
 
 .workspaceShell {
   min-width: 0;
 }
 
+.appShell[data-page="playground"] .workspaceShell {
+  min-height: 0;
+  overflow: hidden;
+}
+
 .appTopbar {
   position: sticky;
   top: 0;
   z-index: 2;
   display: flex;
-  min-height: 68px;
+  min-height: 64px;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 0 28px;
+  padding: 0 26px;
   border-bottom: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.88);
   box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
@@ -216,8 +329,8 @@ h1 {
   align-items: center;
   gap: 8px;
   color: var(--muted-foreground);
-  font-size: 13px;
+  font-size: var(--font-size-sm);
-  font-weight: 700;
+  font-weight: var(--font-weight-medium);
 }
 
 .health span {
@@ -236,9 +349,9 @@ h1 {
   min-height: 34px;
   padding: 0 10px;
   border: 1px solid var(--input);
-  border-radius: 8px;
+  border-radius: var(--control-radius);
-  background: #fff;
+  background: var(--surface);
-  color: var(--foreground);
+  color: var(--text-normal);
 }
 
 .contentShell {
@@ -256,8 +369,8 @@ h1 {
 
 .pageHeader p:not(.eyebrow) {
   margin-top: 8px;
-  color: var(--muted-foreground);
+  color: var(--text-soft);
-  font-size: 14px;
+  font-size: var(--font-size-base);
 }
 
 .notice,
@@ -267,7 +380,7 @@ h1 {
   border-radius: 8px;
   background: #fff7f7;
   color: #9f2f2f;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
 }
 
 .statGrid {
@@ -302,8 +415,9 @@ h1 {
   min-height: 92px;
   padding: 15px;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--card-radius);
-  background: var(--card);
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
 }
 
 .statCard[data-tone="blue"] { border-color: #d8e0ea; }
@@ -314,8 +428,8 @@ h1 {
 .statCard[data-tone="rose"] { border-color: #ead8df; }
 
 .statCard span {
-  color: var(--muted-foreground);
+  color: var(--text-soft);
-  font-size: 13px;
+  font-size: var(--font-size-sm);
 }
 
 .statCard strong,
@@ -323,7 +437,10 @@ h1 {
 .balanceCard strong {
   display: block;
   margin-top: 10px;
-  font-size: 28px;
+  color: var(--text-strong);
+  font-size: 24px;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
 }
 
 .capabilityCard {
@@ -337,9 +454,9 @@ h1 {
   height: 38px;
   place-items: center;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--card-radius);
-  background: #fff;
+  background: var(--surface);
-  color: #111827;
+  color: var(--text-strong);
 }
 
 .infoItem,
@@ -348,8 +465,8 @@ h1 {
   gap: 5px;
   padding: 12px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--control-radius);
-  background: #fafbfc;
+  background: var(--surface-subtle);
 }
 
 @media (max-width: 980px) {

apps/web/src/styles/playground.css

@@ -0,0 +1,970 @@
+.homePlaygroundEntry {
+  display: grid;
+  gap: 22px;
+  padding: 28px 0 8px;
+}
+
+.homePlaygroundEntry h2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1.2;
+  text-align: center;
+}
+
+.homePlaygroundEntry h2 button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: transparent;
+  color: #0891b2;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+}
+
+.playgroundComposer {
+  display: grid;
+  gap: 16px;
+  width: min(var(--playground-content-width, 960px), 100%);
+  margin: 0 auto;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--surface);
+  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.07);
+}
+
+.playgroundComposer.compact {
+  width: min(1240px, calc(100vw - 120px));
+  min-height: 190px;
+  padding: 20px;
+  border-radius: 22px;
+}
+
+.composerBody {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  gap: 16px;
+}
+
+.composerUpload {
+  display: grid;
+  width: 48px;
+  height: 66px;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-muted);
+  color: var(--text-soft);
+  transform: rotate(-8deg);
+}
+
+.composerBody .shTextarea {
+  min-height: 88px;
+  border: 0;
+  box-shadow: none;
+  resize: none;
+}
+
+.playgroundComposer.compact .composerBody .shTextarea {
+  min-height: 104px;
+}
+
+.composerFooter {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.composerFooter .shSelect {
+  width: 132px;
+}
+
+.composerFooter .playgroundModelSelect,
+.playgroundModelSelect {
+  width: min(320px, 34vw);
+}
+
+.composerFooter .playgroundApiKeySelect,
+.playgroundApiKeySelect {
+  width: min(260px, 26vw);
+}
+
+.composerQuickPrompts {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.composerQuickPrompts button {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.playgroundModeCards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  width: min(900px, 100%);
+  margin: 0 auto;
+}
+
+.playgroundModeCards button {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  min-height: 78px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--card-radius);
+  background: var(--surface);
+  text-align: left;
+}
+
+.playgroundModeCards button > span {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  grid-row: span 2;
+  place-items: center;
+  border-radius: 12px;
+  background: var(--surface-muted);
+}
+
+.playgroundModeCards strong,
+.playgroundModeCards small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.playgroundModeCards small {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.publicWorksSection {
+  display: grid;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.publicWorksHeader {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.publicWorksTabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-muted);
+}
+
+.publicWorksTabs button {
+  min-height: 34px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-soft);
+  font-size: var(--font-size-sm);
+}
+
+.publicWorksTabs button[data-active="true"] {
+  background: var(--surface);
+  color: var(--text-strong);
+}
+
+.publicWorksMasonry {
+  column-count: 5;
+  column-gap: 10px;
+}
+
+.publicWorkCard {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  break-inside: avoid;
+  margin: 0 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface-muted);
+}
+
+.publicWorkCard img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.publicWorkCard div {
+  position: absolute;
+  inset-inline: 10px;
+  bottom: 10px;
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(10px);
+}
+
+.publicWorkCard strong {
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+}
+
+.contentShell[data-page="playground"] {
+  width: 100vw;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.playgroundPage {
+  --playground-content-width: 960px;
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+  background: var(--surface-subtle);
+}
+
+.playgroundSidebar {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  padding: 22px 16px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.playgroundSidebarTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.playgroundSideItem {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-normal);
+  font-size: var(--font-size-sm);
+}
+
+.playgroundSideItem.active,
+.playgroundSideItem:hover {
+  background: var(--surface-muted);
+}
+
+.playgroundStage {
+  display: grid;
+  align-items: stretch;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.playgroundHero {
+  display: grid;
+  align-content: center;
+  gap: 22px;
+  height: 100%;
+  min-height: 0;
+  align-items: center;
+  justify-items: center;
+  overflow-y: auto;
+  padding: 64px 32px;
+}
+
+.playgroundHero[data-chat="true"] {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  align-self: stretch;
+  align-content: stretch;
+  align-items: stretch;
+  justify-items: stretch;
+  overflow: hidden;
+  padding: 0;
+}
+
+.playgroundModeSwitch {
+  display: inline-flex;
+  align-self: center;
+  justify-self: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+}
+
+.playgroundModeSwitch button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 34px;
+  min-height: 34px;
+  align-items: center;
+  gap: 7px;
+  padding: 0 13px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-soft);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.playgroundModeSwitch button[data-active="true"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.playgroundGreeting {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  text-align: center;
+}
+
+.playgroundGreeting span {
+  color: var(--text-strong);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.playgroundGreeting strong {
+  font-size: var(--font-size-xl);
+}
+
+.playgroundGreeting small {
+  color: var(--muted-foreground);
+}
+
+.playgroundError {
+  width: min(860px, 100%);
+  margin: 0 auto;
+  padding: 10px 12px;
+  border: 1px solid #f0d4d4;
+  border-radius: var(--radius-md);
+  background: #fff7f7;
+  color: #9f2f2f;
+  font-size: var(--font-size-sm);
+}
+
+.assistantShell {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  background: var(--surface-subtle);
+}
+
+.assistantShell[data-has-notice="true"] {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.assistantToolbar {
+  display: flex;
+  width: min(var(--playground-content-width), calc(100% - 64px));
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin: 0 auto;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  border-inline: 1px solid var(--border);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  background: var(--surface);
+}
+
+.assistantToolbar .shSelect {
+  flex: 0 0 auto;
+}
+
+.assistantToolbar > div {
+  display: grid;
+  gap: 2px;
+}
+
+.assistantToolbar strong {
+  color: var(--text-strong);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.assistantToolbar span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.assistantApiKeyNotice {
+  display: flex;
+  width: min(var(--playground-content-width), calc(100% - 64px));
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 auto;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  border-inline: 1px solid var(--border);
+  background: var(--surface-muted);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+.assistantThreadRoot {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.assistantThreadViewport {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 22px 32px 0;
+  scroll-behavior: smooth;
+}
+
+.assistantEmptyStage {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  place-items: center;
+  overflow-y: auto;
+  padding: 64px 32px;
+}
+
+.assistantEmpty {
+  display: grid;
+  width: min(var(--playground-content-width), 100%);
+  align-content: center;
+  justify-items: center;
+  gap: 18px;
+  margin: 0 auto;
+  min-height: 0;
+  padding: 0;
+  color: var(--muted-foreground);
+  text-align: center;
+}
+
+.assistantEmptyComposer {
+  width: min(var(--playground-content-width), 100%);
+  min-height: 190px;
+  margin: 0 auto;
+}
+
+.assistantEmptyComposer .composerFooter {
+  flex-wrap: nowrap;
+}
+
+.assistantEmptyInput {
+  min-height: 88px;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-normal);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+}
+
+.assistantEmptyInput::placeholder {
+  color: var(--muted-foreground);
+}
+
+.composerSendButton {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  margin-left: auto;
+  border: 0;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.composerSendButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.assistantWelcomeComposer {
+  display: grid;
+  gap: 46px;
+  width: min(1280px, calc(100vw - 320px));
+  min-height: 245px;
+  padding: 28px;
+  border: 1px solid var(--border);
+  border-radius: 26px;
+  background: var(--surface);
+  box-shadow: 0 24px 80px rgba(24, 24, 27, 0.08);
+}
+
+.assistantWelcomeBody {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.assistantWelcomeBody .composerUpload {
+  width: 66px;
+  height: 96px;
+  border-radius: 14px;
+}
+
+.assistantWelcomeInput {
+  min-height: 116px;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-normal);
+  font: inherit;
+  font-size: var(--font-size-lg);
+  line-height: 1.7;
+}
+
+.assistantWelcomeInput::placeholder {
+  color: var(--muted-foreground);
+}
+
+.assistantWelcomeFooter {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.assistantWelcomeFooter .shSelect:first-child {
+  width: 150px;
+}
+
+.assistantWelcomeFooter .playgroundModelSelect {
+  width: min(460px, 38vw);
+}
+
+.assistantWelcomeKey {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+.assistantWelcomeSend {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  margin-left: auto;
+  border: 0;
+  border-radius: 12px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.assistantWelcomeSend:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.assistantMessage {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 14px;
+}
+
+.assistantMessageList {
+  flex: 0 0 auto;
+  width: min(var(--playground-content-width), 100%);
+  min-height: 0;
+  padding-bottom: 18px;
+}
+
+.assistantBubble {
+  align-self: flex-start;
+  width: fit-content;
+  max-width: min(720px, 86%);
+  min-height: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  color: var(--text-normal);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.assistantBubble.user {
+  max-width: min(520px, 78%);
+  margin-left: auto;
+  border-color: var(--primary);
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.assistantBubble.assistant {
+  width: min(720px, 86%);
+  margin-right: auto;
+  background: var(--surface-muted);
+}
+
+.assistantPlainText {
+  white-space: pre-wrap;
+}
+
+.assistantMarkdown {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.assistantMarkdown :where(p, ul, ol, pre, blockquote, table) {
+  margin: 0;
+}
+
+.assistantMarkdown > div,
+.assistantMarkdown :where([data-streamdown="code-block"], [data-streamdown="table-wrapper"]) {
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.assistantMarkdown [data-streamdown="code-block"] {
+  overflow: hidden;
+  margin: 10px 0;
+  border-color: var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  padding: 8px;
+}
+
+.assistantMarkdown [data-streamdown="code-block-header"] {
+  height: 24px;
+  color: var(--muted-foreground);
+}
+
+.assistantMarkdown [data-streamdown="code-block-actions"],
+.assistantMarkdown [data-streamdown="mermaid-block-actions"] {
+  gap: 2px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]),
+.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button {
+  display: inline-grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-soft);
+  padding: 0;
+}
+
+.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]):hover,
+.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button:hover {
+  background: var(--surface-muted);
+  color: var(--text-strong);
+}
+
+.assistantMarkdown :where([data-streamdown="code-block-copy-button"], [data-streamdown="code-block-download-button"]) svg,
+.assistantMarkdown [data-streamdown="table-wrapper"] > div:first-child button svg {
+  width: 15px;
+  height: 15px;
+}
+
+.assistantMarkdown [data-streamdown="code-block-body"] {
+  max-width: 100%;
+  overflow-x: auto;
+  border-color: var(--border);
+  background: var(--surface-subtle);
+  padding: 12px;
+}
+
+.assistantMarkdown [data-streamdown="table-wrapper"] {
+  overflow: hidden;
+  margin: 10px 0;
+  border-color: var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  padding: 8px;
+}
+
+.assistantMarkdown [data-streamdown="table-wrapper"] > div:last-child {
+  max-width: 100%;
+  overflow-x: auto;
+  border-color: var(--border);
+  background: var(--surface-subtle);
+}
+
+.assistantMarkdown :where(ul, ol) {
+  padding-left: 1.25rem;
+}
+
+.assistantMarkdown :where(li + li) {
+  margin-top: 3px;
+}
+
+.assistantMarkdown :where(strong) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.assistantMarkdown :where(a) {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.assistantMarkdown :where(code) {
+  border-radius: 5px;
+  background: rgba(24, 24, 27, 0.08);
+  padding: 1px 4px;
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+.assistantMarkdown :where(pre) {
+  max-width: 100%;
+  overflow-x: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.assistantMarkdown :where(pre code) {
+  background: transparent;
+  padding: 0;
+}
+
+.assistantMarkdown :where(blockquote) {
+  border-left: 3px solid var(--border);
+  padding-left: 10px;
+  color: var(--text-soft);
+}
+
+.assistantBubble.error {
+  border-color: #f0d4d4;
+  background: #fff7f7;
+  color: #9f2f2f;
+}
+
+.assistantTyping {
+  color: var(--muted-foreground);
+}
+
+.assistantComposerDock {
+  flex: 0 0 auto;
+  width: min(var(--playground-content-width), 100%);
+  position: sticky;
+  bottom: 0;
+  margin: auto auto 0;
+  padding-top: 18px;
+  background: linear-gradient(180deg, rgba(250, 250, 250, 0), var(--surface-subtle) 40%);
+}
+
+.assistantComposer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 38px;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--surface);
+  box-shadow: 0 16px 42px rgba(24, 24, 27, 0.08);
+}
+
+.assistantComposerInput {
+  min-height: 42px;
+  max-height: 140px;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-normal);
+  font: inherit;
+  font-size: var(--font-size-sm);
+}
+
+.assistantComposerInput::placeholder {
+  color: var(--muted-foreground);
+}
+
+.assistantSendButton {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  align-self: end;
+  border: 0;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.assistantSendButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.composerUpload[data-active="true"] {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+@media (max-width: 1180px) {
+  .publicWorksMasonry {
+    column-count: 3;
+  }
+}
+
+@media (max-width: 860px) {
+  .playgroundPage {
+    grid-template-columns: 1fr;
+    height: 100%;
+    min-height: 0;
+    margin: 0;
+  }
+
+  .playgroundSidebar {
+    display: none;
+  }
+
+  .playgroundStage {
+    padding: 0;
+  }
+
+  .playgroundHero {
+    padding: 42px 18px;
+  }
+
+  .playgroundHero[data-chat="true"] {
+    padding: 0;
+  }
+
+  .assistantThreadViewport {
+    padding: 18px 18px 0;
+  }
+
+  .assistantEmptyStage {
+    padding: 42px 18px;
+  }
+
+  .assistantWelcomeComposer {
+    width: 100%;
+    min-height: 220px;
+    gap: 26px;
+    padding: 18px;
+  }
+
+  .assistantWelcomeBody {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .assistantWelcomeBody .composerUpload {
+    width: 52px;
+    height: 68px;
+  }
+
+  .assistantWelcomeFooter {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .assistantWelcomeFooter .shSelect:first-child,
+  .assistantWelcomeFooter .playgroundModelSelect {
+    width: 100%;
+  }
+
+  .assistantWelcomeSend {
+    width: 100%;
+    height: 42px;
+    margin-left: 0;
+  }
+
+  .playgroundComposer.compact {
+    width: 100%;
+  }
+
+  .playgroundModeCards,
+  .composerBody {
+    grid-template-columns: 1fr;
+  }
+
+  .composerFooter,
+  .publicWorksHeader {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .composerQuickPrompts {
+    flex-wrap: wrap;
+  }
+
+  .publicWorksMasonry {
+    column-count: 2;
+  }
+}
+
+@media (max-width: 560px) {
+  .publicWorksMasonry {
+    column-count: 1;
+  }
+}