1

active-workflow-docs/CURRENT_WORKFLOW_STATUS.md

@@ -128,6 +128,33 @@ PLANNING → WRITER → OPTIMIZE → PUBLISH
 
 ## Current Workflow Details
 
+### Site Setup & Integration (New Flow)
+
+#### Step 1: Add Site (WordPress)
+- User adds a new WordPress site from the welcome screen or sites page
+- During site creation, user selects:
+  - **Industry**: From available industries (e.g., Technology, Healthcare, Finance)
+  - **Sectors**: Multiple sectors within the selected industry (e.g., SaaS, E-commerce, Mobile Apps)
+  - **Site Name**: Display name for the site
+  - **Website Address**: WordPress site URL
+- Site is created with industry and sectors already configured
+
+#### Step 2: Integrate Site
+- User is redirected to Site Settings → Integrations tab (`/sites/{id}/settings?tab=integrations`)
+- **API Key Generation**:
+  - User generates a unique API key for the site
+  - API key is displayed and can be copied
+  - Key is stored securely in the integration credentials
+- **Plugin Download**:
+  - User downloads the IGNY8 WP Bridge plugin directly from the page
+  - Plugin provides deeper WordPress integration than default WordPress app
+- **WordPress Configuration**:
+  - User enters WordPress site URL
+  - User enters WordPress username
+  - User enters Application Password (created in WordPress admin)
+  - User enables/disables integration and two-way sync
+- Integration is saved and connection is tested
+
 ### Phase 1: Planning
 - Keyword import and management
 - Auto-clustering (1 credit per 30 keywords)
@@ -146,7 +173,7 @@ PLANNING → WRITER → OPTIMIZE → PUBLISH
 - Apply improvements
 
 ### Phase 4: Publish
-- WordPress publishing
+- WordPress publishing (via IGNY8 WP Bridge plugin)
 - Site deployment (for IGNY8-hosted sites)
 - Content validation
 

frontend/src/components/onboarding/WorkflowGuide.tsx

@@ -178,9 +178,14 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
         onSiteAdded();
       }
       
-      // Dismiss guide and redirect to site settings with integrations tab
+      // Dismiss guide first, then navigate after a small delay to ensure state is updated
       await dismissGuide();
