tidemark

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const snap = await read($, snapshotState)
    const { config, error } = effectiveConfig(await read($, configState))
    const probes = await read($, probesState)
    const env = {
      cwd: await $.session.cwd().catch(() => undefined),
      home: await $.env.get('HOME').catch(() => undefined),
      agentId: e.props.view.agentId,
      configError: error !== undefined,
    }
    const now = await $.clock.now()
    const els = $.ui.resolve(e)
    let drawn: ReturnType<typeof drawBand> | undefined
    try {
      // The band's own padding takes a cell at each side.
      const lines = buildLines(config, snap, probes, e.props.bodyColumns - 2, now, env)
      const act = (what: Press) => { void press($, what, config).catch((err: unknown) => $.ui.toast(`tidemark: ${err instanceof Error ? err.message : String(err)}`)) }
      if (lines.length > 0) drawn = drawBand(els, e.surface, lines, config.style, snap.theme, config.style.buttons === false ? undefined : act)
    } catch (err) {
      // A band that cannot be drawn is left out; what is drawn below stays.
      $.ui.log(`band: ${err instanceof Error ? err.message : String(err)}`, { to: 'debug' })
      drawn = undefined
    }
    // From `compact.at` percent of the main conversation's window, offer `/compact`; the engine compacts
    // only between turns, so the button waits while one runs.
    const pct = snap.ctx?.percent
    const offer = config.compact.enabled && !env.agentId && !e.props.isWorking && pct !== undefined && pct >= config.compact.at
    const button = offer && (
      <els.Box flexDirection="row" paddingX={1}>
        <els.Button
          key="tidemark-compact"
          label={`/compact · context ${Math.round(pct)}%`}
          hotkey="c"
          variant="primary"
          onPress={() => compact($)}
        />
      </els.Box>
    )
    const below = await next(e)
    if (drawn === undefined && !button) return below
    return <els.Box flexDirection="column">{drawn}{button}{below}</els.Box>
  })

  on('ui.render', { component: 'Pane', requestId: EDITOR }, async ($, e) => {
    if (e.surface === 'mobile') return noFields($.ui.resolve(e))
    const els = $.ui.resolve(e)
    const { Box, Text, Button, Input, Select } = els
    const loaded = effectiveConfig(await read($, configState))
    const ed = await read($, editorState)
    const draft = ed.draft ?? loaded.config
    const snap = await read($, snapshotState)
    const preview = buildLines(draft, snap, await read($, probesState), e.props.bodyColumns - 2, await $.clock.now(), {
      cwd: await $.session.cwd().catch(() => undefined),
      home: await $.env.get('HOME').catch(() => undefined),
    })
    const sel = ed.selected
    const item = sel ? draft.lines[sel.line]?.[sel.index] : undefined

    const err = (field: string) => ed.errors[field] !== undefined && <Box key={`err-${field}`}><Text color="red">{`  ${ed.errors[field]}`}</Text></Box>
    const head = (text: string) => <Box marginTop={1}><Text bold>{text}</Text></Box>
    const field = (key: string, label: string, value: string, fn: (c: TidemarkConfig, s: Selection | null, text: string) => Edit) => (
      <Box flexDirection="column">
        <Input key={key} label={label} value={value} submitLabel="set" onSubmit={text => edit($, key, (c, s) => fn(c, s, text))} />
        {err(key)}
      </Box>
    )
    const pick = (key: string, label: string, value: string | undefined, options: { value: string; label?: string }[], fn: (v: string) => unknown) => (
      <Box flexDirection="column">
        <Select key={key} label={label} options={options} {...(value !== undefined && { value })} onSelect={v => fn(v)} />
        {err(key)}
      </Box>
    )

    return (
      <Box flexDirection="column">
        <Text dimColor>Preview</Text>
        {preview.length > 0 ? drawBand(els, e.surface, preview, draft.style, snap.theme) : <Text dimColor>  (nothing to show yet)</Text>}
        <Text dimColor>{`sources: ${loaded.sources.length > 0 ? loaded.sources.join(' + ') : 'default'}`}</Text>
        {loaded.error !== undefined && <Text color="red">{`error: ${loaded.error}`}</Text>}
        {loaded.warnings.map(w => <Text dimColor>{`warning: ${w}`}</Text>)}

        {head('Lines')}
        {draft.lines.map((line, l) => (
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            <Text dimColor>{`${l + 1}`}</Text>
            {line.map((it, i) => (
              <Button
                key={`w-${l}-${i}`}
                label={it.enabled === false ? `${it.widget} (off)` : it.widget}
                dimColor={it.enabled === false}
                {...(sel?.line === l && sel.index === i && { variant: 'primary' as const })}
                onPress={() => update($, editorState, s => ({ ...s, selected: { line: l, index: i } }))}
              />
            ))}
          </Box>
        ))}
        {err('lines')}
        {item && sel && (
          <Box flexDirection="column">
            <Text>{`${WIDGETS[item.widget].title} (${item.widget})`}</Text>
            <Box flexDirection="row" flexWrap="wrap" gap={1}>
              <Button key="left" label="←" onPress={() => edit($, 'lines', selected((c, s) => moveItem(c, s, 'left')))} />
              <Button key="right" label="→" onPress={() => edit($, 'lines', selected((c, s) => moveItem(c, s, 'right')))} />
              <Button key="up" label="line up" onPress={() => edit($, 'lines', selected((c, s) => moveItem(c, s, 'up')))} />
              <Button key="down" label="line down" onPress={() => edit($, 'lines', selected((c, s) => moveItem(c, s, 'down')))} />
              <Button key="toggle" label={item.enabled === false ? 'enable' : 'disable'} onPress={() => edit($, 'lines', selected(toggleItem))} />
              <Button key="remove" label="remove" onPress={() => edit($, 'lines', selected(removeItem))} />
              <Button key="label-none" label="no label" onPress={() => edit($, 'label', selected((c, s) => setLabel(c, s, null)))} />
            </Box>
            {field('priority', 'priority', String(item.priority ?? WIDGETS[item.widget].defaultPriority), selected2(setPriority))}
            {field('label', item.label === null ? 'label (none)' : 'label', item.label ?? '', selected2((c, s, t) => setLabel(c, s, t === '' ? undefined : t)))}
            {Object.entries(WIDGET_OPTIONS[item.widget]).map(([name, spec]) => {
              const key = `opt-${name}`
              const value = optionText(spec, item.options?.[name])
              const set = selected2((c, s, t) => setOption(c, s, name, t))
              if (spec.kind === 'bool') return pick(key, name, value, onOff, v => edit($, key, (c, s) => set(c, s, v)))
              if (spec.kind === 'enum') return pick(key, name, value, spec.values.map(v => ({ value: v })), v => edit($, key, (c, s) => set(c, s, v)))
              return field(key, name, value, set)
            })}
          </Box>
        )}

        {head('Add widget')}
        {pick('add', 'add', undefined, WIDGET_IDS.map(id => ({ value: id, label: WIDGETS[id].title })), v =>
          edit($, 'add', (c, s) => addItem(c, v as TidemarkWidgetId, s?.line ?? c.lines.length - 1)))}

        {head('Style')}
        {pick('separator', 'separator', draft.style.separator, SEPARATORS.map(value => ({ value })), v =>
          edit($, 'separator', c => setStyle(c, { separator: v as TidemarkConfig['style']['separator'] })))}
        {draft.style.separator === 'custom' && field('custom', 'custom separator', draft.style.custom ?? '', (c, _s, t) => setStyle(c, { custom: t }))}
        {pick('icons', 'icons', draft.style.icons, ICONS.map(value => ({ value, ...(value === 'nerd' && { label: 'nerd font' }) })), v =>
          edit($, 'icons', c => setStyle(c, { icons: v as TidemarkConfig['style']['icons'] })))}
        {pick('buttons', 'buttons', draft.style.buttons === false ? 'off' : 'on', [{ value: 'on' }, { value: 'off' }], v =>
          edit($, 'buttons', c => setStyle(c, { buttons: v === 'on' })))}

        {head('Pane sections')}
        {draft.pane.sections.map(s => (
          <Box flexDirection="row" gap={1}>
            <Text>{s.id}</Text>
            <Button key={`sec-${s.id}`} label={s.enabled ? 'on' : 'off'} onPress={() => edit($, 'sections', c => toggleSection(c, s.id))} />
            <Button key={`sec-${s.id}-up`} label="↑" onPress={() => edit($, 'sections', c => raiseSection(c, s.id))} />
          </Box>
        ))}

        {head('Alerts')}
        {pick('alerts-enabled', 'toasts', draft.alerts.enabled ? 'on' : 'off', onOff, v =>
          edit($, 'alerts-enabled', c => ({ config: { ...c, alerts: { ...c.alerts, enabled: v === 'on' } } })))}
        {([['context', 'context %'], ['quota5h', '5h quota %'], ['quota7d', '7d quota %'], ['cacheSeconds', 'cache cold in, s']] as const).map(([k, label]) =>
          field(`alerts-${k}`, label, String(draft.alerts[k]), (c, _s, t) => setAlert(c, k, t)))}

        {head('Compact button')}
        {pick('compact-enabled', 'button', draft.compact.enabled ? 'on' : 'off', onOff, v =>
          edit($, 'compact-enabled', c => ({ config: { ...c, compact: { ...c.compact, enabled: v === 'on' } } })))}
        {field('compact-at', 'from context %', String(draft.compact.at), (c, _s, t) => setCompactAt(c, t))}

        {head('Presets')}
        {pick('preset', 'preset', undefined, Object.keys(PRESETS).map(value => ({ value })), v =>
          edit($, 'preset', () => (PRESETS[v] ? { config: PRESETS[v]!, selected: null } : { error: `unknown preset ${v}` })))}

        {head('Save')}
        {pick('target', 'save to', ed.target, [{ value: 'global' }, { value: 'project' }], v =>
          update($, editorState, (s): TidemarkEditor => ({ ...s, target: v === 'project' ? 'project' : 'global', confirm: false })))}
        <Box flexDirection="row" gap={1}>
          <Button key="save" label={ed.confirm ? 'Save (overwrite)' : 'Save'} variant="primary" onPress={() => save($)} />
          <Button key="revert" label="Revert" onPress={() => update($, editorState, s => ({ ...EMPTY_EDITOR, target: s.target }))} />
        </Box>
        {ed.draft !== null && <Text dimColor>unsaved changes</Text>}
        {ed.notice !== null && <Text>{ed.notice}</Text>}
      </Box>
    )
  })

export function noFields({ Box, Text }: Pick<Term, 'Box' | 'Text'>) {
  return <Box><Text dimColor>Open this in the terminal or the desktop app: the mobile app has no input fields.</Text></Box>
}

export function drawBand(els: Term | Rich, surface: Surface, lines: Line[], style: Style, theme: TidemarkTheme, act?: OnPress) {
  const { Box } = els
  return (
    <Box flexDirection="column" paddingX={1} marginTop={surface === 'terminal' ? 1 : 0}>
      {lines.map(line => {
        const draw = (part: Line) => (surface === 'terminal' ? terminalLine(els as Term, part, style, theme, act) : richLine(els as Rich, part, style, theme, act))
        // `flex` segments split the line into groups spread across it: one flex puts what follows at the
        // right edge, two put the part between them in the middle, with equal gaps on both sides.
        const groups: Line[] = [[]]
        for (const seg of line) seg.widget === 'flex' ? groups.push([]) : groups[groups.length - 1]!.push(seg)
        if (groups.length === 1) return draw(line)
        return (
          <Box flexDirection="row" justifyContent="space-between">
            {groups.map(g => (g.length > 0 ? draw(g) : <Box />))}
          </Box>
        )
      })}
    </Box>
  )
}