@hienlh/ppm 0.9.79 → 0.9.81

package/.opencode/skills/marketing-dashboard/README.md

@@ -0,0 +1,363 @@
+# Marketing Dashboard
+
+Full-stack web application for marketing campaign management, content creation, and AI-powered automation.
+
+## Features
+
+### 📊 Campaign Management
+- **Kanban Board**: Drag-and-drop campaign status management (Draft → Active → Completed)
+- **List View**: Traditional campaign list with filters
+- **Campaign Details**: Track goals, dates, brand context, and linked content
+- **Content Linking**: Associate content items with campaigns
+
+### 📝 Content Library
+- **Grid View**: Visual content organization with type badges
+- **Filters**: Filter by type, campaign, status
+- **AI Enhancement**: Improve content with Claude integration
+- **Export**: Save content as markdown files with YAML frontmatter
+
+### 🎨 Asset Gallery
+- **Visual Grid**: Browse all marketing assets
+- **Campaign Linking**: Associate assets with campaigns
+- **File Scanner**: Automatically discover assets in filesystem
+- **Preview**: View assets in modal overlay
+
+### 🤖 Automation Panel
+- **Blog Post Generator**: Topic-based blog creation
+- **Social Media Pack**: Multi-platform social content
+- **Campaign Brief**: Strategic campaign documents
+- **SEO Audit**: Technical SEO analysis
+
+### 📈 Dashboard
+- **Metrics**: Campaign count, active campaigns, content count
+- **Recent Content**: Last 5 created items
+- **Quick Actions**: Fast navigation to key features
+
+## Tech Stack
+
+**Frontend:**
+- Vue 3.5 (Composition API)
+- Vite 7.2 (Build tool)
+- Pinia 3.0 (State management)
+- Vue Router 4.6 (Routing)
+- Tailwind CSS 4.1 (Styling)
+
+**Backend:**
+- Hono 4.0 (Web framework)
+- Node.js 18+ (Runtime)
+- Better-SQLite3 9.4 (Database)
+
+**Development:**
+- Vitest (Testing framework)
+- ESLint (Linting)
+- PostCSS (CSS processing)
+
+## Quick Start
+
+### Development Mode
+
+```bash
+# Start dev server (API + Vue HMR)
+./start.sh
+
+# Or use the /dashboard command
+/dashboard
+```
+
+**URLs:**
+- Frontend: http://localhost:5173
+- API: http://localhost:3457
+- Health: http://localhost:3457/health
+
+### Production Mode
+
+```bash
+# Build for production
+./build.sh
+
+# Start production server
+./start-production.sh
+
+# Or use commands
+/dashboard build
+/dashboard prod
+```
+
+**URL:**
+- Application: http://localhost:3457
+
+### Stop Servers
+
+```bash
+# Stop all running servers
+./stop.sh
+
+# Or use command
+/dashboard stop
+```
+
+## Project Structure
+
+```
+.opencode/skills/marketing-dashboard/
+├── app/                        # Vue 3 frontend
+│   ├── src/
+│   │   ├── components/         # 26 Vue components
+│   │   │   ├── layout/         # AppHeader, AppSidebar, AppLayout
+│   │   │   ├── campaigns/      # CampaignCard, CampaignList, CampaignKanbanView, CampaignForm
+│   │   │   ├── content/        # ContentCard, ContentGrid, ContentEditor, ContentFilter
+│   │   │   ├── assets/         # AssetCard, AssetGrid, AssetPreview
+│   │   │   ├── automation/     # AutomationPanel, RecipeButton
+│   │   │   └── common/         # Modal, Toast, LoadingSpinner
+│   │   ├── views/              # 5 route views
+│   │   │   ├── DashboardView.vue
+│   │   │   ├── CampaignsView.vue
+│   │   │   ├── ContentView.vue
+│   │   │   ├── AssetsView.vue
+│   │   │   └── SettingsView.vue
+│   │   ├── stores/             # 4 Pinia stores
+│   │   │   ├── campaigns.js
+│   │   │   ├── content.js
+│   │   │   ├── assets.js
+│   │   │   └── ai.js
+│   │   ├── router/             # Vue Router config
+│   │   ├── App.vue             # Root component
+│   │   └── main.js             # Entry point
+│   ├── index.html
+│   ├── package.json
+│   ├── vite.config.js
+│   └── tailwind.config.js
+├── server/                     # Hono API backend
+│   ├── routes/                 # API routes
+│   │   ├── campaigns.js        # Campaign CRUD
+│   │   ├── content.js          # Content CRUD + save-to-file
+│   │   ├── assets.js           # Asset management + scanner
+│   │   └── ai.js               # AI enhancement + generation
+│   ├── db/                     # Database layer
+│   │   ├── schema.sql          # SQLite schema
+│   │   └── database.js         # DB initialization
+│   ├── middleware/             # Middleware
+│   │   └── auth.js             # API key authentication
+│   ├── lib/                    # Utilities
+│   │   ├── ai-bridge.cjs       # Claude CLI integration
+│   │   └── brand-context.cjs   # Brand guidelines reader
+│   ├── tests/                  # Test suite (132 tests)
+│   ├── index.js                # Server entry point
+│   └── package.json
+├── data/                       # SQLite database
+│   └── marketing.db
+├── start.sh                    # Dev startup script
+├── start-production.sh         # Production startup script
+├── build.sh                    # Production build script
+├── stop.sh                     # Graceful shutdown script
+├── SKILL.md                    # Skill documentation
+└── README.md                   # This file
+```
+
+## API Endpoints
+
+### Campaigns
+- `GET /api/campaigns` - List all campaigns
+- `POST /api/campaigns` - Create campaign
+- `GET /api/campaigns/:id` - Get campaign by ID
+- `PUT /api/campaigns/:id` - Update campaign
+- `DELETE /api/campaigns/:id` - Delete campaign
+
+### Content
+- `GET /api/content` - List content (with filters)
+- `POST /api/content` - Create content
+- `GET /api/content/:id` - Get content by ID
+- `PUT /api/content/:id` - Update content
+- `DELETE /api/content/:id` - Delete content
+- `POST /api/content/:id/save` - Export to markdown file
+
+### Assets
+- `GET /api/assets` - List assets
+- `GET /api/assets/:id` - Get asset by ID
+- `PUT /api/assets/:id` - Update asset metadata
+- `POST /api/assets/scan` - Scan filesystem for new assets
+- `GET /api/assets/file/*` - Serve asset files
+
+### AI
+- `GET /api/ai/status` - Check Claude availability
+- `POST /api/ai/enhance` - Enhance content with AI
+- `POST /api/ai/generate` - Generate new content
+
+### Utility
+- `GET /health` - Health check
+- `GET /api/brand` - Get brand context
+- `GET /api/automations` - List automation recipes
+
+## Database Schema
+
+### assets
+- id, path (unique), name, category, format, format_type, size, ai_prompt, r2_status, r2_url
+- created_at, modified_at
+
+### brand_cache
+- id (singleton: always 1), cache_data
+- created_at, updated_at
+
+## Configuration
+
+### Environment Variables
+
+**Server (.opencode/skills/marketing-dashboard/server/.env):**
+```env
+PORT=3457
+NODE_ENV=development
+ALLOWED_ORIGINS=http://localhost:5173
+DB_PATH=./data/marketing.db
+```
+
+**Frontend (.opencode/skills/marketing-dashboard/app/.env):**
+```env
+VITE_API_BASE_URL=http://localhost:3457/api
+```
+
+### API Authentication
+
+API requires `X-API-Key` header for all `/api/*` endpoints. Set via:
+- Settings page (sessionStorage)
+- Direct sessionStorage: `sessionStorage.setItem('api_key', 'your-key')`
+
+## Performance
+
+**Bundle Size (Production):**
+- Total: 173.87 kB
+- Gzipped: 56.00 kB (72% under 200 KB target)
+
+**Build Time:**
+- ~684ms (Vite build)
+
+**Test Coverage:**
+- 119/132 tests passing (90%)
+- 0 critical issues
+
+## Development
+
+### Install Dependencies
+
+```bash
+# Server dependencies
+cd server && npm install
+
+# Frontend dependencies
+cd app && npm install
+```
+
+### Run Tests
+
+```bash
+# Server tests
+cd server && npm test
+
+# Frontend tests (TODO: add Vitest tests)
+cd app && npm test
+```
+
+### Lint
+
+```bash
+# Server linting
+cd server && npm run lint
+
+# Frontend linting
+cd app && npm run lint
+```
+
+## Troubleshooting
+
+### Port Already in Use
+
+**Error**: `EADDRINUSE: address already in use :::3457`
+
+**Solution**:
+```bash
+# Stop servers
+./stop.sh
+
+# Or manually kill process
+lsof -t -i:3457 | xargs kill
+lsof -t -i:5173 | xargs kill
+```
+
+### Database Locked
+
+**Error**: `SQLITE_BUSY: database is locked`
+
+**Solution**:
+- Ensure only one server instance is running
+- Check for zombie processes: `ps aux | grep node`
+- Stop all instances: `./stop.sh`
+
+### Build Fails
+
+**Error**: `npm ERR! missing script: build`
+
+**Solution**:
+```bash
+cd app
+npm install
+npm run build
+```
+
+### API Key Missing
+
+**Error**: `401 Unauthorized`
+
+**Solution**:
+- Set API key in Settings page
+- Or: `sessionStorage.setItem('api_key', 'your-key')`
+
+## Security
+
+**Implemented:**
+- ✅ XSS protection (Vue auto-escaping)
+- ✅ SQL injection prevention (parameterized queries)
+- ✅ Path traversal blocking (slug sanitization)
+- ✅ CORS restrictions (configurable origins)
+- ✅ API key authentication
+- ✅ Input validation (type/status whitelists)
+- ✅ Session-only API storage (sessionStorage, not localStorage)
+
+**TODO (Phase 6+):**
+- [ ] Rate limiting
+- [ ] CSRF protection
+- [ ] Content Security Policy headers
+- [ ] User authentication (multi-user)
+
+## Known Issues
+
+**Non-blocking:**
+1. Security test assertions expect 403, receive 404 (path traversal IS blocked)
+2. `.env` not in `.gitignore` (add before production)
+3. Console.error in production (add centralized logging)
+4. Recent generations in localStorage (move to DB)
+5. Native confirm dialogs (replace with Modal component)
+
+## Roadmap
+
+### Phase 6: Testing & Docs
+- [ ] Frontend component tests (Vitest)
+- [ ] E2E tests (Playwright/Cypress)
+- [ ] Performance monitoring
+- [ ] User onboarding guide
+
+### Phase 7: Advanced Features
+- [ ] Multi-user authentication
+- [ ] Team collaboration
+- [ ] Cloud sync (R2 integration)
+- [ ] Webhook integrations
+- [ ] Advanced analytics
+
+## License
+
+Part of ClaudeKit Marketing toolkit.
+
+## Related Documentation
+
+- Plan: `plans/251223-dashboard-vue-migration.md`
+- Components: `docs/marketing-dashboard-components.md`
+- API: `docs/marketing-dashboard-api.md`
+- Reports: `plans/reports/`

