setup plugin routes

src/App.tsx

@@ -20,6 +20,7 @@ import StandaloneShellRouterAdapter from '@/components/standalone-shell/view/Sta
 import FileTreeRouterAdapter from '@/components/file-tree/view/FileTreeRouterAdapter.js';
 import GitPanelRouterAdapter from '@/components/git-panel/view/GitPanelRouterAdapter.js';
 import { TaskMasterPanel } from '@/components/task-master/index.js';
+import PluginContentRouterAdapter from '@/components/plugins/view/PluginContentRouterAdapter.js';
 
 const isValidRouteTab = (value: string | undefined): boolean => {
   if (!value) {
@@ -124,6 +125,7 @@ const router = createBrowserRouter(
             { path: 'files', element: <FileTreeRouterAdapter /> },
             { path: 'git', element: <GitPanelRouterAdapter /> },
             { path: 'tasks', element: <TaskMasterPanel isVisible={true} /> },
+            { path: 'plugins', element: <PluginContentRouterAdapter /> },
             { path: ':tab', element: <WorkspaceTabRoute /> },
           ],
         },

src/components/plugins/view/PluginContentRouterAdapter.tsx

@@ -0,0 +1,102 @@
+/**
+ * This is for backward compatibility with the old setup that point to the standalone shell. 
+ * It fetches the project and session data based on the URL parameters and passes them to the StandaloneShell component. 
+ * If no valid parameters are found, it defaults to an empty project.
+ * 
+ * TODO: This adapter can be removed once all tabs use the updated projects and sessions format.
+ */
+
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import {
+    getProjectsInLegacyFormat,
+    getSessionInLegacyFormat,
+} from "@/components/refactored/sidebar/data/legacy-response-format-api.js";
+import { DEFAULT_PROJECT_FOR_EMPTY_SHELL } from "@/constants/config.js";
+import { Project, ProjectSession } from "@/types/app.js";
+import PluginTabContent from "@/components/plugins/view/PluginTabContent.js";
+
+export default function PluginContentRouterAdapter() {
+    const { sessionId, workspaceId } = useParams<{
+        sessionId?: string;
+        workspaceId?: string;
+    }>();
+
+    const [project, setProject] = useState<Project | null>(DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+    const [session, setSession] = useState<ProjectSession | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    // TODO: Get plugin name from the url params
+    const pluginName = new URLSearchParams(window.location.search).get('name') || '';
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const fetchProjectAndSession = async () => {
+            setLoading(true);
+
+            try {
+                if (workspaceId) {
+                    const fetchedProject = await getProjectsInLegacyFormat(workspaceId);
+
+                    if (!cancelled) {
+                        setProject(fetchedProject ?? DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+                        setSession(null);
+                    }
+
+                    return;
+                }
+
+                if (sessionId) {
+                    const result = await getSessionInLegacyFormat(sessionId);
+
+                    if (!cancelled) {
+                        if (result) {
+                            setProject(result.project ?? DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+                            setSession(result.session ?? null);
+                        } else {
+                            setProject(DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+                            setSession(null);
+                        }
+                    }
+
+                    return;
+                }
+
+                if (!cancelled) {
+                    setProject(DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+                    setSession(null);
+                }
+            } catch (error) {
+                console.error("Failed to fetch project/session:", error);
+
+                if (!cancelled) {
+                    setProject(DEFAULT_PROJECT_FOR_EMPTY_SHELL);
+                    setSession(null);
+                }
+            } finally {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        fetchProjectAndSession();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [sessionId, workspaceId]);
+
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <PluginTabContent
+            selectedProject={project}
+            selectedSession={session}
+            pluginName={pluginName}
+        />
+    );
+}