robobyte-front-builder 1.0.21 → 1.0.23

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>
+  )
+}

package/src/views/builder/UnsavedChangesGuard.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from '@mui/material'
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
+
+/**
+ * Renders nothing visible until the user tries to leave the page (tab close,
+ * refresh, browser back, or in-app navigation) while `isDirty` is true.
+ *
+ *  - Tab close / refresh   → browser-native confirm (browsers do not allow
+ *                            custom UI here; only `beforeunload` is honored)
+ *  - In-app navigation     → custom MUI dialog (Stay / Leave)
+ *  - Browser back/forward  → handled by Next.js routeChangeStart, so the
+ *                            same custom dialog applies as long as the
+ *                            target stays inside the app
+ */
+export default function UnsavedChangesGuard({
+  isDirty,
+  title = 'Unsaved changes',
+  message = 'You have unsaved changes. If you leave this page now, your changes will be lost.',
+  stayLabel = 'Stay on page',
+  leaveLabel = 'Leave anyway'
+}) {
+  const router = useRouter()
+  const [pending, setPending] = useState(null) // { url, options }
+  // Set just before we re-fire a confirmed navigation so the routeChangeStart
+  // handler lets it through.
+  const allowNavigationRef = useRef(false)
+
+  // ── Tab close / refresh ─────────────────────────────────────────────────
+  useEffect(() => {
+    if (!isDirty) return
+    const handler = e => {
+      if (allowNavigationRef.current) return
+      e.preventDefault()
+      // Modern browsers ignore the message and show their own copy, but
+      // returnValue must be set for the prompt to appear at all.
+      e.returnValue = message
+      return message
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [isDirty, message])
+
+  // ── In-app navigation (router push/replace, browser back) ──────────────
+  useEffect(() => {
+    if (!isDirty) return
+    const handler = (url, options) => {
+      if (allowNavigationRef.current) return
+      // Same-URL changes (e.g. shallow query swaps after save) are not real
+      // navigations from the user's POV; let them through.
+      if (url === router.asPath) return
+
+      setPending({ url, options })
+      // Documented Next.js pattern for cancelling a route change.
+      router.events.emit('routeChangeError')
+      // eslint-disable-next-line no-throw-literal
+      throw 'Route change aborted by UnsavedChangesGuard.'
+    }
+    router.events.on('routeChangeStart', handler)
+    return () => router.events.off('routeChangeStart', handler)
+  }, [isDirty, router])
+
+  const handleStay = () => setPending(null)
+
+  const handleLeave = () => {
+    if (!pending) return
+    const { url, options } = pending
+    allowNavigationRef.current = true
+    setPending(null)
+    // Re-fire the navigation; allowNavigationRef short-circuits the guard.
+    router.push(url, undefined, options).finally(() => {
+      allowNavigationRef.current = false
+    })
+  }
+
+  return (
+    <Dialog open={!!pending} onClose={handleStay} maxWidth='xs' fullWidth>
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <WarningAmberRoundedIcon color='warning' fontSize='small' />
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button onClick={handleStay} autoFocus variant='contained' color='primary'>
+          {stayLabel}
+        </Button>
+        <Button onClick={handleLeave} color='error'>
+          {leaveLabel}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/views/builder/inspector/definitions/reportViewer/main.js

@@ -3,6 +3,12 @@ export const REPORT_VIEWER_MAIN_FIELDS = [
   { name: 'id', label: 'Report ID', type: 'expression' },
   { name: 'pageId', label: 'Page ID', type: 'expression' },
   { name: 'filter', label: 'Filter', type: 'expression' },
+
+  // Presentation — title/caption render above the toolbar in the viewer.
+  // Both accept expressions so they can be data-bound (e.g. `${data.month} report`).
+  { name: 'title',   label: 'Title',   type: 'expression' },
+  { name: 'caption', label: 'Caption', type: 'expression' },
+
   { name: 'minimized', label: 'Minimized', type: 'boolean' },
   { name: 'isRerender', label: 'Is Rerender', type: 'boolean' },
   { name: 'height', label: 'Height', type: 'expression' },
@@ -23,4 +29,11 @@ export const REPORT_VIEWER_MAIN_FIELDS = [
   // Shape: [{ label, color, variant, icon, code, confirmation?, disabled? }]
   // Inside each Calculation, data.row is the current AG Grid row object.
   { name: 'actionsConfig', label: 'Row Actions', type: 'actions-config-editor' },
+
+  // Viewer actions: buttons rendered in the toolbar after the Filter / Refresh
+  // buttons. Same shape as Row Actions, except each Calculation runs WITHOUT a
+  // row context — they're page-level actions for the whole report (e.g.
+  // "Export PDF", "Open New Tab", "Reset filters", etc.).
+  // Shape: [{ label, color, variant, icon, code, confirmation?, disabled? }]
+  { name: 'viewerActions', label: 'Viewer Actions', type: 'actions-config-editor' },
 ]

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

@@ -5,18 +5,22 @@
  * directly — this keeps API keys server-side and avoids CORS restrictions.
  *
  * Configuration (.env.local):
- *   NEXT_PUBLIC_AI_PROVIDER       claude | openai  (default: claude)
+ *   NEXT_PUBLIC_AI_PROVIDER       claude | openai | together  (default: claude)
  *   CLAUDE_API_KEY                Anthropic API key  ← no NEXT_PUBLIC_ prefix
  *   NEXT_PUBLIC_CLAUDE_MODEL      e.g. claude-sonnet-4-6
  *   OPENAI_API_KEY                OpenAI API key     ← no NEXT_PUBLIC_ prefix
  *   NEXT_PUBLIC_OPENAI_MODEL      e.g. gpt-4o
+ *   TOGETHER_API_KEY              Together AI key    ← no NEXT_PUBLIC_ prefix
+ *   NEXT_PUBLIC_TOGETHER_MODEL    e.g. meta-llama/Llama-3.3-70B-Instruct-Turbo
+ *                                 or your fine-tuned model id
  */
 
 const PROVIDER_ID = process.env.NEXT_PUBLIC_AI_PROVIDER ?? 'claude'
 
 const MODEL_LABELS = {
-  claude: () => process.env.NEXT_PUBLIC_CLAUDE_MODEL ?? 'claude-sonnet-4-6',
-  openai: () => process.env.NEXT_PUBLIC_OPENAI_MODEL ?? 'gpt-4o',
+  claude:   () => process.env.NEXT_PUBLIC_CLAUDE_MODEL   ?? 'claude-sonnet-4-6',
+  openai:   () => process.env.NEXT_PUBLIC_OPENAI_MODEL   ?? 'gpt-4o',
+  together: () => process.env.NEXT_PUBLIC_TOGETHER_MODEL ?? 'meta-llama/Llama-3.3-70B-Instruct-Turbo',
 }
 
 /**

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

@@ -71,6 +71,71 @@ export function transformAiSchema(aiSchema) {
   return { root, dialogs: [], actions: [], timers: [] }
 }
 
+// ── Reverse: full builder schema → simplified AI schema ──────────────────────
+//
+// The session log stores the full builder schema (with `id`, `valueType`
+// wrappers, and the main/style/advanced prop groups). Training data must be
+// in the simplified format that the AI is expected to emit, otherwise we'd
+// be teaching the model the wrong shape. This is the inverse of
+// transformAiSchema(). It is lossy by design:
+//
+//   - `id` fields are dropped (regenerated on import)
+//   - `valueType: 'value'` props are unwrapped to bare values
+//   - Non-value props (expressions, references) are dropped — the
+//     simplified format the AI is trained on cannot represent them.
+//   - The `advanced` group is dropped (the AI never produces it).
+//
+// Returns the simplified node, or null if the node is unusable.
+
+function unwrapGroup(group = {}) {
+  const out = {}
+  for (const [k, v] of Object.entries(group)) {
+    if (v == null) continue
+    if (typeof v === 'object' && 'valueType' in v) {
+      // Only the plain `value` form is representable in the simplified format.
+      if (v.valueType === 'value' && v.value !== undefined) {
+        out[k] = v.value
+      }
+      // Drop expression / function / reference / other variants.
+    } else {
+      // Already a plain value (legacy schemas may have unwrapped props).
+      out[k] = v
+    }
+  }
+  return out
+}
+
+export function simplifyFullNode(node) {
+  if (!node || typeof node !== 'object' || !node.type) return null
+  const propsGroup = node.props ?? {}
+  const main  = unwrapGroup(propsGroup.main  ?? {})
+  const style = unwrapGroup(propsGroup.style ?? {})
+  // advanced is intentionally dropped.
+
+  const simplified = {
+    type:     node.type,
+    props:    main,
+    children: Array.isArray(node.children)
+      ? node.children.map(simplifyFullNode).filter(Boolean)
+      : [],
+  }
+  if (Object.keys(style).length > 0) simplified.style = style
+  return simplified
+}
+
+/**
+ * Convert a full builder schema (the shape stored in the session log) into
+ * the simplified shape used by training data and the AI's expected output.
+ *
+ * Accepts either { root, dialogs?, ... } or a bare root node.
+ * Returns { root: <simplified> }.
+ */
+export function simplifyFullSchema(full) {
+  if (!full || typeof full !== 'object') return { root: null }
+  const rootNode = full.root ?? full
+  return { root: simplifyFullNode(rootNode) }
+}
+
 // ── Response parser ───────────────────────────────────────────────────────────
 
 /**