Notes
GPT 5.6 Luna Pro · full

Browser check: Artifact runtime error. This is a technical check, not a quality review.
Reviews & generation details
Reviews
No human review yet. Unreviewed does not mean unsuccessful.
Generation context
Imported historical artifact. Its exact original instructions and lineage are not known.
Generation prompt · exact text unavailable
See the current prompt for reference. It may differ from the instructions used to generate this artifact.
Inspect original source 20,039 bytes · SHA-256 34b31d165c55
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hearth Notes</title><style>
:root{--bg:#f7f5f0;--panel:#fbfaf7;--panel2:#f1eee8;--ink:#282725;--muted:#8b8780;--line:#e6e1d9;--accent:#b86b45;--accent2:#f1e0d5;--shadow:0 16px 40px #4d38200e;font:14px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);height:100vh;overflow:hidden}button,input{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}button:focus-visible,input:focus-visible,[contenteditable]:focus-visible{outline:2px solid #d49b7e;outline-offset:2px}.app{height:100vh;display:flex;flex-direction:column}.topbar{height:64px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);background:var(--panel);gap:18px}.brand{font-family:Georgia,serif;font-size:21px;letter-spacing:-.6px;display:flex;align-items:center;gap:9px;min-width:205px}.brandmark{width:28px;height:28px;border-radius:9px 9px 9px 3px;background:var(--accent);display:grid;place-items:center;color:white;font-weight:700}.search{height:36px;flex:1;max-width:490px;background:var(--panel2);border:1px solid transparent;border-radius:9px;padding:0 13px 0 36px;background-image:radial-gradient(circle at 15px 17px,transparent 5px,#8e8a84 5.5px,#8e8a84 7px,transparent 7.5px),linear-gradient(45deg,transparent 47%,#8e8a84 48%,#8e8a84 58%,transparent 59%);background-size:100% 100%,8px 8px;background-position:0 0,19px 21px;background-repeat:no-repeat}.search:focus{border-color:#d8b6a5;background-color:white}.top-actions{margin-left:auto;display:flex;gap:7px}.icon-btn,.small-btn{width:34px;height:34px;border-radius:8px;color:var(--muted);display:grid;place-items:center;font-size:17px}.icon-btn:hover,.small-btn:hover{background:var(--panel2);color:var(--ink)}.layout{display:flex;flex:1;min-height:0}.sidebar{width:244px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;transition:width .25s,padding .25s;overflow:hidden}.sidebar.collapsed{width:0;padding:18px 0;border:0}.side-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 14px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap}.navitem,.book{height:37px;display:flex;align-items:center;gap:10px;border-radius:8px;padding:0 10px;color:#625e58;width:100%;text-align:left;white-space:nowrap}.navitem:hover,.book:hover,.navitem.active,.book.active{background:var(--accent2);color:var(--ink)}.navitem.active{font-weight:650}.navitem b{margin-left:auto;color:var(--muted);font-size:11px}.section{margin-top:24px}.book{font-size:13px;position:relative}.book .folder{color:var(--accent);font-size:13px}.book .more{margin-left:auto;opacity:0}.book:hover .more{opacity:1}.addbook{color:var(--accent);font-size:12px;margin:8px 10px}.listpane{width:322px;flex:none;border-right:1px solid var(--line);background:#faf9f6;display:flex;flex-direction:column;min-width:240px}.listhead{padding:22px 20px 13px;display:flex;align-items:end;justify-content:space-between}.listtitle{font:24px Georgia,serif;letter-spacing:-.5px}.listmeta{font-size:11px;color:var(--muted);margin-top:4px}.sort{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:6px 7px;border-radius:6px;background:white}.notes{overflow:auto;padding:0 9px 20px}.note-card{padding:14px 12px;border-radius:9px;margin:3px 0;cursor:pointer;transition:background .15s,transform .15s;position:relative}.note-card:hover{background:#f0ede7}.note-card.selected{background:white;box-shadow:var(--shadow);transform:translateX(2px)}.note-title{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:16px}.note-snippet{font-size:12px;color:#88837b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px;line-height:1.3}.note-time{font-size:10px;color:#aaa49c;margin-top:9px}.pin{position:absolute;right:12px;top:15px;color:var(--accent);font-size:12px}.tag{display:inline-block;border-radius:10px;background:var(--accent2);color:#9c5d3d;font-size:10px;padding:3px 7px;margin:8px 4px 0 0}.editor{flex:1;min-width:0;background:var(--panel);overflow:auto;position:relative}.editor-inner{max-width:820px;margin:0 auto;padding:45px 72px 100px}.editor-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.crumb{color:var(--muted);font-size:12px}.save{font-size:11px;color:#79a084;opacity:.85}.editor-title{font:38px Georgia,serif;letter-spacing:-1.2px;border:0;background:transparent;width:100%;padding:0;margin-bottom:22px}.editor-title::placeholder{color:#c8c2ba}.toolbar{height:43px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:2px;margin:0 -18px 28px;padding:0 10px;position:sticky;top:0;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);z-index:2}.tool{height:29px;min-width:29px;padding:0 7px;border-radius:5px;color:#77716a;font-weight:600}.tool:hover,.tool.active{background:var(--accent2);color:var(--accent)}.divider{width:1px;height:19px;background:var(--line);margin:0 5px}.body{font:17px/1.72 Georgia,serif;min-height:380px;color:#373431}.body:focus{outline:0}.body h1,.body h2,.body h3{font-family:Georgia,serif;line-height:1.25}.body h1{font-size:30px}.body h2{font-size:24px}.body h3{font-size:20px}.body blockquote{margin:18px 0;border-left:3px solid var(--accent);padding:5px 20px;color:#77716a;font-style:italic}.body code{font-family:ui-monospace,monospace;background:var(--panel2);padding:2px 5px;border-radius:4px;font-size:.85em}.body ul,.body ol{padding-left:28px}.check{list-style:none;margin-left:-28px}.check input{accent-color:var(--accent);margin-right:9px;width:16px;height:16px;vertical-align:middle}.check.done{text-decoration:line-through;color:#aaa}.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted)}.empty strong{display:block;font:25px Georgia,serif;color:var(--ink);margin-bottom:8px}.empty span{font-size:13px}.tagbar{border-top:1px solid var(--line);margin-top:30px;padding-top:14px}.tag-input{border:0;background:transparent;font-size:12px;color:var(--muted);width:110px}.context{position:fixed;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 35px #0002;padding:5px;z-index:9}.context button{display:block;padding:8px 13px;text-align:left;border-radius:5px;min-width:145px;font-size:12px}.context button:hover{background:var(--panel2)}.dark{--bg:#20201e;--panel:#282724;--panel2:#33312d;--ink:#eeeae3;--muted:#a29d94;--line:#403e39;--accent2:#49352b;--shadow:0 16px 40px #0005}.dark .listpane{background:#252422}.dark .note-card.selected,.dark .sort,.dark .context{background:#302e2a}.dark .search{background-color:#33312d}.dark .editor-title,.dark .body{color:var(--ink)}@media(max-width:850px){.sidebar{width:210px}.listpane{width:280px}.editor-inner{padding:35px 35px 80px}}@media(max-width:650px){.sidebar{position:absolute;z-index:4;height:calc(100% - 64px);box-shadow:8px 0 30px #0001}.listpane{width:100%;border:0}.editor{display:none}.listpane.editing{display:none}.search{max-width:none}.brand{min-width:auto}.brand span{display:none}}
</style></head><body><div class="app"><header class="topbar"><div class="brand"><span class="brandmark">H</span><span>Hearth Notes</span></div><button class="icon-btn" id="toggleSide" title="Toggle sidebar">☰</button><input id="search" class="search" placeholder="Search all notes…"/><div class="top-actions"><button class="icon-btn" id="newNote" title="New note">+</button><button class="icon-btn" id="theme" title="Toggle theme">☼</button></div></header><main class="layout"><aside class="sidebar" id="sidebar"><div class="side-head">Workspace <button class="small-btn" id="newBook">+</button></div><button class="navitem active" data-view="all">⌘ <span>All Notes</span><b id="allCount"></b></button><button class="navitem" data-view="trash">♲ <span>Trash</span><b id="trashCount"></b></button><div class="section"><div class="side-head">Notebooks</div><div id="books"></div><button class="addbook" id="addBook">+ New notebook</button></div></aside><section class="listpane" id="listpane"><div class="listhead"><div><div class="listtitle" id="listTitle">All Notes</div><div class="listmeta" id="listMeta"></div></div><select class="sort" id="sort"><option value="modified">Modified</option><option value="created">Created</option><option value="alpha">A–Z</option></select></div><div class="notes" id="notes"></div></section><section class="editor" id="editor"></section></main></div><script>
/* Hearth Notes — tunable constants */
const CFG={debounce:500,snippet:92};
const uid=()=>Math.random().toString(36).slice(2)+Date.now().toString(36);
const initial=()=>{let b=uid(),n=uid(),now=Date.now();return{books:[{id:b,name:'Personal'}],notes:[{id:n,book:b,title:'Welcome to Hearth',html:'<h1>A calmer place for your thoughts</h1><p>Hearth is a small, focused home for notes. Start writing here, or create a new note to capture an idea.</p><blockquote>Good notes make room for good thinking.</blockquote><ul><li>Try the formatting toolbar</li><li class="check"><input type="checkbox"> Make a checklist</li></ul>',created:now,updated:now,pinned:true,tags:['welcome'],deleted:false}],selected:n,view:'all',sort:'modified',dark:false,collapsed:false}};
let S=JSON.parse(localStorage.getItem('hearth-notes')||'null')||initial(),saveTimer;
const persist=()=>{localStorage.setItem('hearth-notes',JSON.stringify(S));document.querySelector('.save')?.replaceChildren('Saved')};
const schedule=()=>{let el=document.querySelector('.save');if(el)el.textContent='Saving…';clearTimeout(saveTimer);saveTimer=setTimeout(persist,CFG.debounce)};
const textOf=html=>{let d=document.createElement('div');d.innerHTML=html;return d.textContent.replace(/\s+/g,' ').trim()};
const esc=s=>String(s||'').replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
const activeNotes=()=>S.notes.filter(n=>!n.deleted);
function render(){document.body.classList.toggle('dark',S.dark);document.getElementById('sidebar').classList.toggle('collapsed',S.collapsed);renderSide();renderList();renderEditor();}
function renderSide(){books.innerHTML=S.books.map(b=>`<button class="book ${S.view===b.id?'active':''}" data-book="${b.id}"><span class="folder">▰</span><span>${esc(b.name)}</span><span class="more" data-more="${b.id}">•••</span></button>`).join('');allCount.textContent=activeNotes().length||'';trashCount.textContent=S.notes.filter(n=>n.deleted).length||'';document.querySelectorAll('.navitem').forEach(x=>x.classList.toggle('active',x.dataset.view===S.view));}
function getVisible(){let a=S.view==='trash'?S.notes.filter(n=>n.deleted):activeNotes();if(S.view!=='all'&&S.view!=='trash')a=a.filter(n=>n.book===S.view);let q=search.value.trim().toLowerCase();if(q)a=a.filter(n=>(n.title+' '+textOf(n.html)+' '+n.tags.join(' ')).toLowerCase().includes(q));a.sort((x,y)=>(y.pinned-x.pinned)||(S.sort==='alpha'?x.title.localeCompare(y.title):S.sort==='created'?y.created-x.created:y.updated-x.updated));return a}
function ago(t){let m=Math.floor((Date.now()-t)/60000);return m<1?'Just now':m<60?m+'m ago':m<1440?Math.floor(m/60)+'h ago':new Date(t).toLocaleDateString(undefined,{month:'short',day:'numeric'})}
function renderList(){let title=S.view==='trash'?'Trash':S.view==='all'?'All Notes':S.books.find(b=>b.id===S.view)?.name||'All Notes';listTitle.textContent=title;let arr=getVisible();listMeta.textContent=arr.length+' note'+(arr.length===1?'':'s');notes.innerHTML=arr.length?arr.map(n=>{let sn=textOf(n.html).slice(0,CFG.snippet),q=search.value.trim();if(q)sn=sn.replace(new RegExp('('+q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+')','ig'),'<mark>$1</mark>');return`<article class="note-card ${n.id===S.selected?'selected':''}" data-note="${n.id}"><span class="note-title">${esc(n.title||'Untitled')}</span>${n.pinned?'<span class="pin">●</span>':''}<div class="note-snippet">${sn||'No content yet'}</div><div class="note-time">${ago(n.updated)}${n.tags.length?' · '+n.tags.map(esc).join(' · '):''}</div></article>`}).join(''):`<div class="empty" style="height:60%"><div><strong>${S.view==='trash'?'Trash is empty':'Nothing here yet'}</strong><span>${search.value?'Try a different search':'Create a note to begin'}</span></div></div>`}
function renderEditor(){let n=S.notes.find(x=>x.id===S.selected);if(!n){editor.innerHTML='<div class="empty"><div><strong>Select or create a note</strong><span>Your ideas deserve a home.</span></div></div>';return}if(n.deleted){editor.innerHTML='<div class="empty"><div><strong>Note in Trash</strong><span>This note can be restored to its notebook.</span><br><button class="sort" id="restoreNote" style="margin-top:16px">Restore note</button> <button class="sort" id="purgeNote" style="margin-top:16px">Delete forever</button></div></div>';restoreNote.onclick=()=>{n.deleted=false;S.view=n.book;persist();render()};purgeNote.onclick=()=>{S.notes=S.notes.filter(x=>x.id!==n.id);S.selected=null;persist();render()};return}editor.innerHTML=`<div class="editor-inner"><div class="editor-top"><span class="crumb">${esc(S.books.find(b=>b.id===n.book)?.name||'Notebook')}</span><span class="save">Saved</span></div><input class="editor-title" id="title" value="${esc(n.title)}" placeholder="Untitled note"><div class="toolbar">${[['bold','B'],['italic','I'],['underline','U'],['strikeThrough','S'],['formatBlock','H'],['insertUnorderedList','•'],['insertOrderedList','1.'],['check','☑'],['blockquote','❝'],['code','<>'],['hr','―']].map(([a,l])=>`<button class="tool" data-cmd="${a}">${l}</button>`).join('')}<span class="divider"></span><button class="tool" data-cmd="undo">↶</button><button class="tool" data-cmd="redo">↷</button><button class="tool" id="pinBtn">${n.pinned?'★':'☆'}</button><button class="tool" id="moreNote">•••</button></div><div class="body" id="body" contenteditable="true" spellcheck="true">${n.html}</div><div class="tagbar">${n.tags.map(t=>`<span class="tag">#${esc(t)} ×</span>`).join('')}<input class="tag-input" id="tagInput" placeholder="Add a tag…"/></div></div>`;bindEditor(n);}
function clean(html){let d=document.createElement('div');d.innerHTML=html;d.querySelectorAll('script,style,iframe,object,embed,meta,link').forEach(x=>x.remove());d.querySelectorAll('input[type=checkbox]').forEach(x=>{if(x.checked)x.setAttribute('checked','');else x.removeAttribute('checked');x.setAttribute('type','checkbox')});d.querySelectorAll('*').forEach(x=>{[...x.attributes].forEach(a=>{if(a.name.startsWith('on')||a.name==='style'||(a.name==='class'&&x.tagName!=='LI'))x.removeAttribute(a.name)});});return d.innerHTML}
function bindEditor(n){title.oninput=()=>{n.title=title.value;n.updated=Date.now();schedule();renderList()};body.oninput=()=>{n.html=clean(body.innerHTML);n.updated=Date.now();schedule();renderList()};body.addEventListener('paste',e=>{e.preventDefault();let raw=e.clipboardData?.getData('text/html')||e.clipboardData?.getData('text/plain')||'';document.execCommand('insertHTML',false,clean(raw).replace(/<(?!\/?(p|br|strong|b|em|i|u|s|strike|h1|h2|h3|ul|ol|li|blockquote|code|hr|input)(\s|>|\/))/gi,'<'));body.dispatchEvent(new Event('input'))});body.onkeydown=e=>{if((e.metaKey||e.ctrlKey)&&['b','i','u'].includes(e.key.toLowerCase())){e.preventDefault();document.execCommand({b:'bold',i:'italic',u:'underline'}[e.key.toLowerCase()]);body.dispatchEvent(new Event('input'));}if(e.key===' '){let s=getSelection(),node=s.anchorNode;if(node&&node.nodeType===3){let line=node.textContent.slice(0,s.anchorOffset);if(/^#$/.test(line)){e.preventDefault();document.execCommand('formatBlock',false,'h1')}else if(/^-$/.test(line)){e.preventDefault();document.execCommand('insertUnorderedList')}else if(/^\[\]$/.test(line)){e.preventDefault();document.execCommand('insertHTML',false,'<li class="check"><input type="checkbox"> </li>')}else if(/^>$/.test(line)){e.preventDefault();document.execCommand('formatBlock',false,'blockquote')}}}};body.addEventListener('click',e=>{if(e.target.matches('.check input')){e.target.parentElement.classList.toggle('done',e.target.checked);n.html=clean(body.innerHTML);n.updated=Date.now();schedule()}});document.querySelectorAll('.tool[data-cmd]').forEach(b=>b.onclick=()=>{let c=b.dataset.cmd;if(c==='check')document.execCommand('insertHTML',false,'<li class="check"><input type="checkbox"> </li>');else if(c==='blockquote')document.execCommand('formatBlock',false,'blockquote');else if(c==='code')document.execCommand('formatBlock',false,'code');else if(c==='hr')document.execCommand('insertHorizontalRule');else if(c==='formatBlock')document.execCommand('formatBlock',false,'h1');else document.execCommand(c);body.dispatchEvent(new Event('input'));body.focus()});pinBtn.onclick=()=>{n.pinned=!n.pinned;n.updated=Date.now();persist();render()};moreNote.onclick=e=>menu(e.clientX,e.clientY,n)}
function menu(x,y,n){let d=document.createElement('div');d.className='context';d.style.left=x+'px';d.style.top=y+'px';d.innerHTML=`<button data-act="dup">Duplicate note</button><button data-act="move">Move to notebook</button><button data-act="del">${n.deleted?'Delete permanently':'Move to Trash'}</button>`;document.body.append(d);d.onclick=e=>{let a=e.target.dataset.act;if(a==='dup'){let c={...n,id:uid(),title:n.title+' copy',created:Date.now(),updated:Date.now()};S.notes.push(c);S.selected=c.id}else if(a==='move'){let b=S.books.find(x=>x.id!==n.book);if(b)n.book=b.id}else if(a==='del'){if(n.deleted)S.notes=S.notes.filter(x=>x.id!==n.id);else n.deleted=true;if(S.selected===n.id)S.selected=null}persist();d.remove();render()};setTimeout(()=>document.addEventListener('click',()=>d.remove(),{once:true}),0)}
// Navigation and organization
notes.onclick=e=>{let c=e.target.closest('[data-note]');if(c){S.selected=c.dataset.note;render()}};document.querySelectorAll('.navitem').forEach(x=>x.onclick=()=>{S.view=x.dataset.view;let a=getVisible()[0];S.selected=a?.id||null;render()});books.onclick=e=>{let b=e.target.closest('[data-book]');if(b){if(e.target.dataset.more){let nb=prompt('Rename notebook',S.books.find(x=>x.id===b.dataset.book).name);if(nb){S.books.find(x=>x.id===b.dataset.book).name=nb;persist();render()}}else{S.view=b.dataset.book;S.selected=getVisible()[0]?.id||null;render()}}};function addBook(){let name=prompt('Notebook name','New notebook');if(name?.trim()){S.books.push({id:uid(),name:name.trim()});persist();render()}}newBook.onclick=addBook;addBook.onclick=addBook;newNote.onclick=()=>{let b=S.view==='all'||S.view==='trash'?S.books[0]:S.books.find(x=>x.id===S.view)||S.books[0],n={id:uid(),book:b.id,title:'Untitled note',html:'<p><br></p>',created:Date.now(),updated:Date.now(),pinned:false,tags:[],deleted:false};S.notes.push(n);S.selected=n.id;S.view=b.id;persist();render();setTimeout(()=>title?.focus(),50)};search.oninput=()=>{renderList();};sort.onchange=()=>{S.sort=sort.value;persist();renderList()};theme.onclick=()=>{S.dark=!S.dark;persist();render()};toggleSide.onclick=()=>{S.collapsed=!S.collapsed;persist();render()};editor.addEventListener('keydown',e=>{if(e.target.id==='tagInput'&&e.key==='Enter'){e.preventDefault();let v=e.target.value.trim().replace(/^#/,'');let n=S.notes.find(x=>x.id===S.selected);if(v&&!n.tags.includes(v))n.tags.push(v);persist();renderEditor()}});document.addEventListener('click',e=>{if(e.target.matches('.tag')){let v=e.target.textContent.slice(1).split(' ')[0];search.value=v;S.view='all';render()}});
// Restore/persist UI state
sort.value=S.sort;render();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"463e51a4-f3a1-4805-929c-6b908f1b9a7b","tokensIn":545363,"tokensOut":29562,"tokensTotal":574925,"turns":13,"toolCalls":12,"failedToolCalls":0,"timestamp":"2026-07-31T01:19:30.368Z"} -->