package/.opencode/skills/marketing-dashboard/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: ckm:marketing-dashboard
+description: Local-first marketing command center for solopreneurs. Manage campaigns, content, and assets with Claude Code AI automation.
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# Marketing Dashboard
+
+**Status:** Foundation Phase (Phase 1 Complete)
+
+Local-first marketing command center for solopreneurs. Manage campaigns, content, and assets with Claude Code AI automation.
+
+## Quick Start
+
+### Development Mode
+
+```bash
+# Terminal 1: Start API server
+cd .opencode/skills/marketing-dashboard/server
+npm run dev
+
+# Terminal 2: Start Vue frontend
+cd .opencode/skills/marketing-dashboard/app
+npm run dev
+```
+
+Access:
+- **Frontend:** http://localhost:5173
+- **API:** http://localhost:3457
+
+### Production Mode
+
+```bash
+# Build frontend
+cd .opencode/skills/marketing-dashboard/app
+npm run build
+
+# Start server (serves API + built frontend)
+cd ../server
+npm start
+```
+
+## Stack
+
+| Layer | Technology |
+|-------|------------|
+| Frontend | Vue 3 + Vite + Tailwind CSS |
+| Backend | Hono (Node.js) |
+| Database | SQLite (better-sqlite3) |
+| AI | Claude Code CLI |
+
+## Phase 1 Complete ✓
+
+- [x] Vue 3 + Vite app initialized
+- [x] Tailwind CSS configured with design tokens
+- [x] Hono API server created
+- [x] SQLite database schema defined
+- [x] Basic API endpoints (GET)
+
+## Next Phases
+
+- **Phase 2:** Full CRUD API routes
+- **Phase 3:** Vue components & stores
+- **Phase 4:** Dashboard features
+- **Phase 5:** Integration & deployment
+
+## Database Tables
+
+- `campaigns` - Marketing campaigns
+- `content` - Blog posts, social media, emails
+- `assets` - Images, videos, documents
+- `automations` - AI automation recipes
+
+## Commands
+
+```bash
+# Start dashboard
+/marketing:dashboard
+
+# Or manually:
+node .opencode/skills/marketing-dashboard/server/index.js
+```

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

@@ -0,0 +1,2 @@
+# API Base URL for the marketing dashboard backend
+VITE_API_BASE_URL=http://localhost:3457/api

package/.opencode/skills/marketing-dashboard/app/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/.opencode/skills/marketing-dashboard/app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/ck-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ClaudeKit Marketing</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/.opencode/skills/marketing-dashboard/app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/dompurify": "^3.0.5",
+    "@vueuse/core": "^14.1.0",
+    "dompurify": "^3.3.1",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.1",
+    "mermaid": "^11.12.2",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}

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

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/.opencode/skills/marketing-dashboard/app/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/.opencode/skills/marketing-dashboard/app/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <AppLayout>
+    <RouterView />
+  </AppLayout>
+</template>
+
+<script setup>
+import AppLayout from './components/layout/AppLayout.vue'
+</script>

package/.opencode/skills/marketing-dashboard/app/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>