Fix immediate mobile copy feedback (#262)

scripts/e2e/run-playwright-smoke.js

@@ -1081,19 +1081,51 @@ async function assertMobileTouchTargets(page, routeLabel) {
 
 async function clickCopyAndExpectToast(page, button, label) {
     await button.waitFor({ state: "visible", timeout: 15_000 });
-    await page.waitForTimeout(2500);
     await button.scrollIntoViewIfNeeded();
     await button.evaluate((element) => {
         element.scrollIntoView({ block: "center", inline: "nearest" });
     });
     await button.click();
 
-    const copiedToast = page.getByText(/copied/i).first();
-    await copiedToast.waitFor({ state: "visible", timeout: 5_000 }).catch(() => {
-        throw new Error(`Expected copied toast after ${label}.`);
+    const copiedFeedback = page.locator("[data-sonner-toast], [data-inline-tool-action-feedback]")
+        .filter({ hasText: /copied/i })
+        .first();
+    await copiedFeedback.waitFor({ state: "visible", timeout: 5_000 }).catch(() => {
+        throw new Error(`Expected copied feedback after ${label}.`);
+    });
+    await page.waitForFunction(() => {
+        const feedback = [...document.querySelectorAll("[data-sonner-toast], [data-inline-tool-action-feedback]")]
+            .find((element) => element.textContent?.toLowerCase().includes("copied"));
+        if (!(feedback instanceof HTMLElement)) return false;
+
+        const style = getComputedStyle(feedback);
+        const rect = feedback.getBoundingClientRect();
+        const viewport = visualViewport || {
+            offsetLeft: 0,
+            offsetTop: 0,
+            width: innerWidth,
+            height: innerHeight,
+        };
+        const viewportRight = viewport.offsetLeft + viewport.width;
+        const viewportBottom = viewport.offsetTop + viewport.height;
+        const sonnerReady = !feedback.matches("[data-sonner-toast]")
+            || (feedback.dataset.mounted === "true" && feedback.dataset.visible === "true");
+        return sonnerReady
+            && Number.parseFloat(style.opacity) >= 0.99
+            && style.visibility !== "hidden"
+            && rect.width > 0
+            && rect.height > 0
+            && rect.left >= viewport.offsetLeft - 1
+            && rect.right <= viewportRight + 1
+            && rect.top >= viewport.offsetTop - 1
+            && rect.bottom <= viewportBottom + 1;
+    }, null, { timeout: 5_000 }).catch(() => {
+        throw new Error(`Expected opaque copied feedback fully inside the visual viewport after ${label}.`);
     });
 
-    await page.locator("[data-sonner-toast]").filter({ hasText: /copied/i }).first()
+    await page.locator("[data-sonner-toast], [data-inline-tool-action-feedback]")
+        .filter({ hasText: /copied/i })
+        .first()
         .waitFor({ state: "hidden", timeout: 8_000 })
         .catch(() => {});
 }

src/components/ui/sonner.tsx

@@ -11,31 +11,36 @@ import * as React from "react"
 import { Toaster as Sonner, toast, type ToasterProps } from "sonner"
 import { drainQueuedToastFeedback, setToastLiveRegionReady } from "@/core/feedback/toast-live-region-state"
 import { useThemePreference } from "@/hooks/use-theme-preference"
+import { useVisualViewportRect } from "@/hooks/use-visual-viewport-rect"
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const Toaster = ({ className, style, ...props }: ToasterProps) => {
   const { resolvedTheme } = useThemePreference()
+  const visualViewportRect = useVisualViewportRect()
   const sonnerRef = React.useRef<HTMLElement | null>(null)
 
   React.useEffect(() => {
     const liveRegion = sonnerRef.current
     const queuedFeedback = drainQueuedToastFeedback()
     const previousLiveMode = liveRegion?.getAttribute("aria-live") || "polite"
+    const replay = (feedback: (typeof queuedFeedback)[number]) => {
+      const options = { id: feedback.id, description: feedback.description }
+      if (feedback.type === "error") {
+        toast.error(feedback.message, options)
+      } else {
+        toast.success(feedback.message, options)
+      }
+    }
 
     if (queuedFeedback.length > 0) {
       liveRegion?.setAttribute("aria-live", "off")
-      for (const feedback of queuedFeedback) {
-        const options = { id: feedback.id, description: feedback.description }
-        if (feedback.type === "error") {
-          toast.error(feedback.message, options)
-        } else {
-          toast.success(feedback.message, options)
-        }
-      }
+      queuedFeedback.forEach(replay)
     }
 
     setToastLiveRegionReady(true)
     if (queuedFeedback.length > 0) {
-      globalThis.setTimeout(() => liveRegion?.setAttribute("aria-live", previousLiveMode), 0)
+      globalThis.setTimeout(() => {
+        if (liveRegion?.isConnected) liveRegion.setAttribute("aria-live", previousLiveMode)
+      }, 0)
     }
 
     return () => {
@@ -44,27 +49,37 @@ const Toaster = ({ ...props }: ToasterProps) => {
   }, [])
 
   return (
-    <Sonner
-      ref={sonnerRef}
-      theme={resolvedTheme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
+    <div
+      data-toast-visual-viewport
+      className={visualViewportRect
+        ? "pointer-events-none fixed z-[999999999]"
+        : "pointer-events-none fixed inset-0 z-[999999999]"}
+      style={visualViewportRect || undefined}
+    >
+      <Sonner
+        ref={sonnerRef}
+        theme={resolvedTheme as ToasterProps["theme"]}
+        className={["toaster group pointer-events-auto", className].filter(Boolean).join(" ")}
+        icons={{
+          success: <CircleCheckIcon className="size-4" />,
+          info: <InfoIcon className="size-4" />,
+          warning: <TriangleAlertIcon className="size-4" />,
+          error: <OctagonXIcon className="size-4" />,
+          loading: <Loader2Icon className="size-4 animate-spin" />,
+        }}
+        style={
+          {
+            position: "absolute",
+            "--normal-bg": "var(--popover)",
+            "--normal-text": "var(--popover-foreground)",
+            "--normal-border": "var(--border)",
+            "--border-radius": "var(--radius)",
+            ...style,
+          } as React.CSSProperties
+        }
+        {...props}
+      />
+    </div>
   )
 }
 

src/core/feedback/toast-live-region-state.ts

@@ -13,6 +13,7 @@ export function isToastLiveRegionReady() {
 }
 
 export function setToastLiveRegionReady(ready: boolean) {
+    if (liveRegionReady === ready) return
     liveRegionReady = ready
 }
 

src/features/tool-shell/inline-tool-action-feedback.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { useVisualViewportRect } from "@/hooks/use-visual-viewport-rect"
+import type { ToolActionResult } from "./tool-action-bar"
+
+export type InlineToolActionFeedbackState = {
+    id: number
+    result: ToolActionResult
+} | null
+
+export function useInlineToolActionFeedback() {
+    const sequenceRef = React.useRef(0)
+    const mountedRef = React.useRef(true)
+    const dismissTimerRef = React.useRef<ReturnType<typeof globalThis.setTimeout> | null>(null)
+    const [feedback, setFeedback] = React.useState<InlineToolActionFeedbackState>(null)
+
+    const clearDismissTimer = React.useCallback(() => {
+        if (dismissTimerRef.current !== null) {
+            globalThis.clearTimeout(dismissTimerRef.current)
+            dismissTimerRef.current = null
+        }
+    }, [])
+
+    React.useEffect(() => {
+        mountedRef.current = true
+        return () => {
+            mountedRef.current = false
+            clearDismissTimer()
+        }
+    }, [clearDismissTimer])
+
+    const run = React.useCallback(async (action: () => Promise<ToolActionResult>) => {
+        const result = await action()
+        if (!mountedRef.current) return result
+        clearDismissTimer()
+        if (result.announce === true) {
+            sequenceRef.current += 1
+            const id = sequenceRef.current
+            setFeedback({ id, result })
+            dismissTimerRef.current = globalThis.setTimeout(() => {
+                setFeedback((current) => current?.id === id ? null : current)
+                dismissTimerRef.current = null
+            }, result.status === "failed" ? 8000 : 5000)
+        } else {
+            setFeedback(null)
+        }
+        return result
+    }, [clearDismissTimer])
+
+    return { feedback, run }
+}
+
+export function InlineToolActionFeedback({ feedback }: { feedback: InlineToolActionFeedbackState }) {
+    const visualViewportRect = useVisualViewportRect()
+
+    if (!feedback?.result.message || typeof document === "undefined") return null
+
+    const { message, description, status } = feedback.result
+    const text = description
+        ? `${message}${/[.!?]$/.test(message) ? " " : ". "}${description}`
+        : message
+
+    return createPortal(
+        <div
+            data-inline-tool-action-feedback-viewport
+            className={visualViewportRect
+                ? "pointer-events-none fixed z-[100] flex items-end justify-end p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]"
+                : "pointer-events-none fixed inset-0 z-[100] flex items-end justify-end p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]"}
+            style={visualViewportRect || undefined}
+        >
+            <p
+                key={feedback.id}
+                role={status === "failed" ? "alert" : "status"}
+                aria-atomic="true"
+                data-inline-tool-action-feedback
+                className={status === "failed"
+                    ? "max-w-full break-words [overflow-wrap:anywhere] rounded-md border border-destructive/40 bg-background px-3 py-2 text-sm text-destructive shadow-lg sm:max-w-sm"
+                    : "max-w-full break-words [overflow-wrap:anywhere] rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-lg sm:max-w-sm"}
+            >
+                {text}
+            </p>
+        </div>,
+        document.body,
+    )
+}

src/features/tool-shell/lazy-tool-action-feedback.ts

@@ -0,0 +1,43 @@
+"use client"
+
+import type { TranslationType } from "@/core/i18n/lang-provider"
+import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { isToastLiveRegionReady } from "@/core/feedback/toast-live-region-state"
+import type { ToolActionResult } from "./tool-action-bar"
+
+let feedbackSequence = 0
+
+function nextFeedbackId() {
+    feedbackSequence += 1
+    return `lazy-tool-action-feedback-${feedbackSequence}`
+}
+
+export async function copyTextWithLazyToolFeedback(
+    t: TranslationType,
+    text: string,
+    label: string,
+    description?: string,
+): Promise<ToolActionResult> {
+    const copyResult = await safeClipboardWrite(text)
+    const status = copyResult.ok ? "success" : "failed"
+    const message = copyResult.ok ? t.common.copied : t.common.copy_failed
+    const detail = copyResult.ok ? description || `${label}: ${t.common.copied_desc}` : label
+    const toastId = nextFeedbackId()
+
+    if (!isToastLiveRegionReady()) {
+        return { status, message, description: detail, announce: true }
+    }
+
+    try {
+        const { toast } = await import("sonner")
+        const options = { id: toastId, description: detail }
+        if (copyResult.ok) {
+            toast.success(message, options)
+        } else {
+            toast.error(message, options)
+        }
+        return { status, message, description: detail, announce: false }
+    } catch {
+        return { status, message, description: detail, announce: true }
+    }
+}

src/features/tools/crontab-generator/page.tsx

@@ -2,11 +2,11 @@
 
 import * as React from "react"
 import { Copy, CalendarClock, Eraser } from "lucide-react"
-import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import { useLang } from "@/core/i18n/lang-provider"
 import { Input } from "@/components/ui/input"
-import { safeClipboardWrite } from "@/core/clipboard/clipboard"
+import { copyTextWithLazyToolFeedback } from "@/features/tool-shell/lazy-tool-action-feedback"
+import { InlineToolActionFeedback, useInlineToolActionFeedback } from "@/features/tool-shell/inline-tool-action-feedback"
 import type { Locale } from "@/core/i18n/i18n"
 import cronstrue from "cronstrue/i18n.js"
 import {
@@ -43,6 +43,7 @@ export function CrontabGeneratorPage() {
     const [cronString, setCronString] = React.useState("* * * * *")
     const [description, setDescription] = React.useState("")
     const [error, setError] = React.useState<string | null>(null)
+    const { feedback: copyFeedback, run: runCopyAction } = useInlineToolActionFeedback()
 
     const parts = parseCronParts(cronString)
     const fieldDefinitions = getCronFieldDefinitions(parts.length)
@@ -86,16 +87,14 @@ export function CrontabGeneratorPage() {
         }
     }, [cronLocale, cronString, toolT.invalid_expression])
 
-    const handleCopy = async () => {
+    const handleCopy = () => {
         if (!cronString || error) return
-        const result = await safeClipboardWrite(cronString)
-        if (!result.ok) {
-            toast.error(t.common.copy_failed)
-            return
-        }
-        toast.success(t.common.copied, {
-            description: toolT.copy_expression_success,
-        })
+        return runCopyAction(() => copyTextWithLazyToolFeedback(
+            t,
+            cronString,
+            toolT.copy_expression,
+            toolT.copy_expression_success,
+        ))
     }
 
     const handleClear = () => {
@@ -125,6 +124,8 @@ export function CrontabGeneratorPage() {
                 </div>
             </div>
 
+            <InlineToolActionFeedback feedback={copyFeedback} />
+
             <div className="grid grid-cols-1 gap-8">
 
                 {/* Output Section */}