New studio

[lvca]

New studio!

Schema

API Playground

Better docs

Dark mode

[mergify]

🧪 CI Insights

Here's what we observed from your CI run for c7f4f46.

🟢 All jobs passed!

But CI Insights is watching 👀

[gemini-code-assist]

Summary of Changes

Hello @lvca, 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 delivers a significant upgrade to the ArcadeDB Studio, focusing on a complete overhaul of its user interface and core functionalities. The changes aim to provide a more modern, efficient, and user-friendly environment for interacting with ArcadeDB databases. Key improvements include a visually refreshed design with dark mode capabilities, an interactive API exploration tool, a more structured and actionable database schema view, and a powerful record editor for direct data manipulation. These enhancements collectively improve developer productivity and the overall usability of the Studio.

Highlights

• New Studio User Interface: The entire Studio UI has been redesigned for a modern and intuitive user experience, featuring a new layout, improved navigation, and enhanced visual consistency across all sections.
• Dark Mode Support: Introduced comprehensive dark mode styling, allowing users to switch between light, dark, or system-preferred themes for improved readability and reduced eye strain.
• Interactive API Playground: The API documentation has been transformed into an interactive playground, providing detailed endpoint descriptions, request/response examples, and a 'Try It' feature for direct API testing.
• Enhanced Database Schema Browser: The database schema view now includes a dedicated sidebar for browsing types, offering detailed information about properties and indexes, along with quick action buttons for common tasks.
• Integrated Query Editor Features: The query editor now features a multi-panel sidebar for quick access to query history, saved queries, a language reference, and Studio settings, streamlining the query development workflow.
• Dedicated Record Editor: A new record editor has been implemented, enabling direct viewing, editing, and deletion of database records from both table and graph result views.
• Modernized Notifications and Modals: Replaced the third-party SweetAlert2 library with custom Bootstrap-based modals and toast notifications, ensuring a consistent look and feel throughout the application.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• studio/src/main/resources/static/api.html
  • Refactored the API documentation page into an interactive API playground with detailed endpoint descriptions and a 'Try It' feature.
• studio/src/main/resources/static/css/studio.css
  • Introduced CSS custom properties for theming and added comprehensive dark mode styles.
  • Applied new styling for various UI components including sidebars, buttons, tables, and the query editor.
• studio/src/main/resources/static/database.html
  • Redesigned the database tab to feature a new sidebar for schema types and a detailed type information panel.
  • Updated action buttons for database management.
• studio/src/main/resources/static/index.html
  • Added a theme initialization script to support light/dark/system themes.
  • Replaced SweetAlert2 with custom Bootstrap modals and toast notifications.
  • Integrated new HTML partials for settings and the global modal.
• studio/src/main/resources/static/js/studio-cluster.js
  • Updated the 'connectToCluster' function to utilize the new 'globalPrompt' modal for user input.
• studio/src/main/resources/static/js/studio-database.js
  • Introduced 'globalSchemaTypes' variable for schema management.
  • Updated login modal handling to ensure proper UI state.
  • Refactored query history and added saved queries, reference, and settings panels for the query sidebar.
  • Updated schema display logic to use the new sidebar structure and enhanced property/index rendering.
• studio/src/main/resources/static/js/studio-graph-widget.js
  • Modified node and edge selection display to integrate with the new record editor.
• studio/src/main/resources/static/js/studio-record-editor.js
  • Added a new JavaScript file implementing a dedicated record editor for viewing, editing, and deleting database records.
• studio/src/main/resources/static/js/studio-server.js
  • Enhanced server connection display with a compact label and a detailed popover.
  • Updated 'updateServerSetting' to use the new 'globalPrompt' modal.
• studio/src/main/resources/static/js/studio-table.js
  • Modified table rendering to link '@Rid' values to the new record editor.
  • Refactored DataTables export buttons into a custom dropdown.
