vault backup: 2026-05-15 15:40:48

wiki/_master-index.md

@@ -35,7 +35,7 @@ This 3-hop pattern works for hundreds of articles without vector search.
 | [[wiki/reports/_index\|reports/]] | Weekly and monthly summaries — generate: `uv run python scripts/report-generator.py --weekly` | 1 |
 | [[wiki/infrastructure/_index\|infrastructure/]] | Server inventory: all 10 SSH hosts — optical, optical-dev, optical-prod, baic, librechat, modocmms, box-cli, aimpress, pve | 12 |
 | [[wiki/testing/_index\|testing/]] | Web app testing: functional, performance, security, UI types; TDD/BDD/Agile methodologies; Selenium/Cypress/Playwright/JMeter/OWASP ZAP tools | 1 |
-| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 82 |
+| [[wiki/payloadcms/_index\|payloadcms/]] | Full Payload CMS reference — getting started, config, database (Postgres/MongoDB/SQLite), all 22 field types, access control, hooks, authentication (cookies, JWT, API keys, custom strategies, token data), admin UI, custom components, Lexical rich text, live preview, versions/drafts, Local/REST/GraphQL APIs, queries, plugins, jobs queue, upload, ecommerce, production deploy, TypeScript, migration guides, i18n, localization | 84 |
 
 | [[wiki/shared-patterns/_index\|shared-patterns/]] | Oliver Agency standard library patterns: httpx, structlog, pydantic-settings, alembic — reuse before writing from scratch | 4 |
 | [[wiki/mistakes/_index\|mistakes/]] | Anti-patterns extracted from sessions — per-stack running lists (fastapi, react, docker, postgres, general) — injected at session start | 5 |

wiki/payloadcms/_index.md

@@ -84,3 +84,4 @@
 | [[wiki/payloadcms/fields-tabs\|Tabs Field]] | Tabbed layout field — unnamed tabs (presentational), named tabs (nested DB object), conditional tabs with auto-switch, interfaceName for TS types | raw/fields__tabs.md | 2026-05-15 |
 | [[wiki/payloadcms/fields-text\|Text Field]] | Plain string field — `hasMany` array mode, built-in Slug Field (`slugField()`), unique index, saveToJWT, virtual, localized, RTL admin | raw/fields__text.md | 2026-05-15 |
 | [[wiki/payloadcms/fields-textarea\|Textarea Field]] | Multiline string field — identical to Text but with larger input; `rows` (default 2), RTL, no `hasMany`, same validation/virtual/JWT options | raw/fields__textarea.md | 2026-05-15 |
+| [[wiki/payloadcms/fields-ui\|UI Field]] | Presentational-only field — inject arbitrary React components into Admin Panel Edit/List views; no data stored; use for action buttons, context text, custom controls | raw/fields__ui.md | 2026-05-15 |

wiki/payloadcms/fields-ui.md

@@ -0,0 +1,67 @@
+---
+title: "UI Field"
+aliases: [ui-field, presentational-field, payload-ui-field]
+tags: [payloadcms, fields, admin-panel, react, components]
+sources: [raw/fields__ui.md]
+created: 2026-05-15
+updated: 2026-05-15
+---
+
+## Overview
+
+The UI field is **presentational-only** — it stores no data and has no effect on documents. It lets you inject arbitrary React components directly into the Admin Panel, nested among your other fields.
+
+```ts
+import type { Field } from 'payload'
+
+export const MyUIField: Field = {
+  name: 'myCustomUIField',
+  type: 'ui',
+  admin: {
+    components: {
+      Field: '/path/to/MyCustomUIField',
+      Cell: '/path/to/MyCustomUICell',
+    },
+  },
+}
+```
+
+## Config Options
+
+| Option | Required | Description |
+|--------|----------|-------------|
+| `name` | ✅ | Unique identifier for this field |
+| `label` | — | Human-readable label |
+| `admin.components.Field` | ✅ | React component rendered in Edit View |
+| `admin.components.Cell` | — | React component rendered in List View cells |
+| `admin.disabled` | — | `true` to disable everywhere, or granular `{ field?, column?, filter?, groupBy?, bulkEdit? }` |
+| `custom` | — | Extension point for plugin data |
+
+> **Default:** UI fields have `disabled: { bulkEdit: true }` by default.
+
+## Use Cases
+
+- **Descriptive text** — add context/instructions between fields in Edit View
+- **Action buttons** — "Refund" button in Order sidebar, "Clear Cache" button, "View Page" shortcut
+- **Custom controls** — any React component injected exactly where editors need it
+
+## Key Takeaways
+
+- UI field has **zero impact on stored data** — purely admin UI enhancement
+- `admin.components.Field` is required (the component to render)
+- `admin.components.Cell` renders in List View columns — optional
+- Bulk edit is disabled by default (no data to edit)
+- Can trigger `fetch` calls, external APIs, or side effects from within the Admin Panel
+- Use [[wiki/payloadcms/fields-overview|Fields Overview]] `admin.condition` to show/hide based on other field values
+
+## Related
+
+- [[wiki/payloadcms/fields-overview|Fields Overview]] — cross-cutting field config, `admin.components` pattern
+- [[wiki/payloadcms/custom-components-authoring|Custom Components — Authoring Guide]] — how to write RSC vs Client components, Import Map
+- [[wiki/payloadcms/fields-row|Row Field]] — another presentational-only layout field (horizontal grouping)
+- [[wiki/payloadcms/fields-collapsible|Collapsible Field]] — presentational layout with collapsible header
+- [[wiki/payloadcms/admin-panel-overview|Admin Panel Overview]] — Edit View and List View structure
+
+## Sources
+
+- `raw/fields__ui.md` — https://payloadcms.com/docs/fields/ui