Improve OpenTUI session rendering and tool display
This commit is contained in:
parent
0cc3d9229e
commit
ed2c8666f1
1 changed files with 14 additions and 13 deletions
|
|
@ -203,6 +203,7 @@ function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
|
||||||
paddingTop: 1,
|
paddingTop: 1,
|
||||||
paddingBottom: 1,
|
paddingBottom: 1,
|
||||||
paddingLeft: 2,
|
paddingLeft: 2,
|
||||||
|
gap: 1,
|
||||||
backgroundColor: Theme.backgroundPanel,
|
backgroundColor: Theme.backgroundPanel,
|
||||||
customBorderChars: SplitBorder.customBorderChars,
|
customBorderChars: SplitBorder.customBorderChars,
|
||||||
borderColor: Theme.background,
|
borderColor: Theme.background,
|
||||||
|
|
@ -220,7 +221,7 @@ function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
|
||||||
output={props.part.state.status === "completed" ? props.part.state.output : undefined}
|
output={props.part.state.status === "completed" ? props.part.state.output : undefined}
|
||||||
/>
|
/>
|
||||||
{props.part.state.status === "error" && (
|
{props.part.state.status === "error" && (
|
||||||
<box paddingLeft={2} marginTop={1}>
|
<box paddingLeft={2}>
|
||||||
<text fg={Theme.error}>{props.part.state.error.replace("Error: ", "")}</text>
|
<text fg={Theme.error}>{props.part.state.error.replace("Error: ", "")}</text>
|
||||||
</box>
|
</box>
|
||||||
)}
|
)}
|
||||||
|
|
@ -273,19 +274,19 @@ ToolRegistry.register<typeof BashTool>({
|
||||||
container: "block",
|
container: "block",
|
||||||
ready(props) {
|
ready(props) {
|
||||||
return (
|
return (
|
||||||
<box>
|
<>
|
||||||
<ToolTitle icon="#" fallback="Writing command..." when={props.input.command}>
|
<ToolTitle icon="#" fallback="Writing command..." when={props.input.command}>
|
||||||
{props.input.description}
|
{props.input.description}
|
||||||
</ToolTitle>
|
</ToolTitle>
|
||||||
<Show when={props.input.command}>
|
<Show when={props.input.command}>
|
||||||
<box paddingTop={1}>
|
<text fg={Theme.text}>$ {props.input.command}</text>
|
||||||
<text fg={Theme.text}>$ {props.input.command}</text>
|
</Show>
|
||||||
<box>
|
<Show when={props.output?.trim()}>
|
||||||
<text fg={Theme.text}>{props.output?.trim()}</text>
|
<box>
|
||||||
</box>
|
<text fg={Theme.text}>{props.output?.trim()}</text>
|
||||||
</box>
|
</box>
|
||||||
</Show>
|
</Show>
|
||||||
</box>
|
</>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
@ -341,7 +342,7 @@ ToolRegistry.register<typeof WriteTool>({
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<box gap={1}>
|
<>
|
||||||
<ToolTitle icon="←" fallback="Preparing write..." when={props.input.filePath}>
|
<ToolTitle icon="←" fallback="Preparing write..." when={props.input.filePath}>
|
||||||
Wrote {props.input.filePath}
|
Wrote {props.input.filePath}
|
||||||
</ToolTitle>
|
</ToolTitle>
|
||||||
|
|
@ -353,7 +354,7 @@ ToolRegistry.register<typeof WriteTool>({
|
||||||
<text>{code()}</text>
|
<text>{code()}</text>
|
||||||
</box>
|
</box>
|
||||||
</box>
|
</box>
|
||||||
</box>
|
</>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
@ -414,7 +415,7 @@ ToolRegistry.register<typeof TaskTool>({
|
||||||
Task {props.input.description}
|
Task {props.input.description}
|
||||||
</ToolTitle>
|
</ToolTitle>
|
||||||
<Show when={props.metadata.summary?.length}>
|
<Show when={props.metadata.summary?.length}>
|
||||||
<box marginTop={1}>
|
<box>
|
||||||
<For each={props.metadata.summary ?? []}>
|
<For each={props.metadata.summary ?? []}>
|
||||||
{(task) => (
|
{(task) => (
|
||||||
<text style={{ fg: Theme.textMuted }}>
|
<text style={{ fg: Theme.textMuted }}>
|
||||||
|
|
@ -460,7 +461,7 @@ ToolRegistry.register<typeof EditTool>({
|
||||||
return styled
|
return styled
|
||||||
})
|
})
|
||||||
return (
|
return (
|
||||||
<box gap={1}>
|
<>
|
||||||
<ToolTitle icon="←" fallback="Preparing edit..." when={props.input.filePath}>
|
<ToolTitle icon="←" fallback="Preparing edit..." when={props.input.filePath}>
|
||||||
Edit {normalizePath(props.input.filePath!)}
|
Edit {normalizePath(props.input.filePath!)}
|
||||||
</ToolTitle>
|
</ToolTitle>
|
||||||
|
|
@ -469,7 +470,7 @@ ToolRegistry.register<typeof EditTool>({
|
||||||
<text>{code()}</text>
|
<text>{code()}</text>
|
||||||
</box>
|
</box>
|
||||||
</Show>
|
</Show>
|
||||||
</box>
|
</>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue