dsh-contextos-devops 0.0.0-stage → 1.48.32

package/src/client/parts/10-ui.js

@@ -0,0 +1,188 @@
+    // 统一品牌标识（科技风）：devops = 六边集群，copilot = 神经 C 核心
+    function CtxMark({ variant = 'devops', size = 22 }) {
+      if (variant === 'copilot') {
+        return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': true },
+          h('path', { d: 'M17.2 7.1a6.5 6.5 0 1 0 0 9.8', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round' }),
+          h('circle', { cx: 11.2, cy: 12, r: 1.7, fill: 'currentColor' }),
+          h('path', { d: 'M17.6 5.4 21 2.4', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' }),
+          h('path', { d: 'M19.4 9.2h2.9', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' }),
+          h('path', { d: 'M18.9 15.1l2.2 2.2', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' }));
+      }
+      const pts = [[12, 2.8], [19.9, 7.4], [19.9, 16.6], [12, 21.2], [4.1, 16.6], [4.1, 7.4]];
+      return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': true },
+        h('path', { d: 'M12 2.8 19.9 7.4v9.2L12 21.2 4.1 16.6V7.4Z', stroke: 'currentColor', strokeWidth: 1.5, strokeLinejoin: 'round' }),
+        h('path', { d: 'M12 6.9 16.4 9.5v4.9L12 17 7.6 14.4V9.5Z', stroke: 'currentColor', strokeWidth: 1.1, opacity: '.55', strokeLinejoin: 'round' }),
+        h('circle', { cx: 12, cy: 12, r: 1.7, fill: 'currentColor' }),
+        ...pts.map(([x, y], i) => h('circle', { key: i, cx: x, cy: y, r: i % 2 ? 1 : 1.2, fill: 'currentColor' })));
+    }
+
+    function Ico({ name, size = 12 }) {
+      const d = {
+        target: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z M12 11.2a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6Z',
+        plan: 'M4 6h3v3H4z M10 7.5h10 M4 15h3v3H4z M10 16.5h10',
+        task: 'M4 6h6 M4 12h6 M4 18h6 M13 7l2 2 4-4 M13 15l2 2 4-4',
+        report: 'M6 3h8l4 4v14H6z M14 3v4h4 M9 12h6 M9 16h4',
+        feedback: 'M4 5h16v10H9l-5 4z M8 9h8 M8 12h5',
+        clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z M12 7v5l3 2',
+        map: 'M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z M9 4v14 M15 6v14',
+      }[name];
+      return h('span', { className: `cx-ico cx-ico-${name || 'dot'}` },
+        h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', style: { display: 'block' } }, h('path', { d: d || '' })));
+    }
+
+    function Icon({ size = 15 }) {
+      return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': true },
+        h('path', { d: 'M12 2 3 7v10l9 5 9-5V7l-9-5Z', stroke: 'currentColor', strokeWidth: 1.5 }),
+        h('path', { d: 'M12 12 3 7M12 12l9-5M12 12v10', stroke: 'currentColor', strokeWidth: 1.1, opacity: .7 }),
+        h('circle', { cx: 12, cy: 12, r: 1.7, fill: 'currentColor' }));
+    }
+
+    function Panel({ index, icon, title, count, tools, children }) {
+      const [zh, en] = String(title || '').split(' / ');
+      return h('section', { className: 'cx-panel' },
+        h('div', { className: 'cx-ph' }, h(UiAffordance, { icon, zh, en, mode: 'full', iconSize: 18, className: 'cx-panel-title' }), h('span', { className: 'cnt' }, count || '')),
+        tools ? h('div', { className: 'cx-tools' }, tools) : null,
+        h('div', { className: 'cx-list' }, children));
+    }
+
+    // ==== UI KIT：全局通用组件。新界面只允许组合这里的组件 + cx-* token，禁止再手写 cx-empty/cx-err。 ====
+    const TOKENS = { space: [4, 8, 12, 16, 24], radius: [6, 8, 12], font: [10, 11, 12, 13, 15] };
+    function Btn({ kind = 'default', size = 'md', icon, children, ...rest }) {
+      const cls = `cx-btn${kind !== 'default' ? ` cx-${kind}` : ''}${size === 'sm' ? ' cx-sm' : ''}`;
+      return h('button', { type: 'button', className: cls, ...rest }, icon ? h(Ico, { name: icon }) : null, children);
+    }
+    function Toolbar({ children, className = '' }) { return h('div', { className: `cx-tools ${className}`.trim() }, children); }
+    function Section({ title, tools, children }) { return h('div', { className: 'cx-section' }, title ? h('div', { className: 'cx-section-h' }, title) : null, tools ? h(Toolbar, null, tools) : null, children); }
+    function Field({ label, children }) { return h('label', { className: 'cx-field' }, h('span', null, label), children); }
+    function EmptyState({ text, style }) { return h('div', { className: 'cx-empty', style }, text); }
+    function ErrorBox({ text }) { return h('div', { className: 'cx-err' }, text); }
+    function Hint({ text, className = '' }) { return h('div', { className: `cx-hint ${className}`.trim() }, text); }
+    function Card({ title, children, ...rest }) { return h('div', { className: 'cx-card', ...rest }, title ? h('div', { className: 'cx-card-head' }, title) : null, children); }
+    function Tabs({ items, value, onChange }) { return h('div', { className: 'cx-tabs' }, items.map((it) => h('button', { key: it.value, type: 'button', className: `cx-tab${value === it.value ? ' on' : ''}`, onClick: () => onChange(it.value) }, it.label))); }
+
+    const UID_RE = /^[0-9a-f]{32}$/i;
+    const UID_ALIASES = { targetUID: 'target_uid', targetId: 'target_uid', target_uid: 'target_uid', planUID: 'plan_uid', planId: 'plan_uid', plan_uid: 'plan_uid', taskUID: 'task_uid', taskId: 'task_uid', task_uid: 'task_uid', reportUID: 'report_uid', reportId: 'report_uid', report_uid: 'report_uid', feedbackUID: 'feedback_uid', feedbackId: 'feedback_uid', feedback_uid: 'feedback_uid' };
+    function uidFieldMap(input = {}) {
+      const out = {};
+      for (const [key, value] of Object.entries(input || {})) {
+        const canonical = UID_ALIASES[key];
+        if (canonical && value && UID_RE.test(String(value))) out[canonical] = String(value);
+      }
+      return out;
+    }
+
+    const UI_ICONS = {
+      monitor: ['M2.2 3.2h11.6v7.2H2.2z', 'M5.4 13.2h5.2', 'M8 10.4v2.8'],
+      chevronRight: ['M6 4l4 4-4 4'],
+      chevronDown: ['M4 6l4 4 4-4'],
+      refresh: ['M13.5 8a5.5 5.5 0 1 1-1.7-3.9', 'M13.5 2.8v3.4h-3.4'],
+      plus: ['M8 3v10', 'M3 8h10'],
+      more: ['M3.5 8h.01', 'M8 8h.01', 'M12.5 8h.01'],
+      close: ['M4 4l8 8', 'M12 4l-8 8'],
+      chat: ['M3 4.5h10v6H8l-3 2v-2H3z'],
+      manage: ['M3 4h10', 'M3 8h10', 'M3 12h10', 'M6 2.8v2.4', 'M10 6.8v2.4', 'M7 10.8v2.4'],
+      dev: ['M6 4L3 8l3 4', 'M10 4l3 4-3 4'],
+      chevronUp: ['M4 10l4-4 4 4'],
+      arrowLeft: ['M13 8H3', 'M7 4L3 8l4 4'],
+      arrowRight: ['M3 8h10', 'M9 4l4 4-4 4'],
+      fullscreen: ['M6 3H3v3', 'M10 3h3v3', 'M6 13H3v-3', 'M10 13h3v-3'],
+      restore: ['M3 6h3V3', 'M13 6h-3V3', 'M3 10h3v3', 'M13 10h-3v3'],
+      panelLeft: ['M3 3h10v10H3z', 'M6 3v10'],
+      panelRight: ['M3 3h10v10H3z', 'M10 3v10'],
+      panelBottom: ['M3 3h10v10H3z', 'M3 10h10'],
+      save: ['M8 3v7', 'M5 7l3 3 3-3', 'M3 13h10'],
+      copy: ['M6 5h7v8H6z', 'M3 3h7v2', 'M3 3v8h2'],
+      check: ['M3 8l3 3 7-7'],
+      send: ['M8 13V3', 'M4 7l4-4 4 4'],
+      bolt: ['M8 2L4 9h3l-1 5 4-7H7z'],
+      external: ['M9 3h4v4', 'M13 3L7 9', 'M5 3H3v10h10v-2'],
+      minus: ['M3 8h10'],
+      locate: ['M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z', 'M8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z', 'M8 1v2', 'M8 13v2', 'M1 8h2', 'M13 8h2'],
+      server: ['M3 3h10v4H3z', 'M3 9h10v4H3z', 'M5 5h.01', 'M5 11h.01'],
+      space: ['M3 5h4l1 2h5v6H3z'],
+      app: ['M3 3h4v4H3z', 'M9 3h4v4H9z', 'M3 9h4v4H3z', 'M9 9h4v4H9z'],
+      web: ['M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2z', 'M2 8h12', 'M8 2c2 2 2 10 0 12', 'M8 2c-2 2-2 10 0 12'],
+      avatar: ['M8 3a2.2 2.2 0 1 0 0 4.4A2.2 2.2 0 0 0 8 3z', 'M3.5 13c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4'],
+      image: ['M3 4h10v8H3z', 'M5 9l2-2 2 2 2-2 2 2', 'M5 6.5h.01'],
+      factory: ['M3 13V7l3 2V7l3 2V5h3v8z', 'M5 13v-2h2v2', 'M9 13v-2h2v2'],
+      layers: ['M8 2l5 3-5 3-5-3z', 'M3 8l5 3 5-3', 'M3 11l5 3 5-3'],
+      home: ['M3 7l5-4 5 4v6H3z', 'M6.5 13V9h3v4'],
+      pulse: ['M2 8.5h3l1.8-4.2 2.4 8 1.8-4.6h2.4'],
+      lock: ['M4.6 7.2V5.4a3.4 3.4 0 0 1 6.8 0v1.8', 'M3.4 7.2h9.2v6.2H3.4z', 'M8 9.6v1.8'],
+      setting: ['M8 5.6a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8', 'M8 1.6v1.8', 'M8 12.6v1.8', 'M1.6 8h1.8', 'M12.6 8h1.8'],
+      terminal: ['M3 4h10v8H3z', 'M5.5 7l2 2-2 2', 'M9 11h2'],
+      stop: ['M4.5 4.5h7v7h-7z'],
+      trash: ['M4 5h8', 'M6.2 5V3.2h3.6V5', 'M5.2 5l.5 8h4.6l.5-8'],
+    };
+    function UiIcon({ name, size = 16 }) {
+      const paths = UI_ICONS[name] || UI_ICONS.chevronRight;
+      return h('svg', { viewBox: '0 0 16 16', width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': 'true', focusable: 'false' },
+        paths.map((d, i) => h('path', { key: i, d })));
+    }
+    function IconButton({ name, title, onClick, className = '', size = 16, disabled = false, ...rest }) {
+      return h(UiAffordance, { as: 'button', icon: name, iconSize: size, mode: 'icon', className: `cx-icon ${className}`.trim(), title, disabled, onClick, ...rest });
+    }
+    function EntityTitle({ image, icon = 'app', type, title, status, statusTone = '', meta, after, onClick, active = false, className = '', children }) {
+      const cls = `cx-entity${active ? ' on' : ''}${className ? ' ' + className : ''}`;
+      return h('div', { className: cls, onClick, role: onClick ? 'button' : null },
+        h('div', { className: 'cx-entity-pic' }, image
+          ? h('img', { src: image, alt: title || '', loading: 'lazy', onError: (e) => { e.currentTarget.style.display = 'none'; } })
+          : (React.isValidElement(icon) ? h('span', { className: 'cx-entity-ico' }, icon) : h(UiIcon, { name: icon, size: 28 }))),
+        h('div', { className: 'cx-entity-copy' },
+          h('div', { className: 'cx-entity-head' },
+            type ? h('span', { className: 'cx-entity-type' }, type) : null,
+            h('span', { className: 'cx-entity-name', title: title || '' }, title || ''),
+            after ? h('span', { className: 'cx-entity-time' }, after) : null,
+            status ? h('span', { className: `cx-entity-status ${statusTone}` }, status) : null),
+          h('div', { className: 'cx-entity-meta', title: typeof meta === 'string' ? meta : '' }, meta || ''),
+          children || null));
+    }
+    function UiAffordance({ icon, zh, en, mode = 'full', active = false, onClick, className = '', title, disabled = false, children, as = 'span', iconSize = 14, ...rest }) {
+      const content = [
+        icon ? h(UiIcon, { name: icon, size: iconSize }) : null,
+        zh ? h('span', { className: 'cx-aff-zh' }, zh) : null,
+        en ? h('span', { className: 'cx-aff-en' }, en) : null,
+        children || null,
+      ];
+      const cls = `cx-aff cx-aff--${mode}${active ? ' on' : ''}${onClick ? ' action' : ''}${className ? ' ' + className : ''}`;
+      if (onClick || as === 'button') return h('button', { type: 'button', className: cls, title, disabled, onClick, ...rest }, ...content);
+      return h('span', { className: cls, title, ...rest }, ...content);
+    }
+    function StandardSpaces({ value, onChange }) {
+      const selected = new Set(value || []);
+      const toggle = (key) => {
+        if (key === 'community' || key === 'enterprise') return;
+        const next = new Set(selected);
+        next.has(key) ? next.delete(key) : next.add(key);
+        onChange([...next]);
+      };
+      return h('div', { className: 'cx-space-picker' }, OFFICIAL.map(([key, name, en]) => {
+        const forced = key === 'community' || key === 'enterprise';
+        const on = forced || selected.has(key);
+        return h('label', { key, className: `cx-space-check${on ? ' on' : ''}${forced ? ' forced' : ''}` },
+          h('input', { type: 'checkbox', checked: on, disabled: forced, onChange: () => toggle(key) }),
+          h('span', { className: 'cx-space-ico', dangerouslySetInnerHTML: spaceIconHtml(name, 14) }),
+          h('span', { className: 'cx-space-name' }, T(name)),
+          h('em', { className: 'cx-space-en' }, en || ''),
+          forced ? h('i', null, T('默认')) : null);
+      }));
+    }
+    function KeyValueTable({ rows, className = '' }) {
+      return h('table', { className: `cx-console-table cx-detail-head-table ${className}`.trim() },
+        h('thead', null, h('tr', null, h('th', null, 'KEY'), h('th', null, 'VALUE'))),
+        h('tbody', null, (rows || []).map(([k, v], i) => h('tr', { key: i }, h('td', null, String(k)), h('td', null, React.isValidElement(v) ? v : String(v ?? ''))))));
+    }
+    function DataTable({ cols, rows }) {
+      return h('div', { className: 'cx-console-detail-table' },
+        h('table', { className: 'cx-console-table' },
+          h('thead', null, h('tr', null, (cols || []).map((c) => h('th', { key: c.k }, c.label)))),
+          h('tbody', null, (rows || []).map((row, i) => h('tr', { key: i }, (cols || []).map((c) => h('td', { key: c.k }, String(row[c.k] ?? ''))))))));
+    }
+    function DetailTabs({ items, value, onChange, onClose }) {
+      return h('div', { className: 'cx-detail-tabs', style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 6 } },
+        (items || []).map((it) => h('button', { key: it.value, type: 'button', className: `cx-console-tab${value === it.value ? ' on' : ''}`, style: { display: 'inline-flex', width: 'auto', whiteSpace: 'nowrap', flex: '0 0 auto' }, onClick: () => onChange(it.value) }, it.label)),
+        onClose ? h(IconButton, { name: 'close', className: 'cx-detail-close', onClick: onClose, title: T('关闭') }) : null);
+    }
+
+
+    // 开发模式：VSCode 风格 IDE 的骨架（编辑器、终端、预览后续接入）

package/src/client/parts/12-debug.js

@@ -0,0 +1,361 @@
+  const debugResponseTable = (row) => {
+    let payload = row?.response;
+    if (typeof payload === 'string') { try { payload = JSON.parse(payload); } catch { payload = null; } }
+    const env = payload?.data !== undefined ? payload.data : payload;
+    if (!env) return null;
+    if (env.columns && Array.isArray(env.rows)) return { cols: env.columns.map((k) => ({ k, label: k })), rows: env.rows.map((v, i) => ({ ...v, _i: i + 1 })) };
+    if (Array.isArray(env.append)) {
+      const height = env[env.append[0]]?.length || 0;
+      const rows = Array.from({ length: height }, (_, i) => Object.fromEntries(env.append.map((k) => [k, env[k]?.[i] ?? ''])));
+      return { cols: env.append.map((k) => ({ k, label: k })), rows };
+    }
+    if (Array.isArray(env)) {
+      const keys = [...new Set(env.flatMap((x) => x && typeof x === 'object' ? Object.keys(x) : []))].slice(0, 8);
+      return { cols: keys.map((k) => ({ k, label: k })), rows: env.map((x, i) => x && typeof x === 'object' ? { ...x, _i: i + 1 } : { value: String(x), _i: i + 1 }) };
+    }
+    const result = env && typeof env === 'object' ? env.result : null;
+    if (result && typeof result === 'object') {
+      if (Array.isArray(result)) {
+        const keys = [...new Set(result.flatMap((x) => x && typeof x === 'object' ? Object.keys(x) : []))].slice(0, 8);
+        return { cols: keys.map((k) => ({ k, label: k })), rows: result.map((x) => x && typeof x === 'object' ? x : { value: String(x) }) };
+      }
+      const keys = Object.keys(result).slice(0, 12);
+      return { cols: keys.map((k) => ({ k, label: k })), rows: [result] };
+    }
+    if (env && typeof env === 'object') {
+      const lists = Object.entries(env).filter(([, v]) => Array.isArray(v) && v.length && v[0] && typeof v[0] === 'object');
+      if (lists.length) {
+        const rows = [];
+        for (const [kind, list] of lists) for (const item of list) rows.push({ kind, ...item });
+        const keys = [...new Set(rows.flatMap((x) => Object.keys(x)).filter((k) => k !== 'kind'))].slice(0, 8);
+        return { cols: [{ k: 'kind', label: 'kind' }, ...keys.map((k) => ({ k, label: k }))], rows };
+      }
+      return { cols: [{ k: 'key', label: 'KEY' }, { k: 'value', label: 'VALUE' }], rows: Object.entries(env).map(([key, value]) => ({ key, value: typeof value === 'object' ? JSON.stringify(value).slice(0, 220) : String(value) })) };
+    }
+    return { cols: [{ k: 'value', label: 'VALUE' }], rows: [{ value: String(env) }] };
+  };
+  const debugMetaFields = (row) => {
+    let env = row?.response;
+    if (typeof env === 'string') { try { env = JSON.parse(env); } catch { env = null; } }
+    if (env?.data !== undefined && env.data && typeof env.data === 'object') env = env.data;
+    if (!env || typeof env !== 'object') return [];
+    const out = [];
+    for (const key of ['detail', 'option', 'append', 'result']) {
+      if (env[key] === undefined) continue;
+      const value = env[key];
+      out.push([key.toUpperCase(), Array.isArray(value) ? value.join(' · ') : (typeof value === 'object' ? JSON.stringify(value).slice(0, 260) : String(value))]);
+    }
+    return out;
+  };
+  const debugActionOf = (url) => {
+    const text = String(url || '');
+    const runMarker = text.lastIndexOf('/action/run/');
+    const base = runMarker >= 0 ? text.slice(runMarker + 12) : text;
+    const marker = base.lastIndexOf('/action/');
+    if (marker >= 0) {
+      const tail = base.slice(marker + 8).split('?')[0];
+      const parts = tail.split('/').filter(Boolean);
+      return parts[0] || 'list';
+    }
+    return 'list';
+  };
+  const debugCmdOf = (url) => {
+    const text = String(url || '');
+    const runMarker = text.lastIndexOf('/action/run/');
+    let command = '';
+    if (runMarker >= 0) command = text.slice(runMarker + 12).split(/[?/]/)[0];
+    else {
+      const m = text.match(/\/c\/([^/?]+)/);
+      command = m ? m[1] : '';
+    }
+    const parts = command.split('.').filter(Boolean);
+    return parts[parts.length - 1] || '—';
+  };
+  const traceDebugRow = (row) => {
+    const text = JSON.stringify(row?.response ?? row?.raw ?? '') + ' ' + String(row?.url || '');
+    const uids = [...new Set(Array.from(text.matchAll(/"uid"\s*:\s*"([0-9a-f]{32})"/gi)).map((m) => m[1]))].slice(0, 40);
+    try { window.dispatchEvent(new CustomEvent('cx-trace', { detail: { logId: row?.logId || '', uids } })); } catch {}
+  };
+    const debugParamsOf = (row) => {
+      let env = row?.response;
+      if (typeof env === 'string') { try { env = JSON.parse(env); } catch { env = null; } }
+      const out = [];
+      try {
+        const u = new URL(String(row?.url || ''));
+        for (const [k, v] of u.searchParams.entries()) if (!out.some((x) => x[0] === k)) out.push([k, v]);
+      } catch {}
+      if (env && typeof env === 'object') {
+        const keys = Array.isArray(env.option) ? env.option : [];
+        for (const k of keys) out.push([k, Array.isArray(env[k]) ? env[k].join(' · ') : (env[k] == null ? '' : String(env[k]))]);
+      }
+      return out;
+    };
+
+    function debugRequestUrl(detail) {
+      return String(detail?.row?.req || detail?.row?.url || detail?.row?.request?.url || (detail?.fields || []).find(([k]) => k === 'URL')?.[1] || '');
+    }
+    function debugLogTarget(detail) {
+      let node = Number(detail?.node || detail?.row?.node || 0) || 0;
+      let space = String(detail?.space || detail?.row?.space || '');
+      const raw = debugRequestUrl(detail);
+      let parsed = null;
+      try { parsed = new URL(raw, typeof location !== 'undefined' ? location.origin : 'http://127.0.0.1'); } catch {}
+      if (parsed) {
+        if (/^https?:/i.test(raw)) node = Number(parsed.port) || node;
+        const m = parsed.pathname.match(/\/s\/([^/]+)/);
+        if (m) space = decodeURIComponent(m[1]);
+      }
+      if (!space) { const m = raw.match(/\/s\/([^/?#]+)/); if (m) space = decodeURIComponent(m[1]); }
+      if (!node) { const m = raw.match(/(?:127\.0\.0\.1|localhost):(\d+)/); if (m) node = Number(m[1]); }
+      return { node, space, url: raw };
+    }
+    function colorizeLogLine(line) {
+      const text = String(line || '');
+      const out = [];
+      const re = /(\b[0-9a-f]{8}-[0-9a-f]{4}\b|https?:\/\/\S+|\b(?:warn|error|panic|fatal)\b)/gi;
+      let last = 0; let m;
+      while ((m = re.exec(text))) {
+        if (m.index > last) out.push(text.slice(last, m.index));
+        const cls = /^https?:/i.test(m[0]) ? 'link' : /^(warn|error|panic|fatal)$/i.test(m[0]) ? 'mark' : 'id';
+        out.push(h('span', { key: `${m.index}-${m[0]}`, className: cls }, m[0]));
+        last = m.index + m[0].length;
+      }
+      if (last < text.length) out.push(text.slice(last));
+      return out;
+    }
+    const ANSI_COLORS = ['#000000','#cc0000','#4e9a06','#c4a000','#3465a4','#75507b','#06989a','#d3d7cf','#555753','#ef2929','#8ae234','#fce94f','#729fcf','#ad7fa8','#34e2e2','#eeeeec'];
+    const ANSI_NAMES = { black:'#000000', red:'#cc0000', green:'#4e9a06', yellow:'#c4a000', blue:'#3465a4', magenta:'#75507b', cyan:'#06989a', white:'#d3d7cf', silver:'#c0c0c0', gray:'#888888', grey:'#888888', darkgrey:'#555753', brightred:'#ef2929', brightgreen:'#8ae234', brightyellow:'#fce94f', brightblue:'#729fcf', brightmagenta:'#ad7fa8', brightcyan:'#34e2e2', brightwhite:'#eeeeec' };
+    const ansiColor = (name, fallback) => {
+      const v = String(name || '').trim().toLowerCase();
+      if (/^#[0-9a-f]{3,8}$/.test(v)) return v;
+      return ANSI_NAMES[v] || fallback;
+    };
+    const ansi256 = (n) => {
+      n = Number(n) || 0;
+      if (n < 16) return ANSI_COLORS[n] || null;
+      if (n < 232) {
+        const i = n - 16, r = Math.floor(i / 36), g = Math.floor((i % 36) / 6), b = i % 6;
+        const c = (x) => x === 0 ? 0 : 55 + x * 40;
+        return `rgb(${c(r)},${c(g)},${c(b)})`;
+      }
+      const v = 8 + (n - 232) * 10;
+      return `rgb(${v},${v},${v})`;
+    };
+    function ansiRuns(text) {
+      const src = String(text || '');
+      const out = [];
+      const state = { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false, inverse: false };
+      const push = (value) => {
+        if (!value) return;
+        let fg = state.fg, bg = state.bg;
+        if (state.inverse) { const f = fg; fg = bg; bg = f; }
+        out.push({ text: value, style: {
+          color: fg || undefined, background: bg || undefined,
+          fontWeight: state.bold ? 700 : undefined,
+          opacity: state.dim ? 0.65 : undefined,
+          fontStyle: state.italic ? 'italic' : undefined,
+          textDecoration: state.underline ? 'underline' : undefined,
+        } });
+      };
+      const re = /\x1b\[([0-9;]*)m/g;
+      let last = 0, m;
+      while ((m = re.exec(src))) {
+        push(src.slice(last, m.index));
+        const codes = (m[1] || '0').split(';').map((x) => Number(x || 0));
+        for (let i = 0; i < codes.length; i++) {
+          const c = codes[i];
+          if (c === 0) { state.fg = state.bg = null; state.bold = state.dim = state.italic = state.underline = state.inverse = false; }
+          else if (c === 1) state.bold = true;
+          else if (c === 2) state.dim = true;
+          else if (c === 3) state.italic = true;
+          else if (c === 4) state.underline = true;
+          else if (c === 7) state.inverse = true;
+          else if (c === 22) { state.bold = false; state.dim = false; }
+          else if (c === 23) state.italic = false;
+          else if (c === 24) state.underline = false;
+          else if (c === 27) state.inverse = false;
+          else if ((c >= 30 && c <= 37) || (c >= 90 && c <= 97)) state.fg = ANSI_COLORS[c <= 37 ? c - 30 : c - 90 + 8];
+          else if ((c >= 40 && c <= 47) || (c >= 100 && c <= 107)) state.bg = ANSI_COLORS[c <= 47 ? c - 40 : c - 100 + 8];
+          else if (c === 39) state.fg = null;
+          else if (c === 49) state.bg = null;
+          else if (c === 38 || c === 48) {
+            const target = c === 38 ? 'fg' : 'bg';
+            if (codes[i + 1] === 5) { state[target] = ansi256(codes[i + 2]); i += 2; }
+            else if (codes[i + 1] === 2) { state[target] = `rgb(${codes[i + 2] || 0},${codes[i + 3] || 0},${codes[i + 4] || 0})`; i += 4; }
+          }
+        }
+        last = m.index + m[0].length;
+      }
+      push(src.slice(last));
+      return out;
+    }
+    function AnsiText({ text }) {
+      return h(React.Fragment, null, ansiRuns(text).map((r, i) => h('span', { key: i, style: r.style }, colorizeLogLine(r.text))));
+    }
+    function terminalTheme(text) {
+      const src = String(text || '');
+      const bg = src.match(/"sess\.bg":\["([^"]+)"/);
+      const fg = src.match(/"sess\.fg":\["([^"]+)"/);
+      return { background: ansiColor(bg?.[1], '#020a10'), color: ansiColor(fg?.[1], '#b9d7e8') };
+    }
+    function TerminalLog({ text }) {
+      const lines = String(text || '').split('\n');
+      const theme = terminalTheme(text);
+      return h('pre', { className: 'cx-term-log', style: theme }, lines.map((line, i) => {
+        const low = line.toLowerCase();
+        const sev = /panic|fatal|error|✗/.test(low) ? 'err' : /warn/.test(low) ? 'warn' : '';
+        return h('div', { key: i, className: `cx-term-line ${sev}` }, h(AnsiText, { text: line }));
+      }));
+    }
+    // Reusable debug inspector. Keep request/response presentation here so
+    // page.js only builds the data model and opens/closes the panel.
+    /** 调试栏终端：xterm + PTY（bash，家目录），单例复用，避免重复挂载起两个 shell。 */
+    const CONSOLE_TERMS = {};
+    function consoleTermDo(node, space, kind, slot = '') {
+      const key = `${node || ''}:${space || ''}:v2${slot}`;
+      const rec = CONSOLE_TERMS[key];
+      if (!rec) return;
+      if (kind === 'clear') rec.clear && rec.clear();
+      if (kind === 'refresh') rec.reset && rec.reset();
+      if (kind === 'reconnect') rec.reconnect && rec.reconnect();
+      if (kind === 'fit') rec.fitNow && rec.fitNow();
+    }
+    function ConsoleTerminal({ node, space, slot = '' }) {
+      const hostRef = useRef(null);
+      useEffect(() => {
+        const key = `${node || ''}:${space || ''}:v2${slot}`;
+        const host = hostRef.current;
+        if (!host) return;
+        const existing = CONSOLE_TERMS[key];
+        if (existing) {
+          try {
+            Array.from(host.children).forEach((c) => { if (c !== existing.wrap) c.remove(); });
+            if (existing.wrap.parentNode !== host) host.appendChild(existing.wrap);
+            existing.fit && existing.fit.fit();
+          } catch {}
+          return () => { try { if (existing.wrap.parentNode) existing.wrap.parentNode.removeChild(existing.wrap); } catch {} };
+        }
+        let cancelled = false;
+        Array.from(host.children).forEach((c) => c.remove());
+        const wrap = document.createElement('div');
+        wrap.className = 'cx-console-term-inner';
+        host.appendChild(wrap);
+        const rec = CONSOLE_TERMS[key] = { wrap, term: null, fit: null, ws: null };
+        (async () => {
+          const load = async (src) => { const code = await (await fetch(src)).text(); new Function('module', 'exports', 'define', 'require', 'window', 'self', 'globalThis', code)(undefined, undefined, undefined, undefined, window, window, window); };
+          if (!window.Terminal) await load('/dsh-contextos-devops/xterm/xterm.js');
+          if (!(window.FitAddon && window.FitAddon.FitAddon)) await load('/dsh-contextos-devops/xterm/addon-fit.js').catch(() => {});
+          if (cancelled || !window.Terminal) return;
+          const lightNow = (document.querySelector('.cx-shell') || {}).dataset?.theme === 'light';
+          const termTheme = lightNow
+            ? { background: '#ffffff', foreground: '#1d3a4a', cursor: '#0b7f9f', selectionBackground: 'rgba(11,127,159,.22)' }
+            : { background: '#04101a', foreground: '#cfeff9', cursor: '#42f5a7' };
+          const term = new window.Terminal({ fontSize: 12, fontFamily: 'Menlo, monospace', cursorBlink: true, scrollback: 2000, cols: 100, rows: 20, theme: termTheme });
+          // 吞掉 DSR/DA 查询：别让 xterm 自动回 \x1b[1;<col>R，回包会被 shell 回显成数字
+          try { term.parser.registerCsiHandler({ final: 'n' }, () => true); term.parser.registerCsiHandler({ final: 'c' }, () => true); } catch {}
+          const fit = window.FitAddon && window.FitAddon.FitAddon ? new window.FitAddon.FitAddon() : null;
+          if (fit) term.loadAddon(fit);
+          term.open(wrap);
+          rec.term = term; rec.fit = fit;
+          try { fit && fit.fit(); } catch {}
+          wrap.addEventListener('mousedown', () => { try { term.focus(); } catch {} });
+          try { document.activeElement && document.activeElement !== document.body && document.activeElement.blur(); } catch {}
+          try { term.focus(); } catch {}
+          let wsHost = location.host, wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
+          if (!/^https?:$/.test(location.protocol)) { try { const o = await api('origin'); if (o && o.host) { wsHost = o.host; wsProto = 'ws'; } } catch {} }
+          if (cancelled) return;
+          let pend = '';
+          const feed = (chunk) => {
+            let t = pend + String(chunk || ''); pend = '';
+            if (/\x1b\[1m\x1b\[7m%[\s\S]*\r \r/.test(t)) t = t.replace(/\x1b\[1m\x1b\[7m%\x1b\[27m\x1b\[1m\x1b\[0m *\r \r/g, '');
+            else { const i = t.lastIndexOf('\x1b[1m\x1b[7m%'); if (i >= 0) { pend = t.slice(i); t = t.slice(0, i); } }
+            if (t) { try { term.write(t); } catch {} }
+          };
+          const connect = () => {
+            if (cancelled) return;
+            let ws;
+            try { ws = new WebSocket(`${wsProto}://${wsHost}/dsh-contextos-devops/terminal?shell=bash`); } catch { return; }
+            rec.ws = ws;
+            ws.onmessage = (e) => { if (ws === rec.ws) { try { feed(e.data); } catch {} } };
+            ws.onclose = () => { if (ws !== rec.ws) return; try { term.write('\r\n[closed]\r\n'); } catch {} };
+            rec.send = (d) => { const clean = String(d).replace(/\x1b\[[0-9;?]*[Rc]/g, ''); if (clean && ws.readyState === 1) ws.send(clean); };
+          };
+          connect();
+          rec.reconnect = () => { try { rec.ws && rec.ws.close(); } catch {}; connect(); };
+          rec.clear = () => { try { term.clear(); } catch {} };
+          rec.reset = () => { try { rec.ws && rec.ws.readyState === 1 && rec.ws.send('clear\r'); } catch {} };
+          rec.fitNow = () => { try { fit && fit.fit(); } catch {} };
+          term.onData((d) => { rec.send && rec.send(d); });
+          [200, 600, 1200].forEach((ms) => setTimeout(() => { try { fit && fit.fit(); } catch {} }, ms));
+        })().catch(() => {});
+        return () => { cancelled = true; try { rec.term && rec.term.blur(); } catch {}; try { if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } catch {} };
+      }, [node, space, slot]);
+      return h('div', { className: 'cx-console-term', ref: hostRef });
+    }
+
+    /** 解析后端日志行：时间 / log.id / order / 模块 / 类型 / 内容 / SQL / 源码文件。 */
+    function parseBackendLog(text) {
+      const out = [];
+      for (const line of String(text || '').split('\n')) {
+        const t = line.trim();
+        if (!t) continue;
+        const m = /^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d+)?)\s+id:\s*(\S+)\s+(\d+)\s+(\S+)\s+(\S+)\s+(.*)$/.exec(t);
+        if (!m) continue;
+        const time = m[1], id = m[2], order = m[3], module = m[4], type = m[5];
+        let rest = m[6];
+        const srcM = /\s(\S+\.go:\d+)\s*$/.exec(rest);
+        const file = srcM ? srcM[1] : '';
+        if (srcM) rest = rest.slice(0, srcM.index);
+        const costM = /\s(\d+(?:\.\d+)?(?:ns|us|ms|s))\s/.exec(rest);
+        const cost = costM ? costM[1] : '';
+        if (costM) rest = rest.slice(0, costM.index) + rest.slice(costM.index + costM[0].length);
+        const sqlM = /\b(SELECT|UPDATE|INSERT|DELETE)\b[\s\S]*/i.exec(rest);
+        const sql = sqlM ? sqlM[0].replace(/\s+rows;\s*[-\d]+[\s\S]*$/i, '').trim() : '';
+        const content = (sqlM ? rest.slice(0, sqlM.index) : rest).replace(/\s+rows;[\s\S]*$/, '').trim();
+        out.push({ time, id, order, module, type, content, cost, sql, file });
+      }
+      return out;
+    }
+
+    function DebugDetail({ detail, onClose }) {
+      const [tab, setTab] = React.useState('info');
+      const [logText, setLogText] = React.useState('');
+      const [logFile, setLogFile] = React.useState('');
+      const [logLoading, setLogLoading] = React.useState(false);
+      React.useEffect(() => { setTab('info'); setLogText(''); setLogFile(''); setLogLoading(false); }, [detail?.key]);
+      const logId = detail?.row?.logId || detail?.responseHeaders?.['log-id'] || detail?.responseHeaders?.['Log-Id'] || (detail?.fields || []).find(([k]) => k === 'LOG.ID')?.[1] || '';
+      const loadLog = async () => {
+        if (!detail || !logId) return;
+        setLogLoading(true);
+        try {
+          const target = debugLogTarget(detail);
+          if (!target.node || !target.space) throw new Error(`无法从 URL 解析节点/空间：${target.url || '（空 URL）'}`);
+          const d = await api('pmLog', { node: target.node, space: target.space, log_id: logId });
+          setLogText(d?.text || ''); setLogFile(d?.file || '');
+        } catch (e) { setLogText(String(e?.message || e)); }
+        finally { setLogLoading(false); }
+      };
+      React.useEffect(() => { if (['backend', 'sql', 'parsedlog'].includes(tab) && !logText && logId) loadLog(); }, [tab, detail?.key]);
+      if (!detail) return null;
+      const info = h(React.Fragment, null,
+        h('div', { className: 'cx-detail-section' }, T('基本信息')),
+        h(KeyValueTable, { rows: (detail.fields || []).map(([k, v]) => [k, k === 'LOG.ID' ? h(React.Fragment, null, String(v ?? ''), h('button', { className: 'cx-log-btn', onClick: () => { setTab('backend'); loadLog(); } }, T('日志'))) : String(v ?? '')]) }),
+        h('div', { className: 'cx-detail-section' }, T('请求头')),
+        h(KeyValueTable, { rows: Object.entries(detail.requestHeaders || {}) }),
+        h('div', { className: 'cx-detail-section' }, T('响应头')),
+        h(KeyValueTable, { rows: Object.entries(detail.responseHeaders || {}) }),
+        logText ? h('div', { className: 'cx-detail-section' }, `${T('后端日志')} ${logFile}`) : null,
+        logText ? h(TerminalLog, { text: logText }) : null);
+      return h('div', { className: 'cx-console-detail', style: { height: 'auto', alignSelf: 'flex-start', maxHeight: '100%' } },
+        h(DetailTabs, {
+          items: [{ value: 'info', label: T('请求信息') }, { value: 'raw', label: T('原始数据') }, { value: 'params', label: T('请求参数') }, { value: 'parsed', label: T('解析数据') }, { value: 'sql', label: T('数据读写') }, { value: 'parsedlog', label: T('解析日志') }, { value: 'backend', label: T('后端日志') }],
+          value: tab, onChange: setTab, onClose,
+        }),
+        tab === 'info' ? info : null,
+        tab === 'raw' ? h('pre', { className: 'cx-console-detail-raw' }, detail.body || '') : null,
+        tab === 'params' ? h(KeyValueTable, { rows: detail.params || [] }) : null,
+        tab === 'parsed' ? h(UiTableList, { cols: detail.table?.cols || [], rows: detail.table?.rows?.slice(0, 100) || [], empty: h('div', { className: 'cx-console-empty' }, T('没有可解析的数据')) }) : null,
+        tab === 'sql' ? h(UiTableList, { cols: [{ k: 'time', label: T('时间') }, { k: 'id', label: 'log.id' }, { k: 'sql', label: 'SQL' }, { k: 'cost', label: T('耗时') }, { k: 'file', label: T('源码文件') }], rows: parseBackendLog(logText).filter((r) => r.sql), empty: h('div', { className: 'cx-console-empty' }, T('没有可解析的 SQL')) }) : null,
+        tab === 'parsedlog' ? h(UiTableList, { cols: [{ k: 'time', label: T('时间') }, { k: 'id', label: 'log.id' }, { k: 'order', label: 'log.order' }, { k: 'module', label: T('模块') }, { k: 'type', label: T('类型') }, { k: 'content', label: T('内容') }, { k: 'file', label: T('源码文件') }], rows: parseBackendLog(logText), empty: h('div', { className: 'cx-console-empty' }, T('没有可解析的日志')) }) : null,
+        tab === 'backend' ? h('div', { className: 'cx-backend-log' }, h('div', { className: 'cx-backend-log-h' }, h('span', null, `${T('后端日志')} · ${logFile || logId || '—'}`), h('button', { className: 'cx-btn xs', disabled: logLoading, onClick: loadLog }, logLoading ? T('加载中…') : T('重新加载'))), logText ? h(TerminalLog, { text: logText }) : h('div', { className: 'cx-console-empty' }, logId ? T('点击重新加载') : 'no log.id')) : null);
+    }

package/src/client/parts/15-layout.js

@@ -0,0 +1,86 @@
+    // Design-system layout primitives. Every page is composed from these slots
+    // so the chrome, spacing and behavior stay identical across product areas.
+    const SingleLineTitle = UiAffordance;
+    const DoubleLineTitle = EntityTitle;
+
+    function UiBar({ kind = 'toolbar', children, className = '', ...rest }) {
+      return h('div', { className: `cx-bar cx-bar--${kind}${className ? ' ' + className : ''}`, ...rest }, children);
+    }
+    function UiWorkspace({ header, tabs, toolbar, left, content, preview, output, right, status, className = '' }) {
+      return h('div', { className: `cx-workspace${className ? ' ' + className : ''}` },
+        header ? h('div', { className: 'cx-workspace-header' }, header) : null,
+        tabs ? h('div', { className: 'cx-workspace-tabs' }, tabs) : null,
+        toolbar ? h('div', { className: 'cx-workspace-toolbar' }, toolbar) : null,
+        h('div', { className: 'cx-workspace-body' },
+          left ? h('aside', { className: 'cx-workspace-left' }, left) : null,
+          h('main', { className: 'cx-workspace-main' },
+            h('div', { className: 'cx-workspace-canvas' },
+              content ? h('section', { className: 'cx-workspace-content' }, content) : null,
+              preview ? h('section', { className: 'cx-workspace-preview' }, preview) : null),
+            output ? h('section', { className: 'cx-workspace-output' }, output) : null),
+          right ? h('aside', { className: 'cx-workspace-right' }, right) : null),
+        status ? h('div', { className: 'cx-workspace-status' }, status) : null);
+    }
+    function UiAddressBar({ segments = [], actions, children, className = '' }) {
+      return h('div', { className: `cx-addressbar${className ? ' ' + className : ''}` },
+        h('div', { className: 'cx-addressbar-segments' }, segments.map((s, i) => h(React.Fragment, { key: i },
+          i ? h(UiIcon, { name: 'chevronRight', size: 12 }) : null,
+          h('button', { type: 'button', className: `cx-addressbar-seg${s.active ? ' on' : ''}`, title: s.title || s.label, onClick: s.onClick },
+            s.icon ? h(UiIcon, { name: s.icon, size: 13 }) : null,
+            h('span', null, s.label || ''))))),
+        children ? h('div', { className: 'cx-addressbar-input' }, children) : null,
+        actions ? h('div', { className: 'cx-addressbar-actions' }, actions) : null);
+    }
+    // 全局统一下拉列表：三列（图标/文字/选中），可滚动时上下显示箭头
+    function MenuList({ items, onPick }) {
+      const ref = useRef(null);
+      const [hint, setHint] = useState({ top: false, bottom: false });
+      const update = () => {
+        const el = ref.current;
+        if (!el) return;
+        const top = el.scrollTop > 2;
+        const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2;
+        setHint((h) => (h.top === top && h.bottom === bottom ? h : { top, bottom }));
+      };
+      useEffect(() => {
+        update();
+        const el = ref.current;
+        if (!el) return;
+        el.addEventListener('scroll', update, { passive: true });
+        const ro = new ResizeObserver(update); ro.observe(el);
+        return () => { el.removeEventListener('scroll', update); ro.disconnect(); };
+      }, [items]);
+      const list = items || [];
+      return h('div', { className: 'cx-menu-list' },
+        hint.top ? h('div', { className: 'cx-menu-hint top', 'aria-hidden': 'true' }, '▲') : null,
+        h('div', { className: 'cx-menu-scroll', ref, onScroll: update },
+          list.length ? list.map((it, i) => (it.sep ? h('div', { key: `sep${i}`, className: 'cx-menu-sep' })
+            : h('button', {
+            key: i, type: 'button',
+            className: `cx-menu-item cx-menu-3col${it.on ? ' on' : ''}${it.danger ? ' danger' : ''}`,
+            onClick: () => { try { it.go(); } catch {} onPick && onPick(it); },
+          },
+            h(UiIcon, { name: it.icon || 'dot', size: 14 }),
+            h('span', { className: 'cx-menu-lbl' }, it.label),
+            h('span', { className: 'cx-menu-chk' },
+              it.on ? h(UiIcon, { name: 'check', size: 12 })
+                : it.open ? h('i', { className: 'cx-menu-dot open', title: '已打开' })
+                  : it.openable ? h('i', { className: 'cx-menu-dot' }) : '')))) 
+            : h('div', { className: 'cx-menu-item empty' }, '—')),
+        hint.bottom ? h('div', { className: 'cx-menu-hint bottom', 'aria-hidden': 'true' }, '▼') : null);
+    }
+
+    function UiCardList({ items, render, empty, className = '' }) {
+      const list = items || [];
+      if (!list.length) return empty || null;
+      return h('div', { className: `cx-card-list${className ? ' ' + className : ''}` }, list.map((item, i) => render(item, i)));
+    }
+    function UiTableList({ cols, rows, empty, className = '' }) {
+      if (!rows || !rows.length) return empty || null;
+      return h('div', { className: `cx-table-list${className ? ' ' + className : ''}` }, h(DataTable, { cols, rows }));
+    }
+    function UiTreeList({ children, empty, className = '' }) {
+      const has = Array.isArray(children) ? children.length > 0 : !!children;
+      if (!has) return empty || null;
+      return h('div', { className: `cx-tree-list${className ? ' ' + className : ''}`, role: 'tree' }, children);
+    }