free-coding-models 0.3.36 → 0.3.40

package/web/src/components/dashboard/StatsBar.jsx

@@ -0,0 +1,40 @@
+/**
+ * @file web/src/components/dashboard/StatsBar.jsx
+ * @description Stats cards row showing total models, online count, avg latency, fastest model, providers.
+ */
+import { useMemo } from 'react'
+import styles from './StatsBar.module.css'
+
+export default function StatsBar({ models }) {
+  const stats = useMemo(() => {
+    const total = models.length
+    const online = models.filter(m => m.status === 'up').length
+    const onlineWithPing = models.filter(m => m.status === 'up' && m.avg !== Infinity && m.avg < 99000)
+    const avgLatency = onlineWithPing.length > 0
+      ? Math.round(onlineWithPing.reduce((s, m) => s + m.avg, 0) / onlineWithPing.length)
+      : null
+    const fastest = [...onlineWithPing].sort((a, b) => a.avg - b.avg)[0]
+    const providers = new Set(models.map(m => m.providerKey)).size
+    return [
+      { icon: '📊', value: total, label: 'Total Models' },
+      { icon: '🟢', value: online, label: 'Online' },
+      { icon: '⚡', value: avgLatency != null ? `${avgLatency}ms` : '—', label: 'Avg Latency' },
+      { icon: '🏆', value: fastest ? fastest.label : '—', label: 'Fastest Model' },
+      { icon: '🌐', value: providers, label: 'Providers' },
+    ]
+  }, [models])
+
+  return (
+    <section className={styles.statsBar}>
+      {stats.map(s => (
+        <div key={s.label} className={styles.card}>
+          <div className={styles.icon}>{s.icon}</div>
+          <div className={styles.body}>
+            <div className={styles.value}>{s.value}</div>
+            <div className={styles.label}>{s.label}</div>
+          </div>
+        </div>
+      ))}
+    </section>
+  )
+}

package/web/src/components/dashboard/StatsBar.module.css

@@ -0,0 +1,28 @@
+.statsBar {
+  position: relative; z-index: 1;
+  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
+  padding: 20px 24px 0;
+}
+.card {
+  display: flex; align-items: center; gap: 12px;
+  background: var(--color-bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 16px 18px;
+  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.card:hover {
+  border-color: var(--color-border-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+.icon { font-size: 28px; }
+.body { flex: 1; }
+.value { font-size: 22px; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
+.label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin-top: 2px; }
+
+@media (max-width: 1024px) { .statsBar { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 768px) { .statsBar { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 480px) { .statsBar { grid-template-columns: 1fr; } }

package/web/src/components/layout/Footer.jsx

@@ -0,0 +1,19 @@
+/**
+ * @file web/src/components/layout/Footer.jsx
+ * @description Simple footer with author credit and links.
+ */
+import styles from './Footer.module.css'
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.left}>
+        Made with ❤️ by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
+      </div>
+      <div className={styles.right}>
+        <a href="https://github.com/vava-nessa/free-coding-models" target="_blank" rel="noopener">GitHub</a>
+        <a href="https://discord.gg/ZTNFHvvCkU" target="_blank" rel="noopener">Discord</a>
+      </div>
+    </footer>
+  )
+}

package/web/src/components/layout/Footer.module.css

@@ -0,0 +1,10 @@
+.footer {
+  position: relative; z-index: 1;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border);
+  font-size: 12px; color: var(--color-text-dim);
+}
+.left a, .right a { color: var(--color-text-dim); text-decoration: none; }
+.left a:hover, .right a:hover { color: var(--color-accent); }
+.right { display: flex; gap: 16px; }

package/web/src/components/layout/Header.jsx

@@ -0,0 +1,38 @@
+/**
+ * @file web/src/components/layout/Header.jsx
+ * @description Top header bar with search, export button, settings shortcut, and theme toggle.
+ */
+import styles from './Header.module.css'
+
+export default function Header({ searchQuery, onSearchChange, onToggleTheme, onOpenSettings, onOpenExport }) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.left}>
+        <div className={styles.logo}>
+          <span className={styles.logoIcon}>⚡</span>
+          <span className={styles.logoText}>free-coding-models</span>
+        </div>
+        <span className={styles.version}>v{__APP_VERSION__}</span>
+      </div>
+      <div className={styles.center}>
+        <div className={styles.searchBar}>
+          <span className={styles.searchIcon}>🔍</span>
+          <input
+            type="text"
+            className={styles.searchInput}
+            placeholder="Search models, providers, tiers..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            autoComplete="off"
+          />
+          <kbd className={styles.kbd}>Ctrl+K</kbd>
+        </div>
+      </div>
+      <div className={styles.right}>
+        <button className={styles.iconBtn} onClick={onToggleTheme} title="Toggle theme">☽</button>
+        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data">↓</button>
+        <button className={styles.primaryBtn} onClick={onOpenSettings}>⚙ Settings</button>
+      </div>
+    </header>
+  )
+}

