mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-08 00:02:20 +03:00
feat(agent-skills): add SkillCard, SkillPreviewPane, CoverageBar, McpA2aLinksBar
This commit is contained in:
diegosouzapw
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { SkillCoverage } from "@/lib/agentSkills/types";
|
||||
|
||||
interface CoverageBarProps {
|
||||
coverage: SkillCoverage;
|
||||
}
|
||||
|
||||
function barColor(have: number, total: number): string {
|
||||
const pct = total > 0 ? have / total : 0;
|
||||
if (pct >= 1) return "bg-emerald-500";
|
||||
if (pct >= 0.75) return "bg-amber-400";
|
||||
return "bg-red-500";
|
||||
}
|
||||
|
||||
function trackColor(have: number, total: number): string {
|
||||
const pct = total > 0 ? have / total : 0;
|
||||
if (pct >= 1) return "bg-emerald-500/20";
|
||||
if (pct >= 0.75) return "bg-amber-400/20";
|
||||
return "bg-red-500/20";
|
||||
}
|
||||
|
||||
export function CoverageBar({ coverage }: CoverageBarProps): JSX.Element {
|
||||
const t = useTranslations("agentSkills");
|
||||
const { api, cli } = coverage;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 text-xs" data-testid="coverage-bar">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium text-text-muted shrink-0">
|
||||
{t("categoryApi")} {api.have}/{api.total}
|
||||
</span>
|
||||
<div
|
||||
className={`flex-1 h-2 rounded-full overflow-hidden ${trackColor(api.have, api.total)}`}
|
||||
>
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-valuenow={api.have}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={api.total}
|
||||
aria-label={`${t("categoryApi")} ${api.have}/${api.total}`}
|
||||
className={`h-full rounded-full transition-all duration-500 ${barColor(api.have, api.total)}`}
|
||||
style={{ width: `${api.total > 0 ? (api.have / api.total) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="shrink-0 text-text-muted w-12 text-right">
|
||||
{api.total > 0 ? Math.round((api.have / api.total) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium text-text-muted shrink-0">
|
||||
{t("categoryCli")} {cli.have}/{cli.total}
|
||||
</span>
|
||||
<div
|
||||
className={`flex-1 h-2 rounded-full overflow-hidden ${trackColor(cli.have, cli.total)}`}
|
||||
>
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-valuenow={cli.have}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={cli.total}
|
||||
aria-label={`${t("categoryCli")} ${cli.have}/${cli.total}`}
|
||||
className={`h-full rounded-full transition-all duration-500 ${barColor(cli.have, cli.total)}`}
|
||||
style={{ width: `${cli.total > 0 ? (cli.have / cli.total) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="shrink-0 text-text-muted w-12 text-right">
|
||||
{cli.total > 0 ? Math.round((cli.have / cli.total) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CoverageBar;
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState, useSyncExternalStore } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
// SSR-safe origin via useSyncExternalStore.
|
||||
// Server snapshot returns "" (avoids hydration mismatch).
|
||||
function useOrigin(): string {
|
||||
return useSyncExternalStore(
|
||||
() => () => {}, // no external subscription needed
|
||||
() => (typeof window !== "undefined" ? window.location.origin : ""),
|
||||
() => "", // server snapshot
|
||||
);
|
||||
}
|
||||
|
||||
interface LinkCardProps {
|
||||
label: string;
|
||||
url: string;
|
||||
icon: string;
|
||||
prompt: string;
|
||||
}
|
||||
|
||||
function LinkCard({ label, url, icon, prompt }: LinkCardProps): JSX.Element {
|
||||
const t = useTranslations("agentSkills");
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// clipboard not available — silently ignore
|
||||
}
|
||||
}, [url]);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex items-start gap-3 rounded-lg border border-border bg-bg-subtle p-3 min-w-0">
|
||||
<div className="flex items-center justify-center size-8 rounded-lg bg-primary/10 shrink-0">
|
||||
<span className="material-symbols-outlined text-primary text-[16px]">{icon}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-1 mb-1">
|
||||
<span className="text-xs font-semibold text-text-main">{label}</span>
|
||||
<button
|
||||
onClick={() => void handleCopy()}
|
||||
className={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors shrink-0 ${
|
||||
copied
|
||||
? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
|
||||
: "bg-bg text-text-muted hover:text-text-main"
|
||||
}`}
|
||||
title={t("copyUrl")}
|
||||
aria-label={`${t("copyUrl")} ${label}`}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[11px]">
|
||||
{copied ? "check" : "content_copy"}
|
||||
</span>
|
||||
{copied ? "✓" : t("copyUrl")}
|
||||
</button>
|
||||
</div>
|
||||
<code className="block truncate text-[10px] font-mono text-text-muted">{url}</code>
|
||||
<p className="mt-1 text-[10px] text-text-muted leading-relaxed italic">{prompt}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function McpA2aLinksBar(): JSX.Element {
|
||||
const t = useTranslations("agentSkills");
|
||||
const origin = useOrigin();
|
||||
|
||||
const mcpUrl = origin ? `${origin}/api/mcp/sse` : "/api/mcp/sse";
|
||||
const a2aUrl = origin ? `${origin}/.well-known/agent.json` : "/.well-known/agent.json";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row gap-2" data-testid="mcp-a2a-links-bar">
|
||||
<LinkCard
|
||||
label={t("mcpUrl")}
|
||||
url={mcpUrl}
|
||||
icon="electrical_services"
|
||||
prompt="Add this MCP endpoint to your agent to give it 37 OmniRoute tools."
|
||||
/>
|
||||
<LinkCard
|
||||
label={t("a2aLink")}
|
||||
url={a2aUrl}
|
||||
icon="hub"
|
||||
prompt="Register this Agent Card with your orchestrator to enable A2A task delegation."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default McpA2aLinksBar;
|
||||
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { AgentSkill } from "@/lib/agentSkills/types";
|
||||
|
||||
interface SkillCardProps {
|
||||
skill: AgentSkill;
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function SkillCard({ skill, selected, onClick }: SkillCardProps): JSX.Element {
|
||||
const t = useTranslations("agentSkills");
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onClick();
|
||||
}
|
||||
},
|
||||
[onClick],
|
||||
);
|
||||
|
||||
const previewItems: string[] =
|
||||
skill.category === "api"
|
||||
? (skill.endpoints ?? []).slice(0, 2)
|
||||
: (skill.cliCommands ?? []).slice(0, 2);
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-pressed={selected}
|
||||
onClick={onClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
data-testid={`skill-card-${skill.id}`}
|
||||
className={`flex items-start gap-3 rounded-lg border p-3 cursor-pointer transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 ${
|
||||
selected
|
||||
? "border-primary/40 bg-primary/5"
|
||||
: "border-border bg-bg hover:bg-bg-subtle hover:border-border"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
|
||||
selected ? "bg-primary/15" : "bg-bg-subtle"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-outlined text-[18px] ${
|
||||
selected ? "text-primary" : "text-text-muted"
|
||||
}`}
|
||||
>
|
||||
{skill.icon ?? "article"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-0.5 flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-sm font-semibold text-text-main">{skill.name}</span>
|
||||
|
||||
<span
|
||||
className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
|
||||
skill.category === "api"
|
||||
? "bg-blue-500/10 text-blue-700 dark:text-blue-400"
|
||||
: "bg-violet-500/10 text-violet-700 dark:text-violet-400"
|
||||
}`}
|
||||
>
|
||||
{skill.category === "api" ? t("categoryApi") : t("categoryCli")}
|
||||
</span>
|
||||
|
||||
{skill.isEntry && (
|
||||
<span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-primary">
|
||||
start
|
||||
</span>
|
||||
)}
|
||||
|
||||
{skill.isNew && (
|
||||
<span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700 dark:text-amber-400">
|
||||
new
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs leading-relaxed text-text-muted line-clamp-2">{skill.description}</p>
|
||||
|
||||
{previewItems.length > 0 && (
|
||||
<div className="mt-1.5 flex flex-wrap gap-1">
|
||||
{previewItems.map((item) => (
|
||||
<code
|
||||
key={item}
|
||||
className="rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-[10px] text-text-muted border border-border/50"
|
||||
>
|
||||
{item}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkillCard;
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
// Lazy-load react-markdown to reduce initial bundle size.
|
||||
const ReactMarkdown = dynamic(() => import("react-markdown"), {
|
||||
loading: () => <SkeletonLines lines={6} />,
|
||||
});
|
||||
|
||||
// remark-gfm loaded lazily alongside ReactMarkdown via remarkPlugins prop.
|
||||
// We avoid rehype-raw to prevent XSS (Hard Rule #7 context).
|
||||
|
||||
interface SkillPreviewPaneProps {
|
||||
skillId: string | null;
|
||||
markdown: string | null;
|
||||
loading: boolean;
|
||||
onRefresh?: () => void;
|
||||
}
|
||||
|
||||
function SkeletonLines({ lines }: { lines: number }): JSX.Element {
|
||||
return (
|
||||
<div className="space-y-2 animate-pulse" aria-hidden="true">
|
||||
{Array.from({ length: lines }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-3 rounded bg-bg-subtle"
|
||||
style={{ width: `${60 + ((i * 17) % 40)}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SkillPreviewPane({
|
||||
skillId,
|
||||
markdown,
|
||||
loading,
|
||||
onRefresh,
|
||||
}: SkillPreviewPaneProps): JSX.Element {
|
||||
const t = useTranslations("agentSkills");
|
||||
|
||||
const handleCopyRawUrl = useCallback(async () => {
|
||||
if (!skillId) return;
|
||||
const rawUrl = `https://raw.githubusercontent.com/diegosouzapw/OmniRoute/refs/heads/main/skills/${skillId}/SKILL.md`;
|
||||
try {
|
||||
await navigator.clipboard.writeText(rawUrl);
|
||||
} catch {
|
||||
// clipboard not available — silently ignore
|
||||
}
|
||||
}, [skillId]);
|
||||
|
||||
const githubUrl = skillId
|
||||
? `https://github.com/diegosouzapw/OmniRoute/blob/main/skills/${skillId}/SKILL.md`
|
||||
: null;
|
||||
|
||||
// Empty state
|
||||
if (!skillId) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center h-full min-h-[300px] rounded-xl border border-dashed border-border bg-bg-subtle/30 p-8 text-center"
|
||||
data-testid="skill-preview-empty"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[32px] text-text-muted mb-3">
|
||||
article
|
||||
</span>
|
||||
<p className="text-sm text-text-muted">{t("previewEmpty")}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col rounded-xl border border-border bg-bg h-full"
|
||||
data-testid="skill-preview-pane"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2.5 shrink-0">
|
||||
<span className="text-xs font-mono font-semibold text-text-muted truncate">
|
||||
{skillId}/SKILL.md
|
||||
</span>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{onRefresh && (
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs text-text-muted hover:text-text-main hover:bg-bg-subtle transition-colors disabled:opacity-50"
|
||||
aria-label="Refresh"
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-outlined text-[14px] ${loading ? "animate-spin" : ""}`}
|
||||
>
|
||||
refresh
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => void handleCopyRawUrl()}
|
||||
disabled={!skillId}
|
||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs text-text-muted hover:text-text-main hover:bg-bg-subtle transition-colors"
|
||||
title={t("copyUrl")}
|
||||
aria-label={t("copyUrl")}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[14px]">content_copy</span>
|
||||
</button>
|
||||
{githubUrl && (
|
||||
<a
|
||||
href={githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 rounded px-2 py-1 text-xs text-text-muted hover:text-text-main hover:bg-bg-subtle transition-colors"
|
||||
title={t("viewOnGithub")}
|
||||
aria-label={t("viewOnGithub")}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[14px]">open_in_new</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 min-h-0">
|
||||
{loading ? (
|
||||
<SkeletonLines lines={12} />
|
||||
) : markdown ? (
|
||||
<div
|
||||
className="prose prose-sm dark:prose-invert max-w-none text-text-main"
|
||||
data-testid="skill-preview-markdown"
|
||||
>
|
||||
<ReactMarkdown>{markdown}</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 dark:bg-red-950/30 p-3 text-xs text-red-700 dark:text-red-400"
|
||||
data-testid="skill-preview-error"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[16px]">error</span>
|
||||
{t("previewError")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkillPreviewPane;
|
||||
Reference in New Issue
Block a user