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 PaneState from '../../pane-state' |
| 7 | import type { Kit } from '../kit' |
| 8 | import { present } from './present' |
| 9 | |
| 10 | /** |
| 11 | * The pickers under the header: the source (`Current`, then `T<n>` per |
| 12 | * turn with edits, newest first) and, for the current source, the base. |
| 13 | * |
| 14 | * The source picker draws only when a turn exists, as DiffDialog hides its |
| 15 | * tabs; the base picker is ctrl+x b's cycle as a Select over the backend's |
| 16 | * modes, uncommitted naming the base as the base line does (modeLabelOf). |
| 17 | * |
| 18 | * @param kit the elements and the handlers |
| 19 | * @param model what is picked now and the turns to pick from |
| 20 | * @returns the row, or null when neither picker applies |
| 21 | */ |
| 22 | export function controlsView( |
| 23 | kit: Kit, |
| 24 | model: Pick< |
| 25 | PaneState.PaneModel, |
| 26 | 'source' | 'requestedMode' | 'turns' | 'baseModes' | 'words' | 'data' |
| 27 | >, |
| 28 | ): RenderElement | null { |
| 29 | const { Box, Select } = kit.ui |
| 30 | const { source, turns } = model |
| 31 | const hasTurns = turns.length > 0 |
| 32 | |
| 33 | const sourcePicker = hasTurns ? ( |
| 34 | <Select |
| 35 | key="source" |
| 36 | label="source" |
| 37 | options={[ |
| 38 | { value: 'current', label: 'Current' }, |
| 39 | ...turns.map(turn => ({ |
| 40 | value: String(turn.index), |
| 41 | label: `T${turn.index}`, |
| 42 | })), |
| 43 | ]} |
| 44 | value={source.kind === 'current' ? 'current' : String(source.index)} |
| 45 | onSelect={value => kit.actions.chooseSource(value)} |
| 46 | /> |
| 47 | ) : null |
| 48 | |
| 49 | const isCurrent = source.kind === 'current' |
| 50 | const fetchedSource = model.data?.source |
| 51 | const isWorkingTree = fetchedSource?.kind === 'working-tree' |
| 52 | const base = isWorkingTree ? fetchedSource.base : model.words.base |
| 53 | |
| 54 | const basePicker = isCurrent ? ( |
| 55 | <Select |
| 56 | key="base" |
| 57 | label="base" |
| 58 | options={model.baseModes.map(mode => { |
| 59 | const isUncommitted = mode === 'uncommitted' |
| 60 | const isSession = mode === 'session' |
| 61 | |
| 62 | const label = isUncommitted |
| 63 | ? `uncommitted (vs ${base})` |
| 64 | : isSession |
| 65 | ? 'this session' |
| 66 | : mode |
| 67 | |
| 68 | return { value: mode, label } |
| 69 | })} |
| 70 | value={model.requestedMode} |
| 71 | onSelect={value => kit.actions.chooseBase(value)} |
| 72 | /> |
| 73 | ) : null |
| 74 | |
| 75 | const pickers = present([sourcePicker, basePicker]) |
| 76 | |
| 77 | const row = ( |
| 78 | <Box flexDirection="row" gap={2}> |
| 79 | {pickers} |
| 80 | </Box> |
| 81 | ) |
| 82 | |
| 83 | return pickers.length === 0 ? null : row |
| 84 | } |