@actuate-media/cms-admin 0.44.0 → 0.46.0

package/src/__tests__/components/tag-input.render.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment happy-dom
+import { useState } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * TagInput — chip editor with autocomplete from the collection's in-use
+ * vocabulary (`GET /collections/:slug/field-values`). Pins the dedupe
+ * contract: adding "ai" when "AI" already exists in the collection resolves
+ * to the canonical "AI", and tags already on the post are never duplicated.
+ */
+
+let fieldValues: Array<{ value: string; count: number }> = []
+
+const cmsApi = vi.fn(async (endpoint: string, _options?: unknown) => {
+  if (endpoint.startsWith('/collections/posts/field-values')) {
+    return { data: { field: 'tags', values: fieldValues }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as never),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+const { TagInput } = await import('../../components/TagInput.js')
+
+function Harness({ initial = [] as string[], maxTags }: { initial?: string[]; maxTags?: number }) {
+  const [tags, setTags] = useState(initial)
+  return (
+    <div>
+      <TagInput id="tags" value={tags} onChange={setTags} collection="posts" maxTags={maxTags} />
+      <output data-testid="value">{JSON.stringify(tags)}</output>
+    </div>
+  )
+}
+
+function currentValue(): string[] {
+  return JSON.parse(screen.getByTestId('value').textContent ?? '[]')
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  fieldValues = []
+})
+
+describe('TagInput', () => {
+  it('adds a tag on Enter and clears the draft', () => {
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'Design' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['Design'])
+    expect((input as HTMLInputElement).value).toBe('')
+  })
+
+  it('dedupes case-insensitively against tags already on the post', () => {
+    render(<Harness initial={['AI']} />)
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'ai' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['AI'])
+  })
+
+  it('resolves new tags to the canonical casing already used in the collection', async () => {
+    fieldValues = [{ value: 'AI', count: 7 }]
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    fireEvent.focus(input)
+    await waitFor(() => expect(cmsApi).toHaveBeenCalled())
+    fireEvent.change(input, { target: { value: 'ai' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(currentValue()).toEqual(['AI'])
+  })
+
+  it('shows suggestions on focus and adds one on click', async () => {
+    fieldValues = [
+      { value: 'Design', count: 3 },
+      { value: 'DevOps', count: 1 },
+    ]
+    render(<Harness />)
+    fireEvent.focus(screen.getByRole('combobox'))
+    const option = await screen.findByText('Design')
+    fireEvent.click(option)
+    expect(currentValue()).toEqual(['Design'])
+    // An added tag drops out of the suggestion list.
+    expect(screen.queryByRole('option', { name: 'Design' })).toBeNull()
+  })
+
+  it('removes a tag via its remove button and the last tag via Backspace', () => {
+    render(<Harness initial={['One', 'Two']} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Remove tag One' }))
+    expect(currentValue()).toEqual(['Two'])
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Backspace' })
+    expect(currentValue()).toEqual([])
+  })
+
+  it('disables input at the maxTags cap', () => {
+    render(<Harness initial={['a', 'b']} maxTags={2} />)
+    expect((screen.getByRole('combobox') as HTMLInputElement).disabled).toBe(true)
+  })
+})

package/src/__tests__/lib/post-editor-service.test.ts

@@ -29,6 +29,7 @@ function basePost(over: Partial<EditorPostT> = {}): EditorPostT {
     featuredImage: '',
     body: '',
     category: '',
+    tags: [],
     status: 'DRAFT',
     publishDate: null,
     sections: [],
@@ -404,3 +405,30 @@ describe('savePostDraft', () => {
     expect(out.id).toBe('new1')
   })
 })
+
+describe('tags round-trip', () => {
+  it('writes tags in the canonical `[{ tag }]` row shape', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: { id: 'p1', title: 'Hello', slug: 'hello', status: 'DRAFT', data: {} },
+    })
+    await savePostDraft(basePost({ tags: ['AI', 'CMS'] }))
+    const [, init] = cmsApiMock.mock.calls[0]!
+    const body = JSON.parse(init.body as string)
+    expect(body.tags).toEqual([{ tag: 'AI' }, { tag: 'CMS' }])
+  })
+
+  it('reads stored tags from row objects AND plain strings', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: {
+        id: 'p1',
+        title: 'Hello',
+        slug: 'hello',
+        status: 'DRAFT',
+        // Mixed legacy shapes must both surface in the editor.
+        data: { tags: [{ tag: 'AI' }, 'Nextjs', { tag: '  ' }, 42] },
+      },
+    })
+    const post = await fetchPostForEditor('blog', 'p1')
+    expect(post.tags).toEqual(['AI', 'Nextjs'])
+  })
+})

package/src/__tests__/views/post-fields-modal.render.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+/**
+ * PostFieldsModal — control selection is driven by the post type's field
+ * config: a `select` category renders a structured dropdown (UpChat taxonomy
+ * feedback P1), an `array` tags field renders the chip input (P2). Free-text
+ * configs keep their legacy inputs so existing sites are unaffected.
+ */
+
+const cmsApi = vi.fn(async () => ({ data: { field: 'tags', values: [] }, status: 200 }))
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApi(...(args as [])),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+// The rich text editor pulls in heavy dependencies; stub it.
+vi.mock('../../fields/RichTextField.js', () => ({
+  RichTextField: () => <div data-testid="rich-text" />,
+}))
+
+const { PostFieldsModal } = await import('../../views/post-editor/PostFieldsModal.js')
+type ModalProps = Parameters<typeof PostFieldsModal>[0]
+
+function basePost(over: Partial<ModalProps['post']> = {}): ModalProps['post'] {
+  return {
+    id: 'p1',
+    postType: 'posts',
+    title: 'Hello',
+    slug: 'hello',
+    excerpt: '',
+    featuredImage: '',
+    body: '',
+    category: '',
+    tags: [],
+    status: 'DRAFT',
+    publishDate: null,
+    sections: [],
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+    ...over,
+  }
+}
+
+const SELECT_FIELDS: ModalProps['fields'] = {
+  category: {
+    type: 'select',
+    options: [
+      { label: 'News', value: 'news' },
+      { label: 'Tutorials', value: 'tutorials' },
+    ],
+  },
+  tags: { type: 'array', maxRows: 12 },
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('PostFieldsModal', () => {
+  it('renders a category dropdown when the field config is a select', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost()}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const select = screen.getByLabelText('Category') as HTMLSelectElement
+    expect(select.tagName).toBe('SELECT')
+    const labels = [...select.options].map((o) => o.textContent)
+    expect(labels).toEqual(['No category', 'News', 'Tutorials'])
+  })
+
+  it('keeps a legacy free-text category selectable instead of discarding it', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ category: 'Hand Typed' })}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const select = screen.getByLabelText('Category') as HTMLSelectElement
+    expect(select.value).toBe('Hand Typed')
+  })
+
+  it('falls back to a free-text category input without field config', () => {
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={() => {}} onSave={() => {}} />)
+    const input = screen.getByLabelText('Category') as HTMLInputElement
+    expect(input.tagName).toBe('INPUT')
+    // No tags config → no tags control.
+    expect(screen.queryByLabelText('Tags')).toBeNull()
+  })
+
+  it('saves selected category and edited tags in the patch', () => {
+    const onSave = vi.fn()
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ tags: ['AI'] })}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={onSave}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText('Category'), { target: { value: 'tutorials' } })
+    const tagInput = screen.getByLabelText('Tags')
+    fireEvent.change(tagInput, { target: { value: 'CMS' } })
+    fireEvent.keyDown(tagInput, { key: 'Enter' })
+    fireEvent.click(screen.getByRole('button', { name: 'Done' }))
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ category: 'tutorials', tags: ['AI', 'CMS'] }),
+    )
+  })
+})

