From f903232cf0f8608c7a3e08c07ef979f29741be25 Mon Sep 17 00:00:00 2001
From: Brett Chien <brettchien@users.noreply.github.com>
Date: Wed, 19 Aug 2026 02:02:43 +0800
Subject: [PATCH] feat(console): promote the fleets panel to a top-level screen
 (slice 1/6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Slice 1 of the console-navigation-ia ADR (studio#83): the fleet-config
panel already sits first in `main.content`'s DOM order and already
implements the fleet-switch logic (`activeFleet`/`activeCluster`), so
this slice only changes its *presentation* — from a small sidebar-style
label to a proper page-level "Fleets" heading + subtitle — so it reads
as the console's primary top-level screen rather than one panel among
several equally-weighted sections.

No behavior change: `fleetConfigHtml`'s fleet-switch logic, click
handling, and every existing class/attribute the tests and `main.ts`
depend on (`cfg-fleet`, `data-fleet`, `data-action="edit-config"`) are
untouched — only the header markup (`cfg-label` → `cfg-title` + a new
`cfg-subtitle`) and panel padding changed.

Later slices (per the ADR): Fleet detail drill-down (2), agent console
wiring (3), persistent chat placement (4), Deploy actions (5), Debug
drawer (6).

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 console/src/render.ts  |  3 ++-
 console/src/styles.css | 18 +++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/console/src/render.ts b/console/src/render.ts
index a2ff99d..85b07f0 100644
--- a/console/src/render.ts
+++ b/console/src/render.ts
@@ -238,10 +238,11 @@ export function fleetConfigHtml(
     : `<p class="cfg-empty">No fleets configured — add <code>[fleet.&lt;name&gt;]</code> entries to the config file above. Managing <code>${escapeHtml(cfg.default_cluster)}</code> via the default credential chain.</p>`;
   return `<div class="config">
       <div class="cfg-head">
-        <span class="cfg-label">fleets</span>
+        <h2 class="cfg-title">Fleets</h2>
         ${path}
         <button class="cfg-edit" type="button" data-action="edit-config">Edit config</button>
       </div>
+      <p class="cfg-subtitle">Select a fleet to manage.</p>
       ${body}
     </div>`;
 }
diff --git a/console/src/styles.css b/console/src/styles.css
index 8a52a60..2187799 100644
--- a/console/src/styles.css
+++ b/console/src/styles.css
@@ -480,15 +480,16 @@ button.act:disabled {
   color: var(--ok);
 }
 
-/* ---- Fleet config panel (ADR #19: the "declare" side) ---- */
+/* ---- Fleets screen (ADR #19: the "declare" side; ADR #83: promoted from a
+   sidebar panel to the console's top-level screen — Slice 1) ---- */
 .config-wrap {
-  margin: 0 0 12px;
+  margin: 0 0 16px;
 }
 .config {
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--panel);
-  padding: 10px 12px;
+  padding: 14px 16px;
   font-size: 13px;
 }
 .cfg-head {
@@ -503,6 +504,17 @@ button.act:disabled {
   font-size: 11px;
   letter-spacing: 0.04em;
 }
+.cfg-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+}
+.cfg-subtitle {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
 .cfg-path {
   color: var(--muted);
   font-size: 12px;