From ac581f6294eea1f9fbba31788a6d1ef6819f5417 Mon Sep 17 00:00:00 2001
From: Silviu Druma <silviudr@gmail.com>
Date: Wed, 21 Jan 2026 07:28:03 -0500
Subject: [PATCH 1/2] feat: add opik traces panel

---
 CONTRIBUTING.md                        |  2 +-
 apps/api/static/app.js                 | 36 +++++++++++++++++++
 apps/api/static/index.html             | 16 +++++++++
 apps/api/static/styles.css             | 50 ++++++++++++++++++++++++++
 docs/assistant_prompts/claude_tasks.md |  2 +-
 5 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b071d57..b0d66d0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -184,7 +184,7 @@ PlanProof values correctness over persuasion.
 - [X] PR 3.2: Defensive Rendering
 - [X] PR 3.3: Failure/Rejection Styles
 - [X] PR 3.4: Assumptions & Questions (Show the AI's "Why").
-- [ ] PR 4.1: Opik Trace Link (Show the "View Trace" button for the judges).
+- [X] PR 4.1: Opik Trace Link (Show the "View Trace" button for the judges).
 
 ## Backend Lane (Codex)
 
diff --git a/apps/api/static/app.js b/apps/api/static/app.js
index 1d74a33..e8c5dc5 100644
--- a/apps/api/static/app.js
+++ b/apps/api/static/app.js
@@ -55,6 +55,10 @@ const elements = {
   // Errors
   errorsSection: document.getElementById('errors-section'),
   errorsList: document.getElementById('errors-list'),
+  
+  // Opik Trace Link (PR 4.1)
+  traceSection: document.getElementById('trace-section'),
+  traceLink: document.getElementById('trace-link'),
 };
 
 // ==========================================================================
@@ -211,6 +215,33 @@ function renderErrors(errors, isPriority = false) {
   });
 }
 
+// ==========================================================================
+// Opik Trace Link (PR 4.1)
+// ==========================================================================
+
+/**
+ * Shows or hides the Opik trace link section.
+ * @param {boolean} visible - Whether to show the trace link
+ * @param {string|null} traceUrl - Optional custom trace URL
+ */
+function renderTraceLink(visible, traceUrl = null) {
+  const section = elements.traceSection;
+  const link = elements.traceLink;
+  if (!section) return;
+
+  if (!visible) {
+    section.classList.add('trace-section--hidden');
+    return;
+  }
+
+  section.classList.remove('trace-section--hidden');
+  
+  // Update URL if provided (for future per-trace linking)
+  if (traceUrl && link) {
+    link.href = traceUrl;
+  }
+}
+
 // ==========================================================================
 // Metrics Grid Rendering (PR 1.4)
 // ==========================================================================
@@ -558,6 +589,7 @@ function renderValidation(validation) {
     renderMetricsGrid(null);
     renderCoverage(null);
     renderErrors([]);
+    renderTraceLink(false);
     return;
   }
 
@@ -579,6 +611,9 @@ function renderValidation(validation) {
   // Render errors with priority highlighting if failed (PR 3.3)
   const isFailed = status === 'fail';
   renderErrors(validation.errors || [], isFailed);
+  
+  // Show trace link after validation is rendered (PR 4.1)
+  renderTraceLink(true);
 }
 
 /**
@@ -964,6 +999,7 @@ window.PlanProof = {
   showLoadingState,
   hideLoadingState,
   renderApiError,
+  renderTraceLink,
   generatePlan,
   formatTime,
 };
diff --git a/apps/api/static/index.html b/apps/api/static/index.html
index 8872bcd..7ccbb5f 100644
--- a/apps/api/static/index.html
+++ b/apps/api/static/index.html
@@ -213,6 +213,22 @@ <h3 class="section-title section-title--error">Errors</h3>
             <!-- Errors will be rendered here -->
           </ul>
         </div>
+        
+        <!-- Opik Trace Link (PR 4.1) -->
+        <div id="trace-section" class="trace-section trace-section--hidden">
+          <a 
+            id="trace-link" 
+            href="https://www.comet.com/opik/planproof" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="btn-trace"
+            title="Inspect the agentic logic, deterministic logs, and LLM spans in the Opik observability suite."
+          >
+            <span class="trace-icon">🔍</span>
+            <span class="trace-text">View Technical Trace</span>
+            <span class="trace-external">↗</span>
+          </a>
+        </div>
       </aside>
     </main>
   </div>
diff --git a/apps/api/static/styles.css b/apps/api/static/styles.css
index bab642c..419021b 100644
--- a/apps/api/static/styles.css
+++ b/apps/api/static/styles.css
@@ -991,6 +991,56 @@ body {
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
+/* --------------------------------------------------------------------------
+   Trace Link Section (PR 4.1)
+   -------------------------------------------------------------------------- */
+.trace-section {
+  margin-top: auto;
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-bg-elevated);
+}
+
+.trace-section--hidden {
+  display: none;
+}
+
+.btn-trace {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-system);
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background-color: transparent;
+  border: 1px solid var(--color-bg-elevated);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.btn-trace:hover {
+  color: var(--color-text);
+  border-color: var(--color-accent);
+  background-color: rgba(139, 92, 246, 0.1);
+}
+
+.trace-icon {
+  font-size: 0.875rem;
+}
+
+.trace-text {
+  letter-spacing: 0.025em;
+}
+
+.trace-external {
+  font-size: 0.625rem;
+  opacity: 0.7;
+}
+
 /* --------------------------------------------------------------------------
    Utility Classes
    -------------------------------------------------------------------------- */
diff --git a/docs/assistant_prompts/claude_tasks.md b/docs/assistant_prompts/claude_tasks.md
index d7e6320..6f96eca 100644
--- a/docs/assistant_prompts/claude_tasks.md
+++ b/docs/assistant_prompts/claude_tasks.md
@@ -44,7 +44,7 @@ You are Claude working as a coding assistant in VS Code.
 - [X] **PR 3.2:** Implement defensive rendering (prevent crashes if `metrics` or `plan` fields are missing).
 - [X] **PR 3.3:** Apply "Rejected" styling (gray/muted) to plans where `validation.status == "fail"`.
 - [X] **PR 3.4:** Assumptions & Questions (Show the AI's "Why").
-- [ ] **PR 4.1:** Opik Trace Link (Show the "View Trace" button for the judges).
+- [X] **PR 4.1:** Opik Trace Link (Show the "View Trace" button for the judges).
 
 
 ---

From b08baf69d18d98a0b43a51945d3b35be44e34d30 Mon Sep 17 00:00:00 2001
From: Silviu Druma <silviudr@gmail.com>
Date: Wed, 21 Jan 2026 07:41:17 -0500
Subject: [PATCH 2/2] fix: fix styling issues

---
 apps/api/static/styles.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/api/static/styles.css b/apps/api/static/styles.css
index 419021b..8015f8f 100644
--- a/apps/api/static/styles.css
+++ b/apps/api/static/styles.css
@@ -470,6 +470,8 @@ body {
    Proof Sidebar (Validation)
    -------------------------------------------------------------------------- */
 .proof-sidebar {
+  display: flex;
+  flex-direction: column;
   background-color: var(--color-bg-primary);
   padding: var(--space-xl);
   overflow-y: auto;
@@ -1024,7 +1026,7 @@ body {
 
 .btn-trace:hover {
   color: var(--color-text);
-  border-color: var(--color-accent);
+  border-color: var(--color-accent-violet);
   background-color: rgba(139, 92, 246, 0.1);
 }