feat(sponsors): OrcaRouter placement, overview introduction and links

README.md

@@ -106,16 +106,15 @@ See [SPONSORS.md](./SPONSORS.md).
 
 <!-- sponsors:main — one banner, model developers only; empty until a Main sponsor signs -->
 
-<!-- sponsors:standard — one row per sponsor, in order of signing. Uncomment the table with the first row:
+<!-- sponsors:standard — one row per sponsor, in order of signing -->
 <table>
 <tbody>
 <tr>
-<td width="180"><a href="SPONSOR_URL"><img src="https://raw.githubusercontent.com/lidge-jun/opencodex/main/assets/sponsors/SPONSOR.png" alt="SPONSOR" width="150"></a></td>
-<td>Thanks to SPONSOR for sponsoring this project! BLURB</td>
+<td width="180"><a href="https://www.orcarouter.ai/?utm_source=opencodex&utm_medium=readme"><img src="https://raw.githubusercontent.com/lidge-jun/opencodex/main/assets/sponsors/orcarouter.png" alt="OrcaRouter" width="150"></a></td>
+<td>Thanks to <a href="https://www.orcarouter.ai/?utm_source=opencodex&utm_medium=readme">OrcaRouter</a> for sponsoring this project! OrcaRouter is one OpenAI-compatible AI gateway for production AI: adaptive routing that grades every prompt and sends it to the model that clears your bar, automatic failover, routing rules as code, zero-markup provider pricing with prompt caching, and guardrails, an agent firewall, and request logs on every call across 200+ models. Pick <code>OrcaRouter</code> in the Add provider picker or run <code>ocx provider add orcarouter</code>; <code>orcarouter/auto</code> is the adaptive router.</td>
 </tr>
 </tbody>
 </table>
--->
 
 ---
 

SPONSORS.md

@@ -45,7 +45,7 @@ sponsor receives:
   supplied by the sponsor and published verbatim. The maintainer may decline or require edits to
   text that is false, misleading, disparages third parties, or breaches applicable law or GitHub
   policy. A second-language blurb (for example Chinese) may run alongside the English one.
-- A built-in provider preset (`ocx provider select <id>`) shipped in a public npm release,
+- A built-in provider preset (`ocx provider add <id>`) shipped in a public npm release,
   listed near the top of the provider picker in the dashboard and CLI and marked as a sponsor
   there. (The registry field and picker ordering that back this land with the first sponsor
   preset; today the picker follows registry order.)

devlog/_plan/260908_sponsor_overview/010_overview.md

