Merge pull request #69 from Jamesllllllllll/codex/streamelements-tip-instructions

Add native Twitch VIP rewards and i18n updates

Author: Jamesllllllllll

.env.example

@@ -26,5 +26,5 @@ ADMIN_TWITCH_USER_IDS=
 # Production should keep its own production bot username in deployed env/secrets.
 TWITCH_BOT_USERNAME=requestbot
 # Broadcaster OAuth scopes used by the main app login.
-# These should include the channel permissions needed for bot replies, chatter lookups, gifted-sub automation, and cheer automation.
-TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read
+# These should include the channel permissions needed for bot replies, chatter lookups, gifted-sub automation, cheer automation, and native channel point rewards.
+TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions

README.md

@@ -31,7 +31,7 @@ It runs on TanStack Start, Cloudflare Workers, D1, Durable Objects, Queues, KV,
 
 - Twitch panel extension with playlist viewing, viewer request actions, and owner/moderator controls for play-now, reorder, remove, request-type changes, and other queue actions
 - Shared bot-account OAuth, per-channel bot opt-in, and live-aware EventSub subscription management
-- VIP token tracking with manual grants plus automatic rewards for new subs, shared resub messages, gifted subs, gift recipients, cheers, raids, and StreamElements tips
+- VIP token tracking with manual grants plus automatic rewards for new subs, shared resub messages, gifted subs, gift recipients, cheers, app-owned channel point rewards, raids, and StreamElements tips
 
 ### Platform And Quality
 
@@ -95,7 +95,7 @@ TWITCH_EVENTSUB_SECRET=local-dev-eventsub-secret
 TWITCH_EXTENSION_SECRET=
 SESSION_SECRET=local-dev-session-secret
 TWITCH_BOT_USERNAME=requestbot
-TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read
+TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions
 ADMIN_TWITCH_USER_IDS=
 VITE_ALLOWED_HOSTS=
 ```
@@ -108,7 +108,7 @@ For basic local development, set:
 - `TWITCH_EVENTSUB_SECRET`
 - `SESSION_SECRET`
 - `TWITCH_BOT_USERNAME`
-- `TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read`
+- `TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions`
 - `VITE_ALLOWED_HOSTS=` if you need extra Vite hostnames
 - `VITE_TWITCH_EXTENSION_API_BASE_URL=` if you want the standalone extension build to call a different app origin
 
@@ -135,7 +135,9 @@ If you build the panel as a standalone Twitch extension artifact, set `VITE_TWIT
 
 `ADMIN_TWITCH_USER_IDS` should contain the Twitch user ID for the admin account that is allowed to connect the shared bot account and access admin pages.
 
-Broadcaster connections need `channel:bot`, `channel:read:subscriptions`, and `bits:read` in `TWITCH_SCOPES`. If the connected Twitch account is missing those permissions, reconnect Twitch from the app so bot replies and VIP token automation can use them.
+Broadcaster connections need `channel:bot`, `channel:read:subscriptions`, `bits:read`, and `channel:manage:redemptions` in `TWITCH_SCOPES`. If the connected Twitch account is missing those permissions, reconnect Twitch from the app so bot replies, VIP token automation, and app-owned channel point rewards can use them.
+
+App-owned channel point rewards also require a Twitch Affiliate or Partner channel. Twitch rejects custom reward create/update calls for channels that do not have channel points.
 
 Sentry stays off locally unless you explicitly set a DSN:
 
@@ -568,7 +570,7 @@ gh secret set CLOUDFLARE_D1_DATABASE_ID
 gh secret set CLOUDFLARE_SESSION_KV_ID
 gh secret set APP_URL --body "https://your-app-host"
 gh variable set TWITCH_BOT_USERNAME --body "your_bot_username"
-gh variable set TWITCH_SCOPES --body "openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read"
+gh variable set TWITCH_SCOPES --body "openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions"
 ```
 
 For the full deploy and GitHub workflow details, use [docs/deployment-workflow.md](/docs/deployment-workflow.md).

docs/bot-operations.md

@@ -40,12 +40,14 @@ TWITCH_EVENTSUB_SECRET=...
 SESSION_SECRET=...
 ADMIN_TWITCH_USER_IDS=your_main_twitch_user_id
 TWITCH_BOT_USERNAME=Pants_Bot_
-TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot
+TWITCH_SCOPES=openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions
 ```
 
 For local development, `TWITCH_BOT_USERNAME` should usually be your dedicated test bot account. Production should keep its own bot username in deployed env or secrets. The app enforces that the connected bot login matches `TWITCH_BOT_USERNAME`, so changing bot accounts locally requires changing local `.env` first.
 