package/web/src/components/layout/Header.module.css

@@ -0,0 +1,73 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  gap: 20px;
+  background: var(--color-bg-card);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  border-bottom: 1px solid var(--color-border);
+}
+.left { display: flex; align-items: center; gap: 12px; }
+.center { flex: 1; max-width: 480px; }
+.right { display: flex; align-items: center; gap: 10px; }
+
+.logo { display: flex; align-items: center; gap: 8px; }
+.logoIcon { font-size: 22px; }
+.logoText {
+  font-size: 16px; font-weight: 700;
+  background: linear-gradient(135deg, var(--color-accent), #06b6d4);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.version {
+  font-size: 11px; font-weight: 500; font-family: var(--font-mono);
+  color: var(--color-text-dim); background: var(--color-accent-dim);
+  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border);
+}
+
+.searchBar {
+  display: flex; align-items: center; gap: 8px;
+  background: var(--color-surface); border: 1px solid var(--color-border);
+  border-radius: 10px; padding: 0 12px; height: 36px;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.searchBar:focus-within {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-glow);
+}
+.searchIcon { font-size: 14px; flex-shrink: 0; }
+.searchInput {
+  flex: 1; background: none; border: none; outline: none;
+  color: var(--color-text); font-size: 13px; font-family: var(--font-sans);
+}
+.searchInput::placeholder { color: var(--color-text-dim); }
+.kbd {
+  font-size: 10px; font-family: var(--font-mono); color: var(--color-text-dim);
+  background: var(--color-bg); border: 1px solid var(--color-border);
+  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
+}
+
+.iconBtn {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px;
+  background: var(--color-surface); color: var(--color-text);
+  cursor: pointer; font-size: 16px; transition: all 150ms;
+}
+.iconBtn:hover { background: var(--color-bg-hover); border-color: var(--color-border-hover); }
+.primaryBtn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px; font-size: 13px; font-weight: 600;
+  border: 1px solid var(--color-accent); border-radius: 6px;
+  background: var(--color-accent); color: #000; cursor: pointer;
+  font-family: var(--font-sans); transition: all 150ms;
+}
+.primaryBtn:hover { background: var(--color-accent-hover); }
+
+@media (max-width: 768px) {
+  .center { display: none; }
+}

package/web/src/components/layout/Sidebar.jsx

@@ -0,0 +1,41 @@
+/**
+ * @file web/src/components/layout/Sidebar.jsx
+ * @description Collapsible sidebar navigation with Dashboard / Settings / Analytics links + theme toggle.
+ */
+import styles from './Sidebar.module.css'
+
+const NAV_ITEMS = [
+  { id: 'dashboard', icon: '▤', label: 'Dashboard' },
+  { id: 'settings', icon: '⚙', label: 'Settings' },
+  { id: 'analytics', icon: '▌▌', label: 'Analytics' },
+]
+
+export default function Sidebar({ currentView, onNavigate, onToggleTheme }) {
+  return (
+    <aside className={styles.sidebar}>
+      <div className={styles.logo}>
+        <span className={styles.logoIcon}>⚡</span>
+        <span className={styles.logoText}>FCM</span>
+      </div>
+      <nav className={styles.nav}>
+        {NAV_ITEMS.map(({ id, icon, label }) => (
+          <button
+            key={id}
+            className={`${styles.navItem} ${currentView === id ? styles.active : ''}`}
+            onClick={() => onNavigate(id)}
+            title={label}
+          >
+            <span className={styles.navIcon}>{icon}</span>
+            <span className={styles.navLabel}>{label}</span>
+          </button>
+        ))}
+      </nav>
+      <div className={styles.bottom}>
+        <button className={styles.navItem} onClick={onToggleTheme} title="Toggle Theme">
+          <span className={styles.navIcon}>☽</span>
+          <span className={styles.navLabel}>Theme</span>
+        </button>
+      </div>
+    </aside>
+  )
+}

package/web/src/components/layout/Sidebar.module.css

