free-coding-models 0.5.86 → 0.5.87

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

@@ -1,260 +0,0 @@
-.panel {
-  position: fixed;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: min(420px, 90vw);
-  z-index: 300;
-  background: var(--color-bg-elevated);
-  border-left: 1px solid var(--color-border);
-  box-shadow: var(--shadow-lg);
-  transform: translateX(100%);
-  transition: transform var(--transition-medium);
-  overflow-y: auto;
-}
-
-/* 📖 Slide-in when model is selected (parent passes a non-null model) */
-.panelOpen {
-  transform: translateX(0);
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 0;
-}
-
-.closeBtn {
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  font-size: 22px;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.closeBtn:hover {
-  color: var(--color-text);
-}
-
-.body {
-  padding: 24px;
-}
-
-.stat {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.statLabel {
-  font-size: 12px;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-}
-
-.statValue {
-  font-family: var(--font-mono);
-  font-weight: 600;
-}
-
-.ping {
-  font-family: var(--font-mono);
-  font-weight: 600;
-}
-
-.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; }
-
-.chart {
-  margin: 20px 0;
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.chartTitle {
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  margin-bottom: 12px;
-}
-
-.chartEmpty {
-  color: var(--color-text-dim);
-  text-align: center;
-  padding: 20px;
-}
-
-/* ─── M1: favorites + per-row benchmark actions ─── */
-.actions {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin: 16px 0;
-  padding: 12px;
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-}
-
-.favBlock {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.favBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--color-bg-card);
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 150ms;
-  text-align: left;
-}
-.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);
-}
-.favBtnActive:hover {
-  background: rgba(255, 215, 0, 0.16);
-}
-: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); }
-
-.reorderRow {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 4px;
-}
-.reorderBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 4px 8px;
-  font-size: 10px;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  background: var(--color-bg-card);
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 120ms;
-}
-.reorderBtn:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  border-color: var(--color-text-muted);
-}
-.reorderBtn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.rankBadge {
-  margin-left: auto;
-  font-size: 10px;
-  font-family: var(--font-mono);
-  font-weight: 700;
-  color: #ffd700;
-  background: rgba(255, 215, 0, 0.12);
-  border: 1px solid rgba(255, 215, 0, 0.3);
-  padding: 2px 6px;
-  border-radius: 999px;
-}
-:global([data-theme="light"]) .rankBadge {
-  color: #b08800;
-  background: rgba(176, 136, 0, 0.12);
-  border-color: rgba(176, 136, 0, 0.3);
-}
-
-.benchBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 12px;
-  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 {
-  background: rgba(180, 0, 255, 0.20);
-  border-color: rgba(180, 0, 255, 0.7);
-}
-
-.compatWarning {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 12px 0;
-  padding: 10px;
-  border: 1px solid rgba(255, 90, 122, 0.35);
-  border-radius: 8px;
-  background: rgba(255, 90, 122, 0.10);
-  color: #ff8da3;
-  font-size: 12px;
-  line-height: 1.35;
-}
-.compatWarning span { flex: 1; }
-.compatWarning button {
-  border: 1px solid rgba(255, 90, 122, 0.45);
-  border-radius: 6px;
-  background: var(--color-bg-card);
-  color: #ff8da3;
-  padding: 5px 8px;
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 800;
-}
-.compatWarning button:hover { background: rgba(255, 90, 122, 0.16); }
-: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 {
-  background: rgba(140, 0, 200, 0.12);
-}

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

