npm - @n2world/orchestrator - Versions diffs - 1.1.0 - Mend

@n2world/orchestrator 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/dist/agent-os-rd.d.ts +100 -0
package/dist/agent-os-rd.js +258 -0
package/dist/audit-store.d.ts +14 -0
package/dist/audit-store.js +107 -0
package/dist/beta-runner.d.ts +95 -0
package/dist/beta-runner.js +251 -0
package/dist/beta.d.ts +102 -0
package/dist/beta.js +180 -0
package/dist/browser-agent.d.ts +90 -0
package/dist/browser-agent.js +223 -0
package/dist/channel-gateway.d.ts +74 -0
package/dist/channel-gateway.js +270 -0
package/dist/channels.d.ts +120 -0
package/dist/channels.js +432 -0
package/dist/chat-store.d.ts +29 -0
package/dist/chat-store.js +120 -0
package/dist/cli.d.ts +2 -0
package/dist/cli.js +607 -0
package/dist/command-screen.d.ts +12 -0
package/dist/command-screen.js +44 -0
package/dist/commit-gate.d.ts +98 -0
package/dist/commit-gate.js +258 -0
package/dist/companion-api.d.ts +37 -0
package/dist/companion-api.js +101 -0
package/dist/conversation-graph.d.ts +39 -0
package/dist/conversation-graph.js +92 -0
package/dist/cost-estimator.d.ts +27 -0
package/dist/cost-estimator.js +42 -0
package/dist/cron-runner.d.ts +31 -0
package/dist/cron-runner.js +46 -0
package/dist/dashboard/chat.html +326 -0
package/dist/dashboard/dental.html +58 -0
package/dist/dashboard/freebie.png +0 -0
package/dist/dashboard/icon-192.png +0 -0
package/dist/dashboard/index.html +892 -0
package/dist/dashboard/manifest.json +15 -0
package/dist/dashboard/service-worker.js +28 -0
package/dist/dashboard-server.d.ts +37 -0
package/dist/dashboard-server.js +457 -0
package/dist/dental-intake-service.d.ts +37 -0
package/dist/dental-intake-service.js +61 -0
package/dist/dental-metrics.d.ts +25 -0
package/dist/dental-metrics.js +37 -0
package/dist/docking.d.ts +36 -0
package/dist/docking.js +73 -0
package/dist/finance-mcts-candidate.d.ts +37 -0
package/dist/finance-mcts-candidate.js +106 -0
package/dist/finance-regulation-kr.d.ts +33 -0
package/dist/finance-regulation-kr.js +104 -0
package/dist/finance-workflow.d.ts +135 -0
package/dist/finance-workflow.js +242 -0
package/dist/gateway.d.ts +18 -0
package/dist/gateway.js +123 -0
package/dist/governance.d.ts +39 -0
package/dist/governance.js +48 -0
package/dist/governed-executor.d.ts +31 -0
package/dist/governed-executor.js +63 -0
package/dist/governed-llm.d.ts +41 -0
package/dist/governed-llm.js +83 -0
package/dist/gpu-bridge.d.ts +16 -0
package/dist/gpu-bridge.js +53 -0
package/dist/health.d.ts +47 -0
package/dist/health.js +66 -0
package/dist/identity-link.d.ts +32 -0
package/dist/identity-link.js +98 -0
package/dist/index.d.ts +184 -0
package/dist/index.js +417 -0
package/dist/integrations/emr-adapter.d.ts +41 -0
package/dist/integrations/emr-adapter.js +63 -0
package/dist/kakao-oauth.d.ts +16 -0
package/dist/kakao-oauth.js +87 -0
package/dist/knowledge-graph.d.ts +53 -0
package/dist/knowledge-graph.js +156 -0
package/dist/llm.d.ts +65 -0
package/dist/llm.js +357 -0
package/dist/mcp-client-guard.d.ts +32 -0
package/dist/mcp-client-guard.js +179 -0
package/dist/mcp-macaroon.d.ts +75 -0
package/dist/mcp-macaroon.js +161 -0
package/dist/mcts-kernel-bridge.d.ts +36 -0
package/dist/mcts-kernel-bridge.js +99 -0
package/dist/mcts-prior.d.ts +79 -0
package/dist/mcts-prior.js +170 -0
package/dist/model-router.d.ts +51 -0
package/dist/model-router.js +75 -0
package/dist/multi-axis-lift.d.ts +43 -0
package/dist/multi-axis-lift.js +141 -0
package/dist/net-guard.d.ts +39 -0
package/dist/net-guard.js +141 -0
package/dist/onboarding.d.ts +38 -0
package/dist/onboarding.js +94 -0
package/dist/oracle-anchored-search.d.ts +25 -0
package/dist/oracle-anchored-search.js +50 -0
package/dist/oracle.d.ts +22 -0
package/dist/oracle.js +116 -0
package/dist/p6-governance.d.ts +150 -0
package/dist/p6-governance.js +252 -0
package/dist/pairing.d.ts +22 -0
package/dist/pairing.js +81 -0
package/dist/personalization.d.ts +35 -0
package/dist/personalization.js +73 -0
package/dist/pglite-hnsw-bridge.d.ts +118 -0
package/dist/pglite-hnsw-bridge.js +311 -0
package/dist/pglite-store.d.ts +59 -0
package/dist/pglite-store.js +180 -0
package/dist/playbook.d.ts +79 -0
package/dist/playbook.js +83 -0
package/dist/playbooks/dental-intake.d.ts +20 -0
package/dist/playbooks/dental-intake.js +112 -0
package/dist/predictive-agent.d.ts +157 -0
package/dist/predictive-agent.js +535 -0
package/dist/prompt-optimizer.d.ts +18 -0
package/dist/prompt-optimizer.js +104 -0
package/dist/rate-limiter.d.ts +25 -0
package/dist/rate-limiter.js +75 -0
package/dist/safety-anneal.d.ts +83 -0
package/dist/safety-anneal.js +153 -0
package/dist/sandbox-controller.d.ts +12 -0
package/dist/sandbox-controller.js +95 -0
package/dist/satisfaction-metrics.d.ts +26 -0
package/dist/satisfaction-metrics.js +61 -0
package/dist/sensor-bridge.d.ts +53 -0
package/dist/sensor-bridge.js +133 -0
package/dist/session-repair.d.ts +27 -0
package/dist/session-repair.js +66 -0
package/dist/slack-finance-intake.d.ts +42 -0
package/dist/slack-finance-intake.js +122 -0
package/dist/symbolic-dynamics.d.ts +113 -0
package/dist/symbolic-dynamics.js +420 -0
package/dist/telemetry.d.ts +19 -0
package/dist/telemetry.js +68 -0
package/dist/text-embedding.d.ts +6 -0
package/dist/text-embedding.js +42 -0
package/dist/tier-classifier.d.ts +20 -0
package/dist/tier-classifier.js +58 -0
package/dist/tier-guard.d.ts +36 -0
package/dist/tier-guard.js +56 -0
package/dist/tui.d.ts +9 -0
package/dist/tui.js +214 -0
package/dist/update-security.d.ts +31 -0
package/dist/update-security.js +112 -0
package/dist/v-calibration.d.ts +16 -0
package/dist/v-calibration.js +42 -0
package/dist/value-calibration.d.ts +41 -0
package/dist/value-calibration.js +133 -0
package/dist/value-head.d.ts +20 -0
package/dist/value-head.js +91 -0
package/dist/wal-buffer.d.ts +23 -0
package/dist/wal-buffer.js +144 -0
package/dist/wiki-synthesizer.d.ts +80 -0
package/dist/wiki-synthesizer.js +0 -0
package/dist/worker-agent.d.ts +10 -0
package/dist/worker-agent.js +19 -0
package/package.json +65 -0

