Add Multi-Camera Workspace overlay with draggable grid and multiplexed camera streams

[Copilot]

Dreamview lacked a way to view multiple camera topics simultaneously. This adds a full-screen overlay workspace that supports per-topic camera streams in a draggable/resizable grid, with clean enter/exit lifecycle transitions.

New components

• MultiCameraWorkspace (src/components/MultiCameraWorkspace/index.js) — Full-screen overlay built on react-grid-layout. Handles onEnter (saves showPointCloud state, disables 3D rendering, subscribes to topics) and onExit (unsubscribes, restores 3D rendering). Dismisses on Escape key. Grid width tracks window resize via @observable windowWidth.
• CameraCard — Per-stream tile rendering topic name, live <img> (declarative, React-managed), and a Close button. Closing the last card automatically exits the workspace.
• MultiCameraWorkspaceStore (src/store/multi_camera_workspace.js) — MobX store exposing open(topics), close(), toggleWorkspace(topics), addTopic, removeTopic.

Data stream multiplexing

MultiTopicSubscriber (src/store/websocket/websocket_multi_camera.js) wraps the existing CAMERA_WS and sends a single batch message for all selected topics:

// onEnter
subscriber.subscribeTopics(['/apollo/sensor/front_6mm/image', ...]);

// per-frame callback registered per topic
subscriber.onFrame(topic, action((src) => { imageMap.set(topic, src); }));

// onExit
subscriber.unsubscribeAll(); // sends UnsubscribeFromTopics, removes listener

Backend message protocol:

• SubscribeToTopics { type, data: { topics[] } }
• UnsubscribeFromTopics { type, data: { topics[] } }
• Incoming frames expected as { topic, image } JSON on the camera WebSocket.

Wiring

• DreamviewStore gains @observable multiCameraWorkspace = new MultiCameraWorkspaceStore().
• Dreamview.js conditionally renders <MultiCameraWorkspace /> when multiCameraWorkspace.isOpen.
• react-grid-layout@^1.4.4 added as a dependency (no known vulnerabilities).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/_temp/ghcca-node/node/bin/npm install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay</issue_title>
<issue_description>Task: Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay.

1. Window Management (React):

• Requirement: Use react-grid-layout to create a draggable and resizable grid container.
• Component: Create a CameraCard component that encapsulates the video stream, topic name, and a "Close" button.
• State: Use a local LayoutConfig to save the positions of windows during the session.

2. Data Stream Multiplexing:

• Logic: When this workspace is active, initialize a MultiTopicSubscriber.
• Action: It should send a batch "Subscribe" message to the Dreamview backend for all selected camera topics.
• Format: Render each stream using canvas or img tags optimized for base64/binary JPEG strings.

3. Transition Logic:

• Requirement: Provide a toggleWorkspace function.
• Behavior: * onEnter: Save current Dreamview state -> Disable 3D cloud rendering -> Open Workspace.
• onExit: Unsubscribe from extra cameras -> Enable 3D cloud rendering -> Close Workspace.
  </issue_description>

<agent_instructions>Task: Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay.

1. Window Management (React):

• Requirement: Use react-grid-layout to create a draggable and resizable grid container.
• Component: Create a CameraCard component that encapsulates the video stream, topic name, and a "Close" button.
• State: Use a local LayoutConfig to save the positions of windows during the session.

2. Data Stream Multiplexing:

• Logic: When this workspace is active, initialize a MultiTopicSubscriber.
• Action: It should send a batch "Subscribe" message to the Dreamview backend for all selected camera topics.
• Format: Render each stream using canvas or img tags optimized for base64/binary JPEG strings.

3. Transition Logic:

• Requirement: Provide a toggleWorkspace function.
• Behavior: * onEnter: Save current Dreamview state -> Disable 3D cloud rendering -> Open Workspace.
• onExit: Unsubscribe from extra cameras -> Enable 3D cloud rendering -> Close Workspace.
  </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Design a "Multi-Camera Workspace" component for Apollo Dreamview that operates as a separate full-screen overlay #7

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.