claude-link

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button, Markdown } = table
    const Input = 'Input' in table ? table.Input : null
    const now = await $.clock.now()
    const busy = await read($, busyState)
    const error = await read($, errorState)
    const detail = await read($, detailState)

    const turnView = (turn: LinkTurn, index: number) => {
      if (turn.role === 'note') {
        return (
          <Text key={`turn-${index}`} dimColor italic>
            {turn.text}
          </Text>
        )
      }
      return (
        <Box key={`turn-${index}`} flexDirection="column">
          <Text bold color={turn.role === 'user' ? 'claude' : undefined}>
            {turn.role === 'user' ? 'You' : 'Claude'}
            <Text dimColor>{turn.at ? `   ${clock(turn.at)}` : ''}</Text>
          </Text>
          {turn.text ? <Markdown text={turn.text} /> : null}
          {turn.tools.length > 0 ? (
            <Text dimColor wrap="truncate-end">
              {toolsLine(turn)}
            </Text>
          ) : null}
        </Box>
      )
    }

    if (detail) {
      const [firstTurn, ...laterTurns] = detail.turns
      return (
        <Box flexDirection="column" gap={1} paddingX={1}>
          <Box gap={2} alignItems="center" flexWrap="wrap">
            <Button key="back" plain label="Back" onPress={() => closeChat($)} />
            <Button key="add" label={busy === Busy.Adding ? 'Adding...' : 'Add to this chat'} variant="primary" onPress={() => addToChat($, detail.chat)} />
            <Button key="copy" plain dimColor label={busy === Busy.Copying ? 'Copying...' : 'Copy'} onPress={press => copyChat($, detail.chat, press.surface)} />
          </Box>
          <Box flexDirection="column">
            <Text bold wrap="wrap">
              {detail.chat.title}
            </Text>
            <Text wrap="wrap">
              <Text color={machineColor(detail.chat.machine)}>{detail.chat.machine}</Text>
              <Text dimColor>{`   ${detail.chat.project}   ${ago(detail.chat.lastAt, now)}   ${detail.totalTurns} turns   ${liveLabel(detail.chat.live)}`}</Text>
            </Text>
          </Box>
          {error ? <Text color="error" wrap="wrap">{error}</Text> : null}
          {firstTurn ? turnView(firstTurn, 0) : <Text dimColor>This chat has no messages yet.</Text>}
          {detail.omittedTurns > 0 ? (
            <Box gap={1} alignItems="center">
              <Text dimColor>{`${detail.omittedTurns} turns hidden`}</Text>
              <Button key="show-all" plain dimColor label={busy === Busy.Opening ? 'Loading...' : 'Show all'} onPress={() => openChat($, detail.chat, 0)} />
            </Box>
          ) : null}
          {laterTurns.map((turn, index) => turnView(turn, index + 1))}
        </Box>
      )
    }

    const status = await read($, statusState)
    const chats = await read($, chatsState)
    const counts = await read($, countsState)
    const scope = await read($, scopeState)
    const filter = await read($, queryState)
    const project = await read($, projectState)
    const expanded = await read($, expandedState)
    const lastOpened = await read($, lastOpenedState)
    const Svg = 'Svg' in table ? table.Svg : null
    const hasPointer = e.surface !== 'terminal'
    const peers = status?.peers ?? []
    const columns = e.props.bodyColumns || 80
    const needle = filter.trim().toLowerCase()
    const visibleChats = needle
      ? chats.filter(chat => `${chat.title} ${chat.project} ${chat.machine}`.toLowerCase().includes(needle))
      : chats
    // With one other machine every row would name the same one, so the name
    // only shows when chats come from several machines.
    const showMachine = new Set(chats.map(chat => chat.origin)).size > 1
    const emptyText = needle
      ? `No chats match "${filter.trim()}".`
      : scope === 'here'
        ? 'No chats about this project on your other machines yet.'
        : 'No chats from other machines yet.'

    // A row like the sidebar's: a circle and the title across the full width,
    // tinted on hover, with prompt count and age revealed only while hovered.
    const chatRow = (chat: LinkChat) => {
      const dot = dotFor(chat.live)
      const live = liveLabel(chat.live)
      const meta = `${showMachine ? `${chat.machine}   ` : ''}${live ? `${live}   ` : ''}${promptLabel(chat.prompts)}   ${ago(chat.lastAt, now)}`
      const isSelected = lastOpened === `${chat.origin}:${chat.ref}`
      const tint = hasPointer ? { hover: { backgroundColor: ROW_HOVER }, ...(isSelected ? { backgroundColor: ROW_SELECTED } : {}) } : {}
      return (
        <Box key={`row-${chat.origin}-${chat.ref}`} gap={1} paddingX={1} alignItems="center" {...tint}>
          {Svg ? (
            <Svg source={dotSvg(dot)} alt={DOT_ALT[dot]} width={9} height={9} />
          ) : (
            <Text color={dot === 'working' ? 'success' : undefined} dimColor={dot !== 'working'}>
              {dot === 'closed' ? TERMINAL_DOT.hollow : TERMINAL_DOT.filled}
            </Text>
          )}
          <Box flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
            <Button key={`open-${chat.origin}-${chat.ref}`} plain label={fit(chat.title, columns - 6)} onPress={() => openChat($, chat)} />
          </Box>
          {hasPointer ? (
            <Box flexShrink={0} display="none" hover={{ display: 'flex' }}>
              <Text dimColor>{meta}</Text>
            </Box>
          ) : null}
        </Box>
      )
    }

    const groupView = (group: ChatGroup) => {
      const isExpanded = expanded.includes(group.key) || needle !== ''
      const shown = isExpanded ? group.chats : group.chats.slice(0, GROUP_PREVIEW)
      const hidden = group.chats.length - shown.length
      const canCollapse = expanded.includes(group.key) && needle === '' && group.chats.length > GROUP_PREVIEW
      return (
        <Box key={`group-${group.key}`} flexDirection="column">
          <Box paddingX={1}>
            <Text dimColor wrap="truncate-end">
              {group.hint ? `${group.label}   ${group.hint}` : group.label}
            </Text>
          </Box>
          {shown.map(chatRow)}
          {hidden > 0 || canCollapse ? (
            <Box paddingLeft={3}>
              <Button key={`toggle-${group.key}`} plain dimColor label={hidden > 0 ? `Show ${hidden} more` : 'Show less'} onPress={() => toggleGroup($, group.key)} />
            </Box>
          ) : null}
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1}>
        <Box justifyContent="space-between" alignItems="center" gap={1} paddingX={1}>
          <Box gap={2} flexWrap="wrap" flexShrink={1}>
            {peers.length === 0 ? <Text dimColor>No linked machines yet</Text> : null}
            {peers.map(peer => (
              <Text key={`peer-${peer.machineId || peer.name}`}>
                <Text color={peer.isOnline ? 'success' : undefined} dimColor={!peer.isOnline}>
                  {peer.name}
                </Text>
                <Text dimColor>{peer.isOnline ? `  synced ${ago(peer.lastSyncAt, now) || 'just now'}` : '  offline'}</Text>
              </Text>
            ))}
            {status?.indexing ? <Text dimColor>{status.indexing}</Text> : null}
          </Box>
          <Button key="sync" plain dimColor label={busy === Busy.Syncing ? 'Syncing...' : 'Sync'} onPress={() => syncNow($)} />
        </Box>
        <Box gap={2} alignItems="center" paddingX={1}>
          <Button key="scope-here" plain dimColor={scope !== 'here'} label={tabLabel(fit(project || 'This project', 28), counts.here)} onPress={() => setScope($, 'here')} />
          <Button key="scope-all" plain dimColor={scope !== 'all'} label={tabLabel('All', counts.all)} onPress={() => setScope($, 'all')} />