Release 2.9.0: open code editor in a standalone browser tab
The 💻 코드 sidebar tab now opens a dedicated code.html page in a new tab, mirroring how the slide wizard opens pptx-wizard.html. - Add web-ui/code.html: standalone code editor page reusing styles.css and the same CodeMirror/xterm/Monaco head as the main app. - Add web-ui/code.js: self-contained code-view logic — inlined shared helpers (api/authHeaders/escHtml/getCookie) + the extracted code-editor block + a bootstrap that inits Monaco and loads models/dir. It mirrors the code block in app.js (kept duplicated so the main app stays untouched). - index.html: tab-code now window.open('/code.html'). The in-page code mode (top mode button) is unchanged, so chat→editor live streaming still works. Verified with Playwright: Monaco initializes, editor/sidebar/toolbar/Coder AI render, no JS errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>💻 코드 에디터</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=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="cherry_logo.png">
|
||||
<!-- CodeMirror + xterm (UMD libs loaded before Monaco's AMD loader to avoid anonymous define() clashes) -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- Monaco loader (AMD). Hide define.amd first so any stray UMD lib does not call Monaco's anonymous define(). -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
||||
<script>
|
||||
// Apply the saved theme before paint so the page chrome matches the main app.
|
||||
try {
|
||||
var _t = localStorage.getItem('cherryclaw_theme');
|
||||
document.documentElement.setAttribute('data-theme', _t === 'dark' ? 'dark' : 'light');
|
||||
} catch (e) {}
|
||||
</script>
|
||||
<style>
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Nanum Gothic', system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.code-page-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
||||
.code-page-header h1 { font-size: 14px; font-weight: 700; margin: 0; }
|
||||
.code-page-header .sub { font-size: 11px; color: var(--muted); }
|
||||
.code-layout { flex: 1; display: flex; min-height: 0; }
|
||||
.code-sidebar-wrap { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; }
|
||||
/* Override the main-app inline display:none / flex on the shared sidebar markup */
|
||||
#sidebar-code { display: flex !important; }
|
||||
#code-view { flex: 1; min-width: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="code-page-header">
|
||||
<span style="font-size:16px">💻</span>
|
||||
<h1>코드 에디터</h1>
|
||||
<span class="sub">workspace/code/</span>
|
||||
</div>
|
||||
|
||||
<div class="code-layout">
|
||||
|
||||
<!-- CODE SIDEBAR (mirrors #sidebar-code in index.html) -->
|
||||
<div class="code-sidebar-wrap">
|
||||
<div id="sidebar-code" style="display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden">
|
||||
<!-- 내부 탭 -->
|
||||
<div style="display:flex;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--panel-2)">
|
||||
<button class="code-sb-tab active" id="csb-tab-files" onclick="setCodeSbTab('files')">파일</button>
|
||||
<button class="code-sb-tab" id="csb-tab-model" onclick="setCodeSbTab('model')">모델</button>
|
||||
<button class="code-sb-tab" id="csb-tab-settings"onclick="setCodeSbTab('settings')">설정</button>
|
||||
</div>
|
||||
|
||||
<!-- 파일 탭 -->
|
||||
<div id="csb-files" style="display:flex;flex-direction:column;flex:1;min-height:0">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line);flex-shrink:0">
|
||||
<span style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em">workspace/code/</span>
|
||||
<div style="display:flex;gap:4px">
|
||||
<button onclick="codeNewFile()" title="새 파일" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;padding:0 3px">+</button>
|
||||
<button onclick="codeSbRefresh()" title="새로고침" style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0 3px">↺</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="csb-file-tree" style="flex:1;overflow-y:auto;padding:4px 0">
|
||||
<div style="padding:12px;color:var(--muted);font-size:11px;text-align:center">로딩 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 모델 탭 -->
|
||||
<div id="csb-model" style="display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:14px 12px;gap:12px">
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">Coder AI 모델</div>
|
||||
<select id="csb-model-select" onchange="csbModelChanged()"
|
||||
style="width:100%;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;cursor:pointer">
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">세션 초기화</div>
|
||||
<button onclick="codeAiClear()" style="width:100%;padding:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:8px;cursor:pointer;font-size:12px">대화 기록 지우기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 설정 탭 -->
|
||||
<div id="csb-settings" style="display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:14px 12px;gap:14px">
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">코드 저장 디렉토리</div>
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<input type="text" id="csb-codedir" value="code" onchange="csbCodeDirChanged(this.value)"
|
||||
style="flex:1;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;font-family:'IBM Plex Mono',monospace">
|
||||
<button onclick="csbCodeDirSave()" title="저장" style="background:var(--brand);color:#fff;border:none;border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap">저장</button>
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--muted);margin-top:4px">워크스페이스 하위 폴더 (기본: code)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">폰트 크기</div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<input type="range" id="csb-fontsize" min="10" max="22" value="14" oninput="csbFontSize(this.value)"
|
||||
style="flex:1;accent-color:var(--brand)">
|
||||
<span id="csb-fontsize-label" style="font-size:11px;color:var(--muted);width:24px;text-align:right">14</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">줄 바꿈</div>
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text)">
|
||||
<input type="checkbox" id="csb-wordwrap" checked onchange="csbWordWrap(this.checked)"
|
||||
style="accent-color:var(--brand);width:15px;height:15px">
|
||||
자동 줄 바꿈
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">에디터 테마</div>
|
||||
<select id="csb-theme" onchange="csbTheme(this.value)"
|
||||
style="width:100%;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;cursor:pointer">
|
||||
<option value="vs-dark">Dark (기본)</option>
|
||||
<option value="vs">Light</option>
|
||||
<option value="hc-black">High Contrast</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">탭 크기</div>
|
||||
<select id="csb-tabsize" onchange="csbTabSize(this.value)"
|
||||
style="width:100%;font-size:12px;padding:6px 8px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;cursor:pointer">
|
||||
<option value="2" selected>2칸</option>
|
||||
<option value="4">4칸</option>
|
||||
<option value="8">8칸</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px">미니맵</div>
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text)">
|
||||
<input type="checkbox" id="csb-minimap" checked onchange="csbMinimap(this.checked)"
|
||||
style="accent-color:var(--brand);width:15px;height:15px">
|
||||
미니맵 표시
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Code Editor View (mirrors #code-view in index.html) ─────────────── -->
|
||||
<div id="code-view" class="active">
|
||||
<!-- File tabs bar -->
|
||||
<div class="code-tabs-bar">
|
||||
<div id="code-file-tabs" style="display:flex;align-items:stretch"></div>
|
||||
<button class="code-new-tab-btn" onclick="codeNewFile()" title="새 파일">+</button>
|
||||
<div class="code-toolbar">
|
||||
<button id="code-folder-btn" class="code-tool-btn btn-folder" onclick="toggleCodeFolderBrowser(event)" title="파일 탐색기 열기"
|
||||
style="gap:4px;display:flex;align-items:center">
|
||||
📁 <span>workspace/code/</span> ▾
|
||||
</button>
|
||||
<button class="code-tool-btn btn-ai" onclick="codeSendSelectionToAI()" title="선택 영역을 AI에게 전송">💬 AI에게 전송</button>
|
||||
<div id="code-run-dropdown" style="position:relative;display:inline-flex">
|
||||
<button class="code-tool-btn btn-run" onclick="codeRunDefault()" title="실행">
|
||||
<span id="code-run-icon">▶</span> <span id="code-run-label">실행</span>
|
||||
</button>
|
||||
<button class="code-tool-btn btn-run" onclick="codeToggleRunMenu()" title="실행 방법 선택" style="padding:6px 4px;margin-left:-1px;border-left:1px solid rgba(34,197,94,.3)">▾</button>
|
||||
<div id="code-run-menu" style="display:none;position:absolute;top:100%;right:0;z-index:99;min-width:180px;background:#1a2e1a;border:1px solid #2d5a3a;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.5);margin-top:2px;overflow:hidden">
|
||||
</div>
|
||||
</div>
|
||||
<button class="code-tool-btn btn-save" onclick="codeSaveFile()" title="파일 저장 (Ctrl+S)">💾 저장</button>
|
||||
<button id="code-term-toggle-btn" class="code-tool-btn" onclick="toggleCodeTerminal()"
|
||||
title="터미널 토글 (Ctrl+`)"
|
||||
style="background:#111b14;border-color:#2d5a3a;color:#6fcf8a;font-family:'IBM Plex Mono',monospace;font-size:11px">⌨ 터미널</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor + AI panel -->
|
||||
<div class="code-body">
|
||||
<div id="code-editor-container"></div>
|
||||
<div class="code-vresize" id="code-vresize"></div>
|
||||
<div id="code-ai-panel">
|
||||
<div class="code-ai-header">
|
||||
<span id="code-ai-title">💻 Coder AI</span>
|
||||
</div>
|
||||
<div id="code-ai-messages">
|
||||
<div class="code-ai-msg thinking">코드를 선택하고 "AI에게 전송"을 누르거나, 아래에 질문을 입력하세요.</div>
|
||||
</div>
|
||||
<div class="code-ai-input-row">
|
||||
<textarea id="code-ai-input" placeholder="AI에게 질문..." rows="1"
|
||||
onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();codeAiSend();}"></textarea>
|
||||
<button class="code-tool-btn primary" onclick="codeAiSend()" style="flex-shrink:0;align-self:flex-end">전송</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Code editor terminal panel -->
|
||||
<div id="code-term-panel" style="display:none;flex-direction:column;flex-shrink:0;height:260px;min-height:80px;border-top:2px solid #1a4a35;background:#0c0c0c;position:relative">
|
||||
<div id="code-term-drag" style="position:absolute;top:0;left:0;right:0;height:5px;cursor:ns-resize;z-index:2;transition:background .15s"></div>
|
||||
<div style="display:flex;align-items:center;height:28px;background:#0d1f1a;border-bottom:1px solid #1a4a35;flex-shrink:0;overflow-x:auto;padding-left:2px">
|
||||
<div id="code-term-tabs" style="display:flex;align-items:stretch;height:100%;flex:1"></div>
|
||||
<button onclick="addCodeTermShell()" title="새 쉘" style="background:none;border:none;color:#3d6b4f;cursor:pointer;font-size:16px;padding:0 8px;line-height:1;flex-shrink:0">+</button>
|
||||
<button onclick="toggleCodeTerminal()" title="닫기" style="background:none;border:none;color:#3d6b4f;cursor:pointer;font-size:14px;padding:0 8px;line-height:1;flex-shrink:0">×</button>
|
||||
</div>
|
||||
<div id="code-term-container" style="flex:1;min-height:0;position:relative;overflow:hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Code folder browser dropdown (fixed, outside any overflow:hidden container) -->
|
||||
<div id="code-folder-dropdown" style="display:none;position:fixed;z-index:9999;
|
||||
background:var(--panel);border:1px solid rgba(34,197,94,0.4);border-radius:10px;
|
||||
min-width:260px;max-height:320px;overflow-y:auto;
|
||||
box-shadow:0 8px 32px rgba(0,0,0,0.35);padding:4px 0">
|
||||
<div style="padding:6px 12px;font-size:10px;font-weight:700;color:rgba(34,197,94,0.9);
|
||||
border-bottom:1px solid rgba(34,197,94,0.2);display:flex;justify-content:space-between;align-items:center">
|
||||
<span>📁 workspace/code/</span>
|
||||
<span onclick="codeRefreshFolder()" style="cursor:pointer;opacity:0.7;font-size:13px" title="새로고침">↺</span>
|
||||
</div>
|
||||
<div id="code-folder-list" style="padding:2px 0">
|
||||
<div style="padding:8px 12px;color:var(--muted);font-size:11px">로딩 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="code.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user