vskill 0.5.102 → 0.5.103

package/dist/eval-ui/assets/CreateSkillPage-kn7xDaAP.js

@@ -0,0 +1,12 @@
+import{j as e,u as D,a as W,R as B,r as c,g as H,b as R,w as O,c as G,t as j,L as S,P as _,E as $,d as q,S as U}from"./index-4LdVR3Lo.js";/* empty css              */const K=[{key:"slashCommands",label:"Slash"},{key:"hooks",label:"Hooks"},{key:"mcp",label:"MCP"},{key:"customSystemPrompt",label:"Prompt"}];function Y({supported:l,label:a}){return e.jsx("span",{style:{display:"inline-block",fontSize:10,padding:"1px 5px",borderRadius:3,marginRight:3,background:l?"var(--color-success-bg, #d4edda)":"var(--surface-3, #2a2a2a)",color:l?"var(--color-success, #28a745)":"var(--text-tertiary, #666)",border:`1px solid ${l?"var(--color-success, #28a745)":"var(--border-subtle, #333)"}`},children:a})}function E({agent:l,checked:a,onToggle:x}){return e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:6,cursor:"pointer",border:l.installed?"1px solid var(--color-primary, #6366f1)":"1px solid var(--border-subtle, #333)",background:a?"var(--surface-2, #1e1e1e)":"transparent"},children:[e.jsx("input",{type:"checkbox",checked:a,onChange:x,style:{accentColor:"var(--color-primary, #6366f1)"}}),e.jsxs("div",{style:{flex:1},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx("span",{style:{fontWeight:500,fontSize:13,color:"var(--text-primary, #fff)"},children:l.displayName}),l.installed&&e.jsx("span",{style:{fontSize:10,padding:"1px 5px",borderRadius:3,background:"var(--color-primary-bg, #312e81)",color:"var(--color-primary, #6366f1)"},children:"installed"})]}),e.jsx("div",{style:{marginTop:3},children:K.map(i=>e.jsx(Y,{supported:l.featureSupport[i.key],label:i.label},i.key))})]})]})}function F({agents:l,selectedIds:a,onChange:x}){const i=new Set(a),v=l.filter(o=>o.isUniversal),y=l.filter(o=>!o.isUniversal),m=o=>{const g=i.has(o)?a.filter(b=>b!==o):[...a,o];x(g)};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[v.length>0&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--text-tertiary, #999)",marginBottom:6},children:"Universal Agents"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:v.map(o=>e.jsx(E,{agent:o,checked:i.has(o.id),onToggle:()=>m(o.id)},o.id))})]}),y.length>0&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--text-tertiary, #999)",marginBottom:6},children:"Other Agents"}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:4},children:y.map(o=>e.jsx(E,{agent:o,checked:i.has(o.id),onToggle:()=>m(o.id)},o.id))})]})]})}const p={background:"var(--surface-3)",color:"var(--text-primary)",border:"1px solid var(--border-subtle)"};function V(l){return l?/API usage limits|usage limit/i.test(l)&&/regain access|reset/i.test(l):!1}function Q(l){const a=l.match(/regain access on ([^"\\]+?)(?:\s*UTC)?["\\]/i)??l.match(/regain access on ([^"\\]+)/i);return a?`Resets ${a[1].trim()} UTC`:"Quota resets at the start of your next billing period"}function k(l){switch(l){case"claude-cli":return"Uses your logged-in Claude Code session (Pro/Max subscription). No API key. When your quota runs out, excess usage is billed at API rates if you've enabled extra usage.";case"anthropic":return"Direct Anthropic API — pay-per-token. Full Opus / Sonnet / Haiku catalog. Requires ANTHROPIC_API_KEY.";case"openrouter":return"One API key → 300+ models from Anthropic, OpenAI (GPT-5 / o4-mini), Google (Gemini), Meta (Llama) and more. Same prices as direct.";case"ollama":return"Local models on your machine (Llama, Qwen, Mistral, etc.). Zero cost, zero data leaves your laptop.";case"lm-studio":return"Local models via LM Studio's OpenAI-compatible server. Works offline. Pick any model you've loaded in LM Studio.";default:return""}}function C({size:l=14,color:a="currentColor"}){return e.jsx("svg",{width:l,height:l,viewBox:"0 0 24 24",fill:"none",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z"})})}function ee(){const l=D(),{config:a}=W(),x=B.useMemo(()=>{if(typeof window>"u")return{};const t=window.location.hash,s=t.indexOf("?");if(s===-1)return{};const u=new URLSearchParams(t.slice(s+1)),d={};for(const n of["mode","skillName","description","pluginName"]){const f=u.get(n);f&&(d[n]=f)}return d},[]),[i,v]=c.useState("claude-cli"),[y,m]=c.useState("sonnet"),[o,g]=c.useState(!1),[b,P]=c.useState(null),w=c.useRef(!1),[L,T]=c.useState([]),I=H("activeAgent",null)!=="claude-code";c.useEffect(()=>{fetch("/api/agents/installed").then(t=>t.json()).then(t=>{t.agents&&T(t.agents)}).catch(()=>{})},[]),c.useEffect(()=>{var d;if(!a)return;const t=a.providers.filter(n=>n.available),s=R().skillGenModel;if(t.length===0){w.current=!0;return}if(s&&typeof s=="object"&&typeof s.provider=="string"&&typeof s.model=="string"){const n=t.find(N=>N.id===s.provider),f=n==null?void 0:n.models.some(N=>N.id===s.model);if(n&&f){v(s.provider),m(s.model),g(!0),w.current=!0;return}P({provider:s.provider,model:s.model})}if(t.find(n=>n.id==="claude-cli"))v("claude-cli"),m("sonnet");else{const n=t[0];v(n.id),m(((d=n.models[0])==null?void 0:d.id)??"")}g(!1),w.current=!0},[a]),c.useEffect(()=>{const t=s=>{if(s.key!==null&&!s.key.includes("vskill.studio.prefs"))return;const d=R().skillGenModel;d&&typeof d=="object"&&typeof d.provider=="string"&&typeof d.model=="string"&&(v(d.provider),m(d.model),g(!0))};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)},[]);const A=c.useCallback((t,s)=>{O("skillGenModel",{provider:t,model:s}),g(!0)},[]),z=c.useCallback(()=>({provider:i,model:y}),[i,y]),r=G({onCreated:(t,s)=>l(`/skills/${t}/${s}`),resolveAiConfigOverride:z});c.useEffect(()=>{x.skillName&&!r.name&&r.setName(j(x.skillName)),x.description&&!r.description&&r.setDescription(x.description),x.description&&!r.aiPrompt&&r.setAiPrompt(x.description),x.pluginName&&!r.plugin&&r.setPlugin(j(x.pluginName))},[]);const h=a==null?void 0:a.providers.find(t=>t.id===i&&t.available),M=c.useMemo(()=>{const t=["---"];return r.description?t.push(`description: "${r.description.replace(/"/g,'\\"')}"`):t.push('description: ""'),r.allowedTools.trim()&&t.push(`allowed-tools: ${r.allowedTools.trim()}`),r.model&&t.push(`model: ${r.model}`),r.targetAgents.length>0&&t.push(`target-agents: ${r.targetAgents.join(", ")}`),t.push("---"),t.push(""),r.body.trim()?t.push(r.body.trim()):(t.push(`# /${r.name||"skill-name"}`),t.push(""),t.push("You are a helpful assistant.")),t.join(`
+`)},[r.name,r.description,r.model,r.allowedTools,r.body]);return e.jsxs("div",{className:"px-10 py-8 max-w-6xl",children:[e.jsxs("div",{className:"mb-6",children:[e.jsxs("div",{className:"flex items-center gap-2 text-[12px] mb-3",style:{color:"var(--text-tertiary)"},children:[e.jsx(S,{to:"/",className:"hover:underline",style:{color:"var(--text-tertiary)"},children:"Skills"}),e.jsx("span",{children:"/"}),e.jsx("span",{style:{color:"var(--text-secondary)"},children:"New Skill"})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-[22px] font-semibold tracking-tight",style:{color:"var(--text-primary)"},children:"Create a New Skill"}),e.jsx("p",{className:"text-[13px] mt-1",style:{color:"var(--text-tertiary)"},children:"Define your skill's metadata, content, and placement"})]}),e.jsxs("div",{className:"inline-flex rounded-lg p-1",style:{background:"var(--surface-2)",border:"1px solid var(--border-subtle)"},children:[e.jsx("button",{onClick:()=>r.setMode("ai"),className:"px-4 py-2 rounded-md text-[13px] font-medium transition-all duration-200",style:{background:r.mode==="ai"?"var(--purple-muted)":"transparent",color:r.mode==="ai"?"var(--purple)":"var(--text-tertiary)",boxShadow:r.mode==="ai"?"0 1px 3px rgba(0,0,0,0.08)":"none"},children:e.jsxs("span",{className:"flex items-center gap-1.5",children:[e.jsx(C,{size:14}),"AI-Assisted"]})}),e.jsx("button",{onClick:()=>r.setMode("manual"),className:"px-4 py-2 rounded-md text-[13px] font-medium transition-all duration-200",style:{background:r.mode==="manual"?"var(--surface-4, var(--surface-3))":"transparent",color:r.mode==="manual"?"var(--text-primary)":"var(--text-tertiary)",boxShadow:r.mode==="manual"?"0 1px 3px rgba(0,0,0,0.1)":"none"},children:"Manual"})]})]})]}),r.layoutLoading&&e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"skeleton h-10 w-full rounded-lg"}),e.jsx("div",{className:"skeleton h-10 w-full rounded-lg"}),e.jsx("div",{className:"skeleton h-10 w-full rounded-lg"})]}),!r.layoutLoading&&r.layout&&r.mode==="ai"&&e.jsxs("div",{className:"flex gap-6 animate-fade-in",children:[e.jsxs("div",{className:"flex-1 min-w-0 space-y-5",children:[e.jsxs("div",{className:"glass-card p-5",children:[e.jsxs("h3",{className:"text-[13px] font-semibold mb-3 flex items-center gap-2",style:{color:"var(--text-primary)"},children:[e.jsx("div",{className:"w-6 h-6 rounded-md flex items-center justify-center",style:{background:"var(--purple-muted)"},children:e.jsx(C,{size:13,color:"var(--purple)"})}),"Describe Your Skill"]}),e.jsx("textarea",{ref:r.promptRef,value:r.aiPrompt,onChange:t=>r.setAiPrompt(t.target.value),placeholder:`e.g., A skill that helps format SQL queries, optimize them for performance, and explain query execution plans.
+
+Include any specific behaviors, constraints, or output formats you want.`,rows:6,disabled:r.generating,className:"w-full px-3 py-2.5 rounded-lg text-[13px] resize-y",style:{...p,minHeight:"140px"},onKeyDown:t=>{t.key==="Enter"&&(t.metaKey||t.ctrlKey)&&(t.preventDefault(),r.handleGenerate())}}),e.jsx("p",{className:"text-[11px] mt-2",style:{color:"var(--text-quaternary, var(--text-tertiary))"},children:"Cmd+Enter to generate"})]}),e.jsxs("div",{className:"glass-card p-5",children:[e.jsxs("h3",{className:"text-[13px] font-semibold mb-3 flex items-center gap-2",style:{color:"var(--text-primary)"},children:[e.jsx("span",{children:"Source Model"}),!o&&i==="claude-cli"&&y==="sonnet"&&e.jsx("span",{className:"text-[10px] font-normal uppercase tracking-wider px-1.5 py-0.5 rounded",style:{color:"var(--text-tertiary)",background:"var(--surface-2)"},children:"Default"})]}),b&&e.jsxs("div",{role:"status",className:"mb-3 px-3 py-2 rounded-lg text-[12px] flex items-center justify-between gap-3",style:{background:"var(--surface-2)",color:"var(--text-secondary)",border:"1px solid var(--border-subtle)"},children:[e.jsxs("span",{children:["Previous selection ",e.jsxs("code",{children:[b.provider,"/",b.model]})," unavailable — reverted to default."]}),e.jsx("button",{onClick:()=>P(null),className:"text-[11px]",style:{color:"var(--text-tertiary)",background:"none",border:"none",cursor:"pointer"},"aria-label":"Dismiss notice",children:"✕"})]}),e.jsxs("div",{className:"flex gap-4",title:h?void 0:"Install a provider (Ollama / LM Studio / OpenRouter) or run `claude login` to enable model selection.",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Provider"}),e.jsx("select",{value:i,onChange:t=>{var n;const s=t.target.value;v(s);const u=a==null?void 0:a.providers.find(f=>f.id===s),d=((n=u==null?void 0:u.models[0])==null?void 0:n.id)??y;u!=null&&u.models[0]&&m(d),A(s,d)},disabled:r.generating||!h,title:k(i)||(h?void 0:"Install a provider (Ollama / LM Studio / OpenRouter) or run `claude login` to enable model selection."),className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p,children:a==null?void 0:a.providers.filter(t=>t.available).map(t=>e.jsx("option",{value:t.id,title:k(t.id),children:t.label},t.id))}),k(i)&&e.jsxs("div",{className:"mt-1.5 text-[11px]",style:{color:"var(--text-tertiary)",lineHeight:1.5},children:[k(i),i==="claude-cli"&&e.jsxs(e.Fragment,{children:[" ",e.jsx("a",{href:"https://claude.com/settings/usage",target:"_blank",rel:"noreferrer",style:{color:"var(--color-accent, #2f6f8f)",textDecoration:"underline"},children:"Enable extra usage →"})]})]})]}),e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Model"}),e.jsx("select",{value:y,onChange:t=>{const s=t.target.value;m(s),A(i,s)},disabled:r.generating||!h,className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p,children:h==null?void 0:h.models.map(t=>e.jsx("option",{value:t.id,children:t.label},t.id))})]})]})]}),I&&L.length>0&&e.jsxs("div",{className:"glass-card p-5",children:[e.jsxs("h3",{className:"text-[13px] font-semibold mb-3",style:{color:"var(--text-primary)"},children:["Target Agents",e.jsx("span",{className:"text-[11px] font-normal ml-2",style:{color:"var(--text-tertiary)"},children:"(optional — leave empty for Claude Code default)"})]}),e.jsx(F,{agents:L,selectedIds:r.targetAgents,onChange:r.setTargetAgents})]}),r.generating&&r.aiProgress.length>0&&e.jsx("div",{children:e.jsx(_,{entries:r.aiProgress,isRunning:!0})}),r.aiError&&e.jsx("div",{children:V(r.aiError)?e.jsxs("div",{className:"px-4 py-3 rounded-lg text-[13px]",style:{background:"var(--yellow-muted)",color:"var(--text-primary)",border:"1px solid var(--yellow)"},children:[e.jsx("div",{style:{fontWeight:600,marginBottom:4},children:"Your Claude Max subscription quota is exhausted"}),e.jsxs("div",{style:{fontSize:12,color:"var(--text-secondary)",lineHeight:1.5,marginBottom:8},children:[Q(r.aiError),". Switch to another provider (Anthropic API, OpenRouter, or a local model) or enable extra usage to continue past your monthly quota."]}),e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap"},children:[e.jsx("a",{href:"https://claude.com/settings/usage",target:"_blank",rel:"noreferrer",style:{display:"inline-flex",alignItems:"center",padding:"4px 10px",fontSize:12,fontWeight:500,color:"var(--color-paper, #fff)",background:"var(--color-accent, #2f6f8f)",borderRadius:4,textDecoration:"none"},children:"Enable extra usage →"}),e.jsx("button",{onClick:r.clearAiError,style:{padding:"4px 10px",fontSize:12,color:"var(--text-primary)",background:"transparent",border:"1px solid var(--border-default)",borderRadius:4,cursor:"pointer"},children:"Dismiss"})]})]}):r.aiClassifiedError?e.jsx($,{error:r.aiClassifiedError,onRetry:r.handleGenerate,onDismiss:r.clearAiError}):e.jsx("div",{className:"px-4 py-3 rounded-lg text-[13px]",style:{background:"var(--red-muted)",color:"var(--red)",border:"1px solid var(--red-muted)"},children:r.aiError})}),e.jsxs("div",{className:"flex items-center gap-3",children:[r.generating?e.jsx("button",{onClick:r.handleCancelGenerate,className:"px-6 py-2.5 rounded-lg text-[13px] font-medium transition-all duration-150 flex items-center gap-2",style:{background:"var(--surface-3)",color:"var(--text-secondary)"},children:"Cancel Generation"}):e.jsxs("button",{onClick:r.handleGenerate,disabled:!r.aiPrompt.trim(),className:"px-6 py-2.5 rounded-lg text-[13px] font-medium transition-all duration-150 flex items-center gap-2",style:{background:r.aiPrompt.trim()?"var(--purple)":"var(--surface-3)",color:r.aiPrompt.trim()?"var(--color-paper)":"var(--text-tertiary)",cursor:r.aiPrompt.trim()?"pointer":"not-allowed"},children:[e.jsx(C,{size:14})," Generate Skill"]}),e.jsx(S,{to:"/",className:"px-4 py-2.5 rounded-lg text-[13px] font-medium",style:{color:"var(--text-secondary)"},children:"Cancel"})]})]}),e.jsx("div",{className:"w-[340px] flex-shrink-0",children:e.jsx("div",{className:"sticky top-8",children:e.jsxs("div",{className:"glass-card p-4",children:[e.jsx("h3",{className:"text-[11px] font-semibold uppercase tracking-wider mb-3",style:{color:"var(--text-tertiary)"},children:"SKILL.md Preview"}),e.jsx("pre",{className:"text-[11px] font-mono leading-relaxed overflow-auto max-h-[500px] p-3 rounded-lg",style:{background:"var(--surface-0)",color:"var(--text-secondary)",border:"1px solid var(--border-subtle)",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:M})]})})})]}),!r.layoutLoading&&r.layout&&r.mode==="manual"&&e.jsx("div",{className:"animate-fade-in",children:e.jsxs("div",{className:"flex gap-6",children:[e.jsxs("div",{className:"flex-1 min-w-0 space-y-5",children:[e.jsxs("div",{className:"glass-card p-5",children:[e.jsx("h3",{className:"text-[13px] font-semibold mb-3",style:{color:"var(--text-primary)"},children:"Location"}),r.creatableLayouts.length>1&&e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Layout"}),e.jsxs("div",{className:"flex gap-2",children:[r.creatableLayouts.map(t=>e.jsx("button",{onClick:()=>{r.setSelectedLayout(t.layout);const s=t.existingPlugins[0];r.setPlugin(s||""),r.setNewPlugin("")},className:"px-3 py-1.5 rounded-lg text-[12px] font-medium transition-all duration-150",style:{background:r.selectedLayout===t.layout?"var(--accent)":"var(--surface-3)",color:r.selectedLayout===t.layout?"var(--color-paper)":"var(--text-secondary)",border:`1px solid ${r.selectedLayout===t.layout?"var(--accent)":"var(--border-subtle)"}`},children:t.label},t.layout)),!r.creatableLayouts.find(t=>t.layout===3)&&e.jsx("button",{onClick:()=>{r.setSelectedLayout(3),r.setPlugin("")},className:"px-3 py-1.5 rounded-lg text-[12px] font-medium transition-all duration-150",style:{background:r.selectedLayout===3?"var(--accent)":"var(--surface-3)",color:r.selectedLayout===3?"var(--color-paper)":"var(--text-secondary)",border:`1px solid ${r.selectedLayout===3?"var(--accent)":"var(--border-subtle)"}`},children:"Root skills/"})]})]}),r.selectedLayout!==3&&e.jsxs("div",{className:"mb-4",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Plugin"}),e.jsxs("select",{value:r.plugin,onChange:t=>{r.setPlugin(t.target.value),r.setNewPlugin("")},className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p,children:[r.availablePlugins.map(t=>e.jsx("option",{value:t,children:t},t)),e.jsx("option",{value:"__new__",children:"+ New plugin..."})]}),r.plugin==="__new__"&&e.jsx("input",{type:"text",value:r.newPlugin,onChange:t=>r.setNewPlugin(j(t.target.value)),placeholder:"my-plugin",className:"w-full mt-2 px-3 py-2 rounded-lg text-[13px]",style:p})]}),e.jsx("div",{className:"px-3 py-2 rounded-lg text-[11px] font-mono",style:{background:"var(--surface-0)",color:"var(--text-tertiary)",border:"1px solid var(--border-subtle)"},children:r.pathPreview})]}),r.showPluginRecommendation&&r.pluginLayoutInfo&&r.selectedLayout===3&&e.jsxs("div",{className:"px-4 py-3 rounded-lg text-[12px] animate-fade-in flex items-center justify-between gap-3",style:{background:"var(--accent-muted)",color:"var(--text-secondary)",border:"1px solid var(--accent-muted)"},children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"var(--accent)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),e.jsxs("span",{children:["Plugins detected (",e.jsx("strong",{children:r.pluginLayoutInfo.plugins.slice(0,3).join(", ")}),"). Add this skill to a plugin for better organization."]})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsx("button",{onClick:r.applyPluginRecommendation,className:"px-3 py-1 rounded-md text-[11px] font-medium",style:{background:"var(--accent)",color:"var(--color-paper)",border:"none",cursor:"pointer"},children:"Use plugin"}),e.jsx("button",{onClick:()=>r.setShowPluginRecommendation(!1),className:"w-5 h-5 rounded flex items-center justify-center",style:{color:"var(--text-tertiary)",background:"none",border:"none",cursor:"pointer"},children:e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]}),e.jsxs("div",{className:"glass-card p-5",children:[e.jsx("h3",{className:"text-[13px] font-semibold mb-3",style:{color:"var(--text-primary)"},children:"Skill Details"}),e.jsxs("div",{className:"mb-4",children:[e.jsxs("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:["Name ",e.jsx("span",{style:{color:"var(--red)"},children:"*"})]}),e.jsx("input",{type:"text",value:r.name,onChange:t=>r.setName(j(t.target.value,!1)),placeholder:"my-skill",className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p})]}),e.jsxs("div",{className:"mb-4",children:[e.jsxs("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:["Description ",e.jsx("span",{style:{color:"var(--red)"},children:"*"})]}),e.jsx("textarea",{value:r.description,onChange:t=>r.setDescription(t.target.value),placeholder:"Brief description — used for auto-activation keywords",rows:3,className:"w-full px-3 py-2 rounded-lg text-[13px] resize-y",style:{...p,minHeight:"72px"}}),e.jsx("p",{className:"text-[11px] mt-1",style:{color:"var(--text-tertiary)"},children:"This text is used by Claude to decide when to activate the skill"})]}),e.jsxs("div",{className:"flex gap-4 mb-4",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Model"}),e.jsxs("select",{value:r.model,onChange:t=>r.setModel(t.target.value),className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p,children:[e.jsx("option",{value:"",children:"Any (default)"}),e.jsx("option",{value:"opus",children:"Opus"}),e.jsx("option",{value:"sonnet",children:"Sonnet"}),e.jsx("option",{value:"haiku",children:"Haiku"})]})]}),e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"text-[11px] font-medium uppercase tracking-wider mb-2 block",style:{color:"var(--text-tertiary)"},children:"Allowed Tools"}),e.jsx("input",{type:"text",value:r.allowedTools,onChange:t=>r.setAllowedTools(t.target.value),placeholder:"Read, Write, Edit, Bash, Glob, Grep",className:"w-full px-3 py-2 rounded-lg text-[13px]",style:p})]})]})]}),e.jsxs("div",{className:"glass-card p-5",children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx("div",{className:"w-7 h-7 rounded-lg flex items-center justify-center",style:{background:"var(--accent-muted)"},children:e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"var(--accent)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),e.jsx("polyline",{points:"14 2 14 8 20 8"}),e.jsx("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),e.jsx("line",{x1:"16",y1:"17",x2:"8",y2:"17"})]})}),e.jsxs("div",{children:[e.jsx("span",{className:"text-[13px] font-semibold",style:{color:"var(--text-primary)"},children:"SKILL.md"}),e.jsx("span",{className:"text-[11px] ml-2",style:{color:"var(--text-tertiary)"},children:"Skill Definition"})]})]}),e.jsx("div",{className:"flex items-center",style:{background:"var(--surface-2)",borderRadius:8,padding:2,gap:1},children:["write","preview"].map(t=>e.jsxs("button",{onClick:()=>r.setBodyViewMode(t),className:"flex items-center gap-1 rounded-md transition-all duration-150",style:{padding:"4px 10px",background:r.bodyViewMode===t?"var(--surface-4)":"transparent",color:r.bodyViewMode===t?"var(--text-primary)":"var(--text-tertiary)",fontSize:11,fontWeight:r.bodyViewMode===t?600:400,border:"none",cursor:"pointer"},children:[t==="write"?e.jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("polyline",{points:"16 18 22 12 16 6"}),e.jsx("polyline",{points:"8 6 2 12 8 18"})]}):e.jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),e.jsx("circle",{cx:"12",cy:"12",r:"3"})]}),e.jsx("span",{children:t==="write"?"Write":"Preview"})]},t))})]}),r.bodyViewMode==="write"?e.jsx("textarea",{value:r.body,onChange:t=>r.setBody(t.target.value),placeholder:`# /my-skill
+
+You are an expert at...
+
+## Workflow
+
+1. First, understand the request
+2. Then, implement the solution
+3. Finally, verify the result`,rows:12,className:"w-full px-3 py-2 rounded-lg text-[13px] font-mono resize-y",style:{...p,minHeight:"200px"}}):r.body.trim()?e.jsx("div",{className:"text-[13px] leading-relaxed overflow-x-auto rounded-lg px-4 py-3",style:{background:"var(--surface-0)",color:"var(--text-secondary)",border:"1px solid var(--border-subtle)",minHeight:"200px",maxHeight:"400px",overflowY:"auto"},dangerouslySetInnerHTML:{__html:q(r.body)}}):e.jsx("div",{className:"text-[13px] leading-relaxed overflow-x-auto rounded-lg px-4 py-3",style:{background:"var(--surface-0)",color:"var(--text-secondary)",border:"1px solid var(--border-subtle)",minHeight:"200px",maxHeight:"400px",overflowY:"auto"},children:e.jsx("span",{style:{color:"var(--text-tertiary)"},children:"Start writing to see preview"})})]}),e.jsx(U,{skillName:r.name||"{skill}",hasEvals:!1,isDraft:r.draftSaved}),r.error&&e.jsx("div",{className:"px-4 py-3 rounded-lg text-[13px]",style:{background:"var(--red-muted)",color:"var(--red)",border:"1px solid var(--red-muted)"},children:r.error}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("button",{onClick:r.handleCreate,disabled:r.creating||!r.name||!r.description,className:"px-5 py-2.5 rounded-lg text-[13px] font-medium transition-all duration-150",style:{background:r.creating||!r.name||!r.description?"var(--surface-3)":"var(--accent)",color:r.creating||!r.name||!r.description?"var(--text-tertiary)":"var(--color-paper)",cursor:r.creating||!r.name||!r.description?"not-allowed":"pointer",opacity:r.creating?.7:1},children:r.creating?"Creating...":"Create Skill"}),e.jsx(S,{to:"/",className:"px-4 py-2.5 rounded-lg text-[13px] font-medium",style:{color:"var(--text-secondary)"},children:"Cancel"})]})]}),e.jsx("div",{className:"w-[340px] flex-shrink-0",children:e.jsx("div",{className:"sticky top-8",children:e.jsxs("div",{className:"glass-card p-4",children:[e.jsx("h3",{className:"text-[11px] font-semibold uppercase tracking-wider mb-3",style:{color:"var(--text-tertiary)"},children:"SKILL.md Preview"}),e.jsx("pre",{className:"text-[11px] font-mono leading-relaxed overflow-auto max-h-[500px] p-3 rounded-lg",style:{background:"var(--surface-0)",color:"var(--text-secondary)",border:"1px solid var(--border-subtle)",whiteSpace:"pre-wrap",wordBreak:"break-word"},children:M})]})})})]})})]})}export{ee as CreateSkillPage};

package/dist/eval-ui/assets/{UpdateDropdown-stNmCWki.js → UpdateDropdown-9qR5NxTi.js}

@@ -1 +1 @@
-import{r as u,j as t}from"./index-BoCK_s7q.js";/* empty css              */function b(l,n){const[c,m]=l.split("."),[f,o]=n.split("."),r=Number(c),d=Number(m),s=Number(f),a=Number(o);return!Number.isFinite(r)||!Number.isFinite(s)?(console.warn(`[semverBump] unparseable version: installed=${l} latest=${n}`),"patch"):s>r?"major":!Number.isFinite(d)||!Number.isFinite(a)?(console.warn(`[semverBump] unparseable minor: installed=${l} latest=${n}`),"patch"):a>d?"minor":"patch"}const y={major:{bg:"var(--red-muted)",text:"var(--red)"},minor:{bg:"var(--yellow-muted)",text:"var(--yellow)"},patch:{bg:"var(--green-muted)",text:"var(--green)"}};function w({updates:l,isRefreshing:n,onRefresh:c,onSelectSkill:m,onViewAll:f,onClose:o,anchorRef:r}){const d=u.useRef(null),s=u.useRef(null);u.useEffect(()=>{var e;(e=s.current)==null||e.focus()},[]),u.useEffect(()=>{function e(i){d.current&&(d.current.contains(i.target)||r!=null&&r.current&&r.current.contains(i.target)||o())}return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[o,r]),u.useEffect(()=>{function e(i){var p;i.key==="Escape"&&(i.preventDefault(),o(),(p=r==null?void 0:r.current)==null||p.focus())}return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[o,r]);const a=l.filter(e=>e.updateAvailable);return t.jsxs("div",{ref:d,role:"dialog","aria-modal":"false","aria-label":"Skill update summary","data-testid":"update-dropdown",style:{position:"absolute",top:"calc(100% + 6px)",right:0,width:320,maxHeight:400,overflow:"auto",background:"var(--bg-surface)",border:"1px solid var(--border-default)",borderRadius:8,padding:10,zIndex:1e3,fontFamily:"var(--font-sans)",display:"flex",flexDirection:"column",gap:6},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"2px 4px 6px",borderBottom:"1px solid var(--border-default)"},children:[t.jsx("span",{style:{fontSize:12,fontWeight:600,color:"var(--text-primary)"},children:a.length===0?"No updates available":`${a.length} updates available`}),t.jsx("button",{type:"button","data-testid":"update-dropdown-refresh",onClick:c,disabled:n,style:{background:"transparent",border:"none",color:"var(--text-secondary)",fontSize:11,fontFamily:"var(--font-mono)",cursor:n?"not-allowed":"pointer",padding:"2px 6px"},children:n?"Refreshing…":"Refresh"})]}),a.length>0?t.jsx("ul",{role:"list",style:{listStyle:"none",margin:0,padding:0,display:"flex",flexDirection:"column",gap:2},children:a.map((e,i)=>{const p=e.latest?b(e.installed,e.latest):"patch",x=y[p];return t.jsx("li",{style:{margin:0},children:t.jsxs("button",{ref:i===0?s:void 0,type:"button","data-testid":"update-dropdown-row","data-skill-name":e.name,onClick:()=>m(e),style:{display:"flex",alignItems:"center",gap:8,width:"100%",padding:"6px 8px",background:"transparent",border:"none",borderRadius:4,cursor:"pointer",color:"var(--text-primary)",fontFamily:"inherit",fontSize:12,textAlign:"left"},children:[t.jsx("span",{"aria-hidden":"true","data-testid":"update-dropdown-bump-dot","data-bump":p,style:{width:8,height:8,borderRadius:"50%",background:x.text,flexShrink:0}}),t.jsx("span",{style:{minWidth:0,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e.name}),t.jsxs("span",{style:{fontFamily:"var(--font-mono)",fontSize:10,color:"var(--text-secondary)",fontVariantNumeric:"tabular-nums"},children:[e.installed," → ",e.latest??"?"]})]})},e.name)})}):t.jsx("div",{style:{padding:"12px 4px",fontSize:12,color:"var(--text-secondary)"},children:"All installed skills are up to date."}),t.jsx("div",{style:{display:"flex",justifyContent:"flex-end",padding:"4px 4px 0",borderTop:"1px solid var(--border-default)",marginTop:2},children:t.jsx("button",{type:"button","data-testid":"update-dropdown-view-all",onClick:f,style:{background:"transparent",border:"none",color:"var(--text-secondary)",fontSize:11,fontFamily:"var(--font-sans)",cursor:"pointer",padding:"4px 6px"},children:"View all"})})]})}export{w as default};
+import{r as u,j as t}from"./index-4LdVR3Lo.js";/* empty css              */function b(l,n){const[c,m]=l.split("."),[f,o]=n.split("."),r=Number(c),d=Number(m),s=Number(f),a=Number(o);return!Number.isFinite(r)||!Number.isFinite(s)?(console.warn(`[semverBump] unparseable version: installed=${l} latest=${n}`),"patch"):s>r?"major":!Number.isFinite(d)||!Number.isFinite(a)?(console.warn(`[semverBump] unparseable minor: installed=${l} latest=${n}`),"patch"):a>d?"minor":"patch"}const y={major:{bg:"var(--red-muted)",text:"var(--red)"},minor:{bg:"var(--yellow-muted)",text:"var(--yellow)"},patch:{bg:"var(--green-muted)",text:"var(--green)"}};function w({updates:l,isRefreshing:n,onRefresh:c,onSelectSkill:m,onViewAll:f,onClose:o,anchorRef:r}){const d=u.useRef(null),s=u.useRef(null);u.useEffect(()=>{var e;(e=s.current)==null||e.focus()},[]),u.useEffect(()=>{function e(i){d.current&&(d.current.contains(i.target)||r!=null&&r.current&&r.current.contains(i.target)||o())}return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[o,r]),u.useEffect(()=>{function e(i){var p;i.key==="Escape"&&(i.preventDefault(),o(),(p=r==null?void 0:r.current)==null||p.focus())}return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[o,r]);const a=l.filter(e=>e.updateAvailable);return t.jsxs("div",{ref:d,role:"dialog","aria-modal":"false","aria-label":"Skill update summary","data-testid":"update-dropdown",style:{position:"absolute",top:"calc(100% + 6px)",right:0,width:320,maxHeight:400,overflow:"auto",background:"var(--bg-surface)",border:"1px solid var(--border-default)",borderRadius:8,padding:10,zIndex:1e3,fontFamily:"var(--font-sans)",display:"flex",flexDirection:"column",gap:6},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"2px 4px 6px",borderBottom:"1px solid var(--border-default)"},children:[t.jsx("span",{style:{fontSize:12,fontWeight:600,color:"var(--text-primary)"},children:a.length===0?"No updates available":`${a.length} updates available`}),t.jsx("button",{type:"button","data-testid":"update-dropdown-refresh",onClick:c,disabled:n,style:{background:"transparent",border:"none",color:"var(--text-secondary)",fontSize:11,fontFamily:"var(--font-mono)",cursor:n?"not-allowed":"pointer",padding:"2px 6px"},children:n?"Refreshing…":"Refresh"})]}),a.length>0?t.jsx("ul",{role:"list",style:{listStyle:"none",margin:0,padding:0,display:"flex",flexDirection:"column",gap:2},children:a.map((e,i)=>{const p=e.latest?b(e.installed,e.latest):"patch",x=y[p];return t.jsx("li",{style:{margin:0},children:t.jsxs("button",{ref:i===0?s:void 0,type:"button","data-testid":"update-dropdown-row","data-skill-name":e.name,onClick:()=>m(e),style:{display:"flex",alignItems:"center",gap:8,width:"100%",padding:"6px 8px",background:"transparent",border:"none",borderRadius:4,cursor:"pointer",color:"var(--text-primary)",fontFamily:"inherit",fontSize:12,textAlign:"left"},children:[t.jsx("span",{"aria-hidden":"true","data-testid":"update-dropdown-bump-dot","data-bump":p,style:{width:8,height:8,borderRadius:"50%",background:x.text,flexShrink:0}}),t.jsx("span",{style:{minWidth:0,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e.name}),t.jsxs("span",{style:{fontFamily:"var(--font-mono)",fontSize:10,color:"var(--text-secondary)",fontVariantNumeric:"tabular-nums"},children:[e.installed," → ",e.latest??"?"]})]})},e.name)})}):t.jsx("div",{style:{padding:"12px 4px",fontSize:12,color:"var(--text-secondary)"},children:"All installed skills are up to date."}),t.jsx("div",{style:{display:"flex",justifyContent:"flex-end",padding:"4px 4px 0",borderTop:"1px solid var(--border-default)",marginTop:2},children:t.jsx("button",{type:"button","data-testid":"update-dropdown-view-all",onClick:f,style:{background:"transparent",border:"none",color:"var(--text-secondary)",fontSize:11,fontFamily:"var(--font-sans)",cursor:"pointer",padding:"4px 6px"},children:"View all"})})]})}export{w as default};