diff --git a/services/premiere-plugin-uxp/dragonflight-mam-2.2.2.ccx b/services/premiere-plugin-uxp/dragonflight-mam-2.2.2.ccx
new file mode 100644
index 0000000..dddff05
Binary files /dev/null and b/services/premiere-plugin-uxp/dragonflight-mam-2.2.2.ccx differ
diff --git a/services/premiere-plugin-uxp/index.html b/services/premiere-plugin-uxp/index.html
index 67cdb04..b0d5ac0 100644
--- a/services/premiere-plugin-uxp/index.html
+++ b/services/premiere-plugin-uxp/index.html
@@ -9,12 +9,10 @@
 <div id="root">
 
   <!-- ── Connect Pane ─────────────────────────────────────────────── -->
-  <section id="connect-pane" class="pane">
+  <section id="connect-pane" class="pane pane-connect">
     <div class="brand">
       <div class="brand-icon">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2"/>
-        </svg>
+        <svg width="28" height="28" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
       </div>
       <div class="brand-title">Dragonflight</div>
       <div class="brand-tag">Wild Dragon Broadcast</div>
@@ -28,113 +26,151 @@
     <div id="connect-status" class="status-msg muted"></div>
   </section>
 
-  <!-- ── Library Pane ─────────────────────────────────────────────── -->
+  <!-- ── Library Pane (app-shell: statusbar · rail · main · dock) ──── -->
   <section id="library-pane" class="pane hidden">
+    <div class="app">
 
-    <!-- Connection status strip (v2.1.8): dot + identity + ⋯ menu.
-         Disconnect lives inside the menu so it's not always visible. -->
-    <header class="status-strip">
-      <span class="signal-dot"></span>
-      <span id="connected-host" class="connected-host"></span>
-      <span id="panel-version" class="panel-version" title="Plugin version"></span>
-      <button id="menu-btn" class="btn-ghost" title="More" aria-label="More">⋯</button>
-      <div id="status-menu" class="menu hidden" role="menu">
-        <button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
-      </div>
-    </header>
-
-    <!-- Tabs -->
-    <div class="tab-nav">
-      <button id="tab-library" class="tab-btn active">
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-        </svg>
-        Library
-      </button>
-      <button id="tab-growing" class="tab-btn">
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-        </svg>
-        Growing
-        <span id="growing-count" class="badge" style="display:none">0</span>
-      </button>
-    </div>
-
-    <!-- Search + Project filter -->
-    <div class="search-row">
-      <input id="search-input" type="search" placeholder="Search assets…" />
-      <select id="project-filter" title="Filter by project">
-        <option value="all">All Projects</option>
-      </select>
-      <button id="refresh-btn" class="btn btn-icon" title="Refresh">↻</button>
-    </div>
-
-    <!-- Active sequence info bar -->
-    <div id="seq-info-bar" class="seq-info-bar hidden">
-      <span class="chip chip-ok">SEQ</span>
-      <span id="seq-info-name" class="seq-info-name"></span>
-    </div>
-
-    <!-- Asset grid (library tab) -->
-    <div id="library-container" class="grid-container">
-      <div id="asset-grid" class="asset-grid">
-        <div class="empty muted">Loading…</div>
-      </div>
-    </div>
-
-    <!-- Growing grid -->
-    <div id="growing-container" class="grid-container hidden">
-      <div id="growing-grid" class="asset-grid">
-        <div class="empty muted">No growing files</div>
-      </div>
-    </div>
-
-    <!-- (v2.2.0) Asset details panel dropped — card meta already carries
-         name / codec / duration. If we need richer detail later, surface
-         it on the card hover state rather than reserving permanent space. -->
-    <div id="details-panel" class="hidden"></div>
-
-    <!-- Action buttons -->
-    <footer class="actions">
-      <div class="action-row">
-        <button id="import-proxy-btn" class="btn btn-primary" disabled>Import Proxy</button>
-        <button id="import-hires-btn" class="btn btn-secondary" disabled>Hi-Res</button>
-      </div>
-      <div class="action-row">
-        <button id="mount-live-btn" class="btn btn-secondary" disabled title="Open live file from SMB share">Mount Live</button>
-        <button id="relink-btn" class="btn btn-secondary" disabled title="Relink proxy → hi-res original">Relink Hi-Res</button>
-      </div>
-      <div class="action-row">
-        <button id="import-all-btn" class="btn btn-secondary" disabled>Import All</button>
-        <button id="export-timeline-btn" class="btn btn-secondary" disabled>Export Timeline ↑</button>
-      </div>
-
-      <!-- Progress -->
-      <div id="progress-row" class="progress-row hidden">
-        <div class="progress-bar"><div id="progress-fill"></div></div>
-        <div id="progress-label" class="progress-label">…</div>
-      </div>
-
-      <!-- Toast -->
-      <div id="toast" class="toast hidden"></div>
-    </footer>
-
-    <!-- Advanced section — collapsed by default; click the row to expand. -->
-    <div class="advanced-section">
-      <button id="advanced-toggle" class="advanced-toggle" type="button" aria-expanded="false">
-        <span class="advanced-caret">▸</span>
-        <span class="advanced-title">Advanced</span>
-      </button>
-      <div id="advanced-body" class="advanced-body hidden">
-        <div class="action-row">
-          <button id="export-conform-btn" class="btn btn-secondary" disabled>Export &amp; Conform</button>
-          <button id="fetch-relink-btn" class="btn btn-secondary" disabled>Fetch &amp; Relink All</button>
+      <!-- Connection collapsed to a status line: dot + host + version + ⋯ -->
+      <header class="statusbar">
+        <span class="signal-dot"></span>
+        <span id="connected-host" class="connected-host"></span>
+        <span id="panel-version" class="panel-version" title="Plugin version"></span>
+        <div id="menu-btn" role="button" tabindex="0" class="iconbtn iconbtn--sm" data-tip="More" data-tip-pos="down-left" aria-label="More">
+          <svg width="15" height="15" viewBox="0 0 24 24"><path fill="currentColor" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
         </div>
-      </div>
-    </div>
+        <div id="status-menu" class="menu hidden" role="menu">
+          <button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
+        </div>
+      </header>
+
+      <div class="workspace">
+
+        <!-- Vertical icon rail: views on top, global actions below -->
+        <nav class="rail">
+          <div id="tab-library" role="button" tabindex="0" class="rail-btn active" data-tip="Library" data-tip-pos="right">
+            <svg width="18" height="18" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" fill="currentColor"/></svg>
+          </div>
+          <div id="tab-growing" role="button" tabindex="0" class="rail-btn" data-tip="Growing" data-tip-pos="right">
+            <svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
+            <span id="growing-count" class="rail-count" style="display:none">0</span>
+          </div>
+
+          <span class="rail-spacer"></span>
+
+          <div id="export-timeline-btn" role="button" tabindex="0" class="rail-btn rail-btn--accent" data-tip="Export" data-tip-pos="right">
+            <svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
+          </div>
+          <div id="refresh-btn" role="button" tabindex="0" class="rail-btn" data-tip="Refresh" data-tip-pos="right">
+            <svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+          </div>
+        </nav>
+
+        <!-- Main column -->
+        <div class="main">
+
+          <!-- Search + project filter -->
+          <div class="toolbar">
+            <label class="search">
+              <svg width="13" height="13" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.5 6.5 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
+              <input id="search-input" type="search" placeholder="Search assets" />
+            </label>
+            <select id="project-filter" class="filter-select" title="Filter by project">
+              <option value="all">All Projects</option>
+            </select>
+            <div id="view-toggle-btn" role="button" tabindex="0" class="iconbtn iconbtn--sm" data-tip="Grid view" data-tip-pos="down-left" aria-label="Toggle layout">
+              <svg width="15" height="15" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/></svg>
+            </div>
+          </div>
+
+          <!-- Active sequence info bar -->
+          <div id="seq-info-bar" class="seq-info-bar hidden">
+            <span class="chip chip-ok">SEQ</span>
+            <span id="seq-info-name" class="seq-info-name"></span>
+          </div>
+
+          <!-- Asset grid (library tab) -->
+          <div id="library-container" class="grid-container">
+            <div id="asset-grid" class="asset-grid">
+              <div class="empty muted">Loading…</div>
+            </div>
+          </div>
+
+          <!-- Growing grid -->
+          <div id="growing-container" class="grid-container hidden">
+            <div id="growing-grid" class="asset-grid">
+              <div class="empty muted">No growing files</div>
+            </div>
+          </div>
+
+          <!-- Details panel retired (v2.2.0) — card meta carries name/codec/duration. -->
+          <div id="details-panel" class="hidden"></div>
+
+          <!-- Progress + toast sit just above the action dock -->
+          <div id="progress-row" class="progress-row hidden">
+            <div class="progress-bar"><div id="progress-fill"></div></div>
+            <div id="progress-label" class="progress-label">…</div>
+          </div>
+          <div id="toast" class="toast hidden"></div>
+
+          <!-- Contextual action dock: text buttons replaced by icon buttons
+               with hover labels. Per-asset actions left, batch actions right. -->
+          <footer class="dock">
+            <div id="import-proxy-btn" role="button" tabindex="0" class="iconbtn iconbtn--primary" data-tip="Import Proxy" data-tip-pos="up" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+            </div>
+            <div id="import-hires-btn" role="button" tabindex="0" class="iconbtn" data-tip="Import Hi-Res" data-tip-pos="up" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg>
+            </div>
+            <div id="mount-live-btn" role="button" tabindex="0" class="iconbtn" data-tip="Mount Live" data-tip-pos="up" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M14 12c0 1.11-.89 2-2 2s-2-.89-2-2 .89-2 2-2 2 .89 2 2zm-2-6c-3.31 0-6 2.69-6 6 0 2.22 1.21 4.15 3 5.19l1-1.74A3.98 3.98 0 0 1 8 12c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19 0-3.31-2.69-6-6-6zm0-4C7.58 2 4 5.58 4 10c0 2.96 1.61 5.53 4 6.92l1-1.73C7.21 14.07 6 12.18 6 10c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.18-1.21 4.07-3 5.19l1 1.73c2.39-1.39 4-3.96 4-6.92 0-4.42-3.58-8-8-8z"/></svg>
+            </div>
+            <div id="relink-btn" role="button" tabindex="0" class="iconbtn" data-tip="Relink Hi-Res" data-tip-pos="up" disabled>
+              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            </div>
+
+            <span class="dock-sep"></span>
+
+            <div id="upload-mam-btn" role="button" tabindex="0" class="iconbtn" data-tip="Upload to MAM" data-tip-pos="up-left">
+              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
+            </div>
+          </footer>
+
+        </div><!-- /main -->
+      </div><!-- /workspace -->
+    </div><!-- /app -->
   </section>
 
