@uniqueli/openwork 0.2.2 → 0.2.3

package/out/renderer/assets/{index-BayYTupF.js → index-DTaVewa6.js}

@@ -12817,6 +12817,19 @@ const Send = createLucideIcon("Send", [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ]);
+const Sparkles = createLucideIcon("Sparkles", [
+  [
+    "path",
+    {
+      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",
+      key: "4pj2yx"
+    }
+  ],
+  ["path", { d: "M20 3v4", key: "1olli1" }],
+  ["path", { d: "M22 5h-4", key: "1gvqau" }],
+  ["path", { d: "M4 17v2", key: "vumght" }],
+  ["path", { d: "M5 18H3", key: "zchphs" }]
+]);
 const SquarePen = createLucideIcon("SquarePen", [
   ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
   [
@@ -76155,6 +76168,781 @@ function TabbedPanel({ threadId, showTabBar = true }) {
     ) })
   ] });
 }
+function Switch({ checked = false, onCheckedChange, disabled = false, className, onClick, ...props }) {
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (!disabled) {
+      onCheckedChange?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: handleClick,
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-[#0D0D0F] disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-blue-500" : "bg-white/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+            checked ? "translate-x-4" : "translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+const SKILL_TEMPLATES = [
+  {
+    id: "custom-code-language",
+    name: "Programming Language Expert",
+    description: "Create a skill for a specific programming language",
+    category: "coding",
+    prompt: `You are an expert in {{LANGUAGE}} programming. Your expertise includes:
+
+## Core {{LANGUAGE}} Knowledge
+- Language syntax and best practices
+- Standard library and common frameworks
+- Idiomatic {{LANGUAGE}} code patterns
+- Performance considerations specific to {{LANGUAGE}}
+
+## Code Style
+- Follow {{LANGUAGE}} community conventions
+- Write clear, readable code
+- Use meaningful variable and function names
+- Add comments only when necessary
+
+## Common Patterns
+{{COMMON_PATTERNS}}
+
+## Best Practices
+{{BEST_PRACTICES}}
+
+## Testing
+- Testing frameworks for {{LANGUAGE}}
+- Writing testable code
+- Test organization and structure
+
+When helping with {{LANGUAGE}}:
+1. Follow modern {{LANGUAGE}} conventions
+2. Use appropriate libraries and frameworks
+3. Write idiomatic, clean code
+4. Explain {{LANGUAGE}}-specific concepts`,
+    variables: [
+      {
+        name: "LANGUAGE",
+        label: "Programming Language",
+        placeholder: "e.g., Rust, Go, Ruby, PHP",
+        required: true
+      },
+      {
+        name: "COMMON_PATTERNS",
+        label: "Common Patterns",
+        placeholder: "Describe common patterns in this language...",
+        required: false
+      },
+      {
+        name: "BEST_PRACTICES",
+        label: "Best Practices",
+        placeholder: "Describe best practices for this language...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-framework",
+    name: "Framework Expert",
+    description: "Create a skill for a specific framework (React, Vue, Django, etc.)",
+    category: "coding",
+    prompt: `You are an expert in {{FRAMEWORK}} development. Your expertise includes:
+
+## {{FRAMEWORK}} Fundamentals
+- Framework architecture and design patterns
+- Component/model/view/controller structure
+- State management approaches
+- Routing and navigation
+
+## Best Practices
+- {{FRAMEWORK}} conventions and patterns
+- Performance optimization
+- Code organization and structure
+- Testing strategies
+
+## Common Tasks
+{{COMMON_TASKS}}
+
+## Ecosystem
+- Popular libraries and tools
+- Development workflow
+- Build and deployment
+
+When working with {{FRAMEWORK}}:
+1. Follow framework conventions
+2. Use recommended patterns
+3. Consider performance implications
+4. Write maintainable code`,
+    variables: [
+      {
+        name: "FRAMEWORK",
+        label: "Framework Name",
+        placeholder: "e.g., Laravel, Spring Boot, Express.js",
+        required: true
+      },
+      {
+        name: "COMMON_TASKS",
+        label: "Common Tasks",
+        placeholder: "List common tasks for this framework...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-domain",
+    name: "Domain Expert",
+    description: "Create a skill for a specific domain (finance, healthcare, education, etc.)",
+    category: "custom",
+    prompt: `You are an expert in {{DOMAIN}}. Your expertise includes:
+
+## Domain Knowledge
+- {{DOMAIN}} terminology and concepts
+- Industry standards and regulations
+- Best practices and workflows
+- Common tools and technologies
+
+## Problem Solving
+- Typical {{DOMAIN}} challenges
+- Analytical approaches
+- Solution strategies
+- Decision-making frameworks
+
+## Communication
+- Explain {{DOMAIN}} concepts clearly
+- Use appropriate terminology
+- Provide context for technical decisions
+- Consider stakeholder needs
+
+When helping with {{DOMAIN}}:
+1. Understand the specific context
+2. Apply domain-relevant knowledge
+3. Consider industry standards
+4. Explain domain-specific concepts`,
+    variables: [
+      {
+        name: "DOMAIN",
+        label: "Domain Name",
+        placeholder: "e.g., Finance, Healthcare, E-commerce",
+        required: true
+      }
+    ]
+  },
+  {
+    id: "custom-tool",
+    name: "Tool/CLI Expert",
+    description: "Create a skill for a specific command-line tool or software",
+    category: "system",
+    prompt: `You are an expert in {{TOOL_NAME}}. Your expertise includes:
+
+## {{TOOL_NAME}} Overview
+- Tool purpose and use cases
+- Installation and setup
+- Basic commands and operations
+- Advanced features
+
+## Common Commands
+{{COMMON_COMMANDS}}
+
+## Best Practices
+- Efficient workflows
+- Common pitfalls and how to avoid them
+- Performance considerations
+- Integration with other tools
+
+## Troubleshooting
+- Common issues and solutions
+- Debugging techniques
+- Error interpretation
+
+When helping with {{TOOL_NAME}}:
+1. Provide clear command examples
+2. Explain flags and options
+3. Show expected output
+4. Include troubleshooting tips`,
+    variables: [
+      {
+        name: "TOOL_NAME",
+        label: "Tool Name",
+        placeholder: "e.g., Docker, Kubernetes, Git",
+        required: true
+      },
+      {
+        name: "COMMON_COMMANDS",
+        label: "Common Commands",
+        placeholder: "List common commands with examples...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-language-learning",
+    name: "Language Learning Assistant",
+    description: "Create a skill for learning a human language",
+    category: "creative",
+    prompt: `You are a {{LANGUAGE}} language learning assistant. Your expertise includes:
+
+## Language Skills
+- {{LANGUAGE}} grammar and syntax
+- Vocabulary and expressions
+- Pronunciation guidance
+- Cultural context and nuances
+
+## Teaching Approach
+- Explain concepts clearly
+- Provide examples and practice
+- Correct mistakes gently
+- Encourage conversation practice
+
+## Learning Resources
+- Common learning materials
+- Practice exercises
+- Real-world usage examples
+- Tips for effective learning
+
+When helping with {{LANGUAGE}}:
+1. Assess current skill level
+2. Provide appropriate level instruction
+3. Use natural examples
+4. Encourage practice and immersion`,
+    variables: [
+      {
+        name: "LANGUAGE",
+        label: "Language",
+        placeholder: "e.g., Spanish, Japanese, German",
+        required: true
+      }
+    ]
+  }
+];
+function renderTemplate(template, values) {
+  let rendered = template.prompt;
+  for (const variable of template.variables || []) {
+    const value = values[variable.name] || "";
+    const placeholder = `{{${variable.name}}}`;
+    rendered = rendered.replace(new RegExp(placeholder, "g"), value);
+  }
+  return rendered;
+}
+const categories = [
+  { value: "coding", label: "Coding", description: "Programming and development tasks" },
+  { value: "analysis", label: "Analysis", description: "Data analysis and research" },
+  { value: "creative", label: "Creative", description: "Writing and creative work" },
+  { value: "data", label: "Data", description: "Database and data management" },
+  { value: "system", label: "System", description: "System operations and debugging" },
+  { value: "custom", label: "Custom", description: "Other specialized skills" }
+];
+function CreateSkillDialog({ open, onClose, onCreate }) {
+  const [mode, setMode] = reactExports.useState("custom");
+  const [selectedTemplate, setSelectedTemplate] = reactExports.useState(null);
+  const [templateValues, setTemplateValues] = reactExports.useState({});
+  const [name2, setName] = reactExports.useState("");
+  const [description, setDescription] = reactExports.useState("");
+  const [category, setCategory] = reactExports.useState("custom");
+  const [prompt, setPrompt] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (!open) {
+      setMode("custom");
+      setSelectedTemplate(null);
+      setTemplateValues({});
+      setName("");
+      setDescription("");
+      setCategory("custom");
+      setPrompt("");
+    }
+  }, [open]);
+  reactExports.useEffect(() => {
+    if (mode === "template" && selectedTemplate) {
+      const template = SKILL_TEMPLATES.find((t) => t.id === selectedTemplate);
+      if (template) {
+        setCategory(template.category);
+        setName(template.name.replace(/{{.*?}}/g, "Custom"));
+        setDescription(template.description);
+        setPrompt(template.prompt);
+      }
+    }
+  }, [selectedTemplate, mode]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const finalPrompt = mode === "template" && selectedTemplate ? renderTemplate(SKILL_TEMPLATES.find((t) => t.id === selectedTemplate), templateValues) : prompt;
+    if (!name2.trim() || !description.trim() || !finalPrompt.trim()) {
+      return;
+    }
+    onCreate({
+      name: name2.trim(),
+      description: description.trim(),
+      category,
+      prompt: finalPrompt.trim()
+    });
+    setMode("custom");
+    setSelectedTemplate(null);
+    setTemplateValues({});
+    setName("");
+    setDescription("");
+    setCategory("custom");
+    setPrompt("");
+    onClose();
+  };
+  const currentTemplate = SKILL_TEMPLATES.find((t) => t.id === selectedTemplate);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-3xl mx-4 bg-[#1A1A1D] rounded-lg shadow-xl border border-white/10", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-white", children: "Create Custom Skill" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-gray-400 hover:text-white transition-colors",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-6 py-3 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode("custom"),
+          className: `px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "custom" ? "bg-blue-500 text-white" : "bg-white/5 text-gray-400 hover:bg-white/10"}`,
+          children: "Custom"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode("template"),
+          className: `px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "template" ? "bg-blue-500 text-white" : "bg-white/5 text-gray-400 hover:bg-white/10"}`,
+          children: "From Template"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "p-6 space-y-4", children: [
+      mode === "template" && /* Template Selection */
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-300 mb-2", children: "Choose Template" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2 max-h-48 overflow-y-auto", children: SKILL_TEMPLATES.map((template) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedTemplate(template.id),
+            className: `px-3 py-2 text-left text-sm rounded-md transition-colors ${selectedTemplate === template.id ? "bg-blue-500/20 text-blue-400 border border-blue-500/50" : "bg-white/5 text-gray-400 border border-white/10 hover:bg-white/10"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: template.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75", children: template.description })
+            ]
+          },
+          template.id
+        )) })
+      ] }),
+      mode === "template" && currentTemplate && currentTemplate.variables && currentTemplate.variables.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 p-4 bg-white/5 rounded-lg border border-white/10", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-white", children: "Customize Template" }),
+        currentTemplate.variables.map((variable) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm text-gray-300 mb-1", children: [
+            variable.label,
+            variable.required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "text",
+              value: templateValues[variable.name] || "",
+              onChange: (e) => setTemplateValues({ ...templateValues, [variable.name]: e.target.value }),
+              placeholder: variable.placeholder,
+              className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+              required: variable.required
+            }
+          )
+        ] }, variable.name))
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Skill Name ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            value: name2,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "e.g., React Expert, Python Specialist",
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Description ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "Brief description of what this skill does",
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-300 mb-2", children: "Category" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-2", children: categories.map((cat) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setCategory(cat.value),
+            className: `px-3 py-2 text-left text-sm rounded-md transition-colors ${category === cat.value ? "bg-blue-500/20 text-blue-400 border border-blue-500/50" : "bg-white/5 text-gray-400 border border-white/10 hover:bg-white/10"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: cat.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75", children: cat.description })
+            ]
+          },
+          cat.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Specialized Prompt ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            placeholder: "Enter the specialized instructions and expertise for this skill...",
+            rows: 8,
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500 resize-none",
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500", children: "This prompt will be loaded when the agent activates this skill, providing specialized knowledge and instructions." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-3 pt-4 border-t border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: !name2.trim() || !description.trim() || !prompt.trim(),
+            className: "px-4 py-2 text-sm text-white bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-md transition-colors",
+            children: "Create Skill"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+const categoryColors = {
+  coding: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+  analysis: "bg-purple-500/10 text-purple-500 border-purple-500/20",
+  creative: "bg-pink-500/10 text-pink-500 border-pink-500/20",
+  data: "bg-green-500/10 text-green-500 border-green-500/20",
+  system: "bg-orange-500/10 text-orange-500 border-orange-500/20",
+  custom: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20"
+};
+function SkillDetailDialog({ skill, open, onClose, onToggle, onDelete }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-3xl mx-4 max-h-[80vh] bg-[#1A1A1D] rounded-lg shadow-xl border border-white/10 flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between px-6 py-4 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-white", children: skill.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: `px-2 py-0.5 text-xs font-medium rounded border ${categoryColors[skill.category] || categoryColors.custom}`,
+              children: skill.category
+            }
+          ),
+          skill.isBuiltin && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-0.5 text-xs font-medium rounded bg-white/5 text-gray-400 border border-white/10", children: "Built-in" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-400", children: skill.description })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "ml-4 text-gray-400 hover:text-white transition-colors",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4 mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/5 rounded-lg p-3 border border-white/5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Status" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-white", children: skill.enabled ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-400", children: "Enabled" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "Disabled" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/5 rounded-lg p-3 border border-white/5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Type" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-white", children: skill.isBuiltin ? "Built-in Skill" : "Custom Skill" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2", children: "Specialized Prompt" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/5 rounded-lg p-4 border border-white/5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-sm text-gray-300 whitespace-pre-wrap font-mono", children: skill.prompt }) })
+      ] }),
+      skill.subSkills && skill.subSkills.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2", children: "Sub Skills" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: skill.subSkills.map((subSkill) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "px-3 py-1 text-sm bg-white/5 text-gray-300 rounded-md border border-white/10",
+            children: subSkill
+          },
+          subSkill
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-t border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", children: [
+        "Created: ",
+        new Date(skill.createdAt).toLocaleDateString(),
+        " • Updated:",
+        " ",
+        new Date(skill.updatedAt).toLocaleDateString()
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+        !skill.isBuiltin && onDelete && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => {
+              if (confirm(`Are you sure you want to delete "${skill.name}"?`)) {
+                onDelete(skill.id);
+                onClose();
+              }
+            },
+            className: "px-4 py-2 text-sm text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-md transition-colors",
+            children: "Delete"
+          }
+        ),
+        onToggle && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onToggle(skill.id, !skill.enabled),
+            className: `px-4 py-2 text-sm rounded-md transition-colors ${skill.enabled ? "bg-white/10 text-gray-300 hover:bg-white/15" : "bg-blue-500 text-white hover:bg-blue-600"}`,
+            children: skill.enabled ? "Disable" : "Enable"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "px-4 py-2 text-sm text-white bg-white/10 hover:bg-white/15 rounded-md transition-colors",
+            children: "Close"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function SkillsPanel(_props) {
+  const [skills, setSkills] = reactExports.useState([]);
+  const [loading, setLoading] = reactExports.useState(true);
+  const [filter, setFilter] = reactExports.useState("all");
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [showCreateDialog, setShowCreateDialog] = reactExports.useState(false);
+  const [selectedSkill, setSelectedSkill] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    loadSkills();
+  }, []);
+  const loadSkills = async () => {
+    setLoading(true);
+    try {
+      const result = await window.api.skills.list();
+      if (result.success && result.skills) {
+        setSkills(result.skills);
+      }
+    } catch (error) {
+      console.error("Failed to load skills:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const toggleSkill = async (skillId, enabled) => {
+    const result = await window.api.skills.toggle(skillId, enabled);
+    if (result.success) {
+      setSkills(
+        (prev) => prev.map((s2) => s2.id === skillId ? { ...s2, enabled: result.enabled ?? false } : s2)
+      );
+    }
+  };
+  const handleCreateSkill = async (skill) => {
+    const result = await window.api.skills.create(skill);
+    if (result.success) {
+      loadSkills();
+    }
+  };
+  const handleDeleteSkill = async (skillId) => {
+    const result = await window.api.skills.delete(skillId);
+    if (result.success) {
+      loadSkills();
+    }
+  };
+  const filteredSkills = skills.filter((skill) => {
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      if (!skill.name.toLowerCase().includes(query) && !skill.description.toLowerCase().includes(query)) {
+        return false;
+      }
+    }
+    if (filter === "enabled") return skill.enabled;
+    if (filter === "builtin") return skill.isBuiltin;
+    if (filter === "user") return !skill.isBuiltin;
+    return true;
+  });
+  const groupedSkills = filteredSkills.reduce(
+    (acc, skill) => {
+      if (!acc[skill.category]) {
+        acc[skill.category] = [];
+      }
+      acc[skill.category].push(skill);
+      return acc;
+    },
+    {}
+  );
+  const categoryColors2 = {
+    coding: "bg-blue-500/10 text-blue-500",
+    analysis: "bg-purple-500/10 text-purple-500",
+    creative: "bg-pink-500/10 text-pink-500",
+    data: "bg-green-500/10 text-green-500",
+    system: "bg-orange-500/10 text-orange-500",
+    custom: "bg-cyan-500/10 text-cyan-500"
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full bg-[#0D0D0F]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-white", children: "Skills" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => setShowCreateDialog(true),
+              className: "px-3 py-1 text-xs font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-md transition-colors",
+              children: "+ New Skill"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-400", children: [
+            skills.filter((s2) => s2.enabled).length,
+            " / ",
+            skills.length,
+            " enabled"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 px-4 py-3 border-b border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search skills...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-white/20"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: ["all", "enabled", "builtin", "user"].map((f2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => setFilter(f2),
+            className: `px-3 py-1 text-xs rounded-md transition-colors ${filter === f2 ? "bg-white/10 text-white" : "text-gray-400 hover:text-white hover:bg-white/5"}`,
+            children: f2.charAt(0).toUpperCase() + f2.slice(1)
+          },
+          f2
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-400", children: "Loading skills..." }) }) : filteredSkills.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center h-32 text-gray-400", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No skills found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: Object.entries(groupedSkills).map(([category, categorySkills]) => {
+        const skillsList = categorySkills;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2 capitalize", children: category }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: skillsList.map((skill) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              onClick: () => setSelectedSkill(skill),
+              className: "flex items-start justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-white", children: skill.name }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Badge,
+                      {
+                        className: categoryColors2[skill.category] || categoryColors2.custom,
+                        children: skill.category
+                      }
+                    ),
+                    skill.isBuiltin && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-white/5 text-gray-400 text-xs", children: "Built-in" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-400 line-clamp-2", children: skill.description })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Switch,
+                  {
+                    checked: skill.enabled,
+                    onCheckedChange: (checked) => {
+                      toggleSkill(skill.id, checked);
+                    },
+                    onClick: (e) => e.stopPropagation(),
+                    className: "ml-3 flex-shrink-0"
+                  }
+                )
+              ]
+            },
+            skill.id
+          )) })
+        ] }, category);
+      }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CreateSkillDialog,
+      {
+        open: showCreateDialog,
+        onClose: () => setShowCreateDialog(false),
+        onCreate: handleCreateSkill
+      }
+    ),
+    selectedSkill && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkillDetailDialog,
+      {
+        skill: selectedSkill,
+        open: !!selectedSkill,
+        onClose: () => setSelectedSkill(null),
+        onToggle: toggleSkill,
+        onDelete: handleDeleteSkill
+      }
+    )
+  ] });
+}
 const HEADER_HEIGHT = 40;
 const HANDLE_HEIGHT = 6;
 const MIN_CONTENT_HEIGHT = 60;
