robobyte-front-builder 1.0.21 → 1.0.24

package/src/views/builder/sidebar/tabs/AiTab/trainingExport.js

@@ -0,0 +1,131 @@
+/**
+ * Build a Together AI fine-tuning JSONL file from session-log entries.
+ *
+ * Together accepts the OpenAI conversational fine-tune format:
+ *   {"messages": [
+ *      {"role": "system",    "content": "<system prompt>"},
+ *      {"role": "user",      "content": "<user instruction>"},
+ *      {"role": "assistant", "content": "<assistant reply>"}
+ *   ]}
+ * One example per line.
+ *
+ * For each session-log entry:
+ *   - system    = full system prompt from buildSystemPrompt()
+ *   - user      = entry.prompt   (skipped if empty)
+ *   - assistant = a brief explanation + ```json {...} ``` block carrying the
+ *                 simplified schema. Identical to OUTPUT_FORMAT in the system
+ *                 prompt so the model learns to produce the same shape.
+ *
+ * End-to-end fine-tune workflow:
+ *
+ *   1. Save examples in the UI Builder / Print Builder. They are auto-logged
+ *      to localStorage (rbb:sessionLogs:v1).
+ *   2. Open Session Logs dialog → fill in the `prompt` field for each entry
+ *      that should be used for training. Entries without a prompt are
+ *      excluded from the export.
+ *   3. Click "Export for Together fine-tuning" → downloads .jsonl.
+ *   4. CLI: `pip install together && export TOGETHER_API_KEY=…`
+ *           `together files check  rbb-finetune-…jsonl`
+ *           `together files upload rbb-finetune-…jsonl \
+ *               --type jsonl --purpose fine-tune`
+ *           (the --type flag is required — Together rejects the upload
+ *           with "invalid type, only JsonL, parquet, csv are allowed"
+ *           if the request omits file_type, even when the extension
+ *           is .jsonl.)
+ *           (note the returned file id, then:)
+ *           `together fine-tuning create \
+ *               --training-file <file-id> \
+ *               --model meta-llama/Llama-3.3-70B-Instruct-Reference \
+ *               --lora`
+ *   5. Wait for the job to finish (Together emails you, or `together
+ *      fine-tuning list`).
+ *   6. Deploy as a Dedicated Endpoint, or use serverless if supported for
+ *      that base model.
+ *   7. In .env.local set:
+ *        NEXT_PUBLIC_AI_PROVIDER=together
+ *        TOGETHER_API_KEY=...
+ *        NEXT_PUBLIC_TOGETHER_MODEL=<your-fine-tune-id>
+ *      The /api/ai proxy already supports the `together` provider.
+ */
+
+import { buildSystemPrompt } from './systemPrompt'
+import { simplifyFullSchema } from './schemaTransformer'
+
+/**
+ * Build the assistant content for one example. Mirrors OUTPUT_FORMAT in the
+ * system prompt: a brief explanation followed by one fenced JSON block.
+ */
+function buildAssistantContent(entry, simplifiedSchema) {
+  const innerMessage = (entry.notes && entry.notes.trim())
+    ? entry.notes.trim()
+    : `Generated ${entry.builder === 'print' ? 'print layout' : 'view'} schema.`
+
+  const payload = {
+    type:    'schema',
+    message: innerMessage,
+    schema:  simplifiedSchema,
+  }
+  return `${innerMessage}\n\n\`\`\`json\n${JSON.stringify(payload, null, 2)}\n\`\`\``
+}
+
+/**
+ * Convert eligible entries into one Together-fine-tune training example each.
+ * Returns an array of { messages: [...] } objects. Entries are skipped if:
+ *   - prompt is empty (no instruction text → can't be a (instruction, output) pair)
+ *   - the simplified schema has no root (transformer failed)
+ *
+ * Returns { examples, skipped } so callers can warn the user about losses.
+ */
+export function buildTrainingExamples(entries) {
+  const systemPrompt = buildSystemPrompt()
+  const examples = []
+  const skipped  = []
+
+  for (const entry of entries) {
+    const userMessage = (entry.prompt ?? '').trim()
+    if (!userMessage) {
+      skipped.push({ id: entry.id, reason: 'empty prompt' })
+      continue
+    }
+    const simplified = simplifyFullSchema(entry.schema)
+    if (!simplified.root) {
+      skipped.push({ id: entry.id, reason: 'unusable schema' })
+      continue
+    }
+    const assistantContent = buildAssistantContent(entry, simplified)
+    examples.push({
+      messages: [
+        { role: 'system',    content: systemPrompt },
+        { role: 'user',      content: userMessage },
+        { role: 'assistant', content: assistantContent },
+      ],
+    })
+  }
+  return { examples, skipped }
+}
+
+/** Serialize examples as JSONL — one JSON object per line. */
+export function buildTrainingJSONL(entries) {
+  const { examples, skipped } = buildTrainingExamples(entries)
+  const jsonl = examples.map(ex => JSON.stringify(ex)).join('\n')
+  return { jsonl, count: examples.length, skipped }
+}
+
+/** Trigger a JSONL file download. Returns { count, skipped }. */
+export function exportTrainingJSONL(entries) {
+  if (typeof window === 'undefined') return { count: 0, skipped: [] }
+  const { jsonl, count, skipped } = buildTrainingJSONL(entries)
+  if (count === 0) return { count: 0, skipped }
+
+  const blob = new Blob([jsonl + '\n'], { type: 'application/jsonl' })
+  const url  = URL.createObjectURL(blob)
+  const a    = document.createElement('a')
+  const stamp = new Date().toISOString().slice(0, 10)
+  a.href     = url
+  a.download = `rbb-finetune-${stamp}.jsonl`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+  return { count, skipped }
+}

