Spaces:

fffiloni
/

agentic-space-factory-UI-public

Sleeping

App Files Files Community

fffiloni commited on Jun 3

Commit

09aa484

verified ·

1 Parent(s): 8be4404

Upload index.html

Browse files

Files changed (1) hide show

web/index.html +213 -137

web/index.html CHANGED Viewed

@@ -8,200 +8,276 @@
 </head>
 <body>
   <div class="app-shell">
-    <header class="app-header">
-      <div class="brand-lockup">
-        <div class="brand-icon">🚀</div>
         <div>
           <h1>Agentic Space Factory</h1>
-          <p>Turn a Hugging Face model card into a private, testable Space.</p>
         </div>
       </div>
       <div class="top-actions">
-        <span class="bucket-pill"><span class="status-dot green"></span><span id="bucketLabel">Bucket: loading…</span></span>
-        <span class="bucket-pill" id="bucketStatusPill"><span class="status-dot" id="bucketStatusDot"></span><span id="bucketStatusText">Checking…</span></span>
         <span class="user-chip" id="userChip">Sign in</span>
         <a class="logout-link" id="logoutLink" href="/logout" hidden>Logout</a>
       </div>
     </header>
-    <nav class="top-tabs" aria-label="Primary workflow">
-      <button class="nav-item active" data-view="build">New Build</button>
-      <button class="nav-item" data-view="progress">Live Progress</button>
-      <button class="nav-item" data-view="validate">Space Test</button>
-    </nav>
     <main class="main">
       <section class="auth-panel" id="authPanel" hidden></section>
       <section class="operation-status" id="operationStatus" hidden></section>
-      <section data-section="build" class="build-view">
-        <div class="single-column">
-          <section class="bucket-strip">
-            <div>
-              <span class="eyebrow">Run storage</span>
-              <div class="bucket-source"><span class="status-dot" id="bucketInlineDot"></span><strong id="bucketInlineLabel">loading…</strong><span class="badge" id="bucketInlineStatus">Checking</span></div>
-              <p class="muted mini-copy">Runs, logs and artifacts stay in the connected user bucket.</p>
-            </div>
-            <div class="strip-actions">
-              <button class="secondary" id="checkBucket">Check bucket</button>
-              <button class="secondary" id="createBucket">Create private bucket</button>
-            </div>
-          </section>
-          <section class="panel build-card hero-card">
-            <div class="panel-title-row build-title-row">
               <div>
                 <span class="eyebrow">New Build</span>
-                <h2>Prepare a new private Space</h2>
               </div>
-              <button class="secondary small" id="prepareNewBuild">Prepare new build</button>
             </div>
             <div class="build-mode-panel" id="buildModePanel">
               <strong>Preparing a new build</strong>
-              <p>This form always starts a fresh private Space build. Select a previous run in Live progress to inspect it without changing this form.</p>
             </div>
-            <p class="muted">Generate a private Space with Pi, then validate it live. Hardware is ZeroGPU-first with fixed GPU fallback when available.</p>
-            <div class="form-grid compact-form">
               <label>Model card URL or model ID<input id="modelId" value="Tongyi-MAI/Z-Image-Turbo" /></label>
               <label>Target Space name<input id="targetSpace" placeholder="space-factory-z-image-v1" /></label>
-              <label>Pi model<input id="piModel" value="Qwen/Qwen3-Coder-Next" /></label>
-              <label>Implementation mode<select id="implementationMode"><option>full-inference-gated</option><option>full-inference-attempt</option><option>safe-scaffold</option></select></label>
-              <label>Preferred hardware<select id="preferredHardware"><option>zero-a10g</option><option>l40sx1</option><option>a10g-large</option><option>cpu-basic</option></select></label>
-              <label>Fallback hardware<select id="fallbackHardware"><option>l40sx1</option><option>a10g-large</option><option>a100-large</option><option>h200</option></select></label>
-              <label>Expected output type<select id="buildExpectedOutput"><option>text</option><option selected>image</option><option>video</option><option>audio</option><option>any</option></select></label>
             </div>
