@flamingo-stack/openframe-frontend-core 0.0.525-1675.4425.1 → 0.0.525

package/src/components/ui/json-detail-list.tsx

@@ -70,25 +70,31 @@ export interface JsonDetailListProps {
 }
 
 export function JsonDetailList({ data, depth = 0 }: JsonDetailListProps) {
+  let parseFailed = false
   const obj =
     typeof data === 'string'
       ? (() => {
           try {
             return JSON.parse(data) as unknown
           } catch {
+            parseFailed = true
             return null
           }
         })()
       : data
 
   if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
-    // Not an object — render whatever it is faithfully.
-    return typeof data === 'string' ? (
-      <p className="whitespace-pre-wrap text-h6 text-ods-text-primary">{data}</p>
-    ) : (
-      <pre className="whitespace-pre-wrap text-code text-ods-text-secondary">
-        {JSON.stringify(data, null, 2)}
-      </pre>
+    // A string that ISN'T JSON is prose — show it as-is.
+    if (typeof data === 'string' && parseFailed) {
+      return <p className="whitespace-pre-wrap text-h6 text-ods-text-primary">{data}</p>
+    }
+    // Everything else is a real (parsed or given) non-object VALUE — an array,
+    // scalar, or null. Render the value through `Value`, never the source
+    // string: `'["a","b"]'` must render as the array, not as raw JSON text.
+    return (
+      <div className="text-h6">
+        <Value value={obj} depth={depth} />
+      </div>
     )
   }
 

package/src/components/ui/modal-guarded-close.tsx

@@ -41,6 +41,9 @@ export function useConfirm() {
     resolve: (ok: boolean) => void
   } | null>(null)
   const askingRef = React.useRef(false)
+  // Mirror of the active request, so unmount cleanup can settle it without
+  // depending on (already-frozen) state.
+  const pendingRef = React.useRef<{ resolve: (ok: boolean) => void } | null>(null)
   const ask = React.useCallback((title: string, body: string) => {
     return new Promise<boolean>((resolve) => {
       if (askingRef.current) {
@@ -48,19 +51,34 @@ export function useConfirm() {
         return
       }
       askingRef.current = true
-      setPending({ title, body, resolve })
+      const entry = { title, body, resolve }
+      pendingRef.current = entry
+      setPending(entry)
       setOpen(true)
     })
   }, [])
   const decide = React.useCallback(
     (ok: boolean) => {
       askingRef.current = false
+      // Clear the ref FIRST so a later unmount cleanup can't re-resolve a
+      // request the user already decided.
+      pendingRef.current = null
       setOpen(false)
       pending?.resolve(ok)
       setPending(null)
     },
     [pending]
   )
+  // Host unmounted while the confirmation was open: the decision UI is gone,
+  // so settle the promise as "no" — otherwise the caller awaits forever.
+  React.useEffect(
+    () => () => {
+      pendingRef.current?.resolve(false)
+      pendingRef.current = null
+      askingRef.current = false
+    },
+    []
+  )
 
   const dialog = pending ? (
     <ModalV2 isOpen={open} onClose={() => decide(false)}>

package/src/components/ui/modal-v2.tsx

@@ -153,8 +153,15 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       const handleKeyDown = (event: KeyboardEvent) => {
         // A nested Radix layer (Select, DropdownMenu) preventDefaults the
         // Escape it consumes — without this check, closing a select inside
-        // the modal closed the WHOLE modal.
-        if (event.key === 'Escape' && !event.defaultPrevented) {
+        // the modal closed the WHOLE modal. The stack check keeps Escape a
+        // topmost-only affair: every open modal registers this listener, so
+        // with stacked modals (confirm above a form) one Escape would
+        // otherwise close BOTH.
+        if (
+          event.key === 'Escape' &&
+          !event.defaultPrevented &&
+          modalStack[modalStack.length - 1] === stackIdRef.current
+        ) {
           onClose()
         }
       }

package/src/stories/DropdownButton.stories.tsx

@@ -27,7 +27,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="flex min-h-[320px] items-start justify-center p-8">
+      <div className="flex min-h-80 items-start justify-center p-8">
         <Story />
       </div>
     ),

package/src/stories/InfoHint.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {
     children: 'Judged rules are evaluated by an LLM against the diff; deterministic rules run as code.',
   },
   render: args => (
-    <div className="flex min-h-[160px] items-center justify-center">
+    <div className="flex min-h-40 items-center justify-center">
       <span className="inline-flex items-center gap-1.5 text-h6 text-ods-text-primary">
         Judged rules
         <InfoHint {...args} />
@@ -49,7 +49,7 @@ export const InALabelRow: Story = {
     children: 'Placeholder',
   },
   render: () => (
-    <div className="flex min-h-[160px] flex-col items-start justify-center gap-[var(--spacing-system-sf)]">
+    <div className="flex min-h-40 flex-col items-start justify-center gap-[var(--spacing-system-sf)]">
       <span className="inline-flex items-center gap-1.5 text-h6 text-ods-text-primary">
         Observe
         <InfoHint label="Observe">Runs the rule and records the outcome without blocking the PR.</InfoHint>