embed live service sites (Llama.cpp, Jellyfin) inside desktop windows

src/app/components/WindowsDesktop.tsx

@@ -22,6 +22,8 @@ interface Shortcut {
   appId?: string;
   desc?: string;
   image?: string;
+  /** Show the real site in an iframe. Only for sites that allow framing. */
+  embed?: boolean;
 }
 
 interface IconEntry {
@@ -36,8 +38,8 @@ interface IconEntry {
 
 const SERVICE_SHORTCUTS: Shortcut[] = [
   { id: "svc-proxmox", icon: "🖥️", label: "Proxmox", appId: "alacritty", color: "#1257a0", desc: "Server Management" },
-  { id: "svc-ai", icon: "🦾", label: "Llama.cpp", url: "https://ai.dvorakmortonxd.dev/", color: "#157347", desc: "Local AI Server" },
-  { id: "svc-jellyfin", icon: "🎬", label: "Jellyfin", url: "https://jelly.dvorakmortonxd.dev/", color: "#6a4fb3", desc: "Local Media Server" },
+  { id: "svc-ai", icon: "🦾", label: "Llama.cpp", url: "https://ai.dvorakmortonxd.dev/", color: "#157347", desc: "Local AI Server", embed: true },
+  { id: "svc-jellyfin", icon: "🎬", label: "Jellyfin", url: "https://jelly.dvorakmortonxd.dev/", color: "#6a4fb3", desc: "Local Media Server", embed: true },
   { id: "svc-smp", icon: "🎮", label: "SMP", url: "https://discord.gg/vyvhk7d8bX", color: "#c0392b", desc: "My Survival Minecraft Server" },
   { id: "svc-navidrome", icon: "🎸", label: "Navidrome", url: "https://navidrome.dvorakmortonxd.dev/", color: "#b3005f", desc: "Music Streaming" },
   { id: "svc-gitdxd", icon: "🐙", label: "GitDXD", url: "https://git.dvorakmortonxd.dev", color: "#6a4fb3", desc: "Best Git Hosting OAT" },
@@ -194,6 +196,7 @@ export default function WindowsDesktop() {
         desc: s.desc,
         icon: s.icon,
         image: s.image,
+        embed: s.embed,
       });
     setDynamicApps((prev) => (prev[id] ? prev : { ...prev, [id]: app }));
     openAppDef(app);

src/app/components/apps.tsx

@@ -657,6 +657,21 @@ function WebsiteApp({
   );
 }
 
+/** Renders a site in an iframe. Only usable for sites that allow framing. */
+function EmbeddedSite({ title, url }: { title: string; url: string }) {
+  return (
+    <div className="website-embed">
+      <iframe
+        className="website-embed-frame"
+        src={url}
+        title={title}
+        loading="lazy"
+        referrerPolicy="no-referrer"
+      />
+    </div>
+  );
+}
+
 export function createWebsiteApp(opts: {
   id: string;
   title: string;
@@ -664,16 +679,23 @@ export function createWebsiteApp(opts: {
   desc?: string;
   icon?: ReactNode;
   image?: string;
+  /**
+   * Render the real site in an iframe instead of the link card. Only works for
+   * sites that do not send `X-Frame-Options` / a `frame-ancestors` CSP.
+   */
+  embed?: boolean;
 }): AppDef {
   return {
     id: opts.id,
     title: opts.title,
     icon: opts.icon ?? "🌐",
     color: "#0a7cc1",
-    width: 620,
-    height: 440,
+    width: opts.embed ? 1000 : 620,
+    height: opts.embed ? 640 : 440,
     url: opts.url,
-    content: (
+    content: opts.embed ? (
+      <EmbeddedSite title={opts.title} url={opts.url} />
+    ) : (
       <WebsiteApp
         title={opts.title}
         url={opts.url}