telltale

  on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
    if (headless) return next(e);
    if (e.props.hasSurvey) return next(e);

    // Ticket 27 (SDD §2.8 "換邊三態"): no `agents` panel means no Pane was
    // ever opened, so this site behaves as `bottom` always did — draws
    // everything. With `agents` live, only `bottom`/`both` win outright;
    // auto/unset/right (ticket 29 "換邊 auto 退路", ticket 30 "right 也走退路")
    // all draw everything here until the Pane's own `ui.render` has actually
    // reached this session (`paneSeen`), then yield — the real-machine
    // fallback for a host that opens the Pane but never renders it.
    const hasAgents = active.some((p) => p.id === "agents");
    const stored = hasAgents ? ((await $.store.get("edge.agents")) as "auto" | "right" | "bottom" | "both" | undefined) : "bottom";
    const edge = effectiveEdge(stored, paneSeen);
    if (edge === "right") return next(e);
    const hasOthers = active.some((p) => p.id !== "agents");
    if (edge === "both" && !hasOthers) return next(e);

    const viewportColumns = (e.viewport as { columns?: number } | undefined)?.columns;
    const only = edge === "both" ? "others" : undefined;
    const props = await buildBandProps(active, $, e.props.maxRows as number, viewportColumns, "inline", liveKey, only);

    const { Client } = $.ui.resolve(e);
    return <Client key="band" module="./band.tsx" props={props} />;
  });

  on("ui.render", { component: "Pane" }, async ($, e, next) => {
    if (headless) return next(e);
    // Ticket 27: an explicit `bottom` is the one stored value with no Pane
    // to draw into (session.start never opened it), so this site yields.
    // Ticket 29 / 30: any other stored value (including auto/unset/right)
    // means the Pane really is rendering right now — mark `paneSeen` below
    // so the AbovePrompt fallback can yield to it from here on.
    const hasAgents = active.some((p) => p.id === "agents");
    const stored = hasAgents ? ((await $.store.get("edge.agents")) as "auto" | "right" | "bottom" | "both" | undefined) : "right";
    if (stored === "bottom") return next(e);

    if (!paneSeen) {
      paneSeen = true;
      // First sighting only (SDD §2.8): AbovePrompt was drawing the whole
      // band under the "Pane hasn't shown up yet" fallback — tell it to
      // redraw now that it can yield to this Pane.
      $.ui.invalidate("ui.render");
    }
    const edge = effectiveEdge(stored, paneSeen);

    const viewportColumns = (e.viewport as { columns?: number } | undefined)?.columns;
    // Ticket 24: `Pane.placement` (claude-code.d.ts, 2.1.274) — `"dock"` on
    // a wide-enough terminal, `"inline"` when the engine floats it above
    // the prompt instead; drives the placement-derived style default.
    const placement = ((e.props as { placement?: "dock" | "inline" } | undefined)?.placement ?? "dock") as "dock" | "inline";
    const only = edge === "both" ? "agents" : undefined;
    // Ticket 32 (SDD §2.8 "Pane 用滿"): the Pane's own row budget, not
    // `BAND_ROWS_MAX` — the engine tells this site exactly how many rows
    // its body has (`scroll.bodyRows`); missing it (an old harness) falls
    // back to the old ceiling. Used as both `maxRows` and `cap` so a Pane
    // taller than `BAND_ROWS_MAX` actually fills, and `full` panels want
    // the rest of it.
    const bodyRows = ((e.props as { scroll?: { bodyRows?: number } } | undefined)?.scroll?.bodyRows) ?? BAND_ROWS_MAX;
    const props = await buildBandProps(active, $, bodyRows, viewportColumns, placement, liveKey, only, bodyRows);

    const { Client } = $.ui.resolve(e);
    return <Client key="band" module="./band.tsx" props={props} />;
  });