@@ -0,0 +1,38 @@
+# Sponsor overview presentation
+
+Satisfy-spec, C2, one shared UI slice delivered to existing independent PRs #3914 and #3915. Trigger: the maintainer requested concise marketing copy, hyperlinks, tidy design and PR screenshot mockups. Stop after both remote branches and PR descriptions are updated with truthful verification. No merge, release, deployment, credential changes, outreach or new dependencies. No user-defined resource budget; use existing local tools and remote macmini-cf for heavy validation. This document and the local goalplan hold evidence. Escalate only a conflicting remote edit, inaccessible publication or unrelated baseline failure requiring broader scope; report incomplete evidence honestly.
+
+## Design read
+
+Developer dashboard, existing neutral theme and system font. Keep compact connection facts and quota data; introduce one quiet sponsor strip with product identity, a two-line value proposition, explicit Sponsor disclosure and named outbound actions. No hero, animation, invented discount or performance claim. Variance 3/10, motion 1/10, density D5. Reuse existing ProviderIcon, button/link tokens and locale dictionaries. Desktop strip places copy and actions side by side; narrow containers wrap actions below copy. Screenshot mockups use actual components and synthetic account/usage values, labelled as fixtures in PR prose. Utility dashboard exemption: no generated concept images.
+
+## Existing owners and necessity
+
+- `gui/src/pages/Providers.tsx:289`: existing cached `/api/provider-presets` request; consume its result instead of adding a request/store.
+- `gui/src/components/provider-catalog/provider-presets.ts:17`: CatalogPreset already owns sponsor/sponsorUrl/dashboardUrl/note. No backend field or persistence change.
+- `gui/src/components/provider-workspace/ProviderDetails.tsx:265`: pass the matched preset to Overview.
+- `gui/src/components/provider-workspace/ProviderOverview.tsx:186`: note is duplicated in connection facts and NotesSection. Remove the duplicate and move the existing editable NotesSection into the wider main column. Preserve full note and its editing behavior for every provider.
+- `gui/src/styles/provider-workspace-shell.css:606`: existing responsive grid/tokens.
+- Searched preset matching, sponsor fields, Overview callers and note-save tests; no equivalent overview sponsor presentation exists. Configuration alone cannot add links to the current text-only view.
+
+## Diff map
+
+1. MODIFY Providers cached request typing to CatalogPreset[] and pass matching preset; match canonical id + adapter + normalized endpoint (trailing slash tolerated); mismatched endpoints or absent presets produce no sponsor strip. Do not infer endorsement from name alone. Reuse cache; no new fetch.
+2. MODIFY ProviderDetails and ProviderOverview optional preset prop. NEW small ProviderSponsor component in provider-workspace: render only known sponsor identities with active sponsor metadata; localize concise OrcaRouter adaptive-routing and PackyCode multi-tool API-relay descriptions. Preserve exact existing affiliate URL, expose dashboard link only when distinct, HTTP(S) only, new-tab noopener/noreferrer. No HTML parsing of notes.
+3. MODIFY Overview: render sponsor strip above columns; remove connection note row, put existing NotesSection after auth summary, leaving right column stats/quota only. Full user note remains visible/editable once.
+4. MODIFY existing workspace stylesheet for strip layout, subtle border, readable copy/actions and note wrapping. MODIFY all locale dictionaries for every added key.
+5. NEW focused GUI render tests for sponsor links/disclosure, missing/non-sponsor/custom-endpoint cases; extend existing note test to assert exactly one note and continued editing. No root test-map change for GUI tests.
+6. MODIFY providers guide and GUI SoT for sponsor overview behavior. ADD desktop and narrow actual-render PNGs per sponsor under existing assets/sponsors; update both PR descriptions, preserving prior scope and verification distinctions.
+
+## Acceptance and validation
+
+- Active OrcaRouter API and OAuth presets show the strip only for their configured endpoint; PackyCode only on its sponsor branch. Missing catalog, non-sponsor and changed endpoint remain ordinary provider views. Focused tests activate each branch.
+- Exact sponsorURL survives, duplicate dashboard URL is suppressed, unsafe URLs do not become anchors. Provider limitations and arbitrary user note remain complete and occur once; note-save failure keeps draft/error.
+- Run focused GUI tests (new sponsor tests plus existing notes, catalog sponsor-pinning and locale parity), lint:i18n, lint and GUI build. Existing scripts confirmed in gui/package.json; target files/locale imports prove coverage. Fresh execution recorded in C, not claimed from script existence.
+- For review-ready delivery run root typecheck and full tests plus full GUI tests on isolated macmini-cf checkout; build locally for rendered proof. Existing PR gates already fail before this patch: diagnose separately and do not claim green by inheritance.
+- Browser smoke at 1440px and 390px, light/dark, English/Korean: inspect screenshot, actual hyperlinks and keyboard focus, note editing and overflow. No live account data or upstream inference.
+- Preserve both original histories: build on sponsor remote heads in this bound worktree with separate local branches, carry shared commit to second branch, push fast-forward to each existing remote after refreshing identity. No native stack changes.
+
+## Audit and evidence
+
+Independent audit: GO-WITH-FIXES, one blocking coverage gap. Folded: the browser integration smoke must load the real Providers → Details → Overview chain with delayed catalog resolution, assert sponsor content appears, count the shared preset request, then change the fixture endpoint and verify the strip disappears. Component-only screenshots do not close this row. Branch matrix: Orca API/OAuth positive and Packy absent on Orca head; Packy positive and Orca strip absent on Packy head. Baseline focused tests: 13 pass / 0 fail. Existing CI failure is French modal.badge.sponsor untranslated; correct the sponsor-specific locale value while updating copy.

docs-site/src/content/docs/guides/providers.md

@@ -6,6 +6,13 @@ description: Every way opencodex authenticates and talks to an LLM provider —
 A **provider** is one upstream LLM endpoint plus how to reach it: an adapter, a base URL, an auth
 mode, and an optional model list. Providers live under `providers` in `~/.opencodex/config.json`.
 
