docs: share page bash tool output

This commit is contained in:
Jay V 2025-06-24 19:02:16 -04:00
parent 0b1a8ae699
commit a3cf18c905
2 changed files with 43 additions and 16 deletions

View file

@ -463,6 +463,7 @@ function MarkdownPart(props: MarkdownPartProps) {
interface TerminalPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
command: string
error?: string
result?: string
desc?: string
expand?: boolean
@ -470,6 +471,7 @@ interface TerminalPartProps extends JSX.HTMLAttributes<HTMLDivElement> {
function TerminalPart(props: TerminalPartProps) {
const [local, rest] = splitProps(props, [
"command",
"error",
"result",
"desc",
"expand",
@ -508,12 +510,25 @@ function TerminalPart(props: TerminalPartProps) {
</div>
<div data-section="content">
<CodeBlock lang="bash" code={local.command} />
<CodeBlock
lang="console"
onRendered={checkOverflow}
ref={(el) => (preEl = el)}
code={local.result || ""}
/>
<Switch>
<Match when={local.error}>
<CodeBlock
data-section="error"
lang="text"
onRendered={checkOverflow}
ref={(el) => (preEl = el)}
code={local.error || ""}
/>
</Match>
<Match when={local.result}>
<CodeBlock
lang="console"
onRendered={checkOverflow}
ref={(el) => (preEl = el)}
code={local.result || ""}
/>
</Match>
</Switch>
</div>
</div>
{((!local.expand && overflowed()) || expanded()) && (
@ -1601,8 +1616,10 @@ export default function Share(props: {
}
>
{(_part) => {
const command = () => toolData()?.args.command
const desc = () => toolData()?.args.description
const command = () => toolData()?.metadata?.title
const desc = () => toolData()?.metadata?.description
const result = () => toolData()?.metadata?.stdout
const error = () => toolData()?.metadata?.stderr
return (
<div
@ -1617,14 +1634,17 @@ export default function Share(props: {
<div></div>
</div>
<div data-section="content">
<div data-part-tool-body>
<TerminalPart
desc={desc()}
data-size="sm"
command={command()}
result={toolData()?.result}
/>
</div>
{command() && (
<div data-part-tool-body>
<TerminalPart
desc={desc()}
data-size="sm"
command={command()!}
result={result()}
error={error()}
/>
</div>
)}
<ToolFooter
time={toolData()?.duration || 0}
/>

View file

@ -616,6 +616,13 @@
}
}
[data-section="error"] {
pre {
color: var(--sl-color-red) !important;
--shiki-dark: var(--sl-color-red) !important;
}
}
&[data-expanded="true"] {
pre {
display: block;