feat(builder): landscape layout with logs sidebar, env var defaults

app.py

@@ -147,12 +147,17 @@ class NotifyOn(Enum):
 class Config:
     """Application configuration from environment variables."""
 
-    registry_url: str = field(default_factory=lambda: os.getenv("REGISTRY_URL", "ghcr.io"))
+    registry_url: str = field(default_factory=lambda: os.getenv("REGISTRY_URL", "ghcr.io/drengskapur"))
     registry_user: str = field(default_factory=lambda: os.getenv("REGISTRY_USER", ""))
     registry_password: str = field(default_factory=lambda: os.getenv("REGISTRY_PASSWORD", ""))
     github_token: str = field(default_factory=lambda: os.getenv("GITHUB_TOKEN", ""))
     webhook_secret: str = field(default_factory=lambda: os.getenv("WEBHOOK_SECRET", ""))
     default_image: str = field(default_factory=lambda: os.getenv("DEFAULT_IMAGE", ""))
+    default_branch: str = field(default_factory=lambda: os.getenv("DEFAULT_BRANCH", "main"))
+    default_tags: str = field(default_factory=lambda: os.getenv("DEFAULT_TAGS", "latest"))
+    default_dockerfile: str = field(default_factory=lambda: os.getenv("DEFAULT_DOCKERFILE", "Dockerfile"))
+    default_context: str = field(default_factory=lambda: os.getenv("DEFAULT_CONTEXT", "."))
+    default_platform: str = field(default_factory=lambda: os.getenv("DEFAULT_PLATFORM", ""))
     runner_id: str = field(default_factory=lambda: os.getenv("RUNNER_ID", str(uuid.uuid4())[:8]))
     build_timeout: int = field(default_factory=lambda: int(os.getenv("BUILD_TIMEOUT", "1800")))
     enable_cache: bool = field(default_factory=lambda: os.getenv("ENABLE_CACHE", "").lower() == "true")
