From 4b93e08b28cd6210d19434ed92bfa70661f61464 Mon Sep 17 00:00:00 2001
From: Nabil-Fareed Alikhan <nabil@happykhan.com>
Date: Thu, 6 Aug 2026 17:38:40 +0100
Subject: [PATCH] feat: improve viewer and ring editing workflow

---
 CHANGELOG.md                           |   4 +-
 components/AnnotationEditor.tsx        |   8 +-
 components/BrowserSessionBar.tsx       |   6 +-
 components/BugReportModal.tsx          |  19 ++-
 components/ProductNav.tsx              |   2 +
 components/ReferenceInput.tsx          |   2 +-
 components/ResultViewer.tsx            |  17 +-
 components/RingConfiguration.tsx       |  62 +++++--
 components/RingsPanel.tsx              | 224 +++++++++++++++++++++++--
 docs/getting-started.md                |   8 +-
 docs/guides/custom-annotations.md      |   2 +-
 docs/guides/whole-genome-comparison.md |   2 +-
 docs/reference/file-formats.md         |   2 +-
 docs/reference/sessions-and-sharing.md |  12 +-
 lib/controller.ts                      |  27 +--
 lib/resultPreviewStore.ts              |  72 --------
 src/App.tsx                            |  13 +-
 src/globals.css                        | 135 ++++++++++++++-
 src/pages/Home.tsx                     |  27 +--
 src/pages/Preview.tsx                  | 107 ++++++------
 tests/e2e/brigx.spec.ts                | 133 ++++++++++++---
 21 files changed, 614 insertions(+), 270 deletions(-)
 delete mode 100644 lib/resultPreviewStore.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb80dce..f65eb9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Added
 - Bakta `.gbff` and GFF3 feature import support.
-- Reference GenBank CDS annotations in both the canvas preview and SVG export.
+- A desktop floating Ring Configuration panel with drag, resize, minimise, dock, close and session-persisted dimensions.
 - A plot centre control and correctly scaled legend dragging.
 - Direct HEX colour entry for comparison rings.
 - Explanatory average-identity tooltip in the statistics panel.
@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Regression coverage for GFF3, file access, editable SVG output, and annotation editing/paste/deletion.
 
 ### Changed
+- Replaced the temporary editor preview action with a top-level read-only **Viewer** at `/viewer` for public URLs and local result/session files, including the result statistics and saved BLAST-output downloads.
 - Settings and output panels now remain usable together on laptop screens.
 - Annotation editing now preserves manual edits and spreadsheet paste, with reliable row deletion and reset.
 - SVG and PNG exports preserve the preview zoom, pan, and dragged legend positions.
@@ -25,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Production DOMPurify is pinned to the patched release.
 
 ### Removed
+- Automatic display of CDS annotations embedded in GenBank and GBFF reference files; annotations are now added explicitly as custom ring overlays.
 - `@biowasm/aioli` dependency — unused since BRIGx ships its own custom WASM build.
 
 ### Moved
