From 29df784aeb9e48519d518dfeed694f5babdb0f5f Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Fri, 24 Jul 2026 21:31:47 +0700
Subject: [PATCH] feat: add Redis-backed SSE updates

---
 app/actions/questions.ts                      |  28 +-
 app/actions/submissions.ts                    |  25 ++
 app/admin/backend/actions.ts                  |   5 +-
 app/admin/form/[id]/client.tsx                |  60 +++-
 app/admin/form/[id]/extra/client.tsx          | 121 ++++---
 app/admin/form/[id]/extra/page.tsx            |  24 +-
 app/admin/form/[id]/page.tsx                  |  24 +-
 .../form/[id]/result/[submissionId]/page.tsx  |   2 +
 app/admin/form/[id]/result/page.tsx           |   2 +
 app/admin/form/actions.ts                     |  21 ++
 app/admin/form/page.tsx                       |   2 +
 app/form/[id]/page.tsx                        |   2 +
 app/form/page.tsx                             |  50 +--
 app/sse/[topic]/route.ts                      |  34 ++
 bun.lock                                      |   8 +
 components/realtime-refresh.tsx               |  55 +++
 lib/followers/index.ts                        |   9 +-
 lib/redis.ts                                  |  64 +++-
 lib/sse.ts                                    | 313 ++++++++++++++++++
 package.json                                  |   2 +
 skill/erika-sse/SKILL.md                      | 153 +++++++++
 skill/erika-sse/agents/openai.yaml            |   4 +
 22 files changed, 912 insertions(+), 96 deletions(-)
 create mode 100644 app/sse/[topic]/route.ts
 create mode 100644 components/realtime-refresh.tsx
 create mode 100644 lib/sse.ts
 create mode 100644 skill/erika-sse/SKILL.md
 create mode 100644 skill/erika-sse/agents/openai.yaml

diff --git a/app/actions/questions.ts b/app/actions/questions.ts
index b78e042..f4ce4f5 100644
--- a/app/actions/questions.ts
+++ b/app/actions/questions.ts
@@ -9,6 +9,7 @@ import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import { requireAdmin } from "@/lib/auth";
 import { sanitizeHtml } from "@/lib/sanitize-html";
+import { sse } from "@/lib/sse";
 
 export async function createQuestion(
   formId: string,
@@ -30,6 +31,11 @@ export async function createQuestion(
     options: data.options ?? [],
     allowOther: false,
   });
+  void sse.forms.pub("update", {
+    formId,
+    entity: "question",
+    action: "created",
+  });
   revalidatePath("/form");
   revalidatePath("/admin/form");
 }
@@ -62,6 +68,11 @@ export async function updateQuestion(
   };
 
   await db.update(questions).set(nextData).where(eq(questions.id, id));
+  void sse.forms.pub("update", {
+    formId,
+    entity: "question",
+    action: "updated",
+  });
   revalidatePath("/form");
   revalidatePath("/admin/form");
 }
@@ -96,7 +107,12 @@ export async function bulkUpdateQuestions(
         .where(eq(questions.id, u.id))
     )
   );
-  
+
+  void sse.forms.pub("update", {
+    formId,
+    entity: "question",
+    action: "updated",
+  });
   revalidatePath("/form");
   revalidatePath("/admin/form");
 }
@@ -123,6 +139,11 @@ export async function deleteQuestion(id: string, formId: string) {
     await deleteImageFile(q.imageUrl);
   }
   await db.delete(questions).where(eq(questions.id, id));
+  void sse.forms.pub("update", {
+    formId,
+    entity: "question",
+    action: "deleted",
+  });
   revalidatePath("/form");
   revalidatePath(`/admin/form/${formId}`);
 }
@@ -140,6 +161,11 @@ export async function reorderQuestions(
         .where(eq(questions.id, id))
     )
   );
+  void sse.forms.pub("update", {
+    formId,
+    entity: "question",
+    action: "updated",
+  });
   revalidatePath("/form");
   revalidatePath(`/admin/form/${formId}`);
 }
diff --git a/app/actions/submissions.ts b/app/actions/submissions.ts
index 44c883d..54393da 100644
--- a/app/actions/submissions.ts
+++ b/app/actions/submissions.ts
@@ -7,6 +7,7 @@ import { revalidatePath } from "next/cache";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { requireAdmin, requireDiscordId, requireFormAccess } from "@/lib/auth";
+import { sse } from "@/lib/sse";
 
 export async function submitForm(
   formId: string,
@@ -148,6 +149,11 @@ export async function submitForm(
     }
   }
 
+  void sse.submissions.pub("update", {
+    formId,
+    submissionId: result.submissionId,
+    action: result.isUpdate ? "updated" : "created",
+  });
   revalidatePath(`/admin/form/${formId}/result`);
   return { ok: true };
 }
@@ -155,7 +161,18 @@ export async function submitForm(
 export async function deleteSubmission(id: string) {
   await requireAdmin();
 
+  const submission = await db.query.submissions.findFirst({
+    where: (submission, { eq }) => eq(submission.id, id),
+    columns: { formId: true },
+  });
   await db.delete(submissions).where(eq(submissions.id, id));
+  if (submission) {
+    void sse.submissions.pub("update", {
+      formId: submission.formId,
+      submissionId: id,
+      action: "deleted",
+    });
+  }
   revalidatePath("/admin/form");
   return { ok: true };
 }
@@ -164,6 +181,10 @@ export async function deleteAllSubmissions(formId: string) {
   await requireAdmin();
 
   await db.delete(submissions).where(eq(submissions.formId, formId));
+  void sse.submissions.pub("update", {
+    formId,
+    action: "deleted",
+  });
   revalidatePath(`/admin/form/${formId}/result`);
   return { ok: true };
 }
@@ -179,6 +200,10 @@ export async function deleteOwnSubmission(formId: string) {
       eq(submissions.userDiscordId, discordId)
     )
   );
+  void sse.submissions.pub("update", {
+    formId,
+    action: "deleted",
+  });
   revalidatePath(`/form`);
   revalidatePath(`/admin/form/${formId}/result`);
   return { ok: true };
