편집토론문서 역사

미디어위키:DevTools.js: 두 판 사이의 차이

(새 문서: // ========== Developer Tools Panel ========== (function () { var OWNER_USERNAME = 'Nxdsxn'; var START_PAGES = [ 'MediaWiki:Common.css', 'MediaWiki:Common.js', 'MediaWiki:Lang.js' ]; var JSZIP_URL = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'; function isWikiOwner() { return mw.config.get('wgUserName') === OWNER_USERNAME; } function setDevToolsStatus(text, type) { var status = document.getElementById('dev-tools-status'); if (!status) return; status.c...)
 
편집 요약 없음
1번째 줄: 1번째 줄:
// ========== Developer Tools Panel ==========
(function (mw, $) {
    'use strict';


(function () {
    var OWNER = 'Nxdsxn';
var OWNER_USERNAME = 'Nxdsxn';
    var JSZIP_URL = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';


var START_PAGES = [
    function isOwner() {
'MediaWiki:Common.css',
        var name = mw.config.get('wgUserName') || '';
'MediaWiki:Common.js',
        var groups = mw.config.get('wgUserGroups') || [];
'MediaWiki:Lang.js'
        return name === OWNER || groups.indexOf('sysop') !== -1 || groups.indexOf('interface-admin') !== -1;
];
    }


var JSZIP_URL = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
    if (!isOwner()) return;
    if (window.DevToolsPanelInitialized) return;
    window.DevToolsPanelInitialized = true;


function isWikiOwner() {
    var sourceFiles = [
return mw.config.get('wgUserName') === OWNER_USERNAME;
        { title: 'MediaWiki:Common.css', out: 'css/Common.css', ctype: 'text/css' },
}
        { title: 'MediaWiki:Theme.css', out: 'css/Theme.css', ctype: 'text/css' },
        { title: 'MediaWiki:Layout.css', out: 'css/Layout.css', ctype: 'text/css' },
        { title: 'MediaWiki:MainPage.css', out: 'css/MainPage.css', ctype: 'text/css' },
        { title: 'MediaWiki:Components.css', out: 'css/Components.css', ctype: 'text/css' },
        { title: 'MediaWiki:Template.css', out: 'css/Template.css', ctype: 'text/css' },
        { title: 'MediaWiki:Template.Infobox.css', out: 'css/Template.Infobox.css', ctype: 'text/css' },
        { title: 'MediaWiki:Icons.css', out: 'css/Icons.css', ctype: 'text/css' },
        { title: 'MediaWiki:Editor.css', out: 'css/Editor.css', ctype: 'text/css' },
        { title: 'MediaWiki:Dialogs.css', out: 'css/Dialogs.css', ctype: 'text/css' },
        { title: 'MediaWiki:DevTools.css', out: 'css/DevTools.css', ctype: 'text/css' },
        { title: 'MediaWiki:LangDrawer.css', out: 'css/LangDrawer.css', ctype: 'text/css' },
        { title: 'MediaWiki:Test.css', out: 'css/Test.css', ctype: 'text/css' },
        { title: 'MediaWiki:Common.js', out: 'js/Common.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:Lang.js', out: 'js/Lang.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:DevTools.js', out: 'js/DevTools.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:LangDrawer.js', out: 'js/LangDrawer.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:CategoryNav.js', out: 'js/CategoryNav.js', ctype: 'text/javascript' }
    ];


function setDevToolsStatus(text, type) {
    function escapeHtml(value) {
var status = document.getElementById('dev-tools-status');
        return String(value == null ? '' : value)
if (!status) return;
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }


status.className = '';
    function buildPanel() {
        if ($('#dev-tools-panel').length) return;


if (type === 'error') {
        var collapsed = localStorage.getItem('dev-tools-collapsed') === 'true';
status.classList.add('dev-tools-status-error');
        var html = '' +
}
            '<div id="dev-tools-panel" class="' + (collapsed ? 'dev-tools-collapsed' : '') + '">' +
                '<div id="dev-tools-header">' +
                    '<div id="dev-tools-title"><span class="dev-tools-led"></span><span>ADMIN TOOLS</span></div>' +
                    '<button type="button" id="dev-tools-toggle" aria-label="도구 접기">' + (collapsed ? '+' : '−') + '</button>' +
                '</div>' +
                '<div id="dev-tools-body">' +
                    '<div class="dev-tools-section">' +
                        '<div class="dev-tools-section-title">SOURCE PACKAGE</div>' +
                        '<button type="button" class="dev-tools-button" id="dev-tools-export">CSS / JS ZIP 다운로드</button>' +
                        '<div class="dev-tools-note">MediaWiki namespace의 CSS·JS 원본을 ZIP으로 묶습니다.</div>' +
                    '</div>' +
                    '<div class="dev-tools-section dev-tools-progress-section">' +
                        '<div class="dev-tools-section-title">PROGRESS TEST</div>' +
                        '<div class="dev-tools-progress-readout" id="dev-tools-progress-readout">SYNC</div>' +
                        '<label class="dev-tools-label" for="dev-tools-xp-amount">XP AMOUNT</label>' +
                        '<input id="dev-tools-xp-amount" class="dev-tools-input" type="number" min="1" step="1" value="10">' +
                        '<label class="dev-tools-label" for="dev-tools-xp-reason">REASON</label>' +
                        '<input id="dev-tools-xp-reason" class="dev-tools-input" type="text" value="관리자 테스트">' +
                        '<div class="dev-tools-grid">' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-xp-add">XP 지급</button>' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-progress-refresh">동기화</button>' +
                        '</div>' +
                        '<button type="button" class="dev-tools-button" id="dev-tools-daily-reset">오늘 XP 보너스 리셋</button>' +
                        '<button type="button" class="dev-tools-button dev-tools-danger" id="dev-tools-level-reset">레벨 리셋</button>' +
                    '</div>' +
                    '<div id="dev-tools-status">READY</div>' +
                '</div>' +
            '</div>';


if (type === 'ok') {
        $('body').append(html);
status.classList.add('dev-tools-status-ok');
    }
}


status.textContent = text || '';
    function setStatus(text, type) {
}
        var $status = $('#dev-tools-status');
        $status.removeClass('dev-tools-status-ok dev-tools-status-error');
        if (type === 'ok') $status.addClass('dev-tools-status-ok');
        if (type === 'error') $status.addClass('dev-tools-status-error');
        $status.text(text || '');
    }


function loadExternalScriptOnce(url, globalName) {
    function setButtonsDisabled(disabled) {
return new Promise(function (resolve, reject) {
        $('#dev-tools-panel button, #dev-tools-panel input').prop('disabled', !!disabled);
if (globalName && window[globalName]) {
        $('#dev-tools-toggle').prop('disabled', false);
resolve();
    }
return;
}


var existing = document.querySelector('script[data-dev-tool-src="' + url + '"]');
    function loadScript(url) {
        return new Promise(function (resolve, reject) {
            if (window.JSZip) {
                resolve();
                return;
            }


if (existing) {
            var script = document.createElement('script');
existing.addEventListener('load', function () {
            script.src = url;
resolve();
            script.onload = resolve;
});
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }


existing.addEventListener('error', function () {
    function rawUrl(file) {
reject(new Error('script load failed: ' + url));
        return mw.util.getUrl(file.title, {
});
            action: 'raw',
            ctype: file.ctype
        });
    }


return;
    function fetchRaw(file) {
}
        return fetch(rawUrl(file), { credentials: 'same-origin' }).then(function (res) {
            if (!res.ok) throw new Error(file.title + ' HTTP ' + res.status);
            return res.text();
        });
    }


var script = document.createElement('script');
    function downloadBlob(blob, filename) {
script.src = url;
        var url = URL.createObjectURL(blob);
script.async = true;
        var a = document.createElement('a');
script.setAttribute('data-dev-tool-src', url);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        a.remove();
        setTimeout(function () {
            URL.revokeObjectURL(url);
        }, 1000);
    }


script.onload = function () {
    function exportSources() {
resolve();
        setButtonsDisabled(true);
};
        setStatus('ZIP 생성 중...');


script.onerror = function () {
        loadScript(JSZIP_URL)
reject(new Error('script load failed: ' + url));
            .then(function () {
};
                var zip = new JSZip();
                var meta = [];


document.head.appendChild(script);
                return Promise.all(sourceFiles.map(function (file) {
});
                    return fetchRaw(file).then(function (text) {
}
                        zip.file(file.out, text);
                        meta.push(file.out);
                    }).catch(function (err) {
                        zip.file(file.out + '.ERROR.txt', String(err && err.message ? err.message : err));
                    });
                })).then(function () {
                    zip.file('README.txt', 'CLBI Wiki CSS/JS export\nGenerated: ' + new Date().toISOString() + '\n\nFiles:\n' + meta.sort().join('\n') + '\n');
                    return zip.generateAsync({ type: 'blob' });
                });
            })
            .then(function (blob) {
                var stamp = new Date().toISOString().replace(/[:.]/g, '-');
                downloadBlob(blob, 'clbiwiki-source-' + stamp + '.zip');
                setStatus('ZIP 다운로드 완료', 'ok');
            })
            .catch(function (err) {
                setStatus('ZIP 실패: ' + (err && err.message ? err.message : err), 'error');
            })
            .finally(function () {
                setButtonsDisabled(false);
            });
    }


function normalizeWikiTitle(title) {
    function withApi(done, fail) {
return String(title || '')
        mw.loader.using(['mediawiki.api']).then(function () {
.replace(/_/g, ' ')
            done(new mw.Api());
.trim();
        }, function () {
}
            if (typeof fail === 'function') fail();
        });
    }


function titleToFilePath(title) {
    function updateReadout(summary) {
var clean = normalizeWikiTitle(title).replace(/^MediaWiki:/i, '');
        var $box = $('#dev-tools-progress-readout');
var lower = clean.toLowerCase();
        if (!summary) {
            $box.text('NO DATA');
            return;
        }


if (lower.endsWith('.css')) {
        $box.html(
return 'css/' + clean;
            '<span>LVL ' + escapeHtml(summary.level) + '</span>' +
}
            '<span>' + escapeHtml(summary.totalXp) + ' XP</span>' +
            '<span>TODAY ' + escapeHtml(summary.dailyXp) + ' XP</span>' +
            '<span>READ ' + escapeHtml(summary.dailyReadCount) + '</span>' +
            '<span>DISC ' + escapeHtml(summary.discoveryCount) + '</span>'
        );
    }


if (lower.endsWith('.js')) {
    function refreshProgressSummary() {
return 'js/' + clean;
        withApi(function (api) {
}
            api.get({
                action: 'progress_summary',
                format: 'json',
                formatversion: 2
            }).then(function (data) {
                var payload = data && data.progress_summary;
                if (payload && payload.available && payload.summary) {
                    updateReadout(payload.summary);
                    if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
                        window.ProgressSystemWebUi.requestSummary(true);
                    }
                    setStatus('진행도 동기화 완료', 'ok');
                } else {
                    updateReadout(null);
                    setStatus('진행도 없음', 'error');
                }
            }).catch(function () {
                setStatus('동기화 실패', 'error');
            });
        }, function () {
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }


return 'other/' + clean;
    function runProgressAdmin(operation, extra) {
}
        extra = extra || {};
        setButtonsDisabled(true);
        setStatus('요청 처리 중...');


function fetchWikiPageSource(title) {
        withApi(function (api) {
var api = new mw.Api();
            var payload = $.extend({
                action: 'progress_admin',
                format: 'json',
                formatversion: 2,
                errorformat: 'plaintext',
                operation: operation
            }, extra);


return api.get({
            api.postWithToken('csrf', payload).then(function (data) {
action: 'query',
                var result = data && data.progress_admin;
prop: 'revisions',
                if (!result || !result.ok) {
titles: title,
                    setStatus('실패: ' + (result && result.reason ? result.reason : 'unknown'), 'error');
rvprop: 'content',
                    return;
rvslots: 'main',
                }
formatversion: 2
}).then(function (data) {
var page = data.query && data.query.pages && data.query.pages[0];


if (!page || page.missing) {
                if (result.summary) updateReadout(result.summary);
throw new Error('missing page: ' + title);
                if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
}
                    window.ProgressSystemWebUi.requestSummary(true);
                }
                setStatus('완료: ' + operation, 'ok');
            }).catch(function (code) {
                setStatus('API 실패: ' + code, 'error');
            }).always(function () {
                setButtonsDisabled(false);
            });
        }, function () {
            setButtonsDisabled(false);
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }


var revision = page.revisions && page.revisions[0];
    function bindEvents() {
var content = '';
        $(document).on('click', '#dev-tools-toggle', function () {
            var $panel = $('#dev-tools-panel');
            $panel.toggleClass('dev-tools-collapsed');
            var collapsed = $panel.hasClass('dev-tools-collapsed');
            localStorage.setItem('dev-tools-collapsed', collapsed ? 'true' : 'false');
            $(this).text(collapsed ? '+' : '−');
        });


if (revision && revision.slots && revision.slots.main) {
        $(document).on('click', '#dev-tools-export', exportSources);
content = revision.slots.main.content || '';
        $(document).on('click', '#dev-tools-progress-refresh', refreshProgressSummary);
} else if (revision) {
content = revision.content || revision['*'] || '';
}


return {
        $(document).on('click', '#dev-tools-xp-add', function () {
title: normalizeWikiTitle(title),
            var amount = parseInt($('#dev-tools-xp-amount').val(), 10);
content: content
            var reason = $('#dev-tools-xp-reason').val() || '관리자 테스트';
};
});
}


function extractImportedMediaWikiTitles(source) {
            if (!Number.isFinite(amount) || amount <= 0) {
var result = [];
                setStatus('XP 값이 잘못되었습니다.', 'error');
var seen = {};
                return;
var regex = /@import\s+(?:url\()?['"]?([^'")\s]+)['"]?\)?/gi;
            }
var match;


while ((match = regex.exec(source)) !== null) {
            runProgressAdmin('add_xp', {
var rawUrl = match[1];
                amount: amount,
var title = '';
                reason: reason
            });
        });


try {
        $(document).on('click', '#dev-tools-daily-reset', function () {
var parsed = new URL(rawUrl, window.location.origin);
            runProgressAdmin('reset_daily');
title = parsed.searchParams.get('title') || '';
        });


if (!title && parsed.pathname) {
        $(document).on('click', '#dev-tools-level-reset', function () {
var pathMatch = parsed.pathname.match(/\/index\.php\/(.+)$/);
            if (!window.confirm('레벨/총 경험치와 오늘 보너스 카운트를 리셋할까요?')) return;
            runProgressAdmin('reset_progress');
        });
    }


if (pathMatch) {
    $(function () {
title = decodeURIComponent(pathMatch[1]);
        buildPanel();
}
        bindEvents();
}
        refreshProgressSummary();
} catch (err) {
    });
title = '';
})(mediaWiki, jQuery);
}
 
title = normalizeWikiTitle(title);
 
if (!/^MediaWiki:/i.test(title)) {
continue;
}
 
if (!/\.(css|js)$/i.test(title)) {
continue;
}
 
if (seen[title]) {
continue;
}
 
seen[title] = true;
result.push(title);
}
 
return result;
}
 
async function collectWikiAssets() {
var queue = START_PAGES.slice();
var visited = {};
var files = [];
var failed = [];
 
while (queue.length) {
var title = normalizeWikiTitle(queue.shift());
 
if (!title || visited[title]) {
continue;
}
 
visited[title] = true;
setDevToolsStatus('수집 중: ' + title);
 
try {
var page = await fetchWikiPageSource(title);
 
files.push({
title: page.title,
path: titleToFilePath(page.title),
content: page.content
});
 
if (/\.css$/i.test(page.title)) {
var imports = extractImportedMediaWikiTitles(page.content);
 
imports.forEach(function (importedTitle) {
if (!visited[importedTitle]) {
queue.push(importedTitle);
}
});
}
} catch (err) {
failed.push({
title: title,
error: err && err.message ? err.message : String(err)
});
}
}
 
return {
files: files,
failed: failed
};
}
 
function makeBackupFilename() {
var now = new Date();
var yyyy = now.getFullYear();
var mm = String(now.getMonth() + 1).padStart(2, '0');
var dd = String(now.getDate()).padStart(2, '0');
var hh = String(now.getHours()).padStart(2, '0');
var mi = String(now.getMinutes()).padStart(2, '0');
 
return 'wiki-assets-' + yyyy + '-' + mm + '-' + dd + '-' + hh + mi + '.zip';
}
 
function downloadBlob(blob, filename) {
var url = URL.createObjectURL(blob);
var link = document.createElement('a');
 
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
 
setTimeout(function () {
URL.revokeObjectURL(url);
link.remove();
}, 1000);
}
 
async function downloadWikiAssetsZip() {
var button = document.getElementById('dev-tools-backup-assets');
 
if (button) {
button.disabled = true;
button.textContent = '백업 생성 중...';
}
 
try {
setDevToolsStatus('JSZip 로딩 중...');
await loadExternalScriptOnce(JSZIP_URL, 'JSZip');
 
if (!window.JSZip) {
throw new Error('JSZip을 사용할 수 없습니다.');
}
 
var collected = await collectWikiAssets();
var zip = new JSZip();
 
collected.files.forEach(function (file) {
zip.file(file.path, file.content);
});
 
var manifest = {
createdAt: new Date().toISOString(),
wiki: window.location.origin,
user: mw.config.get('wgUserName') || '',
startPages: START_PAGES,
included: collected.files.map(function (file) {
return {
title: file.title,
path: file.path,
bytes: new Blob([file.content]).size
};
}),
failed: collected.failed
};
 
zip.file('manifest.json', JSON.stringify(manifest, null, 2));
 
setDevToolsStatus('ZIP 압축 중...');
 
var blob = await zip.generateAsync({
type: 'blob',
compression: 'DEFLATE',
compressionOptions: {
level: 6
}
});
 
downloadBlob(blob, makeBackupFilename());
 
if (collected.failed.length) {
setDevToolsStatus('완료. 일부 문서는 manifest.json에 실패 기록됨.', 'error');
} else {
setDevToolsStatus('완료. CSS/JS 백업 ZIP 다운로드됨.', 'ok');
}
} catch (err) {
console.error(err);
setDevToolsStatus(err && err.message ? err.message : '백업 생성 실패', 'error');
} finally {
if (button) {
button.disabled = false;
button.textContent = 'CSS/JS ZIP 백업';
}
}
}
 
function ensureDeveloperToolsPanel() {
if (!isWikiOwner()) {
var existing = document.getElementById('dev-tools-panel');
 
if (existing) {
existing.remove();
}
 
return;
}
 
if (document.getElementById('dev-tools-panel')) {
return;
}
 
var collapsed = localStorage.getItem('dev-tools-collapsed') === 'true';
 
var panel = document.createElement('div');
panel.id = 'dev-tools-panel';
 
if (collapsed) {
panel.classList.add('dev-tools-collapsed');
}
 
panel.innerHTML =
'<div id="dev-tools-header">' +
'<div id="dev-tools-title">' +
'<span class="clbi-icon" style="--icon:var(--ic-ui-004);width:16px;height:16px;"></span>' +
'<span>Developer Tools</span>' +
'</div>' +
'<button type="button" id="dev-tools-toggle" aria-label="개발자 도구 접기">' + (collapsed ? '+' : '−') + '</button>' +
'</div>' +
'<div id="dev-tools-body">' +
'<div class="dev-tools-section">' +
'<button type="button" class="dev-tools-button" id="dev-tools-backup-assets">CSS/JS ZIP 백업</button>' +
'<div class="dev-tools-note">Common.css의 MediaWiki @import를 자동 추적하고 Common.js, Lang.js를 함께 묶습니다.</div>' +
'<div id="dev-tools-status"></div>' +
'</div>' +
'</div>';
 
document.body.appendChild(panel);
}
 
$(function () {
ensureDeveloperToolsPanel();
 
$(document)
.off('click.devToolsToggle')
.on('click.devToolsToggle', '#dev-tools-toggle', function (e) {
e.preventDefault();
e.stopPropagation();
 
var panel = document.getElementById('dev-tools-panel');
 
if (!panel) {
return;
}
 
var nextCollapsed = !panel.classList.contains('dev-tools-collapsed');
 
panel.classList.toggle('dev-tools-collapsed', nextCollapsed);
localStorage.setItem('dev-tools-collapsed', nextCollapsed ? 'true' : 'false');
 
this.textContent = nextCollapsed ? '+' : '−';
});
 
$(document)
.off('click.devToolsBackupAssets')
.on('click.devToolsBackupAssets', '#dev-tools-backup-assets', function (e) {
e.preventDefault();
e.stopPropagation();
 
downloadWikiAssetsZip();
});
});
})();
 
// ========== Developer Tools Panel End ==========

2026년 5월 19일 (화) 21:23 판

(function (mw, $) {
    'use strict';

    var OWNER = 'Nxdsxn';
    var JSZIP_URL = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';

    function isOwner() {
        var name = mw.config.get('wgUserName') || '';
        var groups = mw.config.get('wgUserGroups') || [];
        return name === OWNER || groups.indexOf('sysop') !== -1 || groups.indexOf('interface-admin') !== -1;
    }

    if (!isOwner()) return;
    if (window.DevToolsPanelInitialized) return;
    window.DevToolsPanelInitialized = true;

    var sourceFiles = [
        { title: 'MediaWiki:Common.css', out: 'css/Common.css', ctype: 'text/css' },
        { title: 'MediaWiki:Theme.css', out: 'css/Theme.css', ctype: 'text/css' },
        { title: 'MediaWiki:Layout.css', out: 'css/Layout.css', ctype: 'text/css' },
        { title: 'MediaWiki:MainPage.css', out: 'css/MainPage.css', ctype: 'text/css' },
        { title: 'MediaWiki:Components.css', out: 'css/Components.css', ctype: 'text/css' },
        { title: 'MediaWiki:Template.css', out: 'css/Template.css', ctype: 'text/css' },
        { title: 'MediaWiki:Template.Infobox.css', out: 'css/Template.Infobox.css', ctype: 'text/css' },
        { title: 'MediaWiki:Icons.css', out: 'css/Icons.css', ctype: 'text/css' },
        { title: 'MediaWiki:Editor.css', out: 'css/Editor.css', ctype: 'text/css' },
        { title: 'MediaWiki:Dialogs.css', out: 'css/Dialogs.css', ctype: 'text/css' },
        { title: 'MediaWiki:DevTools.css', out: 'css/DevTools.css', ctype: 'text/css' },
        { title: 'MediaWiki:LangDrawer.css', out: 'css/LangDrawer.css', ctype: 'text/css' },
        { title: 'MediaWiki:Test.css', out: 'css/Test.css', ctype: 'text/css' },
        { title: 'MediaWiki:Common.js', out: 'js/Common.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:Lang.js', out: 'js/Lang.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:DevTools.js', out: 'js/DevTools.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:LangDrawer.js', out: 'js/LangDrawer.js', ctype: 'text/javascript' },
        { title: 'MediaWiki:CategoryNav.js', out: 'js/CategoryNav.js', ctype: 'text/javascript' }
    ];

    function escapeHtml(value) {
        return String(value == null ? '' : value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function buildPanel() {
        if ($('#dev-tools-panel').length) return;

        var collapsed = localStorage.getItem('dev-tools-collapsed') === 'true';
        var html = '' +
            '<div id="dev-tools-panel" class="' + (collapsed ? 'dev-tools-collapsed' : '') + '">' +
                '<div id="dev-tools-header">' +
                    '<div id="dev-tools-title"><span class="dev-tools-led"></span><span>ADMIN TOOLS</span></div>' +
                    '<button type="button" id="dev-tools-toggle" aria-label="도구 접기">' + (collapsed ? '+' : '−') + '</button>' +
                '</div>' +
                '<div id="dev-tools-body">' +
                    '<div class="dev-tools-section">' +
                        '<div class="dev-tools-section-title">SOURCE PACKAGE</div>' +
                        '<button type="button" class="dev-tools-button" id="dev-tools-export">CSS / JS ZIP 다운로드</button>' +
                        '<div class="dev-tools-note">MediaWiki namespace의 CSS·JS 원본을 ZIP으로 묶습니다.</div>' +
                    '</div>' +
                    '<div class="dev-tools-section dev-tools-progress-section">' +
                        '<div class="dev-tools-section-title">PROGRESS TEST</div>' +
                        '<div class="dev-tools-progress-readout" id="dev-tools-progress-readout">SYNC</div>' +
                        '<label class="dev-tools-label" for="dev-tools-xp-amount">XP AMOUNT</label>' +
                        '<input id="dev-tools-xp-amount" class="dev-tools-input" type="number" min="1" step="1" value="10">' +
                        '<label class="dev-tools-label" for="dev-tools-xp-reason">REASON</label>' +
                        '<input id="dev-tools-xp-reason" class="dev-tools-input" type="text" value="관리자 테스트">' +
                        '<div class="dev-tools-grid">' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-xp-add">XP 지급</button>' +
                            '<button type="button" class="dev-tools-button" id="dev-tools-progress-refresh">동기화</button>' +
                        '</div>' +
                        '<button type="button" class="dev-tools-button" id="dev-tools-daily-reset">오늘 XP 보너스 리셋</button>' +
                        '<button type="button" class="dev-tools-button dev-tools-danger" id="dev-tools-level-reset">레벨 리셋</button>' +
                    '</div>' +
                    '<div id="dev-tools-status">READY</div>' +
                '</div>' +
            '</div>';

        $('body').append(html);
    }

    function setStatus(text, type) {
        var $status = $('#dev-tools-status');
        $status.removeClass('dev-tools-status-ok dev-tools-status-error');
        if (type === 'ok') $status.addClass('dev-tools-status-ok');
        if (type === 'error') $status.addClass('dev-tools-status-error');
        $status.text(text || '');
    }

    function setButtonsDisabled(disabled) {
        $('#dev-tools-panel button, #dev-tools-panel input').prop('disabled', !!disabled);
        $('#dev-tools-toggle').prop('disabled', false);
    }

    function loadScript(url) {
        return new Promise(function (resolve, reject) {
            if (window.JSZip) {
                resolve();
                return;
            }

            var script = document.createElement('script');
            script.src = url;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    function rawUrl(file) {
        return mw.util.getUrl(file.title, {
            action: 'raw',
            ctype: file.ctype
        });
    }

    function fetchRaw(file) {
        return fetch(rawUrl(file), { credentials: 'same-origin' }).then(function (res) {
            if (!res.ok) throw new Error(file.title + ' HTTP ' + res.status);
            return res.text();
        });
    }

    function downloadBlob(blob, filename) {
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        a.remove();
        setTimeout(function () {
            URL.revokeObjectURL(url);
        }, 1000);
    }

    function exportSources() {
        setButtonsDisabled(true);
        setStatus('ZIP 생성 중...');

        loadScript(JSZIP_URL)
            .then(function () {
                var zip = new JSZip();
                var meta = [];

                return Promise.all(sourceFiles.map(function (file) {
                    return fetchRaw(file).then(function (text) {
                        zip.file(file.out, text);
                        meta.push(file.out);
                    }).catch(function (err) {
                        zip.file(file.out + '.ERROR.txt', String(err && err.message ? err.message : err));
                    });
                })).then(function () {
                    zip.file('README.txt', 'CLBI Wiki CSS/JS export\nGenerated: ' + new Date().toISOString() + '\n\nFiles:\n' + meta.sort().join('\n') + '\n');
                    return zip.generateAsync({ type: 'blob' });
                });
            })
            .then(function (blob) {
                var stamp = new Date().toISOString().replace(/[:.]/g, '-');
                downloadBlob(blob, 'clbiwiki-source-' + stamp + '.zip');
                setStatus('ZIP 다운로드 완료', 'ok');
            })
            .catch(function (err) {
                setStatus('ZIP 실패: ' + (err && err.message ? err.message : err), 'error');
            })
            .finally(function () {
                setButtonsDisabled(false);
            });
    }

    function withApi(done, fail) {
        mw.loader.using(['mediawiki.api']).then(function () {
            done(new mw.Api());
        }, function () {
            if (typeof fail === 'function') fail();
        });
    }

    function updateReadout(summary) {
        var $box = $('#dev-tools-progress-readout');
        if (!summary) {
            $box.text('NO DATA');
            return;
        }

        $box.html(
            '<span>LVL ' + escapeHtml(summary.level) + '</span>' +
            '<span>' + escapeHtml(summary.totalXp) + ' XP</span>' +
            '<span>TODAY ' + escapeHtml(summary.dailyXp) + ' XP</span>' +
            '<span>READ ' + escapeHtml(summary.dailyReadCount) + '</span>' +
            '<span>DISC ' + escapeHtml(summary.discoveryCount) + '</span>'
        );
    }

    function refreshProgressSummary() {
        withApi(function (api) {
            api.get({
                action: 'progress_summary',
                format: 'json',
                formatversion: 2
            }).then(function (data) {
                var payload = data && data.progress_summary;
                if (payload && payload.available && payload.summary) {
                    updateReadout(payload.summary);
                    if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
                        window.ProgressSystemWebUi.requestSummary(true);
                    }
                    setStatus('진행도 동기화 완료', 'ok');
                } else {
                    updateReadout(null);
                    setStatus('진행도 없음', 'error');
                }
            }).catch(function () {
                setStatus('동기화 실패', 'error');
            });
        }, function () {
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }

    function runProgressAdmin(operation, extra) {
        extra = extra || {};
        setButtonsDisabled(true);
        setStatus('요청 처리 중...');

        withApi(function (api) {
            var payload = $.extend({
                action: 'progress_admin',
                format: 'json',
                formatversion: 2,
                errorformat: 'plaintext',
                operation: operation
            }, extra);

            api.postWithToken('csrf', payload).then(function (data) {
                var result = data && data.progress_admin;
                if (!result || !result.ok) {
                    setStatus('실패: ' + (result && result.reason ? result.reason : 'unknown'), 'error');
                    return;
                }

                if (result.summary) updateReadout(result.summary);
                if (window.ProgressSystemWebUi && typeof window.ProgressSystemWebUi.requestSummary === 'function') {
                    window.ProgressSystemWebUi.requestSummary(true);
                }
                setStatus('완료: ' + operation, 'ok');
            }).catch(function (code) {
                setStatus('API 실패: ' + code, 'error');
            }).always(function () {
                setButtonsDisabled(false);
            });
        }, function () {
            setButtonsDisabled(false);
            setStatus('mediawiki.api 로드 실패', 'error');
        });
    }

    function bindEvents() {
        $(document).on('click', '#dev-tools-toggle', function () {
            var $panel = $('#dev-tools-panel');
            $panel.toggleClass('dev-tools-collapsed');
            var collapsed = $panel.hasClass('dev-tools-collapsed');
            localStorage.setItem('dev-tools-collapsed', collapsed ? 'true' : 'false');
            $(this).text(collapsed ? '+' : '−');
        });

        $(document).on('click', '#dev-tools-export', exportSources);
        $(document).on('click', '#dev-tools-progress-refresh', refreshProgressSummary);

        $(document).on('click', '#dev-tools-xp-add', function () {
            var amount = parseInt($('#dev-tools-xp-amount').val(), 10);
            var reason = $('#dev-tools-xp-reason').val() || '관리자 테스트';

            if (!Number.isFinite(amount) || amount <= 0) {
                setStatus('XP 값이 잘못되었습니다.', 'error');
                return;
            }

            runProgressAdmin('add_xp', {
                amount: amount,
                reason: reason
            });
        });

        $(document).on('click', '#dev-tools-daily-reset', function () {
            runProgressAdmin('reset_daily');
        });

        $(document).on('click', '#dev-tools-level-reset', function () {
            if (!window.confirm('레벨/총 경험치와 오늘 보너스 카운트를 리셋할까요?')) return;
            runProgressAdmin('reset_progress');
        });
    }

    $(function () {
        buildPanel();
        bindEvents();
        refreshProgressSummary();
    });
})(mediaWiki, jQuery);