free-coding-models 0.5.85 → 0.5.87

package/web/src/components/settings/SettingsView.module.css

@@ -1,550 +0,0 @@
-.page {
-  padding: 24px;
-}
-
-.pageHeader {
-  margin-bottom: 24px;
-}
-
-.pageTitle {
-  font-size: 24px;
-  font-weight: 800;
-  margin: 0 0 6px;
-}
-
-.pageSubtitle {
-  font-size: 13px;
-  color: var(--color-text-muted);
-  line-height: 1.5;
-  margin: 0;
-}
-
-.pageSubtitle code {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  background: var(--color-surface);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.loading {
-  text-align: center;
-  padding: 60px 0;
-  color: var(--color-text-muted);
-}
-
-/* ─── M2: feature toggles section ─── */
-.featureSection {
-  margin-bottom: 28px;
-  padding: 18px 20px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-}
-.sectionHeading {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--color-text-muted);
-  margin: 0 0 14px;
-}
-.featureGrid {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.featureRow {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 10px 12px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  transition: background 120ms;
-}
-.featureRow:hover { background: var(--color-surface); }
-.featureLabel {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  flex: 1;
-  min-width: 0;
-}
-.featureLabel > svg {
-  flex-shrink: 0;
-  color: var(--color-text-muted);
-  margin-top: 2px;
-}
-.featureTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text);
-  line-height: 1.4;
-}
-.featureDesc {
-  font-size: 11px;
-  color: var(--color-text-muted);
-  line-height: 1.5;
-  margin-top: 2px;
-}
-.featureActions {
-  display: flex;
-  gap: 6px;
-  flex-shrink: 0;
-}
-.select {
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  padding: 5px 8px;
-  font-size: 12px;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  outline: none;
-  min-width: 130px;
-}
-.select:focus { border-color: var(--color-accent); }
-
-.toggleSwitch {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-  flex-shrink: 0;
-}
-.toggleSwitch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.toggleSlider {
-  position: absolute;
-  inset: 0;
-  background: var(--color-border);
-  border-radius: 20px;
-  cursor: pointer;
-  transition: background 150ms;
-}
-.toggleSlider::before {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  width: 16px;
-  height: 16px;
-  background: var(--color-text);
-  border-radius: 50%;
-  transition: transform 150ms;
-}
-.toggleSwitch input:checked + .toggleSlider {
-  background: var(--color-accent);
-}
-.toggleSwitch input:checked + .toggleSlider::before {
-  transform: translateX(16px);
-}
-
-.smallBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  font-family: var(--font-sans);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.smallBtn:hover { background: var(--color-bg-hover); border-color: var(--color-text-muted); }
-.smallBtn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.notice {
-  margin-top: 12px;
-  padding: 8px 12px;
-  background: var(--color-info-dim);
-  color: var(--color-info);
-  border: 1px solid var(--color-info);
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-/* ─── M2: per-provider test badge ─── */
-.testBadge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
-  border-radius: 5px;
-  font-size: 10px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  margin-bottom: 8px;
-  align-self: flex-start;
-  width: fit-content;
-}
-.testBadge.test_ok { background: var(--color-success-dim); color: var(--color-success); border: 1px solid var(--color-success); }
-.testBadge.test_auth_error { background: var(--color-danger-dim); color: var(--color-danger); border: 1px solid var(--color-danger); }
-.testBadge.test_rate_limited { background: var(--color-warning-dim); color: var(--color-warning); border: 1px solid var(--color-warning); }
-.testBadge.test_no_callable_model { background: var(--color-warning-dim); color: var(--color-warning); border: 1px solid var(--color-warning); }
-.testBadge.test_fail { background: var(--color-danger-dim); color: var(--color-danger); border: 1px solid var(--color-danger); }
-.testBadge.test_missing_key { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
-.testBadge.test_pending { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
-
-.testSpinner {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border: 2px solid rgba(180, 0, 255, 0.3);
-  border-top-color: #b400ff;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-@keyframes spin { to { transform: rotate(360deg); } }
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-}
-
-.toolbarSearch {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0 12px;
-  height: 36px;
-  flex: 1;
-  min-width: 200px;
-}
-
-.toolbarSearch svg {
-  color: var(--color-text-dim);
-  flex-shrink: 0;
-}
-
-.toolbarSearch input {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--color-text);
-  font-size: 13px;
-  font-family: var(--font-sans);
-}
-
-.toolbarSearch input::placeholder {
-  color: var(--color-text-dim);
-}
-
-.toolbarActions {
-  display: flex;
-  gap: 8px;
-}
-
-.toolbarBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  background: var(--color-surface);
-  color: var(--color-text);
-  transition: all var(--transition-fast);
-  font-family: var(--font-sans);
-}
-
-.toolbarBtn:hover {
-  background: var(--color-bg-hover);
-  border-color: var(--color-border-hover);
-}
-
-.providers {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.card {
-  background: var(--color-bg-card);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: border-color var(--transition-fast);
-}
-
-.card:hover {
-  border-color: var(--color-border-hover);
-}
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.cardHeader:hover {
-  background: var(--color-bg-hover);
-}
-
-.cardIcon {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  font-size: 18px;
-  background: var(--color-accent-dim);
-  flex-shrink: 0;
-}
-
-.cardInfo {
-  flex: 1;
-  min-width: 0;
-}
-
-.cardName {
-  font-weight: 700;
-  font-size: 14px;
-}
-
-.cardMeta {
-  font-size: 11px;
-  color: var(--color-text-muted);
-  margin-top: 2px;
-}
-
-.cardStatus {
-  font-size: 11px;
-  font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 999px;
-  flex-shrink: 0;
-}
-
-.statusConfigured {
-  background: var(--color-success-dim);
-  color: var(--color-success);
-}
-
-.statusMissing {
-  background: var(--color-warning-dim);
-  color: var(--color-warning);
-}
-
-.toggleIcon {
-  color: var(--color-text-dim);
-  transition: transform var(--transition-fast);
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-.toggleIconExpanded {
-  transform: rotate(180deg);
-}
-
-.cardBody {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height var(--transition-medium);
-  border-top: 0px solid transparent;
-}
-
-.cardExpanded .cardBody {
-  max-height: 500px;
-  border-top: 1px solid var(--color-border);
-}
-
-.cardContent {
-  padding: 16px 20px;
-}
-
-.keyGroup {
-  margin-bottom: 12px;
-}
-
-.keyLabel {
-  display: block;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 6px;
-}
-
-.keyDisplay {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  margin-bottom: 8px;
-}
-
-.keyDisplayValue {
-  flex: 1;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--color-text-muted);
-  word-break: break-all;
-}
-
-.keyDisplayActions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.actionBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-  cursor: pointer;
-  font-size: 12px;
-  transition: all var(--transition-fast);
-}
-
-.actionBtn:hover {
-  background: var(--color-bg-hover);
-}
-
-.actionBtnDanger {
-  background: var(--color-danger-dim);
-  color: var(--color-danger);
-  border-color: rgba(255, 68, 68, 0.2);
-}
-
-.actionBtnDanger:hover {
-  background: rgba(255, 68, 68, 0.2);
-}
-
-.keyInputRow {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.keyInput {
-  flex: 1;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  font-size: 13px;
-  font-family: var(--font-mono);
-  color: var(--color-text);
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-
-.keyInput:focus {
-  border-color: var(--color-accent);
-}
-
-.keyInput::placeholder {
-  color: var(--color-text-dim);
-}
-
-.saveBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  border: 1px solid rgba(0, 255, 136, 0.2);
-  border-radius: var(--radius-sm);
-  background: var(--color-success-dim);
-  color: var(--color-success);
-  cursor: pointer;
-  font-family: var(--font-sans);
-  transition: all var(--transition-fast);
-}
-
-.saveBtn:hover {
-  background: rgba(0, 255, 136, 0.15);
-}
-
-.enabledRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 12px;
-  border-top: 1px solid var(--color-border);
-  margin-top: 12px;
-}
-
-.enabledLabel {
-  font-size: 12px;
-  color: var(--color-text-muted);
-  font-weight: 500;
-}
-
-.toggleSwitch {
-  position: relative;
-  width: 44px;
-  height: 24px;
-  cursor: pointer;
-}
-
-.toggleSwitch input {
-  display: none;
-}
-
-.toggleSlider {
-  position: absolute;
-  inset: 0;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  transition: all var(--transition-fast);
-}
-
-.toggleSlider::after {
-  content: '';
-  position: absolute;
-  left: 3px;
-  top: 3px;
-  width: 16px;
-  height: 16px;
-  background: var(--color-text-dim);
-  border-radius: 50%;
-  transition: all var(--transition-fast);
-}
-
-.toggleSwitch input:checked + .toggleSlider {
-  background: var(--color-accent-dim);
-  border-color: var(--color-accent);
-}
-
-.toggleSwitch input:checked + .toggleSlider::after {
-  transform: translateX(20px);
-  background: var(--color-accent);
-}

