free-coding-models 0.5.6 → 0.5.8

package/web/src/App.jsx

@@ -12,6 +12,7 @@
  * 📖   - UpdateChip in header (polls /api/version, popover with "Update now" + "What's new")
  * 📖   - URL write-back (every filter / sort / view / palette / toolMode change
  * 📖     updates the URL via history.replaceState, debounced at 80ms)
+ * 📖   - M3 Web endpoint install flow: writes tool config only; never starts CLIs.
  * 📖   - New Settings rows: theme dropdown, favorites mode toggle, startup AI scan
  * 📖     toggle, shell-env toggle, legacy proxy cleanup button, open Changelog link,
  * 📖     update status row, per-provider test key button
@@ -23,6 +24,7 @@ import { useSocket } from './hooks/useSocket.js'
 import { useFilter } from './hooks/useFilter.js'
 import { useTheme } from './hooks/useTheme.js'
 import { useFavorites } from './hooks/useFavorites.js'
+import { useToolMode } from './hooks/useToolMode.js'
 import { useUrlState } from './hooks/useUrlState.js'
 import { useUpdateChecker } from './hooks/useUpdateChecker.js'
 import Header from './components/layout/Header.jsx'
@@ -37,7 +39,13 @@ import CommandPalette from './components/palette/CommandPalette.jsx'
 import HelpView from './components/help/HelpView.jsx'
 import ChangelogView from './components/changelog/ChangelogView.jsx'
 import UpdateChip from './components/update/UpdateChip.jsx'
+import RecommendView from './components/recommend/RecommendView.jsx'
+import IncompatibleFallbackModal from './components/launch/IncompatibleFallbackModal.jsx'
+import RouterView from './components/router/RouterView.jsx'
+import InstalledModelsView from './components/installed/InstalledModelsView.jsx'
+import InstallEndpointsView from './components/install/InstallEndpointsView.jsx'
 import ToastContainer from './components/atoms/ToastContainer.jsx'
+import { isModelCompatibleWithTool } from '../../src/core/tool-metadata.js'
 
 let toastIdCounter = 0
 
