From 46ceab0c425958599b4158bfb7bf8b0171bc8787 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Sun, 12 Apr 2026 11:53:10 +0300
Subject: [PATCH 1/8] feat: add inline post preview embed flow

Add a three-column post modal with an inline article preview that supports extension embedding and webapp fallback states, including dismiss/restore and unavailable UX. Expose the extension id to webapp runtime so preview initialization can run consistently across app surfaces.

Made-with: Cursor
---
 .../post/PostArticlePreviewEmbed.tsx          | 408 ++++++++++++++++++
 .../src/components/post/PostContent.tsx       | 321 +++++++++-----
 .../EmbeddedBrowsingWebPrompt.module.css      | 103 +++++
 .../EmbeddedBrowsingWebPrompt.tsx             | 137 ++++++
 .../extensionEmbed/ExtensionSiteEmbed.tsx     |  11 +-
 .../src/features/extensionEmbed/common.ts     |   5 +
 .../extensionEmbed/extensionEmbedMessaging.ts |   9 +-
 .../getBrowserExtensionInstallId.ts           |  18 +
 .../extensionEmbed/useExtensionSiteEmbed.ts   |  76 +++-
 packages/webapp/next.config.ts                |   5 +
 10 files changed, 970 insertions(+), 123 deletions(-)
 create mode 100644 packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
 create mode 100644 packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
 create mode 100644 packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
 create mode 100644 packages/shared/src/features/extensionEmbed/getBrowserExtensionInstallId.ts

