Spreadsheet

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sheet</title>
<style>
/* ===== Tunable visual constants ===== */
:root{--cols:26;--rows:100;--cell-w:108px;--row-h:28px;--blue:#1a73e8;--grid:#e6e9ed;--head:#f8f9fa;--text:#202124;--muted:#5f6368;--error:#d93025}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--text);font:13px/1.35 Arial,sans-serif;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column}.top{height:54px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #e1e4e8;gap:20px}.brand{font-size:19px;font-weight:600;color:#3c4043}.actions{display:flex;gap:5px}.actions button{height:30px;background:white;border:1px solid #dadce0;border-radius:4px;padding:0 10px;color:#3c4043;cursor:pointer}.actions button:hover{background:#f1f3f4}.hint{margin-left:auto;color:#73777b;font-size:12px}.formula{height:44px;display:flex;align-items:center;border-bottom:1px solid #dadce0;padding:0 18px;gap:12px}.namebox{width:56px;height:28px;border:1px solid #dadce0;border-radius:3px;text-align:center;line-height:26px;font-weight:600;color:#3c4043}.fx{font-size:15px;color:#70757a;font-family:serif;font-style:italic}.formula input{height:29px;flex:1;border:1px solid transparent;outline:none;padding:0 8px;font:13px Arial;border-radius:3px}.formula input:focus{border-color:#8ab4f8}.sheet-wrap{flex:1;overflow:auto;background:white}table{border-collapse:separate;border-spacing:0;table-layout:fixed}th,td{height:var(--row-h);min-width:var(--cell-w);width:var(--cell-w);border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;background:#fff}th{background:var(--head);font-weight:500;color:#5f6368;text-align:center;position:sticky;top:0;z-index:3;border-bottom:1px solid #cfd3d7}th.corner{min-width:46px;width:46px;left:0;z-index:5}th.rowhead{min-width:46px;width:46px;left:0;z-index:4;background:var(--head);font-weight:400}td.selected{box-shadow:inset 0 0 0 2px var(--blue);z-index:2;overflow:visible}td.selected:after{content:"";position:absolute;width:6px;height:6px;background:var(--blue);right:-3px;bottom:-3px;z-index:4}td.num{text-align:right}td.error{color:var(--error);font-weight:500}td.editing{padding:0;overflow:visible;z-index:7}td input.cell-edit{width:calc(100% + 2px);height:calc(100% + 2px);margin:-1px;border:2px solid var(--blue);outline:none;padding:3px 5px;font:13px Arial;position:absolute;left:0;top:0;background:#fff}.context{position:fixed;display:none;z-index:20;background:#fff;border:1px solid #dadce0;box-shadow:0 3px 10px #0002;border-radius:4px;padding:4px 0;min-width:155px}.context button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 13px;cursor:pointer;font-size:13px}.context button:hover{background:#f1f3f4}
</style></head><body><div class="app"><div class="top"><div class="brand">Sheet</div><div class="actions"><button id="insRow">+ Row</button><button id="delRow">− Row</button><button id="insCol">+ Column</button><button id="delCol">− Column</button></div><div class="hint">Double-click to edit · Enter / Tab to commit · Ctrl + S saves</div></div><div class="formula"><div class="namebox" id="nameBox">A1</div><span class="fx">fx</span><input id="formulaInput" aria-label="Formula bar" spellcheck="false"></div><div class="sheet-wrap"><table id="grid"><thead><tr id="columns"><th class="corner"></th></tr></thead><tbody id="body"></tbody></table></div></div><div id="context" class="context"></div>
<script>
'use strict';
/* ===== Tunable spreadsheet constants ===== */
const COLS=26, ROWS=100, STORAGE='vanilla-sheet-v1';
const grid=document.querySelector('#grid'), body=document.querySelector('#body'), columns=document.querySelector('#columns');
const formulaInput=document.querySelector('#formulaInput'), nameBox=document.querySelector('#nameBox'), context=document.querySelector('#context');
let raw=new Map(), values=new Map(), asts=new Map(), deps=new Map(), rev=new Map(), sel={r:1,c:1}, edit=null;
const key=(r,c)=>r+','+c, colName=c=>String.fromCharCode(64+c), addr=(r,c)=>colName(c)+r;
function parseAddr(s){let m=/^([A-Z])([1-9]\d*)$/.exec(s); if(!m)return null; let c=m[1].charCodeAt(0)-64,r=+m[2];return c>=1&&c<=COLS&&r>=1&&r<=ROWS?{r,c}:null}
function makeGrid(){let h='';for(let c=1;c<=COLS;c++)h+='<th data-c="'+c+'">'+colName(c)+'</th>';columns.innerHTML='<th class="corner"></th>'+h;let out='';for(let r=1;r<=ROWS;r++){out+='<tr><th class="rowhead" data-r="'+r+'">'+r+'</th>';for(let c=1;c<=COLS;c++)out+='<td data-r="'+r+'" data-c="'+c+'"></td>';out+='</tr>'}body.innerHTML=out}
/* ===== Tokenizer and recursive-descent formula parser (never eval) ===== */
function tokenize(s){let a=[],i=0;while(i<s.length){let ch=s[i];if(/\s/.test(ch)){i++;continue}if(s.slice(i,i+5)==='#REF!'){a.push({t:'referr'});i+=5;continue}if(/[0-9.]/.test(ch)){let m=/^(?:\d+(?:\.\d*)?|\.\d+)/.exec(s.slice(i));if(!m)throw Error();a.push({t:'num',v:+m[0]});i+=m[0].length;continue}if(/[A-Za-z]/.test(ch)){let m=/^[A-Za-z]+\d*|^[A-Za-z]+/.exec(s.slice(i))[0];a.push({t:'id',v:m.toUpperCase()});i+=m.length;continue}if('+-*/(),:'.includes(ch)){a.push({t:ch,v:ch});i++;continue}throw Error()}a.push({t:'eof'});return a}
function parseFormula(text){let ts=tokenize(text.slice(1)),p=0, refs=new Set();const peek=()=>ts[p],take=t=>{if(peek().t!==t)throw Error();return ts[p++]};
 function refNode(id){let x=parseAddr(id);if(!x)throw Error('ref');refs.add(key(x.r,x.c));return {k:'ref',...x}}
 function primary(){let q=peek();if(q.t==='referr'){p++;return{k:'badref'}}if(q.t==='num'){p++;return{k:'n',v:q.v}}if(q.t==='id'){p++;if(peek().t==='('){let fn=q.v;if(!['SUM','AVG','AVERAGE','MIN','MAX','COUNT'].includes(fn))throw Error();p++;let args=[];if(peek().t!==')'){do{args.push(expr());if(peek().t!==',')break;p++}while(true)}take(')');return{k:'fn',fn,args}}let one=refNode(q.v);if(peek().t===':'){p++;let other=take('id');let end=parseAddr(other.v);if(!end)throw Error();let start=one;for(let r=Math.min(start.r,end.r);r<=Math.max(start.r,end.r);r++)for(let c=Math.min(start.c,end.c);c<=Math.max(start.c,end.c);c++)refs.add(key(r,c));return{k:'range',a:start,b:end}}return one}if(q.t==='('){p++;let n=expr();take(')');return n}throw Error()}
 function unary(){if(peek().t==='-'){p++;return{k:'neg',x:unary()}}if(peek().t==='+'){p++;return unary()}return primary()};function mul(){let n=unary();while(['*','/'].includes(peek().t)){let op=peek().t;p++;n={k:'op',op,a:n,b:unary()}}return n};function expr(){let n=mul();while(['+','-'].includes(peek().t)){let op=peek().t;p++;n={k:'op',op,a:n,b:mul()}}return n};let tree=expr();if(peek().t!=='eof')throw Error();return{tree,refs}}
const err=x=>({error:x}), isErr=x=>x&&typeof x==='object'&&x.error;
function num(v){if(isErr(v))return v;if(typeof v==='number')return v;if(v===''||v==null)return 0;let n=Number(v);return Number.isFinite(n)?n:0}
function evalTree(n){if(n.k==='badref')return err('#REF!');if(n.k==='n')return n.v;if(n.k==='ref')return values.get(key(n.r,n.c))??'';if(n.k==='range'){let z=[];for(let r=Math.min(n.a.r,n.b.r);r<=Math.max(n.a.r,n.b.r);r++)for(let c=Math.min(n.a.c,n.b.c);c<=Math.max(n.a.c,n.b.c);c++)z.push(values.get(key(r,c))??'');return z}if(n.k==='neg'){let x=evalTree(n.x);return isErr(x)?x:-num(x)}if(n.k==='op'){let a=evalTree(n.a),b=evalTree(n.b);if(isErr(a))return a;if(isErr(b))return b;a=num(a);b=num(b);if(isErr(a)||isErr(b))return isErr(a)?a:b;if(n.op==='+')return a+b;if(n.op==='-')return a-b;if(n.op==='*')return a*b;if(b===0)return err('#DIV/0!');return a/b}if(n.k==='fn'){let x=[];for(const q of n.args){let v=evalTree(q);if(isErr(v))return v;x.push(...(Array.isArray(v)?v:[v]))}let ns=x.map(num).filter(v=>!isErr(v));if(n.fn==='SUM')return ns.reduce((a,b)=>a+b,0);if(n.fn==='COUNT')return ns.filter(v=>typeof v==='number'&&Number.isFinite(v)).length;if(!ns.length)return 0;if(n.fn==='MIN')return Math.min(...ns);if(n.fn==='MAX')return Math.max(...ns);return ns.reduce((a,b)=>a+b,0)/ns.length}}
/* ===== Dependency graph / targeted recalculation ===== */
function rebuildGraph(){asts.clear();deps.clear();rev.clear();for(const [k,v] of raw)if(v.startsWith('=')){try{let z=parseFormula(v);asts.set(k,z.tree);deps.set(k,z.refs);for(const d of z.refs){if(!rev.has(d))rev.set(d,new Set());rev.get(d).add(k)}}catch(e){asts.set(k,null);deps.set(k,new Set())}}}
function recalc(changed=null){let affected=new Set();if(changed){let stack=[...changed];while(stack.length){let k=stack.pop();if(affected.has(k))continue;affected.add(k);for(const x of rev.get(k)||[])stack.push(x)}}else for(const k of raw.keys())affected.add(k);let state=new Map(),trail=[];
 function visit(k){if(!affected.has(k))return;if(state.get(k)===2)return;if(state.get(k)===1){let at=trail.indexOf(k);for(const q of trail.slice(at)){values.set(q,err('#CYCLE!'));state.set(q,2)}return}state.set(k,1);trail.push(k);for(const d of deps.get(k)||[])visit(d);trail.pop();if(state.get(k)===2)return;let rv=raw.get(k)||'';if(!rv.startsWith('='))values.set(k,rv);else{let tree=asts.get(k);if(!tree)values.set(k,err('#ERR!'));else{try{values.set(k,evalTree(tree))}catch(e){values.set(k,err('#ERR!'))}}}state.set(k,2)}for(const k of affected)visit(k);renderCells(affected);save()}
function display(v){if(isErr(v))return v.error;if(v===undefined)return '';if(typeof v==='number')return Number.isInteger(v)?String(v):String(+v.toFixed(10));return String(v)}
function renderCells(set){for(const k of set){let [r,c]=k.split(',');let td=grid.querySelector('td[data-r="'+r+'"][data-c="'+c+'"]');if(!td||td.classList.contains('editing'))continue;let v=values.get(k),s=display(v);td.textContent=s;td.classList.toggle('error',isErr(v));td.classList.toggle('num',typeof v==='number')}}
function renderAll(){let all=new Set();for(let r=1;r<=ROWS;r++)for(let c=1;c<=COLS;c++)all.add(key(r,c));renderCells(all);select(sel.r,sel.c)}
/* ===== Editing and navigation ===== */
function select(r,c){r=Math.max(1,Math.min(ROWS,r));c=Math.max(1,Math.min(COLS,c));if(edit)commitEdit();grid.querySelector('td.selected')?.classList.remove('selected');sel={r,c};let td=grid.querySelector('td[data-r="'+r+'"][data-c="'+c+'"]');td.classList.add('selected');nameBox.textContent=addr(r,c);formulaInput.value=raw.get(key(r,c))||'';td.scrollIntoView({block:'nearest',inline:'nearest'})}
function commit(value){let k=key(sel.r,sel.c);value=String(value??'');if(value)raw.set(k,value);else raw.delete(k);rebuildGraph();recalc(new Set([k]));formulaInput.value=value}
function beginEdit(seed){if(edit)return;let td=grid.querySelector('td.selected');edit=document.createElement('input');edit.className='cell-edit';edit.value=seed??(raw.get(key(sel.r,sel.c))||'');td.classList.add('editing');td.append(edit);edit.focus();edit.select();edit.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();commitEdit();select(sel.r+1,sel.c)}else if(e.key==='Tab'){e.preventDefault();commitEdit();select(sel.r,sel.c+(e.shiftKey?-1:1))}else if(e.key==='Escape'){cancelEdit()}});edit.addEventListener('blur',()=>{if(edit)commitEdit()})}
function commitEdit(){if(!edit)return;let v=edit.value, td=edit.parentElement;edit.remove();td.classList.remove('editing');edit=null;commit(v)}function cancelEdit(){if(!edit)return;let td=edit.parentElement;edit.remove();td.classList.remove('editing');edit=null;renderCells(new Set([key(sel.r,sel.c)]))}
grid.addEventListener('click',e=>{let td=e.target.closest('td');if(td)select(+td.dataset.r,+td.dataset.c)});grid.addEventListener('dblclick',e=>{let td=e.target.closest('td');if(td){select(+td.dataset.r,+td.dataset.c);beginEdit()}});
document.addEventListener('keydown',e=>{if(e.target===formulaInput||edit)return;if(e.ctrlKey&&e.key.toLowerCase()==='s'){e.preventDefault();save();return}if(e.key==='ArrowUp'||e.key==='ArrowDown'||e.key==='ArrowLeft'||e.key==='ArrowRight'){e.preventDefault();let d={ArrowUp:[-1,0],ArrowDown:[1,0],ArrowLeft:[0,-1],ArrowRight:[0,1]}[e.key];select(sel.r+d[0],sel.c+d[1]);return}if(e.key==='Enter'){beginEdit();return}if(e.key==='Tab'){e.preventDefault();select(sel.r,sel.c+(e.shiftKey?-1:1));return}if(e.key==='Delete'||e.key==='Backspace'){e.preventDefault();commit('');return}if(e.key.length===1&&!e.ctrlKey&&!e.metaKey){beginEdit(e.key)}});
formulaInput.addEventListener('focus',()=>formulaInput.select());formulaInput.addEventListener('keydown',e=>{if(e.key==='Enter'){commit(formulaInput.value);formulaInput.blur();select(sel.r+1,sel.c)}else if(e.key==='Escape'){formulaInput.value=raw.get(key(sel.r,sel.c))||'';formulaInput.blur()}});formulaInput.addEventListener('blur',()=>{if(document.activeElement!==formulaInput&&formulaInput.value!==(raw.get(key(sel.r,sel.c))||''))commit(formulaInput.value)});
/* ===== Structural operations and reference rewriting ===== */
function rewriteFormula(s,type,index){if(!s.startsWith('='))return s;return s.replace(/\b([A-Z])([1-9]\d*)\b/g,(m,L,rs)=>{let c=L.charCodeAt(0)-64,r=+rs;if(type==='row'){if(r===index&&type.endsWith('delete'))return '#REF!'}return m})}
function shift(type,index,remove){let next=new Map();for(const [k,v] of raw){let [r,c]=k.split(',').map(Number);if(type==='row'){if(remove&&r===index)continue;if(!remove&&r>=index)r++;if(remove&&r>index)r--}else{if(remove&&c===index)continue;if(!remove&&c>=index)c++;if(remove&&c>index)c--}if(r>=1&&r<=ROWS&&c>=1&&c<=COLS)next.set(key(r,c),v)}raw=next;let axis=type==='row'?'r':'c';raw=new Map([...raw].map(([k,v])=>[k,v.replace(/\b([A-Z])([1-9]\d*)\b/g,(m,L,rs)=>{let c=L.charCodeAt(0)-64,r=+rs, x=axis==='r'?r:c;if(remove&&x===index)return '#REF!';if(!remove&&x>=index)x++;if(remove&&x>index)x--;return axis==='r'?L+x:colName(x)+r})]));rebuildGraph();recalc();renderAll()}
function rowOp(remove){shift('row',sel.r,remove);select(Math.min(sel.r,ROWS),sel.c)}function colOp(remove){shift('col',sel.c,remove);select(sel.r,Math.min(sel.c,COLS))}document.querySelector('#insRow').onclick=()=>rowOp(false);document.querySelector('#delRow').onclick=()=>rowOp(true);document.querySelector('#insCol').onclick=()=>colOp(false);document.querySelector('#delCol').onclick=()=>colOp(true);
grid.addEventListener('contextmenu',e=>{let h=e.target.closest('th');if(!h||(!h.dataset.r&&!h.dataset.c))return;e.preventDefault();let isRow=!!h.dataset.r, n=+(h.dataset.r||h.dataset.c);select(isRow?n:sel.r,isRow?sel.c:n);context.innerHTML='<button data-a="i">Insert '+(isRow?'row':'column')+'</button><button data-a="d">Delete '+(isRow?'row':'column')+'</button>';context.style.display='block';context.style.left=e.clientX+'px';context.style.top=e.clientY+'px';context.onclick=x=>{if(x.target.tagName==='BUTTON')(isRow?rowOp:colOp)(x.target.dataset.a==='d');context.style.display='none'}});document.addEventListener('click',()=>context.style.display='none');
/* ===== Persistence and startup ===== */
function save(){try{localStorage.setItem(STORAGE,JSON.stringify([...raw]))}catch(e){}}function load(){try{let x=JSON.parse(localStorage.getItem(STORAGE)||'[]');if(Array.isArray(x))raw=new Map(x)}catch(e){raw=new Map()}}makeGrid();load();rebuildGraph();recalc();renderAll();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"full","sessionId":"a7757709-8107-4409-8d33-1f308facd3a3","tokensIn":226659,"tokensOut":11018,"tokensTotal":237677,"turns":21,"toolCalls":20,"failedToolCalls":3,"timestamp":"2026-07-31T19:23:32.354Z"} -->