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

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

@@ -6,7 +6,6 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
   const inputRef = useRef(null);
   const [input, setInput] = React.useState('');
 
-  // Auto-scroll to bottom when messages change
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
@@ -26,58 +25,30 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
   }
 
   return (
-    <div style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      background: 'var(--bg-base)',
-    }}>
+    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>
 
       {/* Header */}
-      <div style={{
-        height: 'var(--header-height)',
-        borderBottom: '1px solid var(--border)',
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 20px',
-        background: 'var(--bg-surface)',
-        flexShrink: 0,
-      }}>
-        <span style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
+      <div className="panel-header" style={{ padding: '0 20px' }}>
+        <span className="text-base text-secondary">
           {activeSession ? activeSession.external_id : 'No session selected'}
         </span>
       </div>
 
       {/* Message thread */}
-      <div style={{
-        flex: 1,
-        overflowY: 'auto',
-        padding: '20px 0',
-      }}>
+      <div className="flex-1 scroll-y" style={{ padding: '20px 0' }}>
         {!activeSession && (
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
+          <div className="flex-col items-center justify-center" style={{
             height: '100%',
             color: 'var(--text-muted)',
             gap: '12px',
           }}>
             <div style={{ fontSize: '32px', opacity: 0.4 }}>✦</div>
-            <p style={{ fontSize: '14px' }}>Select a session or start a new chat</p>
+            <p className="text-base">Select a session or start a new chat</p>
           </div>
         )}
 
         {loadingHistory && (
-          <div style={{
-            display: 'flex',
-            justifyContent: 'center',
-            padding: '40px',
-            color: 'var(--text-muted)',
-            fontSize: '13px',
-          }}>
+          <div className="flex justify-center text-muted" style={{ padding: '40px', fontSize: '13px' }}>
             Loading history...
           </div>
         )}
@@ -96,13 +67,11 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
         background: 'var(--bg-surface)',
         flexShrink: 0,
       }}>
-        <div style={{
-          display: 'flex',
+        <div className="flex items-end" style={{
           gap: '10px',
-          alignItems: 'flex-end',
           background: 'var(--bg-elevated)',
           border: '1px solid var(--border)',
-          borderRadius: '12px',
+          borderRadius: 'var(--radius-lg)',
           padding: '8px 12px',
         }}>
           <textarea
@@ -127,23 +96,17 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
               overflowY: 'auto',
             }}
             onInput={e => {
-              // Auto-grow textarea
               e.target.style.height = 'auto';
               e.target.style.height = `${e.target.scrollHeight}px`;
             }}
           />
 
           {streaming ? (
-            <button onClick={onCancel} style={{
+            <button onClick={onCancel} className="btn-reset" style={{
               background: 'var(--text-muted)',
-              border: 'none',
-              borderRadius: '8px',
+              borderRadius: 'var(--radius-md)',
               width: '32px',
               height: '32px',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
               flexShrink: 0,
               color: 'white',
               fontSize: '12px',
@@ -152,29 +115,19 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
             <button
               onClick={handleSend}
               disabled={!activeSession || !input.trim()}
+              className="btn-primary"
               style={{
-                background: activeSession && input.trim() ? 'var(--accent)' : 'var(--bg-elevated)',
-                border: '1px solid var(--border)',
-                borderRadius: '8px',
                 width: '32px',
                 height: '32px',
-                cursor: activeSession && input.trim() ? 'pointer' : 'default',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
                 flexShrink: 0,
-                color: activeSession && input.trim() ? 'white' : 'var(--text-muted)',
                 fontSize: '16px',
-                transition: 'background 0.15s',
-              }}>↑</button>
+                border: '1px solid var(--border)',
+              }}
+            >↑</button>
           )}
         </div>
-        <p style={{
-          fontSize: '11px',
-          color: 'var(--text-muted)',
-          textAlign: 'center',
-          marginTop: '8px',
-        }}>
+
+        <p className="text-xs text-muted" style={{ textAlign: 'center', marginTop: '8px' }}>
           Enter to send · Shift+Enter for new line
         </p>
       </div>