package/web/src/components/tools/ToolPicker.jsx

@@ -1,86 +0,0 @@
-/**
- * @file web/src/components/tools/ToolPicker.jsx
- * @description Header/dropdown control for the active Web endpoint-install target.
- * Mirrors the TUI install target flow with a mouse-first dropdown and cycle button.
- *
- * @functions
- *   → ToolPicker — renders active tool, cycle control, and selectable tool list
- * @exports ToolPicker
- */
-import { useEffect, useRef, useState } from 'react'
-import { IconChevronDown, IconRefresh } from '@tabler/icons-react'
-import { TOOL_METADATA, getToolMeta } from '../../../../src/core/tool-metadata.js'
-import { INSTALL_ENDPOINT_TOOL_MODES } from '../../utils/m3.js'
-import styles from './ToolPicker.module.css'
-
-export default function ToolPicker({ toolMode = 'opencode', onSetToolMode, onCycleToolMode, compact = false, tools = INSTALL_ENDPOINT_TOOL_MODES }) {
-  const [open, setOpen] = useState(false)
-  const wrapRef = useRef(null)
-  const active = getToolMeta(toolMode)
-
-  useEffect(() => {
-    if (!open) return
-    const onPointer = (event) => {
-      if (wrapRef.current && !wrapRef.current.contains(event.target)) setOpen(false)
-    }
-    const onKey = (event) => { if (event.key === 'Escape') setOpen(false) }
-    document.addEventListener('mousedown', onPointer)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onPointer)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [open])
-
-  return (
-    <div className={`${styles.wrap} ${compact ? styles.compact : ''}`} ref={wrapRef}>
-      <button
-        type="button"
-        className={styles.trigger}
-        onClick={() => setOpen((value) => !value)}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        title={`Install endpoint into: ${active.label}`}
-      >
-        <span className={styles.emoji}>{active.emoji}</span>
-        <span className={styles.label}>{compact ? active.label.replace(/ CLI$/, '') : active.label}</span>
-        <IconChevronDown size={13} stroke={1.7} />
-      </button>
-      <button
-        type="button"
-        className={styles.cycle}
-        onClick={onCycleToolMode}
-        title="Cycle endpoint target"
-        aria-label="Cycle endpoint target"
-      >
-        <IconRefresh size={13} stroke={1.7} />
-      </button>
-
-      {open && (
-        <div className={styles.menu} role="listbox" aria-label="Endpoint install target">
-          {tools.map((mode) => {
-            const meta = TOOL_METADATA[mode]
-            const activeMode = mode === toolMode
-            return (
-              <button
-                type="button"
-                key={mode}
-                className={`${styles.item} ${activeMode ? styles.itemActive : ''}`}
-                onClick={() => { onSetToolMode?.(mode); setOpen(false) }}
-                role="option"
-                aria-selected={activeMode}
-              >
-                <span className={styles.itemEmoji}>{meta.emoji}</span>
-                <span className={styles.itemText}>
-                  <strong>{meta.label}</strong>
-                  <small>{meta.flag}</small>
-                </span>
-                {activeMode && <span className={styles.activeDot}>●</span>}
-              </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}

package/web/src/components/tools/ToolPicker.module.css

@@ -1,97 +0,0 @@
-/**
- * @file web/src/components/tools/ToolPicker.module.css
- * @description Compact header dropdown styles for the M3 tool-mode picker.
- */
-.wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.trigger {
-  height: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 12px;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 800;
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: var(--color-accent);
-  color: var(--color-bg);
-  border: 1px solid var(--color-accent);
-  cursor: pointer;
-  transition: all 150ms var(--ease-out);
-}
-.cycle {
-  height: 30px;
-  width: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 150ms var(--ease-out);
-}
-.trigger:hover {
-  background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
-  color: var(--color-bg);
-}
-.cycle:hover {
-  background: var(--color-bg-hover);
-  border-color: var(--color-border-hover);
-  color: var(--color-accent);
-}
-.emoji { font-size: 14px; line-height: 1; }
-.label { white-space: nowrap; }
-.menu {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 7px);
-  width: 280px;
-  max-height: min(520px, calc(100vh - 90px));
-  overflow: auto;
-  padding: 5px;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  background: var(--color-bg-elevated);
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
-  z-index: 250;
-}
-.item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 8px 9px;
-  border: 0;
-  border-radius: 7px;
-  color: var(--color-text);
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-}
-.item:hover { background: var(--color-bg-hover); }
-.itemActive {
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-}
-.itemEmoji { width: 22px; text-align: center; font-size: 16px; }
-.itemText { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
-.itemText strong { font-size: 12px; font-weight: 800; }
-.itemText small { color: var(--color-text-dim); font-family: var(--font-mono); font-size: 10px; }
-.activeDot { color: var(--color-accent); font-size: 10px; }
-.compact .trigger { width: 100%; justify-content: flex-start; }
-.compact .menu { left: 0; right: auto; }
-@media (max-width: 1024px) {
-  .label { display: none; }
-  .trigger { padding: 0 8px; }
-}