feat: Reworked the observability panel's conversation log into a chat-style UI with detailed message types and timestamps.

frontend/src/components/ObservabilityPanel.tsx

@@ -17,7 +17,7 @@ import {
   DollarSign,
   ChevronDown,
   ChevronRight,
-  Terminal,
+
 } from "lucide-react";
 import { useObservability } from "@/hooks/useObservability";
 import { Message } from "@/hooks/useConversation";
@@ -557,25 +557,65 @@ function ToolCallRow({ tool }: { tool: { id: string; name: string; status: strin
   );
 }
 
-// ---- Conversation Log ----
+// ---- Conversation Log (Chat-style) ----
+
+function relativeTime(timestamp: string): string {
+  try {
+    const now = Date.now();
+    const then = new Date(timestamp).getTime();
+    const diff = Math.max(0, Math.floor((now - then) / 1000));
+    if (diff < 5) return "just now";
+    if (diff < 60) return `${diff}s ago`;
+    const mins = Math.floor(diff / 60);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    return `${hrs}h ${mins % 60}m ago`;
+  } catch {
+    return "";
+  }
+}
 
-function LogDetailBlock({ data, label }: { data: Record<string, unknown>; label: string }) {
+function fullTime(timestamp: string): string {
+  try {
+    return new Date(timestamp).toLocaleTimeString("en-GB", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return "";
+  }
+}
+
+/** Friendly tool name: "log_entry" → "Log Entry" */
+function friendlyToolName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function ToolDetailBlock({ data, label }: { data: Record<string, unknown>; label: string }) {
   const [expanded, setExpanded] = useState(false);
 
-  // Compact one-liner summary
   const keys = Object.keys(data);
-  const summary = keys.length <= 3
-    ? keys.map((k) => {
-        const v = data[k];
-        const display = typeof v === "string"
-          ? (v.length > 40 ? v.slice(0, 40) + "…" : v)
-          : JSON.stringify(v);
-        return `${k}: ${display}`;
-      }).join(", ")
-    : `${keys.length} fields`;
+  const summary =
+    keys.length <= 3
+      ? keys
+          .map((k) => {
+            const v = data[k];
+            const display =
+              typeof v === "string"
+                ? v.length > 40
+                  ? v.slice(0, 40) + "…"
+                  : v
+                : JSON.stringify(v);
+            return `${k}: ${display}`;
+          })
+          .join(", ")
+      : `${keys.length} fields`;
 
   return (
-    <div style={{ marginTop: 2, marginLeft: 4 }}>
+    <div style={{ marginTop: 4 }}>
       <button
         onClick={() => setExpanded((p) => !p)}
         style={{
@@ -587,42 +627,48 @@ function LogDetailBlock({ data, label }: { data: Record<string, unknown>; label:
           alignItems: "center",
           gap: 4,
           fontSize: 11,
-          fontFamily: "var(--font-mono)",
           color: "var(--color-text-muted)",
         }}
       >
         <span style={{ fontSize: 9, opacity: 0.7 }}>{expanded ? "▾" : "▸"}</span>
-        <span style={{
-          padding: "1px 5px",
-          borderRadius: 3,
-          background: "rgba(255, 255, 255, 0.05)",
-          border: "1px solid rgba(255, 255, 255, 0.08)",
-          fontSize: 9,
-          fontWeight: 700,
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-        }}>
+        <span
+          style={{
+            padding: "1px 5px",
+            borderRadius: 3,
+            background: "rgba(255, 255, 255, 0.05)",
+            border: "1px solid rgba(255, 255, 255, 0.08)",
+            fontSize: 9,
+            fontWeight: 700,
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+          }}
+        >
           {label}
         </span>
         {!expanded && (
-          <span style={{ opacity: 0.5, fontSize: 11 }}>{summary}</span>
+          <span style={{ opacity: 0.5, fontSize: 11, fontFamily: "var(--font-mono)" }}>
+            {summary}
+          </span>
         )}
       </button>
       {expanded && (
-        <pre style={{
-          marginTop: 4,
-          padding: "8px 10px",
-          background: "rgba(30, 30, 30, 0.8)",
-          border: "1px solid rgba(255, 255, 255, 0.06)",
-          borderRadius: 6,
-          fontSize: 11,
-          lineHeight: 1.5,
-          color: "var(--color-text-secondary)",
-          overflowX: "auto",
-          maxHeight: 200,
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word",
-        }}>
+        <pre
+          style={{
+            marginTop: 4,
+            padding: "8px 10px",
+            background: "rgba(20, 20, 20, 0.8)",
+            border: "1px solid rgba(255, 255, 255, 0.06)",
+            borderRadius: 6,
+            fontSize: 11,
+            lineHeight: 1.5,
+            fontFamily: "var(--font-mono)",
+            color: "var(--color-text-secondary)",
+            overflowX: "auto",
+            maxHeight: 200,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+          }}
+        >
           {JSON.stringify(data, null, 2)}
         </pre>
       )}
@@ -633,6 +679,12 @@ function LogDetailBlock({ data, label }: { data: Record<string, unknown>; label:
 function ConversationLog({ messages }: { messages: Message[] }) {
   const [isOpen, setIsOpen] = useState(true);
   const scrollRef = useRef<HTMLDivElement>(null);
+  // Re-render every 30s so relative timestamps update
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 30_000);
+    return () => clearInterval(id);
+  }, []);
 
   useEffect(() => {
     if (isOpen && scrollRef.current) {
@@ -640,26 +692,11 @@ function ConversationLog({ messages }: { messages: Message[] }) {
     }
   }, [messages, isOpen]);
 
-  const formatTime = (timestamp: string) => {
-    try {
-      const d = new Date(timestamp);
-      return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
-    } catch {
-      return "??:??:??";
-    }
-  };
-
-  const roleConfig: Record<string, { label: string; color: string }> = {
-    user: { label: "YOU", color: "var(--color-cta)" },
-    assistant: { label: "AI", color: "var(--color-accent-cyan)" },
-    tool: { label: "TOOL", color: "var(--color-accent-pink)" },
-    system: { label: "SYS", color: "var(--color-text-muted)" },
-  };
-
   const logMessages = messages.filter((m) => !m.isPartial);
 
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      {/* Header toggle */}
       <button
         onClick={() => setIsOpen((prev) => !prev)}
         style={{
@@ -674,17 +711,18 @@ function ConversationLog({ messages }: { messages: Message[] }) {
         }}
       >
         <SectionLabel
-          icon={<Terminal className="w-3.5 h-3.5" />}
-          label="Conversation Log"
+          icon={<MessageSquare className="w-3.5 h-3.5" />}
+          label="Conversation"
         />
         <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 4 }}>
           {logMessages.length > 0 && (
             <span className="pill pill-cyan text-[9px] font-bold">{logMessages.length}</span>
           )}
-          {isOpen
-            ? <ChevronDown className="w-3.5 h-3.5 text-muted" />
-            : <ChevronRight className="w-3.5 h-3.5 text-muted" />
-          }
+          {isOpen ? (
+            <ChevronDown className="w-3.5 h-3.5 text-muted" />
+          ) : (
+            <ChevronRight className="w-3.5 h-3.5 text-muted" />
+          )}
         </div>
       </button>
 
@@ -694,103 +732,230 @@ function ConversationLog({ messages }: { messages: Message[] }) {
           style={{
             flex: 1,
             overflowY: "auto",
-            background: "rgba(20, 20, 20, 0.9)",
+            background: "rgba(18, 18, 18, 0.95)",
             borderTop: "1px solid rgba(255, 255, 255, 0.06)",
-            padding: "8px 20px",
-            fontFamily: "var(--font-mono)",
-            fontSize: 13,
-            lineHeight: 1.7,
+            padding: "16px 20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
           }}
         >
           {logMessages.length === 0 ? (
-            <p style={{ fontSize: 12, color: "var(--color-text-muted)", fontStyle: "italic", textAlign: "center", padding: "16px 0" }}>
-              No conversation yet
-            </p>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
+                padding: "32px 0",
+                color: "var(--color-text-muted)",
+              }}
+            >
+              <MessageSquare className="w-6 h-6" style={{ opacity: 0.3 }} />
+              <p style={{ fontSize: 13, fontStyle: "italic", margin: 0 }}>
+                Start talking to see the conversation here
+              </p>
+            </div>
           ) : (
             logMessages.map((msg) => {
-              const cfg = roleConfig[msg.role] || roleConfig.assistant;
-              const isSystem = msg.role === "system";
-              const isTool = msg.role === "tool" && msg.tool;
+              const isUser = msg.role === "user";
 
-              // Determine status pill for tool messages
-              const toolStatusPill = isTool ? (
-                <span
-                  className={`pill text-[9px] font-bold ${
-                    msg.tool!.status === "completed"
-                      ? "pill-cyan"
-                      : msg.tool!.status === "error"
-                      ? "pill-pink"
-                      : "pill-lavender"
-                  }`}
-                  style={{ marginLeft: 6 }}
-                >
-                  {msg.tool!.status}
-                </span>
-              ) : null;
-
-              // GenUI badge
-              const genuiBadge = msg.component ? (
-                <span style={{
-                  marginLeft: 6,
-                  padding: "1px 6px",
-                  background: "rgba(168, 218, 220, 0.12)",
-                  border: "1px solid rgba(168, 218, 220, 0.2)",
-                  borderRadius: 4,
-                  color: "var(--color-accent-cyan)",
-                  fontSize: 9,
-                  fontWeight: 600,
-                }}>
-                  GenUI: {msg.component.name}
-                </span>
-              ) : null;
+              const isTool = msg.role === "tool" && msg.tool;
+              const isSystem = msg.role === "system";
+              const isGenUI = msg.role === "assistant" && !!msg.component;
 
-              return (
-                <div key={msg.id} style={{ marginBottom: isSystem ? 2 : 4 }}>
-                  {/* Main row */}
-                  <div style={{
-                    display: "flex",
-                    gap: 6,
-                    alignItems: "baseline",
-                    ...(isSystem ? { opacity: 0.6, fontStyle: "italic" } : {}),
-                  }}>
-                    <span style={{ color: "var(--color-text-muted)", flexShrink: 0 }}>
-                      [{formatTime(msg.timestamp)}]
-                    </span>
-                    <span style={{ color: cfg.color, fontWeight: 700, flexShrink: 0, minWidth: 32 }}>
-                      {cfg.label}
-                    </span>
-                    <span style={{ color: "var(--color-text-muted)" }}>▸</span>
-                    <span style={{ color: "var(--color-text-secondary)", wordBreak: "break-word", flex: 1 }}>
-                      {isTool ? (
-                        <>
-                          <span style={{ color: "var(--color-accent-pink)", fontWeight: 600 }}>
-                            {msg.tool!.name}
-                          </span>
-                          {toolStatusPill}
-                        </>
-                      ) : (
-                        msg.content || "(no text)"
-                      )}
-                      {genuiBadge}
+              // ── System event chip (centered) ──
+              if (isSystem) {
+                return (
+                  <div
+                    key={msg.id}
+                    style={{
+                      display: "flex",
+                      justifyContent: "center",
+                      padding: "4px 0",
+                    }}
+                  >
+                    <span
+                      title={fullTime(msg.timestamp)}
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        padding: "4px 14px",
+                        borderRadius: 20,
+                        background: "rgba(255, 255, 255, 0.04)",
+                        border: "1px solid rgba(255, 255, 255, 0.08)",
+                        fontSize: 11,
+                        color: "var(--color-text-muted)",
+                        fontWeight: 500,
+                      }}
+                    >
+                      {msg.content}
                     </span>
                   </div>
-
-                  {/* Expandable detail blocks */}
-                  {isTool && msg.tool!.args && Object.keys(msg.tool!.args).length > 0 && (
-                    <div style={{ marginLeft: 90 }}>
-                      <LogDetailBlock data={msg.tool!.args} label="Input" />
-                    </div>
-                  )}
-                  {isTool && msg.tool!.result && Object.keys(msg.tool!.result).length > 0 && (
-                    <div style={{ marginLeft: 90 }}>
-                      <LogDetailBlock data={msg.tool!.result} label="Output" />
+                );
+              }
+
+              // ── Tool call badge (compact inline) ──
+              if (isTool) {
+                const toolStatus = msg.tool!.status;
+                const statusEmoji =
+                  toolStatus === "completed" ? "✓" : toolStatus === "error" ? "✗" : "⋯";
+                const statusColor =
+                  toolStatus === "completed"
+                    ? "var(--color-success)"
+                    : toolStatus === "error"
+                    ? "var(--color-error)"
+                    : "var(--color-accent-cyan)";
+
+                return (
+                  <div key={msg.id} style={{ padding: "2px 0" }}>
+                    <div
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        padding: "5px 12px",
+                        borderRadius: 8,
+                        background: "rgba(255, 193, 204, 0.06)",
+                        border: "1px solid rgba(255, 193, 204, 0.12)",
+                        fontSize: 12,
+                        color: "var(--color-text-secondary)",
+                      }}
+                    >
+                      <span style={{ fontSize: 13 }}>🛠</span>
+                      <span style={{ fontWeight: 600, color: "var(--color-accent-pink)" }}>
+                        {friendlyToolName(msg.tool!.name)}
+                      </span>
+                      <span
+                        style={{
+                          fontWeight: 700,
+                          fontSize: 11,
+                          color: statusColor,
+                        }}
+                      >
+                        {statusEmoji}
+                      </span>
+                      <span
+                        title={fullTime(msg.timestamp)}
+                        style={{ fontSize: 10, color: "var(--color-text-muted)", marginLeft: 4 }}
+                      >
+                        {relativeTime(msg.timestamp)}
+                      </span>
                     </div>
-                  )}
-                  {msg.component && Object.keys(msg.component.props).length > 0 && (
-                    <div style={{ marginLeft: 90 }}>
-                      <LogDetailBlock data={msg.component.props} label="Props" />
+                    {/* Expandable args/result (hidden by default) */}
+                    {msg.tool!.args && Object.keys(msg.tool!.args).length > 0 && (
+                      <div style={{ marginLeft: 16, marginTop: 2 }}>
+                        <ToolDetailBlock data={msg.tool!.args} label="Input" />
+                      </div>
+                    )}
+                    {msg.tool!.result && Object.keys(msg.tool!.result).length > 0 && (
+                      <div style={{ marginLeft: 16, marginTop: 2 }}>
+                        <ToolDetailBlock data={msg.tool!.result} label="Output" />
+                      </div>
+                    )}
+                  </div>
+                );
+              }
+
+              // ── GenUI badge (compact) ──
+              if (isGenUI) {
+                return (
+                  <div key={msg.id} style={{ padding: "2px 0" }}>
+                    <div
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        padding: "5px 12px",
+                        borderRadius: 8,
+                        background: "rgba(168, 218, 220, 0.06)",
+                        border: "1px solid rgba(168, 218, 220, 0.12)",
+                        fontSize: 12,
+                      }}
+                    >
+                      <span style={{ fontSize: 13 }}>🖥</span>
+                      <span style={{ fontWeight: 600, color: "var(--color-accent-cyan)" }}>
+                        {msg.component!.name}
+                      </span>
+                      <span style={{ fontSize: 10, color: "var(--color-text-muted)" }}>shown</span>
+                      <span
+                        title={fullTime(msg.timestamp)}
+                        style={{ fontSize: 10, color: "var(--color-text-muted)", marginLeft: 4 }}
+                      >
+                        {relativeTime(msg.timestamp)}
+                      </span>
                     </div>
-                  )}
+                    {Object.keys(msg.component!.props).length > 0 && (
+                      <div style={{ marginLeft: 16, marginTop: 2 }}>
+                        <ToolDetailBlock data={msg.component!.props} label="Props" />
+                      </div>
+                    )}
+                  </div>
+                );
+              }
+
+              // ── Chat bubble (user = left, assistant = right) ──
+              return (
+                <div
+                  key={msg.id}
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: isUser ? "flex-start" : "flex-end",
+                    maxWidth: "85%",
+                    alignSelf: isUser ? "flex-start" : "flex-end",
+                  }}
+                >
+                  {/* Sender label */}
+                  <span
+                    style={{
+                      fontSize: 10,
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.08em",
+                      color: isUser ? "var(--color-cta)" : "var(--color-accent-cyan)",
+                      marginBottom: 3,
+                      paddingLeft: isUser ? 2 : 0,
+                      paddingRight: isUser ? 0 : 2,
+                    }}
+                  >
+                    {isUser ? "You" : "Reachy"}
+                  </span>
+                  {/* Bubble */}
+                  <div
+                    style={{
+                      padding: "10px 14px",
+                      borderRadius: isUser ? "2px 14px 14px 14px" : "14px 2px 14px 14px",
+                      background: isUser
+                        ? "rgba(255, 255, 255, 0.06)"
+                        : "rgba(168, 218, 220, 0.10)",
+                      border: isUser
+                        ? "1px solid rgba(255, 255, 255, 0.10)"
+                        : "1px solid rgba(168, 218, 220, 0.18)",
+                      fontSize: 14,
+                      lineHeight: 1.6,
+                      color: "var(--color-text-primary)",
+                      wordBreak: "break-word",
+                    }}
+                  >
+                    {msg.content || "(no text)"}
+                  </div>
+                  {/* Timestamp */}
+                  <span
+                    title={fullTime(msg.timestamp)}
+                    style={{
+                      fontSize: 10,
+                      color: "var(--color-text-muted)",
+                      marginTop: 3,
+                      paddingLeft: isUser ? 2 : 0,
+                      paddingRight: isUser ? 0 : 2,
+                      opacity: 0.7,
+                    }}
+                  >
+                    {relativeTime(msg.timestamp)}
+                  </span>
                 </div>
               );
             })

src/reachy_mini_conversation_app/wakeword_detector.py

@@ -42,10 +42,11 @@ _CAPTURE_DIR = Path(__file__).parent.parent.parent.parent / "wakeword_captures"
 _AUDIO_HISTORY_CHUNKS = 50
 
 # Patience: number of consecutive frames above threshold required.
-# The hey_reachy model produces sharp single-frame peaks (score=1.0)
-# rather than sustained runs, so patience > 1 forces the user to
-# repeat themselves. The threshold alone provides sufficient filtering.
-_PATIENCE_FRAMES = 1
+# A real "Hey Reachy" utterance produces sustained high scores across
+# multiple 80ms frames, while false positives from ambient noise tend
+# to spike for only 1-2 frames. Requiring 3 consecutive hits (~240ms)
+# filters out transient spikes without noticeably delaying detection.
+_PATIENCE_FRAMES = 3
 
 # RMS energy gate: skip wakeword evaluation when audio is too quiet.
 # The model produces high false-positive scores on near-silence, so we