rename tape to options and switch the web shell to a drawer

2026-05-23 19:39:19 -04:00 · 2026-05-23 19:39:19 -04:00 · 7ca0e05a2d
commit 7ca0e05a2d
parent f056f6d2b8
10 changed files with 916 additions and 154 deletions
--- a/docs/turns/2026-05-23-rename-tape-options-drawer.html
+++ b/docs/turns/2026-05-23-rename-tape-options-drawer.html
@ -0,0 +1,654 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Turn Report: Rename Tape to Options and Replace the Web Rail</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #06080b;
+      --panel: #111820;
+      --panel-2: #0d141b;
+      --text: #e6edf4;
+      --muted: #90a0b2;
+      --faint: #6e7b8c;
+      --accent: #f5a623;
+      --accent-soft: rgba(245, 166, 35, 0.14);
+      --border: rgba(255, 255, 255, 0.08);
+      --border-strong: rgba(255, 177, 48, 0.35);
+      --ok: #25c17a;
+      --warn: #ffd599;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(245, 166, 35, 0.09), transparent 28%),
+        linear-gradient(180deg, #0b1016 0%, #06080b 100%);
+      line-height: 1.6;
+    }
+    main {
+      max-width: 1140px;
+      margin: 0 auto;
+      padding: 28px 18px 40px;
+    }
+    header {
+      padding: 20px 20px 18px;
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      background: linear-gradient(180deg, rgba(17, 24, 32, 0.96), rgba(13, 20, 27, 0.96));
+      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
+    }
+    h1, h2 {
+      margin: 0;
+      font-family: "Quantico", "IBM Plex Sans", sans-serif;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    h1 {
+      font-size: clamp(1.45rem, 2.7vw, 2.2rem);
+    }
+    h2 {
+      margin-bottom: 0.8rem;
+      font-size: 1rem;
+      color: #f2f6fb;
+    }
+    .meta {
+      margin-top: 0.55rem;
+      color: var(--muted);
+      font-size: 0.95rem;
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.55rem;
+      margin-top: 0.85rem;
+    }
+    .chip {
+      padding: 0.28rem 0.68rem;
+      border-radius: 999px;
+      border: 1px solid var(--border-strong);
+      background: var(--accent-soft);
+      color: var(--text);
+      font-size: 0.82rem;
+      font-family: "IBM Plex Mono", ui-monospace, monospace;
+    }
+    .grid {
+      display: grid;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    section {
+      padding: 1rem 1.05rem;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      background: color-mix(in oklab, var(--panel) 90%, black);
+    }
+    p {
+      margin: 0.4rem 0;
+    }
+    ul {
+      margin: 0.45rem 0 0;
+      padding-left: 1.2rem;
+    }
+    li + li {
+      margin-top: 0.35rem;
+    }
+    code {
+      font-family: "IBM Plex Mono", ui-monospace, monospace;
+      font-size: 0.92em;
+      padding: 0.08rem 0.32rem;
+      border-radius: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: rgba(255, 255, 255, 0.05);
+      color: #f2f6fb;
+    }
+    .callout {
+      margin-top: 0.8rem;
+      padding: 0.8rem 0.9rem;
+      border-radius: 12px;
+      border: 1px solid rgba(255, 177, 48, 0.28);
+      background: rgba(245, 166, 35, 0.08);
+      color: #f5e6c8;
+    }
+    .good {
+      color: var(--ok);
+    }
+    .warn {
+      color: var(--warn);
+    }
+    .diff-grid {
+      display: grid;
+      gap: 0.85rem;
+    }
+    .diff-shell {
+      border: 1px solid rgba(255, 177, 48, 0.22);
+      border-radius: 12px;
+      overflow: hidden;
+      background: #0b1118;
+    }
+    .diff-title {
+      margin: 0;
+      padding: 0.65rem 0.8rem;
+      border-bottom: 1px solid rgba(255, 177, 48, 0.18);
+      background: rgba(245, 166, 35, 0.08);
+      color: #f2f6fb;
+      font-size: 0.88rem;
+      font-family: "IBM Plex Mono", ui-monospace, monospace;
+    }
+    .diff-view {
+      padding: 0.35rem;
+    }
+    .diff-fallback {
+      margin: 0;
+      padding: 0.8rem;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      white-space: pre-wrap;
+      overflow-x: auto;
+      font-size: 0.84rem;
+      font-family: "IBM Plex Mono", ui-monospace, monospace;
+      color: #dbe6f6;
+      background: #0b1118;
+    }
+    .diff-shell.rendered .diff-fallback {
+      display: none;
+    }
+    .note {
+      margin-top: 0.7rem;
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <h1>Rename Tape to Options and Replace the Web Rail</h1>
+      <p class="meta">Created: 2026-05-23 19:36 EDT · Repo: <code>islandflow</code> · Branch: <code>sidebar-redesign</code></p>
+      <div class="chips">
+        <span class="chip">Beads: islandflow-7ez</span>
+        <span class="chip">Follow-up: islandflow-3by</span>
+        <span class="chip">Scope: web shell, routing, desktop compatibility</span>
+      </div>
+    </header>
+
+    <div class="grid">
+      <section>
+        <h2>Summary</h2>
+        <p>The Tape surface is now presented to users as <code>Options</code>, with <code>/options</code> as the canonical web route and <code>/tape</code> preserved as a compatibility redirect. The shared web shell no longer reserves a persistent left rail; every route now gets full-width content under a sticky top header, with navigation, branding, and shell metrics moved into a top-left overlay drawer.</p>
+      </section>
+
+      <section>
+        <h2>Changes Made</h2>
+        <ul>
+          <li>Added canonical web route <code>/options</code> via <code>apps/web/app/options/page.tsx</code> and changed <code>apps/web/app/tape/page.tsx</code> to redirect to it.</li>
+          <li>Updated route helpers in <code>apps/web/app/terminal.tsx</code> so <code>/options</code> is canonical while <code>/tape</code> remains accepted during transition.</li>
+          <li>Renamed top-level navigation copy from <code>Tape</code> to <code>Options</code>.</li>
+          <li>Replaced the persistent web rail with a sticky header plus overlay drawer in <code>apps/web/app/terminal.tsx</code> and <code>apps/web/app/globals.css</code>.</li>
+          <li>Changed the Options page layout to a full-width two-section stack: <code>OptionsPane</code> first, <code>FlowPane</code> below with title <code>Packets</code>, and removed <code>EquitiesPane</code> from this route.</li>
+          <li>Updated route, redirect, and desktop trust tests plus desktop README guidance to prefer <code>/options</code> while documenting <code>/tape</code> compatibility.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Context</h2>
+        <p>This change consolidates two related UX issues: the product naming mismatch around the Tape surface, and the layout cost of the always-visible left rail. The product/design context for Islandflow emphasizes investigation workflows, stable rhythm under live updates, and full-width evidence surfaces over decorative chrome.</p>
+        <div class="callout">The drawer keeps navigation and shell instrumentation available without permanently consuming horizontal space on dense data routes.</div>
+      </section>
+
+      <section>
+        <h2>Important Implementation Details</h2>
+        <ul>
+          <li><code>normalizeTerminalPathname()</code> now treats <code>/tape</code> as an alias of <code>/options</code>, which keeps route-feature decisions, live subscriptions, and nav highlighting aligned from one helper.</li>
+          <li>The new Options route intentionally drops the Equities subscription and pane. The canonical route now subscribes only to <code>options</code>, <code>nbbo</code>, and <code>flow</code>.</li>
+          <li>The drawer closes on route change, backdrop click, and <code>Escape</code> via client-side state in <code>TerminalAppShell</code>.</li>
+          <li>Desktop trust remains origin-based, so no Electron security model change was required. The desktop updates only clarify preferred route examples and add explicit <code>/options</code> coverage.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Relevant Diff Snippets</h2>
+        <div class="diff-grid">
+          <div class="diff-shell" id="diff-shell-1">
+            <p class="diff-title">apps/web/app/terminal.tsx · canonical /options routing and nav labels</p>
+            <div class="diff-view" id="diff-1"></div>
+            <pre class="diff-fallback"><code>- export const NAV_ITEMS = [
+-   { href: "/", label: "Home" },
+-   { href: "/tape", label: "Tape" },
+-   { href: "/news", label: "News" }
+- ] as const;
+ const CANONICAL_OPTIONS_PATH = "/options";
+ const TAPE_COMPAT_PATH = "/tape";
+ export const normalizeTerminalPathname = (pathname: string): string =&gt; {
+   if (pathname === TAPE_COMPAT_PATH) return CANONICAL_OPTIONS_PATH;
+   return KNOWN_TERMINAL_PATHS.has(pathname) ? pathname : "/";
+ };
+ export const NAV_ITEMS = [
+   { href: "/", label: "Home" },
+   { href: "/options", label: "Options" },
+   { href: "/news", label: "News" }
+ ] as const;</code></pre>
+          </div>
+
+          <div class="diff-shell" id="diff-shell-2">
+            <p class="diff-title">apps/web/app/terminal.tsx · sticky header, overlay drawer, and Options page layout</p>
+            <div class="diff-view" id="diff-2"></div>
+            <pre class="diff-fallback"><code>- &lt;aside className="terminal-rail"&gt;...&lt;/aside&gt;
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ useEffect(() =&gt; { setDrawerOpen(false); }, [pathname]);
+ useEffect(() =&gt; {
+   if (!drawerOpen) return;
+   const handleKeyDown = (event: KeyboardEvent) =&gt; {
+     if (event.key === "Escape") setDrawerOpen(false);
+   };
+   document.addEventListener("keydown", handleKeyDown);
+   return () =&gt; document.removeEventListener("keydown", handleKeyDown);
+ }, [drawerOpen]);
+ &lt;header className="terminal-topbar"&gt;
+   &lt;button className="terminal-button terminal-menu-trigger"&gt;Menu&lt;/button&gt;
+   ...
+ &lt;/header&gt;
+ {drawerOpen ? &lt;&gt;...overlay drawer...&lt;/&gt; : null}
+- export function TapeRoute() {
+-   return &lt;PageFrame title="Tape"&gt;...&lt;EquitiesPane /&gt;...&lt;/PageFrame&gt;;
+- }
+ export function OptionsRoute() {
+   return &lt;PageFrame title="Options"&gt;...&lt;FlowPane title="Packets" /&gt;...&lt;/PageFrame&gt;;
+ }</code></pre>
+          </div>
+
+          <div class="diff-shell" id="diff-shell-3">
+            <p class="diff-title">apps/web/app/globals.css · full-width shell and drawer styling</p>
+            <div class="diff-view" id="diff-3"></div>
+            <pre class="diff-fallback"><code>- --rail-width: 236px;
+- .terminal-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
+- .terminal-rail { ... }
+- .page-grid-tape { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
+ --drawer-width: min(320px, calc(100vw - 28px));
+ .terminal-shell { position: relative; min-height: 100vh; }
+ .terminal-nav-drawer { position: fixed; inset: 0 auto 0 0; width: var(--drawer-width); ... }
+ .terminal-drawer-backdrop { position: fixed; inset: 0; ... }
+ .terminal-topbar { justify-content: space-between; backdrop-filter: blur(12px); }
+ .page-grid-options { grid-template-columns: minmax(0, 1fr); }</code></pre>
+          </div>
+
+          <div class="diff-shell" id="diff-shell-4">
+            <p class="diff-title">route + desktop compatibility · redirect and trust coverage</p>
+            <div class="diff-view" id="diff-4"></div>
+            <pre class="diff-fallback"><code>+ // apps/web/app/options/page.tsx
+ import { OptionsRoute } from "../terminal";
+ export default function Page() {
+   return &lt;OptionsRoute /&gt;;
+ }
+
+- // apps/web/app/tape/page.tsx
+- return &lt;TapeRoute /&gt;;
+ redirect("/options");
+
+ expect(isTrustedAppUrl("https://flow.deltaisland.io/options?symbol=SPY")).toBe(true);
+ expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);</code></pre>
+          </div>
+        </div>
+        <p class="note">Snippets are rendered client-side with Diffs (diffs.com project) and include inline fallback text for offline viewing.</p>
+      </section>
+
+      <section>
+        <h2>Expected Impact for End-Users</h2>
+        <p>Users now land on a more clearly named <code>Options</code> route, keep old <code>/tape</code> links working, and get more horizontal space across the web app because navigation no longer consumes a permanent left column. The Options route is simpler and more focused: options flow first, packets below, without the Equities panel competing for width.</p>
+      </section>
+
+      <section>
+        <h2>Validation</h2>
+        <ul>
+          <li><span class="good">Passed:</span> <code>bun test apps/web/app/routes.test.ts apps/web/app/terminal.test.ts apps/desktop/src/security.test.ts</code> (85 passing tests).</li>
+          <li><span class="good">Passed:</span> <code>bun --cwd=apps/web run build</code> including production build, TypeScript, and app-route generation for <code>/options</code> and <code>/tape</code>.</li>
+          <li><span class="warn">Skipped by request:</span> browser visual probes for the drawer/header refactor.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Issues, Limitations, and Mitigations</h2>
+        <ul>
+          <li>The current web test suite is still mostly route/helper-level, so the new drawer interactions are not covered by DOM/browser tests yet. Mitigation: filed follow-up issue <code>islandflow-3by</code>.</li>
+          <li>Internal code still uses some <code>Tape</code>-named helpers and hooks. This was left intentionally to keep the rename low-risk while user-facing copy and routing moved to <code>Options</code>.</li>
+          <li>The Options route no longer shows Equities. That is intentional for layout clarity, but it does change the previous multi-pane surface composition.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Follow-up Work</h2>
+        <ul>
+          <li><code>islandflow-3by</code>: add interaction coverage for drawer open/close, <code>Escape</code> dismissal, backdrop dismissal, and route-change dismissal.</li>
+          <li>If we later want a broader naming cleanup, isolate internal <code>Tape*</code> renames into a separate low-risk refactor rather than coupling them to route behavior again.</li>
+        </ul>
+      </section>
+    </div>
+  </main>
+
+  <script type="module">
+    const snippets = [
+      {
+        shellId: "diff-shell-1",
+        containerId: "diff-1",
+        name: "apps/web/app/terminal.tsx",
+        oldContents: `export const getRouteFeatures = (pathname: string): RouteFeatures => {
+  const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
+  const normalizedPath =
+    pathname === "/tape" ||
+    pathname === "/news" ||
+    pathname === "/signals" ||
+    pathname === "/charts" ||
+    pathname === "/replay"
+      ? pathname
+      : "/";
+
+  switch (normalizedPath) {
+    case "/tape":
+      return {
+        options: true,
+        nbbo: true,
+        equities: true,
+        flow: true,
+        showOptionsPane: true,
+        showEquitiesPane: true,
+        showFlowPane: true,
+        needsClassifierDecor: true
+      };
+  }
+};
+
+export const NAV_ITEMS = [
+  { href: "/", label: "Home" },
+  { href: "/tape", label: "Tape" },
+  { href: "/news", label: "News" }
+] as const;`,
+        newContents: `const CANONICAL_OPTIONS_PATH = "/options";
+const TAPE_COMPAT_PATH = "/tape";
+const KNOWN_TERMINAL_PATHS = new Set([
+  CANONICAL_OPTIONS_PATH,
+  TAPE_COMPAT_PATH,
+  "/news",
+  "/signals",
+  "/charts",
+  "/replay"
+]);
+
+export const normalizeTerminalPathname = (pathname: string): string => {
+  if (pathname === TAPE_COMPAT_PATH) {
+    return CANONICAL_OPTIONS_PATH;
+  }
+  return KNOWN_TERMINAL_PATHS.has(pathname) ? pathname : "/";
+};
+
+export const getRouteFeatures = (pathname: string): RouteFeatures => {
+  const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
+  const normalizedPath = normalizeTerminalPathname(pathname);
+
+  switch (normalizedPath) {
+    case "/options":
+      return {
+        options: true,
+        nbbo: true,
+        equities: false,
+        flow: true,
+        showOptionsPane: true,
+        showEquitiesPane: false,
+        showFlowPane: true,
+        needsClassifierDecor: true
+      };
+  }
+};
+
+export const NAV_ITEMS = [
+  { href: "/", label: "Home" },
+  { href: "/options", label: "Options" },
+  { href: "/news", label: "News" }
+] as const;`
+      },
+      {
+        shellId: "diff-shell-2",
+        containerId: "diff-2",
+        name: "apps/web/app/terminal.tsx",
+        oldContents: `export function TerminalAppShell({ children }: { children: ReactNode }) {
+  const state = useTerminalState();
+  const pathname = usePathname();
+  const tickerFieldId = useId();
+  const tickerHintId = useId();
+
+  return (
+    <TerminalContext.Provider value={state}>
+      <div className="terminal-shell">
+        <aside className="terminal-rail">
+          <div className="terminal-brand">...</div>
+          <nav aria-label="Primary" className="terminal-nav">...</nav>
+          <ShellMetricStrip />
+        </aside>
+        <div className="terminal-frame">
+          <header className="terminal-topbar">...</header>
+          <main className="terminal-content" id="terminal-content">{children}</main>
+        </div>
+      </div>
+    </TerminalContext.Provider>
+  );
+}
+
+export function TapeRoute() {
+  return (
+    <PageFrame title="Tape">
+      <div className="page-grid page-grid-tape">
+        <OptionsPane state={state} />
+        <EquitiesPane state={state} />
+        <FlowPane state={state} title="Packets" />
+      </div>
+    </PageFrame>
+  );
+}`,
+        newContents: `export function TerminalAppShell({ children }: { children: ReactNode }) {
+  const state = useTerminalState();
+  const pathname = usePathname();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const tickerFieldId = useId();
+  const tickerHintId = useId();
+  const activeNavHref = getTerminalNavCurrentHref(pathname);
+
+  useEffect(() => {
+    setDrawerOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!drawerOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setDrawerOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [drawerOpen]);
+
+  return (
+    <TerminalContext.Provider value={state}>
+      <div className="terminal-shell">
+        <div className="terminal-frame">
+          <header className="terminal-topbar">
+            <div className="terminal-topbar-leading">
+              <button className="terminal-button terminal-menu-trigger" type="button">Menu</button>
+            </div>
+            <div className="terminal-topbar-actions">...</div>
+          </header>
+          <main className="terminal-content" id="terminal-content">{children}</main>
+        </div>
+
+        {drawerOpen ? (
+          <>
+            <button className="terminal-drawer-backdrop" type="button" />
+            <aside className="terminal-nav-drawer" id="terminal-nav-drawer">
+              <div className="terminal-drawer-head">...</div>
+              <nav aria-label="Primary" className="terminal-nav">...</nav>
+              <ShellMetricStrip />
+            </aside>
+          </>
+        ) : null}
+      </div>
+    </TerminalContext.Provider>
+  );
+}
+
+export function OptionsRoute() {
+  return (
+    <PageFrame title="Options">
+      <div className="page-grid page-grid-options">
+        <OptionsPane state={state} />
+        <FlowPane state={state} title="Packets" />
+      </div>
+    </PageFrame>
+  );
+}`
+      },
+      {
+        shellId: "diff-shell-3",
+        containerId: "diff-3",
+        name: "apps/web/app/globals.css",
+        oldContents: `:root {
+  --rail-width: 236px;
+  --topbar-height: 64px;
+}
+
+.terminal-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: var(--rail-width) minmax(0, 1fr);
+}
+
+.terminal-rail {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  padding: 22px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.page-grid-tape {
+  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
+}`,
+        newContents: `:root {
+  --drawer-width: min(320px, calc(100vw - 28px));
+  --topbar-height: 64px;
+}
+
+.terminal-shell {
+  position: relative;
+  min-height: 100vh;
+}
+
+.terminal-nav-drawer {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 45;
+  width: var(--drawer-width);
+  padding: 20px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
+}
+
+.terminal-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+}
+
+.terminal-topbar {
+  justify-content: space-between;
+  backdrop-filter: blur(12px);
+}
+
+.page-grid-options {
+  grid-template-columns: minmax(0, 1fr);
+}`
+      },
+      {
+        shellId: "diff-shell-4",
+        containerId: "diff-4",
+        name: "route-compatibility",
+        oldContents: `// apps/web/app/tape/page.tsx
+import { TapeRoute } from "../terminal";
+
+export default function Page() {
+  return <TapeRoute />;
+}
+
+// apps/desktop/src/security.test.ts
+it("allows the hosted production origin", () => {
+  expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);
+});`,
+        newContents: `// apps/web/app/options/page.tsx
+import { OptionsRoute } from "../terminal";
+
+export default function Page() {
+  return <OptionsRoute />;
+}
+
+// apps/web/app/tape/page.tsx
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  redirect("/options");
+}
+
+// apps/desktop/src/security.test.ts
+it("allows the hosted production origin on /options", () => {
+  expect(isTrustedAppUrl("https://flow.deltaisland.io/options?symbol=SPY")).toBe(true);
+});
+
+it("keeps /tape trusted as a compatibility path on the same origin", () => {
+  expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);
+});`
+      }
+    ];
+
+    try {
+      const { FileDiff } = await import("https://esm.sh/@pierre/diffs");
+
+      for (const snippet of snippets) {
+        const container = document.getElementById(snippet.containerId);
+        const shell = document.getElementById(snippet.shellId);
+        if (!container || !shell) {
+          continue;
+        }
+
+        const instance = new FileDiff({
+          theme: { dark: "pierre-dark", light: "pierre-light" },
+          diffStyle: "split"
+        });
+
+        instance.render({
+          oldFile: {
+            name: snippet.name,
+            contents: snippet.oldContents
+          },
+          newFile: {
+            name: snippet.name,
+            contents: snippet.newContents
+          },
+          containerWrapper: container
+        });
+
+        shell.classList.add("rendered");
+      }
+    } catch (error) {
+      console.warn("Failed to render diff snippets with Diffs.", error);
+    }
+  </script>
+</body>
+</html>