@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/SkillDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillDetailPage.js","names":[],"sources":["../../../src/botlit/pages/SkillDetailPage.tsx"],"sourcesContent":["/**\n * Skill Detail Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { useParams, Link } from 'react-router';\nimport { toast } from 'sonner';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport { isNative, nativeImpact, nativeNotify } from '../../utils/nativeBridge';\nimport {\n  ArrowLeft,\n  Zap,\n  FileText,\n  Wrench,\n  Database,\n  Shield,\n  Settings,\n  Save,\n  ExternalLink,\n  CheckCircle,\n  XCircle,\n  Edit,\n  Trash2,\n} from 'lucide-react';\nimport { PageLayout } from '../components/PageLayout';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { EmptyState } from '../components/EmptyState';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, Textarea, FormField } from '../components/Input';\nimport { StatusBadge, Badge } from '../components/Badge';\nimport {\n  useSkill,\n  useCreateSkill,\n  useUpdateSkill,\n  useDeleteSkill,\n  usePromptTemplates,\n  usePolicies,\n  useRetrievalProfiles,\n} from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { jsonBoolean, toUnion } from '../utils/unions';\nimport type { Visibility } from '../types';\n\nconst VISIBILITIES: Visibility[] = ['PRIVATE', 'WORKSPACE', 'PUBLIC'];\n\ninterface SkillDetailPageProps {\n  isNew?: boolean;\n}\n\nexport const SkillDetailPage: FC<SkillDetailPageProps> = ({ isNew }) => {\n  const { skillId } = useParams();\n  const { navigateTo, getPath } = useBotlit();\n  const { data: skill, loading } = useSkill(isNew ? undefined : skillId);\n  const { data: promptTemplates } = usePromptTemplates();\n  const { data: policies } = usePolicies();\n  const { data: retrievalProfiles } = useRetrievalProfiles();\n  const { create: createSkill, loading: createLoading } = useCreateSkill();\n  const { update: updateSkill, loading: updateLoading } = useUpdateSkill();\n  const { remove: deleteSkill, loading: deleteLoading } = useDeleteSkill();\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\n\n  const [formData, setFormData] = useState({\n    name: '',\n    description: '',\n    visibility: 'PRIVATE' as Visibility,\n    promptTemplateId: '',\n    toolPolicyId: '',\n    retrievalProfileId: '',\n    toolPackDeps: '',\n    recommendedPolicies: '',\n    requiresTools: false,\n    requiresKnowledge: false,\n    requiresA2A: false,\n  });\n\n  const handleCreate = async () => {\n    if (!formData.name) return;\n    try {\n      await createSkillOrThrow();\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to create skill');\n    }\n  };\n\n  const createSkillOrThrow = async () => {\n    await createSkill({\n      name: formData.name,\n      description: formData.description,\n      visibility: formData.visibility,\n      promptTemplateId: formData.promptTemplateId || undefined,\n      toolPolicyId: formData.toolPolicyId || undefined,\n      retrievalProfileId: formData.retrievalProfileId || undefined,\n      toolPackDeps: formData.toolPackDeps\n        .split(',')\n        .map((t) => t.trim())\n        .filter(Boolean),\n      recommendedPolicies: formData.recommendedPolicies\n        .split(',')\n        .map((p) => p.trim())\n        .filter(Boolean),\n      capabilityFlags: {\n        requiresTools: formData.requiresTools,\n        requiresKnowledge: formData.requiresKnowledge,\n        requiresA2A: formData.requiresA2A,\n      },\n    });\n    toast.success(`Skill \"${formData.name}\" created`);\n    navigateTo('skills');\n  };\n\n  const handleUpdate = async () => {\n    if (!skillId || !formData.name) return;\n    try {\n      await updateSkillOrThrow();\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to update skill');\n    }\n  };\n\n  const updateSkillOrThrow = async () => {\n    if (!skillId) return;\n    await updateSkill({\n      skillId,\n      input: {\n        name: formData.name,\n        description: formData.description,\n        visibility: formData.visibility,\n        promptTemplateId: formData.promptTemplateId || undefined,\n        toolPolicyId: formData.toolPolicyId || undefined,\n        retrievalProfileId: formData.retrievalProfileId || undefined,\n        toolPackDeps: formData.toolPackDeps\n          .split(',')\n          .map((t) => t.trim())\n          .filter(Boolean),\n        recommendedPolicies: formData.recommendedPolicies\n          .split(',')\n          .map((p) => p.trim())\n          .filter(Boolean),\n        capabilityFlags: {\n          requiresTools: formData.requiresTools,\n          requiresKnowledge: formData.requiresKnowledge,\n          requiresA2A: formData.requiresA2A,\n        },\n      },\n    });\n    toast.success('Skill updated');\n    setIsEditing(false);\n  };\n\n  const handleDelete = async () => {\n    if (!skillId) return;\n    try {\n      await deleteSkill(skillId);\n      if (isNative()) void nativeNotify('success');\n      toast.success('Skill deleted');\n      navigateTo('skills');\n    } catch (err) {\n      if (isNative()) void nativeNotify('error');\n      toast.error(err instanceof Error ? err.message : 'Failed to delete skill');\n    }\n  };\n\n  const startEditing = () => {\n    if (!skill) return;\n    setFormData({\n      name: skill.name,\n      description: skill.description || '',\n      visibility: toUnion(skill.visibility, VISIBILITIES, 'PRIVATE'),\n      promptTemplateId: skill.promptTemplateId || '',\n      toolPolicyId: skill.toolPolicyId || '',\n      retrievalProfileId: skill.retrievalProfileId || '',\n      toolPackDeps: skill.toolPackDeps.join(', '),\n      recommendedPolicies: skill.recommendedPolicies.join(', '),\n      requiresTools: jsonBoolean(skill.capabilityFlags, 'requiresTools'),\n      requiresKnowledge: jsonBoolean(skill.capabilityFlags, 'requiresKnowledge'),\n      requiresA2A: jsonBoolean(skill.capabilityFlags, 'requiresA2A'),\n    });\n    setIsEditing(true);\n  };\n\n  const toolPolicies =\n    policies?.filter((p: { id: string; name: string; type: string }) => p.type === 'TOOL') || [];\n\n  if (isNew) {\n    return (\n      <PageLayout\n        title=\"Create Skill\"\n        description=\"Bundle prompts, tools, and policies into a reusable skill\"\n        actions={\n          <div className=\"flex gap-2\">\n            <Button variant=\"outline\" onClick={() => navigateTo('skills')}>\n              Cancel\n            </Button>\n            <Button\n              leftIcon={<Save size={16} />}\n              onClick={handleCreate}\n              isLoading={createLoading}\n              disabled={!formData.name}\n            >\n              Create\n            </Button>\n          </div>\n        }\n      >\n        <div className=\"max-w-2xl space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Basic Information</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <FormField label=\"Skill Name\" required>\n                <Input\n                  placeholder=\"e.g., Code Review Skill\"\n                  value={formData.name}\n                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                />\n              </FormField>\n\n              <FormField label=\"Description\">\n                <Textarea\n                  placeholder=\"What does this skill enable agents to do?\"\n                  value={formData.description}\n                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}\n                  rows={3}\n                />\n              </FormField>\n\n              <FormField label=\"Visibility\">\n                <select\n                  className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={formData.visibility}\n                  onChange={(e) =>\n                    setFormData({ ...formData, visibility: e.target.value as Visibility })\n                  }\n                >\n                  <option value=\"PRIVATE\">Private</option>\n                  <option value=\"WORKSPACE\">Workspace</option>\n                  <option value=\"PUBLIC\">Public</option>\n                </select>\n              </FormField>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <FileText size={18} />\n                Prompt Template\n              </CardTitle>\n              <CardDescription>Associate a prompt template with this skill</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <FormField label=\"Prompt Template\">\n                <select\n                  className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={formData.promptTemplateId}\n                  onChange={(e) => setFormData({ ...formData, promptTemplateId: e.target.value })}\n                >\n                  <option value=\"\">None</option>\n                  {promptTemplates?.map(\n                    (template: { id: string; name: string; version?: string | null }) => (\n                      <option key={template.id} value={template.id}>\n                        {template.name} (v{template.version})\n                      </option>\n                    )\n                  )}\n                </select>\n              </FormField>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <Wrench size={18} />\n                Tools Configuration\n              </CardTitle>\n              <CardDescription>Configure tool access for this skill</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <FormField label=\"Tool Policy\">\n                <select\n                  className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={formData.toolPolicyId}\n                  onChange={(e) => setFormData({ ...formData, toolPolicyId: e.target.value })}\n                >\n                  <option value=\"\">None</option>\n                  {toolPolicies.map((policy: { id: string; name: string }) => (\n                    <option key={policy.id} value={policy.id}>\n                      {policy.name}\n                    </option>\n                  ))}\n                </select>\n              </FormField>\n\n              <FormField label=\"Tool Pack Dependencies\" description=\"Comma-separated package slugs\">\n                <Input\n                  placeholder=\"e.g., @botlit/github-tools, @botlit/web-browser\"\n                  value={formData.toolPackDeps}\n                  onChange={(e) => setFormData({ ...formData, toolPackDeps: e.target.value })}\n                />\n              </FormField>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <Database size={18} />\n                Knowledge Configuration\n              </CardTitle>\n              <CardDescription>Configure knowledge retrieval for this skill</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <FormField label=\"Retrieval Profile\">\n                <select\n                  className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                  value={formData.retrievalProfileId}\n                  onChange={(e) => setFormData({ ...formData, retrievalProfileId: e.target.value })}\n                >\n                  <option value=\"\">None</option>\n                  {retrievalProfiles?.map((profile: { id: string; name: string }) => (\n                    <option key={profile.id} value={profile.id}>\n                      {profile.name}\n                    </option>\n                  ))}\n                </select>\n              </FormField>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <Shield size={18} />\n                Policies & Capabilities\n              </CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <FormField label=\"Recommended Policies\" description=\"Comma-separated policy IDs\">\n                <Input\n                  placeholder=\"e.g., content-policy-1, budget-policy-1\"\n                  value={formData.recommendedPolicies}\n                  onChange={(e) =>\n                    setFormData({ ...formData, recommendedPolicies: e.target.value })\n                  }\n                />\n              </FormField>\n\n              <div className=\"space-y-2\">\n                <p className=\"text-sm font-medium\">Capability Requirements</p>\n                <div className=\"flex flex-wrap gap-4\">\n                  <label className=\"flex items-center gap-2\">\n                    <input\n                      type=\"checkbox\"\n                      checked={formData.requiresTools}\n                      onChange={(e) =>\n                        setFormData({ ...formData, requiresTools: e.target.checked })\n                      }\n                      className=\"h-4 w-4\"\n                    />\n                    <span className=\"text-sm\">Requires Tools</span>\n                  </label>\n                  <label className=\"flex items-center gap-2\">\n                    <input\n                      type=\"checkbox\"\n                      checked={formData.requiresKnowledge}\n                      onChange={(e) =>\n                        setFormData({ ...formData, requiresKnowledge: e.target.checked })\n                      }\n                      className=\"h-4 w-4\"\n                    />\n                    <span className=\"text-sm\">Requires Knowledge</span>\n                  </label>\n                  <label className=\"flex items-center gap-2\">\n                    <input\n                      type=\"checkbox\"\n                      checked={formData.requiresA2A}\n                      onChange={(e) => setFormData({ ...formData, requiresA2A: e.target.checked })}\n                      className=\"h-4 w-4\"\n                    />\n                    <span className=\"text-sm\">Requires A2A</span>\n                  </label>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Loading...\">\n        <div className=\"h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\" />\n      </PageLayout>\n    );\n  }\n\n  if (!skill) {\n    return (\n      <PageLayout title=\"Skill Not Found\">\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"Skill Not Found\"\n          description=\"This skill doesn't exist.\"\n          action={<Button onClick={() => navigateTo('skills')}>Back to Skills</Button>}\n        />\n      </PageLayout>\n    );\n  }\n\n  const CapabilityItem: FC<{ label: string; enabled: boolean }> = ({ label, enabled }) => (\n    <div className=\"flex items-center gap-2\">\n      {enabled ? (\n        <CheckCircle className=\"h-4 w-4 text-green-500\" />\n      ) : (\n        <XCircle className=\"h-4 w-4 text-text-secondary\" />\n      )}\n      <span className={enabled ? 'text-text-primary' : 'text-text-secondary'}>{label}</span>\n    </div>\n  );\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => navigateTo('skills')}>\n            <ArrowLeft size={20} />\n          </Button>\n          <div className=\"p-2 rounded-lg bg-action-primary-bg/10\">\n            <Zap className=\"h-6 w-6 text-primary\" />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span>{skill.name}</span>\n              <StatusBadge status={skill.status} />\n            </div>\n            <p className=\"text-sm font-normal text-text-secondary\">{skill.description}</p>\n          </div>\n        </div>\n      }\n      actions={\n        <div className=\"flex gap-2\">\n          {isEditing ? (\n            <>\n              <Button variant=\"outline\" onClick={() => setIsEditing(false)}>\n                Cancel\n              </Button>\n              <Button\n                leftIcon={<Save size={16} />}\n                onClick={handleUpdate}\n                isLoading={updateLoading}\n                disabled={!formData.name}\n              >\n                Save Changes\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"outline\" leftIcon={<Edit size={16} />} onClick={startEditing}>\n                Edit\n              </Button>\n              {showDeleteConfirm ? (\n                <div className=\"flex gap-2\">\n                  <Button variant=\"outline\" size=\"sm\" onClick={() => setShowDeleteConfirm(false)}>\n                    Cancel\n                  </Button>\n                  <Button\n                    variant=\"destructive\"\n                    size=\"sm\"\n                    onClick={() => {\n                      nativeImpact('medium');\n                      void handleDelete();\n                    }}\n                    isLoading={deleteLoading}\n                  >\n                    Confirm Delete\n                  </Button>\n                </div>\n              ) : (\n                <Button\n                  variant=\"destructive\"\n                  leftIcon={<Trash2 size={16} />}\n                  onClick={() => setShowDeleteConfirm(true)}\n                >\n                  Delete\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Zap size={18} />}>\n          This skill bundles a prompt, a set of tools and a knowledge profile into one reusable\n          capability. Review what it includes and the policies it recommends, then attach it to any\n          agent to grant all of those abilities at once — keeping your agents consistent without\n          re-wiring the same pieces every time.\n        </PagePurpose>\n\n        {/* Edit Form */}\n        {isEditing && (\n          <Card>\n            <CardHeader>\n              <CardTitle>Edit Skill</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"grid grid-cols-2 gap-4\">\n                <FormField label=\"Skill Name\" required>\n                  <Input\n                    value={formData.name}\n                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n                  />\n                </FormField>\n                <FormField label=\"Visibility\">\n                  <select\n                    className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                    value={formData.visibility}\n                    onChange={(e) =>\n                      setFormData({ ...formData, visibility: e.target.value as Visibility })\n                    }\n                  >\n                    <option value=\"PRIVATE\">Private</option>\n                    <option value=\"WORKSPACE\">Workspace</option>\n                    <option value=\"PUBLIC\">Public</option>\n                  </select>\n                </FormField>\n              </div>\n              <FormField label=\"Description\">\n                <Textarea\n                  value={formData.description}\n                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}\n                  rows={2}\n                />\n              </FormField>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <FormField label=\"Prompt Template\">\n                  <select\n                    className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                    value={formData.promptTemplateId}\n                    onChange={(e) => setFormData({ ...formData, promptTemplateId: e.target.value })}\n                  >\n                    <option value=\"\">None</option>\n                    {promptTemplates?.map((template: { id: string; name: string }) => (\n                      <option key={template.id} value={template.id}>\n                        {template.name}\n                      </option>\n                    ))}\n                  </select>\n                </FormField>\n                <FormField label=\"Retrieval Profile\">\n                  <select\n                    className=\"flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm\"\n                    value={formData.retrievalProfileId}\n                    onChange={(e) =>\n                      setFormData({ ...formData, retrievalProfileId: e.target.value })\n                    }\n                  >\n                    <option value=\"\">None</option>\n                    {retrievalProfiles?.map((profile: { id: string; name: string }) => (\n                      <option key={profile.id} value={profile.id}>\n                        {profile.name}\n                      </option>\n                    ))}\n                  </select>\n                </FormField>\n              </div>\n              <FormField label=\"Tool Pack Dependencies\" description=\"Comma-separated\">\n                <Input\n                  value={formData.toolPackDeps}\n                  onChange={(e) => setFormData({ ...formData, toolPackDeps: e.target.value })}\n                  placeholder=\"e.g., @botlit/github-tools, @botlit/web-browser\"\n                />\n              </FormField>\n              <div className=\"flex gap-4\">\n                <label className=\"flex items-center gap-2\">\n                  <input\n                    type=\"checkbox\"\n                    checked={formData.requiresTools}\n                    onChange={(e) => setFormData({ ...formData, requiresTools: e.target.checked })}\n                    className=\"h-4 w-4\"\n                  />\n                  <span className=\"text-sm\">Requires Tools</span>\n                </label>\n                <label className=\"flex items-center gap-2\">\n                  <input\n                    type=\"checkbox\"\n                    checked={formData.requiresKnowledge}\n                    onChange={(e) =>\n                      setFormData({ ...formData, requiresKnowledge: e.target.checked })\n                    }\n                    className=\"h-4 w-4\"\n                  />\n                  <span className=\"text-sm\">Requires Knowledge</span>\n                </label>\n                <label className=\"flex items-center gap-2\">\n                  <input\n                    type=\"checkbox\"\n                    checked={formData.requiresA2A}\n                    onChange={(e) => setFormData({ ...formData, requiresA2A: e.target.checked })}\n                    className=\"h-4 w-4\"\n                  />\n                  <span className=\"text-sm\">Requires A2A</span>\n                </label>\n              </div>\n            </CardContent>\n          </Card>\n        )}\n\n        {/* Overview */}\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n          <Card treatment=\"glass\" glow>\n            <CardContent className=\"pt-6 text-center\">\n              <div className=\"p-3 rounded-full bg-action-primary-bg/10 w-fit mx-auto mb-2\">\n                <Zap className=\"h-5 w-5 text-primary\" />\n              </div>\n              <p className=\"text-lg font-bold capitalize\">{skill.visibility.toLowerCase()}</p>\n              <p className=\"text-sm text-text-secondary\">Visibility</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">{skill.toolPackDeps.length}</p>\n              <p className=\"text-sm text-text-secondary\">Tool Packs</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">\n                {skill.recommendedPolicies.length}\n              </p>\n              <p className=\"text-sm text-text-secondary\">Policies</p>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent className=\"pt-6 text-center\">\n              <p className=\"text-3xl font-bold text-text-primary\">{skill.revision}</p>\n              <p className=\"text-sm text-text-secondary\">Revision</p>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Capability Requirements */}\n        <Card>\n          <CardHeader>\n            <CardTitle>Capability Requirements</CardTitle>\n            <CardDescription>What this skill requires from agents</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"flex gap-8\">\n              <CapabilityItem\n                label=\"Tools\"\n                enabled={jsonBoolean(skill.capabilityFlags, 'requiresTools')}\n              />\n              <CapabilityItem\n                label=\"Knowledge\"\n                enabled={jsonBoolean(skill.capabilityFlags, 'requiresKnowledge')}\n              />\n              <CapabilityItem\n                label=\"A2A\"\n                enabled={jsonBoolean(skill.capabilityFlags, 'requiresA2A')}\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Components */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          {/* Prompt Template */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <FileText size={18} />\n                Prompt Template\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              {skill.promptTemplateId ? (\n                <div className=\"p-4 bg-bg-sunken rounded-lg\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"font-medium\">{skill.promptTemplateId}</span>\n                    <Link to={getPath(`prompt-templates/${skill.promptTemplateId}`)}>\n                      <Button variant=\"ghost\" size=\"sm\">\n                        <ExternalLink size={14} />\n                      </Button>\n                    </Link>\n                  </div>\n                </div>\n              ) : (\n                <p className=\"text-text-secondary\">No prompt template associated</p>\n              )}\n            </CardContent>\n          </Card>\n\n          {/* Retrieval Profile */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"flex items-center gap-2\">\n                <Database size={18} />\n                Retrieval Profile\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              {skill.retrievalProfileId ? (\n                <div className=\"p-4 bg-bg-sunken rounded-lg\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"font-medium\">{skill.retrievalProfileId}</span>\n                    <Link to={getPath(`retrieval-profiles/${skill.retrievalProfileId}`)}>\n                      <Button variant=\"ghost\" size=\"sm\">\n                        <ExternalLink size={14} />\n                      </Button>\n                    </Link>\n                  </div>\n                </div>\n              ) : (\n                <p className=\"text-text-secondary\">No retrieval profile associated</p>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Tool Pack Dependencies */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Wrench size={18} />\n              Tool Pack Dependencies\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            {skill.toolPackDeps.length > 0 ? (\n              <div className=\"flex flex-wrap gap-2\">\n                {skill.toolPackDeps.map((dep: string) => (\n                  <Badge key={dep} variant=\"secondary\" className=\"font-mono\">\n                    {dep}\n                  </Badge>\n                ))}\n              </div>\n            ) : (\n              <p className=\"text-text-secondary\">No tool pack dependencies</p>\n            )}\n          </CardContent>\n        </Card>\n\n        {/* Recommended Policies */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Shield size={18} />\n              Recommended Policies\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            {skill.recommendedPolicies.length > 0 ? (\n              <div className=\"flex flex-wrap gap-2\">\n                {skill.recommendedPolicies.map((policyId: string) => (\n                  <Badge key={policyId} variant=\"outline\">\n                    {policyId}\n                  </Badge>\n                ))}\n              </div>\n            ) : (\n              <p className=\"text-text-secondary\">No recommended policies</p>\n            )}\n          </CardContent>\n        </Card>\n\n        {/* Metadata */}\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Settings size={18} />\n              Metadata\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-6 text-sm\">\n              <div>\n                <p className=\"text-text-secondary\">Created</p>\n                <p className=\"font-medium\">{formatRelativeTime(skill.createdAt)}</p>\n              </div>\n              <div>\n                <p className=\"text-text-secondary\">Updated</p>\n                <p className=\"font-medium\">{formatRelativeTime(skill.updatedAt)}</p>\n              </div>\n              <div>\n                <p className=\"text-text-secondary\">Tags</p>\n                <div className=\"flex gap-1\">\n                  {skill.tags.length > 0 ? (\n                    skill.tags.map((tag: string) => (\n                      <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n                        {tag}\n                      </Badge>\n                    ))\n                  ) : (\n                    <span className=\"text-text-secondary\">None</span>\n                  )}\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/botlit/pages/SkillsPage.js

@@ -0,0 +1,206 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l, StatusBadge as u } from "../components/Badge.js";
+import { EmptyState as d } from "../components/EmptyState.js";
+import { Input as f } from "../components/Input.js";
+import { ErrorState as p } from "../components/ErrorState.js";
+import { useSkills as m } from "../hooks/useSkills.js";
+import "../hooks/index.js";
+import { useState as h } from "react";
+import { GlassCard as g, PagePurpose as _ } from "@burdenoff/fe-libs/ui";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Link as b } from "react-router";
+import { Database as x, FileText as S, Filter as C, Package as w, Plus as T, Search as E, Sparkles as D, Wrench as O } from "lucide-react";
+//#region src/botlit/pages/SkillsPage.tsx
+var k = () => {
+	let { getPath: k } = e(), [A, j] = h(""), { data: M, loading: N, error: P, refetch: F } = m({ search: A });
+	return /* @__PURE__ */ v(n, {
+		title: "Skills",
+		description: "Reusable skill bundles that combine prompts, tools, and knowledge",
+		actions: /* @__PURE__ */ v(c, {
+			leftIcon: /* @__PURE__ */ v(T, { size: 16 }),
+			children: /* @__PURE__ */ v(b, {
+				to: k("skills/new"),
+				children: "Create Skill"
+			})
+		}),
+		children: /* @__PURE__ */ y("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ v(_, {
+					icon: /* @__PURE__ */ v(D, { size: 18 }),
+					children: "A skill is a reusable bundle that packages a prompt template, a tool policy and a knowledge (retrieval) profile into one capability you can drop onto any agent. Build a skill once — say “Customer Support” or “Code Review” — and reuse it across agents instead of wiring the same prompt, tools and knowledge by hand each time."
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ y("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ v(E, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ v(f, {
+							placeholder: "Search skills...",
+							value: A,
+							onChange: (e) => j(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ v(c, {
+						variant: "outline",
+						leftIcon: /* @__PURE__ */ v(C, { size: 16 }),
+						children: "Filters"
+					})]
+				}),
+				N ? /* @__PURE__ */ v("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					].map((e) => /* @__PURE__ */ v("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : P ? /* @__PURE__ */ v(p, {
+					resource: "skills",
+					error: P,
+					onRetry: () => void F()
+				}) : M.length > 0 ? /* @__PURE__ */ v("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: M.map((e) => /* @__PURE__ */ v(b, {
+						to: k(`skills/${e.id}`),
+						children: /* @__PURE__ */ y(r, {
+							className: "h-full hover:border-primary/50 transition-colors cursor-pointer",
+							children: [/* @__PURE__ */ v(o, { children: /* @__PURE__ */ y("div", {
+								className: "flex items-start justify-between",
+								children: [/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ v("div", {
+										className: "p-2 bg-gradient-to-br from-primary/20 to-primary/5 rounded-lg",
+										children: /* @__PURE__ */ v(D, { className: "h-5 w-5 text-primary" })
+									}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v(s, {
+										className: "text-base",
+										children: e.name
+									}), /* @__PURE__ */ v(a, {
+										className: "text-xs line-clamp-1",
+										children: e.description
+									})] })]
+								}), /* @__PURE__ */ v(u, { status: e.status })]
+							}) }), /* @__PURE__ */ v(i, { children: /* @__PURE__ */ y("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ y("div", {
+									className: "flex flex-wrap gap-2",
+									children: [
+										e.promptTemplateId && /* @__PURE__ */ y(l, {
+											variant: "outline",
+											className: "text-xs flex items-center gap-1",
+											children: [/* @__PURE__ */ v(S, { size: 10 }), "Prompt"]
+										}),
+										e.toolPolicyId && /* @__PURE__ */ y(l, {
+											variant: "outline",
+											className: "text-xs flex items-center gap-1",
+											children: [/* @__PURE__ */ v(O, { size: 10 }), "Tools"]
+										}),
+										e.retrievalProfileId && /* @__PURE__ */ y(l, {
+											variant: "outline",
+											className: "text-xs flex items-center gap-1",
+											children: [/* @__PURE__ */ v(x, { size: 10 }), "Knowledge"]
+										})
+									]
+								}), /* @__PURE__ */ y("div", {
+									className: "pt-3 border-t border-border-subtle text-xs text-text-secondary",
+									children: ["Created ", t(e.createdAt)]
+								})]
+							}) })]
+						})
+					}, e.id))
+				}) : /* @__PURE__ */ v(d, {
+					illustration: "empty-generic",
+					title: "No skills created",
+					description: "Create reusable skill bundles to quickly configure agents with common capabilities.",
+					action: /* @__PURE__ */ v(c, {
+						leftIcon: /* @__PURE__ */ v(T, { size: 16 }),
+						children: /* @__PURE__ */ v(b, {
+							to: k("skills/new"),
+							children: "Create Skill"
+						})
+					})
+				}),
+				/* @__PURE__ */ y(g, {
+					treatment: "glass",
+					glow: !0,
+					className: "p-6",
+					children: [/* @__PURE__ */ y("div", {
+						className: "mb-4",
+						children: [/* @__PURE__ */ y("h2", {
+							className: "flex items-center gap-2 text-lg font-semibold tracking-tight text-text-primary",
+							children: [/* @__PURE__ */ v(w, { size: 18 }), "What are Skills?"]
+						}), /* @__PURE__ */ v("p", {
+							className: "text-sm text-text-secondary",
+							children: "Skills are composable bundles that encapsulate agent capabilities"
+						})]
+					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
+						className: "grid grid-cols-1 md:grid-cols-3 gap-6",
+						children: [
+							/* @__PURE__ */ y("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ y("h4", {
+									className: "font-medium flex items-center gap-2",
+									children: [/* @__PURE__ */ v(S, {
+										size: 16,
+										className: "text-primary"
+									}), "Prompt Templates"]
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
+									children: "Pre-configured system prompts with variable support for consistent agent behavior."
+								})]
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ y("h4", {
+									className: "font-medium flex items-center gap-2",
+									children: [/* @__PURE__ */ v(O, {
+										size: 16,
+										className: "text-primary"
+									}), "Tool Configurations"]
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
+									children: "Bundled MCP tool packs with policies defining allowed operations and limits."
+								})]
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ y("h4", {
+									className: "font-medium flex items-center gap-2",
+									children: [/* @__PURE__ */ v(x, {
+										size: 16,
+										className: "text-primary"
+									}), "Knowledge Bindings"]
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
+									children: "Pre-configured retrieval profiles for domain-specific knowledge access."
+								})]
+							})
+						]
+					}), /* @__PURE__ */ y("div", {
+						className: "mt-6 p-4 bg-bg-sunken rounded-lg",
+						children: [/* @__PURE__ */ v("h4", {
+							className: "font-medium mb-2",
+							children: "Use Cases"
+						}), /* @__PURE__ */ y("ul", {
+							className: "text-sm text-text-secondary space-y-1",
+							children: [
+								/* @__PURE__ */ v("li", { children: "• Create a \"Customer Support\" skill with FAQ knowledge and ticketing tools" }),
+								/* @__PURE__ */ v("li", { children: "• Build a \"Code Review\" skill with GitHub tools and coding guidelines" }),
+								/* @__PURE__ */ v("li", { children: "• Package a \"Sales Assistant\" skill with CRM tools and product catalog" })
+							]
+						})]
+					})] })]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { k as SkillsPage };
+
+//# sourceMappingURL=SkillsPage.js.map

