insforge 1.3.0 → 1.4.8

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>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { useEffect, useCallback } from 'react';
+import { useModal } from '@/lib/hooks/useModal';
+import { parseCloudEvent } from '@/lib/utils/cloudMessaging';
+import { isIframe } from '@/lib/utils/utils';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { getOnboardingSkipped, setOnboardingSkipped } from './OnboardingModal';
+
+/**
+ * OnboardingController manages onboarding modal state:
+ * - Handles Cloud parent messages in iframe mode
+ * - Auto-opens onboarding for new users (non-iframe mode)
+ * - Auto-closes onboarding when MCP connection is established (all modes)
+ */
+export function OnboardingController() {
+  const { setOnboardingModalOpen } = useModal();
+  const { hasCompletedOnboarding, isLoading: isMcpLoading } = useMcpUsage();
+
+  // Handle messages from Cloud parent window (iframe mode only)
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      if (!isIframe()) {
+        return;
+      }
+
+      const result = parseCloudEvent(event.data);
+      if (!result.ok) {
+        return;
+      }
+
+      const cloudEvent = result.data;
+
+      switch (cloudEvent.type) {
+        case 'SHOW_ONBOARDING_OVERLAY':
+          setOnboardingModalOpen(true);
+          break;
+      }
+    },
+    [setOnboardingModalOpen]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handleMessage]);
+
+  // Auto-open onboarding modal for new users (non-iframe mode only)
+  // In iframe mode, Cloud controls when to show the modal via messages
+  useEffect(() => {
+    if (isIframe()) {
+      return;
+    }
+    if (!isMcpLoading && !hasCompletedOnboarding && !getOnboardingSkipped()) {
+      setOnboardingModalOpen(true);
+    }
+  }, [isMcpLoading, hasCompletedOnboarding, setOnboardingModalOpen]);
+
+  // Auto-close onboarding modal when MCP connection is established (all modes)
+  useEffect(() => {
+    if (!isMcpLoading && hasCompletedOnboarding) {
+      setOnboardingModalOpen(false);
+      setOnboardingSkipped(false);
+    }
+  }, [hasCompletedOnboarding, isMcpLoading, setOnboardingModalOpen]);
+
+  return null;
+}