Merge 1353a848d7 into da71eaebd2

src/auto-reply/reply/commands-tts.ts

@@ -25,11 +25,11 @@ type ParsedTtsCommand = {
 };
 
 function parseTtsCommand(normalized: string): ParsedTtsCommand | null {
-  // Accept `/tts` and `/tts <action> [args]` as a single control surface.
-  if (normalized === "/tts") return { action: "status", args: "" };
+  // Accept `/tts <action> [args]` - return null for `/tts` alone to trigger inline menu.
+  if (normalized === "/tts") return null;
   if (!normalized.startsWith("/tts ")) return null;
   const rest = normalized.slice(5).trim();
-  if (!rest) return { action: "status", args: "" };
+  if (!rest) return null;
   const [action, ...tail] = rest.split(/\s+/);
   return { action: action.toLowerCase(), args: tail.join(" ").trim() };
 }

ui/src/styles/chat/grouped.css

@@ -34,6 +34,34 @@
   justify-content: flex-end;
 }
 
+/* System messages centered with muted styling */
+.chat-group.system {
+  justify-content: center;
+  margin-left: 16px;
+}
+
+.chat-group.system .chat-group-messages {
+  align-items: center;
+  max-width: min(600px, calc(100% - 60px));
+}
+
+.chat-group.system .chat-bubble {
+  background: var(--secondary);
+  border: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--muted);
+  padding: 8px 12px;
+}
+
+.chat-group.system .chat-group-footer {
+  justify-content: center;
+}
+
+.chat-group.system .chat-sender-name {
+  color: var(--muted);
+  opacity: 0.8;
+}
+
 /* Footer at bottom of message group (role + time) */
 .chat-group-footer {
   display: flex;
@@ -89,6 +117,12 @@
   color: var(--muted);
 }
 
+.chat-avatar.system {
+  background: var(--border);
+  color: var(--muted);
+  font-size: 16px;
+}
+
 /* Image avatar support */
 img.chat-avatar {
   display: block;

ui/src/ui/chat/grouped-render.ts

@@ -120,13 +120,17 @@ export function renderMessageGroup(
       ? "You"
       : normalizedRole === "assistant"
         ? assistantName
-        : normalizedRole;
+        : normalizedRole === "system"
+          ? "System"
+          : normalizedRole;
   const roleClass =
     normalizedRole === "user"
       ? "user"
       : normalizedRole === "assistant"
         ? "assistant"
-        : "other";
+        : normalizedRole === "system"
+          ? "system"
+          : "other";
   const timestamp = new Date(group.timestamp).toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit",
@@ -173,15 +177,19 @@ function renderAvatar(
         ? assistantName.charAt(0).toUpperCase() || "A"
         : normalized === "tool"
           ? "⚙"
-          : "?";
+          : normalized === "system"
+            ? "ℹ"
+            : "?";
   const className =
     normalized === "user"
       ? "user"
       : normalized === "assistant"
         ? "assistant"
-      : normalized === "tool"
+        : normalized === "tool"
           ? "tool"
-          : "other";
+          : normalized === "system"
+            ? "system"
+            : "other";
 
   if (assistantAvatar && normalized === "assistant") {
     if (isAvatarUrl(assistantAvatar)) {