feat: enhance permission modal with tool details, queue nav, session nav, and responsive design

Modal Enhancements:
- Add accurate tool name extraction from message store (same method as inline chat)
- Display 'Tool Call [name]' badge (e.g., 'Tool Call read', 'Tool Call write')
- Add 'Go to Session ↗' button to navigate to originating session
- Add Prev/Next buttons for queue navigation with keyboard shortcuts (←/→)
- Add queue counter showing current position

Responsive Web Design:
- Portrait phones: 90vh max-height with safe margins (avoids browser URL bar)
- Landscape phones: 95vw with 50vh body scroll
- Tablets: adaptive layout
- Touch devices: 44-48px touch targets

Technical Changes:
- Import messageStoreBus for tool part lookup
- Query linked part.tool via permission messageId/callId
- Export setActivePermissionIdForInstance for queue navigation
- Add tool badge CSS styling

packages/ui/src/components/permission-approval-modal.tsx

@@ -1,10 +1,12 @@
 import { Show, createSignal, createMemo, createEffect, onCleanup, type Component } from "solid-js"
 import type { PermissionRequestLike } from "../types/permission"
-import { getPermissionSessionId, getPermissionKind, getPermissionDisplayTitle } from "../types/permission"
+import { getPermissionSessionId, getPermissionKind, getPermissionDisplayTitle, getPermissionMessageId, getPermissionCallId } from "../types/permission"
-import { getPermissionQueue, activePermissionId, sendPermissionResponse } from "../stores/instances"
+import { getPermissionQueue, activePermissionId, sendPermissionResponse, setActivePermissionIdForInstance } from "../stores/instances"
+import { setActiveSession } from "../stores/session-state"
+import { messageStoreBus } from "../stores/message-v2/bus"
 import { ToolCallDiffViewer } from "./diff-viewer"
 import { useTheme } from "../lib/theme"
-import { getRelativePath } from "./tool-call/utils"
+import { getRelativePath, getToolIcon, getToolName } from "./tool-call/utils"
 import { getLogger } from "../lib/logger"
 
 const log = getLogger("session")
@@ -22,7 +24,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
 
   const queue = createMemo(() => getPermissionQueue(props.instanceId))
   const activePermId = createMemo(() => activePermissionId().get(props.instanceId) ?? null)