diff --git a/app/admin/backend/actions.ts b/app/admin/backend/actions.ts
index a299127..c1430a4 100644
--- a/app/admin/backend/actions.ts
+++ b/app/admin/backend/actions.ts
@@ -57,13 +57,14 @@ export async function refetchPlatform(
       ? JSON.parse(cached)
       : {};
     counts[platform] = count;
-    await redis.set("erika:follower_counts", JSON.stringify(counts), { ex: 3600 });
+    await redis.set("erika:follower_counts", JSON.stringify(counts), "EX", 3600);
 
     if (tiktokProfile) {
       await redis.set(
         "erika:tiktok_profile",
         JSON.stringify(tiktokProfile),
-        { ex: 3600 }
+        "EX",
+        3600,
       );
     }
   } catch {
diff --git a/app/admin/form/[id]/client.tsx b/app/admin/form/[id]/client.tsx
index 9e90c6a..f7d248e 100644
--- a/app/admin/form/[id]/client.tsx
+++ b/app/admin/form/[id]/client.tsx
@@ -78,6 +78,14 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
 
   const formTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const questionsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const formDirtyRef = useRef(false);
+  const questionsDirtyRef = useRef(false);
+  const formSavingRef = useRef(false);
+  const questionsSavingRef = useRef(false);
+  const formRevisionRef = useRef(0);
+  const questionsRevisionRef = useRef(0);
+  const activeFormSaveRef = useRef(0);
+  const activeQuestionsSaveRef = useRef(0);
 
   // Refs to always read latest state inside debounced callbacks
   const formTitleRef = useRef(formTitle);
@@ -98,6 +106,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
     formTimerRef.current = setTimeout(async () => {
       const title = formTitleRef.current;
       if (!title.trim()) return;
+      const revision = formRevisionRef.current;
+      activeFormSaveRef.current = revision;
+      formSavingRef.current = true;
       setFormSaveStatus("saving");
       try {
         await updateForm(form.id, {
@@ -105,12 +116,19 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
           description: formDescriptionRef.current,
           isOpen: formIsOpenRef.current,
         });
+        if (formRevisionRef.current === revision) {
+          formDirtyRef.current = false;
+        }
         setFormSaveStatus("saved");
         router.refresh();
         setTimeout(() => setFormSaveStatus("idle"), 2000);
       } catch {
         toast.error("Failed to auto-save form settings.");
         setFormSaveStatus("idle");
+      } finally {
+        if (activeFormSaveRef.current === revision) {
+          formSavingRef.current = false;
+        }
       }
     }, 1000);
   }, [form.id, router]);
@@ -121,6 +139,9 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
     questionsTimerRef.current = setTimeout(async () => {
       const current = questionsRef.current;
       if (current.length === 0) return;
+      const revision = questionsRevisionRef.current;
+      activeQuestionsSaveRef.current = revision;
+      questionsSavingRef.current = true;
       setQuestionsSaveStatus("saving");
       try {
         const formattedUpdates = current.map(q => ({
@@ -129,12 +150,19 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
           allowOther: q.allowOther,
         }));
         await bulkUpdateQuestions(form.id, formattedUpdates);
+        if (questionsRevisionRef.current === revision) {
+          questionsDirtyRef.current = false;
+        }
         setQuestionsSaveStatus("saved");
         router.refresh();
         setTimeout(() => setQuestionsSaveStatus("idle"), 2000);
       } catch {
         toast.error("Failed to auto-save questions.");
         setQuestionsSaveStatus("idle");
+      } finally {
+        if (activeQuestionsSaveRef.current === revision) {
+          questionsSavingRef.current = false;
+        }
       }
     }, 1500);
   }, [form.id, router]);
@@ -148,16 +176,22 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
   }, []);
 
   const handleFormTitleChange = (val: string) => {
+    formDirtyRef.current = true;
+    formRevisionRef.current += 1;
     setFormTitle(val);
     autoSaveForm();
   };
 
   const handleFormDescriptionChange = (val: string) => {
+    formDirtyRef.current = true;
+    formRevisionRef.current += 1;
     setFormDescription(val);
     autoSaveForm();
   };
 
   const handleFormIsOpenChange = (val: boolean) => {
+    formDirtyRef.current = true;
+    formRevisionRef.current += 1;
     setFormIsOpen(val);
     autoSaveForm();
   };
@@ -179,6 +213,8 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
   };
 
   const handleUpdateQuestion = (id: string, updates: Partial<Question>) => {
+    questionsDirtyRef.current = true;
+    questionsRevisionRef.current += 1;
     setQuestions((prev) =>
       prev.map((q) => (q.id === id ? { ...q, ...updates } as Question : q))
     );
@@ -188,6 +224,11 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
   const handleDeleteQuestion = async (id: string) => {
     try {
       await deleteQuestion(id, form.id);
+      setQuestions((current) => {
+        const next = current.filter((question) => question.id !== id);
+        questionsRef.current = next;
+        return next;
+      });
       router.refresh();
     } catch (err: unknown) {
       console.error("Failed to delete question:", err);
@@ -208,6 +249,8 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
       q.displayOrder = idx;
     });
 
+    questionsDirtyRef.current = true;
+    questionsRevisionRef.current += 1;
     setQuestions(newQuestions);
     autoSaveQuestions();
   };
