Upload index.html

web/index.html

@@ -18,7 +18,7 @@
       </div>
       <div class="top-actions">
         <button class="bucket-pill" id="bucketStatusPill"><span class="status-dot" id="bucketStatusDot"></span><span id="bucketStatusText">Checking bucket…</span></button>
-        <span class="user-chip" id="userChip">Sign in</span>
+        <a class="user-chip" id="userChip" href="/oauth/huggingface/login">Sign in</a>
         <button class="primary small" id="resumeLatestRun">Resume latest run</button>
         <a class="logout-link" id="logoutLink" href="/logout" hidden>Logout</a>
       </div>
@@ -29,7 +29,21 @@
       <section class="operation-status" id="operationStatus" hidden></section>
 
       <section class="workspace-grid">
-        <section class="panel build-panel" id="newBuildCard">
+        <div class="left-stack">
+          <section class="panel bucket-setup-panel" id="bucketSetupPanel">
+            <div class="section-head compact">
+              <div><span class="panel-icon">◈</span><h2>Run storage</h2></div>
+              <span class="badge" id="bucketInlineStatus">Checking</span>
+            </div>
+            <p class="muted">Runs, reports, generated files, traces, and validation outputs are written to your private bucket.</p>
+            <div class="bucket-source-line"><span class="status-dot" id="bucketInlineDot"></span><strong id="bucketInlineLabel">loading…</strong></div>
+            <div class="inline-actions bucket-actions">
+              <button class="secondary small" id="checkBucket">Check bucket</button>
+              <button class="secondary small" id="createBucket">Create private bucket</button>
+            </div>
+          </section>
+
+          <section class="panel build-panel" id="newBuildCard">
           <div class="section-head compact">
             <div>
               <span class="panel-icon">⌘</span>
@@ -73,7 +87,7 @@
             </div>
             <span id="launchStatus" hidden>—</span><span id="launchSpace" hidden>—</span><span id="launchHardware" hidden>—</span>
           </section>
-        </section>
+        </div>
 
         <section class="panel active-run-panel" id="activeRunPanel">
           <div class="section-head compact">
@@ -108,11 +122,16 @@
           <section class="mini-panel latest-events-card">
             <div class="card-title-row">
               <h4>Latest events</h4>
-              <button class="linkish" type="button">View all events</button>
+              <button class="linkish" id="viewAllEvents" type="button">View all events</button>
             </div>
             <div id="activityFeed" class="activity-feed"><div class="empty">No activity yet.</div></div>
           </section>
 
+          <details class="mini-panel all-events-panel" id="allEventsPanel">
+            <summary>All events</summary>
+            <pre class="events compact-events" id="eventsPanel">No events yet.</pre>
+          </details>
+
           <section class="mini-panel report-card">
             <h4>Report preview</h4>
             <div class="report-home" id="homeReportPreview"><strong>No run selected</strong><p>Select a run to preview its report.</p></div>
@@ -135,6 +154,7 @@
             <button class="filter" data-status="stale">Stale</button>
           </div>
           <div id="runsTable" class="runs-table">Loading runs…</div>
+          <div id="runsPagination" class="runs-pagination"></div>
 
           <section class="selected-run-card">
             <div class="section-head compact">
@@ -200,10 +220,7 @@
         <input id="runSearch" />
         <input id="runId" />
         <textarea id="buildGoal"></textarea>
-        <button id="checkBucket"></button>
-        <button id="createBucket"></button>
         <button id="refreshRuns"></button>
-        <div id="bucketInlineLabel"></div><div id="bucketInlineStatus"></div><span id="bucketInlineDot"></span><span id="sidebarBucketDot"></span>
         <div id="runsTableHome"></div>
         <button id="refreshRunsHome"></button>
         <button id="resumeLatestRunFull"></button>
@@ -216,7 +233,7 @@
         <div id="diagBuildStatus"></div><div id="diagBuildStep"></div>
         <div id="issueCard"><strong id="issueTitle"></strong><p id="issueDetail"></p></div>
         <ul id="metricsList"></ul>
-        <pre id="eventsPanel"></pre><pre id="reportPreview"></pre><div id="artifactList"></div>
+        <pre id="reportPreview"></pre><div id="artifactList"></div>
       </div>
     </main>
   </div>