From f037210313c83b75c1b5402ef4addfde5a6fb5ea Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 18 Nov 2025 16:21:44 -0800
Subject: [PATCH 01/23] fix consistency

---
 .../select-browser-profile.ts                 | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 54d602972d..da77f7fb42 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -7,6 +7,7 @@ import orderBy from "lodash/fp/orderBy";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Profile } from "@/pages/org/types";
+import { OrgTab } from "@/routes";
 import type { APIPaginatedList } from "@/types/api";
 
 type SelectBrowserProfileChangeDetail = {
@@ -101,15 +102,11 @@ export class SelectBrowserProfile extends BtrixElement {
           ${this.selectedProfile
             ? html`
                 <span>
-                  ${msg("Last updated")}
-                  <btrix-format-date
-                    .date=${this.selectedProfile.modified}
-                    month="2-digit"
-                    day="2-digit"
-                    year="numeric"
-                    hour="2-digit"
-                    minute="2-digit"
-                  ></btrix-format-date>
+                  ${msg("Last modified")}
+                  ${this.localize.relativeDate(
+                    this.selectedProfile.modified ||
+                      this.selectedProfile.created,
+                  )}
                 </span>
                 ${this.selectedProfile.proxyId
                   ? html` <span>
@@ -117,25 +114,25 @@ export class SelectBrowserProfile extends BtrixElement {
                       <b>${this.selectedProfile.proxyId}</b>
                     </span>`
                   : ``}
-                <a
-                  class="flex items-center gap-1 text-blue-500 hover:text-blue-600"
-                  href=${`${this.navigate.orgBasePath}/browser-profiles/profile/${this.selectedProfile.id}`}
+                <btrix-link
+                  href="${this.navigate
+                    .orgBasePath}/${OrgTab.BrowserProfiles}/profile/${this
+                    .selectedProfile.id}"
                   target="_blank"
                 >
-                  ${msg("Check Profile")}
-                  <sl-icon name="box-arrow-up-right"></sl-icon>
-                </a>
+                  ${msg("View Browser Profile")}
+                </btrix-link>
               `
             : this.browserProfiles
               ? html`
-                  <a
-                    class="ml-auto flex items-center gap-1 text-blue-500 hover:text-blue-600"
-                    href=${`${this.navigate.orgBasePath}/browser-profiles`}
+                  <btrix-link
+                    class="ml-auto"
+                    href="${this.navigate
+                      .orgBasePath}/${OrgTab.BrowserProfiles}"
                     target="_blank"
                   >
-                    ${msg("View Profiles")}
-                    <sl-icon name="box-arrow-up-right"></sl-icon>
-                  </a>
+                    ${msg("View Browser Profiles")}
+                  </btrix-link>
                 `
               : nothing}
         </div>

From a00c7b52476b2d2ca4660dacf5a666f9d96d8b02 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 18 Nov 2025 17:31:01 -0800
Subject: [PATCH 02/23] show details in panel

---
 frontend/src/components/ui/link.ts            |   4 +-
 .../select-browser-profile.ts                 | 166 ++++++++++++++----
 .../browser-profiles/templates/badges.ts      |  46 +++--
 .../src/pages/org/browser-profiles/profile.ts |   5 +-
 4 files changed, 153 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/ui/link.ts b/frontend/src/components/ui/link.ts
index c833207030..ba970a2a7c 100644
--- a/frontend/src/components/ui/link.ts
+++ b/frontend/src/components/ui/link.ts
@@ -25,7 +25,7 @@ export class Link extends BtrixElement {
     return html`
       <a
         class=${clsx(
-          "group inline-flex items-center gap-1 transition-colors",
+          "group inline-flex items-center gap-1 transition-colors duration-fast",
           {
             primary: "text-primary-500 hover:text-primary-600",
             neutral: "text-blue-500 hover:text-blue-600",
@@ -42,7 +42,7 @@ export class Link extends BtrixElement {
         <sl-icon
           slot="suffix"
           name="arrow-right"
-          class="size-4 transition-transform group-hover:translate-x-1"
+          class="size-4 transition-transform duration-fast group-hover:translate-x-1"
         ></sl-icon
       ></a>
     `;
diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index da77f7fb42..3e10f2e8d1 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -1,14 +1,20 @@
 import { localized, msg } from "@lit/localize";
-import { type SlSelect } from "@shoelace-style/shoelace";
+import type { SlDrawer, SlSelect } from "@shoelace-style/shoelace";
 import { html, nothing, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
 import orderBy from "lodash/fp/orderBy";
 
+import { channelBadge, proxyBadge } from "./templates/badges";
+
 import { BtrixElement } from "@/classes/BtrixElement";
-import type { Profile } from "@/pages/org/types";
+import { none } from "@/layouts/empty";
+import { pageHeading } from "@/layouts/page";
+import { CrawlerChannelImage, type Profile } from "@/pages/org/types";
 import { OrgTab } from "@/routes";
 import type { APIPaginatedList } from "@/types/api";
+import { AppStateService } from "@/utils/state";
 
 type SelectBrowserProfileChangeDetail = {
   value: Profile | undefined;
@@ -44,6 +50,9 @@ export class SelectBrowserProfile extends BtrixElement {
   @state()
   private browserProfiles?: Profile[];
 
+  @query("sl-drawer")
+  private readonly drawer?: SlDrawer | null;
+
   willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("profileId")) {
       void this.updateSelectedProfile();
@@ -84,15 +93,13 @@ export class SelectBrowserProfile extends BtrixElement {
             <sl-option value=${profile.id}>
               ${profile.name}
               <div slot="suffix">
-                <div class="text-xs">
-                  <btrix-format-date
-                    .date=${profile.modified}
-                    month="2-digit"
-                    day="2-digit"
-                    year="numeric"
-                  ></btrix-format-date>
-                </div></div
-            ></sl-option>
+                <btrix-format-date
+                  class="text-xs"
+                  .date=${profile.modified || profile.created}
+                  dateStyle="medium"
+                ></btrix-format-date>
+              </div>
+            </sl-option>
           `,
         )}
         ${this.browserProfiles && !this.browserProfiles.length
@@ -101,27 +108,19 @@ export class SelectBrowserProfile extends BtrixElement {
         <div slot="help-text" class="flex justify-between">
           ${this.selectedProfile
             ? html`
+                <button
+                  class="text-blue-500 transition-colors duration-fast hover:text-blue-600"
+                  @click=${() => void this.drawer?.show()}
+                >
+                  ${msg("View Details")}
+                </button>
                 <span>
-                  ${msg("Last modified")}
+                  ${msg("Last saved")}
                   ${this.localize.relativeDate(
                     this.selectedProfile.modified ||
                       this.selectedProfile.created,
                   )}
                 </span>
-                ${this.selectedProfile.proxyId
-                  ? html` <span>
-                      ${msg("Using proxy: ")}
-                      <b>${this.selectedProfile.proxyId}</b>
-                    </span>`
-                  : ``}
-                <btrix-link
-                  href="${this.navigate
-                    .orgBasePath}/${OrgTab.BrowserProfiles}/profile/${this
-                    .selectedProfile.id}"
-                  target="_blank"
-                >
-                  ${msg("View Browser Profile")}
-                </btrix-link>
               `
             : this.browserProfiles
               ? html`
@@ -143,19 +142,108 @@ export class SelectBrowserProfile extends BtrixElement {
   }
 
   private renderSelectedProfileInfo() {
-    if (!this.selectedProfile?.description) return;
+    const profileContent = (profile: Profile) => {
+      const modifiedByAnyDate = [
+        profile.modifiedCrawlDate,
+        profile.modified,
+        profile.created,
+      ].reduce((a, b) => (b && a && b > a ? b : a), profile.created);
 
-    return html`<div class="my-2 rounded border pl-1">
-      <btrix-details style="--margin-bottom: 0; --border-bottom: 0;">
-        <div slot="title" class="text-xs leading-normal text-neutral-600">
-          ${msg("Description")}
-        </div>
-        <!-- display: inline -->
-        <div class="whitespace-pre-line p-3 text-xs leading-normal"
-          >${this.selectedProfile.description}</div
-        >
-      </btrix-details>
-    </div>`;
+      return html`${pageHeading({ content: msg("Overview"), level: 3 })}
+        <section class="mt-5">
+          <btrix-desc-list>
+            <btrix-desc-list-item label=${msg("Description")}>
+              ${profile.description
+                ? html`
+                    <!-- display: inline -->
+                    <div
+                      class="text-balanced whitespace-pre-line font-sans leading-relaxed text-neutral-600"
+                      >${profile.description}</div
+                    >
+                  `
+                : none}
+            </btrix-desc-list-item>
+            <btrix-desc-list-item label=${msg("Tags")}>
+              ${profile.tags.length
+                ? html`<div class="mt-1 flex flex-wrap gap-1.5">
+                    ${profile.tags.map(
+                      (tag) => html`<btrix-tag>${tag}</btrix-tag>`,
+                    )}
+                  </div>`
+                : none}
+            </btrix-desc-list-item>
+            <btrix-desc-list-item label=${msg("Crawler Channel")}>
+              ${channelBadge(
+                profile.crawlerChannel || CrawlerChannelImage.Default,
+              )}
+            </btrix-desc-list-item>
+            ${when(
+              profile.proxyId,
+              (proxy) => html`
+                <btrix-desc-list-item label=${msg("Proxy")}>
+                  ${proxyBadge(proxy)}
+                </btrix-desc-list-item>
+              `,
+            )}
+            <btrix-desc-list-item label=${msg("Last Modified")}>
+              ${this.localize.relativeDate(
+                modifiedByAnyDate || profile.created,
+              )}
+            </btrix-desc-list-item>
+          </btrix-desc-list>
+        </section>
+
+        <sl-divider class="my-5"></sl-divider>
+
+        ${pageHeading({ content: msg("Configured Sites"), level: 3 })}
+        <section class="mt-5">
+          ${profile.origins.length
+            ? html`<ul class="divide-y rounded-lg border">
+                ${profile.origins.map(
+                  (origin) => html`
+                    <li class="px-2 py-1">
+                      <btrix-code
+                        language="url"
+                        value=${origin}
+                        noWrap
+                        truncate
+                      ></btrix-code>
+                    </li>
+                  `,
+                )}
+              </ul>`
+            : none}
+        </section>
+
+        <div slot="footer" class="text-left">
+          <btrix-link
+            class="text-xs"
+            href="${this.navigate
+              .orgBasePath}/${OrgTab.BrowserProfiles}/profile/${profile.id}"
+            target="_blank"
+          >
+            ${msg("View More")}
+          </btrix-link>
+        </div> `;
+    };
+
+    return html` <sl-drawer
+      class="[--body-spacing:var(--sl-spacing-medium)] [--footer-spacing:var(--sl-spacing-x-small)_var(--sl-spacing-medium)] [--header-spacing:var(--sl-spacing-medium)]  part-[header]:[border-bottom:1px_solid_var(--sl-panel-border-color)]"
+      @sl-show=${() => {
+        // Hide any other open panels
+        AppStateService.updateUserGuideOpen(false);
+      }}
+    >
+      <span slot="label" class="flex gap-3">
+        <sl-icon
+          class="flex-shrink-0 text-base"
+          name="window-fullscreen"
+        ></sl-icon>
+        <span class="leading-4">${this.selectedProfile?.name}</span>
+      </span>
+
+      ${when(this.selectedProfile, profileContent)}
+    </sl-drawer>`;
   }
 
   private renderNoProfiles() {
diff --git a/frontend/src/features/browser-profiles/templates/badges.ts b/frontend/src/features/browser-profiles/templates/badges.ts
index 303b2810dd..50a79dfadf 100644
--- a/frontend/src/features/browser-profiles/templates/badges.ts
+++ b/frontend/src/features/browser-profiles/templates/badges.ts
@@ -16,36 +16,32 @@ export const usageBadge = (inUse: boolean) =>
     </btrix-badge>
   </sl-tooltip>`;
 
+export const channelBadge = (channel: CrawlerChannelImage | AnyString) =>
+  html`<sl-tooltip content=${msg("Crawler Release Channel")}>
+    <btrix-badge
+      variant=${channel === CrawlerChannelImage.Default ? "neutral" : "blue"}
+      class="font-monostyle"
+    >
+      <sl-icon name="boxes" class="mr-1.5"></sl-icon>
+      ${capitalize(channel)}
+    </btrix-badge>
+  </sl-tooltip>`;
+
+export const proxyBadge = (proxy: string) =>
+  html`<sl-tooltip content=${msg("Crawler Proxy Server")}>
+    <btrix-badge variant="blue" class="font-monostyle">
+      <sl-icon name="globe2" class="mr-1.5"></sl-icon>
+      ${proxy}
+    </btrix-badge>
+  </sl-tooltip>`;
+
 export const badges = (
   profile: Partial<Pick<Profile, "inUse" | "crawlerChannel" | "proxyId">>,
 ) => {
   return html`<div class="flex flex-wrap gap-3 whitespace-nowrap">
     ${profile.inUse === undefined ? nothing : usageBadge(profile.inUse)}
-    ${when(
-      profile.crawlerChannel,
-      (channel) =>
-        html`<sl-tooltip content=${msg("Crawler Release Channel")}>
-          <btrix-badge
-            variant=${channel === CrawlerChannelImage.Default
-              ? "neutral"
-              : "blue"}
-            class="font-monostyle"
-          >
-            <sl-icon name="boxes" class="mr-1.5"></sl-icon>
-            ${capitalize(channel)}
-          </btrix-badge>
-        </sl-tooltip>`,
-    )}
-    ${when(
-      profile.proxyId,
-      (proxy) =>
-        html`<sl-tooltip content=${msg("Crawler Proxy Server")}>
-          <btrix-badge variant="blue" class="font-monostyle">
-            <sl-icon name="globe2" class="mr-1.5"></sl-icon>
-            ${proxy}
-          </btrix-badge>
-        </sl-tooltip>`,
-    )}
+    ${when(profile.crawlerChannel, channelBadge)}
+    ${when(profile.proxyId, proxyBadge)}
   </div> `;
 };
 
diff --git a/frontend/src/pages/org/browser-profiles/profile.ts b/frontend/src/pages/org/browser-profiles/profile.ts
index dc33472519..3b1dac2837 100644
--- a/frontend/src/pages/org/browser-profiles/profile.ts
+++ b/frontend/src/pages/org/browser-profiles/profile.ts
@@ -364,10 +364,11 @@ export class BrowserProfilesProfilePage extends BtrixElement {
                 <sl-icon name="window" class="mx-2 block"></sl-icon>
               </sl-tooltip>
               <btrix-code
-                class="block flex-1 truncate"
+                class="block flex-1"
                 language="url"
                 value=${origin}
-                nowrap
+                noWrap
+                truncate
               ></btrix-code>
             </button>
 

From 4ef2ffa65257baae8517bc51bc5ece0ebb383e78 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 15:02:14 -0800
Subject: [PATCH 03/23] disable proxy selection

---
 .../src/components/ui/select-crawler-proxy.ts | 21 ++++++++++++++++-
 frontend/src/controllers/localize.ts          |  6 ++++-
 .../select-browser-profile.ts                 | 10 ++++++--
 .../crawl-workflows/workflow-editor.ts        | 23 ++++++++++++++++---
 .../src/pages/org/browser-profiles-list.ts    |  2 +-
 .../src/pages/org/browser-profiles/profile.ts |  4 +++-
 6 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ui/select-crawler-proxy.ts b/frontend/src/components/ui/select-crawler-proxy.ts
index abe19b5a76..b9526eb88b 100644
--- a/frontend/src/components/ui/select-crawler-proxy.ts
+++ b/frontend/src/components/ui/select-crawler-proxy.ts
@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import type { SlSelect } from "@shoelace-style/shoelace";
-import { html } from "lit";
+import { html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -49,6 +49,12 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   size?: SlSelect["size"];
 
+  @property({ type: String })
+  helpText?: string;
+
+  @property({ type: Boolean })
+  disabled?: boolean;
+
   @state()
   private selectedProxy?: Proxy;
 
@@ -59,6 +65,18 @@ export class SelectCrawlerProxy extends BtrixElement {
     return this.selectedProxy?.id || "";
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("proxyId")) {
+      if (this.proxyId) {
+        this.selectedProxy = this.proxyServers.find(
+          ({ id }) => id === this.proxyId,
+        );
+      } else if (changedProperties.get("proxyId")) {
+        this.selectedProxy = undefined;
+      }
+    }
+  }
+
   protected firstUpdated() {
     void this.initProxies();
   }
@@ -82,6 +100,7 @@ export class SelectCrawlerProxy extends BtrixElement {
           : msg("No Proxy")}
         hoist
         clearable
+        ?disabled=${this.disabled}
         size=${ifDefined(this.size)}
         @sl-change=${this.onChange}
         @sl-hide=${this.stopProp}
diff --git a/frontend/src/controllers/localize.ts b/frontend/src/controllers/localize.ts
index 328d780a14..f70bb3aecb 100644
--- a/frontend/src/controllers/localize.ts
+++ b/frontend/src/controllers/localize.ts
@@ -55,7 +55,11 @@ export class LocalizeController extends SlLocalizeController {
               })
             : seconds > 60
               ? html`<sl-relative-time
-                  class=${ifDefined(capitalize ? tw`capitalize` : undefined)}
+                  class=${ifDefined(
+                    capitalize
+                      ? tw`inline-block first-letter:capitalize`
+                      : undefined,
+                  )}
                   sync
                   date=${dateStr}
                 ></sl-relative-time>`
diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 3e10f2e8d1..64576b313e 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -1,5 +1,9 @@
 import { localized, msg } from "@lit/localize";
-import type { SlDrawer, SlSelect } from "@shoelace-style/shoelace";
+import type {
+  SlChangeEvent,
+  SlDrawer,
+  SlSelect,
+} from "@shoelace-style/shoelace";
 import { html, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -119,6 +123,7 @@ export class SelectBrowserProfile extends BtrixElement {
                   ${this.localize.relativeDate(
                     this.selectedProfile.modified ||
                       this.selectedProfile.created,
+                    { capitalize: true },
                   )}
                 </span>
               `
@@ -188,6 +193,7 @@ export class SelectBrowserProfile extends BtrixElement {
             <btrix-desc-list-item label=${msg("Last Modified")}>
               ${this.localize.relativeDate(
                 modifiedByAnyDate || profile.created,
+                { capitalize: true },
               )}
             </btrix-desc-list-item>
           </btrix-desc-list>
@@ -279,7 +285,7 @@ export class SelectBrowserProfile extends BtrixElement {
     `;
   }
 
-  private async onChange(e: Event) {
+  private async onChange(e: SlChangeEvent) {
     this.selectedProfile = this.browserProfiles?.find(
       ({ id }) => id === (e.target as SlSelect | null)?.value,
     );
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 68942af1eb..7a2bfd4769 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -1987,10 +1987,14 @@ https://archiveweb.page/images/${"logo.svg"}`}
       ${inputCol(html`
         <btrix-select-browser-profile
           .profileId=${this.formState.browserProfile?.id}
-          @on-change=${(e: SelectBrowserProfileChangeEvent) =>
+          @on-change=${(e: SelectBrowserProfileChangeEvent) => {
+            const profile = e.detail.value;
+
             this.updateFormState({
-              browserProfile: e.detail.value ?? null,
-            })}
+              browserProfile: profile ?? null,
+              proxyId: profile?.proxyId ?? null,
+            });
+          }}
         ></btrix-select-browser-profile>
       `)}
       ${this.renderHelpTextCol(infoTextFor["browserProfile"])}
@@ -2003,11 +2007,24 @@ https://archiveweb.page/images/${"logo.svg"}`}
                 )}
                 .proxyServers=${proxies.servers}
                 .proxyId="${this.formState.proxyId || ""}"
+                ?disabled=${!!this.formState.browserProfile}
                 @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                   this.updateFormState({
                     proxyId: e.detail.value,
                   })}
               ></btrix-select-crawler-proxy>
+              ${when(
+                this.formState.browserProfile,
+                () => html`
+                  <div class="form-help-text">
+                    <sl-icon
+                      class="mr-0.5 align-[-.175em]"
+                      name="info-circle"
+                    ></sl-icon>
+                    ${msg("Using proxy from browser profile.")}
+                  </div>
+                `,
+              )}
             `),
             this.renderHelpTextCol(infoTextFor["proxyId"]),
           ]
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 394b7a2cbf..2788395b23 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -564,7 +564,7 @@ export class BrowserProfilesList extends BtrixElement {
             : nothing}
         </btrix-table-cell>
         <btrix-table-cell>
-          ${this.localize.relativeDate(modifiedByAnyDate)}
+          ${this.localize.relativeDate(modifiedByAnyDate, { capitalize: true })}
         </btrix-table-cell>
         <btrix-table-cell class="p-0">
           ${this.renderActions(data)}
diff --git a/frontend/src/pages/org/browser-profiles/profile.ts b/frontend/src/pages/org/browser-profiles/profile.ts
index 3b1dac2837..cae1a86e26 100644
--- a/frontend/src/pages/org/browser-profiles/profile.ts
+++ b/frontend/src/pages/org/browser-profiles/profile.ts
@@ -468,7 +468,9 @@ export class BrowserProfilesProfilePage extends BtrixElement {
           </btrix-desc-list-item>
           <btrix-desc-list-item label=${msg("Last Modified")}>
             ${this.renderDetail((profile) =>
-              this.localize.relativeDate(modifiedByAnyDate || profile.created),
+              this.localize.relativeDate(modifiedByAnyDate || profile.created, {
+                capitalize: true,
+              }),
             )}
           </btrix-desc-list-item>
           <btrix-desc-list-item label=${msg("Last Modified By")}>

From 05dea238fdd929cf858b63d0b75354aa36eac7ad Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 15:24:16 -0800
Subject: [PATCH 04/23] update badges

---
 .../select-browser-profile.ts                 | 13 +++---
 .../browser-profiles/templates/badges.ts      | 44 ++++++++----------
 .../features/crawls/crawler-channel-badge.ts  | 46 +++++++++++++++++++
 frontend/src/features/crawls/index.ts         |  2 +
 frontend/src/features/crawls/proxy-badge.ts   | 38 +++++++++++++++
 5 files changed, 112 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/features/crawls/crawler-channel-badge.ts
 create mode 100644 frontend/src/features/crawls/proxy-badge.ts

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 64576b313e..3b929a20df 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -10,8 +10,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import orderBy from "lodash/fp/orderBy";
 
-import { channelBadge, proxyBadge } from "./templates/badges";
-
 import { BtrixElement } from "@/classes/BtrixElement";
 import { none } from "@/layouts/empty";
 import { pageHeading } from "@/layouts/page";
@@ -178,15 +176,16 @@ export class SelectBrowserProfile extends BtrixElement {
                 : none}
             </btrix-desc-list-item>
             <btrix-desc-list-item label=${msg("Crawler Channel")}>
-              ${channelBadge(
-                profile.crawlerChannel || CrawlerChannelImage.Default,
-              )}
+              <btrix-crawler-channel-badge
+                channelId=${profile.crawlerChannel ||
+                CrawlerChannelImage.Default}
+              ></btrix-crawler-channel-badge>
             </btrix-desc-list-item>
             ${when(
               profile.proxyId,
-              (proxy) => html`
+              (proxyId) => html`
                 <btrix-desc-list-item label=${msg("Proxy")}>
-                  ${proxyBadge(proxy)}
+                  <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
                 </btrix-desc-list-item>
               `,
             )}
diff --git a/frontend/src/features/browser-profiles/templates/badges.ts b/frontend/src/features/browser-profiles/templates/badges.ts
index 50a79dfadf..6378031fab 100644
--- a/frontend/src/features/browser-profiles/templates/badges.ts
+++ b/frontend/src/features/browser-profiles/templates/badges.ts
@@ -1,12 +1,15 @@
 import { msg } from "@lit/localize";
 import { html, nothing } from "lit";
 import { when } from "lit/directives/when.js";
-import capitalize from "lodash/fp/capitalize";
 
-import { CrawlerChannelImage, type Profile } from "@/types/crawler";
+import { type Profile } from "@/types/crawler";
 
 export const usageBadge = (inUse: boolean) =>
-  html`<sl-tooltip content=${msg("Crawl Workflow Usage")}>
+  html`<sl-tooltip
+    content="${msg("Crawl Workflow Usage")}: ${inUse
+      ? msg("In Use")
+      : msg("Not In Use")}"
+  >
     <btrix-badge variant=${inUse ? "cyan" : "neutral"} class="font-monostyle">
       <sl-icon
         name=${inUse ? "check-circle" : "dash-circle"}
@@ -16,32 +19,25 @@ export const usageBadge = (inUse: boolean) =>
     </btrix-badge>
   </sl-tooltip>`;
 
-export const channelBadge = (channel: CrawlerChannelImage | AnyString) =>
-  html`<sl-tooltip content=${msg("Crawler Release Channel")}>
-    <btrix-badge
-      variant=${channel === CrawlerChannelImage.Default ? "neutral" : "blue"}
-      class="font-monostyle"
-    >
-      <sl-icon name="boxes" class="mr-1.5"></sl-icon>
-      ${capitalize(channel)}
-    </btrix-badge>
-  </sl-tooltip>`;
-
-export const proxyBadge = (proxy: string) =>
-  html`<sl-tooltip content=${msg("Crawler Proxy Server")}>
-    <btrix-badge variant="blue" class="font-monostyle">
-      <sl-icon name="globe2" class="mr-1.5"></sl-icon>
-      ${proxy}
-    </btrix-badge>
-  </sl-tooltip>`;
-
 export const badges = (
   profile: Partial<Pick<Profile, "inUse" | "crawlerChannel" | "proxyId">>,
 ) => {
   return html`<div class="flex flex-wrap gap-3 whitespace-nowrap">
     ${profile.inUse === undefined ? nothing : usageBadge(profile.inUse)}
-    ${when(profile.crawlerChannel, channelBadge)}
-    ${when(profile.proxyId, proxyBadge)}
+    ${when(
+      profile.crawlerChannel,
+      (channelImage) => html`
+        <btrix-crawler-channel-badge
+          channelId=${channelImage}
+        ></btrix-crawler-channel-badge>
+      `,
+    )}
+    ${when(
+      profile.proxyId,
+      (proxyId) => html`
+        <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
+      `,
+    )}
   </div> `;
 };
 
diff --git a/frontend/src/features/crawls/crawler-channel-badge.ts b/frontend/src/features/crawls/crawler-channel-badge.ts
new file mode 100644
index 0000000000..67fbfc9b9d
--- /dev/null
+++ b/frontend/src/features/crawls/crawler-channel-badge.ts
@@ -0,0 +1,46 @@
+import { consume } from "@lit/context";
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import {
+  orgCrawlerChannelsContext,
+  type OrgCrawlerChannelsContext,
+} from "@/context/org-crawler-channels";
+import { CrawlerChannelImage } from "@/types/crawler";
+
+@customElement("btrix-crawler-channel-badge")
+@localized()
+export class CrawlerChannelBadge extends TailwindElement {
+  @consume({ context: orgCrawlerChannelsContext, subscribe: true })
+  private readonly crawlerChannels?: OrgCrawlerChannelsContext;
+
+  @property({ type: String })
+  channelId?: CrawlerChannelImage | AnyString;
+
+  render() {
+    if (!this.channelId || !this.crawlerChannels) return;
+
+    const crawlerChannel = this.crawlerChannels.find(
+      ({ id }) => id === this.channelId,
+    );
+
+    return html`<sl-tooltip
+      content="${msg("Crawler Release Channel")}${crawlerChannel
+        ? `: ${crawlerChannel.image}`
+        : ""}"
+      hoist
+    >
+      <btrix-badge
+        variant=${this.channelId === CrawlerChannelImage.Default
+          ? "neutral"
+          : "blue"}
+        class="font-monostyle"
+      >
+        <sl-icon name="boxes" class="mr-1.5"></sl-icon>
+        <span class="capitalize">${this.channelId}</span>
+      </btrix-badge>
+    </sl-tooltip>`;
+  }
+}
diff --git a/frontend/src/features/crawls/index.ts b/frontend/src/features/crawls/index.ts
index 5254170741..c19583ee20 100644
--- a/frontend/src/features/crawls/index.ts
+++ b/frontend/src/features/crawls/index.ts
@@ -1,2 +1,4 @@
 import("./crawl-list");
 import("./crawl-state-filter");
+import("./crawler-channel-badge");
+import("./proxy-badge");
diff --git a/frontend/src/features/crawls/proxy-badge.ts b/frontend/src/features/crawls/proxy-badge.ts
new file mode 100644
index 0000000000..679a3475b6
--- /dev/null
+++ b/frontend/src/features/crawls/proxy-badge.ts
@@ -0,0 +1,38 @@
+import { consume } from "@lit/context";
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { TailwindElement } from "@/classes/TailwindElement";
+import {
+  orgProxiesContext,
+  type OrgProxiesContext,
+} from "@/context/org-proxies";
+
+@customElement("btrix-proxy-badge")
+@localized()
+export class ProxyBadge extends TailwindElement {
+  @consume({ context: orgProxiesContext, subscribe: true })
+  private readonly orgProxies?: OrgProxiesContext;
+
+  @property({ type: String })
+  proxyId?: string;
+
+  render() {
+    if (!this.proxyId || !this.orgProxies) return;
+
+    const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
+
+    return html`<sl-tooltip
+      content="${msg("Crawler Proxy Server")}${proxy
+        ? `: ${proxy.description}`
+        : ""}"
+      hoist
+    >
+      <btrix-badge variant="blue" class="font-monostyle">
+        <sl-icon name="globe2" class="mr-1.5"></sl-icon>
+        ${proxy?.label || this.proxyId}
+      </btrix-badge>
+    </sl-tooltip>`;
+  }
+}

From 95d2b2cdbba7e2b9cb839d343d2072ea53a3852c Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 17:35:15 -0800
Subject: [PATCH 05/23] update select

---
 .../select-browser-profile.ts                 | 208 ++++++++++++------
 .../crawl-workflows/workflow-editor.ts        |  31 ++-
 .../features/crawls/crawler-channel-badge.ts  |   2 +-
 frontend/src/features/crawls/proxy-badge.ts   |   2 +-
 .../settings/components/crawling-defaults.ts  |   6 +-
 .../src/strings/crawl-workflows/infoText.ts   |   4 +-
 frontend/src/theme.stylesheet.css             |  13 ++
 7 files changed, 186 insertions(+), 80 deletions(-)

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 3b929a20df..4d8d2d74d7 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -1,27 +1,38 @@
 import { localized, msg } from "@lit/localize";
+import { Task } from "@lit/task";
 import type {
   SlChangeEvent,
   SlDrawer,
   SlSelect,
 } from "@shoelace-style/shoelace";
-import { html, nothing, type PropertyValues } from "lit";
+import clsx from "clsx";
+import { html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
-import orderBy from "lodash/fp/orderBy";
+import queryString from "query-string";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import { none } from "@/layouts/empty";
 import { pageHeading } from "@/layouts/page";
 import { CrawlerChannelImage, type Profile } from "@/pages/org/types";
 import { OrgTab } from "@/routes";
-import type { APIPaginatedList } from "@/types/api";
+import type {
+  APIPaginatedList,
+  APIPaginationQuery,
+  APISortQuery,
+} from "@/types/api";
+import { SortDirection } from "@/types/utils";
 import { AppStateService } from "@/utils/state";
+import { tw } from "@/utils/tailwind";
 
 type SelectBrowserProfileChangeDetail = {
   value: Profile | undefined;
 };
 
+// TODO Paginate results
+const INITIAL_PAGE_SIZE = 1000;
+
 export type SelectBrowserProfileChangeEvent =
   CustomEvent<SelectBrowserProfileChangeDetail>;
 
@@ -47,68 +58,132 @@ export class SelectBrowserProfile extends BtrixElement {
   profileId?: string;
 
   @state()
-  private selectedProfile?: Profile;
+  selectedProfile?: Profile;
 
-  @state()
-  private browserProfiles?: Profile[];
+  @query("sl-select")
+  private readonly select?: SlSelect | null;
 
   @query("sl-drawer")
   private readonly drawer?: SlDrawer | null;
 
-  willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("profileId")) {
-      void this.updateSelectedProfile();
-    }
+  public get value() {
+    return this.select?.value as string;
   }
 
-  firstUpdated() {
-    void this.updateSelectedProfile();
+  private readonly profilesTask = new Task(this, {
+    task: async (_args, { signal }) => {
+      return this.getProfiles(
+        {
+          sortBy: "name",
+          sortDirection: SortDirection.Ascending,
+          pageSize: INITIAL_PAGE_SIZE,
+        },
+        signal,
+      );
+    },
+    args: () => [] as const,
+  });
+
+  private readonly selectedProfileTask = new Task(this, {
+    task: async ([profileId, profiles], { signal }) => {
+      if (!profileId || !profiles || signal.aborted) return;
+
+      this.selectedProfile = this.findProfileById(profileId);
+    },
+    args: () => [this.profileId, this.profilesTask.value] as const,
+  });
+
+  private findProfileById(profileId?: string) {
+    if (!profileId) return;
+    return this.profilesTask.value?.items.find(({ id }) => id === profileId);
   }
 
   render() {
+    const selectedProfile = this.selectedProfile;
+    const browserProfiles = this.profilesTask.value;
+
     return html`
       <sl-select
-        name="profileid"
         label=${msg("Browser Profile")}
-        value=${this.selectedProfile?.id || ""}
-        placeholder=${this.browserProfiles
+        value=${selectedProfile?.id || ""}
+        placeholder=${browserProfiles
           ? msg("No custom profile")
           : msg("Loading")}
         size=${ifDefined(this.size)}
         hoist
+        clearable
         @sl-change=${this.onChange}
-        @sl-focus=${() => {
-          // Refetch to keep list up to date
-          void this.fetchBrowserProfiles();
-        }}
         @sl-hide=${this.stopProp}
         @sl-after-hide=${this.stopProp}
       >
-        ${this.browserProfiles
+        ${when(
+          selectedProfile?.proxyId,
+          (proxyId) => html`
+            <btrix-proxy-badge
+              slot="suffix"
+              proxyId=${proxyId}
+            ></btrix-proxy-badge>
+          `,
+        )}
+        ${browserProfiles
           ? html`
               <sl-option value="">${msg("No custom profile")}</sl-option>
-              <sl-divider></sl-divider>
+              ${browserProfiles.items.length
+                ? html`
+                    <sl-divider></sl-divider>
+                    <sl-menu-label>${msg("Saved Profiles")}</sl-menu-label>
+                  `
+                : nothing}
             `
           : html` <sl-spinner slot="prefix"></sl-spinner> `}
-        ${this.browserProfiles?.map(
-          (profile) => html`
-            <sl-option value=${profile.id}>
-              ${profile.name}
-              <div slot="suffix">
-                <btrix-format-date
-                  class="text-xs"
-                  .date=${profile.modified || profile.created}
-                  dateStyle="medium"
-                ></btrix-format-date>
+        ${browserProfiles?.items.map(
+          (profile, i) => html`
+            <sl-option
+              value=${profile.id}
+              class=${clsx(
+                tw`part-[base]:flex-wrap`,
+                tw`part-[prefix]:order-2`,
+                tw`part-[label]:order-1 part-[label]:basis-1/2 part-[label]:overflow-hidden`,
+                tw`part-[suffix]:order-3 part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
+                i && tw`border-t`,
+              )}
+            >
+              <span class="font-medium">${profile.name}</span>
+              <span
+                class="whitespace-nowrap text-xs text-neutral-500"
+                slot="prefix"
+              >
+                ${this.localize.relativeDate(
+                  profile.modified || profile.created,
+                  { capitalize: true },
+                )}
+              </span>
+              <div
+                slot="suffix"
+                class="flex w-full items-center justify-between gap-1.5 overflow-hidden pl-2.5 pt-0.5"
+              >
+                <btrix-code
+                  class="w-0 flex-1 text-xs"
+                  language="url"
+                  value=${profile.origins[0]}
+                  noWrap
+                  truncate
+                ></btrix-code>
+                ${when(
+                  profile.proxyId,
+                  (proxyId) => html`
+                    <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
+                  `,
+                )}
               </div>
             </sl-option>
           `,
         )}
-        ${this.browserProfiles && !this.browserProfiles.length
+        ${browserProfiles && !browserProfiles.total
           ? this.renderNoProfiles()
           : ""}
         <div slot="help-text" class="flex justify-between">
-          ${this.selectedProfile
+          ${selectedProfile
             ? html`
                 <button
                   class="text-blue-500 transition-colors duration-fast hover:text-blue-600"
@@ -119,13 +194,12 @@ export class SelectBrowserProfile extends BtrixElement {
                 <span>
                   ${msg("Last saved")}
                   ${this.localize.relativeDate(
-                    this.selectedProfile.modified ||
-                      this.selectedProfile.created,
+                    selectedProfile.modified || selectedProfile.created,
                     { capitalize: true },
                   )}
                 </span>
               `
-            : this.browserProfiles
+            : browserProfiles
               ? html`
                   <btrix-link
                     class="ml-auto"
@@ -140,7 +214,9 @@ export class SelectBrowserProfile extends BtrixElement {
         </div>
       </sl-select>
 
-      ${this.browserProfiles?.length ? this.renderSelectedProfileInfo() : ""}
+      ${browserProfiles || selectedProfile
+        ? this.renderSelectedProfileInfo()
+        : ""}
     `;
   }
 
@@ -285,9 +361,8 @@ export class SelectBrowserProfile extends BtrixElement {
   }
 
   private async onChange(e: SlChangeEvent) {
-    this.selectedProfile = this.browserProfiles?.find(
-      ({ id }) => id === (e.target as SlSelect | null)?.value,
-    );
+    const profileId = (e.target as SlSelect | null)?.value as string;
+    this.selectedProfile = this.findProfileById(profileId);
 
     await this.updateComplete;
 
@@ -300,43 +375,30 @@ export class SelectBrowserProfile extends BtrixElement {
     );
   }
 
-  private async updateSelectedProfile() {
-    await this.fetchBrowserProfiles();
-    await this.updateComplete;
-
-    if (this.profileId && !this.selectedProfile) {
-      this.selectedProfile = this.browserProfiles?.find(
-        ({ id }) => id === this.profileId,
-      );
-    }
-  }
-
-  /**
-   * Fetch browser profiles and update internal state
-   */
-  private async fetchBrowserProfiles(): Promise<void> {
-    try {
-      const data = await this.getProfiles();
-
-      this.browserProfiles = orderBy(["name", "modified"])(["asc", "desc"])(
-        data,
-      ) as Profile[];
-    } catch (e) {
-      this.notify.toast({
-        message: msg("Sorry, couldn't retrieve browser profiles at this time."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-        id: "browser-profile-status",
-      });
-    }
-  }
+  private async getProfiles(
+    params: {
+      userid?: string;
+      tags?: string[];
+      tagMatch?: string;
+    } & APIPaginationQuery &
+      APISortQuery,
+    signal: AbortSignal,
+  ) {
+    const query = queryString.stringify(
+      {
+        ...params,
+      },
+      {
+        arrayFormat: "none", // For tags
+      },
+    );
 
-  private async getProfiles() {
     const data = await this.api.fetch<APIPaginatedList<Profile>>(
-      `/orgs/${this.orgId}/profiles`,
+      `/orgs/${this.orgId}/profiles?${query}`,
+      { signal },
     );
 
-    return data.items;
+    return data;
   }
 
   /**
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 7a2bfd4769..09eb02193c 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -1,5 +1,6 @@
 import { consume } from "@lit/context";
 import { localized, msg, str } from "@lit/localize";
+import { Task } from "@lit/task";
 import type {
   SlBlurEvent,
   SlChangeEvent,
@@ -95,6 +96,7 @@ import {
   Behavior,
   CrawlerChannelImage,
   ScopeType,
+  type Profile,
   type Seed,
   type WorkflowParams,
 } from "@/types/crawler";
@@ -419,6 +421,15 @@ export class WorkflowEditor extends BtrixElement {
   // https://github.com/webrecorder/browsertrix-crawler/blob/v1.5.8/package.json#L23
   private readonly cssParser = createParser();
 
+  private readonly profileTask = new Task(this, {
+    task: async ([formState], { signal }) => {
+      if (!formState.browserProfile) return;
+
+      return this.getProfile(formState.browserProfile.id, signal);
+    },
+    args: () => [this.formState] as const,
+  });
+
   connectedCallback(): void {
     this.initializeEditor();
     super.connectedCallback();
@@ -1982,6 +1993,11 @@ https://archiveweb.page/images/${"logo.svg"}`}
     if (!this.formState.lang) throw new Error("missing formstate.lang");
 
     const proxies = this.proxies;
+    const selectedProfile = this.profileTask.value;
+    const selectedProxyId =
+      this.formState.browserProfile?.proxyId ||
+      selectedProfile?.proxyId ||
+      this.formState.proxyId;
 
     return html`
       ${inputCol(html`
@@ -2006,7 +2022,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
                   proxies.default_proxy_id ?? undefined,
                 )}
                 .proxyServers=${proxies.servers}
-                .proxyId="${this.formState.proxyId || ""}"
+                .proxyId=${selectedProxyId || ""}
                 ?disabled=${!!this.formState.browserProfile}
                 @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                   this.updateFormState({
@@ -2021,7 +2037,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
                       class="mr-0.5 align-[-.175em]"
                       name="info-circle"
                     ></sl-icon>
-                    ${msg("Using proxy from browser profile.")}
+                    ${msg("Using browser profile proxy settings.")}
                   </div>
                 `,
               )}
@@ -3270,7 +3286,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
       },
       crawlerChannel:
         this.formState.crawlerChannel || CrawlerChannelImage.Default,
-      proxyId: this.formState.proxyId,
+      proxyId: this.formState.browserProfile?.proxyId || this.formState.proxyId,
     };
 
     return config;
@@ -3427,4 +3443,13 @@ https://archiveweb.page/images/${"logo.svg"}`}
       console.debug(e);
     }
   }
+
+  private async getProfile(profileId: string, signal: AbortSignal) {
+    const data = await this.api.fetch<Profile>(
+      `/orgs/${this.orgId}/profiles/${profileId}`,
+      { signal },
+    );
+
+    return data;
+  }
 }
diff --git a/frontend/src/features/crawls/crawler-channel-badge.ts b/frontend/src/features/crawls/crawler-channel-badge.ts
index 67fbfc9b9d..7919400bd0 100644
--- a/frontend/src/features/crawls/crawler-channel-badge.ts
+++ b/frontend/src/features/crawls/crawler-channel-badge.ts
@@ -36,7 +36,7 @@ export class CrawlerChannelBadge extends TailwindElement {
         variant=${this.channelId === CrawlerChannelImage.Default
           ? "neutral"
           : "blue"}
-        class="font-monostyle"
+        class="font-monostyle whitespace-nowrap"
       >
         <sl-icon name="boxes" class="mr-1.5"></sl-icon>
         <span class="capitalize">${this.channelId}</span>
diff --git a/frontend/src/features/crawls/proxy-badge.ts b/frontend/src/features/crawls/proxy-badge.ts
index 679a3475b6..346164d508 100644
--- a/frontend/src/features/crawls/proxy-badge.ts
+++ b/frontend/src/features/crawls/proxy-badge.ts
@@ -29,7 +29,7 @@ export class ProxyBadge extends TailwindElement {
         : ""}"
       hoist
     >
-      <btrix-badge variant="blue" class="font-monostyle">
+      <btrix-badge variant="blue" class="font-monostyle whitespace-nowrap">
         <sl-icon name="globe2" class="mr-1.5"></sl-icon>
         ${proxy?.label || this.proxyId}
       </btrix-badge>
diff --git a/frontend/src/pages/org/settings/components/crawling-defaults.ts b/frontend/src/pages/org/settings/components/crawling-defaults.ts
index 38284065d1..14ce869f75 100644
--- a/frontend/src/pages/org/settings/components/crawling-defaults.ts
+++ b/frontend/src/pages/org/settings/components/crawling-defaults.ts
@@ -20,6 +20,7 @@ import {
   orgProxiesContext,
   type OrgProxiesContext,
 } from "@/context/org-proxies";
+import type { SelectBrowserProfile } from "@/features/browser-profiles/select-browser-profile";
 import type { CustomBehaviorsTable } from "@/features/crawl-workflows/custom-behaviors-table";
 import type { QueueExclusionTable } from "@/features/crawl-workflows/queue-exclusion-table";
 import { columns, type Cols } from "@/layouts/columns";
@@ -79,6 +80,9 @@ export class OrgSettingsCrawlWorkflows extends BtrixElement {
   @query("btrix-language-select")
   languageSelect?: LanguageSelect | null;
 
+  @query("btrix-select-browser-profile")
+  browserProfileSelect?: SelectBrowserProfile | null;
+
   @query("btrix-select-crawler-proxy")
   proxySelect?: SelectCrawlerProxy | null;
 
@@ -362,7 +366,7 @@ export class OrgSettingsCrawlWorkflows extends BtrixElement {
       behaviorTimeout: parseNumber(values.behaviorTimeoutSeconds),
       pageExtraDelay: parseNumber(values.pageExtraDelaySeconds),
       blockAds: values.blockAds === "on",
-      profileid: values.profileid,
+      profileid: this.browserProfileSelect?.value || undefined,
       crawlerChannel: values.crawlerChannel,
       proxyId: this.proxySelect?.value || undefined,
       userAgent: values.userAgent,
diff --git a/frontend/src/strings/crawl-workflows/infoText.ts b/frontend/src/strings/crawl-workflows/infoText.ts
index 042aa12c84..264bd43b26 100644
--- a/frontend/src/strings/crawl-workflows/infoText.ts
+++ b/frontend/src/strings/crawl-workflows/infoText.ts
@@ -63,7 +63,9 @@ export const infoTextFor = {
   ),
   lang: msg(`Websites that observe the browser’s language setting may serve
   content in that language if available.`),
-  proxyId: msg(`Choose a proxy to crawl through.`),
+  proxyId: msg(
+    `Choose a proxy to crawl through. If using a browser profile, the profile proxy will be used instead.`,
+  ),
   selectLinks: msg(
     html`Customize how URLs are extracted from a page. The crawler will use the
       specified
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 59842237dd..53209558e4 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -217,6 +217,19 @@
     line-height: 1.5;
   }
 
+  /* Place suffix before clear button */
+  sl-select::part(suffix) {
+    order: 1;
+  }
+
+  sl-select::part(clear-button) {
+    order: 2;
+  }
+
+  sl-select::part(expand-icon) {
+    @apply order-last;
+  }
+
   /* Align left edge with prefix icon */
   sl-menu sl-menu-label::part(base) {
     padding-left: 25px;

From 88167af626eaa4b19c5d9fca87e2c7acee984264 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 17:38:18 -0800
Subject: [PATCH 06/23] revert style changes

---
 frontend/src/theme.stylesheet.css | 34 +++----------------------------
 1 file changed, 3 insertions(+), 31 deletions(-)

diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 53209558e4..a761fdf36d 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -122,12 +122,6 @@
 }
 
 @layer components {
-  sl-skeleton {
-    --border-radius: var(--sl-border-radius-small);
-    --color: var(--sl-color-neutral-50);
-    --sheen-color: var(--sl-color-neutral-100);
-  }
-
   sl-avatar::part(base) {
     transition: var(--sl-transition-x-fast) background-color;
   }
@@ -217,19 +211,6 @@
     line-height: 1.5;
   }
 
-  /* Place suffix before clear button */
-  sl-select::part(suffix) {
-    order: 1;
-  }
-
-  sl-select::part(clear-button) {
-    order: 2;
-  }
-
-  sl-select::part(expand-icon) {
-    @apply order-last;
-  }
-
   /* Align left edge with prefix icon */
   sl-menu sl-menu-label::part(base) {
     padding-left: 25px;
@@ -250,16 +231,11 @@
   }
 
   /* Adjust menu item hover and focus styles */
-  sl-option:not([aria-selected="true"]):not(:disabled),
-  sl-menu-item:not([disabled]),
+  sl-menu-item,
   btrix-menu-item-link {
     @apply part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
   }
 
-  sl-option[aria-selected="true"] {
-    @apply part-[base]:bg-cyan-50 part-[base]:text-cyan-700;
-  }
-
   /* Add menu item variants */
   .menu-item-success {
     @apply part-[base]:text-success part-[base]:hover:bg-success-50 part-[base]:hover:text-success-700 part-[base]:focus-visible:bg-success-50;
@@ -300,12 +276,8 @@
   }
 
   /* TODO tailwind sets border-width: 0, see if this can be fixed in tw */
-  sl-divider:not([vertical]) {
-    border-top: solid var(--width) var(--color);
-  }
-
-  sl-divider[vertical] {
-    border-left: solid var(--width) var(--color);
+  sl-divider {
+    border-top-width: var(--sl-panel-border-width);
   }
 
   /* Add more spacing between radio options */

From ed56f17e609ed2d3463c63fb918b4297a3676a99 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 19 Nov 2025 17:38:59 -0800
Subject: [PATCH 07/23] prevent retranslating

---
 frontend/src/strings/crawl-workflows/infoText.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/strings/crawl-workflows/infoText.ts b/frontend/src/strings/crawl-workflows/infoText.ts
index 264bd43b26..0e7459b0e3 100644
--- a/frontend/src/strings/crawl-workflows/infoText.ts
+++ b/frontend/src/strings/crawl-workflows/infoText.ts
@@ -63,9 +63,9 @@ export const infoTextFor = {
   ),
   lang: msg(`Websites that observe the browser’s language setting may serve
   content in that language if available.`),
-  proxyId: msg(
-    `Choose a proxy to crawl through. If using a browser profile, the profile proxy will be used instead.`,
-  ),
+  proxyId: `${msg(
+    `Choose a proxy to crawl through.`,
+  )} ${msg("If using a browser profile, the profile proxy will be used instead.")}`,
   selectLinks: msg(
     html`Customize how URLs are extracted from a page. The crawler will use the
       specified

From 2a4d42114aa988257a58b26ef788d9b99c02a20f Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 20 Nov 2025 08:50:30 -0800
Subject: [PATCH 08/23] fix stylesheet merge

---
 frontend/src/theme.stylesheet.css | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index a761fdf36d..59842237dd 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -122,6 +122,12 @@
 }
 
 @layer components {
+  sl-skeleton {
+    --border-radius: var(--sl-border-radius-small);
+    --color: var(--sl-color-neutral-50);
+    --sheen-color: var(--sl-color-neutral-100);
+  }
+
   sl-avatar::part(base) {
     transition: var(--sl-transition-x-fast) background-color;
   }
@@ -231,11 +237,16 @@
   }
 
   /* Adjust menu item hover and focus styles */
-  sl-menu-item,
+  sl-option:not([aria-selected="true"]):not(:disabled),
+  sl-menu-item:not([disabled]),
   btrix-menu-item-link {
     @apply part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
   }
 
+  sl-option[aria-selected="true"] {
+    @apply part-[base]:bg-cyan-50 part-[base]:text-cyan-700;
+  }
+
   /* Add menu item variants */
   .menu-item-success {
     @apply part-[base]:text-success part-[base]:hover:bg-success-50 part-[base]:hover:text-success-700 part-[base]:focus-visible:bg-success-50;
@@ -276,8 +287,12 @@
   }
 
   /* TODO tailwind sets border-width: 0, see if this can be fixed in tw */
-  sl-divider {
-    border-top-width: var(--sl-panel-border-width);
+  sl-divider:not([vertical]) {
+    border-top: solid var(--width) var(--color);
+  }
+
+  sl-divider[vertical] {
+    border-left: solid var(--width) var(--color);
   }
 
   /* Add more spacing between radio options */

From 98697700902c8a887d324d7b1b7535e60c8ceb54 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 20 Nov 2025 09:24:15 -0800
Subject: [PATCH 09/23] decrease click area

---
 .../features/crawl-workflows/workflow-editor.ts  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 09eb02193c..60fc3cb6bc 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -644,8 +644,8 @@ export class WorkflowEditor extends BtrixElement {
         class=${clsx(
           tw`part-[base]:rounded-lg part-[base]:border part-[base]:transition-shadow part-[base]:focus:shadow`,
           tw`part-[content]:pb-8 part-[content]:[border-top:solid_1px_var(--sl-panel-border-color)]`,
-          tw`part-[header]:text-neutral-500 part-[header]:hover:text-blue-400`,
-          tw`part-[summary-icon]:[rotate:none]`,
+          tw`part-[header]:p-0 part-[header]:text-neutral-500 part-[header]:hover:text-blue-400`,
+          tw`part-[summary-icon]:mx-4 part-[summary-icon]:[rotate:none]`,
           hasError &&
             tw`part-[header]:cursor-default part-[summary-icon]:cursor-not-allowed part-[summary-icon]:text-neutral-400`,
         )}
@@ -745,7 +745,17 @@ export class WorkflowEditor extends BtrixElement {
           )}
         </div>
 
-        <p class="text-neutral-700" slot="summary">${desc}</p>
+        <p
+          class="cursor-default px-4 py-3 text-neutral-700"
+          slot="summary"
+          @click=${(e: MouseEvent) => {
+            // Decrease click target size of details header
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          ${desc}
+        </p>
         <div class="grid grid-cols-5 gap-5">${render.bind(this)()}</div>
       </sl-details>`;
     };

From b4df5ddc2d3e373cb42770af8b11a009d4e32f8a Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 20 Nov 2025 09:25:24 -0800
Subject: [PATCH 10/23] decrease click area

---
 frontend/src/features/crawl-workflows/workflow-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 60fc3cb6bc..e2adfad36f 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -746,7 +746,7 @@ export class WorkflowEditor extends BtrixElement {
         </div>
 
         <p
-          class="cursor-default px-4 py-3 text-neutral-700"
+          class="w-full cursor-default px-4 py-3 text-neutral-700"
           slot="summary"
           @click=${(e: MouseEvent) => {
             // Decrease click target size of details header

From 3d4098a182759a9a344e8abd3a2d1f90d69f2563 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Thu, 20 Nov 2025 11:10:24 -0800
Subject: [PATCH 11/23] move details to popover

---
 frontend/src/components/ui/badge.ts           |   5 +-
 .../select-browser-profile.ts                 | 158 ++++++++----------
 .../templates/origins-with-remainder.ts       |  39 +++++
 .../src/pages/org/browser-profiles-list.ts    |  21 +--
 frontend/src/theme.stylesheet.css             |   2 +
 5 files changed, 122 insertions(+), 103 deletions(-)
 create mode 100644 frontend/src/features/browser-profiles/templates/origins-with-remainder.ts

diff --git a/frontend/src/components/ui/badge.ts b/frontend/src/components/ui/badge.ts
index adc17f2b12..e679229211 100644
--- a/frontend/src/components/ui/badge.ts
+++ b/frontend/src/components/ui/badge.ts
@@ -14,7 +14,8 @@ export type BadgeVariant =
   | "cyan"
   | "blue"
   | "high-contrast"
-  | "text";
+  | "text"
+  | "text-neutral";
 
 /**
  * Show numeric value in a label
@@ -66,6 +67,7 @@ export class Badge extends TailwindElement {
                   cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
                   blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
                   text: tw`text-blue-500 ring-blue-600`,
+                  "text-neutral": tw`text-neutral-500 ring-neutral-600`,
                 }[this.variant],
               ]
             : {
@@ -78,6 +80,7 @@ export class Badge extends TailwindElement {
                 cyan: tw`bg-cyan-50 text-cyan-600`,
                 blue: tw`bg-blue-50 text-blue-600`,
                 text: tw`text-blue-500`,
+                "text-neutral": tw`text-neutral-500`,
               }[this.variant],
           this.pill
             ? [
diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 4d8d2d74d7..68668d9e17 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -12,6 +12,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
 
+import { originsWithRemainder } from "./templates/origins-with-remainder";
+
 import { BtrixElement } from "@/classes/BtrixElement";
 import { none } from "@/layouts/empty";
 import { pageHeading } from "@/layouts/page";
@@ -138,45 +140,31 @@ export class SelectBrowserProfile extends BtrixElement {
           : html` <sl-spinner slot="prefix"></sl-spinner> `}
         ${browserProfiles?.items.map(
           (profile, i) => html`
-            <sl-option
-              value=${profile.id}
-              class=${clsx(
-                tw`part-[base]:flex-wrap`,
-                tw`part-[prefix]:order-2`,
-                tw`part-[label]:order-1 part-[label]:basis-1/2 part-[label]:overflow-hidden`,
-                tw`part-[suffix]:order-3 part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
-                i && tw`border-t`,
-              )}
+            <btrix-popover
+              class="part-[body]:w-64"
+              placement="left"
+              trigger="hover"
+              hoist
             >
-              <span class="font-medium">${profile.name}</span>
-              <span
-                class="whitespace-nowrap text-xs text-neutral-500"
-                slot="prefix"
-              >
-                ${this.localize.relativeDate(
-                  profile.modified || profile.created,
-                  { capitalize: true },
+              <div slot="content">${this.renderOverview(profile)}</div>
+
+              <sl-option
+                value=${profile.id}
+                class=${clsx(
+                  tw`part-[base]:flex-wrap`,
+                  tw`part-[label]:basis-1/2 part-[label]:overflow-hidden`,
+                  tw`part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
+                  i && tw`border-t`,
                 )}
-              </span>
-              <div
-                slot="suffix"
-                class="flex w-full items-center justify-between gap-1.5 overflow-hidden pl-2.5 pt-0.5"
               >
-                <btrix-code
-                  class="w-0 flex-1 text-xs"
-                  language="url"
-                  value=${profile.origins[0]}
-                  noWrap
-                  truncate
-                ></btrix-code>
-                ${when(
-                  profile.proxyId,
-                  (proxyId) => html`
-                    <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
-                  `,
-                )}
-              </div>
-            </sl-option>
+                <span class="font-medium">${profile.name}</span>
+                <div slot="suffix" class="w-full pl-2.5 pt-0.5">
+                  ${originsWithRemainder(profile.origins, {
+                    disablePopover: true,
+                  })}
+                </div>
+              </sl-option>
+            </btrix-popover>
           `,
         )}
         ${browserProfiles && !browserProfiles.total
@@ -222,57 +210,8 @@ export class SelectBrowserProfile extends BtrixElement {
 
   private renderSelectedProfileInfo() {
     const profileContent = (profile: Profile) => {
-      const modifiedByAnyDate = [
-        profile.modifiedCrawlDate,
-        profile.modified,
-        profile.created,
-      ].reduce((a, b) => (b && a && b > a ? b : a), profile.created);
-
       return html`${pageHeading({ content: msg("Overview"), level: 3 })}
-        <section class="mt-5">
-          <btrix-desc-list>
-            <btrix-desc-list-item label=${msg("Description")}>
-              ${profile.description
-                ? html`
-                    <!-- display: inline -->
-                    <div
-                      class="text-balanced whitespace-pre-line font-sans leading-relaxed text-neutral-600"
-                      >${profile.description}</div
-                    >
-                  `
-                : none}
-            </btrix-desc-list-item>
-            <btrix-desc-list-item label=${msg("Tags")}>
-              ${profile.tags.length
-                ? html`<div class="mt-1 flex flex-wrap gap-1.5">
-                    ${profile.tags.map(
-                      (tag) => html`<btrix-tag>${tag}</btrix-tag>`,
-                    )}
-                  </div>`
-                : none}
-            </btrix-desc-list-item>
-            <btrix-desc-list-item label=${msg("Crawler Channel")}>
-              <btrix-crawler-channel-badge
-                channelId=${profile.crawlerChannel ||
-                CrawlerChannelImage.Default}
-              ></btrix-crawler-channel-badge>
-            </btrix-desc-list-item>
-            ${when(
-              profile.proxyId,
-              (proxyId) => html`
-                <btrix-desc-list-item label=${msg("Proxy")}>
-                  <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
-                </btrix-desc-list-item>
-              `,
-            )}
-            <btrix-desc-list-item label=${msg("Last Modified")}>
-              ${this.localize.relativeDate(
-                modifiedByAnyDate || profile.created,
-                { capitalize: true },
-              )}
-            </btrix-desc-list-item>
-          </btrix-desc-list>
-        </section>
+        <section class="mt-5">${this.renderOverview(profile)}</section>
 
         <sl-divider class="my-5"></sl-divider>
 
@@ -327,6 +266,53 @@ export class SelectBrowserProfile extends BtrixElement {
     </sl-drawer>`;
   }
 
+  private readonly renderOverview = (profile: Profile) => {
+    const modifiedByAnyDate = [
+      profile.modifiedCrawlDate,
+      profile.modified,
+      profile.created,
+    ].reduce((a, b) => (b && a && b > a ? b : a), profile.created);
+
+    return html`<btrix-desc-list>
+      <btrix-desc-list-item label=${msg("Description")}>
+        ${profile.description
+          ? html`
+              <!-- display: inline -->
+              <div
+                class="text-balanced line-clamp-2 whitespace-pre-line font-sans leading-relaxed text-neutral-600"
+                >${profile.description}</div
+              >
+            `
+          : none}
+      </btrix-desc-list-item>
+      <btrix-desc-list-item label=${msg("Tags")}>
+        ${profile.tags.length
+          ? html`<div class="mt-1 flex flex-wrap gap-1.5">
+              ${profile.tags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
+            </div>`
+          : none}
+      </btrix-desc-list-item>
+      <btrix-desc-list-item label=${msg("Crawler Channel")}>
+        <btrix-crawler-channel-badge
+          channelId=${profile.crawlerChannel || CrawlerChannelImage.Default}
+        ></btrix-crawler-channel-badge>
+      </btrix-desc-list-item>
+      ${when(
+        profile.proxyId,
+        (proxyId) => html`
+          <btrix-desc-list-item label=${msg("Proxy")}>
+            <btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
+          </btrix-desc-list-item>
+        `,
+      )}
+      <btrix-desc-list-item label=${msg("Last Modified")}>
+        ${this.localize.relativeDate(modifiedByAnyDate || profile.created, {
+          capitalize: true,
+        })}
+      </btrix-desc-list-item>
+    </btrix-desc-list>`;
+  };
+
   private renderNoProfiles() {
     return html`
       <div class="mx-2 text-sm text-neutral-500">
diff --git a/frontend/src/features/browser-profiles/templates/origins-with-remainder.ts b/frontend/src/features/browser-profiles/templates/origins-with-remainder.ts
new file mode 100644
index 0000000000..17080a26d9
--- /dev/null
+++ b/frontend/src/features/browser-profiles/templates/origins-with-remainder.ts
@@ -0,0 +1,39 @@
+import { html, nothing } from "lit";
+
+import type { Profile } from "@/types/crawler";
+import localize from "@/utils/localize";
+
+/**
+ * Displays primary origin with remainder in a popover badge
+ */
+export function originsWithRemainder(
+  origins: Profile["origins"],
+  { disablePopover } = { disablePopover: false },
+) {
+  const startingUrl = origins[0];
+  const otherOrigins = origins.slice(1);
+
+  return html`<div class="flex w-full items-center overflow-hidden">
+    <btrix-code
+      class="w-0 min-w-[10ch] max-w-min flex-1"
+      language="url"
+      value=${startingUrl}
+      noWrap
+      truncate
+    ></btrix-code>
+    ${otherOrigins.length
+      ? html`
+          <btrix-popover placement="right" hoist ?disabled=${disablePopover}>
+            <btrix-badge
+              variant=${disablePopover ? "text-neutral" : "text"}
+              size="large"
+              >+${localize.number(otherOrigins.length)}</btrix-badge
+            >
+            <ul slot="content">
+              ${otherOrigins.map((url) => html`<li>${url}</li>`)}
+            </ul>
+          </btrix-popover>
+        `
+      : nothing}
+  </div>`;
+}
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 2788395b23..a0378561c0 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -1,6 +1,6 @@
 import { localized, msg } from "@lit/localize";
 import { Task } from "@lit/task";
-import { html, nothing, type PropertyValues } from "lit";
+import { html, type PropertyValues } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import queryString from "query-string";
@@ -18,6 +18,7 @@ import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
 import type { BtrixChangeTagFilterEvent } from "@/components/ui/tag-filter/types";
 import { ClipboardController } from "@/controllers/clipboard";
 import { SearchParamsValue } from "@/controllers/searchParamsValue";
+import { originsWithRemainder } from "@/features/browser-profiles/templates/origins-with-remainder";
 import { emptyMessage } from "@/layouts/emptyMessage";
 import { page } from "@/layouts/page";
 import { OrgTab } from "@/routes";
@@ -71,7 +72,7 @@ const columnsCss = [
   "min-content", // Status
   "[clickable-start] minmax(min-content, 1fr)", // Name
   "30ch", // Tags
-  "minmax(max-content, 1fr)", // Origins
+  "40ch", // Origins
   "minmax(min-content, 20ch)", // Last modified
   "[clickable-end] min-content", // Actions
 ].join(" ");
@@ -520,8 +521,6 @@ export class BrowserProfilesList extends BtrixElement {
         (a, b) => (b && a && b > a ? b : a),
         data.created,
       ) || data.created;
-    const startingUrl = data.origins[0];
-    const otherOrigins = data.origins.slice(1);
 
     return html`
       <btrix-table-row
@@ -550,18 +549,8 @@ export class BrowserProfilesList extends BtrixElement {
           <btrix-tag-container class="relative hover:z-[2]" .tags=${data.tags}>
           </btrix-tag-container>
         </btrix-table-cell>
-        <btrix-table-cell class="[--btrix-table-cell-gap:0]">
-          <btrix-code language="url" value=${startingUrl} noWrap></btrix-code>
-          ${otherOrigins.length
-            ? html`<btrix-popover placement="right" hoist>
-                <btrix-badge variant="text" size="large"
-                  >+${this.localize.number(otherOrigins.length)}</btrix-badge
-                >
-                <ul slot="content">
-                  ${otherOrigins.map((url) => html`<li>${url}</li>`)}
-                </ul>
-              </btrix-popover>`
-            : nothing}
+        <btrix-table-cell>
+          ${originsWithRemainder(data.origins)}
         </btrix-table-cell>
         <btrix-table-cell>
           ${this.localize.relativeDate(modifiedByAnyDate, { capitalize: true })}
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 59842237dd..38387ad46f 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -411,12 +411,14 @@
   .font-monostyle {
     @apply font-mono;
     font-variation-settings: var(--font-monostyle-variation);
+    font-size: 95%;
   }
 
   /* Actually monospaced font */
   .font-monospace {
     @apply font-mono;
     font-variation-settings: var(--font-monospace-variation);
+    font-size: 95%;
   }
 
   .truncate {

From 745276a062b0e778ef68ae1687c690c2b3d351f6 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 13:09:09 -0800
Subject: [PATCH 12/23] ungroup proxy setting

---
 .../src/components/ui/select-crawler-proxy.ts |  1 +
 .../new-browser-profile-dialog.ts             | 65 ++++++++++---------
 .../browser-profiles/start-browser-dialog.ts  | 61 ++++++++---------
 3 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/ui/select-crawler-proxy.ts b/frontend/src/components/ui/select-crawler-proxy.ts
index b9526eb88b..a3505591cf 100644
--- a/frontend/src/components/ui/select-crawler-proxy.ts
+++ b/frontend/src/components/ui/select-crawler-proxy.ts
@@ -137,6 +137,7 @@ export class SelectCrawlerProxy extends BtrixElement {
               </div>
             `
           : ``}
+        <slot name="help-text" slot="help-text"></slot>
       </sl-select>
     `;
   }
diff --git a/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts b/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
index d5c1e1f86a..675f6e8519 100644
--- a/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
+++ b/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
@@ -116,6 +116,28 @@ export class NewBrowserProfileDialog extends BtrixElement {
           >
           </btrix-url-input>
 
+          ${showProxies
+            ? html`
+                <div class="mt-4">
+                  <btrix-select-crawler-proxy
+                    defaultProxyId=${ifDefined(
+                      this.defaultProxyId || undefined,
+                    )}
+                    .proxyServers=${proxyServers}
+                    .proxyId="${this.proxyId || ""}"
+                    @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
+                      (this.proxyId = e.detail.value)}
+                  >
+                    <div slot="help-text">
+                      ${msg(
+                        "When a proxy is selected, websites will see traffic as coming from the IP address of the proxy rather than where the Browsertrix Crawler node is deployed.",
+                      )}
+                    </div>
+                  </btrix-select-crawler-proxy>
+                </div>
+              `
+            : nothing}
+
           <sl-input
             class="mt-4"
             label=${msg("Profile Name")}
@@ -127,39 +149,18 @@ export class NewBrowserProfileDialog extends BtrixElement {
           >
           </sl-input>
 
-          ${when(
-            showChannels || showProxies,
-            () => html`
-              <btrix-details class="mt-4" open>
+          ${showChannels
+            ? html`<btrix-details class="mt-4">
                 <span slot="title">${msg("Crawler Settings")}</span>
-
-                ${showChannels
-                  ? html`<div class="mt-4">
-                      <btrix-select-crawler
-                        .crawlerChannel=${this.crawlerChannel}
-                        @on-change=${(e: SelectCrawlerChangeEvent) =>
-                          (this.crawlerChannel = e.detail.value!)}
-                      ></btrix-select-crawler>
-                    </div>`
-                  : nothing}
-                ${showProxies
-                  ? html`
-                      <div class="mt-4">
-                        <btrix-select-crawler-proxy
-                          defaultProxyId=${ifDefined(
-                            this.defaultProxyId || undefined,
-                          )}
-                          .proxyServers=${proxyServers}
-                          .proxyId="${this.proxyId || ""}"
-                          @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
-                            (this.proxyId = e.detail.value)}
-                        ></btrix-select-crawler-proxy>
-                      </div>
-                    `
-                  : nothing}
-              </btrix-details>
-            `,
-          )}
+                <div class="mt-4">
+                  <p>${msg("These settings will be applied")}</p>
+                  <btrix-select-crawler
+                    .crawlerChannel=${this.crawlerChannel}
+                    @on-change=${(e: SelectCrawlerChangeEvent) =>
+                      (this.crawlerChannel = e.detail.value!)}
+                  ></btrix-select-crawler></div
+              ></btrix-details>`
+            : nothing}
 
           <input class="invisible block size-0" type="submit" />
         </form>
diff --git a/frontend/src/features/browser-profiles/start-browser-dialog.ts b/frontend/src/features/browser-profiles/start-browser-dialog.ts
index 877f15acd3..f35c093b21 100644
--- a/frontend/src/features/browser-profiles/start-browser-dialog.ts
+++ b/frontend/src/features/browser-profiles/start-browser-dialog.ts
@@ -223,48 +223,39 @@ export class StartBrowserDialog extends BtrixElement {
                   name="exclamation-triangle"
                 ></sl-icon>
                 ${msg(
-                  "Data and browsing activity of all previously saved sites will be removed upon saving this browser profile session.",
+                  "Data, proxy settings, and browsing activity of all previously saved sites will be removed upon saving this browser profile session.",
                 )}
               </div>
             `,
           )}
         </sl-checkbox>
 
-        ${when(
-          this.open && (showChannels || showProxies),
-          () => html`
-            <btrix-details
-              class="mt-4"
-              ?open=${this.details?.open || this.replaceBrowser}
-            >
+        ${showProxies
+          ? html`<div class="mt-4">
+              <btrix-select-crawler-proxy
+                defaultProxyId=${ifDefined(
+                  this.org?.crawlingDefaults?.profileid ||
+                    proxies.default_proxy_id ||
+                    undefined,
+                )}
+                .proxyServers=${proxyServers}
+                .proxyId=${profile.proxyId || ""}
+              >
+              </btrix-select-crawler-proxy>
+            </div>`
+          : nothing}
+        ${this.open && showChannels
+          ? html`<btrix-details class="mt-4" ?open=${this.details?.open}>
               <span slot="title">${msg("Crawler Settings")}</span>
-
-              ${showChannels
-                ? html`<div class="mt-4">
-                    <btrix-select-crawler
-                      .crawlerChannel=${profile.crawlerChannel ||
-                      this.org?.crawlingDefaults?.crawlerChannel}
-                    >
-                    </btrix-select-crawler>
-                  </div>`
-                : nothing}
-              ${showProxies
-                ? html`<div class="mt-4">
-                    <btrix-select-crawler-proxy
-                      defaultProxyId=${ifDefined(
-                        this.org?.crawlingDefaults?.profileid ||
-                          proxies.default_proxy_id ||
-                          undefined,
-                      )}
-                      .proxyServers=${proxyServers}
-                      .proxyId=${profile.proxyId || ""}
-                    >
-                    </btrix-select-crawler-proxy>
-                  </div>`
-                : nothing}
-            </btrix-details>
-          `,
-        )}
+              <div class="mt-4">
+                <btrix-select-crawler
+                  .crawlerChannel=${profile.crawlerChannel ||
+                  this.org?.crawlingDefaults?.crawlerChannel}
+                >
+                </btrix-select-crawler>
+              </div>
+            </btrix-details>`
+          : nothing}
       </form>
       <div slot="footer" class="flex justify-between">
         <sl-button size="small" @click=${() => void this.dialog?.hide()}

From 59497b7889c6303b982916701d81dae8878e16a6 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 13:32:09 -0800
Subject: [PATCH 13/23] make header text selectable

---
 frontend/src/features/crawl-workflows/workflow-editor.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index e2adfad36f..6454552a0e 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -644,8 +644,8 @@ export class WorkflowEditor extends BtrixElement {
         class=${clsx(
           tw`part-[base]:rounded-lg part-[base]:border part-[base]:transition-shadow part-[base]:focus:shadow`,
           tw`part-[content]:pb-8 part-[content]:[border-top:solid_1px_var(--sl-panel-border-color)]`,
-          tw`part-[header]:p-0 part-[header]:text-neutral-500 part-[header]:hover:text-blue-400`,
-          tw`part-[summary-icon]:mx-4 part-[summary-icon]:[rotate:none]`,
+          tw`part-[header]:text-neutral-500 part-[header]:hover:text-blue-400`,
+          tw`part-[summary-icon]:[rotate:none]`,
           hasError &&
             tw`part-[header]:cursor-default part-[summary-icon]:cursor-not-allowed part-[summary-icon]:text-neutral-400`,
         )}
@@ -746,7 +746,7 @@ export class WorkflowEditor extends BtrixElement {
         </div>
 
         <p
-          class="w-full cursor-default px-4 py-3 text-neutral-700"
+          class="cursor-text select-text text-neutral-700"
           slot="summary"
           @click=${(e: MouseEvent) => {
             // Decrease click target size of details header

From 1db69c6a39c571cb6e4ad475808dd447b899f61c Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 14:44:10 -0800
Subject: [PATCH 14/23] update controls

---
 .../src/components/ui/select-crawler-proxy.ts |  5 ++++-
 .../new-browser-profile-dialog.ts             | 10 +++++----
 .../select-browser-profile.ts                 | 22 +++++++++----------
 .../browser-profiles/start-browser-dialog.ts  |  3 ++-
 .../crawl-workflows/workflow-editor.ts        | 17 ++++----------
 .../src/strings/crawl-workflows/infoText.ts   |  6 ++---
 frontend/src/theme.stylesheet.css             |  7 +++++-
 frontend/src/types/crawler.ts                 |  1 +
 frontend/src/utils/workflow.ts                |  5 ++++-
 9 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/ui/select-crawler-proxy.ts b/frontend/src/components/ui/select-crawler-proxy.ts
index a3505591cf..ac0e78c2ed 100644
--- a/frontend/src/components/ui/select-crawler-proxy.ts
+++ b/frontend/src/components/ui/select-crawler-proxy.ts
@@ -46,6 +46,9 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   proxyId: string | null = null;
 
+  @property({ type: String })
+  label?: string;
+
   @property({ type: String })
   size?: SlSelect["size"];
 
@@ -93,7 +96,7 @@ export class SelectCrawlerProxy extends BtrixElement {
     return html`
       <sl-select
         name="proxyId"
-        label=${msg("Crawler Proxy Server")}
+        label=${this.label || msg("Crawler Proxy Server")}
         value=${this.selectedProxy?.id || ""}
         placeholder=${this.defaultProxy
           ? `${msg(`Default Proxy:`)} ${this.defaultProxy.label}`
diff --git a/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts b/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
index 675f6e8519..ff1bc17d08 100644
--- a/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
+++ b/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
@@ -120,6 +120,7 @@ export class NewBrowserProfileDialog extends BtrixElement {
             ? html`
                 <div class="mt-4">
                   <btrix-select-crawler-proxy
+                    .label=${msg("Proxy Server")}
                     defaultProxyId=${ifDefined(
                       this.defaultProxyId || undefined,
                     )}
@@ -130,7 +131,7 @@ export class NewBrowserProfileDialog extends BtrixElement {
                   >
                     <div slot="help-text">
                       ${msg(
-                        "When a proxy is selected, websites will see traffic as coming from the IP address of the proxy rather than where the Browsertrix Crawler node is deployed.",
+                        "When a proxy is selected, websites will see traffic as coming from the IP address of the proxy rather than where Browsertrix is deployed.",
                       )}
                     </div>
                   </btrix-select-crawler-proxy>
@@ -144,16 +145,17 @@ export class NewBrowserProfileDialog extends BtrixElement {
             name="profile-name"
             placeholder=${msg("example.com")}
             value=${ifDefined(this.defaultUrl)}
-            help-text=${msg("Defaults to site's domain name if omitted.")}
+            help-text=${msg(
+              "Defaults to the primary site's domain name if omitted.",
+            )}
             maxlength="50"
           >
           </sl-input>
 
           ${showChannels
             ? html`<btrix-details class="mt-4">
-                <span slot="title">${msg("Crawler Settings")}</span>
+                <span slot="title">${msg("Browser Session Settings")}</span>
                 <div class="mt-4">
-                  <p>${msg("These settings will be applied")}</p>
                   <btrix-select-crawler
                     .crawlerChannel=${this.crawlerChannel}
                     @on-change=${(e: SelectCrawlerChangeEvent) =>
diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 68668d9e17..2c07f91a5c 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -59,6 +59,9 @@ export class SelectBrowserProfile extends BtrixElement {
   @property({ type: String })
   profileId?: string;
 
+  @property({ type: String })
+  profileName?: string;
+
   @state()
   selectedProfile?: Profile;
 
@@ -103,11 +106,12 @@ export class SelectBrowserProfile extends BtrixElement {
   render() {
     const selectedProfile = this.selectedProfile;
     const browserProfiles = this.profilesTask.value;
+    const loading = !browserProfiles && !this.profileName;
 
     return html`
       <sl-select
         label=${msg("Browser Profile")}
-        value=${selectedProfile?.id || ""}
+        value=${this.profileId || selectedProfile?.id || ""}
         placeholder=${browserProfiles
           ? msg("No custom profile")
           : msg("Loading")}
@@ -118,15 +122,7 @@ export class SelectBrowserProfile extends BtrixElement {
         @sl-hide=${this.stopProp}
         @sl-after-hide=${this.stopProp}
       >
-        ${when(
-          selectedProfile?.proxyId,
-          (proxyId) => html`
-            <btrix-proxy-badge
-              slot="suffix"
-              proxyId=${proxyId}
-            ></btrix-proxy-badge>
-          `,
-        )}
+        ${loading ? html`<sl-spinner slot="prefix"></sl-spinner>` : nothing}
         ${browserProfiles
           ? html`
               <sl-option value="">${msg("No custom profile")}</sl-option>
@@ -137,7 +133,11 @@ export class SelectBrowserProfile extends BtrixElement {
                   `
                 : nothing}
             `
-          : html` <sl-spinner slot="prefix"></sl-spinner> `}
+          : this.profileName
+            ? html`<sl-option value=${ifDefined(this.profileId)}>
+                ${this.profileName}
+              </sl-option>`
+            : nothing}
         ${browserProfiles?.items.map(
           (profile, i) => html`
             <btrix-popover
diff --git a/frontend/src/features/browser-profiles/start-browser-dialog.ts b/frontend/src/features/browser-profiles/start-browser-dialog.ts
index f35c093b21..2ddf7d4fcc 100644
--- a/frontend/src/features/browser-profiles/start-browser-dialog.ts
+++ b/frontend/src/features/browser-profiles/start-browser-dialog.ts
@@ -233,6 +233,7 @@ export class StartBrowserDialog extends BtrixElement {
         ${showProxies
           ? html`<div class="mt-4">
               <btrix-select-crawler-proxy
+                .label=${msg("Proxy Server")}
                 defaultProxyId=${ifDefined(
                   this.org?.crawlingDefaults?.profileid ||
                     proxies.default_proxy_id ||
@@ -246,7 +247,7 @@ export class StartBrowserDialog extends BtrixElement {
           : nothing}
         ${this.open && showChannels
           ? html`<btrix-details class="mt-4" ?open=${this.details?.open}>
-              <span slot="title">${msg("Crawler Settings")}</span>
+              <span slot="title">${msg("Browser Session Settings")}</span>
               <div class="mt-4">
                 <btrix-select-crawler
                   .crawlerChannel=${profile.crawlerChannel ||
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 6454552a0e..7794ee9811 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -745,17 +745,7 @@ export class WorkflowEditor extends BtrixElement {
           )}
         </div>
 
-        <p
-          class="cursor-text select-text text-neutral-700"
-          slot="summary"
-          @click=${(e: MouseEvent) => {
-            // Decrease click target size of details header
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        >
-          ${desc}
-        </p>
+        <p class="text-neutral-700" slot="summary">${desc}</p>
         <div class="grid grid-cols-5 gap-5">${render.bind(this)()}</div>
       </sl-details>`;
     };
@@ -2003,16 +1993,17 @@ https://archiveweb.page/images/${"logo.svg"}`}
     if (!this.formState.lang) throw new Error("missing formstate.lang");
 
     const proxies = this.proxies;
-    const selectedProfile = this.profileTask.value;
+    const profile = this.profileTask.value;
     const selectedProxyId =
       this.formState.browserProfile?.proxyId ||
-      selectedProfile?.proxyId ||
+      profile?.proxyId ||
       this.formState.proxyId;
 
     return html`
       ${inputCol(html`
         <btrix-select-browser-profile
           .profileId=${this.formState.browserProfile?.id}
+          .profileName=${this.formState.browserProfile?.name}
           @on-change=${(e: SelectBrowserProfileChangeEvent) => {
             const profile = e.detail.value;
 
diff --git a/frontend/src/strings/crawl-workflows/infoText.ts b/frontend/src/strings/crawl-workflows/infoText.ts
index 0e7459b0e3..5a04269bb6 100644
--- a/frontend/src/strings/crawl-workflows/infoText.ts
+++ b/frontend/src/strings/crawl-workflows/infoText.ts
@@ -38,7 +38,7 @@ export const infoTextFor = {
     msg(`Choose a custom profile to make use of saved cookies and logged-in
   accounts. Note that websites may log profiles out after a period of time.`),
   crawlerChannel: msg(
-    `Choose a Browsertrix Crawler Release Channel. If available, other versions may provide new/experimental crawling features.`,
+    `Choose a Browsertrix Crawler release channel. If available, other versions may provide new or experimental crawling features.`,
   ),
   blockAds: msg(
     html`Blocks advertising content from being loaded. Uses
@@ -63,9 +63,7 @@ export const infoTextFor = {
   ),
   lang: msg(`Websites that observe the browser’s language setting may serve
   content in that language if available.`),
-  proxyId: `${msg(
-    `Choose a proxy to crawl through.`,
-  )} ${msg("If using a browser profile, the profile proxy will be used instead.")}`,
+  proxyId: msg(`Choose a proxy to crawl through.`),
   selectLinks: msg(
     html`Customize how URLs are extracted from a page. The crawler will use the
       specified
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 38387ad46f..a209c4e862 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -240,7 +240,7 @@
   sl-option:not([aria-selected="true"]):not(:disabled),
   sl-menu-item:not([disabled]),
   btrix-menu-item-link {
-    @apply part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
+    @apply part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
   }
 
   sl-option[aria-selected="true"] {
@@ -530,6 +530,11 @@
   top: auto;
 }
 
+html {
+  /* Fixes sl-input components resizing when sl-scroll-lock is removed */
+  scrollbar-gutter: stable;
+}
+
 /* Ensure buttons in shadow dom inherit hover color */
 [class^="hover\:text-"]::part(base):hover,
 [class*=" hover\:text-"]::part(base):hover {
diff --git a/frontend/src/types/crawler.ts b/frontend/src/types/crawler.ts
index b68c0535d1..1b7eedfad3 100644
--- a/frontend/src/types/crawler.ts
+++ b/frontend/src/types/crawler.ts
@@ -66,6 +66,7 @@ export type WorkflowParams = {
   schedule: string;
   browserWindows: number;
   profileid: string | null;
+  profileName?: string | null;
   config: SeedConfig;
   tags: string[];
   crawlTimeout: number | null;
diff --git a/frontend/src/utils/workflow.ts b/frontend/src/utils/workflow.ts
index 14621dbbef..40f3449716 100644
--- a/frontend/src/utils/workflow.ts
+++ b/frontend/src/utils/workflow.ts
@@ -383,7 +383,10 @@ export function getInitialFormState(params: {
     jobName: params.initialWorkflow.name || defaultFormState.jobName,
     description: params.initialWorkflow.description,
     browserProfile: params.initialWorkflow.profileid
-      ? ({ id: params.initialWorkflow.profileid } as Profile)
+      ? ({
+          id: params.initialWorkflow.profileid,
+          name: params.initialWorkflow.profileName,
+        } as Profile)
       : defaultFormState.browserProfile,
     scopeType: primarySeedConfig.scopeType as FormState["scopeType"],
     exclusions: seedsConfig.exclude?.length === 0 ? [""] : seedsConfig.exclude,

From b3b1f25f028253d25159152dcb89022d2419347c Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 16:49:57 -0800
Subject: [PATCH 15/23] show suggestions

---
 .../select-browser-profile.ts                 | 140 ++++++++++++------
 .../browser-profiles/start-browser-dialog.ts  |   2 +-
 .../crawl-workflows/workflow-editor.ts        |  27 ++++
 3 files changed, 124 insertions(+), 45 deletions(-)

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 2c07f91a5c..091bc8b876 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -25,6 +25,7 @@ import type {
   APISortQuery,
 } from "@/types/api";
 import { SortDirection } from "@/types/utils";
+import { isNotEqual } from "@/utils/is-not-equal";
 import { AppStateService } from "@/utils/state";
 import { tw } from "@/utils/tailwind";
 
@@ -62,6 +63,12 @@ export class SelectBrowserProfile extends BtrixElement {
   @property({ type: String })
   profileName?: string;
 
+  /**
+   * List of origins to match to prioritize profile options
+   */
+  @property({ type: Array, hasChanged: isNotEqual })
+  suggestOrigins?: string[];
+
   @state()
   selectedProfile?: Profile;
 
@@ -123,50 +130,7 @@ export class SelectBrowserProfile extends BtrixElement {
         @sl-after-hide=${this.stopProp}
       >
         ${loading ? html`<sl-spinner slot="prefix"></sl-spinner>` : nothing}
-        ${browserProfiles
-          ? html`
-              <sl-option value="">${msg("No custom profile")}</sl-option>
-              ${browserProfiles.items.length
-                ? html`
-                    <sl-divider></sl-divider>
-                    <sl-menu-label>${msg("Saved Profiles")}</sl-menu-label>
-                  `
-                : nothing}
-            `
-          : this.profileName
-            ? html`<sl-option value=${ifDefined(this.profileId)}>
-                ${this.profileName}
-              </sl-option>`
-            : nothing}
-        ${browserProfiles?.items.map(
-          (profile, i) => html`
-            <btrix-popover
-              class="part-[body]:w-64"
-              placement="left"
-              trigger="hover"
-              hoist
-            >
-              <div slot="content">${this.renderOverview(profile)}</div>
-
-              <sl-option
-                value=${profile.id}
-                class=${clsx(
-                  tw`part-[base]:flex-wrap`,
-                  tw`part-[label]:basis-1/2 part-[label]:overflow-hidden`,
-                  tw`part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
-                  i && tw`border-t`,
-                )}
-              >
-                <span class="font-medium">${profile.name}</span>
-                <div slot="suffix" class="w-full pl-2.5 pt-0.5">
-                  ${originsWithRemainder(profile.origins, {
-                    disablePopover: true,
-                  })}
-                </div>
-              </sl-option>
-            </btrix-popover>
-          `,
-        )}
+        ${this.renderProfileOptions()}
         ${browserProfiles && !browserProfiles.total
           ? this.renderNoProfiles()
           : ""}
@@ -208,6 +172,94 @@ export class SelectBrowserProfile extends BtrixElement {
     `;
   }
 
+  private renderProfileOptions() {
+    const browserProfiles = this.profilesTask.value;
+
+    if (!browserProfiles) {
+      if (this.profileName) {
+        return html`<sl-option value=${ifDefined(this.profileId)}>
+          ${this.profileName}
+        </sl-option>`;
+      }
+
+      return;
+    }
+
+    const option = (profile: Profile, i: number) => html`
+      <btrix-popover
+        class="part-[body]:w-64"
+        placement="left"
+        trigger="hover"
+        hoist
+      >
+        <div slot="content">${this.renderOverview(profile)}</div>
+
+        <sl-option
+          value=${profile.id}
+          class=${clsx(
+            tw`part-[base]:flex-wrap`,
+            tw`part-[label]:basis-1/2 part-[label]:overflow-hidden`,
+            tw`part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
+            i && tw`border-t`,
+          )}
+        >
+          <span class="font-medium">${profile.name}</span>
+          <div slot="suffix" class="w-full pl-2.5 pt-0.5">
+            ${originsWithRemainder(profile.origins, {
+              disablePopover: true,
+            })}
+          </div>
+        </sl-option>
+      </btrix-popover>
+    `;
+
+    const profiles = browserProfiles.items;
+    const priorityOrigins = this.suggestOrigins;
+    const suggestions: Profile[] = [];
+    let rest: Profile[] = [];
+
+    if (priorityOrigins?.length) {
+      profiles.forEach((profile) => {
+        const { origins } = profile;
+        if (
+          origins.some((origin) =>
+            priorityOrigins.includes(
+              new URL(origin).hostname.replace(/^www\./, ""),
+            ),
+          )
+        ) {
+          suggestions.push(profile);
+        } else {
+          rest.push(profile);
+        }
+      });
+    } else {
+      rest = profiles;
+    }
+
+    return html`
+      <sl-option value="">${msg("No custom profile")}</sl-option>
+      ${suggestions.length
+        ? html`
+            <sl-divider></sl-divider>
+            <sl-menu-label> ${msg("Suggested Profiles")} </sl-menu-label>
+            ${suggestions.map(option)}
+          `
+        : nothing}
+      ${rest.length
+        ? html`
+            <sl-divider></sl-divider>
+            <sl-menu-label
+              >${suggestions.length
+                ? msg("Other Saved Profiles")
+                : msg("Saved Profiles")}</sl-menu-label
+            >
+            ${rest.map(option)}
+          `
+        : nothing}
+    `;
+  }
+
   private renderSelectedProfileInfo() {
     const profileContent = (profile: Profile) => {
       return html`${pageHeading({ content: msg("Overview"), level: 3 })}
diff --git a/frontend/src/features/browser-profiles/start-browser-dialog.ts b/frontend/src/features/browser-profiles/start-browser-dialog.ts
index 2ddf7d4fcc..7483b24f47 100644
--- a/frontend/src/features/browser-profiles/start-browser-dialog.ts
+++ b/frontend/src/features/browser-profiles/start-browser-dialog.ts
@@ -310,7 +310,7 @@ export class StartBrowserDialog extends BtrixElement {
                 <sl-menu-label
                   >${msg("Suggestions from Related Workflows")}</sl-menu-label
                 >
-                ${seeds.map(option)}
+                ${seeds.slice(0, 10).map(option)}
               `
             : nothing,
         )}
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 7794ee9811..3051a8ac1a 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -34,6 +34,7 @@ import {
   state,
 } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
+import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { map } from "lit/directives/map.js";
 import { when } from "lit/directives/when.js";
@@ -1999,11 +2000,37 @@ https://archiveweb.page/images/${"logo.svg"}`}
       profile?.proxyId ||
       this.formState.proxyId;
 
+    const priorityOrigins = () => {
+      if (!this.formState.urlList && !this.formState.primarySeedUrl) {
+        return [];
+      }
+
+      const crawlUrls = urlListToArray(this.formState.urlList);
+
+      if (this.formState.primarySeedUrl) {
+        crawlUrls.unshift(this.formState.primarySeedUrl);
+      }
+
+      return crawlUrls
+        .map((url) => {
+          try {
+            return new URL(url).hostname.replace(/^www\./, "");
+          } catch {
+            return "";
+          }
+        })
+        .filter((url) => url);
+    };
+
     return html`
       ${inputCol(html`
         <btrix-select-browser-profile
           .profileId=${this.formState.browserProfile?.id}
           .profileName=${this.formState.browserProfile?.name}
+          .suggestOrigins=${guard(
+            [this.formState.primarySeedUrl, this.formState.urlList],
+            priorityOrigins,
+          )}
           @on-change=${(e: SelectBrowserProfileChangeEvent) => {
             const profile = e.detail.value;
 

From 048498e6d2db4e95a3d3ecb455a323f9130fd8ae Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 17:03:53 -0800
Subject: [PATCH 16/23] fix menu option

---
 frontend/src/theme.stylesheet.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index a209c4e862..191cd90e5a 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -240,7 +240,7 @@
   sl-option:not([aria-selected="true"]):not(:disabled),
   sl-menu-item:not([disabled]),
   btrix-menu-item-link {
-    @apply part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
+    @apply part-[base]:bg-white part-[base]:text-neutral-700 part-[base]:hover:bg-cyan-50/50 part-[base]:hover:text-cyan-700 part-[base]:focus:text-cyan-700 part-[base]:focus-visible:bg-cyan-50/50;
   }
 
   sl-option[aria-selected="true"] {

From c67d3917daf55bb69dbccabafb2e01a27b37f8de Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 17:22:16 -0800
Subject: [PATCH 17/23] fix display of proxy

---
 frontend/src/components/ui/config-details.ts  | 29 ++++++++++++++-----
 frontend/src/components/ui/link.ts            | 21 +++++++++-----
 .../browser-profiles/templates/badges.ts      |  6 ++--
 .../features/crawls/crawler-channel-badge.ts  | 12 ++++----
 frontend/src/features/crawls/proxy-badge.ts   | 12 ++++----
 5 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/ui/config-details.ts b/frontend/src/components/ui/config-details.ts
index 6d53d36688..2228e54502 100644
--- a/frontend/src/components/ui/config-details.ts
+++ b/frontend/src/components/ui/config-details.ts
@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import { localized, msg, str } from "@lit/localize";
 import ISO6391 from "iso-639-1";
 import { html, nothing, type TemplateResult } from "lit";
@@ -6,6 +7,10 @@ import { when } from "lit/directives/when.js";
 import capitalize from "lodash/fp/capitalize";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import {
+  orgProxiesContext,
+  type OrgProxiesContext,
+} from "@/context/org-proxies";
 import { none, notSpecified } from "@/layouts/empty";
 import {
   Behavior,
@@ -36,6 +41,9 @@ import { getServerDefaults } from "@/utils/workflow";
 @customElement("btrix-config-details")
 @localized()
 export class ConfigDetails extends BtrixElement {
+  @consume({ context: orgProxiesContext, subscribe: true })
+  private readonly orgProxies?: OrgProxiesContext;
+
   @property({ type: Object })
   crawlConfig?: CrawlConfig;
 
@@ -235,16 +243,16 @@ export class ConfigDetails extends BtrixElement {
             msg("Browser Profile"),
             when(
               crawlConfig?.profileid,
-              () =>
-                html`<a
-                  class="text-blue-500 hover:text-blue-600"
+              () => html`
+                <btrix-link
                   href=${`${this.navigate.orgBasePath}/browser-profiles/profile/${
                     crawlConfig!.profileid
                   }`}
-                  @click=${this.navigate.link}
+                  hideIcon
                 >
                   ${crawlConfig?.profileName}
-                </a>`,
+                </btrix-link>
+              `,
               () =>
                 crawlConfig?.profileName ||
                 html`<span class="text-neutral-400"
@@ -252,6 +260,14 @@ export class ConfigDetails extends BtrixElement {
                 >`,
             ),
           )}
+          ${crawlConfig?.proxyId
+            ? this.renderSetting(
+                msg("Crawler Proxy Server"),
+                this.orgProxies?.servers.find(
+                  ({ id }) => id === crawlConfig.proxyId,
+                )?.label || capitalize(crawlConfig.proxyId),
+              )
+            : nothing}
           ${this.renderSetting(
             msg("Browser Windows"),
             crawlConfig?.browserWindows ? `${crawlConfig.browserWindows}` : "",
@@ -284,9 +300,6 @@ export class ConfigDetails extends BtrixElement {
                 ISO6391.getName(seedsConfig.lang),
               )
             : nothing}
-          ${crawlConfig?.proxyId
-            ? this.renderSetting(msg("Proxy"), capitalize(crawlConfig.proxyId))
-            : nothing}
         `,
       })}
       ${this.renderSection({
diff --git a/frontend/src/components/ui/link.ts b/frontend/src/components/ui/link.ts
index ba970a2a7c..73f1c46c45 100644
--- a/frontend/src/components/ui/link.ts
+++ b/frontend/src/components/ui/link.ts
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -19,6 +19,9 @@ export class Link extends BtrixElement {
   @property({ type: String })
   variant: "primary" | "neutral" = "neutral";
 
+  @property({ type: Boolean })
+  hideIcon = false;
+
   render() {
     if (!this.href) return;
 
@@ -39,12 +42,16 @@ export class Link extends BtrixElement {
           : this.navigate.link}
       >
         <slot></slot>
-        <sl-icon
-          slot="suffix"
-          name="arrow-right"
-          class="size-4 transition-transform duration-fast group-hover:translate-x-1"
-        ></sl-icon
-      ></a>
+        ${this.hideIcon
+          ? nothing
+          : html`
+              <sl-icon
+                slot="suffix"
+                name="arrow-right"
+                class="size-4 transition-transform duration-fast group-hover:translate-x-1"
+              ></sl-icon>
+            `}
+      </a>
     `;
   }
 }
diff --git a/frontend/src/features/browser-profiles/templates/badges.ts b/frontend/src/features/browser-profiles/templates/badges.ts
index 6378031fab..5fdea74f6f 100644
--- a/frontend/src/features/browser-profiles/templates/badges.ts
+++ b/frontend/src/features/browser-profiles/templates/badges.ts
@@ -6,9 +6,9 @@ import { type Profile } from "@/types/crawler";
 
 export const usageBadge = (inUse: boolean) =>
   html`<sl-tooltip
-    content="${msg("Crawl Workflow Usage")}: ${inUse
-      ? msg("In Use")
-      : msg("Not In Use")}"
+    content=${inUse
+      ? msg("In Use by Crawl Workflow")
+      : msg("Not In Use by Crawl Workflow")}
   >
     <btrix-badge variant=${inUse ? "cyan" : "neutral"} class="font-monostyle">
       <sl-icon
diff --git a/frontend/src/features/crawls/crawler-channel-badge.ts b/frontend/src/features/crawls/crawler-channel-badge.ts
index 7919400bd0..adce184bdc 100644
--- a/frontend/src/features/crawls/crawler-channel-badge.ts
+++ b/frontend/src/features/crawls/crawler-channel-badge.ts
@@ -1,7 +1,8 @@
 import { consume } from "@lit/context";
-import { localized, msg } from "@lit/localize";
+import { localized } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import {
@@ -26,10 +27,9 @@ export class CrawlerChannelBadge extends TailwindElement {
       ({ id }) => id === this.channelId,
     );
 
-    return html`<sl-tooltip
-      content="${msg("Crawler Release Channel")}${crawlerChannel
-        ? `: ${crawlerChannel.image}`
-        : ""}"
+    return html`<btrix-popover
+      content=${ifDefined(crawlerChannel?.image)}
+      ?disabled=${!crawlerChannel?.image}
       hoist
     >
       <btrix-badge
@@ -41,6 +41,6 @@ export class CrawlerChannelBadge extends TailwindElement {
         <sl-icon name="boxes" class="mr-1.5"></sl-icon>
         <span class="capitalize">${this.channelId}</span>
       </btrix-badge>
-    </sl-tooltip>`;
+    </btrix-popover>`;
   }
 }
diff --git a/frontend/src/features/crawls/proxy-badge.ts b/frontend/src/features/crawls/proxy-badge.ts
index 346164d508..dabf5082a8 100644
--- a/frontend/src/features/crawls/proxy-badge.ts
+++ b/frontend/src/features/crawls/proxy-badge.ts
@@ -1,7 +1,8 @@
 import { consume } from "@lit/context";
-import { localized, msg } from "@lit/localize";
+import { localized } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
 import {
@@ -23,16 +24,15 @@ export class ProxyBadge extends TailwindElement {
 
     const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
 
-    return html`<sl-tooltip
-      content="${msg("Crawler Proxy Server")}${proxy
-        ? `: ${proxy.description}`
-        : ""}"
+    return html`<btrix-popover
+      content=${ifDefined(proxy?.description || undefined)}
+      ?disabled=${!proxy?.description}
       hoist
     >
       <btrix-badge variant="blue" class="font-monostyle whitespace-nowrap">
         <sl-icon name="globe2" class="mr-1.5"></sl-icon>
         ${proxy?.label || this.proxyId}
       </btrix-badge>
-    </sl-tooltip>`;
+    </btrix-popover>`;
   }
 }

From b30795b984eb249b8a4f0bd08871f201a035a8f2 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 17:23:19 -0800
Subject: [PATCH 18/23] update help text

---
 frontend/src/features/browser-profiles/start-browser-dialog.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/browser-profiles/start-browser-dialog.ts b/frontend/src/features/browser-profiles/start-browser-dialog.ts
index 7483b24f47..a9b9fa2a11 100644
--- a/frontend/src/features/browser-profiles/start-browser-dialog.ts
+++ b/frontend/src/features/browser-profiles/start-browser-dialog.ts
@@ -223,7 +223,7 @@ export class StartBrowserDialog extends BtrixElement {
                   name="exclamation-triangle"
                 ></sl-icon>
                 ${msg(
-                  "Data, proxy settings, and browsing activity of all previously saved sites will be removed upon saving this browser profile session.",
+                  "Data and browsing activity of all previously saved sites will be removed upon saving this browser profile session.",
                 )}
               </div>
             `,

From 1b43d182eb0cd17d7ac47beda10ad336a5498473 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Mon, 24 Nov 2025 17:54:30 -0800
Subject: [PATCH 19/23] update suffix

---
 .../src/components/ui/select-crawler-proxy.ts | 10 ++++-
 .../crawl-workflows/workflow-editor.ts        | 40 ++++++++++---------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/ui/select-crawler-proxy.ts b/frontend/src/components/ui/select-crawler-proxy.ts
index ac0e78c2ed..8c5c5529ce 100644
--- a/frontend/src/components/ui/select-crawler-proxy.ts
+++ b/frontend/src/components/ui/select-crawler-proxy.ts
@@ -40,6 +40,9 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   defaultProxyId: string | null = null;
 
+  @property({ type: String })
+  profileProxyId?: string | null = null;
+
   @property({ type: Array })
   proxyServers: Proxy[] = [];
 
@@ -52,6 +55,9 @@ export class SelectCrawlerProxy extends BtrixElement {
   @property({ type: String })
   size?: SlSelect["size"];
 
+  @property({ type: String })
+  placeholder?: string;
+
   @property({ type: String })
   helpText?: string;
 
@@ -103,12 +109,14 @@ export class SelectCrawlerProxy extends BtrixElement {
           : msg("No Proxy")}
         hoist
         clearable
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled ?? Boolean(this.profileProxyId)}
         size=${ifDefined(this.size)}
         @sl-change=${this.onChange}
         @sl-hide=${this.stopProp}
         @sl-after-hide=${this.stopProp}
       >
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="suffix" slot="suffix"></slot>
         ${this.proxyServers.map(
           (server) =>
             html` <sl-option value=${server.id}>
diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index 3051a8ac1a..efb87b1172 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -1994,11 +1994,9 @@ https://archiveweb.page/images/${"logo.svg"}`}
     if (!this.formState.lang) throw new Error("missing formstate.lang");
 
     const proxies = this.proxies;
-    const profile = this.profileTask.value;
-    const selectedProxyId =
+    const profileProxyId =
       this.formState.browserProfile?.proxyId ||
-      profile?.proxyId ||
-      this.formState.proxyId;
+      (this.formState.browserProfile?.id && this.formState.proxyId);
 
     const priorityOrigins = () => {
       if (!this.formState.urlList && !this.formState.primarySeedUrl) {
@@ -2050,25 +2048,29 @@ https://archiveweb.page/images/${"logo.svg"}`}
                   proxies.default_proxy_id ?? undefined,
                 )}
                 .proxyServers=${proxies.servers}
-                .proxyId=${selectedProxyId || ""}
-                ?disabled=${!!this.formState.browserProfile}
+                .proxyId=${profileProxyId || this.formState.proxyId || ""}
+                .profileProxyId=${profileProxyId}
+                title=${ifDefined(
+                  this.formState.browserProfile
+                    ? msg("Disabled by browser profile")
+                    : undefined,
+                )}
                 @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                   this.updateFormState({
                     proxyId: e.detail.value,
                   })}
-              ></btrix-select-crawler-proxy>
-              ${when(
-                this.formState.browserProfile,
-                () => html`
-                  <div class="form-help-text">
-                    <sl-icon
-                      class="mr-0.5 align-[-.175em]"
-                      name="info-circle"
-                    ></sl-icon>
-                    ${msg("Using browser profile proxy settings.")}
-                  </div>
-                `,
-              )}
+              >
+                ${when(
+                  profileProxyId,
+                  () => html`
+                    <span
+                      slot="suffix"
+                      class="whitespace-nowrap text-neutral-1000"
+                      >${msg("Same as browser profile")}</span
+                    >
+                  `,
+                )}
+              </btrix-select-crawler-proxy>
             `),
             this.renderHelpTextCol(infoTextFor["proxyId"]),
           ]

From 6c852afaf1ac36a74f0d1a2c75645f18cece3fef Mon Sep 17 00:00:00 2001
From: Ilya Kreymer <ikreymer@gmail.com>
Date: Mon, 24 Nov 2025 23:14:24 -0800
Subject: [PATCH 20/23] ci: add disk cleanup

---
 .github/workflows/k3d-ci.yaml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.github/workflows/k3d-ci.yaml b/.github/workflows/k3d-ci.yaml
index 30466d86a3..6e5ac7185e 100644
--- a/.github/workflows/k3d-ci.yaml
+++ b/.github/workflows/k3d-ci.yaml
@@ -45,6 +45,13 @@ jobs:
     needs: paths-filter
     if: needs.paths-filter.outputs.matches == 'true'
     steps:
+      - name: Initial Disk Cleanup
+        uses: mathio/gha-cleanup@v1
+        with:
+          remove-browsers: true
+          verbose: true
+
+
       - name: Create k3d Cluster
         uses: AbsaOSS/k3d-action@v2
         with:

From 8918a2e8ce1f0d540b48f73a16fdad2800f74a02 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 25 Nov 2025 11:00:49 -0800
Subject: [PATCH 21/23] fix default proxy id

---
 frontend/src/pages/org/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts
index 261855e125..b3530c830f 100644
--- a/frontend/src/pages/org/index.ts
+++ b/frontend/src/pages/org/index.ts
@@ -493,7 +493,7 @@ export class Org extends BtrixElement {
               .proxyServers=${proxies.servers}
               .crawlerChannels=${crawlerChannels}
               defaultProxyId=${ifDefined(
-                org.crawlingDefaults?.profileid ||
+                org.crawlingDefaults?.proxyId ||
                   proxies.default_proxy_id ||
                   undefined,
               )}

From eaae3ec08beb667448012b2366d7e0202fc8fff7 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 25 Nov 2025 11:24:50 -0800
Subject: [PATCH 22/23] fix inconsistent labels

---
 .../src/features/browser-profiles/select-browser-profile.ts     | 2 +-
 frontend/src/pages/org/browser-profiles-list.ts                 | 2 +-
 frontend/src/pages/org/browser-profiles/profile.ts              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
index 091bc8b876..9f37619ce4 100644
--- a/frontend/src/features/browser-profiles/select-browser-profile.ts
+++ b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -267,7 +267,7 @@ export class SelectBrowserProfile extends BtrixElement {
 
         <sl-divider class="my-5"></sl-divider>
 
-        ${pageHeading({ content: msg("Configured Sites"), level: 3 })}
+        ${pageHeading({ content: msg("Saved Sites"), level: 3 })}
         <section class="mt-5">
           ${profile.origins.length
             ? html`<ul class="divide-y rounded-lg border">
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index a0378561c0..4ace718c76 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -497,7 +497,7 @@ export class BrowserProfilesList extends BtrixElement {
           <btrix-table-header-cell>${msg("Name")}</btrix-table-header-cell>
           <btrix-table-header-cell> ${msg("Tags")} </btrix-table-header-cell>
           <btrix-table-header-cell>
-            ${msg("Configured Sites")}
+            ${msg("Saved Sites")}
           </btrix-table-header-cell>
           <btrix-table-header-cell>
             ${msg("Last Modified")}
diff --git a/frontend/src/pages/org/browser-profiles/profile.ts b/frontend/src/pages/org/browser-profiles/profile.ts
index cae1a86e26..434e2e0c12 100644
--- a/frontend/src/pages/org/browser-profiles/profile.ts
+++ b/frontend/src/pages/org/browser-profiles/profile.ts
@@ -309,7 +309,7 @@ export class BrowserProfilesProfilePage extends BtrixElement {
     const archivingDisabled = isArchivingDisabled(this.org);
 
     return panel({
-      heading: msg("Configured Sites"),
+      heading: msg("Saved Sites"),
       actions: this.appState.isCrawler
         ? html`
             <sl-button

From 2e390d623d91c94982eb24b66c7c51e1fb5e189a Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 26 Nov 2025 07:54:53 -0800
Subject: [PATCH 23/23] update label

---
 frontend/src/features/crawl-workflows/workflow-editor.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts
index efb87b1172..28a0df4d48 100644
--- a/frontend/src/features/crawl-workflows/workflow-editor.ts
+++ b/frontend/src/features/crawl-workflows/workflow-editor.ts
@@ -2050,11 +2050,6 @@ https://archiveweb.page/images/${"logo.svg"}`}
                 .proxyServers=${proxies.servers}
                 .proxyId=${profileProxyId || this.formState.proxyId || ""}
                 .profileProxyId=${profileProxyId}
-                title=${ifDefined(
-                  this.formState.browserProfile
-                    ? msg("Disabled by browser profile")
-                    : undefined,
-                )}
                 @btrix-change=${(e: SelectCrawlerProxyChangeEvent) =>
                   this.updateFormState({
                     proxyId: e.detail.value,
@@ -2066,7 +2061,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
                     <span
                       slot="suffix"
                       class="whitespace-nowrap text-neutral-1000"
-                      >${msg("Same as browser profile")}</span
+                      >${msg("Set by profile")}</span
                     >
                   `,
                 )}