robobyte-front-builder 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robobyte-front-builder",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "RoboByte low-code UI builder, Report builder, and navigation extension system",
   "main": "src/lib/index.js",
   "files": [
@@ -8,7 +8,9 @@
     "public",
     "styles",
     "next.config.js",
-    "jsconfig.json"
+    "jsconfig.json",
+    "INTEGRATION.md",
+    "RoboByteBuilder_User_Manual.docx"
   ],
   "exports": {
     ".": "./src/lib/index.js",

package/src/context/BuilderContext.jsx

@@ -2,6 +2,9 @@ import { createContext, useCallback, useContext, useEffect, useReducer, useRef,
 import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
 import { findNode } from 'services/builderHelper'
 import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import UnsavedChangesGuard from 'views/builder/UnsavedChangesGuard'
+import SessionLogDialog from 'views/builder/SessionLogDialog'
+import { logSchema as logSchemaToStore } from 'services/sessionLog'
 
 const BuilderContext = createContext(null)
 
@@ -136,6 +139,16 @@ function historyReducer(state, action) {
         future:  state.future.slice(1)
       }
     }
+    // LOAD — replace the schema without marking it as a user edit (e.g. fetched
+    // from server). Clears history so the freshly loaded state is the new baseline.
+    case 'LOAD': {
+      return { past: [], present: action.payload, future: [] }
+    }
+    // MARK_CLEAN — keep the present schema but reset history so isDirty becomes
+    // false. Used after a successful save.
+    case 'MARK_CLEAN': {
+      return { past: [], present: state.present, future: [] }
+    }
     default:
       return state
   }
