free-coding-models 0.5.6 → 0.5.8

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

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