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

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

@@ -23,89 +23,51 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
       flexShrink: 0,
       background: 'var(--bg-surface)',
       borderRight: '1px solid var(--border)',
-      display: 'flex',
-      flexDirection: 'column',
       transition: 'width 0.2s ease',
       overflow: 'hidden',
-    }}>
+    }} className="flex-col">
 
       {/* Header */}
-      <div style={{
-        height: 'var(--header-height)',
-        display: 'flex',
-        alignItems: 'center',
+      <div className="panel-header" style={{
         justifyContent: isOpen ? 'space-between' : 'center',
         padding: isOpen ? '0 12px 0 16px' : '0',
-        borderBottom: '1px solid var(--border)',
-        flexShrink: 0,
       }}>
-        {isOpen && (
-          <span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-secondary)' }}>
-            Conversations
-          </span>
-        )}
-        <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 className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
+        <button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
       </div>
 
       {/* New chat button */}
       <div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
-        <button onClick={onNewChat} style={{
+        <button className="btn-primary" onClick={onNewChat} style={{
           width: '100%',
           padding: isOpen ? '8px 12px' : '8px',
-          background: 'var(--accent)',
-          border: 'none',
-          borderRadius: '8px',
-          color: 'white',
-          fontSize: '13px',
-          fontWeight: 500,
-          cursor: 'pointer',
           display: 'flex',
           alignItems: 'center',
           justifyContent: isOpen ? 'flex-start' : 'center',
           gap: '8px',
-          transition: 'background 0.15s',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
-        }}
-          onMouseEnter={e => e.currentTarget.style.background = 'var(--accent-hover)'}
-          onMouseLeave={e => e.currentTarget.style.background = 'var(--accent)'}
-        >
+        }}>
           <span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
           {isOpen && <span>New Chat</span>}
         </button>
       </div>
 
       {/* Session list */}
-      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
+      <div className="flex-1 scroll-y">
         {isOpen && sessions.map(session => {
           const isActive = activeSession?.external_id === session.external_id;
           return (
             <button
               key={session.external_id}
               onClick={() => onSelectSession(session)}
+              className="btn-reset"
               style={{
                 width: '100%',
                 padding: '10px 16px',
                 background: isActive ? 'var(--bg-elevated)' : 'transparent',
-                border: 'none',
                 borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
                 textAlign: 'left',
-                cursor: 'pointer',
-                display: 'flex',
                 flexDirection: 'column',
                 gap: '3px',
                 transition: 'background 0.1s',
@@ -113,45 +75,25 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
               onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-elevated)'; }}
               onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
             >
-              <div style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                gap: '8px',
-              }}>
-                <span style={{
-                  fontSize: '13px',
+              <div className="flex truncate" style={{ justifyContent: 'space-between', gap: '8px' }}>
+                <span className="text-base truncate" style={{
                   color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
                   fontWeight: isActive ? 500 : 400,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
                   flex: 1,
                 }}>
                   {getPreview(session)}
                 </span>
-                <span style={{ fontSize: '11px', color: 'var(--text-muted)', flexShrink: 0 }}>
-                  {formatDate(session.updated_at)}
-                </span>
+                <span className="text-xs text-muted flex-shrink">{formatDate(session.updated_at)}</span>
               </div>
               {session.isNew && (
-                <span style={{
-                  fontSize: '11px',
-                  color: 'var(--accent)',
-                  fontStyle: 'italic',
-                }}>Unsaved</span>
+                <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
               )}
             </button>
           );
         })}
 
         {isOpen && sessions.length === 0 && (
-          <div style={{
-            padding: '24px 16px',
-            color: 'var(--text-muted)',
-            fontSize: '13px',
-            textAlign: 'center',
-          }}>
+          <div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
             No conversations yet
           </div>
         )}