UPDATE oid4vp credential error handling

- mismatch profile and presets are caught before submission
- Improvements to mobile experience
- docs updated

Author: ParleSec

docs/packages/wallet.md

@@ -82,6 +82,7 @@ services:
 - **`session isolation key is required`:** supply `looking_glass_session_id` or `request_id` in `/submit`.
 - **`response_uri ... does not match trusted verifier callback`:** request object callback does not match `WALLET_TARGET_BASE_URL`.
 - **`credential_jwt sub does not match wallet_subject`:** provided credential is bound to a different holder.
+- **`wallet does not have a credential that satisfies the presentation request`:** ensure the selected OID4VCI credential profile issues a format requested by the OID4VP DCQL preset, or provide a matching `credential_jwt`.
 - **Upstream timeout/failure:** check `WALLET_HTTP_TIMEOUT` and VC target health.
 
 ## Versioning And Tags

docs/starlight/src/content/docs/protocols/oid4vp.mdx

@@ -25,6 +25,12 @@ description: "OpenID4VP verifier flows with DCQL request contracts, direct_post
 - **DCQL direct_post** -- Create request object, hand off to wallet, evaluate verifier policy
 - **DCQL direct_post.jwt** -- Same flow with encrypted response transport and inner JWT validation
 
+## Wallet Credential Profile Matching
+
+The Looking Glass OID4VP controls preflight the selected VC credential profile against the DCQL preset before wallet submission. If the preset requests `dc+sd-jwt`, `jwt_vc_json`, `jwt_vc_json-ld`, or `ldp_vc`, the wallet auto-issue profile must issue one of those formats. Otherwise the wallet action is blocked with an explanation, because the wallet cannot build a matching `vp_token` from the selected profile.
+
+When a `credential_jwt` is pasted manually, the UI allows submission but warns when the selected auto-issue profile does not match the DCQL format. The wallet and verifier still validate the actual credential and will reject the presentation if the credential evidence does not satisfy the request.
+
 ## Example DCQL Query
 
 Example DCQL query requesting a `university_degree` credential with `degree` and `graduation_year` claims:

frontend/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/src/lookingglass/components/OID4VPWalletModal.tsx

