feat: toast UI improvements — bottom-left, animated, blur glass, richer messages

- Move toast viewport from top-right to bottom-left with slide-up animation
- Apply consistent transparent blur-glass styling across all tone colors
- Include agent names (from query cache) in agent status, run status,
  and activity toasts instead of truncated IDs
- Show specific change details for issue.updated toasts (status, priority)
- Use "New comment by AgentName" instead of generic "Issue comment added"
- Add truncation helper for long body text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/ToastViewport.tsx

@@ -1,13 +1,14 @@
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { X } from "lucide-react";
-import { useToast, type ToastTone } from "../context/ToastContext";
+import { useToast, type ToastItem, type ToastTone } from "../context/ToastContext";
 import { cn } from "../lib/utils";
 
 const toneClasses: Record<ToastTone, string> = {
-  info: "border-border bg-card text-card-foreground",
+  info: "border-sky-500/25 bg-sky-950/60 text-sky-100",
-  success: "border-emerald-500/40 bg-emerald-50 text-emerald-950 dark:bg-emerald-900/30 dark:text-emerald-100",
+  success: "border-emerald-500/25 bg-emerald-950/60 text-emerald-100",
-  warn: "border-amber-500/40 bg-amber-50 text-amber-950 dark:bg-amber-900/30 dark:text-amber-100",
+  warn: "border-amber-500/25 bg-amber-950/60 text-amber-100",
-  error: "border-red-500/45 bg-red-50 text-red-950 dark:bg-red-900/35 dark:text-red-100",
+  error: "border-red-500/30 bg-red-950/60 text-red-100",
 };
 
 const toneDotClasses: Record<ToastTone, string> = {
@@ -17,6 +18,62 @@ const toneDotClasses: Record<ToastTone, string> = {
   error: "bg-red-400",
 };
 
+function AnimatedToast({
+  toast,
+  onDismiss,
+}: {
+  toast: ToastItem;
+  onDismiss: (id: string) => void;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return (
+    <li
+      className={cn(
+        "pointer-events-auto rounded-lg border shadow-lg backdrop-blur-xl transition-all duration-300 ease-out",
+        visible
+          ? "translate-y-0 opacity-100"
+          : "translate-y-3 opacity-0",
+        toneClasses[toast.tone],
+      )}
+    >
+      <div className="flex items-start gap-3 px-3 py-2.5">
+        <span className={cn("mt-1 h-2 w-2 shrink-0 rounded-full", toneDotClasses[toast.tone])} />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold leading-5">{toast.title}</p>
+          {toast.body && (
+            <p className="mt-1 text-xs leading-4 opacity-70">
+              {toast.body}
+            </p>
+          )}
+          {toast.action && (
+            <Link
+              to={toast.action.href}
+              onClick={() => onDismiss(toast.id)}
+              className="mt-2 inline-flex text-xs font-medium underline underline-offset-4 hover:opacity-90"
+            >
+              {toast.action.label}
+            </Link>
+          )}
+        </div>
+        <button
+          type="button"
+          aria-label="Dismiss notification"
+          onClick={() => onDismiss(toast.id)}
+          className="mt-0.5 shrink-0 rounded p-1 opacity-50 hover:bg-white/10 hover:opacity-100"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </li>
+  );
+}
+
 export function ToastViewport() {
   const { toasts, dismissToast } = useToast();
 
@@ -26,46 +83,15 @@ export function ToastViewport() {
     <aside
       aria-live="polite"
       aria-atomic="false"
-      className="pointer-events-none fixed inset-x-0 top-3 z-[120] flex justify-center px-3 sm:inset-auto sm:right-4 sm:top-4 sm:w-full sm:max-w-sm"
+      className="pointer-events-none fixed bottom-3 left-3 z-[120] w-full max-w-sm px-1"
     >
-      <ol className="flex w-full flex-col gap-2">
+      <ol className="flex w-full flex-col-reverse gap-2">
         {toasts.map((toast) => (
-          <li
+          <AnimatedToast
             key={toast.id}
-            className={cn(
+            toast={toast}
-              "pointer-events-auto rounded-lg border shadow-lg backdrop-blur-sm",
+            onDismiss={dismissToast}
-              toneClasses[toast.tone],
+          />
-            )}
-          >
-            <div className="flex items-start gap-3 px-3 py-2.5">
-              <span className={cn("mt-1 h-2 w-2 shrink-0 rounded-full", toneDotClasses[toast.tone])} />
-              <div className="min-w-0 flex-1">
-                <p className="text-sm font-semibold leading-5">{toast.title}</p>
-                {toast.body && (
-                  <p className="mt-1 text-xs leading-4 text-muted-foreground dark:text-foreground/70">
-                    {toast.body}
-                  </p>
-                )}
-                {toast.action && (
-                  <Link
-                    to={toast.action.href}
-                    onClick={() => dismissToast(toast.id)}
-                    className="mt-2 inline-flex text-xs font-medium underline underline-offset-4 hover:opacity-90"
-                  >
-                    {toast.action.label}
-                  </Link>
-                )}
-              </div>
-              <button
-                type="button"
-                aria-label="Dismiss notification"
-                onClick={() => dismissToast(toast.id)}
-                className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-black/10 hover:text-foreground dark:hover:bg-white/10"
-              >
-                <X className="h-3.5 w-3.5" />
-              </button>
-            </div>
-          </li>
         ))}
       </ol>
     </aside>

ui/src/context/LiveUpdatesProvider.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, type ReactNode } from "react";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQueryClient, type QueryClient } from "@tanstack/react-query";
-import type { LiveEvent } from "@paperclip/shared";
+import type { Agent, LiveEvent } from "@paperclip/shared";
 import { useCompany } from "./CompanyContext";
 import type { ToastInput } from "./ToastContext";
 import { useToast } from "./ToastContext";
@@ -23,29 +23,63 @@ function shortId(value: string) {
   return value.slice(0, 8);
 }
 
+function resolveAgentName(
+  queryClient: QueryClient,
+  companyId: string,
+  agentId: string,
+): string | null {
+  const agents = queryClient.getQueryData<Agent[]>(queryKeys.agents.list(companyId));
+  if (!agents) return null;
+  const agent = agents.find((a) => a.id === agentId);
+  return agent?.name ?? null;
+}
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return text.slice(0, max - 1) + "\u2026";
+}
+
 const ISSUE_TOAST_ACTIONS = new Set(["issue.created", "issue.updated", "issue.comment_added"]);
 const AGENT_TOAST_STATUSES = new Set(["running", "idle", "error"]);
 const TERMINAL_RUN_STATUSES = new Set(["succeeded", "failed", "timed_out", "cancelled"]);
 
-function buildActivityToast(payload: Record<string, unknown>): ToastInput | null {
+function describeIssueUpdate(details: Record<string, unknown> | null): string | null {
+  if (!details) return null;
+  const changes: string[] = [];
+  if (typeof details.status === "string") changes.push(`status \u2192 ${details.status}`);
+  if (typeof details.priority === "string") changes.push(`priority \u2192 ${details.priority}`);
+  if (typeof details.assigneeAgentId === "string") changes.push("reassigned");
+  else if (details.assigneeAgentId === null) changes.push("unassigned");
+  if (changes.length > 0) return changes.join(", ");
+  return null;
+}
+
+function buildActivityToast(
+  payload: Record<string, unknown>,
+  nameOf: (id: string) => string | null,
+): ToastInput | null {
   const entityType = readString(payload.entityType);
   const entityId = readString(payload.entityId);
   const action = readString(payload.action);
   const details = readRecord(payload.details);
+  const actorId = readString(payload.actorId);
+  const actorType = readString(payload.actorType);
 
   if (entityType !== "issue" || !entityId || !action || !ISSUE_TOAST_ACTIONS.has(action)) {
     return null;
   }
 
   const issueHref = `/issues/${entityId}`;
-  const issueLabel = details?.title && typeof details.title === "string"
+  const issueTitle = details?.title && typeof details.title === "string"
-    ? details.title
+    ? truncate(details.title, 60)
-    : `Issue ${shortId(entityId)}`;
+    : null;
+  const actorName = actorType === "agent" && actorId ? nameOf(actorId) : null;
+  const byLine = actorName ? ` by ${actorName}` : "";
 
   if (action === "issue.created") {
     return {
-      title: "Issue created",
+      title: `Issue created${byLine}`,
-      body: issueLabel,
+      body: issueTitle ?? `Issue ${shortId(entityId)}`,
       tone: "success",
       action: { label: "Open issue", href: issueHref },
       dedupeKey: `activity:${action}:${entityId}`,
@@ -53,9 +87,12 @@ function buildActivityToast(payload: Record<string, unknown>): ToastInput | null
   }
 
   if (action === "issue.updated") {
+    const changeDesc = describeIssueUpdate(details);
+    const label = issueTitle ?? `Issue ${shortId(entityId)}`;
+    const body = changeDesc ? `${label} \u2014 ${changeDesc}` : label;
     return {
-      title: "Issue updated",
+      title: `Issue updated${byLine}`,
-      body: issueLabel,
+      body: truncate(body, 100),
       tone: "info",
       action: { label: "Open issue", href: issueHref },
       dedupeKey: `activity:${action}:${entityId}`,
@@ -63,8 +100,9 @@ function buildActivityToast(payload: Record<string, unknown>): ToastInput | null
   }
 
   const commentId = readString(details?.commentId);
+  const issueLabel = issueTitle ?? `Issue ${shortId(entityId)}`;
   return {
-    title: "Issue comment added",
+    title: `New comment${byLine}`,
     body: issueLabel,
     tone: "info",
     action: { label: "Open issue", href: issueHref },
@@ -72,48 +110,55 @@ function buildActivityToast(payload: Record<string, unknown>): ToastInput | null
   };
 }
 
-function buildAgentStatusToast(payload: Record<string, unknown>): ToastInput | null {
+function buildAgentStatusToast(
+  payload: Record<string, unknown>,
+  nameOf: (id: string) => string | null,
+): ToastInput | null {
   const agentId = readString(payload.agentId);
   const status = readString(payload.status);
   if (!agentId || !status || !AGENT_TOAST_STATUSES.has(status)) return null;
 
   const tone = status === "error" ? "error" : status === "idle" ? "success" : "info";
+  const name = nameOf(agentId) ?? `Agent ${shortId(agentId)}`;
   const title =
     status === "running"
-      ? "Agent started"
+      ? `${name} started`
       : status === "idle"
-        ? "Agent is idle"
+        ? `${name} is idle`
-        : "Agent error";
+        : `${name} errored`;
 
   return {
     title,
-    body: `Agent ${shortId(agentId)}`,
     tone,
     action: { label: "View agent", href: `/agents/${agentId}` },
     dedupeKey: `agent-status:${agentId}:${status}`,
   };
 }
 
-function buildRunStatusToast(payload: Record<string, unknown>): ToastInput | null {
+function buildRunStatusToast(
+  payload: Record<string, unknown>,
+  nameOf: (id: string) => string | null,
+): ToastInput | null {
   const runId = readString(payload.runId);
   const agentId = readString(payload.agentId);
   const status = readString(payload.status);
   if (!runId || !agentId || !status || !TERMINAL_RUN_STATUSES.has(status)) return null;
 
   const error = readString(payload.error);
+  const name = nameOf(agentId) ?? `Agent ${shortId(agentId)}`;
   const tone = status === "succeeded" ? "success" : status === "cancelled" ? "warn" : "error";
   const title =
     status === "succeeded"
-      ? "Run succeeded"
+      ? `${name} run succeeded`
       : status === "failed"
-        ? "Run failed"
+        ? `${name} run failed`
         : status === "timed_out"
-          ? "Run timed out"
+          ? `${name} run timed out`
-          : "Run cancelled";
+          : `${name} run cancelled`;
 
   return {
     title,
-    body: error ?? `Agent ${shortId(agentId)} · Run ${shortId(runId)}`,
+    body: error ? truncate(error, 100) : undefined,
     tone,
     ttlMs: status === "succeeded" ? 5000 : 7000,
     action: { label: "View run", href: `/agents/${agentId}/runs/${runId}` },
@@ -238,7 +283,7 @@ function gatedPushToast(
 }
 
 function handleLiveEvent(
-  queryClient: ReturnType<typeof useQueryClient>,
+  queryClient: QueryClient,
   expectedCompanyId: string,
   event: LiveEvent,
   pushToast: (toast: ToastInput) => string | null,
@@ -246,6 +291,7 @@ function handleLiveEvent(
 ) {
   if (event.companyId !== expectedCompanyId) return;
 
+  const nameOf = (id: string) => resolveAgentName(queryClient, expectedCompanyId, id);
   const payload = event.payload ?? {};
   if (event.type === "heartbeat.run.log") {
     return;
@@ -254,7 +300,7 @@ function handleLiveEvent(
   if (event.type === "heartbeat.run.queued" || event.type === "heartbeat.run.status") {
     invalidateHeartbeatQueries(queryClient, expectedCompanyId, payload);
     if (event.type === "heartbeat.run.status") {
-      const toast = buildRunStatusToast(payload);
+      const toast = buildRunStatusToast(payload, nameOf);
       if (toast) gatedPushToast(gate, pushToast, "run-status", toast);
     }
     return;
@@ -270,7 +316,7 @@ function handleLiveEvent(
     queryClient.invalidateQueries({ queryKey: queryKeys.org(expectedCompanyId) });
     const agentId = readString(payload.agentId);
     if (agentId) queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentId) });
-    const toast = buildAgentStatusToast(payload);
+    const toast = buildAgentStatusToast(payload, nameOf);
     if (toast) gatedPushToast(gate, pushToast, "agent-status", toast);
     return;
   }
@@ -278,7 +324,7 @@ function handleLiveEvent(
   if (event.type === "activity.logged") {
     invalidateActivityQueries(queryClient, expectedCompanyId, payload);
     const action = readString(payload.action);
-    const toast = buildActivityToast(payload);
+    const toast = buildActivityToast(payload, nameOf);
     if (toast) gatedPushToast(gate, pushToast, `activity:${action ?? "unknown"}`, toast);
   }
 }