insforge 1.2.10 → 1.4.8

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/hooks/useMcpUsage.ts

@@ -1,40 +1,27 @@
-import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useSocket, ServerEvents } from '@/lib/contexts/SocketContext';
+import { useMemo, useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { usageService, McpUsageRecord } from '@/features/logs/services/usage.service';
 import { isInsForgeCloudProject } from '@/lib/utils/utils';
-import { LOGS_PAGE_SIZE } from '../helpers';
 import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface McpConnectedPayload {
-  tool_name: string;
-  created_at: string;
-}
+import { LOGS_PAGE_SIZE } from '../helpers';
 
 // ============================================================================
 // Main Hook
 // ============================================================================
 
 /**
- * Hook to manage MCP usage data and real-time updates
+ * Hook to manage MCP usage data
  *
  * Features:
- * - Fetches initial MCP logs from backend
- * - Listens to real-time socket updates for new MCP calls
- * - Invalidates queries on WebSocket events to refetch latest data
+ * - Fetches MCP logs from backend
  * - Provides helper functions for data access
- * - Handles parent window communication for onboarding (if in iframe)
+ * - Handles initial parent window notification for onboarding (if in iframe)
  * - Supports search and pagination
+ *
  */
 export function useMcpUsage() {
   // Hooks
-  const queryClient = useQueryClient();
-  const { socket, isConnected } = useSocket();
   const { isAuthenticated } = useAuth();
 
   // State
@@ -100,54 +87,14 @@ export function useMcpUsage() {
     hasNotifiedInitialStatus.current = true;
 
     const latestRecord = records[0];
-    window.parent.postMessage(
-      {
-        type: 'MCP_CONNECTION_STATUS',
-        connected: true,
-        tool_name: latestRecord.tool_name,
-        timestamp: latestRecord.created_at,
-      },
-      '*'
-    );
+    postMessageToParent({
+      type: 'MCP_CONNECTION_STATUS',
+      connected: true,
+      tool_name: latestRecord.tool_name,
+      timestamp: latestRecord.created_at,
+    });
   }, [isLoading, records]);
 
-  // Handle real-time MCP connection events from socket
-  const handleMcpConnected = useCallback(
-    (data: { id: string; payload: McpConnectedPayload; timestamp: number; type: string }) => {
-      // Notify parent window with latest MCP call info
-      if (window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'MCP_CONNECTION_STATUS',
-            connected: true,
-            tool_name: data.payload.tool_name,
-            timestamp: data.payload.created_at,
-          },
-          '*'
-        );
-        if (!records.length) {
-          postMessageToParent({ type: 'ONBOARDING_SUCCESS' });
-        }
-      }
-      // Invalidate query to refetch latest data (follows codebase pattern)
-      void queryClient.invalidateQueries({ queryKey: ['mcp-usage'] });
-    },
-    [queryClient, records.length]
-  );
-
-  // Subscribe to socket MCP connection events
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    socket.on(ServerEvents.MCP_CONNECTED, handleMcpConnected);
-
-    return () => {
-      socket.off(ServerEvents.MCP_CONNECTED, handleMcpConnected);
-    };
-  }, [socket, isConnected, handleMcpConnected]);
-
   // Computed values
   const hasCompletedOnboarding = useMemo(() => !!records.length, [records]);
   const recordsCount = useMemo(() => records.length, [records]);

package/frontend/src/features/logs/{page → 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>
+  );
+}

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

