free-coding-models 0.5.0 → 0.5.4

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

@@ -1,40 +0,0 @@
-/**
- * @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

@@ -1,28 +0,0 @@
-.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/Sidebar.jsx

@@ -1,42 +0,0 @@
-/**
- * @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' },
-  { id: 'map', icon: '🌍', label: 'Map' },
-]
-
-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

@@ -1,76 +0,0 @@
-.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/map/MapView.jsx

@@ -1,17 +0,0 @@
-/**
- * @file web/src/components/map/MapView.jsx
- * @description WIP - Live map view showing users location and activity.
- * @exports MapView → placeholder component for user map visualization
- */
-import styles from './MapView.module.css'
-
-export default function MapView() {
-  return (
-    <div className={styles.container}>
-      <div className={styles.wip}>
-        <h1>WIP : map users live</h1>
-        <p>Coming soon...</p>
-      </div>
-    </div>
-  )
-}

package/web/src/components/map/MapView.module.css

@@ -1,25 +0,0 @@
-.container {
-  padding: 2rem;
-  width: 100%;
-}
-
-.wip {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  text-align: center;
-}
-
-.wip h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 1rem;
-}
-
-.wip p {
-  font-size: 1.125rem;
-  color: var(--text-secondary);
-}