// ============================================================================
// Sandbox app shell — chrome (top nav, sidebar, view switching), guided tour,
// and the MAC chat dock. MAC posts to ATAAH's /chat/sandbox endpoint with the
// active trade (HVAC | GC) so the operator sees a persona-consistent reply.
// ============================================================================
const { useState, useRef, useEffect } = React;
// ----------------------------- LAUNCH OVERLAY --------------------------------
// Trade picker — drives the active demo company + MAC's system prompt.
// HVAC ('Aire Technology') and GC ('Riggs General Contracting') are
// the two C-Phase-1 personas; both reach the same /chat/sandbox endpoint
// on the ATAAH backend with the chosen trade.
const TRADE_CARDS = [
{
id: 'hvac',
name: 'HVAC Contractor',
company: 'Aire Technology, Inc.',
blurb: 'Florida HVAC contractor. Service + retrofit jobs, light AIA billing, equipment-heavy.',
job: 'JOB#41209 Lakeside HVAC Retrofit · $246,902 contract',
},
{
id: 'gc',
name: 'General Contractor',
company: 'Riggs General Contracting, LLC',
blurb: 'Florida GC. AIA G702/G703, retention, subs + lien waivers, larger crews.',
job: 'JOB#41310 Magnolia Park Townhomes Ph2 · $1.84M contract',
},
];
const SXLaunch = ({ onLaunch }) => {
const [trade, setTrade] = useState('hvac');
const [withTour, setWithTour] = useState(true);
return (
THE BUILDERS HARNESS
SANDBOX · LIVE MAC · DEMO DATA
PICK YOUR TRADE
Which contractor are you today?
Same harness, two trades. The sandbox flips between an HVAC specialist and a general contractor so you can see how the agents and queue adapt. You can ask MAC anything in the chat dock — live, not canned.
);
};
// ----------------------------- TOP NAV ---------------------------------------
const SXTopNav = ({ view, setView, openChat, restartTour }) => (
);
// ----------------------------- TOUR ------------------------------------------
const TOUR_STEPS = [
{ id: 'briefing-kpis', view: 'briefing', target: null,
title: '06:00 — your morning briefing.',
body: 'Cash position, AR aging, WIP, gross margin — all drafted by the harness against your live QBO and bank feeds. Status dots tell you what to look at first.' },
{ id: 'briefing-cta', view: 'briefing', target: null,
title: 'The 13-week cash forecast.',
body: 'agent.cfo runs this overnight. Weeks below your minimum target are flagged with ⨯. wk03 and wk04 need attention — see why.' },
{ id: 'queue-row', view: 'queue', target: 'first-row',
title: 'Five drafted actions.',
body: 'Every overnight agent run lands here. Tier 1 is routine, tier 4 is owner-only. Approve, reject, or click Edit to see the JSON payload that will post to QuickBooks.' },
{ id: 'job-detail', view: 'job', target: null,
title: 'A job under the hood.',
body: 'Budget vs. actual by phase. Recent activity (every approve, propose, sync). Retention math. Subs are amber — variance routes to the PM.' },
{ id: 'audit', view: 'audit', target: null,
title: 'The audit log is the receipt.',
body: 'Every approve, reject, edit, agent run, QBO sync writes one append-only row. UPDATE and DELETE are blocked at the DB layer. Bonded? Bond audit ready out of the box.' },
];
const Tour = ({ step, setView, onNext, onSkip }) => {
if (step == null) return null;
const s = TOUR_STEPS[step];
React.useEffect(() => { if (s) setView(s.view); }, [step]);
if (!s) return null;
return (
STEP {step + 1} / {TOUR_STEPS.length}
{s.title}
{s.body}
{TOUR_STEPS.map((_, i) => (
))}
{step === TOUR_STEPS.length - 1 ? 'Done · explore on your own' : 'Next →'}
);
};
// ----------------------------- MAC CHAT --------------------------------------
// The MAC persona + trade-specific system prompts live on the ATAAH backend
// at apps/api/chat/sandbox_routes.py — the sandbox just passes {trade,messages}
// and renders the reply.
const SANDBOX_API_BASE = 'https://app.thebuildersharness.com/chat/sandbox';
const SANDBOX_API_URL = SANDBOX_API_BASE;
const TRADE_GREETING = {
hvac: "Morning Tom. 5 in your queue — 2 awaiting you (#1039 variance + #1041 cfo digest). What do you want to look at?",
gc: "Morning Tom. 6 in your queue — 3 awaiting you (#1042 retention release · #1044 CO-008 · #1045 sub COI lapse). What do you want to look at?",
};
const TRADE_SUGGESTIONS = {
hvac: ['What is JOB#41209 looking like?', 'Draft a CO for 220V drop, $2400 mat + 6h', 'Why is wk04 below target?'],
gc: ['What is JOB#41310 looking like?', 'Draft a CO for window upgrade, $14,200', 'Retention status across active jobs'],
};
// Adapt /chat/sandbox/queue rows to the canned-approval shape so they
// can be merged into the existing `approvals` state and rendered by
// SXQueue / SXBriefing without code changes.
function adaptSessionRow(r) {
return {
id: r.id, // big number (90000+) — distinguishes from canned
kind: r.kind,
tier: 2,
department: r.kind.startsWith('co.') ? 'pm'
: r.kind.startsWith('ar.') ? 'ar'
: r.kind.startsWith('ap.') ? 'ap'
: 'other',
status: r.status,
summary: r.decision_notes || `(${r.kind})`,
amount: r.amount_cents ? `$${(r.amount_cents / 100).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}` : '—',
amount_cents: r.amount_cents || 0,
created_by: 'sandbox.mac',
at: 'this session',
payload: {},
dri: 'Tom Riggs',
_sandbox: true, // marker used by the approve handler + UI badge
};
}
const SXMacChat = ({ open, setOpen, data, trade, sessionId, setSessionId, onQueued }) => {
const [messages, setMessages] = useState([
{ role: 'assistant', content: TRADE_GREETING[trade] || TRADE_GREETING.hvac },
]);
const [input, setInput] = useState('');
const [busy, setBusy] = useState(false);
const scroll = useRef(null);
useEffect(() => { scroll.current?.scrollTo({ top: 1e9, behavior: 'smooth' }); }, [messages, open]);
async function send() {
const text = input.trim();
if (!text || busy) return;
const next = [...messages, { role: 'user', content: text }];
setMessages(next);
setInput('');
setBusy(true);
try {
const resp = await fetch(SANDBOX_API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
trade,
session_id: sessionId || null,
// Last 12 turns is plenty for context; keeps payload small + within
// /chat/sandbox's 40-message cap.
messages: next.slice(-12).map(m => ({ role: m.role, content: m.content })),
}),
});
if (!resp.ok) {
const detail = resp.status === 429
? "Too many messages — give MAC a few minutes."
: `MAC backend returned ${resp.status}. Try again in a moment.`;
setMessages([...next, { role: 'assistant', content: detail }]);
return;
}
const body = await resp.json();
// Latch the server-minted session_id on first call.
if (body.session_id && body.session_id !== sessionId) {
setSessionId(body.session_id);
try { sessionStorage.setItem('tbh-sandbox-session', body.session_id); } catch (e) {}
}
setMessages([...next, { role: 'assistant', content: (body.reply || '').trim() || '[empty reply]' }]);
// If MAC drafted something this turn, pull the live queue rows
// and merge them into the operator's approval list.
if (Array.isArray(body.queued_rows) && body.queued_rows.length > 0 && onQueued) {
onQueued(body.session_id || sessionId);
}
} catch (e) {
setMessages([...next, { role: 'assistant', content: 'Lost the node for a sec — try again.' }]);
} finally { setBusy(false); }
}
if (!open) {
return (
);
}
return (