From 632bd75a09ce71e9436d07647ce05f34c23b438a Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 12:47:22 -0400
Subject: [PATCH 01/20] feat(views): add useViewStateByReadKey for the embedded
 viewer

---
 .../unitTests/viewStateByReadKey.test.tsx     | 61 +++++++++++++++++++
 frontend/src/queries/viewQueries.ts           | 39 +++++++++++-
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/__tests__/unitTests/viewStateByReadKey.test.tsx

diff --git a/frontend/src/__tests__/unitTests/viewStateByReadKey.test.tsx b/frontend/src/__tests__/unitTests/viewStateByReadKey.test.tsx
new file mode 100644
index 00000000..c803c1b4
--- /dev/null
+++ b/frontend/src/__tests__/unitTests/viewStateByReadKey.test.tsx
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+const { sendFetchRequest } = vi.hoisted(() => ({ sendFetchRequest: vi.fn() }));
+vi.mock('@/utils', () => ({
+  sendFetchRequest,
+  buildUrl: (base: string, seg: string | null) => `${base}${seg ?? ''}`
+}));
+
+import { useViewStateByReadKey } from '@/queries/viewQueries';
+
+const fakeResponse = (status: number, body: unknown) =>
+  ({
+    ok: status < 300,
+    status,
+    statusText: String(status),
+    json: async () => body
+  }) as unknown as Response;
+
+function wrapper({ children }: { children: ReactNode }) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } }
+  });
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+beforeEach(() => sendFetchRequest.mockReset());
+
+describe('useViewStateByReadKey', () => {
+  it('returns the raw ng_state on success', async () => {
+    sendFetchRequest.mockResolvedValue(
+      fakeResponse(200, { layers: [{ name: 'L0' }] })
+    );
+    const { result } = renderHook(() => useViewStateByReadKey('rk1'), {
+      wrapper
+    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual({ layers: [{ name: 'L0' }] });
+  });
+
+  it('returns null on 404', async () => {
+    sendFetchRequest.mockResolvedValue(
+      fakeResponse(404, { detail: 'View not found' })
+    );
+    const { result } = renderHook(() => useViewStateByReadKey('rk1'), {
+      wrapper
+    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toBeNull();
+  });
+
+  it('is disabled without a read key', () => {
+    const { result } = renderHook(() => useViewStateByReadKey(undefined), {
+      wrapper
+    });
+    expect(result.current.fetchStatus).toBe('idle');
+    expect(sendFetchRequest).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/queries/viewQueries.ts b/frontend/src/queries/viewQueries.ts
index 72ca593f..9e572ad9 100644
--- a/frontend/src/queries/viewQueries.ts
+++ b/frontend/src/queries/viewQueries.ts
@@ -64,7 +64,8 @@ export const viewQueryKeys = {
   all: ['views'] as const,
   list: () => ['views', 'list'] as const,
   forDataLink: (sharingKey: string) =>
-    ['views', 'forDataLink', sharingKey] as const
+    ['views', 'forDataLink', sharingKey] as const,
+  state: (readKey: string) => ['views', 'state', readKey] as const
 };
 
 /**
@@ -129,6 +130,28 @@ const fetchViewsForDataLink = async (
   throwResponseNotOkError(response, data);
 };
 
+/**
+ * Fetches a View's raw Neuroglancer state by its public read key.
+ * Mirrors fetchViews' manual status branch: 404 (unknown/removed key) → null,
+ * not an error, so the embedded viewer can render a "View not found" state.
+ * The endpoint (GET /ngview/{key}) returns the bare ng_state object, unwrapped.
+ */
+const fetchViewState = async (
+  readKey: string,
+  signal?: AbortSignal
+): Promise<Record<string, unknown> | null> => {
+  const url = buildUrl('/ngview/', readKey, null);
+  const response = await sendFetchRequest(url, 'GET', undefined, { signal });
+  if (response.status === 404) {
+    return null;
+  }
+  const data = await getResponseJsonOrError(response);
+  if (!response.ok) {
+    throwResponseNotOkError(response, data);
+  }
+  return data as Record<string, unknown>;
+};
+
 /**
  * Query hook for fetching all Views belonging to the current user
  *
@@ -155,6 +178,20 @@ export function useViewsForDataLinkQuery(
   });
 }
 
+/**
+ * Query hook for a View's Neuroglancer state by read key. Disabled until a
+ * read key is provided. Data is `null` when the key resolves to no View.
+ */
+export function useViewStateByReadKey(
+  readKey?: string
+): UseQueryResult<Record<string, unknown> | null, Error> {
+  return useQuery<Record<string, unknown> | null, Error>({
+    queryKey: viewQueryKeys.state(readKey ?? ''),
+    queryFn: ({ signal }) => fetchViewState(readKey!, signal),
+    enabled: !!readKey
+  });
+}
+
 /**
  * Mutation hook for creating a View
  *

From 98c85ed4965da978e17c36724522edee3a46adb1 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 12:52:40 -0400
Subject: [PATCH 02/20] feat(views): embedded NeuroglancerView page (iframe +
 exports)

---
 .../componentTests/NeuroglancerView.test.tsx  |  61 ++++++++++
 frontend/src/components/NeuroglancerView.tsx  | 109 ++++++++++++++++++
 2 files changed, 170 insertions(+)
 create mode 100644 frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
 create mode 100644 frontend/src/components/NeuroglancerView.tsx

diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
new file mode 100644
index 00000000..88c67496
--- /dev/null
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+const { useViewStateByReadKey } = vi.hoisted(() => ({
+  useViewStateByReadKey: vi.fn()
+}));
+vi.mock('@/queries/viewQueries', () => ({ useViewStateByReadKey }));
+vi.mock('@/hooks/useDefaultNeuroglancerBaseUrl', () => ({
+  useDefaultNeuroglancerBaseUrl: () => 'https://ng.example/'
+}));
+vi.mock('react-router', () => ({ useParams: () => ({ readKey: 'rk1' }) }));
+
+import NeuroglancerView from '@/components/NeuroglancerView';
+
+describe('NeuroglancerView', () => {
+  it('shows a loading state while pending', () => {
+    useViewStateByReadKey.mockReturnValue({
+      data: undefined,
+      isPending: true,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  it('shows "not found" when the key resolves to null', () => {
+    useViewStateByReadKey.mockReturnValue({
+      data: null,
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    expect(screen.getByText(/view not found/i)).toBeInTheDocument();
+  });
+
+  it('iframes Neuroglancer with the inline state and shows the export actions', () => {
+    useViewStateByReadKey.mockReturnValue({
+      data: { title: 'My View', layers: [{ name: 'L0' }] },
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    const iframe = screen.getByTitle(/neuroglancer/i) as HTMLIFrameElement;
+    expect(iframe.src).toContain('https://ng.example/#!');
+    expect(iframe.src).toContain(
+      encodeURIComponent(
+        JSON.stringify({ title: 'My View', layers: [{ name: 'L0' }] })
+      )
+    );
+    expect(screen.getByText('My View')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /copy link/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /download json/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /open external/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
new file mode 100644
index 00000000..1e7ed89b
--- /dev/null
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -0,0 +1,109 @@
+import { useRef } from 'react';
+import { useParams } from 'react-router';
+import { Typography } from '@material-tailwind/react';
+import toast from 'react-hot-toast';
+import {
+  HiOutlineDuplicate,
+  HiOutlineDownload,
+  HiOutlineExternalLink,
+  HiOutlineArrowsExpand
+} from 'react-icons/hi';
+
+import { useViewStateByReadKey } from '@/queries/viewQueries';
+import { useDefaultNeuroglancerBaseUrl } from '@/hooks/useDefaultNeuroglancerBaseUrl';
+import { constructNeuroglancerUrl } from '@/utils/neuroglancerUrl';
+import { downloadTextFile } from '@/utils';
+import { copyToClipboard } from '@/utils/copyText';
+import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgIcon from '@/components/designSystem/atoms/FgIcon';
+
+export default function NeuroglancerView() {
+  const { readKey } = useParams();
+  const stateQuery = useViewStateByReadKey(readKey);
+  const baseUrl = useDefaultNeuroglancerBaseUrl();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (stateQuery.isPending) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Typography className="text-foreground">Loading View…</Typography>
+      </div>
+    );
+  }
+
+  const ngState = stateQuery.data;
+  if (stateQuery.isError || !ngState) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Typography className="text-foreground">View not found</Typography>
+      </div>
+    );
+  }
+
+  const title = (ngState.title as string) || 'Neuroglancer View';
+  const externalUrl = constructNeuroglancerUrl(ngState, baseUrl);
+
+  const handleCopy = async () => {
+    const result = await copyToClipboard(externalUrl);
+    if (result.success) {
+      toast.success('Neuroglancer link copied');
+    } else {
+      toast.error(`Failed to copy: ${result.error}`);
+    }
+  };
+
+  const handleFullscreen = () => {
+    // ponytail: native Fullscreen API on the container — the /view route is
+    // already chrome-less, so this just drops the top bar into the OS
+    // fullscreen; no custom fullscreen state machine.
+    void containerRef.current?.requestFullscreen?.();
+  };
+
+  return (
+    <div
+      className="flex h-full w-full flex-col bg-background"
+      ref={containerRef}
+    >
+      <div className="flex shrink-0 items-center justify-between gap-4 border-b border-surface px-4 py-2">
+        <Typography
+          className="truncate text-foreground font-semibold"
+          type="h6"
+        >
+          {title}
+        </Typography>
+        <div className="flex shrink-0 items-center gap-2">
+          <FgButton onClick={() => void handleCopy()} variant="ghost">
+            <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
+          </FgButton>
+          <FgButton
+            onClick={() =>
+              downloadTextFile(
+                JSON.stringify(ngState, null, 2),
+                `${title}.json`
+              )
+            }
+            variant="ghost"
+          >
+            <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
+          </FgButton>
+          <FgButton
+            onClick={() =>
+              window.open(externalUrl, '_blank', 'noopener,noreferrer')
+            }
+            variant="ghost"
+          >
+            <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
+          </FgButton>
+          <FgButton onClick={handleFullscreen} variant="ghost">
+            <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
+          </FgButton>
+        </div>
+      </div>
+      <iframe
+        className="flex-1 w-full border-0"
+        src={externalUrl}
+        title="Neuroglancer viewer"
+      />
+    </div>
+  );
+}

From c5c6499efb72983e97b359c056502eaa47d44ca9 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 12:57:54 -0400
Subject: [PATCH 03/20] feat(views): chrome-less /view/:readKey route + dev
 proxy for /ngview

---
 frontend/src/App.tsx                                |  9 +++++++++
 .../__tests__/unitTests/isBareLayoutPath.test.ts    | 13 +++++++++++++
 frontend/src/layouts/MainLayout.tsx                 |  7 ++++---
 frontend/src/utils/index.ts                         |  8 ++++++++
 frontend/vite.config.ts                             |  6 ++++++
 5 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f018dd39..ca5f3a55 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,6 +32,7 @@ import Notifications from '@/components/Notifications';
 import SSHKeys from '@/components/SSHKeys';
 import ErrorFallback from '@/components/ErrorFallback';
 import NGViews from '@/components/NGViews';
+import NeuroglancerView from '@/components/NeuroglancerView';
 import { ViewsProvider } from '@/contexts/ViewsContext';
 
 function RequireAuth({ children }: { readonly children: ReactNode }) {
@@ -214,6 +215,14 @@ const AppComponent = () => {
             />
             <Route element={<AppLaunch />} path="relaunch/:owner/:repo" />
           </Route>
+          <Route
+            element={
+              <RequireAuth>
+                <NeuroglancerView />
+              </RequireAuth>
+            }
+            path="view/:readKey"
+          />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts b/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts
new file mode 100644
index 00000000..bf298dcd
--- /dev/null
+++ b/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts
@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { isBareLayoutPath } from '@/utils';
+
+describe('isBareLayoutPath', () => {
+  it('is true for the embedded viewer route', () => {
+    expect(isBareLayoutPath('/view/abc123')).toBe(true);
+  });
+  it('is false for normal app routes', () => {
+    expect(isBareLayoutPath('/ngviews')).toBe(false);
+    expect(isBareLayoutPath('/browse')).toBe(false);
+    expect(isBareLayoutPath('/')).toBe(false);
+  });
+});
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 64d36265..3a5c0919 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-max-depth */
 // Disable max depth because of many context providers
 
-import { Outlet, useParams } from 'react-router';
+import { Outlet, useParams, useLocation } from 'react-router';
 import { Toaster } from 'react-hot-toast';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ShepherdJourneyProvider } from 'react-shepherd';
@@ -25,12 +25,13 @@ import Notifications from '@/components/ui/Notifications/Notifications';
 import ErrorFallback from '@/components/ErrorFallback';
 import { ServerDownOverlay } from '@/components/ui/Dialogs/ServerDownOverlay';
 import { useServerHealthContext } from '@/contexts/ServerHealthContext';
-import { isConnectLoginPopup } from '@/utils';
+import { isConnectLoginPopup, isBareLayoutPath } from '@/utils';
 
 const MainLayoutContent = () => {
   const { showWarningOverlay, checkHealth, nextRetrySeconds } =
     useServerHealthContext();
-  const bare = isConnectLoginPopup();
+  const location = useLocation();
+  const bare = isConnectLoginPopup() || isBareLayoutPath(location.pathname);
 
   return (
     <ShepherdJourneyProvider>
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index a4199c8f..39362c26 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -469,3 +469,11 @@ export function isConnectLoginPopup(): boolean {
     next.startsWith('/connect-complete')
   );
 }
+
+/**
+ * Routes rendered without the app's navbar/nav chrome (full-viewport). The
+ * embedded Neuroglancer viewer (/view/:readKey) fills the window.
+ */
+export function isBareLayoutPath(pathname: string): boolean {
+  return pathname.startsWith('/view/');
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 1bb20c90..a7daee52 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -56,6 +56,12 @@ export default defineConfig({
           ? 'https://localhost:7878'
           : 'http://localhost:7878',
         secure: false
+      },
+      '/ngview': {
+        target: process.env.SSL_KEYFILE
+          ? 'https://localhost:7878'
+          : 'http://localhost:7878',
+        secure: false
       }
     }
   },

From d714a71af2e553e85f1c9894806bb8de950eb852 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 13:02:41 -0400
Subject: [PATCH 04/20] feat(views): Saved Views "Open" navigates to the
 embedded viewer

---
 .../componentTests/ngViewsColumns.test.tsx    | 28 ++++++++++++++++++-
 .../components/ui/Table/ngViewsColumns.tsx    | 16 +++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
index d381ad22..7ff683a9 100644
--- a/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
+++ b/frontend/src/__tests__/componentTests/ngViewsColumns.test.tsx
@@ -7,7 +7,16 @@ import {
   flexRender
 } from '@tanstack/react-table';
 
-import { useNGViewsColumns } from '@/components/ui/Table/ngViewsColumns';
+const navigate = vi.hoisted(() => vi.fn());
+vi.mock('react-router', async importOriginal => {
+  const actual = await importOriginal<typeof import('react-router')>();
+  return { ...actual, useNavigate: () => navigate };
+});
+
+import {
+  useNGViewsColumns,
+  ActionsCell
+} from '@/components/ui/Table/ngViewsColumns';
 import type { View } from '@/queries/viewQueries';
 import { formatDateString } from '@/utils';
 
@@ -96,4 +105,21 @@ describe('useNGViewsColumns', () => {
     await user.click(await screen.findByText('Delete'));
     expect(onDelete).toHaveBeenCalledWith(view);
   });
+
+  it('navigates to the embedded viewer when "Open in Neuroglancer" is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <ActionsCell
+        baseUrl="https://ng.example/"
+        item={view}
+        onDelete={vi.fn()}
+        onRename={vi.fn()}
+      />
+    );
+    const trigger = screen.getByRole('button');
+
+    await user.click(trigger);
+    await user.click(await screen.findByText('Open in Neuroglancer'));
+    expect(navigate).toHaveBeenCalledWith(`/view/${view.read_key}`);
+  });
 });
diff --git a/frontend/src/components/ui/Table/ngViewsColumns.tsx b/frontend/src/components/ui/Table/ngViewsColumns.tsx
index 99dd3b6e..bc909919 100644
--- a/frontend/src/components/ui/Table/ngViewsColumns.tsx
+++ b/frontend/src/components/ui/Table/ngViewsColumns.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useNavigate } from 'react-router';
 import { Typography } from '@material-tailwind/react';
 import type { ColumnDef } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -25,7 +26,7 @@ type ViewRowActionProps = {
   onDelete: (item: View) => void;
 };
 
-function ActionsCell({
+export function ActionsCell({
   item,
   baseUrl,
   onRename,
@@ -36,17 +37,14 @@ function ActionsCell({
   readonly onRename: (item: View) => void;
   readonly onDelete: (item: View) => void;
 }) {
-  // ponytail: "Open" opens the external Neuroglancer URL for now; PR 6 repoints
-  // it to the embedded /ngview/:read_key viewer.
+  const navigate = useNavigate();
+  // ponytail: "Open" now navigates client-side to the embedded /view/:read_key
+  // viewer instead of opening the external Neuroglancer URL.
   const menuItems: MenuItem<ViewRowActionProps>[] = [
     {
       name: 'Open in Neuroglancer',
-      action: ({ item, baseUrl }) => {
-        window.open(
-          constructNeuroglancerUrl(item.ng_state, baseUrl),
-          '_blank',
-          'noopener,noreferrer'
-        );
+      action: ({ item }) => {
+        navigate(`/view/${item.read_key}`);
       }
     },
     {

From 8fd54c584743b3c6788bde2631afb8d2484e8e50 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 13:06:36 -0400
Subject: [PATCH 05/20] feat(views): link "Appears in N Views" names to the
 embedded viewer

---
 .../componentTests/AppearsInViews.test.tsx    | 21 ++++++++++++++-----
 .../ui/PropertiesDrawer/AppearsInViews.tsx    | 13 +++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/AppearsInViews.test.tsx b/frontend/src/__tests__/componentTests/AppearsInViews.test.tsx
index ecc4ab8b..3470f6da 100644
--- a/frontend/src/__tests__/componentTests/AppearsInViews.test.tsx
+++ b/frontend/src/__tests__/componentTests/AppearsInViews.test.tsx
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
 
 const { useViewsForDataLinkQuery } = vi.hoisted(() => ({
   useViewsForDataLinkQuery: vi.fn()
@@ -12,16 +13,26 @@ describe('AppearsInViews', () => {
   it('lists the dependent Views with a count', () => {
     useViewsForDataLinkQuery.mockReturnValue({
       data: [
-        { short_key: 'v1', name: 'Alpha' },
-        { short_key: 'v2', name: 'Beta' }
+        { short_key: 'v1', name: 'Alpha', read_key: 'rk1' },
+        { short_key: 'v2', name: 'Beta', read_key: 'rk2' }
       ],
       isPending: false,
       isError: false
     });
-    render(<AppearsInViews sharingKey="k1" />);
+    render(
+      <MemoryRouter>
+        <AppearsInViews sharingKey="k1" />
+      </MemoryRouter>
+    );
     expect(screen.getByText(/appears in 2 views/i)).toBeInTheDocument();
-    expect(screen.getByText('Alpha')).toBeInTheDocument();
-    expect(screen.getByText('Beta')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Alpha' })).toHaveAttribute(
+      'href',
+      '/view/rk1'
+    );
+    expect(screen.getByRole('link', { name: 'Beta' })).toHaveAttribute(
+      'href',
+      '/view/rk2'
+    );
   });
 
   it('renders nothing when there are no dependent Views', () => {
diff --git a/frontend/src/components/ui/PropertiesDrawer/AppearsInViews.tsx b/frontend/src/components/ui/PropertiesDrawer/AppearsInViews.tsx
index 24e0039b..a7e65a3d 100644
--- a/frontend/src/components/ui/PropertiesDrawer/AppearsInViews.tsx
+++ b/frontend/src/components/ui/PropertiesDrawer/AppearsInViews.tsx
@@ -1,4 +1,5 @@
 import { Typography } from '@material-tailwind/react';
+import { Link } from 'react-router';
 
 import { useViewsForDataLinkQuery } from '@/queries/viewQueries';
 
@@ -24,13 +25,15 @@ export default function AppearsInViews({ sharingKey }: AppearsInViewsProps) {
       <Typography className="text-foreground font-semibold" type="small">
         Appears in {views.length} View{views.length === 1 ? '' : 's'}
       </Typography>
-      {/* ponytail: names only, not links — PR 6 makes View names
-      navigable to the embedded viewer; a link to nowhere now is worse
-      than plain text. */}
       <ul className="list-disc pl-5">
         {views.map(v => (
-          <li className="text-foreground text-sm truncate" key={v.short_key}>
-            {v.name || v.short_key}
+          <li className="text-sm truncate" key={v.short_key}>
+            <Link
+              className="text-primary hover:underline"
+              to={`/view/${v.read_key}`}
+            >
+              {v.name || v.short_key}
+            </Link>
           </li>
         ))}
       </ul>

From 9d21a4d1c7acb52a12ee82397c168b9c1634d7ee Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 13:11:21 -0400
Subject: [PATCH 06/20] refactor(views): extract useCreateViewFlow from
 CreateViewButton

---
 .../componentTests/useCreateViewFlow.test.tsx |  90 +++++++++++
 .../components/ui/Views/CreateViewButton.tsx  | 134 +---------------
 frontend/src/hooks/useCreateViewFlow.tsx      | 151 ++++++++++++++++++
 3 files changed, 246 insertions(+), 129 deletions(-)
 create mode 100644 frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
 create mode 100644 frontend/src/hooks/useCreateViewFlow.tsx

diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
new file mode 100644
index 00000000..97cff69a
--- /dev/null
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const checkout = vi.fn();
+let automatic = true;
+vi.mock('@/hooks/useCartCheckout', () => ({
+  useCartCheckout: () => ({ checkout })
+}));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  usePreferencesContext: () => ({
+    areDataLinksAutomatic: automatic,
+    dataLinkSubpathMode: 'full_path',
+    toggleAutomaticDataLinks: vi.fn()
+  })
+}));
+vi.mock('@/queries/proxiedPathQueries', () => ({
+  useAllProxiedPathsQuery: () => ({ data: [] })
+}));
+vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
+
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
+
+const datasets = [{ fsp_name: 'f', path: '/a', label: 'A' }];
+
+type FlowApi = ReturnType<typeof useCreateViewFlow>;
+
+// Renders the hook for real (rather than via renderHook) so its returned
+// `dialog` node stays reactive across state updates, the same way
+// CreateViewButton consumes it.
+function Harness({ apiRef }: { apiRef: { current: FlowApi | null } }) {
+  const api = useCreateViewFlow();
+  apiRef.current = api;
+  return <>{api.dialog}</>;
+}
+
+beforeEach(() => {
+  checkout
+    .mockReset()
+    .mockResolvedValue({ short_key: 'v1', read_key: 'rk1', name: 'A' });
+  automatic = true;
+});
+
+describe('useCreateViewFlow', () => {
+  it('never checks out immediately when links are automatic; opens a dialog with the prefilled name instead', async () => {
+    const onCreated = vi.fn();
+    const apiRef: { current: FlowApi | null } = { current: null };
+    render(<Harness apiRef={apiRef} />);
+
+    act(() => {
+      apiRef.current!.startCreateView(datasets, 'A', onCreated);
+    });
+
+    expect(checkout).not.toHaveBeenCalled();
+    expect(apiRef.current!.open).toBe(true);
+
+    const input = await screen.findByRole('textbox', { name: /view name/i });
+    expect(input).toHaveValue('A');
+    expect(
+      screen.queryByText(/are you sure you want to create a data link/i)
+    ).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /^create$/i }));
+
+    expect(checkout).toHaveBeenCalledWith(datasets, 'A');
+    expect(onCreated).toHaveBeenCalledWith(
+      expect.objectContaining({ read_key: 'rk1' })
+    );
+  });
+
+  it('opens the dialog with data-link consent copy when links are not automatic, and waits for Continue', async () => {
+    automatic = false;
+    const apiRef: { current: FlowApi | null } = { current: null };
+    render(<Harness apiRef={apiRef} />);
+
+    act(() => {
+      apiRef.current!.startCreateView(datasets, 'A');
+    });
+
+    expect(checkout).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText(/are you sure you want to create a data link/i)
+    ).toBeInTheDocument();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /continue/i }));
+    expect(checkout).toHaveBeenCalledWith(datasets, 'A');
+  });
+});
diff --git a/frontend/src/components/ui/Views/CreateViewButton.tsx b/frontend/src/components/ui/Views/CreateViewButton.tsx
index 1cb8fee8..af0cec27 100644
--- a/frontend/src/components/ui/Views/CreateViewButton.tsx
+++ b/frontend/src/components/ui/Views/CreateViewButton.tsx
@@ -1,16 +1,5 @@
-import { useState } from 'react';
-import { Typography } from '@material-tailwind/react';
-import toast from 'react-hot-toast';
-import { useNavigate } from 'react-router';
-
-import { useCartCheckout } from '@/hooks/useCartCheckout';
-import { usePreferencesContext } from '@/contexts/PreferencesContext';
-import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
-import { datasetKey } from '@/utils/pathHandling';
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 import FgButton from '@/components/designSystem/atoms/FgButton';
-import FgInput from '@/components/designSystem/atoms/formElements/FgInput';
-import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
-import FgDialog from '@/components/ui/Dialogs/FgDialog';
 import type { CartItem } from '@/queries/preferencesQueries';
 import type { View } from '@/queries/viewQueries';
 
@@ -29,134 +18,21 @@ export default function CreateViewButton({
   disabled = false,
   onCreated
 }: CreateViewButtonProps) {
-  const { checkout } = useCartCheckout();
-  const {
-    areDataLinksAutomatic,
-    dataLinkSubpathMode,
-    toggleAutomaticDataLinks
-  } = usePreferencesContext();
-  const allProxiedPathsQuery = useAllProxiedPathsQuery();
-  const navigate = useNavigate();
-
-  const [showDialog, setShowDialog] = useState(false);
-  const [name, setName] = useState(defaultName);
-  const [pending, setPending] = useState(false);
-  const [newLinkCount, setNewLinkCount] = useState(0);
-  const [needsLinkConsent, setNeedsLinkConsent] = useState(false);
-
-  const runCheckout = async () => {
-    setPending(true);
-    try {
-      const view = await checkout(datasets, name);
-      toast.success(`Created View "${name}"`);
-      if (onCreated) {
-        onCreated(view);
-      } else {
-        navigate('/ngviews');
-      }
-      setShowDialog(false);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Checkout failed');
-    } finally {
-      setPending(false);
-    }
-  };
-
-  const handleClick = () => {
-    if (datasets.length === 0) {
-      toast.error('Nothing to add');
-      return;
-    }
-
-    const existingKeys = new Set(
-      (allProxiedPathsQuery.data ?? []).map(p => datasetKey(p.fsp_name, p.path))
-    );
-    const computedNewLinkCount = new Set(
-      datasets
-        .map(ds => datasetKey(ds.fsp_name, ds.path))
-        .filter(key => !existingKeys.has(key))
-    ).size;
-
-    const autoLinksCoverThis =
-      areDataLinksAutomatic && dataLinkSubpathMode !== 'custom';
-
-    setName(defaultName);
-    setNewLinkCount(computedNewLinkCount);
-    setNeedsLinkConsent(!autoLinksCoverThis && computedNewLinkCount > 0);
-    setShowDialog(true);
-  };
+  const { startCreateView, dialog, open, pending } = useCreateViewFlow();
 
   return (
     <>
-      {!showDialog ? (
+      {!open ? (
         <FgButton
           disabled={disabled || pending}
           loading={pending}
           loadingText="Creating..."
-          onClick={handleClick}
+          onClick={() => startCreateView(datasets, defaultName, onCreated)}
         >
           {label}
         </FgButton>
       ) : null}
-
-      {showDialog ? (
-        <FgDialog onClose={() => setShowDialog(false)} open={showDialog}>
-          <div className="flex flex-col gap-2 my-4">
-            <Typography className="text-foreground font-semibold">
-              Create View
-            </Typography>
-            <FgInput
-              aria-label="View name"
-              onChange={e => setName(e.target.value)}
-              value={name}
-            />
-
-            {needsLinkConsent ? (
-              <>
-                <Typography className="text-foreground font-semibold">
-                  Are you sure you want to create a data link?
-                </Typography>
-                <Typography className="text-foreground">
-                  This will create {newLinkCount} data link
-                  {newLinkCount === 1 ? '' : 's'} and 1 View. If you share the
-                  data link(s) with internal collaborators, they will be able to
-                  view these data.
-                </Typography>
-                <div className="flex flex-col gap-2">
-                  <Typography className="font-semibold text-foreground">
-                    Don't ask me this again:
-                  </Typography>
-                  <FgSwitch
-                    checked={areDataLinksAutomatic}
-                    label="Automatically create data links"
-                    onChange={() => {
-                      void toggleAutomaticDataLinks();
-                    }}
-                  />
-                </div>
-              </>
-            ) : null}
-
-            <div className="flex gap-4">
-              <FgButton
-                disabled={pending || name.trim() === ''}
-                loading={pending}
-                loadingText="Creating..."
-                onClick={runCheckout}
-              >
-                {needsLinkConsent ? 'Continue' : 'Create'}
-              </FgButton>
-              <FgButton
-                disabled={pending}
-                onClick={() => setShowDialog(false)}
-                variant="ghost"
-              >
-                Cancel
-              </FgButton>
-            </div>
-          </div>
-        </FgDialog>
-      ) : null}
+      {dialog}
     </>
   );
 }
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
new file mode 100644
index 00000000..08ed577c
--- /dev/null
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { Typography } from '@material-tailwind/react';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router';
+import type { ReactNode } from 'react';
+
+import { useCartCheckout } from '@/hooks/useCartCheckout';
+import { usePreferencesContext } from '@/contexts/PreferencesContext';
+import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
+import { datasetKey } from '@/utils/pathHandling';
+import FgButton from '@/components/designSystem/atoms/FgButton';
+import FgInput from '@/components/designSystem/atoms/formElements/FgInput';
+import FgSwitch from '@/components/designSystem/atoms/formElements/FgSwitch';
+import FgDialog from '@/components/ui/Dialogs/FgDialog';
+import type { CartItem } from '@/queries/preferencesQueries';
+import type { View } from '@/queries/viewQueries';
+
+type PendingRequest = {
+  datasets: CartItem[];
+  onCreated?: (view: View) => void;
+  newLinkCount: number;
+  needsLinkConsent: boolean;
+};
+
+export function useCreateViewFlow() {
+  const { checkout } = useCartCheckout();
+  const {
+    areDataLinksAutomatic,
+    dataLinkSubpathMode,
+    toggleAutomaticDataLinks
+  } = usePreferencesContext();
+  const allProxiedPathsQuery = useAllProxiedPathsQuery();
+  const navigate = useNavigate();
+
+  const [pending, setPending] = useState(false);
+  const [name, setName] = useState('');
+  const [request, setRequest] = useState<PendingRequest | null>(null);
+
+  const runCheckout = async () => {
+    if (!request) {
+      return;
+    }
+    setPending(true);
+    try {
+      const view = await checkout(request.datasets, name);
+      toast.success(`Created View "${name}"`);
+      if (request.onCreated) {
+        request.onCreated(view);
+      } else {
+        navigate('/ngviews');
+      }
+      setRequest(null);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Checkout failed');
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const startCreateView = (
+    datasets: CartItem[],
+    defaultName: string,
+    onCreated?: (view: View) => void
+  ) => {
+    if (datasets.length === 0) {
+      toast.error('Nothing to add');
+      return;
+    }
+    const existingKeys = new Set(
+      (allProxiedPathsQuery.data ?? []).map(p => datasetKey(p.fsp_name, p.path))
+    );
+    const newLinkCount = new Set(
+      datasets
+        .map(ds => datasetKey(ds.fsp_name, ds.path))
+        .filter(key => !existingKeys.has(key))
+    ).size;
+
+    const autoLinksCoverThis =
+      areDataLinksAutomatic && dataLinkSubpathMode !== 'custom';
+
+    setName(defaultName);
+    setRequest({
+      datasets,
+      onCreated,
+      newLinkCount,
+      needsLinkConsent: !autoLinksCoverThis && newLinkCount > 0
+    });
+  };
+
+  const open = request !== null;
+  const dialog: ReactNode = request ? (
+    <FgDialog onClose={() => setRequest(null)} open={open}>
+      <div className="flex flex-col gap-2 my-4">
+        <Typography className="text-foreground font-semibold">
+          Create View
+        </Typography>
+        <FgInput
+          aria-label="View name"
+          onChange={e => setName(e.target.value)}
+          value={name}
+        />
+
+        {request.needsLinkConsent ? (
+          <>
+            <Typography className="text-foreground font-semibold">
+              Are you sure you want to create a data link?
+            </Typography>
+            <Typography className="text-foreground">
+              This will create {request.newLinkCount} data link
+              {request.newLinkCount === 1 ? '' : 's'} and 1 View. If you share
+              the data link(s) with internal collaborators, they will be able
+              to view these data.
+            </Typography>
+            <div className="flex flex-col gap-2">
+              <Typography className="font-semibold text-foreground">
+                Don't ask me this again:
+              </Typography>
+              <FgSwitch
+                checked={areDataLinksAutomatic}
+                label="Automatically create data links"
+                onChange={() => {
+                  void toggleAutomaticDataLinks();
+                }}
+              />
+            </div>
+          </>
+        ) : null}
+
+        <div className="flex gap-4">
+          <FgButton
+            disabled={pending || name.trim() === ''}
+            loading={pending}
+            loadingText="Creating..."
+            onClick={() => void runCheckout()}
+          >
+            {request.needsLinkConsent ? 'Continue' : 'Create'}
+          </FgButton>
+          <FgButton
+            disabled={pending}
+            onClick={() => setRequest(null)}
+            variant="ghost"
+          >
+            Cancel
+          </FgButton>
+        </div>
+      </div>
+    </FgDialog>
+  ) : null;
+
+  return { startCreateView, dialog, open, pending };
+}

From fc669eb05b4a5b8f92b688f6b78d533f3993a16c Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 13:20:50 -0400
Subject: [PATCH 07/20] feat(browse): "View in Neuroglancer" row action opens
 an embedded View

Also stub useCreateViewFlow in FileBrowserCartItem/FileTableSelectColumn
tests: FileBrowser now calls the hook unconditionally, and those tests'
render trees don't set up a ViewsProvider (only the cart/select-column
behavior is under test there).
---
 .../FileBrowserCartItem.test.tsx              |  18 +++
 .../FileBrowserViewInNg.test.tsx              | 152 ++++++++++++++++++
 .../FileTableSelectColumn.test.tsx            |  18 +++
 .../components/ui/BrowsePage/FileBrowser.tsx  |  28 ++++
 4 files changed, 216 insertions(+)
 create mode 100644 frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx

diff --git a/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx b/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
index a24abc64..352c359d 100644
--- a/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
+++ b/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
@@ -26,6 +26,24 @@ vi.mock('@/contexts/CartContext', async importOriginal => {
   };
 });
 
+// FileBrowser also renders a "View in Neuroglancer" item that depends on
+// useCreateViewFlow, which in turn needs a ViewsProvider this test's render
+// tree doesn't set up. This suite only cares about the cart item, so stub
+// the hook rather than wiring up ViewsProvider.
+vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
+  const actual =
+    await importOriginal<typeof import('@/hooks/useCreateViewFlow')>();
+  return {
+    ...actual,
+    useCreateViewFlow: () => ({
+      startCreateView: vi.fn(),
+      consentDialog: null,
+      consentOpen: false,
+      pending: false
+    })
+  };
+});
+
 // FileTable virtualizes rows in a way that doesn't render meaningfully in
 // jsdom. Stub it with plain buttons that invoke the same
 // handleContextMenuClick callback FileBrowser wires up, so the test can
diff --git a/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx b/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx
new file mode 100644
index 00000000..74706485
--- /dev/null
+++ b/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx
@@ -0,0 +1,152 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { render } from '../test-utils';
+import { server } from '@/__tests__/mocks/node';
+import FileBrowser from '@/components/ui/BrowsePage/FileBrowser';
+import type { FileOrFolder } from '@/shared.types';
+
+const startCreateView = vi.fn();
+
+vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
+  const actual =
+    await importOriginal<typeof import('@/hooks/useCreateViewFlow')>();
+  return {
+    ...actual,
+    useCreateViewFlow: () => ({
+      startCreateView,
+      consentDialog: null,
+      consentOpen: false,
+      pending: false
+    })
+  };
+});
+
+// FileTable virtualizes rows in a way that doesn't render meaningfully in
+// jsdom. Stub it with plain buttons that invoke the same
+// handleContextMenuClick callback FileBrowser wires up, so the test can
+// drive FileBrowser's real context-menu-item logic (name/shouldShow/action)
+// without depending on virtualized-row DOM mechanics.
+vi.mock('@/components/ui/BrowsePage/FileTable', () => ({
+  default: ({
+    data,
+    handleContextMenuClick
+  }: {
+    data: FileOrFolder[];
+    handleContextMenuClick: (e: unknown, file: FileOrFolder) => void;
+  }) => (
+    <div>
+      {data.map(file => (
+        <button key={file.path} onClick={e => handleContextMenuClick(e, file)}>
+          menu-{file.name}
+        </button>
+      ))}
+    </div>
+  )
+}));
+
+const noop = vi.fn();
+
+function renderFileBrowser() {
+  return render(
+    <FileBrowser
+      mainPanelWidth={800}
+      setShowConvertFileDialog={noop}
+      setShowDeleteDialog={noop}
+      setShowPermissionsDialog={noop}
+      setShowRenameDialog={noop}
+      showPropertiesDrawer={false}
+      togglePropertiesDrawer={noop}
+    />,
+    { initialEntries: ['/browse/test_fsp/my_folder'] }
+  );
+}
+
+describe('FileBrowser row context menu - View in Neuroglancer', () => {
+  beforeEach(() => {
+    startCreateView.mockClear();
+
+    server.use(
+      http.get('/api/files/:fspName', ({ params, request }) => {
+        const { fspName } = params;
+        if (fspName !== 'test_fsp') {
+          return HttpResponse.json({ error: 'Not found' }, { status: 404 });
+        }
+        const url = new URL(request.url);
+        const subpath = url.searchParams.get('subpath') ?? 'my_folder';
+        return HttpResponse.json({
+          info: {
+            name: subpath.split('/').pop(),
+            path: subpath,
+            size: 0,
+            is_dir: true,
+            permissions: 'drwxr-xr-x',
+            owner: 'testuser',
+            group: 'testgroup',
+            last_modified: 1647855213
+          },
+          files: [
+            { name: 'subfolder', is_dir: true, path: `${subpath}/subfolder` },
+            { name: 'file1.txt', is_dir: false, path: `${subpath}/file1.txt` },
+            {
+              name: 'linked_folder',
+              is_dir: true,
+              is_symlink: true,
+              symlink_target_fsp: null,
+              path: `${subpath}/linked_folder`
+            }
+          ]
+        });
+      })
+    );
+  });
+
+  it('calls startCreateView with a single-dataset CartItem for the clicked folder', async () => {
+    const user = userEvent.setup();
+    renderFileBrowser();
+
+    const menuButton = await screen.findByText('menu-subfolder');
+    await user.click(menuButton);
+
+    const viewItem = await screen.findByText('View in Neuroglancer');
+    await user.click(viewItem);
+
+    expect(startCreateView).toHaveBeenCalledTimes(1);
+    const [datasets, name, onCreated] = startCreateView.mock.calls[0];
+    expect(datasets).toEqual([
+      { fsp_name: 'test_fsp', path: 'my_folder/subfolder', label: 'subfolder' }
+    ]);
+    expect(name).toBe('subfolder');
+    expect(typeof onCreated).toBe('function');
+  });
+
+  it('does not show the item for a plain file', async () => {
+    const user = userEvent.setup();
+    renderFileBrowser();
+
+    const menuButton = await screen.findByText('menu-file1.txt');
+    await user.click(menuButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Download')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('View in Neuroglancer')).not.toBeInTheDocument();
+    expect(startCreateView).not.toHaveBeenCalled();
+  });
+
+  it('does not show the item for a symlinked folder', async () => {
+    const user = userEvent.setup();
+    renderFileBrowser();
+
+    const menuButton = await screen.findByText('menu-linked_folder');
+    await user.click(menuButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Rename')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('View in Neuroglancer')).not.toBeInTheDocument();
+    expect(startCreateView).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx b/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
index 27f5607b..ef6e6722 100644
--- a/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
+++ b/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
@@ -32,6 +32,24 @@ vi.mock('react-router', async () => {
   };
 });
 
+// FileBrowser renders a "View in Neuroglancer" item that depends on
+// useCreateViewFlow, which needs a ViewsProvider this test's render tree
+// doesn't set up. This suite only cares about the select column, so stub
+// the hook rather than wiring up ViewsProvider.
+vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
+  const actual =
+    await importOriginal<typeof import('@/hooks/useCreateViewFlow')>();
+  return {
+    ...actual,
+    useCreateViewFlow: () => ({
+      startCreateView: vi.fn(),
+      consentDialog: null,
+      consentOpen: false,
+      pending: false
+    })
+  };
+});
+
 describe('FileTable select column', () => {
   it('renders a "Select all" header checkbox that toggles on click', async () => {
     server.use(
diff --git a/frontend/src/components/ui/BrowsePage/FileBrowser.tsx b/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
index 86a771ea..54db14ae 100644
--- a/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
@@ -2,6 +2,7 @@ import type { MouseEvent } from 'react';
 import { Typography } from '@material-tailwind/react';
 import { useHotkey } from '@tanstack/react-hotkeys';
 import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router';
 
 import Crumbs from './Crumbs';
 import MetadataHint from './MetadataHint';
@@ -20,6 +21,7 @@ import useN5Metadata from '@/hooks/useN5Metadata';
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useCartContext } from '@/contexts/CartContext';
+import { useCreateViewFlow } from '@/hooks/useCreateViewFlow';
 import useHideDotFiles from '@/hooks/useHideDotFiles';
 import { useHandleDownload } from '@/hooks/useHandleDownload';
 import { useHandleView } from '@/hooks/useHandleView';
@@ -64,6 +66,8 @@ export default function FileBrowser({
   const { folderPreferenceMap, handleContextMenuFavorite } =
     usePreferencesContext();
   const { addToCart } = useCartContext();
+  const navigate = useNavigate();
+  const { startCreateView, consentDialog } = useCreateViewFlow();
   const { displayFiles } = useHideDotFiles();
   const { handleDownload } = useHandleDownload();
   const { handleView } = useHandleView();
@@ -219,6 +223,29 @@ export default function FileBrowser({
           fileBrowserState.selectedFiles[0]?.is_dir &&
           !fileBrowserState.selectedFiles[0]?.is_symlink
       },
+      {
+        name: 'View in Neuroglancer',
+        action: () => {
+          const file = fileBrowserState.selectedFiles[0];
+          if (!file) {
+            return;
+          }
+          startCreateView(
+            [
+              {
+                fsp_name: fileQuery.data?.currentFileSharePath?.name ?? '',
+                path: file.path,
+                label: file.name
+              }
+            ],
+            file.name,
+            view => navigate(`/view/${view.read_key}`)
+          );
+        },
+        shouldShow:
+          fileBrowserState.selectedFiles[0]?.is_dir &&
+          !fileBrowserState.selectedFiles[0]?.is_symlink
+      },
       {
         name: 'Rename',
         action: () => {
@@ -368,6 +395,7 @@ export default function FileBrowser({
         />
       ) : null}
       <SelectionBar />
+      {consentDialog}
     </>
   );
 }

From a2107076b74c57efa35f53fc380d314a021d81d9 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 13:27:10 -0400
Subject: [PATCH 08/20] fix(views): mount ViewsProvider app-wide so /browse can
 create Views

FileBrowser's "View in Neuroglancer" row action (and SelectionBar's
"New View from selection", latent since 5a) call useCreateViewFlow ->
useCartCheckout -> useViewsContext, but ViewsProvider only wrapped the
/ngviews route, so /browse threw ErrorFallback on every load. Move
ViewsProvider into MainLayout's app-wide provider stack, alongside
CartProvider, and drop the now-redundant route-scoped wrapper.
---
 frontend/src/App.tsx                |  5 +----
 frontend/src/layouts/MainLayout.tsx | 25 ++++++++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ca5f3a55..3598a692 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -33,7 +33,6 @@ import SSHKeys from '@/components/SSHKeys';
 import ErrorFallback from '@/components/ErrorFallback';
 import NGViews from '@/components/NGViews';
 import NeuroglancerView from '@/components/NeuroglancerView';
-import { ViewsProvider } from '@/contexts/ViewsContext';
 
 function RequireAuth({ children }: { readonly children: ReactNode }) {
   const { loading, authStatus } = useAuthContext();
@@ -123,9 +122,7 @@ const AppComponent = () => {
             <Route
               element={
                 <RequireAuth>
-                  <ViewsProvider>
-                    <NGViews />
-                  </ViewsProvider>
+                  <NGViews />
                 </RequireAuth>
               }
               path="ngviews"
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 3a5c0919..f2928b20 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -12,6 +12,7 @@ import { ZonesAndFspMapContextProvider } from '@/contexts/ZonesAndFspMapContext'
 import { FileBrowserContextProvider } from '@/contexts/FileBrowserContext';
 import { PreferencesProvider } from '@/contexts/PreferencesContext';
 import { CartProvider } from '@/contexts/CartContext';
+import { ViewsProvider } from '@/contexts/ViewsContext';
 import { OpenFavoritesProvider } from '@/contexts/OpenFavoritesContext';
 import { TicketProvider } from '@/contexts/TicketsContext';
 import { ProxiedPathProvider } from '@/contexts/ProxiedPathContext';
@@ -77,17 +78,19 @@ export const MainLayout = () => {
             <FileBrowserContextProvider filePath={filePath} fspName={fspName}>
               <PreferencesProvider>
                 <CartProvider>
-                  <ExternalBucketProvider>
-                    <ProxiedPathProvider>
-                      <ProfileContextProvider>
-                        <NotificationProvider>
-                          <TicketProvider>
-                            <MainLayoutContent />
-                          </TicketProvider>
-                        </NotificationProvider>
-                      </ProfileContextProvider>
-                    </ProxiedPathProvider>
-                  </ExternalBucketProvider>
+                  <ViewsProvider>
+                    <ExternalBucketProvider>
+                      <ProxiedPathProvider>
+                        <ProfileContextProvider>
+                          <NotificationProvider>
+                            <TicketProvider>
+                              <MainLayoutContent />
+                            </TicketProvider>
+                          </NotificationProvider>
+                        </ProfileContextProvider>
+                      </ProxiedPathProvider>
+                    </ExternalBucketProvider>
+                  </ViewsProvider>
                 </CartProvider>
               </PreferencesProvider>
             </FileBrowserContextProvider>

From 7a4f15d5a04f22a310190d2c43d05cf287180c33 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Mon, 10 Aug 2026 16:30:28 -0400
Subject: [PATCH 09/20] feat(views): embedded viewer forces the Internal
 Neuroglancer (ignores external pref)

---
 .../componentTests/NeuroglancerView.test.tsx  |  2 +-
 frontend/src/components/NeuroglancerView.tsx  |  4 ++--
 .../hooks/useDefaultNeuroglancerBaseUrl.ts    | 22 +++++++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index 88c67496..3563deb0 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -6,7 +6,7 @@ const { useViewStateByReadKey } = vi.hoisted(() => ({
 }));
 vi.mock('@/queries/viewQueries', () => ({ useViewStateByReadKey }));
 vi.mock('@/hooks/useDefaultNeuroglancerBaseUrl', () => ({
-  useDefaultNeuroglancerBaseUrl: () => 'https://ng.example/'
+  useInternalNeuroglancerBaseUrl: () => 'https://ng.example/'
 }));
 vi.mock('react-router', () => ({ useParams: () => ({ readKey: 'rk1' }) }));
 
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index 1e7ed89b..47c404f0 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-icons/hi';
 
 import { useViewStateByReadKey } from '@/queries/viewQueries';
-import { useDefaultNeuroglancerBaseUrl } from '@/hooks/useDefaultNeuroglancerBaseUrl';
+import { useInternalNeuroglancerBaseUrl } from '@/hooks/useDefaultNeuroglancerBaseUrl';
 import { constructNeuroglancerUrl } from '@/utils/neuroglancerUrl';
 import { downloadTextFile } from '@/utils';
 import { copyToClipboard } from '@/utils/copyText';
@@ -20,7 +20,7 @@ import FgIcon from '@/components/designSystem/atoms/FgIcon';
 export default function NeuroglancerView() {
   const { readKey } = useParams();
   const stateQuery = useViewStateByReadKey(readKey);
-  const baseUrl = useDefaultNeuroglancerBaseUrl();
+  const baseUrl = useInternalNeuroglancerBaseUrl();
   const containerRef = useRef<HTMLDivElement>(null);
 
   if (stateQuery.isPending) {
diff --git a/frontend/src/hooks/useDefaultNeuroglancerBaseUrl.ts b/frontend/src/hooks/useDefaultNeuroglancerBaseUrl.ts
index efeb1055..f5b2403e 100644
--- a/frontend/src/hooks/useDefaultNeuroglancerBaseUrl.ts
+++ b/frontend/src/hooks/useDefaultNeuroglancerBaseUrl.ts
@@ -35,3 +35,25 @@ export function useDefaultNeuroglancerBaseUrl(): string {
     return DEFAULT_NEUROGLANCER_BASE_URL;
   }, [validViewers, viewerUrlSources]);
 }
+
+/**
+ * The Internal (deployment-configured) Neuroglancer base URL, ignoring the
+ * user's Internal/External viewer-URL preference. The embedded viewer uses
+ * this because the "External" preference (e.g. neuroglancer-demo.appspot.com)
+ * sends X-Frame-Options and won't render in an iframe; the configured/internal
+ * deployment is same-origin/frameable. Portable: no hardcoded URL — falls back
+ * to DEFAULT_NEUROGLANCER_BASE_URL only where no internal NG is configured.
+ */
+export function useInternalNeuroglancerBaseUrl(): string {
+  const { validViewers } = useViewersContext();
+  return useMemo(() => {
+    const neuroglancer = validViewers.find(v => v.key === 'neuroglancer');
+    if (neuroglancer) {
+      return (
+        resolveViewerTemplate(neuroglancer, 'configured').split('#!')[0] ||
+        DEFAULT_NEUROGLANCER_BASE_URL
+      );
+    }
+    return DEFAULT_NEUROGLANCER_BASE_URL;
+  }, [validViewers]);
+}

From 1cb812b20d083c08574ae1632028f036be62c97a Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Tue, 11 Aug 2026 13:19:50 -0400
Subject: [PATCH 10/20] fix(views): plain Zarr arrays each become one layer in
 a combined View

The checkout pipeline required OME-Zarr multiscale metadata for every cart
dataset: getOmeZarrMetadata threw on a bare array, the entry was dropped, and
the data-URL fallback was dead code that never ran. Manually adding array
directories (affs, lsds, seg, ...) to the cart produced a 0-layer View and an
error popup on channel expand.

generateStateForDataset now falls back to a single plain-array layer (new
generateStateForPlainZarr, probing v2 then v3) when OME detection fails, and
getOmeZarrChannels returns [] instead of throwing for a plain array.
---
 .../__tests__/unitTests/viewCheckout.test.ts  | 34 +++++++++++++++++--
 frontend/src/omezarr-helper.ts                | 30 +++++++++++++++-
 frontend/src/utils/viewCheckout.ts            | 23 +++++++++----
 3 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/unitTests/viewCheckout.test.ts b/frontend/src/__tests__/unitTests/viewCheckout.test.ts
index 48805149..ae148724 100644
--- a/frontend/src/__tests__/unitTests/viewCheckout.test.ts
+++ b/frontend/src/__tests__/unitTests/viewCheckout.test.ts
@@ -5,12 +5,14 @@ const encoded = (state: unknown) => encodeURIComponent(JSON.stringify(state));
 vi.mock('@/omezarr-helper', () => ({
   getOmeZarrMetadata: vi.fn(),
   generateNeuroglancerStateForOmeZarr: vi.fn(),
-  generateNeuroglancerStateForDataURL: vi.fn()
+  generateNeuroglancerStateForDataURL: vi.fn(),
+  generateStateForPlainZarr: vi.fn()
 }));
 
 import {
   getOmeZarrMetadata,
-  generateNeuroglancerStateForOmeZarr
+  generateNeuroglancerStateForOmeZarr,
+  generateStateForPlainZarr
 } from '@/omezarr-helper';
 import { buildViewState } from '@/utils/viewCheckout';
 
@@ -18,6 +20,9 @@ const md = { multiscales: [{}], arr: {}, zarrVersion: 2 };
 
 beforeEach(() => {
   (getOmeZarrMetadata as any).mockReset().mockResolvedValue(md);
+  (generateStateForPlainZarr as any)
+    .mockReset()
+    .mockRejectedValue(new Error('not a plain array'));
   (generateNeuroglancerStateForOmeZarr as any)
     .mockReset()
     .mockImplementation((url: string) =>
@@ -67,8 +72,31 @@ describe('buildViewState', () => {
     expect((ng_state as any).layers).toHaveLength(1);
   });
 
-  it('skips a dataset whose metadata fetch throws and keeps the rest', async () => {
+  it('falls back to a plain-array layer when the dataset is not OME-Zarr', async () => {
+    // Both cart entries are bare Zarr arrays: OME metadata throws, plain-array
+    // generation succeeds, so each still contributes one layer.
+    (getOmeZarrMetadata as any).mockRejectedValue(new Error('not a group'));
+    (generateStateForPlainZarr as any).mockImplementation((url: string) =>
+      encoded({ layers: [{ name: `${url}-plain` }] })
+    );
+    const { ng_state, layers } = await buildViewState([
+      { url: 'a', sharing_key: 'ka', fsp_name: 'f', path: '/a', label: 'A' },
+      { url: 'b', sharing_key: 'kb', fsp_name: 'f', path: '/b', label: 'B' }
+    ]);
+    expect((ng_state as any).layers).toHaveLength(2);
+    expect(layers).toEqual([
+      { sharing_key: 'ka', layer_index: 0, channel: null, opts: null },
+      { sharing_key: 'kb', layer_index: 1, channel: null, opts: null }
+    ]);
+  });
+
+  it('skips a dataset only when it is neither OME-Zarr nor a plain array', async () => {
+    // OME metadata throws AND plain-array generation throws (genuinely broken /
+    // moved / not a Zarr array) → drop just that entry, keep the rest.
     (getOmeZarrMetadata as any).mockRejectedValueOnce(new Error('gone'));
+    (generateStateForPlainZarr as any).mockRejectedValueOnce(
+      new Error('also gone')
+    );
     const { ng_state, layers } = await buildViewState([
       { url: 'a', sharing_key: 'ka', fsp_name: 'f', path: '/a', label: 'A' },
       { url: 'b', sharing_key: 'kb', fsp_name: 'f', path: '/b', label: 'B' }
diff --git a/frontend/src/omezarr-helper.ts b/frontend/src/omezarr-helper.ts
index 56c6689f..23683fe4 100644
--- a/frontend/src/omezarr-helper.ts
+++ b/frontend/src/omezarr-helper.ts
@@ -634,13 +634,40 @@ async function getOmeZarrMetadata(dataUrl: string): Promise<Metadata> {
   return metadata;
 }
 
+/**
+ * Open a plain Zarr array (not an OME-Zarr multiscale group) with auto-detected
+ * storage version and emit a single-layer Neuroglancer state. Used by the Views
+ * checkout when a cart dataset is a bare array, so each added directory still
+ * becomes one layer.
+ */
+async function generateStateForPlainZarr(dataUrl: string): Promise<string> {
+  // Probe the storage version (needed for the |zarrN: source suffix): try v2
+  // first (most fileglancer data), then v3. If neither opens, this throws and
+  // the caller skips the dataset.
+  let zarrVersion: 2 | 3 = 2;
+  try {
+    await getZarrArray(dataUrl, 2);
+  } catch {
+    await getZarrArray(dataUrl, 3);
+    zarrVersion = 3;
+  }
+  return generateNeuroglancerStateForDataURL(dataUrl, zarrVersion);
+}
+
 /**
  * Get the channel labels for an OME-Zarr dataset: from `omero.channels[].label`
  * when present, else synthesized `Channel 0..n-1` from the `c` axis length,
  * else `[]` when there is no channel axis.
  */
 async function getOmeZarrChannels(dataUrl: string): Promise<string[]> {
-  const metadata = await getOmeZarrMetadata(dataUrl);
+  let metadata;
+  try {
+    metadata = await getOmeZarrMetadata(dataUrl);
+  } catch {
+    // Plain array / no multiscale group: no channels to enumerate. Return []
+    // instead of throwing so the cart row shows its no-channel hint.
+    return [];
+  }
   const multiscale = metadata.multiscales?.[0];
   if (!multiscale) {
     return [];
@@ -803,6 +830,7 @@ export {
   getOmeZarrChannels,
   getOmeZarrThumbnail,
   generateNeuroglancerStateForDataURL,
+  generateStateForPlainZarr,
   generateNeuroglancerStateForZarrArray,
   generateNeuroglancerStateForOmeZarr,
   translateUnitToNeuroglancer,
diff --git a/frontend/src/utils/viewCheckout.ts b/frontend/src/utils/viewCheckout.ts
index 7944d7fb..61eb4ea0 100644
--- a/frontend/src/utils/viewCheckout.ts
+++ b/frontend/src/utils/viewCheckout.ts
@@ -1,7 +1,8 @@
 import {
   getOmeZarrMetadata,
   generateNeuroglancerStateForOmeZarr,
-  generateNeuroglancerStateForDataURL
+  generateNeuroglancerStateForDataURL,
+  generateStateForPlainZarr
 } from '@/omezarr-helper';
 import type { ViewLayerInput } from '@/queries/viewQueries';
 import { default as log } from '@/logger';
@@ -50,11 +51,21 @@ async function generateStateForDataset(
         )
       : generateNeuroglancerStateForDataURL(ds.url, metadata.zarrVersion);
     return decodeState(encoded);
-  } catch (error) {
-    // One broken cart entry (moved/deleted file, missing multiscale) must
-    // not abort the whole checkout — skip it, keep the rest.
-    log.error(`Failed to generate Neuroglancer state for ${ds.url}`, error);
-    return null;
+  } catch (omeError) {
+    // Not an OME-Zarr multiscale group. Try it as a plain Zarr array before
+    // giving up, so a manually-added array directory still becomes one layer.
+    try {
+      return decodeState(await generateStateForPlainZarr(ds.url));
+    } catch (plainError) {
+      // Genuinely broken (moved/deleted, not a Zarr array) — skip this one
+      // cart entry, keep the rest.
+      log.error(
+        `Failed to generate Neuroglancer state for ${ds.url}`,
+        omeError,
+        plainError
+      );
+      return null;
+    }
   }
 }
 

From 0520648c64a9e5fc041aa04a689fc3b94038eb96 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Tue, 11 Aug 2026 13:19:50 -0400
Subject: [PATCH 11/20] docs(views): plan for plain-array checkout fix

---
 .../2026-08-11-ngviews-plain-array-layers.md  | 125 ++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md

diff --git a/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md b/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md
new file mode 100644
index 00000000..94209882
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md
@@ -0,0 +1,125 @@
+# Plan: Views checkout must handle plain Zarr arrays (one layer per cart dataset)
+
+Date: 2026-08-11
+Branch: `ngviews-06-embedded-readonly`
+Status: for review
+
+## Problem
+
+Adding several plain Zarr array directories to the Layer Cart (e.g. `.../seed6/data.zarr/affs`,
+`/lsds`, `/img_zyx`, `/seg`) and clicking **Create View** should produce one Neuroglancer
+layer per added directory. It does not. The saved View reports **0 layers**, expanding a cart
+row throws a `not found: v3 array or group` pop-up, and opening the View shows a black
+Neuroglancer with a single `1 new layer` tab.
+
+This is **not** the "auto-detect all children of a `.zgroup`" feature requested on Slack. This is
+the existing manual-add path failing for anything that is not an OME-Zarr multiscale group.
+
+## Root cause
+
+The checkout pipeline is OME-Zarr-first and never handles a bare array.
+
+- `frontend/src/utils/viewCheckout.ts:37` — `generateStateForDataset` calls
+  `getOmeZarrMetadata(ds.url)` for **every** dataset.
+- `frontend/src/omezarr-helper.ts:598` — `getOmeZarrMetadata` calls
+  `omezarr.getMultiscaleWithArray(store, 0)`, which demands a multiscale group. A plain array
+  **throws** (`not found: v3 array or group`).
+- The throw is caught at `viewCheckout.ts:53` and returns `null`, so the dataset is **dropped**
+  (→ 0 layers).
+- The fallback `generateNeuroglancerStateForDataURL` at `viewCheckout.ts:51` is **dead code**
+  for plain arrays: it lives inside the ternary that only runs *after* `getOmeZarrMetadata`
+  succeeds. When line 37 throws, the fallback never executes.
+- The same throw surfaces raw in the channel-expand UI (`getOmeZarrChannels` →
+  `getOmeZarrMetadata`) → error pop-up.
+
+## Fix
+
+Make `generateStateForDataset` fall back to a single plain-array layer when OME multiscale
+detection fails, instead of returning `null`.
+
+### 1. Add a plain-array state helper (`omezarr-helper.ts`)
+
+```ts
+// Open a plain Zarr array with auto-detected storage version and emit a
+// single-layer NG state. Used when a cart dataset is a bare array, not an
+// OME-Zarr multiscale group.
+export async function generateStateForPlainZarr(dataUrl: string): Promise<string> {
+  const store = new zarr.FetchStore(dataUrl, { overrides: { credentials: 'include' } });
+  const arr = await omezarr.getArray(store, '/', undefined); // undefined = probe v2/v3
+  const zarrVersion = arr.metadata.zarr_format as 2 | 3;
+  return generateNeuroglancerStateForDataURL(dataUrl, zarrVersion);
+}
+```
+
+Reuses existing `generateNeuroglancerStateForDataURL` (emits `type:'new'`, correct `|zarrN:`
+source, layout `4panel-alt`). No new render logic.
+
+### 2. Fall back in `generateStateForDataset` (`viewCheckout.ts`)
+
+```ts
+async function generateStateForDataset(ds): Promise<NgState | null> {
+  try {
+    const metadata = await getOmeZarrMetadata(ds.url);
+    const multiscale = metadata.multiscales?.[0];
+    const encoded = multiscale
+      ? generateNeuroglancerStateForOmeZarr(ds.url, metadata.zarrVersion, 'image',
+          multiscale, metadata.arr, metadata.labels, metadata.omero)
+      : generateNeuroglancerStateForDataURL(ds.url, metadata.zarrVersion);
+    return decodeState(encoded);
+  } catch (omeError) {
+    // Not an OME-Zarr multiscale group. Try a plain array before giving up.
+    try {
+      return decodeState(await generateStateForPlainZarr(ds.url));
+    } catch (plainError) {
+      log.error(`Failed to generate NG state for ${ds.url}`, omeError, plainError);
+      return null; // genuinely broken (moved/deleted/not zarr) → skip, keep the rest
+    }
+  }
+}
+```
+
+Result: N added array dirs → N layers. `null` now means "not a Zarr array at all", not
+"not OME-Zarr".
+
+### 3. Stop the channel-expand pop-up (`getOmeZarrChannels`, `omezarr-helper.ts:642`)
+
+Plain arrays have no channels. `getOmeZarrMetadata` throws inside `getOmeZarrChannels`. Wrap so
+a plain array returns `[]` instead of throwing; the cart row already shows the
+"Channels load after the View is created." / single-array hint.
+
+```ts
+async function getOmeZarrChannels(dataUrl: string): Promise<string[]> {
+  let metadata;
+  try {
+    metadata = await getOmeZarrMetadata(dataUrl);
+  } catch {
+    return []; // plain array / no multiscale → no channels to pick
+  }
+  // ...unchanged...
+}
+```
+
+## Tests
+
+- `frontend/src/__tests__/` unit test for `buildViewState`: mock `getOmeZarrMetadata` to throw
+  and `generateStateForPlainZarr` to return a one-layer state; assert a 3-dataset cart yields
+  `layers.length === 3` and `ng_state.layers.length === 3` (self-check for the branch/loop logic).
+- Manual on dev: add `affs`, `lsds`, `img_zyx`, `seg` under `seed6/data.zarr`, Create View,
+  confirm 4 layers in the Saved Views table and 4 tabs in the embedded viewer.
+
+## Out of scope (separate items, noted not fixed)
+
+- **Misalignment**: cross-array coordinate spaces are not reconciled — first dataset's
+  dimensions win (`viewCheckout.ts:75` ceiling). Arrays with differing scale/offset render
+  misaligned. Expected; document, don't fix here.
+- **Segmentation typing**: plain-array fallback emits `type:'new'`; `seg` shows as image, not a
+  labels layer. Neuroglancer lets the user switch. Follow-up if auto-typing wanted.
+- **UX (#1/#2/#3)**: "Create View" button semantics, channels-load-after-create ordering, and
+  duplicate-View-on-repeat-click are real but independent of this data bug. Track separately.
+- **`.zgroup` auto fan-out** (the Slack feature): not this. Explicitly not doing it.
+
+## Risk
+
+Low. Additive fallback; OME-Zarr path unchanged. Worst case a genuinely broken dir is still
+skipped (same as today). `omezarr.getArray(store, '/', undefined)` version-probe is the one
+external assumption — verify it resolves v2 arrays on dev before merge.

From 84f917aaa086d4f1dfb596ea6b5f3bf0345a0e02 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Tue, 11 Aug 2026 13:49:10 -0400
Subject: [PATCH 12/20] fix(views): plain-array layers get an explicit type,
 not Neuroglancer's picker

Plain-array fallback emitted type:'new', which forced Neuroglancer's layer-type
picker on open and rendered layers as raw grey. generateStateForPlainZarr now
opens the array and picks a type from name+dtype (integer dtype + seg/label/mask
name -> segmentation, else image) via generateNeuroglancerStateForZarrArray, so
seg renders as segmentation and images resolve without a manual pick.

Multi-channel arrays (affs/lsds) and a per-layer override UI are deferred to
follow-up PRs; recorded in the plan.
---
 .../2026-08-11-ngviews-plain-array-layers.md  | 28 +++++++++++++++++++
 frontend/src/omezarr-helper.ts                | 24 ++++++++++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md b/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md
index 94209882..20caacb0 100644
--- a/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md
+++ b/docs/superpowers/plans/2026-08-11-ngviews-plain-array-layers.md
@@ -107,6 +107,34 @@ async function getOmeZarrChannels(dataUrl: string): Promise<string[]> {
 - Manual on dev: add `affs`, `lsds`, `img_zyx`, `seg` under `seed6/data.zarr`, Create View,
   confirm 4 layers in the Saved Views table and 4 tabs in the embedded viewer.
 
+## Follow-up (deferred to later PRs in the stack)
+
+QA on dev after the initial fix surfaced these; user chose to keep this branch to
+the type-default fix and split the rest:
+
+- **Per-layer type override in the Layer Cart**: image / segmentation /
+  multi-channel selector per cart dataset, plumbed through `ViewLayerInput.opts`
+  into the generated NG state. Covers segmentation-by-choice and the multichannel
+  case below.
+- **Multi-channel arrays (affs, lsds)**: a bare multi-channel float array renders
+  as one grey channel because there is no channel dimension/shader. Needs the NG
+  state to emit a local `c` dimension + shader; Neuroglancer cannot infer it
+  without OME axis metadata. Overlaps the override work.
+- **Show data paths on the view page**: `/view/:readKey` address bar is the short
+  app route by design; **Copy link already yields the full Neuroglancer-style URL
+  with every layer's data source embedded**. Optional: a panel on `/view` that
+  lists each layer's full data URL, mirroring how a data link shows its path.
+
+## Type default (done in this branch)
+
+Plain-array fallback no longer emits `type:'new'` (which forces Neuroglancer's
+layer-type picker and renders raw grey). `generateStateForPlainZarr` now opens the
+array, guesses a type from name + dtype (`guessPlainLayerType`: integer dtype +
+name matching `seg|label|mask` -> `segmentation`, else `image`), and uses the
+explicit-type generator `generateNeuroglancerStateForZarrArray`. The existing
+thumbnail-edge heuristic (`determineLayerType`) is not usable here — checkout has
+no rendered thumbnail (see `viewCheckout.ts:39`).
+
 ## Out of scope (separate items, noted not fixed)
 
 - **Misalignment**: cross-array coordinate spaces are not reconciled — first dataset's
diff --git a/frontend/src/omezarr-helper.ts b/frontend/src/omezarr-helper.ts
index 23683fe4..93b4b273 100644
--- a/frontend/src/omezarr-helper.ts
+++ b/frontend/src/omezarr-helper.ts
@@ -640,18 +640,36 @@ async function getOmeZarrMetadata(dataUrl: string): Promise<Metadata> {
  * checkout when a cart dataset is a bare array, so each added directory still
  * becomes one layer.
  */
+/**
+ * Guess a Neuroglancer layer type for a plain array from its name and dtype.
+ * Label/segmentation volumes are integer-typed and usually named seg/label/mask;
+ * everything else is treated as an image. This only sets the default so the
+ * layer resolves without Neuroglancer's "new layer" type picker — the user can
+ * still switch the type in the viewer.
+ */
+function guessPlainLayerType(dataUrl: string, dtype: string): LayerType {
+  const name = getLayerName(dataUrl).toLowerCase();
+  const isInteger = /^(u?int)/.test(dtype);
+  if (isInteger && /seg|label|mask/.test(name)) {
+    return 'segmentation';
+  }
+  return 'image';
+}
+
 async function generateStateForPlainZarr(dataUrl: string): Promise<string> {
   // Probe the storage version (needed for the |zarrN: source suffix): try v2
   // first (most fileglancer data), then v3. If neither opens, this throws and
   // the caller skips the dataset.
   let zarrVersion: 2 | 3 = 2;
+  let arr;
   try {
-    await getZarrArray(dataUrl, 2);
+    arr = await getZarrArray(dataUrl, 2);
   } catch {
-    await getZarrArray(dataUrl, 3);
+    arr = await getZarrArray(dataUrl, 3);
     zarrVersion = 3;
   }
-  return generateNeuroglancerStateForDataURL(dataUrl, zarrVersion);
+  const layerType = guessPlainLayerType(dataUrl, String(arr.dtype));
+  return generateNeuroglancerStateForZarrArray(dataUrl, zarrVersion, layerType);
 }
 
 /**

From 5a58365ea76d6cd2060eaaae8e2c77958548deb8 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:22:47 -0400
Subject: [PATCH 13/20] fix(views): sync consumers/mocks with
 useCreateViewFlow's dialog field rename

The useCreateViewFlow refactor conflict (resolved during the ngviews-07
rebase) renamed the hook's returned consentDialog/consentOpen to
dialog/open, since the dialog now always renders (name input + optional
consent step) rather than only for the consent-needed case.

- FileBrowser's row action still destructured the old field names.
- Three test mocks (FileBrowserViewInNg, FileBrowserCartItem,
  FileTableSelectColumn) still stubbed useCreateViewFlow() with the old
  field names; none assert on those fields directly, so this was inert
  drift, not a failure, but left the mocks out of sync with the real
  hook's shape.

Also picks up prettier's line-wrap for the consent copy.
---
 .../src/__tests__/componentTests/FileBrowserCartItem.test.tsx | 4 ++--
 .../src/__tests__/componentTests/FileBrowserViewInNg.test.tsx | 4 ++--
 .../__tests__/componentTests/FileTableSelectColumn.test.tsx   | 4 ++--
 frontend/src/components/ui/BrowsePage/FileBrowser.tsx         | 4 ++--
 frontend/src/hooks/useCreateViewFlow.tsx                      | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx b/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
index 352c359d..1a0c75d4 100644
--- a/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
+++ b/frontend/src/__tests__/componentTests/FileBrowserCartItem.test.tsx
@@ -37,8 +37,8 @@ vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
     ...actual,
     useCreateViewFlow: () => ({
       startCreateView: vi.fn(),
-      consentDialog: null,
-      consentOpen: false,
+      dialog: null,
+      open: false,
       pending: false
     })
   };
diff --git a/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx b/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx
index 74706485..e6411af0 100644
--- a/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx
+++ b/frontend/src/__tests__/componentTests/FileBrowserViewInNg.test.tsx
@@ -17,8 +17,8 @@ vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
     ...actual,
     useCreateViewFlow: () => ({
       startCreateView,
-      consentDialog: null,
-      consentOpen: false,
+      dialog: null,
+      open: false,
       pending: false
     })
   };
diff --git a/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx b/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
index ef6e6722..1dc185a7 100644
--- a/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
+++ b/frontend/src/__tests__/componentTests/FileTableSelectColumn.test.tsx
@@ -43,8 +43,8 @@ vi.mock('@/hooks/useCreateViewFlow', async importOriginal => {
     ...actual,
     useCreateViewFlow: () => ({
       startCreateView: vi.fn(),
-      consentDialog: null,
-      consentOpen: false,
+      dialog: null,
+      open: false,
       pending: false
     })
   };
diff --git a/frontend/src/components/ui/BrowsePage/FileBrowser.tsx b/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
index 54db14ae..bc669245 100644
--- a/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
+++ b/frontend/src/components/ui/BrowsePage/FileBrowser.tsx
@@ -67,7 +67,7 @@ export default function FileBrowser({
     usePreferencesContext();
   const { addToCart } = useCartContext();
   const navigate = useNavigate();
-  const { startCreateView, consentDialog } = useCreateViewFlow();
+  const { startCreateView, dialog } = useCreateViewFlow();
   const { displayFiles } = useHideDotFiles();
   const { handleDownload } = useHandleDownload();
   const { handleView } = useHandleView();
@@ -395,7 +395,7 @@ export default function FileBrowser({
         />
       ) : null}
       <SelectionBar />
-      {consentDialog}
+      {dialog}
     </>
   );
 }
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index 08ed577c..b0e6c542 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -108,8 +108,8 @@ export function useCreateViewFlow() {
             <Typography className="text-foreground">
               This will create {request.newLinkCount} data link
               {request.newLinkCount === 1 ? '' : 's'} and 1 View. If you share
-              the data link(s) with internal collaborators, they will be able
-              to view these data.
+              the data link(s) with internal collaborators, they will be able to
+              view these data.
             </Typography>
             <div className="flex flex-col gap-2">
               <Typography className="font-semibold text-foreground">

From e832814615ba3c0e195a286ab114630ce2ce6a0a Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:37:14 -0400
Subject: [PATCH 14/20] feat(views): embedded viewer gets navbar chrome and a
 breadcrumb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/view/:readKey no longer opts out of MainLayout's navbar (the sole reason
isBareLayoutPath existed), and NeuroglancerView now shows an "NG Views ▸
{title}" breadcrumb back to the views list. Also retitles the no-title
fallback to "Untitled View" so it doesn't read as a duplicate of the
"Neuroglancer" chrome the breadcrumb already establishes.
---
 .../componentTests/MainLayout.test.tsx        | 97 +++++++++++++++++++
 .../componentTests/NeuroglancerView.test.tsx  | 31 +++++-
 .../unitTests/isBareLayoutPath.test.ts        | 13 ---
 frontend/src/components/NeuroglancerView.tsx  | 78 ++++++++-------
 frontend/src/layouts/MainLayout.tsx           |  7 +-
 frontend/src/utils/index.ts                   |  8 --
 6 files changed, 174 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/__tests__/componentTests/MainLayout.test.tsx
 delete mode 100644 frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts

diff --git a/frontend/src/__tests__/componentTests/MainLayout.test.tsx b/frontend/src/__tests__/componentTests/MainLayout.test.tsx
new file mode 100644
index 00000000..0c4e0db0
--- /dev/null
+++ b/frontend/src/__tests__/componentTests/MainLayout.test.tsx
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import type { ReactNode } from 'react';
+
+// MainLayout composes ~a dozen context providers unrelated to this test;
+// stub them all as passthroughs so we can assert on the one thing that
+// changed: the navbar is no longer skipped for /view/:readKey.
+// vi.mock factories are hoisted above imports, so the shared stub must be
+// created via vi.hoisted rather than a plain top-level const.
+const { passthrough } = vi.hoisted(() => ({
+  passthrough: ({ children }: { children: ReactNode }) => children
+}));
+
+vi.mock('@/components/ui/Navbar/Navbar', () => ({
+  default: () => <div data-testid="navbar" />
+}));
+vi.mock('@/components/ui/Notifications/Notifications', () => ({
+  default: () => null
+}));
+vi.mock('@/components/ui/Dialogs/ServerDownOverlay', () => ({
+  ServerDownOverlay: () => null
+}));
+vi.mock('react-shepherd', () => ({
+  ShepherdJourneyProvider: passthrough
+}));
+vi.mock('react-hot-toast', () => ({
+  __esModule: true,
+  default: Object.assign(() => {}, { success: vi.fn(), error: vi.fn() }),
+  Toaster: () => null
+}));
+vi.mock('@/contexts/ServerHealthContext', () => ({
+  ServerHealthProvider: passthrough,
+  useServerHealthContext: () => ({
+    showWarningOverlay: false,
+    checkHealth: vi.fn(),
+    nextRetrySeconds: 0
+  })
+}));
+vi.mock('@/contexts/ZonesAndFspMapContext', () => ({
+  ZonesAndFspMapContextProvider: passthrough
+}));
+vi.mock('@/contexts/FileBrowserContext', () => ({
+  FileBrowserContextProvider: passthrough
+}));
+vi.mock('@/contexts/PreferencesContext', () => ({
+  PreferencesProvider: passthrough
+}));
+vi.mock('@/contexts/CartContext', () => ({ CartProvider: passthrough }));
+vi.mock('@/contexts/ViewsContext', () => ({ ViewsProvider: passthrough }));
+vi.mock('@/contexts/OpenFavoritesContext', () => ({
+  OpenFavoritesProvider: passthrough
+}));
+vi.mock('@/contexts/TicketsContext', () => ({ TicketProvider: passthrough }));
+vi.mock('@/contexts/ProxiedPathContext', () => ({
+  ProxiedPathProvider: passthrough
+}));
+vi.mock('@/contexts/ExternalBucketContext', () => ({
+  ExternalBucketProvider: passthrough
+}));
+vi.mock('@/contexts/ProfileContext', () => ({
+  ProfileContextProvider: passthrough
+}));
+vi.mock('@/contexts/NotificationsContext', () => ({
+  NotificationProvider: passthrough
+}));
+vi.mock('@/contexts/ViewersContext', () => ({ ViewersProvider: passthrough }));
+
+import { MainLayout } from '@/layouts/MainLayout';
+
+describe('MainLayout', () => {
+  it('renders the navbar on the embedded viewer route (/view/:readKey)', () => {
+    render(
+      <MemoryRouter initialEntries={['/view/abc123']}>
+        <Routes>
+          <Route element={<MainLayout />} path="/*">
+            <Route element={<div>viewer</div>} path="view/:readKey" />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+  });
+
+  it('still renders the navbar on an ordinary route', () => {
+    render(
+      <MemoryRouter initialEntries={['/browse']}>
+        <Routes>
+          <Route element={<MainLayout />} path="/*">
+            <Route element={<div>browse</div>} path="browse" />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    );
+    expect(screen.getByTestId('navbar')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index 3563deb0..66a2a79d 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -1,5 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { createElement } from 'react';
+import type { ReactNode } from 'react';
 
 const { useViewStateByReadKey } = vi.hoisted(() => ({
   useViewStateByReadKey: vi.fn()
@@ -8,7 +10,11 @@ vi.mock('@/queries/viewQueries', () => ({ useViewStateByReadKey }));
 vi.mock('@/hooks/useDefaultNeuroglancerBaseUrl', () => ({
   useInternalNeuroglancerBaseUrl: () => 'https://ng.example/'
 }));
-vi.mock('react-router', () => ({ useParams: () => ({ readKey: 'rk1' }) }));
+vi.mock('react-router', () => ({
+  useParams: () => ({ readKey: 'rk1' }),
+  Link: ({ to, children }: { to: string; children: ReactNode }) =>
+    createElement('a', { href: to }, children)
+}));
 
 import NeuroglancerView from '@/components/NeuroglancerView';
 
@@ -47,7 +53,7 @@ describe('NeuroglancerView', () => {
         JSON.stringify({ title: 'My View', layers: [{ name: 'L0' }] })
       )
     );
-    expect(screen.getByText('My View')).toBeInTheDocument();
+    expect(screen.getAllByText('My View').length).toBeGreaterThan(0);
     expect(
       screen.getByRole('button', { name: /copy link/i })
     ).toBeInTheDocument();
@@ -58,4 +64,25 @@ describe('NeuroglancerView', () => {
       screen.getByRole('button', { name: /open external/i })
     ).toBeInTheDocument();
   });
+
+  it('shows a breadcrumb linking back to the NG Views list', () => {
+    useViewStateByReadKey.mockReturnValue({
+      data: { title: 'My View', layers: [{ name: 'L0' }] },
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    const crumbLink = screen.getByRole('link', { name: /ng views/i });
+    expect(crumbLink).toHaveAttribute('href', '/ngviews');
+  });
+
+  it('falls back to "Untitled View" when the view has no title', () => {
+    useViewStateByReadKey.mockReturnValue({
+      data: { layers: [{ name: 'L0' }] },
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    expect(screen.getAllByText('Untitled View').length).toBeGreaterThan(0);
+  });
 });
diff --git a/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts b/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts
deleted file mode 100644
index bf298dcd..00000000
--- a/frontend/src/__tests__/unitTests/isBareLayoutPath.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { isBareLayoutPath } from '@/utils';
-
-describe('isBareLayoutPath', () => {
-  it('is true for the embedded viewer route', () => {
-    expect(isBareLayoutPath('/view/abc123')).toBe(true);
-  });
-  it('is false for normal app routes', () => {
-    expect(isBareLayoutPath('/ngviews')).toBe(false);
-    expect(isBareLayoutPath('/browse')).toBe(false);
-    expect(isBareLayoutPath('/')).toBe(false);
-  });
-});
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index 47c404f0..d2651ced 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -16,6 +16,7 @@ import { downloadTextFile } from '@/utils';
 import { copyToClipboard } from '@/utils/copyText';
 import FgButton from '@/components/designSystem/atoms/FgButton';
 import FgIcon from '@/components/designSystem/atoms/FgIcon';
+import FgLink from '@/components/designSystem/atoms/FgLink';
 
 export default function NeuroglancerView() {
   const { readKey } = useParams();
@@ -40,7 +41,7 @@ export default function NeuroglancerView() {
     );
   }
 
-  const title = (ngState.title as string) || 'Neuroglancer View';
+  const title = (ngState.title as string) || 'Untitled View';
   const externalUrl = constructNeuroglancerUrl(ngState, baseUrl);
 
   const handleCopy = async () => {
@@ -64,39 +65,50 @@ export default function NeuroglancerView() {
       className="flex h-full w-full flex-col bg-background"
       ref={containerRef}
     >
-      <div className="flex shrink-0 items-center justify-between gap-4 border-b border-surface px-4 py-2">
-        <Typography
-          className="truncate text-foreground font-semibold"
-          type="h6"
-        >
-          {title}
-        </Typography>
-        <div className="flex shrink-0 items-center gap-2">
-          <FgButton onClick={() => void handleCopy()} variant="ghost">
-            <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
-          </FgButton>
-          <FgButton
-            onClick={() =>
-              downloadTextFile(
-                JSON.stringify(ngState, null, 2),
-                `${title}.json`
-              )
-            }
-            variant="ghost"
-          >
-            <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
-          </FgButton>
-          <FgButton
-            onClick={() =>
-              window.open(externalUrl, '_blank', 'noopener,noreferrer')
-            }
-            variant="ghost"
+      <div className="flex shrink-0 flex-col gap-1 border-b border-surface px-4 py-2">
+        <div className="flex items-center gap-1 text-foreground/70">
+          <FgLink size="sm" to="/ngviews">
+            NG Views
+          </FgLink>
+          <Typography variant="small">/</Typography>
+          <Typography className="truncate" variant="small">
+            {title}
+          </Typography>
+        </div>
+        <div className="flex items-center justify-between gap-4">
+          <Typography
+            className="truncate text-foreground font-semibold"
+            type="h6"
           >
-            <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
-          </FgButton>
-          <FgButton onClick={handleFullscreen} variant="ghost">
-            <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
-          </FgButton>
+            {title}
+          </Typography>
+          <div className="flex shrink-0 items-center gap-2">
+            <FgButton onClick={() => void handleCopy()} variant="ghost">
+              <FgIcon icon={HiOutlineDuplicate} size="sm" /> Copy link
+            </FgButton>
+            <FgButton
+              onClick={() =>
+                downloadTextFile(
+                  JSON.stringify(ngState, null, 2),
+                  `${title}.json`
+                )
+              }
+              variant="ghost"
+            >
+              <FgIcon icon={HiOutlineDownload} size="sm" /> Download JSON
+            </FgButton>
+            <FgButton
+              onClick={() =>
+                window.open(externalUrl, '_blank', 'noopener,noreferrer')
+              }
+              variant="ghost"
+            >
+              <FgIcon icon={HiOutlineExternalLink} size="sm" /> Open external
+            </FgButton>
+            <FgButton onClick={handleFullscreen} variant="ghost">
+              <FgIcon icon={HiOutlineArrowsExpand} size="sm" /> Fullscreen
+            </FgButton>
+          </div>
         </div>
       </div>
       <iframe
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index f2928b20..c1c4fa78 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-max-depth */
 // Disable max depth because of many context providers
 
-import { Outlet, useParams, useLocation } from 'react-router';
+import { Outlet, useParams } from 'react-router';
 import { Toaster } from 'react-hot-toast';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ShepherdJourneyProvider } from 'react-shepherd';
@@ -26,13 +26,12 @@ import Notifications from '@/components/ui/Notifications/Notifications';
 import ErrorFallback from '@/components/ErrorFallback';
 import { ServerDownOverlay } from '@/components/ui/Dialogs/ServerDownOverlay';
 import { useServerHealthContext } from '@/contexts/ServerHealthContext';
-import { isConnectLoginPopup, isBareLayoutPath } from '@/utils';
+import { isConnectLoginPopup } from '@/utils';
 
 const MainLayoutContent = () => {
   const { showWarningOverlay, checkHealth, nextRetrySeconds } =
     useServerHealthContext();
-  const location = useLocation();
-  const bare = isConnectLoginPopup() || isBareLayoutPath(location.pathname);
+  const bare = isConnectLoginPopup();
 
   return (
     <ShepherdJourneyProvider>
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 39362c26..a4199c8f 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -469,11 +469,3 @@ export function isConnectLoginPopup(): boolean {
     next.startsWith('/connect-complete')
   );
 }
-
-/**
- * Routes rendered without the app's navbar/nav chrome (full-viewport). The
- * embedded Neuroglancer viewer (/view/:readKey) fills the window.
- */
-export function isBareLayoutPath(pathname: string): boolean {
-  return pathname.startsWith('/view/');
-}

From c3e986e805925647912f7f76140e0aab14d7a854 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:47:04 -0400
Subject: [PATCH 15/20] fix(views): Create View navigates to the embedded
 viewer and clears the cart

runCheckout previously navigated cart-driven checkouts to /ngviews and
never cleared the persisted cart, leaving stale items behind after a
successful View creation. Cart callers (CartList, SelectionBar) now
pass onCreated to jump straight to /view/:readKey, and clearCart()
fires after every successful checkout regardless of caller.
---
 .../componentTests/CartList.test.tsx          | 43 +++++++++++++++++--
 .../componentTests/CreateViewButton.test.tsx  |  3 ++
 .../componentTests/SelectionBar.test.tsx      | 33 +++++++++++++-
 .../componentTests/useCreateViewFlow.test.tsx | 23 ++++++++++
 .../components/ui/BrowsePage/SelectionBar.tsx |  3 ++
 frontend/src/components/ui/Views/CartList.tsx |  3 ++
 frontend/src/hooks/useCreateViewFlow.tsx      |  4 ++
 7 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/CartList.test.tsx b/frontend/src/__tests__/componentTests/CartList.test.tsx
index e0dbe147..9412a2bc 100644
--- a/frontend/src/__tests__/componentTests/CartList.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartList.test.tsx
@@ -1,11 +1,26 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import type { CartItem } from '@/contexts/CartContext';
+import type { View } from '@/queries/viewQueries';
 
 const cartA: CartItem = { fsp_name: 'f', path: '/a', label: 'Dataset A' };
 const cartB: CartItem = { fsp_name: 'f', path: '/b', label: 'Dataset B' };
+const createdView: View = vi.hoisted(() => ({
+  short_key: 'v1',
+  read_key: 'rk1',
+  name: 'New View',
+  ng_state: {},
+  sharing_mode: 'read',
+  owner: 'me',
+  created_at: '2026-08-01T00:00:00Z',
+  updated_at: '2026-08-01T00:00:00Z',
+  layers: []
+}));
 
 let cart: CartItem[] = [];
+const navigate = vi.hoisted(() => vi.fn());
+vi.mock('react-router', () => ({ useNavigate: () => navigate }));
 vi.mock('@/contexts/CartContext', () => ({
   useCartContext: () => ({
     cart,
@@ -21,13 +36,25 @@ vi.mock('@/components/ui/Views/CartDatasetRow', () => ({
   )
 }));
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
-  default: ({ label }: { label?: string }) => (
-    <button type="button">{label ?? 'Create View'}</button>
+  default: ({
+    label,
+    onCreated
+  }: {
+    label?: string;
+    onCreated?: (view: View) => void;
+  }) => (
+    <button onClick={() => onCreated?.(createdView)} type="button">
+      {label ?? 'Create View'}
+    </button>
   )
 }));
 
 import CartList from '@/components/ui/Views/CartList';
 
+beforeEach(() => {
+  navigate.mockClear();
+});
+
 describe('CartList', () => {
   it('shows the empty state when the cart is empty', () => {
     cart = [];
@@ -46,4 +73,14 @@ describe('CartList', () => {
       screen.getByRole('button', { name: /clear cart/i })
     ).toBeInTheDocument();
   });
+
+  it('navigates to the embedded viewer when a View is created', async () => {
+    cart = [cartA, cartB];
+    const user = userEvent.setup();
+    render(<CartList />);
+
+    await user.click(screen.getByRole('button', { name: /create view/i }));
+
+    expect(navigate).toHaveBeenCalledWith('/view/rk1');
+  });
 });
diff --git a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
index f43f0006..4818f8c1 100644
--- a/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
+++ b/frontend/src/__tests__/componentTests/CreateViewButton.test.tsx
@@ -19,6 +19,9 @@ vi.mock('@/queries/proxiedPathQueries', () => ({
   useAllProxiedPathsQuery: () => ({ data: [] }) // nothing exists → 1 new link
 }));
 vi.mock('react-router', () => ({ useNavigate: () => vi.fn() }));
+vi.mock('@/contexts/CartContext', () => ({
+  useCartContext: () => ({ clearCart: vi.fn().mockResolvedValue(undefined) })
+}));
 
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
 
diff --git a/frontend/src/__tests__/componentTests/SelectionBar.test.tsx b/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
index 2807a57e..de2e1139 100644
--- a/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
+++ b/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
@@ -2,9 +2,24 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import toast from 'react-hot-toast';
+import type { View } from '@/queries/viewQueries';
 
 const clearChecked = vi.fn();
 const addToCart = vi.fn().mockResolvedValue(undefined);
+const navigate = vi.hoisted(() => vi.fn());
+const createdView: View = vi.hoisted(() => ({
+  short_key: 'v1',
+  read_key: 'rk1',
+  name: 'New View',
+  ng_state: {},
+  sharing_mode: 'read',
+  owner: 'me',
+  created_at: '2026-08-01T00:00:00Z',
+  updated_at: '2026-08-01T00:00:00Z',
+  layers: []
+}));
+
+vi.mock('react-router', () => ({ useNavigate: () => navigate }));
 
 const twoCheckedFiles = [
   { name: 'a.txt', path: '/dir/a.txt' },
@@ -25,7 +40,11 @@ vi.mock('@/contexts/CartContext', () => ({
 }));
 
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
-  default: () => <button>New View from selection</button>
+  default: ({ onCreated }: { onCreated?: (view: View) => void }) => (
+    <button onClick={() => onCreated?.(createdView)} type="button">
+      New View from selection
+    </button>
+  )
 }));
 
 import SelectionBar from '@/components/ui/BrowsePage/SelectionBar';
@@ -33,6 +52,7 @@ import SelectionBar from '@/components/ui/BrowsePage/SelectionBar';
 beforeEach(() => {
   clearChecked.mockClear();
   addToCart.mockClear();
+  navigate.mockClear();
   vi.mocked(toast.success).mockClear();
   vi.mocked(toast.error).mockClear();
   checkedFiles = twoCheckedFiles;
@@ -70,6 +90,17 @@ describe('SelectionBar', () => {
     ).toBeInTheDocument();
   });
 
+  it('navigates to the embedded viewer when a View is created', async () => {
+    const user = userEvent.setup();
+    render(<SelectionBar />);
+
+    await user.click(
+      screen.getByRole('button', { name: /new view from selection/i })
+    );
+
+    expect(navigate).toHaveBeenCalledWith('/view/rk1');
+  });
+
   it('clears the selection when Clear is clicked', async () => {
     const user = userEvent.setup();
     render(<SelectionBar />);
diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
index 97cff69a..700443cd 100644
--- a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -3,10 +3,14 @@ import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const checkout = vi.fn();
+const clearCart = vi.fn();
 let automatic = true;
 vi.mock('@/hooks/useCartCheckout', () => ({
   useCartCheckout: () => ({ checkout })
 }));
+vi.mock('@/contexts/CartContext', () => ({
+  useCartContext: () => ({ clearCart })
+}));
 vi.mock('@/contexts/PreferencesContext', () => ({
   usePreferencesContext: () => ({
     areDataLinksAutomatic: automatic,
@@ -38,6 +42,7 @@ beforeEach(() => {
   checkout
     .mockReset()
     .mockResolvedValue({ short_key: 'v1', read_key: 'rk1', name: 'A' });
+  clearCart.mockReset().mockResolvedValue(undefined);
   automatic = true;
 });
 
@@ -67,6 +72,7 @@ describe('useCreateViewFlow', () => {
     expect(onCreated).toHaveBeenCalledWith(
       expect.objectContaining({ read_key: 'rk1' })
     );
+    expect(clearCart).toHaveBeenCalled();
   });
 
   it('opens the dialog with data-link consent copy when links are not automatic, and waits for Continue', async () => {
@@ -86,5 +92,22 @@ describe('useCreateViewFlow', () => {
     const user = userEvent.setup();
     await user.click(screen.getByRole('button', { name: /continue/i }));
     expect(checkout).toHaveBeenCalledWith(datasets, 'A');
+    expect(clearCart).toHaveBeenCalled();
+  });
+
+  it('does not clear the cart when checkout fails', async () => {
+    checkout.mockReset().mockRejectedValue(new Error('checkout failed'));
+    const apiRef: { current: FlowApi | null } = { current: null };
+    render(<Harness apiRef={apiRef} />);
+
+    act(() => {
+      apiRef.current!.startCreateView(datasets, 'A');
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /^create$/i }));
+
+    expect(checkout).toHaveBeenCalledWith(datasets, 'A');
+    expect(clearCart).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/src/components/ui/BrowsePage/SelectionBar.tsx b/frontend/src/components/ui/BrowsePage/SelectionBar.tsx
index b0f561e3..9c58170e 100644
--- a/frontend/src/components/ui/BrowsePage/SelectionBar.tsx
+++ b/frontend/src/components/ui/BrowsePage/SelectionBar.tsx
@@ -1,4 +1,5 @@
 import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router';
 
 import { useFileBrowserContext } from '@/contexts/FileBrowserContext';
 import { useCartContext } from '@/contexts/CartContext';
@@ -12,6 +13,7 @@ import type { CartItem } from '@/contexts/CartContext';
 export default function SelectionBar() {
   const { fileBrowserState, clearChecked, fileQuery } = useFileBrowserContext();
   const { addToCart } = useCartContext();
+  const navigate = useNavigate();
 
   const { checkedFiles } = fileBrowserState;
 
@@ -53,6 +55,7 @@ export default function SelectionBar() {
         datasets={selectionDatasets}
         defaultName="New View"
         label="New View from selection"
+        onCreated={view => navigate(`/view/${view.read_key}`)}
       />
       <FgButton onClick={clearChecked} variant="ghost">
         Clear
diff --git a/frontend/src/components/ui/Views/CartList.tsx b/frontend/src/components/ui/Views/CartList.tsx
index 76d76e96..d4e84eea 100644
--- a/frontend/src/components/ui/Views/CartList.tsx
+++ b/frontend/src/components/ui/Views/CartList.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router';
 
 import CartDatasetRow from '@/components/ui/Views/CartDatasetRow';
 import CreateViewButton from '@/components/ui/Views/CreateViewButton';
@@ -46,6 +47,7 @@ function groupCartByDataset(cart: CartItem[]): CartGroup[] {
 export default function CartList() {
   const { cart, clearCart } = useCartContext();
   const allProxiedPathsQuery = useAllProxiedPathsQuery();
+  const navigate = useNavigate();
 
   const cartGroups = useMemo(() => groupCartByDataset(cart), [cart]);
   const dataLinkUrlByDataset = useMemo(() => {
@@ -91,6 +93,7 @@ export default function CartList() {
           datasets={cart}
           defaultName="New View"
           label="Create View"
+          onCreated={view => navigate(`/view/${view.read_key}`)}
         />
         <FgButton onClick={() => void handleClearCart()} variant="ghost">
           Clear cart
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index b0e6c542..f1cdfe25 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router';
 import type { ReactNode } from 'react';
 
 import { useCartCheckout } from '@/hooks/useCartCheckout';
+import { useCartContext } from '@/contexts/CartContext';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
 import { datasetKey } from '@/utils/pathHandling';
@@ -24,6 +25,7 @@ type PendingRequest = {
 
 export function useCreateViewFlow() {
   const { checkout } = useCartCheckout();
+  const { clearCart } = useCartContext();
   const {
     areDataLinksAutomatic,
     dataLinkSubpathMode,
@@ -44,6 +46,8 @@ export function useCreateViewFlow() {
     try {
       const view = await checkout(request.datasets, name);
       toast.success(`Created View "${name}"`);
+      // Every successful checkout consumes the cart, regardless of caller.
+      await clearCart();
       if (request.onCreated) {
         request.onCreated(view);
       } else {

From f8b0a2e7aab2f2381adacf540c9ddd2c37cb5105 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:51:46 -0400
Subject: [PATCH 16/20] fix(views): isolate clearCart failure from checkout's
 error path

A clearCart() rejection was falling into the same catch as checkout(),
showing a false "Checkout failed" toast and leaving the dialog open
with request still set after the View had already been created -
risking a duplicate View on retry. clearCart() now runs after
onCreated/navigate/setRequest(null) and is fire-and-forget with its
own .catch, so a cart-clear failure can no longer reopen the
checkout-failure path.
---
 .../componentTests/useCreateViewFlow.test.tsx | 27 ++++++++++++++++++-
 frontend/src/hooks/useCreateViewFlow.tsx      | 10 +++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
index 700443cd..aca1ec00 100644
--- a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import toast from 'react-hot-toast';
 
 const checkout = vi.fn();
 const clearCart = vi.fn();
@@ -110,4 +111,28 @@ describe('useCreateViewFlow', () => {
     expect(checkout).toHaveBeenCalledWith(datasets, 'A');
     expect(clearCart).not.toHaveBeenCalled();
   });
+
+  it('still completes onCreated/navigate/dialog-close when checkout succeeds but clearCart rejects, without a "Checkout failed" toast', async () => {
+    clearCart.mockReset().mockRejectedValue(new Error('cart clear failed'));
+    const onCreated = vi.fn();
+    const apiRef: { current: FlowApi | null } = { current: null };
+    render(<Harness apiRef={apiRef} />);
+
+    act(() => {
+      apiRef.current!.startCreateView(datasets, 'A', onCreated);
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /^create$/i }));
+
+    // The View was created successfully, so the success path must complete
+    // regardless of the cart-clear failure.
+    expect(onCreated).toHaveBeenCalledWith(
+      expect.objectContaining({ read_key: 'rk1' })
+    );
+    expect(apiRef.current!.open).toBe(false);
+    expect(toast.error).not.toHaveBeenCalledWith('Checkout failed');
+
+    await waitFor(() => expect(clearCart).toHaveBeenCalled());
+  });
 });
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index f1cdfe25..27f7c5cf 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -46,14 +46,20 @@ export function useCreateViewFlow() {
     try {
       const view = await checkout(request.datasets, name);
       toast.success(`Created View "${name}"`);
-      // Every successful checkout consumes the cart, regardless of caller.
-      await clearCart();
       if (request.onCreated) {
         request.onCreated(view);
       } else {
         navigate('/ngviews');
       }
       setRequest(null);
+      // Fire-and-forget: the View already exists, so a cart-clear failure
+      // (a separate network mutation) must never re-trigger "Checkout
+      // failed" or block navigation/dialog-close above. Worst case is a
+      // stale cart item, which is low-stakes and independently retryable
+      // via the manual "Clear cart" button.
+      clearCart().catch(() => {
+        toast.error('View created, but the cart could not be cleared');
+      });
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Checkout failed');
     } finally {

From 69892a5dd153762e484b6f7596cd62b42b01cf91 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:57:17 -0400
Subject: [PATCH 17/20] feat(views): address bar reflects full NG state, copy
 grabs page URL

Once the view state loads, replaceState the app's own hash to the same
url-encoded state used for the external Neuroglancer link, so copying
the current page URL is a full-state shareable link. Copy link now
copies window.location.href instead of the external instance URL.
Display/share only: readKey stays the source of truth, hash is never
read back.
---
 .../componentTests/NeuroglancerView.test.tsx  | 42 ++++++++++++++++++-
 frontend/src/components/NeuroglancerView.tsx  | 21 ++++++++--
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index 66a2a79d..95e26f74 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import type { ReactNode } from 'react';
 
@@ -16,9 +17,20 @@ vi.mock('react-router', () => ({
     createElement('a', { href: to }, children)
 }));
 
+const { copyToClipboard } = vi.hoisted(() => ({
+  copyToClipboard: vi.fn()
+}));
+vi.mock('@/utils/copyText', () => ({ copyToClipboard }));
+
 import NeuroglancerView from '@/components/NeuroglancerView';
 
 describe('NeuroglancerView', () => {
+  beforeEach(() => {
+    copyToClipboard.mockReset();
+    copyToClipboard.mockResolvedValue({ success: true });
+    window.history.replaceState(null, '', '/');
+  });
+
   it('shows a loading state while pending', () => {
     useViewStateByReadKey.mockReturnValue({
       data: undefined,
@@ -85,4 +97,32 @@ describe('NeuroglancerView', () => {
     render(<NeuroglancerView />);
     expect(screen.getAllByText('Untitled View').length).toBeGreaterThan(0);
   });
+
+  it('reflects the full state into the app URL hash after load', () => {
+    const data = { title: 'My View', layers: [{ name: 'L0' }] };
+    useViewStateByReadKey.mockReturnValue({
+      data,
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    expect(window.location.hash).toBe(
+      '#!' + encodeURIComponent(JSON.stringify(data))
+    );
+  });
+
+  it('copies the current page URL (not the external URL) when "Copy link" is clicked', async () => {
+    const user = userEvent.setup();
+    useViewStateByReadKey.mockReturnValue({
+      data: { title: 'My View', layers: [{ name: 'L0' }] },
+      isPending: false,
+      isError: false
+    });
+    render(<NeuroglancerView />);
+    await user.click(screen.getByRole('button', { name: /copy link/i }));
+    expect(copyToClipboard).toHaveBeenCalledWith(window.location.href);
+    expect(copyToClipboard).not.toHaveBeenCalledWith(
+      expect.stringContaining('https://ng.example/')
+    );
+  });
 });
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index d2651ced..072fe6a3 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router';
 import { Typography } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
@@ -23,6 +23,22 @@ export default function NeuroglancerView() {
   const stateQuery = useViewStateByReadKey(readKey);
   const baseUrl = useInternalNeuroglancerBaseUrl();
   const containerRef = useRef<HTMLDivElement>(null);
+  const ngState = stateQuery.data;
+
+  // Reflect the full state into the app's own URL hash so copy-pasting the
+  // current page URL is a full-state shareable link, matching Neuroglancer's
+  // own address-bar convention. Display/share only — readKey (route param)
+  // remains the source of truth; the hash is never read back.
+  useEffect(() => {
+    if (!ngState) {
+      return;
+    }
+    window.history.replaceState(
+      null,
+      '',
+      '#!' + encodeURIComponent(JSON.stringify(ngState))
+    );
+  }, [ngState, readKey]);
 
   if (stateQuery.isPending) {
     return (
@@ -32,7 +48,6 @@ export default function NeuroglancerView() {
     );
   }
 
-  const ngState = stateQuery.data;
   if (stateQuery.isError || !ngState) {
     return (
       <div className="flex h-full w-full items-center justify-center">
@@ -45,7 +60,7 @@ export default function NeuroglancerView() {
   const externalUrl = constructNeuroglancerUrl(ngState, baseUrl);
 
   const handleCopy = async () => {
-    const result = await copyToClipboard(externalUrl);
+    const result = await copyToClipboard(window.location.href);
     if (result.success) {
       toast.success('Neuroglancer link copied');
     } else {

From 31eb00cd1a914c3727e77c41e1e108a87674d76b Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 15:57:47 -0400
Subject: [PATCH 18/20] docs(views): mark hash-reflection effect with ponytail
 scope note

Matches the brief's guidance: hash write is display/share only, not a
state-restoration mechanism.
---
 frontend/src/components/NeuroglancerView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index 072fe6a3..82c53d08 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -27,8 +27,9 @@ export default function NeuroglancerView() {
 
   // Reflect the full state into the app's own URL hash so copy-pasting the
   // current page URL is a full-state shareable link, matching Neuroglancer's
-  // own address-bar convention. Display/share only — readKey (route param)
-  // remains the source of truth; the hash is never read back.
+  // own address-bar convention.
+  // ponytail: hash is display/share only; if it should ever drive editable
+  // state, that's the editable stack.
   useEffect(() => {
     if (!ngState) {
       return;

From 67d8a47cc7d68c7d00081cef76d1a79047a86414 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 16:15:20 -0400
Subject: [PATCH 19/20] fix(views): stop clobbering unrelated carts; copy short
 link not full-state hash

clearCart() was called unconditionally inside useCreateViewFlow's
runCheckout, but two of its three callers (SelectionBar "New View from
selection", FileBrowser "View in Neuroglancer") build their request from
something other than the persisted cart. Creating a View from either
silently wiped whatever a user had curated in their Layer Cart. Move the
clearCart() call into CartList's onCreated, the one caller that actually
owns cart state.

Also stop NeuroglancerView's "Copy link" from copying
window.location.href, which now includes the full ng_state as a URL hash
(10-14KB after encoding). RequireAuth re-encodes the full current path
into a `next` query param when redirecting to /login, so an unauthenticated
colleague opening a copied link would hit a header-size error instead of
the login page. Copy the canonical `/view/:readKey` short link instead.

Bundled in the same file: preserve window.history.state (was passing null,
which drops React Router's scroll-restoration bookkeeping) in the
hash-reflection replaceState call, drop the now-redundant `readKey` from
that effect's deps (it can't change without ngState changing), and fix the
handleFullscreen comment's stale "/view route is chrome-less" claim now
that the route has a navbar.
---
 .../componentTests/CartList.test.tsx          | 12 +++--
 .../componentTests/NeuroglancerView.test.tsx  |  7 ++-
 .../componentTests/SelectionBar.test.tsx      | 10 +++-
 .../componentTests/useCreateViewFlow.test.tsx | 47 +++++--------------
 frontend/src/components/NeuroglancerView.tsx  | 13 ++---
 frontend/src/components/ui/Views/CartList.tsx | 11 ++++-
 frontend/src/hooks/useCreateViewFlow.tsx      | 12 +----
 7 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/frontend/src/__tests__/componentTests/CartList.test.tsx b/frontend/src/__tests__/componentTests/CartList.test.tsx
index 9412a2bc..f8ff6e6f 100644
--- a/frontend/src/__tests__/componentTests/CartList.test.tsx
+++ b/frontend/src/__tests__/componentTests/CartList.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { CartItem } from '@/contexts/CartContext';
 import type { View } from '@/queries/viewQueries';
@@ -20,11 +20,12 @@ const createdView: View = vi.hoisted(() => ({
 
 let cart: CartItem[] = [];
 const navigate = vi.hoisted(() => vi.fn());
+const clearCart = vi.hoisted(() => vi.fn());
 vi.mock('react-router', () => ({ useNavigate: () => navigate }));
 vi.mock('@/contexts/CartContext', () => ({
   useCartContext: () => ({
     cart,
-    clearCart: vi.fn().mockResolvedValue(undefined)
+    clearCart
   })
 }));
 vi.mock('@/queries/proxiedPathQueries', () => ({
@@ -53,6 +54,7 @@ import CartList from '@/components/ui/Views/CartList';
 
 beforeEach(() => {
   navigate.mockClear();
+  clearCart.mockReset().mockResolvedValue(undefined);
 });
 
 describe('CartList', () => {
@@ -74,7 +76,7 @@ describe('CartList', () => {
     ).toBeInTheDocument();
   });
 
-  it('navigates to the embedded viewer when a View is created', async () => {
+  it('navigates to the embedded viewer and clears the cart when a View is created', async () => {
     cart = [cartA, cartB];
     const user = userEvent.setup();
     render(<CartList />);
@@ -82,5 +84,9 @@ describe('CartList', () => {
     await user.click(screen.getByRole('button', { name: /create view/i }));
 
     expect(navigate).toHaveBeenCalledWith('/view/rk1');
+    // CartList's datasets come from the persisted cart, so it - unlike
+    // SelectionBar/FileBrowser - is the one caller that should clear it
+    // after a successful checkout.
+    await waitFor(() => expect(clearCart).toHaveBeenCalled());
   });
 });
diff --git a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
index 95e26f74..ba9b154a 100644
--- a/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
+++ b/frontend/src/__tests__/componentTests/NeuroglancerView.test.tsx
@@ -111,7 +111,7 @@ describe('NeuroglancerView', () => {
     );
   });
 
-  it('copies the current page URL (not the external URL) when "Copy link" is clicked', async () => {
+  it('copies the canonical short link (not the full-state hash URL or the external URL) when "Copy link" is clicked', async () => {
     const user = userEvent.setup();
     useViewStateByReadKey.mockReturnValue({
       data: { title: 'My View', layers: [{ name: 'L0' }] },
@@ -120,7 +120,10 @@ describe('NeuroglancerView', () => {
     });
     render(<NeuroglancerView />);
     await user.click(screen.getByRole('button', { name: /copy link/i }));
-    expect(copyToClipboard).toHaveBeenCalledWith(window.location.href);
+    expect(copyToClipboard).toHaveBeenCalledWith(
+      `${window.location.origin}/view/rk1`
+    );
+    expect(copyToClipboard).not.toHaveBeenCalledWith(window.location.href);
     expect(copyToClipboard).not.toHaveBeenCalledWith(
       expect.stringContaining('https://ng.example/')
     );
diff --git a/frontend/src/__tests__/componentTests/SelectionBar.test.tsx b/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
index de2e1139..aa64c980 100644
--- a/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
+++ b/frontend/src/__tests__/componentTests/SelectionBar.test.tsx
@@ -6,6 +6,7 @@ import type { View } from '@/queries/viewQueries';
 
 const clearChecked = vi.fn();
 const addToCart = vi.fn().mockResolvedValue(undefined);
+const clearCart = vi.fn().mockResolvedValue(undefined);
 const navigate = vi.hoisted(() => vi.fn());
 const createdView: View = vi.hoisted(() => ({
   short_key: 'v1',
@@ -36,7 +37,7 @@ vi.mock('@/contexts/FileBrowserContext', () => ({
 }));
 
 vi.mock('@/contexts/CartContext', () => ({
-  useCartContext: () => ({ addToCart })
+  useCartContext: () => ({ addToCart, clearCart })
 }));
 
 vi.mock('@/components/ui/Views/CreateViewButton', () => ({
@@ -52,6 +53,7 @@ import SelectionBar from '@/components/ui/BrowsePage/SelectionBar';
 beforeEach(() => {
   clearChecked.mockClear();
   addToCart.mockClear();
+  clearCart.mockClear();
   navigate.mockClear();
   vi.mocked(toast.success).mockClear();
   vi.mocked(toast.error).mockClear();
@@ -90,7 +92,7 @@ describe('SelectionBar', () => {
     ).toBeInTheDocument();
   });
 
-  it('navigates to the embedded viewer when a View is created', async () => {
+  it('navigates to the embedded viewer when a View is created, without clearing the cart', async () => {
     const user = userEvent.setup();
     render(<SelectionBar />);
 
@@ -99,6 +101,10 @@ describe('SelectionBar', () => {
     );
 
     expect(navigate).toHaveBeenCalledWith('/view/rk1');
+    // Datasets here come from fileBrowserState.checkedFiles, not the cart -
+    // a View created from a file-browser selection must never wipe an
+    // unrelated Layer Cart.
+    expect(clearCart).not.toHaveBeenCalled();
   });
 
   it('clears the selection when Clear is clicked', async () => {
diff --git a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
index aca1ec00..85cca967 100644
--- a/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
+++ b/frontend/src/__tests__/componentTests/useCreateViewFlow.test.tsx
@@ -4,14 +4,10 @@ import userEvent from '@testing-library/user-event';
 import toast from 'react-hot-toast';
 
 const checkout = vi.fn();
-const clearCart = vi.fn();
 let automatic = true;
 vi.mock('@/hooks/useCartCheckout', () => ({
   useCartCheckout: () => ({ checkout })
 }));
-vi.mock('@/contexts/CartContext', () => ({
-  useCartContext: () => ({ clearCart })
-}));
 vi.mock('@/contexts/PreferencesContext', () => ({
   usePreferencesContext: () => ({
     areDataLinksAutomatic: automatic,
@@ -43,7 +39,6 @@ beforeEach(() => {
   checkout
     .mockReset()
     .mockResolvedValue({ short_key: 'v1', read_key: 'rk1', name: 'A' });
-  clearCart.mockReset().mockResolvedValue(undefined);
   automatic = true;
 });
 
@@ -58,7 +53,6 @@ describe('useCreateViewFlow', () => {
     });
 
     expect(checkout).not.toHaveBeenCalled();
-    expect(apiRef.current!.open).toBe(true);
 
     const input = await screen.findByRole('textbox', { name: /view name/i });
     expect(input).toHaveValue('A');
@@ -73,7 +67,14 @@ describe('useCreateViewFlow', () => {
     expect(onCreated).toHaveBeenCalledWith(
       expect.objectContaining({ read_key: 'rk1' })
     );
-    expect(clearCart).toHaveBeenCalled();
+    // Dialog closes on success; the hook does not own cart state, so it has
+    // nothing further to do here (see CartList/SelectionBar for cart
+    // clearing, which only happens where the cart was actually populated).
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('textbox', { name: /view name/i })
+      ).not.toBeInTheDocument()
+    );
   });
 
   it('opens the dialog with data-link consent copy when links are not automatic, and waits for Continue', async () => {
@@ -93,10 +94,9 @@ describe('useCreateViewFlow', () => {
     const user = userEvent.setup();
     await user.click(screen.getByRole('button', { name: /continue/i }));
     expect(checkout).toHaveBeenCalledWith(datasets, 'A');
-    expect(clearCart).toHaveBeenCalled();
   });
 
-  it('does not clear the cart when checkout fails', async () => {
+  it('keeps the dialog open and shows an error toast when checkout fails', async () => {
     checkout.mockReset().mockRejectedValue(new Error('checkout failed'));
     const apiRef: { current: FlowApi | null } = { current: null };
     render(<Harness apiRef={apiRef} />);
@@ -109,30 +109,9 @@ describe('useCreateViewFlow', () => {
     await user.click(screen.getByRole('button', { name: /^create$/i }));
 
     expect(checkout).toHaveBeenCalledWith(datasets, 'A');
-    expect(clearCart).not.toHaveBeenCalled();
-  });
-
-  it('still completes onCreated/navigate/dialog-close when checkout succeeds but clearCart rejects, without a "Checkout failed" toast', async () => {
-    clearCart.mockReset().mockRejectedValue(new Error('cart clear failed'));
-    const onCreated = vi.fn();
-    const apiRef: { current: FlowApi | null } = { current: null };
-    render(<Harness apiRef={apiRef} />);
-
-    act(() => {
-      apiRef.current!.startCreateView(datasets, 'A', onCreated);
-    });
-
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: /^create$/i }));
-
-    // The View was created successfully, so the success path must complete
-    // regardless of the cart-clear failure.
-    expect(onCreated).toHaveBeenCalledWith(
-      expect.objectContaining({ read_key: 'rk1' })
-    );
-    expect(apiRef.current!.open).toBe(false);
-    expect(toast.error).not.toHaveBeenCalledWith('Checkout failed');
-
-    await waitFor(() => expect(clearCart).toHaveBeenCalled());
+    expect(toast.error).toHaveBeenCalledWith('checkout failed');
+    expect(
+      screen.getByRole('textbox', { name: /view name/i })
+    ).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/NeuroglancerView.tsx b/frontend/src/components/NeuroglancerView.tsx
index 82c53d08..fe6b9fda 100644
--- a/frontend/src/components/NeuroglancerView.tsx
+++ b/frontend/src/components/NeuroglancerView.tsx
@@ -35,11 +35,11 @@ export default function NeuroglancerView() {
       return;
     }
     window.history.replaceState(
-      null,
+      window.history.state,
       '',
       '#!' + encodeURIComponent(JSON.stringify(ngState))
     );
-  }, [ngState, readKey]);
+  }, [ngState]);
 
   if (stateQuery.isPending) {
     return (
@@ -61,7 +61,8 @@ export default function NeuroglancerView() {
   const externalUrl = constructNeuroglancerUrl(ngState, baseUrl);
 
   const handleCopy = async () => {
-    const result = await copyToClipboard(window.location.href);
+    const shortLink = `${window.location.origin}/view/${readKey}`;
+    const result = await copyToClipboard(shortLink);
     if (result.success) {
       toast.success('Neuroglancer link copied');
     } else {
@@ -70,9 +71,9 @@ export default function NeuroglancerView() {
   };
 
   const handleFullscreen = () => {
-    // ponytail: native Fullscreen API on the container — the /view route is
-    // already chrome-less, so this just drops the top bar into the OS
-    // fullscreen; no custom fullscreen state machine.
+    // ponytail: native Fullscreen API on the container, deliberately scoped
+    // to this component (excluding the app navbar) rather than the whole
+    // route; no custom fullscreen state machine.
     void containerRef.current?.requestFullscreen?.();
   };
 
diff --git a/frontend/src/components/ui/Views/CartList.tsx b/frontend/src/components/ui/Views/CartList.tsx
index d4e84eea..8b5dd51b 100644
--- a/frontend/src/components/ui/Views/CartList.tsx
+++ b/frontend/src/components/ui/Views/CartList.tsx
@@ -93,7 +93,16 @@ export default function CartList() {
           datasets={cart}
           defaultName="New View"
           label="Create View"
-          onCreated={view => navigate(`/view/${view.read_key}`)}
+          onCreated={view => {
+            // Fire-and-forget: the View already exists, so a cart-clear
+            // failure (a separate network mutation) must not block
+            // navigation. Worst case is a stale cart item, which is
+            // low-stakes and independently retryable via "Clear cart".
+            clearCart().catch(() => {
+              toast.error('View created, but the cart could not be cleared');
+            });
+            navigate(`/view/${view.read_key}`);
+          }}
         />
         <FgButton onClick={() => void handleClearCart()} variant="ghost">
           Clear cart
diff --git a/frontend/src/hooks/useCreateViewFlow.tsx b/frontend/src/hooks/useCreateViewFlow.tsx
index 27f7c5cf..27ac1eba 100644
--- a/frontend/src/hooks/useCreateViewFlow.tsx
+++ b/frontend/src/hooks/useCreateViewFlow.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router';
 import type { ReactNode } from 'react';
 
 import { useCartCheckout } from '@/hooks/useCartCheckout';
-import { useCartContext } from '@/contexts/CartContext';
 import { usePreferencesContext } from '@/contexts/PreferencesContext';
 import { useAllProxiedPathsQuery } from '@/queries/proxiedPathQueries';
 import { datasetKey } from '@/utils/pathHandling';
@@ -25,7 +24,6 @@ type PendingRequest = {
 
 export function useCreateViewFlow() {
   const { checkout } = useCartCheckout();
-  const { clearCart } = useCartContext();
   const {
     areDataLinksAutomatic,
     dataLinkSubpathMode,
@@ -52,14 +50,6 @@ export function useCreateViewFlow() {
         navigate('/ngviews');
       }
       setRequest(null);
-      // Fire-and-forget: the View already exists, so a cart-clear failure
-      // (a separate network mutation) must never re-trigger "Checkout
-      // failed" or block navigation/dialog-close above. Worst case is a
-      // stale cart item, which is low-stakes and independently retryable
-      // via the manual "Clear cart" button.
-      clearCart().catch(() => {
-        toast.error('View created, but the cart could not be cleared');
-      });
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Checkout failed');
     } finally {
@@ -157,5 +147,5 @@ export function useCreateViewFlow() {
     </FgDialog>
   ) : null;
 
-  return { startCreateView, dialog, open, pending };
+  return { startCreateView, dialog, pending };
 }

From a4d5f22a54be7bd8934f7d072b8b5418621a8773 Mon Sep 17 00:00:00 2001
From: Allison Truhlar <truhlara@janelia.hhmi.org>
Date: Wed, 12 Aug 2026 16:15:45 -0400
Subject: [PATCH 20/20] refactor(views): drop dead pending/loading props on
 CreateViewButton's trigger

startCreateView always opens the dialog now (no more silent-immediate
checkout path), so the trigger button only unmounted while `open` was
true - exactly when `pending` could also be true. `disabled={disabled ||
pending}`, `loading={pending}`, and `loadingText` were unreachable, and
`open` existed on useCreateViewFlow's return solely to feed that check.
FgDialog is a modal overlay, so leaving the trigger always rendered is
safe - the dialog's own Create/Continue button already has a working
loading state.
---
 .../components/ui/Views/CreateViewButton.tsx   | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ui/Views/CreateViewButton.tsx b/frontend/src/components/ui/Views/CreateViewButton.tsx
index af0cec27..ab453d1f 100644
--- a/frontend/src/components/ui/Views/CreateViewButton.tsx
+++ b/frontend/src/components/ui/Views/CreateViewButton.tsx
@@ -18,20 +18,16 @@ export default function CreateViewButton({
   disabled = false,
   onCreated
 }: CreateViewButtonProps) {
-  const { startCreateView, dialog, open, pending } = useCreateViewFlow();
+  const { startCreateView, dialog } = useCreateViewFlow();
 
   return (
     <>
-      {!open ? (
-        <FgButton
-          disabled={disabled || pending}
-          loading={pending}
-          loadingText="Creating..."
-          onClick={() => startCreateView(datasets, defaultName, onCreated)}
-        >
-          {label}
-        </FgButton>
-      ) : null}
+      <FgButton
+        disabled={disabled}
+        onClick={() => startCreateView(datasets, defaultName, onCreated)}
+      >
+        {label}
+      </FgButton>
       {dialog}
     </>
   );