From a00338ab922f0f8092c5b91664f22810ce6f9ab6 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 4 Nov 2026 13:35:01 +0000
Subject: [PATCH] refactor: replace client-side drawer with dedicated
 /plugin/[id] page

The slide-in DetailDrawer (?ext=) froze touch navigation and locked scroll on
mobile: it cloned a full panel per plugin into <template> tags, then swapped
content and animated a fixed overlay on click. Details are now a real
server-rendered route, so opening one is a normal navigation with no client
work and no scroll lock.

- src/pages/plugin/[id].astro: reads the plugin from D1 by id and renders the
  breadcrumb, hero (icon, version, category, publisher link + verified badge),
  actions, README, route chips, install guide, and the manifest/checksum panel.
  A missing id is a 404 "Plugin not found"; a D1 failure is a 503, mirroring
  the publisher page.
- One-click install: the primary action is "Install in OpenROM", a deep link to
  openrom://plugin/<id>. Download .orplug and Copy CLI Install sit beside it as
  fallbacks, with a hint line for anyone without OpenROM Core installed. The
  deep link and the download button are withheld when no bundle is published,
  so the page never offers a dead install. Adds a `zap` icon for the button.
- Card.astro: the whole card is a link to /plugin/[id] via a stretched
  pseudo-element, with the publisher link and action buttons raised above it so
  they stay independently clickable.
- index.astro: ?ext= and ?id= 301-redirect to /plugin/[id], so existing deep
  links keep working instead of landing on a query nothing reads.
- DetailDrawer.astro and its CSS are removed; publisher/[id].astro drops the
  drawer too.

Verified against the local worker: /plugin/nkit renders in ~60ms with the
openrom:// deep link, unknown ids return 404, both legacy query forms return
301 to the new page, the not-published state renders without a dead install
link, and npm run build is clean with npm test at 47/47.

Co-authored-by: openhands <openhands@all-hands.dev>
---
 README.md                         |   5 +-
 src/components/Card.astro         |  20 +-
 src/components/DetailDrawer.astro | 291 ------------------------
 src/components/Icon.astro         |   1 +
 src/pages/index.astro             |  13 +-
 src/pages/plugin/[id].astro       | 358 ++++++++++++++++++++++++++++++
 src/pages/publisher/[id].astro    |   2 -
 src/styles/global.css             |   8 -
 8 files changed, 384 insertions(+), 314 deletions(-)
 delete mode 100644 src/components/DetailDrawer.astro
 create mode 100644 src/pages/plugin/[id].astro

diff --git a/README.md b/README.md
index c38d313..d16311e 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,8 @@ with a direct call to action to the [submission guide](./CONTRIBUTING.md).
 
 | Path | Purpose |
 | --- | --- |
-| `src/pages/index.astro` | Storefront (search, filters, cards, detail drawer) |
+| `src/pages/index.astro` | Storefront (search, filters, cards); `?ext=`/`?id=` redirect to the detail page |
+| `src/pages/plugin/[id].astro` | Server-rendered plugin details (README, routes, install, manifest) |
 | `src/pages/dashboard.astro` | Signed-in publisher dashboard (create + list publishers) |
 | `src/pages/dashboard/settings.astro` | Account settings (display name + avatar upload) |
 | `src/pages/dashboard/publisher/[id].astro` | Owner-only publisher profile editor |
@@ -47,7 +48,7 @@ with a direct call to action to the [submission guide](./CONTRIBUTING.md).
 | `src/pages/api/user/profile.ts` | `PATCH` the signed-in user's display name + avatar |
 | `src/pages/api/publishers/create.ts` | Creates a publisher owned by the signed-in user |
 | `src/pages/api/publishers/[id].ts` | `GET` a publisher profile + stats; `PATCH` the owner's branding |
-| `src/components/` | `Navbar`, `Card`, `DetailDrawer`, `CategoryFilter`, `Icon`, `ImageField` |
+| `src/components/` | `Navbar`, `Card`, `CategoryFilter`, `Icon`, `ImageField` |
 | `src/lib/db.ts` | Typed D1 access layer for the catalog |
 | `src/lib/session.ts` | HMAC-signed session token (sign/verify) |
 | `src/lib/auth.ts` | Session helpers shared by pages and API routes |
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 7722262..d18b0b8 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -42,7 +42,14 @@ const cli = `openrom-core --install-plugin ${plugin.id}`;
 
     <div class="min-w-0 flex-1">
       <div class="flex items-center gap-1.5">
