feat: add plugin extension pages (iframe rendering, Page SDK, security hardening, i18n)

Co-Authored-By: Typer_Body <mcjiekejiemi@163.com>

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -92,6 +92,7 @@ import {
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
 import { useSidebarData, SidebarEntityItem } from './SidebarDataContext';
+import { LayoutDashboard } from 'lucide-react';
 
 // Compare two version strings, returns true if v1 > v2
 function compareVersions(v1: string, v2: string): boolean {
@@ -699,87 +700,103 @@ function NavItems({
           >
             <SidebarMenuItem>
               <SidebarMenuButton
+                asChild
                 isActive={false}
-                onClick={() => {
-                  if (isCollapseOnly) {
-                    onSectionToggle(config.id, !isOpen);
-                  } else {
-                    onChildClick(config);
-                  }
-                }}
                 tooltip={config.name}
                 className="group/category-header"
               >
-                {config.icon}
-                <span>{config.name}</span>
-                <div className="ml-auto flex items-center gap-0.5 -mr-1">
-                  {canCreate &&
-                    (isPlugin ? (
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <button
-                            type="button"
-                            className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [@media(hover:hover)]:opacity-0 group-hover/category-header:opacity-100 transition-all"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            <Plus className="size-3.5" />
-                          </button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          {systemInfo.enable_marketplace && (
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    if (isCollapseOnly) {
+                      onSectionToggle(config.id, !isOpen);
+                    } else {
+                      onChildClick(config);
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      if (isCollapseOnly) {
+                        onSectionToggle(config.id, !isOpen);
+                      } else {
+                        onChildClick(config);
+                      }
+                    }
+                  }}
+                >
+                  {config.icon}
+                  <span>{config.name}</span>
+                  <div className="ml-auto flex items-center gap-0.5 -mr-1">
+                    {canCreate &&
+                      (isPlugin ? (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button
+                              type="button"
+                              className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [@media(hover:hover)]:opacity-0 group-hover/category-header:opacity-100 transition-all"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <Plus className="size-3.5" />
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            {systemInfo.enable_marketplace && (
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  navigate('/home/market');
+                                }}
+                              >
+                                <Store className="size-4" />
+                                {t('plugins.goToMarketplace')}
+                              </DropdownMenuItem>
+                            )}
                             <DropdownMenuItem
                               onClick={(e) => {
                                 e.stopPropagation();
-                                navigate('/home/market');
+                                setPendingPluginInstallAction('local');
+                                navigate('/home/plugins');
                               }}
                             >
-                              <Store className="size-4" />
-                              {t('plugins.goToMarketplace')}
+                              <Upload className="size-4" />
+                              {t('plugins.uploadLocal')}
                             </DropdownMenuItem>
-                          )}
-                          <DropdownMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setPendingPluginInstallAction('local');
-                              navigate('/home/plugins');
-                            }}
-                          >
-                            <Upload className="size-4" />
-                            {t('plugins.uploadLocal')}
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setPendingPluginInstallAction('github');
-                              navigate('/home/plugins');
-                            }}
-                          >
-                            <Github className="size-4" />
-                            {t('plugins.installFromGithub')}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    ) : (
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setPendingPluginInstallAction('github');
+                                navigate('/home/plugins');
+                              }}
+                            >
+                              <Github className="size-4" />
+                              {t('plugins.installFromGithub')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      ) : (
+                        <button
+                          type="button"
+                          className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [@media(hover:hover)]:opacity-0 group-hover/category-header:opacity-100 transition-all"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`${routePrefix}?id=new`);
+                          }}
+                        >
+                          <Plus className="size-3.5" />
+                        </button>
+                      ))}
+                    <CollapsibleTrigger asChild>
                       <button
                         type="button"
-                        className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [@media(hover:hover)]:opacity-0 group-hover/category-header:opacity-100 transition-all"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate(`${routePrefix}?id=new`);
-                        }}
+                        className="p-1 rounded-sm hover:bg-sidebar-accent"
+                        onClick={(e) => e.stopPropagation()}
                       >
-                        <Plus className="size-3.5" />
+                        <ChevronRight className="size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                       </button>
-                    ))}
-                  <CollapsibleTrigger asChild>
-                    <button
-                      type="button"
-                      className="p-1 rounded-sm hover:bg-sidebar-accent"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <ChevronRight className="size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                    </button>
-                  </CollapsibleTrigger>
+                    </CollapsibleTrigger>
+                  </div>
                 </div>
               </SidebarMenuButton>
               <CollapsibleContent>
@@ -1023,6 +1040,47 @@ function PluginItemMenu({
   );
 }
 
+// Plugin pages navigation section
+function PluginPagesNav() {
+  const { pluginPages } = useSidebarData();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+
+  if (pluginPages.length === 0) return null;
+
+  const pathname = location.pathname;
+  const currentId =
+    pathname === '/home/plugin-pages' ? searchParams.get('id') : null;
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{t('sidebar.pluginPages')}</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {pluginPages.map((page) => {
+            const isActive = currentId === page.id;
+            const route = `/home/plugin-pages?id=${encodeURIComponent(page.id)}`;
+            return (
+              <SidebarMenuItem key={page.id}>
+                <SidebarMenuButton
+                  isActive={isActive}
+                  tooltip={page.name}
+                  onClick={() => navigate(route)}
+                >
+                  <LayoutDashboard className="size-4 text-blue-500" />
+                  <span>{page.name}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
+
 export default function HomeSidebar({
   onSelectedChangeAction,
 }: {
@@ -1285,6 +1343,7 @@ export default function HomeSidebar({
               </SidebarMenu>
             </SidebarGroupContent>
           </SidebarGroup>
+          <PluginPagesNav />
         </SidebarContent>
 
         {/* Footer */}

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -31,6 +31,17 @@ export interface SidebarEntityItem {
 // Install action types that can be triggered from sidebar
 export type PluginInstallAction = 'local' | 'github' | null;
 
+// Plugin page registered by a plugin
+export interface PluginPageItem {
+  id: string; // "author/name/pageId"
+  name: string; // display label
+  pluginAuthor: string;
+  pluginName: string;
+  pageId: string;
+  path: string; // asset path (HTML file)
+  icon?: string; // optional icon name
+}
+
 // Entity lists and refresh functions exposed via context
 export interface SidebarDataContextValue {
   bots: SidebarEntityItem[];
@@ -38,6 +49,7 @@ export interface SidebarDataContextValue {
   knowledgeBases: SidebarEntityItem[];
   plugins: SidebarEntityItem[];
   mcpServers: SidebarEntityItem[];
+  pluginPages: PluginPageItem[];
   refreshBots: () => Promise<void>;
   refreshPipelines: () => Promise<void>;
   refreshKnowledgeBases: () => Promise<void>;
@@ -64,6 +76,7 @@ export function SidebarDataProvider({
   const [knowledgeBases, setKnowledgeBases] = useState<SidebarEntityItem[]>([]);
   const [plugins, setPlugins] = useState<SidebarEntityItem[]>([]);
   const [mcpServers, setMCPServers] = useState<SidebarEntityItem[]>([]);
+  const [pluginPages, setPluginPages] = useState<PluginPageItem[]>([]);
   const [detailEntityName, setDetailEntityName] = useState<string | null>(null);
   const [pendingPluginInstallAction, setPendingPluginInstallAction] =
     useState<PluginInstallAction>(null);
@@ -137,33 +150,67 @@ export function SidebarDataProvider({
         }
       }
 
-      setPlugins(
-        pluginsResp.plugins.map((plugin) => {
-          const meta = plugin.manifest.manifest.metadata;
-          const author = meta.author ?? '';
-          const name = meta.name;
-          const compositeKey = `${author}/${name}`;
-          const installedVersion = meta.version ?? '';
+      // Deduplicate plugins by composite key (prefer debug over installed)
+      const pluginMap = new Map<string, SidebarEntityItem>();
+      for (const plugin of pluginsResp.plugins) {
+        const meta = plugin.manifest.manifest.metadata;
+        const author = meta.author ?? '';
+        const name = meta.name;
+        const compositeKey = `${author}/${name}`;
+        const installedVersion = meta.version ?? '';
 
-          let hasUpdate = false;
-          if (plugin.install_source === 'marketplace') {
-            const latestVersion = marketplaceVersions.get(compositeKey);
-            if (latestVersion) {
-              hasUpdate = isNewerVersion(latestVersion, installedVersion);
+        let hasUpdate = false;
+        if (plugin.install_source === 'marketplace') {
+          const latestVersion = marketplaceVersions.get(compositeKey);
+          if (latestVersion) {
+            hasUpdate = isNewerVersion(latestVersion, installedVersion);
+          }
+        }
+
+        const item: SidebarEntityItem = {
+          id: compositeKey,
+          name: extractI18nObject(meta.label),
+          iconURL: httpClient.getPluginIconURL(author, name),
+          installSource: plugin.install_source,
+          installInfo: plugin.install_info,
+          hasUpdate,
+          debug: plugin.debug,
+        };
+
+        // If duplicate, prefer debug version
+        if (!pluginMap.has(compositeKey) || plugin.debug) {
+          pluginMap.set(compositeKey, item);
+        }
+      }
+      setPlugins(Array.from(pluginMap.values()));
+
+      // Extract plugin pages from spec.pages (deduplicate by id)
+      const pages: PluginPageItem[] = [];
+      const seenPageIds = new Set<string>();
+      for (const plugin of pluginsResp.plugins) {
+        const meta = plugin.manifest.manifest.metadata;
+        const author = meta.author ?? '';
+        const name = meta.name;
+        const spec = plugin.manifest.manifest.spec;
+        if (spec?.pages && Array.isArray(spec.pages)) {
+          for (const page of spec.pages) {
+            const pageId = `${author}/${name}/${page.id}`;
+            if (page.id && page.path && !seenPageIds.has(pageId)) {
+              seenPageIds.add(pageId);
+              pages.push({
+                id: pageId,
+                name: page.label ? extractI18nObject(page.label) : page.id,
+                pluginAuthor: author,
+                pluginName: name,
+                pageId: page.id,
+                path: page.path,
+                icon: page.icon,
+              });
             }
           }
-
-          return {
-            id: compositeKey,
-            name: extractI18nObject(meta.label),
-            iconURL: httpClient.getPluginIconURL(author, name),
-            installSource: plugin.install_source,
-            installInfo: plugin.install_info,
-            hasUpdate,
-            debug: plugin.debug,
-          };
-        }),
-      );
+        }
+      }
+      setPluginPages(pages);
     } catch (error) {
       console.error('Failed to fetch plugins for sidebar:', error);
     }
@@ -214,6 +261,7 @@ export function SidebarDataProvider({
         knowledgeBases,
         plugins,
         mcpServers,
+        pluginPages,
         refreshBots,
         refreshPipelines,
         refreshKnowledgeBases,