- {/* Row 1: Brand + Search + Actions */}
-
+
-
+
-
- );
+
+
-
-
-
-
-
-
-
- {siteName}
-
-
-
- Browse sections, switch theme, and access account actions.
-
-
-
-
-
+ return (
+ 
-
-
-
- Home
-
-
- {isSoulMode ? (
-
-
- ClawHub
-
-
- ) : null}
- {primaryItems.map((item) => (
-
-
- {item.label}
-
-
- ))}
- {secondaryItems.map((item) => (
-
-
- {item.label}
-
-
- ))}
-
-
-
- Theme
-
-
+ {/* Row 1: Brand + Search + Actions */}
+
- {/* Mobile search bar (expandable) */}
- {mobileSearchOpen ? (
-
- ) : null}
+ {/* Mobile search bar (expandable) */}
+ {mobileSearchOpen ? (
+
+ ) : null}
-
-
+
+
+
+
+
+
+
+
+
+ {siteName}
+
+
+
+ Browse sections, switch theme, and access account actions.
+
+
+
+
+
-
-
-
-
- {siteName}
-
+
+
+
+
+ {siteName}
+
-
+
+
+ Home
+
+
+ {isSoulMode ? (
+
+
+ ClawHub
+
+
+ ) : null}
+ {primaryItems.map((item) => (
+
+
+ {item.label}
+
+
+ ))}
+ {secondaryItems.map((item) => (
+
+
+ {item.label}
+
+
+ ))}
+
+
+
+ Theme
+
+
-
- {showTypeahead ? (
-
+
+
+ {showTypeahead ? (
+
-
-
-
-
-
-
-
-
- Dashboard
-
-
- Settings
-
- void signOut()}>Sign out
-
-
- ) : (
- <>
- {authError ? (
-
-
- {
- if (!value) return;
- setThemeMode(value as "system" | "light" | "dark");
- }}
- aria-label="Theme mode"
- >
-
-
- System
-
-
-
- Light
-
-
-
- Dark
-
-
-
- {isAuthenticated && me ? (
-
-
-
-
- {authError}{" "}
-
-
- ) : null}
-
-
- )}
-
+
+
+
+
+
+
+
+ Dashboard
+
+
+ Settings
+
+ void signOut()}>Sign out
+
+
+ ) : (
+ <>
+ {authError ? (
+
+
+ {
+ if (!value) return;
+ setThemeMode(value as "system" | "light" | "dark");
+ }}
+ aria-label="Theme mode"
+ >
+
+
+ System
+
+
+
+ Light
+
+
+
+ Dark
+
+
+
+ {isAuthenticated && me ? (
+
+
+
+
+ {authError}{" "}
+
+
+ ) : null}
+
+
+ )}
+
- candidate.key === item.key)}
- onHoverItem={onHoverItem}
- onSelectItem={onSelectItem}
- />
- ))}
- {footer ? (
- candidate.key === footer.key)}
- onHoverItem={onHoverItem}
- onSelectItem={onSelectItem}
- />
- ) : null}
-
- );
+ if (sectionItems.length === 0 && !footer) return null;
+ return (
+ {label}
- {sectionItems.map((item) => (
-
+ candidate.key === item.key)}
+ onHoverItem={onHoverItem}
+ onSelectItem={onSelectItem}
+ />
+ ))}
+ {footer ? (
+ candidate.key === footer.key)}
+ onHoverItem={onHoverItem}
+ onSelectItem={onSelectItem}
+ />
+ ) : null}
+
+ );
}
function TypeaheadRow({
- active,
- index,
- item,
- onHoverItem,
- onSelectItem,
+ active,
+ index,
+ item,
+ onHoverItem,
+ onSelectItem,
}: {
- active: boolean;
- index: number;
- item: TypeaheadItem;
- onHoverItem: (index: number) => void;
- onSelectItem: (item: TypeaheadItem) => void;
+ active: boolean;
+ index: number;
+ item: TypeaheadItem;
+ onHoverItem: (index: number) => void;
+ onSelectItem: (item: TypeaheadItem) => void;
}) {
- const body = getTypeaheadRowBody(item);
- return (
-
- );
+ const body = getTypeaheadRowBody(item);
+ return (
+
+ );
}
function getTypeaheadRowBody(item: TypeaheadItem) {
- if (item.kind === "skill") {
- const owner = item.result.ownerHandle ? `@${item.result.ownerHandle}` : "Skill";
- return {
- icon: "S",
- title: item.result.skill.displayName,
- meta: `${owner} / ${item.result.skill.slug}`,
- };
- }
- if (item.kind === "plugin") {
- return {
- icon: "P",
- title: item.result.plugin.displayName,
- meta: item.result.plugin.ownerHandle
- ? `@${item.result.plugin.ownerHandle} / ${item.result.plugin.name}`
- : item.result.plugin.name,
- };
- }
- return {
- icon: null,
- title: item.label,
- meta: null,
- };
+ if (item.kind === "skill") {
+ const owner = item.result.ownerHandle ? `@${item.result.ownerHandle}` : "Skill";
+ return {
+ icon: "S",
+ title: item.result.skill.displayName,
+ meta: `${owner} / ${item.result.skill.slug}`,
+ };
+ }
+ if (item.kind === "plugin") {
+ return {
+ icon: "P",
+ title: item.result.plugin.displayName,
+ meta: item.result.plugin.ownerHandle
+ ? `@${item.result.plugin.ownerHandle} / ${item.result.plugin.name}`
+ : item.result.plugin.name,
+ };
+ }
+ return {
+ icon: null,
+ title: item.label,
+ meta: null,
+ };
}
function getCurrentRelativeUrl() {
- if (typeof window === "undefined") return "/";
- return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+ if (typeof window === "undefined") return "/";
+ return `${window.location.pathname}${window.location.search}${window.location.hash}`;
}
function getThemeModeIcon(mode: "system" | "light" | "dark") {
- switch (mode) {
- case "light":
- return Sun;
- case "dark":
- return Moon;
- case "system":
- default:
- return Monitor;
- }
+ switch (mode) {
+ case "light":
+ return Sun;
+ case "dark":
+ return Moon;
+ case "system":
+ default:
+ return Monitor;
+ }
}
diff --git a/src/components/MarkdownPreview.test.tsx b/src/components/MarkdownPreview.test.tsx
index 30629727..5a9c149a 100644
--- a/src/components/MarkdownPreview.test.tsx
+++ b/src/components/MarkdownPreview.test.tsx
@@ -5,72 +5,72 @@ import { describe, expect, it } from "vitest";
import { MarkdownPreview } from "./MarkdownPreview";
function renderMarkdown(source: string) {
- // Disable Shiki highlighting to keep the tree synchronous for assertions.
- const { container } = render({label}
+ {sectionItems.map((item) => (
+ block as a real ', () => {
- const container = renderMarkdown(`Hello logo
`);
- const h1 = container.querySelector("h1");
- expect(h1).not.toBeNull();
- expect(h1?.textContent).toBe("Hello logo");
- });
+ it('renders an block as a real ', () => {
+ const container = renderMarkdown(`Hello logo
`);
+ const h1 = container.querySelector("h1");
+ expect(h1).not.toBeNull();
+ expect(h1?.textContent).toBe("Hello logo");
+ });
- it('renders a block as a real ', () => {
- const container = renderMarkdown(`centered`);
- const div = container.querySelector('div[align="center"]');
- expect(div).not.toBeNull();
- expect(div?.textContent).toBe("centered");
- });
+ it('renders a block as a real ', () => {
+ const container = renderMarkdown(`centered`);
+ const div = container.querySelector('div[align="center"]');
+ expect(div).not.toBeNull();
+ expect(div?.textContent).toBe("centered");
+ });
- it("renders with + ![]()
fallback", () => {
- const container = renderMarkdown(
- `
with + ![]()
fallback", () => {
+ const container = renderMarkdown(
+ `![]()
tags with src and alt", () => {
- const container = renderMarkdown(`
`);
- const img = container.querySelector("img");
- expect(img).not.toBeNull();
- // Relative paths render as-is — only external http(s) URLs get proxied.
- expect(img?.getAttribute("src")).toBe("screenshot.png");
- expect(img?.getAttribute("alt")).toBe("Demo screenshot");
- });
+ it("renders standalone ![]()
tags with src and alt", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img).not.toBeNull();
+ // Relative paths render as-is — only external http(s) URLs get proxied.
+ expect(img?.getAttribute("src")).toBe("screenshot.png");
+ expect(img?.getAttribute("alt")).toBe("Demo screenshot");
+ });
- it("routes external https ![]()
URLs through /_vercel/image", () => {
- const container = renderMarkdown(
- `
`,
- );
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
- );
- });
+ it("routes external https ![]()
URLs through /_vercel/image", () => {
+ const container = renderMarkdown(
+ ``,
+ );
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
+ );
+ });
- it("routes external markdown  images through /_vercel/image", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
- );
- });
+ it("routes external markdown  images through /_vercel/image", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
+ );
+ });
- it("renders
as a real line break", () => {
- const container = renderMarkdown(`line one
line two`);
- expect(container.querySelector("br")).not.toBeNull();
- });
+ it("renders
as a real line break", () => {
+ const container = renderMarkdown(`line one
line two`);
+ expect(container.querySelector("br")).not.toBeNull();
+ });
- it("renders the Opik README banner (centered h1 + picture + img)", () => {
- const opikBanner = `
+ it("renders the Opik README banner (centered h1 + picture + img)", () => {
+ const opikBanner = `
OpenClaw Opik Observability Plugin
`;
- const container = renderMarkdown(opikBanner);
- expect(container.querySelector("h1")).not.toBeNull();
- expect(container.querySelector("picture")).not.toBeNull();
- const img = container.querySelector("img");
- expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
- // And the escaped tag must NOT be present as literal text anywhere.
- expect(container.textContent ?? "").not.toContain("");
- });
+ const container = renderMarkdown(opikBanner);
+ expect(container.querySelector("h1")).not.toBeNull();
+ expect(container.querySelector("picture")).not.toBeNull();
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
+ // And the escaped tag must NOT be present as literal text anywhere.
+ expect(container.textContent ?? "").not.toContain("");
+ });
});
describe("MarkdownPreview — standard markdown still renders", () => {
- it("renders ATX headings", () => {
- const container = renderMarkdown(`## Why This Plugin`);
- const h2 = container.querySelector("h2");
- expect(h2?.textContent).toBe("Why This Plugin");
- });
+ it("renders ATX headings", () => {
+ const container = renderMarkdown(`## Why This Plugin`);
+ const h2 = container.querySelector("h2");
+ expect(h2?.textContent).toBe("Why This Plugin");
+ });
- it("renders markdown links", () => {
- const container = renderMarkdown(`[Opik](https://example.com/opik)`);
- const a = container.querySelector("a");
- expect(a?.getAttribute("href")).toBe("https://example.com/opik");
- expect(a?.textContent).toBe("Opik");
- });
+ it("renders markdown links", () => {
+ const container = renderMarkdown(`[Opik](https://example.com/opik)`);
+ const a = container.querySelector("a");
+ expect(a?.getAttribute("href")).toBe("https://example.com/opik");
+ expect(a?.textContent).toBe("Opik");
+ });
- it("renders inline code", () => {
- const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
- const code = container.querySelector("code");
- expect(code?.textContent).toBe("@opik/opik-openclaw");
- });
+ it("renders inline code", () => {
+ const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
+ const code = container.querySelector("code");
+ expect(code?.textContent).toBe("@opik/opik-openclaw");
+ });
- it("renders unordered lists", () => {
- const container = renderMarkdown(`- one\n- two\n- three`);
- const items = container.querySelectorAll("li");
- expect(items.length).toBe(3);
- expect(items[0].textContent).toBe("one");
- });
+ it("renders unordered lists", () => {
+ const container = renderMarkdown(`- one\n- two\n- three`);
+ const items = container.querySelectorAll("li");
+ expect(items.length).toBe(3);
+ expect(items[0].textContent).toBe("one");
+ });
- it("renders GFM tables", () => {
- const container = renderMarkdown(
- ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
- );
- expect(container.querySelector("table")).not.toBeNull();
- expect(container.querySelectorAll("tbody tr").length).toBe(2);
- });
+ it("renders GFM tables", () => {
+ const container = renderMarkdown(
+ ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
+ );
+ expect(container.querySelector("table")).not.toBeNull();
+ expect(container.querySelectorAll("tbody tr").length).toBe(2);
+ });
- it("renders fenced code blocks as ", () => {
- const container = renderMarkdown("```ts\nconst x = 1;\n```");
- const code = container.querySelector("pre code");
- expect(code).not.toBeNull();
- expect(code?.textContent).toContain("const x = 1;");
- });
+ it("renders fenced code blocks as ", () => {
+ const container = renderMarkdown("```ts\nconst x = 1;\n```");
+ const code = container.querySelector("pre code");
+ expect(code).not.toBeNull();
+ expect(code?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — syntax highlighting", () => {
- it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
- const { container } = render(
- {"```ts\nconst x: number = 1;\n```"} ,
- );
+ it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
+ const { container } = render(
+ {"```ts\nconst x: number = 1;\n```"} ,
+ );
- await waitFor(
- () => {
- const pre = container.querySelector("pre");
- // Shiki wraps the output in and tokens are
- // .
- expect(pre?.className ?? "").toMatch(/shiki/);
- const coloredSpans = container.querySelectorAll("pre span[style*='color']");
- expect(coloredSpans.length).toBeGreaterThan(0);
- },
- { timeout: 8000 },
- );
+ await waitFor(
+ () => {
+ const pre = container.querySelector("pre");
+ // Shiki wraps the output in and tokens are
+ // .
+ expect(pre?.className ?? "").toMatch(/shiki/);
+ const coloredSpans = container.querySelectorAll("pre span[style*='color']");
+ expect(coloredSpans.length).toBeGreaterThan(0);
+ },
+ { timeout: 8000 },
+ );
- // Raw code text must still be present after highlighting
- expect(container.querySelector("pre")?.textContent).toContain("const x");
- });
+ // Raw code text must still be present after highlighting
+ expect(container.querySelector("pre")?.textContent).toContain("const x");
+ });
- it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
- const { container } = render(
- {"```ts\nconst x = 1;\n```"} ,
- );
- const pre = container.querySelector("pre");
- // No shiki class, no colored spans
- expect(pre?.className ?? "").not.toMatch(/shiki/);
- expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
- expect(pre?.textContent).toContain("const x = 1;");
- });
+ it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
+ const { container } = render(
+ {"```ts\nconst x = 1;\n```"} ,
+ );
+ const pre = container.querySelector("pre");
+ // No shiki class, no colored spans
+ expect(pre?.className ?? "").not.toMatch(/shiki/);
+ expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
+ expect(pre?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — sanitization of malicious HTML", () => {
- it("strips world`);
- expect(container.querySelector("script")).toBeNull();
- expect(container.textContent ?? "").not.toContain("window.__pwn");
- });
+ it("strips world`);
+ expect(container.querySelector("script")).toBeNull();
+ expect(container.textContent ?? "").not.toContain("window.__pwn");
+ });
- it("strips onerror handlers on ![]()
", () => {
- const container = renderMarkdown(`
`);
- const img = container.querySelector("img");
- // The img itself can render; the handler must be gone.
- expect(img?.getAttribute("onerror")).toBeNull();
- });
+ it("strips onerror handlers on ![]()
", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ // The img itself can render; the handler must be gone.
+ expect(img?.getAttribute("onerror")).toBeNull();
+ });
- it.each([
- "javascript:alert(1)",
- "JaVaScRiPt:alert(1)",
- "data:text/html,",
- "vbscript:msgbox(1)",
- ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
- const container = renderMarkdown(`click`);
- const a = container.querySelector("a");
- // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
- const href = a?.getAttribute("href") ?? "";
- expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
- });
+ it.each([
+ "javascript:alert(1)",
+ "JaVaScRiPt:alert(1)",
+ "data:text/html,",
+ "vbscript:msgbox(1)",
+ ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
+ const container = renderMarkdown(`click`);
+ const a = container.querySelector("a");
+ // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
+ const href = a?.getAttribute("href") ?? "";
+ expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
+ });
});
diff --git a/src/components/MarketplaceIcon.tsx b/src/components/MarketplaceIcon.tsx
index 3e3d6a24..e4bed699 100644
--- a/src/components/MarketplaceIcon.tsx
+++ b/src/components/MarketplaceIcon.tsx
@@ -33,12 +33,7 @@ function getIcon(kind: MarketplaceIconProps["kind"]) {
}
}
-export function MarketplaceIcon({
- kind,
- label,
- imageUrl,
- size = "sm",
-}: MarketplaceIconProps) {
+export function MarketplaceIcon({ kind, label, imageUrl, size = "sm" }: MarketplaceIconProps) {
const Icon = getIcon(kind);
const tone = hashTone(label);
diff --git a/src/components/PackageSourceChooser.tsx b/src/components/PackageSourceChooser.tsx
index f4f8875d..91deac00 100644
--- a/src/components/PackageSourceChooser.tsx
+++ b/src/components/PackageSourceChooser.tsx
@@ -9,7 +9,7 @@ import { Button } from "./ui/button";
import { Card } from "./ui/card";
const OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL =
- 'https://docs.openclaw.ai/plugins/sdk-setup#package-metadata';
+ "https://docs.openclaw.ai/plugins/sdk-setup#package-metadata";
export function PackageSourceChooser(props: {
files: File[];
diff --git a/src/components/PluginListItem.tsx b/src/components/PluginListItem.tsx
index adad956c..c6f8caa1 100644
--- a/src/components/PluginListItem.tsx
+++ b/src/components/PluginListItem.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
+import type { PackageListItem } from "../lib/packageApi";
+import { familyLabel } from "../lib/packageLabels";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import { familyLabel } from "../lib/packageLabels";
-import type { PackageListItem } from "../lib/packageApi";
type PluginListItemProps = {
item: PackageListItem;
@@ -10,7 +10,12 @@ type PluginListItemProps = {
export function PluginListItem({ item }: PluginListItemProps) {
return (
-
+
{familyLabel(item.family)}
{item.isOfficial ? Verified : null}
- {item.summary ?? "Plugin package for agent workflows."}
+
+ {item.summary ?? "Plugin package for agent workflows."}
+
Plugin
{item.latestVersion ? (
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 4d067dd6..0fcb10b2 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -10,11 +10,7 @@ type SignInButtonProps = Omit & {
redirectTo?: string;
};
-export function SignInButton({
- redirectTo,
- children = "Sign In",
- ...props
-}: SignInButtonProps) {
+export function SignInButton({ redirectTo, children = "Sign In", ...props }: SignInButtonProps) {
const { signIn } = useAuthActions();
return (
@@ -32,9 +28,7 @@ export function SignInButton({
}
})
.catch((error) => {
- setAuthError(
- getUserFacingAuthError(error, "Sign in failed. Please try again."),
- );
+ setAuthError(getUserFacingAuthError(error, "Sign in failed. Please try again."));
});
}}
>
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
index 60aa5fe4..7076ff69 100644
--- a/src/components/SkillCard.tsx
+++ b/src/components/SkillCard.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
+import type { PublicSkill } from "../lib/publicUser";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import type { PublicSkill } from "../lib/publicUser";
type SkillCardProps = {
skill: PublicSkill;
@@ -33,9 +33,7 @@ export function SkillCard({
{hasTags ? (
{badges.map((label) => (
-
- {label}
-
+ {label}
))}
{chip ? {chip} : null}
{platformLabels?.map((label) => (
diff --git a/src/components/SkillDiffCard.test.tsx b/src/components/SkillDiffCard.test.tsx
index 5c71dac3..8aa1e9e9 100644
--- a/src/components/SkillDiffCard.test.tsx
+++ b/src/components/SkillDiffCard.test.tsx
@@ -20,12 +20,7 @@ vi.mock("@monaco-editor/react", () => ({
}: {
className?: string;
options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
- }) => (
-
- Compare versions
-
-
- Inline or side-by-side diff for any file.
-
+ Compare versions
+ Inline or side-by-side diff for any file.
{!diffUnavailable ? (
What ClawHub will not host
- ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to
- evade defenses, scam people, invade privacy, or enable non-consensual behavior, it
- does not belong here.
+ ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to evade
+ defenses, scam people, invade privacy, or enable non-consensual behavior, it does not
+ belong here.
@@ -203,9 +195,7 @@ function AboutPage() {
Hello logo
`); - const h1 = container.querySelector("h1"); - expect(h1).not.toBeNull(); - expect(h1?.textContent).toBe("Hello logo"); - }); + it('renders an block as a real ', () => {
+ const container = renderMarkdown(`Hello logo
`);
+ const h1 = container.querySelector("h1");
+ expect(h1).not.toBeNull();
+ expect(h1?.textContent).toBe("Hello logo");
+ });
- it('renders a block as a real ', () => {
- const container = renderMarkdown(`centered`);
- const div = container.querySelector('div[align="center"]');
- expect(div).not.toBeNull();
- expect(div?.textContent).toBe("centered");
- });
+ it('renders a block as a real ', () => {
+ const container = renderMarkdown(`centered`);
+ const div = container.querySelector('div[align="center"]');
+ expect(div).not.toBeNull();
+ expect(div?.textContent).toBe("centered");
+ });
- it("renders with + ![]()
fallback", () => {
- const container = renderMarkdown(
- ` with + ![]()
fallback", () => {
+ const container = renderMarkdown(
+ `![]()
tags with src and alt", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img).not.toBeNull();
- // Relative paths render as-is — only external http(s) URLs get proxied.
- expect(img?.getAttribute("src")).toBe("screenshot.png");
- expect(img?.getAttribute("alt")).toBe("Demo screenshot");
- });
+ it("renders standalone ![]()
tags with src and alt", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img).not.toBeNull();
+ // Relative paths render as-is — only external http(s) URLs get proxied.
+ expect(img?.getAttribute("src")).toBe("screenshot.png");
+ expect(img?.getAttribute("alt")).toBe("Demo screenshot");
+ });
- it("routes external https ![]()
URLs through /_vercel/image", () => {
- const container = renderMarkdown(
- ``,
- );
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
- );
- });
+ it("routes external https ![]()
URLs through /_vercel/image", () => {
+ const container = renderMarkdown(
+ ``,
+ );
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
+ );
+ });
- it("routes external markdown  images through /_vercel/image", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
- );
- });
+ it("routes external markdown  images through /_vercel/image", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
+ );
+ });
- it("renders
as a real line break", () => {
- const container = renderMarkdown(`line one
line two`);
- expect(container.querySelector("br")).not.toBeNull();
- });
+ it("renders
as a real line break", () => {
+ const container = renderMarkdown(`line one
line two`);
+ expect(container.querySelector("br")).not.toBeNull();
+ });
- it("renders the Opik README banner (centered h1 + picture + img)", () => {
- const opikBanner = `
+ it("renders the Opik README banner (centered h1 + picture + img)", () => {
+ const opikBanner = `
OpenClaw Opik Observability Plugin
`;
- const container = renderMarkdown(opikBanner);
- expect(container.querySelector("h1")).not.toBeNull();
- expect(container.querySelector("picture")).not.toBeNull();
- const img = container.querySelector("img");
- expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
- // And the escaped tag must NOT be present as literal text anywhere.
- expect(container.textContent ?? "").not.toContain("");
- });
+ const container = renderMarkdown(opikBanner);
+ expect(container.querySelector("h1")).not.toBeNull();
+ expect(container.querySelector("picture")).not.toBeNull();
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
+ // And the escaped tag must NOT be present as literal text anywhere.
+ expect(container.textContent ?? "").not.toContain("");
+ });
});
describe("MarkdownPreview — standard markdown still renders", () => {
- it("renders ATX headings", () => {
- const container = renderMarkdown(`## Why This Plugin`);
- const h2 = container.querySelector("h2");
- expect(h2?.textContent).toBe("Why This Plugin");
- });
+ it("renders ATX headings", () => {
+ const container = renderMarkdown(`## Why This Plugin`);
+ const h2 = container.querySelector("h2");
+ expect(h2?.textContent).toBe("Why This Plugin");
+ });
- it("renders markdown links", () => {
- const container = renderMarkdown(`[Opik](https://example.com/opik)`);
- const a = container.querySelector("a");
- expect(a?.getAttribute("href")).toBe("https://example.com/opik");
- expect(a?.textContent).toBe("Opik");
- });
+ it("renders markdown links", () => {
+ const container = renderMarkdown(`[Opik](https://example.com/opik)`);
+ const a = container.querySelector("a");
+ expect(a?.getAttribute("href")).toBe("https://example.com/opik");
+ expect(a?.textContent).toBe("Opik");
+ });
- it("renders inline code", () => {
- const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
- const code = container.querySelector("code");
- expect(code?.textContent).toBe("@opik/opik-openclaw");
- });
+ it("renders inline code", () => {
+ const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
+ const code = container.querySelector("code");
+ expect(code?.textContent).toBe("@opik/opik-openclaw");
+ });
- it("renders unordered lists", () => {
- const container = renderMarkdown(`- one\n- two\n- three`);
- const items = container.querySelectorAll("li");
- expect(items.length).toBe(3);
- expect(items[0].textContent).toBe("one");
- });
+ it("renders unordered lists", () => {
+ const container = renderMarkdown(`- one\n- two\n- three`);
+ const items = container.querySelectorAll("li");
+ expect(items.length).toBe(3);
+ expect(items[0].textContent).toBe("one");
+ });
- it("renders GFM tables", () => {
- const container = renderMarkdown(
- ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
- );
- expect(container.querySelector("table")).not.toBeNull();
- expect(container.querySelectorAll("tbody tr").length).toBe(2);
- });
+ it("renders GFM tables", () => {
+ const container = renderMarkdown(
+ ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
+ );
+ expect(container.querySelector("table")).not.toBeNull();
+ expect(container.querySelectorAll("tbody tr").length).toBe(2);
+ });
- it("renders fenced code blocks as ", () => {
- const container = renderMarkdown("```ts\nconst x = 1;\n```");
- const code = container.querySelector("pre code");
- expect(code).not.toBeNull();
- expect(code?.textContent).toContain("const x = 1;");
- });
+ it("renders fenced code blocks as ", () => {
+ const container = renderMarkdown("```ts\nconst x = 1;\n```");
+ const code = container.querySelector("pre code");
+ expect(code).not.toBeNull();
+ expect(code?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — syntax highlighting", () => {
- it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
- const { container } = render(
- {"```ts\nconst x: number = 1;\n```"} ,
- );
+ it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
+ const { container } = render(
+ {"```ts\nconst x: number = 1;\n```"} ,
+ );
- await waitFor(
- () => {
- const pre = container.querySelector("pre");
- // Shiki wraps the output in and tokens are
- // .
- expect(pre?.className ?? "").toMatch(/shiki/);
- const coloredSpans = container.querySelectorAll("pre span[style*='color']");
- expect(coloredSpans.length).toBeGreaterThan(0);
- },
- { timeout: 8000 },
- );
+ await waitFor(
+ () => {
+ const pre = container.querySelector("pre");
+ // Shiki wraps the output in and tokens are
+ // .
+ expect(pre?.className ?? "").toMatch(/shiki/);
+ const coloredSpans = container.querySelectorAll("pre span[style*='color']");
+ expect(coloredSpans.length).toBeGreaterThan(0);
+ },
+ { timeout: 8000 },
+ );
- // Raw code text must still be present after highlighting
- expect(container.querySelector("pre")?.textContent).toContain("const x");
- });
+ // Raw code text must still be present after highlighting
+ expect(container.querySelector("pre")?.textContent).toContain("const x");
+ });
- it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
- const { container } = render(
- {"```ts\nconst x = 1;\n```"} ,
- );
- const pre = container.querySelector("pre");
- // No shiki class, no colored spans
- expect(pre?.className ?? "").not.toMatch(/shiki/);
- expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
- expect(pre?.textContent).toContain("const x = 1;");
- });
+ it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
+ const { container } = render(
+ {"```ts\nconst x = 1;\n```"} ,
+ );
+ const pre = container.querySelector("pre");
+ // No shiki class, no colored spans
+ expect(pre?.className ?? "").not.toMatch(/shiki/);
+ expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
+ expect(pre?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — sanitization of malicious HTML", () => {
- it("strips world`);
- expect(container.querySelector("script")).toBeNull();
- expect(container.textContent ?? "").not.toContain("window.__pwn");
- });
+ it("strips world`);
+ expect(container.querySelector("script")).toBeNull();
+ expect(container.textContent ?? "").not.toContain("window.__pwn");
+ });
- it("strips onerror handlers on ![]()
", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- // The img itself can render; the handler must be gone.
- expect(img?.getAttribute("onerror")).toBeNull();
- });
+ it("strips onerror handlers on ![]()
", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ // The img itself can render; the handler must be gone.
+ expect(img?.getAttribute("onerror")).toBeNull();
+ });
- it.each([
- "javascript:alert(1)",
- "JaVaScRiPt:alert(1)",
- "data:text/html,",
- "vbscript:msgbox(1)",
- ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
- const container = renderMarkdown(`click`);
- const a = container.querySelector("a");
- // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
- const href = a?.getAttribute("href") ?? "";
- expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
- });
+ it.each([
+ "javascript:alert(1)",
+ "JaVaScRiPt:alert(1)",
+ "data:text/html,",
+ "vbscript:msgbox(1)",
+ ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
+ const container = renderMarkdown(`click`);
+ const a = container.querySelector("a");
+ // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
+ const href = a?.getAttribute("href") ?? "";
+ expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
+ });
});
diff --git a/src/components/MarketplaceIcon.tsx b/src/components/MarketplaceIcon.tsx
index 3e3d6a24..e4bed699 100644
--- a/src/components/MarketplaceIcon.tsx
+++ b/src/components/MarketplaceIcon.tsx
@@ -33,12 +33,7 @@ function getIcon(kind: MarketplaceIconProps["kind"]) {
}
}
-export function MarketplaceIcon({
- kind,
- label,
- imageUrl,
- size = "sm",
-}: MarketplaceIconProps) {
+export function MarketplaceIcon({ kind, label, imageUrl, size = "sm" }: MarketplaceIconProps) {
const Icon = getIcon(kind);
const tone = hashTone(label);
diff --git a/src/components/PackageSourceChooser.tsx b/src/components/PackageSourceChooser.tsx
index f4f8875d..91deac00 100644
--- a/src/components/PackageSourceChooser.tsx
+++ b/src/components/PackageSourceChooser.tsx
@@ -9,7 +9,7 @@ import { Button } from "./ui/button";
import { Card } from "./ui/card";
const OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL =
- 'https://docs.openclaw.ai/plugins/sdk-setup#package-metadata';
+ "https://docs.openclaw.ai/plugins/sdk-setup#package-metadata";
export function PackageSourceChooser(props: {
files: File[];
diff --git a/src/components/PluginListItem.tsx b/src/components/PluginListItem.tsx
index adad956c..c6f8caa1 100644
--- a/src/components/PluginListItem.tsx
+++ b/src/components/PluginListItem.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
+import type { PackageListItem } from "../lib/packageApi";
+import { familyLabel } from "../lib/packageLabels";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import { familyLabel } from "../lib/packageLabels";
-import type { PackageListItem } from "../lib/packageApi";
type PluginListItemProps = {
item: PackageListItem;
@@ -10,7 +10,12 @@ type PluginListItemProps = {
export function PluginListItem({ item }: PluginListItemProps) {
return (
-
+
{familyLabel(item.family)}
{item.isOfficial ? Verified : null}
- {item.summary ?? "Plugin package for agent workflows."}
+
+ {item.summary ?? "Plugin package for agent workflows."}
+
Plugin
{item.latestVersion ? (
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 4d067dd6..0fcb10b2 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -10,11 +10,7 @@ type SignInButtonProps = Omit & {
redirectTo?: string;
};
-export function SignInButton({
- redirectTo,
- children = "Sign In",
- ...props
-}: SignInButtonProps) {
+export function SignInButton({ redirectTo, children = "Sign In", ...props }: SignInButtonProps) {
const { signIn } = useAuthActions();
return (
@@ -32,9 +28,7 @@ export function SignInButton({
}
})
.catch((error) => {
- setAuthError(
- getUserFacingAuthError(error, "Sign in failed. Please try again."),
- );
+ setAuthError(getUserFacingAuthError(error, "Sign in failed. Please try again."));
});
}}
>
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
index 60aa5fe4..7076ff69 100644
--- a/src/components/SkillCard.tsx
+++ b/src/components/SkillCard.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
+import type { PublicSkill } from "../lib/publicUser";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import type { PublicSkill } from "../lib/publicUser";
type SkillCardProps = {
skill: PublicSkill;
@@ -33,9 +33,7 @@ export function SkillCard({
{hasTags ? (
{badges.map((label) => (
-
- {label}
-
+ {label}
))}
{chip ? {chip} : null}
{platformLabels?.map((label) => (
diff --git a/src/components/SkillDiffCard.test.tsx b/src/components/SkillDiffCard.test.tsx
index 5c71dac3..8aa1e9e9 100644
--- a/src/components/SkillDiffCard.test.tsx
+++ b/src/components/SkillDiffCard.test.tsx
@@ -20,12 +20,7 @@ vi.mock("@monaco-editor/react", () => ({
}: {
className?: string;
options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
- }) => (
-
- Compare versions
-
-
- Inline or side-by-side diff for any file.
-
+ Compare versions
+ Inline or side-by-side diff for any file.
{!diffUnavailable ? (
What ClawHub will not host
- ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to
- evade defenses, scam people, invade privacy, or enable non-consensual behavior, it
- does not belong here.
+ ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to evade
+ defenses, scam people, invade privacy, or enable non-consensual behavior, it does not
+ belong here.
@@ -203,9 +195,7 @@ function AboutPage() {
Hello logo
`); + const h1 = container.querySelector("h1"); + expect(h1).not.toBeNull(); + expect(h1?.textContent).toBe("Hello logo"); + }); - it('renders a block as a real
', () => {
- const container = renderMarkdown(`
centered
`);
- const div = container.querySelector('div[align="center"]');
- expect(div).not.toBeNull();
- expect(div?.textContent).toBe("centered");
- });
+ it('renders a block as a real
', () => {
+ const container = renderMarkdown(` with + ![]()
fallback", () => {
- const container = renderMarkdown(
- ` with + ![]()
fallback", () => {
+ const container = renderMarkdown(
+ `![]()
tags with src and alt", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img).not.toBeNull();
- // Relative paths render as-is — only external http(s) URLs get proxied.
- expect(img?.getAttribute("src")).toBe("screenshot.png");
- expect(img?.getAttribute("alt")).toBe("Demo screenshot");
- });
+ it("renders standalone ![]()
tags with src and alt", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img).not.toBeNull();
+ // Relative paths render as-is — only external http(s) URLs get proxied.
+ expect(img?.getAttribute("src")).toBe("screenshot.png");
+ expect(img?.getAttribute("alt")).toBe("Demo screenshot");
+ });
- it("routes external https ![]()
URLs through /_vercel/image", () => {
- const container = renderMarkdown(
- ``,
- );
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
- );
- });
+ it("routes external https ![]()
URLs through /_vercel/image", () => {
+ const container = renderMarkdown(
+ ``,
+ );
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
+ );
+ });
- it("routes external markdown  images through /_vercel/image", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
- );
- });
+ it("routes external markdown  images through /_vercel/image", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
+ );
+ });
- it("renders
as a real line break", () => { - const container = renderMarkdown(`line one
line two`); - expect(container.querySelector("br")).not.toBeNull(); - }); + it("renders
as a real line break", () => { + const container = renderMarkdown(`line one
line two`); + expect(container.querySelector("br")).not.toBeNull(); + }); - it("renders the Opik README banner (centered h1 + picture + img)", () => { - const opikBanner = `
+ it("renders the Opik README banner (centered h1 + picture + img)", () => {
+ const opikBanner = `
centered
`);
+ const div = container.querySelector('div[align="center"]');
+ expect(div).not.toBeNull();
+ expect(div?.textContent).toBe("centered");
+ });
- it("renders 
fallback", () => {
- const container = renderMarkdown(
- ` fallback", () => {
+ const container = renderMarkdown(
+ ` tags with src and alt", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img).not.toBeNull();
- // Relative paths render as-is — only external http(s) URLs get proxied.
- expect(img?.getAttribute("src")).toBe("screenshot.png");
- expect(img?.getAttribute("alt")).toBe("Demo screenshot");
- });
+ it("renders standalone tags with src and alt", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img).not.toBeNull();
+ // Relative paths render as-is — only external http(s) URLs get proxied.
+ expect(img?.getAttribute("src")).toBe("screenshot.png");
+ expect(img?.getAttribute("alt")).toBe("Demo screenshot");
+ });
- it("routes external https URLs through /_vercel/image", () => {
- const container = renderMarkdown(
- ``,
- );
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
- );
- });
+ it("routes external https URLs through /_vercel/image", () => {
+ const container = renderMarkdown(
+ ``,
+ );
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Ffoo%2Fbar%2Fmain%2Flogo.png&w=1024&q=75",
+ );
+ });
- it("routes external markdown  images through /_vercel/image", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- expect(img?.getAttribute("src")).toBe(
- "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
- );
- });
+ it("routes external markdown  images through /_vercel/image", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("src")).toBe(
+ "/_vercel/image?url=https%3A%2F%2Fimg.shields.io%2Fbadge%2Fx-y-blue.svg&w=1024&q=75",
+ );
+ });
- it("renders as a real line break", () => { - const container = renderMarkdown(`line one
line two`); - expect(container.querySelector("br")).not.toBeNull(); - }); + it("renders
as a real line break", () => { + const container = renderMarkdown(`line one
line two`); + expect(container.querySelector("br")).not.toBeNull(); + }); - it("renders the Opik README banner (centered h1 + picture + img)", () => { - const opikBanner = `
+ it("renders the Opik README banner (centered h1 + picture + img)", () => {
+ const opikBanner = `
OpenClaw Opik Observability Plugin
`;
- const container = renderMarkdown(opikBanner);
- expect(container.querySelector("h1")).not.toBeNull();
- expect(container.querySelector("picture")).not.toBeNull();
- const img = container.querySelector("img");
- expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
- // And the escaped tag must NOT be present as literal text anywhere.
- expect(container.textContent ?? "").not.toContain("");
- });
+ const container = renderMarkdown(opikBanner);
+ expect(container.querySelector("h1")).not.toBeNull();
+ expect(container.querySelector("picture")).not.toBeNull();
+ const img = container.querySelector("img");
+ expect(img?.getAttribute("alt")).toBe("Comet Opik logo");
+ // And the escaped tag must NOT be present as literal text anywhere.
+ expect(container.textContent ?? "").not.toContain("");
+ });
});
describe("MarkdownPreview — standard markdown still renders", () => {
- it("renders ATX headings", () => {
- const container = renderMarkdown(`## Why This Plugin`);
- const h2 = container.querySelector("h2");
- expect(h2?.textContent).toBe("Why This Plugin");
- });
+ it("renders ATX headings", () => {
+ const container = renderMarkdown(`## Why This Plugin`);
+ const h2 = container.querySelector("h2");
+ expect(h2?.textContent).toBe("Why This Plugin");
+ });
- it("renders markdown links", () => {
- const container = renderMarkdown(`[Opik](https://example.com/opik)`);
- const a = container.querySelector("a");
- expect(a?.getAttribute("href")).toBe("https://example.com/opik");
- expect(a?.textContent).toBe("Opik");
- });
+ it("renders markdown links", () => {
+ const container = renderMarkdown(`[Opik](https://example.com/opik)`);
+ const a = container.querySelector("a");
+ expect(a?.getAttribute("href")).toBe("https://example.com/opik");
+ expect(a?.textContent).toBe("Opik");
+ });
- it("renders inline code", () => {
- const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
- const code = container.querySelector("code");
- expect(code?.textContent).toBe("@opik/opik-openclaw");
- });
+ it("renders inline code", () => {
+ const container = renderMarkdown("Use `@opik/opik-openclaw` now.");
+ const code = container.querySelector("code");
+ expect(code?.textContent).toBe("@opik/opik-openclaw");
+ });
- it("renders unordered lists", () => {
- const container = renderMarkdown(`- one\n- two\n- three`);
- const items = container.querySelectorAll("li");
- expect(items.length).toBe(3);
- expect(items[0].textContent).toBe("one");
- });
+ it("renders unordered lists", () => {
+ const container = renderMarkdown(`- one\n- two\n- three`);
+ const items = container.querySelectorAll("li");
+ expect(items.length).toBe(3);
+ expect(items[0].textContent).toBe("one");
+ });
- it("renders GFM tables", () => {
- const container = renderMarkdown(
- ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
- );
- expect(container.querySelector("table")).not.toBeNull();
- expect(container.querySelectorAll("tbody tr").length).toBe(2);
- });
+ it("renders GFM tables", () => {
+ const container = renderMarkdown(
+ ["| Key | Value |", "| --- | ----- |", "| a | 1 |", "| b | 2 |"].join("\n"),
+ );
+ expect(container.querySelector("table")).not.toBeNull();
+ expect(container.querySelectorAll("tbody tr").length).toBe(2);
+ });
- it("renders fenced code blocks as ", () => {
- const container = renderMarkdown("```ts\nconst x = 1;\n```");
- const code = container.querySelector("pre code");
- expect(code).not.toBeNull();
- expect(code?.textContent).toContain("const x = 1;");
- });
+ it("renders fenced code blocks as ", () => {
+ const container = renderMarkdown("```ts\nconst x = 1;\n```");
+ const code = container.querySelector("pre code");
+ expect(code).not.toBeNull();
+ expect(code?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — syntax highlighting", () => {
- it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
- const { container } = render(
- {"```ts\nconst x: number = 1;\n```"} ,
- );
+ it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
+ const { container } = render(
+ {"```ts\nconst x: number = 1;\n```"} ,
+ );
- await waitFor(
- () => {
- const pre = container.querySelector("pre");
- // Shiki wraps the output in and tokens are
- // .
- expect(pre?.className ?? "").toMatch(/shiki/);
- const coloredSpans = container.querySelectorAll("pre span[style*='color']");
- expect(coloredSpans.length).toBeGreaterThan(0);
- },
- { timeout: 8000 },
- );
+ await waitFor(
+ () => {
+ const pre = container.querySelector("pre");
+ // Shiki wraps the output in and tokens are
+ // .
+ expect(pre?.className ?? "").toMatch(/shiki/);
+ const coloredSpans = container.querySelectorAll("pre span[style*='color']");
+ expect(coloredSpans.length).toBeGreaterThan(0);
+ },
+ { timeout: 8000 },
+ );
- // Raw code text must still be present after highlighting
- expect(container.querySelector("pre")?.textContent).toContain("const x");
- });
+ // Raw code text must still be present after highlighting
+ expect(container.querySelector("pre")?.textContent).toContain("const x");
+ });
- it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
- const { container } = render(
- {"```ts\nconst x = 1;\n```"} ,
- );
- const pre = container.querySelector("pre");
- // No shiki class, no colored spans
- expect(pre?.className ?? "").not.toMatch(/shiki/);
- expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
- expect(pre?.textContent).toContain("const x = 1;");
- });
+ it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
+ const { container } = render(
+ {"```ts\nconst x = 1;\n```"} ,
+ );
+ const pre = container.querySelector("pre");
+ // No shiki class, no colored spans
+ expect(pre?.className ?? "").not.toMatch(/shiki/);
+ expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
+ expect(pre?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — sanitization of malicious HTML", () => {
- it("strips world`);
- expect(container.querySelector("script")).toBeNull();
- expect(container.textContent ?? "").not.toContain("window.__pwn");
- });
+ it("strips world`);
+ expect(container.querySelector("script")).toBeNull();
+ expect(container.textContent ?? "").not.toContain("window.__pwn");
+ });
- it("strips onerror handlers on ![]()
", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- // The img itself can render; the handler must be gone.
- expect(img?.getAttribute("onerror")).toBeNull();
- });
+ it("strips onerror handlers on ![]()
", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ // The img itself can render; the handler must be gone.
+ expect(img?.getAttribute("onerror")).toBeNull();
+ });
- it.each([
- "javascript:alert(1)",
- "JaVaScRiPt:alert(1)",
- "data:text/html,",
- "vbscript:msgbox(1)",
- ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
- const container = renderMarkdown(`click`);
- const a = container.querySelector("a");
- // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
- const href = a?.getAttribute("href") ?? "";
- expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
- });
+ it.each([
+ "javascript:alert(1)",
+ "JaVaScRiPt:alert(1)",
+ "data:text/html,",
+ "vbscript:msgbox(1)",
+ ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
+ const container = renderMarkdown(`click`);
+ const a = container.querySelector("a");
+ // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
+ const href = a?.getAttribute("href") ?? "";
+ expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
+ });
});
diff --git a/src/components/MarketplaceIcon.tsx b/src/components/MarketplaceIcon.tsx
index 3e3d6a24..e4bed699 100644
--- a/src/components/MarketplaceIcon.tsx
+++ b/src/components/MarketplaceIcon.tsx
@@ -33,12 +33,7 @@ function getIcon(kind: MarketplaceIconProps["kind"]) {
}
}
-export function MarketplaceIcon({
- kind,
- label,
- imageUrl,
- size = "sm",
-}: MarketplaceIconProps) {
+export function MarketplaceIcon({ kind, label, imageUrl, size = "sm" }: MarketplaceIconProps) {
const Icon = getIcon(kind);
const tone = hashTone(label);
diff --git a/src/components/PackageSourceChooser.tsx b/src/components/PackageSourceChooser.tsx
index f4f8875d..91deac00 100644
--- a/src/components/PackageSourceChooser.tsx
+++ b/src/components/PackageSourceChooser.tsx
@@ -9,7 +9,7 @@ import { Button } from "./ui/button";
import { Card } from "./ui/card";
const OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL =
- 'https://docs.openclaw.ai/plugins/sdk-setup#package-metadata';
+ "https://docs.openclaw.ai/plugins/sdk-setup#package-metadata";
export function PackageSourceChooser(props: {
files: File[];
diff --git a/src/components/PluginListItem.tsx b/src/components/PluginListItem.tsx
index adad956c..c6f8caa1 100644
--- a/src/components/PluginListItem.tsx
+++ b/src/components/PluginListItem.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
+import type { PackageListItem } from "../lib/packageApi";
+import { familyLabel } from "../lib/packageLabels";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import { familyLabel } from "../lib/packageLabels";
-import type { PackageListItem } from "../lib/packageApi";
type PluginListItemProps = {
item: PackageListItem;
@@ -10,7 +10,12 @@ type PluginListItemProps = {
export function PluginListItem({ item }: PluginListItemProps) {
return (
-
+
{familyLabel(item.family)}
{item.isOfficial ? Verified : null}
- {item.summary ?? "Plugin package for agent workflows."}
+
+ {item.summary ?? "Plugin package for agent workflows."}
+
Plugin
{item.latestVersion ? (
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 4d067dd6..0fcb10b2 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -10,11 +10,7 @@ type SignInButtonProps = Omit & {
redirectTo?: string;
};
-export function SignInButton({
- redirectTo,
- children = "Sign In",
- ...props
-}: SignInButtonProps) {
+export function SignInButton({ redirectTo, children = "Sign In", ...props }: SignInButtonProps) {
const { signIn } = useAuthActions();
return (
@@ -32,9 +28,7 @@ export function SignInButton({
}
})
.catch((error) => {
- setAuthError(
- getUserFacingAuthError(error, "Sign in failed. Please try again."),
- );
+ setAuthError(getUserFacingAuthError(error, "Sign in failed. Please try again."));
});
}}
>
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
index 60aa5fe4..7076ff69 100644
--- a/src/components/SkillCard.tsx
+++ b/src/components/SkillCard.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
+import type { PublicSkill } from "../lib/publicUser";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import type { PublicSkill } from "../lib/publicUser";
type SkillCardProps = {
skill: PublicSkill;
@@ -33,9 +33,7 @@ export function SkillCard({
{hasTags ? (
{badges.map((label) => (
-
- {label}
-
+ {label}
))}
{chip ? {chip} : null}
{platformLabels?.map((label) => (
diff --git a/src/components/SkillDiffCard.test.tsx b/src/components/SkillDiffCard.test.tsx
index 5c71dac3..8aa1e9e9 100644
--- a/src/components/SkillDiffCard.test.tsx
+++ b/src/components/SkillDiffCard.test.tsx
@@ -20,12 +20,7 @@ vi.mock("@monaco-editor/react", () => ({
}: {
className?: string;
options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
- }) => (
-
- Compare versions
-
-
- Inline or side-by-side diff for any file.
-
+ Compare versions
+ Inline or side-by-side diff for any file.
{!diffUnavailable ? (
What ClawHub will not host
- ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to
- evade defenses, scam people, invade privacy, or enable non-consensual behavior, it
- does not belong here.
+ ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to evade
+ defenses, scam people, invade privacy, or enable non-consensual behavior, it does not
+ belong here.
@@ -203,9 +195,7 @@ function AboutPage() {
OpenClaw Opik Observability Plugin
", () => {
- const container = renderMarkdown("```ts\nconst x = 1;\n```");
- const code = container.querySelector("pre code");
- expect(code).not.toBeNull();
- expect(code?.textContent).toContain("const x = 1;");
- });
+ it("renders fenced code blocks as ", () => {
+ const container = renderMarkdown("```ts\nconst x = 1;\n```");
+ const code = container.querySelector("pre code");
+ expect(code).not.toBeNull();
+ expect(code?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — syntax highlighting", () => {
- it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
- const { container } = render(
- {"```ts\nconst x: number = 1;\n```"} ,
- );
+ it("shiki-highlights fenced code blocks (produces colored tokens)", async () => {
+ const { container } = render(
+ {"```ts\nconst x: number = 1;\n```"} ,
+ );
- await waitFor(
- () => {
- const pre = container.querySelector("pre");
- // Shiki wraps the output in and tokens are
- // .
- expect(pre?.className ?? "").toMatch(/shiki/);
- const coloredSpans = container.querySelectorAll("pre span[style*='color']");
- expect(coloredSpans.length).toBeGreaterThan(0);
- },
- { timeout: 8000 },
- );
+ await waitFor(
+ () => {
+ const pre = container.querySelector("pre");
+ // Shiki wraps the output in and tokens are
+ // .
+ expect(pre?.className ?? "").toMatch(/shiki/);
+ const coloredSpans = container.querySelectorAll("pre span[style*='color']");
+ expect(coloredSpans.length).toBeGreaterThan(0);
+ },
+ { timeout: 8000 },
+ );
- // Raw code text must still be present after highlighting
- expect(container.querySelector("pre")?.textContent).toContain("const x");
- });
+ // Raw code text must still be present after highlighting
+ expect(container.querySelector("pre")?.textContent).toContain("const x");
+ });
- it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
- const { container } = render(
- {"```ts\nconst x = 1;\n```"} ,
- );
- const pre = container.querySelector("pre");
- // No shiki class, no colored spans
- expect(pre?.className ?? "").not.toMatch(/shiki/);
- expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
- expect(pre?.textContent).toContain("const x = 1;");
- });
+ it("leaves the highlight prop honored — highlight={false} renders plain ", () => {
+ const { container } = render(
+ {"```ts\nconst x = 1;\n```"} ,
+ );
+ const pre = container.querySelector("pre");
+ // No shiki class, no colored spans
+ expect(pre?.className ?? "").not.toMatch(/shiki/);
+ expect(container.querySelectorAll("pre span[style*='color']").length).toBe(0);
+ expect(pre?.textContent).toContain("const x = 1;");
+ });
});
describe("MarkdownPreview — sanitization of malicious HTML", () => {
- it("strips world`);
- expect(container.querySelector("script")).toBeNull();
- expect(container.textContent ?? "").not.toContain("window.__pwn");
- });
+ it("strips world`);
+ expect(container.querySelector("script")).toBeNull();
+ expect(container.textContent ?? "").not.toContain("window.__pwn");
+ });
- it("strips onerror handlers on ![]()
", () => {
- const container = renderMarkdown(``);
- const img = container.querySelector("img");
- // The img itself can render; the handler must be gone.
- expect(img?.getAttribute("onerror")).toBeNull();
- });
+ it("strips onerror handlers on ![]()
", () => {
+ const container = renderMarkdown(``);
+ const img = container.querySelector("img");
+ // The img itself can render; the handler must be gone.
+ expect(img?.getAttribute("onerror")).toBeNull();
+ });
- it.each([
- "javascript:alert(1)",
- "JaVaScRiPt:alert(1)",
- "data:text/html,",
- "vbscript:msgbox(1)",
- ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
- const container = renderMarkdown(`click`);
- const a = container.querySelector("a");
- // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
- const href = a?.getAttribute("href") ?? "";
- expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
- });
+ it.each([
+ "javascript:alert(1)",
+ "JaVaScRiPt:alert(1)",
+ "data:text/html,",
+ "vbscript:msgbox(1)",
+ ])("strips unsafe hrefs on anchors: %s", (unsafeHref) => {
+ const container = renderMarkdown(`click`);
+ const a = container.querySelector("a");
+ // Either the href is removed entirely or rewritten; it must not keep an executable scheme.
+ const href = a?.getAttribute("href") ?? "";
+ expect(href).not.toMatch(/^\s*(javascript|data|vbscript):/i);
+ });
});
diff --git a/src/components/MarketplaceIcon.tsx b/src/components/MarketplaceIcon.tsx
index 3e3d6a24..e4bed699 100644
--- a/src/components/MarketplaceIcon.tsx
+++ b/src/components/MarketplaceIcon.tsx
@@ -33,12 +33,7 @@ function getIcon(kind: MarketplaceIconProps["kind"]) {
}
}
-export function MarketplaceIcon({
- kind,
- label,
- imageUrl,
- size = "sm",
-}: MarketplaceIconProps) {
+export function MarketplaceIcon({ kind, label, imageUrl, size = "sm" }: MarketplaceIconProps) {
const Icon = getIcon(kind);
const tone = hashTone(label);
diff --git a/src/components/PackageSourceChooser.tsx b/src/components/PackageSourceChooser.tsx
index f4f8875d..91deac00 100644
--- a/src/components/PackageSourceChooser.tsx
+++ b/src/components/PackageSourceChooser.tsx
@@ -9,7 +9,7 @@ import { Button } from "./ui/button";
import { Card } from "./ui/card";
const OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL =
- 'https://docs.openclaw.ai/plugins/sdk-setup#package-metadata';
+ "https://docs.openclaw.ai/plugins/sdk-setup#package-metadata";
export function PackageSourceChooser(props: {
files: File[];
diff --git a/src/components/PluginListItem.tsx b/src/components/PluginListItem.tsx
index adad956c..c6f8caa1 100644
--- a/src/components/PluginListItem.tsx
+++ b/src/components/PluginListItem.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
+import type { PackageListItem } from "../lib/packageApi";
+import { familyLabel } from "../lib/packageLabels";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import { familyLabel } from "../lib/packageLabels";
-import type { PackageListItem } from "../lib/packageApi";
type PluginListItemProps = {
item: PackageListItem;
@@ -10,7 +10,12 @@ type PluginListItemProps = {
export function PluginListItem({ item }: PluginListItemProps) {
return (
-
+
{familyLabel(item.family)}
{item.isOfficial ? Verified : null}
- {item.summary ?? "Plugin package for agent workflows."}
+
+ {item.summary ?? "Plugin package for agent workflows."}
+
Plugin
{item.latestVersion ? (
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 4d067dd6..0fcb10b2 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -10,11 +10,7 @@ type SignInButtonProps = Omit & {
redirectTo?: string;
};
-export function SignInButton({
- redirectTo,
- children = "Sign In",
- ...props
-}: SignInButtonProps) {
+export function SignInButton({ redirectTo, children = "Sign In", ...props }: SignInButtonProps) {
const { signIn } = useAuthActions();
return (
@@ -32,9 +28,7 @@ export function SignInButton({
}
})
.catch((error) => {
- setAuthError(
- getUserFacingAuthError(error, "Sign in failed. Please try again."),
- );
+ setAuthError(getUserFacingAuthError(error, "Sign in failed. Please try again."));
});
}}
>
diff --git a/src/components/SkillCard.tsx b/src/components/SkillCard.tsx
index 60aa5fe4..7076ff69 100644
--- a/src/components/SkillCard.tsx
+++ b/src/components/SkillCard.tsx
@@ -1,8 +1,8 @@
import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
+import type { PublicSkill } from "../lib/publicUser";
import { MarketplaceIcon } from "./MarketplaceIcon";
import { Badge } from "./ui/badge";
-import type { PublicSkill } from "../lib/publicUser";
type SkillCardProps = {
skill: PublicSkill;
@@ -33,9 +33,7 @@ export function SkillCard({
{hasTags ? (
{badges.map((label) => (
-
- {label}
-
+ {label}
))}
{chip ? {chip} : null}
{platformLabels?.map((label) => (
diff --git a/src/components/SkillDiffCard.test.tsx b/src/components/SkillDiffCard.test.tsx
index 5c71dac3..8aa1e9e9 100644
--- a/src/components/SkillDiffCard.test.tsx
+++ b/src/components/SkillDiffCard.test.tsx
@@ -20,12 +20,7 @@ vi.mock("@monaco-editor/react", () => ({
}: {
className?: string;
options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
- }) => (
-
- Compare versions
-
-
- Inline or side-by-side diff for any file.
-
+ Compare versions
+ Inline or side-by-side diff for any file.
{!diffUnavailable ? (
What ClawHub will not host
- ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to
- evade defenses, scam people, invade privacy, or enable non-consensual behavior, it
- does not belong here.
+ ClawHub is for useful agent tooling, not abuse workflows. If a skill is built to evade
+ defenses, scam people, invade privacy, or enable non-consensual behavior, it does not
+ belong here.
@@ -203,9 +195,7 @@ function AboutPage() {