@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/clips/app/lib/recording-backup.ts

@@ -0,0 +1,245 @@
+/**
+ * Local IndexedDB mirror of the raw chunks a web recording captures, so a
+ * failed or stalled upload can be retried from the library without
+ * re-recording. This is the browser-tab equivalent of the desktop app's
+ * "pending recording upload" backup — same idea (mirror every raw
+ * `MediaRecorder` blob as it's produced, keep it until the upload succeeds),
+ * scoped to a plain browser tab instead of a Tauri webview.
+ *
+ * Retry can only work in the browser/profile that made the recording:
+ * IndexedDB is per-origin, per-browser-profile storage. Callers must treat a
+ * missing backup as "not retryable here", not as an error.
+ */
+
+const DB_NAME = "clips-web-recording-backups";
+const DB_VERSION = 1;
+const META_STORE = "recordings";
+const CHUNK_STORE = "chunks";
+
+export interface RecordingBackupMeta {
+  recordingId: string;
+  mimeType: string;
+  durationMs: number;
+  width: number;
+  height: number;
+  hasAudio: boolean;
+  hasCamera: boolean;
+  bytes: number;
+  chunkCount: number;
+  savedAt: string;
+  completedAt: string | null;
+}
+
+export interface RecordingBackupChunk {
+  recordingId: string;
+  index: number;
+  blob: Blob;
+  bytes: number;
+  createdAt: string;
+}
+
+type RecordingBackupChangeListener = () => void;
+
+const backupChangeListeners = new Map<
+  string,
+  Set<RecordingBackupChangeListener>
+>();
+
+function notifyRecordingBackupChange(recordingId: string): void {
+  for (const listener of backupChangeListeners.get(recordingId) ?? []) {
+    listener();
+  }
+}
+
+export function subscribeToRecordingBackupChanges(
+  recordingId: string,
+  listener: RecordingBackupChangeListener,
+): () => void {
+  const listeners =
+    backupChangeListeners.get(recordingId) ??
+    new Set<RecordingBackupChangeListener>();
+  listeners.add(listener);
+  backupChangeListeners.set(recordingId, listeners);
+
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) backupChangeListeners.delete(recordingId);
+  };
+}
+
+export function recordingBackupAvailable(): boolean {
+  return typeof indexedDB !== "undefined";
+}
+
+function openDb(): Promise<IDBDatabase> {
+  if (!recordingBackupAvailable()) {
+    return Promise.reject(new Error("IndexedDB is not available"));
+  }
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(META_STORE)) {
+        db.createObjectStore(META_STORE, { keyPath: "recordingId" });
+      }
+      if (!db.objectStoreNames.contains(CHUNK_STORE)) {
+        const chunks = db.createObjectStore(CHUNK_STORE, {
+          keyPath: ["recordingId", "index"],
+        });
+        chunks.createIndex("recordingId", "recordingId", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () =>
+      reject(request.error ?? new Error("Could not open recording backups"));
+  });
+}
+
+function waitForRequest<T>(request: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () =>
+      reject(request.error ?? new Error("Recording backup request failed"));
+  });
+}
+
+function waitForTransaction(tx: IDBTransaction): Promise<void> {
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onabort = () =>
+      reject(tx.error ?? new Error("Recording backup transaction aborted"));
+    tx.onerror = () =>
+      reject(tx.error ?? new Error("Recording backup transaction failed"));
+  });
+}
+
+export async function putRecordingBackupMeta(
+  meta: RecordingBackupMeta,
+): Promise<void> {
+  const db = await openDb();
+  try {
+    const tx = db.transaction(META_STORE, "readwrite");
+    tx.objectStore(META_STORE).put(meta);
+    await waitForTransaction(tx);
+  } finally {
+    db.close();
+  }
+  notifyRecordingBackupChange(meta.recordingId);
+}
+
+export async function getRecordingBackupMeta(
+  recordingId: string,
+): Promise<RecordingBackupMeta | null> {
+  const db = await openDb();
+  try {
+    const tx = db.transaction(META_STORE, "readonly");
+    const result = await waitForRequest<RecordingBackupMeta | undefined>(
+      tx.objectStore(META_STORE).get(recordingId),
+    );
+    return result ?? null;
+  } finally {
+    db.close();
+  }
+}
+
+export async function putRecordingBackupChunk(
+  recordingId: string,
+  index: number,
+  blob: Blob,
+): Promise<void> {
+  const db = await openDb();
+  try {
+    const chunk: RecordingBackupChunk = {
+      recordingId,
+      index,
+      blob,
+      bytes: blob.size,
+      createdAt: new Date().toISOString(),
+    };
+    const tx = db.transaction(CHUNK_STORE, "readwrite");
+    tx.objectStore(CHUNK_STORE).put(chunk);
+    await waitForTransaction(tx);
+  } finally {
+    db.close();
+  }
+}
+
+/** IndexedDB entries in recording order, with indexes retained for validation. */
+export async function getRecordingBackupChunks(
+  recordingId: string,
+): Promise<RecordingBackupChunk[]> {
+  const db = await openDb();
+  try {
+    const tx = db.transaction(CHUNK_STORE, "readonly");
+    const index = tx.objectStore(CHUNK_STORE).index("recordingId");
+    const chunks = await waitForRequest<RecordingBackupChunk[]>(
+      index.getAll(IDBKeyRange.only(recordingId)),
+    );
+    return chunks.slice().sort((a, b) => a.index - b.index);
+  } finally {
+    db.close();
+  }
+}
+
+export async function deleteRecordingBackup(
+  recordingId: string,
+): Promise<void> {
+  if (!recordingBackupAvailable()) return;
+  const db = await openDb();
+  try {
+    const tx = db.transaction([META_STORE, CHUNK_STORE], "readwrite");
+    tx.objectStore(META_STORE).delete(recordingId);
+    const chunkIndex = tx.objectStore(CHUNK_STORE).index("recordingId");
+    const cursorRequest = chunkIndex.openCursor(IDBKeyRange.only(recordingId));
+    cursorRequest.onsuccess = () => {
+      const cursor = cursorRequest.result;
+      if (!cursor) return;
+      cursor.delete();
+      cursor.continue();
+    };
+    await waitForTransaction(tx);
+  } finally {
+    db.close();
+  }
+  notifyRecordingBackupChange(recordingId);
+}
+
+export function isCompleteRecordingBackup(
+  meta: RecordingBackupMeta,
+  chunks: RecordingBackupChunk[],
+): boolean {
+  if (!meta.completedAt || meta.chunkCount <= 0 || meta.bytes <= 0)
+    return false;
+  if (chunks.length !== meta.chunkCount) return false;
+
+  let bytes = 0;
+  for (let index = 0; index < chunks.length; index++) {
+    const chunk = chunks[index];
+    if (chunk.index !== index || chunk.recordingId !== meta.recordingId) {
+      return false;
+    }
+    if (!(chunk.blob instanceof Blob) || chunk.blob.size !== chunk.bytes) {
+      return false;
+    }
+    bytes += chunk.bytes;
+  }
+  return bytes === meta.bytes;
+}
+
+/** Whether this browser holds a locally-recoverable backup for `recordingId`. */
+export async function hasRecordingBackup(
+  recordingId: string,
+): Promise<boolean> {
+  if (!recordingBackupAvailable()) return false;
+  try {
+    const [meta, chunks] = await Promise.all([
+      getRecordingBackupMeta(recordingId),
+      getRecordingBackupChunks(recordingId),
+    ]);
+    return !!meta && isCompleteRecordingBackup(meta, chunks);
+  } catch {
+    // coercion-ok: an unreadable backup store is exactly as unusable for
+    // retry as a missing one — both mean "can't replay from this browser".
+    return false;
+  }
+}

