Spaces:

jonathanagustin
/

builder

Running

App Files Files Community

Claude commited on Dec 6, 2025

Commit

c884704

1 Parent(s): 19d9809

feat(builder): single-page dashboard with registry push fields

Browse files

Files changed (1) hide show

app.py +136 -154

app.py CHANGED Viewed

@@ -1096,6 +1096,34 @@ def render_logs_html() -> str:
     return "".join(f'<div class="log-line">{line}</div>' for line in logs[-60:])
 @app.route("/")
 def index():
     return render_template_string(HTML_TEMPLATE,
@@ -1104,6 +1132,8 @@ def index():
         current_html=render_current_build_html(),
         history_html=render_history_html(),
         logs_html=render_logs_html(),
     )
@@ -1127,6 +1157,16 @@ def logs_partial():
     return render_logs_html()
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
@@ -1157,107 +1197,51 @@ HTML_TEMPLATE = """
         .main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
         /* Header */
-        .header { margin-bottom: 2rem; }
-        .header h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }
-        .header-meta {
-            display: flex;
-            gap: 1.5rem;
-            margin-top: 0.5rem;
-            font-size: 0.8125rem;
-            color: var(--text-muted);
-        }
-        .header-meta a { color: var(--accent); text-decoration: none; }
-        .header-meta a:hover { text-decoration: underline; }
         /* Stats */
-        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
-        .stat-card {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 0.75rem;
-            padding: 1.25rem;
-        }
-        .stat-label {
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.5rem;
-        }
-        .stat-value {
-            font-size: 1.75rem;
-            font-weight: 600;
-            font-variant-numeric: tabular-nums;
-        }
         .stat-value.success { color: var(--green); }
         .stat-value.failed { color: var(--red); }
         /* Panels */
         .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
-        .panel {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 0.75rem;
-            overflow: hidden;
-        }
         .panel.full { grid-column: span 2; }
-        .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem 1.25rem;
-            border-bottom: 1px solid var(--border);
-        }
         .panel-title { font-size: 0.875rem; font-weight: 500; }
         .panel-body { padding: 1rem 1.25rem; max-height: 320px; overflow-y: auto; }
         /* Buttons */
-        .btn {
-            background: var(--accent);
-            color: var(--bg);
-            border: none;
-            padding: 0.5rem 1rem;
-            border-radius: 0.5rem;
-            font-size: 0.8125rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: opacity 0.15s;
-        }
         .btn:hover { opacity: 0.9; }
         .btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
         .btn-danger { background: var(--red); }
-        .btn-ghost {
-            background: transparent;
-            color: var(--text-muted);
-            border: 1px solid var(--border);
-        }
-        .btn-ghost:hover { background: var(--border); color: var(--text); }
         /* Dot */
-        .dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
         .dot.idle { background: var(--text-muted); }
         .dot.building { background: var(--accent); animation: pulse 2s infinite; }
         .dot.success { background: var(--green); }
         .dot.failed { background: var(--red); }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
         /* Build items */
-        .build-item {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            padding: 0.75rem 0;
-            border-bottom: 1px solid var(--border);
-        }
         .build-item:last-child { border-bottom: none; }
         .build-item.active { background: rgba(245, 158, 11, 0.05); margin: -0.5rem -0.25rem; padding: 0.75rem; border-radius: 0.5rem; }
         .build-status { display: flex; align-items: center; gap: 0.5rem; min-width: 100px; }
@@ -1267,93 +1251,57 @@ HTML_TEMPLATE = """
         .build-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }
         /* Badge */
-        .badge {
-            font-size: 0.6875rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            padding: 0.125rem 0.5rem;
-            border-radius: 0.25rem;
-            background: var(--border);
-            color: var(--text-muted);
-        }
         .badge.success { background: rgba(74, 222, 128, 0.15); color: var(--green); }
         .badge.failed { background: rgba(248, 113, 113, 0.15); color: var(--red); }
         /* Form */
-        .form-grid { display: grid; gap: 1rem; }
-        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-        .form-group label {
-            display: block;
-            font-size: 0.75rem;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.375rem;
-        }
-        .form-group input {
-            width: 100%;
-            padding: 0.625rem 0.75rem;
-            background: var(--bg);
-            border: 1px solid var(--border);
-            border-radius: 0.5rem;
-            color: var(--text);
-            font-family: ui-monospace, monospace;
-            font-size: 0.875rem;
-        }
-        .form-group input:focus {
-            outline: none;
-            border-color: var(--accent);
-        }
         .form-group input::placeholder { color: var(--text-muted); }
         /* Logs */
-        .logs-panel {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 0.75rem;
-            overflow: hidden;
-        }
-        .logs-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem 1rem;
-            border-bottom: 1px solid var(--border);
-            background: rgba(0,0,0,0.2);
-        }
         .logs-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
