[OPIK-6761] [FE] feat: rework Optimization runs empty state to match Figma by awkoy · Pull Request #7025 · comet-ml/opik

awkoy · 2026-06-11T06:17:34Z

Details

Reworks the Optimization runs empty state to match the Figma design (OPIK-6761). The previous state had two action cards; the design has three, with refreshed copy, icons, and layout. Frontend-only — no backend, migrations, or v1 changes; the rich empty state remains gated behind the OPTIMIZATION_STUDIO_ENABLED flag + canUseOptimizationStudio permission, with the PageEmptyState fallback untouched.

Each card maps to an existing entry point:

Run a demo example → Optimization Studio wizard pre-filled with the opik-chatbot template (/optimizations/new?template=opik-chatbot).
Use the Optimization Studio → blank Studio wizard (/optimizations/new).
Optimize via SDK (new) → opens the existing AddOptimizationDialog (SDK starter code: pip install opik-optimizer + a credential-injected snippet + Colab link).

Also: consolidated studio navigation into a single navigateToStudio() helper mirroring StudioTemplates, aligned card layout/typography/icon colors to the design tokens (comet-*, text-chart-blue|purple|burgundy), and renamed the prop onOptimizeClick → onOptimizeViaSdkClick for clarity.

Change checklist

User facing
Documentation update

Issues

OPIK-6761

AI-WATERMARK

AI-WATERMARK: yes

Tools: Claude-Code
Model: Opus-4.8
Scope: All files
Human verification: Yes — verified 1:1 against the Figma and exercised all three cards in the running app (local, Chrome).

Testing

Commands (from apps/opik-frontend):

npx eslint on both changed files — 0 problems
npx tsc --noEmit (project-wide) — no errors in the changed files

Manual UI (local process mode, Chrome, on an empty project) — temporarily forced the flagged branch to render OptimizationsEmptyState, then:

Compared the rendered empty state side-by-side with the Figma node (642-30557) — cards, order, copy, icon colors (blue/purple/burgundy), icon+title-row / description-below layout, "View docs" button, and right-side illustration all match.
Run a demo example → navigates to /optimizations/new?template=opik-chatbot; Studio form pre-filled (Name "Opik chatbot optimization", "Demo - Opik Chatbot" dataset, G-Eval metric).
Use the Optimization Studio → navigates to /optimizations/new; blank Studio wizard.
Optimize via SDK → opens the "Start optimization run" dialog with pip install opik-optimizer + live SDK snippet + Colab link.
Reverted the temporary flag override before committing (not part of the diff).

Not run: automated component tests — this is a presentational empty state with no existing test coverage for the component; behavior was verified manually end-to-end.

Notes for reviewers:

Title kept as "No optimization runs yet" (plural) to match the page heading and product wording; the Figma reads singular ("run"), which looks like a design typo — happy to flip if intended.
Title uses comet-title-s (18px), consistent with other empty states (PageEmptyState); the Figma token is 16px but the codebase has no 16px title utility.

Documentation

N/A — no user-facing docs change.

🤖 Generated with Claude Code

…ion cards (OPIK-6761) Replace the two-card Optimization runs empty state with the three-card Figma design: "Run a demo example", "Use the Optimization Studio", and a new "Optimize via SDK" card. Each card maps to an existing entry point: - Run a demo example -> Studio wizard pre-filled with the opik-chatbot template - Use the Optimization Studio -> blank Studio wizard - Optimize via SDK -> AddOptimizationDialog (SDK starter code) Consolidate the studio navigation into a single navigateToStudio() helper mirroring StudioTemplates, align card layout/typography/icon colors to the design tokens, and rename the prop onOptimizeClick -> onOptimizeViaSdkClick. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

baz-reviewer · 2026-06-11T06:23:03Z

          <button
            type="button"
-            onClick={onOptimizeClick}
-            className="flex items-start gap-3 rounded-md border p-4 text-left transition-colors hover:border-primary hover:bg-primary-100"
+            onClick={() => navigateToStudio("opik-chatbot")}
+            className="flex flex-col gap-1 rounded-md border p-4 text-left transition-colors hover:border-primary hover:bg-primary-100"
          >
-            <SquareDashedMousePointer className="mt-0.5 size-5 shrink-0 text-chart-green" />
-            <div className="flex flex-col gap-0.5">
+            <span className="flex items-center gap-2">
+              <BotMessageSquare className="size-4 shrink-0 text-chart-blue" />
              <span className="comet-body-s-accented text-foreground">
-                Optimize your prompt
-              </span>
-              <span className="comet-body-s text-muted-slate">
-                Start from scratch and configure your own optimization setting
+                Run a demo example
              </span>
-            </div>
+            </span>
+            <span className="comet-body-xs text-muted-slate">


OptimizationsEmptyState duplicates the CTA card JSX three times; should we extract an ActionCard helper (or map configs) so the shared layout lives in one place?

Want Baz to fix this for you? Activate Fixer

Commit b34fdf3 addressed this comment by extracting the repeated CTA markup into a reusable ActionCard component and rendering the cards from an actionCards config array. This removes the duplicated JSX and centralizes the shared layout in one place.

github-actions · 2026-06-11T10:21:40Z

🔄 Test environment deployment process has started

Phase 1: Deploying base version 2.0.62-5595 (from main branch) if environment doesn't exist
Phase 2: Building new images from PR branch feat/opik-6761-optimization-empty-state
Phase 3: Will deploy newly built version after build completes

