a basic ui and landing web interface for tidyindex.com

29 files changed, 2912 insertions, 0 deletions

diff --git a/web/ui/src/app.css b/web/ui/src/app.css
new file mode 100644
index 0000000..db2f519
--- /dev/null
+++ b/web/ui/src/app.css
@@ -0,0 +1,1170 @@
+/* ----------------------------------------------------------------
+   Tidy Index — dashboard styles
+
+   Shares the exact design tokens from the landing page. Adds
+   dashboard-specific components (tabs, cards, badges, toasts,
+   form inputs, danger variants).
+---------------------------------------------------------------- */
+
+/* ---------- self-hosted webfonts ---------- */
+
+@font-face {
+  font-family: 'Fraunces';
+  font-style: normal;
+  font-weight: 300 600;
+  font-display: swap;
+  src: url('/fonts/fraunces-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url('/fonts/inter-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+  --c-bg:           #ffffff;
+  --c-bg-soft:      #f7f9fc;
+  --c-bg-tint:      #eef4fb;
+
+  --c-rule:         #e3ecf5;
+  --c-rule-strong:  #cbd6e6;
+
+  --c-ink:          #0b1f3a;
+  --c-ink-soft:     #3b4f6b;
+  --c-ink-mute:     #6b7c93;
+
+  --c-blue:         #2563eb;
+  --c-blue-deep:    #1d4ed8;
+  --c-blue-soft:    #dbeafe;
+  --c-blue-tint:    #eef4ff;
+
+  --c-danger:       #dc2626;
+  --c-danger-deep:  #b91c1c;
+  --c-danger-soft:  #fee2e2;
+  --c-danger-tint:  #fef2f2;
+
+  --c-success:      #059669;
+  --c-success-soft: #d1fae5;
+
+  --c-warn:         #b45309;
+  --c-warn-soft:    #fef3c7;
+
+  --shadow-sm:      0 1px 2px rgba(15, 38, 73, 0.04);
+  --shadow-md:      0 8px 28px -10px rgba(37, 99, 235, 0.18),
+                    0 2px 6px rgba(15, 38, 73, 0.05);
+  --shadow-lg:      0 24px 60px -20px rgba(37, 99, 235, 0.25),
+                    0 6px 16px rgba(15, 38, 73, 0.06);
+
+  --radius-sm:      6px;
+  --radius-md:      12px;
+  --radius-lg:      18px;
+
+  --font-serif:     'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
+  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+                    Helvetica, Arial, sans-serif;
+  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
+                    Consolas, monospace;
+
+  --max-w:          960px;
+  --max-w-wide:     1080px;
+  --gutter:         clamp(20px, 4vw, 40px);
+}
+
+* { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--c-ink);
+  background: var(--c-bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: var(--c-blue);
+  text-decoration: none;
+  transition: color 160ms ease;
+}
+a:hover { color: var(--c-blue-deep); }
+
+img, svg { display: block; max-width: 100%; }
+
+::selection {
+  background: var(--c-blue-soft);
+  color: var(--c-ink);
+}
+
+/* ---------- layout ---------- */
+
+.container {
+  width: 100%;
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding: 0 var(--gutter);
+}
+
+/* ---------- typographic primitives (match landing) ---------- */
+
+.serif {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 144, 'SOFT' 30;
+  font-weight: 400;
+  letter-spacing: -0.018em;
+  color: var(--c-ink);
+}
+
+.serif-italic {
+  font-style: italic;
+  font-variation-settings: 'opsz' 144, 'SOFT' 100;
+}
+
+.section-marker {
+  margin: 0 0 18px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--c-blue);
+  text-transform: lowercase;
+}
+
+.page-title {
+  margin: 0 0 8px;
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 144, 'SOFT' 30;
+  font-weight: 400;
+  font-size: clamp(32px, 4.6vw, 44px);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--c-ink);
+}
+
+.page-subtitle {
+  margin: 0 0 32px;
+  font-size: 16px;
+  color: var(--c-ink-soft);
+  max-width: 60ch;
+}
+
+/* ---------- dashboard app shell ---------- */
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: saturate(180%) blur(14px);
+  -webkit-backdrop-filter: saturate(180%) blur(14px);
+  border-bottom: 1px solid var(--c-rule);
+}
+
+.app-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 66px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 24;
+  font-weight: 500;
+  font-size: 19px;
+  letter-spacing: -0.005em;
+  color: var(--c-ink);
+}
+.brand:hover { color: var(--c-blue); }
+
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  color: var(--c-blue);
+}
+.brand-mark svg { width: 22px; height: 22px; }
+
+.app-header-meta {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--c-ink-mute);
+}
+
+.app-header-meta .plan-chip {
+  padding: 5px 10px;
+  border: 1px solid var(--c-rule);
+  border-radius: 999px;
+  color: var(--c-ink-soft);
+  text-transform: lowercase;
+  letter-spacing: 0.04em;
+}
+
+.app-header-meta .plan-chip strong {
+  color: var(--c-blue);
+  font-weight: 500;
+}
+
+.app-header-meta .pending-chip {
+  padding: 5px 10px;
+  border: 1px solid #fde68a;
+  background: var(--c-warn-soft);
+  border-radius: 999px;
+  color: var(--c-warn);
+  letter-spacing: 0.02em;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.app-header-meta a {
+  color: var(--c-ink-soft);
+  border-bottom: 1px solid transparent;
+}
+.app-header-meta a:hover {
+  color: var(--c-blue);
+  border-color: var(--c-blue);
+}
+
+/* ---------- tab nav ---------- */
+
+.tabs {
+  border-bottom: 1px solid var(--c-rule);
+  margin-bottom: 48px;
+}
+
+.tabs-inner {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.tabs-inner::-webkit-scrollbar { display: none; }
+
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 18px 18px 16px;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--c-ink-mute);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  transition: color 160ms ease, border-color 160ms ease;
+}
+
+.tab:hover { color: var(--c-ink-soft); }
+
+.tab.active {
+  color: var(--c-ink);
+  border-bottom-color: var(--c-blue);
+}
+
+.tab-num {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--c-blue);
+  font-weight: 500;
+}
+
+/* ---------- main content ---------- */
+
+main.app-main {
+  padding: 56px 0 120px;
+  min-height: calc(100vh - 66px - 64px);
+}
+
+.entry-main {
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ---------- cards ---------- */
+
+.card {
+  background: #fff;
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-md);
+  padding: 26px 28px;
+  box-shadow: var(--shadow-sm);
+  transition: border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.card + .card { margin-top: 14px; }
+
+.card.card-feature {
+  border-color: var(--c-blue-soft);
+  background: linear-gradient(180deg, #ffffff 0%, var(--c-blue-tint) 140%);
+  box-shadow: var(--shadow-md);
+}
+
+.card.card-accent {
+  border-left: 3px solid var(--c-blue);
+}
+
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 10px;
+}
+
+.card-title {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 36, 'SOFT' 30;
+  font-weight: 500;
+  font-size: 19px;
+  line-height: 1.2;
+  letter-spacing: -0.005em;
+  color: var(--c-ink);
+}
+
+.card-sub {
+  margin: 0;
+  font-size: 14px;
+  color: var(--c-ink-mute);
+  line-height: 1.55;
+}
+
+.card-body { font-size: 15px; color: var(--c-ink-soft); }
+
+.card-footer {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid var(--c-rule);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--c-ink-mute);
+}
+
+/* ---------- buttons ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 10px 18px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 180ms ease;
+  letter-spacing: -0.005em;
+  text-decoration: none;
+  background: transparent;
+  color: inherit;
+}
+
+.btn svg { width: 15px; height: 15px; }
+
+.btn-primary {
+  background: var(--c-ink);
+  color: #fff;
+  box-shadow: 0 6px 18px -8px rgba(11, 31, 58, 0.5);
+}
+.btn-primary:hover {
+  background: var(--c-blue);
+  color: #fff;
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.5);
+}
+
+.btn-accent {
+  background: var(--c-blue);
+  color: #fff;
+  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.5);
+}
+.btn-accent:hover {
+  background: var(--c-blue-deep);
+  color: #fff;
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--c-ink);
+  border-color: var(--c-rule);
+}
+.btn-ghost:hover {
+  background: var(--c-bg-soft);
+  border-color: var(--c-blue-soft);
+  color: var(--c-blue-deep);
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--c-danger);
+  border-color: var(--c-danger-soft);
+}
+.btn-danger:hover {
+  background: var(--c-danger-tint);
+  border-color: var(--c-danger);
+  color: var(--c-danger-deep);
+}
+
+.btn-sm {
+  padding: 7px 14px;
+  font-size: 13px;
+}
+.btn-lg {
+  padding: 14px 26px;
+  font-size: 15px;
+}
+
+.btn-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--c-ink-soft);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--c-rule-strong);
+}
+.btn-link:hover {
+  color: var(--c-blue);
+  border-color: var(--c-blue);
+}
+
+/* ---------- form inputs ---------- */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+.field-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--c-ink-mute);
+}
+
+.input, .select, .textarea {
+  width: 100%;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--c-ink);
+  background: #fff;
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-sm);
+  padding: 11px 14px;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.input:focus, .select:focus, .textarea:focus {
+  outline: none;
+  border-color: var(--c-blue);
+  box-shadow: 0 0 0 3px var(--c-blue-tint);
+}
+
+.input.mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.input.input-lg {
+  padding: 14px 18px;
+  font-size: 16px;
+}
+
+.help {
+  font-size: 13px;
+  color: var(--c-ink-mute);
+  line-height: 1.5;
+}
+
+/* ---------- chips / scope toggles ---------- */
+
+.chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 7px 13px;
+  border-radius: 999px;
+  border: 1px solid var(--c-rule);
+  background: #fff;
+  color: var(--c-ink-soft);
+  cursor: pointer;
+  transition: all 140ms ease;
+  user-select: none;
+}
+.chip:hover {
+  border-color: var(--c-blue-soft);
+  color: var(--c-ink);
+}
+.chip.active {
+  background: var(--c-blue-tint);
+  border-color: var(--c-blue);
+  color: var(--c-blue-deep);
+}
+
+.chip-all {
+  font-weight: 500;
+}
+
+/* ---------- badges ---------- */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: var(--c-blue-tint);
+  color: var(--c-blue-deep);
+  border: 1px solid var(--c-blue-soft);
+}
+
+.badge-success {
+  background: var(--c-success-soft);
+  color: var(--c-success);
+  border-color: #a7f3d0;
+}
+
+.badge-muted {
+  background: var(--c-bg-soft);
+  color: var(--c-ink-mute);
+  border-color: var(--c-rule);
+}
+
+.badge-danger {
+  background: var(--c-danger-soft);
+  color: var(--c-danger-deep);
+  border-color: #fecaca;
+}
+
+.badge-warn {
+  background: var(--c-warn-soft);
+  color: var(--c-warn);
+  border-color: #fde68a;
+}
+
+/* ---------- banner ---------- */
+
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 14px 20px;
+  background: var(--c-warn-soft);
+  border: 1px solid #fde68a;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  color: var(--c-warn);
+  margin-bottom: 28px;
+}
+.banner strong { color: #78350f; font-weight: 500; }
+
+/* ---------- toasts ---------- */
+
+.toast-container {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: #fff;
+  border: 1px solid var(--c-rule-strong);
+  border-radius: 999px;
+  padding: 11px 22px;
+  font-family: var(--font-sans);
+  font-size: 14px;
+  color: var(--c-ink);
+  box-shadow: var(--shadow-md);
+  animation: toast-in 220ms ease-out;
+}
+
+.toast.toast-success {
+  border-color: #a7f3d0;
+  background: linear-gradient(180deg, #ffffff 0%, var(--c-success-soft) 180%);
+}
+.toast.toast-success .toast-dot { background: var(--c-success); }
+
+.toast.toast-error {
+  border-color: #fecaca;
+  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 180%);
+}
+.toast.toast-error .toast-dot { background: var(--c-danger); }
+
+.toast-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-blue);
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ---------- key reveal banner ---------- */
+
+.key-reveal {
+  background: linear-gradient(180deg, #ffffff 0%, var(--c-blue-tint) 140%);
+  border: 1px solid var(--c-blue-soft);
+  border-left: 3px solid var(--c-blue);
+  border-radius: var(--radius-md);
+  padding: 22px 26px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow-md);
+}
+
+.key-reveal-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.key-reveal-head strong {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 36, 'SOFT' 30;
+  font-size: 17px;
+  font-weight: 500;
+  color: var(--c-ink);
+}
+
+.key-reveal-value {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  background: #fff;
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--c-ink);
+  word-break: break-all;
+}
+
+.key-reveal-warn {
+  margin: 14px 0 0;
+  font-size: 13px;
+  color: var(--c-warn);
+}
+
+/* ---------- key list ---------- */
+
+.key-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.key-row-main {
+  flex: 1;
+  min-width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.key-name {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 36, 'SOFT' 30;
+  font-weight: 500;
+  font-size: 18px;
+  color: var(--c-ink);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.key-mask {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--c-ink-soft);
+  letter-spacing: 0.02em;
+}
+
+.key-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--c-ink-mute);
+  margin-top: 6px;
+}
+
+.key-meta .meta-label {
+  color: var(--c-blue);
+  text-transform: lowercase;
+  margin-right: 4px;
+}
+
+.scope-summary {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--c-ink-mute);
+}
+
+.scope-summary code {
+  background: var(--c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-right: 4px;
+}
+
+/* ---------- plan grid ---------- */
+
+.plan-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 8px;
+}
+
+.plan-card {
+  position: relative;
+  background: #fff;
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-md);
+  padding: 28px 28px 24px;
+  box-shadow: var(--shadow-sm);
+  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+  display: flex;
+  flex-direction: column;
+}
+.plan-card:hover {
+  border-color: var(--c-blue-soft);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.plan-card.current {
+  border-color: var(--c-blue);
+  box-shadow: 0 10px 30px -12px rgba(37, 99, 235, 0.25);
+  background: linear-gradient(180deg, #ffffff 0%, var(--c-blue-tint) 160%);
+}
+
+.plan-card .badge {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.plan-name {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 36, 'SOFT' 30;
+  font-weight: 500;
+  font-size: 22px;
+  color: var(--c-ink);
+  margin: 0 0 4px;
+}
+
+.plan-price {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 144, 'SOFT' 30;
+  font-size: 42px;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--c-ink);
+  margin: 8px 0 14px;
+}
+.plan-price small {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--c-ink-mute);
+}
+
+.plan-features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.plan-features li {
+  font-size: 14px;
+  color: var(--c-ink-soft);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.plan-features li::before {
+  content: "·";
+  color: var(--c-blue);
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin-top: 2px;
+}
+
+.plan-cta {
+  margin-top: auto;
+}
+
+/* ---------- usage ---------- */
+
+.usage-summary {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 24px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.usage-count {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 144, 'SOFT' 30;
+  font-size: 44px;
+  line-height: 1;
+  font-weight: 400;
+  color: var(--c-ink);
+}
+.usage-count small {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--c-ink-mute);
+}
+
+.usage-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--c-bg-soft);
+  border: 1px solid var(--c-rule);
+  border-radius: 999px;
+  overflow: hidden;
+  margin-top: 18px;
+}
+
+.usage-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--c-blue) 0%, #60a5fa 100%);
+  border-radius: 999px;
+  transition: width 300ms ease;
+}
+
+.usage-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  margin-top: 12px;
+}
+
+.usage-table th {
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--c-ink-mute);
+  padding: 12px 0;
+  border-bottom: 1px solid var(--c-rule);
+  font-weight: 500;
+}
+
+.usage-table td {
+  padding: 14px 0;
+  border-bottom: 1px solid var(--c-rule);
+  color: var(--c-ink-soft);
+}
+.usage-table tr:last-child td { border-bottom: 0; }
+.usage-table td:first-child {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--c-ink);
+}
+.usage-table td.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-ink);
+}
+
+/* ---------- entry / landing page of dashboard ---------- */
+
+.entry-card {
+  width: 100%;
+  max-width: 440px;
+  background: #fff;
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-lg);
+  padding: 48px 44px 40px;
+  box-shadow: var(--shadow-md);
+  text-align: left;
+}
+
+.entry-brand {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.22em;
+  color: var(--c-blue);
+  margin-bottom: 16px;
+}
+
+.entry-tagline {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 144, 'SOFT' 30;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  color: var(--c-ink);
+  margin: 0 0 32px;
+}
+
+.entry-tagline em {
+  font-style: italic;
+  font-variation-settings: 'opsz' 144, 'SOFT' 100;
+  color: var(--c-blue);
+}
+
+.entry-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 24px 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--c-ink-mute);
+  text-transform: lowercase;
+  letter-spacing: 0.06em;
+}
+.entry-divider::before,
+.entry-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--c-rule);
+}
+
+.entry-magic-note {
+  margin: 16px 0 0;
+  padding: 14px 16px;
+  background: var(--c-blue-tint);
+  border: 1px solid var(--c-blue-soft);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--c-ink-soft);
+  word-break: break-all;
+}
+.entry-magic-note strong {
+  display: block;
+  color: var(--c-blue);
+  text-transform: lowercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+.entry-magic-note a { color: var(--c-blue-deep); }
+
+/* ---------- footer ---------- */
+
+.app-footer {
+  border-top: 1px solid var(--c-rule);
+  background: var(--c-bg);
+  padding: 28px 0;
+  margin-top: auto;
+}
+
+.app-footer-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  flex-wrap: wrap;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--c-ink-mute);
+}
+
+.app-footer-line {
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+
+.app-footer-line a {
+  color: var(--c-ink-soft);
+  border-bottom: 1px solid var(--c-rule-strong);
+  padding-bottom: 1px;
+  transition: color 160ms ease, border-color 160ms ease;
+}
+.app-footer-line a:hover {
+  color: var(--c-blue);
+  border-color: var(--c-blue);
+}
+
+/* ---------- inline flex helpers ---------- */
+
+.row { display: flex; align-items: center; gap: 12px; }
+.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.row-wrap { flex-wrap: wrap; }
+.col { display: flex; flex-direction: column; gap: 12px; }
+
+.stack-sm > * + * { margin-top: 8px; }
+.stack > * + *    { margin-top: 14px; }
+.stack-lg > * + * { margin-top: 22px; }
+
+.mt-0  { margin-top: 0; }
+.mt-8  { margin-top: 8px; }
+.mt-16 { margin-top: 16px; }
+.mt-24 { margin-top: 24px; }
+.mt-40 { margin-top: 40px; }
+
+.mb-0  { margin-bottom: 0; }
+.mb-8  { margin-bottom: 8px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-24 { margin-bottom: 24px; }
+
+.text-mute { color: var(--c-ink-mute); }
+.text-soft { color: var(--c-ink-soft); }
+.text-mono { font-family: var(--font-mono); font-size: 13px; }
+
+/* ---------- code blocks ---------- */
+
+code, pre {
+  font-family: var(--font-mono);
+}
+
+.code-block {
+  background: var(--c-bg-soft);
+  border: 1px solid var(--c-rule);
+  border-radius: var(--radius-sm);
+  padding: 14px 18px;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--c-ink);
+  overflow-x: auto;
+  white-space: pre;
+  margin: 0;
+}
+
+/* ---------- empty state ---------- */
+
+.empty-state {
+  text-align: center;
+  padding: 56px 24px;
+  border: 1px dashed var(--c-rule-strong);
+  border-radius: var(--radius-md);
+  color: var(--c-ink-mute);
+}
+.empty-state p { margin: 0 0 8px; font-size: 15px; }
+.empty-state p.empty-title {
+  font-family: var(--font-serif);
+  font-variation-settings: 'opsz' 36, 'SOFT' 30;
+  font-weight: 500;
+  font-size: 18px;
+  color: var(--c-ink-soft);
+}
+
+/* ---------- danger zone ---------- */
+
+.danger-zone {
+  margin-top: 40px;
+  border: 1px solid var(--c-danger-soft);
+  background: var(--c-danger-tint);
+  border-radius: var(--radius-md);
+  padding: 22px 26px;
+}
+.danger-zone-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-danger);
+  margin: 0 0 8px;
+}
+.danger-zone-body {
+  font-size: 14px;
+  color: var(--c-ink-soft);
+  margin: 0 0 16px;
+}
+
+/* ---------- responsive ---------- */
+
+@media (max-width: 760px) {
+  .plan-grid { grid-template-columns: 1fr; }
+  .usage-summary { grid-template-columns: 1fr; }
+  .app-header-meta .plan-chip { display: none; }
+  main.app-main { padding: 40px 0 80px; }
+  .tabs { margin-bottom: 32px; }
+  .card { padding: 22px 20px; }
+  .entry-card { padding: 36px 28px 32px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; animation: none !important; }
+}
diff --git a/web/ui/src/app.d.ts b/web/ui/src/app.d.ts
new file mode 100644
index 0000000..f609a0b
--- /dev/null
+++ b/web/ui/src/app.d.ts
@@ -0,0 +1,16 @@
+// See https://kit.svelte.dev/docs/types#app
+
+import type { Account } from '$lib/server/db';
+
+declare global {
+  namespace App {
+    interface Locals {
+      account: Account | null;
+    }
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/web/ui/src/app.html b/web/ui/src/app.html
new file mode 100644
index 0000000..beb1a42
--- /dev/null
+++ b/web/ui/src/app.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Tidy Index — dashboard" />
+    <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
+
+    <!-- Preload the three self-hosted webfonts so the browser fetches
+         them in parallel with the CSS, not after it. -->
+    <link rel="preload" href="%sveltekit.assets%/fonts/fraunces-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%sveltekit.assets%/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%sveltekit.assets%/fonts/jetbrains-mono-latin.woff2" as="font" type="font/woff2" crossorigin />
+
+    <!-- Prevent FOUT: hide the body until webfonts are loaded, with a
+         1500ms safety timeout so the page never stays blank forever. -->
+    <style>html.fonts-pending body { visibility: hidden; }</style>
+    <script>
+      (function () {
+        var d = document;
+        d.documentElement.classList.add('fonts-pending');
+        var done = false;
+        function reveal() {
+          if (done) return;
+          done = true;
+          d.documentElement.classList.remove('fonts-pending');
+        }
+        if (d.fonts && d.fonts.ready && typeof d.fonts.ready.then === 'function') {
+          d.fonts.ready.then(reveal);
+        } else {
+          reveal();
+        }
+        setTimeout(reveal, 1500);
+      })();
+    </script>
+
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/web/ui/src/hooks.server.ts b/web/ui/src/hooks.server.ts
new file mode 100644
index 0000000..1204a94
--- /dev/null
+++ b/web/ui/src/hooks.server.ts
@@ -0,0 +1,16 @@
+import { redirect, type Handle } from '@sveltejs/kit';
+
+import { getAccountFromCookies } from '$lib/server/auth';
+
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.account = getAccountFromCookies(event.cookies);
+
+  const path = event.url.pathname;
+
+  // /dashboard/* requires a session. Bounce to the entry page if missing.
+  if (path.startsWith('/dashboard') && !event.locals.account) {
+    throw redirect(303, '/');
+  }
+
+  return resolve(event);
+};
diff --git a/web/ui/src/lib/components/BrandMark.svelte b/web/ui/src/lib/components/BrandMark.svelte
new file mode 100644
index 0000000..0feab32
--- /dev/null
+++ b/web/ui/src/lib/components/BrandMark.svelte
@@ -0,0 +1,7 @@
+<span class="brand-mark" aria-hidden="true">
+  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="6"  width="24" height="3" rx="1.5" fill="currentColor" />
+    <rect x="4" y="14" width="18" height="3" rx="1.5" fill="currentColor" opacity="0.7" />
+    <rect x="4" y="22" width="12" height="3" rx="1.5" fill="currentColor" opacity="0.4" />
+  </svg>
+</span>
diff --git a/web/ui/src/lib/components/Footer.svelte b/web/ui/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..8042f64
--- /dev/null
+++ b/web/ui/src/lib/components/Footer.svelte
@@ -0,0 +1,8 @@
+<footer class="app-footer">
+  <div class="container app-footer-inner">
+    <p class="app-footer-line">
+      Need something &mdash; email us at
+      <a href="mailto:contact@tidyindex.com">contact@tidyindex.com</a>
+    </p>
+  </div>
+</footer>
diff --git a/web/ui/src/lib/components/Toasts.svelte b/web/ui/src/lib/components/Toasts.svelte
new file mode 100644
index 0000000..3d66b3f
--- /dev/null
+++ b/web/ui/src/lib/components/Toasts.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { toasts } from '$lib/stores/toasts';
+</script>
+
+<div class="toast-container" aria-live="polite" aria-atomic="true">
+  {#each $toasts as t (t.id)}
+    <div class="toast toast-{t.kind}">
+      <span class="toast-dot"></span>
+      <span>{t.message}</span>
+    </div>
+  {/each}
+</div>
diff --git a/web/ui/src/lib/datasets.ts b/web/ui/src/lib/datasets.ts
new file mode 100644
index 0000000..83c2e4e
--- /dev/null
+++ b/web/ui/src/lib/datasets.ts
@@ -0,0 +1,46 @@
+/**
+ * The shared list of dataset slugs a user can scope an API key to.
+ * Used by the create-key form, the key scope display, and the usage
+ * breakdown. The order here is the order they show up in the UI.
+ */
+export const DATASETS = [
+  'irs-990',
+  'irs-990pf',
+  'sec-edgar',
+  'sec-13f',
+  'sec-form4',
+  'fec-contributions',
+  'lobbying-federal',
+  'usaspending',
+  'pacer',
+  'state-corps',
+  'ucc-filings',
+  'fda-faers',
+  'osha',
+  'nih-reporter',
+  'cfpb-complaints'
+] as const;
+
+export type DatasetSlug = (typeof DATASETS)[number];
+
+/** Friendly short label for a dataset slug. */
+export function datasetLabel(slug: string): string {
+  switch (slug) {
+    case 'irs-990':           return 'IRS 990';
+    case 'irs-990pf':         return 'IRS 990-PF';
+    case 'sec-edgar':         return 'SEC EDGAR';
+    case 'sec-13f':           return 'SEC 13-F';
+    case 'sec-form4':         return 'SEC Form 4';
+    case 'fec-contributions': return 'FEC contributions';
+    case 'lobbying-federal':  return 'Federal lobbying';
+    case 'usaspending':       return 'USAspending';
+    case 'pacer':             return 'PACER';
+    case 'state-corps':       return 'State incorporation';
+    case 'ucc-filings':       return 'UCC filings';
+    case 'fda-faers':         return 'FDA FAERS';
+    case 'osha':              return 'OSHA inspections';
+    case 'nih-reporter':      return 'NIH RePORTER';
+    case 'cfpb-complaints':   return 'CFPB complaints';
+    default:                  return slug;
+  }
+}
diff --git a/web/ui/src/lib/keys.ts b/web/ui/src/lib/keys.ts
new file mode 100644
index 0000000..5fddedc
--- /dev/null
+++ b/web/ui/src/lib/keys.ts
@@ -0,0 +1,24 @@
+import { DATASETS } from './datasets';
+
+/** Display mask: prefix + bullets. We don't store the full key, so we
+ *  cannot show any trailing characters from it after creation. */
+export function maskKey(prefix: string): string {
+  return `${prefix}${'\u2022'.repeat(24)}`;
+}
+
+/** Validate + normalize a scope list from user input. Used server-side
+ *  when persisting a new key; kept in the client-safe module so the
+ *  create-key form can mirror its logic if it wants. */
+export function normalizeScopes(input: string[]): string[] {
+  if (!input || input.length === 0) return ['*'];
+  if (input.includes('*')) return ['*'];
+  const allowed = new Set<string>(DATASETS);
+  const out = input.filter((s) => allowed.has(s));
+  return out.length === 0 ? ['*'] : out;
+}
+
+export function scopeSummary(scopes: string[]): string {
+  if (scopes.length === 1 && scopes[0] === '*') return 'all datasets';
+  if (scopes.length <= 3) return scopes.join(', ');
+  return `${scopes.slice(0, 2).join(', ')} +${scopes.length - 2} more`;
+}
diff --git a/web/ui/src/lib/plans.ts b/web/ui/src/lib/plans.ts
new file mode 100644
index 0000000..bf6c474
--- /dev/null
+++ b/web/ui/src/lib/plans.ts
@@ -0,0 +1,82 @@
+export type PlanId = 'free' | 'dev' | 'pro' | 'enterprise';
+
+export interface Plan {
+  id: PlanId;
+  name: string;
+  price: number | null;         // null = custom / contact us
+  priceLabel: string;
+  period: string;
+  requestsPerMonth: number;     // Infinity for enterprise
+  maxKeys: number;              // Infinity for enterprise
+  features: string[];
+  cta: string;
+}
+
+export const PLANS: Record<PlanId, Plan> = {
+  free: {
+    id: 'free',
+    name: 'Free',
+    price: 0,
+    priceLabel: '$0',
+    period: 'forever',
+    requestsPerMonth: 1_000,
+    maxKeys: 1,
+    features: [
+      '1,000 requests per month',
+      '1 API key',
+      'JSON + JSONL access',
+      'Community support'
+    ],
+    cta: 'Switch to Free'
+  },
+  dev: {
+    id: 'dev',
+    name: 'Developer',
+    price: 100,
+    priceLabel: '$100',
+    period: '/ month',
+    requestsPerMonth: 50_000,
+    maxKeys: 5,
+    features: [
+      '50,000 requests per month',
+      '5 API keys',
+      'All response shapes',
+      'Email support'
+    ],
+    cta: 'Switch to Developer'
+  },
+  pro: {
+    id: 'pro',
+    name: 'Professional',
+    price: 1000,
+    priceLabel: '$1,000',
+    period: '/ month',
+    requestsPerMonth: 500_000,
+    maxKeys: 20,
+    features: [
+      '500,000 requests per month',
+      '20 API keys',
+      'Priority support',
+      'SLA on uptime'
+    ],
+    cta: 'Switch to Pro'
+  },
+  enterprise: {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: null,
+    priceLabel: 'Custom',
+    period: '',
+    requestsPerMonth: Number.POSITIVE_INFINITY,
+    maxKeys: Number.POSITIVE_INFINITY,
+    features: [
+      'Unlimited requests',
+      'Unlimited keys',
+      'Dedicated support',
+      'Custom datasets and SLAs'
+    ],
+    cta: 'Contact us'
+  }
+};
+
+export const PLAN_ORDER: PlanId[] = ['free', 'dev', 'pro', 'enterprise'];
diff --git a/web/ui/src/lib/server/auth.ts b/web/ui/src/lib/server/auth.ts
new file mode 100644
index 0000000..6f202d3
--- /dev/null
+++ b/web/ui/src/lib/server/auth.ts
@@ -0,0 +1,153 @@
+import jwt from 'jsonwebtoken';
+import { randomBytes } from 'node:crypto';
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
+import type { Cookies } from '@sveltejs/kit';
+
+import { db, queries, newId, now, type Account } from './db';
+
+function getJwtSecret(): string {
+  const secret = env.JWT_SECRET;
+  if (!secret) {
+    throw new Error(
+      'JWT_SECRET env variable is required. Copy .env.example to .env ' +
+        'and generate one with `openssl rand -base64 48`.'
+    );
+  }
+  return secret;
+}
+
+const COOKIE_NAME = 'ti_sess';
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+interface SessionPayload {
+  sub: string;              // account id
+}
+
+export function createSession(cookies: Cookies, accountId: string): void {
+  const token = jwt.sign(
+    { sub: accountId } satisfies SessionPayload,
+    getJwtSecret(),
+    { algorithm: 'HS256' }
+  );
+  cookies.set(COOKIE_NAME, token, {
+    path: '/',
+    httpOnly: true,
+    sameSite: 'lax',
+    secure: !dev,
+    maxAge: COOKIE_MAX_AGE
+  });
+}
+
+export function clearSession(cookies: Cookies): void {
+  cookies.delete(COOKIE_NAME, { path: '/' });
+}
+
+export function getAccountFromCookies(cookies: Cookies): Account | null {
+  const raw = cookies.get(COOKIE_NAME);
+  if (!raw) return null;
+  try {
+    const decoded = jwt.verify(raw, getJwtSecret(), {
+      algorithms: ['HS256']
+    }) as SessionPayload;
+    if (!decoded.sub) return null;
+    const account = queries.accountById.get(decoded.sub);
+    return account ?? null;
+  } catch {
+    return null;
+  }
+}
+
+// -------- account helpers --------
+
+/** Create a brand-new anonymous account (no email). */
+export function createAnonymousAccount(): Account {
+  const id = newId();
+  const ts = now();
+  queries.insertAccount.run(id, null, 'free', ts);
+  return { id, email: null, pending_email: null, plan: 'free', created_at: ts };
+}
+
+/** Find an account by email or create a new one with that email. */
+export function getOrCreateAccountByEmail(email: string): Account {
+  const existing = queries.accountByEmail.get(email);
+  if (existing) return existing;
+  const id = newId();
+  const ts = now();
+  queries.insertAccount.run(id, email, 'free', ts);
+  return { id, email, pending_email: null, plan: 'free', created_at: ts };
+}
+
+// -------- magic links --------
+
+export interface MagicLink {
+  token: string;
+  expires_at: number;
+  url: string;
+}
+
+export function generateMagicLink(
+  accountId: string,
+  baseUrl: string
+): MagicLink {
+  const token = randomBytes(24).toString('base64url');
+  const id = newId();
+  const ts = now();
+  const expires = ts + 15 * 60 * 1000; // 15 minutes
+  queries.insertMagicLink.run(id, accountId, token, expires, ts);
+  const url = `${baseUrl.replace(/\/$/, '')}/auth/callback?token=${token}`;
+  return { token, expires_at: expires, url };
+}
+
+export function consumeMagicLink(token: string): Account | null {
+  const row = queries.magicLinkByToken.get(token);
+  if (!row) return null;
+  if (row.used === 1) return null;
+  if (row.expires_at < now()) return null;
+  queries.markMagicLinkUsed.run(row.id);
+  const account = queries.accountById.get(row.account_id);
+  return account ?? null;
+}
+
+// -------- email attach / merge --------
+
+/**
+ * Attach an email to an existing (anonymous) account. If another account
+ * already uses that email, merge this account into the other one — all
+ * API keys move over, the anonymous account is deleted, and the caller
+ * receives the surviving account id (which may be different from the
+ * one passed in).
+ */
+export function attachEmailToAccount(
+  accountId: string,
+  email: string
+): { accountId: string; merged: boolean } {
+  const normalized = email.trim().toLowerCase();
+  if (!normalized) throw new Error('Email is empty');
+
+  const current = queries.accountById.get(accountId);
+  if (!current) throw new Error('Account not found');
+
+  const existing = queries.accountByEmail.get(normalized);
+
+  // Same account already has this email — no-op.
+  if (existing && existing.id === current.id) {
+    return { accountId: current.id, merged: false };
+  }
+
+  // No other account has this email — just attach it.
+  if (!existing) {
+    queries.updateAccountEmail.run(normalized, current.id);
+    return { accountId: current.id, merged: false };
+  }
+
+  // Another account already owns the email. Merge current into existing:
+  // move all keys over, then delete the current account.
+  const merge = db.transaction(() => {
+    queries.reassignKeys.run(existing.id, current.id);
+    queries.deleteAccount.run(current.id);
+  });
+  merge();
+
+  return { accountId: existing.id, merged: true };
+}
diff --git a/web/ui/src/lib/server/db.ts b/web/ui/src/lib/server/db.ts
new file mode 100644
index 0000000..ee5736d
--- /dev/null
+++ b/web/ui/src/lib/server/db.ts
@@ -0,0 +1,233 @@
+import Database from 'better-sqlite3';
+import { mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { randomUUID } from 'node:crypto';
+import { env } from '$env/dynamic/private';
+
+import type { PlanId } from '$lib/plans';
+
+const DB_PATH = resolve(env.DATABASE_PATH || './data/dashboard.db');
+
+// Make sure the data/ directory exists before better-sqlite3 tries to open.
+mkdirSync(dirname(DB_PATH), { recursive: true });
+
+export const db = new Database(DB_PATH);
+db.pragma('journal_mode = WAL');
+db.pragma('foreign_keys = ON');
+
+// -------- schema --------
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS accounts (
+    id            TEXT PRIMARY KEY,
+    email         TEXT UNIQUE,
+    pending_email TEXT,
+    plan          TEXT NOT NULL DEFAULT 'free',
+    created_at    INTEGER NOT NULL
+  );
+
+  CREATE TABLE IF NOT EXISTS api_keys (
+    id            TEXT PRIMARY KEY,
+    account_id    TEXT NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+    key_hash      TEXT NOT NULL UNIQUE,
+    key_prefix    TEXT NOT NULL,
+    name          TEXT NOT NULL,
+    scopes        TEXT NOT NULL DEFAULT '["*"]',
+    active        INTEGER NOT NULL DEFAULT 1,
+    created_at    INTEGER NOT NULL,
+    last_used_at  INTEGER
+  );
+  CREATE INDEX IF NOT EXISTS idx_api_keys_account ON api_keys(account_id);
+
+  CREATE TABLE IF NOT EXISTS magic_links (
+    id          TEXT PRIMARY KEY,
+    account_id  TEXT NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+    token       TEXT NOT NULL UNIQUE,
+    expires_at  INTEGER NOT NULL,
+    used        INTEGER NOT NULL DEFAULT 0,
+    created_at  INTEGER NOT NULL
+  );
+  CREATE INDEX IF NOT EXISTS idx_magic_links_token ON magic_links(token);
+
+  CREATE TABLE IF NOT EXISTS usage_events (
+    id          TEXT PRIMARY KEY,
+    api_key_id  TEXT NOT NULL REFERENCES api_keys(id) ON DELETE CASCADE,
+    dataset     TEXT NOT NULL,
+    timestamp   INTEGER NOT NULL
+  );
+  CREATE INDEX IF NOT EXISTS idx_usage_key       ON usage_events(api_key_id);
+  CREATE INDEX IF NOT EXISTS idx_usage_timestamp ON usage_events(timestamp);
+  CREATE INDEX IF NOT EXISTS idx_usage_dataset   ON usage_events(dataset);
+`);
+
+// Idempotent migration: pre-existing dashboard.db files won't have
+// pending_email yet. SQLite has no IF NOT EXISTS for ALTER, so check
+// PRAGMA table_info first.
+{
+  const cols = db
+    .prepare(`PRAGMA table_info(accounts)`)
+    .all() as Array<{ name: string }>;
+  if (!cols.some((c) => c.name === 'pending_email')) {
+    db.exec(`ALTER TABLE accounts ADD COLUMN pending_email TEXT`);
+  }
+}
+
+// -------- types --------
+
+export interface Account {
+  id: string;
+  email: string | null;
+  /** Email the user is mid-verifying. Cleared on completion or cancel. */
+  pending_email: string | null;
+  plan: PlanId;
+  created_at: number;
+}
+
+export interface ApiKeyRow {
+  id: string;
+  account_id: string;
+  key_hash: string;
+  key_prefix: string;
+  name: string;
+  scopes: string;             // JSON string on disk
+  active: number;             // 0 / 1
+  created_at: number;
+  last_used_at: number | null;
+}
+
+export interface ApiKey {
+  id: string;
+  account_id: string;
+  key_prefix: string;
+  name: string;
+  scopes: string[];           // decoded
+  active: boolean;
+  created_at: number;
+  last_used_at: number | null;
+}
+
+export function rowToKey(row: ApiKeyRow): ApiKey {
+  return {
+    id: row.id,
+    account_id: row.account_id,
+    key_prefix: row.key_prefix,
+    name: row.name,
+    scopes: JSON.parse(row.scopes),
+    active: row.active === 1,
+    created_at: row.created_at,
+    last_used_at: row.last_used_at
+  };
+}
+
+// -------- helpers --------
+
+export function now(): number {
+  return Date.now();
+}
+
+export function newId(): string {
+  return randomUUID();
+}
+
+// -------- prepared statements --------
+
+const stmts = {
+  accountById: db.prepare<string, Account>(
+    `SELECT id, email, pending_email, plan, created_at FROM accounts WHERE id = ?`
+  ),
+  accountByEmail: db.prepare<string, Account>(
+    `SELECT id, email, pending_email, plan, created_at FROM accounts WHERE email = ?`
+  ),
+  insertAccount: db.prepare(
+    `INSERT INTO accounts (id, email, plan, created_at) VALUES (?, ?, ?, ?)`
+  ),
+  updateAccountEmail: db.prepare(
+    `UPDATE accounts SET email = ? WHERE id = ?`
+  ),
+  setPendingEmail: db.prepare(
+    `UPDATE accounts SET pending_email = ? WHERE id = ?`
+  ),
+  clearPendingEmail: db.prepare(
+    `UPDATE accounts SET pending_email = NULL WHERE id = ?`
+  ),
+  promotePendingEmail: db.prepare(
+    `UPDATE accounts SET email = pending_email, pending_email = NULL WHERE id = ?`
+  ),
+  updateAccountPlan: db.prepare(
+    `UPDATE accounts SET plan = ? WHERE id = ?`
+  ),
+  deleteAccount: db.prepare(
+    `DELETE FROM accounts WHERE id = ?`
+  ),
+  reassignKeys: db.prepare(
+    `UPDATE api_keys SET account_id = ? WHERE account_id = ?`
+  ),
+  reassignUsage: db.prepare(
+    `UPDATE usage_events SET api_key_id = api_key_id WHERE api_key_id IN
+      (SELECT id FROM api_keys WHERE account_id = ?)`
+  ),
+  keysForAccount: db.prepare<string, ApiKeyRow>(
+    `SELECT * FROM api_keys WHERE account_id = ? ORDER BY created_at DESC`
+  ),
+  keyById: db.prepare<[string, string], ApiKeyRow>(
+    `SELECT * FROM api_keys WHERE id = ? AND account_id = ?`
+  ),
+  insertKey: db.prepare(
+    `INSERT INTO api_keys
+      (id, account_id, key_hash, key_prefix, name, scopes, active, created_at)
+     VALUES (?, ?, ?, ?, ?, ?, 1, ?)`
+  ),
+  revokeKey: db.prepare(
+    `UPDATE api_keys SET active = 0 WHERE id = ? AND account_id = ?`
+  ),
+  countActiveKeys: db.prepare<string, { c: number }>(
+    `SELECT COUNT(*) AS c FROM api_keys WHERE account_id = ? AND active = 1`
+  ),
+  insertMagicLink: db.prepare(
+    `INSERT INTO magic_links (id, account_id, token, expires_at, used, created_at)
+     VALUES (?, ?, ?, ?, 0, ?)`
+  ),
+  magicLinkByToken: db.prepare<
+    string,
+    { id: string; account_id: string; expires_at: number; used: number }
+  >(
+    `SELECT id, account_id, expires_at, used FROM magic_links WHERE token = ?`
+  ),
+  markMagicLinkUsed: db.prepare(
+    `UPDATE magic_links SET used = 1 WHERE id = ?`
+  ),
+  insertUsageEvent: db.prepare(
+    `INSERT INTO usage_events (id, api_key_id, dataset, timestamp)
+     VALUES (?, ?, ?, ?)`
+  ),
+  usageCountSince: db.prepare<[string, number], { c: number }>(
+    `SELECT COUNT(*) AS c FROM usage_events e
+      JOIN api_keys k ON k.id = e.api_key_id
+     WHERE k.account_id = ? AND e.timestamp >= ?`
+  ),
+  usageByDataset: db.prepare<
+    [string, number],
+    { dataset: string; c: number }
+  >(
+    `SELECT e.dataset AS dataset, COUNT(*) AS c
+       FROM usage_events e
+       JOIN api_keys k ON k.id = e.api_key_id
+      WHERE k.account_id = ? AND e.timestamp >= ?
+      GROUP BY e.dataset
+      ORDER BY c DESC`
+  ),
+  usageByKey: db.prepare<
+    [number, string],
+    { key_id: string; name: string; c: number }
+  >(
+    `SELECT k.id AS key_id, k.name AS name, COUNT(e.id) AS c
+       FROM api_keys k
+       LEFT JOIN usage_events e
+         ON e.api_key_id = k.id AND e.timestamp >= ?
+      WHERE k.account_id = ?
+      GROUP BY k.id
+      ORDER BY c DESC`
+  )
+};
+
+export const queries = stmts;
diff --git a/web/ui/src/lib/server/keys.ts b/web/ui/src/lib/server/keys.ts
new file mode 100644
index 0000000..350839b
--- /dev/null
+++ b/web/ui/src/lib/server/keys.ts
@@ -0,0 +1,79 @@
+import { createHash, randomBytes } from 'node:crypto';
+
+import { queries, newId, now, rowToKey, type ApiKey } from './db';
+import { normalizeScopes } from '$lib/keys';
+
+const ALPHABET =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+/**
+ * Generate a new API key string (not yet persisted).
+ * Format: "ti_" + 32 random alphanumeric characters.
+ */
+export function mintKey(): { key: string; hash: string; prefix: string } {
+  const bytes = randomBytes(32);
+  let random = '';
+  for (let i = 0; i < 32; i++) {
+    random += ALPHABET[bytes[i] % ALPHABET.length];
+  }
+  const key = `ti_${random}`;
+  const hash = createHash('sha256').update(key).digest('hex');
+  const prefix = key.slice(0, 8); // "ti_" + 5 chars
+  return { key, hash, prefix };
+}
+
+// -------- persistence --------
+
+export interface CreateKeyInput {
+  accountId: string;
+  name: string;
+  scopes: string[];
+}
+
+export interface CreatedKey extends ApiKey {
+  /** The full plaintext key. Only returned on creation — never stored. */
+  plaintext: string;
+}
+
+export function createKey(input: CreateKeyInput): CreatedKey {
+  const { key, hash, prefix } = mintKey();
+  const id = newId();
+  const ts = now();
+  const name = input.name.trim() || 'Untitled key';
+  const scopes = normalizeScopes(input.scopes);
+  queries.insertKey.run(
+    id,
+    input.accountId,
+    hash,
+    prefix,
+    name,
+    JSON.stringify(scopes),
+    ts
+  );
+  return {
+    id,
+    account_id: input.accountId,
+    key_prefix: prefix,
+    name,
+    scopes,
+    active: true,
+    created_at: ts,
+    last_used_at: null,
+    plaintext: key
+  };
+}
+
+export function listKeys(accountId: string): ApiKey[] {
+  return queries.keysForAccount.all(accountId).map(rowToKey);
+}
+
+export function revokeKey(accountId: string, keyId: string): boolean {
+  const row = queries.keyById.get(keyId, accountId);
+  if (!row) return false;
+  queries.revokeKey.run(keyId, accountId);
+  return true;
+}
+
+export function countActiveKeys(accountId: string): number {
+  return queries.countActiveKeys.get(accountId)?.c ?? 0;
+}
diff --git a/web/ui/src/lib/server/usage.ts b/web/ui/src/lib/server/usage.ts
new file mode 100644
index 0000000..721cc3c
--- /dev/null
+++ b/web/ui/src/lib/server/usage.ts
@@ -0,0 +1,33 @@
+import { queries } from './db';
+
+export function startOfCurrentMonth(): number {
+  const d = new Date();
+  d.setUTCDate(1);
+  d.setUTCHours(0, 0, 0, 0);
+  return d.getTime();
+}
+
+export function usageCountThisMonth(accountId: string): number {
+  return queries.usageCountSince.get(accountId, startOfCurrentMonth())?.c ?? 0;
+}
+
+export function usageByDataset(
+  accountId: string
+): Array<{ dataset: string; count: number }> {
+  const rows = queries.usageByDataset.all(accountId, startOfCurrentMonth());
+  return rows.map((r: { dataset: string; c: number }) => ({
+    dataset: r.dataset,
+    count: r.c
+  }));
+}
+
+export function usageByKey(
+  accountId: string
+): Array<{ keyId: string; name: string; count: number }> {
+  const rows = queries.usageByKey.all(startOfCurrentMonth(), accountId);
+  return rows.map((r: { key_id: string; name: string; c: number }) => ({
+    keyId: r.key_id,
+    name: r.name,
+    count: r.c
+  }));
+}
diff --git a/web/ui/src/lib/stores/toasts.ts b/web/ui/src/lib/stores/toasts.ts
new file mode 100644
index 0000000..27dd8c4
--- /dev/null
+++ b/web/ui/src/lib/stores/toasts.ts
@@ -0,0 +1,21 @@
+import { writable } from 'svelte/store';
+
+export type ToastKind = 'info' | 'success' | 'error';
+
+export interface Toast {
+  id: number;
+  kind: ToastKind;
+  message: string;
+}
+
+let nextId = 1;
+
+export const toasts = writable<Toast[]>([]);
+
+export function pushToast(message: string, kind: ToastKind = 'info'): void {
+  const id = nextId++;
+  toasts.update((list) => [...list, { id, kind, message }]);
+  setTimeout(() => {
+    toasts.update((list) => list.filter((t) => t.id !== id));
+  }, 2500);
+}
diff --git a/web/ui/src/routes/+layout.server.ts b/web/ui/src/routes/+layout.server.ts
new file mode 100644
index 0000000..37c08a0
--- /dev/null
+++ b/web/ui/src/routes/+layout.server.ts
@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+  return {
+    account: locals.account
+  };
+};
diff --git a/web/ui/src/routes/+layout.svelte b/web/ui/src/routes/+layout.svelte
new file mode 100644
index 0000000..ddd7c4c
--- /dev/null
+++ b/web/ui/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import '../app.css';
+  import Toasts from '$lib/components/Toasts.svelte';
+
+  let { children } = $props();
+</script>
+
+<Toasts />
+{@render children()}
diff --git a/web/ui/src/routes/+page.server.ts b/web/ui/src/routes/+page.server.ts
new file mode 100644
index 0000000..2daf03d
--- /dev/null
+++ b/web/ui/src/routes/+page.server.ts
@@ -0,0 +1,20 @@
+import { redirect } from '@sveltejs/kit';
+
+import { createAnonymousAccount, createSession } from '$lib/server/auth';
+import type { PageServerLoad } from './$types';
+
+/**
+ * The root route is just a bouncer: if you already have a session,
+ * go to the dashboard; if not, we mint an anonymous account on the
+ * spot, set a session cookie, and go to the dashboard.
+ *
+ * There is intentionally no sign-in page. Users can add an email on
+ * the Account tab later if they want a way to recover their keys.
+ */
+export const load: PageServerLoad = async ({ locals, cookies }) => {
+  if (!locals.account) {
+    const account = createAnonymousAccount();
+    createSession(cookies, account.id);
+  }
+  throw redirect(303, '/dashboard');
+};
diff --git a/web/ui/src/routes/auth/callback/+server.ts b/web/ui/src/routes/auth/callback/+server.ts
new file mode 100644
index 0000000..da8181b
--- /dev/null
+++ b/web/ui/src/routes/auth/callback/+server.ts
@@ -0,0 +1,14 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit';
+
+import { consumeMagicLink, createSession } from '$lib/server/auth';
+
+export const GET: RequestHandler = async ({ url, cookies }) => {
+  const token = url.searchParams.get('token');
+  if (!token) throw redirect(303, '/?error=missing-token');
+
+  const account = consumeMagicLink(token);
+  if (!account) throw redirect(303, '/?error=invalid-token');
+
+  createSession(cookies, account.id);
+  throw redirect(303, '/dashboard');
+};
diff --git a/web/ui/src/routes/auth/logout/+server.ts b/web/ui/src/routes/auth/logout/+server.ts
new file mode 100644
index 0000000..b17d1d5
--- /dev/null
+++ b/web/ui/src/routes/auth/logout/+server.ts
@@ -0,0 +1,13 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit';
+
+import { clearSession } from '$lib/server/auth';
+
+export const POST: RequestHandler = async ({ cookies }) => {
+  clearSession(cookies);
+  throw redirect(303, '/');
+};
+
+export const GET: RequestHandler = async ({ cookies }) => {
+  clearSession(cookies);
+  throw redirect(303, '/');
+};
diff --git a/web/ui/src/routes/dashboard/+layout.server.ts b/web/ui/src/routes/dashboard/+layout.server.ts
new file mode 100644
index 0000000..8eebc76
--- /dev/null
+++ b/web/ui/src/routes/dashboard/+layout.server.ts
@@ -0,0 +1,12 @@
+import { redirect } from '@sveltejs/kit';
+
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+  if (!locals.account) {
+    throw redirect(303, '/');
+  }
+  return {
+    account: locals.account
+  };
+};
diff --git a/web/ui/src/routes/dashboard/+layout.svelte b/web/ui/src/routes/dashboard/+layout.svelte
new file mode 100644
index 0000000..9137c75
--- /dev/null
+++ b/web/ui/src/routes/dashboard/+layout.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import BrandMark from '$lib/components/BrandMark.svelte';
+  import Footer from '$lib/components/Footer.svelte';
+  import { PLANS } from '$lib/plans';
+
+  let { data, children } = $props();
+
+  const tabs = [
+    { id: '01', slug: 'keys',    label: 'Keys' },
+    { id: '02', slug: 'usage',   label: 'Usage' },
+    { id: '03', slug: 'account', label: 'Account' }
+  ];
+
+  let currentPath = $derived($page.url.pathname);
+  let account = $derived(data.account);
+  let planInfo = $derived(account ? PLANS[account.plan] : PLANS.free);
+</script>
+
+<svelte:head>
+  <title>Tidy Index — Dashboard</title>
+</svelte:head>
+
+<header class="app-header">
+  <div class="container app-header-inner">
+    <a href="/dashboard/keys" class="brand" aria-label="Tidy Index dashboard home">
+      <BrandMark />
+      <span>Tidy&nbsp;Index</span>
+    </a>
+
+    <div class="app-header-meta">
+      <span class="plan-chip">
+        plan:&nbsp;<strong>{planInfo.name.toLowerCase()}</strong>
+      </span>
+      {#if account?.email}
+        <span title={account.email}>{account.email}</span>
+      {:else if account?.pending_email}
+        <span class="pending-chip" title="Sign-in link sent — awaiting verification">
+          pending&nbsp;·&nbsp;{account.pending_email}
+        </span>
+      {:else}
+        <span class="text-mute">anonymous</span>
+      {/if}
+    </div>
+  </div>
+</header>
+
+<div class="container">
+  {#if !account?.email && !account?.pending_email}
+    <div class="banner">
+      <span>
+        You're using an anonymous session.&nbsp;
+        <strong>Sign in with an email so you don't lose access to your keys.</strong>
+      </span>
+      <a href="/dashboard/account?focus=email" class="btn btn-sm btn-ghost">Sign in</a>
+    </div>
+  {:else if account?.pending_email && !account?.email}
+    <div class="banner">
+      <span>
+        We sent a sign-in link to&nbsp;<strong>{account.pending_email}</strong>.
+        Check your inbox to finish signing in.
+      </span>
+      <a href="/dashboard/account" class="btn btn-sm btn-ghost">Manage</a>
+    </div>
+  {/if}
+
+  <nav class="tabs" aria-label="Dashboard sections">
+    <div class="tabs-inner">
+      {#each tabs as tab}
+        {@const active = currentPath.startsWith(`/dashboard/${tab.slug}`)}
+        <a
+          href="/dashboard/{tab.slug}"
+          class="tab {active ? 'active' : ''}"
+          aria-current={active ? 'page' : undefined}
+        >
+          <span class="tab-num">§&nbsp;{tab.id}</span>
+          <span>{tab.label}</span>
+        </a>
+      {/each}
+    </div>
+  </nav>
+</div>
+
+<main class="app-main">
+  <div class="container">
+    {@render children()}
+  </div>
+</main>
+
+<Footer />
diff --git a/web/ui/src/routes/dashboard/+page.server.ts b/web/ui/src/routes/dashboard/+page.server.ts
new file mode 100644
index 0000000..32e2307
--- /dev/null
+++ b/web/ui/src/routes/dashboard/+page.server.ts
@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+  throw redirect(303, '/dashboard/keys');
+};
diff --git a/web/ui/src/routes/dashboard/account/+page.server.ts b/web/ui/src/routes/dashboard/account/+page.server.ts
new file mode 100644
index 0000000..5581b52
--- /dev/null
+++ b/web/ui/src/routes/dashboard/account/+page.server.ts
@@ -0,0 +1,107 @@
+import { fail, redirect, type Actions } from '@sveltejs/kit';
+
+import { queries } from '$lib/server/db';
+import {
+  attachEmailToAccount,
+  clearSession,
+  createSession
+} from '$lib/server/auth';
+import { PLANS, PLAN_ORDER, type PlanId } from '$lib/plans';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const account = locals.account!;
+  const keys = queries.keysForAccount.all(account.id);
+  return {
+    account,
+    keyCount: keys.length,
+    plans: PLAN_ORDER.map((id) => PLANS[id]),
+    currentPlan: account.plan
+  };
+};
+
+export const actions: Actions = {
+  /**
+   * Anonymous → pending. The user has typed an email; we save it as
+   * pending_email and (eventually) send a magic link. Email sending is
+   * not wired up yet — the UI just transitions to the pending state.
+   */
+  requestSignInLink: async ({ request, locals }) => {
+    const account = locals.account!;
+    const form = await request.formData();
+    const email = ((form.get('email') ?? '') as string).trim().toLowerCase();
+
+    if (!email || !email.includes('@') || email.length > 254) {
+      return fail(400, { error: 'Enter a valid email address.' });
+    }
+
+    queries.setPendingEmail.run(email, account.id);
+    return { linkSent: true, email };
+  },
+
+  /** Pending → anonymous. User abandons the verification. */
+  cancelPendingSignIn: async ({ locals }) => {
+    const account = locals.account!;
+    queries.clearPendingEmail.run(account.id);
+    return { cancelled: true };
+  },
+
+  /**
+   * Pending → signed in. Dev-only shortcut so the signed-in UI is
+   * reachable without a working magic-link verification flow. Will be
+   * removed once /auth/callback promotes pending_email itself.
+   *
+   * Goes through attachEmailToAccount so we get the same conflict
+   * handling as real verification: if another account already owns the
+   * email, current account merges into it (keys move over, current is
+   * deleted, session cookie reissued).
+   */
+  markVerified: async ({ locals, cookies }) => {
+    const account = locals.account!;
+    if (!account.pending_email) {
+      return fail(400, { error: 'No pending email to verify.' });
+    }
+    try {
+      const result = attachEmailToAccount(account.id, account.pending_email);
+      if (result.accountId === account.id) {
+        // Email attached cleanly to this account — clear pending state.
+        queries.clearPendingEmail.run(account.id);
+      } else {
+        // Merged into a pre-existing account that already owned this
+        // email. The current account is gone; reissue the cookie so
+        // subsequent requests load the surviving account.
+        createSession(cookies, result.accountId);
+      }
+      return { verified: true, merged: result.accountId !== account.id };
+    } catch (e) {
+      return fail(400, {
+        error: e instanceof Error ? e.message : 'Could not verify.'
+      });
+    }
+  },
+
+  switchPlan: async ({ request, locals }) => {
+    const account = locals.account!;
+    const form = await request.formData();
+    const planId = ((form.get('plan') ?? '') as string) as PlanId;
+
+    if (!PLAN_ORDER.includes(planId)) {
+      return fail(400, { error: 'Unknown plan' });
+    }
+    if (planId === 'enterprise') {
+      return fail(400, {
+        error: 'Enterprise is contact-only. Email contact@tidyindex.com.'
+      });
+    }
+
+    queries.updateAccountPlan.run(planId, account.id);
+    return { switchedTo: planId };
+  },
+
+  deleteAccount: async ({ locals, cookies }) => {
+    const account = locals.account!;
+    queries.deleteAccount.run(account.id);
+    clearSession(cookies);
+    throw redirect(303, '/');
+  }
+};
diff --git a/web/ui/src/routes/dashboard/account/+page.svelte b/web/ui/src/routes/dashboard/account/+page.svelte
new file mode 100644
index 0000000..287c210
--- /dev/null
+++ b/web/ui/src/routes/dashboard/account/+page.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { enhance } from '$app/forms';
+  import { afterNavigate, invalidateAll } from '$app/navigation';
+  import { pushToast } from '$lib/stores/toasts';
+  import { PLANS } from '$lib/plans';
+  import type { PageData, ActionData } from './$types';
+
+  let { data, form }: { data: PageData; form: ActionData } = $props();
+
+  let confirmDelete = $state(false);
+
+  // When arriving via "Sign in" (which links to .../account?focus=email),
+  // drop the cursor straight into the email field. preventScroll keeps the
+  // page from jumping when focus() is called.
+  afterNavigate(async (nav) => {
+    if (nav.to?.url.searchParams.get('focus') !== 'email') return;
+    await tick();
+    document.getElementById('email')?.focus({ preventScroll: true });
+  });
+
+  $effect(() => {
+    if (!form) return;
+    if ('linkSent' in form && form.linkSent) {
+      pushToast(`Sign-in link sent to ${form.email}`, 'success');
+      invalidateAll();
+    } else if ('cancelled' in form && form.cancelled) {
+      pushToast('Sign-in cancelled', 'success');
+      invalidateAll();
+    } else if ('verified' in form && form.verified) {
+      pushToast('Signed in', 'success');
+      invalidateAll();
+    } else if ('switchedTo' in form && form.switchedTo) {
+      pushToast(`Switched to ${PLANS[form.switchedTo].name}`, 'success');
+      invalidateAll();
+    } else if ('error' in form && form.error) {
+      pushToast(form.error, 'error');
+    }
+  });
+</script>
+
+<p class="section-marker">§ 03 &nbsp;&middot;&nbsp; account</p>
+<h1 class="page-title">Account.</h1>
+<p class="page-subtitle">
+  {#if data.account.email}
+    Manage your sign-in and review what we know about you.
+  {:else if data.account.pending_email}
+    Finish signing in to lock your keys to this email.
+  {:else}
+    Sign in with email so your keys follow you across browsers.
+  {/if}
+</p>
+
+<div class="card">
+  <div class="card-head">
+    <h2 class="card-title">Sign in</h2>
+  </div>
+
+  {#if data.account.email}
+    <!-- Signed in -->
+    <p class="card-sub">
+      Signed in as <strong>{data.account.email}</strong>.
+    </p>
+    <form method="POST" action="/auth/logout" class="mt-16">
+      <button type="submit" class="btn btn-ghost btn-sm">Sign out</button>
+    </form>
+  {:else if data.account.pending_email}
+    <!-- Pending verification -->
+    <p class="card-sub">
+      We sent a sign-in link to
+      <strong>{data.account.pending_email}</strong>. Click it from your inbox
+      to finish signing in.
+    </p>
+    <div class="row mt-16">
+      <form method="POST" action="?/requestSignInLink" use:enhance>
+        <input type="hidden" name="email" value={data.account.pending_email} />
+        <button type="submit" class="btn btn-ghost btn-sm">Resend link</button>
+      </form>
+      <form method="POST" action="?/cancelPendingSignIn" use:enhance>
+        <button type="submit" class="btn btn-ghost btn-sm">Cancel</button>
+      </form>
+      <form method="POST" action="?/markVerified" use:enhance>
+        <button type="submit" class="btn btn-accent btn-sm" title="Dev shortcut: skips real verification">
+          (dev) Mark verified
+        </button>
+      </form>
+    </div>
+  {:else}
+    <!-- Anonymous -->
+    <p class="card-sub">
+      You're using an anonymous session. Sign in with an email so you don't
+      lose access to your keys if you clear cookies or switch browsers.
+    </p>
+    <form method="POST" action="?/requestSignInLink" use:enhance class="mt-16">
+      <div class="field">
+        <label class="field-label" for="email">email address</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          class="input"
+          placeholder="you@company.com"
+          required
+        />
+      </div>
+      <button type="submit" class="btn btn-accent btn-sm">
+        Send sign-in link
+      </button>
+    </form>
+  {/if}
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">Plan</h2>
+  </div>
+  <p class="card-sub">
+    Usage resets on the first of every month. You can change plans any time, and
+    we prorate mid-cycle. (Billing is stubbed in this demo — switching plans just
+    updates the dashboard.)
+  </p>
+
+  <div class="plan-grid mt-16">
+    {#each data.plans as plan}
+      {@const isCurrent = plan.id === data.currentPlan}
+      <div class="plan-card {isCurrent ? 'current' : ''}">
+        {#if isCurrent}
+          <span class="badge">Current</span>
+        {/if}
+
+        <p class="plan-name">{plan.name}</p>
+        <p class="plan-price">
+          {plan.priceLabel}
+          {#if plan.period}<small>&nbsp;{plan.period}</small>{/if}
+        </p>
+
+        <ul class="plan-features">
+          {#each plan.features as f}
+            <li>{f}</li>
+          {/each}
+        </ul>
+
+        <div class="plan-cta">
+          {#if plan.id === 'enterprise'}
+            <a
+              href="mailto:contact@tidyindex.com?subject=Enterprise%20inquiry"
+              class="btn btn-ghost"
+              style="width: 100%;"
+            >
+              Contact us
+            </a>
+          {:else if isCurrent}
+            <button class="btn btn-ghost" style="width: 100%;" disabled>
+              Current plan
+            </button>
+          {:else}
+            <form method="POST" action="?/switchPlan" use:enhance>
+              <input type="hidden" name="plan" value={plan.id} />
+              <button
+                class="btn {plan.id === 'pro' ? 'btn-accent' : 'btn-ghost'}"
+                style="width: 100%;"
+                type="submit"
+              >
+                {plan.cta}
+              </button>
+            </form>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  <p class="help mt-24">
+    Need something not listed here — custom datasets, on-prem deployment, higher
+    rate limits? Reply to any email from us, or reach out at
+    <a href="mailto:contact@tidyindex.com">contact@tidyindex.com</a>.
+  </p>
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">What we know about you</h2>
+  </div>
+  <dl class="usage-table" style="display:block;">
+    <div class="row-between" style="padding:10px 0; border-bottom:1px solid var(--c-rule);">
+      <dt class="text-mono text-mute">account id</dt>
+      <dd class="text-mono" style="margin:0;">{data.account.id}</dd>
+    </div>
+    <div class="row-between" style="padding:10px 0; border-bottom:1px solid var(--c-rule);">
+      <dt class="text-mono text-mute">plan</dt>
+      <dd class="text-mono" style="margin:0;">{data.account.plan}</dd>
+    </div>
+    <div class="row-between" style="padding:10px 0; border-bottom:1px solid var(--c-rule);">
+      <dt class="text-mono text-mute">created</dt>
+      <dd class="text-mono" style="margin:0;">
+        {new Date(data.account.created_at).toLocaleDateString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: 'numeric'
+        })}
+      </dd>
+    </div>
+    <div class="row-between" style="padding:10px 0;">
+      <dt class="text-mono text-mute">keys on file</dt>
+      <dd class="text-mono" style="margin:0;">{data.keyCount}</dd>
+    </div>
+  </dl>
+</div>
+
+<div class="danger-zone">
+  <p class="danger-zone-title">Danger zone</p>
+  <p class="danger-zone-body">
+    Deleting your account will revoke every key and permanently erase your
+    usage history. This cannot be undone.
+  </p>
+  {#if confirmDelete}
+    <div class="row">
+      <form method="POST" action="?/deleteAccount" use:enhance>
+        <button type="submit" class="btn btn-danger btn-sm">
+          Yes, delete everything
+        </button>
+      </form>
+      <button
+        class="btn btn-ghost btn-sm"
+        onclick={() => (confirmDelete = false)}
+      >
+        Cancel
+      </button>
+    </div>
+  {:else}
+    <button
+      class="btn btn-danger btn-sm"
+      onclick={() => (confirmDelete = true)}
+    >
+      Delete account
+    </button>
+  {/if}
+</div>
diff --git a/web/ui/src/routes/dashboard/keys/+page.server.ts b/web/ui/src/routes/dashboard/keys/+page.server.ts
new file mode 100644
index 0000000..5491283
--- /dev/null
+++ b/web/ui/src/routes/dashboard/keys/+page.server.ts
@@ -0,0 +1,68 @@
+import { fail, type Actions } from '@sveltejs/kit';
+
+import {
+  createKey,
+  listKeys,
+  revokeKey,
+  countActiveKeys
+} from '$lib/server/keys';
+import { PLANS } from '$lib/plans';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const account = locals.account!;
+  const keys = listKeys(account.id);
+  return {
+    keys,
+    activeCount: countActiveKeys(account.id),
+    plan: PLANS[account.plan]
+  };
+};
+
+export const actions: Actions = {
+  create: async ({ request, locals }) => {
+    const account = locals.account!;
+    const form = await request.formData();
+    const name = ((form.get('name') ?? '') as string).trim();
+    const scopes = form.getAll('scopes').map((s) => s.toString());
+
+    if (!name) {
+      return fail(400, { error: 'Give the key a name so you can recognize it later.' });
+    }
+
+    const plan = PLANS[account.plan];
+    const active = countActiveKeys(account.id);
+    if (Number.isFinite(plan.maxKeys) && active >= plan.maxKeys) {
+      return fail(403, {
+        error: `Your ${plan.name} plan allows ${plan.maxKeys} active key${
+          plan.maxKeys === 1 ? '' : 's'
+        }. Revoke one or upgrade your plan first.`
+      });
+    }
+
+    const created = createKey({
+      accountId: account.id,
+      name,
+      scopes
+    });
+
+    return {
+      created: {
+        id: created.id,
+        plaintext: created.plaintext,
+        name: created.name
+      }
+    };
+  },
+
+  revoke: async ({ request, locals }) => {
+    const account = locals.account!;
+    const form = await request.formData();
+    const id = (form.get('id') ?? '').toString();
+    if (!id) return fail(400, { error: 'Missing key id.' });
+
+    const ok = revokeKey(account.id, id);
+    if (!ok) return fail(404, { error: 'Key not found.' });
+    return { revokedId: id };
+  }
+};
diff --git a/web/ui/src/routes/dashboard/keys/+page.svelte b/web/ui/src/routes/dashboard/keys/+page.svelte
new file mode 100644
index 0000000..b0a066f
--- /dev/null
+++ b/web/ui/src/routes/dashboard/keys/+page.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { enhance } from '$app/forms';
+  import { DATASETS } from '$lib/datasets';
+  import { maskKey, scopeSummary } from '$lib/keys';
+  import { pushToast } from '$lib/stores/toasts';
+  import type { PageData, ActionData } from './$types';
+
+  let { data, form }: { data: PageData; form: ActionData } = $props();
+
+  let showCreate = $state(false);
+  let name = $state('');
+  let selected = $state<Set<string>>(new Set());
+  let allScopes = $state(true);
+
+  function toggleChip(slug: string) {
+    if (allScopes) {
+      allScopes = false;
+      selected = new Set([slug]);
+      return;
+    }
+    const next = new Set(selected);
+    if (next.has(slug)) next.delete(slug);
+    else next.add(slug);
+    if (next.size === 0) {
+      allScopes = true;
+      selected = new Set();
+    } else {
+      selected = next;
+    }
+  }
+
+  function selectAll() {
+    allScopes = true;
+    selected = new Set();
+  }
+
+  function fmtDate(ts: number): string {
+    return new Date(ts).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  }
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      pushToast('Copied to clipboard', 'success');
+    } catch {
+      pushToast("Couldn't copy — select it manually", 'error');
+    }
+  }
+
+  // When a new key is returned in `form`, show toast + scroll to top.
+  $effect(() => {
+    if (form && 'created' in form && form.created) {
+      pushToast(`Key "${form.created.name}" created`, 'success');
+      showCreate = false;
+      name = '';
+      selected = new Set();
+      allScopes = true;
+    } else if (form && 'revokedId' in form && form.revokedId) {
+      pushToast('Key revoked', 'success');
+    } else if (form && 'error' in form && form.error) {
+      pushToast(form.error, 'error');
+    }
+  });
+</script>
+
+<p class="section-marker">§ 01 &nbsp;&middot;&nbsp; api keys</p>
+<div class="row-between mb-24">
+  <div>
+    <h1 class="page-title">Your API keys.</h1>
+    <p class="page-subtitle">
+      {data.activeCount} active, {data.keys.length - data.activeCount} revoked. Your
+      {data.plan.name} plan allows
+      {Number.isFinite(data.plan.maxKeys) ? data.plan.maxKeys : 'unlimited'}
+      active key{data.plan.maxKeys === 1 ? '' : 's'}.
+    </p>
+  </div>
+  {#if !showCreate}
+    <button class="btn btn-primary" onclick={() => (showCreate = true)}>
+      + New key
+    </button>
+  {/if}
+</div>
+
+{#if form && 'created' in form && form.created}
+  <div class="key-reveal">
+    <div class="key-reveal-head">
+      <span class="badge">New key</span>
+      <strong>Copy this key now — it won't be shown again.</strong>
+    </div>
+    <div class="key-reveal-value">
+      <span style="flex: 1;">{form.created.plaintext}</span>
+      <button class="btn btn-sm btn-ghost" onclick={() => copy(form.created!.plaintext)}>
+        Copy
+      </button>
+    </div>
+    <p class="key-reveal-warn">
+      Store it somewhere safe. Once you leave this page we only keep the hash.
+    </p>
+  </div>
+{/if}
+
+{#if showCreate}
+  <form
+    method="POST"
+    action="?/create"
+    class="card card-accent mb-24"
+    use:enhance
+  >
+    <div class="card-head">
+      <h2 class="card-title">New key</h2>
+      <button type="button" class="btn btn-sm btn-ghost" onclick={() => (showCreate = false)}>
+        Cancel
+      </button>
+    </div>
+
+    <div class="field">
+      <label class="field-label" for="name">name</label>
+      <input
+        id="name"
+        name="name"
+        class="input"
+        placeholder="e.g. production ingest"
+        bind:value={name}
+        required
+      />
+      <p class="help">Just for you — how you'll recognize this key in the list.</p>
+    </div>
+
+    <div class="field">
+      <span class="field-label">dataset scope</span>
+      <div class="chip-grid">
+        <button
+          type="button"
+          class="chip chip-all {allScopes ? 'active' : ''}"
+          onclick={selectAll}
+        >
+          all datasets
+        </button>
+        {#each DATASETS as slug}
+          <button
+            type="button"
+            class="chip {selected.has(slug) ? 'active' : ''}"
+            onclick={() => toggleChip(slug)}
+          >
+            {slug}
+          </button>
+        {/each}
+      </div>
+      <p class="help">
+        {#if allScopes}
+          This key will work against every dataset in the catalog.
+        {:else}
+          This key will only work against the {selected.size} selected dataset{selected.size === 1 ? '' : 's'}.
+        {/if}
+      </p>
+    </div>
+
+    {#if allScopes}
+      <input type="hidden" name="scopes" value="*" />
+    {:else}
+      {#each [...selected] as slug}
+        <input type="hidden" name="scopes" value={slug} />
+      {/each}
+    {/if}
+
+    <div class="row mt-16">
+      <button type="submit" class="btn btn-accent">Create key</button>
+      <button type="button" class="btn btn-ghost" onclick={() => (showCreate = false)}>
+        Cancel
+      </button>
+    </div>
+  </form>
+{/if}
+
+{#if data.keys.length === 0}
+  <div class="empty-state">
+    <p class="empty-title">No keys yet.</p>
+    <p>Click "+ New key" to create your first one.</p>
+  </div>
+{:else}
+  {#each data.keys as key (key.id)}
+    <div class="card">
+      <div class="key-row">
+        <div class="key-row-main">
+          <div class="key-name">
+            {key.name}
+            {#if key.active}
+              <span class="badge badge-success">Active</span>
+            {:else}
+              <span class="badge badge-muted">Revoked</span>
+            {/if}
+          </div>
+          <div class="key-mask">{maskKey(key.key_prefix)}</div>
+          <div class="scope-summary">
+            scope: <code>{scopeSummary(key.scopes)}</code>
+          </div>
+          <div class="key-meta">
+            <span><span class="meta-label">created</span> {fmtDate(key.created_at)}</span>
+            {#if key.last_used_at}
+              <span><span class="meta-label">last used</span> {fmtDate(key.last_used_at)}</span>
+            {:else}
+              <span><span class="meta-label">last used</span> never</span>
+            {/if}
+          </div>
+        </div>
+
+        {#if key.active}
+          <form method="POST" action="?/revoke" use:enhance>
+            <input type="hidden" name="id" value={key.id} />
+            <button class="btn btn-sm btn-danger" type="submit">Revoke</button>
+          </form>
+        {/if}
+      </div>
+    </div>
+  {/each}
+{/if}
diff --git a/web/ui/src/routes/dashboard/usage/+page.server.ts b/web/ui/src/routes/dashboard/usage/+page.server.ts
new file mode 100644
index 0000000..34ff002
--- /dev/null
+++ b/web/ui/src/routes/dashboard/usage/+page.server.ts
@@ -0,0 +1,13 @@
+import { PLANS } from '$lib/plans';
+import { usageByDataset, usageByKey, usageCountThisMonth } from '$lib/server/usage';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const account = locals.account!;
+  return {
+    plan: PLANS[account.plan],
+    total: usageCountThisMonth(account.id),
+    byDataset: usageByDataset(account.id),
+    byKey: usageByKey(account.id)
+  };
+};
diff --git a/web/ui/src/routes/dashboard/usage/+page.svelte b/web/ui/src/routes/dashboard/usage/+page.svelte
new file mode 100644
index 0000000..883460c
--- /dev/null
+++ b/web/ui/src/routes/dashboard/usage/+page.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { pushToast } from '$lib/stores/toasts';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+
+  const monthName = new Date().toLocaleDateString('en-US', {
+    month: 'long',
+    year: 'numeric'
+  });
+
+  function fmt(n: number): string {
+    return n.toLocaleString('en-US');
+  }
+
+  const curlExample = `curl https://api.tidyindex.com/v1/datasets/irs-990/records/20-0049703 \\
+  -H "Authorization: Bearer YOUR_API_KEY"`;
+
+  async function copyCurl() {
+    try {
+      await navigator.clipboard.writeText(curlExample);
+      pushToast('Copied', 'success');
+    } catch {
+      pushToast("Couldn't copy", 'error');
+    }
+  }
+
+  let pct = $derived.by(() => {
+    if (!Number.isFinite(data.plan.requestsPerMonth)) return 0;
+    const p = (data.total / data.plan.requestsPerMonth) * 100;
+    return Math.min(100, Math.max(0, p));
+  });
+
+  let limitLabel = $derived(
+    Number.isFinite(data.plan.requestsPerMonth)
+      ? fmt(data.plan.requestsPerMonth)
+      : 'unlimited'
+  );
+</script>
+
+<p class="section-marker">§ 02 &nbsp;&middot;&nbsp; usage</p>
+<h1 class="page-title">This month.</h1>
+<p class="page-subtitle">
+  Requests counted against your plan limit for {monthName}.
+</p>
+
+<div class="card">
+  <div class="usage-summary">
+    <div>
+      <p class="text-mono text-mute" style="margin:0 0 6px;">
+        requests / {limitLabel}
+      </p>
+      <p class="usage-count">
+        {fmt(data.total)}
+        {#if Number.isFinite(data.plan.requestsPerMonth)}
+          <small>&nbsp;of {limitLabel}</small>
+        {/if}
+      </p>
+    </div>
+    <div>
+      <span class="badge">{data.plan.name.toLowerCase()} plan</span>
+    </div>
+  </div>
+  {#if Number.isFinite(data.plan.requestsPerMonth)}
+    <div class="usage-bar" aria-label="Usage bar">
+      <div class="usage-bar-fill" style="width: {pct}%"></div>
+    </div>
+  {/if}
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">By dataset</h2>
+    <p class="card-sub">Which datasets drew the most traffic.</p>
+  </div>
+  {#if data.byDataset.length === 0}
+    <div class="empty-state">
+      <p class="empty-title">No requests yet this month.</p>
+      <p>Usage data will show up here once your keys start making calls.</p>
+    </div>
+  {:else}
+    <table class="usage-table">
+      <thead>
+        <tr>
+          <th>dataset</th>
+          <th style="text-align:right;">requests</th>
+          <th style="text-align:right; width: 140px;">share</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each data.byDataset as row}
+          <tr>
+            <td>{row.dataset}</td>
+            <td class="num">{fmt(row.count)}</td>
+            <td class="num">
+              {data.total > 0
+                ? ((row.count / data.total) * 100).toFixed(1)
+                : '0.0'}%
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">By key</h2>
+    <p class="card-sub">Traffic attributed to each of your keys.</p>
+  </div>
+  {#if data.byKey.length === 0}
+    <div class="empty-state">
+      <p class="empty-title">No keys yet.</p>
+      <p>Create one on the Keys tab.</p>
+    </div>
+  {:else}
+    <table class="usage-table">
+      <thead>
+        <tr>
+          <th>key</th>
+          <th style="text-align:right;">requests</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each data.byKey as row}
+          <tr>
+            <td>{row.name}</td>
+            <td class="num">{fmt(row.count)}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">API base URL</h2>
+  </div>
+  <p class="card-sub">All endpoints live under this host.</p>
+  <pre class="code-block mt-16">https://api.tidyindex.com/v1</pre>
+</div>
+
+<div class="card mt-24">
+  <div class="card-head">
+    <h2 class="card-title">Quick start</h2>
+    <button class="btn btn-sm btn-ghost" onclick={copyCurl}>Copy curl</button>
+  </div>
+  <p class="card-sub">Fetch one record from the IRS 990 dataset.</p>
+  <pre class="code-block mt-16">{curlExample}</pre>
+</div>