npm - cli-jaw - Versions diffs - 1.4.11 → 1.5.0 - Mend

cli-jaw 1.4.11 → 1.5.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 (559) hide show

package/public/dist/dist/index.html ADDED Viewed

@@ -0,0 +1,708 @@
+<!DOCTYPE html>
+<html lang="ko" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="theme-color" content="#22d3ee">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="manifest" href="/dist/assets/manifest-Bw-LRm-c.json">
+    <link rel="apple-touch-icon" href="/dist/assets/icon-192-CwXPIYF5.png">
+    <title>CLI-JAW</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <!-- Vite handles module bundling in dev (HMR) and production (build) -->
+  <script type="module" crossorigin src="/dist/assets/index-CQHqXjrK.js"></script>
+  <link rel="stylesheet" crossorigin href="/dist/assets/vendor-render-Bjnw0wQ6.css">
+  <link rel="stylesheet" crossorigin href="/dist/assets/index-1Gg-6jeC.css">
+</head>
+<body>
+    <!-- Left Sidebar -->
+    <nav class="sidebar-left" role="navigation" aria-label="Main navigation">
+        <button class="sidebar-toggle" id="toggleLeft" title="Collapse" aria-label="Collapse sidebar">◀</button>
+        <div class="logo">CLI-JAW</div>
+        <span id="orcStateBadge" class="orc-state-badge" style="display:none"></span>
+        <div>
+            <div class="section-title" data-i18n="sidebar.status">상태</div>
+            <span class="status-badge status-idle" id="statusBadge">idle</span>
+        </div>
+        <div>
+            <div class="section-title" data-i18n="sidebar.memory">메모리</div>
+            <button class="sidebar-hb-btn" id="memorySidebarBtn" aria-label="Open memory panel">🧠 Memory (0)</button>
+        </div>
+        <div>
+            <div class="section-title" data-i18n="sidebar.stats">통계</div>
+            <p class="stat" id="statMsgs">Messages: 0</p>
+        </div>
+        <!-- CLI Status (moved from Settings tab) -->
+        <div>
+            <div class="section-title" data-i18n="sidebar.cliStatus">CLI 상태</div>
+            <div id="cliStatusList" class="mt-1">
+                <div class="text-status">Loading...</div>
+            </div>
+            <div class="flex gap-2 mt-2 items-center">
+                <button class="btn-clear btn-refresh"
+                    data-action="refreshCli">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 2v6h-6" />
+                        <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+                        <path d="M3 22v-6h6" />
+                        <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+                    </svg>
+                    Refresh</button>
+                <select id="cliStatusInterval"
+                    class="select-sm select-status-interval">
+                    <option value="60" data-i18n="time.1m">1분</option>
+                    <option value="300" selected data-i18n="time.5m">5분</option>
+                    <option value="600" data-i18n="time.10m">10분</option>
+                    <option value="0" data-i18n="time.manual">수동</option>
+                </select>
+            </div>
+        </div>
+        <div class="sidebar-bottom">
+            <div class="section-title" data-i18n="sidebar.agentName">에이전트 이름</div>
+            <div class="flex gap-1 items-center">
+                <input type="text" id="appNameInput" value="CLI-JAW"
+                    class="input-agent-name">
+                <button class="sidebar-hb-btn btn-action-sm w-auto" id="appNameSave">✓</button>
+            </div>
+            <button class="sidebar-hb-btn" id="btnClearChat">/clear</button>
+            <button class="sidebar-hb-btn" id="hbSidebarBtn">💓 Heartbeat (0)</button>
+            <button class="sidebar-hb-btn" data-action="openTemplates">📝 프롬프트 템플릿</button>
+            <button class="sidebar-hb-btn" id="langToggle" title="한국어 ⇄ English">🌐 한국어</button>
+        </div>
+    </nav>
+    <!-- Chat Area -->
+    <div class="chat-area">
+        <div class="drag-overlay" id="dragOverlay" data-i18n="drag.drop">📎 파일을 여기에 드랍하세요</div>
+        <div class="chat-header">
+            <span>CLI-JAW ● <span id="headerCli">claude</span></span>
+            <button class="theme-switch" id="toggleTheme" title="Toggle Theme" aria-label="Toggle dark/light mode">
+                <span class="theme-switch-knob"></span>
+            </button>
+        </div>
+        <div class="pabc-roadmap" id="pabcRoadmap">
+            <div class="shark-runner" id="sharkRunner"></div>
+            <div class="pabc-dot future" data-phase="P" id="dot-P">P</div>
+            <div class="pabc-connector" id="pabc-conn-0"></div>
+            <div class="pabc-dot future" data-phase="A" id="dot-A">A</div>
+            <div class="pabc-connector" id="pabc-conn-1"></div>
+            <div class="pabc-center">
+                <div class="pabc-brand" id="pabcBrand">PABCD</div>
+                <div class="pabc-tagline">Ultimate Agent Workflow</div>
+            </div>
+            <div class="pabc-connector" id="pabc-conn-2"></div>
+            <div class="pabc-dot future" data-phase="B" id="dot-B">B</div>
+            <div class="pabc-connector" id="pabc-conn-3"></div>
+            <div class="pabc-dot future" data-phase="C" id="dot-C">C</div>
+        </div>
+        <div class="chat-messages" id="chatMessages"></div>
+        <div class="empty-state" id="emptyState">
+            <div class="empty-icon">CLI-JAW</div>
+            <div class="empty-title">CLI-JAW</div>
+            <div class="empty-subtitle">메시지를 입력하세요</div>
+        </div>
+        <div class="typing-indicator" id="typingIndicator">
+            <span class="label" data-i18n="status.responding">응답 중</span>
+            <span class="typing-dot"></span>
+            <span class="typing-dot"></span>
+            <span class="typing-dot"></span>
+        </div>
+        <div class="file-preview" id="filePreview">
+            <div class="file-preview-header">
+                <span class="file-preview-title">📎 Files</span>
+                <button class="file-preview-clear" id="filePreviewClear">✕ Clear all</button>
+            </div>
+            <div class="file-preview-list" id="filePreviewList"></div>
+        </div>
+        <div class="chat-input-area">
+            <div id="cmdDropdown" class="cmd-dropdown" role="listbox" data-i18n-aria="aria.cmdList" aria-label="커맨드 목록"
+                style="display:none"></div>
+            <button class="btn-attach" data-i18n-title="btn.attach" title="파일 첨부">📎</button>
+            <input type="file" id="fileInput" hidden multiple>
+            <button class="btn-voice" id="btnVoice" data-i18n-title="voice.start" title="음성 녹음">🎤</button>
+            <span class="voice-timer" id="voiceTimer" style="display:none">00:00</span>
+            <button class="btn-voice-cancel" id="btnVoiceCancel" style="display:none" title="취소">✕</button>
+            <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
+                placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
+                aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
+            <button class="btn-send" id="btnSend" aria-label="Send message">➤</button>
+        </div>
+    </div>
+    <!-- Right Sidebar (Tabbed) -->
+    <aside class="sidebar-right" role="complementary" aria-label="Settings panel">
+        <button class="sidebar-toggle" id="toggleRight" title="Collapse" aria-label="Collapse settings">▶</button>
+        <div class="tab-bar" role="tablist">
+            <button class="tab-btn active" id="tabBtnAgents" role="tab" aria-selected="true" aria-controls="tabAgents" data-i18n="tab.agents">에이전트</button>
+            <button class="tab-btn" id="tabBtnSkills" role="tab" aria-selected="false" aria-controls="tabSkills" data-i18n="tab.skills">스킬</button>
+            <button class="tab-btn" id="tabBtnSettings" role="tab" aria-selected="false" aria-controls="tabSettings" data-i18n="tab.settings">설정</button>
+        </div>
+        <div class="sidebar-save-bar">
+            <button class="btn-save" data-i18n="btn.saveSettings">저장</button>
+        </div>
+        <!-- Agents Tab -->
+        <div id="tabAgents" class="tab-content active" role="tabpanel" aria-labelledby="tabBtnAgents">
+            <div>
+                <label data-i18n="label.activeCli">활성 CLI</label>
+                <select id="selCli">
+                    <option value="claude">Claude</option>
+                    <option value="codex">Codex</option>
+                    <option value="gemini">Gemini</option>
+                    <option value="opencode">OpenCode</option>
+                    <option value="copilot">Copilot</option>
+                </select>
+            </div>
+            <div>
+                <label data-i18n="label.model">모델</label>
+                <select id="selModel"></select>
+            </div>
+            <div>
+                <label data-i18n="label.effort">추론 강도</label>
+                <select id="selEffort">
+                    <option value="">— none</option>
+                    <option value="low">🟢 low</option>
+                    <option value="medium" selected>🟡 medium</option>
+                    <option value="high">🔴 high</option>
+                </select>
+            </div>
+            <div>
+                <label data-i18n="label.permissions">권한</label>
+                <div class="perm-toggle">
+                    <span class="perm-btn active perm-auto" >⚡ Auto</span>
+                </div>
+            </div>
+            <div>
+                <label data-i18n="label.workingDir">작업 디렉토리</label>
+                <span id="inpCwd" class="cwd-display">~/.cli-jaw</span>
+            </div>
+            <hr class="hr-divider">
+            <div class="flex justify-between items-center">
+                <div class="section-title" data-i18n="sidebar.employees">직원</div>
+                <button class="btn-clear btn-action-sm" data-action="addEmployee"
+                    data-i18n="btn.addEmployee">+ 추가</button>
+            </div>
+            <div id="employeesList">
+                <div class="text-status" data-i18n="emp.empty">직원이 없습니다</div>
+            </div>
+        </div>
+        <!-- Skills Tab -->
+        <div id="tabSkills" class="tab-content" role="tabpanel" aria-labelledby="tabBtnSkills">
+            <div class="flex gap-2 flex-wrap">
+                <button class="skill-filter active" data-filter="all" data-i18n="skill.filter.all">전체</button>
+                <button class="skill-filter" data-filter="installed" data-i18n="skill.filter.installed">📦 설치됨</button>
+                <button class="skill-filter" data-filter="productivity" data-i18n="skill.filter.productivity">📝
+                    생산성</button>
+                <button class="skill-filter" data-filter="communication" data-i18n="skill.filter.communication">📧
+                    커뮤</button>
+                <button class="skill-filter" data-filter="devtools" data-i18n="skill.filter.devtools">🔧 개발</button>
+                <button class="skill-filter" data-filter="ai-media" data-i18n="skill.filter.ai">🤖 AI</button>
+                <button class="skill-filter" data-filter="utility" data-i18n="skill.filter.utility">🌐 유틸</button>
+                <button class="skill-filter" data-filter="smarthome" data-i18n="skill.filter.smarthome">🏠 홈</button>
+                <button class="skill-filter" data-filter="other" data-i18n="skill.filter.other">📂 기타</button>
+            </div>
+            <div class="text-xs text-dim" id="skillsCount" data-i18n="loading">로딩 중...</div>
+            <div id="skillsList"></div>
+        </div>
+        <!-- Settings Tab -->
+        <div id="tabSettings" class="tab-content" role="tabpanel" aria-labelledby="tabBtnSettings">
+            <button class="btn-clear btn-action-block"  data-action="openPrompt"
+                data-i18n="btn.editPrompt">✏️
+                시스템 프롬프트 편집</button>
+            <!-- Active Channel Toggle -->
+            <div class="settings-group">
+                <h4>📡 Active Channel</h4>
+                <div class="settings-row">
+                    <label>Runtime</label>
+                    <div>
+                        <button id="chTelegram" class="perm-btn active">TG</button>
+                        <button id="chDiscord" class="perm-btn">DC</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Telegram Bot -->
+            <div id="channelTelegramSettings" class="settings-group">
+                <h4>📬 Telegram</h4>
+                <div class="settings-row">
+                    <label data-i18n="label.enabled">활성화</label>
+                    <div>
+                        <button id="tgOff" class="perm-btn active" data-i18n="btn.off">끔</button>
+                        <button id="tgOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+                <div class="settings-row sub-row">
+                    <label data-i18n="label.botToken">봇 토큰</label>
+                    <input type="password" id="tgToken" placeholder="123456:ABC-DEF..." class="input-sm">
+                </div>
+                <div class="settings-row sub-row">
+                    <label data-i18n="label.chatIds">허용 채팅 ID</label>
+                    <input type="text" id="tgChatIds" data-i18n-placeholder="tg.chatIds.placeholder"
+                        placeholder="콤마 구분 (비워두면 전체 허용)" class="input-sm">
+                </div>
+                <div class="settings-row sub-row">
+                    <label data-i18n="label.forwardAll">자동 전송</label>
+                    <div>
+                        <button id="tgForwardOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                        <button id="tgForwardOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Discord Bot -->
+            <div id="channelDiscordSettings" class="settings-group" style="display:none">
+                <h4>🎮 Discord</h4>
+                <div class="settings-row">
+                    <label data-i18n="label.enabled">활성화</label>
+                    <div>
+                        <button id="dcOff" class="perm-btn active" data-i18n="btn.off">끔</button>
+                        <button id="dcOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Bot Token</label>
+                    <input type="password" id="dcToken" placeholder="Discord bot token..." class="input-sm">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Guild ID</label>
+                    <input type="text" id="dcGuildId" placeholder="Guild (server) ID" class="input-sm">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Channel IDs</label>
+                    <input type="text" id="dcChannelIds" placeholder="콤마 구분 (비워두면 전체 허용)" class="input-sm">
+                </div>
+                <div class="settings-row sub-row">
+                    <label data-i18n="label.forwardAll">자동 전송</label>
+                    <div>
+                        <button id="dcForwardOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                        <button id="dcForwardOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Allow Bots</label>
+                    <div>
+                        <button id="dcAllowBotsOff" class="perm-btn active" data-i18n="btn.off">끔</button>
+                        <button id="dcAllowBotsOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Per-CLI Models -->
+            <div class="settings-group">
+                <h4>🟣 Claude</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelClaude"></select>
+                    <input type="text" id="customModelClaude" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Effort</label>
+                    <select id="effortClaude">
+                        <option value="low">🟢 low</option>
+                        <option value="medium" selected>🟡 medium</option>
+                        <option value="high">🔴 high</option>
+                    </select>
+                </div>
+                <div class="settings-row sub-row">
+                    <label>🧠 1M Context</label>
+                    <div>
+                        <button id="claude1mOff" class="perm-btn active">Off</button>
+                        <button id="claude1mOn" class="perm-btn">On</button>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-group">
+                <h4>🟢 Codex</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelCodex"></select>
+                    <input type="text" id="customModelCodex" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Effort</label>
+                    <select id="effortCodex">
+                        <option value="low">🟢 low</option>
+                        <option value="medium" selected>🟡 medium</option>
+                        <option value="high">🟠 high</option>
+                        <option value="xhigh">🔴 xhigh</option>
+                    </select>
+                </div>
+                <div class="settings-row sub-row">
+                    <label>⚡ Fast Mode</label>
+                    <div>
+                        <button id="codexFastOff" class="perm-btn active" data-i18n="btn.off">끔</button>
+                        <button id="codexFastOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+                <div class="settings-row sub-row">
+                    <label>🧠 1M Context</label>
+                    <div>
+                        <button id="codexCtxOff" class="perm-btn active">Off</button>
+                        <button id="codexCtxOn" class="perm-btn">On</button>
+                    </div>
+                </div>
+                <div id="codexCtxValues" style="display:none">
+                    <div class="settings-row sub-row ml-6" >
+                        <label class="label-wide">Context Window</label>
+                        <input type="number" id="codexCtxWindow" value="1000000" min="272000" max="1050000" step="1000"
+                            class="input-compact">
+                    </div>
+                    <div class="settings-row sub-row ml-6" >
+                        <label class="label-wide">Auto Compact Limit</label>
+                        <input type="number" id="codexCtxCompact" value="900000" min="100000" max="1000000" step="1000"
+                            class="input-compact">
+                    </div>
+                </div>
+            </div>
+            <div class="settings-group">
+                <h4>🔵 Gemini</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelGemini"></select>
+                    <input type="text" id="customModelGemini" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+            </div>
+            <div class="settings-group">
+                <h4>🟠 OpenCode</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelOpencode"></select>
+                    <input type="text" id="customModelOpencode" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Effort</label>
+                    <select id="effortOpencode">
+                        <option value="">— none</option>
+                        <option value="minimal">🟢 minimal</option>
+                        <option value="low">🟡 low</option>
+                        <option value="high">🟠 high</option>
+                        <option value="max">🔴 max</option>
+                    </select>
+                </div>
+            </div>
+            <div class="settings-group">
+                <h4>💙 Copilot</h4>
+                <div class="settings-row">
+                    <label>Model</label>
+                    <select id="modelCopilot"></select>
+                    <input type="text" id="customModelCopilot" class="custom-model-input"
+                        data-i18n-placeholder="model.placeholder" placeholder="model ID 입력" style="display:none">
+                </div>
+                <div class="settings-row sub-row">
+                    <label>Effort</label>
+                    <select id="effortCopilot">
+                        <option value="" selected>— none</option>
+                    </select>
+                </div>
+            </div>
+            <!-- Fallback Order -->
+            <div class="settings-group">
+                <h4>⚡ Fallback</h4>
+                <p class="text-xs text-dim fallback-desc" data-i18n="fallback.desc">CLI 실패 시 자동
+                    재시도 순서</p>
+                <div id="fallbackOrderList"></div>
+            </div>
+            <!-- MCP Servers -->
+            <div class="settings-group">
+                <h4>🔌 MCP Servers</h4>
+                <div id="mcpServerList" class="text-status py-1">
+                    Loading...
+                </div>
+                <button class="btn-clear btn-action-block"
+                    data-action="syncMcp">🔄 Sync to all CLIs</button>
+                <button class="btn-clear btn-action-block"
+                    data-action="installMcp">📦 Install Globally (npm i -g)</button>
+                <div id="mcpSyncResult" class="text-xs text-dim py-1" style="display:none"></div>
+            </div>
+            <!-- STT Settings -->
+            <div class="settings-group">
+                <h4 data-i18n="stt.title">🎙️ 음성 인식 (STT)</h4>
+                <div class="settings-row">
+                    <label data-i18n="stt.engine">엔진</label>
+                    <select id="sttEngine">
+                        <option value="auto">Auto (Gemini → Whisper)</option>
+                        <option value="gemini">Gemini only</option>
+                        <option value="openai">OpenAI Compatible</option>
+                        <option value="vertex">Vertex AI</option>
+                        <option value="whisper">Whisper only (local)</option>
+                    </select>
+                </div>
+                <div class="settings-row sub-row stt-gemini">
+                    <label data-i18n="stt.geminiKey">Gemini API Key</label>
+                    <input type="password" id="sttGeminiKey" placeholder="AIza..." class="input-sm">
+                </div>
+                <div class="settings-row sub-row stt-gemini">
+                    <label data-i18n="stt.geminiModel">Gemini 모델</label>
+                    <select id="sttGeminiModel">
+                        <option value="gemini-3.1-flash-lite-preview">gemini-3.1-flash-lite-preview (fastest)</option>
+                        <option value="gemini-2.5-flash-lite">gemini-2.5-flash-lite (fast)</option>
+                        <option value="gemini-2.5-flash">gemini-2.5-flash (balanced)</option>
+                        <option value="gemini-2.5-pro">gemini-2.5-pro (accurate)</option>
+                        <option value="__custom__">✏️ 직접 입력...</option>
+                    </select>
+                    <input type="text" id="sttGeminiModelCustom" placeholder="모델명 입력"
+                        class="mt-1" style="display:none" />
+                </div>
+                <!-- OpenAI Compatible -->
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiBaseUrl">Base URL</label>
+                    <input type="text" id="sttOpenaiBaseUrl" placeholder="https://api.groq.com/openai" class="input-sm">
+                </div>
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiKey">API Key</label>
+                    <input type="password" id="sttOpenaiKey" placeholder="sk-..." class="input-sm">
+                </div>
+                <div class="settings-row sub-row stt-openai" style="display:none">
+                    <label data-i18n="stt.openaiModel">Model</label>
+                    <input type="text" id="sttOpenaiModel" placeholder="whisper-large-v3" class="input-sm">
+                </div>
+                <!-- Vertex AI -->
+                <div class="settings-row sub-row stt-vertex" style="display:none">
+                    <label data-i18n="stt.vertexConfig">Vertex AI Config (JSON)</label>
+                    <textarea id="sttVertexJson" rows="4"
+                        placeholder='{"project_id":"...","location":"us-central1","credentials":{...}}' class="input-sm mono"></textarea>
+                </div>
+                <div class="settings-row sub-row stt-whisper">
+                    <label data-i18n="stt.whisperModel">Whisper 모델</label>
+                    <input type="text" id="sttWhisperModel" placeholder="mlx-community/..." class="input-sm">
+                </div>
+                <small class="text-shortcut-hint" data-i18n="stt.shortcutHint">
+                    ⌨️ Ctrl+Shift+Space (⌘+Shift+Space on Mac)</small>
+            </div>
+        </div>
+    </aside>
+    <!-- Prompt Modal -->
+    <div class="modal-overlay" id="promptModal" role="dialog" aria-modal="true" aria-label="System prompt editor">
+        <div class="modal-box">
+            <div class="modal-header">
+                <span data-i18n="modal.promptTitle">시스템 프롬프트 (A-2)</span>
+                <button data-action="closePrompt"
+                    class="btn-modal-close" aria-label="Close">✕</button>
+            </div>
+            <textarea class="modal-textarea" id="modalPromptEditor"></textarea>
+            <div class="modal-footer">
+                <button class="btn-clear btn-action-sm px-4" data-action="cancelPrompt"
+                    data-i18n="btn.cancel">취소</button>
+                <button class="btn-save" data-action="savePrompt" data-i18n="btn.save">저장</button>
+            </div>
+        </div>
+    </div>
+    <!-- Heartbeat Jobs Modal -->
+    <div class="modal-overlay" id="heartbeatModal" role="dialog" aria-modal="true" aria-label="Heartbeat jobs">
+        <div class="modal-box modal-scrollable" >
+            <div class="modal-header">
+                <span data-i18n="modal.heartbeatTitle">💓 하트비트 작업</span>
+                <button data-action="closeHeartbeat"
+                    class="btn-modal-close" aria-label="Close">✕</button>
+            </div>
+            <div id="hbJobsList" class="p-3"></div>
+            <div class="px-3 pb-3">
+                <button class="hb-add" data-action="addHeartbeat" data-i18n="hb.add">+ 새 하트비트 추가</button>
+            </div>
+        </div>
+    </div>
+    <!-- Memory Modal -->
+    <div class="modal-overlay" id="memoryModal" role="dialog" aria-modal="true" aria-label="Memory files">
+        <div class="modal-box modal-scrollable" >
+            <div class="modal-header">
+                <span data-i18n="modal.memoryTitle">🧠 메모리</span>
+                <button data-action="closeMemory"
+                    class="btn-modal-close" aria-label="Close">✕</button>
+            </div>
+            <div class="tab-strip" role="tablist">
+                <button class="mem-tab active mem-tab-btn" id="memTabBtnSettings" role="tab" aria-selected="true" aria-controls="memTabSettings"
+                    >⚙️
+                    Settings</button>
+                <button class="mem-tab mem-tab-btn" id="memTabBtnAdvOps" role="tab" aria-selected="false" aria-controls="memTabAdvOps"
+                    >📊
+                    Status</button>
+                <button class="mem-tab mem-tab-btn" id="memTabBtnFiles" role="tab" aria-selected="false" aria-controls="memTabFiles"
+                    >📂
+                    Files</button>
+            </div>
+            <div id="advStatusBanner" class="adv-status-banner" style="display:none"></div>
+            <div id="memTabSettings" class="p-3" role="tabpanel" aria-labelledby="memTabBtnSettings">
+                <div class="settings-row"><label data-i18n="label.enabled">활성화</label>
+                    <div>
+                        <button id="memOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                        <button id="memOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                    </div>
+                </div>
+                <div class="settings-row"><label data-i18n="label.flushEvery">정리 주기</label>
+                    <select id="memFlushEvery"
+                        class="select-sm">
+                        <option value="5">5 QA</option>
+                        <option value="10" selected>10 QA</option>
+                        <option value="20">20 QA</option>
+                        <option value="50">50 QA</option>
+                    </select>
+                </div>
+                <div class="settings-row"><label>CLI</label>
+                    <select id="memCli"
+                        class="select-sm">
+                        <option value="">(active CLI)</option>
+                        <option>claude</option>
+                        <option>codex</option>
+                        <option>gemini</option>
+                        <option>opencode</option>
+                        <option>copilot</option>
+                    </select>
+                </div>
+                <div class="settings-row"><label>Model</label>
+                    <select id="memModel"
+                        class="select-sm">
+                        <option value="">(CLI default)</option>
+                        <option>haiku</option>
+                        <option>sonnet</option>
+                        <option>sonnet[1m]</option>
+                        <option>opus</option>
+                        <option>opus[1m]</option>
+                        <option>gemini-2.5-flash</option>
+                        <option>gpt-5.3-codex-spark</option>
+                    </select>
+                </div>
+                <div class="settings-row"><label>Save Path</label>
+                    <span id="memPath"
+                        class="text-xs text-dim mono-path"></span>
+                </div>
+                <div class="settings-row"><label>Retention</label>
+                    <select id="memRetention"
+                        class="select-sm">
+                        <option value="7">7 days</option>
+                        <option value="30" selected>30 days</option>
+                        <option value="90">90 days</option>
+                        <option value="0">forever</option>
+                    </select>
+                </div>
+                <div
+                    class="info-box">
+                    💡 Counter: <span id="memCounter">0</span> / <span id="memThreshold">10</span> responses until next
+                    flush
+                </div>
+            </div>
+            <div id="memTabAdvOps" class="p-3" style="display:none" role="tabpanel" aria-labelledby="memTabBtnAdvOps">
+                <div class="settings-row"><label>Index State</label><span id="advIndexState" class="text-status">-</span></div>
+                <div class="settings-row"><label>Storage Root</label><span id="advStorageRoot" class="text-xs text-dim mono-path">-</span></div>
+                <div class="settings-row"><label>Indexed Files</label><span id="advIndexedFiles" class="text-status">0</span></div>
+                <div class="settings-row"><label>Indexed Chunks</label><span id="advIndexedChunks" class="text-status">0</span></div>
+                <div class="settings-row"><label>Last Indexed</label><span id="advLastIndexedAt" class="text-status">-</span></div>
+                <div class="settings-row"><label>Import Status</label><span id="advImportStatus" class="text-status">-</span></div>
+                <div class="settings-row"><label>Corrupted</label><span id="advCorruptedCount" class="text-status">0</span></div>
+                <div class="settings-row"><label>Last Expansion</label><span id="advLastExpansion" class="text-status">-</span></div>
+                <div class="settings-row"><label>Last Error</label><span id="advLastError" class="text-status">-</span></div>
+                <div
+                    class="info-box">
+                    Fixed Snapshot Budget: 2800 chars / 4 chunks / 700 chars each
+                </div>
+                <div class="settings-row mt-3" >
+                    <label>Bootstrap Sources</label>
+                    <div class="flex flex-col gap-1 text-sm">
+                        <label><input type="checkbox" id="advImportCore" checked> MEMORY.md</label>
+                        <label><input type="checkbox" id="advImportMarkdown" checked> memory/**/*.md</label>
+                        <label><input type="checkbox" id="advImportKv" checked> SQLite KV memory</label>
+                        <label><input type="checkbox" id="advImportClaudeSession" checked> external .claude session memory (read-only)</label>
+                    </div>
+                </div>
+                <div class="flex gap-2 flex-wrap mt-3">
+                    <button class="btn-clear" id="advBootstrapBtn">🧩 Bootstrap</button>
+                    <button class="btn-clear" id="advReindexBtn">🔄 Reindex</button>
+                    <button class="btn-clear" id="advReimportBtn">📥 Re-import Legacy</button>
+                    <button class="btn-clear" id="advOpenCorruptedBtn">📂 Open Corrupted Folder</button>
+                </div>
+            </div>
+            <div id="memTabFiles" class="p-3" style="display:none" role="tabpanel" aria-labelledby="memTabBtnFiles">
+                <div class="section-header">Basic Memory Files</div>
+                <div id="basicMemoryFiles"></div>
+                <div class="section-header mt-3">Structured Memory Files</div>
+                <div id="advancedMemoryFiles"></div>
+                <div class="section-header mt-3">Corrupted / Quarantined</div>
+                <div id="corruptedMemoryFiles"></div>
+                <div class="section-header mt-3">Legacy Unmapped</div>
+                <div id="legacyUnmappedFiles"></div>
+            </div>
+        </div>
+    </div>
+    <!-- Mobile Navigation -->
+    <div class="mobile-nav">
+        <button id="mobileMenuLeft" aria-label="Open menu">☰ Menu</button>
+        <button id="mobileMenuRight" aria-label="Open settings">⚙️ Settings</button>
+    </div>
+    <!-- Template Editor Modal (Node Map + Editor 2-view) -->
+    <div class="modal-overlay" id="templateModal" role="dialog" aria-modal="true" aria-label="Prompt templates">
+        <div class="modal-box modal-template" >
+            <div class="modal-header">
+                <span id="templateModalTitle">📝 프롬프트 구조</span>
+                <button data-action="closeTemplate"
+                    class="btn-modal-close" aria-label="Close">✕</button>
+            </div>
+            <!-- View 1: Node Map -->
+            <div id="templateTreeView" class="template-tree-area">
+                <div id="templateTree"></div>
+                <div class="template-hint">
+                    🔒 클릭하면 프롬프트 내용 확인 · ⚠️ 개발자 모드에서 편집
+                </div>
+            </div>
+            <!-- View 2: Editor (hidden by default) -->
+            <div id="templateEditorView" class="template-editor-view" style="display:none">
+                <div
+                    class="template-editor-bar">
+                    <button id="templateBack"
+                        class="btn-back">←
+                        뒤로</button>
+                    <span id="templateEditorLabel" class="flex-1 text-sm text-dim"></span>
+                    <button id="templateDevToggle"
+                        class="btn-dev-toggle">🔧
+                        개발자 모드</button>
+                </div>
+                <textarea class="modal-textarea template-textarea" id="templateEditor" readonly
+                    ></textarea>
+                <div class="modal-footer">
+                    <span id="templateVars" class="text-xs text-dim mr-auto"></span>
+                    <button class="btn-save" data-action="saveTemplate" style="display:none" id="templateSaveBtn">💾
+                        저장</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>