From 9d098e9778e7343a498e103546fc8da4cb608e62 Mon Sep 17 00:00:00 2001
From: Zac <zac@wilddragon.net>
Date: Sat, 30 May 2026 15:59:27 +0000
Subject: [PATCH] feat(auth-ui): interactive permissions matrix, admin 2FA
 reset, Downloads button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backend (routes/users.js):
- GET / now returns totp_enabled so the UI can show 2FA status
- GET /:id/access — admin-only effective per-project access (MAX over direct +
  group grants), labels via=direct|group:<name>; admins report all/edit
- POST /:id/totp/disable — admin clears a locked-out user's 2FA without their
  password (self-service disable still requires it); dev user blocked
- role validated against {admin,editor,viewer} on create + PATCH (was unchecked)

Frontend:
- Users>Policies tab: static prose replaced with interactive per-user matrix —
  inline role select, 2FA badge, Reset-2FA action, lazy per-user access expander
- Home "Premiere panel" tile -> "Downloads"; modal renamed, adds Teams ISO row
  (disabled "coming soon" until the .exe is supplied); UXP .ccx link unchanged
- data.jsx: window.TEAMS_ISO placeholder ({available:false})

Not runtime-tested in browser yet. Teams ISO .exe still pending from user.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 services/mam-api/src/routes/users.js     |  96 +++++++++-
 services/web-ui/public/data.jsx          |   6 +
 services/web-ui/public/screens-admin.jsx | 221 ++++++++++++++++++++---
 services/web-ui/public/screens-home.jsx  |  55 ++++--
 4 files changed, 339 insertions(+), 39 deletions(-)

diff --git a/services/mam-api/src/routes/users.js b/services/mam-api/src/routes/users.js
index b28bcb5..3e93dba 100644
--- a/services/mam-api/src/routes/users.js
+++ b/services/mam-api/src/routes/users.js
@@ -3,10 +3,12 @@
 import express from 'express';
 import pool from '../db/pool.js';
 import { hashPassword } from '../auth/passwords.js';
-import { DEV_USER_ID } from '../middleware/auth.js';
+import { DEV_USER_ID, requireAdmin } from '../middleware/auth.js';
+import { accessibleProjectIds } from '../auth/authz.js';
 
 const router = express.Router();
 const MIN_PASSWORD_LEN = 12;
+const ROLES = ['admin', 'editor', 'viewer'];
 
 function bad(res, msg) { return res.status(400).json({ error: msg }); }
 
