ft-scout 9.0.0 → 9.0.2

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Multi-Page Application Engine v9.0.0
+   FrontTerrain Scout — Multi-Page Application Engine v9.0.2
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -185,14 +185,35 @@ async function checkPaymentRedirectCallback() {
 }
 
 // Dynamic Pricing Loader & Admin Navigation Hook
+function loadPricingFromStorage() {
+    try {
+        const stored = localStorage.getItem('scout_pricing_config');
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            if (parsed && typeof parsed === 'object' && parsed.pro) {
+                state.pricing = { ...state.pricing, ...parsed };
+            }
+        }
+    } catch { }
+}
+
 async function loadDynamicPricing() {
+    // 1. Instantly apply locally saved admin pricing configuration
+    loadPricingFromStorage();
+    renderTiersUI();
+
+    // 2. Fetch fresh server pricing if connected
     try {
         const res = await fetch('/api/pricing');
         if (res.ok) {
-            const data = await res.json();
-            if (data && data.success && data.pricing) {
-                state.pricing = data.pricing;
-                renderTiersUI();
+            const contentType = res.headers.get('content-type') || '';
+            if (contentType.includes('application/json')) {
+                const data = await res.json();
+                if (data && data.success && data.pricing) {
+                    state.pricing = data.pricing;
+                    localStorage.setItem('scout_pricing_config', JSON.stringify(data.pricing));
+                    renderTiersUI();
+                }
             }
         }
     } catch { }
@@ -240,9 +261,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     await loadDynamicPricing();
     await checkPaymentRedirectCallback();
 
+    window.addEventListener('storage', (e) => {
+        if (e.key === 'scout_pricing_config') {
+            loadPricingFromStorage();
+            renderTiersUI();
+        }
+    });
+
     if (getEl('pacman-canvas')) {
         initPacmanGame();
     }
+
+    initAutonomousAgentMonitor();
 });
 
 // Time Helper Function for Dynamic Relative Timestamps
@@ -350,6 +380,7 @@ function loadTierAndCreditsFromStorage() {
     state.customApiKey = localStorage.getItem('scout_byok_key') || '';
     state.customBaseUrl = localStorage.getItem('scout_byok_endpoint') || '';
 
+    loadPricingFromStorage();
     checkSubscriptionExpiration();
 }
 
