surshar / claude-code
Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
Built by Anthropic · github.com/anthropics
| 1 | /* @jsxRuntime classic */ |
| 2 | /* @jsx h */ |
| 3 | /* @jsxFrag Fragment */ |
| 4 | import type { RenderElement } from 'claude-code' |
| 5 | |
| 6 | import type { Kit } from '../../kit' |
| 7 | import Layout from '../../layout' |
| 8 | import { FOOT_ROWS } from './foot-rows' |
| 9 | import type { MessagePane } from './message-pane' |
| 10 | |
| 11 | /** |
| 12 | * The pane while a message stands in for the list (ReplDiffSidebar's |
| 13 | * centered body): the header, a blank row, the message, the pickers. |
| 14 | * |
| 15 | * With nothing listed below and room, the lines sit where the built-in |
| 16 | * centers them (half the spare rows above), the pickers under them; |
| 17 | * otherwise all stacks from the top, the pickers over the pre-session line. |
| 18 | * |
| 19 | * @param kit the elements, the width, the body's rows |
| 20 | * @param pane the header block, the message's lines, the pickers, the |
| 21 | * pre-session line, and what is listed under it |
| 22 | * @returns the pane's tree |
| 23 | */ |
| 24 | export function messagePaneOf(kit: Kit, pane: MessagePane): RenderElement { |
| 25 | const { Box, Text } = kit.ui |
| 26 | const { top, controls, earlier, rest } = pane |
| 27 | |
| 28 | const lines = pane.message.flatMap(text => |
| 29 | Layout.wrappedLines(Layout.sanitizeName(text), kit.columns), |
| 30 | ) |
| 31 | |
| 32 | const drawn = lines.map(line => <Text dimColor>{line}</Text>) |
| 33 | const controlRows = controls === null ? [] : [controls] |
| 34 | const earlierRows = earlier === null ? [] : [earlier] |
| 35 | |
| 36 | const isControlsAboveEarlier = |
| 37 | controlRows.length > 0 || earlierRows.length === 0 |
| 38 | |
| 39 | const aboveEarlier = isControlsAboveEarlier |
| 40 | ? controlRows |
| 41 | : [<Box height={1} />] |
| 42 | |
| 43 | const footRows = earlier === null ? 0 : FOOT_ROWS |
| 44 | const middleRows = kit.rows - top.length - 1 - footRows |
| 45 | const above = Math.floor((middleRows - lines.length) / 2) |
| 46 | |
| 47 | const isCentered = |
| 48 | rest.length === 0 && middleRows - above - lines.length >= controlRows.length |
| 49 | |
| 50 | if (!isCentered) { |
| 51 | return ( |
| 52 | <Box flexDirection="column"> |
| 53 | {[ |
| 54 | ...top, |
| 55 | <Box height={1} />, |
| 56 | ...drawn, |
| 57 | ...aboveEarlier, |
| 58 | ...earlierRows, |
| 59 | ...rest, |
| 60 | ]} |
| 61 | </Box> |
| 62 | ) |
| 63 | } |
| 64 | |
| 65 | const spacer = above > 0 ? [<Box height={above} />] : [] |
| 66 | |
| 67 | const foot = earlierRows.map(row => ( |
| 68 | <Box flexDirection="column" marginTop={1} paddingBottom={1}> |
| 69 | {row} |
| 70 | </Box> |
| 71 | )) |
| 72 | |
| 73 | return ( |
| 74 | <Box flexDirection="column" height={kit.rows}> |
| 75 | {[ |
| 76 | ...top, |
| 77 | <Box height={1} />, |
| 78 | <Box flexDirection="column" height={middleRows} alignItems="center"> |
| 79 | {[...spacer, ...drawn, ...controlRows]} |
| 80 | </Box>, |
| 81 | ...foot, |
| 82 | ]} |
| 83 | </Box> |
| 84 | ) |
| 85 | } |