@dsh-plus/llm-pi 0.1.41 → 0.1.43

package/src/client/route-fit.ts

@@ -0,0 +1,117 @@
+/**
+ * route 生效协议推断与「一键添加」可用性判定（纯函数，node --test 直测）。
+ *
+ * 为什么需要它：服务端物化的协议规则是「route 级 api 优先，其次逐模型继承值，
+ * 全 route 必须一致」；卡片要在**不保存**的前提下告诉用户某个模型能不能加进
+ * 某个 route（否则用户会撞上一次保存失败）。协议索引由服务端 /catalog 的
+ * `apis`（provider → modelId → api）提供，覆盖全部内置模型。
+ * @module llm-pi/client/route-fit
+ */
+
+import type { WireModelInfo } from './api.ts'
+import type { ProviderDraft } from './draft.ts'
+
+/** 协议索引：`{provider: {modelId: api}}`（服务端 /catalog 的 apis）。 */
+export type ApiIndex = Record<string, Record<string, string>>
+
+/** route 生效协议事实。 */
+export interface RouteApiFacts {
+  /** 唯一生效协议；混合或无法判定时为 undefined。 */
+  api?: string
+  /** 模型之间存在多个协议（保存会被服务端拒绝）。 */
+  mixed: boolean
+  /** 无法判定协议的模型数（条目既无 extends 又无 route 级 extends 源）。 */
+  unresolved: number
+}
+
+/**
+ * 解析条目指向的继承引用（与服务端 inherit.ts 同规则）：
+ * `"provider/model"` 显式引用；裸 `"model"` 随 route 级 extends 源；
+ * 条目无 extends 时按同名模型挂在 route 级 extends 源下。
+ * 两段任一为空（无引用可解析）时返回空串。
+ */
+export function entryReference(
+  entry: { id: string; extends: string },
+  routeExtends: string,
+): { provider: string; model: string } {
+  const raw = entry.extends.trim()
+  if (raw === '') return { provider: routeExtends.trim(), model: entry.id.trim() }
+  const slash = raw.indexOf('/')
+  if (slash > 0) return { provider: raw.slice(0, slash), model: raw.slice(slash + 1) }
+  return { provider: routeExtends.trim(), model: raw }
+}
+
+/**
+ * 推断 route 当前实际生效的协议：
+ * - route 级 `api` 显式给出即用它（物化时它压过继承值）；
+ * - 否则逐模型查**其引用指向的模型**的协议（注意是引用目标，不是条目 id：
+ *   生产配置普遍用别名条目，如 `{id: 'glm-5.3', extends: 'zai/glm-5.3'}`）：
+ *   单一 → 该协议；多个 → mixed；引用解析不出来计 unresolved。
+ */
+export function routeApiFacts(provider: ProviderDraft, apis: ApiIndex): RouteApiFacts {
+  const explicit = provider.api.trim()
+  if (explicit !== '') return { api: explicit, mixed: false, unresolved: 0 }
+  const found = new Set<string>()
+  let unresolved = 0
+  for (const model of provider.models) {
+    const ref = entryReference(model, provider.extends)
+    if (ref.provider === '' || ref.model === '') {
+      unresolved += 1
+      continue
+    }
+    const api = apis[ref.provider]?.[ref.model]
+    if (api === undefined) unresolved += 1
+    else found.add(api)
+  }
+  if (found.size === 1) return { api: [...found][0] ?? '', mixed: false, unresolved }
+  return { mixed: found.size > 1, unresolved }
+}
+
+/** route 是否由 PiAiAdapter 服务（`adapter` 在卡片的 extra 里原样往返）。 */
+export function isPiRoute(provider: ProviderDraft): boolean {
+  const adapter = provider.extra['adapter']
+  return adapter === undefined || adapter === 'pi'
+}
+
+/** 可作为「一键添加」目标的 route（deepseek 路由不适用 pi-ai 继承）。 */
+export function targetRoutes(providers: Record<string, ProviderDraft>): string[] {
+  return Object.entries(providers)
+    .filter(([, provider]) => isPiRoute(provider))
+    .map(([route]) => route)
+    .sort((left, right) => left.localeCompare(right))
+}
+
+/** 不能添加的原因（界面据此给文案）。 */
+export type AddBlockReason =
+  | 'unsupported'
+  | 'duplicate'
+  | 'protocol-conflict'
+  | 'route-mixed'
+  | 'no-route'
+
+export type AddEligibility = { ok: true } | { ok: false; reason: AddBlockReason; detail?: string }
+
+/**
+ * 判定某内置模型能否加进目标 route：
+ * 协议不受支持 → unsupported；route 不存在 → no-route；同 id 已在 → duplicate；
+ * route 已混用多个协议 → route-mixed（保存本来就会失败，先提示修好）；
+ * route 已有确定协议且与模型不同 → protocol-conflict（保存一定失败，提前拦）。
+ */
+export function addEligibility(options: {
+  model: WireModelInfo
+  provider: ProviderDraft | undefined
+  apis: ApiIndex
+}): AddEligibility {
+  const { model, provider, apis } = options
+  if (!model.servable) return { ok: false, reason: 'unsupported', detail: model.api }
+  if (provider === undefined) return { ok: false, reason: 'no-route' }
+  if (provider.models.some((entry) => entry.id.trim() === model.id)) {
+    return { ok: false, reason: 'duplicate' }
+  }
+  const facts = routeApiFacts(provider, apis)
+  if (facts.mixed) return { ok: false, reason: 'route-mixed' }
+  if (facts.api !== undefined && facts.api !== model.api) {
+    return { ok: false, reason: 'protocol-conflict', detail: facts.api }
+  }
+  return { ok: true }
+}

