From 5f76ed028a5dcadd6559e307760d38a87da59508 Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Tue, 28 Jul 2026 11:41:12 +0530
Subject: [PATCH] feat(playground): variable highlight + hover card with inline
 edit (BRU-4000)

Bring the desktop variable experience to the playground request editors:

- Green/red `{{var}}` highlighting against the active environment across the
  request body (Monaco), URL, and params/headers/form-body cells.
- Hover card at desktop parity: name, scope badge, resolved value, copy,
  secret masking; reachable in the Monaco body via a content widget that
  reuses the shared VariableInfoCard.
- Inline value editing (Enter save, Shift-Enter newline, blur save, Esc
  cancel) for environment/collection/folder/request scopes; read-only scopes
  (process.env, oauth2, $secrets, dynamic) and typed/object values stay
  read-only. Edits write to the in-memory playground store so the card,
  highlight, and request execution update together; reset reverts.

Monaco body: new variableDecorations (highlight) and variableHoverWidget
(content-widget hover intent). URL bar switched to HighlightedInput.

Out of scope: WebSocket/gRPC/GraphQL requests are unsupported in the
playground (rendered read-only via UnsupportedRequest), so they keep the
docs-style read-only variable preview.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../HighlightedInput/HighlightedInput.tsx     |  13 +-
 .../Content/Views/Common/BodyTab.tsx          |   1 +
 .../PlaygroundView/QueryBar/QueryBar.tsx      |  13 +-
 .../PlaygroundView/QueryBar/StyledWrapper.ts  |  33 ++--
 .../VariableInfoCard/StyledWrapper.ts         |  36 +++-
 .../VariableInfoCard.spec.tsx                 |  44 +++++
 .../VariableInfoCard/VariableInfoCard.tsx     | 126 +++++++++++--
 .../src/hooks/useVariableResolver.tsx         |  58 +++++-
 .../src/store/slices/playground.spec.ts       |  56 +++++-
 .../src/store/slices/playground.ts            |  45 ++++-
 packages/bruno-api-docs/src/styles/index.css  |   9 +
 .../src/ui/CodeEditor/CodeEditor.tsx          |  51 ++++-
 .../src/ui/CodeEditor/StyledWrapper.ts        |  12 ++
 .../src/ui/CodeEditor/variableDecorations.ts  |  58 ++++++
 .../src/ui/CodeEditor/variableHoverWidget.ts  | 177 ++++++++++++++++++
 15 files changed, 684 insertions(+), 48 deletions(-)
 create mode 100644 packages/bruno-api-docs/src/ui/CodeEditor/variableDecorations.ts
 create mode 100644 packages/bruno-api-docs/src/ui/CodeEditor/variableHoverWidget.ts

diff --git a/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx b/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
index 08282f13..3be5ef54 100644
--- a/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
+++ b/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
@@ -25,6 +25,9 @@ interface HighlightedInputProps {
   title?: string;
   testId?: string;
   multiline?: boolean;
+  /** Forwarded key handler, invoked only when the autocomplete dropdown is not open (so it
+   *  can drive e.g. Enter-to-send without stealing Enter from suggestion selection). */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 interface HoveredToken {
@@ -75,7 +78,8 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
   variablesAutocomplete = true,
   title,
   testId,
-  multiline = false
+  multiline = false,
+  onKeyDown
 }) => {
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const mirrorRef = useRef<HTMLDivElement | null>(null);
@@ -253,7 +257,10 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    if (!autocomplete) return;
+    if (!autocomplete) {
+      onKeyDown?.(event);
+      return;
+    }
     const { items, active } = autocomplete;
     switch (event.key) {
       case 'ArrowDown':
@@ -378,7 +385,7 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
               visibility: hoverPos ? 'visible' : 'hidden'
             }}
           >
