-
[OPIK-7041] [FE] feat: Optimization runs list — columns, Item source, Discarded + refactors (#7227)
frostbyte_neo 发布于
2026-07-08 09:01:16 +00:00 - [OPIK-7041] [FE] feat: Optimization runs list redesign + column/refactor cleanup
Align the v2 Optimization runs list to the Figma (562:37189):
- Name is the first column; add Run ID / Algorithm / Metric and reuse the
Experiments "Item source" cell (renamed from "Dataset name", with the
missing icon tooltip). New columns ship available-but-hidden, matching the
Figma default-visible set (Name, Start time, Status, Pass rate, Accuracy,
Latency, Cost, Opt. cost). - Rename trial status "Pruned" -> "Discarded" (v2 label only; key unchanged).
Fold-in refactors (v2 only):
- Extract OptimizationsColumns + OptimizationsToolbar; slim OptimizationsPage.
- Drop the ghost
deploycolumn and bump column-prefs keys v1 -> v2. - Gate the 30s list polling on in-progress runs via an additive, v1-safe
param on the shared useOptimizationsView hook. - Remove the orphaned v2 DatasetNameCell.
Implements OPIK-7041 (part of OPIK_6528).
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- fix(optimizations): show Item source name when dataset id is absent
ItemSourceCell rendered "-" when the row had no linkable id, so an
optimization row with a dataset_name but no dataset_id (the REST type
makes it optional) lost its source label. Fall back to the name (no link)
instead of a bare dash. Addresses PR review.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] fix(optimizations): gate empty state on a size=1 existence probe
The runs list derived
isEmptyfrom the paginated fetch gated on
!isTableLoading, so a cold load with no data flashed the studio templates +
a populated-looking table skeleton before snapping to the empty state. Decide
emptiness from a lightweight unfiltered size=1 query instead (mirrors
ExperimentsPage), fold that probe intoisTableLoadingso the table shows its
skeleton while it resolves, and keep the studio templates out of the loading
state.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] fix(optimizations): address final review findings
- empty state: treat only a successful size=1 probe with total 0 as empty,
so a transient probe failure no longer hides real runs behind onboarding - polling: detect RUNNING runs workspace-wide via an active-runs probe so
paginating away from page 1 no longer silently stops the auto-refresh
(cross-page INITIALIZED / cross-tab starts documented as edge cases) - Algorithm / Metric cells render "-" instead of a blank cell when absent
- search placeholder now matches the relabeled "Item source" column
- dedupe the local in-progress statuses to the shared
IN_PROGRESS_OPTIMIZATION_STATUSES constant
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] style(optimizations): match default column widths to Figma
Set the default-visible column widths to the runs-list table header in Figma
(686:35271 inside 562:37189): Name 191, Start time 145, and Status / Pass rate /
Accuracy / Latency / Cost / Opt. cost all 120 (previously 220 / 140 / 200 / 200 /
180 / 180). Hidden columns (Run ID, Item source, Algorithm, Metric) keep their
defaults — they aren't in the Figma default-visible frame.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] feat(optimizations): 3 onboarding cards on the runs list (Figma 1:1)
The with-data runs list showed only 2 onboarding cards (a demo template + a
hardcoded "Optimize your own prompt"); the Figma frame (562:37189) specifies
three: Run a demo example, Use the Optimization studio, and Optimize via SDK.
Rebuild StudioTemplates as the 3-card layout matching Figma — coloured icon
chip + title + description + action link per card — and wire the SDK card to the
same dialog the empty state uses. Removes the now-unused OptimizationTemplateCard.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] style(optimizations): divider between onboarding cards and the list
Figma 562:37189 has a full-width horizontal separator (686:35245) between the
"Run an optimization" cards and the search/table; the implementation was missing
it. Render a Separator after the cards (gated with them, so it only shows
alongside the onboarding section).Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] feat(optimizations): map Metric copy + align metric cells to Figma
- Metric column now maps objective_name through OPTIMIZATION_METRIC_OPTIONS
(new getMetricLabel) so it shows human copy ("Levenshtein") instead of the raw
metric key, mirroring how Algorithm uses getOptimizerLabel. - Metric comparison cell (compact, used by the runs list) aligned 1:1 to Figma
562:37189: 12px baseline (muted) and current (foreground, regular weight,
previously 14px/bold), and the up/good trend icon uses the vivid Figma green
(#00D14C) via a new PercentageTrendbrightPositiveflag — scoped to the
green direction so negative/neutral trends keep their colors, and only the
compact (optimization) cell opts in, leaving KPI cards untouched.
Note: the Algorithm column was empty only for runs without studio_config; it
already resolves studio_config.optimizer.type via getOptimizerLabel for real
runs (no code change needed).Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] fix(optimizations): align onboarding cards + status cell to Figma
Cards (686:35206): rebuilt to the Figma layout — horizontal, a solid colored
icon chip (sky/violet/fuchsia, white icon) + title/description + a primary-blue
link ("Try template" / "Create optimization" / "View SDK guide"), on a tinted
card with a small shadow. Previously a hand-rolled vertical card with tinted
chips and per-color links.Status (686:35286): the run status is now a neutral pill with a colored status
dot, not a colored-background badge — running = green (#00d14c), completed /
initialized = slate, cancelled / error = red (#ef4444), per Figma. Extracted as
a shared OptimizationStatusTag (no existing shared cell fit run statuses:
StatusCell is boolean, PassedCell's StatusTag is test-suite assertions) so the
list, run-detail header and trials can render it identically.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] style(optimizations): vivid trend icon colors in metric cells
The Pass rate / Latency / Cost comparison cells now color the trend icon with the
vivid Figma trend palette — good = green (#00D14C), bad = red (#EF4444) — via a
vividflag on PercentageTrend (renamed from brightPositive, now covers both
directions; neutral unchanged). Scoped to the compact metric cell, so KPI cards
and other PercentageTrend usages are unaffected.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] refactor(trend): one trend color style product-wide
Drop the per-cell
vividflag on PercentageTrend (smelly: it made the
optimization metric cells diverge from every other trend in the product).
PercentageTrend now always uses the Figma trend palette — good = green
(#00D14C), bad = red (#EF4444), neutral = gray — applied to the whole tag, so
every trend indicator (optimization cells, KPI cards, traces metrics, etc.)
renders identically. MetricComparisonCell no longer passes a flag.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] refactor: route trend + status colors through shared tokens
Same smell as the trend flag: the run-status dots hardcoded #00d14c / #ef4444 —
the exact green/red PercentageTrend also hardcoded, so the two could drift. Add
a single --color-green-bright brand token (#00d14c) and route both through it,
reuse the existing --color-red and --light-slate tokens. No magic hexes left in
either component; one source of truth keeps trend and status colors in sync.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] style(optimizations): metric cells match Figma — trend % in neutral pill
Redesign the runs-list Pass rate / Latency / Cost cells to Figma
(689:34516, 496:41663, 496:41887): the change % now sits in a neutral pill
(bg #f8fafc / border #f1f5f9 — the same surface as the status tag) with a
colored trend icon and muted-slate text, followed by the current value in
foreground. Drops the old baseline-value display in compact mode.Export getTrendConfig + TREND_COLOR_CLASS from PercentageTrend so the cell
reuses the single trend->icon/color mapping instead of re-deriving it. Only
the compact branch changes (runs list); PercentageTrend's other consumers and
MetricComparisonCell's full/KPICard mode are untouched.Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] refactor(optimizations): address review feedback
- PercentageTrend: stop overriding the Tag text with the bright trend color so
the percentage + icon keep proper contrast on the tinted tag background (baz:
low-contrast trend tags). The bright green now lives only in the runs-list
metric pill, where the icon sits on a neutral surface. - Run-detail header reuses the shared OptimizationStatusTag instead of its own
STATUS_TO_VARIANT_MAP, so list and header render identical status colors. - Drop the duplicate getMetricLabel in lib/optimizations.ts; reuse the shared
helper from lib/optimization-config.ts. - Extract DEFAULT_METRIC_COLUMN_WIDTH for the metric columns (was 120 hardcoded
on each column def). - Extract getStudioCardConfigs so the populated runs-list cards and the empty
state share one card definition (copy/icon/routing); each view keeps its own
visual treatment.
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] fix(optimizations): address review feedback (round 2)
- Algorithm column falls back to metadata.optimizer for legacy/non-Studio runs
where studio_config is null (was rendering "-"). - Compact metric pill: keep the trend icon for zero-baseline (Infinity)
comparisons and drop only the numeric %, instead of hiding the trend entirely.
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] refactor: address runs-list review feedback
- Flatten refetchInterval in useOptimizationsView (extract hasInProgressRun)
- Replace hardcoded #f8fafc/#f1f5f9 pill colors with --pill-neutral-* tokens
(adds the previously-missing dark-mode values) - Convert the raw card s to the core Button component
(StudioTemplates, OptimizationsEmptyState) - Extract optimizer-type resolution into getOptimizationOptimizerType
- Drop the reshape .map in OptimizationsEmptyState; render shared configs directly
- Extract the list existence probe into a useOptimizationsExistence hook
- Trim Figma/design-narration and essay comments across the PR
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7041] [FE] fix(optimization-runs): drop redundant title, align studio cards + spacing with Figma
- Remove the redundant "Run an optimization" h2 above the studio cards
- Fix header/cards/separator spacing to match the Figma runs-list layout
- Align the studio card title with Figma ("Use the Optimization studio")
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
Co-authored-by: Claude Opus 4.8 (1M context) noreply@anthropic.com
下载附件