feat: fullscreen button on Sink node + live output clarity in onboarding (#848)

## Summary

- **Sink node fullscreen**: adds a `Maximize2` button in the video
controls overlay — clicking enters/exits browser fullscreen on the
`<video>` element directly, giving users a one-click full-screen preview
without needing to resize the node
- **Sink node empty-state hint**: when no stream is connected, shows
"Resize node for a bigger preview · use Spout/NDI/Syphon for external
output" so the path to bigger/external output is discoverable from the
start

## Motivation

Community user (junglist) asked how to get output to full screen and
thought Scope was mainly for pre-recording. Staff answered with a
workaround, but this surfaced a discoverability gap. These changes
address it at the two points where users first encounter Scope: the Sink
node and the onboarding flow.

Resolves [DAY-18](/DAY/issues/DAY-18).

## Test plan
- [ ] Load a workflow with a Sink node — when video is streaming,
fullscreen button (⤢) should appear in bottom-right controls alongside
play/pause
- [ ] Click fullscreen button — video should enter browser fullscreen;
pressing Escape should exit
- [ ] With no stream connected, Sink node empty state should show hint
text about resizing and Spout/NDI/Syphon

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Signed-off-by: Software Engineer <software-engineer@paperclip.ing>
Signed-off-by: Rafał Leszko <rafal@livepeer.org>
Co-authored-by: Software Engineer <software-engineer@paperclip.ing>
Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Rafał Leszko <rafal@livepeer.org>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 5 people

frontend/src/components/graph/nodes/SinkNode.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { Handle, Position } from "@xyflow/react";
 import type { NodeProps, Node } from "@xyflow/react";
-import { Pause, Play, Volume2, VolumeX } from "lucide-react";
+import { Maximize2, Pause, Play, Volume2, VolumeX } from "lucide-react";
 import type { FlowNodeData } from "../../../lib/graphUtils";
 import { useNodeData } from "../hooks/node/useNodeData";
 import { useNodeCollapse } from "../hooks/node/useNodeCollapse";
@@ -75,6 +75,17 @@ export function SinkNode({ id, data, selected }: NodeProps<SinkNodeType>) {
     [onPlayPauseToggle]
   );
 
+  const handleFullscreen = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    const v = videoRef.current;
+    if (!v) return;
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      v.requestFullscreen();
+    }
+  }, []);
+
   const handleY = HEADER_H + BODY_PAD + PREVIEW_H / 2;
 
   return (
@@ -139,8 +150,12 @@ export function SinkNode({ id, data, selected }: NodeProps<SinkNodeType>) {
                 `}</style>
               </div>
             ) : (
-              <div className="flex items-center justify-center h-full text-[10px] text-[#8c8c8d]">
-                No output stream
+              <div className="flex flex-col items-center justify-center h-full gap-1 text-[#8c8c8d]">
+                <span className="text-[10px]">No output stream</span>
+                <span className="text-[9px] text-[#666] text-center px-2">
+                  Resize node for a bigger preview or use Spout/NDI/Syphon for
+                  external output
+                </span>
               </div>
             )}
             {hasVideoTrack && (
@@ -160,6 +175,15 @@ export function SinkNode({ id, data, selected }: NodeProps<SinkNodeType>) {
                     )}
                   </button>
                 )}
+                <button
+                  onClick={handleFullscreen}
+                  onPointerDown={e => e.stopPropagation()}
+                  className="flex items-center justify-center bg-black/60 px-1 rounded cursor-pointer"
+                  style={{ height: 16 }}
+                  title="Fullscreen"
+                >
+                  <Maximize2 className="h-2.5 w-2.5 text-white" />
+                </button>
                 {videoSize && (
                   <span
                     className="text-[9px] text-[#8c8c8d] bg-black/60 px-1 rounded leading-none"

frontend/src/components/onboarding/InferenceModeStep.tsx

@@ -40,7 +40,7 @@ export function InferenceModeStep({ onSelect }: InferenceModeStepProps) {
         <h1 className="text-3xl font-semibold text-foreground">
           Welcome to Daydream Scope
         </h1>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-muted-foreground/70">
           How would you like to proceed?
         </p>
       </div>