Address code review findings across API, web and deployment

High severity:
- wire TRUSTED_PROXY through Compose/deploy/docs and warn at web startup
- bucket public rate limits on effective client IP, add per-bookmark budget,
  and forward the signed browser identity from the share page
- disable first-run bootstrap in server deployments and document seeding
- serialize last-admin demotion in one advisory-locked transaction

Medium/low:
- cap and batch share recipient inserts
- add a shared outbound budget for preview/CardDAV/IMAP/signal work
- pin CardDAV dials to 443 and bound IMAP logout
- fix rightward kanban column drags and normalize cards on column delete
- classify backend outages in auth guards, add request timeouts and an
  error boundary, remove the dead login route, surface throttling
- enforce pinned/unpinned page reorder grouping server-side
- avoid preview work for stale bookmark versions; drop duplicate dialog fetch
- sequence-guard collection/tag/calendar/quick-find loads
- validate property config and fix MULTI_SELECT/DATE filter inputs
- document index maintenance; apply same-origin check to sign-out
- trim signup names, unique shared dates and kanban keys (migration 010),
  reset reference cache on identity changes, hide OIDC issuer, return 413
  for oversized direct bodies, escape Markdown link destinations
- remove dead template files and duplicate test helper

Verified with go build/vet, full PostgreSQL race suite, db convergence,
tsc, both ESLint configs and a Next production build.

web/components/add-bookmark-dialog.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
-import { Link2, Loader2, Plus, X } from 'lucide-react'
+import { Link2, Plus, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { invalidateReference } from '@/lib/reference-data'
 
@@ -24,7 +24,6 @@ export function AddBookmarkDialog({ open, onClose, onCreated }: Props) {
   const [dueDate, setDueDate] = useState('')
   const [kanban, setKanban] = useState('INBOX')
   const [loading, setLoading] = useState(false)
-  const [fetching, setFetching] = useState(false)
   const [tags, setTags] = useState<{ id: string; name: string; color: string }[]>([])
   const [allTags, setAllTags] = useState<any[]>([])
   const [newTagName, setNewTagName] = useState('')
@@ -37,20 +36,9 @@ export function AddBookmarkDialog({ open, onClose, onCreated }: Props) {
     }
   }, [open])
 
-  const fetchPreview = useCallback(async () => {
-    if (!url) return
-    setFetching(true)
-    try {
-      const res = await fetch(`/api/preview?url=${encodeURIComponent(url)}`)
-      if (res.ok) {
-        const data = await res.json()
-        if (data?.ogTitle && !title) setTitle(data.ogTitle)
-        if (data?.ogDescription && !description) setDescription(data.ogDescription)
-      }
-    } catch { /* ignore */ }
-    setFetching(false)
-  }, [url, title, description])
-
+  // Review M-10: no client-side preview fetch. The server fetches preview
+  // metadata once during create (and fills title/description defaults), so a
+  // blur followed by Save no longer spends the preview budget twice.
   const handleSubmit = useCallback(async () => {
     if (!url) { toast.error('URL is required'); return }
     setLoading(true)
@@ -111,9 +99,7 @@ export function AddBookmarkDialog({ open, onClose, onCreated }: Props) {
                 placeholder="https://..."
                 value={url}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
-                onBlur={fetchPreview}
               />
-              {fetching && <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />}
             </div>
           </div>
           <div>

web/components/app-shell.tsx

@@ -7,6 +7,7 @@ import { Sidebar } from '@/components/sidebar'
 import { TopBar } from '@/components/top-bar'
 import { AddBookmarkDialog } from '@/components/add-bookmark-dialog'
 import { QuickFind } from '@/components/quick-find'
+import { resetReferenceCache } from '@/lib/reference-data'
 
 export type Bookmark = {
   id: string
@@ -74,6 +75,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
     try {
       await fetch('/api/admin/view-as', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: null }) })
     } catch { /* navigating to /admin surfaces any persistent failure */ }
+    // Review L-6: leaving view-as restores the admin identity.
+    resetReferenceCache()
     window.location.href = '/admin'
   }, [])
 
@@ -104,12 +107,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
     return () => clearInterval(interval)
   }, [session?.user])
 