@@ -59,10 +67,27 @@ export default function App() {
   const [helpOpen, setHelpOpen] = useState(false)
   const [changelogOpen, setChangelogOpen] = useState(false)
   const [changelogDefaultVersion, setChangelogDefaultVersion] = useState(null)
-  const [toolMode, setToolMode] = useState(null) // 📖 M3 will use this; the row highlighter already keys off it
+  const [recommendOpen, setRecommendOpen] = useState(false)
+  const [routerOpen, setRouterOpen] = useState(false)
+  const [installedModelsOpen, setInstalledModelsOpen] = useState(false)
+  const [installEndpointsOpen, setInstallEndpointsOpen] = useState(false)
+  const [incompatibleRequest, setIncompatibleRequest] = useState(null)
   const [toasts, setToasts] = useState([])
   const lastActivityRef = useRef(Date.now())
 
+  // ── Toast helpers ────────────────────────────────────────────────────────
+  const addToast = useCallback((message, type = 'info') => {
+    const id = ++toastIdCounter
+    setToasts((prev) => [...prev, { id, message, type }])
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 4000)
+  }, [])
+
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
   const {
     filtered,
     filterTier, setFilterTier,
@@ -77,6 +102,8 @@ export default function App() {
     resetView,
   } = useFilter(models)
 
+  const { toolMode, setToolMode, cycleToolMode } = useToolMode({ onToast: addToast })
+
   // 📖 URL deep-linking (M2 = read + write). Hydrates on mount, then pushes
   // 📖 every change back via history.replaceState (debounced 80ms).
   useUrlState({
@@ -99,10 +126,47 @@ export default function App() {
   // 📖 Favorites — single source of truth shared with the TUI.
   const favorites = useFavorites({ models })
 
+  // ── M3 endpoint flow: compat guard → /api/install-endpoint → fallback modal ──
+  const handleInstallEndpoint = useCallback(async (model, overrideMode = null) => {
+    const mode = overrideMode || toolMode || 'opencode'
+    if (!model) return
+    if (!isModelCompatibleWithTool(model.providerKey, mode)) {
+      setIncompatibleRequest({ model, toolMode: mode })
+      return
+    }
+    try {
+      const resp = await fetch('/api/install-endpoint', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ providerKey: model.providerKey, modelId: model.modelId, toolMode: mode }),
+      })
+      const payload = await resp.json().catch(() => ({}))
+      if (resp.status === 422 && payload.code === 'incompatible_model') {
+        setIncompatibleRequest({ model, toolMode: mode })
+        return
+      }
+      if (!resp.ok) throw new Error(payload.error || `HTTP ${resp.status}`)
+      addToast(`Endpoint installed for ${model.label} in ${mode}. Start the tool yourself.`, 'success')
+    } catch (err) {
+      addToast(`Endpoint install failed: ${err.message}`, 'error')
+    }
+  }, [addToast, toolMode])
+
+  const handleSwitchToolAndInstall = useCallback(async (mode, model) => {
+    await setToolMode(mode)
+    setIncompatibleRequest(null)
+    await handleInstallEndpoint(model, mode)
+  }, [handleInstallEndpoint, setToolMode])
+
+  const handlePinAndInstall = useCallback(async (model) => {
+    if (!favorites.isFavorite(model)) await favorites.toggle(model)
+    await handleInstallEndpoint(model)
+  }, [favorites, handleInstallEndpoint])
+
   // 📖 Update checker (5-minute poll). Returns `updateAvailable` for the chip.
   const {
     localVersion, latestVersion, updateAvailable, runUpdate, checkNow, error: updateError,
-  } = useUpdateChecker({ onToast: addToastInternal })
+  } = useUpdateChecker({ onToast: addToast })
 
   // 📖 Build the provider list for the FilterBar dropdown.
   const providers = useMemo(() => {
@@ -140,25 +204,12 @@ export default function App() {
       })
       if (!resp.ok && resp.status !== 202) {
         const err = await resp.json().catch(() => ({}))
-        addToastInternal?.(`Benchmark failed: ${err?.error || resp.statusText}`, 'error')
+        addToast(`Benchmark failed: ${err?.error || resp.statusText}`, 'error')
       }
     } catch (err) {
       console.error('[Benchmark] per-row failed:', err.message)
     }
