@claude-code-kit/ui 0.1.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +265 -8
- package/dist/index.d.ts +265 -8
- package/dist/index.js +2000 -510
- package/dist/index.mjs +1866 -393
- package/package.json +18 -12
- package/LICENSE +0 -21
package/dist/index.d.mts
CHANGED
|
@@ -4,6 +4,35 @@ import * as React from 'react';
|
|
|
4
4
|
import React__default, { PropsWithChildren, Ref, ReactNode } from 'react';
|
|
5
5
|
import { Tokens } from 'marked';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import { Agent, AuthRegistry, LLMProvider } from '@claude-code-kit/agent';
|
|
8
|
+
|
|
9
|
+
type DiffLine = {
|
|
10
|
+
type: 'added' | 'removed' | 'context';
|
|
11
|
+
content: string;
|
|
12
|
+
oldLineNumber?: number;
|
|
13
|
+
newLineNumber?: number;
|
|
14
|
+
};
|
|
15
|
+
type DiffViewProps = {
|
|
16
|
+
filename: string;
|
|
17
|
+
lines: DiffLine[];
|
|
18
|
+
/** Raw unified diff string — parsed automatically if provided */
|
|
19
|
+
diff?: string;
|
|
20
|
+
/** Show line numbers (default: true) */
|
|
21
|
+
showLineNumbers?: boolean;
|
|
22
|
+
/** Max visible lines before showing a scroll hint */
|
|
23
|
+
maxHeight?: number;
|
|
24
|
+
color?: {
|
|
25
|
+
added?: string;
|
|
26
|
+
removed?: string;
|
|
27
|
+
context?: string;
|
|
28
|
+
header?: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
declare function parseUnifiedDiff(diff: string): {
|
|
32
|
+
filename: string;
|
|
33
|
+
lines: DiffLine[];
|
|
34
|
+
};
|
|
35
|
+
declare function DiffView({ filename, lines: propLines, diff, showLineNumbers, maxHeight, color: colorOverrides, }: DiffViewProps): React__default.ReactNode;
|
|
7
36
|
|
|
8
37
|
type DividerProps = {
|
|
9
38
|
width?: number;
|
|
@@ -38,11 +67,14 @@ type StatusLineProps = {
|
|
|
38
67
|
segments?: StatusLineSegment[];
|
|
39
68
|
text?: string;
|
|
40
69
|
paddingX?: number;
|
|
70
|
+
/** @deprecated Use separator instead. Gap between segments in columns. */
|
|
41
71
|
gap?: number;
|
|
72
|
+
/** Separator string between segments (default: ' · ') */
|
|
73
|
+
separator?: string;
|
|
42
74
|
borderStyle?: 'none' | 'single' | 'round';
|
|
43
75
|
borderColor?: Color;
|
|
44
76
|
};
|
|
45
|
-
declare function StatusLine({ segments, text, paddingX,
|
|
77
|
+
declare function StatusLine({ segments, text, paddingX, separator, borderStyle, borderColor, }: StatusLineProps): React__default.ReactNode;
|
|
46
78
|
declare function useStatusLine(updater: () => StatusLineSegment[] | string, deps: unknown[], intervalMs?: number): StatusLineSegment[] | string;
|
|
47
79
|
|
|
48
80
|
type CommandResult = {
|
|
@@ -213,8 +245,10 @@ type PromptInputProps = {
|
|
|
213
245
|
commands?: Command[];
|
|
214
246
|
onCommandSelect?: (name: string) => void;
|
|
215
247
|
history?: string[];
|
|
248
|
+
vimMode?: boolean;
|
|
249
|
+
multiline?: boolean;
|
|
216
250
|
};
|
|
217
|
-
declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, }: PromptInputProps): React__default.ReactNode;
|
|
251
|
+
declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, vimMode, multiline, }: PromptInputProps): React__default.ReactNode;
|
|
218
252
|
|
|
219
253
|
type SpinnerProps = {
|
|
220
254
|
label?: string;
|
|
@@ -286,10 +320,69 @@ type MultiSelectProps<T = string> = Omit<SelectProps<T>, 'onChange'> & {
|
|
|
286
320
|
declare function Select<T = string>({ options, defaultValue, onChange, onCancel, title, maxVisible, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
287
321
|
declare function MultiSelect<T = string>({ options, selectedValues, onToggle, onConfirm, onCancel, title, maxVisible, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
288
322
|
|
|
323
|
+
type PermissionAction = 'allow' | 'always_allow' | 'deny';
|
|
324
|
+
type PermissionRequestProps = {
|
|
325
|
+
toolName: string;
|
|
326
|
+
description: string;
|
|
327
|
+
/** Optional details (command, file path, diff, etc.) */
|
|
328
|
+
details?: string;
|
|
329
|
+
/** Whether to show "Always Allow" option (default true) */
|
|
330
|
+
showAlwaysAllow?: boolean;
|
|
331
|
+
/** Callback when user makes a decision */
|
|
332
|
+
onDecision: (action: PermissionAction, feedback?: string) => void;
|
|
333
|
+
/** Optional custom content between description and buttons */
|
|
334
|
+
children?: React__default.ReactNode;
|
|
335
|
+
/** Optional: render a DiffView or code preview */
|
|
336
|
+
preview?: React__default.ReactNode;
|
|
337
|
+
};
|
|
338
|
+
declare function BashPermissionContent({ command }: {
|
|
339
|
+
command: string;
|
|
340
|
+
}): React__default.ReactNode;
|
|
341
|
+
declare function FileEditPermissionContent({ filename, diff, }: {
|
|
342
|
+
filename: string;
|
|
343
|
+
diff: string;
|
|
344
|
+
}): React__default.ReactNode;
|
|
345
|
+
declare function PermissionRequest({ toolName, description, details, showAlwaysAllow, onDecision, children, preview, }: PermissionRequestProps): React__default.ReactNode;
|
|
346
|
+
|
|
347
|
+
type MessageContent = {
|
|
348
|
+
type: 'text';
|
|
349
|
+
text: string;
|
|
350
|
+
} | {
|
|
351
|
+
type: 'tool_use';
|
|
352
|
+
toolName: string;
|
|
353
|
+
input: string;
|
|
354
|
+
result?: string;
|
|
355
|
+
status?: 'running' | 'success' | 'error';
|
|
356
|
+
} | {
|
|
357
|
+
type: 'thinking';
|
|
358
|
+
text: string;
|
|
359
|
+
collapsed?: boolean;
|
|
360
|
+
} | {
|
|
361
|
+
type: 'diff';
|
|
362
|
+
filename: string;
|
|
363
|
+
diff: string;
|
|
364
|
+
} | {
|
|
365
|
+
type: 'code';
|
|
366
|
+
language?: string;
|
|
367
|
+
code: string;
|
|
368
|
+
} | {
|
|
369
|
+
type: 'error';
|
|
370
|
+
message: string;
|
|
371
|
+
details?: string;
|
|
372
|
+
};
|
|
373
|
+
/**
|
|
374
|
+
* Display-oriented message type for rendering in the terminal UI.
|
|
375
|
+
*
|
|
376
|
+
* This type adds `id` and `timestamp` fields for UI purposes and supports
|
|
377
|
+
* rich `MessageContent[]` for rendering tool calls, diffs, code blocks, etc.
|
|
378
|
+
* It is distinct from the protocol-level `Message` type in
|
|
379
|
+
* `@claude-code-kit/agent`, which represents raw LLM conversation messages.
|
|
380
|
+
* The `useAgent` hook handles conversion between the two formats automatically.
|
|
381
|
+
*/
|
|
289
382
|
type Message = {
|
|
290
383
|
id: string;
|
|
291
384
|
role: 'user' | 'assistant' | 'system';
|
|
292
|
-
content: string;
|
|
385
|
+
content: string | MessageContent[];
|
|
293
386
|
timestamp?: number;
|
|
294
387
|
};
|
|
295
388
|
type MessageListProps = {
|
|
@@ -308,18 +401,27 @@ type StreamingTextProps = {
|
|
|
308
401
|
};
|
|
309
402
|
declare function StreamingText({ text, speed, interval, onComplete, color, }: StreamingTextProps): React__default.ReactNode;
|
|
310
403
|
|
|
311
|
-
type REPLCommand = {
|
|
404
|
+
type REPLCommand$1 = {
|
|
312
405
|
name: string;
|
|
313
406
|
description: string;
|
|
314
407
|
onExecute: (args: string) => void;
|
|
315
408
|
};
|
|
409
|
+
type PermissionRequestState = {
|
|
410
|
+
toolName: string;
|
|
411
|
+
description: string;
|
|
412
|
+
details?: string;
|
|
413
|
+
preview?: React__default.ReactNode;
|
|
414
|
+
onDecision: (action: PermissionAction) => void;
|
|
415
|
+
};
|
|
316
416
|
type REPLProps = {
|
|
317
417
|
onSubmit: (message: string) => Promise<void> | void;
|
|
318
418
|
onExit?: () => void;
|
|
319
419
|
messages: Message[];
|
|
320
420
|
isLoading?: boolean;
|
|
321
421
|
streamingContent?: string | null;
|
|
322
|
-
|
|
422
|
+
welcome?: React__default.ReactNode;
|
|
423
|
+
permissionRequest?: PermissionRequestState;
|
|
424
|
+
commands?: REPLCommand$1[];
|
|
323
425
|
model?: string;
|
|
324
426
|
statusSegments?: StatusLineSegment[];
|
|
325
427
|
prefix?: string;
|
|
@@ -328,9 +430,9 @@ type REPLProps = {
|
|
|
328
430
|
renderMessage?: (message: Message) => React__default.ReactNode;
|
|
329
431
|
spinner?: React__default.ReactNode;
|
|
330
432
|
};
|
|
331
|
-
declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React__default.ReactNode;
|
|
433
|
+
declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, welcome, permissionRequest, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React__default.ReactNode;
|
|
332
434
|
|
|
333
|
-
type ThemeName = 'dark' | 'light';
|
|
435
|
+
type ThemeName = 'dark' | 'light' | 'light-high-contrast' | 'dark-dimmed';
|
|
334
436
|
type ThemeSetting = ThemeName | 'auto';
|
|
335
437
|
type Theme = {
|
|
336
438
|
text: string;
|
|
@@ -344,6 +446,28 @@ type Theme = {
|
|
|
344
446
|
inactive: string;
|
|
345
447
|
inverseText: string;
|
|
346
448
|
permission: string;
|
|
449
|
+
diffAdded: string;
|
|
450
|
+
diffRemoved: string;
|
|
451
|
+
diffAddedWord: string;
|
|
452
|
+
diffRemovedWord: string;
|
|
453
|
+
diffHeader: string;
|
|
454
|
+
userMessage: string;
|
|
455
|
+
assistantMessage: string;
|
|
456
|
+
systemMessage: string;
|
|
457
|
+
toolUseMessage: string;
|
|
458
|
+
permissionAllow: string;
|
|
459
|
+
permissionDeny: string;
|
|
460
|
+
permissionAlways: string;
|
|
461
|
+
focus: string;
|
|
462
|
+
selection: string;
|
|
463
|
+
placeholder: string;
|
|
464
|
+
link: string;
|
|
465
|
+
code: string;
|
|
466
|
+
codeBackground: string;
|
|
467
|
+
blockquote: string;
|
|
468
|
+
info: string;
|
|
469
|
+
spinnerColor: string;
|
|
470
|
+
shimmer: string;
|
|
347
471
|
};
|
|
348
472
|
declare function getTheme(name: ThemeName): Theme;
|
|
349
473
|
type Props$6 = {
|
|
@@ -669,4 +793,137 @@ declare function Byline({ children }: Props): React__default.ReactNode;
|
|
|
669
793
|
*/
|
|
670
794
|
declare function color(c: keyof Theme | Color | undefined, theme: ThemeName, type?: ColorType): (text: string) => string;
|
|
671
795
|
|
|
672
|
-
|
|
796
|
+
type VirtualScrollOptions = {
|
|
797
|
+
itemCount: number;
|
|
798
|
+
/** Lines per item (default: 3) */
|
|
799
|
+
estimatedItemHeight?: number;
|
|
800
|
+
/** Extra items rendered above/below the viewport (default: 20) */
|
|
801
|
+
overscan?: number;
|
|
802
|
+
/** Visible terminal rows */
|
|
803
|
+
viewportHeight: number;
|
|
804
|
+
};
|
|
805
|
+
type VirtualScrollResult = {
|
|
806
|
+
startIndex: number;
|
|
807
|
+
endIndex: number;
|
|
808
|
+
visibleItems: number;
|
|
809
|
+
totalHeight: number;
|
|
810
|
+
scrollOffset: number;
|
|
811
|
+
scrollTo: (index: number) => void;
|
|
812
|
+
scrollToEnd: () => void;
|
|
813
|
+
/** Adjust scroll by delta items (+1 = down, -1 = up) */
|
|
814
|
+
onScroll: (delta: number) => void;
|
|
815
|
+
isAtTop: boolean;
|
|
816
|
+
isAtEnd: boolean;
|
|
817
|
+
};
|
|
818
|
+
type VirtualListProps<T> = {
|
|
819
|
+
items: T[];
|
|
820
|
+
renderItem: (item: T, index: number) => ReactNode;
|
|
821
|
+
viewportHeight: number;
|
|
822
|
+
estimatedItemHeight?: number;
|
|
823
|
+
overscan?: number;
|
|
824
|
+
};
|
|
825
|
+
declare function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollResult;
|
|
826
|
+
declare function VirtualList<T>(props: VirtualListProps<T>): ReactNode;
|
|
827
|
+
|
|
828
|
+
type SearchMatch = {
|
|
829
|
+
index: number;
|
|
830
|
+
offset: number;
|
|
831
|
+
length: number;
|
|
832
|
+
};
|
|
833
|
+
type SearchOverlayProps = {
|
|
834
|
+
isOpen: boolean;
|
|
835
|
+
onClose: () => void;
|
|
836
|
+
onSearch: (query: string) => SearchMatch[];
|
|
837
|
+
onNavigate: (match: SearchMatch) => void;
|
|
838
|
+
matchCount?: number;
|
|
839
|
+
currentMatch?: number;
|
|
840
|
+
};
|
|
841
|
+
type UseSearchResult = {
|
|
842
|
+
query: string;
|
|
843
|
+
matches: SearchMatch[];
|
|
844
|
+
currentIndex: number;
|
|
845
|
+
next: () => void;
|
|
846
|
+
previous: () => void;
|
|
847
|
+
setQuery: (q: string) => void;
|
|
848
|
+
};
|
|
849
|
+
type UseSearchOptions = {
|
|
850
|
+
content: string[];
|
|
851
|
+
isActive: boolean;
|
|
852
|
+
};
|
|
853
|
+
declare function useSearch({ content, isActive }: UseSearchOptions): UseSearchResult;
|
|
854
|
+
declare function SearchOverlay({ isOpen, onClose, onSearch, onNavigate, }: SearchOverlayProps): React__default.ReactNode;
|
|
855
|
+
|
|
856
|
+
type WelcomeScreenProps = {
|
|
857
|
+
appName: string;
|
|
858
|
+
subtitle?: string;
|
|
859
|
+
version?: string;
|
|
860
|
+
tips?: string[];
|
|
861
|
+
logo?: React__default.ReactNode;
|
|
862
|
+
model?: string;
|
|
863
|
+
color?: string;
|
|
864
|
+
};
|
|
865
|
+
declare function ClawdLogo({ color }: {
|
|
866
|
+
color?: string;
|
|
867
|
+
}): React__default.ReactNode;
|
|
868
|
+
declare function WelcomeScreen({ appName, subtitle, version, tips, logo, model, color, }: WelcomeScreenProps): React__default.ReactNode;
|
|
869
|
+
|
|
870
|
+
type PermissionUIRequest = {
|
|
871
|
+
toolName: string;
|
|
872
|
+
description: string;
|
|
873
|
+
details?: string;
|
|
874
|
+
resolve: (decision: 'allow' | 'deny') => void;
|
|
875
|
+
};
|
|
876
|
+
type UseAgentOptions = {
|
|
877
|
+
agent: Agent;
|
|
878
|
+
onError?: (error: Error) => void;
|
|
879
|
+
};
|
|
880
|
+
type UseAgentResult = {
|
|
881
|
+
messages: Message[];
|
|
882
|
+
isLoading: boolean;
|
|
883
|
+
streamingContent: string | null;
|
|
884
|
+
permissionRequest: PermissionUIRequest | null;
|
|
885
|
+
submit: (input: string) => void;
|
|
886
|
+
cancel: () => void;
|
|
887
|
+
clearMessages: () => void;
|
|
888
|
+
};
|
|
889
|
+
declare function useAgent({ agent, onError }: UseAgentOptions): UseAgentResult;
|
|
890
|
+
|
|
891
|
+
type AgentContextValue = UseAgentResult & {
|
|
892
|
+
agent: Agent;
|
|
893
|
+
model: string;
|
|
894
|
+
};
|
|
895
|
+
declare const AgentContext: React__default.Context<AgentContextValue | null>;
|
|
896
|
+
type AgentProviderProps = {
|
|
897
|
+
agent: Agent;
|
|
898
|
+
model?: string;
|
|
899
|
+
onError?: (error: Error) => void;
|
|
900
|
+
children: React__default.ReactNode;
|
|
901
|
+
};
|
|
902
|
+
declare function AgentProvider({ agent, model, onError, children, }: AgentProviderProps): React__default.ReactNode;
|
|
903
|
+
declare function useAgentContext(): AgentContextValue;
|
|
904
|
+
|
|
905
|
+
type REPLCommand = {
|
|
906
|
+
name: string;
|
|
907
|
+
description: string;
|
|
908
|
+
onExecute: (args: string) => void;
|
|
909
|
+
};
|
|
910
|
+
type AgentREPLProps = {
|
|
911
|
+
agent: Agent;
|
|
912
|
+
model?: string;
|
|
913
|
+
commands?: REPLCommand[];
|
|
914
|
+
welcome?: React__default.ReactNode;
|
|
915
|
+
placeholder?: string;
|
|
916
|
+
onError?: (error: Error) => void;
|
|
917
|
+
onExit?: () => void;
|
|
918
|
+
};
|
|
919
|
+
declare function AgentREPL({ agent, model, commands, welcome, placeholder, onError, onExit, }: AgentREPLProps): React__default.ReactNode;
|
|
920
|
+
|
|
921
|
+
type AuthFlowUIProps = {
|
|
922
|
+
auth: AuthRegistry;
|
|
923
|
+
onComplete: (provider: LLMProvider, providerName: string, model: string) => void;
|
|
924
|
+
onCancel?: () => void;
|
|
925
|
+
title?: string;
|
|
926
|
+
};
|
|
927
|
+
declare function AuthFlowUI({ auth, onComplete, onCancel, title, }: AuthFlowUIProps): React__default.ReactNode;
|
|
928
|
+
|
|
929
|
+
export { AgentContext, type AgentContextValue, AgentProvider, type AgentProviderProps, AgentREPL, type AgentREPLProps, AuthFlowUI, type AuthFlowUIProps, BashPermissionContent, Byline, ClawdLogo, type Command$1 as Command, type CommandBase, type CommandOnDone, CommandRegistry, type CommandResult, DEFAULT_BINDINGS, Dialog, type DiffLine, DiffView, type DiffViewProps, Divider, FileEditPermissionContent, FuzzyPicker, type JSXCommand, KeybindingSetup, KeyboardShortcutHint, ListItem, LoadingState, type LocalCommand, Markdown, MarkdownTable, type Message, type MessageContent, MessageList, type MessageListProps, MultiSelect, type MultiSelectProps, Pane, type PermissionAction, PermissionRequest, type PermissionRequestProps, type PermissionUIRequest, ProgressBar, PromptInput, REPL, type REPLProps, Ratchet, type SearchMatch, SearchOverlay, type SearchOverlayProps, Select, type SelectOption, type SelectProps, Spinner, StatusIcon, StatusLine, type StatusLineProps, type StatusLineSegment, StreamingMarkdown, StreamingText, type StreamingTextProps, Tab, Tabs, type TerminalSize, TextHoverColorContext, type Theme, type ThemeName, ThemeProvider, type ThemeSetting, ThemedBox, type Props$5 as ThemedBoxProps, ThemedText, type Props$4 as ThemedTextProps, type UseAgentOptions, type UseAgentResult, type UseSearchResult, VirtualList, type VirtualListProps, type VirtualScrollOptions, type VirtualScrollResult, WelcomeScreen, type WelcomeScreenProps, clearCommand, color, createCommandRegistry, defineCommand, defineJSXCommand, defineLocalCommand, exitCommand, getTheme, helpCommand, parseUnifiedDiff, useAgent, useAgentContext, useDoublePress, useKeybinding, useKeybindings, usePreviewTheme, useSearch, useStatusLine, useTabsWidth, useTerminalSize, useTheme, useThemeSetting, useVirtualScroll };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,35 @@ import * as React from 'react';
|
|
|
4
4
|
import React__default, { PropsWithChildren, Ref, ReactNode } from 'react';
|
|
5
5
|
import { Tokens } from 'marked';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import { Agent, AuthRegistry, LLMProvider } from '@claude-code-kit/agent';
|
|
8
|
+
|
|
9
|
+
type DiffLine = {
|
|
10
|
+
type: 'added' | 'removed' | 'context';
|
|
11
|
+
content: string;
|
|
12
|
+
oldLineNumber?: number;
|
|
13
|
+
newLineNumber?: number;
|
|
14
|
+
};
|
|
15
|
+
type DiffViewProps = {
|
|
16
|
+
filename: string;
|
|
17
|
+
lines: DiffLine[];
|
|
18
|
+
/** Raw unified diff string — parsed automatically if provided */
|
|
19
|
+
diff?: string;
|
|
20
|
+
/** Show line numbers (default: true) */
|
|
21
|
+
showLineNumbers?: boolean;
|
|
22
|
+
/** Max visible lines before showing a scroll hint */
|
|
23
|
+
maxHeight?: number;
|
|
24
|
+
color?: {
|
|
25
|
+
added?: string;
|
|
26
|
+
removed?: string;
|
|
27
|
+
context?: string;
|
|
28
|
+
header?: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
declare function parseUnifiedDiff(diff: string): {
|
|
32
|
+
filename: string;
|
|
33
|
+
lines: DiffLine[];
|
|
34
|
+
};
|
|
35
|
+
declare function DiffView({ filename, lines: propLines, diff, showLineNumbers, maxHeight, color: colorOverrides, }: DiffViewProps): React__default.ReactNode;
|
|
7
36
|
|
|
8
37
|
type DividerProps = {
|
|
9
38
|
width?: number;
|
|
@@ -38,11 +67,14 @@ type StatusLineProps = {
|
|
|
38
67
|
segments?: StatusLineSegment[];
|
|
39
68
|
text?: string;
|
|
40
69
|
paddingX?: number;
|
|
70
|
+
/** @deprecated Use separator instead. Gap between segments in columns. */
|
|
41
71
|
gap?: number;
|
|
72
|
+
/** Separator string between segments (default: ' · ') */
|
|
73
|
+
separator?: string;
|
|
42
74
|
borderStyle?: 'none' | 'single' | 'round';
|
|
43
75
|
borderColor?: Color;
|
|
44
76
|
};
|
|
45
|
-
declare function StatusLine({ segments, text, paddingX,
|
|
77
|
+
declare function StatusLine({ segments, text, paddingX, separator, borderStyle, borderColor, }: StatusLineProps): React__default.ReactNode;
|
|
46
78
|
declare function useStatusLine(updater: () => StatusLineSegment[] | string, deps: unknown[], intervalMs?: number): StatusLineSegment[] | string;
|
|
47
79
|
|
|
48
80
|
type CommandResult = {
|
|
@@ -213,8 +245,10 @@ type PromptInputProps = {
|
|
|
213
245
|
commands?: Command[];
|
|
214
246
|
onCommandSelect?: (name: string) => void;
|
|
215
247
|
history?: string[];
|
|
248
|
+
vimMode?: boolean;
|
|
249
|
+
multiline?: boolean;
|
|
216
250
|
};
|
|
217
|
-
declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, }: PromptInputProps): React__default.ReactNode;
|
|
251
|
+
declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, vimMode, multiline, }: PromptInputProps): React__default.ReactNode;
|
|
218
252
|
|
|
219
253
|
type SpinnerProps = {
|
|
220
254
|
label?: string;
|
|
@@ -286,10 +320,69 @@ type MultiSelectProps<T = string> = Omit<SelectProps<T>, 'onChange'> & {
|
|
|
286
320
|
declare function Select<T = string>({ options, defaultValue, onChange, onCancel, title, maxVisible, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
287
321
|
declare function MultiSelect<T = string>({ options, selectedValues, onToggle, onConfirm, onCancel, title, maxVisible, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
288
322
|
|
|
323
|
+
type PermissionAction = 'allow' | 'always_allow' | 'deny';
|
|
324
|
+
type PermissionRequestProps = {
|
|
325
|
+
toolName: string;
|
|
326
|
+
description: string;
|
|
327
|
+
/** Optional details (command, file path, diff, etc.) */
|
|
328
|
+
details?: string;
|
|
329
|
+
/** Whether to show "Always Allow" option (default true) */
|
|
330
|
+
showAlwaysAllow?: boolean;
|
|
331
|
+
/** Callback when user makes a decision */
|
|
332
|
+
onDecision: (action: PermissionAction, feedback?: string) => void;
|
|
333
|
+
/** Optional custom content between description and buttons */
|
|
334
|
+
children?: React__default.ReactNode;
|
|
335
|
+
/** Optional: render a DiffView or code preview */
|
|
336
|
+
preview?: React__default.ReactNode;
|
|
337
|
+
};
|
|
338
|
+
declare function BashPermissionContent({ command }: {
|
|
339
|
+
command: string;
|
|
340
|
+
}): React__default.ReactNode;
|
|
341
|
+
declare function FileEditPermissionContent({ filename, diff, }: {
|
|
342
|
+
filename: string;
|
|
343
|
+
diff: string;
|
|
344
|
+
}): React__default.ReactNode;
|
|
345
|
+
declare function PermissionRequest({ toolName, description, details, showAlwaysAllow, onDecision, children, preview, }: PermissionRequestProps): React__default.ReactNode;
|
|
346
|
+
|
|
347
|
+
type MessageContent = {
|
|
348
|
+
type: 'text';
|
|
349
|
+
text: string;
|
|
350
|
+
} | {
|
|
351
|
+
type: 'tool_use';
|
|
352
|
+
toolName: string;
|
|
353
|
+
input: string;
|
|
354
|
+
result?: string;
|
|
355
|
+
status?: 'running' | 'success' | 'error';
|
|
356
|
+
} | {
|
|
357
|
+
type: 'thinking';
|
|
358
|
+
text: string;
|
|
359
|
+
collapsed?: boolean;
|
|
360
|
+
} | {
|
|
361
|
+
type: 'diff';
|
|
362
|
+
filename: string;
|
|
363
|
+
diff: string;
|
|
364
|
+
} | {
|
|
365
|
+
type: 'code';
|
|
366
|
+
language?: string;
|
|
367
|
+
code: string;
|
|
368
|
+
} | {
|
|
369
|
+
type: 'error';
|
|
370
|
+
message: string;
|
|
371
|
+
details?: string;
|
|
372
|
+
};
|
|
373
|
+
/**
|
|
374
|
+
* Display-oriented message type for rendering in the terminal UI.
|
|
375
|
+
*
|
|
376
|
+
* This type adds `id` and `timestamp` fields for UI purposes and supports
|
|
377
|
+
* rich `MessageContent[]` for rendering tool calls, diffs, code blocks, etc.
|
|
378
|
+
* It is distinct from the protocol-level `Message` type in
|
|
379
|
+
* `@claude-code-kit/agent`, which represents raw LLM conversation messages.
|
|
380
|
+
* The `useAgent` hook handles conversion between the two formats automatically.
|
|
381
|
+
*/
|
|
289
382
|
type Message = {
|
|
290
383
|
id: string;
|
|
291
384
|
role: 'user' | 'assistant' | 'system';
|
|
292
|
-
content: string;
|
|
385
|
+
content: string | MessageContent[];
|
|
293
386
|
timestamp?: number;
|
|
294
387
|
};
|
|
295
388
|
type MessageListProps = {
|
|
@@ -308,18 +401,27 @@ type StreamingTextProps = {
|
|
|
308
401
|
};
|
|
309
402
|
declare function StreamingText({ text, speed, interval, onComplete, color, }: StreamingTextProps): React__default.ReactNode;
|
|
310
403
|
|
|
311
|
-
type REPLCommand = {
|
|
404
|
+
type REPLCommand$1 = {
|
|
312
405
|
name: string;
|
|
313
406
|
description: string;
|
|
314
407
|
onExecute: (args: string) => void;
|
|
315
408
|
};
|
|
409
|
+
type PermissionRequestState = {
|
|
410
|
+
toolName: string;
|
|
411
|
+
description: string;
|
|
412
|
+
details?: string;
|
|
413
|
+
preview?: React__default.ReactNode;
|
|
414
|
+
onDecision: (action: PermissionAction) => void;
|
|
415
|
+
};
|
|
316
416
|
type REPLProps = {
|
|
317
417
|
onSubmit: (message: string) => Promise<void> | void;
|
|
318
418
|
onExit?: () => void;
|
|
319
419
|
messages: Message[];
|
|
320
420
|
isLoading?: boolean;
|
|
321
421
|
streamingContent?: string | null;
|
|
322
|
-
|
|
422
|
+
welcome?: React__default.ReactNode;
|
|
423
|
+
permissionRequest?: PermissionRequestState;
|
|
424
|
+
commands?: REPLCommand$1[];
|
|
323
425
|
model?: string;
|
|
324
426
|
statusSegments?: StatusLineSegment[];
|
|
325
427
|
prefix?: string;
|
|
@@ -328,9 +430,9 @@ type REPLProps = {
|
|
|
328
430
|
renderMessage?: (message: Message) => React__default.ReactNode;
|
|
329
431
|
spinner?: React__default.ReactNode;
|
|
330
432
|
};
|
|
331
|
-
declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React__default.ReactNode;
|
|
433
|
+
declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, welcome, permissionRequest, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React__default.ReactNode;
|
|
332
434
|
|
|
333
|
-
type ThemeName = 'dark' | 'light';
|
|
435
|
+
type ThemeName = 'dark' | 'light' | 'light-high-contrast' | 'dark-dimmed';
|
|
334
436
|
type ThemeSetting = ThemeName | 'auto';
|
|
335
437
|
type Theme = {
|
|
336
438
|
text: string;
|
|
@@ -344,6 +446,28 @@ type Theme = {
|
|
|
344
446
|
inactive: string;
|
|
345
447
|
inverseText: string;
|
|
346
448
|
permission: string;
|
|
449
|
+
diffAdded: string;
|
|
450
|
+
diffRemoved: string;
|
|
451
|
+
diffAddedWord: string;
|
|
452
|
+
diffRemovedWord: string;
|
|
453
|
+
diffHeader: string;
|
|
454
|
+
userMessage: string;
|
|
455
|
+
assistantMessage: string;
|
|
456
|
+
systemMessage: string;
|
|
457
|
+
toolUseMessage: string;
|
|
458
|
+
permissionAllow: string;
|
|
459
|
+
permissionDeny: string;
|
|
460
|
+
permissionAlways: string;
|
|
461
|
+
focus: string;
|
|
462
|
+
selection: string;
|
|
463
|
+
placeholder: string;
|
|
464
|
+
link: string;
|
|
465
|
+
code: string;
|
|
466
|
+
codeBackground: string;
|
|
467
|
+
blockquote: string;
|
|
468
|
+
info: string;
|
|
469
|
+
spinnerColor: string;
|
|
470
|
+
shimmer: string;
|
|
347
471
|
};
|
|
348
472
|
declare function getTheme(name: ThemeName): Theme;
|
|
349
473
|
type Props$6 = {
|
|
@@ -669,4 +793,137 @@ declare function Byline({ children }: Props): React__default.ReactNode;
|
|
|
669
793
|
*/
|
|
670
794
|
declare function color(c: keyof Theme | Color | undefined, theme: ThemeName, type?: ColorType): (text: string) => string;
|
|
671
795
|
|
|
672
|
-
|
|
796
|
+
type VirtualScrollOptions = {
|
|
797
|
+
itemCount: number;
|
|
798
|
+
/** Lines per item (default: 3) */
|
|
799
|
+
estimatedItemHeight?: number;
|
|
800
|
+
/** Extra items rendered above/below the viewport (default: 20) */
|
|
801
|
+
overscan?: number;
|
|
802
|
+
/** Visible terminal rows */
|
|
803
|
+
viewportHeight: number;
|
|
804
|
+
};
|
|
805
|
+
type VirtualScrollResult = {
|
|
806
|
+
startIndex: number;
|
|
807
|
+
endIndex: number;
|
|
808
|
+
visibleItems: number;
|
|
809
|
+
totalHeight: number;
|
|
810
|
+
scrollOffset: number;
|
|
811
|
+
scrollTo: (index: number) => void;
|
|
812
|
+
scrollToEnd: () => void;
|
|
813
|
+
/** Adjust scroll by delta items (+1 = down, -1 = up) */
|
|
814
|
+
onScroll: (delta: number) => void;
|
|
815
|
+
isAtTop: boolean;
|
|
816
|
+
isAtEnd: boolean;
|
|
817
|
+
};
|
|
818
|
+
type VirtualListProps<T> = {
|
|
819
|
+
items: T[];
|
|
820
|
+
renderItem: (item: T, index: number) => ReactNode;
|
|
821
|
+
viewportHeight: number;
|
|
822
|
+
estimatedItemHeight?: number;
|
|
823
|
+
overscan?: number;
|
|
824
|
+
};
|
|
825
|
+
declare function useVirtualScroll(options: VirtualScrollOptions): VirtualScrollResult;
|
|
826
|
+
declare function VirtualList<T>(props: VirtualListProps<T>): ReactNode;
|
|
827
|
+
|
|
828
|
+
type SearchMatch = {
|
|
829
|
+
index: number;
|
|
830
|
+
offset: number;
|
|
831
|
+
length: number;
|
|
832
|
+
};
|
|
833
|
+
type SearchOverlayProps = {
|
|
834
|
+
isOpen: boolean;
|
|
835
|
+
onClose: () => void;
|
|
836
|
+
onSearch: (query: string) => SearchMatch[];
|
|
837
|
+
onNavigate: (match: SearchMatch) => void;
|
|
838
|
+
matchCount?: number;
|
|
839
|
+
currentMatch?: number;
|
|
840
|
+
};
|
|
841
|
+
type UseSearchResult = {
|
|
842
|
+
query: string;
|
|
843
|
+
matches: SearchMatch[];
|
|
844
|
+
currentIndex: number;
|
|
845
|
+
next: () => void;
|
|
846
|
+
previous: () => void;
|
|
847
|
+
setQuery: (q: string) => void;
|
|
848
|
+
};
|
|
849
|
+
type UseSearchOptions = {
|
|
850
|
+
content: string[];
|
|
851
|
+
isActive: boolean;
|
|
852
|
+
};
|
|
853
|
+
declare function useSearch({ content, isActive }: UseSearchOptions): UseSearchResult;
|
|
854
|
+
declare function SearchOverlay({ isOpen, onClose, onSearch, onNavigate, }: SearchOverlayProps): React__default.ReactNode;
|
|
855
|
+
|
|
856
|
+
type WelcomeScreenProps = {
|
|
857
|
+
appName: string;
|
|
858
|
+
subtitle?: string;
|
|
859
|
+
version?: string;
|
|
860
|
+
tips?: string[];
|
|
861
|
+
logo?: React__default.ReactNode;
|
|
862
|
+
model?: string;
|
|
863
|
+
color?: string;
|
|
864
|
+
};
|
|
865
|
+
declare function ClawdLogo({ color }: {
|
|
866
|
+
color?: string;
|
|
867
|
+
}): React__default.ReactNode;
|
|
868
|
+
declare function WelcomeScreen({ appName, subtitle, version, tips, logo, model, color, }: WelcomeScreenProps): React__default.ReactNode;
|
|
869
|
+
|
|
870
|
+
type PermissionUIRequest = {
|
|
871
|
+
toolName: string;
|
|
872
|
+
description: string;
|
|
873
|
+
details?: string;
|
|
874
|
+
resolve: (decision: 'allow' | 'deny') => void;
|
|
875
|
+
};
|
|
876
|
+
type UseAgentOptions = {
|
|
877
|
+
agent: Agent;
|
|
878
|
+
onError?: (error: Error) => void;
|
|
879
|
+
};
|
|
880
|
+
type UseAgentResult = {
|
|
881
|
+
messages: Message[];
|
|
882
|
+
isLoading: boolean;
|
|
883
|
+
streamingContent: string | null;
|
|
884
|
+
permissionRequest: PermissionUIRequest | null;
|
|
885
|
+
submit: (input: string) => void;
|
|
886
|
+
cancel: () => void;
|
|
887
|
+
clearMessages: () => void;
|
|
888
|
+
};
|
|
889
|
+
declare function useAgent({ agent, onError }: UseAgentOptions): UseAgentResult;
|
|
890
|
+
|
|
891
|
+
type AgentContextValue = UseAgentResult & {
|
|
892
|
+
agent: Agent;
|
|
893
|
+
model: string;
|
|
894
|
+
};
|
|
895
|
+
declare const AgentContext: React__default.Context<AgentContextValue | null>;
|
|
896
|
+
type AgentProviderProps = {
|
|
897
|
+
agent: Agent;
|
|
898
|
+
model?: string;
|
|
899
|
+
onError?: (error: Error) => void;
|
|
900
|
+
children: React__default.ReactNode;
|
|
901
|
+
};
|
|
902
|
+
declare function AgentProvider({ agent, model, onError, children, }: AgentProviderProps): React__default.ReactNode;
|
|
903
|
+
declare function useAgentContext(): AgentContextValue;
|
|
904
|
+
|
|
905
|
+
type REPLCommand = {
|
|
906
|
+
name: string;
|
|
907
|
+
description: string;
|
|
908
|
+
onExecute: (args: string) => void;
|
|
909
|
+
};
|
|
910
|
+
type AgentREPLProps = {
|
|
911
|
+
agent: Agent;
|
|
912
|
+
model?: string;
|
|
913
|
+
commands?: REPLCommand[];
|
|
914
|
+
welcome?: React__default.ReactNode;
|
|
915
|
+
placeholder?: string;
|
|
916
|
+
onError?: (error: Error) => void;
|
|
917
|
+
onExit?: () => void;
|
|
918
|
+
};
|
|
919
|
+
declare function AgentREPL({ agent, model, commands, welcome, placeholder, onError, onExit, }: AgentREPLProps): React__default.ReactNode;
|
|
920
|
+
|
|
921
|
+
type AuthFlowUIProps = {
|
|
922
|
+
auth: AuthRegistry;
|
|
923
|
+
onComplete: (provider: LLMProvider, providerName: string, model: string) => void;
|
|
924
|
+
onCancel?: () => void;
|
|
925
|
+
title?: string;
|
|
926
|
+
};
|
|
927
|
+
declare function AuthFlowUI({ auth, onComplete, onCancel, title, }: AuthFlowUIProps): React__default.ReactNode;
|
|
928
|
+
|
|
929
|
+
export { AgentContext, type AgentContextValue, AgentProvider, type AgentProviderProps, AgentREPL, type AgentREPLProps, AuthFlowUI, type AuthFlowUIProps, BashPermissionContent, Byline, ClawdLogo, type Command$1 as Command, type CommandBase, type CommandOnDone, CommandRegistry, type CommandResult, DEFAULT_BINDINGS, Dialog, type DiffLine, DiffView, type DiffViewProps, Divider, FileEditPermissionContent, FuzzyPicker, type JSXCommand, KeybindingSetup, KeyboardShortcutHint, ListItem, LoadingState, type LocalCommand, Markdown, MarkdownTable, type Message, type MessageContent, MessageList, type MessageListProps, MultiSelect, type MultiSelectProps, Pane, type PermissionAction, PermissionRequest, type PermissionRequestProps, type PermissionUIRequest, ProgressBar, PromptInput, REPL, type REPLProps, Ratchet, type SearchMatch, SearchOverlay, type SearchOverlayProps, Select, type SelectOption, type SelectProps, Spinner, StatusIcon, StatusLine, type StatusLineProps, type StatusLineSegment, StreamingMarkdown, StreamingText, type StreamingTextProps, Tab, Tabs, type TerminalSize, TextHoverColorContext, type Theme, type ThemeName, ThemeProvider, type ThemeSetting, ThemedBox, type Props$5 as ThemedBoxProps, ThemedText, type Props$4 as ThemedTextProps, type UseAgentOptions, type UseAgentResult, type UseSearchResult, VirtualList, type VirtualListProps, type VirtualScrollOptions, type VirtualScrollResult, WelcomeScreen, type WelcomeScreenProps, clearCommand, color, createCommandRegistry, defineCommand, defineJSXCommand, defineLocalCommand, exitCommand, getTheme, helpCommand, parseUnifiedDiff, useAgent, useAgentContext, useDoublePress, useKeybinding, useKeybindings, usePreviewTheme, useSearch, useStatusLine, useTabsWidth, useTerminalSize, useTheme, useThemeSetting, useVirtualScroll };
|