Dark theme contrast fix and vault reset flow

- Fixed dark mode contrast: slate-800 card backgrounds, slate-50 text
- Solid severity badges with white text (red/yellow/blue)
- Readable audit log and attack mode entries in dark theme
- VaultUnlockPanel: Forgot passphrase link with destructive reset
- destroyVault() wipes IndexedDB and storage without requiring unlock
- Confirmation dialog with permanent data loss warning
- Post-reset redirects to create-vault flow
- vault_destroyed audit event when reset from unlocked state
- Storage destroy helpers with tests (18 passing)
- Resume vault reset tests (6 passing)

Author: cameronhopkin

apps/web/src/app.css

@@ -857,6 +857,49 @@ button {
   gap: 0.25rem;
 }
 
+:root:not([data-theme='light']) .shell-button--danger {
+  background: #be123c;
+  border-color: #e11d48;
+  color: #fff;
+}
+
+:root:not([data-theme='light']) .audit-badge.success-badge {
+  background: #047857;
+  border-color: #059669;
+  color: #f8fafc;
+}
+
+:root:not([data-theme='light']) .audit-badge.danger-badge {
+  background: #be123c;
+  border-color: #e11d48;
+  color: #fff1f2;
+}
+
+:root:not([data-theme='light']) .audit-event {
+  border-color: #334155;
+  color: #f8fafc;
+}
+
+:root:not([data-theme='light']) .audit-event--vault {
+  background: #1d4ed8;
+}
+
+:root:not([data-theme='light']) .audit-event--resume {
+  background: #047857;
+}
+
+:root:not([data-theme='light']) .audit-event--scan {
+  background: #b45309;
+}
+
+:root:not([data-theme='light']) .audit-event--attack {
+  background: #be123c;
+}
+
+:root:not([data-theme='light']) .audit-event--export {
+  background: #334155;
+}
+
 @media (min-width: 48rem) {
   .app-shell {
     display: grid;

apps/web/src/lib/components/ConfirmDialog.svelte

@@ -94,7 +94,7 @@
     </div>
 
     <div class="dialog-body" id="confirm-dialog-body">
-      <p>{body}</p>
+      <p class="dialog-body__text">{body}</p>
     </div>
 
     <div class="dialog-actions">
@@ -113,3 +113,10 @@
     </div>
   {/if}
 </dialog>
+
+<style>
+  .dialog-body__text {
+    margin: 0;
+    white-space: pre-line;
+  }
+</style>

apps/web/src/lib/components/VaultUnlockPanel.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+  import { destroyVault, hasExistingVault } from '$lib/resume-vault';
+
   let {
     title = 'Unlock your resume vault',
     copy = 'Enter your passphrase to decrypt resumes stored on this device.',
@@ -14,17 +19,56 @@
   } = $props();
 
   let passphrase = $state('');
+  let resetBusy = $state(false);
+  let resetSuccess = $state('');
+  let hasVault = $state<boolean | null>(null);
+  let resetDialog = $state<{ showModal: () => Promise<void> } | null>(null);
+
+  const createTitle = 'Create your resume vault';
+  const createCopy = 'Choose a passphrase to create a new encrypted vault on this device.';
+
+  let vaultKnown = $derived(hasVault !== null);
+  let resolvedTitle = $derived(hasVault === false ? createTitle : title);
+  let resolvedCopy = $derived(hasVault === false ? createCopy : copy);
 
   async function submit() {
     await onUnlock(passphrase);
     passphrase = '';
   }
+
+  function openResetDialog() {
+    void resetDialog?.showModal();
+  }
+
+  async function confirmReset() {
+    resetBusy = true;
+
+    try {
+      await destroyVault();
+      passphrase = '';
+      hasVault = false;
+      resetSuccess = 'Vault reset complete. You can now create a new vault with a new passphrase.';
+      window.setTimeout(() => {
+        void goto('/', { replaceState: true }).catch(() => {
+          window.location.reload();
+        });
+      }, 1200);
+    } finally {
+      resetBusy = false;
+    }
+  }
+
+  onMount(() => {
+    void hasExistingVault().then((existingVault) => {
+      hasVault = existingVault;
+    });
+  });
 </script>
 
 <section class="content-card vault-panel">
   <p class="section-kicker">Encrypted Storage</p>
-  <h3>{title}</h3>
-  <p>{copy}</p>
+  <h3>{resolvedTitle}</h3>
+  <p>{resolvedCopy}</p>
 
   <form class="stack-form" onsubmit={(event) => {
     event.preventDefault();
@@ -47,13 +91,72 @@
       <p class="field-error" data-testid="vault-error">{error}</p>
     {/if}
 
+    {#if resetSuccess}
+      <p class="vault-reset-success" data-testid="vault-reset-success" role="status">{resetSuccess}</p>
+    {/if}
+
     <button
       class="shell-button shell-button--primary"
       data-testid="unlock-vault"
-      disabled={busy}
+      disabled={busy || resetBusy || !vaultKnown}
       type="submit"
     >
-      {#if busy}Unlocking…{:else}Unlock vault{/if}
+      {#if !vaultKnown}
+        Checking vault…
+      {:else if busy}
+        Unlocking…
+      {:else if !hasVault}
+        Create vault
+      {:else}
+        Unlock vault
+      {/if}
     </button>
+
+    {#if hasVault === true}
+      <button
+        class="vault-reset-link"
+        data-testid="forgot-passphrase"
+        disabled={resetBusy}
+        type="button"
+        onclick={openResetDialog}
+      >
+        Forgot your passphrase?
+      </button>
+    {/if}
   </form>
 </section>
+
+<ConfirmDialog
+  bind:this={resetDialog}
+  body={`If you forgot your passphrase, your encrypted data cannot be recovered. ShieldCV uses local encryption with no server backup. Resetting the vault will permanently delete all stored resumes, scan history, and audit logs. You will create a new vault with a new passphrase.\n\nThis action cannot be undone.`}
+  busy={resetBusy}
+  confirmTestId="confirm-reset-vault"
+  destructiveLabel="Delete all data and reset"
+  kicker="Reset vault"
+  title="Reset Vault"
+  onConfirm={confirmReset}
+/>
+
+<style>
+  .vault-reset-link {
+    justify-self: start;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--accent);
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  .vault-reset-link:disabled {
+    color: var(--text-muted);
+    text-decoration: none;
+  }
+
+  .vault-reset-success {
+    margin: 0;
+    color: var(--success);
+  }
+</style>

apps/web/src/lib/demo-audit.ts

@@ -1,9 +1,9 @@
 import { initAudit } from '@shieldcv/audit';
 import { EncryptedStore } from '@shieldcv/storage';
 
-const ATTACK_MODE_AUDIT_DATABASE_NAME = 'shieldcv-attack-mode-audit';
+export const ATTACK_MODE_AUDIT_DATABASE_NAME = 'shieldcv-attack-mode-audit';
 const ATTACK_MODE_AUDIT_PASSPHRASE = 'shieldcv-attack-mode-demo';
-const ATTACK_MODE_AUDIT_FLAG = 'shieldcv.attackModeAuditReady';
+export const ATTACK_MODE_AUDIT_FLAG = 'shieldcv.attackModeAuditReady';
 
 type AuditStoreBinding = Pick<EncryptedStore, 'get' | 'put' | 'list' | 'delete'>;
 

apps/web/src/lib/resume-vault.test.ts

@@ -1,13 +1,55 @@
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createBlankResume } from '@shieldcv/resume';
+import { appendEntry } from '@shieldcv/audit';
+import { EncryptedStore } from '@shieldcv/storage';
 import {
   assertResumeWithinSizeLimit,
+  destroyVault,
+  hasExistingVault,
   MAX_RESUME_SIZE,
   measureResumeSize,
   ResumeSizeError,
 } from './resume-vault';
 
+vi.mock('@shieldcv/audit', () => ({
+  appendEntry: vi.fn(),
+  getEntries: vi.fn(async () => []),
+  initAudit: vi.fn(async () => undefined),
+}));
+
+vi.mock('@shieldcv/storage', () => ({
+  EncryptedStore: {
+    open: vi.fn(),
+    destroy: vi.fn(async () => undefined),
+    hasSentinel: vi.fn(async () => true),
+  },
+}));
+
+vi.mock('$lib/demo-audit', () => ({
+  ATTACK_MODE_AUDIT_DATABASE_NAME: 'shieldcv-attack-mode-audit',
+  ATTACK_MODE_AUDIT_FLAG: 'shieldcv.attackModeAuditReady',
+}));
+
 describe('resume vault size guard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: {
+        clear: vi.fn(),
+        removeItem: vi.fn(),
+      },
+    });
+
+    Object.defineProperty(window, 'sessionStorage', {
+      configurable: true,
+      value: {
+        clear: vi.fn(),
+      },
+    });
+  });
+
   it('accepts resumes that fit within the configured size limit', () => {
     const resume = createBlankResume('resume-within-limit');
     resume.basics.summary = 'A concise summary.';
@@ -33,4 +75,40 @@ describe('resume vault size guard', () => {
       expect((error as ResumeSizeError).message).toContain('Input exceeds maximum size');
     }
   });
+
+  it('reports whether a vault already exists', async () => {
+    vi.mocked(EncryptedStore.hasSentinel).mockResolvedValueOnce(false);
+
+    await expect(hasExistingVault()).resolves.toBe(false);
+    expect(EncryptedStore.hasSentinel).toHaveBeenCalledWith('shieldcv-local-vault');
+  });
+
+  it('resets storage without writing an audit event when the vault is locked', async () => {
+    vi.mocked(EncryptedStore.open).mockResolvedValueOnce({
+      close: vi.fn(),
+      isUnlocked: false,
+    } as never);
+
+    await destroyVault();
+
+    expect(appendEntry).not.toHaveBeenCalled();
+    expect(EncryptedStore.destroy).toHaveBeenCalledWith('shieldcv-local-vault');
+    expect(EncryptedStore.destroy).toHaveBeenCalledWith('shieldcv-attack-mode-audit');
+    expect(window.localStorage.clear).toHaveBeenCalledOnce();
+    expect(window.sessionStorage.clear).toHaveBeenCalledOnce();
+  });
+
+  it('writes a vault_destroyed audit event when the vault is unlocked', async () => {
+    vi.mocked(EncryptedStore.open).mockResolvedValueOnce({
+      close: vi.fn(),
+      isUnlocked: true,
+    } as never);
+
+    await destroyVault();
+
+    expect(appendEntry).toHaveBeenCalledWith(
+      'vault_destroyed',
+      'Destroyed encrypted resume vault and cleared local data.'
+    );
+  });
 });