-  <!-- ── Export Timeline Slide Panel ──────────────────────────────── -->
+  <!-- Full-panel Export screen -->
+  <div id="export-screen" class="screen hidden">
+    <div class="screen-header">
+      <span class="screen-title">Export</span>
+      <button id="export-screen-close" class="btn btn-icon">✕</button>
+    </div>
+    <div class="screen-body">
+      <div id="opt-conform" role="button" tabindex="0" class="export-option">
+        <div class="eo-icon">
+          <svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>
+        </div>
+        <div class="eo-text">
+          <div class="eo-title">Conform Timeline → MAM</div>
+          <div class="eo-desc">Render the sequence to a chosen codec and push it to the MAM</div>
+        </div>
+        <span class="eo-arrow">›</span>
+      </div>
+      <div id="opt-local-export" role="button" tabindex="0" class="export-option">
+        <div class="eo-icon">
+          <svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+        </div>
+        <div class="eo-text">
+          <div class="eo-title">Local Export</div>
+          <div class="eo-desc">Trim the hi-res sources on the MAM, download and relink them in Premiere</div>
+        </div>
+        <span class="eo-arrow">›</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── (retired) Push Timeline Slide Panel — kept hidden/unused ──── -->
   <div id="export-overlay" class="slide-overlay hidden"></div>
   <div id="export-panel" class="slide-panel hidden">
     <div class="slide-header">
@@ -164,40 +200,43 @@
     <div class="slide-body">
       <label class="field-label">Target project</label>
       <select id="conform-proj-select"><option value="">— Select project —</option></select>
-      <label class="field-label">Preset</label>
-      <div id="preset-cards" class="preset-grid">
-        <div class="preset-card selected" data-preset="broadcast"><div class="pc-title">Broadcast</div><div class="pc-desc">ProRes 422 HQ · 1080p · 48kHz</div></div>
-        <div class="preset-card" data-preset="web"><div class="pc-title">Web</div><div class="pc-desc">H.264 · 1080p · AAC 320k</div></div>
-        <div class="preset-card" data-preset="archive"><div class="pc-title">Archive</div><div class="pc-desc">ProRes 4444 · UHD · 48kHz</div></div>
-        <div class="preset-card" data-preset="custom"><div class="pc-title">Custom</div><div class="pc-desc">Manual settings</div></div>
+      <label class="field-label">Format</label>
+      <div id="preset-cards" class="preset-list">
+        <div class="preset-card selected" data-preset="broadcast"><span class="pc-title">Broadcast</span><span class="pc-desc">ProRes 422 HQ · 1080p</span></div>
+        <div class="preset-card" data-preset="web"><span class="pc-title">Web</span><span class="pc-desc">H.264 · 1080p · AAC</span></div>
+        <div class="preset-card" data-preset="archive"><span class="pc-title">Archive</span><span class="pc-desc">ProRes 4444 · UHD</span></div>
+        <div class="preset-card" data-preset="custom"><span class="pc-title">Custom</span><span class="pc-desc">Manual settings</span></div>
+      </div>
+
+      <div id="conform-custom" class="custom-fields hidden">
+        <label class="field-label">Codec</label>
+        <select id="conform-codec">
+          <option value="prores_hq">ProRes 422 HQ</option>
+          <option value="prores_4444">ProRes 4444</option>
+          <option value="h264">H.264</option>
+          <option value="h265">H.265 / HEVC</option>
+          <option value="dnxhr_hq">DNxHR HQ</option>
+        </select>
+        <label class="field-label">Quality</label>
+        <select id="conform-quality">
+          <option value="high">High</option>
+          <option value="medium" selected>Medium</option>
+          <option value="low">Low</option>
+        </select>
+        <label class="field-label">Resolution</label>
+        <select id="conform-resolution">
+          <option value="uhd">UHD (3840×2160)</option>
+          <option value="1080p" selected>Full HD (1920×1080)</option>
+          <option value="720p">HD (1280×720)</option>
+          <option value="source">Source</option>
+        </select>
+        <label class="field-label">Audio</label>
+        <select id="conform-audio">
+          <option value="broadcast">Broadcast (48kHz PCM)</option>
+          <option value="web">Web (AAC 320k)</option>
+          <option value="archive">Archive (96kHz PCM)</option>
+        </select>
       </div>
-      <label class="field-label">Codec</label>
-      <select id="conform-codec">
-        <option value="prores_hq">ProRes 422 HQ</option>
-        <option value="prores_4444">ProRes 4444</option>
-        <option value="h264">H.264</option>
-        <option value="h265">H.265 / HEVC</option>
-        <option value="dnxhr_hq">DNxHR HQ</option>
-      </select>
-      <label class="field-label">Quality</label>
-      <select id="conform-quality">
-        <option value="high">High</option>
-        <option value="medium" selected>Medium</option>
-        <option value="low">Low</option>
-      </select>
-      <label class="field-label">Resolution</label>
-      <select id="conform-resolution">
-        <option value="uhd">UHD (3840×2160)</option>
-        <option value="1080p" selected>Full HD (1920×1080)</option>
-        <option value="720p">HD (1280×720)</option>
-        <option value="source">Source</option>
-      </select>
-      <label class="field-label">Audio</label>
-      <select id="conform-audio">
-        <option value="broadcast">Broadcast (48kHz PCM)</option>
-        <option value="web">Web (AAC 320k)</option>
-        <option value="archive">Archive (96kHz PCM)</option>
-      </select>
       <div id="conform-clip-info" class="clip-info"></div>
     </div>
     <div class="slide-footer">
@@ -231,6 +270,7 @@
 <script src="src/library.js"></script>
 <script src="src/import-flow.js"></script>
 <script src="src/timeline.js"></script>
+<script src="src/tooltip.js"></script>
 <script src="src/main.js"></script>
 </body>
 </html>
diff --git a/services/premiere-plugin-uxp/src/api.js b/services/premiere-plugin-uxp/src/api.js
index 35fe87f..eb10f2b 100644
--- a/services/premiere-plugin-uxp/src/api.js
+++ b/services/premiere-plugin-uxp/src/api.js
@@ -167,5 +167,57 @@
     });
   };
 
+  // Local Export trim job polling + segment retrieval.
+  API.getTrimStatus = function (jobId) {
+    return API.json('/api/v1/assets/trim-status/' + jobId);
+  };
+  API.getTempSegmentUrl = function (clipInstanceId) {
+    return API.json('/api/v1/assets/temp-segment-url/' + clipInstanceId);
+  };
+
+  // ── Upload (ingest editor media into the MAM) ────────────────────
+  // Single-shot multipart form upload (server caps simple at <50 MB).
+  API.uploadSimple = async function (blob, meta) {
+    const fd = new FormData();
+    fd.append('file', blob, meta.filename);
+    fd.append('filename', meta.filename);
+    fd.append('projectId', meta.projectId);
+    if (meta.binId) fd.append('binId', meta.binId);
+    if (meta.contentType) fd.append('contentType', meta.contentType);
+    const r = await API.request('/api/v1/upload/simple', { method: 'POST', body: fd });
+    if (!r.ok) throw new Error('Upload HTTP ' + r.status + ' — ' + (await r.text().catch(() => '')).slice(0, 160));
+    return r.json();
+  };
+
+  // Chunked multipart for large originals.
+  API.uploadInit = function (meta) {
+    return API.json('/api/v1/upload/init', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(meta),
+    });
+  };
+  API.uploadPart = async function (blob, meta) {
+    const fd = new FormData();
+    fd.append('file', blob, 'part-' + meta.partNumber);
+    fd.append('uploadId', meta.uploadId);
+    fd.append('key', meta.key);
+    fd.append('partNumber', String(meta.partNumber));
+    const r = await API.request('/api/v1/upload/part', { method: 'POST', body: fd });
+    if (!r.ok) throw new Error('Upload part HTTP ' + r.status);
+    return r.json();
+  };
+  API.uploadComplete = function (meta) {
+    return API.json('/api/v1/upload/complete', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(meta),
+    });
+  };
+  API.uploadAbort = function (meta) {
+    return API.json('/api/v1/upload/abort', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(meta),
+    }).catch(() => {});
+  };
+
   window.API = API;
 })();