@@ -287,8 +330,21 @@ export default function FormEditorClient({ form, initialQuestions }: FormEditorC
   };
 
   useEffect(() => {
-    const timeout = setTimeout(() => setQuestions(initialQuestions), 0);
-    return () => clearTimeout(timeout);
+    if (formDirtyRef.current || formSavingRef.current) return;
+
+    setFormTitle(form.title);
+    setFormDescription(form.description || "");
+    setFormIsOpen(form.isOpen);
+    formTitleRef.current = form.title;
+    formDescriptionRef.current = form.description || "";
+    formIsOpenRef.current = form.isOpen;
+  }, [form]);
+
+  useEffect(() => {
+    if (questionsDirtyRef.current || questionsSavingRef.current) return;
+
+    setQuestions(initialQuestions);
+    questionsRef.current = initialQuestions;
   }, [initialQuestions]);
 
   return (
diff --git a/app/admin/form/[id]/extra/client.tsx b/app/admin/form/[id]/extra/client.tsx
index dd657f9..a73915a 100644
--- a/app/admin/form/[id]/extra/client.tsx
+++ b/app/admin/form/[id]/extra/client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, useTransition, useEffect, useRef } from "react";
+import { useCallback, useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -45,12 +45,21 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
   const [roles, setRoles] = useState<DiscordRole[]>([]);
   const [loadingRoles, setLoadingRoles] = useState(true);
 
-  const [, startSaveTransition] = useTransition();
   const [saveStatus, setSaveStatus] = useState<AutoSaveStatus>("idle");
   const [lastEdited, setLastEdited] = useState<"access" | "webhook" | null>(null);
 
-  const isFirstRender = useRef(true);
   const saveTimeout = useRef<NodeJS.Timeout | null>(null);
+  const dirtyRef = useRef(false);
+  const savingRef = useRef(false);
+  const revisionRef = useRef(0);
+  const activeSaveRef = useRef(0);
+  const valuesRef = useRef({
+    webhookUrl,
+    webhookTemplate,
+    webhookUpdateTemplate,
+    allowedRoles,
+    deniedRoles,
+  });
 
   useEffect(() => {
     getGuildRoles()
@@ -59,55 +68,91 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
       .finally(() => setLoadingRoles(false));
   }, []);
 
-  const handleSave = useCallback(() => {
-    setSaveStatus("saving");
-    startSaveTransition(async () => {
+  useEffect(() => {
+    valuesRef.current = {
+      webhookUrl,
+      webhookTemplate,
+      webhookUpdateTemplate,
+      allowedRoles,
+      deniedRoles,
+    };
+  }, [
+    allowedRoles,
+    deniedRoles,
+    webhookTemplate,
+    webhookUpdateTemplate,
+    webhookUrl,
+  ]);
+
+  const scheduleSave = useCallback(() => {
+    if (saveTimeout.current) clearTimeout(saveTimeout.current);
+    setSaveStatus("idle");
+
+    saveTimeout.current = setTimeout(async () => {
+      const revision = revisionRef.current;
+      const values = valuesRef.current;
+      activeSaveRef.current = revision;
+      savingRef.current = true;
+      setSaveStatus("saving");
+
       try {
         await updateForm(form.id, {
-          discordWebhookUrl: webhookUrl.trim() || null,
-          discordWebhookTemplate: webhookTemplate.trim() || null,
-          discordWebhookUpdateTemplate: webhookUpdateTemplate.trim() || null,
-          allowedRoles,
-          deniedRoles,
+          discordWebhookUrl: values.webhookUrl.trim() || null,
+          discordWebhookTemplate: values.webhookTemplate.trim() || null,
+          discordWebhookUpdateTemplate: values.webhookUpdateTemplate.trim() || null,
+          allowedRoles: values.allowedRoles,
+          deniedRoles: values.deniedRoles,
         });
+        if (revisionRef.current === revision) {
+          dirtyRef.current = false;
+        }
         setSaveStatus("saved");
         setTimeout(() => setSaveStatus("idle"), 2000);
         router.refresh();
       } catch (err: unknown) {
         setSaveStatus("idle");
         toast.error(getErrorMessage(err, "Failed to update settings."));
+      } finally {
+        if (activeSaveRef.current === revision) {
+          savingRef.current = false;
+        }
       }
-    });
-  }, [
-    allowedRoles,
-    deniedRoles,
-    form.id,
-    router,
-    startSaveTransition,
-    webhookTemplate,
-    webhookUpdateTemplate,
-    webhookUrl,
-  ]);
+    }, 1000);
+  }, [form.id, router]);
 
   useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    
-    saveTimeout.current = setTimeout(() => {
-      handleSave();
-    }, 1000);
-
     return () => {
       if (saveTimeout.current) clearTimeout(saveTimeout.current);
     };
-  }, [handleSave]);
+  }, []);
+
+  useEffect(() => {
+    if (dirtyRef.current || savingRef.current) return;
+
+    const nextValues = {
+      webhookUrl: form.discordWebhookUrl || "",
+      webhookTemplate: form.discordWebhookTemplate || "",
+      webhookUpdateTemplate: form.discordWebhookUpdateTemplate || "",
+      allowedRoles: form.allowedRoles || [],
+      deniedRoles: form.deniedRoles || [],
+    };
+    setWebhookUrl(nextValues.webhookUrl);
+    setWebhookTemplate(nextValues.webhookTemplate);
+    setWebhookUpdateTemplate(nextValues.webhookUpdateTemplate);
+    setAllowedRoles(nextValues.allowedRoles);
+    setDeniedRoles(nextValues.deniedRoles);
+    valuesRef.current = nextValues;
+  }, [form]);
+
+  const markEdited = (section: "access" | "webhook") => {
+    dirtyRef.current = true;
+    revisionRef.current += 1;
+    setLastEdited(section);
+    scheduleSave();
+  };
 
   const toggleRole = (list: string[], setList: (v: string[]) => void, roleId: string) => {
-    setLastEdited("access");
+    markEdited("access");
     if (list.includes(roleId)) {
       setList(list.filter(id => id !== roleId));
     } else {
@@ -232,7 +277,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Input
               id="webhook-url"
               value={webhookUrl}
-              onChange={(e) => { setLastEdited("webhook"); setWebhookUrl(e.target.value); }}
+              onChange={(e) => { markEdited("webhook"); setWebhookUrl(e.target.value); }}
               placeholder="https://discord.com/api/webhooks/..."
             />
           </div>
@@ -241,7 +286,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Textarea
               id="webhook-template"
               value={webhookTemplate}
-              onChange={(e) => { setLastEdited("webhook"); setWebhookTemplate(e.target.value); }}
+              onChange={(e) => { markEdited("webhook"); setWebhookTemplate(e.target.value); }}
               placeholder="New submission received from {Name} for skill: {skill}!"
               className="min-h-24"
             />
@@ -254,7 +299,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             <Textarea
               id="webhook-update-template"
               value={webhookUpdateTemplate}
-              onChange={(e) => { setLastEdited("webhook"); setWebhookUpdateTemplate(e.target.value); }}
+              onChange={(e) => { markEdited("webhook"); setWebhookUpdateTemplate(e.target.value); }}
               placeholder="Submission updated by {Name} for skill: {skill}!"
               className="min-h-24"
             />
diff --git a/app/admin/form/[id]/extra/page.tsx b/app/admin/form/[id]/extra/page.tsx
index 004f2ea..fb57f38 100644
--- a/app/admin/form/[id]/extra/page.tsx
+++ b/app/admin/form/[id]/extra/page.tsx
@@ -1,6 +1,7 @@
 import { db } from "@/db";
 import { notFound } from "next/navigation";
 import FormExtraClient from "./client";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -19,17 +20,20 @@ export default async function AdminExtraPage(
   }
 
   return (
-    <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Extra Settings</h1>
-          <p className="text-muted-foreground mt-1">
-            Configure Discord webhook integrations.
-          </p>
+    <>
+      <RealtimeRefresh topic="forms" formId={form.id} />
+      <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Extra Settings</h1>
+            <p className="text-muted-foreground mt-1">
+              Configure Discord webhook integrations.
+            </p>
+          </div>
         </div>
-      </div>
 
-      <FormExtraClient form={form} />
-    </div>
+        <FormExtraClient form={form} />
+      </div>
+    </>
   );
 }
diff --git a/app/admin/form/[id]/page.tsx b/app/admin/form/[id]/page.tsx
index 6fc54b7..2de6cab 100644
--- a/app/admin/form/[id]/page.tsx
+++ b/app/admin/form/[id]/page.tsx
@@ -1,6 +1,7 @@
 import { db } from "@/db";
 import FormEditorClient from "./client";
 import { notFound } from "next/navigation";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -24,17 +25,20 @@ export default async function AdminDashboardPage(
   });
 
   return (
-    <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Edit Form</h1>
-          <p className="text-muted-foreground mt-1">
-            Customize form settings, add/edit questions, or upload images.
-          </p>
+    <>
+      <RealtimeRefresh topic="forms" formId={form.id} />
+      <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-12">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Edit Form</h1>
+            <p className="text-muted-foreground mt-1">
+              Customize form settings, add/edit questions, or upload images.
+            </p>
+          </div>
         </div>
-      </div>
 
-      <FormEditorClient form={form} initialQuestions={questionsList} />
-    </div>
+        <FormEditorClient form={form} initialQuestions={questionsList} />
+      </div>
+    </>
   );
 }
