sillyspec 3.8.7 → 3.9.1

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

@@ -0,0 +1,178 @@
+<template>
+  <div v-if="project" class="project-overview">
+    <!-- Name + Path -->
+    <div class="ov-section">
+      <span class="ov-name">{{ project.name }}</span>
+      <span class="ov-path">{{ shortPath }}</span>
+    </div>
+    <div class="ov-divider" />
+
+    <!-- Tech Stack -->
+    <div class="ov-section ov-clickable" @click="$emit('show-detail', 'tech')">
+      <span class="ov-label">技术栈</span>
+      <span v-for="t in overview.techStack" :key="t" class="ov-tag">{{ t }}</span>
+    </div>
+    <div class="ov-divider" />
+
+    <!-- Stage -->
+    <div v-if="project.state?.currentStage" class="ov-section">
+      <span class="ov-label">阶段</span>
+      <span class="ov-value">{{ project.state.currentStage }}</span>
+    </div>
+    <div v-else-if="project.state" class="ov-section">
+      <span class="ov-label">阶段</span>
+      <span class="ov-value" style="color:#9CA3AF;">未执行</span>
+    </div>
+    <div v-if="project.state?.currentStage" class="ov-divider" />
+
+    <!-- Last Active -->
+    <div v-if="overview.lastActive" class="ov-section">
+      <span class="ov-label">最近活跃</span>
+      <span class="ov-value">{{ formatTime(overview.lastActive) }}</span>
+    </div>
+    <div v-if="overview.lastActive" class="ov-divider" />
+
+    <!-- Doc Stats -->
+    <div v-if="overview.docStats.total > 0" class="ov-section ov-clickable" @click="$emit('show-detail', 'docs')">
+      <span class="ov-label">文档</span>
+      <span class="ov-value">{{ docSummary }}</span>
+    </div>
+    <div v-if="overview.docStats.total > 0" class="ov-divider" />
+
+    <!-- Git -->
+    <div class="ov-section ov-git ov-clickable" @click="$emit('show-detail', 'git')">
+      <span v-if="overview.git.branch" class="ov-branch">{{ overview.git.branch }}</span>
+      <span v-if="overview.git.lastCommit" class="ov-commit" :title="overview.git.lastCommit">{{ truncate(overview.git.lastCommit, 40) }}</span>
+      <span v-if="overview.git.dirtyCount > 0" class="ov-dirty">{{ overview.git.dirtyCount }} 未提交</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  project: { type: Object, default: null }
+})
+
+defineEmits(['show-detail'])
+
+const overview = computed(() => props.project?.overview || { techStack: [], lastActive: null, docStats: { design: 0, plan: 0, archive: 0, changes: 0, scan: 0, quicklog: 0, total: 0 }, git: { branch: '', lastCommit: '', dirtyCount: 0 } })
+
+const shortPath = computed(() => {
+  const p = props.project?.path || ''
+  return p.replace(/^\/Users\/[^/]+/, '~')
+})
+
+const docSummary = computed(() => {
+  const s = overview.value.docStats
+  const parts = []
+  if (s.design) parts.push(`设计 ${s.design}`)
+  if (s.plan) parts.push(`计划 ${s.plan}`)
+  if (s.archive) parts.push(`归档 ${s.archive}`)
+  if (s.changes) parts.push(`变更 ${s.changes}`)
+  return parts.join(' / ') || `${s.total} 篇`
+})
+
+function formatTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const now = new Date()
+  const diffMs = now - d
+  if (diffMs < 60000) return '刚刚'
+  if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)} 分钟前`
+  if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)} 小时前`
+  if (diffMs < 604800000) return `${Math.floor(diffMs / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+
+function truncate(s, n) {
+  return s.length > n ? s.slice(0, n) + '…' : s
+}
+</script>
+
+<style scoped>
+.project-overview {
+  display: flex;
+  align-items: center;
+  background: #FFFFFF;
+  border-bottom: 1px solid #E5E5EA;
+  padding: 8px 16px;
+  min-height: 48px;
+  gap: 8px;
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.ov-section {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ov-clickable {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  transition: background 0.15s;
+}
+.ov-clickable:hover {
+  background: rgba(217,119,6,0.06);
+}
+.ov-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: #1C1C1E;
+}
+.ov-path {
+  font-size: 11px;
+  color: #636366;
+}
+.ov-label {
+  font-size: 11px;
+  color: #636366;
+}
+.ov-value {
+  font-size: 12px;
+  color: #1C1C1E;
+  font-weight: 500;
+}
+.ov-tag {
+  font-size: 10px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: rgba(217,119,6,0.08);
+  color: #D97706;
+  font-weight: 500;
+}
+.ov-divider {
+  width: 1px;
+  height: 20px;
+  background: #E5E5EA;
+  flex-shrink: 0;
+}
+.ov-git {
+  margin-left: auto;
+  gap: 10px;
+}
+.ov-branch {
+  font-size: 11px;
+  color: #636366;
+  background: #F5F5F7;
+  padding: 1px 8px;
+  border-radius: 4px;
+}
+.ov-commit {
+  font-size: 11px;
+  color: #636366;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ov-dirty {
+  font-size: 11px;
+  color: #D97706;
+  font-weight: 500;
+}
+</style>

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

@@ -19,19 +19,19 @@ const props = defineProps({
 
 const displayLabel = computed(() => {
   if (props.label) return props.label
-  const labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error', 'pending': 'idle' }
-  return labels[props.status] || 'idle'
+  const labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error' }
+  return labels[props.status] || ''
 })
 
 const sizeClass = computed(() => props.size === 'sm' ? 'px-1.5 py-0.5' : 'px-2 py-1')
 
 const badgeStyle = computed(() => {
   const styles = {
-    'completed': { background: 'rgba(52,211,153,0.1)', color: '#34D399' },
-    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#FBBF24' },
-    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#FB923C' },
-    'failed': { background: 'rgba(239,68,68,0.1)', color: '#EF4444' },
-    'pending': { background: 'rgba(82,82,82,0.15)', color: '#525252' }
+    'completed': { background: 'rgba(22,163,74,0.1)', color: '#16A34A' },
+    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#D97706' },
+    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#EA580C' },
+    'failed': { background: 'rgba(239,68,68,0.1)', color: '#DC2626' },
+    'pending': { background: 'rgba(82,82,82,0.15)', color: '#6B7280' }
   }
   return styles[props.status] || styles.pending
 })
@@ -42,12 +42,12 @@ const dotClass = computed(() => {
 
 const dotStyle = computed(() => {
   const colors = {
-    'completed': '#34D399',
-    'in-progress': '#FBBF24',
-    'blocked': '#FB923C',
-    'failed': '#EF4444',
-    'pending': '#525252'
+    'completed': '#16A34A',
+    'in-progress': '#D97706',
+    'blocked': '#EA580C',
+    'failed': '#DC2626',
+    'pending': '#6B7280'
   }
-  return { background: colors[props.status] || '#525252' }
+  return { background: colors[props.status] || '#6B7280' }
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['group relative rounded-md cursor-pointer overflow-hidden transition-all duration-200']"
+    :class="['group relative rounded-md cursor-pointer transition-all duration-200']"
     :style="cardStyle"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
@@ -9,9 +9,9 @@
     <!-- Left accent bar -->
     <div class="absolute left-0 top-0 bottom-0 w-[2px]" :style="{ background: barColor }" />
 
-    <div class="pl-3.5 pr-3 py-2.5">
+    <div class="pl-4 pr-4 py-3">
       <div class="flex items-center gap-2">
-        <h3 class="text-[12px] font-medium transition-colors duration-150" :style="{ color: isActive ? '#FBBF24' : '#E4E4E7', fontFamily: '\'JetBrains Mono\', monospace' }">
+        <h3 class="text-[12px] font-medium transition-colors duration-150" :style="{ color: isActive ? '#D97706' : '#1C1C1E', fontFamily: '\'JetBrains Mono\', monospace' }">
           {{ step.title || step.name }}
         </h3>
         <StageBadge v-if="step.status" :status="step.status" :label="statusLabel" />
@@ -20,28 +20,28 @@
       <!-- Hover summary -->
       <div
         v-if="step.summary || step.description"
-        class="overflow-hidden transition-all duration-200"
-        :style="{ maxHeight: hovered ? '60px' : '0', opacity: hovered ? 1 : 0 }"
+        class="transition-all duration-200"
+        :style="{ maxHeight: hovered ? '80px' : '0', opacity: hovered ? 1 : 0, overflow: 'hidden' }"
       >
-        <p class="mt-1.5 text-[11px] line-clamp-2" style="color: #8B8B8E;">
+        <p class="mt-1.5 text-[11px] line-clamp-2" style="color: #636366;">
           {{ step.summary || step.description }}
         </p>
       </div>
 
       <!-- Active details -->
       <div v-if="isActive" class="mt-2 space-y-1">
-        <p v-if="step.conclusion" class="text-[11px]" style="color: #E4E4E7;">
-          <span style="color: #FBBF24; font-weight: 600;">结论:</span> {{ step.conclusion }}
+        <p v-if="step.conclusion" class="text-[11px]" style="color: #1C1C1E;">
+          <span style="color: #D97706; font-weight: 600;">结论:</span> {{ step.conclusion }}
         </p>
-        <p v-if="step.decision" class="text-[11px]" style="color: #E4E4E7;">
-          <span style="color: #FBBF24; font-weight: 600;">决策:</span> {{ step.decision }}
+        <p v-if="step.decision" class="text-[11px]" style="color: #1C1C1E;">
+          <span style="color: #D97706; font-weight: 600;">决策:</span> {{ step.decision }}
         </p>
-        <p v-if="step.userQuery" class="text-[11px] italic" style="color: #8B8B8E;">
+        <p v-if="step.userQuery" class="text-[11px] italic" style="color: #636366;">
           "{{ step.userQuery }}"
         </p>
       </div>
 
-      <div v-if="step.duration" class="mt-1 text-[10px] font-mono-log" style="color: #525252;">
+      <div v-if="step.duration" class="mt-1 text-[10px] font-mono-log" style="color: #6B7280;">
         {{ step.duration }}
       </div>
     </div>
@@ -62,13 +62,13 @@ const emit = defineEmits(['select'])
 const hovered = ref(false)
 
 const barColor = computed(() => {
-  const colors = { 'completed': '#34D399', 'in-progress': '#FBBF24', 'blocked': '#FB923C', 'failed': '#EF4444', 'pending': '#2A2A2D' }
+  const colors = { 'completed': '#16A34A', 'in-progress': '#D97706', 'blocked': '#EA580C', 'failed': '#DC2626', 'pending': '#E5E5EA' }
   return colors[props.step.status] || colors.pending
 })
 
 const cardStyle = computed(() => ({
-  background: props.isActive ? 'rgba(251,191,36,0.04)' : (hovered.value ? 'rgba(255,255,255,0.015)' : '#141416'),
-  border: `1px solid ${props.isActive ? 'rgba(251,191,36,0.2)' : '#1F1F22'}`,
+  background: props.isActive ? 'rgba(217,119,6,0.08)' : (hovered.value ? 'rgba(0,0,0,0.02)' : '#FFFFFF'),
+  border: `1px solid ${props.isActive ? 'rgba(251,191,36,0.2)' : '#F0F0F3'}`,
 }))
 
 const statusLabel = computed(() => {

package/packages/dashboard/src/components/detail/DocsDetail.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="data?.length" class="px-4 py-3">
+    <div v-for="group in data" :key="group.key" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">
+        {{ group.icon }} {{ group.label }} ({{ group.files.length }})
+      </h4>
+      <div class="space-y-1">
+        <div
+          v-for="f in group.files"
+          :key="f.path"
+          class="flex items-center gap-2 px-2 py-1.5 rounded text-[11px] cursor-pointer hover:bg-[#FEF3C7] transition-colors"
+          @click="$emit('open-file', f)"
+        >
+          <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="#9CA3AF" 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" style="color: #1C1C1E;">{{ f.name }}</span>
+          <span class="ml-auto flex-shrink-0 font-mono text-[10px]" style="color: #9CA3AF;">{{ formatSize(f.size) }}</span>
+          <span class="flex-shrink-0 text-[10px]" style="color: #9CA3AF;">{{ relativeTime(f.mtime) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无文档" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+defineProps({ data: { type: Array, default: () => [] } })
+defineEmits(['open-file'])
+
+function formatSize(bytes) {
+  if (!bytes) return '—'
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / 1048576).toFixed(1) + ' MB'
+}
+
+function relativeTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const diff = Date.now() - d.getTime()
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+</script>

package/packages/dashboard/src/components/detail/GitDetail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="data" class="px-4 py-3">
+    <!-- Branch -->
+    <div class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">当前分支</h4>
+      <div class="text-[18px] font-bold font-[JetBrains_Mono,monospace]" style="color: #D97706;">{{ data.branch || '—' }}</div>
+    </div>
+
+    <!-- Commits -->
+    <div v-if="data.commits?.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">最近提交</h4>
+      <div class="space-y-2">
+        <div v-for="c in data.commits" :key="c.hash" class="px-3 py-2 rounded-md" style="background: #F5F5F7;">
+          <div class="flex items-center gap-2">
+            <span class="text-[11px] font-mono font-semibold" style="color: #D97706;">{{ c.hash }}</span>
+            <span class="text-[11px] flex-1 truncate" style="color: #1C1C1E;">{{ c.message }}</span>
+          </div>
+          <div class="flex items-center gap-2 mt-1 text-[10px]" style="color: #6B7280;">
+            <span>{{ c.author }}</span>
+            <span>·</span>
+            <span>{{ relativeTime(c.date) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Untracked -->
+    <div v-if="data.untracked?.length">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">未提交文件</h4>
+      <div class="space-y-1">
+        <div v-for="f in data.untracked" :key="f.file" class="flex items-center gap-2 px-2 py-1 rounded text-[11px] font-[JetBrains_Mono,monospace]">
+          <span class="font-semibold w-5 text-center" :style="{ color: statusColor(f.status) }">{{ f.status }}</span>
+          <span class="truncate" style="color: #1C1C1E;">{{ f.file }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无 Git 信息" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+defineProps({ data: { type: Object, default: null } })
+
+function statusColor(s) {
+  if (s.includes('M')) return '#F59E0B'
+  if (s.includes('A') || s === '?') return '#10B981'
+  if (s.includes('D')) return '#EF4444'
+  return '#9CA3AF'
+}
+
+function relativeTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const diff = Date.now() - d.getTime()
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+</script>

package/packages/dashboard/src/components/detail/TechDetail.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-if="data" class="px-4 py-3">
+    <!-- Frameworks -->
+    <div v-if="data.frameworks?.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">识别框架</h4>
+      <div class="flex flex-wrap gap-2">
+        <n-tag v-for="f in data.frameworks" :key="f" type="warning" size="small" round>{{ f }}</n-tag>
+      </div>
+    </div>
+
+    <!-- Dependencies -->
+    <div v-if="depEntries.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">dependencies ({{ depEntries.length }})</h4>
+      <div class="space-y-1">
+        <div v-for="[name, ver] in depEntries" :key="name" class="flex items-center gap-2 px-2 py-1 rounded text-[11px]" style="background: #F5F5F7;">
+          <span class="font-mono font-medium truncate" style="color: #1C1C1E;">{{ name }}</span>
+          <span class="font-mono ml-auto flex-shrink-0" style="color: #9CA3AF;">{{ ver }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Dev Dependencies -->
+    <div v-if="devDepEntries.length">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">devDependencies ({{ devDepEntries.length }})</h4>
+      <div class="space-y-1">
+        <div v-for="[name, ver] in devDepEntries" :key="name" class="flex items-center gap-2 px-2 py-1 rounded text-[11px]" style="background: #F5F5F7;">
+          <span class="font-mono font-medium truncate" style="color: #1C1C1E;">{{ name }}</span>
+          <span class="font-mono ml-auto flex-shrink-0" style="color: #9CA3AF;">{{ ver }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无依赖信息" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({ data: { type: Object, default: null } })
+
+const depEntries = computed(() => props.data ? Object.entries(props.data.dependencies || {}) : [])
+const devDepEntries = computed(() => props.data ? Object.entries(props.data.devDependencies || {}) : [])
+</script>

package/packages/dashboard/src/composables/useDashboard.js

@@ -13,7 +13,12 @@ export function useDashboard() {
     logs: [],
     isPanelOpen: true,
     executingProject: null,
-    isLoading: true
+    isLoading: true,
+    activeTab: 'pipeline',
+    docs: { groups: [] },
+    selectedDocFile: null,
+    docContent: '',
+    docLoading: false
   })
 
   /**
@@ -21,13 +26,13 @@ export function useDashboard() {
    * @param {string} name - Project name
    * @returns {object|null} Project or null
    */
-  function getProject(name) {
-    return state.projects.find(p => p.name === name) || null
+  function getProject(path) {
+    return state.projects.find(p => p.path === path) || null
   }
 
   /**
    * Select a project as active
-   * @param {object|string} project - Project object or name
+   * @param {object|string} project - Project object or path
    */
   function selectProject(project) {
     const proj = typeof project === 'string'
@@ -38,6 +43,8 @@ export function useDashboard() {
       state.activeProject = proj
       state.activeStep = null
       state.logs = []
+      state.selectedDocFile = null
+      state.docContent = ''
 
       // Load initial logs from project state if available
       if (proj.state?.progress?.currentLogs) {
@@ -115,7 +122,7 @@ export function useDashboard() {
 
     // Restore active project if it still exists
     if (state.activeProject) {
-      const updated = getProject(state.activeProject.name)
+      const updated = getProject(state.activeProject.path)
       if (updated) {
         state.activeProject = updated
       }
@@ -141,6 +148,7 @@ export function useDashboard() {
 
   // Computed properties
   const activeProjectName = computed(() => state.activeProject?.name || null)
+  const activeProjectPath = computed(() => state.activeProject?.path || null)
   const activeProjectStage = computed(() => state.activeProject?.state?.currentStage || null)
   const hasProjects = computed(() => state.projects.length > 0)
   const activeProjectSteps = computed(() => {
@@ -164,8 +172,14 @@ export function useDashboard() {
     setExecuting,
     isExecuting,
     activeProjectName,
+    activeProjectPath,
     activeProjectStage,
     hasProjects,
-    activeProjectSteps
+    activeProjectSteps,
+  setActiveTab(tab) { state.activeTab = tab },
+  updateDocs(docs) { state.docs = docs },
+  selectDocFile(file) { state.selectedDocFile = file },
+  setDocContent(content) { state.docContent = content },
+  setDocLoading(loading) { state.docLoading = loading }
   }
 }

package/packages/dashboard/src/composables/useKeyboard.js

@@ -14,15 +14,17 @@ export function useKeyboard(options = {}) {
     onEnter = null,
     onArrowUp = null,
     onArrowDown = null,
-    disabled = false
+    disabled: initialDisabled = false
   } = options
 
+  let isDisabled = initialDisabled
+
   /**
    * Handle keyboard events
    * @param {KeyboardEvent} event
    */
   function handleKeyDown(event) {
-    if (disabled) return
+    if (isDisabled) return
 
     // Ignore if in input field
     const target = event.target
@@ -87,8 +89,8 @@ export function useKeyboard(options = {}) {
   })
 
   return {
-    disable: () => { disabled = true },
-    enable: () => { disabled = false }
+    disable: () => { isDisabled = true },
+    enable: () => { isDisabled = false }
   }
 }
 

package/packages/dashboard/src/main.js

@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
+import naive from 'naive-ui'
 import App from './App.vue'
 import './style.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(naive)
+app.mount('#app')

package/packages/dashboard/src/style.css

@@ -1,20 +1,20 @@
 @import "tailwindcss";
 
 @theme {
-  --color-bg: #0A0A0B;
-  --color-primary: #FBBF24;
-  --color-primary-dim: #B45309;
-  --color-warning: #FB923C;
-  --color-danger: #EF4444;
-  --color-muted: #525252;
-  --color-surface: #141416;
-  --color-surface-2: #1C1C1F;
-  --color-border: #2A2A2D;
-  --color-border-light: #3A3A3D;
-  --color-text: #E4E4E7;
-  --color-text-secondary: #8B8B8E;
-  --color-info: #38BDF8;
-  --color-success: #34D399;
+  --color-bg: #F5F5F7;
+  --color-primary: #D97706;
+  --color-primary-dim: #92400E;
+  --color-warning: #EA580C;
+  --color-danger: #DC2626;
+  --color-muted: #6B7280;
+  --color-surface: #FFFFFF;
+  --color-surface-2: #F0F0F3;
+  --color-border: #E5E5EA;
+  --color-border-light: #D1D1D6;
+  --color-text: #1C1C1E;
+  --color-text-secondary: #636366;
+  --color-info: #2563EB;
+  --color-success: #16A34A;
 
   --font-display: 'JetBrains Mono', monospace;
   --font-body: 'DM Sans', sans-serif;
@@ -96,7 +96,7 @@
 
 /* Skeleton shimmer */
 .skeleton-shimmer {
-  background: linear-gradient(90deg, #1C1C1F 25%, #2A2A2D 50%, #1C1C1F 75%);
+  background: linear-gradient(90deg, #1A1E28 25%, #2A3040 50%, #1A1E28 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
 }
@@ -112,12 +112,12 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #2A2A2D;
+  background: #2A3040;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #3A3A3D;
+  background: #3A4555;
 }
 
 * {