@chocodrop/mcp 0.1.0-alpha.0

package/runtime/site/public/xr/xr-ui.css

@@ -0,0 +1,338 @@
+:root {
+  color-scheme: dark;
+  font-family: "Inter", "SF Pro Display", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --panel-bg: rgba(15, 23, 42, 0.72);
+  --panel-border: rgba(148, 163, 184, 0.3);
+  --pill-bg: rgba(37, 99, 235, 0.2);
+  --pill-border: rgba(37, 99, 235, 0.4);
+  --gradient-start: #38bdf8;
+  --gradient-end: #6366f1;
+  --success: #4ade80;
+  --error: #f87171;
+  --pending: #facc15;
+  --warn: #f97316;
+  --text-muted: #94a3b8;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15), transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.12), transparent 50%),
+              #020817;
+  color: #e2e8f0;
+  overflow: hidden;
+}
+
+canvas {
+  width: 100vw;
+  height: 100vh;
+  display: block;
+}
+
+[data-overlay] {
+  position: fixed;
+  inset: clamp(1rem, 2vw, 2rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+.panel {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: linear-gradient(135deg,
+    rgba(15, 23, 42, 0.85) 0%,
+    rgba(30, 41, 59, 0.75) 100%);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  border: 1px solid var(--panel-border);
+  border-radius: 999px;
+  padding: 0.75rem 1.25rem;
+  color: #e2e8f0;
+  pointer-events: auto;
+  flex-wrap: wrap;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
+              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+  animation: panel-fade 320ms ease;
+  transition: all 0.3s ease;
+}
+
+.panel:hover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
+              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+  transform: translateY(-2px);
+}
+
+@keyframes panel-fade {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.pill {
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.35rem 0.75rem;
+  border-radius: 999px;
+  background: linear-gradient(135deg,
+    rgba(56, 189, 248, 0.9) 0%,
+    rgba(59, 130, 246, 0.7) 100%);
+  border: 1px solid rgba(56, 189, 248, 0.6);
+  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
+}
+
+[data-status][data-state="ok"] { color: var(--success); }
+[data-status][data-state="error"] { color: var(--error); }
+[data-status][data-state="pending"] { color: var(--pending); }
+[data-latency][data-state="warn"] { color: var(--warn); }
+
+button {
+  pointer-events: auto;
+  padding: 0.65rem 1.5rem;
+  border-radius: 999px;
+  border: 1px solid rgba(168, 85, 247, 0.5);
+  font-weight: 600;
+  background: linear-gradient(135deg,
+    rgba(139, 92, 246, 0.85) 0%,
+    rgba(168, 85, 247, 0.7) 100%);
+  color: #f8fafc;
+  cursor: pointer;
+  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+
+button:disabled {
+  background: rgba(30, 41, 59, 0.92);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  box-shadow: none;
+  border-color: rgba(148, 163, 184, 0.2);
+}
+
+button:not(:disabled):hover {
+  filter: brightness(1.15);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+}
+
+button:not(:disabled):active {
+  transform: scale(0.97) translateY(0);
+}
+
+.panel .button-group {
+  display: inline-flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.panel .button-group button {
+  background: linear-gradient(135deg,
+    rgba(139, 92, 246, 0.85) 0%,
+    rgba(168, 85, 247, 0.7) 100%);
+  padding: 0.5rem 1.1rem;
+}
+
+@media (max-width: 640px) {
+  [data-overlay] {
+    inset: 1rem;
+  }
+
+  .panel {
+    border-radius: 24px;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.remote-panel {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.6rem;
+}
+
+.remote-panel .remote-headline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+[data-remote-audit] {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.15);
+  border: 1px solid rgba(59, 130, 246, 0.35);
+}
+
+.remote-input {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.remote-input input {
+  flex: 1;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  padding: 0.55rem 1rem;
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.remote-input input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
+}
+
+.remote-input button {
+  border-radius: 999px;
+  padding: 0.55rem 1.2rem;
+}
+
+[data-remote-status] {
+  font-size: 0.85rem;
+  color: #cbd5f5;
+  transition: color 0.2s ease;
+}
+
+[data-remote-status][data-state="pending"] { color: #facc15; }
+[data-remote-status][data-state="ok"] { color: #4ade80; }
+[data-remote-status][data-state="error"] { color: #fb7185; }
+
+[data-remote-detail] {
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+[data-remote-actions] {
+  display: flex;
+  gap: 0.5rem;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+[data-remote-actions][data-active="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+[data-remote-actions] button {
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  padding: 0.4rem 0.9rem;
+}
+
+.remote-dock {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  width: clamp(260px, 28vw, 420px);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  background: linear-gradient(135deg,
+    rgba(15, 23, 42, 0.95) 0%,
+    rgba(30, 41, 59, 0.9) 100%);
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 1.25rem;
+  padding: 1rem;
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
+              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+  transition: all 0.3s ease;
+}
+
+.remote-dock:hover {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
+              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+}
+
+.remote-dock header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+}
+
+[data-remote-pulse] {
+  font-size: 0.8rem;
+  color: #cbd5f5;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.4);
+}
+
+[data-remote-pulse][data-state="proxy"] {
+  border-color: rgba(249, 115, 22, 0.6);
+  color: #fb923c;
+}
+
+.remote-stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  background: rgba(2, 6, 23, 0.9);
+}
+
+.remote-stage::before {
+  content: 'XR対応サイトをここでプレビュー';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 1rem;
+  transition: opacity 0.2s ease;
+}
+
+.remote-stage[data-state="loaded"]::before,
+.remote-stage[data-state="pending"]::before {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.remote-stage iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #000;
+}
+
+[data-remote-container] [data-remotescenecontainer] {
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+@media (max-width: 960px) {
+  .remote-dock {
+    position: static;
+    width: auto;
+    margin: 1rem;
+  }
+}

package/runtime/site/public/xr-viewer.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <title>ChocoDrop XR GLB Viewer</title>
+  <style>
+    :root { color-scheme: dark; }
+    body {
+      margin: 0;
+      font-family: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
+      background: #01060f;
+      color: #e2e8f0;
+      overflow: hidden;
+    }
+    #ui {
+      position: fixed;
+      top: 12px;
+      left: 12px;
+      right: 12px;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+      align-items: center;
+      background: rgba(15, 23, 42, 0.72);
+      border: 1px solid rgba(148, 163, 184, 0.25);
+      border-radius: 12px;
+      padding: 10px 12px;
+      backdrop-filter: blur(10px);
+      z-index: 10;
+    }
+    #right-controls { display: flex; gap: 8px; align-items: center; }
+    input[type="file"], input[type="url"] {
+      width: 100%;
+      padding: 8px 10px;
+      border-radius: 10px;
+      border: 1px solid rgba(148, 163, 184, 0.4);
+      background: rgba(15, 23, 42, 0.7);
+      color: #e2e8f0;
+    }
+    button {
+      border-radius: 10px;
+      border: 1px solid rgba(56, 189, 248, 0.8);
+      background: linear-gradient(120deg, rgba(56, 189, 248, 0.85), rgba(56, 189, 248, 0.45));
+      color: #0f172a;
+      font-weight: 600;
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+    #drop-hint {
+      position: fixed;
+      inset: 0;
+      display: none;
+      place-items: center;
+      background: rgba(14, 165, 233, 0.16);
+      border: 2px dashed rgba(56, 189, 248, 0.9);
+      color: #e0f2fe;
+      font-size: 1.2rem;
+      z-index: 9;
+    }
+    #drop-hint[data-active="true"] { display: grid; }
+    #status { font-size: 0.9rem; color: #cbd5e1; }
+    canvas { display: block; }
+  </style>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
+        "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="ui">
+    <div>
+      <input id="url-input" type="url" placeholder="GLB/GLTF の URL を貼り付け (同一オリジン推奨)" spellcheck="false" />
+      <div id="status">待機中</div>
+    </div>
+    <div id="right-controls">
+      <label style="display:inline-block">
+        <input id="file-input" type="file" accept=".glb,.gltf" style="max-width:180px" />
+      </label>
+      <button id="load-url">URL読込</button>
+      <button id="reset">リセット</button>
+    </div>
+  </div>
+  <div id="drop-hint">ここに GLB/GLTF をドロップ</div>
+  <canvas id="xr-canvas"></canvas>
+  <script type="module">
+    import * as THREE from 'three';
+    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+    import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+    import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+    import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+    import { ARButton } from 'three/examples/jsm/webxr/ARButton.js';
+
+    const canvas = document.querySelector('#xr-canvas');
+    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.xr.enabled = true;
+    document.body.appendChild(VRButton.createButton(renderer));
+    // ARはQuestブラウザがAR対応なら利用可
+    document.body.appendChild(ARButton.createButton(renderer, { requiredFeatures: [] }));
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x020617);
+
+    const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
+    camera.position.set(0, 1.6, 3);
+
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 1.2, 0);
+    controls.update();
+
+    // 環境
+    scene.add(new THREE.HemisphereLight(0xffffff, 0x1e293b, 1.0));
+    const dir = new THREE.DirectionalLight(0xffffff, 1.2);
+    dir.position.set(3, 5, 2);
+    dir.castShadow = true;
+    scene.add(dir);
+    const ground = new THREE.Mesh(
+      new THREE.CircleGeometry(6, 64),
+      new THREE.MeshStandardMaterial({ color: 0x0b1221, roughness: 0.9, metalness: 0.05 })
+    );
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+
+    const loader = new GLTFLoader();
+    const draco = new DRACOLoader();
+    draco.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/libs/draco/');
+    loader.setDRACOLoader(draco);
+
+    let current = null;
+
+    function setStatus(text, tone = 'info') {
+      const el = document.querySelector('#status');
+      el.textContent = text;
+      el.style.color = tone === 'error' ? '#f87171' : tone === 'warn' ? '#fbbf24' : '#cbd5e1';
+    }
+
+    function clearScene() {
+      if (current) {
+        scene.remove(current);
+        current.traverse?.(obj => {
+          if (obj.isMesh) {
+            obj.geometry?.dispose?.();
+            if (Array.isArray(obj.material)) {
+              obj.material.forEach(m => m?.dispose?.());
+            } else {
+              obj.material?.dispose?.();
+            }
+          }
+        });
+      }
+      current = null;
+    }
+
+    function centerModel(object) {
+      const box = new THREE.Box3().setFromObject(object);
+      const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
+      object.position.sub(center); // 原点に合わせる
+      const maxDim = Math.max(size.x, size.y, size.z);
+      const scale = maxDim > 4 ? 4 / maxDim : 1;
+      object.scale.multiplyScalar(scale);
+      controls.reset();
+      controls.target.set(0, size.y * 0.5, 0);
+      camera.position.set(0, size.y * 0.6 + 1.2, Math.max(3, maxDim * 1.2));
+      controls.update();
+    }
+
+    async function loadFromArrayBuffer(buffer, name = 'model') {
+      setStatus(`${name} を読み込み中…`);
+      try {
+        const glb = await loader.parseAsync(buffer, '');
+        clearScene();
+        current = glb.scene;
+        scene.add(current);
+        centerModel(current);
+        setStatus(`${name} を読み込みました`, 'info');
+      } catch (error) {
+        console.error(error);
+        setStatus(`読み込み失敗: ${error?.message || error}`, 'error');
+      }
+    }
+
+    async function loadFromURL(url) {
+      setStatus('URL 取得中…');
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const buffer = await response.arrayBuffer();
+        const name = url.split('/').pop() || 'model';
+        await loadFromArrayBuffer(buffer, name);
+      } catch (error) {
+        console.error(error);
+        setStatus(`URL 読み込み失敗: ${error?.message || error}`, 'error');
+      }
+    }
+
+    // UI
+    const fileInput = document.querySelector('#file-input');
+    const urlInput = document.querySelector('#url-input');
+    const loadUrlBtn = document.querySelector('#load-url');
+    const resetBtn = document.querySelector('#reset');
+    const dropHint = document.querySelector('#drop-hint');
+
+    fileInput.addEventListener('change', async e => {
+      const file = e.target.files?.[0];
+      e.target.value = '';
+      if (!file) return;
+      const buffer = await file.arrayBuffer();
+      loadFromArrayBuffer(buffer, file.name);
+    });
+
+    loadUrlBtn.addEventListener('click', () => {
+      const url = urlInput.value.trim();
+      if (!url) return setStatus('URL を入力してください', 'warn');
+      loadFromURL(url);
+    });
+
+    resetBtn.addEventListener('click', () => {
+      clearScene();
+      setStatus('待機中');
+    });
+
+    window.addEventListener('dragover', e => {
+      e.preventDefault();
+      dropHint.dataset.active = 'true';
+    });
+    window.addEventListener('dragleave', e => {
+      e.preventDefault();
+      dropHint.dataset.active = 'false';
+    });
+    window.addEventListener('drop', async e => {
+      e.preventDefault();
+      dropHint.dataset.active = 'false';
+      const file = e.dataTransfer?.files?.[0];
+      if (!file) return;
+      const buffer = await file.arrayBuffer();
+      loadFromArrayBuffer(buffer, file.name);
+    });
+
+    function onResize() {
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    }
+    window.addEventListener('resize', onResize);
+
+    renderer.setAnimationLoop(() => {
+      renderer.render(scene, camera);
+    });
+  </script>
+</body>
+</html>

package/runtime/site/src/client/local-bridge.js

@@ -0,0 +1,83 @@
+/** Connect a local Basic scene to the authenticated, same-origin MCP bridge. */
+export function connectLocalBridge(sceneManager, { statusElement } = {}) {
+  const setStatus = (message) => {
+    if (statusElement) statusElement.textContent = message;
+  };
+  if (location.hostname !== '127.0.0.1' || location.protocol !== 'http:') {
+    setStatus('ツール連携はローカル起動時のURLから利用してください');
+    return;
+  }
+  const tokenKey = 'chocodrop:local-token';
+  const token = new URLSearchParams(location.hash.slice(1)).get('token') || sessionStorage.getItem(tokenKey);
+  if (!token) {
+    setStatus('接続情報がありません。起動時に表示されたURLを開いてください');
+    return;
+  }
+  sessionStorage.setItem(tokenKey, token);
+  history.replaceState(null, '', location.pathname + location.search);
+  const socket = new WebSocket(`ws://${location.host}/local-api/live?token=${encodeURIComponent(token)}`);
+  const requests = new Map();
+  socket.addEventListener('open', () =>
+    setStatus('ツール連携中 · Codex・Claude Code・Antigravityなどから素材を配置できます')
+  );
+  socket.addEventListener('close', () => {
+    for (const request of requests.values()) request.cancelled = true;
+    setStatus('ツール連携が切れました · サーバーを確認して再読み込みしてください');
+  });
+  socket.addEventListener('error', () => setStatus('ツールへ接続できません。起動時のURLを開き直してください'));
+  socket.addEventListener('message', async ({ data }) => {
+    let message;
+    try { message = JSON.parse(data); } catch { return; }
+    if (message.type === 'import-cancel') {
+      const request = requests.get(message.requestId);
+      if (request) request.cancelled = true;
+      return;
+    }
+    if (message.type !== 'import' || typeof message.requestId !== 'string') return;
+    const reply = (value) => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ type: 'import-result', requestId: message.requestId, ...value }));
+      }
+    };
+    if (requests.size) {
+      reply({ ok: false, error: 'Another asset is still loading; retry after it completes' });
+      return;
+    }
+    const request = { cancelled: false };
+    requests.set(message.requestId, request);
+    setStatus(`読み込み中 · ${message.asset?.name || '素材'}`);
+    try {
+      const result = await importBridgeAsset(sceneManager, message, location.origin);
+      if (request.cancelled || socket.readyState !== WebSocket.OPEN) {
+        sceneManager.removeObject(result.objectId);
+        setStatus('読み込みを中断しました。接続を確認して再実行してください');
+        return;
+      }
+      setStatus(`配置完了 · ${message.asset.name} · シーン内 ${sceneManager.spawnedObjects.size} 個`);
+      reply({ ok: true, objectId: result.objectId });
+    } catch (error) {
+      setStatus(`配置できませんでした: ${error.message}`);
+      reply({ ok: false, error: error.message });
+    } finally {
+      requests.delete(message.requestId);
+    }
+  });
+  window.addEventListener('pagehide', () => socket.close(), { once: true });
+  return socket;
+}
+
+/** Import only URLs served by this local bridge; success means an object exists. */
+export async function importBridgeAsset(sceneManager, { asset, position }, origin) {
+  if (!asset || typeof asset.url !== 'string') throw new Error('Missing asset URL');
+  const url = new URL(asset.url, origin);
+  if (url.origin !== origin || !/^\/local-api\/assets\/[0-9a-f-]+$/i.test(url.pathname)) {
+    throw new Error('Asset URL must belong to the local bridge');
+  }
+  const method = { image: 'loadImageFile', video: 'loadVideoFile', model: 'load3DModel' }[asset.mediaType];
+  if (!method) throw new Error('Unsupported media type');
+  const result = await sceneManager[method](url.href, { fileName: asset.name, position });
+  if (!result?.success || !sceneManager.spawnedObjects.has(result.objectId)) {
+    throw new Error('The asset was not added to the scene');
+  }
+  return result;
+}