From 31f6e2840f2b6d9f017ccbfd3985e4bb890d58f9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 14:21:23 +0000
Subject: [PATCH 1/5] Initial plan


From 6bce36188e123b0f39f9a3a6e3a58ab90c0c8efe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 14:36:06 +0000
Subject: [PATCH 2/5] Add preview panel feature to model gallery page

Co-authored-by: tjyyy3 <97741063+tjyyy3@users.noreply.github.com>
---
 app/components/gallery/ModelPreviewPanel.tsx | 192 +++++++++++++++++++
 app/components/ui/sheet.tsx                  | 114 +++++++++++
 app/gallery/page.tsx                         |  87 ++++++++-
 messages/en.json                             |   8 +-
 package.json                                 |   1 +
 yarn.lock                                    | 147 ++++++++++----
 6 files changed, 512 insertions(+), 37 deletions(-)
 create mode 100644 app/components/gallery/ModelPreviewPanel.tsx
 create mode 100644 app/components/ui/sheet.tsx

diff --git a/app/components/gallery/ModelPreviewPanel.tsx b/app/components/gallery/ModelPreviewPanel.tsx
new file mode 100644
index 00000000..4dca96e7
--- /dev/null
+++ b/app/components/gallery/ModelPreviewPanel.tsx
@@ -0,0 +1,192 @@
+// Copyright 2024 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+'use client';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { clsx } from 'clsx';
+import { ExternalLink } from 'lucide-react';
+import { useLang } from '@/app/context/LangContext';
+import { example } from '@/app/components/editor/casbin-mode/example';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/app/components/ui/sheet';
+
+interface ModelPreviewPanelProps {
+  modelKey: string | null;
+  modelName: string;
+  modelDescription: string;
+  modelCategory: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
+  modelKey,
+  modelName,
+  modelDescription,
+  modelCategory,
+  isOpen,
+  onClose,
+}) => {
+  const { theme, t } = useLang();
+  const router = useRouter();
+
+  const modelData = modelKey ? example[modelKey] : null;
+
+  const handleOpenInEditor = () => {
+    if (modelKey) {
+      router.push(`/?model=${modelKey}`);
+      onClose();
+    }
+  };
+
+  const textClass = clsx(theme === 'dark' ? 'text-gray-200' : 'text-gray-800');
+  const bgClass = clsx(theme === 'dark' ? 'bg-slate-900' : 'bg-white');
+  const sectionBgClass = clsx(theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50');
+  const borderClass = clsx(theme === 'dark' ? 'border-slate-700' : 'border-slate-200');
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        onClose();
+      }
+    }}>
+      <SheetContent side="right" className={clsx('overflow-y-auto', bgClass, textClass)}>
+        <SheetHeader className="mb-6">
+          <div className="flex items-center justify-between gap-4">
+            <SheetTitle className={clsx('text-2xl', textClass)}>{t(modelName)}</SheetTitle>
+            <span
+              className={clsx(
+                'px-3 py-1 text-sm font-medium rounded-lg',
+                'bg-primary/10 text-primary whitespace-nowrap',
+              )}
+            >
+              {t(modelCategory)}
+            </span>
+          </div>
+          <SheetDescription className={clsx('text-base', textClass, 'opacity-70')}>
+            {t(modelDescription)}
+          </SheetDescription>
+        </SheetHeader>
+
+        {modelData && (
+          <div className="space-y-6 pb-20">
+            {/* Model Configuration */}
+            <section>
+              <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                {t('Model Configuration')}
+              </h3>
+              <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                <pre
+                  className={clsx(
+                    'text-sm whitespace-pre-wrap break-words font-mono',
+                    textClass,
+                  )}
+                >
+                  {modelData.model}
+                </pre>
+              </div>
+            </section>
+
+            {/* Example Policies */}
+            {modelData.policy && (
+              <section>
+                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                  {t('Example Policies')}
+                </h3>
+                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                  <pre
+                    className={clsx(
+                      'text-sm whitespace-pre-wrap break-words font-mono',
+                      textClass,
+                    )}
+                  >
+                    {modelData.policy}
+                  </pre>
+                </div>
+              </section>
+            )}
+
+            {/* Example Request */}
+            {modelData.request && (
+              <section>
+                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                  {t('Example Request')}
+                </h3>
+                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                  <pre
+                    className={clsx(
+                      'text-sm whitespace-pre-wrap break-words font-mono',
+                      textClass,
+                    )}
+                  >
+                    {modelData.request}
+                  </pre>
+                </div>
+              </section>
+            )}
+
+            {/* Custom Configuration */}
+            {modelData.customConfig && (
+              <section>
+                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                  {t('Custom Configuration')}
+                </h3>
+                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                  <pre
+                    className={clsx(
+                      'text-sm whitespace-pre-wrap break-words font-mono',
+                      textClass,
+                    )}
+                  >
+                    {modelData.customConfig}
+                  </pre>
+                </div>
+              </section>
+            )}
+          </div>
+        )}
+
+        {/* Footer with Open in Editor button */}
+        <SheetFooter
+          className={clsx(
+            'fixed bottom-0 right-0 left-0 p-6 border-t',
+            bgClass,
+            borderClass,
+          )}
+        >
+          <button
+            onClick={handleOpenInEditor}
+            className={clsx(
+              'w-full inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg',
+              'text-base font-semibold transition-all duration-200',
+              'bg-primary text-primary-foreground',
+              'hover:bg-primary/90 hover:shadow-lg',
+              'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+            )}
+          >
+            <ExternalLink className="w-5 h-5" />
+            {t('Open in Editor')}
+          </button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+};
diff --git a/app/components/ui/sheet.tsx b/app/components/ui/sheet.tsx
new file mode 100644
index 00000000..2340a489
--- /dev/null
+++ b/app/components/ui/sheet.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/app/utils/lib/utils';
+
+const Sheet = DialogPrimitive.Root;
+
+const SheetTrigger = DialogPrimitive.Trigger;
+
+const SheetClose = DialogPrimitive.Close;
+
+const SheetPortal = DialogPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        // eslint-disable-next-line max-len
+        'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, SheetContentProps>(
+  ({ side = 'right', className, children, ...props }, ref) => {
+    const sideVariants = {
+      // eslint-disable-next-line max-len
+      top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+      bottom:
+        // eslint-disable-next-line max-len
+        'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+      // eslint-disable-next-line max-len
+      left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+      right:
+        // eslint-disable-next-line max-len
+        'inset-y-0 right-0 h-full w-full sm:w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-xl',
+    };
+
+    return (
+      <SheetPortal>
+        <SheetOverlay />
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            // eslint-disable-next-line max-len
+            'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+            sideVariants[side],
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <DialogPrimitive.Close
+            // eslint-disable-next-line max-len
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </SheetPortal>
+    );
+  },
+);
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />;
+};
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />;
+};
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn('text-lg font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+});
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => {
+  return <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />;
+});
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index 35419592..699bfacf 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -16,7 +16,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { clsx } from 'clsx';
-import { ArrowLeft, ExternalLink, Search } from 'lucide-react';
+import { ArrowLeft, ExternalLink, Search, Eye } from 'lucide-react';
 import { useLang } from '@/app/context/LangContext';
 import { modelMetadata, categories } from '@/app/config/modelMetadata';
 import {
@@ -25,18 +25,45 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/app/components/ui/tooltip';
+import { ModelPreviewPanel } from '@/app/components/gallery/ModelPreviewPanel';
 
 export default function GalleryPage() {
   const { theme, t } = useLang();
   const router = useRouter();
   const [selectedCategory, setSelectedCategory] = useState('All');
   const [searchQuery, setSearchQuery] = useState('');
+  const [previewModel, setPreviewModel] = useState<{
+    key: string;
+    name: string;
+    description: string;
+    category: string;
+  } | null>(null);
 
   const handleModelClick = (modelKey: string) => {
     // Navigate to home page with model selection
     router.push(`/?model=${modelKey}`);
   };
 
+  const handlePreviewClick = (
+    modelKey: string,
+    modelName: string,
+    modelDescription: string,
+    modelCategory: string,
+    e: React.MouseEvent,
+  ) => {
+    e.stopPropagation();
+    setPreviewModel({
+      key: modelKey,
+      name: modelName,
+      description: modelDescription,
+      category: modelCategory,
+    });
+  };
+
+  const handleClosePreview = () => {
+    setPreviewModel(null);
+  };
+
   const filteredModels = modelMetadata.filter((model) => {
     // Filter by category
     const categoryMatch =
@@ -163,8 +190,16 @@ export default function GalleryPage() {
                 return (
                   <div
                     key={model.key}
+                    onClick={() => {
+                      setPreviewModel({
+                        key: model.key,
+                        name: model.name,
+                        description: model.description,
+                        category: model.category,
+                      });
+                    }}
                     className={clsx(
-                      'rounded-lg border border-border shadow-sm transition-all duration-200',
+                      'rounded-lg border border-border shadow-sm transition-all duration-200 cursor-pointer',
                       cardBgClass,
                       'hover:shadow-lg',
                     )}
@@ -186,11 +221,45 @@ export default function GalleryPage() {
                       <p className={clsx('text-sm mb-4', textClass, 'opacity-70')}>
                         {t(model.description)}
                       </p>
-                      <div className="flex justify-end">
+                      <div className="flex justify-end gap-2">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              onClick={(e) => {
+                                handlePreviewClick(
+                                  model.key,
+                                  model.name,
+                                  model.description,
+                                  model.category,
+                                  e,
+                                );
+                              }}
+                              className={clsx(
+                                'inline-flex items-center gap-2 p-2 rounded-lg',
+                                'text-sm font-medium transition-all duration-200',
+                                theme === 'dark'
+                                  ? 'bg-slate-700 text-gray-200 hover:bg-slate-600'
+                                  : 'bg-slate-100 text-gray-800 hover:bg-slate-200',
+                                'hover:shadow-md',
+                                'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+                              )}
+                            >
+                              <Eye className="w-4 h-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent
+                            className={clsx(
+                              'bg-white dark:bg-gray-800 text-primary border border-primary',
+                            )}
+                          >
+                            <p>{t('Preview')}</p>
+                          </TooltipContent>
+                        </Tooltip>
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
-                              onClick={() => {
+                              onClick={(e) => {
+                                e.stopPropagation();
                                 handleModelClick(model.key);
                               }}
                               className={clsx(
@@ -222,6 +291,16 @@ export default function GalleryPage() {
         </div>
       </div>
 
+      {/* Preview Panel */}
+      <ModelPreviewPanel
+        modelKey={previewModel?.key || null}
+        modelName={previewModel?.name || ''}
+        modelDescription={previewModel?.description || ''}
+        modelCategory={previewModel?.category || ''}
+        isOpen={!!previewModel}
+        onClose={handleClosePreview}
+      />
+
       {/* Footer */}
       <div
         className={clsx(
diff --git a/messages/en.json b/messages/en.json
index 10bf275a..b9e9d40d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -131,5 +131,11 @@
   "Priority": "Priority",
   "Priority description": "Priority-based access control with rule precedence handling.",
   "Search models": "Search models...",
-  "Search placeholder": "Search by name, description, or category..."
+  "Search placeholder": "Search by name, description, or category...",
+  "Preview": "Preview",
+  "Open in Editor": "Open in Editor",
+  "Model Configuration": "Model Configuration",
+  "Example Policies": "Example Policies",
+  "Example Request": "Example Request",
+  "Custom Configuration": "Custom Configuration"
 }
diff --git a/package.json b/package.json
index 72eaa5c6..415d656c 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.24.1",
     "@lezer/highlight": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.7",
diff --git a/yarn.lock b/yarn.lock
index cc364426..a385f655 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -939,6 +939,26 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
+"@radix-ui/react-dialog@^1.1.15":
+  version "1.1.15"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz"
+  integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz"
@@ -955,6 +975,17 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
+"@radix-ui/react-dismissable-layer@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz"
+  integrity sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-escape-keydown" "1.1.1"
+
 "@radix-ui/react-dismissable-layer@1.1.4":
   version "1.1.4"
   resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.4.tgz"
@@ -984,6 +1015,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz"
   integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==
 
+"@radix-ui/react-focus-guards@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz"
+  integrity sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==
+
 "@radix-ui/react-focus-scope@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz"
@@ -993,6 +1029,15 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-focus-scope@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz"
+  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz"
@@ -1000,6 +1045,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-id@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz"
+  integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-menu@2.1.1":
   version "2.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz"
@@ -1072,6 +1124,14 @@
     "@radix-ui/react-primitive" "2.0.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-portal@1.1.9":
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz"
+  integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-presence@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz"
@@ -1088,6 +1148,14 @@
     "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-presence@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz"
+  integrity sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-primitive@2.0.0":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz"
@@ -1181,6 +1249,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz"
   integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
+"@radix-ui/react-use-callback-ref@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz"
+  integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==
+
 "@radix-ui/react-use-controllable-state@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz"
@@ -1210,6 +1283,13 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz"
+  integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz"
@@ -1653,7 +1733,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@^18":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18":
   version "18.3.3"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz"
   integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
@@ -1973,10 +2053,10 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.1:
-  version "1.2.4"
-  resolved "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz"
-  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
+aria-hidden@^1.1.1, aria-hidden@^1.2.4:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz"
+  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
   dependencies:
     tslib "^2.0.0"
 
@@ -4174,13 +4254,6 @@ internal-slot@^1.0.7:
   resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
-invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz"
@@ -5076,7 +5149,7 @@ lodash@^4.17.15:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5784,14 +5857,25 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react-remove-scroll-bar@^2.3.4:
-  version "2.3.6"
-  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz"
-  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+react-remove-scroll-bar@^2.3.4, react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
   dependencies:
-    react-style-singleton "^2.2.1"
+    react-style-singleton "^2.2.2"
     tslib "^2.0.0"
 
+react-remove-scroll@^2.6.3:
+  version "2.7.2"
+  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz"
+  integrity sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==
+  dependencies:
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
+
 react-remove-scroll@2.5.7:
   version "2.5.7"
   resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz"
@@ -5808,16 +5892,15 @@ react-resizable-panels@^3.0.6:
   resolved "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz"
   integrity sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==
 
-react-style-singleton@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"
-  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+react-style-singleton@^2.2.1, react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
   dependencies:
     get-nonce "^1.0.0"
-    invariant "^2.2.4"
     tslib "^2.0.0"
 
-"react@^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18, react@^18.2.0, react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.8.0:
+"react@^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18, react@^18.2.0, react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -6723,17 +6806,17 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-callback-ref@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz"
-  integrity sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==
+use-callback-ref@^1.3.0, use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
   dependencies:
     tslib "^2.0.0"
 
-use-sidecar@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz"
-  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+use-sidecar@^1.1.2, use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
   dependencies:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"

From 44f10f6f0359165860fe4b4aa7822478c335b9ce Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 14:41:59 +0000
Subject: [PATCH 3/5] Address code review feedback and improve code quality

Co-authored-by: tjyyy3 <97741063+tjyyy3@users.noreply.github.com>
---
 app/components/gallery/ModelPreviewPanel.tsx | 13 ++++++++-----
 app/gallery/page.tsx                         | 16 ++++++++--------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/components/gallery/ModelPreviewPanel.tsx b/app/components/gallery/ModelPreviewPanel.tsx
index 4dca96e7..940e8aad 100644
--- a/app/components/gallery/ModelPreviewPanel.tsx
+++ b/app/components/gallery/ModelPreviewPanel.tsx
@@ -63,11 +63,14 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
   const borderClass = clsx(theme === 'dark' ? 'border-slate-700' : 'border-slate-200');
 
   return (
-    <Sheet open={isOpen} onOpenChange={(open) => {
-      if (!open) {
-        onClose();
-      }
-    }}>
+    <Sheet
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
       <SheetContent side="right" className={clsx('overflow-y-auto', bgClass, textClass)}>
         <SheetHeader className="mb-6">
           <div className="flex items-center justify-between gap-4">
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index 699bfacf..21f6aa5b 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -49,9 +49,9 @@ export default function GalleryPage() {
     modelName: string,
     modelDescription: string,
     modelCategory: string,
-    e: React.MouseEvent,
+    e?: React.MouseEvent,
   ) => {
-    e.stopPropagation();
+    e?.stopPropagation();
     setPreviewModel({
       key: modelKey,
       name: modelName,
@@ -191,12 +191,12 @@ export default function GalleryPage() {
                   <div
                     key={model.key}
                     onClick={() => {
-                      setPreviewModel({
-                        key: model.key,
-                        name: model.name,
-                        description: model.description,
-                        category: model.category,
-                      });
+                      handlePreviewClick(
+                        model.key,
+                        model.name,
+                        model.description,
+                        model.category,
+                      );
                     }}
                     className={clsx(
                       'rounded-lg border border-border shadow-sm transition-all duration-200 cursor-pointer',

From 9950d82cdafbf177abfa8a2e63ce81aceb687684 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 15:08:48 +0000
Subject: [PATCH 4/5] Fix overflow issue, add Enforcement Result section, and
 keep yarn.lock unchanged

Co-authored-by: tjyyy3 <97741063+tjyyy3@users.noreply.github.com>
---
 app/components/gallery/ModelPreviewPanel.tsx | 25 +++++++++++++++-----
 messages/en.json                             |  3 ++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/components/gallery/ModelPreviewPanel.tsx b/app/components/gallery/ModelPreviewPanel.tsx
index 940e8aad..6fc3eb71 100644
--- a/app/components/gallery/ModelPreviewPanel.tsx
+++ b/app/components/gallery/ModelPreviewPanel.tsx
@@ -23,7 +23,6 @@ import {
   Sheet,
   SheetContent,
   SheetDescription,
-  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/app/components/ui/sheet';
@@ -71,7 +70,7 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
         }
       }}
     >
-      <SheetContent side="right" className={clsx('overflow-y-auto', bgClass, textClass)}>
+      <SheetContent side="right" className={clsx('overflow-y-auto pb-24', bgClass, textClass)}>
         <SheetHeader className="mb-6">
           <div className="flex items-center justify-between gap-4">
             <SheetTitle className={clsx('text-2xl', textClass)}>{t(modelName)}</SheetTitle>
@@ -90,7 +89,7 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
         </SheetHeader>
 
         {modelData && (
-          <div className="space-y-6 pb-20">
+          <div className="space-y-6">
             {/* Model Configuration */}
             <section>
               <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
@@ -146,6 +145,20 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
               </section>
             )}
 
+            {/* Enforcement Result Section */}
+            {modelData.policy && modelData.request && (
+              <section>
+                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                  {t('Enforcement Result')}
+                </h3>
+                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                  <p className={clsx('text-sm', textClass, 'opacity-70')}>
+                    {t('Open in editor to see enforcement results for the example request')}
+                  </p>
+                </div>
+              </section>
+            )}
+
             {/* Custom Configuration */}
             {modelData.customConfig && (
               <section>
@@ -168,9 +181,9 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
         )}
 
         {/* Footer with Open in Editor button */}
-        <SheetFooter
+        <div
           className={clsx(
-            'fixed bottom-0 right-0 left-0 p-6 border-t',
+            'sticky bottom-0 left-0 right-0 mt-6 p-6 -mx-6 -mb-6 border-t',
             bgClass,
             borderClass,
           )}
@@ -188,7 +201,7 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
             <ExternalLink className="w-5 h-5" />
             {t('Open in Editor')}
           </button>
-        </SheetFooter>
+        </div>
       </SheetContent>
     </Sheet>
   );
diff --git a/messages/en.json b/messages/en.json
index b9e9d40d..08ce632f 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -137,5 +137,6 @@
   "Model Configuration": "Model Configuration",
   "Example Policies": "Example Policies",
   "Example Request": "Example Request",
-  "Custom Configuration": "Custom Configuration"
+  "Custom Configuration": "Custom Configuration",
+  "Open in editor to see enforcement results for the example request": "Open in editor to see enforcement results for the example request"
 }

From 36173ca6ba90f5a5b703fba0accc29d97abcda3b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 11 Dec 2025 07:16:59 +0000
Subject: [PATCH 5/5] Fix footer positioning and improve header spacing in
 preview panel

Co-authored-by: tjyyy3 <97741063+tjyyy3@users.noreply.github.com>
---
 app/components/gallery/ModelPreviewPanel.tsx | 175 ++++++++++---------
 1 file changed, 90 insertions(+), 85 deletions(-)

diff --git a/app/components/gallery/ModelPreviewPanel.tsx b/app/components/gallery/ModelPreviewPanel.tsx
index 6fc3eb71..7d2478a2 100644
--- a/app/components/gallery/ModelPreviewPanel.tsx
+++ b/app/components/gallery/ModelPreviewPanel.tsx
@@ -70,48 +70,34 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
         }
       }}
     >
-      <SheetContent side="right" className={clsx('overflow-y-auto pb-24', bgClass, textClass)}>
-        <SheetHeader className="mb-6">
-          <div className="flex items-center justify-between gap-4">
-            <SheetTitle className={clsx('text-2xl', textClass)}>{t(modelName)}</SheetTitle>
+      <SheetContent side="right" className={clsx('flex flex-col h-full', bgClass, textClass)}>
+        <SheetHeader className="mb-6 pr-8">
+          <div className="flex items-start gap-3">
+            <div className="flex-1 min-w-0">
+              <SheetTitle className={clsx('text-2xl mb-2', textClass)}>{t(modelName)}</SheetTitle>
+              <SheetDescription className={clsx('text-base', textClass, 'opacity-70')}>
+                {t(modelDescription)}
+              </SheetDescription>
+            </div>
             <span
               className={clsx(
-                'px-3 py-1 text-sm font-medium rounded-lg',
+                'px-3 py-1 text-sm font-medium rounded-lg flex-shrink-0',
                 'bg-primary/10 text-primary whitespace-nowrap',
               )}
             >
               {t(modelCategory)}
             </span>
           </div>
-          <SheetDescription className={clsx('text-base', textClass, 'opacity-70')}>
-            {t(modelDescription)}
-          </SheetDescription>
         </SheetHeader>
 
-        {modelData && (
-          <div className="space-y-6">
-            {/* Model Configuration */}
-            <section>
-              <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
-                {t('Model Configuration')}
-              </h3>
-              <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
-                <pre
-                  className={clsx(
-                    'text-sm whitespace-pre-wrap break-words font-mono',
-                    textClass,
-                  )}
-                >
-                  {modelData.model}
-                </pre>
-              </div>
-            </section>
-
-            {/* Example Policies */}
-            {modelData.policy && (
+        {/* Scrollable content area */}
+        <div className="flex-1 overflow-y-auto pr-2">
+          {modelData && (
+            <div className="space-y-6 pb-6">
+              {/* Model Configuration */}
               <section>
                 <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
-                  {t('Example Policies')}
+                  {t('Model Configuration')}
                 </h3>
                 <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
                   <pre
@@ -120,70 +106,89 @@ export const ModelPreviewPanel: React.FC<ModelPreviewPanelProps> = ({
                       textClass,
                     )}
                   >
-                    {modelData.policy}
+                    {modelData.model}
                   </pre>
                 </div>
               </section>
-            )}
 
-            {/* Example Request */}
-            {modelData.request && (
-              <section>
-                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
-                  {t('Example Request')}
-                </h3>
-                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
-                  <pre
-                    className={clsx(
-                      'text-sm whitespace-pre-wrap break-words font-mono',
-                      textClass,
-                    )}
-                  >
-                    {modelData.request}
-                  </pre>
-                </div>
-              </section>
-            )}
+              {/* Example Policies */}
+              {modelData.policy && (
+                <section>
+                  <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                    {t('Example Policies')}
+                  </h3>
+                  <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                    <pre
+                      className={clsx(
+                        'text-sm whitespace-pre-wrap break-words font-mono',
+                        textClass,
+                      )}
+                    >
+                      {modelData.policy}
+                    </pre>
+                  </div>
+                </section>
+              )}
 
-            {/* Enforcement Result Section */}
-            {modelData.policy && modelData.request && (
-              <section>
-                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
-                  {t('Enforcement Result')}
-                </h3>
-                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
-                  <p className={clsx('text-sm', textClass, 'opacity-70')}>
-                    {t('Open in editor to see enforcement results for the example request')}
-                  </p>
-                </div>
-              </section>
-            )}
+              {/* Example Request */}
+              {modelData.request && (
+                <section>
+                  <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                    {t('Example Request')}
+                  </h3>
+                  <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                    <pre
+                      className={clsx(
+                        'text-sm whitespace-pre-wrap break-words font-mono',
+                        textClass,
+                      )}
+                    >
+                      {modelData.request}
+                    </pre>
+                  </div>
+                </section>
+              )}
 
-            {/* Custom Configuration */}
-            {modelData.customConfig && (
-              <section>
-                <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
-                  {t('Custom Configuration')}
-                </h3>
-                <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
-                  <pre
-                    className={clsx(
-                      'text-sm whitespace-pre-wrap break-words font-mono',
-                      textClass,
-                    )}
-                  >
-                    {modelData.customConfig}
-                  </pre>
-                </div>
-              </section>
-            )}
-          </div>
-        )}
+              {/* Enforcement Result Section */}
+              {modelData.policy && modelData.request && (
+                <section>
+                  <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                    {t('Enforcement Result')}
+                  </h3>
+                  <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                    <p className={clsx('text-sm', textClass, 'opacity-70')}>
+                      {t('Open in editor to see enforcement results for the example request')}
+                    </p>
+                  </div>
+                </section>
+              )}
+
+              {/* Custom Configuration */}
+              {modelData.customConfig && (
+                <section>
+                  <h3 className={clsx('text-lg font-semibold mb-3', textClass)}>
+                    {t('Custom Configuration')}
+                  </h3>
+                  <div className={clsx('rounded-lg border p-4', borderClass, sectionBgClass)}>
+                    <pre
+                      className={clsx(
+                        'text-sm whitespace-pre-wrap break-words font-mono',
+                        textClass,
+                      )}
+                    >
+                      {modelData.customConfig}
+                    </pre>
+                  </div>
+                </section>
+              )}
+            </div>
+          )}
+        </div>
 
-        {/* Footer with Open in Editor button */}
+        {/* Fixed footer with Open in Editor button */}
         <div
           className={clsx(
-            'sticky bottom-0 left-0 right-0 mt-6 p-6 -mx-6 -mb-6 border-t',
+            'flex-shrink-0 border-t p-6 -mx-6 -mb-6',
             bgClass,
             borderClass,
           )}