@yeshwanthyk/coding-agent 0.2.2

package/src/ui/components/modals/InputModal.tsx

@@ -0,0 +1,30 @@
+import { useKeyboard } from "@opentui/solid"
+import { Dialog, Input } from "@yeshwanthyk/open-tui"
+import type { JSX } from "solid-js"
+
+export interface InputModalProps {
+	title: string
+	placeholder?: string
+	onSubmit: (value: string | undefined) => void
+}
+
+export function InputModal(props: InputModalProps): JSX.Element {
+	useKeyboard((e: { name: string }) => {
+		if (e.name === "escape") {
+			props.onSubmit(undefined)
+		}
+	})
+
+	return (
+		<Dialog open={true} title={props.title} closeOnOverlayClick={false}>
+			<Input
+				placeholder={props.placeholder}
+				focused={true}
+				onSubmit={(value) => props.onSubmit(value || undefined)}
+				onEscape={() => props.onSubmit(undefined)}
+			/>
+			<box height={1} />
+			<text>Enter to submit • Esc to cancel</text>
+		</Dialog>
+	)
+}

package/src/ui/components/modals/ModalContainer.tsx

@@ -0,0 +1,67 @@
+import { Match, Switch } from "solid-js"
+import type { ModalState } from "../../hooks/useModals.js"
+import { SelectModal } from "./SelectModal.js"
+import { InputModal } from "./InputModal.js"
+import { ConfirmModal } from "./ConfirmModal.js"
+import { EditorModal } from "./EditorModal.js"
+import type { JSX } from "solid-js"
+
+export interface ModalContainerProps {
+	modalState: ModalState
+	onClose: () => void
+}
+
+export function ModalContainer(props: ModalContainerProps): JSX.Element {
+	return (
+		<Switch>
+			<Match when={props.modalState?.type === "select" && props.modalState}>
+				{(state) => (
+					<SelectModal
+						title={state().title}
+						options={(state() as { options: string[] }).options}
+						onSelect={(value) => {
+							(state() as { resolve: (v: string | undefined) => void }).resolve(value)
+							props.onClose()
+						}}
+					/>
+				)}
+			</Match>
+			<Match when={props.modalState?.type === "input" && props.modalState}>
+				{(state) => (
+					<InputModal
+						title={state().title}
+						placeholder={(state() as { placeholder?: string }).placeholder}
+						onSubmit={(value) => {
+							(state() as { resolve: (v: string | undefined) => void }).resolve(value)
+							props.onClose()
+						}}
+					/>
+				)}
+			</Match>
+			<Match when={props.modalState?.type === "confirm" && props.modalState}>
+				{(state) => (
+					<ConfirmModal
+						title={state().title}
+						message={(state() as { message: string }).message}
+						onConfirm={(confirmed) => {
+							(state() as { resolve: (v: boolean) => void }).resolve(confirmed)
+							props.onClose()
+						}}
+					/>
+				)}
+			</Match>
+			<Match when={props.modalState?.type === "editor" && props.modalState}>
+				{(state) => (
+					<EditorModal
+						title={state().title}
+						initialText={(state() as { initialText?: string }).initialText}
+						onSubmit={(value) => {
+							(state() as { resolve: (v: string | undefined) => void }).resolve(value)
+							props.onClose()
+						}}
+					/>
+				)}
+			</Match>
+		</Switch>
+	)
+}

package/src/ui/components/modals/SelectModal.tsx

