@hienlh/ppm 0.9.81 → 0.9.83

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

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <div class="mb-6">
-      <h2 class="text-3xl font-heading font-bold text-gradient">Settings</h2>
-      <p class="mt-2 text-sm text-text-secondary">Configure your marketing dashboard</p>
-    </div>
-
-    <div class="space-y-6">
-      <div class="bg-surface rounded-xl border border-border p-6">
-        <h3 class="text-lg font-heading font-semibold text-text-primary mb-4">API Configuration</h3>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm font-medium text-text-primary mb-2">
-              API Key
-            </label>
-            <div class="flex items-center space-x-2">
-              <input
-                v-model="apiKey"
-                type="password"
-                placeholder="Enter your API key"
-                class="flex-1 px-3 py-2 bg-surface-elevated text-text-primary border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-colors"
-              />
-              <button
-                @click="saveApiKey"
-                class="px-4 py-2 text-sm font-medium text-white btn-gradient rounded-lg"
-              >
-                Save
-              </button>
-            </div>
-            <p class="mt-2 text-sm text-text-secondary">
-              Required for API authentication. {{ apiKeyStatus }}
-            </p>
-          </div>
-
-          <div>
-            <label class="block text-sm font-medium text-text-primary mb-2">
-              API Base URL
-            </label>
-            <input
-              v-model="apiBase"
-              type="text"
-              class="w-full px-3 py-2 bg-surface-elevated text-text-primary border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-colors"
-            />
-            <p class="mt-2 text-sm text-text-secondary">
-              Default: http://localhost:3457/api
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface rounded-xl border border-border p-6">
-        <h3 class="text-lg font-heading font-semibold text-text-primary mb-4">Storage</h3>
-        <div class="space-y-3">
-          <div class="flex items-center justify-between py-2 border-b border-border">
-            <span class="text-sm font-medium text-text-primary">Database</span>
-            <span class="text-sm text-text-secondary">SQLite (Local)</span>
-          </div>
-          <div class="flex items-center justify-between py-2 border-b border-border">
-            <span class="text-sm font-medium text-text-primary">Assets Location</span>
-            <span class="text-sm text-text-secondary">../../../../assets</span>
-          </div>
-          <div class="flex items-center justify-between py-2">
-            <span class="text-sm font-medium text-text-primary">API Key Storage</span>
-            <span class="text-sm text-text-secondary">LocalStorage</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="bg-surface rounded-xl border border-border p-6">
-        <h3 class="text-lg font-heading font-semibold text-text-primary mb-4">About</h3>
-        <div class="space-y-2 text-sm text-text-secondary">
-          <p><strong class="text-text-primary">Version:</strong> 1.0.0</p>
-          <p><strong class="text-text-primary">Framework:</strong> Vue 3 + Vite</p>
-          <p><strong class="text-text-primary">Server:</strong> Hono + SQLite</p>
-          <p><strong class="text-text-primary">Phase:</strong> 3 - Vue Components</p>
-        </div>
-      </div>
-    </div>
-
-    <Toast v-if="toast.show" :message="toast.message" :type="toast.type" />
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import Toast from '../components/common/Toast.vue'
-
-const apiKey = ref('')
-const apiBase = ref('http://localhost:3457/api')
-const toast = ref({ show: false, message: '', type: 'success' })
-
-const apiKeyStatus = computed(() => {
-  return sessionStorage.getItem('api_key') ? 'Currently set' : 'Not set'
-})
-
-function showToast(message, type = 'success') {
-  toast.value = { show: true, message, type }
-  setTimeout(() => toast.value.show = false, 3000)
-}
-
-function saveApiKey() {
-  if (apiKey.value) {
-    sessionStorage.setItem('api_key', apiKey.value)
-    apiKey.value = ''
-    showToast('API key saved successfully')
-  }
-}
-</script>

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

