npm - free-coding-models - Versions diffs - 0.5.14 → 0.5.16 - Mend

free-coding-models 0.5.14 → 0.5.16

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 (34) hide show

package/changelog/v0.5.12.md +86 -2
package/changelog/v0.5.13.md +19 -53
package/changelog/v0.5.15.md +17 -0
package/changelog/v0.5.16.md +15 -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-avN2GM3H.css +1 -0
package/web/dist/assets/index-vsysCImz.js +41 -0
package/web/dist/index.html +6 -2
package/web/index.html +4 -0
package/web/server.js +249 -15
package/web/src/App.jsx +46 -15
package/web/src/components/dashboard/DetailPanel.jsx +1 -1
package/web/src/components/dashboard/DetailPanel.module.css +5 -0
package/web/src/components/dashboard/ExpandedDetailRow.jsx +464 -0
package/web/src/components/dashboard/ExpandedDetailRow.module.css +347 -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/ModelTable.jsx +49 -29
package/web/src/components/dashboard/ModelTable.module.css +12 -0
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-Bzqz7KbT.js +0 -39
package/web/dist/assets/index-H9JWDRIh.css +0 -1

package/web/dist/index.html CHANGED Viewed

@@ -48,10 +48,14 @@
   <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-Bzqz7KbT.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-H9JWDRIh.css">
+  <script type="module" crossorigin src="/assets/index-vsysCImz.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-avN2GM3H.css">
 </head>
 <body>
   <div id="root"></div>
+  <!-- 📖 PostHog analytics — privacy-first, self-hosted option available -->
+  <script>
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.",".js."),function(t,e,o,n){var i,s;for(n=function(t,e){return t[e]},s=e.split("."),i=0;i<s.length-1;i++)n=n(s[i],t);(a=n[s.pop()])&&a.apply(t,[].slice.call(arguments,0))}(e,"5.0.0")},e.init('phc_PLACEHOLDER_REPLACE_WITH_YOUR_KEY',{api_host:'https://us.i.posthog.com'}))}(document,window.posthog||[]);
+  </script>
 </body>
 </html>

package/web/index.html CHANGED Viewed

@@ -52,5 +52,9 @@
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
+  <!-- 📖 PostHog analytics — privacy-first, self-hosted option available -->
+  <script>
+    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.",".js."),function(t,e,o,n){var i,s;for(n=function(t,e){return t[e]},s=e.split("."),i=0;i<s.length-1;i++)n=n(s[i],t);(a=n[s.pop()])&&a.apply(t,[].slice.call(arguments,0))}(e,"5.0.0")},e.init('phc_PLACEHOLDER_REPLACE_WITH_YOUR_KEY',{api_host:'https://us.i.posthog.com'}))}(document,window.posthog||[]);
+  </script>
 </body>
 </html>

package/web/server.js CHANGED Viewed

@@ -45,7 +45,7 @@ import {
   getAvg, getVerdict, getUptime, getP95, getJitter,
   getStabilityScore,
 } from '../src/core/utils.js'
-import { benchmarkModel, BENCHMARK_TIMEOUT_MS } from '../src/core/benchmark.js'
+import { benchmarkModel, BENCHMARK_TIMEOUT_MS, BENCHMARK_PROMPT } from '../src/core/benchmark.js'
 import { getInstallTargetModes, installProviderEndpoints, getConfiguredInstallableProviders, getProviderCatalogModels } from '../src/core/endpoint-installer.js'
 import { isModelCompatibleWithTool } from '../src/core/tool-metadata.js'
 import { sendUsageTelemetry } from '../src/core/telemetry.js'
@@ -1030,6 +1030,171 @@ async function handleRequest(req, res) {
         return
       }
