router

  on('ui.render', { component: ['AbovePrompt', 'Pane'] }, async ($, e, next) => {
    if (e.component === 'Pane' && e.requestId !== PANE) return next(e);
    const storedView = await readView($, runtime);
    const view = { ...storedView, mode: await modeOf($, runtime, storedView.mode) };
    const elements = $.ui.resolve(e);
    const { Box } = elements;
    const usage = await $.session.usage().catch(() => null);
    if (e.component === 'AbovePrompt') {
      if (e.props.hasSurvey) return next(e);
      return Box({
        flexDirection: 'column',
        children: [
          await next(e),
          renderBand(
            elements,
            config,
            view,
            usage,
            { columns: e.props.bodyColumns, agentId: e.props.view?.agentId },
            {
              open: () => openPane($, runtime),
              mode: (mode) => changeMode($, runtime, mode),
              pin: async (tier) => $.ui.toast(await setPin($, runtime, tier)),
              unpin: () => updateView($, runtime, { pendingPin: null }),
              key: () => openKeySettings($),
              toggleDetail: async () => {
                const bandDetail = !view.bandDetail;
                await $.store.set(BAND_DETAIL, bandDetail).catch(() => {});
                await updateView($, runtime, { bandDetail });
              },
            },
          ),
        ],
      });
    }
    const settings = await $.settings.read().catch(() => ({}));
    const modelOptions = Object.keys(config.models).filter((alias) =>
      isModelAllowed(config.models[alias].id, settings.availableModels, view.nativeModel),
    );
    const editRoute = (tier, change) => {
      const draft = routeDraftOf(config, runtime.view ?? view);
      const current = effectiveRoutes(draft, config).routes[tier];
      return updateView($, runtime, {
        routeDraft: { ...draft, routes: { ...draft.routes, [tier]: change(current) } },
        notice: null,
      });
    };
    // Every pane save adopts the file as written, which may name another classifier than before: a hand edit
    // meanwhile, or a row press. Then the new classifier starts clean and the old one's readings leave the view;
    // an unavailable reason stays.
    const adopt = async (loaded) => {
      const switched = loaded.classifier !== config.classifier;
      config = loaded;
      if (!switched) return {};
      clientOf(config.classifier).restore(null);
      const current = runtime.view ?? view;
      return {
        ...CLEARED_READINGS,
        error: current.phase === 'unavailable' ? current.error : null,
        credentials: await credentialsOf($, options, config),
        health: healthOf(clientOf(config.classifier), config.classifier),
      };
    };
    // Pending drafts re-pointed at the config a write just adopted. An edit that still differs stays; everything else
    // follows the file, and the file becomes what the draft compares against, so picking a value the write replaced
    // counts as a change again.
    const rebased = ({ routeDraft, tuning, tuningBase }) => {
      const routes = routeDraft && effectiveRoutes(routeDraft, config);
      const edited = Object.entries(tuning ?? {}).filter(([key, value]) => value !== tuningBase?.[key]);
      return {
        routeDraft: routes ? { ...routes, base: routeDraftOf(config, {}).base } : null,
        tuning: edited.length ? Object.fromEntries(edited) : null,
        tuningBase: edited.length ? tuningOf(config) : null,
      };
    };
    const save = async (change, saved) => {
      const result = await saveConfig($, config.nativePath, change);
      if (result.error) return updateView($, runtime, { notice: result.error });
      const drafts = runtime.view ?? view;
      const reset = await adopt(result.config);
      return updateView($, runtime, { ...reset, ...rebased(drafts), ...saved(config) });
    };
    // Defaults go into the routing draft like any edit; the notice says whether Save has anything of that section left
    // to write.
    const loadDefaults = (patch, what) => {
      const changes = routingChanges(config, { ...(runtime.view ?? view), ...patch });
      const pending = what === 'route' ? changes.tiers.length + Number(changes.baseline) : changes.policy.length;
      return updateView($, runtime, {
        ...patch,
        notice: pending
          ? `${what === 'route' ? 'Route' : 'Policy'} defaults loaded. Save removes your ${what} overrides from router.json.`
          : `${what === 'route' ? 'Routes' : 'Policy'} already at defaults.`,
      });
    };
    // A pane write keeps the leaves it changed as router.json had them, read from the file it rewrites rather than from
    // the loaded config, so Undo restores them verbatim. A later write replaces them, and Undo clears them.
    const write = (label, change, patch = {}) => {
      let leaves = [];
      return save(
        (file) => {
          const written = change(file);
          leaves = changedLeaves(file, written);
          return written;
        },
        () => ({ ...patch, lastWrite: { label, leaves }, notice: `Saved: ${label}. Applies from the next turn.` }),
      );
    };
    return renderPanel(
      elements,
      config,
      view,
      usage,
      {
        mode: (mode) => changeMode($, runtime, mode),
        tab: (tab) => updateView($, runtime, { tab, notice: null }),
        help: () => updateView($, runtime, { help: !view.help }),
        pin: async (tier) => {
          await updateView($, runtime, { notice: await setPin($, runtime, tier) });
        },
        unpin: () => updateView($, runtime, { pendingPin: null, notice: null }),
        key: async () => {
          openKeySettings($);
          await $.ui.close({ id: PANE });
        },
        copyPath: async (press) => {
          await $.ui.copy({ text: config.nativePath, surface: press?.surface });
          await updateView($, runtime, { notice: 'Path copied.' });
        },
        close: () => $.ui.close({ id: PANE }),
        routeModel: (tier, alias) =>
          editRoute(tier, (route) => ({
            model: alias,
            effort: config.models[alias]?.efforts.includes(route.effort) ? route.effort : null,
          })),
        routeEffort: (tier, effort) => editRoute(tier, (route) => ({ model: route.model, effort })),
        baseline: async (tier) => {
          const draft = routeDraftOf(config, runtime.view ?? view);
          await updateView($, runtime, { routeDraft: { ...draft, baselineTier: tier }, notice: null });
        },
        saveRouting: async () => {
          const current = runtime.view ?? view;
          const routeDraft = current.routeDraft;
          const saved = tuningOf(config);
          const base = current.tuningBase ?? saved;
          const edited = Object.keys(current.tuning ?? {}).filter((key) => current.tuning[key] !== base[key]);
          const changes = routingChanges(config, current).count;
          if (!changes) return updateView($, runtime, { notice: 'No routing changes to save.' });
          const after = Object.fromEntries(edited.map((key) => [key, current.tuning[key]]));
          return write(
            `${changes} routing change${changes === 1 ? '' : 's'}`,
            (file) => {
              const routed = routeDraft ? withRoutes(file, routeDraft) : file;
              return edited.length ? withTuning(routed, { ...base, ...after }, base) : routed;
            },
            { routeDraft: null, tuning: null, tuningBase: null },
          );
        },
        discardRouting: () =>
          updateView($, runtime, { routeDraft: null, tuning: null, tuningBase: null, notice: null }),
        resetRoutes: () =>

export function renderBand({ Box, Text, Button }, config, view, usage, { columns, agentId }, actions) {
  const draw = (p) => (p.button ? Button(p.button) : Text({ ...p.style, children: p.text }));
  const row = (parts) => Box({ children: parts.map(draw) });
  if (agentId) return row([part('○ Router · subagents keep their own model', { dimColor: true })]);
  const kept = fitSegments(bandSegments(config, view, usage, actions), Math.max(0, columns - ROUTER_BUTTON));
  const line = kept.flatMap((s, i) => (i ? [part(SEPARATOR, { dimColor: true }), ...s.parts] : s.parts));
  line.push(part('  '), button({ key: 'details', label: 'Router', plain: true, onPress: actions.open }));
  const routing = view.mode === 'auto' && view.phase !== 'unavailable';
  return Box({
    key: 'router-band',
    flexDirection: 'column',
    children: [
      row(line),
      view.bandDetail && routing ? row(detailRow(config, view, usage)) : null,
      // Revealed while the pointer is over the band; no digit hotkeys, since a bare digit in an
      // empty prompt would press them.
      Box({
        display: 'none',
        hover: { display: 'flex' },
        children: [
          Text({ dimColor: true, children: routing ? 'pin next turn ' : '' }),
          ...(routing
            ? TIERS.flatMap((tier) => [
                Button({ key: `band-pin-${tier}`, label: tier, onPress: () => actions.pin(tier) }),
                Text({ children: ' ' }),
              ])
            : []),
          Text({ children: routing ? '  ' : '' }),
          routing
            ? Button({ key: 'band-manual', label: 'Manual', onPress: () => actions.mode('manual') })
            : Button({ key: 'band-auto-row', label: 'Auto', onPress: () => actions.mode('auto') }),
          Text({ children: ' ' }),
          Button({
            key: 'band-detail',
            label: view.bandDetail ? '1 row' : '2 rows',
            onPress: actions.toggleDetail,
          }),
        ],
      }),
    ],
  });
}