You can monitor the progress here.

CometActions · 2026-06-11T10:30:37Z

✅ Test environment is now available!

To configure additional Environment variables for your environment, run [Deploy Opik AdHoc Environment workflow] (https://github.com/comet-ml/comet-deployment/actions/workflows/deploy_opik_adhoc_env.yaml)

Access Information

URL: https://pr-7025.dev.comet.com
Cluster: comet-ml-development
Namespace: pr-7025
Version: 2.0.62-7025-merge-2262
Application logs: View in Grafana

The deployment has completed successfully and the version has been verified.

…te (OPIK-6761) Address review feedback: the three CTA cards duplicated identical layout JSX. Extract a single `ActionCard` component driven by an `actionCards` config array so the shared layout lives in one place. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

baz-reviewer · 2026-06-11T16:29:41Z

+  const navigateToStudio = (templateId?: string) => {
    navigate({
      to: "/$workspaceName/projects/$projectId/optimizations/new",
      params: { workspaceName, projectId: activeProjectId! },
-      search: { template: "opik-chatbot" },
+      search: templateId ? { template: templateId } : undefined,
    });
  };


navigateToStudio duplicates handleTemplateClick's routing logic, should we reuse that helper or extract a shared useOptimizationStudioNavigation hook?

Want Baz to fix this for you? Activate Fixer

Commit ecac02a addressed this comment by extracting the shared navigation logic into useNavigateToOptimizationStudio and using it from both OptimizationsEmptyState and StudioTemplates. This removes the duplicated routing code and centralizes the Optimization Studio navigation path in one hook.

CometActions · 2026-06-12T05:45:14Z

🌙 Nightly cleanup: The test environment for this PR (pr-7025) has been cleaned up to free cluster resources. PVCs are preserved — re-deploy to restore the environment.

…io hook (OPIK-6761) Address review feedback: OptimizationsEmptyState.navigateToStudio and StudioTemplates.handleTemplateClick duplicated the same project-scoped /optimizations/new routing. Extract a shared useNavigateToOptimizationStudio hook and use it in both, so the routing lives in one place. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

aadereiko

LGTM!

…Figma (#7025) * feat(optimizations): rework empty state to match Figma with three action cards (OPIK-6761) Replace the two-card Optimization runs empty state with the three-card Figma design: "Run a demo example", "Use the Optimization Studio", and a new "Optimize via SDK" card. Each card maps to an existing entry point: - Run a demo example -> Studio wizard pre-filled with the opik-chatbot template - Use the Optimization Studio -> blank Studio wizard - Optimize via SDK -> AddOptimizationDialog (SDK starter code) Consolidate the studio navigation into a single navigateToStudio() helper mirroring StudioTemplates, align card layout/typography/icon colors to the design tokens, and rename the prop onOptimizeClick -> onOptimizeViaSdkClick. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * refactor(optimizations): extract ActionCard + config map in empty state (OPIK-6761) Address review feedback: the three CTA cards duplicated identical layout JSX. Extract a single `ActionCard` component driven by an `actionCards` config array so the shared layout lives in one place. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * refactor(optimizations): extract shared useNavigateToOptimizationStudio hook (OPIK-6761) Address review feedback: OptimizationsEmptyState.navigateToStudio and StudioTemplates.handleTemplateClick duplicated the same project-scoped /optimizations/new routing. Extract a shared useNavigateToOptimizationStudio hook and use it in both, so the routing lives in one place. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

awkoy requested a review from a team as a code owner June 11, 2026 06:17

github-actions Bot assigned awkoy Jun 11, 2026

github-actions Bot added Frontend typescript *.ts *.tsx labels Jun 11, 2026

baz-reviewer Bot reviewed Jun 11, 2026

View reviewed changes

awkoy added the test-environment Deploy Opik adhoc environment label Jun 11, 2026

baz-reviewer Bot reviewed Jun 11, 2026

View reviewed changes

CometActions removed the test-environment Deploy Opik adhoc environment label Jun 12, 2026

aadereiko approved these changes Jun 12, 2026

View reviewed changes

awkoy merged commit 95a9833 into main Jun 12, 2026
10 checks passed

awkoy deleted the feat/opik-6761-optimization-empty-state branch June 12, 2026 10:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[OPIK-6761] [FE] feat: rework Optimization runs empty state to match Figma#7025

[OPIK-6761] [FE] feat: rework Optimization runs empty state to match Figma#7025
awkoy merged 3 commits into
mainfrom
feat/opik-6761-optimization-empty-state

awkoy commented Jun 11, 2026

Uh oh!

baz-reviewer Bot Jun 11, 2026

Uh oh!

baz-reviewer Bot Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

CometActions commented Jun 11, 2026

Uh oh!

baz-reviewer Bot Jun 11, 2026

Uh oh!

baz-reviewer Bot Jun 12, 2026

Uh oh!

CometActions commented Jun 12, 2026

Uh oh!

aadereiko left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

awkoy commented Jun 11, 2026

Details

Change checklist

Issues

AI-WATERMARK

Testing

Documentation

Uh oh!

baz-reviewer Bot Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

baz-reviewer Bot Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

CometActions commented Jun 11, 2026

Access Information

Uh oh!

baz-reviewer Bot Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

baz-reviewer Bot Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

CometActions commented Jun 12, 2026

Uh oh!

aadereiko left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants