Widen the app page, double its log heights and move the logs (closes #246)

The app page's content column is now at most 84rem wide instead of
56rem (max-w-4xl), set inline because the committed Tailwind CSS has no
class for that width. The build log and container log boxes are 800px
tall instead of 400px. The build log section moves to between the
webhook URL and the environment variables, and the container log
section moves to directly above the deploy key; nothing else moves. A
new handler test renders the app page and checks the width, the section
order and both log heights.
Disclosure: merged after a rebase that changed only TODO.md; the review gated this change on the next before #234, which touches no template.

Model: opus-5-5
Co-authored-by: clawbot <sneak+clawbot@sneak.cloud>

.dockerignore

@@ -1,11 +1,8 @@
-.git
+# .git is sent so that `make build` in the Dockerfile can stamp the commit into
+# upaas. List no tracked file here: git would see it as deleted in the build and
+# the version would end in -dirty.
 .env
 bin/
-.editorconfig
 .vscode/
 .idea/
 *.test
-LICENSE
-CONVENTIONS.md
-REPO_POLICIES.md
-README.md

Dockerfile

@@ -31,6 +31,7 @@ RUN go mod download
 COPY . .
 
 RUN make test
+# Takes the version from `git describe` on the .git copied in above.
 RUN make build
 
 # Runtime stage

README.md

@@ -226,6 +226,10 @@ This recipe serves plain HTTP, so `UPAAS_PLAINTEXT_HTTP=true` is required for
 setup and every other form to pass the CSRF origin check. Behind a
 TLS-terminating reverse proxy, drop that line.
 
+The image shows the commit it was built from (the `git describe` output) in the
+page footer, the startup log and `/health`. Build it from a git clone: without
+the `.git` directory it shows `dev`.
+
 ### Deploying with Docker Compose
 
 [`docker-compose.yml`](docker-compose.yml) builds the image from this repo and
@@ -261,8 +265,8 @@ later keeps that cache under a size limit by default; on older engines, set
 
 Building with BuildKit needs Docker Engine 18.09 or later; on an older engine,
 upaas fails the deploy instead of building. A Dockerfile that uses
-`RUN --network` needs Docker Engine 23.0 or later unless it has a `# syntax=`
+`RUN --network` needs Docker Engine 23.0 or later unless its `# syntax=` line
-line.
+names Dockerfile frontend 1.3 or later, such as `docker/dockerfile:1`.
 
 Session secrets are automatically generated on first startup and persisted to
 `$UPAAS_DATA_DIR/session.key`.

TODO.md

@@ -20,6 +20,11 @@ regress.
 
 # Completed Steps
 
+- 2026-09-29: The app page is 50% wider on large screens (84rem instead of
+  56rem), its build log and container log boxes are twice as tall, the build log
+  sits between the webhook URL and the environment variables, and the container
+  log sits above the deploy key (#246).
+
 - 2026-09-29: A failed build now fails the deploy with the build's own error
   instead of a later "failed to inspect image", and the deployment log shows the
   end of the build output before that error. upaas refuses to build on a Docker
@@ -27,6 +32,15 @@ regress.
   Compose section says to update with `docker compose up -d --build` and names
   the Docker Engine versions builds need (#234).
 
+- 2026-09-29: An image built from the `Dockerfile` now shows the commit it was
+  built from (the `git describe` output) in the footer and `/health` instead of
+  `dev`: `.dockerignore` no longer leaves out `.git`, nor any tracked file,
+  which git would count as deleted and mark `-dirty`. upaas now also logs its
+  version at startup; the logger's `Identify()` was never called (#236).
+
+- 2026-09-29: The app page shows the app's branch as a label in its title, next
+  to the status badge, instead of after the repository under it (#240).
+
 - 2026-09-29: An app's deployments page now lists only its 10 most recent
   deployments, newest first, instead of 50 (#238).
 

cmd/upaasd/main.go

@@ -52,6 +52,8 @@ func main() {
 			handlers.New,
 			server.New,
 		),
-		fx.Invoke(func(*server.Server) {}),
+		fx.Invoke(func(log *logger.Logger, _ *server.Server) {
+			log.Identify()
+		}),
 	).Run()
 }

internal/docker/validation_test.go

@@ -346,6 +346,15 @@ func TestPerformBuildFails(t *testing.T) {
 				"Docker Engine 18.06.3-ce (API 1.38) is older than 18.09 (API 1.39); " +
 				"upgrade Docker Engine",
 		},
+		{
+			// The build step's own error shows the build went ahead.
+			name:       "daemon at API 1.39 builds",
+			engine:     "18.09.9",
+			apiVersion: "1.39",
+			buildOutput: `{"stream":"Step 1/1 : RUN false\n"}` + "\n" +
+				`{"errorDetail":{"message":"exit code: 1"},"error":"exit code: 1"}`,
+			wantErr: "exit code: 1",
+		},
 	}
 
 	for _, tt := range tests {

internal/handlers/app_branch_test.go

@@ -0,0 +1,46 @@
+package handlers_test
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"sneak.berlin/go/upaas/internal/service/app"
+)
+
+// TestAppPageTitleShowsBranch checks that an app's branch can be read from
+// the app page title, next to the status badge, without opening the edit page.
+func TestAppPageTitleShowsBranch(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+
+	createdApp, err := testCtx.appSvc.CreateApp(t.Context(), app.CreateAppInput{
+		Name:    "branch-shown-app",
+		RepoURL: "git@example.com:user/branch-shown-app.git",
+		Branch:  "staging",
+	})
+	require.NoError(t, err)
+
+	request := httptest.NewRequestWithContext(
+		t.Context(), http.MethodGet, "/apps/"+createdApp.ID, nil,
+	)
+	request = addChiURLParams(request, map[string]string{"id": createdApp.ID})
+	recorder := httptest.NewRecorder()
+
+	testCtx.handlers.HandleAppDetail().ServeHTTP(recorder, request)
+
+	require.Equal(t, http.StatusOK, recorder.Code)
+
+	// The title row runs from the app name heading to the end of its div.
+	_, afterHeading, found := strings.Cut(recorder.Body.String(), "<h1")
+	require.True(t, found, "app page has no heading")
+
+	titleRow, _, _ := strings.Cut(afterHeading, "</div>")
+	assert.Contains(t, titleRow, `x-text="statusLabel"`)
+	assert.Contains(t, titleRow, ">staging</span>")
+}

internal/handlers/app_page_layout_test.go

@@ -0,0 +1,76 @@
+package handlers_test
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"sneak.berlin/go/upaas/internal/service/app"
+)
+
+// TestAppPageLayout checks the app page's width, the order of its sections,
+// and the height of its two log boxes.
+func TestAppPageLayout(t *testing.T) {
+	t.Parallel()
+
+	testCtx := setupTestHandlers(t)
+
+	createdApp, err := testCtx.appSvc.CreateApp(t.Context(), app.CreateAppInput{
+		Name:    "layout-app",
+		RepoURL: "git@example.com:user/layout-app.git",
+	})
+	require.NoError(t, err)
+
+	request := httptest.NewRequestWithContext(
+		t.Context(), http.MethodGet, "/apps/"+createdApp.ID, nil,
+	)
+	request = addChiURLParams(request, map[string]string{"id": createdApp.ID})
+	recorder := httptest.NewRecorder()
+
+	testCtx.handlers.HandleAppDetail().ServeHTTP(recorder, request)
+
+	require.Equal(t, http.StatusOK, recorder.Code)
+
+	body := recorder.Body.String()
+
+	_, afterMain, found := strings.Cut(body, "<main")
+	require.True(t, found, "app page has no main element")
+
+	mainTag, _, _ := strings.Cut(afterMain, ">")
+	assert.Contains(t, mainTag, "max-width: 84rem;")
+
+	sectionTitles := []string{
+		"Container Logs",
+		"Deploy Key",
+		"Webhook URL",
+		"Last Deployment Build Logs",
+		"Environment Variables",
+		"Docker Labels",
+		"Volume Mounts",
+		"Port Mappings",
+		"Recent Deployments",
+		"Danger Zone",
+	}
+
+	previousIndex := -1
+
+	for _, title := range sectionTitles {
+		index := strings.Index(body, ">"+title+"</h2>")
+		require.NotEqual(t, -1, index, "app page has no %q section", title)
+		assert.Greater(t, index, previousIndex, "%q section is out of order", title)
+
+		previousIndex = index
+	}
+
+	for _, logBox := range []string{"containerLogsWrapper", "buildLogsWrapper"} {
+		_, afterRef, found := strings.Cut(body, `x-ref="`+logBox+`"`)
+		require.True(t, found, "app page has no %s", logBox)
+
+		logBoxTag, _, _ := strings.Cut(afterRef, ">")
+		assert.Contains(t, logBoxTag, "max-height: 800px;", logBox)
+	}
+}

templates/app_detail.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 {{template "nav" .}}
 
-<main class="max-w-4xl mx-auto px-4 py-8" x-data="appDetail({
+<main class="mx-auto px-4 py-8" style="max-width: 84rem;" x-data="appDetail({
     appId: '{{.App.ID}}',
     initialDeploymentId: {{if .LatestDeployment}}{{.LatestDeployment.ID}}{{else}}null{{end}},
     initialStatus: '{{.App.Status}}',
@@ -26,11 +26,12 @@
     <!-- Header -->
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
         <div>
-            <div class="flex items-center gap-3">
+            <div class="flex flex-wrap items-center gap-3">
                 <h1 class="text-2xl font-medium text-gray-900">{{.App.Name}}</h1>
                 <span x-bind:class="statusBadgeClass" x-text="statusLabel"></span>
+                <span class="badge-neutral font-mono break-all" title="Branch">{{.App.Branch}}</span>
             </div>
-            <p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}}@{{.App.Branch}}</p>
+            <p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}}</p>
         </div>
         <div class="flex gap-3">
             <a href="/apps/{{.App.ID}}/edit" class="btn-secondary">Edit</a>
