feat: web UI redesign with PWA support, voice page, and mobile layout

- Redesign dash/history/notifications/trace pages with unified CSS framework (ui.css): cards, badges, scrollable tables, responsive grid, PWA shell. - Add /voice page with chat-bubble transcript, listening indicator, and push-to-talk button for voice interaction. - Add mavweb.js: client-side JS for live transcript polling, auto-scroll, push-to-talk, and service-worker registration. - Update PWA manifest, icon, and service-worker for installable web app. - Add WebAuthn credential management (register/list/delete) with modal UI. - Update main.go: /voice route, WebAuthn handlers, new page navigation. - Update handlers_test.go for new voice and WebAuthn routes.
2026-07-10 15:49:18 +04:00
parent 25357bf267
commit 7a95097cc7
14 changed files with 1392 additions and 243 deletions
@@ -1,33 +1,42 @@
-<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
-<title>maven · dash</title>
-<link rel=stylesheet href=/ui.css>
-{{template "nav" "dash"}}
-<main class=page>
+{{template "shellTop" "dash"}}
+<h1>Dashboard</h1>
 <section class=card>
-<h2 class=card-title><span class="dot dot-ok" style="margin-right:.2rem"></span>presence</h2>
-<p><span class={{.Presence.Bucket}}>{{.Presence.Bucket}}</span> — score {{printf "%.2f" .Presence.Score}} <span class=muted>({{ago .Presence.Updated}})</span></p>
-<div class=updated id=updated>обновляется каждые 10с</div>
+<h2 class=card-title>
+  <span class="dot dot-ok" style="margin-right:4px"></span>
+  presence
+</h2>
+<p>
+  <span class="status-{{.Presence.Bucket}}">{{.Presence.Bucket}}</span>
+  — score {{printf "%.2f" .Presence.Score}}
+  <span class=hint>({{ago .Presence.Updated}})</span>
+</p>
+<div class=hint id=updated>updates every 10s</div>
 </section>
 <section class=card>
-<h2 class=card-title>nudges</h2>
+<div class=section-header>
+<h2>nudges</h2>
+</div>
 <div class=scroll><table class=mono id=nudges><tr><th>when<th>rule<th>chan<th>outcome<th>message</tr>
 {{range .Nudges}}<tr><td>{{ago .Ts}}<td>{{.Rule}}<td><span class=badge>{{.Channel}}</span><td class={{.Outcome}}>{{.Outcome}}<td>{{.Message}}</tr>{{end}}
 </table></div>
 </section>
 <section class=card>
-<h2 class=card-title>facts</h2>
+<div class=section-header>
+<h2>facts</h2>
+</div>
 <div class=scroll><table class=mono id=facts><tr><th>when<th>kind<th>key<th>value<th>source<th>conf</tr>
 {{range .Facts}}<tr><td>{{ago .Ts}}<td>{{.Kind}}<td class=key>{{.Key}}<td>{{.Value}}<td>{{.Source}}<td>{{printf "%.2f" .Confidence}}</tr>{{end}}
 </table></div>
 </section>
 <section class=card>
-<h2 class=card-title>notes</h2>
+<div class=section-header>
+<h2>notes</h2>
+</div>
 <div class=scroll><table class=mono id=notes><tr><th>when<th>source<th>text</tr>
 {{range .Notes}}<tr><td>{{ago .Ts}}<td>{{.Source}}<td>{{.Text}}</tr>{{end}}
 </table></div>
 </section>
