free-coding-models 0.5.15 → 0.5.16

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

@@ -0,0 +1,347 @@
+/**
+ * @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;
+}
+
+.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/ModelTable.jsx

@@ -13,7 +13,7 @@
  * 📖 Custom widths persist in localStorage via the useColumnSizing hook and survive reloads.
  * 📖 A "Reset columns" button appears in the toolbar only when the user has custom widths.
  */
-import { useMemo, useEffect } from 'react'
+import { useMemo, useEffect, useState, useCallback, Fragment } from 'react'
 import {
   useReactTable,
   getCoreRowModel,
@@ -43,6 +43,7 @@ import { sweClass } from '../../utils/ranks.js'
 // 📖 file the TUI uses; both surfaces share the source of truth for which
 // 📖 providers are compatible with which tools.
 import { getCompatibleTools } from '../../../../src/core/tool-metadata.js'
+import ExpandedDetailRow from './ExpandedDetailRow.jsx'
 import styles from './ModelTable.module.css'
 
 const colHelper = createColumnHelper()
@@ -345,7 +346,15 @@ export default function ModelTable({
   filtered, onSelectModel, onBenchmarkRow, onLaunch, favorites,
   sortColumn, sortDirection, onSort,
   toolMode = null,
+  onToast, onSetToolMode, onCycleToolMode, onOpenFallback,
 }) {
+  // 📖 Expand row state — only one row expanded at a time (accordion)
+  const [expandedRowId, setExpandedRowId] = useState(null)
+
+  const toggleExpand = useCallback((model) => {
+    const key = `${model.providerKey}/${model.modelId}`
+    setExpandedRowId((prev) => prev === key ? null : key)
+  }, [])
   // Compute top3 for medal rows
   const top3Ids = useMemo(() => {
     const online = filtered.filter(m => m.status === 'up' && m.avg != null && m.avg !== Infinity && m.avg < 99000)
@@ -501,49 +510,60 @@ export default function ModelTable({
         <tbody>
           {rows.map((row, i) => {
             const m = row.original
+            const rowKey = `${m.providerKey}/${m.modelId}`
+            const isExpanded = expandedRowId === rowKey
             const rankIdx = [...top3Ids].indexOf(m.modelId)
             const rowClasses = []
             if (rankIdx >= 0) rowClasses.push(styles[`rank${rankIdx + 1}`])
-            // 📖 Per-row benchmark state comes from the backend. The old global
-            // 📖 heuristic made every unbenchmarked row spin until the whole scan ended.
             if (m.isBenchmarking) rowClasses.push(styles.benchRow)
-            // 📖 Tool-compat dark-red row when an active tool mode is set and the
-            // 📖 model isn't compatible with it. Mirrors the TUI render-table.js
-            // 📖 behavior. The picker itself ships in M3; for M1 the visual is wired.
+            if (isExpanded) rowClasses.push(styles.expandedRow)
             if (toolMode) {
               const compat = getCompatibleTools(m.providerKey)
               if (!compat.includes(toolMode)) {
                 rowClasses.push(styles.incompatible)
               }
             }
-            // 📖 "Unusable" rows (no API key / bad API key) get the same 80% opacity
-            // 📖 fade the TUI uses, so the user can see at a glance which models
-            // 📖 they cannot actually use. The fade is applied as opacity on the
-            // 📖 whole <tr> so it composes cleanly with rank/bench/incompatible
-            // 📖 styles. Cursor hover is not implemented in the web, so the
-            // 📖 fade is never overridden by an active-selection highlight.
             if (m.status === 'noauth' || m.status === 'auth_error') {
               rowClasses.push(styles.unusable)
             }
             return (
-              <tr
-                key={row.id}
-                className={rowClasses.join(' ')}
-                onClick={() => onSelectModel(row.original)}
-              >
-                {row.getVisibleCells().map(cell => {
-                  const sizePx = `${cell.column.getSize()}px`
-                  return (
-                    <td
-                      key={cell.id}
-                      className={styles.td}
-                      style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx }}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <Fragment key={row.id}>
+                <tr
+                  className={rowClasses.join(' ')}
+                  onClick={() => toggleExpand(m)}
+                >
+                  {row.getVisibleCells().map(cell => {
+                    const sizePx = `${cell.column.getSize()}px`
+                    return (
+                      <td
+                        key={cell.id}
+                        className={styles.td}
+                        style={{ width: sizePx, minWidth: sizePx, maxWidth: sizePx }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    )
+                  })}
+                </tr>
+                {/* 📖 Expanded detail row — 3-column panel with info, playground, AI latency */}
+                {isExpanded && (
+                  <tr className={styles.expandRowWrapper}>
+                    <td colSpan={row.getVisibleCells().length} className={styles.expandRowCell}>
+                      <ExpandedDetailRow
+                        model={m}
+                        favorites={favorites}
+                        onBenchmark={onBenchmarkRow}
+                        onLaunch={onLaunch}
+                        onToast={onToast}
+                        toolMode={toolMode}
+                        onSetToolMode={onSetToolMode}
+                        onCycleToolMode={onCycleToolMode}
+                        onOpenFallback={onOpenFallback}
+                      />
                     </td>
-                  )
-                })}
-              </tr>
+                  </tr>
+                )}
+              </Fragment>
             )
           })}
         </tbody>

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

@@ -356,4 +356,16 @@
 .incompatible .launchCell,
 .benchRow .launchCell {
   opacity: 1;
+}
+
+/* ─── Expandable row styles ─── */
+.expandedRow {
+  background: var(--color-bg-active) !important;
+}
+.expandRowWrapper {
+  border: none;
+}
+.expandRowCell {
+  padding: 0 !important;
+  border-bottom: 2px solid var(--color-accent) !important;
 }