feat(webui): add skills marketplace

webui/src/hooks/useSkills.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
 import { fetchSkills } from "@/lib/api";
+import { isSkillsPayload, SKILLS_CHANGED_EVENT } from "@/lib/skill-events";
 import type { SkillSummary } from "@/lib/types";
 
 export function useSkills(token: string): SkillSummary[] {
@@ -8,11 +9,21 @@ export function useSkills(token: string): SkillSummary[] {
 
   useEffect(() => {
     let cancelled = false;
-    fetchSkills(token)
-      .then(({ skills: nextSkills }) => !cancelled && setSkills(nextSkills))
-      .catch(() => !cancelled && setSkills([]));
+    const refresh = () => {
+      fetchSkills(token)
+        .then(({ skills: nextSkills }) => !cancelled && setSkills(nextSkills))
+        .catch(() => !cancelled && setSkills([]));
+    };
+    const onSkillsChanged = (event: Event) => {
+      const payload = (event as CustomEvent<unknown>).detail;
+      if (!cancelled && isSkillsPayload(payload)) setSkills(payload.skills);
+    };
+
+    refresh();
+    window.addEventListener(SKILLS_CHANGED_EVENT, onSkillsChanged);
     return () => {
       cancelled = true;
+      window.removeEventListener(SKILLS_CHANGED_EVENT, onSkillsChanged);
     };
   }, [token]);