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}
        masked={await read($, masked)}
        editing={await read($, editing)}
        on={actions($)}
      />
    );
  });

export function Pane(p: PaneProps) {
  const { Box, Text, Button } = p.el;
  const { snap, route, on } = p;
  const enabled = snap.servers.filter((s) => s.enabled).length;
  let body;
  if (!snap.isUp) body = <Text color="red">The daemon does not answer at {snap.origin}.</Text>;
  else 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} servers={snap.servers} />;
  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}>
      <Box flexWrap="wrap" columnGap={1}>
        {TABS.map(([tab, label]) => (
          <Button
            key={`tab:${tab}`}
            label={label}
            {...primary(route.tab === tab)}
            onPress={() => on.go(tab)}
          />
        ))}
        <Button key="refresh" label="Refresh" dimColor onPress={on.refresh} />
        {snap.isUp && (
          <Text dimColor>
            MCP {enabled}/{snap.servers.length}
          </Text>
        )}
      </Box>
      <Text dimColor wrap="truncate">
        {p.isFocused
          ? 'Tab / shift+Tab move · Enter presses · ↑↓ scroll · Esc back to the prompt'
          : 'ctrl+x tab: use this pane from the keyboard'}
      </Text>
      {p.busy ? (
        <Text color="yellow">{p.busy}...</Text>
      ) : (
        p.notice && <Text dimColor>{p.notice}</Text>
      )}
      {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="yellow" paddingX={1}>
      <Text color="yellow">{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 ||
      !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 && `needs a look: ${snap.attention.join(', ')}`,
    snap.elicitations.length > 0 && `${snap.elicitations.length} question(s) waiting for you`,
  ].filter(Boolean);

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