-  
+
   const activePermission = createMemo((): PermissionRequestLike | null => {
     const id = activePermId()
     if (!id) return null
@@ -31,6 +33,92 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
 
   const hasActivePermission = createMemo(() => activePermission() !== null)
 
+  // Current position in queue
+  const currentIndex = createMemo(() => {
+    const perm = activePermission()
+    if (!perm) return -1
+    return queue().findIndex((p) => p.id === perm.id)
+  })
+
+  const hasPrev = createMemo(() => currentIndex() > 0)
+  const hasNext = createMemo(() => currentIndex() < queue().length - 1)
+
+  // Extract tool details - try to get actual tool name from message store first
+  const toolInfo = createMemo(() => {
+    const permission = activePermission()
+    if (!permission) return null
+
+    const metadata = ((permission as any).metadata || {}) as Record<string, unknown>
+    let toolName = "unknown"
+
+    // BEST METHOD: Try to get the actual tool from the linked message part
+    // This is how the inline chat gets it (via toolPart.tool)
+    const messageId = getPermissionMessageId(permission)
+    const callId = getPermissionCallId(permission)
+
+    if (messageId) {
+      const store = messageStoreBus.getInstance(props.instanceId)
+      if (store) {
+        const record = store.getMessage(messageId)
+        if (record) {
+          // Search through parts for the tool call matching this permission
+          for (const partId of record.partIds) {
+            const partRecord = record.parts[partId]
+            if (!partRecord?.data || partRecord.data.type !== "tool") continue
+
+            const part = partRecord.data as any
+            // Match by callId if available
+            const partCallId = part.callID ?? part.callId ?? part.toolCallID ?? part.toolCallId
+            if (callId && partCallId === callId && part.tool) {
+              toolName = part.tool
+              break
+            }
+            // If no callId match, just use the first tool part's name
+            if (!callId && part.tool) {
+              toolName = part.tool
+              break
+            }
+          }
+        }
+      }
+    }
+
+    // Fallback: Check metadata fields
+    if (toolName === "unknown") {
+      const metaToolName = (metadata.toolName as string) || (metadata.tool as string) || (metadata.action as string)
+      if (metaToolName) {
+        toolName = metaToolName.replace(/^opencode_/, "").toLowerCase()
+      }
+    }
+
+    // Fallback: Check permission kind for embedded action words
+    if (toolName === "unknown") {
+      const kind = getPermissionKind(permission).toLowerCase()
+      if (kind.includes("read")) toolName = "read"
+      else if (kind.includes("write")) toolName = "write"
+      else if (kind.includes("edit")) toolName = "edit"
+      else if (kind.includes("shell") || kind.includes("bash") || kind.includes("command")) toolName = "bash"
+      else if (kind.includes("patch")) toolName = "patch"
+    }
+
+    const command = metadata.command as string | undefined
+    const filePath = (metadata.filePath as string) || (metadata.path as string) || undefined
+    const input = metadata.input as Record<string, unknown> | undefined
+
+    return {
+      toolName,
+      icon: getToolIcon(toolName),
+      displayName: getToolName(toolName),
+      command,
+      filePath,
+      input
+    }
+  })
+
+  // Check if we can navigate to session
+  const sessionId = createMemo(() => getPermissionSessionId(activePermission()))
+  const canGoToSession = createMemo(() => !!sessionId())
+
   createEffect(() => {
     const permission = activePermission()
     if (!permission) {
@@ -45,7 +133,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
 
     const handler = (event: KeyboardEvent) => {
       if (submitting()) return
-      
+
       if (event.key === "Enter") {
         event.preventDefault()
         handleResponse("once")
@@ -58,6 +146,12 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
       } else if (event.key === "Escape") {
         event.preventDefault()
         props.onClose()
+      } else if (event.key === "ArrowLeft" && hasPrev()) {
+        event.preventDefault()
+        navigatePrev()
+      } else if (event.key === "ArrowRight" && hasNext()) {
+        event.preventDefault()
+        navigateNext()
       }
     }
 
@@ -65,6 +159,34 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
     onCleanup(() => document.removeEventListener("keydown", handler))
   })
 
+  function navigatePrev() {
+    const idx = currentIndex()
+    if (idx > 0) {
+      const prevPerm = queue()[idx - 1]
+      if (prevPerm) {
+        setActivePermissionIdForInstance(props.instanceId, prevPerm.id)
+      }
+    }
+  }
+
+  function navigateNext() {
+    const idx = currentIndex()
+    if (idx < queue().length - 1) {
+      const nextPerm = queue()[idx + 1]
+      if (nextPerm) {
+        setActivePermissionIdForInstance(props.instanceId, nextPerm.id)
+      }
+    }
+  }
+
+  function handleGoToSession() {
+    const sid = sessionId()
+    if (sid) {
+      setActiveSession(props.instanceId, sid)
+      props.onClose()
+    }
+  }
+
   async function handleResponse(response: "once" | "always" | "reject") {
     const permission = activePermission()
     if (!permission) return
@@ -73,9 +195,9 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
     setError(null)
 
     try {
-      const sessionId = getPermissionSessionId(permission) || ""
+      const sid = getPermissionSessionId(permission) || ""
-      await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
+      await sendPermissionResponse(props.instanceId, sid, permission.id, response)
-      
+
       // Wait a moment for queue to update before closing
       setTimeout(() => {
         const remaining = getPermissionQueue(props.instanceId)
@@ -105,10 +227,10 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
     const diffValue = typeof metadata.diff === "string" ? metadata.diff : null
     if (!diffValue || diffValue.trim().length === 0) return null
 
-    const diffPath = 
+    const diffPath =
       typeof metadata.filePath === "string" ? metadata.filePath :
-      typeof metadata.path === "string" ? metadata.path :
+        typeof metadata.path === "string" ? metadata.path :
-      undefined
+          undefined
 
     return { diffText: diffValue, filePath: diffPath }
   })
@@ -122,25 +244,74 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
               <p class="text-center text-gray-500">No pending permissions</p>
             </div>
           }>
+            {/* Header */}
             <div class="permission-modal-header">
-              <h2 id="permission-modal-title" class="permission-modal-title">
+              <div class="permission-modal-header-left">
-                Permission Required
+                <h2 id="permission-modal-title" class="permission-modal-title">
-              </h2>
+                  Permission Required
-              <Show when={queue().length > 1}>
+                </h2>
-                <span class="permission-modal-count">
+                <Show when={queue().length > 1}>
-                  {queue().indexOf(activePermission()!) + 1} of {queue().length}
+                  <span class="permission-modal-count">
-                </span>
+                    {currentIndex() + 1} of {queue().length}
-              </Show>
+                  </span>
+                </Show>
+              </div>
+              <div class="permission-modal-header-actions">
+                <Show when={canGoToSession()}>
+                  <button
+                    type="button"
+                    class="permission-modal-go-to-session"
+                    onClick={handleGoToSession}
+                    title="Go to the session where this permission was requested"
+                  >
+                    Go to Session ↗
+                  </button>
+                </Show>
+                <button
+                  type="button"
+                  class="permission-modal-close"
+                  onClick={props.onClose}
+                  aria-label="Close"
+                >
+                  ✕
+                </button>
+              </div>
             </div>
 
+            {/* Body - scrollable */}
             <div class="permission-modal-body">
+              {/* Permission type badge */}
               <div class="permission-modal-type">
                 {getPermissionKind(activePermission())}
               </div>
+
+              {/* Tool details section */}
+              <Show when={toolInfo()}>
+                {(info) => (
+                  <div class="permission-modal-tool-details">
+                    <div class="permission-modal-tool-header">
+                      <span class="permission-modal-tool-icon">🔧</span>
+                      <span class="permission-modal-tool-name">Tool Call</span>
+                      <code class="permission-modal-tool-badge">{info().toolName}</code>
+                      <Show when={info().filePath}>
+                        <span class="permission-modal-tool-path">{getRelativePath(info().filePath!)}</span>
+                      </Show>
+                    </div>
+                    <Show when={info().command}>
+                      <div class="permission-modal-tool-command">
+                        <code>{info().command}</code>
+                      </div>
+                    </Show>
+                  </div>
+                )}
+              </Show>
+
+              {/* Permission message */}
               <div class="permission-modal-message">
                 <code>{getPermissionDisplayTitle(activePermission())}</code>
               </div>
 
+              {/* Diff viewer */}
               <Show when={diffPayload()}>
                 {(payload) => (
                   <div class="permission-modal-diff">
@@ -153,7 +324,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                         filePath={payload().filePath}
                         theme={isDark() ? "dark" : "light"}
                         mode="split"
-                        onRendered={() => {}}
+                        onRendered={() => { }}
                       />
                     </div>
                   </div>
@@ -167,7 +338,33 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
               </Show>
             </div>
 
+            {/* Footer - sticky */}
             <div class="permission-modal-footer">
+              {/* Queue navigation */}
+              <Show when={queue().length > 1}>
+                <div class="permission-modal-nav">
+                  <button
+                    type="button"
+                    class="permission-modal-nav-button"
+                    disabled={!hasPrev() || submitting()}
+                    onClick={navigatePrev}
+                    aria-label="Previous permission"
+                  >
+                    ← Prev
+                  </button>
+                  <button
+                    type="button"
+                    class="permission-modal-nav-button"
+                    disabled={!hasNext() || submitting()}
+                    onClick={navigateNext}
+                    aria-label="Next permission"
+                  >
+                    Next →
+                  </button>
+                </div>
+              </Show>
+
+              {/* Action buttons */}
               <div class="permission-modal-buttons">
                 <button
                   type="button"
@@ -194,6 +391,8 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                   Deny
                 </button>
               </div>
+
+              {/* Keyboard shortcuts - hide on small screens */}
               <div class="permission-modal-shortcuts">
                 <span class="permission-modal-shortcut">
                   <kbd class="kbd">Enter</kbd> Allow once
@@ -205,7 +404,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                   <kbd class="kbd">D</kbd> Deny
                 </span>
                 <span class="permission-modal-shortcut">
-                  <kbd class="kbd">Esc</kbd> Close
+                  <kbd class="kbd">←→</kbd> Navigate
                 </span>
               </div>
             </div>

packages/ui/src/stores/instances.ts

@@ -562,6 +562,14 @@ function clearPermissionQueue(instanceId: string): void {
 
 
 
+function setActivePermissionIdForInstance(instanceId: string, permissionId: string): void {
+  setActivePermissionId((prev) => {
+    const next = new Map(prev)
+    next.set(instanceId, permissionId)
+    return next
+  })
+}
+
 async function sendPermissionResponse(
   instanceId: string,
   sessionId: string,
@@ -656,6 +664,7 @@ export {
   removePermissionFromQueue,
   clearPermissionQueue,
   sendPermissionResponse,
+  setActivePermissionIdForInstance,
   disconnectedInstance,
   acknowledgeDisconnectedInstance,
   fetchLspStatus,

packages/ui/src/styles/components/permission-notification.css

@@ -55,9 +55,12 @@
 }
 
 @keyframes permission-pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow: 0 2px 4px color-mix(in srgb, var(--status-warning) 30%, transparent);
   }
+
   50% {
     box-shadow: 0 2px 8px color-mix(in srgb, var(--status-warning) 60%, transparent), 0 0 16px color-mix(in srgb, var(--status-warning) 30%, transparent);
   }
@@ -113,9 +116,12 @@
 }
 
 @keyframes web-permission-pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-warning) 40%, transparent);
   }
+
   50% {
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-warning) 20%, transparent);
   }
@@ -151,6 +157,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -174,6 +181,7 @@
     opacity: 0;
     transform: translateY(-20px) scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -390,6 +398,302 @@
   box-shadow: inset 0 -2px 0 color-mix(in srgb, #000 10%, transparent);
 }
 
-/* Dark theme adjustments - already handled by CSS tokens above */
+/* Enhanced Header Layout */
-/* The token system automatically applies correct colors for dark mode via
+.permission-modal-header {
-   :root @media (prefers-color-scheme: dark) definitions */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--border-base);
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.permission-modal-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.permission-modal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.permission-modal-go-to-session {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--surface-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.permission-modal-go-to-session:hover {
+  background: var(--surface-base);
+  color: var(--text-primary);
+  border-color: var(--accent-primary);
+}
+
+.permission-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-md);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.permission-modal-close:hover {
+  background: var(--surface-secondary);
+  color: var(--text-primary);
+}
+
+/* Tool Details Section */
+.permission-modal-tool-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  background: var(--surface-secondary);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-md);
+}
+
+.permission-modal-tool-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.permission-modal-tool-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.permission-modal-tool-name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.permission-modal-tool-path {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  background: var(--surface-base);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-xs);
+}
+
+.permission-modal-tool-command {
+  padding: var(--space-sm);
+  background: var(--surface-base);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+}
+
+.permission-modal-tool-command code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Queue Navigation */
+.permission-modal-nav {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-md);
+  padding-bottom: var(--space-md);
+}
+
+.permission-modal-nav-button {
+  padding: var(--space-xs) var(--space-md);
+  background: var(--surface-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.permission-modal-nav-button:hover:not(:disabled) {
+  background: var(--surface-base);
+  color: var(--text-primary);
+  border-color: var(--accent-primary);
+}
+
+.permission-modal-nav-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.permission-modal-tool-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--surface-base);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+}
+
+/* ===== RESPONSIVE STYLES ===== */
+
+/* Portrait phone - near full screen with safe margins */
+@media (max-width: 480px) and (orientation: portrait) {
+  .permission-approval-modal {
+    width: 95vw;
+    max-height: 90vh;
+    max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    border-radius: var(--radius-md);
+    margin: 5vh auto;
+  }
+
+  .permission-approval-modal-backdrop {
+    padding: var(--space-md);
+  }
+
+  .permission-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    max-height: 50vh;
+  }
+
+  .permission-modal-buttons {
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .permission-modal-button {
+    min-height: 48px;
+    font-size: var(--font-size-md);
+  }
+
+  .permission-modal-shortcuts {
+    display: none;
+  }
+
+  .permission-modal-footer {
+    flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background: var(--surface-secondary);
+    border-top: 1px solid var(--border-base);
+  }
+
+  .permission-modal-go-to-session {
+    font-size: var(--font-size-xs);
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .permission-modal-diff-viewer {
+    max-height: 40vh;
+  }
+}
+
+/* Landscape phone */
+@media (max-width: 812px) and (orientation: landscape) {
+  .permission-approval-modal {
+    width: 95vw;
+    max-height: 95vh;
+    margin: auto;
+  }
+
+  .permission-modal-body {
+    overflow-y: auto;
+    max-height: 50vh;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .permission-modal-buttons {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .permission-modal-button {
+    min-height: 44px;
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .permission-modal-shortcuts {
+    display: none;
+  }
+
+  .permission-modal-diff-viewer {
+    max-height: 30vh;
+  }
+
+  .permission-modal-footer {
+    flex-shrink: 0;
+  }
+}
+
+/* Small tablets portrait */
+@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
+  .permission-approval-modal {
+    width: 95vw;
+    max-height: 90vh;
+  }
+
+  .permission-modal-body {
+    overflow-y: auto;
+    max-height: 60vh;
+  }
+
+  .permission-modal-button {
+    min-height: 44px;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .permission-modal-button {
+    min-height: 44px;
+  }
+
+  .permission-modal-nav-button {
+    min-height: 40px;
+    padding: var(--space-sm) var(--space-lg);
+  }
+
+  .permission-modal-go-to-session {
+    min-height: 36px;
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .permission-modal-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: var(--font-size-lg);
+  }
+}