feat(webapp): agent status for the standard toast; wake toast uses it

Third ToastUI variant: success's layout with the agent glyph and the Ask
Trigger border. The wake toast drops its Callout composition for it.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/WatchWakeToast.tsx

@@ -12,12 +12,9 @@
  * toasts use — so a wake looks like everything else the dashboard says, not like
  * a one-off panel.
  */
-import { XMarkIcon } from "@heroicons/react/20/solid";
 import { toast } from "sonner";
 import { Button } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
-import { Header2 } from "~/components/primitives/Headers";
-import { Paragraph } from "~/components/primitives/Paragraph";
+import { ToastUI } from "~/components/primitives/Toast";
 import type { WatchObservedOutcome, WatchResolution } from "@internal/dashboard-agent-contracts";
 import { wakeResolution } from "./WakeBanner";
 import { presentResolvedWatch, WATCH_PRESENTATION_FALLBACK } from "./watch-presentation";
@@ -74,38 +71,28 @@ function WakeToastUI({
   message: string;
   onOpenChat: () => void;
 }) {
+  // The standard toast, in its agent status: success's layout, the agent's
+  // glyph and the Ask Trigger border.
   return (
-    // Opaque base under the callout: a callout is translucent by design, and a
-    // toast has to read over whatever page is behind it.
-    <div className="self-end rounded-md bg-background-dimmed" style={{ width: TOAST_WIDTH }}>
-      <Callout
-        variant="agent"
-        cta={
-          <button
-            className="-mr-1 -mt-1 rounded p-1 text-text-dimmed transition hover:text-text-bright"
-            aria-label="Dismiss"
-            onClick={() => toast.dismiss(t)}
-          >
-            <XMarkIcon className="size-4" />
-          </button>
-        }
-      >
-        <div className="flex flex-col items-start gap-1">
-          <Header2 className="pt-0">{title}</Header2>
-          <Paragraph variant="small/dimmed">{message}</Paragraph>
-          <Button
-            variant="secondary/small"
-            className="mt-1"
-            onClick={() => {
-              onOpenChat();
-              toast.dismiss(t);
-            }}
-          >
-            Open chat
-          </Button>
-        </div>
-      </Callout>
-    </div>
+    <ToastUI
+      variant="agent"
+      t={t}
+      title={title}
+      message={message}
+      toastWidth={TOAST_WIDTH}
+      actionNode={
+        <Button
+          variant="secondary/small"
+          className="my-2 self-start"
+          onClick={() => {
+            onOpenChat();
+            toast.dismiss(t);
+          }}
+        >
+          Open chat
+        </Button>
+      }
+    />
   );
 }
 

apps/webapp/app/components/primitives/Toast.tsx

@@ -1,5 +1,6 @@
 import { EnvelopeIcon, ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { AgentMonoLogo } from "./AgentDotMatrix";
 import { useSearchParams } from "@remix-run/react";
 import { useEffect, useMemo } from "react";
 import { useTypedLoaderData } from "remix-typedjson";
@@ -76,20 +77,28 @@ export function ToastUI({
   toastWidth = 356, // Default width, matches what sonner provides by default
   title,
   action,
+  actionNode,
 }: {
-  variant: "error" | "success";
+  variant: "error" | "success" | "agent";
   message: string;
   t: string;
   toastWidth?: string | number;
   title?: string;
   action?: ToastMessageAction;
+  /**
+   * A caller-rendered action (a button with an onClick) for toasts shown from
+   * client code — `action` stays the serializable server-message shape.
+   */
+  actionNode?: React.ReactNode;
 }) {
   return (
     <div
       className={cn(
         "self-end rounded-md border border-grid-bright bg-background-dimmed",
         variant === "success" && "border-success",
-        variant === "error" && "border-error"
+        variant === "error" && "border-error",
+        // The agent's toast wears the Ask Trigger button's border.
+        variant === "agent" && "border-[#41FF54]/25 light:border-success/60"
       )}
       style={{
         width: toastWidth,
@@ -100,6 +109,10 @@ export function ToastUI({
       >
         {variant === "success" ? (
           <CheckCircleIcon className={cn("size-4 min-w-4 text-success", title && "mt-1")} />
+        ) : variant === "agent" ? (
+          <span className={cn("flex size-4 min-w-4 items-center", title && "mt-1")}>
+            <AgentMonoLogo size={16} decorative />
+          </span>
         ) : (
           <ExclamationCircleIcon className={cn("size-4 min-w-4 text-error", title && "mt-1")} />
         )}
@@ -112,6 +125,7 @@ export function ToastUI({
             {message}
           </Paragraph>
           <Action action={action} toastId={t} className="my-2" />
+          {actionNode}
         </div>
         <button
           className={cn(

apps/webapp/app/routes/storybook.toast/route.tsx

@@ -17,6 +17,18 @@ export default function Story() {
         message="This is a long error message that wraps over multiple lines so we can test the UI."
         t="-"
       />
+      <ToastUI variant="agent" message="Agent info UI" t="-" />
+      <ToastUI
+        variant="agent"
+        title="Watch update"
+        message="Error error_c4b4a797 happened again — 1 new occurrence since the watch started."
+        t="-"
+        actionNode={
+          <Button variant="secondary/small" className="my-2 self-start">
+            Open chat
+          </Button>
+        }
+      />
       <br />
       <Button
         variant="primary/medium"