🌱 refactor: extract iframe embed state and lifecycle

[Karibhou]

Summary

IframeEmbed mixed its JSX with configuration state, localStorage persistence, URL validation, and refresh timers. Extract those responsibilities into useIframeEmbed, reducing the component from 457 to 284 lines while keeping its JSX unchanged.

Refs #24400 — partial: addresses IframeEmbed; the other 24 listed components remain for separate focused PRs.

Changes

• Keep existing URL scheme validation at configuration, storage restore, save, and reload boundaries.
• Preserve demo-mode refresh suppression, iframe callbacks, presets, and saved-embed behavior.
• Add hook regression coverage and a full-app Chromium visual/interaction test with Linux screenshot baselines.
• Preserve moved batched state updates with documented lint suppressions as required by the split-file guidance.

Validation

• Targeted Vitest: 2 files, 19 tests passed, including the unchanged render snapshot.
• Playwright with app-visual.config.ts and demo mode: passed against saved baselines without updates; inspected settings and demo-placeholder screenshots.
• JSX comparison against upstream: identical; git diff --check passed.
• Code and TypeScript reviews: no actionable findings.
• Build/lint are validated by CI per AGENTS.md.

Checklist

• Reviewed repository and card contribution guidance; generated/reviewed with Codex.
• Tested configuration, persistence, unsafe URLs, loading/errors, refresh lifecycle, and demo behavior.
• DCO sign-off matches the commit author; Hive trailers included.
• PR targets main; scoped to the existing iframe card and its tests.

— hive: backend=codex

[netlify]

✅ Deploy Preview for kubestellarconsole ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d95a770
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/6ad3d69bbf220d2551fe1410
😎 Deploy Preview	https://deploy-preview-24407.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign eeshaansa for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[hivecommons-hive]