diff --git a/services/premiere-plugin-uxp/src/import-flow.js b/services/premiere-plugin-uxp/src/import-flow.js
index bc3922b..adfdc71 100644
--- a/services/premiere-plugin-uxp/src/import-flow.js
+++ b/services/premiere-plugin-uxp/src/import-flow.js
@@ -154,5 +154,111 @@
     return destPath;
   };
 
+  // ── Upload (ingest editor media into the MAM) ────────────────────
+  const SIMPLE_MAX = 45 * 1024 * 1024;     // server caps /simple at <50 MB
+  const PART_SIZE  = 16 * 1024 * 1024;     // chunk size for multipart
+
+  function _contentType(name) {
+    const ext = String(name).split('.').pop().toLowerCase();
+    const map = {
+      mp4:'video/mp4', m4v:'video/mp4', mov:'video/quicktime', mxf:'application/mxf',
+      mkv:'video/x-matroska', avi:'video/x-msvideo', mpg:'video/mpeg', mpeg:'video/mpeg',
+      mts:'video/mp2t', m2ts:'video/mp2t', wav:'audio/wav', aif:'audio/aiff', aiff:'audio/aiff',
+      mp3:'audio/mpeg', png:'image/png', jpg:'image/jpeg', jpeg:'image/jpeg',
+    };
+    return map[ext] || 'application/octet-stream';
+  }
+
+  // Read a local file and push it to the MAM. Returns the created asset row.
+  // NOTE: reads the whole file into memory once (fine for typical clips;
+  // very large multi-GB originals may strain memory — revisit with a
+  // positional-read stream if that becomes a problem).
+  Import.uploadFile = async function (nativePath, meta) {
+    meta = meta || {};
+    if (!meta.projectId) throw new Error('No target project for upload');
+    const filename    = meta.filename || path.basename(nativePath);
+    const contentType = _contentType(filename);
+
+    const buf  = await fs.readFile(nativePath);
+    const size = buf.byteLength != null ? buf.byteLength : buf.length;
+
+    if (size <= SIMPLE_MAX) {
+      const blob = new Blob([buf], { type: contentType });
+      return API.uploadSimple(blob, { filename, projectId: meta.projectId, binId: meta.binId, contentType });
+    }
+
+    // Chunked multipart for large files.
+    const init = await API.uploadInit({ filename, fileSize: size, contentType, projectId: meta.projectId, binId: meta.binId });
+    const parts = [];
+    try {
+      let partNumber = 1;
+      for (let off = 0; off < size; off += PART_SIZE, partNumber++) {
+        const chunk = buf.slice(off, Math.min(off + PART_SIZE, size));
+        const blob  = new Blob([chunk], { type: contentType });
+        if (meta.onProgress) meta.onProgress(off, size);
+        const res = await API.uploadPart(blob, { uploadId: init.uploadId, key: init.key, partNumber });
+        parts.push({ PartNumber: partNumber, ETag: res.etag });
+      }
+      return API.uploadComplete({ uploadId: init.uploadId, key: init.key, assetId: init.assetId, parts });
+    } catch (e) {
+      await API.uploadAbort({ uploadId: init.uploadId, key: init.key, assetId: init.assetId });
+      throw e;
+    }
+  };
+
+  // ── Bin selection (best-effort) + file-picker fallback ───────────
+  // Tries to read the highlighted project-panel item(s). The UXP premierepro
+  // selection surface varies by version, so every access is guarded; on any
+  // miss this returns [] and callers fall back to a native file picker.
+  Import.getSelectedBinPaths = async function () {
+    const paths = [];
+    try {
+      const P = _ppro();
+      const project = await P.Project.getActiveProject();
+      if (!project) return paths;
+      let sel = null;
+      try { if (project.getSelection) sel = await project.getSelection(); } catch (_) {}
+      let items = [];
+      if (sel) {
+        if (typeof sel.getItems === 'function')      items = await sel.getItems();
+        else if (Array.isArray(sel))                 items = sel;
+        else if (Array.isArray(sel.items))           items = sel.items;
+      }
+      for (const it of (items || [])) {
+        try {
+          const ci = await P.ClipProjectItem.cast(it);
+          const mp = await ci.getMediaFilePath();
+          if (mp) paths.push(mp);
+        } catch (_) {}
+      }
+    } catch (_) {}
+    return paths;
+  };
+
+  // Native file picker — returns array of native paths (may be empty).
+  Import.pickFiles = async function () {
+    if (!uxpFs || !uxpFs.getFileForOpening) throw new Error('File picker unavailable in this host');
+    const sel = await uxpFs.getFileForOpening({ allowMultiple: true });
+    if (!sel) return [];
+    const arr = Array.isArray(sel) ? sel : [sel];
+    return arr.map(f => f && f.nativePath).filter(Boolean);
+  };
+
+  // Upload any timeline clips not yet in the MAM, recording the path→asset
+  // mapping so resolveClipsToAssets picks them up on the next pass.
+  Import.ensureClipsInMam = async function (clips, projectId, onProgress) {
+    const missing = clips.filter(c => !c.asset_id && c.filePath);
+    for (let i = 0; i < missing.length; i++) {
+      const c = missing[i];
+      if (onProgress) onProgress(c.fileName || path.basename(c.filePath), i + 1, missing.length);
+      const asset = await Import.uploadFile(c.filePath, { projectId, filename: path.basename(c.filePath) });
+      if (asset && asset.id) {
+        Library.recordImport(c.filePath, { assetId: asset.id });
+        if (c.fileName) Library.recordImport('name:' + c.fileName, { assetId: asset.id });
+      }
+    }
+    return { uploaded: missing.length };
+  };
+
   window.Import = Import;
 })();
diff --git a/services/premiere-plugin-uxp/src/library.js b/services/premiere-plugin-uxp/src/library.js
index 6be4101..10bff94 100644
--- a/services/premiere-plugin-uxp/src/library.js
+++ b/services/premiere-plugin-uxp/src/library.js
@@ -220,10 +220,7 @@
     _btn('import-hires-btn').disabled    = !sel || live || !sel.original_s3_key;
     _btn('mount-live-btn').disabled      = !sel || !live;
     _btn('relink-btn').disabled          = !(ready && hasLiveImport);
-    _btn('import-all-btn').disabled      = Library.state.currentTab !== 'library';
-    _btn('export-timeline-btn').disabled = false; // available once connected
-    _btn('export-conform-btn').disabled  = false;
-    _btn('fetch-relink-btn').disabled    = false;
+    // export-timeline-btn (Export menu) and upload-mam-btn are always available.
   };
 
   function _btn(id) { return document.getElementById(id) || { disabled: false }; }
diff --git a/services/premiere-plugin-uxp/src/main.js b/services/premiere-plugin-uxp/src/main.js
index c3a0ad9..e78f4c4 100644
--- a/services/premiere-plugin-uxp/src/main.js
+++ b/services/premiere-plugin-uxp/src/main.js
@@ -6,6 +6,50 @@
 
   const $ = id => document.getElementById(id);
 
+  // UXP renders native <button> chrome that ignores CSS `background` and does
+  // not draw <svg>-only button content, so the rail/dock icon controls are
+  // <div role="button"> (divs render custom backgrounds + SVG children fine).
+  // Divs have no native `disabled`, so reflect the `.disabled` property the
+  // rest of the code sets onto a [disabled] attribute the stylesheet keys off.
+  const ICON_CONTROLS = [
+    'menu-btn', 'tab-library', 'tab-growing', 'export-timeline-btn', 'refresh-btn',
+    'import-proxy-btn', 'import-hires-btn', 'mount-live-btn', 'relink-btn', 'upload-mam-btn'
+  ];
+  function enableDivDisabled() {
+    ICON_CONTROLS.forEach(id => {
+      const el = document.getElementById(id);
+      if (!el || Object.getOwnPropertyDescriptor(el, 'disabled')) return;
+      Object.defineProperty(el, 'disabled', {
+        configurable: true,
+        get() { return this.hasAttribute('disabled'); },
+        set(v) { if (v) this.setAttribute('disabled', ''); else this.removeAttribute('disabled'); }
+      });
+    });
+  }
+
+  // Asset layout toggle: compact list (default) vs thumbnail grid. Persisted
+  // in localStorage when available (UXP host permitting), else session-only.
+  const GRID_ICON = '<svg width="15" height="15" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/></svg>';
+  const LIST_ICON = '<svg width="15" height="15" viewBox="0 0 24 24"><path fill="currentColor" d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>';
+  let _viewMode = null;
+  function getViewMode() {
+    if (_viewMode) return _viewMode;
+    try { _viewMode = localStorage.getItem('df_view_mode'); } catch (e) {}
+    return _viewMode || 'list';
+  }
+  function applyViewMode(mode) {
+    _viewMode = mode === 'grid' ? 'grid' : 'list';
+    try { localStorage.setItem('df_view_mode', _viewMode); } catch (e) {}
+    const isList = _viewMode === 'list';
+    document.querySelectorAll('.asset-grid').forEach(g => g.classList.toggle('list-view', isList));
+    const btn = $('view-toggle-btn');
+    if (btn) {
+      // Show the icon for the layout a click switches TO.
+      btn.innerHTML = isList ? GRID_ICON : LIST_ICON;
+      btn.setAttribute('data-tip', isList ? 'Grid view' : 'List view');
+    }
+  }
+
   function syncConnectBtn() {
     $('connect-btn').disabled = !$('server-url').value.trim() || !$('api-token').value.trim();
   }
