feat(plex): add Plex config storage and Settings UI (TASK-342.3)

Add 5 Tauri commands (plex_config_set, plex_config_get, plex_config_clear,
plex_server_ping, plex_list_libraries) backed by tauri-plugin-store. Token
is masked on read; client_identifier persisted as UUIDv4 across reconnects.
Wiremock integration tests cover ping success/401 and library filtering.

Frontend: new Alpine settings store with plex_configured flag, Plex state
and methods in settings-view.js, settings-plex.html partial (URL input,
token input, discover libraries, connect/disconnect), wired into settings.html
between Last.fm and Stats.

Author: pythoninthegrass

app/frontend/js/api/plex.js

@@ -0,0 +1,29 @@
+/**
+ * Plex API
+ *
+ * Server configuration, ping, and library discovery.
+ */
+
+import { tauriInvoke } from './shared.js';
+
+export const plex = {
+  getConfig() {
+    return tauriInvoke('plex_config_get');
+  },
+
+  setConfig(url, token, libraries) {
+    return tauriInvoke('plex_config_set', { url, token, libraries });
+  },
+
+  clearConfig() {
+    return tauriInvoke('plex_config_clear');
+  },
+
+  ping(url, token) {
+    return tauriInvoke('plex_server_ping', { url, token });
+  },
+
+  listLibraries(url, token) {
+    return tauriInvoke('plex_list_libraries', { url, token });
+  },
+};

app/frontend/js/components/settings-view.js

@@ -1,5 +1,6 @@
 import { audio } from '../api/audio.js';
 import { lastfm } from '../api/lastfm.js';
+import { plex } from '../api/plex.js';
 import { settings } from '../api/settings.js';
 import { tauriConfirm, tauriInvoke } from '../api/shared.js';
 import { modLabel, SHORTCUT_DEFINITIONS } from '../shortcuts.js';
@@ -22,6 +23,7 @@ export function createSettingsView(Alpine) {
       { id: 'sorting', label: 'Sorting' },
       { id: 'advanced', label: 'Advanced' },
       { id: 'lastfm', label: 'Last.fm' },
+      { id: 'plex', label: 'Plex' },
       { id: 'stats', label: 'Statistics' },
     ],
 
@@ -45,6 +47,19 @@ export function createSettingsView(Alpine) {
       isResettingLoved: false,
     },
 
+    plex: {
+      url: '',
+      token: '',
+      serverName: null,
+      machineId: null,
+      version: null,
+      libraries: [],
+      selectedLibraries: [],
+      isConnecting: false,
+      isDiscovering: false,
+      connected: false,
+    },
+
     reconcileScan: {
       isRunning: false,
       lastResult: null,
@@ -220,6 +235,7 @@ export function createSettingsView(Alpine) {
       });
       await this.loadWatchedFolders();
       await this.loadLastfmSettings();
+      await this.loadPlexSettings();
       await this.loadNetworkCacheStatus();
       this.loadColumnSettings();
       this.deduplicateAcrossDirectories = window.settings.get(
@@ -856,6 +872,114 @@ export function createSettingsView(Alpine) {
       }
     },
 
