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
This commit is contained in:
bizzkoot
@@ -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 { getPermissionQueue, activePermissionId, sendPermissionResponse } from "../stores/instances"
|
||||
import { getPermissionSessionId, getPermissionKind, getPermissionDisplayTitle, getPermissionMessageId, getPermissionCallId } from "../types/permission"
|
||||
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) || ""
|
||||
await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
|
||||
|
||||
const sid = getPermissionSessionId(permission) || ""
|
||||
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 :
|
||||
undefined
|
||||
typeof metadata.path === "string" ? metadata.path :
|
||||
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">
|
||||
Permission Required
|
||||
</h2>
|
||||
<Show when={queue().length > 1}>
|
||||
<span class="permission-modal-count">
|
||||
{queue().indexOf(activePermission()!) + 1} of {queue().length}
|
||||
</span>
|
||||
</Show>
|
||||
<div class="permission-modal-header-left">
|
||||
<h2 id="permission-modal-title" class="permission-modal-title">
|
||||
Permission Required
|
||||
</h2>
|
||||
<Show when={queue().length > 1}>
|
||||
<span class="permission-modal-count">
|
||||
{currentIndex() + 1} of {queue().length}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user