Skip to content

feat(plugins): add compatibility badges to plugin catalog (#597) #1039

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
annukumar123 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(plugins): add compatibility badges to plugin catalog (#597) #1039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be89a02
feat(plugins): add compatibility badges to plugin catalog (#597)
annukumar123 Jul 28, 2026
c5ded32
Merge branch 'main' into feature/plugin-catalog-compatibility-badges-597
annukumar123 Jul 28, 2026
4fcafbf
Merge branch 'main' into feature/plugin-catalog-compatibility-badges-597
annukumar123 Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 77 additions & 9 deletions frontend/src/components/PluginsPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,49 @@ const PLUGIN_ICONS = {
jsonformat: BracesIcon,
};

// Helper badge renderer for compatibility tags (#597)
function CompatibilityBadge({ compatibility }) {
if (!compatibility) return null;

// Normalize array vs object/string format
const badges = Array.isArray(compatibility)
? compatibility
: typeof compatibility === "object"
? Object.values(compatibility)
: [compatibility];

return (
<div className="inline-flex items-center gap-1 flex-wrap">
{badges.map((badge, idx) => {
const isLocal = String(badge).toLowerCase().includes("local") || String(badge).toLowerCase().includes("v1");
const badgeStyle = isLocal
? "bg-emerald-950/60 text-emerald-400 border-emerald-800/60"
: "bg-blue-950/60 text-blue-400 border-blue-800/60";

return (
<span
key={idx}
data-testid="compatibility-badge"
className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${badgeStyle}`}
>
{badge}
</span>
);
})}
</div>
);
}

export default function PluginsPanel({ sessionId, onClose }) {
const [plugins, setPlugins] = useState([]);
const [selected, setSelected] = useState(null);
const [input, setInput] = useState("");

// Persistent input state initialized from localStorage (#596)
const [input, setInput] = useState(() => {
if (!sessionId) return "";
return localStorage.getItem(`localmind_plugin_draft_${sessionId}`) || "";
});

const [output, setOutput] = useState("");
const [running, setRunning] = useState(false);
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -102,6 +141,22 @@ export default function PluginsPanel({ sessionId, onClose }) {
setCopied(false);
}

// Re-sync input draft whenever sessionId changes (#596)
useEffect(() => {
if (!sessionId) return;
setInput(localStorage.getItem(`localmind_plugin_draft_${sessionId}`) || "");
}, [sessionId]);

// Persist plugin draft input to localStorage on edit (#596)
useEffect(() => {
if (!sessionId) return;
if (input) {
localStorage.setItem(`localmind_plugin_draft_${sessionId}`, input);
} else {
localStorage.removeItem(`localmind_plugin_draft_${sessionId}`);
}
}, [input, sessionId]);

async function run() {
if (!selected || !input.trim() || running) return;
setRunning(true);
Expand All @@ -113,6 +168,10 @@ export default function PluginsPanel({ sessionId, onClose }) {
if (r.success) {
setOutput(r.output);
await fetchLogs();
// Clear saved draft from localStorage after successful execution (#596)
if (sessionId) {
localStorage.removeItem(`localmind_plugin_draft_${sessionId}`);
}
} else {
setError(r.error || "Plugin failed");
}
Expand Down Expand Up @@ -181,7 +240,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
</button>
</div>

{/* Global Inline Error Banner (#588) */}
{/* Global Inline Error Banner */}
{error && (
<div
data-testid="plugin-error-message"
Expand All @@ -203,7 +262,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
</div>
)}

{/* Collapsible Panel Section (#592) */}
{/* Collapsible Panel Section */}
{!isCollapsed && (
<>
{/* Plugin selector row */}
Expand All @@ -214,26 +273,35 @@ export default function PluginsPanel({ sessionId, onClose }) {
type="button"
data-testid={`plugin-btn-${p.id}`}
onClick={() => handleSelectPlugin(p)}
className={`text-xs px-3.5 py-2 md:py-1.5 rounded-lg border transition font-medium touch-manipulation
className={`text-xs px-3.5 py-2 md:py-1.5 rounded-lg border transition font-medium touch-manipulation flex items-center gap-2
${selected?.id === p.id ? "border-purple-500 bg-purple-900/30 text-purple-300 shadow-sm shadow-purple-500/10" : "border-gray-700 text-gray-400 hover:bg-gray-800"}`}
>
{(() => {
const Icon = PLUGIN_ICONS[p.icon] || PlugIcon;
return (
<span className="inline-flex items-center gap-1">
<span className="inline-flex items-center gap-1.5">
<Icon className="w-3.5 h-3.5" />
<span>{p.name}</span>
</span>
);
})()}
{p.compatibility && <CompatibilityBadge compatibility={p.compatibility} />}
</button>
))}
</div>

{/* Plugin Input/Output Area OR Empty-State Guidance */}
{selected ? (
<div data-testid="plugin-workspace" className="space-y-3 md:space-y-2 flex-1 md:flex-initial flex flex-col justify-start shrink-0">
<p className="text-xs text-gray-500">{selected.description}</p>
<div className="space-y-3 md:space-y-2 flex-1 md:flex-initial flex flex-col justify-start shrink-0">
<div className="flex items-center justify-between gap-2">
<p className="text-xs text-gray-500">{selected.description}</p>
{selected.compatibility && (
<div className="shrink-0 flex items-center gap-1 text-[11px] text-gray-400">
<span className="text-gray-500">Compatibility:</span>
<CompatibilityBadge compatibility={selected.compatibility} />
</div>
)}
</div>
<textarea
data-testid="plugin-input-textarea"
value={input}
Expand All @@ -254,7 +322,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
</button>
</div>

{/* Output block with copy feedback button (#594) */}
{/* Output block with copy feedback button */}
{output && (
<div className="relative mt-2">
<div className="flex items-center justify-between bg-gray-800 border border-gray-700 rounded-t-xl px-3 py-1.5 text-xs text-gray-400">
Expand All @@ -274,7 +342,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
)}
</div>
) : (
/* Empty State Guidance Card (#587) */
/* Empty State Guidance Card */
<div className="flex-1 md:flex-initial flex flex-col items-center justify-center text-center p-6 my-2 border border-dashed border-gray-800 rounded-xl bg-gray-900/40">
<PlugIcon className="w-8 h-8 text-gray-600 mb-2 animate-pulse" />
<p className="text-xs font-medium text-gray-300">No Plugin Selected</p>
Expand Down
57 changes: 55 additions & 2 deletions frontend/src/components/PluginsPanel.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,63 @@ vi.mock("./Icons", () => ({
}));

const mockPluginsList = [
{ id: "calculator", name: "Calculator", icon: "calculator", description: "Performs math evaluation" },
{ id: "summarizer", name: "Summarizer", icon: "summarizer", description: "Summarizes provided text" },
{
id: "calculator",
name: "Calculator",
icon: "calculator",
description: "Performs math evaluation",
compatibility: ["v1.0", "Local"]
},
{
id: "summarizer",
name: "Summarizer",
icon: "summarizer",
description: "Summarizes provided text",
compatibility: ["v2.0", "Cloud"]
},
];

describe("PluginsPanel Compatibility Badges (#597)", () => {
beforeEach(() => {
localStorage.clear();
api.getPlugins.mockResolvedValue({ plugins: mockPluginsList });
api.getPluginLogs.mockResolvedValue({ logs: [] });
});

afterEach(() => {
cleanup();
vi.restoreAllMocks();
});

test("renders compatibility badges for each plugin in the catalog selector", async () => {
render(<PluginsPanel sessionId="session-597" onClose={vi.fn()} />);

await waitFor(() => {
expect(screen.getAllByText("Calculator").length).toBeGreaterThan(0);
});

const badges = screen.getAllByTestId("compatibility-badge");
expect(badges.length).toBeGreaterThanOrEqual(4);
expect(screen.getByText("v1.0")).toBeInTheDocument();
expect(screen.getByText("Local")).toBeInTheDocument();
expect(screen.getByText("v2.0")).toBeInTheDocument();
expect(screen.getByText("Cloud")).toBeInTheDocument();
});

test("displays plugin compatibility metadata in detailed selection view", async () => {
render(<PluginsPanel sessionId="session-597" onClose={vi.fn()} />);

await waitFor(() => {
expect(screen.getAllByText("Calculator").length).toBeGreaterThan(0);
});

const calcButton = screen.getAllByText("Calculator")[0];
fireEvent.click(calcButton);

expect(screen.getByText("Compatibility:")).toBeInTheDocument();
});
});

describe("PluginsPanel Interaction Tests (#595)", () => {
beforeEach(() => {
vi.clearAllMocks();
Expand Down
Loading