free-coding-models 0.5.86 → 0.5.88

package/web/src/components/launch/IncompatibleFallbackModal.jsx

@@ -1,69 +0,0 @@
-/**
- * @file web/src/components/launch/IncompatibleFallbackModal.jsx
- * @description Web equivalent of the TUI incompatible-fallback overlay. Lets the
- * user switch to a compatible endpoint target or install a similar model endpoint.
- *
- * @functions IncompatibleFallbackModal → switch-tool and similar-model picker
- * @exports IncompatibleFallbackModal
- */
-import { IconAlertTriangle, IconPlugConnected, IconTool, IconX } from '@tabler/icons-react'
-import {
-  findSimilarCompatibleModels,
-  getCompatibleTools,
-  getToolMeta,
-} from '../../../../src/core/tool-metadata.js'
-import styles from './LaunchModal.module.css'
-
-export default function IncompatibleFallbackModal({ request, models = [], onClose, onSwitchToolLaunch, onLaunchSimilar }) {
-  if (!request?.model) return null
-  const { model, toolMode } = request
-  const activeMeta = getToolMeta(toolMode)
-  const compatibleTools = getCompatibleTools(model.providerKey)
-  const similar = findSimilarCompatibleModels(model.sweScore, toolMode, models, 3)
-    .filter((candidate) => candidate.modelId !== model.modelId || candidate.providerKey !== model.providerKey)
-
-  return (
-    <div className={styles.backdrop} onClick={onClose}>
-      <div className={styles.modalWide} onClick={(event) => event.stopPropagation()}>
-        <div className={styles.header}>
-          <div>
-            <p className={styles.eyebrow}>Incompatible model</p>
-            <h2><IconAlertTriangle size={18} /> {model.label} cannot be installed in {activeMeta.emoji} {activeMeta.label}</h2>
-          </div>
-          <button className={styles.close} onClick={onClose} aria-label="Close"><IconX size={18} /></button>
-        </div>
-        <div className={styles.grid}>
-          <section className={styles.card}>
-            <h3><IconTool size={15} /> Switch tool</h3>
-            <p className={styles.muted}>This provider can be configured in these tools. Pick one and FCM installs the endpoint.</p>
-            <div className={styles.stack}>
-              {compatibleTools.map((mode) => {
-                const meta = getToolMeta(mode)
-                return (
-                  <button key={mode} className={styles.option} onClick={() => onSwitchToolLaunch?.(mode, model)}>
-                    <span>{meta.emoji}</span>
-                    <strong>{meta.label}</strong>
-                  </button>
-                )
-              })}
-            </div>
-          </section>
-          <section className={styles.card}>
-            <h3><IconPlugConnected size={15} /> Similar models</h3>
-            <p className={styles.muted}>Or keep {activeMeta.label} and install a compatible model close to the same SWE score.</p>
-            <div className={styles.stack}>
-              {similar.length === 0 && <p className={styles.muted}>No close compatible alternative found yet.</p>}
-              {similar.map((candidate) => (
-                <button key={`${candidate.providerKey}/${candidate.modelId}`} className={styles.option} onClick={() => onLaunchSimilar?.(candidate)}>
-                  <span>{candidate.tier}</span>
-                  <strong>{candidate.label}</strong>
-                  <small>{candidate.providerKey} · {candidate.sweScore}</small>
-                </button>
-              ))}
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
-  )
-}

package/web/src/components/launch/LaunchButton.jsx

