free-coding-models 0.5.5 → 0.5.8

package/web/src/components/installed/InstalledModelsView.jsx

@@ -0,0 +1,89 @@
+/**
+ * @file web/src/components/installed/InstalledModelsView.jsx
+ * @description Installed Models modal — scans all tool configs, shows models, soft-delete.
+ * 📖 M4: Full TUI parity for installed models management.
+ */
+import { useInstalledModels } from '../../hooks/useInstalledModels.js'
+import { IconFolders, IconTrash, IconRefresh } from '@tabler/icons-react'
+import styles from './InstalledModelsView.module.css'
+
+export default function InstalledModelsView({ onClose, onToast }) {
+  const { results, loading, refresh, disableModel } = useInstalledModels()
+
+  const handleDisable = async (toolMode, modelId) => {
+    try {
+      const result = await disableModel(toolMode, modelId)
+      if (result.success) {
+        onToast?.(`Disabled ${modelId} in ${toolMode}.`, 'success')
+      } else {
+        onToast?.(`Failed: ${result.error || 'unknown error'}`, 'error')
+      }
+    } catch (err) {
+      onToast?.(`Error: ${err.message}`, 'error')
+    }
+  }
+
+  const totalModels = results.reduce((sum, r) => sum + r.models.length, 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}>
+            <IconFolders size={20} stroke={1.5} />
+            Installed Models
+            {!loading && <span className={styles.count}>{totalModels}</span>}
+          </h2>
+          <div className={styles.headerActions}>
+            <button className={styles.refreshBtn} onClick={refresh} title="Refresh">
+              <IconRefresh size={14} />
+            </button>
+            <button className={styles.closeBtn} onClick={onClose} aria-label="Close">✕</button>
+          </div>
+        </div>
+
+        <div className={styles.body}>
+          {loading && <div className={styles.empty}>Scanning tool configs…</div>}
+
+          {!loading && totalModels === 0 && (
+            <div className={styles.empty}>
+              No models found in tool configs.
+              <br />
+              <span className={styles.hint}>Use "Install Endpoints" to configure models for your tools.</span>
+            </div>
+          )}
+
+          {!loading && results.map((tool) => (
+            <div key={tool.toolMode} className={styles.toolGroup}>
+              <div className={styles.toolHeader}>
+                <span className={styles.toolEmoji}>{tool.toolEmoji}</span>
+                <span className={styles.toolLabel}>{tool.toolLabel}</span>
+                <span className={styles.toolCount}>{tool.models.length} model{tool.models.length !== 1 ? 's' : ''}</span>
+                {!tool.isValid && <span className={styles.toolMissing}>Not installed</span>}
+              </div>
+              {tool.models.length > 0 && (
+                <div className={styles.modelList}>
+                  {tool.models.map((model) => (
+                    <div key={`${tool.toolMode}-${model.modelId}`} className={styles.modelRow}>
+                      <span className={styles.modelIcon}>{model.isExternal ? '🔗' : '✅'}</span>
+                      <span className={styles.modelName}>{model.label}</span>
+                      {model.tier && model.tier !== '-' && <span className={styles.modelTier}>{model.tier}</span>}
+                      <span className={styles.modelId} title={model.modelId}>{model.modelId}</span>
+                      <button
+                        className={styles.disableBtn}
+                        onClick={() => handleDisable(tool.toolMode, model.modelId)}
+                        title="Remove model from config (backup saved)"
+                      >
+                        <IconTrash size={12} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/web/src/components/installed/InstalledModelsView.module.css

@@ -0,0 +1,200 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.15s ease;
+}
+
+.modal {
+  background: var(--bg-primary, #0f0f17);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 12px;
+  width: 640px;
+  max-width: 95vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border, #1e1e2e);
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.count {
+  font-size: 12px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 10px;
+  padding: 2px 8px;
+  color: var(--text-muted, #888);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.refreshBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 6px;
+  color: var(--text-muted, #888);
+  cursor: pointer;
+  &:hover { color: var(--text-primary, #e0e0e0); }
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #888);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  &:hover { background: var(--bg-hover, #1a1a2e); color: var(--text-primary, #e0e0e0); }
+}
+
+.body {
+  padding: 16px 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.empty {
+  color: var(--text-muted, #666);
+  font-size: 13px;
+  padding: 30px 0;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text-muted, #555);
+}
+
+/* Tool Groups */
+.toolGroup {
+  margin-bottom: 16px;
+}
+
+.toolHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.toolEmoji {
+  font-size: 16px;
+}
+
+.toolLabel {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.toolCount {
+  font-size: 11px;
+  color: var(--text-muted, #888);
+}
+
+.toolMissing {
+  font-size: 10px;
+  padding: 2px 6px;
+  background: rgba(255, 140, 0, 0.15);
+  color: #ff8c00;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* Model Rows */
+.modelList {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding-left: 24px;
+}
+
+.modelRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  background: var(--bg-secondary, #14141f);
+  &:hover { background: var(--bg-hover, #1a1a2e); }
+}
+
+.modelIcon {
+  font-size: 12px;
+}
+
+.modelName {
+  color: var(--text-primary, #e0e0e0);
+  min-width: 120px;
+}
+
+.modelTier {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 5px;
+  background: rgba(0, 200, 255, 0.1);
+  color: #00c8ff;
+  border-radius: 3px;
+}
+
+.modelId {
+  flex: 1;
+  color: var(--text-muted, #888);
+  font-family: 'SF Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.disableBtn {
+  background: none;
+  border: none;
+  color: var(--text-muted, #666);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  &:hover { color: #dc3545; background: rgba(220, 53, 69, 0.1); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/web/src/components/launch/IncompatibleFallbackModal.jsx

@@ -0,0 +1,69 @@
+/**
+ * @file web/src/components/launch/IncompatibleFallbackModal.jsx
+ * @description Web equivalent of the TUI incompatible-fallback overlay. Lets the
+ * user switch to a compatible endpoint target or install a similar model endpoint.
+ *
+ * @functions IncompatibleFallbackModal → switch-tool and similar-model picker
+ * @exports IncompatibleFallbackModal
+ */
+import { IconAlertTriangle, IconPlugConnected, IconTool, IconX } from '@tabler/icons-react'
+import {
+  findSimilarCompatibleModels,
+  getCompatibleTools,
+  getToolMeta,
+} from '../../../../src/core/tool-metadata.js'
+import styles from './LaunchModal.module.css'
+
+export default function IncompatibleFallbackModal({ request, models = [], onClose, onSwitchToolLaunch, onLaunchSimilar }) {
+  if (!request?.model) return null
+  const { model, toolMode } = request
+  const activeMeta = getToolMeta(toolMode)
+  const compatibleTools = getCompatibleTools(model.providerKey)
+  const similar = findSimilarCompatibleModels(model.sweScore, toolMode, models, 3)
+    .filter((candidate) => candidate.modelId !== model.modelId || candidate.providerKey !== model.providerKey)
+
+  return (
+    <div className={styles.backdrop} onClick={onClose}>
+      <div className={styles.modalWide} onClick={(event) => event.stopPropagation()}>
+        <div className={styles.header}>
+          <div>
+            <p className={styles.eyebrow}>Incompatible model</p>
+            <h2><IconAlertTriangle size={18} /> {model.label} cannot be installed in {activeMeta.emoji} {activeMeta.label}</h2>
+          </div>
+          <button className={styles.close} onClick={onClose} aria-label="Close"><IconX size={18} /></button>
+        </div>
+        <div className={styles.grid}>
+          <section className={styles.card}>
+            <h3><IconTool size={15} /> Switch tool</h3>
+            <p className={styles.muted}>This provider can be configured in these tools. Pick one and FCM installs the endpoint.</p>
+            <div className={styles.stack}>
+              {compatibleTools.map((mode) => {
+                const meta = getToolMeta(mode)
+                return (
+                  <button key={mode} className={styles.option} onClick={() => onSwitchToolLaunch?.(mode, model)}>
+                    <span>{meta.emoji}</span>
+                    <strong>{meta.label}</strong>
+                  </button>
+                )
+              })}
+            </div>
+          </section>
+          <section className={styles.card}>
+            <h3><IconPlugConnected size={15} /> Similar models</h3>
+            <p className={styles.muted}>Or keep {activeMeta.label} and install a compatible model close to the same SWE score.</p>
+            <div className={styles.stack}>
+              {similar.length === 0 && <p className={styles.muted}>No close compatible alternative found yet.</p>}
+              {similar.map((candidate) => (
+                <button key={`${candidate.providerKey}/${candidate.modelId}`} className={styles.option} onClick={() => onLaunchSimilar?.(candidate)}>
+                  <span>{candidate.tier}</span>
+                  <strong>{candidate.label}</strong>
+                  <small>{candidate.providerKey} · {candidate.sweScore}</small>
+                </button>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

package/web/src/components/launch/LaunchButton.jsx

@@ -0,0 +1,30 @@
+/**
+ * @file web/src/components/launch/LaunchButton.jsx
+ * @description Reusable M3 endpoint install action for table rows, DetailPanel, and Recommend results.
+ * @functions LaunchButton → renders a plug button that installs the selected model endpoint
+ * @exports LaunchButton
+ */
+import { IconPlugConnected } from '@tabler/icons-react'
+import { getToolMeta } from '../../../../src/core/tool-metadata.js'
+import styles from './LaunchButton.module.css'
+
+export default function LaunchButton({ model, toolMode = 'opencode', onLaunch, variant = 'default', disabled = false }) {
+  const meta = getToolMeta(toolMode)
+  const label = variant === 'icon' ? 'Install endpoint' : `Install endpoint in ${meta.emoji} ${meta.label}`
+  return (
+    <button
+      type="button"
+      className={`${styles.button} ${styles[variant] || ''}`}
+      disabled={disabled || !model}
+      onClick={(event) => {
+        event.stopPropagation()
+        if (model) onLaunch?.(model)
+      }}
+      title={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Select a model first'}
+      aria-label={model ? `Install ${model.label} endpoint in ${meta.label}` : 'Install selected model endpoint'}
+    >
+      <IconPlugConnected size={variant === 'icon' ? 13 : 14} stroke={1.8} />
+      {variant !== 'icon' && <span>{label}</span>}
+    </button>
+  )
+}

package/web/src/components/launch/LaunchButton.module.css

@@ -0,0 +1,35 @@
+/** @file web/src/components/launch/LaunchButton.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 12px;
+  border: 1px solid rgba(61, 220, 132, 0.45);
+  border-radius: 6px;
+  background: rgba(61, 220, 132, 0.12);
+  color: #3ddc84;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  transition: transform 120ms, background 120ms, border-color 120ms;
+}
+.button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: rgba(61, 220, 132, 0.20);
+  border-color: rgba(61, 220, 132, 0.75);
+}
+.button:disabled { opacity: 0.45; cursor: not-allowed; }
+.icon {
+  width: 26px;
+  height: 24px;
+  padding: 0;
+  opacity: 0.72;
+}
+.icon:hover:not(:disabled) { opacity: 1; }
+:global([data-theme="light"]) .button {
+  color: #087d42;
+  border-color: rgba(8, 125, 66, 0.35);
+  background: rgba(8, 125, 66, 0.08);
+}

package/web/src/components/launch/LaunchModal.module.css

@@ -0,0 +1,125 @@
+/** @file web/src/components/launch/LaunchModal.module.css */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(4px);
+}
+.modal,
+.modalWide {
+  width: min(560px, 96vw);
+  max-height: min(760px, 92vh);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  background: var(--color-bg-elevated);
+  color: var(--color-text);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+}
+.modalWide { width: min(920px, 96vw); }
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--color-border);
+}
+.header h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0 0;
+  font-size: 18px;
+}
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent);
+  font-size: 11px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: .9px;
+}
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--color-border);
+  border-radius: 7px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.close:hover { color: var(--color-text); background: var(--color-bg-hover); }
+.body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
+.command {
+  display: block;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-accent);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.note,
+.muted { color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
+.docs { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); font-weight: 700; text-decoration: none; }
+.error { color: #ff5a7a; font-weight: 700; }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 22px 20px;
+  border-top: 1px solid var(--color-border);
+}
+.primary,
+.secondary,
+.option {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 800;
+}
+.primary {
+  padding: 9px 14px;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  border-color: var(--color-accent);
+}
+.primary:disabled { opacity: .55; cursor: not-allowed; }
+.secondary {
+  padding: 9px 14px;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
+.card {
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-surface);
+}
+.card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 14px; }
+.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+.option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  text-align: left;
+}
+.option:hover { border-color: var(--color-accent); background: var(--color-bg-hover); }
+.option small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
+@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }