sillyspec 3.26.3 → 3.26.5

package/packages/dashboard/src/components/CommandPalette.vue

@@ -1,96 +0,0 @@
-<template>
-  <n-modal :show="isOpen" @update:show="$emit('close')" :mask-closable="true" transform-origin="center" style="max-width: 480px;">
-    <div class="overflow-hidden rounded-md" style="background: #FFFFFF; border: 1px solid #E5E5EA; box-shadow: 0 25px 60px rgba(0,0,0,0.1);">
-      <!-- Search -->
-      <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-        <n-input v-model:value="searchQuery" placeholder="搜索项目或命令..." ref="searchInput" @keydown="handleKeydown" size="small">
-          <template #prefix>
-            <svg class="w-3.5 h-3.5" style="color: #6B7280;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-            </svg>
-          </template>
-        </n-input>
-      </div>
-
-      <!-- Results -->
-      <div class="max-h-72 overflow-y-auto">
-        <n-empty v-if="filteredItems.length === 0" description="无结果" style="padding: 40px 0;" />
-        <div v-else class="py-0.5">
-          <div
-            v-for="(item, index) in filteredItems"
-            :key="item.id"
-            :class="['px-4 py-2.5 cursor-pointer transition-colors duration-100 flex items-center gap-3']"
-            :style="{ background: selectedIndex === index ? 'rgba(217,119,6,0.06)' : 'transparent' }"
-            @click="selectItem(item)"
-            @mouseenter="selectedIndex = index"
-          >
-            <div class="w-6 h-6 rounded-sm flex items-center justify-center text-[10px] font-[JetBrains_Mono,monospace] flex-shrink-0" style="background: #F0F0F3; border: 1px solid #F0F0F3; color: #6B7280;">
-              {{ item.type === 'project' ? '□' : '◇' }}
-            </div>
-            <div class="flex-1 min-w-0">
-              <div class="text-[12px] font-medium truncate font-[JetBrains_Mono,monospace]" style="color: #1C1C1E;">{{ item.title }}</div>
-              <div class="text-[10px] truncate" style="color: #6B7280;">{{ item.subtitle }}</div>
-            </div>
-            <StageBadge v-if="item.status" :status="item.status" size="sm" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Footer -->
-      <div class="px-4 py-2 flex items-center gap-4 text-[9px] font-mono-log" style="border-top: 1px solid #F0F0F3; color: #D1D1D6;">
-        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">↑↓</kbd> 导航</span>
-        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">↵</kbd> 打开</span>
-        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">esc</kbd> 关闭</span>
-      </div>
-    </div>
-  </n-modal>
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue'
-import StageBadge from './StageBadge.vue'
-
-const props = defineProps({ isOpen: { type: Boolean, default: false }, projects: { type: Array, default: () => [] } })
-const emit = defineEmits(['close', 'select-project', 'select-stage'])
-
-const searchQuery = ref('')
-const searchInput = ref(null)
-const selectedIndex = ref(0)
-
-const stageNames = [
-  { id: 'scan', name: '代码扫描' },
-  { id: 'brainstorm', name: '头脑风暴' },
-  { id: 'plan', name: '规划' },
-  { id: 'execute', name: '执行' },
-  { id: 'verify', name: '验证' },
-  { id: 'archive', name: '归档' },
-  { id: 'quick', name: '快速任务' },
-  { id: 'explore', name: '自由探索' }
-]
-
-const filteredItems = computed(() => {
-  const items = []
-  for (const project of props.projects) {
-    const pm = !searchQuery.value || project.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || project.path.toLowerCase().includes(searchQuery.value.toLowerCase())
-    if (pm) items.push({ id: `project-${project.name}`, type: 'project', title: project.name, subtitle: project.path, data: project, status: getProjectStatus(project) })
-    for (const stage of stageNames) {
-      const sm = !searchQuery.value || stage.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || stage.id.toLowerCase().includes(searchQuery.value.toLowerCase())
-      if (sm || pm) items.push({ id: `stage-${project.name}-${stage.id}`, type: 'stage', title: `${project.name} / ${stage.name}`, subtitle: `Jump to ${stage.name}`, data: { project, stage: stage.id }, status: getStageStatus(project, stage.id) })
-    }
-  }
-  return items
-})
-
-function getProjectStatus(p) { const s = p.state?.progress?.stages?.[p.state?.currentStage]?.steps || []; if (s.some(x => x.status === 'failed')) return 'failed'; if (s.some(x => x.status === 'in-progress')) return 'in-progress'; if (s.every(x => x.status === 'completed')) return 'completed'; return 'pending' }
-function getStageStatus(p, id) { const s = p.state?.progress?.stages?.[id]?.steps || []; if (!s.length) return 'pending'; if (s.some(x => x.status === 'failed')) return 'failed'; if (s.some(x => x.status === 'in-progress')) return 'in-progress'; if (s.every(x => x.status === 'completed')) return 'completed'; return 'pending' }
-function close() { searchQuery.value = ''; selectedIndex.value = 0; emit('close') }
-function selectItem(item) { if (item.type === 'project') emit('select-project', item.data); else emit('select-stage', item.data); close() }
-function handleKeydown(e) {
-  if (e.key === 'ArrowDown') { e.preventDefault(); selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1) }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); selectedIndex.value = Math.max(selectedIndex.value - 1, 0) }
-  else if (e.key === 'Enter') { e.preventDefault(); if (filteredItems.value[selectedIndex.value]) selectItem(filteredItems.value[selectedIndex.value]) }
-  else if (e.key === 'Escape') { e.preventDefault(); close() }
-}
-watch(filteredItems, () => { selectedIndex.value = 0 })
-watch(() => props.isOpen, (v) => { if (v) { nextTick(() => { searchInput.value?.focus() }) } })
-</script>