package/dist/dashboard/index.html ADDED Viewed

@@ -0,0 +1,892 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#42a5f5">
+  <title>n2world Agent Dashboard</title>
+  <link rel="manifest" href="/manifest.json">
+  <!-- 탈-Google: Google Fonts CDN(fonts.googleapis.com/gstatic.com) 제거.
+       오프라인 PWA·프라이버시 보장을 위해 외부 폰트 요청을 하지 않는다.
+       브랜드 폰트(Outfit/Inter)를 쓰려면 .woff2 를 src/dashboard/fonts/ 에 넣고
+       아래 @font-face 주석을 활성화하라(셀프 호스팅). 미설치 시 시스템 폰트로 폴백. -->
+  <!--
+  <style>
+    @font-face { font-family:'Outfit'; src:url('/fonts/Outfit.woff2') format('woff2'); font-display:swap; }
+    @font-face { font-family:'Inter';  src:url('/fonts/Inter.woff2')  format('woff2'); font-display:swap; }
+  </style>
+  -->
+  <style>
+    :root {
+      --bg-color: #f4f7fa;
+      --card-bg: rgba(255, 255, 255, 0.85);
+      --text-main: #2b3a4a;
+      --text-muted: #6b7c90;
+      --pastel-blue: #e3f2fd;
+      --pastel-orange: #fff3e0;
+      --pastel-green: #e8f5e9;
+      --accent-blue: #42a5f5;
+      --accent-orange: #ffb74d;
+      --accent-green: #66bb6a;
+      --shadow: 0 12px 40px rgba(163, 177, 198, 0.25);
+      /* 셀프 호스팅 폰트가 있으면 자동 사용, 없으면 시스템 폰트로 우아하게 폴백 */
+      --font-outfit: 'Outfit', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
+      --font-inter: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      background-color: var(--bg-color);
+      font-family: var(--font-inter);
+      color: var(--text-main);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      overflow-x: hidden;
+      padding: 20px;
+    }
+    /* Mobile Screen Viewport Emulator */
+    .mobile-frame {
+      width: 100%;
+      max-width: 410px;
+      height: 820px;
+      background: var(--card-bg);
+      border-radius: 40px;
+      box-shadow: var(--shadow);
+      border: 8px solid #ffffff;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      transition: transform 0.3s ease;
+    }
+    .mobile-frame:hover {
+      transform: translateY(-5px);
+    }
+    /* Header Section */
+    .header {
+      padding: 25px 25px 15px 25px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgba(227, 242, 253, 0.6);
+    }
+    .brand {
+      font-family: var(--font-outfit);
+      font-size: 24px;
+      font-weight: 800;
+      color: var(--accent-blue);
+      letter-spacing: -0.5px;
+    }
+    .status-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: var(--pastel-green);
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--accent-green);
+      font-family: var(--font-outfit);
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: var(--accent-green);
+      border-radius: 50%;
+      animation: pulse 1.5s infinite;
+    }
+    /* Avatar Mascot Section */
+    .mascot-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 25px 0;
+      background: linear-gradient(180deg, rgba(227, 242, 253, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+    }
+    .avatar-wrapper {
+      width: 110px;
+      height: 110px;
+      background: #ffffff;
+      border-radius: 50%;
+      box-shadow: 0 8px 24px rgba(66, 165, 245, 0.15);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      border: 4px solid var(--pastel-blue);
+    }
+    .avatar-wrapper.idle img {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      object-fit: cover;
+      animation: float 3s ease-in-out infinite;
+    }
+    .avatar-wrapper.thinking img {
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      object-fit: cover;
+      animation: shake 0.5s ease-in-out infinite alternate;
+    }
+    @keyframes shake {
+      0% { transform: translate(1px, 1px) rotate(0deg); }
+      10% { transform: translate(-1px, -2px) rotate(-1deg); }
+      20% { transform: translate(-3px, 0px) rotate(1deg); }
+      30% { transform: translate(0px, 2px) rotate(0deg); }
+      40% { transform: translate(1px, -1px) rotate(1deg); }
+      50% { transform: translate(-1px, 2px) rotate(-1deg); }
+      60% { transform: translate(-3px, 1px) rotate(0deg); }
+      75% { transform: translate(2px, 1px) rotate(-2deg); }
+      90% { transform: translate(-1px, -1px) rotate(0deg); }
+      100% { transform: translate(1px, 2px) rotate(0deg); }
+    }
+    .mic-btn {
+      width: 48px;
+      height: 48px;
+      background: var(--pastel-blue);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 12px rgba(66, 165, 245, 0.1);
+    }
+    .mic-btn.recording {
+      background: #ffcdd2;
+      animation: mic-pulse 1s infinite alternate;
+    }
+    .mic-btn.recording svg {
+      fill: #d32f2f;
+    }
+    .mic-btn svg {
+      width: 20px;
+      height: 20px;
+      fill: var(--accent-blue);
+    }
+    @keyframes mic-pulse {
+      from { transform: scale(1); }
+      to { transform: scale(1.1); }
+    }
+    .mascot-name {
+      font-family: var(--font-outfit);
+      font-size: 20px;
+      font-weight: 700;
+      margin-top: 12px;
+      color: var(--text-main);
+    }
+    .mascot-sub {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 3px;
+    }
+    /* Progress Rings / Stats */
+    .stats-row {
+      display: flex;
+      justify-content: space-around;
+      padding: 0 20px 20px 20px;
+    }
+    .stat-card {
+      background: #ffffff;
+      border-radius: 20px;
+      padding: 15px;
+      width: 105px;
+      box-shadow: 0 4px 15px rgba(163, 177, 198, 0.1);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+    .stat-svg {
+      width: 60px;
+      height: 60px;
+      transform: rotate(-90deg);
+    }
+    .stat-svg circle {
+      fill: none;
+      stroke-width: 6;
+    }
+    .stat-svg .bg-circle {
+      stroke: var(--bg-color);
+    }
+    .stat-svg .val-circle {
+      stroke-linecap: round;
+      transition: stroke-dashoffset 1s ease-out;
+    }
+    .stat-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      margin-top: 10px;
+      text-align: center;
+    }
+    .stat-number {
+      position: absolute;
+      top: 32px;
+      font-family: var(--font-outfit);
+      font-size: 13px;
+      font-weight: 700;
+    }
+    /* Conversations / Thought Logs */
+    .thought-console {
+      flex: 1;
+      padding: 0 25px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    /* Thought bubbles */
+    .thought-bubble {
+      max-width: 85%;
+      padding: 14px 18px;
+      border-radius: 20px;
+      font-size: 14px;
+      line-height: 1.45;
+      animation: slideIn 0.3s ease;
+      box-shadow: 0 4px 12px rgba(163, 177, 198, 0.08);
+    }
+    .bubble-agent {
+      background: var(--pastel-blue);
+      color: var(--text-main);
+      align-self: flex-start;
+      border-bottom-left-radius: 4px;
+    }
+    .bubble-user {
+      background: var(--pastel-orange);
+      color: var(--text-main);
+      align-self: flex-end;
+      border-bottom-right-radius: 4px;
+    }
+    /* Control Footer */
+    .control-footer {
+      padding: 20px 25px 25px 25px;
+      background: #ffffff;
+      border-top: 1px solid rgba(227, 242, 253, 0.6);
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    .input-box {
+      flex: 1;
+      height: 48px;
+      background: var(--bg-color);
+      border: 1.5px solid transparent;
+      border-radius: 24px;
+      padding: 0 20px;
+      font-size: 14px;
+      font-family: var(--font-inter);
+      outline: none;
+      transition: all 0.2s ease;
+    }
+    .input-box:focus {
+      border-color: var(--accent-blue);
+      background: #ffffff;
+      box-shadow: 0 0 10px rgba(66, 165, 245, 0.1);
+    }
+    .action-btn {
+      width: 48px;
+      height: 48px;
+      background: var(--accent-blue);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 0.2s ease, background-color 0.2s ease;
+      box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
+    }
+    .action-btn:hover {
+      transform: scale(1.05);
+      background-color: #1e88e5;
+    }
+    .action-btn svg {
+      width: 20px;
+      height: 20px;
+      fill: #ffffff;
+    }
+    /* Safe Approval Popup Dialog */
+    .popup-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(43, 58, 74, 0.4);
+      backdrop-filter: blur(4px);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 100;
+      animation: fadeIn 0.2s ease;
+    }
+    .popup-card {
+      width: 85%;
+      background: #ffffff;
+      border-radius: 28px;
+      padding: 25px;
+      box-shadow: 0 20px 50px rgba(43, 58, 74, 0.15);
+      text-align: center;
+      animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .popup-title {
+      font-family: var(--font-outfit);
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-main);
+      margin-bottom: 10px;
+    }
+    .popup-desc {
+      font-size: 13px;
+      color: var(--text-muted);
+      line-height: 1.5;
+      margin-bottom: 20px;
+    }
+    .popup-btn-row {
+      display: flex;
+      gap: 12px;
+    }
+    .popup-btn {
+      flex: 1;
+      height: 44px;
+      border: none;
+      border-radius: 22px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      font-family: var(--font-inter);
+      transition: all 0.2s ease;
+    }
+    .btn-cancel {
+      background: var(--bg-color);
+      color: var(--text-muted);
+    }
+    .btn-cancel:hover {
+      background: #e2e8f0;
+    }
+    .btn-approve {
+      background: var(--accent-blue);
+      color: #ffffff;
+      box-shadow: 0 4px 10px rgba(66, 165, 245, 0.3);
+    }
+    .btn-approve:hover {
+      background-color: #1e88e5;
+    }
+    /* Animations */
+    @keyframes pulse {
+      0% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.25); opacity: 0.6; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes float {
+      0% { transform: translateY(0px); }
+      50% { transform: translateY(-8px); }
+      100% { transform: translateY(0px); }
+    }
+    @keyframes slideIn {
+      from { transform: translateY(15px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes scaleUp {
+      from { transform: scale(0.9); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Mobile Screen Emulator -->
+  <div class="mobile-frame">
+    <!-- Top Header -->
+    <div class="header">
+      <div class="brand">n2world</div>
+      <div class="status-badge">
+        <div class="status-dot"></div>
+        <span id="status-text">대기 중</span>
+      </div>
+    </div>
+    <!-- Avatar Robot Mascot -->
+    <div class="mascot-container">
+      <div class="avatar-wrapper idle" id="avatar-container">
+        <!-- Smiling Robot Image -->
+        <img src="freebie.png" alt="Mascot Character">
+      </div>
+      <div class="mascot-name">에이전트 에단 (Ethan)</div>
+      <div class="mascot-sub" id="mascot-sub-text">안녕하세요! 무엇을 도와드릴까요?</div>
+    </div>
+    <!-- Circular Stats Rings -->
+    <div class="stats-row">
+      <!-- Energy Saved Ring -->
+      <div class="stat-card">
+        <svg class="stat-svg">
+          <circle class="bg-circle" cx="30" cy="30" r="25" />
+          <circle class="val-circle" cx="30" cy="30" r="25" stroke="#66bb6a" stroke-dasharray="157" stroke-dashoffset="157" id="ring-energy" />
+        </svg>
+        <span class="stat-number" id="val-energy">0%</span>
+        <span class="stat-label">에너지 절약</span>
+      </div>
+      <!-- Tasks Done Ring -->
+      <div class="stat-card">
+        <svg class="stat-svg">
+          <circle class="bg-circle" cx="30" cy="30" r="25" />
+          <circle class="val-circle" cx="30" cy="30" r="25" stroke="#ffb74d" stroke-dasharray="157" stroke-dashoffset="157" id="ring-tasks" />
+        </svg>
+        <span class="stat-number" id="val-tasks">0</span>
+        <span class="stat-label">수행 미션</span>
+      </div>
+      <!-- Memory Free Ring -->
+      <div class="stat-card">
+        <svg class="stat-svg">
+          <circle class="bg-circle" cx="30" cy="30" r="25" />
+          <circle class="val-circle" cx="30" cy="30" r="25" stroke="#42a5f5" stroke-dasharray="157" stroke-dashoffset="157" id="ring-memory" />
+        </svg>
+        <span class="stat-number" id="val-memory">0.1M</span>
+        <span class="stat-label">대기 메모리</span>
+      </div>
+    </div>
+    <!-- Thought Conversation Logs -->
+    <div class="thought-console" id="console">
+      <div class="thought-bubble bubble-agent">
+        반가워요! 저는 n2world 에이전트 에단이에요. 🤖 모노레포 빌드, 자원 조율, 또는 샌드박스 컴파일 등 원하는 명령을 내려주시면 즉시 탐색할게요!
+      </div>
+    </div>
+    <!-- Footer Input Bar -->
+    <div class="control-footer">
+      <button class="mic-btn" id="btn-mic" title="음성 인식">
+        <svg viewBox="0 0 24 24">
+          <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" />
+        </svg>
+      </button>
+      <input type="text" class="input-box" placeholder="에이전트에게 명령하기..." id="input-task">
+      <button class="action-btn" id="btn-submit">
+        <svg viewBox="0 0 24 24">
+          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+        </svg>
+      </button>
+    </div>
+    <!-- Safe Approval Modal overlay -->
+    <div class="popup-overlay" id="approval-popup">
+      <div class="popup-card">
+        <div class="popup-title">잠깐! 승인이 필요해요 🖐️</div>
+        <div class="popup-desc" id="popup-desc-text">에이전트 에단이 "/workspace/build.ts" 파일을 수정하려고 승인을 요청했습니다. 안전합니까?</div>
+        <div class="popup-btn-row">
+          <button class="popup-btn btn-cancel" id="btn-popup-cancel">거절</button>
+          <button class="popup-btn btn-approve" id="btn-popup-approve">허가</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Register Service Worker for PWA
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js').catch(() => {});
+      });
+    }
+    const ringEnergy = document.getElementById('ring-energy');
+    const ringTasks = document.getElementById('ring-tasks');
+    const ringMemory = document.getElementById('ring-memory');
+    const valEnergy = document.getElementById('val-energy');
+    const valTasks = document.getElementById('val-tasks');
+    const valMemory = document.getElementById('val-memory');
+    const inputTask = document.getElementById('input-task');
+    const btnSubmit = document.getElementById('btn-submit');
+    const btnMic = document.getElementById('btn-mic');
+    const consoleDiv = document.getElementById('console');
+    const statusText = document.getElementById('status-text');
+    const mascotSubText = document.getElementById('mascot-sub-text');
+    const avatarContainer = document.getElementById('avatar-container');
+    const approvalPopup = document.getElementById('approval-popup');
+    const popupDescText = document.getElementById('popup-desc-text');
+    const btnPopupCancel = document.getElementById('btn-popup-cancel');
+    const btnPopupApprove = document.getElementById('btn-popup-approve');
+    let missionCount = 0;
+    let currentTask = '';
+    // Set SVG progress rings offset
+    function setProgress(circle, percent) {
+      const radius = circle.r.baseVal.value;
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (percent / 100) * circumference;
+      circle.style.strokeDashoffset = offset;
+    }
+    let isLocalDemoMode = !navigator.onLine;
+    function updateStatusToOfflineDemo() {
+      statusText.textContent = "오프라인 데모";
+      const badge = document.querySelector('.status-badge');
+      const dot = document.querySelector('.status-dot');
+      badge.style.background = '#eceff1';
+      badge.style.color = '#546e7a';
+      dot.style.background = '#546e7a';
+      mascotSubText.textContent = "오프라인 데모 모드로 작동 중입니다. 🤖";
+    }
+    function updateStatusToOnline() {
+      statusText.textContent = "대기 중";
+      const badge = document.querySelector('.status-badge');
+      const dot = document.querySelector('.status-dot');
+      badge.style.background = 'var(--pastel-green)';
+      badge.style.color = 'var(--accent-green)';
+      dot.style.background = 'var(--accent-green)';
+      mascotSubText.textContent = "안녕하세요! 무엇을 도와드릴까요?";
+    }
+    let fallbackInterval = null;
+    function startLocalTelemetrySimulation() {
+      if (fallbackInterval) return;
+      fallbackInterval = setInterval(() => {
+        const mockEnergy = (99.8 + (Math.random() * 0.1 - 0.05)).toFixed(1);
+        const mockMemory = (0.1 + (Math.random() * 0.05)).toFixed(3) + 'MB';
+        setProgress(ringEnergy, parseFloat(mockEnergy));
+        valEnergy.textContent = mockEnergy + '%';
+        const memVal = parseFloat(mockMemory);
+        const memPercent = Math.min(100, (memVal / 0.15) * 100);
+        setProgress(ringMemory, memPercent);
+        valMemory.textContent = mockMemory;
+      }, 1000);
+    }
+    function stopLocalTelemetrySimulation() {
+      if (fallbackInterval) {
+        clearInterval(fallbackInterval);
+        fallbackInterval = null;
+      }
+    }
+    // Dynamic Telemetry SSE Binding with fallback
+    let eventSource = null;
+    function connectTelemetry() {
+      if (eventSource) {
+        eventSource.close();
+      }
+      if (!navigator.onLine) {
+        isLocalDemoMode = true;
+        updateStatusToOfflineDemo();
+        startLocalTelemetrySimulation();
+        return;
+      }
+      eventSource = new EventSource('/api/telemetry');
+      eventSource.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          setProgress(ringEnergy, parseFloat(data.energy));
+          valEnergy.textContent = data.energy + '%';
+          const memVal = parseFloat(data.memory);
+          const memPercent = Math.min(100, (memVal / 0.15) * 100);
+          setProgress(ringMemory, memPercent);
+          valMemory.textContent = data.memory;
+          if (statusText.textContent === "오프라인 데모") {
+            isLocalDemoMode = false;
+            updateStatusToOnline();
+            stopLocalTelemetrySimulation();
+          }
+        } catch (err) {}
+      };
+      eventSource.onerror = () => {
+        isLocalDemoMode = true;
+        updateStatusToOfflineDemo();
+        startLocalTelemetrySimulation();
+      };
+    }
+    // Connect initially
+    connectTelemetry();
+    window.addEventListener('online', () => {
+      isLocalDemoMode = false;
+      updateStatusToOnline();
+      stopLocalTelemetrySimulation();
+      connectTelemetry();
+    });
+    window.addEventListener('offline', () => {
+      isLocalDemoMode = true;
+      updateStatusToOfflineDemo();
+      startLocalTelemetrySimulation();
+      if (eventSource) {
+        eventSource.close();
+      }
+    });
+    // Native Web Speech Recognition (STT)
+    // ⚠️ 제공자 종속 고지: 일부 브라우저(Chrome의 webkitSpeechRecognition)는
+    //    음성 오디오를 Google 음성 서버로 전송해 인식한다. 제공자 중립/오프라인이
+    //    필요하면 온디바이스 STT 또는 자체 STT 엔드포인트로 교체할 것.
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      const recognition = new SpeechRecognition();
+      recognition.lang = 'ko-KR';
+      recognition.interimResults = false;
+      recognition.onstart = () => {
+        btnMic.classList.add('recording');
+      };
+      recognition.onend = () => {
+        btnMic.classList.remove('recording');
+      };
+      recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        inputTask.value = transcript;
+      };
+      // F2: 명시적 동의 게이팅 — Web Speech(webkit)는 음성을 Google 서버로 전송할 수 있다.
+      // 첫 사용 시 사용자에게 고지·동의를 받고, 동의를 1회 저장한다(거부 시 마이크 미작동).
+      btnMic.addEventListener('click', () => {
+        let consent = false;
+        try { consent = localStorage.getItem('n2w_stt_consent') === 'yes'; } catch (e) {}
+        if (!consent) {
+          const ok = window.confirm(
+            '음성 인식 안내: 이 브라우저의 음성 인식(Web Speech)은 마이크 오디오를 ' +
+            '인식을 위해 외부 서버(예: Google)로 전송할 수 있습니다.\n\n동의하고 계속할까요?\n' +
+            '(거부 시 텍스트 입력을 사용하세요.)'
+          );
+          if (!ok) return;
+          try { localStorage.setItem('n2w_stt_consent', 'yes'); } catch (e) {}
+        }
+        recognition.start();
+      });
+    } else {
+      btnMic.style.display = 'none';
+    }
+    // Click submit
+    btnSubmit.addEventListener('click', handleTaskSubmit);
+    inputTask.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') handleTaskSubmit();
+    });
+    function handleTaskSubmit() {
+      const task = inputTask.value.trim();
+      if (!task) return;
+      // Append user bubble
+      appendBubble(task, 'user');
+      inputTask.value = '';
+      // Transition mascot status & animation to running
+      avatarContainer.className = 'avatar-wrapper thinking';
+      statusText.textContent = isLocalDemoMode ? "데모 실행 중" : "실행 중";
+      document.querySelector('.status-badge').style.background = 'var(--pastel-orange)';
+      document.querySelector('.status-badge').style.color = 'var(--accent-orange)';
+      document.querySelector('.status-dot').style.background = 'var(--accent-orange)';
+      mascotSubText.textContent = isLocalDemoMode ? "오프라인 시뮬레이션 명령을 처리하는 중... ⚙️" : "명령을 수행하는 중입니다... ⚙️";
+      if (isLocalDemoMode) {
+        setTimeout(() => {
+          let output = '';
+          const normalizedCmd = task.trim();
+          if (normalizedCmd.includes('파일') || normalizedCmd.includes('목록') || normalizedCmd.includes('dir') || normalizedCmd.includes('ls')) {
+            output = `[오프라인 데모 실행 결과]\nVolume in drive C has no label.\nDirectory of C:\\Users\\suhop\\ebook\\N2World\\packages\\orchestrator\\sandbox\n\n2026-06-14  11:00    <DIR>          .\n2026-06-14  11:00    <DIR>          ..\n2026-06-14  11:00               444  package.json\n2026-06-14  11:00                40  .env\n2026-06-14  11:00             1,024  EthanMascot.png\n\n* 실제 서버 연결이 감지되지 않아 오프라인 시뮬레이션 목록이 출력되었습니다.`;
+          } else {
+            output = `[오프라인 데모]\n입력하신 명령어 "${task}"를 시뮬레이션 샌드박스 내부에서 안전하게 모의 실행 완료했습니다.\n\n* 팁: 실제 노트북/서버의 와이파이 네트워크가 연결되면 노트북의 격리 터미널을 통해 실시간 자연어 명령어 처리가 활성화됩니다.`;
+          }
+          missionCount++;
+          setProgress(ringTasks, Math.min(100, missionCount * 20));
+          valTasks.textContent = missionCount.toString();
+          appendOutputBubble(`명령 실행 완료! 🎉\n\n${output}`, 'success');
+          if (navigator.vibrate) {
+            navigator.vibrate(50);
+          }
+          avatarContainer.className = 'avatar-wrapper idle';
+          updateStatusToOfflineDemo();
+        }, 1200);
+        return;
+      }
+      fetch('/api/run', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ command: task })
+      })
+      .then(res => res.json())
+      .then(data => {
+        if (data.error) {
+          appendBubble(`명령 실행 실패: ${data.error} 🚫`, 'agent');
+        } else {
+          let output = '';
+          if (data.stdout && data.stdout.trim()) {
+            output += `[출력]\n${data.stdout.trim()}`;
+          }
+          if (data.stderr && data.stderr.trim()) {
+            if (output) output += '\n';
+            output += `[에러]\n${data.stderr.trim()}`;
+          }
+          if (!output) {
+            output = '명령이 출력 없이 완료되었습니다.';
+          }
+          // Consolidated Single Reply Bubble
+          if (data.success) {
+            missionCount++;
+            setProgress(ringTasks, Math.min(100, missionCount * 20));
+            valTasks.textContent = missionCount.toString();
+            appendOutputBubble(`명령 실행 완료! 🎉\n\n${output}`, 'success');
+            if (navigator.vibrate) {
+              navigator.vibrate(50); // subtle success haptic
+            }
+          } else {
+            appendOutputBubble(`명령 실행 실패! ⚠️\n\n${output}`, 'error');
+            if (navigator.vibrate) {
+              navigator.vibrate([100, 50, 100]); // warning haptic
+            }
+          }
+        }
+        // Restore status & animation
+        avatarContainer.className = 'avatar-wrapper idle';
+        updateStatusToOnline();
+      })
+      .catch(err => {
+        isLocalDemoMode = true;
+        updateStatusToOfflineDemo();
+        startLocalTelemetrySimulation();
+        appendBubble(`네트워크 오류로 인해 오프라인 데모 모드로 전환되었습니다. 🚫`, 'agent');
+        setTimeout(() => {
+          let output = `[오프라인 데모]\n입력하신 명령어 "${task}"를 모의 실행 완료했습니다.\n\n* 실제 서버 연결 실패: ${err.message}`;
+          missionCount++;
+          setProgress(ringTasks, Math.min(100, missionCount * 20));
+          valTasks.textContent = missionCount.toString();
+          appendOutputBubble(`명령 실행 완료! 🎉\n\n${output}`, 'success');
+          if (navigator.vibrate) {
+            navigator.vibrate(50);
+          }
+          avatarContainer.className = 'avatar-wrapper idle';
+        }, 1200);
+      });
+    }
+    function appendBubble(text, sender) {
+      const bubble = document.createElement('div');
+      bubble.className = `thought-bubble bubble-${sender}`;
+      bubble.textContent = text;
+      consoleDiv.appendChild(bubble);
+      // Scroll to bottom
+      consoleDiv.scrollTop = consoleDiv.scrollHeight;
+    }
+    function appendOutputBubble(text, type) {
+      const bubble = document.createElement('div');
+      bubble.className = `thought-bubble bubble-agent output-bubble ${type}`;
+      bubble.style.whiteSpace = 'pre-wrap';
+      bubble.style.fontFamily = 'monospace';
+      bubble.style.fontSize = '0.85rem';
+      bubble.style.backgroundColor = type === 'success' ? '#f1f8e9' : '#ffebee';
+      bubble.style.borderLeft = type === 'success' ? '4px solid #8bc34a' : '4px solid #e57373';
+      bubble.style.color = '#333';
+      bubble.style.padding = '10px';
+      bubble.style.borderRadius = '8px';
+      bubble.style.marginTop = '8px';
+      bubble.style.marginBottom = '8px';
+      bubble.textContent = text;
+      consoleDiv.appendChild(bubble);
+      consoleDiv.scrollTop = consoleDiv.scrollHeight;
+    }
+  </script>
+</body>
+</html>