@@ -74,6 +118,11 @@
     $('tab-library').addEventListener('click', () => Library.switchTab('library'));
     $('tab-growing').addEventListener('click', () => Library.switchTab('growing'));
 
+    const vt = $('view-toggle-btn');
+    if (vt) vt.addEventListener('click', () => {
+      applyViewMode(getViewMode() === 'list' ? 'grid' : 'list');
+    });
+
     let searchTimer;
     $('search-input').addEventListener('input', e => {
       clearTimeout(searchTimer);
@@ -114,24 +163,8 @@
       finally { _disableImportBtns(false); Library._syncActions(); }
     });
 
-    $('import-all-btn').addEventListener('click', async () => {
-      const assets = Library.state.assets;
-      if (!assets.length) { UI.toast('No assets', 'error'); return; }
-      _disableImportBtns(true);
-      let ok = 0, fail = 0;
-      for (const a of assets) {
-        try {
-          const { localPath, safeName } = await Import.proxy(a);
-          Library.recordImport(localPath,        { assetId: a.id, displayName: a.display_name || a.filename });
-          Library.recordImport('name:' + safeName, { assetId: a.id, displayName: a.display_name || a.filename });
-          ok++;
-        } catch (_) { fail++; }
-      }
-      _disableImportBtns(false);
-      UI.hideProgress();
-      UI.toast('Import all: ' + ok + ' ok' + (fail ? ', ' + fail + ' failed' : ''), fail ? 'error' : 'ok');
-      Library._syncActions();
-    });
+    // ── Upload highlighted bin file(s) to the MAM ──
+    $('upload-mam-btn').addEventListener('click', uploadToMam);
 
     $('mount-live-btn').addEventListener('click', async () => {
       const a = Library.selectedAsset(); if (!a) return;
@@ -181,12 +214,8 @@
       finally { Library._syncActions(); }
     });
 
-    // v2.2.1: Export Timeline is now a single-click pipeline —
-    //   push to MAM → start conform → poll → new asset lands in Library.
-    // The Conform slide panel is still wired for Advanced → Export & Conform.
-    $('export-timeline-btn').addEventListener('click', oneClickExport);
-    $('export-conform-btn').addEventListener('click', openConformPanel);
-    $('fetch-relink-btn').addEventListener('click',   openRelinkPanel);
+    // Single Export entry → popup menu (Conform Timeline / Local Export).
+    wireExportMenu();
 
     // Advanced collapsible toggle (v2.2.0).
     const advToggle = $('advanced-toggle');
@@ -203,6 +232,83 @@
     ['import-proxy-btn','import-hires-btn'].forEach(id => { $(id).disabled = dis; });
   }
 
+  function _basename(p) { return String(p).split(/[\\/]/).pop(); }
+
+  // Target project for uploads/auto-upload: the project filter when specific,
+  // else the only project if there's exactly one, else null (caller prompts).
+  function getTargetProjectId() {
+    const sel = Library.state.selectedProject;
+    if (sel && sel !== 'all') return sel;
+    const projs = Library.state.projects || [];
+    return projs.length === 1 ? projs[0].id : null;
+  }
+
+  // ── Export screen (full-panel chooser → Conform / Local Export) ──
+  function wireExportMenu() {
+    const btn = $('export-timeline-btn');
+    if (!btn) return;
+    const close = () => UI.setHidden('#export-screen', true);
+    btn.addEventListener('click', () => UI.setHidden('#export-screen', false));
+    const closeBtn = $('export-screen-close');
+    if (closeBtn) closeBtn.addEventListener('click', close);
+    const optConform = $('opt-conform');
+    if (optConform) optConform.addEventListener('click', () => { close(); openConformPanel(); });
+    const optLocal = $('opt-local-export');
+    if (optLocal) optLocal.addEventListener('click', () => { close(); runLocalExport(); });
+  }
+
+  // ── Upload highlighted bin file(s) (or file-picker fallback) ─────
+  async function uploadToMam() {
+    const projectId = getTargetProjectId();
+    if (!projectId) { UI.toast('Pick a target project (project filter) before uploading', 'error'); return; }
+    let paths = [];
+    try { paths = await Import.getSelectedBinPaths(); } catch (_) {}
+    if (!paths.length) {
+      UI.toast('No bin selection — choose file(s) to upload', 'muted');
+      try { paths = await Import.pickFiles(); }
+      catch (e) { UI.toast('File picker unavailable: ' + e.message, 'error'); return; }
+    }
+    if (!paths.length) return;
+    let ok = 0, fail = 0;
+    for (let i = 0; i < paths.length; i++) {
+      const name = _basename(paths[i]);
+      UI.showProgress('Uploading ' + name + ' (' + (i + 1) + '/' + paths.length + ')…', 10 + (i / paths.length) * 80);
+      try { await Import.uploadFile(paths[i], { projectId }); ok++; }
+      catch (e) { fail++; console.warn('[df] upload failed', paths[i], e.message); }
+    }
+    UI.hideProgress();
+    UI.toast('Uploaded ' + ok + (fail ? ', ' + fail + ' failed' : '') + ' to MAM', fail ? 'error' : 'ok');
+    if (ok) Library.refresh(Library.state.searchQuery);
+  }
+
+  // ── Local Export (server FFMPEG-trims hi-res → download → relink) ─
+  async function runLocalExport() {
+    const projectId = getTargetProjectId();
+    UI.showProgress('Reading Premiere sequence…', 8);
+    let td;
+    try { td = await Timeline.readActiveSequence(); }
+    catch (e) { UI.hideProgress(); UI.toast('Timeline read failed: ' + e.message, 'error'); return; }
+    if (!td.clips.length) { UI.hideProgress(); UI.toast('No clips in active sequence', 'error'); return; }
+
+    let resolved = Library.resolveClipsToAssets(td.clips);
+    const missing = resolved.filter(c => !c.asset_id && c.filePath);
+    if (missing.length) {
+      if (!projectId) { UI.hideProgress(); UI.toast(missing.length + ' clip(s) not in MAM — pick a target project so they can be uploaded', 'error'); return; }
+      try {
+        await Import.ensureClipsInMam(resolved, projectId, (name, n, total) =>
+          UI.showProgress('Uploading missing source ' + name + ' (' + n + '/' + total + ')…', 8 + (n / total) * 20));
+        resolved = Library.resolveClipsToAssets(td.clips);
+      } catch (e) { UI.hideProgress(); UI.toast('Auto-upload failed: ' + e.message, 'error'); return; }
+    }
+
+    try {
+      const res = await Timeline.localExport(resolved, (label, pct) => UI.showProgress(label, pct));
+      UI.hideProgress();
+      if (res.failed) UI.toast('Local Export: ' + res.succeeded + ' ok, ' + res.failed + ' failed', 'error');
+      else UI.toast('Local Export complete — ' + res.succeeded + ' clip(s) relinked', 'ok');
+    } catch (e) { UI.hideProgress(); UI.toast('Local Export failed: ' + e.message, 'error'); }
+  }
+
   let _seqCache = null;
 
   // ── One-click Export Timeline ────────────────────────────────────
@@ -331,9 +437,13 @@
     if (!_seqCache.clips.length) { UI.hideProgress(); UI.toast('No clips in active sequence', 'error'); return; }
     UI.hideProgress();
     const resolved = Library.resolveClipsToAssets(_seqCache.clips);
+    const total    = _seqCache.clips.length;
     const matched  = resolved.filter(c => c.asset_id).length;
-    $('conform-clip-info').textContent = matched + ' of ' + _seqCache.clips.length + ' clip(s) matched';
-    $('conform-start-btn').disabled = matched === 0;
+    const missing  = total - matched;
+    $('conform-clip-info').textContent = missing
+      ? matched + ' of ' + total + ' clip(s) in MAM — ' + missing + ' will be uploaded first'
+      : matched + ' of ' + total + ' clip(s) in MAM';
+    $('conform-start-btn').disabled = total === 0;
     const conformProj = $('conform-proj-select');
     if (conformProj) {
       conformProj.innerHTML = '<option value="">— Select project —</option>';
@@ -360,6 +470,8 @@
       };
       const p = presets[card.dataset.preset];
       if (p) { $('conform-codec').value=p.codec; $('conform-quality').value=p.quality; $('conform-resolution').value=p.resolution; $('conform-audio').value=p.audio; }
