From 867f7bc558a3a50b883c6228d8185c59f0060144 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Fri, 5 Jun 2026 12:46:47 +0300
Subject: [PATCH] feat: embed Beam viewer in issue peek

---
 .../attachment/attachment-list-item.tsx       |  97 ++--
 .../components/issues/peek-overview/view.tsx  | 440 ++++++++++++------
 plane-src/apps/web/helpers/beam-viewer.ts     |  29 +-
 plane-src/apps/web/styles/globals.css         | 147 +++++-
 4 files changed, 492 insertions(+), 221 deletions(-)

diff --git a/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
index f05d1c0..1344b5d 100644
--- a/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/plane-src/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -24,6 +24,7 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { getFileIcon } from "@/components/icons";
 import {
   buildBeamViewerUrl,
+  dispatchBeamViewerOpenEvent,
   fetchBeamConversionStatus,
   getBeamViewerAttachment,
   isBeamModelFile,
@@ -62,7 +63,9 @@ const getUsableBeamViewerUrl = (url: string | undefined): string | undefined =>
   if (!url) return undefined;
   try {
     const parsedUrl = new URL(url, "http://localhost");
-    return parsedUrl.searchParams.has("url") || parsedUrl.searchParams.has("src") || parsedUrl.searchParams.has("projectId")
+    return parsedUrl.searchParams.has("url") ||
+      parsedUrl.searchParams.has("src") ||
+      parsedUrl.searchParams.has("projectId")
       ? url
       : undefined;
   } catch (_error) {
@@ -135,7 +138,14 @@ const buildSyncedBeamViewerAttachment = (
 export const IssueAttachmentsListItem = observer(function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
   const { t } = useTranslation();
   // props
-  const { attachmentId, disabled, issueId, issueServiceType = EIssueServiceType.ISSUES, projectId, workspaceSlug } = props;
+  const {
+    attachmentId,
+    disabled,
+    issueId,
+    issueServiceType = EIssueServiceType.ISSUES,
+    projectId,
+    workspaceSlug,
+  } = props;
   // store hooks
   const { getUserDetails } = useMember();
   const {
@@ -188,16 +198,24 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
       beamViewer?.conversion?.message ||
       "Оригинальная модель загружена в Beam. Preview появится после подготовки GLB/XKT и дерева компонентов.";
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-  const [isModelViewerOpen, setIsModelViewerOpen] = useState(false);
   const [isThumbnailError, setIsThumbnailError] = useState(false);
+  const openModelViewer = () => {
+    if (!modelViewerUrl) return;
+    dispatchBeamViewerOpenEvent({
+      downloadUrl: modelDownloadUrl,
+      fileExtension,
+      fileName: fullFileName,
+      fileSize: attachment?.attributes.size ?? 0,
+      issueId,
+      viewerUrl: modelViewerUrl,
+    });
+  };
   const menuItems: TContextMenuItem[] = [
     ...(modelViewerUrl
       ? [
           {
             key: "view-model",
-            action: () => {
-              setIsModelViewerOpen(true);
-            },
+            action: openModelViewer,
             title: "Посмотреть модель",
             icon: Eye,
           },
@@ -262,7 +280,17 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
       isMounted = false;
       if (timeoutId) window.clearTimeout(timeoutId);
     };
-  }, [attachmentId, attachmentService, beamViewer, fetchAttachments, fullFileName, issueId, projectId, storedModelViewerUrl, workspaceSlug]);
+  }, [
+    attachmentId,
+    attachmentService,
+    beamViewer,
+    fetchAttachments,
+    fullFileName,
+    issueId,
+    projectId,
+    storedModelViewerUrl,
+    workspaceSlug,
+  ]);
 
   if (!attachment) return <></>;
 
@@ -275,7 +303,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            if (modelViewerUrl) setIsModelViewerOpen(true);
+            if (modelViewerUrl) openModelViewer();
             else setIsPreviewOpen(true);
           }}
         >
@@ -302,7 +330,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
                 {isBeamModel ? (
                   isBeamConversionFailed ? (
                     <Tooltip tooltipContent={beamStatusTooltipContent} isMobile={isMobile}>
-                      <div className="grid size-9 place-items-center text-red-400">
+                      <div className="text-red-400 grid size-9 place-items-center">
                         <AlertTriangle className="size-9" />
                       </div>
                     </Tooltip>
@@ -434,7 +462,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
                 </div>
                 <div className="max-w-md">
                   <div className="text-15 font-semibold text-primary">
-                    {isBeamConversionFailed ? "Ошибка дерева" : beamConversionStatusLabel ?? "Ожидает дерево"}
+                    {isBeamConversionFailed ? "Ошибка дерева" : (beamConversionStatusLabel ?? "Ожидает дерево")}
                   </div>
                   <div className="mt-2 text-14 text-secondary">
                     {isBeamConversionFailed
@@ -466,55 +494,6 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
           </div>
         </div>
       </ModalCore>
-
-      <ModalCore
-        isOpen={isModelViewerOpen && !!modelViewerUrl}
-        handleClose={() => setIsModelViewerOpen(false)}
-        position={EModalPosition.CENTER}
-        width={EModalWidth.VIIXL}
-        className="nodedc-beam-viewer-modal h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] overflow-hidden !border-0 !bg-black !shadow-none !ring-0 !outline-none focus:!outline-none"
-      >
-        <div className="relative h-full w-full bg-black">
-          <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 grid grid-cols-[1fr_auto_1fr] items-start gap-3">
-            <div aria-hidden="true" />
-            <div className="min-w-0 max-w-[min(60vw,36rem)] text-center text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.75)]">
-              <div className="truncate text-13 font-semibold">{fullFileName}</div>
-              <div className="mt-0.5 text-11 text-white/70">{convertBytesToSize(attachment.attributes.size)}</div>
-            </div>
-            <div className="pointer-events-auto flex items-center justify-end gap-2">
-              {modelDownloadUrl && (
-                <a
-                  href={modelDownloadUrl}
-                  download={fullFileName}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="grid size-10 place-items-center rounded-full bg-[rgb(var(--nodedc-accent-rgb))] text-[rgb(var(--nodedc-on-accent-rgb))] shadow-[0_14px_30px_rgba(0,0,0,0.3)] transition hover:brightness-110"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Download className="size-5" />
-                </a>
-              )}
-              <button
-                type="button"
-                className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
-                onClick={() => setIsModelViewerOpen(false)}
-              >
-                <X className="size-5" />
-              </button>
-            </div>
-          </div>
-          {modelViewerUrl && (
-            <iframe
-              key={modelViewerUrl}
-              src={modelViewerUrl}
-              title={`Beam Viewer: ${fullFileName}`}
-              tabIndex={-1}
-              className="h-full w-full border-0 outline-none ring-0 focus:outline-none focus:ring-0"
-              allow="fullscreen"
-            />
-          )}
-        </div>
-      </ModalCore>
     </>
   );
 });
diff --git a/plane-src/apps/web/core/components/issues/peek-overview/view.tsx b/plane-src/apps/web/core/components/issues/peek-overview/view.tsx
index 08aec3b..5646381 100644
--- a/plane-src/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/plane-src/apps/web/core/components/issues/peek-overview/view.tsx
@@ -9,16 +9,19 @@ import {
   useEffect,
   useRef,
   useState,
+  type CSSProperties,
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
+import { Download, Maximize2, Minimize2, X } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { cn } from "@plane/utils";
+import { cn, convertBytesToSize } from "@plane/utils";
+import { BEAM_VIEWER_OPEN_EVENT, type TBeamViewerOpenEventDetail } from "@/helpers/beam-viewer";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import useKeypress from "@/hooks/use-keypress";
@@ -89,6 +92,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const [isArchiveIssueModalOpen, setIsArchiveIssueModalOpen] = useState(false);
   const [isDuplicateIssueModalOpen, setIsDuplicateIssueModalOpen] = useState(false);
   const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
+  const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null);
+  const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false);
   const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
     if (typeof window === "undefined") return 720;
 
@@ -104,6 +109,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const editorRef = useRef<EditorRefApi>(null);
   const initialPeekWidthRef = useRef<number>(0);
   const initialMouseXRef = useRef<number>(0);
+  const livePeekWidthRef = useRef<number>(sidePeekWidth);
+  const resizeAnimationFrameRef = useRef<number | null>(null);
   // store hooks
   const {
     setPeekIssue,
@@ -129,30 +136,69 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   const isAnyLocalModalOpen =
     isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
+  const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
+
+  const getMaxSidePeekWidth = useCallback(() => {
+    if (typeof window === "undefined") return 720;
+    const minWidth = 640;
+    if (shouldUseBeamPeekShell && !isBeamPeekFullscreen) {
+      return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2));
+    }
+    return Math.max(720, window.innerWidth - 48);
+  }, [isBeamPeekFullscreen, shouldUseBeamPeekShell]);
 
   const stopPeekResizing = useCallback(() => {
+    if (resizeAnimationFrameRef.current !== null) {
+      window.cancelAnimationFrame(resizeAnimationFrameRef.current);
+      resizeAnimationFrameRef.current = null;
+    }
+
+    if (shouldUseBeamPeekShell) {
+      issuePeekOverviewRef.current?.style.setProperty("--nodedc-beam-peek-width", `${livePeekWidthRef.current}px`);
+      setSidePeekWidth(livePeekWidthRef.current);
+    }
+
     setIsResizingPeek(false);
-  }, []);
+  }, [shouldUseBeamPeekShell]);
 
   const handlePeekResize = useCallback(
     (event: MouseEvent) => {
       if (!isResizingPeek) return;
 
-      const maxWidth = Math.max(720, window.innerWidth - 48);
+      const maxWidth = getMaxSidePeekWidth();
       const minWidth = 640;
       const deltaX = event.clientX - initialMouseXRef.current;
       const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
+
+      if (shouldUseBeamPeekShell) {
+        livePeekWidthRef.current = nextWidth;
+
+        if (resizeAnimationFrameRef.current === null) {
+          resizeAnimationFrameRef.current = window.requestAnimationFrame(() => {
+            issuePeekOverviewRef.current?.style.setProperty(
+              "--nodedc-beam-peek-width",
+              `${livePeekWidthRef.current}px`
+            );
+            resizeAnimationFrameRef.current = null;
+          });
+        }
+
+        return;
+      }
+
       setSidePeekWidth(nextWidth);
     },
-    [isResizingPeek]
+    [getMaxSidePeekWidth, isResizingPeek, shouldUseBeamPeekShell]
   );
 
   const startPeekResizing = useCallback(
     (event: ReactMouseEvent) => {
       if (!shouldAllowPeekResize || peekMode !== "side-peek") return;
       event.preventDefault();
+      event.stopPropagation();
       setIsResizingPeek(true);
       initialPeekWidthRef.current = sidePeekWidth;
+      livePeekWidthRef.current = sidePeekWidth;
       initialMouseXRef.current = event.clientX;
     },
     [peekMode, shouldAllowPeekResize, sidePeekWidth]
@@ -160,18 +206,18 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   useEffect(() => {
     const handleWindowResize = () => {
-      const maxWidth = Math.max(720, window.innerWidth - 48);
+      const maxWidth = getMaxSidePeekWidth();
       setSidePeekWidth((currentWidth) => Math.min(currentWidth, maxWidth));
     };
 
     window.addEventListener("resize", handleWindowResize);
     return () => window.removeEventListener("resize", handleWindowResize);
-  }, []);
+  }, [getMaxSidePeekWidth]);
 
   useEffect(() => {
     if (typeof window === "undefined") return;
 
-    const maxWidth = Math.max(720, window.innerWidth - 48);
+    const maxWidth = getMaxSidePeekWidth();
     const clampedWidth = Math.min(Math.max(sidePeekWidth, 640), maxWidth);
 
     window.localStorage.setItem(SIDE_PEEK_WIDTH_STORAGE_KEY, String(clampedWidth));
@@ -179,8 +225,39 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     if (clampedWidth !== sidePeekWidth) {
       setSidePeekWidth(clampedWidth);
     }
+  }, [getMaxSidePeekWidth, sidePeekWidth]);
+
+  useEffect(() => {
+    livePeekWidthRef.current = sidePeekWidth;
   }, [sidePeekWidth]);
 
