runway

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE_ID || !snap) return next(e);
    const rest = await next(e);
    try {
      return renderPane($, e);
    } catch {
      return rest;
    }
  });

function renderPane($, e) {
  const { Box, Text, Button, Input } = $.ui.resolve(e);
  const now = Date.now();
  const pace = computePace(snap, now);
  const tier = tierOf(snap, pace);
  const stale = now - snapAt > TTL_MS * 2;
  const cols = Math.max(30, e.props?.bodyColumns ?? 56);

  // 布局是纯函数，这里只负责把段变成元素、把按钮接到处理函数
  const handlers = {
    refresh: () => {
      manualRefresh($);
    },
    copy: (press) => {
      copySnapshot($, press.surface);
    },
  };

  const children = [];
  layoutPane(snap, pace, tier, cols, now, stale, whatIf, { catalog, diff: catDiff }).forEach((r, i) => {
    if (r.kind === 'gap') {
      children.push(Text({ key: 'rw-pg' + i, children: ' ' }));
      return;
    }
    const kids = r.segs.map((s) => {
      if (s.kind === 'meter') return meterNode(Box, Text, 'rw-' + s.id, s.parts);
      if (s.kind === 'input') {
        // mobile 的元素表里**没有 Input**（类型定义原文："No `Input` or `Select`"），
        // 而 Pane 在 mobile 上也会触发。直接调用 Input(...) 会抛错、
        // 被上面的 catch 吞掉，于是整个面板在手机上是一片空白。
        // 画不了输入框就跳过这一行 —— 试算是附加功能，不该拖垮整个面板。
        if (!Input) return null;
        return Input({
          key: 'rw-' + s.id,
          label: s.label,
          placeholder: s.placeholder,
          submitLabel: s.submitLabel,
          onSubmit: (text) => {
            setWhatIf($, text);
          },
        });
      }
      if (s.kind === 'button') {
        const props = {
          key: 'rw-' + s.id,
          label: s.label,
          hotkey: s.hotkey,
          plain: true,
          onPress: (press) => {
            handlers[s.id](press);
          },
        };
        // autoFocus 只接受 true。落在后果最小的控件上：焦点在"复制"，
        // 回车是复制而不是刷新（照抄 blast-radius 把 autoFocus 给 Cancel）。
        if (s.id === 'copy') props.autoFocus = true;
        return Button(props);
      }
      // 注意：**不要**在这里靠 `s.width` 去包定宽 Box 做列对齐。
      //
      // 踩过：Box 的 `width` 是 flex-basis，而引擎给 Box 的默认值里有
      // `flexShrink: 1` —— 主轴放不下时定宽会被一路压回内容宽，
      // 于是"短名字那行的数字跑到左边去"。真要做固定列，三件事缺一不可：
      //   width + minWidth 同值 + **flexShrink: 0**，并且**列宽之和 ≤ bodyColumns**
      //   （关掉压缩后放不下就是溢出被裁，不会自己缩）。
      // 但模型那块现在走的是"一行一个模型"，本来就不需要对齐，所以不引入这套机制。
      return textOf(Text, 'rw-' + s.id, s);
    });
    children.push(Box({ key: 'rw-pr' + i, flexDirection: 'row', children: kids.filter(Boolean) }));
  });
  return Box({ flexDirection: 'column', children });
}