@agent-native/core 0.91.0 → 0.91.2

package/corpus/templates/analytics/.agents/skills/session-replay/SKILL.md

@@ -89,8 +89,27 @@ agent answers about browser recordings in the Analytics template.
 - The `/sessions/:recordingId` replay player has a Dev Tools toggle that opens
   a panel with Console and Network tabs: filter chips, search, an error-count
   badge, and playback-time highlighting.
-- Rows are Jump-to-seek: clicking one seeks the player to that moment. Extend
-  this panel instead of adding a separate debugging surface.
+- Rows expand inline under the selected line (Chrome-style). Expanding a row
+  does not seek; use Jump to to move the playhead. Extend this panel instead of
+  adding a separate debugging surface.
+
+## Playback Viewer
+
+- Wait for all replay chunks (`isComplete`) before constructing the rrweb
+  `Replayer`. Progressive chunk publishes should only update the loading bar;
+  rebuilding the player mid-load desyncs the scrubber and playhead.
+- Prefer the latest sane Meta / ViewportResize frame for stage dimensions.
+  Out-of-range aspect ratios are clamped (preserve height, shrink width) before
+  handing events to rrweb so the stage does not collapse into an ultra-wide
+  ribbon and the recorded DOM stays roughly aligned. Capture also clamps the
+  same frames in `@agent-native/core` so new recordings never store absurd
+  Meta widths.
+- The event timeline soft-highlights the active marker, auto-scrolls it into
+  view (pausing briefly after manual scroll), and supports search. It appears
+  beside the player from ~880px content width upward.
+- Dev Tools height is capped so the replay stage never collapses into a ribbon
+  on short viewports; the scrubber playhead stays visually distinct from red
+  error marker dots.
 
 ## Debugging A User-Reported Bug
 

package/corpus/templates/analytics/app/global.css

@@ -337,23 +337,33 @@
   opacity: 0.55;
 }
 
+/* Keep the playhead visually distinct from red console-error marker dots on
+   the scrubber track — those markers used to look like a second thumb. */
 .an-replay-scrub::-webkit-slider-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.875rem;
+  height: 0.875rem;
   appearance: none;
   border: 2px solid hsl(var(--background));
   border-radius: 9999px;
-  background: hsl(var(--primary));
-  box-shadow: 0 0 0 1px hsl(var(--border));
+  background: hsl(217 91% 60%);
+  box-shadow:
+    0 0 0 1px hsl(217 91% 60% / 0.55),
+    0 1px 2px hsl(0 0% 0% / 0.35);
+  position: relative;
+  z-index: 40;
 }
 
 .an-replay-scrub::-moz-range-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.875rem;
+  height: 0.875rem;
   border: 2px solid hsl(var(--background));
   border-radius: 9999px;
-  background: hsl(var(--primary));
-  box-shadow: 0 0 0 1px hsl(var(--border));
+  background: hsl(217 91% 60%);
+  box-shadow:
+    0 0 0 1px hsl(217 91% 60% / 0.55),
+    0 1px 2px hsl(0 0% 0% / 0.35);
+  position: relative;
+  z-index: 40;
 }
 
 .dark
@@ -570,9 +580,9 @@
   }
 }
 
