UI kit reference

zidane-ui/git

import { … } from 'zidane-ui/git'ui/src/git/index.ts

Components#

`BranchMenu`Component#

Renders the branch and pull request switcher, anchored to anchorRef. See the module doc.

TypeScript

function BranchMenu(props: BranchMenuProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`BranchMenuProps`	Component props.

Returns

Element | null

Props

BranchMenu props
Name	Type	Description
anchorRef	`RefObject<HTMLElement \| null>`	The control the menu opens from.
className?	`string`	Extra classes on the menu surface.
current	`string \| null`	The current branch, `null` when HEAD is detached.
cwd	`string`	The checkout.
onClose	`() => void`	Closes the menu (an outside press, Esc, a pick of the current row).
onSwitched	`() => void`	A switch, a new branch or a worktree move went through.
open	`boolean`	Whether the menu is shown.
sessionId	`string \| null`	The session the checkout belongs to (the host refuses a switch while its agent runs).
style?	`CSSProperties`	Inline styles on the menu surface.
worktree?	`BranchMenuWorktree`	The worktree this session can move into. Absent: no "Start a worktree".

ui/src/git/BranchMenu.tsx:131

`GitBar`Component#

The checkout's branch, sync state, pull request and uncommitted changes in one quiet line. Memoised: a composer re-renders per keystroke; the bar only when its inputs change.

TypeScript

const GitBar: MemoExoticComponent<(__namedParameters: GitBarProps) => Element>

ui/src/git/GitBar.tsx:91

`GitProvider`Component#

Provides a GitHost and optional label overrides to the git components below it.

TypeScript

function GitProvider(props: GitProviderProps): Element

Parameters

Parameters
Name	Type	Description
props	`GitProviderProps`	Provider props: the `host`, optional `labels`, and the `children` to render.

Returns

Element

Props

GitProvider props
Name	Type	Description
children	`ReactNode`	The app.
host	`GitHost`	The host the git components read.
labels?	Partial<{ gitAhead: (count: number) => string; gitApproved: string; gitAuthorLabel: (author: string) => string; gitBehind: (count: number) => string; gitBranch: string; gitBranchButton: (branch: string) => string; gitBranchChipLabel: (branch: string) => string; gitBranchDetached: (commit: string) => string; gitBranchHint: string; gitBranchPlaceholder: string; gitBranchSwitch: string; gitBranchSwitchLater: string; gitChangesRequested: string; gitChangesTooltip: string; gitChecksLabel: (checks: Checks) => string; gitChecksText: (checks: Checks) => string; gitCommitsAhead: (count: number, base: string \| null) => string; gitCommitsBehind: (count: number) => string; gitCopyBranch: string; gitDefaultBranch: string; gitDontAskAgain: string; gitDraft: string; gitDriftLabel: (ahead: number, behind: number) => string; gitEnvironmentSettings: string; gitFactsThen: (facts: string, action: string) => string; gitFilesUnit: (count: number) => ' file' \| ' files'; gitFolderBackToRoots: string; gitFolderCancel: string; gitFolderCreate: string; gitFolderCreating: string; gitFolderDefault: string; gitFolderDefaultTitle: (host: string) => string; gitFolderEmpty: string; gitFolderFilter: string; gitFolderFilterLabel: string; gitFolderNew: string; gitFolderNewName: string; gitFolderNewNameLabel: (parent: string) => string; gitFolderNoMatch: string; gitFolderOpenPath: (path: string) => string; gitFolderPathLabel: string; gitFolderPickerLabel: (host: string) => string; gitFolderReading: string; gitFolderRoots: string; gitFolderSearchDeeper: (query: string) => string; gitFolderSearching: string; gitFolderSearchNone: string; gitFolderSearchResults: string; gitFolderSearchTruncated: string; gitFolderTitle: (folder: string, host: string) => string; gitFolderUse: (name: string) => string; gitFork: string; gitFromHere: string; gitHostLocalDescription: string; gitHostServerDescription: string; gitImportArchived: string; gitImportCancel: string; gitImportChange: string; gitImportClone: string; gitImportCloning: string; gitImportConnecting: string; gitImportField: string; gitImportHintAfter: string; gitImportHintBefore: string; gitImportHintCode: string; gitImportInto: string; gitImportInvalid: string; gitImportPlaceholder: string; gitImportPreview: (label: string, branch: string \| undefined, destination: string) => string; gitImportPrivate: string; gitImportProgress: (phase: string, percent: number) => string; gitImportStars: (stars: number) => string; gitImportStop: string; gitImportTitle: string; gitImportViewOnGithub: string; gitIsolation: string; gitIsolationDefault: string; gitLastCommitAge: (age: string, duration: boolean) => string; gitListLabel: string; gitLoadingBranches: string; gitLocal: string; gitLocalLabel: string; gitMachineDescription: (name: string) => string; gitMachineOffline: (name: string) => string; gitMachineStatus: (status: string) => string; gitMenuLabel: string; gitMore: (count: number) => string; gitMoreSearchHint: string; gitMoveBack: string; gitMoveBranch: string; gitMoveCancel: string; gitMoveChangeFolder: string; gitMoveConfirm: (name: string) => string; gitMoveConfirmDetail: string; gitMoveCurrent: string; gitMoveDone: string; gitMoveFolder: string; gitMoveKeepFolder: string; gitMoveLoading: string; gitMoveMainCheckout: string; gitMoveMoving: string; gitMoveNone: string; gitMoveOffline: string; gitMovePickFolder: (name: string) => string; gitMoveRemoveWorktree: string; gitMovesThisChat: string; gitMoveSubmit: string; gitMoveTitle: string; gitMoveWhere: string; gitMoveWorktreeKept: (reason: string \| undefined) => string; gitNoGh: string; gitNoMatches: string; gitOpenOnGitHub: string; gitOpenPullRequest: (number: number) => string; gitPrDraft: string; gitPrTooltip: (pr: { draft: boolean; number: number; title: string }) => string; gitPublish: string; gitPublishBranch: (branch: string) => string; gitPublishDialog: string; gitPublishing: string; gitPublishLater: string; gitPublishSummary: (branch: string, ahead: number, remote: string \| null) => string; gitPublishTo: (remote: string \| null) => string; gitRateLimited: (clock: string) => string; gitRowCurrent: string; gitRowSwitching: string; gitRunsOn: string; gitRunsOnHelpLabel: string; gitRunsOnLocal: string; gitRunsOnLocalFact: string; gitRunsOnMachine: string; gitRunsOnMachineFact: string; gitRunsOnServer: string; gitRunsOnServerFact: string; gitSearching: string; gitSearchLabel: string; gitSearchPlaceholder: string; gitSectionBranches: string; gitSectionMine: string; gitSectionOther: string; gitSectionPullRequests: string; gitSectionReview: string; gitStartAsWorktree: string; gitStartBranch: string; gitStartBranchLabel: (name: string) => string; gitStartCheckedOutElsewhere: (path: string) => string; gitStartingWorktree: string; gitStartNoWorktree: string; gitStartTheWorktree: string; gitStartWorktree: string; gitStartWorktreeLabel: (name: string) => string; gitSync: string; gitSyncCancel: string; gitSyncDialog: string; gitSyncing: string; gitSyncKeepsChanges: string; gitSyncLater: string; gitSyncSummary: (behind: number, ahead: number, upstream: string) => string; gitSyncWith: (upstream: string \| null) => string; gitToPull: (count: number) => string; gitToPush: (count: number) => string; gitUnavailable: string; gitUpdatedAge: (age: string, duration: boolean) => string; gitUpToDate: (upstream: string) => string; gitWhereLabel: string; gitWhereTitle: (place: string, isolation: string \| undefined, branch: string \| undefined) => string; gitWorktreeBranchLabel: string; gitWorktreeBranchPlaceholder: string; gitWorktreeShort: string }>	Overrides for the built-in strings. Keys you leave out keep the default English label.

ui/src/git/GitProvider.tsx:33

`ImportRepoDialog`Component#

The import form: the repository field with its live preview, the parent folder, the clone's progress and error.

TypeScript

function ImportRepoDialog(props: ImportRepoDialogProps): Element

Parameters

Parameters
Name	Type	Description
props	`ImportRepoDialogProps`	The `ImportRepoDialogProps`.

Returns

Element

Props

ImportRepoDialog props
Name	Type	Description
className?	`string`	Extra class names for the root.
clone	`GitClone`	How the host clones.
hostId?	`string`	The saved server the clone lands on (`HostView.id`), for showing its folders. Absent: this computer.
initialParent	`string`	Where the clone lands until the user picks another folder.
onCancel	`() => void`	Closed without cloning.
onDone	`(path: string) => void`	The repository is in place: its folder.
pickFolder?	`() => Promise<string \| null>`	Picks another parent folder; `null` when cancelled. Absent: no Change button.
style?	`CSSProperties`	Inline styles on the root element.

ui/src/git/ImportRepoDialog.tsx:68

`MoveSessionDialog`Component#

The move dialog: where, then the folder when one is needed, then the confirmation.

TypeScript

function MoveSessionDialog(props: MoveSessionDialogProps): Element

Parameters

Parameters
Name	Type	Description
props	`MoveSessionDialogProps`	The `MoveSessionDialogProps`.

Returns

Element

Props

MoveSessionDialog props
Name	Type	Description
className?	`string`	Extra class names for the root.
onCancel	`() => void`	Closed without moving.
onDone	`() => void`	The session moved.
style?	`CSSProperties`	Inline styles on the root element.
subject	`MoveSessionSubject`	The session to move.

ui/src/git/MoveSessionDialog.tsx:71

`RemoteFolderBrowser`Component#

Renders the folder browser: the roots, a filter (or a typed path), the folder's path, its folders, .., the folders found below, "New folder" and "Use" for the current one. A folder that can't be read offers the way back to the roots.

TypeScript

function RemoteFolderBrowser(props: RemoteFolderBrowserProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`RemoteFolderBrowserProps`	Component props.

Returns

Element | null

Props

RemoteFolderBrowser props
Name	Type	Description
className?	`string`	Extra classes on the menu.
hostId?	`string`	The saved server whose folders to list (hosts that reach several).
machineId?	`string`	A machine shared with that host: its folders instead.
onUse	`(path: string) => void`	Called with the folder picked.
start	`string \| null`	The folder to open on, `null` for the first root.
style?	`CSSProperties`	Inline styles on the menu.

ui/src/git/RemoteFolderPicker.tsx:152

`RemoteFolderPicker`Component#

Renders the folder pill and its browser. See the module doc.

TypeScript

function RemoteFolderPicker(props: RemoteFolderPickerProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`RemoteFolderPickerProps`	Component props.

Returns

Element | null

Props

RemoteFolderPicker props
Name	Type	Description
className?	`string`	Extra classes on the pill.
folder	`string \| null`	The folder picked, `null` for the host's first workspace root.
hostId?	`string`	The saved server whose folders to list (hosts that reach several).
hostName	`string`	The host's (or machine's) name, as the pill and the menu say it.
machineId?	`string`	A machine shared with that host: its folders instead.
onChange	`(folder: string \| null) => void`	Called with the folder picked.
placeholder?	`string`	The pill's label while no folder is picked. Default: the `gitFolderDefault` label.
style?	`CSSProperties`	Inline styles on the pill.

ui/src/git/RemoteFolderPicker.tsx:71

`SyncChip`Component#

The ahead / behind counts of a checkout, and the sync (or publish) a click runs. Renders nothing when there is neither a count nor an action.

TypeScript

function SyncChip(props: SyncChipProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`SyncChipProps`	The `SyncChipProps`.

Returns

Element | null

Props

SyncChip props
Name	Type	Default	Description
className?	`string`		Extra class names for the root.
confirm?	`boolean`	`true`	Ask before syncing.
cwd	`string`		The checkout.
onConfirmChange?	`(confirm: boolean) => void`		"Don't ask again" was ticked at a confirmed sync. Absent: no such checkbox.
onSynced	`() => void \| Promise<void>`		Called after every sync, worked or not (refresh the status).
running	`boolean`		The agent is working: the chip is disabled.
sessionId	`string \| null`		The session working in it (the host may refuse while it runs).
status	`GitStatus`		The checkout's status.
style?	`CSSProperties`		Inline styles on the root element.

ui/src/git/SyncChip.tsx:68

`WhereMenu`Component#

Renders the where menu: the places (hosts and machines), the isolation kinds there, the branch field of a kind that takes one, and the settings row.

TypeScript

function WhereMenu(props: WhereMenuProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`WhereMenuProps`	Component props.

Returns

Element | null

Props

WhereMenu props
Name	Type	Description
className?	`string`	Extra classes on the menu.
descriptors	`readonly EnvironmentDescriptor[]`	The draft host's environment kinds (`withMachines` applied).
draft	`DraftEnvironment \| null`	The draft's pick, `null` for the default.
hiddenMachines?	`ReadonlySet<string>`	Machine names not to list (servers this computer also uses as machines, shown as servers).
hostId	`string`	The draft's host.
hosts	`readonly HostView[]`	This computer first, then the saved servers.
onChange	`(next: DraftEnvironment) => void`	Called with the draft's new pick.
onClose?	`() => void`	Called after a pick that ends the choice (the popover closes).
onHostChange	`(hostId: string) => void`	Called with the host picked.
onOpenSettings?	`() => void`	Opens the environment settings. Absent: no settings row.
style?	`CSSProperties`	Inline styles on the menu.

ui/src/git/WherePicker.tsx:126

`WherePicker`Component#

Renders the where pill and its menu. Nothing when there is nothing to choose (one place, one way to run there).

TypeScript

function WherePicker(props: WherePickerProps): Element | null

Parameters

Parameters
Name	Type	Description
props	`WherePickerProps`	Component props.

Returns

Element | null

ui/src/git/WherePicker.tsx:314

Functions#

`useEnvironmentChoices`Function#

The environment kinds a draft in cwd can pick, withMachines applied. Empty while loading, when the list fails or without GitHost.environments: the draft runs on its default. A failed re-read keeps the last list.

TypeScript

function useEnvironmentChoices(
  cwd: string | null,
  hostId?: string,
): readonly EnvironmentDescriptor[]

Parameters

Parameters
Name	Type	Description
cwd	`string \| null`	The draft's folder (`''`: none); `null` reads nothing (no draft on screen).
hostId?	`string`	The saved server the draft runs on (absent: this host).

Returns

readonly EnvironmentDescriptor[]

ui/src/git/useEnvironmentChoices.ts:23

`useGitBar`Function#

The checkout's live status and its branch's pull request, for a git bar.

TypeScript

function useGitBar(cwd: string | null, sessionId: string | null): GitBarState

Parameters

Parameters
Name	Type	Description
cwd	`string \| null`	The checkout, or `null` (no folder: nothing to show).
sessionId	`string \| null`	The session working in it, whose activity refreshes it.

Returns

GitBarState

ui/src/git/useGitBar.ts:95

`useGitHost`Function#

The GitHost from the nearest GitProvider, or null outside one (the git components that need it render nothing).

TypeScript

function useGitHost(): GitHost | null

Returns

GitHost | null

ui/src/git/GitProvider.tsx:42

`useGitLabels`Function#

Returns the git components' strings: the defaults merged with any overrides.

TypeScript

function useGitLabels(): { gitAhead: (count: number) => string; gitApproved: string; gitAuthorLabel: (author: string) => string; gitBehind: (count: number) => string; gitBranch: string; gitBranchButton: (branch: string) => string; gitBranchChipLabel: (branch: string) => string; gitBranchDetached: (commit: string) => string; gitBranchHint: string; gitBranchPlaceholder: string; gitBranchSwitch: string; gitBranchSwitchLater: string; gitChangesRequested: string; gitChangesTooltip: string; gitChecksLabel: (checks: Checks) => string; gitChecksText: (checks: Checks) => string; gitCommitsAhead: (count: number, base: string | null) => string; gitCommitsBehind: (count: number) => string; gitCopyBranch: string; gitDefaultBranch: string; gitDontAskAgain: string; gitDraft: string; gitDriftLabel: (ahead: number, behind: number) => string; gitEnvironmentSettings: string; gitFactsThen: (facts: string, action: string) => string; gitFilesUnit: (count: number) => ' file' | ' files'; gitFolderBackToRoots: string; gitFolderCancel: string; gitFolderCreate: string; gitFolderCreating: string; gitFolderDefault: string; gitFolderDefaultTitle: (host: string) => string; gitFolderEmpty: string; gitFolderFilter: string; gitFolderFilterLabel: string; gitFolderNew: string; gitFolderNewName: string; gitFolderNewNameLabel: (parent: string) => string; gitFolderNoMatch: string; gitFolderOpenPath: (path: string) => string; gitFolderPathLabel: string; gitFolderPickerLabel: (host: string) => string; gitFolderReading: string; gitFolderRoots: string; gitFolderSearchDeeper: (query: string) => string; gitFolderSearching: string; gitFolderSearchNone: string; gitFolderSearchResults: string; gitFolderSearchTruncated: string; gitFolderTitle: (folder: string, host: string) => string; gitFolderUse: (name: string) => string; gitFork: string; gitFromHere: string; gitHostLocalDescription: string; gitHostServerDescription: string; gitImportArchived: string; gitImportCancel: string; gitImportChange: string; gitImportClone: string; gitImportCloning: string; gitImportConnecting: string; gitImportField: string; gitImportHintAfter: string; gitImportHintBefore: string; gitImportHintCode: string; gitImportInto: string; gitImportInvalid: string; gitImportPlaceholder: string; gitImportPreview: (label: string, branch: string | undefined, destination: string) => string; gitImportPrivate: string; gitImportProgress: (phase: string, percent: number) => string; gitImportStars: (stars: number) => string; gitImportStop: string; gitImportTitle: string; gitImportViewOnGithub: string; gitIsolation: string; gitIsolationDefault: string; gitLastCommitAge: (age: string, duration: boolean) => string; gitListLabel: string; gitLoadingBranches: string; gitLocal: string; gitLocalLabel: string; gitMachineDescription: (name: string) => string; gitMachineOffline: (name: string) => string; gitMachineStatus: (status: string) => string; gitMenuLabel: string; gitMore: (count: number) => string; gitMoreSearchHint: string; gitMoveBack: string; gitMoveBranch: string; gitMoveCancel: string; gitMoveChangeFolder: string; gitMoveConfirm: (name: string) => string; gitMoveConfirmDetail: string; gitMoveCurrent: string; gitMoveDone: string; gitMoveFolder: string; gitMoveKeepFolder: string; gitMoveLoading: string; gitMoveMainCheckout: string; gitMoveMoving: string; gitMoveNone: string; gitMoveOffline: string; gitMovePickFolder: (name: string) => string; gitMoveRemoveWorktree: string; gitMovesThisChat: string; gitMoveSubmit: string; gitMoveTitle: string; gitMoveWhere: string; gitMoveWorktreeKept: (reason: string | undefined) => string; gitNoGh: string; gitNoMatches: string; gitOpenOnGitHub: string; gitOpenPullRequest: (number: number) => string; gitPrDraft: string; gitPrTooltip: (pr: { draft: boolean; number: number; title: string }) => string; gitPublish: string; gitPublishBranch: (branch: string) => string; gitPublishDialog: string; gitPublishing: string; gitPublishLater: string; gitPublishSummary: (branch: string, ahead: number, remote: string | null) => string; gitPublishTo: (remote: string | null) => string; gitRateLimited: (clock: string) => string; gitRowCurrent: string; gitRowSwitching: string; gitRunsOn: string; gitRunsOnHelpLabel: string; gitRunsOnLocal: string; gitRunsOnLocalFact: string; gitRunsOnMachine: string; gitRunsOnMachineFact: string; gitRunsOnServer: string; gitRunsOnServerFact: string; gitSearching: string; gitSearchLabel: string; gitSearchPlaceholder: string; gitSectionBranches: string; gitSectionMine: string; gitSectionOther: string; gitSectionPullRequests: string; gitSectionReview: string; gitStartAsWorktree: string; gitStartBranch: string; gitStartBranchLabel: (name: string) => string; gitStartCheckedOutElsewhere: (path: string) => string; gitStartingWorktree: string; gitStartNoWorktree: string; gitStartTheWorktree: string; gitStartWorktree: string; gitStartWorktreeLabel: (name: string) => string; gitSync: string; gitSyncCancel: string; gitSyncDialog: string; gitSyncing: string; gitSyncKeepsChanges: string; gitSyncLater: string; gitSyncSummary: (behind: number, ahead: number, upstream: string) => string; gitSyncWith: (upstream: string | null) => string; gitToPull: (count: number) => string; gitToPush: (count: number) => string; gitUnavailable: string; gitUpdatedAge: (age: string, duration: boolean) => string; gitUpToDate: (upstream: string) => string; gitWhereLabel: string; gitWhereTitle: (place: string, isolation: string | undefined, branch: string | undefined) => string; gitWorktreeBranchLabel: string; gitWorktreeBranchPlaceholder: string; gitWorktreeShort: string }

Returns

{ gitAhead: (count: number) => string; gitApproved: string; gitAuthorLabel: (author: string) => string; gitBehind: (count: number) => string; gitBranch: string; gitBranchButton: (branch: string) => string; gitBranchChipLabel: (branch: string) => string; gitBranchDetached: (commit: string) => string; gitBranchHint: string; gitBranchPlaceholder: string; gitBranchSwitch: string; gitBranchSwitchLater: string; gitChangesRequested: string; gitChangesTooltip: string; gitChecksLabel: (checks: Checks) => string; gitChecksText: (checks: Checks) => string; gitCommitsAhead: (count: number, base: string | null) => string; gitCommitsBehind: (count: number) => string; gitCopyBranch: string; gitDefaultBranch: string; gitDontAskAgain: string; gitDraft: string; gitDriftLabel: (ahead: number, behind: number) => string; gitEnvironmentSettings: string; gitFactsThen: (facts: string, action: string) => string; gitFilesUnit: (count: number) => ' file' | ' files'; gitFolderBackToRoots: string; gitFolderCancel: string; gitFolderCreate: string; gitFolderCreating: string; gitFolderDefault: string; gitFolderDefaultTitle: (host: string) => string; gitFolderEmpty: string; gitFolderFilter: string; gitFolderFilterLabel: string; gitFolderNew: string; gitFolderNewName: string; gitFolderNewNameLabel: (parent: string) => string; gitFolderNoMatch: string; gitFolderOpenPath: (path: string) => string; gitFolderPathLabel: string; gitFolderPickerLabel: (host: string) => string; gitFolderReading: string; gitFolderRoots: string; gitFolderSearchDeeper: (query: string) => string; gitFolderSearching: string; gitFolderSearchNone: string; gitFolderSearchResults: string; gitFolderSearchTruncated: string; gitFolderTitle: (folder: string, host: string) => string; gitFolderUse: (name: string) => string; gitFork: string; gitFromHere: string; gitHostLocalDescription: string; gitHostServerDescription: string; gitImportArchived: string; gitImportCancel: string; gitImportChange: string; gitImportClone: string; gitImportCloning: string; gitImportConnecting: string; gitImportField: string; gitImportHintAfter: string; gitImportHintBefore: string; gitImportHintCode: string; gitImportInto: string; gitImportInvalid: string; gitImportPlaceholder: string; gitImportPreview: (label: string, branch: string | undefined, destination: string) => string; gitImportPrivate: string; gitImportProgress: (phase: string, percent: number) => string; gitImportStars: (stars: number) => string; gitImportStop: string; gitImportTitle: string; gitImportViewOnGithub: string; gitIsolation: string; gitIsolationDefault: string; gitLastCommitAge: (age: string, duration: boolean) => string; gitListLabel: string; gitLoadingBranches: string; gitLocal: string; gitLocalLabel: string; gitMachineDescription: (name: string) => string; gitMachineOffline: (name: string) => string; gitMachineStatus: (status: string) => string; gitMenuLabel: string; gitMore: (count: number) => string; gitMoreSearchHint: string; gitMoveBack: string; gitMoveBranch: string; gitMoveCancel: string; gitMoveChangeFolder: string; gitMoveConfirm: (name: string) => string; gitMoveConfirmDetail: string; gitMoveCurrent: string; gitMoveDone: string; gitMoveFolder: string; gitMoveKeepFolder: string; gitMoveLoading: string; gitMoveMainCheckout: string; gitMoveMoving: string; gitMoveNone: string; gitMoveOffline: string; gitMovePickFolder: (name: string) => string; gitMoveRemoveWorktree: string; gitMovesThisChat: string; gitMoveSubmit: string; gitMoveTitle: string; gitMoveWhere: string; gitMoveWorktreeKept: (reason: string | undefined) => string; gitNoGh: string; gitNoMatches: string; gitOpenOnGitHub: string; gitOpenPullRequest: (number: number) => string; gitPrDraft: string; gitPrTooltip: (pr: { draft: boolean; number: number; title: string }) => string; gitPublish: string; gitPublishBranch: (branch: string) => string; gitPublishDialog: string; gitPublishing: string; gitPublishLater: string; gitPublishSummary: (branch: string, ahead: number, remote: string | null) => string; gitPublishTo: (remote: string | null) => string; gitRateLimited: (clock: string) => string; gitRowCurrent: string; gitRowSwitching: string; gitRunsOn: string; gitRunsOnHelpLabel: string; gitRunsOnLocal: string; gitRunsOnLocalFact: string; gitRunsOnMachine: string; gitRunsOnMachineFact: string; gitRunsOnServer: string; gitRunsOnServerFact: string; gitSearching: string; gitSearchLabel: string; gitSearchPlaceholder: string; gitSectionBranches: string; gitSectionMine: string; gitSectionOther: string; gitSectionPullRequests: string; gitSectionReview: string; gitStartAsWorktree: string; gitStartBranch: string; gitStartBranchLabel: (name: string) => string; gitStartCheckedOutElsewhere: (path: string) => string; gitStartingWorktree: string; gitStartNoWorktree: string; gitStartTheWorktree: string; gitStartWorktree: string; gitStartWorktreeLabel: (name: string) => string; gitSync: string; gitSyncCancel: string; gitSyncDialog: string; gitSyncing: string; gitSyncKeepsChanges: string; gitSyncLater: string; gitSyncSummary: (behind: number, ahead: number, upstream: string) => string; gitSyncWith: (upstream: string | null) => string; gitToPull: (count: number) => string; gitToPush: (count: number) => string; gitUnavailable: string; gitUpdatedAge: (age: string, duration: boolean) => string; gitUpToDate: (upstream: string) => string; gitWhereLabel: string; gitWhereTitle: (place: string, isolation: string | undefined, branch: string | undefined) => string; gitWorktreeBranchLabel: string; gitWorktreeBranchPlaceholder: string; gitWorktreeShort: string }

ui/src/git/GitProvider.tsx:47

`useImportRepo`Function#

Opens the import dialog above whatever is open, over the GitHost in context (clone, pickFolder), or on a saved server with target. The returned function resolves with the cloned (or already present) folder, null when closed. Without what it needs (GitHost.clone; on a server cloneOnServer and listFolders) it opens nothing and resolves null: hide the control that calls it.

TypeScript

function useImportRepo(target?: ImportRepoTarget): () => Promise<string | null>

Parameters

Parameters
Name	Type	Description
target?	`ImportRepoTarget`	A saved server to clone on. Absent: this computer.

Returns

() => Promise<string | null>

ui/src/git/ImportRepoDialog.tsx:344

`useMoveSession`Function#

Opens the move dialog above whatever is open, over the GitHost in context. undefined without what it needs (GitHost.moveSession and environments, a modal layer): hide the control that calls it. The returned function resolves true once the session moved, false when closed.

TypeScript

function useMoveSession(): ((subject: MoveSessionSubject) => Promise<boolean>) | undefined

Returns

((subject: MoveSessionSubject) => Promise<boolean>) | undefined

ui/src/git/MoveSessionDialog.tsx:363

`useStartFromPanel`Function#

Returns the start for cwd's draft: it sets the draft's environment, switches the folder when asked, replaces the composer's text with the row's prompt and focuses it.

TypeScript

function useStartFromPanel(
  draft: StartFromPanelDraft,
  cwd: string,
): (start: PanelStartSession) => Promise<StartFromPanelResult>

Parameters

Parameters
Name	Type	Description
draft	`StartFromPanelDraft`	The new-chat draft on screen.
cwd	`string`	The folder the panel is for.

Returns

(start: PanelStartSession) => Promise<StartFromPanelResult>

ui/src/git/useStartFromPanel.ts:46

Constants#

`GIT_BAR_ITEM`Constant#

The git bar's quiet item: a chip that only lifts on hover.

TypeScript

const GIT_BAR_ITEM: string

ui/src/git/SyncChip.tsx:29

Interfaces#

`BranchMenuProps`Interface#

Props for BranchMenu.

TypeScript

interface BranchMenuProps

Properties

BranchMenuProps properties
Name	Type	Description
anchorRef	`RefObject<HTMLElement \| null>`	The control the menu opens from.
className?	`string`	Extra classes on the menu surface.
current	`string \| null`	The current branch, `null` when HEAD is detached.
cwd	`string`	The checkout.
onClose	`() => void`	Closes the menu (an outside press, Esc, a pick of the current row).
onSwitched	`() => void`	A switch, a new branch or a worktree move went through.
open	`boolean`	Whether the menu is shown.
sessionId	`string \| null`	The session the checkout belongs to (the host refuses a switch while its agent runs).
style?	`CSSProperties`	Inline styles on the menu surface.
worktree?	`BranchMenuWorktree`	The worktree this session can move into. Absent: no "Start a worktree".

ui/src/git/BranchMenu.tsx:93

`BranchMenuWorktree`Interface#

The worktree a session can be moved into: the Worktree environment kind, as its host offers it.

TypeScript

interface BranchMenuWorktree

Properties

BranchMenuWorktree properties
Name	Type	Description
available	`boolean`	It can be started now.
reason?	`string`	Why it cannot, when it cannot.
suggestedBranch?	`string`	The branch name a new worktree takes when none is typed.

ui/src/git/BranchMenu.tsx:83

`GitBarBranchMenuProps`Interface#

What the git bar hands its branch menu.

TypeScript

interface GitBarBranchMenuProps

Properties

GitBarBranchMenuProps properties
Name	Type	Description
anchorRef	`RefObject<HTMLButtonElement \| null>`	The branch button it opens from.
current	`string \| null`	The current branch; `null` when detached.
cwd	`string`	The checkout.
onClose	`() => void`	Close it.
onSwitched	`() => void`	A switch landed: the bar refreshes.
open	`boolean`	The menu is open.
sessionId	`string \| null`	The session working in it.

ui/src/git/GitBar.tsx:39

`GitBarProps`Interface#

Props for GitBar.

TypeScript

interface GitBarProps

Properties

GitBarProps properties
Name	Type	Default	Description
BranchMenu?	`ComponentType<GitBarBranchMenuProps>`		The branch switcher. Default: `BranchMenu`. Keep it stable.
className?	`string`		Extra class names for the root.
confirmSync?	`boolean`	`true`	Ask before a sync.
cwd	`string \| null`		The checkout, or `null` (a chat without a folder): the bar slides away.
onConfirmSyncChange?	`(confirm: boolean) => void`		"Don't ask again" at a sync's confirmation. Absent: no such checkbox.
onOpenPullRequest?	`(url: string) => void`		Opens the pull request's page, when the extensions' link handlers don't. Default: a new browser tab.
onShowChanges?	`() => void`		Shows the uncommitted changes (a Diffs panel). Absent: the count is not clickable.
running	`boolean`		The agent is working: no switching, no syncing.
sessionId	`string \| null`		The session working in it, whose activity refreshes the bar.
style?	`CSSProperties`		Inline styles on the root element.

ui/src/git/GitBar.tsx:57

`GitBarState`Interface#

What useGitBar returns.

TypeScript

interface GitBarState

Properties

GitBarState properties
Name	Type	Description
pending	`boolean`	A folder whose first answer is still on its way.
pullRequest	`GitBranchPullRequest \| null`	The branch's open pull request, or `null`.
refresh	`() => Promise<void>`	Reads the status again now (after a switch or a sync).
status	`GitStatus \| null`	Where the checkout stands; `null` outside a git checkout, for no folder, or before the first answer.

ui/src/git/useGitBar.ts:78

`GitProviderProps`Interface#

Props for GitProvider.

TypeScript

interface GitProviderProps

Properties

GitProviderProps properties
Name	Type	Description
children	`ReactNode`	The app.
host	`GitHost`	The host the git components read.
labels?	Partial<{ gitAhead: (count: number) => string; gitApproved: string; gitAuthorLabel: (author: string) => string; gitBehind: (count: number) => string; gitBranch: string; gitBranchButton: (branch: string) => string; gitBranchChipLabel: (branch: string) => string; gitBranchDetached: (commit: string) => string; gitBranchHint: string; gitBranchPlaceholder: string; gitBranchSwitch: string; gitBranchSwitchLater: string; gitChangesRequested: string; gitChangesTooltip: string; gitChecksLabel: (checks: Checks) => string; gitChecksText: (checks: Checks) => string; gitCommitsAhead: (count: number, base: string \| null) => string; gitCommitsBehind: (count: number) => string; gitCopyBranch: string; gitDefaultBranch: string; gitDontAskAgain: string; gitDraft: string; gitDriftLabel: (ahead: number, behind: number) => string; gitEnvironmentSettings: string; gitFactsThen: (facts: string, action: string) => string; gitFilesUnit: (count: number) => ' file' \| ' files'; gitFolderBackToRoots: string; gitFolderCancel: string; gitFolderCreate: string; gitFolderCreating: string; gitFolderDefault: string; gitFolderDefaultTitle: (host: string) => string; gitFolderEmpty: string; gitFolderFilter: string; gitFolderFilterLabel: string; gitFolderNew: string; gitFolderNewName: string; gitFolderNewNameLabel: (parent: string) => string; gitFolderNoMatch: string; gitFolderOpenPath: (path: string) => string; gitFolderPathLabel: string; gitFolderPickerLabel: (host: string) => string; gitFolderReading: string; gitFolderRoots: string; gitFolderSearchDeeper: (query: string) => string; gitFolderSearching: string; gitFolderSearchNone: string; gitFolderSearchResults: string; gitFolderSearchTruncated: string; gitFolderTitle: (folder: string, host: string) => string; gitFolderUse: (name: string) => string; gitFork: string; gitFromHere: string; gitHostLocalDescription: string; gitHostServerDescription: string; gitImportArchived: string; gitImportCancel: string; gitImportChange: string; gitImportClone: string; gitImportCloning: string; gitImportConnecting: string; gitImportField: string; gitImportHintAfter: string; gitImportHintBefore: string; gitImportHintCode: string; gitImportInto: string; gitImportInvalid: string; gitImportPlaceholder: string; gitImportPreview: (label: string, branch: string \| undefined, destination: string) => string; gitImportPrivate: string; gitImportProgress: (phase: string, percent: number) => string; gitImportStars: (stars: number) => string; gitImportStop: string; gitImportTitle: string; gitImportViewOnGithub: string; gitIsolation: string; gitIsolationDefault: string; gitLastCommitAge: (age: string, duration: boolean) => string; gitListLabel: string; gitLoadingBranches: string; gitLocal: string; gitLocalLabel: string; gitMachineDescription: (name: string) => string; gitMachineOffline: (name: string) => string; gitMachineStatus: (status: string) => string; gitMenuLabel: string; gitMore: (count: number) => string; gitMoreSearchHint: string; gitMoveBack: string; gitMoveBranch: string; gitMoveCancel: string; gitMoveChangeFolder: string; gitMoveConfirm: (name: string) => string; gitMoveConfirmDetail: string; gitMoveCurrent: string; gitMoveDone: string; gitMoveFolder: string; gitMoveKeepFolder: string; gitMoveLoading: string; gitMoveMainCheckout: string; gitMoveMoving: string; gitMoveNone: string; gitMoveOffline: string; gitMovePickFolder: (name: string) => string; gitMoveRemoveWorktree: string; gitMovesThisChat: string; gitMoveSubmit: string; gitMoveTitle: string; gitMoveWhere: string; gitMoveWorktreeKept: (reason: string \| undefined) => string; gitNoGh: string; gitNoMatches: string; gitOpenOnGitHub: string; gitOpenPullRequest: (number: number) => string; gitPrDraft: string; gitPrTooltip: (pr: { draft: boolean; number: number; title: string }) => string; gitPublish: string; gitPublishBranch: (branch: string) => string; gitPublishDialog: string; gitPublishing: string; gitPublishLater: string; gitPublishSummary: (branch: string, ahead: number, remote: string \| null) => string; gitPublishTo: (remote: string \| null) => string; gitRateLimited: (clock: string) => string; gitRowCurrent: string; gitRowSwitching: string; gitRunsOn: string; gitRunsOnHelpLabel: string; gitRunsOnLocal: string; gitRunsOnLocalFact: string; gitRunsOnMachine: string; gitRunsOnMachineFact: string; gitRunsOnServer: string; gitRunsOnServerFact: string; gitSearching: string; gitSearchLabel: string; gitSearchPlaceholder: string; gitSectionBranches: string; gitSectionMine: string; gitSectionOther: string; gitSectionPullRequests: string; gitSectionReview: string; gitStartAsWorktree: string; gitStartBranch: string; gitStartBranchLabel: (name: string) => string; gitStartCheckedOutElsewhere: (path: string) => string; gitStartingWorktree: string; gitStartNoWorktree: string; gitStartTheWorktree: string; gitStartWorktree: string; gitStartWorktreeLabel: (name: string) => string; gitSync: string; gitSyncCancel: string; gitSyncDialog: string; gitSyncing: string; gitSyncKeepsChanges: string; gitSyncLater: string; gitSyncSummary: (behind: number, ahead: number, upstream: string) => string; gitSyncWith: (upstream: string \| null) => string; gitToPull: (count: number) => string; gitToPush: (count: number) => string; gitUnavailable: string; gitUpdatedAge: (age: string, duration: boolean) => string; gitUpToDate: (upstream: string) => string; gitWhereLabel: string; gitWhereTitle: (place: string, isolation: string \| undefined, branch: string \| undefined) => string; gitWorktreeBranchLabel: string; gitWorktreeBranchPlaceholder: string; gitWorktreeShort: string }>	Overrides for the built-in strings. Keys you leave out keep the default English label.

ui/src/git/GitProvider.tsx:19

`ImportRepoDialogProps`Interface#

Props for ImportRepoDialog.

TypeScript

interface ImportRepoDialogProps

Properties

ImportRepoDialogProps properties
Name	Type	Description
className?	`string`	Extra class names for the root.
clone	`GitClone`	How the host clones.
hostId?	`string`	The saved server the clone lands on (`HostView.id`), for showing its folders. Absent: this computer.
initialParent	`string`	Where the clone lands until the user picks another folder.
onCancel	`() => void`	Closed without cloning.
onDone	`(path: string) => void`	The repository is in place: its folder.
pickFolder?	`() => Promise<string \| null>`	Picks another parent folder; `null` when cancelled. Absent: no Change button.
style?	`CSSProperties`	Inline styles on the root element.

ui/src/git/ImportRepoDialog.tsx:44

`ImportRepoTarget`Interface#

Where useImportRepo clones.

TypeScript

interface ImportRepoTarget

Properties

ImportRepoTarget properties
Name	Type	Description
hostId	`string`	A saved server: the clone lands there (`GitHost.cloneOnServer`).

ui/src/git/ImportRepoDialog.tsx:331

`MoveSessionDialogProps`Interface#

Props for MoveSessionDialog.

TypeScript

interface MoveSessionDialogProps

Properties

MoveSessionDialogProps properties
Name	Type	Description
className?	`string`	Extra class names for the root.
onCancel	`() => void`	Closed without moving.
onDone	`() => void`	The session moved.
style?	`CSSProperties`	Inline styles on the root element.
subject	`MoveSessionSubject`	The session to move.

ui/src/git/MoveSessionDialog.tsx:41

`RemoteFolderBrowserProps`Interface#

Props for RemoteFolderBrowser.

TypeScript

interface RemoteFolderBrowserProps

Properties

RemoteFolderBrowserProps properties
Name	Type	Description
className?	`string`	Extra classes on the menu.
hostId?	`string`	The saved server whose folders to list (hosts that reach several).
machineId?	`string`	A machine shared with that host: its folders instead.
onUse	`(path: string) => void`	Called with the folder picked.
start	`string \| null`	The folder to open on, `null` for the first root.
style?	`CSSProperties`	Inline styles on the menu.

ui/src/git/RemoteFolderPicker.tsx:31

`RemoteFolderPickerProps`Interface#

Props for RemoteFolderPicker.

TypeScript

interface RemoteFolderPickerProps

Properties

RemoteFolderPickerProps properties
Name	Type	Description
className?	`string`	Extra classes on the pill.
folder	`string \| null`	The folder picked, `null` for the host's first workspace root.
hostId?	`string`	The saved server whose folders to list (hosts that reach several).
hostName	`string`	The host's (or machine's) name, as the pill and the menu say it.
machineId?	`string`	A machine shared with that host: its folders instead.
onChange	`(folder: string \| null) => void`	Called with the folder picked.
placeholder?	`string`	The pill's label while no folder is picked. Default: the `gitFolderDefault` label.
style?	`CSSProperties`	Inline styles on the pill.

ui/src/git/RemoteFolderPicker.tsx:47

`SyncChipProps`Interface#

Props for SyncChip.

TypeScript

interface SyncChipProps

Properties

SyncChipProps properties
Name	Type	Default	Description
className?	`string`		Extra class names for the root.
confirm?	`boolean`	`true`	Ask before syncing.
cwd	`string`		The checkout.
onConfirmChange?	`(confirm: boolean) => void`		"Don't ask again" was ticked at a confirmed sync. Absent: no such checkbox.
onSynced	`() => void \| Promise<void>`		Called after every sync, worked or not (refresh the status).
running	`boolean`		The agent is working: the chip is disabled.
sessionId	`string \| null`		The session working in it (the host may refuse while it runs).
status	`GitStatus`		The checkout's status.
style?	`CSSProperties`		Inline styles on the root element.

ui/src/git/SyncChip.tsx:38

`WhereMenuProps`Interface#

Props for WhereMenu: what WherePicker shows, and how a pick closes it.

TypeScript

interface WhereMenuProps

Properties

WhereMenuProps properties
Name	Type	Description
className?	`string`	Extra classes on the menu.
descriptors	`readonly EnvironmentDescriptor[]`	The draft host's environment kinds (`withMachines` applied).
draft	`DraftEnvironment \| null`	The draft's pick, `null` for the default.
hiddenMachines?	`ReadonlySet<string>`	Machine names not to list (servers this computer also uses as machines, shown as servers).
hostId	`string`	The draft's host.
hosts	`readonly HostView[]`	This computer first, then the saved servers.
onChange	`(next: DraftEnvironment) => void`	Called with the draft's new pick.
onClose?	`() => void`	Called after a pick that ends the choice (the popover closes).
onHostChange	`(hostId: string) => void`	Called with the host picked.
onOpenSettings?	`() => void`	Opens the environment settings. Absent: no settings row.
style?	`CSSProperties`	Inline styles on the menu.

ui/src/git/WherePicker.tsx:41

Types#

`StartFromPanelDraft`Type#

The draft a start sets up.

TypeScript

type StartFromPanelDraft = Pick<DraftTarget, 'environment' | 'setEnvironment' | 'environmentChoices'>

ui/src/git/useStartFromPanel.ts:24

`StartFromPanelResult`Type#

What a start answered: done, or why not in words.

TypeScript

type StartFromPanelResult = { ok: true } | { message: string; ok: false }

ui/src/git/useStartFromPanel.ts:21

`WherePickerProps`Type#

Props for WherePicker.

TypeScript

type WherePickerProps = Omit<WhereMenuProps, 'onClose'>

ui/src/git/WherePicker.tsx:67

Components#

BranchMenuComponent#

Parameters

Returns

Props

GitBarComponent#

GitProviderComponent#

Parameters

Returns

Props

ImportRepoDialogComponent#

Parameters

Returns

Props

MoveSessionDialogComponent#

Parameters

Returns

Props

RemoteFolderBrowserComponent#

Parameters

Returns

Props

RemoteFolderPickerComponent#

Parameters

Returns

Props

SyncChipComponent#

Parameters

Returns

Props

WhereMenuComponent#

Parameters

Returns

Props

WherePickerComponent#

Parameters

Returns

Functions#

useEnvironmentChoicesFunction#

Parameters

Returns

useGitBarFunction#

Parameters

Returns

useGitHostFunction#

Returns

useGitLabelsFunction#

Returns

useImportRepoFunction#

Parameters

Returns

useMoveSessionFunction#

Returns

useStartFromPanelFunction#

Parameters

Returns

Constants#

GIT_BAR_ITEMConstant#

Interfaces#

BranchMenuPropsInterface#

Properties

BranchMenuWorktreeInterface#

Properties

GitBarBranchMenuPropsInterface#

Properties

GitBarPropsInterface#

Properties

GitBarStateInterface#

Properties

GitProviderPropsInterface#

Properties

ImportRepoDialogPropsInterface#

Properties

ImportRepoTargetInterface#

Properties

MoveSessionDialogPropsInterface#

Properties

RemoteFolderBrowserPropsInterface#

Properties

RemoteFolderPickerPropsInterface#

`BranchMenu`Component#

`GitBar`Component#

`GitProvider`Component#

`ImportRepoDialog`Component#

`MoveSessionDialog`Component#

`RemoteFolderBrowser`Component#

`RemoteFolderPicker`Component#

`SyncChip`Component#

`WhereMenu`Component#

`WherePicker`Component#

`useEnvironmentChoices`Function#

`useGitBar`Function#

`useGitHost`Function#

`useGitLabels`Function#

`useImportRepo`Function#

`useMoveSession`Function#

`useStartFromPanel`Function#

`GIT_BAR_ITEM`Constant#

`BranchMenuProps`Interface#

`BranchMenuWorktree`Interface#

`GitBarBranchMenuProps`Interface#

`GitBarProps`Interface#

`GitBarState`Interface#

`GitProviderProps`Interface#

`ImportRepoDialogProps`Interface#

`ImportRepoTarget`Interface#

`MoveSessionDialogProps`Interface#

`RemoteFolderBrowserProps`Interface#

`RemoteFolderPickerProps`Interface#

`SyncChipProps`Interface#

`WhereMenuProps`Interface#

`StartFromPanelDraft`Type#

`StartFromPanelResult`Type#

`WherePickerProps`Type#