Revert to the bar-graph logo

The Dome/Clarity mark didn't land well in practice — reverting App.jsx,
AuthView, OnboardingView, HowItWorksView, ProfileView's empty state,
favicon.svg, generate-icons.html, and the extension icon PNGs to their
pre-dome-mark state, and removing the now-unused Logo.jsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/generate-icons.html

@@ -73,68 +73,85 @@
     ctx.closePath()
   }
 
-  // Mirror.'s "Dome / Clarity" mark — see docs/Mirror_Canonical_Vision.md and
-  // frontend/src/components/Logo.jsx (the in-app source of truth this canvas
-  // version is kept in sync with by hand, since it has no build-time access
-  // to the React component). Dark rounded-square background, 7 individually
-  // placed gray dashes tracing the ghost dome's arc (exact coordinates in a
-  // 0-100 space, mirrored around the crown — matches Logo.jsx's DASH_COORDS
-  // exactly, not approximated via a dash pattern), a mirror line with a real
-  // gap on both sides, and a solid dome below glowing brighter at its center
-  // and deepening toward its edges (radial gradient).
-  const DASH_COORDS = [
-    [24.30, 38.39, 26.45, 33.21],
-    [29.17, 29.13, 33.13, 25.17],
-    [37.21, 22.45, 42.39, 20.30],
-    [47.20, 19.35, 52.80, 19.35],
-    [57.61, 20.30, 62.79, 22.45],
-    [66.87, 25.17, 70.83, 29.13],
-    [73.55, 33.21, 75.70, 38.39],
-  ]
-
   function drawIcon(size) {
     const canvas = document.createElement('canvas')
     canvas.width  = size
     canvas.height = size
     const ctx = canvas.getContext('2d')
-    const s = size / 100 // scale factor: DASH_COORDS etc. are in 0-100 space
 
-    // Rounded background — near-black, matches the app's own dark theme.
-    const r = size * 0.22
+    // Rounded background
+    const r = size * 0.18
     ctx.fillStyle = '#0f1117'
     roundedRect(ctx, 0, 0, size, size, r)
     ctx.fill()
 
-    // 7 dashes tracing the ghost dome
-    ctx.strokeStyle = '#5c6079'
-    ctx.lineWidth = Math.max(1.2, size * 0.042)
-    ctx.lineCap = 'round'
-    DASH_COORDS.forEach(([x1, y1, x2, y2]) => {
-      ctx.beginPath()
-      ctx.moveTo(x1 * s, y1 * s)
-      ctx.lineTo(x2 * s, y2 * s)
-      ctx.stroke()
-    })
+    const grad = ctx.createLinearGradient(0, 0, size, 0)
+    grad.addColorStop(0, '#1d4ed8')
+    grad.addColorStop(1, '#0891b2')
 
-    // Mirror line — gapped from both domes, not touching either
-    ctx.strokeStyle = '#8b8ca3'
-    ctx.lineWidth = Math.max(1, size * 0.032)
-    ctx.beginPath()
-    ctx.moveTo(10 * s, 50 * s)
-    ctx.lineTo(90 * s, 50 * s)
-    ctx.stroke()
-
-    // Solid bottom dome — bright at center, deepening toward the edges
-    const domeCx = 50 * s, domeCy = 54 * s, domeR = 27 * s
-    const grad = ctx.createRadialGradient(domeCx, domeCy, 0, domeCx, domeCy, domeR)
-    grad.addColorStop(0,    '#a5b4fc')
-    grad.addColorStop(0.55, '#1d4ed8')
-    grad.addColorStop(1,    '#1e3a8a')
-    ctx.fillStyle = grad
-    ctx.beginPath()
-    ctx.arc(domeCx, domeCy, domeR, 0, Math.PI, false)
-    ctx.fill()
+    function bar(x, y, w, h, br, alpha) {
+      ctx.globalAlpha = alpha
+      ctx.fillStyle = grad
+      roundedRect(ctx, x, y, w, h, br)
+      ctx.fill()
+    }
+
+    if (size === 16) {
+      // Simplified 3-bar design — bold and crisp at tiny size
+      const mid = size / 2  // 8
+      // bar positions: left, center, right
+      // top bars
+      bar(2,   5, 2, 3, 1, 0.55)   // left short
+      bar(7,   2, 2, 6, 1, 1.00)   // center tall
+      bar(12,  5, 2, 3, 1, 0.55)   // right short
+      // mirror line
+      ctx.globalAlpha = 1
+      ctx.strokeStyle = '#2a3050'
+      ctx.lineWidth = 1
+      ctx.beginPath(); ctx.moveTo(0, mid); ctx.lineTo(size, mid); ctx.stroke()
+      // reflection bars
+      bar(2,   9, 2, 3, 1, 0.22)
+      bar(7,   9, 2, 5, 1, 0.38)
+      bar(12,  9, 2, 3, 1, 0.22)
+
+    } else if (size === 48) {
+      // 5-bar design on a 48×48 grid — balanced
+      const mid = 24
+      bar(4,  18, 6, 6,  3, 0.40)
+      bar(12, 12, 6, 12, 3, 0.65)
+      bar(21,  6, 6, 18, 3, 1.00)
+      bar(30, 12, 6, 12, 3, 0.65)
+      bar(38, 18, 6, 6,  3, 0.40)
+      ctx.globalAlpha = 1
+      ctx.strokeStyle = '#2a3050'
+      ctx.lineWidth = 1.5
+      ctx.beginPath(); ctx.moveTo(0, mid); ctx.lineTo(size, mid); ctx.stroke()
+      bar(4,  25, 6, 6,  3, 0.18)
+      bar(12, 25, 6, 11, 3, 0.30)
+      bar(21, 25, 6, 17, 3, 0.38)
+      bar(30, 25, 6, 11, 3, 0.30)
+      bar(38, 25, 6, 6,  3, 0.18)
+
+    } else {
+      // 128px — full detailed design on 128×128 grid
+      const mid = 64
+      bar(8,  48, 16, 16, 8, 0.40)
+      bar(30, 32, 16, 32, 8, 0.65)
+      bar(56, 12, 16, 52, 8, 1.00)
+      bar(82, 32, 16, 32, 8, 0.65)
+      bar(104,48, 16, 16, 8, 0.40)
+      ctx.globalAlpha = 1
+      ctx.strokeStyle = '#2a3050'
+      ctx.lineWidth = 2
+      ctx.beginPath(); ctx.moveTo(0, mid); ctx.lineTo(size, mid); ctx.stroke()
+      bar(8,  66, 16, 16, 8, 0.18)
+      bar(30, 66, 16, 30, 8, 0.30)
+      bar(56, 66, 16, 50, 8, 0.38)
+      bar(82, 66, 16, 30, 8, 0.30)
+      bar(104,66, 16, 16, 8, 0.18)
+    }
 
+    ctx.globalAlpha = 1
     return canvas
   }
 

