robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/JSEditor.js

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Tabs, Tab, Button, IconButton, Typography, TextField } from '@mui/material'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Box, Tabs, Tab, Button, IconButton, Tooltip, Typography, TextField } from '@mui/material'
 import { CodeBraces } from 'mdi-material-ui'
+import { FullscreenOutlined, FullscreenExitOutlined } from '@mui/icons-material'
 import Editor from '@monaco-editor/react'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
 
-/**
- * Monaco editor options
- */
 const editorOptions = {
   minimap: { enabled: false },
   fontFamily: "Menlo, Monaco, 'Courier New', monospace",
@@ -13,112 +12,78 @@ const editorOptions = {
   lineNumbers: 'on',
   wordWrap: 'on',
   renderWhitespace: 'selection',
-  theme: 'vs-dark',
   scrollBeyondLastLine: false,
   automaticLayout: true
-  // formatOnPaste: true,
-  // formatOnType: true,
 }
 
-/**
- * Fixed function shell
- */
-const HEADER_LINES = 4
-
-const CALCULATION_TEMPLATE = `/**
- * @param {IFormData} form
- * @param {object} data
- * @return {Promise<boolean>}
- */
-async function Calculation (form, data) {
+const CALCULATION_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
 
 }
 `
 
 export default function JSEditor({ value, expression, mode, onChange }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen]               = useState(false)
+  const [fullscreen, setFullscreen]   = useState(false)
   const [currentMode, setCurrentMode] = useState(mode || (expression ? 'expression' : 'value'))
-  const [code, setCode] = useState(expression?.code || CALCULATION_TEMPLATE)
+  const [code, setCode]               = useState(expression?.code || CALCULATION_TEMPLATE)
   const [simpleValue, setSimpleValue] = useState(value ?? '')
 
   const editorRef = useRef(null)
 
+  // ── Open / close ────────────────────────────────────────────────────────────
+
   const handleOpen = () => {
-    setCurrentMode(mode || (expression ? 'expression' : 'value'))
+    const initialMode = mode || (expression ? 'expression' : 'value')
+    setCurrentMode(initialMode)
     setCode(expression?.code || CALCULATION_TEMPLATE)
-    setSimpleValue(value ?? '')
+    // Only use the value prop for simpleValue when actually in value mode —
+    // prevents expression code from leaking into the Simple value tab.
+    setSimpleValue(initialMode === 'value' ? (value ?? '') : '')
     setOpen(true)
   }
 
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
   useEffect(() => {
-    if (!open) {
-      setSimpleValue(value ?? '')
-    }
+    if (!open) setSimpleValue(value ?? '')
   }, [value, open])
 
-  /**
-   * Lock everything except function body
-   */
-  const handleEditorMount = (editor, monaco) => {
-    editorRef.current = editor
+  // ── Escape key closes fullscreen first, then the panel ──────────────────────
 
-    const model = editor.getModel()
-    if (!model) return
-
-    const totalLines = model.getLineCount()
-    const readOnlyRanges = [
-      // Header
-      new monaco.Range(1, 1, HEADER_LINES + 1, 1),
-      // Closing brace
-      new monaco.Range(totalLines, 1, totalLines, model.getLineLength(totalLines) + 1)
-    ]
-
-    editor.createDecorationsCollection(
-      readOnlyRanges.map(range => ({
-        range,
-        options: { isWholeLine: true, className: 'readonly' }
-      }))
-    )
-
-    editor.onDidChangeCursorPosition(e => {
-      const currentTotalLines = model.getLineCount()
-      const currentMaxEditableLine = Math.max(HEADER_LINES + 2, currentTotalLines - 1)
-
-      if (e.position.lineNumber <= HEADER_LINES + 1) {
-        editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
-        return
-      }
-      if (e.position.lineNumber >= currentTotalLines) {
-        editor.setPosition({ lineNumber: currentMaxEditableLine, column: 3 })
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => {
+      if (e.key !== 'Escape') return
+      if (fullscreen) {
+        setFullscreen(false)
+      } else {
+        handleClose()
       }
-    })
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, fullscreen])
 
+  // ── Editor mount ─────────────────────────────────────────────────────────────
+
+  const handleEditorMount = (editor) => {
+    editorRef.current = editor
     editor.focus()
-    editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
   }
 
-  /**
-   * Only allow edits inside function body
-   */
-  const handleCodeChange = newCode => {
-    if (!newCode) return
+  // ── Code change ───────────────────────────────────────────────────────────────
 
-    const lines = newCode.split('\n')
-
-    if (!newCode.includes('function Calculation')) {
-      setCode(CALCULATION_TEMPLATE)
-      return
-    }
-
-    setCode(newCode)
+  const handleCodeChange = newCode => {
+    setCode(newCode ?? '')
   }
 
-  /**
-   * Save logic
-   */
+  // ── Save ─────────────────────────────────────────────────────────────────────
+
   const handleSave = () => {
     if (currentMode === 'expression') {
-      console.log(code)
       onChange?.({
         valueType: 'expression',
         type: 'expression',
@@ -129,17 +94,36 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       onChange?.({
         valueType: 'value',
         type: 'value',
-        value: simpleValue
+        value: simpleValue,
+        expression: undefined,
       })
     }
-    setOpen(false)
+    handleClose()
   }
 
   const modeForIcon = mode || (expression ? 'expression' : 'value')
 
+  // ── Panel dimensions ──────────────────────────────────────────────────────────
+
+  const panelSx = fullscreen
+    ? {
+        position: 'fixed',
+        inset: 0,
+        height: '100vh',
+        borderTop: 'none',
+      }
+    : {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '40vh',
+        borderTop: '1px solid #333',
+      }
+
   return (
     <>
-      {/* Open editor */}
+      {/* Trigger button */}
       <IconButton size='small' color={modeForIcon === 'expression' ? 'success' : 'default'} onClick={handleOpen}>
         <CodeBraces />
       </IconButton>
@@ -147,30 +131,52 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       {open && (
         <Box
           sx={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '40vh',
+            ...panelSx,
             bgcolor: '#1e1e1e',
             zIndex: 1300,
-            borderTop: '1px solid #333',
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            transition: 'height 0.18s ease, inset 0.18s ease',
           }}
         >
-          {/* Tabs */}
-          <Tabs value={currentMode === 'expression' ? 0 : 1} sx={{ bgcolor: '#252526', color: '#fff' }}>
-            <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
-            <Tab label='Simple value' onClick={() => setCurrentMode('value')} />
-          </Tabs>
+          {/* ── Header bar: tabs + fullscreen toggle ── */}
+          <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526', borderBottom: '1px solid #1a1a1a' }}>
+            <Tabs
+              value={currentMode === 'expression' ? 0 : 1}
+              sx={{
+                flex: 1,
+                minHeight: 38,
+                '.MuiTab-root': { minHeight: 38, py: 0, px: 1.5, fontSize: 12, fontFamily: 'monospace', color: '#666', textTransform: 'none' },
+                '.Mui-selected': { color: '#fff !important', fontWeight: 600 },
+                '.MuiTabs-indicator': { bgcolor: '#4ec9b0', height: 2 },
+              }}
+            >
+              <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
+              <Tab label='Simple value'     onClick={() => setCurrentMode('value')} />
+            </Tabs>
+
+            {currentMode === 'expression' && <HelpPopover type='calculation' iconSx={{ color: '#5a7a9a', mr: 0.5 }} />}
+
+            <Tooltip title={fullscreen ? 'Exit fullscreen  (Esc)' : 'Fullscreen'} placement='left'>
+              <IconButton
+                size='small'
+                onClick={() => setFullscreen(f => !f)}
+                sx={{ color: '#aaa', mr: 0.5, '&:hover': { color: '#fff' } }}
+              >
+                {fullscreen
+                  ? <FullscreenExitOutlined fontSize='small' />
+                  : <FullscreenOutlined    fontSize='small' />}
+              </IconButton>
+            </Tooltip>
+          </Box>
 
-          {/* Content */}
+          {/* ── Content ── */}
           {currentMode === 'expression' ? (
             <Box sx={{ flex: 1, minHeight: 0 }}>
               <Editor
                 height='100%'
                 defaultLanguage='javascript'
+                theme='vs-dark'
                 value={code}
                 options={editorOptions}
                 onMount={handleEditorMount}
@@ -178,12 +184,12 @@ export default function JSEditor({ value, expression, mode, onChange }) {
               />
             </Box>
           ) : (
-            <Box sx={{ p: 2, color: '#fff' }}>
+            <Box sx={{ p: 2, color: '#fff', overflowY: 'auto', flex: 1 }}>
               <Typography variant='body2'>Simple Value Mode</Typography>
               <TextField
                 fullWidth
                 multiline
-                minRows={5}
+                minRows={fullscreen ? 20 : 5}
                 size='small'
                 value={simpleValue}
                 onChange={e => setSimpleValue(e.target.value)}
@@ -202,17 +208,9 @@ export default function JSEditor({ value, expression, mode, onChange }) {
             </Box>
           )}
 
-          {/* Footer */}
-          <Box
-            sx={{
-              p: 1,
-              display: 'flex',
-              gap: 1,
-              justifyContent: 'flex-end',
-              bgcolor: '#252526'
-            }}
-          >
-            <Button size='small' onClick={() => setOpen(false)}>
+          {/* ── Footer ── */}
+          <Box sx={{ p: 1, display: 'flex', gap: 1, justifyContent: 'flex-end', bgcolor: '#252526' }}>
+            <Button size='small' onClick={handleClose}>
               Close
             </Button>
             <Button size='small' variant='contained' onClick={handleSave}>

package/src/views/builder/SessionLogDialog.jsx

@@ -0,0 +1,350 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemText,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography
+} from '@mui/material'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import DownloadIcon from '@mui/icons-material/Download'
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
+import ModelTrainingIcon from '@mui/icons-material/ModelTraining'
+import NoteAddOutlinedIcon from '@mui/icons-material/NoteAddOutlined'
+import {
+  subscribe,
+  listEntries,
+  updateEntry,
+  deleteEntry,
+  exportJSON,
+  clearAll
+} from 'services/sessionLog'
+import { exportTrainingJSONL } from 'views/builder/sidebar/tabs/AiTab/trainingExport'
+import { useBuilder } from 'context/BuilderContext'
+
+// Print Builder schemas always carry these zone/page fields. UI Builder schemas
+// don't. Used to auto-tag a snapshot with the right builder kind so we don't
+// need to plumb a prop through every page that mounts BuilderProvider.
+function detectBuilderKind(schema) {
+  if (!schema || typeof schema !== 'object') return 'ui'
+  if (schema.zones && schema.pageOrder) return 'print'
+  return 'ui'
+}
+
+function fmtDate(iso) {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleString()
+  } catch {
+    return iso
+  }
+}
+
+function builderLabel(b) {
+  return b === 'print' ? 'Print' : 'UI'
+}
+
+export default function SessionLogDialog({ open, onClose }) {
+  const [entries, setEntries] = useState(() => listEntries())
+  const [selectedId, setSelectedId] = useState(null)
+
+  // Pull current schema + logger from the builder so we can snapshot without
+  // requiring a save round-trip.
+  const { schema, viewMetaData, logSchema } = useBuilder() ?? {}
+
+  // Re-fetch on every change to the underlying store
+  useEffect(() => {
+    const unsub = subscribe(() => setEntries(listEntries()))
+    // also refresh whenever the dialog opens (in case storage was edited
+    // by another tab while it was closed)
+    if (open) setEntries(listEntries())
+    return unsub
+  }, [open])
+
+  // Pick a sensible default selection
+  useEffect(() => {
+    if (!open) return
+    if (entries.length === 0) { setSelectedId(null); return }
+    if (!selectedId || !entries.some(e => e.id === selectedId)) {
+      setSelectedId(entries[0].id)
+    }
+  }, [open, entries, selectedId])
+
+  const selected = useMemo(
+    () => entries.find(e => e.id === selectedId) ?? null,
+    [entries, selectedId]
+  )
+
+  // Entries that have a non-empty prompt are eligible for fine-tune export.
+  const labeledCount = useMemo(
+    () => entries.filter(e => (e.prompt ?? '').trim().length > 0).length,
+    [entries]
+  )
+
+  const handleSnapshot = () => {
+    if (!schema || typeof logSchema !== 'function') return
+    const builderKind = detectBuilderKind(schema)
+
+    // In Print Builder, schema.root is just the active zone — fold it back
+    // into schema.zones so the snapshot matches what a real save would emit.
+    let snapshotSchema = schema
+    if (builderKind === 'print' && schema.activeZone && schema.root) {
+      snapshotSchema = {
+        ...schema,
+        zones: { ...(schema.zones ?? {}), [schema.activeZone]: schema.root }
+      }
+    }
+
+    const title =
+      (viewMetaData && viewMetaData.title) ||
+      `Snapshot ${new Date().toLocaleString()}`
+    const entry = logSchema({
+      builder:      builderKind,
+      trigger:      'snapshot',
+      title,
+      viewMetaData: viewMetaData ?? {},
+      schema:       snapshotSchema
+    })
+    if (entry) setSelectedId(entry.id)
+  }
+
+  const handleExportTraining = () => {
+    const { count, skipped } = exportTrainingJSONL(entries)
+    if (count === 0) {
+      window.alert('No labeled entries to export. Fill in the Prompt field on at least one entry first.')
+      return
+    }
+    const skipMsg = skipped.length > 0
+      ? `\n\nSkipped ${skipped.length} entr${skipped.length === 1 ? 'y' : 'ies'} (no prompt or unusable schema).`
+      : ''
+    window.alert(`Exported ${count} training example${count === 1 ? '' : 's'} as JSONL.${skipMsg}\n\nNext: upload to Together with the CLI:\n  together files check  <file>\n  together files upload <file> --type jsonl --purpose fine-tune\n  together fine-tuning create --training-file <id> --model <base> --lora\n\n(--type jsonl is required — Together rejects the upload otherwise.)`)
+  }
+
+  const handlePromptChange = (value) => {
+    if (!selected) return
+    updateEntry(selected.id, { prompt: value })
+  }
+
+  const handleNotesChange = (value) => {
+    if (!selected) return
+    updateEntry(selected.id, { notes: value })
+  }
+
+  const handleDelete = (id) => {
+    deleteEntry(id)
+  }
+
+  const handleClearAll = () => {
+    if (entries.length === 0) return
+    if (!window.confirm(`Delete all ${entries.length} logged schemas? This cannot be undone.`)) return
+    clearAll()
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='lg' fullWidth PaperProps={{ sx: { height: '85vh' } }}>
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1, pr: 1 }}>
+        <Box sx={{ flex: 1 }}>
+          Session Logs
+          <Typography variant='caption' sx={{ ml: 1, color: 'text.secondary' }}>
+            {entries.length} {entries.length === 1 ? 'entry' : 'entries'} · {labeledCount} labeled
+          </Typography>
+        </Box>
+        <Tooltip title='Snapshot the current builder schema (no save required)'>
+          <span>
+            <Button
+              size='small'
+              variant='outlined'
+              startIcon={<NoteAddOutlinedIcon fontSize='small' />}
+              onClick={handleSnapshot}
+              disabled={!schema || typeof logSchema !== 'function'}
+              sx={{ mr: 1 }}
+            >
+              Snapshot
+            </Button>
+          </span>
+        </Tooltip>
+        <Tooltip title={
+          labeledCount === 0
+            ? 'Fill in a Prompt on at least one entry to enable Together fine-tune export'
+            : `Export ${labeledCount} labeled example${labeledCount === 1 ? '' : 's'} as Together fine-tune JSONL`
+        }>
+          <span>
+            <IconButton
+              size='small'
+              onClick={handleExportTraining}
+              disabled={labeledCount === 0}
+              color='primary'
+            >
+              <ModelTrainingIcon fontSize='small' />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title='Export all as JSON (raw backup)'>
+          <span>
+            <IconButton size='small' onClick={exportJSON} disabled={entries.length === 0}>
+              <DownloadIcon fontSize='small' />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title='Delete all'>
+          <span>
+            <IconButton size='small' color='error' onClick={handleClearAll} disabled={entries.length === 0}>
+              <DeleteSweepIcon fontSize='small' />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </DialogTitle>
+
+      <Divider />
+
+      <DialogContent sx={{ p: 0, display: 'flex', minHeight: 0 }}>
+        {/* ── Left: entries list ─────────────────────────────────────────── */}
+        <Box sx={{ width: 320, borderRight: '1px solid', borderColor: 'divider', overflow: 'auto' }}>
+          {entries.length === 0 ? (
+            <Box sx={{ p: 3, color: 'text.secondary', fontSize: 13 }}>
+              No entries yet. Click <strong>Snapshot</strong> to capture the current builder schema, or save a view — both are auto-logged.
+            </Box>
+          ) : (
+            <List dense disablePadding>
+              {entries.map(entry => (
+                <ListItemButton
+                  key={entry.id}
+                  selected={entry.id === selectedId}
+                  onClick={() => setSelectedId(entry.id)}
+                  sx={{ alignItems: 'flex-start', py: 1.25, pr: 1 }}
+                >
+                  <ListItemText
+                    primary={
+                      <Stack direction='row' spacing={1} alignItems='center'>
+                        <Chip
+                          label={builderLabel(entry.builder)}
+                          size='small'
+                          color={entry.builder === 'print' ? 'secondary' : 'primary'}
+                          sx={{ height: 18, fontSize: 10 }}
+                        />
+                        <Typography variant='body2' noWrap sx={{ flex: 1 }}>
+                          {entry.title || '(untitled)'}
+                        </Typography>
+                      </Stack>
+                    }
+                    secondary={
+                      <Stack direction='row' justifyContent='space-between' alignItems='center'>
+                        <Typography variant='caption' color='text.secondary'>
+                          {fmtDate(entry.createdAt)}
+                        </Typography>
+                        {entry.prompt
+                          ? <Chip label='labeled' size='small' color='success' sx={{ height: 16, fontSize: 9 }} />
+                          : <Chip label='no prompt' size='small' variant='outlined' sx={{ height: 16, fontSize: 9 }} />}
+                      </Stack>
+                    }
+                    secondaryTypographyProps={{ component: 'div' }}
+                  />
+                  <IconButton
+                    size='small'
+                    edge='end'
+                    onClick={(e) => { e.stopPropagation(); handleDelete(entry.id) }}
+                    sx={{ ml: 0.5 }}
+                  >
+                    <DeleteOutlineIcon fontSize='small' />
+                  </IconButton>
+                </ListItemButton>
+              ))}
+            </List>
+          )}
+        </Box>
+
+        {/* ── Right: detail / editor ─────────────────────────────────────── */}
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+          {!selected ? (
+            <Box sx={{ p: 3, color: 'text.secondary', fontSize: 13 }}>
+              Select an entry on the left.
+            </Box>
+          ) : (
+            <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+              {/* Header row */}
+              <Box sx={{ p: 2, pb: 1 }}>
+                <Stack direction='row' spacing={1} alignItems='center' sx={{ mb: 1 }}>
+                  <Chip
+                    label={builderLabel(selected.builder)}
+                    size='small'
+                    color={selected.builder === 'print' ? 'secondary' : 'primary'}
+                  />
+                  <Typography variant='subtitle2'>{selected.title || '(untitled)'}</Typography>
+                  <Box sx={{ flex: 1 }} />
+                  <Typography variant='caption' color='text.secondary'>
+                    {fmtDate(selected.createdAt)}
+                  </Typography>
+                </Stack>
+
+                <TextField
+                  fullWidth
+                  size='small'
+                  multiline
+                  minRows={2}
+                  maxRows={4}
+                  label='Prompt (training instruction)'
+                  placeholder='What natural-language instruction would produce this schema? (Filled later — leave empty for now if you prefer.)'
+                  value={selected.prompt ?? ''}
+                  onChange={e => handlePromptChange(e.target.value)}
+                  sx={{ mb: 1 }}
+                />
+
+                <TextField
+                  fullWidth
+                  size='small'
+                  label='Notes (optional)'
+                  placeholder='Internal notes — not part of the prompt'
+                  value={selected.notes ?? ''}
+                  onChange={e => handleNotesChange(e.target.value)}
+                />
+              </Box>
+
+              <Divider />
+
+              {/* Schema preview */}
+              <Box sx={{ flex: 1, overflow: 'auto', p: 2, bgcolor: 'background.default' }}>
+                <Typography variant='caption' color='text.secondary' sx={{ display: 'block', mb: 1 }}>
+                  Schema
+                </Typography>
+                <Box
+                  component='pre'
+                  sx={{
+                    m: 0,
+                    p: 1.5,
+                    fontFamily: 'monospace',
+                    fontSize: 12,
+                    lineHeight: 1.5,
+                    bgcolor: 'background.paper',
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    overflow: 'auto',
+                    whiteSpace: 'pre',
+                    maxHeight: '100%'
+                  }}
+                >
+                  {JSON.stringify(selected.schema, null, 2)}
+                </Box>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}