design: record approved Hope conversation and administration overhaul

This commit is contained in:
snowspeeder committed 2026-10-03 13:12:55 -04:00
1 parent c549b92b52
commit d8fa6f0654
2 files changed
+97

No files matched your search

+44
View File
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hope — interface proposal</title>
<style>
:root{color-scheme:light;--bg:#fffdfd;--side:#f8f3f6;--panel:#fff;--ink:#302b40;--quiet:#706074;--line:#e6dce3;--rose:#a64270;--wash:#f8eaf1;--on:#fff;--persona:#fff2f7;--hover:#eee5ec}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:4px}button{border:0;background:none;min-height:44px;border-radius:8px}button:hover{background:var(--hover)}button:disabled{cursor:default;opacity:.45}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon{display:inline-flex;align-items:center;justify-content:center;width:44px}.app{display:flex;height:100dvh}.sidebar{width:252px;flex-shrink:0;background:var(--side);display:flex;flex-direction:column;padding:28px 18px 16px;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px;font-size:23px;letter-spacing:-.03em;font-weight:650}.brand-square{width:27px;height:27px;background:var(--rose);border-radius:6px;display:grid;place-items:center}.brand-square:after{content:"";width:11px;height:11px;background:#fff;border-radius:2px}.new{display:flex;gap:11px;align-items:center;background:var(--panel);padding:0 13px;width:100%;border:1px solid var(--line);font-weight:550}.search{display:flex;align-items:center;gap:10px;margin:13px 0 25px;padding:0 12px;color:var(--quiet);width:100%;text-align:left}.search kbd{margin-left:auto;font-size:11px}.group{margin-bottom:23px}.group-head{display:flex;align-items:center;justify-content:space-between;padding-left:12px;margin-bottom:4px;color:var(--quiet);font-size:12px;font-weight:600;height:28px}.navrow{display:flex;align-items:center;gap:11px;min-height:41px;padding:0 12px;width:100%;text-align:left;font-size:13px}.navrow svg{width:16px;height:16px}.navrow.active{background:var(--wash);color:var(--rose);font-weight:550}.navrow .count{margin-left:auto;font-size:11px;color:var(--quiet)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}.profile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px}.avatar{width:31px;height:31px;display:grid;place-items:center;background:var(--wash);border-radius:50%;color:var(--rose);font-size:12px;font-weight:650}.profile small{display:block;color:var(--quiet);margin-top:3px;font-size:11px}.profile svg{margin-left:auto;width:16px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:82px;flex-shrink:0;padding:0 38px;display:flex;align-items:center;gap:12px}.heading{min-width:0}.heading strong{font-size:15px;font-weight:550}.heading small{display:block;margin-top:6px;color:var(--quiet);font-size:12px}.heading small span{margin:0 5px;color:var(--quiet)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:6px}.badge{font-size:11px;display:flex;align-items:center;gap:6px;color:var(--quiet);margin-right:15px}.badge svg{width:12px;height:12px}.content{flex:1;overflow:auto;min-height:0;scroll-behavior:smooth}.thread{max-width:740px;margin:0 auto;padding:46px 24px 40px}.date{text-align:center;font-size:11px;color:var(--quiet);margin-bottom:34px}.user-message{margin-left:auto;width:fit-content;max-width:85%;padding:15px 20px;background:var(--wash);border-radius:14px 14px 4px 14px;font-size:15px;line-height:1.6}.assistant{margin-top:38px}.assistant-heading{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;margin-bottom:18px}.mini-square{width:20px;height:20px;border-radius:4px;background:var(--rose);display:grid;place-items:center}.mini-square:after{content:"";width:7px;height:7px;background:var(--on);border-radius:1px}.prose{font-size:15px;line-height:1.8}.prose p{margin:0 0 17px}.prose h2{font-size:16px;font-weight:600;margin:28px 0 11px}.prose ul{padding-left:20px}.prose li{padding-left:4px;margin-bottom:9px}.prose a{color:var(--rose);text-decoration:underline;text-underline-offset:3px}.message-actions{display:flex;align-items:center;gap:1px;margin-top:12px;color:var(--quiet)}.message-actions button{min-height:36px;width:36px}.message-actions svg{width:16px;height:16px}.message-actions .time{font-size:11px;margin-left:8px}.composer-area{flex-shrink:0;width:100%;max-width:788px;margin:0 auto;padding:18px 24px 15px;background:var(--bg)}.composer{border:1px solid #cdbbc7;border-radius:14px;background:var(--panel);padding:16px 16px 12px}.composer:focus-within{border-color:var(--rose)}textarea{width:100%;min-height:48px;max-height:140px;resize:none;border:0;background:none;color:var(--ink);outline:none!important;font-size:15px;line-height:1.6;padding:0 2px}textarea::placeholder{color:var(--quiet)}.composer-tools{display:flex;align-items:center;gap:7px;margin-top:8px}.tool-label{Line truncated
@media(min-width:1500px){.thread{padding-top:65px}.topbar{padding:0 48px}.composer-area{padding-bottom:25px}}@media(max-width:960px){.sidebar{width:220px}.topbar{padding:0 24px}.badge{display:none}.tool-label{display:none}}@media(max-width:720px){.sidebar{position:fixed;inset:0 auto 0 0;width:268px;z-index:4;transform:translateX(-100%);transition:transform .2s}.drawer-open .sidebar{transform:none}.drawer-open .drawer-scrim{display:block;position:fixed;inset:0;background:rgba(30,20,30,.3);z-index:3;border-radius:0;width:100%;height:100%}.mobile-menu{display:inline-flex}.topbar{height:70px;padding:0 12px;gap:6px}.heading strong{font-size:13px}.heading small{font-size:11px;margin-top:4px}.topbar-right{gap:0}.topbar-right .theme-top{display:none}.thread{padding:24px 22px 20px}.date{margin-bottom:24px}.user-message{font-size:14px;padding:13px 16px}.prose{font-size:14px;line-height:1.8}.assistant{margin-top:28px}.composer-area{padding:10px 12px max(12px,env(safe-area-inset-bottom))}.composer{padding:13px 12px 10px}.composer-note{font-size:10px;justify-content:center}.composer-note .keyhint{display:none}.mode-button{padding:0 5px;font-size:11px}.voice-button{min-width:112px;height:44px;padding:0 10px;font-size:12px;gap:8px}.voice-symbol{height:22px;width:22px}.composer-tools{gap:0}.right-tools{gap:6px}.empty{margin-top:9vh}.empty h1{font-size:26px}.voice-session{padding-top:15px}.persona{width:154px;height:154px;gap:4px;padding:22px}.voice-session h2{font-size:22px}.voice-transcript{margin-top:23px}.demo-label{display:none}.toast{bottom:185px;width:max-content;max-width:90%}.voice-toolbar button{padding:0 12px}.composer-tools>.icon{width:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.search{font-size:12px;gap:8px}.search kbd{white-space:nowrap}.voice-button{position:relative;width:48px;min-width:48px;height:48px;padding:0;border-radius:9px}.voice-symbol{width:30px;height:30px;gap:3px;background:none;padding:2px}.voice-symbol i{width:3px;height:3px}.voice-button #voiceLabel{position:absolute;bottom:57px;right:0;white-space:nowrap;background:var(--ink);color:var(--bg);font-size:11px;padding:7px 9px;border-radius:5px;opacity:0;pointer-events:none}.voice-button:hover #voiceLabel,.voice-button:focus-visible #voiceLabel{opacity:1}.right-tools:before{content:'Talk';font-size:11px;color:var(--quiet);margin-right:3px}.voice-session h2:focus{outline:none}.demo-label{max-width:220px;line-height:1.4}@media(max-width:720px){.voice-button{width:48px;min-width:48px;height:48px}.right-tools{gap:8px}.right-tools:before{font-size:11px}.voice-symbol{width:30px;height:30px}}
.settings-window{width:min(850px,calc(100% - 32px));max-height:90dvh;padding:0;overflow:auto}.settings-window>.dialog-head{padding:22px 26px;border-bottom:1px solid var(--line)}.settings-window h2{margin:0}.settings-subtitle{margin:6px 0 0!important}.settings-layout{display:flex;min-height:420px}.settings-nav{width:195px;flex-shrink:0;background:var(--side);padding:18px 12px;border-right:1px solid var(--line)}.settings-nav button{width:100%;text-align:left;padding:0 12px;font-size:13px;margin-bottom:4px}.settings-nav .selected{background:var(--wash);color:var(--rose);font-weight:600}.settings-nav .admin-link{border-top:1px solid var(--line);margin-top:18px;border-radius:0;padding-top:10px;min-height:54px}.admin-link span{font-size:9px;margin-left:4px;color:var(--quiet)}.settings-body{flex:1;min-width:0;padding:26px 30px}.settings-body h3{font-size:18px;font-weight:600;margin:0 0 8px}.settings-body h4{font-size:13px;margin:24px 0 12px}.settings-body p{margin:8px 0 20px}.account-heading{display:flex;gap:12px;align-items:center;margin:22px 0}.account-heading .avatar{width:44px;height:44px;font-size:16px}.account-heading small,.dialog-row small,.admin-account small{display:block;margin-top:5px;color:var(--quiet);font-size:11px;line-height:1.5}.field-label{display:block;font-size:12px;font-weight:550;margin:15px 0 8px}.settings-primary{background:var(--rose);color:var(--on);padding:0 16px;margin:15px 0;font-size:12px;font-weight:550}.settings-primary:hover{background:var(--ink);color:var(--bg)}.settings-preview{padding:14px 26px;background:var(--side);border-top:1px solid var(--line);color:var(--quiet);font-size:11px}.settings-body select,#createAccountDialog select{border:1px solid var(--line);padding:10px 12px;border-radius:7px;background:var(--panel);color:var(--ink);max-width:200px;font:inherit;font-size:12px;min-height:44px}.theme-options{display:flex;gap:8px;flex-wrap:wrap}.theme-options button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:0 12px;font-size:12px}.theme-options i{height:12px;width:12px;border-radius:50%}.theme-options .selected{border-color:var(--rose);background:var(--wash)}.danger-text{color:#a32438}.dark .danger-text{color:#ff9aab}.admin-title{display:flex;align-items:center;justify-content:space-between}.admin-title button{font-size:12px;color:var(--quiet);padding:0 10px}.admin-note{font-size:11px;padding:12px;background:var(--wash);line-height:1.6;border-radius:7px;margin:14px 0}.admin-account{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--line)}.admin-account>div{flex:1;min-width:0}.admin-account strong{font-size:13px}.admin-account button{padding:0 10px;font-size:12px;background:var(--wash)}.status-pill{font-size:10px;color:var(--quiet);background:var(--side);padding:6px 8px;border-radius:6px;white-space:nowrap}.status-pill.pending{color:var(--rose);background:var(--wash)}@media(max-width:720px){.settings-window{width:calc(100% - 20px);max-height:94dvh}.settings-window>.dialog-head{padding:17px}.settings-layout{display:block}.settings-nav{width:100%;display:flex;overflow-x:auto;gap:4px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line)}.settings-nav button{width:auto;white-space:nowrap;padding:0 10px;margin:0}.settings-nav .admin-link{border:0;margin:0;padding:0 10px;min-height:44px;border-radius:8px}.settings-body{padding:22px 18px;min-height:390px}.settings-preview{padding:12px 18px}.admin-account{gap:7px}.admin-account small{font-size:10px}.dialog-row{gap:12px}.settings-body select{max-width:145px}.settings-body .dialog-row strong{font-size:12px}}
</style></head><body>
<svg hidden><defs><symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol><symbol id="search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></symbol><symbol id="folder" viewBox="0 0 24 24"><path d="M3 7V5h6l2 2h10v13H3Z"/></symbol><symbol id="pin" viewBox="0 0 24 24"><path d="m9 3 6 0-1 7 4 4H6l4-4ZM12 14v7"/></symbol><symbol id="more" viewBox="0 0 24 24"><circle cx="5" cy="12" r=".8"/><circle cx="12" cy="12" r=".8"/><circle cx="19" cy="12" r=".8"/></symbol><symbol id="chevron" viewBox="0 0 24 24"><path d="m8 10 4 4 4-4"/></symbol><symbol id="attach" viewBox="0 0 24 24"><path d="m8 13 7-7a3 3 0 0 1 4 4L9 20a5 5 0 0 1-7-7L13 2"/></symbol><symbol id="arrow" viewBox="0 0 24 24"><path d="M12 19V5m-6 6 6-6 6 6"/></symbol><symbol id="lock" viewBox="0 0 24 24"><rect x="6" y="10" width="12" height="11" rx="2"/><path d="M8 10V6a4 4 0 0 1 8 0v4"/></symbol><symbol id="copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V4H4v12h4"/></symbol><symbol id="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1"/></symbol><symbol id="menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol><symbol id="mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11v2a7 7 0 0 0 14 0v-2M12 20v2"/></symbol><symbol id="close" viewBox="0 0 24 24"><path d="m6 6 12 12M6 18 18 6"/></symbol><symbol id="branch" viewBox="0 0 24 24"><circle cx="6" cy="4" r="2"/><circle cx="6" cy="20" r="2"/><circle cx="18" cy="6" r="2"/><path d="M6 6v12m0-7h6a6 6 0 0 0 6-3"/></symbol><symbol id="activity" viewBox="0 0 24 24"><path d="M3 12h4l3-7 4 14 3-7h4"/></symbol></defs></svg>
<div class="app"><button class="drawer-scrim" aria-label="Close navigation" onclick="drawer(false)"></button><aside class="sidebar" aria-label="Main navigation"><div class="brand"><span class="brand-square" aria-hidden="true"></span>Hope</div><button class="new" id="newChat"><svg><use href="#plus"/></svg>New conversation</button><button class="search" onclick="openDialog('searchDialog')"><svg><use href="#search"/></svg>Search conversations<kbd>⌘ K</kbd></button><nav><div class="group"><div class="group-head">Workspaces<button class="icon" aria-label="Create workspace" onclick="openDialog('workspaceDialog')"><svg style="width:15px"><use href="#plus"/></svg></button></div><button class="navrow" onclick="openDialog('workspaceDialog')"><svg><use href="#folder"/></svg>Personal<span class="count">8</span></button><button class="navrow" onclick="openDialog('workspaceDialog')"><svg><use href="#folder"/></svg>Writing<span class="count">3</span></button></div><div class="group"><div class="group-head">Pinned</div><button class="navrow active" id="sampleChat"><svg><use href="#pin"/></svg>A little room to reset</button><button class="navrow" onclick="toast('Sample conversation · preview only')">Ideas worth keeping</button></div><div class="group"><div class="group-head">Recent</div><button class="navrow" onclick="toast('Sample conversation · preview only')">Planning a slower weekend</button><button class="navrow" onclick="toast('Sample conversation · preview only')">A note to future me</button><button class="navrow" onclick="toast('Sample conversation · preview only')">The things I want to make</button></div></nav><div class="sidebar-bottom"><button class="navrow" onclick="openDialog('libraryDialog')"><svg><use href="#folder"/></svg>Library</button><button class="navrow" onclick="openDialog('activityDialog')"><svg><use href="#activity"/></svg>Activity</button><button class="profile" onclick="openDialog('settingsDialog')"><span class="avatar">S</span><span>Shane<small>Personal account</small></span><svg><use href="#chevron"/></svg></button></div></aside>
<main class="main" id="main"><header class="topbar"><button class="icon mobile-menu" aria-label="Open navigation" onclick="drawer(true)"><svg><use href="#menu"/></svg></button><div class="heading"><strong id="title">A little room to reset</strong><small>Personal <span>/</span> Conversation</small></div><div class="topbar-right"><span class="badge"><svg><use href="#lock"/></svg>Only you</span><button class="icon theme-top" aria-label="Switch light or dark appearance" onclick="theme()"><svg><use href="#sun"/></svg></button><button class="icon" aria-label="Conversation actions" popovertarget="actions"><svg><use href="#more"/></svg></button></div></header>
<div class="content" id="content"><section class="thread" id="thread"><div class="date">Today</div><div class="user-message">Help me make a little room for myself this week.</div><article class="assistant"><div class="assistant-heading"><span class="mini-square" aria-hidden="true"></span>Hope</div><div class="prose"><p>Let’s make it feel lighter, not turn it into another project.</p><p>You don’t need a perfect reset. Just a few small places in the week that belong to you.</p><h2>Start with three small things</h2><ul><li><strong>One quiet morning.</strong> Keep the first twenty minutes free of messages. Coffee, a window, whatever feels like yours.</li><li><strong>One thing you can let go of.</strong> Find a commitment you made out of habit, not because it matters to you.</li><li><strong>One thing to look forward to.</strong> Put something small on the calendar before the week fills itself.</li></ul><p>What’s taking up the most space right now—your schedule, or what’s on your mind?</p></div><div class="message-actions"><button class="icon" aria-label="Copy response" onclick="toast('Response copied · preview')"><svg><use href="#copy"/></svg></button><button class="icon" aria-label="Branch conversation" onclick="toast('New branch · preview')"><svg><use href="#branch"/></svg></button><button class="icon" aria-label="More response actions" onclick="toast('Response actions · preview')"><svg><use href="#more"/></svg></button><span class="time">Just now</span></div></article></section>
<section class="empty" id="empty" hidden><span class="brand-square" aria-hidden="true"></span><h1>A little space for you.</h1><p>Think out loud, work something through, or make something new.<br>You can type, or talk to Hope.</p><div class="prompts"><button onclick="suggest('Help me think something through.')">Think something through</button><button onclick="suggest('Help me make a plan.')">Make a plan</button><button onclick="suggest('Let’s explore an idea.')">Explore an idea</button></div></section>
<section class="voice-session live" id="voiceSession" hidden aria-labelledby="voiceHeading"><div class="eyeline">Realtime conversation · interaction preview</div><div class="persona" id="persona" aria-hidden="true"></div><h2 id="voiceHeading">I’m listening.</h2><p class="sub" id="voiceSub">Just talk. You can interrupt me naturally.</p><div class="voice-toolbar"><button id="mute" aria-pressed="false"><svg><use href="#mic"/></svg><span>Mute</span></button><button onclick="openDialog('voiceDialog')">Ava <svg style="width:14px"><use href="#chevron"/></svg></button><button class="end" id="endVoice"><svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>End</button></div><div class="voice-transcript"><p><strong>You · sample transcript</strong>My schedule, mostly. Everything feels a little crowded.</p><p><strong>Hope · sample transcript</strong>Then let’s find one thing you can take off your plate. What could wait until next week?</p></div><button style="margin-top:18px;font-size:12px;color:var(--rose)" id="demoState">Preview Hope speaking</button></section></div>
<div class="composer-area"><div class="session-strip" id="sessionStrip" hidden><span class="live-dot"></span><span id="stripText">Voice conversation active · preview</span><button id="backText">Back to text</button></div><form class="composer" id="composer"><label for="message" hidden>Message Hope</label><textarea id="message" rows="2" placeholder="What’s on your mind?"></textarea><div class="composer-tools"><button type="button" class="icon" aria-label="Attach a file" onclick="openDialog('attachmentDialog')"><svg><use href="#plus"/></svg></button><button type="button" class="mode-button" id="research" aria-pressed="false">Research<svg><use href="#chevron"/></svg></button><button type="button" class="tool-label" onclick="openDialog('modelDialog')">Auto<svg style="width:12px"><use href="#chevron"/></svg></button><div class="right-tools"><button class="voice-button" type="button" id="startVoice" aria-label="Start realtime voice conversation"><span class="voice-symbol" aria-hidden="true"></span><span id="voiceLabel">Talk to Hope</span></button><button type="submit" class="icon send-button" id="send" aria-label="Send message" disabled><svg><use href="#arrow"/></svg></button></div></div></form><div class="composer-note"><span class="hint"><svg><use href="#lock"/></svg>Your conversation, private to you.</span><span class="keyhint">Enter to send · Shift + Enter for a new line</span></div></div></main></div><div class="demo-label">DESIGN PREVIEW · No microphone or backend connection</div>
<div id="actions" popover class="menu-pop"><button onclick="toast('Conversation pinned · preview')">Pin conversation</button><button onclick="openDialog('renameDialog');document.getElementById('actions').hidePopover()">Rename</button><button onclick="toast('Move to workspace · preview')">Move to workspace</button><button onclick="toast('Download conversation · preview')">Export conversation</button><button onclick="toast('Archive conversation · preview')">Archive</button><button onclick="toast('Delete requires confirmation in production')">Delete…</button></div>
<dialog id="settingsDialog" class="settings-window" aria-labelledby="settingsTitle"><div class="dialog-head"><div><h2 id="settingsTitle">Settings</h2><p class="settings-subtitle">Your Hope, the way you like it.</p></div><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close settings"><svg><use href="#close"/></svg></button></div><div class="settings-layout"><nav class="settings-nav" aria-label="Settings sections"><button class="selected" onclick="settingsPage('profile',this)">Account</button><button onclick="settingsPage('appearance',this)">Appearance</button><button onclick="settingsPage('preferences',this)">Voice & model</button><button onclick="settingsPage('privacy',this)">Memory & data</button><button onclick="settingsPage('security',this)">Security</button><button id="adminTab" class="admin-link" onclick="settingsPage('admin',this)">Administration <span>Admin</span></button></nav><div class="settings-body"><section data-settings="profile"><h3>Your account</h3><p>Personal settings belong here, separate from your conversations.</p><div class="account-heading"><span class="avatar">S</span><div><strong>Shane</strong><small>@shane · Administrator · sample account</small></div></div><label class="field-label" for="displayName">Display name</label><input id="displayName" class="search-input" value="Shane"><div class="dialog-row"><span>Username</span><span>shane</span></div><button class="settings-primary" onclick="toast('Profile saved in this preview only')">Save changes</button><div class="dialog-row"><div><strong>Sign out</strong><small>End this session on this device.</small></div><button onclick="confirmPreview('Sign out of Hope?', 'Production will end this device’s session and clear private local state. This preview will not sign you out.')">Sign out</button></div></section><section data-settings="appearance" hidden><h3>Appearance</h3><p>One visual identity across text, realtime voice, and your devices.</p><div class="dialog-row"><span>Appearance</span><select aria-label="Appearance" onchange="document.body.classList.toggle('dark',this.value==='dark'||this.value==='system'&&matchMedia('(prefers-color-scheme:dark)').matches)"><option>Light</option><option value="dark">Dark</option><option value="system">System</option></select></div><h4>Color theme</h4><div class="theme-options"><button class="selected" onclick="previewPalette('opal',this)"><i style="background:#a64270"></i>Opal Pink</button><button onclick="previewPalette('graphite',this)"><i style="background:#505969"></i>Graphite</button><button onclick="previewPalette('ocean',this)"><i style="background:#27658c"></i>Ocean</button><button onclick="previewPalette('sage',this)"><i style="background:#3c704d"></i>Sage</button><button onclick="previewPalette('lavender',this)"><i style="background:#70529c"></i>Lavender</button></div></section><section data-settings="preferences" hidden><h3>Voice & model</h3><p>Voice is a live conversation—not a dictation feature.</p><div class="dialog-row"><div><strong>Hope’s voice</strong><small>Applies to spoken responses.</small></div><select aria-label="Preferred voice"><option>Ava · sample</option><option>Andrew · sample</option></select></div><div class="dialog-row"><div><strong>Model</strong><small>Production lists your available models.</small></div><select aria-label="Preferred model"><option>Account default · sample</option></select></div><div class="dialog-row"><span>Thinking</span><select aria-label="Thinking level"><option>None</option><option>Low</option><option selected>Medium</option><option>High</option></select></div><p>Model and thinking changes apply to the next request, without interrupting an active conversation. Voice options here are illustrative.</p><button class="settings-primary" onclick="toast('Preferences saved in this preview only')">Save preferences</button></section><section data-settings="privacy" hidden><h3>Memory & data</h3><p>You control retained personal context and files. Workspaces organize conversations; they do not isolate tool access.</p><div class="dialog-row"><div><strong>Saved memory</strong><small>Review what Hope remembers.</small></div><button onclick="toast('Memory editor opens here after implementation')">Review</button></div><div class="dialog-row"><div><strong>Personal context</strong><small>Review your user profile notes.</small></div><button onclick="toast('Personal context editor · preview')">Review</button></div><div class="dialog-row"><span>Uploaded files & artifacts</span><button onclick="openDialog('libraryDialog')">Open Library</button></div><div class="dialog-row"><div><strong>Clear saved memory</strong><small>Requires explicit confirmation.</small></div><button class="danger-text" onclick="confirmPreview('Clear saved memory?', 'This does not delete conversations, files, or all Hermes history. An active session may retain cached context. No data is changed in this preview.')">Clear…</button></div><p>Temporary no-memory chatsLine truncated
<dialog id="createAccountDialog" aria-labelledby="createTitle"><div class="dialog-head"><h2 id="createTitle">Create account</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close create account">×</button></div><form id="createPreviewAccount"><label class="field-label" for="newUser">Username</label><input class="search-input" id="newUser" required maxlength="64" autocomplete="off"><label class="field-label" for="newName">Display name</label><input class="search-input" id="newName" required maxlength="120"><label class="field-label" for="newRole">Role</label><select id="newRole"><option>User</option><option>Administrator</option></select><label class="field-label" for="newPassword">Initial password</label><input class="search-input" id="newPassword" type="password" minlength="12" required autocomplete="new-password"><p>Use a fictional password for this preview. Nothing is transmitted or persisted. Production provisions a separate private assistant.</p><button class="settings-primary" type="submit">Create sample account</button></form></dialog>
<dialog id="manageAccountDialog" aria-labelledby="manageTitle"><div class="dialog-head"><h2 id="manageTitle">Manage account</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close manage account">×</button></div><div class="dialog-row"><span>Role</span><span id="managedRole"></span></div><p>Role is visible at creation. Changing an existing role requires an explicitly supported server contract; no fake role editor is offered here.</p><div class="dialog-row"><span>Private assistant</span><span>Owned by this account</span></div><button class="navrow" onclick="toast('Provisioning retry · simulated only')">Retry failed provisioning</button><button class="navrow" onclick="confirmPreview('Reset this account’s password?', 'Production requires a new password and revokes existing sessions. This preview does not alter credentials.')">Reset password…</button><button class="navrow danger-text" onclick="confirmPreview('Delete this account?', 'Production must explicitly confirm account deletion and its retention policy. No account, container, or private files are deleted here.')">Delete account…</button></dialog>
<dialog id="confirmDialog" aria-labelledby="confirmTitle"><h2 id="confirmTitle"></h2><p id="confirmBody"></p><div style="display:flex;justify-content:flex-end;gap:8px"><button onclick="this.closest('dialog').close()">Cancel</button><button class="settings-primary" onclick="this.closest('dialog').close();toast('Confirmed in preview only · no live changes')">Confirm preview</button></div></dialog>
<dialog id="searchDialog"><div class="dialog-head"><h2>Find a conversation</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close search">×</button></div><input class="search-input" placeholder="Search titles and messages" aria-label="Search titles and messages"><button class="navrow" onclick="showSample();this.closest('dialog').close()">A little room to reset</button><p>Sample search results · no account data is accessed.</p></dialog>
<dialog id="workspaceDialog"><div class="dialog-head"><h2>Your workspaces</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close workspaces">×</button></div><div class="dialog-row"><span>Personal</span><span>8 conversations</span></div><div class="dialog-row"><span>Writing</span><span>3 conversations</span></div><p>Group conversations and set instructions here. Workspace editing belongs in this view—not beneath every sidebar item.</p></dialog>
<dialog id="libraryDialog"><div class="dialog-head"><h2>Library</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close library">×</button></div><div class="dialog-row"><span>Saved artifacts</span><span>2</span></div><div class="dialog-row"><span>Uploaded files</span><span>4</span></div><p>Files and saved work live together. They don’t compete with your conversation history.</p></dialog>
<dialog id="activityDialog"><div class="dialog-head"><h2>Activity</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close activity">×</button></div><div class="dialog-row"><span>Weekly reflection</span><span>Paused · sample</span></div><p>Scheduled tasks and assistant activity. No tasks run from this preview.</p></dialog>
<dialog id="attachmentDialog"><div class="dialog-head"><h2>Add to the conversation</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close attachments">×</button></div><button class="navrow" onclick="toast('File picker · preview only')"><svg><use href="#attach"/></svg>Upload a file or photo</button><button class="navrow" onclick="openDialog('libraryDialog')"><svg><use href="#folder"/></svg>Choose from your library</button><p>Documents and images appear as removable attachment chips above the composer controls.</p></dialog>
<dialog id="voiceDialog"><div class="dialog-head"><h2>Hope’s voice</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close voice selection">×</button></div><button class="navrow active" onclick="toast('Ava selected · preview')">Ava · Warm and natural ✓</button><button class="navrow" onclick="toast('Voice selection · preview')">Andrew · Calm and clear</button><p>Your voice choice applies to the conversation. This preview plays no audio.</p></dialog>
<dialog id="modelDialog"><div class="dialog-head"><h2>Model & thinking</h2><button class="icon" onclick="this.closest('dialog').close()" aria-label="Close model selection">×</button></div><div class="dialog-row"><span>Model</span><span>Auto · sample</span></div><div class="dialog-row"><span>Thinking</span><span>Standard</span></div><p>Production will show the account’s actual available models, not invented choices.</p></dialog>
<dialog id="renameDialog"><h2>Rename conversation</h2><form method="dialog"><input class="search-input" id="renameValue" aria-label="Conversation name" value="A little room to reset"><div style="display:flex;justify-content:flex-end;gap:8px;margin-top:15px"><button>Cancel</button><button id="renameSave" style="padding:0 15px;background:var(--wash)">Save</button></div></form></dialog>
<div class="toast" role="status" id="toast" hidden></div>
<script>
const $=id=>document.getElementById(id);let voice=false,voiceVisible=false,speaking=false,previous='thread',toastTimer;document.querySelectorAll('.voice-symbol').forEach(el=>{for(let i=0;i<25;i++)el.append(document.createElement('i'))});for(let i=0;i<169;i++){const d=document.createElement('i');d.style.setProperty('--n',i%13);$('persona').append(d)}
function toast(text){$('toast').textContent=text;$('toast').hidden=false;clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('toast').hidden=true,2600)}function openDialog(id){drawer(false);$(id).showModal()}function theme(){document.body.classList.toggle('dark')}function drawer(on){document.body.classList.toggle('drawer-open',on);$('main').inert=on;document.querySelector('.mobile-menu').setAttribute('aria-expanded',on)}function display(id){['thread','empty','voiceSession'].forEach(x=>$(x).hidden=x!==id);if(id==='voiceSession'){$(previous).hidden=false;$('content').prepend($('voiceSession'))} $('content').scrollTop=0}function showSample(){if(voice)endVoice();previous='thread';display('thread');$('title').textContent='A little room to reset';drawer(false)}function suggest(text){$('message').value=text;$('message').dispatchEvent(new Event('input'));$('message').focus()}
$('newChat').onclick=()=>{if(voice)endVoice();previous='empty';display('empty');$('title').textContent='New conversation';$('message').value='';$('send').disabled=true;drawer(false);$('message').focus()};$('sampleChat').onclick=showSample;
$('message').oninput=()=>{$('send').disabled=voice||!$('message').value.trim()};$('message').onkeydown=e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();if(!$('send').disabled)$('composer').requestSubmit()}};$('composer').onsubmit=e=>{e.preventDefault();const text=$('message').value.trim();if(!text)return;if(voice){toast('End voice to send. Your typed draft is kept.');return}if(previous==='empty'){$('thread').replaceChildren();previous='thread';$('title').textContent=text.slice(0,35)}display('thread');const msg=document.createElement('div');msg.className='user-message';msg.textContent=text;msg.style.marginTop='24px';$('thread').append(msg);const reply=document.createElement('div');reply.className='assistant prose';reply.textContent='This is an interface preview. Your message stays here locally; no model or backend is connected.';$('thread').append(reply);$('message').value='';$('send').disabled=true;$('content').scrollTop=$('content').scrollHeight};
$('startVoice').onclick=()=>{voice=true;voiceVisible=true;display('voiceSession');$('send').disabled=true;$('sessionStrip').hidden=false;$('voiceLabel').textContent='Return to voice';$('startVoice').setAttribute('aria-label','Return to realtime voice conversation');$('voiceHeading').focus();toast('Voice interaction preview · microphone is not accessed')};function endVoice(){voice=false;voiceVisible=false;display(previous);$('send').disabled=!$('message').value.trim();$('backText').textContent='Back to text';$('sessionStrip').hidden=true;$('voiceLabel').textContent='Talk to Hope';$('startVoice').setAttribute('aria-label','Start realtime voice conversation');$('startVoice').focus()}$('endVoice').onclick=endVoice;$('backText').onclick=()=>{voiceVisible=!voiceVisible;display(voiceVisible?'voiceSession':previous);$('backText').textContent=voiceVisible?'Back to text':'Show voice';$('stripText').textContent='Voice remains active · preview';$('message').focus()};$('mute').onclick=()=>{const muted=$('mute').getAttribute('aria-pressed')!=='true';$('mute').setAttribute('aria-pressed',muted);$('mute').querySelector('span').textContent=muted?'Unmute':'Mute';$('voiceHeading').textContent=muted?'Microphone paused.':speaking?'I’m with you.':'I’m listening.';$('voiceSub').textContent=muted?'You’re still connected. Unmute whenever you’re ready.':'Just talk. You can interrupt me naturally.'};$('demoState').onclick=()=>{speaking=!speaking;$('voiceHeading').textContent=speaking?'I’m with you.':'I’m listening.';$('voiceSub').textContent=speaking?'Hope is speaking. You can interrupt anytime.':'Just talk. You can interrupt me naturally.';$('demoState').textContent=speaking?'Preview listening':'Preview Hope speaking'};$('research').onclick=()=>{const on=$('research').getAttribute('aria-pressed')!=='true';$('research').setAttribute('aria-pressed',on);$('research').style.color=on?'var(--rose)':'var(--quiet)';toast(on?'Research mode · preview':'Standard conversation · preview')};$('renameSave').onclick=()=>{$('title').textContent=$('renameValue').value||'Untitled conversation'};document.addEventListener('keydown',e=>{if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();openDialog('searchDialog')}if(e.key==='Escape')drawer(false)});
function settingsPage(name,button){document.querySelectorAll('[data-settings]').forEach(el=>el.hidden=el.dataset.settings!==name);document.querySelectorAll('.settings-nav button').forEach(el=>el.classList.toggle('selected',el===button));}
function confirmPreview(title,body){$('confirmTitle').textContent=title;$('confirmBody').textContent=body;openDialog('confirmDialog')}
function manageAccount(name,role){$('manageTitle').textContent='Manage '+name;$('managedRole').textContent=role;openDialog('manageAccountDialog')}
function previewRole(){const user=!$('adminTab').hidden;$('adminTab').hidden=user;if(user){settingsPage('profile',document.querySelector('.settings-nav button'));toast('User preview · administration hidden. Reopen this HTML to restore admin preview.')}}
function previewPalette(name,button){const colors={opal:'#a64270',graphite:'#505969',ocean:'#27658c',sage:'#3c704d',lavender:'#70529c'};document.documentElement.style.setProperty('--rose',colors[name]);document.querySelectorAll('.theme-options button').forEach(el=>el.classList.toggle('selected',el===button));toast('Theme accent preview · '+name)}
$('createPreviewAccount').onsubmit=e=>{e.preventDefault();const name=$('newName').value,user=$('newUser').value,role=$('newRole').value;const row=document.createElement('div');row.className='admin-account';const info=document.createElement('div'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=name;small.textContent='@'+user+' · '+role;info.append(strong,small);const status=document.createElement('span');status.className='status-pill pending';status.textContent='Sample only';const manage=document.createElement('button');manage.textContent='Manage';manage.onclick=()=>manageAccount(name,role);row.append(info,status,manage);$('adminAccounts').append(row);$('newPassword').value='';$('createAccountDialog').close();toast('Sample account added · no provisioning or saved password')};
</script></body></html>