fix: Address remaining PR #262 review comments

Fix instance index desync in app_detail_page by deriving instance_index
from the actual instance object instead of hardcoding 0. Add text color
to .ht-detail-panel for proper contrast on dark background. Strengthen
weak test assertions and add regression test for non-zero instance index.

Author: NodeJSmith

CHANGELOG.md

@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replaced hardcoded CSS fallback colors in alerts and detail panels with proper design tokens (`--ht-surface-inset`, `--ht-surface-code`, `--ht-warning-*`, `--ht-danger-*`)
 - Toggle buttons now show fallback text before Alpine.js initializes and expose `aria-expanded` for accessibility (#262)
 
+### Fixed
+- App detail page now uses the actual instance index instead of hardcoded 0, fixing data/URL desync for non-zero instances (#262)
+- Detail panel labels now have proper text contrast on dark `--ht-surface-code` background (#262)
+
 ### Added
 - Global alert banner showing HA disconnect warnings and failed app errors with expandable tracebacks (#262)
 - `ht-btn--ghost` and `ht-btn--xs` button modifier classes (#262)

src/hassette/web/static/css/style.css

@@ -1048,6 +1048,7 @@ html.ht-sidebar-closed .ht-sidebar:not(.is-open) {
 .ht-detail-panel {
   padding: var(--ht-sp-2) var(--ht-sp-4);
   background: var(--ht-surface-code);
+  color: var(--ht-text-code);
   border-radius: var(--ht-radius-sm);
   margin: 0 var(--ht-sp-2) var(--ht-sp-2);
   display: flex;
@@ -1075,6 +1076,11 @@ html.ht-sidebar-closed .ht-sidebar:not(.is-open) {
   font-weight: 500;
 }
 
+.ht-detail-panel .ht-detail-label {
+  color: var(--ht-text-code);
+  opacity: 0.65;
+}
+
 /* — Responsive: small phones (max-width: 480px) ———————— */
 @media screen and (max-width: 480px) {
   .ht-section {

src/hassette/web/ui/router.py

@@ -97,17 +97,18 @@ async def app_detail_page(app_key: str, request: Request, data_sync: DataSyncDep
         raise HTTPException(status_code=404, detail=f"App '{app_key}' not found")
 
     instance = manifest.instances[0] if manifest.instances else None
+    instance_index = instance.index if instance else 0
     owner_id = instance.owner_id if instance else None
-    listeners = data_sync.get_listener_metrics_for_instance(app_key, 0) if owner_id else []
-    jobs = await data_sync.get_scheduled_jobs_for_instance(app_key, 0) if owner_id else []
+    listeners = data_sync.get_listener_metrics_for_instance(app_key, instance_index) if owner_id else []
+    jobs = await data_sync.get_scheduled_jobs_for_instance(app_key, instance_index) if owner_id else []
     logs = data_sync.get_recent_logs(app_key=app_key, limit=50)
     ctx = {
         **base_context("apps"),
         **alert_context(data_sync),
         "manifest": manifest,
         "instance": instance,
         "app_key": app_key,
-        "instance_index": 0,
+        "instance_index": instance_index,
         "owner_id": owner_id,
         "listeners": listeners,
         "jobs": jobs,

tests/integration/test_web_ui.py

@@ -671,6 +671,36 @@ async def test_instance_detail_404_bad_app(self, client: "AsyncClient") -> None:
         response = await client.get("/ui/apps/nonexistent/0")
         assert response.status_code == 404
 
+    async def test_default_page_uses_actual_instance_index(self, client: "AsyncClient", mock_hassette) -> None:
+        """GET /apps/{app_key} should use the actual instance index, not hardcoded 0."""
+        setup_registry(
+            mock_hassette,
+            [
+                make_manifest(
+                    app_key="offset_app",
+                    instance_count=1,
+                    instances=[
+                        AppInstanceInfo(
+                            app_key="offset_app",
+                            index=3,
+                            instance_name="OffsetApp[3]",
+                            class_name="OffsetApp",
+                            status=ResourceStatus.RUNNING,
+                            owner_id="OffsetApp.OffsetApp[3]",
+                        )
+                    ],
+                ),
+            ],
+        )
+        response = await client.get("/ui/apps/offset_app")
+        assert response.status_code == 200
+        body = response.text
+        # Partial URLs must reference the real instance index (3), not hardcoded 0
+        assert "instance-listeners/offset_app/3" in body
+        assert "instance-jobs/offset_app/3" in body
+        assert "instance-listeners/offset_app/0" not in body
+        assert "instance-jobs/offset_app/0" not in body
+
     async def test_instance_listeners_partial(self, client: "AsyncClient") -> None:
         """Instance-scoped listeners partial returns HTML."""
         response = await client.get("/ui/partials/instance-listeners/my_app/0")
@@ -933,7 +963,7 @@ async def test_alert_no_failed_apps(self, client: "AsyncClient") -> None:
         """No failed apps means the partial renders empty (no alert)."""
         response = await client.get("/ui/partials/alert-failed-apps")
         assert response.status_code == 200
-        assert "failed" not in response.text.lower() or "app(s) failed" not in response.text
+        assert response.text.strip() == ""
 
     async def test_alert_with_failed_app(self, client: "AsyncClient", mock_hassette) -> None:
         """A failed app renders the danger alert with app key and error message."""
@@ -1064,7 +1094,7 @@ async def test_sidebar_brand_link(self, client: "AsyncClient") -> None:
     async def test_sidebar_no_close_button(self, client: "AsyncClient") -> None:
         response = await client.get("/ui/")
         html = response.text
-        assert 'class="ht-sidebar-close"' not in html
+        assert not re.search(r"\bht-sidebar-close\b", html)
         assert "fa-xmark" not in html
 
     async def test_sidebar_toggle_button_exists(self, client: "AsyncClient") -> None: