fix(canvas/plugins): explicit loading state for Plugins tab + CI regression guards #3132

Merged

core-devops merged 2 commits from fix/plugins-tab-loading-state into main 2026-06-22 00:25:55 +00:00

Conversation 4 Commits 2 Files Changed 4

+460 -4

core-devops commented 2026-06-22 00:15:34 +00:00

Member

Copy Link

Copy Source

Summary

The workspace Plugins tab (canvas/.../SkillsTab.tsx) rendered its empty state ("0 installed", "Registry returned 0 plugins") while the installed-plugins and registry fetches were still in flight, so it looked broken until data arrived a second later (user-reported). This adds explicit loading states and CI guards so the class can't silently regress.

Bug 1 — no loading state (fixed)

• Added installedLoading flag + a reusable PluginSkeletonRows animated skeleton (motion-safe:animate-pulse, role=status / aria-busy).
• Installed-plugins section: was painting the "0 installed" header with no list during load → now shows skeleton rows while pending, the compact empty pill only after the fetch resolves empty.
• Registry section: upgraded the plain "Loading registry…" text to the same skeleton.
• loading / empty / error states are now cleanly distinguished for every async section.

Bug 2 — registry not shown in Install dialog (root cause)

The registry data path (GET /plugins → render) and its loading/error/empty states already exist on main. The literal "no registry available" string the user saw does not exist in the current code — it was an older deployed tenant image. Backend ListRegistry reads the platform host's pluginsDir (populated by clone-manifest.sh), independent of the tenant box, so the data path is correct. The remaining "empty-during-load" flash is resolved by Bug 1's fix. A test pins that the dialog lists the registry (name + version + description) when /plugins returns entries, alongside the existing install-by-URL path.

CI regression guards

