From 6e53dcc8e1551fd2fc9524ef671eb23349791807 Mon Sep 17 00:00:00 2001
From: Antonin Delpeuch <antonin@delpeuch.eu>
Date: Thu, 11 Sep 2025 23:06:34 +0200
Subject: [PATCH] fix(playground): add missing `<html>` tag

---
 crates/cli/src/playground.html | 809 +++++++++++++++++----------------
 1 file changed, 406 insertions(+), 403 deletions(-)
diff --git a/crates/cli/src/playground.html b/crates/cli/src/playground.html
index db3b6aec..6f90e030 100644
--- a/crates/cli/src/playground.html
+++ b/crates/cli/src/playground.html
@@ -1,471 +1,474 @@
-<head>
-  <meta charset="utf-8">
-  <title>tree-sitter THE_LANGUAGE_NAME</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.css">
-  <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-32x32.png"
-    sizes="32x32" />
-  <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-16x16.png"
-    sizes="16x16" />
-  <style>
-    /* Base Variables */
-    :root {
-      --light-bg: #f9f9f9;
-      --light-border: #e0e0e0;
-      --light-text: #333;
-      --light-hover-border: #c1c1c1;
-      --light-scrollbar-track: #f1f1f1;
-      --light-scrollbar-thumb: #c1c1c1;
-      --light-scrollbar-thumb-hover: #a8a8a8;
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>tree-sitter THE_LANGUAGE_NAME</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.css">
+    <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-32x32.png"
+      sizes="32x32" />
+    <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-16x16.png"
+      sizes="16x16" />
+    <style>
+      /* Base Variables */
+      :root {
+        --light-bg: #f9f9f9;
+        --light-border: #e0e0e0;
+        --light-text: #333;
+        --light-hover-border: #c1c1c1;
+        --light-scrollbar-track: #f1f1f1;
+        --light-scrollbar-thumb: #c1c1c1;
+        --light-scrollbar-thumb-hover: #a8a8a8;
 
-      --dark-bg: #1d1f21;
-      --dark-border: #2d2d2d;
-      --dark-text: #c5c8c6;
-      --dark-panel-bg: #252526;
-      --dark-code-bg: #1e1e1e;
-      --dark-scrollbar-track: #25282c;
-      --dark-scrollbar-thumb: #4a4d51;
-      --dark-scrollbar-thumb-hover: #5a5d61;
+        --dark-bg: #1d1f21;
+        --dark-border: #2d2d2d;
+        --dark-text: #c5c8c6;
+        --dark-panel-bg: #252526;
+        --dark-code-bg: #1e1e1e;
+        --dark-scrollbar-track: #25282c;
+        --dark-scrollbar-thumb: #4a4d51;
+        --dark-scrollbar-thumb-hover: #5a5d61;
 
-      --primary-color: #0550ae;
-      --primary-color-alpha: rgba(5, 80, 174, 0.1);
-      --primary-color-alpha-dark: rgba(121, 192, 255, 0.1);
-      --selection-color: rgba(39, 95, 255, 0.3);
-    }
+        --primary-color: #0550ae;
+        --primary-color-alpha: rgba(5, 80, 174, 0.1);
+        --primary-color-alpha-dark: rgba(121, 192, 255, 0.1);
+        --selection-color: rgba(39, 95, 255, 0.3);
+      }
 
-    /* Theme Colors */
-    [data-theme="dark"] {
-      --bg-color: var(--dark-bg);
-      --border-color: var(--dark-border);
-      --text-color: var(--dark-text);
-      --panel-bg: var(--dark-panel-bg);
-      --code-bg: var(--dark-code-bg);
-    }
+      /* Theme Colors */
+      [data-theme="dark"] {
+        --bg-color: var(--dark-bg);
+        --border-color: var(--dark-border);
+        --text-color: var(--dark-text);
+        --panel-bg: var(--dark-panel-bg);
+        --code-bg: var(--dark-code-bg);
+      }
 
-    [data-theme="light"] {
-      --bg-color: var(--light-bg);
-      --border-color: var(--light-border);
-      --text-color: var(--light-text);
-      --panel-bg: white;
-      --code-bg: white;
-    }
+      [data-theme="light"] {
+        --bg-color: var(--light-bg);
+        --border-color: var(--light-border);
+        --text-color: var(--light-text);
+        --panel-bg: white;
+        --code-bg: white;
+      }
 
