@hienlh/ppm 0.9.80 → 0.9.81

package/.opencode/skills/marketing-dashboard/app/src/components/layout/AppSidebar.vue

@@ -0,0 +1,103 @@
+<template>
+  <aside
+    class="bg-surface border-r border-border flex flex-col transition-all duration-300 ease-in-out"
+    :class="collapsed ? 'w-16' : 'w-64'"
+  >
+    <!-- Logo Section -->
+    <div class="px-3 py-4 border-b border-border flex items-center" :class="collapsed ? 'justify-center' : 'justify-between'">
+      <div class="flex items-center" :class="collapsed ? '' : 'space-x-3'">
+        <img src="/ck-logo.png" alt="ClaudeKit" class="w-8 h-8 flex-shrink-0" />
+        <h1 v-if="!collapsed" class="text-lg font-heading font-bold text-gradient whitespace-nowrap">ClaudeKit</h1>
+      </div>
+      <button
+        v-if="!collapsed"
+        @click="toggleSidebar"
+        class="p-1.5 rounded-md hover:bg-surface-elevated transition-colors text-text-secondary hover:text-text-primary"
+        title="Collapse sidebar"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Expand button when collapsed -->
+    <button
+      v-if="collapsed"
+      @click="toggleSidebar"
+      class="mx-auto mt-2 p-1.5 rounded-md hover:bg-surface-elevated transition-colors text-text-secondary hover:text-text-primary"
+      title="Expand sidebar"
+    >
+      <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+      </svg>
+    </button>
+
+    <nav class="flex-1 px-2 py-4 space-y-1">
+      <RouterLink
+        to="/"
+        class="flex items-center py-3 text-sm font-medium rounded-lg transition-colors"
+        :class="[
+          isActive('/') ? 'bg-secondary/10 text-secondary' : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary',
+          collapsed ? 'justify-center px-2' : 'px-4'
+        ]"
+        :title="collapsed ? 'Assets' : ''"
+      >
+        <svg class="w-5 h-5 flex-shrink-0" :class="collapsed ? '' : 'mr-3'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+        <span v-if="!collapsed" class="whitespace-nowrap">Assets</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/brand"
+        class="flex items-center py-3 text-sm font-medium rounded-lg transition-colors"
+        :class="[
+          isActive('/brand') ? 'bg-secondary/10 text-secondary' : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary',
+          collapsed ? 'justify-center px-2' : 'px-4'
+        ]"
+        :title="collapsed ? 'Brand' : ''"
+      >
+        <svg class="w-5 h-5 flex-shrink-0" :class="collapsed ? '' : 'mr-3'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+        </svg>
+        <span v-if="!collapsed" class="whitespace-nowrap">Brand</span>
+      </RouterLink>
+
+      <RouterLink
+        to="/settings"
+        class="flex items-center py-3 text-sm font-medium rounded-lg transition-colors"
+        :class="[
+          isActive('/settings') ? 'bg-secondary/10 text-secondary' : 'text-text-secondary hover:bg-surface-elevated hover:text-text-primary',
+          collapsed ? 'justify-center px-2' : 'px-4'
+        ]"
+        :title="collapsed ? 'Settings' : ''"
+      >
+        <svg class="w-5 h-5 flex-shrink-0" :class="collapsed ? '' : 'mr-3'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+        <span v-if="!collapsed" class="whitespace-nowrap">Settings</span>
+      </RouterLink>
+    </nav>
+  </aside>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const STORAGE_KEY = 'sidebar-collapsed'
+
+const route = useRoute()
+const collapsed = ref(localStorage.getItem(STORAGE_KEY) === 'true')
+
+function isActive(path) {
+  return route.path === path
+}
+
+function toggleSidebar() {
+  collapsed.value = !collapsed.value
+  localStorage.setItem(STORAGE_KEY, collapsed.value.toString())
+}
+</script>

package/.opencode/skills/marketing-dashboard/app/src/config.js

@@ -0,0 +1 @@
+export const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3457/api'

