feat: enhance AI communication with dynamic system prompts, robust retry, and TUI formatters

bin/ui/components/ChatBubble.mjs.backup

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+const h = React.createElement;
+
+const ChatBubble = ({ role, content, meta, width, children }) => {
+    // Calculate safe content width accounting for gutter
+    const contentWidth = width ? width - 2 : undefined; // Account for left gutter only
+
+    // ═══════════════════════════════════════════════════════════════
+    // USER MESSAGE - Clean text-focused presentation
+    // ═══════════════════════════════════════════════════════════════
+    if (role === 'user') {
+        return h(Box, { 
+            width: width, 
+            flexDirection: 'row', 
+            justifyContent: 'flex-end', 
+            marginBottom: 1,
+            paddingLeft: 2
+        },
+            h(Text, { color: 'cyan', wrap: 'wrap' }, content)
+        );
+    }
+
+    // ═══════════════════════════════════════════════════════════════
+    // SYSTEM - MINIMALIST TOAST
+    // ═══════════════════════════════════════════════════════════════
+    if (role === 'system') {
+        return h(Box, { width: width, justifyContent: 'center', marginBottom: 1 },
+            h(Text, { color: 'gray', dimColor: true }, ` ${content} `)
+        );
+    }
+
+    // ═══════════════════════════════════════════════════════════════
+    // ERROR - CLEAN GUTTER STYLE
+    // ═══════════════════════════════════════════════════════════════
+    if (role === 'error') {
+        // Strip redundant "Error: " prefix if present in content
+        const cleanContent = content.replace(/^Error:\s*/i, '');
+        return h(Box, { 
+            width: width, 
+            flexDirection: 'row', 
+            marginBottom: 1
+        },
+            h(Box, { width: 1, marginRight: 1, backgroundColor: 'red' }),
+            h(Text, { color: 'red', wrap: 'wrap' }, cleanContent)
+        );
+    }
+
+    // ═══════════════════════════════════════════════════════════════
+    // ASSISTANT - Clean text-focused style (Opencode-like)
+    // ═══════════════════════════════════════════════════════════════
+    return h(Box, { 
+        width: width, 
+        flexDirection: 'row', 
+        marginBottom: 1
+    },
+        // Clean left gutter similar to opencode
+        h(Box, { width: 2, marginRight: 1, borderStyle: 'single', borderRight: false, borderTop: false, borderBottom: false, borderLeftColor: 'green' }),
+        
+        // Content area - text focused, no borders
+        h(Box, { 
+            flexDirection: 'column',
+            flexGrow: 1, 
+            minWidth: 10 
+        },
+            children ? children : h(Text, { color: 'white', wrap: 'wrap' }, content)
+        )
+    );
+};
+
+export default ChatBubble;