/* ============================================================================= webmcp.css - Modes de vue + console jouable + confirmation (Prompt 9) - Console jouable : vit DANS l'inspecteur (skin dev sombre → tokens --rs-dev-*). - Confirmation human-in-the-loop : modale sur (skin clair → tokens --rs-*). - Vue « Agent fetcher » : placeholder propre (Prompt 10). ========================================================================== */ /* ============================================================================= 1. SWITCH 3 MODES DE VUE ========================================================================== */ /* Mode « Agent fetcher » : on remplace le storefront par la vue lisible-IA. */ #fetcher-view { padding: var(--rs-sp-5); } [data-view-mode="fetcher"] #storefront { display: none; } [data-view-mode="fetcher"] #fetcher-view { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* EXCEPTION page méthodo (fusionnée humains/agents) : elle EMBARQUE déjà la vue fetcher dans sa moitié « Pour les agents ». On garde donc la page visible et on masque l'overlay global, même en mode « Agent fetcher » (les boutons de mode défilent vers la bonne moitié, cf. wireMethodoViewModeScroll). */ [data-route="methodo"][data-view-mode="fetcher"] #storefront { display: block; } [data-route="methodo"][data-view-mode="fetcher"] #fetcher-view { display: none; } /* Mode « Agent pilote » : repère visuel discret (l'inspecteur jouable est la star). */ [data-view-mode="pilot"] .app-topbar { box-shadow: inset 0 -2px 0 var(--rs-dev-accent); } [data-view-mode="pilot"] #viewmode-switch .rs-segment__opt[data-mode="pilot"].is-active { color: var(--rs-secondary); } /* (i) du switch de modes (topbar sombre → variante on-dark gérée par le composant) */ .app-topbar .rs-infotip__btn { border-color: rgba(255,255,255,0.4); color: #fff; } /* ============================================================================= 2. CONSOLE JOUABLE (onglet « Console » de l'inspecteur, sombre) ========================================================================== */ /* Encart d'avertissement WebMCP (Draft, API mouvante) */ .wm-banner { display: flex; align-items: flex-start; gap: var(--rs-sp-2); background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: var(--rs-radius-sm); padding: var(--rs-sp-3); margin-bottom: var(--rs-sp-3); } .wm-banner__icon { color: #fbbf24; font-size: var(--rs-fs-md); line-height: 1.2; } .wm-banner__body { flex: 1; min-width: 0; } .wm-banner__title { display: block; color: #fbbf24; font-size: var(--rs-fs-sm); margin-bottom: 2px; } .wm-banner__text { margin: 0; font-size: var(--rs-fs-xs); color: var(--rs-dev-ink-soft); line-height: 1.5; } /* Statut de détection de l'API */ .wm-detect { display: flex; align-items: center; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-3); font-size: var(--rs-fs-xs); color: var(--rs-dev-ink-soft); } .wm-detect__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .wm-detect__dot.is-on { background: #34d399; box-shadow: 0 0 7px #34d399; } .wm-detect__dot.is-off { background: var(--rs-dev-ink-soft); } .wm-detect__txt { line-height: 1.5; } .wm-intro { font-size: var(--rs-fs-sm); color: var(--rs-dev-ink); line-height: 1.5; margin-bottom: var(--rs-sp-3); } /* Sélecteur de tool */ .wm-picker { width: 100%; font-family: var(--rs-mono); font-size: var(--rs-fs-sm); background: var(--rs-dev-bg-2); color: var(--rs-dev-ink); border: 1px solid var(--rs-dev-line); border-radius: var(--rs-radius-sm); padding: 8px 10px; margin-bottom: var(--rs-sp-3); } .wm-picker:focus { outline-color: var(--rs-dev-accent); } /* Détail du tool sélectionné */ .wm-detail { display: block; } .wm-tool-head { display: flex; align-items: center; gap: var(--rs-sp-2); flex-wrap: wrap; margin-bottom: var(--rs-sp-2); } .wm-tool-name { font-family: var(--rs-mono); font-weight: 700; font-size: var(--rs-fs-md); color: var(--rs-dev-ink); background: var(--rs-dev-bg-2); border: 1px solid var(--rs-dev-line); border-radius: var(--rs-radius-sm); padding: 2px 8px; } .wm-tool-desc { font-size: var(--rs-fs-sm); color: var(--rs-dev-ink-soft); font-style: italic; line-height: 1.5; margin: 0 0 var(--rs-sp-3); } /* Badges (maturité / mode source / lecture-écriture) */ .wm-mat { font-family: var(--rs-mono); font-weight: 800; font-size: var(--rs-fs-xs); color: var(--rs-dev-bg); border-radius: 4px; padding: 1px 7px; } .wm-mat--p { background: #34d399; } .wm-mat--e { background: #4fd1c5; } .wm-mat--s { background: #a78bfa; } .wm-srcmode { font-size: var(--rs-fs-xs); font-weight: 700; border-radius: var(--rs-radius-pill); padding: 1px 8px; border: 1px solid currentColor; } .wm-srcmode--live { color: #34d399; } .wm-srcmode--cached { color: #fbbf24; } .wm-srcmode--mock { color: #f472b6; } .wm-srcmode--rag { color: #38bdf8; } .wm-srcmode--internal { color: #818cf8; } .wm-badge { font-size: var(--rs-fs-xs); font-weight: 700; border-radius: var(--rs-radius-pill); padding: 1px 8px; } .wm-badge--write { color: #fbbf24; background: rgba(251, 191, 36, 0.14); } .wm-badge--read { color: #34d399; background: rgba(52, 211, 153, 0.14); } /* Lot 13 : action sensible (sensitive_commit) = confirmation humaine obligatoire. */ .wm-badge--sensitive { color: #f87171; background: rgba(248, 113, 113, 0.14); } /* Formulaire d'arguments */ .wm-form { display: flex; flex-direction: column; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-3); } .wm-field { display: flex; flex-direction: column; gap: 3px; } .wm-field__label { font-family: var(--rs-mono); font-size: var(--rs-fs-xs); color: var(--rs-dev-key); } .wm-field__input { font-family: var(--rs-mono); font-size: var(--rs-fs-sm); background: var(--rs-dev-bg-2); color: var(--rs-dev-ink); border: 1px solid var(--rs-dev-line); border-radius: var(--rs-radius-sm); padding: 7px 9px; } .wm-field__input[type="checkbox"] { width: 18px; height: 18px; align-self: flex-start; } .wm-field__input:focus { outline-color: var(--rs-dev-accent); } .wm-field__desc { font-size: var(--rs-fs-xs); color: var(--rs-dev-ink-soft); line-height: 1.4; } .wm-noargs { font-size: var(--rs-fs-sm); color: var(--rs-dev-ink-soft); margin-bottom: var(--rs-sp-3); } /* Bouton Exécuter */ .wm-run-row { display: flex; align-items: center; gap: var(--rs-sp-2); flex-wrap: wrap; margin-bottom: var(--rs-sp-3); } .wm-run[disabled] { opacity: 0.5; cursor: progress; } .wm-run-hint { font-size: var(--rs-fs-xs); color: #fbbf24; } /* Résultat */ .wm-result:empty { display: none; } .wm-result__loading { font-size: var(--rs-fs-sm); color: var(--rs-dev-accent); } .wm-result__head { display: flex; align-items: center; gap: var(--rs-sp-2); margin-bottom: var(--rs-sp-2); } .wm-result__badge { font-size: var(--rs-fs-xs); font-weight: 700; border-radius: var(--rs-radius-pill); padding: 2px 9px; } .wm-result__badge.is-ok { color: #34d399; background: rgba(52, 211, 153, 0.14); } .wm-result__badge.is-error { color: #f87171; background: rgba(248, 113, 113, 0.14); } .wm-result__badge.is-cancelled { color: #fbbf24; background: rgba(251, 191, 36, 0.14); } .wm-result__sub { font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rs-dev-ink-soft); font-weight: 700; margin: var(--rs-sp-2) 0 4px; } /* ============================================================================= 3. CONFIRMATION HUMAN-IN-THE-LOOP (modale claire sur ) ========================================================================== */ .wm-confirm-backdrop { position: fixed; inset: 0; z-index: var(--rs-z-tooltip); display: grid; place-items: center; padding: var(--rs-sp-5); background: rgba(22, 34, 46, 0.45); opacity: 0; transition: opacity var(--rs-dur) var(--rs-ease); } .wm-confirm-backdrop.is-open { opacity: 1; } .wm-confirm { width: min(460px, 100%); background: var(--rs-surface); color: var(--rs-ink); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-lg); padding: var(--rs-sp-5); transform: translateY(8px) scale(0.98); transition: transform var(--rs-dur) var(--rs-ease); } .wm-confirm-backdrop.is-open .wm-confirm { transform: translateY(0) scale(1); } .wm-confirm__title { font-size: var(--rs-fs-lg); color: var(--rs-secondary); margin-bottom: var(--rs-sp-2); display: inline-block; } .wm-confirm .wm-badge--write { margin-left: var(--rs-sp-2); color: var(--rs-cached); background: var(--rs-cached-bg); } .wm-confirm .wm-badge--sensitive { margin-left: var(--rs-sp-2); color: #b3261e; background: #fdecea; } .wm-confirm__text { font-size: var(--rs-fs-sm); color: var(--rs-ink-soft); line-height: 1.55; margin: var(--rs-sp-2) 0 var(--rs-sp-3); } .wm-confirm__args { background: var(--rs-secondary-700); color: var(--rs-dev-ink); border: 1px solid var(--rs-dev-line); margin-bottom: var(--rs-sp-4); } .wm-confirm__actions { display: flex; justify-content: flex-end; gap: var(--rs-sp-2); } /* La vue « Agent fetcher » riche (Prompt 10) est stylée dans fetcher.css. */