free-coding-models 0.5.86 → 0.5.87

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

@@ -1,356 +0,0 @@
-/**
- * @file web/src/components/dashboard/ExpandedDetailRow.module.css
- * @description CSS module for the 3-column expandable detail row shown beneath a table row.
- * 📖 Columns: Info (left), Mini Playground (center), AI Latency Test (right).
- * 📖 Supports dark/light themes via CSS variables and [data-theme="light"] overrides.
- * 📖 Responsive: collapses to single column on screens < 900px.
- */
-
-/* ─── Root container ─── */
-.row {
-  grid-column: 1 / -1;
-  padding: 16px 20px;
-  background: var(--color-bg-elevated);
-  border-bottom: 2px solid var(--color-accent);
-  animation: slideDown 180ms ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 600px;
-  }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: 280px 1fr 300px;
-  gap: 20px;
-  min-height: 220px;
-}
-
-/* ─── Column shared ─── */
-.col {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.colTitle {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  color: var(--color-text-muted);
-  margin-bottom: 2px;
-}
-
-/* ─── Column 1: Info ─── */
-.statGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px 12px;
-}
-
-.statItem {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.statLabel {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-dim);
-}
-
-.statValue {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.infoActions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: auto;
-  padding-top: 8px;
-}
-
-.favBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 10px;
-  background: var(--color-bg-card);
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 150ms;
-}
-.favBtn:hover {
-  border-color: #ffd700;
-  color: #ffd700;
-  background: rgba(255, 215, 0, 0.08);
-}
-.favBtnActive {
-  border-color: #ffd700;
-  color: #ffd700;
-  background: rgba(255, 215, 0, 0.12);
-}
-:global([data-theme="light"]) .favBtn { color: #555; }
-:global([data-theme="light"]) .favBtn:hover { color: #b08800; border-color: #b08800; background: rgba(176, 136, 0, 0.06); }
-:global([data-theme="light"]) .favBtnActive { color: #b08800; border-color: #b08800; background: rgba(176, 136, 0, 0.10); }
-
-/* ─── Column 2: Mini Playground ─── */
-.playgroundHeader {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--color-text);
-  margin-bottom: 2px;
-}
-
-/* 📖 Wrapper that lets the shared PlaygroundChat fill the column height so its
-   transcript scrolls and the input stays pinned to the bottom. */
-.playgroundWrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 140px;
-}
-
-.inputRow {
-  display: flex;
-  gap: 6px;
-}
-
-.inputField {
-  flex: 1;
-  padding: 8px 10px;
-  font-size: 12px;
-  font-family: var(--font-mono);
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  outline: none;
-  transition: border-color 150ms;
-}
-.inputField:focus {
-  border-color: var(--color-accent);
-}
-.inputField::placeholder {
-  color: var(--color-text-dim);
-}
-.inputField:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.sendBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px 12px;
-  font-size: 12px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  background: var(--color-accent);
-  color: var(--color-bg);
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 150ms;
-  white-space: nowrap;
-}
-.sendBtn:hover:not(:disabled) {
-  opacity: 0.9;
-}
-.sendBtn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.responseArea {
-  flex: 1;
-  min-height: 60px;
-  max-height: 160px;
-  overflow-y: auto;
-  padding: 10px 12px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--color-text);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.responsePlaceholder {
-  color: var(--color-text-dim);
-  font-style: italic;
-}
-
-/* ─── Column 3: AI Latency ─── */
-.benchBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 14px;
-  font-size: 12px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  background: rgba(180, 0, 255, 0.12);
-  color: #b400ff;
-  border: 1px solid rgba(180, 0, 255, 0.4);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 150ms;
-}
-.benchBtn:hover:not(:disabled) {
-  background: rgba(180, 0, 255, 0.20);
-  border-color: rgba(180, 0, 255, 0.7);
-}
-.benchBtn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-:global([data-theme="light"]) .benchBtn {
-  background: rgba(140, 0, 200, 0.06);
-  color: #6a00a0;
-  border-color: rgba(140, 0, 200, 0.3);
-}
-:global([data-theme="light"]) .benchBtn:hover:not(:disabled) {
-  background: rgba(140, 0, 200, 0.12);
-}
-
-.metricsGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
-
-.metricCard {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px 10px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-}
-
-.metricLabel {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-dim);
-}
-
-.metricValue {
-  font-family: var(--font-mono);
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-accent);
-}
-
-.streamText {
-  min-height: 40px;
-  max-height: 80px;
-  overflow-y: auto;
-  padding: 8px 10px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.4;
-  color: var(--color-text);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.progressBar {
-  width: 100%;
-  height: 4px;
-  background: var(--color-bg-card);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progressFill {
-  height: 100%;
-  background: var(--color-accent);
-  border-radius: 2px;
-  transition: width 200ms ease-out;
-}
-
-/* ─── SWE score classes ─── */
-.sweHigh { color: #ffd700; font-weight: 700; }
-.sweMid  { color: #3ddc84; font-weight: 600; }
-.sweLow  { color: var(--color-text-dim); }
-:global([data-theme="light"]) .sweHigh { color: #b08800; }
-:global([data-theme="light"]) .sweMid  { color: #1a8f4e; }
-
-/* ─── Ping classes ─── */
-.pingFast   { color: #00ff88; }
-.pingMedium { color: #ffaa00; }
-.pingSlow   { color: #ff4444; }
-.pingNone   { color: var(--color-text-dim); }
-:global([data-theme="light"]) .pingFast   { color: #008f4d; }
-:global([data-theme="light"]) .pingMedium { color: #b86b00; }
-:global([data-theme="light"]) .pingSlow   { color: #c8143a; }
-
-/* ─── No API key banner ─── */
-.noKeyBanner {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 32px 20px;
-  color: var(--color-text-dim);
-  font-size: 13px;
-  font-weight: 600;
-  text-align: center;
-}
-
-.noKeyIcon {
-  font-size: 20px;
-  opacity: 0.5;
-}
-
-/* ─── Spinning animation ─── */
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
-/* ─── Responsive: single column below 900px ─── */
-@media (max-width: 900px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}

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

@@ -1,84 +0,0 @@
-/**
- * @file web/src/components/dashboard/ExportModal.jsx
- * @description Modal dialog for exporting model data as JSON, CSV, or clipboard text.
- * 📖 Triggered by the export button in the header. Accepts `models` (filtered list),
- * `onClose` callback, and `onToast` for feedback notifications.
- * @functions ExportModal → renders the modal with three export option buttons
- */
-import { IconUpload, IconBraces, IconFileSpreadsheet, IconClipboard } from '@tabler/icons-react'
-import { downloadFile } from '../../utils/download.js'
-import styles from './ExportModal.module.css'
-
-export default function ExportModal({ models, onClose, onToast }) {
-  if (!models) return null
-
-  const handleJson = () => {
-    const data = JSON.stringify(models, null, 2)
-    downloadFile(data, 'free-coding-models-export.json', 'application/json')
-    onToast?.('Exported as JSON', 'success')
-    onClose()
-  }
-
-  const handleCsv = () => {
-    const headers = ['Rank', 'Tier', 'Model', 'Provider', 'SWE%', 'Context', 'LatestPing', 'AvgPing', 'Stability', 'Verdict', 'Uptime']
-    const rows = models.map((m, i) =>
-      [i + 1, m.tier, m.label, m.origin, m.sweScore || '', m.ctx || '', m.latestPing || '', m.avg === Infinity ? '' : m.avg, m.stability || '', m.verdict || '', m.uptime || ''].join(',')
-    )
-    const csv = [headers.join(','), ...rows].join('\n')
-    downloadFile(csv, 'free-coding-models-export.csv', 'text/csv')
-    onToast?.('Exported as CSV', 'success')
-    onClose()
-  }
-
-  const handleClipboard = async () => {
-    const online = models.filter(m => m.status === 'up')
-    const text = `free-coding-models Dashboard Export\n` +
-      `Total: ${models.length} | Online: ${online.length}\n\n` +
-      online.slice(0, 20).map((m, i) =>
-        `${i + 1}. ${m.label} [${m.tier}] — ${m.avg !== Infinity ? m.avg + 'ms' : 'N/A'} (${m.origin})`
-      ).join('\n')
-    await navigator.clipboard.writeText(text)
-    onToast?.('Copied to clipboard', 'success')
-    onClose()
-  }
-
-  return (
-    <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
-      <div className={styles.modal}>
-        <div className={styles.modalHeader}>
-          <h2 className={styles.modalTitle}>
-            <IconUpload size={20} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
-            Export Data
-          </h2>
-          <button className={styles.modalClose} onClick={onClose}>&times;</button>
-        </div>
-        <div className={styles.modalBody}>
-          <div className={styles.options}>
-            <button className={styles.option} onClick={handleJson}>
-              <span className={styles.optionIcon}><IconBraces size={20} stroke={1.5} /></span>
-              <div>
-                <span className={styles.optionLabel}>Export as JSON</span>
-                <span className={styles.optionDesc}>Full model data with all metrics</span>
-              </div>
-            </button>
-            <button className={styles.option} onClick={handleCsv}>
-              <span className={styles.optionIcon}><IconFileSpreadsheet size={20} stroke={1.5} /></span>
-              <div>
-                <span className={styles.optionLabel}>Export as CSV</span>
-                <span className={styles.optionDesc}>Spreadsheet-compatible format</span>
-              </div>
-            </button>
-            <button className={styles.option} onClick={handleClipboard}>
-              <span className={styles.optionIcon}><IconClipboard size={20} stroke={1.5} /></span>
-              <div>
-                <span className={styles.optionLabel}>Copy to Clipboard</span>
-                <span className={styles.optionDesc}>Copy model summary as text</span>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-

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

@@ -1,99 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 200ms ease-out;
-}
-
-.overlay[hidden] { display: none; }
-
-@keyframes fadeIn {
- from { opacity: 0; } to { opacity: 1; } }
-
-.modal {
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  width: min(500px, 90vw);
-  max-height: 80vh;
-  overflow-y: auto;
-  box-shadow: var(--shadow-lg);
-  animation: modalSlideIn 300ms var(--ease-out);
-}
-@keyframes modalSlideIn {
-  from { transform: translateY(20px) scale(0.96); opacity: 0; }
-  to { transform: translateY(0) scale(1); opacity: 1; }
-}
-
-.modalHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--color-border);
-}
-.modalTitle {
-  font-size: 18px;
-  font-weight: 700;
-  margin: 0;
-}
-.modalClose {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 24px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-.modalClose:hover {
-  color: var(--color-text);
-}
-.modalBody {
-  padding: 24px;
-}
-.options {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.option {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 18px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-align: left;
-  font-family: var(--font-sans);
-  color: var(--color-text);
-  width: 100%;
-}
-.option:hover {
-  border-color: var(--color-accent);
-  background: var(--color-accent-dim);
-}
-.optionIcon {
-  font-size: 24px;
-  flex-shrink: 0;
-}
-.optionText {}
-.optionLabel {
-  display: block;
-  font-weight: 600;
-  font-size: 14px;
-}
-.optionDesc {
-  display: block;
-  font-size: 11px;
-  color: var(--color-text-muted);
-  margin-top: 2px;
-}