robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/inspector/fields/FunctionHelpPopover.jsx

@@ -0,0 +1,295 @@
+/**
+ * Shared parameter-reference popover used by all code/function editors in the app.
+ * Import HelpPopover and pass the `type` string matching one of the HELP_CONTENT keys.
+ */
+import { useState } from 'react'
+import { Box, IconButton, Popover, Tooltip, Typography } from '@mui/material'
+import { HelpOutlineOutlined } from '@mui/icons-material'
+
+// ── Help content per editor type ──────────────────────────────────────────────
+
+export const HELP_CONTENT = {
+  // ── Builder calculation (JSEditor / ExpressionEditor) ─────────────────────
+  calculation: {
+    title: 'calculation',
+    desc: 'Async function for reactive logic — fetch data, set state, navigate steps, open dialogs.',
+    params: [
+      { name: 'form',        desc: 'Form field values (read)' },
+      { name: 'data',        desc: 'Reactive page state (read)' },
+      { name: 'setData',     desc: 'Write to page state (triggers re-render)' },
+      { name: 'dataRef',     desc: 'Mutable non-reactive store (read/write, no re-render)' },
+      { name: 'reportRefs',  desc: 'Registry of all grid refs on the page' },
+      { name: 'openDialog',  desc: 'openDialog(key, data?) — open a dialog by Key' },
+      { name: 'closeDialog', desc: 'closeDialog(key) — close a dialog by Key' },
+      { name: 'urlParams',   desc: '{ query, pathname, asPath } from the current page URL' },
+      { name: 'page',        desc: 'stepIndex, goToStep(n), nextStep(), prevStep() — step navigation' },
+      { name: 'dataItem',    desc: '(Repeater only) The current repeated item' },
+      { name: 'itemIndex',   desc: '(Repeater only) The current iteration index (0-based)' },
+      { name: 'newValue',    desc: '(Field actions only) The value emitted by the component — e.g. new input text, mapped rows array for onMapped, etc.' },
+      { name: 'showToast',   desc: "showToast(message, type?) — show a toast notification. type: 'success' | 'error' | 'warning' | 'info' | 'loading'" },
+      { name: 'router',      desc: "Next.js router — router.push('/path'), router.replace(...), router.back(), router.query" },
+      { name: 'globalData',  desc: 'Cross-route global state (read) — persists across page navigations' },
+      { name: 'setGlobalData', desc: 'Write to global state — setGlobalData(prev => ({ ...prev, key: value }))' },
+    ],
+    returns: 'Promise<any>',
+  },
+
+  calculationValidate: {
+    title: 'calculationValidate',
+    desc: 'Validates before advancing to the next step. Same scope as calculation.',
+    params: [
+      { name: 'form',    desc: 'Form field values (read)' },
+      { name: 'data',    desc: 'Reactive page state (read)' },
+      { name: 'setData', desc: 'Write to page state' },
+      { name: 'page',    desc: 'stepIndex, goToStep(n), nextStep(), prevStep()' },
+    ],
+    returns: 'true → allow  |  false → block silently  |  string → block + show as error',
+  },
+
+  // ── AG Grid column functions ───────────────────────────────────────────────
+  valueSetter: {
+    title: 'valueSetter',
+    desc: 'Called when a cell edit is committed. Must return true to confirm the change.',
+    params: [
+      { name: 'params.newValue',  desc: 'The new value entered by the user' },
+      { name: 'params.data',      desc: 'AG Grid row object — alias as rowData to avoid shadowing page data' },
+      { name: 'params.context',   desc: 'Grid context — contains updateRef, nodeName' },
+      { name: 'data',             desc: 'Reactive page state (read-only snapshot)' },
+      { name: 'setData',          desc: 'Write to page state (triggers re-render)' },
+      { name: 'dataRef',          desc: 'Mutable non-reactive store' },
+      { name: 'setRefValue',      desc: 'Track the edit in updateRef for batch saves' },
+      { name: 'getNodeRef',       desc: 'Get the updateRef for any grid by nodeId' },
+    ],
+    returns: 'boolean — true to accept, false to cancel',
+  },
+
+  valueGetter: {
+    title: 'valueGetter',
+    desc: 'Derives the displayed cell value. Runs on every render cycle.',
+    params: [
+      { name: 'params.data',    desc: 'The AG Grid row object' },
+      { name: 'params.context', desc: 'Grid context — contains updateRef, nodeName' },
+      { name: 'data',           desc: 'Reactive page state (read)' },
+      { name: 'dataRef',        desc: 'Mutable non-reactive store' },
+      { name: 'getRefValue',    desc: 'Read a pending edit value from updateRef' },
+    ],
+    returns: 'any — the value to display in the cell',
+  },
+
+  valueFormatter: {
+    title: 'valueFormatter',
+    desc: 'Formats the cell value for display only. Does not affect the underlying data.',
+    params: [
+      { name: 'params.value', desc: 'The raw cell value (from valueGetter or data)' },
+      { name: 'params.data',  desc: 'The AG Grid row object' },
+      { name: 'data',         desc: 'Reactive page state (read)' },
+    ],
+    returns: 'string — the formatted display string',
+  },
+
+  cellStyle: {
+    title: 'cellStyle',
+    desc: 'Returns a CSS style object applied directly to the cell element.',
+    params: [
+      { name: 'params.value', desc: 'The cell value' },
+      { name: 'params.data',  desc: 'The AG Grid row object' },
+      { name: 'data',         desc: 'Reactive page state (read)' },
+    ],
+    returns: 'object — CSS properties e.g. { color: "red", fontWeight: "bold" }',
+  },
+
+  tooltipValueGetter: {
+    title: 'tooltipValueGetter',
+    desc: 'Returns the tooltip string shown on cell hover.',
+    params: [
+      { name: 'params.value', desc: 'The cell value' },
+      { name: 'params.data',  desc: 'The AG Grid row object' },
+    ],
+    returns: 'string — tooltip text',
+  },
+
+  asyncFetchOptions: {
+    title: 'asyncFetchOptions',
+    desc: 'Fetches options for MultiSelectEditor. Called on open and on each search term change.',
+    params: [
+      { name: 'search',      desc: 'Current search string typed by the user' },
+      { name: 'data',        desc: 'Reactive page state (read)' },
+      { name: 'setData',     desc: 'Write to page state' },
+      { name: 'dataRef',     desc: 'Mutable non-reactive store' },
+      { name: 'reportRefs',  desc: 'Registry of all grid refs on the page' },
+    ],
+    returns: 'Promise<array> — list of option objects',
+  },
+
+  // ── Custom filter editor (CustomFilterDialog) ─────────────────────────────
+  customFilter: {
+    title: 'customFilter',
+    desc: 'JavaScript code block that builds a custom filter array appended to the main query.',
+    params: [
+      { name: 'authContext',       desc: 'Auth context — user, permissions, tokens (e.g. authContext.user.id)' },
+      { name: 'filters',           desc: 'Current filter array from the dialog' },
+      { name: 'customFilter',      desc: 'Declare this array and push filter objects into it — it is returned automatically' },
+    ],
+    returns: 'void — populate the customFilter array, e.g. customFilter = [{ path: "UserId", value: authContext.user.id, method: "Equals" }]',
+  },
+
+  // ── Formatting / conditional expression ───────────────────────────────────
+  formattingExpression: {
+    title: 'formattingExpression',
+    desc: 'JavaScript expression evaluated to produce a style value for conditional formatting.',
+    params: [
+      { name: 'value',     desc: 'The cell value being formatted' },
+      { name: 'row',       desc: 'The full data row object' },
+      { name: 'rowIndex',  desc: 'Index of the row in the grid' },
+    ],
+    returns: 'string | number — the resulting CSS value (color, size, etc.)',
+  },
+
+  // ── Generic column params / additional params ─────────────────────────────
+  columnParams: {
+    title: 'columnParams',
+    desc: 'AG Grid column definition properties as key-value pairs (without outer braces). Merged into the colDef object.',
+    params: [
+      { name: 'valueFormatter', desc: '(p) => string — format display value' },
+      { name: 'width',          desc: 'number — fixed column width in px' },
+      { name: 'minWidth',       desc: 'number — minimum column width in px' },
+      { name: 'cellClass',      desc: 'string | (p) => string — CSS class on the cell' },
+      { name: 'comparator',     desc: '(a, b, nodeA, nodeB, desc) => number — custom sort' },
+    ],
+    returns: 'object — merged into the AG Grid colDef',
+  },
+
+  // ── AG Grid / Report Viewer row action ───────────────────────────────────
+  actionButton: {
+    title: 'actionButton',
+    desc: 'Runs when the user clicks this action in the row ⋮ popover. The full AG Grid row object is available as `rowData`.',
+    params: [
+      { name: 'rowData',       desc: 'The AG Grid row object — all server-side field values for this row' },
+      { name: 'data',          desc: 'Reactive page state (read)' },
+      { name: 'setData',       desc: 'Write to page state (triggers re-render)' },
+      { name: 'dataRef',       desc: 'Mutable non-reactive store (read/write, no re-render)' },
+      { name: 'reportRefs',    desc: 'Registry of all grid refs on the page' },
+      { name: 'openDialog',    desc: 'openDialog(key, data?) — open a dialog by Key' },
+      { name: 'closeDialog',   desc: 'closeDialog(key) — close a dialog by Key' },
+      { name: 'setRefValue',   desc: 'setRefValue(updateRef, rowData, id, field, value) — track pending edits' },
+      { name: 'getRefValue',   desc: 'getRefValue(updateRef, rowData, id, field) — read a pending edit value' },
+      { name: 'clearRefRow',   desc: 'clearRefRow(updateRef, rowData, id) — remove pending edits for this row' },
+      { name: 'clearAllRef',   desc: 'clearAllRef(updateRef) — remove ALL pending edits for the grid' },
+      { name: 'getNodeRef',    desc: 'getNodeRef(nodeId?) — get the updateRef for any grid (omit for this grid)' },
+      { name: 'THIS_NODE',     desc: 'Sentinel — pass as `node` argument to target the current grid' },
+      { name: 'showToast',     desc: "showToast(message, type?) — 'success' | 'error' | 'warning' | 'info'" },
+    ],
+    returns: 'Promise<any>',
+  },
+
+  // ── Tree View node action ─────────────────────────────────────────────────
+  treeViewAction: {
+    title: 'treeViewAction',
+    desc: 'Runs when the user clicks this action button in the Tree View node popover. The clicked node object is available as `node`.',
+    params: [
+      { name: 'node',        desc: 'The full tree node object that was clicked (all its data fields)' },
+      { name: 'data',        desc: 'Reactive page state (read)' },
+      { name: 'setData',     desc: 'Write to page state (triggers re-render)' },
+      { name: 'dataRef',     desc: 'Mutable non-reactive store (read/write, no re-render)' },
+      { name: 'reportRefs',  desc: 'Registry of all grid refs on the page' },
+      { name: 'openDialog',  desc: 'openDialog(key, data?) — open a dialog by Key' },
+      { name: 'closeDialog', desc: 'closeDialog(key) — close a dialog by Key' },
+      { name: 'showToast',   desc: "showToast(message, type?) — 'success' | 'error' | 'warning' | 'info'" },
+    ],
+    returns: 'Promise<any>',
+  },
+
+  // ── Cell editor params ────────────────────────────────────────────────────
+  cellEditorParams: {
+    title: 'cellEditorParams',
+    desc: 'Object or function returning params passed to the cell editor component.',
+    params: [
+      { name: 'values',   desc: '(agSelectCellEditor) Array of allowed values' },
+      { name: 'options',  desc: '(SelectEditor / AutocompleteEditor) Array of { value, label } or strings' },
+      { name: 'min/max',  desc: '(NumberEditor) Numeric bounds' },
+      { name: 'color',    desc: '(CheckboxEditor) MUI palette key' },
+    ],
+    returns: 'object — passed directly as props to the editor component',
+  },
+}
+
+// ── HelpPopover component ─────────────────────────────────────────────────────
+
+export function HelpPopover({ type, iconSx }) {
+  const [anchor, setAnchor] = useState(null)
+  const help = HELP_CONTENT[type]
+  if (!help) return null
+
+  return (
+    <>
+      <Tooltip title='Parameter reference'>
+        <IconButton
+          size='small'
+          onClick={e => { e.stopPropagation(); setAnchor(e.currentTarget) }}
+          sx={{ color: '#5a7a9a', p: 0.4, '&:hover': { color: '#90caf9' }, ...iconSx }}
+        >
+          <HelpOutlineOutlined sx={{ fontSize: 15 }} />
+        </IconButton>
+      </Tooltip>
+
+      <Popover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        sx={{ zIndex: 1600 }}
+        PaperProps={{
+          sx: {
+            bgcolor: '#1a1f2a',
+            border: '1px solid #2a3a4a',
+            borderRadius: 1.5,
+            boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
+            p: 2,
+            maxWidth: 420,
+            minWidth: 280,
+          },
+        }}
+      >
+        {/* Title */}
+        <Typography sx={{ fontSize: 12, fontWeight: 700, color: '#90caf9', mb: 0.5, fontFamily: 'monospace' }}>
+          {help.title}
+        </Typography>
+        <Typography sx={{ fontSize: 11, color: '#8a9ab0', mb: 1.5, lineHeight: 1.5 }}>
+          {help.desc}
+        </Typography>
+
+        {/* Params */}
+        {help.params.length > 0 && (
+          <>
+            <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#445', mb: 0.75 }}>
+              Available
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mb: 1.5 }}>
+              {help.params.map(p => (
+                <Box key={p.name} sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <Typography sx={{ fontSize: 11, color: '#aed581', fontFamily: 'monospace', flexShrink: 0, minWidth: 130 }}>
+                    {p.name}
+                  </Typography>
+                  <Typography sx={{ fontSize: 11, color: '#7a8fa0', lineHeight: 1.4 }}>
+                    {p.desc}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          </>
+        )}
+
+        {/* Returns */}
+        <Box sx={{ borderTop: '1px solid #2a3a4a', pt: 1 }}>
+          <Typography sx={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#445', mb: 0.5 }}>
+            Returns / Result
+          </Typography>
+          <Typography sx={{ fontSize: 11, color: '#ffcc80', fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+            {help.returns}
+          </Typography>
+        </Box>
+      </Popover>
+    </>
+  )
+}

package/src/views/builder/inspector/fields/IconEditor.jsx

@@ -0,0 +1,64 @@
+import { Box, TextField, Tooltip } from '@mui/material'
+import JSEditor from '../../JSEditor'
+import { resolveIcon } from 'services/builderHelper/iconResolver'
+
+/**
+ * Inspector field for icon / text adornment values.
+ *
+ * • User types an MUI icon name  (e.g. "SearchOutlined") → shows icon preview
+ * • User types plain text        (e.g. "$" or "kg")      → shows text preview
+ * • Expression mode toggle via JSEditor button (same as other field editors)
+ *
+ * Stored value shape (same as every other field):
+ *   { valueType: 'value', value: 'SearchOutlined' }
+ *   { valueType: 'expression', expression: { type: 'js', code: '...' } }
+ */
+export default function IconEditor({ field, onChange }) {
+  const safeField  = field ?? { valueType: 'value', value: '' }
+  const isExpr     = safeField.valueType === 'expression'
+  const rawValue   = isExpr ? '' : (safeField.value ?? '')
+
+  // Resolve preview
+  const Icon       = !isExpr && rawValue ? resolveIcon(rawValue) : null
+  const hasText    = !isExpr && rawValue && !Icon
+  const previewTip = Icon ? rawValue : (hasText ? `Text: "${rawValue}"` : '')
+
+  return (
+    <Box display='flex' alignItems='center' gap={0.5}>
+      <TextField
+        size='small'
+        fullWidth
+        disabled={isExpr}
+        value={rawValue}
+        placeholder={isExpr ? 'Using expression' : 'Icon name or text…'}
+        onChange={e => onChange?.({ valueType: 'value', value: e.target.value })}
+        InputProps={{
+          endAdornment: (
+            <Tooltip title={previewTip} placement='top' disableHoverListener={!previewTip}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  pr: 0.5,
+                  color: 'text.secondary',
+                  fontSize: 13,
+                  minWidth: 20,
+                }}
+              >
+                {Icon && <Icon sx={{ fontSize: 18 }} />}
+                {hasText && rawValue}
+              </Box>
+            </Tooltip>
+          ),
+        }}
+      />
+
+      <JSEditor
+        value={isExpr ? undefined : rawValue}
+        expression={safeField.expression}
+        mode={isExpr ? 'expression' : 'value'}
+        onChange={payload => onChange?.(payload)}
+      />
+    </Box>
+  )
+}

package/src/views/builder/inspector/fields/KpiActionField.jsx

@@ -0,0 +1,223 @@
+import { useState } from 'react'
+import { Box, Button, Chip, IconButton, Tooltip, Typography } from '@mui/material'
+import { Close, DeleteOutlined, Fullscreen, FullscreenExit } from '@mui/icons-material'
+import { CodeBraces } from 'mdi-material-ui'
+import Editor from '@monaco-editor/react'
+import { HelpPopover } from './FunctionHelpPopover'
+
+// ── Monaco options — identical to ColumnFunctionEditor ────────────────────────
+
+const EDITOR_OPTIONS = {
+  minimap:              { enabled: false },
+  fontFamily:           "Menlo, Monaco, 'Courier New', monospace",
+  fontSize:             13,
+  lineNumbers:          'on',
+  wordWrap:             'on',
+  scrollBeyondLastLine: false,
+  automaticLayout:      true,
+}
+
+function buildTemplate(contextVars = []) {
+  const varLines = contextVars.length
+    ? contextVars.map(v => `  //   ${v}`).join('\n')
+    : '  //   (no extra variables for this event)'
+
+  return `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+  // Available click variables:
+${varLines}
+
+  // Examples:
+  // setData(prev => ({ ...prev, selected: clickedItem }))
+  // openDialog('myDialog', { data: { row: clickedItem } })
+  // showToast('Selected: ' + clickedLabel, 'info')
+}
+`
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/**
+ * Inspector field for a single KPI event action.
+ * Renders identically to ColumnFunctionEditor (slide-up panel, HelpPopover, fullscreen).
+ *
+ * Props:
+ *   label       — field label shown in FieldWrapper
+ *   contextVars — string[] of variables injected at click time (shown as chips in panel header)
+ *   value       — { actionType: 'custom', code: '...' } | undefined | null
+ *   onChange    — (newVal) => void  (newVal is the action object or null to clear)
+ */
+export default function KpiActionField({ label, contextVars = [], value, onChange }) {
+  const [open, setOpen]           = useState(false)
+  const [fullscreen, setFullscreen] = useState(false)
+  const [draft, setDraft]         = useState('')
+
+  const hasAction = !!value?.code?.trim()
+
+  const handleOpen = () => {
+    setDraft(value?.code?.trim() || buildTemplate(contextVars))
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
+  const handleSave = () => {
+    const trimmed = draft.trim()
+    onChange(trimmed ? { actionType: 'custom', code: trimmed } : null)
+    handleClose()
+  }
+
+  const handleClear = (e) => {
+    e.stopPropagation()
+    onChange(null)
+  }
+
+  // First meaningful line for the inline preview
+  const preview = hasAction
+    ? value.code.split('\n').find(l => {
+        const t = l.trim()
+        return t && !t.startsWith('//') && !t.startsWith('async function') && !t.startsWith('}')
+      }) ?? '(code set)'
+    : null
+
+  return (
+    <>
+      {/* ── Inline inspector row ── */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, width: '100%' }}>
+        {/* Code preview / placeholder — clicking opens the editor */}
+        <Box
+          onClick={handleOpen}
+          sx={{
+            flex: 1, minWidth: 0, cursor: 'pointer',
+            px: 1, py: 0.4, borderRadius: 1,
+            bgcolor: 'action.hover',
+            '&:hover': { bgcolor: 'action.selected' },
+          }}
+        >
+          <Typography noWrap sx={{
+            fontSize: 11, fontFamily: 'monospace',
+            color: hasAction ? '#aed581' : 'text.disabled',
+          }}>
+            {preview ?? `(no action)`}
+          </Typography>
+        </Box>
+
+        {/* Open editor */}
+        <Tooltip title={`Open ${label ?? 'action'} editor`}>
+          <IconButton size='small' onClick={handleOpen} sx={{ color: hasAction ? '#aed581' : '#555', p: 0.4 }}>
+            <CodeBraces fontSize='small' />
+          </IconButton>
+        </Tooltip>
+
+        {/* Clear */}
+        {hasAction && (
+          <Tooltip title='Clear action'>
+            <IconButton size='small' onClick={handleClear} sx={{ color: 'text.disabled', p: 0.4 }}>
+              <DeleteOutlined sx={{ fontSize: 15 }} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Box>
+
+      {/* ── Slide-up editor panel — same style as ColumnFunctionEditor ── */}
+      {open && (
+        <Box sx={{
+          position:   'fixed',
+          bottom:     0,
+          left:       0,
+          right:      0,
+          top:        fullscreen ? 0 : 'auto',
+          height:     fullscreen ? '100vh' : '55vh',
+          bgcolor:    '#1e1e1e',
+          zIndex:     1500,
+          borderTop:  fullscreen ? 'none' : '2px solid #2a3a4a',
+          display:    'flex',
+          flexDirection: 'column',
+          transition: 'height 0.15s ease, top 0.15s ease',
+        }}>
+          {/* Header */}
+          <Box sx={{
+            display:        'flex',
+            alignItems:     'center',
+            justifyContent: 'space-between',
+            px: 2, py: 0.8,
+            bgcolor:     '#252526',
+            borderBottom: '1px solid #333',
+            flexShrink:  0,
+            gap: 1,
+          }}>
+            {/* Left: icon + label + context chips */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
+              <CodeBraces sx={{ fontSize: 14, color: '#7b8ea0', flexShrink: 0 }} />
+              <Typography sx={{ fontSize: 12, color: '#90caf9', fontWeight: 600, letterSpacing: '0.05em', flexShrink: 0 }}>
+                {label}
+              </Typography>
+              {contextVars.length > 0 && (
+                <>
+                  <Typography sx={{ fontSize: 11, color: '#555', flexShrink: 0 }}>·</Typography>
+                  {contextVars.map(v => (
+                    <Chip
+                      key={v}
+                      label={v}
+                      size='small'
+                      sx={{
+                        fontSize: 10, fontFamily: 'monospace', height: 18,
+                        bgcolor: '#1e2a1e', color: '#aed581',
+                        border: '1px solid #2e4a2e',
+                        '& .MuiChip-label': { px: 0.75 },
+                      }}
+                    />
+                  ))}
+                </>
+              )}
+            </Box>
+
+            {/* Right: help + fullscreen + close */}
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0 }}>
+              <HelpPopover type='calculation' />
+              <Tooltip title={fullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+                <IconButton size='small' onClick={() => setFullscreen(f => !f)} sx={{ color: '#666' }}>
+                  {fullscreen
+                    ? <FullscreenExit sx={{ fontSize: 16 }} />
+                    : <Fullscreen sx={{ fontSize: 16 }} />}
+                </IconButton>
+              </Tooltip>
+              <IconButton size='small' onClick={handleClose} sx={{ color: '#666' }}>
+                <Close sx={{ fontSize: 16 }} />
+              </IconButton>
+            </Box>
+          </Box>
+
+          {/* Monaco editor */}
+          <Box sx={{ flex: 1, minHeight: 0 }}>
+            <Editor
+              height='100%'
+              defaultLanguage='javascript'
+              theme='vs-dark'
+              value={draft}
+              options={EDITOR_OPTIONS}
+              onChange={v => setDraft(v ?? '')}
+              onMount={editor => editor.focus()}
+            />
+          </Box>
+
+          {/* Footer */}
+          <Box sx={{
+            display:        'flex',
+            gap:            1,
+            justifyContent: 'flex-end',
+            px: 2, py: 1,
+            bgcolor:     '#252526',
+            borderTop:   '1px solid #333',
+            flexShrink:  0,
+          }}>
+            <Button size='small' onClick={handleClose} sx={{ color: '#888' }}>Cancel</Button>
+            <Button size='small' variant='contained' color='primary' onClick={handleSave}>Apply</Button>
+          </Box>
+        </Box>
+      )}
+    </>
+  )
+}