feat: new hive lab #7374

mskorokhodov · 2025-12-04T13:43:38Z

Background

Replacement for GraphiQL

Description

New hive laboratory as replacement for new GraphiQL

Checklist

gemini-code-assist · 2025-12-04T13:45:02Z

Summary of Changes

Hello @mskorokhodov, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a brand new 'Hive Laboratory' feature, designed to be a powerful and interactive environment for GraphQL API exploration and testing. It provides a rich set of tools for building, executing, and managing GraphQL operations, along with features for history tracking, environment configuration, and preflight scripting. The new laboratory aims to significantly enhance the developer experience by centralizing various GraphQL interaction capabilities within the application.

Highlights

New Hive Laboratory Feature: Introduces a comprehensive GraphQL 'Laboratory' within the application, providing a dedicated environment for interacting with GraphQL APIs.
Interactive GraphQL Editor: Integrates a Monaco-based editor with support for GraphQL queries, variables, headers, and extensions, offering syntax highlighting and schema-aware features. It also includes a visual query builder for interactive schema exploration.
Operation Management and History: Enables users to organize GraphQL operations into collections, track a detailed history of executed queries and subscription responses, and manage environment variables and preflight scripts.
Enhanced User Interface: Adds a suite of new UI components (e.g., AlertDialog, Badge, ButtonGroup, Command Palette, ContextMenu, Dialog, DropdownMenu, Empty states, Field components, Input, Label, Resizable panels, ScrollArea, Select, Separator, Sonner, Sortable lists, Spinner, Tabs, Toggle, Tooltip) to deliver a rich and intuitive user experience for the new laboratory.
Backend Integration: Connects the new laboratory functionality with backend services for persisting collections, operations, and preflight scripts, ensuring data consistency and collaboration.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new 'Laboratory' feature, which is a powerful GraphQL IDE integrated into the application. The changes are extensive, adding many new components, hooks, and dependencies. The overall structure is well-organized.

A significant issue is the consistent misspelling of 'laboratory' as 'labaratory' throughout the codebase. This affects file names, directory names, component names, CSS classes, and more. This should be corrected globally for code quality and maintainability.

I have also provided specific feedback on a potential bug in parsing environment variables, a UI issue in the editor's theme, and an inconsistency in string replacement methods.

packages/web/app/components.json

gemini-code-assist · 2025-12-04T13:47:09Z

packages/web/app/src/index.css

    --chart-2: 340 75% 55%;
  }
