fix: add ErrorMessageRich component for consistent two-column formatting (#55)

Co-authored-by: Letta <noreply@letta.com>

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();

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";