feat(ui): rework permission center to reuse tool call view
This commit is contained in:
Shantur Rathore
@@ -1222,6 +1222,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
||||
</IconButton>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-1 justify-center">
|
||||
<PermissionNotificationBanner
|
||||
instanceId={props.instance.id}
|
||||
onClick={() => setPermissionModalOpen(true)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="connection-status-button px-2 py-0.5 text-xs"
|
||||
@@ -1241,12 +1245,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
||||
<span class="status-dot" />
|
||||
</span>
|
||||
|
||||
<div style={{ flex: "0 0 auto", display: "flex", "align-items": "center" }}>
|
||||
<PermissionNotificationBanner
|
||||
instanceId={props.instance.id}
|
||||
onClick={() => setPermissionModalOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<IconButton
|
||||
@@ -1302,6 +1301,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
||||
|
||||
|
||||
<div class="session-toolbar-center flex-1 flex items-center justify-center gap-2 min-w-[160px]">
|
||||
<PermissionNotificationBanner
|
||||
instanceId={props.instance.id}
|
||||
onClick={() => setPermissionModalOpen(true)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="connection-status-button px-2 py-0.5 text-xs"
|
||||
@@ -1315,12 +1318,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
|
||||
<Kbd shortcut="cmd+shift+p" />
|
||||
</span>
|
||||
|
||||
<div style={{ flex: "0 0 auto", display: "flex", "align-items": "center" }}>
|
||||
<PermissionNotificationBanner
|
||||
instanceId={props.instance.id}
|
||||
onClick={() => setPermissionModalOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -1,15 +1,10 @@
|
||||
import { Show, createSignal, createMemo, createEffect, onCleanup, type Component } from "solid-js"
|
||||
import { For, Show, createMemo, createSignal, createEffect, onCleanup, type Component } from "solid-js"
|
||||
import type { PermissionRequestLike } from "../types/permission"
|
||||
import { getPermissionSessionId, getPermissionKind, getPermissionDisplayTitle, getPermissionMessageId, getPermissionCallId } from "../types/permission"
|
||||
import { getPermissionQueue, activePermissionId, sendPermissionResponse, setActivePermissionIdForInstance } from "../stores/instances"
|
||||
import { setActiveSession } from "../stores/session-state"
|
||||
import { getPermissionCallId, getPermissionDisplayTitle, getPermissionKind, getPermissionMessageId, getPermissionSessionId } from "../types/permission"
|
||||
import { activePermissionId, getPermissionQueue } from "../stores/instances"
|
||||
import { loadMessages, setActiveSession } from "../stores/sessions"
|
||||
import { messageStoreBus } from "../stores/message-v2/bus"
|
||||
import { ToolCallDiffViewer } from "./diff-viewer"
|
||||
import { useTheme } from "../lib/theme"
|
||||
import { getRelativePath, getToolIcon, getToolName } from "./tool-call/utils"
|
||||
import { getLogger } from "../lib/logger"
|
||||
|
||||
const log = getLogger("session")
|
||||
import ToolCall from "./tool-call"
|
||||
|
||||
interface PermissionApprovalModalProps {
|
||||
instanceId: string
|
||||
@@ -17,201 +12,113 @@ interface PermissionApprovalModalProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
type ResolvedToolCall = {
|
||||
messageId: string
|
||||
sessionId: string
|
||||
toolPart: Extract<import("../types/message").ClientPart, { type: "tool" }>
|
||||
messageVersion: number
|
||||
partVersion: number
|
||||
}
|
||||
|
||||
function resolveToolCallFromPermission(
|
||||
instanceId: string,
|
||||
permission: PermissionRequestLike,
|
||||
): ResolvedToolCall | null {
|
||||
const sessionId = getPermissionSessionId(permission)
|
||||
const messageId = getPermissionMessageId(permission)
|
||||
if (!sessionId || !messageId) return null
|
||||
|
||||
const store = messageStoreBus.getInstance(instanceId)
|
||||
if (!store) return null
|
||||
|
||||
const record = store.getMessage(messageId)
|
||||
if (!record) return null
|
||||
|
||||
const metadata = ((permission as any).metadata || {}) as Record<string, unknown>
|
||||
const directPartId =
|
||||
(permission as any).partID ??
|
||||
(permission as any).partId ??
|
||||
(metadata as any).partID ??
|
||||
(metadata as any).partId ??
|
||||
undefined
|
||||
|
||||
const callId = getPermissionCallId(permission)
|
||||
|
||||
const findToolPart = (partId: string) => {
|
||||
const partRecord = record.parts?.[partId]
|
||||
const part = partRecord?.data
|
||||
if (!part || part.type !== "tool") return null
|
||||
return {
|
||||
toolPart: part as ResolvedToolCall["toolPart"],
|
||||
partVersion: partRecord.revision ?? 0,
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof directPartId === "string" && directPartId.length > 0) {
|
||||
const resolved = findToolPart(directPartId)
|
||||
if (resolved) {
|
||||
return {
|
||||
messageId,
|
||||
sessionId,
|
||||
toolPart: resolved.toolPart,
|
||||
messageVersion: record.revision,
|
||||
partVersion: resolved.partVersion,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (callId) {
|
||||
for (const partId of record.partIds) {
|
||||
const partRecord = record.parts?.[partId]
|
||||
const part = partRecord?.data as any
|
||||
if (!part || part.type !== "tool") continue
|
||||
const partCallId = part.callID ?? part.callId ?? part.toolCallID ?? part.toolCallId ?? undefined
|
||||
if (partCallId === callId && typeof part.id === "string" && part.id.length > 0) {
|
||||
return {
|
||||
messageId,
|
||||
sessionId,
|
||||
toolPart: part as ResolvedToolCall["toolPart"],
|
||||
messageVersion: record.revision,
|
||||
partVersion: partRecord.revision ?? 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props) => {
|
||||
const { isDark } = useTheme()
|
||||
const [submitting, setSubmitting] = createSignal(false)
|
||||
const [error, setError] = createSignal<string | null>(null)
|
||||
const [loadingSession, setLoadingSession] = createSignal<string | null>(null)
|
||||
|
||||
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
|
||||
return queue().find((p) => p.id === id) ?? null
|
||||
const orderedQueue = createMemo(() => {
|
||||
const current = queue()
|
||||
const activeId = activePermId()
|
||||
if (!activeId) return current
|
||||
const index = current.findIndex((entry) => entry.id === activeId)
|
||||
if (index <= 0) return current
|
||||
const active = current[index]
|
||||
if (!active) return current
|
||||
return [active, ...current.slice(0, index), ...current.slice(index + 1)]
|
||||
})
|
||||
|
||||
const hasActivePermission = createMemo(() => activePermission() !== null)
|
||||
const hasPermissions = createMemo(() => queue().length > 0)
|
||||
|
||||
// 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) {
|
||||
setSubmitting(false)
|
||||
setError(null)
|
||||
}
|
||||
})
|
||||
|
||||
// Keyboard shortcuts
|
||||
createEffect(() => {
|
||||
if (!props.isOpen || !hasActivePermission()) return
|
||||
|
||||
const handler = (event: KeyboardEvent) => {
|
||||
if (submitting()) return
|
||||
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
handleResponse("once")
|
||||
} else if (event.key === "a" || event.key === "A") {
|
||||
event.preventDefault()
|
||||
handleResponse("always")
|
||||
} else if (event.key === "d" || event.key === "D") {
|
||||
event.preventDefault()
|
||||
handleResponse("reject")
|
||||
} 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()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", handler)
|
||||
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)
|
||||
const closeOnEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault()
|
||||
props.onClose()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResponse(response: "once" | "always" | "reject") {
|
||||
const permission = activePermission()
|
||||
if (!permission) return
|
||||
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
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)
|
||||
if (remaining.length === 0) {
|
||||
props.onClose()
|
||||
}
|
||||
}, 100)
|
||||
} catch (err) {
|
||||
log.error("Failed to send permission response", err)
|
||||
setError(err instanceof Error ? err.message : "Failed to send response")
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
createEffect(() => {
|
||||
if (!props.isOpen) return
|
||||
document.addEventListener("keydown", closeOnEscape)
|
||||
onCleanup(() => document.removeEventListener("keydown", closeOnEscape))
|
||||
})
|
||||
|
||||
function handleBackdropClick(event: MouseEvent) {
|
||||
if (event.target === event.currentTarget) {
|
||||
@@ -219,196 +126,115 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
|
||||
}
|
||||
}
|
||||
|
||||
const diffPayload = createMemo(() => {
|
||||
const permission = activePermission()
|
||||
if (!permission) return null
|
||||
async function handleLoadSession(sessionId: string) {
|
||||
if (!sessionId) return
|
||||
setLoadingSession(sessionId)
|
||||
try {
|
||||
await loadMessages(props.instanceId, sessionId)
|
||||
} finally {
|
||||
setLoadingSession((current) => (current === sessionId ? null : current))
|
||||
}
|
||||
}
|
||||
|
||||
const metadata = ((permission as any).metadata || {}) as Record<string, unknown>
|
||||
const diffValue = typeof metadata.diff === "string" ? metadata.diff : null
|
||||
if (!diffValue || diffValue.trim().length === 0) return null
|
||||
|
||||
const diffPath =
|
||||
typeof metadata.filePath === "string" ? metadata.filePath :
|
||||
typeof metadata.path === "string" ? metadata.path :
|
||||
undefined
|
||||
|
||||
return { diffText: diffValue, filePath: diffPath }
|
||||
})
|
||||
function handleGoToSession(sessionId: string) {
|
||||
if (!sessionId) return
|
||||
setActiveSession(props.instanceId, sessionId)
|
||||
props.onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={props.isOpen}>
|
||||
<div class="permission-approval-modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div class="permission-approval-modal" role="dialog" aria-modal="true" aria-labelledby="permission-modal-title">
|
||||
<Show when={hasActivePermission()} fallback={
|
||||
<div class="permission-modal-empty">
|
||||
<p class="text-center text-gray-500">No pending permissions</p>
|
||||
</div>
|
||||
}>
|
||||
{/* Header */}
|
||||
<div class="permission-modal-header">
|
||||
<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 class="permission-center-modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div class="permission-center-modal" role="dialog" aria-modal="true" aria-labelledby="permission-center-title">
|
||||
<div class="permission-center-modal-header">
|
||||
<div class="permission-center-modal-title-row">
|
||||
<h2 id="permission-center-title" class="permission-center-modal-title">
|
||||
Permissions
|
||||
</h2>
|
||||
<Show when={queue().length > 0}>
|
||||
<span class="permission-center-modal-count">{queue().length}</span>
|
||||
</Show>
|
||||
</div>
|
||||
<button type="button" class="permission-center-modal-close" onClick={props.onClose} aria-label="Close">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body - scrollable */}
|
||||
<div class="permission-modal-body">
|
||||
{/* Permission type badge */}
|
||||
<div class="permission-modal-type">
|
||||
{getPermissionKind(activePermission())}
|
||||
</div>
|
||||
<div class="permission-center-modal-body">
|
||||
<Show when={hasPermissions()} fallback={<div class="permission-center-empty">No pending permissions.</div>}>
|
||||
<div class="permission-center-list" role="list">
|
||||
<For each={orderedQueue()}>
|
||||
{(permission) => {
|
||||
const sessionId = getPermissionSessionId(permission) || ""
|
||||
const isActive = () => permission.id === activePermId()
|
||||
const resolved = createMemo(() => resolveToolCallFromPermission(props.instanceId, permission))
|
||||
|
||||
{/* 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>
|
||||
const showFallback = () => !resolved()
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`permission-center-item${isActive() ? " permission-center-item-active" : ""}`}
|
||||
role="listitem"
|
||||
>
|
||||
<div class="permission-center-item-header">
|
||||
<div class="permission-center-item-heading">
|
||||
<span class="permission-center-item-kind">{getPermissionKind(permission)}</span>
|
||||
<Show when={isActive()}>
|
||||
<span class="permission-center-item-chip">Active</span>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="permission-center-item-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="permission-center-item-action"
|
||||
onClick={() => handleGoToSession(sessionId)}
|
||||
>
|
||||
Go to Session
|
||||
</button>
|
||||
<Show when={showFallback()}>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-center-item-action"
|
||||
disabled={loadingSession() === sessionId}
|
||||
onClick={() => handleLoadSession(sessionId)}
|
||||
>
|
||||
{loadingSession() === sessionId ? "Loading…" : "Load Session"}
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show
|
||||
when={resolved()}
|
||||
fallback={
|
||||
<div class="permission-center-fallback">
|
||||
<div class="permission-center-fallback-title">
|
||||
<code>{getPermissionDisplayTitle(permission)}</code>
|
||||
</div>
|
||||
<div class="permission-center-fallback-hint">Load session for more information.</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{(data) => (
|
||||
<ToolCall
|
||||
toolCall={data().toolPart}
|
||||
toolCallId={data().toolPart.id}
|
||||
messageId={data().messageId}
|
||||
messageVersion={data().messageVersion}
|
||||
partVersion={data().partVersion}
|
||||
instanceId={props.instanceId}
|
||||
sessionId={data().sessionId}
|
||||
/>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
|
||||
{/* Permission message */}
|
||||
<div class="permission-modal-message">
|
||||
<code>{getPermissionDisplayTitle(activePermission())}</code>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{/* Diff viewer */}
|
||||
<Show when={diffPayload()}>
|
||||
{(payload) => (
|
||||
<div class="permission-modal-diff">
|
||||
<div class="permission-modal-diff-label">
|
||||
Requested changes · {payload().filePath ? getRelativePath(payload().filePath!) : ""}
|
||||
</div>
|
||||
<div class="permission-modal-diff-viewer">
|
||||
<ToolCallDiffViewer
|
||||
diffText={payload().diffText}
|
||||
filePath={payload().filePath}
|
||||
theme={isDark() ? "dark" : "light"}
|
||||
mode="split"
|
||||
onRendered={() => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="permission-modal-error" role="alert">
|
||||
{error()}
|
||||
</div>
|
||||
</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"
|
||||
class="permission-modal-button permission-modal-button-once"
|
||||
disabled={submitting()}
|
||||
onClick={() => handleResponse("once")}
|
||||
>
|
||||
Allow Once
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-modal-button permission-modal-button-always"
|
||||
disabled={submitting()}
|
||||
onClick={() => handleResponse("always")}
|
||||
>
|
||||
Always Allow
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-modal-button permission-modal-button-deny"
|
||||
disabled={submitting()}
|
||||
onClick={() => handleResponse("reject")}
|
||||
>
|
||||
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
|
||||
</span>
|
||||
<span class="permission-modal-shortcut">
|
||||
<kbd class="kbd">A</kbd> Always
|
||||
</span>
|
||||
<span class="permission-modal-shortcut">
|
||||
<kbd class="kbd">D</kbd> Deny
|
||||
</span>
|
||||
<span class="permission-modal-shortcut">
|
||||
<kbd class="kbd">←→</kbd> Navigate
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Show, createMemo, type Component } from "solid-js"
|
||||
import { ShieldAlert } from "lucide-solid"
|
||||
import { getPermissionQueueLength } from "../stores/instances"
|
||||
import { isElectronHost } from "../lib/runtime-env"
|
||||
|
||||
interface PermissionNotificationBannerProps {
|
||||
instanceId: string
|
||||
@@ -10,46 +10,25 @@ interface PermissionNotificationBannerProps {
|
||||
const PermissionNotificationBanner: Component<PermissionNotificationBannerProps> = (props) => {
|
||||
const queueLength = createMemo(() => getPermissionQueueLength(props.instanceId))
|
||||
const hasPermissions = createMemo(() => queueLength() > 0)
|
||||
const isElectron = isElectronHost()
|
||||
const label = createMemo(() => {
|
||||
const count = queueLength()
|
||||
return `${count} permission${count === 1 ? "" : "s"} pending approval`
|
||||
})
|
||||
|
||||
return (
|
||||
<Show when={hasPermissions()}>
|
||||
{/* Electron: Full banner with text */}
|
||||
<Show when={isElectron}>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-notification-banner"
|
||||
onClick={props.onClick}
|
||||
aria-label={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval`}
|
||||
>
|
||||
<span class="permission-notification-icon" aria-hidden="true">
|
||||
⚠️
|
||||
</span>
|
||||
<span class="permission-notification-text">
|
||||
Approval Required
|
||||
</span>
|
||||
<Show when={queueLength() > 1}>
|
||||
<span class="permission-notification-count" aria-label={`${queueLength()} permissions`}>
|
||||
{queueLength()}
|
||||
</span>
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
{/* Web: Compact indicator button */}
|
||||
<Show when={!isElectron}>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-indicator-button"
|
||||
onClick={props.onClick}
|
||||
aria-label={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval. Click to review.`}
|
||||
title={`${queueLength()} permission${queueLength() > 1 ? "s" : ""} pending approval`}
|
||||
>
|
||||
<span class="permission-indicator-badge">
|
||||
{queueLength() > 9 ? "9+" : queueLength()}
|
||||
</span>
|
||||
</button>
|
||||
</Show>
|
||||
<button
|
||||
type="button"
|
||||
class="permission-center-trigger"
|
||||
onClick={props.onClick}
|
||||
aria-label={label()}
|
||||
title={label()}
|
||||
>
|
||||
<ShieldAlert class="permission-center-icon" aria-hidden="true" />
|
||||
<span class="permission-center-count" aria-hidden="true">
|
||||
{queueLength() > 9 ? "9+" : queueLength()}
|
||||
</span>
|
||||
</button>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
|
||||
import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment"
|
||||
import type { Attachment } from "../types/attachment"
|
||||
import type { Agent } from "../types/session"
|
||||
import type { Command as SDKCommand } from "@opencode-ai/sdk/v2"
|
||||
import Kbd from "./kbd"
|
||||
import { getActiveInstance } from "../stores/instances"
|
||||
import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt, executeCustomCommand } from "../stores/sessions"
|
||||
@@ -767,7 +768,7 @@ export default function PromptInput(props: PromptInputProps) {
|
||||
type: "file"
|
||||
file: { path: string; relativePath?: string; isGitFile: boolean; isDirectory?: boolean }
|
||||
}
|
||||
| { type: "command"; command: { name: string; description?: string } },
|
||||
| { type: "command"; command: SDKCommand },
|
||||
) {
|
||||
if (item.type === "command") {
|
||||
const name = item.command.name
|
||||
|
||||
Reference in New Issue
Block a user