-@container analytics-session-detail (min-width: 1040px) {
+@container analytics-session-detail (min-width: 880px) {
   .analytics-session-detail-workbench {
-    grid-template-columns: minmax(0, 1fr) 330px;
+    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
   }
 
   .analytics-session-detail-timeline {
@@ -580,6 +590,12 @@
   }
 }
 
+@container analytics-session-detail (min-width: 1200px) {
+  .analytics-session-detail-workbench {
+    grid-template-columns: minmax(0, 1fr) 330px;
+  }
+}
+
 /* The dashboard grid responds to the available content width — which shrinks
    when the agent sidebar is open — not the viewport. Rows are rendered
    explicitly so deleting a card only expands the remaining cards in that row. */

package/corpus/templates/analytics/app/i18n/zh-TW.ts

@@ -964,6 +964,8 @@ const messages = {
     timeline: "事件時間線",
     replayTimeline: "回放時間線",
     timelineDescription: "顯示 {{count}} / {{total}} 個有用事件。",
+    timelineSearch: "搜尋事件...",
+    timelineNoMatches: "沒有符合目前搜尋的時間線事件。",
     noTimelineEvents: "未找到時間線標記",
     sequence: "Sequence",
     size: "Size",

package/corpus/templates/analytics/app/i18n-data.ts

@@ -1006,6 +1006,8 @@ const enUS = {
     timeline: "Event timeline",
     replayTimeline: "Replay timeline",
     timelineDescription: "Showing {{count}} of {{total}} useful events.",
+    timelineSearch: "Search events...",
+    timelineNoMatches: "No timeline events match the current search.",
     noTimelineEvents: "No timeline markers found",
     sequence: "Sequence",
     size: "Size",
@@ -8164,6 +8166,8 @@ const translatedSessionReplayTranslations = {
         "用于重建此回放的受控分块。提供商 URL 保持私有。",
       timeline: "事件时间线",
       timelineDescription: "显示 {{count}} / {{total}} 个有用事件。",
+      timelineSearch: "搜索事件...",
+      timelineNoMatches: "没有符合当前搜索的时间线事件。",
       started: "开始",
       signedIn: "已登录",
       anonymous: "匿名",
@@ -8287,6 +8291,9 @@ const translatedSessionReplayTranslations = {
         "Fragmentos con acceso controlado usados para reconstruir esta reproducción. Las URL del proveedor permanecen privadas.",
       timeline: "Línea de tiempo de eventos",
       timelineDescription: "Mostrando {{count}} de {{total}} eventos útiles.",
+      timelineSearch: "Buscar eventos...",
+      timelineNoMatches:
+        "Ningún evento de la línea de tiempo coincide con la búsqueda actual.",
       started: "Inicio",
       signedIn: "Con sesión iniciada",
       anonymous: "Anónimo",
@@ -8412,6 +8419,9 @@ const translatedSessionReplayTranslations = {
       timeline: "Chronologie des événements",
       timelineDescription:
         "Affichage de {{count}} événements utiles sur {{total}}.",
+      timelineSearch: "Rechercher des événements...",
+      timelineNoMatches:
+        "Aucun événement de la chronologie ne correspond à la recherche actuelle.",
       started: "Début",
       signedIn: "Connecté",
       anonymous: "Anonyme",
@@ -8536,6 +8546,9 @@ const translatedSessionReplayTranslations = {
       timeline: "Ereignis-Timeline",
       timelineDescription:
         "{{count}} von {{total}} nützlichen Ereignissen werden angezeigt.",
+      timelineSearch: "Ereignisse suchen...",
+      timelineNoMatches:
+        "Keine Timeline-Ereignisse entsprechen der aktuellen Suche.",
       started: "Gestartet",
       signedIn: "Angemeldet",
       anonymous: "Anonym",
@@ -8659,6 +8672,9 @@ const translatedSessionReplayTranslations = {
       timeline: "イベントタイムライン",
       timelineDescription:
         "有用なイベント {{count}} / {{total}} 件を表示しています。",
+      timelineSearch: "イベントを検索...",
+      timelineNoMatches:
+        "現在の検索に一致するタイムラインイベントはありません。",
       started: "開始",
       signedIn: "サインイン済み",
       anonymous: "匿名",
@@ -8781,6 +8797,8 @@ const translatedSessionReplayTranslations = {
       timeline: "이벤트 타임라인",
       timelineDescription:
         "유용한 이벤트 {{count}} / {{total}}개를 표시합니다.",
+      timelineSearch: "이벤트 검색...",
+      timelineNoMatches: "현재 검색과 일치하는 타임라인 이벤트가 없습니다.",
       started: "시작",
       signedIn: "로그인됨",
       anonymous: "익명",
@@ -8903,6 +8921,9 @@ const translatedSessionReplayTranslations = {
         "Blocos com escopo usados para reconstruir este replay. As URLs do provedor permanecem privadas.",
       timeline: "Linha do tempo de eventos",
       timelineDescription: "Mostrando {{count}} de {{total}} eventos úteis.",
+      timelineSearch: "Pesquisar eventos...",
+      timelineNoMatches:
+        "Nenhum evento da linha do tempo corresponde à pesquisa atual.",
       started: "Início",
       signedIn: "Logado",
       anonymous: "Anônimo",
@@ -9023,6 +9044,8 @@ const translatedSessionReplayTranslations = {
         "इस रीप्ले को फिर से बनाने के लिए उपयोग किए गए स्कोप्ड चंक। प्रदाता URL निजी रहते हैं।",
       timeline: "इवेंट टाइमलाइन",
       timelineDescription: "{{total}} में से {{count}} उपयोगी इवेंट दिखाए जा रहे हैं।",
+      timelineSearch: "इवेंट खोजें...",
+      timelineNoMatches: "वर्तमान खोज से कोई टाइमलाइन इवेंट मेल नहीं खाता।",
       started: "शुरू हुआ",
       signedIn: "साइन इन",
       anonymous: "अनाम",
@@ -9143,6 +9166,8 @@ const translatedSessionReplayTranslations = {
         "مقاطع محددة النطاق تُستخدم لإعادة بناء هذا التسجيل. تبقى عناوين URL الخاصة بالمزوّد خاصة.",
       timeline: "الخط الزمني للأحداث",
       timelineDescription: "عرض {{count}} من {{total}} أحداث مفيدة.",
+      timelineSearch: "البحث عن الأحداث...",
+      timelineNoMatches: "لا توجد أحداث في الخط الزمني تطابق البحث الحالي.",
       started: "بدأت",
       signedIn: "تم تسجيل الدخول",
       anonymous: "مجهول",