plain.observer 0.1.0__py3-none-any.whl → 0.2.0__py3-none-any.whl

plain/observer/models.py

@@ -1,4 +1,5 @@
 import json
+import secrets
 from datetime import UTC, datetime
 from functools import cached_property
 
@@ -15,6 +16,8 @@ from opentelemetry.semconv.attributes import db_attributes
 from opentelemetry.trace import format_trace_id
 
 from plain import models
+from plain.urls import reverse
+from plain.utils import timezone
 
 
 @models.register_model
@@ -24,12 +27,17 @@ class Trace(models.Model):
     end_time = models.DateTimeField()
 
     root_span_name = models.TextField(default="", required=False)
+    summary = models.CharField(max_length=255, default="", required=False)
 
     # Plain fields
     request_id = models.CharField(max_length=255, default="", required=False)
     session_id = models.CharField(max_length=255, default="", required=False)
     user_id = models.CharField(max_length=255, default="", required=False)
 
+    # Shareable URL fields
+    share_id = models.CharField(max_length=32, default="", required=False)
+    share_created_at = models.DateTimeField(allow_null=True, required=False)
+
     class Meta:
         ordering = ["-start_time"]
         constraints = [
@@ -38,25 +46,43 @@ class Trace(models.Model):
                 name="observer_unique_trace_id",
             )
         ]
+        indexes = [
+            models.Index(fields=["trace_id"]),
+            models.Index(fields=["start_time"]),
+            models.Index(fields=["request_id"]),
+            models.Index(fields=["share_id"]),
+            models.Index(fields=["session_id"]),
+        ]
 
     def __str__(self):
         return self.trace_id
 
+    def get_absolute_url(self):
+        """Return the canonical URL for this trace."""
+        return reverse("observer:trace_detail", trace_id=self.trace_id)
+
+    def generate_share_id(self):
+        """Generate a unique share ID for this trace."""
+        self.share_id = secrets.token_urlsafe(24)
+        self.share_created_at = timezone.now()
+        self.save(update_fields=["share_id", "share_created_at"])
+        return self.share_id
+
+    def remove_share_id(self):
+        """Remove the share ID from this trace."""
+        self.share_id = ""
+        self.share_created_at = None
+        self.save(update_fields=["share_id", "share_created_at"])
+
     def duration_ms(self):
         return (self.end_time - self.start_time).total_seconds() * 1000
 
-    def get_trace_summary(self, spans=None):
+    def get_trace_summary(self, spans):
         """Get a concise summary string for toolbar display.
 
         Args:
             spans: Optional list of span objects. If not provided, will query from database.
         """
-        # Get spans from database if not provided
-        if spans is None:
-            spans = list(self.spans.all())
-
-        if not spans:
-            return ""
 
         # Count database queries and track duplicates
         query_counts = {}
@@ -132,9 +158,6 @@ class Trace(models.Model):
             else None
         )
 
-        # Create trace instance
-        # Note: end_time might be None if there are active spans
-        # This is OK since this trace is only used for summaries, not persistence
         return cls(
             trace_id=trace_id,
             start_time=start_time,
@@ -146,9 +169,27 @@ class Trace(models.Model):
             root_span_name=root_span.name if root_span else "",
         )
 
-    def get_annotated_spans(self):
-        """Return spans with annotations and nesting information."""
-        spans = list(self.spans.all().order_by("start_time"))
+    def as_dict(self):
+        spans = [span.span_data for span in self.spans.all().order_by("start_time")]
+
+        return {
+            "trace_id": self.trace_id,
+            "start_time": self.start_time.isoformat(),
+            "end_time": self.end_time.isoformat(),
+            "duration_ms": self.duration_ms(),
+            "summary": self.summary,
+            "root_span_name": self.root_span_name,
+            "request_id": self.request_id,
+            "user_id": self.user_id,
+            "session_id": self.session_id,
+            "spans": spans,
+        }
+
+
+class SpanQuerySet(models.QuerySet):
+    def annotate_spans(self):
+        """Annotate spans with nesting levels and duplicate query warnings."""
+        spans = list(self.order_by("start_time"))
 
         # Build span dictionary for parent lookups
         span_dict = {span.span_id: span for span in spans}
@@ -191,20 +232,6 @@ class Trace(models.Model):
 
         return spans
 
-    def as_dict(self):
-        spans = [span.span_data for span in self.spans.all().order_by("start_time")]
-
-        return {
-            "trace_id": self.trace_id,
-            "start_time": self.start_time.isoformat(),
-            "end_time": self.end_time.isoformat(),
-            "duration_ms": self.duration_ms(),
-            "request_id": self.request_id,
-            "user_id": self.user_id,
-            "session_id": self.session_id,
-            "spans": spans,
-        }
-
 
 @models.register_model
 class Span(models.Model):
@@ -220,6 +247,8 @@ class Span(models.Model):
     status = models.CharField(max_length=50, default="", required=False)
     span_data = models.JSONField(default=dict, required=False)
 
+    objects = SpanQuerySet.as_manager()
+
     class Meta:
         ordering = ["-start_time"]
         constraints = [

plain/observer/otel.py

@@ -45,6 +45,9 @@ def get_current_trace_summary() -> str | None:
         return None
 
     trace_id = f"0x{format_trace_id(current_span.get_span_context().trace_id)}"
+
+    # Technically we're still in the trace... so the duration and stuff could shift slightly
+    # (though we should be at the end of the template, hopefully)
     return processor.get_trace_summary(trace_id)
 
 
@@ -266,6 +269,10 @@ class ObserverSpanProcessor(SpanProcessor):
                         len(trace_info["span_models"]),
                         trace_id,
                     )
+                    # The trace is done now, so we can get a more accurate summary
+                    trace_info["trace"].summary = trace_info["trace"].get_trace_summary(
+                        trace_info["span_models"]
+                    )
                     self._export_trace(trace_info["trace"], trace_info["span_models"])
 
                 # Clean up trace

plain/observer/templates/observer/{_trace_detail.html → trace.html}

@@ -1,70 +1,122 @@
-<div class="flex items-center justify-between mb-3">
-    <div>
-        <h2 class="text-lg font-semibold">{{ trace.root_span_name }}</h2>
-        <div class="text-xs text-stone-500 mt-1">
-            {{ trace.start_time|localtime|strftime("%b %-d, %-I:%M %p") }} • {{ "%.1f"|format(trace.duration_ms() or 0) }}ms
+<header class="flex items-start justify-between mb-2">
+    <h2 class="text-lg font-semibold text-white">{{ trace.root_span_name }}</h2>
+    <div class="flex items-start space-x-2">
+        {% if not is_share_view|default(False) %}
+        {% htmxfragment "share" %}
+        {% if trace.share_id %}
+        <div class="flex items-center h-8 space-x-2 bg-emerald-900/20 border border-emerald-700/50 rounded-md px-2">
+            <svg class="w-4 h-4" fill="currentColor" class="text-emerald-500 flex-shrink-0" viewBox="0 0 16 16">
+                <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+                <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+            </svg>
+            <span class="text-xs text-emerald-400 font-mono block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap mr-2" style="direction: rtl; text-align: left;" id="share-url-{{ trace.id }}">{{ request.get_host() }}{{ url('observer:trace_shared', trace.share_id) }}</span>
+            <button
+                onclick="copyShareUrl(this, '{{ trace.id }}')"
+                data-share-url="{{ request.build_absolute_uri(url('observer:trace_shared', trace.share_id)) }}"
+                class="h-6 w-6 flex items-center justify-center rounded-sm bg-emerald-700 text-emerald-400 hover:bg-emerald-600 cursor-pointer transition-colors flex-shrink-0"
+                title="Copy shareable URL">
+                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+                </svg>
+            </button>
+            <button
+                hx-delete="{{ trace.get_absolute_url() }}"
+                plain-hx-action="share"
+                class="h-6 w-6 flex items-center justify-center rounded-sm bg-white/20 text-white/70 hover:bg-red-600 hover:text-white cursor-pointer transition-colors flex-shrink-0"
+                title="Remove shareable URL">
+                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                </svg>
+            </button>
         </div>
-    </div>
-    <div class="flex items-center space-x-2">
+        {% else %}
         <button
