plain.observer 0.12.0__tar.gz → 0.14.0__tar.gz

{plain_observer-0.12.0 → plain_observer-0.14.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plain.observer
-Version: 0.12.0
+Version: 0.14.0
 Summary: On-page telemetry and observability tools for Plain.
 Author-email: Dave Gaeddert <dave.gaeddert@dropseed.dev>
 License-Expression: BSD-3-Clause
@@ -16,6 +16,7 @@ Description-Content-Type: text/markdown
 **On-page telemetry and observability tools for Plain.**
 
 - [Installation](#installation)
+- [Content Security Policy (CSP)](#content-security-policy-csp)
 
 ## Installation
 
@@ -57,3 +58,23 @@ plain migrate
 ```
 
 After installation, Observer will automatically integrate with your application's toolbar (if using `plain.admin`). You can access the web interface at `/observer/traces/` or use the CLI commands to analyze traces.
+
+## Content Security Policy (CSP)
+
+If you're using a Content Security Policy (CSP), the Observer toolbar panel requires `frame-ancestors 'self'` to display trace information in an iframe.
+
+Without this directive, the toolbar panel will fail to load with a CSP error: `"Refused to frame... because an ancestor violates the following Content Security Policy directive: 'frame-ancestors 'none'"`.
+
+Example CSP configuration:
+
+```python
+DEFAULT_RESPONSE_HEADERS = {
+    "Content-Security-Policy": (
+        "default-src 'self'; "
+        "script-src 'self' 'nonce-{request.csp_nonce}'; "
+        "style-src 'self' 'nonce-{request.csp_nonce}'; "
+        "frame-ancestors 'self'; "  # Required for Observer toolbar
+        # ... other directives
+    ),
+}
+```

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/CHANGELOG.md

@@ -1,5 +1,31 @@
 # plain-observer changelog
 
+## [0.14.0](https://github.com/dropseed/plain/releases/plain-observer@0.14.0) (2025-10-29)
+
+### What's changed
+
+- Updated CSP configuration example in documentation to use the new `DEFAULT_RESPONSE_HEADERS` format with string templates instead of callable functions ([5199383](https://github.com/dropseed/plain/commit/519938312835b73dfd9be8c93abae6e896094fc2))
+
+### Upgrade instructions
+
+- No changes required
+
+## [0.13.0](https://github.com/dropseed/plain/releases/plain-observer@0.13.0) (2025-10-29)
+
+### What's changed
+
+- Inline JavaScript and CSS extracted to separate asset files for Content Security Policy (CSP) compatibility ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Added CSP nonce support to inline scripts for improved security ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Added comprehensive CSP configuration documentation in README, including required `frame-ancestors 'self'` directive for toolbar panel ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Span and log indentation now uses CSS classes with data attributes instead of inline styles ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Timeline bar positioning now uses CSS custom properties set via JavaScript instead of inline styles ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Copy share URL button now uses data attributes and event delegation instead of inline onclick handlers ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+- Toolbar iframe now uses HTML attributes instead of inline styles ([784f3dd](https://github.com/dropseed/plain/commit/784f3dd972))
+
+### Upgrade instructions
+
+- No changes required
+
 ## [0.12.0](https://github.com/dropseed/plain/releases/plain-observer@0.12.0) (2025-10-24)
 
 ### What's changed

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/README.md

@@ -3,6 +3,7 @@
 **On-page telemetry and observability tools for Plain.**
 
 - [Installation](#installation)
+- [Content Security Policy (CSP)](#content-security-policy-csp)
 
 ## Installation
 
@@ -44,3 +45,23 @@ plain migrate
 ```
 
 After installation, Observer will automatically integrate with your application's toolbar (if using `plain.admin`). You can access the web interface at `/observer/traces/` or use the CLI commands to analyze traces.
+
+## Content Security Policy (CSP)
+
+If you're using a Content Security Policy (CSP), the Observer toolbar panel requires `frame-ancestors 'self'` to display trace information in an iframe.
+
+Without this directive, the toolbar panel will fail to load with a CSP error: `"Refused to frame... because an ancestor violates the following Content Security Policy directive: 'frame-ancestors 'none'"`.
+
+Example CSP configuration:
+
+```python
+DEFAULT_RESPONSE_HEADERS = {
+    "Content-Security-Policy": (
+        "default-src 'self'; "
+        "script-src 'self' 'nonce-{request.csp_nonce}'; "
+        "style-src 'self' 'nonce-{request.csp_nonce}'; "
+        "frame-ancestors 'self'; "  # Required for Observer toolbar
+        # ... other directives
+    ),
+}
+```

plain_observer-0.14.0/plain/observer/assets/observer/observer.css

@@ -0,0 +1,72 @@
+/* Custom details arrow animation */
+details[open] summary svg {
+  transform: rotate(90deg);
+}
+
+/* Apply padding based on span level - generated for levels 0-19 */
+[data-span-level="0"] {
+  padding-left: 0rem;
+}
+[data-span-level="1"] {
+  padding-left: 1rem;
+}
+[data-span-level="2"] {
+  padding-left: 2rem;
+}
+[data-span-level="3"] {
+  padding-left: 3rem;
+}
+[data-span-level="4"] {
+  padding-left: 4rem;
+}
+[data-span-level="5"] {
+  padding-left: 5rem;
+}
+[data-span-level="6"] {
+  padding-left: 6rem;
+}
+[data-span-level="7"] {
+  padding-left: 7rem;
+}
+[data-span-level="8"] {
+  padding-left: 8rem;
+}
+[data-span-level="9"] {
+  padding-left: 9rem;
+}
+[data-span-level="10"] {
+  padding-left: 10rem;
+}
+[data-span-level="11"] {
+  padding-left: 11rem;
+}
+[data-span-level="12"] {
+  padding-left: 12rem;
+}
+[data-span-level="13"] {
+  padding-left: 13rem;
+}
+[data-span-level="14"] {
+  padding-left: 14rem;
+}
+[data-span-level="15"] {
+  padding-left: 15rem;
+}
+[data-span-level="16"] {
+  padding-left: 16rem;
+}
+[data-span-level="17"] {
+  padding-left: 17rem;
+}
+[data-span-level="18"] {
+  padding-left: 18rem;
+}
+[data-span-level="19"] {
+  padding-left: 19rem;
+}
+
+/* Apply positioning for timeline bars using CSS custom properties */
+[data-span-id] {
+  left: var(--start, 0%);
+  width: var(--width, 100%);
+}

plain_observer-0.14.0/plain/observer/assets/observer/observer.js

@@ -0,0 +1,69 @@
+// Observer JS - CSP-compliant timeline positioning and utilities
+
+// Apply CSS custom properties for timeline positioning
+function applyTimelinePositioning() {
+  document
+    .querySelectorAll("[data-start-percent][data-width-percent]")
+    .forEach((el) => {
+      const start = el.dataset.startPercent;
+      const width = el.dataset.widthPercent;
+      el.style.setProperty("--start", `${start}%`);
+      el.style.setProperty("--width", `${width}%`);
+    });
+}
+
+// Apply on page load
+document.addEventListener("DOMContentLoaded", applyTimelinePositioning);
+
+// Re-apply after htmx swaps content
+document.addEventListener("htmx:afterSwap", applyTimelinePositioning);
+
+// Copy share URL to clipboard with visual feedback
+async function copyShareUrl(button, traceId) {
+  try {
+    const shareUrl = button.getAttribute("data-share-url");
+
+    // Copy to clipboard
+    await navigator.clipboard.writeText(shareUrl);
+
+    // Show success feedback on button
+    const originalHTML = button.innerHTML;
+    button.innerHTML =
+      '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>';
+    button.classList.remove("bg-emerald-700", "hover:bg-emerald-600");
+    button.classList.add("bg-green-600", "hover:bg-green-700");
+
+    // Also flash the URL text
+    const urlSpan = document.getElementById(`share-url-${traceId}`);
+    if (urlSpan) {
+      urlSpan.classList.add("text-green-400", "font-bold");
+      setTimeout(() => {
+        urlSpan.classList.remove("text-green-400", "font-bold");
+      }, 2000);
+    }
+
+    setTimeout(() => {
+      button.innerHTML = originalHTML;
+      button.classList.remove("bg-green-600", "hover:bg-green-700");
+      button.classList.add("bg-emerald-700", "hover:bg-emerald-600");
+    }, 2000);
+  } catch (error) {
+    console.error("Failed to copy share URL:", error);
+    alert("Failed to copy share URL. See console for details.");
+  }
+}
+
+// Set up event delegation for copy share URL buttons
+function setupCopyShareUrlHandlers() {
+  document.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-copy-share-url]");
+    if (button) {
+      event.preventDefault();
+      const traceId = button.getAttribute("data-trace-id");
+      copyShareUrl(button, traceId);
+    }
+  });
+}
+
+// Initialize on page load
+document.addEventListener("DOMContentLoaded", setupCopyShareUrlHandlers);

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/partials/log.html

@@ -1,4 +1,4 @@
-<div style="padding-left: {{ event.span_level * 1 }}rem;" class="border-l border-white/10">
+<div data-span-level="{{ event.span_level }}" class="border-l border-white/10">
     <div class="ml-px px-2 py-1 text-xs flex items-start space-x-2">
         <div class="w-4 h-4 mr-2 flex items-center justify-center">
             <svg class="w-3 h-3 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/partials/span.html

@@ -2,7 +2,7 @@
 {% set start_percent = (span_start_offset / trace.duration_ms() * 100) if trace.duration_ms() > 0 else 0 %}
 {% set width_percent = (span.duration_ms() / trace.duration_ms() * 100) if trace.duration_ms() > 0 else 0 %}
 
-<div style="padding-left: {{ event.span_level * 1 }}rem;" class="border-l border-white/20">
+<div data-span-level="{{ event.span_level }}" class="border-l border-white/20">
     <details class="rounded bg-white/5 min-w-[600px] ml-px">
         <summary class="cursor-pointer hover:bg-white/10 transition-colors px-2 py-1 list-none [&::-webkit-details-marker]:hidden">
             <div class="flex items-center">
@@ -48,12 +48,16 @@
                                     data-[kind='INTERNAL']:bg-gray-500
                                     bg-white/30"
                             data-kind="{{ span.kind }}"
-                            style="left: {{ start_percent }}%; width: {{ width_percent }}%;"
+                            data-span-id="{{ span.span_id }}"
+                            data-start-percent="{{ start_percent }}"
+                            data-width-percent="{{ width_percent }}"
                             title="{{ span.name }} - {{ span.duration_ms() }}ms">
                         </div>
                         <div
                             class="absolute inset-0 flex items-center justify-start pl-1 text-xs text-white/80 font-medium whitespace-nowrap pointer-events-none"
-                            style="left: {{ start_percent }}%; width: {{ width_percent }}%;">
+                            data-span-id="{{ span.span_id }}-label"
+                            data-start-percent="{{ start_percent }}"
+                            data-width-percent="{{ width_percent }}">
                             {{ "%.2f"|format(span.duration_ms()) }}ms
                         </div>
                     </div>

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/trace.html

@@ -4,10 +4,11 @@
     <div class="mb-2">
         <div class="flex items-center gap-2 bg-emerald-900/20 border border-emerald-700/50 rounded px-2 py-1">
             <span class="text-xs text-emerald-400 font-mono flex-1 truncate" id="share-url-{{ trace.id }}">
-                {{ request.get_host() }}{{ url('observer:trace_shared', trace.share_id) }}
+                {{ request.host }}{{ url('observer:trace_shared', trace.share_id) }}
             </span>
             <button
-                onclick="copyShareUrl(this, '{{ trace.id }}')"
+                data-copy-share-url
+                data-trace-id="{{ trace.id }}"
                 data-share-url="{{ request.build_absolute_uri(url('observer:trace_shared', trace.share_id)) }}"
                 class="px-2 py-0.5 text-xs bg-emerald-700 text-emerald-100 hover:bg-emerald-600 rounded transition-colors flex-shrink-0"
                 title="Copy shareable URL">
