feat: add sliding container infrastructure to playgroundComponent

- Move sliding container components to core/playgroundComponent/sliding-container
- Add sliding container store for state management
- Add playground button integration
- Add basic FlowPage integration with placeholder content
- Sliding panel is testable: opens/closes, resizes, fullscreen works

src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx

@@ -1,7 +1,9 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { PlaygroundButtonSliding } from "@/components/core/playgroundComponent/sliding-container/components";
 import { PLAYGROUND_BUTTON_NAME } from "@/constants/constants";
-import { CustomIOModal } from "@/customization/components/custom-new-modal";
+// Will be reverted before merging this PR - IOModal commented out to test sliding container
+// import { CustomIOModal } from "@/customization/components/custom-new-modal";
 import { ENABLE_PUBLISH } from "@/customization/feature-flags";
 
 interface PlaygroundButtonProps {
@@ -49,22 +51,26 @@ const PlaygroundButton = ({
   setOpen,
   canvasOpen,
 }: PlaygroundButtonProps) => {
-  return hasIO ? (
-    <CustomIOModal
-      open={open}
-      setOpen={setOpen}
-      disable={!hasIO}
-      canvasOpen={canvasOpen}
-    >
-      <ActiveButton />
-    </CustomIOModal>
-  ) : (
-    <ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
-      <div>
-        <DisabledButton />
-      </div>
-    </ShadTooltip>
-  );
+  // Will be reverted before merging this PR - IOModal commented out to test sliding container
+  // return hasIO ? (
+  //   <CustomIOModal
+  //     open={open}
+  //     setOpen={setOpen}
+  //     disable={!hasIO}
+  //     canvasOpen={canvasOpen}
+  //   >
+  //     <ActiveButton />
+  //   </CustomIOModal>
+  // ) : (
+  //   <ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
+  //     <div>
+  //       <DisabledButton />
+  //     </div>
+  //   </ShadTooltip>
+  // );
+
+  // New sliding container implementation for testing
+  return <PlaygroundButtonSliding hasIO={hasIO} />;
 };
 
 export default PlaygroundButton;

src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx

@@ -0,0 +1,17 @@
+import { useSlidingContainerStore } from "../stores/sliding-container-store";
+
+// Placeholder content for sliding container
+// This will be replaced with ChatHeader in the next PR
+function SlidingContainerPlaceholder() {
+  return (
+    <div className="h-full w-full bg-background border-l border-transparent shadow-lg flex items-center justify-center">
+      <p className="text-muted-foreground">
+        Sliding container - content coming soon
+      </p>
+    </div>
+  );
+}
+
+export function FlowPageSlidingContainerContent() {
+  return <SlidingContainerPlaceholder />;
+}

src/frontend/src/components/core/playgroundComponent/sliding-container/components/index.ts

@@ -0,0 +1,3 @@
+export { FlowPageSlidingContainerContent } from "./flow-page-sliding-container";
+export { PlaygroundButtonSliding } from "./playground-button-sliding";
+export { SlidingContainer } from "./sliding-container";

src/frontend/src/components/core/playgroundComponent/sliding-container/components/playground-button-sliding.tsx

@@ -0,0 +1,60 @@
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { PLAYGROUND_BUTTON_NAME } from "@/constants/constants";
+import { ENABLE_PUBLISH } from "@/customization/feature-flags";
+import { useSlidingContainerStore } from "../stores/sliding-container-store";
+
+interface PlaygroundButtonSlidingProps {
+  hasIO: boolean;
+}
+
+const STROKE_WIDTH = ENABLE_PUBLISH ? 2 : 1.5;
+const ICON_CLASS = "h-4 w-4 transition-all flex-shrink-0";
+
+export function PlaygroundButtonSliding({
+  hasIO,
+}: PlaygroundButtonSlidingProps) {
+  const toggle = useSlidingContainerStore((state) => state.toggle);
+  const isOpen = useSlidingContainerStore((state) => state.isOpen);
+  const width = useSlidingContainerStore((state) => state.width);
+  const iconName = isOpen ? "PanelRightClose" : "Play";
+
+  // Show label when slide container is closed (width === 0px or not open)
+  const showLabel = !isOpen || width === 0;
+
+  if (!hasIO) {
+    // For disabled state, always show label since container can't be opened
+    return (
+      <ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
+        <div
+          className="playground-btn-flow-toolbar cursor-not-allowed text-muted-foreground duration-150"
+          data-testid="playground-btn-flow-sliding"
+        >
+          <ForwardedIconComponent
+            name="Play"
+            className={ICON_CLASS}
+            strokeWidth={STROKE_WIDTH}
+          />
+          <span className="hidden md:block">{PLAYGROUND_BUTTON_NAME}</span>
+        </div>
+      </ShadTooltip>
+    );
+  }
+
+  return (
+    <div
+      onClick={toggle}
+      data-testid="playground-btn-flow-io-sliding"
+      className="playground-btn-flow-toolbar hover:bg-accent cursor-pointer"
+    >
+      <ForwardedIconComponent
+        name={iconName}
+        className={ICON_CLASS}
+        strokeWidth={STROKE_WIDTH}
+      />
+      {showLabel && (
+        <span className="hidden md:block">{PLAYGROUND_BUTTON_NAME}</span>
+      )}
+    </div>
+  );
+}

src/frontend/src/components/core/playgroundComponent/sliding-container/components/sliding-container.tsx

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/utils/utils";
+
+const DEFAULT_WIDTH = 400;
+const DEFAULT_DURATION = 300;
+
+interface SlidingContainerProps {
+  isOpen: boolean;
+  children: React.ReactNode;
+  className?: string;
+  width?: number;
+  onWidthChange?: (width: number) => void;
+  resizable?: boolean;
+  duration?: number;
+  isFullscreen?: boolean;
+}
+
+export function SlidingContainer({
+  isOpen,
+  children,
+  className,
+  width = DEFAULT_WIDTH,
+  onWidthChange,
+  resizable = false,
+  duration = DEFAULT_DURATION,
+  isFullscreen = false,
+}: SlidingContainerProps) {
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable || !isOpen) return;
+      e.preventDefault();
+      setIsResizing(true);
+    },
+    [resizable, isOpen],
+  );
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!onWidthChange) return;
+      const newWidth = window.innerWidth - e.clientX;
+      onWidthChange(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, onWidthChange]);
+
+  const actualWidth = isFullscreen ? "100%" : isOpen ? `${width}px` : "0px";
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative h-full overflow-hidden transition-all ease-in-out",
+        isResizing && "select-none",
+        className,
+      )}
+      style={{
+        width: actualWidth,
+        minWidth: actualWidth,
+        transitionDuration: isResizing ? "0ms" : `${duration}ms`,
+      }}
+    >
+      {resizable && isOpen && !isFullscreen && (
+        <div
+          onMouseDown={handleMouseDown}
+          className={cn(
+            "absolute left-0 top-0 z-10 h-full w-1 cursor-col-resize bg-transparent hover:bg-primary/20 transition-colors",
+            isResizing && "bg-primary/30",
+          )}
+          style={{ touchAction: "none" }}
+          aria-label="Resize panel"
+        />
+      )}
+      <div className="h-full w-full">{children}</div>
+    </div>
+  );
+}

src/frontend/src/components/core/playgroundComponent/sliding-container/stores/index.ts

@@ -0,0 +1,2 @@
+export type { SlidingContainerStoreType } from "./sliding-container-store";
+export { useSlidingContainerStore } from "./sliding-container-store";

src/frontend/src/components/core/playgroundComponent/sliding-container/stores/sliding-container-store.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+const MIN_WIDTH = 300;
+const MAX_WIDTH_RATIO = 0.8;
+const DEFAULT_WIDTH = 400;
+
+export interface SlidingContainerStoreType {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  toggle: () => void;
+  width: number;
+  setWidth: (width: number) => void;
+  isFullscreen: boolean;
+  setIsFullscreen: (isFullscreen: boolean) => void;
+  toggleFullscreen: () => void;
+}
+
+export const useSlidingContainerStore = create<SlidingContainerStoreType>(
+  (set) => ({
+    isOpen: false,
+    setIsOpen: (isOpen: boolean) => set({ isOpen }),
+    toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+    width: DEFAULT_WIDTH,
+    setWidth: (width: number) => {
+      const maxWidth = window.innerWidth * MAX_WIDTH_RATIO;
+      set({ width: Math.max(MIN_WIDTH, Math.min(maxWidth, width)) });
+    },
+    isFullscreen: false,
+    setIsFullscreen: (isFullscreen: boolean) => set({ isFullscreen }),
+    toggleFullscreen: () =>
+      set((state) => ({ isFullscreen: !state.isFullscreen })),
+  }),
+);