-            <div class="toggles stacked-toggles">
-              <label><input id="tryZeroGpu" type="checkbox" checked /> <span><strong>Try ZeroGPU first</strong><small>Attempt free dynamic GPU before fixed hardware.</small></span></label>
-              <label><input id="allowFallback" type="checkbox" checked /> <span><strong>Allow fixed GPU fallback</strong><small>Use fallback hardware if ZeroGPU is unavailable.</small></span></label>
-              <label><input type="checkbox" checked disabled /> <span><strong>Private Space</strong><small>Generated Spaces remain private by default.</small></span></label>
-            </div>
-            <button class="primary" id="launchBuild" disabled>Launch new build</button>
             <p class="muted build-gate" id="buildGateText">Checking your run bucket before enabling builds…</p>
           </section>
         </div>
-      </section>
-      <section data-section="progress" hidden>
-        <div class="dashboard-grid">
-          <div class="workspace-column">
-            <section class="progress-card" id="progressCard">
-              <div class="progress-head">
-                <div><span class="eyebrow">Live progress</span><strong id="progressTitle">Live job progress</strong><span class="badge running" id="progressStatus">Idle</span></div>
-                <strong id="progressPercent">0%</strong>
               </div>
-              <div class="progress-bar"><div id="progressFill" style="width:0%"></div></div>
-              <div class="progress-meta compact-meta">
-                <div><span>Current step</span><strong id="currentStep">No run selected</strong></div>
-                <div><span>Last update</span><strong id="lastEvent">Launch a build or select a run to start tracking.</strong></div>
-                <div><span>Elapsed</span><strong id="elapsed">—</strong></div>
-                <div><span>Hardware plan</span><strong id="hardwarePlan">ZeroGPU → fixed GPU fallback</strong></div>
-                <div><span>Last checked</span><strong id="lastPolled">—</strong></div>
               </div>
-              <div class="timeline timeline-compact" id="timeline"></div>
-              <div class="manual-action" id="manualActionPanel" hidden>
-                <div>
-                  <strong id="manualActionTitle">Manual hardware required</strong>
-                  <p id="manualActionText">Automatic hardware selection was not available. Open Space settings, choose the recommended GPU, then run validation.</p>
                 </div>
-                <div class="manual-action-buttons">
-                  <a class="link-btn" id="manualOpenSettings" target="_blank">Open Space settings ↗</a>
-                  <button class="secondary" id="manualGoValidate">Test after hardware change</button>
                 </div>
-              </div>
-              <div class="poll-warning" id="pollWarning" hidden>Progress polling is temporarily unavailable. The Job may still be running; retrying automatically…</div>
-            </section>
-            <div class="bottom-grid">
-              <section class="panel">
-                <div class="panel-head"><h2>Validation & metrics</h2><span class="badge neutral">Live</span></div>
-                <ul class="metric-list" id="metricsList">
-                  <li><span>/health</span><strong>pending</strong></li>
-                  <li><span>/generate smoke test</span><strong>pending</strong></li>
-                  <li><span>Latency</span><strong>—</strong></li>
-                  <li><span>Recommended ZeroGPU duration</span><strong>—</strong></li>
-                </ul>
-              </section>
-              <section class="panel">
-                <div class="panel-head"><h2>Latest events</h2><span class="badge live">Live</span></div>
-                <pre class="events" id="eventsPanel">No events yet.</pre>
               </section>
             </div>
-          </div>
-          <aside class="right-rail">
-            <section class="panel run-explorer home-run-explorer">
-              <div class="panel-head">
-                <div><span class="eyebrow">Connected bucket</span><h2>Run Explorer</h2></div>
-                <button class="secondary small" id="refreshRunsHome">Refresh runs</button>
-              </div>
-              <div class="run-filters compact-filters" id="runFiltersHome">
                 <button class="filter active" data-status="all">All</button>
                 <button class="filter" data-status="running">Running</button>
                 <button class="filter" data-status="full_inference_success">Success</button>
                 <button class="filter" data-status="manual_hardware_required">Manual</button>
                 <button class="filter" data-status="failed">Failed</button>
               </div>