+    // ============================================
+    // Plex methods
+    // ============================================
+
+    plexStatusColor() {
+      return this.plex.connected ? 'bg-green-500' : 'bg-red-500';
+    },
+
+    plexStatusText() {
+      if (this.plex.connected) {
+        return this.plex.serverName ? `Connected to ${this.plex.serverName}` : 'Connected';
+      }
+      return 'Not Connected';
+    },
+
+    async loadPlexSettings() {
+      if (!window.__TAURI__) return;
+
+      try {
+        const config = await plex.getConfig();
+        if (config?.status === 'configured') {
+          this.plex.url = config.url;
+          this.plex.token = config.token;
+          this.plex.selectedLibraries = config.libraries ?? [];
+          this.plex.connected = true;
+        }
+      } catch (error) {
+        console.error('[settings] Failed to load Plex settings:', error);
+      }
+    },
+
+    async connectPlex() {
+      if (!this.plex.url || !this.plex.token) {
+        Alpine.store('ui').toast('Server URL and token are required', 'warning');
+        return;
+      }
+
+      this.plex.isConnecting = true;
+      try {
+        const info = await plex.ping(this.plex.url, this.plex.token);
+        this.plex.serverName = info.server_name;
+        this.plex.machineId = info.machine_id;
+        this.plex.version = info.version;
+
+        await plex.setConfig(this.plex.url, this.plex.token, this.plex.selectedLibraries);
+        this.plex.connected = true;
+        Alpine.store('settings').plex_configured = true;
+        Alpine.store('ui').toast(`Connected to ${info.server_name}`, 'success');
+      } catch (error) {
+        console.error('[settings] Failed to connect to Plex:', error);
+        Alpine.store('ui').toast(`Failed to connect: ${error}`, 'error');
+      } finally {
+        this.plex.isConnecting = false;
+      }
+    },
+
+    async disconnectPlex() {
+      try {
+        await plex.clearConfig();
+        this.plex.url = '';
+        this.plex.token = '';
+        this.plex.serverName = null;
+        this.plex.machineId = null;
+        this.plex.version = null;
+        this.plex.libraries = [];
+        this.plex.selectedLibraries = [];
+        this.plex.connected = false;
+        Alpine.store('settings').plex_configured = false;
+        Alpine.store('ui').toast('Disconnected from Plex', 'success');
+      } catch (error) {
+        console.error('[settings] Failed to disconnect from Plex:', error);
+        Alpine.store('ui').toast('Failed to disconnect from Plex', 'error');
+      }
+    },
+
+    async discoverPlexLibraries() {
+      if (!this.plex.url || !this.plex.token) {
+        Alpine.store('ui').toast('Server URL and token are required', 'warning');
+        return;
+      }
+
+      this.plex.isDiscovering = true;
+      try {
+        this.plex.libraries = await plex.listLibraries(this.plex.url, this.plex.token);
+        if (this.plex.libraries.length === 0) {
+          Alpine.store('ui').toast('No music libraries found on this server', 'info');
+        }
+      } catch (error) {
+        console.error('[settings] Failed to discover Plex libraries:', error);
+        Alpine.store('ui').toast(`Failed to discover libraries: ${error}`, 'error');
+      } finally {
+        this.plex.isDiscovering = false;
+      }
+    },
+
+    plexLibrarySelected(key) {
+      return this.plex.selectedLibraries.includes(key);
+    },
+
+    togglePlexLibrary(key) {
+      const idx = this.plex.selectedLibraries.indexOf(key);
+      if (idx === -1) {
+        this.plex.selectedLibraries = [...this.plex.selectedLibraries, key];
+      } else {
+        this.plex.selectedLibraries = this.plex.selectedLibraries.filter((k) => k !== key);
+      }
+    },
+
     // ============================================
     // Column Settings methods
     // ============================================

app/frontend/js/stores/index.js

@@ -8,6 +8,7 @@
 import { createPlayerStore } from './player.js';
 import { createQueueStore } from './queue.js';
 import { createLibraryStore } from './library.js';
+import { createSettingsStore } from './settings.js';
 import { createUIStore } from './ui.js';
 import { initEventListeners } from '../events.js';
 