-            onclick="copyTraceAsJson('{{ trace.id }}', this)"
-            class="p-1.5 rounded-sm bg-stone-700 text-stone-300 hover:bg-stone-600 cursor-pointer transition-colors"
-            title="Copy trace data as JSON">
-            <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
-                <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+            hx-post="{{ trace.get_absolute_url() }}"
+            plain-hx-action="share"
+            class="h-8 w-8 flex items-center justify-center rounded-sm bg-white/10 text-white/70 hover:bg-white/20 cursor-pointer transition-colors border border-transparent"
+            title="Generate shareable URL">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
             </svg>
         </button>
-        {% if show_delete_button|default(true) %}
+        {% endif %}
+        {% endhtmxfragment %}
+        {% endif %}
+        <a
+            href="{{ trace.get_absolute_url() }}?format=json"
+            target="_blank"
+            class="h-8 w-8 flex items-center justify-center rounded-sm bg-white/10 text-white/70 hover:bg-white/20 cursor-pointer transition-colors"
+            title="View as JSON">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM4.151 15.29a1.2 1.2 0 0 1-.111-.449h.764a.58.58 0 0 0 .255.384q.105.073.25.114.142.041.319.041.245 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .084-.29.39.39 0 0 0-.152-.326q-.152-.12-.463-.193l-.618-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.352-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.192-.272.528-.422.337-.15.777-.149.456 0 .779.152.326.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.246-.181.9.9 0 0 0-.37-.068q-.324 0-.512.152a.47.47 0 0 0-.185.384q0 .18.144.3a1 1 0 0 0 .404.175l.621.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-3.104-.033a1.3 1.3 0 0 1-.082-.466h.764a.6.6 0 0 0 .074.27.5.5 0 0 0 .454.246q.285 0 .422-.164.137-.165.137-.466v-2.745h.791v2.725q0 .66-.357 1.005-.355.345-.985.345a1.6 1.6 0 0 1-.568-.094 1.15 1.15 0 0 1-.407-.266 1.1 1.1 0 0 1-.243-.39m9.091-1.585v.522q0 .384-.117.641a.86.86 0 0 1-.322.387.9.9 0 0 1-.47.126.9.9 0 0 1-.47-.126.87.87 0 0 1-.32-.387 1.55 1.55 0 0 1-.117-.641v-.522q0-.386.117-.641a.87.87 0 0 1 .32-.387.87.87 0 0 1 .47-.129q.265 0 .47.129a.86.86 0 0 1 .322.387q.117.255.117.641m.803.519v-.513q0-.565-.205-.973a1.46 1.46 0 0 0-.59-.63q-.38-.22-.916-.22-.534 0-.92.22a1.44 1.44 0 0 0-.589.628q-.205.407-.205.975v.513q0 .562.205.973.205.407.589.626.386.217.92.217.536 0 .917-.217.384-.22.589-.626.204-.41.205-.973m1.29-.935v2.675h-.746v-3.999h.662l1.752 2.66h.032v-2.66h.75v4h-.656l-1.761-2.676z"/>
+            </svg>
+        </a>
+        {% if not is_share_view|default(False) %}
         <button
-            hx-delete="?trace_id={{ trace.id }}"
-            plain-hx-action="trace"
-            hx-swap="morph:innerHTML"
-            hx-target="#main-content"
+            hx-delete="{{ trace.get_absolute_url() }}"
+            hx-swap="none"
             hx-confirm="Delete this trace?"
-            class="p-1.5 rounded-sm bg-stone-700 text-stone-300 hover:bg-red-600 hover:text-white cursor-pointer transition-colors"
+            class="h-8 w-8 flex items-center justify-center rounded-sm bg-white/10 text-white/70 hover:bg-red-600 hover:text-white cursor-pointer transition-colors"
             title="Delete this trace">
-            <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
                 <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
                 <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
             </svg>
         </button>
         {% endif %}
     </div>
-</div>
-<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-stone-500 mb-4">
-    <div>
-        <span class="text-stone-400">Trace ID:</span> <span class="font-mono">{{ trace.trace_id }}</span>
-    </div>
-    {% if trace.request_id %}
+</header>
+<div class="space-y-2">
+    {% if trace.summary %}
     <div>