build-gate → Frontend lint is failing with 19 "Unused eslint-disable directive" errors in src/components/cards/useIframeEmbed.ts (CI run: https://github.com/kubestellar/console/actions/runs/39062909255/job/117484386923).

I reproduced locally (npx eslint src/components/cards/useIframeEmbed.ts --report-unused-disable-directives) and confirmed all 19 are genuinely unused — the no-restricted-syntax consecutive-setState rule (eslint.config.js, selector CallExpression[callee.name=/^set[A-Z]/] + CallExpression[callee.name=/^set[A-Z]/]) simply doesn't fire at these call sites in the hook, so the // eslint-disable-next-line no-restricted-syntax -- Preserve the batched state updates moved from IframeEmbed. comments carried over from IframeEmbed.tsx are now dead weight that CI's reportUnusedDisableDirectives rejects.

Flagged lines (current HEAD 86b1843): 94, 96, 98, 100, 102, 111, 138, 144, 156, 158, 160, 162, 164, 184, 186, 188, 190, 192, 204.

Fix: delete all 19 // eslint-disable-next-line no-restricted-syntax -- ... comment lines from useIframeEmbed.ts — npx eslint src/components/cards/useIframeEmbed.ts --fix confirms there's no remaining violation underneath any of them, so this is a pure comment removal with zero behavior change. (Note: ESLint's --fix blanks the lines rather than deleting them outright — please remove the resulting empty lines too for a clean diff.)

I can't push to this branch (fork PR, comment-only access), so flagging here for you to apply.

---

🐝 Hive Agent: architect | Instance: hosted-kubestellar-console-4vkt | SHA: dd96163

— hive: agent=architect backend=copilot model=claude-opus-4.7 copilot=1.0.88

[hivecommons-hive]

Read the extracted hook side-by-side with the pre-move IframeEmbed.tsx and the component at this head: the state, persistence, sanitization, and refresh logic is a faithful move. sanitizeIframeUrl is still applied at every boundary (initial config at useIframeEmbed.ts:65, localStorage restore at :92, save at :130, reload at :116), the component keeps PRESET_EMBEDS/DEFAULT_SANDBOX locally (IframeEmbed.tsx:17,20), and nothing in the JSX references state the hook no longer returns. Hook tests cover the scheme-rejection and timer-lifecycle paths. Logic-wise this looks correct to me.

One concrete blocker — build-gate is red because of the lint suppressions, not the code:

• web/src/components/cards/useIframeEmbed.ts:94–210 — all 19 // eslint-disable-next-line no-restricted-syntax -- Preserve the batched state updates… directives are reported by build-gate's Frontend lint step as "Unused eslint-disable directive (no problems were reported from 'no-restricted-syntax')" (job 117484386923). The restriction those comments anticipate evidently doesn't apply in this .ts file, so the lint run that forbids unused disables fails. Severity: medium — the PR cannot merge until they're removed.

Fix is mechanical: delete the 19 unused directives (and their comments) in useIframeEmbed.ts and push. No behavior change needed. I can't push to the fork branch, so flagging for @Karibhou.

— hive: agent=reviewer backend=copilot model=claude-fable-5 copilot=1.0.88

[hivecommons-hive]

@Karibhou this PR is back in your court (stage/072-returned-to-contributor). The hive will not merge it until the head changes.

Failing checks:

• build-gate
  Review asks:
• the review swarm requested changes

Reply here or push a new head to this branch (same sign-off); CI and the review swarm re-run automatically and the PR returns to the normal path.

Your relay session received this as a fix-pr task and launched a parallel fix session; your current work continues.

[hivecommons-hive]

Correctness: read the extraction against main's IframeEmbed.tsx — it is faithful. sanitizeIframeUrl is still applied at every boundary the original enforced (localStorage restore, save, reload; main lines 107–110, 136–142, 176–179), demo-mode refresh suppression is preserved, and the hook adds dedicated regression tests plus null-guards on savedEmbeds that the original lacked. Looks correct to me.

But this PR conflicts with #24409, which also creates web/src/components/cards/useIframeEmbed.ts and rewrites IframeEmbed.tsx as part of its 4-component split (closing #24405, the child of #24400 this PR refs). I read both diffs: the two extractions are semantically identical, differing only in style — this one names its constants and tests the hook; #24409 is a verbatim move bundled with EventsTimeline/Kubedle/ContainerTetris. Whichever merges second conflicts on both files.

Question for a maintainer: pick one — land this PR and have #24409 rebase to drop its IframeEmbed portion, or land #24409 wholesale and close this one as superseded. I left the same note on #24409. I have not closed anything.

(The Test (chromium, shard 2) failure predates this judgment; if it reruns green it was unrelated to the iframe change — none of this PR's files are exercised by that shard's failure signature I could attribute to the diff.)

— hive: agent=reviewer backend=copilot model=claude-fable-5 copilot=1.0.88

[hivecommons-hive]

Needs a decision, not a merge:

• the reviewer swarm returned requires_human @d95a770
• reviewer question: @maintainer should decide which IframeEmbed extraction lands — this focused PR (🌱 refactor: extract iframe embed state and lifecycle #24407) or the bundled 🌱 refactor: split hook-heavy card components #24409 — since both create web/src/components/cards/useIframeEmbed.ts and will conflict.

Head: verdict requires_human @d95a770, 30/31 checks green, 1 pending, DCO yes, soak 0s of 30m0s.

_{Clear the cause and the hive re-evaluates on its next pass; the stage moves to stage/090-ready-for-human-merge or the merge queue on its own.}

[hivecommons-hive]

hive CI finding — required merge gating is blocked by Test (chromium, shard 2) failing: e2e/deploy/deploy-dashboard.spec.ts:554 › Deploy Dashboard › workload listing shows correct data (run 39065711920). Shards 1/3/4 and all other required checks pass on this head.

This PR only touches IframeEmbed.tsx / useIframeEmbed.ts and an iframe visual spec — the deploy-dashboard e2e failure looks unrelated to the diff (likely flaky or environment-dependent). Suggested unstick: push a trivial rebase/empty commit to re-run the Playwright workflow, or a maintainer can re-run the failed shard. If it reproduces, the assertion at deploy-dashboard.spec.ts:554 is where to look.

---

🐝 Hive Agent: scanner | Instance: hosted-kubestellar-console-4vkt | SHA: b9ff511

— hive: agent=scanner backend=copilot model=claude-fable-5 copilot=1.0.88

[hivecommons-hive]

Evidence bundle `#24407d95a770` sha256:1f11da1556e144aae82badf98c720b91e24f8b0a60288d992464554d9a13cd6f — download from the dashboard or `hivectl review evidence #24407`.

[github-actions]

⏹️ Post-Merge Verification: cancelled

Commit: c0ce2bad8ff67dae36c8c998057b22f734b817c3
Specs run: Dashboard.spec.ts smoke.spec.ts
Report: https://github.com/kubestellar/console/actions/runs/39072001052