@playpilot/tpi 3.1.0 → 3.2.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "3.1.0",
+	"version": "3.2.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api.ts

@@ -14,11 +14,10 @@ let pollTimeout: ReturnType<typeof setTimeout> | null = null
  * @param url URL of the given article
  * @param html HTML to be crawled
  * @param options
- * @param [options.automation] Enable automation, disable when inserting into editorial
  * @param [options.hash] unique key to identify the HTML
  * @param [options.params] Any rest params to include in the request body
  */
-export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { automation?: boolean; hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
+export async function fetchLinkInjections(url: string, html: string, { hash = stringToHash(html), params = {} }: { hash?: string; params?: object } = {}): Promise<LinkInjectionResponse> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
@@ -113,7 +112,6 @@ export async function saveLinkInjections(linkInjections: LinkInjection[], html:
   const response = await fetchLinkInjections(getFullUrlPath(), html, {
     params: {
       private_token: getAuthToken(),
-      automation_enabled: false,
       link_injections: newLinkInjections,
       text_selector: selector,
     },

package/src/lib/auth.ts

@@ -1,5 +1,7 @@
 import { getApiToken } from './api'
 import { apiBaseUrl } from './constants'
+import { TrackingEvent } from './enums/TrackingEvent'
+import { track } from './tracking'
 
 const cookieName = 'EncryptedToken'
 const urlParam = 'articleReplacementEditToken'
@@ -32,8 +34,11 @@ export async function authorize(href: string = window.location.href): Promise<bo
     setAuthCookie(authToken)
 
     return true
-  } catch(error) {
+  } catch(error: any) {
     console.error(error)
+    track(TrackingEvent.AuthFailed)
+  } finally {
+    removeAuthParamFromUrl()
   }
 
   return false
@@ -84,3 +89,10 @@ export function isEditorialModeEnabled(): boolean {
   const windowToken = window?.PlayPilotLinkInjections?.editorial_token
   return new URLSearchParams(window.location.search).get('playpilot-editorial-mode') === 'true' || !!windowToken
 }
+
+export function removeAuthParamFromUrl(): void {
+  const url = new URL(window.location.href)
+  url.searchParams.delete(urlParam)
+
+  window.history.replaceState({}, '', url)
+}

package/src/lib/constants.ts

@@ -1,2 +1,4 @@
 export const playPilotBaseUrl = 'https://www.playpilot.com'
 export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0.0'
+
+export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='

package/src/lib/enums/TrackingEvent.ts

@@ -17,4 +17,5 @@ export const TrackingEvent = Object.freeze({
   InjectionFailed: 'ali_injection_failed',
   TotalInjectionsCount: 'ali_injection_count',
   FetchingConfigFailed: 'ali_fetch_config_failed',
+  AuthFailed: 'ali_auth_failed',
 })

package/src/lib/linkInjection.ts

@@ -97,14 +97,15 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
   // This is to filter out injections that can't be injected anyway.
-  const fullText = elements.map(element => element.innerText).join(' ')
+  const fullText = cleanPhrase(elements.map(element => element.innerText).join(' '))
 
   const validInjections = filterInvalidInTextInjections(mergedInjections)
   const foundInjections = validInjections.filter(i => {
-    return cleanPhrase(fullText).includes(cleanPhrase(i.sentence))
+    return fullText.includes(cleanPhrase(i.sentence))
   })
 
   const ranges: LinkInjectionRanges = {}
+  const failedMessages: Record<string, string> = {}
 
   for (const injection of foundInjections) {
     const elementIndex = elements.findIndex(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
@@ -113,8 +114,18 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     if (!element) continue
 
     const nodeContainingText = findTextNodeContaining(injection.title, element, ['A'])
+
     // Ignore if the found injection has no node or if it is inside a link.
-    if (!nodeContainingText || isNodeInLink(nodeContainingText)) continue
+    if (!nodeContainingText?.nodeValue || isNodeInLink(nodeContainingText)) {
+      // We check once more where the text was found, this time without ignoring links
+      // so we can determine if the failure was due to it being in a link
+      const linkNodeContainingText = findTextNodeContaining(injection.title, element)
+      if (linkNodeContainingText && isNodeInLink(linkNodeContainingText)) {
+        failedMessages[injection.key] = 'Given text is already inside of a link.'
+      }
+
+      continue
+    }
 
     // Create a wrapper in which the link will be placed. This wrapper exists as a parent for the popover
     // so that it is not directly inside of the link.
@@ -131,9 +142,15 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     linkWrapperElement.insertAdjacentElement('beforeend', linkElement)
 
     // Replace starting from the end of the previously injected link, making sure injections with the same or overlapping
-    // phrases can still be injected.
+    // phrases can still be injected. Additionally we check the index of where the node value starts. This can differentiate from
+    // the actual start if it was partially matched with manual injections. If that martial match contains a phrase that also
+    // occurs in the full sentence before it, it would incorrectly match against that. If that happens to be a link already,
+    // it would break that link with newly inserted HTML.
     const startingIndex = getLargestValueInArray(Object.values(ranges).filter(r => r.elementIndex === elementIndex).map(r => r.to))
-    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, startingIndex)
+    const valueIndex = element.innerHTML.indexOf(nodeContainingText.nodeValue)
+    const highestIndex = Math.max(startingIndex, valueIndex, 0)
+
+    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkWrapperElement.outerHTML, highestIndex)
 
     const from = element.innerHTML.indexOf(linkWrapperElement.outerHTML)
 
@@ -150,18 +167,23 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
   if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
 
-  const sortedInjections = sortLinkInjectionsByRange(mergedInjections, ranges)
-
-  return sortedInjections.filter(i => i.title_details).map((injection, index) => {
-    const failed = !injection.inactive && !injection.after_article && !document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+  return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     // Favour manual injections over AI injections
     const duplicate = injection.duplicate ?? (!injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections))
 
+    const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
+    const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.after_article && !matchingElement
+    const failedMessage =
+      !failed ? '' :
+        failedMessages[injection.key] ||
+        (!fullText.includes(cleanPhrase(injection.sentence)) ? 'Given sentence was not found in the article.' : 'The link failed to inject for unknown reasons.')
+
     return {
       ...injection,
       inactive: injection.inactive ?? false,
       duplicate,
       failed,
+      failed_message: failedMessage
     }
   })
 }
@@ -325,32 +347,11 @@ export function clearLinkInjection(key: string): void {
   if (element) element.outerHTML = element.textContent || ''
 }
 
-/**
- * Sort injections by where they were inserted. First by their element index, second by where in the element the
- * injection was injected. Injections without range (after article injections or failed injection) go last.
- */
-export function sortLinkInjectionsByRange(injections: LinkInjection[], ranges: LinkInjectionRanges): LinkInjection[] {
-  return injections.sort((a, b) => {
-    const rangeA = ranges[a.key]
-    const rangeB = ranges[b.key]
-
-    if (!rangeA && rangeB) return 1
-    if (rangeA && !rangeB) return -1
-    if (!rangeA && !rangeB) return 0
-
-    if (rangeA?.elementIndex !== rangeB?.elementIndex) {
-      return (rangeA?.elementIndex || 0) - (rangeB?.elementIndex || 0)
-    }
-
-    return (rangeA?.from || 0) - (rangeB?.from || 0)
-  })
-}
-
 /**
  * Merge different injection types
  */
 export function mergeInjectionTypes({ aiInjections, manualInjections }: LinkInjectionTypes): LinkInjection[] {
-  return [...aiInjections, ...manualInjections.map(i => ({ ...i, manual: true }))]
+  return [...manualInjections.map(i => ({ ...i, manual: true })), ...aiInjections]
 }
 
 /**
@@ -367,7 +368,16 @@ export function separateLinkInjectionTypes(injections: LinkInjection[]): LinkInj
  * Returns whether or not an injection would be valid for any sort of injection, text or after_article
  */
 export function isValidInjection(injection: LinkInjection): boolean {
-  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details
+  return !injection.inactive && !injection.removed && !injection.duplicate && !!injection.title_details && isValidPlaylinkType(injection)
+}
+
+/**
+ * An injection can have be of various playlink types, when all are false equivalent, the link is not valid.
+ * It should be treated similar to an inactive playlink in this case.
+ */
+export function isValidPlaylinkType(injection: LinkInjection): boolean {
+  if (injection.in_text || injection.in_text === undefined) return true
+  return !!injection.after_article
 }
 
 /**

package/src/lib/scss/global.scss

@@ -2,13 +2,13 @@
 
 [data-playpilot-injection-key] {
   position: relative;
+}
 
-  &.injection-highlight {
-    outline: margin(0.25) solid var(--playpilot-primary) !important;
-    outline-offset: margin(0.5) !important;
-    border-radius: margin(0.05);
-    scroll-margin: margin(5);
-  }
+.playpilot-injection-highlight {
+  outline: margin(0.25) solid var(--playpilot-primary) !important;
+  outline-offset: margin(0.5) !important;
+  border-radius: margin(0.05);
+  scroll-margin: margin(5);
 }
 
 .playpilot-styled-scrollbar {

package/src/lib/scss/variables.scss

@@ -19,4 +19,6 @@
     #{margin(0.1) margin(0.1) margin(0.75)} rgba(0, 0, 0, 0.25);
   --playpilot-error: #ea5a5a;
   --playpilot-error-dark: #442533;
+  --playpilot-warning: #f7c74e;
+  --playpilot-warning-dark: #413c23;
 }

package/src/lib/stores/organization.ts

@@ -0,0 +1,4 @@
+import { writable, type Writable } from "svelte/store"
+
+export const currentOrganizationSid: Writable<string | null> = writable(null)
+export const currentDomainSid: Writable<string | null> = writable(null)

package/src/lib/tracking.ts

@@ -1,3 +1,5 @@
+import { get } from "svelte/store"
+import { currentDomainSid, currentOrganizationSid } from "./stores/organization"
 import type { TitleData } from "./types/title"
 
 const baseUrl = 'https://insights.playpilot.net'
@@ -9,7 +11,7 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [title] Title related to the event
  * @param [payload] Any data that will be included with the event
  */
-export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number> = {}): Promise<void> {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number | null> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {
@@ -21,6 +23,8 @@ export async function track(event: string, title: TitleData | null = null, paylo
   }
 
   payload.url = window.location.href
+  payload.organization_sid = get(currentOrganizationSid)
+  payload.domain_sid = get(currentDomainSid)
 
   fetch(baseUrl, {
     headers,
@@ -32,3 +36,12 @@ export async function track(event: string, title: TitleData | null = null, paylo
     })),
   })
 }
