bmad-studio 0.1.0

package/packages/client/src/features/settings/SettingsPage.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+
+import { useThemeStore } from '../../stores/ui-store.js'
+import { toggleTheme } from '../../lib/theme.js'
+import { useNotifications } from '../../layout/NotificationProvider.js'
+
+type Settings = {
+  port: number
+  theme: 'dark' | 'light'
+}
+
+export function SettingsPage() {
+  const theme = useThemeStore((s) => s.theme)
+  const setThemeState = useThemeStore((s) => s.setTheme)
+  const { notify } = useNotifications()
+  const [, setSettings] = useState<Settings>({ port: 4040, theme: 'dark' })
+  const [loading, setLoading] = useState(true)
+  const [port, setPort] = useState('4040')
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((r) => r.json())
+      .then((d) => {
+        const data = d as Settings
+        setSettings(data)
+        setPort(String(data.port ?? 4040))
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  function handleToggleTheme() {
+    const next = toggleTheme()
+    setThemeState(next)
+    setDirty(true)
+  }
+
+  function handlePortChange(value: string) {
+    setPort(value)
+    setDirty(true)
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    const portNum = parseInt(port, 10)
+    if (isNaN(portNum) || portNum < 1024 || portNum > 65535) {
+      notify('error', 'Port must be between 1024 and 65535')
+      setSaving(false)
+      return
+    }
+
+    try {
+      const resp = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ port: portNum, theme }),
+      })
+      if (resp.ok) {
+        setSettings({ port: portNum, theme })
+        setDirty(false)
+        notify('success', 'Settings saved')
+      } else {
+        notify('error', 'Failed to save settings')
+      }
+    } catch {
+      notify('error', 'Failed to save settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading)
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Settings</h1>
+        <div className="h-32 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
+      </div>
+    )
+
+  return (
+    <div className="max-w-2xl">
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-2xl font-extrabold">Settings</h1>
+        <button
+          onClick={handleSave}
+          disabled={!dirty || saving}
+          className="px-4 py-2 text-sm font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          {saving ? 'Saving...' : 'Save'}
+        </button>
+      </div>
+
+      <section className="mb-8">
+        <h2 className="text-lg font-bold mb-4">Studio</h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between p-4 rounded-lg bg-[var(--color-surface-raised)]">
+            <div>
+              <p className="text-sm font-bold">Theme</p>
+              <p className="text-xs text-[var(--color-muted)]">
+                Toggle between dark and light mode
+              </p>
+            </div>
+            <button
+              onClick={handleToggleTheme}
+              className="px-3 py-1.5 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-bg)] transition-colors"
+            >
+              {theme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
+            </button>
+          </div>
+          <div className="flex items-center justify-between p-4 rounded-lg bg-[var(--color-surface-raised)]">
+            <div>
+              <p className="text-sm font-bold">Port</p>
+              <p className="text-xs text-[var(--color-muted)]">
+                Server port (requires restart)
+              </p>
+            </div>
+            <input
+              type="number"
+              value={port}
+              onChange={(e) => handlePortChange(e.target.value)}
+              min={1024}
+              max={65535}
+              className="w-24 px-3 py-1.5 text-sm text-right rounded-md bg-[var(--color-bg)] border border-[var(--color-border-subtle)] text-[var(--color-text)] font-[var(--font-mono)] outline-none focus:border-[var(--color-accent)]"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-bold mb-4">Project</h2>
+        <div className="p-4 rounded-lg bg-[var(--color-surface-raised)]">
+          <p className="text-sm text-[var(--color-muted)]">
+            Project settings are configured via <code className="font-[var(--font-mono)]">_bmad/config.yaml</code>
+          </p>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/client/src/features/settings/use-settings.ts

@@ -0,0 +1,34 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { StudioSettings } from '@bmad-studio/shared'
+
+export function useSettings() {
+  return useQuery({
+    queryKey: ['settings'],
+    queryFn: async () => {
+      const resp = await fetch('/api/settings')
+      if (!resp.ok) throw new Error('Failed to fetch settings')
+      return resp.json() as Promise<StudioSettings>
+    },
+    staleTime: 30_000,
+  })
+}
+
+export function useSettingsMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (settings: Partial<StudioSettings>) => {
+      const resp = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      })
+      if (!resp.ok) throw new Error('Failed to save settings')
+      return resp.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] })
+    },
+  })
+}

package/packages/client/src/features/skills/CreateSkillDialog.tsx