package/src/__tests__/views/section-inspector-repeater.render.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { createSection } from '../../lib/page-editor-service.js'
+import { SectionInspector, repeaterRowSummary } from '../../views/page-editor/SectionInspector.js'
+import type { SectionFieldDef } from '../../views/page-editor/section-types.js'
+
+/**
+ * Repeater rows derive a scannable header from their values ("Pro · $79/mo")
+ * instead of only the positional "Plan 2" label, so editors can find a row
+ * without expanding every form (Upchat feedback: "repeaters feel like
+ * spreadsheets").
+ */
+
+const PLAN_FIELDS: SectionFieldDef[] = [
+  { key: 'name', label: 'Name', type: 'text' },
+  { key: 'price', label: 'Price', type: 'text' },
+  { key: 'description', label: 'Description', type: 'textarea' },
+  {
+    key: 'tier',
+    label: 'Tier',
+    type: 'select',
+    options: [{ label: 'Most popular', value: 'popular' }],
+  },
+]
+
+describe('repeaterRowSummary', () => {
+  it('joins the first two short text values', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, { name: 'Pro', price: '$79/mo' })).toBe('Pro · $79/mo')
+  })
+
+  it('skips empty values and long-form fields', () => {
+    expect(
+      repeaterRowSummary(PLAN_FIELDS, {
+        name: '  ',
+        price: '$79/mo',
+        description: 'long prose that must never appear',
+      }),
+    ).toBe('$79/mo')
+  })
+
+  it('maps select values to their human label', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, { tier: 'popular' })).toBe('Most popular')
+  })
+
+  it('returns null for a blank row (caller falls back to "Plan N")', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, {})).toBeNull()
+    expect(repeaterRowSummary(PLAN_FIELDS, { name: '', price: '' })).toBeNull()
+  })
+
+  it('truncates very long summaries with an ellipsis', () => {
+    const summary = repeaterRowSummary(PLAN_FIELDS, { name: 'x'.repeat(100) })
+    expect(summary!.length).toBeLessThanOrEqual(60)
+    expect(summary!.endsWith('…')).toBe(true)
+  })
+})
+
+describe('SectionInspector repeater rows', () => {
+  function renderStatsInspector(stats: Array<Record<string, unknown>>) {
+    const section = createSection('stats')
+    section.content = { ...section.content, stats }
+    render(
+      <SectionInspector
+        section={section}
+        canEdit
+        onClose={vi.fn()}
+        onContentChange={vi.fn()}
+        onSettingsChange={vi.fn()}
+        onMetaChange={vi.fn()}
+        onToggleVisibility={vi.fn()}
+      />,
+    )
+  }
+
+  it('shows value-derived row headers instead of "Stat N"', () => {
+    renderStatsInspector([
+      { value: '99.99%', label: 'Uptime', description: '' },
+      { value: '3M+', label: 'API requests', description: '' },
+    ])
+    expect(screen.getByText('99.99% · Uptime')).toBeTruthy()
+    expect(screen.getByText('3M+ · API requests')).toBeTruthy()
+    expect(screen.queryByText('Stat 1')).toBeNull()
+  })
+
+  it('falls back to the positional label for blank rows', () => {
+    renderStatsInspector([{ value: '', label: '', description: '' }])
+    expect(screen.getByText('Stat 1')).toBeTruthy()
+  })
+})

