free-coding-models 0.5.5 → 0.5.8

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>
+  )
+}

package/web/src/components/install/InstallEndpointsView.module.css

@@ -0,0 +1,351 @@
+.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: 680px;
+  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);
+}
+
+.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); }
+}
+
+/* Steps */
+.steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border, #1e1e2e);
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted, #555);
+}
+
+.stepActive {
+  color: var(--text-primary, #e0e0e0);
+  font-weight: 600;
+}
+
+.stepDone {
+  color: #00c864;
+}
+
+.stepNum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+}
+
+.stepActive .stepNum {
+  background: rgba(0, 200, 100, 0.15);
+  border-color: rgba(0, 200, 100, 0.3);
+  color: #00c864;
+}
+
+.stepDone .stepNum {
+  background: rgba(0, 200, 100, 0.15);
+  border-color: #00c864;
+  color: #00c864;
+}
+
+.stepLabel {
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* Body */
+.body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 300px;
+}
+
+.stepContent {}
+
+.stepDesc {
+  font-size: 14px;
+  color: var(--text-secondary, #aaa);
+  margin: 0 0 16px 0;
+}
+
+.loading, .empty {
+  color: var(--text-muted, #666);
+  font-size: 13px;
+  text-align: center;
+  padding: 30px 0;
+}
+
+/* Pick Grid (Provider + Tool) */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+}
+
+.pickCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 10px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text-secondary, #aaa);
+  font-size: 13px;
+  transition: all 0.15s ease;
+  &:hover { border-color: var(--text-muted, #666); color: var(--text-primary, #e0e0e0); }
+}
+
+.pickActive {
+  border-color: #00c864;
+  background: rgba(0, 200, 100, 0.08);
+  color: #00c864;
+}
+
+.pickEmoji {
+  font-size: 20px;
+}
+
+.pickLabel {
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.pickMeta {
+  font-size: 10px;
+  color: var(--text-muted, #888);
+}
+
+/* Scope Toggle */
+.scopeToggle {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.scopeBtn {
+  padding: 6px 14px;
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 6px;
+  background: var(--bg-secondary, #14141f);
+  color: var(--text-secondary, #aaa);
+  font-size: 12px;
+  cursor: pointer;
+  &:hover { border-color: var(--text-muted, #888); }
+}
+
+.scopeActive {
+  background: rgba(0, 200, 100, 0.1);
+  border-color: rgba(0, 200, 100, 0.3);
+  color: #00c864;
+  font-weight: 600;
+}
+
+/* Model Selection */
+.modelGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.modelCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary, #aaa);
+  font-size: 12px;
+  &:hover { border-color: var(--text-muted, #666); }
+}
+
+.modelSelected {
+  border-color: #00c864;
+  background: rgba(0, 200, 100, 0.08);
+  color: #00c864;
+}
+
+.modelName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modelTier {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 4px;
+  background: rgba(0, 200, 255, 0.1);
+  color: #00c8ff;
+  border-radius: 3px;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.allNotice {
+  color: var(--text-muted, #888);
+  font-size: 13px;
+  text-align: center;
+  padding: 30px 0;
+}
+
+/* Install State */
+.installingState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 0;
+  color: var(--text-secondary, #aaa);
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+.doneState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 30px 0;
+  text-align: center;
+  h3 { margin: 0; color: #00c864; font-size: 18px; }
+  p { margin: 0; color: var(--text-secondary, #aaa); font-size: 13px; }
+}
+
+.installPath {
+  font-size: 11px;
+  color: var(--text-muted, #888);
+  background: var(--bg-secondary, #14141f);
+  padding: 4px 10px;
+  border-radius: 4px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border, #1e1e2e);
+}
+
+.backBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 14px;
+  background: var(--bg-secondary, #14141f);
+  border: 1px solid var(--border, #1e1e2e);
+  border-radius: 8px;
+  color: var(--text-secondary, #aaa);
+  font-size: 13px;
+  cursor: pointer;
+  &:hover { color: var(--text-primary, #e0e0e0); }
+}
+
+.nextBtn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 18px;
+  background: #00c864;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: auto;
+  &:hover { background: #00d874; }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+
+.doneBtn {
+  padding: 8px 24px;
+  background: #00c864;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: auto;
+  &:hover { background: #00d874; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}