console: 分栏改独立容器，修模块间空白间距

PR #130 的共享网格行是根因：一行高度由该行最高模块决定，
任务列表撑高第 2 行后，对话（第 3 行）只能从任务列表底下开始，
派发/环境等短模块下面空出一大截；align-items:start 只让盒子
不拉伸，拉不上来下一行。

修法：App.tsx 把模块包进三个独立 .dash-col（左：任务+项目，
中：派发+对话，右：环境+Workers+技能+自动化+分诊+管理区+
API Key），栏内 flex 纵向紧贴；中屏两栏（左+中上右下）、宽屏
三栏并排；窄屏用 display:contents + 每模块 order 恢复原单列
顺序。构建产物 316093 字节，sha 与构建输出一致。

cloud/console-react/src/tokens.css

@@ -4,9 +4,11 @@
    no pill shapes, no coloured page backgrounds, no shadows beyond
    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. */
+   2 columns at 900-1399px, 3 columns at 1400px and up — each column
+   is an independent wrapper (.dash-col) whose sections stack tightly
+   on their own; the narrow single column is restored to the original
+   stacked order with display:contents plus an explicit order per
+   section (see the narrow block). */
 :root{
   --text:#1f2328; --muted:#656d76; --subtle:#6e7781;
   --line:#d0d7de; --line-muted:#d8dee4;
@@ -151,45 +153,53 @@ 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}
-/* 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. */
+/* Width-adaptive columns — independent column wrappers, NOT shared
+   grid rows. Why: the previous layout gave every section an explicit
+   grid-column AND grid-row, so one grid row's height was the tallest
+   section in that row. A tall task list in row 2 held the whole row
+   tall, and the conversation (row 3) started far below a short
+   dispatch box — align-items:start only kept each box at its own
+   content height, it never pulled the next row up. That is the
+   blank gap between modules. Now each .dash-col is one grid item
+   whose sections stack in a flex column with a 20px gap, so a module
+   always follows the previous module in its own column, whatever
+   the other columns' heights are. The only blank left is at the
+   bottom of a shorter column, which is normal for column layouts,
+   not a gap between two modules.
+   Medium (900-1399px): left = tasks + projects; right column =
+   middle wrapper (dispatch + conversation) followed by the right
+   wrapper (environments + Workers + skills + automations + triage +
+   admin + API Key), in that order. Wide (>=1400px): left / middle /
+   right wrappers side by side. .dash-cards spans all columns at
+   every grid width. Nothing is duplicated or hidden at any width. */
+.dash-col{display:flex;flex-direction:column;gap:20px;min-width:0}
+.dash-col > *{min-width:0}
 @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}
+  .dash-col-left{grid-column:1;grid-row:2}
+  .dash-col-mid{grid-column:2;grid-row:2}
+  .dash-col-right{grid-column:2;grid-row:3}
 }
 @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}
+  .dash-col-left{grid-column:1;grid-row:2}
+  .dash-col-mid{grid-column:2;grid-row:2}
+  .dash-col-right{grid-column:3;grid-row:2}
 }
 @media (max-width:899px){ /* 899, not 900: narrow is strictly <900px, so 900px exactly already gets the 2-column grid + 3-per-row cards */
+  /* Narrow single column: unwrap the column wrappers so sections
+     stack as direct flex items of .dash-page, in the ORIGINAL order
+     (dispatch first), not in column-group order (tasks first).
+     Browsers without display:contents degrade to grouped stacking,
+     which is still tight — just in a different order. */
+  .dash-col{display:contents}
+  #sec-dispatch{order:1} #sec-tasks{order:2} #sec-conv{order:3}
+  #sec-projects{order:4} #sec-env{order:5} #sec-workers{order:6}
+  #sec-skills{order:7} #sec-automations{order:8} #sec-triage{order:9}
+  #sec-admin{order:10} #sec-key{order:11}
   .dash-cards{grid-template-columns:repeat(2,1fr)}
   .dash-hide-sm{display:none}
   .dash-page{padding:14px}