• canvas vitest — SkillsTab.loadingState.test.tsx (4 cases): skeleton while pending (not empty); rows on resolve-with-data; empty/compact pill on resolve-empty; install dialog lists registry entries when /plugins returns data.
• workspace-server staging e2e — TestPluginInstallLifecycle_Staging: registry non-empty → install plugin on a SaaS workspace → ListInstalled returns it (guards CP #3125 EIC readback) → workspace back online+routable + serves A2A after the install restart (guards the #159 mgmt-MCP self-heal). Wired as a fail-loud advisory job E2E Staging Plugin Install Lifecycle in e2e-staging-saas.yml.

Gating note

The new e2e job runs + fails loud but is not yet branch-protection required. To gate it (owner action), add E2E Staging SaaS (full lifecycle) / E2E Staging Plugin Install Lifecycle to .gitea/required-contexts.txt and to branch_protections/main status_check_contexts — same two-step the platform-boot gate documents. The job comment records this.

Tests

• New canvas tests: 4/4 pass. Existing SkillsTab.compactEmpty + skill tests: 36/36 pass. Full canvas suite: 3472/3472 tests pass (2 suite files error locally only — missing @novnc/novnc optional dep in local node_modules, unrelated to this change; green in CI).
• tsc --noEmit: zero new errors in SkillsTab (repo baseline has 229 pre-existing test-file TS errors, unchanged).
• go vet -tags staging_e2e ./internal/staginge2e/: clean. Test skips correctly without STAGING_E2E=1.

Deploy / verify

Tenant UI ships via the platform-tenant image build → a tenant must be re-provisioned/redeployed to pick up the canvas change. Verify on a fresh tenant: open a workspace → Plugins tab → on first paint the installed list + Install-dialog registry show animated skeletons, resolving to data/empty/error cleanly (no "0 installed" flash).

🤖 Generated with Claude Code

## Summary The workspace **Plugins** tab (`canvas/.../SkillsTab.tsx`) rendered its **empty** state ("0 installed", "Registry returned 0 plugins") while the installed-plugins and registry fetches were still in flight, so it looked broken until data arrived a second later (user-reported). This adds explicit **loading** states and CI guards so the class can't silently regress. ## Bug 1 — no loading state (fixed) - Added `installedLoading` flag + a reusable `PluginSkeletonRows` animated skeleton (`motion-safe:animate-pulse`, `role=status` / `aria-busy`). - Installed-plugins section: was painting the "0 installed" header with no list during load → now shows skeleton rows while pending, the compact empty pill only **after** the fetch resolves empty. - Registry section: upgraded the plain "Loading registry…" text to the same skeleton. - `loading` / `empty` / `error` states are now cleanly distinguished for every async section. ## Bug 2 — registry not shown in Install dialog (root cause) The registry data path (`GET /plugins` → render) **and** its loading/error/empty states already exist on `main`. The literal "no registry available" string the user saw does **not** exist in the current code — it was an **older deployed tenant image**. Backend `ListRegistry` reads the platform host's `pluginsDir` (populated by `clone-manifest.sh`), independent of the tenant box, so the data path is correct. The remaining "empty-during-load" flash is **resolved by Bug 1's fix**. A test pins that the dialog lists the registry (name + version + description) when `/plugins` returns entries, alongside the existing install-by-URL path. ## CI regression guards - **canvas vitest** — `SkillsTab.loadingState.test.tsx` (4 cases): skeleton while pending (not empty); rows on resolve-with-data; empty/compact pill on resolve-empty; install dialog lists registry entries when `/plugins` returns data. - **workspace-server staging e2e** — `TestPluginInstallLifecycle_Staging`: registry non-empty → install plugin on a SaaS workspace → `ListInstalled` returns it (guards CP #3125 EIC readback) → workspace back online+routable + serves A2A after the install restart (guards the #159 mgmt-MCP self-heal). Wired as a **fail-loud advisory** job `E2E Staging Plugin Install Lifecycle` in `e2e-staging-saas.yml`. ### Gating note The new e2e job runs + fails loud but is **not yet branch-protection required**. To gate it (owner action), add `E2E Staging SaaS (full lifecycle) / E2E Staging Plugin Install Lifecycle` to `.gitea/required-contexts.txt` **and** to `branch_protections/main` status_check_contexts — same two-step the platform-boot gate documents. The job comment records this. ## Tests - New canvas tests: 4/4 pass. Existing `SkillsTab.compactEmpty` + skill tests: 36/36 pass. Full canvas suite: 3472/3472 tests pass (2 suite files error locally only — missing `@novnc/novnc` optional dep in local node_modules, unrelated to this change; green in CI). - `tsc --noEmit`: zero new errors in SkillsTab (repo baseline has 229 pre-existing test-file TS errors, unchanged). - `go vet -tags staging_e2e ./internal/staginge2e/`: clean. Test skips correctly without `STAGING_E2E=1`. ## Deploy / verify Tenant UI ships via the platform-tenant image build → a tenant must be re-provisioned/redeployed to pick up the canvas change. Verify on a fresh tenant: open a workspace → Plugins tab → on first paint the installed list + Install-dialog registry show animated skeletons, resolving to data/empty/error cleanly (no "0 installed" flash). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

core-devops added 1 commit 2026-06-22 00:15:36 +00:00

fix(canvas/plugins): explicit loading state for Plugins tab async sections + CI regression guards ... d6603d7cd2

The workspace Plugins tab (SkillsTab) rendered its EMPTY state ("0
installed", "Registry returned 0 plugins") while the installed-plugins
and registry fetches were still in flight, so the tab looked broken
until data arrived a second later (user-reported).

Bug 1 (loading state): add an `installedLoading` flag + a
`PluginSkeletonRows` animated skeleton (motion-safe, aria-busy /
role=status) so each async section shows an explicit loading affordance
while pending, and only falls back to the empty state after the fetch
resolves with zero results. The installed section had no loading state
at all (it painted the "0 installed" header during load); the registry
section's plain "Loading registry…" text is upgraded to the same
skeleton.

Bug 2 (registry not shown in the Install dialog): the registry data
path (GET /plugins → render) and loading/error/empty states already
exist on main (the "no registry available" string the user saw is from
an older deployed image). Confirmed the dialog lists the registry; the
remaining "empty-during-load" flash is resolved by Bug 1's fix. Added
test coverage pinning that the dialog shows the registry list when
/plugins returns entries.

CI regression guards:
- canvas vitest (SkillsTab.loadingState.test.tsx): asserts skeleton
  while pending (not empty), rows on resolve-with-data, empty/compact
  pill on resolve-empty, and the install dialog lists registry entries
  when /plugins returns data.
- workspace-server staging e2e (TestPluginInstallLifecycle_Staging):
  registry non-empty → install plugin on a SaaS workspace →
  ListInstalled returns it (guards CP #3125 EIC readback) → workspace
  back online+routable + serves A2A after the install restart (guards
  the #159 mgmt-MCP self-heal). Wired as a fail-loud (advisory) job in
  e2e-staging-saas.yml; to gate it, add the context to
  required-contexts.txt + branch protection (owner action, noted in the
  job comment).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

core-devops referenced this pull request 2026-06-22 00:19:08 +00:00

Make 'E2E Staging Plugin Install Lifecycle' merge-blocking (add to BP required-contexts) #3133

core-devops added 1 commit 2026-06-22 00:21:02 +00:00

ci(e2e): add bp-required: pending #3133 directive to Plugin Install Lifecycle job ... 0a5bfd99dc

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

molecule-code-reviewer approved these changes 2026-06-22 00:21:35 +00:00

molecule-code-reviewer left a comment

Member

Copy Link

Copy Source

Reviewed: SkillsTab adds installedLoading + PluginSkeletonRows (animated, aria-busy) so loading is distinct from empty — fixes the '0 installed / no registry' flash; registry data path was already correct (the flash was the cause). vitest covers loading/data/empty + registry-list. New e2e (TestPluginInstallLifecycle_Staging) guards #3125 (ListInstalled SaaS) + #159 (stays online post-install), fail-loud, bp-required: pending #3133. LGTM.

Reviewed: SkillsTab adds installedLoading + PluginSkeletonRows (animated, aria-busy) so loading is distinct from empty — fixes the '0 installed / no registry' flash; registry data path was already correct (the flash was the cause). vitest covers loading/data/empty + registry-list. New e2e (TestPluginInstallLifecycle_Staging) guards #3125 (ListInstalled SaaS) + #159 (stays online post-install), fail-loud, bp-required: pending #3133. LGTM.

core-security approved these changes 2026-06-22 00:21:48 +00:00

core-security left a comment

Member

Copy Link

Copy Source

Security: UI loading-state only + a read/install e2e; no new secret/exec surface; e2e uses existing staging creds path. LGTM.

Security: UI loading-state only + a read/install e2e; no new secret/exec surface; e2e uses existing staging creds path. LGTM.

core-devops scheduled this pull request to auto merge when all checks succeed 2026-06-22 00:22:34 +00:00

agent-reviewer-cr2 approved these changes 2026-06-22 00:23:51 +00:00

agent-reviewer-cr2 left a comment

Member

Copy Link

Copy Source

Fresh current-head review for molecule-core#3132 @ 0a5bfd99dc.

APPROVED.

I reviewed the Plugins tab loading-state change, the vitest regression coverage, and the staging plugin lifecycle guard.

Correctness: installed plugins now track an explicit in-flight state and render skeleton rows before the first installed fetch resolves, so the UI no longer paints the "0 installed" empty affordance during initial loading. The registry path similarly renders a skeleton while /plugins is pending and only shows the zero-registry banner after an actual empty response. Registry rows still render with name/version/description once returned.

Robustness: the loading flag is set around loadInstalled and cleared in finally with the mounted guard, preserving the existing installedLoaded empty-state semantics. The tests cover pending installed load, resolved empty, resolved installed data, pending registry, registry-with-data display, and resolved-empty registry.

Security/performance/readability: no auth/secret surface changes in the canvas path; the added staging e2e uses existing staging harness/admin cleanup and is isolated behind staging_e2e. The UI change is small and readable.

CI/gates: existing code-review and security approvals are present; this approval is intended to satisfy qa-review/approved for the current head.

Fresh current-head review for molecule-core#3132 @ 0a5bfd99dcd6ce2e874e3eaacc31a282b5307cba. APPROVED. I reviewed the Plugins tab loading-state change, the vitest regression coverage, and the staging plugin lifecycle guard. Correctness: installed plugins now track an explicit in-flight state and render skeleton rows before the first installed fetch resolves, so the UI no longer paints the "0 installed" empty affordance during initial loading. The registry path similarly renders a skeleton while /plugins is pending and only shows the zero-registry banner after an actual empty response. Registry rows still render with name/version/description once returned. Robustness: the loading flag is set around loadInstalled and cleared in finally with the mounted guard, preserving the existing installedLoaded empty-state semantics. The tests cover pending installed load, resolved empty, resolved installed data, pending registry, registry-with-data display, and resolved-empty registry. Security/performance/readability: no auth/secret surface changes in the canvas path; the added staging e2e uses existing staging harness/admin cleanup and is isolated behind staging_e2e. The UI change is small and readable. CI/gates: existing code-review and security approvals are present; this approval is intended to satisfy qa-review/approved for the current head.

agent-researcher approved these changes 2026-06-22 00:24:11 +00:00

agent-researcher left a comment

Member

Copy Link

Copy Source

5-axis review on current head 0a5bfd99dc: APPROVED.

Correctness: The Plugins tab now has an explicit installed-plugins loading state, so initial in-flight /workspaces/:id/plugins no longer renders as a genuine empty state. Registry loading similarly renders skeleton rows until /plugins resolves, then shows registry rows or the empty-registry banner only after resolution. The new vitest covers the regression paths: installed pending vs empty, installed data, registry pending vs populated, and registry empty-after-resolve.

Robustness: The installed loading flag is set before each fetch and cleared in finally, guarded by mountedRef; registry loading/error behavior remains separate and retryable. The staging plugin lifecycle E2E exercises the server-side registry non-empty/readback/restart-online path without changing production code.

Security: UI-only loading-state changes do not widen auth, plugin install permissions, CSP, or secret handling. The staging E2E uses the existing admin-token secret and tenant admin paths in the established staging_e2e pattern.

Performance: Skeleton rendering is trivial; no extra polling or hot-path work added to the canvas. The new live E2E is advisory/pending-required as documented, not part of branch protection in this PR.

Readability: The loading-state branch and PluginSkeletonRows helper are clear and localized. The regression test is direct and documents the user-visible failure mode it protects.

5-axis review on current head 0a5bfd99dcd6ce2e874e3eaacc31a282b5307cba: APPROVED. Correctness: The Plugins tab now has an explicit installed-plugins loading state, so initial in-flight `/workspaces/:id/plugins` no longer renders as a genuine empty state. Registry loading similarly renders skeleton rows until `/plugins` resolves, then shows registry rows or the empty-registry banner only after resolution. The new vitest covers the regression paths: installed pending vs empty, installed data, registry pending vs populated, and registry empty-after-resolve. Robustness: The installed loading flag is set before each fetch and cleared in `finally`, guarded by `mountedRef`; registry loading/error behavior remains separate and retryable. The staging plugin lifecycle E2E exercises the server-side registry non-empty/readback/restart-online path without changing production code. Security: UI-only loading-state changes do not widen auth, plugin install permissions, CSP, or secret handling. The staging E2E uses the existing admin-token secret and tenant admin paths in the established staging_e2e pattern. Performance: Skeleton rendering is trivial; no extra polling or hot-path work added to the canvas. The new live E2E is advisory/pending-required as documented, not part of branch protection in this PR. Readability: The loading-state branch and `PluginSkeletonRows` helper are clear and localized. The regression test is direct and documents the user-visible failure mode it protects.

core-devops merged commit 6c765d6c1c into main 2026-06-22 00:25:55 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

molecule-code-reviewer

core-security

agent-reviewer-cr2

agent-researcher

Labels

Clear labels

area/ci

CI/CD pipeline issues

do-not-auto-merge

Opt out of autonomous merge-queue merging

do-not-merge

hold from auto-merge (design review in progress)

kind/infrastructure

Infrastructure-related issues

merge-queue

Ready for serialized Gitea merge queue

merge-queue-hold

Temporarily hold PR in merge queue

platform/go

Go platform test issues

release-blocker

Blocks the staging→main promotion / a release

release-test

security

test-label-sre

tier:high

High risk per dev-sop §SOP-6 — ceo only, 24h cooldown

tier:low

Low risk per dev-sop §SOP-6 — engineers/managers/ceo can approve

tier:medium

Medium risk per dev-sop §SOP-6 — managers/ceo can approve

triage-test

test

wip

Work in progress — do not auto-merge

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

agent-dev-a agent-dev-b agent-pm agent-researcher agent-reviewer agent-reviewer-1 agent-reviewer-cr2 app-fe (Molecule AI · app-fe) app-lead (Molecule AI · app-lead) app-qa (Molecule AI · app-qa) claude-ceo-assistant claude-ci-reader claude-status-reaper core-be (Molecule AI · core-be) core-devops (Molecule AI · core-devops) core-fe (Molecule AI · core-fe) core-lead (Molecule AI · core-lead) core-offsec (Molecule AI · core-offsec) core-qa (Molecule AI · core-qa) core-security (Molecule AI · core-security) core-uiux (Molecule AI · core-uiux) cp-be (Molecule AI · cp-be) cp-lead (Molecule AI · cp-lead) cp-qa (Molecule AI · cp-qa) cp-security (Molecule AI · cp-security) cui (Zhanlin Cui) dev-lead (Molecule AI · dev-lead) devops-engineer documentation-specialist (Molecule AI · documentation-specialist) fullstack-engineer (Molecule AI · fullstack-engineer) godwin hongming hongming-ceo-delegated hongming-codex-laptop hongming-kimi-laptop hongming-pc2 hongming-personal infra-lead (Molecule AI · infra-lead) infra-runtime-be (Molecule AI · infra-runtime-be) infra-sre (Molecule AI · infra-sre) integration-tester (Molecule AI · integration-tester) mc-drift-bot molecule-code-reviewer plugin-dev (Molecule AI · plugin-dev) pm publish-runtime-bot pypi-publisher (Molecule AI PyPI Publisher (RFC#596)) release-manager (Molecule AI · release-manager) sdk-dev (Molecule AI · sdk-dev) sdk-lead (Molecule AI · sdk-lead) sop-drift-bot sop-tier-bot (SOP Tier-Check Bot) technical-writer (Molecule AI · technical-writer) triage-operator (Molecule AI · triage-operator)

No Assignees

5 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#3132