From 3dfe652ffc849af2c8b9234f2701b794e22b6bda Mon Sep 17 00:00:00 2001
From: Ben Finklea <ben@volacci.com>
Date: Mon, 26 Jan 2026 15:08:25 -0600
Subject: [PATCH] Add auto-switch to Imported tab in Media Assets panel

- Create default-imported-tab.js extension that automatically switches
  from Generated to Imported tab when Media Assets panel opens
- Uses MutationObserver to detect sidebar changes and switch tabs
- Ensures users see all output images by default instead of empty
  Generated tab (which only shows current session outputs)

Note: Also requires ComfyUI modification to seed_assets() in main.py
and server.py to include "output" folder in asset scanning.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 js/default-imported-tab.js | 89 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 js/default-imported-tab.js

diff --git a/js/default-imported-tab.js b/js/default-imported-tab.js
new file mode 100644
index 0000000..5bdbc6d
--- /dev/null
+++ b/js/default-imported-tab.js
@@ -0,0 +1,89 @@
+/**
+ * Auto-switch Media Assets panel to "Imported" tab by default
+ * This ensures users see all assets from the output folder instead of just session-generated ones
+ */
+
+import { app } from "../../scripts/app.js";
+
+// Function to switch to Imported tab
+function switchToImportedTab() {
+  const tabs = document.querySelectorAll('[role="tab"]');
+  for (const tab of tabs) {
+    const text = tab.textContent || tab.innerText || "";
+    if (text.trim() === "Imported") {
+      // Check if not already selected
+      if (tab.getAttribute("aria-selected") !== "true") {
+        tab.click();
+        console.log("[ModelSync] Switched Media Assets to Imported tab");
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// Periodically check for the Imported tab and switch to it
+function setupTabSwitcher() {
+  let switchAttempts = 0;
+  const maxAttempts = 50; // Stop after ~10 seconds of checking
+
+  const intervalId = setInterval(() => {
+    switchAttempts++;
+
+    // Look for the Imported tab
+    const importedTab = Array.from(document.querySelectorAll('[role="tab"]'))
+      .find(tab => tab.textContent?.trim() === "Imported");
+
+    if (importedTab) {
+      // Found the tab - check if Generated is currently selected
+      const generatedTab = Array.from(document.querySelectorAll('[role="tab"]'))
+        .find(tab => tab.textContent?.trim() === "Generated");
+
+      if (generatedTab && generatedTab.getAttribute("aria-selected") === "true") {
+        // Generated is selected, switch to Imported
+        importedTab.click();
+        console.log("[ModelSync] Auto-switched to Imported tab");
+      }
+    }
+
+    // Stop checking after max attempts
+    if (switchAttempts >= maxAttempts) {
+      clearInterval(intervalId);
+    }
+  }, 200);
+
+  // Also set up a MutationObserver for when new tabs appear (sidebar opens)
+  const observer = new MutationObserver(() => {
+    const importedTab = Array.from(document.querySelectorAll('[role="tab"]'))
+      .find(tab => tab.textContent?.trim() === "Imported");
+
+    if (importedTab && importedTab.getAttribute("aria-selected") !== "true") {
+      // Check if this is in the Media Assets context
+      const generatedTab = Array.from(document.querySelectorAll('[role="tab"]'))
+        .find(tab => tab.textContent?.trim() === "Generated");
+
+      if (generatedTab && generatedTab.getAttribute("aria-selected") === "true") {
+        setTimeout(() => {
+          importedTab.click();
+          console.log("[ModelSync] Auto-switched to Imported tab (via observer)");
+        }, 100);
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+
+  console.log("[ModelSync] Media Assets tab switcher initialized");
+}
+
+// Register extension
+app.registerExtension({
+  name: "ModelSync.DefaultImportedTab",
+  async setup() {
+    // Wait for ComfyUI to fully initialize, then set up the tab switcher
+    setTimeout(setupTabSwitcher, 3000);
+  }
+});