-        <h3 class="truncate text-sm font-semibold text-zinc-100">{plugin.name}</h3>
+        <h3 class="truncate text-sm font-semibold text-zinc-100">
+          <a
+            href={`/plugin/${plugin.id}`}
+            class="after:absolute after:inset-0 after:content-['']"
+          >
+            {plugin.name}
+          </a>
+        </h3>
         {
           plugin.publisherVerified && (
             <Icon name="badge-check" class="h-4 w-4 shrink-0 text-cyan-400" />
@@ -54,7 +61,7 @@ const cli = `openrom-core --install-plugin ${plugin.id}`;
           plugin.publisherId ? (
             <a
               href={`/publisher/${plugin.publisherId}`}
-              class="transition hover:text-cyan-300"
+              class="relative z-10 transition hover:text-cyan-300"
               title={`View ${plugin.publisherName}'s profile`}
             >
               {plugin.publisherName}
@@ -106,7 +113,7 @@ const cli = `openrom-core --install-plugin ${plugin.id}`;
       </span>
     </div>
 
-    <div class="flex items-center gap-2">
+    <div class="relative z-10 flex items-center gap-2">
       <button
         type="button"
         data-copy-cli={cli}
@@ -116,14 +123,13 @@ const cli = `openrom-core --install-plugin ${plugin.id}`;
       >
         <Icon name="copy" class="h-4 w-4" />
       </button>
-      <button
-        type="button"
-        data-open-detail={plugin.id}
+      <a
+        href={`/plugin/${plugin.id}`}
         class="inline-flex h-8 items-center gap-1.5 rounded-lg border border-zinc-800 px-3 text-xs font-medium text-zinc-300 transition hover:border-cyan-500/40 hover:text-cyan-300"
       >
         Details
         <Icon name="chevron-right" class="h-3.5 w-3.5" />
-      </button>
+      </a>
       {
         published ? (
           <a
diff --git a/src/components/DetailDrawer.astro b/src/components/DetailDrawer.astro
deleted file mode 100644
index e477d21..0000000
--- a/src/components/DetailDrawer.astro
+++ /dev/null
@@ -1,291 +0,0 @@
----
-import Icon from './Icon.astro';
-import { PLATFORM_ICONS, SITE } from '../lib/site';
-import type { Plugin } from '../lib/db';
-import { renderMarkdown } from '../lib/markdown';
-
-interface Props {
-  plugins: Plugin[];
-}
-
-const { plugins } = Astro.props;
-
-const cliFor = (id: string) => `openrom-core --install-plugin ${id}`;
-
-function manifestFor(plugin: Plugin) {
-  return {
-    id: plugin.id,
-    name: plugin.name,
-    version: plugin.version,
-    min_core_version: plugin.minCoreVersion,
-    publisher: { name: plugin.publisherName, verified: plugin.publisherVerified },
-    category: plugin.category,
-    description: plugin.description,
-    routes: plugin.routes,
-    platforms: plugin.platforms,
-    download_url: plugin.downloadUrl,
-    sha256: plugin.sha256 || null,
-    icon: plugin.icon,
-    downloads: plugin.downloads,
-    created_at: plugin.createdAt,
-  };
-}
----
-
-<!-- Slide-over details drawer. Content is pre-rendered per extension in <template>
-     tags below and cloned in by the page script, so markdown is rendered on the
-     server and the client stays dependency-free. -->
-<div data-drawer-root class="pointer-events-none fixed inset-0 z-50 hidden" aria-hidden="true">
-  <div
-    data-drawer-backdrop
-    class="absolute inset-0 bg-zinc-950/70 opacity-0 backdrop-blur-sm"
-  >
-  </div>
-  <div
-    data-drawer-panel
-    role="dialog"
-    aria-modal="true"
-    class="absolute right-0 top-0 flex h-full w-full max-w-xl translate-x-full flex-col border-l border-zinc-800 bg-zinc-950 shadow-2xl"
-  >
-    <div data-drawer-content class="flex min-h-0 flex-1 flex-col"></div>
-  </div>
-</div>
-
-{
-  plugins.map((plugin) => {
-    const published = Boolean(plugin.sha256);
-    const readmeHtml =
-      renderMarkdown(plugin.readme) ||
-      '<p class="text-zinc-500">No README has been published for this extension yet.</p>';
-
-    return (
-      <template data-detail-template={plugin.id}>
-        <header class="flex items-start gap-3 border-b border-zinc-800 px-5 py-4">
-          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
-            <Icon name={plugin.icon} class="h-5.5 w-5.5" />
-          </span>
-          <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-1.5">
-              <h2 class="truncate text-base font-semibold text-zinc-100">{plugin.name}</h2>
-              {plugin.publisherVerified && (
-                <Icon name="badge-check" class="h-4 w-4 shrink-0 text-cyan-400" />
-              )}
-            </div>
-            <p class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-zinc-500">
-              {plugin.publisherId ? (
-                <a
-                  href={`/publisher/${plugin.publisherId}`}
-                  class="transition hover:text-cyan-300"
-                >
-                  {plugin.publisherName}
-                </a>
-              ) : (
-                <span>{plugin.publisherName}</span>
-              )}
-              <span aria-hidden="true">·</span>
-              <span class="font-mono">v{plugin.version}</span>
-              <span aria-hidden="true">·</span>
-              <span>min core {plugin.minCoreVersion}</span>
-            </p>
-          </div>
-          <button
-            type="button"
-            data-drawer-close
-            aria-label="Close details"
-            class="grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-zinc-800 text-zinc-400 transition hover:border-zinc-700 hover:text-white"
-          >
-            <Icon name="x" class="h-4 w-4" />
-          </button>
-        </header>
-
-        <div class="flex items-center gap-4 border-b border-zinc-800 px-5 py-3 text-xs text-zinc-500">
-          <span class="inline-flex items-center gap-1.5">
-            <Icon name="download" class="h-3.5 w-3.5" />
-            {plugin.downloads.toLocaleString()} downloads
-          </span>
-          <span class="inline-flex items-center gap-1.5">
-            {plugin.platforms.map((platform) => (
-              <span title={platform}>
-                <Icon name={PLATFORM_ICONS[platform] ?? 'package'} class="h-3.5 w-3.5" />
-              </span>
-            ))}
-          </span>
-          <span class="ml-auto rounded-md border border-zinc-800 px-2 py-0.5 text-[0.7rem] text-zinc-400">
-            {plugin.category}
-          </span>
-        </div>
-
-        <nav class="flex gap-1 border-b border-zinc-800 px-3" role="tablist">
-          {['Overview', 'Routes', 'Installation', 'Manifest'].map((tab, index) => (
-            <button
-              type="button"
-              role="tab"
-              data-detail-tab={tab.toLowerCase()}
-              data-active={index === 0 ? 'true' : 'false'}
-              class="tab-btn border-b-2 border-transparent px-3 py-2.5 text-sm text-zinc-400 transition hover:text-zinc-200 data-[active=true]:border-cyan-400 data-[active=true]:text-white"
-            >
-              {tab}
-            </button>
-          ))}
-        </nav>
-
-        <div class="min-h-0 flex-1 overflow-y-auto px-5 py-5">
-          <section data-detail-panel="overview" class="prose" set:html={readmeHtml} />
-
-          <section data-detail-panel="routes" class="hidden">
-            {plugin.routes.length > 0 ? (
-              <ul class="flex flex-col gap-2">
-                {plugin.routes.map((route) => (
-                  <li class="flex items-center gap-3 rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2.5">
-                    <Icon name="route" class="h-4 w-4 text-cyan-400" />
-                    <span class="font-mono text-sm text-zinc-200">{route}</span>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p class="text-sm text-zinc-500">No conversion routes declared.</p>
-            )}
-          </section>
-
-          <section data-detail-panel="installation" class="hidden flex-col gap-5">
-            <div>
-              <h3 class="text-sm font-semibold text-zinc-200">Install with OpenROM Core</h3>
-              <div class="mt-2 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
-                <code class="flex-1 overflow-x-auto font-mono text-xs text-cyan-300">
-                  {cliFor(plugin.id)}
-                </code>
-                <button
-                  type="button"
-                  data-copy-cli={cliFor(plugin.id)}
-                  aria-label="Copy install command"
-                  class="grid h-7 w-7 shrink-0 place-items-center rounded-md border border-zinc-800 text-zinc-400 transition hover:text-cyan-300"
-                >
-                  <Icon name="copy" class="h-3.5 w-3.5" />
-                </button>
-              </div>
-            </div>
-
-            <div>
-              <h3 class="text-sm font-semibold text-zinc-200">Bundle</h3>
-              {published ? (
-                <dl class="mt-2 space-y-1.5 text-xs">
-                  <div class="flex gap-2">
-                    <dt class="w-20 shrink-0 text-zinc-500">Source</dt>
-                    <dd class="break-all font-mono text-zinc-300">{plugin.downloadUrl}</dd>
-                  </div>
-                  <div class="flex gap-2">
-                    <dt class="w-20 shrink-0 text-zinc-500">SHA-256</dt>
-                    <dd class="break-all font-mono text-zinc-300">{plugin.sha256}</dd>
-                  </div>
-                </dl>
-              ) : (
-                <p class="mt-2 text-xs text-zinc-500">
-                  No <span class="font-mono">.orplug</span> bundle has been published for this
-                  extension yet, so it cannot be installed. Track progress on{' '}
-                  <a class="text-cyan-400 hover:underline" href={SITE.github}>GitHub</a>.
-                </p>
-              )}
-            </div>
-          </section>
-
-          <section data-detail-panel="manifest" class="hidden">
-            <pre class="overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-950 p-4 font-mono text-xs leading-relaxed text-zinc-300">
-              {JSON.stringify(manifestFor(plugin), null, 2)}
-            </pre>
-          </section>
-        </div>
-
-        <footer class="flex items-center gap-3 border-t border-zinc-800 px-5 py-4">
-          {published ? (
-            <a
-              href={`/api/download/${plugin.id}`}
-              class="inline-flex h-10 flex-1 items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-4 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
-            >
-              <Icon name="download" class="h-4 w-4" />
-              Download extension
-            </a>
-          ) : (
-            <span class="inline-flex h-10 flex-1 cursor-not-allowed items-center justify-center gap-2 rounded-lg border border-zinc-800 text-sm font-medium text-zinc-500">
-              Bundle not published yet
-            </span>
-          )}
-          <a
-            href={SITE.contributing}
-            class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm text-zinc-300 transition hover:border-zinc-700 hover:text-white"
-          >
-            Publish
-          </a>
-        </footer>
-      </template>
-    );
-  })
-}
-
-<!-- The drawer owns its own behaviour so any page that renders it (the storefront
-     and the publisher profile) gets working open/close, tabs, and deep links. -->
-<script>
-  const drawer = document.querySelector<HTMLElement>('[data-drawer-root]');
-  const backdrop = document.querySelector<HTMLElement>('[data-drawer-backdrop]');
-  const panel = document.querySelector<HTMLElement>('[data-drawer-panel]');
-  const content = document.querySelector<HTMLElement>('[data-drawer-content]');
-
-  function openDrawer(id: string) {
-    const template = document.querySelector<HTMLTemplateElement>(`[data-detail-template="${id}"]`);
-    if (!template || !drawer || !content || !panel || !backdrop) return;
-    content.replaceChildren(template.content.cloneNode(true));
-    drawer.classList.remove('hidden');
-    drawer.setAttribute('aria-hidden', 'false');
-    requestAnimationFrame(() => {
-      panel.classList.remove('translate-x-full');
-      backdrop.classList.remove('opacity-0');
-    });
-    history.replaceState(null, '', `?ext=${encodeURIComponent(id)}`);
-  }
-
-  function closeDrawer() {
-    if (!drawer || !panel || !backdrop) return;
-    panel.classList.add('translate-x-full');
-    backdrop.classList.add('opacity-0');
-    drawer.setAttribute('aria-hidden', 'true');
-    setTimeout(() => {
-      drawer.classList.add('hidden');
-      content?.replaceChildren();
-    }, 260);
-    history.replaceState(
-      null,
-      '',
-      location.pathname +
-        location.search.replace(/([?&])ext=[^&]*/g, '$1').replace(/[?&]$/, ''),
-    );
-  }
-
-  document.addEventListener('click', (event) => {
-    const target = event.target as HTMLElement;
-    const opener = target.closest<HTMLElement>('[data-open-detail]');
-    if (opener?.dataset.openDetail) {
-      openDrawer(opener.dataset.openDetail);
-      return;
-    }
-    if (target.closest('[data-drawer-close]') || target === backdrop) closeDrawer();
-  });
-
-  // Tabs are delegated because the panel content is cloned in on demand.
-  content?.addEventListener('click', (event) => {
-    const tab = (event.target as HTMLElement).closest<HTMLElement>('[data-detail-tab]');
-    if (!tab || !content) return;
-    const name = tab.dataset.detailTab ?? '';
-    for (const btn of content.querySelectorAll<HTMLElement>('[data-detail-tab]')) {
-      btn.dataset.active = btn.dataset.detailTab === name ? 'true' : 'false';
-    }
-    for (const section of content.querySelectorAll<HTMLElement>('[data-detail-panel]')) {
-      section.classList.toggle('hidden', section.dataset.detailPanel !== name);
-    }
-  });
-
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') closeDrawer();
-  });
-
-  const ext = new URLSearchParams(location.search).get('ext');
-  if (ext) openDrawer(ext);
-</script>
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
index 7e124ed..0f86e9a 100644
--- a/src/components/Icon.astro
+++ b/src/components/Icon.astro
@@ -30,6 +30,7 @@ const ICONS: Record<string, string> = {
   cpu: '<rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2"/>',
   sparkles:
     '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4M22 5h-4M4 17v2M5 18H3"/>',
+  zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
   monitor: '<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>',
   terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
   apple: '<path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/>',
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6700ac8..0764512 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,13 +2,20 @@
 import Layout from '../layouts/Layout.astro';
 import CategoryFilter from '../components/CategoryFilter.astro';
 import Card from '../components/Card.astro';
-import DetailDrawer from '../components/DetailDrawer.astro';
 import Icon from '../components/Icon.astro';
 import { getDB, listPlugins, type Plugin } from '../lib/db';
 import { EMPTY_STATE, SITE, orderCategories } from '../lib/site';
 
 export const prerender = false;
 
+// Plugin details used to open in a client-side drawer keyed by ?ext=/?id=. Those
+// deep links now belong to the dedicated /plugin/[id] page, so send them there
+// instead of rendering the catalog with a query nothing acts on.
+const legacyId = Astro.url.searchParams.get('ext') ?? Astro.url.searchParams.get('id');
+if (legacyId) {
+  return Astro.redirect(`/plugin/${encodeURIComponent(legacyId)}`, 301);
+}
+
 let plugins: Plugin[] = [];
 let dbError: string | null = null;
 try {
@@ -136,8 +143,6 @@ const total = plugins.length;
       )
     }
   </main>
-
-  <DetailDrawer plugins={plugins} />
 </Layout>
 
 <script>
@@ -256,7 +261,7 @@ const total = plugins.length;
     }
   });
 
-  // --- Deep links: ?q= pre-filters the grid (the drawer handles ?ext= itself) ---
+  // --- Deep links: ?q= pre-filters the grid ---
   const params = new URLSearchParams(location.search);
   const q = params.get('q');
   if (q && searchInput) {
diff --git a/src/pages/plugin/[id].astro b/src/pages/plugin/[id].astro
new file mode 100644
index 0000000..641cfd2
--- /dev/null
+++ b/src/pages/plugin/[id].astro
@@ -0,0 +1,358 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Icon from '../../components/Icon.astro';
+import { getDB, getPlugin } from '../../lib/db';
+import { PLATFORM_ICONS, SITE } from '../../lib/site';
+import { renderMarkdown } from '../../lib/markdown';
+
+export const prerender = false;
+
+const id = Astro.params.id ?? '';
+
+// A D1 read can fail outright (missing table, unavailable binding). That is a
+// server problem, not a missing plugin, so it must not surface as an unhandled
+// 500 — mirror the publisher page and report it as a 503 instead.
+let plugin = null;
+let dbError = false;
+try {
+  plugin = await getPlugin(getDB(Astro.locals), id);
+} catch (error) {
+  console.error(`Failed to load plugin "${id}"`, error);
+  dbError = true;
+}
+
+if (dbError) {
+  Astro.response.status = 503;
+} else if (!plugin) {
+  Astro.response.status = 404;
+}
+
+const cli = plugin ? `openrom-core --install-plugin ${plugin.id}` : '';
+const published = Boolean(plugin?.sha256);
+const readmeHtml = plugin
+  ? renderMarkdown(plugin.readme) ||
+    '<p class="text-zinc-500">No README has been published for this extension yet.</p>'
+  : '';
+
+const manifest = plugin
+  ? {
+      id: plugin.id,
+      name: plugin.name,
+      version: plugin.version,
+      minCoreVersion: plugin.minCoreVersion,
+      publisher: {
+        id: plugin.publisherId,
+        name: plugin.publisherName,
+        verified: plugin.publisherVerified,
+      },
+      category: plugin.category,
+      description: plugin.description,
+      routes: plugin.routes,
+      platforms: plugin.platforms,
+      downloadUrl: plugin.downloadUrl,
+      sha256: plugin.sha256 || null,
+      icon: plugin.icon,
+    }
+  : null;
+
+const heading = dbError ? 'Plugin unavailable' : 'Plugin not found';
+const body = dbError
+  ? 'We could not load this plugin right now. This is usually temporary — please try again shortly.'
+  : `No plugin exists with the id “${id}”. It may have been renamed, or the link that brought you here may be out of date.`;
+---
+
+<Layout title={plugin?.name ?? heading} description={plugin?.description ?? body}>
+  {
+    !plugin ? (
+      <main class="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center sm:px-6 lg:px-8">
+        <div class="grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
+          <Icon name={dbError ? 'wrench' : 'search'} class="h-7 w-7" />
+        </div>
+        <h1 class="mt-6 text-2xl font-bold tracking-tight text-white">{heading}</h1>
+        <p class="mt-3 max-w-md text-sm leading-relaxed text-zinc-400">{body}</p>
+        <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+          <a
+            href="/"
+            class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
+          >
+            <Icon name="arrow-left" class="h-4 w-4" />
+            Back to Marketplace
+          </a>
+          {dbError && (
+            <button
+              type="button"
+              data-retry
+              class="inline-flex h-10 items-center gap-2 rounded-lg border border-cyan-500/40 bg-cyan-500/10 px-4 text-sm font-medium text-cyan-200 transition hover:border-cyan-400 hover:text-cyan-100"
+            >
+              <Icon name="sparkles" class="h-4 w-4" />
+              Try again
+            </button>
+          )}
+        </div>
+      </main>
+      <script>
+        document.querySelector('[data-retry]')?.addEventListener('click', () => location.reload());
+      </script>
+    ) : (
+      <main class="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+        <a
+          href="/"
+          class="inline-flex items-center gap-2 text-sm text-zinc-400 transition hover:text-cyan-300"
+        >
+          <Icon name="arrow-left" class="h-4 w-4" />
+          Back to Marketplace
+        </a>
+
+        {/* Hero */}
+        <header class="mt-6 rounded-2xl border border-zinc-800 bg-zinc-900/40 p-6 sm:p-8">
+          <div class="flex flex-col gap-5 sm:flex-row sm:items-start">
+            <span class="grid h-16 w-16 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-cyan-400/15 to-purple-500/15 text-cyan-300 ring-1 ring-inset ring-zinc-700/60">
+              <Icon name={plugin.icon} class="h-8 w-8" />
+            </span>
+
+            <div class="min-w-0 flex-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <h1 class="text-2xl font-bold tracking-tight text-white">{plugin.name}</h1>
+                <span class="rounded-md border border-zinc-800 bg-zinc-950/60 px-2 py-0.5 font-mono text-xs text-zinc-400">
+                  v{plugin.version}
+                </span>
+                <span class="rounded-md border border-cyan-500/30 bg-cyan-500/10 px-2 py-0.5 text-xs font-medium text-cyan-300">
+                  {plugin.category}
+                </span>
+              </div>
+
+              <p class="mt-2 flex flex-wrap items-center gap-x-2 text-sm text-zinc-400">
+                <span class="text-zinc-500">by</span>
+                {plugin.publisherId ? (
+                  <a
+                    href={`/publisher/${plugin.publisherId}`}
+                    class="inline-flex items-center gap-1.5 font-medium text-zinc-200 transition hover:text-cyan-300"
+                  >
+                    {plugin.publisherName}
+                    {plugin.publisherVerified && (
+                      <Icon name="badge-check" class="h-4 w-4 text-cyan-400" />
+                    )}
+                  </a>
+                ) : (
+                  <span class="inline-flex items-center gap-1.5 font-medium text-zinc-200">
+                    {plugin.publisherName}
+                    {plugin.publisherVerified && (
+                      <Icon name="badge-check" class="h-4 w-4 text-cyan-400" />
+                    )}
+                  </span>
+                )}
+                <span aria-hidden="true">·</span>
+                <span>min core {plugin.minCoreVersion}</span>
+              </p>
+
+              <p class="mt-3 max-w-2xl text-pretty text-sm leading-relaxed text-zinc-400">
+                {plugin.description}
+              </p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div class="mt-6 flex flex-wrap items-center gap-3">
+            {published ? (
+              <a
+                href={`openrom://plugin/${plugin.id}`}
+                class="inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 shadow-lg shadow-cyan-500/20 transition hover:from-cyan-400 hover:to-purple-400"
+              >
+                <Icon name="zap" class="h-4 w-4" />
+                Install in OpenROM
+              </a>
+            ) : (
+              <span
+                title="No .orplug bundle has been published for this extension yet"
+                class="inline-flex h-11 cursor-not-allowed items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-500"
+              >
+                <Icon name="zap" class="h-4 w-4" />
+                Bundle not published yet
+              </span>
+            )}
+
+            {published && (
+              <a
+                href={`/api/download/${plugin.id}`}
+                class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
+              >
+                <Icon name="download" class="h-4 w-4" />
+                Download .orplug
+              </a>
+            )}
+
+            <button
+              type="button"
+              data-copy={cli}
+              class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
+            >
+              <Icon name="terminal" class="h-4 w-4" />
+              Copy CLI Install
+            </button>
+          </div>
+
+          {
+            published && (
+              <p class="mt-3 text-xs text-zinc-500">
+                One-click install needs OpenROM Core installed. If nothing happens, use{' '}
+                <a href={`/api/download/${plugin.id}`} class="text-cyan-400 hover:underline">
+                  the .orplug download
+                </a>{' '}
+                or the CLI command above.
+              </p>
+            )
+          }
+
+          {/* Quick facts */}
+          <dl class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3 border-t border-zinc-800/70 pt-5 text-xs text-zinc-500">
+            <div class="flex items-center gap-1.5">
+              <Icon name="download" class="h-3.5 w-3.5" />
+              <span class="font-medium text-zinc-300">{plugin.downloads.toLocaleString()}</span>
+              <span>downloads</span>
+            </div>
+            <div class="flex items-center gap-3">
+              {plugin.platforms.map((platform) => (
+                <span class="inline-flex items-center gap-1.5" title={platform}>
+                  <Icon name={PLATFORM_ICONS[platform] ?? 'package'} class="h-3.5 w-3.5" />
+                  <span>{platform}</span>
+                </span>
+              ))}
+            </div>
+          </dl>
+        </header>
+
+        <div class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_20rem]">
+          {/* Main column */}
+          <div class="flex flex-col gap-8">
+            <section class="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
+              <h2 class="text-sm font-semibold uppercase tracking-wide text-zinc-400">Overview</h2>
+              <div class="prose mt-4" set:html={readmeHtml} />
+            </section>
+
+            <section class="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
+              <h2 class="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                Supported Routes
+              </h2>
+              {plugin.routes.length > 0 ? (
+                <div class="mt-4 flex flex-wrap gap-2">
+                  {plugin.routes.map((route) => (
+                    <span class="inline-flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950/60 px-3 py-1.5 font-mono text-xs text-zinc-200">
+                      <Icon name="route" class="h-3.5 w-3.5 text-cyan-400" />
+                      {route.replace(/\s*->\s*/, ' ➔ ')}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p class="mt-4 text-sm text-zinc-500">No conversion routes declared.</p>
+              )}
+            </section>
+
+            <section class="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
+              <h2 class="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                Installation
+              </h2>
+
+              <div class="mt-4">
+                <h3 class="text-sm font-semibold text-zinc-200">Command line</h3>
+                <p class="mt-1.5 text-sm text-zinc-400">
+                  Install with OpenROM Core. This fetches the bundle and verifies its SHA-256
+                  before installing.
+                </p>
+                <div class="mt-3 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950/60 p-3">
+                  <code class="flex-1 overflow-x-auto font-mono text-xs text-cyan-300">{cli}</code>
+                  <button
+                    type="button"
+                    data-copy={cli}
+                    aria-label="Copy install command"
+                    class="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-zinc-800 text-zinc-400 transition hover:text-cyan-300"
+                  >
+                    <Icon name="copy" class="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+
+              <div class="mt-6">
+                <h3 class="text-sm font-semibold text-zinc-200">Desktop app</h3>
+                <ol class="mt-2 flex flex-col gap-1.5 text-sm text-zinc-400">
+                  <li class="flex gap-2">
+                    <span class="text-zinc-600">1.</span>
+                    <span>
+                      Download the <span class="font-mono text-zinc-300">.orplug</span> bundle
+                      above.
+                    </span>
+                  </li>
+                  <li class="flex gap-2">
+                    <span class="text-zinc-600">2.</span>
+                    <span>
+                      Drag the file onto the OpenROM window, or use <em>Install from file…</em>.
+                    </span>
+                  </li>
+                  <li class="flex gap-2">
+                    <span class="text-zinc-600">3.</span>
+                    <span>OpenROM checks the checksum and installs it automatically.</span>
+                  </li>
+                </ol>
+              </div>
+            </section>
+          </div>
+
+          {/* Sidebar */}
+          <aside class="flex flex-col gap-6">
+            <section class="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
+              <h2 class="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                Manifest Specs
+              </h2>
+
+              {published ? (
+                <div class="mt-4">
+                  <p class="text-xs font-medium text-zinc-500">SHA-256 checksum</p>
+                  <div class="mt-2 flex items-start gap-2 rounded-lg border border-zinc-800 bg-zinc-950/60 p-3">
+                    <code class="min-w-0 flex-1 break-all font-mono text-[0.7rem] leading-relaxed text-zinc-300">
+                      {plugin.sha256}
+                    </code>
+                    <button
+                      type="button"
+                      data-copy={plugin.sha256}
+                      aria-label="Copy SHA-256 checksum"
+                      class="grid h-7 w-7 shrink-0 place-items-center rounded-md border border-zinc-800 text-zinc-400 transition hover:text-cyan-300"
+                    >
+                      <Icon name="copy" class="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <p class="mt-4 text-xs text-zinc-500">
+                  No <span class="font-mono">.orplug</span> bundle has been published for this
+                  extension yet, so it cannot be installed. Track progress on{' '}
+                  <a class="text-cyan-400 hover:underline" href={SITE.github}>
+                    GitHub
+                  </a>.
+                </p>
+              )}
+
+              <p class="mt-5 text-xs font-medium text-zinc-500">plugin.json</p>
+              <pre class="mt-2 overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-950 p-4 font-mono text-[0.7rem] leading-relaxed text-zinc-300">
+                {JSON.stringify(manifest, null, 2)}
+              </pre>
+            </section>
+          </aside>
+        </div>
+      </main>
+      <script>
+        document.addEventListener('click', async (event) => {
+          const trigger = (event.target as HTMLElement).closest<HTMLElement>('[data-copy]');
+          if (!trigger) return;
+          const text = trigger.dataset.copy ?? '';
+          try {
+            await navigator.clipboard.writeText(text);
+            const original = trigger.innerHTML;
+            trigger.innerHTML = '<span class="text-cyan-400">copied</span>';
+            setTimeout(() => (trigger.innerHTML = original), 1200);
+          } catch {
+            /* clipboard unavailable */
+          }
+        });
+      </script>
+    )
+  }
+</Layout>
diff --git a/src/pages/publisher/[id].astro b/src/pages/publisher/[id].astro
index 79638e1..233adad 100644
--- a/src/pages/publisher/[id].astro
+++ b/src/pages/publisher/[id].astro
@@ -1,7 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import Card from '../../components/Card.astro';
-import DetailDrawer from '../../components/DetailDrawer.astro';
 import Icon from '../../components/Icon.astro';
 import { getDB } from '../../lib/db';
 import { loadPublisherProfile } from '../../lib/publisher-profile';
@@ -270,5 +269,4 @@ const fallbackBody = dbError
   )
   }
 
-  {publisher && <DetailDrawer plugins={plugins} />}
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 540e612..9c772f1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -88,14 +88,6 @@ body {
   margin: 1em 0;
 }
 
-/* Details drawer transitions. */
-[data-drawer] {
-  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
-}
-[data-drawer-backdrop] {
-  transition: opacity 200ms ease;
-}
-
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: #09090b; }
 ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 999px; }