Skip to content

feat: add opik traces panel #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
silviudr merged 2 commits into from
Jan 22, 2026
Merged

feat: add opik traces panel #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac581f6
feat: add opik traces panel
silviudr Jan 21, 2026
b08baf6
fix: fix styling issues
silviudr Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
36 changes: 36 additions & 0 deletions apps/api/static/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
};

// ==========================================================================
Expand Down Expand Up @@ -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)
// ==========================================================================
Expand Down Expand Up @@ -558,6 +589,7 @@ function renderValidation(validation) {
renderMetricsGrid(null);
renderCoverage(null);
renderErrors([]);
renderTraceLink(false);
return;
}

Expand All @@ -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);
}

/**
Expand Down Expand Up @@ -964,6 +999,7 @@ window.PlanProof = {
showLoadingState,
hideLoadingState,
renderApiError,
renderTraceLink,
generatePlan,
formatTime,
};
Expand Down
16 changes: 16 additions & 0 deletions apps/api/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
52 changes: 52 additions & 0 deletions apps/api/static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -991,6 +993,56 @@ body {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --------------------------------------------------------------------------
Trace Link Section (PR 4.1)
-------------------------------------------------------------------------- */
.trace-section {
margin-top: auto;

Copilot AI Jan 21, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The margin-top: auto property is used here, but the parent .proof-sidebar element is not configured as a flexbox container (it only has background-color, padding, and overflow-y). For margin-top: auto to work and push this element to the bottom, the parent needs display: flex and flex-direction: column. Without this, the margin-top won't achieve the intended layout effect.

Copilot uses AI. Check for mistakes.
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-violet);
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
-------------------------------------------------------------------------- */
Expand Down
2 changes: 1 addition & 1 deletion docs/assistant_prompts/claude_tasks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).


---
Expand Down