Hide empty observable output panel until content exists

[jlewi]

No description provided.

[github-actions]

[codex-cuj-presubmit][sha:ec02f4bc877604c726f07dc790f182df2a1df61a]
@codex Please run the Critical User Journeys from docs-dev/cujs for commit ec02f4b.

Required steps:

• Execute app/test/browser/run-cuj-scenarios.ts.
• Report assertion-level pass/fail for each CUJ.
• Capture screenshots and scenario logs.
• Record a short CUJ walkthrough video and attach/upload it to this PR thread.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ec02f4bc87

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep output container mounted across visibility toggles

Conditionally rendering two different div trees for containerRef causes rendered Observable content to be lost when hasRenderableOutput flips to true. On the first successful aisre.render, drawing happens in the hidden fallback node, then React unmounts that node and mounts a fresh visible container, so the user sees an empty panel even though hasRenderedContent was true; the same can occur on reruns when toggling back to hidden at start. This is a functional regression for cells that render DOM/SVG output.

Useful? React with 👍 / 👎.

[jlewi]

@codex This PR doesn't fix the issue.

1. It only fixes the issue for webcontainer cells but not other cell types; we want to fix it for all.
2. It doesn't add tests

Please fix it for all cell types

Add tests per docs-dev/architecture/testing.md

Should this be

• unitest /component test
• part of CUJ testing
• both

Capture videos to prove the bug is fixed

[chatgpt-codex-connector]

Summary

• Fixed output visibility logic for all cell types by gating CellConsole rendering on actual user-visible output bytes (instead of just checking whether output metadata exists). This prevents placeholder terminal output items from showing empty panels for non-webcontainer cells. app/src/components/Actions/Actions.tsxL40-L40 app/src/components/Actions/Actions.tsxL476-L487 app/src/components/Actions/outputVisibility.tsL1-L30
• Fixed the WebContainer regression by keeping the output container DOM mounted across visibility changes, so rendered DOM/SVG content is preserved and not lost during hidden→visible transitions. I also added stable element IDs for easier debugging in DevTools. app/src/components/Actions/WebContainer.tsxL195-L238
• Added targeted tests:
  • unit test coverage for output visibility behavior (empty outputs, terminal placeholder outputs, real stdout bytes),
  • component test coverage for WebContainer mount persistence + visibility toggle behavior. app/src/components/Actions/outputVisibility.test.tsL1-L43 app/src/components/Actions/WebContainer.test.tsxL1-L57
• On your “unit/component vs CUJ vs both” question: this should be both. I implemented the fast regression guard as unit/component tests, and also attempted CUJ execution for workflow-level validation (blocked in this environment due missing agent-browser). app/src/components/Actions/outputVisibility.test.tsL1-L43 app/src/components/Actions/WebContainer.test.tsxL1-L57

Screenshot / Video Artifacts

Walkthrough video (webm):
browser:/tmp/codex_browser_invocations/1e7f75a1de664acb/artifacts/artifacts/bd748ba50fa2f9a547eae19c68832cd9.webm

Testing

• ✅ pnpm --filter @runmedev/app exec vitest run src/components/Actions/outputVisibility.test.ts src/components/Actions/WebContainer.test.tsx
• ✅ pnpm --filter @runmedev/app exec eslint src/components/Actions/WebContainer.tsx src/components/Actions/outputVisibility.ts src/components/Actions/outputVisibility.test.ts src/components/Actions/WebContainer.test.tsx
• ✅ cd packages/renderers && pnpm exec vite build && cd ../react-console && pnpm exec vite build
• ✅ pnpm --filter @runmedev/app build
• ⚠️ runme run build test (failed: runme CLI attempted to download a binary but hit ENETUNREACH in this environment)
• ⚠️ cd app && pnpm exec tsc --target es2020 --module nodenext --moduleResolution nodenext --esModuleInterop --skipLibCheck --outDir test/browser/.generated test/browser/run-cuj-scenarios.ts && node test/browser/.generated/run-cuj-scenarios.js (failed: agent-browser is not available on PATH)

Implemented commit is on the current branch and I created the follow-up PR with title: “Fix output panel visibility for all cell types and add regression tests.”

View task →