@@ -376,12 +407,14 @@ function openCheckoutModal(targetTier) {
     let quota = '100 Credits / mo';
 
     if (targetTier === 'pro') {
-        const inr = isAnnual ? (p.pro?.annualPriceINR || 45) : (p.pro?.monthlyPriceINR || 50);
-        price = inr.toLocaleString('en-IN');
+        const isOffer = p.pro?.offerActive && !isAnnual && p.pro?.offerPriceUSD !== undefined;
+        const usd = isOffer ? p.pro.offerPriceUSD : (isAnnual ? (p.pro?.annualPriceUSD ?? 0.79) : (p.pro?.monthlyPriceUSD ?? 0.99));
+        price = usd.toString();
         quota = `${(p.pro?.credits || 1000).toLocaleString()} Credits / mo`;
     } else if (targetTier === 'enterprise') {
-        const inr = isAnnual ? (p.enterprise?.annualPriceINR || 37990) : (p.enterprise?.monthlyPriceINR || 3999);
-        price = inr.toLocaleString('en-IN');
+        const isOffer = p.enterprise?.offerActive && !isAnnual && p.enterprise?.offerPriceUSD !== undefined;
+        const usd = isOffer ? p.enterprise.offerPriceUSD : (isAnnual ? (p.enterprise?.annualPriceUSD ?? 39) : (p.enterprise?.monthlyPriceUSD ?? 49));
+        price = usd.toString();
         quota = `${(p.enterprise?.credits || 10000).toLocaleString()} Credits / mo`;
     }
 
@@ -389,7 +422,7 @@ function openCheckoutModal(targetTier) {
     if (getEl('checkout-billing-cycle')) getEl('checkout-billing-cycle').innerText = isAnnual ? 'Billed Annually (Save more)' : 'Billed Monthly';
     if (getEl('checkout-plan-price')) getEl('checkout-plan-price').innerText = price;
     const checkoutCurrency = document.querySelector('.checkout-price-display .price-currency');
-    if (checkoutCurrency) checkoutCurrency.innerText = '₹';
+    if (checkoutCurrency) checkoutCurrency.innerText = '$';
     if (getEl('checkout-price-period')) getEl('checkout-price-period').innerText = isAnnual ? '/ mo (annual)' : '/ mo';
     if (getEl('checkout-quota-val')) getEl('checkout-quota-val').innerText = quota;
 
@@ -448,46 +481,48 @@ function confirmScheduleDowngrade() {
 
 function confirmImmediateDowngrade() {
     const targetTier = pendingDowngradeTier || 'free';
+    const previousPaidTier = state.paidTier || (state.currentTier !== 'free' ? state.currentTier : null);
+
     state.currentTier = targetTier;
-    state.paidTier = targetTier === 'free' ? null : targetTier;
-    state.cancelAtPeriodEnd = false;
-    state.pendingDowngrade = null;
+    if (previousPaidTier && !isSubscriptionExpired()) {
+        state.paidTier = previousPaidTier;
+    } else {
+        state.paidTier = targetTier === 'free' ? null : targetTier;
+    }
+    state.cancelAtPeriodEnd = true;
+    state.pendingDowngrade = targetTier;
     state.creditsTotal = targetTier === 'pro' ? 1000 : (targetTier === 'enterprise' ? 10000 : 100);
-    state.creditsUsed = 0;
-    const now = new Date();
-    state.renewAt = new Date(now.getFullYear(), now.getMonth() + 1, 1, 0, 0, 0).toISOString();
+
     saveSessionToStorage();
     if (state.serverConnected) syncAuthWithServer();
     closeDowngradeModal();
     renderAllDynamicComponents();
-    showToast(`Downgraded to ${TIER_DETAILS[targetTier].name} immediately.`, 'info');
+    showToast(`Switched to ${TIER_DETAILS[targetTier].name}. You can resume ${TIER_DETAILS[previousPaidTier || 'pro']?.name || 'your plan'} anytime before ${formatRenewDate(state.renewAt)} without paying again!`, 'info');
 }
 
 function resumeSubscription() {
-    if (!state.currentTier || state.currentTier === 'free') {
-        if (state.paidTier && state.paidTier !== 'free' && !isSubscriptionExpired()) {
-            state.currentTier = state.paidTier;
-            state.creditsTotal = state.currentTier === 'pro' ? 1000 : 10000;
-        } else {
-            return;
-        }
-    }
+    const resumeTier = (state.paidTier && state.paidTier !== 'free' && !isSubscriptionExpired()) ? state.paidTier : (state.currentTier !== 'free' ? state.currentTier : 'pro');
+    state.currentTier = resumeTier;
+    state.paidTier = resumeTier;
     state.cancelAtPeriodEnd = false;
     state.pendingDowngrade = null;
-    state.paidTier = state.currentTier;
+    state.creditsTotal = resumeTier === 'pro' ? 1000 : (resumeTier === 'enterprise' ? 10000 : 100);
+
     saveSessionToStorage();
     if (state.serverConnected) syncAuthWithServer();
     renderAllDynamicComponents();
-    showToast(`🎉 Subscription resumed! Your ${TIER_DETAILS[state.currentTier].name} is active and will auto-renew.`, 'success');
+    showToast(`🎉 Subscription resumed! Your ${TIER_DETAILS[resumeTier].name} is active again with no extra charge.`, 'success');
 }
 
 // Render and initialize Razorpay button UI
 function renderRazorpayButton(targetTier) {
     const isAnnual = state.billingCycle === 'annual';
     const p = state.pricing || {};
+    const isProOffer = p.pro?.offerActive && !isAnnual && p.pro?.offerPriceINR !== undefined;
+    const isEntOffer = p.enterprise?.offerActive && !isAnnual && p.enterprise?.offerPriceINR !== undefined;
     const inrAmount = targetTier === 'enterprise'
-        ? (isAnnual ? (p.enterprise?.annualPriceINR || 37990) : (p.enterprise?.monthlyPriceINR || 3999))
-        : (isAnnual ? (p.pro?.annualPriceINR || 45) : (p.pro?.monthlyPriceINR || 50));
+        ? (isEntOffer ? p.enterprise.offerPriceINR : (isAnnual ? (p.enterprise?.annualPriceINR ?? 37990) : (p.enterprise?.monthlyPriceINR ?? 3999)))
+        : (isProOffer ? p.pro.offerPriceINR : (isAnnual ? (p.pro?.annualPriceINR ?? 45) : (p.pro?.monthlyPriceINR ?? 50)));
     const btnRzp = getEl('btn-razorpay-checkout');
     if (!btnRzp) return;
 
@@ -503,9 +538,11 @@ async function handleRazorpayCheckout() {
     const targetTier = pendingCheckoutTier || 'pro';
     const isAnnual = state.billingCycle === 'annual';
     const p = state.pricing || {};
+    const isProOffer = p.pro?.offerActive && !isAnnual && p.pro?.offerPriceINR !== undefined;
+    const isEntOffer = p.enterprise?.offerActive && !isAnnual && p.enterprise?.offerPriceINR !== undefined;
     const inrAmount = targetTier === 'enterprise'
-        ? (isAnnual ? (p.enterprise?.annualPriceINR || 37990) : (p.enterprise?.monthlyPriceINR || 3999))
-        : (isAnnual ? (p.pro?.annualPriceINR || 45) : (p.pro?.monthlyPriceINR || 50));
+        ? (isEntOffer ? p.enterprise.offerPriceINR : (isAnnual ? (p.enterprise?.annualPriceINR ?? 37990) : (p.enterprise?.monthlyPriceINR ?? 3999)))
+        : (isProOffer ? p.pro.offerPriceINR : (isAnnual ? (p.pro?.annualPriceINR ?? 45) : (p.pro?.monthlyPriceINR ?? 50)));
     const amountInPaise = inrAmount * 100; // minimum 100 paise
 
     const btnRzp = getEl('btn-razorpay-checkout');
@@ -1044,7 +1081,7 @@ function initTerminalSimulator() {
 `;
         } else if (lower.includes('status')) {
             response.innerHTML = `
-<span class="term-green">✔ Scout CLI Engine: v9.0.0 Online</span><br>
+<span class="term-green">✔ Scout CLI Engine: v9.0.2 Online</span><br>
 ↳ User: <strong>${escapeHtml(state.user ? state.user.name : 'Guest Session')}</strong><br>
 ↳ Active Subscription: <strong>${escapeHtml(TIER_DETAILS[state.currentTier].name)}</strong><br>
 ↳ Credit Quota: <strong>${state.byokEnabled ? 'BYOK Mode (Unlimited)' : `${state.creditsUsed} / ${state.creditsTotal} Credits Used`}</strong><br>
@@ -1289,18 +1326,33 @@ function renderTiersUI() {
 
     const isAnnual = state.billingCycle === 'annual';
     const p = state.pricing || {};
-    const proINR = isAnnual ? (p.pro?.annualPriceINR || 45) : (p.pro?.monthlyPriceINR || 50);
-    const entINR = isAnnual ? (p.enterprise?.annualPriceINR || 37990) : (p.enterprise?.monthlyPriceINR || 3999);
+    const isProOffer = p.pro?.offerActive && !isAnnual && p.pro?.offerPriceUSD !== undefined;
+    const isEntOffer = p.enterprise?.offerActive && !isAnnual && p.enterprise?.offerPriceUSD !== undefined;
 
-    if (getEl('price-pro-val')) getEl('price-pro-val').innerText = proINR;
-    if (getEl('price-pro-period')) getEl('price-pro-period').innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+    const proUSD = isProOffer ? p.pro.offerPriceUSD : (isAnnual ? (p.pro?.annualPriceUSD ?? 0.79) : (p.pro?.monthlyPriceUSD ?? 0.99));
+    const entUSD = isEntOffer ? p.enterprise.offerPriceUSD : (isAnnual ? (p.enterprise?.annualPriceUSD ?? 39) : (p.enterprise?.monthlyPriceUSD ?? 49));
+
+    if (getEl('price-pro-val')) {
+        if (isProOffer && p.pro?.monthlyPriceUSD) {
+            getEl('price-pro-val').innerHTML = `<s style="font-size: 0.55em; opacity: 0.55; margin-right: 6px;">$${p.pro.monthlyPriceUSD}</s>$${proUSD}`;
+        } else {
+            getEl('price-pro-val').innerText = proUSD;
+        }
+    }
+    if (getEl('price-pro-period')) getEl('price-pro-period').innerText = isProOffer ? `/ month (${p.pro?.offerBadge || 'PROMO OFFER'})` : (isAnnual ? '(billed annually)' : '/ month');
     const proCurrency = document.querySelector('#tier-card-pro .price-currency');
-    if (proCurrency) proCurrency.innerText = '₹';
+    if (proCurrency) proCurrency.innerText = isProOffer ? '' : '$';
 
-    if (getEl('price-ent-val')) getEl('price-ent-val').innerText = entINR.toLocaleString('en-IN');
-    if (getEl('price-ent-period')) getEl('price-ent-period').innerText = isAnnual ? '/ month (billed annually)' : '/ month';
+    if (getEl('price-ent-val')) {
+        if (isEntOffer && p.enterprise?.monthlyPriceUSD) {
+            getEl('price-ent-val').innerHTML = `<s style="font-size: 0.55em; opacity: 0.55; margin-right: 6px;">$${p.enterprise.monthlyPriceUSD}</s>$${entUSD}`;
+        } else {
+            getEl('price-ent-val').innerText = entUSD;
+        }
+    }
+    if (getEl('price-ent-period')) getEl('price-ent-period').innerText = isEntOffer ? `/ month (${p.enterprise?.offerBadge || 'PROMO OFFER'})` : (isAnnual ? '(billed annually)' : '/ month');
     const entCurrency = document.querySelector('#tier-card-enterprise .price-currency');
-    if (entCurrency) entCurrency.innerText = '₹';
+    if (entCurrency) entCurrency.innerText = isEntOffer ? '' : '$';
 
     ['free', 'pro', 'enterprise'].forEach((t) => {
         const card = getEl(`tier-card-${t}`);
@@ -1333,7 +1385,7 @@ function renderTiersUI() {
             } else if (t === 'pro') {
                 if (state.paidTier === 'pro' && !isSubscriptionExpired()) {
                     btn.className = 'btn btn-primary btn-block btn-select-tier';
-                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Reactivate Pro (Active until ${formattedDate})`;
+                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Resume Pro Plan (No Extra Charge)`;
                     btn.disabled = false;
                 } else if (state.currentTier === 'enterprise') {
                     if (isScheduledCancel && state.pendingDowngrade === 'pro') {
@@ -1353,7 +1405,7 @@ function renderTiersUI() {
             } else if (t === 'enterprise') {
                 if (state.paidTier === 'enterprise' && !isSubscriptionExpired()) {
                     btn.className = 'btn btn-warning btn-block btn-select-tier';
-                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Reactivate Enterprise (Active until ${formattedDate})`;
+                    btn.innerHTML = `<i class="fa-solid fa-rotate-left"></i> Resume Enterprise (No Extra Charge)`;
                     btn.disabled = false;
                 } else {
                     btn.className = 'btn btn-outline btn-block btn-select-tier';
@@ -2280,3 +2332,203 @@ function initPacmanGame() {
 
     render();
 }
+
+/* ==========================================================================
+   Autonomous Agent Execution Monitor & Human-in-the-Loop Controller
+   ========================================================================== */
+let agentMonitorPollTimer = null;
+let currentPendingApprovalId = null;
+
+function initAutonomousAgentMonitor() {
+    const monitorPanel = getEl('agent-monitor-panel');
+    if (!monitorPanel) return;
+
+    const taskForm = getEl('agent-task-form');
+    const goalInput = getEl('agent-goal-input');
+    const autoApproveToggle = getEl('agent-auto-approve-toggle');
+    const btnRefresh = getEl('btn-refresh-agent-state');
+    const btnApprove = getEl('btn-approve-action');
+    const btnDeny = getEl('btn-deny-action');
+
+    async function fetchAgentState() {
+        try {
+            const apiBase = state.apiBaseUrl || '';
+            const res = await fetch(`${apiBase}/api/agent/state`);
+            if (!res.ok) return;
+            const data = await res.json();
+            if (!data.success) return;
+
+            renderAgentState(data.state, data.pendingApprovals, data.scratchpad);
+        } catch (err) {
+            console.warn('Agent state poll error:', err);
+        }
+    }
+
+    function renderAgentState(taskState, pendingApprovals, scratchpad) {
+        if (!taskState) return;
+
+        // Status badge
+        const badge = getEl('agent-status-badge');
+        if (badge) {
+            const st = (taskState.status || 'idle').toUpperCase();
+            badge.innerText = st;
+            badge.className = 'badge';
+            if (st === 'COMPLETED') badge.classList.add('badge-success');
+            else if (st === 'EXECUTING' || st === 'PLANNING') badge.classList.add('badge-accent');
+            else if (st === 'WAITING_APPROVAL') badge.classList.add('badge-warning');
+            else if (st === 'FAILED') badge.classList.add('badge-danger');
+            else badge.classList.add('badge-outline');
+        }
+
+        // Step counter
+        const stepCounter = getEl('agent-step-counter');
+        if (stepCounter) {
+            stepCounter.innerText = `Step ${taskState.currentStep || 0} / ${taskState.maxSteps || 30}`;
+        }
+
+        // Plan progress & list
+        const planList = getEl('agent-plan-list');
+        const planText = getEl('agent-plan-progress-text');
+        if (planList && taskState.plan && taskState.plan.length > 0) {
+            const completedCount = taskState.plan.filter(p => p.status === 'completed').length;
+            if (planText) planText.innerText = `${completedCount} / ${taskState.plan.length} steps completed`;
+
+            planList.innerHTML = taskState.plan.map(step => {
+                let icon = '<i class="fa-regular fa-circle text-tertiary"></i>';
+                if (step.status === 'completed') icon = '<i class="fa-solid fa-circle-check text-success"></i>';
+                else if (step.status === 'in_progress') icon = '<i class="fa-solid fa-spinner fa-spin text-primary"></i>';
+                else if (step.status === 'failed') icon = '<i class="fa-solid fa-circle-xmark text-danger"></i>';
+
+                return `
+                    <div class="agent-plan-step-item step-${step.status}">
+                        ${icon}
+                        <span style="font-weight: 500;">Step ${step.id}: ${escapeHtml(step.description)}</span>
+                        ${step.toolName ? `<span class="badge" style="font-size: 10px; margin-left: auto;">${escapeHtml(step.toolName)}</span>` : ''}
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Pending Approvals Banner
+        const banner = getEl('agent-approval-banner');
+        if (banner) {
+            if (pendingApprovals && pendingApprovals.length > 0) {
+                const req = pendingApprovals[0];
+                currentPendingApprovalId = req.id;
+                banner.classList.remove('hidden');
+                const riskBadge = getEl('approval-risk-badge');
+                if (riskBadge) {
+                    riskBadge.innerText = `⚠️ ${req.riskLevel.toUpperCase()} RISK ACTION AWAITING APPROVAL`;
+                    riskBadge.style.background = req.riskLevel === 'CRITICAL' ? '#dc2626' : '#ef4444';
+                }
+                const actTitle = getEl('approval-action-title');
+                if (actTitle) actTitle.innerText = `Action: ${req.action} on ${req.target || 'system'}`;
+                const actDesc = getEl('approval-action-desc');
+                if (actDesc) actDesc.innerText = req.description;
+            } else {
+                banner.classList.add('hidden');
+                currentPendingApprovalId = null;
+            }
+        }
+
+        // Scratchpad view
+        const scratchpadView = getEl('agent-scratchpad-view');
+        if (scratchpadView && scratchpad) {
+            scratchpadView.innerText = scratchpad;
+        }
+
+        // Artifacts list
+        const artList = getEl('agent-artifacts-list');
+        if (artList) {
+            if (taskState.artifacts && taskState.artifacts.length > 0) {
+                artList.innerHTML = taskState.artifacts.map(a => `
+                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 4px;">
+                        <span><i class="fa-solid fa-file-code text-accent"></i> <strong>${escapeHtml(a.name)}</strong></span>
+                        <span style="color: var(--text-tertiary); font-size: 11px;">${escapeHtml(a.type)}</span>
+                    </div>
+                `).join('');
+            } else {
+                artList.innerHTML = '<span style="color: var(--text-tertiary);">No artifacts produced yet.</span>';
+            }
+        }
+    }
+
+    taskForm?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const goal = goalInput?.value?.trim();
+        if (!goal) return;
+        const autoApprove = autoApproveToggle?.checked || false;
+
+        const btn = getEl('btn-start-agent');
+        if (btn) {
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Initializing...';
+        }
+
+        try {
+            const apiBase = state.apiBaseUrl || '';
+            const res = await fetch(`${apiBase}/api/agent/task`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ goal, autoApprove }),
+            });
+            const data = await res.json();
+            if (data.success) {
+                showToast(`Autonomous Agent started! Task ID: ${data.taskId.slice(0, 8)}...`, 'success');
+                setTimeout(fetchAgentState, 600);
+            } else {
+                showToast(data.error || 'Failed to start agent task', 'error');
+            }
+        } catch (err) {
+            showToast('Failed to connect to agent server', 'error');
+        } finally {
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = '<i class="fa-solid fa-play"></i> Run Agent';
+            }
+        }
+    });
+
+    btnRefresh?.addEventListener('click', () => {
+        fetchAgentState();
+        showToast('Agent state refreshed', 'info');
+    });
+
+    btnApprove?.addEventListener('click', async () => {
+        if (!currentPendingApprovalId) return;
+        try {
+            const apiBase = state.apiBaseUrl || '';
+            await fetch(`${apiBase}/api/agent/approval`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ requestId: currentPendingApprovalId, approved: true }),
+            });
+            showToast('Action approved! Agent resuming execution...', 'success');
+            fetchAgentState();
+        } catch {
+            showToast('Failed to send approval', 'error');
+        }
+    });
+
+    btnDeny?.addEventListener('click', async () => {
+        if (!currentPendingApprovalId) return;
+        try {
+            const apiBase = state.apiBaseUrl || '';
+            await fetch(`${apiBase}/api/agent/approval`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ requestId: currentPendingApprovalId, approved: false, reason: 'Denied by user from Dashboard Web UI' }),
+            });
+            showToast('Action denied. Agent informed to seek alternate path.', 'warning');
+            fetchAgentState();
+        } catch {
+            showToast('Failed to send denial', 'error');
+        }
+    });
+
+    // Initial fetch & polling every 2.5s
+    fetchAgentState();
+    if (agentMonitorPollTimer) clearInterval(agentMonitorPollTimer);
+    agentMonitorPollTimer = setInterval(fetchAgentState, 2500);
+}
+

