cockpit

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    const Select = 'Select' in t ? t.Select : null
    const Input = 'Input' in t ? t.Input : null
    const r = await read($, router)
    const isOn = r.mode !== 'off'
    const last = r.current
    const draft = await read($, ruleDraft)
    const modelValue = (id: string | null) => modelWord(id) ?? 'keep'
    const modelOptions = MODEL_CHOICES.map(([label, id]) => ({ value: modelWord(id) ?? 'keep', label: id ? `${label} ${shortModel(id).split(' ')[1] ?? ''}`.trim() : 'Keep yours' }))
    const effortOptions = EFFORT_CHOICES.map(([label, id]) => ({ value: id ?? 'keep', label: id ? label : 'Keep yours' }))
    const section = (label: string, hint?: string) => (
      <Text>
        <Text bold>{label}</Text>
        {hint ? <Text dimColor>{`  ${hint}`}</Text> : null}
      </Text>
    )
    // one picker: a dropdown where the surface has one, else a row of buttons
    const picker = (key: string, options: { value: string; label: string }[], value: string, onPick: (v: string) => unknown) =>
      Select ? (
        <Select key={key} options={options} value={value} onSelect={v => void onPick(v)} />
      ) : (
        <Box key={key} flexDirection="row" flexWrap="wrap" gap={1}>
          {options.map(o => (
            <Button key={`${key}-${o.value}`} label={o.label} variant={o.value === value ? 'primary' : undefined} dimColor={o.value !== value} onPress={() => onPick(o.value)} />
          ))}
        </Box>
      )

    return (
      <Box flexDirection="column" gap={1} paddingX={1}>
        <Box flexDirection="row" alignItems="flex-start" gap={1}>
          <Box flexDirection="column" flexGrow={1} flexShrink={1}>
            <Text wrap="wrap">{last ? `Last reply: ${title(last.task)} → ${routeShort(last)}` : 'No reply routed yet.'}</Text>
            {last?.held.includes('model') ? <Text dimColor wrap="wrap">{`Kept off ${shortModel(last.wanted.model)} to save the cache. Start a prompt with @${modelWord(last.wanted.model) ?? 'opus'} to force it.`}</Text> : null}
          </Box>
          <Button key="router-on" label="On" variant={isOn ? 'primary' : undefined} dimColor={!isOn} onPress={() => update($, router, x => ({ ...x, mode: 'auto' }))} />
          <Button key="router-off" label="Off" variant={isOn ? undefined : 'primary'} dimColor={isOn} onPress={() => update($, router, x => ({ ...x, mode: 'off' }))} />
        </Box>

        <Box flexDirection="column" gap={1}>
          {section('Routes', 'model and effort for each kind of prompt')}
          {TASKS.map((k: string) => {
            const x = r.routes[k] ?? { model: null, effort: null }
            return (
              <Box key={`route-${k}`} flexDirection="column">
                <Text wrap="wrap">
                  <Text bold>{title(k)}</Text>
                  <Text dimColor>{`  ${(TASK_INFO as Record<string, string>)[k]}`}</Text>
                </Text>
                <Box flexDirection="row" flexWrap="wrap" gap={1}>
                  {picker(`${k}-model`, modelOptions, modelValue(x.model), v => setRoute($, k, { model: v === 'keep' ? null : ((MODELS as Record<string, string>)[v] ?? null) }))}
                  {x.model && !takesEffort(x.model) ? <Text dimColor>No effort setting</Text> : picker(`${k}-effort`, effortOptions, x.effort ?? 'keep', v => setRoute($, k, { effort: v === 'keep' ? null : v }))}
                </Box>
              </Box>
            )
          })}
        </Box>

        <Box flexDirection="column" gap={1}>
          {section('Your rules', 'checked first')}
          {r.rules.length === 0 ? <Text dimColor wrap="wrap">No rules yet. Pick a model and effort, type the words, press Add rule.</Text> : null}
          {r.rules.map(rule => (
            <Box key={`rule-${rule.words[0]}`} flexDirection="row" alignItems="flex-start" gap={1}>
              <Box flexGrow={1} flexShrink={1}>
                <Text wrap="wrap">{rule.words.join(', ')}</Text>
              </Box>
              <Text bold color={MODEL_COLOR[modelWord(rule.route.model) ?? 'keep']}>{routeShort(rule.route)}</Text>
              <Button key={`rule-x-${rule.words[0]}`} plain dimColor label="✕" onPress={() => removeRule($, rule.words[0] ?? '')} />
            </Box>
          ))}
          {Input ? (
            <Box flexDirection="column" gap={1}>
              <Box flexDirection="row" flexWrap="wrap" gap={1}>
                {picker('rule-model', modelOptions, draft.model, v => update($, ruleDraft, x => ({ ...x, model: v })))}
                {draft.model !== 'keep' && !takesEffort((MODELS as Record<string, string>)[draft.model] ?? '') ? <Text dimColor>No effort setting</Text> : picker('rule-effort', effortOptions, draft.effort, v => update($, ruleDraft, x => ({ ...x, effort: v })))}
              </Box>
              <Input
                key="rule-add"
                placeholder="words, for example landing page, redesign"
                submitLabel="Add rule"
                onSubmit={v => {
                  // "words = model effort" typed in full still works; otherwise the dropdowns give the route
                  const rule = v.includes('=') ? parseRule(v) : parseRule(`${v} = ${draft.model} ${draft.effort}`)
                  if (rule) void addRule($, rule)
                  else $.ui.toast('Type the words that should trigger the rule, for example landing page, then pick a model and effort above.')
                }}
              />
            </Box>
          ) : (
            <Text dimColor wrap="wrap">Add one with /route rule landing page = sonnet max</Text>
          )}
        </Box>

        <Box flexDirection="column" gap={1}>
          {section('Options')}
          <Box flexDirection="row" flexWrap="wrap" alignItems="center" gap={1}>
            <Box flexGrow={1} flexShrink={1}>
              <Text wrap="wrap">When still broken after xhigh, move to</Text>
            </Box>
            {picker('stuck', [{ value: 'max', label: 'Max, same model' }, { value: 'sonnet', label: 'Sonnet 5.5' }, { value: 'opus', label: 'Opus 5.5' }, { value: 'fable', label: 'Fable 5.1' }], modelWord(r.top) ?? 'max', v => setOption($, { top: v === 'max' ? null : v }))}
          </Box>
          <Box flexDirection="row" flexWrap="wrap" alignItems="center" gap={1}>
            <Box flexGrow={1} flexShrink={1}>
              <Text wrap="wrap">Cache saver: skip one-off model switches in long chats</Text>
            </Box>
            {picker('saver', [{ value: 'on', label: 'On' }, { value: 'off', label: 'Off' }], r.saver ? 'on' : 'off', v => setOption($, { saver: v === 'on' }))}
          </Box>
        </Box>

        <Box flexDirection="row" alignItems="center" gap={1}>
          <Box flexGrow={1} flexShrink={1}>
            <Text dimColor wrap="wrap">One prompt only: start it with @opus, @max or @hard</Text>
          </Box>
          <Button key="router-reset" label="Reset" dimColor onPress={() => clearRoutes($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const list = (await read($, isOpen)) ? await read($, plans) : []
    const c = await read($, cache)
    const now = await $.clock.now()
    const state = phase(c, now) as 'none' | MeterLook
    // under FREE_BELOW tokens a lapsed cache costs too little to take a row
    const hasMeter = c.show && !c.hidden && state !== 'none' && c.tokens >= FREE_BELOW
    if ((list.length === 0 && !hasMeter) || e.props.hasSurvey) return next(e)
    const meterTitle = state === 'cold' ? `Cache expired · next prompt re-reads ${k(c.tokens)}` : `Prompt cache · ${k(c.tokens)}${c.why && state !== 'live' ? ` · missed: ${c.why}` : ''}`
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    const Svg = 'Svg' in t ? t.Svg : null
    const total = Math.max(320, (e.props.bodyColumns || 100) * 8)
    // every bar has the same width and is pinned to the right edge (fixed-width percent, close button),
    // so rows line up whatever their titles; the slack goes into the gap after the title.
    // Desktop reports ~8 CSS px per column; glyph, gaps, percent and the close button take ~126 px.
    const titleWidth = Math.min(Math.round(total * 0.3), Math.max(...[...list.map(p => p.title), ...(hasMeter ? [meterTitle] : [])].map(s => Math.round(textWidth(s, 6.4)))))
    // the cache row shares every width with the bars, so the tracks line up; the Keep warm button takes ~96 px of the title's side
    const trackW = Math.max(120, Math.min(1400, total - titleWidth - 140 - (hasMeter ? 96 : 0)))

    // the cache row is a bar like the others: glyph, title, a pill track whose fill drains by itself, the time left,
    // a close button. Its drawing starts from the time left now, so nothing is redrawn each second
    const meter = () => {
      const left = leftMs(c, now)
      const life = TTL_MS[c.life]
      const color = METER_COLOR[state as MeterLook]
      const canWarm = state === 'low' || state === 'soon'
      const filled = state === 'live' ? 25 : Math.round(Math.min(1, left / life) * 25)
      const pct = state === 'live' ? 100 : Math.round(Math.min(1, left / life) * 100)
      const timeLeft = state === 'live' ? 'live' : leftLabel(left)

      return (
        <Box key="cache-row" flexDirection="row" alignItems="center" gap={1}>
          <Text color={color}>{STATE_GLYPH[METER_STATE[state as MeterLook]]}</Text>
          <Text wrap="truncate">{meterTitle}</Text>
          {canWarm ? <Button key="cache-warm" label="Keep warm" onPress={async () => $.ui.toast(await keepWarm($))} /> : null}
          <Box flexGrow={1} />
          {Svg ? (
            <Box key="cache-track" flexShrink={0}>
              <Svg source={meterSvg(trackW, state as MeterLook, left, life)} alt={`Prompt cache: ${state === 'live' ? 'in use' : state === 'cold' ? 'expired' : `${timeLeft} left, ${pct}%`}`} width={trackW} height={TRACK_H} />
            </Box>
          ) : (
            <Text>
              <Text color={color}>{'━'.repeat(filled)}</Text>
              <Text dimColor>{'─'.repeat(25 - filled)}</Text>
              <Text color={color}>{` ${timeLeft}`}</Text>
            </Text>
          )}
          <Text dimColor>{`${String(pct).padStart(3, FIGURE_SPACE)}%`}</Text>
          <Button
            key="cache-close"
            plain
            dimColor
            label="✕"
            onPress={async () => {
              await update($, cache, x => ({ ...x, hidden: true }))
              $.ui.toast('Cache row hidden for this session. /cache on brings it back.')
            }}
          />
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1}>
        {list.map(p => {
          const track = trackSvg(p, trackW)
          // the hover layer is rebuilt on every redraw anyway, so its clock is set from now each time
          const hover = track.overlay.replace(/\{\{T:(\d+)\}\}/g, (_, t: string) => Math.max(0, (now - Number(t)) / 1000).toFixed(1))
          const w = where(p)
          const pct = p.state === 'done' ? 100 : Math.round((Math.min(w.pos, w.total) / Math.max(1, w.total)) * 100)
          const color = STATE_COLOR[p.state]
          const stageName = p.stages[w.stage]?.name ?? ''
          const alt =
            p.state === 'done'
              ? `${p.title}: done, ${plural(w.total, 'step')}${p.endedAt ? ` in ${elapsed(p.endedAt - p.startedAt)}` : ''}`
              : `${p.title}: ${stageName}, step ${w.step} of ${w.stageSize}, ${pct}%${p.note ? ` — ${p.note}` : ''}`
          const bar = `${'━'.repeat(Math.round(pct / 4))}${'─'.repeat(25 - Math.round(pct / 4))}`

          return (
            <Box key={`bar-${p.id}`} flexDirection="row" alignItems="center" gap={1}>
              <Text color={color}>{STATE_GLYPH[p.state]}</Text>
              <Text wrap="truncate">{p.title}</Text>
              <Box flexGrow={1} />
              {Svg ? (
                <Box key={`track-${p.id}`} flexShrink={0}>
                  <Svg source={track.base} alt={alt} width={trackW} height={TRACK_H} />
                  <Box position="absolute" top={0} left={0}>
                    <Svg source={hover} alt={`${p.title}: hover for times`} width={trackW} height={TRACK_H} isInteractive />
                  </Box>
                </Box>
              ) : (
                <Text>
                  <Text color={color}>{bar.replace(/─/g, '')}</Text>
                  <Text dimColor>{bar.replace(/━/g, '')}</Text>
                  <Text color={color}>{` ${stageName} ${w.step}/${w.stageSize}`}</Text>
                </Text>
              )}
              <Text dimColor>{`${String(pct).padStart(3, FIGURE_SPACE)}%`}</Text>
              <Button key={`close-${p.id}`} plain dimColor label="✕" onPress={() => dropPlan($, p.id)} />
            </Box>
          )
        })}
        {hasMeter ? meter() : null}
      </Box>
    )
  })