Add LinkPreview wrapping to LinksLayer in UnifiedCell

Author: jpr5

showcase/shell-dashboard/src/components/__tests__/unified-cell.test.tsx

@@ -10,6 +10,7 @@
  *   5. Hides badges when health overlay is not active
  *   6. Hides depth chip when depth overlay is not active
  */
+import React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render } from "@testing-library/react";
 import { UnifiedCell } from "../unified-cell";
@@ -74,6 +75,16 @@ vi.mock("@/components/command-cell", () => ({
   )),
 }));
 
+vi.mock("@/components/link-preview", () => ({
+  LinkPreview: vi.fn(
+    ({ children, href }: { children: React.ReactNode; href: string }) => (
+      <span data-testid="mock-link-preview" data-href={href}>
+        {children}
+      </span>
+    ),
+  ),
+}));
+
 vi.mock("@/components/cell-pieces", () => ({
   urlsFor: vi.fn(() => ({
     demoUrl: "https://demo.test/preview",

showcase/shell-dashboard/src/components/unified-cell.tsx

@@ -22,6 +22,7 @@ import type { Overlay } from "@/lib/overlay-types";
 import { CellDrilldown } from "@/components/cell-drilldown";
 import { CommandCell } from "@/components/command-cell";
 import { DocsRow, urlsFor } from "@/components/cell-pieces";
+import { LinkPreview } from "@/components/link-preview";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -82,24 +83,28 @@ function LinksLayer({ ctx }: { ctx: CellContext }) {
 
   return (
     <div className="flex items-center justify-center gap-1.5">
-      <a
-        href={links.demoUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="whitespace-nowrap text-[var(--accent)] hover:underline"
-      >
-        <span className="text-[var(--text-muted)]">Demo</span>{" "}
-        <span>&#8599;</span>
-      </a>
-      <a
-        href={links.codeUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="whitespace-nowrap text-[var(--accent)] hover:underline"
-      >
-        <span className="text-[var(--text-muted)]">Code</span>{" "}
-        <span>{"</>"}</span>
-      </a>
+      <LinkPreview href={links.demoUrl}>
+        <a
+          href={links.demoUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="whitespace-nowrap text-[var(--accent)] hover:underline"
+        >
+          <span className="text-[var(--text-muted)]">Demo</span>{" "}
+          <span>&#8599;</span>
+        </a>
+      </LinkPreview>
+      <LinkPreview href={links.codeUrl}>
+        <a
+          href={links.codeUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="whitespace-nowrap text-[var(--accent)] hover:underline"
+        >
+          <span className="text-[var(--text-muted)]">Code</span>{" "}
+          <span>{"</>"}</span>
+        </a>
+      </LinkPreview>
     </div>
   );
 }