| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>OpenEnv — Multi-Domain AI Agent Environment</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #07070f; |
| --surface: #0f0f1a; |
| --surface2: #181826; |
| --border: #252538; |
| --accent: #6c63ff; |
| --accent2: #ff6584; |
| --accent3: #43e97b; |
| --accent4: #f7971e; |
| --accent5: #00d2ff; |
| --text: #e8e8f0; |
| --text-dim: #6868a0; |
| --mono: 'Space Mono', monospace; |
| --sans: 'Syne', sans-serif; |
| --radius: 10px; |
| } |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; } |
| body::before { |
| content: ''; position: fixed; inset: 0; |
| background-image: linear-gradient(rgba(108,99,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(108,99,255,0.03) 1px, transparent 1px); |
| background-size: 40px 40px; pointer-events: none; z-index: 0; |
| } |
| |
| |
| .layout { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; } |
| .main { display: grid; grid-template-columns: 260px 1fr 300px; height: calc(100vh - 72px); overflow: hidden; } |
| |
| |
| header { |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 16px 28px; border-bottom: 1px solid var(--border); |
| background: rgba(7,7,15,0.9); backdrop-filter: blur(12px); |
| position: sticky; top: 0; z-index: 100; |
| } |
| .logo { display: flex; align-items: center; gap: 12px; } |
| .logo-icon { |
| width: 36px; height: 36px; border-radius: 8px; |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); |
| display: flex; align-items: center; justify-content: center; font-size: 18px; |
| } |
| .logo-name { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; } |
| .logo-sub { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; margin-top: 2px; } |
| .header-right { display: flex; align-items: center; gap: 16px; } |
| .status-pill { |
| display: flex; align-items: center; gap: 6px; |
| font-family: var(--mono); font-size: 11px; color: var(--accent3); |
| background: rgba(67,233,123,0.08); border: 1px solid rgba(67,233,123,0.2); |
| padding: 4px 12px; border-radius: 20px; |
| } |
| .pulse { width: 7px; height: 7px; background: var(--accent3); border-radius: 50%; animation: pulse 2s infinite; } |
| @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} } |
| .overall-badge { |
| font-family: var(--mono); font-size: 12px; font-weight: 700; |
| color: var(--accent); background: rgba(108,99,255,0.1); |
| border: 1px solid rgba(108,99,255,0.3); padding: 4px 12px; border-radius: 20px; |
| } |
| |
| |
| .sidebar { border-right: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } |
| .domain-label { |
| font-family: var(--mono); font-size: 9px; color: var(--text-dim); |
| letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; |
| display: flex; align-items: center; gap: 6px; |
| } |
| .domain-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } |
| .task-card { |
| background: var(--surface); border: 1px solid var(--border); |
| border-radius: var(--radius); padding: 10px 12px; cursor: pointer; |
| transition: all 0.15s; position: relative; overflow: hidden; margin-bottom: 4px; |
| } |
| .task-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity 0.15s; } |
| .task-card:hover { border-color: rgba(108,99,255,0.4); background: var(--surface2); } |
| .task-card.active { border-color: var(--accent); background: var(--surface2); } |
| .task-card.active::before { opacity: 1; } |
| .task-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; } |
| .task-meta { display: flex; align-items: center; gap: 6px; } |
| .badge { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.5px; } |
| .badge-easy { background: rgba(67,233,123,0.12); color: var(--accent3); } |
| .badge-medium { background: rgba(247,151,30,0.12); color: var(--accent4); } |
| .badge-hard { background: rgba(255,101,132,0.12); color: var(--accent2); } |
| .badge-veryhard { background: rgba(108,99,255,0.15); color: var(--accent); } |
| .task-score { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-left: auto; } |
| |
| |
| .domain-support .task-card::before { background: var(--accent); } |
| .domain-legal .task-card::before { background: var(--accent4); } |
| .domain-clinical .task-card::before { background: var(--accent2); } |
| .domain-engineering .task-card::before { background: var(--accent5); } |
| |
| |
| .center { display: flex; flex-direction: column; overflow: hidden; } |
| .center-header { |
| padding: 16px 24px; border-bottom: 1px solid var(--border); |
| display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; |
| } |
| .center-title { font-size: 18px; font-weight: 800; } |
| .center-sub { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 3px; } |
| .action-bar { display: flex; gap: 8px; } |
| .btn { font-family: var(--mono); font-size: 11px; padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.15s; font-weight: 700; letter-spacing: 0.5px; } |
| .btn-primary { background: var(--accent); color: #fff; } |
| .btn-primary:hover { background: #7c74ff; transform: translateY(-1px); } |
| .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } |
| .btn-secondary:hover { border-color: var(--accent); } |
| .center-body { flex: 1; overflow-y: auto; padding: 20px 24px; } |
| |
| |
| .ticket-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; animation: slideIn 0.25s ease; } |
| @keyframes slideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } |
| .ticket-id { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-bottom: 4px; } |
| .ticket-subject { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; } |
| .ticket-body { font-size: 13px; line-height: 1.7; color: #b0b0cc; padding: 14px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); margin-bottom: 14px; } |
| .ticket-meta { display: flex; gap: 10px; flex-wrap: wrap; } |
| .meta-chip { font-family: var(--mono); font-size: 10px; color: var(--text-dim); background: var(--surface2); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); } |
| .tier-enterprise { color: var(--accent); border-color: rgba(108,99,255,0.3); } |
| .tier-pro { color: var(--accent4); border-color: rgba(247,151,30,0.3); } |
| |
| |
| .domain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; animation: slideIn 0.25s ease; } |
| .domain-card-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; } |
| .domain-card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; } |
| .domain-card-body { font-size: 13px; line-height: 1.7; color: #b0b0cc; padding: 14px; background: var(--surface2); border-radius: 8px; border-left: 3px solid var(--border); } |
| .code-diff { font-family: var(--mono); font-size: 11px; background: #0a0a14; border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; line-height: 1.6; white-space: pre; } |
| .diff-add { color: var(--accent3); } |
| .diff-remove { color: var(--accent2); } |
| .diff-header { color: var(--text-dim); } |
| |
| |
| .action-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-top: 14px; } |
| .form-title { font-weight: 700; font-size: 14px; margin-bottom: 14px; } |
| .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } |
| .form-group { display: flex; flex-direction: column; gap: 5px; } |
| .form-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; } |
| .form-select, .form-textarea, .form-input { |
| background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; |
| color: var(--text); font-family: var(--mono); font-size: 12px; padding: 8px 10px; |
| transition: border-color 0.15s; width: 100%; |
| } |
| .form-select:focus, .form-textarea:focus, .form-input:focus { outline: none; border-color: var(--accent); } |
| .form-textarea { font-family: var(--sans); font-size: 13px; resize: vertical; min-height: 100px; line-height: 1.6; } |
| .submit-row { display: flex; justify-content: flex-end; margin-top: 14px; } |
| |
| |
| .right-panel { border-left: 1px solid var(--border); padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } |
| .panel-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } |
| .score-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } |
| .big-score { font-family: var(--mono); font-size: 42px; font-weight: 700; line-height: 1; } |
| .score-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 4px; } |
| .breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(37,37,56,0.5); } |
| .breakdown-row:last-child { border-bottom: none; } |
| .breakdown-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); } |
| .breakdown-val { font-family: var(--mono); font-size: 11px; font-weight: 700; } |
| .val-good { color: var(--accent3); } .val-mid { color: var(--accent4); } .val-bad { color: var(--accent2); } |
| .mini-chart { height: 50px; display: flex; align-items: flex-end; gap: 2px; } |
| .bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; transition: height 0.3s ease; } |
| .log-entry { font-family: var(--mono); font-size: 10px; color: var(--text-dim); padding: 5px 8px; border-radius: 4px; margin-bottom: 3px; background: var(--surface); } |
| .log-pos { color: var(--accent3); } .log-neg { color: var(--accent2); } |
| |
| |
| .queue-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; font-size: 11px; } |
| .priority-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } |
| .p1 { background: var(--accent2); box-shadow: 0 0 5px var(--accent2); } .p2 { background: var(--accent4); } .p3 { background: var(--accent3); } .p4 { background: var(--text-dim); } |
| .queue-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| |
| |
| .episode-done { background: linear-gradient(135deg, var(--surface2), rgba(108,99,255,0.06)); border: 1px solid rgba(108,99,255,0.25); border-radius: var(--radius); padding: 28px; text-align: center; animation: slideIn 0.35s ease; } |
| .done-score { font-family: var(--mono); font-size: 56px; font-weight: 700; color: var(--accent); } |
| .done-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; } |
| .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 280px; color: var(--text-dim); text-align: center; gap: 10px; } |
| .empty-icon { font-size: 44px; opacity: 0.25; } |
| |
| |
| .agent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 6px; } |
| .agent-name { font-size: 12px; font-weight: 700; margin-bottom: 6px; } |
| .load-bar-track { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin-top: 5px; } |
| .load-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent3), var(--accent)); transition: width 0.4s; } |
| .load-bar-fill.over { background: linear-gradient(90deg, var(--accent4), var(--accent2)); } |
| |
| |
| .stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } |
| .stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; } |
| .stat-num { font-family: var(--mono); font-size: 26px; font-weight: 700; } |
| .stat-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-top: 3px; } |
| |
| ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } |
| </style> |
| </head> |
| <body> |
| <div class="layout"> |
| <header> |
| <div class="logo"> |
| <div class="logo-icon">🌐</div> |
| <div> |
| <div class="logo-name">OpenEnv — Multi-Domain</div> |
| <div class="logo-sub">AI AGENT EVALUATION ENVIRONMENT</div> |
| </div> |
| </div> |
| <div class="header-right"> |
| <div class="overall-badge">OVERALL: <span id="overall-score">—</span></div> |
| <div class="status-pill"><div class="pulse"></div><span id="server-status">CONNECTING...</span></div> |
| </div> |
| </header> |
|
|
| <div class="main"> |
| |
| <aside class="sidebar"> |
|
|
| <div class="domain-support"> |
| <div class="domain-label">🎫 Customer Support</div> |
| <div class="task-card active" id="tc-card" onclick="selectTask('ticket_classification')"> |
| <div class="task-name">Ticket Classification</div> |
| <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-ticket_classification">—</span></div> |
| </div> |
| <div class="task-card" id="rd-card" onclick="selectTask('response_drafting')"> |
| <div class="task-name">Response Drafting</div> |
| <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-response_drafting">—</span></div> |
| </div> |
| <div class="task-card" id="qm-card" onclick="selectTask('queue_management')"> |
| <div class="task-name">SLA Queue Management</div> |
| <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-queue_management">—</span></div> |
| </div> |
| <div class="task-card" id="mt-card" onclick="selectTask('multi_turn_conversation')"> |
| <div class="task-name">Multi-Turn De-escalation</div> |
| <div class="task-meta"><span class="badge badge-veryhard">VERY HARD</span><span class="task-score" id="score-multi_turn_conversation">—</span></div> |
| </div> |
| </div> |
|
|
| <div class="domain-legal"> |
| <div class="domain-label">⚖️ Legal Review</div> |
| <div class="task-card" id="lci-card" onclick="selectTask('legal_clause_identification')"> |
| <div class="task-name">Clause Identification</div> |
| <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-legal_clause_identification">—</span></div> |
| </div> |
| <div class="task-card" id="lrf-card" onclick="selectTask('legal_risk_flagging')"> |
| <div class="task-name">Risk Flagging</div> |
| <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-legal_risk_flagging">—</span></div> |
| </div> |
| <div class="task-card" id="lcr-card" onclick="selectTask('legal_clause_redlining')"> |
| <div class="task-name">Clause Redlining</div> |
| <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-legal_clause_redlining">—</span></div> |
| </div> |
| </div> |
|
|
| <div class="domain-clinical"> |
| <div class="domain-label">🏥 Clinical Triage</div> |
| <div class="task-card" id="ctc-card" onclick="selectTask('clinical_triage_classification')"> |
| <div class="task-name">Body System Classification</div> |
| <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-clinical_triage_classification">—</span></div> |
| </div> |
| <div class="task-card" id="esi-card" onclick="selectTask('clinical_esi_assignment')"> |
| <div class="task-name">ESI Level Assignment</div> |
| <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-clinical_esi_assignment">—</span></div> |
| </div> |
| <div class="task-card" id="ctn-card" onclick="selectTask('clinical_triage_note')"> |
| <div class="task-name">Triage Note Generation</div> |
| <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-clinical_triage_note">—</span></div> |
| </div> |
| </div> |
|
|
| <div class="domain-engineering"> |
| <div class="domain-label">💻 PR Review</div> |
| <div class="task-card" id="ptc-card" onclick="selectTask('pr_type_classification')"> |
| <div class="task-name">PR Type Classification</div> |
| <div class="task-meta"><span class="badge badge-easy">EASY</span><span class="task-score" id="score-pr_type_classification">—</span></div> |
| </div> |
| <div class="task-card" id="pbi-card" onclick="selectTask('pr_bug_identification')"> |
| <div class="task-name">Bug Identification</div> |
| <div class="task-meta"><span class="badge badge-medium">MEDIUM</span><span class="task-score" id="score-pr_bug_identification">—</span></div> |
| </div> |
| <div class="task-card" id="prc-card" onclick="selectTask('pr_review_comment')"> |
| <div class="task-name">Code Review Comment</div> |
| <div class="task-meta"><span class="badge badge-hard">HARD</span><span class="task-score" id="score-pr_review_comment">—</span></div> |
| </div> |
| </div> |
|
|
| <div> |
| <div class="domain-label">Episode Log</div> |
| <div id="log-container" style="max-height:200px;overflow-y:auto;"></div> |
| </div> |
|
|
| <div> |
| <div class="domain-label">API Links</div> |
| <a href="/docs" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);margin-bottom:5px;">📖 Swagger API Docs</a> |
| <a href="/tasks" target="_blank" style="display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;text-decoration:none;padding:8px;background:var(--surface);border-radius:8px;border:1px solid var(--border);">📋 /tasks endpoint</a> |
| </div> |
| </aside> |
|
|
| |
| <main class="center"> |
| <div class="center-header"> |
| <div> |
| <div class="center-title" id="center-title">Ticket Classification</div> |
| <div class="center-sub">Step <span id="step-counter">0</span> / <span id="max-steps">10</span> | <span id="domain-label">Customer Support</span></div> |
| </div> |
| <div class="action-bar"> |
| <button class="btn btn-secondary" onclick="runBaseline()">▶ Run Heuristic Baseline</button> |
| <button class="btn btn-primary" onclick="resetEpisode()">↺ Reset Episode</button> |
| </div> |
| </div> |
| <div class="center-body" id="center-body"> |
| <div class="empty-state"> |
| <div class="empty-icon">🌐</div> |
| <div style="font-size:14px;font-weight:700;">Multi-Domain AI Agent Environment</div> |
| <div style="font-size:12px;max-width:300px;line-height:1.6;">13 tasks across 4 professional domains. Select a task from the sidebar and click Reset Episode to begin.</div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <aside class="right-panel"> |
| <div> |
| <div class="panel-label">Episode Score</div> |
| <div class="score-card"> |
| <div class="big-score" id="current-score" style="color:var(--accent)">—</div> |
| <div class="score-label" id="score-status">No active episode</div> |
| <div style="margin-top:12px;" id="score-breakdown"></div> |
| </div> |
| </div> |
| <div> |
| <div class="panel-label">Reward History</div> |
| <div class="score-card"> |
| <div class="mini-chart" id="reward-chart"></div> |
| <div style="display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);font-size:9px;color:var(--text-dim);"> |
| <span>+1.0</span><span>avg: <span id="avg-reward">—</span></span><span>-1.0</span> |
| </div> |
| </div> |
| </div> |
| <div id="agents-section" style="display:none;"> |
| <div class="panel-label">Agent Status</div> |
| <div id="agents-container"></div> |
| </div> |
| <div id="queue-section" style="display:none;"> |
| <div class="panel-label">Ticket Queue</div> |
| <div id="queue-container"></div> |
| </div> |
| </aside> |
| </div> |
| </div> |
|
|
| <script> |
| const API = ''; |
| let currentTaskId = 'ticket_classification'; |
| let currentObs = null; |
| let rewardHistory = []; |
| |
| const TASK_CONFIG = { |
| ticket_classification: { title: 'Ticket Classification', domain: 'Customer Support', maxSteps: 10, cardId: 'tc-card' }, |
| response_drafting: { title: 'Response Drafting', domain: 'Customer Support', maxSteps: 6, cardId: 'rd-card' }, |
| queue_management: { title: 'SLA Queue Management', domain: 'Customer Support', maxSteps: 40, cardId: 'qm-card' }, |
| multi_turn_conversation: { title: 'Multi-Turn De-escalation', domain: 'Customer Support', maxSteps: 8, cardId: 'mt-card' }, |
| legal_clause_identification: { title: 'Legal Clause Identification', domain: 'Legal Review', maxSteps: 10, cardId: 'lci-card' }, |
| legal_risk_flagging: { title: 'Legal Risk Flagging', domain: 'Legal Review', maxSteps: 10, cardId: 'lrf-card' }, |
| legal_clause_redlining: { title: 'Legal Clause Redlining', domain: 'Legal Review', maxSteps: 5, cardId: 'lcr-card' }, |
| clinical_triage_classification: { title: 'Clinical Triage Classification', domain: 'Clinical Triage', maxSteps: 10, cardId: 'ctc-card' }, |
| clinical_esi_assignment: { title: 'ESI Level Assignment', domain: 'Clinical Triage', maxSteps: 10, cardId: 'esi-card' }, |
| clinical_triage_note: { title: 'Triage Note Generation', domain: 'Clinical Triage', maxSteps: 5, cardId: 'ctn-card' }, |
| pr_type_classification: { title: 'PR Type Classification', domain: 'PR Review', maxSteps: 10, cardId: 'ptc-card' }, |
| pr_bug_identification: { title: 'PR Bug Identification', domain: 'PR Review', maxSteps: 5, cardId: 'pbi-card' }, |
| pr_review_comment: { title: 'PR Code Review', domain: 'PR Review', maxSteps: 5, cardId: 'prc-card' }, |
| }; |
| |
| async function api(method, path, body) { |
| const opts = { method, headers: { 'Content-Type': 'application/json' } }; |
| if (body) opts.body = JSON.stringify(body); |
| const r = await fetch(API + path, opts); |
| if (!r.ok) throw new Error(await r.text()); |
| return r.json(); |
| } |
| |
| function selectTask(taskId) { |
| currentTaskId = taskId; |
| document.querySelectorAll('.task-card').forEach(c => c.classList.remove('active')); |
| const cfg = TASK_CONFIG[taskId]; |
| document.getElementById(cfg.cardId).classList.add('active'); |
| document.getElementById('center-title').textContent = cfg.title; |
| document.getElementById('domain-label').textContent = cfg.domain; |
| document.getElementById('max-steps').textContent = cfg.maxSteps; |
| document.getElementById('step-counter').textContent = 0; |
| document.getElementById('center-body').innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon">▶</div> |
| <div style="font-size:13px;">Click "Reset Episode" to start this task</div> |
| </div>`; |
| rewardHistory = []; |
| updateRewardChart(); |
| document.getElementById('current-score').textContent = '—'; |
| document.getElementById('score-status').textContent = 'No active episode'; |
| document.getElementById('score-breakdown').innerHTML = ''; |
| document.getElementById('agents-section').style.display = 'none'; |
| document.getElementById('queue-section').style.display = 'none'; |
| } |
| |
| async function resetEpisode() { |
| rewardHistory = []; |
| document.getElementById('log-container').innerHTML = ''; |
| try { |
| const data = await api('POST', `/reset?task_id=${currentTaskId}`); |
| currentObs = data.observation; |
| document.getElementById('step-counter').textContent = currentObs.step || 0; |
| renderObservation(currentObs); |
| addLog(`↺ Reset — ${currentTaskId}`); |
| updateAgents(currentObs.agents); |
| updateQueue(currentObs.ticket_queue, currentObs.sla_status); |
| } catch(e) { addLog(`❌ ${e.message}`, 'neg'); } |
| } |
| |
| function renderObservation(obs) { |
| if (obs.episode_done) { fetchGrader(); return; } |
| const body = document.getElementById('center-body'); |
| const ticket = obs.current_ticket; |
| const clause = obs.current_clause; |
| const patient = obs.current_patient; |
| const pr = obs.current_pr; |
| |
| if (ticket) renderTicketView(obs, body); |
| else if (clause) renderLegalView(obs, body); |
| else if (patient) renderClinicalView(obs, body); |
| else if (pr) renderPRView(obs, body); |
| else body.innerHTML = `<div class="empty-state"><div class="empty-icon">✓</div><div>Step complete</div></div>`; |
| |
| updateAgents(obs.agents); |
| updateQueue(obs.ticket_queue, obs.sla_status); |
| } |
| |
| function renderTicketView(obs, body) { |
| const t = obs.current_ticket; |
| const isQueue = currentTaskId === 'queue_management'; |
| const isMT = currentTaskId === 'multi_turn_conversation'; |
| const history = t.previous_interactions || []; |
| |
| let historyHTML = ''; |
| if (history.length > 0) { |
| historyHTML = `<div style="margin-bottom:12px;"><div style="font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-bottom:8px;">CONVERSATION HISTORY</div>` + |
| history.map(m => `<div style="padding:8px;margin-bottom:6px;border-radius:6px;background:${m.role==='customer'?'var(--surface2)':'rgba(108,99,255,0.08)'};border:1px solid var(--border);font-size:12px;"><span style="font-family:var(--mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;">${m.role}:</span> ${m.content}</div>`).join('') + `</div>`; |
| } |
| |
| body.innerHTML = ` |
| <div class="ticket-card"> |
| <div class="ticket-id">${t.ticket_id}</div> |
| <div class="ticket-subject">${t.subject}</div> |
| ${historyHTML} |
| <div class="ticket-body">${t.body}</div> |
| <div class="ticket-meta"> |
| <span class="meta-chip tier-${t.customer_tier}">${t.customer_tier?.toUpperCase()}</span> |
| ${t.category ? `<span class="meta-chip">📁 ${t.category}</span>` : ''} |
| ${t.priority ? `<span class="meta-chip">🔺 ${t.priority}</span>` : ''} |
| <span class="meta-chip">😶 Sentiment: ${(t.sentiment_score||0).toFixed(2)}</span> |
| </div> |
| </div> |
| ${obs.knowledge_base?.length ? renderKB(obs.knowledge_base) : ''} |
| ${renderActionForm(obs)}`; |
| } |
| |
| function renderLegalView(obs, body) { |
| const c = obs.current_clause; |
| body.innerHTML = ` |
| <div class="domain-card"> |
| <div class="domain-card-label">${c.contract_type} — ${c.counterparty}</div> |
| <div class="domain-card-title">Clause ${c.clause_id}</div> |
| <div class="domain-card-body">${c.text}</div> |
| ${c.true_risk_level ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known Risk Level: ${c.true_risk_level}</div>` : ''} |
| </div> |
| ${renderActionForm(obs)}`; |
| } |
| |
| function renderClinicalView(obs, body) { |
| const p = obs.current_patient; |
| const vitals = p.vitals || {}; |
| body.innerHTML = ` |
| <div class="domain-card"> |
| <div class="domain-card-label">Patient ${p.patient_id} — Age ${p.age} ${p.gender}</div> |
| <div class="domain-card-title">${p.chief_complaint}</div> |
| <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0;"> |
| ${Object.entries(vitals).map(([k,v]) => `<div style="background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:8px;text-align:center;"><div style="font-family:var(--mono);font-size:14px;font-weight:700;">${v}</div><div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);margin-top:2px;">${k}</div></div>`).join('')} |
| </div> |
| <div class="domain-card-body"><strong>History:</strong> ${p.history}</div> |
| ${p.true_esi_level ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known ESI Level: ${p.true_esi_level}</div>` : ''} |
| </div> |
| ${renderActionForm(obs)}`; |
| } |
| |
| function renderPRView(obs, body) { |
| const pr = obs.current_pr; |
| const diffLines = (pr.diff||'').split('\n').map(line => { |
| if (line.startsWith('+')) return `<span class="diff-add">${escHtml(line)}</span>`; |
| if (line.startsWith('-')) return `<span class="diff-remove">${escHtml(line)}</span>`; |
| if (line.startsWith('@@')) return `<span class="diff-header">${escHtml(line)}</span>`; |
| return escHtml(line); |
| }).join('\n'); |
| body.innerHTML = ` |
| <div class="domain-card"> |
| <div class="domain-card-label">PR ${pr.pr_id} — by ${pr.author}</div> |
| <div class="domain-card-title">${pr.title}</div> |
| <div class="domain-card-body" style="margin-bottom:12px;">${pr.description}</div> |
| <div class="code-diff">${diffLines}</div> |
| ${pr.true_bug_description ? `<div style="margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--accent4);">Known Bug: ${pr.true_bug_description}</div>` : ''} |
| </div> |
| ${renderActionForm(obs)}`; |
| } |
| |
| function escHtml(s) { return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); } |
| |
| function renderKB(articles) { |
| return `<div style="margin-bottom:14px;"> |
| <div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;">Knowledge Base</div> |
| ${articles.slice(0,2).map(a => ` |
| <div style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:6px;"> |
| <div style="font-size:12px;font-weight:700;margin-bottom:4px;"><span style="font-family:var(--mono);font-size:10px;color:var(--accent);margin-right:8px;">${a.article_id}</span>${a.title}</div> |
| <div style="font-size:11px;color:var(--text-dim);line-height:1.5;">${a.content?.substring(0,200)}...</div> |
| </div>`).join('')} |
| </div>`; |
| } |
| |
| function renderActionForm(obs) { |
| const tid = currentTaskId; |
| const actions = obs.valid_actions || []; |
| |
| if (tid === 'ticket_classification') { |
| const t = obs.current_ticket; |
| return `<div class="action-form"><div class="form-title">⚡ Classify Ticket</div> |
| <div class="form-row"> |
| <div class="form-group"><label class="form-label">Category</label> |
| <select class="form-select" id="f-category"> |
| ${['billing','technical','account','feature_request','abuse','unknown'].map(c => `<option value="${c}">${c.replace('_',' ').toUpperCase()}</option>`).join('')} |
| </select></div> |
| <div class="form-group"><label class="form-label">Priority</label> |
| <select class="form-select" id="f-priority"> |
| ${['P1','P2','P3','P4'].map(p => `<option value="${p}">${p}</option>`).join('')} |
| </select></div> |
| </div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify',ticket_id:'${t?.ticket_id}',category:document.getElementById('f-category').value,priority:document.getElementById('f-priority').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'response_drafting') { |
| const t = obs.current_ticket; |
| return `<div class="action-form"><div class="form-title">✍️ Draft Response</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Response Text</label> |
| <textarea class="form-textarea" id="f-response" placeholder="Write a professional customer response..."></textarea></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'draft_response',ticket_id:'${t?.ticket_id}',response_text:document.getElementById('f-response').value})">Send →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'queue_management') { |
| const queue = obs.ticket_queue || []; |
| return `<div class="action-form"><div class="form-title">⚙️ Queue Action</div> |
| <div class="form-row"> |
| <div class="form-group"><label class="form-label">Ticket</label> |
| <select class="form-select" id="f-ticket-id"> |
| ${queue.map(t => `<option value="${t.ticket_id}">${t.ticket_id} | ${t.priority||'?'} | ${t.subject?.substring(0,30)}</option>`).join('')} |
| </select></div> |
| <div class="form-group"><label class="form-label">Action</label> |
| <select class="form-select" id="f-action-type" onchange="toggleAgentRow()"> |
| ${['assign_ticket','resolve','escalate','close','no_op'].map(a => `<option value="${a}">${a.replace('_',' ').toUpperCase()}</option>`).join('')} |
| </select></div> |
| </div> |
| <div id="agent-row" class="form-group" style="margin-bottom:10px;"><label class="form-label">Assign To</label> |
| <select class="form-select" id="f-agent-id"> |
| <option value="agent_billing">agent_billing — Billing Specialist</option> |
| <option value="agent_tech">agent_tech — Technical Support</option> |
| <option value="agent_general">agent_general — General Support</option> |
| </select></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitQueueAction()">Execute →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'multi_turn_conversation') { |
| const t = obs.current_ticket; |
| return `<div class="action-form"><div class="form-title">💬 Respond or Escalate</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Response</label> |
| <textarea class="form-textarea" id="f-mt-response" placeholder="Write your response to the customer..."></textarea></div> |
| <div class="submit-row" style="gap:8px;"> |
| <button class="btn btn-secondary" onclick="submitAction({action_type:'escalate',ticket_id:'${t?.ticket_id}'})">↑ Escalate</button> |
| <button class="btn btn-secondary" onclick="submitAction({action_type:'resolve',ticket_id:'${t?.ticket_id}'})">✓ Resolve</button> |
| <button class="btn btn-primary" onclick="submitAction({action_type:'draft_response',ticket_id:'${t?.ticket_id}',response_text:document.getElementById('f-mt-response').value})">Send →</button> |
| </div> |
| </div>`; |
| } |
| |
| if (tid === 'legal_clause_identification') { |
| return `<div class="action-form"><div class="form-title">⚖️ Identify Clause Type</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Clause Type</label> |
| <select class="form-select" id="f-clause-type"> |
| ${['indemnity','liability','ip','termination','unknown'].map(c => `<option value="${c}">${c.toUpperCase()}</option>`).join('')} |
| </select></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'identify_clause',clause_type:document.getElementById('f-clause-type').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'legal_risk_flagging') { |
| return `<div class="action-form"><div class="form-title">🚩 Flag Risk Level</div> |
| <div class="form-row"> |
| <div class="form-group"><label class="form-label">Risk Level</label> |
| <select class="form-select" id="f-risk-level"> |
| ${['low','medium','high','critical'].map(r => `<option value="${r}">${r.toUpperCase()}</option>`).join('')} |
| </select></div> |
| <div class="form-group"><label class="form-label">Reasoning</label> |
| <input class="form-input" id="f-risk-reason" placeholder="Brief justification..."/></div> |
| </div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'flag_risk',risk_level:document.getElementById('f-risk-level').value,reasoning:document.getElementById('f-risk-reason').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'legal_clause_redlining') { |
| return `<div class="action-form"><div class="form-title">✏️ Redline Clause</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Improved Clause Text</label> |
| <textarea class="form-textarea" id="f-redline" placeholder="Write the improved, lower-risk version of this clause..."></textarea></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'redline',redline_text:document.getElementById('f-redline').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'clinical_triage_classification') { |
| return `<div class="action-form"><div class="form-title">🏥 Classify Body System</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Body System</label> |
| <select class="form-select" id="f-body-system"> |
| ${['cardiac','respiratory','neurologic','gi','musculoskeletal','other'].map(s => `<option value="${s}">${s.toUpperCase()}</option>`).join('')} |
| </select></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify_triage',body_system:document.getElementById('f-body-system').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'clinical_esi_assignment') { |
| return `<div class="action-form"><div class="form-title">🔢 Assign ESI Level</div> |
| <div class="form-row"> |
| <div class="form-group"><label class="form-label">ESI Level (1=Critical, 5=Non-urgent)</label> |
| <select class="form-select" id="f-esi"> |
| ${[1,2,3,4,5].map(n => `<option value="${n}">ESI ${n}</option>`).join('')} |
| </select></div> |
| <div class="form-group"><label class="form-label">Reasoning</label> |
| <input class="form-input" id="f-esi-reason" placeholder="Clinical justification..."/></div> |
| </div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'assign_esi',esi_level:parseInt(document.getElementById('f-esi').value),reasoning:document.getElementById('f-esi-reason').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'clinical_triage_note') { |
| return `<div class="action-form"><div class="form-title">📋 Write Triage Note</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Clinical Triage Note</label> |
| <textarea class="form-textarea" id="f-note" placeholder="Patient presents with... Immediate actions: stat IV access, oxygen, continuous monitor..."></textarea></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'write_triage_note',triage_note:document.getElementById('f-note').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'pr_type_classification') { |
| return `<div class="action-form"><div class="form-title">🔍 Classify PR Type</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">PR Type</label> |
| <select class="form-select" id="f-pr-type"> |
| ${['bug_fix','feature','refactor','security'].map(t => `<option value="${t}">${t.replace('_',' ').toUpperCase()}</option>`).join('')} |
| </select></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'classify_pr',pr_type:document.getElementById('f-pr-type').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'pr_bug_identification') { |
| return `<div class="action-form"><div class="form-title">🐛 Identify Bug</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Bug Description</label> |
| <textarea class="form-textarea" id="f-bug" placeholder="Describe the specific vulnerability or bug found in this diff..."></textarea></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'identify_bug',bug_description:document.getElementById('f-bug').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| if (tid === 'pr_review_comment') { |
| return `<div class="action-form"><div class="form-title">💬 Write Review Comment</div> |
| <div class="form-group" style="margin-bottom:10px;"><label class="form-label">Review Comment</label> |
| <textarea class="form-textarea" id="f-review" placeholder="Approve or block this PR with your code review comment..."></textarea></div> |
| <div class="submit-row"><button class="btn btn-primary" onclick="submitAction({action_type:'review_pr',review_comment:document.getElementById('f-review').value})">Submit →</button></div> |
| </div>`; |
| } |
| |
| return ''; |
| } |
| |
| function toggleAgentRow() { |
| const action = document.getElementById('f-action-type')?.value; |
| const row = document.getElementById('agent-row'); |
| if (row) row.style.display = action === 'assign_ticket' ? 'flex' : 'none'; |
| } |
| |
| function submitQueueAction() { |
| const action_type = document.getElementById('f-action-type').value; |
| const ticket_id = document.getElementById('f-ticket-id')?.value; |
| const target_agent_id = document.getElementById('f-agent-id')?.value; |
| submitAction({ action_type, ticket_id, target_agent_id }); |
| } |
| |
| async function submitAction(actionBody) { |
| try { |
| const data = await api('POST', `/step?task_id=${currentTaskId}`, actionBody); |
| currentObs = data.observation; |
| const reward = data.reward; |
| rewardHistory.push(reward.total); |
| document.getElementById('step-counter').textContent = currentObs.step || rewardHistory.length; |
| const sign = reward.total >= 0 ? '+' : ''; |
| addLog(`Step ${rewardHistory.length}: ${sign}${reward.total.toFixed(3)}`, reward.total >= 0 ? 'pos' : 'neg'); |
| updateRewardChart(); |
| updateScoreDisplay(reward); |
| renderObservation(currentObs); |
| if (data.done) fetchGrader(); |
| } catch(e) { addLog(`❌ ${e.message}`, 'neg'); } |
| } |
| |
| async function fetchGrader() { |
| try { |
| const result = await api('POST', `/grader?task_id=${currentTaskId}`); |
| showDone(result); |
| document.getElementById(`score-${currentTaskId}`).textContent = result.final_score.toFixed(3); |
| updateOverallScore(); |
| } catch(e) { console.error(e); } |
| } |
| |
| function showDone(result) { |
| const score = result.final_score; |
| const color = score >= 0.7 ? 'var(--accent3)' : score >= 0.4 ? 'var(--accent4)' : 'var(--accent2)'; |
| const emoji = score >= 0.7 ? '🏆' : score >= 0.4 ? '📊' : '📉'; |
| document.getElementById('center-body').innerHTML = ` |
| <div class="episode-done"> |
| <div style="font-size:36px;margin-bottom:12px;">${emoji}</div> |
| <div class="done-title">Episode Complete</div> |
| <div class="done-score" style="color:${color}">${score.toFixed(4)}</div> |
| <div style="font-family:var(--mono);font-size:12px;color:var(--text-dim);margin:8px 0 20px"> |
| ${result.passed ? '✓ PASSED' : '✗ DID NOT PASS'} | ${rewardHistory.length} steps |
| </div> |
| ${Object.entries(result.metrics||{}).filter(([k,v])=>typeof v==='number').map(([k,v])=>` |
| <div class="breakdown-row"> |
| <span class="breakdown-label">${k.replace(/_/g,' ')}</span> |
| <span class="breakdown-val ${v>=0.7?'val-good':v>=0.4?'val-mid':'val-bad'}">${v.toFixed(4)}</span> |
| </div>`).join('')} |
| <button class="btn btn-primary" style="margin-top:20px;" onclick="resetEpisode()">↺ New Episode</button> |
| </div>`; |
| document.getElementById('current-score').textContent = score.toFixed(4); |
| document.getElementById('current-score').style.color = color; |
| document.getElementById('score-status').textContent = result.passed ? '✓ Passed' : '✗ Did not pass'; |
| } |
| |
| function updateScoreDisplay(reward) { |
| const total = reward.total; |
| const color = total >= 0.6 ? 'var(--accent3)' : total >= 0.2 ? 'var(--accent4)' : 'var(--accent2)'; |
| document.getElementById('current-score').textContent = total.toFixed(4); |
| document.getElementById('current-score').style.color = color; |
| document.getElementById('score-status').textContent = 'Step reward'; |
| const bd = reward.breakdown || {}; |
| document.getElementById('score-breakdown').innerHTML = Object.entries(bd).map(([k,v]) => ` |
| <div class="breakdown-row"> |
| <span class="breakdown-label">${k.replace(/_/g,' ')}</span> |
| <span class="breakdown-val ${v>=0.6?'val-good':v<0?'val-bad':'val-mid'}">${typeof v==='number'?v.toFixed(3):v}</span> |
| </div>`).join(''); |
| } |
| |
| function updateRewardChart() { |
| const container = document.getElementById('reward-chart'); |
| if (!rewardHistory.length) { container.innerHTML=''; return; } |
| const avg = (rewardHistory.reduce((a,b)=>a+b,0)/rewardHistory.length).toFixed(3); |
| document.getElementById('avg-reward').textContent = avg; |
| container.innerHTML = rewardHistory.map(r => { |
| const pct = ((r+1)/2*100).toFixed(1); |
| const color = r>=0.3?'var(--accent3)':r>=0?'var(--accent4)':'var(--accent2)'; |
| return `<div class="bar" style="height:${pct}%;background:${color};opacity:0.8;"></div>`; |
| }).join(''); |
| } |
| |
| function updateAgents(agents) { |
| if (!agents?.length) { document.getElementById('agents-section').style.display='none'; return; } |
| document.getElementById('agents-section').style.display='block'; |
| document.getElementById('agents-container').innerHTML = agents.map(a => { |
| const pct = (a.current_load/a.max_load*100).toFixed(0); |
| return `<div class="agent-card"> |
| <div class="agent-name">${a.name}</div> |
| <div style="font-family:var(--mono);font-size:9px;color:var(--text-dim);">Load: ${a.current_load}/${a.max_load}</div> |
| <div class="load-bar-track"><div class="load-bar-fill ${a.current_load>=a.max_load?'over':''}" style="width:${pct}%"></div></div> |
| </div>`; |
| }).join(''); |
| } |
| |
| function updateQueue(queue, slaStatus) { |
| if (!queue?.length) { document.getElementById('queue-section').style.display='none'; return; } |
| document.getElementById('queue-section').style.display='block'; |
| document.getElementById('queue-container').innerHTML = queue.slice(0,8).map(t => { |
| const p = (t.priority||'P3').replace('_CRITICAL','').replace('_HIGH','').replace('_MEDIUM','').replace('_LOW','').toLowerCase(); |
| return `<div class="queue-item"> |
| <div class="priority-dot ${p}"></div> |
| <span class="queue-subject">${t.subject||t.ticket_id}</span> |
| </div>`; |
| }).join(''); |
| } |
| |
| function addLog(message, type) { |
| const container = document.getElementById('log-container'); |
| const div = document.createElement('div'); |
| div.className = `log-entry ${type==='pos'?'log-pos':type==='neg'?'log-neg':''}`; |
| div.textContent = message; |
| container.insertBefore(div, container.firstChild); |
| if (container.children.length > 40) container.removeChild(container.lastChild); |
| } |
| |
| async function runBaseline() { |
| addLog('⚡ Running heuristic baseline...'); |
| try { |
| const data = await api('POST', '/baseline'); |
| Object.entries(data.tasks||{}).forEach(([tid, result]) => { |
| const el = document.getElementById(`score-${tid}`); |
| if (el) el.textContent = result.final_score.toFixed(3); |
| addLog(`${tid.replace(/_/g,' ')}: ${result.final_score.toFixed(3)} ${result.passed?'✓':'✗'}`, |
| result.final_score >= 0.5 ? 'pos' : 'neg'); |
| }); |
| document.getElementById('overall-score').textContent = data.overall_score.toFixed(3); |
| addLog(`Overall: ${data.overall_score.toFixed(3)}`, data.overall_score > 0.6 ? 'pos' : 'neg'); |
| } catch(e) { addLog(`Baseline error: ${e.message}`, 'neg'); } |
| } |
| |
| function updateOverallScore() { |
| const scores = Object.keys(TASK_CONFIG).map(tid => { |
| const el = document.getElementById(`score-${tid}`); |
| return el && el.textContent !== '—' ? parseFloat(el.textContent) : null; |
| }).filter(s => s !== null); |
| if (scores.length > 0) { |
| const avg = scores.reduce((a,b)=>a+b,0)/scores.length; |
| document.getElementById('overall-score').textContent = avg.toFixed(3); |
| } |
| } |
| |
| // Health check on load |
| (async () => { |
| try { |
| const h = await api('GET', '/health'); |
| document.getElementById('server-status').textContent = 'LIVE'; |
| addLog(`✓ Server online — ${h.tasks?.length||0} tasks`); |
| } catch(e) { |
| document.getElementById('server-status').textContent = 'OFFLINE'; |
| document.getElementById('server-status').style.color = 'var(--accent2)'; |
| document.querySelector('.status-pill').style.color = 'var(--accent2)'; |
| document.querySelector('.status-pill').style.borderColor = 'rgba(255,101,132,0.3)'; |
| document.querySelector('.pulse').style.background = 'var(--accent2)'; |
| } |
| })(); |
| </script> |
| </body> |
| </html> |
