free-coding-models 0.5.86 → 0.5.87

package/web/src/components/changelog/ChangelogView.jsx

@@ -1,135 +0,0 @@
-/**
- * @file web/src/components/changelog/ChangelogView.jsx
- * @description Changelog modal — M2 parity with the TUI's Changelog overlay (N key / Settings link).
- * 📖 Two-phase UI: index of versions on the left, details on the right. Same
- * 📖 content as the TUI's renderChangelog (which uses src/core/changelog-loader.js
- * 📖 — we hit the same data through `/api/changelog`).
- *
- * @functions
- *   → ChangelogView → main modal component
- */
-import { useState } from 'react'
-import { IconArrowLeft, IconX, IconCalendar } from '@tabler/icons-react'
-import { useChangelog } from '../../hooks/useChangelog.js'
-import styles from './ChangelogView.module.css'
-
-// 📖 Section order matches the changelog files (`### Added` / `### Fixed` /
-// 📖 `### Changed` / `### Updated`). The TUI uses the same order in
-// 📖 formatChangelogForDisplay.
-const SECTION_LABELS = [
-  { key: 'added', label: '✨ Added', icon: '✨' },
-  { key: 'fixed', label: '🐛 Fixed', icon: '🐛' },
-  { key: 'changed', label: '🔄 Changed', icon: '🔄' },
-  { key: 'updated', label: '📝 Updated', icon: '📝' },
-]
-
-export default function ChangelogView({ onClose, defaultVersion = null }) {
-  const { sortedVersions, getVersion, loading, error } = useChangelog()
-  // 📖 Two-phase navigation: 'index' (version list) or 'details' (one version).
-  // 📖 `selectedVersion` is null on the index and a version string on details.
-  const [phase, setPhase] = useState(defaultVersion ? 'details' : 'index')
-  const [selectedVersion, setSelectedVersion] = useState(defaultVersion)
-
-  const openDetails = (version) => {
-    setSelectedVersion(version)
-    setPhase('details')
-  }
-  const backToIndex = () => {
-    setSelectedVersion(null)
-    setPhase('index')
-  }
-
-  const details = selectedVersion ? getVersion(selectedVersion) : null
-
-  return (
-    <div className={styles.backdrop} onClick={onClose}>
-      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.header}>
-          <div className={styles.titleRow}>
-            <h2 className={styles.title}>
-              {phase === 'index' ? '📋 Changelog' : `📋 v${selectedVersion}`}
-            </h2>
-            {phase === 'details' && (
-              <button className={styles.backBtn} onClick={backToIndex} title="Back to index (TUI: B)">
-                <IconArrowLeft size={14} stroke={1.5} /> Index
-              </button>
-            )}
-            <button className={styles.closeBtn} onClick={onClose} aria-label="Close changelog">
-              <IconX size={18} stroke={1.5} />
-            </button>
-          </div>
-        </div>
-
-        <div className={styles.body}>
-          {loading && <div className={styles.empty}>Loading changelog…</div>}
-          {error && !loading && <div className={styles.empty}>Failed to load changelog: {error}</div>}
-
-          {!loading && !error && phase === 'index' && (
-            <div className={styles.indexWrap}>
-              <p className={styles.indexHint}>
-                {sortedVersions.length} versions. Click any to read the release notes.
-              </p>
-              <ul className={styles.versionList}>
-                {sortedVersions.map((version) => {
-                  const changes = getVersion(version)
-                  const summary = []
-                  if (changes?.added?.length) summary.push(`${changes.added.length} added`)
-                  if (changes?.fixed?.length) summary.push(`${changes.fixed.length} fixed`)
-                  if (changes?.changed?.length) summary.push(`${changes.changed.length} changed`)
-                  return (
-                    <li key={version}>
-                      <button
-                        className={styles.versionBtn}
-                        onClick={() => openDetails(version)}
-                      >
-                        <span className={styles.versionLabel}>v{version}</span>
-                        <span className={styles.versionSummary}>
-                          {summary.length > 0 ? summary.join(' · ') : '—'}
-                        </span>
-                      </button>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          )}
-
-          {!loading && !error && phase === 'details' && details && (
-            <div className={styles.details}>
-              {SECTION_LABELS.map(({ key, label }) => {
-                const items = details[key]
-                if (!items || items.length === 0) return null
-                return (
-                  <section key={key} className={styles.section}>
-                    <h3 className={styles.sectionTitle}>{label}</h3>
-                    <ul className={styles.itemList}>
-                      {items.map((item, idx) => (
-                        <li key={idx} className={styles.item}>{formatItem(item)}</li>
-                      ))}
-                    </ul>
-                  </section>
-                )
-              })}
-              {SECTION_LABELS.every(({ key }) => !details[key]?.length) && (
-                <div className={styles.empty}>No release notes for v{selectedVersion}.</div>
-              )}
-            </div>
-          )}
-
-          {!loading && !error && phase === 'details' && !details && (
-            <div className={styles.empty}>No notes for v{selectedVersion}.</div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// 📖 Strip **bold** and `code` markdown markers for the Web view. The TUI does
-// 📖 the same in formatChangelogForDisplay, so the two surfaces stay in sync.
-function formatItem(text) {
-  return text
-    .replace(/\*\*([^*]+)\*\*/g, '$1')
-    .replace(/`([^`]+)`/g, '$1')
-    .trim()
-}

package/web/src/components/changelog/ChangelogView.module.css

@@ -1,159 +0,0 @@
-/**
- * @file web/src/components/changelog/ChangelogView.module.css
- * @description Two-phase changelog modal styles (TUI parity).
- */
-
-.backdrop {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  padding: 24px;
-}
-
-.modal {
-  width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
-  background: var(--color-bg-card, #080908);
-  border: 1px solid var(--color-border, #161a16);
-  border-radius: 14px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  flex: 1;
-  min-height: 0;
-}
-
-.header {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.titleRow {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 0;
-  color: var(--color-text);
-  flex: 1;
-  min-width: 0;
-}
-
-.backBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: var(--font-sans);
-  white-space: nowrap;
-}
-.backBtn:hover { background: var(--color-bg-hover); border-color: var(--color-text-muted); }
-
-.closeBtn {
-  background: transparent;
-  border: none;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.closeBtn:hover { color: var(--color-text); background: var(--color-bg-hover); }
-
-.body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px 20px;
-}
-
-.indexWrap {}
-.indexHint {
-  margin: 0 0 12px;
-  font-size: 11px;
-  color: var(--color-text-muted);
-}
-
-.versionList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.versionBtn {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  padding: 8px 12px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  cursor: pointer;
-  text-align: left;
-  transition: all 100ms;
-  font-family: var(--font-sans);
-}
-.versionBtn:hover { background: var(--color-bg-hover); border-color: var(--color-text-muted); }
-.versionLabel {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--color-text);
-}
-.versionSummary {
-  font-size: 11px;
-  color: var(--color-text-muted);
-}
-
-.details { display: flex; flex-direction: column; gap: 14px; }
-.section {}
-.sectionTitle {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--color-text-muted);
-  margin: 0 0 6px;
-}
-.itemList {
-  list-style: disc;
-  padding-left: 20px;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.item {
-  font-size: 12px;
-  color: var(--color-text);
-  line-height: 1.55;
-  word-break: break-word;
-}
-
-.empty {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--color-text-dim);
-  font-size: 13px;
-}

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

@@ -1,217 +0,0 @@
-/**
- * @file web/src/components/dashboard/DetailPanel.jsx
- * @description Slide-in detail panel showing full model stats, metrics, and a latency chart.
- * 📖 Rendered as a fixed overlay on the right side. Controlled by `model` prop (null = hidden).
- * Displays model ID, provider, tier, SWE score, context, status, pings, stability, verdict, uptime,
- * ping count, API key status, a larger SVG latency trend chart, and an M1 favorites + benchmark
- * 📖 action section (star + reorder + per-row AI Speed Test button).
- * @functions DetailPanel → main panel component, buildDetailChart → SVG chart builder
- */
-import { IconStar, IconStarFilled, IconChevronUp, IconChevronDown, IconPlayerPlayFilled, IconAlertTriangle } 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 { formatPing, formatAvg, pingClass } from '../../utils/format.js'
-import { sweClass } from '../../utils/ranks.js'
-import LaunchButton from '../launch/LaunchButton.jsx'
-import ToolPicker from '../tools/ToolPicker.jsx'
-import { getToolMeta, isModelCompatibleWithTool } from '../../../../src/core/tool-metadata.js'
-import styles from './DetailPanel.module.css'
-
-function buildDetailChart(history) {
-  if (!history || history.length < 2) {
-    return <div className={styles.chartEmpty}>Waiting for ping data...</div>
-  }
-
-  const valid = history.filter(p => p.code === '200' || p.code === '401')
-  if (valid.length < 2) {
-    return <div className={styles.chartEmpty}>Not enough data yet...</div>
-  }
-
-  const values = valid.map(p => p.ms)
-  const max = Math.max(...values, 1)
-  const min = Math.min(...values, 0)
-  const range = max - min || 1
-  const w = 340, h = 100
-  const padding = 4
-
-  const points = values.map((v, i) => {
-    const x = padding + i * ((w - 2 * padding) / (values.length - 1))
-    const y = padding + (h - 2 * padding) - ((v - min) / range) * (h - 2 * padding)
-    return [x.toFixed(1), y.toFixed(1)]
-  })
-
-  const linePoints = points.map(p => p.join(',')).join(' ')
-  const areaPoints = `${points[0][0]},${h - padding} ${linePoints} ${points[points.length - 1][0]},${h - padding}`
-  const lastPt = points[points.length - 1]
-
-  return (
-    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
-      <defs>
-        <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor="var(--color-accent)" stopOpacity="0.3" />
-          <stop offset="100%" stopColor="var(--color-accent)" stopOpacity="0.02" />
-        </linearGradient>
-      </defs>
-      <polygon fill="url(#chart-grad)" points={areaPoints} />
-      <polyline fill="none" stroke="var(--color-accent)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" points={linePoints} />
-      <circle cx={lastPt[0]} cy={lastPt[1]} r="3.5" fill="var(--color-accent)" stroke="var(--color-bg)" strokeWidth="1.5" />
-      <text x={padding} y={h - 2} fontSize="9" fill="var(--color-text-dim)" fontFamily="var(--font-mono)">{min}ms</text>
-      <text x={w - padding} y={padding + 8} fontSize="9" fill="var(--color-text-dim)" fontFamily="var(--font-mono)" textAnchor="end">{max}ms</text>
-    </svg>
-  )
-}
-
-function StatRow({ label, children }) {
-  return (
-    <div className={styles.stat}>
-      <span className={styles.statLabel}>{label}</span>
-      <span className={styles.statValue}>{children}</span>
-    </div>
-  )
-}
-
-export default function DetailPanel({
-  model, onClose, favorites, onBenchmark, onLaunch, onToast,
-  toolMode = 'opencode', onSetToolMode, onCycleToolMode, onOpenFallback,
-}) {
-  if (!model) return null
-
-  const chartSvg = buildDetailChart(model.pingHistory)
-  const isFav = favorites?.isFavorite(model) ?? false
-  const favRank = favorites?.favoriteRank(model) ?? Number.MAX_SAFE_INTEGER
-  const isFavAtTop = isFav && favRank === 0
-  const isFavAtBottom = isFav && favRank === (favorites?.favorites.length ?? 0) - 1
-  const toolMeta = getToolMeta(toolMode)
-  const compatible = isModelCompatibleWithTool(model.providerKey, toolMode)
-
-  return (
-    <div className={`${styles.panel} ${styles.panelOpen}`}>
-      <div className={styles.header}>
-        <h3 className={styles.title}>{model.label}</h3>
-        <button className={styles.closeBtn} onClick={onClose}>&times;</button>
-      </div>
-      <div className={styles.body}>
-        <StatRow label="Model ID">
-          <span style={{ fontSize: 11, wordBreak: 'break-all' }}>{model.modelId}</span>
-        </StatRow>
-        <StatRow label="Provider">{model.origin}</StatRow>
-        <StatRow label="Tier"><TierBadge tier={model.tier} /></StatRow>
-        <StatRow label="SWE-bench Score">
-          <span className={`${styles.swe} ${styles[sweClass(model.sweScore)]}`}>{model.sweScore || '—'}</span>
-        </StatRow>
-        <StatRow label="Context Window">{model.ctx || '—'}</StatRow>
-        <StatRow label="Status">
-          <StatusDot status={model.status} /> {model.status}
-        </StatRow>
-        <StatRow label="Latest Ping">
-          <span className={`${styles.ping} ${styles[pingClass(model.latestPing)]}`}>
-            {formatPing(model.latestPing, model.latestCode).text}
-          </span>
-        </StatRow>
-        <StatRow label="Average Latency">
-          <span className={`${styles.ping} ${styles[pingClass(model.avg)]}`}>
-            {formatAvg(model.avg).text}
-          </span>
-        </StatRow>
-        <StatRow label="P95 Latency">
-          {model.p95 != null && model.p95 !== Infinity ? `${model.p95}ms` : '—'}
-        </StatRow>
-        <StatRow label="Jitter (σ)">
-          {model.jitter != null && model.jitter !== Infinity ? `${model.jitter}ms` : '—'}
-        </StatRow>
-        <StatRow label="Stability Score">
-          <StabilityCell score={model.stability} />
-        </StatRow>
-        <StatRow label="Verdict">
-          <VerdictBadge verdict={model.verdict} httpCode={model.httpCode} />
-        </StatRow>
-        <StatRow label="Uptime">
-          {model.uptime > 0 ? `${model.uptime}%` : '—'}
-        </StatRow>
-        <StatRow label="Ping Count">{model.pingCount}</StatRow>
-        <StatRow label="API Key">
-          {model.hasApiKey ? '✅ Configured' : '❌ Missing'}
-        </StatRow>
-        <StatRow label="Tool">
-          <ToolPicker
-            compact
-            toolMode={toolMode}
-            onSetToolMode={onSetToolMode}
-            onCycleToolMode={onCycleToolMode}
-          />
-        </StatRow>
-        {!compatible && (
-          <div className={styles.compatWarning}>
-            <IconAlertTriangle size={14} />
-            <span>{model.label} is not compatible with {toolMeta.emoji} {toolMeta.label}.</span>
-            <button onClick={() => onOpenFallback?.(model)}>Install in compatible tool</button>
-          </div>
-        )}
-
-        {/* ── M1/M3: favorites + benchmark + endpoint install action section ── */}
-        {(favorites || onBenchmark) && (
-          <div className={styles.actions}>
-            {favorites && (
-              <div className={styles.favBlock}>
-                <button
-                  className={`${styles.favBtn} ${isFav ? styles.favBtnActive : ''}`}
-                  onClick={() => favorites.toggle(model)}
-                  title={isFav ? `Unfavorite ${model.label} (TUI: F)` : `Favorite ${model.label} (TUI: F)`}
-                >
-                  {isFav ? <IconStarFilled size={14} stroke={1.5} /> : <IconStar size={14} stroke={1.5} />}
-                  <span>{isFav ? 'Favorited' : 'Add to favorites'}</span>
-                </button>
-                {isFav && (
-                  <div className={styles.reorderRow}>
-                    <button
-                      className={styles.reorderBtn}
-                      disabled={isFavAtTop}
-                      onClick={() => favorites.reorder(model, 'up')}
-                      title="Move up in router priority (TUI: Shift+↑)"
-                      aria-label="Move favorite up"
-                    >
-                      <IconChevronUp size={12} stroke={1.5} /> Up
-                    </button>
-                    <button
-                      className={styles.reorderBtn}
-                      disabled={isFavAtBottom}
-                      onClick={() => favorites.reorder(model, 'down')}
-                      title="Move down in router priority (TUI: Shift+↓)"
-                      aria-label="Move favorite down"
-                    >
-                      <IconChevronDown size={12} stroke={1.5} /> Down
-                    </button>
-                    <span className={styles.rankBadge}>#{favRank + 1}</span>
-                  </div>
-                )}
-              </div>
-            )}
-            {onLaunch && (
-              <LaunchButton model={model} toolMode={toolMode} onLaunch={onLaunch} />
-            )}
-            {onBenchmark && (
-              <button
-                className={styles.benchBtn}
-                onClick={() => {
-                  onBenchmark(model)
-                  onToast?.(`Benchmark started for ${model.label}…`, 'info')
-                }}
-                title="Run AI Speed Test on this model (TUI: Ctrl+A)"
-              >
-                <IconPlayerPlayFilled size={12} stroke={1.5} />
-                <span>AI Speed Test</span>
-              </button>
-            )}
-          </div>
-        )}
-
-        <div className={styles.chart}>
-          <div className={styles.chartTitle}>Latency Trend (last 20 pings)</div>
-          {chartSvg}
-        </div>
-      </div>
-    </div>
-  )
-}