package/packages/dashboard/src/components/DetailPanel.vue

@@ -1,137 +0,0 @@
-<template>
-  <div
-    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
-    style="background: #F5F5F7;"
-  >
-    <!-- Header -->
-    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #F0F0F3;">
-      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ detailType ? detailTitle : '详情' }}</h2>
-      <n-button quaternary size="tiny" @click="handleClose">
-        <template #icon>
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </template>
-      </n-button>
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto">
-      <!-- Empty state -->
-      <n-empty v-if="!activeStep && !detailType" description="选择一个步骤" style="margin: auto; padding: 48px 0;" />
-
-      <!-- Detail views -->
-      <template v-if="detailType === 'git'">
-        <GitDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'tech'">
-        <TechDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'docs'">
-        <DocsDetail :data="detailData" @open-file="$emit('open-doc-file', $event)" />
-      </template>
-
-      <!-- Step detail (original) -->
-      <div v-else-if="activeStep">
-        <!-- Title -->
-        <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #D97706;">
-            {{ activeStep.title || activeStep.name }}
-          </h3>
-          <div v-if="activeStep.status" class="mt-2">
-            <StageBadge :status="activeStep.status" />
-          </div>
-        </div>
-
-        <!-- Description -->
-        <div v-if="activeStep.description || activeStep.summary" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">描述</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #636366;">{{ activeStep.description || activeStep.summary }}</p>
-        </div>
-
-        <!-- Conclusion -->
-        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">结论</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.conclusion }}</p>
-        </div>
-
-        <!-- Decision -->
-        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">决策</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.decision }}</p>
-        </div>
-
-        <!-- User Query -->
-        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">用户提问</h4>
-          <div class="px-3 py-2 rounded-md" style="background: #F5F5F7; border: 1px solid #F0F0F3;">
-            <p class="text-[11px] italic" style="color: #636366;">"{{ activeStep.userQuery }}"</p>
-          </div>
-        </div>
-
-        <!-- Metadata -->
-        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">元信息</h4>
-          <div class="space-y-1 text-[11px]" style="color: #6B7280;">
-            <div v-if="activeStep.duration"><span style="color: #636366;">耗时：</span> {{ activeStep.duration }}</div>
-            <div v-if="activeStep.timestamp"><span style="color: #636366;">时间：</span> {{ formatTimestamp(activeStep.timestamp) }}</div>
-          </div>
-        </div>
-
-        <!-- Output -->
-        <div v-if="activeStep.output || activeStep.files" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">输出</h4>
-          <n-code v-if="activeStep.output" :code="activeStep.output" language="text" word-wrap style="max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 4px; background: #F5F5F7;" />
-          <div v-if="activeStep.files" class="mt-2 space-y-1">
-            <div v-for="(file, i) in activeStep.files" :key="i" class="flex items-center gap-2 text-[10px]" style="color: #6B7280;">
-              <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-              </svg>
-              <span class="truncate">{{ file }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Log Stream -->
-    <div class="flex-shrink-0" style="height: 200px; border-top: 1px solid #F0F0F3;">
-      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import StageBadge from './StageBadge.vue'
-import LogStream from './LogStream.vue'
-import GitDetail from './detail/GitDetail.vue'
-import TechDetail from './detail/TechDetail.vue'
-import DocsDetail from './detail/DocsDetail.vue'
-
-const props = defineProps({
-  isOpen: { type: Boolean, default: true },
-  activeStep: { type: Object, default: null },
-  logs: { type: Array, default: () => [] },
-  detailType: { type: String, default: null },
-  detailData: { type: [Object, Array], default: null }
-})
-
-const emit = defineEmits(['close', 'clear-logs', 'open-doc-file'])
-
-const detailTitle = computed(() => {
-  if (props.detailType === 'git') return 'Git 详情'
-  if (props.detailType === 'tech') return '技术栈详情'
-  if (props.detailType === 'docs') return '文档列表'
-  return '详情'
-})
-
-function handleClose() {
-  emit('close')
-}
-
-function formatTimestamp(ts) {
-  if (!ts) return ''
-  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
-}
-</script>

package/packages/dashboard/src/components/DocPreview.vue

@@ -1,257 +0,0 @@
-<template>
-  <div class="doc-preview-shell">
-    <div v-if="!content && !loading" class="doc-empty">
-      <p>选择一个文档查看内容</p>
-    </div>
-    <div v-else-if="loading" class="doc-empty">
-      <p>加载中...</p>
-    </div>
-    <template v-else>
-      <div class="doc-toolbar">
-        <div class="doc-title" :title="fileTitle">{{ fileTitle }}</div>
-        <n-button size="tiny" type="primary" @click="isModalOpen = true">弹窗阅读</n-button>
-      </div>
-      <div class="doc-preview-scroll">
-        <div class="doc-preview" v-html="renderedContent"></div>
-      </div>
-    </template>
-
-    <n-modal
-      v-model:show="isModalOpen"
-      preset="card"
-      :title="fileTitle"
-      style="width: min(920px, calc(100vw - 48px));"
-    >
-      <div class="doc-modal-body">
-        <div class="doc-preview doc-preview-large" v-html="renderedContent"></div>
-      </div>
-    </n-modal>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { marked } from 'marked'
-
-const props = defineProps({
-  content: { type: String, default: '' },
-  loading: { type: Boolean, default: false },
-  selectedFile: { type: Object, default: null }
-})
-
-const isModalOpen = ref(false)
-
-marked.setOptions({
-  breaks: true,
-  gfm: true
-})
-
-watch(() => props.selectedFile?.path, () => {
-  isModalOpen.value = false
-})
-
-const fileTitle = computed(() => {
-  return props.selectedFile?.title || props.selectedFile?.name || '文档'
-})
-
-const renderedContent = computed(() => {
-  if (!props.content) return ''
-  return marked.parse(props.content)
-})
-</script>
-
-<style scoped>
-.doc-preview-shell {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: #FFFFFF;
-}
-
-.doc-empty {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  text-align: center;
-  font-size: 12px;
-  color: #636366;
-  font-family: 'JetBrains Mono', monospace;
-}
-
-.doc-toolbar {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 14px;
-  border-bottom: 1px solid #F0F0F3;
-}
-
-.doc-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  font-weight: 600;
-  color: #1C1C1E;
-}
-
-.doc-preview-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 14px 16px 22px;
-}
-
-.doc-modal-body {
-  max-height: min(72vh, 760px);
-  overflow: auto;
-  padding-right: 4px;
-}
-
-.doc-preview {
-  font-size: 13px;
-  line-height: 1.7;
-  color: #374151;
-  overflow-wrap: anywhere;
-}
-
-.doc-preview-large {
-  font-size: 14px;
-  line-height: 1.75;
-}
-
-.doc-preview :deep(h1) {
-  color: #D97706;
-  font-size: 18px;
-  font-weight: 700;
-  margin: 0 0 16px;
-  border-bottom: 1px solid #E5E5EA;
-  padding-bottom: 8px;
-}
-
-.doc-preview-large :deep(h1) {
-  font-size: 22px;
-}
-
-.doc-preview :deep(h2) {
-  color: #1C1C1E;
-  font-size: 15px;
-  font-weight: 600;
-  margin: 20px 0 10px;
-}
-
-.doc-preview-large :deep(h2) {
-  font-size: 17px;
-}
-
-.doc-preview :deep(h3) {
-  color: #D97706;
-  font-size: 14px;
-  font-weight: 600;
-  margin: 16px 0 8px;
-}
-
-.doc-preview :deep(p) {
-  margin: 8px 0;
-}
-
-.doc-preview :deep(strong) {
-  color: #1C1C1E;
-  font-weight: 600;
-}
-
-.doc-preview :deep(a) {
-  color: #D97706;
-  text-decoration: none;
-}
-
-.doc-preview :deep(a:hover) {
-  text-decoration: underline;
-}
-
-.doc-preview :deep(code) {
-  background: #E5E5EA;
-  color: #1C1C1E;
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-size: 12px;
-  font-family: 'JetBrains Mono', monospace;
-}
-
-.doc-preview :deep(pre) {
-  background: #1C1C1E;
-  color: #E5E5E7;
-  border: 1px solid #E5E5EA;
-  border-radius: 6px;
-  padding: 12px 16px;
-  overflow-x: auto;
-  font-size: 12px;
-  margin: 8px 0;
-  line-height: 1.5;
-}
-
-.doc-preview :deep(pre code) {
-  background: none;
-  color: inherit;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-}
-
-.doc-preview :deep(ul),
-.doc-preview :deep(ol) {
-  padding-left: 20px;
-  margin: 8px 0;
-  color: #374151;
-}
-
-.doc-preview :deep(li) {
-  margin: 4px 0;
-}
-
-.doc-preview :deep(blockquote) {
-  border-left: 3px solid #D97706;
-  padding-left: 12px;
-  margin: 12px 0;
-  color: #636366;
-  font-style: italic;
-}
-
-.doc-preview :deep(table) {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 12px 0;
-  font-size: 12px;
-}
-
-.doc-preview :deep(thead th) {
-  background: #F0F0F3;
-  color: #1C1C1E;
-  font-weight: 600;
-  text-align: left;
-  padding: 8px 12px;
-  border: 1px solid #E5E5EA;
-}
-
-.doc-preview :deep(tbody td) {
-  padding: 6px 12px;
-  border: 1px solid #E5E5EA;
-  color: #374151;
-}
-
-.doc-preview :deep(tbody tr:hover) {
-  background: #F9FAFB;
-}
-
-.doc-preview :deep(hr) {
-  border: none;
-  border-top: 1px solid #E5E5EA;
-  margin: 16px 0;
-}
-</style>