@@ -0,0 +1,328 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Plus, X, Upload } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+
+import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
+
+type CreateSkillDialogProps = {
+  onClose: () => void
+  onCreated: () => void
+}
+
+type ModuleOption = { name: string }
+
+function generateSkillMarkdown(
+  name: string,
+  description: string,
+  bestFor: string[],
+  content: string,
+): string {
+  const lines = ['---', `name: ${name}`]
+  if (description) lines.push(`description: "${description}"`)
+  if (bestFor.length > 0) {
+    lines.push('best_for:')
+    for (const role of bestFor) {
+      lines.push(`  - ${role.trim()}`)
+    }
+  }
+  lines.push('---', '', content || '# Skill Instructions\n\n<!-- Add skill instructions here -->')
+  return lines.join('\n')
+}
+
+const KEBAB_RE = /^[a-z][a-z0-9-]*$/
+
+export function CreateSkillDialog({ onClose, onCreated }: CreateSkillDialogProps) {
+  const queryClient = useQueryClient()
+  const [tab, setTab] = useState<'create' | 'import'>('create')
+
+  // Form state
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [bestForInput, setBestForInput] = useState('')
+  const [moduleName, setModuleName] = useState('')
+  const [skillContent, setSkillContent] = useState('')
+  const [nameBlurred, setNameBlurred] = useState(false)
+
+  // Import state
+  const [importUrl, setImportUrl] = useState('')
+
+  // Shared state
+  const [modules, setModules] = useState<ModuleOption[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/modules')
+      .then((r) => r.json())
+      .then((data) => {
+        const mods = data as Array<{ name: string }>
+        setModules(mods.map((m) => ({ name: m.name })))
+        if (mods.length === 1) setModuleName(mods[0].name)
+      })
+      .catch(() => {})
+  }, [])
+
+  const nameValid = name.length === 0 || KEBAB_RE.test(name)
+  const bestFor = bestForInput
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+  const canSubmit = name.trim().length > 0 && KEBAB_RE.test(name) && moduleName.length > 0
+
+  const handleFileUpload = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      const reader = new FileReader()
+      reader.onload = () => {
+        const text = reader.result as string
+        // Try to parse frontmatter
+        const fmMatch = text.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/)
+        if (fmMatch) {
+          const fm = fmMatch[1]
+          const body = fmMatch[2]
+          const nameMatch = fm.match(/^name:\s*(.+)$/m)
+          const descMatch = fm.match(/^description:\s*"?(.+?)"?$/m)
+          const bestForMatch = fm.match(/^best_for:\s*\n((?:\s+-\s+.+\n?)*)/m)
+          if (nameMatch) setName(nameMatch[1].trim())
+          if (descMatch) setDescription(descMatch[1].trim())
+          if (bestForMatch) {
+            const roles = bestForMatch[1]
+              .split('\n')
+              .map((l) => l.replace(/^\s+-\s+/, '').trim())
+              .filter(Boolean)
+            setBestForInput(roles.join(', '))
+          }
+          setSkillContent(body.trim())
+        } else {
+          setSkillContent(text)
+        }
+        setTab('create')
+      }
+      reader.readAsText(file)
+    },
+    [],
+  )
+
+  const handleCreate = async () => {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setError(null)
+    try {
+      const markdown = generateSkillMarkdown(name.trim(), description.trim(), bestFor, skillContent)
+      const resp = await fetch(`/api/modules/${encodeURIComponent(moduleName)}/entities`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'skill',
+          name: name.trim(),
+          content: markdown,
+        }),
+      })
+      if (!resp.ok) {
+        const data = (await resp.json()) as { error?: { message?: string } }
+        throw new Error(data.error?.message ?? 'Failed to create skill')
+      }
+      await queryClient.invalidateQueries({ queryKey: ['skills'] })
+      onCreated()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create skill')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-[var(--color-bg)] border border-[var(--color-border-subtle)] rounded-lg shadow-xl w-full max-w-2xl p-6 max-h-[85vh] flex flex-col">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">New Skill</h2>
+          <button
+            onClick={onClose}
+            className="text-[var(--color-muted)] hover:text-[var(--color-text)]"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mb-4 bg-[var(--color-surface-raised)] rounded-md p-0.5 self-start">
+          <button
+            onClick={() => setTab('create')}
+            className={`px-3 py-1.5 text-sm rounded min-h-[32px] transition-colors ${
+              tab === 'create'
+                ? 'bg-[var(--color-bg)] text-[var(--color-text)] font-bold shadow-sm'
+                : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
+            }`}
+          >
+            Create
+          </button>
+          <button
+            onClick={() => setTab('import')}
+            className={`px-3 py-1.5 text-sm rounded min-h-[32px] transition-colors ${
+              tab === 'import'
+                ? 'bg-[var(--color-bg)] text-[var(--color-text)] font-bold shadow-sm'
+                : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
+            }`}
+          >
+            Import
+          </button>
+        </div>
+
+        <div className="space-y-4 overflow-y-auto flex-1 pr-1">
+          {tab === 'import' && (
+            <>
+              {/* File upload */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Upload .md file</label>
+                <label className="flex items-center justify-center gap-2 w-full px-4 py-6 border-2 border-dashed border-[var(--color-border-subtle)] rounded-lg cursor-pointer hover:border-[var(--color-accent)] transition-colors">
+                  <Upload size={16} className="text-[var(--color-muted)]" />
+                  <span className="text-sm text-[var(--color-muted)]">Click to upload or drag a .md file</span>
+                  <input
+                    type="file"
+                    accept=".md"
+                    onChange={handleFileUpload}
+                    className="hidden"
+                  />
+                </label>
+              </div>
+
+              {/* URL import */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Or paste URL</label>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={importUrl}
+                    onChange={(e) => setImportUrl(e.target.value)}
+                    placeholder="https://raw.githubusercontent.com/..."
+                    className="flex-1 px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                  />
+                  <button
+                    onClick={async () => {
+                      if (!importUrl) return
+                      try {
+                        const resp = await fetch(importUrl)
+                        if (resp.ok) {
+                          const text = await resp.text()
+                          const fakeEvent = { target: { files: [new File([text], 'import.md')] } } as unknown as React.ChangeEvent<HTMLInputElement>
+                          handleFileUpload(fakeEvent)
+                        }
+                      } catch {
+                        setError('Failed to fetch URL')
+                      }
+                    }}
+                    disabled={!importUrl}
+                    className="px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:bg-[var(--color-accent)] hover:text-white transition-colors disabled:opacity-50"
+                  >
+                    Fetch
+                  </button>
+                </div>
+              </div>
+
+              <p className="text-xs text-[var(--color-muted)]">
+                Uploading or fetching will parse the file and switch to the Create tab with fields pre-populated.
+              </p>
+            </>
+          )}
+
+          {tab === 'create' && (
+            <>
+              {/* Name */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Name</label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onBlur={() => setNameBlurred(true)}
+                  placeholder="e.g. advanced-elicitation"
+                  className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                />
+                {nameBlurred && !nameValid && (
+                  <p className="text-xs text-[var(--color-error)] mt-1">
+                    Name must be kebab-case (e.g., my-skill-name)
+                  </p>
+                )}
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Description</label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="What does this skill enable?"
+                  rows={2}
+                  className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none resize-none"
+                />
+              </div>
+
+              {/* Best for */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Best for (optional)</label>
+                <input
+                  type="text"
+                  value={bestForInput}
+                  onChange={(e) => setBestForInput(e.target.value)}
+                  placeholder="e.g. pm, analyst, architect (comma-separated)"
+                  className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                />
+              </div>
+
+              {/* Module */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Module</label>
+                <select
+                  value={moduleName}
+                  onChange={(e) => setModuleName(e.target.value)}
+                  className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                >
+                  <option value="">Select a module...</option>
+                  {modules.map((m) => (
+                    <option key={m.name} value={m.name}>
+                      {m.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Skill content editor */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Skill Content</label>
+                <div className="h-48 rounded-lg overflow-hidden border border-[var(--color-border-subtle)]">
+                  <MarkdownEditor
+                    content={skillContent}
+                    filePath="new-skill.md"
+                    onChange={setSkillContent}
+                    defaultMode="edit"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          {error && <p className="text-sm text-[var(--color-error)]">{error}</p>}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={!canSubmit || submitting}
+            className="px-4 py-2 text-sm font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          >
+            <Plus size={14} />
+            {submitting ? 'Creating...' : 'Create Skill'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/skills/SkillDetailSlideOver.tsx

@@ -0,0 +1,179 @@
+import { useState, useCallback, useMemo } from 'react'
+import { ChevronDown, ChevronRight, FileText } from 'lucide-react'
+
+import { useSkillDetail } from './use-skills.js'
+import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
+import { SlideOver } from '../../shared/SlideOver.js'
+import { FilepathLink } from '../../shared/FilepathLink.js'
+
+type SkillDetailSlideOverProps = {
+  skillId: string
+  onClose: () => void
+}
+
+function extractFileReferences(content: string): string[] {
+  const refs: string[] = []
+  // Match patterns like ./workflow.md, ./somefile.yaml, etc.
+  const regex = /(?:in|from|see|follow)\s+(?:the\s+(?:instructions\s+in\s+)?)?[`"']?(\.\/[\w./-]+)[`"']?/gi
+  let match
+  while ((match = regex.exec(content)) !== null) {
+    refs.push(match[1])
+  }
+  // Also match bare ./file.ext patterns
+  const bareRegex = /\.\/([\w-]+\.(?:md|yaml|yml|txt))/g
+  while ((match = bareRegex.exec(content)) !== null) {
+    const ref = `./${match[1]}`
+    if (!refs.includes(ref)) refs.push(ref)
+  }
+  // Clean: strip trailing periods, deduplicate
+  const cleaned = refs.map((r) => r.replace(/\.+$/, ''))
+  return [...new Set(cleaned)]
+}
+
+function ReferencedFile({
+  reference,
+  skillFilePath,
+}: {
+  reference: string
+  skillFilePath: string
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const [content, setContent] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleToggle = useCallback(async () => {
+    if (expanded) {
+      setExpanded(false)
+      return
+    }
+    setExpanded(true)
+    if (content !== null) return
+
+    setLoading(true)
+    try {
+      // Resolve relative to skill file's directory
+      const skillDir = skillFilePath.substring(0, skillFilePath.lastIndexOf('/'))
+      const bmadIndex = skillDir.indexOf('_bmad/')
+      const relDir = bmadIndex >= 0 ? skillDir.slice(bmadIndex + 6) : skillDir
+      const refFile = reference.replace('./', '')
+      const fullPath = relDir ? `${relDir}/${refFile}` : refFile
+
+      const resp = await fetch(`/api/files/${fullPath}`)
+      if (resp.ok) {
+        const data = (await resp.json()) as { content: string }
+        setContent(data.content)
+      } else {
+        setContent('Could not load file.')
+      }
+    } catch {
+      setContent('Failed to load file.')
+    } finally {
+      setLoading(false)
+    }
+  }, [expanded, content, skillFilePath, reference])
+
+  return (
+    <div className="border border-[var(--color-border-subtle)] rounded-lg overflow-hidden">
+      <button
+        onClick={handleToggle}
+        className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[var(--color-surface-raised)] transition-colors"
+      >
+        {expanded ? (
+          <ChevronDown size={14} className="text-[var(--color-muted)]" />
+        ) : (
+          <ChevronRight size={14} className="text-[var(--color-muted)]" />
+        )}
+        <FileText size={14} className="text-[var(--color-accent)]" />
+        <span className="text-xs font-[var(--font-mono)]">{reference}</span>
+      </button>
+      {expanded && (
+        <div className="border-t border-[var(--color-border-subtle)] h-48">
+          {loading ? (
+            <div className="h-full bg-[var(--color-surface-raised)] animate-pulse" />
+          ) : (
+            <MarkdownEditor
+              content={content ?? ''}
+              filePath={reference}
+              onChange={() => {}}
+              readOnly
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function SkillDetailSlideOver({ skillId, onClose }: SkillDetailSlideOverProps) {
+  const { data: skill, isLoading } = useSkillDetail(skillId)
+
+  const skillContent = skill?.content ?? ''
+  const fileReferences = useMemo(() => {
+    if (!skillContent) return []
+    return extractFileReferences(skillContent)
+  }, [skillContent])
+
+  return (
+    <SlideOver open title={skill?.name ?? 'Loading...'} onClose={onClose}>
+      {isLoading && (
+        <div className="space-y-3">
+          <div className="h-4 w-3/4 rounded bg-[var(--color-surface-raised)] animate-pulse" />
+          <div className="h-32 rounded bg-[var(--color-surface-raised)] animate-pulse" />
+        </div>
+      )}
+
+      {skill && (
+        <>
+          <div>
+            <p className="text-sm text-[var(--color-muted)]">{skill.description}</p>
+          </div>
+
+          {skill.bestFor && skill.bestFor.length > 0 && (
+            <div>
+              <h3 className="text-sm font-bold mb-2">Best for</h3>
+              <div className="flex flex-wrap gap-1">
+                {skill.bestFor.map((role) => (
+                  <span
+                    key={role}
+                    className="px-2 py-0.5 text-xs rounded-full bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]"
+                  >
+                    {role}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div>
+            <h3 className="text-sm font-bold mb-2">Content</h3>
+            <div className="h-64 rounded-lg overflow-hidden border border-[var(--color-border-subtle)]">
+              <MarkdownEditor
+                content={skill.content}
+                filePath={skill.filePath}
+                onChange={() => {}}
+                readOnly
+              />
+            </div>
+          </div>
+
+          {fileReferences.length > 0 && (
+            <div>
+              <h3 className="text-sm font-bold mb-2">Referenced Files</h3>
+              <div className="space-y-2">
+                {fileReferences.map((ref) => (
+                  <ReferencedFile
+                    key={ref}
+                    reference={ref}
+                    skillFilePath={skill.filePath}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          <FilepathLink path={skill.filePath} showIcon />
+        </>
+      )}
+    </SlideOver>
+  )
+}