-  // Request notification permission
-  useEffect(() => {
-    if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
-      Notification.requestPermission()
-    }
-  }, [])
+  // Review L-5: notification permission is requested from the alert bell on
+  // an explicit user action (top-bar.tsx), not on every app mount.
 
   const refreshPage = useCallback(() => {
     window.dispatchEvent(new Event('computer:bookmarks-changed'))

web/components/quick-find.tsx

@@ -5,7 +5,7 @@
 // (new page, add bookmark, toggle theme). Search is read-only; mutations
 // stay on their owning screens.
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import { toast } from 'sonner'
@@ -86,16 +86,23 @@ export function QuickFind({ open, onOpenChange, isAdmin = false, onAddBookmark }
   }, [open])
 
   // Bookmark search hits the API (debounced) because the server matches
-  // notes and URLs too, not just titles.
+  // notes and URLs too, not just titles. Review M-11: requests can still
+  // resolve out of order after the debounce fires, so only the newest
+  // sequence may publish results.
+  const searchSeq = useRef(0)
   useEffect(() => {
     if (!open) return
     const q = query.trim()
     const t = setTimeout(async () => {
-      if (q.length < 2) { setBookmarks([]); return }
+      if (q.length < 2) { searchSeq.current++; setBookmarks([]); return }
+      const seq = ++searchSeq.current
       try {
         const params = new URLSearchParams({ search: q, limit: '6' })
         const res = await fetch(`/api/bookmarks?${params}`)
-        if (res.ok) setBookmarks(((await res.json()) as BookmarkHit[]).slice(0, 6))
+        if (!res.ok || seq !== searchSeq.current) return
+        const rows = (await res.json()) as BookmarkHit[]
+        if (seq !== searchSeq.current) return
+        setBookmarks(rows.slice(0, 6))
       } catch { /* transient; retried on next keystroke */ }
     }, q.length < 2 ? 0 : 200)
     return () => clearTimeout(t)

web/components/sidebar.tsx

@@ -230,8 +230,10 @@ function SidebarNav({ open, pathname, isAdmin = false }: { open: boolean; pathna
     }
   }
 
-  const dropPage = (target: PageSummary, after: boolean) => {
-    const source = draggedPageRef.current
+  // The source id is passed in from the drop handler (reading the ref inside
+  // an event handler) so the compiler does not treat this helper as reading a
+  // ref during render.
+  const dropPage = (source: string | null, target: PageSummary, after: boolean) => {
     draggedPageRef.current = null
     setPageDrop(null)
     if (!source) return
@@ -310,6 +312,8 @@ function SidebarNav({ open, pathname, isAdmin = false }: { open: boolean; pathna
             key={p.id}
             data-page-id={p.id}
             onDragOver={(e) => {
+              // Event handler, not render: reading the drag source is safe.
+              // eslint-disable-next-line react-hooks/refs
               if (!draggedPageRef.current || draggedPageRef.current === p.id) return
               e.preventDefault()
               e.dataTransfer.dropEffect = 'move'
@@ -322,7 +326,9 @@ function SidebarNav({ open, pathname, isAdmin = false }: { open: boolean; pathna
             onDrop={(e) => {
               e.preventDefault()
               const rect = e.currentTarget.getBoundingClientRect()
-              dropPage(p, e.clientY > rect.top + rect.height / 2)
+              // Event handler, not render: reading the drag source is safe.
+              // eslint-disable-next-line react-hooks/refs
+              dropPage(draggedPageRef.current, p, e.clientY > rect.top + rect.height / 2)
             }}
             style={{ paddingLeft: depth * 12 }}
             className={cn(

web/components/top-bar.tsx

@@ -18,6 +18,7 @@ import {
 import { useTheme } from 'next-themes'
 import { useMounted } from '@/components/client-only'
 import { ACTIVE_PAGE_CHANGED } from '@/lib/pages'
+import { resetReferenceCache } from '@/lib/reference-data'
 
 // Notion keeps the top bar minimal: a breadcrumb path on the left, a subtle
 // Quick Find pill, and ghost icon buttons on the right.
@@ -47,6 +48,25 @@ export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSi
   const mounted = useMounted()
   const { theme, setTheme } = useTheme()
   const [activePageTitle, setActivePageTitle] = useState<string | null>(null)
+  // Review L-5: never prompt for notification permission on mount. Browsers
+  // increasingly ignore prompts without a user gesture, and the prompt was
+  // intrusive on every first load. The alert bell exposes an explicit action;
+  // permission is read when that panel opens (null until then, so the action
+  // never renders on the server or before the user interacts).
+  const [notificationPermission, setNotificationPermission] = useState<NotificationPermission | 'unsupported' | null>(null)
+
+  const toggleAlerts = () => {
+    setShowAlerts(!showAlerts)
+    setNotificationPermission(typeof Notification === 'undefined' ? 'unsupported' : Notification.permission)
+  }
+
+  const enableNotifications = async () => {
+    if (typeof Notification === 'undefined') return
+    const permission = await Notification.requestPermission()
+    setNotificationPermission(permission)
+    if (permission === 'granted') toast.success('Desktop alerts enabled')
+    else if (permission === 'denied') toast.error('Desktop alerts are blocked in your browser settings')
+  }
 
   // The pages workspace announces the open page so breadcrumbs can show it.
   // The title only renders on /pages, so route changes need no reset effect.
@@ -88,6 +108,7 @@ export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSi
     if (!revoked) {
       toast.error('Signed out on this device, but global revocation failed — other sessions may remain signed in until the backend recovers.')
     }
+    resetReferenceCache()
     void signOut({ redirectTo: '/login' })
   }
 
@@ -142,7 +163,7 @@ export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSi
       </Button>
 
       <div className="relative shrink-0" id="topbar-alerts">
-        <Button variant="ghost" size="icon-sm" onClick={() => setShowAlerts(!showAlerts)}>
+        <Button variant="ghost" size="icon-sm" onClick={toggleAlerts}>
           <Bell className="h-4 w-4" />
           {(alerts?.length ?? 0) > 0 && (
             <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] text-destructive-foreground">
@@ -153,6 +174,11 @@ export function TopBar({ user, alerts, onDismissAlert, onAddBookmark, onToggleSi
         {showAlerts && (
           <div className="absolute right-0 top-full mt-2 w-80 rounded-lg border bg-card p-2 shadow-lg z-50">
             <p className="px-2 py-1 text-xs font-medium text-muted-foreground">Alerts</p>
+            {notificationPermission === 'default' && (
+              <Button variant="outline" size="sm" className="mx-2 mb-1 w-[calc(100%-1rem)]" onClick={enableNotifications}>
+                Enable desktop alerts
+              </Button>
+            )}
             {(alerts?.length ?? 0) === 0 && (
               <p className="px-2 py-4 text-sm text-center text-muted-foreground">No pending alerts</p>
             )}

web/components/ui/task-card.tsx

@@ -1,66 +0,0 @@
-import { useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Checkbox } from './checkbox'
-import { Button } from './button'
-import { Pencil, Trash2 } from 'lucide-react'
-import { motion } from 'framer-motion'
-
-interface TaskCardProps {
-  id: string
-  title: string
-  description?: string
-  category: string
-  completed: boolean
-  onComplete: (id: string, completed: boolean) => void
-  onDelete: (id: string) => void
-  onEdit: (id: string) => void
-}
-
-export function TaskCard({
-  id,
-  title,
-  description,
-  category,
-  completed,
-  onComplete,
-  onDelete,
-  onEdit,
-}: TaskCardProps) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -20 }}
-      transition={{ duration: 0.2 }}
-    >
-      <Card className={`w-full ${completed ? 'opacity-60' : ''}`}>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              checked={completed}
-              onCheckedChange={(checked) => onComplete(id, checked as boolean)}
-            />
-            <CardTitle className={`text-lg ${completed ? 'line-through' : ''}`}>
-              {title}
-            </CardTitle>
-          </div>
-          <div className="flex space-x-2">
-            <Button variant="ghost" size="icon" onClick={() => onEdit(id)}>
-              <Pencil className="h-4 w-4" />
-            </Button>
-            <Button variant="ghost" size="icon" onClick={() => onDelete(id)}>
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {description && <p className="text-sm text-muted-foreground">{description}</p>}
-          <Badge variant="secondary" className="mt-2">
-            {category}
-          </Badge>
-        </CardContent>
-      </Card>
-    </motion.div>
-  )
-}