examples/web_ui/frontend/src/components/panel/PermissionPanel.tsx

import type { PermissionContext, PermissionRule } from '@agentscope-ai/agentscope/permission';
import { Ban, CircleHelp, FolderOpen, ShieldCheck, ShieldX } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import { PanelEmpty } from '@/components/panel/PanelEmpty';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/i18n/useI18n';

/** The behavior keys we render sections for (excludes ``passthrough``). */
type RuleBehavior = 'allow' | 'deny' | 'ask';

interface PermissionPanelProps {
	/**

	 * The permission context to render. Pass ``null`` when no data is

	 * available yet (renders an empty state).

	 */
	permissionContext: PermissionContext | null;
}

/** i18n key suffix for each behavior group title. */
const BEHAVIOR_META: Record<RuleBehavior, { i18nKey: string; icon: typeof ShieldCheck }> = {
	allow: { i18nKey: 'panel.permission.allow', icon: ShieldCheck },
	deny: { i18nKey: 'panel.permission.deny', icon: Ban },
	ask: { i18nKey: 'panel.permission.ask', icon: CircleHelp },
};

/**

 * A monospace value (a path or rule pattern) that truncates to fit its

 * row. When (and only when) the text is actually clipped, hovering

 * reveals the full value in a tooltip anchored to the left.

 *

 * @param value - The text to display.

 * @returns The truncating value element, with a tooltip when clipped.

 */
function TruncatedCode({ value }: { value: string }) {
	const ref = useRef<HTMLSpanElement>(null);
	const [truncated, setTruncated] = useState(false);

	useEffect(() => {
		const el = ref.current;
		if (!el) return;
		const check = () => setTruncated(el.scrollWidth > el.clientWidth);
		check();
		const observer = new ResizeObserver(check);
		observer.observe(el);
		return () => observer.disconnect();
	}, [value]);

	return (
		<Tooltip>

			<TooltipTrigger asChild>

				<span ref={ref} className="min-w-0 flex-1 truncate text-left font-mono text-xs">

					{value}

				</span>

			</TooltipTrigger>

			{truncated ? (

				<TooltipContent side="left" className="max-w-sm font-mono break-all">

					{value}

				</TooltipContent>

			) : null}

		</Tooltip>
	);
}

/**

 * A single tool's rule card: a header naming the tool plus one row per

 * matching rule (pattern on the left, source on the right).

 *

 * @param toolName - The tool these rules apply to.

 * @param rules - The rules configured for this tool under one behavior.

 * @returns The tool card element.

 */
function ToolRuleCard({ toolName, rules }: { toolName: string; rules: PermissionRule[] }) {
	const { t } = useTranslation();
	return (
		<div className="rounded-md border">

			<div className="flex items-center gap-x-2 border-b px-2 py-1.5 text-sm font-medium">

				{toolName}

				<Badge variant="secondary" className="ml-auto">

					{rules.length}

				</Badge>

			</div>

			<ul className="flex flex-col">

				{rules.map((rule, index) => (

					<li

						key={`${rule.rule_content ?? '*'}-${index}`}

						className="flex items-center justify-between gap-x-2 px-2 py-1.5 text-xs not-last:border-b"

					>

						{rule.rule_content ? (

							<TruncatedCode value={rule.rule_content} />

						) : (

							<span className="min-w-0 flex-1 text-muted-foreground">

								{t('panel.permission.anyInvocation')}

							</span>

						)}

						<Badge variant="outline" className="shrink-0">

							{rule.source}

						</Badge>

					</li>

				))}

			</ul>

		</div>
	);
}

/**

 * One behavior group (allow / deny / ask): a titled section that lists

 * a {@link ToolRuleCard} per tool that has rules under this behavior.

 *

 * @param behavior - The behavior category for this section.

 * @param ruleMap - Rules keyed by tool name for this behavior.

 * @returns The section element, or ``null`` when there are no rules.

 */
function BehaviorGroup({

	behavior,

	ruleMap,

}: {

	behavior: RuleBehavior;

	ruleMap: Record<string, PermissionRule[]> | undefined;

}) {
	const { t } = useTranslation();
	const entries = Object.entries(ruleMap ?? {}).filter(([, rules]) => rules.length > 0);
	if (entries.length === 0) return null;

	const meta = BEHAVIOR_META[behavior];
	const Icon = meta.icon;

	return (
		<div className="flex flex-col gap-y-1.5">

			<div className="flex items-center gap-x-1.5 text-xs font-medium text-muted-foreground">

				<Icon className="size-3.5" />

				{t(meta.i18nKey)}

			</div>

			{entries.map(([toolName, rules]) => (

				<ToolRuleCard key={toolName} toolName={toolName} rules={rules} />

			))}

		</div>
	);
}

/**

 * Pure content body for the Permission dock panel. Shows the active

 * permission mode, the working directories in scope, and the configured

 * rules grouped by behavior (deny / ask / allow) and then by tool. Data

 * arrives via props so it owns no data fetching.

 *

 * Renders without its own header/border — the surrounding `Panel`

 * chrome (from `PanelDock`) provides those.

 *

 * @param permissionContext - The permission context, or ``null``.

 * @returns The permission panel body.

 */
export function PermissionPanel({ permissionContext }: PermissionPanelProps) {
	const { t } = useTranslation();
	const workingDirs = Object.values(permissionContext?.working_directories ?? {});
	const hasRules =
		Object.keys(permissionContext?.allow_rules ?? {}).length > 0 ||
		Object.keys(permissionContext?.deny_rules ?? {}).length > 0 ||
		Object.keys(permissionContext?.ask_rules ?? {}).length > 0;

	return (
		<div className="flex flex-col flex-1 min-h-0 gap-y-3">

			<span className="text-muted-foreground text-sm">

				{t('panel.permission.description')}

			</span>



			<div className="flex flex-col flex-1 min-h-0 overflow-y-auto gap-y-4">

				{/* Working directories — always shown, with an empty state. */}

				<div className="flex flex-col gap-y-1.5">

					<div className="flex items-center gap-x-1.5 text-xs font-medium text-muted-foreground">

						<FolderOpen className="size-3.5" />

						{t('panel.permission.workingDirectories')}

					</div>

					{workingDirs.length === 0 ? (

						<p className="text-muted-foreground text-xs px-1 py-2">

							{t('panel.permission.noWorkingDirectories')}

						</p>

					) : (

						<ul className="flex flex-col rounded-md border">

							{workingDirs.map((dir) => (

								<li

									key={dir.path}

									className="flex items-center justify-between gap-x-2 px-2 py-1.5 text-xs not-last:border-b"

								>

									<TruncatedCode value={dir.path} />

									<Badge variant="outline" className="shrink-0">

										{dir.source}

									</Badge>

								</li>

							))}

						</ul>

					)}

				</div>



				{/* Rules grouped by behavior, then by tool. */}

				{hasRules ? (

					<>

						<BehaviorGroup behavior="deny" ruleMap={permissionContext?.deny_rules} />

						<BehaviorGroup behavior="ask" ruleMap={permissionContext?.ask_rules} />

						<BehaviorGroup behavior="allow" ruleMap={permissionContext?.allow_rules} />

					</>

				) : (

					<PanelEmpty

						icon={ShieldX}

						title={t('panel.permission.emptyTitle')}

						description={t('panel.permission.emptyDescription')}

					/>

				)}

			</div>
		</div>
	);
}