feat(ui): rework permission center to reuse tool call view

This commit is contained in:
Shantur Rathore
2026-01-08 20:15:09 +00:00
parent 2e9f5b916c
commit df9fc529f9
5 changed files with 379 additions and 1043 deletions

View File

@@ -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>
)
}