package/dist/botlit/pages/SkillsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsPage.js","names":[],"sources":["../../../src/botlit/pages/SkillsPage.tsx"],"sourcesContent":["/**\n * Skills Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  Sparkles,\n  FileText,\n  Wrench,\n  Database,\n  Package,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport { useSkills } from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\n\nexport const SkillsPage: FC = () => {\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const { data: skills, loading, error, refetch } = useSkills({ search });\n\n  return (\n    <PageLayout\n      title=\"Skills\"\n      description=\"Reusable skill bundles that combine prompts, tools, and knowledge\"\n      actions={\n        <Button leftIcon={<Plus size={16} />}>\n          <Link to={getPath('skills/new')}>Create Skill</Link>\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Sparkles size={18} />}>\n          A skill is a reusable bundle that packages a prompt template, a tool policy and a\n          knowledge (retrieval) profile into one capability you can drop onto any agent. Build a\n          skill once — say &ldquo;Customer Support&rdquo; or &ldquo;Code Review&rdquo; — and reuse\n          it across agents instead of wiring the same prompt, tools and knowledge by hand each time.\n        </PagePurpose>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder=\"Search skills...\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            Filters\n          </Button>\n        </div>\n\n        {/* Skills List */}\n        {loading ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {[1, 2, 3, 4, 5, 6].map((i) => (\n              <div\n                key={i}\n                className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n              />\n            ))}\n          </div>\n        ) : error ? (\n          <ErrorState resource=\"skills\" error={error} onRetry={() => void refetch()} />\n        ) : skills.length > 0 ? (\n          <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {skills.map(\n              (skill: {\n                id: string;\n                name: string;\n                description?: string | null;\n                status: string;\n                promptTemplateId?: string | null;\n                toolPolicyId?: string | null;\n                retrievalProfileId?: string | null;\n                createdAt: string;\n              }) => (\n                <Link key={skill.id} to={getPath(`skills/${skill.id}`)}>\n                  <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer\">\n                    <CardHeader>\n                      <div className=\"flex items-start justify-between\">\n                        <div className=\"flex items-center gap-3\">\n                          <div className=\"p-2 bg-gradient-to-br from-primary/20 to-primary/5 rounded-lg\">\n                            <Sparkles className=\"h-5 w-5 text-primary\" />\n                          </div>\n                          <div>\n                            <CardTitle className=\"text-base\">{skill.name}</CardTitle>\n                            <CardDescription className=\"text-xs line-clamp-1\">\n                              {skill.description}\n                            </CardDescription>\n                          </div>\n                        </div>\n                        <StatusBadge status={skill.status} />\n                      </div>\n                    </CardHeader>\n                    <CardContent>\n                      <div className=\"space-y-3\">\n                        {/* Capabilities */}\n                        <div className=\"flex flex-wrap gap-2\">\n                          {skill.promptTemplateId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <FileText size={10} />\n                              Prompt\n                            </Badge>\n                          )}\n                          {skill.toolPolicyId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Wrench size={10} />\n                              Tools\n                            </Badge>\n                          )}\n                          {skill.retrievalProfileId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Database size={10} />\n                              Knowledge\n                            </Badge>\n                          )}\n                        </div>\n\n                        {/* Footer */}\n                        <div className=\"pt-3 border-t border-border-subtle text-xs text-text-secondary\">\n                          Created {formatRelativeTime(skill.createdAt)}\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                </Link>\n              )\n            )}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-generic\"\n            title=\"No skills created\"\n            description=\"Create reusable skill bundles to quickly configure agents with common capabilities.\"\n            action={\n              <Button leftIcon={<Plus size={16} />}>\n                <Link to={getPath('skills/new')}>Create Skill</Link>\n              </Button>\n            }\n          />\n        )}\n\n        {/* Skills Overview */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"flex items-center gap-2 text-lg font-semibold tracking-tight text-text-primary\">\n              <Package size={18} />\n              What are Skills?\n            </h2>\n            <p className=\"text-sm text-text-secondary\">\n              Skills are composable bundles that encapsulate agent capabilities\n            </p>\n          </div>\n          <div>\n            <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n              <div className=\"space-y-2\">\n                <h4 className=\"font-medium flex items-center gap-2\">\n                  <FileText size={16} className=\"text-primary\" />\n                  Prompt Templates\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  Pre-configured system prompts with variable support for consistent agent behavior.\n                </p>\n              </div>\n              <div className=\"space-y-2\">\n                <h4 className=\"font-medium flex items-center gap-2\">\n                  <Wrench size={16} className=\"text-primary\" />\n                  Tool Configurations\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  Bundled MCP tool packs with policies defining allowed operations and limits.\n                </p>\n              </div>\n              <div className=\"space-y-2\">\n                <h4 className=\"font-medium flex items-center gap-2\">\n                  <Database size={16} className=\"text-primary\" />\n                  Knowledge Bindings\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  Pre-configured retrieval profiles for domain-specific knowledge access.\n                </p>\n              </div>\n            </div>\n\n            <div className=\"mt-6 p-4 bg-bg-sunken rounded-lg\">\n              <h4 className=\"font-medium mb-2\">Use Cases</h4>\n              <ul className=\"text-sm text-text-secondary space-y-1\">\n                <li>• Create a \"Customer Support\" skill with FAQ knowledge and ticketing tools</li>\n                <li>• Build a \"Code Review\" skill with GitHub tools and coding guidelines</li>\n                <li>• Package a \"Sales Assistant\" skill with CRM tools and product catalog</li>\n              </ul>\n            </div>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}