diff --git a/assets/hero.png b/assets/hero.png
index d469b65..2dd12af 100644
Binary files a/assets/hero.png and b/assets/hero.png differ
diff --git a/assets/hero.svg b/assets/hero.svg
index 0ede983..6258e35 100644
--- a/assets/hero.svg
+++ b/assets/hero.svg
@@ -14,10 +14,12 @@
   <rect width="1200" height="380" fill="url(#glow)"/>
   <rect x="0.5" y="0.5" width="1199" height="379" rx="0" fill="none" stroke="#1c2330"/>
 
-  <!-- Swiss-cross mark -->
+  <!-- Prompt mark: a terminal chevron + cursor on the red handle (no cross). -->
   <rect x="64" y="60" width="76" height="76" rx="17" fill="#da291c"/>
-  <rect x="96" y="78" width="12" height="40" rx="3" fill="#ffffff"/>
-  <rect x="82" y="92" width="40" height="12" rx="3" fill="#ffffff"/>
+  <g transform="translate(64,60) scale(0.76)">
+    <path d="M30 34 L54 50 L30 66" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="62" y="41" width="13" height="18" rx="3" fill="#ffffff"/>
+  </g>
 
   <!-- Wordmark -->
   <text x="158" y="112" font-size="58" font-weight="800" letter-spacing="-1.5">
diff --git a/assets/social.png b/assets/social.png
index 00c6894..f62d8c9 100644
Binary files a/assets/social.png and b/assets/social.png differ
diff --git a/assets/social.svg b/assets/social.svg
index b7cc3d2..2136248 100644
--- a/assets/social.svg
+++ b/assets/social.svg
@@ -16,8 +16,10 @@
   <!-- Logo + wordmark, centered -->
   <g transform="translate(410,120)">
     <rect x="0" y="0" width="120" height="120" rx="27" fill="#da291c"/>
-    <rect x="50" y="28" width="20" height="64" rx="5" fill="#ffffff"/>
-    <rect x="28" y="50" width="64" height="20" rx="5" fill="#ffffff"/>
+    <g transform="scale(1.2)">
+      <path d="M30 34 L54 50 L30 66" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
+      <rect x="62" y="41" width="13" height="18" rx="3" fill="#ffffff"/>
+    </g>
     <text x="150" y="90" font-size="96" font-weight="800" letter-spacing="-3">
       <tspan fill="#f0f6fc">swiss</tspan><tspan fill="#ff5a4d">code</tspan>
     </text>