+
+/**
+ * Set the sid of the organization and domain to a store..
+ * These are saved for tracking purposes and currently serve no other function.
+ */
+export function setTrackingSids({ organizationSid = null, domainSid = null }: { organizationSid?: string | null, domainSid?: string | null }): void {
+  currentOrganizationSid.set(organizationSid || null)
+  currentDomainSid.set(domainSid || null)
+}

package/src/lib/types/injection.d.ts

@@ -9,6 +9,7 @@ export type LinkInjection = {
   title_details?: TitleData
   inactive?: boolean
   failed?: boolean
+  failed_message?: string
   in_text?: boolean
   after_article?: boolean
   after_article_style?: 'modal_button' | 'playlinks' | null
@@ -27,6 +28,8 @@ export type LinkInjectionResponse = {
   ai_running: boolean
   ai_injections: LinkInjection[] | null
   link_injections: LinkInjection[] | null
+  organization_sid?: string
+  domain_sid?: string
 }
 
 export type LinkInjectionTypes = {

package/src/routes/+layout.svelte

@@ -27,12 +27,16 @@
       <h1 use:noClass>Some heading</h1>
       <time datetime="14:00">1 hour ago</time>
       <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
-      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him Love Hurts in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
       <p use:noClass><strong use:noClass>Jason Momoa</strong> (”Aquaman”), <strong use:noClass>Jack Black</strong> (”Nacho Libre”) och <strong use:noClass>Jennifer Coolidge</strong> (”The White Lotus”) medverkar i den <strong use:noClass>Jared Hess</strong>-regisserade (”Napolen Dynamite”) filmen. Filmen följer fyra utbölingar som via en magisk portal sugs in i en värld där allt är kubformat. För att komma hem igen måste de övervinna den färgstarka världen.</p>
 
+      <p use:noClass>
+        Following their post-credits scene in <a use:noClass href="/">John Wick</a>, in a new John Wick spinoff.
+      </p>
+
       <ul use:noClass>
         <li use:noClass><strong use:noClass>Winner:</strong> The Zone of Interest</li>
-        <li use:noClass>Oppenheimer</li>
+        <li use:noClass>Oppenheimer and Oppenheimer and Oppenheimer, and Oppenheimer</li>
         <li use:noClass>Past Lives</li>
         <li use:noClass>Anatomy of a Fall</li>
         <li use:noClass>Killers of the Flower Moon</li>

package/src/routes/+page.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
-  import { track } from '$lib/tracking'
+  import { setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -36,9 +36,10 @@
   onMount(() => {
     if (isCrawler()) return
 
-    track(TrackingEvent.ArticlePageView)
-
-    initialize()
+    (async () => {
+      await initialize()
+      track(TrackingEvent.ArticlePageView)
+    })()
 
     return () => clearLinkInjections()
   })
@@ -68,7 +69,10 @@
     // [TODO] TEMP: Only try once for editorial as well
     response = await pollLinkInjections(url, htmlString, { maxTries: 1 })
 
-    inject({ aiInjections, manualInjections })
+    if (response) {
+      setTrackingSids({ organizationSid: response.organization_sid, domainSid: response.domain_sid })
+      inject({ aiInjections, manualInjections })
+    }
 
     loading = false
 
@@ -119,7 +123,14 @@
   {/if}
 
   {#if isEditorialMode && authorized}
-    <Editor bind:linkInjections bind:this={editor} {htmlString} {loading} aiRunning={response?.ai_running && response?.automation_enabled} />
+    <Editor
+      bind:linkInjections
+      bind:this={editor}
+      {htmlString}
+      {loading}
+      aiRunning={response?.ai_running && response?.automation_enabled}
+      automationEnabled={response?.automation_enabled}
+      injectionsEnabled={response?.injections_enabled} />
   {/if}
 
   {#if activeInjection && activeInjection.title_details}

package/src/routes/components/Editorial/AIIndicator.svelte

@@ -6,16 +6,17 @@
     // eslint-disable-next-line no-unused-vars
     onadd: (injections: LinkInjection[]) => void
     /** Used to guesstimate the load times. */
-    htmlString?: string
+    htmlString?: string,
+    automationEnabled?: boolean,
   }
 
-  const { onadd, htmlString = '' }: Props = $props()
+  const { onadd, htmlString = '', automationEnabled = false }: Props = $props()
 
   // Guesstimate AI load times based on the given text length.
   // The value will always be between 1 and 10 minutes.
   const fakeLoadTimes = $derived(Math.min(Math.max(htmlString.length * 30, 60000), 600000))
 
-  let running = $state(true)
+  let running = $state(automationEnabled)
   let injectionsToBeInserted: LinkInjection[] = $state([])
   let dismissed = $state(false)
 
@@ -38,7 +39,9 @@
       </div>
 
       <div>
-        {#if running}
+        {#if !automationEnabled}
+          <strong>AI processing is disabled.</strong> Enable AI from the <a href="https://partner.playpilot.net">Partner Portal</a>
+        {:else if running}
           AI links are currently processing. This can take several minutes.<br>
           You can add manual links while this is ongoing.
         {:else if injectionsToBeInserted?.length}
@@ -70,6 +73,10 @@
 {/if}
 
 <style lang="scss">
+  a {
+    color: currentColor;
+  }
+
   .ai-indicator {
     position: relative;
     margin: 0 margin(0.5);
@@ -139,6 +146,7 @@
     background: transparent;
     color: var(--playpilot-green);
     font-family: var(--playpilot-font-family);
+    line-height: 1.5;
     cursor: pointer;
 
     &:hover {

package/src/routes/components/Editorial/Alert.svelte

@@ -2,13 +2,14 @@
   import type { Snippet } from 'svelte'
 
   interface Props {
+    type?: 'error' | 'warning'
     children: Snippet
   }
 
-  const { children }: Props = $props()
+  const { type = 'error', children }: Props = $props()
 </script>
 
-<div class="alert">
+<div class="alert {type}">
   {@render children()}
 </div>
 
@@ -19,5 +20,14 @@
     border: 1px solid var(--playpilot-error);
     background: var(--playpilot-error-dark);
     font-size: margin(0.75);
+
+    &.warning {
+      border-color: var(--playpilot-warning);
+      background: var(--playpilot-warning-dark);
+    }
+
+    :global(a) {
+      color: currentColor;
+    }
   }
 </style>

package/src/routes/components/Editorial/Editor.svelte

@@ -19,10 +19,19 @@
     linkInjections: LinkInjection[],
     htmlString?: string,
     loading?: boolean,
-    aiRunning?: boolean
+    aiRunning?: boolean,
+    injectionsEnabled?: boolean,
+    automationEnabled?: boolean,
   }
 
-  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false }: Props = $props()
+  let {
+    linkInjections = $bindable(),
+    htmlString = '',
+    loading = false,
+    aiRunning = false,
+    injectionsEnabled = false,
+    automationEnabled = false,
+  }: Props = $props()
 
   const editorPositionKey = 'editor-position'
   const editorHeightKey = 'editor-height'
@@ -38,7 +47,7 @@
   let aIIndicator = $state()
 
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
-  const hasChanged = $derived(initialStateString !== linkInjectionsString)
+  const hasChanged = $derived(initialStateString && initialStateString !== linkInjectionsString)
   // Filter out injections without title_details, injections that are removed, duplicate, or are AI injections that failed to inject
   const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate && (i.manual || (!i.manual && !i.failed))))
   const sortedInjections = $derived(sortInjections(filteredInjections))
@@ -47,7 +56,7 @@
     if (loading) return
 
     untrack(() => {
-      initialStateString = linkInjectionsString
+      requestAnimationFrame(() => initialStateString = linkInjectionsString)
       trackInjectionsCount()
     })
   })
@@ -137,19 +146,19 @@
 </script>
 
 <section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
-  <header class="header">
-    {#if editorElement}
-      {#if !loading}
-        <div class="handle">
-          <ResizeHandle element={editorElement} {height} onchange={(height) => saveLocalStorage(editorHeightKey, JSON.stringify(height))} />
-        </div>
-      {/if}
+  {#if editorElement && !loading}
+    <div class="handles">
+      <div class="handle">
+        <ResizeHandle element={editorElement} {height} onchange={(height) => saveLocalStorage(editorHeightKey, JSON.stringify(height))} />
+      </div>
 
       <div class="handle">
         <DragHandle element={editorElement} {position} limit={{ x: 16, y: 16 }} onchange={(position) => saveLocalStorage(editorPositionKey, JSON.stringify(position))} />
       </div>
-    {/if}
+    </div>
+  {/if}
 
+  <header class="header">
     <h1>Playlinks</h1>
 
     {#if loading}
@@ -165,11 +174,20 @@
     {/if}
   </header>
 
-  {#if !loading && aiRunning}
-    <AIIndicator {htmlString} bind:this={aIIndicator} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
-  {/if}
-
   {#if !loading}
+    {#if !injectionsEnabled}
+      <div class="alert">
+        <Alert type="warning">
+          <strong>Playlinks are currently not published.</strong> Visitors to this page will not see any of the injected links.
+          Publish playlinks from the <a href="https://partner.playpilot.net">Partner Portal</a>
+        </Alert>
+      </div>
+    {/if}
+
+    {#if aiRunning || !automationEnabled}
+      <AIIndicator {htmlString} bind:this={aIIndicator} {automationEnabled} onadd={(newInjections) => newInjections.forEach(i => linkInjections.push(i))} />
+    {/if}
+
     {#if hasError}
       <div class="error" transition:slide|global={{ duration: 150 }}>
         <Alert>Something went wrong, check your links below.</Alert>
@@ -225,7 +243,7 @@
     right: margin(1);
     width: 100%;
     max-width: margin(22);
-    height: min(50vh, margin(50));
+    height: min(70vh, margin(40));
     min-height: 10rem;
     margin: 0;
     padding: margin(1);
@@ -254,6 +272,13 @@
     font-size: margin(0.85);
   }
 
+  .handles {
+    z-index: 20;
+    position: sticky;
+    top: margin(-1);
+    margin: margin(-1) margin(-1) 0;
+  }
+
   .handle {
     opacity: 0;
     transition: opacity 150ms;
@@ -264,10 +289,8 @@
   }
 
   .header {
+    @extend .handles;
     z-index: 5;
-    position: sticky;
-    top: margin(-1);
-    margin: margin(-1) margin(-1) 0;
     padding: margin(1) margin(1) margin(1) margin(1.5);
     border: 0;
     background: var(--playpilot-dark);
@@ -340,6 +363,10 @@
     margin-top: margin(0.5);
   }
 
+  .alert {
+    margin: 0 margin(0.5) margin(0.5);
+  }
+
   .panel {
     z-index: 10;
     position: absolute;