From 43712ec234fdaec545eb7d4fa6f2b697a1488781 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 23 Sep 2026 16:45:08 +0800
Subject: [PATCH 1/2] feat: change playground

---
 frontend/src/App.tsx        |  37 +------
 frontend/src/Playground.tsx | 209 ++++++++++++++++++++++++++++++++++++
 frontend/src/i18n.tsx       | 138 ++++++++++++++++++++++++
 frontend/src/index.css      |  71 ++++++++++--
 4 files changed, 412 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/Playground.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5a735e9..bea07b2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { Activity, BookOpen, ChartNoAxesColumn, CircleHelp, Copy, KeyRound, Lang
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { apiErrorMessage, useI18n, type Locale, type MessageKey, type Translate } from "./i18n"
+import { Playground, sampleRequest } from "./Playground"
 
 type ApiKey = { id: number; name: string; mask: string; created_at: string; revoked_at: string | null; last_used_at: string | null }
 type Usage = { totals: { requests: number; input_tokens: number; output_tokens: number }; daily: { day: string; requests: number; input_tokens: number; output_tokens: number }[]; sources: { source: string; key_id: number | null; requests: number; input_tokens: number; output_tokens: number }[] }
@@ -115,7 +116,7 @@ function App() {
     </aside>
     <div className="main">
       <header className="topbar"><button className="menu-button" aria-label={t("openNavigation")} onClick={() => setMobileNav(true)}><Menu size={20} /></button><span>{title}</span><div className="topbar-controls"><span className="topbar-note">LAYA SERVER</span><LanguagePicker /></div></header>
-      <main className="content">{page === "home" ? <Home setPage={setPage} /> : page === "keys" ? <Keys csrf={session.csrf_token} /> : page === "usage" ? <UsagePage /> : page === "playground" ? <Playground csrf={session.csrf_token} /> : <Docs />}</main>
+      <main className="content">{page === "home" ? <Home setPage={setPage} /> : page === "keys" ? <Keys csrf={session.csrf_token} /> : page === "usage" ? <UsagePage /> : page === "playground" ? <Playground run={body => api("/internal/playground", { method: "POST", body }, session.csrf_token)} /> : <Docs />}</main>
     </div>
     {mobileNav ? <button className="nav-backdrop" aria-label={t("closeNavigation")} onClick={() => setMobileNav(false)} /> : null}
   </div>
@@ -208,40 +209,6 @@ function UsagePage() {
   </>
 }
 
-const sampleRequest = { state: { message: "I was charged twice and need a refund today." }, questions: { intent: { type: "choice", instructions: "What does the customer want?", criteria: { refund: "money returned", technical_help: "a technical problem" } }, urgent: { type: "noul", instructions: "Does the customer express urgency?" }, frustration: { type: "score", instructions: "How frustrated is the customer?", criteria: ["calm", "concerned", "very angry"] } }, model: "auto" }
-const chineseSampleRequest = { ...sampleRequest, state: { message: "我的账户被重复扣费了，请尽快退款。" }, model: "multilingual" }
-const traditionalSampleRequest = { ...sampleRequest, state: { message: "我的帳戶被重複扣款了，請盡快退款。" }, model: "multilingual" }
-
-function Playground({ csrf }: { csrf: string }) {
-  const { t, locale } = useI18n()
-  const [body, setBody] = useState(JSON.stringify(sampleRequest, null, 2))
-  const [result, setResult] = useState("")
-  const [resultError, setResultError] = useState<unknown>(null)
-  const [busy, setBusy] = useState(false)
-
-  async function submit() {
-    setBusy(true)
-    setResultError(null)
-    try {
-      const data = await api("/internal/playground", { method: "POST", body }, csrf)
-      setResult(JSON.stringify(data, null, 2))
-    } catch (cause) {
-      setResult("")
-      setResultError(cause)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return <>
-    <PageTitle title={t("playground")} description={t("playgroundDescription")} />
-    <div className="playground-grid">
-      <section><div className="section-head"><h2>{t("requestJson")}</h2><div className="sample-actions"><button onClick={() => setBody(JSON.stringify(sampleRequest, null, 2))}>{t("englishExample")}</button><button onClick={() => setBody(JSON.stringify(locale === "zh-TW" ? traditionalSampleRequest : chineseSampleRequest, null, 2))}>{t("chineseExample")}</button></div></div><textarea aria-label={t("requestJson")} value={body} onChange={event => setBody(event.target.value)} spellCheck={false} /><Button onClick={submit} disabled={busy}><Send size={16} /> {busy ? t("runningInference") : t("runInference")}</Button></section>
-      <section><div className="section-head"><h2>{t("response")}</h2></div><pre className="result">{resultError ? displayError(resultError, t) : result || t("noResult")}</pre></section>
-    </div>
-  </>
-}
-
 function Docs() {
   const { t } = useI18n()
   return <>
diff --git a/frontend/src/Playground.tsx b/frontend/src/Playground.tsx
new file mode 100644
index 0000000..66737b6
--- /dev/null
+++ b/frontend/src/Playground.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react"
+import { Code2, ListFilter, Plus, Send, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { apiErrorMessage, useI18n, type MessageKey, type Translate } from "./i18n"
+
+type QuestionType = "noul" | "score" | "choice"
+type Model = "auto" | "english" | "multilingual" | "typed-decisions"
+type Question = {
+  uid: string
+  id: string
+  type: QuestionType
+  instructions: string
+  choices: { label: string; description: string }[]
+  levels: string[]
+}
+type Draft = { state: string; stateMode: "text" | "json"; model: Model; questions: Question[] }
+type Prediction = { answers: Record<string, unknown>; model?: string; routing?: { model?: string }; usage?: { input_tokens?: number; output_tokens?: number } }
+
+export const sampleRequest = {
+  state: { message: "I was charged twice and need a refund today." },
+  questions: {
+    intent: { type: "choice", instructions: "What does the customer want?", criteria: { refund: "money returned", technical_help: "a technical problem" } },
+    urgent: { type: "noul", instructions: "Does the customer express urgency?" },
+    frustration: { type: "score", instructions: "How frustrated is the customer?", criteria: ["calm", "concerned", "very angry"] },
+  },
+  model: "auto",
+}
+const chineseSampleRequest = { ...sampleRequest, state: { message: "我的账户被重复扣费了，请尽快退款。" }, model: "multilingual" }
+const traditionalSampleRequest = { ...sampleRequest, state: { message: "我的帳戶被重複扣款了，請盡快退款。" }, model: "multilingual" }
+const models: Model[] = ["auto", "english", "multilingual", "typed-decisions"]
+
+class DraftError extends Error {
+  constructor(readonly key: MessageKey, readonly values?: Record<string, string | number>) { super(key) }
+}
+
+function makeQuestion(type: QuestionType = "noul"): Question {
+  return { uid: crypto.randomUUID(), id: "", type, instructions: "", choices: [{ label: "", description: "" }, { label: "", description: "" }], levels: ["", ""] }
+}
+
+function parseDraft(value: string): Draft {
+  let request: unknown
+  try { request = JSON.parse(value) } catch { throw new DraftError("playgroundInvalidJson") }
+  if (!request || typeof request !== "object" || Array.isArray(request)) throw new DraftError("playgroundFormUnsupported")
+  const data = request as Record<string, unknown>
+  if (Object.keys(data).some(key => !["state", "questions", "model"].includes(key))) throw new DraftError("playgroundFormUnsupported")
+  if (!(typeof data.state === "string" || (data.state !== null && typeof data.state === "object"))) throw new DraftError("playgroundFormUnsupported")
+  const model = Object.hasOwn(data, "model") ? data.model : "auto"
+  if (!models.includes(model as Model)) throw new DraftError("playgroundFormUnsupported")
+  if (!data.questions || typeof data.questions !== "object" || Array.isArray(data.questions)) throw new DraftError("playgroundFormUnsupported")
+  const questions = Object.entries(data.questions).map(([id, definition]) => {
+    if (!definition || typeof definition !== "object" || Array.isArray(definition)) throw new DraftError("playgroundFormUnsupported")
+    const q = definition as Record<string, unknown>
+    if (typeof q.instructions !== "string" || !["noul", "choice", "score"].includes(String(q.type))) throw new DraftError("playgroundFormUnsupported")
+    if (Object.keys(q).some(key => !["type", "instructions", "criteria"].includes(key))) throw new DraftError("playgroundFormUnsupported")
+    const question = { ...makeQuestion(q.type as QuestionType), id, instructions: q.instructions }
+    if (q.type === "noul") {
+      if (q.criteria !== undefined) throw new DraftError("playgroundFormUnsupported")
+    } else if (q.type === "choice") {
+      if (Array.isArray(q.criteria) && q.criteria.every(item => typeof item === "string")) {
+        question.choices = q.criteria.map(label => ({ label, description: "" }))
+      } else if (q.criteria && typeof q.criteria === "object" && !Array.isArray(q.criteria) && Object.values(q.criteria).every(item => item === null || typeof item === "string")) {
+        question.choices = Object.entries(q.criteria).map(([label, description]) => ({ label, description: description ?? "" }))
+      } else throw new DraftError("playgroundFormUnsupported")
+    } else {
+      if (!Array.isArray(q.criteria) || !q.criteria.every(item => typeof item === "string")) throw new DraftError("playgroundFormUnsupported")
+      question.levels = q.criteria
+    }
+    return question
+  })
+  return { state: typeof data.state === "string" ? data.state : JSON.stringify(data.state, null, 2), stateMode: typeof data.state === "string" ? "text" : "json", model: model as Model, questions }
+}
+
+function buildRequest(draft: Draft): string {
+  let state: unknown = draft.state
+  if (draft.stateMode === "json") {
+    try { state = JSON.parse(draft.state) } catch { throw new DraftError("playgroundInvalidState") }
+    if (state === null || !(typeof state === "string" || typeof state === "object")) throw new DraftError("playgroundInvalidState")
+  }
+  if (typeof state === "string" && !state.trim()) throw new DraftError("playgroundEmptyState")
+  if (!draft.questions.length) throw new DraftError("playgroundNoQuestions")
+  const questions: Record<string, unknown> = Object.create(null)
+  for (const [index, q] of draft.questions.entries()) {
+    const id = q.id.trim()
+    if (!id) throw new DraftError("playgroundMissingId", { number: index + 1 })
+    if (Object.hasOwn(questions, id)) throw new DraftError("playgroundDuplicateId", { id })
+    if (!q.instructions.trim()) throw new DraftError("playgroundMissingInstructions", { id })
+    const definition: Record<string, unknown> = { type: q.type, instructions: q.instructions.trim() }
+    if (q.type === "choice") {
+      if (q.choices.length < 2 || q.choices.some(option => !option.label.trim()) || new Set(q.choices.map(option => option.label.trim())).size !== q.choices.length) throw new DraftError("playgroundInvalidChoice", { id })
+      definition.criteria = Object.fromEntries(q.choices.map(option => [option.label.trim(), option.description.trim()]))
+    }
+    if (q.type === "score") {
+      if (q.levels.length < 2 || q.levels.some(level => !level.trim())) throw new DraftError("playgroundInvalidScore", { id })
+      definition.criteria = q.levels.map(level => level.trim())
+    }
+    questions[id] = definition
+  }
+  return JSON.stringify({ state, questions, model: draft.model }, null, 2)
+}
+
+function errorText(error: unknown, t: Translate): string {
+  if (error instanceof DraftError) return t(error.key, error.values)
+  if (error && typeof error === "object" && "code" in error) return apiErrorMessage(String(error.code), t)
+  return apiErrorMessage(undefined, t)
+}
+
+export function Playground({ run }: { run: (body: string) => Promise<unknown> }) {
+  const { t, locale } = useI18n()
+  const [draft, setDraft] = useState<Draft>(() => parseDraft(JSON.stringify(sampleRequest)))
+  const [editor, setEditor] = useState<"form" | "json">("form")
+  const [raw, setRaw] = useState(JSON.stringify(sampleRequest, null, 2))
+  const [result, setResult] = useState<Prediction | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  function loadExample(example: unknown) {
+    const value = JSON.stringify(example, null, 2)
+    setDraft(parseDraft(value))
+    setRaw(value)
+    setResult(null)
+    setError(null)
+  }
+
+  function selectEditor(next: "form" | "json") {
+    if (next === editor) return
+    try {
+      if (next === "json") setRaw(buildRequest(draft))
+      else setDraft(parseDraft(raw))
+      setEditor(next)
+      setError(null)
+    } catch (cause) { setError(errorText(cause, t)) }
+  }
+
+  function changeDraft(update: (previous: Draft) => Draft) {
+    setDraft(update)
+    setResult(null)
+    setError(null)
+  }
+
+  function selectStateMode(next: Draft["stateMode"]) {
+    if (next === draft.stateMode) return
+    changeDraft(previous => {
+      if (next === "json") return { ...previous, state: JSON.stringify(previous.state), stateMode: next }
+      let state = previous.state
+      try {
+        const parsed: unknown = JSON.parse(state)
+        if (typeof parsed === "string") state = parsed
+      } catch { /* Keep the current text so it can be edited. */ }
+      return { ...previous, state, stateMode: next }
+    })
+  }
+
+  function updateQuestion(uid: string, change: Partial<Question>) {
+    changeDraft(previous => ({ ...previous, questions: previous.questions.map(q => q.uid === uid ? { ...q, ...change } : q) }))
+  }
+
+  async function submit() {
+    setError(null)
+    let body: string
+    try { body = editor === "json" ? raw : buildRequest(draft) }
+    catch (cause) { setError(errorText(cause, t)); setResult(null); return }
+    setBusy(true)
+    try {
+      const response = await run(body)
+      setResult(response as Prediction)
+    } catch (cause) {
+      setResult(null)
+      setError(errorText(cause, t))
+    } finally { setBusy(false) }
+  }
+
+  return <>
+    <div className="page-title"><div><h1>{t("playground")}</h1><p>{t("playgroundDescription")}</p></div></div>
+    <div className="playground-layout">
+      <div className="playground-editor">
+        <div className="playground-toolbar">
+          <div className="playground-tabs" role="group" aria-label={t("playgroundEditorMode")}>
+            <button type="button" className={editor === "form" ? "selected" : ""} aria-pressed={editor === "form"} onClick={() => selectEditor("form")}><ListFilter size={15} />{t("playgroundForm")}</button>
+            <button type="button" className={editor === "json" ? "selected" : ""} aria-pressed={editor === "json"} onClick={() => selectEditor("json")}><Code2 size={15} />JSON</button>
+          </div>
+          <div className="sample-actions"><button type="button" onClick={() => loadExample(sampleRequest)}>{t("englishExample")}</button><button type="button" onClick={() => loadExample(locale === "zh-TW" ? traditionalSampleRequest : chineseSampleRequest)}>{t("chineseExample")}</button></div>
+        </div>
+        {editor === "json" ? <div className="playground-raw"><label htmlFor="playground-request-json">{t("requestJson")}</label><textarea id="playground-request-json" spellCheck={false} value={raw} onChange={event => { setRaw(event.target.value); setResult(null); setError(null) }} /></div> : <>
+          <section className="playground-section">
+            <div className="playground-section-head"><div><h2>{t("playgroundState")}</h2><p>{t("playgroundStateHint")}</p></div><div className="playground-segmented" role="group" aria-label={t("playgroundStateFormat")}><button type="button" className={draft.stateMode === "text" ? "selected" : ""} aria-pressed={draft.stateMode === "text"} onClick={() => selectStateMode("text")}>{t("playgroundText")}</button><button type="button" className={draft.stateMode === "json" ? "selected" : ""} aria-pressed={draft.stateMode === "json"} onClick={() => selectStateMode("json")}>JSON</button></div></div>
+            <textarea className="playground-state" aria-label={t("playgroundState")} spellCheck={false} value={draft.state} onChange={event => changeDraft(previous => ({ ...previous, state: event.target.value }))} placeholder={t("playgroundStatePlaceholder")} />
+          </section>
+          <section className="playground-section">
+            <div className="playground-section-head"><div><h2>{t("playgroundQuestions")}</h2><p>{t("playgroundQuestionsHint")}</p></div><span className="playground-count">{draft.questions.length}/50</span></div>
+            <div className="playground-question-list">{draft.questions.map((q, index) => <div className="playground-question" key={q.uid}>
+              <div className="playground-question-head"><span>{t("playgroundQuestionNumber", { number: index + 1 })}</span><button type="button" className="playground-icon-button" title={t("playgroundRemoveQuestion")} aria-label={t("playgroundRemoveQuestionNamed", { number: index + 1 })} onClick={() => changeDraft(previous => ({ ...previous, questions: previous.questions.filter(item => item.uid !== q.uid) }))}><Trash2 size={16} /></button></div>
+              <div className="playground-fields"><label>{t("playgroundQuestionId")}<Input value={q.id} onChange={event => updateQuestion(q.uid, { id: event.target.value })} placeholder={t("playgroundQuestionIdPlaceholder")} /></label><label>{t("playgroundQuestionType")}<select value={q.type} onChange={event => updateQuestion(q.uid, { type: event.target.value as QuestionType })}><option value="noul">Noul · {t("playgroundNoulHint")}</option><option value="score">Score · {t("playgroundScoreHint")}</option><option value="choice">Choice · {t("playgroundChoiceHint")}</option></select></label></div>
+              <label className="playground-field">{t("playgroundInstructions")}<textarea rows={2} value={q.instructions} onChange={event => updateQuestion(q.uid, { instructions: event.target.value })} placeholder={t("playgroundInstructionsPlaceholder")} /></label>
+              {q.type === "choice" ? <div className="playground-options"><div className="playground-subhead">{t("playgroundChoices")}</div>{q.choices.map((option, optionIndex) => <div className="playground-option-row" key={optionIndex}><Input aria-label={t("playgroundChoiceLabel", { number: optionIndex + 1 })} placeholder={t("playgroundChoiceLabelPlaceholder")} value={option.label} onChange={event => updateQuestion(q.uid, { choices: q.choices.map((item, i) => i === optionIndex ? { ...item, label: event.target.value } : item) })} /><Input aria-label={t("playgroundChoiceDescription", { number: optionIndex + 1 })} placeholder={t("playgroundChoiceDescriptionPlaceholder")} value={option.description} onChange={event => updateQuestion(q.uid, { choices: q.choices.map((item, i) => i === optionIndex ? { ...item, description: event.target.value } : item) })} /><button type="button" className="playground-icon-button" title={t("playgroundRemoveOption")} aria-label={t("playgroundRemoveOptionNamed", { number: optionIndex + 1 })} disabled={q.choices.length <= 2} onClick={() => updateQuestion(q.uid, { choices: q.choices.filter((_, i) => i !== optionIndex) })}><Trash2 size={15} /></button></div>)}<button type="button" className="playground-add-inline" disabled={q.choices.length >= 50} onClick={() => updateQuestion(q.uid, { choices: [...q.choices, { label: "", description: "" }] })}><Plus size={14} />{t("playgroundAddChoice")}</button></div> : null}
+              {q.type === "score" ? <div className="playground-options"><div className="playground-subhead">{t("playgroundScoreLevels")}</div>{q.levels.map((level, levelIndex) => <div className="playground-option-row score" key={levelIndex}><span className="playground-level-index">{levelIndex}</span><Input aria-label={t("playgroundScoreLevel", { number: levelIndex + 1 })} placeholder={t("playgroundScoreLevelPlaceholder")} value={level} onChange={event => updateQuestion(q.uid, { levels: q.levels.map((item, i) => i === levelIndex ? event.target.value : item) })} /><button type="button" className="playground-icon-button" title={t("playgroundRemoveOption")} aria-label={t("playgroundRemoveOptionNamed", { number: levelIndex + 1 })} disabled={q.levels.length <= 2} onClick={() => updateQuestion(q.uid, { levels: q.levels.filter((_, i) => i !== levelIndex) })}><Trash2 size={15} /></button></div>)}<button type="button" className="playground-add-inline" disabled={q.levels.length >= 50} onClick={() => updateQuestion(q.uid, { levels: [...q.levels, ""] })}><Plus size={14} />{t("playgroundAddLevel")}</button></div> : null}
+            </div>)}</div>
+            <button type="button" className="playground-add-question" disabled={draft.questions.length >= 50} onClick={() => changeDraft(previous => ({ ...previous, questions: [...previous.questions, makeQuestion()] }))}><Plus size={16} />{t("playgroundAddQuestion")}</button>
+          </section>
+          <section className="playground-section playground-model"><label htmlFor="playground-model">{t("playgroundModel")}</label><select id="playground-model" value={draft.model} onChange={event => changeDraft(previous => ({ ...previous, model: event.target.value as Model }))}>{models.map(model => <option key={model} value={model}>{model}</option>)}</select><p>{t("playgroundModelHint")}</p></section>
+        </>}
+        <div className="playground-submit">{error ? <p className="form-error" role="alert">{error}</p> : null}<Button type="button" onClick={submit} disabled={busy}><Send size={16} />{busy ? t("runningInference") : t("runInference")}</Button></div>
+      </div>
+      <aside className="playground-output" aria-live="polite"><div className="playground-output-head"><h2>{t("response")}</h2>{result?.routing?.model || result?.model ? <span>{result.routing?.model || result.model}</span> : null}</div>
+        {result ? <><div className="playground-usage"><span>{t("inputTokens")} <strong>{result.usage?.input_tokens ?? 0}</strong></span><span>{t("outputTokens")} <strong>{result.usage?.output_tokens ?? 0}</strong></span></div><div className="playground-answer-list">{Object.entries(result.answers).map(([id, answer]) => <section className="playground-answer" key={id}><h3>{id}</h3><pre>{JSON.stringify(answer, null, 2)}</pre></section>)}</div><details className="playground-full-response"><summary>{t("playgroundFullResponse")}</summary><pre>{JSON.stringify(result, null, 2)}</pre></details></> : <div className="playground-output-empty"><Send size={22} strokeWidth={1.5} /><p>{t("noResult")}</p></div>}
+      </aside>
+    </div>
+  </>
+}
diff --git a/frontend/src/i18n.tsx b/frontend/src/i18n.tsx
index be9a87a..f6c3b5b 100644
--- a/frontend/src/i18n.tsx
+++ b/frontend/src/i18n.tsx
@@ -76,6 +76,52 @@ const zhCN = {
   runningInference: "推理中…",
   runInference: "运行推理",
   noResult: "运行推理后，答案和 token 用量会显示在这里。",
+  playgroundEditorMode: "编辑方式",
+  playgroundForm: "表单",
+  playgroundState: "State",
+  playgroundStateHint: "提供需要判断的文本、对象或对话。",
+  playgroundStateFormat: "State 格式",
+  playgroundText: "文本",
+  playgroundStatePlaceholder: "输入需要模型判断的内容",
+  playgroundQuestions: "Questions",
+  playgroundQuestionsHint: "为同一份 State 添加一个或多个问题。",
+  playgroundQuestionNumber: "问题 {number}",
+  playgroundQuestionId: "问题 ID",
+  playgroundQuestionIdPlaceholder: "例如 churn_risk",
+  playgroundQuestionType: "问题类型",
+  playgroundInstructions: "判断说明",
+  playgroundInstructionsPlaceholder: "例如：这位客户是否可能流失？",
+  playgroundNoulHint: "是或否",
+  playgroundScoreHint: "分级评分",
+  playgroundChoiceHint: "多项选择",
+  playgroundChoices: "选项",
+  playgroundChoiceLabel: "选项 {number} 的标识",
+  playgroundChoiceLabelPlaceholder: "标识",
+  playgroundChoiceDescription: "选项 {number} 的说明",
+  playgroundChoiceDescriptionPlaceholder: "说明（可选）",
+  playgroundScoreLevels: "评分等级（从低到高）",
+  playgroundScoreLevel: "等级 {number}",
+  playgroundScoreLevelPlaceholder: "等级说明",
+  playgroundAddChoice: "添加选项",
+  playgroundAddLevel: "添加等级",
+  playgroundAddQuestion: "添加问题",
+  playgroundRemoveQuestion: "删除问题",
+  playgroundRemoveQuestionNamed: "删除问题 {number}",
+  playgroundRemoveOption: "删除这一项",
+  playgroundRemoveOptionNamed: "删除第 {number} 项",
+  playgroundModel: "模型",
+  playgroundModelHint: "auto 会按内容自动选择英文或多语言模型。",
+  playgroundFullResponse: "查看完整响应 JSON",
+  playgroundInvalidJson: "请求 JSON 无效，请检查格式。",
+  playgroundFormUnsupported: "当前 JSON 含表单无法编辑的字段，请继续在 JSON 模式修改。",
+  playgroundInvalidState: "State 必须是有效的 JSON 字符串、对象或数组。",
+  playgroundEmptyState: "请输入 State 内容。",
+  playgroundNoQuestions: "请至少添加一个问题。",
+  playgroundMissingId: "请填写问题 {number} 的 ID。",
+  playgroundDuplicateId: "问题 ID“{id}”重复。",
+  playgroundMissingInstructions: "请填写问题“{id}”的判断说明。",
+  playgroundInvalidChoice: "问题“{id}”至少需要两个不重复的选项标识。",
+  playgroundInvalidScore: "问题“{id}”至少需要两个填写完整的评分等级。",
   docsDescription: "通过一把有效的 API Key 调用 Laya System One。",
   docsIntro: "在请求头中加入 Authorization: Bearer YOUR_API_KEY，请求体为 JSON。",
   docsResponse: "响应",
@@ -170,6 +216,52 @@ const en: Record<MessageKey, string> = {
   runningInference: "Running…",
   runInference: "Run inference",
   noResult: "Answers and token usage will appear here after you run inference.",
+  playgroundEditorMode: "Editor mode",
+  playgroundForm: "Form",
+  playgroundState: "State",
+  playgroundStateHint: "Enter the text, object, or conversation to evaluate.",
+  playgroundStateFormat: "State format",
+  playgroundText: "Text",
+  playgroundStatePlaceholder: "Enter content for the model to evaluate",
+  playgroundQuestions: "Questions",
+  playgroundQuestionsHint: "Ask one or more questions about the same state.",
+  playgroundQuestionNumber: "Question {number}",
+  playgroundQuestionId: "Question ID",
+  playgroundQuestionIdPlaceholder: "For example, churn_risk",
+  playgroundQuestionType: "Question type",
+  playgroundInstructions: "Instructions",
+  playgroundInstructionsPlaceholder: "For example: Is this customer likely to churn?",
+  playgroundNoulHint: "yes or no",
+  playgroundScoreHint: "graded scale",
+  playgroundChoiceHint: "multiple choice",
+  playgroundChoices: "Choices",
+  playgroundChoiceLabel: "Label for choice {number}",
+  playgroundChoiceLabelPlaceholder: "Label",
+  playgroundChoiceDescription: "Description for choice {number}",
+  playgroundChoiceDescriptionPlaceholder: "Description (optional)",
+  playgroundScoreLevels: "Score levels (low to high)",
+  playgroundScoreLevel: "Level {number}",
+  playgroundScoreLevelPlaceholder: "Level description",
+  playgroundAddChoice: "Add choice",
+  playgroundAddLevel: "Add level",
+  playgroundAddQuestion: "Add question",
+  playgroundRemoveQuestion: "Remove question",
+  playgroundRemoveQuestionNamed: "Remove question {number}",
+  playgroundRemoveOption: "Remove this item",
+  playgroundRemoveOptionNamed: "Remove item {number}",
+  playgroundModel: "Model",
+  playgroundModelHint: "auto selects the English or multilingual model based on the state.",
+  playgroundFullResponse: "View full response JSON",
+  playgroundInvalidJson: "Request JSON is invalid. Check its syntax.",
+  playgroundFormUnsupported: "This JSON contains fields the form cannot edit. Continue in JSON mode.",
+  playgroundInvalidState: "State must be a valid JSON string, object, or array.",
+  playgroundEmptyState: "Enter a state to evaluate.",
+  playgroundNoQuestions: "Add at least one question.",
+  playgroundMissingId: "Enter an ID for question {number}.",
+  playgroundDuplicateId: "Question ID “{id}” is duplicated.",
+  playgroundMissingInstructions: "Enter instructions for question “{id}”.",
+  playgroundInvalidChoice: "Question “{id}” needs at least two distinct choice labels.",
+  playgroundInvalidScore: "Question “{id}” needs at least two filled score levels.",
   docsDescription: "Call Laya System One with a valid API key.",
   docsIntro: "Add Authorization: Bearer YOUR_API_KEY to the request headers and send a JSON body.",
   docsResponse: "Response",
@@ -262,6 +354,52 @@ const zhTW: Record<MessageKey, string> = {
   runningInference: "推論中…",
   runInference: "執行推論",
   noResult: "執行推論後，答案與 token 用量會顯示在這裡。",
+  playgroundEditorMode: "編輯方式",
+  playgroundForm: "表單",
+  playgroundState: "State",
+  playgroundStateHint: "提供需要判斷的文字、物件或對話。",
+  playgroundStateFormat: "State 格式",
+  playgroundText: "文字",
+  playgroundStatePlaceholder: "輸入需要模型判斷的內容",
+  playgroundQuestions: "Questions",
+  playgroundQuestionsHint: "為同一份 State 新增一個或多個問題。",
+  playgroundQuestionNumber: "問題 {number}",
+  playgroundQuestionId: "問題 ID",
+  playgroundQuestionIdPlaceholder: "例如 churn_risk",
+  playgroundQuestionType: "問題類型",
+  playgroundInstructions: "判斷說明",
+  playgroundInstructionsPlaceholder: "例如：這位客戶是否可能流失？",
+  playgroundNoulHint: "是或否",
+  playgroundScoreHint: "分級評分",
+  playgroundChoiceHint: "多項選擇",
+  playgroundChoices: "選項",
+  playgroundChoiceLabel: "選項 {number} 的標識",
+  playgroundChoiceLabelPlaceholder: "標識",
+  playgroundChoiceDescription: "選項 {number} 的說明",
+  playgroundChoiceDescriptionPlaceholder: "說明（可選）",
+  playgroundScoreLevels: "評分等級（從低到高）",
+  playgroundScoreLevel: "等級 {number}",
+  playgroundScoreLevelPlaceholder: "等級說明",
+  playgroundAddChoice: "新增選項",
+  playgroundAddLevel: "新增等級",
+  playgroundAddQuestion: "新增問題",
+  playgroundRemoveQuestion: "刪除問題",
+  playgroundRemoveQuestionNamed: "刪除問題 {number}",
+  playgroundRemoveOption: "刪除這一項",
+  playgroundRemoveOptionNamed: "刪除第 {number} 項",
+  playgroundModel: "模型",
+  playgroundModelHint: "auto 會依內容自動選擇英文或多語言模型。",
+  playgroundFullResponse: "檢視完整回應 JSON",
+  playgroundInvalidJson: "請求 JSON 無效，請檢查格式。",
+  playgroundFormUnsupported: "目前的 JSON 包含表單無法編輯的欄位，請繼續在 JSON 模式修改。",
+  playgroundInvalidState: "State 必須是有效的 JSON 字串、物件或陣列。",
+  playgroundEmptyState: "請輸入 State 內容。",
+  playgroundNoQuestions: "請至少新增一個問題。",
+  playgroundMissingId: "請填寫問題 {number} 的 ID。",
+  playgroundDuplicateId: "問題 ID「{id}」重複。",
+  playgroundMissingInstructions: "請填寫問題「{id}」的判斷說明。",
+  playgroundInvalidChoice: "問題「{id}」至少需要兩個不重複的選項標識。",
+  playgroundInvalidScore: "問題「{id}」至少需要兩個填寫完整的評分等級。",
   docsDescription: "使用有效的 API Key 呼叫 Laya System One。",
   docsIntro: "在請求標頭加入 Authorization: Bearer YOUR_API_KEY，請求本文為 JSON。",
   docsResponse: "回應",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e347dd2..dc7f6c6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -104,17 +104,72 @@ td code, .docs code, .home-intro code { font-size: 12px; background: #f4f5f6; bo
 .bar { width: 17px; background: #6c93e9; border-radius: 3px 3px 0 0; }
 .bar-column span { height: 14px; }
 .chart-empty { align-self: center; width: 100%; text-align: center; color: #9ca3ad; font-size: 13px; }
-.playground-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
-.sample-actions { display: flex; gap: 10px; }
-.sample-actions button { border: 0; background: none; padding: 0; color: #5d7fc2; font-size: 12px; }
-.playground-grid textarea, .result { width: 100%; min-height: 420px; border: 1px solid #e4e7eb; border-radius: 7px; padding: 16px; color: #353b44; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; resize: vertical; }
-.playground-grid button { margin-top: 14px; }
-.playground-grid .sample-actions button { margin-top: 0; }
-.result { white-space: pre-wrap; overflow-wrap: anywhere; background: #fafbfc; margin: 0; }
+.playground-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); align-items: start; border: 1px solid #e7e9ec; border-radius: 8px; overflow: hidden; min-height: 670px; }
+.playground-editor { min-width: 0; }
+.playground-toolbar { min-height: 55px; padding: 9px 18px; border-bottom: 1px solid #eceef0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.playground-tabs, .playground-segmented { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: #f2f3f5; border-radius: 6px; }
+.playground-tabs button, .playground-segmented button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; padding: 6px 9px; background: transparent; color: #747c86; font-size: 12px; }
+.playground-tabs button.selected, .playground-segmented button.selected { background: #fff; color: #303741; box-shadow: 0 1px 3px #1e283115; }
+.sample-actions { display: flex; align-items: center; gap: 12px; }
+.sample-actions button { border: 0; background: none; padding: 4px 0; color: #5179c1; font-size: 12px; }
+.sample-actions button:hover, .playground-add-inline:hover { text-decoration: underline; }
+.playground-section { padding: 22px 24px 26px; border-bottom: 1px solid #eceef0; }
+.playground-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
+.playground-section-head h2, .playground-output-head h2 { margin: 0 0 5px; font-size: 15px; font-weight: 650; }
+.playground-section-head p, .playground-model p { margin: 0; color: #8f96a0; font-size: 12px; line-height: 1.5; }
+.playground-state, .playground-field textarea, .playground-raw textarea { width: 100%; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; color: #303842; padding: 12px 13px; line-height: 1.6; resize: vertical; }
+.playground-state { min-height: 130px; font-size: 13px; }
+.playground-state::placeholder, .playground-field textarea::placeholder, .playground-option-row input::placeholder { color: #a6acb4; }
+.playground-count { color: #a0a6af; font-size: 12px; }
+.playground-question-list { display: grid; gap: 14px; }
+.playground-question { border: 1px solid #e6e9ed; border-radius: 7px; padding: 17px; background: #fff; }
+.playground-question-head { display: flex; justify-content: space-between; align-items: center; color: #59616c; font-size: 12px; font-weight: 600; margin-bottom: 13px; }
+.playground-icon-button { border: 0; background: transparent; color: #9aa1aa; padding: 5px; display: inline-grid; place-items: center; border-radius: 4px; }
+.playground-icon-button:hover { background: #f4f5f6; color: #b64949; }
+.playground-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
+.playground-fields label, .playground-field, .playground-model label, .playground-raw label { display: grid; gap: 7px; color: #59616b; font-size: 12px; font-weight: 550; }
+.playground-fields select, .playground-model select { width: 100%; height: 36px; padding: 0 11px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; color: #3b424c; font-size: 13px; }
+.playground-field { margin-top: 15px; }
+.playground-field textarea { min-height: 64px; font-size: 13px; }
+.playground-options { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f1f3; }
+.playground-subhead { color: #6d7580; font-size: 12px; margin-bottom: 9px; }
+.playground-option-row { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(110px, 1.2fr) 28px; gap: 8px; align-items: center; margin: 7px 0; }
+.playground-option-row.score { grid-template-columns: 20px minmax(0, 1fr) 28px; }
+.playground-option-row input { min-width: 0; }
+.playground-level-index { font-size: 12px; color: #9aa2ab; text-align: center; }
+.playground-add-inline, .playground-add-question { display: inline-flex; align-items: center; gap: 6px; color: #5379bb; background: none; border: 0; font-size: 12px; }
+.playground-add-inline { padding: 8px 0 0; }
+.playground-add-question { width: 100%; justify-content: center; margin-top: 14px; padding: 11px; border: 1px dashed #ced7e5; border-radius: 6px; }
+.playground-add-question:hover { background: #f8faff; border-color: #9ab1d7; }
+.playground-model { display: grid; grid-template-columns: 80px minmax(180px, 240px); align-items: center; gap: 5px 12px; }
+.playground-model label { display: block; }
+.playground-model p { grid-column: 2; }
+.playground-raw { padding: 22px 24px; }
+.playground-raw label { margin-bottom: 9px; }
+.playground-raw textarea { min-height: 520px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.playground-submit { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 17px 24px; }
+.playground-submit .form-error { flex: 1; margin: 0; }
+.playground-output { min-width: 0; min-height: 670px; height: 100%; border-left: 1px solid #e7e9ec; background: #fafbfc; }
+.playground-output-head { min-height: 55px; padding: 17px 22px; border-bottom: 1px solid #eceef0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.playground-output-head h2 { margin: 0; }
+.playground-output-head span { color: #5b77a9; font-size: 12px; }
+.playground-output-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 110px 24px; text-align: center; color: #a6adb7; }
+.playground-output-empty p { max-width: 260px; margin: 0; line-height: 1.6; font-size: 13px; }
+.playground-usage { display: flex; gap: 20px; padding: 16px 22px; border-bottom: 1px solid #eceef0; color: #7c8590; font-size: 12px; }
+.playground-usage strong { margin-left: 5px; color: #343b45; font-weight: 600; }
+.playground-answer-list { padding: 10px 22px; }
+.playground-answer { border-bottom: 1px solid #e9ecf0; padding: 15px 0; }
+.playground-answer h3 { margin: 0 0 9px; font-size: 13px; font-weight: 600; }
+.playground-answer pre, .playground-full-response pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #5a626d; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.playground-full-response { padding: 16px 22px; color: #557ab9; font-size: 12px; }
+.playground-full-response summary { cursor: pointer; }
+.playground-full-response pre { margin-top: 12px; }
 .docs { max-width: 820px; line-height: 1.7; font-size: 14px; color: #606873; }
 .docs h2 { margin: 32px 0 10px; color: #313740; font-size: 17px; }
 .docs pre { padding: 18px; background: #f7f8f9; border: 1px solid #e8ebee; border-radius: 7px; overflow: auto; font-size: 12px; }
 .docs-note { display: flex; align-items: center; gap: 7px; color: #8b929b; }
-@media (max-width: 760px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 11; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); } .mobile-close, .menu-button { display: block; } .mobile-close { margin-left: auto; } .nav-backdrop { position: fixed; inset: 0; background: #0006; border: 0; z-index: 10; } .topbar { padding: 0 18px; } .content { padding: 26px 18px 60px; } .page-title { margin-bottom: 36px; } .playground-grid { grid-template-columns: 1fr; } .home-links { flex-wrap: wrap; } .key-reveal { flex-direction: column; } }
+@media (max-width: 1100px) { .playground-layout { grid-template-columns: 1fr; } .playground-output { min-height: 260px; border-left: 0; border-top: 1px solid #e7e9ec; } }
+@media (max-width: 760px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 11; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); } .mobile-close, .menu-button { display: block; } .mobile-close { margin-left: auto; } .nav-backdrop { position: fixed; inset: 0; background: #0006; border: 0; z-index: 10; } .topbar { padding: 0 18px; } .content { padding: 26px 18px 60px; } .page-title { margin-bottom: 36px; } .home-links { flex-wrap: wrap; } .key-reveal { flex-direction: column; } .playground-section, .playground-raw { padding: 18px; } .playground-submit { padding: 16px 18px; flex-wrap: wrap; } }
+@media (max-width: 520px) { .playground-fields { grid-template-columns: 1fr; } .playground-option-row { grid-template-columns: minmax(0, 1fr) 28px; } .playground-option-row:not(.score) input:nth-child(2) { grid-column: 1; grid-row: 2; } .playground-option-row:not(.score) button { grid-column: 2; grid-row: 1 / 3; } .playground-question { padding: 14px; } .playground-model { grid-template-columns: 1fr; } .playground-model p { grid-column: 1; } }
 @media (max-width: 540px) { .topbar-note { display: none; } }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

From fb8d5314b0cc03c558118ea3a3aac17e618f43ff Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 23 Sep 2026 09:05:33 +0000
Subject: [PATCH 2/2] fix criteria normalization and ci token permissions

Co-authored-by: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
---
 .github/workflows/ci.yml   | 3 +++
 backend/server/schemas.py  | 6 ++++--
 backend/tests/test_flow.py | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2b0b405..bb8e3ed 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,6 +10,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   backend-test:
     name: Backend Tests
diff --git a/backend/server/schemas.py b/backend/server/schemas.py
index e0014a3..f48eaa0 100644
--- a/backend/server/schemas.py
+++ b/backend/server/schemas.py
@@ -28,7 +28,8 @@ class ChoiceQuestion(BaseQuestion):
     @classmethod
     def check_choice(cls, value: dict[str, object] | list[str]) -> dict[str, object] | list[str]:
         labels = list(value)
-        if any(not label.strip() for label in labels) or len(set(labels)) != len(labels):
+        normalized = [label.strip() for label in labels]
+        if any(not label for label in normalized) or len(set(normalized)) != len(normalized):
             raise ValueError("choice labels must be nonempty and unique")
         return value
 
@@ -40,7 +41,8 @@ class ScoreQuestion(BaseQuestion):
     @field_validator("criteria")
     @classmethod
     def check_score(cls, value: list[str]) -> list[str]:
-        if any(not label.strip() for label in value) or len(set(value)) != len(value):
+        normalized = [label.strip() for label in value]
+        if any(not label for label in normalized) or len(set(normalized)) != len(normalized):
             raise ValueError("score criteria labels must be nonempty and unique")
         return value
 
diff --git a/backend/tests/test_flow.py b/backend/tests/test_flow.py
index 5148857..4692abd 100644
--- a/backend/tests/test_flow.py
+++ b/backend/tests/test_flow.py
@@ -229,6 +229,9 @@ def test_question_criteria_validation():
     with pytest.raises(ValidationError, match="score criteria labels must be nonempty and unique"):
         ScoreQuestion(instructions="Rate", type="score", criteria=["low", "   "])
 
+    with pytest.raises(ValidationError, match="score criteria labels must be nonempty and unique"):
+        ScoreQuestion(instructions="Rate", type="score", criteria=["low", " low "])
+
     ChoiceQuestion(instructions="Choose", type="choice", criteria=["option_a", "option_b"])
     ChoiceQuestion(instructions="Choose", type="choice", criteria={"option_a": "desc A", "option_b": "desc B"})
 
@@ -237,4 +240,3 @@ def test_question_criteria_validation():
 
     with pytest.raises(ValidationError, match="choice labels must be nonempty and unique"):
         ChoiceQuestion(instructions="Choose", type="choice", criteria=["opt", "  "])
-