fix(dev-hub): unbreak playground price feeds, format toggle, and api key copy

- Swap Pyth Pro symbols URL to the CORS-enabled history endpoint so the
  Price Feeds panel renders instead of "Failed to fetch".
- Add isolation: isolate to SingleToggleGroup's toggle button so the
  selected-state bubble paints inside its own stacking context, fixing
  the invisible JSON/Binary pill in both dark and light mode.
- Rewrite the API-key hint to invite users to paste their own key for
  unlimited streams, acknowledge the rate-limited shared demo token, and
  confirm "never stored" only when relevant. Bumps hint to 14px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: aditya520

apps/developer-hub/src/components/Pages/PlaygroundPage/PlaygroundContent.tsx

@@ -2,7 +2,6 @@
 
 import { Play, Stop } from "@phosphor-icons/react/dist/ssr";
 import { Button } from "@pythnetwork/component-library/Button";
-import { Callout } from "fumadocs-ui/components/callout";
 import { useCallback, useMemo, useRef } from "react";
 import { AccessTokenInput } from "../../Playground/AccessTokenInput";
 import { ChainSelector } from "../../Playground/ChainSelector";
@@ -68,14 +67,11 @@ export function PlaygroundContent() {
     <div className={styles.playground}>
       <section className={styles.header}>
         <div className={styles.headerContent}>
-          <h1 className={styles.title}>Pyth Pro Playground</h1>
+          <h1 className={styles.title}>Pyth Playground</h1>
           <p className={styles.subtitle}>
             Configure subscription parameters, generate code, and test real-time
             price streams.
           </p>
-          <Callout className={styles.disclaimer} type="warning">
-            This playground is for internal preview only and may contain bugs.
-          </Callout>
         </div>
       </section>
 

apps/developer-hub/src/components/Pages/PlaygroundPage/index.module.scss

@@ -30,7 +30,7 @@
 }
 
 .title {
-  @include theme.text("2xl", "semibold");
+  @include theme.text("4xl", "semibold");
 
   line-height: 120%;
   letter-spacing: theme.letter-spacing("tight");
@@ -39,7 +39,7 @@
 }
 
 .subtitle {
-  @include theme.text("sm", "normal");
+  @include theme.text("lg", "normal");
 
   line-height: 140%;
   color: theme.color("paragraph");

apps/developer-hub/src/components/Playground/AccessTokenInput/index.module.scss

@@ -50,7 +50,8 @@
 }
 
 .hint {
-  @include theme.text("xs", "normal");
+  @include theme.text("sm", "normal");
 
+  line-height: 1.4;
   color: theme.color("muted");
 }

apps/developer-hub/src/components/Playground/AccessTokenInput/index.tsx

@@ -48,17 +48,17 @@ export function AccessTokenInput({ className }: AccessTokenInputProps) {
             onChange={(event) => {
               updateConfig({ accessToken: event.target.value });
             }}
-            placeholder="Leave empty to use demo token (rate limited)"
+            placeholder="Paste your API key for unlimited streams (optional)"
             type="password"
             value={config.accessToken}
           />
         </div>
 
-        {isUsingDemoToken && (
-          <span className={styles.hint}>
-            Using demo token (rate limited for testing)
-          </span>
-        )}
+        <span className={styles.hint}>
+          {isUsingDemoToken
+            ? "Using a shared demo token — rate-limited for fair use. Paste your own API key for unlimited streams."
+            : "Using your API key — no rate limits. Sent only to authorize your stream; never stored."}
+        </span>
       </div>
     </div>
   );

apps/developer-hub/src/components/Playground/types.ts

@@ -26,7 +26,11 @@ export type PriceFeedProperty =
   | "feedUpdateTimestamp";
 
 // Update channel options
-export type Channel = "real_time" | "fixed_rate@50ms" | "fixed_rate@200ms";
+export type Channel =
+  | "real_time"
+  | "fixed_rate@50ms"
+  | "fixed_rate@200ms"
+  | "fixed_rate@1000ms";
 
 // Price feed data from the symbols API
 export type PriceFeed = {
@@ -144,6 +148,11 @@ export const CHANNEL_OPTIONS: {
     id: "fixed_rate@200ms",
     label: "Fixed 200ms",
   },
+  {
+    description: "Updates every 1 second",
+    id: "fixed_rate@1000ms",
+    label: "Fixed 1000ms",
+  },
 ];
 
 // Code language options for the code preview
@@ -186,4 +195,4 @@ export const PYTH_PRO_ENDPOINTS = [
 
 // API endpoint for symbols
 export const SYMBOLS_API_URL =
-  "https://pyth.dourolabs.app/v1/symbols";
+  "https://history.pyth-lazer.dourolabs.app/history/v1/symbols";

packages/component-library/src/SingleToggleGroup/index.module.scss

@@ -7,6 +7,7 @@
 
   .toggleButton {
     position: relative;
+    isolation: isolate;
 
     .bubble {
       position: absolute;