-              <div id="runsTableHome" class="runs-table compact-runs">Loading runs…</div>
-              <p class="muted tiny-note">Filters are instant. Refresh only reloads the bucket.</p>
-            </section>
-            <section class="panel run-details-home">
-              <div class="panel-head"><h2>Run details</h2><span class="badge" id="homeRunDetailStatus">No run</span></div>
-              <div class="detail-grid home-detail-grid">
                 <div><span>Run ID</span><strong id="detailRunId">—</strong></div>
-                <div><span>Job status</span><strong id="detailJobStatus">—</strong></div>
-                <div><span>Gate status</span><strong id="detailGateStatus">—</strong></div>
-                <div><span>Target Space</span><strong id="detailSpace">—</strong></div>
-                <div><span>Hardware</span><strong id="detailHardware">—</strong></div>
-                <div><span>Traces</span><strong id="detailTraces">—</strong></div>
               </div>
-              <div class="quick-links">
-                <a class="link-btn disabled" id="openJob" target="_blank">Job ↗</a>
-                <a class="link-btn disabled" id="openSpace" target="_blank">Space ↗</a>
-                <a class="link-btn disabled" id="openSettings" target="_blank">Settings ↗</a>
-                <a class="link-btn disabled" id="openArtifacts" target="_blank">Artifacts ↗</a>
               </div>
-              <div class="report-home" id="homeReportPreview"><strong>No run selected</strong><p>Select a run to preview its report and actions.</p></div>
-              <button class="secondary full" id="homeValidateBtn" disabled>Test this Space</button>
             </section>
-          </aside>
-        </div>
       </section>
       <section data-section="validate" hidden>
-        <div class="test-layout">
-          <section class="panel large">
-            <div class="panel-title-row"><div><span class="eyebrow">Space Test</span><h2>Validate existing Space</h2></div></div>
-            <p class="muted">Use this to test a generated Space after choosing hardware manually if needed. The validation Job calls the live Space and stores output artifacts + latency in your bucket.</p>
-            <div class="form-grid">
               <label>Target Space ID<input id="validateSpace" placeholder="alice/z-image-demo" /></label>
               <label>API name<input id="validateApi" value="/generate" /></label>
               <label>Expected output type<select id="expectedOutput"><option>image</option><option>video</option><option>audio</option><option>text</option><option>any</option></select></label>
               <label>Timeout seconds<input id="validateTimeout" value="1800" /></label>
             </div>
-            <label>Test args JSON<textarea id="testArgs" rows="4">["a cinematic robot cat astronaut, detailed, studio lighting"]</textarea></label>
-            <label>Test kwargs JSON<textarea id="testKwargs" rows="3">{}</textarea></label>
-            <button class="primary" id="launchValidate">Run smoke test</button>
-          </section>
-          <aside class="panel help-panel">
-            <h2>Before testing</h2>
-            <p class="muted">If the Space needs GPU, open Settings, choose hardware, wait for rebuild, then run this smoke test.</p>
-            <a class="link-btn disabled" id="selectedOpenSettings" target="_blank">Open selected Settings ↗</a>
-            <div class="blockers" id="selectedBlockers" hidden></div>
-          </aside>
-        </div>
       </section>
       <section class="hidden-run-inspector" hidden>