+
+  .hive-labaratory {


The word laboratory is misspelled as labaratory. This should be corrected for consistency.

.hive-laboratory {

packages/web/app/src/laboratory/components/laboratory/env.tsx

gemini-code-assist · 2025-12-04T13:47:10Z

packages/web/app/src/laboratory/components/laboratory/builder.tsx

+    () =>
+      Object.values(
+        (
+          schema?.getType(props.field.type.toString().replace(/\[|\]|!/g, '')) as GraphQLObjectType


This line uses replace() with a global regex, while line 427 uses replaceAll() for the same purpose. For consistency and readability, it's better to use replaceAll() in both places.

Suggested change

schema?.getType(props.field.type.toString().replace(/\[|\]|!/g, '')) as GraphQLObjectType

schema?.getType(props.field.type.toString().replaceAll(/[\[\]!]/g, '')) as GraphQLObjectType

packages/web/app/src/laboratory/components/laboratory/builder.tsx

gemini-code-assist · 2025-12-04T13:47:10Z

packages/web/app/src/laboratory/components/laboratory/editor.tsx

+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    { token: '', foreground: 'F8F9FA', background: 'fffffe' },


In the darkTheme definition, the default token ('') has a background color of 'fffffe', which is nearly white. This will likely clash with the dark editor background (#18181b). To fix this, you can remove the background property to let it inherit the editor's background color.

Suggested change

{ token: '', foreground: 'F8F9FA', background: 'fffffe' },

{ token: '', foreground: 'F8F9FA' },

jdolle

Only minor comments.

Although some files are quite large, the components are well designed and make great use of memo, callbacks, etc to keep the code clean and efficient.

jdolle · 2025-12-08T16:59:19Z

packages/web/app/src/laboratory/components/laboratory/builder.tsx

+                You haven't selected any endpoint yet. Get started by selecting an endpoint.
+              </EmptyDescription>
+            </EmptyHeader>
+            {/* <EmptyContent>


minor: should this be removed?

jdolle · 2025-12-08T17:03:09Z

packages/web/app/src/laboratory/components/laboratory/command.tsx

+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Schema">
+            {/* <CommandItem


jdolle · 2025-12-08T17:12:08Z

packages/web/app/src/laboratory/components/laboratory/env.tsx

+            variables: Object.fromEntries(
+              value
+                ?.split('\n')
+                .filter(line => line.trim() && !line.trim().startsWith('#'))


It looks like this is to support adding comments within env vars?

This is a new feature for us. Maybe we can update documentation examples to include comments to 1) show this feature, 2) add more inline context to our examples

jdolle · 2025-12-08T17:15:38Z

packages/web/app/src/laboratory/components/laboratory/labaratory-mobile.tsx

+//       </LaboratoryProvider>
+//     </div>
+//   );
+// };


Should this file be deleted?

jdolle · 2025-12-08T17:22:49Z

packages/web/app/src/laboratory/components/laboratory/operation.tsx

+  return (
+    <Editor
+      value={JSON.stringify(
+        JSON.parse((historyItem as LaboratoryHistoryRequest)?.response ?? '{}'),


It's an edge case, but what if the response body is invalid JSON?
Should we show that it's invalid json or show the text content?

jdolle · 2025-12-08T17:31:07Z

packages/web/app/src/laboratory/components/laboratory/operation.tsx

+              <Query operation={operation} isReadOnly={isReadOnly} />
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel minSize={10} defaultSize={30} className="!overflow-visible">


I assume your styling is right, but I expected overflow-auto to allow scrolling

jdolle · 2025-12-08T17:34:47Z

packages/web/app/src/laboratory/lib/utils.ts

+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {


minor: we have a package for this already. But if we want to keep this independent with the plan to publish as a separate package then I'm fine with this.

jdolle · 2025-12-08T17:36:59Z

packages/web/app/src/pages/target-laboratory-new.tsx

+
+const getLocalStorageState = (key: string, defaultValue: any) => {
+  const value = localStorage.getItem(`${localStoragePrefix}${key}`);
+  return value ? JSON.parse(value) : defaultValue;


Something maybe to consider for the future is if the localstorage can be corrupted or if we want to migrate storage to another format, maybe we gracefully handle syntax errors

jdolle · 2025-12-08T17:42:11Z

packages/web/app/src/pages/target-laboratory-new.tsx

+
+  const createOperation = useMemo(
+    () =>
+      throttle((collection: LaboratoryCollection, operation: LaboratoryCollectionOperation) => {


It's difficult to follow the logic for these callbacks so maybe this is already handled, but in addition to throttling, I think this should only allow one request at a time so that if for some reason the request is taking longer, that duplicate operations aren't accidentally created by impatient users.

jdolle · 2025-12-08T17:54:36Z

packages/web/app/src/laboratory/lib/endpoint.ts

+
+      setIntrospection(response.data as IntrospectionQuery);
+    } catch {
+      toast.error('Failed to fetch schema');


Are there cases where this error will show up repetitively because the schema keeps trying to get fetched? If so, let's make sure not to spam the UI with alerts because that can be annoying

…ew-lab

github-actions · 2025-12-08T23:38:43Z

🚀 Snapshot Release (`alpha`)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
`hive`	`8.13.0-alpha-20251209234638-86cdca53819a11e958aa5711c4598a39cfc1178c`	npm ↗︎ unpkg ↗︎

github-actions · 2025-12-08T23:39:01Z

📚 Storybook Deployment

The latest changes are available as preview in: https://pr-7374.hive-storybook.pages.dev

github-actions · 2025-12-08T23:43:04Z

💻 Website Preview

The latest changes are available as preview in: https://pr-7374.hive-landing-page.pages.dev

github-actions · 2025-12-08T23:44:03Z

🐋 This PR was built and pushed to the following Docker images:

Targets: build

Platforms: linux/amd64

Image Tag: 86cdca53819a11e958aa5711c4598a39cfc1178c

n1ru4l · 2025-12-09T10:36:21Z

@mskorokhodov Can you please take care of type-checking and linting failing?

n1ru4l

Legit to merge after addressing failing checks

…ew-lab

gemini-code-assist bot reviewed Dec 4, 2025

View reviewed changes

feat: new hive lab

abe1455

mskorokhodov force-pushed the feature/new-lab branch from ee2488e to abe1455 Compare December 5, 2025 15:59

mskorokhodov and others added 5 commits December 5, 2025 17:00

fix: remove unused agent fix

707d21e

Patch serialize in @fastify/vie

89ac5b2

fix: type & disabled endpoint from in lab functionality

705cfa1

add: new lab as separate tab

ab98ac8

fix: address review comments

a0a120c

mskorokhodov requested a review from n1ru4l December 8, 2025 15:23

mskorokhodov added 2 commits December 8, 2025 16:29

fix: vite package

fcf699d

fix: share base path for share

63ca00f

mskorokhodov requested a review from jdolle December 8, 2025 16:45

mskorokhodov changed the title ~~[WIP]: feat: new hive lab~~ feat: new hive lab Dec 8, 2025

jdolle approved these changes Dec 8, 2025

View reviewed changes

Merge branch 'main' of github.com:graphql-hive/console into feature/n…

c8100e8

…ew-lab

github-actions bot deployed to preview December 8, 2025 23:38 View deployment

github-actions bot deployed to preview December 8, 2025 23:43 View deployment

n1ru4l approved these changes Dec 9, 2025

View reviewed changes

fix: lint errors

eb0e073

github-actions bot deployed to preview December 9, 2025 13:39 View deployment

github-actions bot deployed to preview December 9, 2025 13:43 View deployment

fix: more lint erros

47562b6

github-actions bot deployed to preview December 9, 2025 23:07 View deployment

github-actions bot deployed to preview December 9, 2025 23:11 View deployment

fix: prettier errors

e6a9133

github-actions bot deployed to preview December 9, 2025 23:13 View deployment

Merge branch 'main' of github.com:graphql-hive/console into feature/n…

e92a66d

…ew-lab

github-actions bot deployed to preview December 9, 2025 23:18 View deployment

github-actions bot deployed to preview December 9, 2025 23:22 View deployment

github-actions bot deployed to preview December 9, 2025 23:40 View deployment

github-actions bot deployed to preview December 9, 2025 23:44 View deployment

fix: e2e test

86cdca5

mskorokhodov force-pushed the feature/new-lab branch from 3c5577a to 86cdca5 Compare December 9, 2025 23:45

github-actions bot deployed to preview December 9, 2025 23:47 View deployment

github-actions bot deployed to preview December 9, 2025 23:51 View deployment

mskorokhodov merged commit b4df418 into main Dec 10, 2025
26 checks passed

mskorokhodov deleted the feature/new-lab branch December 10, 2025 00:09

	schema?.getType(props.field.type.toString().replace(/\[\|\]\|!/g, '')) as GraphQLObjectType
	schema?.getType(props.field.type.toString().replaceAll(/[\[\]!]/g, '')) as GraphQLObjectType

	{ token: '', foreground: 'F8F9FA', background: 'fffffe' },
	{ token: '', foreground: 'F8F9FA' },

feat: new hive lab #7374

feat: new hive lab #7374

Uh oh!

Conversation

mskorokhodov commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Description

Checklist

Uh oh!

gemini-code-assist bot commented Dec 4, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist bot Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

jdolle left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Snapshot Release (alpha)

Uh oh!

github-actions bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Storybook Deployment

Uh oh!

github-actions bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💻 Website Preview

Uh oh!

github-actions bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

n1ru4l commented Dec 9, 2025

Uh oh!

n1ru4l left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

mskorokhodov commented Dec 4, 2025 •

edited

Loading

github-actions bot commented Dec 8, 2025 •

edited

Loading

🚀 Snapshot Release (`alpha`)

github-actions bot commented Dec 8, 2025 •

edited

Loading

github-actions bot commented Dec 8, 2025 •

edited

Loading

github-actions bot commented Dec 8, 2025 •

edited

Loading