@@ -14,7 +16,7 @@ function bad(res, msg) { return res.status(400).json({ error: msg }); }
 router.get('/', async (_req, res, next) => {
   try {
     const { rows } = await pool.query(
-      `SELECT id, username, display_name, role, last_login_at, created_at
+      `SELECT id, username, display_name, role, totp_enabled, last_login_at, created_at
        FROM users WHERE id <> $1 ORDER BY username`, [DEV_USER_ID]);
     res.json(rows);
   } catch (err) { next(err); }
@@ -26,6 +28,7 @@ router.post('/', async (req, res, next) => {
     const { username, password, display_name, role } = req.body || {};
     if (!username || typeof username !== 'string') return bad(res, 'username required');
     if (!password || password.length < MIN_PASSWORD_LEN) return bad(res, 'password must be at least ' + MIN_PASSWORD_LEN + ' chars');
+    if (role !== undefined && !ROLES.includes(role)) return bad(res, "role must be one of: " + ROLES.join(', '));
     const hash = await hashPassword(password);
     const { rows } = await pool.query(
       `INSERT INTO users (username, password_hash, display_name, role)
@@ -76,7 +79,10 @@ router.patch('/:id', async (req, res, next) => {
     if (req.params.id === DEV_USER_ID) return res.status(400).json({ error: 'cannot edit dev user' });
     const sets = []; const vals = [];
     if (typeof req.body?.display_name === 'string') { sets.push('display_name = $' + (sets.length + 1)); vals.push(req.body.display_name); }
-    if (typeof req.body?.role         === 'string') { sets.push('role = $'         + (sets.length + 1)); vals.push(req.body.role); }
+    if (typeof req.body?.role         === 'string') {
+      if (!ROLES.includes(req.body.role)) return bad(res, "role must be one of: " + ROLES.join(', '));
+      sets.push('role = $'         + (sets.length + 1)); vals.push(req.body.role);
+    }
     if (typeof req.body?.password     === 'string') {
       if (req.body.password.length < MIN_PASSWORD_LEN) return bad(res, 'password must be at least ' + MIN_PASSWORD_LEN + ' chars');
       sets.push('password_hash = $' + (sets.length + 1) + ', password_updated_at = NOW()');
@@ -93,4 +99,88 @@ router.patch('/:id', async (req, res, next) => {
   } catch (err) { next(err); }
 });
 
+// GET /:id/access — effective per-project access for one user (admin only).
+// Reuses authz.accessibleProjectIds (MAX over direct user grant + every group the
+// user belongs to). `via` is 'direct' for a user grant, 'group:<name>' otherwise.
+// When the effective level comes from several sources we report the direct grant
+// if present, else the first contributing group.
+router.get('/:id/access', requireAdmin, async (req, res, next) => {
+  try {
+    const { rows: urows } = await pool.query(
+      `SELECT id, role FROM users WHERE id = $1`, [req.params.id]);
+    if (urows.length === 0) return res.status(404).json({ error: 'user not found' });
+    const target = urows[0];
+
+    const { rows: groups } = await pool.query(
+      `SELECT g.id, g.name
+         FROM user_groups ug JOIN groups g ON g.id = ug.group_id
+        WHERE ug.user_id = $1 ORDER BY g.name`, [target.id]);
+
+    // Admins bypass scoping — every project at 'edit', via their role.
+    const access = await accessibleProjectIds(target);
+    if (access.all) {
+      const { rows: projects } = await pool.query(
+        `SELECT id, name FROM projects ORDER BY name`);
+      return res.json({
+        projects: projects.map(p => ({
+          project_id: p.id, project_name: p.name, level: 'edit', via: 'direct',
+        })),
+        groups,
+      });
+    }
+
+    const ids = [...access.ids];
+    if (ids.length === 0) return res.json({ projects: [], groups });
+
+    // Resolve names + the source of each grant. groupNameById lets us label a
+    // group-sourced grant; a direct user grant always wins the `via` label.
+    const groupNameById = new Map(groups.map(g => [g.id, g.name]));
+    const { rows: grants } = await pool.query(
+      `SELECT pa.project_id, pa.subject_type, pa.subject_id, pa.level, p.name AS project_name
+         FROM project_access pa JOIN projects p ON p.id = pa.project_id
+        WHERE (pa.subject_type = 'user'  AND pa.subject_id = $1)
+           OR (pa.subject_type = 'group' AND pa.subject_id IN (
+                SELECT group_id FROM user_groups WHERE user_id = $1
+              ))`,
+      [target.id]);
+
+    const byProject = new Map();
+    for (const g of grants) {
+      const eff = access.levelByProject.get(g.project_id);  // already the MAX
+      const via = g.subject_type === 'user'
+        ? 'direct'
+        : 'group:' + (groupNameById.get(g.subject_id) || g.subject_id);
+      const prev = byProject.get(g.project_id);
+      // Keep a row only if it carries the effective level; prefer a direct grant
+      // when both a direct and a group grant hit the same level.
+      if (g.level === eff && (!prev || (prev.via !== 'direct' && via === 'direct'))) {
+        byProject.set(g.project_id, {
+          project_id: g.project_id, project_name: g.project_name, level: eff, via,
+        });
+      }
+    }
+
+    res.json({
+      projects: [...byProject.values()].sort((a, b) => a.project_name.localeCompare(b.project_name)),
+      groups,
+    });
+  } catch (err) { next(err); }
+});
+
+// POST /:id/totp/disable — admin clears a locked-out user's 2FA WITHOUT their
+// password (the self-service /auth/totp/disable needs the victim's own). Mirrors
+// that handler's SQL but targets :id and skips the password check. Dev user blocked.
+router.post('/:id/totp/disable', requireAdmin, async (req, res, next) => {
+  try {
+    if (req.params.id === DEV_USER_ID) return res.status(400).json({ error: 'cannot edit dev user' });
+    const { rowCount } = await pool.query(
+      `UPDATE users SET totp_enabled = FALSE, totp_secret = NULL, totp_last_counter = 0
+         WHERE id = $1 AND id <> $2`,
+      [req.params.id, DEV_USER_ID]);
+    if (rowCount === 0) return res.status(404).json({ error: 'user not found' });
+    await pool.query(`DELETE FROM user_recovery_codes WHERE user_id = $1`, [req.params.id]);
+    res.status(204).end();
+  } catch (err) { next(err); }
+});
+
 export default router;
diff --git a/services/web-ui/public/data.jsx b/services/web-ui/public/data.jsx
index b940408..cd5be25 100644
--- a/services/web-ui/public/data.jsx
+++ b/services/web-ui/public/data.jsx
@@ -38,6 +38,12 @@ window.PREMIERE_RELEASES = [
 ];
 window.PREMIERE_LATEST = window.PREMIERE_RELEASES.find(r => r.latest) || window.PREMIERE_RELEASES[0];
 
+// Teams ISO workstation installer. Placeholder slot: the .exe is not in the
+// repo yet, so `available` is false and the Downloads modal renders the row
+// disabled with a "coming soon" note. Drop the file into public/downloads/
+// and flip `available: true` (set `version`) to finish it.
+window.TEAMS_ISO = { version: null, url: '/downloads/TeamsISO.exe', available: false };
+
 window.ZAMPP_DATA = {
   PROJECTS: [],
   ASSETS: [],
diff --git a/services/web-ui/public/screens-admin.jsx b/services/web-ui/public/screens-admin.jsx
index 16ae8e8..926eb75 100644
--- a/services/web-ui/public/screens-admin.jsx
+++ b/services/web-ui/public/screens-admin.jsx
@@ -258,28 +258,7 @@ function Users() {
         {tab === 'groups' && <GroupsPanel groups={groups} users={users} onChange={refreshGroups} />}
 
         {tab === 'policies' && (
-          <div className="panel" style={{ padding: '32px 24px', color: 'var(--text-2)' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-              <Icon name="lock" size={16} />
-              <div style={{ fontWeight: 600, fontSize: 14 }}>Access model</div>
-            </div>
-            <div style={{ fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.7, maxWidth: 640 }}>
-              <div style={{ marginBottom: 8 }}>
-                <strong style={{ color: 'var(--text-2)' }}>admin</strong> — full access to every
-                project plus user, group, cluster, and system administration.
-              </div>
-              <div style={{ marginBottom: 8 }}>
-                <strong style={{ color: 'var(--text-2)' }}>editor / viewer</strong> — see only the
-                projects they've been granted. A <em>view</em> grant is read-only; an
-                <em> edit</em> grant allows changes. Grants can target an individual user or a group.
-              </div>
-              <div>
-                Manage a project's grants from the <strong style={{ color: 'var(--text-2)' }}>Projects</strong> page
-                → a project's <em>Manage access…</em> menu. Group membership is managed on the
-                Groups tab above.
-              </div>
-            </div>
-          </div>
+          <PoliciesPanel users={users} onChange={refreshUsers} />
         )}
       </div>
       {showInvite && <InviteUserModal onCreated={onCreated} onClose={() => setShowInvite(false)} />}
@@ -299,6 +278,204 @@ function Users() {
   );
 }
 
+// ────────────────────────────────────────────────────────────────────────────
+// PoliciesPanel - interactive per-user permission matrix for the Policies tab.
+// Keeps the access-model explainer as a small header, then renders one row per
+// user with: inline role <select> (PATCH /users/:id), a 2FA badge driven by
+// totp_enabled, an admin-only "Reset 2FA" action (POST /users/:id/totp/disable,
+// 204), and an Access expander backed by GET /users/:id/access.
+// ────────────────────────────────────────────────────────────────────────────
+function PoliciesPanel({ users, onChange }) {
+  const [expandedId, setExpandedId] = React.useState(null);
+  const [err, setErr] = React.useState(null);
+
+  const changeRole = (u, newRole) => {
+    if (u.role === newRole) return;
+    setErr(null);
+    window.ZAMPP_API.fetch('/users/' + u.id, { method: 'PATCH', body: JSON.stringify({ role: newRole }) })
+      .then(() => onChange && onChange())
+      .catch(e => setErr('Role change failed: ' + (e.message || e)));
+  };
+
+  // Reset 2FA uses a raw fetch because ZAMPP_API.fetch throws on the 204 (no JSON
+  // body). Mirrors the disable() pattern in TotpSection.
+  const resetTotp = (u) => {
+    if (!confirm(`Reset two-factor for "${u.name}" (@${u.username})?\nThey will be able to sign in without a code until they re-enrol.`)) return;
+    setErr(null);
+    fetch('/api/v1/users/' + u.id + '/totp/disable', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'X-Requested-With': 'dragonflight-ui' },
+    })
+      .then(r => {
+        if (r.status === 204) { onChange && onChange(); return; }
+        return r.json().catch(() => ({})).then(b => { throw new Error(b.error || ('Failed (' + r.status + ')')); });
+      })
+      .catch(e => setErr('Reset 2FA failed: ' + (e.message || e)));
+  };
+
+  return (
+    <div>
+      {/* Access-model explainer (kept from the old static tab, condensed) */}
+      <div className="panel" style={{ padding: '16px 20px', marginBottom: 12, color: 'var(--text-2)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+          <Icon name="lock" size={15} />
+          <div style={{ fontWeight: 600, fontSize: 13.5 }}>Access model</div>
+        </div>
+        <div style={{ fontSize: 12, color: 'var(--text-3)', lineHeight: 1.6, maxWidth: 720 }}>
+          <strong style={{ color: 'var(--text-2)' }}>admin</strong> has full access to every project plus
+          user, group, cluster, and system administration. <strong style={{ color: 'var(--text-2)' }}>editor / viewer</strong> see
+          only the projects they're granted — a <em>view</em> grant is read-only, an <em>edit</em> grant
+          allows changes, and grants can target a user or a group. Edit per-project grants from the{' '}
+          <a href="#" onClick={e => { e.preventDefault(); window.dispatchEvent(new CustomEvent('df:nav', { detail: 'projects' })); }}
+             style={{ color: 'var(--accent-text)' }}>Projects</a> page; manage group membership on the Groups tab above.
+        </div>
+      </div>
+
+      {err && <div style={{ fontSize: 12, color: 'var(--danger)', marginBottom: 8 }}>{err}</div>}
+
+      <div className="panel">
+        <div className="user-row head">
+          <div>User</div>
+          <div>Role</div>
+          <div>2FA</div>
+          <div>Access</div>
+          <div></div>
+        </div>
+        {users.length === 0 && (
+          <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--text-3)' }}>No users found</div>
+        )}
+        {users.map(u => (
+          <UserPolicyRow key={u.id} user={u}
+            expanded={expandedId === u.id}
+            onToggle={() => setExpandedId(expandedId === u.id ? null : u.id)}
+            onChangeRole={changeRole}
+            onResetTotp={resetTotp} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function UserPolicyRow({ user: u, expanded, onToggle, onChangeRole, onResetTotp }) {
+  const [access, setAccess] = React.useState(null);  // null = not loaded, {} once fetched
+  const [loading, setLoading] = React.useState(false);
+  const [accessErr, setAccessErr] = React.useState(null);
+
+  // Lazily fetch GET /users/:id/access the first time the row is expanded.
+  React.useEffect(() => {
+    if (!expanded || access !== null) return;
+    setLoading(true); setAccessErr(null);
+    window.ZAMPP_API.fetch('/users/' + u.id + '/access')
+      .then(d => setAccess(d || {}))
+      .catch(e => { setAccess({}); setAccessErr(e.message || 'Failed to load access'); })
+      .finally(() => setLoading(false));
+  }, [expanded, access, u.id]);
+
+  const projects = (access && access.projects) || [];
+  const memberships = (access && (access.groups || access.memberships)) || [];
+
+  return (
+    <div style={{ borderBottom: '1px solid var(--border)' }}>
+      <div className="user-row" style={{ borderBottom: 'none' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <div className="avatar" style={{ width: 32, height: 32, fontSize: 11, background: avatarColor(u.initials || u.id) }}>{u.initials || '??'}</div>
+          <div>
+            <div style={{ fontWeight: 500, fontSize: 13 }}>{u.name}</div>
+            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>@{u.username}</div>
+          </div>
+        </div>
+        <div>
+          <select value={u.role || 'viewer'}
+                  onChange={e => onChangeRole(u, e.target.value)}
+                  className="field-input"
+                  style={{ width: 90, padding: '3px 6px', fontSize: 11.5, appearance: 'auto' }}>
+            <option value="admin">admin</option>
+            <option value="editor">editor</option>
+            <option value="viewer">viewer</option>
+          </select>
+        </div>
+        <div>
+          {u.totp_enabled
+            ? <span className="badge success"><Icon name="key" size={10} /> 2FA on</span>
+            : <span className="badge neutral">2FA off</span>}
+        </div>
+        <div>
+          <button className="btn ghost sm" onClick={onToggle}>
+            {expanded ? 'Hide' : 'View'}
+          </button>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          {u.totp_enabled && (
+            <button className="btn ghost sm danger" onClick={() => onResetTotp(u)} title="Disable this user's two-factor">
+              <Icon name="key" size={11} />Reset 2FA
+            </button>
+          )}
+        </div>
+      </div>
+
+      {expanded && (
+        <div style={{ padding: '0 16px 16px 16px', background: 'var(--bg-2)' }}>
+          {loading && <div style={{ padding: '12px 0', fontSize: 12.5, color: 'var(--text-3)' }}>Loading access…</div>}
+          {accessErr && <div style={{ padding: '8px 0', fontSize: 12, color: 'var(--danger)' }}>{accessErr}</div>}
+          {!loading && !accessErr && (u.role === 'admin') && (
+            <div style={{ padding: '12px 0', fontSize: 12.5, color: 'var(--text-3)', display: 'flex', alignItems: 'center', gap: 6 }}>
+              <Icon name="check" size={12} style={{ color: 'var(--success)' }} />
+              Admin — full access to every project.
+            </div>
+          )}
+          {!loading && !accessErr && u.role !== 'admin' && (
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, paddingTop: 12 }}>
+              {/* Accessible projects */}
+              <div>
+                <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8 }}>
+                  Projects ({projects.length})
+                </div>
+                {projects.length === 0 && (
+                  <div style={{ fontSize: 12, color: 'var(--text-4)' }}>No project access granted.</div>
+                )}
+                {projects.map(p => {
+                  // Backend `via` is 'direct' for a user grant, or 'group:<name>'
+                  // when inherited from a group. Split the label off the prefix.
+                  const via = p.via || 'direct';
+                  const isGroup = via.indexOf('group') === 0;
+                  const viaLabel = isGroup ? (via.indexOf(':') >= 0 ? via.slice(via.indexOf(':') + 1) : 'group') : 'direct';
+                  return (
+                    <div key={(p.project_id || p.id) + ':' + via}
+                         style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: '1px solid var(--border)' }}>
+                      <span style={{ fontSize: 12.5, flex: 1 }}>{p.project_name || p.name || p.project_id || p.id}</span>
+                      <span className={`badge ${(p.level === 'edit') ? 'accent' : 'neutral'}`}>{p.level || 'view'}</span>
+                      <span className="badge neutral" title={isGroup ? 'Inherited from group ' + viaLabel : 'Granted directly'}>
+                        <Icon name={isGroup ? 'users' : 'user'} size={9} /> {viaLabel}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+              {/* Group memberships */}
+              <div>
+                <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8 }}>
+                  Groups ({memberships.length})
+                </div>
+                {memberships.length === 0 && (
+                  <div style={{ fontSize: 12, color: 'var(--text-4)' }}>Not a member of any group.</div>
+                )}
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                  {memberships.map(g => (
+                    <span key={g.id || g.group_id || g.name} className="badge neutral" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                      <Icon name="users" size={9} />{g.name || g.group_name || g.group_id}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function EditUserModal({ user, onClose, onSaved }) {
   const [name, setName] = React.useState(user.display_name || user.name || '');
   const [saving, setSaving] = React.useState(false);
diff --git a/services/web-ui/public/screens-home.jsx b/services/web-ui/public/screens-home.jsx
index 50fe5f7..3497e47 100644
--- a/services/web-ui/public/screens-home.jsx
+++ b/services/web-ui/public/screens-home.jsx
@@ -18,7 +18,7 @@
 //   Anything that would just say "all clear" is hidden, not rendered.
 
 function Home({ navigate }) {
-  const [showPremiereDownload, setShowPremiereDownload] = React.useState(false);
+  const [showDownloads, setShowDownloads] = React.useState(false);
 
   // Pull live counts so the tile subtitles ("34 assets", "0 live", "3 running")
   // reflect what's actually in the DB right now, not a stale boot-time cache.
@@ -86,12 +86,12 @@ function Home({ navigate }) {
       desc: 'Master Control. SDI · NDI · SRT · RTMP playout, playlists, as-run.',
     },
     {
-      id: '__premiere',
-      label: 'Premiere panel',
-      icon: 'editor',
+      id: '__downloads',
+      label: 'Downloads',
+      icon: 'download',
       tone: 'purple',
-      sub: 'v' + ((window.PREMIERE_LATEST || {}).version || '·'),
-      desc: 'Download the Adobe Premiere Pro panel for frame-accurate editing.',
+      sub: 'Plugin · Teams ISO',
+      desc: 'Download the Premiere Pro UXP plugin and the Teams ISO installer.',
     },
     {
       id: 'jobs',
@@ -149,7 +149,7 @@ function Home({ navigate }) {
             <button
               key={t.id}
               className={'launcher-tile tone-' + t.tone}
-              onClick={() => t.id === '__premiere' ? setShowPremiereDownload(true) : navigate(t.id)}
+              onClick={() => t.id === '__downloads' ? setShowDownloads(true) : navigate(t.id)}
             >
               <span className="launcher-tile-icon">
                 <Icon name={t.icon} size={26} />
@@ -263,15 +263,17 @@ function Home({ navigate }) {
           )}
         </div>
       </div>
-      {showPremiereDownload && <PremiereDownloadModal onClose={() => setShowPremiereDownload(false)} />}
+      {showDownloads && <DownloadsModal onClose={() => setShowDownloads(false)} />}
     </div>
   );
 }
 
-// Modal listing all Premiere panel downloads (ZXP + Windows installer for
-// each released version). Sourced from window.PREMIERE_RELEASES, written by
-// the Settings → SDKs section in screens-admin.jsx.
-function PremiereDownloadModal({ onClose }) {
+// Modal listing all downloads: the Premiere Pro UXP plugin (.ccx, one per
+// released version, sourced from window.PREMIERE_RELEASES written by the
+// Settings → SDKs section in screens-admin.jsx) plus the Teams ISO installer
+// (window.TEAMS_ISO; the .exe slot is wired but the file may still be pending).
+function DownloadsModal({ onClose }) {
+  const teamsIso = window.TEAMS_ISO || {};
   const releases = (window.PREMIERE_RELEASES || []).slice().sort((a, b) => {
     // Newest first; fall back to lexicographic compare on version string.
     const av = String(a.version || ''), bv = String(b.version || '');
@@ -284,15 +286,40 @@ function PremiereDownloadModal({ onClose }) {
       <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 560 }}>
         <div className="modal-head">
           <div>
-            <div style={{ fontSize: 15, fontWeight: 600 }}>Premiere panel</div>
+            <div style={{ fontSize: 15, fontWeight: 600 }}>Downloads</div>
             <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>
-              Adobe Premiere Pro (UXP) integration. Install the .ccx per workstation via the Adobe UXP Developer Tool, or double-click it with Creative Cloud installed.
+              The Premiere Pro (UXP) plugin and the Teams ISO installer. Install the .ccx per workstation via the Adobe UXP Developer Tool, or double-click it with Creative Cloud installed.
             </div>
           </div>
           <button className="icon-btn" aria-label="Close" onClick={onClose}><Icon name="x" /></button>
         </div>
 
         <div className="modal-body">
+          <div className="premiere-release">
+            <div className="premiere-release-head">
+              <span className="premiere-release-version mono">Teams ISO</span>
+              {teamsIso.version && (
+                <span className="premiere-release-date mono">v{teamsIso.version}</span>
+              )}
+            </div>
+            <div className="premiere-release-notes">
+              Windows installer for the Teams ISO workstation build.
+            </div>
+            <div className="premiere-release-actions">
+              {teamsIso.available && teamsIso.url ? (
+                <a href={teamsIso.url} download className="btn primary sm">
+                  <Icon name="download" />Teams ISO (.exe)
+                </a>
+              ) : (
+                <>
+                  <span className="btn primary sm" aria-disabled="true" style={{ opacity: 0.5, pointerEvents: 'none' }}>
+                    <Icon name="download" />Teams ISO (.exe)
+                  </span>
+                  <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>coming soon — file pending</span>
+                </>
+              )}
+            </div>
+          </div>
           {releases.length === 0 && (
             <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 12 }}>
               No releases registered yet. Upload one from Settings → Capture SDKs.