free-coding-models 0.5.6 → 0.5.8

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

@@ -8,6 +8,7 @@
  */
 import { useState, useEffect, useMemo } from 'react'
 import { IconRefresh, IconX, IconFilter, IconCircleCheck, IconAlertTriangle, IconActivity, IconEye, IconStar } from '@tabler/icons-react'
+import { getToolMeta } from '../../../../src/core/tool-metadata.js'
 import styles from './FilterBar.module.css'
 
 // 📖 Chip sets match the TUI cycles 1:1 (see useFilter.js). Keep these in sync.
@@ -109,6 +110,7 @@ export default function FilterBar({
   globalBenchmarkRunning,
   globalBenchmarkTotal,
   globalBenchmarkCompleted,
+  toolMode = 'opencode',
 }) {
   const [countdown, setCountdown] = useState(null)
 
@@ -124,6 +126,7 @@ export default function FilterBar({
   }, [nextPingAt])
 
   const countdownDisplay = countdown !== null ? formatCountdown(countdown) : null
+  const activeTool = getToolMeta(toolMode)
 
   // 📖 Custom text filter chip — sticks to the right of the search bar, with
   // 📖 an "X" to clear (TUI's `X` key behavior).
@@ -170,12 +173,14 @@ export default function FilterBar({
       <ChipRow label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
 
       <div className={styles.group}>
-        <label className={styles.filterLabel}>Visibility</label>
+        <label className={styles.filterLabel} htmlFor="visibility-select">Visibility</label>
         <select
+          id="visibility-select"
           className={styles.select}
           value={visibilityMode}
           onChange={(e) => setVisibilityMode(e.target.value)}
           title={VISIBILITY_MODES.find((v) => v.key === visibilityMode)?.hint}
+          aria-label="Visibility mode"
         >
           {VISIBILITY_MODES.map((v) => (
             <option key={v.key} value={v.key}>{v.label}</option>
@@ -184,11 +189,13 @@ export default function FilterBar({
       </div>
 
       <div className={styles.group}>
-        <label className={styles.filterLabel}>Provider</label>
+        <label className={styles.filterLabel} htmlFor="provider-select">Provider</label>
         <select
+          id="provider-select"
           className={styles.providerSelect}
           value={filterProvider}
           onChange={(e) => setFilterProvider(e.target.value)}
+          aria-label="Filter by provider"
         >
           <option value="all">All Providers</option>
           {providers.map((p) => (
@@ -197,6 +204,14 @@ export default function FilterBar({
         </select>
       </div>
 
+      <div className={styles.group}>
+        <label className={styles.filterLabel}>Endpoint target</label>
+        <div className={styles.toolStatus} title="Active endpoint install target from the Header picker">
+          <span>{activeTool.emoji}</span>
+          <strong>{activeTool.label}</strong>
+        </div>
+      </div>
+
       <div className={styles.spacer} />
 
       {/* ── Custom text filter chip (TUI's Ctrl+P "Apply text filter") ── */}

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

@@ -49,6 +49,23 @@
 }
 .select:focus, .providerSelect:focus { border-color: var(--color-accent); }
 
+.toolStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.toolStatus strong {
+  font-size: 11px;
+  font-weight: 800;
+}
+
 /* ── Spacer + reset ── */
 .spacer { flex: 1; }
 

package/web/src/components/dashboard/ModelTable.jsx

@@ -35,6 +35,7 @@ import AILatencyCell from '../atoms/AILatencyCell.jsx'
 import TPSCell from '../atoms/TPSCell.jsx'
 import NoKeyIcon from '../atoms/NoKeyIcon.jsx'
 import ProviderLogo from '../atoms/ProviderLogo.jsx'
+import LaunchButton from '../launch/LaunchButton.jsx'
 
 import { pingClass } from '../../utils/format.js'
 import { sweClass } from '../../utils/ranks.js'
@@ -172,7 +173,7 @@ function TrendCellRenderer({ row }) {
 // 📖 Note: `favorites` / `onBenchmarkRow` are read by the cell renderers below
 // 📖 via closure. We rebuild the columns list whenever any of these change so
 // 📖 the cells always see fresh values.
-const buildColumns = ({ favorites, onBenchmarkRow, onSelectModel }) => [
+const buildColumns = ({ favorites, onBenchmarkRow, onSelectModel, onLaunch, toolMode }) => [
   // 📖 Star column — leftmost, mirrors the TUI's `F` key.
   colHelper.display({
     id: 'fav',
@@ -303,13 +304,24 @@ const buildColumns = ({ favorites, onBenchmarkRow, onSelectModel }) => [
     cell: TrendCellRenderer,
     enableSorting: true,
   }),
+  colHelper.display({
+    id: 'launch',
+    header: '🔌',
+    size: 42,
+    enableSorting: false,
+    cell: ({ row }) => (
+      <div className={styles.launchCell}>
+        <LaunchButton model={row.original} toolMode={toolMode} onLaunch={onLaunch} variant="icon" />
+      </div>
+    ),
+  }),
 ]
 
 // 📖 DEFAULT_COLUMN_SIZING: extracted from the columns above. This is the single
 // 📖 source of truth for both the table layout and the useColumnSizing hook's reset target.
 // 📖 The 'Reset columns' button restores these exact widths.
 // 📖 We build a placeholder columns list (no callbacks needed) to extract sizes.
-const PLACEHOLDER_COLUMNS = buildColumns({ favorites: { isFavorite: () => false, toggle: () => {} }, onBenchmarkRow: null, onSelectModel: null })
+const PLACEHOLDER_COLUMNS = buildColumns({ favorites: { isFavorite: () => false, toggle: () => {} }, onBenchmarkRow: null, onSelectModel: null, onLaunch: null, toolMode: 'opencode' })
 export const DEFAULT_COLUMN_SIZING = PLACEHOLDER_COLUMNS.reduce((acc, c) => {
   if (c.id) acc[c.id] = c.size ?? 80
   return acc
@@ -330,7 +342,7 @@ function SortIcon({ column }) {
 
 // ─── Main component ───────────────────────────────────────────────────────────
 export default function ModelTable({
-  filtered, onSelectModel, onBenchmarkRow, favorites,
+  filtered, onSelectModel, onBenchmarkRow, onLaunch, favorites,
   sortColumn, sortDirection, onSort,
   toolMode = null,
 }) {
@@ -359,8 +371,8 @@ export default function ModelTable({
   // 📖 Build the columns with the current favorites/onBenchmarkRow handlers.
   // 📖 Re-derive when favorites reference changes so the star cells re-render.
   const columns = useMemo(
-    () => buildColumns({ favorites, onBenchmarkRow, onSelectModel }),
-    [favorites, onBenchmarkRow, onSelectModel]
+    () => buildColumns({ favorites, onBenchmarkRow, onSelectModel, onLaunch, toolMode }),
+    [favorites, onBenchmarkRow, onSelectModel, onLaunch, toolMode]
   )
 
   // 📖 Column sizing state with localStorage persistence (see useColumnSizing.js).

package/web/src/components/dashboard/ModelTable.module.css

@@ -239,7 +239,7 @@
 .modelMeta    { flex: 1; min-width: 0; }
 .modelHeader  { display: flex; align-items: center; gap: 5px; }
 .modelName    { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.modelId      { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.modelId      { font-family: var(--font-mono); font-size: 9px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 /* 📖 Provider cell now uses <ProviderLogo /> (icon + wordmark) — see
    📖 atoms/ProviderLogo.module.css for the layout. The old bordered pill
@@ -330,4 +330,17 @@
 :global([data-theme="light"]) .incompatible td {
   background: rgba(200, 20, 58, 0.06) !important;
   color: #888 !important;
+}
+
+/* ─── M3: per-row endpoint install plug ─── */
+.launchCell {
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 120ms;
+}
+.table tbody tr:hover .launchCell,
+.incompatible .launchCell,
+.benchRow .launchCell {
+  opacity: 1;
 }

package/web/src/components/help/HelpView.jsx

@@ -74,7 +74,7 @@ const SECTIONS = [
     id: 'tools',
     title: '🧰 Tool mode (M3)',
     items: [
-      { key: 'Coming in M3', desc: 'Tool mode picker, per-row Launch button, missing-tool install prompt, incompatible-fallback modal' },
+      { key: 'M3 shipped', desc: 'Endpoint target picker, per-row Install Endpoint button, and incompatible-target fallback modal' },
     ],
   },
   {

package/web/src/components/install/InstallEndpointsView.jsx

@@ -0,0 +1,278 @@
+/**
+ * @file web/src/components/install/InstallEndpointsView.jsx
+ * @description Install Endpoints wizard — 4-step modal: provider → tool → models → install.
+ * 📖 M4: Full TUI parity for the install endpoints overlay.
+ * 📖 Uses existing /api/install-endpoints/providers, /api/install-endpoints/catalog,
+ * 📖 and /api/install-endpoints/wizard endpoints.
+ */
+import { useState, useEffect, useCallback } from 'react'
+import {
+  IconPlug, IconChevronRight, IconChevronLeft, IconCheck,
+  IconLoader,
+} from '@tabler/icons-react'
+import styles from './InstallEndpointsView.module.css'
+
+const STEPS = ['Provider', 'Tool', 'Models', 'Install']
+
+export default function InstallEndpointsView({ onClose, onToast }) {
+  const [step, setStep] = useState(0)
+  const [providers, setProviders] = useState([])
+  const [selectedProvider, setSelectedProvider] = useState(null)
+  const [catalogModels, setCatalogModels] = useState([])
+  const [selectedTool, setSelectedTool] = useState(null)
+  const [selectedModels, setSelectedModels] = useState([])
+  const [scope, setScope] = useState('all')
+  const [installing, setInstalling] = useState(false)
+  const [installResult, setInstallResult] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  // 📖 Available install targets from ToolPicker's mode list
+  const TOOLS = [
+    { id: 'opencode', label: 'OpenCode CLI', emoji: '💻' },
+    { id: 'opencode-desktop', label: 'OpenCode Desktop', emoji: '🖥️' },
+    { id: 'openclaw', label: 'OpenClaw', emoji: '🦞' },
+    { id: 'crush', label: 'Crush', emoji: '💘' },
+    { id: 'goose', label: 'Goose', emoji: '🪿' },
+    { id: 'pi', label: 'Pi', emoji: 'π' },
+    { id: 'aider', label: 'Aider', emoji: '🛠' },
+    { id: 'qwen', label: 'Qwen', emoji: '🐉' },
+    { id: 'openhands', label: 'OpenHands', emoji: '🤲' },
+    { id: 'amp', label: 'Amp', emoji: '⚡' },
+    { id: 'forgecode', label: 'ForgeCode', emoji: '🔥' },
+    { id: 'fcm_router', label: 'FCM Router', emoji: '🔄' },
+  ]
+
+  // Load providers on mount
+  useEffect(() => {
+    fetch('/api/install-endpoints/providers')
+      .then(r => r.json())
+      .then(data => {
+        setProviders(data.providers || [])
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  // Load catalog when provider selected
+  useEffect(() => {
+    if (!selectedProvider) return
+    fetch(`/api/install-endpoints/catalog?provider=${selectedProvider.providerKey}`)
+      .then(r => r.json())
+      .then(data => setCatalogModels(data.models || []))
+      .catch(() => setCatalogModels([]))
+  }, [selectedProvider])
+
+  const toggleModel = useCallback((modelId) => {
+    setSelectedModels(prev =>
+      prev.includes(modelId)
+        ? prev.filter(id => id !== modelId)
+        : [...prev, modelId]
+    )
+  }, [])
+
+  const selectAll = useCallback(() => {
+    setSelectedModels(catalogModels.map(m => m.modelId))
+    setScope('all')
+  }, [catalogModels])
+
+  const selectNone = useCallback(() => {
+    setSelectedModels([])
+    setScope('selected')
+  }, [])
+
+  const canNext = () => {
+    if (step === 0) return !!selectedProvider
+    if (step === 1) return !!selectedTool
+    if (step === 2) return scope === 'all' || selectedModels.length > 0
+    return true
+  }
+
+  const handleInstall = async () => {
+    setInstalling(true)
+    try {
+      const resp = await fetch('/api/install-endpoints/wizard', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          providerKey: selectedProvider.providerKey,
+          toolMode: selectedTool,
+          scope,
+          modelIds: scope === 'selected' ? selectedModels : [],
+        }),
+      })
+      const data = await resp.json()
+      if (data.success) {
+        setInstallResult(data)
+        onToast?.(`Installed ${data.modelCount} models for ${selectedProvider.label} into ${TOOLS.find(t => t.id === selectedTool)?.label || selectedTool}.`, 'success')
+      } else {
+        onToast?.(`Install failed: ${data.error || 'unknown'}`, 'error')
+      }
+    } catch (err) {
+      onToast?.(`Install error: ${err.message}`, 'error')
+    } finally {
+      setInstalling(false)
+    }
+  }
+
+  const handleNext = () => {
+    if (step === 2) {
+      handleInstall()
+      return
+    }
+    setStep(s => Math.min(s + 1, 3))
+  }
+
+  const handleBack = () => {
+    setStep(s => Math.max(s - 1, 0))
+  }
+
+  return (
+    <div className={styles.overlay} onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>
+            <IconPlug size={20} stroke={1.5} />
+            Install Endpoints
+          </h2>
+          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">✕</button>
+        </div>
+
+        {/* Step indicator */}
+        <div className={styles.steps}>
+          {STEPS.map((label, i) => (
+            <div key={i} className={`${styles.step} ${i === step ? styles.stepActive : i < step ? styles.stepDone : ''}`}>
+              <span className={styles.stepNum}>{i < step ? <IconCheck size={12} /> : i + 1}</span>
+              <span className={styles.stepLabel}>{label}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className={styles.body}>
+          {/* Step 0: Select Provider */}
+          {step === 0 && (
+            <div className={styles.stepContent}>
+              <p className={styles.stepDesc}>Choose a provider with a configured API key.</p>
+              {loading && <div className={styles.loading}>Loading providers…</div>}
+              {!loading && providers.length === 0 && (
+                <div className={styles.empty}>No configured providers found. Add API keys in Settings first.</div>
+              )}
+              <div className={styles.grid}>
+                {providers.map((p) => (
+                  <button
+                    key={p.providerKey}
+                    className={`${styles.pickCard} ${selectedProvider?.providerKey === p.providerKey ? styles.pickActive : ''}`}
+                    onClick={() => { setSelectedProvider(p); setStep(1) }}
+                  >
+                    <span className={styles.pickLabel}>{p.label}</span>
+                    <span className={styles.pickMeta}>{p.modelCount} models</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Step 1: Select Tool */}
+          {step === 1 && (
+            <div className={styles.stepContent}>
+              <p className={styles.stepDesc}>
+                Install <strong>{selectedProvider?.label}</strong> models into which tool?
+              </p>
+              <div className={styles.grid}>
+                {TOOLS.map((tool) => (
+                  <button
+                    key={tool.id}
+                    className={`${styles.pickCard} ${selectedTool === tool.id ? styles.pickActive : ''}`}
+                    onClick={() => { setSelectedTool(tool.id); setStep(2) }}
+                  >
+                    <span className={styles.pickEmoji}>{tool.emoji}</span>
+                    <span className={styles.pickLabel}>{tool.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Select Models */}
+          {step === 2 && (
+            <div className={styles.stepContent}>
+              <p className={styles.stepDesc}>
+                Choose models to install from <strong>{selectedProvider?.label}</strong> into <strong>{TOOLS.find(t => t.id === selectedTool)?.label}</strong>.
+              </p>
+              <div className={styles.scopeToggle}>
+                <button className={`${styles.scopeBtn} ${scope === 'all' ? styles.scopeActive : ''}`} onClick={() => { setScope('all'); selectAll() }}>All Models</button>
+                <button className={`${styles.scopeBtn} ${scope === 'selected' ? styles.scopeActive : ''}`} onClick={() => setScope('selected')}>Select Models</button>
+              </div>
+              {scope === 'selected' && (
+                <div className={styles.modelGrid}>
+                  {catalogModels.map((model) => (
+                    <button
+                      key={model.modelId}
+                      className={`${styles.modelCard} ${selectedModels.includes(model.modelId) ? styles.modelSelected : ''}`}
+                      onClick={() => toggleModel(model.modelId)}
+                    >
+                      <span className={styles.modelName}>{model.label}</span>
+                      <span className={styles.modelTier}>{model.tier}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+              {scope === 'all' && (
+                <div className={styles.allNotice}>
+                  All {catalogModels.length} models from {selectedProvider?.label} will be installed.
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Installing / Done */}
+          {step === 3 && (
+            <div className={styles.stepContent}>
+              {installing && (
+                <div className={styles.installingState}>
+                  <IconLoader size={24} className={styles.spinner} />
+                  <span>Installing {scope === 'all' ? 'all' : selectedModels.length} models…</span>
+                </div>
+              )}
+              {installResult && (
+                <div className={styles.doneState}>
+                  <IconCheck size={32} color="#00c864" />
+                  <h3>Installation Complete</h3>
+                  <p>{installResult.modelCount} models installed into {installResult.toolLabel}</p>
+                  <code className={styles.installPath}>{installResult.path}</code>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer nav */}
+        <div className={styles.footer}>
+          {step > 0 && step < 3 && (
+            <button className={styles.backBtn} onClick={handleBack}>
+              <IconChevronLeft size={14} />
+              Back
+            </button>
+          )}
+          {step < 3 && (
+            <button className={styles.nextBtn} onClick={handleNext} disabled={!canNext()}>
+              {step === 2 ? (
+                <>
+                  <IconPlug size={14} />
+                  Install
+                </>
+              ) : (
+                <>
+                  Next
+                  <IconChevronRight size={14} />
+                </>
+              )}
+            </button>
+          )}
+          {step === 3 && installResult && (
+            <button className={styles.doneBtn} onClick={onClose}>Done</button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}