@zhin.js/adapter-sandbox 7.0.12 → 7.0.15

package/pages/SandboxChat.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import {
   cn,
+  CodeBlock,
+  MarkdownContent,
   resolveMediaSrc,
   pickMediaRawUrl,
   type MessageSegment,
@@ -9,51 +11,123 @@ import { buildSandboxWebSocketUrl } from './sandboxTransport';
 import {
   User, Bot, Users, Trash2, Send, Hash, MessageSquare,
   Wifi, WifiOff, Smile, Image, X, Check, Info, Search,
-  UserPlus, Bell, Video, Music,
+  Video, Music, Plus, PanelRight, ExternalLink, RefreshCw,
+  Sparkles, Activity, Wrench, Coins, CircleAlert, Gauge,
+  SlidersHorizontal, FolderOpen, ShieldCheck, Network,
+  Square, RotateCcw, FileDiff, Terminal, FlaskConical, ChevronDown,
+  FileDown, ListChecks,
 } from 'lucide-react';
 import RichTextEditor, { type RichTextEditorRef } from './RichTextEditor';
+import {
+  agentStudioPath,
+  buildAgentRunReport,
+  buildSandboxSessionKey,
+  cancelAgentTask,
+  deriveAgentRunSteps,
+  deriveTaskRuns,
+  deriveWorkbenchArtifacts,
+  fetchAgentTrace,
+  loadCachedAgentTrace,
+  mergeTraceSnapshot,
+  presentTraceEvent,
+  summarizeTrace,
+  saveCachedAgentTrace,
+  type AgentTraceSnapshot,
+  type SandboxScope,
+} from './agentTrace.js';
+import {
+  createDefaultPlaygroundState,
+  loadPlaygroundState,
+  savePlaygroundState,
+  type PlaygroundMessage,
+  type PlaygroundSession,
+} from './playgroundState.js';
+import type { SandboxAgentRunConfig } from '../src/run-config.js';
 
-interface Message {
-    id: string; type: 'sent' | 'received'; channelType: 'private' | 'group' | 'channel';
-    channelId: string; channelName: string; senderId: string; senderName: string;
-    content: MessageSegment[]; timestamp: number;
-}
-
-interface Channel { id: string; name: string; type: 'private' | 'group' | 'channel'; unread: number; }
+type Message = PlaygroundMessage
+type Channel = PlaygroundSession
 interface Face { id: number; emojiId: number; stickerId: number; emojiType: string; name: string; describe: string; png: boolean; apng: boolean; lottie: boolean; }
 
 export default function Sandbox() {
-    const [messages, setMessages] = useState<Message[]>([])
-    const [channels, setChannels] = useState<Channel[]>([
-        { id: 'user_1001', name: '测试用户', type: 'private', unread: 0 },
-        { id: 'group_2001', name: '测试群组', type: 'group', unread: 0 },
-        { id: 'channel_3001', name: '测试频道', type: 'channel', unread: 0 }
-    ])
+    const [initialState] = useState(() => loadPlaygroundState())
+    const [messages, setMessages] = useState<Message[]>(() => [...initialState.messages])
+    const [channels, setChannels] = useState<Channel[]>(() => [...initialState.sessions])
     const [faceList, setFaceList] = useState<Face[]>([])
-    const [activeChannel, setActiveChannel] = useState<Channel>(channels[0])
+    const [activeChannel, setActiveChannel] = useState<Channel>(() => (
+        initialState.sessions.find((session) => session.id === initialState.activeSessionId && (
+            initialState.activeSessionType === undefined || session.type === initialState.activeSessionType
+        ))
+        ?? initialState.sessions[0]
+        ?? createDefaultPlaygroundState().sessions[0]!
+    ))
     const [inputText, setInputText] = useState('')
-    const [endpointId, setBotName] = useState('ProcessEndpoint')
+    const [endpointId, setBotName] = useState('sandbox-bot')
     const [connected, setConnected] = useState(false)
+    const [canExecute, setCanExecute] = useState(true)
+    const [persistenceStatus, setPersistenceStatus] = useState<'saved' | 'error'>('saved')
+    const [transportNotice, setTransportNotice] = useState<string | null>(null)
+    const [shellIsolation, setShellIsolation] = useState<{ available: boolean; provider: string; message: string } | null>(null)
+    const [inspectorView, setInspectorView] = useState<'runs' | 'artifacts'>('runs')
+    const [expandedArtifact, setExpandedArtifact] = useState<string | null>(null)
+    const [stoppingTask, setStoppingTask] = useState(false)
+    const [inlineRunExpanded, setInlineRunExpanded] = useState(false)
     const [showFacePicker, setShowFacePicker] = useState(false)
     /** 输入区：插入图片 / 视频 / 音频 URL */
     const [mediaPanel, setMediaPanel] = useState<null | 'image' | 'video' | 'audio'>(null)
     const [mediaUrl, setMediaUrl] = useState('')
-    const [showAtPicker, setShowAtPicker] = useState(false)
     const [atPopoverPosition, setAtPopoverPosition] = useState<{ top: number; left: number } | null>(null)
     const [atSearchQuery, setAtSearchQuery] = useState('')
     const [faceSearchQuery, setFaceSearchQuery] = useState('')
-    const [atUserName, setAtUserName] = useState('')
     const [atSuggestions] = useState([
-        { id: '10001', name: '张三' }, { id: '10002', name: '李四' }, { id: '10003', name: '王五' },
-        { id: '10004', name: '赵六' }, { id: '10005', name: '测试用户' }, { id: '10086', name: 'Admin' },
-        { id: '10010', name: 'Test User' }
+        { id: 'actor-owner', name: '当前用户' }, { id: 'actor-reviewer', name: '审阅者' },
+        { id: 'actor-operator', name: '协作者' }, { id: 'actor-bot', name: 'Sandbox Agent' }
     ])
     const [previewSegments, setPreviewSegments] = useState<MessageSegment[]>([])
+    const [composerMode, setComposerMode] = useState<'write' | 'preview'>('write')
     const [showChannelList, setShowChannelList] = useState(false)
-    const [viewMode, setViewMode] = useState<'chat' | 'requests' | 'notices'>('chat')
+    const [showInspector, setShowInspector] = useState(false)
+    const [showRunSettings, setShowRunSettings] = useState(false)
+    const [showNewSession, setShowNewSession] = useState(false)
+    const [newSessionName, setNewSessionName] = useState('')
+    const [newSessionScope, setNewSessionScope] = useState<SandboxScope>('private')
+    const [confirmClear, setConfirmClear] = useState(false)
+    const [trace, setTrace] = useState<AgentTraceSnapshot | null>(null)
+    const [traceLoading, setTraceLoading] = useState(true)
+    const [traceNotice, setTraceNotice] = useState<string | null>(null)
     const messagesEndRef = useRef<HTMLDivElement>(null)
     const wsRef = useRef<WebSocket | null>(null)
     const editorRef = useRef<RichTextEditorRef>(null)
+    const traceRef = useRef<AgentTraceSnapshot | null>(null)
+    const activeChannelRef = useRef(activeChannel)
+    const endpointIdRef = useRef(endpointId)
+    const sessionKey = useMemo(
+        () => buildSandboxSessionKey(endpointId, activeChannel.type, activeChannel.id),
+        [activeChannel.id, activeChannel.type, endpointId],
+    )
+    const traceSummary = useMemo(() => summarizeTrace(trace), [trace])
+    const taskRuns = useMemo(() => deriveTaskRuns(trace), [trace])
+    const workbenchArtifacts = useMemo(() => deriveWorkbenchArtifacts(trace), [trace])
+    const currentTask = taskRuns.find((run) => run.status === 'running') ?? taskRuns[0]
+    const currentRunSteps = useMemo(() => deriveAgentRunSteps(trace, currentTask), [currentTask, trace])
+    const currentRunArtifacts = useMemo(
+        () => workbenchArtifacts.filter((artifact) => (
+            artifact.turnId === currentTask?.turnId && artifact.runtimeId === currentTask?.runtimeId
+        )),
+        [currentTask?.runtimeId, currentTask?.turnId, workbenchArtifacts],
+    )
+
+    useEffect(() => { activeChannelRef.current = activeChannel }, [activeChannel])
+    useEffect(() => { endpointIdRef.current = endpointId }, [endpointId])
+    useEffect(() => { setInlineRunExpanded(currentTask?.status === 'running') }, [currentTask?.id])
+    useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) }, [currentTask?.id])
+    useEffect(() => {
+        setPersistenceStatus(savePlaygroundState({
+            activeSessionId: activeChannel.id,
+            activeSessionType: activeChannel.type,
+            sessions: channels,
+            messages,
+        }) ? 'saved' : 'error')
+    }, [activeChannel.id, channels, messages])
 
     const fetchFaceList = async () => {
         try { const res = await fetch('https://face.viki.moe/metadata.json'); setFaceList(await res.json()) }
@@ -63,9 +137,39 @@ export default function Sandbox() {
     useEffect(() => { fetchFaceList() }, [])
 
     const handleInboundPayload = (data: {
-        type: string; id: string; content?: unknown; endpoint?: string; timestamp: number;
+        type: string; id: string; content?: unknown; endpoint?: string; workingDirectory?: string; canExecute?: boolean;
+        shellIsolation?: { available?: boolean; provider?: string; message?: string }; timestamp: number;
         messageId?: string; bot?: string;
     }) => {
+        if (data.type === 'ready') {
+            setBotName(data.endpoint || data.bot || 'sandbox-bot')
+            setCanExecute(data.canExecute !== false)
+            setTransportNotice(data.canExecute === false ? '当前 Token 只有演示权限，任务运行已禁用。' : null)
+            if (data.shellIsolation) {
+                setShellIsolation({
+                    available: data.shellIsolation.available === true,
+                    provider: data.shellIsolation.provider || 'docker',
+                    message: data.shellIsolation.message || '未检测到隔离执行环境',
+                })
+            }
+            if (data.workingDirectory?.trim()) {
+                const workingDirectory = data.workingDirectory.trim()
+                setChannels((current) => current.map((session) => session.runConfig.workingDirectory
+                    ? session
+                    : { ...session, runConfig: { ...session.runConfig, workingDirectory } }))
+                setActiveChannel((current) => current.runConfig.workingDirectory
+                    ? current
+                    : { ...current, runConfig: { ...current.runConfig, workingDirectory } })
+            }
+            return
+        }
+        if (data.type === 'error') {
+            const notice = Array.isArray(data.content)
+                ? String((data.content[0] as { data?: { text?: unknown } } | undefined)?.data?.text ?? 'Sandbox 拒绝了本次操作')
+                : String(data.content ?? 'Sandbox 拒绝了本次操作')
+            setTransportNotice(notice)
+            return
+        }
         if (data.type === 'edit' && data.messageId) {
             const content: MessageSegment[] = Array.isArray(data.content)
                 ? data.content as MessageSegment[]
@@ -78,16 +182,19 @@ export default function Sandbox() {
             ? parseTextToSegments(data.content)
             : Array.isArray(data.content) ? data.content as MessageSegment[] : parseTextToSegments(String(data.content ?? ''))
 
-        const channelName = data.type === 'private'
-            ? `私聊-${data.bot || endpointId}`
-            : data.type === 'group'
-            ? `群组-${data.id}`
-            : `频道-${data.id}`
-        const channelType = data.type as Channel['type']
+        const channelType: Channel['type'] = data.type === 'group' || data.type === 'channel' ? data.type : 'private'
+        const channelName = channelType === 'private'
+            ? `会话 ${data.id}`
+            : channelType === 'group'
+            ? `群组场景 ${data.id}`
+            : `频道场景 ${data.id}`
 
         setChannels((prev) => {
-            if (prev.some((c) => c.id === data.id)) return prev
-            const created: Channel = { id: data.id, name: channelName, type: channelType, unread: 0 }
+            if (prev.some((c) => c.id === data.id && c.type === channelType)) return prev
+            const created: Channel = {
+                id: data.id, name: channelName, type: channelType, unread: 0,
+                runConfig: { ...activeChannelRef.current.runConfig },
+            }
             setActiveChannel(created)
             return [...prev, created]
         })
@@ -95,14 +202,34 @@ export default function Sandbox() {
         setMessages((prev) => [...prev, {
             id: data.messageId ?? `bot_${data.timestamp}`, type: 'received', channelType,
             channelId: data.id, channelName, senderId: 'endpoint',
-            senderName: data.bot || endpointId, content, timestamp: data.timestamp,
+            senderName: data.bot || endpointIdRef.current, content, timestamp: data.timestamp,
         }])
     }
 
-    const sendInteractiveAction = (payload: string) => {
+    const sendInteractiveAction = (payload: string, messageId?: string) => {
+        const ws = wsRef.current
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            setTransportNotice('Sandbox 连接尚未就绪，审批选择未发送。')
+            return
+        }
         const segments: MessageSegment[] = [{ type: 'action', data: { id: payload, payload } }]
-        const payloadJson = JSON.stringify({ type: activeChannel.type, id: activeChannel.id, content: segments, timestamp: Date.now() })
-        wsRef.current?.send(payloadJson)
+        const payloadJson = JSON.stringify({
+            type: activeChannel.type,
+            id: activeChannel.id,
+            content: segments,
+            agentRun: activeChannel.runConfig,
+            timestamp: Date.now(),
+        })
+        try {
+            ws.send(payloadJson)
+            if (messageId) {
+                setMessages((current) => current.map((message) => message.id === messageId
+                    ? { ...message, interactionResolved: true }
+                    : message))
+            }
+        } catch {
+            setTransportNotice('审批选择发送失败，请等待连接恢复后重试。')
+        }
     }
 
     useEffect(() => {
@@ -200,6 +327,38 @@ export default function Sandbox() {
     useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) }, [messages])
     useEffect(() => { setPreviewSegments(inputText.trim() ? parseTextToSegments(inputText) : []) }, [inputText])
 
+    const loadTrace = useCallback(async (quiet = false) => {
+        if (!quiet) setTraceLoading(true)
+        try {
+            const current = traceRef.current?.sessionKey === sessionKey ? traceRef.current : null
+            let incoming = await fetchAgentTrace(sessionKey, quiet ? current?.latestSequence ?? 0 : 0)
+            if (quiet && current?.runtimeId && incoming.runtimeId && current.runtimeId !== incoming.runtimeId) {
+                incoming = await fetchAgentTrace(sessionKey, 0)
+            }
+            const merged = mergeTraceSnapshot(current, incoming)
+            traceRef.current = merged
+            setTrace(merged)
+            saveCachedAgentTrace(merged)
+            setTraceNotice(null)
+        } catch (error) {
+            setTraceNotice(error instanceof Error ? error.message : 'Agent Trace 暂不可用')
+        } finally {
+            if (!quiet) setTraceLoading(false)
+        }
+    }, [sessionKey])
+
+    useEffect(() => {
+        const cached = loadCachedAgentTrace(sessionKey)
+        traceRef.current = cached
+        setTrace(cached)
+        setTraceNotice(null)
+        void loadTrace()
+        const timer = window.setInterval(() => {
+            if (document.visibilityState === 'visible') void loadTrace(true)
+        }, 2_000)
+        return () => window.clearInterval(timer)
+    }, [loadTrace])
+
     const parseTextToSegments = (text: string): MessageSegment[] => {
         const segments: MessageSegment[] = []
         const regex = /\[@([^\]]+)\]|\[face:(\d+)\]|\[image:([^\]]+)\]|\[video:([^\]]+)\]|\[audio:([^\]]+)\]/g
@@ -233,16 +392,25 @@ export default function Sandbox() {
         })
     }
 
