UPDATE Looking Glass references with deep-link URLs

Signed-off-by: ParleSec <mason@masonparle.com>

Author: ParleSec

docs/starlight/src/content/docs/using/flow-walkthroughs.mdx

@@ -9,7 +9,7 @@ Use this method to evaluate any flow with consistent evidence.
 
 1. **Choose a flow** from the [Protocol Catalog](/using/protocol-catalog/) and define the expected outcome.
 2. **Check prerequisites** -- some flows need an existing token (refresh, introspection), a prior credential (OID4VP), or SPIFFE mode enabled.
-3. **Execute** the flow in Looking Glass.
+3. **Execute** the flow in [Looking Glass](https://protocolsoup.com/looking-glass)
 4. **Inspect** the event timeline -- click each step to see full payloads.
 5. **Interpret** validation outcomes and security annotations.
 6. **Rerun** with one changed variable to confirm control behavior.
@@ -18,14 +18,14 @@ Use this method to evaluate any flow with consistent evidence.
 
 | Protocol | Flow | Why Start Here |
 |----------|------|---------------|
-| OAuth 2.0 | Authorization Code + PKCE | Core delegated authorization with modern security |
-| OIDC | Authorization Code + UserInfo | Identity layer on OAuth, ID token claims |
-| SAML 2.0 | SP-Initiated SSO | Enterprise SSO entry pattern, assertion inspection |
-| SCIM 2.0 | User Lifecycle | Full CRUD cycle with PATCH semantics |
-| SPIFFE | X.509-SVID Issuance | Workload identity fundamentals |
-| SSF | CAEP Session Revoked | Real-time security event stream with receiver response |
-| OID4VCI | Pre-Authorized Code | Credential issuance (SD-JWT VC, JWT VC, LDP VC) |
-| OID4VP | DCQL + direct_post | Verifier request and wallet submission |
+| OAuth 2.0 | [Authorization Code + PKCE](https://protocolsoup.com/looking-glass?protocol=oauth2&flow=authorization_code_pkce) | Core delegated authorization with modern security |
+| OIDC | [Authorization Code + UserInfo](https://protocolsoup.com/looking-glass?protocol=oidc&flow=oidc_authorization_code) | Identity layer on OAuth, ID token claims |
+| SAML 2.0 | [SP-Initiated SSO](https://protocolsoup.com/looking-glass?protocol=saml&flow=sp_initiated_sso) | Enterprise SSO entry pattern, assertion inspection |
+| SCIM 2.0 | [User Lifecycle](https://protocolsoup.com/looking-glass?protocol=scim&flow=user-lifecycle) | Full CRUD cycle with PATCH semantics |
+| SPIFFE | [X.509-SVID Issuance](https://protocolsoup.com/looking-glass?protocol=spiffe&flow=x509-svid-issuance) | Workload identity fundamentals |
+| SSF | [CAEP Session Revoked](https://protocolsoup.com/ssf-sandbox) | Real-time security event stream with receiver response |
+| OID4VCI | [Pre-Authorized Code](https://protocolsoup.com/looking-glass?protocol=oid4vci&flow=oid4vci-pre-authorized) | Credential issuance (SD-JWT VC, JWT VC, LDP VC) |
+| OID4VP | [DCQL + direct_post](https://protocolsoup.com/looking-glass?protocol=oid4vp&flow=oid4vp-direct-post) | Verifier request and wallet submission |
 
 ## Interpreting Outcomes
 

docs/starlight/src/content/docs/using/looking-glass.mdx

@@ -33,7 +33,7 @@ Every event includes an annotation with RFC references (for example "RFC 6749 Se
 
 ## Deep-Links and URL State
 
-Looking Glass supports shareable deep-links in the format `/looking-glass?protocol=X&flow=Y`. These links are generated by the palette search (cmd+K) and the **Share** button in the flow toolbar.
+Looking Glass supports shareable deep-links in the format `/looking-glass?protocol=X&flow=Y`. These links are generated by the palette search (cmd+K), the **Share** button in the flow toolbar, and flow detail pages ("Try in Looking Glass").
 
 URL query parameters follow a consume-and-clear lifecycle:
 

docs/starlight/src/content/docs/using/what-you-can-do.mdx

@@ -51,5 +51,5 @@ Use the same workflow across every protocol to compare:
 
 1. Browse the [Protocol Catalog](/using/protocol-catalog/).
 2. Pick one flow from [Flow Walkthroughs](/using/flow-walkthroughs/).
-3. Execute it in Looking Glass.
+3. Execute it in [Looking Glass](https://protocolsoup.com/looking-glass)
 4. Change one input and rerun to observe control behavior.

frontend/src/components/palette/runDispatch.ts

@@ -83,3 +83,15 @@ export function resolveFlowHandoff(result: PaletteResult): FlowRunHandoff | null
 export function buildLookingGlassPath({ protocolId, flowId }: FlowDeepLink): string {
   return `/looking-glass?protocol=${encodeURIComponent(protocolId)}&flow=${encodeURIComponent(flowId)}`
 }
+
+/**
+ * buildFlowExecutionPath returns the URL that opens a runnable flow in the
+ * correct execution surface. SSF flows use the dedicated sandbox; all other
+ * protocols deep-link into Looking Glass with the flow pre-selected.
+ */
+export function buildFlowExecutionPath({ protocolId, flowId }: FlowDeepLink): string {
+  if (protocolId === 'ssf') {
+    return '/ssf-sandbox'
+  }
+  return buildLookingGlassPath({ protocolId, flowId })
+}

frontend/src/views/Callback.tsx

@@ -13,6 +13,7 @@
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { CheckCircle, XCircle, Loader2, ArrowLeft, AlertTriangle } from 'lucide-react'
+import { buildLookingGlassPath } from '@/components/palette/runDispatch'
 
 type CallbackType = 'authorization_code' | 'implicit' | 'hybrid' | 'error' | 'unknown'
 
@@ -68,6 +69,10 @@ export function Callback() {
     }
   }, [])
 
+  const lookingGlassReturnPath = callbackData
+    ? lookingGlassPathForCallback(callbackData)
+    : buildLookingGlassPath({ protocolId: 'oauth2', flowId: 'authorization_code_pkce' })
+
   return (
     <div className="min-h-[80vh] flex items-center justify-center">
         <div className="glass rounded-xl p-8 max-w-lg w-full">
@@ -96,7 +101,7 @@ export function Callback() {
 
               {!window.opener && (
                 <Link
-                  href="/looking-glass"
+                  href={lookingGlassReturnPath}
                   className="inline-flex items-center gap-2 mt-6 px-4 py-2 rounded-lg bg-accent-cyan/10 border border-accent-cyan/20 text-accent-cyan hover:bg-accent-cyan/20 transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4" />
@@ -134,7 +139,7 @@ export function Callback() {
               )}
 
               <Link
-                href="/looking-glass"
+                href={lookingGlassReturnPath}
                 className="inline-flex items-center gap-2 mt-6 px-4 py-2 rounded-lg bg-surface-800 border border-white/10 text-surface-300 hover:text-white hover:bg-surface-700 transition-colors"
               >
                 <ArrowLeft className="w-4 h-4" />
@@ -239,6 +244,19 @@ function extractCallbackData(
   return { type: 'unknown' }
 }
 
+function lookingGlassPathForCallback(data: CallbackData): string {
+  switch (data.type) {
+    case 'implicit':
+      return buildLookingGlassPath({ protocolId: 'oidc', flowId: 'oidc_implicit' })
+    case 'hybrid':
+      return buildLookingGlassPath({ protocolId: 'oidc', flowId: 'oidc_hybrid' })
+    case 'authorization_code':
+      return buildLookingGlassPath({ protocolId: 'oauth2', flowId: 'authorization_code_pkce' })
+    default:
+      return buildLookingGlassPath({ protocolId: 'oauth2', flowId: 'authorization_code_pkce' })
+  }
+}
+
 /**
  * Send callback data to parent window
  */

frontend/src/views/FlowDetail.tsx

@@ -15,6 +15,7 @@ import { FlowDefinition, FlowStep } from '../protocols/registry'
 import { CODE_EXAMPLES } from '../protocols/examples'
 import { ParameterExplainer } from '../components/ParameterExplainer'
 import { ProtocolReferences } from '../components/ProtocolReferences'
+import { buildFlowExecutionPath } from '@/components/palette/runDispatch'
 import { getCatalogFlow, getFlowRouteId } from '../protocols/presentation/protocol-catalog-data'
 
 interface FlowDetailProps {
@@ -181,6 +182,10 @@ export function FlowDetail({
   }
 
   const badges = getBadges()
+  const flowExecutionPath = buildFlowExecutionPath({
+    protocolId,
+    flowId: currentFlowId,
+  })
 
   return (
     <div className="max-w-4xl mx-auto space-y-4 sm:space-y-6 px-1 sm:px-0">
@@ -214,7 +219,7 @@ export function FlowDetail({
           </div>
 
           <Link
-            href={protocolId === 'ssf' ? '/ssf-sandbox' : '/looking-glass'}
+            href={flowExecutionPath}
             className={`inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-gradient-to-r ${
               protocolId === 'ssf' 
                 ? 'from-amber-500/20 to-orange-500/20 border-amber-500/30 text-amber-400 hover:from-amber-500/30 hover:to-orange-500/30' 
@@ -234,7 +239,7 @@ export function FlowDetail({
           </div>
 
           <Link
-            href={protocolId === 'ssf' ? '/ssf-sandbox' : '/looking-glass'}
+            href={flowExecutionPath}
             className={`flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r ${
               protocolId === 'ssf' 
                 ? 'from-amber-500/20 to-orange-500/20 border-amber-500/30 text-amber-400 hover:from-amber-500/30 hover:to-orange-500/30' 
@@ -388,7 +393,7 @@ export function FlowDetail({
           <span className="sm:hidden">Back</span>
         </Link>
         <Link
-          href={protocolId === 'ssf' ? '/ssf-sandbox' : '/looking-glass'}
+          href={flowExecutionPath}
           className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm text-surface-400 hover:text-white transition-colors"
         >
           <span className="hidden sm:inline">{protocolId === 'ssf' ? 'Open SSF Sandbox' : 'Open Looking Glass'}</span>

frontend/src/views/ProtocolDemo.tsx

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react'
 import type { FlowDefinition, Protocol } from '../protocols/registry'
 import { protocolMeta } from '../protocols/registry'
+import { buildFlowExecutionPath } from '@/components/palette/runDispatch'
 import { FLOW_PRESENTATION_META, getFeatureDescription } from '../protocols/presentation/flow-meta'
 import { getCatalogProtocol, getFlowRouteId } from '../protocols/presentation/protocol-catalog-data'
 import { ProtocolReferences } from '../components/ProtocolReferences'
@@ -44,6 +45,11 @@ export function ProtocolDemo({
   const recommendedFlow = flows.find(f => FLOW_PRESENTATION_META[f.id]?.recommended) || flows[0]
 
   const catalogEntry = getCatalogProtocol(protocolId)
+  const executionPath = recommendedFlow
+    ? buildFlowExecutionPath({ protocolId, flowId: recommendedFlow.id })
+    : protocolId === 'ssf'
+      ? '/ssf-sandbox'
+      : '/looking-glass'
 
   return (
     <div className="space-y-6 sm:space-y-8 px-1 sm:px-0">
@@ -77,7 +83,7 @@ export function ProtocolDemo({
           </Link>
         )}
         <Link
-          href={protocolId === 'ssf' ? '/ssf-sandbox' : '/looking-glass'}
+          href={executionPath}
           className="inline-flex items-center justify-center gap-2 px-4 sm:px-5 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm sm:text-base font-medium hover:bg-white/10 transition-colors"
         >
           {protocolId === 'ssf' ? <Radio className="w-4 h-4" /> : <Eye className="w-4 h-4" />}