@@ -53,6 +54,26 @@
         </div>
     </div>
 
+    <!-- Container Logs -->
+    <div class="card p-6 mb-6">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="section-title">Container Logs</h2>
+            <span x-bind:class="containerStatusBadgeClass" x-text="containerStatusLabel"></span>
+        </div>
+        <div class="relative">
+            <div x-ref="containerLogsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-y-auto" style="max-height: 800px;">
+                <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap break-words m-0" x-text="containerLogs"></pre>
+            </div>
+            <button
+                x-show="!_containerAutoScroll"
+                x-transition
+                @click="_containerAutoScroll = true; Alpine.store('utils').scrollToBottom($refs.containerLogsWrapper)"
+                class="absolute bottom-2 right-4 bg-primary-600 hover:bg-primary-700 text-white text-xs px-3 py-1 rounded-full shadow-lg opacity-90 hover:opacity-100 transition"
+                title="Scroll to bottom"
+            >↓ Follow</button>
+        </div>
+    </div>
+
     <!-- Deploy Key -->
     <div class="card p-6 mb-6">
         <h2 class="section-title mb-4">Deploy Key</h2>
@@ -100,6 +121,26 @@
         </div>
     </div>
 
+    <!-- Last Deployment Build Logs -->
+    <div class="card p-6 mb-6" x-show="showBuildLogs" x-cloak>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="section-title">Last Deployment Build Logs</h2>
+            <span x-bind:class="buildStatusBadgeClass" x-text="buildStatusLabel"></span>
+        </div>
+        <div class="relative">
+            <div x-ref="buildLogsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-y-auto" style="max-height: 800px;">
+                <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap break-words m-0" x-text="buildLogs"></pre>
+            </div>
+            <button
+                x-show="!_buildAutoScroll"
+                x-transition
+                @click="_buildAutoScroll = true; Alpine.store('utils').scrollToBottom($refs.buildLogsWrapper)"
+                class="absolute bottom-2 right-4 bg-primary-600 hover:bg-primary-700 text-white text-xs px-3 py-1 rounded-full shadow-lg opacity-90 hover:opacity-100 transition"
+                title="Scroll to bottom"
+            >↓ Follow</button>
+        </div>
+    </div>
+
     <!-- Environment Variables -->
     <div class="card p-6 mb-6" x-data="envVarEditor('{{.App.ID}}')">
         <h2 class="section-title mb-4">Environment Variables</h2>
