free-coding-models 0.5.5 → 0.5.8

package/web/src/components/settings/SettingsView.module.css

@@ -33,6 +33,180 @@
   color: var(--color-text-muted);
 }
 
+/* ─── M2: feature toggles section ─── */
+.featureSection {
+  margin-bottom: 28px;
+  padding: 18px 20px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+}
+.sectionHeading {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--color-text-muted);
+  margin: 0 0 14px;
+}
+.featureGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.featureRow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: background 120ms;
+}
+.featureRow:hover { background: var(--color-surface); }
+.featureLabel {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+.featureLabel > svg {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+.featureTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+.featureDesc {
+  font-size: 11px;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  margin-top: 2px;
+}
+.featureActions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.select {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  padding: 5px 8px;
+  font-size: 12px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  outline: none;
+  min-width: 130px;
+}
+.select:focus { border-color: var(--color-accent); }
+
+.toggleSwitch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.toggleSwitch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggleSlider {
+  position: absolute;
+  inset: 0;
+  background: var(--color-border);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background 150ms;
+}
+.toggleSlider::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  background: var(--color-text);
+  border-radius: 50%;
+  transition: transform 150ms;
+}
+.toggleSwitch input:checked + .toggleSlider {
+  background: var(--color-accent);
+}
+.toggleSwitch input:checked + .toggleSlider::before {
+  transform: translateX(16px);
+}
+
+.smallBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-sans);
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.smallBtn:hover { background: var(--color-bg-hover); border-color: var(--color-text-muted); }
+.smallBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.notice {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: var(--color-info-dim);
+  color: var(--color-info);
+  border: 1px solid var(--color-info);
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* ─── M2: per-provider test badge ─── */
+.testBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border-radius: 5px;
+  font-size: 10px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  margin-bottom: 8px;
+  align-self: flex-start;
+  width: fit-content;
+}
+.testBadge.test_ok { background: var(--color-success-dim); color: var(--color-success); border: 1px solid var(--color-success); }
+.testBadge.test_auth_error { background: var(--color-danger-dim); color: var(--color-danger); border: 1px solid var(--color-danger); }
+.testBadge.test_rate_limited { background: var(--color-warning-dim); color: var(--color-warning); border: 1px solid var(--color-warning); }
+.testBadge.test_no_callable_model { background: var(--color-warning-dim); color: var(--color-warning); border: 1px solid var(--color-warning); }
+.testBadge.test_fail { background: var(--color-danger-dim); color: var(--color-danger); border: 1px solid var(--color-danger); }
+.testBadge.test_missing_key { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
+.testBadge.test_pending { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
+
+.testSpinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid rgba(180, 0, 255, 0.3);
+  border-top-color: #b400ff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
 .toolbar {
   display: flex;
   align-items: center;

package/web/src/components/tools/ToolPicker.jsx

@@ -0,0 +1,86 @@
+/**
+ * @file web/src/components/tools/ToolPicker.jsx
+ * @description Header/dropdown control for the active Web endpoint-install target.
+ * Mirrors the TUI install target flow with a mouse-first dropdown and cycle button.
+ *
+ * @functions
+ *   → ToolPicker — renders active tool, cycle control, and selectable tool list
+ * @exports ToolPicker
+ */
+import { useEffect, useRef, useState } from 'react'
+import { IconChevronDown, IconRefresh } from '@tabler/icons-react'
+import { TOOL_METADATA, getToolMeta } from '../../../../src/core/tool-metadata.js'
+import { INSTALL_ENDPOINT_TOOL_MODES } from '../../utils/m3.js'
+import styles from './ToolPicker.module.css'
+
+export default function ToolPicker({ toolMode = 'opencode', onSetToolMode, onCycleToolMode, compact = false, tools = INSTALL_ENDPOINT_TOOL_MODES }) {
+  const [open, setOpen] = useState(false)
+  const wrapRef = useRef(null)
+  const active = getToolMeta(toolMode)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointer = (event) => {
+      if (wrapRef.current && !wrapRef.current.contains(event.target)) setOpen(false)
+    }
+    const onKey = (event) => { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onPointer)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onPointer)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  return (
+    <div className={`${styles.wrap} ${compact ? styles.compact : ''}`} ref={wrapRef}>
+      <button
+        type="button"
+        className={styles.trigger}
+        onClick={() => setOpen((value) => !value)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        title={`Install endpoint into: ${active.label}`}
+      >
+        <span className={styles.emoji}>{active.emoji}</span>
+        <span className={styles.label}>{compact ? active.label.replace(/ CLI$/, '') : active.label}</span>
+        <IconChevronDown size={13} stroke={1.7} />
+      </button>
+      <button
+        type="button"
+        className={styles.cycle}
+        onClick={onCycleToolMode}
+        title="Cycle endpoint target"
+        aria-label="Cycle endpoint target"
+      >
+        <IconRefresh size={13} stroke={1.7} />
+      </button>
+
+      {open && (
+        <div className={styles.menu} role="listbox" aria-label="Endpoint install target">
+          {tools.map((mode) => {
+            const meta = TOOL_METADATA[mode]
+            const activeMode = mode === toolMode
+            return (
+              <button
+                type="button"
+                key={mode}
+                className={`${styles.item} ${activeMode ? styles.itemActive : ''}`}
+                onClick={() => { onSetToolMode?.(mode); setOpen(false) }}
+                role="option"
+                aria-selected={activeMode}
+              >
+                <span className={styles.itemEmoji}>{meta.emoji}</span>
+                <span className={styles.itemText}>
+                  <strong>{meta.label}</strong>
+                  <small>{meta.flag}</small>
+                </span>
+                {activeMode && <span className={styles.activeDot}>●</span>}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/web/src/components/tools/ToolPicker.module.css

@@ -0,0 +1,84 @@
+/**
+ * @file web/src/components/tools/ToolPicker.module.css
+ * @description Compact header dropdown styles for the M3 tool-mode picker.
+ */
+.wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.trigger,
+.cycle {
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: background 150ms, border-color 150ms, color 150ms;
+}
+.trigger {
+  gap: 6px;
+  padding: 0 9px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.cycle {
+  width: 30px;
+  border-radius: 6px;
+}
+.trigger:hover,
+.cycle:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.emoji { font-size: 14px; line-height: 1; }
+.label { white-space: nowrap; }
+.menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 7px);
+  width: 280px;
+  max-height: min(520px, calc(100vh - 90px));
+  overflow: auto;
+  padding: 5px;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-bg-elevated);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
+  z-index: 250;
+}
+.item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 9px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--color-text);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+.item:hover { background: var(--color-bg-hover); }
+.itemActive {
+  background: var(--color-accent-dim);
+  color: var(--color-accent);
+}
+.itemEmoji { width: 22px; text-align: center; font-size: 16px; }
+.itemText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.itemText strong { font-size: 12px; font-weight: 800; }
+.itemText small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
+.activeDot { color: var(--color-accent); font-size: 10px; }
+.compact .trigger { width: 100%; justify-content: flex-start; }
+.compact .menu { left: 0; right: auto; }
+@media (max-width: 1024px) {
+  .label { display: none; }
+  .trigger { padding: 0 8px; }
+}

package/web/src/components/update/UpdateChip.jsx

@@ -0,0 +1,104 @@
+/**
+ * @file web/src/components/update/UpdateChip.jsx
+ * @description Header update chip + popover — M2 parity with TUI's auto-update banner.
+ * 📖 Sits in the right side of the header (next to AI Latency, theme, export).
+ * 📖 Hidden when no update is available; shows "⬆ vX.Y.Z" when one is.
+ * 📖 Click → popover with "Update now" + "What's new" (which opens the
+ * 📖 Changelog modal pre-focused on the new version).
+ *
+ * @functions
+ *   → UpdateChip — small badge with popover
+ */
+import { useState, useRef, useEffect } from 'react'
+import { IconDownload, IconHistory, IconX, IconExternalLink } from '@tabler/icons-react'
+import styles from './UpdateChip.module.css'
+
+export default function UpdateChip({ updateAvailable, latestVersion, onRunUpdate, onOpenChangelog, checking }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  // 📖 Close on outside click / Esc — same pattern as the header kebab menu.
+  useEffect(() => {
+    if (!open) return
+    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  // 📖 No chip when no update. The M1 plan keeps the chip honest — a fresh
+  // 📖 install should look clean, not noisy.
+  if (!updateAvailable) {
+    if (checking) {
+      return (
+        <span className={styles.checking} title="Checking for updates…">
+          <span className={styles.dot} />
+        </span>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div className={styles.wrap} ref={ref}>
+      <button
+        className={styles.chip}
+        onClick={() => setOpen((o) => !o)}
+        title={`Update available: v${latestVersion}. Click to install.`}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+      >
+        <IconDownload size={13} stroke={1.5} />
+        <span>v{latestVersion}</span>
+      </button>
+
+      {open && (
+        <div className={styles.popover} role="dialog" aria-label="Update available">
+          <div className={styles.popoverHeader}>
+            <div className={styles.popoverTitle}>
+              <IconDownload size={14} stroke={1.5} />
+              <span>Update available</span>
+            </div>
+            <button
+              className={styles.popoverClose}
+              onClick={() => setOpen(false)}
+              aria-label="Close"
+            >
+              <IconX size={14} stroke={1.5} />
+            </button>
+          </div>
+          <p className={styles.popoverBody}>
+            A newer version (<strong>v{latestVersion}</strong>) is available on npm.
+            After updating, restart the dashboard to pick up the changes.
+          </p>
+          <div className={styles.popoverActions}>
+            <button
+              className={styles.primaryAction}
+              onClick={() => {
+                setOpen(false)
+                onRunUpdate?.()
+              }}
+            >
+              <IconDownload size={13} stroke={1.5} />
+              <span>Update now</span>
+            </button>
+            <button
+              className={styles.secondaryAction}
+              onClick={() => {
+                setOpen(false)
+                onOpenChangelog?.(latestVersion)
+              }}
+            >
+              <IconHistory size={13} stroke={1.5} />
+              <span>What's new</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/web/src/components/update/UpdateChip.module.css

@@ -0,0 +1,146 @@
+/**
+ * @file web/src/components/update/UpdateChip.module.css
+ * @description Styles for the header update chip + popover.
+ */
+
+.wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  background: var(--color-success-dim);
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: all 150ms;
+  white-space: nowrap;
+}
+.chip:hover {
+  background: var(--color-success);
+  color: var(--color-bg);
+}
+
+.checking {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  opacity: 0.5;
+}
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-text-muted);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 320px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-hover);
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+  z-index: 200;
+  overflow: hidden;
+}
+
+.popoverHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+.popoverTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-success);
+}
+.popoverClose {
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 4px;
+}
+.popoverClose:hover { color: var(--color-text); background: var(--color-bg-hover); }
+
+.popoverBody {
+  padding: 10px 12px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-text);
+}
+.popoverBody strong {
+  color: var(--color-success);
+  font-family: var(--font-mono);
+}
+
+.popoverActions {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px 12px;
+}
+
+.primaryAction,
+.secondaryAction {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  justify-content: center;
+  font-family: var(--font-sans);
+  transition: all 150ms;
+}
+.primaryAction {
+  background: var(--color-success);
+  color: var(--color-bg);
+  border: 1px solid var(--color-success);
+}
+.primaryAction:hover {
+  background: var(--color-success);
+  filter: brightness(0.9);
+}
+.secondaryAction {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.secondaryAction:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-text-muted);
+}

package/web/src/global.css

@@ -136,6 +136,29 @@
 /* ─── Reset & Base ─── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+/* 📖 M5: Global :focus-visible outline for keyboard navigation (a11y).
+   📖 Only shows for keyboard users, not mouse clicks. Uses the accent color
+   📖 with a subtle glow ring so focus is always visible but not jarring. */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* 📖 Remove default browser :focus ring — we only want :focus-visible */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 📖 Inputs keep their own focus styling via component CSS, but keyboard
+   📖 users still see the global ring as a fallback safety net. */
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
 html {
   font-size: 14px;
   scroll-behavior: smooth;

package/web/src/hooks/urlState.constants.js

@@ -0,0 +1,28 @@
+/**
+ * @file web/src/hooks/urlState.constants.js
+ * @description URL param validation tables — extracted from useUrlState for testability.
+ * 📖 Keep these in sync with src/tui/tui-state.js TIER_CYCLE / VERDICT_CYCLE /
+ * 📖 HEALTH_CYCLE constants so the URL reflects the same filter universe
+ * 📖 the TUI uses.
+ */
+import { TOOL_MODE_ORDER } from '../../../src/core/tool-metadata.js'
+
+const TIER_VALUES = new Set(['S+', 'S', 'A+', 'A', 'A-', 'B+', 'B', 'C', 'all'])
+const STATUS_VALUES = new Set(['up', 'down', 'pending', 'all'])
+const SORT_VALUES = new Set([
+  'mood', 'idx', 'tier', 'sweScore', 'ctx', 'label', 'origin',
+  'latestPing', 'avg', 'condition', 'verdict', 'stability', 'uptime',
+  'aiLatency', 'tps', 'trend',
+])
+const VIEW_VALUES = new Set(['dashboard', 'settings', 'analytics', 'recommend', 'router', 'help', 'changelog'])
+const DIR_VALUES = new Set(['asc', 'desc'])
+const TOOL_MODE_VALUES = new Set(TOOL_MODE_ORDER)
+
+export {
+  TIER_VALUES as VALID_TIERS,
+  STATUS_VALUES as VALID_STATUS,
+  SORT_VALUES as VALID_SORTS,
+  VIEW_VALUES as VALID_VIEWS,
+  DIR_VALUES as VALID_DIRS,
+  TOOL_MODE_VALUES as VALID_TOOL_MODES,
+}