tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix: MultilineInput (#8382)

Browse Source
This commit is contained in:
Alex Hancock
2026-04-07 20:55:39 -04:00
committed by GitHub
parent a6ce7a37da
commit 9d0efcb72a
3 changed files with 173 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/pnpm-lock.yaml
Generated
+8 -23
View File
@@ -387,9 +387,9 @@ importers:
ink:
specifier: ^6.8.0
version: 6.8.0(@types/react@19.2.14)(react@19.2.4)
ink-text-input:
specifier: ^6.0.0
version: 6.0.0(ink@6.8.0(@types/react@19.2.14)(react@19.2.4))(react@19.2.4)
ink-multiline-input:
specifier: ^0.1.0
version: 0.1.0(ink@6.8.0(@types/react@19.2.14)(react@19.2.4))(react@19.2.4)
marked:
specifier: ^15.0.12
version: 15.0.12
@@ -536,10 +536,6 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
'@babel/runtime@7.28.6':
resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
engines: {node: '>=6.9.0'}
'@babel/runtime@7.29.2':
resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
engines: {node: '>=6.9.0'}
@@ -4667,11 +4663,10 @@ packages:
resolution: {integrity: sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==}
engines: {node: '>=10'}
ink-text-input@6.0.0:
resolution: {integrity: sha512-Fw64n7Yha5deb1rHY137zHTAbSTNelUKuB5Kkk2HACXEtwIHBCf9OH2tP/LQ9fRYTl1F0dZgbW0zPnZk6FA9Lw==}
engines: {node: '>=18'}
ink-multiline-input@0.1.0:
resolution: {integrity: sha512-GmIF5YdaxmT5pHwI67yTDe5UDId20WeGJx39zwaYJ6SwMrlioRRMn+BxklsAUYsvA6BJfh2kpHNR1Kan69UTxw==}
peerDependencies:
ink: '>=5'
ink: '>=6'
react: ^19.2.4
ink@6.8.0:
@@ -6816,10 +6811,6 @@ packages:
resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
engines: {node: '>=10'}
type-fest@4.41.0:
resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
engines: {node: '>=16'}
type-fest@5.5.0:
resolution: {integrity: sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==}
engines: {node: '>=20'}
@@ -7397,8 +7388,6 @@ snapshots:
'@babel/core': 7.29.0
'@babel/helper-plugin-utils': 7.28.6
'@babel/runtime@7.28.6': {}
'@babel/runtime@7.29.2': {}
'@babel/template@7.28.6':
@@ -9851,7 +9840,7 @@ snapshots:
'@testing-library/dom@10.4.1':
dependencies:
'@babel/code-frame': 7.29.0
'@babel/runtime': 7.28.6
'@babel/runtime': 7.29.2
'@types/aria-query': 5.0.4
aria-query: 5.3.0
dom-accessibility-api: 0.5.16
@@ -12139,12 +12128,10 @@ snapshots:
ini@2.0.0: {}
ink-text-input@6.0.0(ink@6.8.0(@types/react@19.2.14)(react@19.2.4))(react@19.2.4):
ink-multiline-input@0.1.0(ink@6.8.0(@types/react@19.2.14)(react@19.2.4))(react@19.2.4):
dependencies:
chalk: 5.6.2
ink: 6.8.0(@types/react@19.2.14)(react@19.2.4)
react: 19.2.4
type-fest: 4.41.0
ink@6.8.0(@types/react@19.2.14)(react@19.2.4):
dependencies:
@@ -14691,8 +14678,6 @@ snapshots:
type-fest@1.4.0: {}
type-fest@4.41.0: {}
type-fest@5.5.0:
dependencies:
tagged-tag: 1.0.0
ui/text/package.json
+2 -2
View File
@@ -30,10 +30,10 @@
"lint": "tsc --noEmit"
},
"dependencies": {
"@agentclientprotocol/sdk": "^0.14.1",
"@aaif/goose-acp": "workspace:*",
"@agentclientprotocol/sdk": "^0.14.1",
"ink": "^6.8.0",
"ink-text-input": "^6.0.0",
"ink-multiline-input": "^0.1.0",
"marked": "^15.0.12",
"marked-terminal": "^7.3.0",
"meow": "^13.2.0",
ui/text/src/tui.tsx
+163 -19
View File
@@ -1,7 +1,7 @@
#!/usr/bin/env node
import React, { useState, useEffect, useCallback, useRef } from "react";
import { Box, Text, render, useApp, useInput, useStdout } from "ink";
import TextInput from "ink-text-input";
import { MultilineInput } from "ink-multiline-input";
import meow from "meow";
import { spawn } from "node:child_process";
import { Readable, Writable } from "node:stream";
@@ -178,6 +178,35 @@ function Header({
);
}
const PASTE_THRESHOLD = 80;
const PASTE_PREVIEW_LEN = 40;
const INPUT_MAX_ROWS = 8;
const SENT_PREVIEW_LEN = 60;
function collapseForDisplay(text: string, availableWidth = PASTE_PREVIEW_LEN): string {
const flat = text.replace(/\n/g, " ").replace(/\s+/g, " ").trim();
if (flat.length <= availableWidth) return flat;
const suffix = ` (${flat.length.toLocaleString()} chars)`;
const previewLen = Math.max(availableWidth - suffix.length - 1, 10);
return flat.slice(0, previewLen) + "…" + suffix;
}
function collapsedUserPrompt(text: string, width: number): React.ReactElement {
const flat = text.replace(/\n/g, " ").replace(/\s+/g, " ").trim();
const maxPreview = Math.max(width - 30, SENT_PREVIEW_LEN);
if (flat.length <= maxPreview + 10) {
return <Text color={TEXT_PRIMARY} bold>{flat}</Text>;
}
const preview = flat.slice(0, maxPreview) + "…";
const remaining = flat.length - maxPreview;
return (
<Text>
<Text color={TEXT_PRIMARY} bold>{preview}</Text>
<Text color={TEXT_DIM}> ({remaining.toLocaleString()} more chars)</Text>
</Text>
);
}
function InputBar({
width,
input,
@@ -186,6 +215,9 @@ function InputBar({
queued,
scrollHint,
placeholder,
focused,
pastedFull,
onPastedFullChange,
}: {
width: number;
input: string;
@@ -194,7 +226,65 @@ function InputBar({
queued: boolean;
scrollHint: boolean;
placeholder?: string;
focused: boolean;
pastedFull: string | null;
onPastedFullChange: (v: string | null) => void;
}) {
const prevLenRef = useRef(input.length);
const handleChange = useCallback(
(newValue: string) => {
const delta = newValue.length - prevLenRef.current;
prevLenRef.current = newValue.length;
if (delta >= PASTE_THRESHOLD) {
onPastedFullChange(newValue);
onChange(newValue);
} else {
if (pastedFull !== null) onPastedFullChange(null);
onChange(newValue);
}
},
[onChange, pastedFull, onPastedFullChange],
);
const handleSubmit = useCallback(
(value: string) => {
prevLenRef.current = 0;
onPastedFullChange(null);
onSubmit(value);
},
[onSubmit, onPastedFullChange],
);
useInput(
(ch, key) => {
if (key.return) {
handleSubmit(input);
return;
}
if (key.backspace || key.delete) {
prevLenRef.current = 0;
onPastedFullChange(null);
onChange("");
return;
}
if (key.escape) {
prevLenRef.current = 0;
onPastedFullChange(null);
onChange("");
return;
}
if (ch && !key.ctrl && !key.meta) {
prevLenRef.current = ch.length;
onPastedFullChange(null);
onChange(ch);
}
},
{ isActive: focused && pastedFull !== null },
);
const isPasteMode = pastedFull !== null;
return (
<Box
flexDirection="column"
@@ -204,18 +294,47 @@ function InputBar({
width={width}
flexShrink={0}
>
<Box justifyContent="space-between">
<Box flexGrow={1}>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<TextInput
value={input}
onChange={onChange}
onSubmit={onSubmit}
placeholder={placeholder}
/>
</Box>
{scrollHint && <Text color={TEXT_DIM}>shift+↑↓ history</Text>}
<Box>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
{isPasteMode ? (
<Box width={width - 4 - 2} justifyContent="space-between">
<Text color={TEXT_PRIMARY} wrap="truncate-end">
{collapseForDisplay(pastedFull, width - 4 - 2)}
</Text>
{scrollHint && <Text color={TEXT_DIM}>shift+↑↓ history</Text>}
</Box>
) : (
<Box flexGrow={1} justifyContent="space-between">
<MultilineInput
value={input}
onChange={handleChange}
onSubmit={handleSubmit}
rows={1}
maxRows={INPUT_MAX_ROWS}
placeholder={placeholder}
focus={focused}
keyBindings={{
submit: (key) => key.return && !key.ctrl,
newline: (key) => key.return && key.ctrl,
}}
useCustomInput={(handler, isActive) => {
useInput((ch, key) => {
if (key.shift && (key.upArrow || key.downArrow)) return;
handler(ch, key);
}, { isActive });
}}
/>
{scrollHint && <Text color={TEXT_DIM}>shift+↑↓ history</Text>}
</Box>
)}
</Box>
{isPasteMode && (
<Box>
<Text color={TEXT_DIM} italic>
enter to send · esc to clear
</Text>
</Box>
)}
{queued && (
<Box>
<Text color={GOLD} dimColor italic>
@@ -315,12 +434,11 @@ function buildContentLines({
const lines: React.ReactElement[] = [];
if (!turn) return lines;
// User prompt
lines.push(emptyLine("u-gap", width));
lines.push(
<Box key="u-prompt" width={width} height={1}>
<Text color={CRANBERRY} bold>{"❯ "}</Text>
<Text wrap="truncate-end" color={TEXT_PRIMARY} bold>{turn.userText}</Text>
{collapsedUserPrompt(turn.userText, width - 4)}
</Box>,
);
@@ -458,12 +576,14 @@ function Viewport({
function SplashScreen({
animFrame,
width,
height,
status,
loading,
spinIdx,
}: {
animFrame: number;
width: number;
height: number;
status: string;
loading: boolean;
spinIdx: number;
@@ -472,14 +592,19 @@ function SplashScreen({
const statusColor =
status === "ready" ? TEAL : isErrorStatus(status) ? CRANBERRY : TEXT_DIM;
const contentHeight = frame.length + 1 + 1 + 1 + 2 + 1;
const topPad = Math.max(0, Math.floor((height - contentHeight) / 2));
return (
<Box
flexDirection="column"
alignItems="center"
justifyContent="center"
flexGrow={1}
width={width}
height={height}
overflow="hidden"
>
{topPad > 0 && <Box height={topPad} />}
<Box flexDirection="column" alignItems="center">
{frame.map((line, i) => (
<Text key={i} color={TEXT_PRIMARY}>{line}</Text>
@@ -524,6 +649,7 @@ function App({
const [viewTurnIdx, setViewTurnIdx] = useState(-1);
const [toolCallsExpanded, setToolCallsExpanded] = useState(false);
const [scrollOffset, setScrollOffset] = useState(0);
const [pastedFull, setPastedFull] = useState<string | null>(null);
const clientRef = useRef<GooseClient | null>(null);
const sessionIdRef = useRef<string | null>(null);
@@ -778,6 +904,7 @@ function App({
const trimmed = value.trim();
if (!trimmed) return;
setInput("");
setPastedFull(null);
setViewTurnIdx(-1);
setToolCallsExpanded(false);
setScrollOffset(0);
@@ -795,6 +922,7 @@ function App({
useInput((ch, key) => {
if (key.escape || (ch === "c" && key.ctrl)) {
if (pendingPermission) { resolvePermission("cancelled"); return; }
if (key.escape && pastedFull !== null) return;
exit();
}
@@ -818,6 +946,10 @@ function App({
return;
}
const viewingHistory = viewTurnIdx !== -1 && viewTurnIdx < turns.length - 1;
const multilineOwnsArrows =
!pendingPermission && !initialPrompt && !viewingHistory && pastedFull === null;
if (key.tab) {
const idx = viewTurnIdx === -1 ? turns.length - 1 : viewTurnIdx;
const t = turns[idx];
@@ -828,11 +960,11 @@ function App({
}
if (key.upArrow && !key.shift) {
setScrollOffset((prev) => prev + 3);
if (!multilineOwnsArrows) setScrollOffset((prev) => prev + 3);
return;
}
if (key.downArrow && !key.shift) {
setScrollOffset((prev) => Math.max(prev - 3, 0));
if (!multilineOwnsArrows) setScrollOffset((prev) => Math.max(prev - 3, 0));
return;
}
@@ -872,7 +1004,15 @@ function App({
const showInputBar = !pendingPermission && !initialPrompt && !isViewingHistory;
const headerH = 2;
const inputBarH = showInputBar ? (queuedMessages.length > 0 ? 4 : 3) : 0;
const isPasteMode = pastedFull !== null;
const inputContentRows = showInputBar
? isPasteMode
? 1
: Math.min(Math.max(input.split("\n").length, 1), INPUT_MAX_ROWS)
: 0;
const inputExtraLines =
(isPasteMode ? 1 : 0) + (queuedMessages.length > 0 ? 1 : 0);
const inputBarH = showInputBar ? 2 + inputContentRows + inputExtraLines : 0;
const historyBarH = isViewingHistory ? 2 : 0;
const viewportHeight = Math.max(
termHeight - PAD_Y * 2 - headerH - inputBarH - historyBarH,
@@ -903,6 +1043,7 @@ function App({
<SplashScreen
animFrame={gooseFrame}
width={contentWidth}
height={Math.max(termHeight - PAD_Y * 2 - inputBarH, 0)}
status={status}
loading={loading}
spinIdx={spinIdx}
@@ -951,6 +1092,9 @@ function App({
queued={queuedMessages.length > 0}
scrollHint={!bannerVisible && turns.length > 1}
placeholder={bannerVisible ? INITIAL_GREETING : undefined}
focused={showInputBar}
pastedFull={pastedFull}
onPastedFullChange={setPastedFull}
/>
)}
</Box>