feat(editor): report layout diagnostics through the editor-state API

- A black editor area could be Monaco holding a stale size or the
  pane itself being short, and the desktop window has no developer
  tools to tell them apart
- The browser now sends Monaco's believed size, the container and
  pane sizes, the window size and the state of the once-a-second
  layout check along with the editor state, and GET /api/editor-state
  returns them untouched, so a live window can be inspected from
  outside while the symptom is on screen

Author: Taka-S-dev

api/editor_state.go

@@ -43,6 +43,9 @@ type EditorState struct {
 	Cursor     *CursorPosition `json:"cursor,omitempty"`
 	Selection  *SelectionRange `json:"selection,omitempty"`
 	Viewport   *Viewport       `json:"viewport,omitempty"`
+	// Layout は描画の診断値。ブラウザが組み立てたものをそのまま返す。
+	// サーバは中身を解釈しない (見たい項目は再現のたびに変わる)。
+	Layout json.RawMessage `json:"layout,omitempty"`
 }
 
 // editorStateCache は最新の EditorState とその受信時刻を保持する。
@@ -106,6 +109,9 @@ func (h *Handler) handleEditorState(w http.ResponseWriter, r *http.Request) {
 		if state.Viewport != nil {
 			resp["viewport"] = state.Viewport
 		}
+		if len(state.Layout) > 0 {
+			resp["layout"] = state.Layout
+		}
 		jsonOK(w, resp)
 	case http.MethodPut:
 		var req EditorState

static/js/editor-state-sync.js

@@ -54,6 +54,26 @@
       };
     }
     if (viewport) state.viewport = viewport;
+    // 描画の診断。黒い領域が Monaco の認識ずれか、ペインの高さの問題かは、
+    // これらの数字を並べないと決められない
+    try {
+      const li = monacoEditor.getLayoutInfo();
+      const mc = document.getElementById('monaco-container');
+      const pb = document.getElementById('peek-body');
+      const pk = document.getElementById('peek');
+      const pr = document.getElementById('pane-right');
+      state.layout = {
+        monaco: [li.width, li.height],
+        container: mc ? [mc.clientWidth, mc.clientHeight] : null,
+        peek_body: pb ? pb.clientHeight : null,
+        peek: pk ? [pk.clientHeight, pk.style.height || ''] : null,
+        pane_right: pr ? pr.clientHeight : null,
+        window: [window.innerWidth, window.innerHeight, window.devicePixelRatio],
+        hidden: document.hidden,
+        resizing: (typeof peekResizing !== 'undefined') ? peekResizing : null,
+        watch: window._layoutWatch || null,
+      };
+    } catch (_) {}
     return state;
   }
 

static/js/editor.js

@@ -1099,18 +1099,27 @@ async function ensureEditor() {
   // 認識している大きさとコンテナの実寸を毎秒比べ、ずれていれば取り直す。
   // 読むのは値 2 つで、ずれていない限り layout() は呼ばない。
   let driftStreak = 0, driftKey = '';
+  // 外から読むための内部状態。デスクトップ窓には開発者ツールが無いので、
+  // 再現時に何が起きているかは /api/editor-state 経由でしか見られない
+  window._layoutWatch = { ticks: 0, skipped: '', streak: 0, recovered: 0, last: '' };
   setInterval(() => {
-    if (!monacoEditor || document.hidden || peekResizing) return;
+    const lw = window._layoutWatch;
+    lw.ticks++;
+    lw.skipped = !monacoEditor ? 'no-editor' : document.hidden ? 'hidden' : peekResizing ? 'resizing' : '';
+    if (lw.skipped) return;
     const el = id('monaco-container');
-    if (!el || !el.offsetParent) return; // エディタを閉じているとき
+    if (!el || !el.offsetParent) { lw.skipped = 'closed'; return; } // エディタを閉じているとき
     const w = el.clientWidth, h = el.clientHeight;
-    if (!layoutDrifted(w, h, monacoEditor.getLayoutInfo())) { driftStreak = 0; return; }
+    if (!layoutDrifted(w, h, monacoEditor.getLayoutInfo())) { driftStreak = 0; lw.streak = 0; return; }
     // 同じ実寸で 3 回直しても合わないなら、そのサイズでは諦める（毎秒描き直しの連打を防ぐ）
     const key = w + 'x' + h;
     if (key !== driftKey) { driftKey = key; driftStreak = 0; }
+    lw.streak = driftStreak + 1;
     if (++driftStreak > 3) return;
     const before = monacoEditor.getLayoutInfo();
     relayout();
+    lw.recovered++;
+    lw.last = before.width + 'x' + before.height + '->' + w + 'x' + h;
     // 効いたことを見えるようにする。「保険が動いたのに直らない」と「動いていない」は
     // 原因が別で、画面からは区別できない
     st('エディタの描画を復旧しました (' + before.width + 'x' + before.height + ' → ' + w + 'x' + h + ')');