@finos/legend-application-studio 28.21.11 → 28.21.13

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -80,6 +80,7 @@ import {
   PanelLoadingIndicator,
   GearSuggestIcon,
   FlaskIcon,
+  SparkleIcon,
 } from '@finos/legend-art';
 import {
   type ChangeEventHandler,
@@ -106,7 +107,7 @@ import {
   QueryBuilderAdvancedWorkflowState,
   type QueryBuilderState,
 } from '@finos/legend-query-builder';
-import { action, autorun, flowResult } from 'mobx';
+import { action, autorun, flowResult, runInAction } from 'mobx';
 import { DataProductTestableEditor } from './testable/DataProductTestableEditor.js';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
@@ -202,6 +203,11 @@ import {
 import type { LegendStudioApplicationStore } from '../../../../stores/LegendStudioBaseStore.js';
 import type { DepotServerClient } from '@finos/legend-server-depot';
 import { RelationElementEditor } from '../data-editor/RelationElementsDataEditor.js';
+import type {
+  AccessPointMeta,
+  DataProductDocResponse,
+  DSL_DataProduct_LegendStudioApplicationPlugin_Extension,
+} from '../../../../stores/extensions/DSL_DataProduct_LegendStudioApplicationPlugin_Extension.js';
 
 export enum AP_GROUP_MODAL_ERRORS {
   GROUP_NAME_EMPTY = 'Group Name is empty',
@@ -262,8 +268,11 @@ const hoverIcon = () => {
 };
 
 const AccessPointTitle = observer(
-  (props: { accessPointState: LakehouseAccessPointState }) => {
-    const { accessPointState } = props;
+  (props: {
+    accessPointState: LakehouseAccessPointState;
+    aiSuggestionMeta?: AccessPointMeta | undefined;
+  }) => {
+    const { accessPointState, aiSuggestionMeta } = props;
     const accessPoint = accessPointState.accessPoint;
     const [editingName, setEditingName] = useState(
       accessPoint.id === newNamePlaceholder,
@@ -286,29 +295,37 @@ const AccessPointTitle = observer(
         }
       });
 
-    return editingName ? (
-      <textarea
-        className="access-point-editor__name"
-        spellCheck={false}
-        value={accessPoint.id}
-        onChange={updateAccessPointName}
-        placeholder={'Access Point Name'}
-        onBlur={handleNameBlur}
-        style={{
-          borderColor:
-            accessPoint.id === newNamePlaceholder
-              ? 'var(--color-red-300)'
-              : 'transparent',
-        }}
-      />
-    ) : (
-      <div
-        className="access-point-editor__name__label"
-        onClick={handleNameEdit}
-        title="Click to edit access point name"
-        style={{ flex: '1 1 auto' }}
-      >
-        {accessPoint.id}
+    return (
+      <div style={{ flex: '1 1 auto', minWidth: 0 }}>
+        {editingName ? (
+          <textarea
+            className="access-point-editor__name"
+            spellCheck={false}
+            value={accessPoint.id}
+            onChange={updateAccessPointName}
+            placeholder={'Access Point Name'}
+            onBlur={handleNameBlur}
+            style={{
+              borderColor:
+                accessPoint.id === newNamePlaceholder
+                  ? 'var(--color-red-300)'
+                  : 'transparent',
+            }}
+          />
+        ) : (
+          <div
+            className="access-point-editor__name__label"
+            onClick={handleNameEdit}
+            title="Click to edit access point name"
+          >
+            {accessPoint.id}
+          </div>
+        )}
+        {aiSuggestionMeta && (
+          <div className="data-product-editor__ai-suggestion-inline">
+            {aiSuggestionMeta.name}
+          </div>
+        )}
       </div>
     );
   },
@@ -697,8 +714,9 @@ export const LakehouseDataProductAccessPointEditor = observer(
   (props: {
     accessPointState: LakehouseAccessPointState;
     isReadOnly: boolean;
+    aiSuggestionMeta?: AccessPointMeta | undefined;
   }) => {
-    const { accessPointState } = props;
+    const { accessPointState, aiSuggestionMeta } = props;
     const editorStore = useEditorStore();
     const accessPoint = accessPointState.accessPoint;
     const groupState = accessPointState.state;
@@ -925,7 +943,10 @@ export const LakehouseDataProductAccessPointEditor = observer(
           />
           <div style={{ flex: 1 }}>
             <div className="access-point-editor__metadata">
-              <AccessPointTitle accessPointState={accessPointState} />
+              <AccessPointTitle
+                accessPointState={accessPointState}
+                aiSuggestionMeta={aiSuggestionMeta}
+              />
               <div className="access-point-editor__info">
                 <div className="access-point-editor__reproducible">
                   <Checkbox
@@ -1166,6 +1187,11 @@ export const LakehouseDataProductAccessPointEditor = observer(
                 {isHoveringTitle && hoverIcon()}
               </div>
             )}
+            {aiSuggestionMeta && (
+              <div className="data-product-editor__ai-suggestion-inline">
+                {aiSuggestionMeta.title}
+              </div>
+            )}
             {editingDescription ? (
               <textarea
                 className="panel__content__form__section__input"
@@ -1209,6 +1235,11 @@ export const LakehouseDataProductAccessPointEditor = observer(
                 {isHoveringDesc && hoverIcon()}
               </div>
             )}
+            {aiSuggestionMeta && (
+              <div className="data-product-editor__ai-suggestion-inline">
+                {aiSuggestionMeta.description}
+              </div>
+            )}
             <div className="access-point-editor__content">
               <div className="access-point-editor__generic-entry">
                 <div className="access-point-editor__entry__container">
@@ -1712,6 +1743,10 @@ const AccessPointGroupEditor = observer(
     const [isHoveringName, setIsHoveringName] = useState(false);
     const [editingTitle, setEditingTitle] = useState(false);
     const [isHoveringTitle, setIsHoveringTitle] = useState(false);
+    const [isSuggestingWithAI, setIsSuggestingWithAI] = useState(false);
+    const [aiSuggestion, setAISuggestion] = useState<
+      DataProductDocResponse | undefined
+    >(undefined);
     const handleDescriptionEdit = () => setEditingDescription(true);
     const handleDescriptionBlur = () => {
       setEditingDescription(false);
@@ -1767,6 +1802,96 @@ const AccessPointGroupEditor = observer(
       accessPointGroup_setTitle(groupState.value, val);
     };
 
+    // AI suggestion for APG
+    const legendAIUrl = editorStore.applicationStore.config.legendAIUrl;
+    const aiDocSuggester = legendAIUrl
+      ? editorStore.pluginManager
+          .getApplicationPlugins()
+          .map((p) =>
+            (
+              p as DSL_DataProduct_LegendStudioApplicationPlugin_Extension
+            ).getExtraDataProductDocumentationAISuggester?.bind(p),
+          )
+          .find(Boolean)
+      : undefined;
+    const suggestWithAI = async (): Promise<void> => {
+      if (!aiDocSuggester || !legendAIUrl) {
+        return;
+      }
+      setIsSuggestingWithAI(true);
+      setAISuggestion(undefined);
+      try {
+        const definitions =
+          await editorStore.graphManagerState.graphManager.graphToPureCode(
+            editorStore.graphManagerState.graph,
+          );
+        const product = productEditorState.product;
+        const suggestion = await aiDocSuggester(
+          { definitions, data_product_name: product.path },
+          legendAIUrl,
+        );
+        runInAction(() => {
+          setAISuggestion(suggestion);
+        });
+      } finally {
+        runInAction(() => {
+          setIsSuggestingWithAI(false);
+        });
+      }
+    };
+    const applyAISuggestion = (): void => {
+      if (!aiSuggestion) {
+        return;
+      }
+      // Find matching group in the response
+      const gIdx =
+        productEditorState.accessPointGroupStates.indexOf(groupState);
+      const groupMeta =
+        aiSuggestion.access_point_groups.find(
+          (g) => g.name === groupState.value.id,
+        ) ?? aiSuggestion.access_point_groups[gIdx];
+      if (groupMeta) {
+        accessPointGroup_setTitle(groupState.value, groupMeta.title);
+        accessPointGroup_setDescription(
+          groupState.value,
+          groupMeta.description,
+        );
+      }
+      // Apply access point metadata for this group
+      const apMetas = aiSuggestion.access_points.filter(
+        (ap) => ap.group === (groupMeta?.name ?? groupState.value.id),
+      );
+      for (
+        let j = 0;
+        j < apMetas.length && j < groupState.value.accessPoints.length;
+        j++
+      ) {
+        const apMeta = apMetas[j] as (typeof apMetas)[number];
+        const ap = groupState.value.accessPoints[
+          j
+        ] as (typeof groupState.value.accessPoints)[number];
+        // Convert suggested name to valid identifier (alphanumeric + underscore)
+        const sanitizedName = apMeta.name.replace(/[^0-9a-zA-Z_]/g, '_');
+        if (sanitizedName) {
+          ap.id = sanitizedName;
+        }
+        accessPoint_setTitle(ap, apMeta.title);
+        accessPoint_setDescription(ap, apMeta.description);
+      }
+      setAISuggestion(undefined);
+    };
+
+    // Computed AI suggestion for current group
+    const groupIndex =
+      productEditorState.accessPointGroupStates.indexOf(groupState);
+    const aiGroupMeta =
+      aiSuggestion?.access_point_groups.find(
+        (g) => g.name === groupState.value.id,
+      ) ?? aiSuggestion?.access_point_groups[groupIndex];
+    const aiAccessPointMetas = aiSuggestion?.access_points.filter(
+      (ap) => ap.group === (aiGroupMeta?.name ?? groupState.value.id),
+    );
+
     const handleRemoveAccessPointGroup = (): void => {
       editorStore.applicationStore.alertService.setActionAlertInfo({
         message:
@@ -1852,6 +1977,48 @@ const AccessPointGroupEditor = observer(
             <TimesIcon />
           </button>
         </div>
+        {aiDocSuggester && (
+          <div style={{ padding: '0.25rem 0.5rem' }}>
+            <PanelLoadingIndicator isLoading={isSuggestingWithAI} />
+            {aiSuggestion ? (
+              <div className="data-product-editor__ai-suggestion__actions">
+                <button
+                  className="btn btn--dark data-product-editor__ai-suggestion__apply-btn"
+                  onClick={applyAISuggestion}
+                  title="Apply AI-generated title, description, and access point metadata for this group"
+                >
+                  Apply
+                </button>
+                <button
+                  className="btn data-product-editor__ai-suggestion__dismiss-btn"
+                  onClick={(): void => setAISuggestion(undefined)}
+                >
+                  Dismiss
+                </button>
+                <span className="data-product-editor__ai-suggestion-badge">
+                  <SparkleIcon />
+                  AI Suggestion
+                </span>
+              </div>
+            ) : (
+              <button
+                className="data-product-editor__ai-suggest-btn"
+                onClick={(): void => {
+                  suggestWithAI().catch(
+                    editorStore.applicationStore.alertUnhandledError,
+                  );
+                }}
+                disabled={isSuggestingWithAI || isReadOnly}
+                title="Use AI to suggest title and descriptions for this access point group"
+              >
+                <SparkleIcon />
+                <span>
+                  {isSuggestingWithAI ? 'Suggesting...' : 'Suggest with AI'}
+                </span>
+              </button>
+            )}
+          </div>
+        )}
         <div className="access-point-editor__group-container__name-editor">
           {editingTitle ? (
             <textarea
@@ -1896,6 +2063,11 @@ const AccessPointGroupEditor = observer(
             </div>
           )}
         </div>
+        {aiGroupMeta && (
+          <div className="data-product-editor__ai-suggestion-inline">
+            {aiGroupMeta.title}
+          </div>
+        )}
         <div className="access-point-editor__group-container__description-editor">
           {editingDescription ? (
             <textarea
@@ -1938,6 +2110,11 @@ const AccessPointGroupEditor = observer(
               {isHoveringDescription && hoverIcon()}
             </div>
           )}
+          {aiGroupMeta && (
+            <div className="data-product-editor__ai-suggestion-inline">
+              {aiGroupMeta.description}
+            </div>
+          )}
         </div>
         {editorStore.applicationStore.config.options.dataProductConfig && (
           <AccessPointGroupPublicToggle groupState={groupState} />
@@ -1975,11 +2152,12 @@ const AccessPointGroupEditor = observer(
             >
               {groupState.accessPointStates
                 .filter(filterByType(LakehouseAccessPointState))
-                .map((apState) => (
+                .map((apState, idx) => (
                   <LakehouseDataProductAccessPointEditor
                     key={apState.uuid}
                     isReadOnly={isReadOnly}
                     accessPointState={apState}
+                    aiSuggestionMeta={aiAccessPointMetas?.[idx]}
                   />
                 ))}
             </div>

package/src/components/editor/editor-group/database-editor/DatabaseDiagramCanvas.tsx

@@ -58,6 +58,7 @@ import {
   resolveJoinFormula,
 } from './DatabaseDiagramHelper.js';
 import type { DatabaseEditorState } from '../../../../stores/editor/editor-state/element-editor-state/DatabaseEditorState.js';
+import { useApplicationStore } from '@finos/legend-application';
 
 const NODE_TYPES = {
   table: DatabaseTableNode,
@@ -107,6 +108,7 @@ const findRelationById = (
 const DatabaseDiagramCanvasInner = observer(
   (props: { editorState: DatabaseEditorState }) => {
     const { editorState } = props;
+    const applicationStore = useApplicationStore();
     const {
       database,
       selectedRelation,
@@ -521,6 +523,15 @@ const DatabaseDiagramCanvasInner = observer(
       <div className="database-diagram__canvas-shell">
         <ReactFlow
           className="database-diagram__canvas"
+          // Drive ReactFlow's built-in light/dark variant from the active app
+          // theme. The chrome (canvas bg, controls, minimap, edges, dot pattern)
+          // then tracks studio's theme without us having to override individual
+          // `--xy-*` variables.
+          colorMode={
+            applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+              ? 'light'
+              : 'dark'
+          }
           nodes={selectionAwareNodes}
           edges={selectionAwareEdges}
           nodeTypes={NODE_TYPES}

package/src/components/editor/editor-group/database-editor/DatabaseEditor.tsx

@@ -20,12 +20,10 @@ import {
   ChevronRightIcon,
   InfoCircleIcon,
   LockIcon,
-  MoonIcon,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
-  SunIcon,
   clsx,
   getCollapsiblePanelGroupProps,
 } from '@finos/legend-art';
@@ -90,14 +88,7 @@ export const DatabaseEditor = observer(() => {
   );
 
   return (
-    <div
-      className={clsx('database-editor', {
-        // Local light-theme opt-in. Scoped to this editor only — the rest
-        // of Studio remains in its configured theme. SCSS overrides hang
-        // off this modifier class.
-        'database-editor--light': editorState.theme === 'light',
-      })}
-    >
+    <div className="database-editor">
       <div className="database-editor__tabs__header">
         <div className="database-editor__tabs">
           {TABS.map((tab) => (
@@ -128,24 +119,6 @@ export const DatabaseEditor = observer(() => {
             READ ONLY
           </span>
         </div>
-        {/*
-         * Light/dark theme toggle. Scoped to this editor only — see
-         * `DatabaseEditorState.toggleTheme`. Icon switches to surface the
-         * mode the user would jump TO if they clicked (current=dark shows
-         * a sun, current=light shows a moon).
-         */}
-        <button
-          type="button"
-          className="database-editor__theme-toggle"
-          onClick={() => editorState.toggleTheme()}
-          title={
-            editorState.theme === 'dark'
-              ? 'Switch to light theme (this editor only)'
-              : 'Switch to dark theme'
-          }
-        >
-          {editorState.theme === 'dark' ? <SunIcon /> : <MoonIcon />}
-        </button>
       </div>
       <div className="database-editor__content">
         {database instanceof INTERNAL__LakehouseGeneratedDatabase && (

package/src/components/editor/editor-group/diff-editor/EntityChangeConflictEditor.tsx

@@ -54,7 +54,7 @@ import {
   getCodeEditorValue,
   normalizeLineEnding,
   clearMarkers,
-  CODE_EDITOR_THEME,
+  getCodeEditorThemeForAppTheme,
   CODE_EDITOR_LANGUAGE,
 } from '@finos/legend-code-editor';
 import {
@@ -154,6 +154,7 @@ export const EntityChangeConflictSideBarItem = observer(
 const MergeConflictEditor = observer(
   (props: { conflictEditorState: EntityChangeConflictEditorState }) => {
     const { conflictEditorState } = props;
+    const applicationStore = useApplicationStore();
     const isReadOnly = conflictEditorState.isReadOnly;
     const [editor, setEditor] = useState<
       monacoEditorAPI.IStandaloneCodeEditor | undefined
@@ -189,7 +190,10 @@ const MergeConflictEditor = observer(
         const element = textInputRef.current;
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseCodeEditorOptions(),
-          theme: CODE_EDITOR_THEME.DEFAULT_DARK,
+          // Match the active app theme — see GrammarTextEditor for the rationale.
+          theme: getCodeEditorThemeForAppTheme(
+            applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+          ),
           language: CODE_EDITOR_LANGUAGE.PURE,
           minimap: { enabled: false },
           formatOnType: true,
@@ -198,7 +202,10 @@ const MergeConflictEditor = observer(
         _editor.focus(); // focus on the editor initially so we can correctly compute next/prev conflict chunks
         setEditor(_editor);
       }
-    }, [editor]);
+    }, [
+      editor,
+      applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+    ]);
 
     if (editor) {
       // dispose the old editor content setter in case the `updateInput` handler changes

package/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -1521,7 +1521,7 @@ export const FunctionEditor = observer(() => {
   return (
     <div
       data-testid={LEGEND_STUDIO_TEST_ID.FUNCTION_EDITOR}
-      className="function-editor uml-editor uml-editor--dark"
+      className="function-editor uml-editor"
     >
       <Panel>
         <div className="panel__header">

package/src/components/editor/editor-group/mapping-editor/MappingEditor.tsx

@@ -220,7 +220,7 @@ const MappingClassMappingEditor = observer(() => {
   );
 
   return (
-    <div className={clsx('mapping-editor', 'mapping__theme__dark')}>
+    <div className="mapping-editor">
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel size={300} minSize={300}>
           <div className="mapping-editor__side-bar">

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -267,7 +267,11 @@ const ServiceGeneralEditor = observer(() => {
     setIsSuggestingWithAI(true);
     setAIDocSuggestion(undefined);
     try {
-      const suggestion = await aiDocSuggester(service, legendAIUrl);
+      const serviceGrammar =
+        await editorStore.graphManagerState.graphManager.elementsToPureCode([
+          service,
+        ]);
+      const suggestion = await aiDocSuggester(serviceGrammar, legendAIUrl);
       setAIDocSuggestion(suggestion);
     } finally {
       setIsSuggestingWithAI(false);

package/src/components/editor/editor-group/uml-editor/StereotypeSelector.tsx

@@ -185,11 +185,7 @@ export const StereotypeSelector = observer(
           dragSourceConnector={handleRef}
           isDragging={isBeingDragged}
         />
-        <div
-          className={clsx('stereotype-selector', {
-            'stereotype-selector--dark': darkTheme,
-          })}
-        >
+        <div className="stereotype-selector">
           <div className="stereotype-selector__profile">
             <CustomSelectorInput
               className="stereotype-selector__profile__selector"

package/src/components/editor/editor-group/uml-editor/TaggedValueEditor.tsx

@@ -194,11 +194,7 @@ export const TaggedValueEditor = observer(
           dragSourceConnector={handleRef}
           isDragging={isBeingDragged}
         />
-        <div
-          className={clsx('tagged-value-editor', {
-            'tagged-value-editor--dark': darkTheme,
-          })}
-        >
+        <div className="tagged-value-editor">
           <div className="tagged-value-editor__profile">
             <CustomSelectorInput
               className="tagged-value-editor__profile__selector"

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -49,7 +49,7 @@ import { useApplicationNavigationContext } from '@finos/legend-application';
 import { useParams } from '@finos/legend-application/browser';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../__lib__/LegendStudioDocumentation.js';
 import { CreateProjectModal } from './CreateProjectModal.js';
-import { ActivityBarMenu } from '../editor/ActivityBar.js';
+import { ActivityBarMenu, ColorThemeToggle } from '../editor/ActivityBar.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../__lib__/LegendStudioApplicationNavigationContext.js';
 import { CreateWorkspaceModal } from './CreateWorkspaceModal.js';
 import { RecentWorkspacesPanel } from './RecentWorkspacesPanel.js';
@@ -369,14 +369,24 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
     // Build a unified option list: recent projects (that aren't already in the
     // loaded set) are prepended so users can instantly re-open common work
     // without waiting for the SDLC search to round-trip.
+    const sandboxProject =
+      setupStore.sandboxProject instanceof Project
+        ? setupStore.sandboxProject
+        : undefined;
+    const sandboxProjectId = sandboxProject?.projectId;
     const loadedProjectOptions = setupStore.projects
+      .filter((p) => p.projectId !== sandboxProjectId)
       .map(buildProjectOption)
       .sort(compareLabelFn);
     const loadedProjectIds = new Set(
       setupStore.projects.map((p) => p.projectId),
     );
     const recentProjectOptions: ProjectOption[] = setupStore.recentProjects
-      .filter((r) => !loadedProjectIds.has(r.projectId))
+      .filter(
+        (r) =>
+          !loadedProjectIds.has(r.projectId) &&
+          r.projectId !== sandboxProjectId,
+      )
       .map((r) => {
         // Rebuild a real Project from the cached metadata; no synthetic
         // fields needed since we persist everything the schema requires.
@@ -390,6 +400,17 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
         return { label: stub.name, value: stub };
       });
     const projectOptions: ProjectOption[] = [
+      // The user's own sandbox project is fetched via a dedicated call
+      // (`loadSandboxProject`) and excluded from the main search results, so
+      // we surface it here as a labeled option pinned to the top of the list.
+      ...(sandboxProject
+        ? [
+            {
+              label: `${sandboxProject.name} (sandbox)`,
+              value: sandboxProject,
+            },
+          ]
+        : []),
       ...recentProjectOptions,
       ...loadedProjectOptions,
     ];
@@ -546,6 +567,10 @@ export const WorkspaceSetup = withWorkspaceSetupStore(
           <div className="workspace-setup__body">
             <div className="activity-bar">
               <ActivityBarMenu />
+              {/* Spacer so the theme toggle sits at the bottom of the strip,
+                  mirroring how the editor's activity bar is laid out. */}
+              <div className="activity-bar__items" />
+              <ColorThemeToggle />
             </div>
             <div
               className="workspace-setup__content"

package/src/index.ts

@@ -64,6 +64,7 @@ export * from './stores/graph-modifier/DSL_Service_GraphModifierHelper.js';
 export * from './stores/graph-modifier/RawValueSpecificationGraphModifierHelper.js';
 export * from './stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 export * from './stores/extensions/DSL_Service_LegendStudioApplicationPlugin_Extension.js';
+export * from './stores/extensions/DSL_DataProduct_LegendStudioApplicationPlugin_Extension.js';
 export * from './stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 export { DataProductEditorState } from './stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';