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