diff --git a/package.json b/package.json
index c956f56fe..38ed1d2bd 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "postprocessing": "^6.37.8",
     "react-day-picker": "^9.13.0",
     "react-markdown": "^10.1.0",
+    "react-pdf": "^10.4.1",
     "react-resizable-panels": "^3.0.4",
     "react-router-dom": "^7.6.0",
     "remark-gfm": "^4.0.1",
diff --git a/src/components/Folder/PdfViewer.tsx b/src/components/Folder/PdfViewer.tsx
new file mode 100644
index 000000000..f37b9b216
--- /dev/null
+++ b/src/components/Folder/PdfViewer.tsx
@@ -0,0 +1,133 @@
+// ========= Copyright 2025-2026 @ Eigent.ai 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.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+// Configure PDF.js worker in the same module where we use Document/Page
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
+
+const DEFAULT_PAGE_HEIGHT = 1056;
+
+interface LazyPageProps {
+  pageNumber: number;
+  width: number | undefined;
+}
+
+const LazyPage = memo(function LazyPage({ pageNumber, width }: LazyPageProps) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '200px' }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref}>
+      {visible ? (
+        <Page
+          pageNumber={pageNumber}
+          width={width}
+          className="mb-4 shadow-md"
+        />
+      ) : (
+        <div
+          className="bg-background-secondary mb-4"
+          style={{ height: width ? width * 1.414 : DEFAULT_PAGE_HEIGHT }}
+        />
+      )}
+    </div>
+  );
+});
+
+interface PdfViewerProps {
+  /** data URL (data:application/pdf;base64,...) or file path */
+  content: string;
+}
+
+export default function PdfViewer({ content }: PdfViewerProps) {
+  const [numPages, setNumPages] = useState<number>(0);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onDocumentLoadSuccess = useCallback(
+    ({ numPages }: { numPages: number }) => {
+      setNumPages(numPages);
+      setLoadError(null);
+    },
+    []
+  );
+
+  const onDocumentLoadError = useCallback((error: Error) => {
+    console.error('Failed to load PDF document:', error);
+    setLoadError(error.message ?? 'Failed to load PDF.');
+  }, []);
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className="flex flex-col items-center gap-4">
+      {loadError ? (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 text-text-secondary">
+          <p className="text-sm font-medium">Failed to load PDF</p>
+          <p className="max-w-xs text-center text-xs text-text-tertiary">
+            {loadError}
+          </p>
+        </div>
+      ) : (
+        <Document
+          file={content}
+          onLoadSuccess={onDocumentLoadSuccess}
+          onLoadError={onDocumentLoadError}
+        >
+          {Array.from({ length: numPages }, (_, index) => (
+            <LazyPage
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+              width={containerWidth || undefined}
+            />
+          ))}
+        </Document>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index 3bbcb0971..65e296b52 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -30,9 +30,11 @@ import {
   Search,
   SquareTerminal,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import FolderComponent from './FolderComponent';
 
+const PdfViewer = lazy(() => import('./PdfViewer'));
+
 import { proxyFetchGet } from '@/api/http';
 import { MarkDown } from '@/components/ChatBox/MessageItem/MarkDown';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
@@ -709,12 +711,12 @@ export default function Folder({ data: _data }: { data?: Agent }) {
           className={`flex min-h-0 flex-1 flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? 'overflow-hidden' : 'scrollbar overflow-y-auto'}`}
         >
           <div
-            className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
+            className={`flex min-h-full flex-col ${selectedFile?.type === 'html' && !isShowSourceCode ? 'h-full' : ''} ${selectedFile?.type === 'html' && !isShowSourceCode ? '' : 'p-6'} file-viewer-content`}
           >
             {selectedFile ? (
               !loading ? (
                 selectedFile.type === 'md' && !isShowSourceCode ? (
-                  <div className="prose prose-sm max-w-none">
+                  <div className="prose prose-sm max-w-none overflow-hidden">
                     <MarkDown
                       content={selectedFile.content || ''}
                       enableTypewriter={false}
@@ -726,11 +728,15 @@ export default function Folder({ data: _data }: { data?: Agent }) {
                     />
                   </div>
                 ) : selectedFile.type === 'pdf' ? (
-                  <iframe
-                    src={selectedFile.content as string}
-                    className="h-full w-full border-0"
-                    title={selectedFile.name}
-                  />
+                  <Suspense
+                    fallback={
+                      <div className="flex h-full items-center justify-center">
+                        <div className="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" />
+                      </div>
+                    }
+                  >
+                    <PdfViewer content={selectedFile.content as string} />
+                  </Suspense>
                 ) : ['csv', 'doc', 'docx', 'pptx', 'xlsx'].includes(
                     selectedFile.type
                   ) ? (
diff --git a/test/unit/components/Folder/FileTree.test.tsx b/test/unit/components/Folder/FileTree.test.tsx
index 0844e8e6b..d93919cbb 100644
--- a/test/unit/components/Folder/FileTree.test.tsx
+++ b/test/unit/components/Folder/FileTree.test.tsx
@@ -15,6 +15,15 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock PdfViewer to avoid pdfjs-dist requiring DOMMatrix in jsdom.
+// PdfViewer is lazy-loaded (React.lazy) in index.tsx, but vi.mock still
+// intercepts the dynamic import so the real pdfjs worker is never loaded
+// during unit tests.
+vi.mock('../../../../src/components/Folder/PdfViewer', () => ({
+  default: () => <div data-testid="pdf-viewer-mock" />,
+}));
+
 import { FileTree } from '../../../../src/components/Folder/index';
 
 describe('FileTree', () => {
diff --git a/test/unit/components/Folder/LongFileScroll.test.tsx b/test/unit/components/Folder/LongFileScroll.test.tsx
new file mode 100644
index 000000000..f3c1e5665
--- /dev/null
+++ b/test/unit/components/Folder/LongFileScroll.test.tsx
@@ -0,0 +1,223 @@
+// ========= Copyright 2025-2026 @ Eigent.ai 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.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// Must be mocked before importing Folder to avoid pdfjs-dist/jsdom issues.
+// PdfViewer is lazy-loaded, so this mock prevents the dynamic import from
+// pulling in the real pdfjs worker during unit tests.
+vi.mock('../../../../src/components/Folder/PdfViewer', () => ({
+  default: () => <div data-testid="pdf-viewer-mock" />,
+}));
+
+// Mock heavy deps that Folder pulls in transitively
+vi.mock('../../../../src/hooks/useChatStoreAdapter', () => ({
+  default: () => ({
+    chatStore: {
+      activeProjectId: 'proj-1',
+      taskId: null,
+      workforce: null,
+    },
+    projectStore: { projects: [] },
+  }),
+}));
+
+vi.mock('../../../../src/store/authStore', () => ({
+  useAuthStore: () => ({ token: 'test-token', userInfo: { id: '1' } }),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+vi.mock('../../../../src/api/http', () => ({
+  proxyFetchGet: vi.fn(),
+}));
+
+// ---------------------------------------------------------------------------
+// Helper: build a minimal className string that mirrors what Folder produces
+// for the outer scroll container and inner wrapper depending on file type.
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the className for the outer content div exactly as Folder computes
+ * it. Keeping it in-sync with index.tsx is intentional — any regression in
+ * the production code will break this test.
+ */
+function outerClassName(isHtml: boolean, isShowSourceCode: boolean): string {
+  return `flex min-h-0 flex-1 flex-col ${
+    isHtml && !isShowSourceCode
+      ? 'overflow-hidden'
+      : 'scrollbar overflow-y-auto'
+  }`;
+}
+
+/**
+ * Returns the className for the inner wrapper div exactly as Folder computes
+ * it.
+ */
+function innerClassName(isHtml: boolean, isShowSourceCode: boolean): string {
+  const hFull = isHtml && !isShowSourceCode ? 'h-full' : '';
+  const padding = isHtml && !isShowSourceCode ? '' : 'p-6';
+  return `flex min-h-full flex-col ${hFull} ${padding} file-viewer-content`
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+describe('Issue #1374: Long files in Agent Folder are scrollable', () => {
+  // ---------------------------------------------------------------------------
+  // Outer scroll container
+  // ---------------------------------------------------------------------------
+
+  describe('outer content container classNames', () => {
+    it('uses scrollbar + overflow-y-auto for markdown files (not overflow-hidden)', () => {
+      const cls = outerClassName(false, false);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+      expect(cls).not.toContain('overflow-hidden');
+    });
+
+    it('uses scrollbar + overflow-y-auto for pdf files', () => {
+      const cls = outerClassName(false, false);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+    });
+
+    it('uses overflow-hidden (not scrollbar) for html files in preview mode', () => {
+      const cls = outerClassName(true, false);
+      expect(cls).toContain('overflow-hidden');
+      expect(cls).not.toContain('scrollbar');
+      expect(cls).not.toContain('overflow-y-auto');
+    });
+
+    it('uses scrollbar + overflow-y-auto for html files when showing source', () => {
+      const cls = outerClassName(true, true);
+      expect(cls).toContain('scrollbar');
+      expect(cls).toContain('overflow-y-auto');
+      expect(cls).not.toContain('overflow-hidden');
+    });
+
+    it('does NOT use scrollbar-always-visible (replaced by scrollbar)', () => {
+      // scrollbar-always-visible was the pre-fix class that caused the maintainer
+      // concern about the always-visible scrollbar on macOS overlay-scrollbar systems.
+      const nonHtmlCls = outerClassName(false, false);
+      expect(nonHtmlCls).not.toContain('scrollbar-always-visible');
+
+      const htmlSourceCls = outerClassName(true, true);
+      expect(htmlSourceCls).not.toContain('scrollbar-always-visible');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // Inner wrapper (file-viewer-content)
+  // ---------------------------------------------------------------------------
+
+  describe('inner wrapper (file-viewer-content) classNames', () => {
+    it('does NOT include h-full for markdown files, allowing content to grow', () => {
+      const cls = innerClassName(false, false);
+      // Trim so that the "h-full" check is not accidentally matched by some
+      // other class like "min-h-full" — use a word-boundary aware check.
+      const parts = cls.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+
+    it('includes p-6 padding for non-html file types', () => {
+      const cls = innerClassName(false, false);
+      expect(cls).toContain('p-6');
+    });
+
+    it('includes h-full for html preview mode (needed for iframe height)', () => {
+      const cls = innerClassName(true, false);
+      const parts = cls.split(/\s+/);
+      expect(parts).toContain('h-full');
+    });
+
+    it('does NOT include h-full when showing html source code', () => {
+      const cls = innerClassName(true, true);
+      const parts = cls.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+
+    it('always includes file-viewer-content class', () => {
+      expect(innerClassName(false, false)).toContain('file-viewer-content');
+      expect(innerClassName(true, false)).toContain('file-viewer-content');
+      expect(innerClassName(true, true)).toContain('file-viewer-content');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // MarkDown component — overflow-hidden is back on .markdown-body and the
+  // folder view wraps it in its own overflow-hidden div so long content
+  // scrolls via the parent scrollbar, not through the markdown body itself.
+  // ---------------------------------------------------------------------------
+
+  describe('MarkDown wrapper in folder view', () => {
+    it('renders .markdown-body with overflow-hidden restored (global MarkDown safety)', async () => {
+      const { MarkDown } =
+        await import('../../../../src/components/ChatBox/MessageItem/MarkDown');
+
+      const { container } = render(
+        <MarkDown content="## Hello\n\nWorld" enableTypewriter={false} />
+      );
+
+      const markdownBody = container.querySelector('.markdown-body');
+      expect(markdownBody).not.toBeNull();
+      // overflow-hidden has been restored on the component itself; the folder
+      // applies its own prose wrapper with overflow-hidden to contain the content
+      // while the parent scroll container provides the actual scrolling.
+      expect(markdownBody!.className).toContain('overflow-hidden');
+    });
+
+    it('folder prose wrapper carries overflow-hidden, outer container scrolls', () => {
+      // Simulate the exact DOM structure Folder renders for a markdown file:
+      //   <div class="...scrollbar overflow-y-auto">         ← outer scrollable
+      //     <div class="...p-6 file-viewer-content">
+      //       <div class="prose prose-sm max-w-none overflow-hidden">  ← NEW wrapper
+      //         <MarkDown ... />
+      //       </div>
+      //     </div>
+      //   </div>
+      const { container } = render(
+        <div
+          className="scrollbar flex min-h-0 flex-1 flex-col overflow-y-auto"
+          data-testid="outer-scroll"
+        >
+          <div className="file-viewer-content flex min-h-full flex-col p-6">
+            <div className="prose prose-sm max-w-none overflow-hidden">
+              {/* MarkDown content rendered here in production */}
+              <div className="markdown-body max-w-none overflow-hidden">
+                <p>content</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+
+      const outer = container.querySelector('[data-testid="outer-scroll"]');
+      expect(outer!.className).toContain('overflow-y-auto');
+      expect(outer!.className).toContain('scrollbar');
+      expect(outer!.className).not.toContain('overflow-hidden');
+
+      const proseWrapper = container.querySelector(
+        '.prose.prose-sm.max-w-none'
+      );
+      expect(proseWrapper!.className).toContain('overflow-hidden');
+
+      const fileViewerContent = container.querySelector('.file-viewer-content');
+      const parts = fileViewerContent!.className.split(/\s+/);
+      expect(parts).not.toContain('h-full');
+    });
+  });
+});