@@ -0,0 +1,48 @@
+import { createSignal, type JSX } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { Dialog, SelectList, type SelectListRef, type SelectItem } from "@yeshwanthyk/open-tui"
+
+export interface SelectModalProps {
+	title: string
+	options: string[]
+	onSelect: (value: string | undefined) => void
+}
+
+export function SelectModal(props: SelectModalProps): JSX.Element {
+	const [selectedIndex, setSelectedIndex] = createSignal(0)
+	let listRef: SelectListRef | undefined
+
+	const items: SelectItem[] = props.options.map((opt) => ({
+		value: opt,
+		label: opt,
+	}))
+
+	useKeyboard((e: { name: string }) => {
+		if (e.name === "up") {
+			listRef?.moveUp()
+		} else if (e.name === "down") {
+			listRef?.moveDown()
+		} else if (e.name === "return") {
+			const item = listRef?.getSelectedItem()
+			props.onSelect(item?.value)
+		} else if (e.name === "escape") {
+			props.onSelect(undefined)
+		}
+	})
+
+	return (
+		<Dialog open={true} title={props.title} closeOnOverlayClick={false}>
+			<SelectList
+				items={items}
+				selectedIndex={selectedIndex()}
+				onSelectionChange={(_, index) => setSelectedIndex(index)}
+				onSelect={(item) => props.onSelect(item.value)}
+				onCancel={() => props.onSelect(undefined)}
+				maxVisible={10}
+				ref={(ref) => { listRef = ref }}
+			/>
+			<box height={1} />
+			<text>↑/↓ navigate • Enter select • Esc cancel</text>
+		</Dialog>
+	)
+}

package/src/ui/components/modals/index.ts

@@ -0,0 +1,4 @@
+export { SelectModal, type SelectModalProps } from "./SelectModal.js"
+export { InputModal, type InputModalProps } from "./InputModal.js"
+export { ConfirmModal, type ConfirmModalProps } from "./ConfirmModal.js"
+export { EditorModal, type EditorModalProps } from "./EditorModal.js"

package/src/ui/features/composer/Composer.tsx

@@ -0,0 +1,73 @@
+import { TextareaRenderable, type KeyEvent } from "@opentui/core"
+import { Show } from "solid-js"
+import { SelectList, type AutocompleteItem, type SelectItem, type Theme } from "@yeshwanthyk/open-tui"
+
+export interface ComposerProps {
+	theme: Theme
+	isBashMode: () => boolean
+	showAutocomplete: () => boolean
+	autocompleteItems: () => AutocompleteItem[]
+	autocompleteIndex: () => number
+	textareaRef: (ref: TextareaRenderable) => void
+	onContentChange: () => void
+	onSubmit: () => void
+	onKeyDown: (event: KeyEvent) => void
+	terminalWidth: () => number
+}
+
+export function Composer(props: ComposerProps) {
+	return (
+		<>
+			<Show when={props.showAutocomplete() && props.autocompleteItems().length > 0}>
+				<box flexDirection="column" borderColor={props.theme.border} maxHeight={15} flexShrink={0}>
+					<SelectList
+						items={props.autocompleteItems().map((item): SelectItem => ({
+							value: item.value,
+							label: item.label,
+							description: item.description,
+						}))}
+						selectedIndex={props.autocompleteIndex()}
+						maxVisible={12}
+						width={Math.max(10, props.terminalWidth() - 2)}
+					/>
+					<text fg={props.theme.textMuted}>{"   "}↑↓ navigate · Tab select · Esc cancel</text>
+				</box>
+			</Show>
+			<box border={["top"]} borderColor={props.isBashMode() ? props.theme.warning : props.theme.border} paddingTop={1} flexShrink={0}>
+				<textarea
+					ref={(r: TextareaRenderable) => {
+						props.textareaRef(r)
+					}}
+					placeholder=""
+					backgroundColor={props.theme.background}
+					focusedBackgroundColor={props.theme.background}
+					textColor={props.theme.text}
+					focusedTextColor={props.theme.text}
+					cursorColor={props.theme.text}
+					minHeight={1}
+					maxHeight={6}
+					keyBindings={[
+						{ name: "return", shift: true, action: "newline" as const },
+						{ name: "return", ctrl: true, action: "newline" as const },
+						{ name: "return", meta: true, action: "newline" as const },
+						{ name: "return", action: "submit" as const },
+						{ name: "left", action: "move-left" as const },
+						{ name: "right", action: "move-right" as const },
+						{ name: "backspace", action: "backspace" as const },
+						{ name: "delete", action: "delete" as const },
+						{ name: "a", ctrl: true, action: "line-home" as const },
+						{ name: "e", ctrl: true, action: "line-end" as const },
+						{ name: "k", ctrl: true, action: "delete-to-line-end" as const },
+						{ name: "u", ctrl: true, action: "delete-to-line-start" as const },
+						{ name: "w", ctrl: true, action: "delete-word-backward" as const },
+					]}
+					onKeyDown={(event) => {
+						props.onKeyDown(event)
+					}}
+					onContentChange={props.onContentChange}
+					onSubmit={props.onSubmit}
+				/>
+			</box>
+		</>
+	)
+}

