skill explorer

Author: linyuan.yang

packages/admin/src/components/modals/SkillViewerModal.vue

@@ -1,91 +1,31 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { apiFetch } from '@/shared/api'
-import { useToast } from 'sbot-ui'
+import { useToast, SModal, SButton } from 'sbot-ui'
+import { FileExplorer, WebSocketTransport } from '@sbot/chat-ui'
 import { sourceBadgeStyle } from '@/utils/badges'
-import { SModal, SButton, STree, STreeNode } from 'sbot-ui'
 
 const { t } = useI18n()
 const { show } = useToast()
 
-// ── State ────────────────────────────────────────────────────────
 const visible = ref(false)
 const skillName = ref('')
 const skillBadge = ref('')
-const skillApiBase = ref('/api/skills')
-
-// ── Tree ─────────────────────────────────────────────────────────
-type TreeNode = { name: string; type: 'file' | 'dir'; path: string; children?: TreeNode[] }
-
-const tree = ref<TreeNode[]>([])
-const collapsed = ref(new Set<string>())
-
-function flattenTree(nodes: TreeNode[], depth = 0): { node: TreeNode; depth: number }[] {
-  const result: { node: TreeNode; depth: number }[] = []
-  for (const node of nodes) {
-    result.push({ node, depth })
-    if (node.type === 'dir' && !collapsed.value.has(node.path)) {
-      result.push(...flattenTree(node.children || [], depth + 1))
-    }
+const skillRootId = ref('')
+const viewerKey = ref(0)
+const transport = new WebSocketTransport()
+const initialViewState = { expandedPaths: [], selectedPath: 'SKILL.md' }
+
+function open(name: string, badge: string, rootId: string) {
+  if (!rootId) {
+    show('Missing skill file root id', 'error')
+    return
   }
-  return result
-}
-
-const flatTree = computed(() => flattenTree(tree.value))
-
-function toggleDir(p: string) {
-  if (collapsed.value.has(p)) collapsed.value.delete(p)
-  else collapsed.value.add(p)
-  collapsed.value = new Set(collapsed.value)
-}
-
-// ── File viewer ──────────────────────────────────────────────────
-const selectedPath = ref('')
-const fileContent = ref('')
-const fileLoading = ref(false)
-const treeLoading = ref(false)
-
-async function selectFile(p: string) {
-  if (selectedPath.value === p) return
-  selectedPath.value = p
-  fileLoading.value = true
-  fileContent.value = ''
-  try {
-    const res = await apiFetch(`${skillApiBase.value}/${encodeURIComponent(skillName.value)}/file?path=${encodeURIComponent(p)}`)
-    fileContent.value = res.data?.content ?? ''
-  } catch (e: any) {
-    show(e.message, 'error')
-  } finally {
-    fileLoading.value = false
-  }
-}
-
-// ── Public API ───────────────────────────────────────────────────
-async function open(name: string, badge: string, apiBase = '/api/skills') {
   skillName.value = name
   skillBadge.value = badge
-  skillApiBase.value = apiBase
-  tree.value = []
-  selectedPath.value = ''
-  fileContent.value = ''
-  collapsed.value = new Set()
-  treeLoading.value = true
+  skillRootId.value = rootId
+  viewerKey.value += 1
   visible.value = true
-
-  try {
-    const res = await apiFetch(`${apiBase}/${encodeURIComponent(name)}/tree`)
-    tree.value = res.data || []
-    // Auto-select SKILL.md
-    const skillMd = flattenTree(tree.value).find(({ node }) => node.type === 'file' && node.name === 'SKILL.md')
-    if (skillMd) {
-      selectFile(skillMd.node.path)
-    }
-  } catch (e: any) {
-    show(e.message, 'error')
-  } finally {
-    treeLoading.value = false
-  }
 }
 
 function close() {
@@ -105,36 +45,12 @@ defineExpose({ open })
     </template>
 
     <div class="skill-viewer-body">
-      <!-- Left: file tree -->
-      <STree :header="t('common.files')" class="skill-tree">
-        <div v-if="treeLoading" class="skill-tree-loading">{{ t('common.loading') }}</div>
-        <template v-else>
-          <STreeNode
-            v-for="{ node, depth } in flatTree"
-            :key="node.path"
-            :level="depth"
-            :type="node.type"
-            :selected="selectedPath === node.path"
-            :expandable="node.type === 'dir'"
-            :expanded="node.type === 'dir' && !collapsed.has(node.path)"
-            @click="node.type === 'dir' ? toggleDir(node.path) : selectFile(node.path)"
-          >
-            {{ node.name }}
-          </STreeNode>
-        </template>
-      </STree>
-
-      <!-- Right: file content -->
-      <div class="skill-content">
-        <template v-if="selectedPath">
-          <div class="skill-content-toolbar">
-            <span class="skill-file-path">{{ selectedPath }}</span>
-          </div>
-          <div v-if="fileLoading" class="skill-content-loading">{{ t('common.loading') }}</div>
-          <pre v-else class="skill-content-pre">{{ fileContent }}</pre>
-        </template>
-        <div v-else class="skill-content-empty">{{ t('skills.select_file') }}</div>
-      </div>
+      <FileExplorer
+        :key="viewerKey"
+        :transport="transport"
+        :root-id="skillRootId"
+        :view-state="initialViewState"
+      />
     </div>
 
     <template #footer>
@@ -145,78 +61,8 @@ defineExpose({ open })
 
 <style scoped>
 .skill-viewer-body {
-  display: flex;
   height: 70vh;
   overflow: hidden;
   margin: calc(-1 * var(--sui-sp-7)) calc(-1 * var(--sui-sp-8));
 }
-.skill-tree {
-  width: 210px;
-  flex-shrink: 0;
-}
-.skill-tree-loading {
-  padding: 20px;
-  text-align: center;
-  color: var(--sui-fg-disabled);
-  font-size: var(--sui-fs-md);
-}
-
-.skill-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.skill-content-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--sui-sp-3);
-  padding: var(--sui-sp-3) var(--sui-sp-4);
-  border-bottom: 1px solid var(--sui-border);
-  flex-shrink: 0;
-  background: var(--sui-bg);
-}
-.skill-file-path {
-  font-family: var(--sui-font-mono);
-  font-size: var(--sui-fs-sm);
-  color: var(--sui-fg-secondary);
-}
-.skill-content-loading {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sui-fg-disabled);
-  font-size: var(--sui-fs-md);
-}
-.skill-content-pre {
-  margin: 0;
-  padding: var(--sui-sp-4) var(--sui-sp-5);
-  font-family: var(--sui-font-mono);
-  font-size: var(--sui-fs-sm);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--sui-fg);
-  overflow: auto;
-  flex: 1;
-}
-.skill-content-empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sui-fg-disabled);
-  font-size: var(--sui-fs-md);
-}
-
-@media (max-width: 768px) {
-  .skill-viewer-body { flex-direction: column; }
-  .skill-tree {
-    width: 100%;
-    max-height: 180px;
-    border-right: none;
-    border-bottom: 1px solid var(--sui-border);
-  }
-}
 </style>

