chat client clean up and switch to llama.cpp with models folder network sharing

packages/chat-client/src/components/MessageBubble.jsx

@@ -4,25 +4,20 @@ export default function MessageBubble({ message }) {
   const isUser = message.role === 'user';
 
   return (
-    <div style={{
-      display: 'flex',
+    <div className="flex" style={{
       justifyContent: isUser ? 'flex-end' : 'flex-start',
       marginBottom: '12px',
       padding: '0 16px',
     }}>
       {!isUser && (
-        <div style={{
+        <div className="flex items-center justify-center flex-shrink" style={{
           width: '28px',
           height: '28px',
           borderRadius: '50%',
           background: 'var(--accent)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
           fontSize: '12px',
           fontWeight: 600,
           marginRight: '8px',
-          flexShrink: 0,
           alignSelf: 'flex-end',
         }}>N</div>
       )}
@@ -47,16 +42,12 @@ export default function MessageBubble({ message }) {
             height: '14px',
             background: 'var(--text-secondary)',
             marginLeft: '2px',
-            borderRadius: '2px',
+            borderRadius: 'var(--radius-sm)',
             animation: 'blink 1s step-end infinite',
           }} />
         )}
         {message.error && (
-          <div style={{
-            marginTop: '6px',
-            fontSize: '12px',
-            color: '#ff6b6b',
-          }}>
+          <div className="text-xs" style={{ marginTop: '6px', color: '#ff6b6b' }}>
             ⚠ Failed to complete response
           </div>
         )}