jev

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const warning = await read($, claim)
    if (warning === null || e.props.hasSurvey) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const below = await next(e)
    const actions = [
      { key: 'jev-verify', label: 'Ask to verify', isPrimary: true, onPress: () => void askToVerify($) },
      { key: 'jev-dismiss', label: 'Dismiss', isQuiet: true, isDismiss: true, onPress: () => void update($, claim, () => null) },
    ]
    return band({ Box, Text, Button } as unknown as BandMake, [{ key: 'jev-claim', tone: 'warn', icon: GLYPHS.warn, text: warning.text, actions }], e.props.bodyColumns, below, e.surface === 'terminal' ? glyphMode : 'full')
  })

export function band(make: BandMake, rows: readonly BandRow[], columns: number, below?: RenderElement | null, glyphs: BandGlyphs = 'full'): RenderElement {
  const drawn = rows.map(r => bandRow(make, r, columns, glyphs))
  return make.Box({ flexDirection: 'column', children: isNothing(below) ? drawn : [...drawn, below as RenderElement] })
}

export function bandRow(make: BandMake, row: BandRow, columns: number, glyphs: BandGlyphs = 'full'): RenderElement {
  const tone = TONES[row.tone]
  const mark = glyphs === 'full' && row.icon ? row.icon[0] : tone.glyph
  const actions = row.actions ?? []
  const buttons = actions.reduce((n, a) => n + buttonWidth(a) + 1, 0)
  // a full icon (an emoji, say) may take two cells
  const markWidth = glyphs === 'full' && row.icon ? 3 : 2
  const head = row.title ? row.title.length + 3 : 0
  const tail = row.note ? row.note.length + 3 : 0
  const isStacked = actions.length > 0 && columns - markWidth - buttons - head - tail < 24
  const lines = Math.max(1, row.maxLines ?? 2)
  // the first line shares its width with the glyph, the title, the note and (beside it) the buttons; the others have it all
  const firstLine = Math.max(10, columns - markWidth - (isStacked ? 0 : buttons) - head - tail)
  const room = firstLine + (lines - 1) * Math.max(10, columns - markWidth)
  const children: RenderElement[] = []
  if (row.title) children.push(make.Text({ bold: true, children: [row.title] }), make.Text({ dimColor: true, children: [' · '] }))
  children.push(make.Text({ children: [clipText(row.text, room)] }))
  if (row.note) children.push(make.Text({ dimColor: true, children: [` · ${row.note}`] }))
  const glyph = make.Text({ color: tone.color, bold: true, children: [mark] })
  const text = make.Box({ flexShrink: 1, flexGrow: 1, children: [make.Text({ wrap: 'wrap', children })] })
  const drawn = actions.map(a =>
    make.Button({
      key: a.key,
      label: a.label,
      ...(a.hotkey ? { hotkey: a.hotkey } : {}),
      ...(a.isPrimary ? { variant: 'primary' } : {}),
      ...(a.isQuiet ? { dimColor: true } : {}),
      ...(a.isDismiss ? { role: 'dismiss' } : {}),
      onPress: a.onPress,
    }),
  )
  if (!isStacked) return make.Box({ key: row.key, flexDirection: 'row', columnGap: 1, children: [glyph, text, ...drawn] })
  return make.Box({
    key: row.key,
    flexDirection: 'column',
    children: [
      make.Box({ flexDirection: 'row', columnGap: 1, children: [glyph, text] }),
      make.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, paddingLeft: 2, children: drawn }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const l = await read($, ledger)
    const ov = await read($, overrides)
    const last = await read($, check)
    const pick = await read($, effortPick)
    const isEnabled = (name: Toggle) => ov[name] ?? optionOn(name)
    const p50 = percentile(l.latencies, 0.5)
    const p95 = percentile(l.latencies, 0.95)
    const width = Math.max(30, e.props.bodyColumns - 2)

    const head = (
      <Box flexDirection="column">
        <Text bold>
          Jev <Text dimColor>· TypeSafe System One</Text>
        </Text>
        {apiKey === undefined ? (
          <Box flexDirection="column">
            <Text color="yellow">No API key. Get one at console.typesafe.ai</Text>
            <Text dimColor>Then set TYPESAFE_API_KEY (or the jev apiKey option) and restart Claude Code.</Text>
          </Box>
        ) : (
          <Text dimColor>
            key from {keySource === 'option' ? 'the apiKey option' : 'TYPESAFE_API_KEY'} · model {modelName()}
          </Text>
        )}
        <Text>
          {l.requests} request{l.requests === 1 ? '' : 's'} · {fmtTokens(l.inputTokens)} tokens · ≈{fmtCost(costUsd(l.inputTokens))}
          {p50 === null ? '' : ` · p50 ${fmtMs(p50)} · p95 ${fmtMs(p95 ?? p50)}`}
          {l.errors > 0 ? ` · ${l.errors} error${l.errors === 1 ? '' : 's'}` : ''}
        </Text>
        {l.lastError !== null && (
          <Text color="red" wrap="wrap">
            last error: {l.lastError}
          </Text>
        )}
        {last !== null && (
          <Text dimColor>
            last answer: claims a pass {pct(last.claimsPass)} · done {pct(last.saysDone)} · asks {pct(last.asksUser)} · {last.passed}/{last.ran}{' '}
            checks passed
          </Text>
        )}
        {pick !== null && (
          <Text dimColor>
            last prompt: {pick.label} ({pct(pick.confidence)}){pick.applied ? ` → effort ${String(pick.effort)}` : ''}
          </Text>
        )}
      </Box>
    )
    const toggles = (
      <Box gap={1}>
        <Button
          key="risk"
          hotkey="r"
          label={`Risk notes: ${isEnabled('riskNotice') ? 'on' : 'off'}`}
          variant={isEnabled('riskNotice') ? 'primary' : 'secondary'}
          onPress={() => void flip($, 'riskNotice')}
        />
        <Button
          key="claims"
          hotkey="c"
          label={`Claim check: ${isEnabled('claimCheck') ? 'on' : 'off'}`}
          variant={isEnabled('claimCheck') ? 'primary' : 'secondary'}
          onPress={() => void flip($, 'claimCheck')}
        />
        <Button
          key="effort"
          hotkey="e"
          label={`Auto effort: ${isEnabled('autoEffort') ? 'on' : 'off'}`}
          variant={isEnabled('autoEffort') ? 'primary' : 'secondary'}
          onPress={() => void flip($, 'autoEffort')}
        />
        <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>
    )

    if (e.surface === 'mobile' || apiKey === undefined) {
      return (
        <Box flexDirection="column">
          {head}
          <Text> </Text>
          {toggles}
        </Box>
      )
    }

    const { Input, Select } = $.ui.resolve(e)
    const p = await read($, play)
    const result = p.result
    const barWidth = Math.max(6, Math.min(30, width - 34))
    return (
      <Box flexDirection="column">
        {head}
        <Text> </Text>
        {toggles}
        <Text> </Text>
        <Text bold>Playground</Text>
        <Input
          key="state"
          label="State "
          placeholder="the text Jev judges"
          value={draft.state}
          onInput={value => {
            draft.state = value
          }}
          onSubmit={value => {
            draft.state = value
          }}
        />
        <Input
          key="question"
          label="Question "
          placeholder="Does this convey urgency?"
          value={draft.question}
          onInput={value => {
            draft.question = value
          }}
          onSubmit={value => {
            draft.question = value
            void runPlay($)
          }}
        />
        <Select key="type" label="Type " options={TYPE_OPTIONS} value={p.type} onSelect={value => void setPlayType($, value)} />
        <Input
          key="criteria"
          label="Criteria "
          placeholder={CRITERIA_HINT[p.type]}
          value={draft.criteria}
          onInput={value => {
            draft.criteria = value
          }}
          onSubmit={value => {
            draft.criteria = value
            void runPlay($)
          }}
        />
        <Box gap={1}>
          <Button key="ask" hotkey="a" variant="primary" label={p.isBusy ? 'Asking…' : 'Ask'} onPress={() => void runPlay($)} />
        </Box>
        {p.error !== null && <Text color="red">{p.error}</Text>}
        {result !== null && (
          <Box flexDirection="column">
            {result.rows.map(row => (
              <Text key={`row-${row.label}`}>
                {cut(row.label, 24).padEnd(24)} <Text color="cyan">{bar(row.p, barWidth)}</Text> {p2(row.p)}
              </Text>
            ))}
            <Text dimColor>
              {result.type === 'choice' && result.pick !== null ? `→ ${result.pick} · ` : ''}
              {result.type === 'score' && result.score !== null ? `score ${result.score.toFixed(2)} · ` : ''}
              {result.confidence !== null ? `confidence ${p2(result.confidence)} · ` : ''}
              {fmtMs(result.ms)} · {fmtTokens(result.inputTokens)} tokens · {result.model}
            </Text>
          </Box>
        )}
      </Box>
    )
  })