From ae93fadaafcbb80cd77e541c520e8405798e2c3d Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Tue, 29 Aug 2023 15:47:38 -0400
Subject: [PATCH 1/7] wip

---
 Cargo.lock                                    | 33 +++++++++++
 lib/vector-vrl/web-playground/Cargo.toml      |  4 +-
 lib/vector-vrl/web-playground/build.rs        | 57 +++++++++++++++++++
 .../web-playground/public/index.html          |  4 ++
 lib/vector-vrl/web-playground/src/lib.rs      | 14 +++++
 5 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 lib/vector-vrl/web-playground/build.rs

diff --git a/Cargo.lock b/Cargo.lock
index 9f3f552ab5424..cc3f00006e189 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1754,6 +1754,15 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "built"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b99c4cdc7b2c2364182331055623bdf45254fcb679fea565c40c3c11c101889a"
+dependencies = [
+ "cargo-lock",
+]
+
 [[package]]
 name = "bumpalo"
 version = "3.11.1"
@@ -1870,6 +1879,28 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a4f925191b4367301851c6d99b09890311d74b0d43f274c0b34c86d308a3663"
 
+[[package]]
+name = "cargo-lock"
+version = "9.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e11c675378efb449ed3ce8de78d75d0d80542fc98487c26aba28eb3b82feac72"
+dependencies = [
+ "semver 1.0.18",
+ "serde",
+ "toml 0.7.6",
+ "url",
+]
+
+[[package]]
+name = "cargo_toml"
+version = "0.15.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "599aa35200ffff8f04c1925aa1acc92fa2e08874379ef42e210a80e527e60838"
+dependencies = [
+ "serde",
+ "toml 0.7.6",
+]
+
 [[package]]
 name = "cassowary"
 version = "0.3.0"
