diff --git a/src/cli/App.tsx b/src/cli/App.tsx index 55c677c..3621d24 100644 --- a/src/cli/App.tsx +++ b/src/cli/App.tsx @@ -29,7 +29,8 @@ import { ApprovalDialog } from "./components/ApprovalDialogRich"; // import { AssistantMessage } from "./components/AssistantMessage"; import { AssistantMessage } from "./components/AssistantMessageRich"; import { CommandMessage } from "./components/CommandMessage"; -import { ErrorMessage } from "./components/ErrorMessage"; +// import { ErrorMessage } from "./components/ErrorMessage"; +import { ErrorMessage } from "./components/ErrorMessageRich"; // import { Input } from "./components/Input"; import { Input } from "./components/InputRich"; import { ModelSelector } from "./components/ModelSelector"; @@ -371,7 +372,7 @@ export default function App({ buffersRef.current.byId.set(id, { kind: "error", id, - text: `⚠ ${message}`, + text: message, }); buffersRef.current.order.push(id); refreshDerived(); diff --git a/src/cli/components/ErrorMessageRich.tsx b/src/cli/components/ErrorMessageRich.tsx new file mode 100644 index 0000000..da01e7f --- /dev/null +++ b/src/cli/components/ErrorMessageRich.tsx @@ -0,0 +1,35 @@ +import { Box, Text } from "ink"; +import { memo } from "react"; +import { useTerminalWidth } from "../hooks/useTerminalWidth"; + +type ErrorLine = { + kind: "error"; + id: string; + text: string; +}; + +/** + * ErrorMessageRich - Rich formatting version with two-column layout + * + * Features: + * - Left column (2 chars wide) with warning marker + * - Right column with wrapped text content + * - Consistent with other Rich message components + */ +export const ErrorMessage = memo(({ line }: { line: ErrorLine }) => { + const columns = useTerminalWidth(); + const contentWidth = Math.max(0, columns - 2); + + return ( + + + + + + {line.text} + + + ); +}); + +ErrorMessage.displayName = "ErrorMessage";