premiere-pro-mcp 1.1.5 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,96 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [Unreleased]
+
+### Added
+
+- Added `npm run publish:npm`, `npm run publish:npm:dry-run`, and a manual GitHub Actions npm
+  publish workflow that validates builds, tests, packed files, duplicate versions, and uses
+  token-free OIDC trusted publishing with automatic provenance.
+
+## [1.2.1] - 2026-07-21
+
+### Added
+
+- Added `get_capabilities` for machine-readable Windows/macOS runtime, CEP/UXP backend,
+  authority-profile, and live-host verification reporting.
+- Added GitHub Actions build, test, and package validation on Windows and macOS with Node 18 and 22.
+
+### Fixed
+
+- Audio-level writes now convert dB to Premiere's amplitude value and verify the applied value.
+- Audio keyframes now use Premiere `Time` objects and verify each written value.
+- Ripple delete, razor, and native transition tools now verify host state and return actionable
+  errors instead of false success on affected Premiere Pro 26.3 installations. ([#21](https://github.com/leancoderkavy/premiere-pro-mcp/issues/21))
+- Capability profiles now enforce `inspect` and `edit` across the complete tool surface and treat
+  expression evaluation as unsafe scripting instead of allowing unclassified tools through.
+- The npm CLI now copies the CEP plugin on macOS, verifies installation metadata, rejects unsupported
+  host operating systems, and avoids platform-specific `/tmp` configuration in cross-platform examples.
+
+### Performance
+
+- Prefer event-driven bridge response notification with a conservative polling fallback, reducing
+  idle filesystem checks while preserving compatibility with filesystems where watching is
+  unavailable or unreliable.
+- Cache immutable tool catalogs and converted Zod schemas across stateless HTTP server instances.
+  A local 100-iteration benchmark reduced average repeated server construction from 5.87 ms to
+  2.21 ms (62.4%).
+
+## [1.2.0] - 2026-07-20
+
+### Added
+
+- Added preview/apply edit plans with strict operation validation, SHA-256 confirmation binding,
+  operation IDs, and structured audit events.
+- Added capability profiles. Raw ExtendScript tools now require explicit `unsafe-script` authority.
+- Added structured MCP tool results, safety annotations, four guided workflow prompts, and the
+  `config://premiere-workflows` resource.
+- Added a packaged Premiere 25.6+ UXP bridge preview with capability discovery, state-change
+  events, reconnecting WebSocket transport, and supported frame export with file verification.
+
+### Validation
+
+- TypeScript build passes, all 333 automated tests pass in a single-worker run, and the npm dry-run
+  package contains both CEP and UXP bundles. Live Premiere verification of the UXP host API and
+  loopback transport remains outstanding.
+
+## [1.1.7] - 2026-07-20
+
+### Changed
+
+- Redesigned the Premiere Pro CEP bridge panel with clearer connection status, responsive
+  controls, improved directory configuration, and a larger live activity monitor.
+- Added accessible labels, focus states, reduced-motion support, and consistent status details
+  without changing the bridge command workflow.
+
+### Validation
+
+- TypeScript build and 315 automated tests pass. The panel was also rendered at a 500 x 700 CEP
+  viewport and visually checked against the approved design concept.
+
+## [1.1.6] - 2026-07-20
+
+### Fixed
+
+- **Frame capture's Media Encoder fallback now exports exactly one frame.** The fallback passed
+  tick values to sequence in/out methods that require seconds, producing an invalid export range
+  when the undocumented QE frame-export method wrote no file. The range and its saved state are
+  now converted to seconds. ([#9](https://github.com/leancoderkavy/premiere-pro-mcp/issues/9))
+
+- **Windows CEP installation now enables unsigned-extension discovery correctly.** The CLI uses a
+  native PowerShell installer on Windows and creates `PlayerDebugMode` as the `REG_SZ` value Adobe
+  requires. Previous instructions incorrectly specified a DWORD, and the Bash installer never
+  enabled Windows debug mode. ([#14](https://github.com/leancoderkavy/premiere-pro-mcp/issues/14))
+
+- CEP bundle and extension versions now match the npm package version, with regression coverage to
+  prevent future drift.
+
+### Validation
+
+- TypeScript build and 315 automated tests pass. The corrected Premiere runtime paths still require
+  live confirmation on a machine with Premiere Pro installed.
+
 ## [1.1.2] - 2026-07-11
 
 The headline of this release is that the CEP 12 bridge fix from

package/README.md

@@ -4,14 +4,14 @@
 
 **Give AI full control over Adobe Premiere Pro.**
 
-269 tools across 28 modules — the most comprehensive MCP server for video editing.
+269 tools across 29 modules, 3 resources, and 4 guided workflows.
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org)
 [![MCP](https://img.shields.io/badge/MCP-1.27-purple.svg)](https://modelcontextprotocol.io)
 [![npm](https://img.shields.io/npm/v/premiere-pro-mcp.svg)](https://www.npmjs.com/package/premiere-pro-mcp)
 [![Fly.io](https://img.shields.io/badge/Fly.io-deployed-7C3AED.svg)](https://premiere-pro-mcp.fly.dev)
-[![Premiere Pro](https://img.shields.io/badge/Premiere%20Pro-2020--2025%2B-9999FF.svg)](https://www.adobe.com/products/premiere.html)
+[![Premiere Pro](https://img.shields.io/badge/Premiere%20Pro-2020--2026-9999FF.svg)](https://www.adobe.com/products/premiere.html)
 
 </div>
 
@@ -25,7 +25,21 @@ An [MCP (Model Context Protocol)](https://modelcontextprotocol.io) server that l
 "Add the B-roll clips to V2, apply a cross dissolve between each, color correct them to match the A-roll, and export a 1080p ProRes."
 ```
 
-The AI handles the entire workflow through 269 tools that cover nearly every ExtendScript and QE DOM API available in Premiere Pro.
+The AI handles the entire workflow through 269 tools spanning the supported ExtendScript, QE DOM, and safe edit-planning surfaces.
+
+### What's new in 1.2.1
+
+- Mutation tools now verify Premiere state, audio dB is converted to amplitude correctly, and
+  affected Premiere Pro 26.3 hosts return actionable errors instead of false success.
+- npm publishing now has a guided local helper and a GitHub Actions workflow so releases can be
+  published without repeating manual auth and validation steps.
+
+### Added in 1.2.0
+
+- **Safe edit plans:** preview compound insert/remove operations, bind approval to a SHA-256 plan token, then apply the validated plan in one bridge command.
+- **Capability profiles:** unsafe scripting is disabled by default and requires explicit `unsafe-script` authority.
+- **Modern MCP responses:** tools expose safety annotations and structured results; four workflow prompts and a machine-readable workflow resource guide common edits.
+- **UXP bridge preview:** a packaged Premiere 25.6+ panel adds capability discovery, state events, reconnecting WebSocket transport, and supported frame export with file verification. Live host verification is still required.
 
 ---
 
@@ -62,7 +76,36 @@ premiere-pro-mcp --install-cep
 npm run install-cep
 ```
 
-This symlinks the plugin into Premiere Pro's extensions folder and enables debug mode.
+This installs the plugin into Premiere Pro's per-user extensions folder and enables debug mode.
+
+---
+
+## Publishing to npm
+
+The easiest repeatable path is the token-free GitHub Actions workflow:
+
+1. In the npm package settings, configure GitHub Actions as the trusted publisher for
+   `leancoderkavy/premiere-pro-mcp` and workflow file `npm-publish.yml`.
+2. Allow the `npm publish` action.
+3. Open **Actions -> Publish npm -> Run workflow** and keep the default `latest` tag.
+
+The workflow installs dependencies, builds, runs tests, verifies the packed files, refuses to
+republish an existing version, then publishes through short-lived OIDC credentials with automatic
+provenance. No npm token or recurring OTP is required.
+
+For local publishing, use the guided helper:
+
+```bash
+npm run publish:npm
+```
+
+Useful local variants:
+
+```bash
+npm run publish:npm:dry-run
+NPM_OTP=123456 npm run publish:npm
+NPM_TOKEN=npm_xxx npm run publish:npm
+```
 
 <details>
 <summary>Manual installation (macOS)</summary>
@@ -83,7 +126,7 @@ done
 <summary>Manual installation (Windows)</summary>
 
 1. Copy the `cep-plugin` folder to `%APPDATA%\Adobe\CEP\extensions\MCPBridgeCEP`
-2. Open Registry Editor and set these DWORD values to `1`:
+2. Open Registry Editor and set these **String (`REG_SZ`)** values to `1` (not DWORD):
    - `HKEY_CURRENT_USER\Software\Adobe\CSXS.12\PlayerDebugMode`
    - (repeat for CSXS.9 through CSXS.14)
 
@@ -101,10 +144,7 @@ Edit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) o
   "mcpServers": {
     "premiere-pro": {
       "command": "node",
-      "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"],
-      "env": {
-        "PREMIERE_TEMP_DIR": "/tmp/premiere-mcp-bridge"
-      }
+      "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"]
     }
   }
 }
@@ -121,10 +161,7 @@ Add to your MCP server configuration:
 {
   "premiere-pro": {
     "command": "node",
-    "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"],
-    "env": {
-      "PREMIERE_TEMP_DIR": "/tmp/premiere-mcp-bridge"
-    }
+    "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"]
   }
 }
 ```
@@ -141,10 +178,7 @@ Add to `.cursor/mcp.json` in your project or global config:
   "mcpServers": {
     "premiere-pro": {
       "command": "node",
-      "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"],
-      "env": {
-        "PREMIERE_TEMP_DIR": "/tmp/premiere-mcp-bridge"
-      }
+      "args": ["/absolute/path/to/premiere-pro-mcp/dist/index.js"]
     }
   }
 }
@@ -152,13 +186,25 @@ Add to `.cursor/mcp.json` in your project or global config:
 
 </details>
 
-### 4. Start the bridge in Premiere Pro
+### 4. Verify the bridge in Premiere Pro
 
 1. Open (or restart) Premiere Pro
-2. Go to **Window > Extensions > MCP Bridge**
-3. Set the **Temp Directory** to match your MCP client config (e.g., `/tmp/premiere-mcp-bridge`)
-4. Click **Start Bridge** — you should see a green "Running" status
-5. Ask your AI assistant: *"What's my current Premiere Pro project?"*
+2. The bridge starts automatically using the default temp directory (or its previously saved setting)
+3. Optionally go to **Window > Extensions > MCP Bridge** to confirm the green "Running" status or change the **Temp Directory** to match your MCP client config
+4. Ask your AI assistant: *"What's my current Premiere Pro project?"*
+
+The default bridge directory is derived from the operating system on both sides, so most local setups should not set `PREMIERE_TEMP_DIR`. If you override it, use the same absolute path in the MCP server and CEP panel; Windows and macOS paths are not interchangeable.
+
+### Windows and macOS capability coverage
+
+| Surface | Windows | macOS | Verification boundary |
+|---|---|---|---|
+| CEP production bridge | Premiere Pro 2020–2026 | Premiere Pro 2020–2026 | Run `get_capabilities`, then `ping` with Premiere open |
+| UXP preview bridge | Premiere Pro 25.6+ | Premiere Pro 25.6+ | Live loopback WebSocket and host API verification required |
+| npm CEP installer | Copies plugin and verifies `REG_SZ` debug keys | Copies plugin and verifies the installed manifest/debug settings | Restart Premiere after installation |
+| CI build and unit tests | Node 18 and 22 | Node 18 and 22 | GitHub-hosted OS runners; no Adobe host is available in CI |
+
+`get_capabilities` reports the current operating system, temp directory, CEP/UXP coverage, enabled authority profile, and any live-host verification still required. It does not claim a Premiere operation succeeded; use `ping` and inspect each tool result for runtime evidence.
 
 ---
 
@@ -199,7 +245,7 @@ The file-based IPC bridge is simple, reliable, and works across macOS and Window
 
 ---
 
-## Tools (269)
+## Tools (268)
 
 ### Discovery & Inspection (10 + 10)
 
@@ -242,6 +288,14 @@ The file-based IPC bridge is simple, reliable, and works across macOS and Window
 | `set_clip_properties` | Opacity, scale, rotation, position |
 | `link_selection` / `unlink_selection` | Link/unlink A/V |
 
+> **Premiere Pro 26.3 compatibility:** some installations silently ignore QE structural edits
+> (`ripple_delete`, razor/split) and existing effect-parameter writes. These tools now verify
+> the resulting sequence state and return an error instead of a false success. For structural
+> edits, rebuild the wanted source ranges into a new sequence with `create_sequence` and
+> `add_to_timeline`. Native transitions are unavailable when the host does not expose
+> `qeTrack.addTransition`; overlay clips remain a workaround for transitions that do not need
+> to blend adjacent source frames. See [issue #21](https://github.com/leancoderkavy/premiere-pro-mcp/issues/21).
+
 ### Effects & Color (8)
 
 | Tool | Description |
@@ -304,7 +358,7 @@ The file-based IPC bridge is simple, reliable, and works across macOS and Window
 
 | Tool | Description |
 |------|-------------|
-| `create_sequence` / `create_sequence_from_preset` | Create sequences |
+| `create_sequence` / `create_sequence_from_preset` | Create sequences from `.sqpreset` files without opening Premiere's modal dialog |
 | `duplicate_sequence` / `delete_sequence` | Manage sequences |
 | `auto_reframe_sequence` | Auto-reframe for social media |
 | `attach_custom_property` | FCP XML custom properties |
@@ -333,12 +387,13 @@ Track targeting, batch operations, markers, audio levels, motion/transform, meta
 
 ## MCP Resources
 
-The server exposes two LLM context resources:
+The server exposes three LLM context resources and four workflow prompts:
 
 | Resource URI | Description |
 |-------------|-------------|
 | `config://premiere-instructions` | Best practices: workflow order, timeline rules, effect tips, error handling |
 | `config://extendscript-reference` | Complete ExtendScript API reference for writing custom scripts |
+| `config://premiere-workflows` | Machine-readable catalog for rough cuts, dialogue cleanup, captions, and delivery |
 
 These are automatically available to MCP clients that support resources, giving the AI deep context about how to drive Premiere Pro effectively.
 
@@ -370,10 +425,9 @@ A live instance is running at **https://premiere-pro-mcp.fly.dev**.
 git clone https://github.com/ppmcp/premiere-pro-mcp.git
 cd premiere-pro-mcp
 fly apps create your-app-name
-fly deploy --remote-only
-
-# Optional: add bearer token auth
+# Required: add bearer token auth
 fly secrets set MCP_AUTH_TOKEN=your-secret-token
+fly deploy --remote-only
 ```
 
 Then connect with:
@@ -399,8 +453,11 @@ Then connect with:
 |----------|-------------|--------|
 | `PREMIERE_TEMP_DIR` | Shared temp directory for MCP ↔ CEP communication | OS temp dir + `/premiere-mcp-bridge` |
 | `PREMIERE_TIMEOUT_MS` | Command timeout in milliseconds | `30000` |
+| `PREMIERE_DEFAULT_SEQUENCE_PRESET` | Override the auto-discovered `.sqpreset` used by `create_sequence` | auto-discovered |
+| `PREMIERE_MCP_CAPABILITIES` | Comma-separated authority profile; add `unsafe-script` only when raw scripting is required | `inspect,edit,export,filesystem` |
 | `PORT` | HTTP port (HTTP/SSE transport only) | `3000` |
-| `MCP_AUTH_TOKEN` | Bearer token for HTTP transport auth (optional) | unset |
+| `MCP_AUTH_TOKEN` | Bearer token required by the HTTP transport | unset |
+| `ALLOW_UNAUTHENTICATED` | Set to `1` to run HTTP without auth (unsafe; throwaway instances only) | unset |
 
 ---
 
@@ -411,7 +468,7 @@ premiere-pro-mcp/
 ├── src/
 │   ├── index.ts                 # Entry point — stdio transport setup
 │   ├── http-server.ts           # Entry point — HTTP/SSE transport (Fly.io / remote)
-│   ├── server.ts                # MCP server — registers all 269 tools + 2 resources
+│   ├── server.ts                # MCP server — registers 268 tools + 3 resources + 4 prompts
 │   ├── bridge/
 │   │   ├── file-bridge.ts       # File-based IPC (write .jsx, poll .json)
 │   │   └── script-builder.ts    # ExtendScript generator with ES3 helpers
@@ -453,7 +510,8 @@ premiere-pro-mcp/
 │   ├── host.jsx                 # ExtendScript entry point
 │   └── CSInterface.js           # Adobe CEP interface library
 ├── scripts/
-│   └── install-cep.sh           # CEP plugin installer (symlink + debug mode)
+│   ├── install-cep.sh           # macOS CEP installer (symlink + debug mode)
+│   └── install-cep.ps1          # Windows CEP installer (copy + REG_SZ debug mode)
 ├── Dockerfile                   # Multi-stage Docker build for Fly.io
 ├── fly.toml                     # Fly.io deployment config
 ├── RESEARCH.md                  # API research and implementation status
@@ -466,20 +524,20 @@ premiere-pro-mcp/
 
 ## Technical Details
 
-### Why CEP instead of UXP?
+### CEP and UXP backends
 
-CEP (Common Extensibility Platform) provides full ExtendScript access in Premiere Pro, including the undocumented **QE DOM** — which is the only way to apply effects by name, perform ripple deletes, and do advanced trim operations. UXP in Premiere Pro is still maturing and lacks equivalent API coverage. CEP works across **Premiere Pro 2020–2025+**.
+CEP remains the production backend because it provides broad ExtendScript access and the undocumented **QE DOM** used for effects, ripple deletes, and advanced trims across Premiere Pro 2020–2026. The packaged `uxp-plugin` is a Premiere 25.6+ preview backend for supported frame export, capability discovery, and state events. It does not silently retry failed UXP mutations through CEP.
 
 ### ExtendScript Compatibility
 
-All generated scripts use **ES3 syntax** (`var`, manual `for` loops, no arrow functions, no `let`/`const`) since ExtendScript is based on ECMAScript 3. The `buildToolScript()` function prepends a library of helper functions to every script.
+All generated scripts use **ES3 syntax** (`var`, manual `for` loops, no arrow functions, no `let`/`const`) since ExtendScript is based on ECMAScript 3. The bridge writes a versioned helper library to the shared temp directory and loads it once per ExtendScript engine via `$.evalFile`; each command then sends only its tool-specific script.
 
 ### Security
 
 Understand the trust model before deploying this: **any client that can reach the MCP
-server can run ExtendScript inside your Premiere Pro.** `execute_extendscript` and
-`send_raw_script` are arbitrary-code-execution tools by design. Treat access to the server
-the same way you'd treat a shell on the machine running Premiere.
+server can control Premiere Pro.** `execute_extendscript` and `send_raw_script` are
+arbitrary-code-execution tools by design and are disabled by default. Enable them only by setting
+`PREMIERE_MCP_CAPABILITIES=inspect,edit,export,filesystem,unsafe-script`.
 
 - **Run it locally over stdio** unless you have a specific reason not to. That's the safe default.
 - **The HTTP transport (`http-server`) requires `MCP_AUTH_TOKEN`** and refuses to start
@@ -510,8 +568,12 @@ Many tools use the undocumented QE DOM (enabled via `app.enableQE()`). These too
 <details>
 <summary><strong>CEP plugin doesn't appear in Premiere Pro</strong></summary>
 
-1. Verify debug mode: `defaults read com.adobe.CSXS.12 PlayerDebugMode` should return `1`
-2. Check the plugin exists: `ls ~/Library/Application\ Support/Adobe/CEP/extensions/MCPBridgeCEP`
+1. Verify debug mode:
+   - macOS: `defaults read com.adobe.CSXS.12 PlayerDebugMode` should return `1`
+   - Windows: `reg query "HKCU\SOFTWARE\Adobe\CSXS.12" /v PlayerDebugMode` should report `REG_SZ    1` (a `REG_DWORD` value is not valid for unsigned CEP discovery)
+2. Check the plugin exists:
+   - macOS: `ls ~/Library/Application\ Support/Adobe/CEP/extensions/MCPBridgeCEP`
+   - Windows: `dir "%APPDATA%\Adobe\CEP\extensions\MCPBridgeCEP"`
 3. Completely restart Premiere Pro (not just close/reopen the project)
 4. Check the CSXS version matches your Premiere Pro version
 
@@ -520,9 +582,9 @@ Many tools use the undocumented QE DOM (enabled via `app.enableQE()`). These too
 <details>
 <summary><strong>Commands timeout or hang</strong></summary>
 
-1. Verify the CEP panel shows "Running" with a green dot
+1. Open the CEP panel and verify it shows "Running" with a green dot (the bridge normally starts automatically)
 2. Ensure temp directories match between MCP client config and CEP panel
-3. Check if Premiere Pro is busy (rendering, modal dialog open)
+3. Read the timeout error: if it reports an in-flight heartbeat, dismiss any open Premiere modal dialog; without a heartbeat, verify the bridge is running and using the same temp directory
 4. Increase timeout: set `PREMIERE_TIMEOUT_MS` to `60000` or higher
 5. Try `ping` tool to test basic connectivity
 

package/cep-plugin/CSXS/manifest.xml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ExtensionManifest Version="7.0" ExtensionBundleId="com.mcp.premiere.bridge" ExtensionBundleVersion="1.0.0" ExtensionBundleName="MCP Bridge">
+<ExtensionManifest Version="7.0" ExtensionBundleId="com.mcp.premiere.bridge" ExtensionBundleVersion="1.2.1" ExtensionBundleName="MCP Bridge">
   <ExtensionList>
-    <Extension Id="com.mcp.premiere.bridge.panel" Version="1.0.0"/>
+    <Extension Id="com.mcp.premiere.bridge.panel" Version="1.2.1"/>
+    <Extension Id="com.mcp.premiere.bridge.headless" Version="1.2.1"/>
   </ExtensionList>
   <ExecutionEnvironment>
     <HostList>
@@ -45,5 +46,34 @@
         </UI>
       </DispatchInfo>
     </Extension>
+    <Extension Id="com.mcp.premiere.bridge.headless">
+      <DispatchInfo>
+        <Resources>
+          <MainPath>./index.html</MainPath>
+          <ScriptPath>./host.jsx</ScriptPath>
+          <CEFCommandLine>
+            <Parameter>--allow-file-access-from-files</Parameter>
+            <Parameter>--enable-nodejs</Parameter>
+          </CEFCommandLine>
+        </Resources>
+        <Lifecycle>
+          <AutoVisible>false</AutoVisible>
+          <StartOn>
+            <Event>com.adobe.csxs.events.ApplicationActivate</Event>
+            <Event>applicationActivate</Event>
+          </StartOn>
+        </Lifecycle>
+        <UI>
+          <Type>Custom</Type>
+          <Geometry>
+            <Size>
+              <Height>1</Height>
+              <Width>1</Width>
+            </Size>
+          </Geometry>
+          <Icons/>
+        </UI>
+      </DispatchInfo>
+    </Extension>
   </DispatchInfoList>
 </ExtensionManifest>

package/cep-plugin/index.html

@@ -1,94 +1,78 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>MCP Bridge</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #1e1e1e;
-      color: #e0e0e0;
-      padding: 16px;
-      font-size: 13px;
-    }
-    h1 { font-size: 16px; margin-bottom: 12px; color: #fff; }
-    .status-row {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-    }
-    .status-dot {
-      width: 10px; height: 10px;
-      border-radius: 50%;
-      margin-right: 8px;
-      background: #666;
-    }
-    .status-dot.connected { background: #4caf50; }
-    .status-dot.error { background: #f44336; }
-    .status-dot.waiting { background: #ff9800; }
-    label { display: block; margin: 12px 0 4px; font-weight: 600; }
-    input[type="text"] {
-      width: 100%;
-      padding: 6px 8px;
-      background: #2d2d2d;
-      border: 1px solid #444;
-      color: #e0e0e0;
-      border-radius: 4px;
-      font-size: 12px;
-    }
-    button {
-      margin-top: 8px;
-      padding: 6px 16px;
-      background: #0078d4;
-      color: #fff;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-    button:hover { background: #106ebe; }
-    button.stop { background: #d32f2f; }
-    button.stop:hover { background: #b71c1c; }
-    #log {
-      margin-top: 12px;
-      background: #111;
-      border: 1px solid #333;
-      border-radius: 4px;
-      padding: 8px;
-      max-height: 120px;
-      overflow-y: auto;
-      font-family: "Cascadia Code", "Fira Code", monospace;
-      font-size: 11px;
-      line-height: 1.5;
-    }
-    .log-entry { color: #999; }
-    .log-entry.cmd { color: #4fc3f7; }
-    .log-entry.ok { color: #81c784; }
-    .log-entry.err { color: #ef5350; }
-  </style>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <h1>MCP Bridge (CEP)</h1>
+  <main class="panel-shell">
+    <header class="panel-header">
+      <div class="brand-mark" aria-hidden="true"><span>M</span></div>
+      <div class="brand-copy">
+        <h1>MCP Bridge</h1>
+        <p>Premiere Pro connection</p>
+      </div>
+      <div class="auto-start"><span></span>Auto-start</div>
+    </header>
 
-  <div class="status-row">
-    <div class="status-dot" id="statusDot"></div>
-    <span id="statusText">Stopped</span>
-  </div>
-  <div class="status-row">
-    <span>Commands processed: <strong id="cmdCount">0</strong></span>
-  </div>
+    <section class="status-panel" aria-live="polite">
+      <div class="status-indicator" aria-hidden="true">
+        <div class="status-ring"><div class="status-dot connected" id="statusDot"></div></div>
+      </div>
+      <div class="status-copy">
+        <span class="section-label">Bridge status</span>
+        <strong id="statusText">Connected</strong>
+        <span id="statusDetail">Premiere Pro link is active</span>
+      </div>
+      <div class="command-stat">
+        <strong id="cmdCount">0</strong>
+        <span>commands</span>
+      </div>
+    </section>
 
-  <label for="tempDir">Temp Directory</label>
-  <input type="text" id="tempDir" value="">
+    <section class="config-section">
+      <div class="section-heading">
+        <div>
+          <span class="section-label">Configuration</span>
+          <h2>Bridge directory</h2>
+        </div>
+        <button class="save-link" id="btnSave" onclick="saveTempDir()" type="button" title="Save bridge directory">
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 3.5h9.4L16.5 6v10.5h-13v-13Z"/><path d="M6.5 3.5v5h7v-5M6.5 16.5v-5h7v5"/></svg>
+          Save
+        </button>
+      </div>
+      <label class="sr-only" for="tempDir">Temporary bridge directory</label>
+      <div class="path-field">
+        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2.5 5.5h5l1.5 2h8.5v8h-15v-10Z"/></svg>
+        <input type="text" id="tempDir" value="" spellcheck="false">
+      </div>
+      <p class="field-help">Commands and responses are exchanged through this local folder.</p>
+    </section>
 
-  <div style="display: flex; gap: 8px;">
-    <button id="btnStart" onclick="startBridge()">Start Bridge</button>
-    <button id="btnStop" class="stop" onclick="stopBridge()" disabled>Stop Bridge</button>
-    <button onclick="saveTempDir()">Save Config</button>
-  </div>
+    <div class="action-row">
+      <button id="btnStart" class="button button-primary" onclick="startBridge()" type="button">
+        <svg viewBox="0 0 20 20" aria-hidden="true"><path class="fill-icon" d="m7 5 8 5-8 5V5Z"/></svg>
+        Start Bridge
+      </button>
+      <button id="btnStop" class="button button-stop" onclick="stopBridge()" type="button" disabled>
+        <svg viewBox="0 0 20 20" aria-hidden="true"><rect class="fill-icon" x="6" y="6" width="8" height="8" rx="1"/></svg>
+        Stop
+      </button>
+    </div>
 
-  <div id="log"></div>
+    <section class="activity-section">
+      <div class="section-heading activity-heading">
+        <div>
+          <span class="section-label">Live monitor</span>
+          <h2>Activity</h2>
+        </div>
+        <span class="activity-state"><span></span>Listening</span>
+      </div>
+      <div id="log" role="log" aria-live="polite"></div>
+    </section>
+  </main>
 
   <script src="CSInterface.js"></script>
   <script src="main.js"></script>