package/corpus/templates/clips/app/lib/recording-retry.ts

@@ -0,0 +1,189 @@
+/**
+ * Retry a web-originated recording upload that failed or stalled, using the
+ * chunks this browser mirrored to IndexedDB while recording (see
+ * `recording-backup.ts`). This talks to the same `reset-chunks` / `chunk`
+ * upload routes the live recorder uses (`recorder-engine.ts`) and the
+ * desktop app's own local-backup retry uses — there is no separate retry
+ * action, this is the one retry path apps replay the saved chunks through.
+ *
+ * Retry only works in the browser that made the recording: the raw video
+ * bytes never reach the server until the upload finishes, so a browser that
+ * never captured them has nothing to replay. Callers must check
+ * `hasRecordingBackup()` first and tell the user plainly when it's false
+ * rather than showing a retry button that can't succeed.
+ */
+import { appBasePath } from "@agent-native/core/client/api-path";
+import { chunkUploadUrl, UPLOAD_SLICE_BYTES } from "@shared/recording-core";
+
+import {
+  deleteRecordingBackup,
+  getRecordingBackupChunks,
+  getRecordingBackupMeta,
+  isCompleteRecordingBackup,
+} from "./recording-backup";
+
+export { hasRecordingBackup } from "./recording-backup";
+
+export interface RetryRecordingUploadResult {
+  status?: string;
+  videoUrl?: string | null;
+}
+
+export async function retryRecordingUploadFromBackup(
+  recordingId: string,
+): Promise<RetryRecordingUploadResult> {
+  const [meta, chunks] = await Promise.all([
+    getRecordingBackupMeta(recordingId),
+    getRecordingBackupChunks(recordingId),
+  ]);
+  if (!meta || chunks.length === 0) {
+    throw new Error(
+      "This clip's recorded data isn't saved in this browser, so it can only be retried from the device it was recorded on.",
+    );
+  }
+  if (!isCompleteRecordingBackup(meta, chunks)) {
+    throw new Error(
+      "This browser's local recording backup is incomplete and can't be safely retried.",
+    );
+  }
+
+  const attemptId = crypto.randomUUID();
+  const resumeUrl = `${appBasePath()}/api/uploads/${recordingId}/resume?attemptId=${encodeURIComponent(attemptId)}`;
+  const resumeRes = await fetch(resumeUrl, { method: "GET" });
+  if (!resumeRes.ok) {
+    // coercion-ok: response text only enriches an already-failing claim error.
+    const text = await resumeRes.text().catch(() => "");
+    throw new Error(
+      `Couldn't claim the upload retry (resume ${resumeRes.status}). ${
+        text || resumeRes.statusText
+      }`,
+    );
+  }
+  let resume: {
+    resumable?: unknown;
+    attemptId?: unknown;
+    uploadGenerationId?: unknown;
+  };
+  try {
+    resume = (await resumeRes.json()) as typeof resume;
+  } catch {
+    throw new Error("The upload retry claim returned an unreadable response.");
+  }
+  if (resume.resumable !== true || resume.attemptId !== attemptId) {
+    throw new Error("The upload retry could not claim this recording.");
+  }
+  const claimedGenerationId =
+    typeof resume.uploadGenerationId === "string" && resume.uploadGenerationId
+      ? resume.uploadGenerationId
+      : undefined;
+
+  const resetUrl = `${appBasePath()}/api/uploads/${recordingId}/reset-chunks`;
+  const resetRes = await fetch(resetUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      requestStreaming: true,
+      mimeType: meta.mimeType,
+      attemptId,
+      useGenerationFence: true,
+      ...(claimedGenerationId
+        ? { uploadGenerationId: claimedGenerationId }
+        : {}),
+    }),
+  });
+  if (!resetRes.ok) {
+    // coercion-ok: the request already failed; this only fills in the
+    // human-readable detail on the error we're about to throw.
+    const text = await resetRes.text().catch(() => "");
+    throw new Error(
+      `Couldn't restart the upload (reset-chunks ${resetRes.status}). ${
+        text || resetRes.statusText
+      }`,
+    );
+  }
+  let reset: { uploadGenerationId?: unknown };
+  try {
+    reset = (await resetRes.json()) as typeof reset;
+  } catch {
+    throw new Error("Upload retry setup returned an unreadable response.");
+  }
+  if (
+    typeof reset.uploadGenerationId !== "string" ||
+    !reset.uploadGenerationId
+  ) {
+    throw new Error("Upload retry setup returned no upload generation.");
+  }
+  const uploadGenerationId = reset.uploadGenerationId;
+
+  const chunkBaseUrl = `${appBasePath()}/api/uploads/${recordingId}/chunk`;
+  const recordingBlob = new Blob(
+    chunks.map((chunk) => chunk.blob),
+    { type: meta.mimeType },
+  );
+  const total = Math.ceil(recordingBlob.size / UPLOAD_SLICE_BYTES);
+  let result: Record<string, unknown> | undefined;
+
+  for (let index = 0; index < total; index++) {
+    const isFinal = index === total - 1;
+    const url = chunkUploadUrl(chunkBaseUrl, {
+      index,
+      total,
+      isFinal,
+      mimeType: meta.mimeType,
+      attemptId,
+      uploadGenerationId,
+      ...(isFinal
+        ? {
+            durationMs: meta.durationMs,
+            width: meta.width,
+            height: meta.height,
+            hasAudio: meta.hasAudio,
+            hasCamera: meta.hasCamera,
+          }
+        : {}),
+    });
+    const start = index * UPLOAD_SLICE_BYTES;
+    const end = Math.min(start + UPLOAD_SLICE_BYTES, recordingBlob.size);
+    const body = await recordingBlob
+      .slice(start, end, meta.mimeType)
+      .arrayBuffer();
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": meta.mimeType || "application/octet-stream",
+      },
+      body,
+    });
+    if (!res.ok) {
+      // coercion-ok: the request already failed; this only fills in the
+      // human-readable detail on the error we're about to throw.
+      const text = await res.text().catch(() => "");
+      throw new Error(
+        `Upload failed on chunk ${index + 1} of ${total} (${res.status}). ${
+          text || res.statusText
+        }`,
+      );
+    }
+    // coercion-ok: an unparsable 2xx body leaves `status`/`videoUrl` unknown
+    // below, which the caller already treats as "not confirmed ready" and
+    // keeps the local backup — it never gets coerced into a false success.
+    result = (await res.json().catch(() => undefined)) as
+      | Record<string, unknown>
+      | undefined;
+  }
+
+  const status = typeof result?.status === "string" ? result.status : undefined;
+  const videoUrl =
+    typeof result?.videoUrl === "string" ? result.videoUrl : null;
+
+  // Only drop the local copy once the clip is fully verified and ready.
+  // "processing" means finalize hasn't confirmed the media yet, so keep the
+  // backup around the same way the desktop retry keeps its local file until
+  // verification lands — otherwise a failed verification has nothing left
+  // to retry from.
+  if (status === "ready") {
+    await deleteRecordingBackup(recordingId).catch(() => {});
+  }
+
+  return { status, videoUrl };
+}

package/corpus/templates/clips/app/lib/recording-status.ts

@@ -1,5 +1,16 @@
 export const STALE_RECORDING_UPLOAD_MS = 30 * 60 * 1000;
 
+/**
+ * Earlier, non-alarming signal that an upload has gone quiet, shown before
+ * the 30-minute stale threshold above (and well before the server's 60-minute
+ * lease expires and the reaper marks the row failed). Mirrors the thresholds
+ * `r.$recordingId.tsx` and `share.$shareId.tsx` already use to flag a stuck
+ * single-recording view, so the library card and the recording page agree on
+ * when to stop looking "confidently uploading".
+ */
+export const UPLOAD_AT_RISK_MS = 5 * 60 * 1000;
+export const PROCESSING_AT_RISK_MS = 12 * 60 * 1000;
+
 type RecordingStatusLike = {
   status?: string | null;
   updatedAt?: string | null;
@@ -21,6 +32,27 @@ export function isStaleRecordingUpload(
   return nowMs - updatedAtMs >= STALE_RECORDING_UPLOAD_MS;
 }
 
+/**
+ * True once an in-progress upload/processing row has gone quiet longer than
+ * expected but hasn't hit {@link isStaleRecordingUpload} yet. Gives the card
+ * something to show between a confident "uploading" and the eventual
+ * "failed" look, instead of jumping straight from one to the other.
+ */
+export function isAtRiskRecordingUpload(
+  recording: RecordingStatusLike,
+  nowMs = Date.now(),
+): boolean {
+  if (!isActiveRecordingUploadStatus(recording.status)) return false;
+  if (isStaleRecordingUpload(recording, nowMs)) return false;
+  const updatedAtMs = Date.parse(recording.updatedAt ?? "");
+  if (!Number.isFinite(updatedAtMs)) return false;
+  const thresholdMs =
+    recording.status === "processing"
+      ? PROCESSING_AT_RISK_MS
+      : UPLOAD_AT_RISK_MS;
+  return nowMs - updatedAtMs >= thresholdMs;
+}
+
 export function isLiveRecordingUpload(
   recording: RecordingStatusLike,
   nowMs = Date.now(),

package/corpus/templates/clips/app/root.tsx

@@ -348,6 +348,12 @@ function isStandalonePublicPath(pathname: string): boolean {
 }
 
 function AppContent() {
+  const location = useLocation();
+  if (location.pathname === "/") return <Outlet />;
+  return <PrivateAppContent />;
+}
+
+function PrivateAppContent() {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
@@ -402,18 +408,21 @@ export default function Root() {
   const location = useLocation();
   const loaderData = useLoaderData<typeof loader>();
   const [queryClient] = useState(() => createAgentNativeQueryClient());
+  const isMarketingHome = location.pathname === "/";
+  const isPublicPath =
+    isMarketingHome || isStandalonePublicPath(location.pathname);
   return (
     <AppToolkitProvider>
       <AppProviders
         queryClient={queryClient}
-        isPublicPath={isStandalonePublicPath(location.pathname)}
+        isPublicPath={isPublicPath}
         toaster={<Toaster richColors position="bottom-left" />}
         i18n={{
           catalog: i18nCatalog,
           initialLocale: loaderData.locale,
           initialPreference: loaderData.preference,
           initialMessages: loaderData.messages,
-          persistPreference: !isStandalonePublicPath(location.pathname),
+          persistPreference: !isPublicPath,
         }}
       >
         <AppContent />

package/corpus/templates/clips/app/routes/_app.home.tsx

@@ -0,0 +1,62 @@
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
+import { redirect, type LoaderFunctionArgs } from "react-router";
+
+const SEO_TITLE = "Clips - Open Source screen recorder";
+const SEO_DESCRIPTION =
+  "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
+export function meta() {
+  return [
+    { title: SEO_TITLE },
+    {
+      name: "description",
+      content: SEO_DESCRIPTION,
+    },
+    { property: "og:title", content: SEO_TITLE },
+    { property: "og:description", content: SEO_DESCRIPTION },
+    { name: "twitter:card", content: "summary" },
+    { name: "twitter:title", content: SEO_TITLE },
+    { name: "twitter:description", content: SEO_DESCRIPTION },
+  ];
+}
+
+/**
+ * The private home route redirects to /library — the Library is the default
+ * landing view. Everything else hangs off the pathless _app layout so the
+ * sidebar + agent chat persist across navigations.
+ *
+ * Run the redirect on both the server and the client. A client-only
+ * `useNavigate(...)` inside `useEffect` can drop during hydration (before the
+ * route tree is fully attached), leaving the user stranded on `/home` with
+ * a blank main area while the layout chrome around it still renders. A
+ * `loader` redirect runs as part of the server response and the navigation
+ * completes before the app hydrates; `clientLoader` covers SPA-style
+ * navigations to `/home`.
+ */
+function buildTarget(url: URL): string {
+  return `/library${url.search}${url.hash}`;
+}
+
+export function loader({ url }: LoaderFunctionArgs) {
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
+}
+
+export function clientLoader({ url }: LoaderFunctionArgs) {
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex items-center justify-center h-screen w-full">
+      <DefaultSpinner />
+    </div>
+  );
+}
+
+export default function HomeRoute() {
+  return null;
+}

package/corpus/templates/clips/app/routes/_app.notifications.tsx

@@ -9,16 +9,22 @@ import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
 import { PageHeader } from "@/components/library/page-header";
+import {
+  CommentComposer,
+  type MentionEntry,
+} from "@/components/player/comment-composer";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   NotificationsList,
   type NotificationItem,
   type NotificationKind,
 } from "@/components/workspace/notifications-list";
+import { useMentionMembers } from "@/hooks/use-mention-members";
 import enMessages from "@/i18n/en-US";
 
+import { mentionsForCommentText } from "../../shared/comment-mentions";
+
 export function meta() {
   return [{ title: enMessages.notificationsRoute.pageTitle }];
 }
@@ -37,6 +43,11 @@ export default function NotificationsRoute() {
   const [filter, setFilter] = useState<"all" | NotificationKind>("all");
   const [replyFor, setReplyFor] = useState<NotificationItem | null>(null);
   const [replyText, setReplyText] = useState("");
+  const [replyMentions, setReplyMentions] = useState<MentionEntry[]>([]);
+  const { data: mentionMembers = [] } = useMentionMembers(
+    replyFor?.recordingId,
+    !!replyFor,
+  );
 
   const qc = useQueryClient();
   const {
@@ -66,6 +77,7 @@ export default function NotificationsRoute() {
       threadId?: string;
       parentId?: string;
       videoTimestampMs?: number;
+      mentions?: MentionEntry[];
     }
   >("add-comment");
 
@@ -78,9 +90,11 @@ export default function NotificationsRoute() {
         recordingId: replyFor.recordingId,
         content,
         threadId: replyFor.id.replace(/^c:/, ""),
+        mentions: mentionsForCommentText(content, replyMentions),
       });
       toast.success(t("notificationsRoute.replySent"));
       setReplyText("");
+      setReplyMentions([]);
       setReplyFor(null);
       void qc.invalidateQueries({ queryKey: ["action", "list-notifications"] });
       void qc.invalidateQueries({ queryKey: ["action", "list-comments"] });
@@ -142,7 +156,14 @@ export default function NotificationsRoute() {
               </Button>
             </div>
           ) : (
-            <NotificationsList items={filtered} onReply={setReplyFor} />
+            <NotificationsList
+              items={filtered}
+              onReply={(item) => {
+                setReplyText("");
+                setReplyMentions([]);
+                setReplyFor(item);
+              }}
+            />
           )}
         </div>
 
@@ -156,18 +177,23 @@ export default function NotificationsRoute() {
                 {replyFor.recordingTitle}
               </span>
             </div>
-            <div className="flex items-center gap-2">
-              <Input
+            <div className="flex items-end gap-2">
+              <CommentComposer
                 value={replyText}
-                onChange={(e) => setReplyText(e.target.value)}
+                onChange={setReplyText}
+                onMentionAdd={(mention) =>
+                  setReplyMentions((current) =>
+                    current.some((entry) => entry.email === mention.email)
+                      ? current
+                      : [...current, mention],
+                  )
+                }
+                members={mentionMembers}
+                onSubmit={() => void handleSendReply()}
                 placeholder={t("notificationsRoute.replyPlaceholder")}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    void handleSendReply();
-                  }
-                }}
                 autoFocus
+                submitOnEnter
+                className="min-h-10 flex-1 resize-none bg-background text-sm"
               />
               <Button
                 onClick={handleSendReply}
@@ -176,7 +202,14 @@ export default function NotificationsRoute() {
               >
                 <IconSend className="size-4" />
               </Button>
-              <Button variant="ghost" onClick={() => setReplyFor(null)}>
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  setReplyText("");
+                  setReplyMentions([]);
+                  setReplyFor(null);
+                }}
+              >
                 {t("common.cancel")}
               </Button>
             </div>