feat(dashboard): polish modal widths, popover usage, onboarding contrast, TUI logo

- Resize the dashboard TUI splash logo to scale with the terminal: a Colossal-font variant kicks in on terminals ≥70 cols × 16 rows; gradient palette is now strictly white → blueBright → blue (no cyan/magenta)
- Lower-clip TUI Kanban cards to a single-line title and constrain each column with overflow hidden so cards no longer bleed past the header row
- Center the TerminalModal vertically by overriding overlay alignment via :has() and trimming the modal height
- Match GitHub Import modal width to the file browser modal (90vw / 1600px max)
- Render the Usage indicator as a top-right popover on desktop instead of a centered modal (mobile keeps the full-screen sheet)
- Widen SetupWizard / Model Onboarding modals (540→880px, 560→880px) and replace the washed-out done step indicator background with a solid success swatch
- Drop the duplicate mailbox icon button from the desktop header (view switch covers it; overflow menu still surfaces it on compact)
- Loosen agent health detection: bump the heartbeat grace multiplier 2× → 4× and the staleness floor 60s → 5min so transient ticks don't flag agents Unresponsive

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/GitHubImportModal.css

@@ -173,8 +173,9 @@
 }
 
 /* Wider modal for two-pane layout */
-.github-import-modal {
-  width: min(1400px, calc(100vw - 32px));
+.modal.github-import-modal {
+  width: 90vw;
+  max-width: 1600px;
   max-height: min(900px, calc(100vh - 64px));
 }
 

packages/dashboard/app/components/Header.tsx

@@ -917,23 +917,6 @@ export function Header({
           </button>
         )}
 
-        {/* Mailbox button - desktop only */}
-        {!isCompact && onOpenMailbox && (
-          <button
-            className={`btn-icon${mailboxUnreadCount > 0 ? " btn-icon--has-indicator" : ""}`}
-            onClick={onOpenMailbox}
-            title={`Mailbox${mailboxUnreadCount > 0 ? ` (${mailboxUnreadCount} unread)` : ""}`}
-            data-testid="header-mailbox-btn"
-          >
-            <Mail size={16} />
-            {mailboxUnreadCount > 0 && (
-              <span className="header-badge" data-testid="header-mailbox-badge">
-                {mailboxUnreadCount > 9 ? "9+" : mailboxUnreadCount}
-              </span>
-            )}
-          </button>
-        )}
-
         {/* Desktop actions */}
         {!isCompact && !isElectron && (
           <button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">

packages/dashboard/app/components/PlanningModeModal.css

@@ -1634,3 +1634,20 @@
   }
 }
 
+/* Desktop: render as a top-right popover card instead of a centered modal */
+@media (min-width: 769px) {
+  .modal-overlay:has(.usage-modal) {
+    background: transparent;
+    backdrop-filter: none;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: 60px var(--space-md) 0 0;
+  }
+
+  .modal.usage-modal {
+    width: 420px;
+    max-height: 70vh;
+    box-shadow: var(--shadow-lg);
+  }
+}
+

packages/dashboard/app/components/SetupWizardModal.css

@@ -29,8 +29,8 @@
 .setup-wizard-modal {
   display: flex;
   flex-direction: column;
-  max-width: 540px;
-  width: 100%;
+  max-width: 880px;
+  width: 90vw;
   max-height: min(720px, calc(100dvh - var(--overlay-padding-top, 10vh) - var(--space-lg)));
   animation: slideUp var(--transition-normal) ease-out;
   overflow: hidden;
@@ -475,7 +475,7 @@
 /* ===== Model Onboarding Modal ===== */
 
 .model-onboarding-modal {
-  max-width: 560px;
+  max-width: 880px;
   width: 90vw;
   max-height: 85vh;
   display: flex;
@@ -565,9 +565,9 @@
 }
 
 .model-onboarding-step-indicator.done .step-number {
-  background: var(--status-done-bg-deep);
-  border: 1px solid color-mix(in srgb, var(--done) 45%, transparent);
-  color: var(--done);
+  background: var(--color-success);
+  border: 1px solid var(--color-success);
+  color: #fff;
 }
 
 .model-onboarding-step-indicator.done {

packages/dashboard/app/components/TerminalModal.css

@@ -1,9 +1,16 @@
 /* === Terminal Modal === */
+/* Center vertically (override the overlay's default top alignment). */
+.modal-overlay:has(.terminal-modal) {
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .modal.terminal-modal {
   width: 90vw;
   max-width: 1600px;
-  min-height: 90vh;
-  max-height: 90vh;
+  min-height: 80vh;
+  max-height: 85vh;
   background: var(--card);
   display: flex;
   flex-direction: column;

packages/dashboard/app/utils/agentHealth.tsx

@@ -11,17 +11,19 @@ import { resolveHeartbeatIntervalMs } from "./heartbeatIntervals";
 
 /**
  * Grace multiplier applied to an agent's configured interval before flagging
- * it Unresponsive. A human reads "missed two scheduled ticks" as "something
- * is wrong", which is what 2× captures; this also tolerates timer jitter and
- * a paused engine restarting without causing a UI flicker.
+ * it Unresponsive. We require several missed scheduled ticks before raising
+ * the alarm — momentary timer jitter, an engine restart, or a single skipped
+ * tick should never flip the UI to "Unresponsive".
  */
-const HEARTBEAT_GRACE_MULTIPLIER = 2;
+const HEARTBEAT_GRACE_MULTIPLIER = 4;
 
 /**
  * Staleness floor. Even on an agent configured for 1s heartbeats we don't
- * want the UI flickering between Healthy/Unresponsive on every tick.
+ * want the UI flickering between Healthy/Unresponsive on every tick. Five
+ * minutes is enough wall-clock buffer for any reasonable agent to recover
+ * from an engine pause/resume cycle.
  */
-const MIN_HEARTBEAT_STALENESS_MS = 60_000;
+const MIN_HEARTBEAT_STALENESS_MS = 5 * 60_000;
 
 /** Shape of the health status returned by getAgentHealthStatus */
 export interface AgentHealthStatus {