npm - free-coding-models - Versions diffs - 0.5.12 → 0.5.15 - Mend

free-coding-models 0.5.12 → 0.5.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/changelog/v0.5.13.md +23 -0
package/changelog/v0.5.15.md +17 -0
package/package.json +4 -3
package/src/tui/app.js +16 -4
package/src/tui/cli-help.js +87 -0
package/src/tui/key-handler.js +2 -14
package/src/tui/render-table.js +46 -26
package/src/tui/theme.js +70 -0
package/web/README.md +1 -1
package/web/dist/assets/index-BRqzsHVw.css +1 -0
package/web/dist/assets/index-CUYQh5_t.js +39 -0
package/web/dist/index.html +2 -2
package/web/server.js +83 -14
package/web/src/App.jsx +15 -1
package/web/src/components/dashboard/DetailPanel.jsx +1 -1
package/web/src/components/dashboard/DetailPanel.module.css +5 -0
package/web/src/components/dashboard/FilterBar.jsx +98 -58
package/web/src/components/dashboard/FilterBar.module.css +103 -33
package/web/src/components/dashboard/ProviderDropdown.jsx +156 -0
package/web/src/components/dashboard/ProviderDropdown.module.css +248 -0
package/web/src/components/help/HelpView.jsx +13 -0
package/web/src/components/playground/PlaygroundView.jsx +193 -12
package/web/src/components/playground/PlaygroundView.module.css +82 -0
package/web/src/components/router/RouterView.jsx +15 -6
package/web/vite.config.js +1 -1
package/web/dist/assets/index-Ce_pr2YF.js +0 -39
package/web/dist/assets/index-H9JWDRIh.css +0 -1

package/web/dist/index.html CHANGED Viewed

@@ -48,8 +48,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/assets/index-Ce_pr2YF.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-H9JWDRIh.css">
+  <script type="module" crossorigin src="/assets/index-CUYQh5_t.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BRqzsHVw.css">
 </head>
 <body>
   <div id="root"></div>

package/web/server.js CHANGED Viewed

