Add Twitch bot account chatbot guide

Author: steveseguin

background.js

@@ -5647,6 +5647,72 @@ chrome.runtime.onMessage.addListener(async function (request, sender, sendRespon
 				sendResponse({ ok: false, error: error && error.message ? error.message : "VPZone fetch failed" });
 			}
 			return true;
+		} else if (request.cmd && request.cmd === "joystickFetchJson") {
+			let parsedUrl;
+			try {
+				parsedUrl = new URL(request.url);
+			} catch (error) {
+				sendResponse({ ok: false, error: "Invalid Joystick API URL" });
+				return response;
+			}
+			if (parsedUrl.hostname !== "api.joystick.tv") {
+				sendResponse({ ok: false, error: "Joystick API URL not allowed" });
+				return response;
+			}
+			try {
+				const method = String(request.method || "GET").toUpperCase();
+				const isOAuthTokenPost = method === "POST" && parsedUrl.pathname === "/api/oauth/token";
+				const isStreamSettingsGet = method === "GET" && parsedUrl.pathname === "/api/users/stream-settings";
+				if (!isOAuthTokenPost && !isStreamSettingsGet) {
+					sendResponse({ ok: false, error: "Joystick API request not allowed" });
+					return response;
+				}
+				const headers = {
+					Accept: "application/json"
+				};
+				const authHeader = typeof request.auth === "string" ? request.auth.replace(/[\r\n]/g, "") : "";
+				if (isOAuthTokenPost) {
+					headers["Content-Type"] = "application/x-www-form-urlencoded";
+					if (request.authType === "basic" && authHeader.startsWith("Basic ")) {
+						headers.Authorization = authHeader;
+					}
+				} else if (isStreamSettingsGet) {
+					headers["Content-Type"] = "application/json";
+					if (request.authType === "bearer" && authHeader.startsWith("Bearer ")) {
+						headers.Authorization = authHeader;
+					}
+				}
+				const joystickResponse = await fetch(parsedUrl.toString(), {
+					method,
+					cache: "no-store",
+					credentials: "omit",
+					headers,
+					body: isOAuthTokenPost ? String(request.body || "") : undefined
+				});
+				const responseText = await joystickResponse.text();
+				let responseJson = {};
+				try {
+					responseJson = responseText ? JSON.parse(responseText) : {};
+				} catch (error) {
+					responseJson = null;
+				}
+				if (!joystickResponse.ok) {
+					sendResponse({
+						ok: false,
+						status: joystickResponse.status,
+						error: (responseJson && (responseJson.error_description || responseJson.message || (typeof responseJson.error === "string" ? responseJson.error : responseJson.error && responseJson.error.message))) || `HTTP ${joystickResponse.status}`
+					});
+					return response;
+				}
+				if (responseJson == null) {
+					sendResponse({ ok: false, status: joystickResponse.status, error: "Invalid JSON response" });
+					return response;
+				}
+				sendResponse({ ok: true, status: joystickResponse.status, data: responseJson });
+			} catch (error) {
+				sendResponse({ ok: false, error: error && error.message ? error.message : "Joystick API fetch failed" });
+			}
+			return true;
 		} else if (request.cmd && request.cmd === "rumbleFetchJson") {
 			try {
 				const rumbleResponse = await fetchRumbleJsonResponse(request.url);

credits.html

@@ -671,15 +671,33 @@ <h2 class="instructions-title">Stream Credits Setup</h2>
 		}
 	}
 
-	function getOrCreateUser(name, type) {
-		const key = `${name}-${type}`;
-		if (!users.has(key)) {
-			users.set(key, new User(name, type));
-		}
-		return users.get(key);
-	}
-
-	let previewMode = false;
+	function getOrCreateUser(name, type) {
+		const key = `${name}-${type}`;
+		if (!users.has(key)) {
+			users.set(key, new User(name, type));
+		}
+		return users.get(key);
+	}
+
+	function hasSupporterSignal(data) {
+		return !!(data && (data.hasDonation || data.membership));
+	}
+
+	function filterCreditsUsersForSupporters(userList) {
+		if (urlParams.has('onlydonors')) {
+			return userList.filter(function(user) {
+				return user.donations > 0;
+			});
+		}
+		if (urlParams.has('onlysupporters')) {
+			return userList.filter(function(user) {
+				return user.donations > 0 || user.isMember;
+			});
+		}
+		return userList;
+	}
+
+	let previewMode = false;
 
 	function processData(data) {
 		if (data.content) {
@@ -704,14 +722,15 @@ <h2 class="instructions-title">Stream Credits Setup</h2>
 			}
 			return;
 		}
