Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ParcelPilot Intelligence — CalQuity AI Platform</title> | |
| <meta name="description" content="ParcelPilot AI Operations Platform — Contract-aware customer support intelligence engine built on CalQuity's evidence anchoring infrastructure." /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <!-- Ambient background layers --> | |
| <div class="bg-layer" aria-hidden="true"> | |
| <div class="bg-img"></div> | |
| <div class="bg-noise"></div> | |
| <div class="bg-vignette"></div> | |
| <div class="bg-gradient-radial"></div> | |
| </div> | |
| <div id="app"> | |
| <!-- ═══════════════════════════ TOPBAR ═══════════════════════════ --> | |
| <header class="topbar"> | |
| <div class="topbar-brand"> | |
| <div class="brand-icon" aria-hidden="true"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> | |
| <path d="M2 9L9 2L16 9L9 16L2 9Z" fill="white" fill-opacity="0.9"/> | |
| <path d="M5.5 9L9 5.5L12.5 9L9 12.5L5.5 9Z" fill="white" fill-opacity="0.4"/> | |
| </svg> | |
| </div> | |
| <div class="brand-text"> | |
| <span class="brand-name">ParcelPilot</span> | |
| <span class="brand-sep">·</span> | |
| <span class="brand-product">Intelligence</span> | |
| </div> | |
| <div class="brand-tag">CalQuity AI OS</div> | |
| </div> | |
| <div class="topbar-controls"> | |
| <div class="context-group"> | |
| <div class="ctx-field"> | |
| <label for="context-mode-select" class="ctx-label">Scope</label> | |
| <select id="context-mode-select" class="ctx-select"> | |
| <option value="customer">Customer</option> | |
| <option value="internal" selected>Internal</option> | |
| </select> | |
| </div> | |
| <div class="ctx-divider" aria-hidden="true"></div> | |
| <div class="ctx-field"> | |
| <label for="account-select" class="ctx-label">Account</label> | |
| <select id="account-select" class="ctx-select"> | |
| <option value="ACCT-001">Northstar Logistics</option> | |
| <option value="ACCT-002">LumenWorks</option> | |
| <option value="ACCT-003">Beacon Retail</option> | |
| <option value="ACCT-004">Axis Labs</option> | |
| </select> | |
| </div> | |
| <div class="ctx-divider" aria-hidden="true"></div> | |
| <div class="ctx-field"> | |
| <label for="role-select" class="ctx-label">Role</label> | |
| <select id="role-select" class="ctx-select"> | |
| <option value="operations_lead" selected>Ops Lead</option> | |
| <option value="support_agent">Support Agent</option> | |
| <option value="admin">Admin</option> | |
| <option value="customer">Customer</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="export-log-btn" class="btn-outline btn-sm" aria-label="Export Audit Log" title="Export Audit Log"> | |
| <svg width="14" height="14" viewBox="0 0 16 16" fill="none" style="margin-right: 6px;"><path d="M8 12L3 7l1.4-1.4L7 8.2V1h2v7.2l2.6-2.6L13 7l-5 5zm-6 3v-2h12v2H2z" fill="currentColor"/></svg> | |
| Export Log | |
| </button> | |
| <div class="topbar-status"> | |
| <span class="status-dot active" aria-label="Live"></span> | |
| <span class="status-text">Snapshot <strong>16 Aug 2026 · 11:00 IST</strong></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ═══════════════════════════ NAVTABS ═══════════════════════════ --> | |
| <nav class="navtabs" role="navigation" aria-label="Main navigation"> | |
| <div class="navtabs-left"> | |
| <button class="navtab active" data-tab="tab-chat" id="nav-chat"> | |
| <svg class="navtab-icon" viewBox="0 0 16 16" fill="none"><path d="M1.5 2.5h13v9h-6L5 14v-2.5H1.5v-9z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg> | |
| Assistant | |
| </button> | |
| <button class="navtab" data-tab="tab-proactive" id="nav-proactive"> | |
| <svg class="navtab-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.2"/><path d="M8 5v3.5l2.5 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> | |
| Ops Radar | |
| <span class="navtab-badge" id="proactive-alert-count">0</span> | |
| </button> | |
| <button class="navtab" data-tab="tab-matrix" id="nav-matrix"> | |
| <svg class="navtab-icon" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="1.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9.5" y="1.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="1.5" y="9.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9.5" y="9.5" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/></svg> | |
| Contracts | |
| </button> | |
| <button class="navtab" data-tab="tab-data" id="nav-data"> | |
| <svg class="navtab-icon" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg> | |
| Data | |
| </button> | |
| </div> | |
| <div class="navtabs-right"> | |
| <span class="preset-label">Run scenario:</span> | |
| <select id="evaluator-preset-select" class="preset-select" onchange="onPresetSelectChange(this)"> | |
| <option value="">— choose —</option> | |
| <option value="scenario-1">Northstar Fee Waiver</option> | |
| <option value="scenario-2">LumenWorks Credit Rule</option> | |
| <option value="scenario-3">SLA Breach Radar</option> | |
| <option value="scenario-4">Ticket Escalation Action</option> | |
| <option value="scenario-5">Cross-Account Isolation</option> | |
| </select> | |
| </div> | |
| </nav> | |
| <!-- ═══════════════════════════ MAIN STAGE ═══════════════════════════ --> | |
| <main class="stage" id="main-stage"> | |
| <!-- ──────────── TAB 1: ASSISTANT ──────────── --> | |
| <section class="stage-pane active" id="tab-chat"> | |
| <div class="chat-workspace"> | |
| <!-- Left: Chat panel --> | |
| <div class="chat-panel"> | |
| <div class="panel-head"> | |
| <div class="panel-head-title"> | |
| <span class="panel-title">AI Support Brief</span> | |
| <span class="panel-ctx" id="active-context-indicator">Internal · Operations Lead</span> | |
| </div> | |
| <div class="citation-badge"> | |
| <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M6 1L7.545 4.13H11L8.228 6.326L9.27 9.5L6 7.674L2.73 9.5L3.772 6.326L1 4.13H4.455L6 1Z" fill="#34d399"/></svg> | |
| Verified Sources | |
| </div> | |
| </div> | |
| <div class="messages-area" id="chat-messages"> | |
| <div class="msg-row msg-assistant"> | |
| <div class="msg-avatar" aria-hidden="true"> | |
| <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" fill="rgba(56,189,248,0.25)" stroke="rgba(56,189,248,0.6)" stroke-width="1"/><circle cx="8" cy="8" r="2.5" fill="#38bdf8"/></svg> | |
| </div> | |
| <div class="msg-bubble"> | |
| <p class="msg-name">ParcelPilot Intelligence</p> | |
| <p>I evaluate customer support queries against your signed agreements, SOPs, and historical data — and cite every answer to its exact source document.</p> | |
| <p class="msg-hint">Select a scenario above or type a query below.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="compose-area"> | |
| <textarea id="chat-input" class="compose-input" rows="1" | |
| placeholder="e.g. Can Northstar cancel ORD-1001 without a fee?"></textarea> | |
| <button id="send-btn" class="btn-send" aria-label="Send"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8l10-6-3 6 3 6-10-6z" fill="currentColor"/></svg> | |
| </button> | |
| <span class="compose-hint">⌘↵</span> | |
| </div> | |
| </div> | |
| <!-- Right: Evidence pane --> | |
| <aside class="evidence-panel"> | |
| <div class="panel-head"> | |
| <span class="panel-title">Evidence & Citations</span> | |
| <span class="panel-sub" id="metrics-summary-text">Awaiting query</span> | |
| </div> | |
| <!-- Anchor card --> | |
| <div class="anchor-card anchor-card--empty" id="anchor-card"> | |
| <div class="anchor-empty-state" id="anchor-empty"> | |
| <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="rgba(148,163,184,0.25)" stroke-width="1.4"/><path d="M7 10h6M10 7v6" stroke="rgba(148,163,184,0.25)" stroke-width="1.4" stroke-linecap="round"/></svg> | |
| <span>Send a query to see source citations and evidence anchoring.</span> | |
| </div> | |
| <div class="anchor-card-filled" id="anchor-filled" style="display:none"> | |
| <div class="anchor-card-header"> | |
| <span class="anchor-level-badge" id="anchor-badge"></span> | |
| <span class="anchor-doc" id="anchor-filename"></span> | |
| </div> | |
| <blockquote class="anchor-quote" id="anchor-quote"></blockquote> | |
| <div class="anchor-footer" id="anchor-meta"></div> | |
| </div> | |
| </div> | |
| <!-- Precedence matrix --> | |
| <div class="matrix-panel"> | |
| <div class="matrix-panel-header"> | |
| <span class="matrix-title">Source Precedence Matrix</span> | |
| <span class="matrix-hint">Highest authority wins</span> | |
| </div> | |
| <div class="matrix-rows" id="conflict-matrix-list"> | |
| <div class="matrix-row-empty">Run a query to see the source hierarchy evaluated for that response.</div> | |
| </div> | |
| </div> | |
| <!-- Execution trace --> | |
| <details class="trace-drawer" id="trace-drawer"> | |
| <summary class="trace-summary"> | |
| <svg class="trace-chevron" width="10" height="10" viewBox="0 0 10 10"><path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| Tool Execution Trace | |
| <span class="trace-count" id="trace-count">—</span> | |
| </summary> | |
| <div class="trace-body" id="dag-body"></div> | |
| </details> | |
| </aside> | |
| </div> | |
| </section> | |
| <!-- ──────────── TAB 2: OPS RADAR ──────────── --> | |
| <section class="stage-pane" id="tab-proactive"> | |
| <div class="dashboard-view"> | |
| <div class="dashboard-header"> | |
| <div> | |
| <h2 class="dashboard-title">Proactive Operations Radar</h2> | |
| <p class="dashboard-desc">Automated sweep of all live operational data at snapshot timestamp — SLA targets, security incidents, product issue clusters, carrier anomalies.</p> | |
| </div> | |
| <button class="btn-secondary" onclick="loadProactiveInsights()"> | |
| <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M11.5 2A6.5 6.5 0 1 0 12.5 7.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><polyline points="9,1 12,1 12,4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| Refresh | |
| </button> | |
| </div> | |
| <div class="radar-grid"> | |
| <div class="radar-card border-rose"> | |
| <div class="radar-card-header"> | |
| <span class="radar-card-title">SLA Breaches</span> | |
| <span class="pill pill-rose" id="count-sla-breaches">—</span> | |
| </div> | |
| <div class="radar-card-body" id="list-sla-breaches"> | |
| <div class="radar-empty">Loading…</div> | |
| </div> | |
| </div> | |
| <div class="radar-card border-amber"> | |
| <div class="radar-card-header"> | |
| <span class="radar-card-title">Security Alerts</span> | |
| <span class="pill pill-amber" id="count-security">—</span> | |
| </div> | |
| <div class="radar-card-body" id="list-security"> | |
| <div class="radar-empty">Loading…</div> | |
| </div> | |
| </div> | |
| <div class="radar-card border-cyan"> | |
| <div class="radar-card-header"> | |
| <span class="radar-card-title">Product Issue Clusters</span> | |
| <span class="pill pill-cyan" id="count-clusters">—</span> | |
| </div> | |
| <div class="radar-card-body" id="list-clusters"> | |
| <div class="radar-empty">Loading…</div> | |
| </div> | |
| </div> | |
| <div class="radar-card border-violet"> | |
| <div class="radar-card-header"> | |
| <span class="radar-card-title">Carrier Anomalies</span> | |
| <span class="pill pill-violet" id="count-carrier">—</span> | |
| </div> | |
| <div class="radar-card-body" id="list-carrier"> | |
| <div class="radar-empty">Loading…</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ──────────── TAB 3: CONTRACT MATRIX ──────────── --> | |
| <section class="stage-pane" id="tab-matrix"> | |
| <div class="dashboard-view"> | |
| <div class="dashboard-header"> | |
| <div> | |
| <h2 class="dashboard-title">Contract Precedence & SLA Matrix</h2> | |
| <p class="dashboard-desc">Side-by-side comparison of how signed customer agreements override ParcelPilot's standard policies. Highest authority governs.</p> | |
| </div> | |
| </div> | |
| <div class="contracts-grid" id="contract-matrix-grid"> | |
| <div class="radar-empty" style="padding: 20px;">Loading contracts…</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ──────────── TAB 4: DATA EXPLORER ──────────── --> | |
| <section class="stage-pane" id="tab-data"> | |
| <div class="dashboard-view"> | |
| <div class="subtab-bar"> | |
| <button class="subtab active" data-subtab="subtab-documents">Documents</button> | |
| <button class="subtab" data-subtab="subtab-accounts">Accounts</button> | |
| <button class="subtab" data-subtab="subtab-orders">Orders</button> | |
| <button class="subtab" data-subtab="subtab-tickets">Tickets</button> | |
| </div> | |
| <div class="table-wrapper" id="explorer-content"> | |
| <div class="radar-empty" style="padding: 24px;">Loading…</div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- ═══════════════════ ACTION MODAL ═══════════════════ --> | |
| <div class="modal-mask hidden" id="action-modal"> | |
| <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title"> | |
| <div class="modal-dialog-header"> | |
| <div class="modal-dialog-icon" aria-hidden="true"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 1.5L16 14H2L9 1.5Z" stroke="#fbbf24" stroke-width="1.4" stroke-linejoin="round"/><line x1="9" y1="7" x2="9" y2="10.5" stroke="#fbbf24" stroke-width="1.4" stroke-linecap="round"/><circle cx="9" cy="12.5" r="0.75" fill="#fbbf24"/></svg> | |
| </div> | |
| <div> | |
| <h2 id="modal-title" class="modal-dialog-title">Authorize Action</h2> | |
| <p class="modal-dialog-sub">Human confirmation required before executing</p> | |
| </div> | |
| <button class="modal-close" onclick="closeActionModal()" aria-label="Close"> | |
| <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| </button> | |
| </div> | |
| <div class="modal-dialog-body"> | |
| <div class="modal-action-name" id="modal-action-title">—</div> | |
| <pre class="modal-code" id="modal-action-details"></pre> | |
| <div class="modal-warning"> | |
| <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="#94a3b8" stroke-width="1"/><line x1="6" y1="4" x2="6" y2="6.5" stroke="#94a3b8" stroke-width="1" stroke-linecap="round"/><circle cx="6" cy="8" r="0.5" fill="#94a3b8"/></svg> | |
| This action will update production system state. It cannot be undone without manual reversion. | |
| </div> | |
| </div> | |
| <div class="modal-dialog-footer"> | |
| <button class="btn-secondary" onclick="confirmAction(false)">Cancel</button> | |
| <button class="btn-danger" onclick="confirmAction(true)">Confirm & Execute</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |