plain.observer 0.12.0__py3-none-any.whl → 0.13.0__py3-none-any.whl

plain/observer/CHANGELOG.md

@@ -1,5 +1,21 @@
 # plain-observer changelog
 
+## [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/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,25 @@ 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
+def DEFAULT_RESPONSE_HEADERS(request):
+    nonce = request.csp_nonce
+    return {
+        "Content-Security-Policy": (
+            f"default-src 'self'; "
+            f"script-src 'self' 'nonce-{nonce}'; "
+            f"style-src 'self' 'nonce-{nonce}'; "
+            f"frame-ancestors 'self'; "  # Required for Observer toolbar
+            # ... other directives
+        ),
+    }
+```

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/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/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/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/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/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/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/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/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.dist-info → plain_observer-0.13.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plain.observer
-Version: 0.12.0
+Version: 0.13.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,25 @@ 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
+def DEFAULT_RESPONSE_HEADERS(request):
+    nonce = request.csp_nonce
+    return {
+        "Content-Security-Policy": (
+            f"default-src 'self'; "
+            f"script-src 'self' 'nonce-{nonce}'; "
+            f"style-src 'self' 'nonce-{nonce}'; "
+            f"frame-ancestors 'self'; "  # Required for Observer toolbar
+            # ... other directives
+        ),
+    }
+```

{plain_observer-0.12.0.dist-info → plain_observer-0.13.0.dist-info}/RECORD

@@ -1,6 +1,6 @@
 plain/observer/AGENTS.md,sha256=w3vqd2VWGliBQl8ohEBOsHyo1KROoUuK10uDr_C5Xeo,334
-plain/observer/CHANGELOG.md,sha256=OhpemfY9b3PUlNaWM5DGzEtQvvOpKV6bbxHWm4EmOss,15913
-plain/observer/README.md,sha256=39RA17fgcyOkqeIWBOAg4Be6YZjoiDzK5PVOG-nseuY,988
+plain/observer/CHANGELOG.md,sha256=WEGX1l0PbDgr2T4gZXjo2NMmjVi1Q93TDe4iTX9vPQs,17211
+plain/observer/README.md,sha256=zheQQwkFGDrs5pChC1kzC2x_mpBA8Lh5X97C6khyywA,1870
 plain/observer/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 plain/observer/admin.py,sha256=u4F9VYMwDkwzfVgMlLUqwaqDjtsf9RIJppzOA2NXWKc,3516
 plain/observer/cli.py,sha256=rzESdG8rYH6ILZ_5jA6oR362kCjTlimgzNqng89s2yg,21131
@@ -13,6 +13,8 @@ plain/observer/otel.py,sha256=QbWoSc2KxDDhGfBQeww_uKBy3DL1SCOomvmxzU_yAVM,16902
 plain/observer/toolbar.py,sha256=btFUZIOQu0dkXOz7dWay79S0eBpadtSdfGyHF0yRVY4,720
 plain/observer/urls.py,sha256=oLJoDjB7YMUx8z-MGql_xXSXkfacVKFp-aHNXaKzs38,376
 plain/observer/views.py,sha256=johyO4MaLvROCexelrPDw0O-mIylzstJS7bzN94NOBg,5424
+plain/observer/assets/observer/observer.css,sha256=4DF_523mc40x33mYF-itTqESoBgwv2JI5MUaByUnUdI,1289
+plain/observer/assets/observer/observer.js,sha256=1CypJqFBjbVn3IcBC9S0cbMVpE7LtoG19o9PljEhM4c,2496
 plain/observer/migrations/0001_initial.py,sha256=HVoSrd5V-IOqD1adADIAzqMH8xMlPwyLOFH6JcGFniI,3312
 plain/observer/migrations/0002_trace_share_created_at_trace_share_id_trace_summary_and_more.py,sha256=lgFqdn66zq7AoCvkC3MIvLXiE_Omup5EEMDSe1jpKOg,1765
 plain/observer/migrations/0003_span_plainobserv_span_id_e7ade3_idx.py,sha256=54G8GXi-PiFbcTU-HrXO14UN9PxhjDCY05TA9HHkkmk,527