• studio/src/main/resources/static/js/studio-utils.js
  • Replaced SweetAlert2 alert/confirm/prompt functions with custom Bootstrap modal implementations.
  • Updated 'globalNotifyError' to use the new notification system.
• studio/src/main/resources/static/query.html
  • Implemented a new multi-panel sidebar for query features including overview, history, saved queries, reference, and settings.
  • Redesigned the query editor area with integrated save and run action buttons.
  • Reordered result tabs to prioritize the table view.
• studio/src/main/resources/static/resources.html
  • Transformed the resources page into a structured documentation browser with a table of contents sidebar and an overview panel.
• studio/src/main/resources/static/settings.html
  • Added a new HTML file for the Studio settings tab, including theme selection options.

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.

Footnotes

1. 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 is a massive and impressive UI overhaul for the Studio. The new design is modern, well-structured, and packed with new features like the API playground, improved documentation browser, dark mode, and a consistent record editor. The move away from SweetAlert to a custom Bootstrap-based modal system is a great step for reducing dependencies and improving consistency. The code is mostly well-written, but I've identified a few areas to address regarding security (XSS) and maintainability.

[gemini-code-assist]

The logic to determine the SQL value type can lead to unintended data corruption. The condition !isNaN(current) && current.trim() !== "" will treat any string that can be parsed as a number (e.g., a ZIP code like "01234") as a numeric type, saving it as 1234 and losing the leading zero. This could be problematic for string properties that happen to contain only digits.

To make this more robust, you could use the database schema information (which seems to be available in globalSchemaTypes) to check the property's defined type and quote the value only if it's a string type.

[gemini-code-assist]

The message and response variables, which can contain content from the server's error response, are passed to globalNotify without being HTML-escaped. The showNotification function in index.html then injects this content into the DOM via innerHTML. If the server's error response can contain user-controlled content, this could lead to a cross-site scripting (XSS) vulnerability. It's safer to always escape content received from the server before rendering it as HTML.