package/src/client/styles.ts

@@ -1,8 +1,8 @@
 /**
  * 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('lpc')，
- * 本文件补插件特有规则（route/model 折叠块、键值对行、网格、JSON 文本框）
- * 及窄屏响应式：views 的双列网格在窄屏转单列、route 头部按钮换行、
- * 键值对行纵向堆叠、文本框 16px 防 iOS 缩放。
+ * 本文件补插件特有规则（route/model 折叠块、目录浏览器行、键值对行、网格、
+ * JSON 文本框）及窄屏响应式：views 的双列网格在窄屏转单列、route 头部按钮换行、
+ * 键值对行纵向堆叠、文本框 16px 防 iOS 缩放、目录结果区限高滚动。
  * 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
  * @module llm-pi/client/styles
  */
@@ -23,6 +23,11 @@ const extraCss = `
 .lpc-wide{grid-column:1 / -1}
 .lpc-addRoute{display:flex;gap:8px;align-items:center;padding:10px 0}
 .lpc-addRoute .lpc-input{flex:1;min-width:0}
+.lpc-chevron{flex:none;transition:transform .18s}
+.lpc-chevronOpen{transform:rotate(180deg)}
+.lpc-iconBtn{appearance:none;border:none;background:0 0;cursor:pointer;color:var(--dsw-alias-label-tertiary);border-radius:6px;padding:4px;display:inline-flex;flex:none}
+.lpc-iconBtn:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}
+.lpc-iconBtn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
 .lpc-route{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;margin:10px 0;background:var(--dsw-alias-bg-layer-3)}
 .lpc-routeHead{display:flex;align-items:center;gap:8px;padding:6px 10px}
 .lpc-routeToggle{appearance:none;background:0 0;border:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;padding:4px 0;border-radius:6px}
@@ -34,17 +39,37 @@ const extraCss = `
 .lpc-kvRow .lpc-input{flex:1;min-width:0}
 .lpc-kvAdd{padding-top:8px}
 .lpc-modelRow{border:1px dashed var(--dsw-alias-border-l2);border-radius:10px;margin:10px 0;padding:0 14px;background:var(--dsw-alias-bg-layer-3)}