@@ -148,46 +149,3 @@
     {% endfor %}
     </div>
 </div>
-
-
-<style>
-    /* Custom details arrow animation */
-    details[open] summary svg {
-        transform: rotate(90deg);
-    }
-</style>
-
-<script>
-async function copyShareUrl(button, traceId) {
-    try {
-        const shareUrl = button.getAttribute('data-share-url');
-
-        // Copy to clipboard
-        await navigator.clipboard.writeText(shareUrl);
-
-        // Show success feedback on button
-        const originalHTML = button.innerHTML;
-        button.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>';
-        button.classList.remove('bg-emerald-700', 'hover:bg-emerald-600');
-        button.classList.add('bg-green-600', 'hover:bg-green-700');
-
-        // Also flash the URL text
-        const urlSpan = document.getElementById(`share-url-${traceId}`);
-        if (urlSpan) {
-            urlSpan.classList.add('text-green-400', 'font-bold');
-            setTimeout(() => {
-                urlSpan.classList.remove('text-green-400', 'font-bold');
-            }, 2000);
-        }
-
-        setTimeout(() => {
-            button.innerHTML = originalHTML;
-            button.classList.remove('bg-green-600', 'hover:bg-green-700');
-            button.classList.add('bg-emerald-700', 'hover:bg-emerald-600');
-        }, 2000);
-    } catch (error) {
-        console.error('Failed to copy share URL:', error);
-        alert('Failed to copy share URL. See console for details.');
-    }
-}
-</script>

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/trace_detail.html

@@ -6,6 +6,8 @@
     <title>Trace {{ trace.trace_id }} - Observer</title>
     {% tailwind_css %}
     {% htmx_js %}
+    <link rel="stylesheet" href="{{ asset('observer/observer.css') }}">
+    <script src="{{ asset('observer/observer.js') }}" defer></script>
 </head>
 <body class="bg-stone-950 text-stone-300 min-h-screen">
     <div class="container mx-auto p-6 max-w-6xl">

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/trace_share.html

@@ -6,6 +6,8 @@
     <title>Shared Trace - {{ trace.trace_id }} - Observer</title>
     {% tailwind_css %}
     {% htmx_js %}
+    <link rel="stylesheet" href="{{ asset('observer/observer.css') }}">
+    <script src="{{ asset('observer/observer.js') }}" defer></script>
 </head>
 <body class="bg-stone-950 text-stone-300 min-h-screen">
     <div class="container mx-auto p-6 max-w-6xl">

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/observer/traces.html

@@ -6,7 +6,9 @@
     <title>Observer Traces</title>
     {% tailwind_css %}
     {% htmx_js %}
-    <script>
+    <link rel="stylesheet" href="{{ asset('observer/observer.css') }}">
+    <script src="{{ asset('observer/observer.js') }}" defer></script>
+    <script nonce="{{ request.csp_nonce }}">
         if (window.self !== window.top) {
             document.addEventListener('DOMContentLoaded', function() {
                 document.body.setAttribute('data-iframe', 'true');

{plain_observer-0.12.0 → plain_observer-0.14.0}/plain/observer/templates/toolbar/observer.html

@@ -3,7 +3,7 @@
         <p>Loading spans...</p>
     </div>
 </div>
-<script>
+<script nonce="{{ request.csp_nonce }}">
 (function() {
     var container = document.getElementById('observer-traces');
     var loaded = false;
@@ -29,8 +29,8 @@
                 var iframe = document.createElement('iframe');
                 iframe.src = "{{ url('observer:traces') }}";
                 iframe.frameBorder = "0";
-                iframe.style.width = "100%";
-                iframe.style.height = "100%";
+                iframe.width = "100%";
+                iframe.height = "100%";
                 container.innerHTML = '';
                 container.appendChild(iframe);
                 observer.disconnect();

{plain_observer-0.12.0 → plain_observer-0.14.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "plain.observer"
-version = "0.12.0"
+version = "0.14.0"
 description = "On-page telemetry and observability tools for Plain."
 authors = [{name = "Dave Gaeddert", email = "dave.gaeddert@dropseed.dev"}]
 license = "BSD-3-Clause"