+      case '/api/benchmark-stream': {
+        if (req.method !== 'POST') {
+          res.writeHead(405)
+          res.end('Method Not Allowed')
+          return
+        }
+        let body
+        try {
+          body = await readJsonBody(req)
+        } catch {
+          res.writeHead(400)
+          res.end('Invalid JSON')
+          return
+        }
+        const result = getResult(body.providerKey, body.modelId)
+        if (!result) {
+          sendJson(res, 404, { error: 'Model not found' })
+          return
+        }
+        const source = sources[result.providerKey]
+        const apiKey = getApiKey(config, result.providerKey)
+        if (!apiKey) {
+          sendJson(res, 401, { error: 'No API key configured' })
+          return
+        }
+        const key = getResultKey(result)
+        benchmarkRunning.add(key)
+        broadcastUpdate({ immediate: true })
+        // 📖 Set SSE headers for streaming response to the browser
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+          'X-Accel-Buffering': 'no',
+        })
+        try {
+          // Build the upstream URL — append /v1/chat/completions if needed
+          let upstreamUrl = source?.url || result.url
+          if (!upstreamUrl.includes('/chat/completions')) {
+            upstreamUrl = upstreamUrl.replace(/\/+$/, '') + '/v1/chat/completions'
+          }
+          // 📖 ZAI provider: strip the "zai/" prefix from modelId for the API
+          let apiModelId = result.modelId
+          if (result.providerKey === 'zai' && apiModelId.startsWith('zai/')) {
+            apiModelId = apiModelId.slice(4)
+          }
+          const upstreamHeaders = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`,
+          }
+          // 📖 OpenRouter requires HTTP-Referer and X-Title headers
+          if (result.providerKey === 'openrouter') {
+            upstreamHeaders['HTTP-Referer'] = 'https://github.com/vava-nessa/free-coding-models'
+            upstreamHeaders['X-Title'] = 'free-coding-models'
+          }
+          const reqBody = {
+            model: apiModelId,
+            messages: [{ role: 'user', content: BENCHMARK_PROMPT }],
+            max_tokens: 140,
+            temperature: 0,
+            stream: true,
+          }
+          const resp = await fetch(upstreamUrl, {
+            method: 'POST',
+            headers: upstreamHeaders,
+            body: JSON.stringify(reqBody),
+            signal: AbortSignal.timeout(20000),
+          })
+          if (!resp.ok) {
+            let message = `HTTP ${resp.status}`
+            try {
+              const errJson = await resp.json()
+              message = errJson?.error?.message || errJson?.error || errJson?.message || message
+            } catch { /* keep default */ }
+            res.write('event: error\ndata: ' + JSON.stringify({ error: message }) + '\n\n')
+            res.end()
+            benchmarkRunning.delete(key)
+            broadcastUpdate({ immediate: true })
+            return
+          }
+          // 📖 Parse SSE stream from the provider — extract tokens and measure TPS
+          const reader = resp.body.getReader()
+          const decoder = new TextDecoder()
+          const t0 = performance.now()
+          let tokenCount = 0
+          let fullText = ''
+          let buffer = ''
+          while (true) {
+            const { done, value } = await reader.read()
+            if (done) break
+            buffer += decoder.decode(value, { stream: true })
+            const lines = buffer.split('\n')
+            buffer = lines.pop() || '' // keep incomplete line in buffer
+            for (const line of lines) {
+              const trimmed = line.trim()
+              if (!trimmed.startsWith('data: ')) continue
+              const payload = trimmed.slice(6)
+              if (payload === '[DONE]') continue
+              let parsed
+              try { parsed = JSON.parse(payload) } catch { continue }
+              const delta = parsed?.choices?.[0]?.delta?.content
+              if (!delta) continue
+              fullText += delta
+              tokenCount++
+              res.write('event: token\ndata: ' + JSON.stringify({
+                token: delta,
+                totalMs: Math.round(performance.now() - t0),
+                tokens: tokenCount,
+                tps: Math.round(tokenCount / ((performance.now() - t0) / 1000) * 10) / 10,
+                text: fullText,
+              }) + '\n\n')
+            }
+          }
+          const totalMs = Math.round(performance.now() - t0)
+          const tps = tokenCount / (totalMs / 1000)
+          res.write('event: done\ndata: ' + JSON.stringify({
+            totalMs,
+            outputTokens: tokenCount,
+            tokensPerSecond: Math.round(tps * 10) / 10,
+            answerPreview: fullText.slice(0, 100),
+          }) + '\n\n')
+          res.end()
+          // 📖 Update shared benchmark state so the dashboard reflects the result
+          const benchmarkResult = {
+            ok: true,
+            totalMs,
+            outputTokens: tokenCount,
+            tokensPerSecond: tps,
+            answerPreview: fullText.slice(0, 60),
+          }
+          benchmarkResults.set(key, benchmarkResult)
+          benchmarkRunning.delete(key)
+          updateHealthFromBenchmark(result, benchmarkResult)
+          broadcastUpdate({ immediate: true })
+        } catch (err) {
+          res.write('event: error\ndata: ' + JSON.stringify({ error: err?.message || 'Stream failed' }) + '\n\n')
+          res.end()
+          benchmarkRunning.delete(key)
+          broadcastUpdate({ immediate: true })
+        }
+        return
+      }
       case '/api/global-benchmark': {
         if (req.method === 'GET') {
           sendJson(res, 200, {
@@ -1360,32 +1525,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 +1641,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

@@ -77,6 +77,31 @@ export default function App() {
   const [toasts, setToasts] = useState([])
   const lastActivityRef = useRef(Date.now())
+  // 📖 PostHog: track app_web_start on mount
+  useEffect(() => {
+    try {
+      if (typeof window !== 'undefined' && window.posthog?.capture) {
+        window.posthog.capture('app_web_start', {
+          version: __APP_VERSION__ || 'unknown',
+          timestamp: new Date().toISOString(),
+        })
+      }
+    } catch {}
+  }, [])
+  // 📖 PostHog: track app_router_start when router opens
+  const handleRouterOpen = useCallback(() => {
+    setRouterOpen(true)
+    try {
+      if (typeof window !== 'undefined' && window.posthog?.capture) {
+        window.posthog.capture('app_router_start', {
+          version: __APP_VERSION__ || 'unknown',
+          timestamp: new Date().toISOString(),
+        })
+      }
+    } catch {}
+  }, [])
   // ── Toast helpers ────────────────────────────────────────────────────────
   const addToast = useCallback((message, type = 'info') => {
     const id = ++toastIdCounter
@@ -171,11 +196,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])
@@ -234,7 +273,7 @@ export default function App() {
     if (viewId === 'help') { setHelpOpen(true); return }
     if (viewId === 'changelog') { setChangelogOpen(true); setChangelogDefaultVersion(null); return }
     if (viewId === 'recommend') { setRecommendOpen(true); return }
-    if (viewId === 'router') { setRouterOpen(true); return }
+    if (viewId === 'router') { handleRouterOpen(); return }
     if (viewId === 'playground') { setPlaygroundOpen(true); return }
     if (viewId === 'install-endpoints') { setInstallEndpointsOpen(true); return }
     if (viewId === 'installed-models') { setInstalledModelsOpen(true); return }
@@ -365,6 +404,10 @@ export default function App() {
                 sortDirection={sortDirection}
                 onSort={toggleSort}
                 toolMode={toolMode}
+                onToast={addToast}
+                onSetToolMode={setToolMode}
+                onCycleToolMode={cycleToolMode}
+                onOpenFallback={(model) => setIncompatibleRequest({ model, toolMode })}
               />
             </main>
           )}
@@ -389,19 +432,7 @@ export default function App() {
         </div>
       </div>
-      <DetailPanel
-        model={selectedModel}
-        onClose={handleCloseDetail}
-        favorites={favorites}
-        onBenchmark={handleBenchmarkRow}
-        onLaunch={handleInstallEndpoint}
-        toolMode={toolMode}
-        onSetToolMode={setToolMode}
-        onCycleToolMode={cycleToolMode}
-        models={models}
-        onOpenFallback={(model) => setIncompatibleRequest({ model, toolMode })}
-        onToast={addToast}
-      />
+      {/* 📖 DetailPanel side panel replaced by expand row in ModelTable */}
       {exportOpen && (
         <ExportModal

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;