'),
+ i.b('\n' + n),
+ i.b(' | '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b(i.t(i.f('lineNumber', e, t, 0))),
+ i.b('\n' + n),
+ i.b(' | '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.s(i.f('prefix', e, t, 1), e, t, 0, 162, 238, '{{ }}') &&
+ (i.rs(e, t, function (e, t, i) {
+ i.b(' '),
+ i.b(i.t(i.f('prefix', e, t, 0))),
+ i.b(''),
+ i.b('\n' + n);
+ }),
+ e.pop()),
+ i.s(i.f('prefix', e, t, 1), e, t, 1, 0, 0, '') ||
+ (i.b(' '), i.b('\n' + n)),
+ i.s(i.f('content', e, t, 1), e, t, 0, 371, 445, '{{ }}') &&
+ (i.rs(e, t, function (e, t, i) {
+ i.b(' '),
+ i.b(i.t(i.f('content', e, t, 0))),
+ i.b(''),
+ i.b('\n' + n);
+ }),
+ e.pop()),
+ i.s(i.f('content', e, t, 1), e, t, 1, 0, 0, '') ||
+ (i.b('
'), i.b('\n' + n)),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b(' | '),
+ i.b('\n' + n),
+ i.b(''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['generic-wrapper'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b(i.t(i.f('content', e, t, 0))),
+ i.b('\n' + n),
+ i.b('
'),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['icon-file-added'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(
+ ''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['icon-file-changed'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['icon-file-deleted'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['icon-file-renamed'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['icon-file'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(
+ ''),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['line-by-line-file-diff'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b(i.t(i.f('diffs', e, t, 0))),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b(i.v(i.f('oldNumber', e, t, 0))),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b(''),
+ i.b(i.v(i.f('newNumber', e, t, 0))),
+ i.b('
'),
+ i.fl()
+ );
+ },
+ partials: {},
+ subs: {}
+ })),
+ (t.defaultTemplates['side-by-side-file-diff'] = new o.Template({
+ code: function (e, t, n) {
+ var i = this;
+ return (
+ i.b((n = n || '')),
+ i.b(''),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b(i.t(i.d('diffs.left', e, t, 0))),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b(i.t(i.d('diffs.right', e, t, 0))),
+ i.b('\n' + n),
+ i.b(' '),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
'),
+ i.b('\n' + n),
+ i.b('
-
-
-
- );
-};
-
-export default FileEditor;
diff --git a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js b/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js
index 21dd2882d..ac9233da6 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/StyledWrapper.js
@@ -2,15 +2,868 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
.swagger-root {
- height: calc(100vh - 4rem);
- border: solid 1px ${(props) => props.theme.codemirror.border};
+ height: calc(100vh - 7rem);
+ border-left: solid 1px ${(props) => props.theme.border.border1};
+ overflow-y: auto;
+ background: ${(props) => props.theme.bg};
+ padding-bottom: 20px;
- &.dark {
- .swagger-ui {
- filter: invert(88%) hue-rotate(180deg);
+ /* ── Global reset ── */
+ .swagger-ui {
+ font-family: inherit;
+ font-size: ${(props) => props.theme.font.size.base};
+ color: ${(props) => props.theme.text};
+
+ * {
+ border-color: ${(props) => props.theme.border.border1};
}
- .swagger-ui .microlight {
- filter: invert(100%) hue-rotate(180deg);
+
+ .auth-container {
+ padding: 0;
+ }
+
+ select {
+ box-shadow: none !important;
+ }
+
+ .wrapper {
+ padding: 0 20px;
+ max-width: none;
+ }
+
+ /* ── Info section ── */
+ .info {
+ margin: 16px 0 12px;
+
+ hgroup.main {
+ margin: 0;
+ }
+
+ .title {
+ font-size: 16px;
+ font-weight: 600;
+ color: ${(props) => props.theme.text};
+
+ small {
+ padding: 2px 6px !important;
+ font-size: 10px;
+ vertical-align: middle;
+ border-radius: 3px;
+
+ pre {
+ color: ${(props) => props.theme.text} !important;
+ font-size: 10px;
+ }
+ }
+ }
+
+ .base-url {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ .description {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+
+ p, li {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ margin: 3px 0;
+ line-height: 1.5;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: ${(props) => props.theme.text};
+ }
+
+ a {
+ color: ${(props) => props.theme.textLink};
+ }
+ }
+ }
+
+ /* Version / OAS badges */
+ .version-stamp span.version {
+ background: ${(props) => props.theme.border.border1} !important;
+ border: 1px solid ${(props) => props.theme.colors.text.muted} !important;
+ color: ${(props) => props.theme.text} !important;
+ font-size: 9px;
+ padding: 2px 6px;
+ border-radius: 3px;
+ }
+
+ .version-pragma {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ /* ── Tag section headings ── */
+ .opblock-tag-section {
+ .opblock-tag {
+ font-size: ${(props) => props.theme.font.size.md};
+ color: ${(props) => props.theme.text};
+ border-bottom: none;
+ padding: 0;
+
+ &:hover {
+ background: ${(props) => props.theme.background.mantle};
+ }
+
+ a {
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ small {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ padding: 0 10px;
+ }
+ }
+ }
+
+ /* ── Operation blocks (GET, POST, PUT, DELETE, PATCH) ── */
+ .opblock {
+ margin: 0 0 8px;
+ border-radius: 4px;
+ border: 1px solid ${(props) => props.theme.border.border1} !important;
+ background: ${(props) => props.theme.bg} !important;
+ box-shadow: none !important;
+
+ .opblock-summary {
+ padding: 6px 10px;
+ border: none !important;
+ background: transparent !important;
+
+ .opblock-summary-method {
+ font-size: 10px;
+ font-weight: 700;
+ padding: 3px 8px;
+ min-width: 50px;
+ text-align: center;
+ border-radius: 3px;
+ }
+
+ .opblock-summary-path {
+ font-size: ${(props) => props.theme.font.size.sm};
+
+ a, span {
+ color: ${(props) => props.theme.text} !important;
+ }
+ }
+
+ .opblock-summary-description {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ .opblock-summary-control {
+ svg {
+ fill: ${(props) => props.theme.colors.text.muted};
+ width: 14px;
+ height: 14px;
+ }
+ }
+ }
+
+ .opblock-body {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ background: ${(props) => props.theme.bg};
+ border-top: 1px solid ${(props) => props.theme.border.border1};
+
+ .opblock-description-wrapper,
+ .opblock-section {
+ p {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: ${(props) => props.theme.font.size.sm};
+ }
+ }
+
+ .tab-header .tab-item {
+ color: ${(props) => props.theme.colors.text.muted};
+
+ &.active {
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ select {
+ color: ${(props) => props.theme.text};
+ background: ${(props) => props.theme.bg};
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 3px;
+ font-size: ${(props) => props.theme.font.size.xs};
+ padding: 2px 6px;
+ }
+
+ input[type="text"] {
+ color: ${(props) => props.theme.text};
+ background: ${(props) => props.theme.bg};
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 3px;
+ font-size: ${(props) => props.theme.font.size.sm};
+ }
+ }
+ }
+
+ /* Method badge colors — keep them but tone down */
+ .opblock.opblock-get .opblock-summary-method { background: #61affe; color: #fff; }
+ .opblock.opblock-post .opblock-summary-method { background: #49cc90; color: #fff; }
+ .opblock.opblock-put .opblock-summary-method { background: #fca130; color: #fff; }
+ .opblock.opblock-delete .opblock-summary-method { background: #f93e3e; color: #fff; }
+ .opblock.opblock-patch .opblock-summary-method { background: #50e3c2; color: #000; }
+
+ /* Lock / authorization icons */
+ .authorization__btn {
+
+ svg {
+ fill: ${(props) => props.theme.colors.text.muted};
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ /* ── Tables ── */
+ table {
+ font-size: ${(props) => props.theme.font.size.sm};
+
+ thead {
+ tr {
+ th {
+ font-size: ${(props) => props.theme.font.size.xs} !important;
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ border-bottom: 1px solid ${(props) => props.theme.border.border1} !important;
+ padding: 6px 0;
+ }
+ }
+ }
+
+ td {
+ padding: 6px 0;
+ border-bottom: 1px solid ${(props) => props.theme.border.border1};
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ .parameter__name {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+
+ &.required::after {
+ color: ${(props) => props.theme.colors.text.danger || '#c0392b'};
+ font-size: ${(props) => props.theme.font.size.xs};
+ }
+ }
+
+ .parameter__type {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ .parameter__in {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ /* ── Models / Schemas ── */
+ section.models {
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 4px;
+ background: ${(props) => props.theme.bg};
+ padding-bottom: 0px;
+ margin-bottom: 40px;
+ margin-top: 8px;
+
+ h4 {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ border-bottom: none;
+ padding: 6px 10px;
+ margin: 0;
+
+ svg {
+ fill: ${(props) => props.theme.colors.text.muted};
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ .model-container {
+ background: ${(props) => props.theme.bg} !important;
+ margin: 0;
+ padding: 4px 8px;
+ border-bottom: 1px solid ${(props) => props.theme.border.border1};
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ .model-box {
+ background: ${(props) => props.theme.bg} !important;
+ padding: 2px 0;
+ }
+ }
+ }
+
+ .model {
+ font-size: 11px;
+ color: ${(props) => props.theme.text};
+ line-height: 1.4;
+
+ .prop-type {
+ color: ${(props) => props.theme.textLink};
+ font-size: 11px;
+ }
+
+ .prop-format {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: 10px;
+ }
+
+ span.prop-enum {
+ display: block;
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: 10px;
+ }
+ }
+
+ .model-example {
+
+ .tab li {
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ }
+ }
+
+ /* Model expand/collapse toggle */
+ .model-toggle {
+ cursor: pointer;
+ font-size: 10px;
+ color: ${(props) => props.theme.colors.text.muted};
+
+ &::after {
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+ }
+
+ /* Model box inner styling */
+ .model-box {
+ background: ${(props) => props.theme.bg} !important;
+ color: ${(props) => props.theme.text};
+ }
+
+ /* Inner model details */
+ .inner-object {
+ color: ${(props) => props.theme.text};
+ }
+
+ /* Model title (schema name) */
+ .model-title {
+ color: ${(props) => props.theme.text};
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+ /* ── JSON Schema 2020-12 (OpenAPI 3.1) schema overrides ── */
+ .json-schema-2020-12-accordion,
+ .json-schema-2020-12-expand-deep-button,
+ section.models h4 button,
+ .model-box button,
+ .models-control,
+ .opblock-summary,
+ .opblock-summary-control,
+ .opblock-tag {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
+ button:focus-visible,
+ .opblock-summary:focus-visible,
+ .opblock-tag:focus-visible,
+ .models-control:focus-visible {
+ outline: 2px solid ${(props) => props.theme.textLink} !important;
+ outline-offset: 2px;
+ }
+
+ .json-schema-2020-12__title {
+ font-size: 12px !important;
+ font-weight: 600;
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ .json-schema-2020-12-head {
+ padding: 4px 8px !important;
+ background: ${(props) => props.theme.bg} !important;
+
+ .json-schema-2020-12-accordion {
+ padding: 0 !important;
+ color: ${(props) => props.theme.text} !important;
+ background: transparent !important;
+ }
+
+ /* chevron / arrow icon */
+ .json-schema-2020-12-accordion__icon {
+ fill: ${(props) => props.theme.colors.text.muted} !important;
+ }
+
+ button.json-schema-2020-12-expand-deep-button {
+ font-size: 10px !important;
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ background: transparent !important;
+ padding: 0 4px !important;
+ }
+
+ strong.json-schema-2020-12__attribute--primary {
+ font-size: 11px !important;
+ color: ${(props) => props.theme.textLink} !important;
+ font-weight: normal;
+ }
+ }
+
+ .json-schema-2020-12-body {
+ font-size: 11px !important;
+ margin-left: 16px;
+ color: ${(props) => props.theme.text} !important;
+
+ .json-schema-2020-12-property {
+ margin-left: 8px;
+ color: ${(props) => props.theme.text} !important;
+ border-color: ${(props) => props.theme.border.border1} !important;
+ }
+
+ /* property names */
+ .json-schema-2020-12__title {
+ font-size: 11px !important;
+ font-weight: normal;
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ /* type badges inside expanded schema */
+ strong.json-schema-2020-12__attribute--primary {
+ font-size: 10px !important;
+ color: ${(props) => props.theme.textLink} !important;
+ font-weight: normal;
+ }
+
+ strong.json-schema-2020-12__attribute {
+ font-size: 10px !important;
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ font-weight: normal;
+ }
+ }
+
+ .json-schema-2020-12 {
+ font-size: 11px !important;
+ margin: 0 !important;
+ width: 100%;
+ height: 100%;
+ color: ${(props) => props.theme.text} !important;
+ background: ${(props) => props.theme.bg} !important;
+ }
+
+ /* JSON viewer (Examples section inside schema properties) */
+ .json-schema-2020-12-json-viewer {
+ background: transparent !important;
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__name {
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__name--secondary {
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ font-weight: normal !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value {
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value--secondary {
+ color: ${(props) => props.theme.colors.text.subtext0} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value--string,
+ .json-schema-2020-12-json-viewer__value--string.json-schema-2020-12-json-viewer__value--secondary {
+ color: ${(props) => props.theme.colors.text.green} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value--number,
+ .json-schema-2020-12-json-viewer__value--bigint,
+ .json-schema-2020-12-json-viewer__value--number.json-schema-2020-12-json-viewer__value--secondary,
+ .json-schema-2020-12-json-viewer__value--bigint.json-schema-2020-12-json-viewer__value--secondary {
+ color: ${(props) => props.theme.textLink} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value--boolean,
+ .json-schema-2020-12-json-viewer__value--boolean.json-schema-2020-12-json-viewer__value--secondary {
+ color: ${(props) => props.theme.colors.text.warning} !important;
+ }
+
+ .json-schema-2020-12-json-viewer__value--null,
+ .json-schema-2020-12-json-viewer__value--undefined {
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ }
+
+ /* enum/keyword example values container */
+ .json-schema-2020-12-keyword--examples,
+ [data-json-schema-keyword="examples"] {
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ /* Model collapse/expand all link */
+ span.model-toggle {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: 10px;
+ }
+
+ /* Brace styling in models */
+ .brace-open, .brace-close {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: 11px;
+ }
+
+ /* ── Code / Response blocks ── */
+ .microlight {
+ background: ${(props) => props.theme.codemirror.bg} !important;
+ color: ${(props) => props.theme.text} !important;
+ font-size: ${(props) => props.theme.font.size.xs};
+ border-radius: 4px;
+ padding: 8px;
+ border: 1px solid ${(props) => props.theme.border.border1};
+ }
+
+ .highlight-code {
+ background: ${(props) => props.theme.codemirror.bg} !important;
+
+ > .microlight {
+ border: none;
+ }
+ }
+
+ pre {
+ color: ${(props) => props.theme.text};
+ font-size: ${(props) => props.theme.font.size.xs};
+ border-radius: 4px;
+ }
+
+ .response-col_status {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ }
+
+ .response-col_description {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ .responses-inner {
+ h4, h5 {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ /* ── Buttons ── */
+ .btn {
+ font-size: ${(props) => props.theme.font.size.xs};
+ border-radius: 4px;
+ box-shadow: none !important;
+ color: ${(props) => props.theme.text};
+ border-color: ${(props) => props.theme.border.border1};
+ background: transparent;
+ }
+
+ .btn.authorize {
+ color: ${(props) => props.theme.text};
+ border-color: ${(props) => props.theme.border.border1};
+ background: transparent;
+
+ svg {
+ fill: ${(props) => props.theme.text};
+ }
+
+ span {
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ .btn.execute {
+ background: ${(props) => props.theme.primary?.solid || props.theme.textLink};
+ color: #fff;
+ border-color: transparent;
+ }
+
+ .btn-group {
+ .btn {
+ background: ${(props) => props.theme.bg};
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ /* ── Links ── */
+ a {
+ color: ${(props) => props.theme.textLink};
+ }
+
+ /* ── Servers / Scheme container ── */
+ .scheme-container {
+ background: ${(props) => props.theme.background.mantle} !important;
+ border-top: 1px solid ${(props) => props.theme.border.border1};
+ border-bottom: 1px solid ${(props) => props.theme.border.border1};
+ padding: 10px;
+ box-shadow: none !important;
+
+ .schemes-title {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ label {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ select {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ background: ${(props) => props.theme.bg};
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 4px;
+ padding: 4px 8px;
+ }
+ }
+
+ /* ── SVGs / icons ── */
+ svg {
+ fill: ${(props) => props.theme.colors.text.muted};
+ }
+
+ svg.arrow {
+ fill: ${(props) => props.theme.text};
+ width: 12px;
+ height: 12px;
+ margin-left: 4px;
+ }
+
+ .expand-operation svg {
+ fill: ${(props) => props.theme.colors.text.muted};
+ width: 14px;
+ height: 14px;
+ }
+
+ /* ── Misc / catch-all ── */
+ .loading-container .loading::after {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: ${(props) => props.theme.font.size.sm};
+ }
+
+ .renderedMarkdown p {
+ color: ${(props) => props.theme.colors.text.muted};
+ font-size: ${(props) => props.theme.font.size.sm};
+ }
+
+ .opblock-section-header {
+ background: ${(props) => props.theme.background.mantle} !important;
+ box-shadow: none !important;
+ border-bottom: 1px solid ${(props) => props.theme.border.border1};
+ padding: 6px 10px;
+
+ h4 {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ }
+
+ label {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+ }
+
+ .copy-to-clipboard {
+ button {
+ background: ${(props) => props.theme.background.mantle};
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 3px;
+ }
+ }
+
+ /* Dialog / modal overrides */
+ .dialog-ux {
+ .modal-ux {
+ background: ${(props) => props.theme.bg};
+ border: 1px solid ${(props) => props.theme.border.border1};
+ border-radius: 6px;
+ color: ${(props) => props.theme.text};
+ box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+
+ .modal-ux-header {
+ border-bottom: 1px solid ${(props) => props.theme.border.border1};
+ padding: 12px 0px;
+
+ h3 {
+ font-size: ${(props) => props.theme.font.size.md};
+ font-weight: 600;
+ color: ${(props) => props.theme.text};
+ }
+
+ .close-modal {
+ opacity: 0.6;
+ &:hover { opacity: 1; }
+ svg { fill: ${(props) => props.theme.text}; }
+ }
+ }
+
+ .modal-ux-content {
+ color: ${(props) => props.theme.text};
+ padding: 12px 16px;
+
+ p {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+
+ /* Section headings like "api_key (apiKey)" */
+ h4, h5, h6 {
+ font-size: ${(props) => props.theme.font.size.sm};
+ font-weight: 600;
+ color: ${(props) => props.theme.textLink};
+ margin: 12px 0 6px;
+ }
+
+ /* Labels: "Name:", "In:", "Flow:", "Value:", etc. */
+ label {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+
+ > span {
+ font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.colors.text.muted};
+ }
+ }
+
+ /* "Scopes:" heading */
+ .scopes h2 {
+ font-size: ${(props) => props.theme.font.size.sm} !important;
+ font-weight: 500;
+ color: ${(props) => props.theme.text} !important;
+ }
+
+ /* Scope item name + description */
+ .scopes .checkbox {
+ p.name {
+ font-size: ${(props) => props.theme.font.size.sm} !important;
+ color: ${(props) => props.theme.text} !important;
+ font-weight: 500;
+ margin: 0;
+ }
+
+ p.description {
+ font-size: ${(props) => props.theme.font.size.xs} !important;
+ color: ${(props) => props.theme.colors.text.muted} !important;
+ margin: 0;
+ }
+ }
+
+ /* Text inputs */
+ input[type="text"],
+ input[type="password"],
+ input[type="email"] {
+ background: ${(props) => props.theme.background.mantle} !important;
+ color: ${(props) => props.theme.text} !important;
+ border: 1px solid ${(props) => props.theme.border.border1} !important;
+ border-radius: 4px !important;
+ font-size: ${(props) => props.theme.font.size.sm} !important;
+ padding: 6px 10px !important;
+ outline: none !important;
+ box-shadow: none !important;
+
+ &:focus {
+ border-color: ${(props) => props.theme.textLink} !important;
+ outline: none !important;
+ box-shadow: none !important;
+ }
+ }
+
+ /* Checkboxes — custom styled to match theme */
+ input[type="checkbox"] {
+ appearance: none !important;
+ -webkit-appearance: none !important;
+ width: 14px !important;
+ height: 14px !important;
+ min-width: 14px;
+ border: 1px solid ${(props) => props.theme.border.border1} !important;
+ border-radius: 3px !important;
+ background: ${(props) => props.theme.background.mantle} !important;
+ cursor: pointer;
+ position: relative;
+ vertical-align: middle;
+
+ &:checked {
+ background: ${(props) => props.theme.textLink} !important;
+ border-color: ${(props) => props.theme.textLink} !important;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 3px;
+ top: 1px;
+ width: 5px;
+ height: 8px;
+ border: 2px solid #fff;
+ border-top: none;
+ border-left: none;
+ transform: rotate(45deg);
+ }
+ }
+ }
+
+ /* "select all / select none" links */
+ a {
+ font-size: ${(props) => props.theme.font.size.xs};
+ color: ${(props) => props.theme.textLink};
+ }
+
+ /* Dividers between auth sections */
+ hr {
+ border-color: ${(props) => props.theme.border.border1};
+ margin: 12px 0;
+ }
+
+ /* Authorize / Close buttons */
+ .btn-done,
+ .auth-btn-wrapper .btn {
+ font-size: ${(props) => props.theme.font.size.sm};
+ border-radius: 4px;
+ padding: 6px 16px;
+ border: 1px solid ${(props) => props.theme.border.border1};
+ background: transparent;
+ color: ${(props) => props.theme.text};
+ cursor: pointer;
+ outline: none !important;
+ box-shadow: none !important;
+
+ &:hover {
+ background: ${(props) => props.theme.background.mantle};
+ }
+
+ &.modal-btn-operation {
+ background: ${(props) => props.theme.textLink};
+ color: #fff;
+ border-color: transparent;
+
+ &:hover {
+ opacity: 0.9;
+ }
+ }
+ }
+ }
+ }
+
+ .backdrop-ux {
+ background: rgba(0, 0, 0, 0.5);
+ }
}
}
}
diff --git a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js b/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js
index 3e59f3bc5..d37b6b63c 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/Renderers/Swagger/index.js
@@ -1,16 +1,11 @@
import SwaggerUI from 'swagger-ui-react';
import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme';
-
-const Swagger = ({ string }) => {
- const { displayedTheme } = useTheme();
-
- console.log('string', string);
+const Swagger = ({ spec }) => {
return (
-
-
+
+
);
diff --git a/packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js b/packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js
new file mode 100644
index 000000000..97d14c65e
--- /dev/null
+++ b/packages/bruno-app/src/components/ApiSpecPanel/SpecViewer.js
@@ -0,0 +1,71 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useSelector } from 'react-redux';
+import { IconDeviceFloppy } from '@tabler/icons';
+import CodeEditor from './FileEditor/CodeEditor/index';
+import Swagger from './Renderers/Swagger';
+
+/**
+ * Shared split-pane spec viewer: CodeEditor (left) + Swagger preview (right).
+ *
+ * Props:
+ * - content (string) The spec content (YAML/JSON string)
+ * - readOnly (boolean) If true, editor is not editable and save icon is hidden
+ * - onSave (function) Called with current editor content on save (editable mode only)
+ */
+const SpecViewer = ({ content, readOnly, onSave }) => {
+ const { displayedTheme, theme } = useTheme();
+ const preferences = useSelector((state) => state.app.preferences);
+
+ const [editorContent, setEditorContent] = useState(content);
+
+ // Sync editor when saved content changes from outside (e.g. after save completes)
+ useEffect(() => {
+ setEditorContent(content);
+ }, [content]);
+
+ const hasChanges = !readOnly && editorContent !== content;
+
+ const handleSave = () => {
+ if (onSave) onSave(editorContent);
+ };
+
+ return (
+
+
+
+
+ setEditorContent(val)}
+ onSave={readOnly ? undefined : handleSave}
+ mode="yaml"
+ font={get(preferences, 'font.codeFont', 'default')}
+ />
+ {!readOnly && onSave && (
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SpecViewer;
diff --git a/packages/bruno-app/src/components/ApiSpecPanel/index.js b/packages/bruno-app/src/components/ApiSpecPanel/index.js
index f6359ffdb..35f574000 100644
--- a/packages/bruno-app/src/components/ApiSpecPanel/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/index.js
@@ -3,13 +3,11 @@ import find from 'lodash/find';
import { useSelector, useDispatch } from 'react-redux';
import { IconFileCode, IconDots } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
-import FileEditor from './FileEditor';
+import SpecViewer from './SpecViewer';
import Dropdown from 'components/Dropdown';
-import { openApiSpec } from 'providers/ReduxStore/slices/apiSpec';
+import { openApiSpec, saveApiSpecToFile } from 'providers/ReduxStore/slices/apiSpec';
import { useState } from 'react';
import CreateApiSpec from 'components/Sidebar/ApiSpecs/CreateApiSpec';
-import { Suspense } from 'react';
-import Swagger from './Renderers/Swagger';
import toast from 'react-hot-toast';
const ApiSpecPanel = () => {
@@ -78,18 +76,10 @@ const ApiSpecPanel = () => {
+
+
+ {isCollapsed ? (
+
+ ) : (
+
+ )}
+
+ {title}
+
+ {!isCollapsed && (
+
+
+ {hasOldContent ? oldContent :
}
+
+
+ {hasNewContent ? newContent :
}
+
+
+ )}
+
+
+
+
+ |
+ Field |
+ Value |
+
+
+
+
+ |
+ {modeStatus !== 'unchanged' && (
+
+ {modeStatus === 'added' ? 'A' : modeStatus === 'deleted' ? 'D' : 'M'}
+
+ )}
+ |
+ Auth Mode |
+ {AUTH_TYPE_LABELS[currentMode] || currentMode} |
+
+
+
+
+
+ {section.label}
+ {section.status !== 'unchanged' && (
+
+ {section.status === 'added' ? 'A' : section.status === 'deleted' ? 'D' : 'M'}
+
+ )}
+
+
+
+
+ |
+ Field |
+ Value |
+
+
+
+ {section.fields.map((field, index) => (
+
+ |
+ {field.status !== 'unchanged' && (
+
+ {field.status === 'added' ? 'A' : field.status === 'deleted' ? 'D' : 'M'}
+
+ )}
+ |
+ {field.key} |
+ {field.value} |
+
+ ))}
+
+
+
+ {segment.text || '\u00A0'}
+
+ ));
+ };
+
+ const renderFormData = (items, otherItems) => {
+ if (!items || items.length === 0) return null;
+
+ const otherItemMap = new Map();
+ (otherItems || []).forEach((item) => {
+ otherItemMap.set(item.name, item);
+ });
+
+ return (
+
+ );
+ };
+
+ const renderFileBody = (files, otherFiles) => {
+ if (!files || files.length === 0) return null;
+
+ const otherFileMap = new Map();
+ (otherFiles || []).forEach((f, idx) => {
+ otherFileMap.set(f.filePath || idx, f);
+ });
+
+ return (
+
+ );
+ };
+
+ const renderMessageBody = (messages, otherMessages, typeLabel) => {
+ if (!messages || messages.length === 0) return null;
+
+ return messages.map((msg, index) => {
+ const otherMsg = (otherMessages || [])[index];
+ const contentDiff = showSide === 'old'
+ ? computeLineDiffForOld(msg.content || '', otherMsg?.content || '')
+ : computeLineDiffForNew(otherMsg?.content || '', msg.content || '');
+
+ let msgStatus = 'unchanged';
+ if (!otherMsg) {
+ msgStatus = showSide === 'old' ? 'deleted' : 'added';
+ } else if (msg.name !== otherMsg.name || msg.type !== otherMsg.type) {
+ msgStatus = 'modified';
+ }
+
+ return (
+
+
+ {typeLabel}: {msg.name || `Message ${index + 1}`}{msg.type ? ` (${msg.type})` : ''}
+ {msgStatus !== 'unchanged' && (
+
+ {msgStatus === 'added' ? 'A' : msgStatus === 'deleted' ? 'D' : 'M'}
+
+ )}
+
+
{renderLineDiff(contentDiff)}
+
+
Query
+
{renderLineDiff(queryDiff)}
+
+
Variables
+
{renderLineDiff(variablesDiff)}
+
+ {renderLineDiff(diffSegments)}
+
+ );
+ };
+
+ const renderBodyType = (type) => {
+ const currentVal = currentBody[type];
+ const otherVal = otherBody[type];
+
+ if (currentVal === undefined && otherVal === undefined) return null;
+
+ // For text-based body types
+ if (TEXT_BODY_TYPES.includes(type)) {
+ if (!currentVal) return null;
+ return renderTextBody(currentVal, otherVal);
+ }
+
+ // For form data types
+ if (FORM_BODY_TYPES.includes(type)) {
+ return renderFormData(currentVal, otherVal);
+ }
+
+ // GraphQL
+ if (type === 'graphql') {
+ return renderGraphqlBody(currentVal, otherVal);
+ }
+
+ // File
+ if (type === 'file') {
+ return renderFileBody(currentVal, otherVal);
+ }
+
+ // gRPC
+ if (type === 'grpc') {
+ return renderMessageBody(currentVal, otherVal, 'gRPC');
+ }
+
+ // WebSocket
+ if (type === 'ws') {
+ return renderMessageBody(currentVal, otherVal, 'WebSocket');
+ }
+
+ return null;
+ };
+
+ // Show body mode if present
+ const currentMode = currentBody.mode;
+ const otherMode = otherBody.mode;
+ const modeStatus = currentMode !== otherMode ? (otherMode === undefined ? (showSide === 'old' ? 'deleted' : 'added') : 'modified') : 'unchanged';
+
+ if (bodyTypes.length === 0 && !currentMode) {
+ return null;
+ }
+
+ return (
+ <>
+ {currentMode && (
+
+
+
+
+ |
+ Field |
+ Value |
+
+
+
+
+ |
+ {modeStatus !== 'unchanged' && (
+
+ {modeStatus === 'added' ? 'A' : modeStatus === 'deleted' ? 'D' : 'M'}
+
+ )}
+ |
+ Body Mode |
+ {BODY_TYPE_LABELS[currentMode] || currentMode} |
+
+
+
+
+
+ {BODY_TYPE_LABELS[type] || type}
+ {hasChanges && (
+
+ {otherVal === undefined ? (showSide === 'old' ? 'D' : 'A') : 'M'}
+
+ )}
+
+ {content}
+
+ No content to display
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
{oldLabel}
+
{newLabel}
+
+
+
+ {sections.map(({ key, title, Component, hasContent: checkContent }) => {
+ const hasOld = oldData && checkContent(oldData);
+ const hasNew = newData && checkContent(newData);
+
+ if (!hasOld && !hasNew) {
+ return null;
+ }
+
+ // Hide sections without changes entirely when hideUnchanged is enabled
+ if (hideUnchanged && sectionHasChanges && !sectionHasChanges(key, oldData, newData)) {
+ return null;
+ }
+
+ return (
+ toggleSection(key)}
+ hasOldContent={hasOld}
+ hasNewContent={hasNew}
+ oldContent={
+
+ }
+ newContent={
+
+ }
+ />
+ );
+ })}
+
+
+
+
+ {currentMethod?.toUpperCase() || 'GET'}
+
+
+ {renderDiffSegments(urlDiffSegments)}
+
+
+
- value
' })).toBe('- value
');
+ });
+
+ it('should return sparql content', () => {
+ expect(getBodyContent({ sparql: 'SELECT * WHERE { ?s ?p ?o }' })).toBe('SELECT * WHERE { ?s ?p ?o }');
+ });
+
+ it('should return graphql query content', () => {
+ expect(getBodyContent({ graphql: { query: 'query { users { id } }' } })).toBe('query { users { id } }');
+ });
+
+ it('should return generic content', () => {
+ expect(getBodyContent({ content: 'generic content' })).toBe('generic content');
+ });
+
+ it('should return empty string for graphql without query', () => {
+ expect(getBodyContent({ graphql: {} })).toBe('');
+ expect(getBodyContent({ graphql: { variables: '{}' } })).toBe('');
+ });
+
+ it('should prioritize json over other types', () => {
+ expect(getBodyContent({ json: '{"a":1}', text: 'text' })).toBe('{"a":1}');
+ });
+ });
+
+ describe('getBodyMode', () => {
+ it('should return none for null or undefined body', () => {
+ expect(getBodyMode(null)).toBe('none');
+ expect(getBodyMode(undefined)).toBe('none');
+ });
+
+ it('should return none for empty body', () => {
+ expect(getBodyMode({})).toBe('none');
+ });
+
+ it('should return json mode', () => {
+ expect(getBodyMode({ json: '{}' })).toBe('json');
+ expect(getBodyMode({ json: '' })).toBe('json');
+ });
+
+ it('should return text mode', () => {
+ expect(getBodyMode({ text: 'content' })).toBe('text');
+ expect(getBodyMode({ text: '' })).toBe('text');
+ });
+
+ it('should return xml mode', () => {
+ expect(getBodyMode({ xml: '' })).toBe('xml');
+ });
+
+ it('should return sparql mode', () => {
+ expect(getBodyMode({ sparql: 'SELECT *' })).toBe('sparql');
+ });
+
+ it('should return graphql mode', () => {
+ expect(getBodyMode({ graphql: { query: '' } })).toBe('graphql');
+ });
+
+ it('should return formUrlEncoded mode', () => {
+ expect(getBodyMode({ formUrlEncoded: [] })).toBe('formUrlEncoded');
+ expect(getBodyMode({ formUrlEncoded: [{ name: 'key', value: 'val' }] })).toBe('formUrlEncoded');
+ });
+
+ it('should return multipartForm mode', () => {
+ expect(getBodyMode({ multipartForm: [] })).toBe('multipartForm');
+ });
+
+ it('should return file mode', () => {
+ expect(getBodyMode({ file: [] })).toBe('file');
+ });
+
+ it('should return grpc mode', () => {
+ expect(getBodyMode({ grpc: [] })).toBe('grpc');
+ });
+
+ it('should return ws mode', () => {
+ expect(getBodyMode({ ws: [] })).toBe('ws');
+ });
+
+ it('should return none for explicit none mode', () => {
+ expect(getBodyMode({ mode: 'none' })).toBe('none');
+ });
+
+ it('should prioritize json over other modes', () => {
+ expect(getBodyMode({ json: '{}', text: 'text' })).toBe('json');
+ });
+ });
+
+ describe('getMethod', () => {
+ it('should return GET as default', () => {
+ expect(getMethod(null)).toBe('GET');
+ expect(getMethod(undefined)).toBe('GET');
+ expect(getMethod({})).toBe('GET');
+ });
+
+ it('should return request method', () => {
+ expect(getMethod({ request: { method: 'POST' } })).toBe('POST');
+ expect(getMethod({ request: { method: 'PUT' } })).toBe('PUT');
+ expect(getMethod({ request: { method: 'DELETE' } })).toBe('DELETE');
+ });
+
+ it('should return GET when request exists but method is missing', () => {
+ expect(getMethod({ request: {} })).toBe('GET');
+ });
+ });
+
+ describe('getUrl', () => {
+ it('should return empty string as default', () => {
+ expect(getUrl(null)).toBe('');
+ expect(getUrl(undefined)).toBe('');
+ expect(getUrl({})).toBe('');
+ });
+
+ it('should return request url', () => {
+ expect(getUrl({ request: { url: 'https://api.example.com/users' } })).toBe('https://api.example.com/users');
+ });
+
+ it('should return empty string when request exists but url is missing', () => {
+ expect(getUrl({ request: {} })).toBe('');
+ });
+
+ it('should return url with different protocols', () => {
+ expect(getUrl({ request: { url: 'http://localhost:3000' } })).toBe('http://localhost:3000');
+ expect(getUrl({ request: { url: 'ws://localhost:8080' } })).toBe('ws://localhost:8080');
+ expect(getUrl({ request: { url: 'grpc://localhost:50051' } })).toBe('grpc://localhost:50051');
+ });
+ });
+
+ describe('computeItemDiffStatus', () => {
+ it('should return deleted when other item is missing and showing old side', () => {
+ expect(computeItemDiffStatus({ name: 'key', value: 'val' }, null, 'old')).toBe('deleted');
+ expect(computeItemDiffStatus({ name: 'key', value: 'val' }, undefined, 'old')).toBe('deleted');
+ });
+
+ it('should return added when other item is missing and showing new side', () => {
+ expect(computeItemDiffStatus({ name: 'key', value: 'val' }, null, 'new')).toBe('added');
+ expect(computeItemDiffStatus({ name: 'key', value: 'val' }, undefined, 'new')).toBe('added');
+ });
+
+ it('should return unchanged when items are equal', () => {
+ const item = { name: 'key', value: 'val', enabled: true };
+ const otherItem = { name: 'key', value: 'val', enabled: true };
+ expect(computeItemDiffStatus(item, otherItem, 'old')).toBe('unchanged');
+ expect(computeItemDiffStatus(item, otherItem, 'new')).toBe('unchanged');
+ });
+
+ it('should return modified when values differ', () => {
+ const item = { name: 'key', value: 'val1', enabled: true };
+ const otherItem = { name: 'key', value: 'val2', enabled: true };
+ expect(computeItemDiffStatus(item, otherItem, 'old')).toBe('modified');
+ });
+
+ it('should return modified when enabled status differs', () => {
+ const item = { name: 'key', value: 'val', enabled: true };
+ const otherItem = { name: 'key', value: 'val', enabled: false };
+ expect(computeItemDiffStatus(item, otherItem, 'old')).toBe('modified');
+ });
+
+ it('should handle undefined enabled as different from explicit false', () => {
+ const item = { name: 'key', value: 'val' };
+ const otherItem = { name: 'key', value: 'val', enabled: false };
+ expect(computeItemDiffStatus(item, otherItem, 'old')).toBe('modified');
+ });
+ });
+});
diff --git a/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.js b/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.js
new file mode 100644
index 000000000..5f77b13bb
--- /dev/null
+++ b/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.js
@@ -0,0 +1,202 @@
+// Matches word-boundary separators: whitespace, slashes, query/path delimiters (?&=), dots, hyphens, underscores, colons, @
+const WORD_SEPARATOR = /[\s\/\?\&\=\.\-\_\:\@]/;
+
+const splitWithSeparators = (str) => {
+ const result = [];
+ let current = '';
+ for (const char of str) {
+ if (WORD_SEPARATOR.test(char)) {
+ if (current) {
+ result.push(current);
+ current = '';
+ }
+ result.push(char);
+ } else {
+ current += char;
+ }
+ }
+ if (current) {
+ result.push(current);
+ }
+ return result;
+};
+
+export const computeWordDiffForOld = (oldStr, newStr) => {
+ if (oldStr === newStr) {
+ return [{ text: oldStr, status: 'unchanged' }];
+ }
+
+ if (!oldStr) {
+ return [];
+ }
+
+ if (!newStr) {
+ return [{ text: oldStr, status: 'deleted' }];
+ }
+
+ const oldWords = splitWithSeparators(oldStr);
+ const newWords = splitWithSeparators(newStr);
+ const lcs = computeLCS(oldWords, newWords);
+
+ const segments = [];
+ let oldIdx = 0;
+ let lcsIdx = 0;
+
+ while (oldIdx < oldWords.length) {
+ if (lcsIdx < lcs.length && oldIdx === lcs[lcsIdx].oldIndex) {
+ segments.push({ text: oldWords[oldIdx], status: 'unchanged' });
+ lcsIdx++;
+ } else {
+ segments.push({ text: oldWords[oldIdx], status: 'deleted' });
+ }
+ oldIdx++;
+ }
+
+ return mergeSegments(segments);
+};
+
+export const computeWordDiffForNew = (oldStr, newStr) => {
+ if (oldStr === newStr) {
+ return [{ text: newStr, status: 'unchanged' }];
+ }
+
+ if (!newStr) {
+ return [];
+ }
+
+ if (!oldStr) {
+ return [{ text: newStr, status: 'added' }];
+ }
+
+ const oldWords = splitWithSeparators(oldStr);
+ const newWords = splitWithSeparators(newStr);
+ const lcs = computeLCS(oldWords, newWords);
+
+ const segments = [];
+ let newIdx = 0;
+ let lcsIdx = 0;
+
+ while (newIdx < newWords.length) {
+ if (lcsIdx < lcs.length && newIdx === lcs[lcsIdx].newIndex) {
+ segments.push({ text: newWords[newIdx], status: 'unchanged' });
+ lcsIdx++;
+ } else {
+ segments.push({ text: newWords[newIdx], status: 'added' });
+ }
+ newIdx++;
+ }
+
+ return mergeSegments(segments);
+};
+
+const mergeSegments = (segments) => {
+ const merged = [];
+ for (const segment of segments) {
+ if (merged.length > 0 && merged[merged.length - 1].status === segment.status) {
+ merged[merged.length - 1].text += segment.text;
+ } else {
+ merged.push({ ...segment });
+ }
+ }
+ return merged;
+};
+
+const computeLCS = (arr1, arr2) => {
+ const m = arr1.length;
+ const n = arr2.length;
+ const dp = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));
+
+ for (let i = 1; i <= m; i++) {
+ for (let j = 1; j <= n; j++) {
+ if (arr1[i - 1] === arr2[j - 1]) {
+ dp[i][j] = dp[i - 1][j - 1] + 1;
+ } else {
+ dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+ }
+ }
+ }
+
+ const lcs = [];
+ let i = m, j = n;
+ while (i > 0 && j > 0) {
+ if (arr1[i - 1] === arr2[j - 1]) {
+ lcs.unshift({ value: arr1[i - 1], oldIndex: i - 1, newIndex: j - 1 });
+ i--;
+ j--;
+ } else if (dp[i - 1][j] > dp[i][j - 1]) {
+ i--;
+ } else {
+ j--;
+ }
+ }
+
+ return lcs;
+};
+
+export const computeLineDiffForOld = (oldStr, newStr) => {
+ if (oldStr === newStr) {
+ return (oldStr || '').split('\n').map((line) => ({ text: line, status: 'unchanged' }));
+ }
+
+ if (!oldStr) {
+ return [];
+ }
+
+ if (!newStr) {
+ return oldStr.split('\n').map((line) => ({ text: line, status: 'deleted' }));
+ }
+
+ const oldLines = oldStr.split('\n');
+ const newLines = newStr.split('\n');
+ const lcs = computeLCS(oldLines, newLines);
+
+ const segments = [];
+ let oldIdx = 0;
+ let lcsIdx = 0;
+
+ while (oldIdx < oldLines.length) {
+ if (lcsIdx < lcs.length && oldIdx === lcs[lcsIdx].oldIndex) {
+ segments.push({ text: oldLines[oldIdx], status: 'unchanged' });
+ lcsIdx++;
+ } else {
+ segments.push({ text: oldLines[oldIdx], status: 'deleted' });
+ }
+ oldIdx++;
+ }
+
+ return segments;
+};
+
+export const computeLineDiffForNew = (oldStr, newStr) => {
+ if (oldStr === newStr) {
+ return (newStr || '').split('\n').map((line) => ({ text: line, status: 'unchanged' }));
+ }
+
+ if (!newStr) {
+ return [];
+ }
+
+ if (!oldStr) {
+ return newStr.split('\n').map((line) => ({ text: line, status: 'added' }));
+ }
+
+ const oldLines = oldStr.split('\n');
+ const newLines = newStr.split('\n');
+ const lcs = computeLCS(oldLines, newLines);
+
+ const segments = [];
+ let newIdx = 0;
+ let lcsIdx = 0;
+
+ while (newIdx < newLines.length) {
+ if (lcsIdx < lcs.length && newIdx === lcs[lcsIdx].newIndex) {
+ segments.push({ text: newLines[newIdx], status: 'unchanged' });
+ lcsIdx++;
+ } else {
+ segments.push({ text: newLines[newIdx], status: 'added' });
+ }
+ newIdx++;
+ }
+
+ return segments;
+};
diff --git a/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.spec.js b/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.spec.js
new file mode 100644
index 000000000..1891a8f8a
--- /dev/null
+++ b/packages/bruno-app/src/components/Git/VisualDiffViewer/utils/diffUtils.spec.js
@@ -0,0 +1,198 @@
+const { describe, it, expect } = require('@jest/globals');
+
+import {
+ computeWordDiffForOld,
+ computeWordDiffForNew,
+ computeLineDiffForOld,
+ computeLineDiffForNew
+} from './diffUtils';
+
+describe('diffUtils', () => {
+ describe('computeWordDiffForOld', () => {
+ it('should return unchanged for identical strings', () => {
+ expect(computeWordDiffForOld('hello world', 'hello world')).toEqual([
+ { text: 'hello world', status: 'unchanged' }
+ ]);
+ });
+
+ it('should return empty array for empty old string', () => {
+ expect(computeWordDiffForOld('', 'new text')).toEqual([]);
+ expect(computeWordDiffForOld(null, 'new text')).toEqual([]);
+ expect(computeWordDiffForOld(undefined, 'new text')).toEqual([]);
+ });
+
+ it('should return deleted for entire old string when new is empty', () => {
+ expect(computeWordDiffForOld('old text', '')).toEqual([
+ { text: 'old text', status: 'deleted' }
+ ]);
+ expect(computeWordDiffForOld('old text', null)).toEqual([
+ { text: 'old text', status: 'deleted' }
+ ]);
+ });
+
+ it('should detect deleted words', () => {
+ const result = computeWordDiffForOld('hello world', 'hello');
+ expect(result).toContainEqual({ text: 'hello', status: 'unchanged' });
+ expect(result.some((s) => s.status === 'deleted' && s.text.includes('world'))).toBe(true);
+ });
+
+ it('should handle URL paths', () => {
+ const result = computeWordDiffForOld(
+ 'https://api.example.com/users/123',
+ 'https://api.example.com/users/456'
+ );
+ expect(result.some((s) => s.status === 'unchanged')).toBe(true);
+ expect(result.some((s) => s.status === 'deleted')).toBe(true);
+ });
+
+ it('should preserve separators', () => {
+ const result = computeWordDiffForOld('a/b/c', 'a/b/c');
+ expect(result).toEqual([{ text: 'a/b/c', status: 'unchanged' }]);
+ });
+ });
+
+ describe('computeWordDiffForNew', () => {
+ it('should return unchanged for identical strings', () => {
+ expect(computeWordDiffForNew('hello world', 'hello world')).toEqual([
+ { text: 'hello world', status: 'unchanged' }
+ ]);
+ });
+
+ it('should return empty array for empty new string', () => {
+ expect(computeWordDiffForNew('old text', '')).toEqual([]);
+ expect(computeWordDiffForNew('old text', null)).toEqual([]);
+ expect(computeWordDiffForNew('old text', undefined)).toEqual([]);
+ });
+
+ it('should return added for entire new string when old is empty', () => {
+ expect(computeWordDiffForNew('', 'new text')).toEqual([
+ { text: 'new text', status: 'added' }
+ ]);
+ expect(computeWordDiffForNew(null, 'new text')).toEqual([
+ { text: 'new text', status: 'added' }
+ ]);
+ });
+
+ it('should detect added words', () => {
+ const result = computeWordDiffForNew('hello', 'hello world');
+ expect(result).toContainEqual({ text: 'hello', status: 'unchanged' });
+ expect(result.some((s) => s.status === 'added' && s.text.includes('world'))).toBe(true);
+ });
+
+ it('should handle URL paths', () => {
+ const result = computeWordDiffForNew(
+ 'https://api.example.com/users/123',
+ 'https://api.example.com/users/456'
+ );
+ expect(result.some((s) => s.status === 'unchanged')).toBe(true);
+ expect(result.some((s) => s.status === 'added')).toBe(true);
+ });
+ });
+
+ describe('computeLineDiffForOld', () => {
+ it('should return unchanged for identical multiline strings', () => {
+ const text = 'line1\nline2\nline3';
+ expect(computeLineDiffForOld(text, text)).toEqual([
+ { text: 'line1', status: 'unchanged' },
+ { text: 'line2', status: 'unchanged' },
+ { text: 'line3', status: 'unchanged' }
+ ]);
+ });
+
+ it('should return empty array for empty old string', () => {
+ expect(computeLineDiffForOld('', 'new\ntext')).toEqual([]);
+ expect(computeLineDiffForOld(null, 'new\ntext')).toEqual([]);
+ });
+
+ it('should return deleted for all lines when new is empty', () => {
+ expect(computeLineDiffForOld('line1\nline2', '')).toEqual([
+ { text: 'line1', status: 'deleted' },
+ { text: 'line2', status: 'deleted' }
+ ]);
+ });
+
+ it('should detect deleted lines', () => {
+ const result = computeLineDiffForOld('line1\nline2\nline3', 'line1\nline3');
+ expect(result).toContainEqual({ text: 'line1', status: 'unchanged' });
+ expect(result).toContainEqual({ text: 'line2', status: 'deleted' });
+ expect(result).toContainEqual({ text: 'line3', status: 'unchanged' });
+ });
+
+ it('should handle single line strings', () => {
+ expect(computeLineDiffForOld('single line', 'single line')).toEqual([
+ { text: 'single line', status: 'unchanged' }
+ ]);
+ });
+
+ it('should handle code blocks', () => {
+ const oldCode = 'function foo() {\n return 1;\n}';
+ const newCode = 'function foo() {\n return 2;\n}';
+ const result = computeLineDiffForOld(oldCode, newCode);
+ expect(result).toContainEqual({ text: 'function foo() {', status: 'unchanged' });
+ expect(result).toContainEqual({ text: ' return 1;', status: 'deleted' });
+ expect(result).toContainEqual({ text: '}', status: 'unchanged' });
+ });
+ });
+
+ describe('computeLineDiffForNew', () => {
+ it('should return unchanged for identical multiline strings', () => {
+ const text = 'line1\nline2\nline3';
+ expect(computeLineDiffForNew(text, text)).toEqual([
+ { text: 'line1', status: 'unchanged' },
+ { text: 'line2', status: 'unchanged' },
+ { text: 'line3', status: 'unchanged' }
+ ]);
+ });
+
+ it('should return empty array for empty new string', () => {
+ expect(computeLineDiffForNew('old\ntext', '')).toEqual([]);
+ expect(computeLineDiffForNew('old\ntext', null)).toEqual([]);
+ });
+
+ it('should return added for all lines when old is empty', () => {
+ expect(computeLineDiffForNew('', 'line1\nline2')).toEqual([
+ { text: 'line1', status: 'added' },
+ { text: 'line2', status: 'added' }
+ ]);
+ });
+
+ it('should detect added lines', () => {
+ const result = computeLineDiffForNew('line1\nline3', 'line1\nline2\nline3');
+ expect(result).toContainEqual({ text: 'line1', status: 'unchanged' });
+ expect(result).toContainEqual({ text: 'line2', status: 'added' });
+ expect(result).toContainEqual({ text: 'line3', status: 'unchanged' });
+ });
+
+ it('should handle code blocks', () => {
+ const oldCode = 'function foo() {\n return 1;\n}';
+ const newCode = 'function foo() {\n return 2;\n}';
+ const result = computeLineDiffForNew(oldCode, newCode);
+ expect(result).toContainEqual({ text: 'function foo() {', status: 'unchanged' });
+ expect(result).toContainEqual({ text: ' return 2;', status: 'added' });
+ expect(result).toContainEqual({ text: '}', status: 'unchanged' });
+ });
+ });
+
+ describe('edge cases', () => {
+ it('should handle empty strings', () => {
+ expect(computeWordDiffForOld('', '')).toEqual([{ text: '', status: 'unchanged' }]);
+ expect(computeWordDiffForNew('', '')).toEqual([{ text: '', status: 'unchanged' }]);
+ });
+
+ it('should handle strings with only whitespace', () => {
+ const result = computeWordDiffForOld(' ', ' ');
+ expect(result).toEqual([{ text: ' ', status: 'unchanged' }]);
+ });
+
+ it('should handle special characters in URLs', () => {
+ const url = 'https://api.example.com/users?id=123&name=test';
+ expect(computeWordDiffForOld(url, url)).toEqual([{ text: url, status: 'unchanged' }]);
+ });
+
+ it('should handle JSON-like content', () => {
+ const json = '{"key": "value", "number": 123}';
+ const result = computeLineDiffForOld(json, json);
+ expect(result).toEqual([{ text: json, status: 'unchanged' }]);
+ });
+ });
+});
diff --git a/packages/bruno-app/src/components/Help/StyledWrapper.js b/packages/bruno-app/src/components/Help/StyledWrapper.js
index 710f2c80b..5ce61cb63 100644
--- a/packages/bruno-app/src/components/Help/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Help/StyledWrapper.js
@@ -3,6 +3,8 @@ import styled from 'styled-components';
const Wrapper = styled.div`
font-weight: 400;
font-size: ${(props) => props.theme.font.size.sm};
+ color: ${(props) => props.theme.text};
+ white-space: normal;
background-color: ${(props) => props.theme.infoTip.bg};
border: 1px solid ${(props) => props.theme.infoTip.border};
box-shadow: ${(props) => props.theme.infoTip.boxShadow};
diff --git a/packages/bruno-app/src/components/Help/index.js b/packages/bruno-app/src/components/Help/index.js
index f8ff625a5..a22f8540d 100644
--- a/packages/bruno-app/src/components/Help/index.js
+++ b/packages/bruno-app/src/components/Help/index.js
@@ -4,62 +4,84 @@
* We should allow icon and placement props to be passed in
*/
-import React, { useState } from 'react';
-import HelpIcon from 'components/Icons/Help';
+import React, { useState, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import QuestionCircle from 'components/Icons/QuestionCircle';
+import InfoCircle from 'components/Icons/InfoCircle';
import StyledWrapper from './StyledWrapper';
-const getPlacementStyles = (placement) => {
+const GAP = 8;
+
+const getPortalPosition = (rect, placement, width) => {
switch (placement) {
case 'top':
return {
- bottom: 'calc(100% + 8px)',
- left: '50%',
- transform: 'translateX(-50%)'
+ top: rect.top - GAP,
+ left: rect.left + rect.width / 2 - width / 2,
+ transform: 'translateY(-100%)'
};
case 'bottom':
return {
- top: 'calc(100% + 8px)',
- left: '50%',
- transform: 'translateX(-50%)'
+ top: rect.bottom + GAP,
+ left: rect.left + rect.width / 2 - width / 2
};
case 'left':
return {
- top: '50%',
- right: 'calc(100% + 8px)',
+ top: rect.top + rect.height / 2,
+ left: rect.left - GAP - width,
transform: 'translateY(-50%)'
};
case 'right':
default:
return {
- top: '50%',
- left: 'calc(100% + 8px)',
+ top: rect.top + rect.height / 2,
+ left: rect.right + GAP,
transform: 'translateY(-50%)'
};
}
};
-const Help = ({ children, width = 200, placement = 'right' }) => {
+const iconMap = {
+ question: QuestionCircle,
+ info: InfoCircle
+};
+
+const Help = ({ children, width = 200, placement = 'right', icon = 'question', iconComponent: IconComponent, size = 14 }) => {
const [showTooltip, setShowTooltip] = useState(false);
+ const [position, setPosition] = useState(null);
+ const iconRef = useRef(null);
+ const ResolvedIcon = IconComponent || iconMap[icon] || QuestionCircle;
+
+ const handleMouseEnter = useCallback(() => {
+ if (iconRef.current) {
+ const rect = iconRef.current.getBoundingClientRect();
+ setPosition(getPortalPosition(rect, placement, width));
+ }
+ setShowTooltip(true);
+ }, [placement, width]);
return (
-
+
setShowTooltip(true)}
+ onMouseEnter={handleMouseEnter}
onMouseLeave={() => setShowTooltip(false)}
>
-
+
- {showTooltip && (
+ {showTooltip && position && createPortal(
{children}
-
+ ,
+ document.body
)}
);
diff --git a/packages/bruno-app/src/components/Icons/InfoCircle/index.js b/packages/bruno-app/src/components/Icons/InfoCircle/index.js
new file mode 100644
index 000000000..140b41cb5
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/InfoCircle/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const InfoCircle = ({ size = 14 }) => {
+ return (
+
+ );
+};
+
+export default InfoCircle;
diff --git a/packages/bruno-app/src/components/Icons/OpenAPISync/index.js b/packages/bruno-app/src/components/Icons/OpenAPISync/index.js
new file mode 100644
index 000000000..b27d38a3a
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/OpenAPISync/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const OpenAPISyncIcon = ({ size = 16, color = 'currentColor', ...props }) => {
+ return (
+
+ );
+};
+
+export default OpenAPISyncIcon;
diff --git a/packages/bruno-app/src/components/Icons/Help/index.js b/packages/bruno-app/src/components/Icons/QuestionCircle/index.js
similarity index 92%
rename from packages/bruno-app/src/components/Icons/Help/index.js
rename to packages/bruno-app/src/components/Icons/QuestionCircle/index.js
index b96e02ba8..32844b538 100644
--- a/packages/bruno-app/src/components/Icons/Help/index.js
+++ b/packages/bruno-app/src/components/Icons/QuestionCircle/index.js
@@ -1,6 +1,6 @@
import React from 'react';
-const HelpIcon = ({ size = 14 }) => {
+const QuestionCircle = ({ size = 14 }) => {
return (