fix: move model run status dot to top-right corner of icon

[wicky-zipstack]

What

• Moved model run status dot (green/red) from inline-before-text to the top-right corner of the model icon in the explorer tree
• Extracted inline styles into CSS classes (.model-status-dot, .model-icon-badge-wrapper)

Why

• The status dot rendered inline before the model name looked misaligned and cluttered the text
• Badge-on-icon is the standard pattern (VS Code, GitHub, Slack) — users immediately understand it as a status indicator on the object itself

How

• MODEL_STATUS_DOT_STYLE inline object replaced with .model-status-dot CSS class in ide-layout.css
• Icon wrapper inline style replaced with .model-icon-badge-wrapper CSS class
• Status badge now wraps the tree node icon (child.icon) using position: absolute overlay
• Only backgroundColor remains inline (driven by antd theme tokens — can't be static CSS)

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

No — this is a purely visual change. Same tooltip/popover behavior on hover, same data flow. The status dot rendering logic is unchanged; only its CSS positioning moved from inline-before-text to overlaid-on-icon.

Database Migrations

None

Env Config

None

Relevant Docs

None

Related Issues or PRs

• PR feat: track model execution status with failure icon in explorer #54 — introduced the status dot feature (model execution status tracking)

Dependencies Versions

No changes

Notes on Testing

• Open a project with models that have been run (SUCCESS/FAILED status)
• Verify the status dot appears on the top-right corner of the model icon (not before the name)
• Verify tooltip on hover still works (green = Success with timestamp, red = Failed with error popover)
• Verify models without run status show no dot
• Verify dark mode: dot border uses var(--page-bg-2) so it blends with the background

Screenshots

Checklist

• I have read and understood the Contribution Guidelines.

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

This PR moves the model run status indicator (green/red dot) from an inline position before the model name to a top-right badge overlay on the model icon, using position: absolute CSS and a new .model-icon-badge-wrapper container. The implementation is clean and follows the intent described in the PR. No functional behavior is changed — tooltip and popover interactions remain the same.

Confidence Score: 5/5

Safe to merge — no functional regressions, clean CSS badge pattern, only a P2 UX suggestion remains.

Both files have straightforward, well-scoped changes. All previously raised concerns (fallback color, inline-flex) were flagged in prior threads. The only new finding is a P2 suggestion for a pulse animation on the RUNNING state, which does not block correctness or functionality.

No files require special attention.

Important Files Changed

Filename	Overview
frontend/src/ide/explorer/explorer-component.jsx	Extracts getModelRunStatus to a module-level function; wraps model icons with a badge container span when a run status exists. Logic is sound.
frontend/src/ide/ide-layout.css	Adds .model-icon-badge-wrapper (position: relative, inline-flex) and .model-status-dot (position: absolute, top-right) CSS classes to support the icon-badge pattern.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["rebuildTree() called"] --> B["item.children.map(child => ...)"]
    B --> C["getModelRunStatus(run_status, failure_reason, last_run_at, token)"]
    C --> D{run_status}
    D -->|RUNNING| E["Tooltip: blue dot"]
    D -->|FAILED| F["Popover: red dot"]
    D -->|SUCCESS| G["Tooltip: green dot"]
    D -->|other| H["null — no badge"]
    E --> I{statusBadge != null?}
    F --> I
    G --> I
    H -->|No| J["icon = child.icon"]
    I -->|Yes| K["span.model-icon-badge-wrapper\n  child.icon + statusBadge"]
    K --> L["item.icon = wrappedIcon"]
    J --> L

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: frontend/src/ide/ide-layout.css
Line: 93-101

Comment:
**No animation for the RUNNING state**

The RUNNING dot renders as a static blue circle, identical in shape to SUCCESS/FAILED. A pulsing animation (e.g. `@keyframes pulse`) would give users a live visual cue that a model is actively executing, matching the convention used by VSCode's spinner badges and similar tools.

```css
@keyframes model-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.model-status-dot.running {
  animation: model-status-pulse 1.2s ease-in-out infinite;
}
```

You would also add `running` to the className of the RUNNING span in `getModelRunStatus`.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "refactor: move status dot inline styles ..." | Re-trigger Greptile}

[tahierhussain]

LGTM