src/frontend/src/pages/FlowPage/index.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useState } from "react";
 import { useBlocker, useParams } from "react-router-dom";
+import { SlidingContainer } from "@/components/core/playgroundComponent/sliding-container/components";
+import { FlowPageSlidingContainerContent } from "@/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container";
+import { useSlidingContainerStore } from "@/components/core/playgroundComponent/sliding-container/stores";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { useGetFlow } from "@/controllers/API/queries/flows/use-get-flow";
 import { useGetTypes } from "@/controllers/API/queries/flows/use-get-types";
@@ -162,6 +165,19 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   const isMobile = useIsMobile();
 
+  // Sliding container state - Will be reverted before merging this PR
+  const isSlidingContainerOpen = useSlidingContainerStore(
+    (state) => state.isOpen,
+  );
+  const slidingContainerWidth = useSlidingContainerStore(
+    (state) => state.width,
+  );
+  const setSlidingContainerWidth = useSlidingContainerStore(
+    (state) => state.setWidth,
+  );
+  const isFullscreen = useSlidingContainerStore((state) => state.isFullscreen);
+  const hasIO = useFlowStore((state) => state.hasIO);
+
   return (
     <>
       <div className="flow-page-positioning">
@@ -173,11 +189,66 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
               segmentedSidebar={ENABLE_NEW_SIDEBAR}
             >
               <FlowSearchProvider>
-                {!view && <FlowSidebarComponent isLoading={isLoading} />}
+                {!view && !isFullscreen && (
+                  <FlowSidebarComponent isLoading={isLoading} />
+                )}
+                {/* Will be reverted before merging this PR - Original main layout */}
+                {/* <main className="flex w-full overflow-hidden relative">
+                  {!isFullscreen && (
+                    <div className="h-full w-full">
+                      <Page setIsLoading={setIsLoading} />
+                    </div>
+                  )}
+                  {hasIO && (
+                    <SlidingContainer
+                      isOpen={isSlidingContainerOpen}
+                      width={slidingContainerWidth}
+                      onWidthChange={setSlidingContainerWidth}
+                      resizable={!isFullscreen}
+                      isFullscreen={isFullscreen}
+                      className={
+                        !isFullscreen
+                          ? "absolute right-0 top-0 bottom-0 z-40"
+                          : ""
+                      }
+                    >
+                      <FlowPageSlidingContainerContent />
+                    </SlidingContainer>
+                  )}
+                </main> */}
+                {/* Will be reverted before merging this PR - New side-by-side layout */}
                 <main className="flex w-full overflow-hidden">
-                  <div className="h-full w-full">
-                    <Page setIsLoading={setIsLoading} />
-                  </div>
+                  {!isFullscreen && (
+                    <div
+                      className="h-full overflow-hidden"
+                      style={{
+                        width:
+                          hasIO && isSlidingContainerOpen
+                            ? `calc(100% - ${slidingContainerWidth}px)`
+                            : "100%",
+                        minWidth: 0,
+                        padding: "0.5rem",
+                      }}
+                    >
+                      <Page setIsLoading={setIsLoading} />
+                    </div>
+                  )}
+                  {hasIO && (
+                    <SlidingContainer
+                      isOpen={isSlidingContainerOpen}
+                      width={slidingContainerWidth}
+                      onWidthChange={setSlidingContainerWidth}
+                      resizable={!isFullscreen}
+                      isFullscreen={isFullscreen}
+                      className={
+                        isFullscreen
+                          ? "fixed top-[48px] left-0 right-0 bottom-0 z-50 bg-background"
+                          : ""
+                      }
+                    >
+                      <FlowPageSlidingContainerContent />
+                    </SlidingContainer>
+                  )}
                 </main>
               </FlowSearchProvider>
             </SidebarProvider>