core/server/pages/templates/surfaces/editor.html

{{/*
    Editor surface (Phase 2b).
    Server renders the layout shell with proper CSS sizing.
    editor-mode.js mounts CodeMirror, file tree, etc. into these containers.
    Fixes bugs #4 and #5: layout collapse when switching surfaces.
*/}}

{{define "surface-editor"}}
<div class="surface-editor" id="surfaceEditor" data-ws-id="{{.Data.WorkspaceID}}" data-ws-name="{{.Data.WorkspaceName}}">
    {{/* Header — editor-mode.js populates this */}}
    <div class="surface-editor-header" id="editorHeaderMount"></div>

    <div class="surface-editor-body">
        {{/* Editor main area — left pane (tabs + code) + split handle + right pane (chat) */}}
        <div class="surface-editor-main" id="editorMainMount"></div>
    </div>
</div>
{{end}}

{{define "css-editor"}}
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
<style>
    /*
     * Editor surface layout — owns the full viewport below banners.
     * This is the bug #5 fix: height is set by the server, not fought over
     * with other surfaces' CSS.
     */
    .surface-editor {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    .surface-editor-header {
        flex-shrink: 0;
    }
    .surface-editor-body {
        flex: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;
    }
    .surface-editor-main {
        flex: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;
    }
</style>
{{end}}

{{define "scripts-editor"}}
{{/* Chat rendering for the assist pane */}}
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/attachments.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tokens.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/extensions.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notes.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/surfaces.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-mode.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tools-toggle.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
<script nonce="{{.CSPNonce}}">
    // Editor surface boot: initialize and mount into template containers
    document.addEventListener('DOMContentLoaded', () => {
        if (typeof EditorMode !== 'undefined' && window.__SURFACE__ === 'editor') {
            const data = window.__PAGE_DATA__ || {};
            if (data.WorkspaceID) {
                EditorMode.mountServerRendered(data.WorkspaceID, data.WorkspaceName || 'Workspace');
            }
        }
    });
</script>
{{end}}