Merge pull request #7 from escalated-dev/feature/platform-parity

Feature/platform parity

Author: mpge

.github/workflows/screenshots.yml

@@ -0,0 +1,116 @@
+name: component-screenshots
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  screenshots:
+    runs-on: ubuntu-latest
+    name: Component Screenshots
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Playwright Chromium
+        run: npx playwright install chromium --with-deps
+
+      - name: Build Storybook
+        run: npx storybook build --output-dir storybook-static
+
+      - name: Take screenshots
+        run: |
+          npx http-server storybook-static -p 6006 -s &
+          sleep 3
+          npx playwright test --config=playwright-screenshots.config.js --reporter=list || true
+          kill %1 2>/dev/null || true
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: component-screenshots
+          path: screenshot-results/*.png
+          retention-days: 30
+
+      - name: Comment on PR with screenshot summary
+        if: github.event_name == 'pull_request' && always()
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const path = require('path');
+            const dir = 'screenshot-results';
+
+            if (!fs.existsSync(dir)) {
+              console.log('No screenshot-results directory found');
+              return;
+            }
+
+            const files = fs.readdirSync(dir).filter(f => f.endsWith('.png'));
+            if (files.length === 0) {
+              console.log('No screenshots captured');
+              return;
+            }
+
+            const { data: { artifacts } } = await github.rest.actions.listArtifactsForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            });
+
+            const body = [
+              '## Component Screenshots',
+              '',
+              `Captured **${files.length}** component screenshots from Storybook.`,
+              '',
+              'Download the full set from the **component-screenshots** artifact in the workflow run.',
+              '',
+              '<details>',
+              '<summary>Screenshot list</summary>',
+              '',
+              ...files.map(f => `- \`${f.replace('.png', '')}\``),
+              '',
+              '</details>',
+            ].join('\n');
+
+            // Find existing comment to update
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+
+            const existing = comments.find(c =>
+              c.user.type === 'Bot' && c.body.includes('## Component Screenshots')
+            );
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body,
+              });
+            }

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 dist/
 .DS_Store
 *.log
+storybook-static/
+screenshot-results/

.storybook/main.js

@@ -0,0 +1,19 @@
+import vue from '@vitejs/plugin-vue';
+
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
+    framework: '@storybook/vue3-vite',
+    async viteFinal(config) {
+        const hasVue = config.plugins?.some(
+            (p) => p && (p.name === 'vite:vue' || (Array.isArray(p) && p[0]?.name === 'vite:vue')),
+        );
+        if (!hasVue) {
+            config.plugins = config.plugins || [];
+            config.plugins.push(vue());
+        }
+        return config;
+    },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,79 @@
+import { computed } from 'vue';
+import './storybook.css';
+
+/** @type { import('@storybook/vue3-vite').Preview } */
+const preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        a11y: {
+            test: 'todo',
+        },
+    },
+    globalTypes: {
+        theme: {
+            name: 'Theme',
+            description: 'Dark or light mode',
+            defaultValue: 'dark',
+            toolbar: {
+                icon: 'paintbrush',
+                items: [
+                    { value: 'dark', title: 'Dark' },
+                    { value: 'light', title: 'Light' },
+                    { value: 'side-by-side', title: 'Side by Side' },
+                ],
+                dynamicTitle: true,
+            },
+        },
+    },
+    decorators: [
+        (story, context) => {
+            const theme = context.globals.theme || 'dark';
+
+            if (theme === 'side-by-side') {
+                return {
+                    components: { story },
+                    provide: {
+                        'esc-dark': computed(() => false),
+                    },
+                    setup() {
+                        const darkProvide = { 'esc-dark': computed(() => true) };
+                        return { darkProvide };
+                    },
+                    template: `
+                        <div style="display: flex; gap: 24px; align-items: flex-start;">
+                            <div style="flex: 1; padding: 24px; background: #fff; border-radius: 12px;">
+                                <div style="font-size: 11px; color: #999; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Light</div>
+                                <story />
+                            </div>
+                            <div style="flex: 1; padding: 24px; background: #171717; border-radius: 12px;">
+                                <div style="font-size: 11px; color: #666; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Dark</div>
+                                <story v-bind="darkProvide" />
+                            </div>
+                        </div>
+                    `,
+                };
+            }
+
+            const isDark = theme === 'dark';
+            return {
+                components: { story },
+                provide: {
+                    'esc-dark': computed(() => isDark),
+                },
+                template: `
+                    <div style="padding: 24px; min-height: 100px; border-radius: 12px;"
+                         :style="{ background: ${isDark} ? '#171717' : '#fff' }">
+                        <story />
+                    </div>
+                `,
+            };
+        },
+    ],
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Storybook canvas overrides */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}

docs/plans/2026-02-24-platform-parity-design.md

