Add prominent watch button to ready requests

frontend/app/ops-redesign.css

@@ -2039,6 +2039,44 @@ button:disabled,
   border-bottom: 0;
   background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(79, 70, 229, 0.08));
 }
+.request-next-step-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+}
+.request-next-step-copy {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+.request-next-step-copy > strong { color: var(--ops-text); font-size: 1rem; line-height: 1.4; }
+.request-next-step-copy > p { margin: 0; }
+.request-watch-button {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-width: 240px;
+  min-height: 48px;
+  padding: 12px 20px;
+  border: 1px solid rgba(72, 224, 178, 0.62);
+  border-radius: var(--ops-radius);
+  background: linear-gradient(115deg, rgba(16, 185, 129, 0.92), rgba(14, 165, 233, 0.9));
+  color: #fff;
+  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.16);
+  font-size: 0.84rem;
+  font-weight: 800;
+  text-decoration: none;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+.request-watch-button:hover {
+  border-color: rgba(126, 255, 214, 0.9);
+  box-shadow: 0 12px 34px rgba(14, 165, 233, 0.24);
+  transform: translateY(-1px);
+}
+.request-watch-button > span { font-size: 1rem; }
 
 .request-action-row,
 .request-stage-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
@@ -2266,6 +2304,8 @@ button:disabled,
   .request-diagnostics-grid { grid-template-columns: 1fr; }
   .request-action-row,
   .request-stage-actions { display: grid; }
+  .request-next-step-main { align-items: stretch; flex-direction: column; }
+  .request-watch-button { width: 100%; min-width: 0; }
   .request-action-row button,
   .request-release button { width: 100%; }
   .request-operation-heading { align-items: flex-start; flex-direction: column; }

frontend/app/requests/[id]/page.tsx

@@ -463,6 +463,10 @@ export default function RequestTimelinePage() {
 
   const presentation = snapshot.presentation ?? {}
   const pipeline = presentation.pipeline?.length ? presentation.pipeline : fallbackPipeline(snapshot)
+  const availableStage = pipeline.find((stage) => stage.id === 'available')
+  const mediaServerLink = availableStage?.state === 'complete' && availableStage.link
+    ? availableStage.link
+    : null
   const statusLabel = presentation.status?.label ?? fallbackStatusLabel(snapshot.state)
   const statusMeaning = presentation.status?.meaning ?? snapshot.state_reason ?? 'Magent is checking this request.'
   const download = presentation.download
@@ -671,9 +675,23 @@ export default function RequestTimelinePage() {
           </div>
         )}
         <div className="request-overview-block request-next-step">
+          <div className="request-next-step-main">
+            <div className="request-next-step-copy">
               <span className="request-overview-label">Next step</span>
               <strong>{nextStep.title}</strong>
               <p>{nextStep.description}</p>
+            </div>
+            {mediaServerLink && (
+              <a
+                className="request-watch-button"
+                href={mediaServerLink}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Watch on Grizzlyflix <span aria-hidden="true">&rarr;</span>
+              </a>
+            )}
+          </div>
           <div className="request-action-row">
             {recommendedActions.map((action) => (
               <button key={action.id} type="button" disabled={Boolean(busyAction)} onClick={() => void runAction(action)}>