-`TWITCH_SCOPES` belongs to the broadcaster login flow, not the bot login flow. It should include `channel:bot` so chat replies can use Twitch's bot badge path. If the connected broadcaster account is missing that permission, reconnect Twitch.
+`TWITCH_SCOPES` belongs to the broadcaster login flow, not the bot login flow. It should include `channel:bot` so chat replies can use Twitch's bot badge path, plus `channel:read:subscriptions`, `bits:read`, and `channel:manage:redemptions` for VIP token automation and app-owned channel point rewards. If the connected broadcaster account is missing those permissions, reconnect Twitch.
+
+App-owned channel point rewards only work on Twitch Affiliate or Partner channels. If you test this flow on a channel without channel points, Twitch rejects the reward API calls and request-bot leaves the rest of the bot active.
 
 2. Make sure your Twitch developer application has both redirect URIs registered:
 

docs/deployment-workflow.md

@@ -93,11 +93,11 @@ Use these Twitch values:
 - `TWITCH_EXTENSION_CLIENT_ID`: Twitch Extension client ID for the panel extension
 - `TWITCH_EXTENSION_SECRET`: base64 shared secret from the Twitch Extensions developer console
 
-The checked-in default broadcaster scope is:
-
-```text
-openid user:read:moderated_channels channel:bot
-```
+The checked-in default broadcaster scope is:
+
+```text
+openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions
+```
 
 Notes:
 
@@ -315,7 +315,7 @@ gh secret set CLOUDFLARE_D1_DATABASE_ID
 gh secret set CLOUDFLARE_SESSION_KV_ID
 gh secret set APP_URL --body "https://your-production-url.example"
 gh variable set TWITCH_BOT_USERNAME --body "your_bot_username"