-    /* Base Styles */
-    body {
-      margin: 0;
-      padding: 0;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background-color: var(--bg-color);
-      color: var(--text-color);
-    }
+      /* Base Styles */
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        background-color: var(--bg-color);
+        color: var(--text-color);
+      }
 
-    /* Layout */
-    #playground-container {
-      width: 100%;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      background-color: var(--bg-color);
-    }
+      /* Layout */
+      #playground-container {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--bg-color);
+      }
 
-    header {
-      padding: 16px 24px;
-      border-bottom: 1px solid var(--border-color);
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      background-color: var(--panel-bg);
-      font-size: 14px;
-    }
+      header {
+        padding: 16px 24px;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        background-color: var(--panel-bg);
+        font-size: 14px;
+      }
 
-    .header-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+      .header-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
 
-    .language-name,
-    #language-version {
-      font-weight: 600;
-    }
+      .language-name,
+      #language-version {
+        font-weight: 600;
+      }
 
-    main {
-      flex: 1;
-      display: flex;
-      overflow: hidden;
-    }
+      main {
+        flex: 1;
+        display: flex;
+        overflow: hidden;
+      }
 
-    #input-pane {
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-      border-right: 1px solid var(--border-color);
-      background-color: var(--panel-bg);
-      overflow: hidden;
-    }
+      #input-pane {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid var(--border-color);
+        background-color: var(--panel-bg);
+        overflow: hidden;
+      }
 
-    #code-container {
-      flex: 1;
-      min-height: 0;
-      position: relative;
-      border-bottom: 1px solid var(--border-color);
-      display: flex;
-      flex-direction: column;
-    }
+      #code-container {
+        flex: 1;
+        min-height: 0;
+        position: relative;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        flex-direction: column;
+      }
 
-    #query-container:not([style*="visibility: hidden"]) {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-    }
+      #query-container:not([style*="visibility: hidden"]) {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
 
-    #query-container .panel-header {
-      flex: 0 0 auto;
-    }
+      #query-container .panel-header {
+        flex: 0 0 auto;
+      }
 
-    #query-container .CodeMirror {
-      flex: 1;
-      position: relative;
-      min-height: 0;
-    }
+      #query-container .CodeMirror {
+        flex: 1;
+        position: relative;
+        min-height: 0;
+      }
 
-    #output-container-scroll {
-      width: 50%;
-      overflow: auto;
-      background-color: var(--panel-bg);
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-    }
+      #output-container-scroll {
+        width: 50%;
+        overflow: auto;
+        background-color: var(--panel-bg);
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+      }
 
-    #output-container {
-      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-      line-height: 1.5;
-      margin: 0;
-      padding: 16px;
-    }
+      #output-container {
+        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        line-height: 1.5;
+        margin: 0;
+        padding: 16px;
+      }
 
