feat(frontend): mobile bottom nav, chatbot overhaul, responsive polish

- MobileNav: safe-area-aware bottom tab bar (< md), mirrors desktop nav
- Chatbot: timestamps, per-message copy, retry-on-fail, auto-grow composer,
  MarkdownLite (XSS-safe React nodes, no dangerouslySetInnerHTML)
- AppFrame: NavRail (md+) + MobileNav (< md) + bottom content padding
- Design system: SignalTone ambient (signal/amber/vermilion) driving WebGL
  haze + topbar status pill; SectionHeader/MetricTile; globals.css tokens
- Views: dashboard hero + AmbientField, analysis/media responsive grids

services/frontend/src/app/(dashboard)/analysis/view.tsx

@@ -47,7 +47,9 @@ export function AnalysisView() {
           <Sparkles className="size-5 text-signal" />
           <div>
             <div className="eyebrow">Semantic search</div>
-            <h2 className="display text-2xl text-ink">Search the archive</h2>
+            <h2 className="display text-balance text-2xl text-ink">
+              Search the archive
+            </h2>
           </div>
         </div>
         <div className="relative mt-4">

services/frontend/src/app/(dashboard)/dashboard/view.tsx

@@ -74,10 +74,10 @@ export function DashboardView({
         <div className="flex flex-wrap items-end justify-between gap-4">
           <div>
             <div className="eyebrow mb-2">GMW · Operations Grid</div>
-            <h2 className="display text-[2.6rem] leading-none text-ink glow-signal">
+            <h2 className="display hero-clamp leading-none text-ink glow-signal">
               Ambient Field
             </h2>
-            <p className="mt-2 max-w-md text-sm text-ink-soft">
+            <p className="mt-2 max-w-md text-pretty text-sm text-ink-soft">
               Real-time moderation, voice & media presence across the monitored
               guild. {formatNumber(s.total_messages)} messages captured.
             </p>

services/frontend/src/app/(dashboard)/media/view.tsx

@@ -85,7 +85,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
 
           <div className="min-w-0 flex-1">
             <div className="eyebrow mb-1">Now playing</div>
-            <h2 className="display truncate text-2xl text-ink">
+            <h2 className="display text-balance text-2xl text-ink">
               {current?.title ?? "Nothing queued"}
             </h2>
             {current?.source && (

services/frontend/src/app/globals.css

@@ -171,6 +171,9 @@
   .text-ink-soft { color: var(--color-ink-soft); }
   .text-ink-faint { color: var(--color-ink-faint); }
 
+  /* Fluid hero title — never overflows on small screens. */
+  .hero-clamp { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
+
   .glow-signal {
     text-shadow: 0 0 22px var(--color-signal-glow);
   }

services/frontend/src/components/chatbot/chatbot.tsx

@@ -1,21 +1,51 @@
 "use client";
 
-import { Bot, MessageCircle, Send, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import {
-  Avatar,
+  Bot,
-  Button,
+  Check,
-  GlassPanel,
+  Copy,
-  Input,
+  MessageCircle,
-  toast,
+  RotateCw,
-} from "@/components/primitives";
+  Trash2,
+  X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
+import { MarkdownLite } from "@/components/shared";
 import { useChatbotUserId } from "@/hooks/use-chatbot-user";
 import { chatbotApi } from "@/lib/api";
 import { cn } from "@/lib/utils";
 
 interface Msg {
+  id: string;
   role: "user" | "bot";
   content: string;
+  ts: number;
+}
+
+function formatTime(ts: number): string {
+  try {
+    return new Date(ts).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return "";
+  }
+}
+
+function TypingDots() {
+  return (
+    <div className="flex items-center gap-1 py-1">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="size-1.5 rounded-full bg-ink-faint animate-bounce"
+          style={{ animationDelay: `${i * 0.15}s`, animationDuration: "0.9s" }}
+        />
+      ))}
+    </div>
+  );
 }
 
 export function Chatbot() {
@@ -24,7 +54,11 @@ export function Chatbot() {
   const [msgs, setMsgs] = useState<Msg[]>([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState<string | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!open || !userId) return;
@@ -33,28 +67,81 @@ export function Chatbot() {
       .then((res) => {
         setMsgs(
           res.history.slice(-12).flatMap((h) => [
-            { role: "user" as const, content: h.user_message },
+            {
-            { role: "bot" as const, content: h.bot_response },
+              id: `${h.id}-u`,
+              role: "user" as const,
+              content: h.user_message,
+              ts: Date.parse(h.created_at) || Date.now(),
+            },
+            {
+              id: `${h.id}-b`,
+              role: "bot" as const,
+              content: h.bot_response,
+              ts: Date.parse(h.created_at) || Date.now(),
+            },
           ]),
         );
       })
       .catch(() => {});
   }, [open, userId]);
 
+  // Auto-scroll to newest whenever the thread or typing state changes.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire on thread/typing changes even though the body only reads the ref
   useEffect(() => {
-    listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-  }, []);
+  }, [msgs, loading, open]);
 
-  const send = async () => {
+  // Auto-grow the composer.
-    const text = input.trim();
+  // biome-ignore lint/correctness/useExhaustiveDependencies: height recompute is keyed to input changes; body only reads the textarea element
-    if (!text || loading || !userId) return;
+  useEffect(() => {
+    const ta = taRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
+  }, [input]);
+
+  const copy = async (id: string, text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedId(id);
+      window.setTimeout(() => setCopiedId((c) => (c === id ? null : c)), 1200);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  const clearAll = async () => {
+    if (!userId) return;
+    setMsgs([]);
+    try {
+      await chatbotApi.clearHistory(userId);
+    } catch {
+      /* best-effort */
+    }
+  };
+
+  const send = async (text: string) => {
+    if (!text.trim() || loading || !userId) return;
+    setFailed(null);
     setInput("");
-    setMsgs((m) => [...m, { role: "user", content: text }]);
+    setMsgs((m) => [
+      ...m,
+      { id: `u-${Date.now()}`, role: "user", content: text, ts: Date.now() },
+    ]);
     setLoading(true);
     try {
       const res = await chatbotApi.send(text, undefined, userId);
-      setMsgs((m) => [...m, { role: "bot", content: res.response }]);
+      setMsgs((m) => [
+        ...m,
+        {
+          id: `b-${Date.now()}`,
+          role: "bot",
+          content: res.response,
+          ts: Date.parse(res.timestamp) || Date.now(),
+        },
+      ]);
     } catch (e) {
+      setFailed(text);
       toast({ title: "Chat error", description: String(e), tone: "vermilion" });
     } finally {
       setLoading(false);
@@ -67,7 +154,7 @@ export function Chatbot() {
         type="button"
         aria-label="Open assistant"
         onClick={() => setOpen((o) => !o)}
-        className="fixed bottom-5 right-5 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105"
+        className="fixed right-4 bottom-24 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105 md:right-5 md:bottom-5"
         style={{ width: 52, height: 52 }}
       >
         {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
@@ -75,8 +162,11 @@ export function Chatbot() {
 
       {open && (
         <GlassPanel
-          className="fixed bottom-20 right-5 z-50 flex w-[min(92vw,360px)] flex-col p-0"
+          className="fixed right-4 bottom-24 z-50 flex w-[min(94vw,360px)] flex-col p-0 md:right-5 md:bottom-20"
-          style={{ animation: "fade-up 0.16s ease", height: 460 }}
+          style={{
+            animation: "fade-up 0.16s ease",
+            height: "min(68dvh, 520px)",
+          }}
         >
           <div className="flex items-center gap-2 border-b border-hairline px-4 py-3">
             <span className="flex size-8 items-center justify-center rounded-full bg-signal/15 text-signal">
@@ -90,22 +180,30 @@ export function Chatbot() {
                 context-aware
               </div>
             </div>
+            <button
+              type="button"
+              aria-label="Clear conversation"
+              onClick={clearAll}
+              className="ml-auto rounded-[9px] p-1.5 text-ink-faint transition-colors hover:bg-white/5 hover:text-ink-soft"
+            >
+              <Trash2 className="size-4" />
+            </button>
           </div>
 
           <div
             ref={listRef}
             className="flex-1 space-y-3 overflow-y-auto px-4 py-3"
           >
-            {msgs.length === 0 && (
+            {msgs.length === 0 && !loading && (
               <div className="py-8 text-center text-xs text-ink-faint">
                 Ask about moderation, voice, or media.
               </div>
             )}
-            {msgs.map((m, i) => (
+            {msgs.map((m) => (
               <div
-                key={`${m.role}-${i}`}
+                key={m.id}
                 className={cn(
-                  "flex gap-2",
+                  "group flex gap-2",
                   m.role === "user" ? "justify-end" : "justify-start",
                 )}
               >
@@ -116,15 +214,43 @@ export function Chatbot() {
                     className="mt-0.5 bg-signal/15 text-signal"
                   />
                 )}
+                <div className="flex max-w-[82%] flex-col">
                   <div
                     className={cn(
-                    "max-w-[80%] rounded-2xl px-3 py-2 text-sm",
+                      "rounded-2xl px-3 py-2 text-sm",
                       m.role === "user"
                         ? "rounded-br-sm bg-signal/20 text-ink"
                         : "rounded-bl-sm bg-white/5 text-ink-soft",
                     )}
                   >
+                    {m.role === "bot" ? (
+                      <MarkdownLite content={m.content} />
+                    ) : (
+                      <span className="whitespace-pre-wrap break-words">
                         {m.content}
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      "mt-0.5 flex items-center gap-1.5 text-[0.6rem] text-ink-faint",
+                      m.role === "user" && "flex-row-reverse",
+                    )}
+                  >
+                    <span className="mono">{formatTime(m.ts)}</span>
+                    <button
+                      type="button"
+                      aria-label="Copy message"
+                      onClick={() => copy(m.id, m.content)}
+                      className="rounded p-0.5 opacity-0 transition-opacity hover:text-ink-soft group-hover:opacity-100"
+                    >
+                      {copiedId === m.id ? (
+                        <Check className="size-3 text-signal" />
+                      ) : (
+                        <Copy className="size-3" />
+                      )}
+                    </button>
+                  </div>
                 </div>
               </div>
             ))}
@@ -135,27 +261,49 @@ export function Chatbot() {
                   size={26}
                   className="bg-signal/15 text-signal"
                 />
-                <div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2 text-sm text-ink-faint">
+                <div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2">
-                  …
+                  <TypingDots />
                 </div>
               </div>
             )}
+            <div ref={bottomRef} />
           </div>
 
-          <div className="flex items-center gap-2 border-t border-hairline p-3">
+          {failed && (
-            <Input
+            <div className="mx-3 mb-1 flex items-center gap-2 rounded-[10px] border border-vermilion/30 bg-vermilion/10 px-3 py-1.5 text-xs text-vermilion">
+              <span className="flex-1 truncate">Send failed</span>
+              <button
+                type="button"
+                onClick={() => send(failed)}
+                className="inline-flex items-center gap-1 font-medium hover:underline"
+              >
+                <RotateCw className="size-3" /> Retry
+              </button>
+            </div>
+          )}
+
+          <div className="flex items-end gap-2 border-t border-hairline p-3">
+            <textarea
+              ref={taRef}
+              rows={1}
               placeholder="Message…"
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && send()}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  send(input);
+                }
+              }}
+              className="max-h-[140px] min-h-[40px] flex-1 resize-none rounded-[11px] bg-white/5 border border-hairline px-3 py-2 text-sm text-ink placeholder:text-ink-faint transition-colors focus:outline-none focus:border-signal/50 focus:bg-white/8"
             />
             <Button
               variant="primary"
               size="icon"
-              onClick={send}
+              onClick={() => send(input)}
               disabled={loading}
             >
-              <Send className="size-4" />
+              <MessageCircle className="size-4" />
             </Button>
           </div>
         </GlassPanel>

services/frontend/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export { GuildChannelPicker } from "./guild-picker";
+export { MarkdownLite } from "./markdown";
 export { MetricTile, SectionHeader } from "./section";
 export { EmptyState, ErrorState, LoadingState } from "./states";

services/frontend/src/components/shared/markdown.tsx

@@ -0,0 +1,89 @@
+import { Fragment, type ReactNode } from "react";
+
+/**
+ * Minimal, XSS-safe Markdown renderer.
+ *
+ * Builds React nodes directly (NO dangerouslySetInnerHTML), so AI/user text can
+ * never inject markup. Supports the subset that matters for chat + analysis
+ * blobs: fenced code blocks, inline `code`, **bold**, *italic*, and newlines.
+ * Anything unrecognised is rendered as plain escaped text.
+ */
+
+function renderInline(text: string, keyBase: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const regex = /(\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`)/g;
+  let last = 0;
+  let i = 0;
+  const m: RegExpExecArray | null = regex.exec(text);
+  while (m !== null) {
+    if (m.index > last) nodes.push(text.slice(last, m.index));
+    if (m[2] !== undefined) {
+      nodes.push(
+        <strong key={`${keyBase}-b${i}`} className="font-semibold text-ink">
+          {m[2]}
+        </strong>,
+      );
+    } else if (m[3] !== undefined) {
+      nodes.push(
+        <em key={`${keyBase}-i${i}`} className="italic text-ink-soft">
+          {m[3]}
+        </em>,
+      );
+    } else if (m[4] !== undefined) {
+      nodes.push(
+        <code
+          key={`${keyBase}-c${i}`}
+          className="mono rounded bg-white/10 px-1 py-0.5 text-[0.85em] text-signal"
+        >
+          {m[4]}
+        </code>,
+      );
+    }
+    last = m.index + m[0].length;
+    i += 1;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+function renderBlock(content: string, keyBase: string): ReactNode[] {
+  // Split on triple-backtick fences. Even indices = prose, odd = code block.
+  const parts = content.split("```");
+  return parts.map((part, idx) => {
+    if (idx % 2 === 1) {
+      const nl = part.indexOf("\n");
+      const code = nl >= 0 ? part.slice(nl + 1) : part;
+      return (
+        <pre
+          key={`${keyBase}-pre${idx}`}
+          className="my-1.5 overflow-x-auto rounded-[10px] border border-hairline bg-black/30 p-3"
+        >
+          <code className="mono block whitespace-pre text-xs text-ink-soft">
+            {code.replace(/\n$/, "")}
+          </code>
+        </pre>
+      );
+    }
+    const lines = part.split("\n");
+    return (
+      <Fragment key={`${keyBase}-t${idx}`}>
+        {lines.map((line, li) => (
+          <Fragment key={`${keyBase}-l${idx}-${li}`}>
+            {renderInline(line, `${keyBase}-l${idx}-${li}`)}
+            {li < lines.length - 1 && <br />}
+          </Fragment>
+        ))}
+      </Fragment>
+    );
+  });
+}
+
+export function MarkdownLite({
+  content,
+  className,
+}: {
+  content: string;
+  className?: string;
+}) {
+  return <div className={className}>{renderBlock(content, "md")}</div>;
+}

services/frontend/src/components/shared/section.tsx

@@ -12,12 +12,19 @@ export function SectionHeader({
   className?: string;
 }) {
   return (
-    <div className={cn("mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3", className)}>
+    <div
+      className={cn(
+        "mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3",
+        className,
+      )}
+    >
       <div className="min-w-0">
         {eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
-        <h2 className="display text-xl text-ink">{title}</h2>
+        <h2 className="display text-balance text-xl text-ink">{title}</h2>
       </div>
-      {action && <div className="flex flex-wrap items-center gap-2">{action}</div>}
+      {action && (
+        <div className="flex flex-wrap items-center gap-2">{action}</div>
+      )}
     </div>
   );
 }

services/frontend/src/components/shell/ambient-app.tsx

@@ -1,3 +1,4 @@
+import { MobileNav } from "./mobile-nav";
 import { NavRail } from "./nav-rail";
 import { TopBar } from "./topbar";
 
@@ -5,6 +6,10 @@ import { TopBar } from "./topbar";
  * App chrome: slim nav rail + sticky top bar + scrollable content region.
  * Sits above the fixed AmbientCanvas. Providers (Ambient + WS) are mounted in
  * the route layout so every page shares one live link and signal context.
+ *
+ * < md the side rail collapses (hidden) and a bottom tab bar (MobileNav)
+ * takes over navigation; the content region gains bottom padding so the last
+ * panel never hides behind the dock.
  */
 export function AppFrame({ children }: { children: React.ReactNode }) {
   return (
@@ -12,10 +17,11 @@ export function AppFrame({ children }: { children: React.ReactNode }) {
       <NavRail />
       <div className="flex min-w-0 flex-1 flex-col">
         <TopBar />
-        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-[calc(2rem+env(safe-area-inset-bottom))] sm:px-5">
+        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-[calc(2rem+env(safe-area-inset-bottom))] pt-4 sm:px-5 sm:pb-[calc(2.5rem+env(safe-area-inset-bottom))]">
           {children}
         </main>
       </div>
+      <MobileNav />
     </div>
   );
 }

services/frontend/src/components/shell/index.ts

@@ -1,4 +1,5 @@
 export { AppFrame } from "./ambient-app";
+export { MobileNav } from "./mobile-nav";
 export { NavRail } from "./nav-rail";
 export { ConnectionStatus } from "./status-dot";
 export { TopBar } from "./topbar";

services/frontend/src/components/shell/mobile-nav.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { isActivePath, mobileNavItems } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+
+/**
+ * Mobile bottom tab bar. Shown only < md (the side NavRail is hidden there).
+ * Mirrors the desktop nav items but as a thumb-friendly dock with labels and a
+ * top active indicator. Safe-area aware for notched devices.
+ */
+export function MobileNav() {
+  const path = usePathname() ?? "/";
+
+  return (
+    <nav className="glass fixed inset-x-0 bottom-0 z-40 flex items-stretch justify-around rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden">
+      {mobileNavItems.map((item) => {
+        const active = isActivePath(path, item.matchPrefix);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-label={item.label}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
+              active
+                ? "bg-signal/15 text-signal"
+                : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+            )}
+          >
+            {active && (
+              <span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
+            )}
+            <item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

services/frontend/src/components/shell/nav-rail.tsx

@@ -31,6 +31,10 @@ function NavItem({
         <span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
       )}
       <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
+      {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+        {label}
+      </span>
     </a>
   );
 }
@@ -40,7 +44,7 @@ export function NavRail() {
   const path = pathname ?? "/";
 
   return (
-    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] flex w-[68px] flex-col items-center gap-1 rounded-[18px] py-4">
+    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
       <div className="flex flex-1 flex-col gap-1">
         {navItems.map((item) => (
           <NavItem

services/frontend/src/components/shell/topbar.tsx

@@ -35,7 +35,9 @@ export function TopBar() {
     <header className="sticky top-0 z-40 flex items-center gap-3 px-4 py-3 pt-[calc(0.75rem+env(safe-area-inset-top))] sm:gap-4 sm:px-5 sm:py-3.5">
       <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
         <span className="eyebrow hidden sm:inline">GMW</span>
-        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">{label}</h1>
+        <h1 className="display truncate text-[1.25rem] text-ink sm:text-[1.5rem]">
+          {label}
+        </h1>
       </div>
 
       <div className="ml-auto flex items-center gap-2 sm:gap-3">