Create pipeline-dashboard/public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Pipeline | Your Brand</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app">
<header class="header">
<h1>🔺 Your Brand Content Pipeline</h1>
<nav class="tabs">
<button class="tab active" data-tab="browse">Browse</button>
<button class="tab" data-tab="capture">Capture Idea</button>
</nav>
</header>
<main class="main">
<!-- Browse Tab -->
<div id="browse-tab" class="tab-content active">
<aside class="sidebar">
<div class="sidebar-header">
<button id="refresh-tree" class="btn-icon" title="Refresh file tree">🔄</button>
</div>
<div class="tree-section">
<h3>📝 Drafts</h3>
<div id="drafts-tree" class="file-tree"></div>
</div>
<div class="tree-section">
<h3>📁 Published</h3>
<div id="published-tree" class="file-tree"></div>
</div>
<div class="tree-section">
<h3>💡 Inputs</h3>
<div id="inputs-tree" class="file-tree"></div>
</div>
</aside>
<section class="content">
<div id="viewer" class="viewer">
<div class="empty-state">
<p>Select a file to view</p>
</div>
</div>
<div id="annotations-panel" class="annotations-panel hidden">
<h3>📝 Comments</h3>
<div id="annotations-list"></div>
<div class="annotations-actions">
<button id="copy-feedback" class="btn btn-primary">📋 Copy Feedback</button>
<button id="clear-comments" class="btn btn-secondary">🗑️ Clear All</button>
</div>
</div>
</section>
</div>
<!-- Capture Tab -->
<div id="capture-tab" class="tab-content">
<div class="capture-form">
<h2>💡 Capture Idea</h2>
<div class="form-group">
<label for="slug">Slug (lowercase, hyphens)</label>
<input type="text" id="slug" placeholder="standup-fatigue" pattern="[a-z0-9-]+">
</div>
<div class="form-group">
<label for="brainstorm">Brainstorm</label>
<textarea id="brainstorm" rows="10" placeholder="Your idea, notes, research links..."></textarea>
</div>
<div class="form-group">
<label for="image-upload">Attach Image (optional)</label>
<input type="file" id="image-upload" accept="image/*">
</div>
<button id="save-idea" class="btn btn-primary">💾 Save to Inputs</button>
<div id="save-result" class="result"></div>
</div>
</div>
</main>
</div>
<script src="app.js"></script>
</body>
</html>Why This Structure
- •Two tabs: Browse (file navigation + viewer) and Capture (idea input form)
- •Sidebar: Collapsible file tree for drafts, published, and inputs
- •Viewer: Renders markdown, JSON, or images
- •Annotations panel: Shows comments for the current file, hidden by default