olho/review.html at main · CarlasHub/olho · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Olho Review Mode</title>
    <link rel="stylesheet" href="src/shared/renaissance-theme.css" />
    <link rel="stylesheet" href="review.css" />
  </head>
  <body>
    <div class="review-shell">
      <header class="review-toolbar">
        <button type="button" id="backToMemoryBtn" class="ghost review-back-btn">Back</button>
        <div class="review-title-block">
          <p class="review-eyebrow">Olho Review</p>
          <h1 id="reviewTitle">Review Mode</h1>
          <p id="reviewMeta" class="review-meta">Canvas-first visual UI, UX, and accessibility-visible review.</p>
        </div>
        <span id="reviewModeBadge" class="review-status" aria-label="Review source mode">Image-only review</span>
        <span id="aiStatusPill" class="ai-status-pill">AI Off</span>
        <div class="review-toolbar-actions" aria-label="Review actions">
          <button type="button" id="runAiReviewBtn" class="ghost" disabled>Run AI Review</button>
          <button type="button" id="cancelAiReviewBtn" class="ghost" disabled hidden>Cancel AI</button>
          <button type="button" id="aiSettingsBtn" class="ghost">AI Settings</button>
          <button type="button" id="copySummaryBtn" class="ghost" disabled>Copy Summary</button>
          <button type="button" id="exportHtmlBtn" class="ghost" disabled>Export HTML</button>
          <button type="button" id="exportMarkdownBtn" class="ghost" disabled>Export Markdown</button>
          <button type="button" id="exportJsonBtn" class="ghost" disabled>Export JSON</button>
        </div>
      </header>

      <main class="review-layout">
        <aside class="review-panel findings-panel" aria-labelledby="findingsTitle">
          <div class="panel-header">
            <div>
              <h2 id="findingsTitle">Findings</h2>
              <p>Navigate reviewer markers on the interface.</p>
            </div>
            <span id="findingsCount" class="panel-count">0</span>
          </div>
          <div id="findingsList" class="findings-list"></div>
        </aside>

        <section class="screenshot-workspace" aria-labelledby="screenshotTitle">
          <h2 id="screenshotTitle" class="sr-only">Captured interface under review</h2>
          <div class="workspace-chrome">
            <div id="reviewScopeControls" class="review-scope-controls" hidden aria-label="Review scope">
              <button type="button" id="reviewVisibleScreenBtn" class="scope-button" data-review-scope="visible-screen">
                Review visible screen
              </button>
              <button type="button" id="reviewDesignAreaBtn" class="scope-button" data-review-scope="design-area">
                Review central design area only
              </button>
            </div>
            <details id="sourceNotice" class="source-notice" hidden>
              <summary>
                <span id="sourceNoticeTitle">Professional Visual Review</span>
                <span id="sourceAiStatusValue">AI Off</span>
              </summary>
              <p id="sourceNoticeText">
                Olho reviews visible interface quality across hierarchy, UX clarity, accessibility-visible risk, design-system consistency, and enterprise polish.
              </p>
              <p id="reviewBoundaryText">
                This is not a code accessibility audit, backend review, live interaction automation, or full WCAG compliance certification.
              </p>
              <dl class="source-meta-grid">
                <div><dt>Review type</dt><dd id="sourceReviewTypeValue">Visual UI review</dd></div>
                <div><dt>Source type</dt><dd id="sourceTypeValue">-</dd></div>
                <div><dt>Image dimensions</dt><dd id="sourceDimensionsValue">-</dd></div>
                <div><dt>Metadata</dt><dd id="sourceMetadataValue">Image only</dd></div>
              </dl>
            </details>
          </div>

          <div id="loadingState" class="workspace-state" role="status">
            <strong>Preparing Review Mode</strong>
            <span id="progressText">Loading saved screenshot.</span>
          </div>
          <div id="errorState" class="workspace-state error-state" role="alert" hidden></div>
          <div id="screenshotFrame" class="screenshot-frame" hidden>
            <img id="screenshotImage" class="screenshot-image" alt="" />
            <div id="overlayLayer" class="overlay-layer"></div>
          </div>
        </section>

        <aside class="review-panel inspector-panel" id="inspectorPanel" aria-labelledby="inspectorTitle" hidden>
          <div class="panel-header">
            <div>
              <h2 id="inspectorTitle">Reviewer Note</h2>
              <p>Full finding detail.</p>
            </div>
          </div>
          <section id="designGuidancePanel" class="design-guidance-panel" aria-labelledby="designGuidanceTitle" hidden>
            <h3 id="designGuidanceTitle">Design Review Guidance</h3>
            <ul id="designGuidanceList"></ul>
          </section>
          <div id="findingInspector" class="finding-inspector"></div>
        </aside>
      </main>
    </div>

    <dialog id="aiSettingsDialog" class="ai-settings-dialog" aria-labelledby="aiReviewSettingsTitle">
      <section class="ai-review-panel">
        <div class="ai-review-panel-heading">
          <div>
            <h2 id="aiReviewSettingsTitle">AI Review Settings</h2>
            <p id="aiProviderSummary" class="ai-review-summary">Disabled by default.</p>
          </div>
          <button type="button" id="aiSettingsCloseBtn" class="ghost">Close</button>
        </div>
        <p class="ai-review-warning">
          External AI review may send screenshots or design data to third-party providers.
        </p>
        <div class="ai-control-grid">
          <label class="ai-check-row">
            <input type="checkbox" id="aiEnabledToggle" />
            <span>Enable optional AI review</span>
          </label>
          <label>
            <span>Provider</span>
            <select id="aiProviderSelect"></select>
          </label>
          <label>
            <span>Review mode</span>
            <select id="aiReviewModeSelect"></select>
          </label>
          <label>
            <span>Model</span>
            <input type="text" id="aiModelInput" autocomplete="off" />
          </label>
          <label id="aiEndpointRow">
            <span>Local endpoint</span>
            <input type="text" id="aiEndpointInput" autocomplete="off" />
          </label>
          <label id="aiApiKeyRow">
            <span>API key</span>
            <input type="password" id="aiApiKeyInput" autocomplete="off" />
          </label>
          <label class="ai-check-row">
            <input type="checkbox" id="aiScreenshotSharingToggle" />
            <span>Allow screenshot sharing for AI review</span>
          </label>
        </div>
        <div class="ai-actions">
          <button type="button" id="testAiConnectionBtn" class="ghost">Test connection</button>
          <button type="button" id="clearAiSettingsBtn" class="ghost">Clear AI settings</button>
        </div>
        <p id="aiStatusText" class="ai-status-text">
          AI review is off. Deterministic local findings remain available without external processing.
        </p>
        <ul id="aiPassList" class="ai-pass-list" aria-label="AI review pass status"></ul>
        <p class="ai-limitations">
          AI output is optional, schema-validated, and never replaces deterministic rule-engine findings.
        </p>
      </section>
    </dialog>

    <dialog id="copyFallbackDialog" aria-labelledby="copyFallbackTitle">
      <h2 id="copyFallbackTitle">Copy manually</h2>
      <p>Clipboard access was blocked. Select the text below and copy it manually.</p>
      <textarea id="copyFallbackText" rows="12" readonly></textarea>
      <div class="dialog-actions">
        <button type="button" id="copyFallbackCloseBtn" class="ghost">Close</button>
      </div>
    </dialog>

    <div id="reviewLiveStatus" class="review-live-status" role="status" aria-live="polite" aria-atomic="true"></div>

    <script type="module" src="review.js"></script>
  </body>
</html>