@@ -18,6 +18,9 @@ interface OID4VPWalletModalProps {
   walletHandoffQRCodeError: string | null
   walletSubjectInput: string
   onWalletSubjectInputChange: (value: string) => void
+  credentialProfileLabel: string
+  walletCompatibilityError: string | null
+  walletCompatibilityWarning: string | null
   credentialJWTInput: string
   onCredentialJWTInputChange: (value: string) => void
   disclosureOptions: string[]
@@ -47,6 +50,9 @@ export function OID4VPWalletModal({
   walletHandoffQRCodeError,
   walletSubjectInput,
   onWalletSubjectInputChange,
+  credentialProfileLabel,
+  walletCompatibilityError,
+  walletCompatibilityWarning,
   credentialJWTInput,
   onCredentialJWTInputChange,
   disclosureOptions,
@@ -62,6 +68,8 @@ export function OID4VPWalletModal({
   submitMessage,
   onSubmitWalletResponse,
 }: OID4VPWalletModalProps) {
+  const hasWalletGateError = Boolean(walletCompatibilityError)
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -116,6 +124,11 @@ export function OID4VPWalletModal({
                   <span className="text-surface-400">did:web allowlist:</span> <code>{didWebAllowedHosts.join(', ')}</code>
                 </div>
               )}
+              {credentialProfileLabel && (
+                <div>
+                  <span className="text-surface-400">auto-issue profile:</span> <code>{credentialProfileLabel}</code>
+                </div>
+              )}
             </div>
           </div>
 
@@ -167,6 +180,19 @@ export function OID4VPWalletModal({
             />
           </div>
 
+          {(walletCompatibilityError || walletCompatibilityWarning) && (
+            <div className={`rounded-lg border p-3 text-[11px] sm:text-xs leading-relaxed ${
+              walletCompatibilityError
+                ? 'border-red-500/30 bg-red-500/5 text-red-300'
+                : 'border-amber-500/30 bg-amber-500/5 text-amber-300'
+            }`}>
+              <div className="font-medium mb-1">
+                {walletCompatibilityError ? 'Wallet credential gate failed' : 'Wallet credential gate warning'}
+              </div>
+              <div>{walletCompatibilityError || walletCompatibilityWarning}</div>
+            </div>
+          )}
+
           <div className="space-y-1.5">
             <div className="text-xs sm:text-sm font-medium text-surface-300">Selective disclosure claims</div>
             <p className="text-[11px] sm:text-xs text-surface-400">
@@ -226,9 +252,9 @@ export function OID4VPWalletModal({
               <div className="text-[11px] sm:text-xs text-violet-200 font-medium">Expert stepwise ceremony</div>
               <div className="grid grid-cols-2 gap-2">
                 <button type="button" onClick={() => onExecuteWalletStep('bootstrap')} disabled={submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">1) Bootstrap wallet</button>
-                <button type="button" onClick={() => onExecuteWalletStep('issue_credential')} disabled={submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">2) Issue credential</button>
-                <button type="button" onClick={() => onExecuteWalletStep('build_presentation')} disabled={!canSubmitWalletInteraction || submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">3) Build vp_token</button>
-                <button type="button" onClick={() => onExecuteWalletStep('submit_response')} disabled={!canSubmitWalletInteraction || submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">4) Submit response</button>
+                <button type="button" onClick={() => onExecuteWalletStep('issue_credential')} disabled={hasWalletGateError || submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">2) Issue credential</button>
+                <button type="button" onClick={() => onExecuteWalletStep('build_presentation')} disabled={!canSubmitWalletInteraction || hasWalletGateError || submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">3) Build vp_token</button>
+                <button type="button" onClick={() => onExecuteWalletStep('submit_response')} disabled={!canSubmitWalletInteraction || hasWalletGateError || submitPending} className="px-2 py-1.5 rounded border border-white/10 bg-surface-900 text-[11px] sm:text-xs text-surface-200 hover:text-white disabled:opacity-50">4) Submit response</button>
               </div>
               <div className="text-[11px] sm:text-xs text-surface-300">
                 Last step: <code>{stepwiseLastStep || 'none'}</code>
@@ -237,7 +263,7 @@ export function OID4VPWalletModal({
             </div>
           )}
 
-          {walletMode === 'one_click' && !canSubmitWalletInteraction && (
+          {walletMode === 'one_click' && !canSubmitWalletInteraction && !walletCompatibilityError && (
             <p className="text-[11px] sm:text-xs text-amber-400">
               Missing request context. Re-run OID4VP request creation.
             </p>
@@ -271,7 +297,7 @@ export function OID4VPWalletModal({
           {walletMode === 'one_click' && (
             <button
               onClick={onSubmitWalletResponse}
-              disabled={!canSubmitWalletInteraction || submitPending}
+              disabled={!canSubmitWalletInteraction || hasWalletGateError || submitPending}
               className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-violet-500/20 border border-violet-500/30 text-violet-200 text-xs sm:text-sm font-medium hover:bg-violet-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {submitPending && <Loader2 className="w-4 h-4 animate-spin" />}

frontend/src/protocols/config/oid4vp.ts

@@ -7,6 +7,11 @@ export interface OID4VPDCQLPreset {
   query: string
 }
 
+export interface OID4VPDCQLCredentialRequirement {
+  id: string
+  format: string
+}
+
 export const OID4VP_DEFAULT_DISCLOSURE_HINTS = [
   'degree',
   'graduation_year',
@@ -133,6 +138,46 @@ export const OID4VP_DCQL_PRESETS: OID4VPDCQLPreset[] = [
 
 export const DEFAULT_OID4VP_DCQL_PRESET_ID = OID4VP_DCQL_PRESETS[0]?.id || 'degree-core'
 
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return null
+  }
+  return value as Record<string, unknown>
+}
+
+export function parseOID4VPDCQLCredentialRequirements(rawQuery: string): OID4VPDCQLCredentialRequirement[] {
+  const normalized = rawQuery.trim()
+  if (!normalized) {
+    return []
+  }
+
+  const payload = asRecord(JSON.parse(normalized))
+  if (!payload || !Array.isArray(payload.credentials)) {
+    return []
+  }
+
+  return payload.credentials
+    .map((rawCredential) => {
+      const credential = asRecord(rawCredential)
+      if (!credential) {
+        return null
+      }
+      return {
+        id: typeof credential.id === 'string' ? credential.id.trim() : '',
+        format: typeof credential.format === 'string' ? credential.format.trim() : '',
+      }
+    })
+    .filter((requirement): requirement is OID4VPDCQLCredentialRequirement => Boolean(requirement))
+}
+
+export function getOID4VPDCQLCredentialFormats(rawQuery: string): string[] {
+  const formats = parseOID4VPDCQLCredentialRequirements(rawQuery)
+    .map((requirement) => requirement.format)
+    .filter(Boolean)
+
+  return Array.from(new Set(formats)).sort()
+}
+
 export function parseSDJWTDisclosureClaimNames(rawCredential: string): string[] {
   const normalized = rawCredential.trim()
   if (!normalized) {