design: record approved Hope conversation and administration overhaul

design/HOPE_UX_REVIEW.md

@@ -0,0 +1,53 @@
+# Hope interface review and approval proposal
+
+## Scope and method
+Approval-only overhaul. Production web and native UI are unchanged by this proposal.
+Independent assessments: product design (4638a6b7-0052-4043-924b-d20d21345fc1) and technical evidence (7d81a007-b618-49c2-91a5-22a92c0c1903). Both read current source and desktop/mobile screenshots independently. Technical assessment also ran the detector and offline Chromium tests. No production logins, microphone access, or live mutations during review.
+
+## Verdict
+Hope's calm reading surface is a good foundation. The structure undermines its distinctive promise: a realtime companion with a recognizable square presence. Text chat and voice behave like separate products. The visible Talk button navigates to another screen and focuses another Start button; it does not start talking. The desktop header exposes specialist conversation administration at the same priority as the conversation itself.
+
+### Heuristic assessment
+Source/static screenshot quality scores; not a claim of complete live usability qualification.
+
+| Heuristic | Score / 4 | Main problem |
+|---|---:|---|
+| System status | 2 | Microphone/session state leaves the composer |
+| Real-world match | 2 | Talk is a two-step navigation detour |
+| Control and freedom | 2 | Split context for voice and text |
+| Consistency | 1 | Separate chat/voice identities and layouts |
+| Error prevention | 3 | Safe branching and confirmations are sound |
+| Recognition | 2 | Voice/account conflated; too many concepts |
+| Efficiency | 3 | Shortcuts/history are useful; voice takes extra steps |
+| Minimalism | 2 | Management toolbar and feature stack clutter |
+| Recovery | 2 | Repair/status are remote from composing |
+| Help | 1 | Realtime vs dictation and mic truth need explanation |
+| Total | **20 / 40** | Major structural improvement warranted |
+
+## Priority findings
+1. **P1 — Voice is a portal instead of an input method.** Put a labeled square Lightwell control inside the composer. In production, its intentional activation starts the permission/connection flow directly, not merely another screen. Keep the transcript and draft in place.
+2. **P1 — Active voice needs persistent session truth.** Connecting, listening, thinking, speaking, muted, reconnecting, ending, failed, and ended must map to real state. Mute and End remain reachable. Never indicate mic-on before connection and microphone readiness are verified. Preserve editable drafts; current text-send exclusion must remain explicit.
+3. **P1 — Light-theme voice transcript contrast fails.** A hardcoded dark background inherits dark Opal text: heading 1.35:1; muted copy 3.15:1. Replace the inconsistent legacy surface with shared semantic tokens. Primary-chat text contrast passed and should not be misreported as a failure.
+4. **P2 — Management competes with conversation.** Group pin, rename, move, export, archive, delete into a clear overflow menu. Attachments belong inside the composer. Secondary tools belong in Library/Activity/account controls.
+5. **P2 — Signature identity is disconnected.** Replace the generic star/mic approach with a square matrix presence, sampled for legibility at button scale. Use text and pattern as well as color to communicate state. Avoid an orb, decorative glow, or dictation icon as the primary voice affordance.
+
+## Technical evidence
+Detector: three warnings, one rule `layout-transition`, one file `web/style.css`, lines 371/613/792. Active voice animates LED size, meter width and waveform height. No measured jank claim. Reduced-motion CSS does not stop JS-driven layout changes.
+Offline current-product browser suite: seven passed. No horizontal overflow at 390px or 320px. Drawer inert/Escape behavior and draft preservation work. Some 30–40px actions fall below preferred 44px comfort, not automatically below WCAG's 24px minimum. Timeline completion announcements exist, but response replacement/focus and screenreader reading need deliberate treatment.
+No user-visible detector overlay was created; evidence is source, screenshots, computed browser styles and offline tests. No temporary servers remained running.
+
+## Proposal design commitments
+- Physical scene: a person switching between quiet typing and natural conversation at their desk or on a phone; calm light Opal is the default, with a fully composed dark variant.
+- Restrained color strategy: pink identity at moments of action/presence, not everywhere.
+- One system sans family; 14–15px reading copy; 740px rail; distinct content, navigation and input responsibilities.
+- Square matrix action sits beside Send in the composer. Label reads Talk to Hope, accessible name Start realtime voice conversation. It is not dictation.
+- Inline square persona appears in the same scrolling conversation surface. Existing transcript remains available; no separate voice application takeover.
+- User action activates a simulated listening state only in this HTML. The preview neither requests microphone permission nor starts a backend session.
+- Voice mute/end and speaking/listening examples are interactive. Text draft survives; text sending is disabled until simulated voice ends, reflecting the currently implemented exclusion.
+- Mobile keeps the action in the bottom composer with 44px targets, drawer navigation, safe-area padding and no horizontal overflow.
+- Native dialogs, accessible labels, keyboard focus, Escape, reduced motion and light/dark states.
+
+## Approval boundary
+The standalone HTML contains illustrative sample data and simulated controls. Search, settings, Library and Activity demonstrate information architecture, not complete production feature implementations. Connection, permission denial, reconnecting, approval, upload progress, errors and physical keyboard/microphone behavior still require implementation and qualification after approval.
+
+**Nothing in this proposal authorizes production replacement.** User approval is required before adapting the real UI, and the real voice flow must be validated without regressing interruption, mic truth, draft retention, conversation ownership or account isolation.

design/hope-interface-proposal.html

@@ -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>