diff --git a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
new file mode 100644
index 00000000000..9cd5b36cb37
--- /dev/null
+++ b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
@@ -0,0 +1,408 @@
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { EmbeddedBrowsingWebPrompt } from '../../features/extensionEmbed/EmbeddedBrowsingWebPrompt';
+import { ExtensionSiteEmbed } from '../../features/extensionEmbed/ExtensionSiteEmbed';
+import { getBrowserExtensionInstallId } from '../../features/extensionEmbed/getBrowserExtensionInstallId';
+import type { UseExtensionSiteEmbedResult } from '../../features/extensionEmbed/useExtensionSiteEmbed';
+import { apiUrl } from '../../lib/config';
+import { Loader } from '../Loader';
+import {
+  Typography,
+  TypographyTag,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+
+type PostArticlePreviewEmbedProps = {
+  targetUrl: string;
+  previewHost?: string;
+  className?: string;
+  onDismissArticlePreview?: () => void;
+  onPreviewUnavailable?: () => void;
+  forceUnavailable?: boolean;
+};
+
+const renderEmbedChrome = ({
+  extensionId,
+  state,
+}: {
+  extensionId: string | null;
+  state: UseExtensionSiteEmbedResult;
+}): ReactElement | null => {
+  if (!extensionId) {
+    return null;
+  }
+
+  if (state.status === 'error' && state.error) {
+    return (
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center p-4"
+        aria-live="polite"
+      >
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+          className="max-w-sm text-center"
+        >
+          {state.error}
+        </Typography>
+      </div>
+    );
+  }
+
+  if (state.status === 'reloading-extension') {
+    return (
+      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-overlay-quaternary-onion">
+        <Loader className="h-6 w-6" />
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+        >
+          Reloading extension…
+        </Typography>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export function PostArticlePreviewEmbed({
+  targetUrl,
+  previewHost,
+  className,
+  onDismissArticlePreview,
+  onPreviewUnavailable,
+  forceUnavailable = false,
+}: PostArticlePreviewEmbedProps): ReactElement {
+  const extensionId = useMemo(() => getBrowserExtensionInstallId(), []);
+  const [showDirectWebPreview, setShowDirectWebPreview] = useState(false);
+  const [hasPreviewFrameLoaded, setHasPreviewFrameLoaded] = useState(false);
+  const [hasTimedOutUnavailable, setHasTimedOutUnavailable] = useState(false);
+  const [embedState, setEmbedState] = useState<{
+    status: UseExtensionSiteEmbedResult['status'];
+    errorReason: UseExtensionSiteEmbedResult['errorReason'];
+  }>({
+    status: 'idle',
+    errorReason: null,
+  });
+  const hasNotifiedUnavailableRef = useRef(false);
+  const previewDomain = useMemo(() => {
+    if (previewHost && previewHost.length > 0) {
+      return previewHost;
+    }
+
+    try {
+      return new URL(targetUrl).hostname;
+    } catch {
+      return targetUrl;
+    }
+  }, [previewHost, targetUrl]);
+  const previewUrlLabel = useMemo(() => {
+    try {
+      const parsedTarget = new URL(targetUrl);
+      return `${parsedTarget.hostname}${parsedTarget.pathname}`;
+    } catch {
+      return targetUrl;
+    }
+  }, [targetUrl]);
+  const faviconSrc = useMemo(() => {
+    const pixelRatio = globalThis?.window?.devicePixelRatio ?? 1;
+    const iconSize = Math.max(Math.round(16 * pixelRatio), 96);
+
+    return `${apiUrl}/icon?url=${encodeURIComponent(
+      previewDomain,
+    )}&size=${iconSize}`;
+  }, [previewDomain]);
+
+  useEffect(() => {
+    // #region agent log
+    fetch(
+      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Debug-Session-Id': '8fe848',
+        },
+        body: JSON.stringify({
+          sessionId: '8fe848',
+          runId: 'initial',
+          hypothesisId: 'H2',
+          location: 'PostArticlePreviewEmbed.tsx:106',
+          message: 'embed target changed reset local preview state',
+          data: { targetUrl, extensionId },
+          timestamp: Date.now(),
+        }),
+      },
+    ).catch(() => {});
+    // #endregion
+    setShowDirectWebPreview(false);
+    setHasPreviewFrameLoaded(false);
+    setHasTimedOutUnavailable(false);
+    setEmbedState({ status: 'idle', errorReason: null });
+    hasNotifiedUnavailableRef.current = false;
+  }, [extensionId, targetUrl]);
+
+  const onEnableDirectWebPreview = useCallback(() => {
+    // #region agent log
+    fetch(
+      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Debug-Session-Id': '8fe848',
+        },
+        body: JSON.stringify({
+          sessionId: '8fe848',
+          runId: 'initial',
+          hypothesisId: 'H6',
+          location: 'PostArticlePreviewEmbed.tsx:160',
+          message: 'enable clicked in webapp prompt',
+          data: { targetUrl, extensionId },
+          timestamp: Date.now(),
+        }),
+      },
+    ).catch(() => {});
+    // #endregion
+    setHasPreviewFrameLoaded(false);
+    setHasTimedOutUnavailable(false);
+    setShowDirectWebPreview(true);
+  }, [extensionId, targetUrl]);
+
+  const onExtensionPreviewFrameLoad = useCallback(() => {
+    // #region agent log
+    fetch(
+      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Debug-Session-Id': '8fe848',
+        },
+        body: JSON.stringify({
+          sessionId: '8fe848',
+          runId: 'initial',
+          hypothesisId: 'H1',
+          location: 'PostArticlePreviewEmbed.tsx:141',
+          message: 'extension preview iframe onLoad fired',
+          data: { targetUrl, extensionId },
+          timestamp: Date.now(),
+        }),
+      },
+    ).catch(() => {});
+    // #endregion
+    setHasPreviewFrameLoaded(true);
+  }, [extensionId, targetUrl]);
+
+  const onCopyPreviewUrl = useCallback(() => {
+    if (!targetUrl) {
+      return;
+    }
+
+    navigator.clipboard?.writeText(targetUrl).catch(() => {});
+  }, [targetUrl]);
+
+  const isExtensionPreviewAwaitingLoad =
+    !!extensionId &&
+    embedState.status === 'ready' &&
+    !hasPreviewFrameLoaded &&
+    !forceUnavailable;
+  const showDirectPreviewFrame = !extensionId && showDirectWebPreview;
+  const isDirectPreviewAwaitingLoad =
+    showDirectPreviewFrame && !hasPreviewFrameLoaded && !forceUnavailable;
+  const shouldShowUnavailablePrompt =
+    forceUnavailable || hasTimedOutUnavailable;
+  const shouldShowPrompt = !extensionId && !showDirectWebPreview;
+  const shouldShowPreviewHeader =
+    (showDirectPreviewFrame || !!extensionId) && !shouldShowUnavailablePrompt;
+
+  useEffect(() => {
+    const timeout =
+      isExtensionPreviewAwaitingLoad || isDirectPreviewAwaitingLoad
+        ? globalThis.setTimeout(() => {
+            // #region agent log
+            fetch(
+              'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+              {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'X-Debug-Session-Id': '8fe848',
+                },
+                body: JSON.stringify({
+                  sessionId: '8fe848',
+                  runId: 'initial',
+                  hypothesisId: 'H1',
+                  location: 'PostArticlePreviewEmbed.tsx:165',
+                  message: 'preview load timeout fired',
+                  data: {
+                    targetUrl,
+                    extensionId,
+                    isExtensionPreviewAwaitingLoad,
+                    isDirectPreviewAwaitingLoad,
+                  },
+                  timestamp: Date.now(),
+                }),
+              },
+            ).catch(() => {});
+            // #endregion
+            if (hasNotifiedUnavailableRef.current) {
+              return;
+            }
+
+            hasNotifiedUnavailableRef.current = true;
+            setHasTimedOutUnavailable(true);
+            onPreviewUnavailable?.();
+          }, 7000)
+        : undefined;
+
+    return () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+      }
+    };
+  }, [
+    isDirectPreviewAwaitingLoad,
+    isExtensionPreviewAwaitingLoad,
+    onPreviewUnavailable,
+  ]);
+
+  let previewContent: ReactElement;
+  if (shouldShowUnavailablePrompt) {
+    previewContent = (
+      <EmbeddedBrowsingWebPrompt
+        onDismiss={onDismissArticlePreview}
+        isPreviewUnavailable
+        unavailablePreviewUrl={targetUrl}
+      />
+    );
+  } else if (showDirectPreviewFrame) {
+    previewContent = (
+      <iframe
+        key={targetUrl}
+        src={targetUrl}
+        title="Article preview"
+        className="h-full min-h-[28rem] w-full flex-1 border-0"
+        onLoad={onExtensionPreviewFrameLoad}
+      />
+    );
+  } else {
+    previewContent = (
+      <ExtensionSiteEmbed
+        extensionId={extensionId}
+        targetUrl={targetUrl}
+        enabled
+        className="h-full min-h-[28rem] w-full flex-1 border-0"
+        permissionFrameTitle="Embedded browsing permissions"
+        targetFrameTitle="Article preview"
+        onTargetFrameLoad={onExtensionPreviewFrameLoad}
+        onStateChange={(state) => {
+          // #region agent log
+          fetch(
+            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Debug-Session-Id': '8fe848',
+              },
+              body: JSON.stringify({
+                sessionId: '8fe848',
+                runId: 'initial',
+                hypothesisId: 'H2',
+                location: 'PostArticlePreviewEmbed.tsx:247',
+                message: 'extension embed state updated',
+                data: {
+                  status: state.status,
+                  errorReason: state.errorReason,
+                  hasPreviewFrameLoaded,
+                },
+                timestamp: Date.now(),
+              }),
+            },
+          ).catch(() => {});
+          // #endregion
+          setEmbedState({
+            status: state.status,
+            errorReason: state.errorReason,
+          });
+
+          if (state.status !== 'ready') {
+            setHasPreviewFrameLoaded(false);
+          }
+        }}
+        renderState={(state) => {
+          if (
+            state.errorReason === 'preview-unavailable' &&
+            onPreviewUnavailable &&
+            !hasNotifiedUnavailableRef.current
+          ) {
+            hasNotifiedUnavailableRef.current = true;
+            onPreviewUnavailable();
+          }
+
+          return renderEmbedChrome({
+            extensionId,
+            state,
+          });
+        }}
+      />
+    );
+  }
+
+  return (
+    <section
+      className={classNames(
+        'relative hidden min-h-0 min-w-0 flex-1 flex-col overflow-visible bg-background-default laptop:flex',
+        className,
+      )}
+      aria-label="Article preview"
+    >
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-visible">
+        {shouldShowPreviewHeader ? (
+          <div className="flex items-center gap-2 border-b border-border-subtlest-tertiary px-3 py-2">
+            <img
+              src={faviconSrc}
+              alt=""
+              className="size-4 shrink-0 rounded-4"
+              loading="lazy"
+              aria-hidden
+            />
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Secondary}
+              className="min-w-0 flex-1 truncate"
+            >
+              <button
+                type="button"
+                onClick={onCopyPreviewUrl}
+                className="block w-full truncate text-left"
+                title="Copy preview URL"
+                aria-label="Copy preview URL"
+              >
+                {previewUrlLabel}
+              </button>
+            </Typography>
+          </div>
+        ) : null}
+        {previewContent}
+        {shouldShowPrompt && !shouldShowUnavailablePrompt ? (
+          <EmbeddedBrowsingWebPrompt
+            onDismiss={onDismissArticlePreview}
+            onEnablePreview={onEnableDirectWebPreview}
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 955d0fabffa..d118c669bf3 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import type { Post } from '../../graphql/posts';
-import { isVideoPost } from '../../graphql/posts';
+import { isVideoPost, PostType } from '../../graphql/posts';
+import { isEmbeddableSiteTarget } from '../../features/extensionEmbed/common';
 import PostMetadata from '../cards/common/PostMetadata';
 import { PostWidgets } from './PostWidgets';
 import PostToc from '../widgets/PostToc';
@@ -28,6 +29,9 @@ import { useSmartTitle } from '../../hooks/post/useSmartTitle';
 import { SmartPrompt } from './smartPrompts/SmartPrompt';
 import { PostTagList } from './tags/PostTagList';
 import PostSourceInfo from './PostSourceInfo';
+import { PostArticlePreviewEmbed } from './PostArticlePreviewEmbed';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { EarthIcon, MiniCloseIcon } from '../icons';
 
 type PostContentRawProps = Omit<PostContentProps, 'post'> & { post: Post };
 
@@ -81,6 +85,39 @@ export function PostContentRaw({
     isCompactModalSpacing ? 'mt-3 !typo-callout' : 'mt-4 !typo-callout',
     metadataMarginClassName,
   );
+  const embedArticleTargetUrl =
+    post.permalink && isEmbeddableSiteTarget(post.permalink)
+      ? post.permalink
+      : null;
+
+  const showArticlePreviewEmbed =
+    !isPostPage &&
+    !isVideoType &&
+    post.type === PostType.Article &&
+    embedArticleTargetUrl !== null;
+
+  const [isArticlePreviewDismissed, setArticlePreviewDismissed] =
+    useState(false);
+  const [isArticlePreviewUnavailable, setArticlePreviewUnavailable] =
+    useState(false);
+
+  useEffect(() => {
+    setArticlePreviewDismissed(false);
+    setArticlePreviewUnavailable(false);
+  }, [post.id]);
+
+  const showArticlePreviewColumn =
+    showArticlePreviewEmbed && !isArticlePreviewDismissed;
+
+  const onToggleArticlePreview = useCallback(() => {
+    setArticlePreviewDismissed((currentState) => !currentState);
+  }, []);
+
+  const onPreviewUnavailable = useCallback(() => {
+    setArticlePreviewUnavailable(true);
+    setArticlePreviewDismissed(true);
+  }, []);
+
   const containerClass = classNames(
     'laptop:flex-row laptop:pb-0',
     className?.container,
@@ -121,6 +158,152 @@ export function PostContentRaw({
     );
   };
 
+  const postMainColumn = (
+    <PostContainer
+      className={classNames(
+        'relative',
+        className?.content,
+        showArticlePreviewColumn &&
+          'laptop:max-w-[22rem] laptop:!flex-none laptop:overflow-y-auto laptop:overscroll-y-contain',
+      )}
+      data-testid="postContainer"
+    >
+      <BasePostContent
+        className={{
+          ...className,
+          onboarding: classNames(className?.onboarding, backToSquad && 'mb-6'),
+          navigation: {
+            actions: className?.navigation?.actions,
+            container: classNames('pt-6', className?.navigation?.container),
+          },
+        }}
+        isPostPage={isPostPage}
+        isFallback={isFallback}
+        customNavigation={customNavigation}
+        shouldOnboardAuthor={shouldOnboardAuthor}
+        navigationProps={navigationProps}
+        engagementProps={engagementActions}
+        origin={origin}
+        post={post}
+      >
+        <div className={isCompactModalSpacing ? 'my-4' : 'my-6'}>
+          <PostSourceInfo
+            className="mb-3"
+            post={post}
+            onClose={onClose}
+            onReadArticle={onReadArticle}
+            hideSubscribeAction={hideSubscribeAction}
+          />
+          <h1
+            className="break-words font-bold typo-large-title"
+            data-testid="post-modal-title"
+          >
+            <ArticleLink>{title}</ArticleLink>
+          </h1>
+          {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
+        </div>
+        {isVideoType && (
+          <YoutubeVideo
+            placeholderProps={{ post, onWatchVideo: onReadArticle }}
+            videoId={post.videoId ?? ''}
+            className="mb-7"
+          />
+        )}
+        {post.summary && (
+          <SmartPrompt
+            post={post}
+            className={isCompactModalSpacing ? 'mb-4 gap-2' : undefined}
+          />
+        )}
+        <PostTagList post={post} />
+        <PostMetadata
+          createdAt={post.createdAt}
+          readTime={post.readTime}
+          isVideoType={isVideoType}
+          showBelowThresholdLabel={false}
+          className={metadataClassName}
+          domain={
+            !isVideoType &&
+            post.domain &&
+            post.domain.length > 0 && (
+              <TruncateText>
+                From{' '}
+                <ArticleLink title={post.domain} className="hover:underline">
+                  {post.domain}
+                </ArticleLink>
+              </TruncateText>
+            )
+          }
+        />
+        {!isVideoType && (
+          <ArticleLink
+            className={classNames(
+              'block cursor-pointer overflow-hidden rounded-16',
+              isCompactModalSpacing || hasToc ? 'mb-4' : 'mb-10',
+            )}
+            style={{ maxWidth: '25.625rem' }}
+          >
+            <LazyImage
+              imgSrc={post.image}
+              imgAlt="Post cover image"
+              ratio="49%"
+              eager
+              fallbackSrc={cloudinaryPostImageCoverPlaceholder}
+              fetchPriority="high"
+            />
+          </ArticleLink>
+        )}
+        {hasToc && (
+          <PostToc
+            post={post}
+            collapsible
+            className="mb-4 flex laptop:hidden"
+          />
+        )}
+        {showCodeSnippets && (
+          <PostCodeSnippets
+            className={isCompactModalSpacing ? 'mb-4' : 'mb-6'}
+            post={post}
+          />
+        )}
+      </BasePostContent>
+    </PostContainer>
+  );
+
+  const postWidgetsColumn = (
+    <PostWidgets
+      onReadArticle={onReadArticle}
+      post={post}
+      className="!gap-2 pb-8 pt-4 laptop:border-l laptop:border-border-subtlest-tertiary"
+      onClose={onClose}
+      origin={origin}
+      onCopyPostLink={onCopyPostLink}
+    />
+  );
+
+  const articlePreviewToggleTab = showArticlePreviewEmbed ? (
+    <div className="relative hidden laptop:flex laptop:min-h-0 laptop:w-0 laptop:flex-none">
+      <Button
+        type="button"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Primary}
+        className="z-30 absolute right-0 top-4 !rounded-r-none"
+        onClick={onToggleArticlePreview}
+        icon={showArticlePreviewColumn ? <MiniCloseIcon /> : <EarthIcon />}
+        title={
+          showArticlePreviewColumn
+            ? 'Hide inline article preview'
+            : 'Show inline article preview'
+        }
+        aria-label={
+          showArticlePreviewColumn
+            ? 'Hide inline article preview'
+            : 'Show inline article preview'
+        }
+      />
+    </div>
+  ) : null;
+
   return (
     <PostContentContainer
       hasNavigation={hasNavigation}
@@ -142,121 +325,27 @@ export function PostContentRaw({
           : undefined
       }
     >
-      <PostContainer
-        className={classNames('relative', className?.content)}
-        data-testid="postContainer"
-      >
-        <BasePostContent
-          className={{
-            ...className,
-            onboarding: classNames(
-              className?.onboarding,
-              backToSquad && 'mb-6',
-            ),
-            navigation: {
-              actions: className?.navigation?.actions,
-              container: classNames('pt-6', className?.navigation?.container),
-            },
-          }}
-          isPostPage={isPostPage}
-          isFallback={isFallback}
-          customNavigation={customNavigation}
-          shouldOnboardAuthor={shouldOnboardAuthor}
-          navigationProps={navigationProps}
-          engagementProps={engagementActions}
-          origin={origin}
-          post={post}
-        >
-          <div className={isCompactModalSpacing ? 'my-4' : 'my-6'}>
-            <PostSourceInfo
-              className="mb-3"
-              post={post}
-              onClose={onClose}
-              onReadArticle={onReadArticle}
-              hideSubscribeAction={hideSubscribeAction}
-            />
-            <h1
-              className="break-words font-bold typo-large-title"
-              data-testid="post-modal-title"
-            >
-              <ArticleLink>{title}</ArticleLink>
-            </h1>
-            {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
-          </div>
-          {isVideoType && (
-            <YoutubeVideo
-              placeholderProps={{ post, onWatchVideo: onReadArticle }}
-              videoId={post.videoId ?? ''}
-              className="mb-7"
+      {showArticlePreviewEmbed ? (
+        <div className="flex w-full min-w-0 flex-col laptop:min-h-0 laptop:flex-1 laptop:flex-row laptop:items-stretch">
+          {postMainColumn}
+          {articlePreviewToggleTab}
+          {showArticlePreviewColumn ? (
+            <PostArticlePreviewEmbed
+              targetUrl={embedArticleTargetUrl}
+              previewHost={post.domain ?? undefined}
+              onDismissArticlePreview={onToggleArticlePreview}
+              onPreviewUnavailable={onPreviewUnavailable}
+              forceUnavailable={isArticlePreviewUnavailable}
             />
-          )}
-          {post.summary && (
-            <SmartPrompt
-              post={post}
-              className={isCompactModalSpacing ? 'mb-4 gap-2' : undefined}
-            />
-          )}
-          <PostTagList post={post} />
-          <PostMetadata
-            createdAt={post.createdAt}
-            readTime={post.readTime}
-            isVideoType={isVideoType}
-            showBelowThresholdLabel={false}
-            className={metadataClassName}
-            domain={
-              !isVideoType &&
-              post.domain &&
-              post.domain.length > 0 && (
-                <TruncateText>
-                  From{' '}
-                  <ArticleLink title={post.domain} className="hover:underline">
-                    {post.domain}
-                  </ArticleLink>
-                </TruncateText>
-              )
-            }
-          />
-          {!isVideoType && (
-            <ArticleLink
-              className={classNames(
-                'block cursor-pointer overflow-hidden rounded-16',
-                isCompactModalSpacing || hasToc ? 'mb-4' : 'mb-10',
-              )}
-              style={{ maxWidth: '25.625rem' }}
-            >
-              <LazyImage
-                imgSrc={post.image}
-                imgAlt="Post cover image"
-                ratio="49%"
-                eager
-                fallbackSrc={cloudinaryPostImageCoverPlaceholder}
-                fetchPriority="high"
-              />
-            </ArticleLink>
-          )}
-          {hasToc && (
-            <PostToc
-              post={post}
-              collapsible
-              className="mb-4 flex laptop:hidden"
-            />
-          )}
-          {showCodeSnippets && (
-            <PostCodeSnippets
-              className={isCompactModalSpacing ? 'mb-4' : 'mb-6'}
-              post={post}
-            />
-          )}
-        </BasePostContent>
-      </PostContainer>
-      <PostWidgets
-        onReadArticle={onReadArticle}
-        post={post}
-        className="!gap-2 pb-8 pt-4"
-        onClose={onClose}
-        origin={origin}
-        onCopyPostLink={onCopyPostLink}
-      />
+          ) : null}
+          {postWidgetsColumn}
+        </div>
+      ) : (
+        <>
+          {postMainColumn}
+          {postWidgetsColumn}
+        </>
+      )}
     </PostContentContainer>
   );
 }
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
new file mode 100644
index 00000000000..f67a7ff493f
--- /dev/null
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
@@ -0,0 +1,103 @@
+.root {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
+  min-height: 28rem;
+  overflow: visible;
+}
+
+/* Keeps the card near the vertical center of the modal scrollport while scrolling with content */
+.stickyShell {
+  position: sticky;
+  top: max(1rem, calc(50svh - 11rem));
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.ambient {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0.44;
+  background:
+    repeating-linear-gradient(
+      120deg,
+      color-mix(in srgb, var(--theme-border-subtlest-tertiary) 12%, transparent)
+        0,
+      color-mix(in srgb, var(--theme-border-subtlest-tertiary) 12%, transparent)
+        0.75rem,
+      transparent 0.75rem,
+      transparent 1.5rem
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--theme-text-tertiary) 5%, transparent),
+      color-mix(in srgb, var(--theme-border-subtlest-tertiary) 6%, transparent)
+    );
+  background-size: 190% 190%, 100% 100%;
+  animation: embeddedBrowsingStripeShift 42s linear infinite;
+  will-change: background-position;
+}
+
+.ambient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(
+      120deg,
+      transparent 0,
+      transparent 1.75rem,
+      color-mix(in srgb, var(--theme-text-tertiary) 4%, transparent) 1.75rem,
+      color-mix(in srgb, var(--theme-text-tertiary) 4%, transparent) 2.5rem
+    );
+  background-size: 220% 220%;
+  animation: embeddedBrowsingStripeShiftReverse 58s linear infinite;
+  opacity: 0.24;
+}
+
+@keyframes embeddedBrowsingStripeShift {
+  0% {
+    background-position: 0% 0%, 50% 50%;
+  }
+
+  100% {
+    background-position: 220% 120%, 50% 50%;
+  }
+}
+
+@keyframes embeddedBrowsingStripeShiftReverse {
+  0% {
+    background-position: 220% 140%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient,
+  .ambient::before {
+    animation: none;
+  }
+
+  .ambient {
+    background-position: 50% 50%, 50% 50%;
+    opacity: 0.42;
+  }
+
+  .ambient::before {
+    opacity: 0.18;
+  }
+}
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
new file mode 100644
index 00000000000..ddf3364f748
--- /dev/null
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -0,0 +1,137 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../components/typography/Typography';
+import { downloadBrowserExtension } from '../../lib/constants';
+import styles from './EmbeddedBrowsingWebPrompt.module.css';
+
+export type EmbeddedBrowsingWebPromptProps = {
+  onDismiss?: () => void;
+  onEnablePreview?: () => void;
+  isPreviewUnavailable?: boolean;
+  unavailablePreviewUrl?: string;
+};
+
+/**
+ * Webapp fallback when the extension install id is unknown. Copy and structure
+ * should stay aligned with `packages/extension/src/frame/render.ts`
+ * (`renderPermissionPrompt`).
+ */
+export function EmbeddedBrowsingWebPrompt({
+  onEnablePreview,
+  isPreviewUnavailable = false,
+  unavailablePreviewUrl,
+}: EmbeddedBrowsingWebPromptProps): ReactElement {
+  const externalPreviewUrl =
+    unavailablePreviewUrl && unavailablePreviewUrl.length > 0
+      ? unavailablePreviewUrl
+      : null;
+  const showUnavailableActions = isPreviewUnavailable && !!externalPreviewUrl;
+
+  let primaryAction: ReactElement;
+  if (showUnavailableActions) {
+    primaryAction = (
+      <Button
+        tag="a"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Medium}
+        className="min-w-[8.5rem]"
+        href={externalPreviewUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Open externally
+      </Button>
+    );
+  } else if (onEnablePreview) {
+    primaryAction = (
+      <Button
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Medium}
+        className="min-w-[8.5rem]"
+        onClick={onEnablePreview}
+      >
+        Enable
+      </Button>
+    );
+  } else {
+    primaryAction = (
+      <Button
+        tag="a"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Medium}
+        className="min-w-[8.5rem]"
+        href={downloadBrowserExtension}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Enable
+      </Button>
+    );
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.ambient} aria-hidden />
+      <div className={styles.stickyShell}>
+        <div className="z-10 relative flex h-fit w-full max-w-[40rem] shrink-0 flex-col items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6 text-center shadow-2">
+          <Typography
+            tag={TypographyTag.H2}
+            type={TypographyType.Title3}
+            color={TypographyColor.Primary}
+            bold
+          >
+            {isPreviewUnavailable
+              ? 'Preview not available'
+              : 'Enable embedded browsing'}
+          </Typography>
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Callout}
+            color={TypographyColor.Secondary}
+            className="!mt-0"
+          >
+            {isPreviewUnavailable
+              ? 'This site blocks embedded previews.'
+              : 'To load websites inside daily.dev, allow this extension to modify response headers on embedded pages.'}
+          </Typography>
+          <div className="mt-1 flex flex-wrap items-center justify-center gap-3">
+            {primaryAction}
+          </div>
+          {isPreviewUnavailable && externalPreviewUrl ? (
+            <Typography
+              tag={TypographyTag.Link}
+              type={TypographyType.Footnote}
+              className="max-w-full break-all"
+              href={externalPreviewUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {externalPreviewUrl}
+            </Typography>
+          ) : null}
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+            className="!mt-0"
+          >
+            {isPreviewUnavailable
+              ? 'Open the full page in a new tab to keep reading.'
+              : 'This is optional and only applies to pages embedded by daily.dev.'}
+          </Typography>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx b/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
index c9b26c9f1b3..b70c96971c1 100644
--- a/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
+++ b/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useExtensionSiteEmbed } from './useExtensionSiteEmbed';
 import type {
   UseExtensionSiteEmbedOptions,
@@ -11,6 +11,8 @@ interface ExtensionSiteEmbedProps extends UseExtensionSiteEmbedOptions {
   permissionFrameTitle?: string;
   targetFrameTitle?: string;
   renderState?: (state: UseExtensionSiteEmbedResult) => ReactNode;
+  onStateChange?: (state: UseExtensionSiteEmbedResult) => void;
+  onTargetFrameLoad?: () => void;
 }
 
 const hiddenPermissionFrameClassName =
@@ -22,12 +24,18 @@ export const ExtensionSiteEmbed = ({
   permissionFrameTitle = 'Extension permission frame',
   targetFrameTitle = 'Embedded site',
   renderState,
+  onStateChange,
+  onTargetFrameLoad,
   ...options
 }: ExtensionSiteEmbedProps): ReactElement | null => {
   const state = useExtensionSiteEmbed(options);
   const view = renderState?.(state);
   const hasAnyFrame = !!state.permissionFrameSrc || !!state.targetFrameSrc;
 
+  useEffect(() => {
+    onStateChange?.(state);
+  }, [onStateChange, state]);
+
   if (!hasAnyFrame && !view) {
     return null;
   }
@@ -56,6 +64,7 @@ export const ExtensionSiteEmbed = ({
               src={state.targetFrameSrc}
               title={targetFrameTitle}
               className={className}
+              onLoad={onTargetFrameLoad}
             />
           ) : null}
         </div>
diff --git a/packages/shared/src/features/extensionEmbed/common.ts b/packages/shared/src/features/extensionEmbed/common.ts
index 79f280c02dc..d9b8c359d06 100644
--- a/packages/shared/src/features/extensionEmbed/common.ts
+++ b/packages/shared/src/features/extensionEmbed/common.ts
@@ -29,6 +29,7 @@ export type ExtensionSiteEmbedFrameErrorReason =
   | 'permission-denied'
   | 'permission-request-failed'
   | 'enable-frame-embedding-failed'
+  | 'preview-unavailable'
   | 'missing-target'
   | 'invalid-target'
   | 'unsupported-target-protocol'
@@ -117,5 +118,9 @@ export const getExtensionSiteEmbedErrorMessage = ({
     return 'The extension could not prepare this tab for embedding.';
   }
 
+  if (reason === 'preview-unavailable') {
+    return 'Preview not available for this site.';
+  }
+
   return 'The extension could not prepare the embedded site.';
 };
diff --git a/packages/shared/src/features/extensionEmbed/extensionEmbedMessaging.ts b/packages/shared/src/features/extensionEmbed/extensionEmbedMessaging.ts
index 6f19bb50998..fe202822dba 100644
--- a/packages/shared/src/features/extensionEmbed/extensionEmbedMessaging.ts
+++ b/packages/shared/src/features/extensionEmbed/extensionEmbedMessaging.ts
@@ -48,7 +48,7 @@ type HandleExtensionSiteEmbedMessageOptions = {
   onEmbeddingReady: () => void;
   onReloadRequested: () => void;
   onMissingPermission: () => void;
-  onError: (message: string) => void;
+  onError: (payload: { message: string; reason?: string }) => void;
 };
 
 export const handleExtensionSiteEmbedMessage = ({
@@ -102,10 +102,11 @@ export const handleExtensionSiteEmbedMessage = ({
     return;
   }
 
-  onError(
-    getExtensionSiteEmbedErrorMessage({
+  onError({
+    message: getExtensionSiteEmbedErrorMessage({
       reason: message.reason,
       error: message.error,
     }),
-  );
+    reason: message.reason,
+  });
 };
diff --git a/packages/shared/src/features/extensionEmbed/getBrowserExtensionInstallId.ts b/packages/shared/src/features/extensionEmbed/getBrowserExtensionInstallId.ts
new file mode 100644
index 00000000000..09254fc3591
--- /dev/null
+++ b/packages/shared/src/features/extensionEmbed/getBrowserExtensionInstallId.ts
@@ -0,0 +1,18 @@
+/**
+ * Resolves the installed browser extension id for embedded article previews.
+ * - In the extension new tab / extension surfaces, `window.location.origin` is
+ *   `chrome-extension://<id>`.
+ * - On the webapp, set `NEXT_PUBLIC_DAILY_EXTENSION_ID` to the Chrome Web Store
+ *   extension id so iframe URLs can point at `frame.html`.
+ */
+export const getBrowserExtensionInstallId = (): string | null => {
+  if (typeof window !== 'undefined') {
+    const match = /^chrome-extension:\/\/([^/]+)/.exec(window.location.origin);
+    if (match?.[1]) {
+      return match[1];
+    }
+  }
+
+  const fromEnv = process.env.NEXT_PUBLIC_DAILY_EXTENSION_ID?.trim();
+  return fromEnv || null;
+};
diff --git a/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts b/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
index 5eebb061160..57e8b6e0c70 100644
--- a/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
+++ b/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
@@ -34,6 +34,7 @@ export interface UseExtensionSiteEmbedResult {
   showTargetFrame: boolean;
   status: ExtensionSiteEmbedStatus;
   error: string | null;
+  errorReason: string | null;
   isTargetValid: boolean;
   reset: () => void;
 }
@@ -49,6 +50,7 @@ export const useExtensionSiteEmbed = ({
   const [frameMode, setFrameMode] = useState<FrameMode>('permission-check');
   const [status, setStatus] = useState<ExtensionSiteEmbedStatus>('idle');
   const [error, setError] = useState<string | null>(null);
+  const [errorReason, setErrorReason] = useState<string | null>(null);
   const permissionFrameRef = useRef<HTMLIFrameElement | null>(null);
   const trimmedExtensionId = extensionId?.trim() ?? '';
   const trimmedTargetUrl = targetUrl.trim();
@@ -86,6 +88,7 @@ export const useExtensionSiteEmbed = ({
       setFrameMode('permission-check');
       setStatus(nextStatus);
       setError(nextError);
+      setErrorReason(null);
     },
     [postDisableMessage, stopReconnectLoop],
   );
@@ -134,29 +137,97 @@ export const useExtensionSiteEmbed = ({
         expectedExtensionOrigin,
         isReconnectPending: isReconnectPendingRef.current,
         onPermissionsReady: () => {
+          // #region agent log
+          fetch(
+            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Debug-Session-Id': '8fe848',
+              },
+              body: JSON.stringify({
+                sessionId: '8fe848',
+                runId: 'initial',
+                hypothesisId: 'H2',
+                location: 'useExtensionSiteEmbed.ts:136',
+                message: 'extension message permissions-ready',
+                data: { targetUrl: trimmedTargetUrl, extensionId: trimmedExtensionId },
+                timestamp: Date.now(),
+              }),
+            },
+          ).catch(() => {});
+          // #endregion
           setStatus('preparing-tab');
           setError(null);
+          setErrorReason(null);
         },
         onEmbeddingReady: () => {
+          // #region agent log
+          fetch(
+            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Debug-Session-Id': '8fe848',
+              },
+              body: JSON.stringify({
+                sessionId: '8fe848',
+                runId: 'initial',
+                hypothesisId: 'H2',
+                location: 'useExtensionSiteEmbed.ts:144',
+                message: 'extension message embedding-ready',
+                data: { targetUrl: trimmedTargetUrl, extensionId: trimmedExtensionId },
+                timestamp: Date.now(),
+              }),
+            },
+          ).catch(() => {});
+          // #endregion
           stopReconnectLoop();
           setFrameMode('target-embed');
           setStatus('ready');
           setError(null);
+          setErrorReason(null);
         },
         onReloadRequested: () => {
           setStatus('reloading-extension');
           setError(null);
+          setErrorReason(null);
           startReconnectLoop();
         },
         onMissingPermission: () => {
           stopReconnectLoop();
           setStatus('permission-required');
           setError(null);
+          setErrorReason('missing-permission');
         },
-        onError: (nextError) => {
+        onError: ({ message, reason }) => {
+          // #region agent log
+          fetch(
+            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Debug-Session-Id': '8fe848',
+              },
+              body: JSON.stringify({
+                sessionId: '8fe848',
+                runId: 'initial',
+                hypothesisId: 'H3',
+                location: 'useExtensionSiteEmbed.ts:163',
+                message: 'extension embed error received',
+                data: { targetUrl: trimmedTargetUrl, reason, message },
+                timestamp: Date.now(),
+              }),
+            },
+          ).catch(() => {});
+          // #endregion
           stopReconnectLoop();
           setStatus('error');
-          setError(nextError);
+          setError(message);
+          setErrorReason(reason ?? null);
         },
       });
     };
@@ -225,6 +296,7 @@ export const useExtensionSiteEmbed = ({
     showTargetFrame: !!targetFrameSrc,
     status,
     error,
+    errorReason,
     isTargetValid,
     reset,
   };
diff --git a/packages/webapp/next.config.ts b/packages/webapp/next.config.ts
index c8e35a99212..964b03ead10 100644
--- a/packages/webapp/next.config.ts
+++ b/packages/webapp/next.config.ts
@@ -109,6 +109,11 @@ const nextConfig: NextConfig = {
     },
     env: {
       CURRENT_VERSION: version,
+      NEXT_PUBLIC_DAILY_EXTENSION_ID:
+        process.env.NEXT_PUBLIC_DAILY_EXTENSION_ID ||
+        process.env.EXTENSION_ID_CHROME ||
+        process.env.EXTENSION_ID_EDGE ||
+        '',
     },
     assetPrefix: process.env.NEXT_PUBLIC_CDN_ASSET_PREFIX,
     rewrites: async () => {

From aea284620553653d4ecc0705eaf3ce7074ae8213 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Sun, 12 Apr 2026 21:15:45 +0300
Subject: [PATCH 2/8] feat: responsive inline article preview with animated
 toggle

- Add tablet two-pane and laptop three-pane layout for inline article
  preview using CSS Grid with smooth grid-template-columns animation
- Isolate widgets column outside the animated grid so it stays fixed
  during expand/collapse transitions
- Stabilize embed callbacks with useCallback and ref-based state to
  fix infinite render loops in ExtensionSiteEmbed
- Remove debug fetch calls to 127.0.0.1:7456
- Add ChunkLoadError recovery for sidebar dynamic imports
- Clean up EmbeddedBrowsingWebPrompt copy

Made-with: Cursor
---
 .../post/PostArticlePreviewEmbed.tsx          | 180 ++++--------------
 .../src/components/post/PostContent.tsx       | 110 +++++++----
 .../shared/src/components/sidebar/Sidebar.tsx |  53 +++++-
 .../EmbeddedBrowsingWebPrompt.tsx             |  22 +--
 .../extensionEmbed/ExtensionSiteEmbed.tsx     |   8 +-
 .../extensionEmbed/useExtensionSiteEmbed.ts   |  63 ------
 6 files changed, 171 insertions(+), 265 deletions(-)

diff --git a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
index 9cd5b36cb37..d93f0d5bbf2 100644
--- a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
+++ b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
@@ -123,27 +123,6 @@ export function PostArticlePreviewEmbed({
   }, [previewDomain]);
 
   useEffect(() => {
-    // #region agent log
-    fetch(
-      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Debug-Session-Id': '8fe848',
-        },
-        body: JSON.stringify({
-          sessionId: '8fe848',
-          runId: 'initial',
-          hypothesisId: 'H2',
-          location: 'PostArticlePreviewEmbed.tsx:106',
-          message: 'embed target changed reset local preview state',
-          data: { targetUrl, extensionId },
-          timestamp: Date.now(),
-        }),
-      },
-    ).catch(() => {});
-    // #endregion
     setShowDirectWebPreview(false);
     setHasPreviewFrameLoaded(false);
     setHasTimedOutUnavailable(false);
@@ -152,56 +131,14 @@ export function PostArticlePreviewEmbed({
   }, [extensionId, targetUrl]);
 
   const onEnableDirectWebPreview = useCallback(() => {
-    // #region agent log
-    fetch(
-      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Debug-Session-Id': '8fe848',
-        },
-        body: JSON.stringify({
-          sessionId: '8fe848',
-          runId: 'initial',
-          hypothesisId: 'H6',
-          location: 'PostArticlePreviewEmbed.tsx:160',
-          message: 'enable clicked in webapp prompt',
-          data: { targetUrl, extensionId },
-          timestamp: Date.now(),
-        }),
-      },
-    ).catch(() => {});
-    // #endregion
     setHasPreviewFrameLoaded(false);
     setHasTimedOutUnavailable(false);
     setShowDirectWebPreview(true);
-  }, [extensionId, targetUrl]);
+  }, []);
 
   const onExtensionPreviewFrameLoad = useCallback(() => {
-    // #region agent log
-    fetch(
-      'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Debug-Session-Id': '8fe848',
-        },
-        body: JSON.stringify({
-          sessionId: '8fe848',
-          runId: 'initial',
-          hypothesisId: 'H1',
-          location: 'PostArticlePreviewEmbed.tsx:141',
-          message: 'extension preview iframe onLoad fired',
-          data: { targetUrl, extensionId },
-          timestamp: Date.now(),
-        }),
-      },
-    ).catch(() => {});
-    // #endregion
     setHasPreviewFrameLoaded(true);
-  }, [extensionId, targetUrl]);
+  }, []);
 
   const onCopyPreviewUrl = useCallback(() => {
     if (!targetUrl) {
@@ -225,36 +162,43 @@ export function PostArticlePreviewEmbed({
   const shouldShowPreviewHeader =
     (showDirectPreviewFrame || !!extensionId) && !shouldShowUnavailablePrompt;
 
+  const handleEmbedStateChange = useCallback(
+    (state: UseExtensionSiteEmbedResult) => {
+      setEmbedState({
+        status: state.status,
+        errorReason: state.errorReason,
+      });
+
+      if (state.status !== 'ready') {
+        setHasPreviewFrameLoaded(false);
+      }
+    },
+    [],
+  );
+
+  const handleRenderState = useCallback(
+    (state: UseExtensionSiteEmbedResult) => {
+      if (
+        state.errorReason === 'preview-unavailable' &&
+        onPreviewUnavailable &&
+        !hasNotifiedUnavailableRef.current
+      ) {
+        hasNotifiedUnavailableRef.current = true;
+        onPreviewUnavailable();
+      }
+
+      return renderEmbedChrome({
+        extensionId,
+        state,
+      });
+    },
+    [extensionId, onPreviewUnavailable],
+  );
+
   useEffect(() => {
     const timeout =
       isExtensionPreviewAwaitingLoad || isDirectPreviewAwaitingLoad
         ? globalThis.setTimeout(() => {
-            // #region agent log
-            fetch(
-              'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-              {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                  'X-Debug-Session-Id': '8fe848',
-                },
-                body: JSON.stringify({
-                  sessionId: '8fe848',
-                  runId: 'initial',
-                  hypothesisId: 'H1',
-                  location: 'PostArticlePreviewEmbed.tsx:165',
-                  message: 'preview load timeout fired',
-                  data: {
-                    targetUrl,
-                    extensionId,
-                    isExtensionPreviewAwaitingLoad,
-                    isDirectPreviewAwaitingLoad,
-                  },
-                  timestamp: Date.now(),
-                }),
-              },
-            ).catch(() => {});
-            // #endregion
             if (hasNotifiedUnavailableRef.current) {
               return;
             }
@@ -305,56 +249,8 @@ export function PostArticlePreviewEmbed({
         permissionFrameTitle="Embedded browsing permissions"
         targetFrameTitle="Article preview"
         onTargetFrameLoad={onExtensionPreviewFrameLoad}
-        onStateChange={(state) => {
-          // #region agent log
-          fetch(
-            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Debug-Session-Id': '8fe848',
-              },
-              body: JSON.stringify({
-                sessionId: '8fe848',
-                runId: 'initial',
-                hypothesisId: 'H2',
-                location: 'PostArticlePreviewEmbed.tsx:247',
-                message: 'extension embed state updated',
-                data: {
-                  status: state.status,
-                  errorReason: state.errorReason,
-                  hasPreviewFrameLoaded,
-                },
-                timestamp: Date.now(),
-              }),
-            },
-          ).catch(() => {});
-          // #endregion
-          setEmbedState({
-            status: state.status,
-            errorReason: state.errorReason,
-          });
-
-          if (state.status !== 'ready') {
-            setHasPreviewFrameLoaded(false);
-          }
-        }}
-        renderState={(state) => {
-          if (
-            state.errorReason === 'preview-unavailable' &&
-            onPreviewUnavailable &&
-            !hasNotifiedUnavailableRef.current
-          ) {
-            hasNotifiedUnavailableRef.current = true;
-            onPreviewUnavailable();
-          }
-
-          return renderEmbedChrome({
-            extensionId,
-            state,
-          });
-        }}
+        onStateChange={handleEmbedStateChange}
+        renderState={handleRenderState}
       />
     );
   }
@@ -362,7 +258,7 @@ export function PostArticlePreviewEmbed({
   return (
     <section
       className={classNames(
-        'relative hidden min-h-0 min-w-0 flex-1 flex-col overflow-visible bg-background-default laptop:flex',
+        'relative hidden min-h-0 min-w-0 flex-1 flex-col overflow-visible bg-background-default tablet:flex',
         className,
       )}
       aria-label="Article preview"
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index d118c669bf3..df4eb538e5e 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -32,6 +32,7 @@ import PostSourceInfo from './PostSourceInfo';
 import { PostArticlePreviewEmbed } from './PostArticlePreviewEmbed';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { EarthIcon, MiniCloseIcon } from '../icons';
+import { useViewSize, ViewSize } from '../../hooks';
 
 type PostContentRawProps = Omit<PostContentProps, 'post'> & { post: Post };
 
@@ -71,10 +72,12 @@ export function PostContentRaw({
   const onSendViewPost = useViewPost();
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const { title } = useSmartTitle(post);
+  const isLaptop = useViewSize(ViewSize.Laptop);
   const hasNavigation = !!onPreviousPost || !!onNextPost;
   const isVideoType = isVideoPost(post);
   const hasToc = (post.toc?.length ?? 0) > 0;
   const isCompactModalSpacing = !isPostPage;
+  const [isPreviewHydrated, setIsPreviewHydrated] = useState(false);
   let metadataMarginClassName = 'mb-8';
   if (isVideoType) {
     metadataMarginClassName = isCompactModalSpacing ? 'mb-3' : 'mb-4';
@@ -91,7 +94,7 @@ export function PostContentRaw({
       : null;
 
   const showArticlePreviewEmbed =
-    !isPostPage &&
+    isPreviewHydrated &&
     !isVideoType &&
     post.type === PostType.Article &&
     embedArticleTargetUrl !== null;
@@ -101,6 +104,10 @@ export function PostContentRaw({
   const [isArticlePreviewUnavailable, setArticlePreviewUnavailable] =
     useState(false);
 
+  useEffect(() => {
+    setIsPreviewHydrated(true);
+  }, []);
+
   useEffect(() => {
     setArticlePreviewDismissed(false);
     setArticlePreviewUnavailable(false);
@@ -119,7 +126,7 @@ export function PostContentRaw({
   }, []);
 
   const containerClass = classNames(
-    'laptop:flex-row laptop:pb-0',
+    'tablet:flex-row tablet:pb-0',
     className?.container,
   );
 
@@ -164,7 +171,7 @@ export function PostContentRaw({
         'relative',
         className?.content,
         showArticlePreviewColumn &&
-          'laptop:max-w-[22rem] laptop:!flex-none laptop:overflow-y-auto laptop:overscroll-y-contain',
+          'laptop:overflow-y-auto laptop:overscroll-y-contain',
       )}
       data-testid="postContainer"
     >
@@ -274,36 +281,18 @@ export function PostContentRaw({
     <PostWidgets
       onReadArticle={onReadArticle}
       post={post}
-      className="!gap-2 pb-8 pt-4 laptop:border-l laptop:border-border-subtlest-tertiary"
+      className={classNames(
+        '!gap-2 pb-8 pt-4',
+        showArticlePreviewEmbed && !isLaptop
+          ? 'border-t border-border-subtlest-tertiary'
+          : 'tablet:border-l tablet:border-border-subtlest-tertiary',
+      )}
       onClose={onClose}
       origin={origin}
       onCopyPostLink={onCopyPostLink}
     />
   );
 
-  const articlePreviewToggleTab = showArticlePreviewEmbed ? (
-    <div className="relative hidden laptop:flex laptop:min-h-0 laptop:w-0 laptop:flex-none">
-      <Button
-        type="button"
-        size={ButtonSize.Small}
-        variant={ButtonVariant.Primary}
-        className="z-30 absolute right-0 top-4 !rounded-r-none"
-        onClick={onToggleArticlePreview}
-        icon={showArticlePreviewColumn ? <MiniCloseIcon /> : <EarthIcon />}
-        title={
-          showArticlePreviewColumn
-            ? 'Hide inline article preview'
-            : 'Show inline article preview'
-        }
-        aria-label={
-          showArticlePreviewColumn
-            ? 'Hide inline article preview'
-            : 'Show inline article preview'
-        }
-      />
-    </div>
-  ) : null;
-
   return (
     <PostContentContainer
       hasNavigation={hasNavigation}
@@ -326,19 +315,60 @@ export function PostContentRaw({
       }
     >
       {showArticlePreviewEmbed ? (
-        <div className="flex w-full min-w-0 flex-col laptop:min-h-0 laptop:flex-1 laptop:flex-row laptop:items-stretch">
-          {postMainColumn}
-          {articlePreviewToggleTab}
-          {showArticlePreviewColumn ? (
-            <PostArticlePreviewEmbed
-              targetUrl={embedArticleTargetUrl}
-              previewHost={post.domain ?? undefined}
-              onDismissArticlePreview={onToggleArticlePreview}
-              onPreviewUnavailable={onPreviewUnavailable}
-              forceUnavailable={isArticlePreviewUnavailable}
-            />
-          ) : null}
-          {postWidgetsColumn}
+        <div className="flex w-full min-h-0 flex-1">
+          <div
+            className={classNames(
+              'grid min-h-0 min-w-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',
+              showArticlePreviewColumn
+                ? isLaptop
+                  ? 'grid-cols-[22rem_0px_1fr]'
+                  : 'grid-cols-[1fr_0px_1fr]'
+                : 'grid-cols-[1fr_0px_0fr]',
+            )}
+          >
+            <div className="flex min-w-0 flex-col overflow-hidden">
+              {postMainColumn}
+              {!isLaptop && postWidgetsColumn}
+            </div>
+            <div className="relative">
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Primary}
+                className={classNames(
+                  'z-30 absolute right-0 !rounded-r-none',
+                  isPostPage ? 'top-6' : 'top-4',
+                )}
+                onClick={onToggleArticlePreview}
+                icon={showArticlePreviewColumn ? <MiniCloseIcon /> : <EarthIcon />}
+                title={
+                  showArticlePreviewColumn
+                    ? 'Hide inline article preview'
+                    : 'Show inline article preview'
+                }
+                aria-label={
+                  showArticlePreviewColumn
+                    ? 'Hide inline article preview'
+                    : 'Show inline article preview'
+                }
+              />
+            </div>
+            <div
+              className={classNames(
+                'min-w-0 overflow-hidden transition-opacity duration-200 ease-in-out',
+                showArticlePreviewColumn ? 'opacity-100 delay-100' : 'opacity-0',
+              )}
+            >
+              <PostArticlePreviewEmbed
+                targetUrl={embedArticleTargetUrl}
+                previewHost={post.domain ?? undefined}
+                onDismissArticlePreview={onToggleArticlePreview}
+                onPreviewUnavailable={onPreviewUnavailable}
+                forceUnavailable={isArticlePreviewUnavailable}
+              />
+            </div>
+          </div>
+          {isLaptop && postWidgetsColumn}
         </div>
       ) : (
         <>
diff --git a/packages/shared/src/components/sidebar/Sidebar.tsx b/packages/shared/src/components/sidebar/Sidebar.tsx
index 347ed949036..7137265a3f0 100644
--- a/packages/shared/src/components/sidebar/Sidebar.tsx
+++ b/packages/shared/src/components/sidebar/Sidebar.tsx
@@ -5,15 +5,56 @@ import { useViewSize, ViewSize } from '../../hooks';
 import { useFeatureTheme } from '../../hooks/utils/useFeatureTheme';
 import { isExtension } from '../../lib/func';
 
+const chunkReloadSessionKey = 'sidebar_chunk_reload_attempted';
+
+const isChunkLoadError = (error: unknown): boolean => {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+
+  return (
+    error.name.includes('ChunkLoadError') ||
+    error.message.includes('ChunkLoadError') ||
+    error.message.includes('Failed to load chunk')
+  );
+};
+
+const tryReloadOnChunkError = (error: unknown): never => {
+  if (
+    typeof window !== 'undefined' &&
+    isChunkLoadError(error) &&
+    !window.sessionStorage.getItem(chunkReloadSessionKey)
+  ) {
+    window.sessionStorage.setItem(chunkReloadSessionKey, '1');
+    window.location.reload();
+  }
+
+  throw error;
+};
+
+const clearChunkReloadFlag = (): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.sessionStorage.removeItem(chunkReloadSessionKey);
+};
+
 const SidebarTablet = dynamic(() =>
-  import(/* webpackChunkName: "sidebarTablet" */ './SidebarTablet').then(
-    (mod) => mod.SidebarTablet,
-  ),
+  import('./SidebarTablet')
+    .then((mod) => {
+      clearChunkReloadFlag();
+      return mod.SidebarTablet;
+    })
+    .catch(tryReloadOnChunkError),
 );
 const SidebarDesktop = dynamic(() =>
-  import(/* webpackChunkName: "sidebarDesktop" */ './SidebarDesktop').then(
-    (mod) => mod.SidebarDesktop,
-  ),
+  import('./SidebarDesktop')
+    .then((mod) => {
+      clearChunkReloadFlag();
+      return mod.SidebarDesktop;
+    })
+    .catch(tryReloadOnChunkError),
 );
 
 interface SidebarProps {
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
index ddf3364f748..0a375447bc4 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -103,7 +103,7 @@ export function EmbeddedBrowsingWebPrompt({
           >
             {isPreviewUnavailable
               ? 'This site blocks embedded previews.'
-              : 'To load websites inside daily.dev, allow this extension to modify response headers on embedded pages.'}
+              : 'Let daily.dev load and preview sites inside the app. (Only affects embedded pages.)'}
           </Typography>
           <div className="mt-1 flex flex-wrap items-center justify-center gap-3">
             {primaryAction}
@@ -120,16 +120,16 @@ export function EmbeddedBrowsingWebPrompt({
               {externalPreviewUrl}
             </Typography>
           ) : null}
-          <Typography
-            tag={TypographyTag.P}
-            type={TypographyType.Footnote}
-            color={TypographyColor.Secondary}
-            className="!mt-0"
-          >
-            {isPreviewUnavailable
-              ? 'Open the full page in a new tab to keep reading.'
-              : 'This is optional and only applies to pages embedded by daily.dev.'}
-          </Typography>
+          {isPreviewUnavailable ? (
+            <Typography
+              tag={TypographyTag.P}
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+              className="!mt-0"
+            >
+              Open the full page in a new tab to keep reading.
+            </Typography>
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx b/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
index b70c96971c1..8f9e9b8c27d 100644
--- a/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
+++ b/packages/shared/src/features/extensionEmbed/ExtensionSiteEmbed.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useExtensionSiteEmbed } from './useExtensionSiteEmbed';
 import type {
   UseExtensionSiteEmbedOptions,
@@ -29,12 +29,14 @@ export const ExtensionSiteEmbed = ({
   ...options
 }: ExtensionSiteEmbedProps): ReactElement | null => {
   const state = useExtensionSiteEmbed(options);
+  const stateRef = useRef(state);
+  stateRef.current = state;
   const view = renderState?.(state);
   const hasAnyFrame = !!state.permissionFrameSrc || !!state.targetFrameSrc;
 
   useEffect(() => {
-    onStateChange?.(state);
-  }, [onStateChange, state]);
+    onStateChange?.(stateRef.current);
+  }, [onStateChange, state.status, state.errorReason]);
 
   if (!hasAnyFrame && !view) {
     return null;
diff --git a/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts b/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
index 57e8b6e0c70..38eb156732c 100644
--- a/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
+++ b/packages/shared/src/features/extensionEmbed/useExtensionSiteEmbed.ts
@@ -137,53 +137,11 @@ export const useExtensionSiteEmbed = ({
         expectedExtensionOrigin,
         isReconnectPending: isReconnectPendingRef.current,
         onPermissionsReady: () => {
-          // #region agent log
-          fetch(
-            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Debug-Session-Id': '8fe848',
-              },
-              body: JSON.stringify({
-                sessionId: '8fe848',
-                runId: 'initial',
-                hypothesisId: 'H2',
-                location: 'useExtensionSiteEmbed.ts:136',
-                message: 'extension message permissions-ready',
-                data: { targetUrl: trimmedTargetUrl, extensionId: trimmedExtensionId },
-                timestamp: Date.now(),
-              }),
-            },
-          ).catch(() => {});
-          // #endregion
           setStatus('preparing-tab');
           setError(null);
           setErrorReason(null);
         },
         onEmbeddingReady: () => {
-          // #region agent log
-          fetch(
-            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Debug-Session-Id': '8fe848',
-              },
-              body: JSON.stringify({
-                sessionId: '8fe848',
-                runId: 'initial',
-                hypothesisId: 'H2',
-                location: 'useExtensionSiteEmbed.ts:144',
-                message: 'extension message embedding-ready',
-                data: { targetUrl: trimmedTargetUrl, extensionId: trimmedExtensionId },
-                timestamp: Date.now(),
-              }),
-            },
-          ).catch(() => {});
-          // #endregion
           stopReconnectLoop();
           setFrameMode('target-embed');
           setStatus('ready');
@@ -203,27 +161,6 @@ export const useExtensionSiteEmbed = ({
           setErrorReason('missing-permission');
         },
         onError: ({ message, reason }) => {
-          // #region agent log
-          fetch(
-            'http://127.0.0.1:7456/ingest/fdbfceea-236d-410d-a991-0af0a5442e8e',
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Debug-Session-Id': '8fe848',
-              },
-              body: JSON.stringify({
-                sessionId: '8fe848',
-                runId: 'initial',
-                hypothesisId: 'H3',
-                location: 'useExtensionSiteEmbed.ts:163',
-                message: 'extension embed error received',
-                data: { targetUrl: trimmedTargetUrl, reason, message },
-                timestamp: Date.now(),
-              }),
-            },
-          ).catch(() => {});
-          // #endregion
           stopReconnectLoop();
           setStatus('error');
           setError(message);

From 3b0e46b6108d11393e8565dd31e0d760e2e56c90 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Sun, 12 Apr 2026 21:35:32 +0300
Subject: [PATCH 3/8] fix: keep browsing prompt viewport-centered while
 scrolling

- Use overflow-x: clip instead of overflow-hidden on the preview grid
  cell so it doesn't create a scroll context that traps sticky
- Center the prompt at 50vh with translateY(-50%) so it stays at the
  screen midpoint as the page scrolls
- Stretch .root to full height for proper layout propagation

Made-with: Cursor
---
 packages/shared/src/components/post/PostContent.tsx         | 2 +-
 .../extensionEmbed/EmbeddedBrowsingWebPrompt.module.css     | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index df4eb538e5e..840d5ad0945 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -355,7 +355,7 @@ export function PostContentRaw({
             </div>
             <div
               className={classNames(
-                'min-w-0 overflow-hidden transition-opacity duration-200 ease-in-out',
+                'flex min-w-0 flex-col [overflow-x:clip] transition-opacity duration-200 ease-in-out',
                 showArticlePreviewColumn ? 'opacity-100 delay-100' : 'opacity-0',
               )}
             >
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
index f67a7ff493f..9a8e8a23559 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
@@ -6,14 +6,16 @@
   align-items: stretch;
   align-self: stretch;
   width: 100%;
+  height: 100%;
   min-height: 28rem;
   overflow: visible;
 }
 
-/* Keeps the card near the vertical center of the modal scrollport while scrolling with content */
+/* Centers the card at the vertical midpoint of the user's screen */
 .stickyShell {
   position: sticky;
-  top: max(1rem, calc(50svh - 11rem));
+  top: 50vh;
+  transform: translateY(-50%);
   z-index: 2;
   display: flex;
   width: 100%;

From 0ea7b2d9597719383cc495e8dcc10cd022c52680 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 13 Apr 2026 10:43:57 +0300
Subject: [PATCH 4/8] feat: add mobile article preview drawer with responsive
 UI

- Show site domain name instead of redirect URL in preview header
- Align toggle button with PostSourceInfo on tablet screens
- Add mobile-only preview button next to source info
- Open article preview in a bottom drawer (88vh) on mobile
- Use existing Drawer animation for slide-up behavior
- Remove background/border from browsing prompt on mobile
- Center browsing prompt vertically in mobile drawer

Made-with: Cursor
---
 .../post/PostArticlePreviewEmbed.tsx          | 10 +--
 .../src/components/post/PostContent.tsx       | 75 +++++++++++++++----
 .../EmbeddedBrowsingWebPrompt.module.css      | 14 ++++
 .../EmbeddedBrowsingWebPrompt.tsx             |  2 +-
 4 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
index d93f0d5bbf2..cbfbe72ed77 100644
--- a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
+++ b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
@@ -105,14 +105,6 @@ export function PostArticlePreviewEmbed({
       return targetUrl;
     }
   }, [previewHost, targetUrl]);
-  const previewUrlLabel = useMemo(() => {
-    try {
-      const parsedTarget = new URL(targetUrl);
-      return `${parsedTarget.hostname}${parsedTarget.pathname}`;
-    } catch {
-      return targetUrl;
-    }
-  }, [targetUrl]);
   const faviconSrc = useMemo(() => {
     const pixelRatio = globalThis?.window?.devicePixelRatio ?? 1;
     const iconSize = Math.max(Math.round(16 * pixelRatio), 96);
@@ -286,7 +278,7 @@ export function PostArticlePreviewEmbed({
                 title="Copy preview URL"
                 aria-label="Copy preview URL"
               >
-                {previewUrlLabel}
+                {previewDomain}
               </button>
             </Typography>
           </div>
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 840d5ad0945..5a83d4870e8 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -33,6 +33,7 @@ import { PostArticlePreviewEmbed } from './PostArticlePreviewEmbed';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { EarthIcon, MiniCloseIcon } from '../icons';
 import { useViewSize, ViewSize } from '../../hooks';
+import { Drawer } from '../drawers/Drawer';
 
 type PostContentRawProps = Omit<PostContentProps, 'post'> & { post: Post };
 
@@ -72,6 +73,7 @@ export function PostContentRaw({
   const onSendViewPost = useViewPost();
   const showCodeSnippets = useFeature(feature.showCodeSnippets);
   const { title } = useSmartTitle(post);
+  const isTablet = useViewSize(ViewSize.Tablet);
   const isLaptop = useViewSize(ViewSize.Laptop);
   const hasNavigation = !!onPreviousPost || !!onNextPost;
   const isVideoType = isVideoPost(post);
@@ -103,6 +105,7 @@ export function PostContentRaw({
     useState(false);
   const [isArticlePreviewUnavailable, setArticlePreviewUnavailable] =
     useState(false);
+  const [isMobilePreviewOpen, setMobilePreviewOpen] = useState(false);
 
   useEffect(() => {
     setIsPreviewHydrated(true);
@@ -111,18 +114,27 @@ export function PostContentRaw({
   useEffect(() => {
     setArticlePreviewDismissed(false);
     setArticlePreviewUnavailable(false);
+    setMobilePreviewOpen(false);
   }, [post.id]);
 
   const showArticlePreviewColumn =
     showArticlePreviewEmbed && !isArticlePreviewDismissed;
+  const isPreviewActive = isTablet
+    ? showArticlePreviewColumn
+    : isMobilePreviewOpen;
 
   const onToggleArticlePreview = useCallback(() => {
-    setArticlePreviewDismissed((currentState) => !currentState);
-  }, []);
+    if (isTablet) {
+      setArticlePreviewDismissed((currentState) => !currentState);
+    } else {
+      setMobilePreviewOpen((currentState) => !currentState);
+    }
+  }, [isTablet]);
 
   const onPreviewUnavailable = useCallback(() => {
     setArticlePreviewUnavailable(true);
     setArticlePreviewDismissed(true);
+    setMobilePreviewOpen(false);
   }, []);
 
   const containerClass = classNames(
@@ -194,13 +206,27 @@ export function PostContentRaw({
         post={post}
       >
         <div className={isCompactModalSpacing ? 'my-4' : 'my-6'}>
-          <PostSourceInfo
-            className="mb-3"
-            post={post}
-            onClose={onClose}
-            onReadArticle={onReadArticle}
-            hideSubscribeAction={hideSubscribeAction}
-          />
+          <div className="mb-3 flex items-center">
+            <PostSourceInfo
+              className="min-w-0 flex-1"
+              post={post}
+              onClose={onClose}
+              onReadArticle={onReadArticle}
+              hideSubscribeAction={hideSubscribeAction}
+            />
+            {!isTablet && showArticlePreviewEmbed && (
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Primary}
+                className="ml-auto shrink-0"
+                onClick={onToggleArticlePreview}
+                icon={<EarthIcon />}
+                title="Preview article"
+                aria-label="Preview article"
+              />
+            )}
+          </div>
           <h1
             className="break-words font-bold typo-large-title"
             data-testid="post-modal-title"
@@ -319,7 +345,7 @@ export function PostContentRaw({
           <div
             className={classNames(
               'grid min-h-0 min-w-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',
-              showArticlePreviewColumn
+              showArticlePreviewColumn && isTablet
                 ? isLaptop
                   ? 'grid-cols-[22rem_0px_1fr]'
                   : 'grid-cols-[1fr_0px_1fr]'
@@ -330,24 +356,24 @@ export function PostContentRaw({
               {postMainColumn}
               {!isLaptop && postWidgetsColumn}
             </div>
-            <div className="relative">
+            <div className="relative hidden tablet:block">
               <Button
                 type="button"
                 size={ButtonSize.Small}
                 variant={ButtonVariant.Primary}
                 className={classNames(
                   'z-30 absolute right-0 !rounded-r-none',
-                  isPostPage ? 'top-6' : 'top-4',
+                  isPostPage ? 'top-[4.5rem] laptop:top-6' : 'top-4',
                 )}
                 onClick={onToggleArticlePreview}
-                icon={showArticlePreviewColumn ? <MiniCloseIcon /> : <EarthIcon />}
+                icon={isPreviewActive ? <MiniCloseIcon /> : <EarthIcon />}
                 title={
-                  showArticlePreviewColumn
+                  isPreviewActive
                     ? 'Hide inline article preview'
                     : 'Show inline article preview'
                 }
                 aria-label={
-                  showArticlePreviewColumn
+                  isPreviewActive
                     ? 'Hide inline article preview'
                     : 'Show inline article preview'
                 }
@@ -369,6 +395,25 @@ export function PostContentRaw({
             </div>
           </div>
           {isLaptop && postWidgetsColumn}
+          <Drawer
+            isOpen={!isTablet && isMobilePreviewOpen}
+            onClose={() => setMobilePreviewOpen(false)}
+            className={{
+              wrapper: 'h-[88vh]',
+              drawer: 'flex-1 !p-0',
+            }}
+            displayCloseButton
+            appendOnRoot
+          >
+            <PostArticlePreviewEmbed
+              targetUrl={embedArticleTargetUrl}
+              previewHost={post.domain ?? undefined}
+              onDismissArticlePreview={() => setMobilePreviewOpen(false)}
+              onPreviewUnavailable={onPreviewUnavailable}
+              forceUnavailable={isArticlePreviewUnavailable}
+              className="!flex"
+            />
+          </Drawer>
         </div>
       ) : (
         <>
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
index 9a8e8a23559..2a924b7665d 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.module.css
@@ -11,6 +11,13 @@
   overflow: visible;
 }
 
+@media (max-width: 655px) {
+  .root {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 /* Centers the card at the vertical midpoint of the user's screen */
 .stickyShell {
   position: sticky;
@@ -25,6 +32,13 @@
   padding: 1.5rem;
 }
 
+@media (max-width: 655px) {
+  .stickyShell {
+    position: static;
+    transform: none;
+  }
+}
+
 .ambient {
   pointer-events: none;
   position: absolute;
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
index 0a375447bc4..680ca3ef608 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -84,7 +84,7 @@ export function EmbeddedBrowsingWebPrompt({
     <div className={styles.root}>
       <div className={styles.ambient} aria-hidden />
       <div className={styles.stickyShell}>
-        <div className="z-10 relative flex h-fit w-full max-w-[40rem] shrink-0 flex-col items-center gap-3 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6 text-center shadow-2">
+        <div className="z-10 relative flex h-fit w-full max-w-[40rem] shrink-0 flex-col items-center gap-3 rounded-16 p-6 text-center tablet:border tablet:border-border-subtlest-tertiary tablet:bg-surface-float tablet:shadow-2">
           <Typography
             tag={TypographyTag.H2}
             type={TypographyType.Title3}

From f3b5e24a71beb19bbe613dca8f4f962b4bcabef9 Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 13 Apr 2026 14:52:04 +0300
Subject: [PATCH 5/8] fix: stabilize narrow preview floating behavior and
 transitions

Prevent inline-to-floating flicker by coordinating preview width checks with toggle animations and add explicit enter/exit animation state for the floating right panel. Also simplify the embedded browsing prompt container styling by removing tablet-only surface framing.

Made-with: Cursor
---
 .../src/components/post/PostContent.tsx       | 218 +++++++++++++++++-
 .../EmbeddedBrowsingWebPrompt.tsx             |   2 +-
 2 files changed, 212 insertions(+), 8 deletions(-)

diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 5a83d4870e8..779599fc6fa 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import type { Post } from '../../graphql/posts';
 import { isVideoPost, PostType } from '../../graphql/posts';
@@ -39,6 +39,13 @@ type PostContentRawProps = Omit<PostContentProps, 'post'> & { post: Post };
 
 export const SCROLL_OFFSET = 80;
 
+const PREVIEW_MIN_WIDTH = 360;
+const PREVIEW_RESTORE_WIDTH = 380;
+const FLOATING_PREVIEW_ANIMATION_MS = 300;
+const REM_IN_PX = 16;
+const PREVIEW_LAYOUT_MIN_WIDTH =
+  (22 + 21.25) * REM_IN_PX + PREVIEW_MIN_WIDTH;
+
 const PostCodeSnippets = dynamic(() =>
   import(/* webpackChunkName: "postCodeSnippets" */ './PostCodeSnippets').then(
     (mod) => mod.PostCodeSnippets,
@@ -106,30 +113,197 @@ export function PostContentRaw({
   const [isArticlePreviewUnavailable, setArticlePreviewUnavailable] =
     useState(false);
   const [isMobilePreviewOpen, setMobilePreviewOpen] = useState(false);
+  const [isPreviewNarrow, setIsPreviewNarrow] = useState(false);
+  const [isFloatingPreviewVisible, setFloatingPreviewVisible] = useState(false);
+  const [isFloatingPreviewClosing, setFloatingPreviewClosing] = useState(false);
+  const [isFloatingPreviewActive, setFloatingPreviewActive] = useState(false);
+  const [isTabletPreviewToggling, setTabletPreviewToggling] = useState(false);
+  const previewLayoutRef = useRef<HTMLDivElement>(null);
+  const previewColumnRef = useRef<HTMLDivElement>(null);
+  const ignorePreviewResizeRef = useRef(false);
+  const resizeObserverResetTimeoutRef = useRef<number>();
+  const floatingPreviewCloseTimeoutRef = useRef<number>();
+  const floatingPreviewEnterFrameRef = useRef<number>();
 
   useEffect(() => {
     setIsPreviewHydrated(true);
   }, []);
 
+  const evaluatePreviewWidth = useCallback((width: number) => {
+    setIsPreviewNarrow((prev) => {
+      if (!prev && width < PREVIEW_MIN_WIDTH) {
+        return true;
+      }
+
+      if (prev && width >= PREVIEW_RESTORE_WIDTH) {
+        return false;
+      }
+
+      return prev;
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (!resizeObserverResetTimeoutRef.current) {
+        return;
+      }
+
+      globalThis.clearTimeout(resizeObserverResetTimeoutRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (!floatingPreviewCloseTimeoutRef.current) {
+        return;
+      }
+
+      globalThis.clearTimeout(floatingPreviewCloseTimeoutRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (!floatingPreviewEnterFrameRef.current) {
+        return;
+      }
+
+      globalThis.cancelAnimationFrame(floatingPreviewEnterFrameRef.current);
+    };
+  }, []);
+
   useEffect(() => {
     setArticlePreviewDismissed(false);
     setArticlePreviewUnavailable(false);
     setMobilePreviewOpen(false);
+    setIsPreviewNarrow(false);
   }, [post.id]);
 
   const showArticlePreviewColumn =
     showArticlePreviewEmbed && !isArticlePreviewDismissed;
+  const isPreviewFloating =
+    isLaptop && showArticlePreviewColumn && isPreviewNarrow;
+  const shouldRenderFloatingPreview =
+    isFloatingPreviewVisible || isPreviewFloating;
   const isPreviewActive = isTablet
     ? showArticlePreviewColumn
     : isMobilePreviewOpen;
 
+  useEffect(() => {
+    if (floatingPreviewCloseTimeoutRef.current) {
+      globalThis.clearTimeout(floatingPreviewCloseTimeoutRef.current);
+      floatingPreviewCloseTimeoutRef.current = undefined;
+    }
+    if (floatingPreviewEnterFrameRef.current) {
+      globalThis.cancelAnimationFrame(floatingPreviewEnterFrameRef.current);
+      floatingPreviewEnterFrameRef.current = undefined;
+    }
+
+    if (isPreviewFloating) {
+      setFloatingPreviewVisible(true);
+      setFloatingPreviewClosing(false);
+      setFloatingPreviewActive(false);
+      floatingPreviewEnterFrameRef.current = globalThis.requestAnimationFrame(
+        () => {
+          setFloatingPreviewActive(true);
+        },
+      );
+      return;
+    }
+
+    if (!isFloatingPreviewVisible) {
+      return;
+    }
+
+    setFloatingPreviewActive(false);
+    setFloatingPreviewClosing(true);
+    floatingPreviewCloseTimeoutRef.current = globalThis.setTimeout(() => {
+      setFloatingPreviewVisible(false);
+      setFloatingPreviewClosing(false);
+      setFloatingPreviewActive(false);
+    }, FLOATING_PREVIEW_ANIMATION_MS);
+  }, [isFloatingPreviewVisible, isPreviewFloating]);
+
+  useEffect(() => {
+    const node = previewColumnRef.current;
+
+    if (!isLaptop || !showArticlePreviewColumn || !node) {
+      setIsPreviewNarrow(false);
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      if (ignorePreviewResizeRef.current) {
+        return;
+      }
+
+      const width = entry.contentRect.width;
+
+      if (width < 1) {
+        return;
+      }
+
+      evaluatePreviewWidth(width);
+    });
+
+    observer.observe(node);
+    if (!ignorePreviewResizeRef.current) {
+      evaluatePreviewWidth(node.getBoundingClientRect().width);
+    }
+
+    return () => observer.disconnect();
+  }, [evaluatePreviewWidth, isLaptop, showArticlePreviewColumn]);
+
   const onToggleArticlePreview = useCallback(() => {
     if (isTablet) {
+      const isOpeningPreview = isArticlePreviewDismissed;
+      let shouldForceFloatingOnOpen = false;
+      if (isOpeningPreview && isLaptop) {
+        const layoutWidth =
+          previewLayoutRef.current?.getBoundingClientRect().width;
+        if (layoutWidth && layoutWidth < PREVIEW_LAYOUT_MIN_WIDTH) {
+          setIsPreviewNarrow(true);
+          shouldForceFloatingOnOpen = true;
+        }
+      }
+
+      if (isOpeningPreview) {
+        if (floatingPreviewCloseTimeoutRef.current) {
+          globalThis.clearTimeout(floatingPreviewCloseTimeoutRef.current);
+          floatingPreviewCloseTimeoutRef.current = undefined;
+        }
+        if (floatingPreviewEnterFrameRef.current) {
+          globalThis.cancelAnimationFrame(floatingPreviewEnterFrameRef.current);
+          floatingPreviewEnterFrameRef.current = undefined;
+        }
+        setFloatingPreviewVisible(false);
+        setFloatingPreviewClosing(false);
+        setFloatingPreviewActive(false);
+      }
+      ignorePreviewResizeRef.current = true;
+      if (resizeObserverResetTimeoutRef.current) {
+        globalThis.clearTimeout(resizeObserverResetTimeoutRef.current);
+      }
+      resizeObserverResetTimeoutRef.current = globalThis.setTimeout(() => {
+        ignorePreviewResizeRef.current = false;
+        setTabletPreviewToggling(false);
+        const width = previewColumnRef.current?.getBoundingClientRect().width;
+        if (!width || width < 1) {
+          setIsPreviewNarrow(false);
+          return;
+        }
+        evaluatePreviewWidth(width);
+      }, 350);
       setArticlePreviewDismissed((currentState) => !currentState);
+      if (!shouldForceFloatingOnOpen) {
+        setIsPreviewNarrow(false);
+      }
+      setTabletPreviewToggling(true);
     } else {
       setMobilePreviewOpen((currentState) => !currentState);
     }
-  }, [isTablet]);
+  }, [evaluatePreviewWidth, isArticlePreviewDismissed, isLaptop, isTablet]);
 
   const onPreviewUnavailable = useCallback(() => {
     setArticlePreviewUnavailable(true);
@@ -341,13 +515,18 @@ export function PostContentRaw({
       }
     >
       {showArticlePreviewEmbed ? (
-        <div className="flex w-full min-h-0 flex-1">
+        <div
+          ref={previewLayoutRef}
+          className="relative flex w-full min-h-0 flex-1"
+        >
           <div
             className={classNames(
               'grid min-h-0 min-w-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',
               showArticlePreviewColumn && isTablet
                 ? isLaptop
-                  ? 'grid-cols-[22rem_0px_1fr]'
+                  ? isPreviewFloating
+                    ? 'grid-cols-[1fr_0px_0fr]'
+                    : 'grid-cols-[22rem_0px_1fr]'
                   : 'grid-cols-[1fr_0px_1fr]'
                 : 'grid-cols-[1fr_0px_0fr]',
             )}
@@ -380,9 +559,35 @@ export function PostContentRaw({
               />
             </div>
             <div
+              ref={previewColumnRef}
               className={classNames(
                 'flex min-w-0 flex-col [overflow-x:clip] transition-opacity duration-200 ease-in-out',
-                showArticlePreviewColumn ? 'opacity-100 delay-100' : 'opacity-0',
+                showArticlePreviewColumn &&
+                  !isPreviewFloating &&
+                  !isTabletPreviewToggling
+                  ? 'opacity-100 delay-100'
+                  : 'opacity-0',
+              )}
+            >
+              {!isPreviewFloating && !isTabletPreviewToggling && (
+                <PostArticlePreviewEmbed
+                  targetUrl={embedArticleTargetUrl}
+                  previewHost={post.domain ?? undefined}
+                  onDismissArticlePreview={onToggleArticlePreview}
+                  onPreviewUnavailable={onPreviewUnavailable}
+                  forceUnavailable={isArticlePreviewUnavailable}
+                />
+              )}
+            </div>
+          </div>
+          {isLaptop && postWidgetsColumn}
+          {shouldRenderFloatingPreview && (
+            <div
+              className={classNames(
+                'absolute right-0 top-0 z-3 flex h-full w-[21.25rem] flex-col border-l border-border-subtlest-tertiary bg-background-default transition-all duration-300 ease-in-out',
+                isFloatingPreviewActive && !isFloatingPreviewClosing
+                  ? 'translate-x-0 opacity-100'
+                  : 'pointer-events-none translate-x-full opacity-0',
               )}
             >
               <PostArticlePreviewEmbed
@@ -393,8 +598,7 @@ export function PostContentRaw({
                 forceUnavailable={isArticlePreviewUnavailable}
               />
             </div>
-          </div>
-          {isLaptop && postWidgetsColumn}
+          )}
           <Drawer
             isOpen={!isTablet && isMobilePreviewOpen}
             onClose={() => setMobilePreviewOpen(false)}
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
index 680ca3ef608..917d6110854 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -84,7 +84,7 @@ export function EmbeddedBrowsingWebPrompt({
     <div className={styles.root}>
       <div className={styles.ambient} aria-hidden />
       <div className={styles.stickyShell}>
-        <div className="z-10 relative flex h-fit w-full max-w-[40rem] shrink-0 flex-col items-center gap-3 rounded-16 p-6 text-center tablet:border tablet:border-border-subtlest-tertiary tablet:bg-surface-float tablet:shadow-2">
+        <div className="z-10 relative flex h-fit w-full max-w-[40rem] shrink-0 flex-col items-center gap-3 rounded-16 p-6 text-center">
           <Typography
             tag={TypographyTag.H2}
             type={TypographyType.Title3}

From bbe96c0130a967ce09ccd9671733530d7a3526ee Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 13 Apr 2026 15:17:47 +0300
Subject: [PATCH 6/8] feat: update webapp fallback prompt to install extension

- Remove direct iframe fallback from webapp preview
- Update prompt copy to explicitly ask users to install the extension
- Add browser-specific (Chrome/Edge) icons to the install button

Made-with: Cursor
---
 .../post/PostArticlePreviewEmbed.tsx          | 29 ++-----------------
 .../EmbeddedBrowsingWebPrompt.tsx             | 12 ++++++--
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
index cbfbe72ed77..e25b0bfba8a 100644
--- a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
+++ b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
@@ -83,7 +83,6 @@ export function PostArticlePreviewEmbed({
   forceUnavailable = false,
 }: PostArticlePreviewEmbedProps): ReactElement {
   const extensionId = useMemo(() => getBrowserExtensionInstallId(), []);
-  const [showDirectWebPreview, setShowDirectWebPreview] = useState(false);
   const [hasPreviewFrameLoaded, setHasPreviewFrameLoaded] = useState(false);
   const [hasTimedOutUnavailable, setHasTimedOutUnavailable] = useState(false);
   const [embedState, setEmbedState] = useState<{
@@ -115,19 +114,12 @@ export function PostArticlePreviewEmbed({
   }, [previewDomain]);
 
   useEffect(() => {
-    setShowDirectWebPreview(false);
     setHasPreviewFrameLoaded(false);
     setHasTimedOutUnavailable(false);
     setEmbedState({ status: 'idle', errorReason: null });
     hasNotifiedUnavailableRef.current = false;
   }, [extensionId, targetUrl]);
 
-  const onEnableDirectWebPreview = useCallback(() => {
-    setHasPreviewFrameLoaded(false);
-    setHasTimedOutUnavailable(false);
-    setShowDirectWebPreview(true);
-  }, []);
-
   const onExtensionPreviewFrameLoad = useCallback(() => {
     setHasPreviewFrameLoaded(true);
   }, []);
@@ -145,14 +137,11 @@ export function PostArticlePreviewEmbed({
     embedState.status === 'ready' &&
     !hasPreviewFrameLoaded &&
     !forceUnavailable;
-  const showDirectPreviewFrame = !extensionId && showDirectWebPreview;
-  const isDirectPreviewAwaitingLoad =
-    showDirectPreviewFrame && !hasPreviewFrameLoaded && !forceUnavailable;
   const shouldShowUnavailablePrompt =
     forceUnavailable || hasTimedOutUnavailable;
-  const shouldShowPrompt = !extensionId && !showDirectWebPreview;
+  const shouldShowPrompt = !extensionId;
   const shouldShowPreviewHeader =
-    (showDirectPreviewFrame || !!extensionId) && !shouldShowUnavailablePrompt;
+    !!extensionId && !shouldShowUnavailablePrompt;
 
   const handleEmbedStateChange = useCallback(
     (state: UseExtensionSiteEmbedResult) => {
@@ -189,7 +178,7 @@ export function PostArticlePreviewEmbed({
 
   useEffect(() => {
     const timeout =
-      isExtensionPreviewAwaitingLoad || isDirectPreviewAwaitingLoad
+      isExtensionPreviewAwaitingLoad
         ? globalThis.setTimeout(() => {
             if (hasNotifiedUnavailableRef.current) {
               return;
@@ -207,7 +196,6 @@ export function PostArticlePreviewEmbed({
       }
     };
   }, [
-    isDirectPreviewAwaitingLoad,
     isExtensionPreviewAwaitingLoad,
     onPreviewUnavailable,
   ]);
@@ -221,16 +209,6 @@ export function PostArticlePreviewEmbed({
         unavailablePreviewUrl={targetUrl}
       />
     );
-  } else if (showDirectPreviewFrame) {
-    previewContent = (
-      <iframe
-        key={targetUrl}
-        src={targetUrl}
-        title="Article preview"
-        className="h-full min-h-[28rem] w-full flex-1 border-0"
-        onLoad={onExtensionPreviewFrameLoad}
-      />
-    );
   } else {
     previewContent = (
       <ExtensionSiteEmbed
@@ -287,7 +265,6 @@ export function PostArticlePreviewEmbed({
         {shouldShowPrompt && !shouldShowUnavailablePrompt ? (
           <EmbeddedBrowsingWebPrompt
             onDismiss={onDismissArticlePreview}
-            onEnablePreview={onEnableDirectWebPreview}
           />
         ) : null}
       </div>
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
index 917d6110854..3d01f64e78b 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -11,8 +11,9 @@ import {
   TypographyTag,
   TypographyType,
 } from '../../components/typography/Typography';
-import { downloadBrowserExtension } from '../../lib/constants';
+import { downloadBrowserExtension, isChrome } from '../../lib/constants';
 import styles from './EmbeddedBrowsingWebPrompt.module.css';
+import { ChromeIcon, EdgeIcon } from '../../components/icons';
 
 export type EmbeddedBrowsingWebPromptProps = {
   onDismiss?: () => void;
@@ -65,6 +66,8 @@ export function EmbeddedBrowsingWebPrompt({
       </Button>
     );
   } else {
+    const isChromeBrowser = isChrome();
+    const BrowserIcon = isChromeBrowser ? ChromeIcon : EdgeIcon;
     primaryAction = (
       <Button
         tag="a"
@@ -74,8 +77,9 @@ export function EmbeddedBrowsingWebPrompt({
         href={downloadBrowserExtension}
         target="_blank"
         rel="noopener noreferrer"
+        icon={<BrowserIcon />}
       >
-        Enable
+        {isChromeBrowser ? 'Install Chrome extension' : 'Install Edge extension'}
       </Button>
     );
   }
@@ -103,7 +107,9 @@ export function EmbeddedBrowsingWebPrompt({
           >
             {isPreviewUnavailable
               ? 'This site blocks embedded previews.'
-              : 'Let daily.dev load and preview sites inside the app. (Only affects embedded pages.)'}
+              : onEnablePreview
+                ? 'Let daily.dev load and preview sites inside the app. (Only affects embedded pages.)'
+                : 'Preview and open sites directly inside daily.dev. To use this feature, install the daily.dev browser extension.'}
           </Typography>
           <div className="mt-1 flex flex-wrap items-center justify-center gap-3">
             {primaryAction}

From c480bb9b0aca47b681cf30a4823f81239ca7bd7a Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 13 Apr 2026 15:42:47 +0300
Subject: [PATCH 7/8] fix: address PR review feedback for inline article
 preview

Made-with: Cursor
---
 .../post/PostArticlePreviewEmbed.tsx          |  4 +-
 .../src/components/post/PostContent.tsx       | 67 ++++++++++++++-----
 .../EmbeddedBrowsingWebPrompt.tsx             |  1 -
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
index e25b0bfba8a..6bd7487a842 100644
--- a/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
+++ b/packages/shared/src/components/post/PostArticlePreviewEmbed.tsx
@@ -82,7 +82,7 @@ export function PostArticlePreviewEmbed({
   onPreviewUnavailable,
   forceUnavailable = false,
 }: PostArticlePreviewEmbedProps): ReactElement {
-  const extensionId = useMemo(() => getBrowserExtensionInstallId(), []);
+  const [extensionId] = useState(() => getBrowserExtensionInstallId());
   const [hasPreviewFrameLoaded, setHasPreviewFrameLoaded] = useState(false);
   const [hasTimedOutUnavailable, setHasTimedOutUnavailable] = useState(false);
   const [embedState, setEmbedState] = useState<{
@@ -204,7 +204,6 @@ export function PostArticlePreviewEmbed({
   if (shouldShowUnavailablePrompt) {
     previewContent = (
       <EmbeddedBrowsingWebPrompt
-        onDismiss={onDismissArticlePreview}
         isPreviewUnavailable
         unavailablePreviewUrl={targetUrl}
       />
@@ -264,7 +263,6 @@ export function PostArticlePreviewEmbed({
         {previewContent}
         {shouldShowPrompt && !shouldShowUnavailablePrompt ? (
           <EmbeddedBrowsingWebPrompt
-            onDismiss={onDismissArticlePreview}
           />
         ) : null}
       </div>
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 779599fc6fa..e5f26e33e7e 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -39,12 +39,17 @@ type PostContentRawProps = Omit<PostContentProps, 'post'> & { post: Post };
 
 export const SCROLL_OFFSET = 80;
 
+// Post content fixed column (matches grid-cols-[22rem_...] on laptop)
+const POST_COLUMN_REM = 22;
+// Widgets sidebar width (matches w-[21.25rem] on laptop)
+const WIDGETS_COLUMN_REM = 21.25;
+
 const PREVIEW_MIN_WIDTH = 360;
 const PREVIEW_RESTORE_WIDTH = 380;
 const FLOATING_PREVIEW_ANIMATION_MS = 300;
 const REM_IN_PX = 16;
 const PREVIEW_LAYOUT_MIN_WIDTH =
-  (22 + 21.25) * REM_IN_PX + PREVIEW_MIN_WIDTH;
+  (POST_COLUMN_REM + WIDGETS_COLUMN_REM) * REM_IN_PX + PREVIEW_MIN_WIDTH;
 
 const PostCodeSnippets = dynamic(() =>
   import(/* webpackChunkName: "postCodeSnippets" */ './PostCodeSnippets').then(
@@ -52,6 +57,26 @@ const PostCodeSnippets = dynamic(() =>
   ),
 );
 
+const ArticleLink = ({
+  href,
+  onClick,
+  children,
+  ...props
+}: ComponentProps<'a'> & { href?: string; onClick?: () => void }) => {
+  return (
+    <a
+      href={href}
+      title="Go to post"
+      target="_blank"
+      rel="noopener"
+      {...combinedClicks(onClick)}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
 export function PostContentRaw({
   post,
   className = {},
@@ -174,10 +199,22 @@ export function PostContentRaw({
   }, []);
 
   useEffect(() => {
+    if (floatingPreviewCloseTimeoutRef.current) {
+      globalThis.clearTimeout(floatingPreviewCloseTimeoutRef.current);
+      floatingPreviewCloseTimeoutRef.current = undefined;
+    }
+    if (floatingPreviewEnterFrameRef.current) {
+      globalThis.cancelAnimationFrame(floatingPreviewEnterFrameRef.current);
+      floatingPreviewEnterFrameRef.current = undefined;
+    }
     setArticlePreviewDismissed(false);
     setArticlePreviewUnavailable(false);
     setMobilePreviewOpen(false);
     setIsPreviewNarrow(false);
+    setFloatingPreviewVisible(false);
+    setFloatingPreviewClosing(false);
+    setFloatingPreviewActive(false);
+    setTabletPreviewToggling(false);
   }, [post.id]);
 
   const showArticlePreviewColumn =
@@ -336,21 +373,6 @@ export function PostContentRaw({
     onSendViewPost(post.id);
   }, [isVideoType, onSendViewPost, post.id, user?.id]);
 
-  const ArticleLink = ({ children, ...props }: ComponentProps<'a'>) => {
-    return (
-      <a
-        href={post.permalink}
-        title="Go to post"
-        target="_blank"
-        rel="noopener"
-        {...combinedClicks(onReadArticle)}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  };
-
   const postMainColumn = (
     <PostContainer
       className={classNames(
@@ -405,7 +427,9 @@ export function PostContentRaw({
             className="break-words font-bold typo-large-title"
             data-testid="post-modal-title"
           >
-            <ArticleLink>{title}</ArticleLink>
+            <ArticleLink href={post.permalink} onClick={onReadArticle}>
+              {title}
+            </ArticleLink>
           </h1>
           {post.clickbaitTitleDetected && <PostClickbaitShield post={post} />}
         </div>
@@ -435,7 +459,12 @@ export function PostContentRaw({
             post.domain.length > 0 && (
               <TruncateText>
                 From{' '}
-                <ArticleLink title={post.domain} className="hover:underline">
+                <ArticleLink
+                  href={post.permalink}
+                  onClick={onReadArticle}
+                  title={post.domain}
+                  className="hover:underline"
+                >
                   {post.domain}
                 </ArticleLink>
               </TruncateText>
@@ -444,6 +473,8 @@ export function PostContentRaw({
         />
         {!isVideoType && (
           <ArticleLink
+            href={post.permalink}
+            onClick={onReadArticle}
             className={classNames(
               'block cursor-pointer overflow-hidden rounded-16',
               isCompactModalSpacing || hasToc ? 'mb-4' : 'mb-10',
diff --git a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
index 3d01f64e78b..6a52c8a7e1a 100644
--- a/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
+++ b/packages/shared/src/features/extensionEmbed/EmbeddedBrowsingWebPrompt.tsx
@@ -16,7 +16,6 @@ import styles from './EmbeddedBrowsingWebPrompt.module.css';
 import { ChromeIcon, EdgeIcon } from '../../components/icons';
 
 export type EmbeddedBrowsingWebPromptProps = {
-  onDismiss?: () => void;
   onEnablePreview?: () => void;
   isPreviewUnavailable?: boolean;
   unavailablePreviewUrl?: string;

From fb4fc5e3beff298852bb83f94cd61471ecbcf8be Mon Sep 17 00:00:00 2001
From: tomeredlich <tomer.redlich@gmail.com>
Date: Mon, 13 Apr 2026 15:43:18 +0300
Subject: [PATCH 8/8] chore: add comment explaining extension ID precedence

Made-with: Cursor
---
 packages/webapp/next.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/webapp/next.config.ts b/packages/webapp/next.config.ts
index 964b03ead10..159bb6bf865 100644
--- a/packages/webapp/next.config.ts
+++ b/packages/webapp/next.config.ts
@@ -109,6 +109,9 @@ const nextConfig: NextConfig = {
     },
     env: {
       CURRENT_VERSION: version,
+      // If both CHROME and EDGE IDs are present (e.g. in a shared CI environment),
+      // Chrome silently takes precedence. Since the ID is baked into the build and
+      // getBrowserExtensionInstallId cannot distinguish the user's browser, this is expected.
       NEXT_PUBLIC_DAILY_EXTENSION_ID:
         process.env.NEXT_PUBLIC_DAILY_EXTENSION_ID ||
         process.env.EXTENSION_ID_CHROME ||