Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 1x 1x 1x 1x 1x 1x 6x 6x 3x 3x 3x 6x 1x 1x 2x 2x 1x 1x | import { useState, type JSX } from "react";
import { Check, ChevronRight, Loader, X } from "lucide-react";
import type { ToolCardProps } from "./ToolCardProps.js";
import { parseShellOutput } from "./parseShellOutput.js";
import { ICON_SM } from "../../utils/iconSize.js";
import styles from "./toolCards.module.scss";
/** Extracts the command string from shell tool args. */
function getCommand(args: unknown): string {
if (args === null || args === undefined || typeof args !== "object") {
return "";
}
const a = args as Record<string, unknown>;
if (typeof a.command === "string") {
return a.command;
}
return "";
}
/**
* Simplifies a shell command for display.
*
* Strips PowerShell wrappers like `"C:\\Program Files\\PowerShell\\7\\pwsh.exe" -Command 'inner'`
* down to just the inner command.
*/
export function simplifyCommand(cmd: string): string {
// Match: "...pwsh.exe" -Command 'inner command'
const pwshMatch = /pwsh(?:\.exe)?["']?\s+-Command\s+'([^']*)'\s*$/i.exec(cmd);
if (pwshMatch) {
return pwshMatch[1];
}
// Match: "...pwsh.exe" -Command "inner command"
const pwshMatch2 = /pwsh(?:\.exe)?["']?\s+-Command\s+"([^"]*)"\s*$/i.exec(cmd);
if (pwshMatch2) {
return pwshMatch2[1];
}
return cmd;
}
/** Number of output lines shown when collapsed. */
const PREVIEW_LINES: number = 3;
/** Renders a shell command tool call with terminal-style output. */
export function ShellCard({ tool, args, result, isError }: ToolCardProps): JSX.Element {
const [expanded, setExpanded] = useState(false);
const rawCommand = getCommand(args);
const command = simplifyCommand(rawCommand);
const inProgress = result === undefined;
const parsed = result ? parseShellOutput(result) : null;
const outputLines = parsed?.output.split("\n") ?? [];
const hasMore = outputLines.length > PREVIEW_LINES;
const displayLines = expanded ? outputLines : outputLines.slice(0, PREVIEW_LINES);
const exitCode: number | undefined = parsed?.exitCode;
const derivedIsError: boolean = isError || (exitCode !== undefined && exitCode !== 0);
return (
<div
className={`${styles.card} ${derivedIsError ? styles.cardRed : styles.cardNeutral}`}
data-testid="tool-card-shell"
>
<div className={styles.header}>
<span
className={styles.icon}
style={{
color: "var(--text-secondary)",
fontFamily: "var(--font-mono)",
fontWeight: "bold",
}}
>
$
</span>
<span
className={styles.fileName}
style={{ flex: 1, color: "var(--text-primary)" }}
title={rawCommand !== command ? rawCommand : undefined}
data-testid="tool-card-command"
>
{command}
</span>
{exitCode !== undefined && (
<span
className={exitCode === 0 ? styles.exitOk : styles.exitError}
data-testid="tool-card-exit-code"
>
{exitCode === 0 ? (
<Check size={ICON_SM} aria-hidden="true" />
) : (
<X size={ICON_SM} aria-hidden="true" />
)}{" "}
exit {exitCode}
</span>
)}
{inProgress && (
<span className={styles.exitPending} data-testid="tool-card-pending">
<Loader size={ICON_SM} aria-hidden="true" />
</span>
)}
</div>
{!inProgress && parsed && parsed.output.length > 0 && (
<>
<pre className={styles.pre} data-testid="tool-card-output">
{displayLines.join("\n")}
</pre>
{hasMore && (
<button
type="button"
className={styles.bodyToggle}
onClick={() => {
setExpanded((v) => !v);
}}
aria-expanded={expanded}
data-testid="tool-card-toggle"
>
<span
className={`${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`}
aria-hidden="true"
>
<ChevronRight size={ICON_SM} />
</span>
{expanded ? "collapse" : `${outputLines.length - PREVIEW_LINES} more lines`}
</button>
)}
</>
)}
</div>
);
}
|