@burdenoff/microfe-botmanor 2026.1027.2 → 2026.1027.3

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

@@ -1 +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 { useTr } from '../../shared/hooks/useTr';\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 t = useTr();\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={t('botlit.skills.title', 'Skills')}\n      description={t(\n        'botlit.skills.description',\n        'Reusable skill bundles that combine prompts, tools, and knowledge'\n      )}\n      actions={\n        <Button leftIcon={<Plus size={16} />}>\n          <Link to={getPath('skills/new')}>\n            {t('botlit.skills.actions.createSkill', 'Create Skill')}\n          </Link>\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Sparkles size={18} />}>\n          {t(\n            'botlit.skills.purpose',\n            '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.'\n          )}\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={t('botlit.skills.searchPlaceholder', '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            {t('botlit.skills.actions.filters', '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                              {t('botlit.skills.badge.prompt', 'Prompt')}\n                            </Badge>\n                          )}\n                          {skill.toolPolicyId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Wrench size={10} />\n                              {t('botlit.skills.badge.tools', 'Tools')}\n                            </Badge>\n                          )}\n                          {skill.retrievalProfileId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Database size={10} />\n                              {t('botlit.skills.badge.knowledge', '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                          {t('botlit.botsList.createdLabel', 'Created')}{' '}\n                          {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={t('botlit.skills.empty.title', 'No skills created')}\n            description={t(\n              'botlit.skills.empty.description',\n              'Create reusable skill bundles to quickly configure agents with common capabilities.'\n            )}\n            action={\n              <Button leftIcon={<Plus size={16} />}>\n                <Link to={getPath('skills/new')}>\n                  {t('botlit.skills.actions.createSkill', 'Create Skill')}\n                </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              {t('botlit.skills.overview.title', 'What are Skills?')}\n            </h2>\n            <p className=\"text-sm text-text-secondary\">\n              {t(\n                'botlit.skills.overview.description',\n                'Skills are composable bundles that encapsulate agent capabilities'\n              )}\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                  {t('botlit.skills.overview.promptTitle', 'Prompt Templates')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.promptDescription',\n                    'Pre-configured system prompts with variable support for consistent agent behavior.'\n                  )}\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                  {t('botlit.skills.overview.toolsTitle', 'Tool Configurations')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.toolsDescription',\n                    'Bundled MCP tool packs with policies defining allowed operations and limits.'\n                  )}\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                  {t('botlit.skills.overview.knowledgeTitle', 'Knowledge Bindings')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.knowledgeDescription',\n                    'Pre-configured retrieval profiles for domain-specific knowledge access.'\n                  )}\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\">\n                {t('botlit.skills.overview.useCases.title', 'Use Cases')}\n              </h4>\n              <ul className=\"text-sm text-text-secondary space-y-1\">\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case1',\n                    'Create a \"Customer Support\" skill with FAQ knowledge and ticketing tools'\n                  )}\n                </li>\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case2',\n                    'Build a \"Code Review\" skill with GitHub tools and coding guidelines'\n                  )}\n                </li>\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case3',\n                    'Package a \"Sales Assistant\" skill with CRM tools and product catalog'\n                  )}\n                </li>\n              </ul>\n            </div>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"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 { useTr } from '../../shared/hooks/useTr';\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';\nimport { BOTMANOR_PERMISSIONS, BotmanorPermissionGate } from '../permissions';\n\nexport const SkillsPage: FC = () => {\n  const t = useTr();\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={t('botlit.skills.title', 'Skills')}\n      description={t(\n        'botlit.skills.description',\n        'Reusable skill bundles that combine prompts, tools, and knowledge'\n      )}\n      actions={\n        <BotmanorPermissionGate permission={BOTMANOR_PERMISSIONS.SKILL_CREATE}>\n          <Button leftIcon={<Plus size={16} />}>\n            <Link to={getPath('skills/new')}>\n              {t('botlit.skills.actions.createSkill', 'Create Skill')}\n            </Link>\n          </Button>\n        </BotmanorPermissionGate>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Sparkles size={18} />}>\n          {t(\n            'botlit.skills.purpose',\n            '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.'\n          )}\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={t('botlit.skills.searchPlaceholder', '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            {t('botlit.skills.actions.filters', '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                              {t('botlit.skills.badge.prompt', 'Prompt')}\n                            </Badge>\n                          )}\n                          {skill.toolPolicyId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Wrench size={10} />\n                              {t('botlit.skills.badge.tools', 'Tools')}\n                            </Badge>\n                          )}\n                          {skill.retrievalProfileId && (\n                            <Badge variant=\"outline\" className=\"text-xs flex items-center gap-1\">\n                              <Database size={10} />\n                              {t('botlit.skills.badge.knowledge', '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                          {t('botlit.botsList.createdLabel', 'Created')}{' '}\n                          {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={t('botlit.skills.empty.title', 'No skills created')}\n            description={t(\n              'botlit.skills.empty.description',\n              'Create reusable skill bundles to quickly configure agents with common capabilities.'\n            )}\n            action={\n              <BotmanorPermissionGate permission={BOTMANOR_PERMISSIONS.SKILL_CREATE}>\n                <Button leftIcon={<Plus size={16} />}>\n                  <Link to={getPath('skills/new')}>\n                    {t('botlit.skills.actions.createSkill', 'Create Skill')}\n                  </Link>\n                </Button>\n              </BotmanorPermissionGate>\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              {t('botlit.skills.overview.title', 'What are Skills?')}\n            </h2>\n            <p className=\"text-sm text-text-secondary\">\n              {t(\n                'botlit.skills.overview.description',\n                'Skills are composable bundles that encapsulate agent capabilities'\n              )}\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                  {t('botlit.skills.overview.promptTitle', 'Prompt Templates')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.promptDescription',\n                    'Pre-configured system prompts with variable support for consistent agent behavior.'\n                  )}\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                  {t('botlit.skills.overview.toolsTitle', 'Tool Configurations')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.toolsDescription',\n                    'Bundled MCP tool packs with policies defining allowed operations and limits.'\n                  )}\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                  {t('botlit.skills.overview.knowledgeTitle', 'Knowledge Bindings')}\n                </h4>\n                <p className=\"text-sm text-text-secondary\">\n                  {t(\n                    'botlit.skills.overview.knowledgeDescription',\n                    'Pre-configured retrieval profiles for domain-specific knowledge access.'\n                  )}\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\">\n                {t('botlit.skills.overview.useCases.title', 'Use Cases')}\n              </h4>\n              <ul className=\"text-sm text-text-secondary space-y-1\">\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case1',\n                    'Create a \"Customer Support\" skill with FAQ knowledge and ticketing tools'\n                  )}\n                </li>\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case2',\n                    'Build a \"Code Review\" skill with GitHub tools and coding guidelines'\n                  )}\n                </li>\n                <li>\n                  •{' '}\n                  {t(\n                    'botlit.skills.overview.useCases.case3',\n                    'Package a \"Sales Assistant\" skill with CRM tools and product catalog'\n                  )}\n                </li>\n              </ul>\n            </div>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}