diff --git a/src/adapters/agents/kilo/index.ts b/src/adapters/agents/kilo/index.ts
index 44c4960..8cdf2b7 100644
--- a/src/adapters/agents/kilo/index.ts
+++ b/src/adapters/agents/kilo/index.ts
@@ -19,6 +19,7 @@ import {
   ambientUnset,
   anthropicOptions,
   collapsedTierWarning,
+  compatIgnoredWarning,
   sessionUnavailableWarning,
   extendedContextWarning,
   modelRef,
@@ -57,7 +58,7 @@ export const kilo = {
   },
   binary,
   translate(input: TranslateInput): Translation {
-    const { intent, passthrough } = input
+    const { intent, passthrough, profile } = input
     const primary = intent.models.opus
 
     const config: Record<string, unknown> = {
@@ -82,6 +83,8 @@ export const kilo = {
     if (collapse) warnings.push(collapse)
     const ext = extendedContextWarning(intent, primary, 'Kilo')
     if (ext) warnings.push(ext)
+    const compat = compatIgnoredWarning(profile.compat, 'Kilo')
+    if (compat) warnings.push(compat)
 
     return { plan: { set, unset: ambientUnset(intent) }, args: [...passthrough], warnings }
   },
diff --git a/src/adapters/agents/opencode/index.ts b/src/adapters/agents/opencode/index.ts
index 17336f0..0b9976b 100644
--- a/src/adapters/agents/opencode/index.ts
+++ b/src/adapters/agents/opencode/index.ts
@@ -16,6 +16,7 @@ import {
   ambientUnset,
   anthropicOptions,
   collapsedTierWarning,
+  compatIgnoredWarning,
   sessionUnavailableWarning,
   extendedContextWarning,
   modelRef,
@@ -56,7 +57,7 @@ export const opencode = {
   },
   binary,
   translate(input: TranslateInput): Translation {
-    const { intent, passthrough } = input
+    const { intent, passthrough, profile } = input
     const primary = intent.models.opus
     const small = intent.models.haiku
 
@@ -87,6 +88,8 @@ export const opencode = {
     if (collapse) warnings.push(collapse)
     const ext = extendedContextWarning(intent, primary, 'OpenCode')
     if (ext) warnings.push(ext)
+    const compat = compatIgnoredWarning(profile.compat, 'OpenCode')
+    if (compat) warnings.push(compat)
 
     return { plan: { set, unset: ambientUnset(intent) }, args, warnings }
   },
diff --git a/src/adapters/agents/shared.ts b/src/adapters/agents/shared.ts
index a41da85..593dffb 100644
--- a/src/adapters/agents/shared.ts
+++ b/src/adapters/agents/shared.ts
@@ -103,6 +103,35 @@ export function collapsedTierWarning(
   }
 }
 
+/**
+ * Warn when a profile carries gateway compatibility flags that this agent does
+ * not consume.
+ *
+ * The compat mechanism is Claude-Code-only (capabilities.compatFlags). A flag
+ * toggled on for a Kilo or OpenCode setup changes nothing and, until this
+ * existed, said so NOWHERE — not at edit, not at launch, not in the doctor.
+ * That is the one capability mismatch with no net, and the
+ * capability-gap-never-silently-dropped rule the tier and session warnings
+ * already follow says it should have one. The flags are kept, not stripped, so
+ * the setup still works when it runs Claude Code again.
+ */
+export function compatIgnoredWarning(
+  compat: Record<string, boolean | undefined> | undefined,
+  agentLabel: string,
+): EnvWarning | null {
+  const active = Object.entries(compat ?? {})
+    .filter(([, on]) => on)
+    .map(([id]) => id)
+  if (active.length === 0) return null
+  return {
+    severity: 'medium',
+    code: 'compat-ignored',
+    message:
+      `${agentLabel} does not use gateway compatibility flags; these are set but ignored: ` +
+      `${active.join(', ')}.`,
+  }
+}
+
 /**
  * Warn when a 1M-capable provider is reached without Claude Code's `[1m]`
  * signal, which only Claude Code sends. The model still runs; its window is
diff --git a/test/adapters/agents/kilo.test.ts b/test/adapters/agents/kilo.test.ts
index 1ddba9a..5e9eb9f 100644
--- a/test/adapters/agents/kilo.test.ts
+++ b/test/adapters/agents/kilo.test.ts
@@ -68,3 +68,35 @@ test('capabilities describe a single model slot', () => {
   assert.equal(kilo.binary.name, 'kilo')
   assert.equal(kilo.binary.overrideEnv, 'SWISSCODE_KILO_BIN')
 })
+
+test('a gateway compat flag on a Kilo profile is flagged as ignored — the safety net', () => {
+  // The UI now hides the compat section for Kilo, but a hand-edited or
+  // agent-switched config can still carry a flag. Compat is Claude-Code-only,
+  // so Kilo warns rather than silently doing nothing — the one mismatch that
+  // previously had no net at edit, launch, or doctor.
+  const input: TranslateInput = {
+    intent: intent(),
+    profile: makeProfile({ provider: 'zai', compat: { disableAdaptiveThinking: true } }),
+    provider: null,
+    passthrough: [],
+    ambient: {},
+  }
+  const w = kilo.translate(input).warnings.find((x) => x.code === 'compat-ignored')
+  assert.ok(w, 'Kilo should warn that a compat flag is ignored')
+  assert.match(w.message, /disableAdaptiveThinking/)
+  assert.match(w.message, /Kilo/)
+})
+
+test('a Kilo profile with no compat flags emits no compat-ignored warning', () => {
+  const input: TranslateInput = {
+    intent: intent(),
+    profile: makeProfile({ provider: 'zai' }),
+    provider: null,
+    passthrough: [],
+    ambient: {},
+  }
+  assert.equal(
+    kilo.translate(input).warnings.find((x) => x.code === 'compat-ignored'),
+    undefined,
+  )
+})
diff --git a/web/index.html b/web/index.html
index 4b1a57d..b0fb415 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>swisscode</title>
+    <!--
+      The Swiss-cross mark, served same-origin from web/public/ (Vite copies it
+      to the asset root, swisscode's server hands it back as image/svg+xml). A
+      file rather than a data: URI so it is cacheable and the CSP stays 'self'.
+    -->
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <!-- Match the browser chrome to whichever theme is active. -->
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f5f7" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#08090a" />
     <!--
       The server rewrites this placeholder with a per-run token before serving.
       A meta tag rather than a cookie: a cookie rides along on cross-origin
diff --git a/web/panda.config.ts b/web/panda.config.ts
index 3c1ad98..becd802 100644
--- a/web/panda.config.ts
+++ b/web/panda.config.ts
@@ -256,6 +256,28 @@ export default defineConfig({
             default: { value: { base: '#cf222e', _dark: '#f85149' } },
             subtle: { value: { base: 'rgba(207,34,46,0.10)', _dark: 'rgba(248,81,73,0.14)' } },
           },
+
+          /**
+           * The swisscode identity, from the README hero, and RESERVED FOR IT.
+           *
+           * The red and coral are the brand — the logo mark and the "code" half
+           * of the wordmark. They are deliberately NOT the interactive accent:
+           * the README borrows GitHub's palette, where red is the identity and a
+           * separate blue carries interaction, and doing the same here keeps a
+           * brand-red button from reading as a danger button (the dark-mode
+           * danger and the coral are nearly the same hue).
+           *
+           * `mark` is the red HANDLE — a fill behind a white terminal prompt,
+           * NOT a cross (see the note in web/src/Brand.tsx on why the Swiss
+           * cross was retired). White-on-red reads on any surface, so it needs
+           * no light/dark variant. `wordmark` IS text, so light mode darkens the
+           * coral to clear the 3:1 large-text bar on a white panel (measured
+           * 4.3:1 at #d93a2b), while dark mode keeps the bright #ff5a4d (5:1).
+           */
+          brand: {
+            mark: { value: '#da291c' },
+            wordmark: { value: { base: '#d93a2b', _dark: '#ff5a4d' } },
+          },
         },
       },
 
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
new file mode 100644
index 0000000..00c3e6b
--- /dev/null
+++ b/web/public/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="23" fill="#da291c"/>
+  <path d="M30 34 L54 50 L30 66" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="62" y="41" width="13" height="18" rx="3" fill="#ffffff"/>
+</svg>
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0d38c98..d4605d6 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -8,6 +8,7 @@ import {
   type ThemePreference,
 } from './theme'
 import { ApiError, api, type Bootstrap } from './api'
+import { BrandMark } from './Brand'
 import { Banner, Dot, SegmentedControl } from './ui'
 import { Profiles } from './routes/Profiles'
 import { Accounts } from './routes/Accounts'
@@ -140,12 +141,7 @@ export function App() {
         })}
       >
         <div className={css({ px: '2', py: '2', mb: '3' })}>