-    const renderMessageSegments = (segments: (MessageSegment | string)[], isSent: boolean) => {
+    const renderMessageSegments = (
+        segments: (MessageSegment | string)[],
+        isSent: boolean,
+        messageId?: string,
+        interactionResolved = false,
+    ) => {
         const ring = isSent ? 'ring-1 ring-primary-foreground/25' : 'ring-1 ring-border/60'
         return segments.map((segment, index) => {
             if (typeof segment === 'string') {
-                return <span key={index}>{segment.split('\n').map((part, i) => <React.Fragment key={i}>{part}{i < segment.split('\n').length - 1 && <br />}</React.Fragment>)}</span>
+                return <MarkdownContent key={index} text={segment} className={isSent ? 'zhin-markdown--inverse' : undefined} />
             }
             const d = segment.data as Record<string, unknown>
             switch (segment.type) {
                 case 'text':
-                    return <span key={index}>{String(d.text ?? '').split('\n').map((part: string, i: number) => <React.Fragment key={i}>{part}{i < String(d.text ?? '').split('\n').length - 1 && <br />}</React.Fragment>)}</span>
+                case 'markdown':
+                case 'md':
+                    return <MarkdownContent key={index} text={String(d.text ?? d.content ?? '')} className={isSent ? 'zhin-markdown--inverse' : undefined} />
+                case 'code':
+                    return <CodeBlock key={index} code={String(d.code ?? d.text ?? d.content ?? '')} language={String(d.language ?? d.lang ?? '')} />
                 case 'mention':
                 case 'at':
                     return <span key={index} className="inline-flex items-center px-1.5 py-0.5 rounded bg-accent text-accent-foreground text-xs mx-0.5">@{String(d.name ?? d.target ?? d.qq ?? '')}</span>
@@ -257,7 +425,10 @@ export default function Sandbox() {
                     const src = resolveMediaSrc(raw, 'image')
                     if (!src) return <span key={index} className="text-xs opacity-70">[图片]</span>
                     return (
+                        // resolveMediaSrc allowlists non-executable URL schemes and image data MIME types.
+                        // lgtm[js/xss,js/client-side-unvalidated-url-redirection]
                         <a key={index} href={src} target="_blank" rel="noreferrer" className="block my-1">
+                            {/* lgtm[js/xss,js/client-side-unvalidated-url-redirection] */}
                             <img src={src} alt="" className={cn('max-w-[min(320px,88vw)] rounded-lg block', ring, 'ring-offset-0')} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
                         </a>
                     )
@@ -267,6 +438,8 @@ export default function Sandbox() {
                     const src = resolveMediaSrc(raw, 'video')
                     if (!src) return <span key={index} className="text-xs opacity-70">[视频无地址]</span>
                     return (
+                        // resolveMediaSrc allowlists non-executable URL schemes and video data MIME types.
+                        // lgtm[js/xss,js/client-side-unvalidated-url-redirection]
                         <video
                             key={index}
                             src={src}
@@ -283,6 +456,8 @@ export default function Sandbox() {
                     const src = resolveMediaSrc(raw, 'audio')
                     if (!src) return <span key={index} className="text-xs opacity-70">[音频无地址]</span>
                     return (
+                        // resolveMediaSrc allowlists non-executable URL schemes and audio data MIME types.
+                        // lgtm[js/xss,js/client-side-unvalidated-url-redirection]
                         <audio
                             key={index}
                             src={src}
@@ -324,22 +499,21 @@ export default function Sandbox() {
                     )
                 }
                 case 'keyboard': {
-                    const rows = (d.rows as Array<Array<{ label: string; payload: string; disabled?: boolean }>>) ?? []
+                    const rows = (d.rows as Array<Array<{ label: string; payload: string; disabled?: boolean; style?: string }>>) ?? []
+                    const resolved = Boolean(messageId && interactionResolved)
                     return (
-                        <div key={index} className="inline-grid gap-1 my-1">
+                        <div key={index} className="agent-playground-approval-actions">
                             {rows.map((row, ri) => (
-                                <div key={ri} className="flex gap-1">
+                                <div key={ri}>
                                     {row.map((btn) => (
                                         <button
                                             key={btn.payload}
                                             type="button"
-                                            disabled={btn.disabled || isSent}
-                                            onClick={() => sendInteractiveAction(btn.payload)}
+                                            disabled={btn.disabled || isSent || resolved}
+                                            onClick={() => sendInteractiveAction(btn.payload, messageId)}
                                             className={cn(
-                                                'min-w-9 h-9 rounded-md border text-sm font-medium transition-colors',
-                                                btn.disabled
-                                                    ? 'opacity-50 cursor-not-allowed'
-                                                    : 'hover:bg-accent active:scale-95',
+                                                (btn.style === 'primary' || /^允许/u.test(btn.label)) && 'is-primary',
+                                                (btn.style === 'danger' || /拒绝|取消/u.test(btn.label)) && 'is-danger',
                                             )}
                                         >
                                             {btn.label}
@@ -347,6 +521,7 @@ export default function Sandbox() {
                                     ))}
                                 </div>
                             ))}
+                            {resolved && <small><Check size={12} />已提交本次选择</small>}
                         </div>
                     )
                 }
@@ -357,23 +532,46 @@ export default function Sandbox() {
     }
 
     const handleSendMessage = (text: string, segments: MessageSegment[]) => {
-        if (!hasRenderableSegments(segments)) return
+        if (!canExecute || !hasRenderableSegments(segments)) return
         const newMessage: Message = { id: `msg_${Date.now()}`, type: 'sent', channelType: activeChannel.type, channelId: activeChannel.id, channelName: activeChannel.name, senderId: 'test_user', senderName: '测试用户', content: segments, timestamp: Date.now() }
-        setMessages((prev) => [...prev, newMessage]); setInputText(''); setPreviewSegments([])
+        setMessages((prev) => [...prev, newMessage]); setInputText(''); setPreviewSegments([]); setComposerMode('write')
         editorRef.current?.clear()
         // Stamp type+id so Host sandbox endpoint preserves channel context for outbound replies.
-        const payload = JSON.stringify({ type: activeChannel.type, id: activeChannel.id, content: segments, timestamp: Date.now() })
+        const payload = JSON.stringify({
+            type: activeChannel.type,
+            id: activeChannel.id,
+            messageId: newMessage.id,
+            content: segments,
+            agentRun: activeChannel.runConfig,
+            timestamp: Date.now(),
+        })
         wsRef.current?.send(payload)
     }
 
 
-    const clearMessages = () => { if (confirm('确定清空所有消息记录？')) setMessages([]) }
-    const switchChannel = (channel: Channel) => { setViewMode('chat'); setActiveChannel(channel); setChannels((prev) => prev.map((c) => c.id === channel.id ? { ...c, unread: 0 } : c)); if (window.innerWidth < 768) setShowChannelList(false) }
-    const addChannel = () => {
-        const types: Array<'private' | 'group' | 'channel'> = ['private', 'group', 'channel']
-        const type = types[Math.floor(Math.random() * types.length)]
-        const name = prompt(`请输入频道名称：`)
-        if (name) { const nc: Channel = { id: `${type}_${Date.now()}`, name, type, unread: 0 }; setChannels((p) => [...p, nc]); setActiveChannel(nc) }
+    const clearMessages = () => {
+        setMessages((current) => current.filter((message) => !(
+            message.channelId === activeChannel.id && message.channelType === activeChannel.type
+        )))
+        setConfirmClear(false)
+    }
+    const switchChannel = (channel: Channel) => { setActiveChannel(channel); setChannels((prev) => prev.map((c) => c.id === channel.id && c.type === channel.type ? { ...c, unread: 0 } : c)); if (window.innerWidth < 900) setShowChannelList(false) }
+    const updateRunConfig = (patch: Partial<SandboxAgentRunConfig>) => {
+        const next = { ...activeChannel, runConfig: { ...activeChannel.runConfig, ...patch } }
+        setActiveChannel(next)
+        setChannels((sessions) => sessions.map((session) => session.id === activeChannel.id && session.type === activeChannel.type ? next : session))
+    }
+    const addSession = () => {
+        const label = newSessionName.trim() || '未命名试验'
+        const id = `${newSessionScope}-${Date.now().toString(36)}`
+        const session: Channel = {
+            id, name: label, type: newSessionScope, unread: 0,
+            runConfig: { ...activeChannel.runConfig },
+        }
+        setChannels((current) => [...current, session])
+        setActiveChannel(session)
+        setNewSessionName('')
+        setShowNewSession(false)
     }
     const getChannelIcon = (type: string) => { switch (type) { case 'private': return <User size={16} />; case 'group': return <Users size={16} />; case 'channel': return <Hash size={16} />; default: return <MessageSquare size={16} /> } }
     const insertFace = (faceId: number) => { editorRef.current?.insertFace(faceId); setShowFacePicker(false) }
@@ -386,7 +584,6 @@ export default function Sandbox() {
         setMediaUrl('')
         setMediaPanel(null)
     }
-    const insertAtUser = () => { if (!atUserName.trim()) return; editorRef.current?.insertAt(atUserName.trim()); setAtUserName(''); setShowAtPicker(false) }
     const selectAtUser = (user: { id: string; name: string }) => { editorRef.current?.replaceAtTrigger(user.name, user.id); setAtPopoverPosition(null); setAtSearchQuery('') }
     const handleAtTrigger = (show: boolean, searchQuery: string, position?: { top: number; left: number }) => {
         if (activeChannel.type === 'private') { setAtPopoverPosition(null); setAtSearchQuery(''); return }
@@ -395,160 +592,308 @@ export default function Sandbox() {
     const filteredAtSuggestions = atSuggestions.filter((user) => { if (!atSearchQuery.trim()) return true; const q = atSearchQuery.toLowerCase(); return user.name.toLowerCase().includes(q) || user.id.toLowerCase().includes(q) })
     const handleEditorChange = (text: string, segments: MessageSegment[]) => { setInputText(text); setPreviewSegments(segments) }
     const filteredFaces = faceList.filter(face => face.name.toLowerCase().includes(faceSearchQuery.toLowerCase()) || face.describe.toLowerCase().includes(faceSearchQuery.toLowerCase()))
-    const channelMessages = messages.filter((msg) => msg.channelId === activeChannel.id)
+    const channelMessages = messages.filter((msg) => msg.channelId === activeChannel.id && msg.channelType === activeChannel.type)
+    const lastUserMessage = [...channelMessages].reverse().find((message) => message.type === 'sent')
+    const currentTaskMessage = currentTask?.sourceMessageId
+        ? channelMessages.find((message) => message.id === currentTask.sourceMessageId && message.type === 'sent')
+        : undefined
+    const scopeLabel = activeChannel.type === 'private' ? '单用户' : activeChannel.type === 'group' ? '群组上下文' : '频道上下文'
+    const runPrompt = (prompt: string) => handleSendMessage(prompt, [{ type: 'text', data: { text: prompt } }])
+    const recentTraceEvents = trace?.events.slice(-8).reverse() ?? []
+    const stopActiveTask = async () => {
+        setStoppingTask(true)
+        try {
+            const cancelled = await cancelAgentTask(sessionKey)
+            setTraceNotice(cancelled ? '已发送停止请求，正在等待任务结束。' : '当前会话没有运行中的任务。')
+            window.setTimeout(() => void loadTrace(true), 240)
+        } catch (error) {
+            setTraceNotice(error instanceof Error ? error.message : '无法停止任务')
+            setShowInspector(true)
+        } finally {
+            setStoppingTask(false)
+        }
+    }
+    const retryLastTask = () => {
+        if (!lastUserMessage) return
+        handleSendMessage(messageText(lastUserMessage.content), [...lastUserMessage.content])
+    }
+    const retryCurrentTask = () => {
+        if (!currentTaskMessage) return
+        handleSendMessage(messageText(currentTaskMessage.content), [...currentTaskMessage.content])
+    }
+    const exportCurrentRun = () => {
+        if (!trace || !currentTask) return
+        const report = buildAgentRunReport(trace, {
+            run: currentTask,
+            sessionName: activeChannel.name,
+            taskPrompt: currentTaskMessage ? messageText(currentTaskMessage.content) : undefined,
+            workingDirectory: activeChannel.runConfig.workingDirectory,
+            safetyMode: activeChannel.runConfig.safetyMode,
+            approvalMode: activeChannel.runConfig.approvalMode,
+            networkAccess: activeChannel.runConfig.safetyMode === 'danger-full-access' || activeChannel.runConfig.networkAccess,
+        })
+        const url = URL.createObjectURL(new Blob([report], { type: 'text/markdown;charset=utf-8' }))
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `zhin-agent-run-${safeFileName(activeChannel.name)}-${currentTask.turnId.slice(0, 8)}.md`
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+        window.setTimeout(() => URL.revokeObjectURL(url), 0)
+    }
+    const inlineRunCard = currentTask ? (
+        <article className={cn('agent-playground-inline-run', `is-${currentTask.status}`)} aria-live={currentTask.status === 'running' ? 'polite' : undefined}>
+            <span className="agent-playground-inline-run-rail" aria-hidden="true" />
+            <div className="agent-playground-inline-run-head">
+                <span className="agent-playground-inline-run-icon"><ListChecks size={17} /></span>
+                <div className="agent-playground-inline-run-copy">
+                    <span>{currentTask.status === 'running' ? 'Live agent run' : 'Agent run summary'}</span>
+                    <h3>{taskStatusLabel(currentTask.status)}</h3>
+                    {currentTaskMessage && <p>{messageText(currentTaskMessage.content)}</p>}
+                </div>
+                <div className="agent-playground-inline-run-actions">
+                    {currentTask.status === 'running' ? (
+                        <button type="button" className="is-stop" onClick={() => void stopActiveTask()} disabled={stoppingTask}><Square size={12} />{stoppingTask ? '停止中' : '停止'}</button>
+                    ) : currentTaskMessage ? (
+                        <button type="button" onClick={retryCurrentTask}><RotateCcw size={13} />重试</button>
+                    ) : null}
+                    <button type="button" onClick={exportCurrentRun} title="导出 Markdown 运行报告"><FileDown size={13} />导出</button>
+                </div>
+            </div>
+            <dl className="agent-playground-inline-run-metrics">
+                <div><dt>耗时</dt><dd>{currentTask.durationMs === undefined ? '进行中' : formatDuration(currentTask.durationMs)}</dd></div>
+                <div><dt>步骤</dt><dd>{currentRunSteps.length}</dd></div>
+                <div><dt>工具</dt><dd>{currentTask.toolCount}</dd></div>
+                <div><dt>Token</dt><dd>{currentTask.tokenCount.toLocaleString()}</dd></div>
+                <div className={cn(currentTask.problemCount > 0 && 'has-problem')}><dt>异常</dt><dd>{currentTask.problemCount}</dd></div>
+            </dl>
+            {inlineRunExpanded && (
+                currentRunSteps.length > 0 ? (
+                    <ol className="agent-playground-inline-run-steps">
+                        {currentRunSteps.map((step) => (
+                            <li key={step.id} className={cn(`is-${step.status}`)}>
+                                <i aria-hidden="true" />
+                                <div><strong>{step.title}</strong>{step.detail && <small>{step.detail}</small>}</div>
+                                <span>{step.durationMs === undefined ? runStepStatusLabel(step.status) : formatDuration(step.durationMs)}</span>
+                            </li>
+                        ))}
+                    </ol>
+                ) : <div className="agent-playground-inline-run-empty">正在等待第一条运行事件…</div>
+            )}
+            <footer>
+                <button type="button" aria-expanded={inlineRunExpanded} onClick={() => setInlineRunExpanded((expanded) => !expanded)}>
+                    <ChevronDown size={13} />{inlineRunExpanded ? '收起步骤' : `查看 ${currentRunSteps.length} 个步骤`}
+                </button>
+                <button type="button" onClick={() => { setInspectorView(currentRunArtifacts.length > 0 ? 'artifacts' : 'runs'); setShowInspector(true) }}>
+                    {currentRunArtifacts.length > 0 ? `${currentRunArtifacts.length} 个变更与产物` : '打开运行检查器'}<PanelRight size={13} />
+                </button>
+            </footer>
+        </article>
+    ) : null
 
     return (
-        <div className="sandbox-container rounded-xl border border-border/70 bg-card/30 shadow-sm">
-            <button className="mobile-channel-toggle md:hidden" onClick={() => setShowChannelList(!showChannelList)}>
-                <MessageSquare size={20} /> 频道列表
-            </button>
-
-            {/* Channel sidebar */}
-            <div className={cn("channel-sidebar rounded-lg border bg-card", showChannelList && "show")}>
-                <div className="p-3 border-b">
+        <section className="agent-playground-shell">
+            <div className="agent-playground-mobilebar">
+                <button type="button" aria-expanded={showChannelList} onClick={() => setShowChannelList(!showChannelList)}><MessageSquare size={17} />测试会话</button>
+                <strong>Agent 试验台</strong>
+                <button type="button" aria-expanded={showInspector} onClick={() => setShowInspector(!showInspector)}><PanelRight size={17} />检查器</button>
+            </div>
+
+            <nav className={cn("channel-sidebar agent-playground-sessions", showChannelList && "show")} aria-label="测试会话">
+                <div className="agent-playground-brand">
                     <div className="flex justify-between items-center">
                         <div className="flex items-center gap-2">
-                            <div className="p-1 rounded-md bg-secondary"><MessageSquare size={16} className="text-muted-foreground" /></div>
-                            <h3 className="font-semibold">频道列表</h3>
+                            <span className="agent-playground-mark"><Sparkles size={16} /></span>
+                            <div><h2>Agent 试验台</h2><small>Sandbox playground</small></div>
                         </div>
-                        <span className={cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border", connected ? "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800" : "bg-muted text-muted-foreground")}>
+                        <span className={cn("agent-playground-connection", connected && "is-online")} title={connected ? 'Sandbox WebSocket 已连接' : '正在重连 Sandbox WebSocket'}>
                             {connected ? <Wifi size={12} /> : <WifiOff size={12} />}
-                            {connected ? '已连接' : '未连接'}
                         </span>
                     </div>
                 </div>
 
-                <div className="flex-1 overflow-y-auto p-2 space-y-1">
+                <div className="agent-playground-section-label"><span>测试会话</span><span>{channels.length}</span></div>
+                <div className="agent-playground-session-list">
                     {channels.map((channel) => {
-                        const isActive = viewMode === 'chat' && activeChannel.id === channel.id
+                        const isActive = activeChannel.id === channel.id && activeChannel.type === channel.type
                         return (
-                            <div key={channel.id} className={cn("menu-item", isActive && "active")} onClick={() => switchChannel(channel)}>
-                                <span className="shrink-0">{getChannelIcon(channel.type)}</span>
+                            <button type="button" key={`${channel.type}:${channel.id}`} aria-current={isActive ? 'page' : undefined} className={cn("agent-playground-session", isActive && "active")} onClick={() => switchChannel(channel)}>
+                                <span className="agent-playground-session-icon">{getChannelIcon(channel.type)}</span>
                                 <div className="flex-1 min-w-0">
                                     <div className="text-sm font-medium truncate">{channel.name}</div>
-                                    <div className="text-xs text-muted-foreground">{channel.type === 'private' ? '私聊' : channel.type === 'group' ? '群聊' : '频道'}</div>
+                                    <div className="text-xs text-muted-foreground">{channel.type === 'private' ? '单用户作用域' : channel.type === 'group' ? '群组作用域' : '频道作用域'}</div>
                                 </div>
                                 {channel.unread > 0 && <span className="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-destructive text-destructive-foreground text-[10px] font-medium px-1">{channel.unread}</span>}
-                            </div>
+                            </button>
                         )
                     })}
-                    <div className="pt-2 mt-2 border-t space-y-1">
-                        <div className={cn("menu-item", viewMode === 'requests' && "active")} onClick={() => { setViewMode('requests'); if (window.innerWidth < 768) setShowChannelList(false) }}>
-                            <UserPlus size={16} className="shrink-0" />
-                            <div className="flex-1 min-w-0">
-                                <div className="text-sm font-medium">请求</div>
-                                <div className="text-xs text-muted-foreground">好友/群邀请等</div>
+                </div>
+
+                <div className="agent-playground-new-session">
+                    {showNewSession ? (
+                        <div className="agent-playground-new-form">
+                            <input value={newSessionName} onChange={(event) => setNewSessionName(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addSession() }} placeholder="会话名称" autoFocus />
+                            <div className="agent-playground-scope-picker" role="group" aria-label="消息作用域">
+                                {(['private', 'group', 'channel'] as SandboxScope[]).map((scope) => (
+                                    <button type="button" key={scope} aria-pressed={newSessionScope === scope} className={cn(newSessionScope === scope && 'active')} onClick={() => setNewSessionScope(scope)}>
+                                        {scope === 'private' ? '单用户' : scope === 'group' ? '群组' : '频道'}
+                                    </button>
+                                ))}
                             </div>
-                        </div>
-                        <div className={cn("menu-item", viewMode === 'notices' && "active")} onClick={() => { setViewMode('notices'); if (window.innerWidth < 768) setShowChannelList(false) }}>
-                            <Bell size={16} className="shrink-0" />
-                            <div className="flex-1 min-w-0">
-                                <div className="text-sm font-medium">通知</div>
-                                <div className="text-xs text-muted-foreground">群管/撤回等</div>
+                            <div className="agent-playground-new-actions">
+                                <button type="button" onClick={() => setShowNewSession(false)}>取消</button>
+                                <button type="button" className="primary" onClick={addSession}>创建</button>
                             </div>
                         </div>
-                    </div>
+                    ) : (
+                        <button type="button" className="agent-playground-add" onClick={() => setShowNewSession(true)}><Plus size={15} />新建测试会话</button>
+                    )}
                 </div>
-
-                <div className="p-2 border-t">
-                    <button className="w-full py-2 px-3 rounded-md border border-dashed text-sm text-muted-foreground hover:bg-accent transition-colors" onClick={addChannel}>+ 添加频道</button>
+                <div className="agent-playground-endpoint">
+                    <span>{persistenceStatus === 'saved' ? '会话已持久化' : '会话保存失败'}</span>
+                    <strong>{endpointId}</strong>
                 </div>
-            </div>
+            </nav>
 
-            {showChannelList && <div className="channel-overlay md:hidden" onClick={() => setShowChannelList(false)} />}
+            {showChannelList && <div className="channel-overlay" onClick={() => setShowChannelList(false)} />}
 
-            {/* Main area: Chat / Requests / Notices */}
-            <div className="chat-area">
-                {viewMode === 'requests' && (
-                    <div className="rounded-lg border bg-card flex-1 flex flex-col min-h-0 overflow-hidden">
-                        <div className="p-3 border-b flex-shrink-0">
-                            <h2 className="text-lg font-bold flex items-center gap-2">
-                                <UserPlus size={20} /> 请求
-                            </h2>
-                        </div>
-                        <div className="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center gap-3 text-muted-foreground text-center">
-                            <UserPlus size={48} className="opacity-30" />
-                            <span>沙盒为模拟环境，暂无请求数据</span>
-                            <span className="text-sm">实际好友/群邀请等请求请到侧边栏 <strong>机器人</strong> 页面进入对应机器人管理查看</span>
+            <main className="chat-area agent-playground-main">
+                <header className="agent-playground-runbar">
+                    <div className="agent-playground-run-identity">
+                        <span className="agent-playground-run-icon">{getChannelIcon(activeChannel.type)}</span>
+                        <div>
+                            <div className="agent-playground-run-title"><h1>{activeChannel.name}</h1><span>{scopeLabel}</span></div>
+                            <code>{sessionKey}</code>
                         </div>
                     </div>
-                )}
+                    <div className="agent-playground-run-actions">
+                        <span className={cn("agent-playground-run-state", currentTask?.status === 'running' && "is-running", currentTask?.status === 'failed' && 'has-problem')}>
+                            {currentTask?.status === 'running' ? <Activity size={14} /> : <Gauge size={14} />}
+                            {currentTask ? taskStatusLabel(currentTask.status) : `${channelMessages.length} 条消息`}
+                        </span>
+                        {currentTask?.status === 'running' ? (
+                            <button type="button" className="agent-playground-stop" onClick={() => void stopActiveTask()} disabled={stoppingTask} aria-label="停止当前任务"><Square size={13} />{stoppingTask ? '停止中' : '停止'}</button>
+                        ) : lastUserMessage ? (
+                            <button type="button" onClick={retryLastTask} aria-label="重新运行上一个任务"><RotateCcw size={14} />重试</button>
+                        ) : null}
+                        <a href={agentStudioPath(sessionKey)}><ExternalLink size={14} />Agent Studio</a>
+                        <button type="button" className={cn(showRunSettings && 'active')} aria-expanded={showRunSettings} onClick={() => setShowRunSettings((visible) => !visible)} aria-label="配置运行环境"><SlidersHorizontal size={16} /></button>
+                        <button type="button" aria-expanded={showInspector} onClick={() => setShowInspector(!showInspector)} aria-label="切换运行检查器"><PanelRight size={16} /></button>
+                        <button type="button" onClick={() => setConfirmClear(true)} aria-label="清空当前会话"><Trash2 size={15} /></button>
+                    </div>
+                </header>
 
-                {viewMode === 'notices' && (
-                    <div className="rounded-lg border bg-card flex-1 flex flex-col min-h-0 overflow-hidden">
-                        <div className="p-3 border-b flex-shrink-0">
-                            <h2 className="text-lg font-bold flex items-center gap-2">
-                                <Bell size={20} /> 通知
-                            </h2>
-                        </div>
-                        <div className="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center gap-3 text-muted-foreground text-center">
-                            <Bell size={48} className="opacity-30" />
-                            <span>沙盒为模拟环境，暂无通知数据</span>
-                            <span className="text-sm">实际群管、撤回等通知请到侧边栏 <strong>机器人</strong> 页面进入对应机器人管理查看</span>
-                        </div>
+                {confirmClear && (
+                    <div className="agent-playground-confirm" role="alert">
+                        <div><strong>清空当前测试记录？</strong><span>只移除“{activeChannel.name}”在浏览器中的消息，不影响 Agent 会话存储。</span></div>
+                        <button type="button" onClick={() => setConfirmClear(false)}>取消</button>
+                        <button type="button" className="danger" onClick={clearMessages}>确认清空</button>
                     </div>
                 )}
 
-                {viewMode === 'chat' && (
-                    <>
-                {/* Top bar */}
-                <div className="rounded-lg border bg-card p-3 flex-shrink-0">
-                    <div className="flex justify-between items-center flex-wrap gap-2">
-                        <div className="flex items-center gap-3">
-                            <div className="p-2 rounded-lg bg-secondary">{getChannelIcon(activeChannel.type)}</div>
-                            <div>
-                                <h2 className="text-lg font-bold">{activeChannel.name}</h2>
-                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                                    <span>{activeChannel.id}</span>
-                                    <span className="inline-flex items-center px-1.5 py-0.5 rounded border text-[10px]">{channelMessages.length}</span>
-                                    <span>条消息</span>
-                                </div>
-                            </div>
-                            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground">
-                                {activeChannel.type === 'private' ? '私聊' : activeChannel.type === 'group' ? '群聊' : '频道'}
-                            </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <input value={endpointId} onChange={(e) => setBotName(e.target.value)} placeholder="机器人名称"
-                                className="h-8 w-28 rounded-md border bg-transparent px-2 text-sm" />
-                            <button className="inline-flex items-center gap-1 h-8 px-3 rounded-md bg-secondary text-secondary-foreground text-sm hover:bg-secondary/80" onClick={clearMessages}>
-                                <Trash2 size={14} /> 清空
-                            </button>
-                        </div>
+                {transportNotice && (
+                    <div className="agent-playground-confirm" role="status">
+                        <div><strong>运行暂不可用</strong><span>{transportNotice}</span></div>
+                        <button type="button" onClick={() => setTransportNotice(null)}>知道了</button>
                     </div>
-                </div>
+                )}
+
+                {showRunSettings && (
+                    <section className="agent-playground-run-settings" aria-label="运行配置">
+                        <label className="agent-playground-directory-field">
+                            <span><FolderOpen size={14} />工作目录</span>
+                            <input
+                                value={activeChannel.runConfig.workingDirectory}
+                                onChange={(event) => updateRunConfig({ workingDirectory: event.target.value })}
+                                placeholder="使用 Host 项目目录"
+                                spellCheck={false}
+                            />
+                        </label>
+                        <label>
+                            <span><ShieldCheck size={14} />安全策略</span>
+                            <select value={activeChannel.runConfig.safetyMode} onChange={(event) => {
+                                const safetyMode = event.target.value as SandboxAgentRunConfig['safetyMode']
+                                updateRunConfig({ safetyMode, ...(safetyMode === 'danger-full-access' ? { networkAccess: true } : {}) })
+                            }}>
+                                <option value="read-only">只读</option>
+                                <option value="workspace-write">工作区写入</option>
+                                <option value="danger-full-access">完全访问</option>
+                            </select>
+                        </label>
+                        <label>
+                            <span>审批策略</span>
+                            <select
+                                value={activeChannel.runConfig.safetyMode === 'read-only' ? 'deny' : activeChannel.runConfig.safetyMode === 'danger-full-access' ? 'allow' : activeChannel.runConfig.approvalMode}
+                                disabled={activeChannel.runConfig.safetyMode !== 'workspace-write'}
+                                onChange={(event) => updateRunConfig({ approvalMode: event.target.value as SandboxAgentRunConfig['approvalMode'] })}
+                            >
+                                <option value="ask">按需确认</option>
+                                <option value="deny">自动拒绝</option>
+                                <option value="allow">自动允许</option>
+                            </select>
+                        </label>
+                        <label className="agent-playground-network-toggle">
+                            <span><Network size={14} />网络访问</span>
+                            <input
+                                type="checkbox"
+                                checked={activeChannel.runConfig.safetyMode === 'danger-full-access' || activeChannel.runConfig.networkAccess}
+                                disabled={activeChannel.runConfig.safetyMode === 'danger-full-access'}
+                                onChange={(event) => updateRunConfig({ networkAccess: event.target.checked })}
+                            />
+                            <i aria-hidden="true" />
+                        </label>
+                        {activeChannel.runConfig.safetyMode === 'danger-full-access' && (
+                            <p><CircleAlert size={14} />完全访问允许 Agent 操作工作目录之外的文件并访问网络，请仅用于可信任务。</p>
+                        )}
+                        {activeChannel.runConfig.safetyMode !== 'danger-full-access' && shellIsolation?.available === false && (
+                            <p><CircleAlert size={14} />安全 Shell 需要可用的 Docker daemon；当前仅文件工具可运行。{shellIsolation.message}</p>
+                        )}
+                    </section>
+                )}
 
                 {/* Messages */}
-                <div className="rounded-lg border bg-card flex-1 flex flex-col min-h-0">
-                    <div className="flex-1 overflow-y-auto p-4">
+                <section className="agent-playground-conversation" aria-label="Agent 对话">
+                    <div className="agent-playground-message-scroll">
                         {channelMessages.length === 0 ? (
-                            <div className="flex flex-col items-center justify-center h-full gap-3">
-                                <MessageSquare size={64} className="text-muted-foreground/20" />
-                                <span className="text-muted-foreground">暂无消息，开始对话吧！</span>
+                            <div className="agent-playground-empty">
+                                <span className="agent-playground-empty-mark"><Sparkles size={24} /></span>
+                                <div><h2>开始一次可观察的 Agent 运行</h2><p>发送任务后，回复、工具调用、Token 与异常会在同一会话上下文中关联。</p></div>
+                                <div className="agent-playground-prompts">
+                                    <button type="button" onClick={() => runPrompt('介绍当前 Agent 可以使用的能力，并给出三个具体示例。')}>探索可用能力</button>
+                                    <button type="button" onClick={() => runPrompt('用 Markdown 表格总结当前运行环境，并附上一段 TypeScript 示例代码。')}>测试富文本输出</button>
+                                    <button type="button" onClick={() => runPrompt('分析一个任务从推理、工具调用到最终回复的完整执行路径。')}>观察执行路径</button>
+                                </div>
                             </div>
                         ) : (
-                            <div className="space-y-2">
-                                {channelMessages.map((msg) => (
-                                    <div key={msg.id} className={cn("flex", msg.type === 'sent' ? "justify-end" : "justify-start")}>
-                                        <div className={cn("max-w-[70%] p-3 rounded-2xl", msg.type === 'sent' ? "bg-primary text-primary-foreground" : "bg-muted")}>
-                                            <div className="flex items-center gap-2 mb-1">
-                                                {msg.type === 'received' && <Bot size={14} />}
-                                                {msg.type === 'sent' && <User size={14} />}
-                                                <span className="text-xs font-medium opacity-90">{msg.senderName}</span>
-                                                <span className="text-xs opacity-70">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                            <div className="agent-playground-message-list">
+                                {channelMessages.map((msg) => {
+                                    const isApproval = msg.type === 'received' && msg.content.some((segment) => segment.type === 'keyboard')
+                                    return (
+                                    <React.Fragment key={msg.id}>
+                                    <article className={cn("agent-playground-message", msg.type === 'sent' ? "is-user" : "is-agent", isApproval && "is-approval")}>
+                                        <span className="agent-playground-message-avatar">{msg.type === 'received' ? <Bot size={16} /> : <User size={16} />}</span>
+                                        <div className="agent-playground-message-main">
+                                            <div className="agent-playground-message-meta">
+                                                <strong>{isApproval ? '需要你的确认' : msg.type === 'received' ? endpointId : '你'}</strong>
+                                                {isApproval && <span>approval required</span>}
+                                                <time>{new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</time>
                                             </div>
-                                            <div className="text-sm space-y-1">{renderMessageSegments(msg.content, msg.type === 'sent')}</div>
+                                            <div className="agent-playground-message-content">{renderMessageSegments(msg.content, msg.type === 'sent', msg.id, msg.interactionResolved === true)}</div>
                                         </div>
-                                    </div>
-                                ))}
+                                    </article>
+                                    {currentTaskMessage?.id === msg.id && inlineRunCard}
+                                    </React.Fragment>
+                                    )
+                                })}
+                                {!currentTaskMessage && inlineRunCard}
                                 <div ref={messagesEndRef} />
                             </div>
                         )}
                     </div>
-                </div>
+                </section>
 
                 {/* Input area */}
-                <div className="rounded-lg border bg-card p-3 flex-shrink-0 space-y-3">
+                <section className="agent-playground-composer" aria-label="任务输入">
                     {/* Toolbar */}
                     <div className="flex gap-2 items-center flex-wrap">
                         <button type="button" className={cn("h-8 w-8 rounded-md flex items-center justify-center border transition-colors", showFacePicker ? "bg-primary text-primary-foreground" : "hover:bg-accent")}
@@ -568,9 +913,13 @@ export default function Sandbox() {
                             <Music size={16} />
                         </button>
                         <div className="flex-1 min-w-[1rem]" />
+                        <div className="sandbox-composer-tabs" role="tablist" aria-label="消息编辑模式">
+                            <button type="button" role="tab" aria-selected={composerMode === 'write'} className={cn(composerMode === 'write' && 'active')} onClick={() => setComposerMode('write')}>编写</button>
+                            <button type="button" role="tab" aria-selected={composerMode === 'preview'} className={cn(composerMode === 'preview' && 'active')} onClick={() => setComposerMode('preview')}>预览</button>
+                        </div>
                         {inputText && (
                             <button className="h-8 w-8 rounded-md flex items-center justify-center hover:bg-accent transition-colors"
-                                onClick={() => { setInputText(''); setPreviewSegments([]) }}><X size={16} /></button>
+                                onClick={() => { editorRef.current?.clear(); setInputText(''); setPreviewSegments([]); setComposerMode('write') }} aria-label="清空输入"><X size={16} /></button>
                         )}
                     </div>
 
@@ -624,11 +973,20 @@ export default function Sandbox() {
                     {/* Editor + send */}
                     <div className="flex gap-2 items-start">
                         <div className="flex-1 relative">
-                            <RichTextEditor
-                                ref={editorRef} placeholder={`向 ${activeChannel.name} 发送消息...`}
-                                onSend={handleSendMessage} onChange={handleEditorChange} onAtTrigger={handleAtTrigger}
-                                minHeight="44px" maxHeight="200px"
-                            />
+                            <div className={composerMode === 'write' ? 'block' : 'hidden'}>
+                                <RichTextEditor
+                                    ref={editorRef} placeholder={`向 ${activeChannel.name} 发送消息，支持 Markdown...`}
+                                    onSend={handleSendMessage} onChange={handleEditorChange} onAtTrigger={handleAtTrigger}
+                                    minHeight="44px" maxHeight="200px"
+                                />
+                            </div>
+                            {composerMode === 'preview' && (
+                                <div className="sandbox-markdown-preview" role="tabpanel">
+                                    {inputText.trim()
+                                        ? <MarkdownContent text={inputText} />
+                                        : <span className="sandbox-markdown-preview-empty">输入 Markdown 后可在这里检查最终效果</span>}
+                                </div>
+                            )}
                             {atPopoverPosition && (
                                 <div className="absolute z-50 rounded-lg border bg-popover shadow-md min-w-60 max-h-72 overflow-y-auto p-1"
                                     style={{ top: `${atPopoverPosition.top}px`, left: `${atPopoverPosition.left}px` }}>
@@ -649,7 +1007,7 @@ export default function Sandbox() {
                         <button
                             className="inline-flex items-center gap-1.5 h-10 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 transition-colors hover:bg-primary/90"
                             onClick={() => { const c = editorRef.current?.getContent(); if (c) handleSendMessage(c.text, c.segments) }}
-                            disabled={!hasRenderableSegments(previewSegments)}>
+                            disabled={!canExecute || !hasRenderableSegments(previewSegments)}>
                             <Send size={16} /> 发送
                         </button>
                     </div>
@@ -659,14 +1017,170 @@ export default function Sandbox() {
                         <Info size={12} /> 快捷操作:
                         <span className="px-1 py-0.5 rounded border text-[10px]">Enter</span> 发送
                         <span className="px-1 py-0.5 rounded border text-[10px]">Shift+Enter</span> 换行
+                        <span className="px-1 py-0.5 rounded border text-[10px]">```ts</span> 代码块
+                        <span className="px-1 py-0.5 rounded border text-[10px]">**文本**</span> 加粗
                         <span className="px-1 py-0.5 rounded border text-[10px]">[@名称]</span> @某人
                         <span className="px-1 py-0.5 rounded border text-[10px]">[video:URL]</span>
                         <span className="px-1 py-0.5 rounded border text-[10px]">[audio:URL]</span>
                     </div>
+                </section>
+            </main>
+
+            <aside className={cn("agent-playground-inspector", showInspector && "show")} aria-label="运行检查器">
+                <div className="agent-playground-inspector-head">
+                    <div><span>Run inspector</span><h2>运行检查器</h2></div>
+                    <div>
+                        <button type="button" onClick={() => void loadTrace()} aria-label="刷新 Agent Trace" disabled={traceLoading}><RefreshCw size={15} className={cn(traceLoading && 'animate-spin')} /></button>
+                        <button type="button" className="agent-playground-inspector-close" onClick={() => setShowInspector(false)} aria-label="关闭运行检查器"><X size={15} /></button>
+                    </div>
                 </div>
-                    </>
-                )}
-            </div>
-        </div>
+
+                <div className="agent-playground-inspector-tabs" role="tablist" aria-label="检查器视图">
+                    <button type="button" role="tab" aria-selected={inspectorView === 'runs'} className={cn(inspectorView === 'runs' && 'active')} onClick={() => setInspectorView('runs')}><Activity size={13} />任务</button>
+                    <button type="button" role="tab" aria-selected={inspectorView === 'artifacts'} className={cn(inspectorView === 'artifacts' && 'active')} onClick={() => setInspectorView('artifacts')}><FileDiff size={13} />变更与产物 <span>{workbenchArtifacts.length}</span></button>
+                </div>
+
+                <div className={cn("agent-playground-inspector-view", inspectorView !== 'runs' && 'hidden')}>
+
+                <section className="agent-playground-inspector-section">
+                    <div className="agent-playground-inspector-title"><span>运行概览</span><small>{traceSummary.activeTurns > 0 ? 'live' : 'idle'}</small></div>
+                    <div className="agent-playground-metrics">
+                        <div><Activity /><strong>{traceSummary.eventCount.toLocaleString()}</strong><span>事件</span></div>
+                        <div><Wrench /><strong>{traceSummary.toolCount.toLocaleString()}</strong><span>工具</span></div>
+                        <div><Coins /><strong>{traceSummary.tokenCount.toLocaleString()}</strong><span>Token</span></div>
+                        <div className={cn(traceSummary.problemCount > 0 && 'has-problem')}><CircleAlert /><strong>{traceSummary.problemCount}</strong><span>异常</span></div>
+                    </div>
+                </section>
+
+                <section className="agent-playground-inspector-section">
+                    <div className="agent-playground-inspector-title"><span>上下文</span></div>
+                    <dl className="agent-playground-context-list">
+                        <div><dt>Endpoint</dt><dd>{endpointId}</dd></div>
+                        <div><dt>Scope</dt><dd>{activeChannel.type}</dd></div>
+                        <div><dt>Scene</dt><dd>{activeChannel.id}</dd></div>
+                        <div><dt>Workdir</dt><dd title={activeChannel.runConfig.workingDirectory}>{activeChannel.runConfig.workingDirectory || 'Host project root'}</dd></div>
+                        <div><dt>Security</dt><dd>{activeChannel.runConfig.safetyMode}</dd></div>
+                        <div><dt>Approval</dt><dd>{activeChannel.runConfig.safetyMode === 'read-only' ? 'deny' : activeChannel.runConfig.safetyMode === 'danger-full-access' ? 'allow' : activeChannel.runConfig.approvalMode}</dd></div>
+                        <div><dt>Network</dt><dd>{activeChannel.runConfig.networkAccess ? 'enabled' : 'disabled'}</dd></div>
+                        <div><dt>Isolation</dt><dd className={cn(shellIsolation?.available && 'is-online')}>{shellIsolation ? `${shellIsolation.provider}: ${shellIsolation.available ? 'ready' : 'unavailable'}` : 'checking'}</dd></div>
+                        <div><dt>Transport</dt><dd className={cn(connected && 'is-online')}>{connected ? 'WebSocket online' : 'reconnecting'}</dd></div>
+                    </dl>
+                </section>
+
+                <section className="agent-playground-inspector-section agent-playground-task-section">
+                    <div className="agent-playground-inspector-title"><span>任务历史</span><small>{taskRuns.length} runs</small></div>
+                    {taskRuns.length > 0 ? (
+                        <div className="agent-playground-task-list">
+                            {taskRuns.slice(0, 8).map((run) => (
+                                <article key={run.id} className={cn(`is-${run.status}`)}>
+                                    <i />
+                                    <div><strong>{taskStatusLabel(run.status)}</strong><code>{run.turnId.slice(0, 10)}</code></div>
+                                    <dl>
+                                        <div><dt>耗时</dt><dd>{run.durationMs === undefined ? '进行中' : `${run.durationMs.toLocaleString()} ms`}</dd></div>
+                                        <div><dt>工具</dt><dd>{run.toolCount}</dd></div>
+                                        <div><dt>Token</dt><dd>{run.tokenCount.toLocaleString()}</dd></div>
+                                    </dl>
+                                </article>
+                            ))}
+                        </div>
+                    ) : <div className="agent-playground-artifact-empty"><Activity size={18} /><span>运行任务后会在这里形成可回溯记录</span></div>}
+                </section>
+
+                <section className="agent-playground-inspector-section agent-playground-trace-section">
+                    <div className="agent-playground-inspector-title"><span>最近执行</span><small>2s sync</small></div>
+                    {traceLoading && !trace ? (
+                        <div className="agent-playground-trace-loading"><i /><i /><i /></div>
+                    ) : traceNotice && !trace?.events.length ? (
+                        <div className="agent-playground-trace-notice"><CircleAlert size={16} /><span>{traceNotice}</span></div>
+                    ) : recentTraceEvents.length ? (
+                        <div className="agent-playground-trace-list">
+                            {recentTraceEvents.map((event) => {
+                                const item = presentTraceEvent(event)
+                                return (
+                                    <div key={event.sequence} className={cn("agent-playground-trace-item", `is-${item.tone}`)}>
+                                        <span className="agent-playground-trace-dot" />
+                                        <div><strong>{item.title}</strong>{item.detail ? <small>{item.detail}</small> : null}</div>
+                                        <time>{new Date(event.recordedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</time>
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    ) : (
+                        <div className="agent-playground-trace-empty"><Activity size={18} /><span>发送任务后显示推理与工具轨迹</span></div>
+                    )}
+                </section>
+                </div>
+
+                <div className={cn("agent-playground-inspector-view", inspectorView !== 'artifacts' && 'hidden')}>
+                    <section className="agent-playground-inspector-section agent-playground-artifact-section">
+                        <div className="agent-playground-inspector-title"><span>文件与命令产物</span><small>{workbenchArtifacts.length} items</small></div>
+                        {workbenchArtifacts.length > 0 ? (
+                            <div className="agent-playground-artifact-list">
+                                {workbenchArtifacts.map((artifact) => {
+                                    const ArtifactIcon = artifact.kind === 'file-change' ? FileDiff : artifact.kind === 'test' ? FlaskConical : Terminal
+                                    const expanded = expandedArtifact === artifact.id
+                                    return (
+                                        <article key={artifact.id} className={cn(`is-${artifact.status}`, expanded && 'is-expanded')}>
+                                            <button type="button" onClick={() => setExpandedArtifact(expanded ? null : artifact.id)} aria-expanded={expanded}>
+                                                <span className="agent-playground-artifact-icon"><ArtifactIcon size={14} /></span>
+                                                <span><strong>{artifact.title}</strong><small>{artifact.path ?? artifact.detail ?? artifact.kind}</small></span>
+                                                <em>{artifact.status}</em>
+                                                <ChevronDown size={14} />
+                                            </button>
+                                            {expanded && (
+                                                <div className="agent-playground-artifact-detail">
+                                                    {artifact.path && <code>{artifact.path}</code>}
+                                                    {artifact.diff ? <pre>{artifact.diff}</pre> : <pre>{artifact.detail || '暂无输出'}</pre>}
+                                                    <footer><span>{artifact.durationMs === undefined ? '等待结果' : `${artifact.durationMs.toLocaleString()} ms`}</span><code>{artifact.turnId.slice(0, 12)}</code></footer>
+                                                </div>
+                                            )}
+                                        </article>
+                                    )
+                                })}
+                            </div>
+                        ) : <div className="agent-playground-artifact-empty"><FileDiff size={18} /><span>Agent 修改文件、执行命令或测试后，产物会集中出现在这里</span></div>}
+                    </section>
+                </div>
+
+                <a className="agent-playground-studio-link" href={agentStudioPath(sessionKey)}><span><ExternalLink size={15} />在 Agent Studio 中完整诊断</span><code>{sessionKey}</code></a>
+            </aside>
+            {showInspector && <div className="agent-playground-inspector-overlay" onClick={() => setShowInspector(false)} />}
+        </section>
     )
 }
+
+function taskStatusLabel(status: 'running' | 'completed' | 'failed' | 'cancelled'): string {
+    if (status === 'running') return 'Agent 运行中'
+    if (status === 'completed') return '最近任务已完成'
+    if (status === 'failed') return '最近任务失败'
+    return '最近任务已取消'
+}
+
+function messageText(segments: readonly MessageSegment[]): string {
+    return segments.map((segment) => {
+        const data = segment.data as Record<string, unknown>
+        if (segment.type === 'text' || segment.type === 'markdown' || segment.type === 'md') {
+            return String(data.text ?? data.content ?? '')
+        }
+        if (segment.type === 'mention' || segment.type === 'at') return `@${String(data.name ?? data.target ?? '')}`
+        return `[${segment.type}]`
+    }).join(' ').trim()
+}
+
+function formatDuration(durationMs: number): string {
+    if (durationMs < 1_000) return `${durationMs.toLocaleString()} ms`
+    if (durationMs < 60_000) return `${(durationMs / 1_000).toFixed(durationMs < 10_000 ? 1 : 0)} s`
+    return `${Math.floor(durationMs / 60_000)}m ${Math.round((durationMs % 60_000) / 1_000)}s`
+}
+
+function runStepStatusLabel(status: 'running' | 'completed' | 'failed' | 'denied' | 'cancelled'): string {
+    if (status === 'running') return '进行中'
+    if (status === 'completed') return '完成'
+    if (status === 'denied') return '已拒绝'
+    if (status === 'cancelled') return '已取消'
+    return '失败'
+}
+
+function safeFileName(value: string): string {
+    return value.trim().replace(/[^\p{L}\p{N}._-]+/gu, '-').replace(/^-+|-+$/gu, '').slice(0, 48) || 'session'
+}