@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.30

package/eventcatalog/src/components/Search/search-utils.ts

@@ -168,6 +168,32 @@ export const getIndexedResultRank = ({
   return 0;
 };
 
+/**
+ * How well a resource matches a resource search query: an exact name (5), a name starting with
+ * the query (4) or containing it (3), then the id (2), then the summary (1). 0 is no match.
+ */
+export const getResourceResultRank = (item: Pick<SearchItem, 'name' | 'key' | 'rawNode'>, query: string) => {
+  const lowerQuery = query.toLowerCase();
+  const name = item.name.toLowerCase();
+  if (name === lowerQuery) return 5;
+  if (name.startsWith(lowerQuery)) return 4;
+  if (name.includes(lowerQuery)) return 3;
+  // Key format is "type:id:version" (e.g. "service:OrdersService:0.0.3").
+  // Match against the id so users can find resources by their raw id too.
+  const id = item.key?.split(':')[1];
+  if (id?.toLowerCase().includes(lowerQuery)) return 2;
+  if (item.rawNode.summary?.toLowerCase().includes(lowerQuery)) return 1;
+  return 0;
+};
+
+/** Resources that match a resource search query, best matches first (index order within a rank) */
+export const rankResourceSearchItems = <T extends Pick<SearchItem, 'name' | 'key' | 'rawNode'>>(items: T[], query: string) =>
+  items
+    .map((item, index) => ({ item, index, rank: getResourceResultRank(item, query) }))
+    .filter(({ rank }) => rank > 0)
+    .sort((a, b) => b.rank - a.rank || a.index - b.index)
+    .map(({ item }) => item);
+
 export const applyActiveFilter = <T extends { type: string }>(items: T[], activeFilter: string) => {
   if (activeFilter === 'all') {
     return items;

package/eventcatalog/src/components/Seo.astro

@@ -3,8 +3,12 @@ import { SEO } from 'astro-seo';
 import config from '@config';
 import defaultImageFile from '../../public/opengraph.png';
 import { buildUrl } from '@utils/url-builder';
+import { formatPageTitle } from '@utils/page-title';
 
-const { title = config.title, description = config.tagline, ogTitle = title, ogType = 'website' } = Astro.props;
+const { description = config.tagline, ogType = 'website' } = Astro.props;
+// The page's own title (none for the homepage), followed by the catalog's
+const title = formatPageTitle(Astro.props.title);
+const ogTitle = title;
 
 const siteBaseURL = new URL(Astro.url);
 const defaultImage = new URL(defaultImageFile.src, siteBaseURL);

package/eventcatalog/src/components/Settings/AssistantSettingsForm.tsx

@@ -64,53 +64,58 @@ export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, inSSR,
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="Assistant Agent"
-        description="Assistant agent that answers questions about your architecture directly in your catalog."
-        canEdit={canEdit}
-        dirty={dirty}
-        saving={saving}
-        onSave={save}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <div className="space-y-3">
-          <ToggleRow
-            icon={<MessageSquare className="h-4 w-4" aria-hidden />}
-            label={chatEnabled ? 'Enabled' : 'Disabled'}
-            hint={
-              chatEnabled
-                ? 'Event Catalog Assistant is visible in this catalog.'
-                : 'Event Catalog Assistant is hidden from this catalog.'
-            }
-            checked={chatEnabled}
-            disabled={!canEdit}
-            onChange={setChatEnabled}
-          />
-          {chatEnabled &&
-            (chatAvailable ? (
-              <ConfigurationRequired />
-            ) : !inSSR ? (
-              <AssistantNeedsSSR />
-            ) : !hasChatConfigFile ? (
-              <AssistantNeedsConfigFile />
-            ) : null)}
-        </div>
-      </Row>
-    </form>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
+
+        <Row
+          title="Assistant Agent"
+          description="Assistant agent that answers questions about your architecture directly in your catalog."
+          canEdit={canEdit}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+        >
+          <div className="space-y-3">
+            <ToggleRow
+              icon={<MessageSquare className="h-4 w-4" aria-hidden />}
+              label={chatEnabled ? 'Enabled' : 'Disabled'}
+              hint={
+                chatEnabled
+                  ? 'Event Catalog Assistant is visible in this catalog.'
+                  : 'Event Catalog Assistant is hidden from this catalog.'
+              }
+              checked={chatEnabled}
+              disabled={!canEdit}
+              onChange={setChatEnabled}
+            />
+            {chatEnabled &&
+              (chatAvailable ? (
+                <ConfigurationRequired />
+              ) : !inSSR ? (
+                <AssistantNeedsSSR />
+              ) : !hasChatConfigFile ? (
+                <AssistantNeedsConfigFile />
+              ) : null)}
+          </div>
+        </Row>
+      </form>
+    </>
   );
 };
 
 const ConfigurationRequired = () => (
-  <div className="rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.06)] px-4 py-3">
+  <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)] px-4 py-3">
     <div className="flex items-start gap-3">
