added cors support and started chat client

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

@@ -0,0 +1,189 @@
+import React from 'react';
+
+const MODELS = [
+  { value: 'companion:latest',    label: 'Companion' },
+  { value: 'mistral-nemo:latest', label: 'Mistral Nemo' },
+  { value: 'coder:latest',        label: 'Coder' },
+  { value: 'qwen2.5-coder:14b',   label: 'Qwen 2.5 Coder 14B' },
+];
+
+export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange }) {
+
+  return (
+    <div 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',
+        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>
+        )}
+      </div>
+
+      {isOpen && (
+        <div style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
+
+          {/* Model selector */}
+          <Section title="Model">
+            <select
+              value={selectedModel}
+              onChange={e => onModelChange(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '8px 10px',
+                background: 'var(--bg-elevated)',
+                border: '1px solid var(--border)',
+                borderRadius: '8px',
+                color: 'var(--text-primary)',
+                fontSize: '13px',
+                cursor: 'pointer',
+                outline: 'none',
+              }}
+            >
+              {MODELS.map(m => (
+                <option key={m.value} value={m.value}>{m.label}</option>
+              ))}
+            </select>
+          </Section>
+
+          {/* Session details */}
+          <Section title="Session">
+            {activeSession ? (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <InfoRow label="ID" value={activeSession.external_id} mono truncate />
+                <InfoRow
+                  label="Status"
+                  value={activeSession.isNew ? 'Unsaved' : 'Active'}
+                  accent={activeSession.isNew}
+                />
+              </div>
+            ) : (
+              <p style={{ fontSize: '12px', color: 'var(--text-muted)' }}>No session selected</p>
+            )}
+          </Section>
+
+          {/* Last response stats */}
+          <Section title="Last Response">
+            {lastModel ? (
+              <div style={{ display: 'flex', flexDirection: 'column', 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>
+            )}
+          </Section>
+
+        </div>
+      )}
+
+      {/* Collapsed — show icon indicators */}
+      {!isOpen && (
+        <div style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          paddingTop: '16px',
+          gap: '16px',
+        }}>
+          <IconHint title="Model">M</IconHint>
+          <IconHint title="Session">S</IconHint>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 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>
+      {children}
+    </div>
+  );
+}
+
+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>
+      <span style={{
+        fontSize: '12px',
+        color: accent ? 'var(--accent)' : 'var(--text-secondary)',
+        fontFamily: mono ? 'monospace' : 'inherit',
+        overflow: truncate ? 'hidden' : 'visible',
+        textOverflow: truncate ? 'ellipsis' : 'clip',
+        whiteSpace: truncate ? 'nowrap' : 'normal',
+        maxWidth: truncate ? '130px' : 'auto',
+        textAlign: 'right',
+      }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function IconHint({ title, children }) {
+  return (
+    <div title={title} style={{
+      width: '32px',
+      height: '32px',
+      borderRadius: '8px',
+      background: 'var(--bg-elevated)',
+      border: '1px solid var(--border)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '12px',
+      color: 'var(--text-muted)',
+      cursor: 'default',
+    }}>
+      {children}
+    </div>
+  );
+}