bmad-studio 0.1.0 → 0.2.0

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

@@ -1,141 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,328 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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>
-  )
-}