+  useEffect(
+    () => () => {
+      if (resizeAnimationFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeAnimationFrameRef.current);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    setBeamPeekViewer(null);
+    setIsBeamPeekFullscreen(false);
+  }, [issueId]);
+
+  useEffect(() => {
+    const handleOpenBeamViewer = (event: Event) => {
+      const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail;
+      if (!detail?.viewerUrl || detail.issueId !== issueId) return;
+      setPeekMode("side-peek");
+      setBeamPeekViewer(detail);
+      setIsBeamPeekFullscreen(false);
+    };
+
+    window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
+    return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
+  }, [issueId]);
+
   useEffect(() => {
     if (!isResizingPeek) return;
 
@@ -219,6 +296,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     const editorImageFullScreenModalElement = document.querySelector(".editor-image-full-screen-modal");
     const dropdownElement = document.activeElement?.tagName === "INPUT";
     const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+    if (beamPeekViewer) {
+      setBeamPeekViewer(null);
+      setIsBeamPeekFullscreen(false);
+      return;
+    }
     if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
       removeRoutePeekId();
       const issueElement = document.getElementById(`issue-${issueId}`);
@@ -238,13 +320,17 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     shouldRenderPeekSurface
       ? "flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300"
       : "h-full w-full",
-    !embedIssue && "absolute z-[80]",
-    !embedIssue && {
-      "top-[5.35rem] right-3 bottom-[5.85rem] w-[calc(100%-1.5rem)] rounded-[28px] border md:min-w-[640px] md:max-w-[calc(100vw-1.5rem)]":
-        peekMode === "side-peek",
-      "top-[8.33%] left-[8.33%] size-5/6 rounded-[28px]": peekMode === "modal",
-      "absolute inset-0 m-4 rounded-[28px]": peekMode === "full-screen",
-    },
+    !embedIssue && !shouldUseBeamPeekShell && "absolute z-[80]",
+    !embedIssue &&
+      !shouldUseBeamPeekShell && {
+        "nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]":
+          peekMode === "side-peek",
+        "top-[8.33%] left-[8.33%] size-5/6 rounded-[28px]": peekMode === "modal",
+        "absolute inset-0 m-4 rounded-[28px]": peekMode === "full-screen",
+      },
+    !embedIssue &&
+      shouldUseBeamPeekShell &&
+      "nodedc-beam-peek-issue-card relative h-full rounded-[28px] border md:min-w-[640px]",
     shouldUseInteractiveEmbeddedLayout && {
       "relative ml-auto h-full rounded-[28px]": peekMode === "side-peek",
       "relative mx-auto my-3 h-[calc(100%-1.5rem)] w-full max-w-[min(1080px,100%)] rounded-[28px]":
@@ -257,75 +343,123 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
 
-  const content = (
-    <div className="w-full text-body-sm-regular">
-      {issueId && (
+  const issuePanelStyle = {
+    width: shouldUseBeamPeekShell
+      ? "100%"
+      : shouldAllowPeekResize && peekMode === "side-peek"
+        ? `${sidePeekWidth}px`
+        : undefined,
+    boxShadow:
+      shouldRenderPeekSurface && !shouldUseBeamPeekShell
+        ? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
+        : undefined,
+  };
+
+  const issuePanel = issueId ? (
+    <div
+      ref={shouldUseBeamPeekShell ? undefined : issuePeekOverviewRef}
+      className={peekOverviewIssueClassName}
+      style={issuePanelStyle}
+    >
+      {shouldAllowPeekResize && peekMode === "side-peek" && (
         <div
-          ref={issuePeekOverviewRef}
-          className={peekOverviewIssueClassName}
-          style={{
-            width: shouldAllowPeekResize && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
-            boxShadow:
-              shouldRenderPeekSurface
-                ? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
-                : undefined,
-          }}
-        >
-          {shouldAllowPeekResize && peekMode === "side-peek" && (
-            <div
-              className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
-              onMouseDown={startPeekResizing}
-              role="separator"
-              aria-label="Resize issue panel"
+          className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
+          onMouseDown={startPeekResizing}
+          role="separator"
+          aria-label="Resize issue panel"
+        />
+      )}
+      {isError ? (
+        <div className="relative h-screen w-full overflow-hidden">
+          <IssuePeekOverviewError removeRoutePeekId={removeRoutePeekId} />
+        </div>
+      ) : (
+        isLoading && <IssuePeekOverviewLoader removeRoutePeekId={removeRoutePeekId} />
+      )}
+      {!isLoading && !isError && issue && (
+        <>
+          {renderHeader ? (
+            renderHeader({
+              peekMode,
+              setPeekMode: (value) => setPeekMode(value),
+              removeRoutePeekId,
+              isSubmitting,
+            })
+          ) : (
+            <IssuePeekOverviewHeader
+              peekMode={peekMode}
+              setPeekMode={(value) => setPeekMode(value)}
+              removeRoutePeekId={removeRoutePeekId}
+              toggleDeleteIssueModal={toggleDeleteIssueModal}
+              toggleArchiveIssueModal={toggleArchiveIssueModal}
+              toggleDuplicateIssueModal={toggleDuplicateIssueModal}
+              toggleEditIssueModal={toggleEditIssueModal}
+              handleRestoreIssue={handleRestore}
+              isArchived={is_archived}
+              issueId={issueId}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              isSubmitting={isSubmitting}
+              disabled={disabled}
+              embedIssue={embedIssue}
+              showLayoutSwitcher={shouldAllowPeekModeToggle}
             />
           )}
-          {isError ? (
-            <div className="relative h-screen w-full overflow-hidden">
-              <IssuePeekOverviewError removeRoutePeekId={removeRoutePeekId} />
-            </div>
-          ) : (
-            isLoading && <IssuePeekOverviewLoader removeRoutePeekId={removeRoutePeekId} />
-          )}
-          {!isLoading && !isError && issue && (
-            <>
-              {renderHeader ? (
-                renderHeader({
-                  peekMode,
-                  setPeekMode: (value) => setPeekMode(value),
-                  removeRoutePeekId,
-                  isSubmitting,
-                })
-              ) : (
-                <IssuePeekOverviewHeader
-                  peekMode={peekMode}
-                  setPeekMode={(value) => setPeekMode(value)}
-                  removeRoutePeekId={removeRoutePeekId}
-                  toggleDeleteIssueModal={toggleDeleteIssueModal}
-                  toggleArchiveIssueModal={toggleArchiveIssueModal}
-                  toggleDuplicateIssueModal={toggleDuplicateIssueModal}
-                  toggleEditIssueModal={toggleEditIssueModal}
-                  handleRestoreIssue={handleRestore}
-                  isArchived={is_archived}
-                  issueId={issueId}
+          {/* content */}
+          <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
+            {renderContent ? (
+              renderContent({
+                peekMode,
+                isSubmitting,
+                setIsSubmitting: (value) => setIsSubmitting(value),
+                editorRef,
+              })
+            ) : ["side-peek", "modal"].includes(peekMode) ? (
+              <div className="relative flex flex-col gap-4 space-y-3 px-8 py-6">
+                <PeekOverviewIssueDetails
+                  editorRef={editorRef}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
-                  isSubmitting={isSubmitting}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
                   disabled={disabled}
-                  embedIssue={embedIssue}
-                  showLayoutSwitcher={shouldAllowPeekModeToggle}
+                  isArchived={is_archived}
+                  isSubmitting={isSubmitting}
+                  setIsSubmitting={(value) => setIsSubmitting(value)}
                 />
-              )}
-              {/* content */}
-              <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
-                {renderContent ? (
-                  renderContent({
-                    peekMode,
-                    isSubmitting,
-                    setIsSubmitting: (value) => setIsSubmitting(value),
-                    editorRef,
-                  })
-                ) : ["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-4 space-y-3 px-8 py-6">
+
+                <div className="py-2">
+                  <IssueDetailWidgets
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    disabled={disabled || is_archived}
+                    compactView
+                    issueOperations={issueOperations}
+                    issueServiceType={EIssueServiceType.ISSUES}
+                  />
+                </div>
+
+                <PeekOverviewProperties
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={disabled || is_archived}
+                />
+
+                <IssueActivity
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  disabled={is_archived}
+                  compactComposer
+                />
+              </div>
+            ) : (
+              <div className="vertical-scrollbar flex h-full w-full overflow-auto">
+                <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
+                  <div className="space-y-3">
                     <PeekOverviewIssueDetails
                       editorRef={editorRef}
                       workspaceSlug={workspaceSlug}
@@ -343,83 +477,111 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                         workspaceSlug={workspaceSlug}
                         projectId={projectId}
                         issueId={issueId}
-                        disabled={disabled || is_archived}
-                        compactView
+                        disabled={disabled}
                         issueOperations={issueOperations}
                         issueServiceType={EIssueServiceType.ISSUES}
                       />
                     </div>
 
-                    <PeekOverviewProperties
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                      issueId={issueId}
-                      issueOperations={issueOperations}
-                      disabled={disabled || is_archived}
-                    />
-
                     <IssueActivity
                       workspaceSlug={workspaceSlug}
                       projectId={projectId}
                       issueId={issueId}
                       disabled={is_archived}
-                      compactComposer
                     />
                   </div>
-                ) : (
-                  <div className="vertical-scrollbar flex h-full w-full overflow-auto">
-                    <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
-                      <div className="space-y-3">
-                        <PeekOverviewIssueDetails
-                          editorRef={editorRef}
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          issueId={issueId}
-                          issueOperations={issueOperations}
-                          disabled={disabled}
-                          isArchived={is_archived}
-                          isSubmitting={isSubmitting}
-                          setIsSubmitting={(value) => setIsSubmitting(value)}
-                        />
-
-                        <div className="py-2">
-                          <IssueDetailWidgets
-                            workspaceSlug={workspaceSlug}
-                            projectId={projectId}
-                            issueId={issueId}
-                            disabled={disabled}
-                            issueOperations={issueOperations}
-                            issueServiceType={EIssueServiceType.ISSUES}
-                          />
-                        </div>
-
-                        <IssueActivity
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          issueId={issueId}
-                          disabled={is_archived}
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
-                        is_archived ? "pointer-events-none" : ""
-                      }`}
-                    >
-                      <PeekOverviewProperties
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issueId}
-                        issueOperations={issueOperations}
-                        disabled={disabled || is_archived}
-                      />
-                    </div>
-                  </div>
-                )}
+                </div>
+                <div
+                  className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
+                    is_archived ? "pointer-events-none" : ""
+                  }`}
+                >
+                  <PeekOverviewProperties
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    issueOperations={issueOperations}
+                    disabled={disabled || is_archived}
+                  />
+                </div>
               </div>
-            </>
-          )}
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  ) : null;
+
+  const content = (
+    <div className="w-full text-body-sm-regular">
+      {shouldUseBeamPeekShell && beamPeekViewer ? (
+        <div
+          ref={issuePeekOverviewRef}
+          className="nodedc-beam-peek-shell"
+          data-fullscreen={isBeamPeekFullscreen ? "true" : "false"}
+          data-resizing={isResizingPeek ? "true" : "false"}
+          style={
+            {
+              "--nodedc-beam-peek-width": `${sidePeekWidth}px`,
+            } as CSSProperties
+          }
+        >
+          <section className="nodedc-beam-peek-viewer-card" aria-label="Beam Viewer">
+            <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 grid grid-cols-[1fr_auto_1fr] items-start gap-3">
+              <div aria-hidden="true" />
+              <div className="max-w-[min(44vw,34rem)] min-w-0 text-center text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.75)]">
+                <div className="truncate text-13 font-semibold">{beamPeekViewer.fileName}</div>
+                <div className="mt-0.5 text-11 text-white/70">{convertBytesToSize(beamPeekViewer.fileSize)}</div>
+              </div>
+              <div className="pointer-events-auto flex items-center justify-end gap-2">
+                {beamPeekViewer.downloadUrl && (
+                  <a
+                    href={beamPeekViewer.downloadUrl}
+                    download={beamPeekViewer.fileName}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="grid size-10 place-items-center rounded-full bg-[rgb(var(--nodedc-accent-rgb))] text-[rgb(var(--nodedc-on-accent-rgb))] shadow-[0_14px_30px_rgba(0,0,0,0.3)] transition hover:brightness-110"
+                    onClick={(event) => event.stopPropagation()}
+                    title="Скачать оригинал"
+                  >
+                    <Download className="size-5" />
+                  </a>
+                )}
+                <button
+                  type="button"
+                  className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
+                  onClick={() => setIsBeamPeekFullscreen((current) => !current)}
+                  title={isBeamPeekFullscreen ? "Вернуть карточку" : "Во весь экран"}
+                >
+                  {isBeamPeekFullscreen ? <Minimize2 className="size-5" /> : <Maximize2 className="size-5" />}
+                </button>
+                <button
+                  type="button"
+                  className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
+                  onClick={() => {
+                    setBeamPeekViewer(null);
+                    setIsBeamPeekFullscreen(false);
+                  }}
+                  title="Закрыть"
+                >
+                  <X className="size-5" />
+                </button>
+              </div>
+            </div>
+            <iframe
+              key={beamPeekViewer.viewerUrl}
+              src={beamPeekViewer.viewerUrl}
+              title={`Beam Viewer: ${beamPeekViewer.fileName}`}
+              tabIndex={-1}
+              className="h-full w-full border-0 ring-0 outline-none focus:ring-0 focus:outline-none"
+              allow="fullscreen"
+            />
+            {isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />}
+          </section>
+          <div className="nodedc-beam-peek-issue-slot">{issuePanel}</div>
         </div>
+      ) : (
+        issuePanel
       )}
     </div>
   );
diff --git a/plane-src/apps/web/helpers/beam-viewer.ts b/plane-src/apps/web/helpers/beam-viewer.ts
index 508aaca..f2ad01c 100644
--- a/plane-src/apps/web/helpers/beam-viewer.ts
+++ b/plane-src/apps/web/helpers/beam-viewer.ts
@@ -41,6 +41,21 @@ export type TBeamConversionStatus = {
   updatedAt?: string;
 };
 
+export const BEAM_VIEWER_OPEN_EVENT = "nodedc:beam-viewer-open";
+
+export type TBeamViewerOpenEventDetail = {
+  downloadUrl?: string;
+  fileExtension?: string;
+  fileName: string;
+  fileSize: number;
+  issueId: string;
+  viewerUrl: string;
+};
+
+export const dispatchBeamViewerOpenEvent = (detail: TBeamViewerOpenEventDetail) => {
+  window.dispatchEvent(new CustomEvent<TBeamViewerOpenEventDetail>(BEAM_VIEWER_OPEN_EVENT, { detail }));
+};
+
 const DEFAULT_BEAM_VIEWER_BASE_URL = "http://localhost:8080";
 
 const BEAM_DIRECT_MODEL_TYPE_BY_EXTENSION: Record<string, string> = {
@@ -73,7 +88,10 @@ const getFileExtension = (name: string): string => {
 };
 
 const getUploadGroupId = (parts: Array<string | undefined>): string => {
-  const value = parts.filter(Boolean).join("_").replace(/[^a-zA-Z0-9_-]/g, "_");
+  const value = parts
+    .filter(Boolean)
+    .join("_")
+    .replace(/[^a-zA-Z0-9_-]/g, "_");
   return value || "tasker";
 };
 
@@ -142,9 +160,7 @@ export const getBeamViewerAttachment = (attachment: TIssueAttachment | undefined
   return beamViewer;
 };
 
-export const fetchBeamConversionStatus = async (
-  beamViewer: TBeamViewerAttachment
-): Promise<TBeamConversionStatus> => {
+export const fetchBeamConversionStatus = async (beamViewer: TBeamViewerAttachment): Promise<TBeamConversionStatus> => {
   const statusUrl = new URL("/api/conversions/status", `${getBeamApiBaseUrl()}/`);
   statusUrl.searchParams.set("src", toBeamRelativeUploadSrc(beamViewer.src));
 
@@ -181,7 +197,10 @@ export const uploadBeamModelFile = (
     const apiBaseUrl = getBeamApiBaseUrl();
     const uploadUrl = new URL("/api/uploads", `${apiBaseUrl}/`);
     uploadUrl.searchParams.set("filename", file.name);
-    uploadUrl.searchParams.set("projectId", getUploadGroupId([options.workspaceSlug, options.projectId, options.issueId]));
+    uploadUrl.searchParams.set(
+      "projectId",
+      getUploadGroupId([options.workspaceSlug, options.projectId, options.issueId])
+    );
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", uploadUrl.toString());
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index 5a125ca..f9abd70 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -51,6 +51,7 @@
   --nodedc-bottom-dock-visual-overlap: 0.625rem;
   --nodedc-expanded-footer-height: 4.95rem;
   --nodedc-active-footer-offset: var(--nodedc-bottom-dock-offset, var(--nodedc-bottom-dock-height, 2.75rem));
+  --nodedc-peek-bottom-offset: var(--nodedc-expanded-footer-height, 4.95rem);
   --nodedc-list-property-chip-height: 2.12rem;
   --nodedc-list-property-avatar-size: 1.9rem;
   --nodedc-list-property-icon-size: var(--nodedc-list-property-chip-height);
@@ -345,31 +346,141 @@
       0 8px 22px rgba(0, 0, 0, 0.24);
   }
 
-  .nodedc-beam-viewer-modal {
-    background: #000 !important;
-    border: 0 !important;
-    outline: none !important;
-    box-shadow: none !important;
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
+  .nodedc-beam-peek-shell {
+    --nodedc-beam-peek-width: 720px;
+    position: fixed;
+    top: 5.35rem;
+    left: 0.75rem;
+    right: 0.75rem;
+    bottom: var(--nodedc-peek-bottom-offset);
+    z-index: 80;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--nodedc-beam-peek-width);
+    grid-template-rows: minmax(0, 1fr);
+    align-items: stretch;
+    column-gap: 0.75rem;
+    overflow: visible;
+    transition:
+      column-gap 260ms ease,
+      grid-template-columns 260ms ease,
+      opacity 220ms ease;
   }
 
-  .nodedc-beam-viewer-modal::before,
-  .nodedc-beam-viewer-modal::after {
+  .nodedc-beam-peek-shell[data-resizing="true"] {
+    transition: none;
+  }
+
+  .nodedc-peek-side-bound {
+    position: fixed !important;
+    bottom: var(--nodedc-peek-bottom-offset) !important;
+  }
+
+  .nodedc-beam-peek-shell[data-fullscreen="true"] {
+    grid-template-columns: minmax(0, 1fr) 0;
+    column-gap: 0;
+  }
+
+  .nodedc-beam-peek-viewer-card {
+    position: relative;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background: #000;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 28px;
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
+    transition:
+      border-color 260ms ease,
+      border-radius 260ms ease;
+    animation: nodedcBeamPeekSlideIn 220ms ease-out;
+  }
+
+  .nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-viewer-card,
+  .nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-issue-card {
+    transition: none;
+  }
+
+  .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
+    border-radius: 28px;
+  }
+
+  .nodedc-beam-peek-issue-slot {
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: visible;
+    transition:
+      opacity 220ms ease,
+      transform 260ms ease;
+  }
+
+  .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-issue-slot {
+    overflow: hidden;
+    opacity: 0;
+    transform: translateX(1.5rem);
+    pointer-events: none;
+  }
+
+  .nodedc-beam-peek-issue-card {
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    border-radius: 28px !important;
+    overflow: hidden !important;
+    box-shadow:
+      0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+  }
+
+  .nodedc-beam-peek-viewer-card iframe,
+  .nodedc-beam-peek-viewer-card iframe:focus,
+  .nodedc-beam-peek-viewer-card iframe:focus-visible {
     border: 0 !important;
     outline: none !important;
     box-shadow: none !important;
   }
 
-  .nodedc-beam-viewer-modal:focus,
-  .nodedc-beam-viewer-modal:focus-visible,
-  .nodedc-beam-viewer-modal:focus-within,
-  .nodedc-beam-viewer-modal iframe,
-  .nodedc-beam-viewer-modal iframe:focus,
-  .nodedc-beam-viewer-modal iframe:focus-visible {
-    border: 0 !important;
-    outline: none !important;
-    box-shadow: none !important;
+  .nodedc-beam-peek-shell[data-resizing="true"] iframe {
+    pointer-events: none;
+  }
+
+  .nodedc-beam-peek-resize-shield {
+    position: absolute;
+    inset: -1rem;
+    z-index: 120;
+    cursor: ew-resize;
+    background: transparent;
+  }
+
+  @keyframes nodedcBeamPeekSlideIn {
+    from {
+      transform: translateX(1.25rem);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .nodedc-beam-peek-shell,
+    .nodedc-beam-peek-shell[data-fullscreen="true"] {
+      grid-template-columns: minmax(0, 1fr);
+      column-gap: 0;
+    }
+
+    .nodedc-beam-peek-viewer-card,
+    .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
+      border-radius: 24px;
+    }
+
+    .nodedc-beam-peek-issue-slot {
+      display: none;
+    }
   }
 
   .nodedc-glass-surface {