From 36413acd3e93f3afd640be49741958165912d533 Mon Sep 17 00:00:00 2001
From: parththakkar106 <f20200088@pilani.bits-pilani.ac.in>
Date: Mon, 20 Jul 2026 19:30:13 +0530
Subject: [PATCH] Add Download button to in-play Scripts panel

Each script in the panel can now be downloaded as an import-compatible
JSON bundle (matching the /scripts export format), so demo/server-owned
scripts can be forked into a user's own library via the Scripts page's
Import.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TEpWMjnfPqzZ13nPMoGhs5
---
 frontend/src/pages/Play.jsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Play.jsx b/frontend/src/pages/Play.jsx
index 1baa335..d09c76e 100644
--- a/frontend/src/pages/Play.jsx
+++ b/frontend/src/pages/Play.jsx
@@ -303,6 +303,22 @@ function ScriptsPanel({ advId }) {
     setScripts((prev) => prev.map((s) => (s.id === script.id ? updated : s)))
   }
 
+  // Download as an import-compatible bundle (matches /scripts export), so demo
+  // scripts can be forked into your own library via the Scripts page's Import.
+  const download = (s) => {
+    downloadJSON(
+      {
+        name: s.name,
+        description: s.description,
+        library: s.library_js,
+        input: s.input_js,
+        context: s.context_js,
+        output: s.output_js,
+      },
+      `${(s.name || 'script').replace(/\W+/g, '-')}.json`,
+    )
+  }
+
   if (!scripts) return <div className="empty">Loading…</div>
   if (scripts.length === 0) {
     return (
@@ -324,9 +340,12 @@ function ScriptsPanel({ advId }) {
                 <input type="checkbox" checked={s.enabled} onChange={() => toggle(s)} />
                 <span>{s.name}</span>
               </label>
-              <button className="linklike" onClick={() => setOpenId(open ? null : s.id)}>
-                {open ? 'Hide code' : 'View code'}
-              </button>
+              <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
+                <button className="linklike" onClick={() => setOpenId(open ? null : s.id)}>
+                  {open ? 'Hide code' : 'View code'}
+                </button>
+                <button className="linklike" onClick={() => download(s)}>Download</button>
+              </div>
             </div>
             {s.description && <div className="dim adv-script-desc">{s.description}</div>}
             {open && (