npm - codymaster - Versions diffs - 4.1.4 → 4.3.0 - Mend

codymaster 4.1.4 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (657) hide show

package/skills/cm-content-factory/dashboard/index.html ADDED Viewed

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Content Factory — Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- UX: Semantic HTML — proper landmark elements for accessibility -->
+    <header class="header" role="banner">
+        <div class="header-left">
+            <div class="logo">
+                <!-- UX: SVG icon instead of emoji -->
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                    <path d="M2 17l10 5 10-5" />
+                    <path d="M2 12l10 5 10-5" />
+                </svg>
+                <span>Content Factory</span>
+            </div>
+            <span class="version-badge">v2.0</span>
+        </div>
+        <nav class="header-right" role="navigation" aria-label="Dashboard controls">
+            <div class="connection-status" id="connectionStatus" role="status" aria-live="polite">
+                <span class="status-dot"></span>
+                <span class="status-text">Connecting...</span>
+            </div>
+            <span class="header-time" id="headerTime" aria-label="Current time"></span>
+            <!-- UX: Fitts's Law — Settings button ≥ 44px touch target -->
+            <button class="icon-btn" id="settingsBtn" aria-label="Open settings" aria-haspopup="dialog"
+                title="Settings">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3" />
+                    <path
+                        d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
+                </svg>
+            </button>
+        </nav>
+    </header>
+    <main class="main" role="main">
+        <!-- Status Bar -->
+        <!-- UX: Miller's Law — 4 items chunked in 2×2 on mobile -->
+        <section class="status-bar" id="statusBar" aria-label="Pipeline status overview">
+            <div class="status-card">
+                <div class="status-icon-wrap">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                    </svg>
+                </div>
+                <div class="status-info">
+                    <span class="status-label">Status</span>
+                    <span class="status-value" id="pipelineStatus">Idle</span>
+                </div>
+            </div>
+            <div class="status-card">
+                <div class="status-icon-wrap">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                        <polyline points="14 2 14 8 20 8" />
+                        <line x1="16" y1="13" x2="8" y2="13" />
+                        <line x1="16" y1="17" x2="8" y2="17" />
+                    </svg>
+                </div>
+                <div class="status-info">
+                    <span class="status-label">Articles</span>
+                    <span class="status-value" id="articlesCount">0 / 0</span>
+                </div>
+            </div>
+            <div class="status-card">
+                <div class="status-icon-wrap">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="12" y1="1" x2="12" y2="23" />
+                        <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
+                    </svg>
+                </div>
+                <div class="status-info">
+                    <span class="status-label">Cost</span>
+                    <span class="status-value" id="totalCost">$0.0000</span>
+                </div>
+            </div>
+            <div class="status-card">
+                <div class="status-icon-wrap">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+                    </svg>
+                </div>
+                <div class="status-info">
+                    <span class="status-label">Agents</span>
+                    <span class="status-value" id="agentCount">0</span>
+                </div>
+            </div>
+        </section>
+        <!-- Pipeline Progress -->
+        <section class="card pipeline-section" aria-label="Pipeline progress">
+            <h2 class="card-title">Pipeline Progress</h2>
+            <!-- UX: Horizontal scroll with snap on mobile instead of wrapping -->
+            <div class="pipeline-scroll-wrap">
+                <div class="pipeline-track" id="pipelineTrack">
+                    <div class="phase-node" data-phase="extract">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                                <polyline points="17 8 12 3 7 8" />
+                                <line x1="12" y1="3" x2="12" y2="15" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">Extract</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                    <div class="phase-connector"></div>
+                    <div class="phase-node" data-phase="plan">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                                <polyline points="14 2 14 8 20 8" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">Plan</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                    <div class="phase-connector"></div>
+                    <div class="phase-node" data-phase="write">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <path d="M12 20h9" />
+                                <path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">Write</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                    <div class="phase-connector"></div>
+                    <div class="phase-node" data-phase="audit">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <path d="M9 11l3 3L22 4" />
+                                <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">Audit</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                    <div class="phase-connector"></div>
+                    <div class="phase-node" data-phase="seo">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <circle cx="11" cy="11" r="8" />
+                                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">SEO</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                    <div class="phase-connector"></div>
+                    <div class="phase-node" data-phase="publish">
+                        <div class="phase-circle">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2">
+                                <polyline points="16 16 12 12 8 16" />
+                                <line x1="12" y1="12" x2="12" y2="21" />
+                                <path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3" />
+                            </svg>
+                        </div>
+                        <span class="phase-label">Publish</span>
+                        <div class="phase-progress">
+                            <div class="phase-progress-fill" style="width:0%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Two-column layout -->
+        <div class="grid-2col">
+            <!-- Tasks Queue -->
+            <section class="card" aria-label="Task queue">
+                <div class="card-header">
+                    <h2 class="card-title">Task Queue</h2>
+                    <div class="task-filters" role="tablist" aria-label="Filter tasks">
+                        <button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All</button>
+                        <button class="filter-btn" data-filter="running" role="tab"
+                            aria-selected="false">Running</button>
+                        <button class="filter-btn" data-filter="done" role="tab" aria-selected="false">Done</button>
+                        <button class="filter-btn" data-filter="failed" role="tab" aria-selected="false">Failed</button>
+                    </div>
+                </div>
+                <div class="task-list" id="taskList" role="tabpanel">
+                    <div class="empty-state">
+                        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="1.5" opacity="0.3">
+                            <rect x="3" y="3" width="18" height="18" rx="2" />
+                            <path d="M3 9h18" />
+                            <path d="M9 21V9" />
+                        </svg>
+                        <p>No tasks yet. Start a pipeline to see tasks here.</p>
+                    </div>
+                </div>
+            </section>
+            <!-- Token Usage -->
+            <section class="card" aria-label="Token usage">
+                <h2 class="card-title">Token Usage</h2>
+                <div class="token-stats" id="tokenStats">
+                    <div class="token-row">
+                        <span class="token-label">Input Tokens</span>
+                        <span class="token-value" id="inputTokens">0</span>
+                    </div>
+                    <div class="token-row">
+                        <span class="token-label">Output Tokens</span>
+                        <span class="token-value" id="outputTokens">0</span>
+                    </div>
+                    <div class="token-row">
+                        <span class="token-label">Total Cost</span>
+                        <span class="token-value accent" id="tokenCost">$0.0000</span>
+                    </div>
+                    <div class="budget-bar" id="budgetSection" style="display:none">
+                        <div class="budget-header">
+                            <span>Budget</span>
+                            <span id="budgetText">$0 / $0</span>
+                        </div>
+                        <div class="budget-track">
+                            <div class="budget-fill" id="budgetFill" style="width:0%"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="provider-list" id="providerList"></div>
+            </section>
+        </div>
+        <!-- UX: Doherty Threshold — Collapsible log, closed by default -->
+        <details class="card log-section" id="logSection">
+            <summary class="card-header log-summary">
+                <h2 class="card-title">Event Log</h2>
+                <div class="log-header-right">
+                    <span class="log-badge" id="logBadge" aria-label="New log events" hidden>0</span>
+                    <div class="log-filters" role="tablist" aria-label="Filter log levels">
+                        <button class="filter-btn active" data-level="all" role="tab" aria-selected="true">All</button>
+                        <button class="filter-btn" data-level="info" role="tab" aria-selected="false">Info</button>
+                        <button class="filter-btn" data-level="warn" role="tab" aria-selected="false">Warn</button>
+                        <button class="filter-btn" data-level="error" role="tab" aria-selected="false">Error</button>
+                    </div>
+                    <svg class="chevron-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                </div>
+            </summary>
+            <div class="log-viewer" id="logViewer">
+                <div class="empty-state">
+                    <p>Waiting for events...</p>
+                </div>
+            </div>
+        </details>
+        <!-- UX: Poka-Yoke — Actionable error cards with remediation buttons -->
+        <section class="card error-section" id="errorSection" style="display:none" aria-label="Errors" role="alert">
+            <h2 class="card-title error-title">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+                Errors
+            </h2>
+            <div class="error-list" id="errorList"></div>
+        </section>
+    </main>
+    <!-- UX: Fitts's Law — Settings dialog in thumb zone (bottom-sheet on mobile) -->
+    <dialog class="settings-dialog" id="settingsDialog" aria-label="Settings">
+        <div class="dialog-header">
+            <h2 class="dialog-title">Settings</h2>
+            <button class="icon-btn dialog-close" id="settingsClose" aria-label="Close settings">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+            </button>
+        </div>
+        <div class="dialog-body">
+            <!-- UX: Hick's Law — Progressive disclosure, grouped into sections -->
+            <div class="settings-group">
+                <label class="settings-label" for="settingService">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+                        <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+                        <line x1="6" y1="6" x2="6.01" y2="6" />
+                        <line x1="6" y1="18" x2="6.01" y2="18" />
+                    </svg>
+                    Service Provider
+                </label>
+                <select class="settings-select" id="settingService">
+                    <option value="gemini">Google Gemini</option>
+                    <option value="openai">OpenAI</option>
+                    <option value="anthropic">Anthropic</option>
+                    <option value="openrouter">OpenRouter</option>
+                </select>
+            </div>
+            <div class="settings-group">
+                <label class="settings-label" for="settingModel">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2a10 10 0 0110 10 10 10 0 01-10 10A10 10 0 012 12 10 10 0 0112 2z" />
+                        <path d="M12 8v4l3 3" />
+                    </svg>
+                    Model
+                </label>
+                <select class="settings-select" id="settingModel">
+                    <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
+                    <option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
+                    <option value="gpt-4o">GPT-4o</option>
+                    <option value="gpt-4o-mini">GPT-4o Mini</option>
+                    <option value="claude-3.5-sonnet">Claude 3.5 Sonnet</option>
+                    <option value="claude-3.5-haiku">Claude 3.5 Haiku</option>
+                </select>
+            </div>
+            <div class="settings-group">
+                <label class="settings-label" for="settingToken">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                        <path d="M7 11V7a5 5 0 0110 0v4" />
+                    </svg>
+                    API Token
+                </label>
+                <div class="settings-input-group">
+                    <input type="password" class="settings-input" id="settingToken" placeholder="sk-... or AIza..."
+                        autocomplete="off" />
+                    <button class="icon-btn toggle-visibility" id="toggleTokenVisibility" aria-label="Show token"
+                        type="button">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                            <circle cx="12" cy="12" r="3" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="settings-group">
+                <label class="settings-label" for="settingBudget">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="12" y1="1" x2="12" y2="23" />
+                        <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
+                    </svg>
+                    Budget Limit (USD)
+                </label>
+                <input type="number" class="settings-input" id="settingBudget" placeholder="e.g. 5.00" min="0"
+                    step="0.01" />
+            </div>
+        </div>
+        <!-- UX: Fitts's Law — Save button in thumb zone at bottom -->
+        <div class="dialog-footer">
+            <button class="btn btn-secondary" id="settingsCancel" type="button">Cancel</button>
+            <button class="btn btn-primary" id="settingsSave" type="button">Save Settings</button>
+        </div>
+    </dialog>
+    <footer class="footer" role="contentinfo">
+        <span>Content Factory v2.0</span>
+        <span id="footerTime"></span>
+    </footer>
+    <script src="app.js"></script>
+</body>
+</html>