@@ -0,0 +1,180 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { CopyButton, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components';
+import { ShowPasswordButton } from './ShowPasswordButton';
+import { useDatabaseConnectionString, useDatabasePassword } from '@/lib/hooks/useMetadata';
+import { cn } from '@/lib/utils/utils';
+
+interface ParameterRowProps {
+  label: string;
+  value: string | number | undefined;
+  copyValue?: string;
+}
+
+const RESET_TIMEOUT_MS = 2000;
+
+function ParameterRow({ label, value, copyValue }: ParameterRowProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const textToCopy = copyValue ?? String(value ?? '');
+  const displayValue = value ?? '-';
+  const hasCopyableValue = value !== undefined && value !== null && value !== '';
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    if (!hasCopyableValue) {
+      return;
+    }
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    navigator.clipboard
+      .writeText(textToCopy)
+      .then(() => {
+        setCopied(true);
+        timeoutRef.current = setTimeout(() => {
+          setCopied(false);
+          timeoutRef.current = null;
+        }, RESET_TIMEOUT_MS);
+      })
+      .catch((error) => {
+        console.error('Failed to copy to clipboard:', error);
+      });
+  }, [hasCopyableValue, textToCopy]);
+
+  return (
+    <div className="group flex items-center gap-2">
+      <span className="text-gray-400 dark:text-neutral-500 text-sm">{label}:</span>
+      <TooltipProvider>
+        <Tooltip open={copied}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                'text-gray-700 dark:text-neutral-300 text-sm',
+                hasCopyableValue &&
+                  'cursor-pointer hover:text-gray-900 dark:hover:text-neutral-100 transition-colors'
+              )}
+              disabled={!hasCopyableValue}
+              aria-label={`Copy ${label}`}
+              onClick={handleCopy}
+            >
+              {displayValue}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top" sideOffset={4}>
+            <p className="font-medium text-xs leading-5">Copied</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {hasCopyableValue && (
+        <CopyButton
+          text={textToCopy}
+          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 opacity-0 group-hover:opacity-100 transition-opacity"
+        />
+      )}
+    </div>
+  );
+}
+
+interface ConnectionStringSectionProps {
+  className?: string;
+}
+
+export function ConnectionStringSection({ className }: ConnectionStringSectionProps) {
+  const [showConnectionPassword, setShowConnectionPassword] = useState(false);
+  const [showParamsPassword, setShowParamsPassword] = useState(false);
+
+  const { connectionData, isLoading: isConnectionLoading } = useDatabaseConnectionString();
+  const { passwordData } = useDatabasePassword();
+
+  const dbParams = connectionData?.parameters;
+  const dbPassword = passwordData?.databasePassword || '';
+  const maskedPassword = dbParams?.password || '********';
+
+  const connectionStringDisplay = useMemo(() => {
+    if (!connectionData?.connectionURL) {
+      return '';
+    }
+    if (showConnectionPassword && dbPassword) {
+      return connectionData.connectionURL.replace('********', dbPassword);
+    }
+    return connectionData.connectionURL;
+  }, [connectionData?.connectionURL, showConnectionPassword, dbPassword]);
+
+  const connectionStringClipboard = useMemo(() => {
+    if (!connectionData?.connectionURL || !dbPassword) {
+      return connectionData?.connectionURL || '';
+    }
+    return connectionData.connectionURL.replace('********', dbPassword);
+  }, [connectionData?.connectionURL, dbPassword]);
+
+  return (
+    <div className={cn('flex flex-col gap-6', isConnectionLoading && 'animate-pulse', className)}>
+      <p className="text-gray-500 dark:text-neutral-400 text-base leading-7">
+        Ideal for applications with persistent and long-lived connections, such as those running on
+        virtual machines or long-standing containers.
+      </p>
+
+      {/* Connection String */}
+      <div className="bg-gray-100 dark:bg-neutral-900 rounded p-3">
+        <div className="flex items-center justify-between mb-2">
+          <div className="bg-gray-200 dark:bg-neutral-700 rounded px-2 h-5 flex items-center justify-center">
+            <span className="text-gray-700 dark:text-neutral-50 text-xs">connection string</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <ShowPasswordButton
+              show={showConnectionPassword}
+              onToggle={() => setShowConnectionPassword(!showConnectionPassword)}
+            />
+            <CopyButton
+              text={connectionStringClipboard}
+              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>
+        <p className="text-gray-700 dark:text-neutral-300 text-sm leading-6 break-words">
+          {connectionStringDisplay || 'Loading...'}
+        </p>
+      </div>
+
+      <div className="h-px bg-gray-200 dark:bg-neutral-700" />
+
+      {/* Parameters */}
+      <div className="bg-gray-100 dark:bg-neutral-900 rounded p-3">
+        <div className="flex items-center justify-between mb-4">
+          <div className="bg-gray-200 dark:bg-neutral-700 rounded px-2 h-5 flex items-center justify-center">
+            <span className="text-gray-700 dark:text-neutral-50 text-xs">parameters</span>
+          </div>
+          <ShowPasswordButton
+            show={showParamsPassword}
+            onToggle={() => setShowParamsPassword(!showParamsPassword)}
+          />
+        </div>
+        <div className="flex flex-col gap-3">
+          <ParameterRow label="HOST" value={dbParams?.host} />
+          <ParameterRow label="DATABASE" value={dbParams?.database} />
+          <ParameterRow label="USER" value={dbParams?.user} />
+          <ParameterRow label="PORT" value={dbParams?.port} />
+          <ParameterRow
+            label="PASSWORD"
+            value={showParamsPassword ? dbPassword || maskedPassword : maskedPassword}
+            copyValue={dbPassword || maskedPassword}
+          />
+          <ParameterRow label="SSL" value={dbParams?.sslmode} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,159 @@
+import { useState, useMemo } from 'react';
+import { ChevronDown } from 'lucide-react';
+import {
+  CodeBlock,
+  CopyButton,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components';
+import { CursorDeeplinkGenerator } from './mcp/CursorDeeplinkGenerator';
+import { QoderDeeplinkGenerator } from './mcp/QoderDeeplinkGenerator';
+import { MCP_AGENTS, GenerateInstallCommand, createMCPConfig, type MCPAgent } from './mcp/helpers';
+import { cn } from '@/lib/utils/utils';
+
+interface McpConnectionSectionProps {
+  apiKey: string;
+  appUrl: string;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function McpConnectionSection({
+  apiKey,
+  appUrl,
+  isLoading = false,
+  className,
+}: McpConnectionSectionProps) {
+  const [selectedAgent, setSelectedAgent] = useState<MCPAgent>(MCP_AGENTS[0]);
+
+  const installCommand = useMemo(() => {
+    return GenerateInstallCommand(selectedAgent, apiKey);
+  }, [selectedAgent, apiKey]);
+
+  const mcpJsonConfig = useMemo(() => {
+    const config = createMCPConfig(apiKey, 'macos-linux', appUrl);
+    return JSON.stringify(config, null, 2);
+  }, [apiKey, appUrl]);
+
+  const testPrompt =
+    "I'm using InsForge as my backend platform, call InsForge MCP's fetch-docs tool to learn about InsForge instructions.";
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)}>
+      <p className="text-gray-500 dark:text-neutral-400 text-base leading-7">
+        Install the MCP server so your coding agent can access and build the backend.
+      </p>
+
+      {/* Agent Selector Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="w-40 bg-gray-100 dark:bg-[rgba(0,0,0,0.12)] border border-gray-300 dark:border-[rgba(255,255,255,0.24)] rounded flex items-center justify-between px-2 py-1 cursor-pointer">
+            <div className="flex items-center gap-2">
+              {selectedAgent.logo && (
+                <div className="w-6 h-6 flex items-center justify-center">{selectedAgent.logo}</div>
+              )}
+              <span className="text-gray-900 dark:text-white text-sm font-medium">
+                {selectedAgent.displayName}
+              </span>
+            </div>
+            <ChevronDown className="w-5 h-5 text-gray-400 dark:text-neutral-400" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="w-40 bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 rounded shadow-lg p-0"
+        >
+          {MCP_AGENTS.map((agent) => (
+            <DropdownMenuItem
+              key={agent.id}
+              onSelect={() => setSelectedAgent(agent)}
+              className="flex items-center gap-2 px-2 py-2 text-gray-900 dark:text-white text-sm hover:bg-gray-100 dark:hover:bg-neutral-700 cursor-pointer"
+            >
+              {agent.logo && (
+                <div className="w-6 h-6 flex items-center justify-center">{agent.logo}</div>
+              )}
+              <span className="font-medium">{agent.displayName}</span>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Step 1 - Conditional based on agent */}
+      {selectedAgent.id === 'cursor' ? (
+        <div className="flex flex-col gap-3">
+          <p className="text-gray-900 dark:text-white text-sm">
+            <span className="font-semibold leading-5">1.</span>
+            <span className="leading-6"> Install in one click</span>
+          </p>
+          <div className="w-fit">
+            <CursorDeeplinkGenerator apiKey={apiKey} os="macos-linux" />
+          </div>
+        </div>
+      ) : selectedAgent.id === 'qoder' ? (
+        <div className="flex flex-col gap-3">
+          <p className="text-gray-900 dark:text-white text-sm">
+            <span className="font-semibold leading-5">1.</span>
+            <span className="leading-6"> Install in one click</span>
+          </p>
+          <div className="w-fit">
+            <QoderDeeplinkGenerator apiKey={apiKey} os="macos-linux" />
+          </div>
+        </div>
+      ) : selectedAgent.id === 'mcp' ? (
+        <div className="flex flex-col gap-3">
+          <p className="text-gray-900 dark:text-white text-sm">
+            <span className="font-semibold leading-5">1.</span>
+            <span className="leading-6">
+              {' '}
+              Copy the configuration below and add it to your AI assistant.
+            </span>
+          </p>
+          <div className="bg-gray-100 dark:bg-neutral-900 rounded overflow-hidden flex flex-col h-[320px] w-full">
+            {/* Header - fixed at top */}
+            <div className="bg-gray-100 dark:bg-neutral-900 flex items-center justify-between p-3">
+              <div className="bg-gray-200 dark:bg-neutral-700 rounded px-2">
+                <span className="text-gray-700 dark:text-neutral-50 text-xs">
+                  MCP Configuration
+                </span>
+              </div>
+              <CopyButton
+                text={mcpJsonConfig}
+                showText={false}
+                className="h-6 w-6 p-1 bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 border-none rounded-md shadow-sm min-w-0 text-black dark:text-white"
+              />
+            </div>
+            {/* Scrollable content */}
+            <div className="flex-1 overflow-auto p-3">
+              <pre className="text-gray-700 dark:text-neutral-300 text-sm leading-6 m-0 whitespace-pre-wrap break-all">
+                <code>{mcpJsonConfig}</code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          <p className="text-gray-900 dark:text-white text-sm">
+            <span className="font-semibold leading-5">1.</span>
+            <span className="leading-6"> Install in one click</span>
+          </p>
+          <CodeBlock
+            code={installCommand}
+            label="Terminal Command"
+            className={cn(isLoading && 'animate-pulse')}
+          />
+        </div>
+      )}
+
+      {/* Step 2 */}
+      <div className="flex flex-col gap-3">
+        <p className="text-gray-900 dark:text-white text-sm">
+          <span className="font-semibold leading-5">2.</span>
+          <span className="leading-6"> Check for connection using this prompt</span>
+        </p>
+        <CodeBlock code={testPrompt} label="prompt" className="bg-gray-100 dark:bg-neutral-900" />
+      </div>
+    </div>
+  );
+}