Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031<!doctype html><!-- THROWAWAY: three chat-control placements, ?variant=A|B|C. Mock state only. Run: python3 -m http.server 4178 --bind 127.0.0.1 --directory .amp --><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Flarebot · Chat controls wireframe</title><style>*{box-sizing:border-box}body{margin:0;font:14px/1.6 system-ui,sans-serif;color:#242424;background:#fff}button,select,input,textarea{font:inherit;color:inherit}button,select,input{border:1px solid #d9d9d9;background:white;border-radius:7px;padding:8px 12px}button{cursor:pointer}button:hover{background:#f1f1f1}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #e97736;outline-offset:3px}header{height:49px;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 22px}header strong{letter-spacing:-.3px}.mark{color:#ec7737;margin-right:9px}.tag{font-size:11px;color:#777;letter-spacing:1px;text-transform:uppercase}.shell{display:flex;height:calc(100dvh - 49px)}nav{background:#fafafa;border-right:1px solid #e4e4e4;width:238px;flex-shrink:0;padding:24px 16px}nav .new{width:100%;text-align:left;margin-bottom:24px}nav p{padding:8px 12px;margin:4px 0}nav .active{background:#eaeaea;border-radius:6px}nav small{display:block;color:#888;padding:32px 12px 8px}.settings{margin-top:60px;color:#777}main{flex:1;min-width:0;display:flex;flex-direction:column}.heading{padding:24px 36px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:20px}.heading h1{font-size:18px;margin:0;font-weight:600}.muted{color:#777;font-size:12px}.workspace{display:flex;flex:1;min-height:0}.chat{flex:1;min-width:0;display:flex;flex-direction:column;padding:28px 36px 94px}.messages{max-width:740px;width:100%;margin:0 auto;flex:1;overflow:auto}.user{background:#f4f4f4;border-radius:12px;padding:13px 18px;margin:12px 0 35px 18%;}.answer{max-width:630px}.answer h2{font-size:18px;font-weight:550;margin:8px 0}.answer p{margin:10px 0}.identity{font-size:12px;color:#888;margin-bottom:10px}.answer ul{padding-left:22px}.answer li{padding:4px 0}.composer-wrap{max-width:740px;width:100%;margin:24px auto 0}.composer{border:1px solid #ccc;border-radius:12px;box-shadow:0 3px 12px #00000005;padding:14px}textarea{width:100%;height:65px;resize:none;border:0;background:transparent;outline:none;padding:4px}.toolbar{display:flex;gap:8px;align-items:center}.send{margin-left:auto;background:#252525;color:white;width:38px;height:38px;padding:0;font-size:22px}.send:hover{background:#444}.controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.controls label{font-size:11px;color:#777;display:flex;flex-direction:column;gap:3px}.controls select{font-size:12px;max-width:240px;color:#333}.scope{font-size:11px;color:#888;margin:9px 2px}.panel{display:none;width:280px;border-left:1px solid #eee;background:#fcfcfc;padding:24px}.panel h2{font-size:14px;margin:0 0 22px}.panel .controls{display:flex;flex-direction:column;align-items:stretch}.panel select{width:100%;max-width:none}.panel p{font-size:12px;color:#777}.reset{font-size:12px;margin-top:20px}.state{font:11px/1.6 ui-monospace,monospace;color:#888;overflow-wrap:anywhere}.switcher{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#242424;color:white;border-radius:12px;box-shadow:0 6px 25px #0002;display:flex;align-items:center;gap:16px;padding:9px 12px;white-space:nowrap}.switcher button{background:#383838;color:white;border:0;padding:5px 12px}.switcher small{display:block;font-size:10px;color:#aaa;letter-spacing:.8px}.switcher strong{font-size:12px;font-weight:500}.note{margin-top:25px;padding-top:16px;border-top:1px solid #ddd}.budget{width:130px}body[data-variant=C] .panel{display:block}#header-controls:empty{display:none}.badge{font-size:11px;background:#f7eee8;color:#9b531f;padding:3px 7px;border-radius:4px;margin-left:8px}@media(max-width:760px){nav{display:none}.heading{padding:16px;flex-wrap:wrap}.chat{padding:12px 16px 100px}.user{margin-left:8%;margin-bottom:24px}.panel{width:210px;padding:16px}.toolbar{flex-wrap:wrap}.controls select{max-width:180px}.switcher{gap:8px}.answer{font-size:13px}body[data-variant=C] .workspace{flex-direction:column}body[data-variant=C] .panel{width:auto;border-left:0;border-top:1px solid #ddd;padding-bottom:100px}body[data-variant=C] .chat{padding-bottom:10px}.shell{min-height:calc(100dvh - 49px);height:auto}main{min-height:calc(100dvh - 49px)}}@media(max-width:760px){.switcher{position:static;transform:none;width:max-content;max-width:100%;margin:0 auto 16px}.chat{padding-bottom:24px}body[data-variant=C] .panel{padding-bottom:24px}}</style><header><strong><span class="mark">☁</span>Flarebot</strong><span class="tag">Design wireframe · not connected</span></header><div class="shell"><nav><button class="new">+ New conversation</button><p>◯ Conversations</p><p>◷ Scheduled tasks</p><small>Your conversations</small><p class="active">Planning the launch</p><p>API design notes</p><p>Weekly research</p><p class="settings">⚙ Settings</p></nav><main><div class="heading"><div><h1>Planning the launch</h1><span class="muted">Conversation</span></div><div id="header-controls"></div></div><div class="workspace"><div class="chat"><div class="messages"><div class="user">Help me turn this launch plan into something we can ship in two weeks.</div><div class="answer"><div class="identity">☁ Flarebot <span class="muted">· previous response</span></div><h2>Start with the smallest complete release.</h2><p>I’d split the next two weeks into three checkpoints:</p><ul><li><strong>Days 1–3:</strong> lock the core workflow and remove optional scope.</li><li><strong>Days 4–9:</strong> build the end-to-end path and test with real users.</li><li><strong>Days 10–14:</strong> fix blockers, prepare onboarding, and release.</li></ul><p>The main decision is what to leave out. What absolutely needs to work on launch day?</p></div></div><div class="composer-wrap"><div class="composer"><textarea aria-label="Message" placeholder="Ask a follow-up…">Pressure-test the plan. What are we missing?</textarea><div class="toolbar"><div id="composer-controls"></div><button class="send" aria-label="Send mock message">↑</button></div></div><div class="scope" id="scope">This conversation only · Applies to your next message</div><div class="state" id="state"></div></div></div><aside class="panel"><h2>Conversation settings</h2><div id="panel-controls"></div><p>Applies to the next message in this chat. Other chats and scheduled tasks are unchanged.</p><button class="reset">Use installation default</button><p class="note">Wireframe only. Capability types below are illustrative, not verified model support.</p></aside></div></main></div><div class="switcher"><button id="prev" aria-label="Previous variant">←</button><div><small>EXPLORE PLACEMENTS · 1 / 3</small><strong id="variant-name"></strong></div><button id="next" aria-label="Next variant">→</button></div><template id="controls-template"><div class="controls"><label>Model<select id="model"><optgroup label="OpenRouter"><option value="effort">GPT-5 mini · effort demo</option></optgroup><optgroup label="Anthropic"><option value="budget">Claude Haiku · budget demo</option></optgroup><optgroup label="Capability examples"><option value="toggle">Toggle-only model (mock)</option><option value="none">No thinking control (mock)</option></optgroup></select></label><label id="thinking-label">Thinking<span id="thinking-input"></span></label></div></template><script>const names={A:'Composer controls · recommended',B:'Chat header · clean composer',C:'Side panel · explicit configuration'};let variant=new URLSearchParams(location.search).get('variant');if(!names[variant])variant='A';let model='effort',thinking='default';function state(){document.querySelector('#state').textContent=`MOCK STATE · scope: conversation · model: ${model} · thinking: ${thinking}`}function thinkingControl(){const slot=document.querySelector('#thinking-input');document.querySelector('#thinking-label').style.display=model==='none'?'none':'flex';const options=model==='effort'?[['default','Provider default'],['low','Low'],['medium','Medium'],['high','High']]:model==='budget'?[['default','Provider default'],['budget','Custom token budget'],['off','Off']]:[['default','Provider default'],['on','On'],['off','Off']];slot.innerHTML='<select aria-label="Thinking">'+options.map(([v,l])=>`<option value="${v}">${l}</option>`).join('')+'</select>';const select=slot.querySelector('select');select.value=thinking==='2048'?'budget':thinking;select.onchange=()=>{thinking=select.value;if(thinking==='budget'){thinking='2048';const input=document.createElement('input');input.type='number';input.className='budget';input.value='2048';input.setAttribute('aria-label','Thinking token budget');input.oninput=()=>{thinking=input.value;state()};slot.append(input)}else slot.querySelector('input')?.remove();state()};state()}function render(){document.body.dataset.variant=variant;for(const id of ['header-controls','composer-controls','panel-controls'])document.getElementById(id).replaceChildren();document.getElementById({A:'composer-controls',B:'header-controls',C:'panel-controls'}[variant]).append(document.querySelector('#controls-template').content.cloneNode(true));const picker=document.querySelector('#model');picker.value=model;picker.onchange=()=>{model=picker.value;thinking='default';thinkingControl()};thinkingControl();document.querySelector('#variant-name').textContent=names[variant];document.querySelector('.switcher small').textContent=`EXPLORE PLACEMENTS · ${['A','B','C'].indexOf(variant)+1} / 3`;const url=new URL(location);url.searchParams.set('variant',variant);history.replaceState(null,'',url)}function cycle(delta){variant=['A','B','C'][(['A','B','C'].indexOf(variant)+delta+3)%3];thinking='default';render()}document.querySelector('#prev').onclick=()=>cycle(-1);document.querySelector('#next').onclick=()=>cycle(1);document.addEventListener('keydown',e=>{if(e.target.closest('input,textarea,select,button,[contenteditable]'))return;if(e.key==='ArrowLeft'||e.key==='ArrowRight'){e.preventDefault();cycle(e.key==='ArrowLeft'?-1:1)}});document.querySelector('.reset').onclick=()=>{model='effort';thinking='default';render()};document.querySelector('.send').onclick=()=>{document.querySelector('#scope').textContent=`Mock submission captured: ${model} / ${thinking}. Nothing was sent.`};render();</script></html>