feat(frontend): explain DVA failures and recovery actions - #88
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
The PR introduces a few concrete functional regressions (notably MSW handler error handling and attestation payload/mocking mismatches, plus a pending-verification UI status bug) that should be addressed before merge.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR expands the frontend experience around DVA/VLA evaluation failures by adding richer failure normalization + “next action” guidance, plus introduces a full template workspace (CRUD + test/render) in the VLA Manager and refactors the DVA Dashboard to route requests to multiple HTTP services (with demo/live mode and service-health views). It also updates the local test environment to the new HTTP-only architecture (removing RabbitMQ/ACA-Py assumptions) and adds regression tests for these boundaries.
Changes:
- Add VLA Manager template workspace (list/create/edit/delete + render/evaluate tester) and enhance MSW mock API behavior + error fixtures.
- Introduce/expand failure explanation models/components to display actionable recovery guidance.
- Refactor DVA Dashboard routing/proxying for split services (DVA API / VLA Manager API / VC Manager), add overview + API status screens, and add demo/live data mode.
- Update test environment compose stack and add tests guarding service boundaries and refactor outcomes.
File summaries
| File | Description |
|---|---|
| vla-manager/vite.config.js | Adjust dev proxy path matching |
| vla-manager/src/style.css | Global layout/typography utilities |
| vla-manager/src/mocks/templates.js | Render mock templates via Handlebars |
| vla-manager/src/mocks/handlers.js | Add template CRUD/render + stricter mocks |
| vla-manager/src/mocks/failureFixtures.js | Centralize mock error responses |
| vla-manager/src/main.js | Add /templates route |
| vla-manager/src/failures/failureModel.js | Normalize evaluation failures + actions |
| vla-manager/src/components/TemplateVariableForm.vue | Dynamic variable form from schema |
| vla-manager/src/components/TemplateTester.vue | Render/evaluate template test UI |
| vla-manager/src/components/TemplatesView.vue | Template workspace shell + routing |
| vla-manager/src/components/TemplatePreview.vue | Requirement preview card |
| vla-manager/src/components/TemplateFilters.vue | Search/filter template list |
| vla-manager/src/components/TemplateEditor.vue | Create/edit template form + preview |
| vla-manager/src/components/TemplateCard.vue | Template list card + actions |
| vla-manager/src/components/SampleModal.vue | Rebuild JSON modal using Naive UI |
| vla-manager/src/components/ReqModal.vue | Rebuild requirement modal + template loading |
| vla-manager/src/components/ListView.vue | New VLA list UI + attestation submit |
| vla-manager/src/components/Header.vue | Add nav + refreshed header styling |
| vla-manager/src/components/FailureExplanation.vue | Failure explanation alert component |
| vla-manager/src/components/CreateView.vue | Rework builder UX + metadata inputs |
| vla-manager/src/App.vue | Wrap app in Naive UI providers/layout |
| vla-manager/src/api/templates.js | Typed-ish template API wrapper + error normalization |
| test/frontend-service-boundaries.test.mjs | Assert dashboard endpoint routing & removals |
| test/failure-model.test.mjs | Regression tests for dashboard failure model |
| test/compose-refactor.test.mjs | Validate compose stack refactor expectations |
| test-env/README.md | Updated local environment instructions |
| test-env/compose.yml | Remove RabbitMQ; add HTTP services |
| test-env/common-services.yml | Add vla-manager-api + vc-manager builds |
| dva-dashboard/vite.config.js | Proxy /api/dva |
| dva-dashboard/src/utils/mobileNavigation.mjs | Mobile nav state helper |
| dva-dashboard/src/style.css | Global layout + focus + sidebar styling |
| dva-dashboard/src/main.js | Add overview + API status routes |
| dva-dashboard/src/failures/failureModel.js | New structured failure model + normalizers |
| dva-dashboard/src/failures/demoFailures.js | Demo failure scenarios |
| dva-dashboard/src/demoData.js | Demo datasets for dashboard views |
| dva-dashboard/src/dataMode.js | Persist demo/live toggle |
| dva-dashboard/src/components/RequestsView.vue | New requests UI + filters + pagination |
| dva-dashboard/src/components/RequestCard.vue | New request card + failure explanation |
| dva-dashboard/src/components/PresentationsView.vue | New verifications UI + live mapping |
| dva-dashboard/src/components/PresentationCard.vue | New verification card + audit details |
| dva-dashboard/src/components/OverviewView.vue | Operations overview + service probes |
| dva-dashboard/src/components/Header.vue | Responsive header + nav toggle |
| dva-dashboard/src/components/FailureExplanation.vue | Dashboard failure explanation panel |
| dva-dashboard/src/components/CredentialsView.vue | New credentials UI + error state |
| dva-dashboard/src/components/CredentialCard.vue | New credential card + JSON toggle |
| dva-dashboard/src/components/common/Header.vue | Updated common header styling |
| dva-dashboard/src/components/ApiStatusView.vue | Endpoint health + demo/live toggle |
| dva-dashboard/src/App.vue | Mobile sidebar behavior + layout |
| dva-dashboard/src/api/endpoints.js | Centralize dashboard API endpoints |
| dva-dashboard/misc/nginx.conf.template | Split nginx routing for 3 services |
Review details
Suppressed comments (1)
vla-manager/src/components/ListView.vue:155
- The mock /api/attestation handler now rejects requests that omit top-level credentialSubject and dataReference, but this payload only includes those fields nested under contract.vla (and not at all for credentialSubject). This will consistently return 400 in mock mode and likely diverges from the gateway contract.
- Files reviewed: 50/52 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| </div> | ||
| </div> | ||
| <article class="card"> | ||
| <div class="card-header"><div class="card-mark"><v-icon name="fa-user-shield" /></div><div class="header-copy"><span>Verification attempt</span><h3>{{ pres.id || pres.thread_id || 'Verification' }}</h3></div><span class="status" :class="record.failure.status === 'passed' ? 'pass' : 'fail'"><i></i>{{ record.failure.status === 'passed' ? 'Verified' : 'Needs attention' }}</span></div> |
| if (!validate() || !form.value.id) return | ||
| rendering.value = true | ||
| error.value = null | ||
| try { | ||
| const result = await renderTemplate(form.value.id, {}) |
| quality: (body.qualityTemplates || []).map(({ id, model }) => { | ||
| const template = findTemplate(id) | ||
| if (template === undefined) { | ||
| console.error(`Mock backend could not find template ${id}`) | ||
| return HttpResponse(null, { status: 404 }) | ||
| throw new Error(`Template ${id} was not found`) | ||
| } |
90c1f6b to
864f3e8
Compare
The RMQ integration was removed in 4aedc8a, but the compose stack still started three RabbitMQ brokers, passed DVA_RABBITMQ_HOST to services that no longer read it, and handed dva-processing a --no-rmq flag its CLI no longer defines. The stack also never started the VLA Manager API or the VC Manager, so the gateway's vlaManager.url and vcManager.url fell back to localhost:8000 and resolved to nothing inside the container. Both now run, each with its own postgres, and every DVA API is pointed at them. Requirement validation calls DVA Processing from the VLA Manager API, so it is given a processing URL as well. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Whitespace only; `git diff -w` against the parent is empty. Re-applied rather than cherry-picked from the original a595f9f, whose file contents predate the requirement validation added in 481bd90, 674098e and 9e28426 and would have reverted it. The file list is recomputed instead of reused: ReqModal.vue has since been cleaned, and FileSelector.vue and mocks/handlers.js have since acquired trailing whitespace. The original used the type "style", which this repo's type-enum does not allow. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Attestation requests have gone straight to the gateway since 4aedc8a, so nothing is queued. The mock's error text is corrected alongside the banner; the original branch only touched the banner. The dashboard's QUEUE_FAILURE code is deliberately left alone: it is part of the documented failure vocabulary in docs/attestation-verification-failures.md. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
864f3e8 to
c962af5
Compare
No description provided.