agent-discover

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const el = $.ui.resolve(e);
    const snap = await read($, snapshot);
    if (!snap) return <el.Text dimColor>Loading...</el.Text>;

    return (
      <Pane
        el={el}
        snap={snap}
        route={await read($, route)}
        detail={await read($, detail)}
        tool={await read($, tool)}
        confirm={await read($, confirm)}
        browse={await read($, browse)}
        plan={await read($, plan)}
        logs={await read($, logs)}
        audit={await read($, audit)}
        busy={await read($, busy)}
        notice={await read($, notice)}
        isFocused={e.props.isFocused}
        columns={e.props.bodyColumns}
        masked={await read($, masked)}
        editing={await read($, editing)}
        on={actions($)}
      />
    );
  });

export function Pane(p: PaneProps) {
  const { Box, Text, Button, Code } = p.el;
  const { snap, route, on } = p;
  const width = Math.min(p.columns, MAX_COLUMNS);
  // Every tab needs the daemon: no tabs then, just what to do about it.
  if (!snap.isUp)
    return (
      <Box flexDirection="column" gap={1} width={width}>
        <Box flexDirection="column">
          <Text color={BAD} bold>
            The agent-discover daemon is not running
          </Text>
          <Text dimColor>
            Nothing answers at {snap.origin}. The next MCP call starts it, or run:
          </Text>
        </Box>
        <Code source="agent-discover daemon" language="shell" />
        <Button key="retry" label="Retry" variant="primary" onPress={on.refresh} />
      </Box>
    );
  let body;
  if (route.tab === 'servers' && route.server)
    body = p.detail ? (
      <Detail
        el={p.el}
        on={on}
        d={p.detail}
        tool={p.tool}
        confirm={p.confirm}
        masked={p.masked}
        editing={p.editing}
      />
    ) : (
      <Text dimColor>Loading {route.server}…</Text>
    );
  else if (route.tab === 'servers') body = <Servers el={p.el} on={on} snap={snap} />;
  else if (route.tab === 'browse')
    body = <Browse el={p.el} on={on} browse={p.browse} plan={p.plan} masked={p.masked} />;
  else if (route.tab === 'logs') body = <Logs el={p.el} on={on} logs={p.logs} />;
  else body = <Audit el={p.el} on={on} audit={p.audit} />;

  return (
    <Box flexDirection="column" gap={1} width={width}>
      <Box flexDirection="column">
        <Box flexWrap="wrap" columnGap={2}>
          {TABS.map(([tab, label, hotkey]) =>
            route.tab === tab && !route.server ? (
              <Text key={`tab:${tab}`}>
                <Text color={ACCENT}>{hotkey}: </Text>
                <Text bold underline>
                  {label}
                </Text>
              </Text>
            ) : (
              <Button
                key={`tab:${tab}`}
                label={label}
                hotkey={hotkey}
                plain
                {...(route.tab === tab ? {} : { dimColor: true })}
                onPress={() => on.go(tab)}
              />
            ),
          )}
          <Button key="refresh" label="Refresh" hotkey="r" plain dimColor onPress={on.refresh} />
        </Box>
        {/* One status line under the tabs: the action in flight, else its outcome, else the
            keys. Nothing above the view grows or shrinks as actions come and go. */}
        {p.busy ? (
          <Text color={WARN} wrap="truncate">
            {p.busy}…
          </Text>
        ) : p.notice ? (
          <Text {...color(isFailure(p.notice) ? BAD : OK)}>{p.notice}</Text>
        ) : (
          <Text dimColor wrap="truncate">
            {p.isFocused
              ? 'Tab moves · Enter presses · ↑↓ scroll · Esc to the prompt'
              : 'ctrl+x tab to work this pane from the keyboard'}
          </Text>
        )}
      </Box>
      {snap.elicitations.map((q) => (
        <Question key={`q:${q.id}`} el={p.el} on={on} q={q} />
      ))}
      {body}
    </Box>
  );
}

function Question({ el, on, q }: ViewProps & { q: AgentDiscoverElicitation }) {
  const { Box, Text, Button, Input, Select } = el;
  return (
    <Box flexDirection="column" borderStyle="round" borderColor={WARN} paddingX={1}>
      <Text color={WARN} bold>
        {q.server} asks
      </Text>
      <Text>{q.message}</Text>
      {q.fields.map((f) =>
        f.options.length && Select ? (
          <Select
            key={`q:${q.id}:${f.name}`}
            label={f.title}
            options={f.options.map((o) => ({ value: o, label: o }))}
            onSelect={(v) => on.answer(q.id, f.name, v)}
          />
        ) : (
          Input && (
            <Input
              key={`q:${q.id}:${f.name}`}
              label={`${f.title}${f.required ? ' *' : ''}`}
              submitLabel="set"
              onSubmit={(v) => on.answer(q.id, f.name, v)}
            />
          )
        ),
      )}
      <Box flexWrap="wrap" columnGap={1}>
        <Button
          key={`q:${q.id}:accept`}
          label="Accept"
          variant="primary"
          onPress={() => on.respond(q.id, 'accept')}
        />
        <Button
          key={`q:${q.id}:decline`}
          label="Decline"
          onPress={() => on.respond(q.id, 'decline')}
        />
        <Button
          key={`q:${q.id}:cancel`}
          label="Cancel"
          dimColor
          onPress={() => on.respond(q.id, 'cancel')}
        />
      </Box>
    </Box>
  );
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const snap = await read($, snapshot);
    if (
      e.props.hasSurvey ||
      (await read($, paneOpen)) ||
      !snap?.isUp ||
      (snap.attention.length === 0 && snap.elicitations.length === 0) ||
      (await read($, dismissed)) === signature(snap)
    ) {
      return next(e);
    }

    return <Band el={$.ui.resolve(e)} snap={snap} on={actions($)} />;
  });

export function Band({ el, snap, on }: ViewProps & { snap: AgentDiscoverSnapshot }) {
  const { Box, Text, Button } = el;
  const what = [
    snap.attention.length > 0 &&
      `${snap.attention.join(', ')} ${snap.attention.length === 1 ? 'needs' : 'need'} a look`,
    snap.elicitations.length > 0 &&
      `${plural(snap.elicitations.length, 'question')} waiting for you`,
  ].filter(Boolean);

  return (
    <Box columnGap={1} flexWrap="wrap">
      <Text color={WARN}>MCP: {what.join(' · ')}</Text>
      <Button key="open" label="Review" variant="primary" onPress={on.openFromBand} />
      <Button key="dismiss" label="Dismiss" dimColor onPress={on.dismiss} />
    </Box>
  );
}