index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SimpleDocReview</title>
    <link rel="stylesheet" href="/static/styles.css">
  </head>
  <body>
    <main class="app-shell">
      <aside class="sidebar" aria-label="SimpleDocReview navigation">
        <header class="brand">
          <div>
            <p class="eyebrow">Document Review</p>
            <h1>SimpleDocReview</h1>
          </div>
          <span class="live-dot" title="Local app"></span>
        </header>

        <section class="upload-zone" id="dropZone">
          <input id="fileInput" type="file" accept=".txt,.md,.docx">
          <div class="owner-fields">
            <input id="ownerName" type="text" placeholder="Owner name">
            <input id="ownerEmail" type="email" placeholder="Owner email">
            <input id="ownerSlack" type="text" placeholder="Owner Slack">
            <input id="ownerTeams" type="text" placeholder="Owner Teams">
          </div>
          <button class="upload-button" id="uploadButton" type="button">
            <span class="button-icon">+</span>
            Upload document
          </button>
          <p>TXT, MD, or DOCX up to 5 MB</p>
        </section>

        <nav class="sidebar-tabs" aria-label="Workspace views">
          <button class="side-tab active" type="button" data-view="documents">Docs</button>
          <button class="side-tab" type="button" data-view="reviewers">Reviewers</button>
          <button class="side-tab" type="button" data-view="notifications">
            Inbox <span id="notificationBadge" class="badge hidden">0</span>
          </button>
        </nav>

        <section id="documentsView" class="side-view">
          <div class="filters" role="tablist" aria-label="Document status filters">
            <button class="filter active" type="button" data-filter="all">All</button>
            <button class="filter" type="button" data-filter="in_review">Review</button>
            <button class="filter" type="button" data-filter="changes_requested">Changes</button>
            <button class="filter" type="button" data-filter="approved">Approved</button>
          </div>
          <section class="queue" id="documentList" aria-live="polite"></section>
        </section>

        <section id="reviewersView" class="side-view hidden">
          <form class="compact-form" id="reviewerForm">
            <input id="reviewerId" type="hidden">
            <input id="reviewerName" type="text" placeholder="Reviewer name" required>
            <input id="reviewerEmail" type="email" placeholder="Email">
            <input id="reviewerSlack" type="text" placeholder="Slack">
            <input id="reviewerTeams" type="text" placeholder="Teams">
            <div class="form-row">
              <button class="primary" id="reviewerSaveButton" type="submit">Save reviewer</button>
              <button class="secondary hidden" id="reviewerCancelButton" type="button">Cancel</button>
            </div>
          </form>
          <div class="people-list" id="reviewerList"></div>
        </section>

        <section id="notificationsView" class="side-view hidden">
          <div class="notification-list" id="notificationList"></div>
        </section>
      </aside>

      <section class="workspace" aria-label="Review workspace">
        <div class="empty-state" id="emptyState">
          <div class="empty-mark">RD</div>
          <h2>Select or upload a document</h2>
          <p>Assign reviewers, capture approvals, and keep a local activity trail.</p>
        </div>

        <article class="document-panel hidden" id="documentPanel">
          <header class="document-header">
            <div>
              <p class="eyebrow" id="documentMeta">Document</p>
              <h2 id="documentTitle"></h2>
              <p class="owner-line" id="ownerLine"></p>
            </div>
            <span class="status-pill" id="statusPill"></span>
          </header>

          <div class="actions" aria-label="Document actions">
            <button class="secondary" id="downloadButton" type="button">
              <span class="button-icon">v</span>
              Download
            </button>
            <button class="secondary" id="reviewButton" type="button">
              <span class="button-icon">?</span>
              Run review
            </button>
          </div>

          <section class="review-column assignment-panel">
            <div class="section-heading">
              <h3>Reviewer workflow</h3>
              <span id="assignmentSummary">No reviewers</span>
            </div>
            <form class="assignment-form" id="assignmentForm">
              <div class="check-grid" id="assignmentChoices"></div>
              <button class="secondary" type="submit">Assign selected reviewers</button>
            </form>
            <div class="assignment-list" id="assignmentList"></div>
            <form class="reviewer-action-form" id="reviewerActionForm">
              <div class="form-row">
                <select id="reviewerActionSelect"></select>
                <input id="reviewerSignature" type="text" placeholder="Name or initials">
              </div>
              <textarea id="reviewerNote" rows="3" placeholder="Reviewer note"></textarea>
              <div class="form-row">
                <button class="secondary" type="submit" data-reviewer-action="comment">Add comment</button>
                <button class="warning" type="submit" data-reviewer-action="request">Request changes</button>
                <button class="primary" type="submit" data-reviewer-action="approve">Approve</button>
              </div>
            </form>
          </section>

          <div class="review-grid">
            <section class="review-column">
              <div class="section-heading">
                <h3>Findings</h3>
                <span id="findingSummary">Not reviewed</span>
              </div>
              <div id="findings"></div>
            </section>

            <section class="review-column">
              <div class="section-heading">
                <h3>Comments</h3>
                <span id="commentCount">0</span>
              </div>
              <form class="comment-form" id="commentForm">
                <textarea id="commentBody" rows="3" placeholder="Add an owner/general comment"></textarea>
                <button class="secondary" type="submit">Add comment</button>
              </form>
              <div class="comments" id="comments"></div>
            </section>
          </div>

          <section class="review-column">
            <div class="section-heading">
              <h3>Activity timeline</h3>
              <span id="activityCount">0</span>
            </div>
            <div class="timeline" id="activityTimeline"></div>
          </section>

          <section class="preview">
            <div class="section-heading">
              <h3>Text preview</h3>
              <span id="wordCount">0 words</span>
            </div>
            <pre id="textPreview"></pre>
          </section>
        </article>
      </section>
    </main>

    <div class="toast hidden" id="toast" role="status" aria-live="polite"></div>
    <script src="/sdr-api-core.js"></script>
    <script src="/sdr-api-shim.js"></script>
    <script src="/static/app.js"></script>
  </body>
</html>