free-coding-models 0.5.5 → 0.5.8

package/web/src/components/analytics/TokenUsagePanel.module.css

@@ -0,0 +1,126 @@
+.card {
+  margin-top: 16px;
+}
+
+.cardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #aaa);
+  margin: 0 0 10px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.empty {
+  color: var(--text-muted, #666);
+  font-size: 13px;
+  padding: 20px 0;
+  text-align: center;
+}
+
+/* Summary Grid */
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.summaryCard {
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.summaryLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.summaryValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.summarySub {
+  font-size: 11px;
+  color: var(--text-muted, #888);
+}
+
+/* 7-Day Chart */
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 100px;
+  padding: 0 4px;
+}
+
+.chartBar {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.chartFill {
+  width: 100%;
+  min-height: 2px;
+  background: linear-gradient(180deg, #00c864 0%, rgba(0, 200, 100, 0.3) 100%);
+  border-radius: 3px 3px 0 0;
+  transition: height 0.3s ease;
+}
+
+.chartLabel {
+  font-size: 10px;
+  color: var(--text-muted, #888);
+  text-transform: uppercase;
+}
+
+/* Top Lists */
+.topList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.topRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+.topKey {
+  flex: 1;
+  color: var(--text-primary, #e0e0e0);
+  font-family: 'SF Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topVal {
+  color: var(--text-muted, #888);
+  min-width: 80px;
+  text-align: right;
+}
+
+.topReq {
+  color: var(--text-muted, #666);
+  min-width: 50px;
+  text-align: right;
+  font-size: 11px;
+}

package/web/src/components/atoms/TierBadge.module.css

@@ -13,9 +13,9 @@
 .tier_aplus { background: rgba(0,200,255,0.1); color: #00c8ff; border: 1px solid rgba(0,200,255,0.2); }
 .tier_a     { background: rgba(61,220,132,0.1); color: #3ddc84; border: 1px solid rgba(61,220,132,0.2); }
 .tier_aminus{ background: rgba(126,207,126,0.1); color: #7ecf7e; border: 1px solid rgba(126,207,126,0.2); }
-.tier_bplus { background: rgba(168,168,200,0.1); color: #a8a8c8; border: 1px solid rgba(168,168,200,0.15); }
-.tier_b     { background: rgba(128,128,152,0.1); color: #808098; border: 1px solid rgba(128,128,152,0.15); }
-.tier_c     { background: rgba(96,96,120,0.1); color: #606078; border: 1px solid rgba(96,96,120,0.15); }
+.tier_bplus { background: rgba(168,168,200,0.1); color: #b8b8d8; border: 1px solid rgba(168,168,200,0.15); }
+.tier_b     { background: rgba(128,128,152,0.1); color: #a0a0b8; border: 1px solid rgba(128,128,152,0.15); }
+.tier_c     { background: rgba(96,96,120,0.1); color: #909098; border: 1px solid rgba(96,96,120,0.15); }
 
 /* 📖 Light theme: darker, AA-contrast tier text colors. Borders stay the same
    📖 hue so the badge still feels "tier-colored", just more legible. */

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

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

@@ -0,0 +1,160 @@
+/**
+ * @file web/src/components/changelog/ChangelogView.module.css
+ * @description Two-phase changelog modal styles (TUI parity).
+ */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5vh 4vw;
+}
+
+.modal {
+  width: min(720px, 95vw);
+  max-height: 88vh;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-hover);
+  border-radius: 14px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.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

@@ -7,14 +7,16 @@
  * 📖 action section (star + reorder + per-row AI Speed Test button).
  * @functions DetailPanel → main panel component, buildDetailChart → SVG chart builder
  */
-import { useMemo } from 'react'
-import { IconStar, IconStarFilled, IconChevronUp, IconChevronDown, IconPlayerPlayFilled } from '@tabler/icons-react'
+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) {
@@ -70,7 +72,10 @@ function StatRow({ label, children }) {
   )
 }
 
-export default function DetailPanel({ model, onClose, favorites, onBenchmark, onToast }) {
+export default function DetailPanel({
+  model, onClose, favorites, onBenchmark, onLaunch, onToast,
+  toolMode = 'opencode', onSetToolMode, onCycleToolMode, onOpenFallback,
+}) {
   if (!model) return null
 
   const chartSvg = buildDetailChart(model.pingHistory)
@@ -78,6 +83,8 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
   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}>
@@ -127,8 +134,23 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
         <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: favorites + per-row benchmark action section ── */}
+        {/* ── M1/M3: favorites + benchmark + endpoint install action section ── */}
         {(favorites || onBenchmark) && (
           <div className={styles.actions}>
             {favorites && (
@@ -166,6 +188,9 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
                 )}
               </div>
             )}
+            {onLaunch && (
+              <LaunchButton model={model} toolMode={toolMode} onLaunch={onLaunch} />
+            )}
             {onBenchmark && (
               <button
                 className={styles.benchBtn}

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

@@ -219,6 +219,32 @@
   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;

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

@@ -8,6 +8,7 @@
  */
 import { useState, useEffect, useMemo } from 'react'
 import { IconRefresh, IconX, IconFilter, IconCircleCheck, IconAlertTriangle, IconActivity, IconEye, IconStar } from '@tabler/icons-react'
+import { getToolMeta } from '../../../../src/core/tool-metadata.js'
 import styles from './FilterBar.module.css'
 
 // 📖 Chip sets match the TUI cycles 1:1 (see useFilter.js). Keep these in sync.
@@ -109,6 +110,7 @@ export default function FilterBar({
   globalBenchmarkRunning,
   globalBenchmarkTotal,
   globalBenchmarkCompleted,
+  toolMode = 'opencode',
 }) {
   const [countdown, setCountdown] = useState(null)
 
@@ -124,6 +126,7 @@ export default function FilterBar({
   }, [nextPingAt])
 
   const countdownDisplay = countdown !== null ? formatCountdown(countdown) : null
+  const activeTool = getToolMeta(toolMode)
 
   // 📖 Custom text filter chip — sticks to the right of the search bar, with
   // 📖 an "X" to clear (TUI's `X` key behavior).
@@ -170,12 +173,14 @@ export default function FilterBar({
       <ChipRow label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
 
       <div className={styles.group}>
-        <label className={styles.filterLabel}>Visibility</label>
+        <label className={styles.filterLabel} htmlFor="visibility-select">Visibility</label>
         <select
+          id="visibility-select"
           className={styles.select}
           value={visibilityMode}
           onChange={(e) => setVisibilityMode(e.target.value)}
           title={VISIBILITY_MODES.find((v) => v.key === visibilityMode)?.hint}
+          aria-label="Visibility mode"
         >
           {VISIBILITY_MODES.map((v) => (
             <option key={v.key} value={v.key}>{v.label}</option>
@@ -184,11 +189,13 @@ export default function FilterBar({
       </div>
 
       <div className={styles.group}>
-        <label className={styles.filterLabel}>Provider</label>
+        <label className={styles.filterLabel} htmlFor="provider-select">Provider</label>
         <select
+          id="provider-select"
           className={styles.providerSelect}
           value={filterProvider}
           onChange={(e) => setFilterProvider(e.target.value)}
+          aria-label="Filter by provider"
         >
           <option value="all">All Providers</option>
           {providers.map((p) => (
@@ -197,6 +204,14 @@ export default function FilterBar({
         </select>
       </div>
 
+      <div className={styles.group}>
+        <label className={styles.filterLabel}>Endpoint target</label>
+        <div className={styles.toolStatus} title="Active endpoint install target from the Header picker">
+          <span>{activeTool.emoji}</span>
+          <strong>{activeTool.label}</strong>
+        </div>
+      </div>
+
       <div className={styles.spacer} />
 
       {/* ── Custom text filter chip (TUI's Ctrl+P "Apply text filter") ── */}

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

@@ -49,6 +49,23 @@
 }
 .select:focus, .providerSelect:focus { border-color: var(--color-accent); }
 
+.toolStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.toolStatus strong {
+  font-size: 11px;
+  font-weight: 800;
+}
+
 /* ── Spacer + reset ── */
 .spacer { flex: 1; }