-          <div className={css({ textStyle: 'body', fontWeight: 'title' })}>
-            swisscode
-          </div>
-          <div className={css({ textStyle: 'micro', color: 'content.tertiary', mt: '0.5' })}>
-            local configuration
-          </div>
+          <BrandMark subtitle="local configuration" />
         </div>
 
         <nav className={css({ display: 'flex', flexDirection: 'column', gap: '0.5' })}>
diff --git a/web/src/Brand.tsx b/web/src/Brand.tsx
new file mode 100644
index 0000000..0d20acf
--- /dev/null
+++ b/web/src/Brand.tsx
@@ -0,0 +1,160 @@
+// The swisscode identity, in the UI.
+//
+// The logo, the two-tone "swiss·code" wordmark, and a small custom empty-state
+// graphic, matched to assets/hero.svg and rebuilt as theme-aware React so the
+// web UI reads as the same product. Colour comes from the `brand.*` tokens,
+// which are reserved for identity and never used for controls (see the note in
+// panda.config.ts).
+//
+// WHY THE MARK IS A PROMPT, NOT A CROSS. A white cross on red is the Swiss flag
+// and coat of arms — restricted for commercial use, and evocative of the
+// Victorinox "Swiss Army Knife" marks. So the mark keeps the RED HANDLE (a
+// colour is not protectable) but drops the cross for a terminal chevron: it
+// reads as a prompt (a coding tool), as two blades opening from a pivot (the
+// multi-tool homage the name is really about — many providers from one
+// launcher), and as none of the protected things. Do not "restore the cross":
+// its absence is the point.
+//
+// The one hardcoded colour here is the white of the chevron and cursor. It is
+// not a theme value that slipped past strictTokens — white-on-red is intrinsic
+// to the mark and holds on either theme. strictTokens governs `css()` props,
+// not SVG fill/stroke attributes, so it is stated plainly.
+import type { ReactNode } from 'react'
+import { css } from '../styled-system/css'
+
+/**
+ * The mark: a terminal prompt on a red tile.
+ *
+ * A chevron whose vertex is the pivot and whose two arms open like blades, plus
+ * a block cursor — `❯█`. One bold chevron and one block, so it stays legible
+ * from a 16px favicon to a 120px social card. The red tile is a fill behind
+ * white, so it needs no light/dark variant.
+ */
+export function Logo({ size = 22, title = 'swisscode' }: { size?: number; title?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      role="img"
+      aria-label={title}
+      className={css({ flexShrink: 0, display: 'block' })}
+    >
+      <rect width="100" height="100" rx="23" fill="var(--colors-brand-mark)" />
+      {/* the prompt: a chevron (pivot at its point, arms as blades) + a block cursor */}
+      <path
+        d="M30 34 L54 50 L30 66"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="11"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect x="62" y="41" width="13" height="18" rx="3" fill="#ffffff" />
+    </svg>
+  )
+}
+
+/**
+ * "swiss" + "code" — the wordmark, with the coral half from the hero.
+ *
+ * A single element with two coloured spans rather than an image, so it inherits
+ * the page's font and stays crisp at any zoom. `weight: title` (590) matches the
+ * heading scale; the tracking comes from the textStyle.
+ */
+export function Wordmark({ style = 'heading' }: { style?: 'heading' | 'title' | 'display' }) {
+  return (
+    <span className={css({ textStyle: style, fontWeight: 'title', whiteSpace: 'nowrap' })}>
+      <span className={css({ color: 'content.primary' })}>swiss</span>
+      <span className={css({ color: 'brand.wordmark' })}>code</span>
+    </span>
+  )
+}
+
+/**
+ * Logo + wordmark + one line of context, as the sidebar header.
+ *
+ * The subtitle is `content.tertiary` so the identity carries the weight and the
+ * label recedes — the same hierarchy the README hero uses under its wordmark.
+ */
+export function BrandMark({ subtitle }: { subtitle?: string }) {
+  return (
+    <div className={css({ display: 'flex', alignItems: 'center', gap: '2' })}>
+      <Logo size={24} />
+      <div className={css({ display: 'flex', flexDirection: 'column', gap: '0' })}>
+        <Wordmark />
+        {subtitle ? (
+          <span className={css({ textStyle: 'micro', color: 'content.tertiary', mt: '-0.5' })}>
+            {subtitle}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The empty-state graphic.
+ *
+ * A dashed card holding a faint version of the prompt mark — "swisscode,
+ * nothing here yet" rather than a bare line of text. Drawn from border and
+ * brand tokens so it adapts to both themes; the mark sits at low opacity so it
+ * reads as a watermark, not a status. Paired with copy by the `Empty` primitive.
+ */
+export function EmptyGraphic({ size = 72 }: { size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      role="presentation"
+      aria-hidden="true"
+      className={css({ display: 'block' })}
+    >
+      <rect
+        x="10"
+        y="10"
+        width="80"
+        height="80"
+        rx="16"
+        fill="none"
+        stroke="var(--colors-border-strong)"
+        strokeWidth="2"
+        strokeDasharray="6 7"
+      />
+      <g opacity="0.5">
+        <path
+          d="M36 38 L54 50 L36 62"
+          fill="none"
+          stroke="var(--colors-brand-mark)"
+          strokeWidth="8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect x="60" y="44" width="10" height="13" rx="2.5" fill="var(--colors-brand-mark)" />
+      </g>
+    </svg>
+  )
+}
+
+/** The empty-state layout: the graphic above a line of copy, centred. */
+export function EmptyState({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '3',
+        py: '8',
+        px: '4',
+        textAlign: 'center',
+      })}
+    >
+      <EmptyGraphic />
+      <p className={css({ textStyle: 'body', color: 'content.tertiary', maxW: 'content' })}>
+        {children}
+      </p>
+    </div>
+  )
+}
diff --git a/web/src/routes/Accounts.tsx b/web/src/routes/Accounts.tsx
index b58109a..791de27 100644
--- a/web/src/routes/Accounts.tsx
+++ b/web/src/routes/Accounts.tsx
@@ -24,6 +24,7 @@ import {
   monoInput,
   selectStyle,
 } from '../ui'
+import { EmptyState } from '../Brand'
 // The SAME decisions the CLI and the API make, imported rather than restated.
 // core/ is pure — no I/O, no node builtins — so it bundles into the browser as
 // happily as it compiles for the launch path.
@@ -222,7 +223,12 @@ export function Accounts({ data, reload }: { data: Bootstrap; reload: () => Prom
     const isNew = !data.state.providerAccounts?.[editing]
     const provider = data.providers.find((p) => p.id === draft.provider)
     const stored = data.state.providerAccounts?.[editing]
-    const mode: 'key' | 'session' = draft.configDir ? 'session' : 'key'
+    // Session mode belongs to the first-party Anthropic endpoint: a provider
+    // with no baseUrl of its own that is not the custom "ask me" one. A gateway
+    // (baseUrl set) or a custom endpoint cannot read a ~/.claude login.
+    const sessionCapable = Boolean(provider && provider.baseUrl === null && !provider.askBaseUrl)
+    const mode: 'key' | 'session' =
+      draft.configDir && sessionCapable ? 'session' : 'key'
     return (
       <>
         <PageHeader
@@ -249,7 +255,20 @@ export function Accounts({ data, reload }: { data: Bootstrap; reload: () => Prom
             <select
               className={selectStyle}
               value={String(draft.provider ?? '')}
-              onChange={(e) => put('provider', e.target.value)}
+              onChange={(e) => {
+                const nextId = e.target.value
+                const next = data.providers.find((p) => p.id === nextId)
+                const nextSessionCapable = Boolean(next && next.baseUrl === null && !next.askBaseUrl)
+                setDraft((d) => ({
+                  ...d,
+                  provider: nextId,
+                  // A session login belongs to the first-party Anthropic
+                  // endpoint; switching to a gateway must not leave a stale
+                  // configDir that would send the ~/.claude token to a foreign
+                  // host. Drop it, reverting the account to key mode.
+                  ...(nextSessionCapable ? {} : { configDir: '' }),
+                }))
+              }}
             >
               {data.providers.map((p) => (
                 <option key={p.id} value={p.id}>
@@ -291,16 +310,27 @@ export function Accounts({ data, reload }: { data: Bootstrap; reload: () => Prom
                 naming nothing.
               */}
               <SectionLabel id={MODE_LABEL_ID}>How this account authenticates</SectionLabel>
-              <SegmentedControl
-                labelledBy={MODE_LABEL_ID}
-                options={CREDENTIAL_MODES}
-                value={mode}
-                onChange={(id) => put('configDir', id === 'session' ? '~/.claude' : '')}
-              />
-              <Note>
-                A key, or a login the agent already performed. Never both — the server refuses that
-                rather than picking one.
-              </Note>
+              {sessionCapable ? (
+                <>
+                  <SegmentedControl
+                    labelledBy={MODE_LABEL_ID}
+                    options={CREDENTIAL_MODES}
+                    value={mode}
+                    onChange={(id) => put('configDir', id === 'session' ? '~/.claude' : '')}
+                  />
+                  <Note>
+                    A key, or a login the agent already performed. Never both — the server refuses
+                    that rather than picking one.
+                  </Note>
+                </>
+              ) : (
+                // Session mode is a subscription login held in ~/.claude, which
+                // only the first-party Anthropic endpoint reads. A gateway or a
+                // custom endpoint authenticates with a key, so the choice is not
+                // offered — it could only build an account that ships the wrong
+                // token to the wrong host.
+                <Note>{provider?.label ?? 'This provider'} authenticates with an API key.</Note>
+              )}
             </Stack>
 
             {/*
@@ -442,7 +472,7 @@ export function Accounts({ data, reload }: { data: Bootstrap; reload: () => Prom
         }
       >
         {accounts.length === 0 ? (
-          <Empty>No accounts yet. An account is a provider plus the credential that pays for it.</Empty>
+          <EmptyState>No accounts yet. An account is a provider plus the credential that pays for it.</EmptyState>
         ) : (
           <DataList>
             {accounts.map(([name, a]) => {
diff --git a/web/src/routes/AgentProfiles.tsx b/web/src/routes/AgentProfiles.tsx
index 4e411d7..9d668e7 100644
--- a/web/src/routes/AgentProfiles.tsx
+++ b/web/src/routes/AgentProfiles.tsx
@@ -27,6 +27,7 @@ import {
   monoInput,
   selectStyle,
 } from '../ui'
+import { EmptyState } from '../Brand'
 import { ModelPicker } from './ModelPicker'
 
 /**
@@ -81,11 +82,18 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
   const [error, setError] = useState<string | null>(null)
   const [warnings, setWarnings] = useState<string[]>([])
   const [picking, setPicking] = useState<string | null>(null)
+  // The provider whose catalog the Browse buttons search. `null` means "derive a
+  // sensible default" — see the editor. It is a LENS, never stored: a model id
+  // pinned here is a bare, provider-agnostic string, so which catalog you
+  // browsed it from is not part of the saved setup.
+  const [browseProviderId, setBrowseProviderId] = useState<string | null>(null)
 
   const open = (name: string | null) => {
     setError(null)
     setWarnings([])
     setEditing(name ?? '')
+    // Re-derive the browse default for whichever profile just opened.
+    setBrowseProviderId(null)
     setDraft(name ? { ...data.state.agentProfiles[name] } : { models: {}, compat: {} })
   }
 
@@ -129,13 +137,54 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
   if (editing !== null) {
     const isNew = !data.state.agentProfiles?.[editing]
     const users = usersOf(editing)
-    // Borrow a provider from a profile that uses this setup, purely so the
-    // picker has a catalog to browse.
-    const viaProfile = users.map((n) => data.state.profiles[n]).find(Boolean)
-    const viaAccount = viaProfile?.accounts?.[0]
-      ? data.state.providerAccounts?.[viaProfile.accounts[0]]
-      : undefined
-    const provider = data.providers.find((p) => p.id === viaAccount?.provider)
+
+    // The agent decides how many model slots exist and which behaviour applies —
+    // `data.tiers` is Claude Code's four, but Kilo runs one model and OpenCode a
+    // primary + a small. Reading capabilities here is what stops the editor
+    // offering inputs and flags the selected agent silently ignores.
+    const agentId = (draft.agent as string) || 'claude-code'
+    const agentInfo = data.agents.find((a) => a.id === agentId)
+    const modelShape = agentInfo?.capabilities.models ?? 'tiers'
+    const supportsCompat = agentInfo?.capabilities.compatFlags ?? true
+    const usesExtendedContext = agentInfo?.capabilities.extendedContextSuffix ?? true
+    // The slots to show, mapped onto the tier keys the adapters actually read:
+    // Kilo reads `opus`; OpenCode reads `opus` (primary) + `haiku` (small);
+    // Claude Code reads all four. Hidden tiers keep their stored value.
+    const visibleSlots: { tier: string; label: string }[] =
+      modelShape === 'single'
+        ? [{ tier: 'opus', label: 'model' }]
+        : modelShape === 'primary+small'
+          ? [
+              { tier: 'opus', label: 'primary' },
+              { tier: 'haiku', label: 'small' },
+            ]
+          : data.tiers.map((t) => ({ tier: t, label: t }))
+
+    // The catalog LENS: browse against a chosen provider rather than an implicit
+    // borrow. Default to the provider a downstream profile pairs this setup with,
+    // then the default profile's provider, then any browsable one — but let the
+    // user change it, and never store the choice.
+    const borrowedProviderId = (() => {
+      const viaProfile = users.map((n) => data.state.profiles[n]).find(Boolean)
+      const acc = viaProfile?.accounts?.[0]
+        ? data.state.providerAccounts?.[viaProfile.accounts[0]]
+        : undefined
+      return acc?.provider
+    })()
+    const defaultProfileProviderId = (() => {
+      const dp = data.state.defaultProfile ? data.state.profiles?.[data.state.defaultProfile] : null
+      const acc = dp?.accounts?.[0] ? data.state.providerAccounts?.[dp.accounts[0]] : undefined
+      return acc?.provider
+    })()
+    const firstBrowsableId = data.providers.find((p) => p.catalogId)?.id
+    const activeBrowseId =
+      browseProviderId ??
+      borrowedProviderId ??
+      defaultProfileProviderId ??
+      firstBrowsableId ??
+      data.providers[0]?.id ??
+      null
+    const provider = data.providers.find((p) => p.id === activeBrowseId) ?? null
     const browsable = Boolean(provider?.catalogId)
 
     return (
@@ -191,20 +240,48 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
         <Panel
           title="Models"
           description={
-            'All four tiers, from one table. Claude Code reads the extended-context marker per ' +
-            'variable, so a tier left out is the bug where three run wide and the fourth silently ' +
-            'does not. Blank inherits the provider default.'
+            (modelShape === 'single'
+              ? `${agentInfo?.label ?? 'This agent'} runs a single model. `
+              : modelShape === 'primary+small'
+                ? `${agentInfo?.label ?? 'This agent'} runs a primary model and a small one for background work. `
+                : 'Claude Code runs a model per tier. ') +
+            (usesExtendedContext
+              ? 'It reads the extended-context marker per variable, so a tier left blank is the bug where the others run wide and it silently does not. '
+              : 'Each runs at the endpoint’s own context window. ') +
+            'Blank inherits the provider default.'
           }
         >
           <Stack gap="4">
+            {/* The catalog lens. Browsing needs a provider and this setup names
+                none of its own, so choose which one to browse against — it only
+                drives the Browse buttons and the default-model placeholders, and
+                is never saved onto the agent profile. */}
+            <Field
+              label="Browse models against"
+              hint="Which provider’s catalog the Browse buttons search. A model id is stored bare, so this choice is not part of the setup."
+            >
+              <select
+                className={selectStyle}
+                value={activeBrowseId ?? ''}
+                onChange={(e) => setBrowseProviderId(e.target.value)}
+              >
+                {data.providers.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.label}
+                    {p.catalogId ? '' : '  — no catalog'}
+                  </option>
+                ))}
+              </select>
+            </Field>
+
             {/* The label is not wrapped around its input the way `Field` wraps
                 one, because the two live in different grid columns — hence the
                 explicit htmlFor, which buys back the click target. */}
             <div className={modelGrid({ browsable })}>
-              {data.tiers.map((tier) => (
+              {visibleSlots.map(({ tier, label }) => (
                 <Fragment key={tier}>
                   <label className={tierLabel} htmlFor={`model-${tier}`}>
-                    {tier}
+                    {label}
                   </label>
                   <input
                     id={`model-${tier}`}
@@ -217,11 +294,8 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
                 </Fragment>
               ))}
             </div>
-            {!provider ? (
-              <Note>
-                No profile uses this setup yet, so there is no provider to browse a catalog from.
-                Type ids by hand, or attach it to a profile first.
-              </Note>
+            {provider && !browsable ? (
+              <Note>{provider.label} publishes no browsable catalog — type ids by hand.</Note>
             ) : null}
           </Stack>
         </Panel>
@@ -257,29 +331,49 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
             <Checkbox
               checked={Boolean(draft.skipPermissions)}
               onChange={(v) => put('skipPermissions', v)}
+              // Neutral wording: every agent supports skipping prompts, but each
+              // lowers it differently (Claude Code's --dangerously-skip-permissions,
+              // OpenCode's --auto, Kilo's config permission block), so the concrete
+              // flag is shown only for the agent that actually receives it.
               label={
-                <>
-                  Skip permission prompts <Code>--dangerously-skip-permissions</Code>
-                </>
+                agentId === 'claude-code' ? (
+                  <>
+                    Skip permission prompts <Code>--dangerously-skip-permissions</Code>
+                  </>
+                ) : (
+                  <>Skip permission prompts</>
+                )
               }
             />
 
-            <Stack gap="2">
-              <SectionLabel>Gateway compatibility</SectionLabel>
-              {/* A flag that trades something away says what it costs, here as
-                  well as on stderr — as the checkbox's note, so the price reads
-                  as belonging to that flag rather than competing with its name. */}
-              {data.compatFlags.map((flag) => (
-                <Checkbox
-                  key={flag.id}
-                  checked={Boolean(compat[flag.id])}
-                  onChange={(v) => put('compat', { ...compat, [flag.id]: v })}
-                  label={<Mono>{flag.id}</Mono>}
-                  note={flag.consequence ? `costs: ${flag.consequence}` : undefined}
-                  noteTone="warn"
-                />
-              ))}
-            </Stack>
+            {/* Gateway compat is a Claude-Code-only mechanism (capabilities.compatFlags).
+                For an agent that does not consume it, a checked box would be a
+                pure silent no-op — nothing catches it at launch or in the doctor —
+                so the section is hidden, and a note explains any flags a previous
+                Claude Code setup left behind rather than dropping them. */}
+            {supportsCompat ? (
+              <Stack gap="2">
+                <SectionLabel>Gateway compatibility</SectionLabel>
+                {/* A flag that trades something away says what it costs, here as
+                    well as on stderr — as the checkbox's note, so the price reads
+                    as belonging to that flag rather than competing with its name. */}
+                {data.compatFlags.map((flag) => (
+                  <Checkbox
+                    key={flag.id}
+                    checked={Boolean(compat[flag.id])}
+                    onChange={(v) => put('compat', { ...compat, [flag.id]: v })}
+                    label={<Mono>{flag.id}</Mono>}
+                    note={flag.consequence ? `costs: ${flag.consequence}` : undefined}
+                    noteTone="warn"
+                  />
+                ))}
+              </Stack>
+            ) : Object.values(compat).some(Boolean) ? (
+              <Note tone="warn">
+                {agentInfo?.label ?? 'This agent'} does not use gateway compatibility flags; the ones
+                set here are kept but ignored until this setup runs Claude Code again.
+              </Note>
+            ) : null}
           </Stack>
         </Panel>
 
@@ -314,12 +408,26 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
 
       <Panel flush>
         {agentProfiles.length === 0 ? (
-          <Empty>No agent profiles yet. An agent profile is a coding CLI plus how it should behave.</Empty>
+          <EmptyState>No agent profiles yet. An agent profile is a coding CLI plus how it should behave.</EmptyState>
         ) : (
           <DataList>
             {agentProfiles.map(([name, ap]) => {
               const users = usersOf(name)
-              const pinned = data.tiers.filter((t) => ap.models?.[t]).length
+              // Count only the slots this agent actually reads — a Kilo setup
+              // with an opus id is "1 model", not "1 of 4 tiers".
+              const shape = data.agents.find((a) => a.id === (ap.agent ?? 'claude-code'))?.capabilities
+                .models
+              const slots =
+                shape === 'single' ? ['opus'] : shape === 'primary+small' ? ['opus', 'haiku'] : data.tiers
+              const pinned = slots.filter((t) => ap.models?.[t]).length
+              const modelsLabel =
+                shape === 'single'
+                  ? pinned > 0
+                    ? '1 model'
+                    : 'provider default'
+                  : pinned > 0
+                    ? `${pinned} of ${slots.length} ${shape === 'primary+small' ? 'models' : 'tiers'} pinned`
+                    : 'provider defaults'
               return (
                 <DataRow
                   key={name}
@@ -344,11 +452,7 @@ export function AgentProfiles({ data, reload }: { data: Bootstrap; reload: () =>
                       <KeyValue label="Agent" mono>
                         {ap.agent ?? 'claude-code'}
                       </KeyValue>
-                      <KeyValue label="Models">
-                        {pinned > 0
-                          ? `${pinned} of ${data.tiers.length} tiers pinned`
-                          : 'provider defaults'}
-                      </KeyValue>
+                      <KeyValue label="Models">{modelsLabel}</KeyValue>
                       <KeyValue label="Used by" tone={users.length > 0 ? 'default' : 'neutral'}>
                         {users.length > 0 ? users.join(', ') : 'nothing yet'}
                       </KeyValue>
diff --git a/web/src/routes/Profiles.tsx b/web/src/routes/Profiles.tsx
index 0fa6b78..bc4f697 100644
--- a/web/src/routes/Profiles.tsx
+++ b/web/src/routes/Profiles.tsx
@@ -25,6 +25,8 @@ import {
   inputStyle,
   selectStyle,
 } from '../ui'
+import { EmptyState } from '../Brand'
+import { credentialSource } from '../../../src/core/account'
 
 /**
  * Profiles — the pairing, and the only screen that expresses MULTIPLE accounts.
@@ -228,7 +230,16 @@ export function Profiles({ data, reload }: { data: Bootstrap; reload: () => Prom
                         <span className={refResolved}>
                           <Mono>{a.provider}</Mono>
                         </span>
-                        {a.hasKey || a.apiKeyFromEnv ? null : <Badge tone="warn">no key</Badge>}
+                        {/* A session account is authenticated by its login, not a
+                            key, so "no key" is only a warning for an account that
+                            carries no credential of any kind. `credentialSource`
+                            reads the redacted `hasKey`, so the browser and the
+                            server agree on what counts. */}
+                        {credentialSource(a) === 'none' ? (
+                          <Badge tone="warn">no credential</Badge>
+                        ) : credentialSource(a) === 'conflict' ? (
+                          <Badge tone="danger">key + login</Badge>
+                        ) : null}
                       </span>
                     }
                   />
@@ -296,7 +307,7 @@ export function Profiles({ data, reload }: { data: Bootstrap; reload: () => Prom
 
       <Panel flush>
         {names.length === 0 ? (
-          <Empty>No profiles yet. A profile pairs an agent profile with one or more accounts.</Empty>
+          <EmptyState>No profiles yet. A profile pairs an agent profile with one or more accounts.</EmptyState>
         ) : (
           <DataList>
             {names.map((name) => {
diff --git a/web/src/routes/Providers.tsx b/web/src/routes/Providers.tsx
index d3e3e20..2cf6b9b 100644
--- a/web/src/routes/Providers.tsx
+++ b/web/src/routes/Providers.tsx
@@ -19,6 +19,7 @@ import {
   monoInput,
   selectStyle,
 } from '../ui'
+import { EmptyState } from '../Brand'
 
 /**
  * Shipped presets are read-only here and say so. They are constants in source,
@@ -233,7 +234,7 @@ export function Providers({ data, reload }: { data: Bootstrap; reload: () => Pro
         flush
       >
         {custom.length === 0 ? (
-          <Empty>No custom providers yet. Add one for a gateway or a local server swisscode does not ship a preset for.</Empty>
+          <EmptyState>No custom providers yet. Add one for a gateway or a local server swisscode does not ship a preset for.</EmptyState>
         ) : (
           <DataList>
             {custom.map(([id, p]) => (