-        .logs {
-            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-            font-size: 0.75rem;
-            line-height: 1.5;
-            padding: 1rem;
-            max-height: 220px;
-            overflow-y: auto;
-            background: var(--bg);
-        }
         .log-line { color: var(--text-muted); }
         .log-line:hover { color: var(--text); }
         .empty { color: var(--text-muted); font-size: 0.875rem; padding: 1rem 0; text-align: center; }
         @media (max-width: 768px) {
             .stats { grid-template-columns: repeat(2, 1fr); }
             .panels { grid-template-columns: 1fr; }
             .panel.full { grid-column: span 1; }
-            .form-row { grid-template-columns: 1fr; }
         }
     </style>
 </head>
 <body>
     <div class="main">
         <div class="header">
-            <h1>Builder</h1>
-            <div class="header-meta">
-                <span>{{ config.runner_id }}</span>
-                <span>{{ config.registry_url }}</span>
-                <a href="/badge">badge</a>
-                <a href="/api/metrics">metrics</a>
             </div>
         </div>
@@ -1386,30 +1334,64 @@ HTML_TEMPLATE = """
                 </div>
                 <div class="panel-body">
                     <form hx-post="/api/build" hx-swap="none" class="form-grid">
-                        <div class="form-group">
-                            <label>Repository URL</label>
-                            <input type="text" name="repo_url" placeholder="https://github.com/owner/repo" required>
-                        </div>
                         <div class="form-row">
                             <div class="form-group">
-                                <label>Image Name</label>
-                                <input type="text" name="image_name" placeholder="owner/repo" required>
                             </div>
                             <div class="form-group">
                                 <label>Branch</label>
                                 <input type="text" name="branch" value="main">
                             </div>
                         </div>
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label>Tags (comma-separated)</label>
-                                <input type="text" name="tags" value="latest">
                             </div>
-                            <div class="form-group">
-                                <label>Dockerfile</label>
-                                <input type="text" name="dockerfile" value="Dockerfile">
                             </div>
                         </div>
                         <button type="submit" class="btn">Build & Push</button>
                     </form>
                 </div>

     return "".join(f'<div class="log-line">{line}</div>' for line in logs[-60:])
+def render_badge_html() -> str:
+    """Render inline badge."""
+    history = state.get_history(1)
+    if not history:
+        status, color = "no builds", "#737373"
+    elif history[0]["status"] == "success":
+        status, color = "passing", "#4ade80"
+    elif state.is_building:
+        status, color = "building", "#f59e0b"
+    else:
+        status, color = "failing", "#f87171"
+    return f'<span class="status-badge" style="background: {color}20; color: {color}; border: 1px solid {color}40;">{status}</span>'
+def render_metrics_html() -> str:
+    """Render metrics panel."""
+    metrics = state.get_metrics()
+    return f"""
+<div class="metrics-grid">
+    <div class="metric"><span class="metric-label">Success</span><span class="metric-value" style="color: var(--green);">{metrics['builds_completed']}</span></div>
+    <div class="metric"><span class="metric-label">Failed</span><span class="metric-value" style="color: var(--red);">{metrics['builds_failed']}</span></div>
+    <div class="metric"><span class="metric-label">Total</span><span class="metric-value">{metrics['builds_total']}</span></div>
+    <div class="metric"><span class="metric-label">Rate</span><span class="metric-value">{metrics['success_rate']*100:.0f}%</span></div>
+    <div class="metric"><span class="metric-label">Avg Time</span><span class="metric-value">{metrics['avg_duration_seconds']:.1f}s</span></div>
+</div>
+"""
 @app.route("/")
 def index():
     return render_template_string(HTML_TEMPLATE,
         current_html=render_current_build_html(),
         history_html=render_history_html(),
         logs_html=render_logs_html(),
+        badge_html=render_badge_html(),
+        metrics_html=render_metrics_html(),
     )
     return render_logs_html()
+@app.route("/badge-partial")
+def badge_partial():
+    return render_badge_html()
+@app.route("/metrics-partial")
+def metrics_partial():
+    return render_metrics_html()
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
         .main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
         /* Header */
+        .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
+        .header-left h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; display: flex; align-items: center; gap: 0.75rem; }
+        .header-meta { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); font-family: ui-monospace, monospace; }
+        .status-badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.625rem; border-radius: 9999px; }
+        /* Metrics bar */
+        .metrics-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; }
+        .metrics-grid { display: flex; gap: 1.5rem; }
+        .metric { display: flex; flex-direction: column; align-items: center; }
+        .metric-label { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+        .metric-value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
         /* Stats */
+        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
+        .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; }
+        .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+        .stat-value { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
         .stat-value.success { color: var(--green); }
         .stat-value.failed { color: var(--red); }
         /* Panels */
         .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
+        .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
         .panel.full { grid-column: span 2; }
+        .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
         .panel-title { font-size: 0.875rem; font-weight: 500; }
         .panel-body { padding: 1rem 1.25rem; max-height: 320px; overflow-y: auto; }
         /* Buttons */
+        .btn { background: var(--accent); color: var(--bg); border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s; }
         .btn:hover { opacity: 0.9; }
         .btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
         .btn-danger { background: var(--red); }
         /* Dot */
+        .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
         .dot.idle { background: var(--text-muted); }
         .dot.building { background: var(--accent); animation: pulse 2s infinite; }
         .dot.success { background: var(--green); }
         .dot.failed { background: var(--red); }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
         /* Build items */
+        .build-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
         .build-item:last-child { border-bottom: none; }
         .build-item.active { background: rgba(245, 158, 11, 0.05); margin: -0.5rem -0.25rem; padding: 0.75rem; border-radius: 0.5rem; }
         .build-status { display: flex; align-items: center; gap: 0.5rem; min-width: 100px; }
         .build-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }
         /* Badge */
+        .badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: var(--border); color: var(--text-muted); }
         .badge.success { background: rgba(74, 222, 128, 0.15); color: var(--green); }
         .badge.failed { background: rgba(248, 113, 113, 0.15); color: var(--red); }
         /* Form */
+        .form-grid { display: grid; gap: 0.875rem; }
+        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
+        .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.875rem; }
+        .form-group label { display: block; font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+        .form-group input { width: 100%; padding: 0.5rem 0.625rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.375rem; color: var(--text); font-family: ui-monospace, monospace; font-size: 0.8125rem; }
+        .form-group input:focus { outline: none; border-color: var(--accent); }
         .form-group input::placeholder { color: var(--text-muted); }
+        .form-hint { font-size: 0.625rem; color: var(--text-muted); margin-top: 0.25rem; }
+        .form-section { border-top: 1px solid var(--border); padding-top: 0.875rem; margin-top: 0.5rem; }
+        .form-section-title { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
         /* Logs */
+        .logs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
+        .logs-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); }
         .logs-title { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
+        .logs { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.75rem; line-height: 1.5; padding: 1rem; max-height: 220px; overflow-y: auto; background: var(--bg); }
         .log-line { color: var(--text-muted); }
         .log-line:hover { color: var(--text); }
         .empty { color: var(--text-muted); font-size: 0.875rem; padding: 1rem 0; text-align: center; }
         @media (max-width: 768px) {
+            .header { flex-direction: column; gap: 1rem; }
             .stats { grid-template-columns: repeat(2, 1fr); }
             .panels { grid-template-columns: 1fr; }
             .panel.full { grid-column: span 1; }
+            .form-row, .form-row-3 { grid-template-columns: 1fr; }
+            .metrics-grid { flex-wrap: wrap; }
         }
     </style>
 </head>
 <body>
     <div class="main">
         <div class="header">
+            <div class="header-left">
+                <h1>
+                    Builder
+                    <span id="badge" hx-get="/badge-partial" hx-trigger="every 5s" hx-swap="innerHTML">{{ badge_html | safe }}</span>
+                </h1>
+                <div class="header-meta">
+                    <span>{{ config.runner_id }}</span>
+                    <span>{{ config.registry_url }}</span>
+                </div>
+            </div>
+            <div class="metrics-bar" id="metrics" hx-get="/metrics-partial" hx-trigger="every 5s" hx-swap="innerHTML">
+                {{ metrics_html | safe }}
             </div>
         </div>
                 </div>
                 <div class="panel-body">
                     <form hx-post="/api/build" hx-swap="none" class="form-grid">
                         <div class="form-row">
                             <div class="form-group">
+                                <label>Repository URL</label>
+                                <input type="text" name="repo_url" placeholder="https://github.com/owner/repo" required>
                             </div>
                             <div class="form-group">
                                 <label>Branch</label>
                                 <input type="text" name="branch" value="main">
                             </div>
                         </div>
+                        <div class="form-section">
+                            <div class="form-section-title">Push Destination</div>
+                            <div class="form-row-3">
+                                <div class="form-group">
+                                    <label>Registry</label>
+                                    <input type="text" name="registry_url" placeholder="ghcr.io" value="{{ config.registry_url }}">
+                                </div>
+                                <div class="form-group">
+                                    <label>Image Name</label>
+                                    <input type="text" name="image_name" placeholder="owner/repo" required>
+                                </div>
+                                <div class="form-group">
+                                    <label>Tags</label>
+                                    <input type="text" name="tags" value="latest" placeholder="latest,v1.0">
+                                </div>
                             </div>
+                        </div>
+                        <div class="form-section">
+                            <div class="form-section-title">Build Options</div>
+                            <div class="form-row-3">
+                                <div class="form-group">
+                                    <label>Dockerfile</label>
+                                    <input type="text" name="dockerfile" value="Dockerfile">
+                                </div>
+                                <div class="form-group">
+                                    <label>Context Path</label>
+                                    <input type="text" name="context_path" value="." placeholder=".">
+                                </div>
+                                <div class="form-group">
+                                    <label>Platform</label>
+                                    <input type="text" name="platform" placeholder="linux/amd64">
+                                </div>
+                            </div>
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label>Build Args</label>
+                                    <input type="text" name="build_args" placeholder="KEY=value,KEY2=value2">
+                                    <div class="form-hint">Comma-separated key=value pairs</div>
+                                </div>
+                                <div class="form-group">
+                                    <label>GitHub Token (for private repos)</label>
+                                    <input type="password" name="github_token" placeholder="ghp_...">
+                                </div>
                             </div>
                         </div>
                         <button type="submit" class="btn">Build & Push</button>
                     </form>
                 </div>