From c18de8634623cb8501fc2b88153f9c307ab892e1 Mon Sep 17 00:00:00 2001
From: Charles Packer <packercharles@gmail.com>
Date: Sun, 2 Nov 2025 20:45:38 -0800
Subject: [PATCH] fix: add ErrorMessageRich component for consistent two-column
 formatting (#55)

Co-authored-by: Letta <noreply@letta.com>
---
 src/cli/App.tsx                         |  5 ++--
 src/cli/components/ErrorMessageRich.tsx | 35 +++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/cli/components/ErrorMessageRich.tsx

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 (
+    <Box flexDirection="row">
+      <Box width={2} flexShrink={0}>
+        <Text color="yellow">⚠</Text>
+      </Box>
+      <Box flexGrow={1} width={contentWidth}>
+        <Text color="yellow">{line.text}</Text>
+      </Box>
+    </Box>
+  );
+});
+
+ErrorMessage.displayName = "ErrorMessage";