diff --git a/app/admin/form/[id]/result/[submissionId]/page.tsx b/app/admin/form/[id]/result/[submissionId]/page.tsx
index baaea3f..cab7688 100644
--- a/app/admin/form/[id]/result/[submissionId]/page.tsx
+++ b/app/admin/form/[id]/result/[submissionId]/page.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import SubmissionDetailClient from "./client";
 import { DeleteSubmissionButton } from "@/components/delete-buttons";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 interface SubmissionDetailPageProps {
   params: Promise<{
@@ -48,6 +49,7 @@ export default async function SubmissionDetailPage({ params }: SubmissionDetailP
 
   return (
     <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">
+      <RealtimeRefresh topic="submissions" formId={formId} />
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Link href={`/admin/form/${formId}/result`}>
diff --git a/app/admin/form/[id]/result/page.tsx b/app/admin/form/[id]/result/page.tsx
index 9ad722f..a4f152b 100644
--- a/app/admin/form/[id]/result/page.tsx
+++ b/app/admin/form/[id]/result/page.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Users, ArrowLeft } from "lucide-react";
 import { DeleteSubmissionButton, DeleteAllSubmissionsButton } from "@/components/delete-buttons";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -21,6 +22,7 @@ export default async function ResultsListPage(
 
   return (
     <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6">
+      <RealtimeRefresh topic="submissions" formId={params.id} />
       <div>
         <Button variant="ghost" asChild className="mb-4">
           <Link href={`/admin/form/${params.id}`}>
diff --git a/app/admin/form/actions.ts b/app/admin/form/actions.ts
index cd94f0b..b53b7f0 100644
--- a/app/admin/form/actions.ts
+++ b/app/admin/form/actions.ts
@@ -7,6 +7,7 @@ import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { requireAdmin } from "@/lib/auth";
 import { sanitizeHtml } from "@/lib/sanitize-html";
+import { sse } from "@/lib/sse";
 
 export async function createForm(formData: FormData) {
   await requireAdmin();
@@ -19,6 +20,11 @@ export async function createForm(formData: FormData) {
     .values({ title, description: description ? sanitizeHtml(description) : null })
     .returning();
 
+  void sse.forms.pub("update", {
+    formId: form.id,
+    entity: "form",
+    action: "created",
+  });
   revalidatePath("/admin/form");
   redirect(`/admin/form/${form.id}`);
 }
@@ -31,6 +37,11 @@ export async function createDefaultForm() {
     .values({ title: "New Form", description: "" })
     .returning();
 
+  void sse.forms.pub("update", {
+    formId: form.id,
+    entity: "form",
+    action: "created",
+  });
   revalidatePath("/admin/form");
   redirect(`/admin/form/${form.id}`);
 }
@@ -48,6 +59,11 @@ export async function updateForm(id: string, data: { title?: string; description
   };
 
   await db.update(forms).set(nextData).where(eq(forms.id, id));
+  void sse.forms.pub("update", {
+    formId: id,
+    entity: "form",
+    action: "updated",
+  });
   revalidatePath("/form");
   revalidatePath("/admin/form");
 }
@@ -56,5 +72,10 @@ export async function deleteForm(id: string) {
   await requireAdmin();
 
   await db.delete(forms).where(eq(forms.id, id));
+  void sse.forms.pub("update", {
+    formId: id,
+    entity: "form",
+    action: "deleted",
+  });
   revalidatePath("/admin/form");
 }
diff --git a/app/admin/form/page.tsx b/app/admin/form/page.tsx
index 764422b..7a2429a 100644
--- a/app/admin/form/page.tsx
+++ b/app/admin/form/page.tsx
@@ -14,6 +14,7 @@ import { Plus } from "lucide-react";
 import { DeleteFormButton } from "@/components/delete-buttons";
 import { AdminShellServer } from "@/components/admin-shell-server";
 import { createDefaultForm } from "./actions";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -24,6 +25,7 @@ export default async function AdminFormsPage() {
 
   return (
     <AdminShellServer>
+      <RealtimeRefresh topic="forms" />
       <div className="space-y-6 p-4 md:p-6 pb-12 w-full">
         <div className="flex items-center justify-between">
           <div>
diff --git a/app/form/[id]/page.tsx b/app/form/[id]/page.tsx
index b322027..e93b8bb 100644
--- a/app/form/[id]/page.tsx
+++ b/app/form/[id]/page.tsx
@@ -5,6 +5,7 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { notFound } from "next/navigation";
 import LoginDialog from "@/components/login-dialog";
 import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -53,6 +54,7 @@ export default async function FormsSubmitPage(
 
   return (
     <>
+      <RealtimeRefresh topic="forms" formId={form.id} />
       <div className="max-w-2xl mx-auto p-4 md:p-6 space-y-6">
         <FormFillerClient 
           form={form} 
diff --git a/app/form/page.tsx b/app/form/page.tsx
index b47d2c8..03d1069 100644
--- a/app/form/page.tsx
+++ b/app/form/page.tsx
@@ -9,6 +9,7 @@ import { HtmlDisplay } from "@/components/html-display";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { canAccessForm, getSessionDiscordId } from "@/lib/auth";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
 
 export const dynamic = "force-dynamic";
 
@@ -28,28 +29,31 @@ export default async function FormsListingPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
-      <h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
-      {visibleForms.length === 0 ? (
-        <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
-      ) : (
-        <div className="flex flex-col gap-4">
-          {visibleForms.map((form) => (
-            <Link key={form.id} href={`/form/${form.id}`}>
-              <Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
-                <CardHeader>
-                  <CardTitle>{form.title}</CardTitle>
-                  {form.description && (
-                    <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
-                      <HtmlDisplay html={form.description} />
-                    </div>
-                  )}
-                </CardHeader>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      )}
-    </div>
+    <>
+      <RealtimeRefresh topic="forms" />
+      <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
+        <h1 className="text-3xl font-bold tracking-tight">Form ทั้งหมด</h1>
+        {visibleForms.length === 0 ? (
+          <p className="text-muted-foreground">ตอนนี้ยังไม่เปิดรับสัก Form</p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {visibleForms.map((form) => (
+              <Link key={form.id} href={`/form/${form.id}`}>
+                <Card className="hover:bg-muted/50 transition-colors h-full flex flex-col">
+                  <CardHeader>
+                    <CardTitle>{form.title}</CardTitle>
+                    {form.description && (
+                      <div className="line-clamp-3 text-sm text-muted-foreground mt-1.5">
+                        <HtmlDisplay html={form.description} />
+                      </div>
+                    )}
+                  </CardHeader>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/app/sse/[topic]/route.ts b/app/sse/[topic]/route.ts
new file mode 100644
index 0000000..b4e61ef
--- /dev/null
+++ b/app/sse/[topic]/route.ts
@@ -0,0 +1,34 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import {
+  getAdminDiscordIds,
+  getSessionDiscordId,
+} from "@/lib/auth";
+import { isSseTopic, sse } from "@/lib/sse";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ topic: string }> },
+) {
+  const { topic } = await params;
+
+  if (!isSseTopic(topic)) {
+    return new Response("Invalid SSE topic", { status: 404 });
+  }
+
+  const endpoint = sse[topic];
+  if (endpoint.adminOnly) {
+    const session = await getServerSession(authOptions);
+    const discordId = getSessionDiscordId(session);
+    if (!discordId || !getAdminDiscordIds().includes(discordId)) {
+      return new Response("Unauthorized", { status: 401 });
+    }
+  }
+
+  try {
+    return await endpoint.stream({ signal: request.signal });
+  } catch (error) {
+    console.error(`Failed to open SSE topic ${topic}`, error);
+    return new Response("SSE unavailable", { status: 503 });
+  }
+}
diff --git a/bun.lock b/bun.lock
index 57ac6cc..e25a8ae 100644
--- a/bun.lock
+++ b/bun.lock
@@ -28,6 +28,7 @@
         "react": "19.2.7",
         "react-dom": "19.2.7",
         "react-hook-form": "^7.81.0",
+        "reconnecting-eventsource": "^1.6.5",
         "shadcn": "^4.13.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.6.0",
@@ -37,6 +38,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.3.2",
+        "@types/bun": "^1.3.14",
         "@types/node": "^20.19.43",
         "@types/react": "19.2.17",
         "@types/react-dom": "19.2.3",
@@ -545,6 +547,8 @@
 
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.3", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg=="],
 
+    "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
+
     "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -691,6 +695,8 @@
 
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
+
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
     "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
@@ -1367,6 +1373,8 @@
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "reconnecting-eventsource": ["reconnecting-eventsource@1.6.5", "", {}, "sha512-L7ADnbp7yA42vvjwx7cZFNmiyHNBu/UldL1NCEvB23xBkZhESF83s2cnD9sLfvcX9wMIzW1UpIS7EOq/iu3E2g=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
diff --git a/components/realtime-refresh.tsx b/components/realtime-refresh.tsx
new file mode 100644
index 0000000..b6e3cce
--- /dev/null
+++ b/components/realtime-refresh.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { sse, type SseTopic } from "@/lib/sse";
+
+type RealtimeRefreshProps = {
+  topic: SseTopic;
+  formId?: string;
+  debounceMs?: number;
+};
+
+export function RealtimeRefresh({
+  topic,
+  formId,
+  debounceMs = 150,
+}: RealtimeRefreshProps) {
+  const router = useRouter();
+  const connectedOnce = useRef(false);
+
+  useEffect(() => {
+    connectedOnce.current = false;
+    let refreshTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const refresh = () => {
+      if (refreshTimer) clearTimeout(refreshTimer);
+      refreshTimer = setTimeout(() => router.refresh(), debounceMs);
+    };
+
+    const onopen = () => {
+      if (connectedOnce.current) {
+        refresh();
+      } else {
+        connectedOnce.current = true;
+      }
+    };
+
+    const handleUpdate = (event: { formId: string }) => {
+      if (!formId || event.formId === formId) {
+        refresh();
+      }
+    };
+
+    const subscription = topic === "forms"
+      ? sse.forms.sub("update", handleUpdate, { onopen })
+      : sse.submissions.sub("update", handleUpdate, { onopen });
+
+    return () => {
+      if (refreshTimer) clearTimeout(refreshTimer);
+      subscription.clean();
+    };
+  }, [debounceMs, formId, router, topic]);
+
+  return null;
+}
diff --git a/lib/followers/index.ts b/lib/followers/index.ts
index 8bf7d22..53229a2 100644
--- a/lib/followers/index.ts
+++ b/lib/followers/index.ts
@@ -58,8 +58,13 @@ export async function getFollowerCounts(): Promise<FetchResult> {
     const { getRedisClient } = await import("@/lib/redis");
     const redis = await getRedisClient();
     await Promise.all([
-      redis.set(CACHE_KEY, JSON.stringify(result.counts), { ex: CACHE_TTL }),
-      redis.set(CACHE_KEY_TIKTOK, JSON.stringify(result.tiktokProfile), { ex: CACHE_TTL }),
+      redis.set(CACHE_KEY, JSON.stringify(result.counts), "EX", CACHE_TTL),
+      redis.set(
+        CACHE_KEY_TIKTOK,
+        JSON.stringify(result.tiktokProfile),
+        "EX",
+        CACHE_TTL,
+      ),
     ]);
   } catch {
     // Redis unavailable, skip caching
diff --git a/lib/redis.ts b/lib/redis.ts
index b6fa7b9..eefd075 100644
--- a/lib/redis.ts
+++ b/lib/redis.ts
@@ -1,15 +1,63 @@
-// @ts-expect-error Bun exposes RedisClient at runtime.
-import { RedisClient } from "bun";
+import type { RedisClient } from "bun";
 
-const globalForRedis = global as unknown as { redis: RedisClient };
+type RedisConnections = {
+  client: RedisClient;
+  publisher?: Promise<RedisClient>;
+  subscriber?: Promise<RedisClient>;
+};
 
-export const getRedisClient = async () => {
-  if (!globalForRedis.redis) {
-    globalForRedis.redis = new RedisClient(process.env.REDIS_URL || "");
+const globalForRedis = globalThis as typeof globalThis & {
+  erikaRedis?: RedisConnections;
+};
+
+function getRedisConnections() {
+  if (typeof Bun === "undefined") {
+    throw new Error("Redis is only available on the Bun server runtime.");
   }
-  const client = globalForRedis.redis;
+
+  if (!globalForRedis.erikaRedis) {
+    globalForRedis.erikaRedis = { client: Bun.redis };
+  }
+
+  return globalForRedis.erikaRedis;
+}
+
+async function connect(client: RedisClient) {
   if (!client.connected) {
     await client.connect();
   }
   return client;
-};
+}
+
+function duplicateConnection(kind: "publisher" | "subscriber") {
+  const connections = getRedisConnections();
+  const existing = connections[kind];
+  if (existing) {
+    return existing;
+  }
+
+  const pending = connect(connections.client)
+    .then((client) => client.duplicate())
+    .then(connect);
+
+  connections[kind] = pending;
+  void pending.catch(() => {
+    if (connections[kind] === pending) {
+      connections[kind] = undefined;
+    }
+  });
+
+  return pending;
+}
+
+export async function getRedisClient() {
+  return connect(getRedisConnections().client);
+}
+
+export function getRedisPublisher() {
+  return duplicateConnection("publisher");
+}
+
+export function getRedisSubscriber() {
+  return duplicateConnection("subscriber");
+}
diff --git a/lib/sse.ts b/lib/sse.ts
new file mode 100644
index 0000000..9018eb5
--- /dev/null
+++ b/lib/sse.ts
@@ -0,0 +1,313 @@
+import ReconnectingEventSource from "reconnecting-eventsource";
+import { z } from "zod";
+import { getRedisPublisher, getRedisSubscriber } from "@/lib/redis";
+
+const CHANNEL_PREFIX = "erika:sse:";
+const DEFAULT_RETRY_MS = 3_000;
+const DEFAULT_PUBLISH_TIMEOUT_MS = 2_000;
+const DEFAULT_HEARTBEAT_MS = 90_000;
+const DEFAULT_CONNECTION_MAX_MS = 30 * 60_000;
+
+type EventMap = Record<string, z.ZodType>;
+type EventHandlers<T extends EventMap> = Partial<{
+  [K in keyof T]: (data: z.infer<T[K]>) => void;
+}>;
+
+type SubscriptionOptions = {
+  endpoint?: string | URL;
+  onerror?: (event: Event) => void;
+  onopen?: (event: Event) => void;
+};
+
+type StreamOptions = {
+  signal?: AbortSignal;
+};
+
+const redisEnvelopeSchema = z.object({
+  event: z.string(),
+  data: z.unknown(),
+});
+
+function durationFromEnvironment(name: string, fallback: number) {
+  const value = Number(process.env[name]);
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+
+function channelName(topic: string) {
+  return `${CHANNEL_PREFIX}${topic}`;
+}
+
+function encodeEvent(event: string, data: unknown) {
+  return `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+}
+
+async function publish(topic: string, event: string, data: unknown) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const operation = getRedisPublisher().then((publisher) =>
+    publisher.publish(
+      channelName(topic),
+      JSON.stringify({ event, data }),
+    ),
+  );
+  const deadline = new Promise<never>((_, reject) => {
+    timeout = setTimeout(
+      () => reject(new Error("Redis SSE publish timed out")),
+      DEFAULT_PUBLISH_TIMEOUT_MS,
+    );
+  });
+
+  try {
+    await Promise.race([operation, deadline]);
+  } finally {
+    if (timeout) clearTimeout(timeout);
+  }
+}
+
+export class SseEndpoint<T extends EventMap> {
+  constructor(
+    readonly topic: string,
+    private readonly events: T,
+    readonly adminOnly = false,
+  ) {}
+
+  pub<K extends Extract<keyof T, string>>(event: K, data: z.input<T[K]>) {
+    const payload = this.events[event].parse(data);
+
+    return publish(this.topic, event, payload).catch((error: unknown) => {
+      console.error(`Failed to publish SSE event ${this.topic}.${event}`, error);
+    });
+  }
+
+  subMany(
+    handlers: EventHandlers<T>,
+    {
+      endpoint = `/sse/${encodeURIComponent(this.topic)}`,
+      onerror,
+      onopen,
+    }: SubscriptionOptions = {},
+  ) {
+    const eventSource = new ReconnectingEventSource(endpoint);
+    const listeners: Array<[string, (event: MessageEvent<string>) => void]> = [];
+
+    for (const event of Object.keys(handlers) as Array<Extract<keyof T, string>>) {
+      const callback = handlers[event];
+      if (!callback) continue;
+
+      const listener = (message: MessageEvent<string>) => {
+        try {
+          const payload = this.events[event].safeParse(JSON.parse(message.data));
+          if (payload.success) {
+            callback(payload.data);
+          } else {
+            console.error(
+              `Ignored invalid SSE event ${this.topic}.${event}`,
+              payload.error,
+            );
+          }
+        } catch (error) {
+          console.error(`Ignored malformed SSE event ${this.topic}.${event}`, error);
+        }
+      };
+
+      listeners.push([event, listener]);
+      eventSource.addEventListener(event, listener);
+    }
+
+    if (onerror) eventSource.onerror = onerror;
+    if (onopen) eventSource.onopen = onopen;
+
+    const clean = () => {
+      for (const [event, listener] of listeners) {
+        eventSource.removeEventListener(event, listener);
+      }
+      eventSource.close();
+    };
+
+    return { clean, eventSource };
+  }
+
+  sub<K extends Extract<keyof T, string>>(
+    event: K,
+    handler: (data: z.infer<T[K]>) => void,
+    options?: SubscriptionOptions,
+  ) {
+    return this.subMany(
+      { [event]: handler } as unknown as EventHandlers<T>,
+      options,
+    );
+  }
+
+  async stream({ signal }: StreamOptions = {}) {
+    const subscriber = await getRedisSubscriber();
+    const topic = this.topic;
+    const channel = channelName(this.topic);
+    const pendingMessages: string[] = [];
+    let receive: ((message: string) => void) | undefined;
+
+    const listener = (message: string) => {
+      if (receive) {
+        receive(message);
+      } else {
+        pendingMessages.push(message);
+      }
+    };
+
+    await subscriber.subscribe(channel, listener);
+
+    let heartbeat: ReturnType<typeof setInterval> | undefined;
+    let renewal: ReturnType<typeof setTimeout> | undefined;
+    let controller: ReadableStreamDefaultController<Uint8Array> | undefined;
+    let closed = false;
+    const encoder = new TextEncoder();
+
+    const unsubscribe = () => {
+      void subscriber.unsubscribe(channel, listener).catch((error: unknown) => {
+        console.error(`Failed to unsubscribe SSE topic ${this.topic}`, error);
+      });
+    };
+
+    const clean = () => {
+      if (closed) return;
+      closed = true;
+      if (heartbeat) clearInterval(heartbeat);
+      if (renewal) clearTimeout(renewal);
+      signal?.removeEventListener("abort", close);
+      unsubscribe();
+    };
+
+    const close = () => {
+      clean();
+      try {
+        controller?.close();
+      } catch {
+        // The request or reader may have already closed the stream.
+      }
+    };
+
+    const write = (value: string) => {
+      if (closed) return;
+      try {
+        controller?.enqueue(encoder.encode(value));
+      } catch {
+        close();
+      }
+    };
+
+    const handleMessage = (message: string) => {
+      try {
+        const envelope = redisEnvelopeSchema.safeParse(JSON.parse(message));
+        if (!envelope.success || !Object.hasOwn(this.events, envelope.data.event)) {
+          console.error(`Ignored invalid Redis SSE message for ${this.topic}`);
+          return;
+        }
+
+        const event = envelope.data.event as Extract<keyof T, string>;
+        const payload = this.events[event].safeParse(envelope.data.data);
+        if (!payload.success) {
+          console.error(
+            `Ignored invalid Redis SSE event ${this.topic}.${event}`,
+            payload.error,
+          );
+          return;
+        }
+
+        write(encodeEvent(event, payload.data));
+      } catch (error) {
+        console.error(`Ignored malformed Redis SSE message for ${this.topic}`, error);
+      }
+    };
+
+    const stream = new ReadableStream<Uint8Array>({
+      start(streamController) {
+        controller = streamController;
+        write(`retry: ${DEFAULT_RETRY_MS}\n\n: connected ${topic}\n\n`);
+
+        receive = handleMessage;
+        for (const message of pendingMessages.splice(0)) {
+          handleMessage(message);
+        }
+
+        heartbeat = setInterval(
+          () => write(": heartbeat\n\n"),
+          durationFromEnvironment("SSE_HEARTBEAT_MS", DEFAULT_HEARTBEAT_MS),
+        );
+        renewal = setTimeout(
+          close,
+          durationFromEnvironment(
+            "SSE_CONNECTION_MAX_MS",
+            DEFAULT_CONNECTION_MAX_MS,
+          ),
+        );
+        signal?.addEventListener("abort", close, { once: true });
+        if (signal?.aborted) close();
+      },
+      cancel() {
+        clean();
+      },
+    });
+
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/event-stream; charset=utf-8",
+        "Cache-Control": "no-cache, no-transform",
+        "Connection": "keep-alive",
+        "Content-Encoding": "identity",
+        "X-Accel-Buffering": "no",
+      },
+    });
+  }
+}
+
+type EndpointDefinition<T extends EventMap> = {
+  events: T;
+  adminOnly?: boolean;
+};
+
+export function createSseEndpoints<
+  T extends Record<string, EndpointDefinition<EventMap>>,
+>(definitions: T) {
+  const endpoints = {} as {
+    [K in keyof T]: SseEndpoint<T[K]["events"]>;
+  };
+
+  for (const topic of Object.keys(definitions) as Array<keyof T>) {
+    const definition = definitions[topic];
+    endpoints[topic] = new SseEndpoint(
+      String(topic),
+      definition.events,
+      definition.adminOnly,
+    );
+  }
+
+  return endpoints;
+}
+
+const updateActionSchema = z.enum(["created", "updated", "deleted"]);
+
+export const sse = createSseEndpoints({
+  forms: {
+    events: {
+      update: z.object({
+        formId: z.string().min(1),
+        entity: z.enum(["form", "question"]),
+        action: updateActionSchema,
+      }).strict(),
+    },
+  },
+  submissions: {
+    adminOnly: true,
+    events: {
+      update: z.object({
+        formId: z.string().min(1),
+        submissionId: z.string().min(1).optional(),
+        action: updateActionSchema,
+      }).strict(),
+    },
+  },
+});
+
+export type SseTopic = keyof typeof sse;
+
+export function isSseTopic(topic: string): topic is SseTopic {
+  return Object.hasOwn(sse, topic);
+}
diff --git a/package.json b/package.json
index 96dc51e..91faade 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "react-hook-form": "^7.81.0",
+    "reconnecting-eventsource": "^1.6.5",
     "shadcn": "^4.13.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
@@ -49,6 +50,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.2",
+    "@types/bun": "^1.3.14",
     "@types/node": "^20.19.43",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
diff --git a/skill/erika-sse/SKILL.md b/skill/erika-sse/SKILL.md
new file mode 100644
index 0000000..05b83a8
--- /dev/null
+++ b/skill/erika-sse/SKILL.md
@@ -0,0 +1,153 @@
+---
+name: erika-sse
+description: Build, extend, debug, or review Erika's Server-Sent Events system, Redis pub/sub transport, typed Zod event topics, reconnecting live-update clients, and router.refresh-based real-time UI. Use for SSE, Redis-backed live updates, protected streams, new real-time features, or future Erika topics such as Discord level/XP.
+---
+
+# Erika SSE
+
+Use Erika's shared Redis-backed SSE transport for cross-process delivery. Preserve the established reliability, authorization, validation, and RSC refresh behavior.
+
+## Start with the project
+
+1. Read `AGENTS.md`.
+2. Read the relevant Next.js guide in `node_modules/next/dist/docs/` before changing routes, client components, or refresh behavior.
+3. Inspect `lib/sse.ts`, `lib/redis.ts`, `app/sse/[topic]/route.ts`, and `components/realtime-refresh.tsx`.
+4. Trace every mutation and every route that should consume the event before editing.
+
+Keep follower counts outside this SSE system unless the task explicitly changes that boundary.
+
+## Declare a topic
+
+Add the topic and its named Zod event schemas to the `createSseEndpoints` map in `lib/sse.ts`. Use strict object schemas, stable identifiers, and the smallest payload that lets consumers filter an event.
+
+Mark a topic `adminOnly: true` when its payload or existence must not be public. The shared `/sse/[topic]` route validates topic names and enforces this flag; do not add a second transport route.
+
+```ts
+export const sse = createSseEndpoints({
+  discordLevels: {
+    adminOnly: true,
+    events: {
+      update: z.object({
+        discordId: z.string().min(1),
+        level: z.number().int().nonnegative(),
+        xp: z.number().int().nonnegative(),
+      }).strict(),
+    },
+  },
+});
+```
+
+Choose public access only when every authenticated and unauthenticated visitor may receive the payload. Never rely on the client to hide an admin event.
+
+## Publish after mutations
+
+Publish only after the database operation or transaction succeeds. Keep publishing best-effort with `void`; Redis failure must not turn a committed mutation into an action error.
+
+```ts
+await db.update(forms).set(nextData).where(eq(forms.id, formId));
+void sse.forms.pub("update", {
+  formId,
+  entity: "form",
+  action: "updated",
+});
+```
+
+Publish once after a bulk operation:
+
+```ts
+await Promise.all(updates.map(updateQuestion));
+void sse.forms.pub("update", {
+  formId,
+  entity: "question",
+  action: "updated",
+});
+```
+
+Do not publish before an awaited mutation, inside an item loop, or from a `finally` block. Include an optional item identifier only when consumers benefit from it; retain a parent identifier such as `formId` for route filtering.
+
+## Subscribe and refresh
+
+Use `sse.<topic>.sub(...)` or `subMany(...)` in a Client Component. Always return `clean()` from the effect so reconnection timers and the underlying `EventSource` stop on unmount.
+
+```tsx
+useEffect(() => {
+  const { clean } = sse.discordLevels.sub("update", handleUpdate);
+  return clean;
+}, [handleUpdate]);
+```
+
+For server-rendered page updates, prefer `RealtimeRefresh`. Pass `formId` on detail routes to ignore unrelated events. Subscribe only on routes that display that topic.
+
+```tsx
+<RealtimeRefresh topic="submissions" formId={formId} />
+```
+
+Keep its debounced `router.refresh()` behavior. It merges the new RSC payload without a full reload, scroll reset, or loss of unaffected client state. Refresh on a reconnect after the first successful connection to recover events missed while disconnected.
+
+When refreshed props feed an autosaving editor:
+
+- Copy server props into local state only while that state is not dirty or saving.
+- Track local revisions so an older save cannot clear a newer edit.
+- Update state refs together with synchronized props.
+- Trigger autosave only from user edit handlers, not from prop-synchronization effects.
+- Keep a local deletion out of the next queued bulk save.
+
+## Preserve transport behavior
+
+Keep separate Redis publisher and subscriber connections created with `RedisClient.duplicate()`. A subscribed Redis connection must not run ordinary commands.
+
+Validate data when publishing, when reading Redis messages, and again in the browser. Ignore malformed or unknown Redis messages rather than forwarding them.
+
+Retain these defaults:
+
+- Redis channels: `erika:sse:<topic>`
+- Client retry guidance: 3 seconds
+- Heartbeat comment: every 90 seconds
+- Forced connection renewal: 30 minutes
+- Publish deadline: 2 seconds, with logged and contained failure
+- Response headers: `text/event-stream`, `no-cache, no-transform`, `keep-alive`, `identity`, and `X-Accel-Buffering: no`
+
+Keep Nginx on HTTP/1.1 with an empty `Connection` proxy header, `proxy_buffering off`, and `proxy_read_timeout` longer than the 90-second heartbeat. Erika's existing `nginx.conf` already has these settings.
+
+## Avoid these patterns
+
+```ts
+// Incorrect: process-local and invisible to other instances.
+globalThis.listeners = new Set();
+
+// Incorrect: bypasses schemas.
+redis.publish("forms", JSON.stringify(uncheckedPayload));
+
+// Incorrect: one event per item creates refresh storms.
+for (const item of items) {
+  await mutate(item);
+  void sse.forms.pub("update", payload);
+}
+
+// Incorrect: loses scroll and client state.
+window.location.reload();
+```
+
+Do not introduce in-memory event hubs, full-page reloads, unvalidated payloads, broad admin-layout subscriptions, or per-item events for one bulk mutation.
+
+## Validate every change
+
+Run:
+
+```bash
+bunx tsc --noEmit
+bun run lint
+git diff --check
+python3 "${CODEX_HOME:-$HOME/.codex}/skills/.system/skill-creator/scripts/quick_validate.py" skill/erika-sse
+```
+
+Perform runtime checks on an isolated instance:
+
+1. Confirm an unknown `/sse/<topic>` returns 404.
+2. Confirm an unauthenticated admin-only stream returns 401.
+3. Use `curl -N` to inspect the status, headers, retry/connected frame, named event, and JSON payload.
+4. Temporarily shorten `SSE_HEARTBEAT_MS` and `SSE_CONNECTION_MAX_MS` to observe heartbeat comments and forced renewal; leave production defaults unchanged.
+5. Confirm Redis delivery and verify Redis `PUBSUB NUMSUB` returns to zero after abort/renewal.
+6. Verify a refused Redis connection logs a publish failure while the completed database mutation still succeeds.
+7. Use two browser sessions to verify remote form/submission changes, one debounced refresh for event bursts, preserved scroll/unaffected state, and correct active-form filtering.
+8. Re-run TypeScript, ESLint, and `git diff --check` after runtime testing and remove temporary artifacts.
diff --git a/skill/erika-sse/agents/openai.yaml b/skill/erika-sse/agents/openai.yaml
new file mode 100644
index 0000000..6c38c8d
--- /dev/null
+++ b/skill/erika-sse/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "Erika SSE"
+  short_description: "Build and extend Erika Redis-backed live updates"
+  default_prompt: "Use $erika-sse to add a typed, Redis-backed real-time topic to Erika."