commit-craft

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    const view = await read($, viewAtom)
    const draft = view === 'commit' ? await read($, commitAtom) : await read($, prAtom)
    const close = <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => quietly($.ui.close({ id: PANE }))} />
    if (draft === null) {
      return (
        <Box flexDirection="column">
          <Text bold>Commit craft</Text>
          <Text dimColor wrap="wrap">Run /commit-craft for a commit message, or /pr-desc for a pull request description.</Text>
          <Box marginTop={1}>{close}</Box>
        </Box>
      )
    }
    const kind = draft.kind
    const title = kind === 'commit' ? 'Commit message' : 'PR description'
    const spent = draft.calls > 0 ? `${draft.model} · ${plural(draft.calls, 'call')} · ${fmtTokens(draft.input)} in / ${fmtTokens(draft.output)} out · ${fmtUsd(draft.usd)}` : ''
    const regen = <Button key="regenerate" hotkey="r" label={draft.status === 'failed' ? 'Try again' : 'Regenerate'} onPress={() => quietly(regenerate($, kind))} />

    if (draft.status === 'nothing-staged') {
      return (
        <Box flexDirection="column">
          <Text bold>{title}</Text>
          <Text wrap="wrap">Nothing is staged. Stage what belongs in the commit (git add …), then run /commit-craft again.</Text>
          {draft.gitStatus !== '' && (
            <Box flexDirection="column" marginTop={1}>
              {draft.gitStatus.split('\n').slice(0, 40).map(line => (
                <Text wrap="truncate-end">{line === '' ? ' ' : line}</Text>
              ))}
            </Box>
          )}
          <Box gap={1} marginTop={1} flexWrap="wrap">
            <Button key="status" hotkey="g" variant="primary" label="Show git status" onPress={() => quietly(showGitStatus($))} />
            <Button key="regenerate" hotkey="r" label="Check again" onPress={() => quietly(regenerate($, 'commit'))} />
            {close}
          </Box>
        </Box>
      )
    }

    const head = (
      <Box flexDirection="column">
        <Text bold>{title}</Text>
        {draft.context !== '' && (
          <Text dimColor wrap="wrap">
            {kind === 'commit' ? `Style: ${draft.context}` : draft.context}
          </Text>
        )}
        {draft.facts !== '' && (
          <Text dimColor wrap="wrap">
            {draft.facts}
          </Text>
        )}
      </Box>
    )

    if (draft.status === 'drafting' || draft.status === 'failed') {
      return (
        <Box flexDirection="column">
          {head}
          {draft.status === 'drafting' ? <Text dimColor>{draft.progress || 'Working…'}</Text> : <Text color="red" wrap="wrap">{draft.error}</Text>}
          {spent !== '' && <Text dimColor>{spent}</Text>}
          <Box gap={1} marginTop={1} flexWrap="wrap">
            {draft.status === 'failed' && regen}
            {close}
          </Box>
        </Box>
      )
    }

    const copy = <Button key="copy" hotkey="y" label="Copy" onPress={press => quietly(copyDraft($, kind, press.surface))} />
    const edit = <Button key="edit" hotkey="e" label="Edit" onPress={press => quietly(editInPrompt($, kind, press.surface))} />

    if (kind === 'pr') {
      return (
        <Box flexDirection="column">
          {head}
          <Box marginTop={1} flexDirection="column">
            <Markdown text={draft.text.length > MARKDOWN_CHARS ? `${draft.text.slice(0, MARKDOWN_CHARS)}\n\n…` : draft.text} />
          </Box>
          <Text dimColor>{spent}</Text>
          <Text dimColor wrap="wrap">
            Nothing is pushed or opened: copy it, or Edit to ask Claude to open the pull request with it.
          </Text>
          <Box gap={1} marginTop={1} flexWrap="wrap">
            {copy}
            {edit}
            {regen}
            {close}
          </Box>
        </Box>
      )
    }

    const lines = draft.text.split('\n')
    const subject = lines[0] ?? ''
    const body = lines.slice(1).join('\n').replace(/^\n+/, '')
    let field: JSX.Element | null = null
    if (e.surface !== 'mobile' && draft.status === 'ready') {
      const { Input } = $.ui.resolve(e)
      field = (
        <Input
          key="subject"
          label="Subject "
          value={subject}
          submitLabel="keep"
          onInput={value => quietly(typeSubject($, value))}
          onSubmit={value => quietly(typeSubject($, value))}
        />
      )
    }
    return (
      <Box flexDirection="column">
        {head}
        <Box marginTop={1} flexDirection="column">
          <Text bold wrap="wrap">
            {subject}
          </Text>
          {body !== '' && (
            <Text wrap="wrap" dimColor>
              {body}
            </Text>
          )}
        </Box>
        {field}
        {subject.length > 72 && <Text color="yellow">{`The subject is ${subject.length} characters (most tools cut at 72).`}</Text>}
        {draft.error !== '' && (
          <Text color="red" wrap="wrap">
            {draft.error}
          </Text>
        )}
        {draft.status === 'committed' && <Text color="green">{`Committed ${draft.committed}.`}</Text>}
        {draft.status === 'committing' && <Text dimColor>Committing…</Text>}
        <Text dimColor>{spent}</Text>
        <Box gap={1} marginTop={1} flexWrap="wrap">
          {draft.status === 'ready' && <Button key="commit" hotkey="c" variant="primary" label="Commit" onPress={() => quietly(commitNow($))} />}
          {draft.status === 'ready' && edit}
          {draft.status === 'ready' && regen}
          {copy}
          {close}
        </Box>
      </Box>
    )
  })