git-mod

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    paneOpen = true
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const cols = e.props.bodyColumns ?? 60
    const narrow = cols < 44
    const redraw = () => $.ui.invalidate('ui.render')
    const rule = () => Text({ dimColor: true, children: ['─'.repeat(Math.max(10, Math.min(cols, 200)))] })

    if (!loaded) {
      refresh($).catch(() => {})
      return Box({ flexDirection: 'column', children: [Text({ dimColor: true, children: ['Reading repository…'] })] })
    }

    if (!repo || repo.error) {
      return Box({
        flexDirection: 'column',
        children: [
          Text({ color: 'yellow', children: [repo?.error ?? 'No repository.'] }),
          Text({ dimColor: true, wrap: 'wrap', children: ['Start Claude Code inside a git repository, then press r.'] }),
          Button({ key: 'refresh', label: 'Refresh (r)', hotkey: 'r', onPress: () => runAction($, 'Refreshing', async () => {}) }),
        ],
      })
    }

    const out = []

    // --- branch header ---
    const branchName = repo.isDetached ? 'detached at ' + repo.oid.slice(0, 7) : repo.branch
    out.push(
      Box({
        flexDirection: 'row',
        columnGap: 1,
        children: [
          Text({ color: 'cyan', children: ['●'] }),
          Text({ bold: true, color: 'cyan', wrap: 'truncate-middle', children: [branchName] }),
        ],
      }),
    )
    const slash = repo.branch.lastIndexOf('/')
    if (slash > 0 && !repo.isDetached) {
      const group = repo.branch.slice(0, slash)
      out.push(
        Box({
          flexDirection: 'row',
          columnGap: 1,
          paddingLeft: 2,
          children: [
            Text({ color: 'black', backgroundColor: 'blue', children: [' ' + group + ' '] }),
            Text({ dimColor: true, children: ['↳ from'] }),
            Text({ color: 'blue', bold: true, wrap: 'truncate-middle', children: [parentOf.parent || 'unknown base'] }),
          ],
        }),
      )
    }
    if (!repo.isDetached) {
      const sync = repo.upstream
        ? [
            Text({ color: repo.ahead ? 'green' : undefined, dimColor: !repo.ahead, children: ['↑' + repo.ahead] }),
            Text({ color: repo.behind ? 'red' : undefined, dimColor: !repo.behind, children: ['↓' + repo.behind] }),
            Text({ dimColor: true, wrap: 'truncate-middle', children: [repo.upstream] }),
          ]
        : [Text({ color: 'yellow', dimColor: true, wrap: 'truncate-end', children: [repo.isUnborn ? 'no commits yet' : 'not pushed yet · push sets upstream'] })]
      out.push(Box({ flexDirection: 'row', columnGap: 1, paddingLeft: 2, children: sync }))
    }

    // --- action bar ---
    const staged = stagedFiles()
    const unstaged = unstagedFiles()
    out.push(
      Box({
        flexDirection: 'row',
        flexWrap: 'wrap',
        columnGap: 1,
        marginTop: 1,
        children: [
          Button({
            key: 'stash',
            label: 'Stash (s)',
            hotkey: 's',
            dimColor: !files.length,
            onPress: () => runAction($, 'Stashing (writing a title)', () => stash($)),
          }),
          Button({
            key: 'commit',
            label: 'Commit (c)',
            hotkey: 'c',
            dimColor: !staged.length,
            ...(staged.length && !draft ? { variant: 'primary' } : {}),
            onPress: () => {
              if (!staged.length) return setNotice($, 'info', 'Nothing is staged. Press Stage on the files to commit.')
              if (draft) return setNotice($, 'info', 'A message is already drafted below. Approve, edit or cancel it.')
              return runAction($, 'Writing commit message', () => generateCommitMessage($))
            },
          }),
          Button({
            key: 'pull',
            label: 'Pull (l)' + (repo.behind ? ' ↓' + repo.behind : ''),
            hotkey: 'l',
            dimColor: !repo.upstream,
            ...(repo.behind && !staged.length && !draft ? { variant: 'primary' } : {}),
            onPress: () => runAction($, 'Pulling', () => pull($)),
          }),
          Button({
            key: 'push',
            label: 'Push (p)' + (repo.ahead ? ' ↑' + repo.ahead : ''),
            hotkey: 'p',
            ...(repo.ahead && !repo.behind && !staged.length && !draft ? { variant: 'primary' } : {}),
            onPress: () => runAction($, 'Pushing', () => push($)),
          }),
          Button({ key: 'refresh', label: 'r', hotkey: 'r', plain: true, dimColor: true, onPress: () => runAction($, 'Refreshing', async () => {}) }),
        ],
      }),
    )

    if (busy) out.push(Text({ color: 'yellow', children: ['… ' + busy] }))

    // --- notice banner ---
    if (notice) {
      const color = notice.tone === 'ok' ? 'green' : notice.tone === 'error' ? 'red' : 'blue'
      const mark = notice.tone === 'ok' ? '✓ ' : notice.tone === 'error' ? '✕ ' : '● '
      out.push(
        Box({
          flexDirection: 'column',
          borderStyle: 'round',
          borderColor: color,
          paddingX: 1,
          marginTop: 1,
          children: [
            Text({ color, wrap: 'wrap', children: [mark + notice.text] }),
            Box({
              flexDirection: 'row',
              columnGap: 1,
              children: [
                ...(notice.hash
                  ? [Button({ key: 'copy-hash', label: 'Copy hash', plain: true, onPress: (p) => { $.ui.copy({ text: notice.hash, surface: p.surface }); $.ui.toast('Copied ' + notice.hash.slice(0, 10)) } })]
                  : []),
                Button({ key: 'dismiss', label: 'Dismiss', plain: true, dimColor: true, onPress: () => { notice = null; redraw() } }),
              ],
            }),
          ],
        }),
      )
    }

    // --- commit draft ---
    if (draft) {
      const d = draft
      const body = d.isEditing
        ? [
            Input({
              key: 'edit-subject',
              label: 'Subject ',
              value: d.subject,
              placeholder: 'Short imperative summary',
              submitLabel: 'save',
              autoFocus: true,
              onInput: (v) => { d.subject = v },
              onSubmit: (v) => { d.subject = v; redraw() },
            }),