Workspace/Mini projects
Loading progress
All mini projects
MODULE 19 · 5 HOUR BUILD

Review surface with synchronized proposal state

Build a constrained generated review surface and a state reducer that rejects stale approvals. The seed combines local UI descriptions with local event state and prints a review preview.

Build evidence Record your actual checks, results, and limitations.

Build it in stages

  1. Pin an A2UI content version and a separate AG-UI integration version in an implementation manifest.
  2. Define a small approved component catalog and validate generated descriptions.
  3. Project only user-visible backend state into the frontend model.
  4. Implement snapshot recovery, atomic deltas, and revision-bound action submission.
  5. Add fixtures for unknown components, dropped updates, duplicate clicks, and concurrent user edits.

Your acceptance criteria

Use these as your project review. Record commands, outputs, and failure cases in your repository.

  • A stale approval performs no effect and produces a conflict result.
  • A valid surface uses only approved component and action names.
  • Backend secrets never enter shared state fixtures.
  • The README distinguishes A2UI content, AG-UI interaction, and application-owned revision policy.

A working starting point

The seed runs as supplied. Extend it to satisfy the full brief. It is a teaching starting point, not a finished portfolio submission.

main.py
python
import json
from copy import deepcopy

CATALOG = {'Text', 'Button'}
ACTIONS = {'approve'}

def surface(state):
    return [
        {'kind': 'Text', 'text': state['title']},
        {'kind': 'Text', 'text': 'Recipient: ' + state['recipient']},
        {'kind': 'Button', 'label': 'Approve reviewed proposal',
         'action': 'approve', 'revision': state['revision']},
    ]

def validate(components):
    for item in components:
        if item['kind'] not in CATALOG:
            raise ValueError('unknown component')
        if item['kind'] == 'Button' and item['action'] not in ACTIONS:
            raise ValueError('unknown action')

def approve(state, reviewed_revision):
    if reviewed_revision != state['revision']:
        return 'conflict'
    return 'ready-for-authorized-executor'

def main():
    backend = {'revision': 4, 'title': 'Incident report', 'recipient': 'team-A'}
    frontend = deepcopy(backend)
    components = surface(frontend)
    validate(components)
    print(json.dumps(components, sort_keys=True))
    backend.update(revision=5, recipient='team-B')
    print('stale action:', approve(backend, frontend['revision']))
    frontend = deepcopy(backend)
    print('fresh action:', approve(backend, frontend['revision']))
    print('effects executed:', 0)

if __name__ == '__main__':
    main()

Push it further

Build two actual frontend renderers from the same validated content and compare keyboard navigation, focus preservation, and update consistency across both.