package/web/styles.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout — Design System & Visual Engine v9.0.0
+   FrontTerrain Scout — Design System & Visual Engine v9.0.2
    Inspired by HappyRobot, Linear.app & Vercel aesthetics
    ========================================================================== */
 
@@ -1063,7 +1063,7 @@ h1, h2, h3, h4, h5, h6 {
 .footer-links a:hover { color: var(--hr-rust); }
 
 /* ==========================================================================
-   Visual Perception & Live Screen Sharing Engine v9.0.0
+   Visual Perception & Live Screen Sharing Engine v9.0.2
    ========================================================================== */
 .vision-banner {
   margin-bottom: 28px;
@@ -1543,3 +1543,80 @@ h1, h2, h3, h4, h5, h6 {
     font-size: 12px;
   }
 }
+
+/* ==========================================================================
+   Autonomous Agent Execution Monitor & Human-in-the-Loop Styles
+   ========================================================================== */
+.agent-monitor-card {
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.agent-monitor-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #38bdf8, #818cf8, #e15b37);
+  opacity: 0.8;
+}
+
+.agent-pulse-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(0, 229, 255, 0.12);
+  border: 1px solid rgba(0, 229, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  animation: pulse-border 2.5s infinite;
+}
+
+@keyframes pulse-border {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
+  50% { box-shadow: 0 0 12px 2px rgba(0, 229, 255, 0.3); }
+}
+
+.approval-alert-box {
+  animation: slide-down 0.3s ease-out;
+}
+
+@keyframes slide-down {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.agent-plan-step-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 0.82rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.agent-plan-step-item.step-completed {
+  border-left: 3px solid #10b981;
+}
+
+.agent-plan-step-item.step-in_progress {
+  border-left: 3px solid #38bdf8;
+  background: rgba(56, 189, 248, 0.08);
+}
+
+.agent-plan-step-item.step-failed {
+  border-left: 3px solid #ef4444;
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.agent-plan-step-item.step-pending {
+  opacity: 0.65;
+}
+