@@ -150,12 +163,17 @@ export function BuilderProvider({ children }) {
 
   // Convenience aliases — schema reads the present snapshot;
   // setSchema dispatches a SET action (automatically tracked in history).
-  const schema    = historyState.present
-  const setSchema = useCallback((updater) => dispatch({ type: 'SET', payload: updater }), [])
-  const undo      = useCallback(() => dispatch({ type: 'UNDO' }), [])
-  const redo      = useCallback(() => dispatch({ type: 'REDO' }), [])
-  const canUndo   = historyState.past.length > 0
-  const canRedo   = historyState.future.length > 0
+  const schema      = historyState.present
+  const setSchema   = useCallback((updater) => dispatch({ type: 'SET', payload: updater }), [])
+  const loadSchema  = useCallback((next) => dispatch({ type: 'LOAD', payload: next }), [])
+  const markClean   = useCallback(() => dispatch({ type: 'MARK_CLEAN' }), [])
+  const undo        = useCallback(() => dispatch({ type: 'UNDO' }), [])
+  const redo        = useCallback(() => dispatch({ type: 'REDO' }), [])
+  const canUndo     = historyState.past.length > 0
+  const canRedo     = historyState.future.length > 0
+  // isDirty — present schema differs from the last loaded/saved baseline.
+  // Equivalent to canUndo because LOAD and MARK_CLEAN both reset past to [].
+  const isDirty     = canUndo
   const [selectedId, setSelectedId] = useState(null)
   const [viewMetaData, setViewMetaData] = useState({
     id: null,
@@ -181,6 +199,30 @@ export function BuilderProvider({ children }) {
   const [draggingNodeId, setDraggingNodeId] = useState(null)
   const [clipboard, setClipboard] = useState(null)  // copy/paste clipboard
 
+  // ── Session log dialog (training-data capture) ───────────────────────────
+  const [sessionLogOpen, setSessionLogOpen] = useState(false)
+  const openSessionLog  = useCallback(() => setSessionLogOpen(true),  [])
+  const closeSessionLog = useCallback(() => setSessionLogOpen(false), [])
+
+  /**
+   * Append a schema snapshot to the session log. Call this from save handlers
+   * so every successful save becomes a labelable training example.
+   * `prompt` is intentionally left empty — developers fill it in later via
+   * the Session Logs dialog.
+   */
+  const logSchema = useCallback(({ builder, trigger = 'save', title = '', viewMetaData = {}, schema: schemaArg }) => {
+    return logSchemaToStore({
+      builder,
+      trigger,
+      title,
+      viewMetaData,
+      schema: schemaArg ?? schema,
+      prompt: ''
+    })
+  // schema is captured at call time when omitted; keep deps minimal
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schema])
+
   // ── Unified ref storage ────────────────────────────────────────────────────
   // dataRef    : mutable non-reactive store; read/write from any function
   //              without triggering re-renders. Access via dataRef.current.
@@ -273,6 +315,9 @@ export function BuilderProvider({ children }) {
       value={{
         schema,
         setSchema,
+        loadSchema,
+        markClean,
+        isDirty,
 
         // ── Undo / redo ──────────────────────────────────────────────────────
         undo,
@@ -326,9 +371,20 @@ export function BuilderProvider({ children }) {
         validationErrors,
         setValidationErrors,
         submitForm,
-        resetForm
+        resetForm,
+
+        // ── Session log (AI training-data capture) ───────────────────────────
+        // logSchema({ builder, trigger?, title?, viewMetaData?, schema? })
+        //   appends an entry to localStorage. Schema defaults to the current
+        //   builder schema if not provided.
+        // openSessionLog / closeSessionLog control the review dialog.
+        logSchema,
+        openSessionLog,
+        closeSessionLog
       }}
     >
+      <UnsavedChangesGuard isDirty={isDirty} />
+      <SessionLogDialog open={sessionLogOpen} onClose={closeSessionLog} />
       {children}
     </BuilderContext.Provider>
   )

package/src/pages/api/ai.js

@@ -42,6 +42,26 @@ const PROVIDERS = {
     }),
     extract: (data) => data?.choices?.[0]?.message?.content ?? '',
   },
+
+  // Together AI — OpenAI-compatible API. Set TOGETHER_API_KEY and
+  // (optionally) NEXT_PUBLIC_TOGETHER_MODEL — point this at the base
+  // model for testing, or at your fine-tuned model id once a fine-tune
+  // job has finished (e.g. "username/llama-3.3-70b-rbb-ft-2026-05-10").
+  together: {
+    url:     'https://api.together.xyz/v1/chat/completions',
+    apiKey:  () => process.env.TOGETHER_API_KEY ?? '',
+    model:   () => process.env.NEXT_PUBLIC_TOGETHER_MODEL ?? 'meta-llama/Llama-3.3-70B-Instruct-Turbo',
+    headers: (key) => ({
+      'Content-Type': 'application/json',
+      Authorization:  `Bearer ${key}`,
+    }),
+    body: (model, messages, system) => ({
+      model,
+      max_tokens: 8096,
+      messages: [{ role: 'system', content: system }, ...messages],
+    }),
+    extract: (data) => data?.choices?.[0]?.message?.content ?? '',
+  },
 }
 
 export default async function handler(req, res) {

package/src/pages/printBuilder/index.jsx

@@ -147,7 +147,7 @@ function PrintSidebar({ collapsed }) {
 function PrintBuilderContent({ isDark, onToggleTheme }) {
   const router = useRouter()
   const { id } = router.query
-  const { setSchema } = useBuilder()
+  const { loadSchema } = useBuilder()
 
   const [metaData, setMetaData] = useState({ id: null, title: '' })
   const [leftCollapsed, setLeftCollapsed]   = useState(false)
@@ -166,7 +166,7 @@ function PrintBuilderContent({ isDark, onToggleTheme }) {
         // Ensure root reflects activeZone
         const activeZone = merged.activeZone ?? INITIAL_PRINT_SCHEMA.activeZone
         merged.root = merged.zones?.[activeZone] ?? createEmptyNode(activeZone)
-        setSchema(merged)
+        loadSchema(merged)
         setMetaData({ id: response.data.id, title: response.data.title })
       }
     } catch (err) {
@@ -178,7 +178,7 @@ function PrintBuilderContent({ isDark, onToggleTheme }) {
     if (id) {
       handleLoad(id)
     } else {
-      setSchema(INITIAL_PRINT_SCHEMA)
+      loadSchema(INITIAL_PRINT_SCHEMA)
     }
   }, [id])
 

package/src/pages/reportModule/reportBuilder/reportViewer/index.js

@@ -8,7 +8,7 @@ import CardHeader from "@mui/material/CardHeader";
 import Grid from "@mui/material/Grid";
 import {Plus} from "mdi-material-ui";
 import TAGGrid from "views/genericTable/TAGGrid";
-import {SettingsOutlined} from "@mui/icons-material";
+import {SettingsOutlined, AssessmentOutlined} from "@mui/icons-material";
 import UpdateReportPermissionDialog from "views/rolePermissions/UpdateReportPermissionDialog";
 import {getReportSession} from 'src/services/helper/reportSessionHelper'
 import BlankLayout from '../../../../lib/layouts/BlankLayout';
@@ -41,6 +41,13 @@ const ReportViewer = (params) => {
     globalParams,
     isRerender = false,
     updateRef,
+    // Presentation — render above the toolbar. If title is omitted, the
+    // report's own name from builderMetadata.name is used.
+    title,
+    caption,
+    // Page-level toolbar buttons rendered after Filter / Refresh.
+    // Built by ReportViewerRenderer with bound onClick handlers.
+    viewerActions,
     // nodeId / reportRefs are injected by the UI builder's ReportViewerRenderer.
     // nodeId    — the builder schema node ID for this ReportViewer instance
     // reportRefs — the shared registry { [nodeId]: updateRef } for all reports on the page
@@ -187,14 +194,56 @@ const ReportViewer = (params) => {
           <CircularProgress/>
         </Box>
       ) : !builderModel ? (
-        <Box textAlign="center" mt={8}>
-          <Typography variant="subtitle1" color="text.secondary">
+        // ── Empty state ─────────────────────────────────────────────────────
+        // Shown when no `id` / `pageId` has resolved yet. In the standalone
+        // /report/viewer page this is the persistent "pick a report" state;
+        // inside the builder it usually flashes for one render before the
+        // model loads.
+        <Box
+          sx={{
+            minHeight: minimized ? 'auto' : '60vh',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1.5,
+            p: 4,
+            color: 'text.secondary',
+          }}
+        >
+          <Box
+            sx={{
+              width: 72,
+              height: 72,
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              bgcolor: 'action.hover',
+              color: 'text.disabled',
+              mb: 0.5,
+            }}
+          >
+            <AssessmentOutlined sx={{ fontSize: 36 }} />
+          </Box>
+          <Typography variant='h6' sx={{ fontWeight: 600, color: 'text.primary', textAlign: 'center' }}>
             No report selected
           </Typography>
+          <Typography variant='body2' sx={{ color: 'text.secondary', textAlign: 'center', maxWidth: 380 }}>
+            Pick a report from the list, or pass a <code>pageId</code> / <code>id</code> to load one here.
+          </Typography>
         </Box>
       ) : (
         <>
           <Box display="flex" gap={1} flexDirection={'column'} sx={{ width: '100%' }}>
+            {/*
+              Studio header — only shown on the standalone /report/viewer page
+              (noHeader is set by the builder when ReportViewer is embedded as
+              a component, which suppresses this row entirely). The title and
+              caption are now rendered inside SGrid's toolbar on the same row
+              as Filter / Refresh / viewer actions, so this header is just the
+              "go to studio" affordance for the standalone page.
+            */}
             {(minimized !== true && noHeader !== true) &&
               <Box display="flex" justifyContent={'space-between'} alignItems={'center'} gap={1} sx={{p: 2}}>
                 <Typography variant="subtitle1" color="text.secondary">{builderMetadata?.name ?? ""}</Typography>
@@ -209,6 +258,7 @@ const ReportViewer = (params) => {
                   </IconButton>
                 </Tooltip>
               </Box>}
+
             <Box sx={{width: '100%'}}>
               <SGrid
                 key={`rv-${payloadVersion}`}
@@ -220,6 +270,12 @@ const ReportViewer = (params) => {
                 setOutGridApi={setOutGridApi}
                 externalTimer={externalTimer}
                 actions={actions}
+                viewerActions={viewerActions}
+                // Toolbar left side. Fall back to the report's own name from
+                // builderMetadata so standalone-page views still get a sensible
+                // title without explicit configuration.
+                title={title ?? builderMetadata?.name}
+                caption={caption}
                 reportTitle={builderMetadata?.name}
                 filter={sessionPayload?.externalFilter ?? filter}
                 columnsConfig={columnsConfig ?? []}

package/src/pages/viewBuilder/index.jsx

@@ -78,7 +78,7 @@ function CollapseToggle({ collapsed, onClick, side }) {
 function ViewBuilderContent({ isDark, onToggleTheme }) {
   const router = useRouter()
   const { id } = router.query
-  const { setSchema, setViewMetaData } = useBuilder()
+  const { loadSchema, setViewMetaData } = useBuilder()
   const [leftCollapsed, setLeftCollapsed] = useState(false)
   const [rightCollapsed, setRightCollapsed] = useState(false)
 
@@ -90,7 +90,7 @@ function ViewBuilderContent({ isDark, onToggleTheme }) {
       if (response) {
         const parsed = JSON.parse(response.data.value)
         // Backfill dialogs array for schemas saved before the dialogs feature
-        setSchema({ dialogs: [], ...parsed })
+        loadSchema({ dialogs: [], ...parsed })
         setViewMetaData({
           id: response.data.id,
           title: response.data.title,

package/src/services/Endpoints/ReportBuilderEndpoints.js

@@ -4,43 +4,43 @@ export const ReportBuilderEndpoints = {
   Post: {
     GetModels: {
       group: 'ReportBuilder', name: 'GetModels',
-      URL: 'ReportingModule/ReportBuilder/GetTypes',
+      URL: 'ReportBuilder/GetTypes',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Params
     },
     GetModelFields: {
       group: 'ReportBuilder', name: 'GetModelFields',
-      URL: 'ReportingModule/ReportBuilder/GetModelFields',
+      URL: 'ReportBuilder/GetModelFields',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Params
     },
     GenericGet: {
       group: 'ReportBuilder', name: 'GenericGet',
-      URL: 'ReportingModule/ReportBuilder/GenericGet',
+      URL: 'ReportBuilder/GenericGet',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Body
     },
     GetRawColumns: {
       group: 'ReportBuilder', name: 'GetRawColumns',
-      URL: 'ReportingModule/ReportBuilder/GetRawColumns',
+      URL: 'ReportBuilder/GetRawColumns',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Body
     },
     GetAllReports: {
       group: 'ReportBuilder', name: 'GetAllReports',
-      URL: 'ReportingModule/ReportBuilder/GetAllReports',
+      URL: 'ReportBuilder/GetAllReports',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Body
     },
     GetReportDetails: {
       group: 'ReportBuilder', name: 'GetReportDetails',
-      URL: 'ReportingModule/ReportBuilder/GetReportDetails',
+      URL: 'ReportBuilder/GetReportDetails',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Body
     },
     AddUpdate: {
       group: 'ReportBuilder', name: 'AddUpdate',
-      URL: 'ReportingModule/ReportBuilder/AddUpdate',
+      URL: 'ReportBuilder/AddUpdate',
       ContentType: ContentTypes.Json,
       DataType: DataTypes.Body
     },

package/src/services/sessionLog.js

@@ -0,0 +1,171 @@
+/**
+ * Session log — captures every successful save of a UI Builder or Print
+ * Builder schema while developers use the tool. The captured entries
+ * become future training data for the AI assistant.
+ *
+ * Storage:
+ *   localStorage key  rbb:sessionLogs:v1
+ *   value              JSON array of entries (newest first)
+ *
+ * Entry shape:
+ *   {
+ *     id:           string,        // unique
+ *     createdAt:    string,        // ISO timestamp
+ *     builder:      'ui' | 'print',
+ *     trigger:      string,        // 'save' | future: 'manual', 'auto'
+ *     title:        string,        // saved view title (for display only)
+ *     viewMetaData: object,        // builder-specific id/group/etc.
+ *     schema:       object,        // the actual saved schema
+ *     prompt:       string,        // empty by default — filled later by the
+ *                                  // developer to label the example for
+ *                                  // training (e.g. the natural-language
+ *                                  // instruction the schema corresponds to).
+ *     notes:        string,        // optional free-form developer notes
+ *   }
+ */
+
+const STORAGE_KEY = 'rbb:sessionLogs:v1'
+
+// ── Internal: pub/sub so the dialog re-renders on changes ────────────────────
+const listeners = new Set()
+function notify() { listeners.forEach(fn => { try { fn() } catch (_) {} }) }
+
+export function subscribe(fn) {
+  listeners.add(fn)
+  return () => listeners.delete(fn)
+}
+
+// ── Internal: read/write ─────────────────────────────────────────────────────
+function safeRead() {
+  try {
+    const raw = typeof window !== 'undefined' ? window.localStorage.getItem(STORAGE_KEY) : null
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (e) {
+    console.warn('[sessionLog] failed to read storage:', e)
+    return []
+  }
+}
+
+function safeWrite(entries) {
+  try {
+    if (typeof window === 'undefined') return
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(entries))
+    notify()
+  } catch (e) {
+    console.warn('[sessionLog] failed to write storage (likely quota):', e)
+  }
+}
+
+function uid() {
+  try { return `log_${crypto.randomUUID()}` }
+  catch { return `log_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}` }
+}
+
+// ── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Append a new entry. Returns the created entry.
+ *
+ * @param {Object} params
+ * @param {'ui'|'print'} params.builder
+ * @param {string}      [params.trigger='save']
+ * @param {string}      [params.title='']
+ * @param {Object}      [params.viewMetaData]
+ * @param {Object}      params.schema  - the actual schema being logged
+ * @param {string}      [params.prompt='']
+ * @param {string}      [params.notes='']
+ */
+export function logSchema({
+  builder,
+  trigger = 'save',
+  title = '',
+  viewMetaData = {},
+  schema,
+  prompt = '',
+  notes = ''
+}) {
+  if (!schema) {
+    console.warn('[sessionLog] refusing to log empty schema')
+    return null
+  }
+  const entry = {
+    id:           uid(),
+    createdAt:    new Date().toISOString(),
+    builder,
+    trigger,
+    title,
+    viewMetaData,
+    // deep clone via JSON to detach from any reactive state
+    schema:       JSON.parse(JSON.stringify(schema)),
+    prompt,
+    notes
+  }
+  const next = [entry, ...safeRead()]
+  safeWrite(next)
+  return entry
+}
+
+/** All entries, newest first. */
+export function listEntries() {
+  return safeRead()
+}
+
+export function getEntry(id) {
+  return safeRead().find(e => e.id === id) ?? null
+}
+
+/** Patch an entry — typically used to fill in `prompt` / `notes`. */
+export function updateEntry(id, patch) {
+  const entries = safeRead()
+  const idx = entries.findIndex(e => e.id === id)
+  if (idx === -1) return null
+  const updated = { ...entries[idx], ...patch, id, createdAt: entries[idx].createdAt }
+  entries[idx] = updated
+  safeWrite(entries)
+  return updated
+}
+
+export function deleteEntry(id) {
+  const next = safeRead().filter(e => e.id !== id)
+  safeWrite(next)
+}
+
+export function clearAll() {
+  safeWrite([])
+}
+
+/**
+ * Trigger a JSON file download of all entries.
+ * Filename: rbb-session-logs-YYYY-MM-DD.json
+ */
+export function exportJSON() {
+  if (typeof window === 'undefined') return
+  const entries = safeRead()
+  const blob = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' })
+  const url  = URL.createObjectURL(blob)
+  const a    = document.createElement('a')
+  const stamp = new Date().toISOString().slice(0, 10)
+  a.href     = url
+  a.download = `rbb-session-logs-${stamp}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+/**
+ * Bulk import (e.g. restoring from a backup). Replaces existing entries.
+ */
+export function importJSON(json) {
+  let parsed
+  try {
+    parsed = typeof json === 'string' ? JSON.parse(json) : json
+  } catch (e) {
+    throw new Error('Invalid JSON')
+  }
+  if (!Array.isArray(parsed)) throw new Error('Expected an array of entries')
+  safeWrite(parsed)
+  return parsed.length
+}