free-coding-models 0.5.4 → 0.5.6

package/web/src/components/settings/SettingsView.jsx

@@ -1,21 +1,40 @@
 /**
  * @file web/src/components/settings/SettingsView.jsx
- * @description Full settings page for managing API keys and provider configurations.
- * 📖 Fetches config from /api/config, renders expandable provider cards with
- * key display (masked/revealed), save/delete/toggle actions, and search filter.
+ * @description Full settings page — M2 parity with the TUI Settings overlay.
+ * 📖 M1: API key management (per-provider cards: enable/disable, masked key,
+ * 📖 reveal, copy, save, delete, search filter).
+ * 📖 M2: theme dropdown, favorites display mode toggle, startup AI speed scan
+ * 📖 toggle, shell-env export toggle, legacy proxy cleanup button, per-provider
+ * 📖 test key button (calls /api/key/:provider/test), open Changelog link,
+ * 📖 update status row.
  * @functions SettingsView → main settings page component
  */
 import { useState, useEffect, useCallback } from 'react'
-import { IconSettings, IconPlug, IconCircleCheck, IconKey, IconEye, IconEyeOff, IconCopy, IconTrash } from '@tabler/icons-react'
+import {
+  IconSettings, IconPlug, IconCircleCheck, IconKey, IconEye, IconEyeOff, IconCopy, IconTrash,
+  IconBolt, IconCircleCheckFilled, IconHistory, IconRefresh, IconDownload, IconSun, IconStar,
+} from '@tabler/icons-react'
 import styles from './SettingsView.module.css'
 import { maskKey } from '../../utils/format.js'
 