-        <span id="selectedRunId">—</span><span id="selectedModelId">—</span><span id="selectedTargetSpace">—</span><span id="selectedHardware">—</span><span id="runDetailStatus">—</span>
-        <button id="selectedValidateBtn" disabled>Validate this Space</button>
-        <a id="selectedOpenJob" target="_blank"></a><a id="selectedOpenSpace" target="_blank"></a><a id="selectedOpenArtifacts" target="_blank"></a>
-        <ul id="selectedValidation"></ul><div id="artifactList"></div><pre id="reportPreview"></pre>
-        <span id="sidebarBucketDot" hidden></span>
-        <div id="runsTable" hidden></div>
-        <input id="runSearch" hidden />
-        <button id="refreshRuns" hidden></button>
-        <div id="runFilters" hidden></div>
       </section>
     </main>
   </div>

 </head>
 <body>
   <div class="app-shell">
+    <header class="topbar">
+      <div class="brand">
+        <div class="brand-mark">✧</div>
         <div>
           <h1>Agentic Space Factory</h1>
+          <p>Build, validate and recover private Hugging Face Spaces.</p>
         </div>
       </div>
+      <nav class="top-tabs" aria-label="Primary navigation">
+        <button class="nav-item active" data-view="build">Build</button>
+        <button class="nav-item" data-view="progress">Runs</button>
+        <button class="nav-item" data-view="validate">Space Test</button>
+        <button class="nav-item" data-view="about-page">About</button>
+      </nav>
       <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="logout-link" id="logoutLink" href="/logout" hidden>Logout</a>
       </div>
     </header>
     <main class="main">
       <section class="auth-panel" id="authPanel" hidden></section>
       <section class="operation-status" id="operationStatus" hidden></section>
+      <section data-section="build" class="build-workspace">
+        <div class="build-column">
+          <section class="panel build-card">
+            <div class="section-head">
               <div>
                 <span class="eyebrow">New Build</span>
+                <h2>Launch a private Space</h2>
+                <p class="muted">Provide a model and goal. The factory creates a private Space, attempts ZeroGPU first, then validates it live.</p>
               </div>
+              <button class="secondary small" id="prepareNewBuild">Reset</button>
             </div>
             <div class="build-mode-panel" id="buildModePanel">
               <strong>Preparing a new build</strong>
+              <p>This form starts a fresh build. Selecting a run only updates the progress panels.</p>
             </div>
+            <div class="field-stack">
+              <label>Run ID<input id="runId" placeholder="auto-generated if empty" /></label>
               <label>Model card URL or model ID<input id="modelId" value="Tongyi-MAI/Z-Image-Turbo" /></label>
               <label>Target Space name<input id="targetSpace" placeholder="space-factory-z-image-v1" /></label>
+              <label>Goal / notes<textarea id="buildGoal" rows="4" placeholder="What should this Space do? Any constraints or notes?"></textarea></label>
             </div>
+            <details class="settings-box" open>
+              <summary>Execution settings</summary>
+              <div class="form-grid">
+                <label>Pi model<input id="piModel" value="Qwen/Qwen3-Coder-Next" /></label>
+                <label>Implementation mode<select id="implementationMode"><option>full-inference-gated</option><option>full-inference-attempt</option><option>safe-scaffold</option></select></label>
+                <label>Preferred hardware<select id="preferredHardware"><option>zero-a10g</option><option>l40sx1</option><option>a10g-large</option><option>cpu-basic</option></select></label>
+                <label>Fallback hardware<select id="fallbackHardware"><option>l40sx1</option><option>a10g-large</option><option>a100-large</option><option>h200</option></select></label>
+                <label>Expected output type<select id="buildExpectedOutput"><option>text</option><option selected>image</option><option>video</option><option>audio</option><option>any</option></select></label>
+              </div>
+              <div class="toggle-list">
+                <label><span>Try ZeroGPU first <small>Preferred for cost efficiency.</small></span><input id="tryZeroGpu" type="checkbox" checked /></label>
+                <label><span>Allow fixed GPU fallback <small>Use fallback if ZeroGPU is unavailable.</small></span><input id="allowFallback" type="checkbox" checked /></label>
+                <label><span>Private Space <small>Generated Spaces are private by default.</small></span><input type="checkbox" checked disabled /></label>
+              </div>
+            </details>
+            <section class="run-storage-card">
+              <div>
+                <span class="eyebrow">Run storage</span>
+                <strong><span class="status-dot" id="bucketInlineDot"></span><span id="bucketInlineLabel">loading…</span></strong>
+                <p class="muted">Runs, logs, reports and artifacts are saved here.</p>
+              </div>
+              <div class="inline-actions">
+                <button class="secondary small" id="checkBucket">Check bucket</button>
+                <button class="secondary small" id="createBucket">Create private bucket</button>
+              </div>
+              <span class="badge" id="bucketInlineStatus">Checking</span>
+            </section>
+            <section class="launch-summary">
+              <strong>Launch summary</strong>
+              <ul>
+                <li>Creates a private Space under your account.</li>
+                <li>Uses ZeroGPU first, if enabled.</li>
+                <li>Falls back to fixed GPU when allowed.</li>
+                <li>Saves all logs, artifacts and reports to your bucket.</li>
+              </ul>
+            </section>
+            <button class="primary" id="launchBuild" disabled>Build private Space</button>
             <p class="muted build-gate" id="buildGateText">Checking your run bucket before enabling builds…</p>
           </section>
         </div>
