feat: share heaps and folders with other users, fix auth and vision pipeline

Sharing:
- New HeapShare and FolderShare models with read/write permissions
- Sharing API router (CRUD for heap and folder shares)
- Heap endpoints accept shared access (photo_ids, add/remove with write)
- Photo list drops user_id filter in shared context, adds owner_username
- Media serving (thumb/original/proxy) falls back to share check on 404
- ShareDialog component for managing shares from kebab menus
- HeapsPanel shows "Shared with me" section for shared heaps
- LeftSidebar shows "Shared with me" section for shared folders
- Owner badge on PhotoThumbnail for photos from other users

Auth:
- Access token default bumped to 1 year, refresh to 10 years
- Refresh token persisted in localStorage (survives page reload)
- Timer-based refresh replaced with 401 axios interceptor

Vision pipeline fixes:
- Bootstrap sets Redis ready key even on partial export failure
- Export functions run conditionally (only for actually missing models)
- _load_thumb handles multi-user path (/data/thumbs/{user_id}/{photo_id}/)
- can_access_photo_via_share uses single subquery instead of N+1 loop

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/heaps/HeapsPanel.tsx

@@ -10,15 +10,18 @@ import {
   Pencil,
   Copy,
   Trash2,
+  Users,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useHeapsQuery, HEAPS_QUERY_KEY } from '../../hooks/useHeapsQuery'
+import { useSharedHeapsQuery } from '../../hooks/useSharingQueries'
 import { heaps as heapsApi, type Heap } from '../../services/api'
 import { useFilterStore } from '../../store/filterStore'
 import { toast } from '../ToastContainer'
 import { PHOTO_DRAG_MIME } from '../timeline/PhotoThumbnail'
 import { HeapConvertDialog } from './HeapConvertDialog'