diff --git a/components/AnnotationEditor.tsx b/components/AnnotationEditor.tsx
index bc88d87..260a537 100644
--- a/components/AnnotationEditor.tsx
+++ b/components/AnnotationEditor.tsx
@@ -231,7 +231,7 @@ export default function AnnotationEditor({
 
   return (
     <div
-      className="fixed inset-0 flex items-center justify-center z-50 p-4"
+      className="annotation-editor-backdrop fixed inset-0 flex items-center justify-center p-4"
       style={{ background: 'rgba(0, 0, 0, 0.6)' }}
       role="dialog"
       aria-modal="true"
@@ -302,10 +302,10 @@ export default function AnnotationEditor({
           </div>
         )}
 
-        <div className="flex-1 overflow-auto p-4" style={{ minHeight: '400px' }}>
-          <table className="w-full border-collapse text-sm" aria-label="Annotations">
+        <div className="flex-1 overflow-auto px-4 pb-4" style={{ minHeight: '400px' }}>
+          <table className="annotation-table w-full border-separate border-spacing-0 text-sm" aria-label="Annotations">
             <caption className="sr-only">Editable annotations. Use the checkboxes to select rows for deletion.</caption>
-            <thead className="sticky top-0 z-10" style={{ background: 'var(--gx-bg-alt)' }}>
+            <thead>
               <tr>
                 <th className="border p-2 w-12" style={{ borderColor: 'var(--gx-border)' }} scope="col">
                   <input
diff --git a/components/BrowserSessionBar.tsx b/components/BrowserSessionBar.tsx
index 255f89b..468679b 100644
--- a/components/BrowserSessionBar.tsx
+++ b/components/BrowserSessionBar.tsx
@@ -1,23 +1,19 @@
 interface BrowserSessionBarProps {
   onSave: () => void;
   onLoad: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onPreview: () => void;
-  previewDisabled: boolean;
   onReportBug: () => void;
 }
 
-export default function BrowserSessionBar({ onSave, onLoad, onPreview, previewDisabled, onReportBug }: BrowserSessionBarProps) {
+export default function BrowserSessionBar({ onSave, onLoad, onReportBug }: BrowserSessionBarProps) {
   return (
     <nav className="browser-session-bar" aria-label="Browser session controls">
       <div className="product-width browser-session-inner">
-        <span>Browser workspace</span>
         <div>
           <button type="button" onClick={onSave}>Save session</button>
           <label>
             Load session
             <input type="file" accept=".json" onChange={onLoad} className="hidden" />
           </label>
-          <button type="button" onClick={onPreview} disabled={previewDisabled}>Preview result</button>
           <button type="button" onClick={onReportBug}>Report a bug</button>
         </div>
       </div>
diff --git a/components/BugReportModal.tsx b/components/BugReportModal.tsx
index 93912cf..ba1702f 100644
--- a/components/BugReportModal.tsx
+++ b/components/BugReportModal.tsx
@@ -96,8 +96,23 @@ export default function BugReportModal({ debugOutput, onClose }: BugReportModalP
         }),
       });
 
-      const result = await response.json() as { error?: string };
-      if (!response.ok) throw new Error(result.error || 'The report could not be sent.');
+      const responseBody = await response.text();
+      let result: { error?: string } = {};
+      if (responseBody) {
+        try {
+          result = JSON.parse(responseBody) as { error?: string };
+        } catch {
+          // Some hosting and proxy errors return HTML or plain text. The HTTP
+          // status below is more useful to the reporter than a JSON parse error.
+        }
+      }
+
+      if (!response.ok) {
+        const localDevelopmentError = import.meta.env.DEV && response.status === 404
+          ? 'Bug reports cannot be sent from the local Vite server because the Cloudflare reporting endpoint is not running. Submit the report from the deployed BRIGX site.'
+          : '';
+        throw new Error(result.error || localDevelopmentError || `The report could not be sent (HTTP ${response.status}).`);
+      }
       setStatus('sent');
     } catch (error) {
       setStatus('error');
diff --git a/components/ProductNav.tsx b/components/ProductNav.tsx
index 9d9989f..78426f4 100644
--- a/components/ProductNav.tsx
+++ b/components/ProductNav.tsx
@@ -6,6 +6,7 @@ const actions = (
   <>
     <Link to="/" className="gx-nav-link">Home</Link>
     <Link to="/app" className="gx-nav-link">Web app</Link>
+    <Link to="/viewer" className="gx-nav-link">Viewer</Link>
   </>
 );
 
@@ -13,6 +14,7 @@ const mobileActions = (
   <>
     <Link to="/" className="gx-nav-dropdown-link">Home</Link>
     <Link to="/app" className="gx-nav-dropdown-link">Open web app</Link>
+    <Link to="/viewer" className="gx-nav-dropdown-link">Viewer</Link>
   </>
 );
 
diff --git a/components/ReferenceInput.tsx b/components/ReferenceInput.tsx
index 65b9c66..4c1a272 100644
--- a/components/ReferenceInput.tsx
+++ b/components/ReferenceInput.tsx
@@ -51,7 +51,7 @@ export default function ReferenceInput({
           />
         </div>
         <p className="text-xs mt-2" style={{ color: 'var(--gx-text-muted)' }}>
-          GenBank and GBFF CDS annotations are displayed automatically. Multi-FASTA references are joined with spacers.
+          Multi-FASTA references are joined with spacers.
         </p>
       </div>
     </div>
diff --git a/components/ResultViewer.tsx b/components/ResultViewer.tsx
index 2a82c42..b155ce7 100644
--- a/components/ResultViewer.tsx
+++ b/components/ResultViewer.tsx
@@ -1,5 +1,7 @@
 import { Link } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 import CircularPlot from '@/components/CircularPlot';
+import StatisticsPanel from '@/components/StatisticsPanel';
 import {
   resultSnapshotFilename,
   type ResultSnapshot,
@@ -7,7 +9,7 @@ import {
 
 interface ResultViewerProps {
   snapshot: ResultSnapshot;
-  mode: 'preview' | 'publication' | 'file' | 'remote';
+  mode: 'publication' | 'file' | 'remote';
   onOpenFile?: () => void;
   editUrl?: string;
 }
@@ -25,18 +27,14 @@ function downloadSnapshot(snapshot: ResultSnapshot) {
 export default function ResultViewer({ snapshot, mode, onOpenFile, editUrl }: ResultViewerProps) {
   return (
     <main className="publication-page">
+      <Toaster position="bottom-right" />
       <header className="publication-header">
         <div>
-          <span className="product-kicker">
-            {mode === 'publication' ? 'BRIGX publication' : 'BRIGX read-only result'}
-          </span>
+          {mode === 'publication' && <span className="product-kicker">BRIGX publication</span>}
           <h1>{snapshot.title}</h1>
           {snapshot.description && <p>{snapshot.description}</p>}
-          {mode === 'preview' && (
-            <p className="publication-note">Local preview · available in this browser for 24 hours · this URL is not shareable</p>
-          )}
           {mode === 'remote' && (
-            <p className="publication-note">Loaded from a public GitHub session · read-only preview</p>
+            <p className="publication-note">Loaded from a public GitHub session · read-only viewer</p>
           )}
         </div>
         <div className="publication-actions">
@@ -52,6 +50,9 @@ export default function ResultViewer({ snapshot, mode, onOpenFile, editUrl }: Re
       <section className="publication-viewer" aria-label="Read-only interactive genome comparison">
         <CircularPlot data={snapshot.plot} imageProperties={snapshot.imageConfig} />
       </section>
+      <section className="publication-statistics" aria-label="Comparison statistics">
+        <StatisticsPanel plotData={snapshot.plot} />
+      </section>
     </main>
   );
 }
diff --git a/components/RingConfiguration.tsx b/components/RingConfiguration.tsx
index a140047..3098cac 100644
--- a/components/RingConfiguration.tsx
+++ b/components/RingConfiguration.tsx
@@ -1,6 +1,6 @@
 
 
-import { useState } from 'react';
+import { useState, type PointerEventHandler, type ReactNode } from 'react';
 import type { RingConfig, RingData } from '@/lib/types';
 
 /** Small controlled hex input that syncs with external colour state on blur / valid input. */
@@ -46,6 +46,13 @@ interface RingConfigurationProps {
   setRings: (rings: RingConfig[]) => void;
   onEditAnnotations?: (ringId: string) => void;
   ringDataList?: RingData[]; // Computed ring data (for graph stats display)
+  panelControls?: ReactNode;
+  panelMinimised?: boolean;
+  panelFloating?: boolean;
+  onPanelHeaderPointerDown?: PointerEventHandler<HTMLDivElement>;
+  onPanelHeaderPointerMove?: PointerEventHandler<HTMLDivElement>;
+  onPanelHeaderPointerUp?: PointerEventHandler<HTMLDivElement>;
+  onPanelHeaderPointerCancel?: PointerEventHandler<HTMLDivElement>;
 }
 
 const PRESET_COLORS = [
@@ -53,7 +60,19 @@ const PRESET_COLORS = [
   '#1abc9c', '#e67e22', '#34495e', '#16a085', '#c0392b'
 ];
 
-export default function RingConfiguration({ rings, setRings, onEditAnnotations, ringDataList }: RingConfigurationProps) {
+export default function RingConfiguration({
+  rings,
+  setRings,
+  onEditAnnotations,
+  ringDataList,
+  panelControls,
+  panelMinimised = false,
+  panelFloating = false,
+  onPanelHeaderPointerDown,
+  onPanelHeaderPointerMove,
+  onPanelHeaderPointerUp,
+  onPanelHeaderPointerCancel,
+}: RingConfigurationProps) {
   const [draggedRingId, setDraggedRingId] = useState<string | null>(null);
   const [dragOverRingId, setDragOverRingId] = useState<string | null>(null);
   const [collapsedRingIds, setCollapsedRingIds] = useState<Set<string>>(() => new Set());
@@ -125,25 +144,42 @@ export default function RingConfiguration({ rings, setRings, onEditAnnotations,
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap justify-between items-center gap-2">
+      <div
+        className={`ring-configuration-header${panelFloating ? ' is-draggable' : ''}`}
+        onPointerDown={onPanelHeaderPointerDown}
+        onPointerMove={onPanelHeaderPointerMove}
+        onPointerUp={onPanelHeaderPointerUp}
+        onPointerCancel={onPanelHeaderPointerCancel}
+      >
         <h3 className="text-sm font-semibold" style={{ color: 'var(--gx-text)' }}>Ring Configuration</h3>
-        <button
-          type="button"
-          onClick={addNewRing}
-          className="btn-secondary text-xs px-3 py-1"
-        >
-          + Add New Ring
-        </button>
+        <div className="ring-configuration-header-actions">
+          {panelControls}
+          {!panelMinimised && (
+            <button
+              type="button"
+              onClick={addNewRing}
+              className="btn-secondary text-xs px-3 py-1"
+            >
+              + Add New Ring
+            </button>
+          )}
+        </div>
       </div>
 
-      {rings.length === 0 && (
+      {!panelMinimised && (
+        <p className="text-xs" style={{ color: 'var(--gx-text-muted)' }}>
+          Each ring can contain sequence files, graph data or a custom feature overlay. Ring order runs from the inside out.
+        </p>
+      )}
+
+      {!panelMinimised && rings.length === 0 && (
         <div className="text-center py-8 rounded-lg" style={{ color: 'var(--gx-text-muted)', border: '2px dashed var(--gx-border)' }}>
           <p className="mb-2">No rings configured</p>
           <p className="text-sm">Click &quot;Add New Ring&quot; to start</p>
         </div>
       )}
 
-      <div className="space-y-3 min-w-0">
+      {!panelMinimised && <div className="space-y-3 min-w-0">
         {rings.map((ring) => (
           (() => {
             const isCollapsed = collapsedRingIds.has(ring.id);
@@ -411,7 +447,7 @@ export default function RingConfiguration({ rings, setRings, onEditAnnotations,
             );
           })()
         ))}
-      </div>
+      </div>}
     </div>
   );
 }
diff --git a/components/RingsPanel.tsx b/components/RingsPanel.tsx
index 21036b4..1255b94 100644
--- a/components/RingsPanel.tsx
+++ b/components/RingsPanel.tsx
@@ -1,8 +1,63 @@
 
 
+import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';
 import RingConfiguration from '@/components/RingConfiguration';
 import type { RingConfig, RingData } from '@/lib/types';
 
+interface PanelFrame {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const PANEL_STORAGE_KEY = 'brigx-ring-panel-frame';
+const PANEL_MARGIN = 12;
+const PANEL_MIN_WIDTH = 380;
+const PANEL_MIN_HEIGHT = 260;
+
+function defaultPanelFrame(): PanelFrame {
+  const viewportWidth = typeof window === 'undefined' ? 1280 : window.innerWidth;
+  const viewportHeight = typeof window === 'undefined' ? 800 : window.innerHeight;
+  const width = Math.min(720, viewportWidth - PANEL_MARGIN * 2);
+  const height = Math.min(640, Math.max(PANEL_MIN_HEIGHT, Math.round(viewportHeight * 0.72)));
+  return {
+    x: Math.max(PANEL_MARGIN, viewportWidth - width - 32),
+    y: Math.min(96, Math.max(PANEL_MARGIN, viewportHeight - height - PANEL_MARGIN)),
+    width,
+    height,
+  };
+}
+
+function constrainPanelFrame(frame: PanelFrame): PanelFrame {
+  if (typeof window === 'undefined') return frame;
+  const maximumWidth = Math.max(PANEL_MIN_WIDTH, window.innerWidth - PANEL_MARGIN * 2);
+  const maximumHeight = Math.max(PANEL_MIN_HEIGHT, window.innerHeight - PANEL_MARGIN * 2);
+  const width = Math.min(Math.max(frame.width, PANEL_MIN_WIDTH), maximumWidth);
+  const height = Math.min(Math.max(frame.height, PANEL_MIN_HEIGHT), maximumHeight);
+  return {
+    x: Math.min(Math.max(frame.x, PANEL_MARGIN), Math.max(PANEL_MARGIN, window.innerWidth - width - PANEL_MARGIN)),
+    y: Math.min(Math.max(frame.y, PANEL_MARGIN), Math.max(PANEL_MARGIN, window.innerHeight - height - PANEL_MARGIN)),
+    width,
+    height,
+  };
+}
+
+function storedPanelFrame(): PanelFrame {
+  if (typeof window === 'undefined') return defaultPanelFrame();
+  try {
+    const stored = window.sessionStorage.getItem(PANEL_STORAGE_KEY);
+    if (!stored) return defaultPanelFrame();
+    const parsed = JSON.parse(stored) as Partial<PanelFrame>;
+    if ([parsed.x, parsed.y, parsed.width, parsed.height].every(value => typeof value === 'number')) {
+      return constrainPanelFrame(parsed as PanelFrame);
+    }
+  } catch {
+    // Ignore stale or unavailable session storage.
+  }
+  return defaultPanelFrame();
+}
+
 interface RingsPanelProps {
   rings: RingConfig[];
   setRings: (rings: RingConfig[]) => void;
@@ -11,17 +66,166 @@ interface RingsPanelProps {
 }
 
 export default function RingsPanel({ rings, setRings, onEditAnnotations, ringDataList }: RingsPanelProps) {
+  const [panelVisible, setPanelVisible] = useState(true);
+  const [floating, setFloating] = useState(false);
+  const [minimised, setMinimised] = useState(false);
+  const [mobileLayout, setMobileLayout] = useState(false);
+  const [frame, setFrame] = useState<PanelFrame>(storedPanelFrame);
+  const dragState = useRef<{ pointerId: number; offsetX: number; offsetY: number } | null>(null);
+  const resizeState = useRef<{ pointerId: number; startX: number; startY: number; width: number; height: number } | null>(null);
+
+  useEffect(() => {
+    const query = window.matchMedia('(max-width: 767px)');
+    const updateLayout = () => {
+      setMobileLayout(query.matches);
+      if (query.matches) {
+        setFloating(false);
+        setMinimised(false);
+      }
+    };
+    updateLayout();
+    query.addEventListener('change', updateLayout);
+    return () => query.removeEventListener('change', updateLayout);
+  }, []);
+
+  useEffect(() => {
+    const constrainToViewport = () => setFrame(current => constrainPanelFrame(current));
+    window.addEventListener('resize', constrainToViewport);
+    return () => window.removeEventListener('resize', constrainToViewport);
+  }, []);
+
+  useEffect(() => {
+    window.sessionStorage.setItem(PANEL_STORAGE_KEY, JSON.stringify(frame));
+  }, [frame]);
+
+  const startFloating = () => {
+    setFrame(current => constrainPanelFrame(current));
+    setFloating(true);
+    setMinimised(false);
+  };
+
+  const handleHeaderPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!floating || minimised || event.button !== 0) return;
+    if ((event.target as HTMLElement).closest('button, input, label, select, textarea, a')) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragState.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - frame.x,
+      offsetY: event.clientY - frame.y,
+    };
+  };
+
+  const handleHeaderPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragState.current || dragState.current.pointerId !== event.pointerId) return;
+    setFrame(current => constrainPanelFrame({
+      ...current,
+      x: event.clientX - dragState.current!.offsetX,
+      y: event.clientY - dragState.current!.offsetY,
+    }));
+  };
+
+  const finishHeaderDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (dragState.current?.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragState.current = null;
+  };
+
+  const handleResizePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    resizeState.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      width: frame.width,
+      height: frame.height,
+    };
+  };
+
+  const handleResizePointerMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    const resize = resizeState.current;
+    if (!resize || resize.pointerId !== event.pointerId) return;
+    setFrame(current => constrainPanelFrame({
+      ...current,
+      width: resize.width + event.clientX - resize.startX,
+      height: resize.height + event.clientY - resize.startY,
+    }));
+  };
+
+  const finishResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (resizeState.current?.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    resizeState.current = null;
+  };
+
+  if (!panelVisible) {
+    return (
+      <div className="rings-panel-restore">
+        <button type="button" className="btn-secondary text-xs" onClick={() => setPanelVisible(true)}>
+          Show Ring Configuration
+        </button>
+      </div>
+    );
+  }
+
+  const effectiveFloating = floating && !mobileLayout;
+  const panelControls = (
+    <div className="rings-panel-controls" aria-label="Ring panel controls">
+      {effectiveFloating ? (
+        <>
+          <button type="button" onClick={() => { setFloating(false); setMinimised(false); }}>Dock</button>
+          <button type="button" onClick={() => setMinimised(value => !value)}>{minimised ? 'Restore' : 'Minimise'}</button>
+        </>
+      ) : !mobileLayout ? (
+        <button type="button" onClick={startFloating}>Float panel</button>
+      ) : null}
+      <button type="button" onClick={() => setPanelVisible(false)}>Close</button>
+    </div>
+  );
+
   return (
-    <div className="card">
-      <p className="text-xs mb-3" style={{ color: 'var(--gx-text-muted)' }}>
-        Each ring can contain sequence files, graph data or a custom feature overlay. Ring order runs from the inside out.
-      </p>
-      <RingConfiguration
-        rings={rings}
-        setRings={setRings}
-        onEditAnnotations={onEditAnnotations}
-        ringDataList={ringDataList}
-      />
+    <div
+      className={`card rings-panel${effectiveFloating ? ' is-floating' : ' is-docked'}${minimised ? ' is-minimised' : ''}`}
+      style={effectiveFloating ? {
+        left: frame.x,
+        top: frame.y,
+        width: frame.width,
+        height: minimised ? undefined : frame.height,
+      } : undefined}
+      data-testid="rings-panel"
+    >
+      <div className={effectiveFloating && !minimised ? 'rings-panel-scroll-area' : undefined}>
+        <RingConfiguration
+          rings={rings}
+          setRings={setRings}
+          onEditAnnotations={onEditAnnotations}
+          ringDataList={ringDataList}
+          panelControls={panelControls}
+          panelMinimised={minimised}
+          panelFloating={effectiveFloating}
+          onPanelHeaderPointerDown={handleHeaderPointerDown}
+          onPanelHeaderPointerMove={handleHeaderPointerMove}
+          onPanelHeaderPointerUp={finishHeaderDrag}
+          onPanelHeaderPointerCancel={finishHeaderDrag}
+        />
+      </div>
+      {effectiveFloating && !minimised && (
+        <button
+          type="button"
+          className="rings-panel-resize-handle"
+          aria-label="Resize Ring Configuration panel"
+          title="Resize panel"
+          onPointerDown={handleResizePointerDown}
+          onPointerMove={handleResizePointerMove}
+          onPointerUp={finishResize}
+          onPointerCancel={finishResize}
+        />
+      )}
     </div>
   );
 }
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 53d5218..2d4cb53 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -6,7 +6,6 @@ This walkthrough produces a basic whole-genome comparison. No installation or se
 
 Open the BRIGX workspace and choose a reference file in **Reference Genome**. FASTA, GenBank and GBFF files are accepted, including gzipped variants.
 
-- GenBank or GBFF CDS features are displayed automatically.
 - Multi-FASTA records are joined into one circular coordinate system.
 - GC content and GC skew are calculated from the reference.
 
@@ -21,6 +20,8 @@ In **Ring Configuration**, select **Add New Ring**.
 
 Several files in one ring are treated as one combined query. Create separate rings when you want separate legend entries or colours.
 
+On desktop, select **Float panel** beside **Ring Configuration** to keep the controls over the workspace while inspecting the plot. Drag its header to move it, use the bottom-right handle to resize it, or select **Dock** to return it to the page. The panel remains docked on small screens.
+
 ## 3. Run the alignment
 
 Select **Run Alignments**. Progress and diagnostic messages appear in the debug console. The work is performed by browser workers, so a large comparison can take time without blocking the rest of the page.
@@ -38,7 +39,6 @@ Select **Run Alignments**. Progress and diagnostic messages appear in the debug
 - **PNG** creates a raster image.
 - **Data** exports the computed plot data as JSON.
 - **Save session** stores an editable BRIGX session, including the result when available.
-- **Preview result** opens a temporary read-only view in the same browser.
+- **Viewer** in the top navigation opens a read-only result or session from a local file or public GitHub URL.
 
-!!! warning
-    A local preview URL is temporary and is not a shareable publication link. See [Sessions and sharing](reference/sessions-and-sharing.md) for public GitHub-hosted sessions.
+See [Sessions and sharing](reference/sessions-and-sharing.md) for public GitHub-hosted sessions.
diff --git a/docs/guides/custom-annotations.md b/docs/guides/custom-annotations.md
index b024f59..91264d0 100644
--- a/docs/guides/custom-annotations.md
+++ b/docs/guides/custom-annotations.md
@@ -28,7 +28,7 @@ Rows can be pasted from a spreadsheet as tab-separated values.
 
 Use the import controls inside **Custom Ring Overlay** to extract features from GenBank or GFF3. Review coordinates and labels after import, especially if the annotation file was generated against a different reference build.
 
-Embedded CDS annotations from a GenBank/GBFF reference are handled automatically and do not need to be imported as a custom overlay.
+Annotations embedded in a GenBank/GBFF reference are not displayed automatically. Import the features you want through **Custom Ring Overlay**.
 
 !!! warning
     An annotation interval is drawn against reference coordinates. BRIGX does not lift coordinates between assemblies.
diff --git a/docs/guides/whole-genome-comparison.md b/docs/guides/whole-genome-comparison.md
index 55074e1..65cc41a 100644
--- a/docs/guides/whole-genome-comparison.md
+++ b/docs/guides/whole-genome-comparison.md
@@ -6,7 +6,7 @@ This is the standard BRIGX workflow: one reference genome in the centre and one
 
 Use a complete or well-characterised genome when possible. The reference defines every coordinate around the circle; changing it changes the visual and biological frame of the comparison.
 
-FASTA is sufficient for sequence comparison. Use GenBank or GBFF when you also want embedded CDS annotations on the reference track.
+FASTA, GenBank and GBFF references can all be used for sequence comparison. To display selected annotations, import them explicitly through **Custom Ring Overlay**.
 
 ## Configure the rings
 
diff --git a/docs/reference/file-formats.md b/docs/reference/file-formats.md
index 82abbd9..bde6145 100644
--- a/docs/reference/file-formats.md
+++ b/docs/reference/file-formats.md
@@ -3,7 +3,7 @@
 | Format | Extensions | Use |
 |---|---|---|
 | FASTA | `.fasta`, `.fa`, `.fna` | Reference or query sequences |
-| GenBank | `.gbk`, `.gb`, `.gbff`, `.genbank` | Sequences and embedded features |
+| GenBank | `.gbk`, `.gb`, `.gbff`, `.genbank` | Reference or query sequences; embedded features can be imported into a custom ring overlay |
 | Gzip | `.gz` variants | Compressed FASTA or GenBank inputs |
 | BRIG graph | `.graph` | Coordinate-value graph tracks |
 | BedGraph | `.bedgraph` | Coordinate-value graph tracks |
diff --git a/docs/reference/sessions-and-sharing.md b/docs/reference/sessions-and-sharing.md
index 0968a37..de793df 100644
--- a/docs/reference/sessions-and-sharing.md
+++ b/docs/reference/sessions-and-sharing.md
@@ -8,13 +8,9 @@ Select **Save session** to download a JSON session file. Select **Load session**
 
 Keep the original genome files as part of the analysis record even when a result is embedded in the session.
 
-## Local preview
-
-After a result exists, **Preview result** opens a clean, read-only viewer. The generated link is stored in the current browser for 24 hours. It is useful for checking presentation but is not shareable with another person or browser.
-
 ## Public GitHub session
 
-The preview page can load a public BRIGX result or session from a GitHub file URL. A viewer can inspect the result without editing it, then choose **Edit session** when the source contains an editable session.
+The **Viewer** can load a public BRIGX result or session from a GitHub file URL. It shows the interactive plot, reference and query statistics, per-ring coverage and average identity. Where the saved result contains the original tabular BLAST output, each query ring also provides a **Download** action. A viewer can inspect and download these results without editing them, then choose **Edit session** when the source contains an editable session.
 
 Only publish session files whose sequence and metadata are safe to make public.
 
@@ -26,4 +22,8 @@ An editable workspace can load a public session through the `url` query paramete
 /app?url=https://github.com/OWNER/REPOSITORY/blob/BRANCH/session.json
 ```
 
-The read-only preview page accepts the same public GitHub file URL through its form.
+The read-only viewer accepts the same public GitHub file URL through its form or through the `url` query parameter:
+
+```text
+/viewer?url=https://github.com/OWNER/REPOSITORY/blob/BRANCH/session.json
+```
diff --git a/lib/controller.ts b/lib/controller.ts
index f347b82..cd3c946 100644
--- a/lib/controller.ts
+++ b/lib/controller.ts
@@ -9,10 +9,8 @@ import type {
   PipelineParams,
   ProgressUpdate,
   ContigBoundary,
-  GraphPoint,
-  Feature
+  GraphPoint
 } from './types';
-import { extractGenBankFeatures } from './featureParser';
 import { parseSAMCoverage } from '@/lib/samParser';
 import { parseGraphFile } from '@/lib/graphParser';
 import { normaliseFileAccessError, readFileText } from '@/lib/fileAccess';
@@ -364,26 +362,6 @@ export class BRIGController {
       }
       console.log(`[Controller] Reference: ${reference.name}, ${(reference.length / 1_000_000).toFixed(2)} Mbp`);
 
-      // Extract features from GenBank reference if applicable
-      let referenceFeatures: Feature[] = [];
-      const refExt = referenceFile.name.toLowerCase();
-      if (refExt.match(/\.(gbk|gb|genbank|gbff)(\.gz)?$/)) {
-        try {
-          const refText = await readFileText(referenceFile);
-          const annots = extractGenBankFeatures(refText, 'CDS');
-          referenceFeatures = annots.map(a => ({
-            type: 'CDS',
-            start: a.start,
-            end: a.end,
-            strand: (a.shape === 'arrow-forward' ? '+' : '-') as '+' | '-',
-            name: a.label,
-          }));
-          console.log(`[Controller] Extracted ${referenceFeatures.length} CDS features from reference`);
-        } catch (e) {
-          console.warn('[Controller] Failed to extract reference features:', e);
-        }
-      }
-
       console.log('[Controller] Step 2: Calculating GC content and skew');
       this.updateProgress('Calculating GC content and skew', 10);
       // Adapt window size to reference length: aim for ~500-5000 windows
@@ -406,7 +384,6 @@ export class BRIGController {
               length: reference.length,
               gcContent,
               gcSkew,
-              features: referenceFeatures,
               contigs: contigBoundaries
             },
             rings: [], // Empty rings array initially
@@ -651,7 +628,6 @@ export class BRIGController {
                 length: reference.length,
                 gcContent,
                 gcSkew,
-                features: referenceFeatures,
                 contigs: contigBoundaries
               },
               rings: [...ringDataArray], // Send all rings processed so far
@@ -674,7 +650,6 @@ export class BRIGController {
           length: reference.length,
           gcContent,
           gcSkew,
-          features: referenceFeatures,
           contigs: contigBoundaries
         },
         rings: ringDataArray,
diff --git a/lib/resultPreviewStore.ts b/lib/resultPreviewStore.ts
deleted file mode 100644
index e2f3d3d..0000000
--- a/lib/resultPreviewStore.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { parseResultSnapshot, type ResultSnapshot } from './resultSnapshot';
-
-const DATABASE_NAME = 'brigx-result-previews';
-const STORE_NAME = 'snapshots';
-const DATABASE_VERSION = 1;
-const PREVIEW_MAX_AGE_MS = 24 * 60 * 60 * 1000;
-
-interface StoredPreview {
-  id: string;
-  snapshot: ResultSnapshot;
-}
-
-function openDatabase(): Promise<IDBDatabase> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
-    request.onupgradeneeded = () => {
-      if (!request.result.objectStoreNames.contains(STORE_NAME)) {
-        request.result.createObjectStore(STORE_NAME, { keyPath: 'id' });
-      }
-    };
-    request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error ?? new Error('Could not open preview storage'));
-  });
-}
-
-function transactionComplete(transaction: IDBTransaction): Promise<void> {
-  return new Promise((resolve, reject) => {
-    transaction.oncomplete = () => resolve();
-    transaction.onerror = () => reject(transaction.error ?? new Error('Preview storage failed'));
-    transaction.onabort = () => reject(transaction.error ?? new Error('Preview storage was cancelled'));
-  });
-}
-
-export function createPreviewId(): string {
-  return crypto.randomUUID();
-}
-
-export async function saveResultPreview(id: string, snapshot: ResultSnapshot): Promise<void> {
-  const database = await openDatabase();
-  try {
-    const transaction = database.transaction(STORE_NAME, 'readwrite');
-    const store = transaction.objectStore(STORE_NAME);
-    store.put({ id, snapshot } satisfies StoredPreview);
-
-    const allRequest = store.getAll();
-    allRequest.onsuccess = () => {
-      const cutoff = Date.now() - PREVIEW_MAX_AGE_MS;
-      for (const entry of allRequest.result as StoredPreview[]) {
-        if (entry.snapshot.createdAt < cutoff) store.delete(entry.id);
-      }
-    };
-    await transactionComplete(transaction);
-  } finally {
-    database.close();
-  }
-}
-
-export async function loadResultPreview(id: string): Promise<ResultSnapshot | null> {
-  const database = await openDatabase();
-  try {
-    const transaction = database.transaction(STORE_NAME, 'readonly');
-    const request = transaction.objectStore(STORE_NAME).get(id);
-    const stored = await new Promise<StoredPreview | undefined>((resolve, reject) => {
-      request.onsuccess = () => resolve(request.result as StoredPreview | undefined);
-      request.onerror = () => reject(request.error ?? new Error('Could not read preview'));
-    });
-    if (!stored) return null;
-    return parseResultSnapshot(stored.snapshot);
-  } finally {
-    database.close();
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index d1f42e4..5365b03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,23 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import About from './pages/About';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
-import Preview from './pages/Preview';
+import Viewer from './pages/Preview';
 import Publication from './pages/Publication';
 
+function LegacyPreviewRedirect() {
+  const { search } = useLocation();
+  return <Navigate to={`/viewer${search}`} replace />;
+}
+
 export default function App() {
   return (
     <Routes>
       <Route path="/" element={<Landing />} />
       <Route path="/app" element={<Home />} />
       <Route path="/about" element={<About />} />
-      <Route path="/preview" element={<Preview />} />
-      <Route path="/preview/:id" element={<Preview />} />
+      <Route path="/viewer" element={<Viewer />} />
+      <Route path="/preview" element={<LegacyPreviewRedirect />} />
       <Route path="/publication/:slug" element={<Publication />} />
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
diff --git a/src/globals.css b/src/globals.css
index 0ae5215..be10012 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -12,6 +12,8 @@
   --brigx-rule-strong: color-mix(in srgb, var(--gx-text) 34%, transparent);
   --brigx-measure: 80rem;
   --brigx-text-measure: 44rem;
+  --brigx-layer-floating-panel: 9000;
+  --brigx-layer-modal: 10000;
 }
 
 html {
@@ -228,6 +230,11 @@ input:focus-visible {
   height: 100%;
 }
 
+.publication-statistics {
+  max-width: 90rem;
+  margin: 0 auto;
+}
+
 .publication-message {
   display: grid;
   place-content: center;
@@ -789,18 +796,13 @@ input:focus-visible {
 
 .browser-session-inner {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   min-height: 2.5rem;
   font-family: var(--gx-font-mono);
   font-size: 0.72rem;
 }
 
-.browser-session-inner > span {
-  color: var(--gx-text-muted);
-  text-transform: uppercase;
-}
-
 .browser-session-inner > div {
   display: flex;
 }
@@ -835,6 +837,119 @@ input:focus-visible {
   align-items: start;
 }
 
+.rings-panel {
+  position: relative;
+  min-width: 0;
+  container-type: inline-size;
+}
+
+.rings-panel.is-floating {
+  position: fixed;
+  z-index: var(--brigx-layer-floating-panel);
+  max-width: calc(100vw - 24px);
+  max-height: calc(100vh - 24px);
+  overflow: hidden;
+  box-shadow: 0 24px 64px color-mix(in srgb, #000 34%, transparent);
+}
+
+.rings-panel-scroll-area {
+  height: 100%;
+  padding-right: 0.35rem;
+  padding-bottom: 1.75rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.annotation-editor-backdrop {
+  z-index: var(--brigx-layer-modal);
+}
+
+.rings-panel.is-minimised {
+  overflow: hidden;
+}
+
+.ring-configuration-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.ring-configuration-header.is-draggable {
+  cursor: move;
+  touch-action: none;
+  user-select: none;
+}
+
+.ring-configuration-header-actions,
+.rings-panel-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.rings-panel-controls {
+  padding-right: 0.2rem;
+  border-right: 1px solid var(--gx-border);
+}
+
+.rings-panel-controls button {
+  min-height: 1.85rem;
+  padding-inline: 0.55rem;
+  color: var(--gx-text-muted);
+  background: color-mix(in srgb, var(--gx-bg) 75%, transparent);
+  border: 1px solid var(--gx-border);
+  border-radius: var(--gx-radius-sm);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.rings-panel-controls button:hover,
+.rings-panel-controls button:focus-visible {
+  color: var(--gx-accent);
+  border-color: var(--gx-accent);
+}
+
+.rings-panel-resize-handle {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0;
+  background: linear-gradient(135deg, transparent 45%, var(--gx-text-muted) 46% 54%, transparent 55% 64%, var(--gx-text-muted) 65% 73%, transparent 74%);
+  border: 0;
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.rings-panel-restore {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@container (max-width: 560px) {
+  .ring-configuration-header,
+  .ring-editor-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .ring-configuration-header-actions {
+    justify-content: space-between;
+  }
+
+  .ring-editor-card-actions {
+    align-self: flex-end;
+  }
+
+  .ring-editor-fields {
+    grid-template-columns: 1fr;
+  }
+}
+
 .ring-editor-shell {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
@@ -1231,6 +1346,14 @@ input:focus-visible {
   white-space: nowrap;
 }
 
+.annotation-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--gx-bg-alt);
+  box-shadow: inset 0 -1px 0 var(--gx-border);
+}
+
 @media (max-width: 520px) {
   .console-error-heading {
     flex-direction: column;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b5c7726..a958057 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,6 @@
 
 import { lazy, Suspense, useState as useReactState, useCallback, useEffect, useMemo, useRef } from 'react';
-import toast, { Toaster } from 'react-hot-toast';
+import { Toaster } from 'react-hot-toast';
 import { useSearchParams } from 'react-router-dom';
 import { LogConsole } from '@genomicx/ui';
 import BrowserSessionBar from '@/components/BrowserSessionBar';
@@ -18,8 +18,6 @@ import ProductFooter from '@/components/ProductFooter';
 import ProductNav from '@/components/ProductNav';
 import { useBRIGController } from '@/hooks/useBRIGController';
 import { formatVisibleConsoleLine, isUsefulConsoleLine } from '@/hooks/useConsoleCapture';
-import { createPreviewId, saveResultPreview } from '@/lib/resultPreviewStore';
-import { createResultSnapshot } from '@/lib/resultSnapshot';
 import type { PlotViewState } from '@/lib/types';
 
 const AnnotationEditor = lazy(() => import('@/components/AnnotationEditor'));
@@ -75,27 +73,6 @@ export default function Home() {
     () => consoleLogs.filter(isUsefulConsoleLine).map(formatVisibleConsoleLine),
     [consoleLogs],
   );
-  const handlePreview = useCallback(() => {
-    if (!displayedPlotData) return;
-    const id = createPreviewId();
-    const previewUrl = `/preview/${id}`;
-    const previewWindow = window.open('', '_blank');
-    void saveResultPreview(id, createResultSnapshot(displayedPlotData, imageProperties))
-      .then(() => {
-        if (previewWindow) {
-          previewWindow.opener = null;
-          previewWindow.location.href = previewUrl;
-        } else {
-          window.location.href = previewUrl;
-        }
-      })
-      .catch(error => {
-        previewWindow?.close();
-        console.error('Preview error:', error);
-        toast.error('Could not create the read-only preview');
-      });
-  }, [displayedPlotData, imageProperties]);
-
   useEffect(() => {
     if (!sessionUrl || loadedSessionUrlRef.current === sessionUrl) return;
     loadedSessionUrlRef.current = sessionUrl;
@@ -110,8 +87,6 @@ export default function Home() {
         <BrowserSessionBar
           onSave={handleSaveSession}
           onLoad={handleLoadSession}
-          onPreview={handlePreview}
-          previewDisabled={!displayedPlotData}
           onReportBug={() => setBugReportOpen(true)}
         />
 
diff --git a/src/pages/Preview.tsx b/src/pages/Preview.tsx
index b7ea5e3..a6af81c 100644
--- a/src/pages/Preview.tsx
+++ b/src/pages/Preview.tsx
@@ -1,18 +1,18 @@
 import { useEffect, useRef, useState } from 'react';
-import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
+import ProductNav from '@/components/ProductNav';
 import ResultViewer from '@/components/ResultViewer';
 import { readFileText } from '@/lib/fileAccess';
-import { loadResultPreview } from '@/lib/resultPreviewStore';
 import { parseResultSnapshotJson, type ResultSnapshot } from '@/lib/resultSnapshot';
 import { fetchGitHubJson } from '@/lib/remoteJson';
 import { importSession } from '@/lib/session';
 
-interface PreviewPayload {
+interface ViewerPayload {
   snapshot: ResultSnapshot;
   editableSession: boolean;
 }
 
-function parsePreviewPayload(json: string): PreviewPayload {
+function parseViewerPayload(json: string): ViewerPayload {
   try {
     const session = importSession(json);
     if (!session.result) {
@@ -27,8 +27,7 @@ function parsePreviewPayload(json: string): PreviewPayload {
   }
 }
 
-export default function PreviewPage() {
-  const { id } = useParams();
+export default function ViewerPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const sourceUrl = searchParams.get('url');
   const [snapshot, setSnapshot] = useState<ResultSnapshot | null>(null);
@@ -38,27 +37,12 @@ export default function PreviewPage() {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (!id) return;
-    let cancelled = false;
-    loadResultPreview(id)
-      .then(result => {
-        if (cancelled) return;
-        if (result) setSnapshot(result);
-        else setError('This local preview is unavailable or has expired.');
-      })
-      .catch(() => {
-        if (!cancelled) setError('This local preview could not be opened.');
-      });
-    return () => { cancelled = true; };
-  }, [id]);
-
-  useEffect(() => {
-    if (id || !sourceUrl) return;
+    if (!sourceUrl) return;
     let cancelled = false;
     setSnapshot(null);
     setError(null);
     fetchGitHubJson(sourceUrl)
-      .then(parsePreviewPayload)
+      .then(parseViewerPayload)
       .then(payload => {
         if (cancelled) return;
         setSnapshot(payload.snapshot);
@@ -68,13 +52,13 @@ export default function PreviewPage() {
         if (!cancelled) setError(cause instanceof Error ? cause.message : 'Could not load the GitHub file');
       });
     return () => { cancelled = true; };
-  }, [id, sourceUrl]);
+  }, [sourceUrl]);
 
   const handleFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
     try {
-      const payload = parsePreviewPayload(await readFileText(file));
+      const payload = parseViewerPayload(await readFileText(file));
       setSnapshot(payload.snapshot);
       setEditableSession(payload.editableSession);
       setError(null);
@@ -101,10 +85,11 @@ export default function PreviewPage() {
       : undefined;
     return (
       <>
+        <ProductNav />
         {fileInput}
         <ResultViewer
           snapshot={snapshot}
-          mode={sourceUrl ? 'remote' : id ? 'preview' : 'file'}
+          mode={sourceUrl ? 'remote' : 'file'}
           onOpenFile={() => inputRef.current?.click()}
           editUrl={editUrl}
         />
@@ -112,39 +97,47 @@ export default function PreviewPage() {
     );
   }
 
-  if ((id || sourceUrl) && !error) {
-    return <main className="publication-page publication-message">Opening read-only result…</main>;
+  if (sourceUrl && !error) {
+    return (
+      <>
+        <ProductNav />
+        <main className="publication-page publication-message">Opening read-only result…</main>
+      </>
+    );
   }
 
   return (
-    <main className="publication-page publication-message preview-file-picker">
-      <span className="product-kicker">BRIGX result viewer</span>
-      <h1>{error ?? 'Open a read-only BRIGX result'}</h1>
-      <p>Paste a public GitHub session URL, or choose a BRIGX result or session file. Files are loaded directly in your browser.</p>
-      <form
-        className="preview-url-form"
-        onSubmit={event => {
-          event.preventDefault();
-          const value = urlInput.trim();
-          if (value) setSearchParams({ url: value });
-        }}
-      >
-        <label htmlFor="github-session-url">Public GitHub file URL</label>
-        <div>
-          <input
-            id="github-session-url"
-            type="url"
-            value={urlInput}
-            onChange={event => setUrlInput(event.target.value)}
-            placeholder="https://github.com/owner/repo/blob/main/session.json"
-            required
-          />
-          <button type="submit" className="gx-btn gx-btn-primary">Preview URL</button>
-        </div>
-      </form>
-      <button type="button" className="gx-btn gx-btn-primary" onClick={() => inputRef.current?.click()}>Choose result or session file</button>
-      <Link to="/app">Return to BRIGX</Link>
-      {fileInput}
-    </main>
+    <>
+      <ProductNav />
+      <main className="publication-page publication-message preview-file-picker">
+        <span className="product-kicker">BRIGX result viewer</span>
+        <h1>{error ?? 'Open a read-only BRIGX result'}</h1>
+        <p>Paste a public GitHub session URL, or choose a BRIGX result or session file. Files are loaded directly in your browser.</p>
+        <form
+          className="preview-url-form"
+          onSubmit={event => {
+            event.preventDefault();
+            const value = urlInput.trim();
+            if (value) setSearchParams({ url: value });
+          }}
+        >
+          <label htmlFor="github-session-url">Public GitHub file URL</label>
+          <div>
+            <input
+              id="github-session-url"
+              type="url"
+              value={urlInput}
+              onChange={event => setUrlInput(event.target.value)}
+              placeholder="https://github.com/owner/repo/blob/main/session.json"
+              required
+            />
+            <button type="submit" className="gx-btn gx-btn-primary">Open in viewer</button>
+          </div>
+        </form>
+        <button type="button" className="gx-btn gx-btn-primary" onClick={() => inputRef.current?.click()}>Choose result or session file</button>
+        <Link to="/app">Return to BRIGX</Link>
+        {fileInput}
+      </main>
+    </>
   );
 }
diff --git a/tests/e2e/brigx.spec.ts b/tests/e2e/brigx.spec.ts
index 976a2f7..493cec3 100644
--- a/tests/e2e/brigx.spec.ts
+++ b/tests/e2e/brigx.spec.ts
@@ -48,6 +48,7 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     await expect(page.getByTitle('Hex colour code')).toBeVisible()
     await expect(page.getByTitle('Ring colour')).toBeVisible()
     await expect(page.getByTitle('Remove ring')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Float panel' })).toHaveCount(0)
     expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390)
     await expect(page.locator('.gx-console-body')).not.toContainText('[LOG]')
     await expect(page.locator('.gx-console-body')).not.toContainText('[RingConfiguration]')
@@ -94,6 +95,88 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     await expect(card.locator('.ring-editor-fields')).toHaveCount(1)
   })
 
+  test('ring configuration can float, move, resize, minimise, dock and close', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 800 })
+    await page.goto('/app')
+
+    const panel = page.getByTestId('rings-panel')
+    await page.getByRole('button', { name: 'Float panel' }).click()
+    await expect(panel).toHaveClass(/is-floating/)
+
+    const initialBox = await panel.boundingBox()
+    const headingBox = await page.getByRole('heading', { name: 'Ring Configuration' }).boundingBox()
+    expect(initialBox).not.toBeNull()
+    expect(headingBox).not.toBeNull()
+
+    await page.mouse.move(headingBox!.x + headingBox!.width / 2, headingBox!.y + headingBox!.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(headingBox!.x - 150, headingBox!.y + 90, { steps: 8 })
+    await page.mouse.up()
+
+    const movedBox = await panel.boundingBox()
+    expect(movedBox).not.toBeNull()
+    expect(movedBox!.x).toBeLessThan(initialBox!.x - 100)
+    expect(movedBox!.y).toBeGreaterThan(initialBox!.y + 50)
+
+    const resizeHandle = page.getByRole('button', { name: 'Resize Ring Configuration panel' })
+    const resizeBox = await resizeHandle.boundingBox()
+    expect(resizeBox).not.toBeNull()
+    await page.mouse.move(resizeBox!.x + resizeBox!.width / 2, resizeBox!.y + resizeBox!.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(resizeBox!.x + 80, resizeBox!.y + 50, { steps: 6 })
+    await page.mouse.up()
+
+    const resizedBox = await panel.boundingBox()
+    expect(resizedBox).not.toBeNull()
+    expect(resizedBox!.width).toBeGreaterThan(movedBox!.width + 50)
+    expect(resizedBox!.height).toBeGreaterThan(movedBox!.height + 30)
+
+    await page.reload()
+    await page.getByRole('button', { name: 'Float panel' }).click()
+    const restoredFrameBox = await page.getByTestId('rings-panel').boundingBox()
+    expect(restoredFrameBox).not.toBeNull()
+    expect(Math.abs(restoredFrameBox!.x - resizedBox!.x)).toBeLessThan(3)
+    expect(Math.abs(restoredFrameBox!.y - resizedBox!.y)).toBeLessThan(3)
+    expect(Math.abs(restoredFrameBox!.width - resizedBox!.width)).toBeLessThan(3)
+    expect(Math.abs(restoredFrameBox!.height - resizedBox!.height)).toBeLessThan(3)
+
+    await page.getByRole('button', { name: 'Minimise' }).click()
+    await expect(panel).toHaveClass(/is-minimised/)
+    expect((await panel.boundingBox())!.height).toBeLessThan(120)
+    await expect(page.getByRole('button', { name: 'Add New Ring' })).toHaveCount(0)
+
+    await page.getByRole('button', { name: 'Restore' }).click()
+    await page.getByRole('button', { name: 'Dock' }).click()
+    await expect(panel).toHaveClass(/is-docked/)
+
+    await page.getByRole('button', { name: 'Close', exact: true }).click()
+    await expect(panel).toHaveCount(0)
+    await page.getByRole('button', { name: 'Show Ring Configuration' }).click()
+    await expect(page.getByTestId('rings-panel')).toHaveClass(/is-docked/)
+  })
+
+  test('floating ring panel keeps its resize handle pinned while rings scroll', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 800 })
+    await page.goto('/app')
+
+    await page.getByRole('button', { name: 'Float panel' }).click()
+    for (let index = 0; index < 4; index += 1) {
+      await page.getByRole('button', { name: 'Add New Ring' }).click()
+    }
+
+    const panel = page.getByTestId('rings-panel')
+    const scrollArea = panel.locator('.rings-panel-scroll-area')
+    await expect(scrollArea).toBeVisible()
+    await scrollArea.evaluate(element => { element.scrollTop = element.scrollHeight })
+
+    const panelBox = await panel.boundingBox()
+    const handleBox = await page.getByRole('button', { name: 'Resize Ring Configuration panel' }).boundingBox()
+    expect(panelBox).not.toBeNull()
+    expect(handleBox).not.toBeNull()
+    expect(Math.abs(panelBox!.x + panelBox!.width - handleBox!.x - handleBox!.width)).toBeLessThan(8)
+    expect(Math.abs(panelBox!.y + panelBox!.height - handleBox!.y - handleBox!.height)).toBeLessThan(8)
+  })
+
   test('opens a published comparison as an interactive read-only viewer', async ({ page }) => {
     await page.goto('/publication/ecoli-comparison')
 
@@ -103,29 +186,29 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     await expect(page.getByRole('heading', { name: 'Reference Genome' })).toHaveCount(0)
   })
 
-  test('opens a generated plot as a browser-local read-only preview', async ({ page, context }) => {
-    await page.goto('/app')
-    await expect(page.getByRole('button', { name: 'Preview result' })).toBeDisabled()
-    await page.getByLabel('Reference genome file').setInputFiles(REFERENCE)
-    await expect(page.getByRole('heading', { name: 'Statistics' })).toBeVisible({ timeout: 30_000 })
-
-    const previewPagePromise = context.waitForEvent('page')
-    await page.getByRole('button', { name: 'Preview result' }).click()
-    const previewPage = await previewPagePromise
-    await previewPage.waitForURL(/\/preview\/[a-f0-9-]+$/)
-
-    await expect(previewPage.getByText(/Local preview.*not shareable/)).toBeVisible()
-    await expect(previewPage.getByRole('region', { name: 'Read-only interactive genome comparison' })).toBeVisible()
-    await expect(previewPage.getByRole('button', { name: 'Download result' })).toBeVisible()
-    await expect(previewPage.getByRole('heading', { name: 'Reference Genome' })).toHaveCount(0)
-  })
-
   test('opens a portable result file in the read-only viewer', async ({ page }) => {
-    await page.goto('/preview')
+    await page.goto('/viewer')
+    await expect(page.getByRole('link', { name: 'Viewer' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Open a read-only BRIGX result' })).toBeVisible()
     await page.getByLabel('BRIGX result file').setInputFiles(path.join(process.cwd(), 'public/publications/ecoli-comparison.json'))
 
     await expect(page.getByRole('heading', { name: 'BRIGX Example' })).toBeVisible()
     await expect(page.getByRole('region', { name: 'Read-only interactive genome comparison' })).toBeVisible()
+    await expect(page.getByText('BRIGX read-only result', { exact: true })).toHaveCount(0)
+    const statistics = page.getByRole('region', { name: 'Comparison statistics' })
+    await expect(statistics.getByRole('heading', { name: 'Statistics' })).toBeVisible()
+    await expect(statistics.getByText('Coverage: 78.5%')).toBeVisible()
+
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      statistics.getByRole('button', { name: 'Download' }).first().click(),
+    ])
+    expect(download.suggestedFilename()).toBe('Ring 1_alignment.txt')
+    const downloadPath = await download.path()
+    expect(downloadPath).not.toBeNull()
+    const alignmentText = await fs.readFile(downloadPath!, 'utf8')
+    expect(alignmentText).toMatch(/^#query\tsubject\t%identity\talignment_length/)
+    expect(alignmentText.split('\n').length).toBeGreaterThan(100)
   })
 
   test('previews a GitHub session URL as a read-only result', async ({ page }) => {
@@ -133,10 +216,10 @@ test.describe('BRIGX e2e — circular genome plot', () => {
       path: EXAMPLE_SESSION,
       contentType: 'application/json',
     }))
-    await page.goto(`/preview?url=${encodeURIComponent(GITHUB_SESSION_URL)}`)
+    await page.goto(`/viewer?url=${encodeURIComponent(GITHUB_SESSION_URL)}`)
 
     await expect(page.getByRole('heading', { name: 'BRIGX Example' })).toBeVisible()
-    await expect(page.getByText('Loaded from a public GitHub session · read-only preview')).toBeVisible()
+    await expect(page.getByText('Loaded from a public GitHub session · read-only viewer')).toBeVisible()
     await expect(page.getByRole('region', { name: 'Read-only interactive genome comparison' })).toBeVisible()
     await expect(page.getByRole('link', { name: 'Edit session' })).toHaveAttribute(
       'href',
@@ -156,7 +239,8 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     await expect(page.getByPlaceholder('Plot title...')).toHaveValue('BRIGX Example')
     await expect(page.getByText('Ring 1', { exact: true })).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Statistics' })).toBeVisible()
-    await expect(page.getByRole('button', { name: 'Preview result' })).toBeEnabled()
+    await expect(page.getByRole('button', { name: 'Preview result' })).toHaveCount(0)
+    await expect(page.getByRole('link', { name: 'Viewer' })).toBeVisible()
 
     const plotArea = page.getByTestId('plot-area')
     await plotArea.scrollIntoViewIfNeeded()
@@ -246,8 +330,13 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     page.on('pageerror', error => pageErrors.push(error))
 
     await page.getByRole('button', { name: 'Add New Ring' }).click()
+    await page.getByRole('button', { name: 'Float panel' }).click()
     await page.getByRole('button', { name: 'Custom Ring Overlay' }).click()
-    await expect(page.getByRole('heading', { name: 'Annotations for Ring 1' })).toBeVisible()
+    const annotationDialog = page.getByRole('dialog', { name: 'Annotations for Ring 1' })
+    await expect(annotationDialog).toBeVisible()
+    const modalLayer = await annotationDialog.evaluate(element => Number(getComputedStyle(element).zIndex))
+    const floatingPanelLayer = await page.getByTestId('rings-panel').evaluate(element => Number(getComputedStyle(element).zIndex))
+    expect(modalLayer).toBeGreaterThan(floatingPanelLayer)
     await page.getByRole('button', { name: 'Add New', exact: true }).click()
 
     const firstLabelCell = page.getByRole('textbox', { name: 'Label row 1' })