-        <span class="text-stone-400">Request:</span> <span class="font-mono">{{ trace.request_id }}</span>
+        <span class="text-xs inline-flex items-center px-2 py-0.5 bg-white/10 text-white/80 rounded-md border border-white/10">
+            {{ trace.summary }}
+        </span>
     </div>
     {% endif %}
-    {% if trace.user_id %}
-    <div>
-        <span class="text-stone-400">User:</span> {{ trace.user_id }}
+    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/60">
+        <div>
+            <span class="text-white/50">Trace ID:</span> {{ trace.trace_id }}
+        </div>
+        <div>
+            <span class="text-white/50">Started:</span> {{ trace.start_time|localtime|strftime("%b %-d, %-I:%M %p") }}
+        </div>
+        <div>
+            <span class="text-white/50">Duration:</span> {{ "%.1f"|format(trace.duration_ms() or 0) }}ms
+        </div>
     </div>
-    {% endif %}
-    {% if trace.session_id %}
-    <div>
-        <span class="text-stone-400">Session:</span> {{ trace.session_id }}
+    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/60">
+        {% if trace.request_id %}
+        <div>
+            <span class="text-white/50">Request:</span> {{ trace.request_id }}
+        </div>
+        {% endif %}
+        {% if trace.user_id %}
+        <div>
+            <span class="text-white/50">User:</span> {{ trace.user_id }}
+        </div>
+        {% endif %}
+        {% if trace.session_id %}
+        <div>
+            <span class="text-white/50">Session:</span> {{ trace.session_id }}
+        </div>
+        {% endif %}
     </div>
-    {% endif %}
 </div>
 
 <!-- Spans waterfall visualization -->
 <div class="mt-4 space-y-1 text-xs">