@@ -1,361 +0,0 @@
-/**
- * @file web/src/components/dashboard/ExpandedDetailRow.jsx
- * @description Expandable 3-column detail row rendered below a model's table row.
- * 📖 Left column: key stats (tier, SWE, context, provider, status, avg ping, stability, verdict, uptime)
- *    with favorite toggle + launch button at the bottom.
- * 📖 Center column: mini chat playground — sends a user message to the model via SSE streaming
- *    and displays the response in real time.
- * 📖 Right column: AI latency benchmark — POSTs to /api/benchmark-stream, parses SSE events
- *    (start/token/done/error), and shows live metrics (latency, tokens, TPS), a progress bar,
- *    and the streaming generated text preview.
- * 📖 When the model has no API key configured, a banner is shown instead of the 3 columns.
- * @functions ExpandedDetailRow → main component
- */
-import { useState, useRef, useCallback } from 'react'
-import { IconPlayerPlayFilled, IconStar, IconStarFilled, IconLoader } from '@tabler/icons-react'
-import TierBadge from '../atoms/TierBadge.jsx'
-import VerdictBadge from '../atoms/VerdictBadge.jsx'
-import StatusDot from '../atoms/StatusDot.jsx'
-import StabilityCell from '../atoms/StabilityCell.jsx'
-import { formatAvg, pingClass } from '../../utils/format.js'
-import { sweClass } from '../../utils/ranks.js'
-import LaunchButton from '../launch/LaunchButton.jsx'
-import PlaygroundChat from '../playground/PlaygroundChat.jsx'
-import styles from './ExpandedDetailRow.module.css'
-
-/**
- * Single stat item with label + value, used in the info column grid.
- * @param {string} label - Uppercase stat label
- * @param {React.ReactNode} children - Stat value content
- */
-function StatItem({ label, children }) {
-  return (
-    <div className={styles.statItem}>
-      <span className={styles.statLabel}>{label}</span>
-      <span className={styles.statValue}>{children}</span>
-    </div>
-  )
-}
-
-/**
- * Expandable detail row with 3 columns: Info, Mini Playground, AI Latency.
- *
- * @param {Object} props
- * @param {Object} props.model - The model data object
- * @param {Object} props.favorites - Favorites controller (isFavorite, toggle)
- * @param {Function} [props.onBenchmark] - Benchmark callback
- * @param {Function} [props.onLaunch] - Launch callback
- * @param {Function} [props.onToast] - Toast notification callback
- * @param {string} [props.toolMode='opencode'] - Current tool mode
- * @param {Function} [props.onSetToolMode] - Set tool mode handler
- * @param {Function} [props.onCycleToolMode] - Cycle tool mode handler
- * @param {Function} [props.onOpenFallback] - Open fallback tool handler
- */
-export default function ExpandedDetailRow({
-  model,
-  favorites,
-  onBenchmark,
-  onLaunch,
-  onToast,
-  toolMode = 'opencode',
-  onSetToolMode,
-  onCycleToolMode,
-  onOpenFallback,
-}) {
-  // ─── AI Latency benchmark state ───
-  const [benchState, setBenchState] = useState('idle') // 'idle' | 'running' | 'done' | 'error'
-  const [benchMetrics, setBenchMetrics] = useState({ latency: null, tokens: null, tps: null })
-  const [benchText, setBenchText] = useState('')
-  const [benchProgress, setBenchProgress] = useState(0)
-  const benchAbort = useRef(null)
-
-  if (!model) return null
-
-  const isFav = favorites?.isFavorite(model) ?? false
-  const avgData = formatAvg(model.avg)
-  const avgCls = avgData.cls || pingClass(model.avg)
-
-  // ─── AI Latency: run benchmark ───
-  const handleBenchStart = useCallback(async () => {
-    if (benchState === 'running') return
-
-    setBenchState('running')
-    setBenchMetrics({ latency: null, tokens: null, tps: null })
-    setBenchText('')
-    setBenchProgress(0)
-
-    // Cancel any previous request
-    if (benchAbort.current) benchAbort.current.abort()
-    const controller = new AbortController()
-    benchAbort.current = controller
-
-    try {
-      const res = await fetch('/api/benchmark-stream', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId }),
-        signal: controller.signal,
-      })
-
-      if (!res.ok) {
-        const errText = await res.text().catch(() => `HTTP ${res.status}`)
-        setBenchState('error')
-        setBenchText(`Error: ${errText}`)
-        return
-      }
-
-      const reader = res.body.getReader()
-      const decoder = new TextDecoder()
-      let buffer = ''
-      let accumulatedText = ''
-
-      while (true) {
-        const { done, value } = await reader.read()
-        if (done) break
-
-        buffer += decoder.decode(value, { stream: true })
-        const lines = buffer.split('\n')
-        // Keep the last potentially incomplete line in the buffer
-        buffer = lines.pop() || ''
-
-        for (const line of lines) {
-          const trimmed = line.trim()
-          if (!trimmed) continue
-
-          if (trimmed.startsWith('event: ')) {
-            // Event type line — we use data lines for actual content
-            continue
-          }
-
-          if (trimmed.startsWith('data: ')) {
-            const payload = trimmed.slice(6).trim()
-
-            try {
-              const json = JSON.parse(payload)
-              const eventType = json.type || json.event
-
-              if (eventType === 'token' || json.token !== undefined) {
-                // Live token — update streaming text and metrics
-                if (json.text) {
-                  accumulatedText += json.text
-                  setBenchText(accumulatedText)
-                }
-                if (json.totalMs != null) {
-                  setBenchMetrics(prev => ({
-                    ...prev,
-                    latency: (json.totalMs / 1000).toFixed(2),
-                  }))
-                }
-                if (json.tokens != null) {
-                  setBenchMetrics(prev => ({ ...prev, tokens: json.tokens }))
-                  setBenchProgress(Math.min(100, Math.round((json.tokens / 140) * 100)))
-                }
-                if (json.tps != null) {
-                  setBenchMetrics(prev => ({ ...prev, tps: json.tps.toFixed(1) }))
-                }
-              } else if (eventType === 'done') {
-                // Benchmark complete
-                if (json.totalMs != null) {
-                  setBenchMetrics(prev => ({
-                    ...prev,
-                    latency: (json.totalMs / 1000).toFixed(2),
-                  }))
-                }
-                if (json.outputTokens != null) {
-                  setBenchMetrics(prev => ({ ...prev, tokens: json.outputTokens }))
-                }
-                if (json.tokensPerSecond != null) {
-                  setBenchMetrics(prev => ({
-                    ...prev,
-                    tps: json.tokensPerSecond.toFixed(1),
-                  }))
-                }
-                setBenchProgress(100)
-                setBenchState('done')
-              } else if (eventType === 'error') {
-                setBenchState('error')
-                setBenchText(json.message || json.error || 'Unknown error')
-              }
-            } catch {
-              // Non-JSON payload — ignore
-            }
-          }
-        }
-      }
-    } catch (err) {
-      if (err.name !== 'AbortError') {
-        setBenchState('error')
-        setBenchText(`Error: ${err.message}`)
-      }
-    } finally {
-      if (benchState === 'running') {
-        setBenchState('done')
-      }
-      benchAbort.current = null
-    }
-  }, [benchState, model.providerKey, model.modelId])
-
-  // ─── No API key — show banner ───
-  if (!model.hasApiKey) {
-    return (
-      <div className={styles.row}>
-        <div className={styles.noKeyBanner}>
-          <span className={styles.noKeyIcon}>🔒</span>
-          <span>No API key configured for {model.origin}. Open Settings (P) to add one.</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={styles.row}>
-      <div className={styles.grid}>
-
-        {/* ═══════ Column 1: Info ═══════ */}
-        <div className={styles.col}>
-          <div className={styles.colTitle}>📊 Model Info</div>
-          <div className={styles.statGrid}>
-            <StatItem label="Tier">
-              <TierBadge tier={model.tier} />
-            </StatItem>
-            <StatItem label="SWE-bench">
-              <span className={styles[sweClass(model.sweScore)]}>
-                {model.sweScore || '—'}
-              </span>
-            </StatItem>
-            <StatItem label="Context">
-              {model.ctx || '—'}
-            </StatItem>
-            <StatItem label="Provider">
-              {model.origin}
-            </StatItem>
-            <StatItem label="Status">
-              <StatusDot status={model.status} />
-              <span style={{ fontSize: 11 }}>{model.status}</span>
-            </StatItem>
-            <StatItem label="Avg Ping">
-              <span className={styles[avgCls]}>
-                {avgData.text}
-              </span>
-            </StatItem>
-            <StatItem label="Stability">
-              <StabilityCell score={model.stability} />
-            </StatItem>
-            <StatItem label="Verdict">
-              <VerdictBadge verdict={model.verdict} httpCode={model.httpCode} />
-            </StatItem>
-            <StatItem label="Uptime">
-              {model.uptime > 0 ? `${model.uptime}%` : '—'}
-            </StatItem>
-          </div>
-          <div className={styles.infoActions}>
-            {favorites && (
-              <button
-                className={`${styles.favBtn} ${isFav ? styles.favBtnActive : ''}`}
-                onClick={() => favorites.toggle(model)}
-                title={isFav ? `Unfavorite ${model.label}` : `Favorite ${model.label}`}
-              >
-                {isFav
-                  ? <IconStarFilled size={13} stroke={1.5} />
-                  : <IconStar size={13} stroke={1.5} />
-                }
-                <span>{isFav ? 'Favorited' : 'Favorite'}</span>
-              </button>
-            )}
-            {onLaunch && (
-              <LaunchButton
-                model={model}
-                toolMode={toolMode}
-                onLaunch={onLaunch}
-                variant="default"
-              />
-            )}
-          </div>
-        </div>
-
-        {/* ═══════ Column 2: Mini Playground (shared PlaygroundChat core) ═══════ */}
-        <div className={styles.col}>
-          <div className={styles.playgroundHeader}>
-            💬 Mini Playground — {model.label}
-          </div>
-          <div className={styles.playgroundWrap}>
-            <PlaygroundChat
-              model={`${model.providerKey}/${model.modelId}`}
-              variant="mini"
-              disabled={!model.hasApiKey}
-              placeholder="Type a message…"
-              emptyTitle={`Test ${model.label}`}
-              emptyHint="Send a message to test this model. Responses stream in real time with latency + TPS."
-            />
-          </div>
-        </div>
-
-        {/* ═══════ Column 3: AI Latency ═══════ */}
-        <div className={styles.col}>
-          <button
-            className={styles.benchBtn}
-            onClick={handleBenchStart}
-            disabled={benchState === 'running'}
-            title={benchState === 'running' ? 'Running benchmark…' : 'Test AI Latency'}
-          >
-            {benchState === 'running' ? (
-              <IconLoader size={13} stroke={1.8} className={styles.spinning} />
-            ) : (
-              <IconPlayerPlayFilled size={13} stroke={1.8} />
-            )}
-            <span>{benchState === 'running' ? 'Running…' : 'Test AI Latency'}</span>
-          </button>
-
-          {/* Live metrics grid */}
-          <div className={styles.metricsGrid}>
-            <div className={styles.metricCard}>
-              <span className={styles.metricLabel}>Latency</span>
-              <span className={styles.metricValue}>
-                {benchMetrics.latency != null ? `${benchMetrics.latency}s` : '—'}
-              </span>
-            </div>
-            <div className={styles.metricCard}>
-              <span className={styles.metricLabel}>Tokens</span>
-              <span className={styles.metricValue}>
-                {benchMetrics.tokens != null ? benchMetrics.tokens : '—'}
-              </span>
-            </div>
-            <div className={styles.metricCard}>
-              <span className={styles.metricLabel}>TPS</span>
-              <span className={styles.metricValue}>
-                {benchMetrics.tps != null ? benchMetrics.tps : '—'}
-              </span>
-            </div>
-            <div className={styles.metricCard}>
-              <span className={styles.metricLabel}>Status</span>
-              <span className={styles.metricValue}>
-                {benchState === 'idle' && '⏳'}
-                {benchState === 'running' && '⚡'}
-                {benchState === 'done' && '✅'}
-                {benchState === 'error' && '❌'}
-              </span>
-            </div>
-          </div>
-
-          {/* Progress bar */}
-          <div className={styles.progressBar}>
-            <div
-              className={styles.progressFill}
-              style={{ width: `${benchProgress}%` }}
-            />
-          </div>
-
-          {/* Streaming text preview */}
-          <div className={styles.streamText}>
-            {benchText || (
-              <span className={styles.responsePlaceholder}>
-                Generated text will appear here…
-              </span>
-            )}
-          </div>
-        </div>
-
-      </div>
-    </div>
-  )
-}