fix(plugin-detail): record:details read mode shows a textarea value with its line breaks (objectui#11577)

[objectstack-fleet]

Fixes #11577

Clause-②: no

What changed

record:details read mode now draws a textarea value through the fields package's own read display: the readonly branch of TextAreaField, the display the record form shows a read-only textarea with. This is the read-mode half of objectui#11562, which routed edit mode to the same widget's editor.

• DetailSection is the one read path the record:details body draws a value through. A row whose resolved renderer type is textarea now renders TextAreaField with readonly, ahead of the getCellRenderer lookup. Every other type keeps its cell renderer, unchanged.
• The value is handed over as String(coerceToSafeValue(value)), the exact text TextCellRenderer drew. A string passes byte for byte; a non-string value reads as it did before instead of reaching React as an object.
• No second hand-written whitespace-pre-wrap copy in plugin-detail: the widget owns its read display. TextAreaField is already exported from @object-ui/fields and already imported by this package (the inline editor), so no package index export moves and TextAreaField.tsx is untouched.
• The fields package's cell-renderer table still maps textarea to TextCellRenderer. That is the grid cell, where one line is the intended shape, so grids are unchanged.

Why

The read row resolved textarea through getCellRenderer, whose standard table maps it to TextCellRenderer: a one-line truncate cell (white-space nowrap plus an ellipsis). A stored note with a blank line and a trailing newline read as one line on the record page, while the record form's read-only field and, since objectui#11562, the inline editor both kept the breaks.

Evidence

Real browser, Chromium

The console dev server served a scratch page (untracked, deleted after the run) that mounts the real RecordDetailView with a stub data source. Object showcase_task declares notes and short_note as textarea and remark as text; notes and remark hold the same multi-line value. Read: the value cell's innerText, and the computed white-space of the element that draws it. The before leg is the ablation below (the old read path), served by the same dev server. Desktop (1280 px) and mobile (375 px) read identically.

Row	before (old read path)	after (this PR)
Notes, textarea, multi-line	"Call back Monday. Budget approved, needs legal review.", nowrap	"Call back Monday.\n\nBudget approved, needs legal review.\n", pre-wrap
Short Note, textarea, one line	"Call back Monday.", nowrap	"Call back Monday.", pre-wrap
Remark, text, multi-line (control)	"Call back Monday. Budget approved, needs legal review.", nowrap	same as before

The before reading of Notes is the card's reported reading, character for character.

Pins

packages/plugin-detail/src/renderers/__tests__/record-details.textareaReadDisplay-11577.test.tsx mounts the real RecordDetailsRenderer with bare field names, so each row's type is the one the bound object declares, read through a data-source double as a running app reads it. Desktop and mobile each:

• a multi-line value: the value cell's markup equals what TextAreaField renders read-only for that value, on its own;
• the same value keeps its breaks: the drawn text equals the stored value byte for byte, and no element between it and the row carries truncate, whitespace-nowrap or whitespace-normal;
• CONTROL: a single-line value reads back as the same single line (green on both sides of the fix).

Plus two controls: text still renders TextCellRenderer's markup for a multi-line value, and email still renders EmailCellRenderer's (which also shows the declared types reached the rows).

• Green at 897bd53: 8 passed (8).
• Red leg (ablation, node ../objectstack/scripts/ablation-replace.mjs, wrapped in a shell trap that restores from HEAD): anchor if (resolvedType === 'textarea') { replaced by a type no field has, anchor count 1 to 0, blob a9dc7b51 to 3699ca2e. Result: 4 failed, 4 passed. The four reds are the two multi-line pins on desktop and on mobile; the single-line control and the text and email controls stay green. Restore: blob a9dc7b51 equals HEAD's, git diff HEAD empty.
• A first red run on base 2e818d0, before the single-line control was narrowed to assert text only, read 6 failed, 2 passed.

Gates

Local runs, all at 897bd53 (the final commit) unless named. Verify-lock runs give their VERDICT line.

• pnpm exec vitest run --maxWorkers=2 packages/plugin-detail/ (whole package, at f535ade; DetailSection.tsx is byte-identical since): Test Files 234 passed, 1 skipped (235); Tests 2321 passed, 8 skipped (2329); VERDICT command-exit 0.
• 73 test files outside the package, selected by import of @object-ui/plugin-detail or the detail renderers and by source-text read of plugin-detail paths: Test Files 73 passed (73); Tests 2726 passed (2726); VERDICT command-exit 0.
• pnpm --workspace-concurrency=2 --filter "@object-ui/plugin-detail^..." build: exit 0. pnpm --filter @object-ui/plugin-detail type-check (tsc --noEmit && tsc -p tsconfig.test.json): exit 0. The test project lists the new pin (--listFiles, 1 hit) and compiles at 897bd53.
• exit 0 each: check:control-bytes, check:new-line-citations (0 new citations), check:changeset-claims, check:pending-changeset-literals, check:phantom-deps, check:self-import, check:unreferenced-sources, check:handler-key-reads, check:test-path-roots, check:vi-mock-override-shape, check:vi-mock-specifiers, check:vi-mock-inherit, check:i18n-keys, and scripts/check-changeset-presence.mjs (2 source files of 1 released package changed, 1 changeset declared), check-changeset-fixed, check-changeset-no-major, check-type-check-coverage.
• ESLint, narrowed to the 2 changed TypeScript files. The population is the root eslint.config.js: the package has no config of its own, and its eslint . resolves the root one. The file count is 2, read from --format json. Both files report 0 errors. The test file has 0 warnings. DetailSection.tsx has 12 warnings, all on lines outside this diff's hunks. Invariance: the config enables no type-aware linting (zero hits for projectService, parserOptions or TypeChecked), so this diff cannot move a verdict on an untouched file. The repo-wide pnpm lint belongs to CI.

Acceptance notes

• The single-line pin, as read here. The ruling's "a single-line value is unchanged" is held as "reads back as the same text", which is pinned and green on both sides. The cell itself moves to the read display, so a long single-line value now wraps at the column width instead of ending in an ellipsis, as the record form's read-only field already does.
• Mobile type size. TextAreaField's read block carries text-sm, so on the mobile grouped-inset row a textarea value draws at text-sm where the row's span sets 15 px. Left as is: changing it means editing TextAreaField beyond reaching its read branch, or a per-surface class, which is the second copy the ruling refuses. Observation only.
• A host override of the textarea cell renderer (registerFieldRenderer with 'textarea') would no longer reach this row, because the routing comes before getCellRenderer. Measured producers: zero. git grep for that call with textarea returns 0 hits; the same search for lookup returns 2.
• The highlights strip (HeaderHighlight, record:highlights) still draws a textarea value through TextCellRenderer, as one line with an ellipsis. Not this card's surface (the card names record:details), and the strip is a compact chip band. Observation, not filed.
• Docs. No page under content/docs or the package README describes how the details body reads a textarea, so no docs change is needed.

Not touched

TextAreaField.tsx, the @object-ui/fields and @object-ui/plugin-detail package indexes, the grid's cell-renderer table, and the markdown / html read paths.

Implemented by the dispatched dev run in session https://claude.ai/code/session_01FjqrwXPfSMkSfkKYDSRkN2, on claim branch claude/issue-11577-textarea-read-breaks.

---

Generated by Claude Code

[github-actions]

✅ Console Performance Budget

Metric	Value	Budget
Eager closure (gzip, 331 chunks)	3312.3 KB	3330.4 KB
Main entry chunk (gzip)	151.3 KB	350 KB
Entry file	index-BfaTGRzk.js	—
Status	PASS	—

The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it.

---

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (consoleActionDispatch.js)	0.20KB	0.19KB
app-shell (index.js)	17.22KB	6.37KB
app-shell (runtime-config.js)	20.68KB	7.36KB
app-shell (types.js)	0.01KB	0.04KB
app-shell (urlParams.js)	10.11KB	3.87KB
auth (ActiveOrganizationStorage.js)	27.95KB	10.04KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	2.07KB	1.00KB
auth (AuthProvider.js)	40.22KB	10.61KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	12.21KB	3.45KB
auth (LoginForm.js)	18.17KB	5.40KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.72KB	2.24KB
auth (SocialSignInButtons.js)	9.70KB	3.93KB
auth (UserMenu.js)	3.39KB	1.21KB
auth (auth-gate-events.js)	1.29KB	0.66KB
auth (authStyles.js)	5.04KB	1.72KB
auth (createAuthClient.js)	40.70KB	10.94KB
auth (createAuthenticatedFetch.js)	8.54KB	3.46KB
auth (index.js)	3.63KB	1.64KB
auth (invitation-status.js)	1.22KB	0.70KB
auth (org-roles.js)	6.66KB	2.78KB
auth (phone-identifier.js)	1.11KB	0.66KB
auth (types.js)	0.59KB	0.35KB
auth (useAuth.js)	5.30KB	1.02KB
auth (useWorkspaceAdminStatus.js)	11.08KB	4.58KB
collaboration (CommentThread.js)	27.11KB	7.97KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	6.28KB	2.60KB
collaboration (PresenceProvider.js)	2.79KB	1.13KB
collaboration (index.js)	1.68KB	0.73KB
collaboration (useCollaborationTranslation.js)	6.50KB	2.52KB
collaboration (useCommentSearch.js)	1.98KB	0.88KB
collaboration (useConflictResolution.js)	7.75KB	1.86KB
collaboration (useMentionNotifications.js)	1.81KB	0.68KB
collaboration (usePresence.js)	6.33KB	1.84KB
collaboration (useRealtimeSubscription.js)	7.91KB	2.01KB
components (index.js)	572.97KB	137.34KB
core (index.js)	10.00KB	3.96KB
create-plugin (index.js)	27.94KB	9.51KB
data-objectstack (index.js)	232.57KB	64.51KB
fields (index.js)	261.62KB	66.20KB
i18n (LocalizationContext.js)	1.76KB	0.96KB
i18n (builtinAggregateLabels.js)	0.86KB	0.49KB
i18n (currency.js)	2.59KB	1.22KB
i18n (fallbackInterpolation.js)	6.25KB	2.77KB
i18n (i18n.js)	8.87KB	3.64KB
i18n (index.js)	5.24KB	2.27KB
i18n (pickLocalized.js)	9.86KB	3.95KB
i18n (provider.js)	39.35KB	12.88KB
i18n (translateFn.js)	0.20KB	0.18KB
i18n (useDisplayLocale.js)	3.52KB	1.76KB
i18n (useObjectLabel.js)	35.66KB	9.49KB
i18n (useSafeTranslation.js)	7.14KB	2.92KB
layout (index.js)	39.47KB	11.25KB
mobile (MobileProvider.js)	0.92KB	0.49KB
mobile (ResponsiveContainer.js)	0.94KB	0.38KB
mobile (breakpoints.js)	1.51KB	0.70KB
mobile (createOfflineDataSource.js)	5.61KB	1.75KB
mobile (index.js)	1.99KB	0.87KB
mobile (offlineQueue.js)	3.91KB	1.35KB
mobile (pwa.js)	0.97KB	0.49KB
mobile (serviceWorker.js)	1.48KB	0.62KB
mobile (serviceWorkerSource.js)	3.41KB	1.48KB
mobile (useBreakpoint.js)	1.54KB	0.65KB
mobile (useGesture.js)	6.96KB	1.98KB
mobile (useOfflineSync.js)	1.99KB	0.72KB
mobile (usePullToRefresh.js)	6.62KB	2.45KB
mobile (useResponsive.js)	0.72KB	0.42KB
mobile (useSpecGesture.js)	5.52KB	2.10KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	13.86KB	5.00KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	6.52KB	2.26KB
permissions (discardProofCache.js)	1.04KB	0.55KB
permissions (evaluator.js)	8.33KB	3.07KB
permissions (index.js)	0.93KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.53KB
permissions (usePermissions.js)	4.83KB	2.27KB
plugin-ai (index.js)	16.04KB	3.92KB
plugin-calendar (index.js)	53.17KB	15.46KB
plugin-charts (index.js)	83.60KB	22.89KB
plugin-chatbot (index.js)	198.22KB	46.97KB
plugin-dashboard (index.js)	142.89KB	38.62KB
plugin-designer (index.js)	231.41KB	48.84KB
plugin-detail (index.js)	245.74KB	64.59KB
plugin-editor (index.js)	2.23KB	1.05KB
plugin-form (index.js)	175.44KB	45.28KB
plugin-gantt (index.js)	179.16KB	45.06KB
plugin-grid (index.js)	235.63KB	64.77KB
plugin-kanban (index.js)	49.59KB	15.58KB
plugin-list (index.js)	116.46KB	28.93KB
plugin-map (index.js)	25.60KB	8.62KB
plugin-markdown (index.js)	13.88KB	4.80KB
plugin-report (index.js)	44.12KB	12.29KB
plugin-timeline (index.js)	38.80KB	11.71KB
plugin-tree (index.js)	14.51KB	5.15KB
plugin-view (index.js)	90.23KB	22.73KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.90KB	0.85KB
providers (UploadProvider.js)	11.81KB	3.58KB
providers (index.js)	0.45KB	0.23KB
providers (types.js)	0.01KB	0.04KB
react-runtime (index.js)	5.62KB	2.34KB
react (LazyPluginLoader.js)	4.47KB	1.63KB
react (SchemaRenderer.js)	120.63KB	39.56KB
react (data-invalidation.js)	5.05KB	2.08KB
react (index.js)	4.50KB	2.06KB
react (schema-input.js)	4.31KB	2.07KB
react (spec-input.js)	0.20KB	0.18KB
sdui-parser (body-dialect.js)	4.50KB	1.99KB
sdui-parser (codegen.js)	9.45KB	3.76KB
sdui-parser (dashboard-widget-options.js)	3.08KB	1.30KB
sdui-parser (index.js)	6.06KB	2.68KB
sdui-parser (input-type.js)	2.84KB	1.40KB
sdui-parser (parse.js)	25.28KB	7.80KB
sdui-parser (provenance.js)	3.84KB	1.90KB
sdui-parser (types.js)	0.28KB	0.23KB
sdui-parser (validate.js)	21.42KB	7.05KB
types (ai.js)	4.39KB	2.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	4.12KB	1.61KB
types (authoring-nodes.js)	0.20KB	0.19KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (cloud.js)	0.20KB	0.18KB
types (complex.js)	4.44KB	2.07KB
types (crud.js)	0.20KB	0.18KB
types (dashboard-filter-alias.js)	6.23KB	2.74KB
types (dashboard-widget-layout.js)	2.06KB	0.96KB
types (data-display.js)	3.75KB	1.85KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	1.85KB	0.85KB
types (disclosure.js)	0.20KB	0.18KB
types (error-code.js)	1.54KB	0.88KB
types (expression.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (http-inflight.js)	8.87KB	3.73KB
types (http-retry.js)	4.32KB	2.02KB
types (icon-key-migration.js)	4.26KB	1.63KB
types (index.js)	5.07KB	2.39KB
types (layout.js)	0.20KB	0.18KB
types (managed-by.js)	0.19KB	0.18KB
types (mobile.js)	5.00KB	2.39KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	2.52KB	1.31KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-components.js)	0.20KB	0.19KB
types (record-semantics.js)	1.28KB	0.67KB
types (registry.js)	0.20KB	0.18KB
types (reports.js)	0.20KB	0.18KB
types (select-option.js)	0.20KB	0.19KB
types (spec-report.js)	4.99KB	1.96KB
types (spec-ui-namespace.js)	0.20KB	0.19KB
types (strict-authoring-face.js)	19.93KB	7.25KB
types (system-fields.js)	3.33KB	1.54KB
types (theme.js)	6.28KB	2.87KB
types (ui-action.js)	8.11KB	3.32KB
types (views.js)	0.20KB	0.18KB
types (widget.js)	0.20KB	0.18KB

Size Limits

• ✅ Core packages should be < 50KB gzipped
• ✅ Component packages should be < 100KB gzipped
• ⚠️ Plugin packages should be < 150KB gzipped