Merge pull request #52 from Jamesllllllllll/codex/settings-extension-ui-copy

Harden Twitch panel beta flows and refine playlist UX

Author: Jamesllllllllll

AGENTS.md

@@ -0,0 +1,8 @@
+## UI Copy
+
+- Treat normal app UI as end-user UI.
+- Do not place development, build, deployment, testing, or setup instructions in normal user-facing screens.
+- Keep commands, file paths, environment variables, route names, build artifacts, and implementation details in documentation or explicit developer-only views.
+- Write UI copy around what the user can do in the product right now.
+- Write UI copy in present tense.
+- If a beta or testing action is intentionally exposed in the UI, keep the copy short and action-oriented without internal implementation details.

docs/twitch-panel-extension-beta-rollout-checklist.md

@@ -81,39 +81,47 @@ In the Twitch Extensions console, use the final production app origin for the pa
 
 Keep `Chat Capabilities` disabled unless the panel sends extension chat messages.
 
-## 8. Move the panel from Local Test to Hosted Test
-
-Build the hosted panel files:
-
-```bash
-npm run build:extension:panel
-```
-
-Upload the contents of:
-
-```text
-dist/twitch-extension/panel
+## 8. Move the panel from Local Test to Hosted Test
+
+Build the hosted panel files:
+
+```bash
+npm run build:extension:panel
+```
+
+When you build the Hosted Test artifact, make sure the shell sets the final app origin:
+
+```bash
+VITE_TWITCH_EXTENSION_API_BASE_URL=https://your-app-host npm run build:extension:panel
+```
+
+Upload the contents of:
+
+```text
+dist/twitch-extension/panel
 ```
 
 Set the Hosted Test asset paths for the panel version:
 
 - `Panel Viewer Path`: `index.html`
 - `Config Path`: `index.html`
 - `Live Config Path`: leave blank unless you add a live config surface
-
-Use Hosted Test for beta channels that should load the production panel without your local dev server or tunnel.
-
-## 9. Set tester access
+
+Use Hosted Test for beta channels that should load the production panel without your local dev server or tunnel.
+
+The uploaded Twitch panel bundle is separate from the website deploy. When you change panel code or the extension API base URL, rebuild the panel artifact and upload a new zip before you retest Hosted Test.
+
+## 9. Set tester access
 
 Add beta channels to:
 
 - `Testing Account Allowlist`
 
 If the version stays unreleased, only accounts on the testing allowlist can install and use the panel in testing mode.
 
-## 10. Verify the beta flows
-
-Verify these paths on the Hosted Test build:
+## 10. Verify the beta flows
+
+Verify these paths on the Hosted Test build:
 
 - viewer, unlinked:
   - playlist loads
@@ -127,8 +135,10 @@ Verify these paths on the Hosted Test build:
 - channel owner:
   - playlist moderation controls appear
   - set current, mark played, delete item, and request-kind changes work
-- channel moderator:
-  - playlist moderation controls follow the channel's moderator capability settings
+- channel moderator:
+  - playlist moderation controls follow the channel's moderator capability settings
+
+If an extension request fails in production, check the frontend Worker logs. Slow and failed panel `bootstrap` and `state` requests log a trace id, elapsed time, and stage timings for channel lookup, viewer resolution, viewer request state, and live playlist state.
 
 ## 11. Keep the website login expectation clear
 

docs/twitch-panel-extension-local-test.md

@@ -32,16 +32,22 @@ Run the app:
 npm run dev
 ```
 
