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