@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/src/components/SkillsView.tsx

@@ -1,1435 +0,0 @@
-/**
- * Skills management view — create, enable/disable, and install skills.
- *
- * Professional card-grid layout with search, stats, polished toggle switches,
- * and a structured install modal. Follows the CSS variable design system used
- * throughout the app (--bg, --card, --border, --accent, --muted, --txt, etc.).
- */
-
-import { Button, Input } from "@elizaos/ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import type {
-  SkillInfo,
-  SkillMarketplaceResult,
-  SkillScanReportSummary,
-} from "../api";
-import { client } from "../api";
-import { useTimeout } from "../hooks";
-import { useApp } from "../state";
-import { ConfirmDeleteControl } from "./confirm-delete-control";
-import { StatusBadge } from "./ui-badges";
-import { Switch } from "./ui-switch";
-
-/* ── Skill Card ─────────────────────────────────────────────────────── */
-
-function SkillCard({
-  skill,
-  skillToggleAction,
-  skillReviewId,
-  skillReviewReport,
-  skillReviewLoading,
-  onToggle,
-  onEdit,
-  onDelete,
-  onReview,
-  onAcknowledge,
-  onDismissReview,
-}: {
-  skill: SkillInfo;
-  skillToggleAction: string;
-  skillReviewId: string;
-  skillReviewReport: ReturnType<typeof useApp>["skillReviewReport"];
-  skillReviewLoading: boolean;
-  onToggle: (id: string, enabled: boolean) => void;
-  onEdit: (skill: SkillInfo) => void;
-  onDelete: (id: string, name: string) => void;
-  onReview: (id: string) => void;
-  onAcknowledge: (id: string) => void;
-  onDismissReview: () => void;
-}) {
-  const { t } = useApp();
-  const isQuarantined =
-    skill.scanStatus === "warning" || skill.scanStatus === "critical";
-  const isBlocked = skill.scanStatus === "blocked";
-  const isReviewing = skillReviewId === skill.id;
-
-  return (
-    <div
-      className={`flex flex-col border bg-[var(--card)] transition-colors ${
-        isQuarantined || isBlocked
-          ? "border-[#e74c3c]/40"
-          : "border-[var(--border)] hover:border-[var(--accent)]/50"
-      }`}
-      data-skill-id={skill.id}
-    >
-      {/* Main content area */}
-      <div className="p-4">
-        {/* Top row: badge + toggle */}
-        <div className="flex items-center justify-between mb-2.5">
-          <StatusBadge
-            label={
-              skill.scanStatus === "blocked" || skill.scanStatus === "critical"
-                ? "Blocked"
-                : skill.scanStatus === "warning"
-                  ? "Warning"
-                  : skill.enabled
-                    ? "Active"
-                    : "Inactive"
-            }
-            tone={
-              skill.scanStatus === "blocked" ||
-              skill.scanStatus === "critical" ||
-              skill.scanStatus === "warning"
-                ? skill.scanStatus === "warning"
-                  ? "warning"
-                  : "danger"
-                : skill.enabled
-                  ? "success"
-                  : "muted"
-            }
-            withDot
-          />
-          {!isBlocked && !isQuarantined && (
-            <Switch
-              checked={skill.enabled}
-              disabled={skillToggleAction === skill.id}
-              onChange={(val) => onToggle(skill.id, val)}
-              size="compact"
-              trackOnClass="bg-[var(--accent)]"
-              trackOffClass="bg-[var(--border)]"
-              knobClass="bg-white shadow-sm"
-            />
-          )}
-          {isQuarantined && !isReviewing && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-6 px-2 text-[10px] font-bold bg-[#f39c12]/15 text-[#f39c12] border-[#f39c12]/30 hover:bg-[#f39c12]/25 hover:text-[#f39c12] transition-colors"
-              onClick={() => onReview(skill.id)}
-            >
-              {t("skillsview.ReviewFindings")}
-            </Button>
-          )}
-        </div>
-
-        {/* Name + description */}
-        <div
-          className="font-semibold text-sm text-[var(--txt)] mb-1 truncate"
-          title={skill.name}
-        >
-          {skill.name}
-        </div>
-        <div className="text-[11px] text-[var(--muted)] line-clamp-2 min-h-[2em]">
-          {skill.description || "No description provided"}
-        </div>
-      </div>
-
-      {/* Footer actions */}
-      <div className="flex items-center gap-2 px-4 py-3 border-t border-border/40 bg-black/5 mt-auto">
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 px-3 text-[11px] font-bold text-muted hover:text-txt transition-colors"
-          onClick={() => onEdit(skill)}
-        >
-          {t("triggersview.Edit")}
-        </Button>
-        <ConfirmDeleteControl
-          triggerClassName="h-7 px-3 text-[11px] font-bold text-danger hover:bg-danger/10 hover:text-danger-foreground transition-colors rounded-md"
-          confirmClassName="px-3 py-1 text-[11px] font-bold bg-danger text-danger-foreground hover:bg-danger/90 transition-colors rounded-md shadow-sm"
-          cancelClassName="px-3 py-1 text-[11px] font-bold text-muted border border-border/40 hover:text-txt transition-colors rounded-md"
-          confirmLabel="Yes"
-          cancelLabel="No"
-          onConfirm={() => onDelete(skill.id, skill.name)}
-        />
-        <span className="flex-1" />
-        <span
-          className="text-[10px] text-[var(--muted)] font-mono truncate max-w-[120px]"
-          title={skill.id}
-        >
-          {skill.id.length > 16 ? `${skill.id.slice(0, 16)}...` : skill.id}
-        </span>
-      </div>
-
-      {/* Inline review panel */}
-      {isReviewing && skillReviewReport ? (
-        <div className="border-t border-[var(--border)] p-4 bg-[var(--bg)]">
-          <div className="flex items-center gap-3 mb-3">
-            <span className="text-xs font-semibold text-[var(--txt)]">
-              {t("skillsview.ScanReport")}
-            </span>
-            <span className="text-[11px] text-[#e74c3c] font-mono">
-              {skillReviewReport.summary.critical} {t("skillsview.critical")}
-            </span>
-            <span className="text-[11px] text-[#f39c12] font-mono">
-              {skillReviewReport.summary.warn} {t("skillsview.warnings")}
-            </span>
-          </div>
-          {skillReviewReport.findings.length > 0 && (
-            <div className="max-h-40 overflow-y-auto mb-3 border border-[var(--border)] bg-[var(--card)]">
-              {skillReviewReport.findings.map(
-                (
-                  f: SkillScanReportSummary["findings"][number],
-                  idx: number,
-                ) => (
-                  <div
-                    key={`${f.file}:${f.line}:${f.message}`}
-                    className={`flex items-start gap-2 px-3 py-1.5 text-[11px] font-mono ${
-                      idx > 0 ? "border-t border-[var(--border)]" : ""
-                    }`}
-                  >
-                    <span
-                      className={`shrink-0 px-1.5 py-px font-bold text-[10px] uppercase ${
-                        f.severity === "critical"
-                          ? "bg-[#e74c3c]/15 text-[#e74c3c]"
-                          : "bg-[#f39c12]/15 text-[#f39c12]"
-                      }`}
-                    >
-                      {f.severity}
-                    </span>
-                    <span className="text-[var(--txt)] flex-1 min-w-0">
-                      {f.message}
-                    </span>
-                    <span className="text-[var(--muted)] shrink-0">
-                      {f.file}:{f.line}
-                    </span>
-                  </div>
-                ),
-              )}
-            </div>
-          )}
-          <div className="flex gap-2.5 mt-2">
-            <Button
-              variant="default"
-              size="sm"
-              className="h-7 px-3 text-[11px] font-bold tracking-wide shadow-sm"
-              onClick={() => onAcknowledge(skill.id)}
-            >
-              {t("skillsview.AcknowledgeAmpEn")}
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-3 text-[11px] font-bold text-muted hover:text-txt transition-colors"
-              onClick={onDismissReview}
-            >
-              {t("skillsview.Dismiss")}
-            </Button>
-          </div>
-        </div>
-      ) : isReviewing && skillReviewLoading ? (
-        <div className="border-t border-[var(--border)] p-4 text-xs text-[var(--muted)] italic">
-          {t("skillsview.LoadingScanReport")}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/* ── Marketplace Result Card ────────────────────────────────────────── */
-
-function MarketplaceCard({
-  item,
-  isInstalled,
-  skillsMarketplaceAction,
-  onInstall,
-  onUninstall,
-}: {
-  item: SkillMarketplaceResult;
-  isInstalled: boolean;
-  skillsMarketplaceAction: string;
-  onInstall: (item: SkillMarketplaceResult) => void;
-  onUninstall: (skillId: string, name: string) => void;
-}) {
-  const { t } = useApp();
-  const isInstalling = skillsMarketplaceAction === `install:${item.id}`;
-  const isUninstalling = skillsMarketplaceAction === `uninstall:${item.id}`;
-  const sourceLabel = item.repository || item.slug || item.id;
-
-  return (
-    <div className="flex items-start gap-4 p-4 border border-[var(--border)] bg-[var(--card)] hover:border-[var(--accent)]/50 transition-colors">
-      {/* Icon placeholder */}
-      <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-[var(--accent)]/10 text-[var(--accent)] text-sm font-bold rounded">
-        {item.name.charAt(0).toUpperCase()}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="font-semibold text-sm text-[var(--txt)]">
-          {item.name}
-        </div>
-        <div className="text-[11px] text-[var(--muted)] mt-0.5 line-clamp-2">
-          {item.description || "No description."}
-        </div>
-        <div className="flex items-center gap-2 mt-1.5 text-[10px] text-[var(--muted)]">
-          <span className="font-mono">{sourceLabel}</span>
-          {item.score != null && (
-            <>
-              <span className="text-[var(--border)]">/</span>
-              <span>
-                {t("skillsview.score")} {item.score.toFixed(2)}
-              </span>
-            </>
-          )}
-          {item.tags && item.tags.length > 0 && (
-            <>
-              <span className="text-[var(--border)]">/</span>
-              {item.tags.slice(0, 3).map((tag) => (
-                <span
-                  key={tag}
-                  className="px-1.5 py-px bg-[var(--accent)]/10 text-[var(--accent)]"
-                >
-                  {tag}
-                </span>
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-      {isInstalled ? (
-        <Button
-          variant="destructive"
-          size="sm"
-          className="h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm shrink-0"
-          onClick={() => onUninstall(item.id, item.name)}
-          disabled={isUninstalling}
-        >
-          {isUninstalling ? "Removing..." : "Uninstall"}
-        </Button>
-      ) : (
-        <Button
-          variant="default"
-          size="sm"
-          className="h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm shrink-0"
-          onClick={() => onInstall(item)}
-          disabled={isInstalling}
-        >
-          {isInstalling ? "Installing..." : "Install"}
-        </Button>
-      )}
-    </div>
-  );
-}
-
-/* ── Install Modal ──────────────────────────────────────────────────── */
-
-type InstallTab = "search" | "url";
-
-function InstallModal({
-  skills,
-  skillsMarketplaceQuery,
-  skillsMarketplaceResults,
-  skillsMarketplaceError,
-  skillsMarketplaceLoading,
-  skillsMarketplaceAction,
-  skillsMarketplaceManualGithubUrl,
-  searchSkillsMarketplace,
-  installSkillFromMarketplace,
-  uninstallMarketplaceSkill,
-  installSkillFromGithubUrl,
-  setState,
-  onClose,
-}: {
-  skills: SkillInfo[];
-  skillsMarketplaceQuery: string;
-  skillsMarketplaceResults: SkillMarketplaceResult[];
-  skillsMarketplaceError: string;
-  skillsMarketplaceLoading: boolean;
-  skillsMarketplaceAction: string;
-  skillsMarketplaceManualGithubUrl: string;
-  searchSkillsMarketplace: () => Promise<void>;
-  installSkillFromMarketplace: (item: SkillMarketplaceResult) => Promise<void>;
-  uninstallMarketplaceSkill: (skillId: string, name: string) => Promise<void>;
-  installSkillFromGithubUrl: () => Promise<void>;
-  setState: ReturnType<typeof useApp>["setState"];
-  onClose: () => void;
-}) {
-  const { t } = useApp();
-  const [tab, setTab] = useState<InstallTab>("search");
-
-  return (
-    <div
-      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/70"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClose();
-        }
-      }}
-      role="dialog"
-      aria-modal="true"
-    >
-      <div
-        className="w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden mx-4"
-        style={{
-          background: "var(--card)",
-          border: "1px solid var(--border)",
-          borderRadius: 16,
-          backdropFilter: "blur(20px) saturate(115%)",
-          boxShadow: "var(--shadow-lg)",
-          color: "var(--text)",
-        }}
-      >
-        {/* Header */}
-        <div
-          className="flex items-center justify-between px-5 py-4"
-          style={{ borderBottom: "1px solid var(--border)" }}
-        >
-          <div>
-            <div
-              style={{
-                fontSize: 13,
-                fontWeight: 800,
-                letterSpacing: "0.14em",
-                textTransform: "uppercase",
-                color: "var(--text)",
-              }}
-            >
-              Install Skill
-            </div>
-            <div
-              style={{
-                fontSize: 11,
-                color: "var(--muted)",
-                marginTop: 2,
-              }}
-            >
-              Add skills from the marketplace or a GitHub repository.
-            </div>
-          </div>
-          <button
-            type="button"
-            style={{
-              width: 28,
-              height: 28,
-              borderRadius: "50%",
-              border: "1px solid var(--border)",
-              background: "transparent",
-              color: "var(--muted)",
-              cursor: "pointer",
-              fontSize: 14,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-            onClick={onClose}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* Tabs */}
-        <div
-          className="flex"
-          style={{ borderBottom: "1px solid var(--border)" }}
-        >
-          {(
-            [
-              { id: "search" as const, label: "MARKETPLACE" },
-              { id: "url" as const, label: "GITHUB URL" },
-            ] as const
-          ).map((t) => (
-            <button
-              type="button"
-              key={t.id}
-              style={{
-                flex: 1,
-                padding: "10px 16px",
-                fontSize: 11,
-                fontWeight: 700,
-                letterSpacing: "0.1em",
-                background: "transparent",
-                border: "none",
-                cursor: "pointer",
-                borderBottom:
-                  tab === t.id ? "2px solid #f0b232" : "2px solid transparent",
-                color: tab === t.id ? "#f0b232" : "var(--muted)",
-                transition: "color 0.2s, border-color 0.2s",
-              }}
-              onClick={() => setTab(t.id)}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto px-5 py-4">
-          {tab === "search" && (
-            <>
-              <div className="flex gap-2 items-center mb-4">
-                <input
-                  type="text"
-                  className="plugins-game-search-input"
-                  style={{ flex: 1, minWidth: 200 }}
-                  placeholder="Search skills by keyword..."
-                  value={skillsMarketplaceQuery}
-                  onChange={(e) =>
-                    setState("skillsMarketplaceQuery", e.target.value)
-                  }
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") void searchSkillsMarketplace();
-                  }}
-                />
-                <button
-                  type="button"
-                  className="plugins-game-chip"
-                  style={{ minHeight: 36, padding: "0 16px", fontWeight: 700 }}
-                  onClick={() => searchSkillsMarketplace()}
-                  disabled={skillsMarketplaceLoading}
-                >
-                  {skillsMarketplaceLoading ? "Searching..." : "Search"}
-                </button>
-              </div>
-
-              {skillsMarketplaceError && (
-                <div
-                  className="p-2.5 text-xs mb-3"
-                  style={{ border: "1px solid #e74c3c", color: "#e74c3c" }}
-                >
-                  {skillsMarketplaceError}
-                </div>
-              )}
-
-              {skillsMarketplaceResults.length === 0 ? (
-                <div className="text-center py-12">
-                  <div
-                    style={{
-                      color: "var(--muted)",
-                      fontSize: 12,
-                      letterSpacing: "0.1em",
-                      textTransform: "uppercase",
-                    }}
-                  >
-                    Search above to discover skills.
-                  </div>
-                </div>
-              ) : (
-                <div className="flex flex-col gap-2">
-                  <div className="text-[11px] text-[var(--muted)] mb-1">
-                    {skillsMarketplaceResults.length} {t("skillsview.result")}
-                    {skillsMarketplaceResults.length !== 1 ? "s" : ""}
-                  </div>
-                  {skillsMarketplaceResults.map((item) => (
-                    <MarketplaceCard
-                      key={item.id}
-                      item={item}
-                      isInstalled={skills.some((s) => s.id === item.id)}
-                      skillsMarketplaceAction={skillsMarketplaceAction}
-                      onInstall={installSkillFromMarketplace}
-                      onUninstall={uninstallMarketplaceSkill}
-                    />
-                  ))}
-                </div>
-              )}
-            </>
-          )}
-
-          {tab === "url" && (
-            <div>
-              <div
-                style={{
-                  fontSize: 12,
-                  fontWeight: 600,
-                  color: "var(--text)",
-                  marginBottom: 4,
-                }}
-              >
-                GitHub Repository URL
-              </div>
-              <div
-                style={{
-                  fontSize: 11,
-                  color: "var(--muted)",
-                  marginBottom: 12,
-                }}
-              >
-                Paste a full GitHub repository URL to install a skill directly.
-              </div>
-              <div className="flex gap-2 items-center">
-                <input
-                  type="text"
-                  className="plugins-game-search-input"
-                  style={{ flex: 1 }}
-                  placeholder="https://github.com/org/repo"
-                  value={skillsMarketplaceManualGithubUrl}
-                  onChange={(e) =>
-                    setState("skillsMarketplaceManualGithubUrl", e.target.value)
-                  }
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") void installSkillFromGithubUrl();
-                  }}
-                />
-                <button
-                  type="button"
-                  className="plugins-game-chip"
-                  style={{ minHeight: 36, padding: "0 16px", fontWeight: 700 }}
-                  onClick={() => installSkillFromGithubUrl()}
-                  disabled={
-                    skillsMarketplaceAction === "install:manual" ||
-                    !skillsMarketplaceManualGithubUrl.trim()
-                  }
-                >
-                  {skillsMarketplaceAction === "install:manual"
-                    ? "Installing..."
-                    : "Install"}
-                </button>
-              </div>
-
-              {skillsMarketplaceError && (
-                <div
-                  className="p-2.5 text-xs mt-3"
-                  style={{ border: "1px solid #e74c3c", color: "#e74c3c" }}
-                >
-                  {skillsMarketplaceError}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Create Skill Inline Form ───────────────────────────────────────── */
-
-function CreateSkillForm({
-  skillCreateName,
-  skillCreateDescription,
-  skillCreating,
-  setState,
-  onCancel,
-  onCreate,
-}: {
-  skillCreateName: string;
-  skillCreateDescription: string;
-  skillCreating: boolean;
-  setState: ReturnType<typeof useApp>["setState"];
-  onCancel: () => void;
-  onCreate: () => void;
-}) {
-  const { t } = useApp();
-  return (
-    <div className="border border-[var(--accent)]/40 bg-[var(--card)] mb-4">
-      <div className="px-4 py-3 border-b border-[var(--border)]">
-        <div className="text-xs font-semibold text-[var(--txt)]">
-          {t("skillsview.CreateNewSkill")}
-        </div>
-      </div>
-      <div className="p-4 flex flex-col gap-3">
-        <div>
-          <span className="block text-[11px] text-[var(--muted)] mb-1 font-medium">
-            {t("skillsview.SkillName")}{" "}
-            <span className="text-[#e74c3c]">*</span>
-          </span>
-          <Input
-            className="w-full bg-bg/50 border-border/50 focus-visible:ring-accent"
-            placeholder={t("skillsview.eGMyAwesomeSkil")}
-            value={skillCreateName}
-            onChange={(e) => setState("skillCreateName", e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && skillCreateName.trim()) onCreate();
-            }}
-          />
-        </div>
-        <div>
-          <span className="block text-[11px] text-[var(--muted)] mb-1 font-medium">
-            {t("skillsview.Description")}
-          </span>
-          <Input
-            className="w-full bg-bg/50 border-border/50 focus-visible:ring-accent"
-            placeholder={t("skillsview.BriefDescriptionOf")}
-            value={skillCreateDescription}
-            onChange={(e) => setState("skillCreateDescription", e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && skillCreateName.trim()) onCreate();
-            }}
-          />
-        </div>
-        <div className="flex gap-2 justify-end pt-2">
-          <Button variant="ghost" size="sm" onClick={onCancel}>
-            {t("onboarding.cancel")}
-          </Button>
-          <Button
-            variant="default"
-            size="sm"
-            onClick={onCreate}
-            disabled={skillCreating || !skillCreateName.trim()}
-          >
-            {skillCreating ? "Creating..." : "Create Skill"}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Edit Skill Modal ──────────────────────────────────────────────── */
-
-function EditSkillModal({
-  skillId,
-  skillName,
-  onClose,
-  onSaved,
-}: {
-  skillId: string;
-  skillName: string;
-  onClose: () => void;
-  onSaved: () => void;
-}) {
-  const { t } = useApp();
-  const [content, setContent] = useState("");
-  const [originalContent, setOriginalContent] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
-  const [saveSuccess, setSaveSuccess] = useState(false);
-
-  const loadSource = useCallback(async () => {
-    setLoading(true);
-    setError("");
-    try {
-      const res = await client.getSkillSource(skillId);
-      setContent(res.content);
-      setOriginalContent(res.content);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to load skill source",
-      );
-    }
-    setLoading(false);
-  }, [skillId]);
-
-  useEffect(() => {
-    void loadSource();
-  }, [loadSource]);
-
-  const hasChanges = content !== originalContent;
-
-  const handleSave = async () => {
-    setSaving(true);
-    setError("");
-    setSaveSuccess(false);
-    try {
-      await client.saveSkillSource(skillId, content);
-      setOriginalContent(content);
-      setSaveSuccess(true);
-      onSaved();
-      setTimeout(() => setSaveSuccess(false), 2000);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to save");
-    }
-    setSaving(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-      e.preventDefault();
-      if (hasChanges && !saving) void handleSave();
-    }
-    // Allow tab to insert spaces
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const target = e.target as HTMLTextAreaElement;
-      const start = target.selectionStart;
-      const end = target.selectionEnd;
-      const val = target.value;
-      setContent(`${val.substring(0, start)}  ${val.substring(end)}`);
-      requestAnimationFrame(() => {
-        target.selectionStart = target.selectionEnd = start + 2;
-      });
-    }
-  };
-
-  return (
-    <div
-      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/70"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClose();
-        }
-      }}
-      role="dialog"
-      aria-modal="true"
-    >
-      <div
-        className="w-full max-w-4xl h-[85vh] flex flex-col overflow-hidden mx-4 rounded-xl"
-        style={{
-          background: "color-mix(in srgb, var(--bg) 96%, transparent)",
-          border:
-            "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
-          backdropFilter: "blur(24px)",
-          boxShadow: "var(--shadow-lg)",
-        }}
-      >
-        {/* Header */}
-        <div
-          className="flex items-center justify-between px-5 py-3 shrink-0"
-          style={{ borderBottom: "1px solid var(--border)" }}
-        >
-          <div className="flex items-center gap-3 min-w-0">
-            <div
-              className="font-semibold text-sm truncate"
-              style={{ color: "var(--text)" }}
-            >
-              {skillName}
-            </div>
-            <span
-              className="text-[10px] font-mono px-1.5 py-0.5"
-              style={{
-                color: "var(--muted)",
-                background: "var(--bg-hover)",
-                border: "1px solid var(--border)",
-                borderRadius: 4,
-              }}
-            >
-              {t("skillsview.SKILLMd")}
-            </span>
-            {hasChanges && (
-              <span
-                className="text-[10px] font-medium"
-                style={{ color: "#f0b232" }}
-              >
-                {t("skillsview.unsaved")}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="text-[10px]" style={{ color: "var(--muted)" }}>
-              {navigator.platform.includes("Mac") ? "⌘S" : "Ctrl+S"}{" "}
-              {t("skillsview.toSave")}
-            </span>
-            <button
-              type="button"
-              className="bg-transparent border-0 cursor-pointer text-lg px-2 transition-colors"
-              style={{ color: "var(--muted)" }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.color = "var(--text)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.color = "var(--muted)";
-              }}
-              onClick={onClose}
-            >
-              ×
-            </button>
-          </div>
-        </div>
-
-        {/* Editor body */}
-        <div className="flex-1 overflow-hidden">
-          {loading ? (
-            <div
-              className="flex items-center justify-center h-full text-sm"
-              style={{ color: "var(--muted)" }}
-            >
-              {t("skillsview.LoadingSkillSource")}
-            </div>
-          ) : error && !content ? (
-            <div className="flex flex-col items-center justify-center h-full gap-3">
-              <div className="text-sm font-medium" style={{ color: "#ef4444" }}>
-                {error}
-              </div>
-              <button
-                type="button"
-                className="px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors"
-                style={{
-                  background: "var(--bg-hover)",
-                  border: "1px solid var(--border)",
-                  color: "var(--text)",
-                }}
-                onClick={() => loadSource()}
-              >
-                {t("common.retry")}
-              </button>
-            </div>
-          ) : (
-            <textarea
-              className="w-full h-full resize-none border-0 text-[13px] leading-relaxed font-mono p-5 focus:outline-none"
-              style={{
-                background: "var(--bg-hover)",
-                color: "var(--text)",
-              }}
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              onKeyDown={handleKeyDown}
-              spellCheck={false}
-            />
-          )}
-        </div>
-
-        {/* Footer */}
-        <div
-          className="flex items-center justify-between px-5 py-3 shrink-0"
-          style={{ borderTop: "1px solid var(--border)" }}
-        >
-          <div className="text-[11px]" style={{ color: "var(--muted)" }}>
-            {content ? `${content.split("\n").length} lines` : ""}
-            {error && content ? (
-              <span className="ml-3" style={{ color: "#ef4444" }}>
-                {error}
-              </span>
-            ) : null}
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              className="px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors"
-              style={{
-                background: "transparent",
-                border: "1px solid var(--border)",
-                color: "var(--muted)",
-              }}
-              onClick={onClose}
-            >
-              {hasChanges ? "Discard" : "Close"}
-            </button>
-            <button
-              type="button"
-              className="px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors"
-              style={{
-                background: saveSuccess ? "#22c55e" : "#f0b232",
-                border: "none",
-                color: saveSuccess ? "#fff" : "#000",
-                opacity: saving || !hasChanges ? 0.5 : 1,
-              }}
-              onClick={() => handleSave()}
-              disabled={saving || !hasChanges}
-            >
-              {saving ? "Saving..." : saveSuccess ? "Saved" : "Save"}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Main Skills View ───────────────────────────────────────────────── */
-
-export function SkillsView({ inModal }: { inModal?: boolean } = {}) {
-  if (inModal) return <SkillsModalView />;
-  return <SkillsFullView />;
-}
-
-/* ── Companion Modal View (sidebar + detail, reuses plugins-game-* CSS) ── */
-
-function SkillsModalView() {
-  const {
-    skills,
-    skillToggleAction,
-    loadSkills,
-    handleSkillToggle,
-    handleDeleteSkill,
-    refreshSkills,
-    setState,
-    skillsMarketplaceQuery,
-    skillsMarketplaceResults,
-    skillsMarketplaceError,
-    skillsMarketplaceLoading,
-    skillsMarketplaceAction,
-    skillsMarketplaceManualGithubUrl,
-    searchSkillsMarketplace,
-    installSkillFromMarketplace,
-    uninstallMarketplaceSkill,
-    installSkillFromGithubUrl,
-  } = useApp();
-
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [filterText, setFilterText] = useState("");
-  const [filterTab, setFilterTab] = useState<"all" | "on" | "off">("all");
-  const [editingSkill, setEditingSkill] = useState<SkillInfo | null>(null);
-  const [installModalOpen, setInstallModalOpen] = useState(false);
-
-  useEffect(() => {
-    void loadSkills();
-  }, [loadSkills]);
-
-  const filtered = useMemo(() => {
-    const searchLower = filterText.toLowerCase();
-    return skills.filter((s) => {
-      if (filterTab === "on" && !s.enabled) return false;
-      if (filterTab === "off" && s.enabled) return false;
-      if (
-        searchLower &&
-        !s.name.toLowerCase().includes(searchLower) &&
-        !(s.description ?? "").toLowerCase().includes(searchLower)
-      )
-        return false;
-      return true;
-    });
-  }, [skills, filterText, filterTab]);
-
-  const effectiveSelectedId =
-    selectedId && filtered.find((s) => s.id === selectedId)
-      ? selectedId
-      : (filtered[0]?.id ?? null);
-  const selected = effectiveSelectedId
-    ? (skills.find((s) => s.id === effectiveSelectedId) ?? null)
-    : null;
-
-  const tabs: { key: typeof filterTab; label: string }[] = [
-    { key: "all", label: `ALL (${skills.length})` },
-    { key: "on", label: `ON (${skills.filter((s) => s.enabled).length})` },
-    { key: "off", label: `OFF (${skills.filter((s) => !s.enabled).length})` },
-  ];
-
-  return (
-    <div className="plugins-game-modal">
-      {/* ── Left sidebar ── */}
-      <div className="plugins-game-list-panel">
-        <div className="plugins-game-list-head">
-          <div className="plugins-game-section-title">Talents</div>
-          <div className="plugins-game-section-meta">
-            {skills.length} installed
-          </div>
-        </div>
-
-        {/* Search + Install */}
-        <div className="plugins-game-list-search">
-          <div className="plugins-game-list-search-row">
-            <input
-              type="text"
-              placeholder="Search skills..."
-              value={filterText}
-              onChange={(e) => setFilterText(e.target.value)}
-              className="plugins-game-search-input"
-            />
-            <button
-              type="button"
-              className="plugins-game-chip plugins-game-add-btn"
-              onClick={() => setInstallModalOpen(true)}
-            >
-              <span className="plugins-game-add-symbol">+</span> Install
-            </button>
-          </div>
-        </div>
-
-        {/* Filter tabs */}
-        <div className="plugins-game-chip-row">
-          {tabs.map((tab) => (
-            <button
-              key={tab.key}
-              type="button"
-              className={`plugins-game-chip plugins-game-chip-small${filterTab === tab.key ? " is-active" : ""}`}
-              onClick={() => setFilterTab(tab.key)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Skill list */}
-        <div className="plugins-game-list-scroll">
-          {filtered.length === 0 ? (
-            <div className="plugins-game-list-empty">No skills found</div>
-          ) : (
-            filtered.map((skill) => (
-              <button
-                key={skill.id}
-                type="button"
-                className={`plugins-game-card${effectiveSelectedId === skill.id ? " is-selected" : ""}${!skill.enabled ? " is-disabled" : ""}`}
-                onClick={() => setSelectedId(skill.id)}
-              >
-                <div className="plugins-game-card-icon-shell">
-                  <span className="plugins-game-card-icon">
-                    {skill.name.charAt(0).toUpperCase()}
-                  </span>
-                </div>
-                <div className="plugins-game-card-body">
-                  <div className="plugins-game-card-name">{skill.name}</div>
-                  <div className="plugins-game-card-meta">
-                    <span
-                      className={`plugins-game-badge ${skill.enabled ? "is-on" : "is-off"}`}
-                    >
-                      {skill.enabled ? "ON" : "OFF"}
-                    </span>
-                  </div>
-                </div>
-              </button>
-            ))
-          )}
-        </div>
-      </div>
-
-      {/* ── Right detail panel ── */}
-      <div className="plugins-game-detail-panel">
-        {selected ? (
-          <>
-            <div className="plugins-game-detail-head">
-              <div className="plugins-game-detail-title-row">
-                <div className="plugins-game-detail-icon-shell">
-                  <span className="plugins-game-detail-icon">
-                    {selected.name.charAt(0).toUpperCase()}
-                  </span>
-                </div>
-                <div className="plugins-game-detail-main">
-                  <div className="plugins-game-detail-name">
-                    {selected.name}
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  className={`plugins-game-toggle ${selected.enabled ? "is-on" : "is-off"}`}
-                  onClick={() =>
-                    handleSkillToggle(selected.id, !selected.enabled)
-                  }
-                  disabled={skillToggleAction === selected.id}
-                >
-                  {skillToggleAction === selected.id
-                    ? "..."
-                    : selected.enabled
-                      ? "ON"
-                      : "OFF"}
-                </button>
-              </div>
-            </div>
-            <div className="plugins-game-detail-description">
-              {selected.description || "No description provided."}
-            </div>
-            <div className="plugins-game-detail-actions">
-              <button
-                type="button"
-                className="plugins-game-action-btn"
-                onClick={() => setEditingSkill(selected)}
-              >
-                Edit Source
-              </button>
-              <button
-                type="button"
-                className="plugins-game-action-btn"
-                onClick={() => handleDeleteSkill(selected.id, selected.name)}
-              >
-                Delete
-              </button>
-            </div>
-          </>
-        ) : (
-          <div className="plugins-game-detail-empty">
-            <span className="plugins-game-detail-empty-icon">🧠</span>
-            <span className="plugins-game-detail-empty-text">
-              Select a talent to configure
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Portal modals to body so they escape the 3D transform stacking context */}
-      {editingSkill &&
-        createPortal(
-          <EditSkillModal
-            skillId={editingSkill.id}
-            skillName={editingSkill.name}
-            onClose={() => setEditingSkill(null)}
-            onSaved={() => void refreshSkills()}
-          />,
-          document.body,
-        )}
-
-      {installModalOpen &&
-        createPortal(
-          <InstallModal
-            skills={skills}
-            skillsMarketplaceQuery={skillsMarketplaceQuery}
-            skillsMarketplaceResults={skillsMarketplaceResults}
-            skillsMarketplaceError={skillsMarketplaceError}
-            skillsMarketplaceLoading={skillsMarketplaceLoading}
-            skillsMarketplaceAction={skillsMarketplaceAction}
-            skillsMarketplaceManualGithubUrl={skillsMarketplaceManualGithubUrl}
-            searchSkillsMarketplace={searchSkillsMarketplace}
-            installSkillFromMarketplace={installSkillFromMarketplace}
-            uninstallMarketplaceSkill={uninstallMarketplaceSkill}
-            installSkillFromGithubUrl={installSkillFromGithubUrl}
-            setState={setState}
-            onClose={() => setInstallModalOpen(false)}
-          />,
-          document.body,
-        )}
-    </div>
-  );
-}
-
-/* ── Full-Page Skills View ─────────────────────────────────────────── */
-
-function SkillsFullView() {
-  const { setTimeout: _setTimeout } = useTimeout();
-
-  const {
-    skills,
-    skillCreateFormOpen,
-    skillCreateName,
-    skillCreateDescription,
-    skillCreating,
-    skillReviewReport,
-    skillReviewId,
-    skillReviewLoading,
-    skillToggleAction,
-    skillsMarketplaceQuery,
-    skillsMarketplaceResults,
-    skillsMarketplaceError,
-    skillsMarketplaceLoading,
-    skillsMarketplaceAction,
-    skillsMarketplaceManualGithubUrl,
-    loadSkills,
-    refreshSkills,
-    handleSkillToggle,
-    handleCreateSkill,
-    handleDeleteSkill,
-    handleReviewSkill,
-    handleAcknowledgeSkill,
-    searchSkillsMarketplace,
-    installSkillFromMarketplace,
-    uninstallMarketplaceSkill,
-    installSkillFromGithubUrl,
-    setState,
-  } = useApp();
-
-  const [installModalOpen, setInstallModalOpen] = useState(false);
-  const [filterText, setFilterText] = useState("");
-  const [editingSkill, setEditingSkill] = useState<SkillInfo | null>(null);
-
-  useEffect(() => {
-    void loadSkills();
-  }, [loadSkills]);
-
-  // Group into: needs attention, active, inactive — with text filter
-  const { attention, active, inactive, activeCount, totalCount } =
-    useMemo(() => {
-      const attention: SkillInfo[] = [];
-      const active: SkillInfo[] = [];
-      const inactive: SkillInfo[] = [];
-      let activeCount = 0;
-
-      const query = filterText.toLowerCase();
-
-      for (const skill of skills) {
-        if (
-          query &&
-          !skill.name.toLowerCase().includes(query) &&
-          !skill.description?.toLowerCase().includes(query)
-        ) {
-          continue;
-        }
-
-        if (skill.enabled) activeCount++;
-
-        if (
-          skill.scanStatus === "warning" ||
-          skill.scanStatus === "critical" ||
-          skill.scanStatus === "blocked"
-        ) {
-          attention.push(skill);
-        } else if (skill.enabled) {
-          active.push(skill);
-        } else {
-          inactive.push(skill);
-        }
-      }
-
-      return {
-        attention,
-        active,
-        inactive,
-        activeCount,
-        totalCount: skills.length,
-      };
-    }, [skills, filterText]);
-
-  const handleDismissReview = () => {
-    setState("skillReviewId", "");
-    setState("skillReviewReport", null);
-  };
-
-  const handleCancelCreate = () => {
-    setState("skillCreateFormOpen", false);
-    setState("skillCreateName", "");
-    setState("skillCreateDescription", "");
-  };
-
-  const allVisible = [...attention, ...active, ...inactive];
-
-  /** Render a group of skill cards in a grid with a section header. */
-  const renderGroup = (label: string, items: SkillInfo[], accent?: string) => {
-    if (items.length === 0) return null;
-    return (
-      <div className="mb-6">
-        <div
-          className="text-xs uppercase tracking-wider font-semibold mb-2 flex items-center gap-2"
-          style={accent ? { color: accent } : { color: "var(--muted)" }}
-        >
-          {label}
-          <span className="text-[10px] font-mono opacity-60">
-            ({items.length})
-          </span>
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {items.map((skill) => (
-            <SkillCard
-              key={skill.id}
-              skill={skill}
-              skillToggleAction={skillToggleAction}
-              skillReviewId={skillReviewId}
-              skillReviewReport={skillReviewReport}
-              skillReviewLoading={skillReviewLoading}
-              onToggle={handleSkillToggle}
-              onEdit={setEditingSkill}
-              onDelete={handleDeleteSkill}
-              onReview={handleReviewSkill}
-              onAcknowledge={handleAcknowledgeSkill}
-              onDismissReview={handleDismissReview}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div>
-      {/* Stats bar */}
-      <div className="flex items-center gap-4 mb-4 text-[11px] text-[var(--muted)]">
-        <span>
-          {totalCount} skill{totalCount !== 1 ? "s" : ""}
-        </span>
-        <span>{activeCount} active</span>
-        <span>{inactive.length} inactive</span>
-        {attention.length > 0 && (
-          <span className="text-[#f39c12]">
-            {attention.length} need{attention.length === 1 ? "s" : ""} attention
-          </span>
-        )}
-      </div>
-
-      {/* Toolbar */}
-      <div className="flex flex-wrap items-center gap-3 mb-6 p-3 border border-border/40 bg-card/60 backdrop-blur-md rounded-2xl shadow-sm">
-        <Input
-          type="text"
-          placeholder="Filter skills..."
-          value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-          className="w-[240px] h-9 bg-bg/50 border-border/50 focus-visible:ring-accent rounded-xl text-xs"
-        />
-
-        <span className="flex-1" />
-
-        <Button
-          variant={skillCreateFormOpen ? "ghost" : "default"}
-          size="sm"
-          className={
-            skillCreateFormOpen
-              ? "h-9 px-4 font-bold text-muted hover:text-txt"
-              : "h-9 px-4 font-bold tracking-wide shadow-sm"
-          }
-          onClick={() => setState("skillCreateFormOpen", !skillCreateFormOpen)}
-        >
-          {skillCreateFormOpen ? "Cancel" : "+ New Skill"}
-        </Button>
-        <Button
-          variant="default"
-          size="sm"
-          className="h-9 px-4 font-bold tracking-wide shadow-sm"
-          onClick={() => setInstallModalOpen(true)}
-        >
-          Browse Marketplace
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-9 px-4 font-bold text-muted hover:text-txt"
-          onClick={() => refreshSkills()}
-          title="Refresh Skills List"
-        >
-          Refresh
-        </Button>
-      </div>
-
-      {/* Create form */}
-      {skillCreateFormOpen && (
-        <CreateSkillForm
-          skillCreateName={skillCreateName}
-          skillCreateDescription={skillCreateDescription}
-          skillCreating={skillCreating}
-          setState={setState}
-          onCancel={handleCancelCreate}
-          onCreate={handleCreateSkill}
-        />
-      )}
-
-      {/* Skill grid — grouped by status */}
-      {skills.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="text-[var(--muted)] text-sm mb-2">
-            No Skills Installed
-          </div>
-          <div className="text-[var(--muted)] text-[11px] mb-4">
-            Install skills from the marketplace or create your own.
-          </div>
-          <div className="flex justify-center gap-3">
-            <Button
-              variant="default"
-              size="sm"
-              className="h-10 px-6 font-bold tracking-wide shadow-sm"
-              onClick={() => setInstallModalOpen(true)}
-            >
-              Browse Marketplace
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-10 px-6 font-bold text-muted hover:text-txt"
-              onClick={() => setState("skillCreateFormOpen", true)}
-            >
-              Create Skill
-            </Button>
-          </div>
-        </div>
-      ) : allVisible.length === 0 ? (
-        <div className="text-center py-12 text-[var(--muted)] text-xs">
-          No skills match filtering "{filterText}"
-        </div>
-      ) : (
-        <div>
-          {renderGroup("Needs Attention", attention, "#f39c12")}
-          {renderGroup("Active", active, "var(--ok, #16a34a)")}
-          {renderGroup("Inactive", inactive)}
-        </div>
-      )}
-
-      {/* Edit modal */}
-      {editingSkill && (
-        <EditSkillModal
-          skillId={editingSkill.id}
-          skillName={editingSkill.name}
-          onClose={() => setEditingSkill(null)}
-          onSaved={() => void refreshSkills()}
-        />
-      )}
-
-      {/* Install modal */}
-      {installModalOpen && (
-        <InstallModal
-          skills={skills}
-          skillsMarketplaceQuery={skillsMarketplaceQuery}
-          skillsMarketplaceResults={skillsMarketplaceResults}
-          skillsMarketplaceError={skillsMarketplaceError}
-          skillsMarketplaceLoading={skillsMarketplaceLoading}
-          skillsMarketplaceAction={skillsMarketplaceAction}
-          skillsMarketplaceManualGithubUrl={skillsMarketplaceManualGithubUrl}
-          searchSkillsMarketplace={searchSkillsMarketplace}
-          installSkillFromMarketplace={installSkillFromMarketplace}
-          uninstallMarketplaceSkill={uninstallMarketplaceSkill}
-          installSkillFromGithubUrl={installSkillFromGithubUrl}
-          setState={setState}
-          onClose={() => setInstallModalOpen(false)}
-        />
-      )}
-    </div>
-  );
-}