@@ -76232,38 +77020,43 @@ function RightPanel() {
   const [tasksOpen, setTasksOpen] = reactExports.useState(true);
   const [filesOpen, setFilesOpen] = reactExports.useState(true);
   const [agentsOpen, setAgentsOpen] = reactExports.useState(true);
+  const [skillsOpen, setSkillsOpen] = reactExports.useState(false);
   const [tasksHeight, setTasksHeight] = reactExports.useState(null);
   const [filesHeight, setFilesHeight] = reactExports.useState(null);
   const [agentsHeight, setAgentsHeight] = reactExports.useState(null);
+  const [skillsHeight, setSkillsHeight] = reactExports.useState(null);
   const dragStartHeights = reactExports.useRef(null);
   const getAvailableContentHeight = reactExports.useCallback(() => {
     if (!containerRef.current) return 0;
     const totalHeight = containerRef.current.clientHeight;
-    let used = HEADER_HEIGHT * 3;
-    if (tasksOpen && (filesOpen || agentsOpen)) used += HANDLE_HEIGHT;
-    if (filesOpen && agentsOpen) used += HANDLE_HEIGHT;
+    let used = HEADER_HEIGHT * 4;
+    const openPanels = [tasksOpen, filesOpen, agentsOpen, skillsOpen].filter(Boolean).length;
+    used += HANDLE_HEIGHT * (openPanels - 1);
     return Math.max(0, totalHeight - used);
-  }, [tasksOpen, filesOpen, agentsOpen]);
+  }, [tasksOpen, filesOpen, agentsOpen, skillsOpen]);
   const getContentHeights = reactExports.useCallback(() => {
     const available = getAvailableContentHeight();
-    const openCount = [tasksOpen, filesOpen, agentsOpen].filter(Boolean).length;
+    const openCount = [tasksOpen, filesOpen, agentsOpen, skillsOpen].filter(Boolean).length;
     if (openCount === 0) {
-      return { tasks: 0, files: 0, agents: 0 };
+      return { tasks: 0, files: 0, agents: 0, skills: 0 };
     }
     const defaultHeight = available / openCount;
     return {
       tasks: tasksOpen ? tasksHeight ?? defaultHeight : 0,
       files: filesOpen ? filesHeight ?? defaultHeight : 0,
-      agents: agentsOpen ? agentsHeight ?? defaultHeight : 0
+      agents: agentsOpen ? agentsHeight ?? defaultHeight : 0,
+      skills: skillsOpen ? skillsHeight ?? defaultHeight : 0
     };
   }, [
     getAvailableContentHeight,
     tasksOpen,
     filesOpen,
     agentsOpen,
+    skillsOpen,
     tasksHeight,
     filesHeight,
-    agentsHeight
+    agentsHeight,
+    skillsHeight
   ]);
   const handleTasksResize = reactExports.useCallback(
     (totalDelta) => {
@@ -76273,7 +77066,12 @@ function RightPanel() {
       }
       const start = dragStartHeights.current;
       const available = getAvailableContentHeight();
-      const otherStart = filesOpen ? start.files : start.agents;
+      let nextPanel = null;
+      if (filesOpen) nextPanel = "files";
+      else if (agentsOpen) nextPanel = "agents";
+      else if (skillsOpen) nextPanel = "skills";
+      if (!nextPanel) return;
+      const otherStart = start[nextPanel];
       let newTasksHeight = start.tasks + totalDelta;
       let newOtherHeight = otherStart - totalDelta;
       if (newTasksHeight < MIN_CONTENT_HEIGHT) {
@@ -76284,8 +77082,8 @@ function RightPanel() {
         newOtherHeight = MIN_CONTENT_HEIGHT;
         newTasksHeight = start.tasks + (otherStart - MIN_CONTENT_HEIGHT);
       }
-      const thirdPanelHeight = filesOpen && agentsOpen ? agentsHeight ?? available / 3 : 0;
-      const maxForTwo = available - thirdPanelHeight;
+      const belowHeight = nextPanel === "files" && (agentsOpen || skillsOpen) ? (agentsOpen ? agentsHeight ?? available / 4 : 0) + (skillsOpen ? skillsHeight ?? available / 4 : 0) : nextPanel === "agents" && skillsOpen ? skillsHeight ?? available / 4 : 0;
+      const maxForTwo = available - belowHeight;
       if (newTasksHeight + newOtherHeight > maxForTwo) {
         const excess = newTasksHeight + newOtherHeight - maxForTwo;
         if (totalDelta > 0) {
@@ -76295,20 +77093,19 @@ function RightPanel() {
         }
       }
       setTasksHeight(newTasksHeight);
-      if (filesOpen) {
-        setFilesHeight(newOtherHeight);
-      } else if (agentsOpen) {
-        setAgentsHeight(newOtherHeight);
-      }
+      if (nextPanel === "files") setFilesHeight(newOtherHeight);
+      else if (nextPanel === "agents") setAgentsHeight(newOtherHeight);
+      else if (nextPanel === "skills") setSkillsHeight(newOtherHeight);
       if (newTasksHeight < COLLAPSE_THRESHOLD) {
         setTasksOpen(false);
       }
       if (newOtherHeight < COLLAPSE_THRESHOLD) {
-        if (filesOpen) setFilesOpen(false);
-        else if (agentsOpen) setAgentsOpen(false);
+        if (nextPanel === "files") setFilesOpen(false);
+        else if (nextPanel === "agents") setAgentsOpen(false);
+        else if (nextPanel === "skills") setSkillsOpen(false);
       }
     },
-    [getContentHeights, getAvailableContentHeight, filesOpen, agentsOpen, agentsHeight]
+    [getContentHeights, getAvailableContentHeight, filesOpen, agentsOpen, skillsOpen, agentsHeight, skillsHeight]
   );
   const handleFilesResize = reactExports.useCallback(
     (totalDelta) => {
@@ -76318,36 +77115,83 @@ function RightPanel() {
       }
       const start = dragStartHeights.current;
       const available = getAvailableContentHeight();
-      const tasksH = tasksOpen ? tasksHeight ?? available / 3 : 0;
-      const maxForFilesAndAgents = available - tasksH;
+      const tasksH = tasksOpen ? tasksHeight ?? available / 4 : 0;
+      let nextPanel = null;
+      if (agentsOpen) nextPanel = "agents";
+      else if (skillsOpen) nextPanel = "skills";
+      if (!nextPanel) return;
+      const maxForFilesAndNext = available - tasksH;
       let newFilesHeight = start.files + totalDelta;
-      let newAgentsHeight = start.agents - totalDelta;
+      let newNextHeight = start[nextPanel] - totalDelta;
       if (newFilesHeight < MIN_CONTENT_HEIGHT) {
         newFilesHeight = MIN_CONTENT_HEIGHT;
-        newAgentsHeight = start.agents + (start.files - MIN_CONTENT_HEIGHT);
+        newNextHeight = start[nextPanel] + (start.files - MIN_CONTENT_HEIGHT);
       }
-      if (newAgentsHeight < MIN_CONTENT_HEIGHT) {
-        newAgentsHeight = MIN_CONTENT_HEIGHT;
-        newFilesHeight = start.files + (start.agents - MIN_CONTENT_HEIGHT);
+      if (newNextHeight < MIN_CONTENT_HEIGHT) {
+        newNextHeight = MIN_CONTENT_HEIGHT;
+        newFilesHeight = start.files + (start[nextPanel] - MIN_CONTENT_HEIGHT);
       }
-      if (newFilesHeight + newAgentsHeight > maxForFilesAndAgents) {
-        const excess = newFilesHeight + newAgentsHeight - maxForFilesAndAgents;
+      if (newFilesHeight + newNextHeight > maxForFilesAndNext) {
+        const excess = newFilesHeight + newNextHeight - maxForFilesAndNext;
         if (totalDelta > 0) {
-          newAgentsHeight = Math.max(MIN_CONTENT_HEIGHT, newAgentsHeight - excess);
+          newNextHeight = Math.max(MIN_CONTENT_HEIGHT, newNextHeight - excess);
         } else {
           newFilesHeight = Math.max(MIN_CONTENT_HEIGHT, newFilesHeight - excess);
         }
       }
       setFilesHeight(newFilesHeight);
-      setAgentsHeight(newAgentsHeight);
+      if (nextPanel === "agents") setAgentsHeight(newNextHeight);
+      else if (nextPanel === "skills") setSkillsHeight(newNextHeight);
       if (newFilesHeight < COLLAPSE_THRESHOLD) {
         setFilesOpen(false);
       }
+      if (newNextHeight < COLLAPSE_THRESHOLD) {
+        if (nextPanel === "agents") setAgentsOpen(false);
+        else if (nextPanel === "skills") setSkillsOpen(false);
+      }
+    },
+    [getContentHeights, getAvailableContentHeight, tasksOpen, tasksHeight, agentsOpen, skillsOpen]
+  );
+  const handleAgentsResize = reactExports.useCallback(
+    (totalDelta) => {
+      if (!dragStartHeights.current) {
+        const heights2 = getContentHeights();
+        dragStartHeights.current = { ...heights2 };
+      }
+      const start = dragStartHeights.current;
+      const available = getAvailableContentHeight();
+      const tasksH = tasksOpen ? tasksHeight ?? available / 4 : 0;
+      const filesH = filesOpen ? filesHeight ?? available / 4 : 0;
+      const aboveHeight = tasksH + filesH;
+      const maxForAgentsAndSkills = available - aboveHeight;
+      let newAgentsHeight = start.agents + totalDelta;
+      let newSkillsHeight = start.skills - totalDelta;
+      if (newAgentsHeight < MIN_CONTENT_HEIGHT) {
+        newAgentsHeight = MIN_CONTENT_HEIGHT;
+        newSkillsHeight = start.skills + (start.agents - MIN_CONTENT_HEIGHT);
+      }
+      if (newSkillsHeight < MIN_CONTENT_HEIGHT) {
+        newSkillsHeight = MIN_CONTENT_HEIGHT;
+        newAgentsHeight = start.agents + (start.skills - MIN_CONTENT_HEIGHT);
+      }
+      if (newAgentsHeight + newSkillsHeight > maxForAgentsAndSkills) {
+        const excess = newAgentsHeight + newSkillsHeight - maxForAgentsAndSkills;
+        if (totalDelta > 0) {
+          newSkillsHeight = Math.max(MIN_CONTENT_HEIGHT, newSkillsHeight - excess);
+        } else {
+          newAgentsHeight = Math.max(MIN_CONTENT_HEIGHT, newAgentsHeight - excess);
+        }
+      }
+      setAgentsHeight(newAgentsHeight);
+      setSkillsHeight(newSkillsHeight);
       if (newAgentsHeight < COLLAPSE_THRESHOLD) {
         setAgentsOpen(false);
       }
+      if (newSkillsHeight < COLLAPSE_THRESHOLD) {
+        setSkillsOpen(false);
+      }
     },
-    [getContentHeights, getAvailableContentHeight, tasksOpen, tasksHeight]
+    [getContentHeights, getAvailableContentHeight, tasksOpen, filesOpen, tasksHeight, filesHeight]
   );
   reactExports.useEffect(() => {
     const handleMouseUp = () => {
@@ -76360,8 +77204,9 @@ function RightPanel() {
     setTasksHeight(null);
     setFilesHeight(null);
     setAgentsHeight(null);
-  }, [tasksOpen, filesOpen, agentsOpen]);
-  const [heights, setHeights] = reactExports.useState({ tasks: 0, files: 0, agents: 0 });
+    setSkillsHeight(null);
+  }, [tasksOpen, filesOpen, agentsOpen, skillsOpen]);
+  const [heights, setHeights] = reactExports.useState({ tasks: 0, files: 0, agents: 0, skills: 0 });
   reactExports.useEffect(() => {
     setHeights(getContentHeights());
   }, [getContentHeights]);
@@ -76384,7 +77229,7 @@ function RightPanel() {
           ),
           tasksOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.tasks }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TasksContent, {}) })
         ] }),
-        tasksOpen && (filesOpen || agentsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleTasksResize }),
+        tasksOpen && (filesOpen || agentsOpen || skillsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleTasksResize }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0 border-b border-border", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SectionHeader,
@@ -76398,8 +77243,8 @@ function RightPanel() {
           ),
           filesOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.files }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilesContent, {}) })
         ] }),
-        filesOpen && agentsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleFilesResize }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0", children: [
+        filesOpen && (agentsOpen || skillsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleFilesResize }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0 border-b border-border", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SectionHeader,
             {
@@ -76411,6 +77256,19 @@ function RightPanel() {
             }
           ),
           agentsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.agents }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsContent, {}) })
+        ] }),
+        agentsOpen && skillsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleAgentsResize }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SectionHeader,
+            {
+              title: "SKILLS",
+              icon: Sparkles,
+              isOpen: skillsOpen,
+              onToggle: () => setSkillsOpen((prev) => !prev)
+            }
+          ),
+          skillsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.skills }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkillsContent, {}) })
         ] })
       ]
     }
@@ -76832,6 +77690,9 @@ function AgentsContent() {
     agent.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: agent.description })
   ] }, agent.id)) });
 }
+function SkillsContent() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SkillsPanel, {});
+}
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
@@ -77259,7 +78120,7 @@ function App() {
         },
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-name", children: "OPENWORK" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-version", children: "0.2.2" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-version", children: "0.2.3" })
         ]
       }
     ),