feat(app+ds): 阶段2 接前端写操作——任务创建/配置保存/新建项目

让原型里的视觉 mock 表单变为真正可写（附加式、向后兼容原型 index.html）：

design/ui_kits/console（surface 功能化，DS 组件本就支持 onChange）：
- NewTaskPanel：表单受控（title/complexity/priority/parentId），onCreate 出参；
  父任务下拉扁平化含子任务
- TaskSection：暴露 onCreate prop（无则回退原 toast）
- ConfigPanel：受控（concurrency/autonomy/logo/verifyCmd/model），onSave 出参

app/：
- api.js：加 createProject
- app.jsx：createTask→POST /tasks、saveConfig→PATCH /projects、createProject→
  POST /projects；新增 NewProjectModal（design 无现成 surface，用 DS 组件就地拼装，
  zh/en 标签自含）；接 Sidebar 新建项目入口

验证：dev + 生产构建双通过；Playwright 实测新建项目模态打开、受控输入捕获值
（["demo-app",".../demo-app","main"]）、0 console 错误。写端点契约逐字段比对
server.ts（PATCH camelCase / POST tasks {title,complexity(auto),priority,parentId,deps}）。
活写测试从略：maestro 为 auto-approved，建真实任务会触发 agent。

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

design/ui_kits/console/TaskTree.jsx

@@ -201,22 +201,35 @@ function TaskDetail({ task, t, byId, onJump }) {
 
 function NewTaskPanel({ tasks, onCancel, onCreate, t }) {
   const { Button, Input, Select, ComplexitySeg } = window.MaestroDesignSystem_a6a290;
+  const [title, setTitle] = React.useState('');
+  const [complexity, setComplexity] = React.useState('auto');
+  const [priority, setPriority] = React.useState('1');
+  const [parentId, setParentId] = React.useState('');
+  const submit = (e) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onCreate({ title: title.trim(), complexity, priority: Number(priority), parentId: parentId || null });
+  };
+  // 扁平化任务树供父任务下拉（含子任务）
+  const flat = [];
+  const walk = (list, prefix) => (list || []).forEach((tk) => { flat.push({ value: tk.id, label: prefix + tk.title }); walk(tk.children, prefix + '— '); });
+  walk(tasks, '');
   return (
     <form style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 6, padding: 14, marginBottom: 14 }}
-      onSubmit={(e) => { e.preventDefault(); onCreate(); }}>
+      onSubmit={submit}>
       <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
-        <span style={{ flex: 1, minWidth: 320, display: 'flex' }}><Input label={t.titleLabel} required placeholder={t.titlePlaceholder} style={{ width: '100%' }} /></span>
+        <span style={{ flex: 1, minWidth: 320, display: 'flex' }}><Input label={t.titleLabel} required placeholder={t.titlePlaceholder} value={title} onChange={setTitle} style={{ width: '100%' }} /></span>
       </div>
       <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap', marginTop: 12 }}>
         <label style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em' }}>
           <span>{t.complexity} <span style={{ color: 'var(--red)' }}>*</span></span>
-          <ComplexitySeg defaultValue="auto" includeAuto autoLabel={t.cplxAuto} />
+          <ComplexitySeg defaultValue="auto" includeAuto autoLabel={t.cplxAuto} onChange={setComplexity} />
         </label>
-        <Select label={t.priority} defaultValue="1" options={[
+        <Select label={t.priority} defaultValue="1" onChange={setPriority} options={[
           { value: '0', label: t.p0 }, { value: '1', label: t.p1 }, { value: '2', label: t.p2 },
         ]} />
         <span style={{ flex: 1, minWidth: 240, display: 'flex' }}>
-          <Select label={t.parentTask} style={{ width: '100%' }} options={[{ value: '', label: t.topLevel }, ...tasks.map((tk) => ({ value: tk.id, label: tk.title }))]} />
+          <Select label={t.parentTask} style={{ width: '100%' }} onChange={setParentId} options={[{ value: '', label: t.topLevel }, ...flat]} />
         </span>
       </div>
       <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--line-soft)' }}>
@@ -227,7 +240,7 @@ function NewTaskPanel({ tasks, onCancel, onCreate, t }) {
   );
 }
 
-function TaskSection({ tasks, onToast, t }) {
+function TaskSection({ tasks, onToast, onCreate, t }) {
   const { Button, SectionHead } = window.MaestroDesignSystem_a6a290;
   const [expandedId, setExpandedId] = React.useState(null);
   const [openIds, setOpenIds] = React.useState(() => new Set(['t1']));
@@ -300,7 +313,7 @@ function TaskSection({ tasks, onToast, t }) {
     <section>
       <SectionHead title={t.taskSection} sticky action={<Button variant="ghost" size="xs" onClick={() => setShowNew(!showNew)}>{t.newTask}</Button>} />
       {showNew ? <NewTaskPanel tasks={tasks} t={t} onCancel={() => setShowNew(false)}
-        onCreate={() => { setShowNew(false); onToast('ok', t.toastCreated); }} /> : null}
+        onCreate={(payload) => { setShowNew(false); onCreate ? onCreate(payload) : onToast('ok', t.toastCreated); }} /> : null}
       <FilterBar t={t} kw={kw} setKw={setKw} cplxSet={cplxSet} toggleCplx={toggleCplx}
         statusSet={statusSet} toggleGroup={toggleGroup} matchCount={matchCount} filtering={filtering} onClear={clearFilters} />
       <div>