-    {% for span in trace.get_annotated_spans() %}
+    {% for span in trace.spans.all().annotate_spans() %}
 
     <!-- Calculate relative positioning for waterfall -->
     {% set span_start_offset = ((span.start_time - trace.start_time).total_seconds() * 1000) %}
     {% 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: {{ span.level * 1 }}rem;" class="border-l border-stone-700">
-        <details id="{{ trace.id }}-span-{{ loop.index }}" class="rounded bg-white/5 hover:bg-white/10 transition-colors min-w-[600px] ml-px">
-            <summary class="cursor-pointer p-2 list-none [&::-webkit-details-marker]:hidden">
+    <div style="padding-left: {{ span.level * 1 }}rem;" class="border-l border-white/20">
+        <details id="{{ trace.id }}-span-{{ loop.index }}" class="rounded bg-white/5 min-w-[600px] ml-px">
+            <summary class="cursor-pointer hover:bg-white/10 transition-colors p-2 list-none [&::-webkit-details-marker]:hidden">
                 <div class="flex items-center">
                     <div class="w-4 h-4 mr-2 flex items-center justify-center">
                         <svg class="w-3 h-3 transform transition-transform details-open:rotate-90" fill="currentColor" viewBox="0 0 20 20">
@@ -73,10 +125,10 @@
                     </div>
 
                     <div class="w-80 flex items-center space-x-2">
-                        <div class="text-stone-400 whitespace-nowrap">
+                        <div class="text-white/40 whitespace-nowrap">
                             {{ span.start_time|localtime|strftime("%-I:%M:%S %p") }}
                         </div>
-                        <div class="flex-grow whitespace-nowrap truncate">{{ span.name }}</div>
+                        <div class="flex-grow whitespace-nowrap truncate text-white/90">{{ span.name }}</div>
 
                         {% if span.annotations %}
                         <div class="flex items-center space-x-1 flex-shrink-0">
@@ -98,7 +150,7 @@
                     </div>
 
                     <div class="flex-1 px-4 min-w-[300px]">
-                        <div class="relative h-6 bg-stone-800/50 rounded-sm">
+                        <div class="relative h-6 bg-white/2 rounded-sm">
                             <div
                                 class="absolute top-1 bottom-1 rounded-sm transition-opacity hover:opacity-80
                                         data-[kind='SERVER']:bg-blue-500
@@ -106,7 +158,7 @@
                                         data-[kind='CONSUMER']:bg-amber-500
                                         data-[kind='PRODUCER']:bg-purple-500
                                         data-[kind='INTERNAL']:bg-gray-500
-                                        bg-stone-600"
+                                        bg-white/30"
                                 data-kind="{{ span.kind }}"
                                 style="left: {{ start_percent }}%; width: {{ width_percent }}%;"
                                 title="{{ span.name }} - {{ span.duration_ms() }}ms">
@@ -120,12 +172,12 @@
                     </div>
                 </div>
             </summary>
-            <div class="p-4 pt-2 bg-stone-900/50 border-t border-stone-700">
+            <div class="p-4 pt-2 bg-white/3 border-t border-white/20">
                 {% if span.sql_query %}
-                <div class="mb-6 bg-stone-800 rounded-lg border border-stone-600 overflow-hidden
+                <div class="mb-6 bg-white/3 rounded-lg border border-white/20 overflow-hidden
                             {% if span.annotations %}ring-2 ring-amber-500/50{% endif %}">
-                    <div class="bg-stone-700 px-4 py-2 border-b border-stone-600 flex items-center justify-between">
-                        <h4 class="text-sm font-semibold text-emerald-500 flex items-center">
+                    <div class="bg-white/10 px-4 py-2 border-b border-white/20 flex items-center justify-between">
+                        <h4 class="text-sm font-semibold text-emerald-400 flex items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database-fill w-4 h-4 mr-2" viewBox="0 0 16 16">
                                 <path d="M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4s-.875 1.755-1.904 2.223C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777C2.875 5.755 2 5.007 2 4s.875-1.755 1.904-2.223"/>
                                 <path d="M2 6.161V7c0 1.007.875 1.755 1.904 2.223C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777C13.125 8.755 14 8.007 14 7v-.839c-.457.432-1.004.751-1.49.972C11.278 7.693 9.682 8 8 8s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"/>
@@ -152,16 +204,16 @@
                         {% endif %}
                     </div>
                     <div class="p-4">
-                        <pre class="text-xs text-stone-200 font-mono whitespace-pre-wrap overflow-x-auto"><code>{{ span.get_formatted_sql() }}</code></pre>
+                        <pre class="text-xs text-white/80 font-mono whitespace-pre-wrap overflow-x-auto"><code>{{ span.get_formatted_sql() }}</code></pre>
 
                         {% if span.sql_query_params %}
-                        <div class="mt-4 pt-4 border-t border-stone-600">
-                            <h5 class="text-xs font-semibold text-stone-400 mb-2">Query Parameters</h5>
+                        <div class="mt-4 pt-4 border-t border-white/20">
+                            <h5 class="text-xs font-semibold text-white/40 mb-2">Query Parameters</h5>
                             <div class="space-y-1">
                                 {% for param_key, param_value in span.sql_query_params.items() %}
                                 <div class="flex text-xs">
-                                    <span class="text-stone-500 min-w-0 flex-shrink-0 pr-2 font-mono">{{ param_key }}:</span>
-                                    <span class="text-stone-300 break-words font-mono">{{ param_value }}</span>
+                                    <span class="text-white/50 min-w-0 flex-shrink-0 pr-2 font-mono">{{ param_key }}:</span>
+                                    <span class="text-white/70 break-words font-mono">{{ param_value }}</span>
                                 </div>
                                 {% endfor %}
                             </div>
@@ -189,18 +241,18 @@
 
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <div>
-                        <h4 class="text-sm font-semibold text-stone-300 mb-3">Basic Information</h4>
+                        <h4 class="text-sm font-semibold text-white/70 mb-3">Basic Information</h4>
                         <div class="space-y-2 text-xs">
                             <div class="flex">
-                                <span class="text-stone-400 w-20">ID:</span>
-                                <span class="text-stone-200 font-mono">{{ span.span_id }}</span>
+                                <span class="text-white/40 w-20">ID:</span>
+                                <span class="text-white/80 font-mono">{{ span.span_id }}</span>
                             </div>
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Name:</span>
-                                <span class="text-stone-200">{{ span.name }}</span>
+                                <span class="text-white/40 w-20">Name:</span>
+                                <span class="text-white/80">{{ span.name }}</span>
                             </div>
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Kind:</span>
+                                <span class="text-white/40 w-20">Kind:</span>
                                 <span class="px-2 py-0.5 rounded text-xs font-medium
                                             data-[kind='SERVER']:bg-blue-500/20 data-[kind='SERVER']:text-blue-300
                                             data-[kind='CLIENT']:bg-emerald-500/20 data-[kind='CLIENT']:text-emerald-300
@@ -213,32 +265,32 @@
                                 </span>
                             </div>
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Duration:</span>
-                                <span class="text-stone-200">{{ "%.2f"|format(span.duration_ms() or 0) }}ms</span>
+                                <span class="text-white/40 w-20">Duration:</span>
+                                <span class="text-white/80">{{ "%.2f"|format(span.duration_ms() or 0) }}ms</span>
                             </div>
                             {% if span.parent_id %}
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Parent:</span>
-                                <span class="text-stone-200 font-mono text-xs">{{ span.parent_id }}</span>
+                                <span class="text-white/40 w-20">Parent:</span>
+                                <span class="text-white/80 font-mono text-xs">{{ span.parent_id }}</span>
                             </div>
                             {% endif %}
                         </div>
                     </div>
 
                     <div>
-                        <h4 class="text-sm font-semibold text-stone-300 mb-3">Timing</h4>
+                        <h4 class="text-sm font-semibold text-white/70 mb-3">Timing</h4>
                         <div class="space-y-2 text-xs">
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Started:</span>
-                                <span class="text-stone-200">{{ span.start_time|localtime|strftime("%-I:%M:%S.%f %p") }}</span>
+                                <span class="text-white/40 w-20">Started:</span>
+                                <span class="text-white/80">{{ span.start_time|localtime|strftime("%-I:%M:%S.%f %p") }}</span>
                             </div>
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Ended:</span>
-                                <span class="text-stone-200">{{ span.end_time|localtime|strftime("%-I:%M:%S.%f %p") }}</span>
+                                <span class="text-white/40 w-20">Ended:</span>
+                                <span class="text-white/80">{{ span.end_time|localtime|strftime("%-I:%M:%S.%f %p") }}</span>
                             </div>
                             {% if span.status and span.status != '' and span.status != 'UNSET' %}
                             <div class="flex">
-                                <span class="text-stone-400 w-20">Status:</span>
+                                <span class="text-white/40 w-20">Status:</span>
                                 <span class="px-2 py-0.5 rounded text-xs font-medium
                                             data-[status='ERROR']:bg-red-500/20 data-[status='ERROR']:text-red-300
                                             data-[status='OK']:bg-green-500/20 data-[status='OK']:text-green-300
@@ -254,13 +306,13 @@
 
                 {% if span.attributes %}
                 <div class="mt-6">
-                    <h4 class="text-sm font-semibold text-stone-300 mb-3">Attributes</h4>
-                    <div class="bg-stone-800/50 rounded p-3 max-h-48 overflow-y-auto">
+                    <h4 class="text-sm font-semibold text-white/70 mb-3">Attributes</h4>
+                    <div class="bg-white/3 rounded p-3 max-h-48 overflow-y-auto">
                         <div class="space-y-1 text-xs">
                             {% for key, value in span.attributes.items() %}
                             <div class="flex">
-                                <span class="text-stone-400 min-w-0 flex-shrink-0 pr-2">{{ key }}:</span>
-                                <span class="text-stone-200 break-words">{{ value }}</span>
+                                <span class="text-white/40 min-w-0 flex-shrink-0 pr-2">{{ key }}:</span>
+                                <span class="text-white/80 break-words">{{ value }}</span>
                             </div>
                             {% endfor %}
                         </div>
@@ -270,14 +322,14 @@
 
                 {% if span.events %}
                 <div class="mt-6">
-                    <h4 class="text-sm font-semibold text-stone-300 mb-3">Events ({{ span.events|length }})</h4>
-                    <div class="bg-stone-800/50 rounded p-3 max-h-48 overflow-y-auto">
+                    <h4 class="text-sm font-semibold text-white/70 mb-3">Events ({{ span.events|length }})</h4>
+                    <div class="bg-white/3 rounded p-3 max-h-48 overflow-y-auto">
                         <div class="space-y-3 text-xs">
                             {% for event in span.events %}
-                            <div class="border-l-2 border-stone-600 pl-3">
+                            <div class="border-l-2 border-white/20 pl-3">
                                 <div class="flex items-center justify-between mb-1">
-                                    <div class="text-stone-200 font-medium">{{ event.name }}</div>
-                                    <div class="text-stone-400 text-xs">
+                                    <div class="text-white/80 font-medium">{{ event.name }}</div>
+                                    <div class="text-white/40 text-xs">
                                         {% set formatted_time = span.format_event_timestamp(event.timestamp) %}
                                         {% if formatted_time.__class__.__name__ == 'datetime' %}
                                             {{ formatted_time|localtime|strftime("%-I:%M:%S.%f %p") }}
@@ -290,8 +342,8 @@
                                 <div class="space-y-1">
                                     {% for key, value in event.attributes.items() %}
                                     <div class="flex">
-                                        <span class="text-stone-400 min-w-0 flex-shrink-0 pr-2">{{ key }}:</span>
-                                        <pre class="text-stone-200 whitespace-pre-wrap break-words font-mono text-xs">{{ value }}</pre>
+                                        <span class="text-white/40 min-w-0 flex-shrink-0 pr-2">{{ key }}:</span>
+                                        <pre class="text-white/80 whitespace-pre-wrap break-words font-mono text-xs">{{ value }}</pre>
                                     </div>
                                     {% endfor %}
                                 </div>
@@ -305,13 +357,13 @@
 
                 {% if span.links %}
                 <div class="mt-6">
-                    <h4 class="text-sm font-semibold text-stone-300 mb-3">Links ({{ span.links|length }})</h4>
+                    <h4 class="text-sm font-semibold text-white/70 mb-3">Links ({{ span.links|length }})</h4>
                     <div class="bg-stone-800/50 rounded p-3">
                         <div class="space-y-2 text-xs">
                             {% for link in span.links %}
-                            <div class="border-l-2 border-stone-600 pl-2">
-                                <div class="text-stone-200 font-mono">{{ link.context.trace_id }}</div>
-                                <div class="text-stone-400 font-mono">{{ link.context.span_id }}</div>
+                            <div class="border-l-2 border-white/20 pl-2">
+                                <div class="text-white/80 font-mono">{{ link.context.trace_id }}</div>
+                                <div class="text-white/40 font-mono">{{ link.context.span_id }}</div>
                             </div>
                             {% endfor %}
                         </div>
@@ -334,31 +386,36 @@
 </style>
 
 <script>
-async function copyTraceAsJson(traceId, button) {
+async function copyShareUrl(button, traceId) {
     try {
-        const response = await fetch(`?trace_id=${traceId}&format=json`);
-        const data = await response.json();
-
-        // Pretty print the JSON
-        const jsonString = JSON.stringify(data, null, 2);
+        const shareUrl = button.getAttribute('data-share-url');
 
         // Copy to clipboard
-        await navigator.clipboard.writeText(jsonString);
+        await navigator.clipboard.writeText(shareUrl);
 
-        // Show success feedback
-        const originalTitle = button.title;
-        button.title = 'Copied!';
-        button.classList.remove('bg-stone-700', 'hover:bg-stone-600');
+        // 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.title = originalTitle;
+            button.innerHTML = originalHTML;
             button.classList.remove('bg-green-600', 'hover:bg-green-700');
-            button.classList.add('bg-stone-700', 'hover:bg-stone-600');
+            button.classList.add('bg-emerald-700', 'hover:bg-emerald-600');
         }, 2000);
     } catch (error) {
-        console.error('Failed to copy trace data:', error);
-        alert('Failed to copy trace data. See console for details.');
+        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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trace {{ trace.trace_id }} - Observer</title>
+    {% tailwind_css %}
+    {% htmx_js %}
+</head>
+<body class="bg-stone-950 text-stone-300 min-h-screen">
+    <div class="container mx-auto p-6 max-w-6xl">
+        <div class="mb-4">
+            <a href="{{ url('observer:traces') }}" class="text-stone-400 hover:text-stone-200 text-sm flex items-center gap-1">
+                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
+                </svg>
+                Back to traces
+            </a>
+        </div>
+
+        {% include "observer/trace.html" %}
+    </div>
+</body>
+</html>