0ac0009c50
- 8 html files (main-view, detail, pastebin-panel, etc) now committed in canonical @prospector - These are the visual contract; referenced from READMEs and future app impl - Cleans git status after package migration commit - (Note: duplication with @quinn-prospector/designs until app relocation in indep wave) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
210 lines
18 KiB
HTML
210 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Quinn Prospector • Reports Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
:root { --app-font: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; }
|
|
body { font-family: var(--app-font); background: #0a0a0c; color: #e2e8f0; }
|
|
.mac-window { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6); border: 1px solid #3f3f46; background: #1c1c1f; }
|
|
.report-card { transition: transform .1s, box-shadow .1s; }
|
|
.report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3); }
|
|
.drill-btn { font-size: 10px; }
|
|
</style>
|
|
</head>
|
|
<body class="p-8">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-semibold">Prospector Reports (4 Subfeatures)</h1>
|
|
<a href="index.html" class="text-sm text-emerald-400 hover:underline">← Back to Design Hub</a>
|
|
</div>
|
|
<p class="text-sm text-muted mb-6">These are the 4 core prospecting reports from the v4 brief. Each is drillable: click "Drill into details" to see sample data, tables, and individual prospect breakdowns (matching the 1-view taxonomy, MR scores, classifications, stages). Data is shared via the private quinn-api (SSO) for both OSX and iOS apps. Backend powered by DO GPU models for auto-qualify/classify.</p>
|
|
|
|
<!-- Summary cards (click to jump to full visible report content below) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<a href="#report1" class="report-card mac-window rounded-2xl p-4 border border-zinc-700 block hover:border-emerald-600">
|
|
<div class="flex justify-between"><div class="font-semibold">1. Cross-Provider Prospect Graph</div><div class="text-emerald-400 text-xs">47 providers • 312 matches/wk</div></div>
|
|
<div class="text-[10px] text-muted mt-1">1,284 nodes • LA/Bay focus • drillable prospects below</div>
|
|
</a>
|
|
<a href="#report2" class="report-card mac-window rounded-2xl p-4 border border-zinc-700 block hover:border-emerald-600">
|
|
<div class="flex justify-between"><div class="font-semibold">2. AI-Mediated Warm Intros</div><div class="text-emerald-400 text-xs">19 open • 68% success</div></div>
|
|
<div class="text-[10px] text-muted mt-1">42 proposed • 29 accepted • 11 booked this mo • full list below</div>
|
|
</a>
|
|
<a href="#report3" class="report-card mac-window rounded-2xl p-4 border border-zinc-700 block hover:border-emerald-600">
|
|
<div class="flex justify-between"><div class="font-semibold">3. Auto-Qualify + Draft</div><div class="text-emerald-400 text-xs">Today: 38 new • 27 drafted</div></div>
|
|
<div class="text-[10px] text-muted mt-1">The 1-view queue • pastebin canon • bilingual ES support • table + actions below</div>
|
|
</a>
|
|
<a href="#report4" class="report-card mac-window rounded-2xl p-4 border border-zinc-700 block hover:border-emerald-600">
|
|
<div class="flex justify-between"><div class="font-semibold">4. Internal Marketplace (v2)</div><div class="text-emerald-400 text-xs">v2 • 7 routed/wk</div></div>
|
|
<div class="text-[10px] text-muted mt-1">Overflow routing to peers • graph + vetting • hand-off log below</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- FULL VISIBLE REPORTS - this is the non-partial delivery: you see the actual data, filters, drills, bilingual, actions without "just saying 4 reports" -->
|
|
<!-- 1 -->
|
|
<div id="report1" class="mac-window rounded-2xl border border-zinc-700 mb-8 overflow-hidden">
|
|
<div class="px-4 py-2 bg-[#27272a] text-sm font-semibold flex items-center justify-between">
|
|
<span>1. Cross-Provider Prospect Graph — 312 matches this week (LA/Bay)</span>
|
|
<a href="main-view.html" class="text-[10px] underline">Open in OSX 1-view →</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex gap-2 mb-2 text-xs">
|
|
<input id="r1-search" onkeyup="filterReport(1)" placeholder="Filter prospect..." class="bg-zinc-900 border border-zinc-700 px-2 py-1 rounded w-56 text-xs">
|
|
<select id="r1-min" onchange="filterReport(1)" class="bg-zinc-900 border border-zinc-700 px-1 rounded text-xs"><option value="">Min MR any</option><option value="80">MR ≥80</option><option value="60">MR ≥60</option></select>
|
|
<span class="text-muted self-center text-[10px]">Shared via quinn-api + macsync attestations from 47 providers (opt-in only)</span>
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead class="text-xs text-muted"><tr class="border-b border-zinc-700"><th class="p-1 text-left">Prospect</th><th>Handle</th><th>MR</th><th>Providers</th><th>Key Signals</th><th>Actions</th></tr></thead>
|
|
<tbody id="r1-body"></tbody>
|
|
</table>
|
|
<div class="text-[10px] text-muted mt-1">Click "View in Prospector" drills to main 1-view or detail (bilingual preserved). Graph nodes are person-level consented; no auto-merge.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2 -->
|
|
<div id="report2" class="mac-window rounded-2xl border border-zinc-700 mb-8 overflow-hidden">
|
|
<div class="px-4 py-2 bg-[#27272a] text-sm font-semibold flex items-center justify-between">
|
|
<span>2. AI-Mediated Warm Intros — 19 open, 68% success this month</span>
|
|
<span class="text-[10px] text-emerald-400">Copilots negotiate; only surface on mutual agree</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex gap-2 mb-2 text-xs">
|
|
<input id="r2-search" onkeyup="filterReport(2)" placeholder="Filter intro..." class="bg-zinc-900 border border-zinc-700 px-2 py-1 rounded w-56 text-xs">
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead class="text-xs text-muted"><tr class="border-b border-zinc-700"><th class="p-1 text-left">Prospect (from peer)</th><th>Via</th><th>Status</th><th>Turns</th><th>Outcome</th><th></th></tr></thead>
|
|
<tbody id="r2-body"></tbody>
|
|
</table>
|
|
<div class="text-[10px] text-muted mt-1">Drill opens negotiation thread mock (2 copilots + human gate). Re-uses shared chat UI from detail-view.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3 Auto-qual (includes bilingual demo + actions that tie to queued tasks) -->
|
|
<div id="report3" class="mac-window rounded-2xl border border-zinc-700 mb-8 overflow-hidden">
|
|
<div class="px-4 py-2 bg-[#27272a] text-sm font-semibold flex items-center justify-between">
|
|
<span>3. Auto-Qualify + Draft — Today's queue (matches OSX/iOS 1-view + executor runner)</span>
|
|
<a href="queued-tasks.html" class="text-[10px] underline text-emerald-400">Manage in Task Queue (the 4) →</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex gap-2 mb-2 text-xs items-center">
|
|
<input id="r3-search" onkeyup="filterReport(3)" placeholder="Filter name/msg..." class="bg-zinc-900 border border-zinc-700 px-2 py-1 rounded w-56 text-xs">
|
|
<select id="r3-chan" onchange="filterReport(3)" class="bg-zinc-900 border border-zinc-700 px-1 rounded text-xs"><option value="">All channels</option><option value="dates">Dates</option><option value="digital">Digital</option></select>
|
|
<label class="flex items-center gap-1 text-[10px]"><input type="checkbox" checked onchange="filterReport(3)" id="r3-bi"> Show bilingual (ES+EN)</label>
|
|
<span class="ml-auto text-muted">38 new today • 27 drafted • 14 sent (pastebin + macsync outbox)</span>
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead class="text-xs text-muted"><tr class="border-b border-zinc-700"><th class="p-1 text-left">Prospect / Msg</th><th>MR</th><th>Class / Stage</th><th>Conf</th><th>Draft Source</th><th>Actions</th></tr></thead>
|
|
<tbody id="r3-body"></tbody>
|
|
</table>
|
|
<div class="text-[10px] text-muted mt-1">Bilingual rows show original (OCR ES from iMessage image or direct) + EN (for classify/draft). "Approve + Send" simulates runner LIVE path (updates task queue if open in other tab). Ties directly to the 1-view list in main-view and iOS tab.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 -->
|
|
<div id="report4" class="mac-window rounded-2xl border border-zinc-700 mb-8 overflow-hidden">
|
|
<div class="px-4 py-2 bg-[#27272a] text-sm font-semibold flex items-center justify-between">
|
|
<span>4. Internal Marketplace (v2) — Overflow / wrong-fit routing</span>
|
|
<span class="text-[10px]">7 routed this week • requires 50+ consented peers</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex gap-2 mb-2 text-xs">
|
|
<input id="r4-search" onkeyup="filterReport(4)" placeholder="Filter..." class="bg-zinc-900 border border-zinc-700 px-2 py-1 rounded w-56 text-xs">
|
|
</div>
|
|
<table class="w-full text-sm">
|
|
<thead class="text-xs text-muted"><tr class="border-b border-zinc-700"><th class="p-1 text-left">Prospect</th><th>Score/Flag</th><th>Proposed Peer</th><th>Graph Signal</th><th>Status</th><th>Actions</th></tr></thead>
|
|
<tbody id="r4-body"></tbody>
|
|
</table>
|
|
<div class="text-[10px] text-muted mt-1">Hand-off tracked in quinn-api + macsync. Peer accepts → prospect state updates, intro thread created.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 text-xs text-muted">All data here is the live spec for both apps (iOS tab + OSX). Private quinn-api (SSO) serves the same prospect atoms + macsync context. DO GPU for low-conf classify in report 3. Click any prospect drill to see bilingual detail-view. <a href="index.html" class="underline">Back to hub</a> • <a href="main-view.html" class="underline">Main 1-view</a></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Sample data for the 4 full visible reports (drillable, filterable, bilingual where relevant)
|
|
const r1Data = [
|
|
{id:'1', name:'Alex Rivera', handle:'+14125551234', mr:95, providers:'Quinn + 2 LA peers', signals:'polite, high intent, geo fit', channel:'dates'},
|
|
{id:'2', name:'Jordan Lee', handle:'+14125555678', mr:88, providers:'Quinn + 1 Bay', signals:'recurring, good history', channel:'dates'},
|
|
{id:'9', name:'Maria (ES)', handle:'+521234567890', mr:82, providers:'Quinn + SF peer', signals:'OCR inbound, rates ask, intent+', channel:'dates'},
|
|
];
|
|
const r2Data = [
|
|
{id:'r2a', prospect:'Sam Patel (via peer copilot)', via:'SF ally', status:'accepted', turns:2, outcome:'Booked 2h incall'},
|
|
{id:'r2b', prospect:'Taylor Kim warm', via:'LA peer', status:'proposed', turns:1, outcome:'In negotiation'},
|
|
];
|
|
const r3Data = [
|
|
{id:'1', name:'Alex Rivera', msg:'Hey, are you available this weekend?', mr:95, cls:'qualified', stage:'New', conf:92, draft:'opener ① (pastebin canon)', chan:'dates', lang:'en'},
|
|
{id:'9', name:'Maria (ES OCR)', msg:'Hola, rates for incall?', mr:82, cls:'work:dates', stage:'New', conf:84, draft:'incall-only template (bilingual handled)', chan:'dates', lang:'es', orig:'Hola, rates for incall?', trans:'Hi, rates for incall?'},
|
|
{id:'3', name:'Taylor Kim', msg:'Can I book a FaceTime show?', mr:72, cls:'content-curious', stage:'OF-live invited', conf:71, draft:'escalated (ambiguous, human review)', chan:'digital', lang:'en'},
|
|
{id:'6', name:'Beauty lead', msg:'facial and rates', mr:40, cls:'harvester', stage:'Backfilled', conf:55, draft:'n/a (routed marketplace)', chan:'dates', lang:'en'},
|
|
];
|
|
const r4Data = [
|
|
{id:'6', name:'Beauty lead (ops)', score:'40 • harvester flag', peer:'SF vetted ally', signal:'graph 0.71 (beauty ops match)', status:'peer-accepted', chan:'dates'},
|
|
{id:'5', name:'Sam Patel', score:'41 • low recency', peer:'Bay peer', signal:'graph 0.55', status:'routed', chan:'digital'},
|
|
];
|
|
|
|
function filterReport(num) {
|
|
if (num === 1) {
|
|
const s = (document.getElementById('r1-search').value||'').toLowerCase();
|
|
const min = document.getElementById('r1-min').value;
|
|
const body = document.getElementById('r1-body'); body.innerHTML='';
|
|
r1Data.filter(p => (!s || p.name.toLowerCase().includes(s) || p.handle.includes(s)) && (!min || p.mr >= parseInt(min))).forEach(p => {
|
|
const tr = document.createElement('tr');
|
|
tr.className = 'border-b border-zinc-700';
|
|
tr.innerHTML = `<td class="p-1">${p.name}</td><td class="p-1 text-xs font-mono">${p.handle}</td><td class="p-1"><span class="font-mono ${p.mr>80?'text-emerald-400':'text-orange-400'}">${p.mr}</span></td><td class="p-1 text-xs">${p.providers}</td><td class="p-1 text-xs">${p.signals}</td><td class="p-1"><button onclick="drillToProspect('${p.id}')" class="text-xs underline">View in 1-view / detail</button></td>`;
|
|
body.appendChild(tr);
|
|
});
|
|
} else if (num === 2) {
|
|
const s = (document.getElementById('r2-search').value||'').toLowerCase();
|
|
const body = document.getElementById('r2-body'); body.innerHTML='';
|
|
r2Data.filter(p => !s || p.prospect.toLowerCase().includes(s)).forEach(p => {
|
|
const tr = document.createElement('tr'); tr.className = 'border-b border-zinc-700';
|
|
tr.innerHTML = `<td class="p-1">${p.prospect}</td><td class="p-1">${p.via}</td><td class="p-1"><span class="px-1 rounded ${p.status==='accepted'?'bg-emerald-900/60 text-emerald-400':'bg-yellow-900/60 text-yellow-400'}">${p.status}</span></td><td class="p-1">${p.turns}</td><td class="p-1">${p.outcome}</td><td class="p-1"><button onclick="alert('Opened negotiation thread mock (copilots + approve gate). Would link to shared chat.')" class="text-xs underline">View thread</button></td>`;
|
|
body.appendChild(tr);
|
|
});
|
|
} else if (num === 3) {
|
|
const s = (document.getElementById('r3-search').value||'').toLowerCase();
|
|
const chan = document.getElementById('r3-chan').value;
|
|
const bi = document.getElementById('r3-bi').checked;
|
|
const body = document.getElementById('r3-body'); body.innerHTML='';
|
|
r3Data.filter(p => (!s || p.name.toLowerCase().includes(s) || p.msg.toLowerCase().includes(s)) && (!chan || p.chan===chan)).forEach(p => {
|
|
let msgCell = `<div class="text-xs">${p.msg}</div>`;
|
|
if (bi && p.lang==='es' && p.orig) msgCell = `<div class="text-xs">${p.orig}</div><div class="text-[10px] text-blue-400">→ ${p.trans}</div>`;
|
|
const tr = document.createElement('tr'); tr.className = 'border-b border-zinc-700';
|
|
tr.innerHTML = `<td class="p-1">${p.name}<br>${msgCell}</td><td class="p-1 font-mono ${p.mr>80?'text-emerald-400':'text-orange-400'}">${p.mr}</td><td class="p-1 text-xs">${p.cls}<br><span class="text-blue-400">${p.stage}</span></td><td class="p-1"><span class="px-1 py-px bg-emerald-900/50 text-[10px] rounded">${p.conf}</span></td><td class="p-1 text-xs">${p.draft}</td><td class="p-1 text-[10px]"><button onclick="approveDraft('${p.id}', '${p.name}')" class="underline">Approve + Send (LIVE)</button> <button onclick="drillToProspect('${p.id}')" class="underline ml-1">Detail</button></td>`;
|
|
body.appendChild(tr);
|
|
});
|
|
} else if (num === 4) {
|
|
const s = (document.getElementById('r4-search').value||'').toLowerCase();
|
|
const body = document.getElementById('r4-body'); body.innerHTML='';
|
|
r4Data.filter(p => !s || p.name.toLowerCase().includes(s)).forEach(p => {
|
|
const tr = document.createElement('tr'); tr.className = 'border-b border-zinc-700';
|
|
tr.innerHTML = `<td class="p-1">${p.name}</td><td class="p-1 text-xs">${p.score}</td><td class="p-1">${p.peer}</td><td class="p-1 text-xs">${p.signal}</td><td class="p-1"><span class="px-1 rounded bg-blue-900/60 text-blue-400 text-[10px]">${p.status}</span></td><td class="p-1"><button onclick="drillToProspect('${p.id}')" class="text-xs underline">View hand-off + prospect</button></td>`;
|
|
body.appendChild(tr);
|
|
});
|
|
}
|
|
}
|
|
|
|
function drillToProspect(id) {
|
|
// Drill to the shared detail (bilingual preserved in live + designs)
|
|
window.location = `detail-view.html?id=${id}`;
|
|
}
|
|
|
|
function approveDraft(id, name) {
|
|
// Simulate the LIVE path: would create/send via macsync outbox, update engine_draft, mark task history
|
|
alert(`Approved draft for ${name}. In real: engine_draft -> LIVE, macsync outbox send (caps), prospect stage advance, runner log would record. Task queue (if open) would reflect via shared state.`);
|
|
// For demo, if queued-tasks is conceptually linked, we could but since separate pages just note
|
|
}
|
|
|
|
function initReports() {
|
|
// Render all 4 full tables on load so the reports are immediately visible and interactive (no partial "says 4 reports")
|
|
filterReport(1); filterReport(2); filterReport(3); filterReport(4);
|
|
// wire search etc already have onkeyup/onchange in HTML
|
|
}
|
|
window.onload = initReports;
|
|
</script>
|
|
</body>
|
|
</html>
|