sure/app/views/settings/providers/_mercury_panel.html.erb

<div id="mercury-providers-panel" class="space-y-4">
  <% active_items = local_assigns[:mercury_items] || @mercury_items || Current.family.mercury_items.active.ordered %>
  <% credentialed_items = active_items.select(&:credentials_configured?) %>

  <div class="prose prose-sm text-secondary">
    <p class="text-primary font-medium"><%= t("mercury_items.provider_panel.setup_title") %></p>
    <ol>
      <li><%= t("mercury_items.provider_panel.instructions.sign_in_html", link: link_to("Mercury", "https://mercury.com", target: "_blank", rel: "noopener noreferrer", class: "link")) %></li>
      <li><%= t("mercury_items.provider_panel.instructions.open_tokens") %></li>
      <li><%= t("mercury_items.provider_panel.instructions.create_token") %></li>
      <li><%= t("mercury_items.provider_panel.instructions.whitelist_ip_html") %></li>
      <li><%= t("mercury_items.provider_panel.instructions.copy_token_html") %></li>
    </ol>

    <p class="text-sm text-subdued mt-2">
      <%= t("mercury_items.provider_panel.sandbox_note_html") %>
    </p>
  </div>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <div class="p-2 rounded-md bg-destructive/10 text-destructive text-sm overflow-hidden">
      <p class="line-clamp-3" title="<%= error_msg %>"><%= error_msg %></p>
    </div>
  <% end %>

  <% if active_items.any? %>
    <div class="space-y-3">
      <% active_items.each do |item| %>
        <details class="group bg-container p-4 shadow-border-xs rounded-xl">
          <summary class="flex items-center justify-between gap-2">
            <div class="flex items-center gap-3">
              <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full">
                <p class="text-blue-600 text-xs font-medium"><%= item.name.to_s.first.to_s.upcase %></p>
              </div>
              <div>
                <p class="font-medium text-primary"><%= item.name %></p>
                <p class="text-xs text-secondary"><%= item.sync_status_summary %></p>
              </div>
            </div>
          </summary>

          <div class="mt-4 space-y-4">
            <div class="flex items-center gap-2">
              <%= button_to sync_mercury_item_path(item),
                            method: :post,
                            class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-secondary hover:text-primary border border-secondary rounded-lg hover:border-primary",
                            disabled: item.syncing? do %>
                <%= icon "refresh-cw", size: "sm" %>
                <%= t("mercury_items.provider_panel.sync") %>
              <% end %>
              <%= button_to mercury_item_path(item),
                            method: :delete,
                            class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-lg",
                            data: { turbo_confirm: t("mercury_items.provider_panel.disconnect_confirm", name: item.name) } do %>
                <%= icon "trash-2", size: "sm" %>
              <% end %>
            </div>

            <%= styled_form_with model: item,
                                 url: mercury_item_path(item),
                                 scope: :mercury_item,
                                 method: :patch,
                                 data: { turbo: true },
                                 class: "space-y-3" do |form| %>
              <%= form.text_field :name,
                                  label: t("mercury_items.provider_panel.connection_name_label"),
                                  placeholder: t("mercury_items.provider_panel.connection_name_placeholder") %>

              <%= form.text_field :token,
                                  label: t("mercury_items.provider_panel.token_label"),
                                  placeholder: t("mercury_items.provider_panel.keep_token_placeholder"),
                                  type: :password,
                                  value: nil %>

              <%= form.text_field :base_url,
                                  label: t("mercury_items.provider_panel.base_url_label"),
                                  placeholder: t("mercury_items.provider_panel.base_url_placeholder"),
                                  value: item.base_url %>

              <div class="flex flex-wrap justify-end gap-2">
                <%= render DS::Link.new(
                  text: t("mercury_items.provider_panel.setup_accounts"),
                  icon: "settings",
                  variant: "secondary",
                  href: setup_accounts_mercury_item_path(item),
                  frame: :modal
                ) %>
                <%= form.submit t("mercury_items.provider_panel.update_connection"),
                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-primary transition-colors" %>
              </div>
            <% end %>
          </div>
        </details>
      <% end %>
    </div>
  <% end %>

  <details <%= "open" unless active_items.any? %> class="group bg-container p-4 shadow-border-xs rounded-xl">
    <summary class="flex items-center gap-2 text-sm font-medium text-primary">
      <%= icon "plus" %>
      <%= t("mercury_items.provider_panel.add_connection") %>
    </summary>

    <% mercury_item = Current.family.mercury_items.build(name: t("mercury_items.provider_panel.default_connection_name")) %>
    <%= styled_form_with model: mercury_item,
                         url: mercury_items_path,
                         scope: :mercury_item,
                         method: :post,
                         data: { turbo: true },
                         class: "space-y-3 mt-4" do |form| %>
      <%= form.text_field :name,
                          label: t("mercury_items.provider_panel.connection_name_label"),
                          placeholder: t("mercury_items.provider_panel.connection_name_placeholder") %>

      <%= form.text_field :token,
                          label: t("mercury_items.provider_panel.token_label"),
                          placeholder: t("mercury_items.provider_panel.token_placeholder"),
                          type: :password,
                          value: nil %>

      <%= form.text_field :base_url,
                          label: t("mercury_items.provider_panel.base_url_label"),
                          placeholder: t("mercury_items.provider_panel.base_url_placeholder") %>

      <div class="flex justify-end">
        <%= form.submit t("mercury_items.provider_panel.add_connection"),
                        class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-primary transition-colors" %>
      </div>
    <% end %>
  </details>

  <div class="flex items-center gap-2">
    <% if credentialed_items.any? %>
      <div class="w-2 h-2 bg-success rounded-full"></div>
      <p class="text-sm text-secondary"><%= t("mercury_items.provider_panel.configured_html", accounts_link: link_to(t("mercury_items.provider_panel.accounts_link"), accounts_path, class: "link")) %></p>
    <% else %>
      <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
      <p class="text-sm text-secondary"><%= t("mercury_items.provider_panel.not_configured") %></p>
    <% end %>
  </div>
</div>