From b58c07e84782d927571380ca385a821a05018a01 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 12 Apr 2026 10:36:07 -0600
Subject: [PATCH] observer: polish typography and error button states

Convert empty-state sizes from rem to em for proportional scaling,
align credential labels with uppercase+tracking pattern, use canonical
monospace font stack on command box, improve error countdown contrast,
enlarge toggle indicator, and add focus-visible/active states to error
banner buttons.
---
 apps/observer/workspace.html | 41 +++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/observer/workspace.html b/apps/observer/workspace.html
index 08890a250..9a96e9a5a 100644
--- a/apps/observer/workspace.html
+++ b/apps/observer/workspace.html
@@ -234,7 +234,8 @@
   color: #d4d4d4;
   padding: 1em;
   border-radius: 4px;
-  font-family: monospace;
+  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
+  letter-spacing: 0.02em;
   font-size: 0.9em;
   overflow-x: auto;
   margin: 1em 0;
@@ -275,7 +276,9 @@
   right: 60px;
 }
 .credential-label {
-  font-weight: bold;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   font-size: 0.85em;
   color: #333;
   margin-bottom: 0.25em;
@@ -315,22 +318,22 @@
 
 .no-observers {
   text-align: center;
-  padding: 3rem 1rem;
+  padding: 3em 1em;
   color: #666;
 }
 .no-observers-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
+  font-size: 3em;
+  margin-bottom: 1em;
   opacity: 0.5;
 }
 .no-observers-text {
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
+  font-size: 1.1em;
+  margin-bottom: 0.5em;
 }
 .no-observers-hint {
-  font-size: 0.9rem;
+  font-size: 0.85em;
   color: #999;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.5em;
 }
 .no-observers-action {
   display: inline-flex;
@@ -343,7 +346,7 @@
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.95rem;
+  font-size: 0.9em;
 }
 .no-observers-action:hover {
   background: color-mix(in srgb, var(--facet-color, #b06a1a) 85%, black);
@@ -391,7 +394,7 @@
   background: color-mix(in srgb, var(--facet-color, #b06a1a) 70%, black);
 }
 .add-observer-toggle .toggle-indicator {
-  font-size: 0.75em;
+  font-size: 0.85em;
 }
 
 /* Collapsed state for add-observer section */
@@ -476,6 +479,13 @@
 .ws-error-retry:hover {
   background: #6d5303;
 }
+.ws-error-retry:focus-visible {
+  outline: 2px solid #856404;
+  outline-offset: 2px;
+}
+.ws-error-retry:active {
+  background: #554303;
+}
 .ws-error-dismiss {
   background: transparent;
   border: 1px solid #856404;
@@ -489,8 +499,15 @@
 .ws-error-dismiss:hover {
   background: rgba(133, 100, 4, 0.1);
 }
+.ws-error-dismiss:focus-visible {
+  outline: 2px solid #856404;
+  outline-offset: 2px;
+}
+.ws-error-dismiss:active {
+  background: rgba(133, 100, 4, 0.15);
+}
 .ws-error-countdown {
-  color: #997a1e;
+  color: #6d5303;
   font-size: 0.85em;
 }
 </style>
-- 
2.51.2