robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/viewer/Viewer.jsx

@@ -1,15 +1,19 @@
 import { Box } from '@mui/material'
+import { useRef, useEffect } from 'react'
 import ViewerToolbar from './ViewerToolbar'
 import ComponentRenderer from './ComponentRenderer'
 import ProductionViewer from './ProductionViewer'
+import DialogsZone from './DialogsZone'
 import { useBuilder } from 'src/context/BuilderContext'
+import { findNode, removeFromTree } from 'services/builderHelper'
+import { duplicateInTree, pasteIntoTree, CONTAINER_TYPES, writeNodeToClipboard, readNodeFromClipboard } from 'services/builderHelper/builderHelper'
 
 /**
  * Viewer component for the builder - integrated with BuilderContext
  * Used within the builder for edit and preview modes
  * Preview mode now uses ProductionViewer component
  */
-export default function Viewer() {
+export default function Viewer({ isDark, onToggleTheme }) {
   const {
     schema,
     mode,
@@ -29,7 +33,16 @@ export default function Viewer() {
     setSelectedId,
     setSchema,
     draggingNodeId,
-    setDraggingNodeId
+    setDraggingNodeId,
+    clipboard,
+    setClipboard,
+    undo,
+    redo,
+    dataRef,
+    reportRefs,
+    dialogRefs,
+    openDialog,
+    closeDialog,
   } = useBuilder()
 
   // Create viewer context object to pass down (for edit mode)
@@ -48,16 +61,98 @@ export default function Viewer() {
     setValidationErrors,
     submitForm,
     resetForm,
+    // ── Unified ref storage ──────────────────────────────────────────────
+    dataRef,    // useRef({}) — mutable non-reactive store
+    reportRefs, // useRef({}) — { [nodeId]: updateRef } per ReportViewer
+    dialogRefs, // useRef({}) — { [key]: { open, close } } per Dialog
+    openDialog,
+    closeDialog,
     // Builder context for edit mode features
     builderContext: {
       selectedId,
       setSelectedId,
       setSchema,
       draggingNodeId,
-      setDraggingNodeId
+      setDraggingNodeId,
+      clipboard,
+      setClipboard,
     }
   }
 
+  // ── Keyboard shortcuts: Ctrl/Cmd + C (copy), V (paste), D (duplicate) ──────
+  useEffect(() => {
+    if (!isEditMode) return
+
+    // Async so we can await the system clipboard on paste.
+    // e.preventDefault() is always called synchronously (before any await)
+    // so browser default suppression is not affected.
+    const handleKeyDown = async e => {
+      // Don't intercept while the user is typing
+      const tag = document.activeElement?.tagName
+      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)) return
+      if (document.activeElement?.isContentEditable) return
+
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === 'c' && selectedId) {
+          // ── Copy ──────────────────────────────────────────────────────────
+          e.preventDefault()
+          const node = findNode(schema.root, selectedId)
+          if (node) {
+            setClipboard(node)                  // fast same-tab path
+            writeNodeToClipboard(node)           // cross-tab system clipboard
+          }
+        } else if (e.key === 'x' && selectedId) {
+          // ── Cut — copy then delete (single undo step) ─────────────────────
+          e.preventDefault()
+          const node = findNode(schema.root, selectedId)
+          if (node) {
+            setClipboard(node)
+            writeNodeToClipboard(node)
+            setSchema(prev => ({ ...prev, root: removeFromTree(prev.root, selectedId) }))
+            setSelectedId(null)
+          }
+        } else if (e.key === 'v') {
+          // ── Paste — prefer system clipboard (enables cross-tab paste) ─────
+          e.preventDefault()                    // call before await
+          const systemNode = await readNodeFromClipboard()
+          const nodeToUse  = systemNode ?? clipboard
+          if (systemNode) setClipboard(systemNode) // keep React state in sync
+          if (nodeToUse) {
+            setSchema(prev => {
+              const targetNode = selectedId ? findNode(prev.root, selectedId) : null
+              const asChild = targetNode ? CONTAINER_TYPES.has(targetNode.type) : false
+              return { ...prev, root: pasteIntoTree(prev.root, selectedId, nodeToUse, asChild) }
+            })
+          }
+        } else if (e.key === 'd' && selectedId) {
+          // ── Duplicate ─────────────────────────────────────────────────────
+          e.preventDefault()
+          setSchema(prev => ({ ...prev, root: duplicateInTree(prev.root, selectedId) }))
+        } else if (e.key === 'z' && !e.shiftKey) {
+          // ── Undo ──────────────────────────────────────────────────────────
+          e.preventDefault()
+          undo()
+        } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
+          // ── Redo (Ctrl+Shift+Z or Ctrl+Y) ─────────────────────────────────
+          e.preventDefault()
+          redo()
+        }
+      } else if ((e.key === 'Delete' || e.key === 'Backspace') && selectedId) {
+        // ── Delete selected node ───────────────────────────────────────────────
+        e.preventDefault()
+        setSchema(prev => ({ ...prev, root: removeFromTree(prev.root, selectedId) }))
+        setSelectedId(null)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isEditMode, selectedId, clipboard, schema, setClipboard, setSchema, undo, redo])
+
+  // Ref populated by ProductionViewer on every render so the debug panel
+  // can read preview-mode state even though it lives outside useBuilder().
+  const previewStateRef = useRef({})
+
   if (!schema?.root) {
     return (
       <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -70,13 +165,16 @@ export default function Viewer() {
 
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <ViewerToolbar mode={mode} setMode={setMode} />
+      <ViewerToolbar mode={mode} setMode={setMode} previewStateRef={previewStateRef} isDark={isDark} onToggleTheme={onToggleTheme} />
       {isPreviewMode ? (
-        <ProductionViewer schema={schema} />
+        <ProductionViewer schema={schema} stateRef={previewStateRef} />
       ) : (
-        <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
-          <ComponentRenderer node={schema.root} viewerContext={viewerContext} />
-        </Box>
+        <>
+          <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+            <ComponentRenderer node={schema.root} viewerContext={viewerContext} />
+          </Box>
+          <DialogsZone dialogs={schema.dialogs ?? []} viewerContext={viewerContext} />
+        </>
       )}
     </Box>
   )

package/src/views/builder/viewer/ViewerComponentWrapper.jsx

@@ -2,7 +2,8 @@ import { Box, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/m
 import { resolveProps } from 'services/builderHelper/resolveProps'
 import { removeFromTree } from 'services/builderHelper'
 import { duplicateInTree } from 'services/builderHelper/builderHelper'
-import { Delete, ContentCopy, Save } from '@mui/icons-material'
+import { Delete, ContentCopy, ContentCut, ContentPaste, Save } from '@mui/icons-material'
+import { pasteIntoTree, CONTAINER_TYPES, writeNodeToClipboard, readNodeFromClipboard } from 'services/builderHelper/builderHelper'
 import SaveWidgetDialog from 'views/builder/viewer/SaveWidgetDialog'
 import { useState } from 'react'
 import PostService from 'services/PostService'
@@ -52,7 +53,7 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
   const { data, form, isEditMode, builderContext } = viewerContext
 
   // Resolve style and advanced props
-  const styleProps = resolveProps(node, 'style', { form, data })
+  const styleProps = resolveProps(node, 'style', viewerContext)
   const elementStyle = resolveElementStyle(styleProps.elementStyle)
   const elementCss = resolveElementCss(styleProps.elementCss)
   const resolvedStyleProps = {
@@ -60,7 +61,7 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
     elementStyle: undefined,
     elementCss: undefined
   }
-  const advancedProps = resolveProps(node, 'advanced', { form, data })
+  const advancedProps = resolveProps(node, 'advanced', viewerContext)
 
   // Check visibility from advanced props
   const isVisible = advancedProps.visible !== false
@@ -68,6 +69,8 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
   // Get selection state from builder context (only available in edit mode)
   const isSelected = builderContext?.selectedId === node.id
   const canEdit = isEditMode && (builderContext != null)
+  const isRoot = node.id === 'root'
+  const canDrag = canEdit && !isRoot
   const isDraggingThis = builderContext?.draggingNodeId === node.id
   // Handle component selection
   const handleClick = e => {
@@ -89,6 +92,48 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
     }
   }
 
+  // Clipboard helpers from builderContext
+  const clipboard   = builderContext?.clipboard
+  const setClipboard = builderContext?.setClipboard
+
+  // Handle cut — copy to system + React clipboard, then remove (one undo step)
+  const handleCut = e => {
+    e.stopPropagation()
+    if (canEdit) {
+      if (setClipboard) setClipboard(node)
+      writeNodeToClipboard(node)                 // system clipboard (cross-tab)
+      if (builderContext.setSchema) {
+        builderContext.setSchema(prev => ({ ...prev, root: removeFromTree(prev.root, node.id) }))
+        builderContext.setSelectedId(null)
+      }
+    }
+  }
+
+  // Handle copy — store in React state AND system clipboard
+  const handleCopy = e => {
+    e.stopPropagation()
+    if (canEdit) {
+      if (setClipboard) setClipboard(node)
+      writeNodeToClipboard(node)                 // system clipboard (cross-tab)
+    }
+  }
+
+  // Handle paste — prefer system clipboard so cross-tab paste works
+  const handlePaste = async e => {
+    e.stopPropagation()
+    if (!canEdit || !builderContext.setSchema) return
+
+    const systemNode = await readNodeFromClipboard()
+    const nodeToUse  = systemNode ?? clipboard
+    if (systemNode && setClipboard) setClipboard(systemNode) // keep React state in sync
+    if (!nodeToUse) return
+
+    builderContext.setSchema(prev => {
+      const asChild = CONTAINER_TYPES.has(node.type)
+      return { ...prev, root: pasteIntoTree(prev.root, node.id, nodeToUse, asChild) }
+    })
+  }
+
   // Handle duplicate action
   const handleDuplicate = e => {
     e.stopPropagation()
@@ -170,7 +215,7 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
       <Box
         className={node.className}
         style={elementCss}
-        draggable={canEdit}
+        draggable={canDrag}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
         onClick={handleClick}
@@ -183,15 +228,17 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
           ...elementStyle,
           // Edit mode styling
           ...(canEdit && {
-            cursor: 'grab',
+            cursor: canDrag ? 'grab' : 'default',
             outline: isSelected ? '2px solid #1976d2' : '1px solid transparent',
             outlineOffset: '2px',
             '&:hover': {
               outline: isSelected ? '2px solid #1976d2' : '1px solid #90caf9'
             },
-            '&:active': {
-              cursor: 'grabbing'
-            }
+            ...(canDrag && {
+              '&:active': {
+                cursor: 'grabbing'
+              }
+            })
           }),
           // Show hidden components with opacity in edit mode
           ...(isEditMode &&
@@ -217,8 +264,22 @@ export default function ViewerComponentWrapper({ node, children, viewerContext }
         anchorReference='anchorPosition'
         anchorPosition={contextMenu ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined}
       >
-        <MenuItem onClick={e => { handleDuplicate(e); handleCloseMenu() }} dense>
+        <MenuItem onClick={e => { handleCut(e); handleCloseMenu() }} dense>
+          <ListItemIcon><ContentCut fontSize='small' /></ListItemIcon>
+          <ListItemText>Cut</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={e => { handleCopy(e); handleCloseMenu() }} dense>
           <ListItemIcon><ContentCopy fontSize='small' /></ListItemIcon>
+          <ListItemText>Copy</ListItemText>
+        </MenuItem>
+        {clipboard && (
+          <MenuItem onClick={e => { handleCloseMenu(); handlePaste(e) }} dense>
+            <ListItemIcon><ContentPaste fontSize='small' /></ListItemIcon>
+            <ListItemText>Paste</ListItemText>
+          </MenuItem>
+        )}
+        <MenuItem onClick={e => { handleDuplicate(e); handleCloseMenu() }} dense>
+          <ListItemIcon><ContentCopy fontSize='small' sx={{ opacity: 0.6 }} /></ListItemIcon>
           <ListItemText>Duplicate</ListItemText>
         </MenuItem>
         <MenuItem onClick={handleSaveClick} dense>

package/src/views/builder/viewer/ViewerToolbar.jsx

@@ -1,37 +1,210 @@
-import { Box, ToggleButton, ToggleButtonGroup, Button } from '@mui/material'
-import { ContentSave } from 'mdi-material-ui'
-import { useState } from 'react'
+import { Box, ToggleButton, ToggleButtonGroup, IconButton, Tooltip, Dialog, Tabs, Tab, Chip } from '@mui/material'
+import { useState, useCallback, useEffect } from 'react'
+import { DataObjectOutlined, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, BugReportOutlined, RefreshOutlined, DarkModeOutlined, LightModeOutlined, UndoOutlined, RedoOutlined, HistoryOutlined } from '@mui/icons-material'
+import Editor from '@monaco-editor/react'
 import SaveViewDialog from './SaveViewDialog'
 import { useBuilder } from 'src/context/BuilderContext'
 import PostService from 'src/services/PostService'
 import { Endpoints } from 'src/services/Endpoints'
 
-export default function ViewerToolbar({ mode, setMode }) {
-  const { schema } = useBuilder()
-  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
-
-  const handleSaveClick = () => {
-    setSaveDialogOpen(true)
+// ── Safe serialise — handles circular refs, undefined, functions ──────────────
+function safeStringify(value) {
+  try {
+    return JSON.stringify(
+      value,
+      (_, v) => {
+        if (typeof v === 'function') return '[Function]'
+        if (typeof v === 'undefined') return null
+        return v
+      },
+      2
+    )
+  } catch {
+    return '"[Unserializable]"'
   }
+}
 
-  const handleSave = async (title) => {
-    if (!schema || !schema.root) {
-      console.error('No schema to save')
-      return
+const EDITOR_OPTS = {
+  readOnly: true,
+  minimap: { enabled: false },
+  fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+  fontSize: 13,
+  lineNumbers: 'on',
+  wordWrap: 'off',
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+}
+
+// ── Debug panel tabs ──────────────────────────────────────────────────────────
+
+const TABS = [
+  { key: 'data',       label: 'data' },
+  { key: 'form',       label: 'form' },
+  { key: 'dataRef',    label: 'dataRef' },
+  { key: 'reportRefs', label: 'reportRefs' },
+]
+
+function DebugPanel({ open, onClose, getState }) {
+  const [tab, setTab]               = useState(0)
+  const [rev, setRev]               = useState(0)
+  const [fullscreen, setFullscreen] = useState(false)
+
+  // Esc — exit fullscreen first, then close panel (same pattern as JSEditor)
+  useEffect(() => {
+    if (!open) return
+    const onKey = e => {
+      if (e.key !== 'Escape') return
+      if (fullscreen) setFullscreen(false)
+      else { setFullscreen(false); onClose() }
     }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, fullscreen, onClose])
 
-    setIsSaving(true)
-    try {
-      const data = {
-        title: title,
-        value: JSON.stringify(schema)
-      }
+  // Call getState() fresh on every render so Refresh (which bumps rev) always
+  // picks up the latest values from refs/state without needing the parent to
+  // re-render first.
+  const { data, form, dataRef, reportRefs } = getState()
+
+  const snapshots = {
+    data,
+    form,
+    dataRef:    dataRef?.current,
+    reportRefs: reportRefs?.current
+      ? Object.fromEntries(
+          Object.entries(reportRefs.current).map(([k, v]) => {
+            // DataGrid entry — has setRows/addRow functions and a rows getter.
+            // Resolve eagerly so the inspector shows the actual array.
+            if (v && typeof v === 'object' && typeof v.setRows === 'function') {
+              return [k, { __type: 'DataGrid', storageKey: v.storageKey, rows: v.rows }]
+            }
+            // ReportViewer entry — v is a React ref { current: updateArray }
+            return [k, v?.current ?? v]
+          })
+        )
+      : {},
+  }
+
+  const current = TABS[tab]
+  const value   = safeStringify(snapshots[current.key] ?? null)
+
+  const entryCount = (obj) => {
+    if (!obj || typeof obj !== 'object') return 0
+    return Object.keys(obj).length
+  }
+
+  const panelSx = fullscreen
+    ? { position: 'fixed', inset: 0, width: '100%', height: '100%', border: 'none' }
+    : { position: 'fixed', bottom: 0, right: 0, width: 480, height: '50vh', borderTop: '1px solid #333', borderLeft: '1px solid #333' }
+
+  return (
+    <Box
+      sx={{
+        ...panelSx,
+        bgcolor: '#1e1e1e',
+        zIndex: 1400,
+        display: open ? 'flex' : 'none',
+        flexDirection: 'column',
+        transition: 'width 0.15s ease, height 0.15s ease',
+      }}
+    >
+      {/* Header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526', borderBottom: '1px solid #1a1a1a', px: 1, py: 0.5, gap: 0.5 }}>
+        <BugReportOutlined sx={{ fontSize: 14, color: '#e5c07b', mr: 0.5 }} />
+        <Box sx={{ color: '#ccc', fontSize: 12, fontFamily: 'monospace', flex: 1 }}>State Inspector</Box>
+        <Tooltip title='Refresh snapshot'>
+          <IconButton size='small' onClick={() => setRev(r => r + 1)} sx={{ color: '#aaa', '&:hover': { color: '#fff' } }}>
+            <RefreshOutlined sx={{ fontSize: 14 }} />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title={fullscreen ? 'Exit fullscreen (Esc)' : 'Fullscreen'}>
+          <IconButton size='small' onClick={() => setFullscreen(f => !f)} sx={{ color: '#aaa', '&:hover': { color: '#fff' } }}>
+            {fullscreen
+              ? <FullscreenExitOutlined sx={{ fontSize: 14 }} />
+              : <FullscreenOutlined    sx={{ fontSize: 14 }} />}
+          </IconButton>
+        </Tooltip>
+        <Tooltip title='Close'>
+          <IconButton size='small' onClick={() => { setFullscreen(false); onClose() }} sx={{ color: '#aaa', '&:hover': { color: '#fff' } }}>
+            <CloseOutlined sx={{ fontSize: 14 }} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* Tabs */}
+      <Box sx={{ bgcolor: '#252526', borderBottom: '1px solid #1a1a1a' }}>
+        <Tabs
+          value={tab}
+          onChange={(_, v) => setTab(v)}
+          sx={{
+            minHeight: 32,
+            '.MuiTab-root': { minHeight: 32, py: 0, px: 1.5, fontSize: 11, fontFamily: 'monospace', color: '#666', textTransform: 'none' },
+            '.Mui-selected': { color: '#fff !important', fontWeight: 600 },
+            '.MuiTabs-indicator': { bgcolor: '#4ec9b0', height: 2 },
+          }}
+        >
+          {TABS.map((t, i) => {
+            const count = entryCount(snapshots[t.key])
+            return (
+              <Tab
+                key={t.key}
+                label={
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    {t.label}
+                    {count > 0 && (
+                      <Chip
+                        label={count}
+                        size='small'
+                        sx={{ height: 14, fontSize: 9, bgcolor: '#3a3a3a', color: '#888',
+                          '.MuiChip-label': { px: 0.5 } }}
+                      />
+                    )}
+                  </Box>
+                }
+              />
+            )
+          })}
+        </Tabs>
+      </Box>
 
-      const response = await PostService(Endpoints.View.Post.Add, true, data)
+      {/* Editor */}
+      <Box sx={{ flex: 1, minHeight: 0 }}>
+        <Editor
+          key={`${tab}-${rev}`}
+          height='100%'
+          defaultLanguage='json'
+          theme='vs-dark'
+          value={value}
+          options={EDITOR_OPTS}
+        />
+      </Box>
+    </Box>
+  )
+}
 
+// ── Main toolbar ──────────────────────────────────────────────────────────────
+
+export default function ViewerToolbar({ mode, setMode, previewStateRef, isDark, onToggleTheme }) {
+  const { schema, data, form, dataRef, reportRefs, undo, redo, canUndo, canRedo, markClean, logSchema, openSessionLog, viewMetaData } = useBuilder()
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [isSaving, setIsSaving]             = useState(false)
+  const [schemaOpen, setSchemaOpen]         = useState(false)
+  const [debugOpen, setDebugOpen]           = useState(false)
+
+
+  const handleSave = async (title) => {
+    if (!schema?.root) { console.error('No schema to save'); return }
+    setIsSaving(true)
+    try {
+      const response = await PostService(Endpoints.View.Post.Add, true, { title, value: JSON.stringify(schema) })
       if (response) {
         setSaveDialogOpen(false)
+        markClean()
+        // Capture this save as a future training example. Prompt is left
+        // empty — developers fill it in via the Session Logs dialog.
+        try {
+          logSchema({ builder: 'ui', trigger: 'save', title, viewMetaData, schema })
+        } catch (e) { console.warn('[sessionLog] log on save failed:', e) }
       }
     } catch (error) {
       console.error('Error saving view:', error)
@@ -42,48 +215,104 @@ export default function ViewerToolbar({ mode, setMode }) {
 
   return (
     <>
-      <Box
-        sx={{
-          p: 1,
-          borderBottom: '1px solid',
-          borderColor: 'divider',
-          bgcolor: 'background.paper',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1
-        }}
-      >
-        <ToggleButtonGroup
-          value={mode}
-          exclusive
-          size="small"
-          onChange={(e, v) => {
-            if (!v) return
-            setMode(v)
-          }}
-        >
-          <ToggleButton value="edit">Edit</ToggleButton>
-          <ToggleButton value="preview">Preview</ToggleButton>
+      <Box sx={{ p: 1, borderBottom: '1px solid', borderColor: 'divider', bgcolor: 'background.paper', display: 'flex', alignItems: 'center', gap: 1 }}>
+        <ToggleButtonGroup value={mode} exclusive size='small' onChange={(_, v) => { if (v) setMode(v) }}>
+          <ToggleButton value='edit'>Edit</ToggleButton>
+          <ToggleButton value='preview'>Preview</ToggleButton>
         </ToggleButtonGroup>
 
+        {/* Undo / Redo — edit mode only */}
+        {mode === 'edit' && (
+          <>
+            <Tooltip title='Undo (Ctrl+Z)'>
+              <span>
+                <IconButton size='small' onClick={undo} disabled={!canUndo} sx={{ color: canUndo ? 'text.secondary' : 'action.disabled' }}>
+                  <UndoOutlined fontSize='small' />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip title='Redo (Ctrl+Shift+Z)'>
+              <span>
+                <IconButton size='small' onClick={redo} disabled={!canRedo} sx={{ color: canRedo ? 'text.secondary' : 'action.disabled' }}>
+                  <RedoOutlined fontSize='small' />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </>
+        )}
+
         <Box sx={{ flex: 1 }} />
 
-        <Button
-          variant="contained"
-          size="small"
-          startIcon={<ContentSave />}
-          onClick={handleSaveClick}
-          disabled={isSaving || !schema?.root}
-        >
-          {isSaving ? 'Saving...' : 'Save View'}
-        </Button>
+        {/* Theme toggle */}
+        {onToggleTheme && (
+          <Tooltip title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
+            <IconButton size='small' onClick={onToggleTheme} sx={{ color: 'text.secondary' }}>
+              {isDark ? <LightModeOutlined fontSize='small' /> : <DarkModeOutlined fontSize='small' />}
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {/* Session Logs */}
+        <Tooltip title='Session Logs (training data)'>
+          <IconButton size='small' onClick={openSessionLog} sx={{ color: 'text.secondary' }}>
+            <HistoryOutlined fontSize='small' />
+          </IconButton>
+        </Tooltip>
+
+        {/* State Inspector */}
+        <Tooltip title='State Inspector'>
+          <IconButton
+            size='small'
+            onClick={() => setDebugOpen(o => !o)}
+            sx={{ color: debugOpen ? 'warning.main' : 'text.secondary' }}
+          >
+            <BugReportOutlined fontSize='small' />
+          </IconButton>
+        </Tooltip>
+
+        {/* Schema Preview — edit mode only */}
+        {mode === 'edit' && (
+          <Tooltip title='Preview Schema'>
+            <IconButton size='small' onClick={() => setSchemaOpen(true)}>
+              <DataObjectOutlined fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        )}
       </Box>
 
-      <SaveViewDialog
-        open={saveDialogOpen}
-        onClose={() => setSaveDialogOpen(false)}
-        onSave={handleSave}
+      {/* ── State Inspector Panel ── */}
+      <DebugPanel
+        open={debugOpen}
+        onClose={() => setDebugOpen(false)}
+        getState={() =>
+          mode === 'preview' && previewStateRef
+            ? previewStateRef.current
+            : { data, form, dataRef, reportRefs }
+        }
       />
+
+      {/* ── Schema Preview ── */}
+      <Dialog open={schemaOpen} onClose={() => setSchemaOpen(false)} fullScreen PaperProps={{ sx: { bgcolor: '#1e1e1e' } }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526', borderBottom: '1px solid #1a1a1a', px: 1.5, py: 0.5, gap: 1 }}>
+          <Box sx={{ color: '#ccc', fontSize: 13, fontFamily: 'monospace', flex: 1 }}>schema.json</Box>
+          <Tooltip title='Close (Esc)'>
+            <IconButton size='small' onClick={() => setSchemaOpen(false)} sx={{ color: '#aaa', '&:hover': { color: '#fff' } }}>
+              <FullscreenExitOutlined fontSize='small' />
+            </IconButton>
+          </Tooltip>
+        </Box>
+        <Box sx={{ flex: 1, minHeight: 0, height: 'calc(100vh - 40px)' }}>
+          <Editor
+            height='100%'
+            defaultLanguage='json'
+            theme='vs-dark'
+            value={schema ? JSON.stringify(schema, null, 2) : '{}'}
+            options={{ ...EDITOR_OPTS, minimap: { enabled: true } }}
+          />
+        </Box>
+      </Dialog>
+
+      <SaveViewDialog open={saveDialogOpen} onClose={() => setSaveDialogOpen(false)} onSave={handleSave} />
     </>
   )
 }