+The dashboard provider Overview separates connection details, account usage and editable notes.
+Notes appear once, below the connection and authentication sections. Supported sponsor presets
+also show a short introduction, a Sponsor label and links to the provider's site or console.
+These links preserve the preset's referral parameters. Sponsor information is shown only when
+the configured provider name, adapter and endpoint match the preset; it never changes routing,
+account selection or defaults.
+
 ## OpenAI account modes
 
 | Provider id | Use | Credential/account rule |
@@ -333,6 +340,13 @@ preserves those requested tiers; any backend-specific normalization remains Clin
 available in the Cline IDE/CLI, not through the API; `minimax/minimax-m2.5` is the documented API
 free-experimentation model.
 
+**OrcaRouter** ([sponsor](https://github.com/lidge-jun/opencodex/blob/main/SPONSORS.md)) is an
+OpenAI-compatible gateway at `https://api.orcarouter.ai/v1` with vendor-namespaced model ids
+(`openai/gpt-5.5`, `anthropic/claude-opus-4.8`, `deepseek/deepseek-v4-pro`, ...) and an adaptive
+router, `orcarouter/auto`, that grades each prompt and picks the model. Create a key in the
+[OrcaRouter console](https://www.orcarouter.ai/console); the preset pins the row near the top of the
+Add provider picker and marks it as a sponsor, and nothing else about routing or defaults changes.
+
 | Provider | Base URL |
 | --- | --- |
 | **OpenAI (API key)** | `https://api.openai.com/v1` |

gui/src/components/provider-catalog/ProviderCatalog.tsx

@@ -8,6 +8,7 @@ import { useMemo, useState } from "react";
 import { useT } from "../../i18n/shared";
 import {
   bucketPresets,
+  pinSponsors,
   filterPresets,
   type CatalogPreset,
 } from "./provider-presets";
@@ -95,7 +96,7 @@ export default function ProviderCatalog({
     });
   }, [catalog, usageRank]);
 
-  const buckets = useMemo(() => bucketPresets(ranked), [ranked]);
+  const buckets = useMemo(() => bucketPresets(pinSponsors(ranked)), [ranked]);
   const tierList = buckets[tier];
   const rows = useMemo(() => filterPresets(tierList, query), [tierList, query]);
 
@@ -112,7 +113,10 @@ export default function ProviderCatalog({
     const free = (p.freeTier || p.keyOptional) && p.auth === "key"
       ? <span className="badge badge-green">{t("modal.badge.free")}</span>
       : null;
-    return <>{free}{auth}</>;
+    const sponsor = p.sponsor
+      ? <span className="badge badge-accent provider-catalog-sponsor" title={p.sponsorUrl}>{t("modal.badge.sponsor")}</span>
+      : null;
+    return <>{sponsor}{free}{auth}</>;
   };
 
   return (

gui/src/components/provider-catalog/provider-presets.ts

@@ -6,7 +6,7 @@
  * predicates), search filtering, and deterministic sorting. No React, no fetch.
  */
 
-import { providerTier, type ProviderTier, type WorkspaceProvider } from "../../provider-workspace/catalog";
+import { providerTier, type ProviderTier, type WorkspaceProvider, type WorkspaceItem } from "../../provider-workspace/catalog";
 import type { ProviderPayload } from "../../provider-payload";
 
 /** Row shape returned by GET /api/provider-presets (mirrors DerivedProviderPreset). */
@@ -28,6 +28,9 @@ export interface CatalogPreset {
   keyOptional?: boolean;
   /** Free pricing — may still require an API key (e.g. NVIDIA NIM). */
   freeTier?: boolean;
+  /** Sponsor tier (SPONSORS.md). Sponsor rows are pinned to the top of their tab and chipped. */
+  sponsor?: "main" | "standard";
+  sponsorUrl?: string;
   /**
    * Endpoint picker (e.g. Qwen Cloud). Choice without `baseUrl` = Custom (show text field).
    */
@@ -36,6 +39,21 @@ export interface CatalogPreset {
   provider?: ProviderPayload;
 }
 
+/** A configured name alone cannot identify a sponsor after its endpoint is edited. */
+export function matchingWorkspacePreset(item: WorkspaceItem, presets: CatalogPreset[]): CatalogPreset | undefined {
+  const endpoint = (value: string) => {
+    try {
+      const url = new URL(value.trim());
+      if (url.username || url.password || url.search || url.hash) return undefined;
+      return `${url.origin}${url.pathname.replace(/\/+$/, "")}`;
+    } catch { return undefined; }
+  };
+  const base = endpoint(item.baseUrl);
+  if (!base) return undefined;
+  return presets.find(preset => preset.id === item.name && preset.adapter === item.adapter
+    && endpoint(preset.baseUrl) === base);
+}
+
 /**
  * Adapt a preset row to the WorkspaceProvider shape the tier predicates expect
  * (preset `auth` ↔ config `authMode`; booleans normalized).
@@ -68,3 +86,20 @@ export function filterPresets(presets: CatalogPreset[], query: string): CatalogP
   if (!q) return presets;
   return presets.filter(p => p.label.toLowerCase().includes(q) || p.id.toLowerCase().includes(q));
 }
+
+const SPONSOR_RANK: Record<NonNullable<CatalogPreset["sponsor"]>, number> = { main: 0, standard: 1 };
+
+/**
+ * Sponsor rows first — Main before Standard, alphabetical by label within a tier — then the
+ * caller's order untouched. Stable, so usage ranking still decides the non-sponsor tail.
+ * Alphabetical among sponsors is deliberate: it is the one order no sponsor can buy.
+ */
+export function pinSponsors(presets: CatalogPreset[]): CatalogPreset[] {
+  const sponsors = presets.filter(p => p.sponsor);
+  if (sponsors.length === 0) return presets;
+  sponsors.sort((a, b) =>
+    SPONSOR_RANK[a.sponsor!] - SPONSOR_RANK[b.sponsor!]
+    || a.label.localeCompare(b.label, undefined, { sensitivity: "base" })
+    || a.id.localeCompare(b.id));
+  return [...sponsors, ...presets.filter(p => !p.sponsor)];
+}

gui/src/components/provider-workspace/ProviderDetails.tsx

@@ -13,6 +13,7 @@ import { ProviderIcon } from "./ProviderRail";
 import { Switch } from "../../ui";
 import { IconChevron, IconTrash } from "../../icons";
 import ProviderOverview from "./ProviderOverview";
+import type { CatalogPreset } from "../provider-catalog/provider-presets";
 import type { ModelRow } from "../../pages/models-shared";
 import ProviderModels from "./ProviderModels";
 import ProviderUsage from "./ProviderUsage";
@@ -27,6 +28,7 @@ type Tab = "overview" | "models" | "usage" | "accounts" | "settings";
 
 export default function ProviderDetails({
   item,
+  preset,
   usageTotals,
   modelUsage,
   quotaReport,
@@ -63,6 +65,7 @@ export default function ProviderDetails({
   onRefreshQuota,
 }: {
   item: WorkspaceItem;
+  preset?: CatalogPreset;
   usageTotals?: ProviderUsageTotals;
   modelUsage?: ProviderModelUsageRow[];
   quotaReport?: ProviderQuotaReportView;
@@ -264,6 +267,7 @@ export default function ProviderDetails({
         {tab === "overview" && (
           <ProviderOverview
             item={item}
+            preset={preset}
             apiBase={apiBase}
             connectionIdentity={connectionIdentity}
             usageTotals={usageTotals}

gui/src/components/provider-workspace/ProviderOverview.tsx

@@ -13,6 +13,8 @@ import type { AccountQuotaReading, ProviderUsageTotals } from "./types";
 import { authModeLabel } from "./ProviderRail";
 import type { ProviderUpdatePatch, ProviderUpdateResult } from "./types";
 import ProviderCurrentQuota from "./ProviderCurrentQuota";
+import type { CatalogPreset } from "../provider-catalog/provider-presets";
+import ProviderSponsor from "./ProviderSponsor";
 
 type ConnectionTestResult = {
   applicable?: boolean;
@@ -30,12 +32,13 @@ type ConnectionTestState = {
 };
 
 export default function ProviderOverview({
-  item, usageTotals, quotaReport, currentQuotaReading, onRefreshQuota, oauthEmail, oauth,
+  item, preset, usageTotals, quotaReport, currentQuotaReading, onRefreshQuota, oauthEmail, oauth,
   apiBase, connectionIdentity,
   onEditSettings, onViewUsage, onUpdateProvider,
   onReauthenticate, onCancelLogin, reauthBusy = false,
 }: {
   item: WorkspaceItem;
+  preset?: CatalogPreset;
   usageTotals?: ProviderUsageTotals;
   quotaReport?: ProviderQuotaReportView;
   currentQuotaReading?: AccountQuotaReading;
@@ -140,6 +143,8 @@ export default function ProviderOverview({
       ? (connectionResult.message || t("pws.connectionOk"))
       : (connectionResult?.error || t("pws.connectionFailed"));
   return (
+    <>
+    <ProviderSponsor item={item} preset={preset} />
     <div className="pws-overview-layout">
       <div className="pws-overview-main">
       <section className="pws-section" aria-label={t("pws.connection")}>
@@ -166,12 +171,6 @@ export default function ProviderOverview({
             <dt>{t("modal.defaultModel")}</dt>
             <dd>{item.defaultModel ?? <span className="muted">—</span>}</dd>
           </div>
-          {item.note && (
-            <div className="pws-kv-row">
-              <dt>{t("pws.cell.note")}</dt>
-              <dd className="muted">{item.note}</dd>
-            </div>
-          )}
         </dl>
         {apiBase && (
           <div className="row" style={{ marginTop: 12, alignItems: "center" }}>
@@ -250,6 +249,7 @@ export default function ProviderOverview({
           </div>
         )}
       </section>
+      <NotesSection item={item} onUpdateProvider={onUpdateProvider} />
       </div>
 
       <aside className="pws-overview-sidebar">
@@ -280,9 +280,9 @@ export default function ProviderOverview({
       </section>
 
       <ProviderCurrentQuota key={`${item.name}:${connectionIdentity ?? ""}`} report={quotaReport} reading={currentQuotaReading} onRefreshQuota={onRefreshQuota} />
-      <NotesSection item={item} onUpdateProvider={onUpdateProvider} />
       </aside>
     </div>
+    </>
   );
 }
 

gui/src/components/provider-workspace/ProviderSponsor.tsx

@@ -0,0 +1,44 @@
+import { useT } from "../../i18n/shared";
+import { IconExternal } from "../../icons";
+import type { WorkspaceItem } from "../../provider-workspace/catalog";
+import { matchingWorkspacePreset, type CatalogPreset } from "../provider-catalog/provider-presets";
+
+function webLink(value?: string): string | undefined {
+  if (!value) return undefined;
+  try {
+    const url = new URL(value);
+    return (url.protocol === "https:" || url.protocol === "http:") && !url.username && !url.password
+      ? value : undefined;
+  } catch { return undefined; }
+}
+
+/** Presentation only: sponsorship never changes routing or account state. */
+export default function ProviderSponsor({ item, preset }: { item: WorkspaceItem; preset?: CatalogPreset }) {
+  const t = useT();
+  if (!preset?.sponsor || !matchingWorkspacePreset(item, [preset])) return null;
+  const brand = preset.id === "orcarouter" || preset.id === "orcarouter-oauth"
+    ? "OrcaRouter" : preset.id === "packycode" ? "PackyCode" : undefined;
+  if (!brand) return null;
+  const orca = brand === "OrcaRouter";
+  const visit = webLink(preset.sponsorUrl);
+  const dashboard = webLink(preset.dashboardUrl);
+
+  return <section className="pws-sponsor" aria-label={`${brand} · ${t("modal.badge.sponsor")}`}>
+    <div className="pws-sponsor-copy">
+      <div className="pws-sponsor-byline">
+        <span>{brand}</span>
+        <span className="pws-sponsor-badge">{t("modal.badge.sponsor")}</span>
+      </div>
+      <h3>{t(orca ? "pws.sponsor.orcaTitle" : "pws.sponsor.packyTitle")}</h3>
+      <p>{t(orca ? "pws.sponsor.orcaDescription" : "pws.sponsor.packyDescription")}</p>
+    </div>
+    {(visit || dashboard) && <div className="pws-sponsor-actions">
+      {visit && <a className="btn btn-primary" href={visit} target="_blank" rel="noopener noreferrer">
+        {t("pws.sponsor.visit", { provider: brand })}<IconExternal width={14} height={14} aria-hidden="true" />
+      </a>}
+      {dashboard && dashboard !== visit && <a className="pws-sponsor-console" href={dashboard} target="_blank" rel="noopener noreferrer">
+        {t("pws.sponsor.console")}<IconExternal width={13} height={13} aria-hidden="true" />
+      </a>}
+    </div>}
+  </section>;
+}