From d5206d6607d33e07e52511e51d74e1ec6eee6d19 Mon Sep 17 00:00:00 2001 From: Martin Dvorak Date: Thu, 24 Sep 2026 07:41:26 +0000 Subject: [PATCH] embed live service sites (Llama.cpp, Jellyfin) inside desktop windows --- README.md | 3 +++ opencode.md | 7 +++++++ src/app/components/WindowsDesktop.tsx | 7 +++++-- src/app/components/apps.tsx | 28 ++++++++++++++++++++++++--- src/app/skeuo.css | 16 +++++++++++++++ 5 files changed, 56 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1faa019..eb9d4c6 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,9 @@ heatmap**, a gym SBD panel and links to friends' sites. hidden `ssh` easter egg. - **Live service status** — each self-hosted service is health-checked through the site's own API; Minecraft is checked through mcstatus.io. +- **Embedded live services** — opening Llama.cpp or Jellyfin from the desktop shows the + real site inside the window (an iframe). Services that forbid framing + (`X-Frame-Options` / CSP) keep a link card instead. - **Live GitDXD stats** — contribution heatmap + latest commit activity proxied server-side from the self-hosted Forgejo instance. - **Extras** — a playable `Revival Inc.` game embedded at `/revival-inc`, `llms.txt`, diff --git a/opencode.md b/opencode.md index 13c302e..cd64cb5 100644 --- a/opencode.md +++ b/opencode.md @@ -83,6 +83,7 @@ src/app/ MobileHome.tsx → "skeuo" theme, phone: app grid + dock WinWindow.tsx → a single draggable/resizable window apps.tsx → APPS registry + the content of each app + in-app terminal + + embedded-site windows useDesktopIcons.ts → desktop icon grid + drag/drop (THE KEY FILE, see below) useDragOrder.ts → simple list reordering (mobile home screen only) useTheme.ts → theme state via useSyncExternalStore @@ -210,6 +211,12 @@ list reordering, not free placement. Don't confuse the two. `eslint-disable-next-line` with a comment. Don't add more without a reason. - Watch for `pointercancel`: any custom pointer gesture over an ``, link, or text selection needs `draggable=false` / `user-select: none`. +- Service shortcuts can show the real site in an iframe via + `createWebsiteApp({ embed: true })` (set on the shortcut's `embed` flag), but + **only for sites that don't send `X-Frame-Options` / a `frame-ancestors` CSP**. + As of writing only **Llama.cpp** and **Jellyfin** qualify; Navidrome + (`DENY`), GitDXD (`SAMEORIGIN`) and SMP/Discord (`DENY`) block framing and + keep the link card. Verify headers before enabling `embed` on a new service. - Reduced motion is handled with a near-zero `animation-duration` (not `animation: none`) so `animationend` still fires and windows unmount. diff --git a/src/app/components/WindowsDesktop.tsx b/src/app/components/WindowsDesktop.tsx index 0acfabd..0ce32a9 100644 --- a/src/app/components/WindowsDesktop.tsx +++ b/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); diff --git a/src/app/components/apps.tsx b/src/app/components/apps.tsx index 263d9dc..4c97aa7 100644 --- a/src/app/components/apps.tsx +++ b/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 ( +
+