@bestcodetools/graphql-playground 0.0.0

package/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.github
+.vscode
+coverage
+npm-debug.log
+Dockerfile*

package/.github/workflows/docker-publish.yml

@@ -0,0 +1,48 @@
+name: Docker Image
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: douglasdomingues/graphql-playground
+          tags: |
+            type=raw,value=latest
+            type=ref,event=tag
+
+      - name: Build and push multi-arch image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,22 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+      - run: npm ci
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/Dockerfile

@@ -0,0 +1,28 @@
+FROM node:22-bookworm-slim AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY tsconfig.json ./
+COPY src ./src
+COPY public ./public
+
+RUN npm run build
+
+FROM node:22-bookworm-slim AS runtime
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PLAYGROUND_PORT=3000
+ENV PLAYGROUND_LIVE_RELOAD=false
+
+COPY package*.json ./
+RUN npm install --omit=dev
+
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/public ./public
+
+EXPOSE 3000
+
+CMD ["node", "dist/standalone.js"]

package/README.md

@@ -0,0 +1,110 @@
+# GraphQL Playground
+
+A standalone GraphQL Playground package with a custom dark UI, schema explorer, smart editors, workspace import/export, and Docker support.
+
+## What This Package Is For
+
+This package serves a browser-based GraphQL playground that helps developers:
+
+- write and run GraphQL queries, mutations, and subscriptions
+- inspect the schema in a side panel
+- edit variables and headers with guided autocomplete
+- view formatted JSON responses with syntax highlighting
+- save, import, and export full workspaces with multiple tabs
+
+It is designed to be embedded into an Express application or run as a standalone local server.
+
+## Features
+
+- standalone Express server for quick local usage
+- custom schema viewer with search and hover details
+- query editor with GraphQL autocomplete and inline tooltips
+- variables editor with schema-aware suggestions
+- headers editor with common header suggestions
+- response viewer with JSON syntax highlighting
+- multi-tab workspace with import/export support
+- Docker image support for a compiled runtime
+
+## Installation
+
+```bash
+npm install @bestcodetools/graphql-playground
+```
+
+## Standalone Usage
+
+For development:
+
+```bash
+npm run standalone
+```
+
+The playground will be available at:
+
+```text
+http://localhost:3000/playground
+```
+
+You can change the port with:
+
+```bash
+PLAYGROUND_PORT=4000 npm run standalone
+```
+
+## Compiled Runtime
+
+To run the compiled standalone server without `ts-node-dev`:
+
+```bash
+npm run build
+npm start
+```
+
+## Docker Usage
+
+Build the image:
+
+```bash
+docker build -t graphql-playground .
+```
+
+Run the container:
+
+```bash
+docker run -p 3000:3000 graphql-playground
+```
+
+Then open:
+
+```text
+http://localhost:3000/playground
+```
+
+## Available Scripts
+
+- `npm run standalone`: starts the standalone server with `ts-node-dev`
+- `npm run build`: transpiles TypeScript into `dist`
+- `npm start`: runs the transpiled standalone server
+- `npm test`: runs the Jest test suite
+- `npm run transpile:sass:watch`: watches and transpiles Sass files
+
+## Testing
+
+This package includes a basic integration test for the standalone server.
+
+Run:
+
+```bash
+npm test
+```
+
+The test verifies that the standalone server starts on an automatically assigned port and responds with `200` on the configured playground path.
+
+## Notes
+
+- The standalone runtime disables live reload in production mode.
+- Workspace export sanitizes sensitive header values such as authorization, token, and key headers by replacing them with placeholders.
+
+## License
+
+ISC

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/tests'],
+  testMatch: ['**/*.test.ts'],
+  moduleFileExtensions: ['ts', 'js', 'json'],
+  clearMocks: true
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@bestcodetools/graphql-playground",
+  "version": "0.0.0",
+  "description": "A standalone GraphQL Playground package with a custom dark UI, schema explorer, smart editors, workspace import/export, and Docker support.",
+  "keywords": [],
+  "homepage": "https://github.com/BestCodeTools/graphql-playground#readme",
+  "bugs": {
+    "url": "https://github.com/BestCodeTools/graphql-playground/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BestCodeTools/graphql-playground.git"
+  },
+  "license": "ISC",
+  "author": "BestCodeTools",
+  "type": "commonjs",
+  "main": "index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "tsc --outDir dist",
+    "start": "node dist/standalone.js",
+    "standalone": "ts-node-dev --transpile-only src/standalone.ts",
+    "transpile:sass:watch": "sass --watch public/styles:public/styles",
+    "test": "jest"
+  },
+  "dependencies": {
+    "express": "^4.21.2"
+  },
+  "devDependencies": {
+    "@types/connect-livereload": "^0.6.3",
+    "@types/express": "^5.0.0",
+    "@types/jest": "^29.5.14",
+    "@types/livereload": "^0.9.5",
+    "@types/node": "^22.13.4",
+    "connect-livereload": "^0.6.1",
+    "jest": "^29.7.0",
+    "livereload": "^0.9.3",
+    "sass": "^1.85.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/components/config-editor.html

@@ -0,0 +1,38 @@
+<div class="config-tabs">
+  <div class="tab-item" ng-repeat="tab in $ctrl.tabs track by tab.id"
+       ng-class="{ 'active': $ctrl.activeTab === tab.id }"
+       ng-click="$ctrl.setActiveTab(tab.id)">
+    {{ $ctrl.t(tab.titleKey) }}
+  </div>
+</div>
+<div class="config-content">
+  <div ng-if="$ctrl.activeTab === 'headers'">
+    <h3>{{ $ctrl.t('config.shared_headers') }}</h3>
+    <table class="headers-table">
+      <thead>
+        <tr>
+          <th class="property-name">{{ $ctrl.t('config.property') }}</th>
+          <th class="property-value">{{ $ctrl.t('config.value') }}</th>
+          <th class="remove-action"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="header in $ctrl.headers">
+          <td class="property-name"><input placeholder="{{ $ctrl.t('config.key_placeholder') }}" type="text" ng-model="header.key"></td>
+          <td class="property-value"><input placeholder="{{ $ctrl.t('config.value_placeholder') }}" type="text" ng-model="header.value"></td>
+          <td class="remove-action"><button ng-click="$ctrl.removeHeader($index)">🗑️</button></td>
+        </tr>
+      </tbody>
+    </table>
+    <button ng-click="$ctrl.addHeader()">{{ $ctrl.t('config.add_header') }}</button>
+  </div>
+  <div ng-if="$ctrl.activeTab === 'other'">
+    <h3>{{ $ctrl.t('config.other') }}</h3>
+    <p class="workspace-actions-note">{{ $ctrl.getWorkspaceLabel('note') }}</p>
+    <div class="workspace-actions">
+      <button type="button" ng-click="$ctrl.handleExportWorkspace()">{{ $ctrl.getWorkspaceLabel('export') }}</button>
+      <button type="button" ng-click="$ctrl.triggerImportWorkspace()">{{ $ctrl.getWorkspaceLabel('import') }}</button>
+      <input id="workspace-import-input" class="workspace-import-input" type="file" accept=".json,application/json" onchange="angular.element(this).scope().$ctrl.handleImportWorkspaceFile(event)">
+    </div>
+  </div>
+</div>

package/public/components/field-args.html

@@ -0,0 +1,16 @@
+<div class="field-args" ng-if="$ctrl.hasArgs()">
+  <span class="field-args-paren">(</span>
+  <span class="field-arg" ng-repeat="arg in $ctrl.fieldArgs track by arg.name || $index">
+    <span class="field-arg-name" ng-mouseover="$ctrl.showArgTooltip($event, arg)" ng-mouseout="$ctrl.hideTooltip()" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()">{{ arg.name }}</span>
+    <span class="colon">:</span>
+    <field-type field-ref="arg" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-type>
+    <span class="field-arg-default" ng-if="arg.defaultValue">
+      <span class="equal">=</span> {{ arg.defaultValue }}
+    </span>
+    <span class="field-arg-description" ng-if="arg.description" ng-mouseover="$ctrl.showArgTooltip($event, arg)" ng-mouseout="$ctrl.hideTooltip()" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()">
+      {{ arg.description }}
+    </span>
+    <span class="field-arg-separator" ng-if="!$last">, </span>
+  </span>
+  <span class="field-args-paren">)</span>
+</div>

package/public/components/field-type.html

@@ -0,0 +1,27 @@
+<span class="field-type-wrapper" ng-if="$ctrl.getTypeRef()">
+  <span ng-if="$ctrl.isListType($ctrl.getTypeRef())">
+    <span class="field-type-prefix">[</span>
+    <field-type field-ref="$ctrl.getTypeRef().ofType" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.forwardHideTooltip()"></field-type>
+    <span class="field-type-suffix">]</span>
+  </span>
+  <span ng-if="$ctrl.isNonNullType($ctrl.getTypeRef())">
+    <field-type field-ref="$ctrl.getTypeRef().ofType" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.forwardHideTooltip()"></field-type>
+    <span class="field-type-non-null">!</span>
+  </span>
+  <span ng-if="!$ctrl.isListType($ctrl.getTypeRef()) && !$ctrl.isNonNullType($ctrl.getTypeRef()) && $ctrl.hasNavigableType($ctrl.getTypeRef())">
+    <a
+      class="field-type-link"
+      href="#{{ $ctrl.getTypeAnchor($ctrl.getTypeRef()) }}"
+      ng-click="$ctrl.onTypeAnchorClick($event)"
+      ng-mouseover="$ctrl.showTooltip($event)"
+      ng-mouseout="$ctrl.hideTooltip()"
+      on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)"
+      on-hide-tooltip="$ctrl.hideTooltip()"
+    >
+      <span class="field-type">{{ $ctrl.getTypeLabel($ctrl.getTypeRef()) }}</span>
+    </a>
+  </span>
+  <span class="field-type" ng-if="!$ctrl.isListType($ctrl.getTypeRef()) && !$ctrl.isNonNullType($ctrl.getTypeRef()) && !$ctrl.hasNavigableType($ctrl.getTypeRef())" ng-mouseover="$ctrl.showTooltip($event)" ng-mouseout="$ctrl.hideTooltip()" on-show-tooltip="$ctrl.forwardShowTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()">
+    {{ $ctrl.getTypeLabel($ctrl.getTypeRef()) }}
+  </span>
+</span>

package/public/components/headers-editor.html

@@ -0,0 +1,3 @@
+<div class="headers-editor-container">
+  <textarea aria-label="Request headers editor" ng-model="$ctrl.headers"></textarea>
+</div>

package/public/components/query-editor.html

@@ -0,0 +1,3 @@
+<div class="query-editor-container">
+  <textarea aria-label="GraphQL query editor" ng-model="$ctrl.query"></textarea>
+</div>

package/public/components/response-viewer.html

@@ -0,0 +1,3 @@
+<div class="response-viewer-container">
+  <textarea aria-label="GraphQL response viewer" ng-model="$ctrl.result"></textarea>
+</div>

package/public/components/schema-viewer.html

@@ -0,0 +1,74 @@
+<div class="schema-viewer-wrapper" ng-class="{ 'open': $ctrl.open }">
+  <button class="btn btn-toggle-schema-viewer" ng-click="$ctrl.toggleSchemaViewer()">Schema</button>
+  <div class="schema-viewer-error" ng-show="$ctrl.loadError">
+    <div>
+      {{ $ctrl.t('schema.error') }}
+    </div>
+    <div class="error-details">
+      {{ $ctrl.loadError }}
+    </div>
+    <button class="btn schema-download-retry" ng-click="$ctrl.retryLoadSchema()">{{ $ctrl.t('schema.retry') }}</button>
+  </div>
+  <div class="schema-viewer-panel">
+    <div class="editor-panel-title schema-panel-title">
+      <span>{{ $ctrl.t('schema.title') }}</span>
+    </div>
+    <div class="schema-panel-toolbar">
+      <input type="text" class="schema-search-input" ng-model="$ctrl.searchTerm" placeholder="{{ $ctrl.t('schema.search_placeholder') }}">
+      <div class="schema-panel-note">{{ $ctrl.t('schema.note') }}</div>
+    </div>
+    <div class="schema-panel-body">
+      <div class="type-definition" id="{{type.kind}}_{{type.name||type.ofType.name}}" 
+       ng-repeat="type in $ctrl.getFilteredTypes() track by (type.kind + '_' + type.name)">
+        <div ng-if="type.kind === 'OBJECT'">
+          <span class="keyword">type</span> {{ type.name }} <span class="bracket">{</span>
+          <div class="field" ng-repeat="field in type.fields" ng-if="$ctrl.shouldShowField(type, field)">
+             <span class="field-name" ng-class="{ 'is-actionable': $ctrl.getOperationForType(type.name) }" ng-mousedown="$ctrl.onFieldMouseDown($event, type, field)" ng-mouseover="$ctrl.showFieldTooltip($event, field)" ng-mouseout="$ctrl.hideTooltip()">{{ field.name }}</span><field-args field-args="field.args" on-show-tooltip="$ctrl.forwardTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-args><span class="colon">:</span> <field-type field-ref="field" on-show-tooltip="$ctrl.forwardTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-type>
+              <!--<span ng-if="field.type.kind==='LIST'" class="array-bracket">[</span><a href="#{{field.type.kind}}_{{field.type.name}}" ng-click="$ctrl.onTypeAnchorClick($event)"><span class="field-type">{{ field.type.name || field.type.ofType.name }}</span></a><span ng-if="field.type.kind==='LIST'" class="array-bracket">]</span> -->
+          </div>
+          <span class="bracket">}</span>
+        </div>
+        <div ng-if="type.kind === 'ENUM'">
+          <span class="keyword">enum</span> {{ type.name }} <span class="bracket">{</span>
+          <div class="field" ng-repeat="value in type.enumValues">
+            <span class="enum-name" ng-mouseover="$ctrl.showEnumTooltip($event, value)" ng-mouseout="$ctrl.hideTooltip()">{{ value.name }}</span>
+          </div>
+          <span class="bracket">}</span>
+        </div>
+        <div ng-if="type.kind === 'INTERFACE'">
+          <span class="keyword">interface</span> {{ type.name }} <span class="bracket">{</span>
+          <div class="field" ng-repeat="field in type.fields" ng-if="$ctrl.shouldShowField(type, field)">
+            <span class="field-name" ng-class="{ 'is-actionable': $ctrl.getOperationForType(type.name) }" ng-mousedown="$ctrl.onFieldMouseDown($event, type, field)" ng-mouseover="$ctrl.showFieldTooltip($event, field)" ng-mouseout="$ctrl.hideTooltip()">{{ field.name }}</span><field-args field-args="field.args" on-show-tooltip="$ctrl.forwardTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-args><span class="colon">:</span> <field-type field-ref="field" on-show-tooltip="$ctrl.forwardTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-type>
+          </div>
+          <span class="bracket">}</span>
+        </div>
+        <div ng-if="type.kind === 'UNION'">
+          <span class="keyword">union</span> {{ type.name }} <span class="equal">=</span>
+          <div class="field" ng-repeat="possibleType in type.possibleTypes" ng-if="$ctrl.shouldShowField(type, possibleType)">
+            <span class="field-name" ng-mouseover="$ctrl.showPossibleTypeTooltip($event, possibleType)" ng-mouseout="$ctrl.hideTooltip()">{{ possibleType.name }}</span>
+          </div>
+        </div>
+        <div ng-if="type.kind === 'INPUT_OBJECT'">
+          <span class="keyword">input</span> {{ type.name }} <span class="bracket">{</span>
+          <div class="field" ng-repeat="inputField in type.inputFields" ng-if="$ctrl.shouldShowField(type, inputField)">
+            <span class="field-name" ng-mouseover="$ctrl.showInputFieldTooltip($event, inputField)" ng-mouseout="$ctrl.hideTooltip()">{{ inputField.name }}</span><span class="colon">:</span> <field-type field-ref="inputField" on-show-tooltip="$ctrl.forwardTooltip($event, payload)" on-hide-tooltip="$ctrl.hideTooltip()"></field-type>
+          </div>
+          <span class="bracket">}</span>
+        </div>
+        <div ng-if="type.kind === 'SCALAR'">
+          <span class="keyword">scalar</span> {{ type.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="schema-tooltip" ng-if="$ctrl.tooltip.visible" ng-style="{ top: $ctrl.tooltip.top + 'px', left: $ctrl.tooltip.left + 'px' }">
+    <div class="schema-tooltip-signature">
+      <span class="schema-tooltip-name schema-tooltip-name-{{ $ctrl.tooltip.labelClass }}">{{ $ctrl.tooltip.label }}</span>
+      <span class="colon" ng-if="$ctrl.tooltip.typeTokens.length">:</span>
+      <span class="schema-tooltip-type-tokens" ng-if="$ctrl.tooltip.typeTokens.length">
+        <span ng-repeat="token in $ctrl.tooltip.typeTokens track by $index" class="{{ token.className }}">{{ token.text }}</span>
+      </span>
+    </div>
+    <div class="schema-tooltip-description" ng-if="$ctrl.tooltip.description">{{ $ctrl.tooltip.description }}</div>
+  </div>
+</div>

package/public/components/variables-editor.html

@@ -0,0 +1,3 @@
+<div class="variables-editor-container">
+  <textarea aria-label="GraphQL variables editor" ng-model="$ctrl.variables"></textarea>
+</div>

package/public/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="app">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Playground</title>
+  <link rel="stylesheet" href="./styles/main.css?v=20260409r">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/addon/hint/show-hint.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/addon/edit/matchbrackets.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/addon/hint/show-hint.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
+  <script src="./js/main.js?v=20260409p"></script>
+  <script src="./js/components/config-editor.js?v=20260409e"></script>
+  <script src="./js/components/query-editor.js?v=20260409t"></script>
+  <script src="./js/components/variables-editor.js?v=20260409k"></script>
+  <script src="./js/components/headers-editor.js?v=20260409i"></script>
+  <script src="./js/components/response-viewer.js?v=20260409c"></script>
+  <script src="./js/components/schema-viewer.js?v=20260409g"></script>
+</head>
+<body ng-class="{ 'ready': main.ready }" ng-controller="MainController as main">
+  <nav class="top-nav">
+    <div class="top-nav-brand">
+      <div class="top-nav-title-row">
+        <div class="top-nav-title">{{ main.t('app.name') }}</div>
+        <span class="top-nav-badge">{{ main.appVersion }}</span>
+      </div>
+      <div class="top-nav-subtitle">{{ main.t('app.developed_by') }}</div>
+    </div>
+    <div class="top-nav-actions">
+      <label class="locale-label" for="locale-select">{{ main.t('nav.language') }}</label>
+      <select id="locale-select" class="locale-select" ng-model="main.locale" ng-change="main.setLocale(main.locale)" ng-options="locale.code as main.t(locale.labelKey) for locale in main.locales"></select>
+      <button class="config-btn" ng-click="main.openConfig()">{{ main.t('nav.settings') }}</button>
+    </div>
+  </nav>
+
+  <div class="editor">
+    <div class="input-group">
+      <input class="form-control" type="text" ng-model="main.url" placeholder="URL">
+      <button ng-click="main.send()">{{ main.t('actions.send') }}</button>
+    </div>
+    <div class="tabs">
+      <div class="tab-item" ng-repeat="tab in main.tabs track by tab.id" ng-class="{ 'active': main.activeTab === $index }" ng-mousedown="main.handleTabMouseDown($event, $index)">
+        <a href="" ng-if="!tab.isEditingTitle" ng-click="main.activeTab = $index" ng-dblclick="main.beginTabTitleEdit($index, $event)">{{ tab.title }}</a>
+        <input
+          ng-if="tab.isEditingTitle"
+          id="tab-title-editor-{{ tab.id }}"
+          class="tab-title-input"
+          type="text"
+          ng-model="tab.titleDraft"
+          ng-click="$event.stopPropagation()"
+          ng-blur="main.commitTabTitleEdit($index)"
+          ng-keydown="main.handleTabTitleKeydown($event, $index)">
+        <button type="button" class="tab-close-btn" ng-if="main.tabs.length > 1" ng-click="main.closeTab($index); $event.stopPropagation()" aria-label="Close tab">&times;</button>
+      </div>
+      <div class="add-tab">
+        <a href="" ng-click="main.addTab()">+</a>
+      </div>
+    </div>
+    <div class="tab-content" ng-repeat="tab in main.tabs" ng-show="main.activeTab === $index">
+      <div class="query-and-result-container">
+        <div class="query-editor">
+          <div class="editor-panel-title">
+            <span>{{ main.t('editor.query') }}</span>
+            <span class="editor-panel-actions">
+              <button type="button" class="editor-panel-action" ng-click="tab.queryEditorApi && tab.queryEditorApi.resetToOperation('query')">{{ main.t('actions.new_query') }}</button>
+              <button type="button" class="editor-panel-action" ng-click="tab.queryEditorApi && tab.queryEditorApi.resetToOperation('mutation')">{{ main.t('actions.new_mutation') }}</button>
+            </span>
+          </div>
+          <query-editor query="tab.query" schema="main.schema" api="tab.queryEditorApi" on-change="main.persistTabs()"></query-editor>
+        </div>
+        <div class="actions">
+          <button type="button" class="send-fab" ng-click="main.send()" aria-label="{{ main.t('actions.send') }}" title="{{ main.t('actions.send') }}">
+            &#9654;
+          </button>
+        </div>
+        <div class="result">
+          <div class="editor-panel-title">{{ main.t('editor.response') }}</div>
+          <response-viewer result="tab.result" api="tab.responseViewerApi"></response-viewer>
+        </div>
+      </div>
+      <div class="variables-and-headers-container">
+        <div class="variables-editor">
+          <div class="editor-panel-title">
+            <span>{{ main.t('editor.variables') }}</span>
+            <button type="button" class="editor-panel-action" ng-click="tab.variablesEditorApi && tab.variablesEditorApi.format()">{{ main.t('actions.format') }}</button>
+          </div>
+          <variables-editor variables="tab.variables" query="tab.query" schema="main.schema" api="tab.variablesEditorApi" on-change="main.persistTabs()"></variables-editor>
+        </div>
+        <div class="headers-editor">
+          <div class="editor-panel-title">
+            <span>{{ main.t('editor.headers') }}</span>
+            <button type="button" class="editor-panel-action" ng-click="tab.headersEditorApi && tab.headersEditorApi.format()">{{ main.t('actions.format') }}</button>
+          </div>
+          <headers-editor headers="tab.headers" api="tab.headersEditorApi" on-change="main.persistTabs()"></headers-editor>
+        </div>
+      </div>
+    </div>
+  </div>
+  <schema-viewer schema="main.schema" load-error="main.loadSchemaError" retry-load-schema="main.loadSchema()" insert-schema-operation="main.insertSchemaOperation(snippet)"></schema-viewer>
+  <div class="modal-overlay" ng-show="main.showConfig"></div>
+  <div class="modal config-modal" ng-show="main.showConfig">
+    <div class="modal-content">
+      <h2>{{ main.t('modal.settings') }}</h2>
+      <config-editor export-workspace="main.downloadWorkspace()" import-workspace="main.importWorkspace(workspace)"></config-editor>
+      <button class="close-btn" ng-click="main.closeConfig()">{{ main.t('actions.close') }}</button>
+    </div>
+  </div>
+</body>
+</html>