Optimize shot table loading performance

- Pass episode_id filter to backend API instead of client-side filtering,
  reducing payload size when an episode is selected
- Skip getShot refetch in ShotDetailPanel when initialShot prop is provided
- Fix redundant DB query in list_shots: read project.custom_task_statuses
  directly from the already-fetched project object
- Add missing indexes on Task.shot_id, Task.assigned_user_id,
  Task.deleted_at and Episode.project_id; add add_perf_indexes.py
  migration script to apply them to existing databases
- Center login page layout
- Update CLAUDE.md and AGENTS.md with correct venv path

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/layout/AppSidebar.vue

@@ -138,7 +138,7 @@ const isCollapsed = computed(() => state.value === 'collapsed')
 
 // Check if on shot page - show column switch only on shot pages
 const isOnShotPage = computed(() => {
-  return route.path.includes('/shots') || route.path.includes('/project/')
+  return route.path.endsWith('/shots') || route.path.includes('/project/')
 })
 
 const props = withDefaults(defineProps<SidebarProps>(), {

frontend/src/components/shot/ShotBrowser.vue

@@ -152,6 +152,7 @@
         @update:column-visibility="handleColumnVisibilityChange"
         @update:rowSelection="handleRowSelectionChange"
         @row-click="handleRowClick"
+        @row-dblclick="handleRowDoubleClick"
       />
     </div>
     </div>
@@ -172,6 +173,7 @@
         <ShotDetailPanel
           :project-id="projectId"
           :shot-id="selectedShot.id"
+          :initial-shot="selectedShot"
           @edit="editShot"
           @delete="deleteShot"
           @create-task="handleCreateTask"
@@ -189,6 +191,7 @@
         v-if="selectedShot"
         :project-id="projectId"
         :shot-id="selectedShot.id"
+        :initial-shot="selectedShot"
         @edit="editShot"
         @delete="deleteShot"
         @create-task="handleCreateTask"
@@ -278,6 +281,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, shallowRef, markRaw, nextTick, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { 
   Search, Plus, Camera, AlertCircle, RefreshCw,
   Layers, MoreHorizontal, Edit, ListTodo, Trash2
@@ -336,6 +340,7 @@ interface Props {
 const props = defineProps<Props>()
 
 // Composables
+const router = useRouter()
 const { toast } = useToast()
 const taskStatusesStore = useTaskStatusesStore()
 
@@ -355,6 +360,13 @@ const {
   sessionStorageKey: 'shotBrowser.detailPanelEnabled'
 })
 
+// Handle double-click to navigate to shot detail page
+const handleRowDoubleClick = (shot: Shot) => {
+  if (props.projectId) {
+    router.push(`/projects/${props.projectId}/shots/${shot.id}`)
+  }
+}
+
 // Reactive state
 const shots = ref<Shot[]>([])
 const isLoading = ref(false)
@@ -430,7 +442,10 @@ const loadShots = async () => {
     if (taskStatusFilter.value) {
       options.taskStatusFilter = taskStatusFilter.value
     }
-    
+    if (episodeFilter.value !== null) {
+      options.episodeId = episodeFilter.value
+    }
+
     const data = await shotService.getShots(options)
     shots.value = data
   } catch (err) {
@@ -524,6 +539,7 @@ const clearValidationError = () => {
 
 const handleEpisodeFilterChange = (episodeId: number | null) => {
   episodeFilter.value = episodeId
+  loadShots()
 }
 
 const handleTaskStatusFilter = (filter: string) => {

frontend/src/components/shot/ShotDetailPanel.vue

@@ -301,6 +301,7 @@ interface Task extends TaskStatusInfo {
 interface Props {
   projectId: number
   shotId: number
+  initialShot?: Shot
 }
 
 interface Emits {
@@ -387,7 +388,7 @@ const loadShotDetails = async () => {
   try {
     isLoading.value = true
     error.value = null
-    shot.value = await shotService.getShot(props.shotId)
+    shot.value = props.initialShot ?? await shotService.getShot(props.shotId)
     loadTasks() // No longer async - uses embedded data
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to load shot details'

frontend/src/router/index.ts

@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
         path: 'shots/:shotId',
         name: 'ShotDetail',
         component: () => import('@/views/project/ShotDetailView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true, tab: 'shots', tabLabel: 'Shots' }
       },
       {
         path: 'assets',

frontend/src/services/breadcrumb.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import { useProjectsStore } from '@/stores/projects'
 import { episodeService } from '@/services/episode'
+import { shotService } from '@/services/shot'
 
 export interface BreadcrumbItem {
   label: string
@@ -73,6 +74,30 @@ export class BreadcrumbService {
             })
           }
         }
+        
+        // Handle shot detail page (path: /projects/:projectId/shots/:shotId)
+        if (pathSegments[2] === 'shots' && pathSegments[3]) {
+          const shotId = parseInt(pathSegments[3])
+          if (!isNaN(shotId)) {
+            try {
+              const shot = await shotService.getShot(shotId)
+              // Replace the last item (Shots) with Shots > ShotName
+              if (crumbs.length > 1) {
+                crumbs[crumbs.length - 1] = {
+                  label: 'Shots',
+                  href: `/projects/${projectId}/shots`
+                }
+              }
+              crumbs.push({
+                label: shot.name,
+                isActive: true
+              })
+            } catch (error) {
+              console.error('Failed to load shot for breadcrumbs:', error)
+              // Keep the default behavior - show shot ID
+            }
+          }
+        }
       }
     } else {
       // Handle other routes

frontend/src/views/auth/LoginView.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="min-h-screen w-full lg:grid lg:grid-cols-2">
-    <!-- Left side - Login Form -->
-    <div class="flex items-center justify-center py-12">
+  <div class="min-h-screen w-full flex items-center justify-center">
+    <div class="flex items-center justify-center py-12 w-full">
       <div class="mx-auto grid w-[350px] gap-6">
         <div class="grid gap-2 text-center">
           <h1 class="text-3xl font-bold">Login</h1>
@@ -67,64 +66,6 @@
         </div>
       </div>
     </div>
-    
-    <!-- Right side - Image/Illustration -->
-    <div class="hidden bg-muted lg:block">
-      <div class="flex h-full items-center justify-center p-10">
-        <div class="max-w-md text-center">
-          <div class="mb-8">
-            <!-- VFX Project Management Logo/Icon -->
-            <div class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-primary">
-              <svg class="h-10 w-10 text-primary-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-              </svg>
-            </div>
-            <h2 class="text-2xl font-bold">VFX Project Management</h2>
-            <p class="mt-2 text-muted-foreground">
-              Streamline your animation and VFX production workflow
-            </p>
-          </div>
-          
-          <div class="space-y-4 text-left">
-            <div class="flex items-center space-x-3">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                </svg>
-              </div>
-              <span class="text-sm">Project & Task Management</span>
-            </div>
-            
-            <div class="flex items-center space-x-3">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-                </svg>
-              </div>
-              <span class="text-sm">Team Collaboration</span>
-            </div>
-            
-            <div class="flex items-center space-x-3">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-                </svg>
-              </div>
-              <span class="text-sm">Progress Tracking</span>
-            </div>
-            
-            <div class="flex items-center space-x-3">
-              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-                </svg>
-              </div>
-              <span class="text-sm">Secure File Management</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </template>