@@ -20,15 +22,15 @@ plain/observer/migrations/0004_trace_app_name_trace_app_version.py,sha256=Qfp62t
 plain/observer/migrations/0005_log_log_plainobserv_trace_i_fcfb7d_idx_and_more.py,sha256=ubUAPgN_jKK_o9J3G38MihGgsP_LvBwAzgvc1N-Td9M,2167
 plain/observer/migrations/0006_remove_log_logger.py,sha256=ruuwsDEcilSFTimU52JMiHz9ENxRCmLyheX_71ZXxfo,362
 plain/observer/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-plain/observer/templates/observer/trace.html,sha256=zHf6GIdNDYBD7pqWxVvfm0R3fMTS6ZiFrOuq8eFxwmI,11374
-plain/observer/templates/observer/trace_detail.html,sha256=86-YGCpg9gy31Pd2vDHB3LYRkJile-DsGD1Enjx9s5Y,943
-plain/observer/templates/observer/trace_share.html,sha256=HrYLti5BpX96-6Bm_37OObFvAJSYbZ3GZD-MwCi9hgA,525
-plain/observer/templates/observer/traces.html,sha256=48MFsDjNCrouAiIQoSD-CqeeyHIN8-24k7DuqAmiiVY,24531
-plain/observer/templates/observer/partials/log.html,sha256=Vpp0j-GLBfwTBFyZp_cv0jkOLpgxfd-8-RMBe6V4HbU,964
-plain/observer/templates/observer/partials/span.html,sha256=PaWZONsABwlS7mdKsJlYbhMSOzidq_WyOp6ifvFUgmM,18672
-plain/observer/templates/toolbar/observer.html,sha256=uaDKiWR7EYqC1kEXE-uHDlE7nfFEMR_zmOgvlKwQHJ4,1365
+plain/observer/templates/observer/trace.html,sha256=20argqtoo9M1CniIGSjKAuqf4CX0Pxauu5g5IpmVmzc,9826
+plain/observer/templates/observer/trace_detail.html,sha256=9XyNJRWBrGTiEskQeeGdoPspeV7Lpur6s5YYFWw0Gw4,1085
+plain/observer/templates/observer/trace_share.html,sha256=hsAuM6_jYpNCHIzV_A60lzg-OdY2Gg5V8xVYG4d5G6c,667
+plain/observer/templates/observer/traces.html,sha256=cXoj1dATYM_4-xfqlKn1jl136MAkPmD4g-ALeceYvD4,24705
+plain/observer/templates/observer/partials/log.html,sha256=dNIp1Wuu6dLLpenDIiUFcCkpFCQe2u-8Xk8mhrE41x0,952
+plain/observer/templates/observer/partials/span.html,sha256=toBqwwou_oYYjAJDRJ_a72xm0CZPpTqM0-u6A_iWctc,18880
+plain/observer/templates/toolbar/observer.html,sha256=SI1y8KzXRMaI9XDqGxuk6KnjyZwU4yXzPfhWrwD52yM,1385
 plain/observer/templates/toolbar/observer_button.html,sha256=FMBJHKMGqpHWs-3Ei2PBCdVYZ_6vFw6-eKH_i4jQu-Q,1215
-plain_observer-0.12.0.dist-info/METADATA,sha256=xS8eVM5pDt_JoMneFhihJCqiOrA6nWEEl12kgAysCqo,1387
-plain_observer-0.12.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-plain_observer-0.12.0.dist-info/licenses/LICENSE,sha256=YZdq6Pz8ivjs97eSVLRmoGDI1hjEikX6N49DfM0DWio,1500
-plain_observer-0.12.0.dist-info/RECORD,,
+plain_observer-0.13.0.dist-info/METADATA,sha256=07wRHfuXZh44Wj66IgJhVx9FDuZ37agRV1Ep-bYBeiM,2269
+plain_observer-0.13.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+plain_observer-0.13.0.dist-info/licenses/LICENSE,sha256=YZdq6Pz8ivjs97eSVLRmoGDI1hjEikX6N49DfM0DWio,1500
+plain_observer-0.13.0.dist-info/RECORD,,