package/src/views/builder/sidebar/tabs/ViewTab.jsx

@@ -1,6 +1,14 @@
 import {
-  Box, Button,
-  CircularProgress,TextField } from '@mui/material'
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField
+} from '@mui/material'
+import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined'
 import { useBuilder } from 'context/BuilderContext'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -9,14 +17,36 @@ import { Endpoints, Services } from 'services/Endpoints'
 import Typography from '@mui/material/Typography'
 import GroupLevelAutocomplete from 'views/builder/sidebar/tabs/Components/GroupLevelAutocomplete'
 
+// ── Defaults for the "Save As New" dialog ──────────────────────────────────
+// "Copy of X" is the universal duplicate convention (Excel, Photoshop, …).
+// viewIds must be unique server-side, so we append "_copy" — the user can
+// edit before submitting if the suffix would collide with an existing view.
+function suggestCopyTitle(title) {
+  const t = (title ?? '').trim()
+  if (!t) return 'Copy'
+  if (/^copy of\b/i.test(t)) return t // don't recursively prefix "Copy of Copy of …"
+  return `Copy of ${t}`
+}
 
+function suggestCopyViewId(viewId) {
+  const v = (viewId ?? '').trim()
+  if (!v) return ''
+  if (/_copy$/i.test(v)) return `${v}_${Date.now().toString(36)}`
+  return `${v}_copy`
+}
 
 export default function ViewTab() {
   const router = useRouter()
-  const { id} = router.query
-  const { viewMetaData,setViewMetaData,schema, setSchema } = useBuilder()
+  const { viewMetaData, setViewMetaData, schema, markClean, logSchema } = useBuilder()
   const [isLoading, setIsLoading] = useState(false)
-  const { control, handleSubmit, reset,errors } = useForm({
+
+  // Save As New / Duplicate
+  const [duplicateOpen, setDuplicateOpen]   = useState(false)
+  const [isDuplicating, setIsDuplicating]   = useState(false)
+  const [duplicateTitle, setDuplicateTitle] = useState('')
+  const [duplicateViewId, setDuplicateViewId] = useState('')
+
+  const { control, handleSubmit, reset, errors } = useForm({
     defaultValues: {
       title: viewMetaData?.title || '',
       viewId: null,
@@ -28,19 +58,18 @@ export default function ViewTab() {
     try {
       setIsLoading(true)
       let data = {
-        id : viewMetaData?.id ?? 0,
+        id: viewMetaData?.id ?? 0,
         title: values.title,
         viewId: values.viewId,
         groupId: values.groupId ?? null,
         value: JSON.stringify(schema)
       }
 
-      let response = null;
+      let response = null
 
-      if(viewMetaData.isNew) {
+      if (viewMetaData.isNew) {
         response = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdate, true, data)
-      }
-      else {
+      } else {
         response = await Services.UpdateService(
           Endpoints.UiBuilder.Post.AddUpdate,
           true,
@@ -58,6 +87,16 @@ export default function ViewTab() {
           groupId: values.groupId,
           id: viewMetaData.id ?? response.data
         }))
+        markClean?.()
+        try {
+          logSchema?.({
+            builder: 'ui',
+            trigger: 'save',
+            title: values.title,
+            viewMetaData: { id: viewMetaData.id ?? response.data, title: values.title, viewId: values.viewId },
+            schema
+          })
+        } catch (e) { console.warn('[sessionLog] log on save failed:', e) }
       }
     } catch (error) {
       console.error(error)
@@ -65,6 +104,71 @@ export default function ViewTab() {
       setIsLoading(false)
     }
   }
+
+  // ── Save As New ────────────────────────────────────────────────────────────
+  // Always POSTs with id: 0 so the backend creates a new row. Title + viewId
+  // come from the dialog form (pre-filled with sensible "Copy of …" defaults
+  // but editable). On success, navigate to the new view via URL so the
+  // standard load path in viewBuilder/index.jsx picks it up — no manual
+  // state sync needed.
+  const openDuplicateDialog = () => {
+    setDuplicateTitle(suggestCopyTitle(viewMetaData?.title))
+    setDuplicateViewId(suggestCopyViewId(viewMetaData?.viewId))
+    setDuplicateOpen(true)
+  }
+
+  const closeDuplicateDialog = () => {
+    if (isDuplicating) return
+    setDuplicateOpen(false)
+  }
+
+  const handleSaveAsNew = async () => {
+    if (!schema?.root) return
+    const title  = (duplicateTitle ?? '').trim()
+    const viewId = (duplicateViewId ?? '').trim()
+    if (!title)  return
+    if (!viewId) return
+
+    try {
+      setIsDuplicating(true)
+      const data = {
+        id: 0,
+        title,
+        viewId,
+        groupId: viewMetaData?.groupId ?? null,
+        value: JSON.stringify(schema)
+      }
+      const response = await Services.PostService(Endpoints.UiBuilder.Post.AddUpdate, true, data)
+      if (!response) return
+
+      const newId = response.data
+      markClean?.()
+      // Log the new view as a fresh save (becomes a labelable training example).
+      try {
+        logSchema?.({
+          builder: 'ui',
+          trigger: 'duplicate',
+          title,
+          viewMetaData: { id: newId, title, viewId, groupId: viewMetaData?.groupId ?? null },
+          schema
+        })
+      } catch (e) { console.warn('[sessionLog] log on duplicate failed:', e) }
+
+      // Hand off to the page's load path — switching `id` in the query triggers
+      // viewBuilder/index.jsx's useEffect → handleGetView → loadSchema.
+      setDuplicateOpen(false)
+      await router.push(
+        { pathname: router.pathname, query: { ...router.query, id: newId } },
+        undefined,
+        { shallow: false }
+      )
+    } catch (error) {
+      console.error('Save As New failed:', error)
+    } finally {
+      setIsDuplicating(false)
+    }
+  }
+
   useEffect(() => {
     reset({
       title: viewMetaData?.title,
@@ -73,6 +177,7 @@ export default function ViewTab() {
     })
   }, [viewMetaData])
 
+  const canDuplicate = Boolean(schema?.root)
 
   return (
     <Box p={2}>
@@ -104,9 +209,7 @@ export default function ViewTab() {
           />
           <GroupLevelAutocomplete selectedViewGroup={viewMetaData?.group} control={control} errors={errors} />
           <Button
-            sx={{
-              mt: 2
-            }}
+            sx={{ mt: 2 }}
             type='submit'
             size={'small'}
             fullWidth={true}
@@ -115,8 +218,65 @@ export default function ViewTab() {
           >
             {isLoading ? <CircularProgress size={24} /> : 'Save'}
           </Button>
+          <Button
+            size='small'
+            fullWidth
+            variant='outlined'
+            startIcon={<ContentCopyOutlinedIcon fontSize='small' />}
+            onClick={openDuplicateDialog}
+            disabled={!canDuplicate || isLoading || isDuplicating}
+            sx={{ mt: -1.5 }}
+          >
+            Save As New
+          </Button>
         </Box>
       </form>
+
+      {/* ── Save As New / Duplicate dialog ───────────────────────────────────── */}
+      <Dialog open={duplicateOpen} onClose={closeDuplicateDialog} maxWidth='xs' fullWidth>
+        <DialogTitle>Save As New View</DialogTitle>
+        <DialogContent>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+            <Box>
+              <Typography variant='body2'>Title</Typography>
+              <TextField
+                autoFocus
+                size='small'
+                fullWidth
+                value={duplicateTitle}
+                onChange={e => setDuplicateTitle(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && duplicateTitle.trim() && duplicateViewId.trim()) handleSaveAsNew() }}
+                disabled={isDuplicating}
+              />
+            </Box>
+            <Box>
+              <Typography variant='body2'>View ID</Typography>
+              <TextField
+                size='small'
+                fullWidth
+                value={duplicateViewId}
+                onChange={e => setDuplicateViewId(e.target.value)}
+                helperText='Must be unique. Edit if "<id>_copy" already exists.'
+                disabled={isDuplicating}
+              />
+            </Box>
+            <Typography variant='caption' color='text.secondary'>
+              The current schema will be saved as a brand-new view. The original is untouched.
+              You will be navigated to the new view after save.
+            </Typography>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDuplicateDialog} disabled={isDuplicating}>Cancel</Button>
+          <Button
+            variant='contained'
+            onClick={handleSaveAsNew}
+            disabled={isDuplicating || !duplicateTitle.trim() || !duplicateViewId.trim()}
+          >
+            {isDuplicating ? <CircularProgress size={20} /> : 'Save As New'}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   )
 }

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

@@ -69,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 => {
@@ -213,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}
@@ -226,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 &&

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

@@ -1,6 +1,6 @@
 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 } from '@mui/icons-material'
+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'
@@ -185,7 +185,7 @@ function DebugPanel({ open, onClose, getState }) {
 // ── Main toolbar ──────────────────────────────────────────────────────────────
 
 export default function ViewerToolbar({ mode, setMode, previewStateRef, isDark, onToggleTheme }) {
-  const { schema, data, form, dataRef, reportRefs, undo, redo, canUndo, canRedo } = useBuilder()
+  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)
@@ -197,7 +197,15 @@ export default function ViewerToolbar({ mode, setMode, previewStateRef, isDark,
     setIsSaving(true)
     try {
       const response = await PostService(Endpoints.View.Post.Add, true, { title, value: JSON.stringify(schema) })
-      if (response) setSaveDialogOpen(false)
+      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)
     } finally {
@@ -244,6 +252,13 @@ export default function ViewerToolbar({ mode, setMode, previewStateRef, isDark,
           </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

package/src/views/builder/viewer/renderers/ReportViewerRenderer.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback, useState } from 'react'
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react'
 import { Box, CircularProgress } from '@mui/material'
 import ReportViewer from 'pages/builders/report/viewer'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
@@ -6,6 +6,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 import RowActionsCell from './RowActionsCell'
 import { PrintTable } from '../PrintDialog'
 import fetchReportDataByPageId from 'services/reportData/fetchReportData'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
 
 // ── Print-mode report table ────────────────────────────────────────────────────
 // Uses fetchReportDataByPageId with isPagination:false to load ALL rows in one
@@ -104,7 +105,9 @@ export default function ReportViewerRenderer({ node, viewerContext }) {
 
   // Strip 'key' before spreading — React treats it as a reserved prop and
   // would silently drop it; we pass it explicitly below.
-  const { key: _key, actionsConfig: _actionsConfig, ...mainProps } = main
+  // Also strip actionsConfig (row actions — bound separately into actionsRenderer)
+  // and viewerActions (page-level actions — bound separately below).
+  const { key: _key, actionsConfig: _actionsConfig, viewerActions: _viewerActions, ...mainProps } = main
 
   // Each ReportViewer instance owns its updateRef for tracking row mutations.
   // Register under nodeName so column functions can access it via reportRefs.
@@ -144,6 +147,46 @@ export default function ReportViewerRenderer({ node, viewerContext }) {
     [JSON.stringify(actionsConfig)]
   )
 
+  // ── Build viewer actions with bound onClick handlers ───────────────────────
+  // Page-level buttons rendered in the report toolbar after Filter / Refresh.
+  // Each item is a copy of the schema config plus a stable `onClick` that
+  // runs the Calculation in the same scope as row actions, minus rowData.
+  const viewerActionsConfig = Array.isArray(main.viewerActions) && main.viewerActions.length > 0
+    ? main.viewerActions
+    : null
+
+  const viewerActions = useMemo(() => {
+    if (!viewerActionsConfig) return null
+    return viewerActionsConfig.map((action, idx) => ({
+      key:     `${action.label ?? 'action'}-${idx}`,
+      label:   action.label,
+      icon:    action.icon,
+      color:   action.color,
+      variant: action.variant,
+      disabled: action.disabled,
+      confirmation: action.confirmation,
+      onClick: async () => {
+        if (!action.code) return
+        const ctx = ctxRef.current ?? {}
+        await executeJSCode(action.code, {
+          form:        ctx.form    ?? {},
+          data:        ctx.data    ?? {},
+          setData:     ctx.setData ?? (() => {}),
+          dataRef:     ctx.dataRef?.current    ?? {},
+          reportRefs:  ctx.reportRefs?.current ?? {},
+          openDialog:  ctx.openDialog  ?? (() => {}),
+          closeDialog: ctx.closeDialog ?? (() => {}),
+          pageData:       ctx.pageData,
+          pageSetData:    ctx.pageSetData,
+          pageDataRef:    ctx.pageDataRef,
+          pageReportRefs: ctx.pageReportRefs,
+        })
+      },
+    }))
+  // Stringify the config so we recompute only when its shape changes.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(viewerActionsConfig)])
+
   // ── Edit mode: rich placeholder (both UI builder and print builder) ────────
   if (isEditMode) {
     const cols     = Array.isArray(mainProps.columnDefs) ? mainProps.columnDefs : []
@@ -216,6 +259,7 @@ export default function ReportViewerRenderer({ node, viewerContext }) {
         noHeader={true}
         {...mainProps}
         actions={actionsRenderer ?? mainProps.actions}
+        viewerActions={viewerActions}
         updateRef={updateRef}
         nodeId={nodeName}
         reportRefs={reportRefs}