@@ -0,0 +1,76 @@
+.sidebar {
+  position: fixed;
+  left: 0; top: 0; bottom: 0;
+  width: 64px;
+  z-index: 200;
+  background: var(--color-bg-elevated);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+}
+.sidebar:hover { width: 200px; }
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 18px;
+  margin-bottom: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.logoIcon { font-size: 24px; flex-shrink: 0; }
+.logoText {
+  font-size: 16px;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--color-accent), #06b6d4);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.sidebar:hover .logoText { opacity: 1; }
+
+.nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.bottom { display: flex; flex-direction: column; gap: 4px; }
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.navItem:hover {
+  color: var(--color-text);
+  background: var(--color-bg-hover);
+}
+.navIcon {
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 16px;
+}
+.navLabel {
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.sidebar:hover .navLabel { opacity: 1; }
+.active {
+  color: var(--color-accent) !important;
+  background: var(--color-accent-dim) !important;
+  border-right: 3px solid var(--color-accent);
+}

package/web/src/components/settings/SettingsView.jsx

@@ -0,0 +1,264 @@
+/**
+ * @file web/src/components/settings/SettingsView.jsx
+ * @description Full settings page for managing API keys and provider configurations.
+ * 📖 Fetches config from /api/config, renders expandable provider cards with
+ * key display (masked/revealed), save/delete/toggle actions, and search filter.
+ * @functions SettingsView → main settings page component
+ */
+import { useState, useEffect, useCallback } from 'react'
+import styles from './SettingsView.module.css'
+import { maskKey } from '../../utils/format.js'
+
+export default function SettingsView({ onToast }) {
+  const [config, setConfig] = useState(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [expandedCards, setExpandedCards] = useState(new Set())
+  const [revealedKeys, setRevealedKeys] = useState(new Set())
+  const [keyInputs, setKeyInputs] = useState({})
+
+  const loadConfig = useCallback(async () => {
+    try {
+      const resp = await fetch('/api/config')
+      const data = await resp.json()
+      setConfig(data)
+    } catch {
+      onToast?.('Failed to load settings', 'error')
+    }
+  }, [onToast])
+
+  useEffect(() => { loadConfig() }, [loadConfig])
+
+  const toggleCard = (key) => {
+    setExpandedCards((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }
+
+  const expandAll = () => {
+    if (!config) return
+    setExpandedCards(new Set(Object.keys(config.providers)))
+  }
+
+  const collapseAll = () => setExpandedCards(new Set())
+
+  const toggleRevealKey = async (key) => {
+    if (revealedKeys.has(key)) {
+      setRevealedKeys((prev) => { const n = new Set(prev); n.delete(key); return n })
+      return
+    }
+    try {
+      const resp = await fetch(`/api/key/${key}`)
+      const data = await resp.json()
+      if (data.key) {
+        setRevealedKeys((prev) => new Set(prev).add(key))
+      }
+    } catch {
+      onToast?.('Failed to reveal key', 'error')
+    }
+  }
+
+  const copyKey = async (key) => {
+    try {
+      const resp = await fetch(`/api/key/${key}`)
+      const data = await resp.json()
+      if (data.key) {
+        await navigator.clipboard.writeText(data.key)
+        onToast?.('API key copied to clipboard', 'success')
+      } else {
+        onToast?.('No key to copy', 'warning')
+      }
+    } catch {
+      onToast?.('Failed to copy key', 'error')
+    }
+  }
+
+  const saveKey = async (key) => {
+    const value = keyInputs[key]?.trim()
+    if (!value) {
+      onToast?.('Please enter an API key', 'warning')
+      return
+    }
+    try {
+      const resp = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeys: { [key]: value } }),
+      })
+      const result = await resp.json()
+      if (result.success) {
+        onToast?.(`API key for ${key} saved successfully!`, 'success')
+        setKeyInputs((prev) => ({ ...prev, [key]: '' }))
+        setRevealedKeys((prev) => { const n = new Set(prev); n.delete(key); return n })
+        await loadConfig()
+        setExpandedCards((prev) => new Set(prev).add(key))
+      } else {
+        onToast?.(result.error || 'Failed to save', 'error')
+      }
+    } catch {
+      onToast?.('Network error while saving', 'error')
+    }
+  }
+
+  const deleteKey = async (key) => {
+    if (!confirm(`Are you sure you want to delete the API key for "${key}"?`)) return
+    try {
+      const resp = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKeys: { [key]: '' } }),
+      })
+      const result = await resp.json()
+      if (result.success) {
+        onToast?.(`API key for ${key} deleted`, 'info')
+        setRevealedKeys((prev) => { const n = new Set(prev); n.delete(key); return n })
+        await loadConfig()
+      } else {
+        onToast?.(result.error || 'Failed to delete', 'error')
+      }
+    } catch {
+      onToast?.('Network error while deleting', 'error')
+    }
+  }
+
+  const toggleProvider = async (key, enabled) => {
+    try {
+      const resp = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providers: { [key]: { enabled } } }),
+      })
+      const result = await resp.json()
+      if (result.success) {
+        onToast?.(`${key} ${enabled ? 'enabled' : 'disabled'}`, 'success')
+      } else {
+        onToast?.(result.error || 'Failed to toggle', 'error')
+      }
+    } catch {
+      onToast?.('Network error', 'error')
+    }
+  }
+
+  if (!config) {
+    return (
+      <div className={styles.page}>
+        <div className={styles.loading}>Loading settings...</div>
+      </div>
+    )
+  }
+
+  const entries = Object.entries(config.providers)
+    .filter(([, p]) => {
+      if (!searchQuery) return true
+      const q = searchQuery.toLowerCase()
+      return p.name.toLowerCase().includes(q)
+    })
+    .sort((a, b) => a[1].name.localeCompare(b[1].name))
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.pageHeader}>
+        <h1 className={styles.pageTitle}>⚙️ Provider Settings</h1>
+        <p className={styles.pageSubtitle}>
+          Manage your API keys and provider configurations. Keys are stored locally in{' '}
+          <code>~/.free-coding-models.json</code>
+        </p>
+      </div>
+
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarSearch}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search providers..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            autoComplete="off"
+          />
+        </div>
+        <div className={styles.toolbarActions}>
+          <button className={styles.toolbarBtn} onClick={expandAll}>Expand All</button>
+          <button className={styles.toolbarBtn} onClick={collapseAll}>Collapse All</button>
+        </div>
+      </div>
+
+      <div className={styles.providers}>
+        {entries.map(([key, p]) => {
+          const isExpanded = expandedCards.has(key)
+          const isRevealed = revealedKeys.has(key)
+
+          return (
+            <div key={key} className={`${styles.card} ${isExpanded ? styles.cardExpanded : ''}`}>
+              <div className={styles.cardHeader} onClick={() => toggleCard(key)}>
+                <div className={styles.cardIcon}>🔌</div>
+                <div className={styles.cardInfo}>
+                  <div className={styles.cardName}>{p.name}</div>
+                  <div className={styles.cardMeta}>{p.modelCount} models · {key}</div>
+                </div>
+                <span className={`${styles.cardStatus} ${p.hasKey ? styles.statusConfigured : styles.statusMissing}`}>
+                  {p.hasKey ? '✅ Active' : '🔑 No Key'}
+                </span>
+                <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`}>▼</span>
+              </div>
+
+              <div className={styles.cardBody}>
+                <div className={styles.cardContent}>
+                  {p.hasKey && (
+                    <div className={styles.keyGroup}>
+                      <label className={styles.keyLabel}>Current API Key</label>
+                      <div className={styles.keyDisplay}>
+                        <span className={styles.keyDisplayValue}>
+                          {isRevealed ? (p.maskedKey || '••••••••') : maskKey(p.maskedKey || '')}
+                        </span>
+                        <div className={styles.keyDisplayActions}>
+                          <button className={styles.actionBtn} onClick={() => toggleRevealKey(key)} title={isRevealed ? 'Hide' : 'Reveal'}>
+                            {isRevealed ? '🙈' : '👁️'}
+                          </button>
+                          <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">📋</button>
+                          <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">🗑️</button>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className={styles.keyGroup}>
+                    <label className={styles.keyLabel}>{p.hasKey ? 'Update API Key' : 'Add API Key'}</label>
+                    <div className={styles.keyInputRow}>
+                      <input
+                        type="password"
+                        className={styles.keyInput}
+                        placeholder="Enter your API key..."
+                        value={keyInputs[key] || ''}
+                        onChange={(e) => setKeyInputs((prev) => ({ ...prev, [key]: e.target.value }))}
+                        autoComplete="off"
+                      />
+                      <button className={styles.saveBtn} onClick={() => saveKey(key)}>
+                        {p.hasKey ? 'Update' : 'Save'}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className={styles.enabledRow}>
+                    <span className={styles.enabledLabel}>Provider Enabled</span>
+                    <label className={styles.toggleSwitch}>
+                      <input
+                        type="checkbox"
+                        defaultChecked={p.enabled !== false}
+                        onChange={(e) => toggleProvider(key, e.target.checked)}
+                      />
+                      <span className={styles.toggleSlider} />
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}