@@ -1,30 +0,0 @@
-/**
- * @file web/src/components/launch/LaunchButton.jsx
- * @description Reusable M3 endpoint install action for table rows, DetailPanel, and Recommend results.
- * @functions LaunchButton → renders a plug button that installs the selected model endpoint
- * @exports LaunchButton
- */
-import { IconPlugConnected } from '@tabler/icons-react'
-import { getToolMeta } from '../../../../src/core/tool-metadata.js'
-import styles from './LaunchButton.module.css'
-
-export default function LaunchButton({ model, toolMode = 'opencode', onLaunch, variant = 'default', disabled = false }) {
-  const meta = getToolMeta(toolMode)
-  const label = variant === 'icon' ? 'Install endpoint' : `Install endpoint in ${meta.emoji} ${meta.label}`
-  return (
-    <button
-      type="button"
-      className={`${styles.button} ${styles[variant] || ''}`}
-      disabled={disabled || !model}
-      onClick={(event) => {
-        event.stopPropagation()
-        if (model) onLaunch?.(model)
-      }}
-      title={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Select a model first'}
-      aria-label={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Install selected model endpoint'}
-    >
-      <IconPlugConnected size={variant === 'icon' ? 13 : 14} stroke={1.8} />
-      {variant !== 'icon' && <span>{label}</span>}
-    </button>
-  )
-}

package/web/src/components/launch/LaunchButton.module.css

@@ -1,35 +0,0 @@
-/** @file web/src/components/launch/LaunchButton.module.css */
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding: 8px 12px;
-  border: 1px solid rgba(61, 220, 132, 0.45);
-  border-radius: 6px;
-  background: rgba(61, 220, 132, 0.12);
-  color: #3ddc84;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 800;
-  font-family: var(--font-mono);
-  transition: transform 120ms, background 120ms, border-color 120ms;
-}
-.button:hover:not(:disabled) {
-  transform: translateY(-1px);
-  background: rgba(61, 220, 132, 0.20);
-  border-color: rgba(61, 220, 132, 0.75);
-}
-.button:disabled { opacity: 0.45; cursor: not-allowed; }
-.icon {
-  width: 26px;
-  height: 24px;
-  padding: 0;
-  opacity: 0.72;
-}
-.icon:hover:not(:disabled) { opacity: 1; }
-:global([data-theme="light"]) .button {
-  color: #087d42;
-  border-color: rgba(8, 125, 66, 0.35);
-  background: rgba(8, 125, 66, 0.08);
-}

package/web/src/components/launch/LaunchModal.module.css

@@ -1,125 +0,0 @@
-/** @file web/src/components/launch/LaunchModal.module.css */
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: rgba(0, 0, 0, 0.62);
-  backdrop-filter: blur(4px);
-}
-.modal,
-.modalWide {
-  width: min(560px, 96vw);
-  max-height: min(760px, 92vh);
-  overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 14px;
-  background: var(--color-bg-elevated);
-  color: var(--color-text);
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
-}
-.modalWide { width: min(920px, 96vw); }
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 20px 22px;
-  border-bottom: 1px solid var(--color-border);
-}
-.header h2 {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 4px 0 0;
-  font-size: 18px;
-}
-.eyebrow {
-  margin: 0;
-  color: var(--color-accent);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-  letter-spacing: .9px;
-}
-.close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: 1px solid var(--color-border);
-  border-radius: 7px;
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  cursor: pointer;
-}
-.close:hover { color: var(--color-text); background: var(--color-bg-hover); }
-.body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
-.command {
-  display: block;
-  padding: 12px;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  background: var(--color-surface);
-  color: var(--color-accent);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.note,
-.muted { color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
-.docs { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font-weight: 700; text-decoration: none; }
-.error { color: #ff5a7a; font-weight: 700; }
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 16px 22px 20px;
-  border-top: 1px solid var(--color-border);
-}
-.primary,
-.secondary,
-.option {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  cursor: pointer;
-  font-weight: 800;
-}
-.primary {
-  padding: 9px 14px;
-  background: var(--color-accent);
-  color: var(--color-bg);
-  border-color: var(--color-accent);
-}
-.primary:disabled { opacity: .55; cursor: not-allowed; }
-.secondary {
-  padding: 9px 14px;
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
-.card {
-  padding: 16px;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  background: var(--color-surface);
-}
-.card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 14px; }
-.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
-.option {
-  width: 100%;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  text-align: left;
-}
-.option:hover { border-color: var(--color-accent); background: var(--color-bg-hover); }
-.option small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
-@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

package/web/src/components/layout/Footer.jsx

@@ -1,19 +0,0 @@
-/**
- * @file web/src/components/layout/Footer.jsx
- * @description Simple footer with author credit and links.
- */
-import styles from './Footer.module.css'
-
-export default function Footer() {
-  return (
-    <footer className={styles.footer}>
-      <div className={styles.left}>
-        by <a href="https://vavanessa.dev" target="_blank" rel="noopener">Vava-Nessa</a>
-      </div>
-      <div className={styles.right}>
-        <a href="https://github.com/vava-nessa/free-coding-models" target="_blank" rel="noopener">GitHub</a>
-        <a href="https://discord.gg/ZTNFHvvCkU" target="_blank" rel="noopener">Discord</a>
-      </div>
-    </footer>
-  )
-}

package/web/src/components/layout/Footer.module.css

@@ -1,10 +0,0 @@
-.footer {
-  position: relative; z-index: 1;
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 16px 24px;
-  border-top: 1px solid var(--color-border);
-  font-size: 12px; color: var(--color-text-dim);
-}
-.left a, .right a { color: var(--color-text-dim); text-decoration: none; }
-.left a:hover, .right a:hover { color: var(--color-accent); }
-.right { display: flex; gap: 16px; }

package/web/src/components/layout/Header.jsx

@@ -1,265 +0,0 @@
-/**
- * @file web/src/components/layout/Header.jsx
- * @description Top header bar — global navigation + search + actions.
- * 📖 Layout refactor (M1): no more left sidebar. All navigation lives here.
- * 📖 - Always-visible nav buttons: Dashboard, Settings, Analytics, Recommend, Router
- * 📖 - Overflow menu (kebab): Help, Changelog, Install Endpoints, Installed Models
- * 📖 - Right side: ⌘K (command palette), AI Latency, theme, export
- * 📖 Each unimplemented feature shows a friendly "Coming in M2/M3/M4" toast so
- * 📖 the menu structure is honest and complete from day one.
- */
-import { useEffect, useRef, useState } from 'react'
-import {
-  IconBolt, IconSearch, IconDownload, IconSettings, IconMoon, IconSun,
-  IconPlayerPlay, IconCommand, IconLayoutDashboard, IconActivity,
-  IconSparkles, IconRoute, IconDots, IconQuestionMark, IconHistory,
-  IconPlug, IconFolders, IconMenu2, IconMessageChatbot,
-} from '@tabler/icons-react'
-import ToolPicker from '../tools/ToolPicker.jsx'
-import styles from './Header.module.css'
-
-// 📖 Top-level nav items — always visible as buttons. Inlined here so the
-// 📖 order, icon, and "coming soon" milestone are colocated with the
-// 📖 rendering code. When a view ships, remove the `comingIn` field.
-const NAV_ITEMS = [
-  { id: 'dashboard',         label: 'Dashboard',          icon: IconLayoutDashboard },
-  { id: 'router',            label: 'Router',             icon: IconRoute },
-  { id: 'playground',        label: 'Playground',         icon: IconMessageChatbot },
-  { id: 'help',              label: 'Help',               icon: IconQuestionMark },
-  { id: 'install-endpoints', label: 'Install Endpoints',  icon: IconPlug },
-]
-
-// 📖 Overflow menu items
-const MENU_ITEMS = [
-  { id: 'analytics',         label: 'Analytics',          icon: IconActivity },
-  { id: 'recommend',         label: 'Recommend',          icon: IconSparkles },
-  { id: 'changelog',         label: 'Changelog',          icon: IconHistory },
-  { id: 'installed-models',  label: 'Installed Models',   icon: IconFolders },
-]
-
-export default function Header({
-  searchQuery, onSearchChange,
-  currentView, onNavigate,
-  onToggleTheme, onOpenExport, onOpenCommandPalette,
-  onBenchmark, benchmarkRunning, benchmarkTotal, benchmarkCompleted,
-  modelsCount, theme, onToast,
-  toolMode = 'opencode', onSetToolMode, onCycleToolMode,
-  updateSlot = null,
-}) {
-  const [menuOpen, setMenuOpen] = useState(false)
-  const [mobileNavOpen, setMobileNavOpen] = useState(false)
-  const menuRef = useRef(null)
-
-  // 📖 Close the overflow menu on outside click or Esc.
-  useEffect(() => {
-    if (!menuOpen && !mobileNavOpen) return
-    const onClick = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false)
-    }
-    const onKey = (e) => {
-      if (e.key === 'Escape') { setMenuOpen(false); setMobileNavOpen(false) }
-    }
-    document.addEventListener('mousedown', onClick)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onClick)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [menuOpen, mobileNavOpen])
-
-  const handleNavClick = (item) => {
-    if (item.comingIn) {
-      onToast?.(`${item.label} arrives in milestone ${item.comingIn}.`, 'info')
-      return
-    }
-    onNavigate(item.id)
-    setMobileNavOpen(false)
-  }
-
-  const handleMenuClick = (item) => {
-    setMenuOpen(false)
-    if (item.comingIn) {
-      onToast?.(`${item.label} arrives in milestone ${item.comingIn}.`, 'info')
-      return
-    }
-    onNavigate(item.id)
-  }
-
-  return (
-    <header className={styles.header}>
-      <div className={styles.left}>
-        <div className={styles.logo} onClick={() => onNavigate('dashboard')} style={{ cursor: 'pointer' }}>
-          <svg className={styles.logoIconSvg} width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4 5L11 12L4 19" stroke="var(--color-brand)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M14 5V19M14 5H21M14 11H18" stroke="var(--color-brand)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-          <span className={styles.logoText}>
-            <span className={styles.logoTextHighlight}>free</span>
-            <span>-coding-models</span>
-            <span className={styles.logoTextHighlight}>_</span>
-          </span>
-        </div>
-        <span className={styles.version}>v{__APP_VERSION__}</span>
-
-        {/* 📖 M5: Hamburger for narrow viewports (never a sidebar). Shows a
-           dropdown with all nav + overflow items on mobile. */}
-        <button
-          className={styles.hamburgerBtn}
-          onClick={() => setMobileNavOpen((o) => !o)}
-          aria-label="Navigation menu"
-          aria-expanded={mobileNavOpen}
-          aria-haspopup="true"
-        >
-          <IconMenu2 size={18} stroke={1.5} />
-        </button>
-        {mobileNavOpen && (
-          <div className={styles.mobileNav} role="menu">
-            {NAV_ITEMS.map((item) => {
-              const Icon = item.icon
-              return (
-                <button
-                  key={item.id}
-                  className={`${styles.mobileNavItem} ${currentView === item.id ? styles.mobileNavActive : ''}`}
-                  onClick={() => handleNavClick(item)}
-                  role="menuitem"
-                >
-                  <Icon size={16} stroke={1.5} />
-                  <span>{item.label}</span>
-                </button>
-              )
-            })}
-            <div className={styles.mobileNavDivider} />
-            {MENU_ITEMS.map((item) => {
-              const Icon = item.icon
-              return (
-                <button
-                  key={item.id}
-                  className={styles.mobileNavItem}
-                  onClick={() => handleMenuClick(item)}
-                  role="menuitem"
-                >
-                  <Icon size={16} stroke={1.5} />
-                  <span>{item.label}</span>
-                </button>
-              )
-            })}
-          </div>
-        )}
-
-        {/* Always-visible primary nav (replaces the old left sidebar) */}
-        <nav className={styles.nav} aria-label="Primary">
-          {NAV_ITEMS.map((item) => {
-            const Icon = item.icon
-            const isActive = currentView === item.id
-            return (
-              <button
-                key={item.id}
-                className={`${styles.navBtn} ${isActive ? styles.navBtnActive : ''}`}
-                onClick={() => handleNavClick(item)}
-                title={item.comingIn ? `${item.label} — coming in ${item.comingIn}` : item.label}
-                aria-current={isActive ? 'page' : undefined}
-              >
-                <Icon size={14} stroke={1.5} />
-                <span>{item.label}</span>
-                {item.comingIn && <span className={styles.comingBadge}>{item.comingIn}</span>}
-              </button>
-            )
-          })}
-
-          {/* Overflow menu (kebab) — hidden features & occasional flows */}
-          <div className={styles.menuWrap} ref={menuRef}>
-            <button
-              className={`${styles.navBtn} ${styles.menuTrigger} ${MENU_ITEMS.some((m) => m.id === currentView) ? styles.navBtnActive : ''}`}
-              onClick={() => setMenuOpen((o) => !o)}
-              title="More features"
-              aria-label="More features"
-              aria-haspopup="true"
-              aria-expanded={menuOpen}
-            >
-              <IconDots size={16} stroke={1.5} />
-            </button>
-            {menuOpen && (
-              <div className={styles.menuPopover} role="menu">
-                {MENU_ITEMS.map((item) => {
-                  const Icon = item.icon
-                  const isActive = currentView === item.id
-                  return (
-                    <button
-                      key={item.id}
-                      className={`${styles.menuItem} ${isActive ? styles.menuItemActive : ''}`}
-                      onClick={() => handleMenuClick(item)}
-                      role="menuitem"
-                      aria-current={isActive ? 'page' : undefined}
-                    >
-                      <Icon size={14} stroke={1.5} />
-                      <span>{item.label}</span>
-                      {item.comingIn && <span className={styles.comingBadge}>{item.comingIn}</span>}
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </nav>
-      </div>
-
-      <div className={styles.right}>
-        <button
-          className={`${styles.navBtn} ${currentView === 'settings' ? styles.navBtnActive : ''}`}
-          onClick={() => onNavigate('settings')}
-          title="Settings"
-          aria-current={currentView === 'settings' ? 'page' : undefined}
-          style={{ marginRight: '2px' }}
-        >
-          <IconSettings size={14} stroke={1.5} />
-          <span>Settings</span>
-        </button>
-
-        <ToolPicker
-          toolMode={toolMode}
-          onSetToolMode={onSetToolMode}
-          onCycleToolMode={onCycleToolMode}
-        />
-
-        {/* ⌘K — the only global keyboard shortcut, opens the command palette */}
-        <button
-          className={styles.cmdkBtn}
-          onClick={onOpenCommandPalette}
-          title="Command palette (⌘K / Ctrl+P)"
-          aria-label="Open command palette (⌘K)"
-        >
-          <IconCommand size={14} stroke={1.5} />
-          <span className={styles.cmdkLabel}>⌘K</span>
-        </button>
-
-        <button
-          className={`${styles.benchmarkBtn} ${benchmarkRunning ? styles.benchmarkActive : ''}`}
-          onClick={onBenchmark}
-          disabled={benchmarkRunning}
-          title={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted}/${benchmarkTotal}` : `Run AI Latency benchmark on ${modelsCount} visible models`}
-          aria-label={benchmarkRunning ? `AI Speed Test running — ${benchmarkCompleted} of ${benchmarkTotal} complete` : 'AI Latency benchmark'}
-        >
-          <IconPlayerPlay size={14} stroke={1.5} />
-          {benchmarkRunning ? (
-            <span className={styles.benchmarkRunning}>
-              <span className={styles.spinner} />
-              RUN {benchmarkCompleted}/{benchmarkTotal}
-            </span>
-          ) : (
-            <span>AI Latency</span>
-          )}
-        </button>
-
-        {/* 📖 M2: update chip slot. Hidden when no update is available. */}
-        {updateSlot}
-
-        <button className={styles.iconBtn} onClick={onToggleTheme} title={`Theme: ${theme} (click to cycle auto / dark / light)`} aria-label={`Theme: ${theme}. Click to cycle.`}>
-          {theme === 'light' ? <IconMoon size={16} stroke={1.5} /> : <IconSun size={16} stroke={1.5} />}
-        </button>
-        <button className={styles.iconBtn} onClick={onOpenExport} title="Export Data" aria-label="Export model data">
-          <IconDownload size={16} stroke={1.5} />
-        </button>
-      </div>
-    </header>
-  )
-}