package/src/ui/features/composer/SlashCommandHandler.ts

@@ -0,0 +1,58 @@
+import type { CommandContext } from "../../../commands.js"
+import { handleSlashCommand } from "../../../commands.js"
+import {
+	tryExpandCustomCommand,
+	type CustomCommand,
+} from "@yeshwanthyk/runtime-effect/extensibility/custom-commands.js"
+
+export interface SlashCommandBridge {
+	commandContext: CommandContext
+	customCommands: Map<string, CustomCommand>
+	builtInCommandNames: Set<string>
+	onExpand: (expanded: string) => void | Promise<void>
+}
+
+/**
+ * Handles slash command processing, returning true when the command is consumed.
+ * Checks hook commands first, then built-in commands, then custom commands.
+ */
+export const handleSlashInput = async (input: string, bridge: SlashCommandBridge): Promise<boolean> => {
+	const trimmed = input.trim()
+
+	// Parse command name and args
+	const match = trimmed.match(/^\/(\S+)(?:\s+([\s\S]*))?$/)
+	if (!match) return false
+
+	const cmdName = match[1]!
+	const cmdArgs = match[2] ?? ""
+
+	// Check hook-registered commands first
+	const { hookRunner } = bridge.commandContext
+	if (hookRunner) {
+		const hookCmd = hookRunner.getCommand(cmdName)
+		if (hookCmd) {
+			try {
+				await hookCmd.handler(cmdArgs, hookRunner.getContext())
+			} catch (err) {
+				// Hook command errors are logged but don't crash
+				console.error(`Hook command error [${cmdName}]:`, err)
+			}
+			return true
+		}
+	}
+
+	// Then check built-in commands
+	const handled = handleSlashCommand(trimmed, bridge.commandContext)
+	if (handled instanceof Promise ? await handled : handled) {
+		return true
+	}
+
+	// Finally check custom commands
+	const expanded = tryExpandCustomCommand(trimmed, bridge.builtInCommandNames, bridge.customCommands)
+	if (expanded !== null) {
+		await bridge.onExpand(expanded)
+		return true
+	}
+
+	return false
+}

package/src/ui/features/composer/keyboard.ts

@@ -0,0 +1,3 @@
+import { createKeyboardHandler, type KeyboardHandlerConfig } from "../../../keyboard-handler.js"
+
+export const createComposerKeyboardHandler = (config: KeyboardHandlerConfig) => createKeyboardHandler(config)

package/src/ui/features/main-view/MainView.tsx

