From ae7674fb851a5e4d4d4b4d73282fdf3543571fb4 Mon Sep 17 00:00:00 2001
From: shima004 <yellow030408@gmail.com>
Date: Tue, 26 May 2026 16:07:58 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E8=A4=87=E6=95=B0=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=A7=E3=81=AE=E5=90=8C=E6=99=82=E5=86=8D=E7=94=9F?=
 =?UTF-8?q?=E3=81=B8=E3=81=AE=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ControlPanel.svelte     | 423 ++----------
 src/lib/stores/simulation/interpolation.ts |  92 +++
 src/routes/+page.svelte                    | 751 ++++++++++++++++++++-
 3 files changed, 883 insertions(+), 383 deletions(-)
 create mode 100644 src/lib/stores/simulation/interpolation.ts

diff --git a/src/lib/components/ControlPanel.svelte b/src/lib/components/ControlPanel.svelte
index cf0b506..21b96e7 100644
--- a/src/lib/components/ControlPanel.svelte
+++ b/src/lib/components/ControlPanel.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
-  import type { SimEntity } from "$lib/rcrs/types";
+  import { base } from "$app/paths";
   import { EntityURN, isAgent, isCommandCenter } from "$lib/rcrs/urns";
   import {
-    agentActions,
-    animatedEntities,
-    computeNextSnapshot,
     connected,
     connectWS,
     currentStep,
     disconnectWS,
-    entities,
     errorMsg,
-    agentDisplayMode,
     followMode,
-    getCommandsAtStep,
     kernelConfig,
     loadFile,
     loading,
@@ -22,17 +16,16 @@
     mode,
     perceptionViewMode,
     pinnedAgentId,
-    seekToStep,
     selectedEntity,
   } from "$lib/stores/simulation";
   import { onMount } from "svelte";
-  import { get } from "svelte/store";
 
   // /proxy?host=<tcp-host>&port=<tcp-port> → Vite の tcpWsProxyPlugin が中継
   const _q =
     typeof window !== "undefined"
       ? new URLSearchParams(window.location.search)
       : new URLSearchParams();
+  const paneMode = _q.has("pane");
   let tcpHost = $state(_q.get("host") ?? "localhost");
   let tcpPort = $state(_q.get("port") ?? "27931");
   const wsScheme = typeof window !== "undefined" && window.location.protocol === "https:" ? "wss" : "ws";
@@ -41,6 +34,7 @@
   );
   let fileInput = $state<HTMLInputElement>();
   let logUrl = $state(_q.get("url") ?? "");
+  let compareUrlText = $state(_q.getAll("compare").join("\n"));
 
   onMount(async () => {
     const initialUrl = _q.get("url");
@@ -52,200 +46,6 @@
       connectWS(wsUrl);
     }
   });