-gh variable set TWITCH_SCOPES --body "openid user:read:moderated_channels channel:bot"
+gh variable set TWITCH_SCOPES --body "openid user:read:moderated_channels moderator:read:chatters channel:bot channel:read:subscriptions bits:read channel:manage:redemptions"
 gh variable set SENTRY_ENVIRONMENT --body "production"
 ```
 

docs/local-development.md

@@ -77,7 +77,9 @@ For local bot testing, set `TWITCH_BOT_USERNAME` in `.env` to your dedicated tes
 
 Keep the production bot username only in production secrets or deployed env. Do not point local development at the production bot account unless you intentionally want local testing to use the live bot identity.
 
-`TWITCH_SCOPES` applies to the broadcaster's main app login, not the shared bot login. It needs `channel:bot` so bot replies can use Twitch's bot badge path, and it needs `moderator:read:chatters` for the chatter-first VIP lookup flow.
+`TWITCH_SCOPES` applies to the broadcaster's main app login, not the shared bot login. It needs `channel:bot` so bot replies can use Twitch's bot badge path, `moderator:read:chatters` for the chatter-first VIP lookup flow, `channel:read:subscriptions` and `bits:read` for VIP token automation, and `channel:manage:redemptions` for the native channel point reward flow.
+
+If you want to test the native channel point reward flow locally, use a Twitch Affiliate or Partner channel. Twitch does not allow custom rewards on channels without channel points.
 
 ### Important local testing warning
 

drizzle/0024_channel_point_reward_vip_tokens.sql

@@ -0,0 +1,8 @@
+ALTER TABLE `channel_settings`
+ADD `auto_grant_vip_tokens_for_channel_point_rewards` integer DEFAULT false NOT NULL;
+
+ALTER TABLE `channel_settings`
+ADD `channel_point_reward_cost` integer DEFAULT 1000 NOT NULL;
+
+ALTER TABLE `channel_settings`
+ADD `twitch_channel_point_reward_id` text DEFAULT '' NOT NULL;

src/extension/panel/app.tsx

@@ -51,7 +51,6 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from "~/components/ui/select";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
@@ -82,7 +81,11 @@ import {
   mockModeratorViewerProfile,
   type PanelDemoPlaylist,
 } from "./demo";
-import { readPanelStoredLocale, resolveExtensionPanelLocale } from "./locale";
+import {
+  persistPanelStoredLocale,
+  readPanelStoredLocale,
+  resolveExtensionPanelLocale,
+} from "./locale";
 import {
   getTwitchExtensionHelper,
   loadTwitchExtensionHelper,
@@ -630,6 +633,11 @@ function ExtensionPanelAppContent(props: {
     props.onResolvedLocaleChange,
   ]);
 
+  async function setPanelLocale(nextLocale: AppLocale) {
+    persistPanelStoredLocale(nextLocale);
+    await setLocale(nextLocale);
+  }
+
   function showTransientNotice(
     tone: TransientPanelNotice["tone"],
     message: string
@@ -1229,7 +1237,7 @@ function ExtensionPanelAppContent(props: {
                   </div>
                   <PanelLanguageSelect
                     locale={locale}
-                    onLocaleChange={setLocale}
+                    onLocaleChange={setPanelLocale}
                     isSavingLocale={isSavingLocale}
                   />
                 </div>
@@ -3954,8 +3962,8 @@ function PanelRequestsStatusBar({
     <div
       className={
         requestsEnabled
-          ? "border-b border-(--border-strong) bg-emerald-950/80 px-3 py-1.5 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100"
-          : "border-b border-(--border-strong) bg-rose-950/60 px-3 py-1.5 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-rose-100"
+          ? "border-b border-(--border-strong) bg-emerald-950/80 px-3 py-[3px] text-center text-[9px] leading-[1em] font-semibold uppercase tracking-[0.16em] text-emerald-100"
+          : "border-b border-(--border-strong) bg-rose-950/60 px-3 py-[3px] text-center text-[9px] leading-[1em] font-semibold uppercase tracking-[0.16em] text-rose-100"
       }
     >
       {t("requests.status", {
@@ -4001,12 +4009,19 @@ function getPanelPlaylistFooterLabel(
     : t("footer.openPlaylist");
 }
 
+function getPanelLocaleShortLabel(locale: AppLocale) {
+  return locale === "pt-BR" ? "PT" : locale.slice(0, 2).toUpperCase();
+}
+
 function PanelLanguageSelect(props: {
   locale: AppLocale;
   onLocaleChange: (locale: AppLocale) => Promise<void>;
   isSavingLocale: boolean;
 }) {
   const { t } = useLocaleTranslation("common");
+  const selectedOption =
+    localeOptions.find((option) => option.value === props.locale) ?? null;
+  const selectedLabel = getPanelLocaleShortLabel(props.locale);
 
   return (
     <Select
@@ -4015,15 +4030,22 @@ function PanelLanguageSelect(props: {
       disabled={props.isSavingLocale}
     >
       <SelectTrigger
-        aria-label={t("language.label")}
-        className="h-7 min-w-[7.75rem] gap-2 px-2 text-[11px] shadow-none"
+        aria-label={`${t("language.label")}: ${selectedOption?.nativeLabel ?? selectedLabel}`}
+        title={selectedOption?.nativeLabel ?? selectedLabel}
+        className="h-6 w-11 min-w-0 shrink-0 gap-1 self-start border-(--border-strong) bg-(--panel-soft) px-1.5 text-[10px] font-semibold uppercase tracking-[0.18em] shadow-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:opacity-55"
       >
-        <SelectValue />
+        <span className="text-center">{selectedLabel}</span>
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent align="end" className="min-w-[3.75rem]">
         {localeOptions.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            {option.nativeLabel}
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            textValue={option.nativeLabel}
+            title={option.nativeLabel}
+            className="py-1.5 pl-8 pr-2 text-[10px] font-semibold uppercase tracking-[0.18em]"
+          >
+            {getPanelLocaleShortLabel(option.value)}
           </SelectItem>
         ))}
       </SelectContent>
@@ -4034,10 +4056,15 @@ function PanelLanguageSelect(props: {
 function PreviewPanelLanguageSelect() {
   const { locale, setLocale, isSavingLocale } = useAppLocale();
 
+  async function setPreviewPanelLocale(nextLocale: AppLocale) {
+    persistPanelStoredLocale(nextLocale);
+    await setLocale(nextLocale);
+  }
+
   return (
     <PanelLanguageSelect
       locale={locale}
-      onLocaleChange={setLocale}
+      onLocaleChange={setPreviewPanelLocale}
       isSavingLocale={isSavingLocale}
     />
   );

src/extension/panel/locale.ts

@@ -2,7 +2,13 @@ import {
   readExplicitDeviceLocale,
   readExplicitLocaleCookie,
 } from "~/lib/i18n/detect";
-import { defaultLocale, normalizeLocale } from "~/lib/i18n/locales";
+import {
+  type AppLocale,
+  defaultLocale,
+  normalizeLocale,
+} from "~/lib/i18n/locales";
+
+const panelLocaleStorageKey = "request-bot:extension-panel-locale";
 
 export function resolveExtensionPanelLocale(input?: {
   search?: string | null;
@@ -16,8 +22,8 @@ export function resolveExtensionPanelLocale(input?: {
   const params = new URLSearchParams(input?.search ?? "");
 
   return (
-    normalizeLocale(input?.viewerPreferredLocale) ??
     normalizeLocale(input?.storedLocale) ??
+    normalizeLocale(input?.viewerPreferredLocale) ??
     normalizeLocale(input?.cookieLocale) ??
     normalizeLocale(params.get("locale")) ??
     normalizeLocale(params.get("language")) ??
@@ -28,6 +34,34 @@ export function resolveExtensionPanelLocale(input?: {
   );
 }
 
+function readPanelExplicitLocale() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    return normalizeLocale(window.localStorage.getItem(panelLocaleStorageKey));
+  } catch {
+    return null;
+  }
+}
+
 export function readPanelStoredLocale() {
-  return readExplicitDeviceLocale() ?? readExplicitLocaleCookie();
+  return (
+    readPanelExplicitLocale() ??
+    readExplicitDeviceLocale() ??
+    readExplicitLocaleCookie()
+  );
+}
+
+export function persistPanelStoredLocale(locale: AppLocale) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(panelLocaleStorageKey, locale);
+  } catch {
+    // Ignore local storage failures in restricted browser contexts.
+  }
 }

src/lib/db/latest-migration.generated.ts

@@ -1 +1 @@
-export const LATEST_MIGRATION_NAME = "0023_channel_default_locale.sql";
+export const LATEST_MIGRATION_NAME = "0024_channel_point_reward_vip_tokens.sql";

src/lib/db/repositories.ts

@@ -10,6 +10,7 @@ import {
   refreshAccessToken,
   TwitchApiError,
 } from "~/lib/twitch/api";
+import { channelPointRewardManageScope } from "~/lib/twitch/channel-point-rewards";
 import {
   createId,
   decodeHtmlEntities,
@@ -930,6 +931,20 @@ export async function ensureStreamElementsTipWebhookToken(
   return token;
 }
 
+export async function setTwitchChannelPointRewardId(
+  env: AppEnv,
+  channelId: string,
+  rewardId: string | null
+) {
+  await getDb(env)
+    .update(channelSettings)
+    .set({
+      twitchChannelPointRewardId: rewardId ?? "",
+      updatedAt: Date.now(),
+    })
+    .where(eq(channelSettings.channelId, channelId));
+}
+
 export async function getOverlayStateForOwner(
   env: AppEnv,
   ownerUserId: string
@@ -2748,10 +2763,12 @@ export async function updateSettings(
     autoGrantVipTokensToSubGifters: boolean;
     autoGrantVipTokensToGiftRecipients: boolean;
     autoGrantVipTokensForCheers: boolean;
+    autoGrantVipTokensForChannelPointRewards: boolean;
     autoGrantVipTokensForRaiders: boolean;
     autoGrantVipTokensForStreamElementsTips: boolean;
     allowRequestPathModifiers: boolean;
     cheerBitsPerVipToken: number;
+    channelPointRewardCost: number;
     cheerMinimumTokenPercent: 25 | 50 | 75 | 100;
     raidMinimumViewerCount: number;
     streamElementsTipAmountPerVipToken: number;
@@ -2805,11 +2822,14 @@ export async function updateSettings(
       autoGrantVipTokensToGiftRecipients:
         input.autoGrantVipTokensToGiftRecipients,
       autoGrantVipTokensForCheers: input.autoGrantVipTokensForCheers,
+      autoGrantVipTokensForChannelPointRewards:
+        input.autoGrantVipTokensForChannelPointRewards,
       autoGrantVipTokensForRaiders: input.autoGrantVipTokensForRaiders,
       autoGrantVipTokensForStreamElementsTips:
         input.autoGrantVipTokensForStreamElementsTips,
       allowRequestPathModifiers: input.allowRequestPathModifiers,
       cheerBitsPerVipToken: input.cheerBitsPerVipToken,
+      channelPointRewardCost: input.channelPointRewardCost,
       cheerMinimumTokenPercent: input.cheerMinimumTokenPercent,
       raidMinimumViewerCount: input.raidMinimumViewerCount,
       streamElementsTipAmountPerVipToken:
@@ -3650,15 +3670,22 @@ export async function getViewerState(env: AppEnv, userId: string) {
     env,
     userId
   );
+  const requiredBroadcasterScopes = [
+    "user:read:moderated_channels",
+    "moderator:read:chatters",
+    "channel:bot",
+    "channel:read:subscriptions",
+    "bits:read",
+    ...(settings?.autoGrantVipTokensForChannelPointRewards
+      ? [channelPointRewardManageScope]
+      : []),
+  ];
   const needsBroadcasterScopeReconnect =
     !broadcasterAuthorization ||
-    !hasRequiredAuthorizationScopes(broadcasterAuthorization.scopes, [
-      "user:read:moderated_channels",
-      "moderator:read:chatters",
-      "channel:bot",
-      "channel:read:subscriptions",
-      "bits:read",
-    ]);
+    !hasRequiredAuthorizationScopes(
+      broadcasterAuthorization.scopes,
+      requiredBroadcasterScopes
+    );
   const moderatedChannelsState = broadcasterAuthorization
     ? await getModeratedChannelViewerState(env, broadcasterAuthorization)
     : {