@@ -0,0 +1,127 @@
+# platform Feature Parity — Design Document
+
+## Goal
+
+Implement all 36 core gaps and scaffold all 24 plugin gaps identified in the platform comparison. Core features get full frontend + backend implementations across all frameworks. Plugins get their own repos under `escalated/plugins/` with frontend components and backend hooks. Each feature includes a TODO section documenting remaining work.
+
+## Architecture
+
+### Core Features
+
+Core features live in the existing repos:
+- `escalated/` — Vue 3 frontend (pages, components, composables)
+- `escalated-laravel/` — Laravel backend (models, controllers, migrations, routes)
+- `escalated-adonis/` — AdonisJS backend
+- `escalated-django/` — Django backend
+- `escalated-rails/` — Rails backend
+- `escalated-wordpress/` — WordPress adapter
+- `escalated-filament/` — Filament admin panel
+
+### Plugins
+
+Each plugin is a standalone package under `escalated/plugins/`:
+```
+plugins/
+├── escalated-plugin-livechat/
+├── escalated-plugin-slack/
+├── escalated-plugin-jira/
+├── escalated-plugin-ai-copilot/
+├── escalated-plugin-web-widget/
+├── escalated-plugin-whatsapp/
+├── escalated-plugin-sms/
+├── escalated-plugin-social/
+├── escalated-plugin-phone/
+├── escalated-plugin-community/
+├── escalated-plugin-nps/
+├── escalated-plugin-kb-ai/
+├── escalated-plugin-approvals/
+├── escalated-plugin-custom-objects/
+├── escalated-plugin-ip-restriction/
+├── escalated-plugin-compliance/
+├── escalated-plugin-marketplace/
+├── escalated-plugin-scheduled-reports/
+├── escalated-plugin-custom-layouts/
+├── escalated-plugin-proactive-messages/
+├── escalated-plugin-omnichannel-routing/
+├── escalated-plugin-mobile-sdk/
+├── escalated-plugin-unified-status/
+└── escalated-plugin-ticket-sharing/
+```
+
+Each plugin follows a standard structure:
+```
+escalated-plugin-<name>/
+├── package.json
+├── src/
+│   ├── index.js              # defineEscalatedPlugin() entry
+│   └── components/           # Vue components
+├── TODO.md                    # What remains to implement
+└── README.md                  # Plugin documentation
+```
+
+## Implementation Layers
+
+### Layer 1: Structural Foundations
+
+| Feature | Frontend | Backend | Priority |
+|---------|----------|---------|----------|
+| Custom Fields & Forms | Field renderer component, form builder UI | Migration, model, field types API | P0 |
+| Custom Statuses | Status config UI, updated StatusBadge | Migration, status categories model | P0 |
+| Business Hours | Schedule editor UI, holiday calendar | Schedule model, SLA time calculator | P0 |
+| RBAC / Custom Roles | Role editor, permission matrix UI | Roles/permissions models, middleware | P0 |
+| Audit Log | Audit log viewer, filters | Auditable trait, log storage | P0 |
+
+### Layer 2: Core Workflows
+
+| Feature | Frontend | Backend |
+|---------|----------|---------|
+| Ticket Merging | Merge dialog, merged ticket indicator | Merge service, reply consolidation |
+| Problem/Incident Linking | Link type selector, linked tickets panel | Ticket types, cascade resolution |
+| Parent/Child Tickets | Child ticket creator, relationship view | Parent-child model relationship |
+| Side Conversations | Side thread UI, channel selector | Side conversation model, notifications |
+| Agent Collision Detection | Typing indicator, collision warning banner | Real-time presence channel |
+| Light Agents | Permission-restricted agent view | Light agent role, limited permissions |
+| Skills-Based Routing | Skills tag manager, routing config UI | Skills model, routing algorithm |
+| Agent Capacity | Capacity settings UI, load indicator | Capacity tracking, assignment limiter |
+| Webhooks (Outbound) | Webhook config UI, delivery log viewer | Webhook model, dispatcher, retry queue |
+| Time-Based Automations | Time-condition builder UI | Automation scheduler, condition evaluator |
+| Trigger Categories | Category organizer for triggers | Category model for automation rules |
+
+### Layer 3: Content & Analytics
+
+| Feature | Frontend | Backend |
+|---------|----------|---------|
+| Knowledge Base | Article editor, category tree, search | Article/Category models, full-text search |
+| Pre-built Dashboards | Dashboard widgets, chart components | Aggregation queries, data endpoints |
+| Custom Report Builder | Drag-drop report editor | Report definition model, query engine |
+| Real-time Dashboards | Live-updating stats, queue depth | WebSocket/SSE data stream |
+| Agent Metrics | Per-agent performance cards | Metric collection, aggregation |
+| SLA Reporting | SLA compliance charts, breach analysis | SLA achievement calculator |
+| CSAT Customization | Survey config UI, conditional delivery | Survey model, delivery rules |
+| CSAT Reporting | CSAT analytics dashboard | CSAT aggregation queries |
+
+### Layer 4: Platform & Security
+
+| Feature | Frontend | Backend |
+|---------|----------|---------|
+| SSO (SAML/JWT) | SSO config UI, login redirect | SAML/JWT auth drivers |
+| Two-Factor Auth | 2FA setup wizard, TOTP input | TOTP generation, verification |
+| Data Retention | Retention policy config UI | Scheduled deletion jobs |
+| Custom Objects | Object/field definition UI | Dynamic schema, lookup relationships |
+| Sandbox | Sandbox creation UI | Environment cloning |
+| Email Channel (Advanced) | Multi-address config, DKIM setup | Email piping, authentication |
+| Conditional Fields | Show/hide rules builder | Condition evaluation engine |
+| Custom Statuses per Category | Sub-status config within categories | Status category model |
+
+## Branching Strategy
+
+- `escalated/` frontend: `feature/platform-parity` branch
+- Each backend: `feature/platform-parity` branch
+- Plugins: new repos initialized in `plugins/` directory
+
+## Success Criteria
+
+- All 36 core gaps have frontend components + at least Laravel backend implementation
+- All 24 plugins have scaffold with entry point, components, and TODO.md
+- All tests pass
+- Each feature has a TODO.md documenting remaining work