console: 按宽度自适应分栏（一栏/两栏/三栏）

GitHub 风格不变，仅 tokens.css 改布局：窄屏 <900px 一栏
（按原 DOM 顺序堆叠），中屏 900–1399px 两栏（左：任务列表
+ 项目，右：派发 + 对话 + 详情 + 环境 + Workers + 技能 +
自动化 + 分诊 + 管理区 + API Key），宽屏 >=1400px 三栏
（左 310px：任务列表 + 项目，中弹性：派发 + 对话 + 详情，
右 330px：环境 + Workers + 技能 + 自动化 + 分诊 + 管理区
+ API Key），盒子按内容高度不拉伸，页面最大宽 1560px，
窄屏断点修正为 899px 避免与 900px 重叠。console 标记单测
本地 53 项通过。

cloud/console-react/src/tokens.css

@@ -2,9 +2,11 @@
    This supersedes the Muse web/desktop palette: Primer canvas,
    borders, foregrounds and accents only. No grey/blue chat bubbles,
    no pill shapes, no coloured page backgrounds, no shadows beyond
-   GitHub's hairline button shadow. Layout is unchanged (one
-   scrollable console page: dark header + data cards + stacked
-   sections); only the visual system moved to Primer. */
+   GitHub's hairline button shadow. Layout is width-adaptive (see the
+   "Width-adaptive columns" block below): 1 column under 900px,
+   2 columns at 900-1399px, 3 columns at 1400px and up — CSS grid
+   placement per section id only, DOM order untouched, so the narrow
+   single-column order is the original stacked order. */
 :root{
   --text:#1f2328; --muted:#656d76; --subtle:#6e7781;
   --line:#d0d7de; --line-muted:#d8dee4;
@@ -53,6 +55,8 @@ button.danger:hover{background:var(--danger-bg);color:var(--danger)}
 .dash-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius)}
 .dash-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
 .dash-page{max-width:1180px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:20px}
+.dash-page > *{min-width:0} /* grid/flex children must shrink, never push the page wider; long lines scroll inside pre/.trace-box/.table-wrap instead */
+.dash-section > *{min-width:0}
 .dash-section{scroll-margin-top:130px;display:flex;flex-direction:column;gap:16px}
 .dash-section.card{padding:16px}
 .dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@@ -147,7 +151,45 @@ pre{background:var(--inset-bg);color:var(--text);border:1px solid var(--line);bo
 .gh-comment-box textarea:focus{box-shadow:none}
 .gh-comment-footer{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--line);background:var(--subtle-bg)}
 .conv-divider{border-top:1px solid var(--line);margin:4px 0}
-@media (max-width:900px){
+/* Width-adaptive columns — CSS grid placement only, no DOM change,
+   no duplicated sections, nothing hidden at any width.
+   Narrow (<900px): .dash-page stays the base flex column, so sections
+   stack in DOM order (dispatch, tasks, conversation, projects,
+   environments, Workers, skills, automations, triage, admin, API key).
+   Medium (900-1399px): left = tasks + projects; right = everything
+   else, in DOM order down the right column. Wide (>=1400px): left =
+   tasks + projects; middle (flexible) = dispatch + conversation;
+   right = environments + Workers + skills + automations + triage +
+   admin + API Key. Each section gets an explicit grid-column AND
+   grid-row per breakpoint (not auto-placement), so the stacking is
+   deterministic and each column's sections stay in DOM order;
+   align-items:start keeps every box only as tall as its content
+   instead of stretching to its row. .dash-cards spans all columns
+   at every grid width. */
+@media (min-width:900px) and (max-width:1399px){
+  .dash-page{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
+  .dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
+  .dash-section{min-width:0}
+  #sec-tasks{grid-column:1;grid-row:2} #sec-projects{grid-column:1;grid-row:3}
+  #sec-dispatch{grid-column:2;grid-row:2} #sec-conv{grid-column:2;grid-row:3}
+  #sec-env{grid-column:2;grid-row:4} #sec-workers{grid-column:2;grid-row:5}
+  #sec-skills{grid-column:2;grid-row:6} #sec-automations{grid-column:2;grid-row:7}
+  #sec-triage{grid-column:2;grid-row:8} #sec-admin{grid-column:2;grid-row:9}
+  #sec-key{grid-column:2;grid-row:10}
+}
+@media (min-width:1400px){
+  .dash-page{max-width:1560px;display:grid;grid-template-columns:310px minmax(0,1fr) 330px;align-items:start}
+  .dash-page > .dash-cards{grid-column:1 / -1;grid-row:1}
+  .dash-cards{grid-template-columns:repeat(6,1fr)}
+  .dash-section{min-width:0}
+  #sec-tasks{grid-column:1;grid-row:2} #sec-projects{grid-column:1;grid-row:3}
+  #sec-dispatch{grid-column:2;grid-row:2} #sec-conv{grid-column:2;grid-row:3}
+  #sec-env{grid-column:3;grid-row:2} #sec-workers{grid-column:3;grid-row:3}
+  #sec-skills{grid-column:3;grid-row:4} #sec-automations{grid-column:3;grid-row:5}
+  #sec-triage{grid-column:3;grid-row:6} #sec-admin{grid-column:3;grid-row:7}
+  #sec-key{grid-column:3;grid-row:8}
+}
+@media (max-width:899px){ /* 899, not 900: narrow is strictly <900px, so 900px exactly already gets the 2-column grid + 3-per-row cards */
   .dash-cards{grid-template-columns:repeat(2,1fr)}
   .dash-hide-sm{display:none}
   .dash-page{padding:14px}