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

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

@@ -1,54 +1,28 @@
 import React from 'react';
 import { MODELS } from '../config/constants';
 
-export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange }) {
-
+export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange, models }) {
   return (
-    <div style={{
+    <div className="flex-col" style={{
       width: isOpen ? 'var(--panel-width)' : '56px',
       flexShrink: 0,
       background: 'var(--bg-surface)',
       borderLeft: '1px solid var(--border)',
-      display: 'flex',
-      flexDirection: 'column',
       transition: 'width 0.2s ease',
       overflow: 'hidden',
     }}>
 
       {/* Header */}
-      <div style={{
-        height: 'var(--header-height)',
-        display: 'flex',
-        alignItems: 'center',
+      <div className="panel-header" style={{
         justifyContent: isOpen ? 'space-between' : 'center',
         padding: isOpen ? '0 16px 0 12px' : '0',
-        borderBottom: '1px solid var(--border)',
-        flexShrink: 0,
       }}>
-        <button onClick={onToggle} style={{
-          background: 'none',
-          border: 'none',
-          color: 'var(--text-muted)',
-          cursor: 'pointer',
-          padding: '6px',
-          borderRadius: '6px',
-          fontSize: '16px',
-          lineHeight: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-          {isOpen ? '▶' : '◀'}
-        </button>
-        {isOpen && (
-          <span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-secondary)' }}>
-            Session Info
-          </span>
-        )}
+        <button className="btn-icon" onClick={onToggle}>{isOpen ? '▶' : '◀'}</button>
+        {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Session Info</span>}
       </div>
 
       {isOpen && (
-        <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
+        <div className="flex-1 scroll-y" style={{ padding: '16px' }}>
 
           {/* Model selector */}
           <Section title="Model">
@@ -60,14 +34,14 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
                 padding: '8px 10px',
                 background: 'var(--bg-elevated)',
                 border: '1px solid var(--border)',
-                borderRadius: '8px',
+                borderRadius: 'var(--radius-md)',
                 color: 'var(--text-primary)',
                 fontSize: '13px',
                 cursor: 'pointer',
                 outline: 'none',
               }}
             >
-              {MODELS.map(m => (
+              {models.map(m => (
                 <option key={m.value} value={m.value}>{m.label}</option>
               ))}
             </select>
@@ -76,44 +50,32 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
           {/* Session details */}
           <Section title="Session">
             {activeSession ? (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              <div className="flex-col" style={{ gap: '8px' }}>
                 <InfoRow label="ID" value={activeSession.external_id} mono truncate />
-                <InfoRow
-                  label="Status"
-                  value={activeSession.isNew ? 'Unsaved' : 'Active'}
-                  accent={activeSession.isNew}
-                />
+                <InfoRow label="Status" value={activeSession.isNew ? 'Unsaved' : 'Active'} accent={activeSession.isNew} />
               </div>
             ) : (
-              <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>No session selected</p>
+              <p className="text-sm text-muted">No session selected</p>
             )}
           </Section>
 
           {/* Last response stats */}
           <Section title="Last Response">
             {lastModel ? (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              <div className="flex-col" style={{ gap: '8px' }}>
                 <InfoRow label="Model"  value={lastModel} />
                 <InfoRow label="Tokens" value={lastTokenCount > 0 ? lastTokenCount.toLocaleString() : '—'} />
               </div>
             ) : (
-              <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>No response yet</p>
+              <p className="text-sm text-muted">No response yet</p>
             )}
           </Section>
 
         </div>
       )}
 
-      {/* Collapsed — show icon indicators */}
       {!isOpen && (
-        <div style={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          paddingTop: '16px',
-          gap: '16px',
-        }}>
+        <div className="flex-col items-center" style={{ flex: 1, paddingTop: '16px', gap: '16px' }}>
           <IconHint title="Model">M</IconHint>
           <IconHint title="Session">S</IconHint>
         </div>
@@ -122,21 +84,10 @@ export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel,
   );
 }
 
-// ── Internal sub-components ──────────────────────────────────
-
 function Section({ title, children }) {
   return (
     <div style={{ marginBottom: '24px' }}>
-      <p style={{
-        fontSize: '11px',
-        fontWeight: 500,
-        color: 'var(--text-muted)',
-        textTransform: 'uppercase',
-        letterSpacing: '0.08em',
-        marginBottom: '10px',
-      }}>
-        {title}
-      </p>
+      <p className="label-upper" style={{ marginBottom: '10px' }}>{title}</p>
       {children}
     </div>
   );
@@ -144,8 +95,8 @@ function Section({ title, children }) {
 
 function InfoRow({ label, value, mono, truncate, accent }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' }}>
-      <span style={{ fontSize: '12px', color: 'var(--text-muted)', flexShrink: 0 }}>{label}</span>
+    <div className="flex items-center" style={{ justifyContent: 'space-between', gap: '8px' }}>
+      <span className="text-sm text-muted flex-shrink">{label}</span>
       <span style={{
         fontSize: '12px',
         color: accent ? 'var(--accent)' : 'var(--text-secondary)',
@@ -167,7 +118,7 @@ function IconHint({ title, children }) {
     <div title={title} style={{
       width: '32px',
       height: '32px',
-      borderRadius: '8px',
+      borderRadius: 'var(--radius-md)',
       background: 'var(--bg-elevated)',
       border: '1px solid var(--border)',
       display: 'flex',