package/packages/dashboard/src/components/DocTree.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="doc-tree">
-    <div class="doc-tree-search">
-      <n-input
-        v-model:value="query"
-        size="small"
-        clearable
-        placeholder="搜索文档"
-      />
-    </div>
-
-    <n-empty v-if="groups.length === 0" description="暂无文档" style="margin: auto;" />
-    <n-empty v-else-if="treeData.length === 0" description="无匹配文档" style="margin: auto;" />
-    <n-tree
-      v-else
-      class="doc-tree-list"
-      :data="treeData"
-      :selected-keys="selectedKeys"
-      :default-expand-all="true"
-      selectable
-      block-line
-      @update:selected-keys="handleSelect"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const props = defineProps({
-  groups: { type: Array, default: () => [] },
-  selectedFile: { type: Object, default: null }
-})
-
-const emit = defineEmits(['select-file'])
-const query = ref('')
-
-const selectedKeys = computed(() => {
-  return props.selectedFile?.path ? [props.selectedFile.path] : []
-})
-
-const groupIcons = {
-  design: '📋',
-  plan: '🧾',
-  archive: '📦',
-  changes: '⚙️',
-  scan: '🔍',
-  quicklog: '⚡'
-}
-
-const treeData = computed(() => {
-  const keyword = query.value.trim().toLowerCase()
-
-  return props.groups
-    .map(group => {
-      const groupLabel = group.project ? `${group.label} (${group.project})` : group.label
-      const groupMatched = !keyword || groupLabel.toLowerCase().includes(keyword)
-      const files = group.files.filter(file => {
-        if (groupMatched) return true
-        return `${file.title || ''} ${file.name || ''}`.toLowerCase().includes(keyword)
-      })
-
-      if (files.length === 0) return null
-
-      return {
-        key: `group-${group.key}`,
-        label: groupLabel,
-        prefix: () => groupIcons[group.key] || '📄',
-        children: files.map(file => ({
-          key: file.path,
-          label: file.title || file.name,
-          prefix: () => '📄',
-          data: file
-        }))
-      }
-    })
-    .filter(Boolean)
-})
-
-function handleSelect(keys, option) {
-  if (option?.[0]?.data) {
-    emit('select-file', option[0].data)
-  }
-}
-</script>
-
-<style scoped>
-.doc-tree {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: #FFFFFF;
-}
-
-.doc-tree-search {
-  flex-shrink: 0;
-  padding: 10px 12px 8px;
-  border-bottom: 1px solid #F0F0F3;
-}
-
-.doc-tree-list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 8px 12px 14px;
-}
-
-.doc-tree-list :deep(.n-tree-node-content__text) {
-  white-space: normal;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-</style>

package/packages/dashboard/src/components/HResizeHandle.vue

@@ -1,48 +0,0 @@
-<template>
-  <div
-    class="h-resize-handle"
-    :class="{ 'dragging': isDragging }"
-    @mousedown="handleMouseDown"
-  ></div>
-</template>
-
-<script setup>
-const props = defineProps({
-  isDragging: { type: Boolean, default: false },
-  colIndex: { type: Number, required: true }
-})
-
-const emit = defineEmits(['drag-start', 'drag-end', 'resize'])
-
-function handleMouseDown(e) {
-  e.preventDefault()
-  emit('drag-start', { type: 'horizontal', colIndex: props.colIndex, startX: e.clientX })
-
-  const onMove = (ev) => {
-    emit('resize', { deltaX: ev.clientX - e.clientX })
-  }
-
-  const onUp = () => {
-    emit('drag-end')
-    window.removeEventListener('mousemove', onMove)
-    window.removeEventListener('mouseup', onUp)
-  }
-
-  window.addEventListener('mousemove', onMove)
-  window.addEventListener('mouseup', onUp)
-}
-</script>
-
-<style scoped>
-.h-resize-handle {
-  width: 4px;
-  background: #E5E7EB;
-  cursor: col-resize;
-  transition: background 0.2s;
-}
-
-.h-resize-handle:hover,
-.h-resize-handle.dragging {
-  background: #D97706;
-}
-</style>