launchpad

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const theirs = await next(e)
    if (e.props.hasSurvey || (await read($, placement)) !== 'prompt' || (await read($, isOff))) return theirs
    const list = await shown($)
    if (list.length === 0) return theirs
    const { Box, Text, Button } = $.ui.resolve(e)
    const icons = e.surface === 'terminal' ? style : 'emoji'
    const mine = (
      <Box key="launchpad" flexDirection="row" flexWrap="wrap" gap={2} paddingX={1}>
        <Text color="claude">✻</Text>
        {list.slice(0, MAX_SHOWN).map(p => (
          <Box key={`cell:${p.id}`}>
            <Button key={`pad:${p.id}`} plain label={buttonLabel(p, icons)} hover={{ backgroundColor: 'claude', ...LABEL_HOVER }} onPress={() => press($, p)} />
          </Box>
        ))}
        <Button key="band:settings" plain dimColor label={w.settings} onPress={() => pressVerb($, PAD_ACTIONS[0]!)} />
      </Box>
    )
    return theirs ? (
      <Box flexDirection="column">
        {theirs}
        {mine}
      </Box>
    ) : (
      mine
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    // The mobile app draws no field yet: there the catalog lists unfiltered.
    const Input = 'Input' in els ? els.Input : null
    const icons = e.surface === 'terminal' ? style : 'emoji'
    const all = await read($, catalog)
    const mine = await read($, menu)
    const theirs = available(await read($, project), all)
    const working = available(mine, all)
    const query = await read($, filter)
    const found = matches(all, mine, query)
    const mods = modsOf(all)
    // The catalog list takes the rows the rest leaves: hint, menu, project, headings, filter,
    // the scroll row, the footer and the gaps between them. The pane keeps it in view whole.
    // The Mods section: its heading and gap, a row of the installed, and the missing as bordered
    // buttons (3 rows a line) under their line of text.
    const installWidth = Math.max(0, ...mods.missing.map(m => cells(w.modsSection.install(m.plugin)) + 5))
    const perLine = Math.max(1, Math.floor((e.props.bodyColumns - 2) / Math.max(1, installWidth)))
    const modsRows = 2 + (mods.installed.length ? 1 : 0) + (mods.missing.length ? 1 + 3 * Math.ceil(mods.missing.length / perLine) : 0)
    const fixed = 10 + mine.length + (theirs.length ? theirs.length + 2 : 0) + modsRows
    const listRows = Math.max(5, e.props.scroll.bodyRows - fixed)
    const view = windowOf(found.length, await read($, offset), listRows)
    const nameWidth = Math.max(24, Math.min(44, Math.floor(e.props.bodyColumns * 0.4)))
    lastStart = Math.max(0, found.length - listRows)
    const scrollList = (by: number) => update($, offset, o => windowOf(found.length, o + by, listRows).start)
    const addTarget = async (t: Target) => {
      const why = await add($, padFor(t, await newId($), hints.get(t.name)))
      if (why) $.ui.toast(why)
    }

    return (
      <Box flexDirection="column" paddingX={1} gap={1}>
        <Text dimColor>{w.pane.hint}</Text>

        <Box flexDirection="column">
          <Text bold>{w.pane.menu(working.length)}</Text>
          {mine.map((p, i) => {
            // Numbered as /pad list and /pad remove number them: the buttons that work here.
            const n = working.indexOf(p) + 1
            return (
              <Box key={`menu:${p.id}`} flexDirection="row" gap={1}>
                <Text dimColor>{n > 0 ? String(n).padStart(2) : ' –'}</Text>
                <Box width={26}>
                  <Text wrap="truncate-end">{buttonLabel(p, icons)}</Text>
                </Box>
                <Box width={22}>
                  <Text dimColor={n > 0} color={n > 0 ? undefined : 'warning'} wrap="truncate-end">
                    {n > 0 ? p.text : `${p.text} ${w.pane.gone}`}
                  </Text>
                </Box>
                <Box width={2}>{i > 0 && <Button key={`up:${p.id}`} plain label="↑" onPress={() => editMenu($, list => moveId(list, p.id, -1))} />}</Box>
                <Box width={2}>
                  {i < mine.length - 1 && <Button key={`down:${p.id}`} plain label="↓" onPress={() => editMenu($, list => moveId(list, p.id, 1))} />}
                </Box>
                <Button
                  key={`remove:${p.id}`}
                  plain
                  dimColor
                  label={w.pane.remove}
                  onPress={() => editMenu($, list => list.filter(x => x.id !== p.id))}
                />
              </Box>
            )
          })}
        </Box>

        {theirs.length > 0 && (
          <Box flexDirection="column">
            <Text bold>{w.pane.project}</Text>
            {theirs.map((p, i) => (
              <Text key={`project:${p.id}`} dimColor wrap="truncate-end">{`${String(working.length + i + 1).padStart(2)} ${buttonLabel(p, icons)}  ${p.text}`}</Text>
            ))}
          </Box>
        )}

        <Box flexDirection="column">
          <Text bold>{w.pane.add}</Text>
          {working.length >= MAX_SHOWN ? (
            <Text color="warning">{w.pane.full}</Text>
          ) : (
            <Box flexDirection="column">
              {Input && (
                <Input
                  key="filter"
                  label={w.pane.filter}
                  placeholder={w.pane.placeholder}
                  value={query}
                  autoFocus
                  submitLabel={w.pane.plus}
                  onInput={async (value: string) => {
                    await update($, filter, () => value)
                    await update($, offset, () => 0)
                  }}
                  onSubmit={(value: string) => {
                    const first = matches(all, mine, value)[0]
                    if (first) addTarget(first)
                  }}
                />
              )}
              {found.length === 0 && <Text dimColor>{w.pane.none}</Text>}
              {found.slice(view.start, view.end).map(t => (
                <Box key={`find:${keyOf(t.kind, t.name)}`} flexDirection="row" gap={1}>
                  <Button key={`add:${keyOf(t.kind, t.name)}`} plain label={w.pane.plus} onPress={() => addTarget(t)} />
                  <Box width={nameWidth}>
                    <Text wrap="truncate-end">
                      {spell(t)}
                      {t.kind === 'command' && hints.has(t.name) && <Text dimColor>{` ${blanksOf(hints.get(t.name))}`}</Text>}
                    </Text>
                  </Box>
                  <Text dimColor wrap="truncate-end">
                    {t.description || w.kinds[t.kind]}
                  </Text>
                </Box>
              ))}
              {found.length > listRows && (
                <Box flexDirection="row" gap={2}>
                  <Button key="list:up" plain dimColor={view.start === 0} label={w.pane.up} onPress={() => scrollList(-listRows + 1)} />
                  <Button key="list:down" plain dimColor={view.end === found.length} label={w.pane.down} onPress={() => scrollList(listRows - 1)} />
                  <Text dimColor>{w.pane.range(view.start + 1, view.end, found.length)}</Text>
                </Box>
              )}
            </Box>
          )}
        </Box>

        <Box flexDirection="column">
          <Text bold>{w.modsSection.title}</Text>
          {mods.installed.length > 0 && (
            <Box flexDirection="row" flexWrap="wrap" gap={2}>
              {mods.installed.map(m => (
                <Text key={`has:${m.plugin}`}>
                  <Text color="success">✓ </Text>
                  {m.plugin}
                </Text>
              ))}
            </Box>
          )}
          {mods.missing.length === 0 && <Text dimColor>{w.modsSection.allInstalled}</Text>}
          {mods.missing.length > 0 && (
            <Box flexDirection="column">
              <Text dimColor>{w.modsSection.missing}</Text>
              <Box flexDirection="row" flexWrap="wrap" gap={1}>
                {mods.missing.map(m => control($, e, `install:${m.plugin}`, w.modsSection.install(m.plugin), () => fill($, installText(m.plugin))))}
              </Box>
            </Box>
          )}
        </Box>

        <Box flexDirection="row" gap={2}>
          <Button key="reset" label={w.pane.reset} onPress={() => saveMenu($, defaults(lang))} />
          <Button key="panel" label={w.modsSection.back} onPress={() => openPanel($)} />
          <Button key="close" role="dismiss" label={w.pane.close} onPress={() => $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })

function control(
  $: EngineInterface,
  e: { surface: string },
  key: string,
  label: string,
  onPress: () => unknown,
  opts: { isOn?: boolean; isWarned?: boolean; width?: number } = {},
) {
  if (e.surface === 'terminal') return boxButton($.ui.resolve({ ...e, surface: 'terminal' } as never) as Elements['terminal'], key, label, onPress, opts)
  const { Button, Text } = $.ui.resolve(e as never) as Elements['desktop']
  if (opts.isOn) {
    return (
      <Text key={`on:${key}`} color="claude" bold>
        {label}
      </Text>
    )
  }
  return <Button key={key} label={label} onPress={onPress} />
}