+      
+      // Use requestAnimationFrame to ensure DOM updates are complete before navigation
+      // This prevents React from being null during navigation
+      requestAnimationFrame(() => {
         navigate(`/sites/${newSite.id}/settings?tab=integrations`);
+      });
     } catch (error: any) {
       toast.error(`Failed to create site: ${error.message}`);
     } finally {

frontend/src/components/sites/WordPressIntegrationForm.tsx

@@ -0,0 +1,448 @@
+/**
+ * WordPress Integration Form Component
+ * Inline form for WordPress integration with API key generation and plugin download
+ */
+import React, { useState, useEffect } from 'react';
+import { Card } from '../ui/card';
+import Button from '../ui/button/Button';
+import Label from '../form/Label';
+import Input from '../form/input/Input';
+import Checkbox from '../form/input/Checkbox';
+import Alert from '../ui/alert/Alert';
+import { useToast } from '../ui/toast/ToastContainer';
+import { integrationApi, SiteIntegration } from '../../services/integration.api';
+import { 
+  Globe, 
+  Key, 
+  Download, 
+  Copy, 
+  CheckCircle, 
+  AlertCircle,
+  ExternalLink,
+  RefreshCw
+} from 'lucide-react';
+
+interface WordPressIntegrationFormProps {
+  siteId: number;
+  integration: SiteIntegration | null;
+  onIntegrationUpdate?: (integration: SiteIntegration) => void;
+}
+
+export default function WordPressIntegrationForm({
+  siteId,
+  integration,
+  onIntegrationUpdate,
+}: WordPressIntegrationFormProps) {
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+  const [generatingKey, setGeneratingKey] = useState(false);
+  const [apiKey, setApiKey] = useState<string>('');
+  const [apiKeyVisible, setApiKeyVisible] = useState(false);
+  const [formData, setFormData] = useState({
+    url: integration?.config_json?.site_url || '',
+    username: integration?.credentials_json?.username || '',
+    app_password: '',
+    is_active: integration?.is_active ?? true,
+    sync_enabled: integration?.sync_enabled ?? true,
+  });
+
+  useEffect(() => {
+    if (integration) {
+      setFormData({
+        url: integration.config_json?.site_url || '',
+        username: integration.credentials_json?.username || '',
+        app_password: '',
+        is_active: integration.is_active ?? true,
+        sync_enabled: integration.sync_enabled ?? true,
+      });
+      // Load API key if it exists
+      if (integration.credentials_json?.api_key) {
+        setApiKey(integration.credentials_json.api_key);
+      }
+    }
+  }, [integration]);
+
+  const handleGenerateApiKey = async () => {
+    try {
+      setGeneratingKey(true);
+      // Generate API key - format: igny8_site_{siteId}_{timestamp}_{random}
+      // This will be stored in the integration credentials
+      const timestamp = Date.now();
+      const random = Math.random().toString(36).substring(2, 15);
+      const token = `igny8_site_${siteId}_${timestamp}_${random}`;
+      setApiKey(token);
+      setApiKeyVisible(true);
+      toast.success('API key generated successfully. Make sure to save the integration to store this key.');
+    } catch (error: any) {
+      toast.error(`Failed to generate API key: ${error.message}`);
+    } finally {
+      setGeneratingKey(false);
+    }
+  };
+
+  const handleCopyApiKey = () => {
+    if (apiKey) {
+      navigator.clipboard.writeText(apiKey);
+      toast.success('API key copied to clipboard');
+    }
+  };
+
+  const handleDownloadPlugin = () => {
+    // TODO: Replace with actual plugin download URL
+    const pluginUrl = `https://github.com/igny8/igny8-wp-bridge/releases/latest/download/igny8-wp-bridge.zip`;
+    window.open(pluginUrl, '_blank');
+    toast.success('Plugin download started');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.url || !formData.username || !formData.app_password) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    if (!apiKey) {
+      toast.error('Please generate an API key first');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      // Save integration with API key in credentials
+      const updatedIntegration = await integrationApi.saveWordPressIntegration(siteId, {
+        url: formData.url,
+        username: formData.username,
+        app_password: formData.app_password,
+        api_key: apiKey, // Include API key in credentials
+        is_active: formData.is_active,
+        sync_enabled: formData.sync_enabled,
+      });
+      
+      if (onIntegrationUpdate) {
+        onIntegrationUpdate(updatedIntegration);
+      }
+      
+      toast.success('WordPress integration saved successfully');
+    } catch (error: any) {
+      toast.error(`Failed to save integration: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    if (!integration?.id) {
+      toast.error('Please save the integration first');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const result = await integrationApi.testIntegration(integration.id);
+      if (result.success) {
+        toast.success('Connection test successful');
+      } else {
+        toast.error(`Connection test failed: ${result.message}`);
+      }
+    } catch (error: any) {
+      toast.error(`Connection test failed: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
+          <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+        </div>
+        <div>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            WordPress Integration
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Connect your WordPress site using the IGNY8 WP Bridge plugin
+          </p>
+        </div>
+      </div>
+
+      {/* Integration Guide */}
+      <Alert
+        variant="info"
+        title="Integration Steps"
+        className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
+      >
+        <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-300">
+          <li>Generate an API key for your site</li>
+          <li>Download and install the IGNY8 WP Bridge plugin</li>
+          <li>Enter your WordPress site URL and credentials</li>
+          <li>Configure the plugin with your API key</li>
+        </ol>
+      </Alert>
+
+      {/* API Key Section */}
+      <Card className="p-6">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <Key className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                API Key
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Generate an API key to authenticate the WordPress plugin with IGNY8
+              </p>
+            </div>
+            <Button
+              onClick={handleGenerateApiKey}
+              variant="primary"
+              disabled={generatingKey || !!apiKey}
+            >
+              {generatingKey ? (
+                <>
+                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                  Generating...
+                </>
+              ) : apiKey ? (
+                <>
+                  <CheckCircle className="w-4 h-4 mr-2" />
+                  Generated
+                </>
+              ) : (
+                <>
+                  <Key className="w-4 h-4 mr-2" />
+                  Generate API Key
+                </>
+              )}
+            </Button>
+          </div>
+
+          {apiKey && (
+            <div className="space-y-3">
+              <div>
+                <Label>Your API Key</Label>
+                <div className="flex items-center gap-2 mt-1">
+                  <Input
+                    type={apiKeyVisible ? 'text' : 'password'}
+                    value={apiKey}
+                    readOnly
+                    className="font-mono text-sm"
+                  />
+                  <Button
+                    onClick={() => setApiKeyVisible(!apiKeyVisible)}
+                    variant="outline"
+                    size="sm"
+                  >
+                    {apiKeyVisible ? 'Hide' : 'Show'}
+                  </Button>
+                  <Button
+                    onClick={handleCopyApiKey}
+                    variant="outline"
+                    size="sm"
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  Keep this key secure. You'll need it to configure the WordPress plugin.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Plugin Download Section */}
+      {apiKey && (
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                  <Download className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                  IGNY8 WP Bridge Plugin
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  Download and install the plugin on your WordPress site
+                </p>
+              </div>
+              <Button
+                onClick={handleDownloadPlugin}
+                variant="primary"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Download Plugin
+              </Button>
+            </div>
+
+            <Alert
+              variant="info"
+              className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
+            >
+              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                <p className="font-medium">Installation Instructions:</p>
+                <ol className="list-decimal list-inside space-y-1 ml-2">
+                  <li>Download the plugin ZIP file</li>
+                  <li>Go to WordPress Admin → Plugins → Add New</li>
+                  <li>Click "Upload Plugin" and select the ZIP file</li>
+                  <li>Activate the plugin</li>
+                  <li>Go to Settings → IGNY8 Bridge and enter your API key</li>
+                </ol>
+              </div>
+            </Alert>
+          </div>
+        </Card>
+      )}
+
+      {/* WordPress Credentials Form */}
+      <Card className="p-6">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              WordPress Site Configuration
+            </h3>
+          </div>
+
+          <div>
+            <Label htmlFor="url" required>
+              WordPress Site URL
+            </Label>
+            <Input
+              id="url"
+              type="url"
+              value={formData.url}
+              onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+              placeholder="https://example.com"
+              required
+              className="mt-1"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Enter your WordPress site URL (with https://)
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="username" required>
+              WordPress Username
+            </Label>
+            <Input
+              id="username"
+              type="text"
+              value={formData.username}
+              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              placeholder="admin"
+              required
+              className="mt-1"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              WordPress administrator username
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="app_password" required>
+              Application Password
+            </Label>
+            <Input
+              id="app_password"
+              type="password"
+              value={formData.app_password}
+              onChange={(e) => setFormData({ ...formData, app_password: e.target.value })}
+              placeholder="xxxx xxxx xxxx xxxx xxxx xxxx"
+              required
+              className="mt-1"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Create an Application Password in WordPress: Users → Profile → Application Passwords
+            </p>
+          </div>
+
+          <div className="space-y-3 pt-2 border-t border-gray-200 dark:border-gray-700">
+            <Checkbox
+              id="is_active"
+              checked={formData.is_active}
+              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              label="Enable Integration"
+            />
+            <Checkbox
+              id="sync_enabled"
+              checked={formData.sync_enabled}
+              onChange={(e) => setFormData({ ...formData, sync_enabled: e.target.checked })}
+              label="Enable Two-Way Sync"
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+            {integration && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleTestConnection}
+                disabled={loading}
+              >
+                <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+                Test Connection
+              </Button>
+            )}
+            <Button type="submit" variant="primary" disabled={loading || !apiKey}>
+              {loading ? 'Saving...' : integration ? 'Update Integration' : 'Connect WordPress'}
+            </Button>
+          </div>
+        </form>
+      </Card>
+
+      {/* Integration Status */}
+      {integration && (
+        <Card className="p-6">
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Integration Status
+            </h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Status</p>
+                <div className="flex items-center gap-2">
+                  {integration.is_active ? (
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                  ) : (
+                    <AlertCircle className="w-4 h-4 text-gray-400" />
+                  )}
+                  <span className="text-sm font-medium text-gray-900 dark:text-white">
+                    {integration.is_active ? 'Active' : 'Inactive'}
+                  </span>
+                </div>
+              </div>
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
+                <div className="flex items-center gap-2">
+                  {integration.sync_status === 'success' ? (
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                  ) : integration.sync_status === 'failed' ? (
+                    <AlertCircle className="w-4 h-4 text-red-500" />
+                  ) : (
+                    <RefreshCw className="w-4 h-4 text-yellow-500 animate-spin" />
+                  )}
+                  <span className="text-sm font-medium text-gray-900 dark:text-white capitalize">
+                    {integration.sync_status || 'Pending'}
+                  </span>
+                </div>
+              </div>
+            </div>
+            {integration.last_sync_at && (
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Last Sync</p>
+                <p className="text-sm text-gray-900 dark:text-white">
+                  {new Date(integration.last_sync_at).toLocaleString()}
+                </p>
+              </div>
+            )}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+

frontend/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, useEffect } from "react";
+import { createContext, useState, useContext, useEffect, type FC, type ReactNode } from "react";
 
 type Theme = "light" | "dark";
 
@@ -9,7 +9,7 @@ type ThemeContextType = {
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
-export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
+export const ThemeProvider: FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const [theme, setTheme] = useState<Theme>("light");

frontend/src/pages/Dashboard/Home.tsx

@@ -1187,7 +1187,7 @@ export default function Home() {
           </Link>
         </div>
       </ComponentCard>
-      
+      1
         {/* Key Metrics */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <EnhancedMetricCard

frontend/src/pages/Sites/Settings.tsx

@@ -15,8 +15,7 @@ import Checkbox from '../../components/form/input/Checkbox';
 import TextArea from '../../components/form/input/TextArea';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAPI } from '../../services/api';
-import WordPressIntegrationCard from '../../components/sites/WordPressIntegrationCard';
+import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
-import WordPressIntegrationModal, { WordPressIntegrationFormData } from '../../components/sites/WordPressIntegrationModal';
 import { integrationApi, SiteIntegration } from '../../services/integration.api';
 import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon } from '../../icons';
 
@@ -30,7 +29,6 @@ export default function SiteSettings() {
   const [site, setSite] = useState<any>(null);
   const [wordPressIntegration, setWordPressIntegration] = useState<SiteIntegration | null>(null);
   const [integrationLoading, setIntegrationLoading] = useState(false);
-  const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
 
   // Check for tab parameter in URL
   const initialTab = (searchParams.get('tab') as 'general' | 'seo' | 'og' | 'schema' | 'integrations') || 'general';
@@ -124,26 +122,11 @@ export default function SiteSettings() {
     }
   };
 
-  const handleSaveIntegration = async (data: WordPressIntegrationFormData) => {
+  const handleIntegrationUpdate = async (integration: SiteIntegration) => {
-    if (!siteId) return;
+    setWordPressIntegration(integration);
-    await integrationApi.saveWordPressIntegration(Number(siteId), data);
     await loadIntegrations();
   };
 
-  const handleSyncIntegration = async () => {
-    if (!wordPressIntegration || !siteId) return;
-    try {
-      setIntegrationLoading(true);
-      await integrationApi.syncIntegration(wordPressIntegration.id);
-      toast.success('Content synced successfully');
-      await loadIntegrations();
-    } catch (error: any) {
-      toast.error(`Failed to sync: ${error.message}`);
-    } finally {
-      setIntegrationLoading(false);
-    }
-  };
-
   const handleSave = async () => {
     try {
       setSaving(true);
@@ -553,17 +536,12 @@ export default function SiteSettings() {
         )}
 
         {/* Integrations Tab */}
-        {activeTab === 'integrations' && (
+        {activeTab === 'integrations' && siteId && (
-          <div className="space-y-6">
+          <WordPressIntegrationForm
-            <WordPressIntegrationCard
+            siteId={Number(siteId)}
             integration={wordPressIntegration}
-              onConnect={() => setIsIntegrationModalOpen(true)}
+            onIntegrationUpdate={handleIntegrationUpdate}
-              onManage={() => setIsIntegrationModalOpen(true)}
-              onSync={handleSyncIntegration}
-              loading={integrationLoading}
-              siteId={siteId}
           />
-          </div>
         )}
 
         {/* Save Button */}
@@ -576,26 +554,6 @@ export default function SiteSettings() {
         )}
       </div>
 
-      {/* WordPress Integration Modal */}
-      {siteId && (
-        <WordPressIntegrationModal
-          isOpen={isIntegrationModalOpen}
-          onClose={() => setIsIntegrationModalOpen(false)}
-          onSubmit={handleSaveIntegration}
-          siteId={Number(siteId)}
-          initialData={
-            wordPressIntegration
-              ? {
-                  url: wordPressIntegration.config_json?.site_url || '',
-                  username: wordPressIntegration.credentials_json?.username || '',
-                  app_password: '', // Never show password
-                  is_active: wordPressIntegration.is_active,
-                  sync_enabled: wordPressIntegration.sync_enabled,
-                }
-              : undefined
-          }
-        />
-      )}
     </div>
   );
 }

frontend/src/services/integration.api.ts

@@ -116,12 +116,23 @@ export const integrationApi = {
       url: string;
       username: string;
       app_password: string;
+      api_key?: string;
       is_active?: boolean;
       sync_enabled?: boolean;
     }
   ): Promise<SiteIntegration> {
     const existing = await this.getWordPressIntegration(siteId);
 
+    const credentials: Record<string, string> = {
+      username: data.username,
+      app_password: data.app_password,
+    };
+    
+    // Include API key if provided
+    if (data.api_key) {
+      credentials.api_key = data.api_key;
+    }
+
     const integrationData: CreateIntegrationData = {
       site: siteId,
       platform: 'wordpress',
@@ -129,10 +140,7 @@ export const integrationApi = {
       config_json: {
         site_url: data.url,
       },
-      credentials_json: {
+      credentials_json: credentials,
-        username: data.username,
-        app_password: data.app_password,
-      },
       is_active: data.is_active ?? true,
       sync_enabled: data.sync_enabled ?? true,
     };

frontend/vite.config.ts

@@ -106,6 +106,14 @@ export default defineConfig(({ mode, command }) => {
         },
       }),
     ],
+    // Resolve configuration to prevent duplicate React instances
+    resolve: {
+      dedupe: ['react', 'react-dom'],
+      alias: {
+        react: resolve(__dirname, 'node_modules/react'),
+        'react-dom': resolve(__dirname, 'node_modules/react-dom'),
+      },
+    },
     // Optimize dependency pre-bundling
     optimizeDeps: {
       include: [