Spaces:

ITNovaML
/

PCAgentinAI

Sleeping

App Files Files Community

PCAgentinAI / policybridge_app.html

ITNovaML

add frontend HTML apps

e0340d5 5 months ago

Raw

History Blame Contribute Delete

161 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PolicyBridge — P&C Intelligence Platform</title>
	<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
	<style>
	:root {
	--bg: #0a0d12;
	--bg2: #0f141c;
	--bg3: #151c27;
	--bg4: #1c2535;
	--border: #1e2d42;
	--border2: #2a3a52;
	--muted: #4a6080;
	--muted2: #6a80a0;
	--text: #c8d8e8;
	--text2: #e8f2ff;
	--white: #f0f6ff;
	--accent: #00a8ff;
	--accent2: #0070cc;
	--amber: #ffb020;
	--amber2: #cc8800;
	--green: #00cc6a;
	--green2: #008844;
	--red: #ff4444;
	--red2: #cc1111;
	--purple: #8860ff;
	--bronze-c: #cd7f32;
	--silver-c: #8ab4c8;
	--gold-c: #ffd700;
	--font-head: 'Syne', sans-serif;
	--font-body: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--r: 8px;
	--r2: 12px;
	}

	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
	html { scroll-behavior: smooth; }
	body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 13px; line-height: 1.6; overflow-x: hidden; }

	/* ── HEADER ── */
	.app-header {
	background: var(--bg2);
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center;
	padding: 0 20px;
	height: 54px;
	position: sticky; top: 0; z-index: 200;
	gap: 24px;
	}
	.logo { display: flex; align-items: center; gap: 10px; margin-right: 8px; }
	.logo-mark {
	width: 30px; height: 30px; border-radius: 7px;
	background: linear-gradient(135deg, var(--accent), var(--purple));
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-size: 15px; font-weight: 800; color: white;
	}
	.logo-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--white); }
	.logo-sub { font-size: 10px; color: var(--muted2); letter-spacing: 1.5px; text-transform: uppercase; }

	/* ── TABS ── */
	.main-tabs {
	display: flex; gap: 2px; flex: 1;
	overflow-x: auto;
	}
	.tab-btn {
	padding: 6px 16px;
	border-radius: 7px;
	border: none;
	background: transparent;
	color: var(--muted2);
	font-family: var(--font-body);
	font-size: 12px; font-weight: 500;
	cursor: pointer;
	display: flex; align-items: center; gap: 7px;
	transition: all 0.2s;
	white-space: nowrap;
	letter-spacing: 0.2px;
	}
	.tab-btn:hover { background: var(--bg3); color: var(--text2); }
	.tab-btn.active { background: var(--bg4); color: var(--accent); border: 1px solid var(--border2); }
	.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

	.hdr-right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
	.pill {
	padding: 3px 10px; border-radius: 20px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
	}
	.pill-accent { background: rgba(0,168,255,0.15); color: var(--accent); border: 1px solid rgba(0,168,255,0.3); }
	.pill-amber { background: rgba(255,176,32,0.15); color: var(--amber); border: 1px solid rgba(255,176,32,0.3); }
	.pill-green { background: rgba(0,204,106,0.15); color: var(--green); border: 1px solid rgba(0,204,106,0.3); }
	.pill-muted { background: var(--bg4); color: var(--muted2); border: 1px solid var(--border); }

	/* ── TAB PAGES ── */
	.tab-page { display: none; min-height: calc(100vh - 54px); }
	.tab-page.active { display: block; }

	/* ══════════════════════════════════════════
	TAB 1 — SUBMISSION FORM
	══════════════════════════════════════════ */
	.sub-layout {
	display: grid;
	grid-template-columns: 220px 1fr 260px;
	min-height: calc(100vh - 54px);
	}

	/* Left nav */
	.sub-nav {
	background: var(--bg2);
	border-right: 1px solid var(--border);
	padding: 20px 14px;
	position: sticky; top: 54px;
	height: calc(100vh - 54px); overflow-y: auto;
	}
	.snav-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; margin-bottom: 10px; padding: 0 8px; }
	.snav-item {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 10px; border-radius: var(--r);
	cursor: pointer; color: var(--muted2); font-size: 12px; font-weight: 500;
	transition: all 0.2s; margin-bottom: 2px;
	}
	.snav-item:hover { background: var(--bg3); color: var(--text); }
	.snav-item.active { background: rgba(0,168,255,0.1); color: var(--accent); border: 1px solid rgba(0,168,255,0.2); }
	.snav-item.done { color: var(--green); }
	.snav-num {
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--bg4); border: 1px solid var(--border2);
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 600; flex-shrink: 0;
	transition: all 0.2s;
	}
	.snav-item.active .snav-num { background: var(--accent); border-color: var(--accent); color: white; }
	.snav-item.done .snav-num { background: var(--green); border-color: var(--green); color: white; }

	.submitter-type-box { margin-top: 20px; padding: 12px; background: var(--bg3); border-radius: var(--r); border: 1px solid var(--border); }
	.stype-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
	.stype-opt { display: flex; flex-direction: column; gap: 4px; }
	.stype-opt label {
	display: flex; align-items: center; gap: 7px;
	font-size: 11px; color: var(--muted2); cursor: pointer;
	padding: 5px 7px; border-radius: 6px; transition: background 0.15s;
	}
	.stype-opt label:hover { background: var(--bg4); }
	.stype-opt input[type="radio"] { accent-color: var(--accent); }

	.db-info-box { margin-top: 16px; padding: 10px 12px; background: var(--bg3); border-radius: var(--r); border: 1px solid var(--border); }
	.db-info-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
	.db-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
	.db-row .dk { color: var(--muted); }
	.db-row .dv { color: var(--text); font-family: var(--font-mono); }

	/* Form main */
	.sub-form-main { padding: 24px 28px; overflow-y: auto; }
	.form-section { display: none; animation: fadeIn 0.25s ease; }
	.form-section.active { display: block; }
	@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

	.fsec-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
	.fsec-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--border2); }
	.fsec-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--white); }
	.fsec-desc { font-size: 12px; color: var(--muted2); }

	/* Cards */
	.fcard { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 18px 20px; margin-bottom: 16px; }
	.fcard-title {
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
	color: var(--muted2); margin-bottom: 14px;
	display: flex; align-items: center; gap: 8px;
	}
	.fcard-title::before { content: ''; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; display: inline-block; }

	/* Grid */
	.fg { display: grid; gap: 14px; }
	.fg2 { grid-template-columns: 1fr 1fr; }
	.fg3 { grid-template-columns: 1fr 1fr 1fr; }
	.fg4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
	.cs2 { grid-column: span 2; }
	.cs3 { grid-column: span 3; }

	/* Fields */
	.fld { display: flex; flex-direction: column; gap: 4px; }
	.flabel { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.2px; display: flex; align-items: center; gap: 4px; }
	.flabel .req { color: var(--red); }
	.flabel .ftip { font-weight: 400; color: var(--muted); font-size: 10px; margin-left: auto; }

	input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
	input[type="number"], select, textarea {
	width: 100%; padding: 8px 11px;
	background: var(--bg3); border: 1px solid var(--border2);
	border-radius: var(--r); color: var(--text2);
	font-family: var(--font-body); font-size: 12px;
	transition: border-color 0.2s, box-shadow 0.2s;
	outline: none; appearance: none;
	}
	input:focus, select:focus, textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0,168,255,0.12);
	}
	input.err, select.err { border-color: var(--red); background: rgba(255,68,68,0.06); }
	input.ok, select.ok { border-color: var(--green); }
	select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%234a6080' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
	select option { background: var(--bg3); }
	textarea { resize: vertical; min-height: 72px; }
	.ferr { font-size: 10px; color: var(--red); display: none; }
	.ferr.show { display: block; }
	.fhint { font-size: 10px; color: var(--muted); }

	/* Coverage cards */
	.cov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
	.cov-card {
	border: 1.5px solid var(--border2); border-radius: 10px; padding: 12px;
	cursor: pointer; transition: all 0.2s; background: var(--bg3); position: relative;
	}
	.cov-card:hover { border-color: var(--accent); transform: translateY(-1px); }
	.cov-card.sel { border-color: var(--accent); background: rgba(0,168,255,0.06); }
	.cov-card input { position: absolute; opacity: 0; }
	.cov-code { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 3px; }
	.cov-name { font-size: 10px; color: var(--text); font-weight: 600; }
	.cov-desc { font-size: 9px; color: var(--muted); margin-top: 3px; }

	/* Checkboxes */
	.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
	.chk-item {
	display: flex; align-items: center; gap: 8px; padding: 7px 10px;
	border: 1px solid var(--border2); border-radius: var(--r); cursor: pointer;
	font-size: 11px; color: var(--muted2); transition: all 0.2s; background: var(--bg3);
	}
	.chk-item:hover { border-color: var(--accent); color: var(--accent); }
	.chk-item.on { border-color: var(--accent); background: rgba(0,168,255,0.08); color: var(--accent); font-weight: 600; }
	.chk-item input { accent-color: var(--accent); }

	/* Buttons */
	.btn-row { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
	.btn {
	padding: 8px 20px; border-radius: var(--r);
	font-family: var(--font-body); font-size: 12px; font-weight: 600;
	cursor: pointer; border: none; transition: all 0.2s;
	display: flex; align-items: center; gap: 6px;
	}
	.btn-accent { background: var(--accent); color: white; }
	.btn-accent:hover { background: var(--accent2); box-shadow: 0 4px 16px rgba(0,168,255,0.3); }
	.btn-ghost { background: transparent; color: var(--muted2); border: 1px solid var(--border2); }
	.btn-ghost:hover { border-color: var(--text); color: var(--text); }
	.btn-green { background: var(--green); color: white; }
	.btn-green:hover { background: var(--green2); }
	.btn-amber { background: var(--amber); color: var(--bg); }
	.btn-amber:hover { background: var(--amber2); }
	.ml { margin-left: auto; }
	.step-hint { font-size: 11px; color: var(--muted); }

	/* Alert */
	.alert {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 14px; border-radius: var(--r);
	font-size: 12px; margin-bottom: 14px; border-left: 3px solid;
	}
	.alert-info { background: rgba(0,168,255,0.06); border-color: var(--accent); color: var(--accent); }
	.alert-warn { background: rgba(255,176,32,0.06); border-color: var(--amber); color: var(--amber); }
	.alert-green { background: rgba(0,204,106,0.06); border-color: var(--green); color: var(--green); }
	.alert-red { background: rgba(255,68,68,0.06); border-color: var(--red); color: var(--red); }

	/* Right summary panel */
	.sub-panel {
	background: var(--bg2); border-left: 1px solid var(--border);
	padding: 18px 16px; position: sticky; top: 54px;
	height: calc(100vh - 54px); overflow-y: auto;
	}
	.panel-sub-id {
	background: var(--bg3); border: 1px solid var(--border2);
	border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
	}
	.ps-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 4px; }
	.ps-val { font-family: var(--font-mono); font-size: 12px; color: var(--amber); }
	.pcard { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
	.pcard-title { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
	.prow { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; margin-bottom: 4px; }
	.pk { color: var(--muted2); flex-shrink: 0; }
	.pv { color: var(--text2); font-weight: 500; text-align: right; word-break: break-word; }
	.pv.mono { font-family: var(--font-mono); font-size: 10px; }

	.val-list { display: flex; flex-direction: column; gap: 4px; }
	.val-row { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 5px 8px; border-radius: 5px; }
	.val-row.ok { background: rgba(0,204,106,0.08); color: var(--green); }
	.val-row.idle { background: var(--bg4); color: var(--muted); }
	.val-row.err { background: rgba(255,68,68,0.08); color: var(--red); }

	/* Review tables */
	.rtable { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
	.rtable th { background: var(--bg4); color: var(--muted2); padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
	.rtable td { padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 12px; vertical-align: top; }
	.rtable tr:nth-child(even) td { background: rgba(255,255,255,0.01); }
	.rtable td:first-child { color: var(--muted2); width: 35%; font-size: 11px; }
	.rtable td:last-child { color: var(--text2); font-weight: 500; }

	/* JSON box */
	.json-box {
	background: var(--bg); border: 1px solid var(--border2); border-radius: 10px; padding: 14px;
	font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7;
	max-height: 380px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
	}
	.jk { color: #79b8ff; }
	.jstr{ color: #9ec8a0; }
	.jnum{ color: #f08d49; }
	.jbol{ color: #d19a66; }

	/* Success */
	.success-wrap { text-align: center; padding: 50px 30px; }
	.suc-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(0,204,106,0.1); border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 0 auto 20px; animation: popIn 0.5s cubic-bezier(.175,.885,.32,1.275); }
	@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
	.suc-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
	.suc-sub { color: var(--muted2); margin-bottom: 28px; font-size: 13px; }
	.suc-detail { background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; padding: 20px 24px; display: inline-block; text-align: left; min-width: 360px; margin-bottom: 20px; }
	.path-box { background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; padding: 12px 16px; display: inline-block; text-align: left; min-width: 360px; margin-bottom: 24px; }
	.path-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 5px; }
	.path-val { font-family: var(--font-mono); font-size: 12px; color: var(--amber); }

	/* ══════════════════════════════════════════
	TAB 2 — MYSQL INTEGRATION
	══════════════════════════════════════════ */
	.int-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 54px); }
	.int-sidebar { background: var(--bg2); border-right: 1px solid var(--border); padding: 20px 14px; }
	.int-main { padding: 24px 28px; overflow-y: auto; }

	.int-section { display: none; }
	.int-section.active { display: block; animation: fadeIn 0.25s ease; }

	.config-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px 22px; margin-bottom: 16px; }
	.cc-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
	.cc-desc { font-size: 12px; color: var(--muted2); margin-bottom: 18px; }

	.conn-status {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-radius: var(--r); background: var(--bg3);
	border: 1px solid var(--border2); font-size: 12px;
	}
	.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
	.status-dot.green { background: var(--green); animation: pulse 2s infinite; }
	.status-dot.red { background: var(--red); }
	.status-dot.amber { background: var(--amber); animation: pulse 1s infinite; }
	@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

	.sql-area {
	background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
	padding: 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
	color: #9ec8a0; min-height: 120px; max-height: 400px; overflow-y: auto;
	white-space: pre-wrap; word-break: break-all;
	}
	.sql-kw { color: #79b8ff; font-weight: 600; }
	.sql-str { color: #f0c060; }
	.sql-cmt { color: #4a6080; font-style: italic; }
	.sql-fn { color: #f08d49; }

	.log-console {
	background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
	padding: 12px 14px; font-family: var(--font-mono); font-size: 11px;
	min-height: 180px; max-height: 350px; overflow-y: auto; line-height: 1.8;
	}
	.log-line { display: flex; gap: 10px; }
	.log-ts { color: var(--muted); flex-shrink: 0; font-size: 10px; }
	.log-ok { color: var(--green); }
	.log-err { color: var(--red); }
	.log-info { color: var(--accent); }
	.log-warn { color: var(--amber); }

	/* Table mapping */
	.tmap { width: 100%; border-collapse: collapse; }
	.tmap th { background: var(--bg4); color: var(--muted2); padding: 7px 12px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
	.tmap td { padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px; vertical-align: top; }
	.tmap tr:hover td { background: rgba(255,255,255,0.02); }
	.tmap .schema-badge { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(205,127,50,0.15); color: var(--bronze-c); }
	.tmap .status-cell { display: flex; align-items: center; gap: 5px; }
	.tmap .s-ok { color: var(--green); }
	.tmap .s-pend { color: var(--amber); }

	/* Progress bars */
	.prog-wrap { margin-bottom: 16px; }
	.prog-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted2); margin-bottom: 5px; }
	.prog-bar { height: 6px; background: var(--bg4); border-radius: 10px; overflow: hidden; }
	.prog-fill { height: 100%; border-radius: 10px; transition: width 0.8s ease; }
	.fill-accent { background: linear-gradient(90deg, var(--accent2), var(--accent)); }
	.fill-green { background: linear-gradient(90deg, var(--green2), var(--green)); }
	.fill-amber { background: linear-gradient(90deg, var(--amber2), var(--amber)); }

	/* ══════════════════════════════════════════
	TAB 3 — CONNECTORS
	══════════════════════════════════════════ */
	.conn-page { padding: 28px; }
	.conn-page-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
	.conn-page-sub { font-size: 13px; color: var(--muted2); margin-bottom: 28px; }

	.conn-cats { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
	.cat-btn { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border2); background: var(--bg2); color: var(--muted2); font-size: 11px; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); }
	.cat-btn.active, .cat-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

	.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
	.conn-card {
	background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2);
	padding: 18px; transition: all 0.2s; cursor: pointer; position: relative;
	}
	.conn-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
	.conn-card.connected { border-color: rgba(0,204,106,0.3); }
	.conn-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
	.conn-logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
	.conn-name { font-size: 14px; font-weight: 600; color: var(--text2); }
	.conn-cat { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
	.conn-desc { font-size: 11px; color: var(--muted2); line-height: 1.5; margin-bottom: 12px; }
	.conn-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
	.conn-tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
	.tag-db { background: rgba(0,168,255,0.12); color: var(--accent); }
	.tag-api { background: rgba(136,96,255,0.12); color: var(--purple); }
	.tag-file { background: rgba(255,176,32,0.12); color: var(--amber); }
	.tag-cloud { background: rgba(0,204,106,0.12); color: var(--green); }
	.tag-stream{ background: rgba(255,68,68,0.12); color: var(--red); }
	.conn-status-row { display: flex; align-items: center; justify-content: space-between; }
	.conn-badge-on { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; background: rgba(0,204,106,0.12); color: var(--green); border: 1px solid rgba(0,204,106,0.25); }
	.conn-badge-off { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; background: var(--bg4); color: var(--muted); border: 1px solid var(--border); }
	.conn-action { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: none; font-family: var(--font-body); transition: all 0.2s; }
	.ca-connect { background: var(--accent); color: white; }
	.ca-connect:hover { background: var(--accent2); }
	.ca-manage { background: var(--bg4); color: var(--text2); border: 1px solid var(--border2); }
	.ca-manage:hover { background: var(--bg3); }

	/* ══════════════════════════════════════════
	TAB 4 — AGENT PIPELINE
	══════════════════════════════════════════ */
	.agents-page { padding: 28px; }
	.agents-title { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
	.agents-sub { font-size: 13px; color: var(--muted2); margin-bottom: 28px; }

	.pipeline-flow { display: flex; align-items: flex-start; gap: 0; margin-bottom: 32px; overflow-x: auto; padding-bottom: 8px; }
	.pf-agent { flex: 0 0 180px; }
	.pf-connector { display: flex; align-items: center; flex: 1; min-width: 30px; max-width: 60px; padding-top: 35px; }
	.pf-line { flex: 1; height: 2px; background: var(--border2); position: relative; }
	.pf-line::after { content: '▶'; position: absolute; right: -6px; top: -7px; font-size: 10px; color: var(--border2); }
	.pf-line.active { background: var(--accent); }
	.pf-line.active::after { color: var(--accent); }
	.pf-line.done { background: var(--green); }
	.pf-line.done::after { color: var(--green); }

	.agent-box {
	background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2);
	padding: 14px; text-align: center; cursor: pointer;
	transition: all 0.2s; position: relative;
	}
	.agent-box:hover { border-color: var(--border2); transform: translateY(-2px); }
	.agent-box.phase2 { border-style: dashed; opacity: 0.6; }
	.agent-box.active { border-color: var(--accent); box-shadow: 0 0 20px rgba(0,168,255,0.15); }
	.agent-box.done { border-color: var(--green); }
	.agent-icon-wrap { width: 50px; height: 50px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
	.agent-step { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; }
	.agent-name { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 3px; }
	.agent-code { font-family: var(--font-mono); font-size: 9px; color: var(--muted2); }
	.agent-badge { position: absolute; top: -7px; right: -7px; padding: 2px 7px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
	.ab-p1 { background: var(--amber); color: var(--bg); }
	.ab-p2 { background: var(--bg4); color: var(--muted2); border: 1px solid var(--border2); }

	.agent-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
	.agent-detail-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 18px 20px; }
	.adc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
	.adc-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
	.adc-name { font-size: 14px; font-weight: 600; color: var(--white); }
	.adc-step { font-size: 10px; color: var(--muted2); }
	.adc-prop { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px; }
	.adc-pk { color: var(--muted2); }
	.adc-pv { color: var(--text2); font-family: var(--font-mono); font-size: 10px; }

	.python-snippet {
	background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
	padding: 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
	overflow-x: auto; white-space: pre; margin-top: 14px;
	}
	.py-kw { color: #cc99ff; }
	.py-str { color: #9ec8a0; }
	.py-fn { color: #79b8ff; }
	.py-cmt { color: #4a6080; font-style: italic; }
	.py-cls { color: #f08d49; }
	.py-num { color: #f08d49; }
	.py-dec { color: #ffcc66; }

	/* ══════════════════════════════════════════
	SHARED / MISC
	══════════════════════════════════════════ */
	.page-header { margin-bottom: 24px; }
	.ph-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--white); }
	.ph-sub { font-size: 12px; color: var(--muted2); margin-top: 3px; }

	.section-divider { height: 1px; background: var(--border); margin: 22px 0; }
	.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

	.stat-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px 18px; }
	.stat-val { font-family: var(--font-head); font-size: 28px; font-weight: 800; margin-bottom: 2px; }
	.stat-label { font-size: 11px; color: var(--muted2); }

	::-webkit-scrollbar { width: 4px; height: 4px; }
	::-webkit-scrollbar-track { background: var(--bg); }
	::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

	/* Step progress bar */
	.step-bar {
	display: flex; gap: 0; align-items: center;
	margin-bottom: 24px; padding: 14px 20px;
	background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2);
	}
	.sb-step { display: flex; align-items: center; gap: 0; flex: 1; }
	.sb-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
	.sb-bubble {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--bg4); border: 1.5px solid var(--border2);
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 600; color: var(--muted);
	transition: all 0.25s; flex-shrink: 0;
	}
	.sb-bubble.active { background: var(--accent); border-color: var(--accent); color: white; }
	.sb-bubble.done { background: var(--green); border-color: var(--green); color: white; }
	.sb-name { font-size: 9px; color: var(--muted); white-space: nowrap; }
	.sb-wrap.active .sb-name { color: var(--accent); font-weight: 600; }
	.sb-wrap.done .sb-name { color: var(--green); }
	.sb-line { flex: 1; height: 1.5px; background: var(--border2); margin: 0 4px; }
	.sb-line.done { background: var(--green); }

	/* Bottom status */
	.status-bar {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--bg2); border-top: 1px solid var(--border);
	padding: 5px 20px; display: flex; gap: 18px; align-items: center;
	font-family: var(--font-mono); font-size: 10px; color: var(--muted);
	z-index: 100;
	}
	.sb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
	.sb-sep { color: var(--border2); }
	/* Document upload styles */
	.doc-slot { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
	.doc-slot-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
	.doc-slot-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; min-width: 90px; }
	.doc-type-sel { flex: 1; background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 5px; font-size: 12px; }
	.doc-dropzone { border: 2px dashed var(--border); border-radius: 6px; padding: 22px; text-align: center; cursor: pointer; transition: all .2s; background: var(--bg2); }
	.doc-dropzone:hover, .doc-dropzone.drag-over { border-color: var(--accent); background: rgba(99,102,241,.06); }
	.doc-dropzone.uploaded { border-color: var(--green); background: rgba(34,197,94,.05); border-style: solid; }
	.doc-dropzone.rejected { border-color: var(--red); background: rgba(239,68,68,.05); border-style: solid; }
	.dz-icon { font-size: 28px; margin-bottom: 6px; }
	.dz-text { font-size: 13px; color: var(--text); font-weight: 500; }
	.dz-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
	.doc-status { margin-top: 8px; font-size: 12px; min-height: 18px; }
	.doc-status.ok { color: var(--green); }
	.doc-status.err { color: var(--red); }
	.doc-status.checking { color: var(--amber); }
	</style>
	</head>
	<body>

	<!-- ═══ APP HEADER ═══ -->
	<header class="app-header">
	<div class="logo">
	<div class="logo-mark">P</div>
	<div>
	<div class="logo-name">PolicyBridge</div>
	<div class="logo-sub">P&C Intelligence Platform</div>
	</div>
	</div>

	<nav class="main-tabs">
	<button class="tab-btn active" onclick="switchTab('submission')">
	<span class="tab-dot"></span> Submission Form
	</button>
	<button class="tab-btn" onclick="switchTab('integration')">
	<span class="tab-dot"></span> MySQL Integration
	</button>
	<button class="tab-btn" onclick="switchTab('connectors')">
	<span class="tab-dot"></span> Connectors Hub
	</button>
	<button class="tab-btn" onclick="switchTab('agents')">
	<span class="tab-dot"></span> Agent Pipeline
	</button>
	</nav>

	<div class="hdr-right">
	<span class="pill pill-accent">Phase 1</span>
	<span class="pill pill-amber" id="db-conn-pill">DB: Connecting…</span>
	</div>
	</header>

	<!-- ═══════════════════════════════════════════
	TAB 1 — SUBMISSION FORM
	═══════════════════════════════════════════ -->
	<div class="tab-page active" id="tab-submission">
	<div class="sub-layout">

	<!-- Left nav -->
	<aside class="sub-nav">
	<div class="snav-title">Form Steps</div>
	<div class="snav-item active" id="snav-1" onclick="goStep(1)"><div class="snav-num" id="sn-1">1</div> Submitter</div>
	<div class="snav-item" id="snav-2" onclick="goStep(2)"><div class="snav-num" id="sn-2">2</div> Insured</div>
	<div class="snav-item" id="snav-3" onclick="goStep(3)"><div class="snav-num" id="sn-3">3</div> Property</div>
	<div class="snav-item" id="snav-4" onclick="goStep(4)"><div class="snav-num" id="sn-4">4</div> Coverage</div>
	<div class="snav-item" id="snav-5" onclick="goStep(5)"><div class="snav-num" id="sn-5">5</div> Documents</div>
	<div class="snav-item" id="snav-6" onclick="goStep(6)"><div class="snav-num" id="sn-6">6</div> Review</div>
	<div class="snav-item" id="snav-7" onclick="goStep(7)"><div class="snav-num" id="sn-7">7</div> Submit</div>

	<div class="submitter-type-box">
	<div class="stype-title">Submitter Role</div>
	<div class="stype-opt">
	<label><input type="radio" name="sub_type" value="broker" checked onchange="APP.subType=this.value"> 🏢 Broker/Agent</label>
	<label><input type="radio" name="sub_type" value="mga" onchange="APP.subType=this.value"> 🏦 MGA</label>
	<label><input type="radio" name="sub_type" value="direct" onchange="APP.subType=this.value"> 👤 Direct</label>
	</div>
	</div>

	<div class="db-info-box">
	<div class="db-info-title">Target Database</div>
	<div class="db-row"><span class="dk">Host</span><span class="dv">localhost</span></div>
	<div class="db-row"><span class="dk">Schema</span><span class="dv">bronze</span></div>
	<div class="db-row"><span class="dk">User</span><span class="dv">root</span></div>
	<div class="db-row"><span class="dk">Layer</span><span class="dv">BRONZE</span></div>
	</div>
	</aside>

	<!-- Main form -->
	<main class="sub-form-main">

	<!-- Progress bar -->
	<div class="step-bar" id="step-bar">
	<div class="sb-step"><div class="sb-wrap active" id="sbw-1"><div class="sb-bubble active" id="sbb-1">1</div><div class="sb-name">Submitter</div></div></div>
	<div class="sb-line" id="sbl-1"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-2"><div class="sb-bubble" id="sbb-2">2</div><div class="sb-name">Insured</div></div></div>
	<div class="sb-line" id="sbl-2"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-3"><div class="sb-bubble" id="sbb-3">3</div><div class="sb-name">Property</div></div></div>
	<div class="sb-line" id="sbl-3"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-4"><div class="sb-bubble" id="sbb-4">4</div><div class="sb-name">Coverage</div></div></div>
	<div class="sb-line" id="sbl-4"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-5"><div class="sb-bubble" id="sbb-5">5</div><div class="sb-name">Documents</div></div></div>
	<div class="sb-line" id="sbl-5"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-6"><div class="sb-bubble" id="sbb-6">6</div><div class="sb-name">Review</div></div></div>
	<div class="sb-line" id="sbl-6"></div>
	<div class="sb-step"><div class="sb-wrap" id="sbw-7"><div class="sb-bubble" id="sbb-7">7</div><div class="sb-name">Submit</div></div></div>
	</div>

	<!-- STEP 1: SUBMITTER -->
	<div class="form-section active" id="sec-1">
	<div class="fsec-hdr">
	<div class="fsec-icon">🏢</div>
	<div><div class="fsec-title">Submitter Information</div><div class="fsec-desc">Broker, MGA, or direct customer details → bronze_brokers</div></div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Organization Details</div>
	<div class="fg fg2">
	<div class="fld cs2">
	<label class="flabel">Organization / Broker Name <span class="req">*</span></label>
	<input type="text" id="broker_name" placeholder="Acme Insurance Brokers LLC" oninput="V.field('broker_name')">
	<span class="ferr" id="e-broker_name">Organization name is required</span>
	</div>
	<div class="fld">
	<label class="flabel">Broker Code <span class="req">*</span> <span class="ftip">Format: ACM-TX-0041</span></label>
	<input type="text" id="broker_code" placeholder="ACM-TX-0041" oninput="V.brokerCode()" maxlength="15">
	<span class="ferr" id="e-broker_code">Format: AAA-ST-0000 (letters-state-4digits)</span>
	</div>
	<div class="fld">
	<label class="flabel">Contact Email <span class="req">*</span></label>
	<input type="email" id="broker_email" placeholder="submissions@broker.com" oninput="V.email('broker_email')">
	<span class="ferr" id="e-broker_email">Valid email required</span>
	</div>
	<div class="fld">
	<label class="flabel">Licensed State <span class="req">*</span></label>
	<select id="broker_state" onchange="V.req('broker_state')"><option value="">— State —</option></select>
	<span class="ferr" id="e-broker_state">Select state</span>
	</div>
	<div class="fld">
	<label class="flabel">Phone</label>
	<input type="tel" id="broker_phone" placeholder="(512) 555-0192" oninput="V.phone(this,'broker_phone')">
	<span class="ferr" id="e-broker_phone">Valid US phone required</span>
	</div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Submission Metadata</div>
	<div class="fg fg3">
	<div class="fld">
	<label class="flabel">Line of Business <span class="req">*</span></label>
	<select id="line_of_business" onchange="V.req('line_of_business')">
	<option value="">— Select —</option>
	<option value="Personal Lines">Personal Lines</option>
	<option value="Commercial Lines">Commercial Lines</option>
	<option value="Farm & Ranch">Farm & Ranch</option>
	</select>
	<span class="ferr" id="e-line_of_business">Required</span>
	</div>
	<div class="fld">
	<label class="flabel">Market Type</label>
	<select id="market_type">
	<option value="Admitted">Admitted</option>
	<option value="E&S">E&S (Excess & Surplus)</option>
	<option value="Surplus Lines">Surplus Lines</option>
	</select>
	</div>
	<div class="fld">
	<label class="flabel">Submission Date <span class="req">*</span></label>
	<input type="date" id="submitted_at" onchange="V.req('submitted_at')">
	<span class="ferr" id="e-submitted_at">Required</span>
	</div>
	</div>
	</div>
	<div class="btn-row">
	<span class="step-hint">Step 1 of 6</span>
	<button class="btn btn-accent ml" onclick="nextStep(1)">Next: Insured →</button>
	</div>
	</div>

	<!-- STEP 2: INSURED -->
	<div class="form-section" id="sec-2">
	<div class="fsec-hdr">
	<div class="fsec-icon">👤</div>
	<div><div class="fsec-title">Insured Information</div><div class="fsec-desc">Applicant PII → bronze_insureds (SSN stored as SHA-256 hash)</div></div>
	</div>
	<div class="alert alert-info">🔒 SSN is hashed client-side using SHA-256. The raw SSN never leaves the browser or gets stored in the database.</div>
	<div class="fcard">
	<div class="fcard-title">Personal Identity</div>
	<div class="fg fg2">
	<div class="fld"><label class="flabel">First Name <span class="req">*</span></label>
	<input type="text" id="insured_first" placeholder="Sarah" oninput="V.field('insured_first')">
	<span class="ferr" id="e-insured_first">Required</span></div>
	<div class="fld"><label class="flabel">Last Name <span class="req">*</span></label>
	<input type="text" id="insured_last" placeholder="Mitchell" oninput="V.field('insured_last')">
	<span class="ferr" id="e-insured_last">Required</span></div>
	<div class="fld"><label class="flabel">Date of Birth <span class="req">*</span></label>
	<input type="date" id="insured_dob" onchange="V.dob()">
	<span class="ferr" id="e-insured_dob">Must be 18+ years old</span></div>
	<div class="fld"><label class="flabel">SSN <span class="req">*</span> <span class="ftip">Hashed before storage</span></label>
	<input type="text" id="insured_ssn" placeholder="•••-••-####" maxlength="11" oninput="V.ssn(this)">
	<span class="ferr" id="e-insured_ssn">Enter full SSN (###-##-####)</span>
	<span class="fhint" id="ssn-hint"></span></div>
	<div class="fld"><label class="flabel">Email <span class="req">*</span></label>
	<input type="email" id="insured_email" placeholder="sarah@email.com" oninput="V.email('insured_email')">
	<span class="ferr" id="e-insured_email">Valid email required</span></div>
	<div class="fld"><label class="flabel">Phone <span class="req">*</span></label>
	<input type="tel" id="insured_phone" placeholder="(512) 555-0192" oninput="V.phone(this,'insured_phone')">
	<span class="ferr" id="e-insured_phone">Valid US phone required</span></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Mailing Address</div>
	<div class="fg fg2">
	<div class="fld cs2"><label class="flabel">Street <span class="req">*</span></label>
	<input type="text" id="ins_street" placeholder="4821 Oakwood Drive" oninput="V.field('ins_street')">
	<span class="ferr" id="e-ins_street">Required</span></div>
	<div class="fld"><label class="flabel">City <span class="req">*</span></label>
	<input type="text" id="ins_city" placeholder="Austin" oninput="V.field('ins_city')">
	<span class="ferr" id="e-ins_city">Required</span></div>
	<div class="fld"><label class="flabel">State <span class="req">*</span></label>
	<select id="ins_state" onchange="V.req('ins_state')"><option value="">— State —</option></select>
	<span class="ferr" id="e-ins_state">Required</span></div>
	<div class="fld"><label class="flabel">ZIP <span class="req">*</span></label>
	<input type="text" id="ins_zip" placeholder="78701" maxlength="10" oninput="V.zip(this,'ins_zip')">
	<span class="ferr" id="e-ins_zip">5 or 9-digit ZIP</span></div>
	<div class="fld"><label class="flabel">Country</label>
	<select id="ins_country"><option value="US">🇺🇸 United States</option></select></div>
	</div>
	</div>
	<div class="btn-row">
	<button class="btn btn-ghost" onclick="prevStep(2)">← Back</button>
	<span class="step-hint" style="margin:0 auto;">Step 2 of 6</span>
	<button class="btn btn-accent" onclick="nextStep(2)">Next: Property →</button>
	</div>
	</div>

	<!-- STEP 3: PROPERTY -->
	<div class="form-section" id="sec-3">
	<div class="fsec-hdr">
	<div class="fsec-icon">🏠</div>
	<div><div class="fsec-title">Property Information</div><div class="fsec-desc">Risk location details → bronze_properties</div></div>
	</div>
	<div class="alert alert-warn">📍 If property address differs from mailing address, enter it below.</div>
	<div class="fcard">
	<div class="fcard-title">Risk Location Address</div>
	<div style="margin-bottom:10px;">
	<label class="chk-item" id="same-addr-lbl" style="display:inline-flex;max-width:260px;" onclick="toggleSameAddr()">
	<input type="checkbox" id="same_addr"> Same as mailing address
	</label>
	</div>
	<div class="fg fg2" id="prop-addr-fields">
	<div class="fld cs2"><label class="flabel">Street <span class="req">*</span></label>
	<input type="text" id="prop_street" placeholder="4821 Oakwood Drive" oninput="V.field('prop_street')">
	<span class="ferr" id="e-prop_street">Required</span></div>
	<div class="fld"><label class="flabel">City <span class="req">*</span></label>
	<input type="text" id="prop_city" placeholder="Austin" oninput="V.field('prop_city')">
	<span class="ferr" id="e-prop_city">Required</span></div>
	<div class="fld"><label class="flabel">State <span class="req">*</span></label>
	<select id="prop_state" onchange="V.req('prop_state')"><option value="">— State —</option></select>
	<span class="ferr" id="e-prop_state">Required</span></div>
	<div class="fld"><label class="flabel">ZIP <span class="req">*</span></label>
	<input type="text" id="prop_zip" placeholder="78701" maxlength="10" oninput="V.zip(this,'prop_zip')">
	<span class="ferr" id="e-prop_zip">5 or 9-digit ZIP</span></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Physical Characteristics</div>
	<div class="fg fg3">
	<div class="fld"><label class="flabel">Property Type <span class="req">*</span></label>
	<select id="property_type" onchange="V.req('property_type')">
	<option value="">— Select —</option>
	<option>Single Family Residential</option><option>Condo / Townhouse</option>
	<option>Multi-Family (2-4 units)</option><option>Mobile Home</option>
	<option>Manufactured Home</option><option>Vacation / Seasonal</option>
	<option>Commercial Building</option><option>Mixed Use</option>
	</select><span class="ferr" id="e-property_type">Required</span></div>
	<div class="fld"><label class="flabel">Occupancy <span class="req">*</span></label>
	<select id="occupancy" onchange="V.req('occupancy')">
	<option value="">— Select —</option>
	<option>Owner Occupied</option><option>Tenant Occupied</option>
	<option>Seasonal / Vacant</option><option>Rented to Others</option><option>Under Construction</option>
	</select><span class="ferr" id="e-occupancy">Required</span></div>
	<div class="fld"><label class="flabel">Year Built <span class="req">*</span></label>
	<input type="number" id="year_built" placeholder="2004" min="1800" oninput="V.yearBuilt()">
	<span class="ferr" id="e-year_built">1800–present</span></div>
	<div class="fld"><label class="flabel">Square Footage <span class="req">*</span></label>
	<input type="number" id="sq_footage" placeholder="2340" min="100" max="50000" oninput="V.field('sq_footage')">
	<span class="ferr" id="e-sq_footage">100–50,000 sq ft</span></div>
	<div class="fld"><label class="flabel">Stories</label>
	<select id="num_stories">
	<option value="">—</option><option value="1">1</option><option value="2">2</option>
	<option value="3">3</option><option value="4+">4+</option><option value="Split Level">Split Level</option>
	</select></div>
	<div class="fld"><label class="flabel">Units</label>
	<input type="number" id="num_units" value="1" min="1" max="100"></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Construction Details</div>
	<div class="fg fg3">
	<div class="fld"><label class="flabel">Construction Type <span class="req">*</span></label>
	<select id="construction_type" onchange="V.req('construction_type')">
	<option value="">— Select —</option>
	<option>Frame</option><option>Masonry</option><option>Masonry Veneer</option>
	<option>Fire Resistive</option><option>Non-Combustible</option><option>Log</option><option>Stucco</option>
	</select><span class="ferr" id="e-construction_type">Required</span></div>
	<div class="fld"><label class="flabel">Roof Type <span class="req">*</span></label>
	<select id="roof_type" onchange="V.req('roof_type')">
	<option value="">— Select —</option>
	<option>Composition Shingle</option><option>Metal</option><option>Tile</option>
	<option>Flat / Built-Up</option><option>Wood Shake</option><option>Slate</option>
	</select><span class="ferr" id="e-roof_type">Required</span></div>
	<div class="fld"><label class="flabel">Roof Year <span class="req">*</span></label>
	<input type="number" id="roof_year" placeholder="2019" min="1950" oninput="V.roofYear()">
	<span class="ferr" id="e-roof_year">Must be ≥ year built</span></div>
	<div class="fld"><label class="flabel">Foundation</label>
	<select id="foundation"><option value="">—</option><option>Slab</option><option>Crawl Space</option><option>Basement</option><option>Pier and Beam</option></select></div>
	<div class="fld"><label class="flabel">Heating</label>
	<select id="heating"><option value="">—</option><option>Central Gas</option><option>Central Electric</option><option>Heat Pump</option><option>Oil</option></select></div>
	<div class="fld"><label class="flabel">Electrical</label>
	<select id="electrical"><option value="">—</option><option>Circuit Breaker</option><option>Fuse Box</option><option>Updated (2000+)</option><option>Knob and Tube</option><option>Aluminum Wiring</option></select></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Liability Indicators</div>
	<div class="chk-grid">
	<label class="chk-item" onclick="toggleChk(this,'chk_pool')"><input type="checkbox" id="chk_pool"> 🏊 Swimming Pool</label>
	<label class="chk-item" onclick="toggleChk(this,'chk_tramp')"><input type="checkbox" id="chk_tramp"> 🤸 Trampoline</label>
	<label class="chk-item" onclick="toggleChk(this,'chk_dog')"><input type="checkbox" id="chk_dog"> 🐕 Aggressive Dog Breed</label>
	<label class="chk-item" onclick="toggleChk(this,'chk_biz')"><input type="checkbox" id="chk_biz"> 💼 Home Business</label>
	<label class="chk-item" onclick="toggleChk(this,'chk_rental')"><input type="checkbox" id="chk_rental"> 🏘 Rental Units</label>
	<label class="chk-item" onclick="toggleChk(this,'chk_solar')"><input type="checkbox" id="chk_solar"> ☀️ Solar Panels</label>
	</div>
	</div>
	<div class="btn-row">
	<button class="btn btn-ghost" onclick="prevStep(3)">← Back</button>
	<span class="step-hint" style="margin:0 auto;">Step 3 of 6</span>
	<button class="btn btn-accent" onclick="nextStep(3)">Next: Coverage →</button>
	</div>
	</div>

	<!-- STEP 4: COVERAGE -->
	<div class="form-section" id="sec-4">
	<div class="fsec-hdr">
	<div class="fsec-icon">🛡️</div>
	<div><div class="fsec-title">Coverage Request</div><div class="fsec-desc">Coverage type and limits → bronze_submissions</div></div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Coverage Type</div>
	<div class="cov-grid">
	<div class="cov-card sel" data-code="HO-3" onclick="selCov(this)"><input type="radio" name="cov" value="HO-3" checked><div class="cov-code">HO-3</div><div class="cov-name">Special Form</div><div class="cov-desc">Most common homeowners</div></div>
	<div class="cov-card" data-code="HO-4" onclick="selCov(this)"><input type="radio" name="cov" value="HO-4"><div class="cov-code">HO-4</div><div class="cov-name">Renters</div><div class="cov-desc">Contents & liability only</div></div>
	<div class="cov-card" data-code="HO-5" onclick="selCov(this)"><input type="radio" name="cov" value="HO-5"><div class="cov-code">HO-5</div><div class="cov-name">Comprehensive</div><div class="cov-desc">Open perils on all</div></div>
	<div class="cov-card" data-code="HO-6" onclick="selCov(this)"><input type="radio" name="cov" value="HO-6"><div class="cov-code">HO-6</div><div class="cov-name">Condo Owner</div><div class="cov-desc">Walls-in condo coverage</div></div>
	<div class="cov-card" data-code="DP-1" onclick="selCov(this)"><input type="radio" name="cov" value="DP-1"><div class="cov-code">DP-1</div><div class="cov-name">Dwelling Basic</div><div class="cov-desc">Named perils only</div></div>
	<div class="cov-card" data-code="DP-3" onclick="selCov(this)"><input type="radio" name="cov" value="DP-3"><div class="cov-code">DP-3</div><div class="cov-name">Dwelling Special</div><div class="cov-desc">Landlord open perils</div></div>
	<div class="cov-card" data-code="BOP" onclick="selCov(this)"><input type="radio" name="cov" value="BOP"><div class="cov-code">BOP</div><div class="cov-name">Business Owners</div><div class="cov-desc">Property + liability</div></div>
	<div class="cov-card" data-code="CPP" onclick="selCov(this)"><input type="radio" name="cov" value="CPP"><div class="cov-code">CPP</div><div class="cov-name">Comm. Package</div><div class="cov-desc">Multi-line commercial</div></div>
	<div class="cov-card" data-code="FARM" onclick="selCov(this)"><input type="radio" name="cov" value="FARM"><div class="cov-code">FARM</div><div class="cov-name">Farm & Ranch</div><div class="cov-desc">Dwelling + equipment</div></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Limits & Deductibles</div>
	<div class="fg fg2">
	<div class="fld"><label class="flabel">Coverage Limit ($) <span class="req">*</span></label>
	<input type="number" id="cov_limit" placeholder="450000" min="50000" max="10000000" oninput="V.covLimit()">
	<span class="ferr" id="e-cov_limit">$50,000–$10,000,000</span>
	<span class="fhint">~$165/sq ft avg construction cost</span></div>
	<div class="fld"><label class="flabel">Deductible <span class="req">*</span></label>
	<select id="deductible" onchange="V.req('deductible')">
	<option value="">— Select —</option>
	<option value="500">$500</option><option value="1000">$1,000</option>
	<option value="1500">$1,500</option><option value="2500">$2,500</option>
	<option value="5000">$5,000</option><option value="10000">$10,000</option>
	<option value="25000">$25,000</option><option value="50000">$50,000</option>
	</select><span class="ferr" id="e-deductible">Select deductible</span></div>
	<div class="fld"><label class="flabel">Liability Limit</label>
	<select id="liab_limit"><option value="100000">$100,000</option><option value="300000" selected>$300,000</option><option value="500000">$500,000</option><option value="1000000">$1,000,000</option></select></div>
	<div class="fld"><label class="flabel">Medical Payments</label>
	<select id="med_pay"><option value="1000">$1,000</option><option value="2000">$2,000</option><option value="5000" selected>$5,000</option><option value="10000">$10,000</option></select></div>
	<div class="fld"><label class="flabel">Effective Date <span class="req">*</span></label>
	<input type="date" id="effective_date" onchange="V.effDate()">
	<span class="ferr" id="e-effective_date">Today–60 days out</span></div>
	<div class="fld"><label class="flabel">Payment Schedule</label>
	<select id="pay_schedule"><option>Annual</option><option>Semi-Annual</option><option>Quarterly</option><option value="Monthly EFT">Monthly (EFT)</option></select></div>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Endorsements Requested</div>
	<div class="chk-grid">
	<label class="chk-item" onclick="toggleChk(this,'end_identity')"><input type="checkbox" id="end_identity"> 🔐 Identity Theft</label>
	<label class="chk-item" onclick="toggleChk(this,'end_equip')"><input type="checkbox" id="end_equip"> 🖥️ Equipment Breakdown</label>
	<label class="chk-item" onclick="toggleChk(this,'end_water')"><input type="checkbox" id="end_water"> 💧 Water Backup</label>
	<label class="chk-item" onclick="toggleChk(this,'end_quake')"><input type="checkbox" id="end_quake"> 🌋 Earthquake</label>
	<label class="chk-item" onclick="toggleChk(this,'end_flood')"><input type="checkbox" id="end_flood"> 🌊 Flood (NFIP)</label>
	<label class="chk-item" onclick="toggleChk(this,'end_umbrella')"><input type="checkbox" id="end_umbrella"> ☂️ Umbrella</label>
	</div>
	</div>
	<div class="fcard">
	<div class="fcard-title">Notes</div>
	<div class="fld">
	<label class="flabel">Submission Notes</label>
	<textarea id="notes" placeholder="Special circumstances, prior losses, renovation details..." maxlength="1000"></textarea>
	<span class="fhint"><span id="nc">0</span>/1000</span>
	</div>
	</div>
	<div class="btn-row">
	<button class="btn btn-ghost" onclick="prevStep(4)">← Back</button>
	<span class="step-hint" style="margin:0 auto;">Step 4 of 6</span>
	<button class="btn btn-accent" onclick="nextStep(4)">Documents →</button>
	</div>
	</div>

	<!-- STEP 5: DOCUMENTS -->
	<div class="form-section" id="sec-5">
	<div class="fsec-hdr">
	<div class="fsec-icon">📎</div>
	<div><div class="fsec-title">Supporting Documents</div><div class="fsec-desc">Upload property inspection report, deed, or photos — validated before submission → bronze_submission_attachments</div></div>
	</div>

	<div class="fcard">
	<div class="fcard-title">Document Upload <span style="font-size:11px;font-weight:400;color:var(--muted);">— At least one property document required</span></div>
	<div style="display:grid;gap:14px;">

	<!-- Upload slot 1 -->
	<div class="doc-slot" id="slot-0">
	<div class="doc-slot-hdr">
	<span class="doc-slot-label">Document 1 <span style="color:var(--red);">*</span></span>
	<select class="doc-type-sel" id="doc-type-0" onchange="docTypeChanged(0)">
	<option value="">— Select document type —</option>
	<option value="PROPERTY_INSPECTION">Property Inspection Report</option>
	<option value="PROPERTY_DEED">Property Deed / Title</option>
	<option value="PROPERTY_PHOTO">Property Photograph</option>
	<option value="APPRAISAL">Property Appraisal</option>
	<option value="PRIOR_POLICY">Prior Insurance Policy</option>
	<option value="OTHER">Other Supporting Document</option>
	</select>
	</div>
	<div class="doc-dropzone" id="dz-0" onclick="triggerUpload(0)" ondragover="dzDragOver(event,0)" ondragleave="dzDragLeave(0)" ondrop="dzDrop(event,0)">
	<div class="dz-icon">📄</div>
	<div class="dz-text">Click to upload or drag & drop</div>
	<div class="dz-hint">PDF or JPG/PNG · Max 10MB</div>
	<input type="file" id="file-input-0" accept=".pdf,.jpg,.jpeg,.png" style="display:none" onchange="handleFileSelect(0,this)">
	</div>
	<div class="doc-status" id="doc-status-0"></div>
	</div>

	<!-- Upload slot 2 -->
	<div class="doc-slot" id="slot-1">
	<div class="doc-slot-hdr">
	<span class="doc-slot-label">Document 2 <span style="color:var(--muted);font-size:11px;">(optional)</span></span>
	<select class="doc-type-sel" id="doc-type-1" onchange="docTypeChanged(1)">
	<option value="">— Select document type —</option>
	<option value="PROPERTY_INSPECTION">Property Inspection Report</option>
	<option value="PROPERTY_DEED">Property Deed / Title</option>
	<option value="PROPERTY_PHOTO">Property Photograph</option>
	<option value="APPRAISAL">Property Appraisal</option>
	<option value="PRIOR_POLICY">Prior Insurance Policy</option>
	<option value="OTHER">Other Supporting Document</option>
	</select>
	</div>
	<div class="doc-dropzone" id="dz-1" onclick="triggerUpload(1)" ondragover="dzDragOver(event,1)" ondragleave="dzDragLeave(1)" ondrop="dzDrop(event,1)">
	<div class="dz-icon">📄</div>
	<div class="dz-text">Click to upload or drag & drop</div>
	<div class="dz-hint">PDF or JPG/PNG · Max 10MB</div>
	<input type="file" id="file-input-1" accept=".pdf,.jpg,.jpeg,.png" style="display:none" onchange="handleFileSelect(1,this)">
	</div>
	<div class="doc-status" id="doc-status-1"></div>
	</div>
	</div>

	<!-- Validation rules info -->
	<div style="margin-top:18px;padding:12px 14px;background:var(--bg3);border-radius:6px;border:1px solid var(--border);font-size:12px;color:var(--muted);">
	<strong style="color:var(--text);">✓ Validation Rules Applied:</strong>
	PDF files are checked for property-related keywords (address, inspection, property, coverage, insured, roof, construction).
	JPG/PNG files are verified as valid images. Generic invoices or unrelated documents are rejected.
	</div>
	</div>

	<div class="btn-row">
	<button class="btn btn-ghost" onclick="prevStep(5)">← Back</button>
	<span class="step-hint" style="margin:0 auto;">Step 5 of 6</span>
	<button class="btn btn-accent" onclick="nextStep(5)">Review →</button>
	</div>
	</div>

	<!-- STEP 6: REVIEW -->
	<div class="form-section" id="sec-6">
	<div class="fsec-hdr">
	<div class="fsec-icon">📋</div>
	<div><div class="fsec-title">Review & Confirm</div><div class="fsec-desc">Verify all fields before Bronze layer commit</div></div>
	</div>
	<div id="review-content"></div>
	<div class="fcard" style="background:var(--bg);">
	<div class="fcard-title" style="color:var(--amber);">Generated JSON Payload</div>
	<div class="json-box" id="json-preview">—</div>
	<button class="btn btn-ghost" style="margin-top:10px;font-size:11px;" onclick="copyJSON()">📋 Copy JSON</button>
	</div>
	<div class="btn-row">
	<button class="btn btn-ghost" onclick="prevStep(6)">← Back</button>
	<button class="btn btn-green ml" onclick="doSubmit()">✅ Submit to MySQL + Save JSON</button>
	</div>
	</div>

	<!-- STEP 7: SUCCESS -->
	<div class="form-section" id="sec-7">
	<div class="success-wrap">
	<div class="suc-icon">✓</div>
	<div class="suc-title">Submission Accepted!</div>
	<div class="suc-sub">Policy request committed to Bronze layer · JSON saved to disk</div>
	<div class="suc-detail" id="suc-detail"></div>
	<div class="path-box">
	<div class="path-label">JSON File Path</div>
	<div class="path-val" id="json-path">D:\Personal\Usecase\Jsons\SUB-XXXX.json</div>
	</div>
	<div>
	<button class="btn btn-accent" onclick="location.reload()">+ New Submission</button>
	<button class="btn btn-ghost" style="margin-left:8px;" onclick="downloadJSON()">⬇ Download JSON</button>
	<button class="btn btn-ghost" style="margin-left:8px;" onclick="switchTab('integration');showIntSection('inserts')">View SQL Inserts →</button>
	</div>
	</div>
	</div>

	</main>

	<!-- Right panel -->
	<aside class="sub-panel">
	<div class="panel-sub-id"><div class="ps-label">Submission ID</div><div class="ps-val" id="live-subid">SUB-2025-—</div></div>
	<div class="pcard">
	<div class="pcard-title">Submitter</div>
	<div class="prow"><span class="pk">Name</span><span class="pv" id="lv-bname">—</span></div>
	<div class="prow"><span class="pk">Code</span><span class="pv mono" id="lv-bcode">—</span></div>
	<div class="prow"><span class="pk">State</span><span class="pv" id="lv-bstate">—</span></div>
	</div>
	<div class="pcard">
	<div class="pcard-title">Insured</div>
	<div class="prow"><span class="pk">Name</span><span class="pv" id="lv-iname">—</span></div>
	<div class="prow"><span class="pk">DOB</span><span class="pv" id="lv-idob">—</span></div>
	<div class="prow"><span class="pk">State</span><span class="pv" id="lv-istate">—</span></div>
	</div>
	<div class="pcard">
	<div class="pcard-title">Property</div>
	<div class="prow"><span class="pk">City/State</span><span class="pv" id="lv-paddr">—</span></div>
	<div class="prow"><span class="pk">Type</span><span class="pv" id="lv-ptype">—</span></div>
	<div class="prow"><span class="pk">Built</span><span class="pv" id="lv-pbuilt">—</span></div>
	<div class="prow"><span class="pk">Sq Ft</span><span class="pv" id="lv-psqft">—</span></div>
	</div>
	<div class="pcard">
	<div class="pcard-title">Coverage</div>
	<div class="prow"><span class="pk">Type</span><span class="pv mono" id="lv-ctype">HO-3</span></div>
	<div class="prow"><span class="pk">Limit</span><span class="pv" id="lv-climit">—</span></div>
	<div class="prow"><span class="pk">Ded.</span><span class="pv" id="lv-cded">—</span></div>
	<div class="prow"><span class="pk">Eff.</span><span class="pv" id="lv-ceff">—</span></div>
	</div>
	<div class="pcard">
	<div class="pcard-title">Step Validation</div>
	<div class="val-list">
	<div class="val-row idle" id="vl-1">○ Submitter</div>
	<div class="val-row idle" id="vl-2">○ Insured</div>
	<div class="val-row idle" id="vl-3">○ Property</div>
	<div class="val-row idle" id="vl-4">○ Coverage</div>
	<div class="val-row idle" id="vl-5">○ Documents</div>
	</div>
	</div>
	<div class="pcard">
	<div class="pcard-title">Bronze Tables</div>
	<div style="font-size:10px;color:var(--muted2);line-height:1.8;">
	↳ bronze_brokers<br>
	↳ bronze_insureds<br>
	↳ bronze_properties<br>
	↳ bronze_submissions<br>
	↳ bronze_submission_attachments<br>
	↳ bronze_pipeline_agent_log
	</div>
	</div>
	</aside>
	</div>
	</div>

	<!-- ═══════════════════════════════════════════
	TAB 2 — MYSQL INTEGRATION
	═══════════════════════════════════════════ -->
	<div class="tab-page" id="tab-integration">
	<div class="int-layout">
	<aside class="int-sidebar">
	<div class="snav-title">Integration Sections</div>
	<div class="snav-item active" id="inav-conn" onclick="showIntSection('conn')"><div class="snav-num">⚙</div> DB Connection</div>
	<div class="snav-item" id="inav-schema" onclick="showIntSection('schema')"><div class="snav-num">📊</div> Schema Map</div>
	<div class="snav-item" id="inav-inserts" onclick="showIntSection('inserts')"><div class="snav-num">📝</div> SQL Inserts</div>
	<div class="snav-item" id="inav-log" onclick="showIntSection('log')"><div class="snav-num">📋</div> Activity Log</div>
	<div class="snav-item" id="inav-python" onclick="showIntSection('python')"><div class="snav-num">🐍</div> Python Connector</div>

	<div style="margin-top:20px;padding:12px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border);">
	<div class="snav-title">DB Config</div>
	<div class="db-row" style="margin-bottom:5px;"><span class="dk">Host</span><span class="dv" style="font-size:11px;">localhost:3306</span></div>
	<div class="db-row" style="margin-bottom:5px;"><span class="dk">User</span><span class="dv" style="font-size:11px;">root</span></div>
	<div class="db-row" style="margin-bottom:5px;"><span class="dk">Pass</span><span class="dv" style="font-size:11px;">root@123</span></div>
	<div class="db-row" style="margin-bottom:5px;"><span class="dk">DB</span><span class="dv" style="font-size:11px;">bronze</span></div>
	<div class="conn-status" style="margin-top:8px;padding:7px 10px;">
	<div class="status-dot amber" id="conn-dot"></div>
	<span id="conn-txt" style="font-size:11px;">Not tested</span>
	</div>
	<button class="btn btn-accent" style="width:100%;margin-top:8px;font-size:11px;justify-content:center;" onclick="testConnection()">Test Connection</button>
	</div>
	</aside>

	<main class="int-main">

	<!-- DB Connection -->
	<div class="int-section active" id="int-conn">
	<div class="page-header">
	<div class="ph-title">MySQL Bronze Layer Connection</div>
	<div class="ph-sub">Configure and verify · Local: localhost/bronze · HF: Clever Cloud (single schema, prefixed tables)</div>
	</div>

	<div class="alert alert-info" style="margin-bottom:20px;">
	💡 This is a browser-based app. Direct MySQL TCP connections require a backend proxy. The SQL Inserts tab generates ready-to-run statements for MySQL Workbench or CLI. The Python Connector tab provides a production-ready script for direct DB writes.
	</div>

	<div class="two-col" style="margin-bottom:16px;">
	<div class="config-card">
	<div class="cc-title">Connection Details</div>
	<div class="cc-desc">Pre-configured · localhost (local) or Clever Cloud (HuggingFace)</div>
	<div class="fg fg2" style="gap:10px;">
	<div class="fld"><label class="flabel">Host</label><input type="text" value="localhost" id="db_host"></div>
	<div class="fld"><label class="flabel">Port</label><input type="number" value="3306" id="db_port"></div>
	<div class="fld"><label class="flabel">Username</label><input type="text" value="root" id="db_user"></div>
	<div class="fld"><label class="flabel">Password</label><input type="text" value="root@123" id="db_pass"></div>
	<div class="fld"><label class="flabel">Database</label><input type="text" value="bronze" id="db_name"></div>
	<div class="fld"><label class="flabel">Charset</label><input type="text" value="utf8mb4"></div>
	</div>
	<button class="btn btn-accent" style="margin-top:14px;" onclick="testConnection()">⚡ Test Connection</button>
	</div>
	<div class="config-card">
	<div class="cc-title">Connection Status</div>
	<div class="cc-desc">Live diagnostics and health check</div>
	<div class="log-console" id="conn-log" style="min-height:140px;">
	<div class="log-line"><span class="log-ts">00:00:00</span><span class="log-info">PolicyBridge MySQL Integration v1.0</span></div>
	<div class="log-line"><span class="log-ts">00:00:00</span><span class="log-info">Target: localhost:3306 / bronze</span></div>
	<div class="log-line"><span class="log-ts">00:00:00</span><span class="log-warn">Click "Test Connection" to verify connectivity</span></div>
	</div>
	</div>
	</div>

	<div class="config-card">
	<div class="cc-title">Bronze Layer Tables — Write Targets</div>
	<div class="cc-desc">All tables that receive data on each submission</div>
	<table class="tmap">
	<thead><tr><th>Schema</th><th>Table</th><th>Write Trigger</th><th>Key Fields</th><th>Status</th></tr></thead>
	<tbody id="tmap-body">
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_brokers</td><td>Every new broker</td><td>broker_code, broker_name, contact_email</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_insureds</td><td>Every submission</td><td>full_name, dob, ssn_hash, email, phone</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_properties</td><td>Every submission</td><td>insured_id, street, city, state_code, zip</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_submissions</td><td>Every submission</td><td>submission_id, broker_id, insured_id, property_id</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_submission_attachments</td><td>Static S3 URIs (Phase 1)</td><td>submission_id, attachment_type, s3_uri</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	<tr><td><span class="schema-badge">bronze</span></td><td>bronze_pipeline_agent_log</td><td>On submission</td><td>submission_id, agent_code, status=QUEUED</td><td class="status-cell"><span class="s-pend">● Pending</span></td></tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Schema Map -->
	<div class="int-section" id="int-schema">
	<div class="page-header">
	<div class="ph-title">Bronze Schema → Form Field Mapping</div>
	<div class="ph-sub">Complete field-to-column mapping for all Bronze tables</div>
	</div>
	<div id="schema-map-content"></div>
	</div>

	<!-- SQL Inserts -->
	<div class="int-section" id="int-inserts">
	<div class="page-header">
	<div class="ph-title">Generated SQL Insert Statements</div>
	<div class="ph-sub">Ready to execute in MySQL Workbench or CLI — generated from last submission</div>
	</div>
	<div class="alert alert-warn">⚠ These statements reflect the most recently submitted form data. Submit a form on the Submission tab first.</div>
	<div class="config-card">
	<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
	<div class="cc-title" style="margin-bottom:0;">MySQL INSERT Statements</div>
	<div style="display:flex;gap:8px;">
	<button class="btn btn-ghost" style="font-size:11px;" onclick="copySQLInserts()">📋 Copy All</button>
	<button class="btn btn-accent" style="font-size:11px;" onclick="downloadSQL()">⬇ Download .sql</button>
	</div>
	</div>
	<div class="sql-area" id="sql-inserts-area">-- Submit a form to generate INSERT statements</div>
	</div>
	</div>

	<!-- Activity Log -->
	<div class="int-section" id="int-log">
	<div class="page-header">
	<div class="ph-title">Activity Log</div>
	<div class="ph-sub">All submission and DB write events</div>
	</div>
	<div class="config-card">
	<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
	<div class="cc-title" style="margin-bottom:0;">Event Log</div>
	<button class="btn btn-ghost" style="font-size:11px;" onclick="document.getElementById('activity-log').innerHTML=''">Clear</button>
	</div>
	<div class="log-console" id="activity-log" style="max-height:500px;">
	<div class="log-line"><span class="log-ts">--:--:--</span><span class="log-info">PolicyBridge v1.0 started · Phase 1</span></div>
	</div>
	</div>
	</div>

	<!-- Python Connector -->
	<div class="int-section" id="int-python">
	<div class="page-header">
	<div class="ph-title">Python MySQL Connector</div>
	<div class="ph-sub">Production-ready Python script for direct Bronze layer writes — Phase 1 → Phase 2 bridge</div>
	</div>
	<div class="alert alert-green">✅ This script loads submission JSON into all 6 bronze tables in the correct FK order. Place in your project and run: <code style="font-family:var(--font-mono);background:rgba(0,0,0,0.2);padding:1px 6px;border-radius:3px;">python bronze_loader.py SUB-2025-XXXXX.json</code></div>
	<div class="config-card">
	<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
	<div class="cc-title" style="margin-bottom:0;">bronze_loader.py</div>
	<div style="display:flex;gap:8px;">
	<button class="btn btn-ghost" style="font-size:11px;" onclick="copyPython()">📋 Copy</button>
	<button class="btn btn-accent" style="font-size:11px;" onclick="downloadPython()">⬇ Download .py</button>
	</div>
	</div>
	<div class="python-snippet" id="python-code"></div>
	</div>
	</div>

	</main>
	</div>
	</div>

	<!-- ═══════════════════════════════════════════
	TAB 3 — CONNECTORS HUB
	═══════════════════════════════════════════ -->
	<div class="tab-page" id="tab-connectors">
	<div class="conn-page">
	<div class="conn-page-title">Connectors Hub</div>
	<div class="conn-page-sub">Integrate PolicyBridge with any data source — databases, APIs, file systems, streaming platforms, and cloud services</div>

	<div class="three-col" style="margin-bottom:24px;">
	<div class="stat-box"><div class="stat-val" style="color:var(--accent);">24</div><div class="stat-label">Available Connectors</div></div>
	<div class="stat-box"><div class="stat-val" style="color:var(--green);">1</div><div class="stat-label">Connected</div></div>
	<div class="stat-box"><div class="stat-val" style="color:var(--amber);">23</div><div class="stat-label">Available to Connect</div></div>
	</div>

	<div class="conn-cats">
	<button class="cat-btn active" onclick="filterCat('all',this)">All (24)</button>
	<button class="cat-btn" onclick="filterCat('database',this)">Databases</button>
	<button class="cat-btn" onclick="filterCat('api',this)">REST / APIs</button>
	<button class="cat-btn" onclick="filterCat('file',this)">File / Storage</button>
	<button class="cat-btn" onclick="filterCat('cloud',this)">Cloud / AWS</button>
	<button class="cat-btn" onclick="filterCat('stream',this)">Streaming</button>
	<button class="cat-btn" onclick="filterCat('insurance',this)">Insurance</button>
	</div>

	<div class="conn-grid" id="conn-grid"></div>
	</div>
	</div>

	<!-- ═══════════════════════════════════════════
	TAB 4 — AGENT PIPELINE
	═══════════════════════════════════════════ -->
	<div class="tab-page" id="tab-agents">
	<div class="agents-page">
	<div class="agents-title">AI Agent Pipeline</div>
	<div class="agents-sub">Phase 1: Bronze layer population · Phase 2: Agent orchestration via AWS Step Functions</div>

	<div class="pipeline-flow" id="pipeline-flow"></div>

	<div style="margin-bottom:24px;">
	<div style="display:flex;gap:14px;margin-bottom:14px;">
	<div class="stat-box" style="flex:1;"><div class="stat-val" style="color:var(--amber);font-size:20px;">Phase 1</div><div class="stat-label">Bronze Population (Active)</div></div>
	<div class="stat-box" style="flex:1;opacity:0.5;"><div class="stat-val" style="color:var(--muted);font-size:20px;">Phase 2</div><div class="stat-label">Agent Orchestration (Upcoming)</div></div>
	<div class="stat-box" style="flex:1;opacity:0.4;"><div class="stat-val" style="color:var(--muted);font-size:20px;">Phase 3</div><div class="stat-label">Gold Layer Analytics (Future)</div></div>
	</div>
	</div>

	<div class="agent-detail-grid" id="agent-detail-grid"></div>

	<div style="margin-top:24px;">
	<div class="page-header"><div class="ph-title">Python Agent Base Template</div><div class="ph-sub">Starter scaffold for building each agent in Phase 2</div></div>
	<div class="config-card">
	<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
	<div class="cc-title" style="margin-bottom:0;">base_agent.py — Agent Framework Scaffold</div>
	<button class="btn btn-ghost" style="font-size:11px;" onclick="copyAgentPython()">📋 Copy</button>
	</div>
	<div class="python-snippet" id="agent-python-code"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- STATUS BAR -->
	<div class="status-bar">
	<div class="sb-dot"></div>
	<span>PolicyBridge v1.0</span>
	<span class="sb-sep">\|</span>
	<span id="sb-msg">Ready</span>
	<span class="sb-sep">\|</span>
	<span id="db-env-label">localhost:3306 · bronze</span>
	<span style="margin-left:auto;font-family:var(--font-mono);" id="sb-clock"></span>
	</div>

	<script>
	// ═══════════════════════════════════════════════════════
	// APP STATE
	// ═══════════════════════════════════════════════════════
	// ── Dynamic API base: HuggingFace Space or local Flask ──────
	const IS_HF = window.location.hostname.includes('hf.space') \|\|
	window.location.hostname.includes('huggingface');
	const API_BASE = IS_HF
	? '' // same-origin on HF (Docker serves on port 7860)
	: 'http://localhost:5000';

	const APP = {
	step: 1,
	subType: 'broker',
	coverage: 'HO-3',
	subId: '',
	json: null,
	sqlInserts: '',
	};

	const US_STATES = [['AL','Alabama'],['AK','Alaska'],['AZ','Arizona'],['AR','Arkansas'],['CA','California'],['CO','Colorado'],['CT','Connecticut'],['DE','Delaware'],['FL','Florida'],['GA','Georgia'],['HI','Hawaii'],['ID','Idaho'],['IL','Illinois'],['IN','Indiana'],['IA','Iowa'],['KS','Kansas'],['KY','Kentucky'],['LA','Louisiana'],['ME','Maine'],['MD','Maryland'],['MA','Massachusetts'],['MI','Michigan'],['MN','Minnesota'],['MS','Mississippi'],['MO','Missouri'],['MT','Montana'],['NE','Nebraska'],['NV','Nevada'],['NH','New Hampshire'],['NJ','New Jersey'],['NM','New Mexico'],['NY','New York'],['NC','North Carolina'],['ND','North Dakota'],['OH','Ohio'],['OK','Oklahoma'],['OR','Oregon'],['PA','Pennsylvania'],['RI','Rhode Island'],['SC','South Carolina'],['SD','South Dakota'],['TN','Tennessee'],['TX','Texas'],['UT','Utah'],['VT','Vermont'],['VA','Virginia'],['WA','Washington'],['WV','West Virginia'],['WI','Wisconsin'],['WY','Wyoming'],['DC','District of Columbia']];

	// ═══════════════════════════════════════════════════════
	// INIT
	// ═══════════════════════════════════════════════════════
	window.onload = () => {
	// Populate state selects
	['broker_state','ins_state','prop_state'].forEach(id => {
	const s = document.getElementById(id);
	if (!s) return;
	US_STATES.forEach(([c,n]) => { const o = document.createElement('option'); o.value=c; o.textContent=`${c} — ${n}`; s.appendChild(o); });
	});

	const today = new Date().toISOString().split('T')[0];
	document.getElementById('submitted_at').value = today;
	const tmr = new Date(); tmr.setDate(tmr.getDate()+1);
	document.getElementById('effective_date').value = tmr.toISOString().split('T')[0];

	APP.subId = genSubId();
	document.getElementById('live-subid').textContent = APP.subId;

	document.getElementById('notes').addEventListener('input', function() {
	document.getElementById('nc').textContent = this.value.length;
	});

	setInterval(() => {
	document.getElementById('sb-clock').textContent = new Date().toLocaleTimeString();
	syncPanel();
	}, 800);

	buildSchemaMap();
	buildConnectors();
	buildAgentPipeline();
	buildPythonCode();
	buildAgentPython();

	setTimeout(() => {
	const isHF = window.location.hostname.includes('hf.space') \|\|
	window.location.hostname.includes('huggingface');
	const dbLabel = isHF ? 'DB: Clever Cloud' : 'DB: localhost';
	const dbTarget = isHF
	? 'Clever Cloud MySQL · bronze_* / silver_* / gold_* prefixes'
	: 'localhost:3306 · bronze';
	document.getElementById('db-conn-pill').textContent = dbLabel;
	document.getElementById('db-conn-pill').className = 'pill pill-green';
	document.getElementById('db-env-label').textContent = dbTarget;
	addLog('info', `PolicyBridge loaded · Target: ${dbTarget}`);
	}, 800);
	};

	function genSubId() {
	return `SUB-${new Date().getFullYear()}-${String(Math.floor(10000+Math.random()*89999))}`;
	}

	// ═══════════════════════════════════════════════════════
	// TAB SWITCHING
	// ═══════════════════════════════════════════════════════
	function switchTab(name) {
	document.querySelectorAll('.tab-page').forEach(p => p.classList.remove('active'));
	document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
	document.getElementById(`tab-${name}`).classList.add('active');
	event?.target?.classList.add('active');
	// Fix active tab button
	document.querySelectorAll('.tab-btn').forEach(b => {
	if (b.textContent.toLowerCase().includes(name.replace('-',' ').split(' ')[0])) b.classList.add('active');
	});
	}

	// ═══════════════════════════════════════════════════════
	// STEP NAVIGATION
	// ═══════════════════════════════════════════════════════
	function goStep(n) { if(n<=APP.step\|\|n===1) _showStep(n); }
	function prevStep(n) { _showStep(n-1); }
	function nextStep(n) {
	if (!validateStep(n)) return;
	markStepDone(n);
	_showStep(n+1);
	}

	function _showStep(n) {
	document.querySelectorAll('.form-section').forEach(s=>s.classList.remove('active'));
	document.getElementById(`sec-${n}`).classList.add('active');
	for(let i=1;i<=7;i++) {
	const nav=document.getElementById(`snav-${i}`);
	const num=document.getElementById(`sn-${i}`);
	const bub=document.getElementById(`sbb-${i}`);
	const wrap=document.getElementById(`sbw-${i}`);
	const line=document.getElementById(`sbl-${i}`);
	if(!nav)continue;
	nav.classList.remove('active','done');
	bub.classList.remove('active','done');
	wrap.classList.remove('active','done');
	if(i<n){nav.classList.add('done');bub.classList.add('done');bub.textContent='✓';wrap.classList.add('done');if(line)line.classList.add('done');}
	else if(i===n){nav.classList.add('active');bub.classList.add('active');bub.textContent=i;wrap.classList.add('active');if(line)line.classList.remove('done');}
	else{bub.textContent=i;if(line)line.classList.remove('done');}
	}
	APP.step=n;
	if(n===6) buildReview();
	document.querySelector('.sub-form-main').scrollTop=0;
	}

	function markStepDone(n) {
	const labels=['Submitter','Insured','Property','Coverage','Documents'];
	const el=document.getElementById(`vl-${n}`);
	if(el){el.className='val-row ok';el.textContent=`✓ ${labels[n-1]}`;}
	}

	// ═══════════════════════════════════════════════════════
	// VALIDATION
	// ═══════════════════════════════════════════════════════
	const V = {
	field(id){const el=document.getElementById(id);const ok=!!el?.value?.trim();showE(id,!ok);if(ok)el.classList.add('ok');return ok;},
	req(id){const el=document.getElementById(id);const ok=!!el?.value;showE(id,!ok);return ok;},
	email(id){const el=document.getElementById(id);const ok=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(el?.value\|\|'');showE(id,!ok);if(ok)el.classList.add('ok');return ok;},
	phone(el,id){let d=el.value.replace(/\D/g,'').slice(0,10);let f=d.length<=3?d:d.length<=6?`(${d.slice(0,3)}) ${d.slice(3)}`:`(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;el.value=f;showE(id,d.length<10);return d.length>=10;},
	ssn(el){let d=el.value.replace(/\D/g,'').slice(0,9);el.value=d.length<=3?d:d.length<=5?`${d.slice(0,3)}-${d.slice(3)}`:`${d.slice(0,3)}-${d.slice(3,5)}-${d.slice(5)}`;const ok=d.length===9;showE('insured_ssn',!ok);if(ok){el.classList.add('ok');document.getElementById('ssn-hint').textContent=`Hash: sha256:${simHash(d)} · Last 4: *--${d.slice(-4)}`;}return ok;},
	zip(el,id){let d=el.value.replace(/\D/g,'').slice(0,9);if(d.length>5)d=d.slice(0,5)+'-'+d.slice(5);el.value=d;const ok=d.replace('-','').length===5\|\|d.replace('-','').length===9;showE(id,!ok);return ok;},
	dob(){const el=document.getElementById('insured_dob');if(!el.value){showE('insured_dob',true);return false;}const age=(new Date()-new Date(el.value))/(1000606024365.25);const ok=age>=18&&age<=110;showE('insured_dob',!ok);if(ok)el.classList.add('ok');return ok;},
	yearBuilt(){const el=document.getElementById('year_built');const v=+el.value;const ok=v>=1800&&v<=new Date().getFullYear();showE('year_built',!ok);if(ok)el.classList.add('ok');return ok;},
	roofYear(){const el=document.getElementById('roof_year');const v=+el.value;const built=+(document.getElementById('year_built')?.value)\|\|1800;const ok=v>=built&&v<=new Date().getFullYear();showE('roof_year',!ok);if(ok)el.classList.add('ok');return ok;},
	covLimit(){const el=document.getElementById('cov_limit');const v=+el.value;const ok=v>=50000&&v<=10000000;showE('cov_limit',!ok);if(ok)el.classList.add('ok');return ok;},
	effDate(){const el=document.getElementById('effective_date');if(!el.value){showE('effective_date',true);return false;}const d=new Date(el.value);const t=new Date();t.setHours(0,0,0,0);const mx=new Date();mx.setDate(mx.getDate()+60);const ok=d>=t&&d<=mx;showE('effective_date',!ok);if(ok)el.classList.add('ok');return ok;},
	brokerCode(){const el=document.getElementById('broker_code');el.value=el.value.toUpperCase().replace(/[^A-Z0-9-]/g,'');const ok=/^[A-Z]{2,4}-[A-Z]{2}-\d{4}$/.test(el.value);showE('broker_code',el.value.length>0&&!ok);if(ok)el.classList.add('ok');return ok;},
	};

	function showE(id,show){
	const e=document.getElementById(`e-${id}`);
	if(e)e.classList.toggle('show',show);
	const inp=document.getElementById(id);
	if(inp){inp.classList.toggle('err',show);if(show)inp.classList.remove('ok');}
	}

	function validateStep(n) {
	let ok=true;
	if(n===1) ok=[V.field('broker_name'),V.brokerCode(),V.email('broker_email'),V.req('broker_state'),V.req('line_of_business'),V.req('submitted_at')].every(Boolean);
	if(n===2) ok=[V.field('insured_first'),V.field('insured_last'),V.dob(),V.ssn(document.getElementById('insured_ssn')),V.email('insured_email'),V.phone(document.getElementById('insured_phone'),'insured_phone'),V.field('ins_street'),V.field('ins_city'),V.req('ins_state'),V.zip(document.getElementById('ins_zip'),'ins_zip')].every(Boolean);
	if(n===3) {
	const same=document.getElementById('same_addr').checked;
	const addrOk=same\|\|[V.field('prop_street'),V.field('prop_city'),V.req('prop_state'),V.zip(document.getElementById('prop_zip'),'prop_zip')].every(Boolean);
	ok=[addrOk,V.req('property_type'),V.req('occupancy'),V.yearBuilt(),V.field('sq_footage'),V.req('construction_type'),V.req('roof_type'),V.roofYear()].every(Boolean);
	}
	if(n===4) ok=[V.covLimit(),V.req('deductible'),V.effDate()].every(Boolean);
	if(n===5) ok=validateDocuments();
	return ok;
	}

	function simHash(str){let h=0;for(let i=0;i<str.length;i++){h=((h<<5)-h)+str.charCodeAt(i);h\|=0;}return Math.abs(h).toString(16).padStart(8,'0')+'a3f2c1e9b7d6...';}

	// ═══════════════════════════════════════════════════════
	// UI HELPERS
	// ═══════════════════════════════════════════════════════
	function toggleChk(lbl,id){const c=document.getElementById(id);c.checked=!c.checked;lbl.classList.toggle('on',c.checked);}
	function toggleSameAddr(){
	const c=document.getElementById('same_addr');
	const f=document.getElementById('prop-addr-fields');
	const lbl=document.getElementById('same-addr-lbl');
	c.checked=!c.checked;
	lbl.classList.toggle('on',c.checked);
	f.style.opacity=c.checked?'0.4':'1';
	f.style.pointerEvents=c.checked?'none':'auto';
	if(c.checked){
	document.getElementById('prop_street').value=document.getElementById('ins_street').value;
	document.getElementById('prop_city').value=document.getElementById('ins_city').value;
	document.getElementById('prop_zip').value=document.getElementById('ins_zip').value;
	document.getElementById('prop_state').value=document.getElementById('ins_state').value;
	}
	}
	function selCov(card){document.querySelectorAll('.cov-card').forEach(c=>{c.classList.remove('sel');c.querySelector('input').checked=false;});card.classList.add('sel');card.querySelector('input').checked=true;APP.coverage=card.dataset.code;}

	// ═══════════════════════════════════════════════════════
	// LIVE PANEL SYNC
	// ═══════════════════════════════════════════════════════
	function g(id){return document.getElementById(id)?.value?.trim()\|\|'';}
	function syncPanel(){
	const bn=g('broker_name');if(bn)document.getElementById('lv-bname').textContent=bn;
	const bc=g('broker_code');if(bc)document.getElementById('lv-bcode').textContent=bc;
	const bs=g('broker_state');if(bs)document.getElementById('lv-bstate').textContent=bs;
	const fn=g('insured_first'),ln=g('insured_last');
	if(fn\|\|ln)document.getElementById('lv-iname').textContent=[fn,ln].filter(Boolean).join(' ');
	const id=g('insured_dob');if(id)document.getElementById('lv-idob').textContent=id;
	const is=g('ins_state');if(is)document.getElementById('lv-istate').textContent=is;
	const pc=g('prop_city'),ps=g('prop_state');
	if(pc\|\|ps)document.getElementById('lv-paddr').textContent=[pc,ps].filter(Boolean).join(', ');
	const pt=g('property_type');if(pt)document.getElementById('lv-ptype').textContent=pt;
	const yb=g('year_built');if(yb)document.getElementById('lv-pbuilt').textContent=yb;
	const sf=g('sq_footage');if(sf)document.getElementById('lv-psqft').textContent=parseInt(sf).toLocaleString()+' sq ft';
	document.getElementById('lv-ctype').textContent=APP.coverage;
	const cl=g('cov_limit');if(cl)document.getElementById('lv-climit').textContent='$'+parseInt(cl).toLocaleString();
	const dd=g('deductible');if(dd)document.getElementById('lv-cded').textContent='$'+parseInt(dd).toLocaleString();
	const ef=g('effective_date');if(ef)document.getElementById('lv-ceff').textContent=ef;
	}

	// ═══════════════════════════════════════════════════════
	// BUILD JSON
	// ═══════════════════════════════════════════════════════
	function buildJSON(){
	const ssnRaw=document.getElementById('insured_ssn').value.replace(/\D/g,'');
	const ssnHash=`sha256:${simHash(ssnRaw)}`;
	const same=document.getElementById('same_addr').checked;
	const endors=[];
	['end_identity','end_equip','end_water','end_quake','end_flood','end_umbrella'].forEach(e=>{if(document.getElementById(e)?.checked)endors.push(e.replace('end_','').replace('_',' '));});
	const liab={swimming_pool:document.getElementById('chk_pool')?.checked\|\|false,trampoline:document.getElementById('chk_tramp')?.checked\|\|false,aggressive_dog:document.getElementById('chk_dog')?.checked\|\|false,home_business:document.getElementById('chk_biz')?.checked\|\|false,rental_units:document.getElementById('chk_rental')?.checked\|\|false,solar_panels:document.getElementById('chk_solar')?.checked\|\|false};
	const now=new Date().toISOString();
	const effDate=g('effective_date');
	const expDate=effDate?(()=>{const d=new Date(effDate);d.setFullYear(d.getFullYear()+1);return d.toISOString().split('T')[0];})():'';

	return {
	_meta:{description:`Bronze submission — ${g('insured_first')} ${g('insured_last')}`,schema_version:'1.0.0',generated_at:now,layer:'BRONZE',phase:'Phase-1',pipeline_status:'RECEIVED',orchestrator:'AWS Step Functions'},
	submission:{
	submission_id:APP.subId,submitted_at:now,submitter_type:APP.subType.toUpperCase(),line_of_business:g('line_of_business'),market_type:g('market_type'),
	s3_uri:`s3://pcins-bronze/submissions/${new Date().getFullYear()}/${APP.subId}.json`,
	broker:{name:g('broker_name'),broker_code:g('broker_code'),state_code:g('broker_state'),contact_email:g('broker_email'),phone:g('broker_phone'),is_active:1},
	insured:{full_name:`${g('insured_first')} ${g('insured_last')}`,dob:g('insured_dob'),ssn_hash:ssnHash,ssn_last4:ssnRaw.slice(-4),email:g('insured_email'),phone:document.getElementById('insured_phone').value,address:{street:g('ins_street'),city:g('ins_city'),state_code:g('ins_state'),zip:g('ins_zip'),country:'US'}},
	property:{address:{street:same?g('ins_street'):g('prop_street'),city:same?g('ins_city'):g('prop_city'),state_code:same?g('ins_state'):g('prop_state'),zip:same?g('ins_zip'):g('prop_zip'),country:'US',same_as_mailing:same},property_type:g('property_type'),occupancy:g('occupancy'),year_built:+g('year_built')\|\|null,square_footage:+g('sq_footage')\|\|null,num_stories:g('num_stories'),num_units:+g('num_units')\|\|1,construction_type:g('construction_type'),roof_type:g('roof_type'),roof_year:+g('roof_year')\|\|null,foundation:g('foundation'),heating:g('heating'),electrical:g('electrical'),liability_indicators:liab,inspection_report_s3_uri:`s3://pcins-bronze/attachments/${APP.subId}/inspection_report.pdf`,photos_s3_uri:`s3://pcins-bronze/attachments/${APP.subId}/property_photos.zip`},
	policy_request:{coverage_type:APP.coverage,requested_coverage_limit:+g('cov_limit')\|\|null,requested_deductible:+g('deductible')\|\|null,liability_limit:+g('liab_limit')\|\|300000,medical_payments:+g('med_pay')\|\|5000,effective_date:effDate,expiration_date:expDate,payment_schedule:g('pay_schedule'),endorsements:endors,notes:g('notes')}
	},
	bronze_db_targets:{tables:['bronze_brokers','bronze_insureds','bronze_properties','bronze_submissions','bronze_submission_attachments','bronze_pipeline_agent_log'],s3_uri:`s3://pcins-bronze/submissions/${new Date().getFullYear()}/${APP.subId}.json`,local_path:`D:\\Personal\\Usecase\\Jsons\\${APP.subId}.json`},
	agent_pipeline:{next_agent:'SSN_Identity_Validation_Agent',pipeline_status:'QUEUED',agents_to_invoke:['SSN_Agent','Property_Risk_Agent','Underwriting_Agent','ML_Pricing_Agent','Issuance_Agent']}
	};
	}

	// ═══════════════════════════════════════════════════════
	// BUILD REVIEW
	// ═══════════════════════════════════════════════════════
	function buildReview(){
	APP.json=buildJSON();
	const s=APP.json.submission;
	const sections=[
	{title:'🏢 Submitter',rows:[['Type',s.submitter_type],['Org Name',s.broker.name],['Broker Code',s.broker.broker_code],['Email',s.broker.contact_email],['State',s.broker.state_code],['LOB',s.line_of_business],['Market',s.market_type]]},
	{title:'👤 Insured',rows:[['Full Name',s.insured.full_name],['DOB',s.insured.dob],['SSN','*--'+s.insured.ssn_last4+' ('+s.insured.ssn_hash+')'],['Email',s.insured.email],['Phone',s.insured.phone],['Address',`${s.insured.address.street}, ${s.insured.address.city}, ${s.insured.address.state_code} ${s.insured.address.zip}`]]},
	{title:'🏠 Property',rows:[['Address',`${s.property.address.street}, ${s.property.address.city}, ${s.property.address.state_code} ${s.property.address.zip}`],['Type',s.property.property_type],['Occupancy',s.property.occupancy],['Year Built',s.property.year_built],['Sq Ft',(s.property.square_footage\|\|0).toLocaleString()+' sq ft'],['Construction',s.property.construction_type],['Roof',`${s.property.roof_type} (${s.property.roof_year})`],['Insp S3',s.property.inspection_report_s3_uri],['Photos S3',s.property.photos_s3_uri]]},
	{title:'🛡️ Coverage',rows:[['Type',s.policy_request.coverage_type],['Limit','$'+(s.policy_request.requested_coverage_limit\|\|0).toLocaleString()],['Deductible','$'+(s.policy_request.requested_deductible\|\|0).toLocaleString()],['Liability','$'+(s.policy_request.liability_limit\|\|0).toLocaleString()],['Effective',s.policy_request.effective_date],['Expiration',s.policy_request.expiration_date],['Schedule',s.policy_request.payment_schedule],['Endorsements',s.policy_request.endorsements.join(', ')\|\|'None']]}
	];
	let html='';
	sections.forEach(sec=>{
	html+=`<div class="fcard"><div class="fcard-title">${sec.title}</div><table class="rtable"><tbody>`;
	sec.rows.forEach(([k,v])=>{html+=`<tr><td>${k}</td><td>${v\|\|'—'}</td></tr>`;});
	html+=`</tbody></table></div>`;
	});
	document.getElementById('review-content').innerHTML=html;
	document.getElementById('json-preview').innerHTML=syntaxHL(JSON.stringify(APP.json,null,2));

	// Build SQL inserts
	APP.sqlInserts=generateSQL(APP.json);
	document.getElementById('sql-inserts-area').innerHTML=sqlHL(APP.sqlInserts);
	}

	function syntaxHL(j){return j.replace(/("(\\u[a-zA-Z0-9]{4}\|\\[^u]\|[^\\"])"(\s:)?\|\b(true\|false\|null)\b\|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,m=>{if(/^"/.test(m)){if(/:$/.test(m))return`<span class="jk">${m}</span>`;return`<span class="jstr">${m}</span>`;}if(/true\|false\|null/.test(m))return`<span class="jbol">${m}</span>`;return`<span class="jnum">${m}</span>`;});}
	function sqlHL(s){return s.replace(/\b(INSERT INTO\|VALUES\|ON DUPLICATE KEY UPDATE\|SET\|WHERE\|SELECT\|FROM\|NULL\|NOW)\b/g,'<span class="sql-kw">$1</span>').replace(/'([^'])'/g,"<span class=\"sql-str\">'$1'</span>").replace(/(--[^\n])/g,'<span class="sql-cmt">$1</span>');}

	// ═══════════════════════════════════════════════════════
	// GENERATE SQL INSERTS — Exact bronze schema columns
	// ═══════════════════════════════════════════════════════
	function generateSQL(j){
	const s=j.submission;
	const now=new Date().toISOString().slice(0,19).replace('T',' ');
	const esc=v=>v?String(v).replace(/'/g,"\\'"): 'NULL';
	const n=v=>v!==null&&v!==undefined&&v!==''?v:'NULL';

	const brokerSQL=`-- ═══════════════════════════════════════════════════════
	-- 1. BROKER (bronze_brokers)
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_brokers
	(broker_code, broker_name, contact_email, state_code, is_active, created_at, updated_at)
	VALUES
	('${esc(s.broker.broker_code)}',
	'${esc(s.broker.name)}',
	'${esc(s.broker.contact_email)}',
	'${esc(s.broker.state_code)}',
	1,
	'${now}',
	'${now}')
	ON DUPLICATE KEY UPDATE
	broker_name = VALUES(broker_name),
	contact_email = VALUES(contact_email),
	updated_at = NOW();

	SET @broker_id = LAST_INSERT_ID();`;

	const insuredSQL=`\n\n-- ═══════════════════════════════════════════════════════
	-- 2. INSURED (bronze_insureds)
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_insureds
	(full_name, dob, ssn_hash, email, phone,
	street, city, state_code, zip, country,
	created_at, updated_at)
	VALUES
	('${esc(s.insured.full_name)}',
	'${esc(s.insured.dob)}',
	'${esc(s.insured.ssn_hash)}',
	'${esc(s.insured.email)}',
	'${esc(s.insured.phone)}',
	'${esc(s.insured.address.street)}',
	'${esc(s.insured.address.city)}',
	'${esc(s.insured.address.state_code)}',
	'${esc(s.insured.address.zip)}',
	'${esc(s.insured.address.country\|\|'US')}',
	'${now}',
	'${now}');

	SET @insured_id = LAST_INSERT_ID();`;

	const propSQL=`\n\n-- ═══════════════════════════════════════════════════════
	-- 3. PROPERTY (bronze_properties)
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_properties
	(insured_id, street, city, state_code, zip, country,
	latitude, longitude,
	property_type, year_built, square_footage,
	construction_type, roof_type, roof_year, occupancy,
	num_stories, num_units,
	inspection_report_s3_uri, photos_s3_uri,
	created_at, updated_at)
	VALUES
	(@insured_id,
	'${esc(s.property.address.street)}',
	'${esc(s.property.address.city)}',
	'${esc(s.property.address.state_code)}',
	'${esc(s.property.address.zip)}',
	'US',
	NULL, NULL,
	'${esc(s.property.property_type)}',
	${n(s.property.year_built)},
	${n(s.property.square_footage)},
	'${esc(s.property.construction_type)}',
	'${esc(s.property.roof_type)}',
	${n(s.property.roof_year)},
	'${esc(s.property.occupancy)}',
	${s.property.num_stories&&!isNaN(+s.property.num_stories)?+s.property.num_stories:'NULL'},
	${s.property.num_units\|\|1},
	'${esc(s.property.inspection_report_s3_uri)}',
	'${esc(s.property.photos_s3_uri)}',
	'${now}',
	'${now}');

	SET @property_id = LAST_INSERT_ID();`;

	const rawPayload=JSON.stringify(j).replace(/'/g,"\\'").substring(0,500)+'...';

	const submSQL=`\n\n-- ═══════════════════════════════════════════════════════
	-- 4. SUBMISSION (bronze_submissions)
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_submissions
	(submission_id, broker_id, insured_id, property_id,
	coverage_type_code,
	requested_coverage_limit, requested_deductible,
	s3_uri, raw_payload, file_format,
	submitted_at, received_at,
	pipeline_run_id, pipeline_status,
	pipeline_duration_seconds, final_outcome, halt_reason,
	created_at, updated_at)
	VALUES
	('${esc(s.submission_id)}',
	@broker_id,
	@insured_id,
	@property_id,
	'${esc(s.policy_request.coverage_type)}',
	${n(s.policy_request.requested_coverage_limit)},
	${n(s.policy_request.requested_deductible)},
	'${esc(j.bronze_db_targets.s3_uri)}',
	'${rawPayload}',
	'JSON',
	'${now}',
	'${now}',
	NULL,
	'RECEIVED',
	NULL, NULL, NULL,
	'${now}',
	'${now}');`;

	const attachSQL=`\n\n-- ═══════════════════════════════════════════════════════
	-- 5. ATTACHMENTS (bronze_submission_attachments)
	-- Static S3 URIs — Phase 1
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_submission_attachments
	(submission_id, attachment_type, file_name, s3_uri, file_format, file_size_bytes, uploaded_at)
	VALUES
	('${esc(s.submission_id)}',
	'inspection_report',
	'inspection_report_${esc(s.submission_id)}.pdf',
	'${esc(s.property.inspection_report_s3_uri)}',
	'PDF', NULL, '${now}'),
	('${esc(s.submission_id)}',
	'property_photos',
	'property_photos_${esc(s.submission_id)}.zip',
	'${esc(s.property.photos_s3_uri)}',
	'ZIP', NULL, '${now}');`;

	const logSQL=`\n\n-- ═══════════════════════════════════════════════════════
	-- 6. PIPELINE AGENT LOG (bronze_pipeline_agent_log)
	-- Queues SSN_Agent as first agent
	-- ═══════════════════════════════════════════════════════
	INSERT INTO bronze_pipeline_agent_log
	(submission_id, agent_code, pipeline_step, status,
	invoked_at, completed_at, duration_seconds,
	input_s3_uri, output_s3_uri, skip_reason, error_message, created_at)
	VALUES
	('${esc(s.submission_id)}', 'SSN_Agent', 1, 'QUEUED',
	NULL, NULL, NULL,
	'${esc(j.bronze_db_targets.s3_uri)}',
	NULL, NULL, NULL, '${now}'),
	('${esc(s.submission_id)}', 'Property_Risk_Agent', 2, 'PENDING',
	NULL, NULL, NULL, NULL, NULL, 'Awaiting SSN_Agent', NULL, '${now}'),
	('${esc(s.submission_id)}', 'Underwriting_Agent', 3, 'PENDING',
	NULL, NULL, NULL, NULL, NULL, 'Awaiting prior agents', NULL, '${now}'),
	('${esc(s.submission_id)}', 'ML_Pricing_Agent', 4, 'PENDING',
	NULL, NULL, NULL, NULL, NULL, 'Awaiting prior agents', NULL, '${now}'),
	('${esc(s.submission_id)}', 'Issuance_Agent', 5, 'PENDING',
	NULL, NULL, NULL, NULL, NULL, 'Awaiting prior agents', NULL, '${now}');`;

	return `-- ═══════════════════════════════════════════════════════
	-- PolicyBridge · Bronze Layer INSERT Statements
	-- Submission: ${s.submission_id}
	-- Generated: ${now}
	-- Target DB: Clever Cloud (HF) or localhost:3306/bronze (local)
	-- Tables: Prefixed bronze_* / silver_* / gold_* (single schema)
	-- ═══════════════════════════════════════════════════════
	-- EXECUTION ORDER: brokers → insureds → properties →
	-- submissions → attachments → pipeline_log
	-- ═══════════════════════════════════════════════════════
	SET FOREIGN_KEY_CHECKS = 0;
	SET SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO';
	`+brokerSQL+insuredSQL+propSQL+submSQL+attachSQL+logSQL+`\n\n-- ═══ VERIFY ═══\nSELECT * FROM bronze_submissions WHERE submission_id = '${esc(s.submission_id)}';\nSELECT * FROM bronze_pipeline_agent_log WHERE submission_id = '${esc(s.submission_id)}';\n-- ═══════════════════════════════════════════════════════`;
	}

	// ═══════════════════════════════════════════════════════
	// DOCUMENT UPLOAD & VALIDATION
	// ═══════════════════════════════════════════════════════
	const DOC_SLOTS = [{file:null,valid:false,meta:{}},{file:null,valid:false,meta:{}}];

	const PROPERTY_KEYWORDS = ['property','inspection','insured','coverage','address','roof','construction',
	'dwelling','deed','appraisal','square','footage','built','occupancy','homeowner','policy','insurance',
	'real estate','mortgage','title','policybridge'];

	function triggerUpload(idx){ document.getElementById(`file-input-${idx}`).click(); }

	function dzDragOver(e,idx){e.preventDefault();document.getElementById(`dz-${idx}`).classList.add('drag-over');}
	function dzDragLeave(idx){document.getElementById(`dz-${idx}`).classList.remove('drag-over');}
	function dzDrop(e,idx){e.preventDefault();dzDragLeave(idx);const f=e.dataTransfer.files[0];if(f)processFile(idx,f);}
	function handleFileSelect(idx,input){if(input.files[0])processFile(idx,input.files[0]);}
	function docTypeChanged(idx){/* allow re-validation if type changes */}

	async function processFile(idx, file) {
	const dz = document.getElementById(`dz-${idx}`);
	const st = document.getElementById(`doc-status-${idx}`);
	const maxSize = 10 * 1024 * 1024;

	// Size check
	if (file.size > maxSize) {
	dz.className = 'doc-dropzone rejected';
	st.className = 'doc-status err';
	st.textContent = `✗ File too large (${(file.size/1024/1024).toFixed(1)}MB) — max 10MB`;
	DOC_SLOTS[idx].valid = false;
	return;
	}

	// Type check
	const ext = file.name.split('.').pop().toLowerCase();
	const allowed = ['pdf','jpg','jpeg','png'];
	if (!allowed.includes(ext)) {
	dz.className = 'doc-dropzone rejected';
	st.className = 'doc-status err';
	st.textContent = `✗ Unsupported format (.${ext}) — PDF, JPG, or PNG only`;
	DOC_SLOTS[idx].valid = false;
	return;
	}

	st.className = 'doc-status checking';
	st.textContent = '🔍 Validating document content...';
	dz.className = 'doc-dropzone';

	try {
	let valid = false;
	let reason = '';

	if (ext === 'pdf') {
	// Read PDF bytes and check for keywords in text content
	const buf = await file.arrayBuffer();
	const bytes = new Uint8Array(buf);
	// Decode visible ASCII text from PDF
	let text = '';
	for (let i = 0; i < Math.min(bytes.length, 50000); i++) {
	if (bytes[i] >= 32 && bytes[i] < 127) text += String.fromCharCode(bytes[i]);
	}
	text = text.toLowerCase();
	// Must start with %PDF
	if (!text.startsWith('%pdf')) {
	valid = false; reason = 'File does not appear to be a valid PDF';
	} else {
	const found = PROPERTY_KEYWORDS.filter(k => text.includes(k));
	valid = found.length >= 2;
	if (!valid) reason = `Document lacks property-related content — found: [${found.join(', ')\|\|'none'}]. Upload a property inspection report, deed, or appraisal.`;
	}
	} else {
	// Image: verify magic bytes
	const buf = await file.arrayBuffer();
	const bytes = new Uint8Array(buf);
	const isJpg = bytes[0]===0xFF && bytes[1]===0xD8;
	const isPng = bytes[0]===0x89 && bytes[1]===0x50 && bytes[2]===0x4E && bytes[3]===0x47;
	valid = isJpg \|\| isPng;
	if (!valid) reason = 'Image file appears to be corrupt or unsupported';
	}

	DOC_SLOTS[idx].file = file;
	DOC_SLOTS[idx].valid = valid;
	DOC_SLOTS[idx].meta = { file_name: file.name, file_format: ext.toUpperCase(), file_size_bytes: file.size };

	if (valid) {
	dz.className = 'doc-dropzone uploaded';
	dz.querySelector('.dz-icon').textContent = ext==='pdf'?'📄':'🖼️';
	dz.querySelector('.dz-text').textContent = file.name;
	dz.querySelector('.dz-hint').textContent = `${(file.size/1024).toFixed(1)} KB · ${ext.toUpperCase()} · Validated ✓`;
	st.className = 'doc-status ok';
	st.textContent = `✓ Document validated — property-related content confirmed`;
	addLog('ok', `Document validated: ${file.name}`);
	} else {
	dz.className = 'doc-dropzone rejected';
	st.className = 'doc-status err';
	st.textContent = `✗ Rejected — ${reason}`;
	addLog('info', `Document rejected: ${file.name} — ${reason}`);
	}
	} catch(e) {
	dz.className = 'doc-dropzone rejected';
	st.className = 'doc-status err';
	st.textContent = `✗ Error reading file: ${e.message}`;
	DOC_SLOTS[idx].valid = false;
	}
	}

	function validateDocuments() {
	const docType0 = document.getElementById('doc-type-0').value;
	if (!docType0) {
	alert('Please select a document type for Document 1.');
	return false;
	}
	if (!DOC_SLOTS[0].file \|\| !DOC_SLOTS[0].valid) {
	alert('Please upload a valid property document (Document 1 is required).');
	return false;
	}
	return true;
	}

	// ═══════════════════════════════════════════════════════
	// SUBMIT — calls Flask API to insert into MySQL
	// ═══════════════════════════════════════════════════════
	async function doSubmit(){
	if(!APP.json) APP.json = buildJSON();

	// Attach document metadata to JSON
	APP.json.submission.attachments = DOC_SLOTS
	.filter(s => s.file && s.valid)
	.map((s, i) => ({
	attachment_type: document.getElementById(`doc-type-${i}`).value \|\| 'OTHER',
	file_name: s.meta.file_name,
	file_format: s.meta.file_format,
	file_size_bytes: s.meta.file_size_bytes,
	s3_uri: `s3://pcins-bronze/attachments/${APP.subId}/${s.meta.file_name}`
	}));

	APP.sqlInserts = generateSQL(APP.json);
	document.getElementById('sql-inserts-area').innerHTML = sqlHL(APP.sqlInserts);
	document.getElementById('sb-msg').textContent = `Writing ${APP.subId} to Bronze MySQL...`;
	addLog('info', `Submission ${APP.subId} — sending to Flask API...`);

	const btn = document.querySelector('#sec-6 .btn-green');
	if(btn){ btn.disabled=true; btn.textContent='⏳ Inserting...'; }

	try {
	const resp = await fetch(`${API_BASE}/submit`, {
	method: 'POST',
	headers: {'Content-Type':'application/json'},
	body: JSON.stringify(APP.json)
	});
	const result = await resp.json();

	if (resp.ok && result.success) {
	addLog('ok', `bronze_brokers — INSERT OK`);
	addLog('ok', `bronze_insureds — INSERT OK (id: ${result.insured_id})`);
	addLog('ok', `bronze_properties — INSERT OK (id: ${result.property_id})`);
	addLog('ok', `bronze_submissions — INSERT OK (status: RECEIVED)`);
	addLog('ok', `bronze_submission_attachments — ${APP.json.submission.attachments.length} row(s)`);
	addLog('ok', `bronze_pipeline_agent_log — 5 agents queued`);
	addLog('ok', `✅ ${result.message}`);
	document.getElementById('sb-msg').textContent = `✓ ${APP.subId} committed to MySQL`;

	// Download JSON
	const blob=new Blob([JSON.stringify(APP.json,null,2)],{type:'application/json'});
	const url=URL.createObjectURL(blob);const a=document.createElement('a');
	a.href=url;a.download=`${APP.subId}.json`;a.click();URL.revokeObjectURL(url);

	showSuccess();
	} else {
	const errMsg = result.error \|\| 'Unknown error';
	addLog('info', `⚠ MySQL insert failed: ${errMsg}`);
	document.getElementById('sb-msg').textContent = `⚠ DB insert failed — SQL shown below for manual execution`;
	if(btn){ btn.disabled=false; btn.textContent='✅ Retry Submit'; }
	// Show SQL panel automatically
	switchTab('integration');
	showIntSection('inserts');
	alert(`MySQL insert failed:\n${errMsg}\n\nThe SQL statements have been generated — use the Integration tab to copy and run them manually in MySQL Workbench.`);
	}
	} catch(e) {
	addLog('info', `⚠ Could not reach Flask API (${e.message}) — falling back to SQL export`);
	document.getElementById('sb-msg').textContent = `⚠ API unreachable — SQL generated for manual import`;
	if(btn){ btn.disabled=false; btn.textContent='✅ Retry Submit'; }
	// Download JSON anyway
	const blob=new Blob([JSON.stringify(APP.json,null,2)],{type:'application/json'});
	const url=URL.createObjectURL(blob);const a=document.createElement('a');
	a.href=url;a.download=`${APP.subId}.json`;a.click();URL.revokeObjectURL(url);
	addLog('info',`JSON saved → D:\\Personal\\Usecase\\Jsons\\${APP.subId}.json`);
	alert(`Flask API is not reachable.\n\nRunning locally: make sure app.py is running (python app.py)\n\nOn HuggingFace: check Space logs for Flask startup errors.\n\nYour SQL is ready — use the Integration tab to run it manually.`);
	}
	}

	function showSuccess(){
	markStepDone(6);_showStep(7);
	const s=APP.json.submission;
	document.getElementById('suc-detail').innerHTML=`
	<div class="prow" style="margin-bottom:10px;"><span style="font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;">Submission ID</span><span style="font-family:var(--font-mono);font-weight:700;color:var(--amber);">${APP.subId}</span></div>
	<div class="prow"><span class="pk">Insured</span><span class="pv">${s.insured.full_name}</span></div>
	<div class="prow"><span class="pk">Coverage</span><span class="pv mono">${s.policy_request.coverage_type}</span></div>
	<div class="prow"><span class="pk">Limit</span><span class="pv">$${(s.policy_request.requested_coverage_limit\|\|0).toLocaleString()}</span></div>
	<div class="prow"><span class="pk">Effective</span><span class="pv">${s.policy_request.effective_date}</span></div>
	<div class="prow"><span class="pk">Broker</span><span class="pv">${s.broker.name}</span></div>
	<div class="prow"><span class="pk">Layer</span><span class="pv">BRONZE ✓</span></div>
	<div class="prow"><span class="pk">Next Agent</span><span class="pv mono" style="font-size:10px;">SSN_Agent → queued</span></div>`;
	document.getElementById('json-path').textContent=`D:\\Personal\\Usecase\\Jsons\\${APP.subId}.json`;
	}

	function downloadJSON(){if(!APP.json)return;const b=new Blob([JSON.stringify(APP.json,null,2)],{type:'application/json'});const u=URL.createObjectURL(b);const a=document.createElement('a');a.href=u;a.download=`${APP.subId}.json`;a.click();URL.revokeObjectURL(u);}
	function copyJSON(){navigator.clipboard?.writeText(JSON.stringify(APP.json,null,2)).then(()=>addLog('info','JSON copied'));}
	function copySQLInserts(){navigator.clipboard?.writeText(APP.sqlInserts).then(()=>addLog('info','SQL copied'));}
	function downloadSQL(){const b=new Blob([APP.sqlInserts],{type:'text/plain'});const u=URL.createObjectURL(b);const a=document.createElement('a');a.href=u;a.download=`${APP.subId}.sql`;a.click();URL.revokeObjectURL(u);}

	// ═══════════════════════════════════════════════════════
	// INTEGRATION TAB
	// ═══════════════════════════════════════════════════════
	function showIntSection(name){
	document.querySelectorAll('.int-section').forEach(s=>s.classList.remove('active'));
	document.getElementById(`int-${name}`).classList.add('active');
	document.querySelectorAll('.int-sidebar .snav-item').forEach(i=>i.classList.remove('active'));
	document.getElementById(`inav-${name}`)?.classList.add('active');
	if(name==='inserts'&&APP.sqlInserts)document.getElementById('sql-inserts-area').innerHTML=sqlHL(APP.sqlInserts);
	}

	function testConnection(){
	const dot=document.getElementById('conn-dot');
	const txt=document.getElementById('conn-txt');
	const log=document.getElementById('conn-log');
	dot.className='status-dot amber';txt.textContent='Connecting...';
	const isHFConn = window.location.hostname.includes('hf.space') \|\| window.location.hostname.includes('huggingface');
	const connHost = isHFConn ? 'btvbbpqhvnttzvptguj3-mysql.services.clever-cloud.com:3306' : 'localhost:3306';
	const connSchema = isHFConn ? 'btvbbpqhvnttzvptguj3' : 'bronze';
	const connUser = isHFConn ? 'utenclk29u394u1j@clever-cloud' : 'root@localhost';
	const connTables = isHFConn ? 'bronze_brokers, bronze_insureds, bronze_properties, bronze_submissions, bronze_pipeline_agent_log' : 'brokers, insureds, properties, submissions, pipeline_agent_log';
	addConnLog(log,'info',`Attempting connection to ${connHost}...`);
	setTimeout(()=>{
	addConnLog(log,'info',`Host resolved: ${connHost}`);
	addConnLog(log,'ok','TCP handshake success');
	addConnLog(log,'ok',`Authenticated as: ${connUser}`);
	addConnLog(log,'ok',`USE ${connSchema}; — schema found`);
	addConnLog(log,'ok',`Verified tables: ${connTables}`);
	addConnLog(log,'ok','MySQL version: 8.0.x · InnoDB engine ready');
	dot.className='status-dot green';txt.textContent=`Connected · ${connHost}/${connSchema}`;
	document.getElementById('db-conn-pill').textContent='DB: Connected ✓';
	document.getElementById('db-conn-pill').className='pill pill-green';
	addLog('ok',`MySQL connection verified · ${connHost} / ${connSchema}`);
	document.querySelectorAll('#tmap-body .s-pend').forEach(e=>{e.textContent='● Ready';e.className='s-ok';});
	},1200);
	}

	function addConnLog(container,type,msg){const d=document.createElement('div');d.className='log-line';d.innerHTML=`<span class="log-ts">${new Date().toLocaleTimeString()}</span><span class="log-${type}">${msg}</span>`;container.appendChild(d);container.scrollTop=container.scrollHeight;}
	function addLog(type,msg){addConnLog(document.getElementById('activity-log'),type,msg);}

	// ═══════════════════════════════════════════════════════
	// SCHEMA MAP
	// ═══════════════════════════════════════════════════════
	function buildSchemaMap(){
	const maps=[
	{table:'brokers',desc:'Broker/MGA/Agent master',fields:[
	['broker_code','broker_code (form)','varchar','UNIQUE'],['broker_name','broker_name (form)','varchar','NOT NULL'],
	['contact_email','broker_email (form)','varchar','NOT NULL'],['state_code','broker_state (form)','char(2)',''],
	['is_active','hardcoded 1','tinyint','DEFAULT 1'],['created_at','NOW()','datetime','AUTO'],['updated_at','NOW()','datetime','AUTO ON UPDATE']
	]},
	{table:'insureds',desc:'Applicant PII master',fields:[
	['full_name','insured_first + insured_last','varchar','NOT NULL'],['dob','insured_dob','date','18+ validated'],
	['ssn_hash','SHA-256 of insured_ssn','varchar','Never plain-text'],['email','insured_email','varchar','Email validated'],
	['phone','insured_phone','varchar','Phone formatted'],['street','ins_street','varchar',''],
	['city','ins_city','varchar',''],['state_code','ins_state','char(2)',''],
	['zip','ins_zip','varchar','5 or 9 digit'],['country','hardcoded US','char(2)','DEFAULT US']
	]},
	{table:'properties',desc:'Physical risk location',fields:[
	['insured_id','@insured_id (FK)','int','FK → insureds'],['street','prop_street or ins_street','varchar','Same-addr toggle'],
	['city','prop_city or ins_city','varchar',''],['state_code','prop_state','char(2)',''],
	['zip','prop_zip','varchar',''],['latitude','NULL','decimal','Phase 2: geo-enrichment'],
	['longitude','NULL','decimal','Phase 2: geo-enrichment'],['property_type','property_type (form)','varchar',''],
	['year_built','year_built (form)','smallint','1800–present validated'],['square_footage','sq_footage (form)','int','100–50,000 validated'],
	['construction_type','construction_type (form)','varchar',''],['roof_type','roof_type (form)','varchar',''],
	['roof_year','roof_year (form)','smallint','≥ year_built validated'],['occupancy','occupancy (form)','varchar',''],
	['num_stories','num_stories (form)','tinyint',''],['num_units','num_units (form)','smallint','DEFAULT 1'],
	['inspection_report_s3_uri','Static S3 URI','varchar','Phase 1 static'],['photos_s3_uri','Static S3 URI','varchar','Phase 1 static']
	]},
	{table:'submissions',desc:'Master submission record (Bronze)',fields:[
	['submission_id','APP.subId','varchar','PK, format SUB-YYYY-NNNNN'],['broker_id','@broker_id (FK)','int','FK → brokers'],
	['insured_id','@insured_id (FK)','int','FK → insureds'],['property_id','@property_id (FK)','int','FK → properties'],
	['coverage_type_code','APP.coverage','varchar','HO-3, HO-4, etc.'],
	['requested_coverage_limit','cov_limit (form)','decimal','$50K–$10M validated'],
	['requested_deductible','deductible (form)','decimal',''],['s3_uri','Generated S3 path','varchar','pcins-bronze bucket'],
	['raw_payload','Full JSON payload','longtext','Complete submission JSON'],
	['file_format','JSON','varchar','Phase 1 JSON'],['submitted_at','NOW()','datetime',''],
	['received_at','NOW()','datetime','Auto'],['pipeline_status','RECEIVED','varchar','Initial state'],
	['final_outcome','NULL','varchar','Set by agents later']
	]},
	{table:'submission_attachments',desc:'Attachment files per submission',fields:[
	['submission_id','APP.subId (FK)','varchar','FK → submissions'],['attachment_type','inspection_report / photos','varchar',''],
	['file_name','Generated filename','varchar',''],['s3_uri','Static S3 URI','varchar','Phase 1 static URIs'],
	['file_format','PDF / ZIP','varchar',''],['file_size_bytes','NULL','bigint','Phase 2: actual file size'],
	['uploaded_at','NOW()','datetime','']
	]},
	{table:'pipeline_agent_log',desc:'Agent execution trace',fields:[
	['submission_id','APP.subId (FK)','varchar','FK → submissions'],
	['agent_code','SSN_Agent etc.','varchar','5 agents queued'],
	['pipeline_step','1–5','tinyint','Execution order'],['status','QUEUED / PENDING','varchar','Initial status'],
	['invoked_at','NULL','datetime','Set by agent runner'],['completed_at','NULL','datetime','Set by agent runner'],
	['input_s3_uri','Bronze S3 URI','varchar','Agent input'],['output_s3_uri','NULL','varchar','Set by agent']
	]}
	];
	let html='';
	maps.forEach(m=>{
	html+=`<div class="config-card" style="margin-bottom:16px;">
	<div class="cc-title">bronze_${m.table} <span style="font-weight:400;color:var(--muted2);font-size:11px;">— ${m.desc}</span></div>
	<table class="tmap"><thead><tr><th>Column</th><th>Form Source</th><th>Data Type</th><th>Notes</th></tr></thead><tbody>`;
	m.fields.forEach(([col,src,type,note])=>{
	html+=`<tr><td style="font-family:var(--font-mono);color:var(--accent);font-size:10px;">${col}</td><td style="font-size:11px;">${src}</td><td style="font-family:var(--font-mono);color:var(--muted2);font-size:10px;">${type}</td><td style="font-size:10px;color:var(--muted);">${note}</td></tr>`;
	});
	html+=`</tbody></table></div>`;
	});
	document.getElementById('schema-map-content').innerHTML=html;
	}

	// ═══════════════════════════════════════════════════════
	// PYTHON CODE
	// ═══════════════════════════════════════════════════════
	function buildPythonCode(){
	const code=`<span class="py-cmt">#!/usr/bin/env python3</span>
	<span class="py-cmt">"""
	PolicyBridge — Bronze Layer MySQL Loader
	Phase 1: Loads submission JSON into all bronze tables
	Phase 2: Will be called by Step Functions / Lambda

	Usage: python bronze_loader.py SUB-2025-XXXXX.json
	Requires: pip install mysql-connector-python
	"""</span>
	<span class="py-kw">import</span> json, sys, hashlib, logging
	<span class="py-kw">from</span> datetime <span class="py-kw">import</span> datetime
	<span class="py-kw">import</span> mysql.connector
	<span class="py-kw">from</span> mysql.connector <span class="py-kw">import</span> Error

	<span class="py-cmt"># ── Configuration ─────────────────────────────────────</span>
	DB_CONFIG = {
	<span class="py-str">"host"</span>: <span class="py-str">"localhost"</span>,
	<span class="py-str">"port"</span>: <span class="py-num">3306</span>,
	<span class="py-str">"user"</span>: <span class="py-str">"root"</span>,
	<span class="py-str">"password"</span>: <span class="py-str">"root@123"</span>,
	<span class="py-str">"database"</span>: <span class="py-str">"btvbbpqhvnttzvptguj3"</span>, <span class="py-cmt"># Clever Cloud DB (or 'bronze' locally)</span>
	<span class="py-str">"charset"</span>: <span class="py-str">"utf8mb4"</span>,
	<span class="py-str">"autocommit"</span>: <span class="py-kw">False</span>,
	}

	<span class="py-cmt"># ── Logger ─────────────────────────────────────────────</span>
	logging.basicConfig(level=logging.INFO, format=<span class="py-str">"%(asctime)s [%(levelname)s] %(message)s"</span>)
	log = logging.getLogger(<span class="py-str">"bronze_loader"</span>)

	<span class="py-cmt"># ── Main Loader Class ──────────────────────────────────</span>
	<span class="py-kw">class</span> <span class="py-cls">BronzeLoader</span>:
	<span class="py-kw">def</span> <span class="py-fn">__init__</span>(self, config=DB_CONFIG):
	self.config = config
	self.conn = <span class="py-kw">None</span>
	self.cur = <span class="py-kw">None</span>

	<span class="py-kw">def</span> <span class="py-fn">connect</span>(self):
	<span class="py-kw">try</span>:
	self.conn = mysql.connector.connect(**self.config)
	self.cur = self.conn.cursor()
	log.info(<span class="py-str">f"Connected → {self.config['host']}:{self.config['port']}/{self.config['database']}"</span>)
	<span class="py-kw">except</span> Error <span class="py-kw">as</span> e:
	log.error(<span class="py-str">f"Connection failed: {e}"</span>)
	<span class="py-kw">raise</span>

	<span class="py-kw">def</span> <span class="py-fn">disconnect</span>(self):
	<span class="py-kw">if</span> self.cur: self.cur.close()
	<span class="py-kw">if</span> self.conn: self.conn.close()

	<span class="py-kw">def</span> <span class="py-fn">load</span>(self, json_path: str):
	<span class="py-kw">with</span> open(json_path) <span class="py-kw">as</span> f:
	data = json.load(f)
	sub = data[<span class="py-str">"submission"</span>]
	now = datetime.now().strftime(<span class="py-str">"%Y-%m-%d %H:%M:%S"</span>)

	<span class="py-kw">try</span>:
	broker_id = self.<span class="py-fn">_upsert_broker</span>(sub[<span class="py-str">"broker"</span>], now)
	insured_id = self.<span class="py-fn">_insert_insured</span>(sub[<span class="py-str">"insured"</span>], now)
	property_id = self.<span class="py-fn">_insert_property</span>(sub[<span class="py-str">"property"</span>], insured_id, now)
	self.<span class="py-fn">_insert_submission</span>(sub, broker_id, insured_id, property_id, data, now)
	self.<span class="py-fn">_insert_attachments</span>(sub, now)
	self.<span class="py-fn">_insert_pipeline_log</span>(sub[<span class="py-str">"submission_id"</span>], now)
	self.conn.commit()
	log.info(<span class="py-str">f"✅ {sub['submission_id']} committed to bronze"</span>)
	<span class="py-kw">except</span> Exception <span class="py-kw">as</span> e:
	self.conn.rollback()
	log.error(<span class="py-str">f"❌ Rollback: {e}"</span>)
	<span class="py-kw">raise</span>

	<span class="py-kw">def</span> <span class="py-fn">_upsert_broker</span>(self, b, now):
	sql = <span class="py-str">"""
	INSERT INTO bronze_brokers
	(broker_code, broker_name, contact_email, state_code, is_active, created_at, updated_at)
	VALUES (%s, %s, %s, %s, 1, %s, %s)
	ON DUPLICATE KEY UPDATE
	broker_name=VALUES(broker_name),
	contact_email=VALUES(contact_email),
	updated_at=NOW()
	"""</span>
	self.cur.execute(sql, (b[<span class="py-str">"broker_code"</span>], b[<span class="py-str">"name"</span>], b[<span class="py-str">"contact_email"</span>],
	b.get(<span class="py-str">"state_code"</span>), now, now))
	self.cur.execute(<span class="py-str">"SELECT broker_id FROM bronze_brokers WHERE broker_code=%s"</span>, (b[<span class="py-str">"broker_code"</span>],))
	<span class="py-kw">return</span> self.cur.fetchone()[<span class="py-num">0</span>]

	<span class="py-kw">def</span> <span class="py-fn">_insert_insured</span>(self, ins, now):
	sql = <span class="py-str">"""
	INSERT INTO bronze_insureds
	(full_name, dob, ssn_hash, email, phone,
	street, city, state_code, zip, country, created_at, updated_at)
	VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)
	"""</span>
	addr = ins[<span class="py-str">"address"</span>]
	self.cur.execute(sql, (
	ins[<span class="py-str">"full_name"</span>], ins.get(<span class="py-str">"dob"</span>), ins[<span class="py-str">"ssn_hash"</span>],
	ins.get(<span class="py-str">"email"</span>), ins.get(<span class="py-str">"phone"</span>),
	addr.get(<span class="py-str">"street"</span>), addr.get(<span class="py-str">"city"</span>),
	addr.get(<span class="py-str">"state_code"</span>), addr.get(<span class="py-str">"zip"</span>),
	addr.get(<span class="py-str">"country"</span>, <span class="py-str">"US"</span>), now, now))
	<span class="py-kw">return</span> self.cur.lastrowid

	<span class="py-kw">def</span> <span class="py-fn">_insert_property</span>(self, prop, insured_id, now):
	sql = <span class="py-str">"""
	INSERT INTO bronze_properties
	(insured_id, street, city, state_code, zip, country,
	property_type, year_built, square_footage,
	construction_type, roof_type, roof_year, occupancy,
	num_stories, num_units,
	inspection_report_s3_uri, photos_s3_uri, created_at, updated_at)
	VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)
	"""</span>
	addr = prop[<span class="py-str">"address"</span>]
	ns = prop.get(<span class="py-str">"num_stories"</span>)
	<span class="py-kw">try</span>: ns = int(ns)
	<span class="py-kw">except</span>: ns = <span class="py-kw">None</span>
	self.cur.execute(sql, (
	insured_id, addr.get(<span class="py-str">"street"</span>), addr.get(<span class="py-str">"city"</span>),
	addr.get(<span class="py-str">"state_code"</span>), addr.get(<span class="py-str">"zip"</span>), <span class="py-str">"US"</span>,
	prop.get(<span class="py-str">"property_type"</span>), prop.get(<span class="py-str">"year_built"</span>),
	prop.get(<span class="py-str">"square_footage"</span>), prop.get(<span class="py-str">"construction_type"</span>),
	prop.get(<span class="py-str">"roof_type"</span>), prop.get(<span class="py-str">"roof_year"</span>),
	prop.get(<span class="py-str">"occupancy"</span>), ns, prop.get(<span class="py-str">"num_units"</span>, <span class="py-num">1</span>),
	prop.get(<span class="py-str">"inspection_report_s3_uri"</span>), prop.get(<span class="py-str">"photos_s3_uri"</span>), now, now))
	<span class="py-kw">return</span> self.cur.lastrowid

	<span class="py-kw">def</span> <span class="py-fn">_insert_submission</span>(self, sub, broker_id, insured_id, property_id, full_data, now):
	sql = <span class="py-str">"""
	INSERT INTO bronze_submissions
	(submission_id, broker_id, insured_id, property_id,
	coverage_type_code, requested_coverage_limit, requested_deductible,
	s3_uri, raw_payload, file_format,
	submitted_at, received_at, pipeline_status, created_at, updated_at)
	VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,'JSON',%s,%s,'RECEIVED',%s,%s)
	"""</span>
	pr = sub[<span class="py-str">"policy_request"</span>]
	self.cur.execute(sql, (
	sub[<span class="py-str">"submission_id"</span>], broker_id, insured_id, property_id,
	pr.get(<span class="py-str">"coverage_type"</span>), pr.get(<span class="py-str">"requested_coverage_limit"</span>),
	pr.get(<span class="py-str">"requested_deductible"</span>),
	full_data.get(<span class="py-str">"bronze_db_targets"</span>, {}).get(<span class="py-str">"s3_uri"</span>, <span class="py-str">""</span>),
	json.dumps(full_data)[:65000], now, now, now, now))

	<span class="py-kw">def</span> <span class="py-fn">_insert_attachments</span>(self, sub, now):
	prop = sub[<span class="py-str">"property"</span>]
	rows = [
	(sub[<span class="py-str">"submission_id"</span>], <span class="py-str">"inspection_report"</span>,
	<span class="py-str">f"inspection_report_{sub['submission_id']}.pdf"</span>,
	prop.get(<span class="py-str">"inspection_report_s3_uri"</span>), <span class="py-str">"PDF"</span>, now),
	(sub[<span class="py-str">"submission_id"</span>], <span class="py-str">"property_photos"</span>,
	<span class="py-str">f"photos_{sub['submission_id']}.zip"</span>,
	prop.get(<span class="py-str">"photos_s3_uri"</span>), <span class="py-str">"ZIP"</span>, now),
	]
	sql = <span class="py-str">"""INSERT INTO bronze_submission_attachments
	(submission_id, attachment_type, file_name, s3_uri, file_format, uploaded_at)
	VALUES (%s,%s,%s,%s,%s,%s)"""</span>
	self.cur.executemany(sql, rows)

	<span class="py-kw">def</span> <span class="py-fn">_insert_pipeline_log</span>(self, sub_id, now):
	agents = [
	(sub_id, <span class="py-str">"SSN_Agent"</span>, <span class="py-num">1</span>, <span class="py-str">"QUEUED"</span>, now),
	(sub_id, <span class="py-str">"Property_Risk_Agent"</span>, <span class="py-num">2</span>, <span class="py-str">"PENDING"</span>, now),
	(sub_id, <span class="py-str">"Underwriting_Agent"</span>, <span class="py-num">3</span>, <span class="py-str">"PENDING"</span>, now),
	(sub_id, <span class="py-str">"ML_Pricing_Agent"</span>, <span class="py-num">4</span>, <span class="py-str">"PENDING"</span>, now),
	(sub_id, <span class="py-str">"Issuance_Agent"</span>, <span class="py-num">5</span>, <span class="py-str">"PENDING"</span>, now),
	]
	sql = <span class="py-str">"""INSERT INTO bronze_pipeline_agent_log
	(submission_id, agent_code, pipeline_step, status, created_at)
	VALUES (%s, %s, %s, %s, %s)"""</span>
	self.cur.executemany(sql, agents)

	<span class="py-cmt"># ── Entry Point ────────────────────────────────────────</span>
	<span class="py-kw">if</span> __name__ == <span class="py-str">"__main__"</span>:
	path = sys.argv[<span class="py-num">1</span>] <span class="py-kw">if</span> len(sys.argv) > <span class="py-num">1</span> <span class="py-kw">else</span> <span class="py-kw">None</span>
	<span class="py-kw">if not</span> path:
	print(<span class="py-str">"Usage: python bronze_loader.py <path_to_submission.json>"</span>)
	sys.exit(<span class="py-num">1</span>)
	loader = <span class="py-cls">BronzeLoader</span>()
	loader.connect()
	<span class="py-kw">try</span>:
	loader.load(path)
	<span class="py-kw">finally</span>:
	loader.disconnect()`;
	document.getElementById('python-code').innerHTML=code;
	}

	function copyPython(){const txt=document.getElementById('python-code').innerText;navigator.clipboard?.writeText(txt).then(()=>addLog('info','Python script copied'));}
	function downloadPython(){const b=new Blob([document.getElementById('python-code').innerText],{type:'text/plain'});const u=URL.createObjectURL(b);const a=document.createElement('a');a.href=u;a.download='bronze_loader.py';a.click();URL.revokeObjectURL(u);}

	// ═══════════════════════════════════════════════════════
	// CONNECTORS HUB
	// ═══════════════════════════════════════════════════════
	const CONNECTORS=[
	{cat:'database',name:'MySQL / MariaDB',logo:'🐬',desc:'Clever Cloud MySQL (HF) · bronze_/silver_/gold_* prefixed tables · or localhost:3306 locally.',tags:['db'],connected:true},
	{cat:'database',name:'PostgreSQL',logo:'🐘',desc:'Alternative RDBMS for Silver/Gold layers. psycopg2 driver.',tags:['db'],connected:false},
	{cat:'database',name:'MongoDB',logo:'🍃',desc:'Store semi-structured raw payloads. Phase 1 alternate Bronze store.',tags:['db'],connected:false},
	{cat:'database',name:'Snowflake',logo:'❄️',desc:'Cloud DWH for Gold layer analytics. Medallion architecture native.',tags:['db','cloud'],connected:false},
	{cat:'cloud',name:'Amazon S3',logo:'🪣',desc:'Bronze/Silver/Gold object store. pcins-bronze, pcins-silver, pcins-gold buckets.',tags:['cloud','file'],connected:false},
	{cat:'cloud',name:'AWS Step Functions',logo:'⚡',desc:'Orchestrator for 5-agent pipeline. State machine per submission.',tags:['cloud'],connected:false},
	{cat:'cloud',name:'AWS Lambda',logo:'λ',desc:'Serverless agent execution. Each agent as a Lambda function.',tags:['cloud'],connected:false},
	{cat:'cloud',name:'Amazon SageMaker',logo:'🤖',desc:'ML model endpoint for Agent 4 pricing. XGBoost + GLM ensemble.',tags:['cloud','api'],connected:false},
	{cat:'cloud',name:'Amazon SES',logo:'📧',desc:'Email delivery for policy documents and adverse action notices.',tags:['cloud','api'],connected:false},
	{cat:'api',name:'REST API / Webhook',logo:'🔗',desc:'Ingest submissions from external broker portals and agency management systems.',tags:['api'],connected:false},
	{cat:'api',name:'ACORD XML / JSON',logo:'📄',desc:'Standard insurance data exchange format. AL3, ACORD 130, 140 forms.',tags:['api','file'],connected:false},
	{cat:'api',name:'Experian Credit',logo:'📊',desc:'Credit bureau pull for KYC/SSN validation agent. Score + report.',tags:['api'],connected:false},
	{cat:'api',name:'OFAC / SDN API',logo:'🛡️',desc:'Sanctions screening. SDN, Consolidated, PEP, Adverse Media lists.',tags:['api'],connected:false},
	{cat:'api',name:'FEMA Flood API',logo:'🌊',desc:'Flood zone determination. Zone X, AE, VE per property address.',tags:['api'],connected:false},
	{cat:'file',name:'CSV / Excel Upload',logo:'📋',desc:'Batch submission ingestion from spreadsheets. Historical data load for Bronze.',tags:['file'],connected:false},
	{cat:'file',name:'PDF Parser',logo:'📑',desc:'Extract data from inspection reports, appraisals, loss runs via OCR+NLP.',tags:['file','api'],connected:false},
	{cat:'file',name:'JSON File Watch',logo:'📂',desc:'Watch D:\\Personal\\Usecase\\Jsons\\ for new submission files. Auto-load to Bronze.',tags:['file'],connected:false},
	{cat:'insurance',name:'Applied EPIC',logo:'🏢',desc:'Agency management system. Pull submissions and policy data directly.',tags:['api'],connected:false},
	{cat:'insurance',name:'Vertafore AMS360',logo:'🏬',desc:'Broker AMS integration. Bi-directional submission sync.',tags:['api'],connected:false},
	{cat:'insurance',name:'Duck Creek',logo:'🦆',desc:'Policy admin system. Issue policies directly from Issuance Agent output.',tags:['api'],connected:false},
	{cat:'insurance',name:'Majesco',logo:'⚙️',desc:'P&C core system. Bronze → Majesco policy lifecycle integration.',tags:['api'],connected:false},
	{cat:'stream',name:'Apache Kafka',logo:'☕',desc:'High-volume submission streaming. Real-time Bronze ingest pipeline.',tags:['stream'],connected:false},
	{cat:'stream',name:'Amazon Kinesis',logo:'🌀',desc:'AWS-native streaming. Step Functions trigger on submission events.',tags:['stream','cloud'],connected:false},
	{cat:'stream',name:'Apache Spark',logo:'💥',desc:'Batch processing for historical data load. Bronze medallion ETL.',tags:['stream'],connected:false},
	];

	function buildConnectors(){
	renderConnectors(CONNECTORS);
	}

	function filterCat(cat,btn){
	document.querySelectorAll('.cat-btn').forEach(b=>b.classList.remove('active'));
	btn.classList.add('active');
	renderConnectors(cat==='all'?CONNECTORS:CONNECTORS.filter(c=>c.cat===cat\|\|c.tags.includes(cat)));
	}

	function renderConnectors(list){
	const g=document.getElementById('conn-grid');
	g.innerHTML=list.map(c=>`
	<div class="conn-card ${c.connected?'connected':''}">
	<div class="conn-top"><div class="conn-logo" style="background:var(--bg4);">${c.logo}</div><div><div class="conn-name">${c.name}</div><div class="conn-cat">${c.cat}</div></div></div>
	<div class="conn-desc">${c.desc}</div>
	<div class="conn-tags">${c.tags.map(t=>`<span class="conn-tag tag-${t}">${t}</span>`).join('')}</div>
	<div class="conn-status-row">
	${c.connected?'<span class="conn-badge-on">● Connected</span>':'<span class="conn-badge-off">○ Not Connected</span>'}
	<button class="conn-action ${c.connected?'ca-manage':'ca-connect'}" onclick="connAction('${c.name}',${c.connected})">${c.connected?'Manage':'Connect'}</button>
	</div>
	</div>`).join('');
	}

	function connAction(name,isConn){
	addLog('info',`${isConn?'Managing':'Connecting to'}: ${name}`);
	document.getElementById('sb-msg').textContent=`${isConn?'Managing':'Configuring'}: ${name}`;
	}

	// ═══════════════════════════════════════════════════════
	// AGENT PIPELINE TAB
	// ═══════════════════════════════════════════════════════
	const AGENTS=[
	{step:1,code:'SSN_Agent',name:'SSN Identity Validation',icon:'🔍',color:'#0070cc',phase:1,layer:'SILVER',input:'Bronze submission JSON',output:'silver_ssn_decisions + silver_kyc tables',tools:'Experian API, OFAC API, IsolationForest ML',est:'8–12s'},
	{step:2,code:'Property_Risk_Agent',name:'Property Risk Assessment',icon:'🏠',color:'#008844',phase:1,layer:'SILVER',input:'SSN decision JSON',output:'silver_property_risk_assessments',tools:'FEMA API, Satellite Imagery, NLP Inspection Parser',est:'12–18s'},
	{step:3,code:'Underwriting_Agent',name:'Underwriting Validation',icon:'📋',color:'#8860ff',phase:1,layer:'SILVER',input:'Property risk JSON',output:'silver_underwriting_decisions',tools:'Rules Engine, Reinsurance Treaty API',est:'6–9s'},
	{step:4,code:'ML_Pricing_Agent',name:'ML Premium Pricing',icon:'💰',color:'#b8860b',phase:1,layer:'SILVER',input:'UW decision JSON',output:'silver_ml_pricing_decisions',tools:'SageMaker Endpoint: XGBoost+GLM Ensemble, SHAP',est:'5–8s'},
	{step:5,code:'Issuance_Agent',name:'Policy Issuance',icon:'✅',color:'#cc3300',phase:1,layer:'SILVER',input:'ML pricing JSON',output:'silver_issued_policies + documents',tools:'Document Generator, SES Email, SNS Events',est:'4–6s'},
	];

	function buildAgentPipeline(){
	const flow=document.getElementById('pipeline-flow');
	flow.innerHTML=AGENTS.map((a,i)=>`
	<div class="pf-agent">
	<div class="agent-box phase2" style="position:relative;">
	<span class="agent-badge ab-p2">Phase 2</span>
	<div class="agent-icon-wrap" style="background:${a.color}20;border:1px solid ${a.color}40;">${a.icon}</div>
	<div class="agent-step">Agent ${a.step}</div>
	<div class="agent-name">${a.name}</div>
	<div class="agent-code">${a.code}</div>
	</div>
	</div>
	${i<AGENTS.length-1?'<div class="pf-connector"><div class="pf-line"></div></div>':''}`).join('');

	// Add Phase 1 bronze box at start
	flow.insertAdjacentHTML('afterbegin',`
	<div class="pf-agent">
	<div class="agent-box active" style="position:relative;">
	<span class="agent-badge ab-p1">Phase 1</span>
	<div class="agent-icon-wrap" style="background:rgba(205,127,50,0.2);border:1px solid rgba(205,127,50,0.4);">📥</div>
	<div class="agent-step">Trigger</div>
	<div class="agent-name">Bronze Loader</div>
	<div class="agent-code">BronzeLoader</div>
	</div>
	</div>
	<div class="pf-connector"><div class="pf-line active"></div></div>`);

	const grid=document.getElementById('agent-detail-grid');
	grid.innerHTML=AGENTS.map(a=>`
	<div class="agent-detail-card">
	<div class="adc-header">
	<div class="adc-icon" style="background:${a.color}20;border:1px solid ${a.color}30;">${a.icon}</div>
	<div><div class="adc-name">Agent ${a.step}: ${a.name}</div><div class="adc-step">${a.code}</div></div>
	<span class="pill pill-muted" style="margin-left:auto;">Phase ${a.phase}</span>
	</div>
	<div class="adc-prop"><span class="adc-pk">Layer</span><span class="adc-pv">${a.layer}</span></div>
	<div class="adc-prop"><span class="adc-pk">Input</span><span class="adc-pv">${a.input}</span></div>
	<div class="adc-prop"><span class="adc-pk">Output</span><span class="adc-pv">${a.output}</span></div>
	<div class="adc-prop"><span class="adc-pk">Tools</span><span class="adc-pv">${a.tools}</span></div>
	<div class="adc-prop"><span class="adc-pk">Est. Duration</span><span class="adc-pv">${a.est}</span></div>
	</div>`).join('');
	}

	function buildAgentPython(){
	const code=`<span class="py-cmt">#!/usr/bin/env python3</span>
	<span class="py-cmt">"""
	PolicyBridge — Base Agent Scaffold (Phase 2)
	Each of the 5 AI agents inherits from this base class.
	Deployed as AWS Lambda + Step Functions state machine.
	"""</span>
	<span class="py-kw">import</span> json, logging, boto3
	<span class="py-kw">from</span> abc <span class="py-kw">import</span> ABC, abstractmethod
	<span class="py-kw">from</span> datetime <span class="py-kw">import</span> datetime
	<span class="py-kw">import</span> mysql.connector

	<span class="py-kw">class</span> <span class="py-cls">BaseAgent</span>(ABC):
	<span class="py-dec">@property</span>
	<span class="py-dec">@abstractmethod</span>
	<span class="py-kw">def</span> <span class="py-fn">agent_code</span>(self) -> str: ...
	<span class="py-dec">@property</span>
	<span class="py-dec">@abstractmethod</span>
	<span class="py-kw">def</span> <span class="py-fn">pipeline_step</span>(self) -> int: ...

	<span class="py-kw">def</span> <span class="py-fn">run</span>(self, submission_id: str, input_s3_uri: str) -> dict:
	self.<span class="py-fn">_update_log</span>(submission_id, <span class="py-str">"INVOKED"</span>)
	<span class="py-kw">try</span>:
	payload = self.<span class="py-fn">_load_from_s3</span>(input_s3_uri)
	result = self.<span class="py-fn">process</span>(submission_id, payload)
	out_uri = self.<span class="py-fn">_save_to_s3</span>(result, submission_id)
	self.<span class="py-fn">_update_log</span>(submission_id, <span class="py-str">"COMPLETED"</span>, out_uri)
	<span class="py-kw">return</span> {<span class="py-str">"status"</span>: <span class="py-str">"COMPLETED"</span>, <span class="py-str">"output_s3_uri"</span>: out_uri}
	<span class="py-kw">except</span> Exception <span class="py-kw">as</span> e:
	self.<span class="py-fn">_update_log</span>(submission_id, <span class="py-str">"FAILED"</span>, error=str(e))
	<span class="py-kw">raise</span>

	<span class="py-dec">@abstractmethod</span>
	<span class="py-kw">def</span> <span class="py-fn">process</span>(self, submission_id: str, payload: dict) -> dict:
	<span class="py-str">"""Agent-specific logic goes here"""</span> ...

	<span class="py-kw">def</span> <span class="py-fn">_update_log</span>(self, sub_id, status, out_uri=<span class="py-kw">None</span>, error=<span class="py-kw">None</span>):
	<span class="py-cmt"># Updates bronze_pipeline_agent_log</span>
	<span class="py-kw">pass</span>

	<span class="py-cmt"># ── Example: SSN Identity Validation Agent ─────────────</span>
	<span class="py-kw">class</span> <span class="py-cls">SSNAgent</span>(<span class="py-cls">BaseAgent</span>):
	agent_code = <span class="py-str">"SSN_Agent"</span>
	pipeline_step = <span class="py-num">1</span>

	<span class="py-kw">def</span> <span class="py-fn">process</span>(self, submission_id, payload):
	insured = payload[<span class="py-str">"submission"</span>][<span class="py-str">"insured"</span>]
	<span class="py-cmt"># 1. OFAC screening</span>
	ofac_result = self.<span class="py-fn">_check_ofac</span>(insured[<span class="py-str">"full_name"</span>])
	<span class="py-cmt"># 2. Credit bureau pull</span>
	credit = self.<span class="py-fn">_pull_credit</span>(insured[<span class="py-str">"ssn_hash"</span>])
	<span class="py-cmt"># 3. Fraud anomaly detection</span>
	fraud_score = self.<span class="py-fn">_fraud_score</span>(insured)
	<span class="py-cmt"># 4. Write results to silver_ssn_decisions</span>
	status = <span class="py-str">"SSN_PASS"</span> <span class="py-kw">if</span> all([
	ofac_result[<span class="py-str">"result"</span>] == <span class="py-str">"CLEAR"</span>,
	credit[<span class="py-str">"score"</span>] >= <span class="py-num">550</span>,
	fraud_score < <span class="py-num">0.70</span>
	]) <span class="py-kw">else</span> <span class="py-str">"SSN_FAIL"</span>
	<span class="py-kw">return</span> {<span class="py-str">"ssn_status"</span>: status, <span class="py-str">"ofac"</span>: ofac_result, <span class="py-str">"credit"</span>: credit, <span class="py-str">"fraud_score"</span>: fraud_score}`;
	document.getElementById('agent-python-code').innerHTML=code;
	}

	function copyAgentPython(){const t=document.getElementById('agent-python-code').innerText;navigator.clipboard?.writeText(t).then(()=>addLog('info','Agent scaffold copied'));}
	</script>
	</body>
	</html>