@@ -1,34 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        heading: ['"Space Grotesk"', 'sans-serif'],
-        body: ['Inter', 'sans-serif'],
-      },
-      colors: {
-        // claudekit.cc coral/bronze palette
-        background: '#0E0E0E',
-        surface: '#1A1A1A',
-        'surface-elevated': '#252525',
-        primary: '#D97757',        // Coral
-        'primary-hover': '#C66747',
-        secondary: '#D4A27F',      // Bronze
-        accent: '#E8A87C',
-        border: '#2A2A2A',
-        'border-strong': '#3A3A3A',
-        foreground: '#FFFFFF',
-        'foreground-secondary': '#A0A0A0',
-        'foreground-muted': '#666666',
-        'text-primary': '#FFFFFF',
-        'text-secondary': '#A0A0A0',
-        'text-muted': '#666666',
-      },
-    },
-  },
-  plugins: [],
-}

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

@@ -1,19 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3457',
-        changeOrigin: true
-      },
-      '/static': {
-        target: 'http://localhost:3457',
-        changeOrigin: true
-      }
-    }
-  }
-})

package/.opencode/skills/marketing-dashboard/build.sh

@@ -1,43 +0,0 @@
-#!/bin/bash
-# Marketing Dashboard - Production Build Script
-# Builds Vue app and prepares for production deployment
-
-set -e  # Exit on error
-
-# Change to script directory
-cd "$(dirname "$0")"
-
-# Colors for output
-GREEN='\033[0;32m'
-BLUE='\033[0;34m'
-YELLOW='\033[1;33m'
-NC='\033[0m' # No Color
-
-echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-echo -e "${BLUE}   Marketing Dashboard - Production Build${NC}"
-echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-
-# Check if app/node_modules exist
-if [ ! -d "app/node_modules" ]; then
-  echo -e "\n${YELLOW}⚠  Installing app dependencies...${NC}"
-  cd app && npm install && cd ..
-fi
-
-# Build Vue app
-echo -e "\n${GREEN}📦 Building Vue application...${NC}"
-cd app
-npm run build
-cd ..
-
-# Build completed
-echo -e "\n${GREEN}✓ Build complete!${NC}"
-echo -e "\n${BLUE}Production files:${NC}"
-echo -e "   ${GREEN}app/dist/${NC}"
-ls -lh app/dist/ | grep -E '^-' | awk '{printf "   %-40s %s\n", $9, $5}'
-
-echo -e "\n${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-echo -e "${GREEN}🚀 To start production server:${NC}"
-echo -e "   ${YELLOW}NODE_ENV=production node server/index.js${NC}"
-echo -e "\n${GREEN}📚 Or use the start script:${NC}"
-echo -e "   ${YELLOW}./start-production.sh${NC}"
-echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}\n"

package/.opencode/skills/marketing-dashboard/server/.env.example

@@ -1,2 +0,0 @@
-# API Base URL for static assets and external URLs
-API_BASE_URL=http://localhost:3457

package/.opencode/skills/marketing-dashboard/server/__tests__/ai.test.js

