feat(console): migrate console to Cloudscape Design System - #11
Conversation
Rebuild apps/console's view layer on Cloudscape (AppLayout + TopNavigation shell, ContentLayout hero, KeyValuePairs metrics, Container + Cards resource graph, Table timelines/diagnostics, Form + FormField operation form, Alert / StatusIndicator states) per docs/design/2026-07-15-console-cloudscape.md option B, so the console visually matches the TenkaCloud Cloudscape SPAs. bespoke styles.css shrinks 857 -> 17 lines. View tests move from renderToStaticMarkup string assertions to @testing-library/react client rendering on happy-dom, registered via bunfig [test].preload with Bun-native fetch/streams/WebSocket restored so behavior tests keep real HTTP + real SQLite. Behavior invariants stay pinned: aria-busy loading, role=alert errors, launch-token secrecy, useActionState pending, unknown status -> pending fallback, MissingProvider diagnostics. Implements #9 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U
Companion to the previous commit (stash pop left these unstaged): the Cloudscape rebuild of view.tsx, the styles.css reduction to the console-specific minimum, global-styles + dark mode in main.tsx, Cloudscape/testing-library dependencies, the bunfig [test].preload registration (root + app) with the tools/** coverage-scope exclusion, the renderToStaticMarkup assertion removal from console.test.tsx, and the Plan.md entry. Implements #9 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe console presentation layer was migrated to Cloudscape components, with dark-mode initialization and minimal CSS. A Bun DOM preload and comprehensive view tests were added, while obsolete markup assertions were removed. Bun dependency resolution now enforces a seven-day minimum release age documented by ADR. ChangesConsole Cloudscape migration
Bun release-age policy
Estimated code review effort: 4 (Complex) | ~45 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
CI's Safe Chain gate blocks package downloads younger than 168h, but bun install had no matching constraint, so the lockfile pinned too-new Cloudscape / ws versions locally and only failed in CI. Set bunfig [install].minimumReleaseAge = 604800 so Bun resolves the same 7-day quarantine as .npmrc and Safe Chain, pin @cloudscape-design/components to 3.0.1324, and re-resolve collection-hooks / theming-runtime / ws to aged versions. Decision recorded in docs/adr/0014-bun-minimum-release-age.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U
The stopped-data-plane probe test self-killed httpd 2 seconds after container start, so runner.start()'s health wait raced container and proxy spin-up on busy CI runners and failed with "workload proxy did not become reachable" before the probe assertion ran. Keep the data plane alive through startup and issue the killall via docker exec only after start() succeeds, which pins the intended behavior (healthy start -> data plane dies -> probe yields typed failure) without the timing dependency. Fixes #12 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/console/src/main.tsx`:
- Line 10: Update the startup call to applyMode in main.tsx so it derives the
initial mode from the user’s system preference or the persisted theme selector
instead of always using Mode.Dark. Preserve light-mode selection and fall back
to the existing default only when no preference is available.
In `@apps/console/src/view.tsx`:
- Line 691: Update the TopNavigation utilities configuration in view.tsx to
render SIMULATOR_PROTOCOL_VERSION as plain text rather than a button. Remove the
hardcoded “Protocol 2026-07-11” button entry and use the existing protocol
version symbol as the displayed metadata.
In `@apps/console/test/view.test.tsx`:
- Line 184: Update the describe suite titles in “Cloudscape client rendering
spike” and the additionally referenced suite to Japanese BDD descriptions that
clearly express the tested behavior, while leaving the test implementation
unchanged.
In `@bunfig.toml`:
- Around line 30-36: Remove the console-specific preload from the root
bunfig.toml test configuration so root bun test runs do not load
apps/console/test/dom-setup.ts for every workspace. Add a console-only test
entrypoint or configuration that applies the dom-setup preload when running
console tests, while leaving apps/console/test/dom-setup.ts behavior unchanged
unless required to support that scoped configuration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: cbcb159a-5141-4414-af61-b0b359a83a41
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (12)
Plan.mdapps/console/bunfig.tomlapps/console/package.jsonapps/console/src/main.tsxapps/console/src/styles.cssapps/console/src/view.tsxapps/console/test/console.test.tsxapps/console/test/dom-setup.tsapps/console/test/view.test.tsxbunfig.tomldocs/adr/0014-bun-minimum-release-age.mdpackage.json
| [test] | ||
| # console の view テスト (Cloudscape + @testing-library/react) が使う DOM 環境。 | ||
| # react-dom は load 時に DOM の有無で event system の経路を固定する CommonJS | ||
| # のため、preload で全 module より先に happy-dom を登録する必要がある。 | ||
| # setup はネットワーク・ストリーム実装を Bun native へ戻すので、実 HTTP と | ||
| # 実 SQLite を使う他 workspace の behavior テストの経路は変わらない。 | ||
| preload = ["./apps/console/test/dom-setup.ts"] |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -C3 '^\[test\]|preload\s*=|GlobalRegistrator|bunNative' \
bunfig.toml apps/console/bunfig.toml apps/console/test/dom-setup.tsRepository: susumutomita/TenkaCloudSimulator
Length of output: 5178
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- root bunfig.toml ---'
sed -n '1,120p' bunfig.toml
echo
echo '--- apps/console/bunfig.toml ---'
sed -n '1,120p' apps/console/bunfig.toml
echo
echo '--- package / task files mentioning bun test ---'
rg -n --glob 'package.json' --glob 'bunfig.toml' --glob '*.toml' --glob '*.json' '"bun test"|bun test|preload|coverageThreshold|coverageSkipTestFiles' .
echo
echo '--- files at repo root ---'
git ls-files | sed -n '1,120p'Repository: susumutomita/TenkaCloudSimulator
Length of output: 9462
🌐 Web query:
Bun bunfig.toml test config lookup merge nearest bunfig inheritance preload workspace
💡 Result:
Bun uses bunfig.toml to manage runtime, test, and install configurations [1][2]. The lookup, inheritance, and merging behaviors are detailed below: Lookup and Ancestor Discovery Bun performs an ancestor-directory search to find bunfig.toml [3][4][5]. When running commands like bun test, install, or build, Bun walks up the directory tree from the current working directory to locate the nearest bunfig.toml [3][5]. This ensures that configurations defined in a monorepo root are respected even when executing commands from within subdirectories [3][6]. Relative paths defined inside a bunfig.toml (such as preload scripts, test.root, or coverage output directories) are resolved relative to the directory containing that bunfig.toml file, not the current working directory [3][4]. Global vs. Local Inheritance and Merging Bun supports a hierarchy of configuration files that are merged shallowly, where local files override global or system-wide settings [1][7][8]. The order of precedence, from lowest to highest, is [7]: 1. System config: Loaded from a path specified by the BUN_SYSTEM_CONFIG environment variable, or default locations like /etc/bunfig.toml [7]. 2. Global/User config: Located in home directories (e.g., ~/.bunfig.toml) or XDG-compliant paths such as $XDG_CONFIG_HOME/bun/bunfig.toml (with $HOME/.config/bun/bunfig.toml as the default) [7][9][8]. 3. Local/Project config: The bunfig.toml located in the project root or discovered via ancestor walk [1][7]. Note: For bun run, auto-discovery of global configuration files is generally disabled; only the project-local bunfig.toml is loaded [1][8]. Test Configuration and Preload - Test Settings: You can configure test behavior (e.g., root, preload, pathIgnorePatterns, coverage) under the [test] section in bunfig.toml [2][10]. - Preload Merging: When multiple configuration files are loaded, preload scripts are merged rather than replaced, ensuring that multiple levels of configuration can contribute to the final set of preloaded scripts [3]. - CLI Overrides: Command-line arguments always take precedence and override corresponding settings in bunfig.toml [1][2]. For example, using --coverage or --path-ignore-patterns on the CLI will ignore the values defined in your configuration file [2]. Top Results: [1][3][7][9][2][5]
Citations:
- 1: https://bun.com/docs/runtime/bunfig
- 2: https://bun.com/docs/test/configuration
- 3: Walk up for bunfig.toml when running from a subdirectory oven-sh/bun#29310
- 4:
preloadinbunfig.tomlnot work when working directory is not the project root oven-sh/bun#29308 - 5: Inherit
onlyFailuresfrom the rootbunfig.tomlin a monorepo oven-sh/bun#29109 - 6: Respect root bunfig.toml on monorepo oven-sh/bun#4112
- 7: Add system-wide bunfig.toml support oven-sh/bun#28727
- 8: https://bun.sh/docs/runtime/bunfig
- 9: bunfig: look up XDG-conventional global config paths oven-sh/bun#30853
- 10: https://bun.sh/docs/test/configuration
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
for path in [Path('package.json'), Path('apps/console/package.json'), Path('bunfig.toml'), Path('apps/console/bunfig.toml')]:
if path.exists():
print(f'--- {path} ---')
text = path.read_text()
for i, line in enumerate(text.splitlines(), 1):
if 'test' in line or 'preload' in line or 'bun test' in line or 'workspaces' in line:
print(f'{i}: {line}')
print()
PYRepository: susumutomita/TenkaCloudSimulator
Length of output: 901
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- root package.json test scripts ---'
python3 - <<'PY'
import json
from pathlib import Path
p = Path('package.json')
data = json.loads(p.read_text())
for k in ['scripts', 'workspaces']:
if k in data:
print(f'[{k}]')
if isinstance(data[k], dict):
for kk, vv in data[k].items():
if 'test' in kk or 'bun' in str(vv):
print(f'{kk}: {vv}')
else:
print(data[k])
print()
PY
echo '--- ci workflow snippets with bun test / workspace test entrypoints ---'
rg -n -C2 'bun test|npm test|pnpm test|make test|test:coverage|workspaces|apps/console|apps/api|apps/server|providers/|conformance/|contracts/' .github/workflows Makefile package.json
echo
echo '--- root test-related files ---'
fd -a 'bunfig.toml|package.json|Makefile|README.md' .Repository: susumutomita/TenkaCloudSimulator
Length of output: 3963
Keep this preload out of the root test config. bun test from the repo root uses bunfig.toml, so apps/console/test/dom-setup.ts is applied to every workspace test run here. Move the console DOM setup behind a console-only test entrypoint/config.
📍 Affects 2 files
bunfig.toml#L30-L36(this comment)apps/console/test/dom-setup.ts#L27-L75
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@bunfig.toml` around lines 30 - 36, Remove the console-specific preload from
the root bunfig.toml test configuration so root bun test runs do not load
apps/console/test/dom-setup.ts for every workspace. Add a console-only test
entrypoint or configuration that applies the dom-setup preload when running
console tests, while leaving apps/console/test/dom-setup.ts behavior unchanged
unless required to support that scoped configuration.
Source: Coding guidelines
Follow the OS color scheme at startup (dark fallback keeps the old bespoke look), render the protocol version as plain text sourced from SIMULATOR_PROTOCOL_VERSION instead of a dead TopNavigation button, and retitle the two English describe suites to Japanese BDD behavior descriptions per the test-authoring rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U
|
CodeRabbit の指摘 4 件の対応状況(d8a128d):
Generated by Claude Code |
2 participants
feat(console): migrate console to Cloudscape Design System
Closes #9
Fixes #12
設計正本:
docs/design/2026-07-15-console-cloudscape.md(選択肢 B: 全面移行 + view テストの client-side 化)。このPR merge 後に何が動くようになるか
統合コンソール(
apps/console)が Cloudscape Design System で描画され、TenkaCloud 本体の participant-portal 等と視覚的に一貫した状態(loading / error / ready・resource graph・operation form・event timeline・diagnostics)で操作できる。なぜ今これが要るか
console は手書き CSS 857 行の bespoke UI で、本体の Cloudscape ベース SPA と並べるとデザイントークン・状態表現が揃わず、simulator 問題が
make localから既定 OFF にゲートされている品質観点の 1 つだった。behavior(model / client / loader / launch-token)は成熟しているため、表示層だけを差し替えるのが最小リスクで品質バーを満たす。変更前 → 変更後のフロー
flowchart LR subgraph Before A1[view.tsx bespoke JSX] --> A2[styles.css 857 行] A3[view テスト] --> A4[renderToStaticMarkup 文字列 assertion] end subgraph After B1[view.tsx Cloudscape 722 行] --> B2[styles.css 17 行 + global-styles/dark mode] B3[view.test.tsx 10 ケース] --> B4["@testing-library/react client render (happy-dom preload)"] B5[behavior テスト] --> B6[実 HTTP Bun.serve + 実 SQLite — 無変更] end物理影響
ビルド成果物 (
make build)bun run build成功(chunk サイズ警告のみ、Cloudscape 由来で非ブロッキング)。behavior API は不変[test].preloadはネットワーク・ストリームを Bun native へ戻すため、他 workspace の実 HTTP / 実 SQLite テスト経路は不変 — 全 suite パリティ確認済み)依存パッケージの変更
transitive の collection-hooks / theming-runtime / ws も公開 7 日以上のバージョン(1.0.99 / 1.0.118 / 8.21.0)へ再解決済み。いずれも lifecycle script なし(
bun install --ignore-scripts+trustedDependencies = []のまま)。ファイルごとの変更意図
apps/console/src/view.tsx— 設計書の component 対応表どおり Cloudscape で再構築(AppLayout+TopNavigation / ContentLayout / KeyValuePairs / Cards / Table / Form / Alert / StatusIndicator)。未知 status →pendingフォールバックをstatusIndicatorTypeとして export しテスト可能にapps/console/src/styles.css— 857 → 17 行。残すのは body リセットと AppLayoutheaderSelectorと対になる sticky header のみapps/console/src/main.tsx— global-styles 読み込みとapplyMode(Mode.Dark)(旧 bespoke ダークテーマとの視覚的連続性)apps/console/test/view.test.tsx— 新規。view 系 10 ケースを client render + role / accessible name query で 1:1 移送(spike ケースを先頭に保持)apps/console/test/dom-setup.ts— 新規。happy-dom 登録後に fetch / Request / Response / streams / WebSocket を Bun native へ復元し No Mock の実通信経路を維持apps/console/test/console.test.tsx—renderToStaticMarkupの view assertion のみ削除(view.test.tsx へ移送)。behavior fixture / assertion は無変更apps/console/bunfig.toml—[test].preload追加。coveragePathIgnorePatternsに../../tools/**を追加(既存の他 workspace 除外リストと同型。apps/server 経由で workload-runner が console のカバレッジレポートに漏れる既存問題の修正)bunfig.toml(root) — root 実行のbun testにも同じ preload を適用。加えて[install].minimumReleaseAge = 604800を設定し、CI の Safe Chain(公開 168h 未満の tarball を遮断)と同じ隔離期間を Bun の解決自体に適用(初回 CI がこのゲートで落ちた根本対策)docs/adr/0014-bun-minimum-release-age.md— 新規。minimumReleaseAge 導入の判断記録(設定強化は ADR で残すというリポジトリ規則に従う)tools/workload-runner/test/runner.test.ts— stopped-data-plane probe テストの起動 2 秒レース(Issue 12、本 PR の CI を単発で赤にした flake)を除去。data plane の kill をコンテナ内の固定sleep 2から、start()成功後のdocker exec killallへ移し、テスト意図(起動成功 → data plane 停止 → typed failure)だけを検証するapps/console/package.json— 上記依存の追加Plan.md— 「console Cloudscape 統一」エントリ追加(目的 / 制約 / タスク / 検証手順 / 進捗ログ / 振り返り、設計書の未確定 2 項目の判断を記録)bun.lock— 依存追加 + 隔離期間を満たすバージョンへの再解決Regression 分析
tc_sim_v1を DOM に出さない)ConsoleLaunchTokenErrorでinnerHTMLに token が無いことを pinuseActionStateの pending / idempotency key 既定値Executing…+ disabled +console-<uuid>regex を pinbun testの失敗は 16 件(Docker workload-runner 15 + Docker 依存 catalog 1)で、変更を stash した baseline と同一集合であることを実測比較(このサンドボックスに Docker daemon が無いため。CI runner は Docker あり)bun run test:coverage= Funcs/Lines 100%(view.tsx / dom-setup.ts 含む)minimumReleaseAgeにより公開 7 日未満のバージョンは bun install が失敗する(CI の Safe Chain と同じ判定が手元で先に出るだけで、従来も CI では遮断されていた)。トレードオフは ADR-0014 に記録WorkloadFailed)は不変。Docker はこのサンドボックスに無いため CI が最終検証Rollback 手順
git revert <merge-sha>→ 新 PR で main に戻すbun installで lockfile を戻す(依存はビルド成果物にのみ影響、データ・サイドエフェクトなし)テスト戦略
runConsoleOperationActionの成功 / 失敗分岐view.test.tsx(10 ケース): Cloudscape client render spike / loading aria-busy / error role=alert + retry / token 秘匿 / 実 world の projection・output・event 表示 / empty 状態 / MissingProvider 診断 / status フォールバック / pending→success の form フロー / ConsoleOperationResult 3 状態Verification
Merge 前 (DRAFT 解除条件)
make test相当 — console 19/19 pass、全 suite の失敗集合はベースラインと同一(Docker 16 件のみ)make typecheck— 全 workspace 緑make lint— biome info のみ(pre-existing)、staged harness 0 findingsmake format_check— 緑make build— 緑(chunk サイズ警告のみ)Merge 後 (deploy / 反映後 signal)
nr devで console を起動し、dark mode の Cloudscape shell / resource graph / operation form を目視確認公開品質チェック
該当なしの理由: 公開ページ / API / Auth / Infra の変更なし(表示層と test 基盤のみ)。
check:pre-releaseは UI 目視項目を含むため Merge 後 Verification に回した。Known follow-ups
.claude/state/follow-ups.jsonlは空。CI を塞いでいた Issue 12 の flaky test は、リポジトリ規則「CI が詰まる原因になっている場合のみ同 PR で許可」に従い本 PR で修正)🤖 Generated with Claude Code
https://claude.ai/code/session_01DTv61FrTiLRFbsgrMeBT3U