-    .panel-header {
-      padding: 8px 16px;
-      font-weight: 600;
-      font-size: 14px;
-      border-bottom: 1px solid var(--border-color);
-      background-color: var(--panel-bg);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+      .panel-header {
+        padding: 8px 16px;
+        font-weight: 600;
+        font-size: 14px;
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--panel-bg);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
 
-    .CodeMirror {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-      font-size: 14px;
-      line-height: 1.6;
-      background-color: var(--code-bg) !important;
-      color: var(--text-color) !important;
-    }
+      .CodeMirror {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100%;
+        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        font-size: 14px;
+        line-height: 1.6;
+        background-color: var(--code-bg) !important;
+        color: var(--text-color) !important;
+      }
 
-    .query-error {
-      text-decoration: underline red dashed;
-      -webkit-text-decoration: underline red dashed;
-    }
+      .query-error {
+        text-decoration: underline red dashed;
+        -webkit-text-decoration: underline red dashed;
+      }
 
-    /* Scrollbars */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
+      /* Scrollbars */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
 
-    ::-webkit-scrollbar-track {
-      border-radius: 4px;
-      background: var(--light-scrollbar-track);
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background: var(--light-scrollbar-thumb);
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--light-scrollbar-thumb-hover);
-    }
-
-    [data-theme="dark"] {
       ::-webkit-scrollbar-track {
-        background: var(--dark-scrollbar-track) !important;
+        border-radius: 4px;
+        background: var(--light-scrollbar-track);
       }
 
       ::-webkit-scrollbar-thumb {
-        background: var(--dark-scrollbar-thumb) !important;
+        border-radius: 4px;
+        background: var(--light-scrollbar-thumb);
       }
 
       ::-webkit-scrollbar-thumb:hover {
-        background: var(--dark-scrollbar-thumb-hover) !important;
-      }
-    }
-
-    /* Theme Toggle */
-    .theme-toggle {
-      background: none;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      padding: 6px;
-      cursor: pointer;
-      color: var(--text-color);
-    }
-
-    .theme-toggle:hover {
-      background-color: var(--primary-color-alpha);
-    }
-
-    [data-theme="light"] .moon-icon,
-    [data-theme="dark"] .sun-icon {
-      display: none;
-    }
-
-    /* Form Elements */
-    input[type="checkbox"] {
-      margin-right: 6px;
-      vertical-align: middle;
-    }
-
-    label {
-      font-size: 14px;
-      margin-right: 16px;
-      cursor: pointer;
-    }
-
-    #output-container a {
-      cursor: pointer;
-      text-decoration: none;
-      color: #040404;
-      padding: 2px;
-    }
-
-    #output-container a:hover {
-      text-decoration: underline;
-    }
-
-    #output-container a.node-link.named {
-      color: #0550ae;
-    }
-
-    #output-container a.node-link.anonymous {
-      color: #116329;
-    }
-
-    #output-container a.node-link.anonymous:before {
-      content: '"';
-    }
-
-    #output-container a.node-link.anonymous:after {
-      content: '"';
-    }
-
-    #output-container a.node-link.error {
-      color: #cf222e;
-    }
-
-    #output-container a.highlighted {
-      background-color: #d9d9d9;
-      color: red;
-      border-radius: 3px;
-      text-decoration: underline;
-    }
-
-    #copy-button {
-      background: none;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      padding: 6px;
-      cursor: pointer;
-      color: var(--text-color);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: 8px;
-    }
-
-    #copy-button:hover {
-      background-color: var(--primary-color-alpha);
-    }
-
-    #copy-button:focus {
-      outline: none;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 2px var(--primary-color-alpha);
-    }
-
-    .toast {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      background-color: var(--light-text);
-      color: white;
-      padding: 12px 16px;
-      border-radius: 6px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      font-size: 14px;
-      font-weight: 500;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.3s ease;
-      z-index: 1000;
-      pointer-events: none;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Dark Theme Node Colors */
-    [data-theme="dark"] {
-      & #output-container a {
-        color: #d4d4d4;
+        background: var(--light-scrollbar-thumb-hover);
       }
 
-      & #output-container a.node-link.named {
-        color: #79c0ff;
+      [data-theme="dark"] {
+        ::-webkit-scrollbar-track {
+          background: var(--dark-scrollbar-track) !important;
+        }
+
+        ::-webkit-scrollbar-thumb {
+          background: var(--dark-scrollbar-thumb) !important;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+          background: var(--dark-scrollbar-thumb-hover) !important;
+        }
       }
 
-      & #output-container a.node-link.anonymous {
-        color: #7ee787;
+      /* Theme Toggle */
+      .theme-toggle {
+        background: none;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        padding: 6px;
+        cursor: pointer;
+        color: var(--text-color);
       }
 
-      & #output-container a.node-link.error {
-        color: #ff7b72;
+      .theme-toggle:hover {
+        background-color: var(--primary-color-alpha);
       }
 
-      & #output-container a.highlighted {
-        background-color: #373b41;
+      [data-theme="light"] .moon-icon,
+      [data-theme="dark"] .sun-icon {
+        display: none;
+      }
+
+      /* Form Elements */
+      input[type="checkbox"] {
+        margin-right: 6px;
+        vertical-align: middle;
+      }
+
+      label {
+        font-size: 14px;
+        margin-right: 16px;
+        cursor: pointer;
+      }
+
+      #output-container a {
+        cursor: pointer;
+        text-decoration: none;
+        color: #040404;
+        padding: 2px;
+      }
+
+      #output-container a:hover {
+        text-decoration: underline;
+      }
+
+      #output-container a.node-link.named {
+        color: #0550ae;
+      }
+
+      #output-container a.node-link.anonymous {
+        color: #116329;
+      }
+
+      #output-container a.node-link.anonymous:before {
+        content: '"';
+      }
+
+      #output-container a.node-link.anonymous:after {
+        content: '"';
+      }
+
+      #output-container a.node-link.error {
+        color: #cf222e;
+      }
+
+      #output-container a.highlighted {
+        background-color: #d9d9d9;
         color: red;