@@ -0,0 +1,367 @@
+import { TextareaRenderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import {
+	CombinedAutocompleteProvider,
+	ToastViewport,
+	copyToClipboard,
+	useRenderer,
+	useTheme,
+	type AutocompleteItem,
+} from "@yeshwanthyk/open-tui"
+import type { ThinkingLevel } from "@yeshwanthyk/agent-core"
+import type { KnownProvider } from "@yeshwanthyk/ai"
+import type { LspManager } from "@yeshwanthyk/lsp"
+import { createSignal, createEffect, onMount } from "solid-js"
+import { createAutocompleteCommands } from "../../../autocomplete-commands.js"
+import type { CustomCommand } from "@yeshwanthyk/runtime-effect/extensibility/custom-commands.js"
+import { Footer } from "../../../components/Footer.js"
+import { Header } from "../../../components/Header.js"
+import type { ActivityState, ToolBlock, UIMessage } from "../../../types.js"
+import type { QueueCounts } from "@yeshwanthyk/runtime-effect/session/prompt-queue.js"
+import { useGitStatus } from "../../../hooks/useGitStatus.js"
+import { useSpinner } from "../../../hooks/useSpinner.js"
+import { useToastManager } from "../../../hooks/useToastManager.js"
+import { useEditorBridge } from "../../../hooks/useEditorBridge.js"
+import { MessagePane } from "../message-pane/MessagePane.js"
+import { Composer } from "../composer/Composer.js"
+import { createComposerKeyboardHandler } from "../composer/keyboard.js"
+import type { ValidationIssue } from "@ext/schema.js"
+
+export interface MainViewProps {
+	validationIssues?: ValidationIssue[]
+	messages: UIMessage[]
+	toolBlocks: ToolBlock[]
+	isResponding: boolean
+	activityState: ActivityState
+	thinkingVisible: boolean
+	modelId: string
+	thinking: ThinkingLevel
+	provider: KnownProvider
+	contextTokens: number
+	contextWindow: number
+	queueCounts: QueueCounts
+	retryStatus: string | null
+	turnCount: number
+	lspActive: boolean
+	diffWrapMode: "word" | "none"
+	concealMarkdown: boolean
+	customCommands: Map<string, CustomCommand>
+	onSubmit: (text: string, clearFn?: () => void) => void
+	onAbort: () => string | null
+	onToggleThinking: () => void
+	onCycleModel: () => void
+	onCycleThinking: () => void
+	exitHandlerRef: { current: () => void }
+	editorOpenRef: { current: () => Promise<void> | void }
+	setEditorTextRef: { current: (text: string) => void }
+	getEditorTextRef: { current: () => string }
+	showToastRef: { current: (title: string, message: string, variant?: "info" | "warning" | "success" | "error") => void }
+	onBeforeExit?: () => Promise<void>
+	editor?: import("../../../config.js").EditorConfig
+	lsp: LspManager
+}
+
+export function MainView(props: MainViewProps) {
+	const { theme } = useTheme()
+	const dimensions = useTerminalDimensions()
+	let textareaRef: TextareaRenderable | undefined
+	const lastCtrlC = { current: 0 }
+	const branch = useGitStatus()
+	const spinnerFrame = useSpinner(() => props.activityState)
+	const renderer = useRenderer()
+	const { toasts, pushToast } = useToastManager()
+	const shownValidationKeys = new Set<string>()
+	createEffect(() => {
+		const issues = props.validationIssues ?? []
+		const showList = issues.slice(0, 3)
+		for (const issue of showList) {
+			const key = `${issue.severity}:${issue.path}:${issue.message}`
+			if (shownValidationKeys.has(key)) continue
+			shownValidationKeys.add(key)
+			console.error(`[marvin][extension][${issue.kind}] ${issue.path}: ${issue.message}`)
+			pushToast(
+				{
+					title: issue.severity === "error" ? "Extension error" : "Extension warning",
+					message: `${issue.path}: ${issue.message}`,
+					variant: issue.severity === "error" ? "error" : "warning",
+				},
+				6000,
+			)
+		}
+	})
+	const { openBuffer, editFile } = useEditorBridge({
+		editor: props.editor,
+		renderer,
+		pushToast,
+		isResponding: () => props.isResponding,
+		onSubmit: (text) => props.onSubmit(text),
+	})
+
+	const builtInAutocomplete = createAutocompleteCommands(() => ({ currentProvider: props.provider }))
+	const customAutocomplete = Array.from(props.customCommands.values()).map((cmd) => ({
+		name: cmd.name,
+		description: cmd.description,
+	}))
+	const autocompleteProvider = new CombinedAutocompleteProvider([...builtInAutocomplete, ...customAutocomplete], process.cwd())
+	const [autocompleteItems, setAutocompleteItems] = createSignal<AutocompleteItem[]>([])
+	const [autocompletePrefix, setAutocompletePrefix] = createSignal("")
+	const [autocompleteIndex, setAutocompleteIndex] = createSignal(0)
+	const [showAutocomplete, setShowAutocomplete] = createSignal(false)
+	const [isBashMode, setIsBashMode] = createSignal(false)
+	let suppressNextAutocompleteUpdate = false
+
+	const updateAutocomplete = (text: string, cursorLine: number, cursorCol: number) => {
+		const lines = text.split("\n")
+		const currentLine = lines[cursorLine] ?? ""
+		const beforeCursor = currentLine.slice(0, cursorCol)
+
+		if (beforeCursor.trim() === "") {
+			setShowAutocomplete(false)
+			setAutocompleteItems([])
+			return
+		}
+
+		const result = autocompleteProvider.getSuggestions(lines, cursorLine, cursorCol)
+		if (result && result.items.length > 0) {
+			const prevPrefix = autocompletePrefix()
+			const newItems = result.items.slice(0, 30)
+			setAutocompleteItems(newItems)
+			setAutocompletePrefix(result.prefix)
+			if (result.prefix !== prevPrefix) {
+				setAutocompleteIndex(0)
+			} else {
+				setAutocompleteIndex((i) => Math.min(i, newItems.length - 1))
+			}
+			setShowAutocomplete(true)
+		} else {
+			setShowAutocomplete(false)
+			setAutocompleteItems([])
+		}
+	}
+
+	const applyAutocomplete = () => {
+		if (!showAutocomplete() || !textareaRef) return false
+		const items = autocompleteItems()
+		const idx = autocompleteIndex()
+		if (idx < 0 || idx >= items.length) return false
+		const cursor = textareaRef.logicalCursor
+		const text = textareaRef.plainText
+		const lines = text.split("\n")
+		const result = autocompleteProvider.applyCompletion(lines, cursor.row, cursor.col, items[idx]!, autocompletePrefix())
+		const newText = result.lines.join("\n")
+		if (newText === text) {
+			setShowAutocomplete(false)
+			setAutocompleteItems([])
+			return false
+		}
+		suppressNextAutocompleteUpdate = true
+		textareaRef.replaceText(newText)
+		textareaRef.editBuffer.setCursorToLineCol(result.cursorLine, result.cursorCol)
+		setShowAutocomplete(false)
+		setAutocompleteItems([])
+		return true
+	}
+
+	onMount(() => {
+		textareaRef?.focus()
+	})
+
+	const exitApp = async () => {
+		try {
+			renderer.destroy()
+			await props.onBeforeExit?.()
+		} finally {
+			process.exit(0)
+		}
+	}
+	props.exitHandlerRef.current = exitApp
+	props.setEditorTextRef.current = (text: string) => textareaRef?.setText(text)
+	props.getEditorTextRef.current = () => textareaRef?.plainText ?? ""
+	props.showToastRef.current = (title, message, variant = "info") => {
+		pushToast({ title, message, variant }, 3000)
+	}
+
+	const copySelectionToClipboard = () => {
+		const sel = renderer.getSelection()
+		if (!sel) return
+		const text = sel.getSelectedText()
+		if (!text || text.length === 0) return
+		copyToClipboard(text)
+		pushToast({ title: "Copied to clipboard", variant: "success" }, 1500)
+		renderer.clearSelection()
+	}
+
+	const openEditorFromTui = async () => {
+		if (!textareaRef) return
+		setShowAutocomplete(false)
+		setAutocompleteItems([])
+		textareaRef.clear()
+
+		const content = await openBuffer("")
+		if (content === undefined) return
+		suppressNextAutocompleteUpdate = true
+		textareaRef.setText(content)
+		textareaRef.focus()
+		const lines = content.split("\n")
+		const lastLine = Math.max(0, lines.length - 1)
+		const lastCol = lines[lastLine]?.length ?? 0
+		textareaRef.editBuffer.setCursorToLineCol(lastLine, lastCol)
+		updateAutocomplete(content, lastLine, lastCol)
+	}
+	props.editorOpenRef.current = openEditorFromTui
+
+	const handleEditFile = (filePath: string, line?: number) => {
+		void editFile(filePath, line)
+	}
+
+	let prevContextWindow = props.contextWindow
+	createEffect(() => {
+		const newWindow = props.contextWindow
+		const oldWindow = prevContextWindow
+		prevContextWindow = newWindow
+		if (oldWindow <= 0 || newWindow >= oldWindow) return
+
+		const tokens = props.contextTokens
+		if (tokens <= 0) return
+
+		const usagePct = (tokens / newWindow) * 100
+		const remaining = newWindow - tokens
+		const formatK = (n: number) => (n >= 1000 ? `${Math.round(n / 1000)}k` : String(n))
+
+		if (usagePct > 100) {
+			pushToast(
+				{
+					title: `Context overflow: ${formatK(tokens)}/${formatK(newWindow)}`,
+					message: "Run /compact before continuing",
+					variant: "error",
+				},
+				5000,
+			)
+		} else if (usagePct > 85) {
+			pushToast(
+				{
+					title: `Context near limit: ${formatK(tokens)}/${formatK(newWindow)}`,
+					message: `${formatK(remaining)} remaining`,
+					variant: "warning",
+				},
+				4000,
+			)
+		}
+	})
+
+	const [expandedToolIds, setExpandedToolIds] = createSignal<Set<string>>(new Set())
+	const isToolExpanded = (id: string) => expandedToolIds().has(id)
+	const toggleToolExpanded = (id: string) =>
+		setExpandedToolIds((prev) => {
+			const next = new Set(prev)
+			if (next.has(id)) next.delete(id)
+			else next.add(id)
+			return next
+		})
+	const toggleLastToolExpanded = () => {
+		const last = props.toolBlocks[props.toolBlocks.length - 1]
+		if (last) toggleToolExpanded(last.id)
+	}
+
+	const [expandedThinkingIds, setExpandedThinkingIds] = createSignal<Set<string>>(new Set())
+	const isThinkingExpanded = (id: string) => expandedThinkingIds().has(id)
+	const toggleThinkingExpanded = (id: string) =>
+		setExpandedThinkingIds((prev) => {
+			const next = new Set(prev)
+			if (next.has(id)) next.delete(id)
+			else next.add(id)
+			return next
+		})
+
+	const handleKeyDown = createComposerKeyboardHandler({
+		showAutocomplete,
+		autocompleteItems,
+		setAutocompleteIndex,
+		setShowAutocomplete,
+		applyAutocomplete,
+		isResponding: () => props.isResponding,
+		retryStatus: () => props.retryStatus,
+		onAbort: props.onAbort,
+		onToggleThinking: props.onToggleThinking,
+		onCycleModel: props.onCycleModel,
+		onCycleThinking: props.onCycleThinking,
+		toggleLastToolExpanded,
+		copySelectionToClipboard,
+		clearEditor: () => textareaRef?.clear(),
+		setEditorText: (text) => textareaRef?.setText(text),
+		lastCtrlC,
+		onExit: exitApp,
+	})
+
+	const handleComposerContentChange = () => {
+		if (!textareaRef) return
+		if (suppressNextAutocompleteUpdate) {
+			suppressNextAutocompleteUpdate = false
+			return
+		}
+		const text = textareaRef.plainText
+		setIsBashMode(text.trimStart().startsWith("!"))
+		const cursor = textareaRef.logicalCursor
+		updateAutocomplete(text, cursor.row, cursor.col)
+	}
+
+	return (
+		<box
+			flexDirection="column"
+			width={dimensions().width}
+			height={dimensions().height}
+			onMouseUp={() => {
+				const sel = renderer.getSelection()
+				if (sel && sel.getSelectedText()) copySelectionToClipboard()
+			}}
+		>
+			<Header
+				modelId={props.modelId}
+				thinking={props.thinking}
+				contextTokens={props.contextTokens}
+				contextWindow={props.contextWindow}
+				queueCounts={props.queueCounts}
+				activityState={props.activityState}
+				retryStatus={props.retryStatus}
+				lspActive={props.lspActive}
+				spinnerFrame={spinnerFrame()}
+				lsp={props.lsp}
+			/>
+			<MessagePane
+				messages={props.messages}
+				toolBlocks={props.toolBlocks}
+				thinkingVisible={props.thinkingVisible}
+				diffWrapMode={props.diffWrapMode}
+				concealMarkdown={props.concealMarkdown}
+				isToolExpanded={isToolExpanded}
+				toggleToolExpanded={toggleToolExpanded}
+				isThinkingExpanded={isThinkingExpanded}
+				toggleThinkingExpanded={toggleThinkingExpanded}
+				onEditFile={handleEditFile}
+			/>
+			<Composer
+				theme={theme}
+				isBashMode={isBashMode}
+				showAutocomplete={showAutocomplete}
+				autocompleteItems={autocompleteItems}
+				autocompleteIndex={autocompleteIndex}
+				textareaRef={(ref) => {
+					textareaRef = ref
+					ref.focus()
+				}}
+				onContentChange={handleComposerContentChange}
+				onSubmit={() => {
+					if (!textareaRef) return
+					props.onSubmit(textareaRef.plainText, () => {
+						textareaRef?.clear()
+						setIsBashMode(false)
+					})
+				}}
+				onKeyDown={handleKeyDown}
+				terminalWidth={() => dimensions().width}
+			/>
+			<Footer branch={branch()} bashMode={isBashMode()} />
+			<ToastViewport toasts={toasts()} />
+		</box>
+	)
+}

package/src/ui/features/message-pane/MessagePane.tsx

@@ -0,0 +1,34 @@
+import type { ToolBlock, UIMessage } from "../../../types.js"
+import { MessageList } from "../../../components/MessageList.js"
+
+export interface MessagePaneProps {
+	messages: UIMessage[]
+	toolBlocks: ToolBlock[]
+	thinkingVisible: boolean
+	diffWrapMode: "word" | "none"
+	concealMarkdown: boolean
+	isToolExpanded: (id: string) => boolean
+	toggleToolExpanded: (id: string) => void
+	isThinkingExpanded: (id: string) => boolean
+	toggleThinkingExpanded: (id: string) => void
+	onEditFile: (filePath: string, line?: number) => void
+}
+
+export function MessagePane(props: MessagePaneProps) {
+	return (
+		<scrollbox stickyScroll stickyStart="bottom" flexGrow={props.messages.length > 0 ? 1 : 0} flexShrink={1}>
+			<MessageList
+				messages={props.messages}
+				toolBlocks={props.toolBlocks}
+				thinkingVisible={props.thinkingVisible}
+				diffWrapMode={props.diffWrapMode}
+				concealMarkdown={props.concealMarkdown}
+				isToolExpanded={props.isToolExpanded}
+				toggleToolExpanded={props.toggleToolExpanded}
+				isThinkingExpanded={props.isThinkingExpanded}
+				toggleThinkingExpanded={props.toggleThinkingExpanded}
+				onEditFile={props.onEditFile}
+			/>
+		</scrollbox>
+	)
+}