linear-claude-mod

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button, Markdown } = ui
    // Mobile draws no Input or Select yet, so it gets no actions.
    const fields = 'Input' in ui && 'Select' in ui ? { Input: ui.Input, Select: ui.Select } : null
    const now = await $.clock.now()
    const {
      selected,
      detail,
      isLoading: isDetailLoading,
      error: detailError,
      action,
      states,
      saving,
    } = await read($, view)

    if (selected) {
      const t = detail ?? selected
      const meta = [
        t.status,
        PRIORITY_LABEL[t.priority]?.trim() || null,
        t.project,
        detail?.assignee,
        detail?.updatedAt ? `updated ${ago(now - Date.parse(detail.updatedAt))}` : null,
      ].filter(Boolean)

      return (
        <Box flexDirection="column" gap={1}>
          <Box justifyContent="space-between">
            <Button key="back" plain hotkey="b" label="Back to list" onPress={() => void backToList($)} />
            <Box gap={2}>
              <Button
                key="work"
                plain
                hotkey="w"
                label="Work on this"
                onPress={() => {
                  void $.prompt.submit({ text: workPrompt(selected), asUser: true })
                  $.ui.toast(`Loading ${selected.id} into the session`)
                }}
              />
              <Button key="open" plain hotkey="o" label="Open in Linear" onPress={() => void openUrl($, t.url)} />
            </Box>
          </Box>
          <Box flexDirection="column">
            <Text bold>
              {t.id}  {t.title}
            </Text>
            <Text dimColor>{meta.join(' · ')}</Text>
            {detail && detail.labels.length > 0 && <Text color="magenta">{detail.labels.join(', ')}</Text>}
            {detail?.branch && <Text dimColor>branch {detail.branch}</Text>}
          </Box>
          {fields && (
            <Box flexDirection="column">
              <Box gap={2}>
                <Button key="act:comment" plain hotkey="c" label="Comment" onPress={() => void openAction($, 'comment')} />
                <Button key="act:move" plain hotkey="m" label="Move" onPress={() => void openAction($, 'move')} />
                <Button key="act:priority" plain hotkey="p" label="Priority" onPress={() => void openAction($, 'priority')} />
                {action && <Button key="act:cancel" plain hotkey="x" label="Cancel" onPress={() => void closeAction($)} />}
              </Box>
              {saving && <Text dimColor>{saving}</Text>}
              {!saving && action === 'comment' && (
                <fields.Input
                  key={ACTION_KEY.comment}
                  label="Comment: "
                  placeholder="Markdown; Enter posts it"
                  submitLabel="post"
                  autoFocus
                  onSubmit={value => void postComment($, value)}
                />
              )}
              {!saving && action === 'move' && !states && <Text dimColor>Loading statuses…</Text>}
              {!saving && action === 'move' && states && states.length > 0 && (
                <fields.Select
                  key={ACTION_KEY.move}
                  label="Move to: "
                  options={states.map(s => ({ value: stateValue(s), label: s.name }))}
                  value={stateValue(states.find(s => s.name === t.status) ?? states[0]!)}
                  autoFocus
                  onSelect={value => void moveTo($, value)}
                />
              )}
              {!saving && action === 'priority' && (
                <fields.Select
                  key={ACTION_KEY.priority}
                  label="Priority: "
                  options={PRIORITY_OPTIONS}
                  value={String(t.priority)}
                  autoFocus
                  onSelect={value => void setPriority($, value)}
                />
              )}
            </Box>
          )}
          {isDetailLoading && <Text dimColor>Loading ticket…</Text>}
          {detailError && <Text color="red">Linear: {detailError}</Text>}
          {detail && (
            <Markdown key="description" text={detail.description.trim() || '_No description._'} />
          )}
          {detail && (
            <Box flexDirection="column">
              <Text bold>Comments ({detail.comments.length})</Text>
              {detail.comments.length === 0 && <Text dimColor>None yet.</Text>}
              {detail.comments.map((c, i) => (
                <Box key={`c:${i}`} flexDirection="column" marginTop={1}>
                  <Text color="cyan">
                    {c.author}
                    <Text dimColor>{c.createdAt ? `  ${ago(now - Date.parse(c.createdAt))}` : ''}</Text>
                  </Text>
                  <Markdown key={`cm:${i}`} text={c.body} />
                </Box>
              ))}
            </Box>
          )}
        </Box>
      )
    }

    const { tickets, loadedAt, isLoading, error } = await read($, board)
    const cols = e.props.bodyColumns || e.viewport?.columns || 80
    const room = Math.max(3, (e.viewport?.rows ?? 24) - 3)
    const groups = groupTickets(tickets)

    const rows: RenderNode[] = []
    let hotkey = 1
    for (const g of groups) {
      if (rows.length >= room) break
      rows.push(
        <Text key={`h:${g.status}`} bold color={g.tickets[0]?.statusType === 'started' ? 'cyan' : undefined}>
          {g.status} ({g.tickets.length})
        </Text>,
      )
      for (const t of g.tickets) {
        if (rows.length >= room) break
        const key = hotkey <= 9 ? String(hotkey++) : undefined
        const label = `${PRIORITY_LABEL[t.priority] ?? '   '} ${t.id}  ${t.title}`
        rows.push(
          <Button
            key={t.id}
            plain
            hotkey={key}
            dimColor={t.statusType === 'backlog'}
            label={label.length > cols - 6 ? `${label.slice(0, cols - 7)}…` : label}
            onPress={() => void showTicket($, t)}
          />,
        )
      }
    }
    const hidden = tickets.length + groups.length - rows.length

    return (
      <Box flexDirection="column">
        <Box justifyContent="space-between">
          <Text dimColor>
            {isLoading ? 'Refreshing…' : loadedAt ? `${tickets.length} open · ${ago(now - loadedAt)}` : ''}
          </Text>
          <Button key="refresh" plain hotkey="r" label="Refresh" onPress={() => void refresh($)} />
        </Box>
        {error && <Text color="red">Linear: {error}</Text>}
        {!isLoading && !error && loadedAt && tickets.length === 0 && <Text dimColor>No open tickets assigned to you.</Text>}