+      // Manual codec/quality/res/audio fields appear only for Custom.
+      UI.setHidden('#conform-custom', card.dataset.preset !== 'custom');
     });
     $('conform-start-btn').addEventListener('click', async () => {
       if (!_seqCache) return;
@@ -367,6 +479,15 @@
       const projectId   = conformProj ? conformProj.value : '';
       if (!projectId) { UI.toast('Select a target project', 'error'); return; }
       UI.closeSlide('conform-overlay', 'conform-panel');
+      // Auto-upload any timeline sources not yet in the MAM, then conform.
+      try {
+        const resolved = Library.resolveClipsToAssets(_seqCache.clips);
+        const missing  = resolved.filter(c => !c.asset_id && c.filePath);
+        if (missing.length) {
+          await Import.ensureClipsInMam(resolved, projectId, (name, n, tot) =>
+            UI.showProgress('Uploading missing source ' + name + ' (' + n + '/' + tot + ')…', 5 + (n / tot) * 10));
+        }
+      } catch (e) { UI.hideProgress(); UI.toast('Auto-upload failed: ' + e.message, 'error'); return; }
       UI.showProgress('Starting conform job…', 15);
       try {
         const jobId = await Timeline.startConform(projectId, _seqCache.sequenceName, _seqCache, {
@@ -465,6 +586,8 @@
   }
 
   function init() {
+    enableDivDisabled();
+    applyViewMode(getViewMode());
     wireConnectPane(); wireLibraryPane();
     wireExportPanel(); wireConformPanel(); wireRelinkPanel();
     showVersion();
diff --git a/services/premiere-plugin-uxp/src/timeline.js b/services/premiere-plugin-uxp/src/timeline.js
index c8f5e6a..c32cf67 100644
--- a/services/premiere-plugin-uxp/src/timeline.js
+++ b/services/premiere-plugin-uxp/src/timeline.js
@@ -304,5 +304,76 @@
     return count;
   };
 
+  // ── Local Export ─────────────────────────────────────────────────
+  // Server trims each timeline clip's hi-res via FFMPEG, then we download
+  // the trimmed segments and relink the project items to them.
+  // CAVEAT: relink keys on the source media path, so a source used by
+  // multiple timeline clips with different in/out points will relink to a
+  // single segment (last one wins). Common single-use case is exact.
+  Timeline.localExport = async function (resolvedClips, onProgress) {
+    const P = ppro();
+    const project = await P.Project.getActiveProject();
+    if (!project) throw new Error('No active Premiere project');
+    const matched = (resolvedClips || []).filter(c => c.asset_id);
+    if (!matched.length) throw new Error('No clips matched MAM assets to export');
+
+    const payload = matched.map(c => ({
+      assetId: c.asset_id,
+      filename: c.fileName || (c.filePath ? path.basename(c.filePath) : 'clip'),
+      sourceInFrames: c.sourceInFrames, sourceOutFrames: c.sourceOutFrames,
+      timelineInFrames: c.timelineInFrames, timelineOutFrames: c.timelineOutFrames,
+      trackIndex: c.trackIndex,
+    }));
+
+    onProgress && onProgress('Requesting trim of ' + matched.length + ' clip(s)…', 10);
+    const job = await API.batchTrim(payload);
+    const jobId = job.jobId;
+    const clipByInstance = {};
+    (job.clips || []).forEach((cr, i) => { if (cr.clipInstanceId) clipByInstance[cr.clipInstanceId] = matched[i]; });
+
+    // Poll until every segment is ready (s3Key set) or the job fails.
+    const ready = {};
+    await new Promise((resolve, reject) => {
+      const t = setInterval(async () => {
+        try {
+          const st = await API.getTrimStatus(jobId);
+          const clips = st.clips || [];
+          const completed = clips.filter(c => c.status === 'completed' && c.s3Key);
+          onProgress && onProgress('Trimming on server… (' + completed.length + '/' + clips.length + ')',
+            15 + (completed.length / Math.max(1, clips.length)) * 45);
+          if (st.status === 'failed') { clearInterval(t); reject(new Error('Server trim job failed')); return; }
+          if (clips.length && completed.length === clips.length) {
+            clearInterval(t); completed.forEach(c => { ready[c.clipInstanceId] = c; }); resolve();
+          }
+        } catch (_) { /* transient — keep polling */ }
+      }, 2000);
+    });
+
+    // Download each segment and relink the source media path to it.
+    const results = { succeeded: 0, failed: 0, errors: [] };
+    const ids = Object.keys(ready);
+    for (let i = 0; i < ids.length; i++) {
+      const cid  = ids[i];
+      const clip = clipByInstance[cid];
+      if (!clip) continue;
+      try {
+        onProgress && onProgress('Downloading segment ' + (i + 1) + '/' + ids.length + '…', 60 + (i / ids.length) * 35);
+        const seg  = await API.getTempSegmentUrl(cid);
+        const ext  = (seg.s3Key && seg.s3Key.split('.').pop()) || 'mov';
+        const base = UI.sanitizeFilename((clip.fileName || 'clip') + '-trim-' + cid.slice(0, 8) + '.' + ext);
+        const dest = await Import._tempPath(base);
+        const r    = await API.requestExternal(seg.url);
+        if (!r.ok) throw new Error('Segment download HTTP ' + r.status);
+        await Import._writeBuffer(dest, await r.arrayBuffer());
+        if (clip.filePath) await Timeline._relinkInProject(project, clip.filePath, dest);
+        results.succeeded++;
+      } catch (e) {
+        results.failed++;
+        results.errors.push((clip && clip.fileName || 'clip') + ': ' + e.message);
+      }
+    }
+    return results;
+  };
+
   window.Timeline = Timeline;
 })();
diff --git a/services/premiere-plugin-uxp/src/tooltip.js b/services/premiere-plugin-uxp/src/tooltip.js
new file mode 100644
index 0000000..c198797
--- /dev/null
+++ b/services/premiere-plugin-uxp/src/tooltip.js
@@ -0,0 +1,78 @@
+// Hover tooltips — v1
+// Icon-first UI: every actionable control carries a [data-tip] label that
+// surfaces on hover. UXP's CSS engine can't be trusted with
+// `content: attr(data-tip)` on ::after, so we position a single floating
+// bubble with plain DOM + getBoundingClientRect (both well supported).
+
+(function () {
+  let bubble = null;
+  let timer  = null;
+
+  function ensure() {
+    if (bubble) return bubble;
+    bubble = document.createElement('div');
+    bubble.className = 'tip-bubble';
+    document.body.appendChild(bubble);
+    return bubble;
+  }
+
+  function show(el) {
+    const text = el.getAttribute('data-tip');
+    if (!text) return;
+    const tip = ensure();
+    tip.textContent = text;
+    tip.style.display = 'block';
+    tip.style.opacity = '0';
+
+    const r = el.getBoundingClientRect();
+    const t = tip.getBoundingClientRect();
+    // position:absolute on a body-level node is offset from the document
+    // origin; add scroll offset (0 in practice, body doesn't scroll) for safety.
+    const sx = window.pageXOffset || document.documentElement.scrollLeft || 0;
+    const sy = window.pageYOffset || document.documentElement.scrollTop || 0;
+    const gap = 7;
+    const pos = el.getAttribute('data-tip-pos') || 'down';
+    let x, y;
+
+    if (pos === 'right') {
+      x = r.right + gap;            y = r.top + (r.height - t.height) / 2;
+    } else if (pos === 'up') {
+      x = r.left + (r.width - t.width) / 2; y = r.top - t.height - gap;
+    } else if (pos === 'up-left') {
+      x = r.right - t.width;        y = r.top - t.height - gap;
+    } else if (pos === 'down-left') {
+      x = r.right - t.width;        y = r.bottom + gap;
+    } else {
+      x = r.left + (r.width - t.width) / 2; y = r.bottom + gap;
+    }
+
+    const vw = window.innerWidth || document.documentElement.clientWidth || 99999;
+    const vh = window.innerHeight || document.documentElement.clientHeight || 99999;
+    x = Math.max(4, Math.min(x, vw - t.width - 4));
+    y = Math.max(4, Math.min(y, vh - t.height - 4));
+    tip.style.left = (x + sx) + 'px';
+    tip.style.top  = (y + sy) + 'px';
+    tip.style.opacity = '1';
+  }
+
+  function hide() {
+    clearTimeout(timer);
+    if (bubble) { bubble.style.opacity = '0'; bubble.style.display = 'none'; }
+  }
+
+  function bind(el) {
+    el.addEventListener('mouseenter', () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => show(el), 240);
+    });
+    el.addEventListener('mouseleave', hide);
+    el.addEventListener('click', hide);
+  }
+
+  function init() {
+    document.querySelectorAll('[data-tip]').forEach(bind);
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();
diff --git a/services/premiere-plugin-uxp/styles.css b/services/premiere-plugin-uxp/styles.css
index d2b3201..8cbc2cb 100644
--- a/services/premiere-plugin-uxp/styles.css
+++ b/services/premiere-plugin-uxp/styles.css
@@ -1,60 +1,69 @@
-/* Dragonflight UXP panel — v2.1.8 */
-/* Tokens mirror services/web-ui DESIGN.md (canonical) */
+/* Dragonflight UXP panel — redesign (icon rail · full-width grid · dock)
+ * Hex tokens only (UXP's CSS engine predates oklch). Blue accent kept for
+ * continuity with the web UI. No external font loads — UXP has no network
+ * for @font-face, so we lean on the host system stack. */
 
 :root {
-  /* Surfaces */
-  --bg-0:   #0B0D11;
-  --bg-1:   #14171E;
-  --bg-2:   #1B1F27;
-  --bg-3:   #232833;
-  --bg-4:   #2D3340;
+  /* Surfaces — cool near-black blues */
+  --bg-deep:    #090B0F;
+  --bg-base:    #0E1117;
+  --bg-panel:   #14171F;
+  --bg-surface: #1B1F28;
+  --bg-raised:  #232834;
+  --bg-hover:   #2C313E;
 
-  /* Borders + hover overlays */
-  --border:          rgba(255, 255, 255, 0.06);
-  --border-strong:   rgba(255, 255, 255, 0.10);
-  --border-stronger: rgba(255, 255, 255, 0.14);
-  --hover:           rgba(255, 255, 255, 0.04);
-  --hover-strong:    rgba(255, 255, 255, 0.07);
+  /* Accent */
+  --accent:        #5B7CFA;
+  --accent-hover:  #7B96FB;
+  --accent-bright: #9DB0FC;
+  --accent-subtle: rgba(91, 124, 250, 0.14);
+  --accent-border: rgba(91, 124, 250, 0.42);
 
   /* Text */
-  --text-1: #F2F3F6;
-  --text-2: #A8AEBC;
-  --text-3: #6B7280;
-  --text-4: #4B5260;
+  --text-1: #EEF0F4;
+  --text-2: #A6ACBA;
+  --text-3: #6E7585;
+  --text-4: #474D5B;
 
-  /* Accent + status (canonical from DESIGN.md) */
-  --accent:        #5B7CFA;
-  --accent-h:      #6B89FB;
-  --accent-soft:   rgba(91, 124, 250, 0.14);
-  --accent-soft-2: rgba(91, 124, 250, 0.22);
-  --accent-text:   #B4C3FF;
+  /* Borders + hover overlays (tinted neutrals via white overlay) */
+  --border-faint:  rgba(255, 255, 255, 0.05);
+  --border:        rgba(255, 255, 255, 0.09);
+  --border-strong: rgba(255, 255, 255, 0.16);
+  --hover:         rgba(255, 255, 255, 0.04);
+  --hover-strong:  rgba(255, 255, 255, 0.07);
 
+  /* Signals */
   --success: #2DD4A8;
   --warning: #F5A623;
   --danger:  #FF5B5B;
+  --info:    #4AA3FF;
   --live:    #FF3B30;
-
   --danger-soft:  rgba(255, 91, 91, 0.14);
   --success-soft: rgba(45, 212, 168, 0.14);
 
-  /* Legacy aliases — keep so v2.1.x rules using them still resolve */
+  /* Legacy aliases — older rules / dynamic markup still resolve these */
   --ok:   var(--success);
   --warn: var(--warning);
+  --bg-1: var(--bg-base);
+  --bg-2: var(--bg-surface);
+  --bg-3: var(--bg-raised);
 
-  /* Type */
-  --font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
+  --font-sans: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
+  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
 
-  --t-fast: 80ms;
-  --t-med:  120ms;
+  --t-fast: 90ms;
+  --t-med:  150ms;
+  --ease:   cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
+
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 html, body {
-  background: var(--bg-0);
+  background: var(--bg-panel);
   color: var(--text-1);
-  font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
+  font: 12px/1.4 var(--font-sans);
   height: 100%;
   overflow: hidden;
 }
@@ -73,10 +82,10 @@ html, body {
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
-  padding: 10px 10px 0;
   overflow: hidden;
 }
 .pane.hidden { display: none; }
+.pane-connect { padding: 10px 16px 0; }
 
 /* ── connect screen ─────────────────────────────────────────────── */
 .brand {
@@ -84,172 +93,17 @@ html, body {
   flex-direction: column;
   align-items: center;
   gap: 4px;
-  padding: 12px 0 16px;
+  padding: 22px 0 20px;
 }
-.brand-icon { color: var(--accent); opacity: 0.85; }
-.brand-title { font-size: 16px; font-weight: 700; color: var(--text-1); }
+.brand-icon { color: var(--accent); opacity: 0.9; }
+.brand-title { font-size: 17px; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
 .brand-tag {
   font-size: 9px;
   font-weight: 600;
   color: var(--text-3);
-  letter-spacing: 0.1em;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
 }
-
-.field-label {
-  display: block;
-  font-size: 9.5px;
-  font-weight: 600;
-  color: var(--text-3);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  margin: 8px 0 3px;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="search"],
-select {
-  width: 100%;
-  background: var(--bg-3);
-  color: var(--text-1);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 6px 8px;
-  font-size: 12px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-input:focus, select:focus { border-color: var(--accent); }
-input[type="search"]::-webkit-search-cancel-button { display: none; }
-
-/* ── buttons ────────────────────────────────────────────────────── */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 11.5px;
-  font-weight: 600;
-  padding: 6px 10px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  background: var(--bg-3);
-  color: var(--text-1);
-  user-select: none;
-  white-space: nowrap;
-}
-.btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
-.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
-.btn-primary:not(:disabled):hover { background: var(--accent-h); border-color: var(--accent-h); }
-.btn-secondary { background: var(--bg-3); border-color: var(--border); }
-.btn-secondary:not(:disabled):hover { background: var(--bg-2); }
-.btn-link { background: transparent; color: var(--text-3); border-color: transparent; padding: 3px 6px; font-weight: 500; }
-.btn-link:hover { color: var(--text-1); }
-.btn-icon { padding: 4px 7px; background: var(--bg-2); border-color: var(--border); }
-.btn-icon:hover { background: var(--bg-3); }
-.btn-sm { font-size: 11px; padding: 5px 8px; }
-
-#connect-btn { margin-top: 12px; width: 100%; padding: 8px; }
-
-/* ── status msg ──────────────────────────────────────────────────── */
-.status-msg { font-size: 11px; margin-top: 6px; min-height: 16px; }
-.status-msg.error { color: var(--danger); }
-.status-msg.muted { color: var(--text-3); }
-
-/* ── dot indicators ──────────────────────────────────────────────── */
-.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-.dot-ok  { background: var(--ok); }
-.dot-bad { background: var(--danger); }
-.dot-warn { background: var(--warn); }
-
-/* ── status strip + overflow menu (v2.1.8 redesign) ──────────────── */
-/* 24px-tall identity bar. Disconnect lives behind ⋯ — out of the way
-   but discoverable. Legacy `.connected-bar` rule is kept as an alias
-   so any markup that still uses the old class falls through cleanly. */
-.connected-bar,
-.status-strip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 8px;
-  height: 24px;
-  background: var(--bg-1);
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 6px;
-  flex-shrink: 0;
-  position: relative;
-}
-.signal-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--success);
-  flex-shrink: 0;
-}
-.connected-host {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-2);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.btn-ghost {
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-3);
-  font-size: 14px;
-  line-height: 1;
-  cursor: pointer;
-  transition: background var(--t-fast), color var(--t-fast);
-}
-.btn-ghost:hover { background: var(--hover); color: var(--text-1); }
-.menu {
-  position: absolute;
-  top: 24px;
-  right: 4px;
-  min-width: 130px;
-  background: var(--bg-2);
-  border: 1px solid var(--border-strong);
-  border-radius: 6px;
-  padding: 4px;
-  z-index: 50;
-}
-.menu-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 6px 10px;
-  font-size: 11.5px;
-  font-family: inherit;
-  background: transparent;
-  border: none;
-  color: var(--text-1);
-  border-radius: 3px;
-  cursor: pointer;
-}
-.menu-item:hover { background: var(--hover-strong); }
-
-/* Tiny version chip — verifies which build is actually running. Lives in
-   the status strip (between host and ⋯) and on the connect-pane brand. */
-.panel-version {
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  color: var(--text-4);
-  letter-spacing: 0.04em;
-  flex-shrink: 0;
-  padding-right: 2px;
-}
 .brand-version {
   font-family: var(--font-mono);
   font-size: 9.5px;
@@ -258,126 +112,360 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
   letter-spacing: 0.04em;
 }
 
-/* ── tabs ────────────────────────────────────────────────────────── */
-.tab-nav {
-  display: flex;
-  gap: 2px;
-  margin-bottom: 6px;
-  flex-shrink: 0;
-}
-.tab-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 10px;
-  font-size: 11.5px;
+.field-label {
+  display: block;
+  font-size: 9.5px;
   font-weight: 600;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
   color: var(--text-3);
-  cursor: pointer;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  margin: 10px 0 4px;
 }
-.tab-btn:hover { color: var(--text-2); background: var(--bg-2); }
-.tab-btn.active { background: var(--bg-2); color: var(--text-1); border-color: var(--border); }
 
-.badge {
+input[type="text"],
+input[type="password"],
+input[type="search"],
+select {
+  width: 100%;
+  background: var(--bg-deep);
+  color: var(--text-1);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 7px 9px;
+  font: 400 12px/1.2 var(--font-sans);
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+input:focus, select:focus {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-subtle);
+}
+input[type="search"]::-webkit-search-cancel-button { display: none; }
+
+/* ── buttons (connect + slide panels) ───────────────────────────── */
+.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  font-size: 9px;
-  font-weight: 700;
-  border-radius: 8px;
-  background: var(--danger);
-  color: #fff;
+  gap: 5px;
+  font: 600 11.5px/1 var(--font-sans);
+  padding: 7px 11px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--bg-raised);
+  color: var(--text-1);
+  user-select: none;
+  white-space: nowrap;
+  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
 }
