// Excel / Spreadsheet + AI — the hero of this round.
// Native spreadsheet view inside Contro, with AI actively reading and
// editing cells live. Animated loop showing: planning → reading (row
// highlights sweep) → writing (cells flip to new values with diff pills)
// → summary.
function ExcelAIPage() {
// Phase loop: 0 plan, 1 reading, 2 writing, 3 summary
const [phase, setPhase] = React.useState(0);
const [readRow, setReadRow] = React.useState(-1); // row index being read
const [written, setWritten] = React.useState(new Set()); // row idx -> written
const [thoughts, setThoughts] = React.useState([]);
// Data model — a realistic cost-tracking sheet
const sheet = React.useMemo(() => ({
title: 'Harborview — cost tracking.xlsx',
path: 'Projects / Harborview / Financials',
tabs: ['Summary', 'Labor', 'Materials', 'Equipment', 'Subcontract'],
activeTab: 'Materials',
cols: ['SKU','Material','Qty','Unit','Unit $','Planned','Actual','Variance','Vendor','Updated'],
colWidths: [62, 180, 58, 50, 62, 78, 78, 70, 110, 78],
rows: [
{ c: ['SB-050','Rebar #5, 60ksi','48','ton','—','$41,280','$44,120','—','Atlantic Steel','Apr 18'],
edit: { 4: '$860', 7: '+6.9%', 9: 'Apr 21' }, note: 'Looked up live spot price; actual invoice above plan' },
{ c: ['CM-040','Type IL cement','480','bag','$9.40','$4,512','$4,512','0.0%','Brannigan','Apr 12'] },
{ c: ['LM-210','2×10 SPF #2 KD','240','ea','$18.20','$4,368','$4,040','−7.5%','Pine Ridge','Apr 15'] },
{ c: ['IN-015','Mineral wool R-23','64','bdl','$74.10','$4,742','—','—','Rockwool NE','Apr 10'],
edit: { 6: '$4,742', 7: '0.0%', 9: 'Apr 21' }, note: 'Pulled from receipt PDF · 64/64 received' },
{ c: ['GL-220','Low-E IGU 4×6','28','unit','$612','—','—','—','Clearline','—'],
edit: { 5: '$17,136', 7: 'pending', 9: 'Apr 21' }, note: 'Quote attached to CO-017 · owner approved Tue' },
{ c: ['EL-110','MC cable 12/2','1,500','ft','$1.14','$1,710','$1,710','0.0%','Atlas Elec.','Apr 14'] },
{ c: ['PL-330','PEX-A 3/4"','800','ft','$2.10','$1,680','$1,680','0.0%','Uponor','Apr 11'] },
{ c: ['HD-092','Anchor bolt 5/8','120','ea','$4.80','$576','$588','+2.1%','Simpson','Apr 16'] },
{ c: ['FN-410','Finish tile matte','1,800','sqft','$6.40','$11,520','—','—','—','—'],
edit: { 8: 'Meridian Tile', 9: 'Apr 21' }, note: 'Found 3 quotes — cheapest w/ approved spec' },
{ c: ['MB-050','TPO roof 60mil','4,200','sqft','$3.80','$15,960','—','—','Northern','Apr 19'] },
{ c: ['DW-120','Drywall 5/8" Type X','2,100','sheet','$18.90','$39,690','$13,608','−65.7%','USG','Apr 20'],
edit: { 7: '−65.7%', 9: 'Apr 21' }, note: 'Partial receipt — flag remaining 1,380 sheets' },
],
}), []);
// Which rows the AI is "editing" this pass
const editRows = React.useMemo(
() => sheet.rows.map((r, i) => r.edit ? i : -1).filter(i => i >= 0),
[sheet.rows]
);
// Drive the loop
React.useEffect(() => {
let t;
const schedule = (ms, fn) => { t = setTimeout(fn, ms); };
if (phase === 0) {
setThoughts(['Opening sheet', 'Indexing columns A–J', 'Matching receipts + quotes']);
schedule(1600, () => setPhase(1));
} else if (phase === 1) {
setThoughts((th) => [...th, 'Scanning 11 rows for missing actuals']);
let i = 0;
const step = () => {
setReadRow(i);
i++;
if (i < sheet.rows.length) t = setTimeout(step, 160);
else t = setTimeout(() => { setReadRow(-1); setPhase(2); }, 450);
};
step();
} else if (phase === 2) {
setThoughts((th) => [...th, `Writing ${editRows.length} updates to cells`]);
let i = 0;
const step = () => {
const idx = editRows[i];
setWritten((s) => new Set([...s, idx]));
i++;
if (i < editRows.length) t = setTimeout(step, 420);
else t = setTimeout(() => setPhase(3), 900);
};
step();
} else if (phase === 3) {
setThoughts((th) => [...th, 'Done · 6 updates ready to review']);
schedule(3200, () => {
setThoughts([]); setWritten(new Set()); setPhase(0);
});
}
return () => clearTimeout(t);
}, [phase, editRows, sheet.rows.length]);
return (
{/* Center — sheet */}
{/* Right — AI panel */}
);
}
function ExcelFileHeader({ sheet, phase }) {
const saving = phase === 2;
return (
X
{sheet.title}
· {sheet.path}
Linked to OneDrive · Two-way sync · Last edited by you 2m ago
{/* Presence / saving status */}
{saving ? 'Saving to Excel…' : 'Saved'}
Share
);
}
function PresenceDot({ c, label, off }) {
return (
{label}
);
}
function ExcelToolbar() {
// Simplified ribbon
const tools = ['▤ File','▦ Home','▫ Insert','Σ Formulas','◧ Data','⎋ Review','⌕ View'];
return (
{tools.map((t, i) => (
{t}
))}
Calibri · 11 · $ · % · ,
);
}
function ExcelTabs({ tabs, active }) {
return (
{tabs.map((t) => (
{t}
))}
{cellRef}
fx
{formula}
{phase === 1 && (
Contro is reading
)}
{phase === 2 && (
Contro is writing · {writtenCount} of 6
)}
);
}
function ExcelGrid({ sheet, readRow, written, phase }) {
return (
{/* Column headers */}
◢
{sheet.cols.map((col, i) => (
{String.fromCharCode(65 + i)}
{col}
))}
{/* Rows */}
{sheet.rows.map((r, ri) => {
const reading = readRow === ri;
const isWritten = written.has(ri);
const wasEdit = Boolean(r.edit);
return (
{/* Row number */}
{ri + 2}
{/* Cells */}
{r.c.map((val, ci) => {
const edited = wasEdit && r.edit[ci] != null && isWritten;
const shown = edited ? r.edit[ci] : val;
const isNum = /^(\$|−|\+|\d)/.test(String(shown)) || /%$/.test(String(shown));
return (
{shown}
{edited && (
)}
);
})}
{/* Reading highlight — scanning bar */}
{reading && (
)}
);
})}
{/* Footer totals */}
TOTAL
$143,174
$70,258
−51.0%
{label}
·
Sheet1 of 5
Σ sum 70,258 · avg 8,782 · count 11
100%
);
}
// ── AI panel ──────────────────────────────────────────────────
function AIPanel({ phase, thoughts, edits, sheet, written }) {
return (
{/* Header */}
C
{(phase === 1 || phase === 2) && (
)}
Contro
{phase === 0 && 'Planning update pass'}
{phase === 1 && 'Reading your spreadsheet'}
{phase === 2 && 'Editing cells'}
{phase === 3 && 'Ready for review'}
{/* The user's instruction */}
You asked
Reconcile Harborview materials with today's receipts and the new Low-E quote. Fill missing actuals and flag overruns.
{/* Thinking stream */}
Thinking
{thoughts.length}
{thoughts.map((t, i) => {
const last = i === thoughts.length - 1;
return (
{t}{last && (phase === 1 || phase === 2) && (
)}
);
})}
{/* Edits list / diff review */}
Proposed edits
{edits}
{phase === 3 && ready}
{sheet.rows.map((r, ri) => {
if (!r.edit) return null;
const applied = written.has(ri);
return (
row {ri + 2}
{r.c[1]}
{applied ? '● written' : '○ queued'}
{r.note}
{Object.entries(r.edit).map(([ci, v]) => (
{String.fromCharCode(65 + Number(ci))}: {v}
))}
);
})}
{phase === 3 && (
Accept all
Review one by one
)}
{/* Input */}
Ask about this sheet, or give an instruction…
↵
{/* animations */}