-      <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-3.5 w-3.5" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -125,7 +130,7 @@ const ConfigurationRequired = () => (
           target="_blank"
           rel="noreferrer"
           className={cn(
-            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline'
+            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text))] hover:underline'
           )}
         >
           Configure the Agent
@@ -137,15 +142,15 @@ const ConfigurationRequired = () => (
 );
 
 const AssistantNeedsSSR = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <ServerCog className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
           <p className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">Server output mode required</p>
-          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-accent))]">
+          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text))]">
             SSR
           </span>
         </div>
@@ -157,7 +162,7 @@ const AssistantNeedsSSR = () => (
             href={ASSISTANT_CONFIGURATION_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />
@@ -178,9 +183,9 @@ const AssistantNeedsSSR = () => (
 );
 
 const AssistantNeedsConfigFile = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -195,7 +200,7 @@ const AssistantNeedsConfigFile = () => (
             href={ASSISTANT_CONFIGURATION_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />

package/eventcatalog/src/components/Settings/GeneralSettingsForm.tsx

@@ -179,193 +179,198 @@ export const GeneralSettingsForm = ({ canEdit, initial, apiBase }: Props) => {
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="Theme"
-        description="Pick a built-in colour theme. Selection updates the preview live; click Save to persist."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('theme')}
-        saving={savingKey === 'theme'}
-        onSave={() => saveRow('theme')}
-        error={errors.theme}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-          {themeOptions(form.theme).map((t) => {
-            const preview = THEME_PREVIEWS[t] ?? { accent: '#888', bg: '#1a1a1a', label: t };
-            const isActive = form.theme === t;
-            const isCustom = !isKnownTheme(t);
-            return (
-              <button
-                type="button"
-                key={t}
-                onClick={() => setField('theme', t)}
-                disabled={!canEdit}
-                aria-pressed={isActive}
-                className={cn(
-                  'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
-                  'disabled:cursor-not-allowed disabled:opacity-50',
-                  isActive
-                    ? 'border-[rgb(var(--ec-accent))] ring-2 ring-[rgb(var(--ec-accent)/0.25)]'
-                    : 'border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-page-text-muted)/0.6)]'
-                )}
-              >
-                <div className="relative h-14 w-full overflow-hidden" style={{ background: preview.bg }}>
-                  <div
-                    className="absolute -bottom-2 -right-2 h-12 w-12 rounded-full opacity-90 blur-md"
-                    style={{ background: preview.accent }}
-                    aria-hidden
-                  />
-                  <div
-                    className="absolute left-3 top-3 h-1.5 w-10 rounded-full opacity-90"
-                    style={{ background: preview.accent }}
-                    aria-hidden
-                  />
-                  <div
-                    className="absolute left-3 top-6 h-1 w-7 rounded-full opacity-60"
-                    style={{ background: 'rgba(255,255,255,0.4)' }}
-                    aria-hidden
-                  />
-                  {isActive && (
-                    <span className="absolute right-1.5 top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-white text-black shadow-sm">
-                      <Check className="h-2.5 w-2.5" aria-hidden />
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center justify-between gap-2 px-3 py-2">
-                  <span className="text-[12px] font-medium capitalize text-[rgb(var(--ec-page-text))]">{preview.label}</span>
-                  {isCustom && (
-                    <span className="rounded-full border border-[rgb(var(--ec-page-border))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
-                      custom
-                    </span>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
+
+        <Row
+          title="Theme"
+          description="Pick a built-in colour theme. Selection updates the preview live; click Save to persist."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('theme')}
+          saving={savingKey === 'theme'}
+          onSave={() => saveRow('theme')}
+          error={errors.theme}
+        >
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            {themeOptions(form.theme).map((t) => {
+              const preview = THEME_PREVIEWS[t] ?? { accent: '#888', bg: '#1a1a1a', label: t };
+              const isActive = form.theme === t;
+              const isCustom = !isKnownTheme(t);
+              return (
+                <button
+                  type="button"
+                  key={t}
+                  onClick={() => setField('theme', t)}
+                  disabled={!canEdit}
+                  aria-pressed={isActive}
+                  className={cn(
+                    'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
+                    'disabled:cursor-not-allowed disabled:opacity-50',
+                    isActive
+                      ? 'border-[rgb(var(--ec-page-text))] ring-2 ring-[rgb(var(--ec-page-text)/0.15)]'
+                      : 'border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-page-text-muted)/0.6)]'
                   )}
-                </div>
-              </button>
-            );
-          })}
-        </div>
-      </Row>
+                >
+                  <div className="relative h-14 w-full overflow-hidden" style={{ background: preview.bg }}>
+                    <div
+                      className="absolute -bottom-2 -right-2 h-12 w-12 rounded-full opacity-90 blur-md"
+                      style={{ background: preview.accent }}
+                      aria-hidden
+                    />
+                    <div
+                      className="absolute left-3 top-3 h-1.5 w-10 rounded-full opacity-90"
+                      style={{ background: preview.accent }}
+                      aria-hidden
+                    />
+                    <div
+                      className="absolute left-3 top-6 h-1 w-7 rounded-full opacity-60"
+                      style={{ background: 'rgba(255,255,255,0.4)' }}
+                      aria-hidden
+                    />
+                    {isActive && (
+                      <span className="absolute right-1.5 top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-white text-black shadow-sm">
+                        <Check className="h-2.5 w-2.5" aria-hidden />
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between gap-2 px-3 py-2">
+                    <span className="text-[12px] font-medium capitalize text-[rgb(var(--ec-page-text))]">{preview.label}</span>
+                    {isCustom && (
+                      <span className="rounded-full border border-[rgb(var(--ec-page-border))] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+                        custom
+                      </span>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </Row>
 
-      <Row
-        title="Organization"
-        description="Used as the catalog name, the brand line next to the logo, and OpenGraph metadata."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('organization')}
-        saving={savingKey === 'organization'}
-        onSave={() => saveRow('organization')}
-        error={errors.organization}
-      >
-        <input
-          type="text"
-          value={form.organization}
-          onChange={handleChange('organization')}
-          disabled={!canEdit}
-          maxLength={100}
-          placeholder="Acme Inc."
-          className={cn(inputBase, errors.organization && inputError)}
-          required
-        />
-      </Row>
+        <Row
+          title="Organization"
+          description="Used as the catalog name, the brand line next to the logo, and OpenGraph metadata."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('organization')}
+          saving={savingKey === 'organization'}
+          onSave={() => saveRow('organization')}
+          error={errors.organization}
+        >
+          <input
+            type="text"
+            value={form.organization}
+            onChange={handleChange('organization')}
+            disabled={!canEdit}
+            maxLength={100}
+            placeholder="Acme Inc."
+            className={cn(inputBase, errors.organization && inputError)}
+            required
+          />
+        </Row>
 
-      <Row
-        title="Tagline"
-        description="A short subtitle shown beneath the organization name on the homepage."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('tagline')}
-        saving={savingKey === 'tagline'}
-        onSave={() => saveRow('tagline')}
-        error={errors.tagline}
-      >
-        <textarea
-          value={form.tagline}
-          onChange={handleChange('tagline')}
-          disabled={!canEdit}
-          maxLength={500}
-          rows={2}
-          placeholder="Discover and explore our events, services, and architecture."
-          className={cn(inputBase, 'resize-y', errors.tagline && inputError)}
-        />
-      </Row>
+        <Row
+          title="Tagline"
+          description="A short subtitle shown beneath the organization name on the homepage."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('tagline')}
+          saving={savingKey === 'tagline'}
+          onSave={() => saveRow('tagline')}
+          error={errors.tagline}
+        >
+          <textarea
+            value={form.tagline}
+            onChange={handleChange('tagline')}
+            disabled={!canEdit}
+            maxLength={500}
+            rows={2}
+            placeholder="Discover and explore our events, services, and architecture."
+            className={cn(inputBase, 'resize-y', errors.tagline && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Homepage link"
-        description="Where the logo links to. Useful for pointing back to your main site."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('homepageLink')}
-        saving={savingKey === 'homepageLink'}
-        onSave={() => saveRow('homepageLink')}
-        error={errors.homepageLink}
-      >
-        <input
-          type="url"
-          value={form.homepageLink}
-          onChange={handleChange('homepageLink')}
-          onBlur={handleUrlBlur('homepageLink')}
-          disabled={!canEdit}
-          placeholder="https://example.com"
-          className={cn(inputBase, monoInput, errors.homepageLink && inputError)}
-        />
-      </Row>
+        <Row
+          title="Homepage link"
+          description="Where the logo links to. Useful for pointing back to your main site."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('homepageLink')}
+          saving={savingKey === 'homepageLink'}
+          onSave={() => saveRow('homepageLink')}
+          error={errors.homepageLink}
+        >
+          <input
+            type="url"
+            value={form.homepageLink}
+            onChange={handleChange('homepageLink')}
+            onBlur={handleUrlBlur('homepageLink')}
+            disabled={!canEdit}
+            placeholder="https://example.com"
+            className={cn(inputBase, monoInput, errors.homepageLink && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Edit URL"
-        description="Base URL for the “Edit on GitHub” links shown on resource pages."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('editUrl')}
-        saving={savingKey === 'editUrl'}
-        onSave={() => saveRow('editUrl')}
-        error={errors.editUrl}
-      >
-        <input
-          type="url"
-          value={form.editUrl}
-          onChange={handleChange('editUrl')}
-          onBlur={handleUrlBlur('editUrl')}
-          disabled={!canEdit}
-          placeholder="https://github.com/org/repo/edit/main"
-          className={cn(inputBase, monoInput, errors.editUrl && inputError)}
-        />
-      </Row>
+        <Row
+          title="Edit URL"
+          description="Base URL for the “Edit on GitHub” links shown on resource pages."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('editUrl')}
+          saving={savingKey === 'editUrl'}
+          onSave={() => saveRow('editUrl')}
+          error={errors.editUrl}
+        >
+          <input
+            type="url"
+            value={form.editUrl}
+            onChange={handleChange('editUrl')}
+            onBlur={handleUrlBlur('editUrl')}
+            disabled={!canEdit}
+            placeholder="https://github.com/org/repo/edit/main"
+            className={cn(inputBase, monoInput, errors.editUrl && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Repository URL"
-        description="Link to your catalog's source repository. Shown in the header for quick navigation back to the code."
-        canEdit={canEdit}
-        dirty={dirtyKeys.has('repositoryUrl')}
-        saving={savingKey === 'repositoryUrl'}
-        onSave={() => saveRow('repositoryUrl')}
-        error={errors.repositoryUrl}
-      >
-        <input
-          type="url"
-          value={form.repositoryUrl}
-          onChange={handleChange('repositoryUrl')}
-          onBlur={handleUrlBlur('repositoryUrl')}
-          disabled={!canEdit}
-          placeholder="https://github.com/org/repo"
-          className={cn(inputBase, monoInput, errors.repositoryUrl && inputError)}
-        />
-      </Row>
+        <Row
+          title="Repository URL"
+          description="Link to your catalog's source repository. Shown in the header for quick navigation back to the code."
+          canEdit={canEdit}
+          dirty={dirtyKeys.has('repositoryUrl')}
+          saving={savingKey === 'repositoryUrl'}
+          onSave={() => saveRow('repositoryUrl')}
+          error={errors.repositoryUrl}
+        >
+          <input
+            type="url"
+            value={form.repositoryUrl}
+            onChange={handleChange('repositoryUrl')}
+            onBlur={handleUrlBlur('repositoryUrl')}
+            disabled={!canEdit}
+            placeholder="https://github.com/org/repo"
+            className={cn(inputBase, monoInput, errors.repositoryUrl && inputError)}
+          />
+        </Row>
 
-      <Row
-        title="Logo"
-        description="Image shown in the top-left corner. PNG, JPG, SVG, or WebP up to 2MB."
-        canEdit={canEdit}
-        // Logo upload saves itself directly; no inline Save button needed.
-        dirty={false}
-      >
-        <LogoUpload
+        <Row
+          title="Logo"
+          description="Image shown in the top-left corner. PNG, JPG, SVG, or WebP up to 2MB."
           canEdit={canEdit}
-          initialSrc={initial.logo?.src ? `${initial.logo.src}?t=${Date.now()}` : undefined}
-          apiUrl={`${apiBase}/logo`}
-        />
-      </Row>
-    </form>
+          // Logo upload saves itself directly; no inline Save button needed.
+          dirty={false}
+        >
+          <LogoUpload
+            canEdit={canEdit}
+            initialSrc={initial.logo?.src ? `${initial.logo.src}?t=${Date.now()}` : undefined}
+            apiUrl={`${apiBase}/logo`}
+          />
+        </Row>
+      </form>
+    </>
   );
 };