fix(desktop): one permission at a time

3 files changed, 28 insertions, 10 deletions

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index a58e76890..ce479d8c1 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -378,9 +378,9 @@
 
   &[data-permission="true"] {
     position: sticky;
-    top: var(--sticky-header-height, 80px);
+    top: calc(2px + var(--sticky-header-height, 40px));
     bottom: 0px;
-    z-index: 10;
+    z-index: 20;
     border-radius: 6px;
     border: none;
     box-shadow: var(--shadow-xs-border-base);
@@ -391,6 +391,7 @@
       content: "";
       position: absolute;
       inset: -1.5px;
+      top: -5px;
       border-radius: 7.5px;
       border: 1.5px solid transparent;
       background:
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 83811494c..e43ffc322 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -364,7 +364,16 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
   const permission = createMemo(() => {
     const sessionID = props.message.sessionID
     const permissions = data.store.permission?.[sessionID] ?? []
-    return permissions.find((p) => p.callID === part.callID)
+    const next = permissions.reduce(
+      (result, perm) => {
+        if (!result) return perm
+        if (perm.id < result.id) return perm
+        return result
+      },
+      undefined as (typeof permissions)[number] | undefined,
+    )
+    if (!next) return undefined
+    return next.callID === part.callID ? next : undefined
   })
 
   const [forceOpen, setForceOpen] = createSignal(false)
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index e1a392bf0..a3ac5b0b4 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -195,25 +195,33 @@ export function SessionTurn(
 
   const permissions = createMemo(() => data.store.permission?.[props.sessionID] ?? [])
   const permissionCount = createMemo(() => permissions().length)
+  const nextPermission = createMemo(() => {
+    const items = permissions()
+    return items.reduce(
+      (result, perm) => {
+        if (!result) return perm
+        if (perm.id < result.id) return perm
+        return result
+      },
+      undefined as ReturnType<typeof permissions>[number] | undefined,
+    )
+  })
 
   const permissionParts = createMemo(() => {
     if (props.stepsExpanded) return [] as { part: ToolPart; message: AssistantMessage }[]
 
-    const items = permissions()
-    if (!items.length) return [] as { part: ToolPart; message: AssistantMessage }[]
-
-    const ids = new Set(items.map((perm) => perm.callID))
-    const result: { part: ToolPart; message: AssistantMessage }[] = []
+    const next = nextPermission()
+    if (!next) return [] as { part: ToolPart; message: AssistantMessage }[]
 
     for (const message of assistantMessages()) {
       const parts = data.store.part[message.id] ?? []
       for (const part of parts) {
         if (part?.type !== "tool") continue
         const tool = part as ToolPart
-        if (ids.has(tool.callID)) result.push({ part: tool, message })
+        if (tool.callID === next.callID) return [{ part: tool, message }]
       }
     }
-    return result
+    return [] as { part: ToolPart; message: AssistantMessage }[]
   })
 
   const shellModePart = createMemo(() => {