-Build the standalone panel artifact:
-
-```bash
-npm run build:extension:panel
-```
-
-The built panel artifact is written to:
-
-```text
-dist/twitch-extension/panel
+Build the standalone panel artifact:
+
+```bash
+npm run build:extension:panel
+```
+
+For any build that should call a deployed app origin, set the API base URL in the same shell before you build:
+
+```bash
+VITE_TWITCH_EXTENSION_API_BASE_URL=https://your-app-host npm run build:extension:panel
+```
+
+The built panel artifact is written to:
+
+```text
+dist/twitch-extension/panel
 ```
 
 ## Local workflow
@@ -73,8 +79,9 @@ Opening the website from the panel does not create a website session.
 
 The website recognizes the viewer only when the browser already has the normal RockList.Live session cookie. Otherwise the viewer still signs in through the website Twitch OAuth flow.
 
-## After Local Test
-
-- package the final hosted panel artifact for Twitch Hosted Test
-- add review-prep notes for fetched URLs and enabled capabilities
-- validate the full identity-share flow with a real extension registration
+## After Local Test
+
+- package the final hosted panel artifact for Twitch Hosted Test
+- rebuild and re-upload the Hosted Test zip whenever panel code or `VITE_TWITCH_EXTENSION_API_BASE_URL` changes
+- add review-prep notes for fetched URLs and enabled capabilities
+- validate the full identity-share flow with a real extension registration

src/components/channel-rules-panel.tsx

@@ -17,13 +17,6 @@ type CharterMatch = {
   trackCount: number;
 };
 
-type SongMatch = {
-  songId: number;
-  songTitle: string;
-  artistId?: number | null;
-  artistName?: string | null;
-};
-
 type SongGroupMatch = {
   groupedProjectId: number;
   songTitle: string;
@@ -36,7 +29,6 @@ type SearchResponse = {
   artists?: ArtistMatch[];
   charters?: CharterMatch[];
   songs?: SongGroupMatch[];
-  songVersions?: SongMatch[];
 };
 
 export function ChannelRulesPanel(props: {
@@ -65,20 +57,16 @@ export function ChannelRulesPanel(props: {
   const [artistQuery, setArtistQuery] = useState("");
   const [charterQuery, setCharterQuery] = useState("");
   const [songGroupQuery, setSongGroupQuery] = useState("");
-  const [songVersionQuery, setSongVersionQuery] = useState("");
   const [setlistQuery, setSetlistQuery] = useState("");
   const [debouncedArtistQuery, setDebouncedArtistQuery] = useState("");
   const [debouncedCharterQuery, setDebouncedCharterQuery] = useState("");
   const [debouncedSongGroupQuery, setDebouncedSongGroupQuery] = useState("");
-  const [debouncedSongVersionQuery, setDebouncedSongVersionQuery] =
-    useState("");
   const [debouncedSetlistQuery, setDebouncedSetlistQuery] = useState("");
   const [artistMatches, setArtistMatches] = useState<ArtistMatch[]>([]);
   const [charterMatches, setCharterMatches] = useState<CharterMatch[]>([]);
   const [songGroupMatches, setSongGroupMatches] = useState<SongGroupMatch[]>(
     []
   );
-  const [songVersionMatches, setSongVersionMatches] = useState<SongMatch[]>([]);
   const [setlistMatches, setSetlistMatches] = useState<ArtistMatch[]>([]);
   const [searchError, setSearchError] = useState<string | null>(null);
 
@@ -87,18 +75,11 @@ export function ChannelRulesPanel(props: {
       setDebouncedArtistQuery(artistQuery.trim());
       setDebouncedCharterQuery(charterQuery.trim());
       setDebouncedSongGroupQuery(songGroupQuery.trim());
-      setDebouncedSongVersionQuery(songVersionQuery.trim());
       setDebouncedSetlistQuery(setlistQuery.trim());
     }, 350);
 
     return () => window.clearTimeout(timeout);
-  }, [
-    artistQuery,
-    charterQuery,
-    setlistQuery,
-    songGroupQuery,
-    songVersionQuery,
-  ]);
+  }, [artistQuery, charterQuery, setlistQuery, songGroupQuery]);
 
   const mutateRules = useMutation({
     mutationFn: async (body: Record<string, unknown>) => {
@@ -181,9 +162,6 @@ export function ChannelRulesPanel(props: {
       void runSearch("song", debouncedSongGroupQuery, (payload) => {
         setSongGroupMatches(payload.songs ?? []);
       });
-      void runSearch("song-version", debouncedSongVersionQuery, (payload) => {
-        setSongVersionMatches(payload.songVersions ?? []);
-      });
     }
 
     if (props.canManageSetlist) {
@@ -200,7 +178,6 @@ export function ChannelRulesPanel(props: {
     debouncedCharterQuery,
     debouncedSetlistQuery,
     debouncedSongGroupQuery,
-    debouncedSongVersionQuery,
     props.canManageBlacklist,
     props.canManageSetlist,
     props.slug,
@@ -214,10 +191,6 @@ export function ChannelRulesPanel(props: {
     () => new Set(props.charters.map((item) => item.charterId)),
     [props.charters]
   );
-  const blacklistedSongIds = useMemo(
-    () => new Set(props.songs.map((item) => item.songId)),
-    [props.songs]
-  );
   const blacklistedSongGroupIds = useMemo(
     () => new Set(props.songGroups.map((item) => item.groupedProjectId)),
     [props.songGroups]
@@ -236,9 +209,6 @@ export function ChannelRulesPanel(props: {
   const visibleSongGroupMatches = songGroupMatches.filter(
     (song) => !blacklistedSongGroupIds.has(song.groupedProjectId)
   );
-  const visibleSongVersionMatches = songVersionMatches.filter(
-    (song) => !blacklistedSongIds.has(song.songId)
-  );
   const visibleSetlistMatches = setlistMatches.filter(
     (artist) => !setlistArtistIds.has(artist.artistId)
   );
@@ -392,24 +362,10 @@ export function ChannelRulesPanel(props: {
 
               <SearchManageCard
                 title="Blacklisted versions"
-                inputValue={songVersionQuery}
-                onInputChange={setSongVersionQuery}
-                placeholder="Search versions by title"
-                matches={visibleSongVersionMatches.map((song) => ({
-                  key: `song-version-match-${song.songId}`,
-                  label: song.artistName
-                    ? `${song.songTitle} - ${song.artistName}`
-                    : song.songTitle,
-                  meta: `Version ID ${song.songId}`,
-                  onAdd: () =>
-                    mutateRules.mutate({
-                      action: "addBlacklistedSong",
-                      songId: song.songId,
-                      songTitle: song.songTitle,
-                      artistId: song.artistId ?? null,
-                      artistName: song.artistName ?? undefined,
-                    }),
-                }))}
+                inputValue=""
+                onInputChange={() => {}}
+                placeholder=""
+                matches={[]}
                 currentItems={props.songs.map((item) => ({
                   key: `song-version-current-${item.songId}`,
                   label: item.artistName
@@ -425,6 +381,7 @@ export function ChannelRulesPanel(props: {
                 isPending={mutateRules.isPending}
                 emptyCurrentLabel="No blacklisted versions."
                 canManage={props.canManageBlacklist}
+                showSearch={false}
                 hideReadOnlyRemoveAction
               />
             </>
@@ -494,10 +451,12 @@ function SearchManageCard(props: {
   isPending: boolean;
   emptyCurrentLabel: string;
   canManage?: boolean;
+  showSearch?: boolean;
   hideReadOnlyRemoveAction?: boolean;
 }) {
   const normalizedLength = props.inputValue.trim().length;
   const canManage = props.canManage !== false;
+  const showSearch = props.showSearch !== false;
   const showRemoveAction = canManage || !props.hideReadOnlyRemoveAction;
 
   return (
@@ -506,7 +465,7 @@ function SearchManageCard(props: {
         <CardTitle>{props.title}</CardTitle>
       </CardHeader>
       <CardContent className="grid gap-4 px-5 pb-5 pt-0">
-        {canManage ? (
+        {canManage && showSearch ? (
           <>
             <Input
               value={props.inputValue}
@@ -520,7 +479,7 @@ function SearchManageCard(props: {
             ) : null}
           </>
         ) : null}
-        {canManage && normalizedLength >= 2 ? (
+        {canManage && showSearch && normalizedLength >= 2 ? (
           <div className="grid gap-3">
             {props.matches.length > 0 ? (
               props.matches.map((match) => (