@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/analytics/server/lib/workspace-feature-flags.ts

@@ -1,9 +1,11 @@
 import { randomUUID } from "node:crypto";
 
 import { signA2AToken } from "@agent-native/core/a2a";
+import { isFeatureFlagEnabled } from "@agent-native/core/feature-flags";
 import { fetchOrgApps, type OrgApp } from "@agent-native/core/mcp";
 import { getOrgDomain } from "@agent-native/core/org";
 
+import { VERIFIED_FLEET_FLAG_MUTATIONS } from "../../shared/feature-flags.js";
 import type { AnalyticsAdminContext } from "./db-admin-connections.js";
 
 const TARGET_TIMEOUT_MS = 3_000;
@@ -31,7 +33,16 @@ export interface WorkspaceFeatureFlagsResult {
   apps: FleetFlagApp[];
 }
 
-export interface WorkspaceFeatureFlagMutationResult {
+export interface VerifiedWorkspaceFeatureFlagMutationResult {
+  contractVersion: 3;
+  status: "verified";
+  key: string;
+  rules: Record<string, unknown>;
+  scope: { orgId: string | null; orgDomain: string | null };
+  enabledForCurrentUser: boolean;
+}
+
+interface TargetFeatureFlagMutationResult {
   contractVersion: 2;
   status: "ready";
   key: string;
@@ -39,6 +50,10 @@ export interface WorkspaceFeatureFlagMutationResult {
   scope: { orgId: string | null; orgDomain: string | null };
 }
 
+export type WorkspaceFeatureFlagMutationResult =
+  | TargetFeatureFlagMutationResult
+  | VerifiedWorkspaceFeatureFlagMutationResult;
+
 export interface WorkspaceFeatureFlagMutationInput {
   appId: string;
   key: string;
@@ -72,8 +87,8 @@ export function validateWorkspaceFeatureFlagMutation(
     rules?: Record<string, unknown>;
     enabledForEmail?: string;
   },
-): WorkspaceFeatureFlagMutationResult {
-  const payload = body as Partial<WorkspaceFeatureFlagMutationResult> | null;
+): TargetFeatureFlagMutationResult {
+  const payload = body as Partial<TargetFeatureFlagMutationResult> | null;
   const valid =
     payload?.contractVersion === 2 &&
     payload.status === "ready" &&
@@ -144,7 +159,7 @@ export function validateWorkspaceFeatureFlagMutation(
         "The target app did not enable the feature flag for the delegated operator.",
       );
   }
-  return payload as WorkspaceFeatureFlagMutationResult;
+  return payload as TargetFeatureFlagMutationResult;
 }
 
 function targetOrigin(app: OrgApp): string {
@@ -173,6 +188,39 @@ async function delegatedToken(
   }
 }
 
+export type WorkspaceFeatureFlagFailurePhase =
+  | "directory"
+  | "token-generation"
+  | "timeout"
+  | "network"
+  | "authorization"
+  | "unsupported-target"
+  | "target-action"
+  | "persistence"
+  | "verification";
+
+const FAILURE_MESSAGES: Record<WorkspaceFeatureFlagFailurePhase, string> = {
+  directory: "The organization app directory could not resolve this target.",
+  "token-generation":
+    "Analytics could not create delegated feature flag authority.",
+  timeout: "The target app timed out before the feature flag change completed.",
+  network: "Analytics could not reach the target app.",
+  authorization: "The target app denied this delegated flag operation.",
+  "unsupported-target":
+    "The target app does not support feature flag management.",
+  "target-action": "The target app could not complete the feature flag action.",
+  persistence:
+    "The target app did not persist the requested feature flag rules.",
+  verification: "Analytics could not verify the persisted feature flag change.",
+};
+
+export class WorkspaceFeatureFlagFailure extends Error {
+  constructor(readonly phase: WorkspaceFeatureFlagFailurePhase) {
+    super(`[${phase}] ${FAILURE_MESSAGES[phase]}`);
+    this.name = "WorkspaceFeatureFlagFailure";
+  }
+}
+
 type TargetFailureReason = "token-generation" | "timeout" | "network";
 
 class TargetCallFailure extends Error {
@@ -194,6 +242,30 @@ export function classifyWorkspaceFeatureFlagTargetFailure(
   return "network";
 }
 
+function targetFailure(error: unknown): WorkspaceFeatureFlagFailure {
+  const reason = classifyWorkspaceFeatureFlagTargetFailure(error);
+  return new WorkspaceFeatureFlagFailure(reason);
+}
+
+async function resolveTargetApp(
+  admin: AnalyticsAdminContext,
+  appId: string,
+): Promise<OrgApp> {
+  let apps: OrgApp[];
+  try {
+    apps = await fetchOrgApps({
+      selfId: "analytics",
+      includeDirectoryApp: true,
+      serviceOrgId: admin.orgId,
+    });
+  } catch {
+    throw new WorkspaceFeatureFlagFailure("directory");
+  }
+  const app = apps.find((candidate) => candidate.id === appId);
+  if (!app) throw new WorkspaceFeatureFlagFailure("directory");
+  return app;
+}
+
 async function callTarget(
   app: OrgApp,
   admin: AnalyticsAdminContext,
@@ -326,63 +398,139 @@ export async function setWorkspaceFeatureFlag(
   admin: AnalyticsAdminContext,
   input: WorkspaceFeatureFlagMutationInput,
 ): Promise<WorkspaceFeatureFlagMutationResult> {
-  const apps = await fetchOrgApps({
-    selfId: "analytics",
-    includeDirectoryApp: true,
-    serviceOrgId: admin.orgId,
-  });
-  const app = apps.find((candidate) => candidate.id === input.appId);
-  if (!app)
-    throw new Error(
-      "The requested app is not available in this organization directory.",
-    );
+  const app = await resolveTargetApp(admin, input.appId);
   const targetInput = workspaceFeatureFlagTargetInput(input);
   let orgDomain: string | undefined;
   try {
     orgDomain = (await getOrgDomain(admin.orgId))?.trim().toLowerCase();
   } catch {
-    throw new TargetCallFailure("token-generation");
+    throw new WorkspaceFeatureFlagFailure("token-generation");
+  }
+  if (!orgDomain) throw new WorkspaceFeatureFlagFailure("token-generation");
+  let result: Awaited<ReturnType<typeof callTarget>>;
+  try {
+    result = await callTarget(
+      app,
+      admin,
+      "set-feature-flag",
+      targetInput,
+      orgDomain,
+    );
+  } catch (error) {
+    throw targetFailure(error);
   }
-  if (!orgDomain) throw new TargetCallFailure("token-generation");
-  const result = await callTarget(
-    app,
-    admin,
-    "set-feature-flag",
-    targetInput,
-    orgDomain,
-  );
   if (result.status === 401 || result.status === 403)
-    throw new Error("The target app denied this delegated flag operation.");
+    throw new WorkspaceFeatureFlagFailure("authorization");
   if (result.status === 404 || result.status === 405)
-    throw new Error("The target app does not support feature flag management.");
+    throw new WorkspaceFeatureFlagFailure("unsupported-target");
   if (result.status < 200 || result.status >= 300)
-    throw new Error(
-      "The target app could not persist the feature flag change.",
-    );
-  return validateWorkspaceFeatureFlagMutation(result.body, {
-    key: input.key,
-    orgDomain,
-    allowExplicitNoOrgTarget: true,
-    ...(input.operation === "replace-rules" && input.rules
-      ? {
-          rules: {
-            mode: input.rules.mode,
-            emails: input.rules.emails ?? [],
-            orgIds: input.rules.orgIds ?? [],
-            percentage: input.rules.percentage ?? 0,
-          },
-        }
-      : input.operation === "off"
+    throw new WorkspaceFeatureFlagFailure("target-action");
+  let mutation: TargetFeatureFlagMutationResult;
+  try {
+    mutation = validateWorkspaceFeatureFlagMutation(result.body, {
+      key: input.key,
+      orgDomain,
+      allowExplicitNoOrgTarget: true,
+      ...(input.operation === "replace-rules" && input.rules
         ? {
             rules: {
-              mode: "off",
-              emails: [],
-              orgIds: [],
-              percentage: 0,
+              mode: input.rules.mode,
+              emails: input.rules.emails ?? [],
+              orgIds: input.rules.orgIds ?? [],
+              percentage: input.rules.percentage ?? 0,
             },
           }
-        : { enabledForEmail: admin.userEmail }),
-  });
+        : input.operation === "off"
+          ? {
+              rules: {
+                mode: "off",
+                emails: [],
+                orgIds: [],
+                percentage: 0,
+              },
+            }
+          : { enabledForEmail: admin.userEmail }),
+    });
+  } catch {
+    throw new WorkspaceFeatureFlagFailure("persistence");
+  }
+
+  if (
+    !(await isFeatureFlagEnabled(VERIFIED_FLEET_FLAG_MUTATIONS, {
+      userEmail: admin.userEmail,
+      userKey: admin.userEmail,
+      orgId: admin.orgId,
+    }))
+  ) {
+    return mutation;
+  }
+
+  let readBack: Awaited<ReturnType<typeof callTarget>>;
+  try {
+    readBack = await callTarget(
+      app,
+      admin,
+      "list-feature-flags",
+      {},
+      orgDomain,
+    );
+  } catch (error) {
+    throw targetFailure(error);
+  }
+  if (readBack.status === 401 || readBack.status === 403)
+    throw new WorkspaceFeatureFlagFailure("authorization");
+  if (readBack.status === 404 || readBack.status === 405)
+    throw new WorkspaceFeatureFlagFailure("unsupported-target");
+  if (readBack.status < 200 || readBack.status >= 300)
+    throw new WorkspaceFeatureFlagFailure("verification");
+  const verifiedApp = classifyWorkspaceFeatureFlagList(app, readBack);
+  if (verifiedApp.state === "forbidden")
+    throw new WorkspaceFeatureFlagFailure("authorization");
+  if (verifiedApp.state === "unsupported")
+    throw new WorkspaceFeatureFlagFailure("unsupported-target");
+  const verifiedFlag = verifiedApp.flags.find((flag) => flag.key === input.key);
+  const expectedEnabled =
+    input.operation === "enable-for-current-user"
+      ? true
+      : input.operation === "off"
+        ? false
+        : null;
+  if (
+    verifiedApp.state !== "ready" ||
+    !verifiedFlag ||
+    typeof verifiedFlag.enabledForCurrentUser !== "boolean" ||
+    (expectedEnabled !== null &&
+      verifiedFlag.enabledForCurrentUser !== expectedEnabled)
+  ) {
+    throw new WorkspaceFeatureFlagFailure("verification");
+  }
+  try {
+    validateWorkspaceFeatureFlagMutation(
+      {
+        contractVersion: 2,
+        status: "ready",
+        key: input.key,
+        rules: verifiedFlag.rules,
+        scope: mutation.scope,
+      },
+      {
+        key: input.key,
+        orgDomain,
+        allowExplicitNoOrgTarget: true,
+        rules: mutation.rules,
+      },
+    );
+  } catch {
+    throw new WorkspaceFeatureFlagFailure("verification");
+  }
+  return {
+    contractVersion: 3,
+    status: "verified",
+    key: mutation.key,
+    rules: verifiedFlag.rules as Record<string, unknown>,
+    scope: mutation.scope,
+    enabledForCurrentUser: verifiedFlag.enabledForCurrentUser,
+  };
 }
 
 export async function getWorkspaceFlagTarget(

package/corpus/templates/analytics/server/plugins/feature-flags.ts

@@ -0,0 +1,5 @@
+import { createFeatureFlagsPlugin } from "@agent-native/core/server";
+
+import { ANALYTICS_FEATURE_FLAGS } from "../../shared/feature-flags.js";
+
+export default createFeatureFlagsPlugin({ flags: ANALYTICS_FEATURE_FLAGS });

package/corpus/templates/analytics/shared/feature-flags.ts

@@ -0,0 +1,10 @@
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
+
+export const VERIFIED_FLEET_FLAG_MUTATIONS = defineFeatureFlag({
+  key: "analytics.verified-fleet-flag-mutations",
+  displayName: "Verified fleet flag mutations",
+  description:
+    "Verify cross-app feature flag changes with an independent target read-back.",
+});
+
+export const ANALYTICS_FEATURE_FLAGS = [VERIFIED_FLEET_FLAG_MUTATIONS];

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -11,6 +11,7 @@ import {
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { ShareButton } from "@agent-native/core/client/sharing";
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { CreativeContextShareSheet } from "@agent-native/creative-context/client";
 import {
   IconCheck,
@@ -311,7 +312,10 @@ function assetUpdatedTime(asset: any): number {
 
 export function loader({ params, request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
-  return redirect(`/library/${params.id}${url.search}`);
+  return withSsrHtmlContentType(
+    redirect(`/library/${params.id}${url.search}`),
+    { varyByQuery: true },
+  );
 }
 
 export default function BrandKitDetailRedirect() {

package/corpus/templates/assets/app/routes/brand-kits._index.tsx

@@ -1,8 +1,11 @@
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
 export function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
-  return redirect(`/library${url.search}`);
+  return withSsrHtmlContentType(redirect(`/library${url.search}`), {
+    varyByQuery: true,
+  });
 }
 
 export default function BrandKitsIndexRedirect() {

package/corpus/templates/assets/app/routes/libraries.tsx

@@ -1,9 +1,12 @@
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
 // Legacy redirect: brand containers now live in the unified Library workspace.
 export function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
-  return redirect(`/library${url.search}`);
+  return withSsrHtmlContentType(redirect(`/library${url.search}`), {
+    varyByQuery: true,
+  });
 }
 
 export default function LibrariesRedirect() {

package/corpus/templates/assets/app/routes/picker.tsx

@@ -1,9 +1,12 @@
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
 // Legacy redirect: the image browser moved from "Picker" (/picker) to
 // "Library" (/library). Preserve any query string so deep links keep working.
 export function loader({ url }: LoaderFunctionArgs) {
-  return redirect(`/library${url.search}`);
+  return withSsrHtmlContentType(redirect(`/library${url.search}`), {
+    varyByQuery: true,
+  });
 }
 
 export default function PickerRedirect() {

package/corpus/templates/assets/netlify.toml

@@ -13,6 +13,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # Emit the Netlify background function used by Assets' durable agent-chat opt-in.
 # The normal server timeout still protects non-agent image/video HTTP handlers.

package/corpus/templates/brain/netlify.toml

@@ -12,6 +12,8 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/calendar/app/components/calendar/DayView.tsx

@@ -981,7 +981,8 @@ export const DayView = memo(function DayView({
         {/* Positioned events overlay */}
         <div
           data-calendar-create-surface="true"
-          className="absolute inset-0 ml-[40px] mr-2 sm:ml-[56px] sm:mr-4"
+          className="absolute left-0 right-0 top-0 ml-[40px] mr-2 sm:ml-[56px] sm:mr-4"
+          style={{ height: `${hours.length * HOUR_HEIGHT}px` }}
           onPointerDown={(e) => {
             // Only start a create-drag from empty space, not on an event or its resize handles
             if ((e.target as HTMLElement).closest("button")) return;

package/corpus/templates/calendar/changelog/2026-08-19-calendar-page-loads-stay-fast-after-idle-periods.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-19
+---
+
+Calendar pages stay fast after periods of inactivity.

package/corpus/templates/calendar/netlify.toml

@@ -12,6 +12,8 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/chat/netlify.toml

@@ -12,3 +12,5 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"

package/corpus/templates/clips/app/components/player/player-controls.tsx

@@ -34,7 +34,7 @@ import {
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 import { cn } from "@/lib/utils";
 
-import { ReactionsTray } from "./reactions-tray";
+import { ReactionsTray, type ReactionHandler } from "./reactions-tray";
 import { Scrubber, msToClock } from "./scrubber";
 
 export const SPEED_OPTIONS = PLAYBACK_SPEED_OPTIONS;
@@ -73,7 +73,7 @@ export interface PlayerControlsProps {
    */
   showReactionsAndComment?: boolean;
   enableReactions?: boolean;
-  onReact?: (emoji: string) => void;
+  onReact?: ReactionHandler;
   enableComments?: boolean;
   onAddComment?: () => void;
 }
@@ -306,7 +306,7 @@ export function PlayerControls(props: PlayerControlsProps) {
           >
             {enableReactions && onReact ? (
               <div className="pointer-events-auto">
-                <ReactionsTray onReact={onReact} />
+                <ReactionsTray reactions={reactions} onReact={onReact} />
               </div>
             ) : null}
 

package/corpus/templates/clips/app/components/player/reaction-emojis.ts

@@ -8,3 +8,15 @@ export const REACTION_EMOJIS = [
   "🤯",
   "👀",
 ] as const;
+
+export const REACTION_NAMES: Record<(typeof REACTION_EMOJIS)[number], string> =
+  {
+    "👍": "thumbs up",
+    "❤️": "heart",
+    "🔥": "fire",
+    "👏": "clap",
+    "🎉": "celebrate",
+    "😂": "laugh",
+    "🤯": "mind blown",
+    "👀": "eyes",
+  };

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { IconCheck } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
 
 import {
   Tooltip,
@@ -7,10 +8,20 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import { REACTION_EMOJIS } from "./reaction-emojis";
+import { REACTION_EMOJIS, REACTION_NAMES } from "./reaction-emojis";
+
+export type ReactionHandlerResult = boolean | void | Promise<boolean | void>;
+export type ReactionHandler = (emoji: string) => ReactionHandlerResult;
+
+export interface ReactionSummary {
+  id: string;
+  emoji: string;
+  videoTimestampMs: number;
+}
 
 export interface ReactionsTrayProps {
-  onReact: (emoji: string) => void;
+  onReact: ReactionHandler;
+  reactions?: Pick<ReactionSummary, "emoji">[];
   disabled?: boolean;
 }
 
@@ -22,18 +33,62 @@ interface Float {
 
 let idc = 0;
 
-export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
+export function ReactionsTray({
+  onReact,
+  reactions,
+  disabled,
+}: ReactionsTrayProps) {
   const [floats, setFloats] = useState<Float[]>([]);
+  const [savingEmoji, setSavingEmoji] = useState<string | null>(null);
+  const [savedEmoji, setSavedEmoji] = useState<string | null>(null);
+
+  const reactionCounts = useMemo(() => {
+    const counts: Partial<Record<(typeof REACTION_EMOJIS)[number], number>> =
+      {};
+    for (const reaction of reactions ?? []) {
+      if (REACTION_EMOJIS.includes(reaction.emoji as never)) {
+        const emoji = reaction.emoji as (typeof REACTION_EMOJIS)[number];
+        counts[emoji] = (counts[emoji] ?? 0) + 1;
+      }
+    }
+    return counts;
+  }, [reactions]);
 
   function fire(emoji: string) {
-    if (disabled) return;
-    onReact(emoji);
+    if (disabled || savingEmoji === emoji) return;
     const id = ++idc;
     const left = 10 + Math.random() * 80; // random horizontal variance within tray
     setFloats((f) => [...f, { id, emoji, left }]);
     setTimeout(() => {
       setFloats((f) => f.filter((x) => x.id !== id));
     }, 2500);
+
+    let result: ReactionHandlerResult;
+    try {
+      result = onReact(emoji);
+    } catch {
+      setSavedEmoji((current) => (current === emoji ? null : current));
+      return;
+    }
+
+    if (result && typeof result === "object" && "then" in result) {
+      setSavingEmoji(emoji);
+      void Promise.resolve(result)
+        .then((saved) => {
+          setSavedEmoji((current) =>
+            saved === false ? (current === emoji ? null : current) : emoji,
+          );
+        })
+        .catch(() => {
+          setSavedEmoji((current) => (current === emoji ? null : current));
+        })
+        .finally(() => {
+          setSavingEmoji((current) => (current === emoji ? null : current));
+        });
+      return;
+    }
+
+    if (result !== false) setSavedEmoji(emoji);
   }
 
   return (
@@ -42,17 +97,43 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
         <Tooltip key={emoji}>
           <TooltipTrigger asChild>
             <button
+              type="button"
               onClick={() => fire(emoji)}
-              disabled={disabled}
+              disabled={disabled || savingEmoji === emoji}
+              aria-label={
+                reactionCounts[emoji]
+                  ? `${REACTION_NAMES[emoji]} ${reactionCounts[emoji]}`
+                  : `React with ${emoji}`
+              }
+              aria-pressed={savedEmoji === emoji}
+              data-reaction-emoji={emoji}
+              data-reaction-count={reactionCounts[emoji] ?? 0}
+              data-reaction-saved={savedEmoji === emoji}
               className={cn(
-                "flex h-7 w-7 items-center justify-center rounded-full text-base sm:h-9 sm:w-9 sm:text-xl",
+                "relative flex h-8 w-8 items-center justify-center rounded-full text-base transition-[background-color,transform,box-shadow] hover:scale-110 hover:bg-accent sm:h-9 sm:w-9 sm:text-xl",
+                savedEmoji === emoji &&
+                  "bg-accent shadow-[0_0_0_2px_hsl(var(--primary)/0.35)]",
+                savingEmoji === emoji && "animate-pulse",
                 disabled && "opacity-50 cursor-not-allowed",
               )}
             >
               {emoji}
+              {savedEmoji === emoji ? (
+                <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
+                  <IconCheck className="h-2.5 w-2.5" stroke={3} />
+                </span>
+              ) : reactionCounts[emoji] ? (
+                <span className="absolute -right-0.5 -top-0.5 min-w-3.5 rounded-full bg-muted px-0.5 text-[9px] font-semibold leading-3 text-muted-foreground shadow-sm">
+                  {reactionCounts[emoji]}
+                </span>
+              ) : null}
             </button>
           </TooltipTrigger>
-          <TooltipContent>{`React with ${emoji}`}</TooltipContent>
+          <TooltipContent>
+            {reactionCounts[emoji]
+              ? `${REACTION_NAMES[emoji]} ${reactionCounts[emoji]}`
+              : `React with ${emoji}`}
+          </TooltipContent>
         </Tooltip>
       ))}