@@ -353,26 +394,6 @@
         </form>
     </div>
 
-    <!-- Container Logs -->
-    <div class="card p-6 mb-6">
-        <div class="flex items-center justify-between mb-4">
-            <h2 class="section-title">Container Logs</h2>
-            <span x-bind:class="containerStatusBadgeClass" x-text="containerStatusLabel"></span>
-        </div>
-        <div class="relative">
-            <div x-ref="containerLogsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-y-auto" style="max-height: 400px;">
-                <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap break-words m-0" x-text="containerLogs"></pre>
-            </div>
-            <button
-                x-show="!_containerAutoScroll"
-                x-transition
-                @click="_containerAutoScroll = true; Alpine.store('utils').scrollToBottom($refs.containerLogsWrapper)"
-                class="absolute bottom-2 right-4 bg-primary-600 hover:bg-primary-700 text-white text-xs px-3 py-1 rounded-full shadow-lg opacity-90 hover:opacity-100 transition"
-                title="Scroll to bottom"
-            >↓ Follow</button>
-        </div>
-    </div>
-
     <!-- Recent Deployments -->
     <div class="card p-6 mb-6">
         <div class="flex items-center justify-between mb-4">
@@ -412,26 +433,6 @@
         </template>
     </div>
 
-    <!-- Last Deployment Build Logs -->
-    <div class="card p-6 mb-6" x-show="showBuildLogs" x-cloak>
-        <div class="flex items-center justify-between mb-4">
-            <h2 class="section-title">Last Deployment Build Logs</h2>
-            <span x-bind:class="buildStatusBadgeClass" x-text="buildStatusLabel"></span>
-        </div>
-        <div class="relative">
-            <div x-ref="buildLogsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-y-auto" style="max-height: 400px;">
-                <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap break-words m-0" x-text="buildLogs"></pre>
-            </div>
-            <button
-                x-show="!_buildAutoScroll"
-                x-transition
-                @click="_buildAutoScroll = true; Alpine.store('utils').scrollToBottom($refs.buildLogsWrapper)"
-                class="absolute bottom-2 right-4 bg-primary-600 hover:bg-primary-700 text-white text-xs px-3 py-1 rounded-full shadow-lg opacity-90 hover:opacity-100 transition"
-                title="Scroll to bottom"
-            >↓ Follow</button>
-        </div>
-    </div>
-
     <!-- Danger Zone -->
     <div class="card border-2 border-error-500/20 bg-error-50/50 p-6">
         <h2 class="text-lg font-medium text-error-700 mb-4">Danger Zone</h2>