free-coding-models 0.5.85 → 0.5.87

package/web/src/components/playground/PlaygroundView.jsx

@@ -1,371 +0,0 @@
-/**
- * @file web/src/components/playground/PlaygroundView.jsx
- * @description Playground chat modal — multi-turn chat through the FCM router
- *   OR directly to a specific model. This is the HOST (chrome) layer; the
- *   actual chat (transcript, input, SSE streaming, metadata) is delegated to
- *   the shared <PlaygroundChat> core so the full playground, the RouterView
- *   "Test Router", and the ExpandedDetailRow "Mini Playground" all look and
- *   behave identically.
- *
- * 📖 What this host still owns:
- * 📖   - Header (title, message/token counter, clear + close)
- * 📖   - Model bar (selector, streaming toggle, pre-prompt toggle, router status)
- * 📖   - Pre-prompt hint (fetched from /api/router/preprompt)
- * 📖   - Router daemon lifecycle (auto-check, 5s auto-start, start button)
- * 📖   - Smart model selection on mount (best "up" model with a key)
- *
- * 📖 What it delegates to <PlaygroundChat>:
- * 📖   - The transcript + input + send/stop
- * 📖   - SSE streaming through /api/playground/chat
- * 📖   - The harmonized metadata row under every reply
- * 📖     (provider/model · ms · tok · t/s)
- *
- * @functions PlaygroundView — full-screen chat modal host wrapping PlaygroundChat
- */
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import {
-  IconMessageChatbot,
-  IconX,
-  IconTrash,
-  IconBolt,
-  IconAlertTriangle,
-  IconPlayerPlay,
-  IconLoader,
-} from '@tabler/icons-react'
-import PlaygroundChat from './PlaygroundChat.jsx'
-import styles from './PlaygroundView.module.css'
-
-const SUGGESTIONS = [
-  'Write a Python fizzbuzz with type hints',
-  'Explain Big O notation with three examples',
-  'Refactor a deeply nested for-loop into map/filter',
-  'Write a tiny Express endpoint that returns JSON',
-]
-
-/**
- * 📖 Router status pill shown in the model bar. `daemonRunning` is a tri-state:
- * 📖 null = checking, true = online, false = offline. Kept here because it is
- * 📖 pure chrome (not part of the chat core).
- */
-function StatusPill({ routerStatus, daemonRunning }) {
-  if (daemonRunning === true) {
-    return (
-      <span className={styles.metaChip}>
-        <IconBolt size={11} />
-        Router online
-      </span>
-    )
-  }
-  if (daemonRunning === false) {
-    return (
-      <span className={`${styles.metaChip} ${styles.error}`}>
-        <IconAlertTriangle size={11} />
-        Router offline
-      </span>
-    )
-  }
-  return (
-    <span className={styles.metaChip}>
-      <IconLoader size={11} className={styles.spin} />
-      Checking router…
-    </span>
-  )
-}
-
-export default function PlaygroundView({ onClose, onToast, models, routerStatus }) {
-  // ── Chrome state (host-owned) ──────────────────────────────────────────
-  const [model, setModel] = useState(null) // null = computing best model
-  const [streamOn, setStreamOn] = useState(true)
-  const [prePromptEnabled, setPrePromptEnabled] = useState(true)
-  const [prePromptText, setPrePromptText] = useState('')
-
-  // 📖 Router daemon lifecycle (null = checking, true = running, false = down)
-  const [daemonRunning, setDaemonRunning] = useState(
-    routerStatus?.running === true ? true : null
-  )
-  const [daemonStarting, setDaemonStarting] = useState(false)
-  const [autoStartSec, setAutoStartSec] = useState(5)
-  const cooldownRef = useRef(null)
-  const daemonCheckRef = useRef(null)
-  const autoStartTriggered = useRef(false)
-
-  // 📖 Header counter + empty-state gate. Updated by PlaygroundChat via the
-  // 📖 onTurnComplete callback so the host chrome stays in sync with the
-  // 📖 chat core it no longer owns directly.
-  const [chatStats, setChatStats] = useState({ count: 0, totalTokens: 0 })
-  const chatRef = useRef(null)
-
-  // 📖 Fetch the pre-prompt once on mount so the toggle shows the real value
-  // 📖 and the hint matches what the router injects server-side.
-  useEffect(() => {
-    void fetch('/api/router/preprompt')
-      .then((r) => r.json())
-      .then((data) => {
-        if (data && typeof data === 'object') {
-          setPrePromptEnabled(data.enabled === true)
-          if (typeof data.text === 'string') setPrePromptText(data.text)
-        }
-      })
-      .catch(() => {})
-  }, [])
-
-  // 📖 Smart model selection on mount: pick the best "up" model with an API
-  // 📖 key, preferring lower latency and higher tier. Falls back to "fcm" so
-  // 📖 the playground opens immediately even without a working model.
-  useEffect(() => {
-    if (model !== null) return
-    const upModels = (Array.isArray(models) ? models : [])
-      .filter((m) => m.status === 'up' && m.hasApiKey && !m.isPinging)
-
-    if (upModels.length > 0) {
-      const tierOrder = { 'S+': 0, 'S': 1, 'A+': 2, 'A': 3, 'A-': 4, 'B+': 5, 'B': 6, 'C': 7 }
-      upModels.sort((a, b) => {
-        const ta = tierOrder[a.tier] ?? 99
-        const tb = tierOrder[b.tier] ?? 99
-        if (ta !== tb) return ta - tb
-        const avgA = typeof a.avg === 'number' ? a.avg : 99999
-        const avgB = typeof b.avg === 'number' ? b.avg : 99999
-        return avgA - avgB
-      })
-      setModel(`${upModels[0].providerKey}/${upModels[0].modelId}`)
-      return
-    }
-    setModel('fcm')
-  }, [models, model])
-
-  // 📖 Check daemon status on mount.
-  useEffect(() => {
-    let mounted = true
-    async function checkDaemon() {
-      try {
-        const resp = await fetch('/api/router/status')
-        const data = await resp.json()
-        if (!mounted) return
-        setDaemonRunning(data?.running === true)
-      } catch {
-        if (mounted) setDaemonRunning(false)
-      }
-    }
-    void checkDaemon()
-    return () => {
-      mounted = false
-      if (cooldownRef.current) clearInterval(cooldownRef.current)
-      if (daemonCheckRef.current) clearInterval(daemonCheckRef.current)
-    }
-  }, [])
-
-  // 📖 Start the router daemon, then poll until it is ready.
-  const startDaemon = useCallback(async () => {
-    if (daemonStarting) return
-    if (cooldownRef.current) { clearInterval(cooldownRef.current); cooldownRef.current = null }
-    autoStartTriggered.current = true
-    setDaemonStarting(true)
-    try {
-      await fetch('/api/router/start', { method: 'POST' })
-      let attempts = 0
-      await new Promise((resolve) => {
-        daemonCheckRef.current = setInterval(async () => {
-          attempts += 1
-          try {
-            const resp = await fetch('/api/router/status')
-            const data = await resp.json()
-            if (data?.running) {
-              clearInterval(daemonCheckRef.current)
-              setDaemonRunning(true)
-              setDaemonStarting(false)
-              resolve()
-            }
-          } catch {}
-          if (attempts >= 30) {
-            clearInterval(daemonCheckRef.current)
-            setDaemonStarting(false)
-            resolve()
-          }
-        }, 1000)
-      })
-    } catch {
-      setDaemonStarting(false)
-    }
-  }, [daemonStarting])
-
-  // 📖 Auto-start the daemon after 5 seconds if it is down, the model is the
-  // 📖 "fcm" auto-router, and auto-start hasn't fired yet. The button is always
-  // 📖 clickable so the user can trigger it manually at any time.
-  useEffect(() => {
-    if (daemonRunning !== false || model !== 'fcm' || autoStartTriggered.current) return
-    let remaining = 5
-    setAutoStartSec(5)
-    cooldownRef.current = setInterval(() => {
-      remaining -= 1
-      setAutoStartSec(remaining)
-      if (remaining <= 0) {
-        clearInterval(cooldownRef.current)
-        autoStartTriggered.current = true
-        void startDaemon()
-      }
-    }, 1000)
-    return () => { if (cooldownRef.current) clearInterval(cooldownRef.current) }
-  }, [daemonRunning, model, startDaemon])
-
-  // 📖 Stable list of model identifiers for the dropdown — defaults to `fcm`
-  // 📖 (the auto-router) and lets the user pin a specific catalog entry.
-  const modelOptions = useMemo(() => {
-    const opts = [{ value: 'fcm', label: 'fcm — auto router (recommended)' }]
-    if (Array.isArray(models)) {
-      for (const m of models.slice(0, 200)) {
-        const id = m.modelId || m.id
-        if (!id) continue
-        const label = m.label || id
-        opts.push({ value: `${m.providerKey}/${id}`, label: `${m.providerKey}/${id} (${label})` })
-      }
-    }
-    return opts
-  }, [models])
-
-  // 📖 PlaygroundChat turn callback → keep the header counter in sync and
-  // 📖 drive the daemon-panel gate (only show it when there are no messages).
-  const handleTurnComplete = useCallback((summary) => {
-    setChatStats({ count: summary.count, totalTokens: summary.totalTokens })
-  }, [])
-
-  const handleClear = useCallback(() => {
-    chatRef.current?.clear()
-    setChatStats({ count: 0, totalTokens: 0 })
-  }, [])
-
-  // 📖 Can the user send right now? fcm needs the daemon; a pinned model
-  // 📖 routes directly to its provider and works without the daemon.
-  const canSend = !(model === 'fcm' && daemonRunning !== true)
-
-  // 📖 Daemon-panel gates. The panels replace the chat area entirely when the
-  // 📖 user is on the auto-router, the daemon is down/starting, and there is
-  // 📖 no conversation yet to keep on screen.
-  const hasMessages = chatStats.count > 0
-  const showDaemonStartPanel = model === 'fcm' && !hasMessages && daemonRunning === false && !daemonStarting
-  const showDaemonStartingPanel = model === 'fcm' && !hasMessages && daemonStarting
-  const showChat = !showDaemonStartPanel && !showDaemonStartingPanel
-
-  return (
-    <div className={styles.overlay} onClick={(e) => { if (e.target === e.currentTarget) onClose() }}>
-      <div className={styles.modal} role="dialog" aria-label="Free Coding Models Playground">
-        <div className={styles.header}>
-          <div className={styles.headerLeft}>
-            <div className={styles.headerTitle}>
-              <IconMessageChatbot size={18} />
-              Playground
-            </div>
-            <div className={styles.headerSubtitle}>
-              Chat with the FCM router · {chatStats.count} message{chatStats.count === 1 ? '' : 's'} · {chatStats.totalTokens} tokens
-            </div>
-          </div>
-          <div className={styles.headerActions}>
-            <button
-              className={styles.iconBtn}
-              onClick={handleClear}
-              title="Clear conversation"
-              disabled={!hasMessages}
-            >
-              <IconTrash size={16} />
-            </button>
-            <button
-              className={styles.iconBtn}
-              onClick={onClose}
-              title="Close (Esc)"
-            >
-              <IconX size={16} />
-            </button>
-          </div>
-        </div>
-
-        <div className={styles.modelBar}>
-          <span className={styles.modelLabel}>Model:</span>
-          <select
-            className={styles.modelSelect}
-            value={model ?? 'fcm'}
-            onChange={(e) => setModel(e.target.value)}
-            disabled={!showChat}
-          >
-            {modelOptions.map((opt) => (
-              <option key={opt.value} value={opt.value}>{opt.label}</option>
-            ))}
-          </select>
-          <button
-            className={styles.presetChip}
-            onClick={() => setStreamOn((v) => !v)}
-            title="Toggle streaming"
-          >
-            {streamOn ? '⚡ Streaming' : '🐢 One-shot'}
-          </button>
-          <label className={styles.prePromptToggle} title="Router persona injected as the first system message">
-            <input
-              type="checkbox"
-              checked={prePromptEnabled}
-              onChange={(e) => setPrePromptEnabled(e.target.checked)}
-            />
-            Pre-prompt
-          </label>
-          <StatusPill routerStatus={routerStatus} daemonRunning={daemonRunning} />
-        </div>
-
-        {prePromptEnabled && prePromptText && (
-          <div className={styles.modelBar} style={{ borderTop: 'none', background: 'transparent', paddingTop: 4, paddingBottom: 8, fontSize: 11 }}>
-            <span className={styles.modelLabel} style={{ flexShrink: 0 }}>Persona:</span>
-            <span style={{ opacity: 0.7, fontStyle: 'italic' }}>
-              {prePromptText.length > 160 ? `${prePromptText.slice(0, 160)}…` : prePromptText}
-            </span>
-          </div>
-        )}
-
-        <div className={styles.chatBody}>
-          {showDaemonStartPanel ? (
-            <div className={styles.daemonStartPanel}>
-              <IconAlertTriangle size={32} style={{ color: '#fbbf24', opacity: 0.8 }} />
-              <div className={styles.daemonStartTitle}>Router daemon is not running</div>
-              <div className={styles.daemonStartHint}>
-                The playground routes your chats through the FCM router daemon. Start it to begin chatting with free coding models, or pick a specific model above.
-              </div>
-              <button
-                className={styles.daemonStartBtn}
-                onClick={startDaemon}
-                title="Start the router daemon"
-              >
-                {daemonStarting ? (
-                  <><IconLoader size={14} className={styles.spin} /> Starting…</>
-                ) : (
-                  <><IconPlayerPlay size={14} /> Start Router{autoStartSec > 0 && !autoStartTriggered.current ? ` (auto in ${autoStartSec}s)` : ''}</>
-                )}
-              </button>
-              <div className={styles.daemonStartAlt}>
-                Or run <code>free-coding-models --daemon-bg</code> in your terminal
-              </div>
-            </div>
-          ) : showDaemonStartingPanel ? (
-            <div className={styles.daemonStartPanel}>
-              <IconLoader size={32} className={styles.spin} style={{ color: 'var(--accent, #22c55e)' }} />
-              <div className={styles.daemonStartTitle}>Starting router daemon…</div>
-              <div className={styles.daemonStartHint}>
-                The daemon is being launched. This usually takes a few seconds. You'll be able to chat as soon as it's ready.
-              </div>
-            </div>
-          ) : null}
-
-          {showChat && (
-            <PlaygroundChat
-              ref={chatRef}
-              model={model || 'fcm'}
-              variant="full"
-              stream={streamOn}
-              disabled={!canSend}
-              onTurnComplete={handleTurnComplete}
-              suggestions={SUGGESTIONS}
-              emptyTitle="Try the FCM router in 10 seconds"
-              emptyHint="Each request is auto-routed to the healthiest free coding model in your active set, or sent directly to the model you picked. Every reply shows the served model, latency, and TPS below it."
-              emptyIcon={<IconMessageChatbot size={42} style={{ opacity: 0.5 }} />}
-              placeholder="Ask anything. Enter to send, Shift+Enter for a newline."
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}