-.lpc-modelHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0}
-.lpc-modelTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
-.lpc-catalogBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0}
-.lpc-catalogLabel{color:var(--dsw-alias-label-tertiary);font-size:12px}
-.lpc-catalogSelect{width:auto;height:30px}
+.lpc-modelHead{display:flex;align-items:center;gap:8px;padding:8px 0}
+.lpc-modelTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;flex:none}
+.lpc-modelRow .lpc-modelHead .lpc-routeToggle{flex:1}
+.lpc-modelBody{border-top:1px dashed var(--dsw-alias-border-l2);padding-bottom:8px}
 .lpc-collapse{border-top:1px solid var(--dsw-alias-border-l2);margin:2px 0}
 .lpc-collapseHead{appearance:none;background:0 0;border:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 0;border-radius:6px}
 .lpc-collapseHead:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
 .lpc-collapseTitle{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600}
+.lpc-collapseMeta{color:var(--dsw-alias-label-tertiary);font-size:11px;flex:none;white-space:nowrap}
 .lpc-collapseBody{border-top:1px dashed var(--dsw-alias-border-l2);padding-bottom:6px}
-.lpc-refreshBtn{margin-left:8px;vertical-align:middle}
+.lpc-cat{display:flex;flex-direction:column;gap:6px}
+.lpc-catBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0}
+.lpc-catLabel{color:var(--dsw-alias-label-tertiary);font-size:12px;flex:none}
+.lpc-catSearch{flex:1;min-width:180px}
+.lpc-catSelect{width:auto;max-width:260px;height:30px}
+.lpc-catNote{color:var(--dsw-alias-label-tertiary);font-size:12px;min-width:0;word-break:break-all}
+.lpc-catSummary{color:var(--dsw-alias-label-secondary);margin:2px 0;font-size:12px}
+.lpc-catList{display:flex;flex-direction:column;max-height:420px;overflow-y:auto;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-layer-3)}
+.lpc-catRow{border-bottom:1px solid var(--dsw-alias-border-l2);padding:8px 10px}
+.lpc-catRow:last-child{border-bottom:none}
+.lpc-catHead{display:flex;align-items:center;gap:8px;min-width:0}
+.lpc-catPath{color:var(--dsw-alias-label-primary);font-size:12px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lpc-catName{color:var(--dsw-alias-label-secondary);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lpc-catParams{color:var(--dsw-alias-label-tertiary);margin:2px 0;font-size:12px;line-height:1.6;word-break:break-all}
+.lpc-catDetailsToggle{appearance:none;background:0 0;border:0;font:inherit;color:var(--dsw-alias-label-tertiary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 0;font-size:12px;border-radius:6px}
+.lpc-catDetailsToggle:hover{color:var(--dsw-alias-label-primary)}
+.lpc-catDetailsToggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.lpc-catDetails{padding:2px 0 4px}
+.lpc-catDetailLabel{color:var(--dsw-alias-label-secondary);margin:6px 0 2px;font-size:12px;font-weight:600}
+.lpc-catJson{background:var(--dsw-alias-bg-module-platform);border-radius:8px;color:var(--dsw-alias-label-secondary);margin:0;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-all}
+.lpc-catMore{padding:6px 0}
 @media (max-width:767px){
 .lpc-grid{grid-template-columns:1fr}
 .lpc-routeHead{flex-wrap:wrap}
@@ -56,7 +81,12 @@ const extraCss = `
 .lpc-kvRow .lpc-btn{align-self:flex-end}
 .lpc-textarea{font-size:16px}
 .lpc-statusRow{display:flex;flex-direction:column;gap:4px}
-.lpc-catalogBar .lpc-input{flex:1;min-width:140px}
+.lpc-catBar .lpc-input{flex:1;min-width:140px}
+.lpc-catSelect{max-width:none}
+.lpc-catHead{flex-wrap:wrap}
+.lpc-catPath{white-space:normal;word-break:break-all}
+.lpc-catName{flex-basis:100%;white-space:normal}
+.lpc-catList{max-height:60vh}
 }
 `
 

package/src/client/views/catalog-browser.tsx

@@ -0,0 +1,376 @@
+/**
+ * 内置模型目录浏览器：搜索（服务端模糊匹配）/筛选/分页 + 复制路径 id +
+ * 一键把 `{id, extends: 'provider/model'}` 加到目标 route。
+ *
+ * 数据全部来自本插件的 `/catalog` 端点（浏览器半读不到 pi-ai 包）：
+ * - `apis`（provider → modelId → api）用于推断目标 route 的生效协议，
+ *   在添加前拦下"协议不一致/重复 id/协议不受支持"这三类必然失败的添加；
+ * - 模型行的参数直接渲染服务端给的事实（含官方新增字段，见 `rest`）。
+ * 折叠由外层（card.tsx）控制，故本组件只管内容与交互。
+ *
+ * 结构：`useCatalogSearch`（拉取/分页状态）+ `BrowserToolbar`（搜索与筛选条）
+ * + `CatalogRow`（明细行），`CatalogBrowser` 只做编排。
+ * @module llm-pi/client/views/catalog-browser
+ */
+
+import { CheckRow } from '@dsh-plus/shared/client'
+import { type ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+
+import {
+  type CatalogQuery,
+  searchCatalog,
+  type WireModelInfo,
+  type WireProviderEntry,
+} from '../api.ts'
+import { protocolOptions } from '../constants.ts'
+import type { ProviderDraft } from '../draft.ts'
+import type { Translate } from '../i18n.ts'
+import { type ApiIndex, addEligibility } from '../route-fit.ts'
+import { CatalogRow } from './catalog-row.tsx'
+
+/** 计数展示（千分位；不引本地化依赖）。 */
+function count(value: number): string {
+  return value.toLocaleString()
+}
+
+/** 一页条数（服务端同样有上限；"加载更多"按此翻页）。 */
+const PAGE_SIZE = 30
+/** 搜索去抖毫秒（本地端点，短去抖即可）。 */
+const DEBOUNCE_MS = 180
+
+export interface CatalogBrowserProps {
+  t: Translate
+  /** 可作为目标的 route（已按 adapter: pi 过滤）。 */
+  targets: string[]
+  /** 目标 route 草稿（判定可否添加；不存在即 undefined）。 */
+  providerOf(route: string): ProviderDraft | undefined
+  /** 目标 route 的生效协议（选择器徽标用）。 */
+  routeApiOf(route: string): string | undefined
+  apis: ApiIndex
+  providers: WireProviderEntry[]
+  target: string
+  onTargetChange(route: string): void
+  /** 添加回调；返回 false 表示未添加（同 id 已存在）。 */
+  onAdd(route: string, model: WireModelInfo): boolean
+  disabled?: boolean
+  /** 目录索引拉取失败时的错误文案（此时只显示提示，不渲染筛选）。 */
+  metaError?: string
+}
+
+/** 计数展示（千分位；不引本地化依赖）。 */
+/** 参数行的键值短展示：字符串化，长值截断。 */
+/** 禁止添加的原因文案。 */
+interface SearchState {
+  items: WireModelInfo[]
+  total: number
+  servableHidden: number
+  loading: boolean
+  error: string
+}
+
+const EMPTY_STATE: SearchState = {
+  items: [],
+  total: 0,
+  servableHidden: 0,
+  loading: false,
+  error: '',
+}
+
+/**
+ * 目录搜索状态机：条件变化重新拉第一页（旧请求按 requestId 丢弃，避免竞态覆盖），
+ * `loadMore` 追加下一页。
+ */
+function useCatalogSearch(
+  filters: CatalogQuery,
+  enabled: boolean,
+): SearchState & { loadMore(): void } {
+  const [state, setState] = useState<SearchState>(EMPTY_STATE)
+  const requestId = useRef(0)
+
+  useEffect(() => {
+    if (!enabled) return
+    const id = requestId.current + 1
+    requestId.current = id
+    setState((prev) => ({ ...prev, loading: true, error: '' }))
+    const controller = new AbortController()
+    void searchCatalog({ ...filters, offset: 0, limit: PAGE_SIZE }, controller.signal)
+      .then((page) => {
+        if (requestId.current !== id) return
+        setState({
+          items: page.items,
+          total: page.total,
+          servableHidden: page.servableHidden,
+          loading: false,
+          error: '',
+        })
+      })
+      .catch((error: unknown) => {
+        if (requestId.current !== id) return
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error: error instanceof Error ? error.message : String(error),
+        }))
+      })
+    return () => controller.abort()
+  }, [filters, enabled])
+
+  const loadMore = (): void => {
+    const id = requestId.current + 1
+    requestId.current = id
+    setState((prev) => ({ ...prev, loading: true }))
+    void searchCatalog({ ...filters, offset: state.items.length, limit: PAGE_SIZE })
+      .then((page) => {
+        if (requestId.current !== id) return
+        setState((prev) => ({
+          ...prev,
+          items: [...prev.items, ...page.items],
+          total: page.total,
+          servableHidden: page.servableHidden,
+          loading: false,
+        }))
+      })
+      .catch((error: unknown) => {
+        if (requestId.current !== id) return
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error: error instanceof Error ? error.message : String(error),
+        }))
+      })
+  }
+  return { ...state, loadMore }
+}
+
+/** 搜索框输入（本地态）→ 去抖后的查询串。 */
+function useDebouncedQuery(query: string): string {
+  const [debounced, setDebounced] = useState('')
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(query), DEBOUNCE_MS)
+    return () => clearTimeout(timer)
+  }, [query])
+  return debounced
+}
+
+interface ToolbarProps {
+  t: Translate
+  query: string
+  onQuery(value: string): void
+  provider: string
+  onProvider(value: string): void
+  api: string
+  onApi(value: string): void
+  reasoning: boolean
+  onReasoning(value: boolean): void
+  image: boolean
+  onImage(value: boolean): void
+  servableOnly: boolean
+  onServableOnly(value: boolean): void
+  providers: WireProviderEntry[]
+  targets: string[]
+  target: string
+  onTarget(value: string): void
+  targetApi: string | undefined
+  disabled: boolean
+}
+
+/** 搜索/筛选/目标 route 三条工具条。 */
+function BrowserToolbar(props: ToolbarProps): ReactElement {
+  const { t } = props
+  return (
+    <>
+      <div className="lpc-catBar">
+        <input
+          className="lpc-input lpc-catSearch"
+          type="search"
+          value={props.query}
+          placeholder={t('browserSearchPlaceholder')}
+          aria-label={t('browserSearch')}
+          disabled={props.disabled}
+          onChange={(event) => props.onQuery(event.target.value)}
+        />
+        <select
+          className="lpc-input lpc-select lpc-catSelect"
+          value={props.provider}
+          aria-label={t('browserProvider')}
+          disabled={props.disabled}
+          onChange={(event) => props.onProvider(event.target.value)}
+        >
+          <option value="">{`${t('browserProvider')}：${t('browserAll')}`}</option>
+          {props.providers.map((entry) => (
+            <option key={entry.id} value={entry.id}>
+              {`${entry.id}（${entry.modelCount}）`}
+            </option>
+          ))}
+        </select>
+        <select
+          className="lpc-input lpc-select lpc-catSelect"
+          value={props.api}
+          aria-label={t('browserApi')}
+          disabled={props.disabled}
+          onChange={(event) => props.onApi(event.target.value)}
+        >
+          <option value="">{`${t('browserApi')}：${t('browserAll')}`}</option>
+          {protocolOptions().map((id) => (
+            <option key={id} value={id}>
+              {id}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="lpc-catBar">
+        <CheckRow
+          prefix="lpc"
+          id="lpc-cat-servable"
+          label={t('browserOnlyServable')}
+          checked={props.servableOnly}
+          disabled={props.disabled}
+          onEdit={props.onServableOnly}
+        />
+        <CheckRow
+          prefix="lpc"
+          id="lpc-cat-reasoning"
+          label={t('browserReasoning')}
+          checked={props.reasoning}
+          disabled={props.disabled}
+          onEdit={props.onReasoning}
+        />
+        <CheckRow
+          prefix="lpc"
+          id="lpc-cat-image"
+          label={t('browserImage')}
+          checked={props.image}
+          disabled={props.disabled}
+          onEdit={props.onImage}
+        />
+      </div>
+      <div className="lpc-catBar">
+        <label className="lpc-catLabel" htmlFor="lpc-cat-target">
+          {t('browserTarget')}
+        </label>
+        <select
+          id="lpc-cat-target"
+          className="lpc-input lpc-select lpc-catSelect"
+          value={props.target}
+          disabled={props.disabled || props.targets.length === 0}
+          onChange={(event) => props.onTarget(event.target.value)}
+        >
+          {props.targets.length === 0 ? <option value="">-</option> : null}
+          {props.targets.map((route) => (
+            <option key={route} value={route}>
+              {route}
+            </option>
+          ))}
+        </select>
+        <span className="lpc-catNote">
+          {props.targetApi === undefined
+            ? t('browserNoProtocol')
+            : `${t('browserTargetProtocol')}：${props.targetApi}`}
+        </span>
+      </div>
+    </>
+  )
+}
+
+export function CatalogBrowser(props: CatalogBrowserProps): ReactElement {
+  const { t } = props
+  const [query, setQuery] = useState('')
+  const debounced = useDebouncedQuery(query)
+  const [provider, setProvider] = useState('')
+  const [api, setApi] = useState('')
+  const [reasoning, setReasoning] = useState(false)
+  const [image, setImage] = useState(false)
+  const [servableOnly, setServableOnly] = useState(true)
+  const [note, setNote] = useState('')
+
+  const filters = useMemo(
+    () => ({ q: debounced, provider, api, reasoning, image, servableOnly }),
+    [debounced, provider, api, reasoning, image, servableOnly],
+  )
+  const { items, total, servableHidden, loading, error, loadMore } = useCatalogSearch(
+    filters,
+    props.metaError === undefined,
+  )
+
+  if (props.metaError !== undefined) {
+    return <p className="lpc-invalid">{`${t('browserFailed')}${props.metaError}`}</p>
+  }
+
+  const onAdd = (model: WireModelInfo): void => {
+    if (props.target === '') return
+    const added = props.onAdd(props.target, model)
+    setNote(
+      added
+        ? `${t('browserAddedTo')} ${props.target}：${model.path}`
+        : `${t('blockDuplicate')}：${model.path}`,
+    )
+  }
+  const disabled = props.disabled === true
+  return (
+    <div className="lpc-cat">
+      <p className="lpc-hint">{t('browserHint')}</p>
+      <BrowserToolbar
+        t={t}
+        query={query}
+        onQuery={setQuery}
+        provider={provider}
+        onProvider={setProvider}
+        api={api}
+        onApi={setApi}
+        reasoning={reasoning}
+        onReasoning={setReasoning}
+        image={image}
+        onImage={setImage}
+        servableOnly={servableOnly}
+        onServableOnly={setServableOnly}
+        providers={props.providers}
+        targets={props.targets}
+        target={props.target}
+        onTarget={props.onTargetChange}
+        targetApi={props.target === '' ? undefined : props.routeApiOf(props.target)}
+        disabled={disabled}
+      />
+      {props.targets.length === 0 ? <p className="lpc-hint">{t('browserNoTarget')}</p> : null}
+      <p className="lpc-catSummary">
+        {`${t('browserMatched')} ${count(total)}`}
+        {servableHidden > 0
+          ? ` · ${t('browserHiddenServable')} ${count(servableHidden)} ${t('browserHiddenUnit')}`
+          : ''}
+        {loading ? ` · ${t('browserLoading')}` : ''}
+      </p>
+      {error !== '' ? <p className="lpc-invalid">{`${t('browserFailed')}${error}`}</p> : null}
+      {!loading && error === '' && items.length === 0 ? (
+        <p className="lpc-hint">{t('browserEmpty')}</p>
+      ) : null}
+      <div className="lpc-catList">
+        {items.map((model) => (
+          <CatalogRow
+            key={model.path}
+            t={t}
+            model={model}
+            disabled={disabled}
+            eligibility={addEligibility({
+              model,
+              provider: props.providerOf(props.target),
+              apis: props.apis,
+            })}
+            onAdd={() => onAdd(model)}
+          />
+        ))}
+      </div>
+      {items.length > 0 && items.length < total ? (
+        <div className="lpc-catMore">
+          <button
+            type="button"
+            className="lpc-btn lpc-btnGhost lpc-btnSmall"
+            disabled={loading}
+            onClick={loadMore}
+          >
+            {t('browserLoadMore')}
+          </button>
+        </div>
+      ) : null}
+      {note !== '' ? <p className="lpc-catNote">{note}</p> : null}
+    </div>
+  )
+}