fix(api,demo-app,user-ui): harden authorize experience

packages/api/src/controllers/user/authorize.ts

@@ -54,6 +54,16 @@ export const getAuthorize = withRateLimit("opaque")(async function getAuthorize(
     throw new InvalidRequestError("Invalid redirect_uri");
   }
 
+  context.logger.info(
+    {
+      clientId: authRequest.client_id,
+      redirectUri: authRequest.redirect_uri,
+      requestedScopes: authRequest.scope,
+      hasZkParam: !!authRequest.zk_pub,
+    },
+    "authorize request received"
+  );
+
   if (client.type === "public" || client.requirePkce) {
     if (!authRequest.code_challenge) {
       throw new InvalidRequestError("PKCE code_challenge is required");
@@ -127,6 +137,16 @@ export const getAuthorize = withRateLimit("opaque")(async function getAuthorize(
   response.statusCode = 302;
   response.setHeader("Location", redirectTo);
   response.end();
+
+  context.logger.info(
+    {
+      requestId,
+      clientId: authRequest.client_id,
+      zkPubKid: zkPubKid || null,
+      userSub,
+    },
+    "authorize request stored"
+  );
 });
 
 export const schema = {

packages/api/src/controllers/user/authorizeFinalize.ts

@@ -53,6 +53,16 @@ export const postAuthorizeFinalize = withRateLimit("opaque")(
         throw new NotFoundError("Authorization request not found or expired");
       }
 
+      context.logger.info(
+        {
+          requestId,
+          clientId: pendingRequest.clientId,
+          zkRequested: !!pendingRequest.zkPubKid,
+          hasDrkHash: !!parsed.drk_hash,
+        },
+        "authorize finalize received"
+      );
+
       // Check if request has expired
       if (new Date() > pendingRequest.expiresAt) {
         await deletePendingAuth(context, requestId);
@@ -77,6 +87,10 @@ export const postAuthorizeFinalize = withRateLimit("opaque")(
         // ZK client has already created the JWE client-side and provided the hash
         hasZk = true;
         drkHash = drkHashFromClient;
+        context.logger.info(
+          { requestId, clientId: pendingRequest.clientId },
+          "authorize finalize using client-provided drk hash"
+        );
       } else if (pendingRequest.zkPubKid) {
         // Legacy support: server-side check for DRK existence
         // In the proper ZK flow, client-side handles DRK unwrapping and JWE creation
@@ -85,6 +99,10 @@ export const postAuthorizeFinalize = withRateLimit("opaque")(
           hasZk = true;
           // Note: In proper ZK flow, drkHash should come from client JWE creation
           // This is fallback for incomplete client implementation
+          context.logger.warn(
+            { requestId, clientId: pendingRequest.clientId },
+            "authorize finalize missing drk hash, falling back to wrapped DRK presence"
+          );
         } catch {}
       }
 
@@ -112,6 +130,17 @@ export const postAuthorizeFinalize = withRateLimit("opaque")(
         state: pendingRequest.state || undefined,
         redirect_uri: pendingRequest.redirectUri,
       });
+
+      context.logger.info(
+        {
+          requestId,
+          clientId: pendingRequest.clientId,
+          hasZk,
+          drkHashStored: !!drkHash,
+          redirectUri: pendingRequest.redirectUri,
+        },
+        "authorize finalize completed"
+      );
     }
   )
 );

packages/demo-app/server/src/controllers/routes.ts

@@ -30,11 +30,18 @@ async function requireAuthentication(context: Context, request: http.IncomingMes
   if (!match) return null as null | { sub: string };
   const token = match[1];
   const jwksUri = new URL("/.well-known/jwks.json", context.config.issuer).toString();
-  const jwkSet = createRemoteJWKSet(new URL(jwksUri));
-  const { payload } = await jwtVerify(token, jwkSet, { issuer: context.config.issuer });
-  const sub = payload.sub as string | undefined;
-  if (!sub) return null;
-  return { sub };
+  try {
+    const jwkSet = createRemoteJWKSet(new URL(jwksUri));
+    const { payload } = await jwtVerify(token, jwkSet, { issuer: context.config.issuer });
+    const sub = payload.sub as string | undefined;
+    if (!sub) return null;
+    return { sub };
+  } catch (error) {
+    try {
+      context.logger?.warn({ error: error instanceof Error ? error.message : String(error) }, "jwt verification failed");
+    } catch {}
+    return null;
+  }
 }
 
 const BodyCreateNote = z.object({ collection_id: z.string().uuid().optional() }).strict().partial();
@@ -204,7 +211,7 @@ export function getRoutes(): Route[] {
       if (!user) return sendJson(response, 401, { error: "unauthorized" });
       const noteId = match.pathname.groups.id;
       const dekResult = await getDekForRecipient(context.db, noteId, user.sub);
-      if (dekResult.rowCount === 0) return sendJson(response, 404, { error: "not_found" });
+      if (dekResult.rows.length === 0) return sendJson(response, 404, { error: "not_found" });
       return sendJson(response, 200, { dek_jwe: dekResult.rows[0].dek_jwe });
     },
     operation: { summary: "Get DEK" },

packages/demo-app/server/src/models/notes.ts

@@ -43,7 +43,7 @@ export async function canWriteToNote(db: PGlite, noteId: string, sub: string) {
     `select 1 from demo_app.notes n where n.note_id=$1 and (n.owner_sub=$2 or exists(select 1 from demo_app.note_access a where a.note_id=n.note_id and a.recipient_sub=$2 and a.grants in ('write')))`,
     [noteId, sub]
   );
-  return r.rowCount > 0;
+  return r.rows.length > 0;
 }
 
 export async function appendChange(db: PGlite, noteId: string, ciphertextBase64: string, additionalAuthenticatedData: unknown) {
@@ -55,7 +55,7 @@ export async function appendChange(db: PGlite, noteId: string, ciphertextBase64:
 
 export async function deleteNoteCascade(db: PGlite, noteId: string, ownerSub: string) {
   const owner = await db.query("select 1 from demo_app.notes where note_id=$1 and owner_sub=$2", [noteId, ownerSub]);
-  if (owner.rowCount === 0) return false;
+  if (owner.rows.length === 0) return false;
   await db.query("delete from demo_app.note_changes where note_id=$1", [noteId]);
   await db.query("delete from demo_app.note_access where note_id=$1", [noteId]);
   await db.query("delete from demo_app.notes where note_id=$1", [noteId]);
@@ -71,7 +71,7 @@ export async function getChangesSince(db: PGlite, noteId: string, since: number)
 
 export async function shareNote(db: PGlite, noteId: string, ownerSub: string, recipientSub: string, dekJwe: string, grants: string) {
   const owner = await db.query("select 1 from demo_app.notes where note_id=$1 and owner_sub=$2", [noteId, ownerSub]);
-  if (owner.rowCount === 0) return false;
+  if (owner.rows.length === 0) return false;
   await db.query(
     `insert into demo_app.note_access(note_id, recipient_sub, dek_jwe, grants) values($1,$2,$3,$4)
      on conflict(note_id, recipient_sub) do update set dek_jwe=excluded.dek_jwe, grants=excluded.grants`,
@@ -82,12 +82,11 @@ export async function shareNote(db: PGlite, noteId: string, ownerSub: string, re
 
 export async function revokeShare(db: PGlite, noteId: string, ownerSub: string, recipientSub: string) {
   const owner = await db.query("select 1 from demo_app.notes where note_id=$1 and owner_sub=$2", [noteId, ownerSub]);
-  if (owner.rowCount === 0) return false;
+  if (owner.rows.length === 0) return false;
   await db.query("delete from demo_app.note_access where note_id=$1 and recipient_sub=$2", [noteId, recipientSub]);
   return true;
 }
 
 export async function getDekForRecipient(db: PGlite, noteId: string, recipientSub: string) {
   return db.query("select dek_jwe from demo_app.note_access where note_id=$1 and recipient_sub=$2", [noteId, recipientSub]);
 }
-

packages/demo-app/src/components/Dashboard/Dashboard.module.css

@@ -47,10 +47,18 @@
   color: #111827;
   margin-bottom: 0.5rem;
 }
+
+:global(.dark) .title {
+  color: #f3f4f6;
+}
 .subtitle {
   color: #6b7280;
 }
 
+:global(.dark) .subtitle {
+  color: #9ca3af;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -86,6 +94,11 @@
   background: transparent;
 }
 
+:global(.dark) .newCard {
+  border-color: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.02);
+}
+
 .newIcon {
   width: 3rem;
   height: 3rem;
@@ -96,11 +109,20 @@
   justify-content: center;
 }
 
+:global(.dark) .newIcon {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e5e7eb;
+}
+
 .newText {
   color: #6b7280;
   font-weight: 500;
 }
 
+:global(.dark) .newText {
+  color: #d1d5db;
+}
+
 .loading {
   display: flex;
   align-items: center;

packages/demo-app/src/components/Dashboard/NoteCard.module.css

@@ -6,6 +6,12 @@
   background: #fff;
 }
 
+:global(.dark) .card {
+  background: #1f2937;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: none;
+}
+
 .link {
   display: block;
   padding: 1.25rem;
@@ -26,6 +32,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+:global(.dark) .title {
+  color: #f3f4f6;
+}
 .badges {
   display: flex;
   align-items: center;
@@ -46,13 +56,21 @@
   margin-bottom: 1rem;
 }
 
+:global(.dark) .preview {
+  color: #d1d5db;
+}
+
 .footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 0.75rem;
   color: #6b7280;
 }
+
+:global(.dark) .footer {
+  color: #9ca3af;
+}
 .footerGroup {
   display: flex;
   align-items: center;
@@ -87,6 +105,12 @@
   padding: 0.25rem 0;
   z-index: 10;
 }
+
+:global(.dark) .menuPanel {
+  background: #1f2937;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+}
 .menuItem {
   display: flex;
   align-items: center;
@@ -99,12 +123,20 @@
   font-size: 0.875rem;
   cursor: pointer;
 }
+
+:global(.dark) .menuItem {
+  color: #e5e7eb;
+}
 .separator {
   height: 1px;
   margin: 0.25rem 0;
   background: rgba(0, 0, 0, 0.08);
   border: 0;
 }
+
+:global(.dark) .separator {
+  background: rgba(255, 255, 255, 0.08);
+}
 .danger {
   color: #dc2626;
 }

packages/demo-app/src/components/Editor/EditorToolbar.tsx

@@ -18,6 +18,7 @@ import {
   Undo,
   Unlink,
 } from "lucide-react";
+import styles from "./EditorToolbar.module.css";
 
 interface EditorToolbarProps {
   editor: Editor;

packages/demo-app/src/components/Editor/NoteEditor.module.css

@@ -72,7 +72,11 @@
   background: transparent;
   border: none;
   outline: none;
-  color: #111827;
+  color: hsl(var(--foreground));
+  caret-color: hsl(var(--foreground));
+}
+.titleInput::placeholder {
+  color: hsl(var(--foreground) / 0.5);
 }
 .loading {
   display: flex;

packages/demo-app/src/components/Editor/RichTextEditor.module.css

@@ -1,12 +1,14 @@
 .container {
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: hsl(var(--background));
+  border: 1px solid hsl(var(--foreground) / 0.1);
   border-radius: 0.5rem;
 }
 .divider {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid hsl(var(--foreground) / 0.08);
 }
 .content {
   min-height: 400px;
   padding: 1rem;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
 }

packages/demo-app/src/components/Layout/Header.module.css

@@ -64,9 +64,25 @@
   position: relative;
 }
 
+.searchIcon {
+  position: absolute;
+  left: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  pointer-events: none;
+}
+
 .searchInput {
   width: 100%;
-  padding-left: 2.5rem;
+}
+
+:global(.input).searchInput {
+  padding-left: 3rem;
+}
+
+:global(.dark) .searchIcon {
+  color: #6b7280;
 }
 
 .actions {

packages/demo-app/src/components/Layout/Header.tsx

@@ -64,17 +64,7 @@ export function Header({ onMenuToggle }: HeaderProps) {
 
         <div className={styles.search}>
           <div className={styles.searchInner}>
-            <Search
-              style={{
-                position: "absolute",
-                left: 12,
-                top: "50%",
-                transform: "translateY(-50%)",
-                color: "#9CA3AF",
-              }}
-              width={20}
-              height={20}
-            />
+            <Search className={styles.searchIcon} width={20} height={20} />
             <input
               type="text"
               placeholder="Search notes..."