-  let playing = $state(false);
-  let loopMode = $state(false);
-  let loopCountdown = $state<number | null>(null);
-  let loopTimeoutId: ReturnType<typeof setTimeout> | null = null;
-  let loopIntervalId: ReturnType<typeof setInterval> | null = null;
-  let rafId: number | null = null;
-  let stepStartTime = 0;
-  let nextSnapshot: Map<number, SimEntity> | null = null;
-  let playSpeed = $state(1); // steps/sec multiplier
-  const SPEEDS = [0.5, 1, 2, 4, 8];
-  const LOOP_WAIT_MS = 15000;
-
-  function easeInOut(t: number): number {
-    return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
-  }
-
-  // Catmull-Rom スプライン: p1→p2 間を t (0→1) で補間
-  function catmullRom(
-    p0: [number, number],
-    p1: [number, number],
-    p2: [number, number],
-    p3: [number, number],
-    t: number,
-  ): [number, number] {
-    const t2 = t * t,
-      t3 = t2 * t;
-    return [
-      0.5 *
-        (2 * p1[0] +
-          (-p0[0] + p2[0]) * t +
-          (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 +
-          (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3),
-      0.5 *
-        (2 * p1[1] +
-          (-p0[1] + p2[1]) * t +
-          (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 +
-          (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3),
-    ];
-  }
-
-  // positionHistory = [x0,y0, x1,y1, ...] の経路上を t (0→1) でスプライン補間
-  function posOnPath(hist: number[], t: number): [number, number] {
-    const pts: [number, number][] = [];
-    for (let i = 0; i + 1 < hist.length; i += 2)
-      pts.push([hist[i], hist[i + 1]]);
-    if (pts.length === 0) return [0, 0];
-    if (pts.length === 1) return pts[0];
-
-    // ease-in-out を適用
-    const et = easeInOut(t);
-
-    if (pts.length === 2) {
-      // 2点のみは線形 + easing
-      return [
-        pts[0][0] + (pts[1][0] - pts[0][0]) * et,
-        pts[0][1] + (pts[1][1] - pts[0][1]) * et,
-      ];
-    }
-
-    // セグメント長に基づいて進行位置を求める
-    const lens: number[] = [];
-    let total = 0;
-    for (let i = 0; i + 1 < pts.length; i++) {
-      const d = Math.hypot(
-        pts[i + 1][0] - pts[i][0],
-        pts[i + 1][1] - pts[i][1],
-      );
-      lens.push(d);
-      total += d;
-    }
-    if (total === 0) return pts[pts.length - 1];
-
-    let rem = et * total;
-    for (let i = 0; i < lens.length; i++) {
-      if (rem <= lens[i] || i === lens.length - 1) {
-        const s = lens[i] === 0 ? 0 : Math.min(rem / lens[i], 1);
-        // ファントム点（端点を繰り返す）を使って Catmull-Rom 適用
-        const p0 = pts[Math.max(0, i - 1)];
-        const p1 = pts[i];
-        const p2 = pts[Math.min(pts.length - 1, i + 1)];
-        const p3 = pts[Math.min(pts.length - 1, i + 2)];
-        return catmullRom(p0, p1, p2, p3, s);
-      }
-      rem -= lens[i];
-    }
-    return pts[pts.length - 1];
-  }
-
-  function interpolateEntities(
-    current: Map<number, SimEntity>,
-    next: Map<number, SimEntity>,
-    t: number,
-  ): Map<number, SimEntity> {
-    const result = new Map(current);
-    for (const [id, nextE] of next) {
-      const curE = current.get(id);
-      if (!curE || !("x" in curE) || !("x" in nextE)) continue;
-      // Skip interpolation when the entity is being carried (x/y reset to 0).
-      // Keep it at the current position; buildAgentLayers will hide it at step N+1.
-      if ((nextE as { x: number }).x === 0 && (nextE as { y: number }).y === 0) continue;
-      const hist = (nextE as { positionHistory?: number[] }).positionHistory;
-      let nx: number, ny: number;
-      if (hist && hist.length >= 4) {
-        [nx, ny] = posOnPath(hist, t);
-      } else {
-        nx =
-          (curE as { x: number }).x +
-          ((nextE as { x: number }).x - (curE as { x: number }).x) * t;
-        ny =
-          (curE as { y: number }).y +
-          ((nextE as { y: number }).y - (curE as { y: number }).y) * t;
-      }
-      result.set(id, { ...curE, x: nx, y: ny });
-    }
-    return result;
-  }
-
-  function preAdvanceActions() {
-    if ($currentStep < $maxStep) {
-      agentActions.set(getCommandsAtStep($currentStep + 1));
-    }
-  }
-
-  function startPlayback() {
-    playing = true;
-    stepStartTime = performance.now();
-    nextSnapshot =
-      $currentStep < $maxStep ? computeNextSnapshot($currentStep + 1) : null;
-    preAdvanceActions();
-
-    function tick(now: number) {
-      if (!playing) return;
-      const duration = 400 / playSpeed;
-      const elapsed = now - stepStartTime;
-
-      if (elapsed >= duration) {
-        if ($currentStep >= $maxStep) {
-          playing = false;
-          rafId = null;
-          if (loopMode) {
-            loopCountdown = LOOP_WAIT_MS / 1000;
-            loopIntervalId = setInterval(() => {
-              loopCountdown = (loopCountdown ?? 1) - 1;
-            }, 1000);
-            loopTimeoutId = setTimeout(() => {
-              clearInterval(loopIntervalId!);
-              loopIntervalId = null;
-              loopCountdown = null;
-              loopTimeoutId = null;
-              seekToStep(0);
-              startPlayback();
-            }, LOOP_WAIT_MS);
-          }
-          return;
-        }
-        seekToStep($currentStep + 1);
-        stepStartTime = now - (elapsed % duration);
-        nextSnapshot =
-          $currentStep < $maxStep
-            ? computeNextSnapshot($currentStep + 1)
-            : null;
-        preAdvanceActions();
-      } else if (nextSnapshot) {
-        animatedEntities.set(
-          interpolateEntities(get(entities), nextSnapshot, elapsed / duration),
-        );
-      }
-
-      rafId = requestAnimationFrame(tick);
-    }
-
-    rafId = requestAnimationFrame(tick);
-  }
-
-  function stopPlayback() {
-    playing = false;
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-    if (loopTimeoutId !== null) {
-      clearTimeout(loopTimeoutId);
-      loopTimeoutId = null;
-    }
-    if (loopIntervalId !== null) {
-      clearInterval(loopIntervalId);
-      loopIntervalId = null;
-    }
-    loopCountdown = null;
-    nextSnapshot = null;
-    if (get(mode) === "file") {
-      agentActions.set(getCommandsAtStep(get(currentStep)));
-    }
-  }
   let showConfig = $state(false);
   let openGroups = $state<Set<string>>(new Set());
   let inputsCollapsed = $state(false);
@@ -279,42 +79,19 @@
     if (file) loadFile(file);
   }
 
-  function handleSeek(e: Event) {
-    seekToStep(Number((e.target as HTMLInputElement).value));
-  }
-
-  function stepBack() {
-    seekToStep(Math.max(0, $currentStep - 1));
-  }
-
-  function stepForward() {
-    seekToStep(Math.min($maxStep, $currentStep + 1));
-  }
+  function openCompareMode() {
+    const urls = compareUrlText
+      .split(/\r?\n/)
+      .map((url) => url.trim())
+      .filter(Boolean);
+    if (urls.length < 2) return;
 
-  function togglePlay() {
-    if (playing) {
-      stopPlayback();
-    } else {
-      startPlayback();
-    }
-  }
-
-  function setSpeed(s: number) {
-    if (playing) {
-      const elapsed = performance.now() - stepStartTime;
-      const progress = Math.min(elapsed / (400 / playSpeed), 1);
-      playSpeed = s;
-      stepStartTime = performance.now() - progress * (400 / s);
-    } else {
-      playSpeed = s;
-    }
+    const params = new URLSearchParams();
+    for (const url of urls) params.append("compare", url);
+    window.location.href = `${base || "/"}?${params.toString()}`;
   }
 
   $effect(() => {
-    // モードが変わったら自動再生を停止
-    if ($mode !== "file") {
-      stopPlayback();
-    }
     // 再生開始時にConnectionを折りたたむ
     if ($mode !== "idle") {
       inputsCollapsed = true;
@@ -412,6 +189,32 @@
       </div>
     </section>
 
+    {#if !paneMode}
+      <div class="divider">or</div>
+
+      <section>
+        <span class="section-label">Compare Logs</span>
+        <textarea
+          class="compare-input"
+          bind:value={compareUrlText}
+          placeholder="https://example.com/run-a.7z&#10;https://example.com/run-b.7z"
+          disabled={$loading}
+          rows="3"
+        ></textarea>
+        <button
+          class="btn primary compare-open"
+          onclick={openCompareMode}
+          disabled={$loading ||
+            compareUrlText
+              .split(/\r?\n/)
+              .map((url) => url.trim())
+              .filter(Boolean).length < 2}
+        >
+          Open synced comparison
+        </button>
+      </section>
+    {/if}
+
     {#if $errorMsg}
       <div class="error">{$errorMsg}</div>
     {/if}
@@ -424,60 +227,6 @@
         <span class="section-label">Step</span>
         <span class="step-counter">{$currentStep} / {$maxStep}</span>
       </div>
-      <input
-        type="range"
-        min="0"
-        max={$maxStep}
-        value={$currentStep}
-        oninput={handleSeek}
-      />
-      <div class="playback-row">
-        <button
-          class="btn icon"
-          onclick={stepBack}
-          disabled={$currentStep <= 0}
-          aria-label="1ステップ戻る">⏮</button
-        >
-        <button
-          class="btn icon play"
-          onclick={togglePlay}
-          aria-label={playing ? "一時停止" : "自動再生"}
-        >
-          {playing ? "⏸" : "▶"}
-        </button>
-        <button
-          class="btn icon"
-          onclick={stepForward}
-          disabled={$currentStep >= $maxStep}
-          aria-label="1ステップ進む">⏭</button
-        >
-        <button
-          class="btn icon loop"
-          class:active={loopMode}
-          onclick={() => { loopMode = !loopMode; if (!loopMode) stopPlayback(); }}
-          title={loopMode ? "ループ再生オフ" : "ループ再生オン"}
-          aria-label="ループ再生">🔁</button
-        >
-        <button
-          class="btn icon"
-          class:active={$agentDisplayMode === "emoji"}
-          onclick={() => agentDisplayMode.update((v) => (v === "emoji" ? "circle" : "emoji"))}
-          title={$agentDisplayMode === "emoji" ? "絵文字モード（クリックで切替）" : "Circleモード（クリックで切替）"}
-          aria-label="エージェント表示切替">{$agentDisplayMode === "emoji" ? "🚒" : "⬤"}</button
-        >
-        <div class="speed-btns">
-          {#each SPEEDS as s}
-            <button
-              class="btn speed"
-              class:active={playSpeed === s}
-              onclick={() => setSpeed(s)}>{s}x</button
-            >
-          {/each}
-        </div>
-      </div>
-      {#if loopCountdown !== null}
-        <div class="loop-countdown">{loopCountdown}s でループ再開</div>
-      {/if}
     </section>
   {/if}
 
@@ -668,6 +417,30 @@
     opacity: 0.5;
   }
 
+  .compare-input {
+    width: 100%;
+    min-height: 64px;
+    resize: vertical;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    color: #c8d8e8;
+    font-size: 11px;
+    line-height: 1.35;
+    padding: 6px 8px;
+    font-family: monospace;
+  }
+
+  .compare-input:disabled {
+    opacity: 0.5;
+  }
+
+  .compare-open {
+    width: 100%;
+    margin-top: 6px;
+  }
+
   .port-input {
     width: 52px;
     background: rgba(255, 255, 255, 0.05);
@@ -783,78 +556,6 @@
     font-variant-numeric: tabular-nums;
   }
 
-  input[type="range"] {
-    width: 100%;
-    accent-color: #00c8ff;
-  }
-
-  .playback-row {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    flex-wrap: wrap;
-  }
-
-  .speed-btns {
-    display: flex;
-    gap: 3px;
-    margin-left: 4px;
-  }
-
-  .btn.speed {
-    font-size: 10px;
-    padding: 3px 5px;
-    border: 1px solid rgba(0, 200, 255, 0.3);
-    color: #607080;
-    background: none;
-  }
-  .btn.speed:hover {
-    color: #a8c8d8;
-    border-color: rgba(0, 200, 255, 0.5);
-  }
-  .btn.speed.active {
-    color: #00c8ff;
-    border-color: rgba(0, 200, 255, 0.7);
-    background: rgba(0, 200, 255, 0.08);
-  }
-
-  .btn.icon {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #a8c8d8;
-    padding: 4px 10px;
-    font-size: 11px;
-    border-radius: 4px;
-  }
-
-  .btn.icon.loop.active {
-    color: #00c8ff;
-    border-color: rgba(0, 200, 255, 0.6);
-    background: rgba(0, 200, 255, 0.1);
-  }
-
-  .loop-countdown {
-    font-size: 10px;
-    color: #607080;
-    text-align: center;
-    padding: 3px 0 0;
-    font-variant-numeric: tabular-nums;
-  }
-  .btn.icon:hover:not(:disabled) {
-    background: rgba(0, 180, 255, 0.15);
-    color: #00c8ff;
-  }
-  .btn.icon.play {
-    background: rgba(0, 180, 255, 0.12);
-    border-color: rgba(0, 200, 255, 0.3);
-    color: #00c8ff;
-    min-width: 36px;
-  }
-  .btn.icon.play:hover {
-    background: rgba(0, 180, 255, 0.25);
-  }
-
   .overlay-backdrop {
     position: fixed;
     inset: 0;
diff --git a/src/lib/stores/simulation/interpolation.ts b/src/lib/stores/simulation/interpolation.ts
new file mode 100644
index 0000000..9d138eb
--- /dev/null
+++ b/src/lib/stores/simulation/interpolation.ts
@@ -0,0 +1,92 @@
+import type { SimEntity } from "$lib/rcrs/types";
+
+function easeInOut(t: number): number {
+  return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+}
+
+function catmullRom(
+  p0: [number, number],
+  p1: [number, number],
+  p2: [number, number],
+  p3: [number, number],
+  t: number,
+): [number, number] {
+  const t2 = t * t;
+  const t3 = t2 * t;
+  return [
+    0.5 *
+      (2 * p1[0] +
+        (-p0[0] + p2[0]) * t +
+        (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 +
+        (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3),
+    0.5 *
+      (2 * p1[1] +
+        (-p0[1] + p2[1]) * t +
+        (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 +
+        (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3),
+  ];
+}
+
+function posOnPath(hist: number[], t: number): [number, number] {
+  const pts: [number, number][] = [];
+  for (let i = 0; i + 1 < hist.length; i += 2) pts.push([hist[i], hist[i + 1]]);
+  if (pts.length === 0) return [0, 0];
+  if (pts.length === 1) return pts[0];
+
+  const et = easeInOut(t);
+
+  if (pts.length === 2) {
+    return [
+      pts[0][0] + (pts[1][0] - pts[0][0]) * et,
+      pts[0][1] + (pts[1][1] - pts[0][1]) * et,
+    ];
+  }
+
+  const lens: number[] = [];
+  let total = 0;
+  for (let i = 0; i + 1 < pts.length; i++) {
+    const d = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]);
+    lens.push(d);
+    total += d;
+  }
+  if (total === 0) return pts[pts.length - 1];
+
+  let rem = et * total;
+  for (let i = 0; i < lens.length; i++) {
+    if (rem <= lens[i] || i === lens.length - 1) {
+      const s = lens[i] === 0 ? 0 : Math.min(rem / lens[i], 1);
+      const p0 = pts[Math.max(0, i - 1)];
+      const p1 = pts[i];
+      const p2 = pts[Math.min(pts.length - 1, i + 1)];
+      const p3 = pts[Math.min(pts.length - 1, i + 2)];
+      return catmullRom(p0, p1, p2, p3, s);
+    }
+    rem -= lens[i];
+  }
+  return pts[pts.length - 1];
+}
+
+export function interpolateEntities(
+  current: Map<number, SimEntity>,
+  next: Map<number, SimEntity>,
+  t: number,
+): Map<number, SimEntity> {
+  const result = new Map(current);
+  for (const [id, nextE] of next) {
+    const curE = current.get(id);
+    if (!curE || !("x" in curE) || !("x" in nextE)) continue;
+    if ((nextE as { x: number }).x === 0 && (nextE as { y: number }).y === 0) continue;
+
+    const hist = (nextE as { positionHistory?: number[] }).positionHistory;
+    let nx: number;
+    let ny: number;
+    if (hist && hist.length >= 4) {
+      [nx, ny] = posOnPath(hist, t);
+    } else {
+      nx = (curE as { x: number }).x + ((nextE as { x: number }).x - (curE as { x: number }).x) * t;
+      ny = (curE as { y: number }).y + ((nextE as { y: number }).y - (curE as { y: number }).y) * t;
+    }
+    result.set(id, { ...curE, x: nx, y: ny });
+  }
+  return result;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bf1c206..89868c9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { base } from "$app/paths";
+  import type { SimEntity } from "$lib/rcrs/types";
   import ChannelFilterPanel from "$lib/components/ChannelFilterPanel.svelte";
   import CivilianStatusPanel from "$lib/components/CivilianStatusPanel.svelte";
   import ControlPanel from "$lib/components/ControlPanel.svelte";
@@ -8,13 +10,22 @@
   import SimMap from "$lib/components/SimMap.svelte";
   import TeamNamePanel from "$lib/components/TeamNamePanel.svelte";
   import TimelinePanel from "$lib/components/TimelinePanel.svelte";
+  import { interpolateEntities } from "$lib/stores/simulation/interpolation";
   import {
+    agentActions,
+    agentDisplayMode,
+    animatedEntities,
+    computeNextSnapshot,
+    currentStep,
     downloadProgress,
     downloadSize,
+    entities,
     extractProgress,
+    getCommandsAtStep,
     loading,
     loadUrl,
     maxStep,
+    mode,
     parseProgress,
     seekToStep,
   } from "$lib/stores/simulation";
@@ -30,14 +41,326 @@
 
   let timelineOpen = $state(false);
   let screenshotMode = $state(false);
+  let embedMode = $state(false);
+  let paneMode = $state(false);
   let dataLoaded = $state(false);
+  let compareUrls = $state<string[]>([]);
+  let compareFrames = $state<HTMLIFrameElement[]>([]);
+  let compareStep = $state(0);
+  let compareMaxStep = $state(0);
+  let comparePlaying = $state(false);
+  let compareSpeed = $state(1);
+  let compareRafId: number | null = null;
+  let compareStepStart = 0;
+  let singlePlaying = $state(false);
+  let singleLoopMode = $state(false);
+  let singleLoopCountdown = $state<number | null>(null);
+  let singleLoopTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let singleLoopIntervalId: ReturnType<typeof setInterval> | null = null;
+  let singleRafId: number | null = null;
+  let singleStepStart = 0;
+  let singleNextSnapshot: Map<number, SimEntity> | null = null;
+  let singleSpeed = $state(1);
 
-  onMount(async () => {
+  const COMPARE_SPEEDS = [0.5, 1, 2, 4, 8];
+  const LOOP_WAIT_MS = 15000;
+
+  function appPath(params: URLSearchParams) {
+    return `${base || "/"}?${params.toString()}`;
+  }
+
+  function compareSrc(url: string) {
+    const params = new URLSearchParams();
+    params.set("autoload", url);
+    params.set("embed", "1");
+    return appPath(params);
+  }
+
+  function emptyPaneSrc() {
+    const params = new URLSearchParams();
+    params.set("pane", "1");
+    return appPath(params);
+  }
+
+  function currentPaneSrc() {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("compare");
+    params.delete("embed");
+    params.delete("screenshot");
+    params.delete("panes");
+    params.set("pane", "1");
+    return appPath(params);
+  }
+
+  function getFrameApi(frame: HTMLIFrameElement | undefined) {
+    return frame?.contentWindow as
+      | (Window & {
+          __simscope_seekTo?: (step: number) => void;
+          __simscope_maxStep?: () => number;
+          __simscope_previewStep?: (nextStep: number, progress: number) => void;
+          __simscope_setAgentDisplayMode?: (mode: "circle" | "emoji") => void;
+        })
+      | undefined;
+  }
+
+  function activeFrames() {
+    return paneSources.length > 0 ? paneFrames : compareFrames;
+  }
+
+  function seekCompare(step: number) {
+    compareStep = Math.max(0, Math.min(step, compareMaxStep));
+    for (const frame of activeFrames()) {
+      getFrameApi(frame)?.__simscope_seekTo?.(compareStep);
+    }
+  }
+
+  function previewCompare(nextStep: number, progress: number) {
+    for (const frame of activeFrames()) {
+      getFrameApi(frame)?.__simscope_previewStep?.(nextStep, progress);
+    }
+  }
+
+  let compareLoopMode = $state(false);
+  let compareLoopCountdown = $state<number | null>(null);
+  let compareLoopTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let compareLoopIntervalId: ReturnType<typeof setInterval> | null = null;
+  let compareAgentDisplayMode = $state<"circle" | "emoji">("circle");
+
+  function setCompareAgentDisplayMode(mode: "circle" | "emoji") {
+    compareAgentDisplayMode = mode;
+    for (const frame of activeFrames()) {
+      getFrameApi(frame)?.__simscope_setAgentDisplayMode?.(mode);
+    }
+  }
+
+  function toggleCompareAgentDisplayMode() {
+    setCompareAgentDisplayMode(compareAgentDisplayMode === "emoji" ? "circle" : "emoji");
+  }
+
+  function resetCompareLoopTimers() {
+    if (compareLoopTimeoutId !== null) {
+      clearTimeout(compareLoopTimeoutId);
+      compareLoopTimeoutId = null;
+    }
+    if (compareLoopIntervalId !== null) {
+      clearInterval(compareLoopIntervalId);
+      compareLoopIntervalId = null;
+    }
+    compareLoopCountdown = null;
+  }
+
+  function updateCompareMaxStep() {
+    const steps = activeFrames()
+      .map((frame) => getFrameApi(frame)?.__simscope_maxStep?.() ?? 0)
+      .filter((step) => step > 0);
+    compareMaxStep = steps.length > 0 ? Math.min(...steps) : 0;
+    if (compareStep > compareMaxStep) seekCompare(compareMaxStep);
+  }
+
+  function startComparePlayback() {
+    if (compareMaxStep <= 0) return;
+    comparePlaying = true;
+    compareStepStart = performance.now();
+
+    function tick(now: number) {
+      if (!comparePlaying) return;
+      const duration = 400 / compareSpeed;
+      const elapsed = now - compareStepStart;
+      if (elapsed >= duration) {
+        if (compareStep >= compareMaxStep) {
+          comparePlaying = false;
+          compareRafId = null;
+          if (compareLoopMode) {
+            compareLoopCountdown = LOOP_WAIT_MS / 1000;
+            compareLoopIntervalId = setInterval(() => {
+              compareLoopCountdown = (compareLoopCountdown ?? 1) - 1;
+            }, 1000);
+            compareLoopTimeoutId = setTimeout(() => {
+              resetCompareLoopTimers();
+              seekCompare(0);
+              startComparePlayback();
+            }, LOOP_WAIT_MS);
+          }
+          return;
+        }
+        seekCompare(compareStep + 1);
+        compareStepStart = now - (elapsed % duration);
+        if (compareStep < compareMaxStep) {
+          previewCompare(compareStep + 1, (now - compareStepStart) / duration);
+        }
+      } else if (compareStep < compareMaxStep) {
+        previewCompare(compareStep + 1, elapsed / duration);
+      }
+      compareRafId = requestAnimationFrame(tick);
+    }
+
+    compareRafId = requestAnimationFrame(tick);
+  }
+
+  function stopComparePlayback() {
+    comparePlaying = false;
+    resetCompareLoopTimers();
+    if (compareRafId !== null) {
+      cancelAnimationFrame(compareRafId);
+      compareRafId = null;
+    }
+  }
+
+  function toggleComparePlayback() {
+    if (comparePlaying) stopComparePlayback();
+    else startComparePlayback();
+  }
+
+  function setCompareSpeed(speed: number) {
+    if (comparePlaying) {
+      const elapsed = performance.now() - compareStepStart;
+      const progress = Math.min(elapsed / (400 / compareSpeed), 1);
+      compareSpeed = speed;
+      compareStepStart = performance.now() - progress * (400 / speed);
+    } else {
+      compareSpeed = speed;
+    }
+  }
+
+  function preAdvanceSingleActions() {
+    if ($currentStep < $maxStep) {
+      agentActions.set(getCommandsAtStep($currentStep + 1));
+    }
+  }
+
+  function startSinglePlayback() {
+    if ($maxStep <= 0) return;
+    singlePlaying = true;
+    singleStepStart = performance.now();
+    singleNextSnapshot =
+      $currentStep < $maxStep ? computeNextSnapshot($currentStep + 1) : null;
+    preAdvanceSingleActions();
+
+    function tick(now: number) {
+      if (!singlePlaying) return;
+      const duration = 400 / singleSpeed;
+      const elapsed = now - singleStepStart;
+
+      if (elapsed >= duration) {
+        if ($currentStep >= $maxStep) {
+          singlePlaying = false;
+          singleRafId = null;
+          if (singleLoopMode) {
+            singleLoopCountdown = LOOP_WAIT_MS / 1000;
+            singleLoopIntervalId = setInterval(() => {
+              singleLoopCountdown = (singleLoopCountdown ?? 1) - 1;
+            }, 1000);
+            singleLoopTimeoutId = setTimeout(() => {
+              if (singleLoopIntervalId !== null) clearInterval(singleLoopIntervalId);
+              singleLoopIntervalId = null;
+              singleLoopCountdown = null;
+              singleLoopTimeoutId = null;
+              seekToStep(0);
+              startSinglePlayback();
+            }, LOOP_WAIT_MS);
+          }
+          return;
+        }
+
+        seekToStep($currentStep + 1);
+        singleStepStart = now - (elapsed % duration);
+        singleNextSnapshot =
+          $currentStep < $maxStep ? computeNextSnapshot($currentStep + 1) : null;
+        preAdvanceSingleActions();
+      } else if (singleNextSnapshot) {
+        animatedEntities.set(
+          interpolateEntities(get(entities), singleNextSnapshot, elapsed / duration),
+        );
+      }
+
+      singleRafId = requestAnimationFrame(tick);
+    }
+
+    singleRafId = requestAnimationFrame(tick);
+  }
+
+  function stopSinglePlayback() {
+    singlePlaying = false;
+    if (singleRafId !== null) {
+      cancelAnimationFrame(singleRafId);
+      singleRafId = null;
+    }
+    if (singleLoopTimeoutId !== null) {
+      clearTimeout(singleLoopTimeoutId);
+      singleLoopTimeoutId = null;
+    }
+    if (singleLoopIntervalId !== null) {
+      clearInterval(singleLoopIntervalId);
+      singleLoopIntervalId = null;
+    }
+    singleLoopCountdown = null;
+    singleNextSnapshot = null;
+    if (get(mode) === "file") {
+      agentActions.set(getCommandsAtStep(get(currentStep)));
+    }
+  }
+
+  function toggleSinglePlayback() {
+    if (singlePlaying) stopSinglePlayback();
+    else startSinglePlayback();
+  }
+
+  function seekSingle(step: number) {
+    stopSinglePlayback();
+    seekToStep(Math.max(0, Math.min(step, $maxStep)));
+  }
+
+  function setSingleSpeed(speed: number) {
+    if (singlePlaying) {
+      const elapsed = performance.now() - singleStepStart;
+      const progress = Math.min(elapsed / (400 / singleSpeed), 1);
+      singleSpeed = speed;
+      singleStepStart = performance.now() - progress * (400 / speed);
+    } else {
+      singleSpeed = speed;
+    }
+  }
+
+  let paneSources = $state<string[]>([]);
+  let paneFrames = $state<HTMLIFrameElement[]>([]);
+  const showingPaneGrid = $derived(paneSources.length > 0 && !embedMode && !paneMode);
+
+  function enterPaneMode() {
+    paneSources = [currentPaneSrc(), emptyPaneSrc()];
+    stopComparePlayback();
+    compareStep = 0;
+    compareMaxStep = 0;
+    setCompareAgentDisplayMode(compareAgentDisplayMode);
+  }
+
+  function addPane() {
+    paneSources = [...paneSources, emptyPaneSrc()];
+    updateCompareMaxStep();
+    requestAnimationFrame(() => setCompareAgentDisplayMode(compareAgentDisplayMode));
+  }
+
+  onMount(() => {
     const params = new URLSearchParams(window.location.search);
     screenshotMode = params.has("screenshot");
+    embedMode = params.has("embed");
+    paneMode = params.has("pane");
+    compareUrls = params.getAll("compare").filter(Boolean);
+    const panes = Math.max(0, parseInt(params.get("panes") ?? "0", 10));
+    if (panes > 1 && !embedMode && !paneMode) {
+      paneSources = Array.from({ length: panes }, emptyPaneSrc);
+    }
+
+    const timer =
+      !embedMode && !paneMode ? setInterval(updateCompareMaxStep, 500) : null;
+
     const autoUrl = params.get("autoload");
     const autoStep = params.get("step");
-    if (autoUrl) {
+    void (async () => {
+      if (!autoUrl) {
+        dataLoaded = true;
+        return;
+      }
+
       const result = await loadUrl(autoUrl);
       if (result === "ok" && autoStep !== null) {
         seekToStep(parseInt(autoStep, 10));
@@ -45,12 +368,42 @@
       requestAnimationFrame(() =>
         requestAnimationFrame(() => {
           dataLoaded = true;
+          window.parent.postMessage({ type: "simscope:loaded" }, window.location.origin);
         }),
       );
-    }
+    })();
+
     // CLI スナップショット用
     (window as unknown as Record<string, unknown>).__simscope_seekTo = (step: number) => seekToStep(step);
     (window as unknown as Record<string, unknown>).__simscope_maxStep = () => get(maxStep);
+    (window as unknown as Record<string, unknown>).__simscope_previewStep = (
+      nextStep: number,
+      progress: number,
+    ) => {
+      if (get(currentStep) + 1 !== nextStep || nextStep > get(maxStep)) return;
+      const nextSnapshot = computeNextSnapshot(nextStep);
+      agentActions.set(getCommandsAtStep(nextStep));
+      animatedEntities.set(
+        interpolateEntities(
+          get(entities),
+          nextSnapshot,
+          Math.max(0, Math.min(progress, 1)),
+        ),
+      );
+    };
+    (window as unknown as Record<string, unknown>).__simscope_setAgentDisplayMode = (
+      mode: "circle" | "emoji",
+    ) => agentDisplayMode.set(mode);
+
+    return () => {
+      if (timer) clearInterval(timer);
+      stopComparePlayback();
+      stopSinglePlayback();
+    };
+  });
+
+  $effect(() => {
+    if ($mode !== "file") stopSinglePlayback();
   });
 
   const TIMELINE_WIDTH = 300;
@@ -59,27 +412,159 @@
 </script>
 
 <div class="app" data-loaded={dataLoaded ? "true" : undefined}>
-  <SimMap />
-
-  {#if !screenshotMode}
-    <!-- Sliding timeline panel -->
-    <div
-      class="timeline-drawer"
-      class:open={timelineOpen}
-    >
-      <TimelinePanel />
+  {#if showingPaneGrid}
+    <div class="compare-app">
+      <div class="compare-grid" style="--cols:{paneSources.length > 2 ? 2 : paneSources.length}">
+        {#each paneSources as src, i}
+          <section class="compare-cell">
+            <div class="compare-label">Simulation {i + 1}</div>
+            <iframe
+              title="Simulation {i + 1}"
+              src={src}
+              bind:this={paneFrames[i]}
+            ></iframe>
+          </section>
+        {/each}
+      </div>
+      <div class="compare-controls">
+        <button class="compare-btn add" onclick={addPane}>＋</button>
+        <button class="compare-btn" onclick={() => seekCompare(Math.max(0, compareStep - 1))} disabled={compareStep <= 0}>⏮</button>
+        <button class="compare-btn play" onclick={toggleComparePlayback} disabled={compareMaxStep <= 0}>{comparePlaying ? "⏸" : "▶"}</button>
+        <button class="compare-btn" onclick={() => seekCompare(Math.min(compareMaxStep, compareStep + 1))} disabled={compareStep >= compareMaxStep}>⏭</button>
+        <button
+          class="compare-btn loop"
+          class:active={compareLoopMode}
+          onclick={() => {
+            compareLoopMode = !compareLoopMode;
+            if (!compareLoopMode) stopComparePlayback();
+          }}
+          title={compareLoopMode ? "ループ再生オフ" : "ループ再生オン"}
+        >
+          🔁
+        </button>
+        <button
+          class="compare-btn display"
+          class:active={compareAgentDisplayMode === "emoji"}
+          onclick={toggleCompareAgentDisplayMode}
+          title={compareAgentDisplayMode === "emoji" ? "絵文字モード（クリックで切替）" : "Circleモード（クリックで切替）"}
+        >
+          {compareAgentDisplayMode === "emoji" ? "🚒" : "⬤"}
+        </button>
+        <span class="compare-step">{compareStep} / {compareMaxStep}</span>
+        <input
+          type="range"
+          min="0"
+          max={compareMaxStep}
+          value={compareStep}
+          oninput={(e) => seekCompare(Number((e.target as HTMLInputElement).value))}
+          disabled={compareMaxStep <= 0}
+        />
+        <div class="compare-speeds">
+          {#each COMPARE_SPEEDS as speed}
+            <button
+              class="compare-btn speed"
+              class:active={compareSpeed === speed}
+              onclick={() => setCompareSpeed(speed)}
+            >
+              {speed}x
+            </button>
+          {/each}
+        </div>
+        {#if compareLoopCountdown !== null}
+          <span class="loop-countdown">{compareLoopCountdown}s</span>
+        {/if}
+      </div>
     </div>
+  {:else if compareUrls.length > 1 && !embedMode && !paneMode}
+    <div class="compare-app">
+      <div class="compare-grid" style="--cols:{compareUrls.length > 2 ? 2 : compareUrls.length}">
+        {#each compareUrls as url, i}
+          <section class="compare-cell">
+            <div class="compare-label" title={url}>{i + 1}. {url}</div>
+            <iframe
+              title="Simulation {i + 1}"
+              src={compareSrc(url)}
+              bind:this={compareFrames[i]}
+            ></iframe>
+          </section>
+        {/each}
+      </div>
+      <div class="compare-controls">
+        <button class="compare-btn" onclick={() => seekCompare(Math.max(0, compareStep - 1))} disabled={compareStep <= 0}>⏮</button>
+        <button class="compare-btn play" onclick={toggleComparePlayback} disabled={compareMaxStep <= 0}>{comparePlaying ? "⏸" : "▶"}</button>
+        <button class="compare-btn" onclick={() => seekCompare(Math.min(compareMaxStep, compareStep + 1))} disabled={compareStep >= compareMaxStep}>⏭</button>
+        <button
+          class="compare-btn loop"
+          class:active={compareLoopMode}
+          onclick={() => {
+            compareLoopMode = !compareLoopMode;
+            if (!compareLoopMode) stopComparePlayback();
+          }}
+          title={compareLoopMode ? "ループ再生オフ" : "ループ再生オン"}
+        >
+          🔁
+        </button>
+        <button
+          class="compare-btn display"
+          class:active={compareAgentDisplayMode === "emoji"}
+          onclick={toggleCompareAgentDisplayMode}
+          title={compareAgentDisplayMode === "emoji" ? "絵文字モード（クリックで切替）" : "Circleモード（クリックで切替）"}
+        >
+          {compareAgentDisplayMode === "emoji" ? "🚒" : "⬤"}
+        </button>
+        <span class="compare-step">{compareStep} / {compareMaxStep}</span>
+        <input
+          type="range"
+          min="0"
+          max={compareMaxStep}
+          value={compareStep}
+          oninput={(e) => seekCompare(Number((e.target as HTMLInputElement).value))}
+          disabled={compareMaxStep <= 0}
+        />
+        <div class="compare-speeds">
+          {#each COMPARE_SPEEDS as speed}
+            <button
+              class="compare-btn speed"
+              class:active={compareSpeed === speed}
+              onclick={() => setCompareSpeed(speed)}
+            >
+              {speed}x
+            </button>
+          {/each}
+        </div>
+        {#if compareLoopCountdown !== null}
+          <span class="loop-countdown">{compareLoopCountdown}s</span>
+        {/if}
+      </div>
+    </div>
+  {:else}
+    <SimMap />
+
+  {#if !screenshotMode && !embedMode}
+    {#if !paneMode}
+      <button class="pane-add-btn" onclick={enterPaneMode} title="Add simulation pane">＋</button>
+    {/if}
+
+    {#if !paneMode}
+      <!-- Sliding timeline panel -->
+      <div
+        class="timeline-drawer"
+        class:open={timelineOpen}
+      >
+        <TimelinePanel />
+      </div>
 
-    <!-- Toggle tab -->
-    <button
-      class="timeline-toggle"
-      class:open={timelineOpen}
-      style="left:{timelineOpen ? TIMELINE_WIDTH : 0}px"
-      onclick={() => (timelineOpen = !timelineOpen)}
-      title={timelineOpen ? "Close timeline" : "Open timeline"}
-    >
-      {timelineOpen ? "◂" : "▸"}
-    </button>
+      <!-- Toggle tab -->
+      <button
+        class="timeline-toggle"
+        class:open={timelineOpen}
+        style="left:{timelineOpen ? TIMELINE_WIDTH : 0}px"
+        onclick={() => (timelineOpen = !timelineOpen)}
+        title={timelineOpen ? "Close timeline" : "Open timeline"}
+      >
+        {timelineOpen ? "◂" : "▸"}
+      </button>
+    {/if}
 
     <div class="left-col" style="left:{leftOffset + PANEL_GAP}px">
       <ControlPanel />
@@ -133,6 +618,55 @@
       </div>
     </div>
   {/if}
+  {#if !screenshotMode && !embedMode && !paneMode && $mode === "file" && $maxStep > 0}
+    <div class="compare-controls single-controls">
+      <button class="compare-btn" onclick={() => seekSingle($currentStep - 1)} disabled={$currentStep <= 0}>⏮</button>
+      <button class="compare-btn play" onclick={toggleSinglePlayback}>{singlePlaying ? "⏸" : "▶"}</button>
+      <button class="compare-btn" onclick={() => seekSingle($currentStep + 1)} disabled={$currentStep >= $maxStep}>⏭</button>
+      <button
+        class="compare-btn loop"
+        class:active={singleLoopMode}
+        onclick={() => {
+          singleLoopMode = !singleLoopMode;
+          if (!singleLoopMode) stopSinglePlayback();
+        }}
+        title={singleLoopMode ? "ループ再生オフ" : "ループ再生オン"}
+      >
+        🔁
+      </button>
+      <button
+        class="compare-btn display"
+        class:active={$agentDisplayMode === "emoji"}
+        onclick={() => agentDisplayMode.update((v) => (v === "emoji" ? "circle" : "emoji"))}
+        title={$agentDisplayMode === "emoji" ? "絵文字モード（クリックで切替）" : "Circleモード（クリックで切替）"}
+      >
+        {$agentDisplayMode === "emoji" ? "🚒" : "⬤"}
+      </button>
+      <span class="compare-step">{$currentStep} / {$maxStep}</span>
+      <input
+        type="range"
+        min="0"
+        max={$maxStep}
+        value={$currentStep}
+        oninput={(e) => seekSingle(Number((e.target as HTMLInputElement).value))}
+      />
+      <div class="compare-speeds">
+        {#each COMPARE_SPEEDS as speed}
+          <button
+            class="compare-btn speed"
+            class:active={singleSpeed === speed}
+            onclick={() => setSingleSpeed(speed)}
+          >
+            {speed}x
+          </button>
+        {/each}
+      </div>
+      {#if singleLoopCountdown !== null}
+        <span class="loop-countdown">{singleLoopCountdown}s</span>
+      {/if}
+    </div>
+  {/if}
+  {/if}
 </div>
 
 <style>
@@ -142,6 +676,179 @@
     background: #0d1117;
   }
 
+  .compare-app {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background: #0d1117;
+  }
+
+  .compare-grid {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+    gap: 1px;
+    background: rgba(0, 200, 255, 0.16);
+  }
+
+  .compare-cell {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    background: #0d1117;
+  }
+
+  .compare-cell iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+  }
+
+  .compare-label {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 3;
+    max-width: calc(100% - 16px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: rgba(13, 20, 30, 0.78);
+    border: 1px solid rgba(0, 200, 255, 0.22);
+    color: #a8c8d8;
+    font-size: 11px;
+    font-family: monospace;
+    pointer-events: none;
+  }
+
+  .compare-controls {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: rgba(13, 20, 30, 0.98);
+    border-top: 1px solid rgba(0, 200, 255, 0.2);
+    color: #c8d8e8;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .compare-controls input[type="range"] {
+    flex: 1;
+    min-width: 160px;
+  }
+
+  .compare-btn {
+    border: 1px solid rgba(0, 200, 255, 0.3);
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    color: #a8c8d8;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+    flex: 0 0 auto;
+  }
+
+  .compare-btn:hover:not(:disabled) {
+    background: rgba(0, 180, 255, 0.15);
+    color: #00c8ff;
+  }
+
+  .compare-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .compare-btn.play {
+    min-width: 40px;
+    color: #00c8ff;
+    background: rgba(0, 180, 255, 0.12);
+  }
+
+  .compare-btn.add {
+    color: #00c8ff;
+    border-color: rgba(0, 200, 255, 0.55);
+    background: rgba(0, 180, 255, 0.14);
+    font-size: 15px;
+    line-height: 1;
+  }
+
+  .compare-btn.speed {
+    font-size: 10px;
+    padding: 4px 6px;
+  }
+
+  .compare-btn.speed.active {
+    color: #00c8ff;
+    border-color: rgba(0, 200, 255, 0.7);
+    background: rgba(0, 200, 255, 0.08);
+  }
+
+  .compare-btn.loop.active,
+  .compare-btn.display.active {
+    color: #00c8ff;
+    border-color: rgba(0, 200, 255, 0.65);
+    background: rgba(0, 200, 255, 0.1);
+  }
+
+  .compare-step {
+    min-width: 92px;
+    flex: 0 0 auto;
+    color: #a8c8d8;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .compare-speeds {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+  }
+
+  .single-controls {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 24;
+  }
+
+  .single-controls .loop-countdown {
+    min-width: 38px;
+    color: #607080;
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pane-add-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 30;
+    width: 34px;
+    height: 34px;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 200, 255, 0.45);
+    background: rgba(13, 20, 30, 0.86);
+    color: #00c8ff;
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 1;
+    box-shadow: 0 0 18px rgba(0, 180, 255, 0.18);
+  }
+
+  .pane-add-btn:hover {
+    background: rgba(0, 180, 255, 0.2);
+    border-color: rgba(0, 220, 255, 0.7);
+  }
+
   .timeline-drawer {
     position: absolute;
     top: 0;

From 7b8678678bb71f5d58155c2c59ee7e972686918b Mon Sep 17 00:00:00 2001
From: shima004 <yellow030408@gmail.com>
Date: Fri, 29 May 2026 22:56:36 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E3=83=91=E3=83=A9=E3=83=A1?=
 =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8F=E3=83=91?=
 =?UTF-8?q?=E3=83=8D=E3=83=AB=E3=82=BD=E3=83=BC=E3=82=B9=E3=81=AE=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92=E6=94=B9?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 89868c9..4a4087e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -346,8 +346,12 @@
     paneMode = params.has("pane");
     compareUrls = params.getAll("compare").filter(Boolean);
     const panes = Math.max(0, parseInt(params.get("panes") ?? "0", 10));
-    if (panes > 1 && !embedMode && !paneMode) {
-      paneSources = Array.from({ length: panes }, emptyPaneSrc);
+    if (!embedMode && !paneMode) {
+      if (compareUrls.length === 0 && panes > 0) {
+        paneSources = [currentPaneSrc(), ...Array.from({ length: panes - 1 }, emptyPaneSrc)];
+      } else if (compareUrls.length === 0) {
+        paneSources = [currentPaneSrc()];
+      }
     }
 
     const timer =

From e652e5124240b31ffcd0c6f0ea59acf5d710e5e4 Mon Sep 17 00:00:00 2001
From: shima004 <yellow030408@gmail.com>
Date: Sat, 30 May 2026 18:13:00 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E3=82=AB=E3=83=A1=E3=83=A9?=
 =?UTF-8?q?=E5=90=8C=E6=9C=9F=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E3=81=97=E3=80=81=E8=A4=87=E6=95=B0=E3=83=95=E3=83=AC=E3=83=BC?=
 =?UTF-8?q?=E3=83=A0=E9=96=93=E3=81=A7=E3=81=AE=E3=82=AB=E3=83=A1=E3=83=A9?=
 =?UTF-8?q?=E7=8A=B6=E6=85=8B=E3=81=AE=E5=90=8C=E6=9C=9F=E3=82=92=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/SimMap.svelte | 91 ++++++++++++++++++++++++++++++--
 src/routes/+page.svelte          | 77 +++++++++++++++++++++++++++
 2 files changed, 164 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/SimMap.svelte b/src/lib/components/SimMap.svelte
index 4f6cee0..474374e 100644
--- a/src/lib/components/SimMap.svelte
+++ b/src/lib/components/SimMap.svelte
@@ -46,6 +46,11 @@
   let canvas: HTMLCanvasElement;
   let deck: Deck<OrthographicView> | null = null;
 
+  type SimCamera = {
+    target: [number, number, number];
+    zoom: number;
+  };
+
   // ── Color helpers ─────────────────────────────────────────────────────────
 
   // Base color per facility type (used when not on fire)
@@ -668,22 +673,84 @@
       minZoom: zoom - 5,
       maxZoom: zoom + 10,
     };
+    currentTarget = target;
+    currentZoom = zoom;
     deck.setProps({ initialViewState: viewState });
   }
 
   // ── Follow mode ───────────────────────────────────────────────────────────
 
   let currentZoom = 0;
+  let currentTarget: [number, number, number] = [0, 0, 0];
   let fitZoom = 0;
+  let suppressCameraBroadcast = false;
+  let suppressCameraTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  function cameraFromViewState(viewState: OrthographicViewState): SimCamera | null {
+    const target = viewState.target;
+    const zoom = viewState.zoom;
+    if (!Array.isArray(target) || target.length < 2 || typeof zoom !== "number") return null;
+    return {
+      target: [
+        Number(target[0]),
+        Number(target[1]),
+        Number(target[2] ?? 0),
+      ] as [number, number, number],
+      zoom,
+    };
+  }
+
+  function applyCamera(camera: SimCamera, remote = false) {
+    if (!deck) return;
+    if (remote) {
+      suppressCameraBroadcast = true;
+      if (suppressCameraTimeoutId !== null) clearTimeout(suppressCameraTimeoutId);
+      suppressCameraTimeoutId = setTimeout(() => {
+        suppressCameraBroadcast = false;
+        suppressCameraTimeoutId = null;
+      }, 50);
+    }
+    currentTarget = camera.target;
+    currentZoom = camera.zoom;
+    deck.setProps({
+      initialViewState: {
+        target: camera.target,
+        zoom: camera.zoom,
+        minZoom: fitZoom - 5,
+        maxZoom: fitZoom + 10,
+      },
+    });
+  }
+
+  function broadcastCamera(camera: SimCamera) {
+    const parentApi = window.parent as
+      | (Window & {
+          __simscope_syncCameraFromChild?: (
+            camera: SimCamera,
+            sourceWindow: Window,
+          ) => void;
+        })
+      | undefined;
+
+    if (parentApi?.__simscope_syncCameraFromChild && window.parent !== window) {
+      parentApi.__simscope_syncCameraFromChild(camera, window);
+    } else {
+      window.parent.postMessage(
+        { type: "simscope:camera", camera },
+        window.location.origin,
+      );
+    }
+  }
 
   function followAgent(emap: Map<number, SimEntity>, selId: number | null) {
     if (!$followMode || selId === null || !deck) return;
     const e = emap.get(selId);
     if (!e || !isAgent(e.urn)) return;
     const h = e as HumanEntity;
+    currentTarget = [h.x, h.y, 0] as [number, number, number];
     deck.setProps({
       initialViewState: {
-        target: [h.x, h.y, 0] as [number, number, number],
+        target: currentTarget,
         zoom: currentZoom,
         minZoom: currentZoom - 5,
         maxZoom: currentZoom + 10,
@@ -787,9 +854,11 @@
   const unsubFocus = focusPoint.subscribe((pt) => {
     if (!pt || !deck) return;
     const closeZoom = Math.max(currentZoom, fitZoom + 5);
+    currentTarget = [pt.x, pt.y, 0] as [number, number, number];
+    currentZoom = closeZoom;
     deck.setProps({
       initialViewState: {
-        target: [pt.x, pt.y, 0] as [number, number, number],
+        target: currentTarget,
         zoom: closeZoom,
         minZoom: fitZoom - 5,
         maxZoom: fitZoom + 10,
@@ -819,13 +888,27 @@
         }
       },
       onViewStateChange: ({ viewState }) => {
-        const z = (viewState as OrthographicViewState).zoom;
-        if (typeof z === "number") currentZoom = z;
+        const camera = cameraFromViewState(viewState as OrthographicViewState);
+        if (!camera) return;
+        currentTarget = camera.target;
+        currentZoom = camera.zoom;
+        if (!suppressCameraBroadcast) broadcastCamera(camera);
       },
     });
+
+    (window as unknown as Record<string, unknown>).__simscope_getCamera = () => ({
+      target: currentTarget,
+      zoom: currentZoom,
+    });
+    (window as unknown as Record<string, unknown>).__simscope_setCamera = (
+      camera: SimCamera,
+    ) => applyCamera(camera, true);
   });
 
   onDestroy(() => {
+    if (suppressCameraTimeoutId !== null) clearTimeout(suppressCameraTimeoutId);
+    delete (window as unknown as Record<string, unknown>).__simscope_getCamera;
+    delete (window as unknown as Record<string, unknown>).__simscope_setCamera;
     unsubStatic();
     unsubAgents();
     unsubFit();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4a4087e..b7ce4b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -32,6 +32,11 @@
   import { onMount } from "svelte";
   import { get } from "svelte/store";
 
+  type SimCamera = {
+    target: [number, number, number];
+    zoom: number;
+  };
+
   function fmtBytes(b: number): string {
     if (b >= 1024 * 1024 * 1024) return `${(b / (1024 * 1024 * 1024)).toFixed(1)} GB`;
     if (b >= 1024 * 1024) return `${(b / (1024 * 1024)).toFixed(1)} MB`;
@@ -99,6 +104,8 @@
           __simscope_maxStep?: () => number;
           __simscope_previewStep?: (nextStep: number, progress: number) => void;
           __simscope_setAgentDisplayMode?: (mode: "circle" | "emoji") => void;
+          __simscope_getCamera?: () => SimCamera | null;
+          __simscope_setCamera?: (camera: SimCamera) => void;
         })
       | undefined;
   }
@@ -125,6 +132,7 @@
   let compareLoopTimeoutId: ReturnType<typeof setTimeout> | null = null;
   let compareLoopIntervalId: ReturnType<typeof setInterval> | null = null;
   let compareAgentDisplayMode = $state<"circle" | "emoji">("circle");
+  let compareCameraSync = $state(true);
 
   function setCompareAgentDisplayMode(mode: "circle" | "emoji") {
     compareAgentDisplayMode = mode;
@@ -133,6 +141,39 @@
     }
   }
 
+  function syncCameraToFrame(targetFrame: HTMLIFrameElement) {
+    if (!compareCameraSync) return;
+    const sourceFrame = activeFrames().find((frame) => frame !== targetFrame);
+    const camera = sourceFrame ? getFrameApi(sourceFrame)?.__simscope_getCamera?.() : null;
+    if (camera) getFrameApi(targetFrame)?.__simscope_setCamera?.(camera);
+  }
+
+  function syncCameraToAllFrames() {
+    const frames = activeFrames();
+    const sourceFrame = frames.find((frame) => getFrameApi(frame)?.__simscope_getCamera?.());
+    const camera = sourceFrame ? getFrameApi(sourceFrame)?.__simscope_getCamera?.() : null;
+    if (!camera) return;
+    for (const frame of frames) {
+      if (frame !== sourceFrame) getFrameApi(frame)?.__simscope_setCamera?.(camera);
+    }
+  }
+
+  function toggleCompareCameraSync() {
+    compareCameraSync = !compareCameraSync;
+    if (compareCameraSync) requestAnimationFrame(syncCameraToAllFrames);
+  }
+
+  function syncCameraFromWindow(sourceWindow: Window | null, camera: SimCamera) {
+    if (!compareCameraSync) return;
+    const sourceFrame = activeFrames().find(
+      (frame) => frame.contentWindow === sourceWindow,
+    );
+    if (!sourceFrame) return;
+    for (const frame of activeFrames()) {
+      if (frame !== sourceFrame) getFrameApi(frame)?.__simscope_setCamera?.(camera);
+    }
+  }
+
   function toggleCompareAgentDisplayMode() {
     setCompareAgentDisplayMode(compareAgentDisplayMode === "emoji" ? "circle" : "emoji");
   }
@@ -357,6 +398,16 @@
     const timer =
       !embedMode && !paneMode ? setInterval(updateCompareMaxStep, 500) : null;
 
+    function handleMessage(event: MessageEvent) {
+      if (event.origin !== window.location.origin) return;
+      if (embedMode || paneMode) return;
+      const data = event.data as { type?: string; camera?: SimCamera };
+      if (data?.type !== "simscope:camera" || !data.camera) return;
+      syncCameraFromWindow(event.source as Window | null, data.camera);
+    }
+
+    window.addEventListener("message", handleMessage);
+
     const autoUrl = params.get("autoload");
     const autoStep = params.get("step");
     void (async () => {
@@ -398,9 +449,17 @@
     (window as unknown as Record<string, unknown>).__simscope_setAgentDisplayMode = (
       mode: "circle" | "emoji",
     ) => agentDisplayMode.set(mode);
+    (
+      window as unknown as Record<string, unknown>
+    ).__simscope_syncCameraFromChild = (camera: SimCamera, sourceWindow: Window) =>
+      syncCameraFromWindow(sourceWindow, camera);
 
     return () => {
       if (timer) clearInterval(timer);
+      window.removeEventListener("message", handleMessage);
+      delete (
+        window as unknown as Record<string, unknown>
+      ).__simscope_syncCameraFromChild;
       stopComparePlayback();
       stopSinglePlayback();
     };
@@ -426,6 +485,7 @@
               title="Simulation {i + 1}"
               src={src}
               bind:this={paneFrames[i]}
+              onload={() => paneFrames[i] && syncCameraToFrame(paneFrames[i])}
             ></iframe>
           </section>
         {/each}
@@ -454,6 +514,14 @@
         >
           {compareAgentDisplayMode === "emoji" ? "🚒" : "⬤"}
         </button>
+        <button
+          class="compare-btn camera-sync"
+          class:active={compareCameraSync}
+          onclick={toggleCompareCameraSync}
+          title={compareCameraSync ? "カメラ同期オン" : "カメラ同期オフ"}
+        >
+          {compareCameraSync ? "🔗" : "⛓"}
+        </button>
         <span class="compare-step">{compareStep} / {compareMaxStep}</span>
         <input
           type="range"
@@ -489,6 +557,7 @@
               title="Simulation {i + 1}"
               src={compareSrc(url)}
               bind:this={compareFrames[i]}
+              onload={() => compareFrames[i] && syncCameraToFrame(compareFrames[i])}
             ></iframe>
           </section>
         {/each}
@@ -516,6 +585,14 @@
         >
           {compareAgentDisplayMode === "emoji" ? "🚒" : "⬤"}
         </button>
+        <button
+          class="compare-btn camera-sync"
+          class:active={compareCameraSync}
+          onclick={toggleCompareCameraSync}
+          title={compareCameraSync ? "カメラ同期オン" : "カメラ同期オフ"}
+        >
+          {compareCameraSync ? "🔗" : "⛓"}
+        </button>
         <span class="compare-step">{compareStep} / {compareMaxStep}</span>
         <input
           type="range"

From f85c74f5806febc8a0f7f325b98bc0d1fe80aea5 Mon Sep 17 00:00:00 2001
From: shima004 <yellow030408@gmail.com>
Date: Sun, 31 May 2026 20:43:31 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E8=A4=87=E6=95=B0=E3=83=91?=
 =?UTF-8?q?=E3=83=8D=E3=83=AB=E3=81=AE=E8=A1=A8=E7=A4=BA=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E3=82=92=E6=94=B9=E5=96=84=E3=81=97=E3=80=81=E3=83=91=E3=83=8D?=
 =?UTF-8?q?=E3=83=AB=E3=82=BD=E3=83=BC=E3=82=B9=E3=81=8C1=E3=81=A4?=
 =?UTF-8?q?=E4=BB=A5=E4=B8=8A=E3=81=AE=E5=A0=B4=E5=90=88=E3=81=AB=E3=81=AE?=
 =?UTF-8?q?=E3=81=BF=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b7ce4b1..bf566c9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -111,7 +111,7 @@
   }
 
   function activeFrames() {
-    return paneSources.length > 0 ? paneFrames : compareFrames;
+    return paneSources.length > 1 ? paneFrames : compareFrames;
   }
 
   function seekCompare(step: number) {
@@ -364,7 +364,7 @@
 
   let paneSources = $state<string[]>([]);
   let paneFrames = $state<HTMLIFrameElement[]>([]);
-  const showingPaneGrid = $derived(paneSources.length > 0 && !embedMode && !paneMode);
+  const showingPaneGrid = $derived(paneSources.length > 1 && !embedMode && !paneMode);
 
   function enterPaneMode() {
     paneSources = [currentPaneSrc(), emptyPaneSrc()];
@@ -388,10 +388,8 @@
     compareUrls = params.getAll("compare").filter(Boolean);
     const panes = Math.max(0, parseInt(params.get("panes") ?? "0", 10));
     if (!embedMode && !paneMode) {
-      if (compareUrls.length === 0 && panes > 0) {
+      if (compareUrls.length === 0 && panes > 1) {
         paneSources = [currentPaneSrc(), ...Array.from({ length: panes - 1 }, emptyPaneSrc)];
-      } else if (compareUrls.length === 0) {
-        paneSources = [currentPaneSrc()];
       }
     }
 
@@ -701,6 +699,7 @@
   {/if}
   {#if !screenshotMode && !embedMode && !paneMode && $mode === "file" && $maxStep > 0}
     <div class="compare-controls single-controls">
+      <button class="compare-btn add" onclick={enterPaneMode} title="Add simulation pane">＋</button>
       <button class="compare-btn" onclick={() => seekSingle($currentStep - 1)} disabled={$currentStep <= 0}>⏮</button>
       <button class="compare-btn play" onclick={toggleSinglePlayback}>{singlePlaying ? "⏸" : "▶"}</button>
       <button class="compare-btn" onclick={() => seekSingle($currentStep + 1)} disabled={$currentStep >= $maxStep}>⏭</button>