f89e074dd1
Governed substrate for autonomous agents: scoped identity (passports), audited actions, MCP workspace. Infra IPs and secrets redacted for public release.
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
/**
|
|
* InvocationPills - ADR-116: Structured Invocation Tokens
|
|
*
|
|
* MentionPill: renders <<@slug>> as a styled pill/chip (blue bg, user icon)
|
|
* CommandPill: renders <</slug>> as a styled command pill (purple bg, bot icon)
|
|
*
|
|
* Plain @slug and /slug render as subtle reference highlights (not pills).
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Bot, User } from 'lucide-react';
|
|
import { cn } from '@/shared/utils/cn';
|
|
|
|
// ── MentionPill ──────────────────────────────────────────────────────────────
|
|
|
|
interface MentionPillProps {
|
|
/** The slug without delimiters, e.g. "dev-user" */
|
|
slug: string;
|
|
/** Optional click handler */
|
|
onClick?: (token: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Renders a structured invocation mention (<<@slug>>) as a styled pill.
|
|
* Blue background with user icon.
|
|
*/
|
|
export const MentionPill: React.FC<MentionPillProps> = ({ slug, onClick, className }) => {
|
|
return (
|
|
<span
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onClick?.(`<<@${slug}>>`);
|
|
}}
|
|
className={cn(
|
|
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full',
|
|
'bg-blue-500/20 text-blue-400 text-xs font-medium',
|
|
'cursor-pointer hover:bg-blue-500/30 transition-colors',
|
|
'align-middle leading-tight',
|
|
className
|
|
)}
|
|
title={`Invocation: @${slug}`}
|
|
>
|
|
<User className="w-3 h-3 flex-shrink-0" />
|
|
<span>@{slug}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// ── CommandPill ──────────────────────────────────────────────────────────────
|
|
|
|
interface CommandPillProps {
|
|
/** The slug without delimiters, e.g. "developer" */
|
|
slug: string;
|
|
/** Optional click handler */
|
|
onClick?: (token: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Renders a structured invocation command (<</slug>>) as a styled pill.
|
|
* Purple background with bot icon.
|
|
*/
|
|
export const CommandPill: React.FC<CommandPillProps> = ({ slug, onClick, className }) => {
|
|
return (
|
|
<span
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onClick?.(`<</${slug}>>`);
|
|
}}
|
|
className={cn(
|
|
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full',
|
|
'bg-purple-500/20 text-purple-400 text-xs font-medium',
|
|
'cursor-pointer hover:bg-purple-500/30 transition-colors',
|
|
'align-middle leading-tight',
|
|
className
|
|
)}
|
|
title={`Invocation: /${slug}`}
|
|
>
|
|
<Bot className="w-3 h-3 flex-shrink-0" />
|
|
<span>/{slug}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default { MentionPill, CommandPill };
|