insforge 1.3.0 → 1.4.8

package/frontend/src/features/login/pages/CloudLoginPage.tsx

@@ -1,118 +1,125 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { LockIcon } from 'lucide-react';
-import { useAuth } from '@/lib/contexts/AuthContext';
-import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
-import { usePartnerOrigin } from '../hooks/usePartnerOrigin';
-
-export default function CloudLoginPage() {
-  const navigate = useNavigate();
-  const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
-  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
-  const { isPartnerOrigin } = usePartnerOrigin();
-  const [authError, setAuthError] = useState<string | null>(null);
-
-  // Handle authorization code from postMessage
-  const onAuthorizationCodeReceived = useCallback(
-    async (event: MessageEvent) => {
-      try {
-        // Validate origin - allow insforge.dev, *.insforge.dev, and partner domains
-        const isInsforgeOrigin =
-          event.origin.endsWith('.insforge.dev') || event.origin === 'https://insforge.dev';
-
-        if (!isInsforgeOrigin) {
-          const isPartner = await isPartnerOrigin(event.origin);
-          if (!isPartner) {
-            console.warn('Received message from unauthorized origin:', event.origin);
-            return;
-          }
-        }
-
-        const authorizationCode = event.data.code;
-
-        setAuthError(null);
-        // Exchange the authorization code for an access token
-        const success = await loginWithAuthorizationCode(authorizationCode);
-        if (success) {
-          // Notify parent of success
-          postMessageToParent(
-            {
-              type: 'AUTH_SUCCESS',
-            },
-            event.origin
-          );
-        } else {
-          setAuthError('The authorization code may have expired or already been used.');
-          postMessageToParent(
-            {
-              type: 'AUTH_ERROR',
-              message: 'Authorization code validation failed',
-            },
-            event.origin
-          );
-        }
-      } catch (error) {
-        console.error('Authorization code exchange failed:', error);
-        setAuthError('The authorization code may have expired or already been used.');
-        postMessageToParent(
-          {
-            type: 'AUTH_ERROR',
-            message: 'Authorization code validation failed',
-          },
-          event.origin
-        );
-      }
-    },
-    [loginWithAuthorizationCode, isPartnerOrigin]
-  );
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === 'AUTHORIZATION_CODE' && event.data?.code) {
-        void onAuthorizationCodeReceived(event);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, [onAuthorizationCodeReceived]);
-
-  useEffect(() => {
-    if (isAuthenticated && !isMcpUsageLoading) {
-      if (!hasCompletedOnboarding) {
-        postMessageToParent({ type: 'SHOW_ONBOARDING_OVERLAY' });
-      }
-      void navigate('/dashboard', { replace: true });
-    }
-  }, [hasCompletedOnboarding, isAuthenticated, isMcpUsageLoading, navigate]);
-
-  // Show error state if authentication failed
-  if (authError) {
-    return (
-      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
-        <div className="text-center text-white">
-          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
-          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
-          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Show authenticating state
-  return (
-    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
-      <div className="text-center">
-        <div className="animate-spin mb-4">
-          <LockIcon className="h-12 w-12 text-white mx-auto" />
-        </div>
-        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
-        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
-      </div>
-    </div>
-  );
-}
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LockIcon } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { usePartnerOrigin } from '../hooks/usePartnerOrigin';
+import { useModal } from '@/lib/hooks/useModal';
+
+export default function CloudLoginPage() {
+  const navigate = useNavigate();
+  const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
+  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
+  const { isPartnerOrigin } = usePartnerOrigin();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const { setOnboardingModalOpen } = useModal();
+  // Handle authorization code from postMessage
+  const onAuthorizationCodeReceived = useCallback(
+    async (event: MessageEvent) => {
+      try {
+        // Validate origin - allow insforge.dev, *.insforge.dev, and partner domains
+        const isInsforgeOrigin =
+          event.origin.endsWith('.insforge.dev') || event.origin === 'https://insforge.dev';
+
+        if (!isInsforgeOrigin) {
+          const isPartner = await isPartnerOrigin(event.origin);
+          if (!isPartner) {
+            console.warn('Received message from unauthorized origin:', event.origin);
+            return;
+          }
+        }
+
+        const authorizationCode = event.data.code;
+
+        setAuthError(null);
+        // Exchange the authorization code for an access token
+        const success = await loginWithAuthorizationCode(authorizationCode);
+        if (success) {
+          // Notify parent of success
+          postMessageToParent(
+            {
+              type: 'AUTH_SUCCESS',
+            },
+            event.origin
+          );
+        } else {
+          setAuthError('The authorization code may have expired or already been used.');
+          postMessageToParent(
+            {
+              type: 'AUTH_ERROR',
+              message: 'Authorization code validation failed',
+            },
+            event.origin
+          );
+        }
+      } catch (error) {
+        console.error('Authorization code exchange failed:', error);
+        setAuthError('The authorization code may have expired or already been used.');
+        postMessageToParent(
+          {
+            type: 'AUTH_ERROR',
+            message: 'Authorization code validation failed',
+          },
+          event.origin
+        );
+      }
+    },
+    [loginWithAuthorizationCode, isPartnerOrigin]
+  );
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'AUTHORIZATION_CODE' && event.data?.code) {
+        void onAuthorizationCodeReceived(event);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [onAuthorizationCodeReceived]);
+
+  useEffect(() => {
+    if (isAuthenticated && !isMcpUsageLoading) {
+      if (!hasCompletedOnboarding) {
+        setOnboardingModalOpen(true);
+      }
+      void navigate('/dashboard', { replace: true });
+    }
+  }, [
+    hasCompletedOnboarding,
+    isAuthenticated,
+    isMcpUsageLoading,
+    navigate,
+    setOnboardingModalOpen,
+  ]);
+
+  // Show error state if authentication failed
+  if (authError) {
+    return (
+      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+        <div className="text-center text-white">
+          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
+          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
+          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show authenticating state
+  return (
+    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+      <div className="text-center">
+        <div className="animate-spin mb-4">
+          <LockIcon className="h-12 w-12 text-white mx-auto" />
+        </div>
+        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
+        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/logs/components/LogDetailPanel.tsx

@@ -0,0 +1,41 @@
+import { X } from 'lucide-react';
+import type { LogSchema } from '@insforge/shared-schemas';
+
+interface LogDetailPanelProps {
+  log: LogSchema | null;
+  onClose: () => void;
+}
+
+export function LogDetailPanel({ log, onClose }: LogDetailPanelProps) {
+  if (!log) {
+    return null;
+  }
+
+  // Format the log body as pretty JSON
+  const formattedContent = JSON.stringify(log.body, null, 2);
+
+  return (
+    <div className="flex flex-col h-full bg-gray-100 dark:bg-neutral-700 border border-gray-300 dark:border-neutral-600 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-300 dark:border-neutral-600">
+        <p className="text-sm text-gray-600 dark:text-neutral-300 font-normal leading-6">
+          Log Content
+        </p>
+        <button
+          onClick={onClose}
+          className="p-1 hover:bg-gray-200 dark:hover:bg-neutral-600 rounded transition-colors"
+          aria-label="Close panel"
+        >
+          <X className="w-4 h-4 text-gray-500 dark:text-neutral-400" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-3">
+        <pre className="text-sm text-gray-900 dark:text-white font-normal leading-6 whitespace-pre-wrap break-all font-mono">
+          {formattedContent}
+        </pre>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/logs/components/LogsDataGrid.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import {
   DataGrid,
   type DataGridProps,
@@ -6,6 +6,7 @@ import {
   type DataGridColumn,
   type DataGridRowType,
 } from '@/components/datagrid';
+import type { CellClickArgs, CellMouseEvent } from 'react-data-grid';
 
 // Column definition type for LogsDataGrid
 export interface LogsColumnDef {
@@ -52,6 +53,9 @@ export interface LogsDataGridProps<T = Record<string, unknown>>
   columnDefs: LogsColumnDef[];
   data: T[];
   noPadding?: boolean;
+  selectedRowId?: string | null;
+  onRowClick?: (row: T) => void;
+  rightPanel?: React.ReactNode;
 }
 
 // Specialized DataGrid for logs
@@ -59,6 +63,9 @@ export function LogsDataGrid<T = Record<string, unknown>>({
   columnDefs,
   data,
   noPadding,
+  selectedRowId,
+  onRowClick,
+  rightPanel,
   ...restProps
 }: LogsDataGridProps<T>) {
   const columns = useMemo(() => {
@@ -76,6 +83,27 @@ export function LogsDataGrid<T = Record<string, unknown>>({
     }) as DataGridRowType[];
   }, [data]);
 
+  // Handle cell click to trigger row click
+  const handleCellClick = useCallback(
+    (args: CellClickArgs<DataGridRowType>, _event: CellMouseEvent) => {
+      if (onRowClick) {
+        onRowClick(args.row as T);
+      }
+    },
+    [onRowClick]
+  );
+
+  // Row class for highlighting selected row
+  const rowClass = useCallback(
+    (row: DataGridRowType) => {
+      if (selectedRowId && row.id === selectedRowId) {
+        return 'bg-gray-200 dark:bg-neutral-700';
+      }
+      return '';
+    },
+    [selectedRowId]
+  );
+
   return (
     <DataGrid<DataGridRowType>
       {...restProps}
@@ -84,6 +112,9 @@ export function LogsDataGrid<T = Record<string, unknown>>({
       showSelection={false}
       showPagination={true}
       noPadding={noPadding}
+      onCellClick={handleCellClick}
+      rowClass={rowClass}
+      rightPanel={rightPanel}
     />
   );
 }

package/frontend/src/features/logs/components/index.ts

@@ -1,2 +1,3 @@
 export { createLogsColumns, type LogsColumnDef } from './LogsDataGrid';
 export { SeverityBadge } from './SeverityBadge';
+export { LogDetailPanel } from './LogDetailPanel';

package/frontend/src/features/logs/pages/LogsPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState, useCallback, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { ChevronDown } from 'lucide-react';
 import { useLogs } from '../hooks/useLogs';
@@ -13,6 +13,7 @@ import {
 } from '@/components';
 import { LogsDataGrid, type LogsColumnDef } from '../components/LogsDataGrid';
 import { SeverityBadge } from '../components/SeverityBadge';
+import { LogDetailPanel } from '../components/LogDetailPanel';
 import { SEVERITY_OPTIONS, LOGS_PAGE_SIZE } from '../helpers';
 import { formatTime } from '@/lib/utils/utils';
 import { LogSchema } from '@insforge/shared-schemas';
@@ -21,6 +22,9 @@ export default function LogsPage() {
   // Get the source from the URL params
   const { source = 'insforge.logs' } = useParams<{ source?: string }>();
 
+  // Selected log state for detail panel
+  const [selectedLog, setSelectedLog] = useState<LogSchema | null>(null);
+
   const {
     logs: paginatedLogs,
     filteredLogs,
@@ -36,12 +40,29 @@ export default function LogsPage() {
     getSeverity,
   } = useLogs(source);
 
+  // Close detail panel when switching log sources or changing filters
+  useEffect(() => {
+    setSelectedLog(null);
+  }, [source, severityFilter]);
+
+  // Handle row click to show log details
+  const handleRowClick = useCallback((log: LogSchema) => {
+    setSelectedLog(log);
+  }, []);
+
+  // Handle closing the detail panel
+  const handleClosePanel = useCallback(() => {
+    setSelectedLog(null);
+  }, []);
+
+  // Adjust column widths based on panel state
   const logsColumns: LogsColumnDef[] = useMemo(
     () => [
       {
         key: 'event_message',
         name: 'Logs',
-        width: '10fr',
+        width: selectedLog ? '1fr' : '5fr',
+        minWidth: 200,
         renderCell: ({ row }) => (
           <p className="text-sm text-gray-900 dark:text-white font-normal leading-6 truncate">
             {String(row.eventMessage ?? '')}
@@ -51,7 +72,7 @@ export default function LogsPage() {
       {
         key: 'severity',
         name: 'Severity',
-        width: '120px',
+        width: '100px',
         renderCell: ({ row }) => (
           <SeverityBadge severity={getSeverity(row as unknown as LogSchema)} />
         ),
@@ -59,7 +80,7 @@ export default function LogsPage() {
       {
         key: 'timestamp',
         name: 'Time',
-        width: 'minmax(200px, 1fr)',
+        width: '200px',
         renderCell: ({ row }) => (
           <p className="text-sm text-gray-900 dark:text-white font-normal leading-6 flex-1">
             {formatTime(String(row.timestamp ?? ''))}
@@ -67,7 +88,7 @@ export default function LogsPage() {
         ),
       },
     ],
-    [getSeverity]
+    [getSeverity, selectedLog]
   );
 
   return (
@@ -121,7 +142,7 @@ export default function LogsPage() {
         </div>
       </div>
 
-      {/* Table with Pagination */}
+      {/* Table with Detail Panel */}
       <div className="flex-1 overflow-hidden">
         {logsError ? (
           <div className="flex items-center justify-center h-full">
@@ -137,6 +158,15 @@ export default function LogsPage() {
             pageSize={LOGS_PAGE_SIZE}
             totalRecords={filteredLogs.length}
             onPageChange={setCurrentPage}
+            selectedRowId={selectedLog?.id ?? null}
+            onRowClick={handleRowClick}
+            rightPanel={
+              selectedLog && (
+                <div className="w-[480px] h-full shrink-0">
+                  <LogDetailPanel log={selectedLog} onClose={handleClosePanel} />
+                </div>
+              )
+            }
             emptyState={
               <div className="text-sm text-zinc-500 dark:text-zinc-400">
                 {logsSearchQuery || severityFilter.length < 3

package/frontend/src/features/onboard/components/ApiCredentialsSection.tsx

@@ -0,0 +1,59 @@
+import { CopyButton } from '@/components';
+import { cn } from '@/lib/utils/utils';
+
+interface CredentialRowProps {
+  label: string;
+  value: string;
+  isLoading?: boolean;
+}
+
+function CredentialRow({ label, value, isLoading = false }: CredentialRowProps) {
+  return (
+    <div className="flex items-center gap-4 min-w-0">
+      <span className="text-gray-900 dark:text-white text-sm leading-6 w-25 shrink-0">{label}</span>
+      <div
+        className={cn(
+          'flex-1 h-9 min-w-0 flex items-center justify-between gap-2 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-lg px-3 py-2',
+          isLoading && 'animate-pulse'
+        )}
+      >
+        <span className="text-gray-900 dark:text-white text-sm truncate min-w-0 flex-1">
+          {value}
+        </span>
+        <CopyButton
+          text={value}
+          disabled={isLoading}
+          showText={false}
+          className="h-6 w-6 p-1 min-w-0 shrink-0 text-black dark:text-white bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 border-none"
+        />
+      </div>
+    </div>
+  );
+}
+
+interface ApiCredentialsSectionProps {
+  apiKey: string;
+  appUrl: string;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function ApiCredentialsSection({
+  apiKey,
+  appUrl,
+  isLoading = false,
+  className,
+}: ApiCredentialsSectionProps) {
+  return (
+    <div className={cn('flex flex-col gap-6', className)}>
+      <p className="text-gray-500 dark:text-neutral-400 text-base leading-7">
+        Use the project URL and API key to connect directly via REST API or any HTTP client.
+      </p>
+
+      <div className="flex flex-col gap-4">
+        <CredentialRow label="Project URL" value={appUrl} isLoading={isLoading} />
+        <CredentialRow label="API Key" value={apiKey} isLoading={isLoading} />
+      </div>
+    </div>
+  );
+}