session-links

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Asked first, and of every drawing: an empty band is exactly what a session just left looks like.
    const isMine = await isCurrent($)
    const all = await read($, links)
    const shown = all.filter(link => link.status !== 'dismissed').length

    if (e.props.hasSurvey || shown === 0 || !isMine) {
      return next(e)
    }

    const since = await read($, freshSince)
    const { Box, Button, Link, Text } = $.ui.resolve(e)
    const asked = await read($, armed)
    const floating = all.filter(link => link.status === 'floating').length
    const bulk = bulkLabels(floating, asked === ALL)
    const tail = bulk.reduce((cells, label) => cells + label.length, 0)
    const { rows, hidden } = seat(all, e.props.bodyColumns, Math.max(1, Math.min(MAX_ROWS, e.props.maxRows)), asked, tail)
    // A click reaches a Button only where the surface reports clicks: the
    // fullscreen terminal. On the main screen only the terminal's own
    // hyperlink answers a click, so the label is a Link there when one will
    // be drawn as a hyperlink, and a Button the keyboard presses otherwise.
    const hasClicks = e.surface === 'terminal' && e.viewport?.isFullscreen === true
    const isPressed = hasClicks || !(await drawsHyperlinks($, e.surface))
    const run = (what: string, work: () => Promise<unknown>) => () => quietly($, what, work)

    const chip = ({ link, id, label }: Chip) => {
      const isPinned = link.status === 'pinned'
      const isAsked = link.url === asked
      // The bar names what the standing question would take: this link, or every floating one.
      const isMarked = isAsked || (asked === ALL && !isPinned)

      return (
        <Box key={`chip:${id}`} flexDirection="row" flexShrink={0} marginRight={1}>
          <Text color={isMarked ? 'error' : barOf(link, since)}>▎</Text>
          <Button
            key={`pin:${id}`}
            plain
            dimColor={!isPinned}
            label={isPinned ? ' ★ ' : ' ☆ '}
            hover={{ color: 'warning' }}
            onPress={press => quietly($, 'pin', () => togglePin($, link, `pin:${id}`, press.requestId))}
          />
          {isPressed ? (
            <Button
              key={`open:${id}`}
              plain
              label={` ${label} `}
              hover={{ underline: true }}
              onPress={press => quietly($, 'open the browser', () => openInBrowser($, link.url, press.surface))}
            />
          ) : (
            <Link href={link.url} label={` ${label} `} />
          )}
          {!isPinned && (
            <Button
              key={`drop:${id}`}
              plain
              dimColor={!isAsked}
              label={isAsked ? ARMED_LABEL : DISMISS_LABEL}
              hover={{ color: 'error' }}
              onPress={run('dismiss', () => pressDismiss($, link.url))}
            />
          )}
        </Box>
      )
    }

    const own = (
      <Box flexDirection="column">
        {rows.map((row, at) => (
          <Box key={`row:${at}`} flexDirection="row">
            {row.map(chip)}
            {at === rows.length - 1 && bulk.length === 1 && (
              <Button
                key="bulk"
                plain
                dimColor
                label={bulk[0]}
                hover={{ color: 'error' }}
                onPress={press => quietly($, 'ask about every link', () => askAll($, 'bulk', press.requestId))}
              />
            )}
            {at === rows.length - 1 && bulk.length === 2 && (
              <Button key="bulk" plain label={bulk[0]} hover={{ color: 'error' }} onPress={run('dismiss every link', () => dismissAll($))} />
            )}
            {at === rows.length - 1 && bulk.length === 2 && (
              <Button
                key="bulk:list"
                plain
                label={bulk[1]}
                hover={{ color: 'error' }}
                onPress={run('dismiss every link and open the list', async () => {
                  await dismissAll($)
                  await openPane($)
                })}
              />
            )}
            {at === rows.length - 1 && (
              <Button
                key="all"
                plain
                dimColor
                label={hidden > 0 ? ` +${hidden} more ` : ' ≡ '}
                onPress={run('open the list', () => openPane($))}
              />
            )}
          </Box>
        ))}
      </Box>
    )

    // Other mods draw in this band too (status rows, confirmation controls):
    // the links stack over whatever the rest of the chain drew instead of replacing it.
    return (
      <Box flexDirection="column">
        {own}
        {await next(e)}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const all = (await isCurrent($)) ? await read($, links) : []
    const since = await read($, freshSince)
    const kit = $.ui.resolve(e)
    const columns = Math.max(24, e.props.bodyColumns)

    const isLinked = await drawsHyperlinks($, e.surface)

    const asked = await read($, armed)
    const editing = await read($, renaming)

    return listView($, kit, all, columns, since, isLinked, asked, editing)
  })