-            <VariableInfoCard name={hovered.name} />
+            <VariableInfoCard name={hovered.name} editable />
           </HoverCard>
         </Portal>
       )}
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
index 89d11c2f..4d0e300b 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
@@ -84,6 +84,7 @@ export const BodyTab: React.FC<BodyTabProps> = ({
                     : 'text'
             }
             height={fillHeight ? '100%' : '300px'}
+            variableAware
             testId="body-editor"
           />
         </div>
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/QueryBar.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/QueryBar.tsx
index 9182baf1..505f54c2 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/QueryBar.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/QueryBar.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import type { HttpRequest } from '@opencollection/types/requests/http';
 import { StyledWrapper } from './StyledWrapper';
 import MenuDropdown from '../../../../../../ui/MenuDropdown';
+import HighlightedInput from '../../../../../HighlightedInput/HighlightedInput';
+import { useResolvedVariables } from '../../../../../../hooks/useVariableResolver';
 import { getHttpMethod, getRequestUrl, getHttpParams } from '../../../../../../utils/schemaHelpers';
 import { syncPathParams, syncQueryParams } from '../../../../../../utils/pathParams';
 import { availableMethods } from '../../../../../../theme/methodColors';
@@ -17,6 +19,7 @@ interface QueryBarProps {
 }
 
 const QueryBar: React.FC<QueryBarProps> = ({ item, onSendRequest, isLoading, onItemChange }) => {
+  const { isFound, names } = useResolvedVariables();
   const [url, setUrl] = useState(getRequestUrl(item));
   const [method, setMethod] = useState(getHttpMethod(item));
 
@@ -74,12 +77,14 @@ const QueryBar: React.FC<QueryBarProps> = ({ item, onSendRequest, isLoading, onI
         </button>
       </MenuDropdown>
 
-      <input
-        type="text"
+      <HighlightedInput
         value={url}
-        onChange={(e) => handleUrlChange(e.target.value)}
+        onValueChange={handleUrlChange}
+        isFound={isFound}
+        names={names}
         placeholder="Enter request URL"
-        onKeyPress={(e) => {
+        testId="query-bar-url"
+        onKeyDown={(e) => {
           if (e.key === 'Enter' && url.trim() && !isLoading) {
             onSendRequest();
           }
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts
index 4dac8584..366b5b11 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts
@@ -9,23 +9,28 @@ export const StyledWrapper = styled.div`
   border-radius: var(--oc-radius);
   background-color: var(--bg-primary);
 
-  input {
-    flex: 1;
+  /* The URL field is a HighlightedInput (wrapper div + painted mirror), not a bare input.
+     Stretch the wrapper across the row and give it the compact mono look of the query bar.
+     !important is required: HighlightedInput's own StyledWrapper is inserted after this one
+     (child renders after parent) and would otherwise win at equal specificity, leaving the
+     URL bar too tall with the cell font size. */
+  .highlight-input {
+    flex: 1 !important;
     min-width: 0;
-    outline: none;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
+    padding: 0 !important;
     font-family: var(--font-mono);
-    font-weight: 400;
-    font-size: 0.75rem;
-    line-height: 1.125rem;
-    color: var(--text-primary);
+  }
 
-    &::placeholder {
-      color: var(--text-secondary);
-      opacity: 0.6;
-    }
+  .highlight-input .text-input,
+  .highlight-input .highlight-input-mirror {
+    padding: 0 !important;
+    font-size: 0.75rem !important;
+    line-height: 1.125rem !important;
+  }
+
+  .highlight-input .highlight-input-mirror {
+    left: 0 !important;
+    right: 0 !important;
   }
 
   .method-select {
diff --git a/packages/bruno-api-docs/src/components/VariableInfoCard/StyledWrapper.ts b/packages/bruno-api-docs/src/components/VariableInfoCard/StyledWrapper.ts
index ab5a2de7..7e6fd5f8 100644
--- a/packages/bruno-api-docs/src/components/VariableInfoCard/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/VariableInfoCard/StyledWrapper.ts
@@ -55,7 +55,8 @@ export const StyledWrapper = styled.div`
 
   .var-value-container {
     position: relative;
-    height: 2.25rem;
+    min-height: 2.25rem;
+    max-height: 11.125rem; /* ~9 lines, matching the desktop app; scrolls past this */
     padding: 0.5rem;
     overflow-y: auto;
     overflow-x: hidden;
@@ -81,6 +82,39 @@ export const StyledWrapper = styled.div`
     color: var(--text-tertiary);
   }
 
+  .var-value-editable {
+    cursor: text;
+  }
+
+  /* While editing, ring the value box in the brand colour (matching the desktop app). */
+  .var-value-container:focus-within {
+    outline: 0.0625rem solid var(--oc-brand);
+    outline-offset: -0.0625rem;
+  }
+
+  .var-value-edit {
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+    resize: none;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  /* The container shows the brand ring; keep the textarea itself ringless. */
+  .var-value-edit:focus,
+  .var-value-edit:focus-visible {
+    outline: none;
+  }
+
   .var-icons {
     position: absolute;
     top: 50%;
diff --git a/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.spec.tsx b/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.spec.tsx
index f2280a84..30665f33 100644
--- a/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.spec.tsx
+++ b/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.spec.tsx
@@ -121,3 +121,47 @@ describe('VariableInfoCard', () => {
     expect(part(root, 'note').text).toBe('Variable is not defined');
   });
 });
+
+const editableCardTree = (name: string) => {
+  const store = createOpenCollectionStore();
+  store.dispatch(setDocsCollection(collection));
+  store.dispatch(setActiveEnv('Dev'));
+  return (
+    <Provider store={store}>
+      <VariableResolverProvider>
+        <VariableInfoCard name={name} editable />
+      </VariableResolverProvider>
+    </Provider>
+  );
+};
+
+describe('VariableInfoCard (editable)', () => {
+  it('renders an editable value for an environment variable', () => {
+    const value = part(useRenderToDom(editableCardTree('host')), 'value');
+    expect(value.getAttribute('role')).toBe('button');
+    expect(value.classList.contains('var-value-editable')).toBe(true);
+  });
+
+  it('renders an editable value for a collection variable', () => {
+    const value = part(useRenderToDom(editableCardTree('apiVersion')), 'value');
+    expect(value.classList.contains('var-value-editable')).toBe(true);
+  });
+
+  it('stays read-only by default (docs surfaces do not pass editable)', () => {
+    const value = part(useRenderToDom(cardTree('host')), 'value');
+    expect(value.classList.contains('var-value-editable')).toBe(false);
+    expect(value.getAttribute('role')).toBeFalsy();
+  });
+
+  it('never makes a secret variable editable', () => {
+    const value = part(useRenderToDom(editableCardTree('bearer_token')), 'value');
+    expect(value.text).toBe('(Secret)');
+    expect(value.classList.contains('var-value-editable')).toBe(false);
+  });
+
+  it('never makes a read-only scope (process.env) editable', () => {
+    const root = useRenderToDom(editableCardTree('process.env.HOME'));
+    expect(part(root, 'note').text).toBe('read-only');
+    expect(part(root, 'value').classList.contains('var-value-editable')).toBe(false);
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.tsx b/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.tsx
index 388b41fe..a36690bf 100644
--- a/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.tsx
+++ b/packages/bruno-api-docs/src/components/VariableInfoCard/VariableInfoCard.tsx
@@ -1,12 +1,18 @@
-import React from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useResolvedVariables } from '../../hooks';
 import { CopyButton } from '../../ui/CopyButton/CopyButton';
 import { SCOPE_LABELS, INVALID_NAME_WARNING } from '../../constants';
 import type { VariableScope } from '../../utils/variableResolution';
 import { StyledWrapper } from './StyledWrapper';
 
+// Scopes whose values can be inline-edited (mirrors desktop; process.env/runtime/dynamic/
+// oauth2/$secrets stay read-only). Global has no playground store, so it is read-only too.
+const EDITABLE_SCOPES = new Set<VariableScope>(['environment', 'collection', 'folder', 'request']);
+
 interface VariableInfoCardProps {
   name: string;
+  /** Allow inline-editing the value (playground surfaces only; docs stay read-only). */
+  editable?: boolean;
   testId?: string;
 }
 
@@ -16,9 +22,62 @@ const getReadOnlyNote = (scope: VariableScope, activeEnvName: string | null): st
   return null;
 };
 
-export const VariableInfoCard: React.FC<VariableInfoCardProps> = ({ name, testId = 'variable-info-card' }) => {
-  const { lookup, activeEnvName } = useResolvedVariables();
+export const VariableInfoCard: React.FC<VariableInfoCardProps> = ({
+  name,
+  editable = false,
+  testId = 'variable-info-card'
+}) => {
+  const { lookup, activeEnvName, updateVariable } = useResolvedVariables();
   const info = lookup(name);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState('');
+  const editRef = useRef<HTMLTextAreaElement>(null);
+
+  // Grow the edit field with its content (the container caps it and scrolls past ~9 lines).
+  useLayoutEffect(() => {
+    const el = editRef.current;
+    if (!editing || !el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [editing, draft]);
+
+  // Editable for concrete scopes (env/collection/folder/request); read-only scopes and
+  // secrets stay read-only. Environment edits need an active environment to target.
+  const canEdit =
+    editable &&
+    info.valid &&
+    !info.secret &&
+    EDITABLE_SCOPES.has(info.scope) &&
+    // Only plain-string values are inline-editable; editing a typed value (object/number/etc)
+    // as text would drop its `{ type, data }` shape, so those stay read-only.
+    (info.dataType === undefined || info.dataType === 'string') &&
+    (info.scope !== 'environment' || !!activeEnvName);
+
+  // Leave edit mode when the hovered token changes (the card instance is reused across tokens).
+  useEffect(() => {
+    setEditing(false);
+  }, [name]);
+
+  const startEditing = () => {
+    // Edit the raw stored value (which may contain `{{refs}}`), not the deep-resolved display value.
+    setDraft(info.rawValue);
+    setEditing(true);
+  };
+
+  const commit = () => {
+    setEditing(false);
+    if (draft !== info.rawValue) updateVariable(info.name, draft);
+  };
+
+  const handleEditKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      commit();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      setEditing(false);
+    }
+  };
 
   const header = (
     <div className="var-info-header">
@@ -66,7 +125,19 @@ export const VariableInfoCard: React.FC<VariableInfoCardProps> = ({ name, testId
   }
 
   const readOnlyNote = getReadOnlyNote(info.scope, activeEnvName);
-  const placeholder = info.secret ? '(Secret)' : info.value === '' ? '(empty)' : null;
+  const placeholder = info.secret ? '(Secret)' : !canEdit && info.value === '' ? '(empty)' : null;
+
+  const copyIcon = (
+    <div className="var-icons">
+      <CopyButton
+        text={info.value}
+        label="Copy value"
+        resetAfterMs={1000}
+        className="copy-button"
+        testId={`${testId}-copy`}
+      />
+    </div>
+  );
 
   return (
     <StyledWrapper className="variable-info-card" data-testid={testId}>
@@ -76,20 +147,49 @@ export const VariableInfoCard: React.FC<VariableInfoCardProps> = ({ name, testId
           <div className="var-value-display var-value-placeholder" data-testid={`${testId}-value`}>
             {placeholder}
           </div>
+        ) : canEdit ? (
+          editing ? (
+            <textarea
+              ref={editRef}
+              className="var-value-edit"
+              data-testid={`${testId}-edit`}
+              value={draft}
+              autoFocus
+              rows={1}
+              spellCheck={false}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={handleEditKeyDown}
+              onBlur={commit}
+            />
+          ) : (
+            <>
+              <div
+                className="var-value-display var-value-editable"
+                data-testid={`${testId}-value`}
+                role="button"
+                tabIndex={0}
+                title="Click to edit"
+                // mousedown + preventDefault so the display never grabs focus/selection (which
+                // flashes a focus ring) before it swaps to the textarea. Keyboard uses onKeyDown.
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  startEditing();
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') startEditing();
+                }}
+              >
+                {info.value === '' ? '(empty)' : info.value}
+              </div>
+              {copyIcon}
+            </>
+          )
         ) : (
           <>
             <div className="var-value-display" data-testid={`${testId}-value`}>
               {info.value}
             </div>
-            <div className="var-icons">
-              <CopyButton
-                text={info.value}
-                label="Copy value"
-                resetAfterMs={1000}
-                className="copy-button"
-                testId={`${testId}-copy`}
-              />
-            </div>
+            {copyIcon}
           </>
         )}
       </div>
diff --git a/packages/bruno-api-docs/src/hooks/useVariableResolver.tsx b/packages/bruno-api-docs/src/hooks/useVariableResolver.tsx
index 37c588a7..234a313f 100644
--- a/packages/bruno-api-docs/src/hooks/useVariableResolver.tsx
+++ b/packages/bruno-api-docs/src/hooks/useVariableResolver.tsx
@@ -1,10 +1,11 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 import type { OpenCollection } from '@opencollection/types';
 import type { Environment } from '@opencollection/types/config/environments';
 import type { Item } from '@opencollection/types/collection/item';
-import type { Variable, SecretVariable } from '@opencollection/types/common/variables';
-import { useAppSelector } from '../store/hooks';
+import type { Variable, SecretVariable, VariableValueType } from '@opencollection/types/common/variables';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
 import { selectDocsCollection } from '../store/slices/docs';
+import { setPlaygroundVariable } from '../store/slices/playground';
 import { selectActiveEnvName, selectShowVars } from '../store/slices/env';
 import { getRequestVariables, isFolder } from '../utils/schemaHelpers';
 import { mockDataFunctions, timeBasedDynamicVars } from '../runner/utils/faker-functions';
@@ -26,10 +27,15 @@ export type DynamicVariableKind = 'random' | 'time' | 'unknown';
 export interface VariableLookup {
   name: string;
   scope: VariableScope;
+  /** Deep-resolved value, for display. */
   value: string;
+  /** Raw stored value (may contain `{{refs}}`), for editing — so edits don't flatten references. */
+  rawValue: string;
   secret: boolean;
   valid: boolean;
   dynamicKind?: DynamicVariableKind;
+  /** Set for typed values (object/number/boolean/null); undefined for plain strings. */
+  dataType?: VariableValueType;
 }
 
 const classifyDynamic = (name: string): DynamicVariableKind => {
@@ -59,11 +65,13 @@ export interface VariableResolver {
   lookup: (name: string) => VariableLookup;
   isFound: (name: string) => boolean;
   names: string[];
+  /** Inline-edit a variable's value in its scope. No-op without an editing context (docs). */
+  updateVariable: (name: string, value: string) => void;
 }
 
 const lookupVariable = (rawName: string, model: ScopedVariableModel): VariableLookup => {
   const name = (rawName ?? '').trim();
-  const base = { name, value: '', secret: false };
+  const base = { name, value: '', rawValue: '', secret: false };
 
   const special = detectSpecialScope(name);
   if (special === 'dynamic') return { ...base, scope: 'dynamic', valid: true, dynamicKind: classifyDynamic(name) };
@@ -76,7 +84,7 @@ const lookupVariable = (rawName: string, model: ScopedVariableModel): VariableLo
   const safeValue = formatEntryValue(entry, model.values);
   const secret = entry.secret || model.secretNames.has(name) || referencesSecret(safeValue, model.secretNames);
   const value = secret ? formatEntryValue(entry, model.fullValues) : safeValue;
-  return { name, scope: entry.scope, value, secret, valid: true };
+  return { name, scope: entry.scope, value, rawValue: entry.value, secret, valid: true, dataType: entry.dataType };
 };
 
 const makeResolver = (
@@ -96,7 +104,9 @@ const makeResolver = (
       const name = singleReferenceName(raw);
       return name && isSecret(name) ? name : null;
     },
-    lookup: (name: string) => lookupVariable(name, model)
+    lookup: (name: string) => lookupVariable(name, model),
+    // Default no-op; only the playground's ItemVariableResolverProvider wires a real writer.
+    updateVariable: () => {}
   };
 };
 
@@ -143,9 +153,10 @@ const PASSTHROUGH_RESOLVER: VariableResolver = {
   resolve: (raw) => raw,
   isSecret: () => false,
   secretRefName: () => null,
-  lookup: (name) => ({ name: (name ?? '').trim(), scope: 'undefined', value: '', secret: false, valid: true }),
+  lookup: (name) => ({ name: (name ?? '').trim(), scope: 'undefined', value: '', rawValue: '', secret: false, valid: true }),
   isFound: () => false,
-  names: []
+  names: [],
+  updateVariable: () => {}
 };
 
 const VariableResolverContext = createContext<VariableResolver>(PASSTHROUGH_RESOLVER);
@@ -169,6 +180,7 @@ export const ItemVariableResolverProvider: React.FC<{
   item: Item | null;
   children: React.ReactNode;
 }> = ({ collection, ancestry, item, children }) => {
+  const dispatch = useAppDispatch();
   const activeEnvName = useAppSelector(selectActiveEnvName);
   const showVars = useAppSelector(selectShowVars);
 
@@ -183,5 +195,33 @@ export const ItemVariableResolverProvider: React.FC<{
 
   const resolver = useMemo(() => makeResolver(model, showVars, activeEnvName), [model, showVars, activeEnvName]);
 
-  return <VariableResolverContext.Provider value={resolver}>{children}</VariableResolverContext.Provider>;
+  // Write an inline edit to the variable's scope. The store update flows back through the
+  // hydrated collection to both this resolver (card + highlight) and request execution.
+  const updateVariable = useCallback(
+    (name: string, value: string) => {
+      const { name: varName, scope } = resolver.lookup(name);
+      if (scope === 'environment') {
+        if (activeEnvName) dispatch(setPlaygroundVariable({ scope, name: varName, value, envName: activeEnvName }));
+      } else if (scope === 'collection') {
+        dispatch(setPlaygroundVariable({ scope, name: varName, value }));
+      } else if (scope === 'request') {
+        const itemUuid = (item as { uuid?: string } | null)?.uuid;
+        if (itemUuid) dispatch(setPlaygroundVariable({ scope, name: varName, value, itemUuid }));
+      } else if (scope === 'folder') {
+        // ancestry is outermost→innermost and the model resolves folders last-wins (innermost
+        // shadows outer), so the displayed value is the innermost folder's. Search from the
+        // innermost end so the edit lands in the same folder the card showed.
+        const owner = [...ancestry]
+          .reverse()
+          .find((folder) => folderVariables(folder).some((v) => v.name === varName && !('secret' in v)));
+        const itemUuid = (owner as { uuid?: string } | undefined)?.uuid;
+        if (itemUuid) dispatch(setPlaygroundVariable({ scope, name: varName, value, itemUuid }));
+      }
+    },
+    [resolver, dispatch, activeEnvName, item, ancestry]
+  );
+
+  const value = useMemo(() => ({ ...resolver, updateVariable }), [resolver, updateVariable]);
+
+  return <VariableResolverContext.Provider value={value}>{children}</VariableResolverContext.Provider>;
 };
diff --git a/packages/bruno-api-docs/src/store/slices/playground.spec.ts b/packages/bruno-api-docs/src/store/slices/playground.spec.ts
index 2a60f83a..f3491ac8 100644
--- a/packages/bruno-api-docs/src/store/slices/playground.spec.ts
+++ b/packages/bruno-api-docs/src/store/slices/playground.spec.ts
@@ -10,7 +10,8 @@ import reducer, {
   setSelectedExampleIndex,
   clearPlaygroundCollection,
   toggleFolderCollapse,
-  expandFolders
+  expandFolders,
+  setPlaygroundVariable
 } from './playground';
 import { createOpenCollectionStore } from '../store';
 import type { OpenCollection as OpenCollectionCollection } from '@opencollection/types';
@@ -96,6 +97,59 @@ describe('updatePlaygroundItem', () => {
   });
 });
 
+describe('setPlaygroundVariable', () => {
+  it('edits an environment variable in both the hydrated and base collections', () => {
+    const store = createOpenCollectionStore();
+    store.dispatch(setPlaygroundCollection(makeCollection()));
+
+    store.dispatch(setPlaygroundVariable({ scope: 'environment', name: 'a', value: '99', envName: 'Dev' }));
+
+    expect(envVariables(store).find((v: any) => v.name === 'a').value).toBe('99');
+    const base = selectPlaygroundCollection(store.getState())!.config!.environments![0].variables!;
+    expect(base.find((v: any) => v.name === 'a').value).toBe('99');
+  });
+
+  it('edits a collection variable', () => {
+    const collection = makeCollection();
+    collection.request = { variables: [{ name: 'cv', value: 'x' }] };
+    const store = createOpenCollectionStore();
+    store.dispatch(setPlaygroundCollection(collection));
+
+    store.dispatch(setPlaygroundVariable({ scope: 'collection', name: 'cv', value: 'y' }));
+
+    const vars = selectHydratedCollection(store.getState())!.request!.variables!;
+    expect((vars as any).find((v: any) => v.name === 'cv').value).toBe('y');
+  });
+
+  it('edits a request variable located by item uuid', () => {
+    const collection = {
+      info: { name: 'Test', version: '1.0.0' },
+      items: [
+        { type: 'http', uuid: 'r1', name: 'Req', http: { url: 'u', method: 'GET' }, variables: [{ name: 'rv', value: '1' }] }
+      ]
+    } as unknown as OpenCollectionCollection;
+    const store = createOpenCollectionStore();
+    store.dispatch(setPlaygroundCollection(collection));
+
+    store.dispatch(setPlaygroundVariable({ scope: 'request', name: 'rv', value: '2', itemUuid: 'r1' }));
+
+    const item = selectHydratedCollection(store.getState())!.items![0] as unknown as { variables: any[] };
+    expect(item.variables.find((v) => v.name === 'rv').value).toBe('2');
+  });
+
+  it('never writes to a secret variable', () => {
+    const collection = makeCollection();
+    collection.config.environments[0].variables.push({ name: 'sec', secret: true });
+    const store = createOpenCollectionStore();
+    store.dispatch(setPlaygroundCollection(collection));
+
+    store.dispatch(setPlaygroundVariable({ scope: 'environment', name: 'sec', value: 'leak', envName: 'Dev' }));
+
+    const sec = envVariables(store).find((v: any) => v.name === 'sec');
+    expect((sec as any).value).toBeUndefined();
+  });
+});
+
 describe('playground folder collapse', () => {
   const withFolder = () =>
     ({
diff --git a/packages/bruno-api-docs/src/store/slices/playground.ts b/packages/bruno-api-docs/src/store/slices/playground.ts
index a67a656f..acc19424 100644
--- a/packages/bruno-api-docs/src/store/slices/playground.ts
+++ b/packages/bruno-api-docs/src/store/slices/playground.ts
@@ -4,9 +4,10 @@ import type { OpenCollection as OpenCollectionCollection } from '@opencollection
 import type { Environment } from '@opencollection/types/config/environments';
 import type { Item as OpenCollectionItem, Folder } from '@opencollection/types/collection/item';
 import type { HttpRequest } from '@opencollection/types/requests/http';
+import type { Variable, SecretVariable } from '@opencollection/types/common/variables';
 import type { RootState } from '../store';
 import { hydrateWithUUIDs, findAndUpdateItem } from '../../utils/fileUtils';
-import { isFolder } from '../../utils/schemaHelpers';
+import { isFolder, getRequestVariables } from '../../utils/schemaHelpers';
 
 export type ViewMode = 'playground' | 'environments' | 'folder-settings' | 'collection-settings' | 'example';
 
@@ -221,6 +222,45 @@ const playgroundSlice = createSlice({
       if (state.hydratedCollection) writeEnvironments(state.hydratedCollection, environments);
       if (state.collection) writeEnvironments(state.collection, environments);
     },
+    // Inline-edit a single variable's value from the variable hover card, in whichever
+    // concrete scope it lives (environment / collection / folder / request) — mirroring the
+    // desktop app's `updateVariableInScope`. Writes to both collection copies so the resolver
+    // (card + highlight) and request execution — which read the hydrated collection — pick up
+    // the new value at once. Only existing, non-secret variables are edited.
+    setPlaygroundVariable: (
+      state: PlaygroundState,
+      action: PayloadAction<{
+        scope: 'environment' | 'collection' | 'folder' | 'request';
+        name: string;
+        value: string;
+        envName?: string;
+        itemUuid?: string;
+      }>
+    ) => {
+      const { scope, name, value, envName, itemUuid } = action.payload;
+      const setInList = (list: (Variable | SecretVariable)[] | undefined): void => {
+        const variable = list?.find((v) => v.name === name);
+        if (variable && !('secret' in variable)) variable.value = value;
+      };
+      const apply = (collection: OpenCollectionCollection | null) => {
+        if (!collection) return;
+        if (scope === 'environment') {
+          setInList(readEnvironments(collection)?.find((env) => env.name === envName)?.variables);
+        } else if (scope === 'collection') {
+          setInList(collection.request?.variables as (Variable | SecretVariable)[] | undefined);
+        } else if (itemUuid && collection.items) {
+          findAndUpdateItem(collection.items, itemUuid, (item) => {
+            const list =
+              scope === 'folder'
+                ? (item.request?.variables as (Variable | SecretVariable)[] | undefined)
+                : (getRequestVariables(item) as (Variable | SecretVariable)[]);
+            setInList(list);
+          });
+        }
+      };
+      apply(state.hydratedCollection);
+      apply(state.collection);
+    },
   }
 });
 
@@ -238,7 +278,8 @@ export const {
   updateCollectionSettings,
   updateCollectionEnvironments,
   updateFolderInCollection,
-  resetPlaygroundEnvironments
+  resetPlaygroundEnvironments,
+  setPlaygroundVariable
 } = playgroundSlice.actions;
 
 // Selectors
diff --git a/packages/bruno-api-docs/src/styles/index.css b/packages/bruno-api-docs/src/styles/index.css
index b80b0299..012f5e25 100644
--- a/packages/bruno-api-docs/src/styles/index.css
+++ b/packages/bruno-api-docs/src/styles/index.css
@@ -1134,3 +1134,12 @@ tr.themed-row:nth-child(even) {
   transform: translateY(-50%);
   opacity: 0;
 }
+
+/* Monaco variable hover card host. The card (VariableInfoCard) is self-styled;
+   this only floats the widget above the editor with a drop shadow. Rendered in
+   Monaco's overflow container, so it lives outside the CodeEditor style scope. */
+.variable-hover-widget {
+  z-index: 40;
+  border-radius: var(--oc-radius);
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
+}
\ No newline at end of file
diff --git a/packages/bruno-api-docs/src/ui/CodeEditor/CodeEditor.tsx b/packages/bruno-api-docs/src/ui/CodeEditor/CodeEditor.tsx
index da5f8b6e..fd86f430 100644
--- a/packages/bruno-api-docs/src/ui/CodeEditor/CodeEditor.tsx
+++ b/packages/bruno-api-docs/src/ui/CodeEditor/CodeEditor.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Editor, { type Monaco, type OnMount } from '@monaco-editor/react';
 import { useAppSelector } from '../../store/hooks';
+import { useResolvedVariables } from '../../hooks/useVariableResolver';
 import { CopyButton } from '../CopyButton/CopyButton';
+import { Portal } from '../Portal/Portal';
+import { VariableInfoCard } from '../../components/VariableInfoCard/VariableInfoCard';
 import { ensureScriptApiCompletions, setModelHints } from './scriptApiCompletions';
+import { createVariableDecorator, type VariableDecorator } from './variableDecorations';
+import { createVariableHover, type VariableHover } from './variableHoverWidget';
 import type { ScriptApiRoot } from '../../utils/scriptAutocomplete';
 import { StyledWrapper } from './StyledWrapper';
 
@@ -20,6 +25,8 @@ interface CodeEditorProps {
   /** Show a copy-to-clipboard button (revealed on hover, top-right). Defaults to on. */
   showCopy?: boolean;
   active?: boolean;
+  /** Highlight `{{var}}` tokens (green resolved / red unresolved) against the active environment. */
+  variableAware?: boolean;
   testId?: string;
 }
 
@@ -51,18 +58,51 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
   hintsFor,
   showCopy = true,
   active = true,
+  variableAware = false,
   testId
 }) => {
   const mode = useAppSelector((s) => s.theme.mode);
+  const resolver = useResolvedVariables();
   const editorRef = useRef<EditorInstance | null>(null);
+  const decoratorRef = useRef<VariableDecorator | null>(null);
+  const hoverRef = useRef<VariableHover | null>(null);
+  // Read the latest resolver inside the (non-reactive) decorator via a ref.
+  const isFoundRef = useRef(resolver.isFound);
+  isFoundRef.current = resolver.isFound;
+  // The `{{var}}` token currently hovered in the editor, plus the widget node to portal into.
+  const [hoveredVariable, setHoveredVariable] = useState<{ name: string; node: HTMLElement } | null>(null);
 
   useEffect(() => {
     if (active && editorRef.current) editorRef.current.layout();
   }, [active]);
 
+  // Repaint when the active environment / variable set changes.
+  useEffect(() => {
+    decoratorRef.current?.refresh();
+  }, [resolver]);
+
+  // Tear down the variable decorator + hover widget when the editor unmounts.
+  useEffect(
+    () => () => {
+      decoratorRef.current?.dispose();
+      decoratorRef.current = null;
+      hoverRef.current?.dispose();
+      hoverRef.current = null;
+    },
+    []
+  );
+
   const handleMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
 
+    if (variableAware) {
+      decoratorRef.current = createVariableDecorator(editor, monaco, () => isFoundRef.current);
+      hoverRef.current = createVariableHover(editor, monaco, {
+        onOpen: (name, node) => setHoveredVariable({ name, node }),
+        onClose: () => setHoveredVariable(null)
+      });
+    }
+
     const mono = getComputedStyle(document.documentElement).getPropertyValue('--font-mono').trim();
     if (mono) editor.updateOptions({ fontFamily: mono });
 
@@ -117,6 +157,10 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
           lineDecorationsWidth: 12,
           lineNumbersMinChars: 2,
           automaticLayout: true,
+          // Render overflow content widgets (the variable hover card) in a fixed-position
+          // container so they escape the editor's `overflow: hidden` wrapper and narrow panes
+          // instead of being clipped — matching the desktop app's float-above behaviour.
+          fixedOverflowWidgets: true,
           placeholder,
           renderLineHighlight: 'none',
           guides: { indentation: false, highlightActiveIndentation: false, bracketPairs: false },
@@ -132,6 +176,11 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
           testId={testId ? `${testId}-copy` : undefined}
         />
       ) : null}
+      {hoveredVariable ? (
+        <Portal container={hoveredVariable.node}>
+          <VariableInfoCard name={hoveredVariable.name} editable={!readOnly} />
+        </Portal>
+      ) : null}
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-api-docs/src/ui/CodeEditor/StyledWrapper.ts b/packages/bruno-api-docs/src/ui/CodeEditor/StyledWrapper.ts
index ad33f3dc..604d3517 100644
--- a/packages/bruno-api-docs/src/ui/CodeEditor/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/ui/CodeEditor/StyledWrapper.ts
@@ -22,4 +22,16 @@ export const StyledWrapper = styled.div`
   .code-editor-copy:focus-visible {
     opacity: 1;
   }
+
+  /* Variable token colours. Scoped under .monaco-editor + !important so they win
+     over Monaco's own syntax-token colours (.mtkN), which load after our styles. */
+  .monaco-editor .variable-valid {
+    color: var(--oc-codemirror-variable-valid) !important;
+  }
+  .monaco-editor .variable-invalid {
+    color: var(--oc-codemirror-variable-invalid) !important;
+  }
+  .monaco-editor .variable-prompt {
+    color: var(--oc-codemirror-variable-prompt) !important;
+  }
 `;
diff --git a/packages/bruno-api-docs/src/ui/CodeEditor/variableDecorations.ts b/packages/bruno-api-docs/src/ui/CodeEditor/variableDecorations.ts
new file mode 100644
index 00000000..f70a5961
--- /dev/null
+++ b/packages/bruno-api-docs/src/ui/CodeEditor/variableDecorations.ts
@@ -0,0 +1,58 @@
+import type { Monaco } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
+import { classifyVariableToken } from '../../utils/variableHighlight';
+
+const TOKEN_REGEX = /\{\{[^}]+\}\}/g;
+
+export interface VariableDecorator {
+  /** Re-scan the model and repaint. Call after the active variable set changes. */
+  refresh: () => void;
+  /** Remove decorations and detach the change listener. */
+  dispose: () => void;
+}
+
+/**
+ * Paints `{{var}}` tokens in a Monaco editor with Bruno's variable-validity
+ * classes (`variable-valid` green / `variable-invalid` red / `variable-prompt`),
+ * mirroring the desktop app and the single-line `HighlightedInput`.
+ *
+ * `getIsFound` is read fresh on every paint (not captured once), so switching the
+ * active environment re-classifies tokens once `refresh()` is called.
+ */
+export const createVariableDecorator = (
+  editorInstance: editor.IStandaloneCodeEditor,
+  monaco: Monaco,
+  getIsFound: () => (name: string) => boolean
+): VariableDecorator => {
+  const collection = editorInstance.createDecorationsCollection();
+
+  const refresh = () => {
+    const model = editorInstance.getModel();
+    if (!model) return;
+    const text = model.getValue();
+    const isFound = getIsFound();
+    const decorations: editor.IModelDeltaDecoration[] = [];
+    TOKEN_REGEX.lastIndex = 0;
+    for (let match = TOKEN_REGEX.exec(text); match; match = TOKEN_REGEX.exec(text)) {
+      const inner = match[0].slice(2, -2);
+      const start = model.getPositionAt(match.index);
+      const end = model.getPositionAt(match.index + match[0].length);
+      decorations.push({
+        range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+        options: { inlineClassName: classifyVariableToken(inner, isFound) }
+      });
+    }
+    collection.set(decorations);
+  };
+
+  const changeListener = editorInstance.onDidChangeModelContent(refresh);
+  refresh();
+
+  return {
+    refresh,
+    dispose: () => {
+      changeListener.dispose();
+      collection.clear();
+    }
+  };
+};
diff --git a/packages/bruno-api-docs/src/ui/CodeEditor/variableHoverWidget.ts b/packages/bruno-api-docs/src/ui/CodeEditor/variableHoverWidget.ts
new file mode 100644
index 00000000..48c5b706
--- /dev/null
+++ b/packages/bruno-api-docs/src/ui/CodeEditor/variableHoverWidget.ts
@@ -0,0 +1,177 @@
+import type { Monaco } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
+import { HOVER_OPEN_MS, HOVER_CLOSE_MS } from '../../constants/ui';
+
+const TOKEN_REGEX = /\{\{[^}]+\}\}/g;
+
+interface TokenHit {
+  name: string;
+  lineNumber: number;
+  /** 1-based column of the token's first `{`. */
+  startColumn: number;
+}
+
+export interface VariableHoverCallbacks {
+  /** A `{{var}}` came under the pointer; render the card into `domNode`. */
+  onOpen: (name: string, domNode: HTMLElement) => void;
+  /** The card should be torn down. */
+  onClose: () => void;
+}
+
+export interface VariableHover {
+  dispose: () => void;
+}
+
+/** Find the `{{var}}` token spanning `column` (1-based) on the given line, if any. */
+const tokenAt = (model: editor.ITextModel, lineNumber: number, column: number): TokenHit | null => {
+  const line = model.getLineContent(lineNumber);
+  TOKEN_REGEX.lastIndex = 0;
+  for (let match = TOKEN_REGEX.exec(line); match; match = TOKEN_REGEX.exec(line)) {
+    const startColumn = match.index + 1;
+    const endColumn = match.index + match[0].length + 1;
+    if (column >= startColumn && column < endColumn) {
+      const name = match[0].slice(2, -2).trim();
+      return name ? { name, lineNumber, startColumn } : null;
+    }
+  }
+  return null;
+};
+
+/**
+ * Shows the variable info card when the pointer rests on a `{{var}}` token in a
+ * Monaco editor — the desktop `brunoVarInfo.js` behaviour, expressed as a Monaco
+ * content widget. The widget only provides a positioned DOM node; the caller
+ * portals the React card into it (via `onOpen`) so it keeps the resolver/redux
+ * context. Open/close are debounced so brushing past a token doesn't flicker, and
+ * the card stays open while the pointer is over it.
+ */
+export const createVariableHover = (
+  editorInstance: editor.IStandaloneCodeEditor,
+  monaco: Monaco,
+  callbacks: VariableHoverCallbacks
+): VariableHover => {
+  const node = document.createElement('div');
+  node.className = 'variable-hover-widget';
+
+  let current: TokenHit | null = null;
+  let visible = false;
+  let overCard = false;
+  let openTimer: ReturnType<typeof setTimeout> | null = null;
+  let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const widget: editor.IContentWidget = {
+    allowEditorOverflow: true,
+    getId: () => 'bruno.variableHover',
+    getDomNode: () => node,
+    getPosition: () =>
+      current
+        ? {
+            position: { lineNumber: current.lineNumber, column: current.startColumn },
+            preference: [
+              monaco.editor.ContentWidgetPositionPreference.ABOVE,
+              monaco.editor.ContentWidgetPositionPreference.BELOW
+            ]
+          }
+        : null
+  };
+  editorInstance.addContentWidget(widget);
+
+  const cancelOpen = () => {
+    if (openTimer) {
+      clearTimeout(openTimer);
+      openTimer = null;
+    }
+  };
+  const cancelClose = () => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+  };
+
+  const show = (hit: TokenHit) => {
+    current = hit;
+    visible = true;
+    editorInstance.layoutContentWidget(widget);
+    callbacks.onOpen(hit.name, node);
+  };
+
+  const hide = () => {
+    if (!visible) return;
+    visible = false;
+    current = null;
+    editorInstance.layoutContentWidget(widget);
+    callbacks.onClose();
+  };
+
+  const scheduleClose = () => {
+    cancelOpen();
+    if (closeTimer) return;
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
+      if (!overCard) hide();
+    }, HOVER_CLOSE_MS);
+  };
+
+  const moveDisposable = editorInstance.onMouseMove((event) => {
+    // While the pointer is over the card, ignore editor mouse-move entirely — Monaco fires
+    // these even for events physically over the (overflow) widget, which would otherwise
+    // steal focus to another token or close the card mid-interaction.
+    if (overCard) return;
+    const position = event.target.position;
+    const model = editorInstance.getModel();
+    const hit = position && model ? tokenAt(model, position.lineNumber, position.column) : null;
+
+    if (!hit) {
+      cancelOpen();
+      if (!overCard) scheduleClose();
+      return;
+    }
+    cancelClose();
+    if (
+      visible &&
+      current &&
+      current.name === hit.name &&
+      current.startColumn === hit.startColumn &&
+      current.lineNumber === hit.lineNumber
+    )
+      return;
+    cancelOpen();
+    openTimer = setTimeout(() => {
+      openTimer = null;
+      show(hit);
+    }, HOVER_OPEN_MS);
+  });
+
+  const leaveDisposable = editorInstance.onMouseLeave(() => {
+    if (!overCard) scheduleClose();
+  });
+
+  const onCardEnter = () => {
+    overCard = true;
+    cancelClose();
+  };
+  const onCardLeave = () => {
+    overCard = false;
+    scheduleClose();
+  };
+  // Keep clicks inside the card from reaching Monaco (which would move the caret / blur the
+  // widget and dismiss the card before the click registers on the editable value).
+  const onCardMouseDown = (event: MouseEvent) => event.stopPropagation();
+  node.addEventListener('mouseenter', onCardEnter);
+  node.addEventListener('mouseleave', onCardLeave);
+  node.addEventListener('mousedown', onCardMouseDown);
+
+  return {
+    dispose: () => {
+      cancelOpen();
+      cancelClose();
+      moveDisposable.dispose();
+      leaveDisposable.dispose();
+      node.removeEventListener('mouseenter', onCardEnter);
+      node.removeEventListener('mouseleave', onCardLeave);
+      node.removeEventListener('mousedown', onCardMouseDown);
+      editorInstance.removeContentWidget(widget);
+    }
+  };
+};