@gadmin2n/schematics 0.0.68 → 0.0.70

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/agentPanel/AgentContext.tsx

@@ -1,6 +1,14 @@
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 import { InspectedElementInfo } from './inspectorActions';
+import { getRouteSourceDir } from 'config/routeRegistry';
 
 export type PageType = 'list' | 'create' | 'edit' | 'show' | 'unknown';
 
@@ -11,8 +19,20 @@ export interface PageInfo {
   pageType: PageType;
   /** Full path */
   path: string;
+  /**
+   * Source file path relative to web/ (e.g. "src/routes/user/list.tsx").
+   * Null when the route cannot be resolved to a known routes/ directory.
+   */
+  sourceFilePath: string | null;
 }
 
+/**
+ * True when this app is running inside the dev-shell iframe.
+ * In that case, open/close/sendPrompt are forwarded to the parent shell
+ * via postMessage instead of managing local state.
+ */
+const isInsideDevShell = window.parent !== window && import.meta.env.DEV;
+
 interface AgentContextValue {
   /** Whether the agent panel is visible */
   visible: boolean;
@@ -22,6 +42,13 @@ interface AgentContextValue {
   close: () => void;
   /** Toggle the agent panel */
   toggle: () => void;
+  /**
+   * Open the agent panel and send a prompt directly.
+   * Registered by AgentPanel on mount; no-op if SDK is not ready.
+   */
+  sendPrompt: (prompt: string) => void;
+  /** Internal: used by AgentPanel to register the actual send implementation */
+  _registerSendPrompt: (fn: (prompt: string) => void) => void;
   /** Current page info */
   pageInfo: PageInfo;
   /** Selected skill ID */
@@ -55,8 +82,27 @@ interface AgentContextValue {
 const AgentContext = createContext<AgentContextValue | null>(null);
 
 /**
- * Parse current route to extract page info
- * Supports nested routes like /system/game, /system/game/edit/123
+ * Map a pageType to its conventional filename inside routes/<dir>/.
+ * Falls back to null for unknown types (e.g. custom standalone pages).
+ */
+function pageTypeToFile(pageType: PageType): string | null {
+  switch (pageType) {
+    case 'list':
+      return 'list.tsx';
+    case 'create':
+      return 'create.tsx';
+    case 'edit':
+      return 'edit.tsx';
+    case 'show':
+      return 'show.tsx';
+    default:
+      return null;
+  }
+}
+
+/**
+ * Parse current route to extract page info.
+ * Supports nested routes like /system/game, /system/game/edit/123.
  */
 function parsePageInfo(pathname: string): PageInfo {
   // Remove leading slash and split
@@ -67,7 +113,7 @@ function parsePageInfo(pathname: string): PageInfo {
   let pageType: PageType = 'unknown';
 
   if (parts.length === 0) {
-    return { resourceName, pageType, path: pathname };
+    return { resourceName, pageType, path: pathname, sourceFilePath: null };
   }
 
   // Find the resource name and page type by scanning from the end
@@ -103,9 +149,13 @@ function parsePageInfo(pathname: string): PageInfo {
   } else if (lastPart === 'create') {
     pageType = 'create';
     resourceName = secondLastPart || '';
-  } else if (lastPart === 'edit' || lastPart === 'show' || lastPart === 'clone') {
+  } else if (
+    lastPart === 'edit' ||
+    lastPart === 'show' ||
+    lastPart === 'clone'
+  ) {
     // Shouldn't happen normally, but handle it
-    pageType = lastPart === 'clone' ? 'edit' : lastPart as PageType;
+    pageType = lastPart === 'clone' ? 'edit' : (lastPart as PageType);
     resourceName = secondLastPart || '';
   } else {
     // Last part is the resource name, it's a list page
@@ -113,10 +163,32 @@ function parsePageInfo(pathname: string): PageInfo {
     resourceName = lastPart;
   }
 
+  // Derive the source file path from the route registry — this resolves
+  // slugs like "game-list" → "game" and camelCase dirs like "iTActivityDay".
+  const sourceDir = getRouteSourceDir(pathname);
+
+  // sourceDir === null means this path is NOT in routeRegistry (e.g. an iframe
+  // or external-redirect page whose path comes from the DB). In that case we
+  // suppress resourceName and pageType so the context only shows the path.
+  if (sourceDir === null) {
+    return {
+      resourceName: '',
+      pageType: 'unknown',
+      path: pathname,
+      sourceFilePath: null,
+    };
+  }
+
+  const fileName = pageTypeToFile(pageType);
+  const sourceFilePath = fileName
+    ? `src/routes/${sourceDir}/${fileName}`
+    : null;
+
   return {
     resourceName,
     pageType,
     path: pathname,
+    sourceFilePath,
   };
 }
 
@@ -129,22 +201,92 @@ export const AgentProvider: React.FC<{ children: React.ReactNode }> = ({
   const [userPrompt, setUserPrompt] = useState('');
   const [activeTab, setActiveTab] = useState<'page' | 'project'>('page');
   const [inspecting, setInspecting] = useState(false);
-  const [inspectedElement, setInspectedElement] = useState<InspectedElementInfo | null>(null);
-  const [selectedSubSkillId, setSelectedSubSkillId] = useState<string | null>(null);
+  const [inspectedElement, setInspectedElement] =
+    useState<InspectedElementInfo | null>(null);
+  const [selectedSubSkillId, setSelectedSubSkillId] = useState<string | null>(
+    null,
+  );
+
+  // Holds the actual sendPrompt implementation registered by AgentPanel
+  const sendPromptImplRef = useRef<((prompt: string) => void) | null>(null);
+
+  const _registerSendPrompt = useCallback((fn: (prompt: string) => void) => {
+    sendPromptImplRef.current = fn;
+  }, []);
+
+  const sendPrompt = useCallback((prompt: string) => {
+    // In dev-shell mode, forward to the parent shell which owns the SDK
+    if (isInsideDevShell) {
+      // INSPECTOR_SEND: shell will skip additionContext injection for this prompt
+      window.parent.postMessage(
+        { type: 'SEND_PROMPT', payload: prompt, inspectorSend: true },
+        '*',
+      );
+      return;
+    }
+    setVisible(true);
+    setTimeout(() => {
+      sendPromptImplRef.current?.(prompt);
+    }, 300);
+  }, []);
 
   const pageInfo = parsePageInfo(location.pathname);
 
-  const open = useCallback(() => setVisible(true), []);
-  const close = useCallback(() => setVisible(false), []);
-  const toggle = useCallback(() => setVisible((v) => !v), []);
+  // Broadcast page context to dev-shell whenever route changes
+  useEffect(() => {
+    if (!isInsideDevShell) return;
+    window.parent.postMessage(
+      {
+        type: 'PAGE_CONTEXT_CHANGED',
+        payload: {
+          path: location.pathname,
+          resourceName: pageInfo.resourceName,
+          pageType: pageInfo.pageType,
+          sourceFilePath: pageInfo.sourceFilePath,
+        },
+      },
+      '*',
+    );
+  }, [
+    location.pathname,
+    pageInfo.resourceName,
+    pageInfo.pageType,
+    pageInfo.sourceFilePath,
+  ]);
+
+  const open = useCallback(() => {
+    if (isInsideDevShell) {
+      window.parent.postMessage({ type: 'OPEN_AGENT' }, '*');
+      return;
+    }
+    setVisible(true);
+  }, []);
+  const close = useCallback(() => {
+    if (isInsideDevShell) {
+      window.parent.postMessage({ type: 'CLOSE_AGENT' }, '*');
+      return;
+    }
+    setVisible(false);
+  }, []);
+  const toggle = useCallback(() => {
+    if (isInsideDevShell) {
+      window.parent.postMessage({ type: 'TOGGLE_AGENT' }, '*');
+      return;
+    }
+    setVisible((v) => !v);
+  }, []);
 
   const startInspecting = useCallback(() => {
     setVisible(false);
     setInspecting(true);
+    if (isInsideDevShell)
+      window.parent.postMessage({ type: 'INSPECT_STATE', payload: true }, '*');
   }, []);
 
   const stopInspecting = useCallback(() => {
     setInspecting(false);
+    if (isInsideDevShell)
+      window.parent.postMessage({ type: 'INSPECT_STATE', payload: false }, '*');
   }, []);
 
   // Alt+I shortcut to toggle inspect mode
@@ -153,11 +295,14 @@ export const AgentProvider: React.FC<{ children: React.ReactNode }> = ({
       if (e.altKey && e.code === 'KeyI') {
         e.preventDefault();
         setInspecting((prev) => {
-          if (!prev) {
-            // entering inspect mode — close drawer
-            setVisible(false);
-          }
-          return !prev;
+          const next = !prev;
+          if (next) setVisible(false);
+          if (isInsideDevShell)
+            window.parent.postMessage(
+              { type: 'INSPECT_STATE', payload: next },
+              '*',
+            );
+          return next;
         });
       }
     };
@@ -165,11 +310,40 @@ export const AgentProvider: React.FC<{ children: React.ReactNode }> = ({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
+  // Listen for TOGGLE_INSPECT / STOP_INSPECT from dev-shell
+  useEffect(() => {
+    if (!isInsideDevShell) return;
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data?.type === 'TOGGLE_INSPECT') {
+        setInspecting((prev) => {
+          const next = !prev;
+          if (next) setVisible(false);
+          window.parent.postMessage(
+            { type: 'INSPECT_STATE', payload: next },
+            '*',
+          );
+          return next;
+        });
+      }
+      if (e.data?.type === 'STOP_INSPECT') {
+        setInspecting(false);
+        window.parent.postMessage(
+          { type: 'INSPECT_STATE', payload: false },
+          '*',
+        );
+      }
+    };
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
   const value: AgentContextValue = {
     visible,
     open,
     close,
     toggle,
+    sendPrompt,
+    _registerSendPrompt,
     pageInfo,
     selectedSkillId,
     setSelectedSkillId,