Suggested change

	globalNotify(title, message, "danger");
	} catch (e) {
	globalNotify("Error", escapeHtml(response), "danger");
	globalNotify("Error", response, "danger");
	globalNotify(title, escapeHtml(message), "danger");
	} catch (e) {
	globalNotify("Error", escapeHtml(response), "danger");

[gemini-code-assist]

This large block of JavaScript is embedded directly in the HTML file. For better maintainability, separation of concerns, and to allow browser caching, it's recommended to move this script into its own external .js file and include it with a <script src="..."></script> tag.

[gemini-code-assist]

The use of the global event object is a deprecated practice and may not be reliable across all browsers. It's better to pass the event object explicitly from the onclick handler to the function.

For example:
In HTML:

<div class="api-endpoint" onclick="showApiDetail(event, 'ready')">

In JavaScript:

function showApiDetail(event, key) { ... }

[gemini-code-assist]

The ep.title property is directly concatenated into the HTML string without escaping. While the data in apiEndpoints is currently hardcoded and appears safe, this is a risky practice. If this data were to come from a dynamic source in the future, it could introduce a cross-site scripting (XSS) vulnerability. It's best practice to HTML-escape all dynamic data before rendering it, unless it's explicitly intended to be HTML.

[gemini-code-assist]

There are many uses of !important throughout the stylesheet (e.g., on lines 138, 195, 226, 244, 355, etc.). While sometimes necessary to override styles from a library like Bootstrap, excessive use can make the CSS difficult to maintain, debug, and override later. Where possible, consider increasing selector specificity to avoid using !important.

[claude]

Pull Request Review: New Studio

Overview

This PR introduces a major redesign of the ArcadeDB Studio web interface with significant UI/UX improvements including dark mode, improved query panel with saved queries, enhanced schema visualization, and a new record editor. The changes span 15 files with 5,098 additions and 1,201 deletions, primarily in the frontend (HTML/CSS/JS).

---

Positive Aspects

1. Excellent User Experience Improvements

• Dark mode support with proper CSS custom properties - well implemented
• Enhanced API documentation with interactive playground - great developer experience
• Improved query interface with saved queries feature
• New record editor with inline edit/delete capabilities
• Better schema visualization with clearer type details and badges

2. Good Security Practices

• Consistent use of escapeHtml() throughout the new code to prevent XSS attacks
• Proper string escaping in SQL statements
• Session token storage instead of storing passwords in localStorage
• Bearer token authentication pattern implemented correctly

3. Code Organization

• New modular component (studio-record-editor.js) follows separation of concerns
• CSS custom properties make theming maintainable and consistent
• Proper use of Bootstrap 5 modal API

---

Issues and Concerns

CRITICAL: Console Statements Left in Production Code

Issue: Multiple console.log, console.warn, and console.error statements remain in the code.

CLAUDE.md Requirement: "remove any System.out you used for debug when you have finished"

Found in: studio-database.js Lines 59, 75, 86, 94, 219, 253, 261, etc.

Action Required: Remove all console statements before merging.

---

HIGH: SQL Injection Risk in Property Names

Issue: Property names in studio-record-editor.js:110 are wrapped in backticks but not properly escaped.

Risk: If a property name contains a backtick character, it could break the SQL syntax.

Recommendation: Add property name validation to ensure only safe characters are allowed.

---

MEDIUM: JSON Injection Risk

Issue: studio-record-editor.js:100-106 allows JSON objects/arrays to be passed directly without additional validation after JSON.parse().

Risk: If ArcadeDB SQL parser doesn't properly handle edge cases in JSON, this could lead to syntax errors.

Recommendation: Consider using parameterized queries or add more robust validation for JSON strings.

---

MEDIUM: Missing Test Coverage

CLAUDE.md Requirement: "all new server-side code must be tested with a test case"

Issue: This PR adds significant new functionality but appears to have no automated tests for the new record editor, saved queries, or API playground features.

Recommendation: Add integration tests for HTTP endpoints or document manual testing results.

---

Security Review

Strengths:

1. XSS Prevention: Consistent use of escapeHtml() in all user-controlled output
2. Authentication: Token-based auth with proper Bearer header usage
3. No hardcoded credentials in the code

Recommendations:

1. Add Content Security Policy (CSP) headers
2. Consider CSRF tokens for state-changing operations
3. Validate session tokens have proper expiration/rotation

---

Action Items Before Merge

Must Fix (Blocking):

1. Remove all console.log/warn/error statements (per CLAUDE.md)
2. Add property name validation in record editor to prevent SQL syntax issues
3. Test coverage: Run manual tests and document results, or add automated tests

Should Fix (High Priority):
4. Improve JSON value handling in record editor with better validation
5. Document or fix the Bootstrap modal backdrop hack (studio-database.js:268-276)
6. Add error handling for localStorage quota exceeded errors

---

Overall Assessment

Quality: Good
Security: Good (minor issues noted)
Compliance with CLAUDE.md: Partial - needs console.log cleanup and testing

This is a significant improvement to the Studio UI/UX and demonstrates good frontend development practices. However, it requires cleanup before merging:

1. Remove debug console statements
2. Add input validation for SQL construction
3. Provide test coverage or manual testing documentation

Once these items are addressed, this will be an excellent addition to ArcadeDB!

Great work on the UI improvements! The new Studio looks much more modern and user-friendly.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ -10.54%	✅ ∅

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (e97c30e)	86427	62783	72.64%
Head commit (c7f4f46)	115985 (+29558)	72034 (+9251)	62.11% (-10.54%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#3485)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.82%. Comparing base (e97c30e) to head (c7f4f46).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3485      +/-   ##
==========================================
+ Coverage   63.59%   63.82%   +0.22%     
==========================================
  Files        1299     1299              
  Lines       86427    86427              
  Branches    17789    17789              
==========================================
+ Hits        54962    55160     +198     
+ Misses      23671    23461     -210     
- Partials     7794     7806      +12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.