Add live requester activity badges

Author: Jamesllllllllll

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project are documented here.
 
+## [0.7.0] - 2026-04-14
+
+### Added
+- Playlist entries now show when a requester has gone AFK, making it easier for streamers and viewers to spot requests that may need a quick check-in.
+
+### Changed
+- Requester activity on the playlist now updates live as chat messages come in, so AFK badges clear automatically when someone is active again.
+
 ## [0.6.0] - 2026-04-14
 
 ### Added

drizzle/0040_channel_chatter_activity.sql

@@ -0,0 +1,13 @@
+CREATE TABLE `channel_chatter_activity` (
+	`channel_id` text NOT NULL,
+	`twitch_user_id` text NOT NULL,
+	`login` text NOT NULL,
+	`display_name` text NOT NULL,
+	`last_chat_at` integer NOT NULL,
+	`created_at` integer DEFAULT (unixepoch() * 1000) NOT NULL,
+	`updated_at` integer DEFAULT (unixepoch() * 1000) NOT NULL,
+	PRIMARY KEY(`channel_id`, `twitch_user_id`),
+	FOREIGN KEY (`channel_id`) REFERENCES `channels`(`id`) ON UPDATE no action ON DELETE no action
+);
+CREATE INDEX `channel_chatter_activity_channel_last_chat_idx` ON `channel_chatter_activity` (`channel_id`,`last_chat_at`);
+CREATE INDEX `channel_chatter_activity_channel_login_idx` ON `channel_chatter_activity` (`channel_id`,`login`);

package-lock.json

@@ -2,7 +2,7 @@
   "name": "request-bot",
   "private": true,
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "engines": {
     "node": ">=22"
   },
@@ -28,7 +28,7 @@
     "deploy": "node scripts/run-remote-operation.mjs deploy",
     "cf-typegen": "wrangler types",
     "db:generate": "drizzle-kit generate",
-    "db:migrate": "wrangler d1 migrations apply request_bot --local",
+    "db:migrate": "node scripts/run-db-migrate.mjs --local",
     "db:migrate:remote": "node scripts/run-remote-operation.mjs db:migrate:remote",
     "db:reset:local": "node scripts/reset-local-d1.mjs",
     "db:seed:sample:local": "node scripts/seed-sample-catalog.mjs local",

package.json

@@ -0,0 +1,155 @@
+import { spawn } from "node:child_process";
+import { resolve } from "node:path";
+
+const args = process.argv.slice(2);
+const wranglerEntry = resolve(
+  process.cwd(),
+  "node_modules",
+  "wrangler",
+  "bin",
+  "wrangler.js"
+);
+const child = spawn(
+  process.execPath,
+  [wranglerEntry, "d1", "migrations", "apply", "request_bot", ...args],
+  {
+    cwd: process.cwd(),
+    env: process.env,
+    stdio: ["inherit", "pipe", "pipe"],
+  }
+);
+
+// biome-ignore lint/complexity/useRegexLiterals: the constructor avoids the control-character lint on the ANSI pattern.
+const ansiPattern = new RegExp(String.raw`\u001B\[[0-9;?]*[ -/]*[@-~]`, "g");
+const migrationNames = [];
+const reportedStatuses = new Map();
+let stdoutBuffer = "";
+let stderrBuffer = "";
+let appliedCount = 0;
+let totalMigrations = 0;
+let printedSummary = false;
+
+function stripAnsi(value) {
+  return value.replace(ansiPattern, "");
+}
+
+function printLine(line) {
+  process.stdout.write(`${line}\n`);
+}
+
+function maybePrintSummary() {
+  if (printedSummary || totalMigrations < 1) {
+    return;
+  }
+
+  printedSummary = true;
+  printLine(`Applying ${totalMigrations} local migrations...`);
+}
+
+function handleStdoutLine(rawLine) {
+  const line = stripAnsi(rawLine).trimEnd();
+  const trimmed = line.trim();
+
+  if (!trimmed) {
+    return;
+  }
+
+  if (trimmed.includes("No migrations to apply")) {
+    printLine("No migrations to apply.");
+    return;
+  }
+
+  const aboutToApplyMatch = trimmed.match(/About to apply (\d+) migration/);
+  if (aboutToApplyMatch) {
+    totalMigrations = Number(aboutToApplyMatch[1]);
+    maybePrintSummary();
+    return;
+  }
+
+  const listMatch = trimmed.match(/^│\s+([0-9]{4}_[^│]+?\.sql)\s+│$/u);
+  if (listMatch) {
+    const name = listMatch[1];
+    if (name && !migrationNames.includes(name)) {
+      migrationNames.push(name);
+      totalMigrations = Math.max(totalMigrations, migrationNames.length);
+    }
+    return;
+  }
+
+  const statusMatch = trimmed.match(
+    /^│\s+([0-9]{4}_[^│]+?\.sql)\s+│\s+(.+?)\s+│$/u
+  );
+  if (statusMatch) {
+    const [, name, status] = statusMatch;
+    const normalizedStatus = status.trim();
+    const previousStatus = reportedStatuses.get(name);
+
+    if (normalizedStatus === "✅" && previousStatus !== "✅") {
+      reportedStatuses.set(name, "✅");
+      appliedCount += 1;
+      maybePrintSummary();
+      const index =
+        migrationNames.indexOf(name) >= 0
+          ? migrationNames.indexOf(name) + 1
+          : appliedCount;
+      const total = totalMigrations || migrationNames.length || index;
+      printLine(`[${index}/${total}] ${name}`);
+      return;
+    }
+
+    if (normalizedStatus === "❌" && previousStatus !== "❌") {
+      reportedStatuses.set(name, "❌");
+      maybePrintSummary();
+      const index =
+        migrationNames.indexOf(name) >= 0
+          ? migrationNames.indexOf(name) + 1
+          : appliedCount + 1;
+      const total = totalMigrations || migrationNames.length || index;
+      printLine(`[${index}/${total}] ${name} failed`);
+      return;
+    }
+
+    return;
+  }
+
+  if (
+    trimmed.startsWith("Migration ") ||
+    trimmed.startsWith("bad port") ||
+    trimmed.startsWith("Logs were written to ")
+  ) {
+    printLine(trimmed);
+  }
+}
+
+function flushBuffer(buffer, handler) {
+  const normalized = buffer.replace(/\r/g, "\n");
+  const lines = normalized.split("\n");
+  const remainder = lines.pop() ?? "";
+
+  for (const line of lines) {
+    handler(line);
+  }
+
+  return remainder;
+}
+
+child.stdout.on("data", (chunk) => {
+  stdoutBuffer += chunk.toString();
+  stdoutBuffer = flushBuffer(stdoutBuffer, handleStdoutLine);
+});
+
+child.stderr.on("data", (chunk) => {
+  stderrBuffer += chunk.toString();
+  stderrBuffer = flushBuffer(stderrBuffer, handleStdoutLine);
+});
+
+child.on("close", (code) => {
+  if (stdoutBuffer) {
+    handleStdoutLine(stdoutBuffer);
+  }
+  if (stderrBuffer) {
+    handleStdoutLine(stderrBuffer);
+  }
+
+  process.exit(code ?? 1);
+});

