nntrivi2001
244f999538
The page showed every artifact as a tall card with a blue Install and four text actions, a Shared badge on nearly all of them and 12 cards per section, so 26 artifacts filled ~1900px (5000px on a phone). - List view by default (Grid kept, a per-browser choice): one row per artifact — kind icon, name, one line of description, owner and installs, ONE primary action, everything else in its ⋯ menu / right-click. - Three or more skills of one owner sharing a name prefix (sg-*, vp-*) are one pack row: open it for its skills, or Install all / Install N more after one confirmation (a name already there is left alone). - Badges only for the exception: Private (not shared), Hub only, Auto. - No per-section paging: 30 entries, then Show more. - Scope tabs under the title; category chips scroll on a phone. - Another user's private row (seen by an admin) gets its own section instead of sitting under Shared by others. - "1 installs" → "1 install".
2261 lines
77 KiB
TypeScript
2261 lines
77 KiB
TypeScript
/**
|
|
* @file Artifacts.tsx
|
|
* @description `/artifacts` — the Artifacts hub (`/api/artifacts`,
|
|
* server/lib/artifacts.js): scope tabs under the title (All · My library ·
|
|
* Hub, server mode), a search, a category filter and a List/Grid switch (a
|
|
* per-browser preference), the unfiltered local page shelved by kind (Skills,
|
|
* Plugins, Pages, Files — "See all" picks the category). The default List
|
|
* view is one row per artifact — a kind icon, name, one line of description,
|
|
* who and how many installed it, ONE primary action (Install / Installed /
|
|
* Open / Preview / Download) and everything else (Preview, Share, Edit,
|
|
* Delete, Uninstall) in its ⋯ menu or a right-click; Grid shows the same as
|
|
* cards. Badges mark only the exception (Private, Hub only, Auto), never the
|
|
* shared default. Three or more skills of one owner whose names share a prefix
|
|
* (`sg-qa`, `sg-ship`, …) are one pack row that opens to its skills or
|
|
* installs the missing ones after one confirmation — read from the names
|
|
* only, nothing stored. A click on a row opens its detail sheet. It holds claude.ai pages sessions published, pinned
|
|
* workspace files (or one uploaded from the computer), skills (picked,
|
|
* uploaded as a file/folder/zip, or written — `ArtifactAddPanels.tsx`) and
|
|
* plugins (read from a marketplace link, or typed). One list holds the
|
|
* caller's own rows and, in server mode, what every user shared. In server
|
|
* mode every tab is split by who it is from, others' first (All: others'
|
|
* shared rows / yours; Hub: shared by others / by you; My library: installed
|
|
* from others / your own), with another user's PRIVATE row (an admin sees
|
|
* those) in a section of its own, never under "Shared by others"; a section
|
|
* shows 30 entries, then "Show more". A shared skill or plugin is
|
|
* installed into the viewer's own account (after a confirmation that lists
|
|
* what will be written or run); one already installed there shows
|
|
* **Installed** instead of the Install button; **Uninstall** (a skill's
|
|
* copies moved aside, a plugin `claude plugin uninstall`) is offered only in
|
|
* the card's ⋯ menu. There is no Reinstall: to take a newer version, uninstall
|
|
* and install again. Editing a skill
|
|
* edits its SKILL.md (name, description, instructions — a new snapshot);
|
|
* its preview opens with what it installs as and when Claude uses it. Deleting a shared
|
|
* row of your own only takes it out of your library — it stays in the Hub
|
|
* (**Hub only**) until you remove it from there. A card's "N installs" opens
|
|
* who installed it, when, and — for your own installs — the folders written. An
|
|
* admin's switch in Settings → AI tools (`ArtifactsHubSettings`) turns Hub
|
|
* installs off for everyone. A text file (Markdown, code, logs) is previewed
|
|
* by the dashboard itself — Markdown rendered, raw HTML in it shown as text —
|
|
* while an HTML/SVG file is the server's sandboxed `raw` route in a sandboxed
|
|
* iframe, so nothing a shared HTML file carries runs on the dashboard's origin. Right-clicking a
|
|
* card offers the same actions as its buttons, plus copying a page's link.
|
|
* Preview is offered only for what a browser shows inside that sandbox (text,
|
|
* images, HTML, audio/video); an Office file, a zip or a PDF is downloaded —
|
|
* the sandbox blocks both a download and the PDF viewer, so it would be blank.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ChevronRight,
|
|
FileText,
|
|
Globe,
|
|
LayoutGrid,
|
|
List,
|
|
MoreHorizontal,
|
|
Puzzle,
|
|
Search,
|
|
Sparkles,
|
|
X,
|
|
} from "lucide-react";
|
|
import {
|
|
api,
|
|
type Artifact,
|
|
type ArtifactCandidate,
|
|
type ArtifactInstalls,
|
|
type ArtifactKind,
|
|
type ArtifactSettings,
|
|
type ServerUserUsage,
|
|
} from "../lib/api";
|
|
import { usePermissions } from "../components/AuthGate";
|
|
import type { Lane } from "../lib/types";
|
|
import { eventBus } from "../lib/eventBus";
|
|
import { toast } from "../lib/toast";
|
|
import { confirmDialog } from "../lib/confirm";
|
|
import { useDialog } from "../hooks/useDialog";
|
|
import { copyText } from "../lib/clipboard";
|
|
import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
|
|
import {
|
|
FileUploadPanel,
|
|
PluginAddPanel,
|
|
SkillAddPanel,
|
|
SkillNameField,
|
|
skillSlug,
|
|
splitSkillMd,
|
|
} from "../components/artifacts/ArtifactAddPanels";
|
|
import { MarkdownPreview, isMarkdown } from "../components/MarkdownPreview";
|
|
|
|
// The storefront's shelf order: what installs first, what is read after.
|
|
const SHELVES: ArtifactKind[] = ["skill", "plugin", "page", "file"];
|
|
|
|
function fmtBytes(n: number | null): string {
|
|
if (!n) return "";
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
|
|
return `${(n / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
const fmtDate = (iso: string) =>
|
|
new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
|
|
|
|
const IMAGE = /\.(png|jpe?g|gif|webp|svg)$/i;
|
|
// What the sandboxed preview can show: the server's typed list minus PDF.
|
|
const PREVIEWABLE =
|
|
/\.(html?|md|markdown|txt|log|csv|tsv|json|ya?ml|sh|py|js|ts|png|jpe?g|gif|webp|svg|mp4|webm|mp3|wav)$/i;
|
|
|
|
/** What a row can do, worked out once for its card, menu and detail sheet. */
|
|
function capabilities(a: Artifact) {
|
|
const previewPath = a.kind === "skill" ? "SKILL.md" : (a.files[0]?.path ?? "");
|
|
return {
|
|
previewPath,
|
|
canPreview:
|
|
a.files.length > 0 &&
|
|
(a.kind === "skill" || (a.kind === "file" && PREVIEWABLE.test(previewPath))),
|
|
canDownload: a.kind === "file" && a.files.length > 0,
|
|
installable: a.kind === "skill" || a.kind === "plugin",
|
|
// Its owner removed it from their library; it lives on in the Hub only.
|
|
hubOnly: a.mine && a.shared && !a.inLibrary,
|
|
};
|
|
}
|
|
|
|
// The page's controls, in the shapes the other pages use (Sessions' filter bar).
|
|
const segment = (on: boolean) =>
|
|
`rounded-md px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors ${
|
|
on ? "bg-surface-4 text-fg-primary" : "text-fg-muted hover:text-fg-secondary"
|
|
}`;
|
|
// A scope tab under the title (All · My library · Hub).
|
|
const tabClass = (on: boolean) =>
|
|
`-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium transition-colors ${
|
|
on
|
|
? "border-accent-solid text-fg-primary"
|
|
: "border-transparent text-fg-muted hover:text-fg-secondary"
|
|
}`;
|
|
const smallPrimary = "btn-primary shrink-0 px-3 py-1 text-xs";
|
|
const smallSecondary = "btn-secondary shrink-0 px-2.5 py-1 text-xs";
|
|
// A text action in a card's footer.
|
|
const footAction =
|
|
"rounded-md px-2 py-1 text-xs font-medium text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-50";
|
|
|
|
export function Artifacts() {
|
|
const { t } = useTranslation("artifacts");
|
|
const [settings, setSettings] = useState<ArtifactSettings | null>(null);
|
|
const [tab, setTab] = useState<"all" | "mine" | "hub" | "unowned">("all");
|
|
const { isAdmin } = usePermissions();
|
|
// Server mode: rows nobody owns — every one for an admin, those offered to you otherwise.
|
|
const [unownedCount, setUnownedCount] = useState(0);
|
|
const [users, setUsers] = useState<ServerUserUsage[]>([]);
|
|
const [kind, setKind] = useState<ArtifactKind | "">("");
|
|
const [q, setQ] = useState("");
|
|
const [items, setItems] = useState<Artifact[] | null>(null);
|
|
const [adding, setAdding] = useState<ArtifactKind | null>(null);
|
|
const [addMenu, setAddMenu] = useState(false);
|
|
const addMenuRef = useRef<HTMLDivElement>(null);
|
|
const [preview, setPreview] = useState<{ item: Artifact; path: string } | null>(null);
|
|
// By id, so the open sheet shows the row as the latest list has it.
|
|
const [detailId, setDetailId] = useState<number | null>(null);
|
|
// List or grid: a viewer preference, kept in this browser only.
|
|
const [view, setView] = useState<View>(() => {
|
|
try {
|
|
return localStorage.getItem(VIEW_KEY) === "grid" ? "grid" : "list";
|
|
} catch {
|
|
return "list";
|
|
}
|
|
});
|
|
const pickView = (v: View) => {
|
|
setView(v);
|
|
try {
|
|
localStorage.setItem(VIEW_KEY, v);
|
|
} catch {
|
|
/* private window: the choice lasts this visit */
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
api.artifacts
|
|
.settings()
|
|
.then(setSettings)
|
|
.catch(() => setSettings(null));
|
|
}, []);
|
|
|
|
const load = useCallback(() => {
|
|
api.artifacts
|
|
.list({ scope: tab, kind: kind || undefined, q: q.trim() || undefined })
|
|
.then((r) => setItems(r.items))
|
|
.catch((err) => {
|
|
setItems([]);
|
|
toast.error(err);
|
|
});
|
|
}, [tab, kind, q]);
|
|
|
|
useEffect(() => {
|
|
const id = window.setTimeout(load, q ? 250 : 0);
|
|
return () => window.clearTimeout(id);
|
|
}, [load, q]);
|
|
|
|
const serverMode = !!settings?.serverMode;
|
|
const countUnowned = useCallback(() => {
|
|
if (!serverMode) return;
|
|
api.artifacts
|
|
.list({ scope: "unowned" })
|
|
.then((r) => setUnownedCount(r.items.length))
|
|
.catch(() => setUnownedCount(0));
|
|
}, [serverMode]);
|
|
useEffect(countUnowned, [countUnowned]);
|
|
useEffect(() => {
|
|
if (tab !== "unowned" || !isAdmin || users.length) return;
|
|
api.users
|
|
.list()
|
|
.then((r) => setUsers(r.users.filter((u) => !u.disabled)))
|
|
.catch(() => setUsers([]));
|
|
}, [tab, isAdmin, users.length]);
|
|
|
|
useEffect(
|
|
() =>
|
|
eventBus.subscribe((msg) => {
|
|
if (msg.type === "artifact_changed") {
|
|
load();
|
|
countUnowned();
|
|
}
|
|
}),
|
|
[load, countUnowned]
|
|
);
|
|
|
|
const settle = async (run: () => Promise<unknown>, done: string) => {
|
|
try {
|
|
await run();
|
|
toast.success(t(done));
|
|
load();
|
|
countUnowned();
|
|
} catch (err) {
|
|
toast.error(err);
|
|
}
|
|
};
|
|
|
|
// The Add menu closes on Escape or a click anywhere outside it.
|
|
useEffect(() => {
|
|
if (!addMenu) return;
|
|
const onDown = (e: MouseEvent) => {
|
|
if (!addMenuRef.current?.contains(e.target as Node)) setAddMenu(false);
|
|
};
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setAddMenu(false);
|
|
};
|
|
document.addEventListener("mousedown", onDown);
|
|
document.addEventListener("keydown", onKey);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onDown);
|
|
document.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [addMenu]);
|
|
|
|
const server = !!settings?.serverMode;
|
|
|
|
const share = async (a: Artifact) => {
|
|
// A Hub-only row (its owner already removed it from their library) is
|
|
// deleted by unsharing it, so that asks first.
|
|
if (
|
|
a.shared &&
|
|
!a.inLibrary &&
|
|
!(await confirmDialog({
|
|
title: t("hubRemoveTitle", { title: a.title }),
|
|
message: t("hubRemoveBody"),
|
|
confirmLabel: t("hubRemove"),
|
|
}))
|
|
)
|
|
return;
|
|
try {
|
|
await api.artifacts.update(a.id, { shared: !a.shared });
|
|
toast.success(t(a.shared ? "unshareDone" : "shareDone"));
|
|
load();
|
|
} catch (err) {
|
|
toast.error(err);
|
|
}
|
|
};
|
|
|
|
const [renaming, setRenaming] = useState<Artifact | null>(null);
|
|
|
|
const remove = async (a: Artifact) => {
|
|
if (
|
|
!(await confirmDialog({
|
|
title: t("deleteTitle", { title: a.title }),
|
|
message: t(!a.shared ? "deleteBody" : a.mine ? "deleteBodyKeep" : "deleteBodyShared"),
|
|
confirmLabel: t("deleteConfirm"),
|
|
}))
|
|
)
|
|
return;
|
|
try {
|
|
const r = await api.artifacts.remove(a.id);
|
|
if (r.kept) toast.success(t("deleteKept"));
|
|
setDetailId((id) => (id === a.id ? null : id));
|
|
load();
|
|
} catch (err) {
|
|
toast.error(err);
|
|
}
|
|
};
|
|
|
|
const install = async (a: Artifact) => {
|
|
const message =
|
|
a.kind === "skill"
|
|
? `${t("installSkillBody", { name: a.source })} ${a.files.map((f) => f.path).join(", ")}`
|
|
: t("installPluginBody", { market: a.market, name: a.source });
|
|
if (
|
|
!(await confirmDialog({
|
|
title: t("installTitle", { title: a.title }),
|
|
message,
|
|
confirmLabel: t("installConfirm"),
|
|
destructive: false,
|
|
}))
|
|
)
|
|
return;
|
|
const done = (r: { installed: string }) =>
|
|
toast.success(
|
|
a.kind === "skill"
|
|
? t("installed", { path: r.installed })
|
|
: t("installedPlugin", { name: r.installed })
|
|
);
|
|
try {
|
|
done(await api.artifacts.install(a.id));
|
|
} catch (err) {
|
|
const code = (err as { code?: string }).code;
|
|
if (code !== "EEXISTS") return toast.error(err);
|
|
if (
|
|
!(await confirmDialog({
|
|
title: t("replaceTitle", { name: a.source }),
|
|
message: t("replaceBody"),
|
|
confirmLabel: t("replaceConfirm"),
|
|
}))
|
|
)
|
|
return;
|
|
try {
|
|
done(await api.artifacts.install(a.id, true));
|
|
} catch (e) {
|
|
toast.error(e);
|
|
}
|
|
}
|
|
load();
|
|
};
|
|
|
|
// A pack's missing skills, after ONE confirmation that names them all; a
|
|
// skill already there under that name is left alone (never replaced here).
|
|
const installAll = async (p: Pack) => {
|
|
const todo = p.rows.filter((a) => !a.installed);
|
|
if (
|
|
!(await confirmDialog({
|
|
title: t("pack.installTitle", { prefix: p.prefix, count: todo.length }),
|
|
message: `${t("pack.installBody")} ${todo.map((a) => a.source || a.title).join(", ")}`,
|
|
confirmLabel: t("installConfirm"),
|
|
destructive: false,
|
|
}))
|
|
)
|
|
return;
|
|
let ok = 0;
|
|
let skipped = 0;
|
|
let failed = 0;
|
|
for (const a of todo) {
|
|
try {
|
|
await api.artifacts.install(a.id);
|
|
ok++;
|
|
} catch (err) {
|
|
if ((err as { code?: string }).code === "EEXISTS") skipped++;
|
|
else failed++;
|
|
}
|
|
}
|
|
const summary = t("pack.installed", { ok, skipped, failed });
|
|
if (failed) toast.error(summary);
|
|
else toast.success(summary);
|
|
load();
|
|
};
|
|
|
|
// Taken out of the user's own accounts again; a skill's copies are moved to
|
|
// ~/.claude/agenthub-replaced-skills/, never deleted.
|
|
const uninstall = async (a: Artifact) => {
|
|
if (
|
|
!(await confirmDialog({
|
|
title: t("uninstallTitle", { title: a.title }),
|
|
message: t(a.kind === "skill" ? "uninstallSkillBody" : "uninstallPluginBody", {
|
|
name: a.source,
|
|
}),
|
|
confirmLabel: t("uninstall"),
|
|
}))
|
|
)
|
|
return;
|
|
try {
|
|
const r = await api.artifacts.uninstall(a.id);
|
|
toast.success(t("uninstalled", { name: r.uninstalled }));
|
|
} catch (err) {
|
|
toast.error(err);
|
|
}
|
|
load();
|
|
};
|
|
|
|
const actionsFor = (a: Artifact): CardActions => ({
|
|
onOpen: () => setDetailId(a.id),
|
|
onShare: () => void share(a),
|
|
onRename: () => {
|
|
setDetailId(null);
|
|
setRenaming(a);
|
|
},
|
|
onDelete: () => void remove(a),
|
|
onInstall: () => void install(a),
|
|
onUninstall: () => void uninstall(a),
|
|
onPreview: (path) => {
|
|
setDetailId(null);
|
|
setPreview({ item: a, path });
|
|
},
|
|
});
|
|
|
|
const unownedControls = (a: Artifact) => (
|
|
<div className="flex flex-wrap items-center gap-2 text-xs">
|
|
{(a.suggestedForMe || isAdmin) && (
|
|
<button
|
|
type="button"
|
|
className="btn-primary px-2 py-1 text-xs"
|
|
onClick={() => settle(() => api.artifacts.claim(a.id), "unowned.claimed")}
|
|
>
|
|
{t(a.suggestedForMe ? "unowned.mine" : "unowned.takeIt")}
|
|
</button>
|
|
)}
|
|
{a.suggestedForMe && (
|
|
<button
|
|
type="button"
|
|
className={footAction}
|
|
onClick={() => settle(() => api.artifacts.decline(a.id), "unowned.declined")}
|
|
>
|
|
{t("unowned.notMine")}
|
|
</button>
|
|
)}
|
|
{isAdmin && users.length > 0 && (
|
|
<select
|
|
className="input h-7 w-auto py-0 text-xs"
|
|
aria-label={t("unowned.assign")}
|
|
value=""
|
|
onChange={(e) => {
|
|
const userId = Number(e.target.value);
|
|
if (userId) settle(() => api.artifacts.assign(a.id, userId), "unowned.assigned");
|
|
}}
|
|
>
|
|
<option value="">{t("unowned.assign")}</option>
|
|
{users.map((u) => (
|
|
<option key={u.id} value={u.id}>
|
|
{u.displayName || u.username}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
// One artifact as a list row or a grid card; a pack's members are always rows.
|
|
const render = (a: Artifact, as: View, inPack = false) => {
|
|
const props = {
|
|
item: a,
|
|
server,
|
|
canInstall: !!settings?.installsEnabled,
|
|
...actionsFor(a),
|
|
};
|
|
if (tab === "unowned")
|
|
return (
|
|
<li key={a.id} className="flex flex-col gap-2" data-testid={`unowned-${a.id}`}>
|
|
<ArtifactCard {...props} as="div" />
|
|
{unownedControls(a)}
|
|
</li>
|
|
);
|
|
return as === "list" ? (
|
|
<ArtifactRow key={a.id} {...props} inPack={inPack} />
|
|
) : (
|
|
<ArtifactCard key={a.id} {...props} />
|
|
);
|
|
};
|
|
const pack = (p: Pack) => (
|
|
<PackRow
|
|
key={p.key}
|
|
pack={p}
|
|
server={server}
|
|
canInstall={!!settings?.installsEnabled}
|
|
onInstallAll={() => void installAll(p)}
|
|
render={(a) => render(a, "list", true)}
|
|
/>
|
|
);
|
|
const collection = (rows: Artifact[], key: string) => (
|
|
<Collection
|
|
key={key}
|
|
rows={rows}
|
|
view={tab === "unowned" ? "grid" : view}
|
|
packs={tab !== "unowned"}
|
|
render={render}
|
|
pack={pack}
|
|
/>
|
|
);
|
|
|
|
// Local mode (everything is yours): the unfiltered page is shelved by
|
|
// kind; a category or a search is one flat list of results.
|
|
const shelves =
|
|
items && !kind && !q.trim()
|
|
? SHELVES.map((k) => ({ kind: k, rows: items.filter((a) => a.kind === k) })).filter(
|
|
(s) => s.rows.length > 0
|
|
)
|
|
: null;
|
|
// In server mode every tab is split by who it is from, others' first: All
|
|
// into others' shared rows and yours, the Hub into what others shared and
|
|
// what you shared, My library into what you installed from others (the
|
|
// server adds those to `mine`) and your own. Another user's row that is NOT
|
|
// shared (only an admin is shown those) gets a section of its own, so
|
|
// "Shared by others" never holds a private row.
|
|
const halves =
|
|
server && items && tab !== "unowned"
|
|
? [
|
|
{
|
|
key: `${tab}.others`,
|
|
rows: items.filter((a) => !a.mine && (a.shared || tab === "mine")),
|
|
},
|
|
{
|
|
key: "unshared",
|
|
rows: tab === "mine" ? [] : items.filter((a) => !a.mine && !a.shared),
|
|
},
|
|
{ key: `${tab}.own`, rows: items.filter((a) => a.mine) },
|
|
].filter((h) => h.rows.length > 0 || h.key !== "unshared")
|
|
: null;
|
|
const detail = detailId === null ? null : (items?.find((a) => a.id === detailId) ?? null);
|
|
|
|
return (
|
|
<div className="animate-fade-in space-y-5" data-testid="artifacts-page">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
|
|
<p className="max-w-2xl text-xs text-fg-muted">
|
|
{t(server ? "subtitleServer" : "subtitle")}
|
|
</p>
|
|
</div>
|
|
<div className="relative shrink-0" ref={addMenuRef}>
|
|
<button
|
|
type="button"
|
|
className="btn-primary"
|
|
data-testid="artifacts-add"
|
|
aria-haspopup="menu"
|
|
aria-expanded={addMenu}
|
|
onClick={() => setAddMenu((v) => !v)}
|
|
>
|
|
{t("add")}
|
|
</button>
|
|
{addMenu && (
|
|
<div className="absolute right-0 z-20 mt-1 w-72 rounded-lg border border-border bg-surface-1 p-1 shadow-xl">
|
|
{SHELVES.map((k) => (
|
|
<button
|
|
key={k}
|
|
type="button"
|
|
aria-label={t(`add.${k}`)}
|
|
onClick={() => {
|
|
setAdding(k);
|
|
setAddMenu(false);
|
|
}}
|
|
className="block w-full rounded-md px-3 py-2 text-left hover:bg-surface-4"
|
|
>
|
|
<span className="block text-sm text-fg-primary">{t(`add.${k}`)}</span>
|
|
<span className="block truncate text-xs text-fg-muted">{t(`blurb.${k}`)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{server && (
|
|
<div
|
|
className="-mb-1 flex gap-1 overflow-x-auto border-b border-border"
|
|
data-testid="artifacts-scope"
|
|
>
|
|
{(["all", "mine", "hub"] as const).map((v) => (
|
|
<button
|
|
key={v}
|
|
type="button"
|
|
aria-pressed={tab === v}
|
|
onClick={() => setTab(v)}
|
|
className={tabClass(tab === v)}
|
|
>
|
|
{t(`tab.${v}`)}
|
|
</button>
|
|
))}
|
|
{(isAdmin || unownedCount > 0 || tab === "unowned") && (
|
|
<button
|
|
type="button"
|
|
aria-pressed={tab === "unowned"}
|
|
onClick={() => setTab("unowned")}
|
|
className={tabClass(tab === "unowned")}
|
|
data-testid="artifacts-tab-unowned"
|
|
title={t(isAdmin ? "unowned.hintAdmin" : "unowned.hint")}
|
|
>
|
|
{t(isAdmin ? "tab.unowned" : "tab.suggested")}
|
|
{unownedCount > 0 && <span className="ml-1 text-fg-muted">{unownedCount}</span>}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="relative min-w-[180px] flex-1 sm:max-w-[320px]">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" />
|
|
<input
|
|
value={q}
|
|
onChange={(e) => setQ(e.target.value)}
|
|
placeholder={t("search")}
|
|
aria-label={t("search")}
|
|
className="input w-full pl-10 pr-9"
|
|
/>
|
|
{q && (
|
|
<button
|
|
type="button"
|
|
aria-label={t("clearSearch")}
|
|
onClick={() => setQ("")}
|
|
className="btn-icon absolute right-1.5 top-1/2 -translate-y-1/2"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="flex max-w-full gap-1 overflow-x-auto rounded-lg border border-border bg-surface-1 p-1"
|
|
role="group"
|
|
aria-label={t("categories")}
|
|
>
|
|
{(["", ...SHELVES] as const).map((k) => (
|
|
<button
|
|
key={k || "all"}
|
|
type="button"
|
|
aria-pressed={kind === k}
|
|
onClick={() => setKind(k)}
|
|
className={segment(kind === k)}
|
|
>
|
|
{t(k ? `kind.${k}` : "kind.all")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{tab !== "unowned" && (
|
|
<div
|
|
className="ml-auto flex gap-1 rounded-lg border border-border bg-surface-1 p-1"
|
|
role="group"
|
|
aria-label={t("view.label")}
|
|
>
|
|
{(["list", "grid"] as const).map((v) => {
|
|
const Icon = v === "list" ? List : LayoutGrid;
|
|
return (
|
|
<button
|
|
key={v}
|
|
type="button"
|
|
aria-pressed={view === v}
|
|
aria-label={t(`view.${v}`)}
|
|
title={t(`view.${v}`)}
|
|
onClick={() => pickView(v)}
|
|
className={segment(view === v)}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{items === null ? (
|
|
<SkeletonGrid label={t("loading")} />
|
|
) : items.length === 0 && tab === "unowned" ? (
|
|
<p className="rounded-lg border border-dashed border-border px-4 py-6 text-center text-xs text-fg-muted">
|
|
{t("unowned.empty")}
|
|
</p>
|
|
) : items.length === 0 ? (
|
|
<EmptyState
|
|
hub={tab === "hub"}
|
|
searching={!!q.trim() || !!kind}
|
|
onAdd={(k) => setAdding(k)}
|
|
/>
|
|
) : halves ? (
|
|
<div className="space-y-7" data-testid="artifacts-list">
|
|
{halves.map((h) => (
|
|
<section key={h.key} aria-labelledby={`half-${h.key}`} data-testid={`half-${h.key}`}>
|
|
<SectionHead
|
|
id={`half-${h.key}`}
|
|
title={t(`section.${h.key}`)}
|
|
count={h.rows.length}
|
|
hint={t(`section.${h.key}Hint`)}
|
|
/>
|
|
{h.rows.length ? (
|
|
collection(h.rows, `${h.key}|${kind}|${q}`)
|
|
) : (
|
|
<p className="rounded-lg border border-dashed border-border px-4 py-5 text-center text-xs text-fg-muted">
|
|
{t("section.empty")}
|
|
</p>
|
|
)}
|
|
</section>
|
|
))}
|
|
</div>
|
|
) : shelves ? (
|
|
<div className="space-y-7" data-testid="artifacts-list">
|
|
{shelves.map((s) => (
|
|
<section key={s.kind} aria-labelledby={`shelf-${s.kind}`}>
|
|
<SectionHead
|
|
id={`shelf-${s.kind}`}
|
|
title={t(`kind.${s.kind}`)}
|
|
count={s.rows.length}
|
|
hint={t(`blurb.${s.kind}`)}
|
|
action={
|
|
<button
|
|
type="button"
|
|
onClick={() => setKind(s.kind)}
|
|
className="btn-ghost shrink-0 px-2 py-1 text-xs"
|
|
>
|
|
{t("seeAll")}
|
|
</button>
|
|
}
|
|
/>
|
|
{collection(s.rows, s.kind)}
|
|
</section>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div data-testid="artifacts-list">
|
|
<p className="mb-2 text-xs text-fg-muted">{t("results", { count: items.length })}</p>
|
|
{collection(items, `${tab}|${kind}|${q}`)}
|
|
</div>
|
|
)}
|
|
|
|
{detail && (
|
|
<DetailDialog
|
|
item={detail}
|
|
server={server}
|
|
canInstall={!!settings?.installsEnabled}
|
|
onClose={() => setDetailId(null)}
|
|
{...actionsFor(detail)}
|
|
/>
|
|
)}
|
|
{adding && <AddDialog kind={adding} onClose={() => setAdding(null)} onAdded={load} />}
|
|
{preview && <PreviewDialog {...preview} onClose={() => setPreview(null)} />}
|
|
{renaming && (
|
|
<RenameDialog
|
|
item={renaming}
|
|
onClose={() => setRenaming(null)}
|
|
onSaved={() => {
|
|
setRenaming(null);
|
|
load();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SectionHead({
|
|
id,
|
|
title,
|
|
count,
|
|
hint,
|
|
action,
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
count: number;
|
|
hint: string;
|
|
action?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="mb-2.5 flex items-end justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h2 id={id} className="text-sm font-semibold text-fg-primary">
|
|
{title}
|
|
<span className="ml-2 text-xs font-normal text-fg-muted">{count}</span>
|
|
</h2>
|
|
<p className="truncate text-xs text-fg-muted">{hint}</p>
|
|
</div>
|
|
{action}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type View = "list" | "grid";
|
|
const VIEW_KEY = "agenthub.artifacts.view";
|
|
|
|
// How many entries a section shows before "Show more".
|
|
const STEP = 30;
|
|
// A pack: this many or more skills of one owner whose names share a prefix
|
|
// (`sg-qa`, `sg-ship`, …) — one row that opens to its skills or installs them
|
|
// all. Read from the names only; nothing is stored about it.
|
|
const PACK_MIN = 3;
|
|
const packPrefix = (a: Artifact) =>
|
|
a.kind === "skill"
|
|
? (/^([a-z0-9]+)-[a-z0-9]/i.exec(a.source || a.title)?.[1]?.toLowerCase() ?? null)
|
|
: null;
|
|
|
|
type Pack = { key: string; prefix: string; owner: string | null; mine: boolean; rows: Artifact[] };
|
|
type Entry = { pack: Pack } | { item: Artifact };
|
|
|
|
/** The packs first, in the order their first skill came, then every other row. */
|
|
function groupPacks(rows: Artifact[]): Entry[] {
|
|
const groups = new Map<string, Artifact[]>();
|
|
for (const a of rows) {
|
|
const prefix = packPrefix(a);
|
|
if (!prefix) continue;
|
|
const key = `${a.ownerId ?? (a.mine ? "me" : a.owner)}|${prefix}`;
|
|
groups.set(key, [...(groups.get(key) ?? []), a]);
|
|
}
|
|
const packs: Entry[] = [];
|
|
const packed = new Set<number>();
|
|
for (const [key, members] of groups) {
|
|
if (members.length < PACK_MIN) continue;
|
|
members.forEach((a) => packed.add(a.id));
|
|
const first = members[0]!;
|
|
packs.push({
|
|
pack: {
|
|
key,
|
|
prefix: packPrefix(first)!,
|
|
owner: first.owner,
|
|
mine: first.mine,
|
|
rows: members,
|
|
},
|
|
});
|
|
}
|
|
return [...packs, ...rows.filter((a) => !packed.has(a.id)).map((item) => ({ item }))];
|
|
}
|
|
|
|
/** A section's packs and rows, `STEP` entries at a time (a pack counts as one).
|
|
* Keyed by the caller on the filters, so a new tab, kind or search starts over. */
|
|
function Collection({
|
|
rows,
|
|
view,
|
|
packs: withPacks,
|
|
render,
|
|
pack,
|
|
}: {
|
|
rows: Artifact[];
|
|
view: View;
|
|
packs: boolean;
|
|
render: (a: Artifact, as: View) => React.ReactNode;
|
|
pack: (p: Pack) => React.ReactNode;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [shown, setShown] = useState(STEP);
|
|
const entries: Entry[] = withPacks ? groupPacks(rows) : rows.map((item) => ({ item }));
|
|
const visible = entries.slice(0, shown);
|
|
const packList = visible.flatMap((e) => ("pack" in e ? [e.pack] : []));
|
|
const items = visible.flatMap((e) => ("item" in e ? [e.item] : []));
|
|
return (
|
|
<div className="space-y-3">
|
|
{packList.length > 0 && (
|
|
<ul className="card divide-y divide-border overflow-hidden">{packList.map(pack)}</ul>
|
|
)}
|
|
{items.length > 0 &&
|
|
(view === "list" ? (
|
|
<ul className="card divide-y divide-border overflow-hidden">
|
|
{items.map((a) => render(a, "list"))}
|
|
</ul>
|
|
) : (
|
|
<ul className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{items.map((a) => render(a, "grid"))}
|
|
</ul>
|
|
))}
|
|
{entries.length > shown && (
|
|
<button
|
|
type="button"
|
|
className="btn-ghost w-full py-2 text-xs"
|
|
onClick={() => setShown((n) => n + STEP)}
|
|
>
|
|
{t("showMore", { count: Math.min(STEP, entries.length - shown) })}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A pack as one row: open it for its skills, or install the ones you lack. */
|
|
function PackRow({
|
|
pack: p,
|
|
server,
|
|
canInstall,
|
|
onInstallAll,
|
|
render,
|
|
}: {
|
|
pack: Pack;
|
|
server: boolean;
|
|
canInstall: boolean;
|
|
onInstallAll: () => void;
|
|
render: (a: Artifact) => React.ReactNode;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [open, setOpen] = useState(false);
|
|
const missing = p.rows.filter((a) => !a.installed).length;
|
|
const installs = p.rows.reduce((n, a) => n + a.installs, 0);
|
|
return (
|
|
<li data-testid={`pack-${p.prefix}`}>
|
|
<div className="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-surface-2/60">
|
|
<button
|
|
type="button"
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex min-w-0 flex-1 items-center gap-3 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
|
|
>
|
|
<ChevronRight
|
|
className={`h-4 w-4 shrink-0 text-fg-muted transition-transform ${open ? "rotate-90" : ""}`}
|
|
/>
|
|
<KindIcon kind="skill" pack />
|
|
<span className="min-w-0">
|
|
<span className="flex items-baseline gap-2">
|
|
<span className="truncate text-sm font-medium text-fg-primary">
|
|
{t("pack.title", { prefix: p.prefix })}
|
|
</span>
|
|
<span className="shrink-0 text-xs text-fg-muted">
|
|
{t("pack.count", { count: p.rows.length })}
|
|
</span>
|
|
</span>
|
|
<span className="block truncate text-xs text-fg-muted">
|
|
{p.rows.map((a) => a.title).join(" · ")}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<span className="hidden shrink-0 text-xs text-fg-muted md:block">
|
|
{[
|
|
server && p.owner && !p.mine ? p.owner : null,
|
|
installs ? t("installs", { count: installs }) : null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" · ")}
|
|
</span>
|
|
{missing === 0 ? (
|
|
<span className="badge border-status-success/30 bg-status-success/10 text-status-success">
|
|
{t("installedBadge")}
|
|
</span>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className={smallSecondary}
|
|
disabled={!canInstall}
|
|
title={canInstall ? undefined : t("installsOff")}
|
|
onClick={onInstallAll}
|
|
>
|
|
{missing === p.rows.length
|
|
? t("pack.installAll")
|
|
: t("pack.installRest", { count: missing })}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{open && (
|
|
<ul className="divide-y divide-border border-t border-border bg-surface-2/30 pl-7">
|
|
{p.rows.map(render)}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function SkeletonGrid({ label }: { label: string }) {
|
|
return (
|
|
<div role="status" aria-label={label}>
|
|
<span className="sr-only">{label}</span>
|
|
<ul className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3" aria-hidden>
|
|
{Array.from({ length: 6 }, (_, i) => (
|
|
<li key={i} className="card flex animate-pulse flex-col gap-3 p-4">
|
|
<span className="block h-3 w-2/3 rounded bg-surface-4" />
|
|
<span className="block h-2.5 w-1/3 rounded bg-surface-2" />
|
|
<span className="block h-2.5 w-full rounded bg-surface-2" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmptyState({
|
|
hub,
|
|
searching,
|
|
onAdd,
|
|
}: {
|
|
hub: boolean;
|
|
searching: boolean;
|
|
onAdd: (k: ArtifactKind) => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
return (
|
|
<div className="card flex flex-col items-center px-6 py-12 text-center">
|
|
<p className="text-sm font-semibold text-fg-primary">
|
|
{t(searching ? "empty.searchTitle" : hub ? "empty.hubTitle" : "empty.title")}
|
|
</p>
|
|
<p className="mt-1 max-w-md text-xs text-fg-muted">
|
|
{searching ? t("empty.search") : t(hub ? "empty.hub" : "empty.mine")}
|
|
</p>
|
|
{!hub && !searching && (
|
|
<div className="mt-6 grid w-full max-w-2xl gap-2 sm:grid-cols-2">
|
|
{SHELVES.map((k) => (
|
|
<button
|
|
key={k}
|
|
type="button"
|
|
onClick={() => onAdd(k)}
|
|
className="rounded-lg border border-border bg-surface-2 px-3 py-2.5 text-left transition-colors hover:bg-surface-4"
|
|
>
|
|
<span className="block text-sm font-medium text-fg-primary">{t(`add.${k}`)}</span>
|
|
<span className="block text-xs text-fg-muted">{t(`blurb.${k}`)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type CardActions = {
|
|
onOpen: () => void;
|
|
onShare: () => void;
|
|
onRename: () => void;
|
|
onDelete: () => void;
|
|
onInstall: () => void;
|
|
onUninstall: () => void;
|
|
onPreview: (path: string) => void;
|
|
};
|
|
|
|
/** The one primary action on a card / detail sheet. */
|
|
function PrimaryAction({
|
|
item: a,
|
|
canInstall,
|
|
onInstall,
|
|
onPreview,
|
|
}: {
|
|
item: Artifact;
|
|
canInstall: boolean;
|
|
onInstall: () => void;
|
|
onPreview: (path: string) => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const c = capabilities(a);
|
|
if (a.installed)
|
|
return (
|
|
<span
|
|
className="badge border-status-success/30 bg-status-success/10 text-status-success"
|
|
data-testid="artifact-installed"
|
|
>
|
|
{t("installedBadge")}
|
|
</span>
|
|
);
|
|
if (c.installable)
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={smallPrimary}
|
|
disabled={!canInstall}
|
|
title={canInstall ? undefined : t("installsOff")}
|
|
onClick={onInstall}
|
|
>
|
|
{t("install")}
|
|
</button>
|
|
);
|
|
if (a.kind === "page" && a.url)
|
|
return (
|
|
<a href={a.url} target="_blank" rel="noopener noreferrer" className={smallPrimary}>
|
|
{t("open")}
|
|
</a>
|
|
);
|
|
if (c.canPreview)
|
|
return (
|
|
<button type="button" className={smallSecondary} onClick={() => onPreview(c.previewPath)}>
|
|
{t("preview")}
|
|
</button>
|
|
);
|
|
if (c.canDownload)
|
|
return (
|
|
<a href={api.artifacts.rawUrl(a.id, a.files[0]?.path, true)} className={smallSecondary}>
|
|
{t("download")}
|
|
</a>
|
|
);
|
|
return null;
|
|
}
|
|
|
|
type ItemProps = CardActions & {
|
|
item: Artifact;
|
|
server: boolean;
|
|
canInstall: boolean;
|
|
};
|
|
|
|
const KIND_ICON = { skill: Sparkles, plugin: Puzzle, page: Globe, file: FileText } as const;
|
|
|
|
/** What kind a row is, at a glance: a tinted square with the kind's icon. */
|
|
function KindIcon({ kind, pack }: { kind: ArtifactKind; pack?: boolean }) {
|
|
const { t } = useTranslation("artifacts");
|
|
const Icon = KIND_ICON[kind];
|
|
return (
|
|
<span
|
|
className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
|
|
pack ? "bg-accent-muted text-accent" : "bg-surface-2 text-fg-secondary"
|
|
}`}
|
|
title={t(`kindOne.${kind}`)}
|
|
aria-hidden
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** Badges only for the exception: Private (server mode, not shared), Hub only, Auto. */
|
|
function Badges({ item: a, server }: { item: Artifact; server: boolean }) {
|
|
const { t } = useTranslation("artifacts");
|
|
const { hubOnly } = capabilities(a);
|
|
return (
|
|
<>
|
|
{hubOnly && (
|
|
<span
|
|
className="badge shrink-0 border-accent/30 bg-accent-muted text-accent"
|
|
title={t("hubOnlyHint")}
|
|
>
|
|
{t("hubOnly")}
|
|
</span>
|
|
)}
|
|
{server && !a.shared && (
|
|
<span className="badge shrink-0" title={t("privateHint")}>
|
|
{t("private")}
|
|
</span>
|
|
)}
|
|
{a.auto && (
|
|
<span className="badge shrink-0" title={t("autoHint")}>
|
|
{t("auto")}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/** "by X · date · N installs" — who, when and how far it travelled. */
|
|
function Meta({
|
|
item: a,
|
|
server,
|
|
date = true,
|
|
}: {
|
|
item: Artifact;
|
|
server: boolean;
|
|
date?: boolean;
|
|
}) {
|
|
const parts: React.ReactNode[] = [];
|
|
if (server && a.owner && !a.mine)
|
|
parts.push(
|
|
<span key="by" className="truncate">
|
|
{a.owner}
|
|
</span>
|
|
);
|
|
if (date)
|
|
parts.push(
|
|
<span key="at" className="shrink-0" title={new Date(a.createdAt).toLocaleString()}>
|
|
{fmtDate(a.createdAt)}
|
|
</span>
|
|
);
|
|
if (a.installs > 0) parts.push(<InstallsButton key="in" item={a} />);
|
|
return (
|
|
<span className="flex min-w-0 items-center gap-1.5 text-xs text-fg-muted">
|
|
{parts.flatMap((p, i) => (i ? [<span key={`d${i}`}>·</span>, p] : [p]))}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** Every action an artifact offers — its ⋯ button and its right-click. */
|
|
function ArtifactMenu({
|
|
item: a,
|
|
server,
|
|
canInstall,
|
|
menu,
|
|
onOpen,
|
|
onShare,
|
|
onRename,
|
|
onDelete,
|
|
onInstall,
|
|
onUninstall,
|
|
onPreview,
|
|
}: ItemProps & { menu: ReturnType<typeof useContextMenu<null>> }) {
|
|
const { t } = useTranslation("artifacts");
|
|
if (!menu.menu) return null;
|
|
const { previewPath, canPreview, canDownload, installable, hubOnly } = capabilities(a);
|
|
const pick = (fn: () => void) => () => {
|
|
menu.close();
|
|
fn();
|
|
};
|
|
return (
|
|
<ContextMenu x={menu.menu.x} y={menu.menu.y} onClose={menu.close} testId="artifact-menu">
|
|
<MenuItem onSelect={pick(onOpen)}>{t("details")}</MenuItem>
|
|
{a.kind === "page" && a.url && (
|
|
<>
|
|
<MenuItem onSelect={pick(() => window.open(a.url!, "_blank", "noopener,noreferrer"))}>
|
|
{t("open")}
|
|
</MenuItem>
|
|
<MenuItem onSelect={pick(() => void copyText(a.url!))}>{t("copyLink")}</MenuItem>
|
|
</>
|
|
)}
|
|
{canPreview && (
|
|
<MenuItem onSelect={pick(() => onPreview(previewPath))}>{t("preview")}</MenuItem>
|
|
)}
|
|
{canDownload && (
|
|
<MenuItem
|
|
onSelect={pick(() => {
|
|
window.location.href = api.artifacts.rawUrl(a.id, a.files[0]?.path, true);
|
|
})}
|
|
>
|
|
{t("download")}
|
|
</MenuItem>
|
|
)}
|
|
{installable && !a.installed && (
|
|
<MenuItem disabled={!canInstall} onSelect={pick(onInstall)}>
|
|
{t("install")}
|
|
</MenuItem>
|
|
)}
|
|
{a.installed && (
|
|
<MenuItem danger onSelect={pick(onUninstall)}>
|
|
{t("uninstall")}
|
|
</MenuItem>
|
|
)}
|
|
{a.canChange && (
|
|
<>
|
|
<MenuSeparator />
|
|
{server && (
|
|
<MenuItem danger={hubOnly} onSelect={pick(onShare)}>
|
|
{t(hubOnly ? "hubRemove" : a.shared ? "unshare" : "share")}
|
|
</MenuItem>
|
|
)}
|
|
<MenuItem onSelect={pick(onRename)}>{t("rename")}</MenuItem>
|
|
{!hubOnly && (
|
|
<MenuItem danger onSelect={pick(onDelete)}>
|
|
{t("delete")}
|
|
</MenuItem>
|
|
)}
|
|
</>
|
|
)}
|
|
</ContextMenu>
|
|
);
|
|
}
|
|
|
|
function MoreButton({ onOpen }: { onOpen: (e: React.MouseEvent) => void }) {
|
|
const { t } = useTranslation("artifacts");
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="btn-icon shrink-0"
|
|
aria-label={t("more")}
|
|
title={t("more")}
|
|
aria-haspopup="menu"
|
|
onClick={onOpen}
|
|
>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
/** The list view's row: kind, name and one line of what it is, who and how
|
|
* many installed it, the one primary action, and ⋯ for everything else. */
|
|
function ArtifactRow({ inPack, ...props }: ItemProps & { inPack?: boolean }) {
|
|
const { item: a, server, canInstall, onOpen, onInstall, onPreview } = props;
|
|
const { t } = useTranslation("artifacts");
|
|
const menu = useContextMenu<null>();
|
|
return (
|
|
<li
|
|
className="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-surface-2/60"
|
|
data-testid={`artifact-${a.id}`}
|
|
onContextMenu={(e) => menu.open(e, null)}
|
|
>
|
|
<KindIcon kind={a.kind} />
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
title={t("details")}
|
|
className="min-w-0 flex-1 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
|
|
>
|
|
<span className="flex min-w-0 items-center gap-2">
|
|
<span className="truncate text-sm font-medium text-fg-primary" title={a.title}>
|
|
{a.title}
|
|
</span>
|
|
<Badges item={a} server={server} />
|
|
</span>
|
|
<span className="block truncate text-xs text-fg-muted">
|
|
{a.description || [t(`kindOne.${a.kind}`), fmtBytes(a.size)].filter(Boolean).join(" · ")}
|
|
</span>
|
|
</button>
|
|
<span className="hidden max-w-[220px] shrink-0 md:block">
|
|
{/* A pack's row already says whose it is. */}
|
|
<Meta item={a} server={server && !inPack} date={false} />
|
|
</span>
|
|
<PrimaryAction item={a} canInstall={canInstall} onInstall={onInstall} onPreview={onPreview} />
|
|
<MoreButton onOpen={(e) => menu.open(e, null)} />
|
|
<ArtifactMenu {...props} menu={menu} />
|
|
</li>
|
|
);
|
|
}
|
|
|
|
/** The grid view's card: the same facts with room for two lines of description. */
|
|
function ArtifactCard({ as = "li", ...props }: ItemProps & { as?: "li" | "div" }) {
|
|
const { item: a, server, canInstall, onOpen, onInstall, onPreview } = props;
|
|
const { t } = useTranslation("artifacts");
|
|
const menu = useContextMenu<null>();
|
|
const Tag = as;
|
|
// The source line only when it says something the title does not.
|
|
const sub = [
|
|
t(`kindOne.${a.kind}`),
|
|
a.source && a.source !== a.title ? a.source : null,
|
|
fmtBytes(a.size),
|
|
]
|
|
.filter(Boolean)
|
|
.join(" · ");
|
|
return (
|
|
<Tag
|
|
className="card flex flex-col gap-2.5 p-4 transition-colors hover:border-border-light"
|
|
data-testid={`artifact-${a.id}`}
|
|
onContextMenu={(e: React.MouseEvent) => menu.open(e, null)}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<KindIcon kind={a.kind} />
|
|
<button
|
|
type="button"
|
|
onClick={onOpen}
|
|
title={t("details")}
|
|
className="min-w-0 flex-1 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
|
|
>
|
|
<span
|
|
className="block truncate text-sm font-medium text-fg-primary hover:text-accent"
|
|
title={a.title}
|
|
>
|
|
{a.title}
|
|
</span>
|
|
<span
|
|
className="mt-0.5 block truncate text-xs text-fg-muted"
|
|
title={a.source || a.url || ""}
|
|
>
|
|
{sub}
|
|
</span>
|
|
</button>
|
|
<PrimaryAction
|
|
item={a}
|
|
canInstall={canInstall}
|
|
onInstall={onInstall}
|
|
onPreview={onPreview}
|
|
/>
|
|
</div>
|
|
{((server && !a.shared) || a.auto || capabilities(a).hubOnly) && (
|
|
<span className="flex gap-1.5">
|
|
<Badges item={a} server={server} />
|
|
</span>
|
|
)}
|
|
{a.description && (
|
|
<p className="line-clamp-2 text-xs leading-relaxed text-fg-secondary">{a.description}</p>
|
|
)}
|
|
<div className="mt-auto flex items-center gap-2 border-t border-border pt-2">
|
|
<span className="min-w-0 flex-1">
|
|
<Meta item={a} server={server} />
|
|
</span>
|
|
<MoreButton onOpen={(e) => menu.open(e, null)} />
|
|
</div>
|
|
<ArtifactMenu {...props} menu={menu} />
|
|
</Tag>
|
|
);
|
|
}
|
|
|
|
/** An artifact's own page: title and main action up top, a strip of facts,
|
|
* what it is, how it installs, and what it carries. */
|
|
function DetailDialog({
|
|
item: a,
|
|
server,
|
|
canInstall,
|
|
onClose,
|
|
onShare,
|
|
onRename,
|
|
onDelete,
|
|
onInstall,
|
|
onPreview,
|
|
}: CardActions & {
|
|
item: Artifact;
|
|
server: boolean;
|
|
canInstall: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const { canPreview, canDownload, hubOnly } = capabilities(a);
|
|
const secondary = smallSecondary;
|
|
const stats: { label: string; value: React.ReactNode }[] = [
|
|
{ label: t("stat.kind"), value: t(`kindOne.${a.kind}`) },
|
|
...(a.kind === "skill" || a.kind === "plugin"
|
|
? [{ label: t("stat.installs"), value: a.installs > 0 ? <InstallsButton item={a} /> : "0" }]
|
|
: []),
|
|
...(a.files.length ? [{ label: t("stat.files"), value: String(a.files.length) }] : []),
|
|
...(a.size ? [{ label: t("stat.size"), value: fmtBytes(a.size) }] : []),
|
|
{ label: t("stat.updated"), value: fmtDate(a.updatedAt) },
|
|
];
|
|
return (
|
|
<Modal title={a.title} onClose={onClose} size="md">
|
|
<div className="space-y-5" data-testid="artifact-detail">
|
|
<div>
|
|
<div className="min-w-0">
|
|
<p className="text-base font-semibold leading-tight text-fg-primary">{a.title}</p>
|
|
<p className="mt-0.5 truncate text-sm text-fg-muted">
|
|
{server && a.owner && !a.mine ? t("by", { name: a.owner }) : t(`kindOne.${a.kind}`)}
|
|
{a.source ? ` · ${a.source}` : ""}
|
|
</p>
|
|
{a.shared && (
|
|
<span className="badge mt-2 border-accent/30 bg-accent-muted text-accent">
|
|
{t(hubOnly ? "hubOnly" : "shared")}
|
|
</span>
|
|
)}
|
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
|
<PrimaryAction
|
|
item={a}
|
|
canInstall={canInstall}
|
|
onInstall={onInstall}
|
|
onPreview={onPreview}
|
|
/>
|
|
{canPreview && a.kind !== "file" && (
|
|
<button
|
|
type="button"
|
|
className={secondary}
|
|
onClick={() => onPreview(capabilities(a).previewPath)}
|
|
>
|
|
{t("preview")}
|
|
</button>
|
|
)}
|
|
{canDownload && canPreview && (
|
|
<a href={api.artifacts.rawUrl(a.id, a.files[0]?.path, true)} className={secondary}>
|
|
{t("download")}
|
|
</a>
|
|
)}
|
|
{a.kind === "page" && a.url && (
|
|
<button type="button" className={secondary} onClick={() => void copyText(a.url!)}>
|
|
{t("copyLink")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dl className="grid grid-cols-2 divide-border rounded-lg border border-border bg-surface-2/50 sm:flex sm:divide-x">
|
|
{stats.map((s) => (
|
|
<div key={s.label} className="flex-1 px-3 py-2.5 text-center">
|
|
<dt className="text-[10px] font-medium uppercase tracking-wide text-fg-muted">
|
|
{s.label}
|
|
</dt>
|
|
<dd className="mt-0.5 text-sm font-semibold text-fg-primary">{s.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
<section>
|
|
<h3 className="mb-1 text-sm font-semibold text-fg-primary">
|
|
{t(a.kind === "skill" ? "preview.whenUsed" : "about")}
|
|
</h3>
|
|
<p className="whitespace-pre-wrap text-sm leading-relaxed text-fg-secondary">
|
|
{a.description || <span className="text-fg-muted">{t("preview.noDescription")}</span>}
|
|
</p>
|
|
</section>
|
|
|
|
{a.kind === "skill" && a.source && (
|
|
<section className="rounded-lg border border-border p-3">
|
|
<p className="flex items-center gap-2 text-xs text-fg-secondary">
|
|
{t("detail.runAs")}
|
|
<code className="rounded-md bg-surface-3 px-1.5 py-0.5 font-mono text-xs text-fg-primary">
|
|
/{a.source}
|
|
</code>
|
|
</p>
|
|
<p className="mt-1 font-mono text-[11px] text-fg-muted">
|
|
{t("preview.installsAs", { slug: a.source })}
|
|
</p>
|
|
</section>
|
|
)}
|
|
{a.kind === "plugin" && (
|
|
<section className="space-y-1 rounded-lg border border-border p-3 text-xs">
|
|
<p className="text-fg-secondary">
|
|
{t("form.pluginKey")}: <code className="font-mono text-fg-primary">{a.source}</code>
|
|
</p>
|
|
{a.market && (
|
|
<p className="truncate text-fg-secondary" title={a.market}>
|
|
{t("detail.market")}: <code className="font-mono text-fg-primary">{a.market}</code>
|
|
</p>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{a.files.length > 0 && a.kind !== "page" && (
|
|
<section>
|
|
<h3 className="mb-1.5 text-sm font-semibold text-fg-primary">
|
|
{t("files", { count: a.files.length })}
|
|
</h3>
|
|
<ul className="max-h-48 divide-y divide-border overflow-auto rounded-lg border border-border">
|
|
{a.files.map((f) => (
|
|
<li key={f.path} className="flex items-center gap-2 px-3 py-1.5 text-xs">
|
|
<span
|
|
className="min-w-0 flex-1 truncate font-mono text-fg-secondary"
|
|
title={f.path}
|
|
>
|
|
{f.path}
|
|
</span>
|
|
<span className="shrink-0 text-[11px] text-fg-muted">{fmtBytes(f.size)}</span>
|
|
{PREVIEWABLE.test(f.path) && (
|
|
<button
|
|
type="button"
|
|
className={footAction}
|
|
aria-label={`${t("preview")} ${f.path}`}
|
|
onClick={() => onPreview(f.path)}
|
|
>
|
|
{t("preview")}
|
|
</button>
|
|
)}
|
|
<a
|
|
href={api.artifacts.rawUrl(a.id, f.path, true)}
|
|
className={footAction}
|
|
aria-label={`${t("download")} ${f.path}`}
|
|
>
|
|
{t("download")}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)}
|
|
|
|
<p className="text-[11px] text-fg-muted">
|
|
{t("detail.added", { date: new Date(a.createdAt).toLocaleString() })}
|
|
</p>
|
|
|
|
{a.canChange && (
|
|
<div className="flex flex-wrap items-center gap-2 border-t border-border pt-4">
|
|
{server && (
|
|
<button type="button" className={secondary} onClick={onShare}>
|
|
{t(hubOnly ? "hubRemove" : a.shared ? "unshare" : "share")}
|
|
</button>
|
|
)}
|
|
<button type="button" className={secondary} onClick={onRename}>
|
|
{t("rename")}
|
|
</button>
|
|
{!hubOnly && (
|
|
<button
|
|
type="button"
|
|
className="btn-danger ml-auto px-2.5 py-1 text-xs"
|
|
onClick={onDelete}
|
|
>
|
|
{t("delete")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/** "N installs" on a card; a click lists who installed it, when, and where. */
|
|
function InstallsButton({ item }: { item: Artifact }) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [open, setOpen] = useState(false);
|
|
const [data, setData] = useState<ArtifactInstalls | null>(null);
|
|
const box = useRef<HTMLSpanElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setData(null);
|
|
api.artifacts
|
|
.installs(item.id)
|
|
.then(setData)
|
|
.catch((err) => {
|
|
setOpen(false);
|
|
toast.error(err);
|
|
});
|
|
const onDown = (e: MouseEvent) => {
|
|
if (!box.current?.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", onDown);
|
|
document.addEventListener("keydown", onKey);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onDown);
|
|
document.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [open, item.id]);
|
|
|
|
return (
|
|
<span className="relative" ref={box}>
|
|
<button
|
|
type="button"
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="underline decoration-dotted underline-offset-2 hover:text-fg-primary"
|
|
>
|
|
{t("installs", { count: item.installs })}
|
|
</button>
|
|
{open && (
|
|
<div
|
|
role="dialog"
|
|
aria-label={t("installsTitle")}
|
|
data-testid="artifact-installs"
|
|
className="absolute left-0 z-30 mt-1 w-80 max-w-[80vw] rounded-lg border border-border bg-surface-1 p-2 shadow-xl"
|
|
>
|
|
<p className="mb-1.5 px-1 text-xs font-medium text-fg-primary">{t("installsTitle")}</p>
|
|
{data === null ? (
|
|
<p className="px-1 text-xs text-fg-muted">{t("loading")}</p>
|
|
) : (
|
|
<ul className="max-h-64 space-y-1 overflow-auto">
|
|
{data.items.map((i, n) => (
|
|
<li key={n} className="rounded px-1.5 py-1 text-xs hover:bg-surface-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="min-w-0 flex-1 truncate text-fg-primary">
|
|
{i.mine ? t("installsYou") : (i.user ?? t("installsUnknown"))}
|
|
{i.replaced && (
|
|
<span className="ml-1 text-fg-muted">· {t("installsReplaced")}</span>
|
|
)}
|
|
</span>
|
|
<span className="shrink-0 text-[11px] text-fg-muted">
|
|
{new Date(i.at).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{i.paths && (
|
|
<div className="mt-0.5 space-y-0.5">
|
|
{i.paths.length ? (
|
|
i.paths.map((p) => (
|
|
<p
|
|
key={p}
|
|
className="truncate font-mono text-[10px] text-fg-muted"
|
|
title={p}
|
|
>
|
|
{p}
|
|
</p>
|
|
))
|
|
) : (
|
|
<p className="font-mono text-[10px] text-fg-muted">
|
|
{t("installsPluginWhere")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
{data.unrecorded > 0 && (
|
|
<li className="px-1.5 py-1 text-[11px] text-fg-muted">
|
|
{t("installsUnrecorded", { count: data.unrecorded })}
|
|
</li>
|
|
)}
|
|
{data.items.length === 0 && data.unrecorded === 0 && (
|
|
<li className="px-1.5 py-1 text-[11px] text-fg-muted">
|
|
{t("installsNoneOfYours")}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Modal({
|
|
title,
|
|
onClose,
|
|
children,
|
|
wide = false,
|
|
size,
|
|
flush = false,
|
|
}: {
|
|
title: string;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
wide?: boolean;
|
|
/** A detail sheet: wider than a form, narrower than a preview. */
|
|
size?: "md";
|
|
/** The body draws its own padding (a preview fills the panel edge to edge). */
|
|
flush?: boolean;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const panel = useRef<HTMLDivElement>(null);
|
|
useDialog(true, panel, onClose);
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-3"
|
|
role="presentation"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
ref={panel}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={title}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={`flex max-h-[90vh] w-full ${wide ? "max-w-6xl" : size === "md" ? "max-w-2xl" : "max-w-lg"} flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl shadow-black/50`}
|
|
>
|
|
<div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-4 py-3">
|
|
<h2 className="truncate text-sm font-semibold text-fg-primary">{title}</h2>
|
|
<button type="button" aria-label={t("close")} onClick={onClose} className="btn-icon">
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div className={`min-h-0 flex-1 ${flush ? "flex flex-col" : "overflow-auto p-4"}`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const fieldLabel = "mb-1 block text-xs text-fg-secondary";
|
|
|
|
function RenameDialog({
|
|
item,
|
|
onClose,
|
|
onSaved,
|
|
}: {
|
|
item: Artifact;
|
|
onClose: () => void;
|
|
onSaved: () => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const plugin = item.kind === "plugin";
|
|
// A skill edits its SKILL.md too: name, description and instructions,
|
|
// read from the snapshot and saved as a new one.
|
|
const skill = item.kind === "skill" && item.files.some((f) => f.path === "SKILL.md");
|
|
const [title, setTitle] = useState(item.title);
|
|
const [description, setDescription] = useState(item.description);
|
|
const [source, setSource] = useState(item.source ?? "");
|
|
const [market, setMarket] = useState(item.market ?? "");
|
|
const [orig, setOrig] = useState<{ name: string; description: string; body: string } | null>(
|
|
null
|
|
);
|
|
const [skillName, setSkillName] = useState("");
|
|
const [content, setContent] = useState("");
|
|
const [loadFailed, setLoadFailed] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!skill) return;
|
|
let live = true;
|
|
fetch(api.artifacts.rawUrl(item.id, "SKILL.md"), { credentials: "same-origin" })
|
|
.then((r) => (r.ok ? r.text() : Promise.reject(new Error(String(r.status)))))
|
|
.then((text) => {
|
|
if (!live) return;
|
|
const parts = splitSkillMd(text);
|
|
const o = { ...parts, name: parts.name || item.source || "" };
|
|
setOrig(o);
|
|
setSkillName(o.name);
|
|
setDescription(o.description || item.description);
|
|
setContent(o.body);
|
|
})
|
|
.catch(() => live && setLoadFailed(true));
|
|
return () => {
|
|
live = false;
|
|
};
|
|
}, [skill, item.id, item.source, item.description]);
|
|
|
|
const skillChanged =
|
|
!!orig &&
|
|
(skillName.trim() !== orig.name ||
|
|
description.trim() !== orig.description ||
|
|
content !== orig.body);
|
|
const blocked =
|
|
busy ||
|
|
!title.trim() ||
|
|
(plugin && (!source.trim() || !market.trim())) ||
|
|
(skill && (!orig || !skillSlug(skillName) || !description.trim() || !content.trim()));
|
|
|
|
return (
|
|
<Modal title={t("editTitle", { title: item.title })} onClose={onClose} wide={skill}>
|
|
<form
|
|
className="space-y-3"
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
setBusy(true);
|
|
try {
|
|
await api.artifacts.update(item.id, {
|
|
title,
|
|
...(skill
|
|
? skillChanged
|
|
? {
|
|
skill: {
|
|
name: skillName.trim(),
|
|
description: description.trim(),
|
|
content,
|
|
},
|
|
}
|
|
: {}
|
|
: { description }),
|
|
...(plugin && source.trim() !== item.source ? { source: source.trim() } : {}),
|
|
...(plugin && market.trim() !== item.market ? { market: market.trim() } : {}),
|
|
});
|
|
onSaved();
|
|
} catch (err) {
|
|
toast.error(err);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}}
|
|
>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("edit.title")}</span>
|
|
<input
|
|
className="input w-full"
|
|
value={title}
|
|
autoFocus
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</label>
|
|
{skill ? (
|
|
loadFailed ? (
|
|
<p className="text-sm text-status-danger">{t("previewFailed")}</p>
|
|
) : !orig ? (
|
|
<p className="text-sm text-fg-muted">{t("loading")}</p>
|
|
) : (
|
|
<>
|
|
<SkillNameField value={skillName} onChange={setSkillName} required />
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("skill.description")} *</span>
|
|
<textarea
|
|
className="input w-full resize-y"
|
|
rows={2}
|
|
value={description}
|
|
placeholder={t("skill.descriptionHint")}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("skill.content")} *</span>
|
|
<textarea
|
|
className="input min-h-[16rem] w-full resize-y font-mono text-xs"
|
|
rows={16}
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
/>
|
|
</label>
|
|
{item.files.length > 1 && (
|
|
<p className="text-[11px] text-fg-muted">
|
|
{t("edit.otherFiles", { count: item.files.length - 1 })}
|
|
</p>
|
|
)}
|
|
{skillChanged && item.installed && (
|
|
<p className="text-[11px] text-fg-muted">{t("edit.reinstallNote")}</p>
|
|
)}
|
|
</>
|
|
)
|
|
) : (
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("edit.description")}</span>
|
|
<textarea
|
|
className="input w-full resize-y"
|
|
rows={4}
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
</label>
|
|
)}
|
|
{plugin && (
|
|
<>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("form.pluginKey")}</span>
|
|
<input
|
|
className="input w-full font-mono text-xs"
|
|
placeholder="my-plugin@my-marketplace"
|
|
value={source}
|
|
onChange={(e) => setSource(e.target.value)}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("form.market")}</span>
|
|
<input
|
|
className="input w-full font-mono text-xs"
|
|
placeholder="owner/repo · https://…"
|
|
value={market}
|
|
onChange={(e) => setMarket(e.target.value)}
|
|
/>
|
|
</label>
|
|
</>
|
|
)}
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
|
|
{t("form.cancel")}
|
|
</button>
|
|
<button type="submit" className="btn-primary text-sm" disabled={blocked}>
|
|
{t("form.saveEdit")}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// Text the dashboard renders itself: Markdown through `MarkdownPreview`, the
|
|
// rest as code. A sandboxed iframe would draw a text/plain body with the
|
|
// browser's own colours — light text on our white frame in a dark theme.
|
|
const TEXT = /\.(md|markdown|txt|log|csv|tsv|json|ya?ml|sh|py|js|ts)$/i;
|
|
const MEDIA = /\.(mp4|webm|mp3|wav)$/i;
|
|
const TEXT_MAX = 1024 * 1024;
|
|
|
|
function TextPreview({
|
|
url,
|
|
path,
|
|
skill = false,
|
|
}: {
|
|
url: string;
|
|
path: string;
|
|
/** A skill's SKILL.md: its name/description are in the dialog's header, so
|
|
* only the instructions are rendered (the raw frontmatter folds away). */
|
|
skill?: boolean;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [text, setText] = useState<string | null>(null);
|
|
const [failed, setFailed] = useState(false);
|
|
useEffect(() => {
|
|
let live = true;
|
|
setText(null);
|
|
setFailed(false);
|
|
fetch(url, { credentials: "same-origin" })
|
|
.then((r) => (r.ok ? r.text() : Promise.reject(new Error(String(r.status)))))
|
|
.then((body) => live && setText(body))
|
|
.catch(() => live && setFailed(true));
|
|
return () => {
|
|
live = false;
|
|
};
|
|
}, [url]);
|
|
if (failed) return <p className="p-4 text-sm text-status-danger">{t("previewFailed")}</p>;
|
|
if (text === null) return <p className="p-4 text-sm text-fg-muted">{t("loading")}</p>;
|
|
const shown = text.length > TEXT_MAX ? text.slice(0, TEXT_MAX) : text;
|
|
const front = skill ? /^\uFEFF?---\r?\n([\s\S]*?)\r?\n---/.exec(shown) : null;
|
|
return (
|
|
<div className="h-full overflow-auto" data-testid="artifact-text-preview">
|
|
{skill ? (
|
|
<div className="px-5 py-4">
|
|
<p className="mb-2 text-[11px] font-medium uppercase tracking-wide text-fg-muted">
|
|
{t("preview.instructions")}
|
|
</p>
|
|
<MarkdownPreview text={splitSkillMd(shown).body} />
|
|
{front && (
|
|
<details className="mt-4 rounded-lg border border-border px-3 py-2">
|
|
<summary className="cursor-pointer text-xs text-fg-secondary">
|
|
{t("preview.frontmatter")}
|
|
</summary>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words font-mono text-[11px] text-fg-secondary">
|
|
{front[1]}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
) : isMarkdown(path) ? (
|
|
<MarkdownPreview text={shown} className="px-5 py-4" />
|
|
) : (
|
|
<pre className="whitespace-pre-wrap break-words p-4 font-mono text-xs text-fg-primary">
|
|
{shown}
|
|
</pre>
|
|
)}
|
|
{shown !== text && <p className="px-4 pb-4 text-[11px] text-fg-muted">{t("truncated")}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** A skill preview's header: what it installs as, when Claude uses it, its files. */
|
|
function SkillSummary({ item }: { item: Artifact }) {
|
|
const { t } = useTranslation("artifacts");
|
|
return (
|
|
<div
|
|
className="shrink-0 space-y-1.5 border-b border-border px-4 py-3"
|
|
data-testid="skill-summary"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<code className="rounded bg-surface-3 px-1.5 py-0.5 font-mono text-xs text-fg-primary">
|
|
/{item.source}
|
|
</code>
|
|
{item.installed && (
|
|
<span className="text-[11px] text-status-success">{t("installedBadge")}</span>
|
|
)}
|
|
<span className="ml-auto text-[11px] text-fg-muted">
|
|
{t("files", { count: item.files.length })}
|
|
{item.size ? ` · ${fmtBytes(item.size)}` : ""}
|
|
{item.owner && !item.mine ? ` · ${t("by", { name: item.owner })}` : ""}
|
|
{` · ${new Date(item.updatedAt).toLocaleString()}`}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-[11px] font-medium uppercase tracking-wide text-fg-muted">
|
|
{t("preview.whenUsed")}
|
|
</p>
|
|
<p className="text-sm text-fg-primary">
|
|
{item.description || <span className="text-fg-muted">{t("preview.noDescription")}</span>}
|
|
</p>
|
|
</div>
|
|
<p className="font-mono text-[11px] text-fg-muted">
|
|
{t("preview.installsAs", { slug: item.source })}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PreviewDialog({
|
|
item,
|
|
path,
|
|
onClose,
|
|
}: {
|
|
item: Artifact;
|
|
path: string;
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [current, setCurrent] = useState(path);
|
|
const url = api.artifacts.rawUrl(item.id, current);
|
|
const html = /\.(html?|svg)$/i.test(current);
|
|
return (
|
|
<Modal title={item.title} onClose={onClose} wide flush>
|
|
{item.kind === "skill" && <SkillSummary item={item} />}
|
|
<div className="flex h-[70vh] min-h-0">
|
|
{item.files.length > 1 && (
|
|
<ul className="w-56 shrink-0 space-y-0.5 overflow-auto border-r border-border p-2">
|
|
{item.files.map((f) => (
|
|
<li key={f.path}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCurrent(f.path)}
|
|
aria-current={f.path === current ? "true" : undefined}
|
|
className={`w-full truncate rounded px-2 py-1 text-left font-mono text-[11px] ${
|
|
f.path === current
|
|
? "bg-surface-3 text-fg-primary"
|
|
: "text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
|
|
}`}
|
|
title={f.path}
|
|
>
|
|
{f.path}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
|
|
<span className="min-w-0 flex-1 truncate font-mono text-xs text-fg-secondary">
|
|
{current}
|
|
</span>
|
|
<a
|
|
href={api.artifacts.rawUrl(item.id, current, true)}
|
|
className="btn-ghost px-2 py-1 text-xs"
|
|
>
|
|
{t("download")}
|
|
</a>
|
|
</div>
|
|
<div className="min-h-0 flex-1 bg-surface-0">
|
|
{!PREVIEWABLE.test(current) ? (
|
|
<div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
|
|
<p className="text-sm text-fg-secondary">{t("noPreview")}</p>
|
|
<a
|
|
href={api.artifacts.rawUrl(item.id, current, true)}
|
|
className="btn-primary text-sm"
|
|
>
|
|
{t("download")}
|
|
</a>
|
|
</div>
|
|
) : TEXT.test(current) ? (
|
|
<TextPreview
|
|
url={url}
|
|
path={current}
|
|
skill={item.kind === "skill" && current === "SKILL.md"}
|
|
/>
|
|
) : MEDIA.test(current) ? (
|
|
<div className="flex h-full items-center justify-center p-4">
|
|
{/\.(mp3|wav)$/i.test(current) ? (
|
|
<audio src={url} controls className="w-full max-w-lg" />
|
|
) : (
|
|
<video src={url} controls className="max-h-full max-w-full" />
|
|
)}
|
|
</div>
|
|
) : IMAGE.test(current) && !html ? (
|
|
<img src={url} alt={current} className="h-full w-full object-contain p-4" />
|
|
) : (
|
|
// No allow-* tokens: a shared page renders, nothing in it runs.
|
|
// HTML and SVG draw on white, the colour a page assumes.
|
|
<iframe
|
|
title={current}
|
|
src={url}
|
|
sandbox=""
|
|
className="h-full w-full bg-white"
|
|
data-testid="artifact-preview"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function AddDialog({
|
|
kind,
|
|
onClose,
|
|
onAdded,
|
|
}: {
|
|
kind: ArtifactKind;
|
|
onClose: () => void;
|
|
onAdded: () => void;
|
|
}) {
|
|
const { t } = useTranslation("artifacts");
|
|
const [busy, setBusy] = useState(false);
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [url, setUrl] = useState("");
|
|
const [lanes, setLanes] = useState<Lane[]>([]);
|
|
const [laneId, setLaneId] = useState<number | null>(null);
|
|
const [candidates, setCandidates] = useState<ArtifactCandidate[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (kind !== "file" && kind !== "skill") return;
|
|
api.lanes
|
|
.list()
|
|
.then((r) => setLanes(r.lanes))
|
|
.catch(() => setLanes([]));
|
|
}, [kind]);
|
|
|
|
useEffect(() => {
|
|
if (kind === "file") {
|
|
setCandidates(null);
|
|
if (laneId)
|
|
api.artifacts
|
|
.candidates(laneId)
|
|
.then((r) => setCandidates(r.items))
|
|
.catch((err) => {
|
|
setCandidates([]);
|
|
toast.error(err);
|
|
});
|
|
}
|
|
}, [kind, laneId]);
|
|
|
|
const run = async (fn: () => Promise<unknown>, close = true) => {
|
|
setBusy(true);
|
|
try {
|
|
await fn();
|
|
toast.success(t("added"));
|
|
onAdded();
|
|
if (close) onClose();
|
|
} catch (err) {
|
|
toast.error(err);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
const meta = (
|
|
<>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("form.title")}</span>
|
|
<input className="input w-full" value={title} onChange={(e) => setTitle(e.target.value)} />
|
|
</label>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("form.description")}</span>
|
|
<textarea
|
|
className="input w-full resize-y"
|
|
rows={3}
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
</label>
|
|
</>
|
|
);
|
|
const workspacePicker = (
|
|
<select
|
|
className="select w-full"
|
|
aria-label={t("form.workspace")}
|
|
value={laneId ?? ""}
|
|
onChange={(e) => setLaneId(e.target.value ? Number(e.target.value) : null)}
|
|
>
|
|
<option value="">{t("form.pickWorkspace")}</option>
|
|
{lanes.map((l) => (
|
|
<option key={l.id} value={l.id}>
|
|
{l.title || l.cwd}
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
|
|
return (
|
|
<Modal title={t(`add.${kind}`)} onClose={onClose}>
|
|
<div className="space-y-3" data-testid={`artifacts-add-${kind}`}>
|
|
{kind === "page" && (
|
|
<form
|
|
className="space-y-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
void run(() => api.artifacts.addPage({ url, title, description }));
|
|
}}
|
|
>
|
|
<label className="block">
|
|
<span className={fieldLabel}>{t("form.url")}</span>
|
|
<input
|
|
className="input w-full font-mono text-xs"
|
|
placeholder="https://claude.ai/…"
|
|
value={url}
|
|
autoFocus
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
/>
|
|
</label>
|
|
{meta}
|
|
<div className="flex justify-end gap-2 pt-1">
|
|
<button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
|
|
{t("form.cancel")}
|
|
</button>
|
|
<button type="submit" className="btn-primary text-sm" disabled={busy || !url.trim()}>
|
|
{t("form.save")}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
{kind === "file" && (
|
|
<>
|
|
<FileUploadPanel onAdded={onAdded} />
|
|
<p className="border-t border-border-light pt-3 text-xs font-medium text-fg-secondary">
|
|
{t("file.fromWorkspace")}
|
|
</p>
|
|
{workspacePicker}
|
|
{laneId && candidates === null && (
|
|
<p className="text-xs text-fg-muted">{t("loading")}</p>
|
|
)}
|
|
{candidates && candidates.length === 0 && (
|
|
<p className="text-xs text-fg-muted">{t("form.noCandidates")}</p>
|
|
)}
|
|
{candidates && candidates.length > 0 && (
|
|
<ul className="max-h-80 space-y-0.5 overflow-auto rounded-lg border border-border p-1">
|
|
{candidates.map((c) => (
|
|
<li
|
|
key={c.path}
|
|
className="flex items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-surface-2"
|
|
>
|
|
<span
|
|
className="min-w-0 flex-1 truncate font-mono text-fg-secondary"
|
|
title={c.path}
|
|
>
|
|
{c.path}
|
|
</span>
|
|
{!c.exists ? (
|
|
<span className="text-fg-muted">{t("form.missing")}</span>
|
|
) : c.pinned ? (
|
|
<span className="text-fg-muted">{t("form.pinned")}</span>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="btn-ghost text-xs"
|
|
disabled={busy}
|
|
onClick={() =>
|
|
void run(async () => {
|
|
await api.artifacts.pinFile({
|
|
laneId: laneId!,
|
|
path: c.path,
|
|
sessionId: c.sessionId,
|
|
});
|
|
setCandidates((list) =>
|
|
(list ?? []).map((x) =>
|
|
x.path === c.path ? { ...x, pinned: true } : x
|
|
)
|
|
);
|
|
}, false)
|
|
}
|
|
>
|
|
{t("form.pin")}
|
|
</button>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{kind === "skill" && <SkillAddPanel lanes={lanes} onAdded={onAdded} onClose={onClose} />}
|
|
|
|
{kind === "plugin" && <PluginAddPanel onAdded={onAdded} onClose={onClose} />}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|