@@ -1,456 +0,0 @@
-/**
- * AI API Tests
- * Claude Code CLI integration, content enhancement, and generation
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { randomBytes } from 'crypto';
-
-const generateId = () => randomBytes(6).toString('hex');
-
-describe('AI API', () => {
-  describe('GET /api/ai/status - Check Claude availability', () => {
-    it('should return status object', () => {
-      const mockAvailable = true;
-
-      const response = {
-        available: mockAvailable,
-        message: mockAvailable ? 'Claude Code ready' : 'Claude Code not found in PATH'
-      };
-
-      expect(response).toHaveProperty('available');
-      expect(response).toHaveProperty('message');
-      expect(response.message).toContain('Claude Code');
-    });
-
-    it('should indicate available when Claude found', () => {
-      const response = {
-        available: true,
-        message: 'Claude Code ready'
-      };
-
-      expect(response.available).toBe(true);
-    });
-
-    it('should indicate unavailable when Claude not found', () => {
-      const response = {
-        available: false,
-        message: 'Claude Code not found in PATH'
-      };
-
-      expect(response.available).toBe(false);
-    });
-
-    it('should handle errors gracefully', () => {
-      const errorResponse = {
-        available: false,
-        error: 'Failed to check Claude availability'
-      };
-
-      expect(errorResponse.available).toBe(false);
-      expect(errorResponse).toHaveProperty('error');
-    });
-  });
-
-  describe('POST /api/ai/enhance - Enhance content', () => {
-    it('should require content field', () => {
-      const errors = [];
-      const body = { instruction: 'Make it better' };
-
-      if (!body.content) {
-        errors.push('Content is required');
-      }
-
-      expect(errors).toContain('Content is required');
-    });
-
-    it('should require instruction field', () => {
-      const errors = [];
-      const body = { content: 'Some text' };
-
-      if (!body.instruction) {
-        errors.push('Instruction is required');
-      }
-
-      expect(errors).toContain('Instruction is required');
-    });
-
-    it('should accept valid request body', () => {
-      const body = {
-        content: 'Original content',
-        instruction: 'Improve clarity'
-      };
-
-      const errors = [];
-      if (!body.content) errors.push('Content is required');
-      if (!body.instruction) errors.push('Instruction is required');
-
-      expect(errors.length).toBe(0);
-    });
-
-    it('should accept optional filePath', () => {
-      const body = {
-        content: 'Original content',
-        instruction: 'Improve clarity',
-        filePath: '/path/to/file.md'
-      };
-
-      expect(body.filePath).toBeDefined();
-      expect(body.filePath).toMatch(/\.md$/);
-    });
-
-    it('should return enhanced content response', () => {
-      const originalContent = 'This is some text';
-      const enhancedContent = 'This is some enhanced text with improvements';
-
-      const response = {
-        success: true,
-        content: enhancedContent,
-        originalLength: originalContent.length,
-        enhancedLength: enhancedContent.length
-      };
-
-      expect(response.success).toBe(true);
-      expect(response.content).toBe(enhancedContent);
-      expect(response.originalLength).toBe(originalContent.length);
-      expect(response.enhancedLength).toBeGreaterThan(response.originalLength);
-    });
-
-    it('should handle enhancement errors', () => {
-      const errorResponse = {
-        error: 'Failed to enhance content',
-        details: 'Claude Code not available'
-      };
-
-      expect(errorResponse).toHaveProperty('error');
-      expect(errorResponse).toHaveProperty('details');
-    });
-  });
-
-  describe('POST /api/ai/generate - Generate content', () => {
-    it('should require type field', () => {
-      const errors = [];
-      const body = { description: 'Create a blog post' };
-
-      if (!body.type) {
-        errors.push('Content type is required');
-      }
-
-      expect(errors).toContain('Content type is required');
-    });
-
-    it('should require description field', () => {
-      const errors = [];
-      const body = { type: 'blog' };
-
-      if (!body.description) {
-        errors.push('Description is required');
-      }
-
-      expect(errors).toContain('Description is required');
-    });
-
-    it('should accept valid request body', () => {
-      const body = {
-        type: 'blog',
-        description: 'Write about marketing automation'
-      };
-
-      const errors = [];
-      if (!body.type) errors.push('Content type is required');
-      if (!body.description) errors.push('Description is required');
-
-      expect(errors.length).toBe(0);
-    });
-
-    it('should accept optional brandContext', () => {
-      const body = {
-        type: 'blog',
-        description: 'Write about marketing',
-        brandContext: { voice: 'professional', tone: 'friendly' }
-      };
-
-      expect(body.brandContext).toBeDefined();
-      expect(body.brandContext).toHaveProperty('voice');
-      expect(body.brandContext).toHaveProperty('tone');
-    });
-
-    it('should return generated content response', () => {
-      const generatedContent = 'Generated blog post content here...';
-
-      const response = {
-        success: true,
-        content: generatedContent,
-        type: 'blog',
-        length: generatedContent.length
-      };
-
-      expect(response.success).toBe(true);
-      expect(response.content).toBeDefined();
-      expect(response.type).toBe('blog');
-      expect(response.length).toBeGreaterThan(0);
-    });
-
-    it('should handle generation errors', () => {
-      const errorResponse = {
-        error: 'Failed to generate content',
-        details: 'Claude Code not available'
-      };
-
-      expect(errorResponse).toHaveProperty('error');
-      expect(errorResponse).toHaveProperty('details');
-    });
-
-    it('should accept various content types', () => {
-      const validTypes = ['blog', 'social', 'email', 'landing', 'other'];
-
-      validTypes.forEach(type => {
-        const body = { type, description: `Generate ${type} content` };
-        expect(body.type).toBe(type);
-      });
-    });
-  });
-
-  describe('GET /api/brand - Get brand context', () => {
-    it('should return brand context object', () => {
-      const response = {
-        exists: true,
-        summary: 'Professional B2B SaaS brand',
-        colors: { primary: '#6366f1', secondary: '#ffffff' },
-        voice: { tone: 'professional', audience: 'tech executives' },
-        fonts: { heading: 'Inter', body: 'Inter' }
-      };
-
-      expect(response).toHaveProperty('exists');
-      expect(response).toHaveProperty('summary');
-      expect(response).toHaveProperty('colors');
-      expect(response).toHaveProperty('voice');
-      expect(response).toHaveProperty('fonts');
-    });
-
-    it('should indicate when brand exists', () => {
-      const response = {
-        exists: true,
-        summary: 'Brand guidelines found'
-      };
-
-      expect(response.exists).toBe(true);
-    });
-
-    it('should indicate when brand does not exist', () => {
-      const response = {
-        exists: false,
-        summary: 'No brand guidelines found',
-        message: 'Run /marketing:init to create brand guidelines'
-      };
-
-      expect(response.exists).toBe(false);
-      expect(response.message).toContain('/marketing:init');
-    });
-
-    it('should return empty objects when no brand data', () => {
-      const response = {
-        exists: false,
-        summary: 'No brand guidelines found',
-        colors: {},
-        voice: {},
-        fonts: {}
-      };
-
-      expect(Object.keys(response.colors).length).toBe(0);
-      expect(Object.keys(response.voice).length).toBe(0);
-      expect(Object.keys(response.fonts).length).toBe(0);
-    });
-
-    it('should return populated brand data when available', () => {
-      const response = {
-        exists: true,
-        summary: 'Complete brand guidelines',
-        colors: {
-          primary: '#6366f1',
-          secondary: '#ffffff',
-          accent: '#ec4899'
-        },
-        voice: {
-          tone: 'friendly',
-          audience: 'startups',
-          values: ['innovation', 'clarity', 'accessibility']
-        },
-        fonts: {
-          heading: 'Inter Bold',
-          body: 'Inter Regular',
-          mono: 'Courier'
-        }
-      };
-
-      expect(response.colors).not.toEqual({});
-      expect(response.voice).not.toEqual({});
-      expect(response.fonts).not.toEqual({});
-      expect(Object.keys(response.colors)).toHaveLength(3);
-    });
-
-    it('should handle errors gracefully', () => {
-      const errorResponse = {
-        exists: false,
-        error: 'Failed to read brand context',
-        message: 'Run /marketing:init to create brand guidelines'
-      };
-
-      expect(errorResponse.exists).toBe(false);
-      expect(errorResponse).toHaveProperty('error');
-      expect(errorResponse).toHaveProperty('message');
-    });
-  });
-
-  describe('Content enhancement validation', () => {
-    it('should validate content length', () => {
-      const content = '';
-      const errors = [];
-
-      if (!content || content.trim().length === 0) {
-        errors.push('Content cannot be empty');
-      }
-
-      expect(errors).toContain('Content cannot be empty');
-    });
-
-    it('should accept any non-empty content', () => {
-      const validContents = [
-        'Single word',
-        'A short sentence.',
-        'A much longer piece of content with multiple sentences and paragraphs describing something in detail.',
-        '1234567890',
-        'Special chars: !@#$%^&*()'
-      ];
-
-      validContents.forEach(content => {
-        const errors = [];
-        if (!content || content.trim().length === 0) {
-          errors.push('Content cannot be empty');
-        }
-        expect(errors.length).toBe(0);
-      });
-    });
-  });
-
-  describe('Content generation validation', () => {
-    it('should validate type field', () => {
-      const validTypes = ['blog', 'social', 'email', 'landing', 'other'];
-      const invalidType = 'invalid_type';
-
-      const errors = [];
-      if (!validTypes.includes(invalidType)) {
-        errors.push('Invalid content type');
-      }
-
-      expect(errors).toContain('Invalid content type');
-    });
-
-    it('should validate description length', () => {
-      const shortDescription = 'a';
-      const errors = [];
-
-      if (shortDescription.length < 3) {
-        errors.push('Description too short');
-      }
-
-      expect(errors).toContain('Description too short');
-    });
-
-    it('should accept reasonable description lengths', () => {
-      const descriptions = [
-        'Write a blog post about marketing automation',
-        'Create social media content for a product launch announcing new features to tech executives'
-      ];
-
-      descriptions.forEach(desc => {
-        const errors = [];
-        if (desc.length < 3) {
-          errors.push('Description too short');
-        }
-        expect(errors.length).toBe(0);
-      });
-    });
-  });
-
-  describe('Brand context structure', () => {
-    it('should have consistent color format', () => {
-      const brand = {
-        colors: {
-          primary: '#6366f1',
-          secondary: '#ffffff'
-        }
-      };
-
-      Object.values(brand.colors).forEach(color => {
-        expect(color).toMatch(/^#[0-9a-f]{6}$/i);
-      });
-    });
-
-    it('should have voice properties', () => {
-      const brand = {
-        voice: {
-          tone: 'professional',
-          audience: 'tech',
-          values: ['innovation']
-        }
-      };
-
-      expect(brand.voice).toHaveProperty('tone');
-      expect(brand.voice).toHaveProperty('audience');
-    });
-
-    it('should have font properties', () => {
-      const brand = {
-        fonts: {
-          heading: 'Inter Bold',
-          body: 'Inter Regular'
-        }
-      };
-
-      expect(brand.fonts).toHaveProperty('heading');
-      expect(brand.fonts).toHaveProperty('body');
-    });
-  });
-
-  describe('Error responses', () => {
-    it('should include error message in response', () => {
-      const errorResponse = {
-        error: 'Failed to process request'
-      };
-
-      expect(errorResponse).toHaveProperty('error');
-      expect(typeof errorResponse.error).toBe('string');
-    });
-
-    it('should include optional details field', () => {
-      const errorResponse = {
-        error: 'Failed to enhance content',
-        details: 'Claude Code not available'
-      };
-
-      expect(errorResponse).toHaveProperty('error');
-      expect(errorResponse).toHaveProperty('details');
-    });
-
-    it('should return 400 for validation errors', () => {
-      // Validation error responses should have structure
-      const validationError = {
-        error: 'Validation failed',
-        errors: ['Content is required', 'Instruction is required']
-      };
-
-      expect(validationError.error).toBe('Validation failed');
-      expect(Array.isArray(validationError.errors)).toBe(true);
-    });
-
-    it('should return 500 for server errors', () => {
-      const serverError = {
-        error: 'Internal server error',
-        message: 'Database connection failed'
-      };
-
-      expect(serverError).toHaveProperty('error');
-    });
-  });
-});