sc-workspace

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = surfaceTable($.ui.resolve(e), e.surface)
    const { Box } = ui
    const bodyColumns = e.props.bodyColumns ?? 60
    // A reader page wraps at the pane's width, kept from every draw so a search hit opens at the right page.
    readerRoom = { rows: READER_PAGE_ROWS, columns: bodyColumns - 6 }
    // With another mod's pane open beside it, the engine draws a tab row above the header.
    const isUnderTabs = isBesideOtherPanes('sc-workspace', {
      'sc-accounts': (await $.state.get({ plugin: 'sc-accounts', key: 'paneOpen' })).value === true,
      'sc-workspace': (await $.state.get({ plugin: 'sc-workspace', key: 'paneOpen' })).value === true,
      'sc-toolbox': (await $.state.get({ plugin: 'sc-toolbox', key: 'paneOpen' })).value === true,
    })
    const header = {
      brand: paneTitle(MOD_NAME),
      ...releaseHeader(release, m.release, m.updateRequired),
      isUnderTabs,
      columns: bodyColumns,
      exit: { label: `✕ ${m.closeButton}`, onPress: () => void closePane($).catch((error: unknown) => $.ui.toast(message(error))) },
      backLabel: m.backButton,
    }
    // A dialog in progress takes the whole pane: the header, then the dialog.
    const asked = await read($, dialog)
    const dismiss = async () => {
      await update($, dialog, () => null)
      await update($, focused, () => null)
    }
    if (asked?.kind === 'base') {
      const now = await $.clock.now()
      const choices = baseChoices(await baseCandidates($), (await read($, diff))?.base, now, locale, m)

      return ChoiceDialog(
        ui,
        bodyColumns,
        header,
        m.baseTitle,
        choices.map(choice => ({
          ...choice,
          onPress: () => {
            void (async () => {
              await dismiss()
              if (!choice.isCurrent) await refreshDiff($, choice.base)
            })().catch((error: unknown) => $.ui.toast(message(error)))
          },
        })),
        { label: m.cancel, onPress: () => void dismiss().catch((error: unknown) => debug($, error)) },
        await read($, focused),
      )
    }
    if (asked?.kind === 'target') {
      const now = await $.clock.now()
      const view = await read($, diff)
      if (view) {
        const candidates = (await baseCandidates($)).map(({ since: _since, ...point }) => point)

        return ChoiceDialog(
          ui,
          bodyColumns,
          header,
          m.targetTitle,
          targetChoices(candidates, view, now, locale, m).map(choice => ({
            ...choice,
            onPress: () => {
              void (async () => {
                await dismiss()
                if (!choice.isCurrent) await refreshDiff($, undefined, choice.target)
              })().catch((error: unknown) => $.ui.toast(message(error)))
            },
          })),
          { label: m.cancel, onPress: () => void dismiss().catch((error: unknown) => debug($, error)) },
          await read($, focused),
        )
      }
    }
    if (asked?.kind === 'diff') {
      const view = await read($, diff)
      const files = view?.files ?? []
      const at = files.findIndex(one => one.path === asked.ref)
      const file = files[at]
      const selected = view?.selected?.path === asked.ref ? view.selected : undefined
      if (view && file && selected) {
        // Whole hunks on every page, each under a header of its own, so every page draws as a diff.
        const pages = diffPages(selected.text, DIFF_PAGE_LINES)
        const count = pages.length
        const index = Math.min(Math.max(0, await read($, diffPage)), count - 1)
        const turn = (step: number) => () => {
          void update($, diffPage, () => index + step).catch((error: unknown) => debug($, error))
        }
        const open = (path: string) => () => void openFile($, path).catch((error: unknown) => $.ui.toast(message(error)))
        const previousFile = files[at - 1]
        const nextFile = files[at + 1]
        const counts = file.added === null ? m.binary : `+${file.added} −${file.removed ?? 0}`
        const omitted = selected.omitted > 0 && index === count - 1 ? ` · ${m.linesOmitted(selected.omitted)}` : ''

        return CodeDialog(
          ui,
          bodyColumns,
          header,
          file.path,
          `${counts} · ${m.diffDialogSince(view.base.label)}${omitted}`,
          { source: pages[index] ?? '', format: 'diff', path: file.path, empty: m.binary },
          { index, count, label: m.readerPage(index + 1, count) },
          {
            previous: { label: m.readerPrevious, onPress: turn(-1) },
            next: { label: m.readerNext, onPress: turn(1) },
            extra: [
              ...(previousFile ? [{ key: 'diff-previous-file', label: m.diffPreviousFile, onPress: open(previousFile.path) }] : []),
              ...(nextFile ? [{ key: 'diff-next-file', label: m.diffNextFile, onPress: open(nextFile.path) }] : []),
              // Only the working tree can be written back: a file compared between two checkpoints, or another worktree's, has no restore.
              ...(!view.target && !view.worktree ? [{ key: 'diff-file-restore', label: m.diffRestoreFile, onPress: () => void update($, dialog, () => ({ kind: 'file', ref: file.path })).catch((error: unknown) => debug($, error)) }] : []),
            ],
            close: { label: m.closeButton, onPress: () => void dismiss().catch((error: unknown) => debug($, error)) },
          },
          await read($, focused),
        )
      }
    }
    if (asked?.kind === 'memoryRead') {
      const file = (await read($, memory))?.find(one => one.path === asked.ref)
      const text = memoryTexts.get(asked.ref)
      if (file && text !== undefined) {
        const pages = markdownPages(text, readerRoom)
        const index = Math.min(Math.max(0, await read($, memoryPage)), pages.length - 1)
        const front = frontmatterOf(text)
        const turn = (step: number) => () => {
          void update($, memoryPage, () => index + step).catch((error: unknown) => debug($, error))
        }
        // An auto-memory file leads with its name and description; its frontmatter is not drawn.
        const lead = front.name ? `**${front.name}**${front.description ? `: ${front.description}` : ''}\n\n` : ''

        return ReaderDialog(
          ui,
          bodyColumns,
          header,
          file.display,
          m.readerSubtitle(file.path.replace(home ?? '\u0000', '~'), m.memoryKind[file.kind], m.memoryLines(file.lines)),
          // Lines wrapped in the file read as the paragraphs they are.
          reflow(index === 0 ? `${lead}${pages[index]?.text ?? ''}` : (pages[index]?.text ?? '')),
          { index, count: pages.length, label: m.readerPage(index + 1, pages.length) },
          {
            previous: { label: m.readerPrevious, onPress: turn(-1) },
            next: { label: m.readerNext, onPress: turn(1) },
            close: { label: m.closeButton, onPress: () => void dismiss().catch((error: unknown) => debug($, error)) },
          },
          await read($, focused),
        )
      }
    }
    if (asked?.kind === 'memoryScope') {
      const current = await read($, memoryScope)
      const scopes = ['all', 'global', 'project'] as const

      return ChoiceDialog(
        ui,
        bodyColumns,
        header,
        m.memoryScopeTitle,
        scopes.map(scope => ({
          key: `memory-scope-${scope}`,
          label: m.memoryScope[scope],
          isCurrent: scope === current,

export function ChoiceDialog(
  ui: ElementTable,
  bodyColumns: number,
  header: HeaderInfo,
  title: string,
  choices: Choice[],
  cancel: { label: string; onPress: () => void },
  /** The key of the element holding the keyboard, so the Cancel tile can show it. */
  focused: string | null = null,
) {
  const { Box, Text } = ui
  // Every row is one line: the details share one column at the right, and the labels
  // take what is left of the dialog's width and are cut to it, never wrapped.
  const details = choices.map(choice => (choice.detail === undefined ? undefined : printable(choice.detail)))
  const detailWidth = Math.max(0, ...details.map(detail => displayWidth(detail ?? '')))
  const labelRoom = Math.max(6, bodyColumns - CARD_CHROME - 2 - (detailWidth > 0 ? detailWidth + 1 : 0))
  const labels = choices.map(choice => truncate(printable(choice.label).replace(/\s+/g, ' ').trim(), labelRoom))
  const labelWidth = Math.max(0, ...labels.map(displayWidth))

  return DialogFrame(
    ui,
    dialogHeader(header, cancel.onPress),
    theme.accent,
    title,
    <Box key="dialog-choices" flexDirection="column" marginTop={1}>
      {choices.map((choice, index) => (
        <Box key={`choice-${choice.key}`} gap={1}>
          <Text color={choice.isCurrent ? theme.accent : undefined} dimColor={!choice.isCurrent}>
            {choice.isCurrent ? '●' : '○'}
          </Text>
          {LinkButton(ui, choice.key, padCells(labels[index] ?? '', labelWidth), choice.onPress, { autoFocus: choice.isCurrent === true })}
          {details[index] && (
            <Box flexShrink={0}>
              <Text dimColor wrap="truncate-end">
                {details[index]}
              </Text>
            </Box>
          )}
        </Box>
      ))}
    </Box>,
    Tiles(ui, Math.max(20, bodyColumns - CARD_CHROME), [{ key: 'dialog-cancel', label: cancel.label, isDismiss: true, onPress: cancel.onPress }], {
      focused,
    }),
  )
}

export function DialogFrame(
  ui: ElementTable,
  header: HeaderInfo,
  borderColor: string,
  title: string,
  body: ReturnType<typeof Header>,
  tiles: ReturnType<typeof Tiles>,
) {
  const { Box, Text } = ui

  return (
    <Box key="dialog-pane" flexDirection="column">
      {Header(ui, header)}
      <Box key="dialog" flexDirection="column" borderStyle="round" borderColor={borderColor} paddingX={1}>
        <Text bold>{printable(title)}</Text>
        {body}
        {tiles}
      </Box>
    </Box>
  )
}

export function LinkButton(ui: ElementTable, key: string, label: string, onPress: () => void, extra: { autoFocus?: boolean } = {}) {
  const { Button } = ui

  return <Button key={key} label={printable(label)} plain hover={{ color: theme.accent, bold: true }} {...(extra.autoFocus ? { autoFocus: true as const } : {})} onPress={onPress} />
}

export function Tiles(ui: ElementTable, bodyColumns: number, given: Tile[], outline?: { focused: string | null }) {
  const { Box, Button } = ui
  if (given.length === 0) return null
  const tiles = given.map(tile => ({ ...tile, label: printable(tile.label) }))
  // A remote surface's own buttons, sharing the row and wrapping by its own measure; the main one in its
  // primary look. The surface shows the keyboard's place itself, and Cancel stays a labelled button
  // (`role: dismiss` would turn it into the site's close mark).
  if (!isCellGrid(ui)) {
    return (
      <Box key="footer" marginTop={1} columnGap={1} rowGap={1} flexWrap="wrap">
        {tiles.map(tile => (
          <Box key={`tile-${tile.key}`} flexGrow={1} flexShrink={0}>
            <Button
              key={tile.key}
              label={tile.label}
              {...(tile.isMain ? { variant: 'primary' as const } : {})}
              {...(tile.isFocused ? { autoFocus: true as const } : {})}
              onPress={tile.onPress}
            />
          </Box>
        ))}
      </Box>
    )
  }
  const needed = Math.max(...tiles.map(tile => displayWidth(tile.label))) + TILE_PADDING * 2
  const perRow = Math.max(1, Math.min(tiles.length, Math.floor((bodyColumns + TILE_GAP) / (needed + TILE_GAP))))
  const width = Math.max(needed, Math.floor((bodyColumns - TILE_GAP * (perRow - 1)) / perRow))
  const rows: Tile[][] = []
  for (let start = 0; start < tiles.length; start += perRow) rows.push(tiles.slice(start, start + perRow))

  return (
    <Box key="footer" flexDirection="column" marginTop={1} rowGap={1}>
      {rows.map((row, index) => (
        <Box key={`footer-row-${index}`} gap={TILE_GAP}>
          {row.map(tile => (
            <Box
              key={`tile-${tile.key}`}
              width={width}
              justifyContent="center"
              alignItems="center"
              backgroundColor={tile.isMain ? theme.tileMain : theme.tile}
              hover={{ backgroundColor: theme.tileHover }}
              // Outlined tiles show where the keyboard is: the focused one in the accent colour.
              {...(outline
                ? outline.focused === tile.key
                  ? { borderStyle: 'round', borderColor: theme.accent }
                  : { borderStyle: 'round', borderColor: 'gray', borderDimColor: true }
                : {})}
            >
              <Button
                key={tile.key}
                label={tile.label}
                plain
                {...(tile.isDismiss ? { role: 'dismiss' as const } : {})}
                {...(tile.isFocused ? { autoFocus: true as const } : {})}
                onPress={tile.onPress}
              />
            </Box>
          ))}
        </Box>
      ))}
    </Box>
  )
}

export function Header(ui: ElementTable, header: HeaderInfo) {
  const { Box, Button, Text } = ui
  const brand = printable(header.brand)
  const release = header.release === undefined ? undefined : printable(header.release)
  const exit = header.exit ? { ...header.exit, label: printable(header.exit.label) } : undefined
  if (!isCellGrid(ui)) {
    return (
      <Box key="header" justifyContent="space-between" alignItems="center" marginTop={header.isUnderTabs ? 1 : 0}>
        <Text bold wrap="truncate-end">
          {brand}
        </Text>
        <Box gap={2} flexShrink={0} alignItems="center">
          {release !== undefined && (header.isReleaseOutdated ? <Text color={theme.warn}>{release}</Text> : <Text dimColor>{release}</Text>)}
          {exit?.isBack && <Button key="close" label={exit.label} onPress={exit.onPress} />}
        </Box>
      </Box>
    )
  }
  const exitWidth = exit ? displayWidth(exit.label) + 2 : 0
  const room = (header.columns ?? 80) - displayWidth(brand) - exitWidth - 2
  const isReleaseShown = release !== undefined && displayWidth(release) <= room

  return (
    <Box key="header" justifyContent="space-between" marginTop={header.isUnderTabs ? 1 : 0}>
      <Text bold wrap="truncate-end">
        {brand}
      </Text>
      <Box gap={2} flexShrink={0}>
        {isReleaseShown && (header.isReleaseOutdated ? <Text color={theme.warn}>{release}</Text> : <Text dimColor>{release}</Text>)}
        {exit && (
          <Box key="header-exit-ground" paddingX={1} flexShrink={0} backgroundColor={theme.tile} hover={{ backgroundColor: theme.tileHover }}>
            <Button key="close" label={exit.label} plain role="dismiss" onPress={exit.onPress} />
          </Box>
        )}
      </Box>
    </Box>
  )
}