github-issues

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Button, Link, Markdown, Text } = table
    const Input = 'Input' in table ? table.Input : undefined
    const Select = 'Select' in table ? table.Select : undefined
    // The terminal's table answers Svg with an element that draws nothing, so ask the surface.
    const Svg = e.surface !== 'terminal' && 'Svg' in table ? table.Svg : undefined
    const now = await $.clock.now()
    const busy = (text: string) => (
      <Box flexDirection="row" columnGap={1} alignItems="center">
        {Svg === undefined ? (
          <Text color="claude">{spinnerFrame(now)}</Text>
        ) : (
          <Svg source={SPINNER_SVG} alt="Loading" width={14} height={14} isInteractive />
        )}
        <Text dimColor>{text}</Text>
      </Box>
    )

    if ((await read($, view)) === 'repos') {
      const { here, repos: choices, load: status } = await read($, picker)
      const shown = (await read($, page)).repo
      const typed = await read($, query)
      const sections = byOwner(choices, here, typed)
      const isSessionShown = here !== null && matchesQuery(here, typed)
      const isEmpty = sections.length === 0 && !isSessionShown

      const row = (name: string, label: string) => (
        <Box key={`repo:${name}`} flexDirection="row" columnGap={2}>
          <Button
            key={pickKey(name)}
            label={name === shown ? `● ${label}` : label}
            plain
            onPress={() => void chooseRepo($, name)}
          />
          <Text dimColor wrap="truncate-end">
            {repoMeta(
              choices.find(one => one.name === name),
              now,
            )}
          </Text>
        </Box>
      )

      return (
        <Box flexDirection="column">
          <Box flexDirection="row" justifyContent="space-between">
            <Text bold>Choose a repository</Text>
            {shown !== null && <Button key="back" label="Back" plain onPress={() => void backToIssues($)} />}
          </Box>
          {Input !== undefined && (
            <Box marginTop={1}>
              <Input
                key="repo-filter"
                placeholder="Filter, or type owner/name"
                value={typed}
                submitLabel="open"
                onInput={text => void setQuery($, text)}
                onSubmit={text => void submitQuery($, text)}
              />
            </Box>
          )}
          {status.kind !== 'ready' && (
            <Box marginTop={1}>
              {status.kind === 'error' ? (
                <Text dimColor wrap="wrap">
                  {status.message}
                </Text>
              ) : (
                busy(choices.length > 0 ? 'Refreshing…' : 'Loading repositories…')
              )}
            </Box>
          )}
          {isSessionShown && (
            <Box flexDirection="column" marginTop={1}>
              <Text dimColor bold>
                This session
              </Text>
              {row(here, here)}
            </Box>
          )}
          {sections.map(section => (
            <Box key={`owner:${section.owner}`} flexDirection="column" marginTop={1}>
              <Text dimColor bold>
                {section.owner}
              </Text>
              {section.repos.map(choice => row(choice.name, choice.name.slice(section.owner.length + 1)))}
            </Box>
          ))}
          {status.kind === 'ready' && isEmpty && (
            <Box marginTop={1}>
              <Text dimColor wrap="wrap">
                {isRepoName(typed.trim())
                  ? `Press Enter to open ${typed.trim()}.`
                  : typed === ''
                    ? 'No repositories found. Run /issues owner/name.'
                    : 'No match. Type owner/name and press Enter to open any repository.'}
              </Text>
            </Box>
          )}
        </Box>
      )
    }

    const { repo: shown, scope, load: status, issues: list, total, labels, assigned } = await read($, page)
    const opened = await read($, open)
    const working = await read($, active)
    const draft = await read($, searchDraft)
    const noun = FILTERS.find(one => one.id === scope.filter)?.noun ?? scope.filter
    const counted = `${total > list.length ? `${list.length} of ${total}` : list.length} ${noun}`
    const narrowing = [
      scope.search === '' ? '' : `matching "${scope.search}"`,
      scope.label === '' ? '' : `label ${scope.label}`,
    ].filter(Boolean)
    const labelChoices = labelOptions(labels, list, scope.label)
    // A card's inside: the pane's width less its border and padding.
    const rule = Math.max(1, e.props.bodyColumns - 4)
    const [owner, name] = shown === null ? [null, null] : (shown.split('/') as [string, string])
    // Labels are pills in one SVG where the surface draws SVG; on the terminal, dots and names.
    // A cell is about 7.5 CSS pixels wide on the surfaces that draw SVG.
    const pillsWidth = Math.max(160, Math.min(360, Math.floor(rule * 7.5)))
    const chipsOf = (shownLabels: readonly IssueLabel[]) => {
      if (Svg === undefined) {
        return shownLabels.map(one => (
          <Box flexDirection="row">
            <Text color={labelDot(one.color)}>●</Text>
            <Text>{` ${one.name}`}</Text>
          </Box>
        ))
      }
      const pills = labelPills(shownLabels, pillsWidth)

      return [
        <Svg
          source={pills.source}
          alt={`Labels: ${shownLabels.map(one => one.name).join(', ')}`}
          width={pills.width}
          height={pills.height}
        />,
      ]
    }

    const top = (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between" columnGap={2}>
          <Box flexDirection="row" flexShrink={1}>
            {owner === null ? (
              <Text bold>No repository</Text>
            ) : (
              <Text dimColor wrap="truncate-end">{`${owner} / `}</Text>
            )}
            {name !== null && (
              <Text bold wrap="truncate-end">
                {name}
              </Text>
            )}
          </Box>
          <Box flexDirection="row" columnGap={2} flexShrink={0}>
            <Button key="switch" label="Switch repo" plain onPress={() => void showRepos($)} />
            <Button key="refresh" label="Refresh" plain onPress={() => void rescope($, {})} />