| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Maester Content Studio</title> |
| <link rel="stylesheet" href="/studio/styles.css"> |
| </head> |
| <body> |
| <aside class="sidebar" id="sidebar"> |
| <div class="brand"><span class="brand-mark">M</span><span>Maester</span></div> |
| <nav aria-label="Workspace"> |
| <button class="nav-item active" data-view="overview"><span>⌂</span>Overview</button> |
| <button class="nav-item" data-view="campaigns"><span>▤</span>Campaigns</button> |
| <button class="nav-item" data-view="editor"><span>✎</span>Editor</button> |
| <button class="nav-item" data-view="calendar"><span>□</span>Calendar</button> |
| <button class="nav-item" data-view="jobs"><span>▷</span>Jobs</button> |
| <button class="nav-item" data-view="analytics"><span>⌁</span>Analytics</button> |
| <button class="nav-item" data-view="assets"><span>▧</span>Assets</button> |
| <button class="nav-item" data-view="reviews"><span>✓</span>Reviews</button> |
| <button class="nav-item" data-view="integrations"><span>⌘</span>Integrations</button> |
| <button class="nav-item" data-view="operations"><span>⚙</span>Operations</button> |
| </nav> |
| <div class="sidebar-foot"><span class="status-dot"></span><span id="connection-label">Connecting</span></div> |
| </aside> |
|
|
| <div class="workspace"> |
| <header class="topbar"> |
| <button class="icon-button mobile-only" id="menu-button" title="Open navigation" aria-label="Open navigation">☰</button> |
| <div><h1 id="view-title">Overview</h1><p id="view-context">Content operations</p></div> |
| <div class="top-actions"> |
| <select id="workspace-filter" aria-label="Workspace"><option value="">All workspaces</option></select> |
| <button class="icon-button" id="refresh-button" title="Refresh" aria-label="Refresh">↻</button> |
| <button class="icon-button" id="settings-button" title="API settings" aria-label="API settings">⚙</button> |
| </div> |
| </header> |
|
|
| <main> |
| <section class="view active" id="view-overview"> |
| <div class="metric-grid" id="overview-metrics"></div> |
| <div class="two-column"> |
| <section class="surface"><div class="section-head"><h2>Production Queue</h2><button class="command" data-action="process-queue">Process next</button></div><div id="overview-queue"></div></section> |
| <section class="surface"><div class="section-head"><h2>Performance</h2></div><div id="overview-performance"></div></section> |
| </div> |
| <section class="surface"><div class="section-head"><h2>Review Pipeline</h2></div><div id="overview-approvals"></div></section> |
| </section> |
|
|
| <section class="view" id="view-campaigns"> |
| <div class="toolbar"><button class="command primary" data-dialog="campaign-dialog">＋ New campaign</button><button class="command" data-dialog="repurpose-dialog">Repurpose long-form</button></div> |
| <section class="surface table-surface"><table><thead><tr><th>Campaign</th><th>Topic</th><th>Platforms</th><th>Variants</th><th>Status</th><th></th></tr></thead><tbody id="campaign-table"></tbody></table></section> |
| </section> |
|
|
| <section class="view" id="view-editor"> |
| <div class="editor-layout"> |
| <section class="surface variant-browser"><div class="section-head"><h2>Variants</h2><select id="editor-campaign-filter"><option value="">All campaigns</option></select></div><div id="variant-list" class="selection-list"></div></section> |
| <section class="surface editor-panel" id="variant-editor"><div class="empty-state">Select a variant</div></section> |
| <aside class="surface inspector" id="variant-inspector"><div class="empty-state">No selection</div></aside> |
| </div> |
| </section> |
|
|
| <section class="view" id="view-calendar"> |
| <div class="toolbar"><select id="calendar-campaign"></select><input id="calendar-start" type="datetime-local"><button class="command primary" data-action="apply-schedule">Apply schedule</button></div> |
| <section class="surface table-surface"><table><thead><tr><th>Date</th><th>Platform</th><th>Variant</th><th>Status</th></tr></thead><tbody id="calendar-table"></tbody></table></section> |
| </section> |
|
|
| <section class="view" id="view-jobs"> |
| <div class="toolbar"><button class="command primary" data-action="process-queue">▶ Process next</button><select id="job-filter"><option value="">All states</option><option>queued</option><option>running</option><option>rendering</option><option>ready</option><option>scheduled</option><option>published</option><option>failed</option><option>cancelled</option></select></div> |
| <section class="surface table-surface"><table><thead><tr><th>Job</th><th>Kind</th><th>State</th><th>Attempts</th><th>Updated</th><th></th></tr></thead><tbody id="job-table"></tbody></table></section> |
| </section> |
|
|
| <section class="view" id="view-analytics"> |
| <div class="metric-grid" id="analytics-metrics"></div> |
| <div class="two-column"> |
| <section class="surface"><div class="section-head"><h2>Winner Board</h2></div><div id="winner-board"></div></section> |
| <section class="surface"><div class="section-head"><h2>Ingest Metrics</h2></div><form id="analytics-form" class="form-grid compact"><label>Variant<select name="variant_id" id="analytics-variant" required></select></label><label>Platform<select name="platform"><option>tiktok</option><option>instagram_reels</option><option>facebook_shorts</option><option>youtube_shorts</option></select></label><label>Views<input name="views" type="number" min="0" value="0"></label><label>Likes<input name="likes" type="number" min="0" value="0"></label><label>Comments<input name="comments" type="number" min="0" value="0"></label><label>Shares<input name="shares" type="number" min="0" value="0"></label><label>Completion<input name="completion_rate" type="number" min="0" max="1" step="0.01" value="0"></label><button class="command primary" type="submit">Record</button></form></section> |
| </div> |
| <section class="surface"><div class="section-head"><h2>Experiments</h2><button class="command" data-action="new-experiment">＋ Experiment</button></div><div id="experiment-list"></div></section> |
| </section> |
|
|
| <section class="view" id="view-assets"> |
| <div class="toolbar"><form id="asset-form" class="inline-form"><input name="file" type="file" required><input name="license" placeholder="License" value="owned"><input name="attribution" placeholder="Attribution"><input name="tags" placeholder="Tags, comma separated"><button class="command primary" type="submit">Upload</button></form></div> |
| <section class="surface table-surface"><table><thead><tr><th>Asset</th><th>Kind</th><th>Size</th><th>Rights</th><th>Tags</th><th></th></tr></thead><tbody id="asset-table"></tbody></table></section> |
| </section> |
|
|
| <section class="view" id="view-reviews"> |
| <div class="two-column"> |
| <section class="surface"><div class="section-head"><h2>Create Review</h2></div><form id="review-form"><label>Variants<select id="review-variants" name="variant_ids" multiple required></select></label><div class="form-row"><label>Expires in days<input name="expires_in_days" type="number" min="1" max="30" value="7"></label><label>Reviewer label<input name="created_by" value="Content team"></label></div><button class="command primary" type="submit">Create link</button></form><div id="review-result"></div></section> |
| <section class="surface"><div class="section-head"><h2>Pending Approval</h2></div><div id="pending-reviews"></div></section> |
| </div> |
| </section> |
|
|
| <section class="view" id="view-integrations"> |
| <div class="two-column"> |
| <section class="surface"><div class="section-head"><h2>Social Accounts</h2><button class="command" data-dialog="account-dialog">＋ Account</button></div><div id="account-list"></div></section> |
| <section class="surface"><div class="section-head"><h2>Delivery Integrations</h2><button class="command" data-dialog="integration-dialog">＋ Integration</button></div><div id="integration-list"></div></section> |
| </div> |
| <section class="surface"><div class="section-head"><h2>Automation Rules</h2><button class="command" data-action="new-rule">＋ Rule</button></div><div id="rule-list"></div></section> |
| </section> |
|
|
| <section class="view" id="view-operations"> |
| <div class="metric-grid" id="ops-metrics"></div> |
| <div class="two-column"><section class="surface"><div class="section-head"><h2>Provider Status</h2></div><div id="provider-status"></div></section><section class="surface"><div class="section-head"><h2>Service Status</h2></div><div id="service-status"></div></section></div> |
| <section class="surface table-surface"><div class="section-head"><h2>Audit Log</h2></div><table><thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Resource</th></tr></thead><tbody id="audit-table"></tbody></table></section> |
| </section> |
| </main> |
| </div> |
|
|
| <div id="toast-region" aria-live="polite"></div> |
|
|
| <dialog id="settings-dialog"><form method="dialog" id="settings-form"><div class="dialog-head"><h2>API Settings</h2><button class="icon-button" value="cancel" aria-label="Close">×</button></div><label>API key<input id="api-key" type="password" autocomplete="off"></label><div class="dialog-actions"><button class="command" value="cancel">Cancel</button><button class="command primary" value="default">Save</button></div></form></dialog> |
|
|
| <dialog id="campaign-dialog"><form method="dialog" id="campaign-form"><div class="dialog-head"><h2>New Campaign</h2><button class="icon-button" value="cancel" aria-label="Close">×</button></div><div class="form-grid"><label>Name<input name="name" required></label><label>Topic<input name="topic" required></label><label>Niche<input name="niche"></label><label>Audience<input name="target_audience"></label><label>Quantity<input name="quantity" type="number" min="1" max="100" value="5"></label><label>Brand kit<select name="brand_kit_id" id="campaign-brand"><option value="">None</option></select></label><label class="span-2">Source URL<input name="source_url" type="url"></label><label class="span-2">Tone<input name="tone" value="clear, punchy, high-retention"></label></div><fieldset><legend>Platforms</legend><div class="check-row"><label><input type="checkbox" name="platforms" value="tiktok" checked>TikTok</label><label><input type="checkbox" name="platforms" value="instagram_reels" checked>Instagram</label><label><input type="checkbox" name="platforms" value="facebook_shorts">Facebook</label><label><input type="checkbox" name="platforms" value="youtube_shorts" checked>YouTube</label></div></fieldset><div class="dialog-actions"><button class="command" value="cancel">Cancel</button><button class="command primary" value="default">Create and generate</button></div></form></dialog> |
|
|
| <dialog id="repurpose-dialog"><form method="dialog" id="repurpose-form"><div class="dialog-head"><h2>Repurpose Long-form</h2><button class="icon-button" value="cancel" aria-label="Close">×</button></div><div class="form-grid"><label>Name<input name="name" required></label><label>Niche<input name="niche"></label><label>Quantity<input name="quantity" type="number" min="1" max="30" value="5"></label><label>Source URL<input name="source_url" type="url"></label><label class="span-2">Transcript<textarea name="transcript" rows="12" required></textarea></label></div><div class="dialog-actions"><button class="command" value="cancel">Cancel</button><button class="command primary" value="default">Create clips</button></div></form></dialog> |
|
|
| <dialog id="account-dialog"><form method="dialog" id="account-form"><div class="dialog-head"><h2>Social Account</h2><button class="icon-button" value="cancel" aria-label="Close">×</button></div><div class="form-grid"><label>Platform<select name="platform"><option>tiktok</option><option>instagram_reels</option><option>facebook_shorts</option><option>youtube_shorts</option></select></label><label>Handle<input name="handle" required></label><label>Display name<input name="display_name"></label><label>Token environment variable<input name="token_env" placeholder="YOUTUBE_ACCESS_TOKEN"></label><label class="span-2">Publish endpoint<input name="publish_endpoint" type="url"></label><label class="span-2">Analytics endpoint<input name="analytics_endpoint" type="url"></label></div><div class="dialog-actions"><button class="command" value="cancel">Cancel</button><button class="command primary" value="default">Add account</button></div></form></dialog> |
|
|
| <dialog id="integration-dialog"><form method="dialog" id="integration-form"><div class="dialog-head"><h2>Delivery Integration</h2><button class="icon-button" value="cancel" aria-label="Close">×</button></div><div class="form-grid"><label>Type<select name="kind"><option>webhook</option><option>slack</option><option>telegram</option><option>email</option><option>n8n</option><option>zapier</option><option>make</option></select></label><label>Name<input name="name" required></label><label class="span-2">Endpoint URL<input name="endpoint_url" type="url" required></label><label class="span-2">Secret environment variable<input name="secret_ref"></label></div><div class="dialog-actions"><button class="command" value="cancel">Cancel</button><button class="command primary" value="default">Add integration</button></div></form></dialog> |
|
|
| <script src="/studio/app.js" defer></script> |
| </body> |
| </html> |
|
|
