feat: redesign empty state with brand mark, guided onboarding, and favicon

Replace the generic emoji empty state with a polished first-time experience:
- Add gradient "R" brand mark to sidebar header for visual identity
- Redesign empty state with SVG loop icon, welcoming copy, and prominent CTA
- Add three workflow step cards (Configure, Launch, Monitor) to orient new users
- Add inline SVG favicon matching the brand mark to eliminate 404 error

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

src/ralphify/ui/static/dashboard.css

@@ -703,6 +703,23 @@ body {
   margin-left: auto;
 }
 
+/* ── Logo mark ──────────────────────────────────────────────────── */
+
+.logo-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #8B6CF0, #E87B4A);
+  color: white;
+  font-weight: 700;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: -0.5px;
+}
+
 /* ── Empty state ─────────────────────────────────────────────────── */
 
 .empty-state {
@@ -711,28 +728,93 @@ body {
   align-items: center;
   justify-content: center;
   height: 100%;
-  gap: 16px;
+  gap: 12px;
   text-align: center;
+  padding: 40px 24px;
 }
 
-.empty-state-icon {
-  font-size: 56px;
-  opacity: 0.15;
+.empty-illustration {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(139, 108, 240, 0.08), rgba(232, 123, 74, 0.08));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
 }
 
 .empty-state-text {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 20px;
+  font-weight: 700;
   color: var(--text);
 }
 
 .empty-state-hint {
   font-size: 14px;
   color: var(--text-secondary);
-  max-width: 300px;
+  max-width: 380px;
   line-height: 1.6;
 }
 
+.btn-lg {
+  padding: 12px 28px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 10px;
+}
+
+.empty-state-steps {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  max-width: 540px;
+}
+
+.step-card {
+  flex: 1;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px 16px;
+  text-align: center;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.15s ease;
+}
+
+.step-card:hover {
+  box-shadow: var(--shadow);
+  border-color: var(--border-hover);
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  font-family: var(--font-mono);
+}
+
+.step-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.step-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
 /* ── Modal ───────────────────────────────────────────────────────── */
 
 .modal-overlay {

src/ralphify/ui/static/dashboard.js

@@ -206,6 +206,7 @@ function Sidebar() {
   return html`
     <div class="sidebar">
       <div class="sidebar-header">
+        <div class="logo-mark">R</div>
         <h1>Ralphify</h1>
         <span class="version">UI</span>
       </div>
@@ -277,9 +278,44 @@ function Main() {
 function EmptyState() {
   return html`
     <div class="empty-state">
-      <div class="empty-state-icon">\u{1F680}</div>
-      <div class="empty-state-text">Ready to run</div>
-      <div class="empty-state-hint">Start a new autonomous coding loop to see your agent in action</div>
+      <div class="empty-illustration">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+          <g stroke="url(#eig)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 2v6h-6"/>
+            <path d="M21 13a9 9 0 1 1-3-7.7L21 8"/>
+          </g>
+          <defs>
+            <linearGradient id="eig" x1="0" y1="0" x2="24" y2="24">
+              <stop stop-color="#8B6CF0"/>
+              <stop offset="1" stop-color="#E87B4A"/>
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <div class="empty-state-text">Ready when you are</div>
+      <div class="empty-state-hint">
+        Launch an autonomous coding loop and watch your AI agent iterate, test, and improve.
+      </div>
+      <button class="btn btn-primary btn-lg" onClick=${() => showNewRunModal.value = true}>
+        + New Run
+      </button>
+      <div class="empty-state-steps">
+        <div class="step-card">
+          <div class="step-number">1</div>
+          <div class="step-title">Configure</div>
+          <div class="step-desc">Set up checks and a prompt in your project</div>
+        </div>
+        <div class="step-card">
+          <div class="step-number">2</div>
+          <div class="step-title">Launch</div>
+          <div class="step-desc">Start a new run from the dashboard</div>
+        </div>
+        <div class="step-card">
+          <div class="step-number">3</div>
+          <div class="step-title">Monitor</div>
+          <div class="step-desc">Watch iterations and checks in real time</div>
+        </div>
+      </div>
     </div>
   `;
 }

src/ralphify/ui/static/index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ralphify Dashboard</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><defs><linearGradient id='g' x1='0' y1='0' x2='28' y2='28'><stop stop-color='%238B6CF0'/><stop offset='1' stop-color='%23E87B4A'/></linearGradient></defs><rect width='28' height='28' rx='7' fill='url(%23g)'/><text x='14' y='19.5' text-anchor='middle' fill='white' font-size='16' font-weight='700' font-family='system-ui'>R</text></svg>">
   <link rel="stylesheet" href="/dashboard.css">
 </head>
 <body>