function listView(
  $: Engine,
  kit: Kit,
  all: readonly Link[],
  columns: number,
  since: number,
  isLinked: boolean,
  asked: string,
  editing: string,
) {
  const { Box, Button, Link, Text } = kit
  const Field = kit.Input
  const run = (what: string, work: () => Promise<unknown>) => () => quietly($, what, work)
  // A row's keys carry its link's address: unique across the sections, and
  // unmoved when a link changes section or the cap trims the list.
  const pinned = all.filter(link => link.status === 'pinned').sort(byPriority)
  const floating = all.filter(link => link.status === 'floating').sort(byPriority)
  const dismissed = all.filter(link => link.status === 'dismissed')
  const width = Math.max(8, columns - 4)

  const row = (link: Link) => (
    <Box key={`row:${link.url}`} flexDirection="column" marginBottom={1}>
      <Box flexDirection="row">
        <Text color={link.url === asked ? 'error' : barOf(link, since)}>▎</Text>
        {link.name !== undefined && <Text bold>{` ${clip(link.name, width)}`}</Text>}
        {link.name === undefined && isLinked && <Link href={link.url} label={` ${displayOf(link.url, width)} `} />}
        {link.name === undefined && !isLinked && (
          // Without hyperlinks the whole address is written once, as plain
          // text: that is what such a terminal can open on a click.
          <Text>{` ${link.url}`}</Text>
        )}
      </Box>
      {link.name !== undefined && isLinked && <Link href={link.url} label={`  ${displayOf(link.url, width - 1)} `} />}
      {link.name !== undefined && !isLinked && <Text dimColor>{`  ${link.url}`}</Text>}
      {Field !== undefined && link.url === editing && (
        <Box paddingLeft={1}>
          <Field
            key="rename"
            label="name "
            value={link.name ?? ''}
            placeholder="a name for this link; leave empty to clear it"
            submitLabel="save"
            autoFocus
            onSubmit={value => quietly($, 'name the link', () => rename($, link.url, value))}
          />
        </Box>
      )}
      <Box flexDirection="row" paddingLeft={1}>
        <Button
          key={`open:${link.url}`}
          plain
          dimColor
          label=" open "
          onPress={press => quietly($, 'open the browser', () => openInBrowser($, link.url, press.surface))}
        />
        <Button
          key={`pin:${link.url}`}
          plain
          dimColor
          label={link.status === 'pinned' ? ' unpin ' : ' pin '}
          onPress={press => quietly($, 'pin', () => togglePin($, link, `pin:${link.url}`, press.requestId))}
        />
        {link.status !== 'pinned' && (
          <Button
            key={`drop:${link.url}`}
            plain
            dimColor={link.url !== asked}
            label={link.url === asked ? ' dismiss? ' : ' dismiss '}
            onPress={run('dismiss', () => pressDismiss($, link.url))}
          />
        )}
        <Button
          key={`copy:${link.url}`}
          plain
          dimColor
          label=" copy "
          onPress={press => quietly($, 'copy', () => copyLink($, link.url, press.surface))}
        />
        {Field !== undefined && (
          <Button
            key={`rename:${link.url}`}
            plain
            dimColor={link.url !== editing}
            label={link.url === editing ? ' cancel ' : ' rename '}
            onPress={press => quietly($, 'rename', () => toggleRename($, link.url, press.requestId))}
          />
        )}
        {columns >= 60 && <Text dimColor>{` ${link.source === 'you' ? 'you' : 'Claude'} · ${link.mentions}×`}</Text>}
      </Box>
    </Box>
  )

  return (
    <Box flexDirection="column">
      <Box flexDirection="row">
        <Text bold>Links</Text>
        <Text dimColor>{`  ${pinned.length} pinned · ${floating.length} floating · ${dismissed.length} dismissed`}</Text>
      </Box>
      {Field !== undefined && (
        <Box marginBottom={1}>
          <Field
            key="add"
            label="add "
            placeholder="type or paste an address"
            submitLabel="pin it"
            // Of several fields the first drawn takes the focus: while a name is being typed, this one yields.
            {...(editing === '' ? { autoFocus: true as const } : {})}
            onSubmit={value => quietly($, 'add the link', () => addByHand($, value))}
          />
        </Box>
      )}
      {all.length === 0 && <Text dimColor>Every URL you or Claude mention lands here and floats above the prompt.</Text>}
      {pinned.length > 0 && (
        <Text bold color="claude">
          ★ PINNED
        </Text>
      )}
      {pinned.map(row)}
      {floating.length > 0 && (
        <Box key="floating" flexDirection="row">
          <Text bold color="suggestion">
            ☆ FLOATING
          </Text>
          {floating.length >= LIST_BULK_MIN && asked !== ALL && (
            <Button
              key="bulk"
              plain
              dimColor
              label=" dismiss all "
              hover={{ color: 'error' }}
              onPress={press => quietly($, 'ask about every link', () => askAll($, 'bulk', press.requestId))}
            />
          )}
          {floating.length >= LIST_BULK_MIN && asked === ALL && (
            <Button key="bulk" plain label={` dismiss ${floating.length}? `} hover={{ color: 'error' }} onPress={run('dismiss every link', () => dismissAll($))} />
          )}
        </Box>
      )}
      {floating.map(row)}
      {dismissed.length > 0 && (
        <Text bold dimColor>
          × DISMISSED
        </Text>
      )}
      {dismissed.map(link => (
        <Box key={`row:${link.url}`} flexDirection="row">
          <Text dimColor>{'  '}</Text>
          <Text dimColor strikethrough>
            {displayOf(link.url, Math.max(8, width - 12))}
          </Text>
          <Button key={`restore:${link.url}`} plain label=" restore " onPress={run('restore', () => setStatus($, link.url, 'floating'))} />
        </Box>
      ))}
      {all.length > 0 && (
        <Box marginTop={1}>
          <Text dimColor>★ locks a link in for the whole session · × hides it · both survive exit and resume</Text>
        </Box>
      )}
    </Box>
  )