+        border-radius: 3px;
+        text-decoration: underline;
       }
 
-      & .CodeMirror {
-        background-color: var(--dark-code-bg) !important;
-        color: var(--dark-text) !important;
+      #copy-button {
+        background: none;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        padding: 6px;
+        cursor: pointer;
+        color: var(--text-color);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 8px;
       }
 
-      & .CodeMirror-gutters {
-        background-color: var(--dark-panel-bg) !important;
-        border-color: var(--dark-border) !important;
+      #copy-button:hover {
+        background-color: var(--primary-color-alpha);
       }
 
-      & .CodeMirror-cursor {
-        border-color: var(--dark-text) !important;
+      #copy-button:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px var(--primary-color-alpha);
       }
 
-      & .CodeMirror-selected {
-        background-color: rgba(255, 255, 255, 0.1) !important;
+      .toast {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background-color: var(--light-text);
+        color: white;
+        padding: 12px 16px;
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        font-size: 14px;
+        font-weight: 500;
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.3s ease;
+        z-index: 1000;
+        pointer-events: none;
       }
 
-      & .toast {
-        background-color: var(--dark-bg);
-        color: var(--dark-text);
+      .toast.show {
+        opacity: 1;
+        transform: translateY(0);
       }
-    }
-  </style>
-</head>
 
-<body>
-  <div id="playground-container" style="visibility: hidden;">
-    <header>
-      <div class="header-item">
-        <span class="language-name">Language: THE_LANGUAGE_NAME</span>
-        <span id="language-version"></span>
-      </div>
+      /* Dark Theme Node Colors */
+      [data-theme="dark"] {
+        & #output-container a {
+          color: #d4d4d4;
+        }
 
-      <div class="header-item">
-        <input id="logging-checkbox" type="checkbox">
-        <label for="logging-checkbox">log</label>
-      </div>
+        & #output-container a.node-link.named {
+          color: #79c0ff;
+        }
 
-      <div class="header-item">
-        <input id="anonymous-nodes-checkbox" type="checkbox">
-        <label for="anonymous-nodes-checkbox">show anonymous nodes</label>
-      </div>
+        & #output-container a.node-link.anonymous {
+          color: #7ee787;
+        }
 
-      <div class="header-item">
-        <input id="query-checkbox" type="checkbox">
-        <label for="query-checkbox">query</label>
-      </div>
+        & #output-container a.node-link.error {
+          color: #ff7b72;
+        }
 
-      <div class="header-item">
-        <input id="accessibility-checkbox" type="checkbox">
-        <label for="accessibility-checkbox">accessibility</label>
-      </div>
+        & #output-container a.highlighted {
+          background-color: #373b41;
+          color: red;
+        }
 
-      <div class="header-item">
-        <label for="update-time">parse time: </label>
-        <span id="update-time"></span>
-      </div>
+        & .CodeMirror {
+          background-color: var(--dark-code-bg) !important;
+          color: var(--dark-text) !important;
+        }
 
-      <div class="header-item">
-        <a href="https://tree-sitter.github.io/tree-sitter/7-playground.html#about">(?)</a>
-      </div>
+        & .CodeMirror-gutters {
+          background-color: var(--dark-panel-bg) !important;
+          border-color: var(--dark-border) !important;
+        }
 
-      <select id="language-select" style="display: none;">
-        <option value="parser">Parser</option>
-      </select>
+        & .CodeMirror-cursor {
+          border-color: var(--dark-text) !important;
+        }
 
-      <div class="header-item">
-        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
-          <svg class="sun-icon" viewBox="0 0 24 24" width="16" height="16">
-            <path fill="currentColor"
-              d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-16a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1zm9-9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM4 12a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1z" />
-          </svg>
-          <svg class="moon-icon" viewBox="0 0 24 24" width="16" height="16">
-            <path fill="currentColor"
-              d="M12.1 22c-5.5 0-10-4.5-10-10s4.5-10 10-10c.2 0 .3 0 .5.1-1.3 1.4-2 3.2-2 5.2 0 4.1 3.4 7.5 7.5 7.5 2 0 3.8-.7 5.2-2 .1.2.1.3.1.5 0 5.4-4.5 9.7-10 9.7z" />
-          </svg>
-        </button>
-      </div>
-    </header>
+        & .CodeMirror-selected {
+          background-color: rgba(255, 255, 255, 0.1) !important;
+        }
 