+.btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
+.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.btn-primary:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn-secondary { background: var(--bg-surface); border-color: var(--border); }
+.btn-secondary:not(:disabled):hover { background: var(--bg-hover); }
+.btn-icon { padding: 5px 8px; background: var(--bg-surface); border-color: var(--border); }
+.btn-icon:hover { background: var(--bg-hover); }
 
-/* ── search row ──────────────────────────────────────────────────── */
-.search-row {
+#connect-btn { margin-top: 16px; width: 100%; padding: 9px; }
+
+/* ── status msg ─────────────────────────────────────────────────── */
+.status-msg { font-size: 11px; margin-top: 8px; min-height: 16px; text-align: center; }
+.status-msg.error { color: var(--danger); }
+.status-msg.muted { color: var(--text-3); }
+
+/* ── app shell ──────────────────────────────────────────────────── */
+.app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+
+.statusbar {
   display: flex;
-  gap: 4px;
-  margin-bottom: 6px;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 8px 0 10px;
+  background: var(--bg-base);
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+  position: relative;
+}
+.signal-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px var(--success);
+  flex-shrink: 0;
+}
+.connected-host {
+  flex: 1;
+  min-width: 0;
+  font: 500 11px/1 var(--font-mono);
+  color: var(--text-2);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.panel-version {
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  color: var(--text-4);
+  letter-spacing: 0.04em;
   flex-shrink: 0;
 }
-.search-row input { flex: 1; min-width: 0; }
-.search-row select { flex: 0 0 100px; min-width: 0; font-size: 11px; }
 
-/* ── seq info bar ────────────────────────────────────────────────── */
+/* overflow menu */
+.menu {
+  position: absolute;
+  top: 30px;
+  right: 6px;
+  min-width: 132px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  box-shadow: var(--shadow);
+  padding: 4px;
+  z-index: 50;
+}
+.menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 7px 10px;
+  font: 500 11.5px/1 var(--font-sans);
+  background: transparent;
+  border: none;
+  color: var(--text-1);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.menu-item:hover { background: var(--hover-strong); }
+
+/* ── full-panel screen (Export chooser) ─────────────────────────── */
+.screen {
+  position: absolute;
+  inset: 0;
+  z-index: 60;
+  background: var(--bg-base);
+  display: flex;
+  flex-direction: column;
+}
+.screen.hidden { display: none; }
+.screen-header {
+  display: flex;
+  align-items: center;
+  padding: 13px 13px 11px;
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+.screen-title { flex: 1; font: 700 14px/1 var(--font-sans); color: var(--text-1); }
+.screen-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.export-option {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 16px 14px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-faint);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
+}
+.export-option:hover { border-color: var(--accent-border); background: var(--bg-hover); }
+.eo-icon {
+  width: 42px; height: 42px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: var(--accent-subtle);
+  color: var(--accent-bright);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.eo-text { flex: 1 1 auto; min-width: 0; }
+.eo-title { font: 600 13px/1.3 var(--font-sans); color: var(--text-1); }
+.eo-desc  { font: 400 11px/1.4 var(--font-sans); color: var(--text-3); margin-top: 3px; }
+.eo-arrow { flex-shrink: 0; color: var(--text-3); font-size: 22px; line-height: 1; }
+
+.workspace { display: flex; flex: 1; min-height: 0; }
+
+/* ── icon rail ──────────────────────────────────────────────────── */
+.rail {
+  width: 44px;
+  flex-shrink: 0;
+  background: var(--bg-base);
+  border-right: 1px solid var(--border-faint);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+  gap: 2px;
+}
+/* Rail/dock controls are <div role="button"> (not <button>): UXP renders
+   native button chrome that ignores `background` and won't draw SVG-only
+   content. Divs honor backgrounds and render SVG children correctly. */
+.rail-btn {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  background: transparent;
+  border-radius: 8px;
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
+}
+.rail-btn:hover { background: var(--bg-hover); color: var(--text-1); }
+.rail-btn.active { background: var(--accent-subtle); color: var(--accent-bright); }
+.rail-btn svg { width: 18px; height: 18px; }
+.rail-btn[disabled] { opacity: 0.32; cursor: default; pointer-events: none; }
+.rail-btn--accent { color: var(--accent-bright); }
+.rail-btn--accent:hover { background: var(--accent-subtle); }
+.rail-spacer { flex: 1; }
+
+.rail-count {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--live);
+  box-shadow: 0 0 0 2px var(--bg-base);
+  color: #fff;
+  font: 700 9px/15px var(--font-sans);
+  text-align: center;
+}
+
+/* ── main column ────────────────────────────────────────────────── */
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+.search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 9px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
+}
+.search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); }
+.search svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
+.search input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  box-shadow: none;
+  color: var(--text-1);
+  font: 400 12px/1 var(--font-sans);
+}
+.search input:focus { box-shadow: none; }
+.search input::placeholder { color: var(--text-3); }
+
+.filter-select {
+  flex: 0 0 96px;
+  height: 28px;
+  padding: 0 8px;
+  font-size: 11px;
+  border-radius: 6px;
+}
+
+/* ── seq info bar ───────────────────────────────────────────────── */
 .seq-info-bar {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 8px;
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  margin-bottom: 6px;
+  margin: 8px 8px 0;
+  padding: 5px 8px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-faint);
+  border-radius: 6px;
   font-size: 11px;
   flex-shrink: 0;
 }
 .seq-info-name { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chip {
-  font-size: 9px;
-  font-weight: 700;
-  padding: 2px 5px;
-  border-radius: 3px;
+  font: 700 9px/1 var(--font-sans);
+  padding: 3px 5px;
+  border-radius: 4px;
   letter-spacing: 0.05em;
   flex-shrink: 0;
 }
-.chip-ok { background: var(--ok); color: #000; }
+.chip-ok { background: var(--success); color: #06120d; }
 
-/* ── grid container ──────────────────────────────────────────────── */
-.grid-container {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
+/* ── grid ───────────────────────────────────────────────────────── */
+.grid-container { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
 .grid-container.hidden { display: none; }
 
-/* ── asset grid ──────────────────────────────────────────────────── */
-/* UXP: no auto-fill grid, no aspect-ratio → flex-wrap + fixed sizes */
+/* UXP has no aspect-ratio + flaky auto-fill grid → flex-wrap, fixed sizes. */
 .asset-grid {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
-  padding: 2px;
+  gap: 8px;
+  padding: 10px;
   align-content: flex-start;
 }
-
 .asset-card {
-  flex: 0 0 130px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  flex: 1 1 calc(50% - 4px);
+  min-width: 0;
+  max-width: calc(50% - 4px);
+  background: var(--bg-base);
+  border: 1px solid var(--border-faint);
+  border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   position: relative;
+  transition: border-color var(--t-fast) var(--ease);
 }
-.asset-card:hover { border-color: var(--text-3); }
-.asset-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.asset-card:hover { border-color: var(--border-strong); }
+.asset-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
 
 .asset-thumb {
   width: 100%;
-  height: 75px;
+  height: 78px;
   object-fit: cover;
-  background: var(--bg-3);
+  background: var(--bg-deep);
   display: block;
   flex-shrink: 0;
 }
 .asset-thumb-placeholder {
   width: 100%;
-  height: 75px;
-  background: var(--bg-3);
+  height: 78px;
+  background: var(--bg-deep);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -385,194 +473,158 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
   font-size: 10px;
   flex-shrink: 0;
 }
-
-.asset-info { padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 2px; }
+.asset-info { padding: 6px 7px 7px; display: flex; flex-direction: column; gap: 3px; }
 .asset-name {
-  font-size: 10.5px;
+  font: 500 10.5px/1.3 var(--font-sans);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-1);
 }
-.asset-meta { font-size: 9.5px; color: var(--text-3); display: flex; gap: 5px; }
+.asset-meta {
+  font: 400 9px/1.3 var(--font-mono);
+  color: var(--text-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Status as a corner pip rather than a loud full badge */
 .asset-status {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  font-size: 8.5px;
-  font-weight: 700;
-  padding: 1px 4px;
-  border-radius: 3px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.status-live     { background: var(--live);  color: #fff; }
-.status-ingesting { background: var(--warn); color: #000; }
-.status-processing { background: var(--warn); color: #000; }
-.status-ready    { background: var(--ok);   color: #000; }
-.status-error    { background: var(--danger); color: #fff; }
-
-/* ── details panel ───────────────────────────────────────────────── */
-.details-panel {
-  flex-shrink: 0;
-  background: var(--bg-1);
-  border: 1px solid var(--border);
+  top: 6px;
+  left: 6px;
+  display: inline-flex;
+  align-items: center;
+  font: 700 8.5px/1 var(--font-sans);
+  padding: 3px 5px;
   border-radius: 4px;
-  padding: 6px 8px;
-  margin-top: 5px;
-}
-.details-panel.hidden { display: none; }
-.details-header {
-  font-size: 9.5px;
-  font-weight: 700;
-  color: var(--text-3);
+  letter-spacing: 0.05em;
   text-transform: uppercase;
-  letter-spacing: 0.07em;
-  margin-bottom: 5px;
 }
-.details-row {
-  display: flex;
-  gap: 6px;
-  font-size: 11px;
-  margin-bottom: 2px;
-  min-height: 15px;
+.status-live      { background: var(--live);    color: #fff; }
+.status-ingesting { background: var(--info);    color: #04121f; }
+.status-processing{ background: var(--info);    color: #04121f; }
+.status-ready     { background: var(--success); color: #06120d; }
+.status-error     { background: var(--danger);  color: #fff; }
+
+/* ── compact list view (toolbar toggle) ─────────────────────────── */
+.asset-grid.list-view { gap: 2px; padding: 6px 8px; }
+.asset-grid.list-view .asset-card {
+  flex: 1 1 100%;
+  max-width: 100%;
+  flex-direction: row;
+  align-items: center;
+  gap: 9px;
+  padding: 3px 8px 3px 3px;
+  border-radius: 6px;
 }
-.dl { color: var(--text-3); flex: 0 0 66px; }
-.dv { color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tags-row { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
-.tag {
-  font-size: 9.5px;
-  padding: 1px 5px;
-  background: var(--bg-3);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  color: var(--text-2);
+.asset-grid.list-view .asset-thumb,
+.asset-grid.list-view .asset-thumb-placeholder {
+  width: 50px;
+  height: 28px;
+  border-radius: 4px;
+}
+.asset-grid.list-view .asset-thumb-placeholder { font-size: 0; }
+.asset-grid.list-view .asset-info {
+  order: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  gap: 1px;
+}
+.asset-grid.list-view .asset-status {
+  order: 2;
+  position: static;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
-/* ── actions / footer ────────────────────────────────────────────── */
-.actions {
+/* ── action dock ────────────────────────────────────────────────── */
+.dock {
   flex-shrink: 0;
-  border-top: 1px solid var(--border);
-  padding: 6px 0 0;
-  margin-top: 5px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.action-row { display: flex; gap: 4px; }
-/* Compact action buttons (v2.2.0): tighter again. 20px tall, 10.5px font,
-   thinner padding. Two rows fit where one used to. */
-.action-row .btn {
-  flex: 1;
-  height: 20px;
-  padding: 0 6px;
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-
-/* ── advanced section ──────────────────────────────────────────────
-   v2.2.0: collapsible. The toggle is a tiny full-width strip with a
-   caret + label; clicking it reveals the action row below. Default
-   collapsed so the main 6 buttons stay the dominant action surface. */
-.advanced-section {
-  flex-shrink: 0;
-  border-top: 1px solid var(--border);
-  margin-top: 4px;
-}
-.advanced-toggle {
   display: flex;
   align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 4px 4px;
-  font: inherit;
+  gap: 5px;
+  padding: 7px 8px;
+  border-top: 1px solid var(--border-faint);
+  background: var(--bg-base);
+}
+.dock-sep {
+  width: 1px;
+  height: 18px;
+  margin: 0 3px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+/* ── icon button ────────────────────────────────────────────────── */
+.iconbtn {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
   background: transparent;
-  border: none;
-  border-radius: 3px;
+  border-radius: 7px;
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  color: var(--text-3);
-  transition: color var(--t-fast), background var(--t-fast);
-}
-.advanced-toggle:hover { color: var(--text-2); background: var(--hover); }
-.advanced-caret {
-  display: inline-block;
-  font-size: 8px;
-  width: 10px;
-  text-align: center;
-  transition: transform var(--t-fast);
-}
-.advanced-toggle[aria-expanded="true"] .advanced-caret { transform: rotate(90deg); }
-.advanced-title {
-  font-size: 9.5px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-}
-.advanced-body {
-  padding: 4px 0 8px;
+  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
 }
+.iconbtn:hover { background: var(--bg-hover); color: var(--text-1); }
+.iconbtn svg { width: 16px; height: 16px; }
+.iconbtn[disabled] { opacity: 0.32; cursor: default; pointer-events: none; }
+.iconbtn--sm { width: 24px; height: 24px; border-radius: 6px; color: var(--text-3); }
+.iconbtn--sm svg { width: 15px; height: 15px; }
+.iconbtn--primary { background: var(--accent); color: #fff; }
+.iconbtn--primary:not([disabled]):hover { background: var(--accent-hover); }
 
-/* ── progress ────────────────────────────────────────────────────── */
-.progress-row { display: flex; flex-direction: column; gap: 3px; }
-.progress-bar {
-  height: 5px;
-  background: var(--bg-3);
-  border-radius: 3px;
-  overflow: hidden;
-}
-#progress-fill {
-  height: 100%;
-  background: var(--accent);
-  width: 0%;
-  transition: width 100ms linear;
-}
-.progress-label { font-size: 10px; color: var(--text-3); }
+/* ── progress ───────────────────────────────────────────────────── */
+.progress-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 0; flex-shrink: 0; }
+.progress-bar { height: 5px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
+#progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 120ms linear; }
+.progress-label { font: 400 10px/1.3 var(--font-sans); color: var(--text-3); }
 
-/* ── toast ───────────────────────────────────────────────────────── */
+/* ── toast ──────────────────────────────────────────────────────── */
 .toast {
-  padding: 5px 8px;
-  border-radius: 4px;
+  margin: 8px 10px 0;
+  padding: 6px 9px;
+  border-radius: 6px;
   font-size: 11px;
-  background: var(--bg-2);
+  background: var(--bg-surface);
   border: 1px solid var(--border);
   color: var(--text-1);
+  flex-shrink: 0;
 }
-.toast.ok    { border-color: var(--ok); }
+.toast.ok    { border-color: var(--success); }
 .toast.error { border-color: var(--danger); background: var(--danger-soft); }
 
-/* ── slide panels ────────────────────────────────────────────────── */
-.slide-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.5);
-  z-index: 10;
-}
+/* ── slide panels ───────────────────────────────────────────────── */
+.slide-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 10; }
 .slide-panel {
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--bg-1);
+  bottom: 0; left: 0; right: 0;
+  background: var(--bg-panel);
   border-top: 1px solid var(--border);
-  border-radius: 8px 8px 0 0;
+  border-radius: 12px 12px 0 0;
+  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
   z-index: 11;
   display: flex;
   flex-direction: column;
-  max-height: 80%;
+  max-height: 82%;
 }
 .slide-header {
   display: flex;
   align-items: center;
-  padding: 10px 12px 8px;
-  border-bottom: 1px solid var(--border);
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid var(--border-faint);
   flex-shrink: 0;
 }
-.slide-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-1); }
+.slide-title { flex: 1; font: 700 13px/1 var(--font-sans); color: var(--text-1); }
 .slide-body {
-  padding: 10px 12px;
+  padding: 12px;
   overflow-y: auto;
   flex: 1 1 auto;
   min-height: 0;
@@ -582,75 +634,88 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
 }
 .slide-footer {
   display: flex;
-  gap: 6px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--border);
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-faint);
   flex-shrink: 0;
 }
-.slide-footer .btn { flex: 1; }
+.slide-footer .btn { flex: 1; padding: 9px; }
 
-/* ── preset cards ────────────────────────────────────────────────── */
-.preset-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 4px;
-}
+/* ── preset list ────────────────────────────────────────────────── */
+/* Single column (no flex-wrap): UXP miscomputes wrapped-flex height, which
+   collapsed the old 2-col grid and let the fields below overlap it. */
+.preset-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
 .preset-card {
-  flex: 0 0 calc(50% - 2px);
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 6px 8px;
-  cursor: pointer;
-}
-.preset-card:hover { border-color: var(--text-3); }
-.preset-card.selected { border-color: var(--accent); background: rgba(79,124,255,0.08); }
-.pc-title { font-size: 11.5px; font-weight: 700; color: var(--text-1); }
-.pc-desc  { font-size: 10px; color: var(--text-3); margin-top: 2px; }
-
-/* ── clip info ───────────────────────────────────────────────────── */
-.clip-info {
-  font-size: 11px;
-  color: var(--text-2);
-  padding: 6px 0 2px;
-}
-
-/* ── clip list (relink) ──────────────────────────────────────────── */
-.clip-list {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: baseline;
+  gap: 10px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-faint);
+  border-radius: 7px;
+  padding: 9px 11px;
+  cursor: pointer;
+  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
 }
+.preset-card:hover { border-color: var(--border-strong); }
+.preset-card.selected { border-color: var(--accent); background: var(--accent-subtle); }
+.pc-title { font: 700 11.5px/1.2 var(--font-sans); color: var(--text-1); flex-shrink: 0; }
+.pc-desc  { font: 400 10px/1.3 var(--font-mono); color: var(--text-3); margin-left: auto; text-align: right; }
+.custom-fields.hidden { display: none; }
+
+/* ── clip info / list (relink) ──────────────────────────────────── */
+.clip-info { font-size: 11px; color: var(--text-2); padding: 6px 0 2px; }
+.clip-list { display: flex; flex-direction: column; gap: 5px; }
 .clip-item {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 5px 7px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  padding: 6px 8px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-faint);
+  border-radius: 7px;
   font-size: 11px;
 }
 .clip-item input[type="checkbox"] { flex-shrink: 0; }
-.clip-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.clip-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
 .clip-item-status { flex-shrink: 0; font-size: 10px; color: var(--text-3); }
-.clip-item.matched { border-color: var(--ok); }
+.clip-item.matched { border-color: var(--success); }
 .clip-item.unmatched { opacity: 0.5; }
-
 .relink-summary {
   margin-top: 8px;
   padding: 8px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-faint);
+  border-radius: 7px;
   font-size: 11px;
   color: var(--text-2);
 }
 
-/* ── empty state ──────────────────────────────────────────────────── */
-.empty { padding: 20px; text-align: center; font-size: 12px; }
+/* ── empty / misc ───────────────────────────────────────────────── */
+.empty { padding: 24px; text-align: center; font-size: 12px; width: 100%; }
 .muted { color: var(--text-3); }
-
-/* ── misc ────────────────────────────────────────────────────────── */
 .hidden { display: none !important; }
+
+/* ── hover tooltip bubble (driven by src/tooltip.js) ────────────── */
+.tip-bubble {
+  /* UXP's engine does not reliably support position:fixed; absolute on a
+     body-level node maps to the same coords because the panel body never
+     scrolls (only .asset-grid scrolls internally). */
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  pointer-events: none;
+  white-space: nowrap;
+  background: var(--bg-raised);
+  color: var(--text-1);
+  border: 1px solid var(--border-strong);
+  box-shadow: var(--shadow);
+  font: 500 11px/1 var(--font-sans);
+  padding: 5px 8px;
+  border-radius: 6px;
+  opacity: 0;
+  transition: opacity var(--t-fast) var(--ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
+}
diff --git a/services/web-ui/public/downloads/dragonflight-mam-2.2.2.ccx b/services/web-ui/public/downloads/dragonflight-mam-2.2.2.ccx
index c452173..dddff05 100644
Binary files a/services/web-ui/public/downloads/dragonflight-mam-2.2.2.ccx and b/services/web-ui/public/downloads/dragonflight-mam-2.2.2.ccx differ