TypeScript로 플러그인 시스템 구현

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
<div style='color:#10b981; margin-bottom:12px;'>PLUGIN SYSTEM</div>
<div id='plugin-out' style='font-size:11px; margin-bottom:12px;'></div>
<button onclick='runPlugins()' style='background:#10b981; color:#080808; border:none; padding:8px 16px; cursor:pointer; font-family:monospace; font-size:11px;'>RUN ALL PLUGINS</button>
<script>
  // interface Plugin { name: string; version: string; execute(ctx: Context): string; }
  class PluginSystem {
    constructor() { this._plugins = []; }
    register(plugin) {
      this._plugins.push(plugin);
      return this;
    }
    run(context) {
      return this._plugins.map(p => ({
        name: p.name,
        version: p.version,
        result: p.execute(context)
      }));
    }
  }

  const system = new PluginSystem();
  system
    .register({ name: 'LoggerPlugin', version: '1.0', execute: ctx => `[LOG] ${ctx.unit} 처리됨` })
    .register({ name: 'ThreatPlugin', version: '2.1', execute: ctx => `[THREAT] 위협도 ${ctx.threat} 분석 완료` })
    .register({ name: 'ReportPlugin', version: '1.5', execute: ctx => `[REPORT] ${ctx.unit} 임무 기록됨` });

  function runPlugins() {
    const out = document.getElementById('plugin-out');
    out.innerHTML = '';
    const results = system.run({ unit: 'T-800', threat: 8 });
    results.forEach(r => {
      const el = document.createElement('div');
      el.style.marginBottom = '6px';
      el.innerHTML = `<span style="color:#f59e0b;">${r.name} v${r.version}</span><br><span style="color:#888; font-size:10px;">${r.result}</span>`;
      out.appendChild(el);
    });
  }
</script>
</div>