+        <div class="runs-column">
+          <section class="panel runs-panel">
+            <div class="section-head compact">
+              <div>
+                <span class="eyebrow">Runs & Progress</span>
+                <h2>Inspect running and previous builds</h2>
               </div>
+              <div class="inline-actions">
+                <button class="secondary small" id="resumeLatestRun">Resume latest</button>
+                <button class="secondary small" id="refreshRunsHome">Refresh</button>
               </div>
+            </div>
+            <div class="runs-layout">
+              <aside class="run-list-card">
+                <div class="search-wrap"><input id="runSearch" placeholder="Search runs…" /><span>⌕</span></div>
+                <div class="run-filters" id="runFiltersHome">
+                  <button class="filter active" data-status="all">All</button>
+                  <button class="filter" data-status="running">Running</button>
+                  <button class="filter" data-status="full_inference_success">Success</button>
+                  <button class="filter" data-status="manual_hardware_required">Manual</button>
+                  <button class="filter" data-status="failed">Failed</button>
                 </div>
+                <div id="runsTableHome" class="runs-table compact-runs">Loading runs…</div>
+                <button class="text-link" data-view-target="progress">View full runs →</button>
+              </aside>
+              <section class="run-detail-card">
+                <div class="run-summary-card" id="runSummaryCard">
+                  <div>
+                    <span class="badge neutral" id="progressStatus">Idle</span>
+                    <h3 id="progressTitle">No run selected</h3>
+                    <p class="muted" id="lastEvent">Launch a build or select a run.</p>
+                  </div>
+                  <div class="summary-meta">
+                    <div><span>Target Space</span><strong id="detailSpace">—</strong></div>
+                    <div><span>Current phase</span><strong id="currentStep">—</strong></div>
+                    <div><span>Elapsed</span><strong id="elapsed">—</strong></div>
+                    <div><span>Last checked</span><strong id="lastPolled">—</strong></div>
+                  </div>
+                  <div class="quick-links">
+                    <a class="link-btn disabled" id="openJob" target="_blank">Open Job ↗</a>
+                    <a class="link-btn disabled" id="openSpace" target="_blank">Open Space ↗</a>
+                    <a class="link-btn disabled" id="openSettings" target="_blank">Open Settings</a>
+                    <a class="link-btn disabled" id="openArtifacts" target="_blank">Artifacts</a>
+                  </div>
                 </div>