@@ -1360,32 +1360,101 @@ async function handleRequest(req, res) {
       }
       case '/api/playground/chat': {
-        // 📖 Playground proxy: forwards a chat-completions request to the
-        // 📖 local router daemon and returns the response. Streams SSE
-        // 📖 events when stream: true is set. The web playground UI is just
-        // 📖 a thin client over this endpoint so the browser never talks to
-        // 📖 an external domain (no CORS, no exposed provider keys).
+        // 📖 Playground proxy: routes chat-completions requests either to
+        // 📖 the local router daemon (for "fcm" auto-router) or directly
+        // 📖 to the provider (for specific models). This way the playground
+        // 📖 works immediately with any "up" model, even without the daemon.
         if (req.method !== 'POST') { res.writeHead(405); res.end('Method Not Allowed'); return }
-        const port = await readDaemonPort()
-        if (!port) {
+        const body = await readJsonBody(req)
+        const wantsStream = body?.stream === true
+        const requestedModel = body?.model || 'fcm'
+        const isFcm = requestedModel === 'fcm'
+        // 📖 Resolve direct provider routing for non-fcm models.
+        // 📖 Format: "providerKey/modelId" → look up source URL + API key.
+        let directUrl = null
+        let directApiKey = null
+        let directModelId = null
+        if (!isFcm) {
+          const slashIdx = requestedModel.indexOf('/')
+          if (slashIdx > 0) {
+            const providerKey = requestedModel.slice(0, slashIdx)
+            const modelId = requestedModel.slice(slashIdx + 1)
+            const source = sources[providerKey]
+            if (source?.url) {
+              directApiKey = getApiKey(config, providerKey)
+              // 📖 Always resolve the URL so we can differentiate "no key"
+              // 📖 from "unknown model" in the error handler below.
+              let baseUrl = source.url
+              if (!baseUrl.includes('/chat/completions')) {
+                baseUrl = baseUrl.replace(/\/+$/, '') + '/v1/chat/completions'
+              }
+              directUrl = baseUrl
+              directModelId = modelId
+            }
+          }
+        }
+        // 📖 Decide routing: direct to provider (non-fcm, has key) or via daemon.
+        const useDirectRoute = !isFcm && directUrl && directApiKey
+        // 📖 If user picked a specific model but has no API key for it,
+        // 📖 tell them instead of falling through to the daemon 503.
+        if (!isFcm && directUrl && !directApiKey) {
+          const providerKey = requestedModel.slice(0, requestedModel.indexOf('/'))
+          sendJson(res, 401, { ok: false, error: `No API key configured for ${sources[providerKey]?.name || providerKey}. Add one in Settings to chat directly with this model.` })
+          return
+        }
+        // 📖 If user picked a specific model but we couldn't resolve it,
+        // 📖 tell them instead of falling through to the daemon 503.
+        if (!isFcm && !directUrl) {
+          sendJson(res, 404, { ok: false, error: `Could not resolve provider for model "${requestedModel}". Try selecting a different model or use the auto-router (fcm).` })
+          return
+        }
+        const upstreamUrl = useDirectRoute
+          ? directUrl
+          : `http://127.0.0.1:${await readDaemonPort()}/v1/chat/completions`
+        if (!useDirectRoute && !await readDaemonPort()) {
           sendJson(res, 503, { ok: false, error: 'Router daemon is not running. Start it from the Router card or with `free-coding-models --daemon-bg`.' })
           return
         }
-        const body = await readJsonBody(req)
-        const wantsStream = body?.stream === true
-        const upstreamUrl = `http://127.0.0.1:${port}/v1/chat/completions`
+        // 📖 Build the upstream payload. For direct routing, extract the
+        // 📖 actual model ID from the providerKey/modelId format.
+        const upstreamPayload = {
+          ...body,
+          stream: wantsStream,
+          model: useDirectRoute ? directModelId : requestedModel,
+        }
+        // 📖 Build headers: direct routing needs auth + any provider-specific
+        // 📖 headers. Daemon routing is just JSON content-type.
+        const upstreamHeaders = { 'Content-Type': 'application/json' }
+        if (useDirectRoute) {
+          // 📖 Most providers use standard Bearer auth. A few need extra
+          // 📖 headers (OpenRouter wants Referer + X-Title for ex).
+          upstreamHeaders['Authorization'] = `Bearer ${directApiKey}`
+          const providerKey = requestedModel.slice(0, requestedModel.indexOf('/'))
+          if (providerKey === 'openrouter') {
+            upstreamHeaders['HTTP-Referer'] = 'https://github.com/vava-nessa/free-coding-models'
+            upstreamHeaders['X-Title'] = 'free-coding-models'
+          }
+        }
         const controller = new AbortController()
         const timeout = setTimeout(() => controller.abort(), 120000)
         req.on('close', () => controller.abort())
         try {
           const upstreamResp = await fetch(upstreamUrl, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ ...body, stream: wantsStream, model: body?.model || 'fcm' }),
+            headers: upstreamHeaders,
+            body: JSON.stringify(upstreamPayload),
             signal: controller.signal,
           })
           if (wantsStream) {
-            // 📖 Pipe SSE events straight from the daemon to the browser.
+            // 📖 Pipe SSE events straight from the upstream to the browser.
             res.writeHead(upstreamResp.status, {
               'Content-Type': 'text/event-stream',
               'Cache-Control': 'no-cache',
@@ -1407,7 +1476,7 @@ async function handleRequest(req, res) {
             return
           }
           const json = await upstreamResp.json().catch(() => null)
-          sendJson(res, upstreamResp.status, json || { ok: false, error: 'Empty response from router' })
+          sendJson(res, upstreamResp.status, json || { ok: false, error: 'Empty response from upstream' })
           return
         } catch (err) {
           sendJson(res, 502, { ok: false, error: `Playground proxy failed: ${err.message || String(err)}` })

package/web/src/App.jsx CHANGED Viewed

@@ -171,11 +171,25 @@ export default function App() {
   } = useUpdateChecker({ onToast: addToast })
   // 📖 Build the provider list for the FilterBar dropdown.
+  // 📖 Build the provider list for the FilterBar dropdown with aggregated health.
+  // 📖 `hasKey` = at least one model has an API key configured.
+  // 📖 `anyUp` = at least one model with status 'up' (key works).
+  // 📖 These drive the colored indicator dot in the custom provider dropdown.
   const providers = useMemo(() => {
     const map = {}
     models.forEach((m) => {
-      if (!map[m.providerKey]) map[m.providerKey] = { key: m.providerKey, name: m.origin, count: 0 }
+      if (!map[m.providerKey]) {
+        map[m.providerKey] = {
+          key: m.providerKey,
+          name: m.origin,
+          count: 0,
+          hasKey: false,
+          anyUp: false,
+        }
+      }
       map[m.providerKey].count++
+      if (m.hasApiKey) map[m.providerKey].hasKey = true
+      if (m.status === 'up') map[m.providerKey].anyUp = true
     })
     return Object.values(map).sort((a, b) => a.name.localeCompare(b.name))
   }, [models])

package/web/src/components/dashboard/DetailPanel.jsx CHANGED Viewed

@@ -87,7 +87,7 @@ export default function DetailPanel({
   const compatible = isModelCompatibleWithTool(model.providerKey, toolMode)
   return (
-    <div className={styles.panel}>
+    <div className={`${styles.panel} ${styles.panelOpen}`}>
       <div className={styles.header}>
         <h3 className={styles.title}>{model.label}</h3>
         <button className={styles.closeBtn} onClick={onClose}>&times;</button>

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

@@ -13,6 +13,11 @@
   overflow-y: auto;
 }
+/* 📖 Slide-in when model is selected (parent passes a non-null model) */
+.panelOpen {
+  transform: translateX(0);
+}
 .header {
   display: flex;
   align-items: center;

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

@@ -5,10 +5,13 @@
  * 📖 + custom text filter chip with "X" clear + reset view button (N).
  * 📖 Each chip is a cycling button matching the TUI single-key behavior.
  * 📖 The "Next ping in Xs" countdown still shows the live status.
+ * 📖 Filter groups (Tier, Status, Verdict, Health) are collapsible by default
+ *     — click the trigger to expand the chip row, click again or outside to close.
  */
-import { useState, useEffect, useMemo } from 'react'
-import { IconRefresh, IconX, IconFilter, IconCircleCheck, IconAlertTriangle, IconActivity, IconEye, IconStar } from '@tabler/icons-react'
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
+import { IconRefresh, IconX, IconFilter, IconChevronDown } from '@tabler/icons-react'
 import { getToolMeta } from '../../../../src/core/tool-metadata.js'
+import ProviderDropdown from './ProviderDropdown.jsx'
 import styles from './FilterBar.module.css'
 // 📖 Chip sets match the TUI cycles 1:1 (see useFilter.js). Keep these in sync.
@@ -65,30 +68,84 @@ const PING_MODES = [
 function formatCountdown(ms) {
   if (ms == null) return null
-  const s = Math.max(0, Math.ceil(ms / 1000))
-  if (s === 1) return '1s'
-  if (s < 60) return `${s}s`
-  const m = Math.floor(s / 60)
-  const rem = s % 60
-  return `${m}m${rem > 0 ? rem + 's' : ''}`
+  const totalSec = Math.max(0, ms / 1000)
+  if (totalSec < 60) return `${totalSec.toFixed(2)}s`
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return `${m}m ${s.toFixed(2)}s`
 }
-function ChipRow({ items, value, onChange, label }) {
+/**
+ * 📖 FilterGroup — collapsible chip selector. Shows label + active value as a compact
+ *     trigger. Click to expand a dropdown with all options grouped as a segmented control.
+ *     Click outside or pick a value to collapse. Designed to keep the filter bar minimal
+ *     by default while exposing the full chip set on demand.
+ */
+function FilterGroup({ label, items, value, onChange, colorMap }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  const close = useCallback(() => setOpen(false), [])
+  useEffect(() => {
+    if (!open) return
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) close()
+    }
+    const keyHandler = (e) => { if (e.key === 'Escape') close() }
+    document.addEventListener('mousedown', handler)
+    document.addEventListener('keydown', keyHandler)
+    return () => {
+      document.removeEventListener('mousedown', handler)
+      document.removeEventListener('keydown', keyHandler)
+    }
+  }, [open, close])
+  const activeItem = items.find(i => i.key === value)
+  const activeLabel = activeItem?.label ?? value ?? 'All'
+  const isFiltered = value !== 'all'
   return (
-    <div className={styles.group}>
-      {label && <label className={styles.filterLabel}>{label}</label>}
-      <div className={styles.chipRow}>
-        {items.map((item) => (
-          <button
-            key={item.key}
-            className={`${styles.chip} ${value === item.key ? styles.chipActive : ''}`}
-            onClick={() => onChange(item.key)}
-            title={item.hint || item.label}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
+    <div className={styles.filterGroup} ref={ref}>
+      <button
+        className={`${styles.filterTrigger} ${isFiltered ? styles.filterTriggerActive : ''} ${open ? styles.filterTriggerExpanded : ''}`}
+        onClick={() => setOpen(!open)}
+        title={`${label}: ${activeLabel}`}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <span className={styles.filterTriggerLabel}>{label}</span>
+        <span className={styles.filterTriggerSep}>:</span>
+        <span className={styles.filterTriggerValue}>{activeLabel}</span>
+        <IconChevronDown
+          size={12}
+          stroke={2}
+          className={`${styles.filterTriggerChevron} ${open ? styles.chevronOpen : ''}`}
+        />
+      </button>
+      {open && (
+        <div className={styles.filterDropdown} role="listbox">
+          <div className={styles.filterChipRow}>
+            {items.map((item, i) => {
+              const active = value === item.key
+              const customColor = colorMap?.[item.key]
+              return (
+                <button
+                  key={item.key}
+                  role="option"
+                  aria-selected={active}
+                  className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
+                  style={active && customColor ? { '--chip-active-color': customColor } : {}}
+                  onClick={() => { onChange(item.key); close() }}
+                  title={item.hint || item.label}
+                >
+                  {item.label}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -121,7 +178,7 @@ export default function FilterBar({
       setCountdown(rem > 0 ? rem : 0)
     }
     tick()
-    const id = setInterval(tick, 1000)
+    const id = setInterval(tick, 100)
     return () => clearInterval(id)
   }, [nextPingAt])
@@ -167,10 +224,10 @@ export default function FilterBar({
         </div>
       )}
-      <ChipRow label="Tier" items={TIERS} value={filterTier} onChange={setFilterTier} />
-      <ChipRow label="Status" items={STATUSES} value={filterStatus} onChange={setFilterStatus} />
-      <ChipRow label="Verdict" items={VERDICTS} value={filterVerdict} onChange={setFilterVerdict} />
-      <ChipRow label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
+      <FilterGroup label="Tier" items={TIERS} value={filterTier} onChange={setFilterTier} />
+      <FilterGroup label="Status" items={STATUSES} value={filterStatus} onChange={setFilterStatus} />
+      <FilterGroup label="Verdict" items={VERDICTS} value={filterVerdict} onChange={setFilterVerdict} />
+      <FilterGroup label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
       <div className={styles.group}>
         <label className={styles.filterLabel} htmlFor="visibility-select">Visibility</label>
@@ -189,19 +246,12 @@ export default function FilterBar({
       </div>
       <div className={styles.group}>
-        <label className={styles.filterLabel} htmlFor="provider-select">Provider</label>
-        <select
-          id="provider-select"
-          className={styles.providerSelect}
+        <label className={styles.filterLabel}>Provider</label>
+        <ProviderDropdown
+          providers={providers}
           value={filterProvider}
-          onChange={(e) => setFilterProvider(e.target.value)}
-          aria-label="Filter by provider"
-        >
-          <option value="all">All Providers</option>
-          {providers.map((p) => (
-            <option key={p.key} value={p.key}>{p.name} ({p.count})</option>
-          ))}
-        </select>
+          onChange={setFilterProvider}
+        />
       </div>
       <div className={styles.group}>
@@ -246,23 +296,14 @@ export default function FilterBar({
         </button>
       )}
-      {/* ── Ping interval selector ── */}
-      <div className={styles.group}>
-        <label className={styles.filterLabel}>Ping</label>
-        <div className={styles.pingRow}>
-          {PING_MODES.map((m) => (
-            <button
-              key={m.key}
-              className={`${styles.pingBtn} ${pingMode === m.key ? styles.pingBtnActive : ''}`}
-              style={pingMode === m.key ? { '--ping-active-color': m.color } : {}}
-              onClick={() => setPingMode(m.key)}
-              title={`${m.interval} interval`}
-            >
-              {m.label}
-            </button>
-          ))}
-        </div>
-      </div>
+      {/* ── Ping interval selector (collapsible group) ── */}
+      <FilterGroup
+        label="Ping"
+        items={PING_MODES}
+        value={pingMode}
+        onChange={setPingMode}
+        colorMap={Object.fromEntries(PING_MODES.map(m => [m.key, m.color]))}
+      />
       {/* ── Next ping countdown (TUI parity: always show the delay) ──
           📖 The TUI footer always renders `next : Xs` regardless of whether
@@ -275,7 +316,6 @@ export default function FilterBar({
         <div className={styles.nextPing} title="Next ping countdown">
           <span className={styles.nextPingLabel}>next ping in</span>
           <span className={styles.nextPingTime}>{countdownDisplay ?? '—'}</span>
-          {isPinging && <span className={styles.pingingDot} aria-hidden="true" />}
         </div>
       </div>
     </section>

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

@@ -24,19 +24,112 @@
   white-space: nowrap;
 }
-/* ── Chip rows (TUI cycle behavior) ── */
-.chipRow { display: flex; gap: 3px; }
-.chip {
-  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+/* ── Collapsible filter groups (Tier, Status, Verdict, Health) ── */
+.filterGroup {
+  position: relative;
+}
+.filterTrigger {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11px; font-family: var(--font-mono);
   padding: 4px 8px; border-radius: 5px;
-  border: 1px solid var(--color-border); background: var(--color-surface);
-  color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  cursor: pointer; transition: all 150ms;
+  white-space: nowrap;
+  user-select: none;
+}
+.filterTrigger:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+.filterTriggerActive {
+  border-color: var(--color-accent);
+  color: var(--color-text);
+}
+.filterTriggerExpanded {
+  border-color: var(--color-accent);
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 101;
+}
+.filterTriggerLabel {
+  font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.5px;
+  color: var(--color-text-muted);
+}
+.filterTriggerSep {
+  color: var(--color-border);
+  margin: 0 -2px;
+}
+.filterTriggerValue {
+  font-weight: 700;
+  color: var(--color-text);
+}
+.filterTriggerActive .filterTriggerValue {
+  color: var(--color-accent);
+}
+.filterTriggerChevron {
+  flex-shrink: 0;
+  transition: transform 200ms ease;
+  opacity: 0.6;
+}
+.chevronOpen {
+  transform: rotate(180deg);
+  opacity: 1;
+}
+.filterDropdown {
+  position: absolute; top: 100%; left: 0;
+  z-index: 100;
+  padding: 6px 8px 7px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-accent);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  min-width: max-content;
+}
+.filterChipRow {
+  display: flex;
+  gap: 0;
+}
+.filterChip {
+  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
+  padding: 4px 9px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+  color: var(--color-text-muted);
+  cursor: pointer; transition: all 120ms;
   white-space: nowrap;
+  margin-left: -1px;
 }
-.chip:hover { background: var(--color-bg-hover); color: var(--color-text); }
-.chipActive {
-  background: var(--color-accent) !important; color: var(--color-bg) !important;
-  border-color: var(--color-accent) !important; font-weight: 700;
+.filterChip:first-child {
+  border-radius: 4px 0 0 4px;
+  margin-left: 0;
+}
+.filterChip:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.filterChip:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+  z-index: 1;
+}
+.filterChipActive {
+  background: var(--chip-active-color, var(--color-accent)) !important;
+  color: #fff !important;
+  border-color: var(--chip-active-color, var(--color-accent)) !important;
+  z-index: 2;
+  font-weight: 700;
 }
 /* ── Select inputs (provider, visibility) ── */
@@ -121,23 +214,6 @@
 }
 .customFilterClear:hover { background: var(--color-accent); color: var(--color-bg); }
-/* ── Ping interval selector ── */
-.pingRow { display: flex; gap: 3px; }
-.pingBtn {
-  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
-  padding: 4px 8px; border-radius: 5px;
-  border: 1px solid var(--color-border); background: var(--color-surface);
-  color: var(--color-text-muted); cursor: pointer; transition: all 150ms;
-  white-space: nowrap;
-}
-.pingBtn:hover { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-text-muted); }
-.pingBtnActive {
-  background: var(--color-bg-hover) !important;
-  color: var(--ping-active-color, var(--color-accent)) !important;
-  border-color: var(--ping-active-color, var(--color-accent)) !important;
-  font-weight: 700;
-}
 /* ── Next ping countdown (TUI parity) ── */
 .nextPing {
   display: flex; align-items: center; gap: 6px;
@@ -157,12 +233,6 @@
   text-align: right;
   font-variant-numeric: tabular-nums;
 }
-.pingingDot {
-  width: 7px; height: 7px; border-radius: 50%;
-  background: #ff4466; animation: pulseDot 0.6s ease-in-out infinite;
-  flex-shrink: 0;
-}
 @keyframes pulseDot {
   0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
   50% { box-shadow: 0 0 0 6px transparent; }