-
-		if (!data.chatname || !data.type) return;
-
-		const onlydonors = urlParams.has('onlydonors');
-		if (onlydonors && !data.hasDonation) return;
-
-		const user = getOrCreateUser(data.chatname, data.type);
-		user.messageCount++;
+
+		if (!data.chatname || !data.type) return;
+
+		const onlydonors = urlParams.has('onlydonors');
+		if (onlydonors && !data.hasDonation) return;
+		if (!onlydonors && urlParams.has('onlysupporters') && !hasSupporterSignal(data)) return;
+
+		const user = getOrCreateUser(data.chatname, data.type);
+		user.messageCount++;
 
 		// Store avatar URL if available
 		if (data.chatimg) {
@@ -745,12 +764,7 @@ <h2 class="instructions-title">Stream Credits Setup</h2>
 
 	function generateCreditsContent() {
 		let sortedUsers = Array.from(users.values());
-		const onlydonors = urlParams.has('onlydonors');
-		if (onlydonors) {
-			sortedUsers = sortedUsers.filter(function(user) {
-				return user.donations > 0;
-			});
-		}
+		sortedUsers = filterCreditsUsersForSupporters(sortedUsers);
 
 		if (donationPriority) {
 			// Separate users into donors and non-donors

docs/agents/07-overlays-and-pages/tipjar-credits.md

@@ -67,6 +67,7 @@ Bar/meter styling:
 | `fillend` / `barcolorend` | Full fill color. |
 | `fillmode` | `progress`, `gradient`, or `solid`. |
 | `barheight` | Track height for bar-based styles. |
+| `bartextsize` / `barfontsize` | Text size in px for the centered `bar` style amount text. |
 | `barradius` | Track corner radius; `0` gives square edges. |
 | `trackcolor` / `bartrackcolor` / `barbackground` | Bar track color. |
 | `noliquid` | Disables the animated liquid/bar effect. |
@@ -99,6 +100,7 @@ Hype mode:
 | `hidecompletions` | Hides completion count in hype mode. |
 | `completiondelay` | Delay before rollover/reset display. |
 | `levelsize` / `increment` | Repeating level size for level/band goals. |
+| `rollinggoal` / `cumulativegoal`, `goalstep` / `goalincrement` | Keeps the total cumulative and advances the displayed target to the next goal step, e.g. `$60 / $100` after passing a `$50` goal. |
 | `celebration` | `hearts`, `confetti`, `fireworks`, or `none`. |
 
 ## Tip Jar Commands
@@ -228,6 +230,7 @@ Support rule: credits needs the page open while messages arrive, unless `persist
 | `persistcredits` | Saves users to localStorage by session. |
 | `donationpriority` | Groups/sorts donors first, then members, then participants. |
 | `onlydonors` | Ignores users without donation payloads. |
+| `onlysupporters` | Ignores regular chat-only users and keeps donors plus members/subscribers. |
 | `hidecategories` | Hides category headers. |
 | `showavatar` / `showavatars` | Shows avatar images when available. |
 | `showamounts` | Shows donation totals next to donors. |

docs/agents/08-platform-sources/popout-chat-only-sources.md

@@ -48,7 +48,7 @@ That source is a chat-only/popout capture. Open the exact supported chat URL, ke
 | Mixcloud Live | `https://www.mixcloud.com/live/*/chat/` | Live chat rows with `data-testid="chatline"` or older `.mixcloud-live-chat-row-link` selectors | Extracts username from profile link; subscription rows can populate `hasDonation`; dedupes repeated JSON payloads | Selector paths support multiple layouts and need live validation. |
 | Nimo.TV | `https://www.nimo.tv/popout/chat/*`, `https://dashboard.nimo.tv/popout/chat/*` | `.nimo-room__chatroom__message-item`, `.nm-message-nickname`, `.content` | Badge images from level/decoration selectors; donation placeholder is inactive in inspected source | Uses popout chat; donation bits are not active in the inspected code. |
 | Odysee | `https://odysee.com/$/popout/*` | Main content mutations, author, livestream comment text, avatar | Rant/donation code is present only as commented-out notes in the inspected source | Treat as rendered chat capture; do not promise rants/donations from this pass. |
-| Parti | `https://parti.com/popout-chat?id=*` | Popout chat rows with `span.username`, avatar, badges, text | Tip parsing around `.bi-coin`; viewer count heartbeat every 60 seconds when `showviewercount` or `hypemode` is enabled | Viewer count requires `id` query parameter and platform heartbeat response; source sends no verified chat-back path. |
+| Parti | `https://parti.com/popout-chat?id=*` | Current `.creator-chat-stream > .ccs-row` rows with fallback support for older `span.username` rows | Tip rows emit `event: "donation"` with `hasDonation`, structured `meta.amount` / `meta.currency` when parsable, and USD `donoValue`; viewer count heartbeat uses a stable per-window token when `showviewercount` or `hypemode` is enabled | Viewer count requires `id` query parameter and platform heartbeat response; source sends no verified chat-back path. |
 | Picarto.tv | `https://picarto.tv/chatpopout/*`, `https://www.picarto.tv/chatpopout/*` | Chat popout rows with styled channel display name, message span, avatar | Handles image emotes inside message spans | Generated class names and two message-row layouts need live validation. |
 | Piczel.tv | `https://piczel.tv/chat/*` | `#PiczelChat` rows, buttons/avatar, `Message_` content | Handles inline images/emotes; focuses CodeMirror line for chat input | DOM traversal uses deep child-node indexing and is fragile. |
 | RokFin | `https://*.rokfin.com/popout/chat/*`, `https://rokfin.com/popout/chat/*` | Ant Design comment rows, author, badges, avatar, message body | Tip rows using `.ant-space-item mark` can set `hasDonation` | Requires popout chat URL; badges can be image or SVG descriptors. |

docs/agents/08-platform-sources/special-case-platform-and-helper-sources.md

@@ -47,7 +47,7 @@ This includes:
 
 | Source | Manifest/Load Path | What It Captures Or Does | Source Identity | Support Notes |
 | --- | --- | --- | --- | --- |
-| Joystick DOM chat | `sources/joystick.js` on `https://joystick.tv/u/*/chat` | Watches `#chat-messages` for new `.chat-message` rows. Extracts name, message, streamer badge, notice rows, bot rows, and focuses `input[flow-id="chat-message-text-input"]`. | Payload `type: "joystick"` and `getSource` returns `joystick`. | This is rendered-page capture. Joystick bot Gateway/OAuth/send-back belongs to `sources/websocket/joystick.*` and `websocket-source-pages.md`. |
+| Joystick DOM chat | `sources/joystick.js` on `https://joystick.tv/u/*/chat` | Watches `#chat-messages` for new `.chat-message` rows. Extracts name, message, streamer badge, notice rows, bot rows, and focuses `input[flow-id="chat-message-text-input"]`. | Payload `type: "joystick"` and `getSource` returns `joystick`. | This is rendered-page capture and can fail before parsing if Joystick/Cloudflare blocks the app session. Joystick bot Gateway/OAuth/send-back belongs to `sources/websocket/joystick.*` and `websocket-source-pages.md`. |
 | Velora rendered site | `sources/velora.js` on `https://velora.tv/*` | Watches rendered chat rows, extracts badges before the username button, messages, name color, donation/Volts text, channel-points style "says" events, subscription rows, and viewer counts when viewer-count/hype settings are enabled. | Payload `type: "velora"` and `getSource` returns `velora`. | This DOM path is separate from the Velora OAuth/API source page. Do not promise send-back from the DOM script; send-back belongs to the source-page API path. |
 | Vercel demo launcher | `sources/vercel.js` on `https://maestro-launcher.vercel.app/` | Requests the current SSN stream/session ID from the extension, prompts the user unless `sharestreamid` is already allowed, writes the ID into `#roomId`, and calls the page's `updatedChatID` hook if present. | No chat payload source. | Treat as a demo/helper bridge for session access. It is not chat capture and not a supported social platform parser. |
 | Vertical Pixel Zone | `sources/verticalpixelzone.js` on `https://verticalpixelzone.com/*` | Attempts to watch a rendered chat container and extracts avatar, `.message-username`, and `.message-text-inner` content. Focuses `.input > input[type="text"][name^="chat_"]`. | `getSource` returns `verticalpixelzone`, but emitted payload `type` is `arena` in the inspected file. | Source identity mismatch is important for filters and support answers. The active observer selector looks fragile and needs live validation before promising current support. |
@@ -85,7 +85,8 @@ For support answers, ask which mode the user is using before troubleshooting. A
 
 | Question | Short Answer |
 | --- | --- |
-| "Joystick works on the website but not the WebSocket source page." | Separate the modes. `sources/joystick.js` is rendered chat capture; `sources/websocket/joystick.*` needs bot credentials/OAuth and GatewayChannel connection. |
+| "Joystick works in Chrome but not the desktop app." | The rendered DOM path depends on a logged-in Joystick page and can be blocked by Joystick/Cloudflare in the app; use the Joystick Bot WebSocket source page when bot credentials are available. |
+| "Joystick works on the website but not the WebSocket source page." | Separate the modes. `sources/joystick.js` is rendered chat capture; `sources/websocket/joystick.*` needs bot credentials/OAuth and GatewayChannel connection through `api.joystick.tv`. |
 | "Velora chat appears but I cannot send replies." | The DOM source captures rendered rows. Reply/send-back is a Velora source-page/API feature and depends on OAuth, token state, and channel permissions. |
 | "VPZone duplicates messages." | Check whether `sources/inject/vpzone-ws.js` is active and whether `sources/vpzone.js` suppresses DOM rows after the first intercepted WebSocket frame. |
 | "Vertical Pixel Zone says source verticalpixelzone but filters see arena." | The inspected file returns `verticalpixelzone` for `getSource` but emits payload `type: "arena"`. Source filters and overlays can see the payload type. |

docs/agents/08-platform-sources/websocket-source-pages.md

@@ -57,7 +57,7 @@ Do not infer send-chat support from the page existing. Confirm the page has `SEN
 | --- | --- | --- | --- | --- |
 | `bilibili.html` / `bilibili.js` | Bilibili room ID; optional cookie/auth for sending | Chat, gifts, super chat, user-enter, follower updates, live/offline status | Yes, via `SEND_BILIBILI_MESSAGE` when credentials/session allow it | Uses Bilibili room APIs, socket packets, and a content-script bridge. If receive works but send fails, check cookie/auth and platform-side permission first. |
 | `irc.html` / `irc.js` | IRC server/channel/user fields in the page | IRC messages normalized through `IRCMessage` | Yes, via `SEND_IRC_MESSAGE` | `getSource` returns `irc`; `focusChat` targets `messageInput`. Useful for custom IRC-style workflows. |
-| `joystick.html` / `joystick.js` | Joystick bot client ID/secret, OAuth or external app auth, channel slug/ID | Chat messages, user presence, stream online/offline, follows, token/tip style donation events | Yes, when socket is connected/subscribed and channel ID is known | Requires bot credentials for the gateway socket. OAuth token storage/refresh is local to the source page. |
+| `joystick.html` / `joystick.js` | Joystick bot client ID/secret, OAuth or external app auth, channel slug/ID | Chat messages, user presence, stream online/offline, follows, token/tip style donation events | Yes, when socket is connected/subscribed and channel ID is known | Requires bot credentials for the gateway socket. Authorize starts on `joystick.tv`; token, REST, and cable use `api.joystick.tv`. Token/REST calls should use the extension background fetch or desktop `window.ninjafy.fetchJoystickJson` bridge because normal hosted-page fetch can hit CORS. Stream settings can hydrate channel ID, source name/image, live state, and follower count, but current Joystick docs do not expose live viewer count. OAuth token storage/refresh is local to the source page. |
 | `nostr.html` / `nostr.js` | Nostr relay/filter setup in the page | Nostr events forwarded as source messages | No documented send-back in the bridge | `getSource` deliberately returns false and `focusChat` returns false. Treat it as read-only unless source-checking proves otherwise. |
 | `socialstreamchat.html` / `socialstreamchat.js` | Social Stream chat room ID and optional token | Chat/event envelopes from `chat.socialstream.ninja` | Page has local send logic, but the extension bridge does not advertise `SEND_MESSAGE` handling in the inspected script | Internal/custom source path. It can mint a guest token for rooms that allow it; auth failures usually mean room token/permission setup, not overlay failure. |
 | `stageten.html` / `stageten.js` | StageTEN channel ID | PubNub chat messages from public chat access credentials | Page has local send logic; extension `SEND_MESSAGE` handling was not present in the inspected bridge | Fetches public chat access from StageTEN's plugin-service GraphQL endpoint and refreshes PubNub tokens. CORS failures are a known page-level setup issue. |

docs/commands.html

@@ -841,6 +841,10 @@ <h4>Detailed Documentation</h4>
 							<i class="fas fa-volume-up"></i>
 							<span>Local AI TTS Guide</span>
 						</a>
+						<a href="twitch-bot-account-chatbot.html" class="btn btn-secondary">
+							<i class="fas fa-robot"></i>
+							<span>Twitch Bot Account Replies</span>
+						</a>
 						<a href="https://github.com/steveseguin/social_stream/blob/master/ai.md" class="btn btn-secondary" target="_blank">
 							<i class="fab fa-github"></i>
 							<span>AI Setup Documentation on GitHub</span>