+                <div class="progress-bar"><div id="progressFill" style="width:0%"></div></div>
+                <div class="progress-percent"><strong id="progressPercent">0%</strong><span id="hardwarePlan">ZeroGPU → fixed GPU fallback</span></div>
+                <div class="timeline" id="timeline"></div>
+                <div class="manual-action" id="manualActionPanel" hidden>
+                  <div><strong id="manualActionTitle">Manual hardware required</strong><p id="manualActionText">Open Space settings, choose the recommended GPU, then run Space Test.</p></div>
+                  <div class="inline-actions"><a class="link-btn" id="manualOpenSettings" target="_blank">Open Space settings ↗</a><button class="secondary small" id="manualGoValidate">Prepare Space Test</button></div>
+                </div>
+                <div class="poll-warning" id="pollWarning" hidden>Progress polling is temporarily unavailable. Retrying automatically…</div>
+                <div class="detail-grid three">
+                  <section class="mini-panel">
+                    <h4>Activity</h4>
+                    <div id="activityFeed" class="activity-feed"><div class="empty">No activity yet.</div></div>
+                  </section>
+                  <section class="mini-panel">
+                    <h4>Diagnostics</h4>
+                    <div class="diagnostic-list">
+                      <div><span>Status</span><strong id="detailJobStatus">—</strong></div>
+                      <div><span>Gate</span><strong id="detailGateStatus">—</strong></div>
+                      <div><span>Hardware</span><strong id="detailHardware">—</strong></div>
+                      <div><span>Events</span><strong id="detailTraces">—</strong></div>
+                    </div>
+                    <div id="statusChips" class="status-chips"></div>
+                    <div class="issue-card" id="issueCard" hidden><strong id="issueTitle">Issue</strong><p id="issueDetail">—</p></div>
+                  </section>
+                  <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 and actions.</p></div>
+                    <button class="secondary full" id="homeValidateBtn" disabled>Test this Space</button>
+                  </section>
+                </div>
               </section>
             </div>
+          </section>
+        </div>
+      </section>
+      <section data-section="progress" hidden>
+        <section class="panel full-runs-panel">
+          <div class="section-head">
+            <div><span class="eyebrow">Run Explorer</span><h2>All bucket runs</h2><p class="muted">Search, filter, inspect reports and resume progress from any run.</p></div>
+            <div class="inline-actions"><button class="secondary small" id="refreshRuns">Refresh runs</button><button class="secondary small" id="resumeLatestRunFull">Resume latest</button></div>
+          </div>
+          <div class="full-runs-grid">
+            <aside>
+              <div class="search-wrap"><input id="runSearchFull" placeholder="Search runs…" /><span>⌕</span></div>
+              <div class="run-filters" id="runFilters">
                 <button class="filter active" data-status="all">All</button>
                 <button class="filter" data-status="running">Running</button>
                 <button class="filter" data-status="full_inference_success">Success</button>
                 <button class="filter" data-status="manual_hardware_required">Manual</button>
                 <button class="filter" data-status="failed">Failed</button>
               </div>
+              <div id="runsTable" class="runs-table">Loading runs…</div>
+            </aside>
+            <section class="run-detail-card expanded">
+              <div class="detail-grid four">
                 <div><span>Run ID</span><strong id="detailRunId">—</strong></div>
+                <div><span>Status</span><strong id="homeRunDetailStatus">No run</strong></div>
+                <div><span>Target Space</span><strong id="selectedTargetSpace">—</strong></div>
+                <div><span>Hardware</span><strong id="selectedHardware">—</strong></div>
+                <div><span>Model</span><strong id="selectedModelId">—</strong></div>
+                <div><span>Selected Run</span><strong id="selectedRunId">—</strong></div>
+                <div><span>Run detail status</span><strong id="runDetailStatus">—</strong></div>
+              </div>
+              <div class="quick-links extra-links">
+                <a class="link-btn disabled" id="selectedOpenJob" target="_blank">Job ↗</a>
+                <a class="link-btn disabled" id="selectedOpenSpace" target="_blank">Space ↗</a>
+                <a class="link-btn disabled" id="selectedOpenSettings" target="_blank">Settings ↗</a>
+                <a class="link-btn disabled" id="selectedOpenArtifacts" target="_blank">Artifacts ↗</a>
+                <button class="secondary" id="selectedValidateBtn" disabled>Validate this Space</button>
               </div>