-    <main>
-      <div id="input-pane">
-        <div class="panel-header">Code</div>
-        <div id="code-container">
-          <textarea id="code-input"></textarea>
+        & .toast {
+          background-color: var(--dark-bg);
+          color: var(--dark-text);
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="playground-container" style="visibility: hidden;">
+      <header>
+        <div class="header-item">
+          <span class="language-name">Language: THE_LANGUAGE_NAME</span>
+          <span id="language-version"></span>
         </div>
 
-        <div id="query-container" style="visibility: hidden; position: absolute;">
-          <div class="panel-header">Query</div>
-          <textarea id="query-input"></textarea>
+        <div class="header-item">
+          <input id="logging-checkbox" type="checkbox">
+          <label for="logging-checkbox">log</label>
         </div>
-      </div>
 
-      <div id="output-container-scroll">
-        <div class="panel-header">
-          Tree
-          <button type="button" id="copy-button" class="theme-toggle" aria-label="Copy tree">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-              stroke-linecap="round" stroke-linejoin="round">
-              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+        <div class="header-item">
+          <input id="anonymous-nodes-checkbox" type="checkbox">
+          <label for="anonymous-nodes-checkbox">show anonymous nodes</label>
+        </div>
+
+        <div class="header-item">
+          <input id="query-checkbox" type="checkbox">
+          <label for="query-checkbox">query</label>
+        </div>
+
+        <div class="header-item">
+          <input id="accessibility-checkbox" type="checkbox">
+          <label for="accessibility-checkbox">accessibility</label>
+        </div>
+
+        <div class="header-item">
+          <label for="update-time">parse time: </label>
+          <span id="update-time"></span>
+        </div>
+
+        <div class="header-item">
+          <a href="https://tree-sitter.github.io/tree-sitter/7-playground.html#about">(?)</a>
+        </div>
+
+        <select id="language-select" style="display: none;">
+          <option value="parser">Parser</option>
+        </select>
+
+        <div class="header-item">
+          <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+            <svg class="sun-icon" viewBox="0 0 24 24" width="16" height="16">
+              <path fill="currentColor"
+                d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-16a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1zm9-9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM4 12a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1z" />
+            </svg>
+            <svg class="moon-icon" viewBox="0 0 24 24" width="16" height="16">
+              <path fill="currentColor"
+                d="M12.1 22c-5.5 0-10-4.5-10-10s4.5-10 10-10c.2 0 .3 0 .5.1-1.3 1.4-2 3.2-2 5.2 0 4.1 3.4 7.5 7.5 7.5 2 0 3.8-.7 5.2-2 .1.2.1.3.1.5 0 5.4-4.5 9.7-10 9.7z" />
             </svg>
           </button>
         </div>
-        <pre id="output-container" class="highlight"></pre>
-      </div>
-    </main>
-  </div>
+      </header>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>
+      <main>
+        <div id="input-pane">
+          <div class="panel-header">Code</div>
+          <div id="code-container">
+            <textarea id="code-input"></textarea>
+          </div>
 
-  <script>LANGUAGE_BASE_URL = "";</script>
-  <script type="module" src="playground.js"></script>
-  <script type="module">
-    import * as TreeSitter from './web-tree-sitter.js';
-    window.TreeSitter = TreeSitter;
-    setTimeout(() => window.initializePlayground({local: true}), 1)
-  </script>
-</body>
+          <div id="query-container" style="visibility: hidden; position: absolute;">
+            <div class="panel-header">Query</div>
+            <textarea id="query-input"></textarea>
+          </div>
+        </div>
+
+        <div id="output-container-scroll">
+          <div class="panel-header">
+            Tree
+            <button type="button" id="copy-button" class="theme-toggle" aria-label="Copy tree">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+              </svg>
+            </button>
+          </div>
+          <pre id="output-container" class="highlight"></pre>
+        </div>
+      </main>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>
+
+    <script>LANGUAGE_BASE_URL = "";</script>
+    <script type="module" src="playground.js"></script>
+    <script type="module">
+      import * as TreeSitter from './web-tree-sitter.js';
+      window.TreeSitter = TreeSitter;
+      setTimeout(() => window.initializePlayground({local: true}), 1)
+    </script>
+  </body>
+</html>
