@synthetic-ai/premiere-mcp 2.3.1 → 2.3.5

package/cep-plugin/index.html

@@ -273,6 +273,26 @@
       border-color: var(--accent);
       background: var(--surface-2);
     }
+    /* Language selector (rendered by i18n/panel.cjs into #languageSettings) */
+    .synth-lang-select {
+      width: 100%;
+      padding: 7px 8px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: 8px;
+      font-size: 11.5px;
+      font-family: inherit;
+      outline: none;
+    }
+    .synth-lang-select:focus { border-color: var(--accent); }
+    .synth-lang-select option { background: #18181b; color: var(--text); }
+    .synth-lang-note {
+      font-size: 10.5px;
+      color: var(--text-dim);
+      margin-top: 6px;
+      line-height: 1.4;
+    }
 
     /* -- Buttons (Synthetic primary / secondary) --------------------------- */
     .button-row {
@@ -361,7 +381,7 @@
 </head>
 <body>
   <!-- ── Synthetic shell header (canonical — DO NOT edit per-panel) ── -->
-  <a class="synth-header" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
+  <a class="synth-header" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar" data-i18n-title="ui.bridge.header.openSite">
     <img class="synth-header-logo" src="synthetic-logo.png" alt="Synthetic">
     <span class="synth-header-name">Synthetic</span>
     <span class="synth-version-tag" id="synthHeaderVersion">v2.0.0</span>
@@ -390,67 +410,75 @@
     </div>
     <div class="product-text">
       <div class="title">Premiere Pro MCP</div>
-      <div class="sub">Bridge · 437 tools</div>
+      <div class="sub" data-i18n="ui.bridge.product.subtitle" data-i18n-vars='{"count":437}'>Bridge · 437 tools</div>
     </div>
     <!-- Status dot inside the product block — green = bridge running, grey
          = stopped. Updated alongside #statusDot/#statusText from main.js. -->
     <span id="productStatus" class="product-status" title="Panel ready"></span>
   </div>
   <div id="topbar-right" style="display:flex; gap:2px; flex-shrink:0;">
-    <button id="btnReload" onclick="location.reload()" title="Reload panel" class="icon-btn">⟳</button>
-    <button id="btnSettingsToggle" onclick="toggleSettings()" title="Settings" class="icon-btn">⚙</button>
+    <button id="btnReload" onclick="reloadPanel()" title="Reload panel" data-i18n-title="ui.bridge.toolbar.reload" class="icon-btn">⟳</button>
+    <button id="btnSettingsToggle" onclick="toggleSettings()" title="Settings" data-i18n-title="ui.bridge.toolbar.settings" class="icon-btn">⚙</button>
   </div>
   </div>
 
-  <!-- Settings (hidden by default — toggled by the ⚙ button above). Just
-       the license key for now: this panel doesn't have AE Agent's full
+  <!-- Settings (hidden by default — toggled by the ⚙ button above). The
+       license key + the language: this panel doesn't have AE Agent's full
        Subscription/API Keys/Data settings system, and doesn't need it. -->
   <div id="settingsPanel" style="display:none; margin: 0 0 14px; padding: 10px; border: 1px solid #3a3a3a; border-radius: 8px; background: rgba(255,255,255,0.02);">
-    <label for="licenseKeyInput">License key</label>
+    <label for="licenseKeyInput" data-i18n="ui.bridge.settings.licenseKey">License key</label>
     <div class="button-row" style="margin-top:0;">
-      <input type="text" id="licenseKeyInput" placeholder="Paste your Premiere MCP license key" style="flex:1;">
+      <input type="text" id="licenseKeyInput" placeholder="Paste your Premiere MCP license key" data-i18n-placeholder="ui.bridge.settings.licensePlaceholder" style="flex:1;">
     </div>
     <div class="button-row">
-      <button id="btnSaveLicense" onclick="saveLicenseKey()">Save license</button>
+      <button id="btnSaveLicense" onclick="saveLicenseKey()" data-i18n="ui.bridge.settings.saveLicense">Save license</button>
     </div>
     <div id="licenseStatus" class="meta" style="margin: 6px 0 0;"></div>
+    <!-- Language: saved to <USER_DATA>/com.mcp.premiere.bridge/settings.json,
+         shared with the AI Chat panel and read by the MCP server when it
+         (re)starts. The panel UI switches immediately. See main.js initI18n. -->
+    <div id="languageSettings"></div>
+    <div id="languageStatus" class="meta" style="margin: 6px 0 0;"></div>
+    <!-- Temp dir field -->
+    <label for="tempDir" data-i18n="ui.bridge.tempDir.label">Temp directory</label>
+    <div class="button-row" style="margin-top:0;">
+      <input type="text" id="tempDir" value="" style="flex:1;">
+    </div>
+    <div class="button-row">
+      <button onclick="saveTempDir()" data-i18n="ui.bridge.controls.save">Save</button>
+    </div>
   </div>
 
   <!-- Status -->
   <div class="status-row">
     <div class="status-dot" id="statusDot"></div>
-    <span id="statusText">Stopped</span>
+    <span id="statusText" data-i18n="ui.bridge.status.stopped">Stopped</span>
   </div>
-  <div class="meta">Commands processed: <strong id="cmdCount">0</strong></div>
+  <div class="meta"><span data-i18n="ui.bridge.stats.commandsProcessed">Commands processed:</span> <strong id="cmdCount">0</strong></div>
 
   <!-- Update banner (hidden until checkForUpdates() finds a newer version) -->
   <div id="updateBanner" style="display:none; margin: 12px 0; padding: 12px; border: 1px solid #a855f7; border-radius: 8px; background: rgba(168,85,247,0.08);">
     <div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px;">
-      <span style="font-weight:600; color:#e9d5ff;">Update available</span>
+      <span style="font-weight:600; color:#e9d5ff;" data-i18n="ui.bridge.update.available">Update available</span>
       <span id="updateVersionTag" style="font-family: monospace; font-size: 11px; color:#c084fc;">v? -> v?</span>
     </div>
     <div id="updateNotes" style="font-size: 11px; color:#a8a4c0; margin-bottom: 10px; line-height: 1.4;"></div>
     <div style="display:flex; gap:6px;">
-      <button id="btnUpdateNow" onclick="applyUpdate()" style="flex:1; background:#a855f7; color:#fff; border:none; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;">Update now</button>
-      <button id="btnUpdateLater" onclick="dismissUpdate()" style="background:transparent; color:#a8a4c0; border:1px solid #444; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;">Later</button>
-      <button id="btnUpdateInstaller" onclick="openInstaller()" title="If hot-swap fails or the release needs a fresh manifest" style="background:transparent; color:#a8a4c0; border:1px solid #444; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;">.zxp</button>
+      <button id="btnUpdateNow" onclick="applyUpdate()" style="flex:1; background:#a855f7; color:#fff; border:none; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;" data-i18n="ui.bridge.update.now">Update now</button>
+      <button id="btnUpdateLater" onclick="dismissUpdate()" style="background:transparent; color:#a8a4c0; border:1px solid #444; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;" data-i18n="ui.bridge.update.later">Later</button>
+      <button id="btnUpdateInstaller" onclick="openInstaller()" title="If hot-swap fails or the release needs a fresh manifest" data-i18n-title="ui.bridge.update.installerHint" style="background:transparent; color:#a8a4c0; border:1px solid #444; padding:6px 10px; border-radius:4px; font-size:12px; cursor:pointer;">.zxp</button>
     </div>
   </div>
 
-  <!-- Temp dir field -->
-  <label for="tempDir">Temp directory</label>
-  <input type="text" id="tempDir" value="">
-
   <!-- Controls -->
   <div class="button-row">
-    <button id="btnStart" onclick="startBridge()">Start bridge</button>
-    <button id="btnStop" onclick="stopBridge()" disabled>Stop</button>
-    <button onclick="saveTempDir()">Save</button>
+    <button id="btnStart" onclick="startBridge()" data-i18n="ui.bridge.controls.start">Start bridge</button>
+    <button id="btnStop" onclick="stopBridge()" disabled data-i18n="ui.bridge.controls.stop">Stop</button>
   </div>
 
   <!-- Log -->
   <div class="log-label">
-    <span class="l">Activity log</span>
+    <span class="l" data-i18n="ui.bridge.activity.title">Activity log</span>
     <span class="r">premiere-mcp-bridge</span>
   </div>
   <div id="log"></div>
@@ -459,14 +487,21 @@
 
   <!-- ── Synthetic shell footer (canonical — DO NOT edit per-panel) ── -->
   <footer class="synth-footer">
-    <span class="synth-footer-label">Built by</span>
-    <a class="synth-footer-link" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
+    <span class="synth-footer-label" data-i18n="ui.bridge.footer.builtBy">Built by</span>
+    <a class="synth-footer-link" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar" data-i18n-title="ui.bridge.header.openSite">
       <img class="synth-footer-logo" src="synthetic-logo.png" alt="Synthetic">
       <span class="synth-footer-name">Synthetic</span>
     </a>
   </footer>
 
   <script src="CSInterface.js"></script>
+  <!-- i18n (vendored from synthetic-idiomas by scripts/sync-i18n.mjs). With
+       --enable-nodejs CEP exposes a global `module`, so the UMD core registers
+       itself on module.exports instead of window: pick it up from there. -->
+  <script src="i18n-core.cjs"></script>
+  <script>if (!window.SyntheticI18n && typeof module === "object" && module && module.exports && module.exports.createI18n) window.SyntheticI18n = module.exports;</script>
+  <script src="i18n-panel.cjs"></script>
+  <script src="i18n-locales.js"></script>
   <script src="main.js"></script>
 </body>
 </html>