@@ -9949,6 +9980,8 @@ dependencies = [
 name = "vector-vrl-web-playground"
 version = "0.1.0"
 dependencies = [
+ "built",
+ "cargo_toml",
  "enrichment",
  "getrandom 0.2.10",
  "gloo-utils",
diff --git a/lib/vector-vrl/web-playground/Cargo.toml b/lib/vector-vrl/web-playground/Cargo.toml
index d250fe905d37e..a00a3b54d3419 100644
--- a/lib/vector-vrl/web-playground/Cargo.toml
+++ b/lib/vector-vrl/web-playground/Cargo.toml
@@ -17,5 +17,7 @@ gloo-utils = { version = "0.2", features = ["serde"] }
 getrandom = { version = "0.2", features = ["js"] }
 vector-vrl-functions = { path = "../functions" }
 enrichment = { path = "../../enrichment" }
+built = { version = "0.6.1" }
 
-
+[build-dependencies]
+cargo_toml = "0.15.3"
diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
new file mode 100644
index 0000000000000..ccaca40644f4d
--- /dev/null
+++ b/lib/vector-vrl/web-playground/build.rs
@@ -0,0 +1,57 @@
+use cargo_toml::Manifest;
+use std::fs::File;
+use std::io::Write;
+use std::path::{Path, PathBuf};
+use std::{env, fs, io};
+
+fn get_vector_toml_path() -> PathBuf {
+    let path = fs::canonicalize(env::var("CARGO_MANIFEST_DIR").unwrap()).unwrap();
+
+    // Remove the "lib/vector-vrl/web-playground" suffix
+    let parent_path = path
+        .parent()
+        .and_then(|p| p.parent())
+        .and_then(|p| p.parent());
+    parent_path
+        .expect("Failed to find vector repo root")
+        .join("Cargo.toml")
+        .to_path_buf()
+}
+
+fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()> {
+    let mut output_file = File::create(dest_path)?;
+    output_file.write_all(
+        "// AUTOGENERATED CONSTANTS. SEE BUILD.RS AT REPOSITORY ROOT. DO NOT MODIFY.\n".as_ref(),
+    )?;
+
+    let vector_version_const = format!(
+        "pub const {}: &str = \"{}\"",
+        "VECTOR_VERSION",
+        manifest.package().version()
+    );
+    output_file
+        .write_all(vector_version_const.as_bytes())
+        .expect("Failed to write Vector version constant");
+
+    let vrl_version = &manifest
+        .dependencies
+        .get("vrl")
+        .unwrap()
+        .detail()
+        .unwrap()
+        .version()
+        .unwrap();
+    let vrl_version_const = format!("pub const {}: &str = \"{}\"", "VRL_VERSION", vrl_version);
+    output_file
+        .write_all(vector_version_const.as_bytes())
+        .expect("Failed to write Vector version constant");
+    Ok(())
+}
+
+fn main() {
+    //println!("cargo:rerun-if-changed(../../../Cargo.toml");
+    let manifest =
+        Manifest::from_path(&get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
+    let dst = std::path::Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
+    write_build_constants(&manifest, &dst).expect("Failed to write constants");
+}
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index 78ee8ea1dab84..3b4e31106e182 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -25,6 +25,10 @@
     <div id="App">
       <div id="summary-section">
         <h1>VRL Playground</h1>
+        <p id="version-paragraph"></p>
+        <script>
+          document.getElementById("version-paragraph").innerText = "VRL Version: " + vrlPlayground.version();
+        </script>
         <p>
           <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
           observability data. This playground lets you write a program, run it against an event or
diff --git a/lib/vector-vrl/web-playground/src/lib.rs b/lib/vector-vrl/web-playground/src/lib.rs
index f7f8a5aa8ce60..6e132ad952494 100644
--- a/lib/vector-vrl/web-playground/src/lib.rs
+++ b/lib/vector-vrl/web-playground/src/lib.rs
@@ -10,6 +10,10 @@ use vrl::value::Secrets;
 use vrl::value::Value;
 use wasm_bindgen::prelude::*;
 
+// pub mod vector_built_info {
+//     include!(concat!(env!("OUT_DIR"), "/vector_built.rs"));
+// }
+
 #[derive(Serialize, Deserialize)]
 pub struct Input {
     pub program: String,
@@ -110,3 +114,13 @@ pub fn run_vrl(incoming: &JsValue) -> JsValue {
         Err(err) => JsValue::from_serde(&err).unwrap(),
     }
 }
+
+#[wasm_bindgen]
+pub fn vector_version() -> String {
+    "".to_string()
+}
+
+#[wasm_bindgen]
+pub fn vrl_version() -> String {
+    "".to_string()
+}

From b12522135a28e6515a0a30f58a114ff2eed4e448 Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Tue, 29 Aug 2023 15:51:26 -0400
Subject: [PATCH 2/7] wip

---
 lib/vector-vrl/web-playground/build.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
index ccaca40644f4d..b6997634f20a5 100644
--- a/lib/vector-vrl/web-playground/build.rs
+++ b/lib/vector-vrl/web-playground/build.rs
@@ -39,7 +39,7 @@ fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()
         .unwrap()
         .detail()
         .unwrap()
-        .version()
+        .version
         .unwrap();
     let vrl_version_const = format!("pub const {}: &str = \"{}\"", "VRL_VERSION", vrl_version);
     output_file

From 115ce869b9f2ef7bdf388498429041753a12cf78 Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Tue, 29 Aug 2023 16:00:28 -0400
Subject: [PATCH 3/7] read versions from built.rs

---
 Cargo.lock                                    | 22 -------------------
 lib/vector-vrl/web-playground/Cargo.toml      |  1 -
 lib/vector-vrl/web-playground/build.rs        | 19 ++++++++--------
 .../web-playground/public/index.html          |  6 ++---
 lib/vector-vrl/web-playground/public/index.js |  8 ++++++-
 .../web-playground/public/package.json        |  6 +++--
 lib/vector-vrl/web-playground/src/lib.rs      | 10 ++++-----
 7 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index cc3f00006e189..7d11e144a63db 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1754,15 +1754,6 @@ dependencies = [
  "serde",
 ]
 
-[[package]]
-name = "built"
-version = "0.6.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b99c4cdc7b2c2364182331055623bdf45254fcb679fea565c40c3c11c101889a"
-dependencies = [
- "cargo-lock",
-]
-
 [[package]]
 name = "bumpalo"
 version = "3.11.1"
@@ -1879,18 +1870,6 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a4f925191b4367301851c6d99b09890311d74b0d43f274c0b34c86d308a3663"
 
-[[package]]
-name = "cargo-lock"
-version = "9.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e11c675378efb449ed3ce8de78d75d0d80542fc98487c26aba28eb3b82feac72"
-dependencies = [
- "semver 1.0.18",
- "serde",
- "toml 0.7.6",
- "url",
-]
-
 [[package]]
 name = "cargo_toml"
 version = "0.15.3"
@@ -9980,7 +9959,6 @@ dependencies = [
 name = "vector-vrl-web-playground"
 version = "0.1.0"
 dependencies = [
- "built",
  "cargo_toml",
  "enrichment",
  "getrandom 0.2.10",
diff --git a/lib/vector-vrl/web-playground/Cargo.toml b/lib/vector-vrl/web-playground/Cargo.toml
index a00a3b54d3419..9bf8aa8e68baa 100644
--- a/lib/vector-vrl/web-playground/Cargo.toml
+++ b/lib/vector-vrl/web-playground/Cargo.toml
@@ -17,7 +17,6 @@ gloo-utils = { version = "0.2", features = ["serde"] }
 getrandom = { version = "0.2", features = ["js"] }
 vector-vrl-functions = { path = "../functions" }
 enrichment = { path = "../../enrichment" }
-built = { version = "0.6.1" }
 
 [build-dependencies]
 cargo_toml = "0.15.3"
diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
index b6997634f20a5..0ae318ef14948 100644
--- a/lib/vector-vrl/web-playground/build.rs
+++ b/lib/vector-vrl/web-playground/build.rs
@@ -24,11 +24,10 @@ fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()
         "// AUTOGENERATED CONSTANTS. SEE BUILD.RS AT REPOSITORY ROOT. DO NOT MODIFY.\n".as_ref(),
     )?;
 
-    let vector_version_const = format!(
-        "pub const {}: &str = \"{}\"",
-        "VECTOR_VERSION",
-        manifest.package().version()
-    );
+    let create_const_statement =
+        |name, value| format!("pub const {}: &str = \"{}\";\n", name, value);
+    // TODO: For releases, we should use the manifest.package().version().
+    let vector_version_const = create_const_statement("VECTOR_VERSION", "master");
     output_file
         .write_all(vector_version_const.as_bytes())
         .expect("Failed to write Vector version constant");
@@ -40,18 +39,18 @@ fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()
         .detail()
         .unwrap()
         .version
+        .clone()
         .unwrap();
-    let vrl_version_const = format!("pub const {}: &str = \"{}\"", "VRL_VERSION", vrl_version);
+    let vrl_version_const = create_const_statement("VRL_VERSION", vrl_version);
     output_file
-        .write_all(vector_version_const.as_bytes())
+        .write_all(vrl_version_const.as_bytes())
         .expect("Failed to write Vector version constant");
     Ok(())
 }
 
 fn main() {
-    //println!("cargo:rerun-if-changed(../../../Cargo.toml");
     let manifest =
-        Manifest::from_path(&get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
-    let dst = std::path::Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
+        Manifest::from_path(get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
+    let dst = Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
     write_build_constants(&manifest, &dst).expect("Failed to write constants");
 }
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index 3b4e31106e182..81e240870c3f4 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -25,10 +25,8 @@
     <div id="App">
       <div id="summary-section">
         <h1>VRL Playground</h1>
-        <p id="version-paragraph"></p>
-        <script>
-          document.getElementById("version-paragraph").innerText = "VRL Version: " + vrlPlayground.version();
-        </script>
+        <p id="vector-version"></p>
+        <p id="vrl-version"></p>
         <p>
           <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
           observability data. This playground lets you write a program, run it against an event or
diff --git a/lib/vector-vrl/web-playground/public/index.js b/lib/vector-vrl/web-playground/public/index.js
index 9ffa959c7de5c..768389b7db3ce 100644
--- a/lib/vector-vrl/web-playground/public/index.js
+++ b/lib/vector-vrl/web-playground/public/index.js
@@ -1,4 +1,4 @@
-import init, { run_vrl } from "./pkg/vector_vrl_web_playground.js";
+import init, { run_vrl, vrl_version, vector_version } from "./pkg/vector_vrl_web_playground.js";
 import { vrlLanguageDefinition, vrlThemeDefinition } from "./vrl-highlighter.js";
 
 const PROGRAM_EDITOR_DEFAULT_VALUE = `# Remove some fields
@@ -38,6 +38,12 @@ export class VrlWebPlayground {
     constructor() {
         let temp = init().then(() => {
             this.run_vrl = run_vrl;
+
+            window.onload = function() {
+                document.getElementById("vector-version").innerText = "Vector Version: " + vector_version();
+                document.getElementById("vrl-version").innerText = "VRL Version: " + vrl_version();
+            };
+
             // require is provided by loader.min.js.
             require.config({
                 paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs" },
diff --git a/lib/vector-vrl/web-playground/public/package.json b/lib/vector-vrl/web-playground/public/package.json
index fc6889020fde3..db1aac7ea1845 100644
--- a/lib/vector-vrl/web-playground/public/package.json
+++ b/lib/vector-vrl/web-playground/public/package.json
@@ -8,5 +8,7 @@
   ],
   "module": "vector_vrl_web_playground.js",
   "types": "vector_vrl_web_playground.d.ts",
-  "sideEffects": false
-}
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}
\ No newline at end of file
diff --git a/lib/vector-vrl/web-playground/src/lib.rs b/lib/vector-vrl/web-playground/src/lib.rs
index 6e132ad952494..51a23cacfbd9b 100644
--- a/lib/vector-vrl/web-playground/src/lib.rs
+++ b/lib/vector-vrl/web-playground/src/lib.rs
@@ -10,9 +10,9 @@ use vrl::value::Secrets;
 use vrl::value::Value;
 use wasm_bindgen::prelude::*;
 
-// pub mod vector_built_info {
-//     include!(concat!(env!("OUT_DIR"), "/vector_built.rs"));
-// }
+pub mod built_info {
+    include!(concat!(env!("OUT_DIR"), "/built.rs"));
+}
 
 #[derive(Serialize, Deserialize)]
 pub struct Input {
@@ -117,10 +117,10 @@ pub fn run_vrl(incoming: &JsValue) -> JsValue {
 
 #[wasm_bindgen]
 pub fn vector_version() -> String {
-    "".to_string()
+    built_info::VECTOR_VERSION.to_string()
 }
 
 #[wasm_bindgen]
 pub fn vrl_version() -> String {
-    "".to_string()
+    built_info::VRL_VERSION.to_string()
 }

From 7d27537d3ed5ee32879ef64a4129c83a1a0a1811 Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Wed, 30 Aug 2023 11:30:33 -0400
Subject: [PATCH 4/7] create headers grid

---
 .../web-playground/public/index.css           | 101 ++++++++++--------
 .../web-playground/public/index.html          |  28 +++--
 lib/vector-vrl/web-playground/public/index.js |  10 +-
 .../web-playground/public/package.json        |  14 ---
 4 files changed, 77 insertions(+), 76 deletions(-)
 delete mode 100644 lib/vector-vrl/web-playground/public/package.json

diff --git a/lib/vector-vrl/web-playground/public/index.css b/lib/vector-vrl/web-playground/public/index.css
index 02eecc7c28338..f8c2897ed8f55 100644
--- a/lib/vector-vrl/web-playground/public/index.css
+++ b/lib/vector-vrl/web-playground/public/index.css
@@ -3,36 +3,53 @@ body {
     margin-left: 2vw;
 }
 
-div#App {
-    display: grid;
-    width: 100%;
-    height: 100%;
-    /* the app will have two columns, one for input
-  one for output, left and right */
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 15vh 1vh 75vh;
-    grid-gap: 1rem;
-  }
+.headers-grid {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: repeat(2, 85px);
+  gap: 10px;
+  font-family: "Helvetica Neue", serif;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+}
 
-  div#summary-section {
-    display: grid;
-    grid-row: 1;
-    grid-template-rows: 35% 65%;
-    width: 100%;
-    font-size: 1vw;
-    grid-gap: 1vw;
-  }
+.headers-grid-item {
+  background-color: #e8e1f1;
+  padding: 0 60px; /* Horizontal padding */
+  border-radius: 10px;
+  border: none;
+  display: grid;
+  /*place-items: center;*/
+  align-items: center;
+  justify-content: center;
+}
 
-  div#summary-section p{
-    font-size: .9vw;
-  }
+#description-cell {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  display: grid;
+  font-size: large;
+}
 
-  div#toolbar-section {
-    display: grid;
-    grid-row: 2;
-    grid-column: 1 / span 2;
-    grid-template-columns: repeat(8, 1fr);
-  }
+div#App {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  /* the app will have two columns, one for input
+one for output, left and right */
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr 18fr;
+  grid-gap: 1rem;
+}
+
+div#toolbar-section {
+  padding-top: 30px;
+  display: grid;
+  grid-row: 1;
+  grid-column: 1 / span 2;
+  grid-template-columns: 2fr 1fr 2fr 6fr
+}
 
   #toolbar-section #run-code-btn {
     grid-column: 1;
@@ -46,7 +63,7 @@ div#App {
   div#input-section {
     display: grid;
     grid-column: 1;
-    grid-row: 3;
+    grid-row: 2;
     overflow: hidden;
   }
 
@@ -59,6 +76,8 @@ div#App {
   #input-section #cell #input-cell-title {
     height: 100%;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
   }
 
   #input-section #cell #container-program {
@@ -69,8 +88,8 @@ div#App {
   div#output-section {
     display: grid;
     grid-column: 2;
-    grid-row: 3;
-    grid-template-rows: 50% 50%;
+    grid-row: 2;
+    grid-template-rows: 35% 65%;
     overflow: hidden;
   }
 
@@ -87,6 +106,8 @@ div#App {
   #output-section #event-cell #event-cell-title {
     display: grid;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
   }
 
   #output-section #event-cell #container-event {
@@ -106,6 +127,8 @@ div#App {
   #output-section #output-cell #output-cell-title {
     display: grid;
     grid-row: 1;
+    font-weight: bold;
+    font-family: "Helvetica Neue", serif;
   }
 
   #output-section #output-cell #container-output {
@@ -164,27 +187,13 @@ div#App {
         height: 100%;
         /* the app will have multiple rows
         stacking each section on top of each other */
-        grid-template-rows: 20vh 25vh 10vh 50vh;
+        grid-template-rows: 20vh 10vh 50vh;
         grid-template-columns: 100%;
       }
 
-      div#summary-section {
-        display: grid;
-        grid-row: 1;
-        grid-template-rows: 20% 80%;
-        width: 100%;
-        font-size: 1.5vh;
-        grid-gap: 2vw;
-      }
-
-      div#summary-section p {
-        grid-row: 2;
-        font-size: 2vh;
-      }
-
       div#toolbar-section {
         display: grid;
-        grid-row: 3;
+        grid-row: 1;
         grid-column: 1;
         grid-template-columns: 100%;
         grid-template-rows: repeat(2, 1fr);
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index 81e240870c3f4..c7c70715bc963 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -22,21 +22,27 @@
   </head>
 
   <body>
-    <div id="App">
-      <div id="summary-section">
+    <div class="headers-grid">
+      <div class="headers-grid-item">
         <h1>VRL Playground</h1>
-        <p id="vector-version"></p>
-        <p id="vrl-version"></p>
-        <p>
-          <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
-          observability data. This playground lets you write a program, run it against an event or
-          events, share it, and see how the events are transformed.
-        </p>
       </div>
+      <div class="headers-grid-item" id="description-cell">
+          <p id="description-paragraph" >
+            <a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
+            observability data. This playground lets you write a program, run it against an event or
+            events, share it, and see how the events are transformed.
+          </p>
+      </div>
+      <div class="headers-grid-item">
+        <h4 id="versions-header"></h4>
+      </div>
+    </div>
+    <div id="App">
+
 
       <div id="toolbar-section">
-        <button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">run code</button>
-        <button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">share code</button>
+        <button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
+        <button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
       </div>
 
       <div id="input-section">
diff --git a/lib/vector-vrl/web-playground/public/index.js b/lib/vector-vrl/web-playground/public/index.js
index 768389b7db3ce..f2cc69dbd1504 100644
--- a/lib/vector-vrl/web-playground/public/index.js
+++ b/lib/vector-vrl/web-playground/public/index.js
@@ -38,11 +38,8 @@ export class VrlWebPlayground {
     constructor() {
         let temp = init().then(() => {
             this.run_vrl = run_vrl;
-
-            window.onload = function() {
-                document.getElementById("vector-version").innerText = "Vector Version: " + vector_version();
-                document.getElementById("vrl-version").innerText = "VRL Version: " + vrl_version();
-            };
+            this.vector_version = vector_version();
+            this.vrl_version = vrl_version();
 
             // require is provided by loader.min.js.
             require.config({
@@ -86,6 +83,9 @@ export class VrlWebPlayground {
                         this.outputEditor.setValue(`Error reading the shared URL\n${e}`);
                     }
                 }
+
+                document.getElementById('versions-header').innerText =
+                        "Vector Version: " + vector_version() + "\nVRL Version: " + vrl_version();
             });
         });
     }
diff --git a/lib/vector-vrl/web-playground/public/package.json b/lib/vector-vrl/web-playground/public/package.json
deleted file mode 100644
index db1aac7ea1845..0000000000000
--- a/lib/vector-vrl/web-playground/public/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "vector-vrl-web-playground",
-  "version": "0.1.0",
-  "files": [
-    "vector_vrl_web_playground_bg.wasm",
-    "vector_vrl_web_playground.js",
-    "vector_vrl_web_playground.d.ts"
-  ],
-  "module": "vector_vrl_web_playground.js",
-  "types": "vector_vrl_web_playground.d.ts",
-  "sideEffects": [
-    "./snippets/*"
-  ]
-}
\ No newline at end of file

From dc69ffdc0a083eab15ae5416d7ae8c5fd5cd14b4 Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Wed, 30 Aug 2023 12:03:51 -0400
Subject: [PATCH 5/7] add link to github issue

---
 lib/vector-vrl/web-playground/build.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
index 0ae318ef14948..2162a604467ab 100644
--- a/lib/vector-vrl/web-playground/build.rs
+++ b/lib/vector-vrl/web-playground/build.rs
@@ -27,6 +27,7 @@ fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()
     let create_const_statement =
         |name, value| format!("pub const {}: &str = \"{}\";\n", name, value);
     // TODO: For releases, we should use the manifest.package().version().
+    // https://github.com/vectordotdev/vector/issues/18425
     let vector_version_const = create_const_statement("VECTOR_VERSION", "master");
     output_file
         .write_all(vector_version_const.as_bytes())

From bcf3396e3e66da15235c672639a35d1d5cde4d5c Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Wed, 30 Aug 2023 12:32:59 -0400
Subject: [PATCH 6/7] button tweaks

---
 .../web-playground/public/index.css           | 76 ++++++++++---------
 .../web-playground/public/index.html          |  4 +-
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/lib/vector-vrl/web-playground/public/index.css b/lib/vector-vrl/web-playground/public/index.css
index f8c2897ed8f55..f88bb80ee5acd 100644
--- a/lib/vector-vrl/web-playground/public/index.css
+++ b/lib/vector-vrl/web-playground/public/index.css
@@ -15,9 +15,9 @@ body {
 }
 
 .headers-grid-item {
-  background-color: #e8e1f1;
+  background-color: #dfd8ec;
   padding: 0 60px; /* Horizontal padding */
-  border-radius: 10px;
+  border-radius: 4px;
   border: none;
   display: grid;
   /*place-items: center;*/
@@ -33,6 +33,7 @@ body {
 }
 
 div#App {
+
   display: grid;
   width: 100%;
   height: 100%;
@@ -48,15 +49,19 @@ div#toolbar-section {
   display: grid;
   grid-row: 1;
   grid-column: 1 / span 2;
-  grid-template-columns: 2fr 1fr 2fr 6fr
+  grid-template-columns: 2fr 2fr 6fr;
+  grid-gap: 1rem;
+  align-items: center;
 }
 
   #toolbar-section #run-code-btn {
     grid-column: 1;
+    height: 40px;
   }
 
   #toolbar-section #share-code-btn {
-    grid-column: 3;
+    grid-column: 2;
+    height: 40px;
   }
 
   /* input pane */
@@ -129,6 +134,7 @@ div#toolbar-section {
     grid-row: 1;
     font-weight: bold;
     font-family: "Helvetica Neue", serif;
+    height: 50px;
   }
 
   #output-section #output-cell #container-output {
@@ -143,39 +149,41 @@ div#toolbar-section {
       Segoe UI Symbol, Noto Color Emoji;
   }
 
-  .btn-primary {
-    display: inline-block;
-    outline: 0;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 13px;
-    height: 30px;
-    background-color: #9147ff;
-    color: white;
-    padding: 0 20px;
-  }
+/*  BUTTONS */
+.btn {
+  display: inline-block;
+  outline: 0;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 13px;
+  height: 30px;
+  padding: 0 20px;
+}
 
-  .btn-primary:hover {
-    background-color: #772ce8;
-  }
+.btn:active {
+  box-shadow: 0 4px #666;
+  transform: translateY(2px);
+}
 
-  .btn-secondary {
-    display: inline-block;
-    outline: 0;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 13px;
-    height: 30px;
-    background-color: #0000001a;
-    color: #000000;
-    padding: 0 20px;
-  }
+.btn-primary {
+  background-color: #9147ff;
+  color: white;
+}
 
-  .btn-secondary:hover {
-    background-color: #dcdcdc;
-  }
+.btn-primary:hover {
+  background-color: #6a1ae1;
+}
+
+.btn-secondary {
+  background-color: #0000001a;
+  color: #000000;
+}
+
+.btn-secondary:hover {
+  background-color: #c0bdbd;
+}
+/* END OF BUTTONS */
 
 /* Portrait and Landscape */
 @media only screen
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index c7c70715bc963..6923c3fead8f0 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -41,8 +41,8 @@ <h4 id="versions-header"></h4>
 
 
       <div id="toolbar-section">
-        <button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
-        <button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
+        <button id="run-code-btn" class="btn btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
+        <button id="share-code-btn" class="btn btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
       </div>
 
       <div id="input-section">

From b421763f68217d6904ec2b6680a0f93c4a5b67f3 Mon Sep 17 00:00:00 2001
From: Pavlos Rontidis <pavlos.rontidis@gmail.com>
Date: Wed, 30 Aug 2023 15:28:40 -0400
Subject: [PATCH 7/7] tweak header height (shortened)

---
 .../web-playground/public/index.css           | 25 ++++++++-----------
 .../web-playground/public/index.html          |  8 +++---
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/lib/vector-vrl/web-playground/public/index.css b/lib/vector-vrl/web-playground/public/index.css
index f88bb80ee5acd..bc3b1e7a3e491 100644
--- a/lib/vector-vrl/web-playground/public/index.css
+++ b/lib/vector-vrl/web-playground/public/index.css
@@ -5,8 +5,8 @@ body {
 
 .headers-grid {
   display: grid;
-  grid-template-columns: 2fr 3fr;
-  grid-template-rows: repeat(2, 85px);
+  grid-template-columns: 3fr 2fr 7fr;
+  grid-template-rows: 90px;
   gap: 10px;
   font-family: "Helvetica Neue", serif;
   width: 100%;
@@ -16,32 +16,30 @@ body {
 
 .headers-grid-item {
   background-color: #dfd8ec;
-  padding: 0 60px; /* Horizontal padding */
+  padding: 5px 10px;
   border-radius: 4px;
   border: none;
   display: grid;
-  /*place-items: center;*/
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 
 #description-cell {
-  grid-column: 2;
-  grid-row: 1 / span 2;
+  grid-column: 3;
   display: grid;
-  font-size: large;
 }
 
 div#App {
-
+  padding-top: 5px;
   display: grid;
   width: 100%;
   height: 100%;
-  /* the app will have two columns, one for input
-one for output, left and right */
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr 18fr;
   grid-gap: 1rem;
+  resize: both;
+  overflow: hidden;
 }
 
 div#toolbar-section {
@@ -74,7 +72,7 @@ div#toolbar-section {
 
   #input-section #cell {
     display: grid;
-    grid-template-rows: 6% 94%;
+    grid-template-rows: 4% 96%;
     overflow: hidden;
   }
 
@@ -94,8 +92,7 @@ div#toolbar-section {
     display: grid;
     grid-column: 2;
     grid-row: 2;
-    grid-template-rows: 35% 65%;
-    overflow: hidden;
+    grid-template-rows: 30% 60%;
   }
 
   /* event pane */
@@ -124,7 +121,7 @@ div#toolbar-section {
   /* output pane */
   #output-section #output-cell {
     display: grid;
-    grid-template-rows: 12% 88%;
+    grid-template-rows: 6% 94%;
     grid-row: 2;
     height: 100%;
   }
diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
index 6923c3fead8f0..614c18c496daf 100644
--- a/lib/vector-vrl/web-playground/public/index.html
+++ b/lib/vector-vrl/web-playground/public/index.html
@@ -24,7 +24,10 @@
   <body>
     <div class="headers-grid">
       <div class="headers-grid-item">
-        <h1>VRL Playground</h1>
+        <h2>VRL Playground</h2>
+      </div>
+      <div class="headers-grid-item">
+        <h4 id="versions-header"></h4>
       </div>
       <div class="headers-grid-item" id="description-cell">
           <p id="description-paragraph" >
@@ -33,9 +36,6 @@ <h1>VRL Playground</h1>
             events, share it, and see how the events are transformed.
           </p>
       </div>
-      <div class="headers-grid-item">
-        <h4 id="versions-header"></h4>
-      </div>
     </div>
     <div id="App">