diff options
| author | Jay V <[email protected]> | 2025-06-24 19:02:16 -0400 |
|---|---|---|
| committer | Jay V <[email protected]> | 2025-06-24 19:28:51 -0400 |
| commit | a3cf18c905a65368dd39daaaeab49c98499ae4e8 (patch) | |
| tree | 3e34c4539154e77ace61182270876ce94b7665a0 | |
| parent | 0b1a8ae699a4bccc379f7f6569171163e1caa7cf (diff) | |
| download | opencode-a3cf18c905a65368dd39daaaeab49c98499ae4e8.tar.gz opencode-a3cf18c905a65368dd39daaaeab49c98499ae4e8.zip | |
docs: share page bash tool output
| -rw-r--r-- | packages/web/src/components/Share.tsx | 52 | ||||
| -rw-r--r-- | packages/web/src/components/share.module.css | 7 |
2 files changed, 43 insertions, 16 deletions
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index 73001e2ed..07b12946b 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -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} /> diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css index f094bda56..53f082c9b 100644 --- a/packages/web/src/components/share.module.css +++ b/packages/web/src/components/share.module.css @@ -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; |