-export default function SettingsView({ onToast }) {
+const TEST_OUTCOME_META = {
+  ok: { label: 'OK', icon: IconCircleCheckFilled, className: 'testOk' },
+  auth_error: { label: 'Auth error', icon: IconKey, className: 'testErr' },
+  rate_limited: { label: 'Rate limited', icon: IconRefresh, className: 'testWarn' },
+  no_callable_model: { label: 'No callable model', icon: IconKey, className: 'testWarn' },
+  fail: { label: 'Failed', icon: IconKey, className: 'testErr' },
+  missing_key: { label: 'Missing key', icon: IconKey, className: 'testNeutral' },
+}
+
+export default function SettingsView({ onToast, onOpenChangelog, onCheckForUpdate }) {
   const [config, setConfig] = useState(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [expandedCards, setExpandedCards] = useState(new Set())
   const [revealedKeys, setRevealedKeys] = useState(new Set())
   const [keyInputs, setKeyInputs] = useState({})
+  const [testResults, setTestResults] = useState({}) // { providerKey: { outcome, code?, detail? } }
+  const [testingKeys, setTestingKeys] = useState(new Set())
+  const [legacyCleanupMsg, setLegacyCleanupMsg] = useState(null)
 
   const loadConfig = useCallback(async () => {
     try {
@@ -142,6 +161,100 @@ export default function SettingsView({ onToast }) {
     }
   }
 
+  // 📖 M2: per-provider key test. Fires a parallel auth probe + chat ping
+  // 📖 through /api/key/:provider/test and stores the outcome for badge display.
+  const testKey = useCallback(async (key) => {
+    if (testingKeys.has(key)) return
+    setTestingKeys((prev) => new Set(prev).add(key))
+    setTestResults((prev) => ({ ...prev, [key]: { outcome: 'pending' } }))
+    try {
+      const resp = await fetch(`/api/key/${encodeURIComponent(key)}/test`, { method: 'POST' })
+      const data = await resp.json().catch(() => ({}))
+      if (resp.ok) {
+        setTestResults((prev) => ({ ...prev, [key]: data }))
+        const meta = TEST_OUTCOME_META[data.outcome] || TEST_OUTCOME_META.fail
+        onToast?.(`${key} test: ${meta.label}${data.code ? ` (HTTP ${data.code})` : ''}`, data.outcome === 'ok' ? 'success' : 'info')
+      } else {
+        setTestResults((prev) => ({ ...prev, [key]: { outcome: 'fail', detail: data.error || 'HTTP ' + resp.status } }))
+        onToast?.(`${key} test failed: ${data.error || resp.statusText}`, 'error')
+      }
+    } catch (err) {
+      setTestResults((prev) => ({ ...prev, [key]: { outcome: 'fail', detail: err.message } }))
+      onToast?.(`${key} test failed: ${err.message}`, 'error')
+    } finally {
+      setTestingKeys((prev) => {
+        const next = new Set(prev)
+        next.delete(key)
+        return next
+      })
+    }
+  }, [testingKeys, onToast])
+
+  // 📖 M2: feature toggles (theme / favorites mode / startup AI scan / shell env)
+  // 📖 go through /api/settings/feature which persists to the same config file
+  // 📖 the TUI uses. Theme is a tri-state string, not a boolean.
+  const toggleFeature = useCallback(async (feature, value) => {
+    try {
+      const body = value === undefined ? { feature } : { feature, value }
+      const resp = await fetch('/api/settings/feature', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const data = await resp.json()
+      if (data.success) {
+        await loadConfig()
+        onToast?.(`${feature} updated`, 'success')
+      } else {
+        onToast?.(data.error || 'Failed to update feature', 'error')
+      }
+    } catch {
+      onToast?.('Network error', 'error')
+    }
+  }, [onToast])
+
+  const setShellEnv = useCallback(async (enabled) => {
+    try {
+      const resp = await fetch('/api/shell-env/toggle', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled }),
+      })
+      const data = await resp.json()
+      if (data.success) {
+        await loadConfig()
+        onToast?.(`Shell env export ${data.enabled ? 'enabled' : 'disabled'} — restart your shell to apply.`, 'success')
+      } else {
+        onToast?.(data.error || 'Failed to toggle shell env', 'error')
+      }
+    } catch {
+      onToast?.('Network error', 'error')
+    }
+  }, [onToast])
+
+  const runLegacyCleanup = useCallback(async () => {
+    if (!confirm('Remove discontinued proxy config leftovers? This is safe to run.')) return
+    try {
+      const resp = await fetch('/api/legacy-cleanup', { method: 'POST' })
+      const data = await resp.json()
+      const cleaned = (data.removedFiles?.length || 0) + (data.updatedFiles?.length || 0)
+      if (data.changed) {
+        setLegacyCleanupMsg(`Cleaned ${cleaned} legacy file(s). ${data.errors.length} error(s).`)
+        onToast?.(`Legacy proxy cleanup: ${cleaned} file(s) cleaned.`, 'success')
+      } else {
+        setLegacyCleanupMsg('No discontinued proxy config was found. You are on the stable direct-provider setup.')
+        onToast?.('No legacy proxy config found — already on stable setup.', 'info')
+      }
+      await loadConfig()
+    } catch (err) {
+      onToast?.(`Legacy cleanup failed: ${err.message}`, 'error')
+    }
+  }, [onToast])
+
+  const onCheckUpdatesClick = useCallback(() => {
+    onCheckForUpdate?.()
+  }, [onCheckForUpdate])
+
   if (!config) {
     return (
       <div className={styles.page}>
@@ -163,14 +276,150 @@ export default function SettingsView({ onToast }) {
       <div className={styles.pageHeader}>
         <h1 className={styles.pageTitle}>
           <IconSettings size={24} stroke={1.5} style={{ marginRight: 8, verticalAlign: 'middle' }} />
-          Provider Settings
+          Settings
         </h1>
         <p className={styles.pageSubtitle}>
-          Manage your API keys and provider configurations. Keys are stored locally in{' '}
-          <code>~/.free-coding-models.json</code>
+          API keys, theme, favorites mode, shell env, and update controls.
+          All settings are stored locally in <code>~/.free-coding-models.json</code>
+          and shared with the TUI.
         </p>
       </div>
 
+      {/* ── M2: global feature toggles ────────────────────────────────────── */}
+      {config && (
+        <section className={styles.featureSection}>
+          <h2 className={styles.sectionHeading}>⚙️ Global settings</h2>
+          <div className={styles.featureGrid}>
+            {/* Theme */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconSun size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Theme</div>
+                  <div className={styles.featureDesc}>Tri-state cycle. Auto follows your OS.</div>
+                </div>
+              </div>
+              <select
+                className={styles.select}
+                value={config.settings?.theme || 'auto'}
+                onChange={(e) => toggleFeature('theme', e.target.value)}
+              >
+                <option value="auto">Auto (OS)</option>
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+              </select>
+            </div>
+
+            {/* Favorites display mode */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconStar size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Favorites pinned + always visible</div>
+                  <div className={styles.featureDesc}>Favorites bypass filters and stay on top (TUI: Y key).</div>
+                </div>
+              </div>
+              <label className={styles.toggleSwitch}>
+                <input
+                  type="checkbox"
+                  checked={Boolean(config.settings?.favoritesPinnedAndSticky)}
+                  onChange={(e) => toggleFeature('favoritesPinnedAndSticky', e.target.checked)}
+                />
+                <span className={styles.toggleSlider} />
+              </label>
+            </div>
+
+            {/* Startup AI Speed Scan */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconBolt size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Run AI Speed Test on startup</div>
+                  <div className={styles.featureDesc}>Auto-fire the global benchmark right after launch (TUI: U → 'Enable').</div>
+                </div>
+              </div>
+              <label className={styles.toggleSwitch}>
+                <input
+                  type="checkbox"
+                  checked={Boolean(config.settings?.runAiSpeedTestOnStartup)}
+                  onChange={(e) => toggleFeature('runAiSpeedTestOnStartup', e.target.checked)}
+                />
+                <span className={styles.toggleSlider} />
+              </label>
+            </div>
+
+            {/* Shell env export */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconCircleCheck size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Export API keys to shell rc</div>
+                  <div className={styles.featureDesc}>Write NVIDIA_API_KEY / GROQ_API_KEY / … to your shell rc file.</div>
+                </div>
+              </div>
+              <label className={styles.toggleSwitch}>
+                <input
+                  type="checkbox"
+                  checked={Boolean(config.settings?.shellEnvEnabled)}
+                  onChange={(e) => setShellEnv(e.target.checked)}
+                />
+                <span className={styles.toggleSlider} />
+              </label>
+            </div>
+
+            {/* Update row */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconDownload size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Check for updates</div>
+                  <div className={styles.featureDesc}>
+                    The header chip turns green when a newer npm version is available.
+                    Use the 'Update now' button to install.
+                  </div>
+                </div>
+              </div>
+              <div className={styles.featureActions}>
+                <button
+                  className={styles.smallBtn}
+                  onClick={onCheckUpdatesClick}
+                >
+                  Check now
+                </button>
+                <button
+                  className={styles.smallBtn}
+                  onClick={() => onOpenChangelog?.(null)}
+                >
+                  <IconHistory size={13} stroke={1.5} /> Changelog
+                </button>
+              </div>
+            </div>
+
+            {/* Legacy proxy cleanup */}
+            <div className={styles.featureRow}>
+              <div className={styles.featureLabel}>
+                <IconRefresh size={16} stroke={1.5} />
+                <div>
+                  <div className={styles.featureTitle}>Cleanup discontinued proxy artifacts</div>
+                  <div className={styles.featureDesc}>
+                    Remove old config / env / service leftovers from the old multi-tool proxy.
+                  </div>
+                </div>
+              </div>
+              <button
+                className={styles.smallBtn}
+                onClick={runLegacyCleanup}
+              >
+                Run cleanup
+              </button>
+            </div>
+          </div>
+          {legacyCleanupMsg && (
+            <div className={styles.notice}>{legacyCleanupMsg}</div>
+          )}
+        </section>
+      )}
+
       <div className={styles.toolbar}>
         <div className={styles.toolbarSearch}>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -221,6 +470,20 @@ export default function SettingsView({ onToast }) {
 
               <div className={styles.cardBody}>
                 <div className={styles.cardContent}>
+                  {p.hasKey && testResults[key] && (
+                    <div className={`${styles.testBadge} ${styles[`test_${testResults[key].outcome}`] || ''}`}>
+                      {(() => {
+                        const meta = TEST_OUTCOME_META[testResults[key].outcome] || TEST_OUTCOME_META.fail
+                        const Icon = meta.icon
+                        return (
+                          <>
+                            <Icon size={12} stroke={1.5} />
+                            <span>Last test: {meta.label}{testResults[key].code ? ` (HTTP ${testResults[key].code})` : ''}</span>
+                          </>
+                        )
+                      })()}
+                    </div>
+                  )}
                   {p.hasKey && (
                     <div className={styles.keyGroup}>
                       <label className={styles.keyLabel}>Current API Key</label>
@@ -235,6 +498,16 @@ export default function SettingsView({ onToast }) {
                           <button className={styles.actionBtn} onClick={() => copyKey(key)} title="Copy">
                             <IconCopy size={14} stroke={1.5} />
                           </button>
+                          <button
+                            className={styles.actionBtn}
+                            onClick={() => testKey(key)}
+                            disabled={testingKeys.has(key)}
+                            title="Test this key against the provider (TUI: T key in Settings)"
+                            aria-label={`Test key for ${key}`}
+                          >
+                            {testingKeys.has(key) ? <span className={styles.testSpinner} /> : <IconBolt size={14} stroke={1.5} />}
+                            {testingKeys.has(key) ? 'Testing…' : 'Test'}
+                          </button>
                           <button className={`${styles.actionBtn} ${styles.actionBtnDanger}`} onClick={() => deleteKey(key)} title="Delete Key">
                             <IconTrash size={14} stroke={1.5} />
                           </button>

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/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>
+  )
+}