package/src/components/TagInput.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+/**
+ * Chip-style tag editor with autocomplete from values already in use.
+ *
+ * Suggestions come from `GET /collections/:collection/field-values?field=...`
+ * (distinct values across the collection, most-used first) and are fetched
+ * once on first focus, then filtered client-side as the user types.
+ *
+ * Deduplication is case-insensitive and resolves to the existing canonical
+ * casing: typing "ai" when the collection already uses "AI" adds "AI", so a
+ * vocabulary never splinters into `AI` / `ai` / `Ai` variants.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
+
+interface TagInputProps {
+  id: string
+  value: string[]
+  onChange: (tags: string[]) => void
+  /** Collection slug used to fetch suggestions. Omit to disable autocomplete. */
+  collection?: string
+  /** Field to aggregate for suggestions (default `tags`). */
+  field?: string
+  disabled?: boolean
+  placeholder?: string
+  /** Hard cap on the number of tags (mirrors the field's `maxRows`). */
+  maxTags?: number
+}
+
+interface FieldValuesResponse {
+  field: string
+  values: Array<{ value: string; count: number }>
+}
+
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function TagInput({
+  id,
+  value,
+  onChange,
+  collection,
+  field = 'tags',
+  disabled,
+  placeholder,
+  maxTags,
+}: TagInputProps) {
+  const [draft, setDraft] = useState('')
+  const [known, setKnown] = useState<string[] | null>(null)
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const atCap = typeof maxTags === 'number' && value.length >= maxTags
+
+  // Fetch the in-use vocabulary once, on first focus.
+  const ensureSuggestions = useCallback(() => {
+    if (known !== null || !collection) return
+    setKnown([]) // sentinel: fetch in flight, don't refetch
+    cmsApi<FieldValuesResponse>(
+      `/collections/${encodeURIComponent(collection)}/field-values?field=${encodeURIComponent(field)}`,
+    ).then((res) => {
+      if (res.data?.values) setKnown(res.data.values.map((v) => v.value))
+    })
+  }, [known, collection, field])
+
+  // Close the suggestion list on outside click.
+  useEffect(() => {
+    if (!open) return
+    function onPointerDown(e: PointerEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
+  const lowerExisting = new Set(value.map((t) => t.toLowerCase()))
+  const matches = (known ?? [])
+    .filter((s) => !lowerExisting.has(s.toLowerCase()))
+    .filter((s) => !draft.trim() || s.toLowerCase().includes(draft.trim().toLowerCase()))
+    .slice(0, 8)
+
+  function addTag(raw: string) {
+    const tag = raw.trim()
+    if (!tag || atCap) return
+    const lower = tag.toLowerCase()
+    if (lowerExisting.has(lower)) {
+      setDraft('')
+      return
+    }
+    // Prefer the canonical casing already used elsewhere in the collection.
+    const canonical = (known ?? []).find((s) => s.toLowerCase() === lower) ?? tag
+    onChange([...value, canonical])
+    setDraft('')
+    setActiveIndex(-1)
+  }
+
+  function removeTag(index: number) {
+    onChange(value.filter((_, i) => i !== index))
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault()
+      if (activeIndex >= 0 && activeIndex < matches.length) addTag(matches[activeIndex]!)
+      else addTag(draft)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setOpen(true)
+      setActiveIndex((i) => Math.min(i + 1, matches.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      setActiveIndex(-1)
+    } else if (e.key === 'Backspace' && !draft && value.length > 0) {
+      removeTag(value.length - 1)
+    }
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      {value.length > 0 && (
+        <div className="mb-1.5 flex flex-wrap gap-1.5">
+          {value.map((tag, i) => (
+            <span
+              key={`${tag}-${i}`}
+              className="bg-accent text-foreground inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs"
+            >
+              {tag}
+              {!disabled && (
+                <button
+                  type="button"
+                  aria-label={`Remove tag ${tag}`}
+                  onClick={() => removeTag(i)}
+                  className="text-muted-foreground hover:text-destructive rounded p-0.5"
+                >
+                  <X className="h-3 w-3" aria-hidden />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+      <input
+        id={id}
+        className={INPUT}
+        role="combobox"
+        aria-expanded={open && matches.length > 0}
+        aria-autocomplete="list"
+        aria-controls={`${id}-listbox`}
+        value={draft}
+        disabled={disabled || atCap}
+        placeholder={atCap ? `Maximum of ${maxTags} tags` : (placeholder ?? 'Add a tag…')}
+        onFocus={() => {
+          ensureSuggestions()
+          setOpen(true)
+        }}
+        onChange={(e) => {
+          setDraft(e.target.value)
+          setOpen(true)
+          setActiveIndex(-1)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      {open && matches.length > 0 && !disabled && (
+        <ul
+          id={`${id}-listbox`}
+          role="listbox"
+          aria-label="Tag suggestions"
+          className="border-border bg-card absolute z-20 mt-1 max-h-44 w-full overflow-y-auto rounded-md border py-1 shadow-md"
+        >
+          {matches.map((s, i) => (
+            <li key={s} role="option" aria-selected={i === activeIndex}>
+              <button
+                type="button"
+                className={`w-full px-2.5 py-1.5 text-left text-sm ${
+                  i === activeIndex
+                    ? 'bg-accent text-foreground'
+                    : 'text-foreground hover:bg-accent'
+                }`}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => addTag(s)}
+              >
+                {s}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/lib/post-editor-service.ts

@@ -73,6 +73,8 @@ export interface EditorPost {
   featuredImage: string
   body: string
   category: string
+  /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
+  tags: string[]
   status: PostStatus
   publishDate: string | null
   sections: PageSection[]
@@ -190,6 +192,26 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+/**
+ * Read stored tags into plain strings. The `tagsField` preset stores
+ * `[{ tag: 'AI' }]` rows; older/hand-rolled configs may store `['AI']`
+ * directly — accept both so no site loses tags in the editor.
+ */
+export function parseTags(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return []
+  const out: string[] = []
+  for (const item of raw) {
+    const value =
+      typeof item === 'string'
+        ? item
+        : item && typeof item === 'object'
+          ? (item as { tag?: unknown }).tag
+          : undefined
+    if (typeof value === 'string' && value.trim()) out.push(value.trim())
+  }
+  return out
+}
+
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
   return {
@@ -201,6 +223,7 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     featuredImage: dataStr(data, 'featuredImage'),
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
+    tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
     // Preserve unknown (externally-managed) sections so the editor can show
@@ -290,6 +313,7 @@ interface PostWritePayload {
   featuredImage: string
   body: string
   category: string
+  tags: Array<{ tag: string }>
   publishDate: string | null
   sections: PageSection[]
   metaTitle: string
@@ -313,6 +337,9 @@ function toWriteBody(post: EditorPost, extra?: Record<string, unknown>): string
     featuredImage: post.featuredImage,
     body: post.body,
     category: post.category,
+    // Store the canonical `tagsField` row shape so server-side array-field
+    // validation and the public renderer see the schema they expect.
+    tags: post.tags.map((tag) => ({ tag })),
     publishDate: post.publishDate,
     // Unmanaged sections are part of `post.sections`, so they round-trip on
     // every save (no data loss).
@@ -378,6 +405,7 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     featuredImage: '',
     body: '',
     category: '',
+    tags: [],
     status: 'DRAFT',
     publishDate: null,
     sections,

package/src/views/page-editor/SectionInspector.tsx

@@ -525,6 +525,39 @@ function RelationshipField({
 
 type RowRecord = Record<string, unknown>
 
+// Field types whose values are short enough to scan in a row header. Long-form
+// fields (textarea, richText) and non-text values (media, url) stay out.
+const SUMMARY_FIELD_TYPES = new Set(['text', 'select'])
+const SUMMARY_MAX_LENGTH = 60
+
+/**
+ * Derive a scannable one-line summary for a repeater row from its first two
+ * short text values — e.g. a pricing row renders as "Pro · $79/mo" instead of
+ * "Plan 2". Returns `null` when the row has no usable values yet, so the
+ * caller falls back to the positional "Plan 2" label.
+ */
+export function repeaterRowSummary(fields: SectionFieldDef[], row: RowRecord): string | null {
+  const parts: string[] = []
+  for (const field of fields) {
+    if (parts.length >= 2) break
+    if (!SUMMARY_FIELD_TYPES.has(field.type)) continue
+    const raw = row[field.key]
+    const value = typeof raw === 'string' ? raw.trim() : typeof raw === 'number' ? String(raw) : ''
+    if (!value) continue
+    if (field.type === 'select') {
+      const option = field.options?.find((o) => o.value === value)
+      parts.push(option?.label ?? value)
+    } else {
+      parts.push(value)
+    }
+  }
+  if (parts.length === 0) return null
+  const joined = parts.join(' · ')
+  return joined.length > SUMMARY_MAX_LENGTH
+    ? `${joined.slice(0, SUMMARY_MAX_LENGTH - 1).trimEnd()}…`
+    : joined
+}
+
 /**
  * Generic repeater editor: an orderable list of rows, each row a small form of
  * the repeater's sub-fields. Drives the generic `repeater` field type and the
@@ -665,6 +698,8 @@ function SortableRepeaterRow({
     zIndex: isDragging ? 10 : undefined,
   }
 
+  const summary = repeaterRowSummary(fields, row)
+
   return (
     <div
       ref={setNodeRef}
@@ -684,8 +719,11 @@ function SortableRepeaterRow({
               <GripVertical className="h-3.5 w-3.5" aria-hidden />
             </button>
           )}
-          <span className="text-muted-foreground text-xs">
-            {rowLabel} {index + 1}
+          <span
+            className="text-muted-foreground max-w-[200px] truncate text-xs"
+            title={summary ? `${rowLabel} ${index + 1}: ${summary}` : undefined}
+          >
+            {summary ?? `${rowLabel} ${index + 1}`}
           </span>
         </span>
         <button