+              <div class="blockers" id="selectedBlockers" hidden></div>
+              <div class="split-panels">
+                <section class="mini-panel"><h4>Validation & metrics</h4><ul class="metric-list" id="metricsList"><li><span>/health</span><strong>pending</strong></li><li><span>/generate smoke test</span><strong>pending</strong></li><li><span>Latency</span><strong>—</strong></li><li><span>Recommended ZeroGPU duration</span><strong>—</strong></li></ul><ul id="selectedValidation" hidden></ul></section>
+                <section class="mini-panel"><h4>Artifacts</h4><div id="artifactList" class="artifact-list">No artifacts indexed yet.</div></section>
               </div>
+              <section class="mini-panel"><h4>Full report</h4><pre id="reportPreview" class="report-preview">No report selected.</pre></section>
             </section>
+          </div>
+        </section>
       </section>
       <section data-section="validate" hidden>
+        <section class="panel validate-panel">
+          <div class="section-head">
+            <div><span class="eyebrow">Space Test</span><h2>Validate an existing Space</h2><p class="muted">Call the live Gradio API, verify output type, measure latency and store artifacts.</p></div>
+            <span class="badge neutral" id="spaceTestStatus">Pending</span>
+          </div>
+          <div class="validate-grid">
+            <div class="field-stack">
               <label>Target Space ID<input id="validateSpace" placeholder="alice/z-image-demo" /></label>
               <label>API name<input id="validateApi" value="/generate" /></label>
               <label>Expected output type<select id="expectedOutput"><option>image</option><option>video</option><option>audio</option><option>text</option><option>any</option></select></label>
               <label>Timeout seconds<input id="validateTimeout" value="1800" /></label>
+              <button class="primary" id="launchValidate">Run smoke test</button>
             </div>
+            <div class="field-stack">
+              <label>Test args JSON<textarea id="testArgs" rows="7">["a cinematic robot cat astronaut, detailed, studio lighting"]</textarea></label>
+              <label>Test kwargs JSON<textarea id="testKwargs" rows="5">{}</textarea></label>
+            </div>
+            <div class="result-card" id="spaceTestPreview">
+              <h3>Result</h3>
+              <div class="diagnostic-list">
+                <div><span>Status</span><strong id="spaceTestOutput">Waiting for API test</strong></div>
+                <div><span>Verdict</span><strong id="spaceTestVerdict">pending</strong></div>
+              </div>
+              <p class="muted">Validation runs as an HF Job and writes its report to the same bucket.</p>
+            </div>
+          </div>
+        </section>
+      </section>
+      <section data-section="about-page" hidden>
+        <section class="panel about-panel">
+          <span class="eyebrow">About</span>
+          <h2>What this factory does</h2>
+          <p>Agentic Space Factory turns a Hugging Face model card into a private, testable Gradio Space. It attempts ZeroGPU first, can fall back to fixed GPU hardware, and validates success against the deployed live Space.</p>
+          <div class="about-grid">
+            <div><h3>Possible outcomes</h3><ul><li>full_inference_success</li><li>manual_hardware_required</li><li>full_inference_candidate_health_passed</li><li>health_only</li><li>technical_blocker</li><li>failed</li></ul></div>
+            <div><h3>Guarantees</h3><ul><li>Spaces are private by default.</li><li>Runs are stored in your private bucket.</li><li>Success is based on the live Space, not only generated files.</li></ul></div>
+          </div>
+        </section>
       </section>
       <section class="hidden-run-inspector" hidden>
+        <span>Live job progress</span><span>Run details</span><span>Validation & metrics</span><span>Latest events</span>
+        <span id="sidebarBucketDot"></span>
+        <a id="runHeaderSpace" target="_blank"></a>
+        <div id="diagBuildStatus"></div><div id="diagBuildStep"></div><ul id="zeroGpuChecklist"></ul>
+        <pre class="events" id="eventsPanel">No events yet.</pre>
       </section>
     </main>
   </div>