From 3f297319d857022144b4f7d6ce64f278cefdb6c2 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik.kalyanaraman@vercel.com>
Date: Mon, 13 Apr 2026 20:42:18 -0700
Subject: [PATCH 1/3] decryption flow for detail panel data inspector

---
 .../sidebar/entity-detail-panel.tsx           | 185 +++++++++---------
 1 file changed, 95 insertions(+), 90 deletions(-)

diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index d2defbb172..833d8b342b 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -6,6 +6,7 @@ import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
+import { DecryptClickContext } from '../ui/data-inspector';
 import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
@@ -405,103 +406,107 @@ export function EntityDetailPanel({
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
-        {hasPendingActions && (
-          <div
-            className="mb-4 rounded-lg border p-2"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-              backgroundColor: 'var(--ds-gray-100)',
-            }}
-          >
-            <p
-              className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
-              style={{ color: 'var(--ds-gray-700)' }}
+      <DecryptClickContext.Provider
+        value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+      >
+        <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
+          {hasPendingActions && (
+            <div
+              className="mb-4 rounded-lg border p-2"
+              style={{
+                borderColor: 'var(--ds-gray-300)',
+                backgroundColor: 'var(--ds-gray-100)',
+              }}
             >
-              Actions
-            </p>
-            <div className="flex flex-col gap-2">
-              {/* Wake up button for pending sleep calls */}
-              {resource === 'sleep' && canWakeUp && (
-                <button
-                  type="button"
-                  onClick={handleWakeUp}
-                  disabled={stoppingSleep}
-                  className={clsx(
-                    'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
-                    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-                    stoppingSleep
-                      ? 'opacity-50 cursor-not-allowed'
-                      : 'cursor-pointer'
-                  )}
-                  style={{
-                    background: 'var(--ds-amber-200)',
-                    color: 'var(--ds-amber-900)',
-                  }}
-                >
-                  <Zap className="h-4 w-4" />
-                  {stoppingSleep ? 'Waking up...' : 'Wake Up Sleep'}
-                </button>
-              )}
-
-              {/* Resolve hook button for pending hooks */}
-              {resource === 'hook' && canResolveHook && (
-                <button
-                  type="button"
-                  onClick={() => setShowResolveHookModal(true)}
-                  disabled={resolvingHook}
-                  className={clsx(
-                    'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
-                    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-                    resolvingHook
-                      ? 'opacity-50 cursor-not-allowed'
-                      : 'cursor-pointer'
-                  )}
-                  style={{
-                    background: 'var(--ds-gray-1000)',
-                    color: 'var(--ds-background-100)',
-                  }}
-                >
-                  <Send className="h-4 w-4" />
-                  Resolve Hook
-                </button>
-              )}
+              <p
+                className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
+                style={{ color: 'var(--ds-gray-700)' }}
+              >
+                Actions
+              </p>
+              <div className="flex flex-col gap-2">
+                {/* Wake up button for pending sleep calls */}
+                {resource === 'sleep' && canWakeUp && (
+                  <button
+                    type="button"
+                    onClick={handleWakeUp}
+                    disabled={stoppingSleep}
+                    className={clsx(
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+                      stoppingSleep
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'cursor-pointer'
+                    )}
+                    style={{
+                      background: 'var(--ds-amber-200)',
+                      color: 'var(--ds-amber-900)',
+                    }}
+                  >
+                    <Zap className="h-4 w-4" />
+                    {stoppingSleep ? 'Waking up...' : 'Wake Up Sleep'}
+                  </button>
+                )}
+
+                {/* Resolve hook button for pending hooks */}
+                {resource === 'hook' && canResolveHook && (
+                  <button
+                    type="button"
+                    onClick={() => setShowResolveHookModal(true)}
+                    disabled={resolvingHook}
+                    className={clsx(
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+                      resolvingHook
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'cursor-pointer'
+                    )}
+                    style={{
+                      background: 'var(--ds-gray-1000)',
+                      color: 'var(--ds-background-100)',
+                    }}
+                  >
+                    <Send className="h-4 w-4" />
+                    Resolve Hook
+                  </button>
+                )}
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        <div className="space-y-4">
-          <section>
-            <h3
-              className="mb-2 text-[13px] font-medium uppercase tracking-wide"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              Details
-            </h3>
-            <AttributePanel
-              data={displayData}
-              moduleSpecifier={moduleSpecifier}
-              expiredAt={run.expiredAt}
-              isLoading={loading}
-              error={error ?? undefined}
-              onStreamClick={onStreamClick}
-              onDecrypt={onDecrypt}
-              isDecrypting={isDecrypting}
-              resource={resource}
-            />
-          </section>
-
-          {resource !== 'run' && rawEvents && (
+          <div className="space-y-4">
             <section>
-              <EventsList
-                events={rawEvents}
-                onLoadEventData={onLoadEventData}
-                encryptionKey={encryptionKey}
+              <h3
+                className="mb-2 text-[13px] font-medium uppercase tracking-wide"
+                style={{ color: 'var(--ds-gray-700)' }}
+              >
+                Details
+              </h3>
+              <AttributePanel
+                data={displayData}
+                moduleSpecifier={moduleSpecifier}
+                expiredAt={run.expiredAt}
+                isLoading={loading}
+                error={error ?? undefined}
+                onStreamClick={onStreamClick}
+                onDecrypt={onDecrypt}
+                isDecrypting={isDecrypting}
+                resource={resource}
               />
             </section>
-          )}
+
+            {resource !== 'run' && rawEvents && (
+              <section>
+                <EventsList
+                  events={rawEvents}
+                  onLoadEventData={onLoadEventData}
+                  encryptionKey={encryptionKey}
+                />
+              </section>
+            )}
+          </div>
         </div>
-      </div>
+      </DecryptClickContext.Provider>
 
       {/* Resolve Hook Modal */}
       <ResolveHookModal

From a49cec3a3b963472d4cf60a7d2750c951f267dfd Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik.kalyanaraman@vercel.com>
Date: Mon, 13 Apr 2026 20:43:29 -0700
Subject: [PATCH 2/3] decryption flow for detail panel data inspector

---
 .changeset/vast-oranges-fail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/vast-oranges-fail.md

diff --git a/.changeset/vast-oranges-fail.md b/.changeset/vast-oranges-fail.md
new file mode 100644
index 0000000000..5471ebeb2f
--- /dev/null
+++ b/.changeset/vast-oranges-fail.md
@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Support in-line decryption for data inspector on the detail panel

From f088de945ecff2afdc8433873ba6ab1dc21b594a Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik.kalyanaraman@vercel.com>
Date: Mon, 13 Apr 2026 20:52:47 -0700
Subject: [PATCH 3/3] update spinner

---
 .../src/components/sidebar/attribute-panel.tsx        |  9 ++-------
 .../web-shared/src/components/ui/data-inspector.tsx   | 11 ++---------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index 04ac416f9b..57ae04d2f5 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -4,6 +4,7 @@ import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
+import { Spinner } from '../ui/spinner';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
@@ -197,13 +198,7 @@ function EncryptedFieldBlock() {
         title="Click to decrypt"
       >
         {ctx.isDecrypting ? (
-          <span
-            className="h-3 w-3 animate-spin rounded-full border-2"
-            style={{
-              borderColor: 'var(--ds-gray-400)',
-              borderTopColor: 'var(--ds-gray-700)',
-            }}
-          />
+          <Spinner size={12} />
         ) : (
           <Lock className="h-3 w-3" />
         )}
diff --git a/packages/web-shared/src/components/ui/data-inspector.tsx b/packages/web-shared/src/components/ui/data-inspector.tsx
index c658fefec8..4fc236aaf1 100644
--- a/packages/web-shared/src/components/ui/data-inspector.tsx
+++ b/packages/web-shared/src/components/ui/data-inspector.tsx
@@ -10,6 +10,7 @@
 
 import { Lock } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Spinner } from './spinner';
 import {
   ObjectInspector,
   ObjectLabel,
@@ -110,15 +111,7 @@ function EncryptedInlineLabel() {
         title="Click to decrypt"
       >
         {ctx.isDecrypting ? (
-          <span
-            className="h-3 w-3 animate-spin rounded-full border-2"
-            style={{
-              display: 'inline-block',
-              flexShrink: 0,
-              borderColor: 'var(--ds-gray-400)',
-              borderTopColor: 'var(--ds-gray-700)',
-            }}
-          />
+          <Spinner size={12} />
         ) : (
           <Lock
             className="h-3 w-3"