@@ -29,6 +30,9 @@ export function initStores(Alpine) {
   // Queue store (references player and library)
   createQueueStore(Alpine);
 
+  // Settings store (no store dependencies)
+  createSettingsStore(Alpine);
+
   console.log('[stores] All stores registered');
 
   // Initialize Tauri event listeners after stores are ready

app/frontend/js/stores/settings.js

@@ -0,0 +1,27 @@
+/**
+ * Settings Store
+ *
+ * Global settings state shared across views, including integration flags
+ * that need to be available before the settings view is opened.
+ */
+
+import { plex } from '../api/plex.js';
+
+export function createSettingsStore(Alpine) {
+  Alpine.store('settings', {
+    plex_configured: false,
+
+    init() {
+      this._loadPlexConfigured();
+    },
+
+    async _loadPlexConfigured() {
+      try {
+        const config = await plex.getConfig();
+        this.plex_configured = config?.status === 'configured' && !!config.url;
+      } catch {
+        this.plex_configured = false;
+      }
+    },
+  });
+}

app/frontend/views/settings-plex.html

@@ -0,0 +1,122 @@
+<!-- Plex Section -->
+<div x-show="isSection('plex')" data-testid="settings-section-plex">
+  <h3 class="text-xl font-semibold mb-4">Plex</h3>
+
+  <!-- Connection Status -->
+  <div class="mb-8">
+    <h4 class="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">Connection</h4>
+    <div class="bg-muted/30 rounded-lg p-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-3">
+          <div
+            class="w-3 h-3 rounded-full"
+            :class="plexStatusColor()"
+          ></div>
+          <span class="text-sm font-medium" x-text="plexStatusText()"></span>
+        </div>
+        <div class="flex gap-2">
+          <button
+            x-show="!plex.connected"
+            class="px-3 py-1.5 text-xs bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50"
+            :disabled="plex.isConnecting"
+            @click="connectPlex()"
+            data-testid="plex-connect"
+          >
+            <span x-text="plex.isConnecting ? 'Connecting...' : 'Connect'"></span>
+          </button>
+          <button
+            x-show="plex.connected"
+            class="px-3 py-1.5 text-xs bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
+            @click="disconnectPlex()"
+            data-testid="plex-disconnect"
+          >
+            Disconnect
+          </button>
+        </div>
+      </div>
+
+      <!-- Server info (shown after successful ping) -->
+      <div x-show="plex.connected && plex.machineId" class="mt-3 pt-3 border-t border-border/50 space-y-1">
+        <div class="flex justify-between text-xs">
+          <span class="text-muted-foreground">Server</span>
+          <span x-text="plex.serverName || '—'" data-testid="plex-server-name"></span>
+        </div>
+        <div class="flex justify-between text-xs">
+          <span class="text-muted-foreground">Machine ID</span>
+          <span class="font-mono" x-text="plex.machineId || '—'" data-testid="plex-machine-id"></span>
+        </div>
+        <div class="flex justify-between text-xs">
+          <span class="text-muted-foreground">Version</span>
+          <span x-text="plex.version || '—'"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Server Configuration -->
+  <div class="mb-8">
+    <h4 class="text-sm font-medium text-muted-foreground uppercase tracking-wider mb-3">Server</h4>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1.5" for="plex-url">Server URL</label>
+        <input
+          id="plex-url"
+          type="text"
+          x-model="plex.url"
+          placeholder="http://192.168.1.100:32400"
+          class="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:ring-1 focus:ring-primary focus:border-primary"
+          data-testid="plex-url-input"
+        />
+        <p class="text-xs text-muted-foreground mt-1">URL of your Plex Media Server including port</p>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium mb-1.5" for="plex-token">Plex Token</label>
+        <input
+          id="plex-token"
+          type="password"
+          x-model="plex.token"
+          placeholder="Your Plex authentication token"
+          class="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:ring-1 focus:ring-primary focus:border-primary"
+          data-testid="plex-token-input"
+        />
+        <p class="text-xs text-muted-foreground mt-1">
+          Find your token at plex.tv/web &rarr; Account &rarr; XML TV &rarr; URL parameters
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Library Selection -->
+  <div class="mb-8">
+    <div class="flex items-center justify-between mb-3">
+      <h4 class="text-sm font-medium text-muted-foreground uppercase tracking-wider">Music Libraries</h4>
+      <button
+        class="px-3 py-1.5 text-xs border border-border rounded-md hover:bg-muted/50 transition-colors disabled:opacity-50"
+        :disabled="plex.isDiscovering || !plex.url || !plex.token"
+        @click="discoverPlexLibraries()"
+        data-testid="plex-discover-libraries"
+      >
+        <span x-text="plex.isDiscovering ? 'Discovering...' : 'Discover Libraries'"></span>
+      </button>
+    </div>
+
+    <div x-show="plex.libraries.length === 0" class="px-4 py-6 rounded-md border border-dashed border-border text-center">
+      <p class="text-sm text-muted-foreground">Click "Discover Libraries" to load music libraries from your Plex server.</p>
+    </div>
+
+    <div x-show="plex.libraries.length > 0" class="space-y-2">
+      <template x-for="lib in plex.libraries" :key="lib.key">
+        <label class="flex items-center gap-3 px-3 py-2 rounded-md border border-border hover:bg-muted/30 cursor-pointer">
+          <input
+            type="checkbox"
+            :checked="plexLibrarySelected(lib.key)"
+            @change="togglePlexLibrary(lib.key)"
+            class="w-4 h-4 rounded border-border text-primary focus:ring-primary focus:ring-offset-0"
+          />
+          <span class="text-sm" x-text="lib.title"></span>
+        </label>
+      </template>
+    </div>
+  </div>
+</div>

app/frontend/views/settings.html

@@ -331,6 +331,8 @@ <h4 class="text-sm font-medium text-muted-foreground uppercase tracking-wider mb
 
     {{> settings-lastfm}}
 
+    {{> settings-plex}}
+
     {{> settings-stats}}
   </div>
 </div>