diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
index ca10e2a759e..6fb33bd717b 100644
--- a/lib/ui/src/containers/preview.tsx
+++ b/lib/ui/src/containers/preview.tsx
@@ -1,11 +1,13 @@
 import { PREVIEW_URL } from 'global';
 import React from 'react';
 
-import { State, Consumer, Combo, StoriesHash } from '@storybook/api';
+import { Consumer, Combo, StoriesHash, isRoot, isGroup, isStory } from '@storybook/api';
 
 import { Preview } from '../components/preview/preview';
 import { PreviewProps } from '../components/preview/PreviewProps';
 
+type Item = StoriesHash[keyof StoriesHash];
+
 const nonAlphanumSpace = /[^a-z0-9 ]/gi;
 const doubleSpace = /\s\s/gi;
 const replacer = (match: string) => ` ${match} `;
@@ -13,40 +15,46 @@ const replacer = (match: string) => ` ${match} `;
 const addExtraWhiteSpace = (input: string) =>
   input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' ');
 
-const getDescription = (storiesHash: StoriesHash, storyId: string) => {
-  const storyInfo = storiesHash[storyId];
-
-  if (storyInfo) {
-    // @ts-ignore
-    const { kind, name } = storyInfo;
-    return kind && name ? addExtraWhiteSpace(`${kind} - ${name}`) : '';
+const getDescription = (item: Item) => {
+  if (isRoot(item)) {
+    return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
+  }
+  if (isGroup(item)) {
+    return item.name ? `${item.name} ⋅ Storybook` : 'Storybook';
+  }
+  if (isStory(item)) {
+    const { kind, name } = item;
+    return kind && name ? addExtraWhiteSpace(`${kind} - ${name} ⋅ Storybook`) : 'Storybook';
   }
 
-  return '';
+  return 'Storybook';
 };
 
 const mapper = ({ api, state }: Combo) => {
   const { layout, location, customQueryParams, storiesHash, storyId } = state;
-  const { parameters } = storiesHash[storyId] || {};
+  const story = api.getData(storyId);
+  const parameters = story ? story.parameters : {};
+  const docsOnly = story && story.parameters ? !!story.parameters.docsOnly : false;
+
   return {
     api,
     options: layout,
-    description: getDescription(storiesHash, storyId),
+    description: getDescription(story),
     ...api.getUrlState(),
     queryParams: customQueryParams,
-    docsOnly: (parameters && parameters.docsOnly) as boolean,
+    docsOnly,
     location,
     parameters,
   };
 };
 
-function getBaseUrl(): string {
+const getBaseUrl = (): string => {
   try {
     return PREVIEW_URL || 'iframe.html';
   } catch (e) {
     return 'iframe.html';
   }
-}
+};
 
 const PreviewConnected = React.memo<{ id: string; withLoader: boolean }>(props => (
   <Consumer filter={mapper}>