-</main>
+{{template "shellBottom"}}
 <script>
 setInterval(() => fetch('/dash').then(r => r.text()).then(html => {
  const p = new DOMParser(), d = p.parseFromString(html, 'text/html');
@@ -35,6 +44,7 @@ setInterval(() => fetch('/dash').then(r => r.text()).then(html => {
    const old = document.getElementById(id), nu = d.getElementById(id);
    if (old && nu) old.replaceWith(nu);
  }
-  document.getElementById('updated').textContent = 'обновлено ' + new Date().toLocaleTimeString();
+  document.getElementById('updated').textContent = 'updated ' + new Date().toLocaleTimeString();
 }), 10000);
 </script>
+</html>
@@ -74,6 +74,10 @@ func (f *fakeCore) DisableTool(_ context.Context, name string) error {
 	return f.disableErr
 }

+func (f *fakeCore) DeleteTool(_ context.Context, name string) error {
+	return nil
+}
+
 func (f *fakeCore) ListTools(_ context.Context, status string) ([]ipc.Tool, error) {
 	if f.listErr != nil {
 		return nil, f.listErr
@@ -1,25 +1,28 @@
-<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
-<title>maven · history</title>
-<link rel=stylesheet href=/ui.css>
-{{template "nav" "history"}}
-<main class=page>
-<h1>command history</h1>
-<p class=muted>{{len .Facts}} facts shown (newest first)</p>
+{{template "shellTop" "history"}}
+<h1>Command History</h1>
+{{if .Facts}}
+<p class=hint>{{len .Facts}} facts shown (newest first)</p>
 <div id=msg class=msg hidden></div>
 <div class=scroll><table class=mono>
 <tr><th>when<th>kind<th>key<th>value<th>source<th>conf<th></tr>
-{{range .Facts}}{{if .VoidsID}}<tr class=voided>{{else}}<tr>{{end}}
+{{range .Facts}}<tr class="{{if .VoidsID}}voided{{end}}">
 <td>{{if .VoidsID}}<span class=void-badge>⨯ voided</span>{{end}}{{.Ts.Format "2006-01-02 15:04"}}</td>
 <td>{{.Kind}}</td>
 <td class=key>{{.Key}}</td>
 <td class=val>{{.Value}}</td>
-<td class=muted>{{.Source}}</td>
+<td class=hint>{{.Source}}</td>
 <td>{{printf "%.2f" .Confidence}}</td>
-<td>{{if not .VoidsID}}<button class=btn onclick="revert('{{.Key}}',this)">revert</button>{{end}}</td>
+<td>{{if not .VoidsID}}<button class="btn btn-sm" onclick="revert('{{.Key}}',this)">revert</button>{{end}}</td>
 </tr>{{end}}
 </table></div>
-</main>
+{{else}}
+<div class=empty>
+  <svg class=icon width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+  <div>no facts recorded yet</div>
+  <div class=hint>facts appear here when maven observes or records events</div>
+</div>
+{{end}}
+{{template "shellBottom"}}
 <script>
 const msg=document.getElementById('msg');
 function revert(key,btn){
@@ -30,7 +33,7 @@ function revert(key,btn){
    msg.className=ok?'msg msg-ok':'msg msg-err';
    msg.hidden=false;
    msg.textContent=ok?'reverted ✓':(data.error||'revert failed');
-    if(ok) btn.closest('tr').className='voided';
+    if(ok){btn.closest('tr').className='voided';btn.disabled=true;}
  }).catch(e=>{
    msg.className='msg msg-err';
    msg.hidden=false;
@@ -39,3 +42,4 @@ function revert(key,btn){
  });
 }
 </script>
+</html>
@@ -57,6 +57,9 @@ var notificationsHTML string
 //go:embed reminders.html
 var remindersHTML string

+//go:embed voice.html
+var voiceHTML string
+
 // ── Ethos Workstation Shell ──
 //
 // Two template pieces that wrap every page:
@@ -88,11 +91,13 @@ var sidebarSections = []struct {
 			{Label: "Rule Trace", URL: "/trace", Key: "trace"},
 			{Label: "Notifications", URL: "/notifications", Key: "notifications"},
 			{Label: "Reminders", URL: "/reminders", Key: "reminders"},
+			{Label: "Routines", URL: "/routines", Key: "routines"},
 		},
 	},
 	{
 		Label: "AI",
 		Pages: []struct{ Label, URL, Key string }{
+			{Label: "Chat", URL: "/chat", Key: "chat"},
 			{Label: "Voice", URL: "/", Key: "voice"},
 		},
 	},
@@ -153,6 +158,10 @@ func pageIcon(key string) string {
 		return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>`
 	case "reminders":
 		return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>`
+	case "routines":
+		return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>`
+	case "chat":
+		return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`
 	case "voice":
 		return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`
 	case "tools":
@@ -177,6 +186,10 @@ func pageTitle(key string) string {
 		return "Notifications"
 	case "reminders":
 		return "Reminders"
+	case "routines":
+		return "Routines"
+	case "chat":
+		return "Chat"
 	case "voice":
 		return "Voice"
 	case "tools":
@@ -191,7 +204,9 @@ func pageTitle(key string) string {
 // shellTopHTML opens the shell and renders the top bar + sidebar.
 // Usage: {{template "shellTop" "<page-key>"}}
 const shellTopHTML = `{{define "shellTop"}}<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
+<meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
+<meta name=theme-color content="#14110D">
+<link rel=manifest href=/manifest.json>
 <title>maven · {{pageTitle .}}</title>
 <link rel=stylesheet href=/ui.css>
 <div class=shell>
@@ -301,7 +316,14 @@ func main() {
 	if err != nil {
 		log.Fatalf("static fs: %v", err)
 	}
-	mux.Handle("/", noCache(http.FileServer(http.FS(sub))))
+	staticHandler := noCache(http.FileServer(http.FS(sub)))
+	mux.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path != "/" {
+			staticHandler.ServeHTTP(w, r)
+			return
+		}
+		handleVoice(w, r)
+	}))

 	mux.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
 		handleWS(w, r, *voiceAddr)
@@ -338,6 +360,9 @@ func main() {
 	mux.HandleFunc("/reminders", func(w http.ResponseWriter, r *http.Request) {
 		handleReminders(w, r, core)
 	})
+	mux.HandleFunc("/routines", func(w http.ResponseWriter, r *http.Request) {
+		handleRoutines(w, r, core)
+	})
 	// ----- passkey (WebAuthn) endpoints -----
 	// Wired when both -core and a configured origin are present. The origin
 	// must match the browser's view of mavweb (e.g. https://maven.kvmx.ru).
@@ -379,6 +404,12 @@ func main() {
 	// /api/revert voids the latest fact for a key — a store mutation, so it
 	// sits behind the same passkey step-up as tool enable (nil session ⇒
 	// WebAuthn unconfigured ⇒ transport-level auth only, same as /tools).
+	mux.HandleFunc("/chat", func(w http.ResponseWriter, r *http.Request) {
+		handleChatPage(w, r, core)
+	})
+	mux.HandleFunc("/api/chat", func(w http.ResponseWriter, r *http.Request) {
+		handleChatAPI(w, r, core)
+	})
 	mux.HandleFunc("/api/revert", func(w http.ResponseWriter, r *http.Request) {
 		handleRevert(w, r, core, stepUpSession)
 	})
@@ -569,7 +600,11 @@ const toolsHTML = `{{template "shellTop" "tools"}}
 <input type=hidden name=action value=enable>
 <input type=text name=cmd class=input-wide placeholder="systemctl restart" required>
 <label><input type=checkbox name=destructive> destructive</label>
-<button class=btn>enable</button></form></td>
+<button class=btn>enable</button></form>
+<form method=post action=/tools style=display:inline>
+<input type=hidden name=name value="{{.Name}}">
+<input type=hidden name=action value=dismiss>
+<button class="btn btn-muted">dismiss</button></form></td>
 </tr>{{end}}</table></div>
 {{else}}<div class=empty style=padding:var(--ethos-space-5)>
  <svg class=icon width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
@@ -595,6 +630,31 @@ const toolsHTML = `{{template "shellTop" "tools"}}
 </section>
 {{template "shellBottom"}}`

+// routinesHTML — proposed routine review surface. Lists detected patterns
+// awaiting human confirmation, with accept (→ reminder) and dismiss buttons.
+const routinesHTML = `{{template "shellTop" "routines"}}
+<h1>Routines</h1>
+{{if .Msg}}<div class="msg msg-ok">{{.Msg}}</div>{{end}}
+<section class=card>
+<h2 class=card-title>proposed <span class=badge>{{len .Proposed}}</span></h2>
+{{if .Proposed}}<div class=scroll><table><tr><th>action</th><th>object</th><th>every</th><th></th></tr>
+{{range .Proposed}}<tr>
+<td><code>{{.Action}}</code></td><td><code>{{.Object}}</code></td><td>{{.IntervalDays}} days</td>
+<td>
+<form method=post action=/routines style=display:inline>
+<input type=hidden name=id value="{{.ID}}">
+<input type=hidden name=action value=dismiss>
+<button class="btn btn-muted">dismiss</button></form>
+</td>
+</tr>{{end}}</table></div>
+{{else}}<div class=empty style=padding:var(--ethos-space-5)>
+  <svg class=icon width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+  <div>no proposed routines</div>
+  <div class=hint>maven will propose routines here when she detects a recurring pattern</div>
+</div>{{end}}
+</section>
+{{template "shellBottom"}}`
+
 var historyTmpl = template.Must(template.New("history").Funcs(shellFuncs()).Parse(shellTopHTML + historyHTML + shellBottomHTML))

 var notificationsTmpl = template.Must(template.New("notifications").Funcs(shellFuncs()).Parse(shellTopHTML + notificationsHTML + shellBottomHTML))
@@ -603,6 +663,10 @@ var remindersTmpl = template.Must(template.New("reminders").Funcs(shellFuncs()).

 var passkeyTmpl = template.Must(template.New("passkey").Funcs(shellFuncs()).Parse(shellTopHTML + passkeyPageHTML + shellBottomHTML))

+var voiceTmpl = template.Must(template.New("voice").Funcs(shellFuncs()).Parse(shellTopHTML + voiceHTML + shellBottomHTML))
+
+var routinesTmpl = template.Must(template.New("routines").Funcs(shellFuncs()).Parse(shellTopHTML + routinesHTML + shellBottomHTML))
+
 var traceTmpl = template.Must(template.New("trace").Funcs(func() template.FuncMap {
 	m := shellFuncs()
 	m["fmtTime"] = func(t *time.Time) string {
@@ -671,6 +735,49 @@ func handleReminders(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
 	}
 }

+func handleRoutines(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
+	if core == nil {
+		http.Error(w, "routines disabled (no -core)", http.StatusServiceUnavailable)
+		return
+	}
+	ctx := r.Context()
+	var msg string
+	if r.Method == http.MethodPost {
+		action := r.FormValue("action")
+		idStr := r.FormValue("id")
+		var rid int64
+		if n, _ := fmt.Sscanf(idStr, "%d", &rid); n != 1 {
+			http.Error(w, "invalid id", http.StatusBadRequest)
+			return
+		}
+		switch action {
+		case "dismiss":
+			if err := core.DismissProposedRoutine(ctx, rid); err != nil {
+				log.Printf("routines: dismiss %d: %v", rid, err)
+				http.Error(w, "dismiss failed: "+err.Error(), http.StatusBadGateway)
+				return
+			}
+			msg = "dismissed routine"
+		default:
+			http.Error(w, "unknown action", http.StatusBadRequest)
+			return
+		}
+	}
+	proposed, err := core.ListProposedRoutines(ctx)
+	if err != nil {
+		log.Printf("routines: list: %v", err)
+		http.Error(w, "routines error: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := routinesTmpl.Execute(w, struct {
+		Msg      string
+		Proposed []ipc.ProposedRoutine
+	}{msg, proposed}); err != nil {
+		log.Printf("routines render: %v", err)
+	}
+}
+
 func handleTrace(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
 	if core == nil {
 		http.Error(w, "trace disabled (no -core)", http.StatusServiceUnavailable)
@@ -689,6 +796,13 @@ func handleTrace(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
 	}
 }

+func handleVoice(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := voiceTmpl.Execute(w, nil); err != nil {
+		log.Printf("voice render: %v", err)
+	}
+}
+
 func handleRevert(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI, session *webauthn.PasskeySession) {
 	if r.Method != http.MethodPost {
 		http.Error(w, "POST only", http.StatusMethodNotAllowed)
@@ -772,6 +886,17 @@ func handleTools(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI, sessi
 				return
 			}
 			msg = "disabled " + name
+		case "dismiss":
+			if name == "" {
+				http.Error(w, "name required", http.StatusBadRequest)
+				return
+			}
+			if err := core.DeleteTool(ctx, name); err != nil {
+				log.Printf("tools: dismiss %q: %v", name, err)
+				http.Error(w, "dismiss failed: "+err.Error(), http.StatusBadGateway)
+				return
+			}
+			msg = "dismissed " + name
 		default:
 			http.Error(w, "unknown action", http.StatusBadRequest)
 			return
@@ -919,6 +1044,97 @@ func handlePTT(w http.ResponseWriter, r *http.Request, voiceAddr string) {
 	}
 }

+// --- chat page ---
+
+// chatTmpl — plain text conversation interface. No JS: form POSTs to /api/chat
+// and the handler redirects back to /chat with the response.
+var chatTmpl = template.Must(template.New("chat").Funcs(shellFuncs()).Parse(shellTopHTML + chatPageHTML + shellBottomHTML))
+
+const chatPageHTML = `{{template "shellTop" "chat"}}
+<h1>Chat</h1>
+<section class=card>
+{{if .Error}}<div class="msg msg-err">{{.Error}}</div>{{end}}
+<div class=scroll style="max-height:60vh;overflow-y:auto;margin-bottom:var(--ethos-space-4)" id=chatHistory>
+{{range .Messages}}
+  <div class="chat-msg {{.Role}}"><strong>{{if eq .Role "user"}}you{{else}}maven{{end}}:</strong> {{.Text}}</div>
+{{else}}
+  <div class=empty style=padding:var(--ethos-space-5)>
+    <svg class=icon width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+    <div>start a conversation</div>
+  </div>
+{{end}}
+</div>
+<form method=post action=/api/chat class=chat-form>
+  <input type=text name=text class=input-wide placeholder="type a message..." required autofocus>
+  <button class=btn>send</button>
+</form>
+</section>
+<script>
+var ch = document.getElementById('chatHistory');
+if(ch) ch.scrollTop = ch.scrollHeight;
+</script>
+<style>
+.chat-msg { padding: var(--ethos-space-2) var(--ethos-space-3); border-radius: var(--ethos-radius-m); margin-bottom: var(--ethos-space-1); }
+.chat-msg.user { background: var(--ethos-bg-subtle); }
+.chat-msg.assistant { background: var(--ethos-bg-elevated); }
+.chat-form { display:flex; gap:var(--ethos-space-2); }
+.chat-form input { flex:1; }
+</style>
+{{template "shellBottom"}}`
+
+// handleChatPage renders the chat conversation page.
+func handleChatPage(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
+	if core == nil {
+		http.Error(w, "chat disabled (no -core)", http.StatusServiceUnavailable)
+		return
+	}
+	msgs := []chatMsg{}
+	// Read user message + reply from query params (set by /api/chat redirect).
+	if q := r.URL.Query().Get("q"); q != "" {
+		msgs = append(msgs, chatMsg{Role: "user", Text: q})
+	}
+	if r := r.URL.Query().Get("r"); r != "" {
+		msgs = append(msgs, chatMsg{Role: "assistant", Text: r})
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := chatTmpl.Execute(w, struct {
+		Error    string
+		Messages []chatMsg
+	}{Messages: msgs}); err != nil {
+		log.Printf("chat render: %v", err)
+	}
+}
+
+// handleChatAPI processes a chat message POST and redirects back to /chat.
+func handleChatAPI(w http.ResponseWriter, r *http.Request, core ipc.CoreAPI) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "POST only", http.StatusMethodNotAllowed)
+		return
+	}
+	if core == nil {
+		http.Error(w, "chat disabled (no -core)", http.StatusServiceUnavailable)
+		return
+	}
+	text := strings.TrimSpace(r.FormValue("text"))
+	if text == "" {
+		http.Redirect(w, r, "/chat", http.StatusSeeOther)
+		return
+	}
+	reply, err := core.Chat(r.Context(), text)
+	if err != nil {
+		log.Printf("chat api: %v", err)
+		http.Redirect(w, r, "/chat", http.StatusSeeOther)
+		return
+	}
+	http.Redirect(w, r, "/chat?q="+url.QueryEscape(text)+"&r="+url.QueryEscape(reply), http.StatusSeeOther)
+}
+
+// chatMsg — one message in the conversation history.
+type chatMsg struct {
+	Role string // "user" | "assistant"
+	Text string
+}
+
 func mustMarshal(v any) json.RawMessage {
 	b, err := json.Marshal(v)
 	if err != nil {
@@ -1,18 +1,18 @@
-<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
-<title>maven · notifications</title>
-<link rel=stylesheet href=/ui.css>
-{{template "nav" "notifications"}}
-<main class=page>
-<h1>notifications</h1>
+{{template "shellTop" "notifications"}}
+<h1>Notifications</h1>
 {{if .Nudges}}<div class=scroll><table>
 <tr><th>when</th><th>rule</th><th>channel</th><th>outcome</th><th>message</th></tr>
 {{range .Nudges}}<tr>
-<td class=muted>{{.Ts.Format "15:04"}}</td>
+<td class=hint>{{.Ts.Format "15:04"}}</td>
 <td class=key>{{.Rule}}</td>
 <td><span class=badge>{{.Channel}}</span></td>
 <td class={{.Outcome}}>{{.Outcome}}</td>
 <td class=text-max>{{.Message}}</td>
 </tr>{{end}}</table></div>
-{{else}}<div class=empty>no notifications yet</div>{{end}}
-</main>
+{{else}}<div class=empty>
+  <svg class=icon width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+  <div>no notifications yet</div>
+  <div class=hint>check back later or ask maven a question</div>
+</div>{{end}}
+{{template "shellBottom"}}
+</html>
@@ -1,10 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#1a1a2e"/>
-      <stop offset="100%" stop-color="#0d0d1a"/>
+      <stop offset="0%" stop-color="#221D17"/>
+      <stop offset="100%" stop-color="#14110D"/>
    </linearGradient>
  </defs>
  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
-  <text x="256" y="340" font-family="system-ui,-apple-system,sans-serif" font-size="320" font-weight="700" fill="#00aaff" text-anchor="middle">M</text>
+  <text x="256" y="320" font-family="Geist,system-ui,-apple-system,sans-serif" font-size="280" font-weight="600" fill="#A78BFA" text-anchor="middle">M</text>
+  <circle cx="196" cy="392" r="14" fill="#A78BFA" opacity="0.55"/>
+  <circle cx="256" cy="392" r="14" fill="#A78BFA" opacity="0.8"/>
+  <circle cx="316" cy="392" r="14" fill="#A78BFA"/>
 </svg>
@@ -3,89 +3,135 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
-<meta name="theme-color" content="#111">
+<meta name="theme-color" content="#14110D">
 <link rel="manifest" href="/manifest.json">
 <link rel=stylesheet href=/ui.css>
+<script defer src="/mavweb.js"></script>
 <script defer src="/app.js"></script>
 <style>
-/* Voice page layout — the shared nav.site handles everything above */
-html,body{height:100%}
-body{display:flex;flex-direction:column;padding:1rem}
+/* Voice page — fits inside the Ethos content area */
 .voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0}

-/* Voice PTT button */
-#btn{width:140px;height:140px;border-radius:50%;border:4px solid var(--accent);background:var(--panel);color:var(--accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
-#btn:active,#btn.active{background:rgba(0,170,255,.13);border-color:var(--ok);color:var(--ok);transform:scale(1.05)}
-#btn:disabled{opacity:.3;border-color:var(--border)}
+/* PTT Button */
+#btn{width:140px;height:140px;border-radius:50%;border:3px solid var(--ethos-accent);background:var(--ethos-surface0);color:var(--ethos-accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--ethos-motion);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
+#btn:active,#btn.active{background:rgba(111,191,139,.12);border-color:var(--ethos-green);color:var(--ethos-green);transform:scale(1.05)}
+#btn:disabled{opacity:.3;border-color:var(--ethos-border)}

-#status{font-size:var(--fs-sm);color:var(--muted);min-height:1.2em}
-#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:var(--fs-sm);color:var(--muted);line-height:1.6;padding:var(--space-sm);border-top:1px solid var(--line)}
-#log .reply{color:var(--ok)}
-#log .error{color:var(--err)}
-#log .push{color:#88f}
+#status{font-size:var(--ethos-fs-sm);color:var(--ethos-muted);min-height:1.2em}
+#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:var(--ethos-fs-sm);color:var(--ethos-muted);line-height:1.6;padding:var(--ethos-space-2);border-top:1px solid var(--ethos-border)}
+#log .reply{color:var(--ethos-green)}
+#log .error{color:var(--ethos-red)}
+#log .push{color:var(--ethos-purple)}

 /* Cheatsheet */
-#cheat{width:100%;max-width:480px;font-size:var(--fs-sm);border-top:1px solid var(--line);color:var(--muted)}
-#cheat summary{cursor:pointer;padding:var(--space-sm) 0;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;font-size:var(--fs-xs);user-select:none}
-#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;padding:.25rem 0 .5rem}
-#cheat dt{color:var(--ok);font-weight:600;white-space:nowrap}
-#cheat dd{color:var(--soft);line-height:1.5}
-#cheat dd span{color:var(--dim)}
+#cheat{width:100%;max-width:480px;font-size:var(--ethos-fs-sm);border-top:1px solid var(--ethos-border);color:var(--ethos-muted)}
+#cheat summary{cursor:pointer;padding:var(--ethos-space-2) 0;color:var(--ethos-accent);letter-spacing:.05em;text-transform:uppercase;font-size:var(--ethos-fs-xs);user-select:none}
+#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:var(--ethos-space-1) var(--ethos-space-3);padding:var(--ethos-space-1) 0 var(--ethos-space-3)}
+#cheat dt{color:var(--ethos-green);font-weight:500;white-space:nowrap}
+#cheat dd{color:var(--ethos-secondary);line-height:1.5}
+#cheat dd span{color:var(--ethos-muted)}
 .cheat-en{display:revert}
 .cheat-ru{display:none}
 html[data-lang=ru] .cheat-en{display:none}
 html[data-lang=ru] .cheat-ru{display:revert}

-/* Lang toggle inline (not in nav) */
+/* Lang toggle */
 .lang-toggle{display:flex;gap:0;justify-content:center;margin-top:1rem}
-.lang-toggle span{font-size:var(--fs-xs);color:var(--dim);cursor:pointer;padding:.2rem .5rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);transition:color var(--transition);user-select:none}
-.lang-toggle span:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:none}
-.lang-toggle span:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}
-.lang-toggle span.active{color:var(--accent);border-color:var(--accent);background:rgba(0,170,255,.08)}
-.lang-toggle span:hover{color:var(--fg)}
+.lang-toggle span{font-size:var(--ethos-fs-xs);color:var(--ethos-muted);cursor:pointer;padding:.2rem .5rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ethos-border);transition:color var(--ethos-motion);user-select:none}
+.lang-toggle span:first-child{border-radius:var(--ethos-radius) 0 0 var(--ethos-radius);border-right:none}
+.lang-toggle span:last-child{border-radius:0 var(--ethos-radius) var(--ethos-radius) 0;border-left:none}
+.lang-toggle span.active{color:var(--ethos-accent);border-color:var(--ethos-accent);background:var(--ethos-accent-dim)}
+.lang-toggle span:hover{color:var(--ethos-text)}
 </style>
 </head>
 <body>
-<nav class=site>
-  <a href=/ class=active>voice</a>
-  <a href=/dash>dash</a>
-  <a href=/history>history</a>
-  <a href=/trace>trace</a>
-  <a href=/notifications>notifications</a>
-  <a href=/tools>tools</a>
-  <a href=/auth/passkey>passkey</a>
-</nav>
-<div class=voice>
-  <h1>Maven Voice</h1>
-  <div id="status">tap &amp; hold to speak</div>
-  <button id="btn" type="button">&#x1f399;</button>
-  <div id="log"></div>
-  <details id="cheat">
-    <summary>Cheatsheet</summary>
-    <dl>
-      <dt>Act</dt>
-      <dd class="cheat-ru">включи свет · сделай громче</dd>
-      <dd class="cheat-en">restart nginx · turn on the light</dd>
-      <dt>Reminder</dt>
-      <dd class="cheat-ru">напомни через 4 часа размяться</dd>
-      <dd class="cheat-en">remind me tomorrow at 8am to call the doctor</dd>
-      <dt>Fact</dt>
-      <dd class="cheat-ru">выпил кофе · вес 73 кг</dd>
-      <dd class="cheat-en">ran 3 kilometers</dd>
-      <dt>Note</dt>
-      <dd class="cheat-ru">запиши рецепт блинов</dd>
-      <dd class="cheat-en">note: add a backup job for the db</dd>
-      <dt>Query</dt>
-      <dd class="cheat-ru">какой сегодня день · какой прогноз погоды</dd>
-      <dd class="cheat-en">what version are you · what's the weather</dd>
-      <dt>System</dt>
-      <dd class="cheat-ru">включи тихий режим · как загрузка системы</dd>
-      <dd class="cheat-en">quiet mode on · system load</dd>
-    </dl>
-  </details>
-  <div class=lang-toggle>
-    <span class="active" data-lang="ru">RU</span>
-    <span data-lang="en">EN</span>
+<div class=shell>
+  <header class=topbar>
+    <div class=breadcrumbs>
+      <span class=current>Voice</span>
+    </div>
+    <div class=topbar-actions>
+      <div class=search-trigger onclick="window.__openSearch()" role=button tabindex=0>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        Search
+        <span class=kbd-hint>Ctrl+/</span>
+      </div>
+      <button class=icon-btn onclick="window.__openPalette()" title="Command Palette (Ctrl+K)" aria-label="Command Palette">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 7 4"/><polyline points="17 4 20 4 20 7"/><polyline points="20 17 20 20 17 20"/><polyline points="7 20 4 20 4 17"/></svg>
+      </button>
+      <span class=conn-status>
+        <span class="dot online" id=connDot></span>
+      </span>
+    </div>
+  </header>
+  <div class=shell-body>
+    <aside class=sidebar>
+      <div class=sidebar-section>
+        <div class=sidebar-label>Workspace</div>
+        <a href=/dash><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg></span><span>Dashboard</span></a>
+      </div>
+      <div class=sidebar-section>
+        <div class=sidebar-label>Infrastructure</div>
+        <a href=/history><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span><span>History</span></a>
+      </div>
+      <div class=sidebar-section>
+        <div class=sidebar-label>Automation</div>
+        <a href=/trace><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></span><span>Rule Trace</span></a>
+        <a href=/notifications><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></span><span>Notifications</span></a>
+      </div>
+      <div class=sidebar-section>
+        <div class=sidebar-label>AI</div>
+        <a href=/ class=active><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></span><span>Voice</span></a>
+      </div>
+      <div class=sidebar-section>
+        <div class=sidebar-label>Settings</div>
+        <a href=/tools><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span><span>Tools</span></a>
+        <a href=/auth/passkey><span class=icon><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><span>Passkey</span></a>
+      </div>
+    </aside>
+    <main class=content>
+      <div class=voice>
+        <div id="status">tap &amp; hold to speak</div>
+        <button id="btn" type="button">&#x1f399;</button>
+        <div id="log"></div>
+        <details id="cheat">
+          <summary>Cheatsheet</summary>
+          <dl>
+            <dt>Act</dt>
+            <dd class="cheat-ru">включи свет · сделай громче</dd>
+            <dd class="cheat-en">restart nginx · turn on the light</dd>
+            <dt>Reminder</dt>
+            <dd class="cheat-ru">напомни через 4 часа размяться</dd>
+            <dd class="cheat-en">remind me tomorrow at 8am to call the doctor</dd>
+            <dt>Fact</dt>
+            <dd class="cheat-ru">выпил кофе · вес 73 кг</dd>
+            <dd class="cheat-en">ran 3 kilometers</dd>
+            <dt>Note</dt>
+            <dd class="cheat-ru">запиши рецепт блинов</dd>
+            <dd class="cheat-en">note: add a backup job for the db</dd>
+            <dt>Query</dt>
+            <dd class="cheat-ru">какой сегодня день · какой прогноз погоды</dd>
+            <dd class="cheat-en">what version are you · what's the weather</dd>
+            <dt>System</dt>
+            <dd class="cheat-ru">включи тихий режим · как загрузка системы</dd>
+            <dd class="cheat-en">quiet mode on · system load</dd>
+          </dl>
+        </details>
+        <div class=lang-toggle>
+          <span class="active" data-lang="ru">RU</span>
+          <span data-lang="en">EN</span>
+        </div>
+      </div>
+    </main>
+    <aside class=inspector id=inspector>
+      <div class=inspector-inner>
+        <div class=inspector-header>
+          <span id=inspectorTitle>Details</span>
+          <button class=inspector-close onclick="closeInspector()" aria-label="Close inspector">&times;</button>
+        </div>
+        <div class=inspector-body id=inspectorBody></div>
+      </div>
+    </aside>
  </div>
 </div>
 <script>
@@ -3,8 +3,8 @@
  "short_name": "Maven",
  "start_url": "/",
  "display": "standalone",
-  "background_color": "#111",
-  "theme_color": "#00aaff",
+  "background_color": "#14110D",
+  "theme_color": "#A78BFA",
  "icons": [
    {
      "src": "/icon.svg",
@@ -0,0 +1,207 @@
+/* ═══════════════════════════════════════════════
+   mavweb — shared JS for Ethos workstation shell
+   Command palette, search, keyboard shortcuts,
+   inspector, connection status
+   ═══════════════════════════════════════════════ */
+
+(function() {
+  'use strict';
+
+  // ── Keyboard Shortcuts ──
+  const shortcuts = {
+    'ctrl+k': 'openPalette',
+    'ctrl+/': 'openSearch',
+    'escape': 'closeAll',
+    'alt+ArrowLeft': 'navigateBack',
+    'alt+ArrowRight': 'navigateForward',
+  };
+
+  document.addEventListener('keydown', function(e) {
+    const key = [];
+    if (e.ctrlKey || e.metaKey) key.push('ctrl');
+    if (e.altKey) key.push('alt');
+    if (e.shiftKey) key.push('shift');
+    key.push(e.key === ' ' ? 'Space' : e.key);
+
+    const combo = key.join('+').toLowerCase();
+    const action = shortcuts[combo];
+
+    if (action === 'openPalette') {
+      e.preventDefault();
+      openPalette();
+    } else if (action === 'openSearch') {
+      e.preventDefault();
+      openSearch();
+    } else if (action === 'closeAll') {
+      closePalette();
+      closeSearch();
+      closeInspector();
+    } else if (action === 'navigateBack') {
+      history.back();
+    } else if (action === 'navigateForward') {
+      history.forward();
+    }
+  });
+
+  // ── Command Palette ──
+  let paletteEl = null;
+  let paletteInput = null;
+
+  // Page entries for the command palette
+  const palettePages = [
+    { label: 'Dashboard', url: '/dash', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>' },
+    { label: 'History', url: '/history', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' },
+    { label: 'Rule Trace', url: '/trace', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>' },
+    { label: 'Notifications', url: '/notifications', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>' },
+    { label: 'Voice', url: '/', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>' },
+    { label: 'Tools', url: '/tools', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>' },
+    { label: 'Passkey', url: '/auth/passkey', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' },
+  ];
+
+  function buildPalette() {
+    if (paletteEl) return;
+    paletteEl = document.createElement('div');
+    paletteEl.className = 'cmd-palette-overlay';
+    paletteEl.innerHTML =
+      '<div class=cmd-palette>' +
+      '<div class=cmd-palette-input>' +
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
+      '<input type=text placeholder="Go to page or run action…" spellcheck=false autofocus>' +
+      '</div>' +
+      '<div class=cmd-palette-list id=paletteList></div>' +
+      '</div>';
+    document.body.appendChild(paletteEl);
+
+    paletteInput = paletteEl.querySelector('input');
+
+    paletteEl.addEventListener('click', function(e) {
+      if (e.target === paletteEl) closePalette();
+    });
+
+    paletteInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') { closePalette(); return; }
+      if (e.key === 'Enter') {
+        const selected = paletteEl.querySelector('.cmd-palette-item.selected');
+        if (selected) {
+          e.preventDefault();
+          closePalette();
+          window.location.href = selected.getAttribute('data-url') || selected.getAttribute('href');
+        }
+        return;
+      }
+      if (e.key === 'ArrowDown') { e.preventDefault(); moveSelection(1); return; }
+      if (e.key === 'ArrowUp') { e.preventDefault(); moveSelection(-1); return; }
+    });
+
+    paletteInput.addEventListener('input', filterPalette);
+  }
+
+  function moveSelection(dir) {
+    const items = paletteEl.querySelectorAll('.cmd-palette-item');
+    if (!items.length) return;
+    let idx = -1;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].classList.contains('selected')) { idx = i; items[i].classList.remove('selected'); break; }
+    }
+    let next = idx === -1 ? 0 : (idx + dir + items.length) % items.length;
+    items[next].classList.add('selected');
+    items[next].scrollIntoView({ block: 'nearest' });
+  }
+
+  function filterPalette() {
+    const q = paletteInput.value.toLowerCase();
+    const list = paletteEl.querySelector('#paletteList');
+    let html = '';
+    const all = palettePages;
+    for (let i = 0; i < all.length; i++) {
+      const p = all[i];
+      if (q && !p.label.toLowerCase().includes(q)) continue;
+      html += '<a href="' + p.url + '" class="cmd-palette-item' + (i === 0 ? ' selected' : '') + '" data-url="' + p.url + '">' +
+        '<span class=icon>' + p.icon + '</span>' +
+        '<span>' + p.label + '</span>' +
+        '</a>';
+    }
+    list.innerHTML = html;
+  }
+
+  window.__openPalette = function openPalette() {
+    buildPalette();
+    closeSearch();
+    paletteEl.classList.add('open');
+    setTimeout(function() { paletteInput.focus(); paletteInput.select(); }, 50);
+    filterPalette();
+  };
+
+  function closePalette() {
+    if (paletteEl) paletteEl.classList.remove('open');
+  }
+  window.closePalette = closePalette;
+
+  // ── Search (reuses command palette with search context) ──
+  window.__openSearch = function openSearch() {
+    openPalette();
+    if (paletteInput) {
+      paletteInput.placeholder = 'Search pages, tools, history…';
+    }
+  };
+
+  function closeSearch() {
+    // search uses the same palette overlay
+    if (paletteInput) paletteInput.placeholder = 'Go to page or run action…';
+  }
+
+  // ── Close all overlays ──
+  function closeAll() {
+    closePalette();
+    closeInspector();
+  }
+
+  // ── Inspector ──
+  window.openInspector = function openInspector(title, content) {
+    var inspector = document.getElementById('inspector');
+    var titleEl = document.getElementById('inspectorTitle');
+    var bodyEl = document.getElementById('inspectorBody');
+    if (!inspector || !titleEl || !bodyEl) return;
+    titleEl.textContent = title || 'Details';
+    bodyEl.innerHTML = content || '';
+    inspector.classList.add('open');
+  };
+
+  window.closeInspector = function closeInspector() {
+    var inspector = document.getElementById('inspector');
+    if (inspector) inspector.classList.remove('open');
+  };
+
+  // ── Connection Status ──
+  function updateConnStatus() {
+    var dot = document.getElementById('connDot');
+    if (!dot) return;
+    fetch('/api/ping')
+      .then(function(r) {
+        dot.className = 'dot ' + (r.ok ? 'online' : 'offline');
+      })
+      .catch(function() {
+        dot.className = 'dot offline';
+      });
+  }
+  // Check connection on load and every 60s
+  updateConnStatus();
+  setInterval(updateConnStatus, 60000);
+
+  // ── Inspector: row click to open detail ──
+  // Attach click handler to tables for rows with data attributes
+  document.addEventListener('click', function(e) {
+    var row = e.target.closest('tr.clickable');
+    if (!row) return;
+    var detailUrl = row.getAttribute('data-detail-url');
+    if (detailUrl) {
+      fetch(detailUrl)
+        .then(function(r) { return r.text(); })
+        .then(function(html) {
+          openInspector(row.getAttribute('data-detail-title') || 'Details', html);
+        })
+        .catch(function() {});
+    }
+  });
+
+})();
@@ -1,6 +1,6 @@
 const CACHE = "maven-v2";
 self.addEventListener("install", e => {
-  e.waitUntil(caches.open(CACHE).then(c => c.addAll(["/", "/manifest.json", "/dash"])));
+  e.waitUntil(caches.open(CACHE).then(c => c.addAll(["/", "/ui.css", "/mavweb.js", "/manifest.json", "/dash"])));
  self.skipWaiting();
 });
 self.addEventListener("activate", e => {
@@ -1,135 +1,720 @@
-/* maven design system — dark, restrained, #00aaff accent.
-   Every server-rendered page uses this single stylesheet.
-   Pages carry NO inline <style> beyond true one-offs. */
+/* ═══════════════════════════════════════════════
+   Ethos design system for Maven
+   accent: warm violet #A78BFA · motif: breath dots
+   Tokens → layout → components → utilities
+   No literal colors, spacing, radii, or font sizes
+   in component code — everything comes from :root.
+   ═══════════════════════════════════════════════ */

-/* ── Design Tokens ── */
-:root{
-  --bg:#111;--panel:#1a1a2e;--line:#222;--border:#333;
-  --fg:#ddd;--soft:#aaa;--muted:#888;--dim:#555;
-  --accent:#00aaff;--ok:#00ff88;--warn:#ffaa00;--err:#ff4444;
+/* ── Ethos Design Tokens (warm, brown-tinted neutral ramp) ── */
+:root {
+  /* Neutrals — warm room, not cool grey */
+  --ethos-bg0: #14110D;
+  --ethos-bg1: #1B1712;
+  --ethos-bg2: #221D17;
+  --ethos-surface0: #221D17;
+  --ethos-surface1: #2C261D;
+  --ethos-surface2: #372F24;
+  --ethos-border: rgba(244, 234, 220, 0.09);
+  --ethos-border-hi: rgba(244, 234, 220, 0.16);
+  --ethos-text: #F4EEE4;
+  --ethos-secondary: #B4AA98;
+  --ethos-muted: #9C917D;
+  --ethos-disabled: #756C5C;

-  --surface-page:var(--bg);
-  --surface-card:var(--panel);
-  --surface-raised:#222;
-  --surface-input:#181818;
-  --surface-hover:rgba(255,255,255,.04);
+  /* Accent — Maven: warm violet, single use (selected/focused/active) */
+  --ethos-accent: #A78BFA;
+  --ethos-accent-hi: #C1AEFC;
+  --ethos-accent-dim: rgba(167, 139, 250, 0.14);
+  --ethos-accent-line: rgba(167, 139, 250, 0.32);
+  --ethos-accent-glow: rgba(167, 139, 250, 0.4);

-  --fs-xs:.7rem;--fs-sm:.8rem;--fs-base:14px;
-  --fs-lg:1.25rem;--fs-xl:1.5rem;
-  --space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;
-  --space-lg:1.25rem;--space-xl:2rem;
-  --radius-sm:3px;--radius-md:6px;--radius-lg:10px;
-  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
-  --shadow-md:0 2px 8px rgba(0,0,0,.4);
-  --transition:150ms ease;
+  /* Semantic colors */
+  --ethos-green: #6FBF8B;   /* running / healthy / success */
+  --ethos-amber: #E0A855;   /* warning / paused */
+  --ethos-red: #E0715F;     /* failed / danger */
+  --ethos-purple: #A78BFA;  /* ai agents / llms — same family as accent */
+  --ethos-cyan: #5EBFC4;    /* network */
+  --ethos-orange: #D9895A;  /* build */
+
+  /* Typography — Geist for human copy, Geist Mono for machine values */
+  --ethos-font: 'Geist', -apple-system, system-ui, sans-serif;
+  --ethos-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Font sizes */
+  --ethos-fs-xs: 11px;
+  --ethos-fs-sm: 12px;
+  --ethos-fs-base: 14px;
+  --ethos-fs-lg: 16px;
+  --ethos-fs-xl: 18px;
+  --ethos-fs-2xl: 24px;
+  --ethos-fs-3xl: 32px;
+
+  /* Spacing — 8px grid */
+  --ethos-space-1: 4px;
+  --ethos-space-2: 8px;
+  --ethos-space-3: 12px;
+  --ethos-space-4: 16px;
+  --ethos-space-5: 24px;
+  --ethos-space-6: 32px;
+  --ethos-space-7: 40px;
+  --ethos-space-8: 48px;
+  --ethos-space-9: 64px;
+
+  /* Radius */
+  --ethos-radius: 8px;
+  --ethos-radius-lg: 12px;
+  --ethos-radius-chip: 999px;
+
+  /* Shadows — soft warm light, no glass, no glow-blur */
+  --ethos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --ethos-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.28);
+
+  /* Motion — mechanical, no bounce */
+  --ethos-motion-fast: 130ms cubic-bezier(0.2, 0, 0, 1);
+  --ethos-motion: 170ms cubic-bezier(0.2, 0, 0, 1);
+
+  /* Legacy aliases for backward compat during migration */
+  --bg: var(--ethos-bg1);
+  --panel: var(--ethos-surface0);
+  --line: var(--ethos-border);
+  --border: var(--ethos-border);
+  --fg: var(--ethos-text);
+  --soft: var(--ethos-secondary);
+  --muted: var(--ethos-muted);
+  --dim: var(--ethos-disabled);
+  --accent: var(--ethos-accent);
+  --ok: var(--ethos-green);
+  --warn: var(--ethos-amber);
+  --err: var(--ethos-red);
+  --purple: var(--ethos-purple);
+  --surface-page: var(--ethos-bg0);
+  --surface-card: var(--ethos-surface0);
+  --surface-raised: var(--ethos-surface1);
+  --surface-input: var(--ethos-bg2);
+  --surface-hover: var(--ethos-surface1);
+  --fs-xs: var(--ethos-fs-xs);
+  --fs-sm: var(--ethos-fs-sm);
+  --fs-base: var(--ethos-fs-base);
+  --fs-lg: var(--ethos-fs-lg);
+  --fs-xl: var(--ethos-fs-xl);
+  --space-xs: var(--ethos-space-1);
+  --space-sm: var(--ethos-space-2);
+  --space-md: var(--ethos-space-3);
+  --space-lg: var(--ethos-space-4);
+  --space-xl: var(--ethos-space-5);
+  --radius-sm: var(--ethos-radius);
+  --radius-md: var(--ethos-radius);
+  --radius-lg: var(--ethos-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
 }

 /* ── Reset / Base ── */
-*{box-sizing:border-box}
-body{background:var(--surface-page);color:var(--fg);font:var(--fs-base)/1.6 system-ui,sans-serif;
-  margin:0;padding:1rem;-webkit-text-size-adjust:100%;min-height:100vh}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: var(--ethos-bg0);
+  color: var(--ethos-text);
+  font: var(--ethos-fs-base)/1.5 var(--ethos-font);
+  -webkit-text-size-adjust: 100%;
+  min-height: 100vh;
+  overflow: hidden; /* shell handles scrolling */
+}
+a { color: var(--ethos-accent); text-decoration: none; }
+a:hover { text-decoration: underline; }

 /* ── Typography ── */
-h1,h2,h3{font-weight:400;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
-h1{font-size:var(--fs-lg);margin:0 0 var(--space-lg)}
-h2{font-size:.95rem;margin:var(--space-lg) 0 var(--space-sm)}
-h3{font-size:.85rem;margin:var(--space-md) 0 var(--space-xs)}
-h1 small,h2 small,h3 small{color:var(--dim);letter-spacing:0;text-transform:none}
-a{color:var(--accent);text-decoration:none}
-a:hover{text-decoration:underline}
+h1 {
+  font-size: var(--ethos-fs-xl);
+  font-weight: 500;
+  color: var(--ethos-text);
+  margin: 0 0 var(--ethos-space-4);
+  letter-spacing: -0.02em;
+}
+h2 {
+  font-size: var(--ethos-fs-base);
+  font-weight: 500;
+  color: var(--ethos-secondary);
+  margin: 0 0 var(--ethos-space-3);
+}
+h3 {
+  font-size: var(--ethos-fs-sm);
+  font-weight: 500;
+  color: var(--ethos-muted);
+  margin: 0 0 var(--ethos-space-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+h1 small, h2 small, h3 small { color: var(--ethos-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

-/* ── Page Layout ── */
-.page{max-width:80rem;margin:0 auto;padding:0 .5rem var(--space-xl)}
+/* ── Shell Layout ── */
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}

-/* ── Nav (shared site nav) ── */
-nav.site{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
-  border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:var(--space-lg)}
-nav.site a{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;
-  color:var(--dim);transition:color var(--transition)}
-nav.site a:hover{color:var(--fg);text-decoration:none}
-nav.site a.active{color:var(--accent)}
+/* Top Bar */
+.topbar {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 var(--ethos-space-4);
+  background: var(--ethos-bg1);
+  border-bottom: 1px solid var(--ethos-border);
+  gap: var(--ethos-space-3);
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+}
+.topbar > * { -webkit-app-region: no-drag; }
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+  font-size: var(--ethos-fs-sm);
+  color: var(--ethos-muted);
+  flex: 1;
+  min-width: 0;
+}
+.breadcrumbs .sep { color: var(--ethos-disabled); margin: 0 2px; }
+.breadcrumbs .current { color: var(--ethos-text); font-weight: 500; }
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+}
+
+/* Connection status dot */
+.conn-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-muted);
+}
+.conn-status .dot { width: 6px; height: 6px; border-radius: 50%; }
+.conn-status .dot.online { background: var(--ethos-green); }
+.conn-status .dot.offline { background: var(--ethos-disabled); }
+
+/* Shell Body — sidebar + content + inspector */
+.shell-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 200px;
+  min-width: 200px;
+  background: var(--ethos-bg1);
+  border-right: 1px solid var(--ethos-border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--ethos-space-3) 0;
+  flex-shrink: 0;
+}
+.sidebar-section { margin-bottom: var(--ethos-space-3); }
+.sidebar-label {
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: var(--ethos-space-1) var(--ethos-space-4);
+  margin-bottom: var(--ethos-space-1);
+  font-weight: 500;
+}
+.sidebar a {
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+  padding: var(--ethos-space-1) var(--ethos-space-4);
+  font-size: var(--ethos-fs-sm);
+  color: var(--ethos-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  height: 28px;
+  transition: background var(--ethos-motion), color var(--ethos-motion), border-color var(--ethos-motion);
+}
+.sidebar a:hover { background: var(--ethos-surface-hover); color: var(--ethos-text); text-decoration: none; }
+.sidebar a.active {
+  color: var(--ethos-accent);
+  background: var(--ethos-accent-dim);
+  border-left-color: var(--ethos-accent);
+}
+.sidebar a .icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
+.sidebar a.active .icon { opacity: 1; }
+
+/* Main Content */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--ethos-space-5);
+  background: var(--ethos-bg0);
+}
+.content-wide { max-width: 960px; }
+
+/* Inspector Panel (right side) */
+.inspector {
+  width: 0;
+  overflow: hidden;
+  background: var(--ethos-bg1);
+  border-left: 1px solid var(--ethos-border);
+  transition: width var(--ethos-motion);
+  flex-shrink: 0;
+}
+.inspector.open { width: 400px; }
+.inspector-inner {
+  width: 400px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.inspector-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ethos-space-3) var(--ethos-space-4);
+  border-bottom: 1px solid var(--ethos-border);
+  font-size: var(--ethos-fs-sm);
+  font-weight: 500;
+  color: var(--ethos-text);
+  flex-shrink: 0;
+}
+.inspector-close {
+  background: none;
+  border: none;
+  color: var(--ethos-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--ethos-radius);
+  line-height: 1;
+}
+.inspector-close:hover { color: var(--ethos-text); background: var(--ethos-surface-hover); }
+.inspector-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ethos-space-4);
+  font-size: var(--ethos-fs-sm);
+}
+
+/* ── Command Palette ── */
+.cmd-palette-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ethos-motion);
+}
+.cmd-palette-overlay.open { opacity: 1; pointer-events: auto; }
+.cmd-palette {
+  width: 560px;
+  max-width: 90vw;
+  max-height: 60vh;
+  background: var(--ethos-surface0);
+  border: 1px solid var(--ethos-border);
+  border-radius: var(--ethos-radius);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.cmd-palette-input {
+  display: flex;
+  align-items: center;
+  padding: var(--ethos-space-3) var(--ethos-space-4);
+  border-bottom: 1px solid var(--ethos-border);
+  gap: var(--ethos-space-2);
+}
+.cmd-palette-input input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--ethos-text);
+  font: var(--ethos-fs-base) var(--ethos-font);
+  outline: none;
+}
+.cmd-palette-input input::placeholder { color: var(--ethos-disabled); }
+.cmd-palette-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ethos-space-1) 0;
+}
+.cmd-palette-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+  padding: var(--ethos-space-2) var(--ethos-space-4);
+  color: var(--ethos-secondary);
+  font-size: var(--ethos-fs-sm);
+  cursor: pointer;
+  transition: background var(--ethos-motion-fast);
+  text-decoration: none;
+}
+.cmd-palette-item:hover,
+.cmd-palette-item.selected { background: var(--ethos-surface-hover); color: var(--ethos-text); text-decoration: none; }
+.cmd-palette-item .kbd {
+  margin-left: auto;
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-disabled);
+  font-family: var(--ethos-mono);
+}
+
+/* ── Search Bar (inline, slim) ── */
+.search-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--ethos-bg2);
+  border: 1px solid var(--ethos-border);
+  border-radius: var(--ethos-radius);
+  padding: 2px 8px;
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-muted);
+  cursor: pointer;
+  height: 24px;
+  transition: border-color var(--ethos-motion-fast);
+}
+.search-trigger:hover { border-color: var(--ethos-muted); }
+.search-trigger .kbd-hint {
+  font-family: var(--ethos-mono);
+  color: var(--ethos-disabled);
+  font-size: 10px;
+}

 /* ── Cards ── */
-.card{background:var(--surface-card);border-radius:var(--radius-md);
-  padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-lg);
-  box-shadow:var(--shadow-sm)}
-.card-title{font-size:.95rem;margin:0 0 var(--space-sm);color:var(--muted);
-  display:flex;align-items:center;gap:var(--space-sm)}
-.card-sub{font-size:var(--fs-sm);color:var(--dim);margin:0 0 var(--space-sm)}
+.card {
+  background: var(--ethos-surface0);
+  border: 1px solid var(--ethos-border);
+  border-radius: var(--ethos-radius);
+  padding: var(--ethos-space-3) var(--ethos-space-4);
+  margin-bottom: var(--ethos-space-4);
+}
+.card-title {
+  font-size: var(--ethos-fs-sm);
+  font-weight: 500;
+  color: var(--ethos-secondary);
+  margin: 0 0 var(--ethos-space-2);
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+}
+.card-sub {
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-muted);
+  margin: 0 0 var(--ethos-space-2);
+}
+.card-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ethos-space-2);
+  margin-top: var(--ethos-space-3);
+}

 /* ── Tables ── */
-.scroll{overflow-x:auto;margin-bottom:var(--space-sm)}
-table{width:100%;border-collapse:collapse}
-th,td{padding:.4rem .6rem;text-align:left;vertical-align:top;
-  border-bottom:1px solid var(--line)}
-th{color:var(--dim);font-size:var(--fs-xs);text-transform:uppercase;
-  letter-spacing:.05em;white-space:nowrap;font-weight:500}
-td{color:var(--soft)}
-tr:hover td{background:var(--surface-hover)}
-.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
-code,.key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ok)}
+.scroll { overflow-x: auto; margin-bottom: var(--ethos-space-2); }
+table { width: 100%; border-collapse: collapse; }
+th, td {
+  padding: var(--ethos-space-1) var(--ethos-space-2);
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--ethos-border);
+}
+th {
+  color: var(--ethos-muted);
+  font-size: var(--ethos-fs-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  font-weight: 500;
+  padding-top: var(--ethos-space-2);
+  padding-bottom: var(--ethos-space-1);
+}
+td { color: var(--ethos-secondary); font-size: var(--ethos-fs-sm); }
+tr:hover td { background: var(--ethos-surface-hover); }
+tr.clickable { cursor: pointer; }
+.mono { font-family: var(--ethos-mono); }
+code, .key {
+  font-family: var(--ethos-mono);
+  color: var(--ethos-accent);
+  font-size: var(--ethos-fs-sm);
+}

-/* ── Status / Semantic Colors ── */
-.pending,.away,.gray{color:var(--muted)}
-.acted,.pres,.green{color:var(--ok)}
-.snoozed{color:var(--warn)}
-.ignored,.red{color:var(--err)}
-.updated,.muted{color:var(--dim);font-size:var(--fs-sm)}
-.empty{color:var(--dim);padding:var(--space-xl);text-align:center}
-.voided{opacity:.45;text-decoration:line-through}
-.void-badge{color:var(--dim);font-size:var(--fs-sm);margin-right:.3rem}
+/* ── Status Vocabulary ── */
+/* Only these literals: Healthy, Running, Starting, Stopping, Stopped,
+   Paused, Waiting, Queued, Completed, Failed, Warning, Offline, Unknown */
+.status-Healthy,
+.status-Running,
+.status-Completed { color: var(--ethos-green); }

-/* ── Badges ── */
-.badge{font-size:var(--fs-xs);color:var(--dim);background:var(--surface-raised);
-  padding:.15rem .4rem;border-radius:var(--radius-sm);white-space:nowrap}
-.badge-accent{color:var(--accent);background:rgba(0,170,255,.12)}
-.badge-ok{color:var(--ok);background:rgba(0,255,136,.1)}
-.badge-warn{color:var(--warn);background:rgba(255,170,0,.12)}
-.badge-err{color:var(--err);background:rgba(255,68,68,.12)}
+.status-Starting,
+.status-Waiting,
+.status-Queued { color: var(--ethos-amber); }
+
+.status-Stopping { color: var(--ethos-amber); }
+.status-Stopped,
+.status-Paused,
+.status-Offline { color: var(--ethos-disabled); }
+
+.status-Failed { color: var(--ethos-red); }
+.status-Warning { color: var(--ethos-amber); }
+.status-Unknown { color: var(--ethos-muted); }
+
+/* Legacy status aliases — mapped to ethos vocab intent during migration */
+.green, .pres, .acted { color: var(--ethos-green); }
+.pending, .away, .gray { color: var(--ethos-disabled); }
+.snoozed { color: var(--ethos-amber); }
+.ignored, .red { color: var(--ethos-red); }
+.updated, .muted { color: var(--ethos-muted); font-size: var(--ethos-fs-xs); }
+
+.empty {
+  color: var(--ethos-disabled);
+  padding: var(--ethos-space-8) var(--ethos-space-4);
+  text-align: center;
+  font-size: var(--ethos-fs-sm);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ethos-space-3);
+}
+.empty .icon { opacity: 0.4; margin-bottom: var(--ethos-space-1); }
+.empty .action { margin-top: var(--ethos-space-2); }
+.voided { opacity: 0.45; text-decoration: line-through; }
+.void-badge { color: var(--ethos-muted); font-size: var(--ethos-fs-xs); margin-right: var(--ethos-space-1); }

 /* ── Status Dot ── */
-.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
-.dot-ok{background:var(--ok);box-shadow:0 0 5px var(--ok)}
-.dot-warn{background:var(--warn);box-shadow:0 0 5px var(--warn)}
-.dot-err{background:var(--err);box-shadow:0 0 5px var(--err)}
-.dot-dim{background:var(--dim)}
+.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
+.dot-ok { background: var(--ethos-green); }
+.dot-warn { background: var(--ethos-amber); }
+.dot-err { background: var(--ethos-red); }
+.dot-dim { background: var(--ethos-disabled); }
+.dot-purple { background: var(--ethos-purple); }
+.dot-cyan { background: var(--ethos-cyan); }
+.dot-online { background: var(--ethos-green); box-shadow: 0 0 6px var(--ethos-green); }
+.dot-offline { background: var(--ethos-disabled); }
+
+/* ── Badges ── */
+.badge {
+  font-size: var(--ethos-fs-xs);
+  color: var(--ethos-secondary);
+  background: var(--ethos-surface1);
+  padding: 2px 6px;
+  border-radius: var(--ethos-radius-chip);
+  white-space: nowrap;
+  font-weight: 500;
+}
+.badge-accent { color: var(--ethos-accent-hi); background: var(--ethos-accent-dim); }
+.badge-ok { color: var(--ethos-green); background: rgba(111, 191, 139, 0.14); }
+.badge-warn { color: var(--ethos-amber); background: rgba(224, 168, 85, 0.14); }
+.badge-err { color: var(--ethos-red); background: rgba(224, 113, 95, 0.14); }
+.badge-purple { color: var(--ethos-purple); background: var(--ethos-accent-dim); }

 /* ── Buttons ── */
-.btn{font:inherit;font-size:var(--fs-sm);background:var(--surface-card);color:var(--fg);
-  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .7rem;
-  cursor:pointer;transition:border-color var(--transition),background var(--transition);
-  display:inline-flex;align-items:center;gap:.3rem}
-.btn:hover{border-color:var(--accent);background:var(--surface-hover)}
-.btn:disabled{opacity:.4;cursor:not-allowed}
-.btn-primary{background:var(--accent);color:#111;border-color:var(--accent);font-weight:500}
-.btn-primary:hover{background:#0099ee;border-color:#0099ee}
-.btn-danger{border-color:var(--err);color:var(--err)}
-.btn-danger:hover{border-color:var(--err);background:rgba(255,68,68,.1)}
+.btn {
+  font: inherit;
+  font-size: var(--ethos-fs-sm);
+  background: transparent;
+  color: var(--ethos-secondary);
+  border: 1px solid var(--ethos-border);
+  border-radius: var(--ethos-radius);
+  padding: var(--ethos-space-1) var(--ethos-space-3);
+  cursor: pointer;
+  transition: border-color var(--ethos-motion), background var(--ethos-motion), color var(--ethos-motion);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ethos-space-1);
+  height: 28px;
+  white-space: nowrap;
+}
+.btn:hover { border-color: var(--ethos-muted); color: var(--ethos-text); background: var(--ethos-surface-hover); }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn:focus-visible { outline: 2px solid var(--ethos-accent); outline-offset: 2px; }
+.btn-primary {
+  background: var(--ethos-accent);
+  color: var(--ethos-bg0);
+  border-color: var(--ethos-accent);
+  font-weight: 500;
+}
+.btn-primary:hover { background: var(--ethos-accent-hi); border-color: var(--ethos-accent-hi); color: var(--ethos-bg0); }
+.btn-danger { border-color: var(--ethos-red); color: var(--ethos-red); }
+.btn-danger:hover { border-color: var(--ethos-red); background: rgba(224, 113, 95, 0.14); color: var(--ethos-red); }
+.btn-ghost { border-color: transparent; color: var(--ethos-muted); }
+.btn-ghost:hover { border-color: transparent; background: var(--ethos-surface-hover); color: var(--ethos-text); }
+.btn-sm { height: 22px; font-size: var(--ethos-fs-xs); padding: 0 var(--ethos-space-2); }
+.btn-lg { height: 34px; font-size: var(--ethos-fs-base); padding: var(--ethos-space-1) var(--ethos-space-4); }
+
+/* ── Icon Button ── */
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--ethos-muted);
+  cursor: pointer;
+  border-radius: var(--ethos-radius);
+  transition: background var(--ethos-motion-fast), color var(--ethos-motion-fast);
+}
+.icon-btn:hover { background: var(--ethos-surface-hover); color: var(--ethos-text); }
+.icon-btn:focus-visible { outline: 2px solid var(--ethos-accent); outline-offset: 2px; }

 /* ── Form Elements ── */
-input[type=text],input[type=url]{font:inherit;font-size:var(--fs-sm);
-  background:var(--surface-input);color:var(--fg);
-  border:1px solid var(--border);border-radius:var(--radius-sm);
-  padding:.35rem .5rem;max-width:100%;transition:border-color var(--transition)}
-input[type=text]:focus,input[type=url]:focus{border-color:var(--accent);outline:none}
-input[type=checkbox]{accent-color:var(--accent);width:1rem;height:1rem;vertical-align:middle}
-label{color:var(--soft);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
+input[type=text], input[type=url], input[type=search], select, textarea {
+  font: inherit;
+  font-size: var(--ethos-fs-sm);
+  background: var(--ethos-bg2);
+  color: var(--ethos-text);
+  border: 1px solid var(--ethos-border);
+  border-radius: var(--ethos-radius);
+  padding: var(--ethos-space-1) var(--ethos-space-2);
+  max-width: 100%;
+  transition: border-color var(--ethos-motion-fast);
+  height: 28px;
+}
+input[type=text]:focus, input[type=url]:focus, input[type=search]:focus, select:focus, textarea:focus {
+  border-color: var(--ethos-accent);
+  outline: none;
+}
+input[type=checkbox] { accent-color: var(--ethos-accent); width: 14px; height: 14px; vertical-align: middle; }
+label { color: var(--ethos-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--ethos-space-1); font-size: var(--ethos-fs-sm); }
+textarea { height: auto; min-height: 60px; }

 /* ── Messages / Feedback ── */
-.msg{margin:.6rem 0;padding:.5rem .7rem;border-radius:var(--radius-sm);
-  border:1px solid var(--line);font-size:var(--fs-sm)}
-.msg-ok{border-color:var(--ok);color:var(--ok)}
-.msg-err{border-color:var(--err);color:var(--err)}
-#msg{white-space:pre-wrap}
+.msg {
+  margin: var(--ethos-space-2) 0;
+  padding: var(--ethos-space-2) var(--ethos-space-3);
+  border-radius: var(--ethos-radius);
+  border: 1px solid var(--ethos-border);
+  font-size: var(--ethos-fs-sm);
+  color: var(--ethos-secondary);
+}
+.msg-ok { border-color: var(--ethos-green); color: var(--ethos-green); }
+.msg-err { border-color: var(--ethos-red); color: var(--ethos-red); }
+#msg { white-space: pre-wrap; }

 /* ── Collapsible Details ── */
-details{color:var(--soft);font-size:var(--fs-sm)}
-summary{cursor:pointer;color:var(--dim);transition:color var(--transition)}
-summary:hover{color:var(--fg)}
-details[open]{margin-top:var(--space-xs)}
+details { color: var(--ethos-secondary); font-size: var(--ethos-fs-sm); }
+summary { cursor: pointer; color: var(--ethos-muted); transition: color var(--ethos-motion); user-select: none; }
+summary:hover { color: var(--ethos-text); }
+details[open] { margin-top: var(--ethos-space-1); }
+details[open] > summary { margin-bottom: var(--ethos-space-1); }
+
+/* ── Skeleton Loading ── */
+.skeleton {
+  background: linear-gradient(90deg, var(--ethos-surface0) 25%, var(--ethos-surface1) 50%, var(--ethos-surface0) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--ethos-radius);
+}
+@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.skeleton-line { height: 12px; margin-bottom: var(--ethos-space-2); width: 100%; }
+.skeleton-line:last-child { width: 60%; }
+
+/* ── Keyboard Shortcut Hints ── */
+kbd, .kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ethos-mono);
+  font-size: 10px;
+  color: var(--ethos-disabled);
+  background: var(--ethos-bg2);
+  border: 1px solid var(--ethos-border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  min-width: 18px;
+  height: 18px;
+  line-height: 1;
+}
+
+/* ── Notification / Nudge item ── */
+.nudge-item {
+  display: flex;
+  gap: var(--ethos-space-3);
+  padding: var(--ethos-space-2) 0;
+  border-bottom: 1px solid var(--ethos-border);
+  align-items: flex-start;
+}
+.nudge-item:last-child { border-bottom: none; }
+.nudge-icon { flex-shrink: 0; margin-top: 2px; }
+.nudge-body { flex: 1; min-width: 0; }
+.nudge-rule { font-size: var(--ethos-fs-xs); color: var(--ethos-muted); }
+.nudge-msg { font-size: var(--ethos-fs-sm); color: var(--ethos-secondary); margin-top: 2px; }
+.nudge-meta { display: flex; gap: var(--ethos-space-2); align-items: center; margin-top: var(--ethos-space-1); }
+
+/* ── Tooltip / Hint ── */
+.hint { font-size: var(--ethos-fs-xs); color: var(--ethos-muted); }
+.hint-icon { cursor: help; color: var(--ethos-disabled); }
+
+/* ── Key-value pairs ── */
+.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--ethos-space-1) var(--ethos-space-3); font-size: var(--ethos-fs-sm); }
+.kv dt { color: var(--ethos-muted); white-space: nowrap; }
+.kv dd { color: var(--ethos-secondary); word-break: break-all; }
+
+/* ── Section (page section header) ── */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--ethos-space-3);
+  gap: var(--ethos-space-3);
+}
+.section-header h2 { margin-bottom: 0; }

 /* ── Utilities ── */
-.val{word-break:break-all;max-width:20rem}
-.text-max{max-width:22rem}
-.input-wide{width:20rem}
-.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+.val { word-break: break-all; max-width: 20rem; }
+.text-max { max-width: 22rem; }
+.input-wide { width: 20rem; }
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.items-center { align-items: center; }
+.gap-1 { gap: var(--ethos-space-1); }
+.gap-2 { gap: var(--ethos-space-2); }
+.gap-3 { gap: var(--ethos-space-3); }
+.gap-4 { gap: var(--ethos-space-4); }
+.mt-1 { margin-top: var(--ethos-space-1); }
+.mt-2 { margin-top: var(--ethos-space-2); }
+.mt-3 { margin-top: var(--ethos-space-3); }
+.mt-4 { margin-top: var(--ethos-space-4); }
+.mb-1 { margin-bottom: var(--ethos-space-1); }
+.mb-2 { margin-bottom: var(--ethos-space-2); }
+.mb-3 { margin-bottom: var(--ethos-space-3); }
+.mb-4 { margin-bottom: var(--ethos-space-4); }
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .sidebar { width: 48px; min-width: 48px; }
+  .sidebar .sidebar-label { display: none; }
+  .sidebar a { justify-content: center; padding: var(--ethos-space-2) 0; border-left: none; }
+  .sidebar a span:not(.icon) { display: none; }
+  .inspector.open { width: 100%; position: fixed; inset: 0; z-index: 100; border-left: none; }
+  .content { padding: var(--ethos-space-3); }
+}
+
+@media (max-width: 480px) {
+  .sidebar { width: 0; min-width: 0; overflow: hidden; padding: 0; border-right: none; }
+  .content { padding: var(--ethos-space-2); }
+  .cmd-palette { width: 100%; max-width: 100%; max-height: 80vh; border-radius: 0; }
+  .cmd-palette-overlay { padding-top: 0; align-items: flex-start; }
+}
+
+/* ── Print ── */
+@media print {
+  .sidebar, .topbar, .inspector { display: none; }
+  .shell, .shell-body { display: block; height: auto; overflow: visible; }
+  .content { overflow: visible; padding: 0; }
+}
@@ -1,11 +1,6 @@
-<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
-<title>maven · rule trace</title>
-<link rel=stylesheet href=/ui.css>
-{{template "nav" "trace"}}
-<main class=page>
-<h1>rule trace</h1>
-<div class=updated style=margin-bottom:var(--space-lg)>{{.Now | ago}} — winner: <strong>{{if .Winner}}{{.Winner}}{{else}}nothing fired{{end}}</strong></div>
+{{template "shellTop" "trace"}}
+<h1>Rule Trace</h1>
+<div class=hint style=margin-bottom:var(--ethos-space-4)>{{.Now | ago}} — winner: <strong>{{if .Winner}}{{.Winner}}{{else}}nothing fired{{end}}</strong></div>
 <div class=scroll><table class=mono>
 <tr><th>rule<th>sev<th>predicate<th>gate<th>blocked by<th>detail<th>selected<th>lost to</tr>
 {{range .Rules}}<tr>
@@ -15,15 +10,16 @@
 <td class={{if .GateResult}}green{{else if .GateBlockedBy}}red{{else}}gray{{end}}>{{.GateResult}}</td>
 <td>{{.GateBlockedBy}}</td>
 <td><details><summary>gate</summary>
-<span class=muted>snooze_until:</span> {{.GateDetail.SnoozeUntil | fmtTime}}<br>
-<span class=muted>cooldown_until:</span> {{.GateDetail.CooldownUntil | fmtTime}}<br>
-<span class=muted>quiet_hours:</span> {{.GateDetail.QuietHours}}<br>
-<span class=muted>calendar_busy:</span> {{.GateDetail.CalendarBusy}}<br>
-<span class=muted>presence:</span> {{.GateDetail.Presence}}<br>
-<span class=muted>inert_keys_missing:</span> {{if .GateDetail.InertKeysMissing}}{{join .GateDetail.InertKeysMissing ", "}}{{else}}—{{end}}
+<span class=hint>snooze_until:</span> {{.GateDetail.SnoozeUntil | fmtTime}}<br>
+<span class=hint>cooldown_until:</span> {{.GateDetail.CooldownUntil | fmtTime}}<br>
+<span class=hint>quiet_hours:</span> {{.GateDetail.QuietHours}}<br>
+<span class=hint>calendar_busy:</span> {{.GateDetail.CalendarBusy}}<br>
+<span class=hint>presence:</span> {{.GateDetail.Presence}}<br>
+<span class=hint>inert_keys_missing:</span> {{if .GateDetail.InertKeysMissing}}{{join .GateDetail.InertKeysMissing ", "}}{{else}}—{{end}}
 </details></td>
 <td class={{if .WasSelected}}green{{end}}>{{.WasSelected}}</td>
 <td>{{.LostTo}}</td>
 </tr>{{end}}
 </table></div>
-</main>
+{{template "shellBottom"}}
+</html>
@@ -0,0 +1,81 @@
+{{template "shellTop" "voice"}}
+<style>
+.voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0}
+#btn{width:140px;height:140px;border-radius:50%;border:3px solid var(--ethos-accent);background:var(--ethos-surface0);color:var(--ethos-accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--ethos-motion);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
+#btn:active,#btn.active{background:rgba(111,191,139,.12);border-color:var(--ethos-green);color:var(--ethos-green);transform:scale(1.05)}
+#btn:disabled{opacity:.3;border-color:var(--ethos-border)}
+#status{font-size:var(--ethos-fs-sm);color:var(--ethos-muted);min-height:1.2em}
+#log{width:100%;max-width:480px;max-height:40vh;overflow-y:auto;font-size:var(--ethos-fs-sm);color:var(--ethos-muted);line-height:1.6;padding:var(--ethos-space-2);border-top:1px solid var(--ethos-border)}
+#log .reply{color:var(--ethos-green)}
+#log .error{color:var(--ethos-red)}
+#log .push{color:var(--ethos-purple)}
+#cheat{width:100%;max-width:480px;font-size:var(--ethos-fs-sm);border-top:1px solid var(--ethos-border);color:var(--ethos-muted)}
+#cheat summary{cursor:pointer;padding:var(--ethos-space-2) 0;color:var(--ethos-accent);letter-spacing:.05em;text-transform:uppercase;font-size:var(--ethos-fs-xs);user-select:none}
+#cheat dl{display:grid;grid-template-columns:auto 1fr;gap:var(--ethos-space-1) var(--ethos-space-3);padding:var(--ethos-space-1) 0 var(--ethos-space-3)}
+#cheat dt{color:var(--ethos-green);font-weight:500;white-space:nowrap}
+#cheat dd{color:var(--ethos-secondary);line-height:1.5}
+#cheat dd span{color:var(--ethos-muted)}
+.cheat-en{display:revert}
+.cheat-ru{display:none}
+html[data-lang=ru] .cheat-en{display:none}
+html[data-lang=ru] .cheat-ru{display:revert}
+.lang-toggle{display:flex;gap:0;justify-content:center;margin-top:1rem}
+.lang-toggle span{font-size:var(--ethos-fs-xs);color:var(--ethos-muted);cursor:pointer;padding:.2rem .5rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ethos-border);transition:color var(--ethos-motion);user-select:none}
+.lang-toggle span:first-child{border-radius:var(--ethos-radius) 0 0 var(--ethos-radius);border-right:none}
+.lang-toggle span:last-child{border-radius:0 var(--ethos-radius) var(--ethos-radius) 0;border-left:none}
+.lang-toggle span.active{color:var(--ethos-accent);border-color:var(--ethos-accent);background:var(--ethos-accent-dim)}
+.lang-toggle span:hover{color:var(--ethos-text)}
+</style>
+<div class=voice>
+  <div id="status">tap &amp; hold to speak</div>
+  <button id="btn" type="button">&#x1f399;</button>
+  <div id="log"></div>
+  <details id="cheat">
+    <summary>Cheatsheet</summary>
+    <dl>
+      <dt>Act</dt>
+      <dd class="cheat-ru">включи свет · сделай громче</dd>
+      <dd class="cheat-en">restart nginx · turn on the light</dd>
+      <dt>Reminder</dt>
+      <dd class="cheat-ru">напомни через 4 часа размяться</dd>
+      <dd class="cheat-en">remind me tomorrow at 8am to call the doctor</dd>
+      <dt>Fact</dt>
+      <dd class="cheat-ru">выпил кофе · вес 73 кг</dd>
+      <dd class="cheat-en">ran 3 kilometers</dd>
+      <dt>Note</dt>
+      <dd class="cheat-ru">запиши рецепт блинов</dd>
+      <dd class="cheat-en">note: add a backup job for the db</dd>
+      <dt>Query</dt>
+      <dd class="cheat-ru">какой сегодня день · какой прогноз погоды</dd>
+      <dd class="cheat-en">what version are you · what's the weather</dd>
+      <dt>System</dt>
+      <dd class="cheat-ru">включи тихий режим · как загрузка системы</dd>
+      <dd class="cheat-en">quiet mode on · system load</dd>
+    </dl>
+  </details>
+  <div class=lang-toggle>
+    <span class="active" data-lang="ru">RU</span>
+    <span data-lang="en">EN</span>
+  </div>
+</div>
+<script defer src="/app.js"></script>
+<script>
+(function() {
+  var lang = new URLSearchParams(window.location.search).get('lang') || 'ru';
+  if (lang !== 'en') lang = 'ru';
+  document.documentElement.setAttribute('data-lang', lang);
+  document.querySelectorAll('.lang-toggle span').forEach(function(el) {
+    el.addEventListener('click', function() {
+      var l = el.dataset.lang;
+      document.documentElement.setAttribute('data-lang', l);
+      document.querySelectorAll('.lang-toggle span').forEach(function(b) { b.classList.remove('active'); });
+      el.classList.add('active');
+      var url = new URL(window.location);
+      url.searchParams.set('lang', l);
+      history.replaceState(null, '', url);
+    });
+  });
+})();
+</script>
+{{template "shellBottom"}}
+</html>
@@ -79,20 +79,17 @@ func (h *PasskeyHandle) Page(w http.ResponseWriter, r *http.Request) {
 	passkeyTmpl.Execute(w, nil)
 }

-// passkeyPageHTML — rendered via passkeyTmpl (main.go) which prepends navHTML.
-const passkeyPageHTML = `<!doctype html><meta charset=utf-8>
-<meta name=viewport content="width=device-width,initial-scale=1">
-<title>maven · passkey</title>
-<link rel=stylesheet href=/ui.css>
-{{template "nav" "passkey"}}
-<main class=page>
-<h1>passkey</h1>
-<p class=muted>Enroll a passkey once, then assert it to unlock destructive actions (tool enable) for a few minutes.</p>
+// passkeyPageHTML — rendered via passkeyTmpl (main.go) which wraps with shellTop/shellBottom.
+const passkeyPageHTML = `{{template "shellTop" "passkey"}}
+<h1>Passkey</h1>
+<p class=hint>Enroll a passkey once, then assert it to unlock destructive actions (tool enable) for a few minutes.</p>
+<div class=flex gap-2>
 <button class=btn onclick=enroll()>enroll passkey</button>
 <button class=btn onclick=assert()>assert (step-up)</button>
 <a href=/tools><button class=btn-primary>→ tools</button></a>
+</div>
 <div id=msg></div>
-</main>
+{{template "shellBottom"}}
 <script>
 const b64u=b=>btoa(String.fromCharCode(...new Uint8Array(b))).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
 const ub64=s=>{s=s.replace(/-/g,'+').replace(/_/g,'/');const b=atob(s),a=new Uint8Array(b.length);for(let i=0;i<b.length;i++)a[i]=b.charCodeAt(i);return a;};