free-coding-models 0.5.5 → 0.5.8

package/web/src/components/router/RouterView.module.css

@@ -0,0 +1,357 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.15s ease;
+}
+
+.modal {
+  background: var(--bg-primary, #0f0f17);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 12px;
+  width: 720px;
+  max-width: 95vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border, #1e1e2e);
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #888);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  &:hover { background: var(--bg-hover, #1a1a2e); color: var(--text-primary, #e0e0e0); }
+}
+
+.body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Hero Card */
+.heroCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-radius: 10px;
+  margin-bottom: 16px;
+}
+
+.heroRunning {
+  background: linear-gradient(135deg, rgba(0, 200, 100, 0.08), rgba(0, 200, 100, 0.02));
+  border: 1px solid rgba(0, 200, 100, 0.2);
+}
+
+.heroStopped {
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+}
+
+.heroLeft {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.heroStatus {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dotGreen {
+  background: #00c864;
+  box-shadow: 0 0 6px rgba(0, 200, 100, 0.4);
+}
+
+.dotGray {
+  background: #555;
+}
+
+.heroLabel {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.heroMeta {
+  font-size: 12px;
+  color: var(--text-muted, #888);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.heroActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.startBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #00c864;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  &:hover { background: #00d874; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.stopBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #dc3545;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  &:hover { background: #e04555; }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.refreshBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  color: var(--text-muted, #888);
+  cursor: pointer;
+  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
+}
+
+/* Quick Setup */
+.quickSetup {
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #aaa);
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.quickRows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.quickRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.quickLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #888);
+  min-width: 60px;
+  text-transform: uppercase;
+}
+
+.quickValue {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary, #e0e0e0);
+  background: var(--bg-primary, #0f0f17);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'SF Mono', monospace;
+}
+
+.copyBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #888);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
+}
+
+/* Probe Mode */
+.section {
+  margin-bottom: 16px;
+}
+
+.probeModes {
+  display: flex;
+  gap: 8px;
+}
+
+.probeBtn {
+  padding: 6px 14px;
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 6px;
+  background: var(--bg-secondary, #14141f);
+  color: var(--text-secondary, #aaa);
+  font-size: 12px;
+  cursor: pointer;
+  text-transform: capitalize;
+  &:hover { border-color: var(--text-muted, #888); }
+}
+
+.probeActive {
+  background: rgba(0, 200, 100, 0.1);
+  border-color: rgba(0, 200, 100, 0.3);
+  color: #00c864;
+  font-weight: 600;
+}
+
+/* Model Health */
+.modelList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modelRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg-secondary, #14141f);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.modelPriority {
+  color: var(--text-muted, #888);
+  min-width: 22px;
+  font-weight: 600;
+}
+
+.modelName {
+  flex: 1;
+  color: var(--text-primary, #e0e0e0);
+  font-family: 'SF Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modelScore {
+  color: var(--text-muted, #888);
+  min-width: 40px;
+  text-align: right;
+}
+
+.modelLatency {
+  color: var(--text-muted, #888);
+  min-width: 50px;
+  text-align: right;
+}
+
+.circuitBadge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 70px;
+  text-align: center;
+}
+
+.circuitClosed { background: rgba(0, 200, 100, 0.15); color: #00c864; }
+.circuitOpen { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
+.circuitHalfOpen { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
+.circuitAuth { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
+.circuitUnknown { background: rgba(128, 128, 128, 0.15); color: #888; }
+
+/* Request Log */
+.logList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.logRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-family: 'SF Mono', monospace;
+}
+
+.logOk { color: #00c864; min-width: 28px; }
+.logErr { color: #dc3545; min-width: 28px; }
+.logModel { color: var(--text-secondary, #aaa); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.logLatency { color: var(--text-muted, #888); min-width: 50px; text-align: right; }
+.logTokens { color: var(--text-muted, #888); min-width: 60px; text-align: right; }
+.logFailover {
+  font-size: 9px;
+  padding: 1px 4px;
+  background: rgba(255, 193, 7, 0.15);
+  color: #ffc107;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

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>