Skip to content

fix(booskiff-web): SSR resume 時の /drive DOM 破損を修正し #19 workaround を解除 (#21) - #23

Merged
turtton merged 3 commits into
mainfrom
drive-ssr-resume-dom
Sep 14, 2026
Merged

fix(booskiff-web): SSR resume 時の /drive DOM 破損を修正し #19 workaround を解除 (#21)#23
turtton merged 3 commits into
mainfrom
drive-ssr-resume-dom

Conversation

@turtton

@turtton turtton commented Sep 14, 2026

Copy link
Copy Markdown
Member

Closes #21

原因の特定結果

候補のうち resumeMount + 直後の patch 経路 が原因でした（SSR シリアライズと model round-trip の不一致ではありません）。

  • 「何も描画しない」場所に使われていた HE.text ""（空テキストノード）は HTML 出力上は無になり、ブラウザのパース後 DOM にノードとして存在しません。
  • 一方 Flame 1.6.0 の hydration (resumeMount) は SSR DOM と仮想 children を index のみで 対応付け、tag/key/属性の検証も余分ノードの除去も行いません。
  • /drive SSR では Drive root の children [h1, errorBanner(空text), quota, upload, folder, file] の index 1 に空テキストがあり、これが消滅するため errorBanner 以降の全兄弟が 1 つずつ誤った DOM ノードに紐付き ます。
  • その状態で CheckSession → SessionChecked → LoadDrive → FilesLoaded/FoldersLoaded/BillingLoaded の patch が走ると、誤ノードの置換・挿入・削除が発生し、フォルダセクション重複 (folder-create-submit / folder-list が2要素)・セクション間子ノード混入・イベントハンドラ不活化が発生していました。
  • SPA 遷移で発生しないのは、クライアント描画では空テキストノードも実 DOM に作られるため index 対応が壊れないからです。

修正

  • App/View/Drive.purs: HE.text "" プレースホルダ 4 箇所を、SSR/client 双方に実ノードが常駐する非表示 div (emptySlot) に置換し、hydration の index 対応を維持。

#19 workaround 解除

  • bff/auth-real.ts: real ログイン成功レスポンスの next を /auth/oauth/start?return_to=/login（SPA 経路回避策）から return_to=/drive に復帰。
  • real E2E (e2e/real/tests/auth.spec.ts): return_to=/drive 直接遷移に戻し、永続化検証を API 確認から UI リロード確認（page.goto("/drive") + folder-list 表示）に復帰。

検証

  • 回帰テスト（mock E2E e2e/tests/drive-resume.spec.ts 新規追加: 認証済み /drive フルリロード）: 修正前 red（folder-create-submit が 2 要素）→ 修正後 green
  • scripts/e2e-real.sh: 4 passed（workaround 解除後）
  • scripts/e2e.sh: 17 passed（既存 16 件無回帰 + 新規 1 件）
  • bun test bff/: 99 pass / 0 fail（next 期待値を /drive に更新）
  • spago test: green

Out of scope（実装パケット通り、未着手）

turtton and others added 3 commits September 14, 2026 23:59
@turtton @sisyphus-dev-ai
test(booskiff-web): 認証済み /drive フルリロードの resume DOM 回帰テストを追加 (#21)
8407c51 
SSR + resumeMount 経路は mock E2E のカバレッジ穴だった。修正前に red (folder-create-submit が2要素) を確認済み。

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
@turtton @sisyphus-dev-ai
fix(booskiff-web): SSR resume 時の空テキストノード起因の DOM 破損を修正 (#21)
24dd5b7 
原因: 「何も描画しない」場所の HE.text "" は HTML パースで消滅するが、Flame の hydration は SSR DOM と仮想 children を index のみで対応付けるため、errorBanner 以降の全兄弟が誤った DOM ノードに紐付き、後続 patch が誤ノードを置換・挿入・削除していた (セクション重複・子ノード混入・ハンドラ不活化)。非表示 div (emptySlot) に置き換え、SSR/client 双方に実ノードを常駐させて index 対応を維持する。追加した回帰テストが red → green になることを確認。

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
@turtton @sisyphus-dev-ai
fix(booskiff-web): #19 workaround を解除し real ログインの return_to を /drive …
9631e4a 
…に復帰 (#21)

DOM 破損の修正により、OAuth callback 後の /drive フルロードが安全になったため、BFF の next を return_to=/login (SPA 経路回避策) から /drive に戻す。real E2E の永続化検証も API 確認から UI リロード確認 (page.goto("/drive") + folder-list 表示) に復帰。scripts/e2e-real.sh green を確認。

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
@turtton turtton added the intent-pr-approved intent-cli workflow label label Sep 14, 2026
@turtton
turtton merged commit c99a532 into main Sep 14, 2026
4 checks passed
@turtton
turtton deleted the drive-ssr-resume-dom branch September 14, 2026 15:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

intent-pr-approved intent-cli workflow label

Projects

None yet

Milestone

No milestone

1 participant

@turtton