Skip to content

Ship exact Frappe governed demo #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abrichr merged 1 commit into from
Jul 26, 2026
Merged

Ship exact Frappe governed demo #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions components/EvidenceMediaPlayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function EvidenceMediaPlayer({
media,
application,
phase,
modeLabel,
exactPresentation = null,
evidenceHref = null,
}) {
Expand Down Expand Up @@ -148,12 +149,13 @@ export default function EvidenceMediaPlayer({
setDuration(Number.isFinite(video.duration) ? video.duration : 0)
}

const phaseLabel =
phase === 'recording'
const accessibleModeLabel =
modeLabel ??
(phase === 'recording'
? 'Demonstration'
: phase === 'halt'
? 'Fail-safe halt'
: 'Compiled replay'
: 'Compiled replay')
const frame = exactPresentation
? executionOverlayFrameAt(
exactPresentation.timeline,
Expand Down Expand Up @@ -197,6 +199,7 @@ export default function EvidenceMediaPlayer({
exactPresentation.networkObservation
)
: null
const overlayEvidenceHref = presentation?.evidenceHref ?? evidenceHref

useEffect(() => {
const stage = stageRef.current
Expand Down Expand Up @@ -228,6 +231,9 @@ export default function EvidenceMediaPlayer({
data-testid="reference-evidence-player"
data-media-kind={media.kind}
data-media-src={media.src}
data-decoded-frame-index={
decodedFrameIndex === null ? 'unbound' : decodedFrameIndex
}
data-target-tracking={
exactPresentation
? 'exact-decoded-frame-bound'
Expand Down Expand Up @@ -298,9 +304,9 @@ export default function EvidenceMediaPlayer({
<div
ref={capsuleRef}
className={styles.capsule}
aria-label={`OpenAdapt ${phaseLabel.toLowerCase()} in ${application}`}
aria-label={`OpenAdapt ${accessibleModeLabel.toLowerCase()} in ${application}`}
data-overlay-kind="canonical-runtime-state"
data-interactive={presentation.evidenceHref ? 'true' : undefined}
data-interactive={overlayEvidenceHref ? 'true' : undefined}
>
<span className={styles.header}>
<span className={styles.brand}>
Expand Down Expand Up @@ -345,8 +351,8 @@ export default function EvidenceMediaPlayer({
{presentation.explanation}
</span>
)}
{(evidenceHref ?? presentation.evidenceHref) && (
<a className={styles.evidenceLink} href={evidenceHref ?? presentation.evidenceHref}>
{overlayEvidenceHref && (
<a className={styles.evidenceLink} href={overlayEvidenceHref}>
View execution evidence
</a>
)}
Expand All @@ -357,7 +363,7 @@ export default function EvidenceMediaPlayer({
<div
className={styles.controls}
role="group"
aria-label={`${application} ${phaseLabel.toLowerCase()} playback controls`}
aria-label={`${application} ${accessibleModeLabel.toLowerCase()} playback controls`}
>
<button
type="button"
Expand Down
1 change: 1 addition & 0 deletions components/ReferenceDemoShowcase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ export default function ReferenceDemoShowcase({
media={media}
application={demo.application}
phase={selectedMode.modeKind}
modeLabel={selectedMode.label}
exactPresentation={playerPresentation}
evidenceHref={selectedMode.evidenceHref ?? demo.evidenceHref}
/>
Expand Down
20 changes: 11 additions & 9 deletions cypress/e2e/basic.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,20 +484,22 @@ describe('public product truth', () => {
.within(() => {
cy.contains('Frappe Lending').should('be.visible')
cy.contains('button', 'Recorded demonstration').click()
cy.get('img')
.should('have.attr', 'alt')
cy.get('video')
.should('have.attr', 'aria-label')
.and('contain', 'recording a synthetic Loan Application')
cy.contains('button', 'Compiled replay').click()
cy.get('img')
.should('have.attr', 'alt')
.and('contain', 'replaying the compiled synthetic Loan Application')
cy.contains('Compiled trials')
cy.contains('button', 'Verified replay').click()
cy.get('video')
.should('have.attr', 'aria-label')
.and('contain', 'Standard-profile synthetic Loan Application')
cy.get('[data-testid="reference-evidence-player"]')
.should('have.attr', 'data-target-tracking', 'exact-decoded-frame-bound')
cy.contains('Standard VERIFIED')
cy.contains('6/6')
cy.contains('Evidence manifest')
cy.contains('Qualification pack')
.should('have.attr', 'href')
.and(
'equal',
'/artifacts/json?source=%2Flending-demo%2Fprovenance.json'
'/artifacts/json?source=%2Freference%2Ffrappe-lending-loan-application-standard-synthetic-v1%2Fmanifest.json'
)
})

Expand Down
83 changes: 80 additions & 3 deletions cypress/e2e/reference-demo.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ describe('shared real-application demo', () => {
const routes = [
['/', 'healthcare', 'exact-decoded-frame-bound'],
['/solutions/healthcare', 'healthcare', 'exact-decoded-frame-bound'],
['/solutions/lending', 'lending', 'omitted-without-exact-timeline'],
['/solutions/lending', 'lending', 'exact-decoded-frame-bound'],
['/solutions/insurance', 'insurance', 'exact-decoded-frame-bound'],
['/how-it-works', 'healthcare', 'exact-decoded-frame-bound'],
['/dental', 'insurance', 'exact-decoded-frame-bound'],
Expand Down Expand Up @@ -43,8 +43,8 @@ describe('shared real-application demo', () => {
.scrollIntoView()
.should('be.visible')
.within(() => {
cy.get('img').should(($image) => {
expect($image[0].naturalWidth).to.be.greaterThan(0)
cy.get('video').should(($video) => {
expect($video[0].videoWidth).to.be.greaterThan(0)
})
cy.get('button[aria-label="Pause"], button[aria-label="Play"]')
.should('have.css', 'width', '44px')
Expand All @@ -56,6 +56,83 @@ describe('shared real-application demo', () => {
})
})

for (const [label, width, height] of [
['desktop', 1280, 900],
['mobile', 390, 844],
]) {
it(`keeps exact Frappe target tracking clear of the ${label} status capsule`, () => {
cy.viewport(width, height)
cy.visit('/solutions/lending', {
onBeforeLoad(win) {
win.IntersectionObserver = class {
constructor(callback) {
this.callback = callback
}

observe() {
this.callback([{ isIntersecting: true }])
}

disconnect() {}
}
},
})
cy.get('[data-testid="reference-evidence-player"]')
.scrollIntoView()
.as('player')
cy.contains('a', 'Reference method').should(
'have.attr',
'href',
'https://github.com/OpenAdaptAI/openadapt-flow/tree/ef33c2f4691040e39eb831f84658b941f715c290/benchmark/frappe_lending'
)
cy.get('@player')
.find('video')
.should(($video) => {
expect($video[0].videoWidth).to.be.greaterThan(0)
})
.then(($video) => {
const video = $video[0]
return new Cypress.Promise((resolve) => {
video.currentTime = 0.59
setTimeout(() => {
video.playbackRate = 0.25
video.play().then(resolve)
}, 100)
})
})
cy.get('@player')
.should('have.attr', 'data-decoded-frame-index', '1')
.then(($player) => $player.find('video')[0].pause())
.should('contain.text', 'View execution evidence')
.and('contain.text', 'Application network traffic observed')
.find('[data-decoded-frame-index="1"]')
.should('be.visible')
.then(($target) => {
cy.get('@player')
.find('[data-overlay-kind="canonical-runtime-state"]')
.should('be.visible')
.and(
'have.attr',
'aria-label',
'OpenAdapt verified replay in Frappe Lending'
)
.then(($capsule) => {
const target = $target[0].getBoundingClientRect()
const capsule = $capsule[0].getBoundingClientRect()
const intersects = !(
target.right <= capsule.left ||
target.left >= capsule.right ||
target.bottom <= capsule.top ||
target.top >= capsule.bottom
)
expect(intersects).to.equal(false)
})
})
cy.contains('a', 'Qualification pack').should('be.visible')
cy.get('@player').screenshot(`frappe-exact-target-${label}`)
})
}

it('remounts exact media and supports keyboard-complete application tabs', () => {
cy.visit('/')
cy.get('[data-testid="reference-demo-showcase"]')
Expand Down
58 changes: 31 additions & 27 deletions data/referenceDemos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ const referenceDemo = ({ recording, replay, halt = null, ...demo }) =>
const openimisCatalog = presentationAssets.catalogs.find(
(candidate) => candidate.applicationId === 'insurance'
)
const frappeCatalog = presentationAssets.catalogs.find(
(candidate) => candidate.applicationId === 'lending'
)

const openimisManifestMode = (modeId, details) => {
const mode = openimisCatalog.manifest.modes.find(
Expand Down Expand Up @@ -122,52 +125,53 @@ export const REFERENCE_DEMOS = Object.freeze([
referenceDemo({
id: 'lending',
industry: 'Lending',
application: 'Frappe Lending',
applicationDetail: 'pinned local reference',
application: frappeCatalog.manifest.application.name,
applicationDetail: `${frappeCatalog.manifest.application.version} · pinned local synthetic fixture`,
route: '/solutions/lending',
evidenceClass: 'Public application reference',
evidenceClass: 'Reference qualification',
task: 'Create exactly one synthetic Loan Application from structured applicant and loan inputs.',
recording: Object.freeze({
id: 'recording',
label: 'Recorded demonstration',
modeKind: 'recording',
evidenceClass: 'Source demonstration · synthetic data',
kind: 'gif',
src: '/lending-demo/record-frappe.gif',
poster: '/lending-demo/record-frappe.jpg',
width: 880,
height: 550,
kind: 'video',
src: `${frappeCatalog.root}/${frappeCatalog.manifest.recording.media.path}`,
mimeType: 'video/mp4',
poster: `${frappeCatalog.root}/${frappeCatalog.manifest.recording.poster.path}`,
width: frappeCatalog.manifest.recording.media.width,
height: frappeCatalog.manifest.recording.media.height,
alt: 'OpenAdapt recording a synthetic Loan Application workflow in Frappe Lending.',
sourceCaption:
'Source-derived evidence sequence from the Frappe Lending reference run; not a literal continuous screen recording.',
'Unbound source recording used to compile the Frappe Lending workflow. It carries no overlay or outcome claim.',
...exactPresentationFor('lending', 'recording'),
}),
replay: Object.freeze({
id: 'compiled_replay',
label: 'Compiled replay',
id: 'verified_replay',
label: 'Verified replay',
modeKind: 'replay',
kind: 'gif',
src: '/lending-demo/replay-frappe.gif',
poster: '/lending-demo/replay-frappe.jpg',
width: 880,
height: 550,
alt: 'OpenAdapt replaying the compiled synthetic Loan Application workflow in Frappe Lending.',
kind: 'video',
src: `${frappeCatalog.root}/${frappeCatalog.manifest.replay.media.path}`,
mimeType: 'video/mp4',
poster: `${frappeCatalog.root}/${frappeCatalog.manifest.replay.poster.path}`,
width: frappeCatalog.manifest.replay.media.width,
height: frappeCatalog.manifest.replay.media.height,
alt: 'OpenAdapt replaying a Standard-profile synthetic Loan Application workflow in Frappe Lending.',
sourceCaption:
'Source-derived evidence sequence from the Frappe Lending compiled replay; not literal continuous footage.',
...exactPresentationFor('lending', 'replay'),
'Exact Standard-profile replay evidence media with presentation chrome omitted.',
...exactPresentationFor('lending', 'verified_replay'),
}),
metrics: Object.freeze([
Object.freeze({ label: 'Compiled trials', value: '6/6' }),
Object.freeze({ label: 'Silent wrong success', value: '0' }),
Object.freeze({ label: 'Standard VERIFIED', value: '6/6' }),
Object.freeze({ label: 'REST + SQL parity', value: '6/6' }),
Object.freeze({ label: 'Model calls', value: '0' }),
]),
verification:
'A separately authenticated REST readback, direct SQL table delta, and non-target digest audit accepted the saved record.',
evidenceHref: '/artifacts/json?source=%2Flending-demo%2Fprovenance.json',
evidenceLabel: 'Evidence manifest',
methodologyHref:
'https://github.com/OpenAdaptAI/openadapt-flow/tree/84c7a94f2d2ca9e183799394d1952ae32fa6bf92/benchmark/frappe_lending',
methodologyLabel: 'Reference source',
'All 6 fresh Standard-profile runs created exactly one synthetic Loan Application and returned VERIFIED only after separately authenticated REST readback agreed with direct SQL and the non-target-state audit. Five qualification fault cases returned HALTED before a consequential write; no exact HALT footage was retained.',
evidenceHref: '/artifacts/json?source=%2Freference%2Ffrappe-lending-loan-application-standard-synthetic-v1%2Fmanifest.json',
evidenceLabel: 'Qualification pack',
methodologyHref: `${frappeCatalog.manifest.provenance.runtime_repository}/tree/${frappeCatalog.manifest.provenance.runtime_source_commit}/benchmark/frappe_lending`,
methodologyLabel: 'Reference method',
}),
referenceDemo({
id: 'insurance',
Expand Down
45 changes: 45 additions & 0 deletions data/referencePresentationAssets.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import openemrReplayBinding from '../public/reference/openemr-patient-registration-standard-synthetic-v1/replay/openemr-replay.media-binding.json' with { type: 'json' }
import openemrReplayContexts from '../public/reference/openemr-patient-registration-standard-synthetic-v1/replay/openemr-replay.contexts.json' with { type: 'json' }
import openemrReplayTimeline from '../public/reference/openemr-patient-registration-standard-synthetic-v1/replay/openemr-replay.control-overlay.v2.json' with { type: 'json' }
import frappeManifest from '../public/reference/frappe-lending-loan-application-standard-synthetic-v1/manifest.json' with { type: 'json' }
import frappeReplayBinding from '../public/reference/frappe-lending-loan-application-standard-synthetic-v1/replay/frappe-replay.media-binding.json' with { type: 'json' }
import frappeReplayContexts from '../public/reference/frappe-lending-loan-application-standard-synthetic-v1/replay/frappe-replay.contexts.json' with { type: 'json' }
import frappeReplayTimeline from '../public/reference/frappe-lending-loan-application-standard-synthetic-v1/replay/frappe-replay.control-overlay.v2.json' with { type: 'json' }
import openimisManifest from '../public/reference/openimis-eligibility-standard-synthetic-v1/manifest.json' with { type: 'json' }
import openimisHaltBinding from '../public/reference/openimis-eligibility-standard-synthetic-v1/fail-safe-halt/expired-halt.media-binding.json' with { type: 'json' }
import openimisHaltContexts from '../public/reference/openimis-eligibility-standard-synthetic-v1/fail-safe-halt/expired-halt.contexts.json' with { type: 'json' }
Expand All @@ -11,6 +15,8 @@ import openimisReplayTimeline from '../public/reference/openimis-eligibility-sta

const openemrRoot =
'/reference/openemr-patient-registration-standard-synthetic-v1'
const frappeRoot =
'/reference/frappe-lending-loan-application-standard-synthetic-v1'
const openimisRoot = '/reference/openimis-eligibility-standard-synthetic-v1'

/**
Expand All @@ -21,6 +27,11 @@ const openimisRoot = '/reference/openimis-eligibility-standard-synthetic-v1'
const referencePresentationAssets = Object.freeze({
schemaVersion: 3,
catalogs: Object.freeze([
Object.freeze({
applicationId: 'lending',
root: frappeRoot,
manifest: frappeManifest,
}),
Object.freeze({
applicationId: 'insurance',
root: openimisRoot,
Expand Down Expand Up @@ -65,6 +76,40 @@ const referencePresentationAssets = Object.freeze({
contexts: `${openemrRoot}/replay/openemr-replay.contexts.json`,
}),
}),
Object.freeze({
applicationId: 'lending',
modeId: 'verified_replay',
modeKind: 'replay',
media: Object.freeze({
kind: 'video',
src: `${frappeRoot}/replay/frappe-replay.mp4`,
mimeType: 'video/mp4',
poster: `${frappeRoot}/replay/frappe-replay.poster.png`,
sha256: frappeReplayBinding.media_sha256,
width: frappeReplayBinding.decoded_width,
height: frappeReplayBinding.decoded_height,
alt: 'OpenAdapt replaying a Standard-profile synthetic Loan Application workflow in Frappe Lending.',
}),
timeline: frappeReplayTimeline,
binding: Object.freeze({
evidencePackId: frappeReplayTimeline.evidence_pack_id,
mediaSha256: frappeReplayBinding.media_sha256,
mediaFrameCount: frappeReplayBinding.decoded_frame_count,
mediaFramePresentationTimesUs:
frappeReplayBinding.presentation_times_us,
browserViewportIsExact: true,
}),
contexts: Object.freeze(frappeReplayContexts.contexts),
networkObservation: null,
pack: Object.freeze({
root: frappeRoot,
manifest: `${frappeRoot}/manifest.json`,
inventory: `${frappeRoot}/inventory.json`,
timeline: `${frappeRoot}/replay/frappe-replay.control-overlay.v2.json`,
binding: `${frappeRoot}/replay/frappe-replay.media-binding.json`,
contexts: `${frappeRoot}/replay/frappe-replay.contexts.json`,
}),
}),
Object.freeze({
applicationId: 'insurance',
modeId: 'verified_replay',
Expand Down
Loading
Loading