From c84c0fb424e317392b79300439f26fd705658118 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 5 Mar 2026 06:58:55 +0000
Subject: [PATCH] =?UTF-8?q?fix(app):=20passphrase=20dialog=20=E2=80=94=20r?=
 =?UTF-8?q?emove=20CSP=20meta,=20check=20crypto.subtle=20availability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove CSP meta tag from index.html (breaks Vite HMR, should be
  set via HTTP headers in production nginx instead)
- isCryptoEnabled() now checks crypto.subtle is available (undefined
  over HTTP on non-localhost origins)
- Add try/catch + error feedback to passphrase submit flow
- PassphraseDialog accepts error prop, focuses input on visible

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/app/index.html                       |  2 +-
 packages/app/src/App.vue                      | 33 ++++++++++++-------
 .../src/components/ui/PassphraseDialog.vue    | 13 ++++----
 packages/app/src/utils/crypto.ts              | 10 ++++--
 4 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/app/index.html b/packages/app/index.html
index 08a7710f..c852ae6d 100644
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -10,7 +10,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="AIUI" />
     <meta name="description" content="AI chat interface with rich content surfaces" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https://image.tmdb.org https://covers.openlibrary.org https://is1-ssl.mzstatic.com https://upload.wikimedia.org https://books.google.com https://*.googleusercontent.com; font-src 'self'; connect-src 'self' https://mempool.space https://itunes.apple.com https://openlibrary.org https://www.googleapis.com https://en.wikipedia.org https://openrouter.ai wss:; media-src 'self' blob: https:; frame-src https://www.youtube-nocookie.com https://*.odysee.com; object-src 'none'; base-uri 'self';" />
+    <!-- CSP set via HTTP headers in production nginx — not in HTML meta to avoid breaking Vite HMR -->
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
     <title>AIUI</title>
diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index 868ace4d..154ec0f4 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -6,6 +6,7 @@
     <PassphraseDialog
       :visible="showPassphrase"
       :is-creating="isCreatingPassphrase"
+      :error="passphraseError"
       @submit="handlePassphraseSubmit"
       @skip="showPassphrase = false"
     />
@@ -50,21 +51,29 @@ const isCreatingPassphrase = ref(false)
 
 const SALT_KEY = 'aiui-crypto-salt'
 
+const passphraseError = ref('')
+
 async function handlePassphraseSubmit(passphrase: string) {
-  let saltHex = localStorage.getItem(SALT_KEY)
-  let salt: Uint8Array
+  passphraseError.value = ''
+  try {
+    let saltHex = localStorage.getItem(SALT_KEY)
+    let salt: Uint8Array
 
-  if (saltHex) {
-    salt = new Uint8Array(saltHex.match(/.{2}/g)!.map(b => parseInt(b, 16)))
-  } else {
-    salt = await generateSalt()
-    saltHex = Array.from(salt).map(b => b.toString(16).padStart(2, '0')).join('')
-    localStorage.setItem(SALT_KEY, saltHex)
+    if (saltHex) {
+      salt = new Uint8Array(saltHex.match(/.{2}/g)!.map(b => parseInt(b, 16)))
+    } else {
+      salt = await generateSalt()
+      saltHex = Array.from(salt).map(b => b.toString(16).padStart(2, '0')).join('')
+      localStorage.setItem(SALT_KEY, saltHex)
+    }
+
+    const key = await deriveKey(passphrase, salt)
+    setSessionKey(key, salt)
+    showPassphrase.value = false
+  } catch (err) {
+    console.error('[AIUI] Passphrase error:', err)
+    passphraseError.value = 'Encryption failed — check your passphrase or try skipping'
   }
-
-  const key = await deriveKey(passphrase, salt)
-  setSessionKey(key, salt)
-  showPassphrase.value = false
 }
 
 onMounted(() => {
diff --git a/packages/app/src/components/ui/PassphraseDialog.vue b/packages/app/src/components/ui/PassphraseDialog.vue
index ae3e003c..700eb2da 100644
--- a/packages/app/src/components/ui/PassphraseDialog.vue
+++ b/packages/app/src/components/ui/PassphraseDialog.vue
@@ -54,8 +54,8 @@
             @keydown.enter="handleSubmit"
           />
 
-          <p v-if="errorMessage" class="text-xs text-red-400 px-1">
-            {{ errorMessage }}
+          <p v-if="errorMessage || props.error" class="text-xs text-red-400 px-1">
+            {{ errorMessage || props.error }}
           </p>
         </div>
 
@@ -86,11 +86,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 
 const props = defineProps<{
   visible: boolean
   isCreating: boolean
+  error?: string
 }>()
 
 const emit = defineEmits<{
@@ -124,7 +125,7 @@ function handleSkip() {
   emit('skip')
 }
 
-onMounted(() => {
-  nextTick(() => inputRef.value?.focus())
-})
+watch(() => props.visible, (v) => {
+  if (v) nextTick(() => inputRef.value?.focus())
+}, { immediate: true })
 </script>
diff --git a/packages/app/src/utils/crypto.ts b/packages/app/src/utils/crypto.ts
index c6f39ae1..1582597c 100644
--- a/packages/app/src/utils/crypto.ts
+++ b/packages/app/src/utils/crypto.ts
@@ -105,13 +105,17 @@ function base64ToBuffer(base64: string): Uint8Array {
 
 /**
  * Check if encryption should be enabled.
- * Disabled in dev mode with VITE_DISABLE_CRYPTO=true.
+ * Disabled in dev mode with VITE_DISABLE_CRYPTO=true, or when
+ * Web Crypto API is unavailable (HTTP on non-localhost origins).
  */
 export function isCryptoEnabled(): boolean {
   try {
-    return import.meta.env.VITE_DISABLE_CRYPTO !== 'true'
-  } catch {
+    if (import.meta.env.VITE_DISABLE_CRYPTO === 'true') return false
+    // crypto.subtle is only available in secure contexts (HTTPS or localhost)
+    if (typeof globalThis.crypto?.subtle === 'undefined') return false
     return true
+  } catch {
+    return false
   }
 }