Restore real custom sidebar template previews

Packages/macOS/CmuxSettings/Sources/CmuxSettings/Resources/CustomSidebarTemplates/agents-board.js

@@ -1,7 +1,7 @@
 // agents-board: subagents grouped by STATUS, attention first. The question
 // this layout answers is "what needs me right now" - needs-input sessions
 // get the loudest section at the top, everything else stays quiet.
-//   cmux right-sidebar set custom agents-board
+//   cmux sidebar set custom agents-board
 
 const STATUS_META = {
   needs_input: { label: "NEEDS YOU", color: "#FF9F0A", strong: true },

Packages/macOS/CmuxSettingsUI/Package.swift

@@ -30,6 +30,7 @@ let package = Package(
             resources: [
                 .process("Resources/Localizable.xcstrings"),
                 .copy("Resources/CustomSidebars"),
+                .copy("Resources/CustomSidebarTemplatePreviews"),
             ]
         ),
         .testTarget(

Packages/macOS/CmuxSettingsUI/Sources/CmuxSettingsUI/CustomSidebarOnboardingAssets.swift

@@ -14,6 +14,22 @@ public struct CustomSidebarOnboardingAssets: Sendable {
         catalog.templates
     }
 
+    public func previewImageURL(id: String) -> URL? {
+        previewImageURL(id: id, theme: "dark")
+    }
+
+    /// Returns the bundled light or dark preview image for a template.
+    /// - Parameters:
+    ///   - id: The template identifier.
+    ///   - theme: `light` or `dark`.
+    public func previewImageURL(id: String, theme: String) -> URL? {
+        Bundle.module.url(
+            forResource: "\(id)-\(theme)",
+            withExtension: "png",
+            subdirectory: "CustomSidebarTemplatePreviews"
+        )
+    }
+
     /// Loads the known-good interpreted-Swift starter sidebar.
     public func starterTemplate() -> CustomSidebarTemplate? {
         guard let sourceURL = Bundle.module.url(

Packages/macOS/CmuxSettingsUI/Sources/CmuxSettingsUI/Sections/CustomSidebarsSection.swift

@@ -345,6 +345,18 @@ private struct CustomSidebarTemplateGallery: View {
     @ViewBuilder
     private func templateCard(_ template: CustomSidebarTemplateDescriptor) -> some View {
         VStack(alignment: .leading, spacing: 8) {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(Color.accentColor.opacity(0.12))
+                .overlay {
+                    let theme = NSApp.effectiveAppearance.bestMatch(from: [.aqua, .darkAqua]) == .aqua ? "light" : "dark"
+                    if let url = assets.previewImageURL(id: template.id, theme: theme), let image = NSImage(contentsOf: url) {
+                        Image(nsImage: image)
+                            .resizable()
+                            .scaledToFill()
+                            .clipped()
+                    }
+                }
+                .frame(height: 105)
             Text(Bundle.module.localizedString(forKey: template.displayNameKey, value: template.displayName, table: nil))
                 .font(.headline)
             Text(Bundle.module.localizedString(forKey: template.descriptionKey, value: template.description, table: nil))