@synthetic-ai/premiere-mcp 2.1.0 → 2.3.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +135 -123
- package/LICENSE +21 -21
- package/README.md +242 -242
- package/cep-plugin/.debug +8 -8
- package/cep-plugin/CSInterface.js +92 -92
- package/cep-plugin/host.jsx +7 -7
- package/cep-plugin/index.html +472 -472
- package/cep-plugin/main.js +6 -0
- package/cep-plugin/premiere.jsx +24947 -24947
- package/dist/bridge/script-builder.js +378 -378
- package/dist/index.js +103 -4
- package/dist/license.js +38 -0
- package/dist/server.js +60 -60
- package/dist/tools/advanced.js +357 -357
- package/dist/tools/audio-advanced.js +1049 -1049
- package/dist/tools/audio.js +42 -42
- package/dist/tools/captions.js +27 -27
- package/dist/tools/clipboard.js +214 -214
- package/dist/tools/color-advanced.js +253 -253
- package/dist/tools/discovery.js +291 -291
- package/dist/tools/effects.js +285 -285
- package/dist/tools/export-presets.js +206 -206
- package/dist/tools/export.js +255 -255
- package/dist/tools/health.js +10 -10
- package/dist/tools/inspection.js +885 -885
- package/dist/tools/keyframes.js +369 -369
- package/dist/tools/markers.js +89 -89
- package/dist/tools/media.js +178 -178
- package/dist/tools/metadata.js +94 -94
- package/dist/tools/multicam.js +50 -50
- package/dist/tools/playback.js +15 -15
- package/dist/tools/playhead.js +95 -95
- package/dist/tools/project-manager.js +21 -21
- package/dist/tools/project.js +149 -149
- package/dist/tools/scripting.js +319 -319
- package/dist/tools/selection.js +202 -202
- package/dist/tools/sequence-advanced.js +379 -379
- package/dist/tools/sequence-settings.js +564 -564
- package/dist/tools/sequence.js +167 -167
- package/dist/tools/source-monitor.js +68 -68
- package/dist/tools/text.js +58 -58
- package/dist/tools/timeline.js +312 -312
- package/dist/tools/track-management.js +446 -446
- package/dist/tools/track-targeting.js +635 -635
- package/dist/tools/tracks.js +87 -87
- package/dist/tools/transitions-motion.js +174 -174
- package/dist/tools/transitions.js +111 -111
- package/dist/tools/utility.js +606 -606
- package/dist/tools/workspace.js +29 -29
- package/package.json +66 -66
- package/scripts/build-chat-dmg.sh +210 -210
- package/scripts/build-chat-zip.sh +291 -291
- package/scripts/install-cep-windows.ps1 +99 -99
- package/scripts/install-cep.sh +66 -66
- package/scripts/install-chat-plugin.bat +67 -67
- package/scripts/install-chat-plugin.sh +85 -85
- package/scripts/install-windows.bat +95 -95
- package/scripts/package.mjs +254 -254
package/cep-plugin/index.html
CHANGED
|
@@ -1,472 +1,472 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Synthetic Premiere MCP</title>
|
|
6
|
-
<style>
|
|
7
|
-
/* -- Synthetic design system applied to the CEP panel ----------------- */
|
|
8
|
-
/* Dark canvas + purple accent (Premiere MCP brand). Element ids match */
|
|
9
|
-
/* main.js exactly so the bridge logic does not change. */
|
|
10
|
-
|
|
11
|
-
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
12
|
-
|
|
13
|
-
:root {
|
|
14
|
-
--bg: #080809;
|
|
15
|
-
--surface: rgba(24, 24, 27, 0.6);
|
|
16
|
-
--surface-2: rgba(39, 39, 42, 0.7);
|
|
17
|
-
--border: rgba(63, 63, 70, 0.6);
|
|
18
|
-
--border-soft: rgba(63, 63, 70, 0.35);
|
|
19
|
-
--text: #f4f4f5;
|
|
20
|
-
--text-mute: #a1a1aa;
|
|
21
|
-
--text-dim: #71717a;
|
|
22
|
-
--text-faint: #52525b;
|
|
23
|
-
|
|
24
|
-
--accent: #a855f7; /* purple-500 — Premiere MCP brand */
|
|
25
|
-
--accent-hover: #9333ea; /* purple-600 */
|
|
26
|
-
--accent-soft-bg: rgba(168, 85, 247, 0.12);
|
|
27
|
-
--accent-soft-border: rgba(168, 85, 247, 0.30);
|
|
28
|
-
|
|
29
|
-
--ok: #4ade80; /* green-400 */
|
|
30
|
-
--warn: #fbbf24; /* amber-400 */
|
|
31
|
-
--err: #f87171; /* red-400 */
|
|
32
|
-
--info: #93c5fd; /* blue-300 */
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
html, body { height: 100%; }
|
|
36
|
-
/* Body is a flex column so .synth-footer (margin-top:auto) pins to the
|
|
37
|
-
very bottom. The .synth-header/.synth-footer span edge-to-edge, so
|
|
38
|
-
body padding is 0; the panel content lives inside #panel-content with
|
|
39
|
-
its own padding. */
|
|
40
|
-
body {
|
|
41
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
|
|
42
|
-
background: var(--bg);
|
|
43
|
-
color: var(--text);
|
|
44
|
-
font-size: 12px;
|
|
45
|
-
letter-spacing: -0.005em;
|
|
46
|
-
display: flex;
|
|
47
|
-
flex-direction: column;
|
|
48
|
-
min-height: 100vh;
|
|
49
|
-
margin: 0;
|
|
50
|
-
box-sizing: border-box;
|
|
51
|
-
}
|
|
52
|
-
#panel-content {
|
|
53
|
-
flex: 1;
|
|
54
|
-
padding: 16px;
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* ─── Synthetic shell — canonical (see synthetic/docs/DESIGN_SYSTEM.md)
|
|
60
|
-
Do NOT edit per-panel. Edit the canonical block in DESIGN_SYSTEM.md
|
|
61
|
-
then copy-paste verbatim. */
|
|
62
|
-
:root {
|
|
63
|
-
--shell-accent: #a855f7; /* purple-500 */
|
|
64
|
-
--shell-accent-dim: rgba(168, 85, 247, 0.12);
|
|
65
|
-
}
|
|
66
|
-
.synth-header,
|
|
67
|
-
.synth-footer {
|
|
68
|
-
display: flex;
|
|
69
|
-
align-items: center;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
gap: 8px;
|
|
72
|
-
padding: 8px 14px;
|
|
73
|
-
flex-shrink: 0;
|
|
74
|
-
text-decoration: none;
|
|
75
|
-
color: inherit;
|
|
76
|
-
font-family: inherit;
|
|
77
|
-
box-sizing: border-box;
|
|
78
|
-
}
|
|
79
|
-
.synth-header {
|
|
80
|
-
background: rgba(24, 24, 27, 0.5);
|
|
81
|
-
border-bottom: 1px solid rgba(63, 63, 70, 0.35);
|
|
82
|
-
cursor: pointer;
|
|
83
|
-
transition: background-color 120ms ease;
|
|
84
|
-
}
|
|
85
|
-
.synth-header:hover { background: rgba(24, 24, 27, 0.7); }
|
|
86
|
-
.synth-header:active { background: rgba(24, 24, 27, 0.85); }
|
|
87
|
-
.synth-header-logo { width: 9px; height: 15px; object-fit: contain; flex-shrink: 0; }
|
|
88
|
-
.synth-header-name {
|
|
89
|
-
font-weight: 700;
|
|
90
|
-
font-size: 12.5px;
|
|
91
|
-
letter-spacing: -0.01em;
|
|
92
|
-
color: #f4f4f5;
|
|
93
|
-
}
|
|
94
|
-
.synth-version-tag {
|
|
95
|
-
display: inline-flex;
|
|
96
|
-
align-items: center;
|
|
97
|
-
padding: 2px 8px;
|
|
98
|
-
border-radius: 999px;
|
|
99
|
-
background: var(--shell-accent-dim);
|
|
100
|
-
border: 1px solid var(--shell-accent);
|
|
101
|
-
font-size: 9px;
|
|
102
|
-
font-weight: 700;
|
|
103
|
-
color: var(--shell-accent);
|
|
104
|
-
letter-spacing: 0.3px;
|
|
105
|
-
text-transform: uppercase;
|
|
106
|
-
}
|
|
107
|
-
.synth-footer {
|
|
108
|
-
margin-top: auto;
|
|
109
|
-
background: rgba(24, 24, 27, 0.5);
|
|
110
|
-
border-top: 1px solid rgba(63, 63, 70, 0.35);
|
|
111
|
-
gap: 6px;
|
|
112
|
-
font-size: 10px;
|
|
113
|
-
letter-spacing: 0.04em;
|
|
114
|
-
text-transform: uppercase;
|
|
115
|
-
color: #71717a;
|
|
116
|
-
}
|
|
117
|
-
.synth-footer-label { color: #71717a; }
|
|
118
|
-
.synth-footer-link {
|
|
119
|
-
display: inline-flex;
|
|
120
|
-
align-items: center;
|
|
121
|
-
gap: 6px;
|
|
122
|
-
padding: 3px 8px;
|
|
123
|
-
border-radius: 999px;
|
|
124
|
-
text-decoration: none;
|
|
125
|
-
color: inherit;
|
|
126
|
-
cursor: pointer;
|
|
127
|
-
transition: background-color 120ms ease;
|
|
128
|
-
}
|
|
129
|
-
.synth-footer-link:hover { background: rgba(255, 255, 255, 0.06); }
|
|
130
|
-
.synth-footer-link:active { background: rgba(255, 255, 255, 0.10); }
|
|
131
|
-
.synth-footer-logo { width: 9px; height: 15px; object-fit: contain; }
|
|
132
|
-
.synth-footer-name {
|
|
133
|
-
color: #a1a1aa;
|
|
134
|
-
font-weight: 600;
|
|
135
|
-
text-transform: none;
|
|
136
|
-
letter-spacing: -0.005em;
|
|
137
|
-
font-size: 11px;
|
|
138
|
-
}
|
|
139
|
-
.synth-footer-link:hover .synth-footer-name { color: #f4f4f5; }
|
|
140
|
-
/* ─── End Synthetic shell ───────────────────────────────────────────── */
|
|
141
|
-
|
|
142
|
-
/* (Old .header / .version-tag / a.header-link rules removed — replaced
|
|
143
|
-
by the canonical .synth-header block above.) */
|
|
144
|
-
|
|
145
|
-
/* -- Hero: product title strip ----------------------------------------- */
|
|
146
|
-
.product {
|
|
147
|
-
display: flex;
|
|
148
|
-
align-items: center;
|
|
149
|
-
gap: 10px;
|
|
150
|
-
background: linear-gradient(135deg, rgba(88, 28, 135, 0.18), rgba(24, 24, 27, 0.2) 60%, rgba(24, 24, 27, 0.05));
|
|
151
|
-
border: 1px solid var(--accent-soft-border);
|
|
152
|
-
border-radius: 12px;
|
|
153
|
-
padding: 10px 12px;
|
|
154
|
-
margin-bottom: 14px;
|
|
155
|
-
}
|
|
156
|
-
.product .mark {
|
|
157
|
-
width: 30px; height: 30px;
|
|
158
|
-
border-radius: 8px;
|
|
159
|
-
background: var(--accent-soft-bg);
|
|
160
|
-
border: 1px solid var(--accent-soft-border);
|
|
161
|
-
display: flex; align-items: center; justify-content: center;
|
|
162
|
-
color: var(--accent);
|
|
163
|
-
flex-shrink: 0;
|
|
164
|
-
}
|
|
165
|
-
.product .mark svg { width: 16px; height: 16px; }
|
|
166
|
-
.product-text { min-width: 0; flex: 1; }
|
|
167
|
-
.product .title { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
|
|
168
|
-
.product .sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
|
|
169
|
-
/* Status dot inside the product block — grey by default, turns green
|
|
170
|
-
with a soft halo when the bridge is running (see main.js init). */
|
|
171
|
-
.product-status {
|
|
172
|
-
width: 8px;
|
|
173
|
-
height: 8px;
|
|
174
|
-
border-radius: 50%;
|
|
175
|
-
flex-shrink: 0;
|
|
176
|
-
background: var(--text-faint);
|
|
177
|
-
transition: background 120ms ease, box-shadow 120ms ease;
|
|
178
|
-
}
|
|
179
|
-
.product-status.ok {
|
|
180
|
-
background: var(--ok);
|
|
181
|
-
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
|
|
182
|
-
}
|
|
183
|
-
.product-status.warn {
|
|
184
|
-
background: var(--warn);
|
|
185
|
-
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
|
|
186
|
-
}
|
|
187
|
-
.product-status.err {
|
|
188
|
-
background: var(--err);
|
|
189
|
-
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
|
|
190
|
-
}
|
|
191
|
-
/* Reload/settings buttons — sit outside the .product card in #topbar-right,
|
|
192
|
-
same layout as AE Agent's icon row. */
|
|
193
|
-
.icon-btn {
|
|
194
|
-
background: none;
|
|
195
|
-
border: none;
|
|
196
|
-
color: var(--text-dim);
|
|
197
|
-
cursor: pointer;
|
|
198
|
-
padding: 5px 6px;
|
|
199
|
-
border-radius: 6px;
|
|
200
|
-
font-size: 13px;
|
|
201
|
-
line-height: 1;
|
|
202
|
-
transition: color 0.15s, background 0.15s;
|
|
203
|
-
}
|
|
204
|
-
.icon-btn:hover {
|
|
205
|
-
color: var(--text);
|
|
206
|
-
background: rgba(255,255,255,0.06);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
/* -- Status row -------------------------------------------------------- */
|
|
210
|
-
.status-row {
|
|
211
|
-
display: flex;
|
|
212
|
-
align-items: center;
|
|
213
|
-
gap: 8px;
|
|
214
|
-
font-size: 11.5px;
|
|
215
|
-
color: var(--text-mute);
|
|
216
|
-
margin-bottom: 4px;
|
|
217
|
-
}
|
|
218
|
-
.status-dot {
|
|
219
|
-
width: 8px; height: 8px;
|
|
220
|
-
border-radius: 50%;
|
|
221
|
-
background: var(--text-faint);
|
|
222
|
-
box-shadow: 0 0 0 0 transparent;
|
|
223
|
-
flex-shrink: 0;
|
|
224
|
-
}
|
|
225
|
-
.status-dot.connected {
|
|
226
|
-
background: var(--ok);
|
|
227
|
-
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
|
|
228
|
-
}
|
|
229
|
-
.status-dot.warning {
|
|
230
|
-
background: var(--warn);
|
|
231
|
-
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
|
|
232
|
-
}
|
|
233
|
-
.status-dot.error {
|
|
234
|
-
background: var(--err);
|
|
235
|
-
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
|
|
236
|
-
}
|
|
237
|
-
.status-dot.waiting {
|
|
238
|
-
background: var(--info);
|
|
239
|
-
box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15);
|
|
240
|
-
}
|
|
241
|
-
#statusText { color: var(--text); font-weight: 500; }
|
|
242
|
-
|
|
243
|
-
.meta {
|
|
244
|
-
font-size: 10.5px;
|
|
245
|
-
color: var(--text-dim);
|
|
246
|
-
margin: 8px 0 14px;
|
|
247
|
-
}
|
|
248
|
-
.meta strong { color: var(--text); font-weight: 600; }
|
|
249
|
-
|
|
250
|
-
/* -- Form -------------------------------------------------------------- */
|
|
251
|
-
label {
|
|
252
|
-
display: block;
|
|
253
|
-
font-size: 10px;
|
|
254
|
-
font-weight: 600;
|
|
255
|
-
letter-spacing: 0.04em;
|
|
256
|
-
text-transform: uppercase;
|
|
257
|
-
color: var(--text-dim);
|
|
258
|
-
margin: 12px 0 6px;
|
|
259
|
-
}
|
|
260
|
-
input[type="text"] {
|
|
261
|
-
width: 100%;
|
|
262
|
-
padding: 8px 10px;
|
|
263
|
-
background: var(--surface);
|
|
264
|
-
border: 1px solid var(--border);
|
|
265
|
-
color: var(--text);
|
|
266
|
-
border-radius: 8px;
|
|
267
|
-
font-size: 11.5px;
|
|
268
|
-
font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
|
|
269
|
-
outline: none;
|
|
270
|
-
transition: border-color 120ms ease;
|
|
271
|
-
}
|
|
272
|
-
input[type="text"]:focus {
|
|
273
|
-
border-color: var(--accent);
|
|
274
|
-
background: var(--surface-2);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
/* -- Buttons (Synthetic primary / secondary) --------------------------- */
|
|
278
|
-
.button-row {
|
|
279
|
-
display: flex;
|
|
280
|
-
gap: 6px;
|
|
281
|
-
margin-top: 12px;
|
|
282
|
-
}
|
|
283
|
-
button {
|
|
284
|
-
flex: 1;
|
|
285
|
-
padding: 8px 10px;
|
|
286
|
-
border: 1px solid transparent;
|
|
287
|
-
border-radius: 8px;
|
|
288
|
-
cursor: pointer;
|
|
289
|
-
font-size: 11.5px;
|
|
290
|
-
font-weight: 600;
|
|
291
|
-
font-family: inherit;
|
|
292
|
-
letter-spacing: -0.005em;
|
|
293
|
-
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
|
294
|
-
}
|
|
295
|
-
button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
296
|
-
|
|
297
|
-
/* Primary (Start) */
|
|
298
|
-
#btnStart {
|
|
299
|
-
background: var(--accent);
|
|
300
|
-
color: #fff;
|
|
301
|
-
}
|
|
302
|
-
#btnStart:hover:not(:disabled) { background: var(--accent-hover); }
|
|
303
|
-
|
|
304
|
-
/* Secondary (Stop, Save) */
|
|
305
|
-
#btnStop, button:not(#btnStart) {
|
|
306
|
-
background: var(--surface);
|
|
307
|
-
color: var(--text);
|
|
308
|
-
border-color: var(--border);
|
|
309
|
-
}
|
|
310
|
-
#btnStop:hover:not(:disabled),
|
|
311
|
-
button:not(#btnStart):hover:not(:disabled) {
|
|
312
|
-
background: var(--surface-2);
|
|
313
|
-
border-color: var(--text-faint);
|
|
314
|
-
}
|
|
315
|
-
#btnStop {
|
|
316
|
-
color: var(--err);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
/* -- Terminal log ------------------------------------------------------ */
|
|
320
|
-
.log-label {
|
|
321
|
-
display: flex;
|
|
322
|
-
align-items: center;
|
|
323
|
-
justify-content: space-between;
|
|
324
|
-
margin: 14px 0 6px;
|
|
325
|
-
}
|
|
326
|
-
.log-label .l {
|
|
327
|
-
font-size: 10px;
|
|
328
|
-
font-weight: 600;
|
|
329
|
-
letter-spacing: 0.04em;
|
|
330
|
-
text-transform: uppercase;
|
|
331
|
-
color: var(--text-dim);
|
|
332
|
-
}
|
|
333
|
-
.log-label .r {
|
|
334
|
-
font-size: 10px;
|
|
335
|
-
color: var(--text-faint);
|
|
336
|
-
font-family: "Cascadia Code", ui-monospace, monospace;
|
|
337
|
-
}
|
|
338
|
-
#log {
|
|
339
|
-
background: rgba(0, 0, 0, 0.45);
|
|
340
|
-
border: 1px solid var(--border);
|
|
341
|
-
border-radius: 8px;
|
|
342
|
-
padding: 10px;
|
|
343
|
-
max-height: 180px;
|
|
344
|
-
overflow-y: auto;
|
|
345
|
-
font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
|
|
346
|
-
font-size: 10.5px;
|
|
347
|
-
line-height: 1.65;
|
|
348
|
-
}
|
|
349
|
-
#log::-webkit-scrollbar { width: 8px; }
|
|
350
|
-
#log::-webkit-scrollbar-track { background: transparent; }
|
|
351
|
-
#log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
|
352
|
-
#log::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
|
|
353
|
-
.log-entry { color: var(--text-mute); }
|
|
354
|
-
.log-entry.cmd { color: var(--info); }
|
|
355
|
-
.log-entry.ok { color: var(--ok); }
|
|
356
|
-
.log-entry.err { color: var(--err); }
|
|
357
|
-
|
|
358
|
-
/* (Old .footer / .footer-link / .footer-label rules removed — replaced
|
|
359
|
-
by the canonical .synth-footer block above.) */
|
|
360
|
-
</style>
|
|
361
|
-
</head>
|
|
362
|
-
<body>
|
|
363
|
-
<!-- ── Synthetic shell header (canonical — DO NOT edit per-panel) ── -->
|
|
364
|
-
<a class="synth-header" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
|
|
365
|
-
<img class="synth-header-logo" src="synthetic-logo.png" alt="Synthetic">
|
|
366
|
-
<span class="synth-header-name">Synthetic</span>
|
|
367
|
-
<span class="synth-version-tag">v2.0.0</span>
|
|
368
|
-
</a>
|
|
369
|
-
|
|
370
|
-
<div id="panel-content">
|
|
371
|
-
|
|
372
|
-
<!-- Product strip: Premiere MCP identity in the purple accent. Uses the
|
|
373
|
-
exact lucide Film glyph that the synthetic.com.ar /premiere-mcp page
|
|
374
|
-
renders in the brand strip, so the panel matches the website 1:1.
|
|
375
|
-
#topbar-right sits OUTSIDE the bordered .product card — same layout
|
|
376
|
-
AE Agent uses for its reload/library/settings row. -->
|
|
377
|
-
<div id="topbar" style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
|
|
378
|
-
<div class="product" style="flex:1; margin-bottom:0;">
|
|
379
|
-
<div class="mark">
|
|
380
|
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
381
|
-
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
|
|
382
|
-
<path d="M7 3v18"></path>
|
|
383
|
-
<path d="M3 7.5h4"></path>
|
|
384
|
-
<path d="M3 12h18"></path>
|
|
385
|
-
<path d="M3 16.5h4"></path>
|
|
386
|
-
<path d="M17 3v18"></path>
|
|
387
|
-
<path d="M17 7.5h4"></path>
|
|
388
|
-
<path d="M17 16.5h4"></path>
|
|
389
|
-
</svg>
|
|
390
|
-
</div>
|
|
391
|
-
<div class="product-text">
|
|
392
|
-
<div class="title">Premiere Pro MCP</div>
|
|
393
|
-
<div class="sub">Bridge · 437 tools</div>
|
|
394
|
-
</div>
|
|
395
|
-
<!-- Status dot inside the product block — green = bridge running, grey
|
|
396
|
-
= stopped. Updated alongside #statusDot/#statusText from main.js. -->
|
|
397
|
-
<span id="productStatus" class="product-status" title="Panel ready"></span>
|
|
398
|
-
</div>
|
|
399
|
-
<div id="topbar-right" style="display:flex; gap:2px; flex-shrink:0;">
|
|
400
|
-
<button id="btnReload" onclick="location.reload()" title="Reload panel" class="icon-btn">⟳</button>
|
|
401
|
-
<button id="btnSettingsToggle" onclick="toggleSettings()" title="Settings" class="icon-btn">⚙</button>
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
404
|
-
|
|
405
|
-
<!-- Settings (hidden by default — toggled by the ⚙ button above). Just
|
|
406
|
-
the license key for now: this panel doesn't have AE Agent's full
|
|
407
|
-
Subscription/API Keys/Data settings system, and doesn't need it. -->
|
|
408
|
-
<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);">
|
|
409
|
-
<label for="licenseKeyInput">License key</label>
|
|
410
|
-
<div class="button-row" style="margin-top:0;">
|
|
411
|
-
<input type="text" id="licenseKeyInput" placeholder="Paste your Premiere MCP license key" style="flex:1;">
|
|
412
|
-
</div>
|
|
413
|
-
<div class="button-row">
|
|
414
|
-
<button id="btnSaveLicense" onclick="saveLicenseKey()">Save license</button>
|
|
415
|
-
</div>
|
|
416
|
-
<div id="licenseStatus" class="meta" style="margin: 6px 0 0;"></div>
|
|
417
|
-
</div>
|
|
418
|
-
|
|
419
|
-
<!-- Status -->
|
|
420
|
-
<div class="status-row">
|
|
421
|
-
<div class="status-dot" id="statusDot"></div>
|
|
422
|
-
<span id="statusText">Stopped</span>
|
|
423
|
-
</div>
|
|
424
|
-
<div class="meta">Commands processed: <strong id="cmdCount">0</strong></div>
|
|
425
|
-
|
|
426
|
-
<!-- Update banner (hidden until checkForUpdates() finds a newer version) -->
|
|
427
|
-
<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);">
|
|
428
|
-
<div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px;">
|
|
429
|
-
<span style="font-weight:600; color:#e9d5ff;">Update available</span>
|
|
430
|
-
<span id="updateVersionTag" style="font-family: monospace; font-size: 11px; color:#c084fc;">v? -> v?</span>
|
|
431
|
-
</div>
|
|
432
|
-
<div id="updateNotes" style="font-size: 11px; color:#a8a4c0; margin-bottom: 10px; line-height: 1.4;"></div>
|
|
433
|
-
<div style="display:flex; gap:6px;">
|
|
434
|
-
<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>
|
|
435
|
-
<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>
|
|
436
|
-
<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>
|
|
437
|
-
</div>
|
|
438
|
-
</div>
|
|
439
|
-
|
|
440
|
-
<!-- Temp dir field -->
|
|
441
|
-
<label for="tempDir">Temp directory</label>
|
|
442
|
-
<input type="text" id="tempDir" value="">
|
|
443
|
-
|
|
444
|
-
<!-- Controls -->
|
|
445
|
-
<div class="button-row">
|
|
446
|
-
<button id="btnStart" onclick="startBridge()">Start bridge</button>
|
|
447
|
-
<button id="btnStop" onclick="stopBridge()" disabled>Stop</button>
|
|
448
|
-
<button onclick="saveTempDir()">Save</button>
|
|
449
|
-
</div>
|
|
450
|
-
|
|
451
|
-
<!-- Log -->
|
|
452
|
-
<div class="log-label">
|
|
453
|
-
<span class="l">Activity log</span>
|
|
454
|
-
<span class="r">premiere-mcp-bridge</span>
|
|
455
|
-
</div>
|
|
456
|
-
<div id="log"></div>
|
|
457
|
-
|
|
458
|
-
</div><!-- /#panel-content -->
|
|
459
|
-
|
|
460
|
-
<!-- ── Synthetic shell footer (canonical — DO NOT edit per-panel) ── -->
|
|
461
|
-
<footer class="synth-footer">
|
|
462
|
-
<span class="synth-footer-label">Built by</span>
|
|
463
|
-
<a class="synth-footer-link" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
|
|
464
|
-
<img class="synth-footer-logo" src="synthetic-logo.png" alt="Synthetic">
|
|
465
|
-
<span class="synth-footer-name">Synthetic</span>
|
|
466
|
-
</a>
|
|
467
|
-
</footer>
|
|
468
|
-
|
|
469
|
-
<script src="CSInterface.js"></script>
|
|
470
|
-
<script src="main.js"></script>
|
|
471
|
-
</body>
|
|
472
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Synthetic Premiere MCP</title>
|
|
6
|
+
<style>
|
|
7
|
+
/* -- Synthetic design system applied to the CEP panel ----------------- */
|
|
8
|
+
/* Dark canvas + purple accent (Premiere MCP brand). Element ids match */
|
|
9
|
+
/* main.js exactly so the bridge logic does not change. */
|
|
10
|
+
|
|
11
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--bg: #080809;
|
|
15
|
+
--surface: rgba(24, 24, 27, 0.6);
|
|
16
|
+
--surface-2: rgba(39, 39, 42, 0.7);
|
|
17
|
+
--border: rgba(63, 63, 70, 0.6);
|
|
18
|
+
--border-soft: rgba(63, 63, 70, 0.35);
|
|
19
|
+
--text: #f4f4f5;
|
|
20
|
+
--text-mute: #a1a1aa;
|
|
21
|
+
--text-dim: #71717a;
|
|
22
|
+
--text-faint: #52525b;
|
|
23
|
+
|
|
24
|
+
--accent: #a855f7; /* purple-500 — Premiere MCP brand */
|
|
25
|
+
--accent-hover: #9333ea; /* purple-600 */
|
|
26
|
+
--accent-soft-bg: rgba(168, 85, 247, 0.12);
|
|
27
|
+
--accent-soft-border: rgba(168, 85, 247, 0.30);
|
|
28
|
+
|
|
29
|
+
--ok: #4ade80; /* green-400 */
|
|
30
|
+
--warn: #fbbf24; /* amber-400 */
|
|
31
|
+
--err: #f87171; /* red-400 */
|
|
32
|
+
--info: #93c5fd; /* blue-300 */
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
html, body { height: 100%; }
|
|
36
|
+
/* Body is a flex column so .synth-footer (margin-top:auto) pins to the
|
|
37
|
+
very bottom. The .synth-header/.synth-footer span edge-to-edge, so
|
|
38
|
+
body padding is 0; the panel content lives inside #panel-content with
|
|
39
|
+
its own padding. */
|
|
40
|
+
body {
|
|
41
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
|
|
42
|
+
background: var(--bg);
|
|
43
|
+
color: var(--text);
|
|
44
|
+
font-size: 12px;
|
|
45
|
+
letter-spacing: -0.005em;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
min-height: 100vh;
|
|
49
|
+
margin: 0;
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
}
|
|
52
|
+
#panel-content {
|
|
53
|
+
flex: 1;
|
|
54
|
+
padding: 16px;
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* ─── Synthetic shell — canonical (see synthetic/docs/DESIGN_SYSTEM.md)
|
|
60
|
+
Do NOT edit per-panel. Edit the canonical block in DESIGN_SYSTEM.md
|
|
61
|
+
then copy-paste verbatim. */
|
|
62
|
+
:root {
|
|
63
|
+
--shell-accent: #a855f7; /* purple-500 */
|
|
64
|
+
--shell-accent-dim: rgba(168, 85, 247, 0.12);
|
|
65
|
+
}
|
|
66
|
+
.synth-header,
|
|
67
|
+
.synth-footer {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
gap: 8px;
|
|
72
|
+
padding: 8px 14px;
|
|
73
|
+
flex-shrink: 0;
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
color: inherit;
|
|
76
|
+
font-family: inherit;
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
}
|
|
79
|
+
.synth-header {
|
|
80
|
+
background: rgba(24, 24, 27, 0.5);
|
|
81
|
+
border-bottom: 1px solid rgba(63, 63, 70, 0.35);
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
transition: background-color 120ms ease;
|
|
84
|
+
}
|
|
85
|
+
.synth-header:hover { background: rgba(24, 24, 27, 0.7); }
|
|
86
|
+
.synth-header:active { background: rgba(24, 24, 27, 0.85); }
|
|
87
|
+
.synth-header-logo { width: 9px; height: 15px; object-fit: contain; flex-shrink: 0; }
|
|
88
|
+
.synth-header-name {
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
font-size: 12.5px;
|
|
91
|
+
letter-spacing: -0.01em;
|
|
92
|
+
color: #f4f4f5;
|
|
93
|
+
}
|
|
94
|
+
.synth-version-tag {
|
|
95
|
+
display: inline-flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
padding: 2px 8px;
|
|
98
|
+
border-radius: 999px;
|
|
99
|
+
background: var(--shell-accent-dim);
|
|
100
|
+
border: 1px solid var(--shell-accent);
|
|
101
|
+
font-size: 9px;
|
|
102
|
+
font-weight: 700;
|
|
103
|
+
color: var(--shell-accent);
|
|
104
|
+
letter-spacing: 0.3px;
|
|
105
|
+
text-transform: uppercase;
|
|
106
|
+
}
|
|
107
|
+
.synth-footer {
|
|
108
|
+
margin-top: auto;
|
|
109
|
+
background: rgba(24, 24, 27, 0.5);
|
|
110
|
+
border-top: 1px solid rgba(63, 63, 70, 0.35);
|
|
111
|
+
gap: 6px;
|
|
112
|
+
font-size: 10px;
|
|
113
|
+
letter-spacing: 0.04em;
|
|
114
|
+
text-transform: uppercase;
|
|
115
|
+
color: #71717a;
|
|
116
|
+
}
|
|
117
|
+
.synth-footer-label { color: #71717a; }
|
|
118
|
+
.synth-footer-link {
|
|
119
|
+
display: inline-flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
gap: 6px;
|
|
122
|
+
padding: 3px 8px;
|
|
123
|
+
border-radius: 999px;
|
|
124
|
+
text-decoration: none;
|
|
125
|
+
color: inherit;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
transition: background-color 120ms ease;
|
|
128
|
+
}
|
|
129
|
+
.synth-footer-link:hover { background: rgba(255, 255, 255, 0.06); }
|
|
130
|
+
.synth-footer-link:active { background: rgba(255, 255, 255, 0.10); }
|
|
131
|
+
.synth-footer-logo { width: 9px; height: 15px; object-fit: contain; }
|
|
132
|
+
.synth-footer-name {
|
|
133
|
+
color: #a1a1aa;
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
text-transform: none;
|
|
136
|
+
letter-spacing: -0.005em;
|
|
137
|
+
font-size: 11px;
|
|
138
|
+
}
|
|
139
|
+
.synth-footer-link:hover .synth-footer-name { color: #f4f4f5; }
|
|
140
|
+
/* ─── End Synthetic shell ───────────────────────────────────────────── */
|
|
141
|
+
|
|
142
|
+
/* (Old .header / .version-tag / a.header-link rules removed — replaced
|
|
143
|
+
by the canonical .synth-header block above.) */
|
|
144
|
+
|
|
145
|
+
/* -- Hero: product title strip ----------------------------------------- */
|
|
146
|
+
.product {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
gap: 10px;
|
|
150
|
+
background: linear-gradient(135deg, rgba(88, 28, 135, 0.18), rgba(24, 24, 27, 0.2) 60%, rgba(24, 24, 27, 0.05));
|
|
151
|
+
border: 1px solid var(--accent-soft-border);
|
|
152
|
+
border-radius: 12px;
|
|
153
|
+
padding: 10px 12px;
|
|
154
|
+
margin-bottom: 14px;
|
|
155
|
+
}
|
|
156
|
+
.product .mark {
|
|
157
|
+
width: 30px; height: 30px;
|
|
158
|
+
border-radius: 8px;
|
|
159
|
+
background: var(--accent-soft-bg);
|
|
160
|
+
border: 1px solid var(--accent-soft-border);
|
|
161
|
+
display: flex; align-items: center; justify-content: center;
|
|
162
|
+
color: var(--accent);
|
|
163
|
+
flex-shrink: 0;
|
|
164
|
+
}
|
|
165
|
+
.product .mark svg { width: 16px; height: 16px; }
|
|
166
|
+
.product-text { min-width: 0; flex: 1; }
|
|
167
|
+
.product .title { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
|
|
168
|
+
.product .sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
|
|
169
|
+
/* Status dot inside the product block — grey by default, turns green
|
|
170
|
+
with a soft halo when the bridge is running (see main.js init). */
|
|
171
|
+
.product-status {
|
|
172
|
+
width: 8px;
|
|
173
|
+
height: 8px;
|
|
174
|
+
border-radius: 50%;
|
|
175
|
+
flex-shrink: 0;
|
|
176
|
+
background: var(--text-faint);
|
|
177
|
+
transition: background 120ms ease, box-shadow 120ms ease;
|
|
178
|
+
}
|
|
179
|
+
.product-status.ok {
|
|
180
|
+
background: var(--ok);
|
|
181
|
+
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
|
|
182
|
+
}
|
|
183
|
+
.product-status.warn {
|
|
184
|
+
background: var(--warn);
|
|
185
|
+
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
|
|
186
|
+
}
|
|
187
|
+
.product-status.err {
|
|
188
|
+
background: var(--err);
|
|
189
|
+
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
|
|
190
|
+
}
|
|
191
|
+
/* Reload/settings buttons — sit outside the .product card in #topbar-right,
|
|
192
|
+
same layout as AE Agent's icon row. */
|
|
193
|
+
.icon-btn {
|
|
194
|
+
background: none;
|
|
195
|
+
border: none;
|
|
196
|
+
color: var(--text-dim);
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
padding: 5px 6px;
|
|
199
|
+
border-radius: 6px;
|
|
200
|
+
font-size: 13px;
|
|
201
|
+
line-height: 1;
|
|
202
|
+
transition: color 0.15s, background 0.15s;
|
|
203
|
+
}
|
|
204
|
+
.icon-btn:hover {
|
|
205
|
+
color: var(--text);
|
|
206
|
+
background: rgba(255,255,255,0.06);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* -- Status row -------------------------------------------------------- */
|
|
210
|
+
.status-row {
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
gap: 8px;
|
|
214
|
+
font-size: 11.5px;
|
|
215
|
+
color: var(--text-mute);
|
|
216
|
+
margin-bottom: 4px;
|
|
217
|
+
}
|
|
218
|
+
.status-dot {
|
|
219
|
+
width: 8px; height: 8px;
|
|
220
|
+
border-radius: 50%;
|
|
221
|
+
background: var(--text-faint);
|
|
222
|
+
box-shadow: 0 0 0 0 transparent;
|
|
223
|
+
flex-shrink: 0;
|
|
224
|
+
}
|
|
225
|
+
.status-dot.connected {
|
|
226
|
+
background: var(--ok);
|
|
227
|
+
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
|
|
228
|
+
}
|
|
229
|
+
.status-dot.warning {
|
|
230
|
+
background: var(--warn);
|
|
231
|
+
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
|
|
232
|
+
}
|
|
233
|
+
.status-dot.error {
|
|
234
|
+
background: var(--err);
|
|
235
|
+
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
|
|
236
|
+
}
|
|
237
|
+
.status-dot.waiting {
|
|
238
|
+
background: var(--info);
|
|
239
|
+
box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15);
|
|
240
|
+
}
|
|
241
|
+
#statusText { color: var(--text); font-weight: 500; }
|
|
242
|
+
|
|
243
|
+
.meta {
|
|
244
|
+
font-size: 10.5px;
|
|
245
|
+
color: var(--text-dim);
|
|
246
|
+
margin: 8px 0 14px;
|
|
247
|
+
}
|
|
248
|
+
.meta strong { color: var(--text); font-weight: 600; }
|
|
249
|
+
|
|
250
|
+
/* -- Form -------------------------------------------------------------- */
|
|
251
|
+
label {
|
|
252
|
+
display: block;
|
|
253
|
+
font-size: 10px;
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
letter-spacing: 0.04em;
|
|
256
|
+
text-transform: uppercase;
|
|
257
|
+
color: var(--text-dim);
|
|
258
|
+
margin: 12px 0 6px;
|
|
259
|
+
}
|
|
260
|
+
input[type="text"] {
|
|
261
|
+
width: 100%;
|
|
262
|
+
padding: 8px 10px;
|
|
263
|
+
background: var(--surface);
|
|
264
|
+
border: 1px solid var(--border);
|
|
265
|
+
color: var(--text);
|
|
266
|
+
border-radius: 8px;
|
|
267
|
+
font-size: 11.5px;
|
|
268
|
+
font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
|
|
269
|
+
outline: none;
|
|
270
|
+
transition: border-color 120ms ease;
|
|
271
|
+
}
|
|
272
|
+
input[type="text"]:focus {
|
|
273
|
+
border-color: var(--accent);
|
|
274
|
+
background: var(--surface-2);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* -- Buttons (Synthetic primary / secondary) --------------------------- */
|
|
278
|
+
.button-row {
|
|
279
|
+
display: flex;
|
|
280
|
+
gap: 6px;
|
|
281
|
+
margin-top: 12px;
|
|
282
|
+
}
|
|
283
|
+
button {
|
|
284
|
+
flex: 1;
|
|
285
|
+
padding: 8px 10px;
|
|
286
|
+
border: 1px solid transparent;
|
|
287
|
+
border-radius: 8px;
|
|
288
|
+
cursor: pointer;
|
|
289
|
+
font-size: 11.5px;
|
|
290
|
+
font-weight: 600;
|
|
291
|
+
font-family: inherit;
|
|
292
|
+
letter-spacing: -0.005em;
|
|
293
|
+
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
|
|
294
|
+
}
|
|
295
|
+
button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
296
|
+
|
|
297
|
+
/* Primary (Start) */
|
|
298
|
+
#btnStart {
|
|
299
|
+
background: var(--accent);
|
|
300
|
+
color: #fff;
|
|
301
|
+
}
|
|
302
|
+
#btnStart:hover:not(:disabled) { background: var(--accent-hover); }
|
|
303
|
+
|
|
304
|
+
/* Secondary (Stop, Save) */
|
|
305
|
+
#btnStop, button:not(#btnStart) {
|
|
306
|
+
background: var(--surface);
|
|
307
|
+
color: var(--text);
|
|
308
|
+
border-color: var(--border);
|
|
309
|
+
}
|
|
310
|
+
#btnStop:hover:not(:disabled),
|
|
311
|
+
button:not(#btnStart):hover:not(:disabled) {
|
|
312
|
+
background: var(--surface-2);
|
|
313
|
+
border-color: var(--text-faint);
|
|
314
|
+
}
|
|
315
|
+
#btnStop {
|
|
316
|
+
color: var(--err);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
/* -- Terminal log ------------------------------------------------------ */
|
|
320
|
+
.log-label {
|
|
321
|
+
display: flex;
|
|
322
|
+
align-items: center;
|
|
323
|
+
justify-content: space-between;
|
|
324
|
+
margin: 14px 0 6px;
|
|
325
|
+
}
|
|
326
|
+
.log-label .l {
|
|
327
|
+
font-size: 10px;
|
|
328
|
+
font-weight: 600;
|
|
329
|
+
letter-spacing: 0.04em;
|
|
330
|
+
text-transform: uppercase;
|
|
331
|
+
color: var(--text-dim);
|
|
332
|
+
}
|
|
333
|
+
.log-label .r {
|
|
334
|
+
font-size: 10px;
|
|
335
|
+
color: var(--text-faint);
|
|
336
|
+
font-family: "Cascadia Code", ui-monospace, monospace;
|
|
337
|
+
}
|
|
338
|
+
#log {
|
|
339
|
+
background: rgba(0, 0, 0, 0.45);
|
|
340
|
+
border: 1px solid var(--border);
|
|
341
|
+
border-radius: 8px;
|
|
342
|
+
padding: 10px;
|
|
343
|
+
max-height: 180px;
|
|
344
|
+
overflow-y: auto;
|
|
345
|
+
font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace;
|
|
346
|
+
font-size: 10.5px;
|
|
347
|
+
line-height: 1.65;
|
|
348
|
+
}
|
|
349
|
+
#log::-webkit-scrollbar { width: 8px; }
|
|
350
|
+
#log::-webkit-scrollbar-track { background: transparent; }
|
|
351
|
+
#log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
|
352
|
+
#log::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
|
|
353
|
+
.log-entry { color: var(--text-mute); }
|
|
354
|
+
.log-entry.cmd { color: var(--info); }
|
|
355
|
+
.log-entry.ok { color: var(--ok); }
|
|
356
|
+
.log-entry.err { color: var(--err); }
|
|
357
|
+
|
|
358
|
+
/* (Old .footer / .footer-link / .footer-label rules removed — replaced
|
|
359
|
+
by the canonical .synth-footer block above.) */
|
|
360
|
+
</style>
|
|
361
|
+
</head>
|
|
362
|
+
<body>
|
|
363
|
+
<!-- ── Synthetic shell header (canonical — DO NOT edit per-panel) ── -->
|
|
364
|
+
<a class="synth-header" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
|
|
365
|
+
<img class="synth-header-logo" src="synthetic-logo.png" alt="Synthetic">
|
|
366
|
+
<span class="synth-header-name">Synthetic</span>
|
|
367
|
+
<span class="synth-version-tag" id="synthHeaderVersion">v2.0.0</span>
|
|
368
|
+
</a>
|
|
369
|
+
|
|
370
|
+
<div id="panel-content">
|
|
371
|
+
|
|
372
|
+
<!-- Product strip: Premiere MCP identity in the purple accent. Uses the
|
|
373
|
+
exact lucide Film glyph that the synthetic.com.ar /premiere-mcp page
|
|
374
|
+
renders in the brand strip, so the panel matches the website 1:1.
|
|
375
|
+
#topbar-right sits OUTSIDE the bordered .product card — same layout
|
|
376
|
+
AE Agent uses for its reload/library/settings row. -->
|
|
377
|
+
<div id="topbar" style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
|
|
378
|
+
<div class="product" style="flex:1; margin-bottom:0;">
|
|
379
|
+
<div class="mark">
|
|
380
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
381
|
+
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
|
|
382
|
+
<path d="M7 3v18"></path>
|
|
383
|
+
<path d="M3 7.5h4"></path>
|
|
384
|
+
<path d="M3 12h18"></path>
|
|
385
|
+
<path d="M3 16.5h4"></path>
|
|
386
|
+
<path d="M17 3v18"></path>
|
|
387
|
+
<path d="M17 7.5h4"></path>
|
|
388
|
+
<path d="M17 16.5h4"></path>
|
|
389
|
+
</svg>
|
|
390
|
+
</div>
|
|
391
|
+
<div class="product-text">
|
|
392
|
+
<div class="title">Premiere Pro MCP</div>
|
|
393
|
+
<div class="sub">Bridge · 437 tools</div>
|
|
394
|
+
</div>
|
|
395
|
+
<!-- Status dot inside the product block — green = bridge running, grey
|
|
396
|
+
= stopped. Updated alongside #statusDot/#statusText from main.js. -->
|
|
397
|
+
<span id="productStatus" class="product-status" title="Panel ready"></span>
|
|
398
|
+
</div>
|
|
399
|
+
<div id="topbar-right" style="display:flex; gap:2px; flex-shrink:0;">
|
|
400
|
+
<button id="btnReload" onclick="location.reload()" title="Reload panel" class="icon-btn">⟳</button>
|
|
401
|
+
<button id="btnSettingsToggle" onclick="toggleSettings()" title="Settings" class="icon-btn">⚙</button>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<!-- Settings (hidden by default — toggled by the ⚙ button above). Just
|
|
406
|
+
the license key for now: this panel doesn't have AE Agent's full
|
|
407
|
+
Subscription/API Keys/Data settings system, and doesn't need it. -->
|
|
408
|
+
<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);">
|
|
409
|
+
<label for="licenseKeyInput">License key</label>
|
|
410
|
+
<div class="button-row" style="margin-top:0;">
|
|
411
|
+
<input type="text" id="licenseKeyInput" placeholder="Paste your Premiere MCP license key" style="flex:1;">
|
|
412
|
+
</div>
|
|
413
|
+
<div class="button-row">
|
|
414
|
+
<button id="btnSaveLicense" onclick="saveLicenseKey()">Save license</button>
|
|
415
|
+
</div>
|
|
416
|
+
<div id="licenseStatus" class="meta" style="margin: 6px 0 0;"></div>
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
<!-- Status -->
|
|
420
|
+
<div class="status-row">
|
|
421
|
+
<div class="status-dot" id="statusDot"></div>
|
|
422
|
+
<span id="statusText">Stopped</span>
|
|
423
|
+
</div>
|
|
424
|
+
<div class="meta">Commands processed: <strong id="cmdCount">0</strong></div>
|
|
425
|
+
|
|
426
|
+
<!-- Update banner (hidden until checkForUpdates() finds a newer version) -->
|
|
427
|
+
<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);">
|
|
428
|
+
<div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px;">
|
|
429
|
+
<span style="font-weight:600; color:#e9d5ff;">Update available</span>
|
|
430
|
+
<span id="updateVersionTag" style="font-family: monospace; font-size: 11px; color:#c084fc;">v? -> v?</span>
|
|
431
|
+
</div>
|
|
432
|
+
<div id="updateNotes" style="font-size: 11px; color:#a8a4c0; margin-bottom: 10px; line-height: 1.4;"></div>
|
|
433
|
+
<div style="display:flex; gap:6px;">
|
|
434
|
+
<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>
|
|
435
|
+
<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>
|
|
436
|
+
<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>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<!-- Temp dir field -->
|
|
441
|
+
<label for="tempDir">Temp directory</label>
|
|
442
|
+
<input type="text" id="tempDir" value="">
|
|
443
|
+
|
|
444
|
+
<!-- Controls -->
|
|
445
|
+
<div class="button-row">
|
|
446
|
+
<button id="btnStart" onclick="startBridge()">Start bridge</button>
|
|
447
|
+
<button id="btnStop" onclick="stopBridge()" disabled>Stop</button>
|
|
448
|
+
<button onclick="saveTempDir()">Save</button>
|
|
449
|
+
</div>
|
|
450
|
+
|
|
451
|
+
<!-- Log -->
|
|
452
|
+
<div class="log-label">
|
|
453
|
+
<span class="l">Activity log</span>
|
|
454
|
+
<span class="r">premiere-mcp-bridge</span>
|
|
455
|
+
</div>
|
|
456
|
+
<div id="log"></div>
|
|
457
|
+
|
|
458
|
+
</div><!-- /#panel-content -->
|
|
459
|
+
|
|
460
|
+
<!-- ── Synthetic shell footer (canonical — DO NOT edit per-panel) ── -->
|
|
461
|
+
<footer class="synth-footer">
|
|
462
|
+
<span class="synth-footer-label">Built by</span>
|
|
463
|
+
<a class="synth-footer-link" data-href="https://synthetic.com.ar" href="#" title="Open synthetic.com.ar">
|
|
464
|
+
<img class="synth-footer-logo" src="synthetic-logo.png" alt="Synthetic">
|
|
465
|
+
<span class="synth-footer-name">Synthetic</span>
|
|
466
|
+
</a>
|
|
467
|
+
</footer>
|
|
468
|
+
|
|
469
|
+
<script src="CSInterface.js"></script>
|
|
470
|
+
<script src="main.js"></script>
|
|
471
|
+
</body>
|
|
472
|
+
</html>
|