UI: Human-first Content Browser redesign (search, schema-aware summaries, version diffs)

[dligthart]

Summary

The Content Browser is currently optimized for raw JSON inspection, but not for human supervisors who need to quickly locate, interpret, and review content.

This issue proposes a broader redesign so the browser becomes a human-first operational workspace while staying read-focused (not a full editor).

Current pain points

1. Model discovery is weak:

• Sidebar shows mostly name + slug, without helpful context like item volume or recent activity.

2. Item findability is low:

• No search box.
• No visible status/date filters.
• No visible pagination controls despite backend pagination metadata.

3. Item readability is low:

• List rows are JSON-string snippets, which are hard to scan.
• There is no stable “display title” per item.

4. Version review is shallow:

• Timeline shows snapshots, but no explicit diff view to explain what changed.

5. Rollback decision support is limited:

• Rollback exists, but without a clear human-readable change summary before confirmation.

Proposal (human-first redesign)

1. Add a findability toolbar on the item list:

• Search (text query)
• Status filter
• Date range filter
• Sort by updated/created
• Pagination controls (next/prev + total)

2. Make list rows schema-aware:

• Derive a primary display label from common fields (title, name, headline, slug, fallback to Item #id)
• Show key metadata chips (status, version, updated time)
• Keep raw JSON as secondary/expandable, not primary

3. Upgrade model sidebar into model summaries:

• Item count
• Last item update
• Optional status breakdown (draft/published/archived)
• Sort models by recent activity

4. Add explicit version diff mode:

• Compare current vs selected historical version
• Highlight added/removed/changed fields
• Keep raw snapshots accessible in a separate tab

5. Improve rollback safety UX:

• Confirmation modal includes concise diff summary and impact statement
• Keep existing confirmation gate, but make decision context clearer

Public API/interface additions proposed

1. GET /api/content-items:

• Add optional q query param for server-side text search across selected top-level fields
• Add optional sort controls (sortBy, sortDir) if not already standardized

2. GET /api/content-types:

• Add optional includeStats=true to return model-level stats:
  • itemCount
  • lastItemUpdatedAt
  • optional status counts

3. (Optional) GET /api/content-items/:id/diff?fromVersion=&toVersion=:

• Return normalized field-level diff payload for UI rendering

Files likely affected

• ui/src/routes/content/+page.svelte
• ui/src/lib/components/* (new list-row, filters, diff-view components)
• ui/src/lib/utils.ts (display label + diff helpers)
• src/api/routes.ts (query additions / stats endpoint behavior)

Acceptance criteria

1. Supervisors can find an item by title/slug/status/date without scanning raw JSON blocks.
2. Item list shows human-readable labels with metadata, with JSON preview as secondary.
3. Model list shows at least item count and last updated metadata.
4. Version history supports explicit diff visualization between two versions.
5. Rollback confirmation includes a human-readable change summary.
6. Behavior works on desktop and mobile layouts.
7. Existing read-only stance is preserved (no direct inline editing introduced by this issue).

Non-goals

• Building a full content editor
• Changing workflow policy semantics
• Replacing audit logs functionality

[dligthart]

Continued implementation and pushed commit 6f6af46.

First content-browser redesign slice shipped:

• src/api/routes.ts adds lightweight GET /api/content-items query support for q, sortBy, and sortDir, while preserving the existing pagination meta contract.
• src/api/routes.contract.test.ts now covers the new search/sort query path.
• ui/src/routes/content/+page.svelte has been refactored from a raw JSON inspector into a more human-first browser with:
  • search, status/date filters, sort controls, and pagination
  • model cards with schema/description context
  • item cards that derive display labels and summaries from structured fields instead of showing raw JSON blobs as the primary list view
  • an explicit diff panel comparing the current item to a selected historical version
  • richer rollback confirmation text that summarizes the field-level changes before the operator confirms

Validation run:

• npm test -- src/api/routes.contract.test.ts
• npm run build
• cd ui && npm run check
• cd ui && npm run build

What remains for #134 is the next layer of polish and depth rather than basic usability: model-level stats in the sidebar, broader search/diff ergonomics, and any follow-on rollback-decision UX beyond the current summary-first flow.

[dligthart]

Continued implementation and pushed commit 8bb9600.

This slice adds model-level activity stats to the content browser:

• GET /api/content-types now accepts includeStats=true and returns per-model item counts, last item activity, and status counts.
• src/api/routes.contract.test.ts now locks that response shape in a route-contract test.
• ui/src/routes/content/+page.svelte now requests those stats, sorts models by recent activity, keeps the current selection synced on refresh, and shows item volume plus top statuses directly in the sidebar cards.

Validation run:

• npm test -- src/api/routes.contract.test.ts
• npm run build
• cd ui && npm run check
• cd ui && npm run build

[dligthart]

Continued implementation and pushed commit 899448b.

This pass focuses on content-browser usability in the supervisor UI:

• Reworked the selected-model header into a more compact summary with clearer model context and workflow visibility.
• Replaced the tall stacked filter form with a denser search/sort toolbar, one-click status chips, and removable active-filter pills.
• Added a results summary panel and an easier reset path from empty filtered states.
• Normalized status copy to readable labels in list and detail badges.

Validation run:

• cd ui && npm run check
• cd ui && npm run build

[dligthart]

Continued implementation and pushed commit 5372f4b.

This pass addresses the content-browser density and three-column layout problems:

• Replaced the large model cards with a narrower, compact schema navigator that shows item counts and a tree-style preview of model fields.
• Reduced the model rail width so the main list gets more space by default.
• Replaced the always-on third-column detail pane with a slide-over drawer, so opening an item no longer collapses the results list into a cramped middle column.
• Kept the filter and results workflow intact while improving overview on desktop.

Validation run:

• cd ui && npm run check
• cd ui && npm run build

[dligthart]

Continued the content-browser redesign and pushed commit 115d76a.

This rebuild replaces the old mixed browser layout with a schema-first workspace:

• one clear landing state for choosing a schema
• a scoped schema context rail
• a wider results workspace that no longer reserves inspector space before selection
• a cleaner filter flow with search separated from sort/order actions
• schema metrics/details moved behind an Info modal, with Change schema kept in the main flow
• redundant sidebar stats removed so the rail stays contextual instead of repetitive

Validation run:

• cd ui && npm run check
• cd ui && npm run build

[dligthart]

Continued supervisor UI cleanup and pushed commit 2630a7d.

This batch finishes the content browser around the schema-first pattern we settled on:

• moved schema context/actions into the sidebar instead of using a large top content block
• compacted the main filter bar so search, sort, order, and apply fit the primary toolbar
• moved advanced filters behind a toggle
• replaced large item cards with a denser table-style results view so more records are visible at once
• kept schema details behind an Info entry instead of always-on summary cards

It also includes two adjacent supervisor fixes that came out of the same review pass:

• rebuilt the API Keys page around active keys first and revoked history second
• prettified JSON Schema Definition values in the Schema Manager on load/save

Validation run:

• cd ui && npm run check
• cd ui && npm run build

[dligthart]

This redesign is now implemented on main.

Delivered across the content-browser redesign slices:

• GET /api/content-items support for q, sortBy, and sortDir
• GET /api/content-types?includeStats=true with itemCount, lastItemUpdatedAt, and statusCounts
• supervisor content-browser search, status/date filters, sort controls, and pagination
• schema-aware display labels and summaries instead of raw-JSON-first rows
• explicit historical diff review in the browser
• rollback confirmation with a human-readable change summary
• a schema-first, denser responsive layout with activity-aware model context and slide-over detail flow

Closing this as implemented.