@@ -1194,218 +1199,218 @@ HTML_TEMPLATE = """
             color: var(--text);
             min-height: 100vh;
         }
-        .main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
+
+        /* Landscape layout */
+        .layout { display: grid; grid-template-columns: 340px 1fr; min-height: 100vh; }
+
+        /* Left sidebar - Logs */
+        .sidebar {
+            background: var(--surface);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+        }
+        .sidebar-header {
+            padding: 1rem 1.25rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .sidebar-title { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+        .logs {
+            flex: 1;
+            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+            font-size: 0.6875rem;
+            line-height: 1.6;
+            padding: 0.75rem 1rem;
+            overflow-y: auto;
+            background: var(--bg);
+        }
+        .log-line { color: var(--text-muted); white-space: pre-wrap; word-break: break-all; }
+        .log-line:hover { color: var(--text); }
+
+        /* Main content */
+        .main { padding: 1.5rem 2rem; overflow-y: auto; }
 
         /* 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; }
+        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+        .header-left h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; display: flex; align-items: center; gap: 0.625rem; }
+        .header-meta { display: flex; gap: 0.75rem; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--text-muted); font-family: ui-monospace, monospace; }
+        .status-badge { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1875rem 0.5rem; border-radius: 9999px; }
+
+        /* Stats row */
+        .stats { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
+        .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem; flex: 1; }
+        .stat-label { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
+        .stat-value { font-size: 1.25rem; 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; }
+        /* Panels grid */
+        .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
+        .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; 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; }
+        .panel-header { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); }
+        .panel-title { font-size: 0.6875rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+        .panel-body { padding: 0.75rem 0.875rem; max-height: 180px; 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 { background: var(--accent); color: var(--bg); border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.75rem; 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-sm { padding: 0.1875rem 0.5rem; font-size: 0.625rem; }
         .btn-danger { background: var(--red); }
 
         /* Dot */
-        .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+        .dot { width: 6px; height: 6px; 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 { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 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-id { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--text-muted); }
+        .build-item.active { background: rgba(245, 158, 11, 0.05); margin: -0.25rem -0.375rem; padding: 0.5rem 0.375rem; border-radius: 0.375rem; }
+        .build-status { display: flex; align-items: center; gap: 0.375rem; }
+        .build-id { font-family: ui-monospace, monospace; font-size: 0.625rem; color: var(--text-muted); }
         .build-info { flex: 1; min-width: 0; }
-        .build-image { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .build-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }
+        .build-image { font-size: 0.75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .build-meta { display: flex; gap: 0.625rem; font-size: 0.625rem; color: var(--text-muted); }
 
         /* 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 { font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.0625rem 0.375rem; border-radius: 0.1875rem; 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-grid { display: grid; gap: 0.625rem; }
+        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
+        .form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
+        .form-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.625rem; }
+        .form-group label { display: block; font-size: 0.5625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.1875rem; }
+        .form-group input { width: 100%; padding: 0.375rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.25rem; color: var(--text); font-family: ui-monospace, monospace; font-size: 0.6875rem; }
         .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); }
+        .form-actions { display: flex; justify-content: flex-end; margin-top: 0.25rem; }
 
-        .empty { color: var(--text-muted); font-size: 0.875rem; padding: 1rem 0; text-align: center; }
+        .empty { color: var(--text-muted); font-size: 0.75rem; padding: 0.75rem 0; text-align: center; }
 
-        @media (max-width: 768px) {
-            .header { flex-direction: column; gap: 1rem; }
-            .stats { grid-template-columns: repeat(2, 1fr); }
+        @media (max-width: 1024px) {
+            .layout { grid-template-columns: 1fr; }
+            .sidebar { display: none; }
             .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; }
+            .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; }
         }
     </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 class="layout">
+        <div class="sidebar">
+            <div class="sidebar-header">
+                <span class="sidebar-title">Logs</span>
+                <span id="badge" hx-get="/badge-partial" hx-trigger="every 5s" hx-swap="innerHTML">{{ badge_html | safe }}</span>
             </div>
-            <div class="metrics-bar" id="metrics" hx-get="/metrics-partial" hx-trigger="every 5s" hx-swap="innerHTML">
-                {{ metrics_html | safe }}
+            <div id="logs" class="logs" hx-get="/logs-partial" hx-trigger="every 2s" hx-swap="innerHTML">
+                {{ logs_html | safe }}
             </div>
         </div>
 
-        <div class="stats" id="stats" hx-get="/stats-partial" hx-trigger="every 3s" hx-swap="innerHTML">
-            {{ stats_html | safe }}
-        </div>
-
-        <div class="panels">
-            <div class="panel">
-                <div class="panel-header">
-                    <span class="panel-title">Current Build</span>
-                </div>
-                <div class="panel-body" id="current" hx-get="/current-partial" hx-trigger="every 2s" hx-swap="innerHTML">
-                    {{ current_html | safe }}
+        <div class="main">
+            <div class="header">
+                <div class="header-left">
+                    <h1>Builder</h1>
+                    <div class="header-meta">
+                        <span>{{ config.runner_id }}</span>
+                        <span>{{ config.registry_url }}</span>
+                    </div>
                 </div>
             </div>
 
-            <div class="panel">
-                <div class="panel-header">
-                    <span class="panel-title">Build History</span>
-                </div>
-                <div class="panel-body" id="history" hx-get="/history-partial" hx-trigger="every 5s" hx-swap="innerHTML">
-                    {{ history_html | safe }}
-                </div>
+            <div class="stats" id="stats" hx-get="/stats-partial" hx-trigger="every 3s" hx-swap="innerHTML">
+                {{ stats_html | safe }}
             </div>
 
-            <div class="panel full">
-                <div class="panel-header">
-                    <span class="panel-title">New Build</span>
+            <div class="panels">
+                <div class="panel">
+                    <div class="panel-header">
+                        <span class="panel-title">Current Build</span>
+                    </div>
+                    <div class="panel-body" id="current" hx-get="/current-partial" hx-trigger="every 2s" hx-swap="innerHTML">
+                        {{ current_html | safe }}
+                    </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="panel">
+                    <div class="panel-header">
+                        <span class="panel-title">History</span>
+                    </div>
+                    <div class="panel-body" id="history" hx-get="/history-partial" hx-trigger="every 5s" hx-swap="innerHTML">
+                        {{ history_html | safe }}
+                    </div>
+                </div>
+
+                <div class="panel full">
+                    <div class="panel-header">
+                        <span class="panel-title">New Build</span>
+                    </div>
+                    <div class="panel-body">
+                        <form hx-post="/api/build" hx-swap="none" class="form-grid">
+                            <div class="form-row-4">
+                                <div class="form-group" style="grid-column: span 2;">
+                                    <label>Repository URL</label>
+                                    <input type="text" name="repo_url" placeholder="https://github.com/owner/repo" required>
+                                </div>
                                 <div class="form-group">
-                                    <label>Registry</label>
-                                    <input type="text" name="registry_url" placeholder="ghcr.io" value="{{ config.registry_url }}">
+                                    <label>Branch</label>
+                                    <input type="text" name="branch" value="{{ config.default_branch }}">
                                 </div>
                                 <div class="form-group">
                                     <label>Image Name</label>
-                                    <input type="text" name="image_name" placeholder="owner/repo" required>
+                                    <input type="text" name="image_name" value="{{ config.default_image }}" placeholder="owner/repo" required>
+                                </div>
+                            </div>
+                            <div class="form-row-4">
+                                <div class="form-group">
+                                    <label>Registry</label>
+                                    <input type="text" name="registry_url" value="{{ config.registry_url }}">
                                 </div>
                                 <div class="form-group">
                                     <label>Tags</label>
-                                    <input type="text" name="tags" value="latest" placeholder="latest,v1.0">
+                                    <input type="text" name="tags" value="{{ config.default_tags }}">
                                 </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">
+                                    <input type="text" name="dockerfile" value="{{ config.default_dockerfile }}">
                                 </div>
                                 <div class="form-group">
-                                    <label>Context Path</label>
-                                    <input type="text" name="context_path" value="." placeholder=".">
+                                    <label>Context</label>
+                                    <input type="text" name="context_path" value="{{ config.default_context }}">
                                 </div>
+                            </div>
+                            <div class="form-row-4">
                                 <div class="form-group">
                                     <label>Platform</label>
-                                    <input type="text" name="platform" placeholder="linux/amd64">
+                                    <input type="text" name="platform" value="{{ config.default_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>
+                                    <input type="text" name="build_args" placeholder="KEY=val,KEY2=val">
                                 </div>
                                 <div class="form-group">
-                                    <label>GitHub Token (for private repos)</label>
+                                    <label>GitHub Token</label>
                                     <input type="password" name="github_token" placeholder="ghp_...">
                                 </div>
+                                <div class="form-actions">
+                                    <button type="submit" class="btn">Build & Push</button>
+                                </div>
                             </div>
-                        </div>
-
-                        <button type="submit" class="btn">Build & Push</button>
-                    </form>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
-
-        <div class="logs-panel">
-            <div class="logs-header">
-                <span class="logs-title">Logs</span>
-            </div>
-            <div id="logs" class="logs" hx-get="/logs-partial" hx-trigger="every 2s" hx-swap="innerHTML">
-                {{ logs_html | safe }}
-            </div>
-        </div>
     </div>
 </body>
 </html>