frontend/src/App.jsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react"
 import { supabase } from "./lib/supabase"
 import api from "./lib/api"
-import { LogoLockup } from "./components/Logo"
 import AuthView from "./components/AuthView"
 import OnboardingView from "./components/OnboardingView"
 import ResultsView from "./components/ResultsView"
@@ -150,7 +149,29 @@ export default function App() {
       {/* Header */}
       <div style={{ marginBottom: 28, display: "flex",
         justifyContent: "space-between", alignItems: "flex-start" }}>
-        <LogoLockup markSize={26} fontSize={22} />
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
+            <defs>
+              <linearGradient id="hdr-g" x1="0" y1="0" x2="32" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="12" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".4"/>
+            <rect x="8"  y="8"  width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".65"/>
+            <rect x="14" y="4"  width="4" height="12" rx="2" fill="url(#hdr-g)"/>
+            <rect x="20" y="8"  width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".65"/>
+            <rect x="26" y="12" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".4"/>
+            <line x1="0" y1="17.5" x2="32" y2="17.5" stroke="#1e2438" strokeWidth="1"/>
+            <rect x="2"  y="18" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".18"/>
+            <rect x="8"  y="18" width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".3"/>
+            <rect x="14" y="18" width="4" height="12" rx="2" fill="url(#hdr-g)" opacity=".38"/>
+            <rect x="20" y="18" width="4" height="8"  rx="2" fill="url(#hdr-g)" opacity=".3"/>
+            <rect x="26" y="18" width="4" height="4"  rx="2" fill="url(#hdr-g)" opacity=".18"/>
+          </svg>
+          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.3px", color: "#f0eeff" }}>
+            mirror<span style={{ color: "#1d4ed8" }}>.</span>
+          </h1>
+        </div>
 
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
           {/* Open as full page — only in side panel */}

frontend/src/components/AuthView.jsx

@@ -1,6 +1,5 @@
 import { useState, useRef } from "react"
 import { supabase } from "../lib/supabase"
-import { DomeMark } from "./Logo"
 
 const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
@@ -131,9 +130,24 @@ export default function AuthView({ onAuth }) {
 
         {/* Logo */}
         <div style={{ textAlign: "center", marginBottom: 36 }}>
-          <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}>
-            <DomeMark size={48} />
-          </div>
+          <svg width="48" height="48" viewBox="0 0 52 52" fill="none" style={{ marginBottom: 14 }}>
+            <defs>
+              <linearGradient id="auth-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#auth-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#auth-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#auth-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#auth-g)" opacity=".15"/>
+          </svg>
           <h1 style={{ fontSize: 24, fontWeight: 700, margin: "0 0 6px",
             letterSpacing: "-0.5px", color: "#f0eeff" }}>
             mirror<span style={{ color: "#1d4ed8" }}>.</span>

frontend/src/components/HowItWorksView.jsx

@@ -1,5 +1,4 @@
 import Reveal, { RevealItem } from "./Reveal"
-import { DomeMark } from "./Logo"
 
 const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
@@ -98,7 +97,24 @@ export default function HowItWorksView({ onBack }) {
       <Reveal>
       <div style={{ textAlign: "center", marginBottom: 72 }}>
         <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
-          <DomeMark size={52} />
+          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+            <defs>
+              <linearGradient id="hiw-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#hiw-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#hiw-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#hiw-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#hiw-g)" opacity=".15"/>
+          </svg>
         </div>
         <h1 style={{ fontSize: 30, fontWeight: 800, margin: "0 0 6px",
           letterSpacing: "-0.7px", lineHeight: 1.2, color: "#f0eeff" }}>

frontend/src/components/Logo.jsx

@@ -1,63 +0,0 @@
-import { useId } from "react"
-
-// Mirror.'s "Dome / Clarity" mark — single source of truth. Meaning, per
-// docs/Mirror_Canonical_Vision.md: you can't quite see yourself directly (the
-// faint, dashed dome above the line), but the reflection brings you into
-// focus (the solid, complete dome below, glowing brighter at its center and
-// deepening toward its edges). Every in-app usage should import from here
-// rather than duplicating SVG — that drift is exactly what the old bar-graph
-// logo suffered (5 independently hand-maintained copies).
-//
-// The 7 dash coordinates below are exact, individually computed points at
-// 22.5° increments around the ghost dome's arc (radius 26.8, center 50,46),
-// mirrored around the crown — deliberately not a stroke-dasharray, which
-// can't guarantee true bilateral symmetry.
-const DASH_COORDS = [
-  [24.30, 38.39, 26.45, 33.21],
-  [29.17, 29.13, 33.13, 25.17],
-  [37.21, 22.45, 42.39, 20.30],
-  [47.20, 19.35, 52.80, 19.35],
-  [57.61, 20.30, 62.79, 22.45],
-  [66.87, 25.17, 70.83, 29.13],
-  [73.55, 33.21, 75.70, 38.39],
-]
-
-export function DomeMark({
-  size = 48,
-  dashColor = "#6b6888",
-  lineColor = "#8b89aa",
-  domeBright = "#a5b4fc",
-  domeMid = "#1d4ed8",
-  domeDeep = "#1e3a8a",
-}) {
-  const gradientId = useId()
-  return (
-    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
-      <defs>
-        <radialGradient id={gradientId} cx="50" cy="54" r="27" gradientUnits="userSpaceOnUse">
-          <stop offset="0%" stopColor={domeBright} />
-          <stop offset="55%" stopColor={domeMid} />
-          <stop offset="100%" stopColor={domeDeep} />
-        </radialGradient>
-      </defs>
-      <g stroke={dashColor} strokeWidth="4.2" strokeLinecap="round">
-        {DASH_COORDS.map(([x1, y1, x2, y2], i) => (
-          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />
-        ))}
-      </g>
-      <line x1="10" y1="50" x2="90" y2="50" stroke={lineColor} strokeWidth="3.2" />
-      <path d="M 23 54 A 27 27 0 0 0 77 54 Z" fill={`url(#${gradientId})`} />
-    </svg>
-  )
-}
-
-export function LogoLockup({ markSize = 26, fontSize = 22, gap = 10 }) {
-  return (
-    <div style={{ display: "flex", alignItems: "center", gap }}>
-      <DomeMark size={markSize} />
-      <h1 style={{ fontSize, fontWeight: 700, margin: 0, letterSpacing: "-0.3px", color: "#f0eeff" }}>
-        mirror<span style={{ color: "#1d4ed8" }}>.</span>
-      </h1>
-    </div>
-  )
-}

frontend/src/components/OnboardingView.jsx

@@ -1,13 +1,35 @@
 import { useState } from "react"
-import { DomeMark } from "./Logo"
 
 const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
+function MirrorLogo() {
+  return (
+    <svg width="48" height="48" viewBox="0 0 52 52" fill="none">
+      <defs>
+        <linearGradient id="onb-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+        </linearGradient>
+      </defs>
+      <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".35"/>
+      <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".6"/>
+      <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#onb-g)"/>
+      <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".6"/>
+      <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".35"/>
+      <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+      <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".15"/>
+      <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".27"/>
+      <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#onb-g)" opacity=".33"/>
+      <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#onb-g)" opacity=".3"/>
+      <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#onb-g)" opacity=".15"/>
+    </svg>
+  )
+}
+
 function StepConcept() {
   return (
     <div>
       <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}>
-        <DomeMark size={48} />
+        <MirrorLogo />
       </div>
       <h1 style={{
         fontSize: 26, fontWeight: 700, color: "#f0eeff",

frontend/src/components/ProfileView.jsx

@@ -6,7 +6,6 @@ import {
 } from "recharts"
 import api from "../lib/api"
 import Reveal, { RevealItem } from "./Reveal"
-import { DomeMark } from "./Logo"
 
 const G = "linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%)"
 
@@ -543,7 +542,24 @@ export default function ProfileView({ active }) {
     return (
       <div style={{ textAlign: "center", padding: "60px 20px" }}>
         <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
-          <DomeMark size={52} />
+          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
+            <defs>
+              <linearGradient id="pv-empty-g" x1="0" y1="0" x2="52" y2="0" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#1d4ed8"/><stop offset="1" stopColor="#0891b2"/>
+              </linearGradient>
+            </defs>
+            <rect x="2"  y="20" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".35"/>
+            <rect x="11" y="13" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".6"/>
+            <rect x="20" y="6"  width="8"  height="20" rx="4" fill="url(#pv-empty-g)"/>
+            <rect x="31" y="13" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".6"/>
+            <rect x="40" y="20" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".35"/>
+            <line x1="0" y1="28" x2="52" y2="28" stroke="#1e2438" strokeWidth="1.25"/>
+            <rect x="2"  y="29" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".15"/>
+            <rect x="11" y="29" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".27"/>
+            <rect x="20" y="29" width="8"  height="20" rx="4" fill="url(#pv-empty-g)" opacity=".33"/>
+            <rect x="31" y="29" width="6"  height="13" rx="3" fill="url(#pv-empty-g)" opacity=".27"/>
+            <rect x="40" y="29" width="6"  height="6"  rx="3" fill="url(#pv-empty-g)" opacity=".15"/>
+          </svg>
         </div>
         <h2 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 10px", color: "#f0eeff" }}>
           Your mirror is waiting