obi-sdk 0.4.3 → 0.5.0

package/dist/modular/chunks/{obi-widget-ad91b91a.js → obi-widget-3bb30929.js}

@@ -524,7 +524,7 @@ class ObiClient {
     return this.client;
   }
 }
-const DEFAULT_API_BASE_URL = "https://obi.getcor.io/api";
+const DEFAULT_API_BASE_URL = "https://app.coragents.ai/api";
 class ObiSession {
   constructor({ sessionId, apiBaseUrl }) {
     this.currentState = SDKState.READY;
@@ -10045,6 +10045,96 @@ const STORAGE_KEYS = {
   SESSION_DATA: "session_data"
 };
 const storage = new StorageManager("io.obi.widget");
+const ORIGINAL_PRIMARY_COLOR = "#a10fff";
+function hexToHsl(hex) {
+  hex = hex.replace(/^#/, "");
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex color format: ${hex}`);
+  }
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  const r2 = parseInt(hex.slice(0, 2), 16) / 255;
+  const g2 = parseInt(hex.slice(2, 4), 16) / 255;
+  const b2 = parseInt(hex.slice(4, 6), 16) / 255;
+  const max = Math.max(r2, g2, b2);
+  const min = Math.min(r2, g2, b2);
+  let h2, s2, l2 = (max + min) / 2;
+  if (max === min) {
+    h2 = s2 = 0;
+  } else {
+    const d2 = max - min;
+    s2 = l2 > 0.5 ? d2 / (2 - max - min) : d2 / (max + min);
+    switch (max) {
+      case r2:
+        h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
+        break;
+      case g2:
+        h2 = (b2 - r2) / d2 + 2;
+        break;
+      case b2:
+        h2 = (r2 - g2) / d2 + 4;
+        break;
+      default:
+        h2 = 0;
+    }
+    h2 /= 6;
+  }
+  return { h: h2 * 360, s: s2 * 100, l: l2 * 100 };
+}
+function hslToHex(h2, s2, l2) {
+  h2 = h2 / 360;
+  s2 = s2 / 100;
+  l2 = l2 / 100;
+  const hue2rgb2 = (p2, q, t2) => {
+    if (t2 < 0)
+      t2 += 1;
+    if (t2 > 1)
+      t2 -= 1;
+    if (t2 < 1 / 6)
+      return p2 + (q - p2) * 6 * t2;
+    if (t2 < 1 / 2)
+      return q;
+    if (t2 < 2 / 3)
+      return p2 + (q - p2) * (2 / 3 - t2) * 6;
+    return p2;
+  };
+  let r2, g2, b2;
+  if (s2 === 0) {
+    r2 = g2 = b2 = l2;
+  } else {
+    const q = l2 < 0.5 ? l2 * (1 + s2) : l2 + s2 - l2 * s2;
+    const p2 = 2 * l2 - q;
+    r2 = hue2rgb2(p2, q, h2 + 1 / 3);
+    g2 = hue2rgb2(p2, q, h2);
+    b2 = hue2rgb2(p2, q, h2 - 1 / 3);
+  }
+  const toHex = (c2) => {
+    const hex = Math.round(c2 * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r2)}${toHex(g2)}${toHex(b2)}`;
+}
+function generateSelectedColor(currentPrimaryColor, designedSelectedColor) {
+  try {
+    const originalPrimaryHsl = hexToHsl(ORIGINAL_PRIMARY_COLOR);
+    const designedSelectedHsl = hexToHsl(designedSelectedColor);
+    const hueDelta = (designedSelectedHsl.h - originalPrimaryHsl.h + 360) % 360;
+    const adjustedHueDelta = hueDelta > 180 ? hueDelta - 360 : hueDelta;
+    const saturationDelta = designedSelectedHsl.s - originalPrimaryHsl.s;
+    const lightnessDelta = designedSelectedHsl.l - originalPrimaryHsl.l;
+    const currentPrimaryHsl = hexToHsl(currentPrimaryColor);
+    const selectedHsl = {
+      h: (currentPrimaryHsl.h + adjustedHueDelta + 360) % 360,
+      s: Math.max(0, Math.min(100, currentPrimaryHsl.s + saturationDelta)),
+      l: Math.max(0, Math.min(100, currentPrimaryHsl.l + lightnessDelta))
+    };
+    return hslToHex(selectedHsl.h, selectedHsl.s, selectedHsl.l);
+  } catch (error) {
+    console.warn("Failed to generate selected color, using fallback:", error);
+    return designedSelectedColor;
+  }
+}
 var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$7 = (decorators, target, key, kind) => {
@@ -10266,7 +10356,7 @@ NavigationBar.styles = i$4`
     :host {
       display: flex;
       position: absolute;
-      z-index: 10000;
+      z-index: 2147483647;
       width: 40px;
       transition: all 0.2s ease-in-out;
       opacity: 1;
@@ -10325,12 +10415,18 @@ class Course extends i$1 {
     this.id = "";
     this.name = "";
     this.description = "";
-    this.imageSrc = "";
+    this.duration = 10;
+    this.selected = false;
   }
   handleClick() {
     this.dispatchEvent(
-      new CustomEvent("course-select", {
-        detail: { id: this.id, name: this.name, description: this.description },
+      new CustomEvent("course-card-click", {
+        detail: {
+          id: this.id,
+          name: this.name,
+          description: this.description,
+          duration: this.duration
+        },
         bubbles: true,
         composed: true
       })
@@ -10338,9 +10434,11 @@ class Course extends i$1 {
   }
   render() {
     return x`
-      <div class="course-container" @click=${this.handleClick}>
-        <img src=${this.imageSrc} alt="Course Preview" class="course-image" />
-        <h2 class="course-title">${this.name}</h2>
+      <div class="course-container ${this.selected ? "selected" : ""}" @click=${this.handleClick}>
+        <div class="header-row">
+          <h2 class="course-title">${this.name}</h2>
+          <span class="duration">~${this.duration} mins</span>
+        </div>
         ${this.description ? x`<p class="course-description">${this.description}</p>` : ""}
       </div>
     `;
@@ -10352,12 +10450,19 @@ Course.styles = i$4`
     }
 
     .course-container {
-      padding: 16px 12px;
-      gap: 12px;
-      border-radius: 4px;
-      border: 1px solid #e5e7eb;
+      display: flex;
+      padding: 20px;
+      align-items: flex-start;
+      gap: 8px;
+      height: 180px;
+      border-radius: 6px;
+      border: 1px solid rgba(0, 0, 0, 0.6);
+      background: #fff;
       cursor: pointer;
       transition: all 0.2s;
+      flex-direction: column;
+      box-sizing: border-box;
+      overflow: hidden;
     }
 
     .course-container:hover {
@@ -10370,26 +10475,73 @@ Course.styles = i$4`
       transform: scale(0.98);
     }
 
-    .course-image {
-      max-height: 160px;
-      border-radius: 2px;
-      border: 1px solid #e5e7eb;
-      object-fit: cover;
-      width: 100%;
-      margin-bottom: 12px;
+    .course-container.selected {
+      border-radius: 6px;
+      border: 1px solid var(--obi-course-selected, #c76cff);
+      background: var(--obi-course-selected-bg, #fbf3ff);
+    }
+
+    .course-container.selected:hover {
+      background: var(--obi-course-selected-bg, #fbf3ff);
+    }
+
+    .header-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      align-self: stretch;
+      flex-shrink: 0;
+      text-align: left;
     }
 
     .course-title {
-      font-size: 14px;
-      font-weight: bold;
+      color: #000;
+      font-family: Satoshi;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 100%; /* 20px */
+      letter-spacing: -0.2px;
       margin: 0;
-      margin-bottom: 12px;
     }
 
-    .course-description {
+    .duration {
+      display: flex;
+      padding: 4px 12px;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      border-radius: 9999px;
+      background: #f5f3ff;
+      color: #000;
+      font-family: Satoshi;
       font-size: 14px;
-      color: #71717a;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 100%; /* 14px */
+      letter-spacing: -0.14px;
+      flex-shrink: 0;
+    }
+
+    .course-container.selected .duration {
+      background: #fff;
+    }
+
+    .course-description {
+      flex: 1 0 0;
+      color: rgba(0, 0, 0, 0.6);
+      font-family: Satoshi;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 22.4px */
+      letter-spacing: -0.16px;
       margin: 0;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      text-align: left;
     }
   `;
 __decorateClass$5([
@@ -10402,12 +10554,16 @@ __decorateClass$5([
   n$2({ type: String })
 ], Course.prototype, "description", 2);
 __decorateClass$5([
-  n$2({ type: String })
-], Course.prototype, "imageSrc", 2);
+  n$2({ type: Number })
+], Course.prototype, "duration", 2);
+__decorateClass$5([
+  n$2({ type: Boolean })
+], Course.prototype, "selected", 2);
 class CourseList extends i$1 {
   constructor() {
     super(...arguments);
     this.courses = [];
+    this.selectedCourseId = null;
     this.loading = false;
     this.error = "";
   }
@@ -10421,19 +10577,20 @@ class CourseList extends i$1 {
     if (!this.courses || this.courses.length === 0) {
       return x`<div class="empty">No courses available</div>`;
     }
-    const gridClass = this.courses.length === 1 ? "grid-cols-1" : this.courses.length === 2 ? "grid-cols-2" : "grid-cols-3";
     return x`
-      <div class="course-grid ${gridClass}">
-        ${this.courses.map(
-      (course) => x`
+      <div class="course-grid">
+        ${this.courses.map((course) => {
+      const isSelected = course.id === this.selectedCourseId;
+      return x`
             <obi-course
               id=${course.id}
               name=${course.name}
               description=${course.description || ""}
-              imageSrc=${course.imageSrc}
+              duration=${course.duration}
+              ?selected=${isSelected}
             ></obi-course>
-          `
-    )}
+          `;
+    })}
       </div>
     `;
   }
@@ -10445,20 +10602,17 @@ CourseList.styles = i$4`
 
     .course-grid {
       display: grid;
-      gap: 12px;
-      margin-top: 24px;
-    }
-
-    .course-grid.grid-cols-1 {
-      grid-template-columns: 1fr;
-    }
-
-    .course-grid.grid-cols-2 {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 4px;
+      padding: 12px 0px;
+      flex: 1 0 0;
+      align-self: stretch;
     }
 
-    .course-grid.grid-cols-3 {
-      grid-template-columns: 1fr 1fr 1fr;
+    @media (max-width: 767px) {
+      .course-grid {
+        grid-template-columns: 1fr;
+      }
     }
 
     .loading,
@@ -10477,6 +10631,9 @@ CourseList.styles = i$4`
 __decorateClass$5([
   n$2({ type: Array })
 ], CourseList.prototype, "courses", 2);
+__decorateClass$5([
+  n$2({ type: String })
+], CourseList.prototype, "selectedCourseId", 2);
 __decorateClass$5([
   n$2({ type: Boolean })
 ], CourseList.prototype, "loading", 2);
@@ -10509,12 +10666,25 @@ class CourseModal extends i$1 {
     this.error = "";
     this.apiKey = "";
     this.apiBaseUrl = "";
+    this.selectedCourse = null;
   }
   handleClose() {
     if (this.onClose) {
       this.onClose();
     }
   }
+  handleGetStarted() {
+    if (this.selectedCourse) {
+      this.dispatchEvent(
+        new CustomEvent("course-select", {
+          detail: this.selectedCourse,
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.onClose?.();
+    }
+  }
   async fetchCourses() {
     try {
       this.loading = true;
@@ -10524,7 +10694,7 @@ class CourseModal extends i$1 {
         id: session.uuid,
         name: session.onboarding_plan.name,
         description: session.onboarding_plan.description,
-        imageSrc: session.onboarding_plan.screen_url || "https://corproductionsydney-storagebucket5cb7c8ea-atg4gmftc6sk.s3.amazonaws.com/static/generic-course.png"
+        duration: session.onboarding_plan.duration
       }));
       const filteredCourses = mappedCourses.filter((course) => !!course.name);
       this.courses = [...filteredCourses];
@@ -10537,6 +10707,10 @@ class CourseModal extends i$1 {
       this.requestUpdate();
     }
   }
+  handleCourseCardClick(event) {
+    const { id, name, description, duration: duration2 } = event.detail;
+    this.selectedCourse = { id, name, description, duration: duration2 };
+  }
   connectedCallback() {
     super.connectedCallback();
     if (window.obiWidgetConfig?.apiKey) {
@@ -10552,19 +10726,70 @@ class CourseModal extends i$1 {
   }
   render() {
     return x`
-      <div class="backdrop" @click=${this.handleClose}></div>
+      <div class="backdrop"></div>
       <div class="container">
-        <button class="close-button" @click=${this.handleClose}>×</button>
         <div class="header">
-          <h1>Give Obi a try!</h1>
-          <p class="subtitle">Pick a tour, share your screen, and Obi will take it from there.</p>
+          <div class="icon">${obiIcon}</div>
+          <div class="title-section">
+            <h1>Give Obi a try!</h1>
+            <p class="subtitle">Pick a tour, share your screen, and Obi will take it from there.</p>
+          </div>
+          <button class="close-button" aria-label="Close course modal" @click=${this.handleClose}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M18 6L6 18M6 6L18 18"
+                stroke="black"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class="course-list-wrapper">
+          <obi-course-list
+            .courses=${this.courses}
+            .selectedCourseId=${this.selectedCourse?.id || ""}
+            .loading=${this.loading}
+            .error=${this.error}
+            @course-card-click=${this.handleCourseCardClick}
+          ></obi-course-list>
         </div>
 
-        <obi-course-list
-          .courses=${this.courses}
-          .loading=${this.loading}
-          .error=${this.error}
-        ></obi-course-list>
+        <div class="footer">
+          <button
+            class="footer-button"
+            @click=${this.handleGetStarted}
+            ?disabled=${!this.selectedCourse}
+          >
+            <span>Get started</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="17"
+              height="16"
+              viewBox="0 0 17 16"
+              fill="none"
+            >
+              <path
+                d="M3.83325 8.00065H13.1666M13.1666 8.00065L8.49992 3.33398M13.1666 8.00065L8.49992 12.6673"
+                stroke=${this.selectedCourse ? "#FAFAFA" : "#999"}
+                stroke-width="1.33"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <p class="footer-text">
+            Sessions are securely recorded for quality improvement purposes.
+          </p>
+        </div>
       </div>
     `;
   }
@@ -10587,23 +10812,42 @@ CourseModal.styles = i$4`
     }
 
     .container {
+      /* Positioning & Sizing */
       position: fixed;
-      background-color: white;
-      color: black;
-      border: 1px solid #e5e7eb;
-      width: 640px;
-      max-height: 80vh;
-      overflow-y: auto;
-      padding: 48px;
-      gap: 12px;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      border-radius: 4px;
+      width: 90%;
+      max-width: 1200px;
+      max-height: 80vh;
       z-index: 50;
+      text-align: center;
+      color: black;
+
+      /* Layout styles */
       display: flex;
+      padding: 32px;
       flex-direction: column;
-      text-align: center;
+      align-items: center;
+      gap: 24px;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      /* Appearance styles */
+      border-radius: 12px;
+      background: #fafafa;
+
+      /* shadow/lg */
+      box-shadow:
+        0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .course-list-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      width: 100%;
+      min-height: 0;
     }
 
     .container:hover {
@@ -10625,32 +10869,122 @@ CourseModal.styles = i$4`
     }
 
     .header {
-      margin-bottom: 24px;
-      text-align: center;
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      width: 100%;
+      text-align: left;
+    }
+
+    .icon {
+      display: flex;
+      width: 56px;
+      height: 56px;
+      padding: 12px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 12px;
+      border: 1px solid var(--obi-primary, #a10fff);
+      background: var(--obi-primary, #a10fff);
+      box-sizing: border-box;
+    }
+
+    .icon img {
+      width: 32px;
+      height: 32px;
+      color: white;
+      fill: #fff;
+    }
+
+    .title-section {
+      align-self: stretch;
+      flex: 1;
     }
 
     h1 {
+      color: #18181b;
+      font-family: Satoshi;
       font-size: 32px;
+      font-style: normal;
       font-weight: 700;
+      line-height: 90%; /* 28.8px */
+      letter-spacing: -0.96px;
       margin: 0;
       margin-bottom: 8px;
     }
 
     .subtitle {
+      color: #18181b;
+      font-family: Satoshi;
       font-size: 20px;
-      color: rgb(113 113 122 / 1);
+      font-style: normal;
+      font-weight: 500;
+      line-height: 90%; /* 18px */
+      letter-spacing: -0.6px;
       margin: 0;
     }
 
     .close-button {
-      position: absolute;
-      top: 16px;
-      right: 16px;
+      width: 24px;
+      height: 24px;
       background: none;
       border: none;
       cursor: pointer;
-      font-size: 24px;
-      color: #6b7280;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .footer {
+      display: flex;
+      width: 360px;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .footer-button {
+      display: flex;
+      height: 48px;
+      padding: 16px;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+      border-radius: 6px;
+      background: #18181b;
+      border: none;
+      cursor: pointer;
+      color: #fafafa;
+      font-family: Satoshi;
+      font-weight: 500;
+      transition: opacity 0.2s ease;
+    }
+
+    .footer-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .footer-button:not(:disabled) {
+      opacity: 1;
+    }
+
+    .footer-button:not(:disabled):hover {
+      background: #27272a;
+    }
+
+    .footer-text {
+      color: #18181b;
+      font-family: Satoshi;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%; /* 12px */
+      letter-spacing: -0.12px;
+      margin: 0;
+      text-align: center;
     }
   `;
 __decorateClass$4([
@@ -10671,6 +11005,9 @@ __decorateClass$4([
 __decorateClass$4([
   r$1()
 ], CourseModal.prototype, "apiBaseUrl", 2);
+__decorateClass$4([
+  r$1()
+], CourseModal.prototype, "selectedCourse", 2);
 if (!customElements.get("obi-course-modal")) {
   customElements.define("obi-course-modal", CourseModal);
 }
@@ -10805,11 +11142,11 @@ class AudioEqualizer extends i$1 {
     this.canvasRef = e();
     this.barCount = 8;
     this.animationFrame = null;
-    this.primaryColor = "#9500ff";
+    this.primaryColor = ORIGINAL_PRIMARY_COLOR;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.primaryColor = getComputedStyle(this).getPropertyValue("--obi-primary").trim() || "#9500ff";
+    this.primaryColor = getComputedStyle(this).getPropertyValue("--obi-primary").trim() || ORIGINAL_PRIMARY_COLOR;
     this.startAnimation();
   }
   disconnectedCallback() {
@@ -11105,7 +11442,7 @@ SearchingLoader.styles = i$4`
       display: flex;
       align-items: center;
       gap: 8px;
-      background-color: var(--obi-primary);
+      background-color: var(--obi-primary, #a10fff);
       border-radius: 12px;
       padding: 8px 12px;
     }
@@ -11146,7 +11483,13 @@ class SessionStartModal extends i$1 {
     return x`
       <div class="backdrop"></div>
       <div class="container">
-        <button class="close-button" @click=${this.handleClose}>×</button>
+        <button
+          class="close-button"
+          aria-label="Close session start modal"
+          @click=${this.handleClose}
+        >
+          ×
+        </button>
 
         <div class="header">
           <div class="logo">${obiIcon}</div>
@@ -11251,6 +11594,7 @@ SessionStartModal.styles = i$4`
       color: #18181b;
       line-height: 1.4;
       margin: 0;
+      margin-bottom: 32px;
     }
 
     .button {
@@ -11270,21 +11614,21 @@ SessionStartModal.styles = i$4`
     .button-primary {
       display: flex;
       width: 100%;
-      height: var(--height-h-11, 44px);
-      padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
+      height: 44px;
+      padding: 8px 16px;
       justify-content: center;
       align-items: center;
-      gap: var(--spacing-2, 8px);
+      gap: 8px;
       flex-shrink: 0;
       align-self: stretch;
-      border-radius: var(--border-radius-default, 6px);
-      background: var(--base-primary, #18181b);
+      border-radius: 6px;
+      background: #18181b;
       color: white;
       margin-top: 32px;
     }
 
     .button-primary:hover {
-      background: color-mix(in srgb, var(--base-primary, #18181b) 90%, white);
+      background: color-mix(in srgb, #18181b 90%, white);
     }
 
     .close-button {
@@ -11370,6 +11714,7 @@ class ObiWidget extends i$1 {
         const sessionsResponse = await this.obiClient.listSessions(this.apiKey);
         if (sessionsResponse.data) {
           const sessions = sessionsResponse.data.sessions;
+          console.log("[obi-sdk] sessions:", sessions);
           const matchingSession = sessions?.find((session) => session.uuid === sessionToken);
           if (matchingSession) {
             const sessionWithPlan = matchingSession;
@@ -11381,7 +11726,7 @@ class ObiWidget extends i$1 {
             this.state = SDKState.LOADING;
             this.showSessionStartModal = true;
           } else {
-            console.log("No session found with token:", sessionToken);
+            console.log("[obi-sdk] no session found with token:", sessionToken);
           }
         }
       } catch (error) {
@@ -11411,22 +11756,37 @@ class ObiWidget extends i$1 {
       if (window.obiWidgetConfig.linkOnlyAccess !== void 0) {
         this.linkOnlyAccess = window.obiWidgetConfig.linkOnlyAccess;
       }
-      this.style.setProperty("--obi-primary", window.obiWidgetConfig?.primaryColor || "#9500ff");
-      this.style.setProperty("--obi-secondary", window.obiWidgetConfig?.secondaryColor || "#c4b5fd");
+      const primaryColor = window.obiWidgetConfig?.primaryColor || ORIGINAL_PRIMARY_COLOR;
+      this.style.setProperty("--obi-primary", primaryColor);
+      this.generateColorVariables(primaryColor);
+    }
+  }
+  /**
+   * Generate additional color variables based on the primary color
+   */
+  generateColorVariables(primaryColor) {
+    try {
+      const secondaryColor = generateSelectedColor(primaryColor, "#c4b5fd");
+      const courseSelected = generateSelectedColor(primaryColor, "#c76cff");
+      const courseSelectedBackground = generateSelectedColor(primaryColor, "#fbf3ff");
+      const pausedPulseColor = generateSelectedColor(primaryColor, "#A06DF9");
+      this.style.setProperty("--obi-secondary", secondaryColor);
+      this.style.setProperty("--obi-course-selected", courseSelected);
+      this.style.setProperty("--obi-course-selected-bg", courseSelectedBackground);
+      this.style.setProperty("--obi-paused-pulse", pausedPulseColor);
+    } catch (error) {
+      console.warn("Failed to generate color variables:", error);
+      this.style.setProperty("--obi-secondary", "#c4b5fd");
+      this.style.setProperty("--obi-course-selected", "#c76cff");
+      this.style.setProperty("--obi-course-selected-bg", "#fbf3ff");
+      this.style.setProperty("--obi-paused-pulse", "#A06DF9");
     }
   }
   removeSessionUrlParams() {
     const url = new URL(window.location.href);
     url.searchParams.delete(SESSION_URL_PARAM);
     window.history.replaceState({}, "", url.toString());
-    try {
-      if (window.__obiUrlParams) {
-        ;
-        window.__obiUrlParams = null;
-      }
-    } catch (error) {
-      console.warn("Failed to clean up window URL parameters:", error);
-    }
+    localStorage.removeItem("obi-url-params");
   }
   /**
    * Create a new ObiSession instance with common configuration
@@ -11558,6 +11918,7 @@ class ObiWidget extends i$1 {
       if (!sessionToken || !roomToken || !roomUrl) {
         return;
       }
+      console.log("[obi-sdk] using existing session");
       if (sessionExpiry) {
         const expiryDate = new Date(sessionExpiry);
         if (expiryDate < /* @__PURE__ */ new Date()) {
@@ -11612,51 +11973,50 @@ class ObiWidget extends i$1 {
     }
   }
   async sessionConnectionCheck() {
-    await this.checkExistingSession();
-    if (!this.activeSession) {
+    const sessionId = function() {
       let storedParams = {};
-      if (window.__obiUrlParams) {
-        storedParams = window.__obiUrlParams;
-      }
+      storedParams = JSON.parse(localStorage.getItem("obi-url-params") || "{}");
       if (Object.keys(storedParams).length === 0) {
         const urlParams = new URLSearchParams(window.location.search);
         urlParams.forEach((value, key) => {
           storedParams[key] = value;
         });
       }
-      const sessionId = storedParams[SESSION_URL_PARAM];
-      if (sessionId && this.apiKey) {
-        await this.handleUrlSessionEvent(sessionId);
-      } else if (sessionId && !this.apiKey) {
-        console.log("Session ID found but API key not ready, retrying...");
-        setTimeout(() => {
-          if (this.apiKey) {
-            this.handleUrlSessionEvent(sessionId);
-          }
-        }, 100);
-      }
+      localStorage.removeItem("obi-url-params");
+      return storedParams[SESSION_URL_PARAM];
+    }();
+    if (!sessionId) {
+      await this.checkExistingSession();
+      return;
+    }
+    console.log("[obi-sdk] using magic link");
+    if (this.apiKey) {
+      await this.handleUrlSessionEvent(sessionId);
+    } else {
+      console.log("[obi-sdk] API key not ready, retrying...");
+      setTimeout(() => {
+        if (this.apiKey) {
+          this.handleUrlSessionEvent(sessionId);
+        }
+      }, 100);
     }
   }
   connectedCallback() {
     super.connectedCallback();
     this.updateFromConfig();
+    this.addEventListener("obi-config-updated", this.handleConfigUpdate.bind(this));
     this.setAttribute("position", this.position);
     this.boundSaveSessionData = this.saveSessionData.bind(this);
     window.addEventListener("beforeunload", this.boundSaveSessionData);
     window.addEventListener("pagehide", this.boundSaveSessionData);
-    if (document.readyState === "complete") {
-      Promise.resolve().then(() => this.sessionConnectionCheck());
-    } else {
-      window.addEventListener(
-        "load",
-        () => {
-          Promise.resolve().then(() => this.sessionConnectionCheck());
-        },
-        { once: true }
-      );
+    this.addEventListener("course-select", this.handleCourseSelectEvent);
+    if (this.isActive) {
+      this.sessionConnectionCheck();
     }
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("obi-config-updated", this.handleConfigUpdate.bind(this));
     if (this.closeNavTimeoutRef !== null) {
       window.clearTimeout(this.closeNavTimeoutRef);
     }
@@ -11669,7 +12029,19 @@ class ObiWidget extends i$1 {
       window.removeEventListener("pagehide", this.boundSaveSessionData);
     }
     this.removeSessionUrlParams();
-    super.disconnectedCallback();
+  }
+  handleConfigUpdate(event) {
+    const customEvent = event;
+    const updatedConfig = customEvent.detail;
+    const needsInit = updatedConfig.isActive && !this.isActive;
+    this.updateFromConfig();
+    if (this.position) {
+      this.setAttribute("position", this.position);
+    }
+    if (needsInit) {
+      this.sessionConnectionCheck();
+    }
+    this.requestUpdate();
   }
   handleMouseEnter() {
     this.isHovering = true;
@@ -11730,7 +12102,8 @@ class ObiWidget extends i$1 {
       N$1.union(SDKState.USER_SPEAKING, SDKState.AGENT_SPEAKING),
       () => x`<obi-audio-equalizer .volume=${this.volume}></obi-audio-equalizer>`
     ).with(SDKState.THINKING, () => x`<obi-dot-loader></obi-dot-loader>`).with(SDKState.PAUSED, () => obiIcon).otherwise(() => obiIcon);
-    const isPulseState = this.state === SDKState.USER_SPEAKING || this.state === SDKState.AGENT_SPEAKING;
+    const isSpeakingPulseState = this.state === SDKState.USER_SPEAKING || this.state === SDKState.AGENT_SPEAKING;
+    const isPausedPulse = this.state === SDKState.PAUSED;
     const isResearching = this.state === SDKState.RESEARCHING;
     const isUserSpeaking = this.state === SDKState.USER_SPEAKING;
     const isRotated = this.state !== SDKState.READY || this.navVisible;
@@ -11739,7 +12112,8 @@ class ObiWidget extends i$1 {
     const containerClasses = [
       "widget-container",
       isRotated ? "rotated" : "",
-      isPulseState ? "pulse" : "",
+      isSpeakingPulseState ? "pulse" : "",
+      isPausedPulse ? "paused-pulse" : "",
       isResearching ? "researching" : "",
       isUserSpeaking ? "user-speaking" : ""
     ].filter(Boolean).join(" ");
@@ -11762,8 +12136,8 @@ class ObiWidget extends i$1 {
       </div>
       ${this.showCourseModal ? x`<obi-course-modal
             .onClose=${() => this.showCourseModal = false}
-            @course-select=${this.handleCourseSelectEvent}
             .apiKey=${this.apiKey}
+            @course-select=${this.handleCourseSelectEvent}
           ></obi-course-modal>` : E}
       ${this.showSessionStartModal && this.selectedCourse ? x`<obi-session-start-modal
             .session=${this.selectedCourse}
@@ -11782,11 +12156,17 @@ ObiWidget.styles = i$4`
     :host {
       display: block;
       position: fixed;
-      z-index: 9999;
+      z-index: 2147483600;
       font-family: "Inter", sans-serif;
-      --obi-primary: #9500ff;
+      pointer-events: auto;
+      --obi-primary: #a10fff;
       --obi-secondary: #c4b5fd;
       --obi-danger: #ef4444;
+
+      /* Generated color variables (defaults based on original design) */
+      --obi-course-selected: #c76cff;
+      --obi-course-selected-bg: #fbf3ff;
+      --obi-paused-pulse: #a06df9;
     }
 
     h1 {
@@ -11853,12 +12233,13 @@ ObiWidget.styles = i$4`
       height: 56px;
       border-radius: 12px;
       border-color: transparent;
-      background-color: var(--obi-primary);
+      background-color: var(--obi-primary, #a10fff);
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: all 0.2s ease-out;
+      pointer-events: auto;
     }
 
     /* Apply transforms to widget-container based on host position */
@@ -11899,19 +12280,26 @@ ObiWidget.styles = i$4`
     }
 
     @keyframes pulse-shadow {
-      0% {
-        box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 40%, transparent);
-      }
-      70% {
-        box-shadow: 0 0 0 10px color-mix(in srgb, var(--obi-primary) 0%, transparent);
-      }
+      0%,
       100% {
-        box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 0%, transparent);
+        box-shadow: 0px 0px 15px 2px
+          color-mix(in srgb, var(--obi-primary, #a10fff) 75%, transparent);
+      }
+
+      50% {
+        box-shadow: 0px 0px 25px 5px
+          color-mix(in srgb, var(--obi-primary, #a10fff) 90%, transparent);
       }
     }
 
     .pulse {
       animation: pulse-shadow 2s ease-in-out infinite;
+      box-shadow: none;
+    }
+
+    .paused-pulse {
+      box-shadow: 0px 0px 18px 6px
+        color-mix(in srgb, var(--obi-paused-pulse, #a06df9) 75%, transparent);
     }
   `;
 __decorateClass([
@@ -11959,7 +12347,6 @@ __decorateClass([
 if (!customElements.get("obi-widget")) {
   customElements.define("obi-widget", ObiWidget);
 }
-const obiWidget = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, ObiWidget }, Symbol.toStringTag, { value: "Module" }));
 export {
   AudioEqualizer as A,
   Course as C,
@@ -11979,8 +12366,7 @@ export {
   audioEqualizer as j,
   dotLoader as k,
   n$2 as n,
-  obiWidget as o,
   searchingLoader as s,
   x
 };
-//# sourceMappingURL=obi-widget-ad91b91a.js.map
+//# sourceMappingURL=obi-widget-3bb30929.js.map