scripts/run-db-migrate.mjs

@@ -93,6 +93,7 @@ import {
   getUpdatedPositionsAfterSetCurrent,
   getUpdatedQueuedPositionsAfterKindChange,
 } from "~/lib/playlist/order";
+import { isRequesterInactive } from "~/lib/playlist/requester-activity";
 import { areChannelRequestsOpen } from "~/lib/request-availability";
 import { formatPathLabel } from "~/lib/request-policy";
 import {
@@ -154,6 +155,7 @@ export type PlaylistItem = {
   regularPosition?: number | null;
   status: string;
   requestKind?: "regular" | "vip";
+  requesterLastChatAt?: number | null;
 };
 
 export type PlaylistCandidate = {
@@ -2997,6 +2999,10 @@ function PlaylistQueueItem(props: {
     editedTimestamp != null && editedTimestamp > props.item.createdAt
       ? t("row.edited", { time: formatTimeAgo(t, editedTimestamp) })
       : null;
+  const requesterLastChatAt = props.item.requesterLastChatAt ?? null;
+  const requesterInactive = isRequesterInactive(requesterLastChatAt);
+  const requesterActivityLabel =
+    requesterLastChatAt != null ? formatTimeAgo(t, requesterLastChatAt) : null;
 
   useEffect(() => {
     const element = itemRef.current;
@@ -3243,6 +3249,14 @@ function PlaylistQueueItem(props: {
                       {t("management.item.playingBadge")}
                     </Badge>
                   ) : null}
+                  {requesterInactive ? (
+                    <StatusPill
+                      icon={AlertTriangle}
+                      className="border-amber-400/40 bg-amber-500/15 text-amber-200"
+                    >
+                      {t("management.item.inactiveBadge")}
+                    </StatusPill>
+                  ) : null}
                   {props.item.warningMessage ? (
                     <StatusPill
                       icon={AlertTriangle}
@@ -3318,6 +3332,17 @@ function PlaylistQueueItem(props: {
                   ) : null}
                 </p>
               </div>
+              {getRequesterLabel(props.item) && requesterActivityLabel ? (
+                <p
+                  className={cn(
+                    "inline-flex items-center gap-1.5 text-sm",
+                    requesterInactive ? "text-amber-100" : "text-(--muted)"
+                  )}
+                >
+                  <Clock3 className="h-3.5 w-3.5" />
+                  <span>{requesterActivityLabel}</span>
+                </p>
+              ) : null}
               {props.item.requestedQuery &&
               !getRequestedPathLabel(props.item) ? (
                 <p className="text-xs text-amber-200">

src/components/playlist-management-surface.tsx

@@ -1,2 +1,2 @@
 // biome-ignore format: generated file must stay single-line for sync checks
-export const LATEST_MIGRATION_NAME = "0039_preferred_charters.sql";
+export const LATEST_MIGRATION_NAME = "0040_channel_chatter_activity.sql";