-  }, [])
-
-  // ── Toast helpers ────────────────────────────────────────────────────────
-  function addToastInternal(message, type = 'info') {
-    const id = ++toastIdCounter
-    setToasts((prev) => [...prev, { id, message, type }])
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id))
-    }, 4000)
-  }
-  const addToast = useCallback(addToastInternal, [])
-  const dismissToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
+  }, [addToast])
 
   // ── Selection / detail panel ─────────────────────────────────────────────
   const handleSelectModel = useCallback((model) => {
@@ -180,10 +231,10 @@ export default function App() {
     // 📖 toasts (M3/M4) — they don't switch the currentView.
     if (viewId === 'help') { setHelpOpen(true); return }
     if (viewId === 'changelog') { setChangelogOpen(true); setChangelogDefaultVersion(null); return }
-    if (viewId === 'recommend') { addToast?.('Smart Recommend arrives in M3', 'info'); return }
-    if (viewId === 'router') { addToast?.('Router dashboard arrives in M4', 'info'); return }
-    if (viewId === 'install-endpoints') { addToast?.('Install Endpoints arrives in M4', 'info'); return }
-    if (viewId === 'installed-models') { addToast?.('Installed Models arrives in M4', 'info'); return }
+    if (viewId === 'recommend') { setRecommendOpen(true); return }
+    if (viewId === 'router') { setRouterOpen(true); return }
+    if (viewId === 'install-endpoints') { setInstallEndpointsOpen(true); return }
+    if (viewId === 'installed-models') { setInstalledModelsOpen(true); return }
     setCurrentView(VIEW_TO_NAV[viewId] || viewId)
     lastActivityRef.current = Date.now()
   }, [addToast])
@@ -192,8 +243,8 @@ export default function App() {
   const handleResetView = useCallback(() => {
     resetView()
     setSearchQuery('')
-    addToastInternal('View reset to defaults.', 'info')
-  }, [resetView, setSearchQuery])
+    addToast('View reset to defaults.', 'info')
+  }, [addToast, resetView, setSearchQuery])
 
   // ── Changelog open with optional version (e.g. from UpdateChip "What's new") ─
   const openChangelogAt = useCallback((version) => {
@@ -219,13 +270,25 @@ export default function App() {
         if (paletteOpen) { setPaletteOpen(false); return }
         if (helpOpen) { setHelpOpen(false); return }
         if (changelogOpen) { setChangelogOpen(false); return }
+        if (recommendOpen) { setRecommendOpen(false); return }
+        if (routerOpen) { setRouterOpen(false); return }
+        if (installEndpointsOpen) { setInstallEndpointsOpen(false); return }
+        if (installedModelsOpen) { setInstalledModelsOpen(false); return }
+        if (incompatibleRequest) { setIncompatibleRequest(null); return }
         if (selectedModel) { setSelectedModel(null); return }
         if (exportOpen) { setExportOpen(false); return }
       }
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [paletteOpen, helpOpen, changelogOpen, selectedModel, exportOpen])
+  }, [paletteOpen, helpOpen, changelogOpen, recommendOpen, routerOpen, installEndpointsOpen, installedModelsOpen, incompatibleRequest, selectedModel, exportOpen])
+
+  useEffect(() => {
+    if (currentView === 'recommend') {
+      setRecommendOpen(true)
+      setCurrentView('dashboard')
+    }
+  }, [currentView])
 
   return (
     <>
@@ -245,6 +308,9 @@ export default function App() {
           modelsCount={filtered.length}
           theme={theme}
           onToast={addToast}
+          toolMode={toolMode}
+          onSetToolMode={setToolMode}
+          onCycleToolMode={cycleToolMode}
           updateSlot={
             <UpdateChip
               updateAvailable={updateAvailable}
@@ -257,7 +323,7 @@ export default function App() {
 
         <div className="app-content">
           {currentView === 'dashboard' && (
-            <div className="view">
+            <main className="view">
               <FilterBar
                 filterTier={filterTier}
                 setFilterTier={setFilterTier}
@@ -283,18 +349,20 @@ export default function App() {
                 globalBenchmarkRunning={globalBenchmarkRunning}
                 globalBenchmarkTotal={globalBenchmarkTotal}
                 globalBenchmarkCompleted={globalBenchmarkCompleted}
+                toolMode={toolMode}
               />
               <ModelTable
                 filtered={filtered}
                 onSelectModel={handleSelectModel}
                 onBenchmarkRow={handleBenchmarkRow}
+                onLaunch={handleInstallEndpoint}
                 favorites={favorites}
                 sortColumn={sortColumn}
                 sortDirection={sortDirection}
                 onSort={toggleSort}
                 toolMode={toolMode}
               />
-            </div>
+            </main>
           )}
 
           {currentView === 'settings' && (
@@ -322,6 +390,12 @@ export default function App() {
         onClose={handleCloseDetail}
         favorites={favorites}
         onBenchmark={handleBenchmarkRow}
+        onLaunch={handleInstallEndpoint}
+        toolMode={toolMode}
+        onSetToolMode={setToolMode}
+        onCycleToolMode={cycleToolMode}
+        models={models}
+        onOpenFallback={(model) => setIncompatibleRequest({ model, toolMode })}
         onToast={addToast}
       />
 
@@ -354,6 +428,30 @@ export default function App() {
         />
       )}
 
+      {recommendOpen && (
+        <RecommendView
+          onClose={() => setRecommendOpen(false)}
+          toolMode={toolMode}
+          onLaunch={handleInstallEndpoint}
+          onPinAndLaunch={handlePinAndInstall}
+          onToast={addToast}
+        />
+      )}
+
+      {incompatibleRequest && (
+        <IncompatibleFallbackModal
+          request={incompatibleRequest}
+          models={models}
+          onClose={() => setIncompatibleRequest(null)}
+          onSwitchToolLaunch={handleSwitchToolAndInstall}
+          onLaunchSimilar={(candidate) => {
+            setIncompatibleRequest(null)
+            const model = models.find((m) => m.providerKey === candidate.providerKey && m.modelId === candidate.modelId) || candidate
+            void handleInstallEndpoint(model)
+          }}
+        />
+      )}
+
       {helpOpen && <HelpView onClose={() => setHelpOpen(false)} />}
       {changelogOpen && (
         <ChangelogView
@@ -362,6 +460,27 @@ export default function App() {
         />
       )}
 
+      {routerOpen && (
+        <RouterView
+          onClose={() => setRouterOpen(false)}
+          onToast={addToast}
+        />
+      )}
+
+      {installedModelsOpen && (
+        <InstalledModelsView
+          onClose={() => setInstalledModelsOpen(false)}
+          onToast={addToast}
+        />
+      )}
+
+      {installEndpointsOpen && (
+        <InstallEndpointsView
+          onClose={() => setInstallEndpointsOpen(false)}
+          onToast={addToast}
+        />
+      )}
+
       <ToastContainer toasts={toasts} dismissToast={dismissToast} />
     </>
   )

package/web/src/components/analytics/AnalyticsView.jsx

@@ -7,6 +7,7 @@
 import { useMemo } from 'react'
 import { IconActivity, IconTrophy } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
+import TokenUsagePanel from './TokenUsagePanel.jsx'
 import styles from './AnalyticsView.module.css'
 
 // 📖 TIER_COLORS is now derived from CSS custom properties so the chart fills
@@ -138,6 +139,9 @@ export default function AnalyticsView({ models }) {
           </div>
         </div>
       </div>
+
+      {/* M4: Token Usage — always shown, displays "no data" if router hasn't been used */}
+      <TokenUsagePanel />
     </div>
   )
 }

package/web/src/components/analytics/TokenUsagePanel.jsx

@@ -0,0 +1,105 @@
+/**
+ * @file web/src/components/analytics/TokenUsagePanel.jsx
+ * @description Token Usage sub-section inside Analytics — 7-day chart, top models/providers.
+ * 📖 M4: Uses useTokenUsage hook, pure CSS bars (no charting library).
+ */
+import { useTokenUsage } from '../../hooks/useTokenUsage.js'
+import styles from './TokenUsagePanel.module.css'
+
+function formatTokens(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) return '0'
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return String(Math.round(n))
+}
+
+export default function TokenUsagePanel() {
+  const { data, loading } = useTokenUsage()
+
+  if (loading) {
+    return (
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Token Usage</h3>
+        <div className={styles.empty}>Loading…</div>
+      </div>
+    )
+  }
+
+  if (!data || !data.hasData) {
+    return (
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Token Usage</h3>
+        <div className={styles.empty}>No token data yet. Start the router and send requests to track usage.</div>
+      </div>
+    )
+  }
+
+  const maxDayTokens = Math.max(...data.sevenDays.map(d => d.totalTokens), 1)
+
+  return (
+    <>
+      {/* Summary cards */}
+      <div className={styles.summaryGrid}>
+        <div className={styles.summaryCard}>
+          <span className={styles.summaryLabel}>Today</span>
+          <span className={styles.summaryValue}>{formatTokens(data.today.totalTokens)}</span>
+          <span className={styles.summarySub}>{data.today.requests} requests</span>
+        </div>
+        <div className={styles.summaryCard}>
+          <span className={styles.summaryLabel}>All Time</span>
+          <span className={styles.summaryValue}>{formatTokens(data.allTime.totalTokens)}</span>
+          <span className={styles.summarySub}>{data.allTime.requests} requests</span>
+        </div>
+      </div>
+
+      {/* 7-day chart */}
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>7-Day Usage</h3>
+        <div className={styles.chart}>
+          {data.sevenDays.map((day) => (
+            <div key={day.date} className={styles.chartBar}>
+              <div
+                className={styles.chartFill}
+                style={{ height: `${Math.max(2, (day.totalTokens / maxDayTokens) * 100)}%` }}
+                title={`${day.date}: ${formatTokens(day.totalTokens)} tokens`}
+              />
+              <span className={styles.chartLabel}>{day.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Top Models */}
+      {data.topModels.length > 0 && (
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>Top Models</h3>
+          <div className={styles.topList}>
+            {data.topModels.map((m) => (
+              <div key={m.key} className={styles.topRow}>
+                <span className={styles.topKey}>{m.key}</span>
+                <span className={styles.topVal}>{formatTokens(m.total)} tokens</span>
+                <span className={styles.topReq}>{m.requests} req</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Top Providers */}
+      {data.topProviders.length > 0 && (
+        <div className={styles.card}>
+          <h3 className={styles.cardTitle}>Top Providers</h3>
+          <div className={styles.topList}>
+            {data.topProviders.map((p) => (
+              <div key={p.key} className={styles.topRow}>
+                <span className={styles.topKey}>{p.key}</span>
+                <span className={styles.topVal}>{formatTokens(p.total)} tokens</span>
+                <span className={styles.topReq}>{p.requests} req</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/web/src/components/analytics/TokenUsagePanel.module.css

@@ -0,0 +1,126 @@
+.card {
+  margin-top: 16px;
+}
+
+.cardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary, #aaa);
+  margin: 0 0 10px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.empty {
+  color: var(--text-muted, #666);
+  font-size: 13px;
+  padding: 20px 0;
+  text-align: center;
+}
+
+/* Summary Grid */
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.summaryCard {
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.summaryLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.summaryValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.summarySub {
+  font-size: 11px;
+  color: var(--text-muted, #888);
+}
+
+/* 7-Day Chart */
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 100px;
+  padding: 0 4px;
+}
+
+.chartBar {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.chartFill {
+  width: 100%;
+  min-height: 2px;
+  background: linear-gradient(180deg, #00c864 0%, rgba(0, 200, 100, 0.3) 100%);
+  border-radius: 3px 3px 0 0;
+  transition: height 0.3s ease;
+}
+
+.chartLabel {
+  font-size: 10px;
+  color: var(--text-muted, #888);
+  text-transform: uppercase;
+}
+
+/* Top Lists */
+.topList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.topRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+.topKey {
+  flex: 1;
+  color: var(--text-primary, #e0e0e0);
+  font-family: 'SF Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.topVal {
+  color: var(--text-muted, #888);
+  min-width: 80px;
+  text-align: right;
+}
+
+.topReq {
+  color: var(--text-muted, #666);
+  min-width: 50px;
+  text-align: right;
+  font-size: 11px;
+}

package/web/src/components/atoms/TierBadge.module.css

@@ -13,9 +13,9 @@
 .tier_aplus { background: rgba(0,200,255,0.1); color: #00c8ff; border: 1px solid rgba(0,200,255,0.2); }
 .tier_a     { background: rgba(61,220,132,0.1); color: #3ddc84; border: 1px solid rgba(61,220,132,0.2); }
 .tier_aminus{ background: rgba(126,207,126,0.1); color: #7ecf7e; border: 1px solid rgba(126,207,126,0.2); }
-.tier_bplus { background: rgba(168,168,200,0.1); color: #a8a8c8; border: 1px solid rgba(168,168,200,0.15); }
-.tier_b     { background: rgba(128,128,152,0.1); color: #808098; border: 1px solid rgba(128,128,152,0.15); }
-.tier_c     { background: rgba(96,96,120,0.1); color: #606078; border: 1px solid rgba(96,96,120,0.15); }
+.tier_bplus { background: rgba(168,168,200,0.1); color: #b8b8d8; border: 1px solid rgba(168,168,200,0.15); }
+.tier_b     { background: rgba(128,128,152,0.1); color: #a0a0b8; border: 1px solid rgba(128,128,152,0.15); }
+.tier_c     { background: rgba(96,96,120,0.1); color: #909098; border: 1px solid rgba(96,96,120,0.15); }
 
 /* 📖 Light theme: darker, AA-contrast tier text colors. Borders stay the same
    📖 hue so the badge still feels "tier-colored", just more legible. */

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

@@ -7,14 +7,16 @@
  * 📖 action section (star + reorder + per-row AI Speed Test button).
  * @functions DetailPanel → main panel component, buildDetailChart → SVG chart builder
  */
-import { useMemo } from 'react'
-import { IconStar, IconStarFilled, IconChevronUp, IconChevronDown, IconPlayerPlayFilled } from '@tabler/icons-react'
+import { IconStar, IconStarFilled, IconChevronUp, IconChevronDown, IconPlayerPlayFilled, IconAlertTriangle } from '@tabler/icons-react'
 import TierBadge from '../atoms/TierBadge.jsx'
 import VerdictBadge from '../atoms/VerdictBadge.jsx'
 import StatusDot from '../atoms/StatusDot.jsx'
 import StabilityCell from '../atoms/StabilityCell.jsx'
 import { formatPing, formatAvg, pingClass } from '../../utils/format.js'
 import { sweClass } from '../../utils/ranks.js'
+import LaunchButton from '../launch/LaunchButton.jsx'
+import ToolPicker from '../tools/ToolPicker.jsx'
+import { getToolMeta, isModelCompatibleWithTool } from '../../../../src/core/tool-metadata.js'
 import styles from './DetailPanel.module.css'
 
 function buildDetailChart(history) {
@@ -70,7 +72,10 @@ function StatRow({ label, children }) {
   )
 }
 
-export default function DetailPanel({ model, onClose, favorites, onBenchmark, onToast }) {
+export default function DetailPanel({
+  model, onClose, favorites, onBenchmark, onLaunch, onToast,
+  toolMode = 'opencode', onSetToolMode, onCycleToolMode, onOpenFallback,
+}) {
   if (!model) return null
 
   const chartSvg = buildDetailChart(model.pingHistory)
@@ -78,6 +83,8 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
   const favRank = favorites?.favoriteRank(model) ?? Number.MAX_SAFE_INTEGER
   const isFavAtTop = isFav && favRank === 0
   const isFavAtBottom = isFav && favRank === (favorites?.favorites.length ?? 0) - 1
+  const toolMeta = getToolMeta(toolMode)
+  const compatible = isModelCompatibleWithTool(model.providerKey, toolMode)
 
   return (
     <div className={styles.panel}>
@@ -127,8 +134,23 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
         <StatRow label="API Key">
           {model.hasApiKey ? '✅ Configured' : '❌ Missing'}
         </StatRow>
+        <StatRow label="Tool">
+          <ToolPicker
+            compact
+            toolMode={toolMode}
+            onSetToolMode={onSetToolMode}
+            onCycleToolMode={onCycleToolMode}
+          />
+        </StatRow>
+        {!compatible && (
+          <div className={styles.compatWarning}>
+            <IconAlertTriangle size={14} />
+            <span>{model.label} is not compatible with {toolMeta.emoji} {toolMeta.label}.</span>
+            <button onClick={() => onOpenFallback?.(model)}>Install in compatible tool</button>
+          </div>
+        )}
 
-        {/* ── M1: favorites + per-row benchmark action section ── */}
+        {/* ── M1/M3: favorites + benchmark + endpoint install action section ── */}
         {(favorites || onBenchmark) && (
           <div className={styles.actions}>
             {favorites && (
@@ -166,6 +188,9 @@ export default function DetailPanel({ model, onClose, favorites, onBenchmark, on
                 )}
               </div>
             )}
+            {onLaunch && (
+              <LaunchButton model={model} toolMode={toolMode} onLaunch={onLaunch} />
+            )}
             {onBenchmark && (
               <button
                 className={styles.benchBtn}

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

@@ -219,6 +219,32 @@
   background: rgba(180, 0, 255, 0.20);
   border-color: rgba(180, 0, 255, 0.7);
 }
+
+.compatWarning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0;
+  padding: 10px;
+  border: 1px solid rgba(255, 90, 122, 0.35);
+  border-radius: 8px;
+  background: rgba(255, 90, 122, 0.10);
+  color: #ff8da3;
+  font-size: 12px;
+  line-height: 1.35;
+}
+.compatWarning span { flex: 1; }
+.compatWarning button {
+  border: 1px solid rgba(255, 90, 122, 0.45);
+  border-radius: 6px;
+  background: var(--color-bg-card);
+  color: #ff8da3;
+  padding: 5px 8px;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 800;
+}
+.compatWarning button:hover { background: rgba(255, 90, 122, 0.16); }
 :global([data-theme="light"]) .benchBtn {
   background: rgba(140, 0, 200, 0.06);
   color: #6a00a0;