package/.opencode/skills/marketing-dashboard/app/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import './style.css'
+import App from './App.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.mount('#app')

package/.opencode/skills/marketing-dashboard/app/src/router/index.js

@@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import AssetsView from '../views/AssetsView.vue'
+import SettingsView from '../views/SettingsView.vue'
+import BrandView from '../views/BrandView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'assets',
+    component: AssetsView
+  },
+  {
+    path: '/assets',
+    redirect: '/'
+  },
+  {
+    path: '/brand',
+    name: 'brand',
+    component: BrandView
+  },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: SettingsView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/.opencode/skills/marketing-dashboard/app/src/stores/assets.js

@@ -0,0 +1,108 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { API_BASE } from '../config'
+
+export const useAssetsStore = defineStore('assets', () => {
+  const assets = ref([])
+  const selectedAsset = ref(null)
+  const loading = ref(false)
+  const error = ref(null)
+  const categoryFilter = ref(null)
+
+  const filteredAssets = computed(() => {
+    if (!categoryFilter.value) return assets.value
+    return assets.value.filter(a => a.category === categoryFilter.value)
+  })
+
+  const categories = computed(() => {
+    const cats = new Set(assets.value.map(a => a.category).filter(Boolean))
+    return Array.from(cats).sort()
+  })
+
+  async function fetchAssets() {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await fetch(`${API_BASE}/assets`, {
+        headers: { 'X-API-Key': sessionStorage.getItem('api_key') || '' }
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json()
+      assets.value = data.assets || []
+    } catch (e) {
+      error.value = e.message
+      console.error('Failed to fetch assets:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function scanAssets() {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await fetch(`${API_BASE}/assets/scan`, {
+        method: 'POST',
+        headers: { 'X-API-Key': sessionStorage.getItem('api_key') || '' }
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json()
+      await fetchAssets() // Refresh list after scan
+      return data
+    } catch (e) {
+      error.value = e.message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updateAsset(id, updates) {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await fetch(`${API_BASE}/assets/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': sessionStorage.getItem('api_key') || ''
+        },
+        body: JSON.stringify(updates)
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json()
+      const index = assets.value.findIndex(a => a.id === id)
+      if (index !== -1) assets.value[index] = data.asset
+      if (selectedAsset.value?.id === id) selectedAsset.value = data.asset
+      return data.asset
+    } catch (e) {
+      error.value = e.message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function selectAsset(asset) {
+    selectedAsset.value = asset
+  }
+
+  function setCategoryFilter(category) {
+    categoryFilter.value = category
+  }
+
+  return {
+    assets,
+    selectedAsset,
+    loading,
+    error,
+    categoryFilter,
+    filteredAssets,
+    categories,
+    fetchAssets,
+    scanAssets,
+    updateAsset,
+    selectAsset,
+    setCategoryFilter
+  }
+})

package/.opencode/skills/marketing-dashboard/app/src/stores/brand.js

@@ -0,0 +1,94 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:3457'
+
+export const useBrandStore = defineStore('brand', () => {
+  const tokens = ref(null)
+  const voice = ref(null)
+  const logos = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchTokens() {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await fetch(`${API_BASE}/api/brand/tokens`)
+      if (!res.ok) throw new Error('Failed to fetch tokens')
+      tokens.value = await res.json()
+    } catch (e) {
+      error.value = e.message
+      console.error('Error fetching tokens:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchVoice() {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await fetch(`${API_BASE}/api/brand/voice`)
+      if (!res.ok) throw new Error('Brand guidelines not found')
+      voice.value = await res.json()
+    } catch (e) {
+      error.value = e.message
+      console.error('Error fetching voice:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchLogos() {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await fetch(`${API_BASE}/api/brand/logos`)
+      if (!res.ok) throw new Error('Failed to fetch logos')
+      logos.value = await res.json()
+    } catch (e) {
+      error.value = e.message
+      console.error('Error fetching logos:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function uploadLogo(file) {
+    loading.value = true
+    error.value = null
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      const res = await fetch(`${API_BASE}/api/brand/logos`, {
+        method: 'POST',
+        body: formData
+      })
+      if (!res.ok) throw new Error('Upload failed')
+      await fetchLogos()
+    } catch (e) {
+      error.value = e.message
+      console.error('Error uploading logo:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchAll() {
+    await Promise.all([fetchTokens(), fetchVoice(), fetchLogos()])
+  }
+
+  return {
+    tokens,
+    voice,
+    logos,
+    loading,
+    error,
+    fetchTokens,
+    fetchVoice,
+    fetchLogos,
+    uploadLogo,
+    fetchAll
+  }
+})

package/.opencode/skills/marketing-dashboard/app/src/style.css

@@ -0,0 +1,72 @@
+@import "tailwindcss";
+
+/* Import fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+/* ClaudeKit.cc Theme - Coral/Bronze Palette */
+@theme {
+  /* Core Colors - matches claudekit.cc */
+  --color-background: #0E0E0E;
+  --color-surface: #1A1A1A;
+  --color-surface-elevated: #252525;
+  --color-primary: #D97757;       /* Coral accent */
+  --color-secondary: #D4A27F;     /* Bronze accent */
+  --color-accent: #E8A87C;        /* Gold/bronze */
+  --color-border: #2A2A2A;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #A0A0A0;
+  --color-text-muted: #666666;
+}
+
+:root {
+  font-family: 'Inter', sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: dark;
+  color: #FFFFFF;
+  background-color: #0E0E0E;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: #0E0E0E;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+/* Gradient Text Utility - Coral to Bronze */
+.text-gradient {
+  background: linear-gradient(135deg, #D97757 0%, #D4A27F 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card Hover Glow Effect - Coral glow */
+.card-glow {
+  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
+}
+
+.card-glow:hover {
+  box-shadow: 0 0 20px rgba(217, 119, 87, 0.2);
+  border-color: #D97757 !important;
+  transform: translateY(-2px);
+}
+
+/* Primary Gradient Button - Coral to Bronze */
+.btn-gradient {
+  background: linear-gradient(135deg, #D97757 0%, #D4A27F 100%);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.btn-gradient:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.4);
+}

package/.opencode/skills/marketing-dashboard/app/src/views/AssetsView.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h2 class="text-3xl font-heading font-bold text-gradient">Asset Gallery</h2>
+        <p class="mt-2 text-sm text-text-secondary">Browse and manage your marketing assets</p>
+      </div>
+      <button
+        @click="handleScan"
+        :disabled="assetsStore.loading"
+        class="px-4 py-2 text-sm font-medium text-white btn-gradient rounded-lg disabled:opacity-50"
+      >
+        {{ assetsStore.loading ? 'Scanning...' : 'Scan Assets' }}
+      </button>
+    </div>
+
+    <LoadingSpinner v-if="assetsStore.loading" class="mt-12" />
+    <div v-else-if="assetsStore.error" class="bg-red-900/20 border border-red-700 rounded-xl p-4 text-red-400">
+      Error: {{ assetsStore.error }}
+    </div>
+    <AssetGrid v-else :folder="currentFolder" @view="handleView" @navigate="handleNavigate" />
+
+    <AssetPreview
+      v-if="previewAsset"
+      :asset="previewAsset"
+      :all-assets="assetsStore.assets"
+      @close="handleClose"
+      @select="handleView"
+    />
+
+    <Toast v-if="toast.show" :message="toast.message" :type="toast.type" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAssetsStore } from '../stores/assets'
+import AssetGrid from '../components/assets/AssetGrid.vue'
+import AssetPreview from '../components/assets/AssetPreview.vue'
+import Toast from '../components/common/Toast.vue'
+import LoadingSpinner from '../components/common/LoadingSpinner.vue'
+
+const route = useRoute()
+const router = useRouter()
+const assetsStore = useAssetsStore()
+
+const previewAsset = ref(null)
+const currentFolder = ref('')
+const toast = ref({ show: false, message: '', type: 'success' })
+
+function showToast(message, type = 'success') {
+  toast.value = { show: true, message, type }
+  setTimeout(() => toast.value.show = false, 3000)
+}
+
+function handleNavigate(folder) {
+  currentFolder.value = folder
+  // Update URL with folder query param, preserve asset if any
+  updateUrlParams()
+}
+
+function handleView(asset) {
+  previewAsset.value = asset
+  // Update URL with asset ID query param
+  updateUrlParams()
+}
+
+function handleClose() {
+  previewAsset.value = null
+  // Remove asset param, keep folder
+  updateUrlParams()
+}
+
+function updateUrlParams() {
+  const query = {}
+  if (currentFolder.value) query.folder = currentFolder.value
+  if (previewAsset.value) query.asset = previewAsset.value.id
+  router.replace({ query })
+}
+
+async function handleScan() {
+  try {
+    const result = await assetsStore.scanAssets()
+    showToast(`Scanned ${result.scanned} assets: ${result.inserted} new, ${result.updated} updated`)
+  } catch (e) {
+    showToast('Failed to scan assets', 'error')
+  }
+}
+
+// Restore folder and asset from URL query params after assets load
+watch(() => assetsStore.assets, (assets) => {
+  if (assets.length) {
+    // Restore folder from URL
+    if (route.query.folder && !currentFolder.value) {
+      currentFolder.value = route.query.folder
+    }
+    // Restore asset preview from URL
+    if (route.query.asset && !previewAsset.value) {
+      const asset = assets.find(a => a.id === route.query.asset)
+      if (asset) previewAsset.value = asset
+    }
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  assetsStore.fetchAssets()
+})
+</script>

package/.opencode/skills/marketing-dashboard/app/src/views/BrandView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="p-8 space-y-8">
+    <!-- Header -->
+    <div>
+      <h1 class="text-3xl font-heading font-bold text-gradient mb-2">Brand Center</h1>
+      <p class="text-text-secondary">
+        Visual design system and brand guidelines for your marketing assets
+      </p>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="brandStore.loading && !brandStore.tokens" class="text-center py-12">
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-secondary"></div>
+      <p class="text-text-secondary mt-4">Loading brand assets...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="brandStore.error && !brandStore.tokens" class="text-center py-12">
+      <p class="text-warning">Failed to load brand data: {{ brandStore.error }}</p>
+    </div>
+
+    <!-- Brand Grid -->
+    <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Color Palette -->
+      <ColorPalette :tokens="brandStore.tokens" />
+
+      <!-- Typography -->
+      <TypographyPreview :tokens="brandStore.tokens" />
+
+      <!-- Spacing Scale -->
+      <SpacingScale :tokens="brandStore.tokens" />
+
+      <!-- Component Showcase -->
+      <ComponentShowcase :tokens="brandStore.tokens" />
+
+      <!-- Logo Gallery -->
+      <LogoGallery
+        :logos="brandStore.logos"
+        :loading="brandStore.loading"
+        @upload="handleLogoUpload"
+      />
+
+      <!-- Voice Summary -->
+      <VoiceSummary
+        :voice="brandStore.voice"
+        :loading="brandStore.loading"
+        :error="brandStore.error"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useBrandStore } from '../stores/brand'
+
+import ColorPalette from '../components/brand/ColorPalette.vue'
+import TypographyPreview from '../components/brand/TypographyPreview.vue'
+import SpacingScale from '../components/brand/SpacingScale.vue'
+import ComponentShowcase from '../components/brand/ComponentShowcase.vue'
+import LogoGallery from '../components/brand/LogoGallery.vue'
+import VoiceSummary from '../components/brand/VoiceSummary.vue'
+
+const brandStore = useBrandStore()
+
+onMounted(async () => {
+  await brandStore.fetchAll()
+})
+
+function handleLogoUpload(file) {
+  brandStore.uploadLogo(file)
+}
+</script>
+
+<style scoped>
+.text-gradient {
+  background: linear-gradient(135deg, #3B82F6 0%, #14B8A6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+</style>