feat: add toast notification system with success toasts

Adds ToastProvider/ToastViewport for in-app notifications with dedupe,
auto-dismiss, and action links. Wires success toasts to issue create,
issue update, and comment mutations. Adds live event toasts for activity,
agent status, and run status changes via LiveUpdatesProvider.

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

ui/src/components/Layout.tsx

@@ -9,6 +9,7 @@ import { NewProjectDialog } from "./NewProjectDialog";
 import { NewGoalDialog } from "./NewGoalDialog";
 import { NewAgentDialog } from "./NewAgentDialog";
 import { OnboardingWizard } from "./OnboardingWizard";
+import { ToastViewport } from "./ToastViewport";
 import { useDialog } from "../context/DialogContext";
 import { usePanel } from "../context/PanelContext";
 import { useCompany } from "../context/CompanyContext";
@@ -88,6 +89,7 @@ export function Layout() {
       <NewGoalDialog />
       <NewAgentDialog />
       <OnboardingWizard />
+      <ToastViewport />
     </div>
   );
 }

ui/src/components/NewIssueDialog.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
+import { useToast } from "../context/ToastContext";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
 import { agentsApi } from "../api/agents";
@@ -83,6 +84,7 @@ const priorities = [
 export function NewIssueDialog() {
   const { newIssueOpen, newIssueDefaults, closeNewIssue } = useDialog();
   const { selectedCompanyId, selectedCompany } = useCompany();
+  const { pushToast } = useToast();
   const queryClient = useQueryClient();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
@@ -117,12 +119,19 @@ export function NewIssueDialog() {
   const createIssue = useMutation({
     mutationFn: (data: Record<string, unknown>) =>
       issuesApi.create(selectedCompanyId!, data),
-    onSuccess: () => {
+    onSuccess: (issue) => {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId!) });
       if (draftTimer.current) clearTimeout(draftTimer.current);
       clearDraft();
       reset();
       closeNewIssue();
+      pushToast({
+        dedupeKey: `issue-created-${issue.id}`,
+        title: `${issue.identifier ?? "Issue"} created`,
+        body: issue.title,
+        tone: "success",
+        action: { label: "View issue", href: `/issues/${issue.id}` },
+      });
     },
   });
 

ui/src/components/ToastViewport.tsx

@@ -0,0 +1,73 @@
+import { Link } from "react-router-dom";
+import { X } from "lucide-react";
+import { useToast, type ToastTone } from "../context/ToastContext";
+import { cn } from "../lib/utils";
+
+const toneClasses: Record<ToastTone, string> = {
+  info: "border-border bg-card text-card-foreground",
+  success: "border-emerald-500/40 bg-emerald-50 text-emerald-950 dark:bg-emerald-900/30 dark:text-emerald-100",
+  warn: "border-amber-500/40 bg-amber-50 text-amber-950 dark:bg-amber-900/30 dark:text-amber-100",
+  error: "border-red-500/45 bg-red-50 text-red-950 dark:bg-red-900/35 dark:text-red-100",
+};
+
+const toneDotClasses: Record<ToastTone, string> = {
+  info: "bg-sky-400",
+  success: "bg-emerald-400",
+  warn: "bg-amber-400",
+  error: "bg-red-400",
+};
+
+export function ToastViewport() {
+  const { toasts, dismissToast } = useToast();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <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"
+    >
+      <ol className="flex w-full flex-col gap-2">
+        {toasts.map((toast) => (
+          <li
+            key={toast.id}
+            className={cn(
+              "pointer-events-auto rounded-lg border shadow-lg backdrop-blur-sm",
+              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>
+  );
+}