test(e2e): golden-master Playwright net for the Platform refactor

Locks the five flows the refactor must not break (feed, channel, player,
settings, nav) so later sprints can prove they changed nothing. Adds a thin
data-testid layer and a dedicated seeded non-demo account; the suite runs on
the baked :8080 stack (authoritative) or :5173. No product-behaviour change.

frontend/src/components/ActiveFilterChips.tsx

@@ -16,13 +16,19 @@ export default function ActiveFilterChips({
   if (filters.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-1.5 pb-3" aria-label={t("feed.chips.label")}>
+    <div
+      data-testid="active-filter-chips"
+      className="flex flex-wrap items-center gap-1.5 pb-3"
+      aria-label={t("feed.chips.label")}
+    >
       <span className="text-[11px] uppercase tracking-wider text-muted mr-0.5">
         {t("feed.chips.label")}
       </span>
       {filters.map((f) => (
         <button
           key={f.key}
+          data-testid="active-filter-chip"
+          data-filter-key={f.key}
           onClick={f.remove}
           title={t("feed.chips.remove", { name: f.label })}
           aria-label={t("feed.chips.remove", { name: f.label })}
@@ -34,6 +40,7 @@ export default function ActiveFilterChips({
       ))}
       {filters.length > 1 && (
         <button
+          data-testid="active-filter-clear-all"
           onClick={onClearAll}
           className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
         >

frontend/src/components/ChannelPage.tsx

@@ -244,6 +244,7 @@ export default function ChannelPage({
           />
         )}
         <button
+          data-testid="channel-back"
           onClick={onBack}
           className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
         >
@@ -263,7 +264,7 @@ export default function ChannelPage({
           />
           <div className="flex-1 min-w-0 pb-1">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-xl font-semibold truncate">{name}</h1>
+              <h1 data-testid="channel-title" className="text-xl font-semibold truncate">{name}</h1>
               {ch?.blocked ? (
                 <span className="text-xs px-2 py-0.5 rounded-full bg-danger/15 text-danger">
                   {t("channel.blockedBadge")}

frontend/src/components/Feed.tsx

@@ -538,6 +538,7 @@ export default function Feed({
         {SHOW_IDS.map((id) => (
           <button
             key={id}
+            data-testid={`feed-show-${id}`}
             onClick={() => setFilters({ ...filters, show: id })}
             aria-pressed={filters.show === id}
             className={`text-xs px-3 py-1.5 rounded-full border transition ${
@@ -595,7 +596,7 @@ export default function Feed({
           </>
         )}
         <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
-        <span className="text-xs text-muted whitespace-nowrap">
+        <span data-testid="feed-result-count" className="text-xs text-muted whitespace-nowrap">
           {countQuery.data
             ? t("feed.videoCount", {
                 count: countQuery.data.count,

frontend/src/components/NavSidebar.tsx

@@ -236,6 +236,7 @@ export default function NavSidebar({
     return (
       <button
         key={p}
+        data-testid={`nav-${p}`}
         onClick={() => setPage(p)}
         title={slim ? label : undefined}
         aria-current={active ? "page" : undefined}
@@ -350,6 +351,7 @@ export default function NavSidebar({
           </button>
         </div>
         <button
+          data-testid="nav-settings"
           onClick={() => setPage("settings")}
           title={slim ? t("header.account.settings") : undefined}
           aria-current={page === "settings" ? "page" : undefined}

frontend/src/components/PlayerModal.tsx

@@ -591,6 +591,7 @@ export default function PlayerModal({
   return createPortal(
     <div
       ref={dialogRef}
+      data-testid="player-modal"
       className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-sm"
       onClick={onClose}
       role="dialog"
@@ -801,6 +802,7 @@ export default function PlayerModal({
                 document.body
               )}
             <button
+              data-testid="player-close"
               onClick={onClose}
               title={t("player.closeEsc")}
               className="shrink-0 inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"

frontend/src/components/SettingsPanel.tsx

@@ -69,6 +69,7 @@ export default function SettingsPanel({
               return (
                 <button
                   key={tabItem.id}
+                  data-testid={`settings-tab-${tabItem.id}`}
                   onClick={() => setTab(tabItem.id)}
                   className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left transition ${
                     active

frontend/src/components/Sidebar.tsx

@@ -37,6 +37,8 @@ function TagChip({
   const { t } = useTranslation();
   return (
     <button
+      data-testid="filter-tag-chip"
+      data-tag={tag.name}
       onClick={onClick}
       title={t("sidebar.channelCount", { count })}
       className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-sm hover:shadow active:translate-y-px transition ${

frontend/src/components/VideoCard.tsx

@@ -448,6 +448,7 @@ function VideoCard({
   const channelButton = (
     <button
       ref={channelRef}
+      data-testid="video-card-channel"
       onClick={(e) => {
         e.stopPropagation();
         onOpenChannel?.(video.channel_id, video.channel_title ?? t("card.thisChannel"));
@@ -497,7 +498,7 @@ function VideoCard({
       const pct = resumePct(video);
       const fits = (needs: number) => width === 0 || width >= needs;
       return (
-        <div className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}>
+        <div data-testid="video-card" data-video-id={video.id} className={clsx(rowShell, "flex items-center gap-3 px-3 py-2", watched && "opacity-55")}>
           {/* Actions lead: this is where the eye already is (the title is the thing you read), so
               they're the shortest pointer trip from it. */}
           <div className="shrink-0 w-48">{actions}</div>
@@ -550,7 +551,7 @@ function VideoCard({
 
   if (spec.family === "row") {
     return (
-      <div className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}>
+      <div data-testid="video-card" data-video-id={video.id} className={clsx(rowShell, "flex gap-3 p-2", watched && "opacity-55")}>
         <Thumb
           video={video}
           className={clsx("aspect-video shrink-0", spec.actionsBelow ? "w-40" : "w-44")}
@@ -580,6 +581,8 @@ function VideoCard({
   // by a pixel or two forever, which shows up as the whole page juddering.
   return (
     <div
+      data-testid="video-card"
+      data-video-id={video.id}
       className={clsx(
         "cv-card group glass-card glass-hover rounded-2xl transition-all duration-150 hover:-translate-y-1",
         "flex flex-col",

frontend/src/components/ui/DraftSaveBar.tsx

@@ -44,8 +44,8 @@ export function DraftSaveBar({
   // mask) scopes this z-40 and fades the bar's bottom edge. The inline variant is in normal flow
   // and stays put.
   const bar = (
-    <div className={wrap}>
-      <span className="text-sm text-muted">
+    <div data-testid="draft-save-bar" className={wrap}>
+      <span data-testid="draft-save-status" data-state={state} className="text-sm text-muted">
         {state === "saved" ? (
           <span className="text-emerald-500 inline-flex items-center gap-1.5">
             <Check className="w-4 h-4" />
@@ -59,6 +59,7 @@ export function DraftSaveBar({
       </span>
       <div className="flex items-center gap-2">
         <button
+          data-testid="draft-discard"
           onClick={onDiscard}
           disabled={saving || !dirty}
           className="glass-card glass-hover flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm disabled:opacity-40 transition"
@@ -67,6 +68,7 @@ export function DraftSaveBar({
           {labels.discard}
         </button>
         <button
+          data-testid="draft-save"
           onClick={onSave}
           disabled={saving || !dirty}
           className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-accent text-accent-fg font-medium shadow-md shadow-accent/20 disabled:opacity-40 transition"