Function SkillManager

packages/app/src/components/settings/SkillManager.tsx:37–192

()

}

export function SkillManager() {
  const { t } = useTranslation();
  const [skills, setSkills] = useState<Skill[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadSkills();
  }, []);

  async function loadSkills() {
    try {
      const dbSkills = await getSkills();

      // Merge built-in skills with database skills
      const mergedSkills = builtinSkills.map((builtin) => {
        const dbSkill = dbSkills.find((s) => s.id === builtin.id);
        return dbSkill
          ? {
              ...builtin,
              description: dbSkill.description,
              enabled: dbSkill.enabled,
              prompt: dbSkill.prompt,
              updatedAt: dbSkill.updatedAt,
            }
          : builtin;
      });

      // Add custom skills from database
      const customSkills = dbSkills.filter((s) => !s.builtIn);

      setSkills([...mergedSkills, ...customSkills]);
    } catch (error) {
      console.error("Failed to load skills:", error);
      // Fallback to built-in skills only
      setSkills(builtinSkills);
    } finally {
      setLoading(false);
    }
  }

  async function toggleSkill(skillId: string, enabled: boolean) {
    const skill = skills.find((s) => s.id === skillId);
    if (!skill) return;

    const updatedSkill = { ...skill, enabled, updatedAt: Date.now() };
    try {
      await upsertSkill(updatedSkill);
      setSkills((prev) => prev.map((s) => (s.id === skillId ? updatedSkill : s)));
    } catch (error) {
      console.error("Failed to update skill:", error);
    }
  }

  const enabledCount = skills.filter((s) => s.enabled).length;

  return (
    <div className="space-y-6 p-4 pt-3">
      <section className="rounded-lg bg-muted/60 p-4">