+import { ShareDialog } from '../sharing/ShareDialog'
 
 /**
  * Heaps panel for the left sidebar. Renders the list of heaps with the
@@ -43,6 +46,8 @@ export function HeapsPanel() {
   // the drop highlight ring. Only one heap can be the target at a time.
   const [dropTargetId, setDropTargetId] = useState<string | null>(null)
   const [convertingHeap, setConvertingHeap] = useState<Heap | null>(null)
+  const [sharingHeap, setSharingHeap] = useState<Heap | null>(null)
+  const { data: sharedHeaps = [] } = useSharedHeapsQuery()
   // Inline rename state for heap rows: stores the heap id being edited and
   // the draft name. Mirrors the folder rename pattern in LeftSidebar.
   const [renamingId, setRenamingId] = useState<string | null>(null)
@@ -435,6 +440,14 @@ export function HeapsPanel() {
                           setConvertingHeap(heap)
                         }}
                       />
+                      <MenuItem
+                        icon={<Users className="h-3.5 w-3.5" />}
+                        label="Share…"
+                        onClick={() => {
+                          setOpenMenuId(null)
+                          setSharingHeap(heap)
+                        }}
+                      />
                       <div className="my-1 h-px bg-border" />
                       <MenuItem
                         icon={<Trash2 className="h-3.5 w-3.5" />}
@@ -460,10 +473,63 @@ export function HeapsPanel() {
         </div>
       )}
 
+      {/* Shared with me */}
+      {sharedHeaps.length > 0 && expanded && (
+        <div className="mt-1">
+          <div className="px-3 py-0.5 text-[9px] font-semibold uppercase tracking-[0.14em] text-text-faint">
+            Shared with me
+          </div>
+          {sharedHeaps.map((sh) => {
+            const isFiltered = currentSection === `heap-${sh.id}`
+            return (
+              <div
+                key={sh.id}
+                className={clsx(
+                  'group flex h-[24px] cursor-pointer items-center gap-1 rounded px-2 text-[12px] leading-none',
+                  isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
+                )}
+                style={{ paddingLeft: '20px' }}
+                onClick={() =>
+                  navigateToSection(`heap-${sh.id}`, { heapId: sh.id })
+                }
+              >
+                <Users
+                  className={clsx(
+                    'h-3.5 w-3.5 flex-shrink-0',
+                    isFiltered ? 'text-primary' : 'text-text-muted'
+                  )}
+                />
+                <span className="truncate" title={sh.name}>
+                  {sh.name}
+                </span>
+                <span className="ml-0.5 truncate text-[10px] text-text-faint">
+                  {sh.owner_username}
+                </span>
+                <span className="ml-auto rounded bg-surface-offset px-1 text-[9px] uppercase text-text-faint">
+                  {sh.permission}
+                </span>
+                {sh.photo_count > 0 && (
+                  <span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
+                    {sh.photo_count}
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
       <HeapConvertDialog
         heap={convertingHeap}
         onClose={() => setConvertingHeap(null)}
       />
+      <ShareDialog
+        isOpen={!!sharingHeap}
+        type="heap"
+        targetId={sharingHeap?.id ?? ''}
+        targetName={sharingHeap?.name ?? ''}
+        onClose={() => setSharingHeap(null)}
+      />
     </div>
   )
 }

frontend/src/components/layout/LeftSidebar.tsx

@@ -44,6 +44,8 @@ import {
 import { registerUndoable } from '../../store/undoStore'
 import type { Photo } from '../../types/photo'
 import { DeleteFolderDialog } from '../dialogs/DeleteFolderDialog'
+import { ShareDialog } from '../sharing/ShareDialog'
+import { useSharedFoldersQuery } from '../../hooks/useSharingQueries'
 import { useAuth } from '../../contexts/AuthContext'
 
 interface TreeItem {
@@ -111,6 +113,11 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
     name: string
     photoCount?: number
   } | null>(null)
+  const [sharingFolder, setSharingFolder] = useState<{
+    id: string
+    name: string
+  } | null>(null)
+  const { data: sharedFolders = [] } = useSharedFoldersQuery()
 
   // Bulk discard mutation for the drag-onto-Discarded interaction.
   const discardDropMutation = useMutation({
@@ -703,6 +710,14 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
                           })
                         }}
                       />
+                      <FolderMenuItem
+                        icon={<Users className="h-3.5 w-3.5" />}
+                        label="Share…"
+                        onClick={() => {
+                          setOpenMenuId(null)
+                          setSharingFolder({ id: folderId, name: item.label })
+                        }}
+                      />
                       <div className="my-1 h-px bg-border" />
                       <FolderMenuItem
                         icon={<Trash2 className="h-3.5 w-3.5" />}
@@ -803,6 +818,53 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
       {/* Tree View */}
       <div className="flex-1 overflow-y-auto pb-2">
         {libraryTree.map((item) => renderTreeItem(item))}
+
+        {/* Shared with me — folders shared by other users */}
+        {sharedFolders.length > 0 && (
+          <div className="mt-1">
+            <div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted">
+              Shared with me
+            </div>
+            {sharedFolders.map((sf) => {
+              const isSelected = currentSection === `folder-${sf.id}`
+              return (
+                <div
+                  key={sf.id}
+                  className={clsx(
+                    'flex h-[24px] cursor-pointer items-center gap-1 rounded px-2 text-[12px] leading-none',
+                    isSelected ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
+                  )}
+                  style={{ paddingLeft: '20px' }}
+                  onClick={() =>
+                    navigateToSection(`folder-${sf.id}`, { folderId: sf.id })
+                  }
+                >
+                  <Users
+                    className={clsx(
+                      'h-3.5 w-3.5 flex-shrink-0',
+                      isSelected ? 'text-primary' : 'text-text-muted'
+                    )}
+                  />
+                  <span className="truncate" title={sf.name}>
+                    {sf.name}
+                  </span>
+                  <span className="ml-0.5 truncate text-[10px] text-text-faint">
+                    {sf.owner_username}
+                  </span>
+                  <span className="ml-auto rounded bg-surface-offset px-1 text-[9px] uppercase text-text-faint">
+                    {sf.permission}
+                  </span>
+                  {sf.photo_count > 0 && (
+                    <span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
+                      {sf.photo_count}
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+
         <HeapsPanel />
       </div>
 
@@ -853,6 +915,13 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
           }
         }}
       />
+      <ShareDialog
+        isOpen={!!sharingFolder}
+        type="folder"
+        targetId={sharingFolder?.id ?? ''}
+        targetName={sharingFolder?.name ?? ''}
+        onClose={() => setSharingFolder(null)}
+      />
     </div>
   )
 }

frontend/src/components/sharing/ShareDialog.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Users, Trash2, X } from 'lucide-react'
+import clsx from 'clsx'
+import { sharing, type ShareInfo } from '../../services/api'
+import { SHARED_HEAPS_KEY, SHARED_FOLDERS_KEY } from '../../hooks/useSharingQueries'
+
+interface ShareDialogProps {
+  isOpen: boolean
+  type: 'heap' | 'folder'
+  targetId: string
+  targetName: string
+  onClose: () => void
+}
+
+export function ShareDialog({ isOpen, type, targetId, targetName, onClose }: ShareDialogProps) {
+  const [username, setUsername] = useState('')
+  const [permission, setPermission] = useState<'read' | 'write'>('read')
+  const [error, setError] = useState<string | null>(null)
+  const queryClient = useQueryClient()
+
+  const sharesQueryKey = [type, 'shares', targetId]
+
+  const { data: shares = [], isLoading } = useQuery<ShareInfo[]>({
+    queryKey: sharesQueryKey,
+    queryFn: () =>
+      type === 'heap'
+        ? sharing.heapShares(targetId)
+        : sharing.folderShares(targetId),
+    enabled: isOpen,
+  })
+
+  const addMutation = useMutation({
+    mutationFn: () =>
+      type === 'heap'
+        ? sharing.shareHeap(targetId, username, permission)
+        : sharing.shareFolder(targetId, username, permission),
+    onSuccess: () => {
+      setUsername('')
+      setPermission('read')
+      setError(null)
+      queryClient.invalidateQueries({ queryKey: sharesQueryKey })
+      queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
+    },
+    onError: (err: any) => {
+      setError(err?.response?.data?.detail || 'Failed to share')
+    },
+  })
+
+  const revokeMutation = useMutation({
+    mutationFn: (shareId: string) =>
+      type === 'heap'
+        ? sharing.revokeHeapShare(targetId, shareId)
+        : sharing.revokeFolderShare(targetId, shareId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: sharesQueryKey })
+      queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
+    },
+  })
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [isOpen, onClose])
+
+  useEffect(() => {
+    if (isOpen) {
+      setUsername('')
+      setPermission('read')
+      setError(null)
+    }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div className="relative z-10 w-[420px] rounded-lg border border-border bg-surface p-5 shadow-2xl">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Users className="h-4 w-4 text-text-muted" />
+              <h2 className="text-base font-semibold text-text">
+                Share {type === 'heap' ? 'heap' : 'folder'}
+              </h2>
+            </div>
+            <button onClick={onClose} className="text-text-muted hover:text-text">
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="mb-3 text-sm text-text-muted">
+            Sharing <span className="font-medium text-text">{targetName}</span>
+          </div>
+
+          {/* Existing shares */}
+          {shares.length > 0 && (
+            <div className="mb-4 space-y-1.5">
+              {shares.map((share) => (
+                <div
+                  key={share.id}
+                  className="flex items-center justify-between rounded border border-border bg-surface-2 px-3 py-1.5 text-sm"
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium text-text">{share.shared_with_username}</span>
+                    <span className="rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium uppercase text-text-muted">
+                      {share.permission}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => revokeMutation.mutate(share.id)}
+                    className="text-text-muted hover:text-reject"
+                    title="Revoke access"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          {isLoading && <div className="mb-4 text-xs text-text-muted">Loading shares...</div>}
+
+          {/* Add new share */}
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              if (username.trim()) addMutation.mutate()
+            }}
+            className="space-y-3"
+          >
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => {
+                  setUsername(e.target.value)
+                  setError(null)
+                }}
+                placeholder="Username"
+                className="flex-1 rounded border border-border bg-surface-2 px-3 py-1.5 text-sm text-text placeholder:text-text-muted focus:border-primary focus:outline-none"
+                autoFocus
+              />
+              <select
+                value={permission}
+                onChange={(e) => setPermission(e.target.value as 'read' | 'write')}
+                className="rounded border border-border bg-surface-2 px-2 py-1.5 text-sm text-text"
+              >
+                <option value="read">Read</option>
+                <option value="write">Read + Write</option>
+              </select>
+            </div>
+
+            {error && <div className="text-xs text-reject">{error}</div>}
+
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                disabled={!username.trim() || addMutation.isPending}
+                className={clsx(
+                  'rounded px-3 py-1.5 text-sm font-medium text-white',
+                  'bg-primary hover:bg-primary/80 disabled:opacity-50'
+                )}
+              >
+                {addMutation.isPending ? 'Sharing...' : 'Share'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/timeline/PhotoThumbnail.tsx

@@ -7,6 +7,7 @@ import {
   Check,
   Copy,
   AlertTriangle,
+  Users,
 } from 'lucide-react'
 import clsx from 'clsx'
 import { photos as photosApi } from '../../services/api'
@@ -328,6 +329,24 @@ export function PhotoThumbnail({
         </div>
       )}
 
+      {/* TL offset — owner badge for shared photos. Sits below the
+       *  selection check so both can show simultaneously. */}
+      {photo.owner_username && (
+        <div
+          className={clsx(
+            'absolute left-1',
+            isSelected ? 'top-7' : 'top-1',
+            THUMB_BADGE_BASE,
+            THUMB_BADGE_NEUTRAL,
+            'max-w-[90px]'
+          )}
+          title={`Photo owned by ${photo.owner_username}`}
+        >
+          <Users className={THUMB_BADGE_ICON} strokeWidth={2.5} />
+          <span className="truncate">{photo.owner_username}</span>
+        </div>
+      )}
+
       {/* BL — color label + rating. Color comes first (left of rating)
        *  so the swatch reads as a "category dot" prefixing the stars. */}
       {(photo.color_label || photo.rating > 0) && (