cadence

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const drawn = await next(e);
    try {
      if (e.props.hasSurvey) return drawn;
      const root = await planningRootAsync(await $.session.cwd(), (dir, name) => $.fs.exists(at(dir, name)));
      if (root === null) return drawn;
      let cursor = null;
      try {
        cursor = parseCursor(await $.fs.read(at(root, '.planning/STATE.md')));
      } catch {
        // unreadable is the same as absent: the /cad-progress line
      }
      try {
        const list = await $.agent.list();
        roster = rosterReconcile(roster, list);
      } catch {
        // no list: draw the roster the start and stop events built
      }
      const { Box, Text, Button } = $.ui.resolve(e);
      if (typeof Button !== 'function') {
        const band = Text({ wrap: 'truncate-end', children: bandLine(cursor, roster, e.props.bodyColumns, meter.breaks) });
        return Box({ flexDirection: 'column', children: [band, drawn] });
      }
      // The pane's button beside the line, which takes what is left. A letter,
      // never a digit: a bare digit in an empty composer presses a band Button.
      const line = bandLine(cursor, roster, Math.max(0, e.props.bodyColumns - PANE_BUTTON_CELLS - 1), meter.breaks);
      const button = Button({ label: PANE_BUTTON_LABEL, hotkey: PANE_BUTTON_KEY,
        onPress: () => { openPane($, pane).catch(() => {}); } });
      const band = Box({ flexDirection: 'row', gap: 1, children: [Text({ wrap: 'truncate-end', children: line }), button] });
      return Box({ flexDirection: 'column', children: [band, drawn] });
    } catch {
      return drawn;
    }
  });

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e, next) => {
    const drawn = await next(e);
    try {
      if (pane.snapshot === null) {
        pane.open = true;
        refresh($, pane);
      }
      const { Box, Text, Button } = $.ui.resolve(e);
      sights = sightDraw(sights, roster, Date.now());
      // Docked beside the transcript the pane has a separator only, so it gets
      // a frame; inline above the prompt the host draws a border already.
      const framed = e.props.placement === 'dock';
      const width = Math.max(1, e.props.bodyColumns - (framed ? FRAME_CELLS : 0));
      const title = Box({ flexDirection: 'row', justifyContent: 'space-between', children: [
        Text({ bold: true, color: 'cyan', children: '◆ Cadence' }),
        Text({ dimColor: true, wrap: 'truncate-end', children: typeof Button === 'function' ? `${NEXT_KEY} next` : '' })] });
      const cell = (/** @type {any} */ s) => s.action === 'next' && typeof Button === 'function'
        ? Button({ key: 'next', label: s.text, hotkey: NEXT_KEY, variant: 'primary',
          onPress: () => { $.prompt.fill({ text: s.text, mode: 'replace' }).catch(() => {}); } })
        : segmentText(Text, s);
      const rows = paneView(pane.snapshot, width, roster, sights, meter)
        .map((row) => Box({ flexDirection: 'row', children: row.map(cell) }));
      const body = [title, Text({ children: ' ' }), ...rows];
      return framed
        ? Box({ flexDirection: 'column', borderStyle: 'round', borderColor: 'gray', paddingX: 1, children: body })
        : Box({ flexDirection: 'column', children: body });
    } catch {
      return drawn;
    }
  });