🌱 refactor: split hook-heavy card components

[Karibhou]

Closes #24405

EventsTimeline, Kubedle, and ContainerTetris mixed rendering with substantial stateful logic. Extract their data, persistence, timers, and game controls into dedicated adjacent hooks while preserving the existing card props, exports, markup, and behavior.

• Keep the useCardLoadingState call in EventsTimeline.tsx to satisfy the unified-controls gate.
• Preserve demo state reporting, keyboard handling, game analytics, and storage keys.
• Stabilize EventsTimeline defensive fallback values so the extracted hook does not inherit baselined dependency warnings. Document the existing Tetris callback dependency exception under the repository's moved-code rule.
• Add Kubedle rule/state tests and three full-app Playwright tests with six screenshot baselines.
• Incorporate current main, including the IframeEmbed extraction already merged through 🌱 refactor: extract iframe embed state and lifecycle #24407. The resulting PR diff does not change IframeEmbed.

Validation: 14 focused unit tests passed after the merge, including the IframeEmbed tests from main. git diff --check passed. Visual tests, build, and lint are validated by CI as required by AGENTS.md/CLAUDE.md.

— hive: backend=codex

[netlify]

✅ Deploy Preview for kubestellarconsole ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3a86ff2
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/6ad40b406ecd1788a086b337
😎 Deploy Preview	https://deploy-preview-24409.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 mikespreitzer 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]

@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:

• ts-null-safety

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.

Queued in your relay fix queue (2 waiting): fixes are handed out before new work as soon as you have capacity.

[hivecommons-hive]

Conflict with #24407: both PRs create web/src/components/cards/useIframeEmbed.ts and rewrite IframeEmbed.tsx. They cannot both merge.

I read both diffs in full. They make the same semantic change — extracting IframeEmbed's config state, localStorage persistence, URL sanitization, and refresh timer into a new useIframeEmbed hook — with only stylistic differences:

• This PR (#24409) is a near-verbatim move of the original code (same literals slice(0, 12), 50, * 1000; hook calls useCardExpanded/useCardDemoState internally). It also covers EventsTimeline, Kubedle, and ContainerTetris, closing #24405.
• #24407 covers only IframeEmbed (Refs #24400, the parent of #24405), but names the constants (INSTANCE_ID_LENGTH, RELOAD_DELAY_MS, MS_PER_SECOND), null-guards savedEmbeds ((prev || []).filter(...) at its hook lines ~163/179), and ships a dedicated useIframeEmbed.test.ts (19 tests) that this PR does not have.

Both preserve sanitizeIframeUrl at the restore/save/reload boundaries that main's IframeEmbed.tsx enforces (main lines 107–110, 176–179), so neither regresses the scheme-injection guard. The non-iframe extractions here (useEventsTimeline, useKubedle, useContainerTetris, and their components) are faithful moves — timer literals and cleanup are symmetric with the removed code.

Question for a maintainer: pick one IframeEmbed extraction. Either (a) land #24407's iframe split (tested hook, named constants) and rebase this PR to drop its IframeEmbed.tsx/useIframeEmbed.ts changes, or (b) land this PR wholesale and close #24407 as superseded. Whichever merges second will conflict on both files. I have not closed anything.

Separately, the red ts-null-safety check here is the AI-antipattern ratchet ("AI code quality regression detected", job 117489910045); the timer literals in the moved hooks are the likely counters, and #24407's named-constant style avoids that class of hit.

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

[hivecommons-hive]

hive CI finding — ts-null-safety is failing on this PR at the "Fail on AI quality regression" step. This blocks the merge gate.

Likely cause: the "Cards missing unified controls" ratchet counts every top-level web/src/components/cards/*.tsx that does not contain a useCardLoadingState call. This PR extracts hook logic from card components into separate use*.ts files (useEventsTimeline.ts, useIframeEmbed.ts, useKubedle.ts, useContainerTetris.ts); if the useCardLoadingState invocation moved into those hook files, the card .tsx files (EventsTimeline.tsx, IframeEmbed.tsx, Kubedle.tsx, ContainerTetris.tsx) now count as "missing unified controls", pushing the count above .github/ai-missing-unified-baseline.txt.

Concrete fix: keep the useCardLoadingState(...) call (or at least a direct reference to it) in each top-level card .tsx, passing its result into the extracted hook/presentation as needed — only pure logic should move into the use*.ts files.

---

🐝 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]

Read the full diff at 4622d00 against the base tree. The four hook extractions are verbatim moves with behavior preserved:

• useIframeEmbed.ts:36 keeps sanitizeIframeUrl with all four call boundaries intact (initial config, localStorage restore, save, and the reload inside handleRefresh), including the CodeQL-relevant parsed.href return and the comments explaining them.
• useContainerTetris.ts:131 documents the preserved moveDown dependency list (score intentionally still omitted) as moved-code rather than silently "fixing" it mid-refactor — the right call.
• useKubedle.ts moves the #6306 valid-guess gate and shake-timeout cleanup unchanged, and the new useKubedle.test.ts covers duplicate-letter marking, invalid-word rejection, stats persistence, and timer cleanup — real coverage this logic never had.
• useEventsTimeline.ts keeps filtering/bucketing/chart logic identical; the only changes are wrapping the defensive fallbacks in useMemo and returning cardLoadingInput so useCardLoadingState stays in the component. Both are behavior-neutral.

Looks correct to me on its own terms.

One thing a maintainer must settle before merging either PR: this overlaps #24407. Both PRs create web/src/components/cards/useIframeEmbed.ts and rewrite IframeEmbed.tsx with the same extraction — #24407 for issue #24400 (Refs, partial) and this one for #24405 (Closes). They conflict and cannot both merge as-is. If this broader PR lands first, #24407 becomes redundant; if #24407 lands first, this one needs a rebase that drops its iframe portion. Same author, so likely an overlapping-issues artifact rather than true duplication — but the ordering choice is yours.

— 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 @4622d00
• reviewer question: @maintainer should decide whether 🌱 refactor: split hook-heavy card components #24409 or 🌱 refactor: extract iframe embed state and lifecycle #24407 carries the IframeEmbed/useIframeEmbed extraction — both PRs make the same change to those files and conflict.

Head: verdict requires_human @4622d00, 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]

Merge conflict with main (sibling refactor PRs merged first). This is a fork branch the hive cannot push to — @Karibhou please rebase onto main and resolve conflicts; CI was otherwise reviewed-approve.

---

🐝 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]

Compared the extracted hooks against the removed component code: useKubedle.ts, useContainerTetris.ts, and useEventsTimeline.ts move the state/logic verbatim (word lists, checkGuess two-pass logic, stats persistence via safeGet/safeSet all unchanged), and the components keep only rendering. Verified at head 3a86ff2: tsc --noEmit clean, the new useKubedle.test.ts passes, and the PR includes a visual spec with committed snapshots for all three cards.

One note for CI triage: in a broad local run, WorkloadImportDialog.test.tsx (untouched by this PR) flaked 3 tests but passes in isolation — not attributable to this change. Looks correct to me.

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

[hivecommons-hive]

Evidence bundle `#244093a86ff2` sha256:d320ed1cfdf02753234fa13453372187596851398ccff67278a81bf674eef4cc — download from the dashboard or `hivectl review evidence #24409`.

[github-actions]

⏹️ Post-Merge Verification: cancelled

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