packages/admin/src/views/admin/ExplorerView.vue

@@ -9,15 +9,17 @@ const { t } = useI18n()
 
 const STORAGE_KEY = 'explorer-root-path'
 const root = ref<string>('')
+const rootId = ref<string>('')
 const picker = ref<InstanceType<typeof PathPickerModal> | null>(null)
 const transport = new WebSocketTransport()
 
 function openPicker() {
   picker.value?.open(root.value)
 }
 
-function onPicked(p: string) {
+function onPicked(p: string, id: string) {
   root.value = p
+  rootId.value = id
   localStorage.setItem(STORAGE_KEY, p)
 }
 
@@ -36,7 +38,7 @@ onMounted(() => {
       </SButton>
     </SPageToolbar>
 
-    <Explorer :transport="transport" :root="root" />
+    <Explorer :transport="transport" :root="root" :root-id="rootId" />
 
     <PathPickerModal ref="picker" @confirm="onPicked" />
   </div>

packages/admin/src/views/agents/AgentsView.vue

@@ -123,10 +123,9 @@ async function removeAgent(id: string) {
 
 const skillViewRef = ref<InstanceType<typeof SkillViewerModal>>()
 
-function openSkillView(agentId: string, name: string, isPrivate: boolean) {
-  const badge = isPrivate ? t('agents.skills_exclusive_tab') : ''
-  const apiBase = isPrivate ? `/api/agents/${encodeURIComponent(agentId)}/skills` : '/api/skills'
-  skillViewRef.value?.open(name, badge, apiBase)
+function openSkillView(skill: SkillItem, isPrivate: boolean) {
+  const badge = isPrivate ? t('agents.skills_exclusive_tab') : (skill.source || '')
+  skillViewRef.value?.open(skill.name, badge, skill.id || '')
 }
 
 const showToolsModal = ref(false)
@@ -440,7 +439,7 @@ async function saveMcpParams() {
                 </template>
                 <template #desc="{ row: s }"><span class="cell-desc">{{ s.description || '-' }}</span></template>
                 <template #ops="{ row: s }">
-                  <SButton type="outline" size="sm" @click="openSkillView(row.id, s.name, s._private)">{{ t('common.view') }}</SButton>
+                  <SButton type="outline" size="sm" @click="openSkillView(s, s._private)">{{ t('common.view') }}</SButton>
                 </template>
                 <template #_empty>
                   <div>{{ t('agents.no_skills') }}</div>

packages/admin/src/views/agents/modals/AgentSkillsModal.vue

@@ -122,10 +122,8 @@ async function saveGlobalSkills() {
 // ── View modal ────────────────────────────────────────────────────
 const skillViewRef = ref<InstanceType<typeof SkillViewerModal>>()
 
-function openView(name: string, badge = '') {
-  const isGlobal = badge !== t('agents.skills_exclusive_tab')
-  const base = isGlobal ? '/api/skills' : apiBase()
-  skillViewRef.value?.open(name, badge, base)
+function openView(row: SkillItem, badge = row.source || '') {
+  skillViewRef.value?.open(row.name, badge, row.id || '')
 }
 
 async function remove(name: string) {
@@ -222,7 +220,7 @@ defineExpose({ open })
               <span style="color:var(--sui-fg-muted);font-size:var(--sui-fs-sm)">{{ row.description || '-' }}</span>
             </template>
             <template #ops="{ row }">
-              <SButton type="outline" size="sm" @click="openView(row.name, row.source)">{{ t('common.view') }}</SButton>
+              <SButton type="outline" size="sm" @click="openView(row, row.source)">{{ t('common.view') }}</SButton>
             </template>
           </STable>
         </template>
@@ -247,7 +245,7 @@ defineExpose({ open })
             <template #description="{ row }">{{ row.description || '-' }}</template>
             <template #ops="{ row }">
               <div class="ops-cell">
-                <SButton type="outline" size="sm" @click="openView(row.name, t('agents.skills_exclusive_tab'))">{{ t('common.view') }}</SButton>
+                <SButton type="outline" size="sm" @click="openView(row, t('agents.skills_exclusive_tab'))">{{ t('common.view') }}</SButton>
                 <SButton type="danger" size="sm" @click="remove(row.name)">{{ t('common.delete') }}</SButton>
               </div>
             </template>