diff --git a/.agent/AGENTS.md b/.agent/AGENTS.md
new file mode 100644
index 0000000..6eae984
--- /dev/null
+++ b/.agent/AGENTS.md
@@ -0,0 +1,91 @@
+---
+---
+
+# .agent — Development Guidelines
+
+## Stack
+
+- Next.js (App Router, latest stable patch)
+- React 19
+- TypeScript (strict)
+- Convex
+- shadcn/ui + Tailwind CSS
+
+---
+
+## Defaults
+
+- **Server Components by default.** Add `'use client'` only at the leaves that need interactivity/hooks.
+- **Convex is the source of truth** for server state; local state is for UI-only concerns.
+- **Always leverage typescript**; avoid usage of `any` which defeats the point of using Typescript.
+
+---
+
+## Components & Composition
+
+- Prefer **small, focused components**. Split when a component mixes concerns or becomes hard to scan.
+- **Presentational components:** props in → JSX out (no data fetching; minimal/no app logic).
+- **Feature components:** coordinate data + state + composition.
+- Prefer **composition** (children, slots) over giant prop APIs.
+
+---
+
+## State & Side Effects
+
+- Keep state **closest to where it’s used**; lift only for shared ownership.
+- Don’t mirror Convex query results into local state. Store **UI state** (selection, filters, draft text), not server data.
+- Avoid `useEffect` for app data fetching. Use it for **browser-only side effects** (subscriptions, observers, localStorage).
+
+---
+
+## Convex + Next.js (Best Practice Patterns)
+
+- **Client reactivity:** `useQuery` / `useMutation` in Client Components.
+- **SSR + reactivity:** in a Server Component, `preloadQuery(...)` and pass the payload to a Client Component using `usePreloadedQuery(...)`.
+- **Server-only (non-reactive) rendering:** `fetchQuery(...)` in Server Components.
+- **Server Actions / Route Handlers:** call Convex via `fetchMutation` / `fetchAction` when you must mutate from the server boundary (e.g., form action, webhook, route handler).
+- **Optimistic UI:** prefer Convex optimistic updates (`useMutation(...).withOptimisticUpdate(...)`) over duplicating server logic in ad-hoc local state.
+- **Consistency:** avoid multiple `preloadQuery` calls on the same page; consolidate queries or design around a single preload.
+
+---
+
+## Next.js App Router Conventions
+
+- Use `loading.tsx` and `error.tsx` for route-segment UX.
+- Use `not-found.tsx` for 404 states.
+- Prefer colocating components with the route/feature that owns them; extract to shared only when reused.
+
+---
+
+## React 19 Usage
+
+- Prefer **Actions + `useActionState`** for form submission state when using form actions.
+- Use `useOptimistic` for instant UI feedback when appropriate.
+- Use `useFormStatus` inside design-system components that need form pending state.
+- `use` can read a Promise/Context during render (only where Suspense semantics make sense).
+
+---
+
+## TypeScript (Strict, Practical)
+
+- Let inference work; **export explicit prop types** for shared/public components.
+- No `any`. Use `unknown` and narrow.
+- Avoid `as` casts; prefer `satisfies`, generics, and runtime validation.
+- `@ts-expect-error` allowed only with a comment explaining why + link/TODO to remove.
+
+---
+
+## Performance
+
+- Minimize client bundles: keep heavy logic/components server-side when possible.
+- Use dynamic imports for non-critical client UI.
+- Use `next/image` for images.
+- Memoization is opt-in: use `memo`/`useMemo`/`useCallback` only when profiling shows value.
+
+---
+
+## Styling (shadcn/ui + Tailwind)
+
+- Use shadcn/ui as the base; extend via composition + variants.
+- Tailwind utilities in JSX; extract repetition into components, not `@apply`.
+- Theme via CSS variables; keep design tokens centralized.
diff --git a/.eslintcache b/.eslintcache
new file mode 100644
index 0000000..0b12a09
--- /dev/null
+++ b/.eslintcache
@@ -0,0 +1 @@
+[{"C:\\Code\\pixelstream\\convex\\generatedImages.test.ts":"1","C:\\Code\\pixelstream\\convex\\generatedImages.ts":"2","C:\\Code\\pixelstream\\convex\\generatedImages\\helpers.ts":"3","C:\\Code\\pixelstream\\convex\\generatedImages\\internal.ts":"4","C:\\Code\\pixelstream\\convex\\generatedImages\\mutations.ts":"5","C:\\Code\\pixelstream\\convex\\generatedImages\\queries.ts":"6","C:\\Code\\pixelstream\\convex\\generatedImages\\types.ts":"7"},{"size":12275,"mtime":1768840417883,"results":"8","hashOfConfig":"9"},{"size":888,"mtime":1768838997931,"results":"10","hashOfConfig":"11"},{"size":10454,"mtime":1768838750161,"results":"12","hashOfConfig":"11"},{"size":5249,"mtime":1768838693204,"results":"13","hashOfConfig":"11"},{"size":10478,"mtime":1768838660696,"results":"14","hashOfConfig":"11"},{"size":15924,"mtime":1768838750173,"results":"15","hashOfConfig":"11"},{"size":4411,"mtime":1768838482327,"results":"16","hashOfConfig":"11"},{"filePath":"17","messages":"18","suppressedMessages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1hc6ftq",{"filePath":"20","messages":"21","suppressedMessages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1ekn74t",{"filePath":"23","messages":"24","suppressedMessages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","suppressedMessages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","suppressedMessages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","suppressedMessages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","suppressedMessages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Code\\pixelstream\\convex\\generatedImages.test.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages\\helpers.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages\\internal.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages\\mutations.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages\\queries.ts",[],[],"C:\\Code\\pixelstream\\convex\\generatedImages\\types.ts",[],[]]
\ No newline at end of file
diff --git a/.github/instructions.md b/.github/instructions.md
new file mode 100644
index 0000000..aa440b6
--- /dev/null
+++ b/.github/instructions.md
@@ -0,0 +1,84 @@
+---
+trigger: always_on
+---
+
+# .agent — Development Guidelines
+
+## Stack
+- Next.js (App Router, latest stable patch)
+- React 19
+- TypeScript (strict)
+- Convex
+- shadcn/ui + Tailwind CSS
+- Use `bun run test` to run tests - NOT `bun test`.
+
+---
+
+## Defaults
+- **Server Components by default.** Add `'use client'` only at the leaves that need interactivity/hooks.
+- **Convex is the source of truth** for server state; local state is for UI-only concerns.
+- **Always leverage typescript**; avoid usage of `any` which defeats the point of using Typescript.
+- **Ensure** any new or updated code have had their test files created or updated idiomatically using RTL gold standards and vite test usage.
+
+---
+
+## Components & Composition
+- Prefer **small, focused components**. Split when a component mixes concerns or becomes hard to scan.
+- **Presentational components:** props in → JSX out (no data fetching; minimal/no app logic).
+- **Feature components:** coordinate data + state + composition.
+- Prefer **composition** (children, slots) over giant prop APIs.
+
+---
+
+## State & Side Effects
+- Keep state **closest to where it’s used**; lift only for shared ownership.
+- Don’t mirror Convex query results into local state. Store **UI state** (selection, filters, draft text), not server data.
+- Avoid `useEffect` for app data fetching. Use it for **browser-only side effects** (subscriptions, observers, localStorage).
+
+---
+
+## Convex + Next.js (Best Practice Patterns)
+- **Client reactivity:** `useQuery` / `useMutation` in Client Components.
+- **SSR + reactivity:** in a Server Component, `preloadQuery(...)` and pass the payload to a Client Component using `usePreloadedQuery(...)`.
+- **Server-only (non-reactive) rendering:** `fetchQuery(...)` in Server Components.
+- **Server Actions / Route Handlers:** call Convex via `fetchMutation` / `fetchAction` when you must mutate from the server boundary (e.g., form action, webhook, route handler).
+- **Optimistic UI:** prefer Convex optimistic updates (`useMutation(...).withOptimisticUpdate(...)`) over duplicating server logic in ad-hoc local state.
+- **Consistency:** avoid multiple `preloadQuery` calls on the same page; consolidate queries or design around a single preload.
+
+---
+
+## Next.js App Router Conventions
+- Use `loading.tsx` and `error.tsx` for route-segment UX.
+- Use `not-found.tsx` for 404 states.
+- Prefer colocating components with the route/feature that owns them; extract to shared only when reused.
+
+---
+
+## React 19 Usage
+- Prefer **Actions + `useActionState`** for form submission state when using form actions.
+- Use `useOptimistic` for instant UI feedback when appropriate.
+- Use `useFormStatus` inside design-system components that need form pending state.
+- `use` can read a Promise/Context during render (only where Suspense semantics make sense).
+
+---
+
+## TypeScript (Strict, Practical)
+- Let inference work; **export explicit prop types** for shared/public components.
+- No `any`. Use `unknown` and narrow.
+- Avoid `as` casts; prefer `satisfies`, generics, and runtime validation.
+- `@ts-expect-error` allowed only with a comment explaining why + link/TODO to remove.
+
+---
+
+## Performance
+- Minimize client bundles: keep heavy logic/components server-side when possible.
+- Use dynamic imports for non-critical client UI.
+- Use `next/image` for images.
+- Memoization is opt-in: use `memo`/`useMemo`/`useCallback` only when profiling shows value.
+
+---
+
+## Styling (shadcn/ui + Tailwind)
+- Use shadcn/ui as the base; extend via composition + variants.
+- Tailwind utilities in JSX; extract repetition into components, not `@apply`.
+- Theme via CSS variables; keep design tokens centralized.
\ No newline at end of file
diff --git a/.github/skills/adding-convex-table/SKILL.md b/.github/skills/adding-convex-table/SKILL.md
new file mode 100644
index 0000000..a4f12e2
--- /dev/null
+++ b/.github/skills/adding-convex-table/SKILL.md
@@ -0,0 +1,143 @@
+---
+name: adding-convex-table
+description: |
+  Adds a new table to Convex schema with indexes.
+  Input: Table name, fields, and query patterns.
+  Output: Updated schema.ts with new table definition.
+---
+
+# Adding a Convex Table
+
+Adds a new table to `convex/schema.ts` with proper indexes for query performance.
+
+## Preconditions
+
+- Table doesn't already exist in schema
+- User has provided: table name, fields, and expected query patterns
+
+## Algorithm
+
+```markdown
+1. Read current schema:
+   - [ ] Open `convex/schema.ts`
+   - [ ] Identify existing tables for pattern reference
+
+2. Define table:
+   - [ ] Add `defineTable()` with field validators
+   - [ ] Use appropriate `v.*` types for each field
+   - [ ] Add `userId` if user-scoped data
+
+3. Add indexes:
+   - [ ] Add `.index()` for each field used in queries
+   - [ ] Name indexes descriptively: `by_[field]` or `by_[field1]_and_[field2]`
+
+4. Verify:
+   - [ ] Save file — Convex auto-pushes in dev
+   - [ ] Check Convex dashboard for new table
+   - [ ] Run `bun run build` to regenerate types
+```
+
+## Validator Reference
+
+| Type | Validator | Example |
+|------|-----------|---------|
+| String | `v.string()` | `name: v.string()` |
+| Number | `v.number()` | `count: v.number()` |
+| Boolean | `v.boolean()` | `isActive: v.boolean()` |
+| Optional | `v.optional(v.string())` | `bio: v.optional(v.string())` |
+| ID reference | `v.id("tableName")` | `userId: v.id("users")` |
+| Union | `v.union(v.literal("a"), v.literal("b"))` | `status: v.union(...)` |
+| Array | `v.array(v.string())` | `tags: v.array(v.string())` |
+| Object | `v.object({ ... })` | Nested objects |
+| Any (avoid) | `v.any()` | Only if truly dynamic |
+
+## Template
+
+```typescript
+// convex/schema.ts
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
+
+export default defineSchema({
+  // Existing tables...
+
+  // NEW TABLE
+  myNewTable: defineTable({
+    // Required fields
+    userId: v.string(),
+    title: v.string(),
+    
+    // Optional fields
+    description: v.optional(v.string()),
+    
+    // Enum/status fields
+    status: v.union(
+      v.literal("draft"),
+      v.literal("published"),
+      v.literal("archived")
+    ),
+    
+    // Timestamps
+    createdAt: v.number(),
+    updatedAt: v.optional(v.number()),
+  })
+    // Indexes for queries
+    .index("by_user", ["userId"])
+    .index("by_user_and_status", ["userId", "status"])
+    .index("by_created", ["createdAt"]),
+});
+```
+
+## Existing Tables (Reference)
+
+| Table | Key Fields | Indexes |
+|-------|------------|---------|
+| `users` | `email`, `stripeCustomerId` | `by_email`, `by_clerk_id` |
+| `generatedImages` | `userId`, `model`, `status` | `by_user`, `by_user_and_status` |
+| `favorites` | `userId`, `imageId` | `by_user`, `by_image` |
+| `follows` | `followerId`, `followedId` | `by_follower`, `by_followed` |
+| `promptLibrary` | `userId`, `prompt` | `by_user` |
+| `referenceImages` | `userId`, `storageId` | `by_user` |
+
+## Index Strategy
+
+| Query Pattern | Index Needed |
+|--------------|--------------|
+| Filter by single field | `.index("by_field", ["field"])` |
+| Filter by multiple fields | `.index("by_a_and_b", ["a", "b"])` |
+| Sort by field | Same as filter (Convex sorts on index) |
+| Unique lookup | `.index("by_field", ["field"])` |
+
+## Guardrails
+
+- **Always index** fields used in `.withIndex()` or `.filter()`
+- **User-scoped data** must have `userId` field + `by_user` index
+- **Timestamps** use `v.number()` (Unix ms), not Date
+- **Never use raw SQL** — Convex handles persistence
+- **If schema push fails**, report error and stop
+
+## Output Format
+
+```markdown
+## Summary
+Added table `[tableName]` for [purpose].
+
+## Schema
+```typescript
+myTable: defineTable({
+  field1: v.string(),
+  field2: v.number(),
+}).index("by_field1", ["field1"])
+```
+
+## Indexes
+- `by_field1` — For querying by field1
+
+## Verification
+- Schema pushed ✅
+- Types regenerated ✅
+- Table visible in dashboard ✅
+
+## Next Steps
+- Create queries/mutations in `convex/[tableName].ts`
+```
diff --git a/.github/skills/adding-route/SKILL.md b/.github/skills/adding-route/SKILL.md
new file mode 100644
index 0000000..10697cf
--- /dev/null
+++ b/.github/skills/adding-route/SKILL.md
@@ -0,0 +1,141 @@
+---
+name: adding-route
+description: |
+  Creates a new page/route in Next.js App Router with all boilerplate.
+  Input: Route path (e.g., "/dashboard") and page purpose.
+  Output: page.tsx, layout.tsx (if needed), loading.tsx, error.tsx.
+---
+
+# Adding a Route
+
+Creates a new App Router page with proper structure and loading/error states.
+
+## Preconditions
+
+- Confirm the route doesn't already exist in `app/`
+- User has provided: route path and page purpose/description
+
+## Algorithm
+
+```markdown
+1. Create page file:
+   - [ ] Create `app/[route]/page.tsx` as Server Component
+   - [ ] Add SEO: `export const metadata = { title, description }`
+   - [ ] Add semantic structure: `<main>`, `<h1>`, sections
+
+2. Create loading state:
+   - [ ] Create `app/[route]/loading.tsx`
+   - [ ] Use skeleton with `animate-pulse bg-muted/50`
+
+3. Create error boundary:
+   - [ ] Create `app/[route]/error.tsx` as Client Component ('use client')
+   - [ ] Include reset button
+
+4. Create layout (if needed):
+   - [ ] Only if route needs custom wrapper/providers
+   - [ ] Create `app/[route]/layout.tsx`
+
+5. Verify:
+   - [ ] Run `bun run build` — report errors
+   - [ ] Navigate to route in dev mode
+```
+
+## Template: page.tsx
+
+```tsx
+// app/[route]/page.tsx
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '[Page Title] | Bloom Studio',
+  description: '[Page description for SEO]',
+};
+
+export default function [RouteName]Page() {
+  return (
+    <main className="container py-8 space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight font-brand">
+        [Page Title]
+      </h1>
+      <section>
+        {/* Page content */}
+      </section>
+    </main>
+  );
+}
+```
+
+## Template: loading.tsx
+
+```tsx
+// app/[route]/loading.tsx
+export default function Loading() {
+  return (
+    <div className="container py-8 space-y-6">
+      <div className="h-10 w-48 animate-pulse rounded bg-muted/50" />
+      <div className="h-64 animate-pulse rounded bg-muted/50" />
+    </div>
+  );
+}
+```
+
+## Template: error.tsx
+
+```tsx
+// app/[route]/error.tsx
+'use client';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="container py-8">
+      <h2 className="text-xl font-semibold text-destructive">Something went wrong</h2>
+      <button
+        onClick={reset}
+        className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
+```
+
+## Existing Routes (Reference)
+
+| Route | Path |
+|-------|------|
+| Landing | `app/page.tsx` |
+| Studio | `app/studio/page.tsx` |
+| History | `app/history/page.tsx` |
+| Feed | `app/feed/page.tsx` |
+| Favorites | `app/favorites/page.tsx` |
+| Settings | `app/settings/page.tsx` |
+| Pricing | `app/pricing/page.tsx` |
+| Profile | `app/profile/page.tsx` |
+
+## Guardrails
+
+- **Do NOT add `'use client'`** to page.tsx unless absolutely required
+- **If route already exists**, stop and ask user for clarification
+- **If build fails**, report error and stop
+
+## Output Format
+
+```markdown
+## Summary
+Created route `/[path]` with [purpose].
+
+## Files Created
+- `app/[route]/page.tsx`
+- `app/[route]/loading.tsx`
+- `app/[route]/error.tsx`
+
+## Verification
+- `bun run build` passed ✅
+```
diff --git a/.github/skills/brainstorming-ui-and-design/SKILL.md b/.github/skills/brainstorming-ui-and-design/SKILL.md
new file mode 100644
index 0000000..65c2c51
--- /dev/null
+++ b/.github/skills/brainstorming-ui-and-design/SKILL.md
@@ -0,0 +1,43 @@
+---
+name: brainstorming-ui-and-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+Refer to `.agent/skills/styling-ui/SKILL.md` for repo specific tailwind/css rules.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
\ No newline at end of file
diff --git a/.github/skills/creating-client-component/SKILL.md b/.github/skills/creating-client-component/SKILL.md
new file mode 100644
index 0000000..e14253d
--- /dev/null
+++ b/.github/skills/creating-client-component/SKILL.md
@@ -0,0 +1,162 @@
+---
+name: creating-client-component
+description: |
+  Creates interactive React Client Components with hooks and event handlers.
+  Input: Component name, purpose, required interactivity.
+  Output: Client component file with proper structure and tests.
+---
+
+# Creating a Client Component
+
+Builds React Client Components for interactive UI. Only use when hooks/events are required.
+
+## Preconditions
+
+- Confirm interactivity is needed (hooks, events, browser APIs)
+- If no interactivity needed, use Server Component instead
+
+## Decision: Client or Server?
+
+```
+Need any of these?
+├─ useState, useEffect, useRef → Client
+├─ onClick, onChange, onSubmit → Client
+├─ useRouter, usePathname → Client
+├─ useQuery, useMutation (Convex) → Client
+├─ Browser APIs (localStorage, window) → Client
+└─ None of above → Server Component (no 'use client')
+```
+
+## Algorithm
+
+```markdown
+1. Create component file:
+   - [ ] Create `components/[feature]/[name].tsx`
+   - [ ] Add `'use client'` directive at top
+   - [ ] Define typed props interface
+
+2. Structure component:
+   - [ ] Import `cn` from `@/lib/utils` for class merging
+   - [ ] Use semantic tokens for styling
+   - [ ] Add `className` prop for overrides
+
+3. Add interactivity:
+   - [ ] Implement hooks (useState, etc.)
+   - [ ] Wire event handlers
+   - [ ] Handle loading/error states
+
+4. Create test:
+   - [ ] Create `[name].test.tsx` alongside
+   - [ ] Test user interactions, not implementation
+
+5. Verify:
+   - [ ] Run `bun run test [file]`
+   - [ ] Check TypeScript: `bun run build`
+```
+
+## Template
+
+```tsx
+// components/[feature]/[name].tsx
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface MyComponentProps {
+  initialValue?: string;
+  onSubmit?: (value: string) => void;
+  className?: string;
+}
+
+export function MyComponent({
+  initialValue = '',
+  onSubmit,
+  className,
+}: MyComponentProps) {
+  const [value, setValue] = useState(initialValue);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    setIsLoading(true);
+    try {
+      onSubmit?.(value);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className="px-3 py-2 border rounded bg-input"
+      />
+      <Button onClick={handleSubmit} disabled={isLoading}>
+        {isLoading ? 'Loading...' : 'Submit'}
+      </Button>
+    </div>
+  );
+}
+```
+
+## With Convex
+
+```tsx
+'use client';
+
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '@/convex/_generated/api';
+
+export function DataComponent() {
+  const data = useQuery(api.myTable.list);
+  const create = useMutation(api.myTable.create);
+
+  if (!data) return <div className="animate-pulse" />;
+
+  return (
+    <div>
+      {data.map(item => <div key={item._id}>{item.name}</div>)}
+      <button onClick={() => create({ name: 'New' })}>Add</button>
+    </div>
+  );
+}
+```
+
+## File Locations
+
+| Type | Location |
+|------|----------|
+| Feature components | `components/[feature]/[name].tsx` |
+| Shared/generic | `components/[name].tsx` |
+| Route-specific | `app/[route]/_components/[name].tsx` |
+
+## Guardrails
+
+- **Never** use `'use client'` unless actually needed
+- **Never** call `fetch()` directly — use Convex or Server Actions
+- **Never** mirror Convex data to local state
+- **Always** include `className` prop for override flexibility
+- **Always** use `cn()` for class merging
+
+## Output Format
+
+```markdown
+## Summary
+Created client component `[Name]` for [purpose].
+
+## Files Created
+- `components/[feature]/[name].tsx`
+- `components/[feature]/[name].test.tsx`
+
+## Verification
+- `bun run test [file]` passed ✅
+- No TypeScript errors ✅
+
+## Props
+- `initialValue?: string` — Default value
+- `onSubmit?: (value: string) => void` — Callback
+```
diff --git a/.github/skills/developing-nextjs/SKILL.md b/.github/skills/developing-nextjs/SKILL.md
new file mode 100644
index 0000000..31c8e96
--- /dev/null
+++ b/.github/skills/developing-nextjs/SKILL.md
@@ -0,0 +1,62 @@
+---
+name: developing-nextjs
+description: |
+  Creates pages, layouts, and server/client components in Next.js 16 App Router.
+  Use for: new routes, RSC/RCC decisions, Server Actions, loading/error states.
+  DO NOT use for: Convex mutations (use managing-convex), styling (use styling-ui).
+---
+
+# Developing with Next.js 16
+
+Next.js 16 App Router overview. **Use the specific skills below for actual tasks.**
+
+## Skill Routing
+
+| Task | Use Skill |
+|------|-----------|
+| Create a new page/route | `adding-route` |
+| Build interactive component | `creating-client-component` |
+| Server-side form mutation | `writing-server-actions` |
+| SSR with Convex reactivity | `preloading-convex-data` |
+| Styling components | `styling-ui` |
+
+## Core Principles
+
+- **Server Components Default**: All components are Server Components unless marked `'use client'`
+- **Client Leaves**: Use `'use client'` only for interactive leaves (hooks, events)
+- **Strict Types**: No `any`. Explicitly type props.
+- **Convex is Truth**: Don't mirror Convex data to local state
+
+## Decision Tree
+
+```
+Need data from Convex?
+├─ Server Component → preloadQuery() → see `preloading-convex-data`
+├─ Client-only reactive → useQuery() directly
+└─ Non-reactive SSR → fetchQuery()
+
+Need interactivity?
+├─ Yes → see `creating-client-component`
+└─ No → Server Component (default)
+
+Need form mutation?
+├─ Yes → see `writing-server-actions`
+└─ No → Use what's appropriate
+```
+
+## Source of Truth
+
+| Concern | Location |
+|---------|----------|
+| Routes | `app/` |
+| Shared Components | `components/` |
+| UI Primitives | `components/ui/` |
+| Providers | `components/providers/` |
+| Layouts | `components/layout/` |
+
+## Guardrails
+
+- **Never** call `fetch()` directly — use Convex or Server Actions
+- **Never** mirror Convex data to `useState`
+- **Never** add `'use client'` unless hooks/events are needed
+- **If build fails**, report error and stop
diff --git a/.github/skills/generating-images/SKILL.md b/.github/skills/generating-images/SKILL.md
new file mode 100644
index 0000000..c725d86
--- /dev/null
+++ b/.github/skills/generating-images/SKILL.md
@@ -0,0 +1,102 @@
+---
+name: generating-images
+description: |
+  Generates images using Pollinations API. Validates model constraints and dimensions.
+  Use for: image generation logic, model selection, constraint validation.
+  DO NOT use for: video generation (use generating-videos), UI styling (use styling-ui).
+---
+
+# Generating Images
+
+Generates images via Pollinations API. All model config lives in `lib/config/models.ts`.
+
+## Source of Truth
+
+- **Model Registry**: `lib/config/models.ts` — READ THIS FIRST
+- **Generation Processor**: `convex/singleGenerationProcessor.ts`
+- **URL Building**: `convex/lib/pollinations.ts`
+- **Resolution Tiers**: `lib/config/resolution-tiers.ts`
+- **Standard Resolutions**: `lib/config/standard-resolutions.ts`
+
+## Current Image Models
+
+See `lib/config/models.ts` for current image models.
+
+## Workflow: Generate Image
+
+```markdown
+- [ ] 1. Read `lib/config/models.ts` to confirm model exists and `type === "image"`
+- [ ] 2. Validate dimensions:
+       - `width % step === 0`
+       - `height % step === 0`
+       - `width * height <= maxPixels`
+       - `width <= maxDimension && height <= maxDimension`
+- [ ] 3. If model `supportsNegativePrompt === false`, do NOT send negative prompt param
+- [ ] 4. Call `startGeneration` mutation in `convex/singleGeneration.ts`
+- [ ] 5. Verify generation completes or report error
+```
+
+## Dimension Validation
+
+```typescript
+// Example validation logic
+function validateDimensions(model: ModelDefinition, width: number, height: number): boolean {
+  const { constraints } = model;
+  const pixels = width * height;
+  
+  return (
+    width % constraints.step === 0 &&
+    height % constraints.step === 0 &&
+    pixels <= constraints.maxPixels &&
+    width <= constraints.maxDimension &&
+    height <= constraints.maxDimension &&
+    width >= constraints.minDimension &&
+    height >= constraints.minDimension
+  );
+}
+```
+
+## Error Handling
+
+| HTTP Code | Behavior |
+|-----------|----------|
+| 200 | Success |
+| 400 | Fail immediately — invalid params |
+| 429 | Retry with backoff (rate limit) |
+| 5xx | Retry with backoff (server error) |
+
+Reference: `convex/lib/retry.ts` for retry logic.
+
+## Guardrails
+
+- **Never guess model IDs.** Always read `MODEL_REGISTRY` from `lib/config/models.ts`.
+- **Never send unsupported params.** Check `supportsNegativePrompt` before including it.
+- **If validation fails**, return clear error message. Don't attempt generation.
+- **If model not found**, list available image models and ask user to choose.
+
+## Testing
+
+Reference files:
+- `lib/config/models.test.ts` — Model validation tests
+- `convex/lib/pollinations.test.ts` — API integration tests
+
+Run with: `bun run test lib/config/models.test.ts`
+
+## Output Format
+
+```markdown
+## Summary
+Generated [model] image at [width]x[height].
+
+## Validation
+- Model: `flux` ✅
+- Dimensions: 768x768 ✅ (step=8, max=768)
+- Pixels: 589,824 ≤ 589,824 ✅
+
+## Result
+- Generation ID: `abc123`
+- Status: completed ✅
+
+## Errors (if any)
+- [Error details]
+```
diff --git a/.github/skills/generating-videos/SKILL.md b/.github/skills/generating-videos/SKILL.md
new file mode 100644
index 0000000..3ee029d
--- /dev/null
+++ b/.github/skills/generating-videos/SKILL.md
@@ -0,0 +1,123 @@
+---
+name: generating-videos
+description: |
+  Generates videos using Pollinations API. Validates duration, audio, and interpolation capabilities.
+  Use for: video generation logic, model selection, duration constraints.
+  DO NOT use for: image generation (use generating-images), thumbnailing (handled automatically).
+---
+
+# Generating Videos
+
+Generates videos via Pollinations API. All model config lives in `lib/config/models.ts`.
+
+## Source of Truth
+
+- **Model Registry**: `lib/config/models.ts` — READ THIS FIRST
+- **Generation Processor**: `convex/singleGenerationProcessor.ts`
+- **Thumbnail Extraction**: `convex/lib/videoThumbnail.ts`
+
+## Current Video Models
+
+See `lib/config/models.ts` for current video models.
+
+## Model Capabilities
+
+```typescript
+// From lib/config/models.ts
+interface VideoModel {
+  supportsAudio?: boolean;           // Can generate video with audio (Veo only)
+  supportsInterpolation?: boolean;   // Supports first/last frame images (Veo only)
+  durationConstraints: {
+    min: number;                     // Minimum seconds
+    max: number;                     // Maximum seconds
+    fixedOptions?: number[];         // If set, only these values allowed
+    defaultDuration: number;         // Default if not specified
+  };
+}
+```
+
+## Workflow: Generate Video
+
+```markdown
+- [ ] 1. Read `lib/config/models.ts` to confirm model exists and `type === "video"`
+- [ ] 2. Validate duration:
+       - `duration >= durationConstraints.min`
+       - `duration <= durationConstraints.max`
+       - If `fixedOptions` exists, `duration` must be in list
+- [ ] 3. If `supportsAudio === false`, do NOT send `audio` param
+- [ ] 4. If `supportsInterpolation === false`, do NOT send `lastFrameImage` param
+- [ ] 5. Call `startGeneration` mutation in `convex/singleGeneration.ts`
+- [ ] 6. Processor auto-generates thumbnail via `videoThumbnail.ts`
+```
+
+## Duration Validation
+
+```typescript
+function validateDuration(model: ModelDefinition, duration: number): boolean {
+  const { durationConstraints } = model;
+  if (!durationConstraints) return false;
+  
+  // Check range
+  if (duration < durationConstraints.min || duration > durationConstraints.max) {
+    return false;
+  }
+  
+  // Check fixed options if applicable
+  if (durationConstraints.fixedOptions) {
+    return durationConstraints.fixedOptions.includes(duration);
+  }
+  
+  return true;
+}
+```
+
+## Decision Tree
+
+```
+Model selected?
+├─ veo → supports audio & interpolation
+│  ├─ User wants audio? → Include audio=true
+│  └─ User has reference images? → Include firstFrameImage, lastFrameImage
+├─ seedance-pro → no audio, no interpolation
+│  └─ Duration: 2-10s (any value)
+└─ seedance → no audio, no interpolation
+   └─ Duration: 2-10s (any value)
+```
+
+## Guardrails
+
+- **Never guess model IDs.** Always read `MODEL_REGISTRY` from `lib/config/models.ts`.
+- **Never send unsupported params.** Check `supportsAudio` before including `audio`.
+- **Veo requires fixed durations.** Only 4, 6, or 8 seconds allowed.
+- **Thumbnail is automatic.** Do not manually call thumbnail generation.
+- **If duration invalid**, return error with valid range/options.
+
+## Testing
+
+Extend `convex/lib/pollinations.test.ts`:
+- Verify `duration` only sent for video models
+- Verify `audio` only sent when `supportsAudio === true`
+- Mock ffmpeg when testing thumbnail extraction
+
+Run with: `bun run test convex/lib/pollinations.test.ts`
+
+## Output Format
+
+```markdown
+## Summary
+Generated [model] video, [duration]s.
+
+## Validation
+- Model: `veo` ✅
+- Duration: 6s ✅ (fixed options: 4, 6, 8)
+- Audio: requested ✅ (supported)
+- Interpolation: not requested
+
+## Result
+- Generation ID: `xyz789`
+- Status: completed ✅
+- Thumbnail: generated ✅
+
+## Errors (if any)
+- [Error details]
+```
diff --git a/.github/skills/managing-convex/SKILL.md b/.github/skills/managing-convex/SKILL.md
new file mode 100644
index 0000000..2086106
--- /dev/null
+++ b/.github/skills/managing-convex/SKILL.md
@@ -0,0 +1,72 @@
+---
+name: managing-convex
+description: |
+  Manages Convex backend: schema, queries, mutations, and actions.
+  Use for: database operations, server logic, real-time subscriptions.
+  DO NOT use for: frontend components (use developing-nextjs), API routes (use Next.js actions).
+---
+
+# Managing Convex
+
+Convex backend overview. **Use the specific skills below for actual tasks.**
+
+## Skill Routing
+
+| Task | Use Skill |
+|------|-----------|
+| Add a new database table | `adding-convex-table` |
+| Write query/mutation/action | `writing-convex-functions` |
+| Preload data for SSR | `preloading-convex-data` |
+
+## Source of Truth
+
+| Concern | Location |
+|---------|----------|
+| Schema | `convex/schema.ts` |
+| Functions | `convex/*.ts` |
+| Lib Utilities | `convex/lib/` |
+| Generated Types | `convex/_generated/` |
+
+## Function Types
+
+| Type | Use Case | Access |
+|------|----------|--------|
+| `query` | Read data (reactive) | `ctx.db.query()` |
+| `mutation` | Write data | `ctx.db.insert/patch/delete()` |
+| `action` | External APIs | `fetch()`, `ctx.runQuery()` |
+
+## Current Tables
+
+| Table | Purpose |
+|-------|---------|
+| `users` | User accounts |
+| `generatedImages` | Generation history |
+| `favorites` | Saved images |
+| `follows` | User follows |
+| `promptLibrary` | Saved prompts |
+| `referenceImages` | Uploaded references |
+
+## Lib Utilities
+
+| File | Purpose |
+|------|---------|
+| `convex/lib/pollinations.ts` | API URL building |
+| `convex/lib/r2.ts` | Cloudflare R2 storage |
+| `convex/lib/retry.ts` | Retry with backoff |
+| `convex/lib/subscription.ts` | Subscription helpers |
+| `convex/lib/videoThumbnail.ts` | FFmpeg thumbnails |
+
+## Auth Pattern
+
+```typescript
+const identity = await ctx.auth.getUserIdentity();
+if (!identity) throw new Error("Unauthenticated");
+const userId = identity.subject; // Clerk user ID
+```
+
+## Guardrails
+
+- **Always index** fields used in queries
+- **Always validate** args with `v.*` validators
+- **Auth required** for user-scoped data
+- **Actions can't access db** — use `ctx.runQuery/runMutation`
diff --git a/.github/skills/preloading-convex-data/SKILL.md b/.github/skills/preloading-convex-data/SKILL.md
new file mode 100644
index 0000000..ac04895
--- /dev/null
+++ b/.github/skills/preloading-convex-data/SKILL.md
@@ -0,0 +1,183 @@
+---
+name: preloading-convex-data
+description: |
+  Preloads Convex data in Server Components for SSR with client-side reactivity.
+  Input: Query to preload and component that consumes it.
+  Output: Server Component with preloadQuery + Client Component with usePreloadedQuery.
+---
+
+# Preloading Convex Data
+
+Combines SSR performance with Convex real-time reactivity using `preloadQuery`.
+
+## When to Use
+
+| Scenario | Pattern |
+|----------|---------|
+| Page needs SEO + real-time updates | `preloadQuery` (this skill) |
+| Client-only reactive data | `useQuery` directly |
+| Static SSR, no reactivity | `fetchQuery` |
+| Server mutation | `fetchMutation` |
+
+## Algorithm
+
+```markdown
+1. Server Component (page):
+   - [ ] Import `preloadQuery` from `convex/nextjs`
+   - [ ] Import `api` from `@/convex/_generated/api`
+   - [ ] Call `await preloadQuery(api.table.query, args)`
+   - [ ] Pass preloaded data to Client Component
+
+2. Client Component:
+   - [ ] Add `'use client'` directive
+   - [ ] Import `usePreloadedQuery` from `convex/react`
+   - [ ] Import `Preloaded` type from `convex/react`
+   - [ ] Define prop type with `Preloaded<typeof api.query>`
+   - [ ] Call `usePreloadedQuery(preloadedData)`
+
+3. Verify:
+   - [ ] Check SSR: view source should have data
+   - [ ] Check reactivity: data updates in real-time
+```
+
+## Template: Server Component (Page)
+
+```tsx
+// app/history/page.tsx
+import { preloadQuery } from 'convex/nextjs';
+import { api } from '@/convex/_generated/api';
+import { HistoryClient } from '@/components/gallery/history-client';
+
+export const metadata = {
+  title: 'History | Pixelstream',
+};
+
+export default async function HistoryPage() {
+  const preloadedImages = await preloadQuery(
+    api.generatedImages.listUserImages,
+    { limit: 50 }
+  );
+
+  return (
+    <main className="container py-8">
+      <h1 className="text-3xl font-bold mb-6">Your History</h1>
+      <HistoryClient preloadedImages={preloadedImages} />
+    </main>
+  );
+}
+```
+
+## Template: Client Component
+
+```tsx
+// components/gallery/history-client.tsx
+'use client';
+
+import { usePreloadedQuery } from 'convex/react';
+import type { Preloaded } from 'convex/react';
+import type { api } from '@/convex/_generated/api';
+
+interface HistoryClientProps {
+  preloadedImages: Preloaded<typeof api.generatedImages.listUserImages>;
+}
+
+export function HistoryClient({ preloadedImages }: HistoryClientProps) {
+  // Hydrates SSR data, then subscribes to real-time updates
+  const images = usePreloadedQuery(preloadedImages);
+
+  if (!images || images.length === 0) {
+    return <p className="text-muted-foreground">No images yet.</p>;
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {images.map((image) => (
+        <div key={image._id} className="aspect-square bg-muted rounded">
+          {/* Render image */}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Common Queries (Reference)
+
+| Query | Args | Returns |
+|-------|------|---------|
+| `api.generatedImages.listUserImages` | `{ limit }` | User's images |
+| `api.generatedImages.getPublicFeed` | `{ limit }` | Public feed |
+| `api.favorites.list` | `{}` | User's favorites |
+| `api.promptLibrary.list` | `{}` | Saved prompts |
+| `api.users.getCurrent` | `{}` | Current user |
+
+## Important: Type Safety
+
+```tsx
+// The type must match exactly
+import type { Preloaded } from 'convex/react';
+import type { api } from '@/convex/_generated/api';
+
+// Correct type annotation:
+type Props = {
+  preloaded: Preloaded<typeof api.generatedImages.listUserImages>;
+};
+
+// NOT this (will error):
+type Props = {
+  preloaded: any; // ❌ Never use any
+};
+```
+
+## Guardrails
+
+- **Never call `useQuery`** in client component when preloaded data is passed
+- **Never use `any`** for preloaded types — always use `Preloaded<typeof api.query>`
+- **Avoid multiple `preloadQuery`** calls on same page — consolidate or redesign
+- **If query returns null**, handle loading state in client component
+- **If SSR fails**, the page will error — add error.tsx boundary
+
+## Anti-Pattern: Don't Do This
+
+```tsx
+// ❌ WRONG: Mirroring Convex data to local state
+'use client';
+
+export function BadComponent({ preloadedImages }) {
+  const images = usePreloadedQuery(preloadedImages);
+  const [localImages, setLocalImages] = useState(images); // ❌ Don't mirror!
+  
+  // ...
+}
+```
+
+```tsx
+// ✅ CORRECT: Use Convex data directly
+'use client';
+
+export function GoodComponent({ preloadedImages }) {
+  const images = usePreloadedQuery(preloadedImages); // ✅ Source of truth
+  
+  return <div>{images.map(...)}</div>;
+}
+```
+
+## Output Format
+
+```markdown
+## Summary
+Added preloading for `[query]` on `[route]`.
+
+## Files Modified/Created
+- `app/[route]/page.tsx` — Added preloadQuery
+- `components/[name].tsx` — Created client consumer
+
+## Data Flow
+1. Server: `preloadQuery(api.x.y, args)`
+2. Client: `usePreloadedQuery(preloaded)`
+3. Reactivity: Real-time updates work ✅
+
+## Verification
+- SSR works (view source has data) ✅
+- Real-time updates work ✅
+```
diff --git a/.github/skills/styling-ui/SKILL.md b/.github/skills/styling-ui/SKILL.md
new file mode 100644
index 0000000..eeb4ee3
--- /dev/null
+++ b/.github/skills/styling-ui/SKILL.md
@@ -0,0 +1,171 @@
+---
+name: styling-ui
+description: |
+  Enforces design system using Tailwind CSS v4 and shadcn/ui.
+  Use for: all styling, theming, responsive design, animations.
+  DO NOT use for: component logic (use developing-nextjs), data fetching (use managing-convex).
+---
+
+# Styling UI
+
+Tailwind CSS v4 + shadcn/ui design system. Semantic tokens are mandatory.
+
+## Source of Truth
+
+- **Globals + Tokens**: `app/globals.css`
+- **UI Primitives**: `components/ui/` (shadcn/ui)
+- **Class Merger**: `import { cn } from "@/lib/utils"`
+
+## Mandatory Standards
+
+| Requirement | Correct | Incorrect |
+|-------------|---------|-----------|
+| Class merging | `cn("base", className)` | `className={...}` only |
+| Colors | `bg-background`, `text-foreground` | `bg-white`, `text-black` |
+| Spacing | `gap-4`, `p-6` | `gap-[18px]`, `padding: 20px` |
+| Fonts | `font-sans`, `font-brand`, `font-mono` | `font-family: Arial` |
+| Responsive | `md:flex`, `lg:grid-cols-3` | Fixed widths |
+
+## Font System
+
+| Token | Font | Usage |
+|-------|------|-------|
+| `font-sans` | Geist | Default body/UI text |
+| `font-brand` | Bricolage Grotesque | Headings, brand moments |
+| `font-mono` | Geist Mono | Code, numbers, IDs |
+
+## Color Tokens (oklch-based)
+
+Use semantic tokens exclusively:
+
+```css
+/* From app/globals.css */
+--background       /* Page background */
+--foreground       /* Primary text */
+--card             /* Card surfaces */
+--muted            /* Secondary backgrounds */
+--muted-foreground /* Secondary text */
+--primary          /* Brand color (orange ember) */
+--accent           /* Hover highlights */
+--destructive      /* Error states */
+--border           /* Borders */
+```
+
+## Animation Utilities
+
+| Class | Effect | Duration |
+|-------|--------|----------|
+| `animate-fade-in` | Fade + slide up | 0.6s |
+| `animate-scale-in` | Pop in | 0.3s |
+| `animate-shimmer` | Loading shimmer | 2s loop |
+| `animate-float` | Levitation | 6s loop |
+| `animate-pulse-glow` | Attention glow | 3s loop |
+| `animate-lightbulb-glow` | Subtle glow | 1.5s loop |
+| `animate-loading-bar` | Progress bar | 1.5s loop |
+
+## Custom Utilities
+
+| Class | Purpose |
+|-------|---------|
+| `glass-effect` | Frosted glass panels (blur + transparency) |
+| `glass-effect-home` | Dark glass for landing page |
+| `container` | Centered content with responsive padding |
+
+## Workflow: Style Component
+
+```markdown
+- [ ] 1. Import `cn` from `@/lib/utils`
+- [ ] 2. Use semantic HTML (`<main>`, `<section>`, `<article>`)
+- [ ] 3. Apply `font-sans` (default) or `font-brand` for headings
+- [ ] 4. Use tokens: `bg-card`, `text-foreground`, `border-border`
+- [ ] 5. Layout with `flex`/`grid` and `gap-*`
+- [ ] 6. Add responsive: mobile-first, then `md:`, `lg:` overrides
+- [ ] 7. Add interactivity: `hover:bg-muted/50 transition-colors cursor-pointer`
+- [ ] 8. Polish: animations, `glass-effect` where appropriate
+```
+
+## Common Patterns
+
+### Card Component
+
+```tsx
+<div className={cn(
+  "rounded-lg border bg-card p-6 shadow-sm",
+  "hover:shadow-md transition-shadow",
+  className
+)}>
+  {children}
+</div>
+```
+
+### Interactive Button
+
+```tsx
+<button className={cn(
+  "px-4 py-2 rounded-md font-medium",
+  "bg-primary text-primary-foreground",
+  "hover:bg-primary/90 transition-colors",
+  "focus-visible:ring-2 focus-visible:ring-ring"
+)}>
+  Click Me
+</button>
+```
+
+### Responsive Grid
+
+```tsx
+<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+  {items.map(item => <Card key={item.id} />)}
+</div>
+```
+
+### Glass Panel
+
+```tsx
+<div className="glass-effect rounded-xl p-6">
+  {/* Content with frosted glass background */}
+</div>
+```
+
+## Breakpoints
+
+| Token | Width | Target |
+|-------|-------|--------|
+| `xs` | 480px | Mobile landscape |
+| `sm` | 640px | Large mobile |
+| `md` | 768px | Tablet |
+| `lg` | 1024px | Laptop |
+| `xl` | 1280px | Desktop |
+| `2xl` | 1536px | Large desktop |
+| `3xl` | 2000px | 1440p monitors |
+| `4xl` | 2400px | 2K monitors |
+| `5xl` | 3600px | 4K monitors |
+
+## Guardrails
+
+- **Never** use hardcoded colors (`#fff`, `rgb(...)`, `bg-gray-100`)
+- **Never** use inline styles (`style={{ padding: 20 }}`)
+- **Never** create custom CSS files — use `globals.css` utilities only
+- **Always** use `cn()` for className props to enable overrides
+- **Always** test mobile-first, then add `md:` / `lg:` variants
+
+## Output Format
+
+```markdown
+## Summary
+Styled [component] with [pattern].
+
+## Tokens Used
+- Colors: `bg-card`, `text-foreground`
+- Spacing: `p-4`, `gap-2`
+- Animation: `animate-fade-in`
+
+## Responsive
+- Mobile: single column
+- `md:`: 2 columns
+- `lg:`: 3 columns
+
+## Verification
+- Dark mode tested ✅
+- Mobile tested ✅
+```
diff --git a/.github/skills/testing-code/SKILL.md b/.github/skills/testing-code/SKILL.md
new file mode 100644
index 0000000..dba289d
--- /dev/null
+++ b/.github/skills/testing-code/SKILL.md
@@ -0,0 +1,62 @@
+---
+name: testing-code
+description: |
+  Tests code using Vitest and React Testing Library.
+  Use for: unit tests, component tests, regression tests, bug fix verification.
+  DO NOT use for: E2E tests (not set up), visual testing.
+---
+
+# Testing Code
+
+Testing overview. **Use the specific skills below for actual tasks.**
+
+## Skill Routing
+
+| Task | Use Skill |
+|------|-----------|
+| Test React component | `testing-components` |
+| Test pure function/utility | `testing-functions` |
+
+## Commands
+
+```bash
+bun run test           # Run all tests once
+bun run test:watch     # Watch mode
+bun run test [pattern] # Run matching files
+```
+
+## File Location
+
+| Source | Test |
+|--------|------|
+| `components/foo.tsx` | `components/foo.test.tsx` |
+| `lib/utils.ts` | `lib/utils.test.ts` |
+| `convex/lib/x.ts` | `convex/lib/x.test.ts` |
+
+## Test Structure
+
+```typescript
+import { describe, it, expect, vi } from "vitest";
+
+describe("Feature", () => {
+  it("does something", () => {
+    expect(result).toBe(expected);
+  });
+});
+```
+
+## Key Mocks
+
+| Dependency | Mock Pattern |
+|------------|--------------|
+| `next/navigation` | `useRouter`, `usePathname` |
+| `convex/react` | `useQuery`, `useMutation` |
+| `@clerk/nextjs` | `useUser`, `useAuth` |
+| `next/image` | Replace with `<img>` |
+
+## Guardrails
+
+- **Test behavior**, not implementation
+- **Use accessible queries** — `getByRole` over `getByTestId`
+- **Mock at boundaries** — hooks, not internals
+- **If tests fail for unrelated reasons**, report and stop
diff --git a/.github/skills/testing-components/SKILL.md b/.github/skills/testing-components/SKILL.md
new file mode 100644
index 0000000..46e1c29
--- /dev/null
+++ b/.github/skills/testing-components/SKILL.md
@@ -0,0 +1,207 @@
+---
+name: testing-components
+description: |
+  Tests React components with Vitest and React Testing Library.
+  Input: Component to test.
+  Output: Test file with render, interaction, and assertion tests.
+---
+
+# Testing Components
+
+Creates tests for React components focusing on user behavior, not implementation.
+
+## Preconditions
+
+- Component exists and is functional
+- Testing Library is available (`@testing-library/react`)
+
+## Algorithm
+
+```markdown
+1. Create test file:
+   - [ ] Create `[component].test.tsx` next to component
+   - [ ] Import component and testing utilities
+
+2. Mock dependencies:
+   - [ ] Mock Next.js navigation if used
+   - [ ] Mock Convex hooks if used
+   - [ ] Mock Clerk auth if used
+
+3. Write tests:
+   - [ ] Test initial render
+   - [ ] Test user interactions
+   - [ ] Test error/loading states
+
+4. Run and verify:
+   - [ ] Run `bun run test [file]`
+   - [ ] All tests pass
+```
+
+## Template: Basic Component Test
+
+```typescript
+// components/ui/button.test.tsx
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders with text", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it("calls onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    
+    fireEvent.click(screen.getByRole("button"));
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  it("is disabled when disabled prop is true", () => {
+    render(<Button disabled>Click</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("applies custom className", () => {
+    render(<Button className="custom-class">Click</Button>);
+    expect(screen.getByRole("button")).toHaveClass("custom-class");
+  });
+});
+```
+
+## Mocking Patterns
+
+### Next.js Navigation
+
+```typescript
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    back: vi.fn(),
+  }),
+  usePathname: () => "/studio",
+  useSearchParams: () => new URLSearchParams("model=flux"),
+}));
+```
+
+### Convex Hooks
+
+```typescript
+import { useQuery, useMutation } from "convex/react";
+
+vi.mock("convex/react", () => ({
+  useQuery: vi.fn(),
+  useMutation: vi.fn(() => vi.fn()),
+  useConvex: vi.fn(),
+}));
+
+// In test:
+(useQuery as vi.Mock).mockReturnValue([
+  { _id: "1", name: "Test Image" },
+  { _id: "2", name: "Another Image" },
+]);
+```
+
+### Clerk Auth
+
+```typescript
+vi.mock("@clerk/nextjs", () => ({
+  useUser: () => ({
+    user: { id: "user_123", firstName: "Test" },
+    isLoaded: true,
+    isSignedIn: true,
+  }),
+  useAuth: () => ({
+    isSignedIn: true,
+    userId: "user_123",
+  }),
+}));
+```
+
+### Next/Image
+
+```typescript
+vi.mock("next/image", () => ({
+  default: ({ src, alt, ...props }: any) => (
+    <img src={src} alt={alt} {...props} />
+  ),
+}));
+```
+
+## Query Selector Priority
+
+Use in this order (most accessible first):
+
+| Priority | Selector | Example |
+|----------|----------|---------|
+| 1 | `getByRole` | `getByRole("button", { name: /submit/i })` |
+| 2 | `getByLabelText` | `getByLabelText(/email/i)` |
+| 3 | `getByPlaceholderText` | `getByPlaceholderText(/search/i)` |
+| 4 | `getByText` | `getByText(/loading/i)` |
+| 5 | `getByTestId` | `getByTestId("custom-element")` (last resort) |
+
+## Async Testing
+
+```typescript
+import { render, screen, waitFor } from "@testing-library/react";
+
+it("shows data after loading", async () => {
+  render(<AsyncComponent />);
+  
+  // Wait for element to appear
+  expect(await screen.findByText(/loaded/i)).toBeInTheDocument();
+  
+  // Or use waitFor for custom assertions
+  await waitFor(() => {
+    expect(screen.getByRole("list")).toHaveAttribute("data-loaded", "true");
+  });
+});
+```
+
+## User Event (Preferred over fireEvent)
+
+```typescript
+import userEvent from "@testing-library/user-event";
+
+it("types in input", async () => {
+  const user = userEvent.setup();
+  render(<SearchInput />);
+  
+  const input = screen.getByRole("textbox");
+  await user.type(input, "hello world");
+  
+  expect(input).toHaveValue("hello world");
+});
+```
+
+## Guardrails
+
+- **Test behavior, not implementation** — don't test internal state
+- **Use accessible queries** — prefer `getByRole` over `getByTestId`
+- **Mock at boundaries** — mock Convex hooks, not db internals
+- **No arbitrary waits** — use `findBy*` or `waitFor`
+- **If tests fail for unrelated reasons**, report and stop
+
+## Output Format
+
+```markdown
+## Summary
+Added tests for `[ComponentName]`.
+
+## Test Cases
+- [x] renders correctly
+- [x] handles click event
+- [x] shows loading state
+- [x] displays error message
+
+## Mocks Used
+- `next/navigation` (useRouter)
+- `convex/react` (useQuery)
+
+## Verification
+- `bun run test [file]` passed ✅
+- [N] tests, [M] assertions
+```
diff --git a/.github/skills/testing-functions/SKILL.md b/.github/skills/testing-functions/SKILL.md
new file mode 100644
index 0000000..f347b1b
--- /dev/null
+++ b/.github/skills/testing-functions/SKILL.md
@@ -0,0 +1,239 @@
+---
+name: testing-functions
+description: |
+  Tests pure functions, utilities, and logic with Vitest.
+  Input: Function/module to test.
+  Output: Test file with unit tests for all cases.
+---
+
+# Testing Functions
+
+Creates unit tests for pure functions, utilities, and business logic.
+
+## Preconditions
+
+- Function/module exists
+- Function is testable (ideally pure — same input → same output)
+
+## Algorithm
+
+```markdown
+1. Create test file:
+   - [ ] Create `[filename].test.ts` next to source
+   - [ ] Import function(s) to test
+
+2. Identify test cases:
+   - [ ] Happy path (normal inputs)
+   - [ ] Edge cases (empty, null, boundaries)
+   - [ ] Error cases (invalid inputs)
+
+3. Write tests:
+   - [ ] Use descriptive `it()` names
+   - [ ] One assertion per test (usually)
+   - [ ] Group related tests in `describe()`
+
+4. Run and verify:
+   - [ ] Run `bun run test [file]`
+```
+
+## Template: Basic Function Test
+
+```typescript
+// lib/utils/format.test.ts
+import { describe, it, expect } from "vitest";
+import { formatBytes, formatDuration, truncate } from "./format";
+
+describe("formatBytes", () => {
+  it("formats bytes correctly", () => {
+    expect(formatBytes(0)).toBe("0 B");
+    expect(formatBytes(1024)).toBe("1 KB");
+    expect(formatBytes(1048576)).toBe("1 MB");
+  });
+
+  it("handles large values", () => {
+    expect(formatBytes(1073741824)).toBe("1 GB");
+  });
+
+  it("rounds to 2 decimal places", () => {
+    expect(formatBytes(1536)).toBe("1.5 KB");
+  });
+});
+
+describe("truncate", () => {
+  it("returns string unchanged if under limit", () => {
+    expect(truncate("hello", 10)).toBe("hello");
+  });
+
+  it("truncates with ellipsis", () => {
+    expect(truncate("hello world", 8)).toBe("hello...");
+  });
+
+  it("handles empty string", () => {
+    expect(truncate("", 10)).toBe("");
+  });
+});
+```
+
+## Template: Validation Logic
+
+```typescript
+// lib/config/models.test.ts
+import { describe, it, expect } from "vitest";
+import { MODEL_REGISTRY, getModel, getModelConstraints } from "./models";
+
+describe("MODEL_REGISTRY", () => {
+  it("contains expected image models", () => {
+    expect(MODEL_REGISTRY.flux).toBeDefined();
+    expect(MODEL_REGISTRY.flux.type).toBe("image");
+  });
+
+  it("contains expected video models", () => {
+    expect(MODEL_REGISTRY.veo).toBeDefined();
+    expect(MODEL_REGISTRY.veo.type).toBe("video");
+  });
+
+  it("all models have required fields", () => {
+    Object.values(MODEL_REGISTRY).forEach((model) => {
+      expect(model.id).toBeDefined();
+      expect(model.displayName).toBeDefined();
+      expect(model.type).toMatch(/^(image|video)$/);
+      expect(model.constraints).toBeDefined();
+    });
+  });
+});
+
+describe("getModel", () => {
+  it("returns model by ID", () => {
+    const model = getModel("flux");
+    expect(model?.displayName).toBe("Flux Schnell");
+  });
+
+  it("returns undefined for unknown model", () => {
+    expect(getModel("unknown")).toBeUndefined();
+  });
+
+  it("is case-insensitive", () => {
+    expect(getModel("FLUX")).toEqual(getModel("flux"));
+  });
+});
+```
+
+## Template: Async Function
+
+```typescript
+// lib/api/client.test.ts
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { fetchWithRetry } from "./client";
+
+describe("fetchWithRetry", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns data on success", async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ data: "test" }),
+    });
+
+    const result = await fetchWithRetry("/api/test");
+    expect(result).toEqual({ data: "test" });
+  });
+
+  it("retries on 5xx errors", async () => {
+    global.fetch = vi
+      .fn()
+      .mockResolvedValueOnce({ ok: false, status: 500 })
+      .mockResolvedValueOnce({ ok: true, json: () => ({ data: "test" }) });
+
+    const result = await fetchWithRetry("/api/test");
+    
+    expect(fetch).toHaveBeenCalledTimes(2);
+    expect(result).toEqual({ data: "test" });
+  });
+
+  it("throws on 4xx errors without retry", async () => {
+    global.fetch = vi.fn().mockResolvedValue({ ok: false, status: 400 });
+
+    await expect(fetchWithRetry("/api/test")).rejects.toThrow();
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+## Existing Test Files (Reference)
+
+| File | Tests |
+|------|-------|
+| `lib/config/models.test.ts` | Model registry validation |
+| `lib/config/resolution-tiers.test.ts` | Resolution calculations |
+| `lib/config/standard-resolutions.test.ts` | Resolution presets |
+| `convex/lib/pollinations.test.ts` | API URL building |
+| `convex/lib/retry.test.ts` | Retry logic |
+| `convex/lib/r2.test.ts` | Storage helpers |
+| `convex/rateLimits.test.ts` | Rate limiting |
+
+## Test Patterns
+
+### Table-Driven Tests
+
+```typescript
+it.each([
+  [768, 768, true],    // square within limit
+  [1024, 768, true],   // landscape within limit
+  [2048, 2048, false], // exceeds max pixels
+])("validates dimensions (%i x %i) = %s", (width, height, expected) => {
+  expect(isValidDimension(width, height)).toBe(expected);
+});
+```
+
+### Error Testing
+
+```typescript
+it("throws on invalid input", () => {
+  expect(() => parseConfig(null)).toThrow("Config is required");
+});
+
+// Async errors
+it("rejects with error message", async () => {
+  await expect(fetchData("invalid")).rejects.toThrow(/not found/i);
+});
+```
+
+### Snapshot Testing
+
+```typescript
+it("generates correct config", () => {
+  const config = buildConfig({ model: "flux", width: 768 });
+  expect(config).toMatchSnapshot();
+});
+```
+
+## Guardrails
+
+- **Test pure logic** — no DOM, no React
+- **Isolated tests** — each test independent
+- **Mock external deps** — fetch, timers, env vars
+- **No implementation details** — test inputs/outputs
+- **If tests fail for unrelated reasons**, report and stop
+
+## Output Format
+
+```markdown
+## Summary
+Added tests for `[module/function]`.
+
+## Test Cases
+- [x] handles normal input
+- [x] handles edge case: empty
+- [x] handles edge case: max value
+- [x] throws on invalid input
+
+## Coverage
+- Functions tested: `formatBytes`, `truncate`
+- Edge cases covered: empty, null, boundaries
+
+## Verification
+- `bun run test [file]` passed ✅
+- [N] tests, [M] assertions
+```
diff --git a/.github/skills/writing-and-authoring-skills/SKILL.md b/.github/skills/writing-and-authoring-skills/SKILL.md
new file mode 100644
index 0000000..cb380df
--- /dev/null
+++ b/.github/skills/writing-and-authoring-skills/SKILL.md
@@ -0,0 +1,240 @@
+They basically treat a `SKILL.md` as “how I, a senior, would reliably do X in this repo” written down in a way a model can’t misunderstand.
+
+Under the Agent Skills standard, a skill is a folder with a `SKILL.md` that packages metadata + instructions + optional scripts/resources, and the agent learns “when” and “how” to use it. ([Agent Skills][1]) Claude Code, Codex CLI, etc. then auto-load those skills and apply them whenever the description matches the task. ([OpenAI Developers][2])
+
+Let’s talk about the mindset and then the concrete approach.
+
+---
+
+## Mindset: how seniors think about skills
+
+### 1. Skills as “frozen workflows”, not magic prompts
+
+Senior devs don’t think “let’s give the agent more creativity.” They think:
+
+> “What exact steps do I follow when I do this manually, and how can I encode that so the agent can’t skip or improvise the dangerous parts?”
+
+So each skill is:
+
+* **Narrow** – “Add a REST endpoint in service X” rather than “build backend stuff”.
+* **Deterministic** – same inputs → same general flow.
+* **Opinionated** – it encodes team conventions, not generic best practices.
+
+This matches your observation: they already have strong priors on what “correct” looks like, so the skill just automates that workflow.
+
+---
+
+### 2. Skills as extensions of *their* judgment, not a replacement
+
+They assume:
+
+* *The model is good at pattern matching + glue code.*
+* *The human is still the arbiter of architecture, tradeoffs, and ‘is this actually safe?’*
+
+So the skill:
+
+* **Pushes verification work onto the agent** (`rg`, tests, linters, typechecks, reading related files).
+* **Surfaces artifacts for the human** (summaries, diffs, checklists) so review is fast and high-signal.
+
+The senior’s job becomes designing the skill so that, when they skim the output, it already feels like something they might have written.
+
+---
+
+### 3. Skills as small, composable “lego blocks”
+
+Modern agent stacks treat skills as modular capabilities: each skill is a specialist (e.g. “write tests for an existing change”, “migrate a DB column”, “update API docs”). ([Claude Developer Platform][3])
+
+With 10–20 terminals going, you’re usually seeing some combination of:
+
+* Different **repos/services** each with their own local skills.
+* Different **modes** in the same repo – exploration, refactor, test-writing, PR-prepping, migration, etc.
+* Agents that **chain skills** (e.g. “code search skill → refactor skill → test skill → PR skill”).
+
+Seniors design skills assuming they’ll be composed like this, so each one has a clear contract and narrow surface area.
+
+---
+
+## Approach: how to actually craft a SKILL.md
+
+The Agent Skills spec itself pushes you toward “progressive disclosure”: short metadata; more detailed instructions when the skill is activated; deeper resources/scripts only when needed. ([Agent Skills][1]) Good authors lean into that.
+
+Here’s how they typically approach it.
+
+---
+
+### Step 1: Start from a real workflow you already do well
+
+Pick something you do often and consistently:
+
+* “Add a new feature flag.”
+* “Add a REST endpoint and wire it through to the frontend.”
+* “Fix a bug and add regression tests.”
+* “Do a PR review using our standards.”
+
+Then ask: *If I had to explain this to a sharp but junior dev so they can’t mess it up, what would I write?*
+That text is your raw material for `SKILL.md`.
+
+---
+
+### Step 2: Define a crisp contract in the metadata
+
+In the frontmatter / metadata block, good skills are ruthless about:
+
+* **Name** – specific, action-oriented (e.g. `create-rest-endpoint`, `typescript-api-refactor`).
+* **Description / when to use** – 2–3 lines that let the agent route correctly:
+
+  * What it does.
+  * What it *doesn’t* do.
+  * Key constraints (language, framework, repo assumptions).
+* **Inputs & outputs** – what the agent should expect and what it must produce:
+
+  * “Input: a description of the new endpoint and existing route file.”
+  * “Output: code changes applied + updated tests + brief summary.”
+
+This makes the skill easy for the agent to discover and for your future self to understand.
+
+---
+
+### Step 3: Encode your algorithm, not vibes
+
+In the `SKILL.md` body, seniors write an **algorithm**, not just “best practices”:
+
+Instead of:
+
+> “Follow REST best practices and add tests.”
+
+They write something closer to:
+
+1. Locate the main router file in `src/api/routes/*.ts`.
+2. Identify the module that matches the feature area. If unclear, ask the user which module to extend before continuing.
+3. Add a new route handler that:
+
+   * Accepts `X` and `Y` parameters.
+   * Validates inputs using `zod` schemas from `src/api/schemas`.
+   * Calls the existing service function or creates a new one if needed.
+4. Update or create tests:
+
+   * Use `jest` in `__tests__/api`.
+   * For new handlers, add at least one happy-path and one failure-path test.
+5. Run `npm test -- <matching test file>` and include the output. If tests fail, fix them before returning.
+6. In your final response:
+
+   * Summarize the changes.
+   * Paste the relevant diffs.
+   * Note any TODOs or follow-up questions.
+
+Key patterns:
+
+* **Checklists** – reduce ambiguity.
+* **Conditionals** – “if schema doesn’t exist, create it here”.
+* **Explicit commands** – tell the agent what shell commands / tools to run.
+* **Forced verification** – tests, builds, searches must be run, not “suggested”.
+
+You’re basically teaching the agent your **internal SOP**.
+
+---
+
+### Step 4: Bake in codebase-specific context
+
+Skills shine when they encode things a generic model doesn’t know:
+
+* **Directory structure & naming** – “React components live in `src/components`, tests in `src/components/__tests__`.”
+* **Conventions** – “Use our `useApi` hook, don’t call `fetch` directly.”
+* **Safety rules** – “Never write raw SQL; always use the query builder in `db/queries.ts`.”
+* **Edge cases** – “This service is multi-tenant; never assume a single org. Always pass `tenantId` through.”
+
+This is where high-skill engineers get a lot of leverage: they know the sharp edges and encode that knowledge so the agent avoids them.
+
+---
+
+### Step 5: Guardrails: when *not* to use the skill & how to fail
+
+Senior authors are explicit about **non-goals** and failure modes:
+
+* “Do not use this skill for database schema changes; use `db-migration.skill` instead.”
+* “If the project doesn’t appear to be TypeScript/React, stop and ask the user.”
+* “If running tests or `npm run lint` fails for reasons unrelated to your changes, report that and stop instead of trying to fix the whole repo.”
+
+This stops the model from over-extending and doing heroic (dangerous) things.
+
+---
+
+### Step 6: Specify output format for fast human review
+
+They optimize the skill for **their own review loop**:
+
+* Structured final output:
+
+  * `## Summary`
+  * `## Files changed`
+  * `## Diffs`
+  * `## Tests`
+* Clear markers of confidence:
+
+  * “All tests passed ✅” vs. “Tests failing ❌ – needs human follow-up.”
+* Call out open questions, TODOs, and assumptions.
+
+Remember your earlier point: seniors are fast at verification. A good skill hands them exactly the evidence they need.
+
+---
+
+### Step 7: Iterate like code, not like a one-off prompt
+
+The good ones treat skills as **versioned artifacts**:
+
+* They run the skill in real work.
+* When the agent misbehaves or gets stuck, they:
+
+  * Add a clarifying step.
+  * Tighten a heuristic (“always search for existing examples before creating a new pattern”).
+  * Split a too-broad skill into two narrower ones.
+
+The SKILL.md becomes a living document of what’s currently “the right way” to do a task in that codebase.
+
+---
+
+## How this plays with 10–20 terminals and deep stacks
+
+When you see someone with an army of terminals, imagine something like:
+
+* Terminal 1-3: repo A (backend), with:
+
+  * `bugfix.skill`
+  * `api-endpoint.skill`
+  * `db-migration.skill`
+* Terminal 4-6: repo B (frontend), with:
+
+  * `ui-component.skill`
+  * `accessibility-review.skill`
+  * `storybook-docs.skill`
+* Terminal 7-10: cross-cutting:
+
+  * `pr-review.skill`
+  * `commit-message.skill`
+  * `changelog-update.skill`
+  * `perf-investigation.skill`
+
+Each skill is **surgical**. The senior knows which combination to invoke for a given problem, and the skills themselves encode how to interact with tests, linters, and the project’s layout.
+
+---
+
+## A short mindset checklist when you’re writing a skill
+
+When you sit down to craft a SKILL.md, think:
+
+1. **What narrow workflow am I capturing?**
+   If it’s more than one, split it.
+2. **What must be true before/after?**
+   Preconditions, invariants, tests.
+3. **What exact steps do I follow?**
+   Turn that into an algorithm, not prose advice.
+4. **What repo-specific traps can I prevent?**
+   Hard-won tribal knowledge goes here.
+5. **What should the agent show me at the end so I can say “yes” in 10–20 seconds?**
+   Shape the output around your review.
+
+That’s the senior-engineer mindset: skills as distilled, reusable engineering judgment. The agents then just become really fast, really obedient juniors running those playbooks for you.
+
+[1]: https://agentskills.io/specification?utm_source=chatgpt.com "Specification - Agent Skills"
+[2]: https://developers.openai.com/codex/skills?utm_source=chatgpt.com "Agent Skills - developers.openai.com"
+[3]: https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview?utm_source=chatgpt.com "Agent Skills - Claude Docs"
diff --git a/.github/skills/writing-convex-functions/SKILL.md b/.github/skills/writing-convex-functions/SKILL.md
new file mode 100644
index 0000000..3453735
--- /dev/null
+++ b/.github/skills/writing-convex-functions/SKILL.md
@@ -0,0 +1,235 @@
+---
+name: writing-convex-functions
+description: |
+  Creates Convex queries, mutations, or actions for database operations.
+  Input: Function type (query/mutation/action), table, and operation.
+  Output: Typed Convex function with args validation.
+---
+
+# Writing Convex Functions
+
+Creates queries (read), mutations (write), or actions (external APIs) in Convex.
+
+## Preconditions
+
+- Table exists in `convex/schema.ts`
+- User has provided: function type, table name, operation purpose
+
+## Decision: Which Type?
+
+| Need | Type | Can Access |
+|------|------|------------|
+| Read data (reactive) | `query` | `ctx.db.query()`, `ctx.db.get()` |
+| Write data | `mutation` | `ctx.db.insert/patch/delete()` |
+| Call external API | `action` | `fetch()`, but NOT `ctx.db` directly |
+| Scheduled job | `action` | Use with `ctx.scheduler` |
+
+## Algorithm
+
+```markdown
+1. Create or open function file:
+   - [ ] File: `convex/[tableName].ts` (or existing file)
+   - [ ] Import `query`, `mutation`, or `action` from `./_generated/server`
+
+2. Define function:
+   - [ ] Add `args` with `v.*` validators
+   - [ ] Implement `handler` with correct return type
+   - [ ] Check auth if user-specific
+
+3. Export function:
+   - [ ] Use descriptive name: `get`, `list`, `create`, `update`, `delete`
+   - [ ] Named export for client access
+
+4. Verify:
+   - [ ] Run `bun run build` to check types
+   - [ ] Test in Convex dashboard
+```
+
+## Template: Query
+
+```typescript
+// convex/users.ts
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+// Get single record by ID
+export const get = query({
+  args: { id: v.id("users") },
+  handler: async (ctx, args) => {
+    return await ctx.db.get(args.id);
+  },
+});
+
+// List with filter
+export const listByStatus = query({
+  args: { status: v.string() },
+  handler: async (ctx, args) => {
+    return await ctx.db
+      .query("generatedImages")
+      .withIndex("by_status", (q) => q.eq("status", args.status))
+      .order("desc")
+      .take(50);
+  },
+});
+
+// User-scoped query
+export const listMine = query({
+  args: {},
+  handler: async (ctx) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) return [];
+    
+    return await ctx.db
+      .query("generatedImages")
+      .withIndex("by_user", (q) => q.eq("userId", identity.subject))
+      .order("desc")
+      .collect();
+  },
+});
+```
+
+## Template: Mutation
+
+```typescript
+// convex/generatedImages.ts
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+// Create record
+export const create = mutation({
+  args: {
+    prompt: v.string(),
+    model: v.string(),
+    width: v.number(),
+    height: v.number(),
+  },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Unauthenticated");
+
+    return await ctx.db.insert("generatedImages", {
+      ...args,
+      userId: identity.subject,
+      status: "pending",
+      createdAt: Date.now(),
+    });
+  },
+});
+
+// Update record
+export const updateStatus = mutation({
+  args: { 
+    id: v.id("generatedImages"),
+    status: v.union(v.literal("completed"), v.literal("failed")),
+  },
+  handler: async (ctx, args) => {
+    await ctx.db.patch(args.id, { 
+      status: args.status,
+      updatedAt: Date.now(),
+    });
+  },
+});
+
+// Delete record
+export const remove = mutation({
+  args: { id: v.id("generatedImages") },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Unauthenticated");
+    
+    const record = await ctx.db.get(args.id);
+    if (!record || record.userId !== identity.subject) {
+      throw new Error("Not found or unauthorized");
+    }
+    
+    await ctx.db.delete(args.id);
+  },
+});
+```
+
+## Template: Action
+
+```typescript
+// convex/singleGenerationProcessor.ts
+import { action } from "./_generated/server";
+import { v } from "convex/values";
+import { api } from "./_generated/api";
+
+export const processGeneration = action({
+  args: { generationId: v.id("generatedImages") },
+  handler: async (ctx, args) => {
+    // 1. Get data via runQuery (actions can't access db directly)
+    const generation = await ctx.runQuery(api.generatedImages.get, {
+      id: args.generationId,
+    });
+    if (!generation) throw new Error("Not found");
+
+    // 2. Call external API
+    const response = await fetch("https://api.pollinations.ai/...");
+    const result = await response.json();
+
+    // 3. Update via runMutation
+    await ctx.runMutation(api.generatedImages.updateStatus, {
+      id: args.generationId,
+      status: "completed",
+    });
+
+    return result;
+  },
+});
+```
+
+## Auth Pattern
+
+```typescript
+// Always check auth for user-specific operations
+const identity = await ctx.auth.getUserIdentity();
+if (!identity) {
+  throw new Error("Unauthenticated");
+}
+const userId = identity.subject; // Clerk user ID
+```
+
+## Lib Utilities
+
+| File | Purpose |
+|------|---------|
+| `convex/lib/pollinations.ts` | Build API URLs |
+| `convex/lib/r2.ts` | Cloudflare R2 storage |
+| `convex/lib/retry.ts` | Retry with backoff |
+| `convex/lib/subscription.ts` | Subscription checks |
+
+## Guardrails
+
+- **Always validate args** with `v.*` validators
+- **Always check auth** for user-scoped data
+- **Never use `any`** in args or return types
+- **Actions can't access `ctx.db`** — use `ctx.runQuery`/`ctx.runMutation`
+- **If index doesn't exist**, add it in schema first
+
+## Output Format
+
+```markdown
+## Summary
+Added `[functionType]` `[name]` for [purpose].
+
+## Function
+```typescript
+export const myFunction = query({
+  args: { ... },
+  handler: async (ctx, args) => { ... },
+});
+```
+
+## Usage (Client)
+```tsx
+const data = useQuery(api.table.myFunction, { arg: value });
+```
+
+## Verification
+- Types check ✅
+- Tested in dashboard ✅
+
+## Related
+- Index used: `by_field` ✅
+```
diff --git a/.github/skills/writing-server-actions/SKILL.md b/.github/skills/writing-server-actions/SKILL.md
new file mode 100644
index 0000000..fce4d8d
--- /dev/null
+++ b/.github/skills/writing-server-actions/SKILL.md
@@ -0,0 +1,214 @@
+---
+name: writing-server-actions
+description: |
+  Creates Next.js Server Actions for form mutations and server-side operations.
+  Input: Action purpose and input schema.
+  Output: Server action file with validation and error handling.
+---
+
+# Writing Server Actions
+
+Creates Next.js Server Actions for mutations from forms or client code.
+
+## Preconditions
+
+- Action involves data mutation (create, update, delete)
+- Data validation is required (use Zod)
+
+## When to Use
+
+| Scenario | Use |
+|----------|-----|
+| Form submission | Server Action |
+| Calling Convex from server | Server Action + `fetchMutation` |
+| External API call from server | Server Action |
+| Real-time client data | `useMutation` (Convex) instead |
+
+## Algorithm
+
+```markdown
+1. Create action file:
+   - [ ] Create `app/actions/[name].ts`
+   - [ ] Add `'use server'` directive at top
+
+2. Define schema:
+   - [ ] Use Zod for input validation
+   - [ ] Handle both FormData and direct args
+
+3. Implement handler:
+   - [ ] Parse and validate input
+   - [ ] Check auth if needed
+   - [ ] Perform mutation (Convex/external)
+   - [ ] Return typed result
+
+4. Connect to form:
+   - [ ] Use `action={serverAction}` on form
+   - [ ] Or call via `startTransition`
+
+5. Verify:
+   - [ ] Test with form submission
+   - [ ] Check error handling
+```
+
+## Template: Basic Action
+
+```ts
+// app/actions/save-profile.ts
+'use server';
+
+import { z } from 'zod';
+import { auth } from '@clerk/nextjs/server';
+
+const schema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  bio: z.string().max(500).optional(),
+});
+
+export type SaveProfileResult = 
+  | { success: true; message: string }
+  | { success: false; error: string };
+
+export async function saveProfile(formData: FormData): Promise<SaveProfileResult> {
+  // 1. Check auth
+  const { userId } = await auth();
+  if (!userId) {
+    return { success: false, error: 'Unauthorized' };
+  }
+
+  // 2. Validate input
+  const parsed = schema.safeParse({
+    name: formData.get('name'),
+    bio: formData.get('bio'),
+  });
+
+  if (!parsed.success) {
+    return { success: false, error: parsed.error.errors[0].message };
+  }
+
+  // 3. Perform mutation
+  try {
+    // Call Convex or database here
+    return { success: true, message: 'Profile saved' };
+  } catch (error) {
+    return { success: false, error: 'Failed to save profile' };
+  }
+}
+```
+
+## Template: With Convex
+
+```ts
+// app/actions/create-prompt.ts
+'use server';
+
+import { z } from 'zod';
+import { fetchMutation } from 'convex/nextjs';
+import { api } from '@/convex/_generated/api';
+import { auth } from '@clerk/nextjs/server';
+
+const schema = z.object({
+  prompt: z.string().min(1).max(2000),
+  title: z.string().min(1).max(100),
+});
+
+export async function createPrompt(formData: FormData) {
+  const { userId } = await auth();
+  if (!userId) throw new Error('Unauthorized');
+
+  const parsed = schema.safeParse({
+    prompt: formData.get('prompt'),
+    title: formData.get('title'),
+  });
+
+  if (!parsed.success) {
+    return { error: parsed.error.flatten() };
+  }
+
+  const id = await fetchMutation(api.promptLibrary.create, {
+    prompt: parsed.data.prompt,
+    title: parsed.data.title,
+  });
+
+  return { success: true, id };
+}
+```
+
+## Client Usage
+
+### In Form
+
+```tsx
+// components/profile-form.tsx
+'use client';
+
+import { useActionState } from 'react';
+import { saveProfile } from '@/app/actions/save-profile';
+
+export function ProfileForm() {
+  const [state, formAction, isPending] = useActionState(saveProfile, null);
+
+  return (
+    <form action={formAction}>
+      <input name="name" required />
+      {state?.error && <p className="text-destructive">{state.error}</p>}
+      <button type="submit" disabled={isPending}>
+        {isPending ? 'Saving...' : 'Save'}
+      </button>
+    </form>
+  );
+}
+```
+
+### Programmatic
+
+```tsx
+'use client';
+
+import { useTransition } from 'react';
+import { createPrompt } from '@/app/actions/create-prompt';
+
+export function SaveButton() {
+  const [isPending, startTransition] = useTransition();
+
+  const handleClick = () => {
+    startTransition(async () => {
+      const formData = new FormData();
+      formData.set('prompt', 'My prompt');
+      formData.set('title', 'My title');
+      await createPrompt(formData);
+    });
+  };
+
+  return <button onClick={handleClick}>Save</button>;
+}
+```
+
+## Guardrails
+
+- **Always validate** input with Zod before processing
+- **Always check auth** for user-specific actions
+- **Never expose raw errors** to client — sanitize messages
+- **Return typed results** — not void or any
+- **If Convex needed**, use `fetchMutation` not direct db access
+
+## Output Format
+
+```markdown
+## Summary
+Created server action `[name]` for [purpose].
+
+## Files Created
+- `app/actions/[name].ts`
+
+## Schema
+- `name: string` (required, min 2)
+- `bio: string` (optional, max 500)
+
+## Returns
+- `{ success: true, message: string }` on success
+- `{ success: false, error: string }` on failure
+
+## Usage
+- Form: `<form action={serverAction}>`
+- Programmatic: `startTransition(() => action(formData))`
+```
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..a0200f0
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,137 @@
+---
+---
+
+# .agent — Development Guidelines
+
+## Stack
+
+- Next.js (App Router, latest stable patch)
+- React 19
+- TypeScript (strict)
+- Bun (package manager/runtime)
+- Convex
+- shadcn/ui + Tailwind CSS (v4)
+- Radix UI
+- TanStack Query
+- Clerk
+- Zod
+- Vitest + React Testing Library
+
+---
+
+## Tooling & Commands
+
+- Dev: `bun run dev`
+- Build: `bun run build` (runs lint, then `next build`)
+- Start: `bun run start`
+- Lint: `bun run lint` / `bun run lint:fix`
+- Typecheck: `bun run typecheck`
+- Tests: `bun run test` / `bun run test:watch` / `bun run test:coverage`
+
+---
+
+## Defaults
+
+- **Server Components by default.** Add `'use client'` only at the leaves that need interactivity/hooks.
+- **Convex is the source of truth** for server state; local state is for UI-only concerns.
+- **Always leverage typescript**; avoid usage of `any` which defeats the point of using Typescript.
+- **Ensure** new or updated code includes idiomatic Vitest + RTL tests.
+
+---
+
+## Components & Composition
+
+- Prefer **small, focused components**. Split when a component mixes concerns or becomes hard to scan.
+- **Presentational components:** props in → JSX out (no data fetching; minimal/no app logic).
+- **Feature components:** coordinate data + state + composition.
+- Prefer **composition** (children, slots) over giant prop APIs.
+
+---
+
+## State & Side Effects
+
+- Keep state **closest to where it’s used**; lift only for shared ownership.
+- Don’t mirror Convex query results into local state. Store **UI state** (selection, filters, draft text), not server data.
+- Avoid `useEffect` for app data fetching. Use it for **browser-only side effects** (subscriptions, observers, localStorage).
+
+---
+
+## Convex + Next.js (Best Practice Patterns)
+
+- **Client reactivity:** `useQuery` / `useMutation` in Client Components.
+- **SSR + reactivity:** in a Server Component, `preloadQuery(...)` and pass the payload to a Client Component using `usePreloadedQuery(...)`.
+- **Server-only (non-reactive) rendering:** `fetchQuery(...)` in Server Components.
+- **Server Actions / Route Handlers:** call Convex via `fetchMutation` / `fetchAction` when you must mutate from the server boundary (e.g., form action, webhook, route handler).
+- **Optimistic UI:** prefer Convex optimistic updates (`useMutation(...).withOptimisticUpdate(...)`) over duplicating server logic in ad-hoc local state.
+- **Consistency:** avoid multiple `preloadQuery` calls on the same page; consolidate queries or design around a single preload.
+
+---
+
+## Next.js App Router Conventions
+
+- Use `loading.tsx` and `error.tsx` for route-segment UX.
+- Use `not-found.tsx` for 404 states.
+- Prefer colocating components with the route/feature that owns them; extract to shared only when reused.
+
+---
+
+## React 19 Usage
+
+- Prefer **Actions + `useActionState`** for form submission state when using form actions.
+- Use `useOptimistic` for instant UI feedback when appropriate.
+- Use `useFormStatus` inside design-system components that need form pending state.
+- `use` can read a Promise/Context during render (only where Suspense semantics make sense).
+
+---
+
+## TypeScript (Strict, Practical)
+
+- Let inference work; **export explicit prop types** for shared/public components.
+- No `any`. Use `unknown` and narrow.
+- Avoid `as` casts; prefer `satisfies`, generics, and runtime validation.
+- `@ts-expect-error` allowed only with a comment explaining why + link/TODO to remove.
+
+---
+
+## Code Style & Quality (ESLint)
+
+- No `any`, unsafe assignments/calls/returns, or floating promises.
+- Keep modules under 400 lines (tests up to 600 lines).
+- Complexity warning at 20, max depth 5, max params 8.
+- `no-console` (allow `warn`/`error`), `no-debugger`.
+- Prefer `const`, avoid `var`, favor optional chaining and nullish coalescing.
+
+---
+
+## Imports & Naming
+
+- Use `@/` path aliases for app imports when possible.
+- Keep files and folders in kebab-case.
+- Use PascalCase for React components and TypeScript types.
+- Prefix hooks with `use`.
+- Use UPPER_SNAKE_CASE for module-level constants.
+
+---
+
+## Error Handling
+
+- Prefer typed errors from `lib/errors` (e.g., `PollinationsApiError`, `getErrorMessage`, `isApiError`).
+- Validate external data with Zod schemas in `lib/schemas`.
+- Use toast helpers in `lib/errors/toast-errors` for user-facing failures.
+
+---
+
+## Performance
+
+- Minimize client bundles: keep heavy logic/components server-side when possible.
+- Use dynamic imports for non-critical client UI.
+- Use `next/image` for images.
+- Memoization is opt-in: use `memo`/`useMemo`/`useCallback` only when profiling shows value.
+
+---
+
+## Styling (shadcn/ui + Tailwind)
+
+- Use shadcn/ui as the base; extend via composition + variants.
+- Tailwind utilities in JSX; extract repetition into components, not `@apply`.
+- Theme via CSS variables; keep design tokens centralized.
diff --git a/LINT_STATUS.md b/LINT_STATUS.md
new file mode 100644
index 0000000..2f863e0
--- /dev/null
+++ b/LINT_STATUS.md
@@ -0,0 +1,80 @@
+# ESLint Configuration & Fixes Summary
+
+## Configuration Changes
+
+### Strict Rules Added
+- `@typescript-eslint/no-explicit-any`: error
+- `@typescript-eslint/no-unsafe-assignment`: error  
+- `@typescript-eslint/no-unsafe-member-access`: error
+- `@typescript-eslint/no-unsafe-call`: error
+- `@typescript-eslint/no-unsafe-return`: error
+- `@typescript-eslint/no-floating-promises`: error
+- `@typescript-eslint/no-misused-promises`: error
+- `@typescript-eslint/switch-exhaustiveness-check`: error
+- `max-lines`: 400 (600 for tests)
+- `complexity`: warn at 20
+- `max-depth`: warn at 5
+- `max-params`: error at 8
+
+### Files Fixed (Production Code)
+
+#### API Routes
+- ✅ `app/api/images/delete-bulk/route.ts` - Typed error handling (`unknown`)
+- ✅ `app/api/images/delete/route.ts` - Typed error handling (`unknown`)
+
+#### Components
+- ✅ `app/pricing/checkout-button.tsx` - Typed error, wrapped async onClick with `void`
+- ✅ `components/ui/image-card.tsx` - Wrapped async onClick handlers with `void`
+- ✅ `components/ui/masonry-grid.tsx` - Added proper type guards for image props
+- ✅ `components/ui/media-player.tsx` - Wrapped async onClick with `void`
+
+## Remaining Issues
+
+### Test Files (1200+ errors)
+Most errors are in test files due to:
+- Mock functions returning `any` from vitest
+- Type assertions needed for test contexts
+- `@ts-expect-error` directives needing descriptions
+
+**Recommendation**: These are acceptable in tests. Consider adding per-file `eslint-disable` comments for specific rules in test files if needed, but the strict config encourages proper typing even in tests.
+
+### Convex Backend Files (200+ errors)
+Issues in `convex/` directory:
+- API response parsing without proper type guards
+- Error handling with `any` types
+- Files exceeding 400 lines (need splitting)
+- Complex functions exceeding complexity limits
+
+**Files needing attention**:
+- `convex/batchGeneration.ts` (449 lines, unsafe any)
+- `convex/batchProcessor.ts` (unsafe member access on API responses)
+- `convex/generatedImages.ts` (803 lines - needs splitting)
+- `convex/lib/promptInference.ts` (unsafe any in AI response parsing)
+- `convex/lib/providerHealth.ts` (complexity 25, unsafe any)
+
+### Large Files Needing Refactoring
+- `components/ui/sidebar.tsx` (693 lines)
+- `lib/config/models.ts` (520 lines)
+- `lib/seo-config.ts` (933 lines)
+- `lib/errors/pollinations-error.test.ts` (621 lines)
+- `lib/schemas/pollinations.schema.test.ts` (464 lines)
+
+## Best Practices Applied
+
+1. **Error Handling**: Changed `catch (error)` to `catch (error: unknown)` for type safety
+2. **Async Event Handlers**: Wrapped with `void` operator: `onClick={() => void asyncFn()}`
+3. **Type Guards**: Added proper type guards instead of type assertions
+4. **No Test Leniency**: Maintained strict rules for tests to encourage proper typing
+
+## Next Steps
+
+1. **Convex Files**: Add proper type definitions for API responses
+2. **Large Files**: Split into smaller, focused modules
+3. **Complex Functions**: Refactor to reduce cyclomatic complexity
+4. **Test Files**: Add proper types for mocks or use `eslint-disable-next-line` with justification
+
+## Impact
+
+- Errors reduced from 2972 to 1448 (51% reduction)
+- All production UI/API code now type-safe
+- Remaining errors are in backend/test code that needs systematic refactoring
diff --git a/build-errors.md b/build-errors.md
new file mode 100644
index 0000000..5c0efba
--- /dev/null
+++ b/build-errors.md
@@ -0,0 +1,291 @@
+21:30:01.482    52:60  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.482   104:50  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.482   121:56  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.482    7:39  error    Unexpected any. Specify a different type                                                                                                                                                                                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.482    8:9   warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+21:30:01.483   18:23  error    Unexpected any. Specify a different type                                                                                                                                                                                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.484    7:54  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.484   18:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.484   22:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.485    7:38  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.485   10:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.485   14:23  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.486    7:33  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.486    8:38  warning  'asChild' is defined but never used       @typescript-eslint/no-unused-vars
+21:30:01.486    8:49  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.486    9:40  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   10:39  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   11:38  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   12:44  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   13:39  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   14:49  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.487   15:58  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.488   20:38  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.488    7:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.488   10:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.489   7:24  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.489   7:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.489   8:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.489   9:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.490   14:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.490   17:23  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.490   20:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.491   16:24  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.492    7:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.492    8:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.492    9:47  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.493   10:37  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.493    7:22  error    Unexpected any. Specify a different type                                                                                                                                                                                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.494    7:30  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+21:30:01.494    7:30  warning  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                                                                                                                                jsx-a11y/alt-text
+21:30:01.494   12:22  warning  'totalSlides' is defined but never used                                                                                                                                                                                                                                                  @typescript-eslint/no-unused-vars
+21:30:01.494   12:37  error    Unexpected any. Specify a different type                                                                                                                                                                                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.495    7:25  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.495   12:27  warning  'totalSlides' is defined but never used   @typescript-eslint/no-unused-vars
+21:30:01.495   12:42  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496     7:30  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496    51:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496    63:28  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496    96:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496    97:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496   147:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.496   148:41  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   165:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   166:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   183:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   184:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   207:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   208:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   228:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.497   229:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.498   244:55  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.498   269:36  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.498   270:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.498     6:24  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.498     7:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    11:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    37:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    46:71  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    54:79  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    64:79  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    77:84  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    84:84  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.499    91:84  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.500   161:91  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.500   180:47  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.500    6:24  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.500    7:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.501   11:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.501   33:39  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.501     6:24  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.501     7:21  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.501     8:32  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.502     9:29  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.502    25:18  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.502    74:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.502    88:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.502   118:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.502   133:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.502   134:78  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.502   141:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.503   142:78  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.503   152:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.503   153:70  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.503   157:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.503   158:70  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.503   165:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.503   183:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.503   200:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.504   201:69  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.504   210:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.504   211:76  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.504   226:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.504   227:77  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.504   244:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.504   246:45  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.505   262:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.505   264:38  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.505   287:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.505   310:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.505   312:34  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.505   32:15  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.506   65:28  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.506   66:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.506     3:25  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.506     4:28  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.506     5:17  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507     6:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    30:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    31:15  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    48:47  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    49:56  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    58:44  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.507    59:42  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508    69:50  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508    71:33  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508    80:56  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508    82:33  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508    99:42  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508   112:31  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.508   127:40  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.509   146:40  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.509   154:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.509   17:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    30:52  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    30:76  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    42:11  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    73:26  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    92:74  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511    92:98  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.511   110:26  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.512   11:26  error  Unexpected any. Specify a different type                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.512   22:54  error  Unexpected any. Specify a different type                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.512   55:71  error  The `Function` type accepts any function-like value.
+21:30:01.513   13:30  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.513   42:60  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.513   44:34  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.513   52:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514    6:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514   10:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514   25:54  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514     5:28  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514    29:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.514    47:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    48:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    50:70  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    72:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    73:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    75:70  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    92:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.515    93:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.516    95:70  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.516   107:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.516   109:70  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.516     6:24  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517     7:21  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517    11:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517    37:39  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517    64:95  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517    91:83  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517    98:83  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.517   199:84  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.518   215:89  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.518   228:74  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.518     6:24  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.518     7:21  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.518    11:18  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.519    45:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.519    51:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.519    65:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.519    66:82  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.519    74:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.519    75:82  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.519    83:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.520    94:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.520    95:81  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.520   103:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.520   104:73  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.520   112:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.520   117:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.520   126:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.521     5:25  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.521     6:28  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.521    12:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.521    13:17  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.521    14:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.521    39:50  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.522    58:59  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.522    79:60  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.522    91:60  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.522   102:61  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.522   119:55  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.523     7:24  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.523     8:21  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.523     9:32  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.523    10:29  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.523    33:18  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.523    65:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.523    72:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.523    81:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.524    90:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.524   111:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.524   112:95  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.524   120:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.524   121:95  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.524   141:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.524   174:13  error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.525     6:30  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.525    34:18  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.525    45:42  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.525    53:60  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.525    58:63  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.526    74:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.526    92:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.526    93:74  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.526   101:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.526   102:74  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.526   125:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.527   126:74  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.527   11:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.527   12:19  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.527   56:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.528    5:19  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.528    6:22  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.528   19:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.528     6:22  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.529    21:1   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.529    30:18  error  Unexpected any. Specify a different type                                                                             @typescript-eslint/no-explicit-any
+21:30:01.529    38:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.529    66:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.529   109:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.529   126:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.529   152:9   error  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
+21:30:01.530   17:22  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.530   18:19  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.530   19:27  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.531   32:16  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    39:28  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    40:32  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    49:31  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    49:66  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    65:70  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.532    79:70  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.533    80:26  warning  'e' is defined but never used             @typescript-eslint/no-unused-vars
+21:30:01.533    94:81  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.533   107:81  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.533    37:21  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534    50:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534    80:52  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534    85:51  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534    90:52  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534    97:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534   104:47  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534   105:47  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.534   106:47  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   113:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   115:68  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   131:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   133:61  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   150:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   152:67  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.535   162:18  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536    37:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536    38:18  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536    95:33  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536    96:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536    97:32  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.536   121:33  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   122:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   123:32  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   140:33  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   141:35  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   142:32  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   14:50  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.537   14:65  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.538   31:61  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.538   71:14  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+21:30:01.539   22:19  error  The `Function` type accepts any function-like value.
+21:30:01.539   28:41  error  Unexpected any. Specify a different type                                                                                 @typescript-eslint/no-explicit-any
+21:30:01.698 error: script "lint" exited with code 1
+21:30:01.700 error: script "build" exited with code 1
+21:30:01.766 Error: Command "npx convex deploy --cmd 'bun run build'" exited with 1
\ No newline at end of file
diff --git a/components/debug/limit-tester.test.tsx b/components/debug/limit-tester.test.tsx
new file mode 100644
index 0000000..18fb0dd
--- /dev/null
+++ b/components/debug/limit-tester.test.tsx
@@ -0,0 +1,120 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { LimitTester } from "./limit-tester"
+
+// Mock Next.js Image
+vi.mock("next/image", () => ({
+    default: ({ src, alt, onLoadingComplete, ...props }: { 
+        src: string
+        alt: string
+        onLoadingComplete?: (img: { naturalWidth: number; naturalHeight: number }) => void
+        [key: string]: unknown 
+    }) => (
+        <img 
+            src={src} 
+            alt={alt} 
+            {...props} 
+            data-testid="next-image"
+            onLoad={() => {
+                onLoadingComplete?.({ naturalWidth: 1024, naturalHeight: 1024 })
+            }}
+        />
+    ),
+}))
+
+// Mock Convex hooks
+vi.mock("convex/react", () => ({
+    useQuery: vi.fn(() => undefined),
+    useMutation: vi.fn(() => vi.fn()),
+}))
+
+// Mock pollen auth
+vi.mock("@/lib/pollen-auth", () => ({
+    usePollenApiKey: vi.fn(() => "test-api-key"),
+    usePollenAuthActions: vi.fn(() => ({ authorize: vi.fn() })),
+}))
+
+// Mock hooks
+vi.mock("@/hooks", () => ({
+    useRandomSeed: vi.fn(() => ({ generateSeed: vi.fn(() => 12345) })),
+}))
+
+// Mock sonner toast
+vi.mock("sonner", () => ({
+    toast: { error: vi.fn(), success: vi.fn() },
+}))
+
+describe("LimitTester", () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it("renders the header correctly", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("Model Limit Tester")).toBeInTheDocument()
+    })
+
+    it("renders model selector", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("Model")).toBeInTheDocument()
+    })
+
+    it("renders prompt textarea", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("Prompt")).toBeInTheDocument()
+        const textarea = screen.getByRole("textbox")
+        expect(textarea).toHaveValue("A glitch art masterpiece of a cyberpunk city, extremely detailed")
+    })
+
+    it("renders dimension inputs with default values", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("Width (px)")).toBeInTheDocument()
+        expect(screen.getByText("Height (px)")).toBeInTheDocument()
+        
+        const inputs = screen.getAllByRole("spinbutton")
+        expect(inputs[0]).toHaveValue(1024)
+        expect(inputs[1]).toHaveValue(1024)
+    })
+
+    it("renders quick preset buttons", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("Quick Presets")).toBeInTheDocument()
+        expect(screen.getByText("SQUARE (1:1)")).toBeInTheDocument()
+        expect(screen.getByText("TALL (Portrait)")).toBeInTheDocument()
+        expect(screen.getByText("WIDE (Landscape)")).toBeInTheDocument()
+    })
+
+    it("updates dimensions when preset is clicked", () => {
+        render(<LimitTester />)
+        
+        // Use a unique preset - 2048x2048 only exists in square presets
+        const preset2048 = screen.getByRole("button", { name: "2048x2048" })
+        fireEvent.click(preset2048)
+        
+        const inputs = screen.getAllByRole("spinbutton")
+        expect(inputs[0]).toHaveValue(2048)
+        expect(inputs[1]).toHaveValue(2048)
+    })
+
+    it("displays megapixel calculation", () => {
+        render(<LimitTester />)
+        // 1024 * 1024 = 1,048,576 pixels = 1.05 MP
+        expect(screen.getByText(/Pixels:.*1\.05MP/)).toBeInTheDocument()
+    })
+
+    it("displays aspect ratio", () => {
+        render(<LimitTester />)
+        // 1024 / 1024 = 1.00
+        expect(screen.getByText(/Ratio:.*1\.00/)).toBeInTheDocument()
+    })
+
+    it("renders test generation button", () => {
+        render(<LimitTester />)
+        expect(screen.getByRole("button", { name: "TEST GENERATION" })).toBeInTheDocument()
+    })
+
+    it("shows no results placeholder initially", () => {
+        render(<LimitTester />)
+        expect(screen.getByText("No results yet")).toBeInTheDocument()
+    })
+})
diff --git a/components/gallery/feed-client.test.tsx b/components/gallery/feed-client.test.tsx
index 1aa381d..23d7182 100644
--- a/components/gallery/feed-client.test.tsx
+++ b/components/gallery/feed-client.test.tsx
@@ -335,7 +335,7 @@ describe("FeedClient", () => {
     it("does not call load more when already loading", async () => {
       // Make the server action slow
       mockLoadPublicFeedPage.mockImplementation(
-        () => new Promise<PaginatedFeedResult>((resolve) => setTimeout(() => resolve(mockSecondPage), 100))
+        () => new Promise<PaginatedFeedResult>((resolve) => setTimeout(() => resolve(mockSecondPage), 500))
       );
 
       const user = userEvent.setup();
diff --git a/components/gallery/image-history.test.tsx b/components/gallery/image-history.test.tsx
index f958e25..801864d 100644
--- a/components/gallery/image-history.test.tsx
+++ b/components/gallery/image-history.test.tsx
@@ -22,7 +22,6 @@ vi.mock("@/hooks/mutations/use-delete-image", () => ({
 // Mock Next.js Image
 vi.mock("next/image", () => ({
     default: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement> & { fill?: boolean }) => {
-        // eslint-disable-next-line @next/next/no-img-element
         return <img src={src} alt={alt} {...props} />
     },
 
diff --git a/components/images/image-lightbox.test.tsx b/components/images/image-lightbox.test.tsx
index f595881..c845587 100644
--- a/components/images/image-lightbox.test.tsx
+++ b/components/images/image-lightbox.test.tsx
@@ -134,7 +134,6 @@ vi.mock("@/components/ui/media-player", () => ({
     if (isVideo) {
       return <video src={url} aria-label={alt} data-testid="video-player" onLoadedMetadata={onLoadedMetadata} />;
     }
-    // eslint-disable-next-line @next/next/no-img-element
     return <img src={url} alt={alt} onLoad={onLoad} data-testid="image-player" />;
   },
   isVideoContent: (contentType: string | undefined, url: string) => contentType?.startsWith("video/") || url?.match(/\.(mp4|webm|mov)$/i),
@@ -142,7 +141,6 @@ vi.mock("@/components/ui/media-player", () => ({
 
 // Mock Next.js Image - not used anymore but keep for compatibility if needed
 vi.mock("next/image", () => ({
-  // eslint-disable-next-line @next/next/no-img-element
   default: ({ src, alt, ...props }: { src: string; alt: string; [key: string]: unknown }) => <img src={src} alt={alt} {...props} />,
 }));
 
diff --git a/components/images/image-lightbox/index.tsx b/components/images/image-lightbox/index.tsx
new file mode 100644
index 0000000..56bbc5a
--- /dev/null
+++ b/components/images/image-lightbox/index.tsx
@@ -0,0 +1,402 @@
+"use client"
+
+import { PromptLibrary } from "@/components/studio/features/prompt-library"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
+import { isVideoContent } from "@/components/ui/media-player"
+import type { Id } from "@/convex/_generated/dataModel"
+import { useImageDetails } from "@/hooks/queries/use-image-history"
+import { useImageLightbox } from "@/hooks/use-image-lightbox"
+import type { LightboxImage } from "@/hooks/use-image-lightbox"
+import { cn } from "@/lib/utils"
+import { useAuth } from "@clerk/nextjs"
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { AnimatePresence, motion } from "framer-motion"
+import { Loader2 } from "lucide-react"
+import * as React from "react"
+
+import {
+  InfoOverlayContent,
+  StaticImageContent,
+  VideoContent,
+} from "./lightbox-components"
+import {
+  getScrollContainerClass,
+  hasSeparateThumbnailUrl,
+  mergeImageWithDetails,
+  shouldShowSpinner,
+} from "./lightbox-helpers"
+
+export type { LightboxImage } from "@/hooks/use-image-lightbox"
+
+// =============================================================================
+// Helper sub-components to reduce main component complexity
+// =============================================================================
+
+interface LoadingSpinnerProps {
+  readonly visible: boolean
+}
+
+function LoadingSpinner({ visible }: LoadingSpinnerProps) {
+  if (!visible) return null
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
+      <Loader2 className="w-10 h-10 animate-spin text-white/50" />
+    </div>
+  )
+}
+
+interface HoverZoneProps {
+  readonly isZoomed: boolean
+  readonly setIsHovering: (v: boolean) => void
+  readonly onClick: () => void
+}
+
+function HoverZone({ isZoomed, setIsHovering, onClick }: HoverZoneProps) {
+  if (isZoomed) return null
+  return (
+    <div
+      className="absolute bottom-0 inset-x-0 h-[15vh] min-h-[150px] z-[5] cursor-default"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      onClick={onClick}
+    />
+  )
+}
+
+interface InfoOverlayProps {
+  readonly isZoomed: boolean
+  readonly isHovering: boolean
+  readonly isLoadingDetails: boolean
+  readonly image: LightboxImage
+  readonly isSignedIn: boolean
+  readonly copied: boolean
+  readonly setIsHovering: (v: boolean) => void
+  readonly onSave: () => void
+  readonly onCopy: (e: React.MouseEvent) => Promise<void>
+}
+
+function InfoOverlay({
+  isZoomed,
+  isHovering,
+  isLoadingDetails,
+  image,
+  isSignedIn,
+  copied,
+  setIsHovering,
+  onSave,
+  onCopy,
+}: InfoOverlayProps) {
+  const shouldShow = !isZoomed && isHovering
+  return (
+    <AnimatePresence>
+      {shouldShow && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          transition={{ duration: 0.125, ease: "easeOut" }}
+          className="absolute bottom-0 inset-x-0 p-6 pt-8 bg-gradient-to-t from-black/70 via-black/60 to-transparent pointer-events-none z-20"
+        >
+          <InfoOverlayContent
+            isLoadingDetails={isLoadingDetails}
+            image={image}
+            isSignedIn={isSignedIn}
+            copied={copied}
+            setIsHovering={setIsHovering}
+            onSave={onSave}
+            onCopy={onCopy}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+interface MediaContentProps {
+  readonly isLoadingDetails: boolean
+  readonly isVideo: boolean
+  readonly image: LightboxImage
+  readonly isZoomed: boolean
+  readonly canZoom: boolean
+  readonly naturalSize: { width: number; height: number }
+  readonly hasSeparateThumbnail: boolean
+  readonly thumbnailUrl: string | undefined
+  readonly fullResUrl: string
+  readonly isThumbnailLoaded: boolean
+  readonly isFullResLoaded: boolean
+  readonly setIsThumbnailLoaded: (v: boolean) => void
+  readonly setIsFullResLoaded: (v: boolean) => void
+  readonly setIsHovering: (v: boolean) => void
+  readonly toggleZoom: (e: React.MouseEvent) => void
+  readonly handleImageLoad: (e: React.SyntheticEvent<HTMLImageElement>) => void
+}
+
+function MediaContent({
+  isLoadingDetails,
+  isVideo,
+  image,
+  isZoomed,
+  canZoom,
+  naturalSize,
+  hasSeparateThumbnail,
+  thumbnailUrl,
+  fullResUrl,
+  isThumbnailLoaded,
+  isFullResLoaded,
+  setIsThumbnailLoaded,
+  setIsFullResLoaded,
+  setIsHovering,
+  toggleZoom,
+  handleImageLoad,
+}: MediaContentProps) {
+  if (isLoadingDetails) return null
+  if (isVideo) {
+    return <VideoContent image={image} setIsHovering={setIsHovering} />
+  }
+  return (
+    <StaticImageContent
+      image={image}
+      isZoomed={isZoomed}
+      canZoom={canZoom}
+      naturalSize={naturalSize}
+      hasSeparateThumbnail={hasSeparateThumbnail}
+      thumbnailUrl={thumbnailUrl}
+      fullResUrl={fullResUrl}
+      isThumbnailLoaded={isThumbnailLoaded}
+      isFullResLoaded={isFullResLoaded}
+      setIsThumbnailLoaded={setIsThumbnailLoaded}
+      setIsFullResLoaded={setIsFullResLoaded}
+      setIsHovering={setIsHovering}
+      toggleZoom={toggleZoom}
+      handleImageLoad={handleImageLoad}
+    />
+  )
+}
+
+// =============================================================================
+// Custom hook for lightbox data preparation
+// =============================================================================
+
+interface UseLightboxDataResult {
+  displayImage: LightboxImage | null
+  isVideo: boolean
+  isLoadingDetails: boolean
+  thumbnailUrl: string | undefined
+  fullResUrl: string
+  hasSeparateThumbnail: boolean
+}
+
+function useLightboxData(image: LightboxImage | null): UseLightboxDataResult {
+  const imageId = image?._id as Id<"generatedImages"> | undefined
+  const needsFullData = Boolean(image && !image.prompt && imageId)
+  const fullImageData = useImageDetails(needsFullData ? imageId : null)
+
+  const displayImage: LightboxImage | null = image
+    ? mergeImageWithDetails(image, fullImageData)
+    : null
+
+  const isVideo = Boolean(displayImage && isVideoContent(displayImage.contentType, displayImage.url))
+  const isLoadingDetails = needsFullData && fullImageData === undefined
+
+  const thumbnailUrl = displayImage?.url
+  const fullResUrl = displayImage?.originalUrl ?? displayImage?.url ?? ""
+  const hasSeparateThumbnail = Boolean(displayImage && hasSeparateThumbnailUrl(displayImage))
+
+  return {
+    displayImage,
+    isVideo,
+    isLoadingDetails,
+    thumbnailUrl,
+    fullResUrl,
+    hasSeparateThumbnail,
+  }
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+interface ImageLightboxProps {
+  readonly image: LightboxImage | null
+  readonly isOpen: boolean
+  readonly onClose: () => void
+  readonly onInsertPrompt?: (content: string) => void
+}
+
+export function ImageLightbox({ image, isOpen, onClose, onInsertPrompt }: ImageLightboxProps) {
+  const {
+    displayImage,
+    isVideo,
+    isLoadingDetails,
+    thumbnailUrl,
+    fullResUrl,
+    hasSeparateThumbnail,
+  } = useLightboxData(image)
+
+  const {
+    copied,
+    isZoomed,
+    naturalSize,
+    isDragging,
+    scrollContainerRef,
+    canZoom,
+    handleCopyPrompt,
+    handleImageLoad,
+    toggleZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave,
+    hasDragged: hasDraggedRef,
+    isHovering,
+    setIsHovering
+  } = useImageLightbox({ image: displayImage, isOpen })
+
+  const { isSignedIn } = useAuth()
+
+  const [libraryOpen, setLibraryOpen] = React.useState(false)
+  const [saveContent, setSaveContent] = React.useState<string | undefined>(undefined)
+  const [isThumbnailLoaded, setIsThumbnailLoaded] = React.useState(false)
+  const [isFullResLoaded, setIsFullResLoaded] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsThumbnailLoaded(false)
+    setIsFullResLoaded(false)
+  }, [displayImage?.url, displayImage?.originalUrl])
+
+  const scrollContainerClass = getScrollContainerClass(isZoomed, isDragging)
+  const showSpinner = shouldShowSpinner(isLoadingDetails, isVideo, isThumbnailLoaded, isFullResLoaded)
+
+  const handleSaveToLibrary = () => {
+    if (!displayImage?.prompt) return
+    setSaveContent(displayImage.prompt)
+    setLibraryOpen(true)
+  }
+
+  const handleScrollContainerClick = (e: React.MouseEvent) => {
+    if (hasDraggedRef.current) {
+      hasDraggedRef.current = false
+      return
+    }
+    if (e.target === e.currentTarget) onClose()
+  }
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onClose()
+  }
+
+  const handleLibraryClose = () => {
+    setLibraryOpen(false)
+    setSaveContent(undefined)
+  }
+
+  const handleLibraryInsert = (content: string) => {
+    onInsertPrompt?.(content)
+    setLibraryOpen(false)
+  }
+
+  if (!displayImage) {
+    return (
+      <>
+        <Dialog open={isOpen} onOpenChange={onClose}>
+          <DialogContent
+            className="!fixed !inset-0 !flex !items-center !justify-center !border-none !bg-transparent !p-0 !shadow-none !w-screen !h-screen !max-w-none !translate-x-0 !translate-y-0 !outline-none !duration-75"
+            showCloseButton={false}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            <VisuallyHidden>
+              <DialogTitle>Fullscreen Preview</DialogTitle>
+              <DialogDescription>Loading image preview</DialogDescription>
+            </VisuallyHidden>
+          </DialogContent>
+        </Dialog>
+        <PromptLibrary
+          isOpen={libraryOpen}
+          onClose={handleLibraryClose}
+          promptType="positive"
+          onInsert={handleLibraryInsert}
+          initialSaveContent={saveContent}
+          onInsertComplete={onClose}
+        />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent
+          className="!fixed !inset-0 !flex !items-center !justify-center !border-none !bg-transparent !p-0 !shadow-none !w-screen !h-screen !max-w-none !translate-x-0 !translate-y-0 !outline-none !duration-75"
+          showCloseButton={false}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <VisuallyHidden>
+            <DialogTitle>Fullscreen Preview</DialogTitle>
+            <DialogDescription>Previewing image: {displayImage.prompt}</DialogDescription>
+          </VisuallyHidden>
+
+          <div
+            className="w-full h-full bg-black/80 backdrop-blur-md cursor-default flex items-center justify-center animate-in fade-in duration-150"
+            onClick={handleBackdropClick}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <div
+              ref={scrollContainerRef}
+              className={cn("w-full h-full", scrollContainerClass)}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseLeave}
+              onClick={handleScrollContainerClick}
+            >
+              <MediaContent
+                isLoadingDetails={isLoadingDetails}
+                isVideo={isVideo}
+                image={displayImage}
+                isZoomed={isZoomed}
+                canZoom={canZoom}
+                naturalSize={naturalSize}
+                hasSeparateThumbnail={hasSeparateThumbnail}
+                thumbnailUrl={thumbnailUrl}
+                fullResUrl={fullResUrl}
+                isThumbnailLoaded={isThumbnailLoaded}
+                isFullResLoaded={isFullResLoaded}
+                setIsThumbnailLoaded={setIsThumbnailLoaded}
+                setIsFullResLoaded={setIsFullResLoaded}
+                setIsHovering={setIsHovering}
+                toggleZoom={toggleZoom}
+                handleImageLoad={handleImageLoad}
+              />
+              <LoadingSpinner visible={showSpinner} />
+            </div>
+
+            <HoverZone isZoomed={isZoomed} setIsHovering={setIsHovering} onClick={onClose} />
+
+            <InfoOverlay
+              isZoomed={isZoomed}
+              isHovering={isHovering}
+              isLoadingDetails={isLoadingDetails}
+              image={displayImage}
+              isSignedIn={Boolean(isSignedIn)}
+              copied={copied}
+              setIsHovering={setIsHovering}
+              onSave={handleSaveToLibrary}
+              onCopy={handleCopyPrompt}
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <PromptLibrary
+        isOpen={libraryOpen}
+        onClose={handleLibraryClose}
+        promptType="positive"
+        onInsert={handleLibraryInsert}
+        initialSaveContent={saveContent}
+        onInsertComplete={onClose}
+      />
+    </>
+  )
+}
diff --git a/components/images/image-lightbox/lightbox-components.tsx b/components/images/image-lightbox/lightbox-components.tsx
new file mode 100644
index 0000000..9dd1f9a
--- /dev/null
+++ b/components/images/image-lightbox/lightbox-components.tsx
@@ -0,0 +1,413 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { MediaPlayer } from "@/components/ui/media-player"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import type { LightboxImage } from "@/hooks/use-image-lightbox"
+import { cn } from "@/lib/utils"
+import { BookmarkPlus, Check, Copy, Loader2, LogIn, ZoomIn } from "lucide-react"
+import Link from "next/link"
+import NextImage from "next/image"
+import type * as React from "react"
+import {
+  getDimension,
+  getFullResOpacityClass,
+  getImageCursorClass,
+  getModelLabel,
+  getSeedValue,
+  getSizeDisplay,
+  getThumbnailOpacityClass,
+  hasModel,
+  hasSize,
+  shouldShowSeed,
+  ACTION_BUTTON_CLASS,
+  ACTION_BUTTON_UNAUTH_CLASS,
+  IMAGE_CONSTRAINT_CLASS,
+} from "./lightbox-helpers"
+
+// =============================================================================
+// Metadata Components
+// =============================================================================
+
+interface MetadataPillProps {
+  readonly children: React.ReactNode
+}
+
+function MetadataPill({ children }: MetadataPillProps) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/15 border border-white/10 text-white/90 text-[10px] md:text-xs font-medium backdrop-blur-md transition-colors shadow-sm">
+      {children}
+    </div>
+  )
+}
+
+interface ModelPillProps {
+  readonly label: string
+}
+
+function ModelPill({ label }: ModelPillProps) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/15 border border-white/10 text-white/90 backdrop-blur-md transition-colors shadow-sm">
+      <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+      <span className="text-[10px] md:text-xs font-bold uppercase tracking-widest">{label}</span>
+    </div>
+  )
+}
+
+interface ImageMetadataProps {
+  readonly image: LightboxImage
+}
+
+export function ImageMetadata({ image }: ImageMetadataProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {hasModel(image) && <ModelPill label={getModelLabel(image)} />}
+      {hasSize(image) && (
+        <MetadataPill>
+          <span className="text-white/40">Size</span>
+          <span className="font-mono">{getSizeDisplay(image)}</span>
+        </MetadataPill>
+      )}
+      {shouldShowSeed(image) && (
+        <MetadataPill>
+          <span className="text-white/40">Seed</span>
+          <span className="font-mono">{getSeedValue(image)}</span>
+        </MetadataPill>
+      )}
+    </div>
+  )
+}
+
+// =============================================================================
+// Action Buttons
+// =============================================================================
+
+interface SaveToLibraryButtonProps {
+  readonly isSignedIn: boolean
+  readonly disabled: boolean
+  readonly onSave: () => void
+}
+
+export function SaveToLibraryButton({ isSignedIn, disabled, onSave }: SaveToLibraryButtonProps) {
+  if (isSignedIn) {
+    return (
+      <Tooltip delayDuration={200}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={ACTION_BUTTON_CLASS}
+            onClick={(e) => {
+              e.stopPropagation()
+              onSave()
+            }}
+            disabled={disabled}
+          >
+            <BookmarkPlus className="h-5 w-5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="z-[100]">
+          <p className="font-medium">Save to Library</p>
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        <Link href="/sign-in" onClick={(e) => e.stopPropagation()}>
+          <Button variant="ghost" size="icon" className={ACTION_BUTTON_UNAUTH_CLASS}>
+            <BookmarkPlus className="h-5 w-5" />
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="z-[100]">
+        <div className="flex items-center gap-2">
+          <LogIn className="h-3.5 w-3.5" />
+          <p className="font-medium">Sign in to save prompts</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+interface CopyPromptButtonProps {
+  readonly isSignedIn: boolean
+  readonly disabled: boolean
+  readonly copied: boolean
+  readonly onCopy: (e: React.MouseEvent) => Promise<void>
+}
+
+export function CopyPromptButton({ isSignedIn, disabled, copied, onCopy }: CopyPromptButtonProps) {
+  const handleClick = (e: React.MouseEvent) => {
+    void onCopy(e)
+  }
+
+  if (isSignedIn) {
+    return (
+      <Tooltip delayDuration={200}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={ACTION_BUTTON_CLASS}
+            onClick={handleClick}
+            disabled={disabled}
+          >
+            {copied ? <Check className="h-5 w-5 text-green-400" /> : <Copy className="h-5 w-5" />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="z-[100]">
+          <p className="font-medium">{copied ? "Copied!" : "Copy prompt"}</p>
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        <Link href="/sign-in" onClick={(e) => e.stopPropagation()}>
+          <Button variant="ghost" size="icon" className={ACTION_BUTTON_UNAUTH_CLASS}>
+            <Copy className="h-5 w-5" />
+          </Button>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="z-[100]">
+        <div className="flex items-center gap-2">
+          <LogIn className="h-3.5 w-3.5" />
+          <p className="font-medium">Sign in to copy prompts</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+interface ActionButtonsProps {
+  readonly isSignedIn: boolean
+  readonly isLoadingDetails: boolean
+  readonly prompt: string | undefined
+  readonly copied: boolean
+  readonly onSave: () => void
+  readonly onCopy: (e: React.MouseEvent) => Promise<void>
+}
+
+export function ActionButtons({ isSignedIn, isLoadingDetails, prompt, copied, onSave, onCopy }: ActionButtonsProps) {
+  const disabled = isLoadingDetails || !prompt
+  return (
+    <div className="flex items-center gap-2">
+      <SaveToLibraryButton isSignedIn={isSignedIn} disabled={disabled} onSave={onSave} />
+      <CopyPromptButton isSignedIn={isSignedIn} disabled={disabled} copied={copied} onCopy={onCopy} />
+    </div>
+  )
+}
+
+// =============================================================================
+// Info Overlay
+// =============================================================================
+
+interface InfoOverlayContentProps {
+  readonly isLoadingDetails: boolean
+  readonly image: LightboxImage
+  readonly isSignedIn: boolean
+  readonly copied: boolean
+  readonly setIsHovering: (v: boolean) => void
+  readonly onSave: () => void
+  readonly onCopy: (e: React.MouseEvent) => Promise<void>
+}
+
+export function InfoOverlayContent({
+  isLoadingDetails,
+  image,
+  isSignedIn,
+  copied,
+  setIsHovering,
+  onSave,
+  onCopy,
+}: InfoOverlayContentProps) {
+  return (
+    <div
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      className="flex items-end justify-between gap-8 pointer-events-auto max-w-[1400px] mx-auto w-full px-4 md:px-6"
+    >
+      <div className="flex flex-col gap-3 max-w-3xl">
+        {isLoadingDetails ? (
+          <div className="flex items-center gap-2 text-white/60">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Loading details...</span>
+          </div>
+        ) : (
+          <>
+            <p className="text-white text-sm md:text-base font-medium leading-relaxed line-clamp-2 antialiased drop-shadow-sm">
+              {image.prompt}
+            </p>
+            <ImageMetadata image={image} />
+          </>
+        )}
+      </div>
+      <ActionButtons
+        isSignedIn={isSignedIn}
+        isLoadingDetails={isLoadingDetails}
+        prompt={image.prompt}
+        copied={copied}
+        onSave={onSave}
+        onCopy={onCopy}
+      />
+    </div>
+  )
+}
+
+// =============================================================================
+// Media Content Components
+// =============================================================================
+
+interface VideoContentProps {
+  readonly image: LightboxImage
+  readonly setIsHovering: (v: boolean) => void
+}
+
+export function VideoContent({ image, setIsHovering }: VideoContentProps) {
+  const alt = image.prompt ?? "Generated video"
+  return (
+    <div className="relative" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="relative shadow-[0_0_50px_rgba(0,0,0,0.5)] rounded-sm group/video z-10"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      >
+        <MediaPlayer
+          url={image.url}
+          alt={alt}
+          contentType={image.contentType}
+          controls={true}
+          autoPlay={true}
+          loop={true}
+          muted={false}
+          className="w-auto h-auto max-w-[100vw] max-h-[100vh] object-contain select-none"
+          draggable={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+interface StaticImageContentProps {
+  readonly image: LightboxImage
+  readonly isZoomed: boolean
+  readonly canZoom: boolean
+  readonly naturalSize: { width: number; height: number }
+  readonly hasSeparateThumbnail: boolean
+  readonly thumbnailUrl: string | undefined
+  readonly fullResUrl: string
+  readonly isThumbnailLoaded: boolean
+  readonly isFullResLoaded: boolean
+  readonly setIsThumbnailLoaded: (v: boolean) => void
+  readonly setIsFullResLoaded: (v: boolean) => void
+  readonly setIsHovering: (v: boolean) => void
+  readonly toggleZoom: (e: React.MouseEvent) => void
+  readonly handleImageLoad: (e: React.SyntheticEvent<HTMLImageElement>) => void
+}
+
+export function StaticImageContent({
+  image,
+  isZoomed,
+  canZoom,
+  naturalSize,
+  hasSeparateThumbnail,
+  thumbnailUrl,
+  fullResUrl,
+  isThumbnailLoaded,
+  isFullResLoaded,
+  setIsThumbnailLoaded,
+  setIsFullResLoaded,
+  setIsHovering,
+  toggleZoom,
+  handleImageLoad,
+}: StaticImageContentProps) {
+  const alt = image.prompt ?? "Generated image"
+  const width = getDimension(image.width, image.params?.width, 1000)
+  const height = getDimension(image.height, image.params?.height, 1000)
+
+  const cursorClass = getImageCursorClass(canZoom, isZoomed)
+  const thumbnailOpacityClass = getThumbnailOpacityClass(isThumbnailLoaded, isFullResLoaded)
+  const fullResOpacityClass = getFullResOpacityClass(hasSeparateThumbnail, isFullResLoaded)
+  const constraintClass = isZoomed ? "" : IMAGE_CONSTRAINT_CLASS
+
+  const containerStyle = isZoomed ? {
+    width: naturalSize.width,
+    height: naturalSize.height,
+    flexShrink: 0 as const,
+    margin: 'auto' as const
+  } : undefined
+
+  const thumbnailUnoptimized = thumbnailUrl ? thumbnailUrl.startsWith('http') : false
+  const fullResUnoptimized = fullResUrl.startsWith('http')
+  const showZoomIndicator = canZoom && !isZoomed && (isThumbnailLoaded || isFullResLoaded)
+
+  return (
+    <div
+      className="relative"
+      style={containerStyle}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        className={cn(
+          "relative shadow-[0_0_50px_rgba(0,0,0,0.5)] group/image z-10",
+          !isZoomed && "rounded-sm",
+          cursorClass
+        )}
+        onClick={toggleZoom}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      >
+        {hasSeparateThumbnail && thumbnailUrl && (
+          <NextImage
+            src={thumbnailUrl}
+            alt={alt}
+            onLoad={() => setIsThumbnailLoaded(true)}
+            draggable={false}
+            width={width}
+            height={height}
+            priority
+            unoptimized={thumbnailUnoptimized}
+            className={cn(
+              "w-auto h-auto object-contain select-none transition-all duration-500",
+              constraintClass,
+              thumbnailOpacityClass
+            )}
+          />
+        )}
+
+        <NextImage
+          src={fullResUrl}
+          alt={alt}
+          onLoad={(e) => {
+            handleImageLoad(e as unknown as React.SyntheticEvent<HTMLImageElement>)
+            setIsFullResLoaded(true)
+          }}
+          draggable={false}
+          decoding="sync"
+          width={width}
+          height={height}
+          priority={true}
+          unoptimized={fullResUnoptimized}
+          className={cn(
+            "w-auto h-auto object-contain select-none transition-opacity duration-500",
+            constraintClass,
+            fullResOpacityClass
+          )}
+        />
+      </div>
+
+      {showZoomIndicator && (
+        <div className="absolute top-4 right-4 z-10 opacity-0 group-hover/image:opacity-100 transition-opacity pointer-events-none">
+          <div className="bg-black/40 backdrop-blur-md rounded-full p-2 border border-white/10 text-white/70">
+            <ZoomIn className="w-5 h-5" />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/images/image-lightbox/lightbox-helpers.ts b/components/images/image-lightbox/lightbox-helpers.ts
new file mode 100644
index 0000000..2f799d9
--- /dev/null
+++ b/components/images/image-lightbox/lightbox-helpers.ts
@@ -0,0 +1,137 @@
+import { getModelDisplayName } from "@/lib/config/models"
+import type { LightboxImage } from "@/hooks/use-image-lightbox"
+
+// =============================================================================
+// Pure helper functions for ImageLightbox component
+// =============================================================================
+
+export interface FullImageData {
+  url?: string
+  prompt?: string
+  model?: string
+  width?: number
+  height?: number
+  seed?: number
+  contentType?: string
+}
+
+/** Merges thumbnail image data with full resolution data when available */
+export function mergeImageWithDetails(
+  image: LightboxImage,
+  fullData: FullImageData | null | undefined
+): LightboxImage {
+  const url = fullData?.url ?? image.url
+  const prompt = fullData?.prompt ?? image.prompt ?? ""
+  const model = fullData?.model ?? image.model
+  const width = fullData?.width ?? image.width
+  const height = fullData?.height ?? image.height
+  const seed = fullData?.seed ?? image.seed
+  const contentType = fullData?.contentType ?? image.contentType
+
+  const params = image.params ?? (fullData ? {
+    model: fullData.model,
+    width: fullData.width,
+    height: fullData.height,
+    seed: fullData.seed,
+  } : undefined)
+
+  return { ...image, url, prompt, model, width, height, seed, contentType, params }
+}
+
+/** Returns the effective dimension value with fallback to params then default */
+export function getDimension(
+  direct: number | undefined,
+  fromParams: number | undefined,
+  fallback: number
+): number {
+  return direct ?? fromParams ?? fallback
+}
+
+/** Determines if image has separate thumbnail and full-res URLs */
+export function hasSeparateThumbnailUrl(image: LightboxImage): boolean {
+  return Boolean(image.originalUrl && image.originalUrl !== image.url)
+}
+
+/** Computes the model display label with fallbacks */
+export function getModelLabel(image: LightboxImage): string {
+  const modelValue = image.params?.model ?? image.model ?? ""
+  const displayName = getModelDisplayName(modelValue)
+  if (displayName) return displayName
+  return modelValue || "Unknown"
+}
+
+/** Computes whether seed should be displayed (non-negative) */
+export function shouldShowSeed(image: LightboxImage): boolean {
+  const seed = image.params?.seed ?? image.seed
+  return seed !== undefined && seed !== -1
+}
+
+/** Gets seed value for display */
+export function getSeedValue(image: LightboxImage): number | undefined {
+  return image.params?.seed ?? image.seed
+}
+
+/** Computes whether size should be displayed */
+export function hasSize(image: LightboxImage): boolean {
+  return Boolean(image.params?.width ?? image.width)
+}
+
+/** Gets size display string */
+export function getSizeDisplay(image: LightboxImage): string {
+  const w = image.params?.width ?? image.width
+  const h = image.params?.height ?? image.height
+  return `${w}×${h}`
+}
+
+/** Computes whether model should be displayed */
+export function hasModel(image: LightboxImage): boolean {
+  return Boolean(image.params?.model ?? image.model)
+}
+
+/** Computes loading spinner visibility */
+export function shouldShowSpinner(
+  isLoadingDetails: boolean,
+  isVideo: boolean,
+  isThumbnailLoaded: boolean,
+  isFullResLoaded: boolean
+): boolean {
+  if (isLoadingDetails) return true
+  if (isVideo) return false
+  return !isThumbnailLoaded && !isFullResLoaded
+}
+
+/** Computes cursor class for image container */
+export function getImageCursorClass(canZoom: boolean, isZoomed: boolean): string {
+  if (!canZoom) return "cursor-default"
+  if (!isZoomed) return "cursor-zoom-in"
+  return ""
+}
+
+/** Computes thumbnail opacity/blur class */
+export function getThumbnailOpacityClass(isThumbnailLoaded: boolean, isFullResLoaded: boolean): string {
+  if (!isThumbnailLoaded) return "opacity-0"
+  if (isFullResLoaded) return "opacity-0 pointer-events-none absolute inset-0"
+  return "blur-[2px]"
+}
+
+/** Computes full-res opacity class */
+export function getFullResOpacityClass(hasSeparateThumbnail: boolean, isFullResLoaded: boolean): string {
+  if (hasSeparateThumbnail) {
+    return isFullResLoaded ? "opacity-100" : "opacity-0"
+  }
+  return isFullResLoaded ? "opacity-100" : "opacity-0"
+}
+
+/** Computes scroll container class */
+export function getScrollContainerClass(isZoomed: boolean, isDragging: boolean): string {
+  if (!isZoomed) return "flex items-center justify-center overflow-hidden"
+  const cursorClass = isDragging ? "cursor-grabbing" : "cursor-grab"
+  return `overflow-auto flex ${cursorClass}`
+}
+
+/** Image constraint class constant */
+export const IMAGE_CONSTRAINT_CLASS = "max-w-[calc(100vw-2rem)] max-h-[calc(100vh-6rem)] md:max-w-[calc(100vw-6rem)] md:max-h-[calc(100vh-8rem)]"
+
+/** Action button styling constants */
+export const ACTION_BUTTON_CLASS = "h-10 w-10 mb-1 rounded-full bg-white/10 hover:bg-white/20 text-white border border-white/10 backdrop-blur-md transition-all shrink-0 hover:scale-105 active:scale-95 shadow-lg"
+export const ACTION_BUTTON_UNAUTH_CLASS = "h-10 w-10 mb-1 rounded-full bg-white/10 hover:bg-white/20 text-white/60 hover:text-white border border-white/10 backdrop-blur-md transition-all shrink-0 hover:scale-105 active:scale-95 shadow-lg"
diff --git a/components/landing/landing-header.test.tsx b/components/landing/landing-header.test.tsx
new file mode 100644
index 0000000..d180e6e
--- /dev/null
+++ b/components/landing/landing-header.test.tsx
@@ -0,0 +1,154 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { LandingHeader } from "./landing-header";
+
+// Mock Clerk
+const mockUseUser = vi.fn(() => ({ isSignedIn: false, isLoaded: true }));
+vi.mock("@clerk/nextjs", () => ({
+  useUser: () => mockUseUser(),
+}));
+
+// Mock ClerkUserButton
+vi.mock("@/components/clerk-user-button", () => ({
+  ClerkUserButton: () => <div data-testid="clerk-user-button">User</div>,
+}));
+
+// Mock next/navigation
+const mockPathname = vi.fn(() => "/");
+vi.mock("next/navigation", () => ({
+  usePathname: () => mockPathname(),
+}));
+
+// Mock next/image
+vi.mock("next/image", () => ({
+  default: ({ src, alt, ...props }: { src: string; alt: string }) => (
+    <img src={src} alt={alt} {...props} />
+  ),
+}));
+
+// Mock scroll spy hook
+vi.mock("@/hooks/use-scroll-spy", () => ({
+  useScrollSpy: () => "hero",
+}));
+
+describe("LandingHeader", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockPathname.mockReturnValue("/");
+    mockUseUser.mockReturnValue({ isSignedIn: false, isLoaded: true });
+    
+    // Mock window scroll
+    Object.defineProperty(globalThis, "scrollY", { value: 0, writable: true });
+  });
+
+  describe("rendering", () => {
+    it("renders logo and brand name", () => {
+      render(<LandingHeader />);
+      
+      expect(screen.getByAltText("Bloom Studio Logo")).toBeInTheDocument();
+      expect(screen.getByText("Bloom Studio")).toBeInTheDocument();
+    });
+
+    it("renders desktop navigation links", () => {
+      render(<LandingHeader />);
+      
+      expect(screen.getByRole("link", { name: /showcase/i })).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: /compare/i })).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: /features/i })).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: /models/i })).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: /pricing/i })).toBeInTheDocument();
+    });
+
+    it("renders Community Feed link", () => {
+      render(<LandingHeader />);
+      
+      expect(screen.getAllByText("Community Feed").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("auth states", () => {
+    it("shows sign in and get started buttons when signed out", () => {
+      mockUseUser.mockReturnValue({ isSignedIn: false, isLoaded: true });
+      render(<LandingHeader />);
+      
+      expect(screen.getByText("Sign in")).toBeInTheDocument();
+      expect(screen.getByText("Get Started Free")).toBeInTheDocument();
+    });
+
+    it("shows Open Studio button and user button when signed in", () => {
+      mockUseUser.mockReturnValue({ isSignedIn: true, isLoaded: true });
+      render(<LandingHeader />);
+      
+      expect(screen.getAllByText("Open Studio").length).toBeGreaterThan(0);
+      // There are two ClerkUserButton instances: desktop and mobile
+      expect(screen.getAllByTestId("clerk-user-button").length).toBeGreaterThan(0);
+    });
+
+    it("does not show auth buttons when not loaded", () => {
+      mockUseUser.mockReturnValue({ isSignedIn: false, isLoaded: false });
+      render(<LandingHeader />);
+      
+      expect(screen.queryByText("Sign in")).not.toBeInTheDocument();
+      expect(screen.queryByText("Get Started Free")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("mobile menu", () => {
+    it("toggles mobile menu on button click", () => {
+      render(<LandingHeader />);
+      
+      // Find and click the mobile menu toggle button (hamburger icon)
+      const toggleButtons = screen.getAllByRole("button");
+      const mobileToggle = toggleButtons.find(btn => 
+        btn.className.includes("lg:hidden") && btn.querySelector(".flex.flex-col")
+      );
+      
+      expect(mobileToggle).toBeTruthy();
+      if (mobileToggle) {
+        fireEvent.click(mobileToggle);
+        
+        // After clicking, mobile menu content should be visible
+        // The About link only appears in mobile menu
+        expect(screen.getByRole("button", { name: /about/i })).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("navigation hrefs", () => {
+    it("uses hash links when on landing page", () => {
+      mockPathname.mockReturnValue("/");
+      render(<LandingHeader />);
+      
+      const showcaseLink = screen.getByRole("link", { name: /showcase/i });
+      expect(showcaseLink).toHaveAttribute("href", "#showcase");
+    });
+
+    it("uses full path with hash when on other pages", () => {
+      mockPathname.mockReturnValue("/about");
+      render(<LandingHeader />);
+      
+      const showcaseLink = screen.getByRole("link", { name: /showcase/i });
+      expect(showcaseLink).toHaveAttribute("href", "/#showcase");
+    });
+  });
+
+  describe("active states", () => {
+    it("applies active styling when on pricing page", () => {
+      mockPathname.mockReturnValue("/pricing");
+      render(<LandingHeader />);
+      
+      const pricingLink = screen.getByRole("link", { name: /pricing/i });
+      expect(pricingLink.querySelector("span")).toHaveClass("text-primary");
+    });
+
+    it("applies active styling to feed link when on feed page", () => {
+      mockPathname.mockReturnValue("/feed/public");
+      render(<LandingHeader />);
+      
+      // Find the Community Feed button and check it has active styling
+      const feedButtons = screen.getAllByText("Community Feed");
+      const desktopFeedBtn = feedButtons[0].closest("button");
+      expect(desktopFeedBtn).toHaveClass("bg-primary/10");
+    });
+  });
+});
diff --git a/components/pricing/model-value-data.ts b/components/pricing/model-value-data.ts
new file mode 100644
index 0000000..562c48d
--- /dev/null
+++ b/components/pricing/model-value-data.ts
@@ -0,0 +1,119 @@
+"use client"
+
+export interface ModelValueData {
+    id: string
+    displayName: string
+    logo: string
+    monthlyQuota: number
+    type: "image" | "video"
+    nsfw?: boolean
+}
+
+export const MODEL_VALUE_DATA: ModelValueData[] = [
+    {
+        id: "flux",
+        displayName: "Flux Schnell",
+        logo: "/image-models/flux.svg",
+        monthlyQuota: 150_000,
+        type: "image",
+    },
+    {
+        id: "klein",
+        displayName: "FLUX.2 Klein 4B",
+        logo: "/image-models/flux.svg",
+        monthlyQuota: 4_500, // 30 * 150
+        type: "image",
+    },
+    {
+        id: "klein-large",
+        displayName: "FLUX.2 Klein 9B",
+        logo: "/image-models/flux.svg",
+        monthlyQuota: 2_550, // 30 * 85
+        type: "image",
+    },
+    {
+        id: "zimage",
+        displayName: "Z-Image Turbo",
+        logo: "/image-models/alibaba.svg",
+        monthlyQuota: 150_000,
+        nsfw: true,
+        type: "image",
+    },
+    {
+        id: "turbo",
+        displayName: "SDXL Turbo",
+        logo: "/image-models/stability.svg",
+        monthlyQuota: 99_000,
+        type: "image",
+    },
+    {
+        id: "gptimage",
+        displayName: "GPT Image 1.0",
+        logo: "/image-models/openai.svg",
+        monthlyQuota: 2_100,
+        type: "image",
+    },
+    {
+        id: "nanobanana",
+        displayName: "Nano Banana",
+        logo: "/image-models/google.svg",
+        monthlyQuota: 750,
+        type: "image",
+    },
+    {
+        id: "seedream",
+        displayName: "Seedream 4.0",
+        logo: "/image-models/bytedance.svg",
+        monthlyQuota: 1_050,
+        type: "image",
+    },
+    {
+        id: "seedream-pro",
+        displayName: "Seedream 4.5 Pro",
+        logo: "/image-models/bytedance.svg",
+        monthlyQuota: 750,
+        type: "image",
+    },
+    {
+        id: "seedance-pro",
+        displayName: "Seedance Pro",
+        logo: "/image-models/bytedance.svg",
+        monthlyQuota: 300,
+        type: "video",
+    },
+    {
+        id: "seedance",
+        displayName: "Seedance",
+        logo: "/image-models/bytedance.svg",
+        monthlyQuota: 180,
+        type: "video",
+    },
+    {
+        id: "veo",
+        displayName: "Veo 3.1",
+        logo: "/image-models/google.svg",
+        monthlyQuota: 30,
+        type: "video",
+    },
+    {
+        id: "kontext",
+        displayName: "Flux Kontext",
+        logo: "/image-models/flux.svg",
+        monthlyQuota: 750,
+        type: "image",
+    },
+    {
+        id: "gptimage-large",
+        displayName: "GPT Image 1.5",
+        logo: "/image-models/openai.svg",
+        monthlyQuota: 600,
+        type: "image",
+    },
+    {
+        id: "nanobanana-pro",
+        displayName: "Nano Banana Pro",
+        logo: "/image-models/google.svg",
+        monthlyQuota: 180,
+        type: "image",
+    },
+]
diff --git a/components/pricing/model-value-showcase.tsx b/components/pricing/model-value-showcase.tsx
index d936680..103a5b4 100644
--- a/components/pricing/model-value-showcase.tsx
+++ b/components/pricing/model-value-showcase.tsx
@@ -6,6 +6,7 @@ import Image from "next/image"
 import Link from "next/link"
 import { useEffect, useRef, useState } from "react"
 import { Video, Image as ImageIcon } from "lucide-react"
+import { MODEL_VALUE_DATA, type ModelValueData } from "./model-value-data"
 
 /**
  * Model Value Showcase — Premium Editorial Redesign
@@ -18,109 +19,6 @@ import { Video, Image as ImageIcon } from "lucide-react"
  * Sophisticated typography, muted palette with ember accents, asymmetric layout.
  */
 
-interface ModelValueData {
-    id: string
-    displayName: string
-    logo: string
-    monthlyQuota: number
-    type: "image" | "video"
-    nsfw?: boolean
-}
-
-const MODEL_VALUE_DATA: ModelValueData[] = [
-    {
-        id: "flux",
-        displayName: "Flux Schnell",
-        logo: "/image-models/flux.svg",
-        monthlyQuota: 150_000,
-        type: "image",
-    },
-    {
-        id: "zimage",
-        displayName: "Z-Image Turbo",
-        logo: "/image-models/alibaba.svg",
-        monthlyQuota: 150_000,
-        nsfw: true,
-        type: "image",
-    },
-    {
-        id: "turbo",
-        displayName: "SDXL Turbo",
-        logo: "/image-models/stability.svg",
-        monthlyQuota: 99_000,
-        type: "image",
-    },
-    {
-        id: "gptimage",
-        displayName: "GPT Image 1.0",
-        logo: "/image-models/openai.svg",
-        monthlyQuota: 2_100,
-        type: "image",
-    },
-    {
-        id: "nanobanana",
-        displayName: "Nano Banana",
-        logo: "/image-models/google.svg",
-        monthlyQuota: 750,
-        type: "image",
-    },
-    {
-        id: "seedream",
-        displayName: "Seedream 4.0",
-        logo: "/image-models/bytedance.svg",
-        monthlyQuota: 1_050,
-        type: "image",
-    },
-    {
-        id: "seedream-pro",
-        displayName: "Seedream 4.5 Pro",
-        logo: "/image-models/bytedance.svg",
-        monthlyQuota: 750,
-        type: "image",
-    },
-    {
-        id: "seedance-pro",
-        displayName: "Seedance Pro",
-        logo: "/image-models/bytedance.svg",
-        monthlyQuota: 300,
-        type: "video",
-    },
-    {
-        id: "seedance",
-        displayName: "Seedance",
-        logo: "/image-models/bytedance.svg",
-        monthlyQuota: 180,
-        type: "video",
-    },
-    {
-        id: "veo",
-        displayName: "Veo 3.1",
-        logo: "/image-models/google.svg",
-        monthlyQuota: 30,
-        type: "video",
-    },
-    {
-        id: "kontext",
-        displayName: "Flux Kontext",
-        logo: "/image-models/flux.svg",
-        monthlyQuota: 750,
-        type: "image",
-    },
-    {
-        id: "gptimage-large",
-        displayName: "GPT Image 1.5",
-        logo: "/image-models/openai.svg",
-        monthlyQuota: 600,
-        type: "image",
-    },
-    {
-        id: "nanobanana-pro",
-        displayName: "Nano Banana Pro",
-        logo: "/image-models/google.svg",
-        monthlyQuota: 180,
-        type: "image",
-    },
-]
 
 // Sort alphabetically by displayName initially
 const ORDERED_MODEL_DATA = [...MODEL_VALUE_DATA].sort((a, b) => a.displayName.localeCompare(b.displayName))
diff --git a/components/studio/batch/batch-image-grid.test.tsx b/components/studio/batch/batch-image-grid.test.tsx
index abf7ea0..fc9fa64 100644
--- a/components/studio/batch/batch-image-grid.test.tsx
+++ b/components/studio/batch/batch-image-grid.test.tsx
@@ -4,7 +4,7 @@ import { BatchImageGrid } from "./batch-image-grid";
 
 // Mock NextImage
 vi.mock("next/image", () => ({ 
-    default: ({ src, alt, ...props }: any) => (
+    default: ({ src, alt, ...props }: { src: string; alt: string; [key: string]: unknown }) => (
         <img 
             src={src} 
             alt={alt} 
diff --git a/components/studio/controls/megapixel-budget.test.tsx b/components/studio/controls/megapixel-budget.test.tsx
new file mode 100644
index 0000000..e523944
--- /dev/null
+++ b/components/studio/controls/megapixel-budget.test.tsx
@@ -0,0 +1,206 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { MegapixelBudget } from "./megapixel-budget"
+
+// Wrap component with TooltipProvider for tooltip tests
+function renderWithTooltip(ui: React.ReactElement) {
+    // TooltipProvider is likely already in the test setup via vitest.setup.ts
+    // If not, the component should still render its visible content
+    return render(ui)
+}
+
+describe("MegapixelBudget", () => {
+    describe("expanded view (default)", () => {
+        it("renders the expanded budget display", () => {
+            renderWithTooltip(
+                <MegapixelBudget width={1024} height={1024} maxPixels={2_000_000} />
+            )
+
+            expect(screen.getByTestId("megapixel-budget")).toBeInTheDocument()
+        })
+
+        it("displays correct megapixel value for 1MP", () => {
+            // 1024 * 1024 = 1,048,576 pixels ≈ 1.0 MP
+            renderWithTooltip(
+                <MegapixelBudget width={1024} height={1024} maxPixels={2_000_000} />
+            )
+
+            expect(screen.getByTestId("megapixel-budget")).toHaveTextContent("1.0 MP")
+        })
+
+        it("displays dimensions", () => {
+            renderWithTooltip(
+                <MegapixelBudget width={1920} height={1080} maxPixels={4_000_000} />
+            )
+
+            expect(screen.getByTestId("megapixel-budget")).toHaveTextContent(
+                "1920 × 1080"
+            )
+        })
+
+        it("shows progress bar when limit exists", () => {
+            renderWithTooltip(
+                <MegapixelBudget width={1024} height={1024} maxPixels={2_000_000} />
+            )
+
+            expect(screen.getByTestId("budget-progress")).toBeInTheDocument()
+        })
+
+        it("does not show progress bar when maxPixels is Infinity", () => {
+            renderWithTooltip(
+                <MegapixelBudget width={1024} height={1024} maxPixels={Infinity} />
+            )
+
+            expect(screen.queryByTestId("budget-progress")).not.toBeInTheDocument()
+        })
+
+        it("shows warning when over limit", () => {
+            // 2000 * 2000 = 4,000,000 > 1,000,000 max
+            renderWithTooltip(
+                <MegapixelBudget width={2000} height={2000} maxPixels={1_000_000} />
+            )
+
+            expect(screen.getByTestId("budget-warning")).toHaveTextContent(
+                "Exceeds model limit"
+            )
+        })
+
+        it("shows dimension warning when provided and not over limit", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    dimensionWarning="Custom warning text"
+                />
+            )
+
+            expect(screen.getByTestId("budget-warning")).toHaveTextContent(
+                "Custom warning text"
+            )
+        })
+
+        it("shows over-limit warning instead of dimension warning when both apply", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={2000}
+                    height={2000}
+                    maxPixels={1_000_000}
+                    dimensionWarning="Custom warning text"
+                />
+            )
+
+            expect(screen.getByTestId("budget-warning")).toHaveTextContent(
+                "Exceeds model limit"
+            )
+            expect(screen.getByTestId("budget-warning")).not.toHaveTextContent(
+                "Custom warning text"
+            )
+        })
+    })
+
+    describe("compact view", () => {
+        it("renders compact budget display", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    compact
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget-compact")).toBeInTheDocument()
+        })
+
+        it("displays megapixel value in compact mode", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    compact
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget-compact")).toHaveTextContent(
+                "1.0 MP"
+            )
+        })
+
+        it("displays percentage in compact mode when has limit", () => {
+            // 1MP out of 2MP = 50%
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1000}
+                    height={1000}
+                    maxPixels={2_000_000}
+                    compact
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget-compact")).toHaveTextContent("50%")
+        })
+    })
+
+    describe("certainty indicators", () => {
+        it("renders exact certainty icon in expanded view", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    outputCertainty="exact"
+                />
+            )
+
+            // The certainty icon should be present (CheckCircle2 for exact)
+            expect(screen.getByTestId("megapixel-budget")).toBeInTheDocument()
+        })
+
+        it("renders compact view with certainty when not over limit", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    outputCertainty="likely"
+                    compact
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget-compact")).toBeInTheDocument()
+        })
+    })
+
+    describe("custom className", () => {
+        it("applies custom className to expanded view", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    className="custom-test-class"
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget")).toHaveClass("custom-test-class")
+        })
+
+        it("applies custom className to compact view", () => {
+            renderWithTooltip(
+                <MegapixelBudget
+                    width={1024}
+                    height={1024}
+                    maxPixels={2_000_000}
+                    className="custom-test-class"
+                    compact
+                />
+            )
+
+            expect(screen.getByTestId("megapixel-budget-compact")).toHaveClass(
+                "custom-test-class"
+            )
+        })
+    })
+})
diff --git a/components/studio/controls/prompt-section-helpers.test.ts b/components/studio/controls/prompt-section-helpers.test.ts
new file mode 100644
index 0000000..f02388e
--- /dev/null
+++ b/components/studio/controls/prompt-section-helpers.test.ts
@@ -0,0 +1,280 @@
+/**
+ * Tests for prompt-section-helpers.ts
+ *
+ * These tests verify the extracted pure utility functions
+ * maintain their expected behavior after extraction.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import * as React from "react";
+import {
+  cancelScheduledRaf,
+  clearScheduledDebounce,
+  getPromptSetterByType,
+  isSubmitKeyboardShortcut,
+  maybeInitializeDisplayState,
+  notifyContentChangeDebounced,
+} from "./prompt-section-helpers";
+
+describe("prompt-section-helpers", () => {
+  describe("cancelScheduledRaf", () => {
+    it("cancels animation frame when rafIdRef.current is not null", () => {
+      const cancelAnimationFrameSpy = vi.spyOn(window, "cancelAnimationFrame");
+      const rafIdRef = { current: 123 };
+
+      cancelScheduledRaf(rafIdRef);
+
+      expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(123);
+      cancelAnimationFrameSpy.mockRestore();
+    });
+
+    it("does nothing when rafIdRef.current is null", () => {
+      const cancelAnimationFrameSpy = vi.spyOn(window, "cancelAnimationFrame");
+      const rafIdRef = { current: null };
+
+      cancelScheduledRaf(rafIdRef);
+
+      expect(cancelAnimationFrameSpy).not.toHaveBeenCalled();
+      cancelAnimationFrameSpy.mockRestore();
+    });
+  });
+
+  describe("clearScheduledDebounce", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("clears timeout when timerRef.current is not null", () => {
+      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+      const timerId = setTimeout(() => {}, 1000);
+      const timerRef = { current: timerId };
+
+      clearScheduledDebounce(timerRef);
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(timerId);
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it("does nothing when timerRef.current is null", () => {
+      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+      const timerRef = { current: null };
+
+      clearScheduledDebounce(timerRef);
+
+      expect(clearTimeoutSpy).not.toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+  });
+
+  describe("isSubmitKeyboardShortcut", () => {
+    it("returns true for Ctrl+Enter", () => {
+      const event = {
+        ctrlKey: true,
+        metaKey: false,
+        key: "Enter",
+      } as React.KeyboardEvent<HTMLTextAreaElement>;
+
+      expect(isSubmitKeyboardShortcut(event)).toBe(true);
+    });
+
+    it("returns true for Cmd+Enter (metaKey)", () => {
+      const event = {
+        ctrlKey: false,
+        metaKey: true,
+        key: "Enter",
+      } as React.KeyboardEvent<HTMLTextAreaElement>;
+
+      expect(isSubmitKeyboardShortcut(event)).toBe(true);
+    });
+
+    it("returns false for Enter without modifier", () => {
+      const event = {
+        ctrlKey: false,
+        metaKey: false,
+        key: "Enter",
+      } as React.KeyboardEvent<HTMLTextAreaElement>;
+
+      expect(isSubmitKeyboardShortcut(event)).toBe(false);
+    });
+
+    it("returns false for Ctrl+other key", () => {
+      const event = {
+        ctrlKey: true,
+        metaKey: false,
+        key: "a",
+      } as React.KeyboardEvent<HTMLTextAreaElement>;
+
+      expect(isSubmitKeyboardShortcut(event)).toBe(false);
+    });
+  });
+
+  describe("getPromptSetterByType", () => {
+    it("returns setPositive for 'positive' type", () => {
+      const setPositive = vi.fn();
+      const setNegative = vi.fn();
+
+      const setter = getPromptSetterByType("positive", setPositive, setNegative);
+      setter("test value");
+
+      expect(setPositive).toHaveBeenCalledWith("test value");
+      expect(setNegative).not.toHaveBeenCalled();
+    });
+
+    it("returns setNegative for 'negative' type", () => {
+      const setPositive = vi.fn();
+      const setNegative = vi.fn();
+
+      const setter = getPromptSetterByType("negative", setPositive, setNegative);
+      setter("test value");
+
+      expect(setNegative).toHaveBeenCalledWith("test value");
+      expect(setPositive).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("maybeInitializeDisplayState", () => {
+    it("does nothing when initialValue is empty", () => {
+      const setCharacterCount = vi.fn();
+      const setHasContent = vi.fn();
+      const lastHasContentRef = { current: false };
+      const callbackRef = { current: vi.fn() };
+
+      maybeInitializeDisplayState(
+        "",
+        setCharacterCount,
+        setHasContent,
+        lastHasContentRef,
+        callbackRef
+      );
+
+      expect(setCharacterCount).not.toHaveBeenCalled();
+      expect(setHasContent).not.toHaveBeenCalled();
+      expect(callbackRef.current).not.toHaveBeenCalled();
+    });
+
+    it("initializes state when initialValue has content", () => {
+      const setCharacterCount = vi.fn();
+      const setHasContent = vi.fn();
+      const lastHasContentRef = { current: false };
+      const callback = vi.fn();
+      const callbackRef = { current: callback };
+
+      maybeInitializeDisplayState(
+        "Hello",
+        setCharacterCount,
+        setHasContent,
+        lastHasContentRef,
+        callbackRef
+      );
+
+      expect(setCharacterCount).toHaveBeenCalledWith(5);
+      expect(setHasContent).toHaveBeenCalledWith(true);
+      expect(lastHasContentRef.current).toBe(true);
+      expect(callback).toHaveBeenCalledWith(true);
+    });
+
+    it("handles undefined callback gracefully", () => {
+      const setCharacterCount = vi.fn();
+      const setHasContent = vi.fn();
+      const lastHasContentRef = { current: false };
+      const callbackRef = { current: undefined };
+
+      expect(() => {
+        maybeInitializeDisplayState(
+          "Hello",
+          setCharacterCount,
+          setHasContent,
+          lastHasContentRef,
+          callbackRef
+        );
+      }).not.toThrow();
+
+      expect(setCharacterCount).toHaveBeenCalledWith(5);
+      expect(setHasContent).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe("notifyContentChangeDebounced", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("does nothing when hasContent has not changed", () => {
+      const callback = vi.fn();
+      const lastHasContentRef = { current: true };
+      const debounceTimerRef = { current: null };
+      const callbackRef = { current: callback };
+
+      notifyContentChangeDebounced(true, lastHasContentRef, debounceTimerRef, callbackRef);
+      vi.advanceTimersByTime(500);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it("calls callback after debounce delay when hasContent changes", () => {
+      const callback = vi.fn();
+      const lastHasContentRef = { current: false };
+      const debounceTimerRef: { current: ReturnType<typeof setTimeout> | null } = { current: null };
+      const callbackRef = { current: callback };
+
+      notifyContentChangeDebounced(true, lastHasContentRef, debounceTimerRef, callbackRef);
+
+      expect(callback).not.toHaveBeenCalled();
+      expect(lastHasContentRef.current).toBe(true);
+
+      vi.advanceTimersByTime(300);
+
+      expect(callback).toHaveBeenCalledWith(true);
+    });
+
+    it("clears previous timer when called again", () => {
+      const callback = vi.fn();
+      const lastHasContentRef = { current: false };
+      const debounceTimerRef: { current: ReturnType<typeof setTimeout> | null } = { current: null };
+      const callbackRef = { current: callback };
+
+      // First call
+      notifyContentChangeDebounced(true, lastHasContentRef, debounceTimerRef, callbackRef);
+
+      // Advance partially
+      vi.advanceTimersByTime(150);
+
+      // Reset to simulate state change
+      lastHasContentRef.current = true;
+
+      // Second call with different value
+      notifyContentChangeDebounced(false, lastHasContentRef, debounceTimerRef, callbackRef);
+
+      // Advance past first timer (should be cleared)
+      vi.advanceTimersByTime(150);
+
+      // Should not have been called yet
+      expect(callback).not.toHaveBeenCalled();
+
+      // Complete second timer
+      vi.advanceTimersByTime(150);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith(false);
+    });
+
+    it("handles undefined callback gracefully", () => {
+      const lastHasContentRef = { current: false };
+      const debounceTimerRef: { current: ReturnType<typeof setTimeout> | null } = { current: null };
+      const callbackRef = { current: undefined };
+
+      expect(() => {
+        notifyContentChangeDebounced(true, lastHasContentRef, debounceTimerRef, callbackRef);
+        vi.advanceTimersByTime(300);
+      }).not.toThrow();
+    });
+  });
+});
diff --git a/components/studio/controls/prompt-section-helpers.ts b/components/studio/controls/prompt-section-helpers.ts
new file mode 100644
index 0000000..1e2571f
--- /dev/null
+++ b/components/studio/controls/prompt-section-helpers.ts
@@ -0,0 +1,73 @@
+/**
+ * Pure helper functions for PromptSection component
+ *
+ * Module-scoped utilities extracted to reduce component complexity and file size.
+ * These functions are pure and have no side effects beyond their explicit parameters.
+ */
+
+import * as React from "react";
+
+/** Safely cancels an animation frame if one is scheduled */
+export function cancelScheduledRaf(rafIdRef: React.RefObject<number | null>): void {
+  if (rafIdRef.current !== null) {
+    cancelAnimationFrame(rafIdRef.current);
+  }
+}
+
+/** Safely clears a debounce timer if one is scheduled */
+export function clearScheduledDebounce(
+  timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>
+): void {
+  if (timerRef.current !== null) {
+    clearTimeout(timerRef.current);
+  }
+}
+
+/** Creates a debounced content change notifier */
+export function notifyContentChangeDebounced(
+  newHasContent: boolean,
+  lastHasContentRef: React.MutableRefObject<boolean>,
+  debounceTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>,
+  callbackRef: React.RefObject<((hasContent: boolean) => void) | undefined>
+): void {
+  if (newHasContent === lastHasContentRef.current) return;
+
+  lastHasContentRef.current = newHasContent;
+  clearScheduledDebounce(debounceTimerRef);
+  debounceTimerRef.current = setTimeout(() => {
+    callbackRef.current?.(newHasContent);
+    debounceTimerRef.current = null;
+  }, 300);
+}
+
+/** Checks if the keyboard event is a submit shortcut (Ctrl/Cmd + Enter) */
+export function isSubmitKeyboardShortcut(
+  e: React.KeyboardEvent<HTMLTextAreaElement>
+): boolean {
+  return (e.ctrlKey || e.metaKey) && e.key === "Enter";
+}
+
+/** Gets the appropriate setter function based on prompt type */
+export function getPromptSetterByType(
+  promptType: "positive" | "negative",
+  setPositive: (v: string) => void,
+  setNegative: (v: string) => void
+): (v: string) => void {
+  return promptType === "positive" ? setPositive : setNegative;
+}
+
+/** Initializes display state if there's an initial value */
+export function maybeInitializeDisplayState(
+  initialValue: string,
+  setCharacterCount: (n: number) => void,
+  setHasContent: (b: boolean) => void,
+  lastHasContentRef: React.MutableRefObject<boolean>,
+  callbackRef: React.RefObject<((hasContent: boolean) => void) | undefined>
+): void {
+  if (!initialValue) return;
+  const hasInitialContent = initialValue.length > 0;
+  setCharacterCount(initialValue.length);
+  setHasContent(hasInitialContent);
+  lastHasContentRef.current = hasInitialContent;
+  callbackRef.current?.(hasInitialContent);
+}
diff --git a/components/studio/controls/prompt-section-parts.tsx b/components/studio/controls/prompt-section-parts.tsx
new file mode 100644
index 0000000..3f2c25c
--- /dev/null
+++ b/components/studio/controls/prompt-section-parts.tsx
@@ -0,0 +1,318 @@
+"use client";
+
+/**
+ * Sub-components for PromptSection
+ * Extracted to reduce complexity and file size of the main component.
+ */
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { EnhanceButton } from "@/components/ui/enhance-button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { PromptLibraryButton, SavePromptButton } from "@/components/studio/features/prompt-library";
+import { ChevronDown, History, Lightbulb, Wand2, X } from "lucide-react";
+import * as React from "react";
+
+/* -----------------------------------------------------------------------------
+ * ClearPromptButton
+ * -------------------------------------------------------------------------- */
+
+export interface ClearPromptButtonProps {
+  visible: boolean;
+  onClick: () => void;
+}
+
+/** Conditionally renders a clear button for the prompt input */
+export function ClearPromptButton({ visible, onClick }: ClearPromptButtonProps) {
+  if (!visible) return null;
+  
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="absolute right-2 top-2 h-6 w-6 opacity-50 hover:opacity-100"
+      onClick={onClick}
+      data-testid="clear-prompt"
+    >
+      <X className="h-3.5 w-3.5" />
+    </Button>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * PromptHeader
+ * -------------------------------------------------------------------------- */
+
+export interface PromptHeaderProps {
+  promptHistoryLength: number;
+  onToggleHistory: () => void;
+  characterCount: number;
+  maxLength: number;
+  isNearLimit: boolean;
+  /** When true, the header is hidden */
+  hidden?: boolean;
+}
+
+/** Renders the prompt label, history toggle, and character count */
+export function PromptHeader({
+  promptHistoryLength,
+  onToggleHistory,
+  characterCount,
+  maxLength,
+  isNearLimit,
+  hidden = false,
+}: PromptHeaderProps) {
+  if (hidden) return null;
+
+  const charCountClass = isNearLimit ? "text-destructive" : "text-muted-foreground";
+
+  return (
+    <div className="flex items-center justify-between">
+      <Label htmlFor="prompt" className="text-sm font-medium flex items-center gap-2">
+        <Wand2 className="h-3.5 w-3.5 text-primary" />
+        Prompt
+      </Label>
+      <div className="flex items-center gap-1">
+        {promptHistoryLength > 0 && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={onToggleHistory}
+                data-testid="history-toggle"
+              >
+                <History className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Recent prompts</TooltipContent>
+          </Tooltip>
+        )}
+        <span className={`text-xs tabular-nums ${charCountClass}`} data-testid="character-count">
+          {characterCount}/{maxLength}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * PromptActionButtons
+ * -------------------------------------------------------------------------- */
+
+export interface PromptActionButtonsProps {
+  showLibrary: boolean;
+  hasContent: boolean;
+  isGenerating: boolean;
+  isEnhancing: boolean;
+  promptType: "positive" | "negative";
+  getContent: () => string;
+  onOpenSaveLibrary: (content: string, type: "positive" | "negative") => void;
+  onOpenBrowseLibrary: (type: "positive" | "negative") => void;
+  onEnhance?: () => void;
+  onCancelEnhance?: () => void;
+}
+
+/** Renders the action buttons (save, library, enhance) inside a prompt textarea */
+export function PromptActionButtons({
+  showLibrary,
+  hasContent,
+  isGenerating,
+  isEnhancing,
+  promptType,
+  getContent,
+  onOpenSaveLibrary,
+  onOpenBrowseLibrary,
+  onEnhance,
+  onCancelEnhance,
+}: PromptActionButtonsProps) {
+  const handleSaveClick = () => {
+    const content = getContent();
+    if (content.trim()) {
+      onOpenSaveLibrary(content, promptType);
+    }
+  };
+
+  const handleBrowseClick = () => {
+    onOpenBrowseLibrary(promptType);
+  };
+
+  const showEnhanceButton = onEnhance !== undefined && onCancelEnhance !== undefined;
+
+  return (
+    <div className="absolute bottom-2 right-2 z-10 flex items-center gap-1">
+      {showLibrary && (
+        <>
+          <SavePromptButton
+            variant="input"
+            onClick={handleSaveClick}
+            disabled={!hasContent || isGenerating}
+            className="relative right-auto bottom-auto"
+          />
+          <PromptLibraryButton
+            variant="input"
+            onClick={handleBrowseClick}
+            disabled={isGenerating}
+            className="relative right-auto bottom-auto"
+          />
+        </>
+      )}
+      {showEnhanceButton && (
+        <EnhanceButton
+          isEnhancing={isEnhancing}
+          disabled={!hasContent || isGenerating}
+          onEnhance={onEnhance}
+          onCancel={onCancelEnhance}
+          className="relative right-auto bottom-auto"
+        />
+      )}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * PromptHistoryDropdown
+ * -------------------------------------------------------------------------- */
+
+export interface PromptHistoryDropdownProps {
+  promptHistory: string[];
+  onSelect: (prompt: string) => void;
+}
+
+/** Renders the history dropdown list */
+export function PromptHistoryDropdown({ promptHistory, onSelect }: PromptHistoryDropdownProps) {
+  return (
+    <div
+      className="rounded-md border border-border bg-popover p-1 divide-y divide-border/50 max-w-full"
+      data-testid="prompt-history"
+    >
+      {promptHistory.slice(0, 5).map((historyPrompt, index) => (
+        <Button
+          key={index}
+          variant="ghost"
+          className="w-full justify-start text-left text-xs h-auto py-2 px-2 rounded-none first:rounded-t last:rounded-b"
+          onClick={() => onSelect(historyPrompt)}
+        >
+          <span className="truncate block w-full">{historyPrompt}</span>
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * SuggestionChips
+ * -------------------------------------------------------------------------- */
+
+export interface SuggestionChipsProps {
+  suggestions: string[];
+  isLoadingSuggestions: boolean;
+  onSuggestionClick: (suggestion: string) => void;
+}
+
+/** Renders suggestion chips with lightbulb icon */
+export function SuggestionChips({ suggestions, isLoadingSuggestions, onSuggestionClick }: SuggestionChipsProps) {
+  const lightbulbClass = isLoadingSuggestions ? "text-yellow-400 animate-lightbulb-glow" : "text-muted-foreground";
+
+  return (
+    <div className="flex flex-wrap gap-1.5" data-testid="suggestions">
+      <Lightbulb className={`h-3.5 w-3.5 mt-1 transition-all duration-300 ${lightbulbClass}`} />
+      {suggestions.map((suggestion, index) => (
+        <Badge
+          key={index}
+          variant="secondary"
+          className="cursor-pointer hover:bg-primary/20 transition-colors text-xs"
+          onClick={() => onSuggestionClick(suggestion)}
+        >
+          + {suggestion}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * NegativePromptSectionContent
+ * -------------------------------------------------------------------------- */
+
+export interface NegativePromptSectionContentProps {
+  showNegative: boolean;
+  onOpenChange: (open: boolean) => void;
+  negativePromptRef: React.RefObject<HTMLTextAreaElement | null>;
+  onInput: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  isGenerating: boolean;
+  isEnhancingNegativePrompt: boolean;
+  hasContent: boolean;
+  showLibrary: boolean;
+  onOpenSaveLibrary: (content: string, type: "positive" | "negative") => void;
+  onOpenBrowseLibrary: (type: "positive" | "negative") => void;
+  onEnhanceNegativePrompt?: () => void;
+  onCancelEnhanceNegativePrompt?: () => void;
+}
+
+/** Renders the collapsible negative prompt section */
+export function NegativePromptSectionContent({
+  showNegative,
+  onOpenChange,
+  negativePromptRef,
+  onInput,
+  isGenerating,
+  isEnhancingNegativePrompt,
+  hasContent,
+  showLibrary,
+  onOpenSaveLibrary,
+  onOpenBrowseLibrary,
+  onEnhanceNegativePrompt,
+  onCancelEnhanceNegativePrompt,
+}: NegativePromptSectionContentProps) {
+  const getContent = () => negativePromptRef.current?.value ?? "";
+  const chevronClass = showNegative ? "rotate-180" : "";
+
+  return (
+    <Collapsible open={showNegative} onOpenChange={onOpenChange}>
+      <CollapsibleTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="w-full justify-between text-muted-foreground hover:text-foreground cursor-pointer"
+          data-testid="negative-prompt-toggle"
+        >
+          <span className="text-xs">Negative Prompt</span>
+          <ChevronDown className={`h-3.5 w-3.5 transition-transform ${chevronClass}`} />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pt-2 data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden">
+        <div className="relative w-full min-w-0">
+          <Textarea
+            ref={negativePromptRef}
+            placeholder="What to avoid in the image..."
+            defaultValue=""
+            onChange={onInput}
+            disabled={isGenerating || isEnhancingNegativePrompt}
+            className="min-h-16 max-h-48 overflow-y-auto resize-none pb-10 bg-background/50 border-border/50 text-sm focus-visible:ring-0 focus-visible:border-primary break-words [overflow-wrap:anywhere] block w-0 min-w-full"
+            data-testid="negative-prompt-input"
+          />
+          <PromptActionButtons
+            showLibrary={showLibrary}
+            hasContent={hasContent}
+            isGenerating={isGenerating}
+            isEnhancing={isEnhancingNegativePrompt}
+            promptType="negative"
+            getContent={getContent}
+            onOpenSaveLibrary={onOpenSaveLibrary}
+            onOpenBrowseLibrary={onOpenBrowseLibrary}
+            onEnhance={onEnhanceNegativePrompt}
+            onCancelEnhance={onCancelEnhanceNegativePrompt}
+          />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/components/studio/controls/prompt-section-types.ts b/components/studio/controls/prompt-section-types.ts
new file mode 100644
index 0000000..892c533
--- /dev/null
+++ b/components/studio/controls/prompt-section-types.ts
@@ -0,0 +1,65 @@
+/**
+ * Type definitions for PromptSection component
+ *
+ * Extracted to reduce main component file size while maintaining
+ * backward compatibility through re-exports.
+ */
+
+import * as React from "react";
+
+export interface PromptSectionProps {
+  /** Maximum character limit for prompt */
+  maxLength?: number;
+  /** Whether generation is in progress */
+  isGenerating?: boolean;
+  /** Whether to show the negative prompt section (model-dependent) */
+  showNegativePrompt?: boolean;
+  /** Recent prompts for history */
+  promptHistory?: string[];
+  /** Callback when a history item is selected */
+  onSelectHistory?: (prompt: string) => void;
+  /** Enhancement suggestions */
+  suggestions?: string[];
+  /** Whether AI suggestions are being loaded */
+  isLoadingSuggestions?: boolean;
+  /** Callback when a suggestion is clicked */
+  onAddSuggestion?: (suggestion: string) => void;
+  /** Whether the main prompt is being enhanced */
+  isEnhancingPrompt?: boolean;
+  /** Callback to trigger prompt enhancement */
+  onEnhancePrompt?: () => void;
+  /** Callback to cancel prompt enhancement */
+  onCancelEnhancePrompt?: () => void;
+  /** Whether the negative prompt is being enhanced */
+  isEnhancingNegativePrompt?: boolean;
+  /** Callback to trigger negative prompt enhancement */
+  onEnhanceNegativePrompt?: () => void;
+  /** Callback to cancel negative prompt enhancement */
+  onCancelEnhanceNegativePrompt?: () => void;
+  /** Callback when prompt content changes (for enabling/disabling generate button) */
+  onContentChange?: (hasContent: boolean) => void;
+  /** Additional class names */
+  className?: string;
+  /** Ref to expose prompt reading functions to parent */
+  apiRef?: React.RefObject<PromptSectionAPI | null>;
+  /** Hide the header label (when wrapped in CollapsibleSection) */
+  hideHeader?: boolean;
+  /** Whether to show prompt library features (requires auth) */
+  showLibrary?: boolean;
+}
+
+export interface PromptSectionAPI {
+  getPrompt: () => string;
+  getNegativePrompt: () => string;
+  setPrompt: (value: string) => void;
+  setNegativePrompt: (value: string) => void;
+  focusPrompt: () => void;
+  /** Get current character count */
+  getCharacterCount: () => number;
+  /** Get maximum character length */
+  getMaxLength: () => number;
+  /** Check if history is currently open */
+  isHistoryOpen: () => boolean;
+  /** Toggle history visibility */
+  toggleHistory: () => void;
+}
diff --git a/components/studio/controls/prompt-section.test.tsx b/components/studio/controls/prompt-section.test.tsx
new file mode 100644
index 0000000..4db7229
--- /dev/null
+++ b/components/studio/controls/prompt-section.test.tsx
@@ -0,0 +1,244 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { PromptSection, type PromptSectionProps, type PromptSectionAPI } from "./prompt-section";
+import * as React from "react";
+
+// Mock the prompt library components
+vi.mock("@/components/studio/features/prompt-library", () => ({
+  PromptLibrary: ({ isOpen }: { isOpen: boolean }) =>
+    isOpen ? <div data-testid="prompt-library-modal">Library Modal</div> : null,
+  PromptLibraryButton: ({ onClick, disabled }: { onClick: () => void; disabled?: boolean }) => (
+    <button data-testid="library-button" onClick={onClick} disabled={disabled}>
+      Library
+    </button>
+  ),
+  SavePromptButton: ({ onClick, disabled }: { onClick: () => void; disabled?: boolean }) => (
+    <button data-testid="save-prompt-button" onClick={onClick} disabled={disabled}>
+      Save
+    </button>
+  ),
+}));
+
+// Mock the usePromptInput hook
+vi.mock("@/hooks/use-prompt-input", () => ({
+  usePromptInput: () => {
+    const promptRef = React.useRef<HTMLTextAreaElement>(null);
+    const negativePromptRef = React.useRef<HTMLTextAreaElement>(null);
+    const promptSubscribers = React.useRef<Set<(value: string) => void>>(new Set());
+    const negativeSubscribers = React.useRef<Set<(value: string) => void>>(new Set());
+
+    return {
+      promptRef,
+      negativePromptRef,
+      getPrompt: () => promptRef.current?.value ?? "",
+      setPrompt: (value: string) => {
+        if (promptRef.current) promptRef.current.value = value;
+        promptSubscribers.current.forEach((cb) => cb(value));
+      },
+      getNegativePrompt: () => negativePromptRef.current?.value ?? "",
+      setNegativePrompt: (value: string) => {
+        if (negativePromptRef.current) negativePromptRef.current.value = value;
+        negativeSubscribers.current.forEach((cb) => cb(value));
+      },
+      subscribeToPrompt: (cb: (value: string) => void) => {
+        promptSubscribers.current.add(cb);
+        return () => promptSubscribers.current.delete(cb);
+      },
+      subscribeToNegativePrompt: (cb: (value: string) => void) => {
+        negativeSubscribers.current.add(cb);
+        return () => negativeSubscribers.current.delete(cb);
+      },
+    };
+  },
+}));
+
+describe("PromptSection", () => {
+  const defaultProps: PromptSectionProps = {};
+
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  describe("rendering", () => {
+    it("renders the prompt section", () => {
+      render(<PromptSection {...defaultProps} />);
+      expect(screen.getByTestId("prompt-section")).toBeInTheDocument();
+    });
+
+    it("renders the prompt input", () => {
+      render(<PromptSection {...defaultProps} />);
+      expect(screen.getByTestId("prompt-input")).toBeInTheDocument();
+    });
+
+    it("renders the character count", () => {
+      render(<PromptSection {...defaultProps} />);
+      expect(screen.getByTestId("character-count")).toHaveTextContent("0/2000");
+    });
+
+    it("hides header when hideHeader is true", () => {
+      render(<PromptSection {...defaultProps} hideHeader />);
+      expect(screen.queryByTestId("character-count")).not.toBeInTheDocument();
+    });
+
+    it("renders negative prompt toggle when showNegativePrompt is true", () => {
+      render(<PromptSection {...defaultProps} showNegativePrompt />);
+      expect(screen.getByTestId("negative-prompt-toggle")).toBeInTheDocument();
+    });
+
+    it("hides negative prompt toggle when showNegativePrompt is false", () => {
+      render(<PromptSection {...defaultProps} showNegativePrompt={false} />);
+      expect(screen.queryByTestId("negative-prompt-toggle")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("prompt history", () => {
+    it("shows history toggle when promptHistory is provided", () => {
+      render(<PromptSection {...defaultProps} promptHistory={["test prompt"]} />);
+      expect(screen.getByTestId("history-toggle")).toBeInTheDocument();
+    });
+
+    it("hides history toggle when promptHistory is empty", () => {
+      render(<PromptSection {...defaultProps} promptHistory={[]} />);
+      expect(screen.queryByTestId("history-toggle")).not.toBeInTheDocument();
+    });
+
+    it("shows history dropdown when toggle is clicked", async () => {
+      render(<PromptSection {...defaultProps} promptHistory={["test prompt 1", "test prompt 2"]} />);
+
+      const toggle = screen.getByTestId("history-toggle");
+      await userEvent.click(toggle);
+
+      expect(screen.getByTestId("prompt-history")).toBeInTheDocument();
+    });
+
+    it("calls onSelectHistory when a history item is clicked", async () => {
+      const onSelectHistory = vi.fn();
+      render(
+        <PromptSection
+          {...defaultProps}
+          promptHistory={["history prompt"]}
+          onSelectHistory={onSelectHistory}
+        />
+      );
+
+      const toggle = screen.getByTestId("history-toggle");
+      await userEvent.click(toggle);
+
+      const historyItem = screen.getByText("history prompt");
+      await userEvent.click(historyItem);
+
+      expect(onSelectHistory).toHaveBeenCalledWith("history prompt");
+    });
+  });
+
+  describe("suggestions", () => {
+    it("shows suggestions when provided", () => {
+      render(<PromptSection {...defaultProps} suggestions={["cinematic", "dramatic"]} />);
+      expect(screen.getByTestId("suggestions")).toBeInTheDocument();
+      expect(screen.getByText("+ cinematic")).toBeInTheDocument();
+      expect(screen.getByText("+ dramatic")).toBeInTheDocument();
+    });
+
+    it("hides suggestions when empty", () => {
+      render(<PromptSection {...defaultProps} suggestions={[]} />);
+      expect(screen.queryByTestId("suggestions")).not.toBeInTheDocument();
+    });
+
+    it("calls onAddSuggestion when a suggestion is clicked", async () => {
+      const onAddSuggestion = vi.fn();
+      render(
+        <PromptSection
+          {...defaultProps}
+          suggestions={["cinematic"]}
+          onAddSuggestion={onAddSuggestion}
+        />
+      );
+
+      await userEvent.click(screen.getByText("+ cinematic"));
+      expect(onAddSuggestion).toHaveBeenCalledWith("cinematic");
+    });
+  });
+
+  describe("negative prompt", () => {
+    it("expands negative prompt section when toggle is clicked", async () => {
+      render(<PromptSection {...defaultProps} showNegativePrompt />);
+
+      const toggle = screen.getByTestId("negative-prompt-toggle");
+      await userEvent.click(toggle);
+
+      expect(screen.getByTestId("negative-prompt-input")).toBeInTheDocument();
+    });
+  });
+
+  describe("disabled states", () => {
+    it("disables prompt input when isGenerating is true", () => {
+      render(<PromptSection {...defaultProps} isGenerating />);
+      expect(screen.getByTestId("prompt-input")).toBeDisabled();
+    });
+
+    it("disables prompt input when isEnhancingPrompt is true", () => {
+      render(<PromptSection {...defaultProps} isEnhancingPrompt />);
+      expect(screen.getByTestId("prompt-input")).toBeDisabled();
+    });
+  });
+
+  describe("API ref", () => {
+    it("exposes getPrompt and setPrompt via apiRef", async () => {
+      const apiRef = React.createRef<PromptSectionAPI>();
+      render(<PromptSection {...defaultProps} apiRef={apiRef} />);
+
+      expect(apiRef.current).not.toBeNull();
+      expect(typeof apiRef.current?.getPrompt).toBe("function");
+      expect(typeof apiRef.current?.setPrompt).toBe("function");
+    });
+
+    it("exposes getMaxLength via apiRef", () => {
+      const apiRef = React.createRef<PromptSectionAPI>();
+      render(<PromptSection {...defaultProps} apiRef={apiRef} maxLength={1500} />);
+
+      expect(apiRef.current?.getMaxLength()).toBe(1500);
+    });
+  });
+
+  describe("library features", () => {
+    it("shows library buttons when showLibrary is true", () => {
+      render(<PromptSection {...defaultProps} showLibrary />);
+      expect(screen.getByTestId("library-button")).toBeInTheDocument();
+    });
+
+    it("hides library buttons when showLibrary is false", () => {
+      render(<PromptSection {...defaultProps} showLibrary={false} />);
+      expect(screen.queryByTestId("library-button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("content change callback", () => {
+    it("calls onContentChange when prompt has content", async () => {
+      const onContentChange = vi.fn();
+      render(<PromptSection {...defaultProps} onContentChange={onContentChange} />);
+
+      const input = screen.getByTestId("prompt-input");
+      await userEvent.type(input, "Hello");
+
+      // Advance timers for debounce
+      vi.advanceTimersByTime(500);
+
+      await waitFor(() => {
+        expect(onContentChange).toHaveBeenCalledWith(true);
+      });
+    });
+  });
+
+  describe("custom className", () => {
+    it("applies custom className", () => {
+      render(<PromptSection {...defaultProps} className="custom-class" />);
+      expect(screen.getByTestId("prompt-section")).toHaveClass("custom-class");
+    });
+  });
+});
diff --git a/components/studio/controls/reference-image-picker.test.tsx b/components/studio/controls/reference-image-picker.test.tsx
index b8113ae..4cd3e92 100644
--- a/components/studio/controls/reference-image-picker.test.tsx
+++ b/components/studio/controls/reference-image-picker.test.tsx
@@ -24,7 +24,6 @@ vi.mock("sonner", () => ({
 // Mock next/image
 vi.mock("next/image", () => ({
   default: ({ src, alt, ...props }: ImageProps) => (
-    // eslint-disable-next-line @next/next/no-img-element
     <img src={typeof src === "string" ? src : "default" in src ? src.default.src : src.src} alt={alt} {...props} />
   ),
 }));
diff --git a/components/studio/controls/reference-images-browser-modal.test.tsx b/components/studio/controls/reference-images-browser-modal.test.tsx
index 3d771ba..3c4c1fe 100644
--- a/components/studio/controls/reference-images-browser-modal.test.tsx
+++ b/components/studio/controls/reference-images-browser-modal.test.tsx
@@ -25,7 +25,6 @@ vi.mock("@/hooks/mutations/use-delete-image", () => ({
 // Mock next/image
 vi.mock("next/image", () => ({
   default: ({ ...props }: React.ComponentProps<"img"> & { fill?: boolean }) => (
-    // eslint-disable-next-line @next/next/no-img-element
     <img {...props} alt={props.alt ?? ""} data-testid="mock-image" />
   ),
 }));
diff --git a/components/studio/controls/video-reference-image-picker.test.tsx b/components/studio/controls/video-reference-image-picker.test.tsx
index 937a466..298a721 100644
--- a/components/studio/controls/video-reference-image-picker.test.tsx
+++ b/components/studio/controls/video-reference-image-picker.test.tsx
@@ -31,7 +31,6 @@ vi.mock("@/hooks/mutations/use-delete-image", () => ({
 // Mock next/image
 vi.mock("next/image", () => ({
     default: ({ src, alt }: { src: string; alt: string }) => (
-        // eslint-disable-next-line @next/next/no-img-element
         <img src={src} alt={alt} data-testid="mock-image" />
     ),
 }))
diff --git a/components/studio/features/generation/controls-view-badges.tsx b/components/studio/features/generation/controls-view-badges.tsx
new file mode 100644
index 0000000..4c02126
--- /dev/null
+++ b/components/studio/features/generation/controls-view-badges.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+/**
+ * Badge sub-components for ControlsView collapsed content
+ * Extracted to reduce file size and improve maintainability.
+ */
+
+import { Button } from "@/components/ui/button";
+import type { ModelDefinition } from "@/lib/config/models";
+import { cn } from "@/lib/utils";
+import type { GenerationOptions, VideoSettings } from "@/components/studio";
+import { Wand2, X, Volume2 } from "lucide-react";
+import Image from "next/image";
+import type * as React from "react";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared constants
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const BADGE_BASE_CLASS =
+  "flex items-center gap-1.5 px-2 h-[21px] rounded-none text-xs font-bold bg-orange-500/15 text-orange-600 dark:text-orange-400 border border-orange-500/20";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure helper functions
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Determines if the logo needs dark-mode inversion */
+export function shouldInvertLogo(logo: string): boolean {
+  return logo.includes("openai.svg") || logo.includes("flux.svg");
+}
+
+/** Compute badge text for seed display */
+export function seedBadgeText(seed: number): string {
+  return seed === -1 ? "Random" : String(seed);
+}
+
+/** Count active options */
+export function countActiveOptions(options: GenerationOptions): number {
+  return Object.values(options).filter(Boolean).length;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Badge sub-components
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ModelBadgeProps {
+  modelData: ModelDefinition | undefined;
+  modelId: string;
+}
+
+/** Renders the collapsed badge for the Model section */
+export function ModelBadge({ modelData, modelId }: ModelBadgeProps): React.ReactElement {
+  const hasLogo = !!modelData?.logo;
+  return (
+    <span className={cn(BADGE_BASE_CLASS, "truncate max-w-[140px]")}>
+      {hasLogo ? (
+        <Image
+          src={modelData.logo}
+          alt=""
+          width={14}
+          height={14}
+          className={cn("shrink-0", shouldInvertLogo(modelData.logo) && "dark:invert")}
+        />
+      ) : (
+        <Wand2 className="h-3 w-3 shrink-0" />
+      )}
+      {modelData?.displayName ?? modelId}
+    </span>
+  );
+}
+
+interface VideoFramesBadgeProps {
+  frameCount: number;
+}
+
+/** Renders the collapsed badge for Video Frames section */
+export function VideoFramesBadge({ frameCount }: VideoFramesBadgeProps): React.ReactElement | null {
+  if (frameCount === 0) return null;
+  const plural = frameCount !== 1 ? "s" : "";
+  return (
+    <span className={cn(BADGE_BASE_CLASS, "tabular-nums")}>
+      {frameCount} frame{plural}
+    </span>
+  );
+}
+
+interface VideoSettingsBadgeProps {
+  settings: VideoSettings;
+  supportsAudio: boolean;
+}
+
+/** Renders the collapsed badge for Video Settings section */
+export function VideoSettingsBadge({ settings, supportsAudio }: VideoSettingsBadgeProps): React.ReactElement {
+  const showAudioIcon = supportsAudio && settings.audio;
+  return (
+    <span className={cn(BADGE_BASE_CLASS, "tabular-nums")}>
+      {settings.duration}s
+      {showAudioIcon && <Volume2 className="h-3 w-3" />}
+    </span>
+  );
+}
+
+interface DimensionsBadgeProps {
+  width: number;
+  height: number;
+  megapixels: string;
+  isOverLimit: boolean;
+  percentOfLimit: number;
+  hasPixelLimit: boolean;
+}
+
+/** Renders the collapsed badge for Dimensions section */
+export function DimensionsBadge({
+  width,
+  height,
+  megapixels,
+  isOverLimit,
+  percentOfLimit,
+  hasPixelLimit,
+}: DimensionsBadgeProps): React.ReactElement {
+  const limitBadgeClass = isOverLimit
+    ? "bg-destructive/15 text-destructive border-destructive/20"
+    : "bg-muted text-muted-foreground border-transparent";
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn(BADGE_BASE_CLASS, "tabular-nums")}>
+        {width}×{height}
+      </span>
+      {hasPixelLimit && (
+        <span
+          className={cn(
+            "flex items-center justify-center px-2 h-[21px] rounded-none text-xs font-bold tabular-nums border",
+            limitBadgeClass
+          )}
+        >
+          {megapixels} ({percentOfLimit.toFixed(1)}%)
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface OptionsBadgeProps {
+  activeCount: number;
+}
+
+/** Renders the collapsed badge for Options section */
+export function OptionsBadge({ activeCount }: OptionsBadgeProps): React.ReactElement | null {
+  if (activeCount === 0) return null;
+  return (
+    <span className={cn(BADGE_BASE_CLASS, "tabular-nums")}>
+      {activeCount} active
+    </span>
+  );
+}
+
+interface BatchModeBadgeProps {
+  enabled: boolean;
+  count: number;
+}
+
+/** Renders the collapsed badge for Batch Mode section */
+export function BatchModeBadge({ enabled, count }: BatchModeBadgeProps): React.ReactElement | null {
+  if (!enabled) return null;
+  return (
+    <span className={cn(BADGE_BASE_CLASS, "tabular-nums")}>
+      {count} images
+    </span>
+  );
+}
+
+interface ClearButtonProps {
+  onClear: () => void;
+  show: boolean;
+}
+
+/** Renders a clear button for sections with clearable content */
+export function ClearButton({ onClear, show }: ClearButtonProps): React.ReactElement | null {
+  if (!show) return null;
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={onClear}
+      className="h-6 px-1.5 text-[10px] text-muted-foreground hover:text-destructive flex items-center gap-1"
+    >
+      <X className="h-3 w-3" />
+      Clear
+    </Button>
+  );
+}
diff --git a/components/studio/features/generation/controls-view-sections.tsx b/components/studio/features/generation/controls-view-sections.tsx
new file mode 100644
index 0000000..1ed629b
--- /dev/null
+++ b/components/studio/features/generation/controls-view-sections.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import {
+  CollapsibleSection,
+  DimensionControls,
+  DimensionHeaderControls,
+  ReferenceImagePicker,
+  VideoSettingsPanel,
+  VideoReferenceImagePicker,
+  type VideoReferenceImages,
+  type VideoSettings,
+} from "@/components/studio";
+import type { ModelDefinition, VideoDurationConstraints } from "@/lib/config/models";
+import type { AspectRatio } from "@/types/pollinations";
+import { Image as ImageIcon, Ruler, Video } from "lucide-react";
+import * as React from "react";
+import {
+  BADGE_BASE_CLASS,
+  ClearButton,
+  DimensionsBadge,
+  VideoFramesBadge,
+  VideoSettingsBadge,
+} from "./controls-view-badges";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Visibility predicate helpers (module-scope, pure)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Count how many video reference frames are set */
+export function countVideoFrames(images: VideoReferenceImages | undefined): number {
+  if (!images) return 0;
+  return (images.firstFrame ? 1 : 0) + (images.lastFrame ? 1 : 0);
+}
+
+/** Check if video frames section should render */
+export function shouldShowVideoFrames(
+  isVideoModel: boolean,
+  videoReferenceImages: VideoReferenceImages | undefined,
+  onVideoReferenceImagesChange: ((images: VideoReferenceImages) => void) | undefined
+): boolean {
+  return isVideoModel && videoReferenceImages !== undefined && onVideoReferenceImagesChange !== undefined;
+}
+
+/** Check if video settings section should render */
+export function shouldShowVideoSettings(
+  isVideoModel: boolean,
+  videoSettings: VideoSettings | undefined,
+  onVideoSettingsChange: ((settings: VideoSettings) => void) | undefined,
+  durationConstraints: VideoDurationConstraints | undefined
+): boolean {
+  return (
+    isVideoModel &&
+    videoSettings !== undefined &&
+    onVideoSettingsChange !== undefined &&
+    durationConstraints !== undefined
+  );
+}
+
+/** Check if dimensions section should render */
+export function shouldShowDimensions(aspectRatio: AspectRatio, dimensionsEnabled: boolean): boolean {
+  return aspectRatio === "custom" && dimensionsEnabled;
+}
+
+/** Check if reference image section should render */
+export function shouldShowReferenceImage(modelData: ModelDefinition | undefined): boolean {
+  return modelData?.supportsReferenceImage === true;
+}
+
+interface VideoSectionsProps {
+  videoFramesProps: { images: VideoReferenceImages; onChange: (images: VideoReferenceImages) => void } | null;
+  videoSettingsProps: {
+    settings: VideoSettings;
+    onChange: (settings: VideoSettings) => void;
+    constraints: VideoDurationConstraints;
+  } | null;
+  videoFrameCount: number;
+  supportsInterpolation: boolean;
+  supportsAudio: boolean;
+  isGenerating: boolean;
+  onClearVideoFrames: () => void;
+}
+
+export function renderVideoSections({
+  videoFramesProps,
+  videoSettingsProps,
+  videoFrameCount,
+  supportsInterpolation,
+  supportsAudio,
+  isGenerating,
+  onClearVideoFrames,
+}: VideoSectionsProps): React.ReactNode {
+  return (
+    <>
+      {videoFramesProps && (
+        <CollapsibleSection
+          title="Video Frames"
+          icon={<Video className="h-3.5 w-3.5" />}
+          testId="video-frames-section"
+          collapsedContent={<VideoFramesBadge frameCount={videoFrameCount} />}
+          rightContent={<ClearButton onClear={onClearVideoFrames} show={videoFrameCount > 0} />}
+        >
+          <VideoReferenceImagePicker
+            selectedImages={videoFramesProps.images}
+            onImagesChange={videoFramesProps.onChange}
+            supportsInterpolation={supportsInterpolation}
+            disabled={isGenerating}
+            hideHeader
+          />
+        </CollapsibleSection>
+      )}
+
+      {videoSettingsProps && (
+        <CollapsibleSection
+          title="Video Settings"
+          icon={<Video className="h-3.5 w-3.5" />}
+          testId="video-settings-section"
+          collapsedContent={<VideoSettingsBadge settings={videoSettingsProps.settings} supportsAudio={supportsAudio} />}
+        >
+          <VideoSettingsPanel
+            settings={videoSettingsProps.settings}
+            onSettingsChange={videoSettingsProps.onChange}
+            durationConstraints={videoSettingsProps.constraints}
+            supportsAudio={supportsAudio}
+            disabled={isGenerating}
+          />
+        </CollapsibleSection>
+      )}
+    </>
+  );
+}
+
+interface DimensionsSectionProps {
+  showDimensions: boolean;
+  width: number;
+  height: number;
+  megapixels: string;
+  isOverLimit: boolean;
+  percentOfLimit: number;
+  hasPixelLimit: boolean;
+  dimensionsLinked: boolean;
+  isGenerating: boolean;
+  model: string;
+  onWidthChange: (width: number) => void;
+  onHeightChange: (height: number) => void;
+  onDimensionsLinkedChange: (linked: boolean) => void;
+}
+
+export function renderDimensionsSection({
+  showDimensions,
+  width,
+  height,
+  megapixels,
+  isOverLimit,
+  percentOfLimit,
+  hasPixelLimit,
+  dimensionsLinked,
+  isGenerating,
+  model,
+  onWidthChange,
+  onHeightChange,
+  onDimensionsLinkedChange,
+}: DimensionsSectionProps): React.ReactNode {
+  if (!showDimensions) return null;
+
+  return (
+    <CollapsibleSection
+      title="Dimensions"
+      icon={<Ruler className="h-3.5 w-3.5" />}
+      testId="dimensions-section"
+      defaultExpanded={true}
+      disabled={false}
+      collapsedContent={
+        <DimensionsBadge
+          width={width}
+          height={height}
+          megapixels={megapixels}
+          isOverLimit={isOverLimit}
+          percentOfLimit={percentOfLimit}
+          hasPixelLimit={hasPixelLimit}
+        />
+      }
+      rightContent={
+        <DimensionHeaderControls
+          megapixels={megapixels}
+          isOverLimit={isOverLimit}
+          percentOfLimit={percentOfLimit}
+          hasPixelLimit={hasPixelLimit}
+          linked={dimensionsLinked}
+          onLinkedChange={onDimensionsLinkedChange}
+          disabled={isGenerating}
+        />
+      }
+    >
+      <DimensionControls
+        width={width}
+        height={height}
+        onWidthChange={onWidthChange}
+        onHeightChange={onHeightChange}
+        modelId={model}
+        disabled={isGenerating}
+        hideHeader
+        linked={dimensionsLinked}
+        onLinkedChange={onDimensionsLinkedChange}
+      />
+    </CollapsibleSection>
+  );
+}
+
+interface ReferenceImageSectionProps {
+  showReferenceImage: boolean;
+  referenceImage: string | undefined;
+  isGenerating: boolean;
+  onReferenceImageChange: (image: string | undefined) => void;
+  onClearReferenceImage: () => void;
+}
+
+export function renderReferenceImageSection({
+  showReferenceImage,
+  referenceImage,
+  isGenerating,
+  onReferenceImageChange,
+  onClearReferenceImage,
+}: ReferenceImageSectionProps): React.ReactNode {
+  if (!showReferenceImage) return null;
+
+  return (
+    <CollapsibleSection
+      title="Reference"
+      icon={<ImageIcon className="h-3.5 w-3.5" />}
+      testId="reference-image-section"
+      collapsedContent={referenceImage ? <span className={BADGE_BASE_CLASS}>1 reference</span> : undefined}
+      rightContent={<ClearButton onClear={onClearReferenceImage} show={!!referenceImage} />}
+    >
+      <ReferenceImagePicker
+        selectedImage={referenceImage}
+        onSelect={onReferenceImageChange}
+        disabled={isGenerating}
+        hideHeader
+      />
+    </CollapsibleSection>
+  );
+}
diff --git a/components/studio/gallery/image-gallery-parts.tsx b/components/studio/gallery/image-gallery-parts.tsx
new file mode 100644
index 0000000..911c216
--- /dev/null
+++ b/components/studio/gallery/image-gallery-parts.tsx
@@ -0,0 +1,439 @@
+"use client";
+
+/**
+ * Sub-components for ImageGallery
+ * Extracted to reduce main file complexity and line count
+ */
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import {
+  Eye,
+  EyeOff,
+  ImageOff,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+import { StandardGalleryGrid } from "./standard-gallery-grid";
+import type { ThumbnailData } from "./types";
+import { VirtualizedGalleryGrid } from "./virtualized-gallery-grid";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GalleryEmptyState
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface GalleryEmptyStateProps {
+  emptyContent?: React.ReactNode;
+}
+
+export function GalleryEmptyState({ emptyContent }: Readonly<GalleryEmptyStateProps>) {
+  return (
+    <div
+      className="flex flex-col items-center justify-center h-full p-8 text-center text-muted-foreground min-h-[200px]"
+      data-testid="gallery-empty"
+    >
+      {emptyContent ?? (
+        <>
+          <ImageOff className="h-12 w-12 mb-4 opacity-20" />
+          <p>No images found</p>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GalleryGridRenderer
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface GalleryGridRendererProps {
+  images: ThumbnailData[];
+  activeImageId?: string;
+  selectedIds: Set<string>;
+  selectionMode: boolean;
+  thumbnailSize: "sm" | "md" | "lg";
+  direction: "horizontal" | "vertical";
+  onSelect: (image: ThumbnailData) => void;
+  onCheckedChange: (id: string, checked: boolean) => void;
+  onLoadMore?: () => void;
+  canLoadMore: boolean;
+  isLoadingMore: boolean;
+  isMobile: boolean;
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export function GalleryGridRenderer({
+  images,
+  activeImageId,
+  selectedIds,
+  selectionMode,
+  thumbnailSize,
+  direction,
+  onSelect,
+  onCheckedChange,
+  onLoadMore,
+  canLoadMore,
+  isLoadingMore,
+  isMobile,
+  scrollContainerRef,
+}: Readonly<GalleryGridRendererProps>) {
+  if (direction === "vertical") {
+    return (
+      <VirtualizedGalleryGrid
+        images={images}
+        activeImageId={activeImageId}
+        selectedIds={selectedIds}
+        selectionMode={selectionMode}
+        thumbnailSize={thumbnailSize}
+        onSelect={onSelect}
+        onCheckedChange={onCheckedChange}
+        onLoadMore={onLoadMore}
+        canLoadMore={canLoadMore}
+        isLoadingMore={isLoadingMore}
+        isMobile={isMobile}
+        scrollContainerRef={scrollContainerRef}
+      />
+    );
+  }
+  return (
+    <StandardGalleryGrid
+      images={images}
+      activeImageId={activeImageId}
+      selectedIds={selectedIds}
+      selectionMode={selectionMode}
+      thumbnailSize={thumbnailSize}
+      direction={direction}
+      onSelect={onSelect}
+      onCheckedChange={onCheckedChange}
+      onLoadMore={onLoadMore}
+      canLoadMore={canLoadMore}
+      isLoadingMore={isLoadingMore}
+      isMobile={isMobile}
+      scrollContainerRef={scrollContainerRef}
+    />
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SelectAllControl
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface SelectAllControlProps {
+  images: ThumbnailData[];
+  selectedIds: Set<string>;
+  isMobile: boolean;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+}
+
+export function SelectAllControl({
+  images,
+  selectedIds,
+  isMobile,
+  onSelectAll,
+  onDeselectAll,
+}: Readonly<SelectAllControlProps>) {
+  const allSelected = images.length > 0 && images.every((img) => selectedIds.has(img.id));
+  return (
+    <div className="flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-200">
+      <Checkbox
+        id="gallery-select-all"
+        checked={allSelected}
+        onCheckedChange={(checked) => {
+          if (checked) {
+            onSelectAll();
+          } else {
+            onDeselectAll();
+          }
+        }}
+        className={isMobile ? "h-5 w-5" : undefined}
+        data-testid="select-all"
+      />
+      <label
+        htmlFor="gallery-select-all"
+        className={cn(
+          "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer select-none",
+          isMobile ? "text-sm" : "text-xs"
+        )}
+      >
+        Select All
+      </label>
+      {selectedIds.size > 0 && (
+        <span className={cn(
+          "text-muted-foreground ml-1 tabular-nums animate-in fade-in zoom-in-50 duration-200",
+          isMobile ? "text-xs" : "text-[10px]"
+        )}>
+          {selectedIds.size} selected
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// BulkActionsMenu
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface BulkActionsMenuProps {
+  selectedIds: Set<string>;
+  isMobile: boolean;
+  onDeleteSelected?: () => void;
+  onMakeSelectedPublic?: () => void;
+  onMakeSelectedPrivate?: () => void;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+}
+
+export function BulkActionsMenu({
+  selectedIds,
+  isMobile,
+  onDeleteSelected,
+  onMakeSelectedPublic,
+  onMakeSelectedPrivate,
+  onSelectAll,
+  onDeselectAll,
+}: Readonly<BulkActionsMenuProps>) {
+  const iconSize = isMobile ? "h-5 w-5" : "h-4 w-4";
+  const buttonSize = isMobile ? "h-10 w-10" : "h-8 w-8";
+  const menuItemClass = isMobile ? "py-3 text-base" : undefined;
+  const disabled = selectedIds.size === 0;
+
+  return (
+    <div className="flex items-center gap-1 animate-in fade-in slide-in-from-right-2 duration-200">
+      {onDeleteSelected && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "text-destructive hover:text-destructive hover:bg-destructive/10",
+            buttonSize
+          )}
+          onClick={onDeleteSelected}
+          disabled={disabled}
+          data-testid="delete-selected"
+          title="Delete selected"
+        >
+          <Trash2 className={iconSize} />
+        </Button>
+      )}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={buttonSize}
+            disabled={disabled}
+            data-testid="bulk-actions-menu"
+            title="More actions"
+          >
+            <MoreHorizontal className={iconSize} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={onSelectAll} className={menuItemClass}>
+            Select All
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onDeselectAll} className={menuItemClass}>
+            Deselect All
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {onMakeSelectedPublic && (
+            <DropdownMenuItem
+              onClick={onMakeSelectedPublic}
+              data-testid="make-public"
+              className={menuItemClass}
+            >
+              <Eye className="mr-2 h-4 w-4" />
+              Make Public
+            </DropdownMenuItem>
+          )}
+          {onMakeSelectedPrivate && (
+            <DropdownMenuItem
+              onClick={onMakeSelectedPrivate}
+              data-testid="make-private"
+              className={menuItemClass}
+            >
+              <EyeOff className="mr-2 h-4 w-4" />
+              Make Private
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SelectionToggleButton
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface SelectionToggleButtonProps {
+  selectionMode: boolean;
+  isMobile: boolean;
+  imagesEmpty: boolean;
+  onToggle: () => void;
+}
+
+export function SelectionToggleButton({
+  selectionMode,
+  isMobile,
+  imagesEmpty,
+  onToggle,
+}: Readonly<SelectionToggleButtonProps>) {
+  return (
+    <>
+      {isMobile && (
+        <Separator orientation="vertical" className="mx-1 bg-white w-px h-6" />
+      )}
+      <Button
+        variant={selectionMode ? "default" : "outline"}
+        size={isMobile ? "default" : "sm"}
+        onClick={onToggle}
+        className={cn(
+          "font-medium transition-all min-w-[70px]",
+          isMobile ? "h-10 text-sm" : "h-8 text-xs",
+          !selectionMode && "text-muted-foreground hover:text-foreground"
+        )}
+        data-testid="toggle-selection"
+        disabled={imagesEmpty && !selectionMode}
+      >
+        {selectionMode ? "Done" : "Select"}
+      </Button>
+    </>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GalleryLoadingSpinner
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function GalleryLoadingSpinner() {
+  return (
+    <div
+      className="flex items-center justify-center h-full min-h-[200px]"
+      data-testid="gallery-loading"
+    >
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GalleryHeaderLeft
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface GalleryHeaderLeftProps {
+  selectionMode: boolean;
+  images: ThumbnailData[];
+  selectedIds: Set<string>;
+  isMobile: boolean;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  title?: React.ReactNode;
+  actions?: React.ReactNode;
+  headerContent?: React.ReactNode;
+}
+
+export function GalleryHeaderLeft({
+  selectionMode,
+  images,
+  selectedIds,
+  isMobile,
+  onSelectAll,
+  onDeselectAll,
+  title,
+  actions,
+  headerContent,
+}: Readonly<GalleryHeaderLeftProps>) {
+  if (selectionMode) {
+    return (
+      <SelectAllControl
+        images={images}
+        selectedIds={selectedIds}
+        isMobile={isMobile}
+        onSelectAll={onSelectAll}
+        onDeselectAll={onDeselectAll}
+      />
+    );
+  }
+  return (
+    <div className="flex items-center gap-3 animate-in fade-in duration-200">
+      {title ? (
+        <div className={cn("font-semibold", isMobile && "text-base")}>{title}</div>
+      ) : (
+        !actions && headerContent
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// GalleryHeaderRight
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface GalleryHeaderRightProps {
+  selectionMode: boolean;
+  selectedIds: Set<string>;
+  isMobile: boolean;
+  images: ThumbnailData[];
+  onDeleteSelected?: () => void;
+  onMakeSelectedPublic?: () => void;
+  onMakeSelectedPrivate?: () => void;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  onToggleSelectionMode?: () => void;
+  actions?: React.ReactNode;
+}
+
+export function GalleryHeaderRight({
+  selectionMode,
+  selectedIds,
+  isMobile,
+  images,
+  onDeleteSelected,
+  onMakeSelectedPublic,
+  onMakeSelectedPrivate,
+  onSelectAll,
+  onDeselectAll,
+  onToggleSelectionMode,
+  actions,
+}: Readonly<GalleryHeaderRightProps>) {
+  return (
+    <div className="flex items-center gap-2 shrink-0">
+      <div className="flex items-center gap-1">
+        {selectionMode ? (
+          <BulkActionsMenu
+            selectedIds={selectedIds}
+            isMobile={isMobile}
+            onDeleteSelected={onDeleteSelected}
+            onMakeSelectedPublic={onMakeSelectedPublic}
+            onMakeSelectedPrivate={onMakeSelectedPrivate}
+            onSelectAll={onSelectAll}
+            onDeselectAll={onDeselectAll}
+          />
+        ) : (
+          <div className="animate-in fade-in duration-200">{actions}</div>
+        )}
+      </div>
+      {onToggleSelectionMode && (
+        <SelectionToggleButton
+          selectionMode={selectionMode}
+          isMobile={isMobile}
+          imagesEmpty={images.length === 0}
+          onToggle={onToggleSelectionMode}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/components/studio/layout/sidebar-content.test.tsx b/components/studio/layout/sidebar-content.test.tsx
new file mode 100644
index 0000000..985bcbf
--- /dev/null
+++ b/components/studio/layout/sidebar-content.test.tsx
@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SidebarContent, type SidebarContentProps } from "./sidebar-content";
+
+// Mock the feature components
+vi.mock("@/components/studio/features/prompt", () => ({
+  PromptFeature: ({
+    isGenerating,
+    showNegativePrompt,
+    showLibrary,
+  }: {
+    isGenerating: boolean;
+    showNegativePrompt: boolean;
+    showLibrary: boolean;
+  }) => (
+    <div data-testid="prompt-feature">
+      <span data-testid="prompt-is-generating">{String(isGenerating)}</span>
+      <span data-testid="prompt-show-negative">{String(showNegativePrompt)}</span>
+      <span data-testid="prompt-show-library">{String(showLibrary)}</span>
+    </div>
+  ),
+  PromptManagerContext: {
+    Provider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  },
+}));
+
+vi.mock("@/components/studio/features/generation", () => ({
+  ControlsFeature: ({ isGenerating }: { isGenerating: boolean }) => (
+    <div data-testid="controls-feature">
+      <span data-testid="controls-is-generating">{String(isGenerating)}</span>
+    </div>
+  ),
+  GenerationSettingsContext: {
+    Provider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  },
+  BatchModeContext: {
+    Provider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  },
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({
+    children,
+    onScroll,
+  }: {
+    children: React.ReactNode;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    viewportRef?: React.Ref<HTMLDivElement>;
+  }) => (
+    <div data-testid="scroll-area" onScroll={onScroll}>
+      {children}
+    </div>
+  ),
+}));
+
+// Create mock hook return values
+const createMockPromptManager = () => ({
+  promptSectionRef: { current: null },
+  promptHistory: [],
+  addToPromptHistory: vi.fn(),
+  suggestions: [],
+  isLoadingSuggestions: false,
+  fetchSuggestions: vi.fn(),
+  isEnhancingPrompt: false,
+  enhancePrompt: vi.fn(),
+  cancelEnhancePrompt: vi.fn(),
+  isEnhancingNegativePrompt: false,
+  enhanceNegativePrompt: vi.fn(),
+  cancelEnhanceNegativePrompt: vi.fn(),
+  handlePromptContentChange: vi.fn(),
+  handleSelectHistory: vi.fn(),
+  hasPromptContent: true,
+  setHasPromptContent: vi.fn(),
+  getPromptValues: vi.fn(() => ({ prompt: "Test prompt", negativePrompt: "" })),
+});
+
+const createMockGenerationSettings = () => ({
+  model: "flux" as const,
+  setModel: vi.fn(),
+  handleModelChange: vi.fn(),
+  aspectRatios: [],
+  constraints: undefined,
+  resolutionTier: "hd" as const,
+  setResolutionTier: vi.fn(),
+  handleResolutionTierChange: vi.fn(),
+  supportedTiers: ["hd"] as const,
+  aspectRatio: "1:1" as const,
+  setAspectRatio: vi.fn(),
+  width: 1024,
+  setWidth: vi.fn(),
+  height: 1024,
+  setHeight: vi.fn(),
+  handleAspectRatioChange: vi.fn(),
+  handleWidthChange: vi.fn(),
+  handleHeightChange: vi.fn(),
+  dimensionsLinked: false,
+  setDimensionsLinked: vi.fn(),
+  seed: -1,
+  setSeed: vi.fn(),
+  seedLocked: false,
+  setSeedLocked: vi.fn(),
+  generateSeed: vi.fn(() => 12345),
+  isRandomMode: vi.fn(() => true),
+  refreshSeedIfNeeded: vi.fn(),
+  options: { enhance: false, private: false, safe: false },
+  setOptions: vi.fn(),
+  referenceImage: undefined,
+  setReferenceImage: vi.fn(),
+  videoSettings: { duration: 5, audio: false },
+  setVideoSettings: vi.fn(),
+  isVideoModel: false,
+  videoReferenceImages: { firstFrame: undefined, lastFrame: undefined },
+  setVideoReferenceImages: vi.fn(),
+});
+
+const createMockBatchMode = () => ({
+  batchSettings: { enabled: false, count: 10 },
+  setBatchSettings: vi.fn(),
+  activeBatchId: null,
+  setActiveBatchId: vi.fn(),
+  isBatchActive: false,
+  isBatchPaused: false,
+  batchStatus: undefined,
+  batchProgress: { currentIndex: 0, totalCount: 0, completedCount: 0, inFlightCount: 0 },
+  startBatchGeneration: vi.fn(),
+  cancelBatchGeneration: vi.fn(),
+  pauseBatchGeneration: vi.fn(),
+  resumeBatchGeneration: vi.fn(),
+  handleBatchGenerateItem: vi.fn(),
+});
+
+describe("SidebarContent", () => {
+  const createDefaultProps = (): SidebarContentProps => ({
+    promptManager: createMockPromptManager(),
+    generationSettings: createMockGenerationSettings(),
+    batchMode: createMockBatchMode(),
+    isGenerating: false,
+    showNegativePrompt: true,
+    showLibrary: true,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders prompt feature", () => {
+    render(<SidebarContent {...createDefaultProps()} />);
+
+    expect(screen.getByTestId("prompt-feature")).toBeInTheDocument();
+  });
+
+  it("renders controls feature", () => {
+    render(<SidebarContent {...createDefaultProps()} />);
+
+    expect(screen.getByTestId("controls-feature")).toBeInTheDocument();
+  });
+
+  it("passes isGenerating to prompt feature", () => {
+    render(<SidebarContent {...createDefaultProps()} isGenerating={true} />);
+
+    expect(screen.getByTestId("prompt-is-generating")).toHaveTextContent("true");
+  });
+
+  it("passes isGenerating to controls feature", () => {
+    render(<SidebarContent {...createDefaultProps()} isGenerating={true} />);
+
+    expect(screen.getByTestId("controls-is-generating")).toHaveTextContent("true");
+  });
+
+  it("passes showNegativePrompt to prompt feature", () => {
+    render(<SidebarContent {...createDefaultProps()} showNegativePrompt={false} />);
+
+    expect(screen.getByTestId("prompt-show-negative")).toHaveTextContent("false");
+  });
+
+  it("passes showLibrary to prompt feature", () => {
+    render(<SidebarContent {...createDefaultProps()} showLibrary={false} />);
+
+    expect(screen.getByTestId("prompt-show-library")).toHaveTextContent("false");
+  });
+
+  it("renders scroll area", () => {
+    render(<SidebarContent {...createDefaultProps()} />);
+
+    expect(screen.getByTestId("scroll-area")).toBeInTheDocument();
+  });
+
+  it("renders fade overlay elements", () => {
+    const { container } = render(<SidebarContent {...createDefaultProps()} />);
+
+    // Check for fade overlay divs (top and bottom)
+    const fadeOverlays = container.querySelectorAll(".pointer-events-none");
+    expect(fadeOverlays.length).toBeGreaterThanOrEqual(2);
+  });
+});
diff --git a/components/studio/layout/sidebar-content.tsx b/components/studio/layout/sidebar-content.tsx
new file mode 100644
index 0000000..7f3a6ea
--- /dev/null
+++ b/components/studio/layout/sidebar-content.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * SidebarContent - Extracted sidebar scroll area with fade overlays
+ *
+ * This component handles the scrollable area containing prompt and controls
+ * features, with smooth fade overlays at top/bottom when content overflows.
+ *
+ * Extracted from StudioShell for max-lines compliance.
+ * ZERO logic changes - pure structural lift and shift.
+ */
+
+import * as React from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+// Feature Components
+import {
+  BatchModeContext,
+  ControlsFeature,
+  GenerationSettingsContext,
+} from "@/components/studio/features/generation";
+import {
+  PromptFeature,
+  PromptManagerContext,
+} from "@/components/studio/features/prompt";
+
+import type { usePromptManager } from "@/hooks/use-prompt-manager";
+import type { useGenerationSettings } from "@/hooks/use-generation-settings";
+import type { useBatchMode } from "@/hooks/use-batch-mode";
+
+export interface SidebarContentProps {
+  /** Prompt manager hook value for PromptManagerContext */
+  promptManager: ReturnType<typeof usePromptManager>;
+  /** Generation settings hook value for GenerationSettingsContext */
+  generationSettings: ReturnType<typeof useGenerationSettings>;
+  /** Batch mode hook value for BatchModeContext */
+  batchMode: ReturnType<typeof useBatchMode>;
+  /** Whether generation is in progress */
+  isGenerating: boolean;
+  /** Whether the model supports negative prompts */
+  showNegativePrompt: boolean;
+  /** Whether to show the prompt library (requires auth) */
+  showLibrary: boolean;
+}
+
+/**
+ * SidebarContent - Scrollable sidebar content with fade overlays
+ *
+ * Contains PromptFeature and ControlsFeature wrapped in their respective contexts.
+ * Manages scroll state internally for fade overlay visibility.
+ */
+export function SidebarContent({
+  promptManager,
+  generationSettings,
+  batchMode,
+  isGenerating,
+  showNegativePrompt,
+  showLibrary,
+}: SidebarContentProps) {
+  // ========================================
+  // Sidebar Scroll State (for fade overlays)
+  // ========================================
+  const scrollViewportRef = React.useRef<HTMLDivElement>(null);
+  const [showTopFade, setShowTopFade] = React.useState(false);
+  const [showBottomFade, setShowBottomFade] = React.useState(false);
+
+  const updateScrollFades = React.useCallback((el: HTMLDivElement | null) => {
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    const hasScrollableContent = scrollHeight > clientHeight;
+    setShowTopFade(scrollTop > 8);
+    setShowBottomFade(
+      hasScrollableContent && scrollTop + clientHeight < scrollHeight - 8,
+    );
+  }, []);
+
+  const handleScroll = React.useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      updateScrollFades(e.currentTarget);
+    },
+    [updateScrollFades],
+  );
+
+  // Check initial scroll state on mount
+  React.useEffect(() => {
+    // Small delay to let content render
+    const timer = setTimeout(() => {
+      updateScrollFades(scrollViewportRef.current);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [updateScrollFades]);
+
+  return (
+    <div className="relative flex-1 min-h-0 overflow-hidden">
+      {/* Top fade overlay */}
+      <div
+        className="absolute top-0 left-0 right-0 h-8 z-10 pointer-events-none transition-opacity duration-200"
+        style={{
+          opacity: showTopFade ? 1 : 0,
+          background:
+            "linear-gradient(to bottom, hsl(var(--card)) 0%, hsl(var(--card) / 0.8) 40%, transparent 100%)",
+          backdropFilter: "blur(2px)",
+          WebkitBackdropFilter: "blur(2px)",
+          maskImage: "linear-gradient(to bottom, black 0%, transparent 100%)",
+          WebkitMaskImage:
+            "linear-gradient(to bottom, black 0%, transparent 100%)",
+        }}
+      />
+
+      <ScrollArea
+        className="h-full"
+        onScroll={handleScroll}
+        viewportRef={scrollViewportRef}
+      >
+        <div className="p-0 space-y-0.5 w-full min-w-0 overflow-x-hidden">
+          {/* Prompt Feature */}
+          <PromptManagerContext.Provider value={promptManager}>
+            <PromptFeature
+              isGenerating={isGenerating}
+              showNegativePrompt={showNegativePrompt}
+              showLibrary={showLibrary}
+            />
+          </PromptManagerContext.Provider>
+
+          {/* Generation Controls Feature */}
+          <GenerationSettingsContext.Provider value={generationSettings}>
+            <BatchModeContext.Provider value={batchMode}>
+              <ControlsFeature isGenerating={isGenerating} />
+            </BatchModeContext.Provider>
+          </GenerationSettingsContext.Provider>
+        </div>
+      </ScrollArea>
+
+      {/* Bottom fade overlay */}
+      <div
+        className="absolute bottom-0 left-0 right-0 h-8 z-10 pointer-events-none transition-opacity duration-200"
+        style={{
+          opacity: showBottomFade ? 1 : 0,
+          background:
+            "linear-gradient(to top, hsl(var(--card)) 0%, hsl(var(--card) / 0.8) 40%, transparent 100%)",
+          backdropFilter: "blur(2px)",
+          WebkitBackdropFilter: "blur(2px)",
+          maskImage: "linear-gradient(to top, black 0%, transparent 100%)",
+          WebkitMaskImage:
+            "linear-gradient(to top, black 0%, transparent 100%)",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/studio/layout/sidebar-generate-button.test.tsx b/components/studio/layout/sidebar-generate-button.test.tsx
new file mode 100644
index 0000000..258866d
--- /dev/null
+++ b/components/studio/layout/sidebar-generate-button.test.tsx
@@ -0,0 +1,281 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  SidebarGenerateButton,
+  type SidebarGenerateButtonProps,
+} from "./sidebar-generate-button";
+
+// Mock UI components
+vi.mock("@/components/ui/button", () => ({
+  Button: ({
+    children,
+    onClick,
+    disabled,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+  }) => (
+    <button onClick={onClick} disabled={disabled} data-testid="generate-button">
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock("@/components/ui/separator", () => ({
+  Separator: ({ orientation }: { orientation?: string }) => (
+    <div data-testid="separator" data-orientation={orientation} />
+  ),
+}));
+
+vi.mock("@/components/studio/batch/batch-action-button", () => ({
+  BatchActionButton: ({
+    onPause,
+    onResume,
+    onCancel,
+    isPaused,
+    completedCount,
+    totalCount,
+    inFlightCount,
+  }: {
+    isPaused: boolean;
+    completedCount: number;
+    totalCount: number;
+    inFlightCount?: number;
+    onPause: () => void;
+    onResume: () => void;
+    onCancel: () => void;
+  }) => (
+    <div data-testid="batch-action-button">
+      <button
+        onClick={isPaused ? onResume : onPause}
+        data-testid="batch-toggle"
+      >
+        {isPaused ? "Resume" : "Pause"} ({completedCount}/{totalCount})
+        {isPaused && inFlightCount && inFlightCount > 0
+          ? ` + ${inFlightCount} finishing`
+          : ""}
+      </button>
+      <button onClick={onCancel} data-testid="batch-cancel">
+        Cancel
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock("@/components/studio/batch/batch-config-button", () => ({
+  BatchConfigButton: ({
+    settings,
+    onSettingsChange,
+    disabled,
+  }: {
+    settings: { enabled: boolean; count: number };
+    onSettingsChange: (s: { enabled: boolean; count: number }) => void;
+    disabled?: boolean;
+  }) => (
+    <button
+      data-testid="batch-config-button"
+      disabled={disabled}
+      onClick={() => onSettingsChange({ ...settings, enabled: !settings.enabled })}
+    >
+      Batch Config
+    </button>
+  ),
+}));
+
+describe("SidebarGenerateButton", () => {
+  const createDefaultProps = (): SidebarGenerateButtonProps => ({
+    isGenerating: false,
+    hasPromptContent: true,
+    onGenerateClick: vi.fn(),
+    isBatchActive: false,
+    isBatchPaused: false,
+    batchProgress: {
+      completedCount: 0,
+      totalCount: 0,
+      inFlightCount: 0,
+    },
+    batchSettings: { enabled: false, count: 10 },
+    onBatchSettingsChange: vi.fn(),
+    onPauseBatch: vi.fn(),
+    onResumeBatch: vi.fn(),
+    onCancelBatch: vi.fn(),
+    isMobile: false,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("when batch is not active", () => {
+    it("renders generate button", () => {
+      render(<SidebarGenerateButton {...createDefaultProps()} />);
+
+      expect(screen.getByTestId("generate-button")).toBeInTheDocument();
+    });
+
+    it("renders batch config button", () => {
+      render(<SidebarGenerateButton {...createDefaultProps()} />);
+
+      expect(screen.getByTestId("batch-config-button")).toBeInTheDocument();
+    });
+
+    it("shows 'Generate Image' text by default", () => {
+      render(<SidebarGenerateButton {...createDefaultProps()} />);
+
+      expect(screen.getByTestId("generate-button")).toHaveTextContent(
+        "Generate Image",
+      );
+    });
+
+    it("shows 'Generating...' when isGenerating is true", () => {
+      render(
+        <SidebarGenerateButton {...createDefaultProps()} isGenerating={true} />,
+      );
+
+      expect(screen.getByTestId("generate-button")).toHaveTextContent(
+        "Generating...",
+      );
+    });
+
+    it("shows batch count when batch mode is enabled", () => {
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          batchSettings={{ enabled: true, count: 5 }}
+        />,
+      );
+
+      expect(screen.getByTestId("generate-button")).toHaveTextContent(
+        "Generate Batch (5)",
+      );
+    });
+
+    it("calls onGenerateClick when button is clicked", () => {
+      const onGenerateClick = vi.fn();
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          onGenerateClick={onGenerateClick}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("generate-button"));
+
+      expect(onGenerateClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("disables button when isGenerating is true", () => {
+      render(
+        <SidebarGenerateButton {...createDefaultProps()} isGenerating={true} />,
+      );
+
+      expect(screen.getByTestId("generate-button")).toBeDisabled();
+    });
+
+    it("disables button when hasPromptContent is false", () => {
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          hasPromptContent={false}
+        />,
+      );
+
+      expect(screen.getByTestId("generate-button")).toBeDisabled();
+    });
+
+    it("renders separator on mobile", () => {
+      render(<SidebarGenerateButton {...createDefaultProps()} isMobile={true} />);
+
+      expect(screen.getByTestId("separator")).toBeInTheDocument();
+    });
+
+    it("does not render separator on desktop", () => {
+      render(<SidebarGenerateButton {...createDefaultProps()} isMobile={false} />);
+
+      expect(screen.queryByTestId("separator")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when batch is active", () => {
+    it("renders batch action button", () => {
+      render(
+        <SidebarGenerateButton {...createDefaultProps()} isBatchActive={true} />,
+      );
+
+      expect(screen.getByTestId("batch-action-button")).toBeInTheDocument();
+    });
+
+    it("does not render generate button", () => {
+      render(
+        <SidebarGenerateButton {...createDefaultProps()} isBatchActive={true} />,
+      );
+
+      expect(screen.queryByTestId("generate-button")).not.toBeInTheDocument();
+    });
+
+    it("calls onPauseBatch when pause is clicked", () => {
+      const onPauseBatch = vi.fn();
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          isBatchActive={true}
+          isBatchPaused={false}
+          onPauseBatch={onPauseBatch}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("batch-toggle"));
+
+      expect(onPauseBatch).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onResumeBatch when resume is clicked", () => {
+      const onResumeBatch = vi.fn();
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          isBatchActive={true}
+          isBatchPaused={true}
+          onResumeBatch={onResumeBatch}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("batch-toggle"));
+
+      expect(onResumeBatch).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onCancelBatch when cancel is clicked", () => {
+      const onCancelBatch = vi.fn();
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          isBatchActive={true}
+          onCancelBatch={onCancelBatch}
+        />,
+      );
+
+      fireEvent.click(screen.getByTestId("batch-cancel"));
+
+      expect(onCancelBatch).toHaveBeenCalledTimes(1);
+    });
+
+    it("shows correct progress", () => {
+      render(
+        <SidebarGenerateButton
+          {...createDefaultProps()}
+          isBatchActive={true}
+          batchProgress={{
+            completedCount: 3,
+            totalCount: 10,
+            inFlightCount: 2,
+          }}
+        />,
+      );
+
+      expect(screen.getByTestId("batch-toggle")).toHaveTextContent("3/10");
+    });
+  });
+});
diff --git a/components/studio/layout/sidebar-generate-button.tsx b/components/studio/layout/sidebar-generate-button.tsx
new file mode 100644
index 0000000..90cd1cc
--- /dev/null
+++ b/components/studio/layout/sidebar-generate-button.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+/**
+ * SidebarGenerateButton - Extracted generate/batch button section
+ *
+ * This component handles the bottom action bar of the sidebar containing
+ * the generate button, batch action controls, and batch config.
+ *
+ * Extracted from StudioShell for max-lines compliance.
+ * ZERO logic changes - pure structural lift and shift.
+ */
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { BatchActionButton } from "@/components/studio/batch/batch-action-button";
+import { BatchConfigButton } from "@/components/studio/batch/batch-config-button";
+import type { BatchModeSettings } from "@/components/studio/batch/batch-mode-panel";
+
+export interface SidebarGenerateButtonProps {
+  /** Whether generation is in progress */
+  isGenerating: boolean;
+  /** Whether the prompt has content (enables generate button) */
+  hasPromptContent: boolean;
+  /** Handler for generate button click */
+  onGenerateClick: () => void;
+  /** Whether batch mode is currently active */
+  isBatchActive: boolean;
+  /** Whether batch is paused */
+  isBatchPaused: boolean;
+  /** Batch progress info */
+  batchProgress: {
+    completedCount: number;
+    totalCount: number;
+    inFlightCount: number;
+  };
+  /** Batch settings */
+  batchSettings: BatchModeSettings;
+  /** Handler for batch settings change */
+  onBatchSettingsChange: (settings: BatchModeSettings) => void;
+  /** Handler for pause batch */
+  onPauseBatch: () => void;
+  /** Handler for resume batch */
+  onResumeBatch: () => void;
+  /** Handler for cancel batch */
+  onCancelBatch: () => void;
+  /** Whether on mobile device */
+  isMobile: boolean;
+}
+
+/**
+ * SidebarGenerateButton - Generate/Batch action button section
+ *
+ * Shows either:
+ * - BatchActionButton when batch is active (pause/resume/cancel)
+ * - Generate button + BatchConfigButton when idle
+ */
+export function SidebarGenerateButton({
+  isGenerating,
+  hasPromptContent,
+  onGenerateClick,
+  isBatchActive,
+  isBatchPaused,
+  batchProgress,
+  batchSettings,
+  onBatchSettingsChange,
+  onPauseBatch,
+  onResumeBatch,
+  onCancelBatch,
+  isMobile,
+}: SidebarGenerateButtonProps) {
+  return (
+    <div className="p-1.5 pb-[calc(0.375rem+env(safe-area-inset-bottom))] border-t bg-background/60">
+      {isBatchActive ? (
+        <BatchActionButton
+          isPaused={isBatchPaused}
+          completedCount={batchProgress.completedCount}
+          totalCount={batchProgress.totalCount}
+          inFlightCount={batchProgress.inFlightCount}
+          onPause={onPauseBatch}
+          onResume={onResumeBatch}
+          onCancel={onCancelBatch}
+        />
+      ) : (
+        <div className="flex items-center gap-1.5 w-full">
+          <Button
+            onClick={onGenerateClick}
+            disabled={isGenerating || !hasPromptContent}
+            className="flex-1 h-11 text-base font-semibold"
+            size="lg"
+          >
+            {isGenerating ? (
+              "Generating..."
+            ) : batchSettings.enabled ? (
+              <>Generate Batch ({batchSettings.count})</>
+            ) : (
+              <>Generate Image</>
+            )}
+          </Button>
+
+          {isMobile && (
+            <Separator
+              orientation="vertical"
+              className="h-8 bg-border/40 mx-0.5"
+            />
+          )}
+
+          <BatchConfigButton
+            settings={batchSettings}
+            onSettingsChange={onBatchSettingsChange}
+            disabled={isGenerating || isBatchActive}
+            className={isMobile ? "w-14" : undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/image-card-parts.tsx b/components/ui/image-card-parts.tsx
new file mode 100644
index 0000000..3a44407
--- /dev/null
+++ b/components/ui/image-card-parts.tsx
@@ -0,0 +1,457 @@
+"use client"
+
+import { Button, buttonVariants } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { SensitiveContentOverlay } from "@/components/ui/sensitive-content-overlay"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { Check, Copy, Heart } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import * as React from "react"
+
+// ---------------------------------------------------------------------------
+// SelectionCheckbox
+// ---------------------------------------------------------------------------
+
+interface SelectionCheckboxProps {
+    isSelected: boolean
+    onCheckedChange: (checked: boolean) => void
+    onClick: (e: React.MouseEvent) => void
+}
+
+export function SelectionCheckbox({ isSelected, onCheckedChange, onClick }: SelectionCheckboxProps) {
+    return (
+        <div className="absolute top-2 right-2 z-20" onClick={onClick}>
+            <Checkbox
+                checked={isSelected}
+                onCheckedChange={onCheckedChange}
+                className="h-5 w-5 border-2 border-white bg-black/40 backdrop-blur-sm data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+            />
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// MediaContent
+// ---------------------------------------------------------------------------
+
+interface MediaContentProps {
+    isVideo: boolean
+    url: string
+    prompt: string
+    width: number
+    height: number
+    aspectRatio: number
+    priority: boolean
+    isLoaded: boolean
+    onLoad: () => void
+}
+
+export function MediaContent({
+    isVideo,
+    url,
+    prompt,
+    width,
+    height,
+    aspectRatio,
+    priority,
+    isLoaded,
+    onLoad,
+}: MediaContentProps) {
+    const mediaClassName = cn(
+        "w-full object-cover transition-all duration-700",
+        isLoaded ? "opacity-100" : "opacity-0"
+    )
+
+    if (isVideo) {
+        return (
+            <video
+                src={url}
+                muted
+                loop
+                playsInline
+                autoPlay
+                onCanPlay={onLoad}
+                className={mediaClassName}
+                style={{ aspectRatio }}
+            />
+        )
+    }
+
+    return (
+        <Image
+            src={url}
+            alt={prompt ?? "Generated image"}
+            width={width}
+            height={height}
+            className={mediaClassName}
+            style={{ aspectRatio }}
+            loading={priority ? "eager" : "lazy"}
+            priority={priority}
+            onLoad={onLoad}
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1536px) 33vw, 25vw"
+        />
+    )
+}
+
+// ---------------------------------------------------------------------------
+// UserBadge & UserAvatar
+// ---------------------------------------------------------------------------
+
+interface UserAvatarProps {
+    ownerName: string
+    ownerPictureUrl: string | null | undefined
+}
+
+function UserAvatar({ ownerName, ownerPictureUrl }: UserAvatarProps) {
+    if (ownerPictureUrl) {
+        return (
+            <Image
+                src={ownerPictureUrl}
+                alt={ownerName}
+                width={20}
+                height={20}
+                className="w-5 h-5 rounded-full object-cover"
+            />
+        )
+    }
+
+    return (
+        <div className="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center">
+            <span className="text-[10px] font-bold text-primary">
+                {ownerName.charAt(0).toUpperCase() || "?"}
+            </span>
+        </div>
+    )
+}
+
+interface UserBadgeProps {
+    ownerName: string
+    ownerPictureUrl: string | null | undefined
+    isHovered: boolean
+}
+
+export function UserBadge({ ownerName, ownerPictureUrl, isHovered }: UserBadgeProps) {
+    return (
+        <Link
+            href={`/profile/${ownerName}`}
+            onClick={(e) => e.stopPropagation()}
+            className={cn(
+                "absolute top-2 left-2 flex items-center gap-2 px-2 py-1.5 rounded-full bg-black/60 backdrop-blur-md border border-white/10 transition-opacity duration-300 hover:bg-black/80 z-10",
+                isHovered ? "opacity-100" : "opacity-0"
+            )}
+        >
+            <UserAvatar ownerName={ownerName} ownerPictureUrl={ownerPictureUrl} />
+            <span className="text-xs font-medium text-white/90 max-w-[100px] truncate">
+                {ownerName}
+            </span>
+        </Link>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// MetadataBadges
+// ---------------------------------------------------------------------------
+
+interface MetadataBadgesProps {
+    modelName: string
+    width: number
+    height: number
+    seed: number | undefined
+}
+
+export function MetadataBadges({ modelName, width, height, seed }: MetadataBadgesProps) {
+    const showSeed = seed !== undefined && seed !== -1
+
+    return (
+        <div className="flex flex-wrap items-center gap-1.5">
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-black/50 border border-white/10 text-white/90">
+                <div className="w-1 h-1 rounded-full bg-primary" />
+                <span className="text-[9px] font-bold uppercase tracking-wider">{modelName}</span>
+            </div>
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-black/50 border border-white/10 text-white/90 text-[9px] font-medium">
+                <span className="text-white/40">Size</span>
+                <span className="font-mono">{width}×{height}</span>
+            </div>
+            {showSeed && (
+                <div className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-black/50 border border-white/10 text-white/90 text-[9px] font-medium">
+                    <span className="text-white/40">Seed</span>
+                    <span className="font-mono">{seed}</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// CopyPromptButton
+// ---------------------------------------------------------------------------
+
+interface CopyPromptButtonProps {
+    isSignedIn: boolean
+    copied: boolean
+    onCopy: (e: React.MouseEvent) => void | Promise<void>
+}
+
+export function CopyPromptButton({ isSignedIn, copied, onCopy }: CopyPromptButtonProps) {
+    if (isSignedIn) {
+        return (
+            <Tooltip delayDuration={200}>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 rounded-full bg-white/10 hover:bg-white/20 text-white border border-white/10 backdrop-blur-md transition-colors shrink-0"
+                        onClick={(e) => void onCopy(e)}
+                    >
+                        {copied ? (
+                            <Check className="h-3.5 w-3.5 text-green-400" />
+                        ) : (
+                            <Copy className="h-3.5 w-3.5" />
+                        )}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="z-[200]">
+                    <p className="font-medium">{copied ? "Copied!" : "Copy prompt"}</p>
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+
+    return (
+        <Tooltip delayDuration={200}>
+            <TooltipTrigger asChild>
+                <Link
+                    href="/sign-in"
+                    onClick={(e) => e.stopPropagation()}
+                    className={cn(
+                        buttonVariants({ variant: "ghost", size: "icon" }),
+                        "h-8 w-8 rounded-full bg-white/10 hover:bg-white/20 text-white/60 hover:text-white backdrop-blur-md transition-colors shrink-0 border border-white/10"
+                    )}
+                >
+                    <Copy className="h-3.5 w-3.5" />
+                </Link>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="z-[200]">
+                <p className="font-medium">Sign in to copy prompt</p>
+            </TooltipContent>
+        </Tooltip>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// FavoriteButton
+// ---------------------------------------------------------------------------
+
+interface FavoriteButtonProps {
+    isSignedIn: boolean
+    isFavorited: boolean
+    onToggle: (e: React.MouseEvent) => void | Promise<void>
+}
+
+export function FavoriteButton({ isSignedIn, isFavorited, onToggle }: FavoriteButtonProps) {
+    if (isSignedIn) {
+        return (
+            <Tooltip delayDuration={200}>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                            "h-8 w-8 rounded-full backdrop-blur-md transition-colors shrink-0 border border-white/10",
+                            isFavorited
+                                ? "bg-red-500/80 hover:bg-red-500 text-white"
+                                : "bg-white/10 hover:bg-white/20 text-white"
+                        )}
+                        onClick={(e) => void onToggle(e)}
+                    >
+                        <Heart
+                            className={cn(
+                                "h-3.5 w-3.5 transition-all",
+                                isFavorited && "fill-current"
+                            )}
+                        />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="z-[200]">
+                    <p className="font-medium">
+                        {isFavorited ? "Remove from favorites" : "Add to favorites"}
+                    </p>
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+
+    return (
+        <Tooltip delayDuration={200}>
+            <TooltipTrigger asChild>
+                <Link
+                    href="/sign-in"
+                    onClick={(e) => e.stopPropagation()}
+                    className={cn(
+                        buttonVariants({ variant: "ghost", size: "icon" }),
+                        "h-8 w-8 rounded-full bg-white/10 hover:bg-white/20 text-white/60 hover:text-white backdrop-blur-md transition-colors shrink-0 border border-white/10"
+                    )}
+                >
+                    <Heart className="h-3.5 w-3.5" />
+                </Link>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="z-[200]">
+                <p className="font-medium">Sign in to save favorites</p>
+            </TooltipContent>
+        </Tooltip>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// InfoOverlay
+// ---------------------------------------------------------------------------
+
+interface InfoOverlayProps {
+    isHovered: boolean
+    prompt: string
+    modelName: string
+    width: number
+    height: number
+    seed: number | undefined
+    isSignedIn: boolean
+    copied: boolean
+    isFavorited: boolean
+    onCopy: (e: React.MouseEvent) => void | Promise<void>
+    onToggleFavorite: (e: React.MouseEvent) => void | Promise<void>
+}
+
+export function InfoOverlay({
+    isHovered,
+    prompt,
+    modelName,
+    width,
+    height,
+    seed,
+    isSignedIn,
+    copied,
+    isFavorited,
+    onCopy,
+    onToggleFavorite,
+}: InfoOverlayProps) {
+    return (
+        <div
+            className={cn(
+                "absolute bottom-0 inset-x-0 p-3 pt-10 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300",
+                isHovered ? "opacity-100" : "opacity-0"
+            )}
+        >
+            <div className="flex items-end justify-between gap-3">
+                <div className="flex flex-col gap-2 min-w-0 flex-1">
+                    <p className="text-white text-sm font-medium leading-snug line-clamp-2 antialiased">
+                        {prompt}
+                    </p>
+                    <MetadataBadges
+                        modelName={modelName}
+                        width={width}
+                        height={height}
+                        seed={seed}
+                    />
+                </div>
+
+                <CopyPromptButton
+                    isSignedIn={isSignedIn}
+                    copied={copied}
+                    onCopy={onCopy}
+                />
+
+                <FavoriteButton
+                    isSignedIn={isSignedIn}
+                    isFavorited={isFavorited}
+                    onToggle={onToggleFavorite}
+                />
+            </div>
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Wrapper Components for Conditional Rendering
+// ---------------------------------------------------------------------------
+
+interface ImageCardContainerProps {
+    selectionMode: boolean
+    isSelected: boolean
+    className: string | undefined
+    onClick: () => void
+    onMouseEnter: () => void
+    onMouseLeave: () => void
+    children: React.ReactNode
+}
+
+export function ImageCardContainer({
+    selectionMode,
+    isSelected,
+    className,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    children,
+}: ImageCardContainerProps) {
+    return (
+        <div
+            className={cn(
+                "relative group cursor-pointer overflow-hidden rounded-lg",
+                selectionMode && isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+                className
+            )}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            {children}
+        </div>
+    )
+}
+
+interface ImageCardSensitiveOverlayProps {
+    show: boolean
+    isSignedIn: boolean
+    onReveal: () => void
+}
+
+export function ImageCardSensitiveOverlay({ show, isSignedIn, onReveal }: ImageCardSensitiveOverlayProps) {
+    if (!show) return null
+    return <SensitiveContentOverlay onReveal={onReveal} isAllowedToReveal={isSignedIn} />
+}
+
+interface ImageCardSelectionCheckboxProps {
+    show: boolean
+    isSelected: boolean
+    onCheckedChange: (checked: boolean) => void
+    onClick: (e: React.MouseEvent) => void
+}
+
+export function ImageCardSelectionCheckbox({ show, isSelected, onCheckedChange, onClick }: ImageCardSelectionCheckboxProps) {
+    if (!show) return null
+    return <SelectionCheckbox isSelected={isSelected} onCheckedChange={onCheckedChange} onClick={onClick} />
+}
+
+interface ImageCardLoadingSkeletonProps {
+    show: boolean
+    aspectRatio: number
+}
+
+export function ImageCardLoadingSkeleton({ show, aspectRatio }: ImageCardLoadingSkeletonProps) {
+    if (!show) return null
+    return <Skeleton className="absolute inset-0 z-10 bg-muted" style={{ aspectRatio }} />
+}
+
+interface ImageCardUserBadgeProps {
+    show: boolean
+    ownerName: string | undefined
+    ownerPictureUrl: string | null | undefined
+    isHovered: boolean
+}
+
+export function ImageCardUserBadge({ show, ownerName, ownerPictureUrl, isHovered }: ImageCardUserBadgeProps) {
+    if (!show || !ownerName) return null
+    return <UserBadge ownerName={ownerName} ownerPictureUrl={ownerPictureUrl} isHovered={isHovered} />
+}
diff --git a/components/ui/media-player.test.tsx b/components/ui/media-player.test.tsx
index 796f396..ed52644 100644
--- a/components/ui/media-player.test.tsx
+++ b/components/ui/media-player.test.tsx
@@ -9,7 +9,6 @@ vi.mock("next/image", () => ({
     default: ({ src, alt, fill: _fill, sizes: _sizes, ...props }: { src: string | { src: string }; alt: string; fill?: boolean; sizes?: string } & React.ImgHTMLAttributes<HTMLImageElement>) => {
         void _fill
         void _sizes
-        // eslint-disable-next-line @next/next/no-img-element
         return <img src={typeof src === "string" ? src : src.src} alt={alt} {...props} />
     },
 }))
diff --git a/components/ui/sidebar.test.tsx b/components/ui/sidebar.test.tsx
new file mode 100644
index 0000000..6cbb45e
--- /dev/null
+++ b/components/ui/sidebar.test.tsx
@@ -0,0 +1,195 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+import { Sidebar, SidebarProvider, useSidebar } from "./sidebar"
+
+// Mock the useIsMobile hook
+vi.mock("@/hooks/use-mobile", () => ({
+  useIsMobile: vi.fn(() => false),
+}))
+
+// Import after mocking so we can control the mock
+import { useIsMobile } from "@/hooks/use-mobile"
+const mockUseIsMobile = vi.mocked(useIsMobile)
+
+describe("Sidebar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseIsMobile.mockReturnValue(false)
+  })
+
+  describe("collapsible='none' mode", () => {
+    it("renders a simple non-collapsible sidebar", () => {
+      render(
+        <SidebarProvider>
+          <Sidebar collapsible="none" data-testid="sidebar">
+            <div>Content</div>
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      expect(sidebar).toBeInTheDocument()
+      expect(sidebar).toHaveAttribute("data-slot", "sidebar")
+      expect(sidebar).toHaveTextContent("Content")
+    })
+
+    it("applies custom className", () => {
+      render(
+        <SidebarProvider>
+          <Sidebar collapsible="none" className="custom-class" data-testid="sidebar">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      expect(sidebar).toHaveClass("custom-class")
+    })
+  })
+
+  describe("desktop mode", () => {
+    beforeEach(() => {
+      mockUseIsMobile.mockReturnValue(false)
+    })
+
+    it("renders desktop sidebar with correct data attributes", () => {
+      render(
+        <SidebarProvider defaultOpen={true}>
+          <Sidebar variant="sidebar" side="left">
+            <div>Desktop Content</div>
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      // Desktop sidebar has a wrapper with data-slot="sidebar" that has the data attributes
+      const sidebar = document.querySelector('[data-slot="sidebar"]')
+      expect(sidebar).toBeInTheDocument()
+      expect(sidebar).toHaveAttribute("data-state", "expanded")
+      expect(sidebar).toHaveAttribute("data-variant", "sidebar")
+      expect(sidebar).toHaveAttribute("data-side", "left")
+    })
+
+    it("renders right-side desktop sidebar", () => {
+      render(
+        <SidebarProvider defaultOpen={true}>
+          <Sidebar side="right">
+            <div>Right Content</div>
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = document.querySelector('[data-slot="sidebar"]')
+      expect(sidebar).toHaveAttribute("data-side", "right")
+    })
+
+    it("renders floating variant sidebar", () => {
+      render(
+        <SidebarProvider>
+          <Sidebar variant="floating">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = document.querySelector('[data-slot="sidebar"]')
+      expect(sidebar).toHaveAttribute("data-variant", "floating")
+    })
+
+    it("renders inset variant sidebar", () => {
+      render(
+        <SidebarProvider>
+          <Sidebar variant="inset">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = document.querySelector('[data-slot="sidebar"]')
+      expect(sidebar).toHaveAttribute("data-variant", "inset")
+    })
+  })
+
+  describe("mobile mode", () => {
+    beforeEach(() => {
+      mockUseIsMobile.mockReturnValue(true)
+    })
+
+    it("renders mobile sidebar with correct data attributes when closed", () => {
+      render(
+        <SidebarProvider defaultOpen={false}>
+          <Sidebar data-testid="sidebar" side="left">
+            <div>Mobile Content</div>
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      expect(sidebar).toHaveAttribute("data-mobile", "true")
+      expect(sidebar).toHaveAttribute("data-state", "collapsed")
+      expect(sidebar).toHaveClass("-translate-x-full")
+    })
+
+    it("renders mobile sidebar with correct position for left side", () => {
+      render(
+        <SidebarProvider defaultOpen={false}>
+          <Sidebar data-testid="sidebar" side="left">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      expect(sidebar).toHaveClass("left-0")
+      expect(sidebar).toHaveClass("border-r")
+    })
+
+    it("renders mobile sidebar with correct position for right side", () => {
+      render(
+        <SidebarProvider defaultOpen={false}>
+          <Sidebar data-testid="sidebar" side="right">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      expect(sidebar).toHaveClass("right-0")
+      expect(sidebar).toHaveClass("border-l")
+      expect(sidebar).toHaveClass("translate-x-full")
+    })
+
+    it("does not apply translate class when mobile sidebar is open", () => {
+      // Use open prop to control the sidebar state
+      render(
+        <SidebarProvider open={true}>
+          <Sidebar data-testid="sidebar" side="left">
+            Content
+          </Sidebar>
+        </SidebarProvider>
+      )
+
+      const sidebar = screen.getByTestId("sidebar")
+      // When open=true is passed, the mobile state should be synced via useEffect
+      expect(sidebar).toHaveAttribute("data-mobile", "true")
+    })
+  })
+})
+
+describe("useSidebar", () => {
+  it("throws error when used outside SidebarProvider", () => {
+    const TestComponent = () => {
+      useSidebar()
+      return null
+    }
+
+    // Suppress console.error for this test
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+    expect(() => render(<TestComponent />)).toThrow(
+      "useSidebar must be used within a SidebarProvider."
+    )
+
+    consoleSpy.mockRestore()
+  })
+})
diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..6145d36
--- /dev/null
+++ b/components/ui/sidebar/index.ts
@@ -0,0 +1,64 @@
+/**
+ * Sidebar Components - Barrel Export
+ *
+ * This module re-exports all sidebar components from their respective files.
+ * The original sidebar.tsx is kept for backward compatibility and re-exports from here.
+ */
+
+// Context and Provider
+export {
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SidebarContext,
+  useSidebar,
+  SidebarProvider,
+  type SidebarContextProps,
+} from "./sidebar-context"
+
+// Main Sidebar component
+export {
+  Sidebar,
+  getMobileSidebarTransformClass,
+  getMobileSidebarPositionClass,
+} from "./sidebar-main"
+
+// Control components (trigger, rail, inset)
+export {
+  SidebarTrigger,
+  SidebarRail,
+  SidebarInset,
+} from "./sidebar-controls"
+
+// Layout components (input, header, footer, separator, content)
+export {
+  SidebarInput,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarSeparator,
+  SidebarContent,
+} from "./sidebar-layout"
+
+// Group components
+export {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupAction,
+  SidebarGroupContent,
+} from "./sidebar-group"
+
+// Menu components
+export {
+  sidebarMenuButtonVariants,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+} from "./sidebar-menu"
diff --git a/components/ui/sidebar/sidebar-context.tsx b/components/ui/sidebar/sidebar-context.tsx
new file mode 100644
index 0000000..fb3d863
--- /dev/null
+++ b/components/ui/sidebar/sidebar-context.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state"
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+export type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+export const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+export function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  cookieName = SIDEBAR_COOKIE_NAME,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  cookieName?: string
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobileInternal] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${cookieName}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open, cookieName]
+  )
+
+  // Track openMobile in a ref to avoid recreating setOpenMobile on every state change
+  const openMobileRef = React.useRef(openMobile)
+  React.useEffect(() => {
+    openMobileRef.current = openMobile
+  }, [openMobile])
+
+  // Wrapped setOpenMobile that also notifies the parent (setOpenProp) when on mobile.
+  // This ensures bidirectional sync: when the Sheet closes via overlay click,
+  // the parent state (e.g., useStudioUI's showLeftSidebar) gets updated.
+  // Using ref to avoid recreating this callback on every openMobile change.
+  const setOpenMobile = React.useCallback(
+    (value: boolean | ((prev: boolean) => boolean)) => {
+      const newValue = typeof value === "function" ? value(openMobileRef.current) : value
+      setOpenMobileInternal(newValue)
+      // Sync back to parent if we have an external handler
+      if (setOpenProp) {
+        setOpenProp(newValue)
+      }
+    },
+    [setOpenProp]
+  )
+
+  // Mobile Sidebar Sync (parent -> mobile):
+  // When the open prop changes from an external toggle, sync to mobile state.
+  React.useEffect(() => {
+    if (isMobile && openProp !== undefined && openProp !== openMobile) {
+      setOpenMobileInternal(openProp)
+    }
+  }, [isMobile, openProp, openMobile])
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
diff --git a/components/ui/sidebar/sidebar-controls.tsx b/components/ui/sidebar/sidebar-controls.tsx
new file mode 100644
index 0000000..87f204f
--- /dev/null
+++ b/components/ui/sidebar/sidebar-controls.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { PanelLeftIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./sidebar-context"
+
+export function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+export function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/components/ui/sidebar/sidebar-group.tsx b/components/ui/sidebar/sidebar-group.tsx
new file mode 100644
index 0000000..d0f05d0
--- /dev/null
+++ b/components/ui/sidebar/sidebar-group.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
diff --git a/components/ui/sidebar/sidebar-layout.tsx b/components/ui/sidebar/sidebar-layout.tsx
new file mode 100644
index 0000000..76d8d4e
--- /dev/null
+++ b/components/ui/sidebar/sidebar-layout.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+export function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/components/ui/sidebar/sidebar-main.tsx b/components/ui/sidebar/sidebar-main.tsx
new file mode 100644
index 0000000..f903bfe
--- /dev/null
+++ b/components/ui/sidebar/sidebar-main.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./sidebar-context"
+
+/** Builds the transform class for the mobile sidebar based on side and open state */
+export function getMobileSidebarTransformClass(
+  side: "left" | "right",
+  openMobile: boolean
+): string {
+  if (side === "left" && !openMobile) return "-translate-x-full"
+  if (side === "right" && !openMobile) return "translate-x-full"
+  return ""
+}
+
+/** Builds the position/border classes for mobile sidebar */
+export function getMobileSidebarPositionClass(side: "left" | "right"): string {
+  return side === "left" ? "left-0 border-r" : "right-0 border-l"
+}
+
+export function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <>
+        {/* Overlay - clickable backdrop to close sidebar */}
+        {openMobile && (
+          <div
+            className="fixed inset-0 z-40 bg-black/50 animate-in fade-in-0 duration-200"
+            onClick={() => setOpenMobile(false)}
+            aria-hidden="true"
+          />
+        )}
+        {/* Always-mounted sidebar container - uses CSS transforms like desktop */}
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          data-state={openMobile ? "expanded" : "collapsed"}
+          className={cn(
+            "bg-sidebar text-sidebar-foreground fixed inset-y-0 z-50 flex h-svh flex-col transition-transform duration-200 ease-out",
+            getMobileSidebarPositionClass(side),
+            getMobileSidebarTransformClass(side, openMobile),
+            className
+          )}
+          style={{
+            width: "var(--sidebar-width)",
+          } as React.CSSProperties}
+          {...props}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/sidebar/sidebar-menu.tsx b/components/ui/sidebar/sidebar-menu.tsx
new file mode 100644
index 0000000..c0b2ca8
--- /dev/null
+++ b/components/ui/sidebar/sidebar-menu.tsx
@@ -0,0 +1,272 @@
+"use client"
+
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./sidebar-context"
+
+export function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+export function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// Predefined widths for skeleton variation
+const SKELETON_WIDTHS = ["50%", "60%", "70%", "80%", "90%"] as const
+
+export function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Use React.useId() for a stable, component-local identifier
+  // that works correctly with React Strict Mode and SSR
+  const id = React.useId()
+
+  // Derive a deterministic width from the stable ID using a simple hash
+  const width = React.useMemo(() => {
+    let hash = 0
+    for (let i = 0; i < id.length; i++) {
+      hash = (hash * 31 + id.charCodeAt(i)) | 0
+    }
+    return SKELETON_WIDTHS[Math.abs(hash) % SKELETON_WIDTHS.length]
+  }, [id])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+export function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+export function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/components/ui/slideshow.test.tsx b/components/ui/slideshow.test.tsx
index e9a5a0a..397dad1 100644
--- a/components/ui/slideshow.test.tsx
+++ b/components/ui/slideshow.test.tsx
@@ -4,7 +4,7 @@ import { Slideshow } from "./slideshow";
 
 // Mock NextImage
 vi.mock("next/image", () => ({
-    default: (props: any) => <img data-testid="next-image" {...props} />
+    default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img data-testid="next-image" alt="" {...props} />
 }));
 
 // Mock hook
diff --git a/convex/generatedImages/helpers.ts b/convex/generatedImages/helpers.ts
new file mode 100644
index 0000000..349f829
--- /dev/null
+++ b/convex/generatedImages/helpers.ts
@@ -0,0 +1,290 @@
+/**
+ * Helper functions for generated images queries.
+ * Pure functions that transform data - no database access.
+ */
+import type { Doc } from "../_generated/dataModel"
+import type { QueryCtx } from "../_generated/server"
+import type {
+    EnrichedImage,
+    PublicFeedImage,
+    ThumbnailImage,
+    DisplayImage,
+    MyImagesQueryStrategy,
+    DisplayDataQueryStrategy,
+} from "./types"
+
+/**
+ * Helper to batch-enrich images with owner display info.
+ * Collects unique owner IDs and performs batch lookups to avoid N+1 queries.
+ * 
+ * NOTE: Current Limitation (Bandwidth Consideration)
+ * This fetches full user documents including encrypted API keys (pollinationsApiKey).
+ * Convex doesn't support field projection at the DB layer.
+ * 
+ * If user documents grow significantly (>10KB), consider splitting into a separate
+ * `userProfiles` table with only public display fields (username, pictureUrl).
+ * This would reduce internal bandwidth usage per enrichImages call.
+ */
+export async function enrichImages(
+    ctx: QueryCtx,
+    images: Doc<"generatedImages">[]
+): Promise<EnrichedImage[]> {
+    if (images.length === 0) return []
+
+    // Collect unique owner IDs
+    const ownerIds = [...new Set(images.map((img) => img.ownerId))]
+
+    // Batch fetch all owners
+    const owners = await Promise.all(
+        ownerIds.map((id: string) =>
+            ctx.db
+                .query("users")
+                .withIndex("by_clerk_id", (q) => q.eq("clerkId", id))
+                .unique()
+        )
+    )
+    const ownerMap = new Map<string, Doc<"users">>(
+        owners.filter((o): o is Doc<"users"> => o !== null).map((o) => [o.clerkId, o])
+    )
+
+    return images.map((image) => {
+        const owner = ownerMap.get(image.ownerId)
+        return {
+            ...image,
+            ownerName: owner?.username ?? "Anonymous",
+            ownerPictureUrl: owner?.pictureUrl ?? null,
+        }
+    })
+}
+
+/**
+ * Helper to map enriched images to optimized public feed format.
+ * Reduces bandwidth by using video previews for feed cards and excluding unused fields.
+ * 
+ * For videos: Uses compressed previewUrl (~480px width) instead of full-size video.
+ * For images: Uses full-size url (thumbnailUrl is too small for 360px+ feed cards).
+ */
+export function toPublicFeedImages(images: EnrichedImage[]): PublicFeedImage[] {
+    return images.map(img => {
+        // For videos, prefer previewUrl (smaller file) if available
+        // Fall back to full URL if no preview was generated
+        const isVideo = img.contentType?.startsWith("video/")
+        const feedUrl = isVideo && img.previewUrl ? img.previewUrl : img.url
+
+        return {
+            _id: img._id,
+            _creationTime: img._creationTime,
+            url: feedUrl,
+            // Always keep original URL for lightbox/download
+            originalUrl: img.url,
+            visibility: img.visibility,
+            createdAt: img.createdAt,
+            model: img.model,
+            prompt: img.prompt,
+            width: img.width,
+            height: img.height,
+            seed: img.seed,
+            contentType: img.contentType,
+            ownerName: img.ownerName,
+            ownerPictureUrl: img.ownerPictureUrl,
+            isSensitive: !!img.isSensitive, // Convert null/undefined to false for client boolean (default safe)
+        }
+    })
+}
+
+/**
+ * Helper to map full documents to lightweight thumbnail format.
+ * Reduces bandwidth by ~90% by excluding generationParams, prompt, and other unused fields.
+ * Uses thumbnailUrl when available (~98% additional bandwidth reduction for gallery).
+ */
+export function toThumbnails(images: Doc<"generatedImages">[]): ThumbnailImage[] {
+    return images.map(img => ({
+        _id: img._id,
+        _creationTime: img._creationTime,
+        // Prefer thumbnail for gallery display, fall back to original for legacy images
+        url: img.thumbnailUrl ?? img.url,
+        // Always include original URL for when user opens lightbox
+        originalUrl: img.url,
+        visibility: img.visibility,
+        createdAt: img.createdAt,
+        model: img.model,
+        contentType: img.contentType,
+    }))
+}
+
+/**
+ * Helper to map full documents to display-ready format.
+ * Includes fields needed for ImageCard display but excludes heavy generationParams.
+ */
+export function toDisplayImages(images: Doc<"generatedImages">[]): DisplayImage[] {
+    return images.map(img => ({
+        _id: img._id,
+        _creationTime: img._creationTime,
+        url: img.url,
+        visibility: img.visibility,
+        createdAt: img.createdAt,
+        model: img.model,
+        prompt: img.prompt,
+        width: img.width,
+        height: img.height,
+        seed: img.seed,
+        contentType: img.contentType,
+    }))
+}
+
+/**
+ * Determines query strategy for getMyImages based on filter combination.
+ */
+export function getMyImagesQueryStrategy(
+    visibility: "public" | "unlisted" | undefined,
+    models: string[] | undefined
+): MyImagesQueryStrategy {
+    const hasModelFilter = models && models.length > 0
+    const modelsSet = hasModelFilter ? new Set(models) : null
+    const isSingleModel = modelsSet?.size === 1
+
+    // No filters case
+    if (!visibility && !hasModelFilter) {
+        return { type: "no_filters" }
+    }
+    // Single model only (no visibility filter)
+    if (!visibility && isSingleModel && modelsSet) {
+        const [model] = [...modelsSet]
+        if (model) {
+            return { type: "single_model_only", model }
+        }
+    }
+    // Visibility only (no model filter)
+    if (visibility && !hasModelFilter) {
+        return { type: "visibility_only", visibility }
+    }
+    // Visibility + single model
+    if (visibility && isSingleModel && modelsSet) {
+        const [model] = [...modelsSet]
+        if (model) {
+            return { type: "visibility_single_model", visibility, model }
+        }
+    }
+    // Multiple models (with or without visibility)
+    if (hasModelFilter && modelsSet) {
+        return { type: "multi_model_filter", visibility: visibility ?? null, models: [...modelsSet] }
+    }
+
+    // Fallback (should not reach here with valid inputs)
+    return { type: "no_filters" }
+}
+
+/**
+ * Determines query strategy for getMyImagesWithDisplayData based on filter combination.
+ */
+export function getDisplayDataQueryStrategy(
+    visibility: "public" | "unlisted" | undefined,
+    models: string[] | undefined
+): DisplayDataQueryStrategy {
+    const hasModelFilter = models && models.length > 0
+    const modelsSet = hasModelFilter ? new Set(models) : null
+    const isSingleModel = modelsSet?.size === 1
+
+    // No filters case
+    if (!visibility && !hasModelFilter) {
+        return { type: "no_filters" }
+    }
+    // Single model only (no visibility filter)
+    if (!visibility && isSingleModel && modelsSet) {
+        const [model] = [...modelsSet]
+        if (model) {
+            return { type: "single_model_only", model }
+        }
+    }
+    // Visibility filter only
+    if (visibility && !hasModelFilter) {
+        return { type: "visibility_only", visibility }
+    }
+    // Visibility + single model
+    if (visibility && isSingleModel && modelsSet) {
+        const [model] = [...modelsSet]
+        if (model) {
+            return { type: "visibility_single_model", visibility, model }
+        }
+    }
+    // Multi-model filter (with or without visibility)
+    return {
+        type: "multi_model_filter",
+        visibility: visibility ?? null,
+        models: modelsSet ? [...modelsSet] : [],
+    }
+}
+
+/**
+ * Executes the appropriate paginated query based on the strategy.
+ * Each case uses the optimal index for the given filter combination.
+ */
+export async function executeMyImagesQuery(
+    ctx: QueryCtx,
+    ownerId: string,
+    strategy: MyImagesQueryStrategy,
+    paginationOpts: { numItems: number; cursor: string | null }
+) {
+    switch (strategy.type) {
+        case "no_filters":
+            return ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner", (q) => q.eq("ownerId", ownerId))
+                .order("desc")
+                .paginate(paginationOpts)
+
+        case "single_model_only":
+            return ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner_model", (q) =>
+                    q.eq("ownerId", ownerId).eq("model", strategy.model)
+                )
+                .order("desc")
+                .paginate(paginationOpts)
+
+        case "visibility_only":
+            return ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner_visibility", (q) =>
+                    q.eq("ownerId", ownerId).eq("visibility", strategy.visibility)
+                )
+                .order("desc")
+                .paginate(paginationOpts)
+
+        case "visibility_single_model":
+            return ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner_visibility_model", (q) =>
+                    q.eq("ownerId", ownerId)
+                        .eq("visibility", strategy.visibility)
+                        .eq("model", strategy.model)
+                )
+                .order("desc")
+                .paginate(paginationOpts)
+
+        case "multi_model_filter": {
+            const visibilityValue = strategy.visibility
+            const baseQuery = visibilityValue
+                ? ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner_visibility", (q) =>
+                        q.eq("ownerId", ownerId).eq("visibility", visibilityValue)
+                    )
+                : ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner", (q) => q.eq("ownerId", ownerId))
+
+            return baseQuery
+                .filter((q) => {
+                    const modelConditions = strategy.models.map(model =>
+                        q.eq(q.field("model"), model)
+                    )
+                    return modelConditions.length === 1
+                        ? modelConditions[0]
+                        : q.or(...modelConditions)
+                })
+                .order("desc")
+                .paginate(paginationOpts)
+        }
+    }
+}
diff --git a/convex/generatedImages/internal.ts b/convex/generatedImages/internal.ts
new file mode 100644
index 0000000..b241c15
--- /dev/null
+++ b/convex/generatedImages/internal.ts
@@ -0,0 +1,147 @@
+/**
+ * Internal queries and mutations for generated images.
+ * Used by cron jobs and other internal functions.
+ */
+import { v } from "convex/values"
+import { internalMutation, internalQuery } from "../_generated/server"
+
+/**
+ * Internal query to get image data for analysis.
+ * Bypasses visibility checks.
+ */
+export const getByIdInternal = internalQuery({
+    args: { imageId: v.id("generatedImages") },
+    handler: async (ctx, args) => {
+        return await ctx.db.get(args.imageId);
+    },
+});
+
+/**
+ * Internal mutation to update the image with analysis results.
+ */
+export const updateImageSensitivity = internalMutation({
+    args: {
+        imageId: v.id("generatedImages"),
+        isSensitive: v.boolean(),
+        confidence: v.number(),
+        contentAnalysis: v.object({
+            nudity: v.optional(v.string()),
+            sexual: v.optional(v.string()),
+            violence: v.optional(v.string()),
+            analyzedAt: v.number(),
+        }),
+    },
+    handler: async (ctx, args) => {
+        // Update main record with lightweight flags
+        await ctx.db.patch(args.imageId, {
+            isSensitive: args.isSensitive,
+            // If vision found it sensitive, update source
+            sensitiveSource: "vision_analysis",
+            sensitiveConfidence: args.confidence,
+        });
+
+        // Update details record with heavy analysis object
+        const details = await ctx.db
+            .query("generatedImageDetails")
+            .withIndex("by_image", (q) => q.eq("imageId", args.imageId))
+            .unique();
+
+        if (details) {
+            await ctx.db.patch(details._id, {
+                contentAnalysis: args.contentAnalysis,
+            });
+        } else {
+            // Create details if missing (legacy data)
+            await ctx.db.insert("generatedImageDetails", {
+                imageId: args.imageId,
+                generationParams: {}, // Required field, placeholder for legacy
+                contentAnalysis: args.contentAnalysis,
+            });
+        }
+    },
+});
+
+/**
+ * Internal mutation to update image with prompt inference results.
+ */
+export const updateImagePromptInference = internalMutation({
+    args: {
+        imageId: v.id("generatedImages"),
+        promptInference: v.object({
+            category: v.string(),
+            confidence: v.number(),
+            reasoning: v.string(),
+            provider: v.string(),
+            analyzedAt: v.number(),
+        }),
+        isSensitive: v.optional(v.boolean()), // If decided
+        confidence: v.optional(v.number()), // If decided
+    },
+    handler: async (ctx, args) => {
+        // 1. Update main record if sensitivity decision was made
+        if (args.isSensitive !== undefined) {
+             const updates: Record<string, unknown> = {
+                isSensitive: args.isSensitive,
+                sensitiveSource: "prompt_inference",
+            };
+            
+            if (args.confidence !== undefined) {
+                updates.sensitiveConfidence = args.confidence;
+            }
+            
+            await ctx.db.patch(args.imageId, updates);
+        }
+
+        // 2. Update details record with inference data
+        const details = await ctx.db
+            .query("generatedImageDetails")
+            .withIndex("by_image", (q) => q.eq("imageId", args.imageId))
+            .unique();
+
+        if (details) {
+            await ctx.db.patch(details._id, {
+                promptInference: args.promptInference,
+            });
+        } else {
+            // Create details if missing (legacy data)
+            await ctx.db.insert("generatedImageDetails", {
+                imageId: args.imageId,
+                generationParams: {}, // Required field, placeholder for legacy
+                promptInference: args.promptInference,
+            });
+        }
+    },
+});
+
+/**
+ * Find images that haven't been tagged yet for the cron job.
+ * Using 'isSensitive' == null (or undefined for legacy)
+ */
+export const getUnanalyzedImages = internalQuery({
+    args: { limit: v.number() },
+    handler: async (ctx, args) => {
+        // We want images where isSensitive is NULL (pending) or UNDEFINED (legacy).
+        // Index `by_sensitivity` contains keys for `isSensitive` values.
+        // However, standard indexing of `null` allows efficient lookup.
+
+        // Priority 1: Check explicit nulls (new schema)
+        let pending = await ctx.db
+            .query("generatedImages")
+            .withIndex("by_sensitivity", q => q.eq("isSensitive", null))
+            .take(args.limit);
+
+        // Priority 2: Legacy undefined (backlog) - Only if we need more items
+        if (pending.length < args.limit) {
+            const legacyPending = await ctx.db
+                .query("generatedImages")
+                // Scan recent first to clear new stuff, or old first? 
+                // Default order is sufficient.
+                .filter(q => q.eq(q.field("isSensitive"), undefined))
+                .take(args.limit - pending.length);
+
+            pending = [...pending, ...legacyPending];
+        }
+
+        return pending;
+    },
+});
diff --git a/convex/generatedImages/mutations.ts b/convex/generatedImages/mutations.ts
new file mode 100644
index 0000000..b15d679
--- /dev/null
+++ b/convex/generatedImages/mutations.ts
@@ -0,0 +1,304 @@
+/**
+ * Public mutations for generated images.
+ */
+import { v } from "convex/values"
+import { mutation } from "../_generated/server"
+import { internal } from "../_generated/api"
+import { analyzePromptForNSFW } from "../lib/nsfwDetection"
+import { MAX_BULK_OPERATION_SIZE, generationParamsValidator } from "./types"
+
+/**
+ * Create a new generated image record.
+ */
+export const create = mutation({
+    args: {
+        r2Key: v.string(),
+        url: v.string(),
+        filename: v.string(),
+        contentType: v.string(),
+        sizeBytes: v.number(),
+        width: v.optional(v.number()),
+        height: v.optional(v.number()),
+        aspectRatio: v.optional(v.number()),
+        prompt: v.string(),
+        negativePrompt: v.optional(v.string()),
+        model: v.string(),
+        seed: v.optional(v.number()),
+        generationParams: generationParamsValidator,
+        visibility: v.optional(v.union(v.literal("public"), v.literal("unlisted"))),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            throw new Error("Not authenticated")
+        }
+
+        // Analyze prompt for NSFW content
+        const promptAnalysis = analyzePromptForNSFW(args.prompt)
+        console.warn(`[Prompt Analysis] Score: ${promptAnalysis.confidence}, Sensitive: ${promptAnalysis.isSensitive}, Terms: ${promptAnalysis.matchedTerms.join(", ")}`)
+
+        const imageId = await ctx.db.insert("generatedImages", {
+            ownerId: identity.subject,
+            visibility: args.visibility ?? "public",
+            r2Key: args.r2Key,
+            url: args.url,
+            filename: args.filename,
+            contentType: args.contentType,
+            sizeBytes: args.sizeBytes,
+            width: args.width,
+            height: args.height,
+            aspectRatio: args.width && args.height
+                ? Math.max(args.width, args.height) / Math.min(args.width, args.height)
+                : undefined,
+            prompt: args.prompt,
+            negativePrompt: args.negativePrompt,
+            model: args.model,
+            seed: args.seed,
+            createdAt: Date.now(),
+            // Initial sensitive content tagging based on prompt
+            // Tri-state logic: true=NSFW, false=Safe, null=Pending/Unknown
+            // If explicit (>= 0.9), mark Sensitive.
+            // If any less, mark Pending (null) to run Phase 3 Prompt Inference.
+            isSensitive: promptAnalysis.confidence >= 0.9 ? true : null,
+
+            sensitiveSource: promptAnalysis.confidence >= 0.9 ? "prompt_analysis" : undefined,
+            sensitiveConfidence: promptAnalysis.confidence,
+        })
+
+        // Store heavy details in side table (P0 Optimization)
+        await ctx.db.insert("generatedImageDetails", {
+            imageId,
+            generationParams: args.generationParams,
+        })
+
+        // Schedule async Prompt Inference (Phase 3) if prompt was not explicitly flagged
+        // This ensures "Gate 2" runs on everything that isn't already caught by Gate 1.
+        if (promptAnalysis.confidence < 0.9) {
+            await ctx.scheduler.runAfter(0, internal.promptInference.analyzePromptImage, {
+                imageId,
+                prompt: args.prompt,
+            })
+        }
+
+        return imageId
+    },
+})
+
+/**
+ * Update the visibility of a generated image.
+ * Only the owner can change visibility.
+ */
+export const setVisibility = mutation({
+    args: {
+        imageId: v.id("generatedImages"),
+        visibility: v.union(v.literal("public"), v.literal("unlisted")),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            throw new Error("Not authenticated")
+        }
+
+        const image = await ctx.db.get(args.imageId)
+        if (!image) {
+            throw new Error("Image not found")
+        }
+
+        if (image.ownerId !== identity.subject) {
+            throw new Error("Not authorized to modify this image")
+        }
+
+        await ctx.db.patch(args.imageId, {
+            visibility: args.visibility,
+        })
+
+        return { success: true }
+    },
+})
+
+/**
+ * Bulk update visibility for multiple images.
+ * Only the owner can change visibility of their images.
+ * Returns the count of successfully updated images.
+ *
+ * @param imageIds - Array of image IDs to update (max 100 to avoid Convex limits)
+ */
+export const setBulkVisibility = mutation({
+    args: {
+        imageIds: v.array(v.id("generatedImages")),
+        visibility: v.union(v.literal("public"), v.literal("unlisted")),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            throw new Error("Not authenticated")
+        }
+
+        // Input validation: enforce upper bound to avoid hitting Convex limits
+        if (args.imageIds.length > MAX_BULK_OPERATION_SIZE) {
+            throw new Error(
+                `Too many items: maximum ${MAX_BULK_OPERATION_SIZE} images can be updated at once, received ${args.imageIds.length}`
+            )
+        }
+
+        if (args.imageIds.length === 0) {
+            return {
+                success: true,
+                successCount: 0,
+                totalRequested: 0,
+                errors: undefined,
+            }
+        }
+
+        let successCount = 0
+        const errors: string[] = []
+
+
+        await Promise.all(
+            args.imageIds.map(async (imageId) => {
+                try {
+                    const image = await ctx.db.get(imageId)
+                    if (!image) {
+                        errors.push(`Image ${imageId} not found`)
+                        return
+                    }
+
+                    if (image.ownerId !== identity.subject) {
+                        errors.push(`Not authorized to modify image ${imageId}`)
+                        return
+                    }
+
+                    await ctx.db.patch(imageId, {
+                        visibility: args.visibility,
+                    })
+                    successCount++
+                } catch (error) {
+                    const errorMessage = error instanceof Error ? error.message : "Unknown error"
+                    errors.push(`Failed to update image ${imageId}: ${errorMessage}`)
+                }
+            })
+        )
+
+        return {
+            success: successCount > 0,
+            successCount,
+            totalRequested: args.imageIds.length,
+            errors: errors.length > 0 ? errors : undefined,
+        }
+    },
+})
+
+/**
+ * Delete a generated image record.
+ * Only the owner can delete their images.
+ * Returns the r2Key and thumbnailR2Key so the caller can also delete from R2.
+ */
+export const remove = mutation({
+    args: {
+        imageId: v.id("generatedImages"),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            throw new Error("Not authenticated")
+        }
+
+        const image = await ctx.db.get(args.imageId)
+        if (!image) {
+            throw new Error("Image not found")
+        }
+
+        if (image.ownerId !== identity.subject) {
+            throw new Error("Not authorized to delete this image")
+        }
+
+        const r2Key = image.r2Key
+        const thumbnailR2Key = image.thumbnailR2Key
+
+        await ctx.db.delete(args.imageId)
+
+        return { r2Key, thumbnailR2Key }
+    },
+})
+
+/**
+ * Bulk delete multiple generated image records.
+ * Only the owner can delete their images.
+ * Returns all r2Keys and thumbnailR2Keys so the caller can delete them from R2.
+ *
+ * @param imageIds - Array of image IDs to delete (max 100 to avoid Convex limits)
+ */
+export const removeMany = mutation({
+    args: {
+        imageIds: v.array(v.id("generatedImages")),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            throw new Error("Not authenticated")
+        }
+
+        // Input validation: enforce upper bound to avoid hitting Convex limits
+        if (args.imageIds.length > MAX_BULK_OPERATION_SIZE) {
+            throw new Error(
+                `Too many items: maximum ${MAX_BULK_OPERATION_SIZE} images can be deleted at once, received ${args.imageIds.length}`
+            )
+        }
+
+        if (args.imageIds.length === 0) {
+            return {
+                success: true,
+                successCount: 0,
+                totalRequested: 0,
+                r2Keys: [],
+                thumbnailR2Keys: [],
+                errors: undefined,
+            }
+        }
+
+        const r2Keys: string[] = []
+        const thumbnailR2Keys: string[] = []
+        const errors: string[] = []
+        let successCount = 0
+
+        await Promise.all(
+            args.imageIds.map(async (imageId) => {
+                try {
+                    const image = await ctx.db.get(imageId)
+                    if (!image) {
+                        errors.push(`Image ${imageId} not found`)
+                        return
+                    }
+
+                    if (image.ownerId !== identity.subject) {
+                        errors.push(`Not authorized to delete image ${imageId}`)
+                        return
+                    }
+
+                    // Collect R2 keys for deletion
+                    if (image.r2Key) {
+                        r2Keys.push(image.r2Key)
+                    }
+                    if (image.thumbnailR2Key) {
+                        thumbnailR2Keys.push(image.thumbnailR2Key)
+                    }
+
+                    await ctx.db.delete(imageId)
+                    successCount++
+                } catch (error) {
+                    const errorMessage = error instanceof Error ? error.message : "Unknown error"
+                    errors.push(`Failed to delete image ${imageId}: ${errorMessage}`)
+                }
+            })
+        )
+
+        return {
+            success: successCount > 0,
+            successCount,
+            totalRequested: args.imageIds.length,
+            r2Keys,
+            thumbnailR2Keys,
+            errors: errors.length > 0 ? errors : undefined,
+        }
+    },
+})
diff --git a/convex/generatedImages/queries.ts b/convex/generatedImages/queries.ts
new file mode 100644
index 0000000..717bc07
--- /dev/null
+++ b/convex/generatedImages/queries.ts
@@ -0,0 +1,433 @@
+/**
+ * Public queries for generated images.
+ */
+import { paginationOptsValidator } from "convex/server"
+import { v } from "convex/values"
+import { query } from "../_generated/server"
+import type { EnrichedImage } from "./types"
+import {
+    enrichImages,
+    toPublicFeedImages,
+    toThumbnails,
+    toDisplayImages,
+    getMyImagesQueryStrategy,
+    getDisplayDataQueryStrategy,
+    executeMyImagesQuery,
+} from "./helpers"
+
+/**
+ * Get a single generated image by ID.
+ * Returns null if not found or if the user doesn't have access.
+ */
+export const getById = query({
+    args: {
+        imageId: v.id("generatedImages"),
+    },
+    handler: async (ctx, args) => {
+        const image = await ctx.db.get(args.imageId)
+        if (!image) {
+            return null
+        }
+
+        // Public images are accessible to everyone
+        if (image.visibility === "public") {
+            return image
+        }
+
+        // Unlisted images require authentication and ownership
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity || identity.subject !== image.ownerId) {
+            return null
+        }
+
+        return image
+    },
+})
+
+/**
+ * Get the current user's generated images for gallery display (paginated).
+ * Returns LIGHTWEIGHT thumbnail data only - excludes generationParams and other heavy fields.
+ * Use getById for full image details when user clicks on an image.
+ * 
+ * Supports optional filtering by visibility and models.
+ * 
+ * Note: When filters are applied, individual pages may contain fewer items
+ * than requested if matching documents are sparse. Clients should continue
+ * loading until isDone is true.
+ */
+export const getMyImages = query({
+    args: {
+        paginationOpts: paginationOptsValidator,
+        /** Filter by visibility (undefined = all, "unlisted" = private only, "public" = public only) */
+        visibility: v.optional(v.union(v.literal("public"), v.literal("unlisted"))),
+        /** Filter by specific models (undefined or empty = all models) */
+        models: v.optional(v.array(v.string())),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            return {
+                page: [],
+                isDone: true,
+                continueCursor: "",
+            }
+        }
+
+        const strategy = getMyImagesQueryStrategy(args.visibility, args.models)
+        const ownerId = identity.subject
+        const paginatedResult = await executeMyImagesQuery(ctx, ownerId, strategy, args.paginationOpts)
+
+        // Return lightweight thumbnail data only
+        return {
+            ...paginatedResult,
+            page: toThumbnails(paginatedResult.page),
+        }
+    },
+})
+
+/**
+ * Get the current user's generated images with display data (paginated).
+ * Returns fields needed for ImageCard display (prompt, dimensions, seed) but excludes
+ * heavy generationParams field. Use this for the dedicated history page.
+ * 
+ * For lightweight gallery sidebar, use getMyImages instead.
+ */
+export const getMyImagesWithDisplayData = query({
+    args: {
+        paginationOpts: paginationOptsValidator,
+        visibility: v.optional(v.union(v.literal("public"), v.literal("unlisted"))),
+        models: v.optional(v.array(v.string())),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            return {
+                page: [],
+                isDone: true,
+                continueCursor: "",
+            }
+        }
+
+        const strategy = getDisplayDataQueryStrategy(args.visibility, args.models)
+        let paginatedResult
+
+        switch (strategy.type) {
+            case "no_filters":
+                paginatedResult = await ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner", (q) => q.eq("ownerId", identity.subject))
+                    .order("desc")
+                    .paginate(args.paginationOpts)
+                break
+
+            case "single_model_only":
+                paginatedResult = await ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner_model", (q) =>
+                        q.eq("ownerId", identity.subject).eq("model", strategy.model)
+                    )
+                    .order("desc")
+                    .paginate(args.paginationOpts)
+                break
+
+            case "visibility_only":
+                paginatedResult = await ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner_visibility", (q) =>
+                        q.eq("ownerId", identity.subject).eq("visibility", strategy.visibility)
+                    )
+                    .order("desc")
+                    .paginate(args.paginationOpts)
+                break
+
+            case "visibility_single_model":
+                paginatedResult = await ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner_visibility_model", (q) =>
+                        q.eq("ownerId", identity.subject)
+                            .eq("visibility", strategy.visibility)
+                            .eq("model", strategy.model)
+                    )
+                    .order("desc")
+                    .paginate(args.paginationOpts)
+                break
+
+            case "multi_model_filter": {
+                const visibilityValue = strategy.visibility
+                const baseQuery = visibilityValue === null
+                    ? ctx.db.query("generatedImages")
+                        .withIndex("by_owner", (q) => q.eq("ownerId", identity.subject))
+                    : ctx.db.query("generatedImages")
+                        .withIndex("by_owner_visibility", (q) =>
+                            q.eq("ownerId", identity.subject).eq("visibility", visibilityValue)
+                        )
+
+                const modelArray = strategy.models
+                paginatedResult = await baseQuery
+                    .filter((q) => {
+                        const modelConditions = modelArray.map(model =>
+                            q.eq(q.field("model"), model)
+                        )
+                        return modelConditions.length === 1
+                            ? modelConditions[0]
+                            : q.or(...modelConditions)
+                    })
+                    .order("desc")
+                    .paginate(args.paginationOpts)
+                break
+            }
+        }
+
+        // Return display-ready data (excludes generationParams)
+        return {
+            ...paginatedResult,
+            page: toDisplayImages(paginatedResult.page),
+        }
+    },
+})
+
+/**
+ * Get public images for the feed (paginated).
+ * Returns OPTIMIZED data for public feed display:
+ * - Uses thumbnailUrl for bandwidth optimization
+ * - Includes only essential fields (no generationParams)
+ * - Includes owner info for community feed display
+ */
+export const getPublicFeed = query({
+    args: {
+        paginationOpts: paginationOptsValidator,
+        /** User's content filter preference */
+        filterPreference: v.optional(v.union(v.literal("block"), v.literal("blur"), v.literal("allow"))),
+    },
+    handler: async (ctx, args) => {
+        const { filterPreference = "blur" } = args;
+
+        let paginatedResult;
+
+        // CASE 1: BLOCK - Show ONLY safe content (isSensitive=false)
+        if (filterPreference === "block") {
+            paginatedResult = await ctx.db
+                .query("generatedImages")
+                .withIndex("by_visibility_sensitive", (q) =>
+                    q.eq("visibility", "public").eq("isSensitive", false)
+                )
+                .filter((q) =>
+                    // Filter extreme aspect ratios
+                    q.not(q.gt(q.field("aspectRatio"), 4))
+                )
+                .order("desc")
+                .paginate(args.paginationOpts);
+
+        }
+        // CASE 2 & 3: BLUR / ALLOW - Show ALL tagged content (safe OR sensitive)
+        // We filter out 'null' (pending)
+        else {
+            paginatedResult = await ctx.db
+                .query("generatedImages")
+                // Use the main index and filter
+                .withIndex("by_visibility", (q) =>
+                    q.eq("visibility", "public")
+                )
+                .filter((q) =>
+                    q.and(
+                        // Not extreme aspect ratio
+                        q.not(q.gt(q.field("aspectRatio"), 4)),
+                        // Has been analyzed (not null)
+                        q.neq(q.field("isSensitive"), null)
+                    )
+                )
+                .order("desc")
+                .paginate(args.paginationOpts);
+        }
+
+        // Enrich with owner info, then convert to optimized public feed format
+        const enrichedPage = await enrichImages(ctx, paginatedResult.page)
+
+        return {
+            ...paginatedResult,
+            page: toPublicFeedImages(enrichedPage),
+        }
+    },
+})
+
+/**
+ * Get public images for a specific user (by username).
+ * Respects the viewer's content filter preference for sensitive content.
+ */
+export const getImagesByUsername = query({
+    args: {
+        username: v.string(),
+        paginationOpts: paginationOptsValidator,
+        /** Viewer's content filter preference */
+        filterPreference: v.optional(v.union(v.literal("block"), v.literal("blur"), v.literal("allow"))),
+    },
+    handler: async (ctx, args) => {
+        const { filterPreference = "blur" } = args;
+
+        // First find the user
+        const user = await ctx.db
+            .query("users")
+            .withIndex("by_username", (q) => q.eq("username", args.username))
+            .unique()
+
+        if (!user) {
+            return {
+                page: [],
+                isDone: true,
+                continueCursor: "",
+            }
+        }
+
+        let paginatedResult;
+
+        // CASE 1: BLOCK - Show ONLY safe content (isSensitive=false)
+        if (filterPreference === "block") {
+            paginatedResult = await ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner_visibility", (q) =>
+                    q.eq("ownerId", user.clerkId).eq("visibility", "public")
+                )
+                .filter((q) =>
+                    q.and(
+                        q.not(q.gt(q.field("aspectRatio"), 4)),
+                        q.eq(q.field("isSensitive"), false)
+                    )
+                )
+                .order("desc")
+                .paginate(args.paginationOpts)
+        }
+        // CASE 2 & 3: BLUR / ALLOW - Show ALL tagged content (safe OR sensitive)
+        // Filter out 'null' (pending) to avoid showing unanalyzed content
+        else {
+            paginatedResult = await ctx.db
+                .query("generatedImages")
+                .withIndex("by_owner_visibility", (q) =>
+                    q.eq("ownerId", user.clerkId).eq("visibility", "public")
+                )
+                .filter((q) =>
+                    q.and(
+                        q.not(q.gt(q.field("aspectRatio"), 4)),
+                        // Has been analyzed (not null) - prevents showing pending content
+                        q.neq(q.field("isSensitive"), null)
+                    )
+                )
+                .order("desc")
+                .paginate(args.paginationOpts)
+        }
+
+        // Enrich with user info (we already have the user), cast to EnrichedImage for helper
+        const enrichedPage = paginatedResult.page.map((image) => ({
+            ...image,
+            ownerName: user.username ?? "Anonymous",
+            ownerPictureUrl: user.pictureUrl ?? null,
+        })) as EnrichedImage[]
+
+        return {
+            ...paginatedResult,
+            page: toPublicFeedImages(enrichedPage),
+        }
+    },
+})
+
+/**
+ * Get feed of images from users the current user follows.
+ * 
+ * OPTIMIZATION: Uses per-user indexed queries instead of scanning all public images.
+ * - Old approach: Scan ALL public images with filter → O(total_public_images)
+ * - New approach: Query each followed user with index → O(followed_users * IMAGES_PER_USER)
+ * 
+ * For users following <50 accounts, this is dramatically faster and more scalable.
+ * 
+ * Note: This simplified implementation fetches a fixed number of recent images per user
+ * and does not support cursor-based pagination. For MVP, this is acceptable since
+ * most users follow <50 accounts. Cursor support can be added later if needed.
+ */
+export const getFollowingFeed = query({
+    args: {
+        paginationOpts: paginationOptsValidator,
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            return { page: [], isDone: true, continueCursor: "" }
+        }
+
+        // Get list of followed user IDs
+        const follows = await ctx.db
+            .query("follows")
+            .withIndex("by_follower", (q) => q.eq("followerId", identity.subject))
+            .collect()
+        const followedIds = follows.map((f) => f.followeeId)
+
+        if (followedIds.length === 0) {
+            return { page: [], isDone: true, continueCursor: "" }
+        }
+
+        // Fetch latest N images per followed user using indexed queries
+        // This uses the by_owner_visibility index for O(log n) lookups per user
+        // instead of scanning all public images
+        const IMAGES_PER_USER = 10 // Tune this based on expected follow counts
+        const perUserResults = await Promise.all(
+            followedIds.map((userId) =>
+                ctx.db
+                    .query("generatedImages")
+                    .withIndex("by_owner_visibility", (q) =>
+                        q.eq("ownerId", userId).eq("visibility", "public")
+                    )
+                    .filter((q) => q.not(q.gt(q.field("aspectRatio"), 4)))
+                    .order("desc")
+                    .take(IMAGES_PER_USER)
+            )
+        )
+
+        // Merge and sort by createdAt descending
+        const allImages = perUserResults.flat()
+        allImages.sort((a, b) => b.createdAt - a.createdAt)
+
+        // Take requested page size
+        const pageSize = args.paginationOpts.numItems ?? 20
+        const page = allImages.slice(0, pageSize)
+
+        const enrichedPage = await enrichImages(ctx, page)
+
+        // Note: Simplified pagination - isDone when we've shown all merged images
+        // For true cursor-based pagination, we'd need a more complex approach
+        return {
+            page: toPublicFeedImages(enrichedPage),
+            isDone: allImages.length <= pageSize,
+            continueCursor: "", // Simplified: no cursor support
+        }
+    },
+})
+
+/**
+ * Get an image by its R2 key.
+ * Used for deduplication checks.
+ */
+export const getByR2Key = query({
+    args: {
+        r2Key: v.string(),
+    },
+    handler: async (ctx, args) => {
+        const identity = await ctx.auth.getUserIdentity()
+        if (!identity) {
+            return null
+        }
+
+        const image = await ctx.db
+            .query("generatedImages")
+            .withIndex("by_r2_key", (q) => q.eq("r2Key", args.r2Key))
+            .unique()
+
+        // Only return if the user owns this image or it's public
+        if (!image) {
+            return null
+        }
+
+        if (image.visibility === "public" || image.ownerId === identity.subject) {
+            return image
+        }
+
+        return null
+    },
+})
diff --git a/convex/generatedImages/types.ts b/convex/generatedImages/types.ts
new file mode 100644
index 0000000..f9915ee
--- /dev/null
+++ b/convex/generatedImages/types.ts
@@ -0,0 +1,119 @@
+/**
+ * Types, validators and constants for generated images.
+ */
+import { v } from "convex/values"
+import type { Doc } from "../_generated/dataModel"
+
+/**
+ * Maximum number of items allowed in bulk operations to avoid hitting Convex limits.
+ * Convex has limits on transaction size and number of reads/writes per transaction.
+ */
+export const MAX_BULK_OPERATION_SIZE = 100
+
+export const generationParamsValidator = v.object({
+    prompt: v.string(),
+    negativePrompt: v.optional(v.string()),
+    model: v.optional(v.string()),
+    width: v.optional(v.number()),
+    height: v.optional(v.number()),
+    seed: v.optional(v.number()),
+    enhance: v.optional(v.boolean()),
+    private: v.optional(v.boolean()),
+    safe: v.optional(v.boolean()),
+    image: v.optional(v.string()),
+    duration: v.optional(v.number()),
+    audio: v.optional(v.boolean()),
+    aspectRatio: v.optional(v.string()),
+    lastFrameImage: v.optional(v.string()),
+})
+
+/** Image with enriched owner display information */
+export type EnrichedImage = Doc<"generatedImages"> & {
+    ownerName: string
+    ownerPictureUrl: string | null
+}
+
+/** 
+ * Optimized public feed image data for unauthenticated display.
+ * Includes only fields needed for feed cards - excludes heavy generationParams.
+ * Uses full-size images for quality - thumbnails are too small for feed card dimensions.
+ */
+export type PublicFeedImage = {
+    _id: Doc<"generatedImages">["_id"]
+    _creationTime: number
+    /** Full-size URL for proper display quality at feed card dimensions */
+    url: string
+    /** Original full-size URL (for lightbox/download) */
+    originalUrl: string
+    visibility: "public" | "unlisted"
+    createdAt: number
+    model: string
+    /** Prompt for display (users can copy) */
+    prompt: string
+    /** Dimensions for aspect ratio calculation */
+    width: number | undefined
+    height: number | undefined
+    /** Seed for display badges */
+    seed: number | undefined
+    /** MIME type for video detection */
+    contentType: string
+    /** Owner display name */
+    ownerName: string
+    /** Owner avatar URL */
+    ownerPictureUrl: string | null
+    /** Whether content is sensitive */
+    isSensitive: boolean
+}
+
+/** Lightweight thumbnail data for gallery display (excludes heavy fields like generationParams) */
+export type ThumbnailImage = {
+    _id: Doc<"generatedImages">["_id"]
+    _creationTime: number
+    /** URL to display - uses thumbnailUrl if available, otherwise falls back to original */
+    url: string
+    /** Original full-size URL (for lightbox/download) */
+    originalUrl: string
+    visibility: "public" | "unlisted"
+    createdAt: number
+    // Include model for filtering badge display (small field)
+    model: string
+    // Include contentType for video detection
+    contentType: string
+}
+
+/** Display-ready image data for history page (includes display fields, excludes generationParams) */
+export type DisplayImage = {
+    _id: Doc<"generatedImages">["_id"]
+    _creationTime: number
+    url: string
+    visibility: "public" | "unlisted"
+    createdAt: number
+    model: string
+    prompt: string
+    width: number | undefined
+    height: number | undefined
+    seed: number | undefined
+    contentType: string
+}
+
+/**
+ * Determines query strategy for getMyImages based on filter combination.
+ * Returns a discriminated union indicating which query path to use.
+ */
+export type MyImagesQueryStrategy =
+    | { type: "no_filters" }
+    | { type: "single_model_only"; model: string }
+    | { type: "visibility_only"; visibility: "public" | "unlisted" }
+    | { type: "visibility_single_model"; visibility: "public" | "unlisted"; model: string }
+    | { type: "multi_model_filter"; visibility: "public" | "unlisted" | null; models: string[] }
+
+/**
+ * Determines query strategy for getMyImagesWithDisplayData based on filter combination.
+ * Returns a discriminated union indicating which query path to use.
+ */
+export type DisplayDataQueryStrategy =
+    | { type: "no_filters" }
+    | { type: "single_model_only"; model: string }
+    | { type: "visibility_only"; visibility: "public" | "unlisted" }
+    | { type: "visibility_single_model"; visibility: "public" | "unlisted"; model: string }
+    | { type: "multi_model_filter"; visibility: "public" | "unlisted" | null; models: string[] }
diff --git a/convex/lib/batchTypes.test.ts b/convex/lib/batchTypes.test.ts
new file mode 100644
index 0000000..71055ff
--- /dev/null
+++ b/convex/lib/batchTypes.test.ts
@@ -0,0 +1,147 @@
+import { describe, it, expect } from "vitest";
+import type { Doc, Id } from "../_generated/dataModel";
+import {
+    MAX_BATCH_SIZE,
+    MIN_BATCH_SIZE,
+    BASE_RATE_LIMIT_DELAY_MS,
+    MIN_JITTER_MS,
+    MAX_JITTER_MS,
+    toBatchJobSummary,
+    generationParamsValidator,
+    storeGeneratedImageArgsValidator,
+    type BatchJobSummary,
+} from "./batchTypes";
+
+describe("batchTypes constants", () => {
+    it("should export MAX_BATCH_SIZE as 1000", () => {
+        expect(MAX_BATCH_SIZE).toBe(1000);
+    });
+
+    it("should export MIN_BATCH_SIZE as 1", () => {
+        expect(MIN_BATCH_SIZE).toBe(1);
+    });
+
+    it("should export BASE_RATE_LIMIT_DELAY_MS as 100", () => {
+        expect(BASE_RATE_LIMIT_DELAY_MS).toBe(100);
+    });
+
+    it("should export jitter constants", () => {
+        expect(MIN_JITTER_MS).toBe(20);
+        expect(MAX_JITTER_MS).toBe(100);
+    });
+});
+
+describe("toBatchJobSummary", () => {
+    it("should convert a full batch job to a summary", () => {
+        const fullJob: Doc<"batchJobs"> = {
+            _id: "test_id" as Id<"batchJobs">,
+            _creationTime: 1234567890,
+            ownerId: "user_123",
+            status: "processing",
+            totalCount: 10,
+            completedCount: 5,
+            failedCount: 1,
+            currentIndex: 6,
+            inFlightCount: 2,
+            generationParams: { prompt: "test", width: 1024, height: 1024 },
+            apiKey: "secret_key_should_be_stripped",
+            imageIds: ["img1" as Id<"generatedImages">, "img2" as Id<"generatedImages">],
+            createdAt: 1234567890,
+            updatedAt: 1234567900,
+            lastErrorCode: 429,
+        };
+
+        const summary = toBatchJobSummary(fullJob);
+
+        // Verify included fields
+        expect(summary._id).toBe("test_id");
+        expect(summary._creationTime).toBe(1234567890);
+        expect(summary.status).toBe("processing");
+        expect(summary.totalCount).toBe(10);
+        expect(summary.completedCount).toBe(5);
+        expect(summary.failedCount).toBe(1);
+        expect(summary.currentIndex).toBe(6);
+        expect(summary.inFlightCount).toBe(2);
+        expect(summary.createdAt).toBe(1234567890);
+        expect(summary.updatedAt).toBe(1234567900);
+        expect(summary.lastErrorCode).toBe(429);
+
+        // Verify excluded fields (using type assertion to check they're not in the result)
+        const summaryAsRecord = summary as Record<string, unknown>;
+        expect(summaryAsRecord.apiKey).toBeUndefined();
+        expect(summaryAsRecord.generationParams).toBeUndefined();
+        expect(summaryAsRecord.imageIds).toBeUndefined();
+        expect(summaryAsRecord.ownerId).toBeUndefined();
+    });
+
+    it("should handle optional fields being undefined", () => {
+        const minimalJob: Doc<"batchJobs"> = {
+            _id: "test_id" as Id<"batchJobs">,
+            _creationTime: 1234567890,
+            ownerId: "user_123",
+            status: "pending",
+            totalCount: 5,
+            completedCount: 0,
+            failedCount: 0,
+            currentIndex: 0,
+            generationParams: { prompt: "test" },
+            imageIds: [],
+            createdAt: 1234567890,
+            updatedAt: 1234567890,
+        };
+
+        const summary = toBatchJobSummary(minimalJob);
+
+        expect(summary.inFlightCount).toBeUndefined();
+        expect(summary.lastErrorCode).toBeUndefined();
+    });
+});
+
+describe("generationParamsValidator", () => {
+    it("should be a Convex validator object", () => {
+        expect(generationParamsValidator).toBeDefined();
+        expect(typeof generationParamsValidator).toBe("object");
+    });
+});
+
+describe("storeGeneratedImageArgsValidator", () => {
+    it("should have all required fields", () => {
+        expect(storeGeneratedImageArgsValidator.ownerId).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.r2Key).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.url).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.prompt).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.width).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.height).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.model).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.contentType).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.sizeBytes).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.generationParams).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.visibility).toBeDefined();
+    });
+
+    it("should have optional thumbnail/preview fields", () => {
+        expect(storeGeneratedImageArgsValidator.thumbnailR2Key).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.thumbnailUrl).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.previewR2Key).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.previewUrl).toBeDefined();
+        expect(storeGeneratedImageArgsValidator.seed).toBeDefined();
+    });
+});
+
+describe("BatchJobSummary type", () => {
+    it("should be usable as a type", () => {
+        // This is a compile-time check - if the type is broken, this won't compile
+        const summary: BatchJobSummary = {
+            _id: "test" as Id<"batchJobs">,
+            _creationTime: 0,
+            status: "pending",
+            totalCount: 1,
+            completedCount: 0,
+            failedCount: 0,
+            currentIndex: 0,
+            createdAt: 0,
+            updatedAt: 0,
+        };
+        expect(summary).toBeDefined();
+    });
+});
diff --git a/convex/lib/batchTypes.ts b/convex/lib/batchTypes.ts
new file mode 100644
index 0000000..ee7568d
--- /dev/null
+++ b/convex/lib/batchTypes.ts
@@ -0,0 +1,123 @@
+/**
+ * Batch Generation Types & Validators
+ *
+ * Shared types, constants, and validators for batch generation.
+ * This file is intentionally NOT marked as "use node" because it
+ * only contains pure TypeScript types and Convex validators.
+ */
+import { v } from "convex/values"
+import type { Doc } from "../_generated/dataModel"
+
+// ============================================================
+// Constants
+// ============================================================
+
+/** Maximum batch size */
+export const MAX_BATCH_SIZE = 1000
+
+/** Minimum batch size */
+export const MIN_BATCH_SIZE = 1
+
+/** Base delay between generations in milliseconds (100ms = 10 req/s) */
+export const BASE_RATE_LIMIT_DELAY_MS = 100
+
+/** Min jitter to add (20ms) */
+export const MIN_JITTER_MS = 20
+
+/** Max jitter to add (100ms) */
+export const MAX_JITTER_MS = 100
+
+// ============================================================
+// Types
+// ============================================================
+
+/**
+ * Lightweight batch job data for list views.
+ * Excludes heavy fields (generationParams, apiKey, imageIds) to reduce bandwidth.
+ */
+export type BatchJobSummary = {
+    _id: Doc<"batchJobs">["_id"]
+    _creationTime: number
+    status: Doc<"batchJobs">["status"]
+    totalCount: number
+    completedCount: number
+    failedCount: number
+    currentIndex: number
+    inFlightCount?: number
+    createdAt: number
+    updatedAt: number
+    lastErrorCode?: number
+}
+
+// ============================================================
+// Helper Functions
+// ============================================================
+
+/**
+ * Convert a full batch job document to a lightweight summary.
+ * Strips generationParams (can be 10-50KB for complex workflows),
+ * apiKey (sensitive), and imageIds (only needed for detail views).
+ */
+export function toBatchJobSummary(job: Doc<"batchJobs">): BatchJobSummary {
+    return {
+        _id: job._id,
+        _creationTime: job._creationTime,
+        status: job.status,
+        totalCount: job.totalCount,
+        completedCount: job.completedCount,
+        failedCount: job.failedCount,
+        currentIndex: job.currentIndex,
+        inFlightCount: job.inFlightCount,
+        createdAt: job.createdAt,
+        updatedAt: job.updatedAt,
+        lastErrorCode: job.lastErrorCode,
+    }
+}
+
+// ============================================================
+// Validators
+// ============================================================
+
+/**
+ * Generation params validator (shared between functions)
+ */
+export const generationParamsValidator = v.object({
+    prompt: v.string(),
+    negativePrompt: v.optional(v.string()),
+    model: v.optional(v.string()),
+    width: v.optional(v.number()),
+    height: v.optional(v.number()),
+    seed: v.optional(v.number()),
+    enhance: v.optional(v.boolean()),
+    private: v.optional(v.boolean()),
+    safe: v.optional(v.boolean()),
+    image: v.optional(v.string()),
+    // Video-specific parameters
+    duration: v.optional(v.number()),
+    audio: v.optional(v.boolean()),
+    aspectRatio: v.optional(v.string()),
+    lastFrameImage: v.optional(v.string()),
+})
+
+/**
+ * Args validator for storeGeneratedImage internal mutation.
+ * Extracted to reduce line count in batchGeneration.ts.
+ */
+export const storeGeneratedImageArgsValidator = {
+    ownerId: v.string(),
+    r2Key: v.string(),
+    url: v.string(),
+    thumbnailR2Key: v.optional(v.string()),
+    thumbnailUrl: v.optional(v.string()),
+    previewR2Key: v.optional(v.string()),
+    previewUrl: v.optional(v.string()),
+    prompt: v.string(),
+    width: v.number(),
+    height: v.number(),
+    model: v.string(),
+    seed: v.optional(v.number()),
+    contentType: v.string(),
+    sizeBytes: v.number(),
+    generationParams: generationParamsValidator,
+    visibility: v.union(v.literal("public"), v.literal("unlisted")),
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0cce34a..5b24dfe 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -15,7 +15,44 @@ const config = [
   ...nextTypescript,
   // Override rules for test files
   {
-    files: ["**/*.test.ts", "**/*.test.tsx"],
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        project: "./tsconfig.eslint.json",
+      },
+    },
+    rules: {
+      // Type safety
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unsafe-assignment": "error",
+      "@typescript-eslint/no-unsafe-member-access": "error",
+      "@typescript-eslint/no-unsafe-call": "error",
+      "@typescript-eslint/no-unsafe-return": "error",
+      
+      // Code quality
+      "max-lines": ["error", { max: 400, skipBlankLines: true, skipComments: true }],
+      "complexity": ["warn", 20],
+      "max-depth": ["warn", 5],
+      "max-params": ["error", 8],
+      
+      // Prevent bugs
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-misused-promises": "error",
+      "@typescript-eslint/await-thenable": "error",
+      "@typescript-eslint/switch-exhaustiveness-check": "error",
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "no-debugger": "error",
+      
+      // Modern practices
+      "prefer-const": "error",
+      "no-var": "error",
+      "@typescript-eslint/prefer-nullish-coalescing": "warn",
+      "@typescript-eslint/prefer-optional-chain": "warn",
+      "@typescript-eslint/no-non-null-assertion": "warn",
+    },
+  },
+  {
+    files: ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/ban-ts-comment": "off",
diff --git a/lib/config/aspect-ratios.ts b/lib/config/aspect-ratios.ts
new file mode 100644
index 0000000..6e2e66a
--- /dev/null
+++ b/lib/config/aspect-ratios.ts
@@ -0,0 +1,266 @@
+/**
+ * Aspect Ratio Presets
+ *
+ * Predefined aspect ratio configurations for each model type.
+ * These are internal to the model configuration system.
+ */
+
+import type { AspectRatioOption } from "@/types/pollinations";
+import { STANDARD_RESOLUTIONS } from "./standard-resolutions";
+import { withAspectRatioTags } from "./model-types";
+
+// ============================================================================
+// Aspect Ratio Presets
+// ============================================================================
+
+/**
+ * Flux Schnell aspect ratios - Optimized for 768px max dimension
+ *
+ * Pollinations enforces:
+ * - max 589,824 pixels (768×768 cap)
+ * - width/height must be multiples of 8
+ * - (width × height) must be divisible by 65,536
+ *
+ * | Ratio | Width | Height | Pixels    |
+ * |-------|-------|--------|-----------|
+ * | 1:1   | 768   | 768    | 589,824   |
+ * | 16:9  | 768   | 432    | 331,776   |
+ * | 9:16  | 432   | 768    | 331,776   |
+ * | 4:3   | 768   | 576    | 442,368   |
+ * | 3:4   | 576   | 768    | 442,368   |
+ * | 3:2   | 768   | 512    | 393,216   |
+ * | 2:3   | 512   | 768    | 393,216   |
+ * | 21:9  | 768   | 328    | 251,904   |
+ * | 9:21  | 328   | 768    | 251,904   |
+ */
+export const FLUX_SCHNELL_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 768, height: 768, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 768, height: 432, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 432, height: 768, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 768, height: 576, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 576, height: 768, icon: "frame", category: "portrait" },
+    { label: "Photo Wide", value: "3:2", width: 768, height: 512, icon: "image", category: "landscape" },
+    { label: "Photo Tall", value: "2:3", width: 512, height: 768, icon: "frame", category: "portrait" },
+    { label: "Ultrawide", value: "21:9", width: 768, height: 328, icon: "monitor", category: "ultrawide" },
+    { label: "Ultra Tall", value: "9:21", width: 328, height: 768, icon: "smartphone", category: "ultrawide" },
+    { label: "Custom", value: "custom", width: 768, height: 768, icon: "sliders", category: "square" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** Standard aspect ratios for ~1MP models (NanoBanana, Kontext) - Optimized for <1MP limit */
+export const STANDARD_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1024, height: 1024, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1360, height: 768, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 768, height: 1360, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 1152, height: 864, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 864, height: 1152, icon: "frame", category: "portrait" },
+    { label: "Photo Wide", value: "3:2", width: 1248, height: 832, icon: "image", category: "landscape" },
+    { label: "Photo Tall", value: "2:3", width: 832, height: 1248, icon: "frame", category: "portrait" },
+    { label: "Social", value: "4:5", width: 896, height: 1120, icon: "smartphone", category: "portrait" },
+    { label: "Social Wide", value: "5:4", width: 1120, height: 896, icon: "monitor", category: "landscape" },
+    { label: "Ultrawide", value: "21:9", width: 1536, height: 640, icon: "monitor", category: "ultrawide" },
+    { label: "Ultra Tall", value: "9:21", width: 640, height: 1536, icon: "smartphone", category: "ultrawide" },
+    { label: "Custom", value: "custom", width: 1024, height: 1024, icon: "sliders", category: "square" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** SDXL Turbo-optimized aspect ratios (768px max dimension) */
+export const SDXLTURBO_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 768, height: 768, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 768, height: 432, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 432, height: 768, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 768, height: 576, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 576, height: 768, icon: "frame", category: "portrait" },
+    { label: "Ultrawide", value: "21:9", width: 768, height: 320, icon: "monitor", category: "ultrawide" },
+    { label: "Custom", value: "custom", width: 768, height: 768, icon: "sliders", category: "square" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** GPT 1.0 fixed aspect ratios (no custom allowed) */
+export const GPTIMAGE_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1024, height: 1024, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1536, height: 1024, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 1024, height: 1536, icon: "rectangle-vertical", category: "portrait" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** GPT 1.5 fixed aspect ratios (no custom allowed) */
+export const GPTIMAGE_LARGE_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1024, height: 1024, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1792, height: 1024, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 1024, height: 1792, icon: "rectangle-vertical", category: "portrait" },
+  ] as const
+).map(withAspectRatioTags);
+
+/**
+ * Z-Image Turbo aspect ratios - Uses HD standard dimensions within SPAN upscaler limit
+ *
+ * Pollinations enforces a max of 2,359,296 pixels (768×768 base × 2 upscale = 1536×1536 max square).
+ * Uses HD standard resolutions where possible, with ultrawide ratios optimized for pixel budget.
+ * All dimensions are aligned to step=8.
+ *
+ * | Ratio | Width | Height | Pixels    |
+ * |-------|-------|--------|-----------|
+ * | 1:1   | 1536  | 1536   | 2,359,296 | (max MP cap)
+ * | 16:9  | 1920  | 1080   | 2,073,600 | (HD standard)
+ * | 9:16  | 1080  | 1920   | 2,073,600 | (HD standard)
+ * | 4:3   | 1440  | 1080   | 1,555,200 | (HD standard)
+ * | 3:4   | 1080  | 1440   | 1,555,200 | (HD standard)
+ * | 3:2   | 1624  | 1080   | 1,753,920 | (step=8 aligned)
+ * | 2:3   | 1080  | 1624   | 1,753,920 | (step=8 aligned)
+ * | 4:5   | 1080  | 1352   | 1,460,160 | (step=8 aligned)
+ * | 5:4   | 1352  | 1080   | 1,460,160 | (step=8 aligned)
+ * | 21:9  | 2240  | 960    | 2,150,400 | (optimized for pixel budget)
+ * | 9:21  | 960   | 2240   | 2,150,400 | (optimized for pixel budget)
+ */
+export const ZIMAGE_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1536, height: 1536, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1920, height: 1080, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 1080, height: 1920, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 1440, height: 1080, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 1080, height: 1440, icon: "frame", category: "portrait" },
+    { label: "Photo Wide", value: "3:2", width: 1624, height: 1080, icon: "image", category: "landscape" },
+    { label: "Photo Tall", value: "2:3", width: 1080, height: 1624, icon: "frame", category: "portrait" },
+    { label: "Social", value: "4:5", width: 1080, height: 1352, icon: "smartphone", category: "portrait" },
+    { label: "Social Wide", value: "5:4", width: 1352, height: 1080, icon: "monitor", category: "landscape" },
+    { label: "Ultrawide", value: "21:9", width: 2240, height: 960, icon: "monitor", category: "ultrawide" },
+    { label: "Ultra Tall", value: "9:21", width: 960, height: 2240, icon: "smartphone", category: "ultrawide" },
+    { label: "Custom", value: "custom", width: 1536, height: 1536, icon: "sliders", category: "square" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** Seedream aspect ratios (defaults to 4K Tier) */
+export const SEEDREAM_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { ...STANDARD_RESOLUTIONS["4k"]["1:1"], label: "Square", value: "1:1", icon: "square", category: "square" },
+    { ...STANDARD_RESOLUTIONS["4k"]["16:9"], label: "Landscape", value: "16:9", icon: "rectangle-horizontal", category: "landscape" },
+    { ...STANDARD_RESOLUTIONS["4k"]["9:16"], label: "Portrait", value: "9:16", icon: "rectangle-vertical", category: "portrait" },
+    { ...STANDARD_RESOLUTIONS["4k"]["4:3"], label: "Photo", value: "4:3", icon: "image", category: "landscape" },
+    { ...STANDARD_RESOLUTIONS["4k"]["3:4"], label: "Portrait Photo", value: "3:4", icon: "frame", category: "portrait" },
+    { ...STANDARD_RESOLUTIONS["4k"]["3:2"], label: "Photo Wide", value: "3:2", icon: "image", category: "landscape" },
+    { ...STANDARD_RESOLUTIONS["4k"]["2:3"], label: "Photo Tall", value: "2:3", icon: "frame", category: "portrait" },
+    { ...STANDARD_RESOLUTIONS["4k"]["21:9"], label: "Ultrawide", value: "21:9", icon: "monitor", category: "ultrawide" },
+    { label: "Custom", value: "custom", width: 1024, height: 1024, icon: "sliders", category: "square" },
+  ] as const
+).map(withAspectRatioTags);
+
+/** Video aspect ratios (16:9 and 9:16 only) - defaults to HD */
+export const VIDEO_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { ...STANDARD_RESOLUTIONS.hd["16:9"], label: "Landscape", value: "16:9", icon: "rectangle-horizontal", category: "landscape" },
+    { ...STANDARD_RESOLUTIONS.hd["9:16"], label: "Portrait", value: "9:16", icon: "rectangle-vertical", category: "portrait" },
+  ] as const
+).map(withAspectRatioTags);
+
+/**
+ * Nano Banana aspect ratios - Fixed output dimensions per aspect ratio (no tiers)
+ *
+ * Gemini 2.5 Flash Image has fixed output resolutions per aspect ratio:
+ * - Supported ratios: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9
+ * - NO 9:21 (ultra tall) support
+ * - Max dimension: 1536px (long edge)
+ * - Max pixels: ~1.05 MP (1024×1024 = 1,048,576)
+ *
+ * | Ratio | Width | Height | Pixels    |
+ * |-------|-------|--------|-----------|
+ * | 1:1   | 1024  | 1024   | 1,048,576 |
+ * | 16:9  | 1344  | 768    | 1,032,192 |
+ * | 9:16  | 768   | 1344   | 1,032,192 |
+ * | 4:3   | 1184  | 864    | 1,023,296 |
+ * | 3:4   | 864   | 1184   | 1,023,296 |
+ * | 3:2   | 1248  | 832    | 1,038,336 |
+ * | 2:3   | 832   | 1248   | 1,038,336 |
+ * | 4:5   | 896   | 1152   | 1,032,192 |
+ * | 5:4   | 1152  | 896    | 1,032,192 |
+ * | 21:9  | 1536  | 672    | 1,032,192 |
+ */
+export const NANOBANANA_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1024, height: 1024, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1344, height: 768, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 768, height: 1344, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 1184, height: 864, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 864, height: 1184, icon: "frame", category: "portrait" },
+    { label: "Photo Wide", value: "3:2", width: 1248, height: 832, icon: "image", category: "landscape" },
+    { label: "Photo Tall", value: "2:3", width: 832, height: 1248, icon: "frame", category: "portrait" },
+    { label: "Social", value: "4:5", width: 896, height: 1152, icon: "smartphone", category: "portrait" },
+    { label: "Social Wide", value: "5:4", width: 1152, height: 896, icon: "monitor", category: "landscape" },
+    { label: "Ultrawide", value: "21:9", width: 1536, height: 672, icon: "monitor", category: "ultrawide" },
+  ] as const
+).map(withAspectRatioTags);
+
+/**
+ * Nano Banana Pro aspect ratios - Uses tiered output dimensions (1K / 2K / 4K)
+ *
+ * Gemini 3 Pro Image Preview supports 3 output tiers with exact dimensions:
+ * - Supported ratios: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9
+ * - NO 9:21 (ultra tall) support
+ * - Max dimension: 6336px (long edge at 4K tier)
+ * - Max pixels: ~17.2 MP
+ *
+ * Maps to our tier system as: HD→1K, 2K→2K, 4K→4K
+ * Default aspect ratios shown are for HD (1K) tier; actual dimensions
+ * are calculated per tier in the resolution system.
+ *
+ * HD (1K) Tier:
+ * | Ratio | Width | Height |
+ * |-------|-------|--------|
+ * | 1:1   | 1024  | 1024   |
+ * | 2:3   | 848   | 1264   |
+ * | 3:2   | 1264  | 848    |
+ * | 3:4   | 896   | 1200   |
+ * | 4:3   | 1200  | 896    |
+ * | 4:5   | 928   | 1152   |
+ * | 5:4   | 1152  | 928    |
+ * | 9:16  | 768   | 1376   |
+ * | 16:9  | 1376  | 768    |
+ * | 21:9  | 1584  | 672    |
+ *
+ * 2K Tier:
+ * | Ratio | Width | Height |
+ * |-------|-------|--------|
+ * | 1:1   | 2048  | 2048   |
+ * | 2:3   | 1696  | 2528   |
+ * | 3:2   | 2528  | 1696   |
+ * | 3:4   | 1792  | 2400   |
+ * | 4:3   | 2400  | 1792   |
+ * | 4:5   | 1856  | 2304   |
+ * | 5:4   | 2304  | 1856   |
+ * | 9:16  | 1536  | 2752   |
+ * | 16:9  | 2752  | 1536   |
+ * | 21:9  | 3168  | 1344   |
+ *
+ * 4K Tier:
+ * | Ratio | Width | Height |
+ * |-------|-------|--------|
+ * | 1:1   | 4096  | 4096   |
+ * | 2:3   | 3392  | 5056   |
+ * | 3:2   | 5056  | 3392   |
+ * | 3:4   | 3584  | 4800   |
+ * | 4:3   | 4800  | 3584   |
+ * | 4:5   | 3712  | 4608   |
+ * | 5:4   | 4608  | 3712   |
+ * | 9:16  | 3072  | 5504   |
+ * | 16:9  | 5504  | 3072   |
+ * | 21:9  | 6336  | 2688   |
+ */
+export const NANOBANANA_PRO_ASPECT_RATIOS: readonly AspectRatioOption[] = (
+  [
+    { label: "Square", value: "1:1", width: 1024, height: 1024, icon: "square", category: "square" },
+    { label: "Landscape", value: "16:9", width: 1376, height: 768, icon: "rectangle-horizontal", category: "landscape" },
+    { label: "Portrait", value: "9:16", width: 768, height: 1376, icon: "rectangle-vertical", category: "portrait" },
+    { label: "Photo", value: "4:3", width: 1200, height: 896, icon: "image", category: "landscape" },
+    { label: "Portrait Photo", value: "3:4", width: 896, height: 1200, icon: "frame", category: "portrait" },
+    { label: "Photo Wide", value: "3:2", width: 1264, height: 848, icon: "image", category: "landscape" },
+    { label: "Photo Tall", value: "2:3", width: 848, height: 1264, icon: "frame", category: "portrait" },
+    { label: "Social", value: "4:5", width: 928, height: 1152, icon: "smartphone", category: "portrait" },
+    { label: "Social Wide", value: "5:4", width: 1152, height: 928, icon: "monitor", category: "landscape" },
+    { label: "Ultrawide", value: "21:9", width: 1584, height: 672, icon: "monitor", category: "ultrawide" },
+  ] as const
+).map(withAspectRatioTags);
diff --git a/lib/config/model-accessors.ts b/lib/config/model-accessors.ts
new file mode 100644
index 0000000..2496725
--- /dev/null
+++ b/lib/config/model-accessors.ts
@@ -0,0 +1,72 @@
+/**
+ * Model Accessors
+ *
+ * Helper functions and derived lists for accessing model configuration.
+ */
+
+import type { AspectRatioOption, ModelConstraints } from "@/types/pollinations";
+import type { ModelDefinition } from "./model-types";
+import { MODEL_REGISTRY } from "./model-registry";
+
+// ============================================================================
+// Accessors
+// ============================================================================
+
+/**
+ * Get a model by ID. Returns undefined if not found.
+ */
+export function getModel(modelId: string): ModelDefinition | undefined {
+  return MODEL_REGISTRY[modelId.toLowerCase()];
+}
+
+/**
+ * Get model constraints. Returns undefined if model not found.
+ */
+export function getModelConstraints(modelId: string): ModelConstraints | undefined {
+  return getModel(modelId)?.constraints;
+}
+
+/**
+ * Get model aspect ratios. Returns undefined if model not found.
+ */
+export function getModelAspectRatios(modelId: string): readonly AspectRatioOption[] | undefined {
+  return getModel(modelId)?.aspectRatios;
+}
+
+/**
+ * Get model display name. Returns undefined if model not found.
+ */
+export function getModelDisplayName(modelId: string): string | undefined {
+  return getModel(modelId)?.displayName;
+}
+
+/**
+ * Check if a model supports negative prompts. Returns false if model not found or doesn't support it.
+ */
+export function getModelSupportsNegativePrompt(modelId: string): boolean {
+  return getModel(modelId)?.supportsNegativePrompt ?? false;
+}
+
+/**
+ * Check if a model supports reference image input. Returns false if model not found or doesn't support it.
+ */
+export function getModelSupportsReferenceImage(modelId: string): boolean {
+  return getModel(modelId)?.supportsReferenceImage ?? false;
+}
+
+// ============================================================================
+// Model Lists
+// ============================================================================
+
+/** All model IDs */
+export const ALL_MODEL_IDS = Object.keys(MODEL_REGISTRY);
+
+/** Image model IDs only */
+export const IMAGE_MODEL_IDS = Object.values(MODEL_REGISTRY)
+  .filter((m) => m.type === "image")
+  .map((m) => m.id);
+
+/** Video model IDs only */
+export const VIDEO_MODEL_IDS = Object.values(MODEL_REGISTRY)
+  .filter((m) => m.type === "video")
+  .map((m) => m.id);
diff --git a/lib/config/model-registry.ts b/lib/config/model-registry.ts
new file mode 100644
index 0000000..d9179cf
--- /dev/null
+++ b/lib/config/model-registry.ts
@@ -0,0 +1,435 @@
+/**
+ * Model Registry
+ *
+ * Complete registry of all supported models.
+ * This is the single source of truth for model configuration.
+ */
+
+import {
+  IMAGE_MODEL_PRICING,
+  VIDEO_MODEL_PRICING,
+} from "../schemas/pollinations-pricing.schema";
+import type { ModelDefinition } from "./model-types";
+import {
+  FLUX_SCHNELL_ASPECT_RATIOS,
+  GPTIMAGE_ASPECT_RATIOS,
+  GPTIMAGE_LARGE_ASPECT_RATIOS,
+  NANOBANANA_ASPECT_RATIOS,
+  NANOBANANA_PRO_ASPECT_RATIOS,
+  SDXLTURBO_ASPECT_RATIOS,
+  SEEDREAM_ASPECT_RATIOS,
+  STANDARD_ASPECT_RATIOS,
+  VIDEO_ASPECT_RATIOS,
+  ZIMAGE_ASPECT_RATIOS,
+} from "./aspect-ratios";
+
+// ============================================================================
+// Model Registry
+// ============================================================================
+
+/**
+ * Complete registry of all supported models.
+ * This is the single source of truth for model configuration.
+ */
+export const MODEL_REGISTRY: Record<string, ModelDefinition> = {
+  // ========================================================================
+  // Featured / High-Performance Models
+  // ========================================================================
+
+  "gptimage-large": {
+    id: "gptimage-large",
+    displayName: "GPT 1.5",
+    type: "image",
+    icon: "camera",
+    logo: "/image-models/openai.svg",
+    description: "Precision editing, stronger consistency, sharper text/detail rendering",
+    constraints: {
+      maxPixels: Infinity,
+      minPixels: 0,
+      minDimension: 1024,
+      maxDimension: 1792,
+      step: 1,
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: false,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["hd"],
+      outputCertainty: "exact",
+      dimensionWarning: "Dimensions are fixed for this model",
+    },
+    aspectRatios: GPTIMAGE_LARGE_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["gptimage-large"],
+  },
+
+  "seedream-pro": {
+    id: "seedream-pro",
+    displayName: "Seedream 4.5 Pro",
+    type: "image",
+    icon: "cloud",
+    logo: "/image-models/bytedance.svg",
+    description: "Campaign suites, multi-image consistency, typography-forward layouts",
+    constraints: {
+      maxPixels: 16_777_216,
+      minPixels: 262_144, // 512x512
+      minDimension: 512,
+      maxDimension: 16384,
+      step: 1,
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max
+      maxAspectRatio: 16,
+      supportedTiers: ["sd", "hd", "2k", "4k"],
+      outputCertainty: "likely",
+    },
+    aspectRatios: SEEDREAM_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["seedream-pro"],
+  },
+
+  "nanobanana-pro": {
+    id: "nanobanana-pro",
+    displayName: "Nano Banana Pro",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/google.svg",
+    description: "Premium assets, brand/identity consistency, crisp typography",
+    constraints: {
+      maxPixels: 17_203_200, // ~17.2 MP at 4K tier (e.g., 4800×3584)
+      minPixels: 0,
+      minDimension: 672, // Smallest dimension in 1K tier (21:9 = 1584×672)
+      maxDimension: 6336, // Largest dimension in 4K tier (21:9 = 6336×2688)
+      step: 16,
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: false, // Model uses fixed dimensions per ratio+tier, no custom dimensions
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["hd", "2k", "4k"], // Maps to 1K/2K/4K imageSize tiers
+      outputCertainty: "likely",
+    },
+    aspectRatios: NANOBANANA_PRO_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["nanobanana-pro"],
+  },
+
+  kontext: {
+    id: "kontext",
+    displayName: "Flux Kontext",
+    type: "image",
+    icon: "pen-tool",
+    logo: "/image-models/flux.svg",
+    description: "Image-to-image refinement, precise edits, consistent subject/style",
+    constraints: {
+      maxPixels: 1_048_576,
+      minPixels: 0,
+      minDimension: 64,
+      maxDimension: 2048,
+      step: 32,
+      defaultDimensions: { width: 1000, height: 1000 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd", "hd"],
+      outputCertainty: "variable",
+      dimensionWarning: "Output dimensions may vary from request",
+    },
+    aspectRatios: STANDARD_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["kontext"],
+  },
+
+  flux: {
+    id: "flux",
+    displayName: "Flux Schnell",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/flux.svg",
+    description: "Rapid ideation, strong prompt following, clean high-detail renders",
+    constraints: {
+      maxPixels: 589_824, // 768×768 cap from Pollinations backend
+      minPixels: 65_536, // Minimum 256×256 (area divisible by 65,536)
+      minDimension: 64, // Minimum per-side (will snap to nearest valid)
+      maxDimension: 768, // Max per-side dimension
+      step: 8, // Dimensions must be multiples of 8
+      defaultDimensions: { width: 768, height: 768 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd"], // Limited to SD tier (768px max)
+      outputCertainty: "variable",
+      dimensionWarning: "Output may be adjusted by gateway to fit constraints",
+    },
+    aspectRatios: FLUX_SCHNELL_ASPECT_RATIOS,
+    supportsNegativePrompt: true, // Supports negative prompts
+    modelPricing: IMAGE_MODEL_PRICING["flux"],
+  },
+
+  klein: {
+    id: "klein",
+    displayName: "FLUX.2 Klein 4B",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/flux.svg",
+    description: "Efficient FLUX.2 distillation. fast generation with excellent prompt adherence.",
+    constraints: {
+      maxPixels: Infinity, // No enforced cap
+      minPixels: 0,
+      minDimension: 16, // Practical min
+      maxDimension: 8192, // Arbitrary high cap
+      step: 16, // Best pipeline compatibility
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647,
+      supportedTiers: ["sd", "hd", "2k", "4k"], // Effectively all
+      outputCertainty: "exact",
+      dimensionWarning: "Recommended max 4MP (2048×2048) for best results",
+    },
+    aspectRatios: STANDARD_ASPECT_RATIOS,
+    supportsNegativePrompt: true,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["klein"],
+  },
+
+  "klein-large": {
+    id: "klein-large",
+    displayName: "FLUX.2 Klein 9B",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/flux.svg",
+    description: "High-fidelity FLUX.2 model. 9B parameters for superior texture and detail.",
+    constraints: {
+      maxPixels: Infinity, // No enforced cap
+      minPixels: 0,
+      minDimension: 16, // Practical min
+      maxDimension: 8192, // Arbitrary high cap
+      step: 16, // Best pipeline compatibility
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647,
+      supportedTiers: ["sd", "hd", "2k", "4k"], // Effectively all
+      outputCertainty: "exact",
+      dimensionWarning: "Recommended max 4MP (2048×2048) for best results",
+    },
+    aspectRatios: STANDARD_ASPECT_RATIOS,
+    supportsNegativePrompt: true,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["klein-large"],
+  },
+
+  "seedance-pro": {
+    id: "seedance-pro",
+    displayName: "Seedance Pro",
+    type: "video",
+    icon: "video",
+    logo: "/image-models/bytedance.svg",
+    description: "Native audio+video generation, cinematic camera moves, coherent short-form storytelling, expressive characters, ads & short dramas",
+    constraints: {
+      maxPixels: Infinity,
+      minPixels: 0,
+      minDimension: 720,
+      maxDimension: 1920,
+      step: 1,
+      defaultDimensions: { width: 1920, height: 1080 },
+      dimensionsEnabled: false,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd", "hd"],
+    },
+    aspectRatios: VIDEO_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    durationConstraints: {
+      min: 2,
+      max: 10,
+      defaultDuration: 5,
+    },
+    modelPricing: VIDEO_MODEL_PRICING["seedance-pro"],
+  },
+
+  veo: {
+    id: "veo",
+    displayName: "Veo 3.1",
+    type: "video",
+    icon: "video",
+    logo: "/image-models/google.svg",
+    description: "Reference-guided generation, character/product consistency across shots, native audio, 'ingredients' style control, social-ready storytelling",
+    constraints: {
+      maxPixels: Infinity,
+      minPixels: 0,
+      minDimension: 720,
+      maxDimension: 1920,
+      step: 1,
+      defaultDimensions: { width: 1920, height: 1080 },
+      dimensionsEnabled: false,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd", "hd"],
+    },
+    aspectRatios: VIDEO_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsAudio: true,
+    supportsInterpolation: true,
+    durationConstraints: {
+      min: 4,
+      max: 8,
+      fixedOptions: [4, 6, 8],
+      defaultDuration: 4,
+    },
+    modelPricing: VIDEO_MODEL_PRICING["veo"],
+  },
+
+  // ========================================================================
+  // Standard Models
+  // ========================================================================
+
+  zimage: {
+    id: "zimage",
+    displayName: "Z-Image-Turbo",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/alibaba.svg",
+    description: "Super fast, Photorealistic people, products, posters",
+    constraints: {
+      maxPixels: 2_359_296, // SPAN upscaler limit: 768×768 base × 2 = 1536×1536 max
+      minPixels: 0,
+      minDimension: 64,
+      maxDimension: 2048, // Max single dimension (e.g., 2048×1152 landscape)
+      step: 8,
+      defaultDimensions: { width: 1536, height: 1536 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd", "hd"], // 2K tier removed - exceeds pixel limit for most ratios
+      outputCertainty: "likely",
+    },
+    aspectRatios: ZIMAGE_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    modelPricing: IMAGE_MODEL_PRICING["zimage"],
+  },
+
+  turbo: {
+    id: "turbo",
+    displayName: "SDXL Turbo",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/stability.svg",
+    description: "Instant previews, high-fidelity draft renders, rapid exploration",
+    constraints: {
+      maxPixels: 589_825,
+      minPixels: 0,
+      minDimension: 64,
+      maxDimension: 768,
+      step: 64,
+      defaultDimensions: { width: 768, height: 768 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd"],
+      outputCertainty: "likely",
+      dimensionWarning: "Limited to 768px max dimension",
+    },
+    aspectRatios: SDXLTURBO_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    modelPricing: IMAGE_MODEL_PRICING["turbo"],
+  },
+
+  gptimage: {
+    id: "gptimage",
+    displayName: "GPT 1.0",
+    type: "image",
+    icon: "camera",
+    logo: "/image-models/openai.svg",
+    description: "Reliable generation+edits, high-fidelity outputs, versatile creative work",
+    constraints: {
+      maxPixels: Infinity,
+      minPixels: 0,
+      minDimension: 1024,
+      maxDimension: 1792,
+      step: 1,
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: false,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["hd"],
+      outputCertainty: "exact",
+      dimensionWarning: "Dimensions are fixed for this model",
+    },
+    aspectRatios: GPTIMAGE_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["gptimage"],
+  },
+
+  seedream: {
+    id: "seedream",
+    displayName: "Seedream 4.0",
+    type: "image",
+    icon: "cloud",
+    logo: "/image-models/bytedance.svg",
+    description: "High-fidelity creatives, reference-consistent series, polished illustration/photo",
+    constraints: {
+      maxPixels: 16_777_216,
+      minPixels: 262_144, // 512x512
+      minDimension: 512,
+      maxDimension: 16384,
+      step: 1,
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: true,
+      maxSeed: 2_147_483_647, // int32 max
+      maxAspectRatio: 16,
+      supportedTiers: ["sd", "hd", "2k", "4k"],
+      outputCertainty: "likely",
+    },
+    aspectRatios: SEEDREAM_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["seedream"],
+  },
+
+  nanobanana: {
+    id: "nanobanana",
+    displayName: "Nano Banana",
+    type: "image",
+    icon: "zap",
+    logo: "/image-models/google.svg",
+    description: "Everyday edits, instruction-heavy transforms, quick creative iteration",
+    constraints: {
+      maxPixels: 1_048_576, // ~1.05 MP (1024×1024)
+      minPixels: 0,
+      minDimension: 672, // Smallest dimension in fixed output (21:9 = 1536×672)
+      maxDimension: 1536, // Largest dimension in fixed output (21:9 = 1536×672)
+      step: 16, // Dimensions are fixed, step is for validation only
+      defaultDimensions: { width: 1024, height: 1024 },
+      dimensionsEnabled: false, // Model uses fixed output dimensions per aspect ratio
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["hd"], // Single tier - fixed output dimensions per aspect ratio
+      outputCertainty: "exact", // Fixed dimensions per aspect ratio
+    },
+    aspectRatios: NANOBANANA_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    supportsReferenceImage: true,
+    modelPricing: IMAGE_MODEL_PRICING["nanobanana"],
+  },
+
+  seedance: {
+    id: "seedance",
+    displayName: "Seedance",
+    type: "video",
+    icon: "video",
+    logo: "/image-models/bytedance.svg",
+    description: "Multi-shot generation, strong prompt following, smooth motion + physical realism, cinematic look, text+image driven scenes",
+    constraints: {
+      maxPixels: Infinity,
+      minPixels: 0,
+      minDimension: 720,
+      maxDimension: 1920,
+      step: 1,
+      defaultDimensions: { width: 1920, height: 1080 },
+      dimensionsEnabled: false,
+      maxSeed: 2_147_483_647, // int32 max - Pollinations API limit
+      supportedTiers: ["sd", "hd"],
+    },
+    aspectRatios: VIDEO_ASPECT_RATIOS,
+    supportsNegativePrompt: false,
+    durationConstraints: {
+      min: 2,
+      max: 10,
+      defaultDuration: 5,
+    },
+    modelPricing: VIDEO_MODEL_PRICING["seedance"],
+  },
+} as const;
diff --git a/lib/config/model-types.ts b/lib/config/model-types.ts
new file mode 100644
index 0000000..3928de4
--- /dev/null
+++ b/lib/config/model-types.ts
@@ -0,0 +1,84 @@
+/**
+ * Model Type Definitions
+ *
+ * Types and interfaces for the model registry system.
+ */
+
+import type { AspectRatio, AspectRatioOption, ModelConstraints } from "@/types/pollinations";
+import type { ModelPricingDefinition } from "../schemas/pollinations-pricing.schema";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Model type - image generation or video generation */
+export type ModelType = "image" | "video";
+
+/** Duration constraints for video models */
+export interface VideoDurationConstraints {
+  /** Minimum duration in seconds */
+  readonly min: number
+  /** Maximum duration in seconds */
+  readonly max: number
+  /** Fixed duration options (if not provided, any value in range is allowed) */
+  readonly fixedOptions?: readonly number[]
+  /** Default duration in seconds */
+  readonly defaultDuration: number
+}
+
+/** Complete model definition with all configuration */
+export interface ModelDefinition {
+  /** API ID - used in API requests to Pollinations */
+  readonly id: string;
+  /** Human-readable display name for UI */
+  readonly displayName: string;
+  /** Model type (image or video) */
+  readonly type: ModelType;
+  /** Dimension and pixel constraints */
+  readonly constraints: ModelConstraints;
+  /** Available aspect ratio presets */
+  readonly aspectRatios: readonly AspectRatioOption[];
+  /** Icon name for UI (lucide icon) */
+  readonly icon: string;
+  /** Logo SVG path for UI (optional) */
+  readonly logo?: string;
+  /** Description for tooltips */
+  readonly description: string;
+  /** Whether this model supports negative prompts */
+  readonly supportsNegativePrompt: boolean;
+  /** Whether this model supports audio generation (video models only) */
+  readonly supportsAudio?: boolean
+  /** Duration constraints for video models */
+  readonly durationConstraints?: VideoDurationConstraints
+  /** Whether this model supports reference image interpolation (first/last frame) */
+  readonly supportsInterpolation?: boolean
+  /** Whether this model supports image-to-image generation (reference image) */
+  readonly supportsReferenceImage?: boolean
+  /** The pricing definition for this model */
+  readonly modelPricing: ModelPricingDefinition
+}
+
+// ============================================================================
+// Internal Helpers
+// ============================================================================
+
+/** Tags for aspect ratio UI display */
+export const ASPECT_RATIO_TAGS: Readonly<Record<AspectRatio, readonly string[]>> = {
+  "1:1": ["Instagram Post", "Profile Picture", "Album / Cover Art"],
+  "16:9": ["YouTube", "Widescreen Video", "Desktop Wallpaper"],
+  "9:16": ["Instagram", "TikTok", "YouTube Shorts"],
+  "4:3": ["Product Photos", "Presentation Slides", "Blog Images"],
+  "3:4": ["Portrait Photography", "Instagram Feed", "Posters"],
+  "3:2": ["DSLR Photos", "Web Hero", "Prints"],
+  "2:3": ["Pinterest Pins", "Portrait Photography", "Posters"],
+  "4:5": ["Instagram Feed", "Ads", "Product Posts"],
+  "5:4": ["Product Shots", "Facebook", "Blog / Newsletter"],
+  "21:9": ["Ultrawide Wallpaper", "Cinematic Scenes", "Stream Overlays"],
+  "9:21": ["Mobile Wallpaper", "Vertical Posters", "Tall Story Templates"],
+  custom: ["Exact Dimensions"],
+};
+
+/** Helper to add tags to aspect ratio options */
+export function withAspectRatioTags(ratio: AspectRatioOption): AspectRatioOption {
+  return { ...ratio, tags: ASPECT_RATIO_TAGS[ratio.value] };
+}
diff --git a/lib/config/models.test.ts b/lib/config/models.test.ts
index 978eded..0237800 100644
--- a/lib/config/models.test.ts
+++ b/lib/config/models.test.ts
@@ -30,6 +30,8 @@ describe("Model Registry", () => {
                 "nanobanana",
                 "seedream-pro",
                 "nanobanana-pro",
+                "klein",
+                "klein-large",
             ]
 
             for (const modelId of expectedImageModels) {
@@ -61,6 +63,8 @@ describe("Model Registry", () => {
             expect(MODEL_REGISTRY["seedance-pro"].displayName).toBe("Seedance Pro")
             expect(MODEL_REGISTRY["seedance"].displayName).toBe("Seedance")
             expect(MODEL_REGISTRY["veo"].displayName).toBe("Veo 3.1")
+            expect(MODEL_REGISTRY["klein"].displayName).toBe("FLUX.2 Klein 4B")
+            expect(MODEL_REGISTRY["klein-large"].displayName).toBe("FLUX.2 Klein 9B")
         })
 
         it("should have valid constraints for all models", () => {
@@ -150,11 +154,11 @@ describe("Model Registry", () => {
 
     describe("Model Lists", () => {
         it("should have all model IDs", () => {
-            expect(ALL_MODEL_IDS.length).toBe(13)
+            expect(ALL_MODEL_IDS.length).toBe(15)
         })
 
         it("should have correct image model IDs", () => {
-            expect(IMAGE_MODEL_IDS.length).toBe(10)
+            expect(IMAGE_MODEL_IDS.length).toBe(12)
             expect(IMAGE_MODEL_IDS).toContain("zimage")
             expect(IMAGE_MODEL_IDS).toContain("gptimage")
             expect(IMAGE_MODEL_IDS).toContain("flux")
@@ -323,6 +327,31 @@ describe("Model Constraints", () => {
             }
         })
     })
+
+    describe("Klein", () => {
+        it("should have Infinity pixel limit (backend handled)", () => {
+            const klein = getModel("klein")
+            const kleinLarge = getModel("klein-large")
+            
+            expect(klein).toBeDefined()
+            if (klein) {
+                expect(klein.constraints.maxPixels).toBe(Infinity)
+                expect(klein.constraints.step).toBe(16)
+                expect(klein.constraints.minDimension).toBe(16)
+                expect(klein.constraints.maxDimension).toBe(8192)
+            }
+
+            expect(kleinLarge).toBeDefined()
+            if (kleinLarge) {
+                expect(kleinLarge.constraints.maxPixels).toBe(Infinity)
+            }
+        })
+
+        it("should support reference images", () => {
+            const klein = getModel("klein")
+            expect(klein?.supportsReferenceImage).toBe(true)
+        })
+    })
 })
 
 describe("Aspect Ratio Presets", () => {
diff --git a/lib/errors/pollinations-error-type-guards.test.ts b/lib/errors/pollinations-error-type-guards.test.ts
new file mode 100644
index 0000000..66644fc
--- /dev/null
+++ b/lib/errors/pollinations-error-type-guards.test.ts
@@ -0,0 +1,208 @@
+/**
+ * Type guard tests for Pollinations API error handling.
+ * Tests for API response type guards and legacy Flux model detection.
+ *
+ * Split from pollinations-error.test.ts for maintainability.
+ * @see pollinations-error.test.ts for PollinationsApiError class tests
+ */
+import { describe, it, expect } from "vitest"
+import {
+    isBadRequestError,
+    isUnauthorizedError,
+    isInternalError,
+    isApiError,
+    isApiErrorCode,
+    isClientErrorCode,
+    isFluxModelUnavailable,
+} from "./pollinations-error"
+
+describe("pollinations-error type guards", () => {
+    describe("isBadRequestError", () => {
+        it("returns true for valid BadRequest response", () => {
+            const response = {
+                status: 400,
+                success: false,
+                error: {
+                    code: "BAD_REQUEST",
+                    message: "Validation failed",
+                    timestamp: new Date().toISOString(),
+                    details: {
+                        name: "ZodError",
+                        formErrors: [],
+                        fieldErrors: {},
+                    },
+                },
+            }
+            expect(isBadRequestError(response)).toBe(true)
+        })
+
+        it("returns false for other error types", () => {
+            const response = {
+                status: 401,
+                success: false,
+                error: {
+                    code: "UNAUTHORIZED",
+                    message: "Auth required",
+                    timestamp: new Date().toISOString(),
+                    details: { name: "Error" },
+                },
+            }
+            expect(isBadRequestError(response)).toBe(false)
+        })
+    })
+
+    describe("isUnauthorizedError", () => {
+        it("returns true for valid Unauthorized response", () => {
+            const response = {
+                status: 401,
+                success: false,
+                error: {
+                    code: "UNAUTHORIZED",
+                    message: "Auth required",
+                    timestamp: new Date().toISOString(),
+                    details: { name: "UnauthorizedError" },
+                },
+            }
+            expect(isUnauthorizedError(response)).toBe(true)
+        })
+    })
+
+    describe("isInternalError", () => {
+        it("returns true for valid InternalError response", () => {
+            const response = {
+                status: 500,
+                success: false,
+                error: {
+                    code: "INTERNAL_ERROR",
+                    message: "Server error",
+                    timestamp: new Date().toISOString(),
+                    details: { name: "InternalError" },
+                },
+            }
+            expect(isInternalError(response)).toBe(true)
+        })
+    })
+
+    describe("isApiError", () => {
+        it("returns true for any valid API error response", () => {
+            const badRequest = {
+                status: 400,
+                success: false,
+                error: {
+                    code: "BAD_REQUEST",
+                    message: "Bad",
+                    timestamp: new Date().toISOString(),
+                    details: { name: "Error", formErrors: [], fieldErrors: {} },
+                },
+            }
+            expect(isApiError(badRequest)).toBe(true)
+        })
+
+        it("returns false for invalid responses", () => {
+            expect(isApiError({ status: 404 })).toBe(false)
+            expect(isApiError(null)).toBe(false)
+        })
+    })
+
+    describe("isApiErrorCode", () => {
+        it("returns true for API error codes", () => {
+            expect(isApiErrorCode("BAD_REQUEST")).toBe(true)
+            expect(isApiErrorCode("UNAUTHORIZED")).toBe(true)
+            expect(isApiErrorCode("INTERNAL_ERROR")).toBe(true)
+        })
+
+        it("returns false for client error codes", () => {
+            expect(isApiErrorCode("NETWORK_ERROR")).toBe(false)
+            expect(isApiErrorCode("UNKNOWN_ERROR")).toBe(false)
+        })
+    })
+
+    describe("isClientErrorCode", () => {
+        it("returns true for client error codes", () => {
+            expect(isClientErrorCode("NETWORK_ERROR")).toBe(true)
+            expect(isClientErrorCode("UNKNOWN_ERROR")).toBe(true)
+            expect(isClientErrorCode("VALIDATION_ERROR")).toBe(true)
+            expect(isClientErrorCode("GENERATION_FAILED")).toBe(true)
+            expect(isClientErrorCode("MODEL_UNAVAILABLE")).toBe(true)
+        })
+
+        it("returns false for API error codes", () => {
+            expect(isClientErrorCode("BAD_REQUEST")).toBe(false)
+            expect(isClientErrorCode("UNAUTHORIZED")).toBe(false)
+        })
+    })
+})
+
+// NOTE: These tests are for deprecated functionality (Flux has been decommissioned)
+// but we keep the tests to ensure legacy error handling still works
+describe("isFluxModelUnavailable (deprecated - legacy support)", () => {
+    it("returns true for direct match of flux unavailable message", () => {
+        expect(isFluxModelUnavailable("No active flux servers available")).toBe(true)
+    })
+
+    it("returns true when message contains the flux unavailable pattern", () => {
+        expect(isFluxModelUnavailable("Error: No active flux servers available, please try again later")).toBe(true)
+    })
+
+    it("returns true for nested JSON error with flux unavailable message", () => {
+        // This matches the actual Pollinations API error structure
+        const nestedJsonMessage = JSON.stringify({
+            error: "Internal Server Error",
+            message: "No active flux servers available",
+            timingInfo: [],
+            requestId: "abc123",
+        })
+        expect(isFluxModelUnavailable(nestedJsonMessage)).toBe(true)
+    })
+
+    it("returns true for nested JSON with error field containing the pattern", () => {
+        const nestedJsonMessage = JSON.stringify({
+            error: "No active flux servers available",
+            message: "Something else",
+        })
+        expect(isFluxModelUnavailable(nestedJsonMessage)).toBe(true)
+    })
+
+    it("returns false for unrelated error messages", () => {
+        expect(isFluxModelUnavailable("Bad request")).toBe(false)
+        expect(isFluxModelUnavailable("Internal server error")).toBe(false)
+        expect(isFluxModelUnavailable("Network timeout")).toBe(false)
+    })
+
+    it("returns false for empty string", () => {
+        expect(isFluxModelUnavailable("")).toBe(false)
+    })
+
+    it("returns false for valid JSON without the pattern", () => {
+        const jsonMessage = JSON.stringify({
+            error: "Some other error",
+            message: "Different message",
+        })
+        expect(isFluxModelUnavailable(jsonMessage)).toBe(false)
+    })
+
+    it("handles malformed JSON gracefully", () => {
+        expect(isFluxModelUnavailable("{invalid json")).toBe(false)
+        expect(isFluxModelUnavailable("{ message: 'unquoted' }")).toBe(false)
+    })
+
+    it("handles the exact Pollinations API error structure", () => {
+        // Exact structure from the user's example
+        const pollinationsError = JSON.stringify({
+            error: "Internal Server Error",
+            message: "No active flux servers available",
+            timingInfo: [
+                { step: "Request received.", timestamp: 0 },
+                { step: "Start generating job", timestamp: 0 },
+            ],
+            requestId: "n5krj4",
+            requestParameters: {
+                prompt: "test prompt",
+                width: 1024,
+                height: 1024,
+                model: "flux",
+            },
+        })
+        expect(isFluxModelUnavailable(pollinationsError)).toBe(true)
+    })
+})
diff --git a/lib/schemas/pollinations-pricing.schema.test.ts b/lib/schemas/pollinations-pricing.schema.test.ts
index df1ff82..495e2e6 100644
--- a/lib/schemas/pollinations-pricing.schema.test.ts
+++ b/lib/schemas/pollinations-pricing.schema.test.ts
@@ -43,6 +43,10 @@ describe("pollinations-pricing.schema", () => {
       // Flux is 0.0002 per image
       const cost = estimateImageCost("flux", 10);
       expect(cost).toBe(0.0002 * 10);
+
+      // Klein is 0.008 per image
+      const costKlein = estimateImageCost("klein", 10);
+      expect(costKlein).toBe(0.008 * 10);
     });
 
     it("should calculate cost for token-based model (rough estimate)", () => {
diff --git a/lib/schemas/pollinations-pricing.schema.ts b/lib/schemas/pollinations-pricing.schema.ts
index 0c95fc0..a29817a 100644
--- a/lib/schemas/pollinations-pricing.schema.ts
+++ b/lib/schemas/pollinations-pricing.schema.ts
@@ -153,6 +153,34 @@ export const IMAGE_MODEL_PRICING: Record<string, ModelPricingDefinition> = {
         },
     },
 
+    /**
+     * FLUX.2 Klein 4B - Distilled efficiency
+     * 1 pollen = 150 images
+     */
+    klein: {
+        modelId: "klein",
+        type: "image",
+        approximatePerPollen: 150,
+        supportsReferenceImage: true,
+        imagePricing: {
+            perImage: 0.008,
+        },
+    },
+
+    /**
+     * FLUX.2 Klein 9B - High fidelity
+     * 1 pollen = 85 images
+     */
+    "klein-large": {
+        modelId: "klein-large",
+        type: "image",
+        approximatePerPollen: 85,
+        supportsReferenceImage: true,
+        imagePricing: {
+            perImage: 0.012,
+        },
+    },
+
     /**
      * Z-Image Turbo - Fast with upscaling
      * Very efficient: 5000 images per pollen
diff --git a/lib/seo-config.test.ts b/lib/seo-config.test.ts
new file mode 100644
index 0000000..c1e7505
--- /dev/null
+++ b/lib/seo-config.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { RESOURCES, SOLUTIONS } from "./seo-config";
+
+describe("seo-config exports", () => {
+  it("keeps the solutions order stable", () => {
+    const slugs = SOLUTIONS.map((solution) => solution.slug);
+
+    expect(slugs).toEqual([
+      "blueprints",
+      "ai-image-generator",
+      "ai-art-generator",
+      "ai-video-generator",
+      "transparent-png-generator",
+      "ai-marketing-tools",
+      "ai-graphic-design",
+      "ai-print-on-demand",
+      "ai-photography",
+      "ai-interior-design",
+      "ai-architecture",
+    ]);
+  });
+
+  it("exports the expected resource links", () => {
+    expect(RESOURCES).toEqual([
+      { name: "About", href: "/about" },
+      { name: "Pricing", href: "/pricing" },
+      { name: "FAQ", href: "/faq" },
+      { name: "Support", href: "/support" },
+      { name: "Contact us", href: "/contact" },
+      { name: "Sitemap", href: "/site-map" },
+    ]);
+  });
+});
diff --git a/lib/seo/resources.ts b/lib/seo/resources.ts
new file mode 100644
index 0000000..7724d88
--- /dev/null
+++ b/lib/seo/resources.ts
@@ -0,0 +1,8 @@
+export const RESOURCES = [
+  { name: "About", href: "/about" },
+  { name: "Pricing", href: "/pricing" },
+  { name: "FAQ", href: "/faq" },
+  { name: "Support", href: "/support" },
+  { name: "Contact us", href: "/contact" },
+  { name: "Sitemap", href: "/site-map" },
+];
diff --git a/lib/seo/solution-types.ts b/lib/seo/solution-types.ts
new file mode 100644
index 0000000..d88afaf
--- /dev/null
+++ b/lib/seo/solution-types.ts
@@ -0,0 +1,35 @@
+export interface SolutionFeature {
+  title: string;
+  description: string;
+  image: string;
+}
+
+export interface SolutionStep {
+  title: string;
+  description: string;
+}
+
+export interface SolutionFAQ {
+  question: string;
+  answer: string;
+}
+
+export interface Solution {
+  title: string;
+  shortTitle: string;
+  slug: string;
+  description: string;
+  heroPrefix?: string;
+  heroSuffix?: string;
+  features: SolutionFeature[];
+  steps: SolutionStep[];
+  faqs: SolutionFAQ[];
+  heroImages?: string[];
+  isVideo?: boolean;
+  showcase?: {
+    label: string;
+    aspectRatio: "square" | "portrait" | "landscape" | "landscape-wide" | "portrait-tall";
+    className?: string;
+    src?: string;
+  }[];
+}
diff --git a/lib/seo/solutions/ai-architecture.ts b/lib/seo/solutions/ai-architecture.ts
new file mode 100644
index 0000000..2de82ca
--- /dev/null
+++ b/lib/seo/solutions/ai-architecture.ts
@@ -0,0 +1,94 @@
+import type { Solution } from "../solution-types";
+
+export const AI_ARCHITECTURE: Solution = {
+  title: "AI Architecture",
+  shortTitle: "Architecture",
+  slug: "ai-architecture",
+  description:
+    "Generate breathtaking architectural concepts and exterior visualizations. Explore facades, massing, and landscape integration in seconds.",
+  heroSuffix: "architecture",
+  heroImages: [
+    "/solutions/ai-architecture/hero-1.jpeg",
+    "/solutions/ai-architecture/hero-2.jpeg",
+    "/solutions/ai-architecture/hero-3.jpeg",
+    "/solutions/ai-architecture/hero-4.jpeg",
+  ],
+  features: [
+    {
+      title: "Concept Massing",
+      description:
+        "Rapidly iterate on building shapes and structural silhouettes. Explore everything from futuristic glass curves to minimalist concrete blocks.",
+      image: "/solutions/ai-architecture/feature-1.jpeg",
+    },
+    {
+      title: "Contextual Visualization",
+      description:
+        "See your building concept in any environment—whether it's nestled in a forest, integrated into a city skyline, or perched on a coastal cliff.",
+      image: "/solutions/ai-architecture/feature-2.jpeg",
+    },
+    {
+      title: "Material & Facade Study",
+      description:
+        "Experiment with different building skins and materials. Visualize how light interacts with glass, timber, or stone on your building's exterior.",
+      image: "/solutions/ai-architecture/feature-3.jpeg",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe the structure",
+      description: "Input the function and general aesthetic of the building you want to visualize.",
+    },
+    {
+      title: "Set the environment",
+      description: "Describe the lighting and surrounding context to provide a complete architectural scene.",
+    },
+    {
+      title: "Generate Visualization",
+      description: "Watch as our models render a professional-looking architectural concept from your text.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Is this for professional use?",
+      answer:
+        "Yes, architects use our tool for early-stage ideation, mood boarding, and generating quick visual references for client meetings.",
+    },
+    {
+      question: "Are these engineering files?",
+      answer:
+        "No, these are high-quality visual renders. They are intended for conceptual exploration rather than technical documentation.",
+    },
+  ],
+  showcase: [
+    {
+      label: "Futuristic Glass Facade Concept",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-architecture/showcase-1.jpeg",
+    },
+    {
+      label: "Brutalist Concrete Museum Render",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-architecture/showcase-2.jpeg",
+    },
+    {
+      label: "Parametric Pavilion Visualization",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-architecture/showcase-3.jpeg",
+    },
+    {
+      label: "Sustainable Green Skyscraper",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-architecture/showcase-4.jpeg",
+    },
+    {
+      label: "Bauhaus Inspired Residence",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-architecture/showcase-5.jpeg",
+    },
+  ],
+};
diff --git a/lib/seo/solutions/ai-art-generator.ts b/lib/seo/solutions/ai-art-generator.ts
new file mode 100644
index 0000000..71eff9f
--- /dev/null
+++ b/lib/seo/solutions/ai-art-generator.ts
@@ -0,0 +1,66 @@
+import type { Solution } from "../solution-types";
+
+export const AI_ART_GENERATOR: Solution = {
+  title: "AI Art Generator",
+  shortTitle: "Art",
+  slug: "ai-art-generator",
+  description:
+    "Transform your artistic visions into beautiful digital pieces. Experiment with countless art styles through a unified, fast, and intuitive interface.",
+  heroSuffix: "art",
+  heroImages: [
+    "/solutions/ai-art-generator/hero-1.jpg",
+    "/solutions/ai-art-generator/hero-2.jpg",
+    "/solutions/ai-art-generator/hero-3.jpg",
+    "/solutions/ai-art-generator/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Infinite Styles",
+      description:
+        "Explore styles ranging from classical oil paintings and watercolors to modern digital concept art and pixel-perfect illustrations.",
+      image: "/solutions/ai-art-generator/feature-1.jpg",
+    },
+    {
+      title: "Character & World Building",
+      description: "Rapidly iterate on character designs, environment silhouettes, and color scripts for your creative projects.",
+      image: "/solutions/ai-art-generator/feature-2.jpg",
+    },
+    {
+      title: "Creative Brainstorming",
+      description:
+        "Use AI as a collaborative partner to overcome creative block, exploring compositions and lighting schemes in real-time.",
+      image: "/solutions/ai-art-generator/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe your vision",
+      description: "Specify the medium (oil, digital, sketch) and the subject of your artwork.",
+    },
+    {
+      title: "Select Art Constraints",
+      description: "Choose aspect ratios and resolution tiers that suit your intended final format.",
+    },
+    {
+      title: "Generate Masterpieces",
+      description: "Create high-resolution artwork suitable for digital sharing or large-format printing.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Can I emulate specific artists?",
+      answer: "You can describe specific artistic styles and eras to guide the AI's aesthetic output.",
+    },
+    {
+      question: "What is the max resolution?",
+      answer: "We support high-resolution outputs up to 4K, perfect for high-quality art prints.",
+    },
+  ],
+  showcase: [
+    { label: "Oil Painting Portrait", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-art-generator/showcase-1.jpg" },
+    { label: "Impressionist Terrace", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-art-generator/showcase-2.jpg" },
+    { label: "Digital Concept Art", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-art-generator/showcase-3.jpg" },
+    { label: "Modern Abstract Wall", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-art-generator/showcase-4.jpg" },
+    { label: "Sci-Fi Illustration", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-art-generator/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-blueprints.ts b/lib/seo/solutions/ai-blueprints.ts
new file mode 100644
index 0000000..8bfdd93
--- /dev/null
+++ b/lib/seo/solutions/ai-blueprints.ts
@@ -0,0 +1,78 @@
+import type { Solution } from "../solution-types";
+
+export const AI_BLUEPRINTS: Solution = {
+  title: "AI Blueprints",
+  shortTitle: "Blueprints",
+  slug: "blueprints",
+  description:
+    "Generate architectural visualizations and schematic-style concepts instantly with AI. Explore floor plan layouts and technical aesthetics for early-stage planning.",
+  heroSuffix: "blueprints",
+  heroImages: [
+    "/solutions/ai-blueprints/hero-1.jpg",
+    "/solutions/ai-blueprints/hero-2.jpg",
+    "/solutions/ai-blueprints/hero-3.jpg",
+    "/solutions/ai-blueprints/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Visual Schematics",
+      description:
+        "Transform textual descriptions into clear architectural visualizations. Our prompt enhancement engine helps you explore room layouts and functional zones through high-quality renders.",
+      image: "/solutions/ai-blueprints/feature-1.jpg",
+    },
+    {
+      title: "Drafting Aesthetics",
+      description:
+        "Emulate the look and feel of professional drafting standards. Whether you need an ANSI or ISO schematic aesthetic, our models capture the technical style for your presentations.",
+      image: "/solutions/ai-blueprints/feature-2.jpg",
+    },
+    {
+      title: "Rapid Layout Iteration",
+      description:
+        "Generate dozens of layout variations for your project in minutes. Perfect for early-stage conceptualization and spatial flow studies before CAD drafting.",
+      image: "/solutions/ai-blueprints/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe your concept",
+      description: "Enter a description of the space, building, or layout you want to explore.",
+    },
+    {
+      title: "AI-Enhanced Generation",
+      description: "Our platform optimizes your prompt to ensure a detailed, technical-looking visual output.",
+    },
+    {
+      title: "Iterate & Refine",
+      description: "Fine-tune your descriptions to explore different materials, lighting, or spatial arrangements.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Can I use these for construction?",
+      answer:
+        "No, these are AI-generated visualizations for conceptualization. Always consult with a licensed architect for actual construction documents.",
+    },
+    {
+      question: "What is the output format?",
+      answer: "You can download high-resolution image files (PNG/JPG) of your generated concepts.",
+    },
+  ],
+  showcase: [
+    { label: "Modern Floor Plan Concept", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-blueprints/showcase-1.jpg" },
+    {
+      label: "Technical Style Cross-section",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-blueprints/showcase-2.jpg",
+    },
+    {
+      label: "Electrical Schematic Aesthetic",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-blueprints/showcase-3.jpg",
+    },
+    { label: "Site Layout Visualization", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-blueprints/showcase-4.jpg" },
+    { label: "3D Massing Study Render", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-blueprints/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-graphic-design.ts b/lib/seo/solutions/ai-graphic-design.ts
new file mode 100644
index 0000000..3f9ed3b
--- /dev/null
+++ b/lib/seo/solutions/ai-graphic-design.ts
@@ -0,0 +1,83 @@
+import type { Solution } from "../solution-types";
+
+export const AI_GRAPHIC_DESIGN: Solution = {
+  title: "AI Graphic Design",
+  shortTitle: "Graphic Design",
+  slug: "ai-graphic-design",
+  description:
+    "Generate professional-grade graphic design elements and layout concepts. From logos and icons to brand patterns, explore your design ideas instantly.",
+  heroSuffix: "designs",
+  heroImages: [
+    "/solutions/ai-graphic-design/hero-1.jpg",
+    "/solutions/ai-graphic-design/hero-2.jpg",
+    "/solutions/ai-graphic-design/hero-3.jpg",
+    "/solutions/ai-graphic-design/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Logo & Brand Ideation",
+      description:
+        "Brainstorm and visualize hundreds of logo and icon ideas in seconds. Explore various shapes, symbols, and typographic treatments to kickstart your project.",
+      image: "/solutions/ai-graphic-design/feature-1.jpg",
+    },
+    {
+      title: "Cohesive Iconography",
+      description:
+        "Generate sets of icons with consistent line weights and styles. Maintain a unified visual language across your entire app or website project.",
+      image: "/solutions/ai-graphic-design/feature-2.jpg",
+    },
+    {
+      title: "Pattern Exploration",
+      description:
+        "Create unique brand patterns and background elements. Experiment with different colors and geometries to build a comprehensive visual identity.",
+      image: "/solutions/ai-graphic-design/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Define the brief",
+      description: "Describe the element you want to create, including style, mood, and color palette.",
+    },
+    {
+      title: "Explore Variations",
+      description: "Generate multiple design concepts to see which direction works best for your brand.",
+    },
+    {
+      title: "Incorporate & Finalize",
+      description: "Download your favorites and use them as the foundation for your final design work.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Do you provide vector files?",
+      answer:
+        "We provide high-resolution raster images (PNG/JPG) which can be easily vectorized in tools like Adobe Illustrator or Figma.",
+    },
+    {
+      question: "Are the designs unique?",
+      answer: "Yes, every design is generated from scratch based on your unique prompt and the specific model you choose.",
+    },
+  ],
+  showcase: [
+    { label: "Minimalist Logo Mark", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-graphic-design/showcase-1.jpg" },
+    { label: "Custom Icon Set", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-graphic-design/showcase-2.jpg" },
+    {
+      label: "Branding Guidelines Visual",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-graphic-design/showcase-3.jpg",
+    },
+    {
+      label: "Vector Style Illustration",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-graphic-design/showcase-4.jpg",
+    },
+    {
+      label: "Typographic Badge concept",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-graphic-design/showcase-5.jpg",
+    },
+  ],
+};
diff --git a/lib/seo/solutions/ai-image-generator.ts b/lib/seo/solutions/ai-image-generator.ts
new file mode 100644
index 0000000..c739bf9
--- /dev/null
+++ b/lib/seo/solutions/ai-image-generator.ts
@@ -0,0 +1,83 @@
+import type { Solution } from "../solution-types";
+
+export const AI_IMAGE_GENERATOR: Solution = {
+  title: "AI Image Generator",
+  shortTitle: "Images",
+  slug: "ai-image-generator",
+  description:
+    "Generate stunning high-resolution images from any prompt. Powered by a diverse library of world-class AI models like Nano Banana Pro, GPT Image 1.5, and Seedream 4.5.",
+  heroSuffix: "images",
+  heroImages: [
+    "/solutions/ai-image-generator/hero-1.jpg",
+    "/solutions/ai-image-generator/hero-2.jpg",
+    "/solutions/ai-image-generator/hero-3.jpg",
+    "/solutions/ai-image-generator/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Multi-Model Choice",
+      description:
+        "Access the world's best image models in one place. Choose the specific model that best fits your required style, from photorealism to surrealism.",
+      image: "/solutions/ai-image-generator/feature-1.jpg",
+    },
+    {
+      title: "Prompt Enhancement",
+      description:
+        "Our intelligent prompt expansion helps you get better results by adding descriptive detail and artistic context to your simple ideas.",
+      image: "/solutions/ai-image-generator/feature-2.jpg",
+    },
+    {
+      title: "Indistinguishable Quality",
+      description:
+        "Create crystal clear visuals with advanced lighting, ray-traced reflections, and physically accurate textures using our pro-tier models.",
+      image: "/solutions/ai-image-generator/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Enter your prompt",
+      description: "Describe the image you want to create in natural language.",
+    },
+    {
+      title: "Choose your model",
+      description: "Select from our curated list of elite AI models based on your specific quality and style needs.",
+    },
+    {
+      title: "Generate & Refine",
+      description: "Watch your vision come to life in seconds and adjust the prompt to perfect the output.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Which model should I use?",
+      answer:
+        "Each model has strengths. For example, Nano Banana Pro is great for detail, while GPT Image 1.5 is excellent for prompt adherence. You can try multiple models for the same prompt.",
+    },
+    {
+      question: "Do I have rights to the images?",
+      answer: "Yes, you retain full rights to the images you generate using our platform's models.",
+    },
+  ],
+  showcase: [
+    { label: "Cyberpunk Cityscape", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-image-generator/showcase-1.jpg" },
+    { label: "Ethereal Forest Path", aspectRatio: "landscape", className: "h-full", src: "/solutions/ai-image-generator/showcase-2.jpg" },
+    {
+      label: "Gothic Cathedral Interior",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-image-generator/showcase-3.jpg",
+    },
+    {
+      label: "Sci-Fi Starship Bridge",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-image-generator/showcase-4.jpg",
+    },
+    {
+      label: "Mystical Mountain Peak",
+      aspectRatio: "landscape",
+      className: "h-full",
+      src: "/solutions/ai-image-generator/showcase-5.jpg",
+    },
+  ],
+};
diff --git a/lib/seo/solutions/ai-interior-design.ts b/lib/seo/solutions/ai-interior-design.ts
new file mode 100644
index 0000000..fb7a1d2
--- /dev/null
+++ b/lib/seo/solutions/ai-interior-design.ts
@@ -0,0 +1,89 @@
+import type { Solution } from "../solution-types";
+
+export const AI_INTERIOR_DESIGN: Solution = {
+  title: "AI Interior Design",
+  shortTitle: "Interiors",
+  slug: "ai-interior-design",
+  description:
+    "Visualize interior spaces and experiment with countless design styles. Explore room layouts, furniture aesthetics, and color palettes through high-quality AI renders.",
+  heroSuffix: "interiors",
+  heroImages: [
+    "/solutions/ai-interior-design/hero-1.jpg",
+    "/solutions/ai-interior-design/hero-2.jpg",
+    "/solutions/ai-interior-design/hero-3.jpg",
+    "/solutions/ai-interior-design/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Layout Visualization",
+      description:
+        "Describe a room and see it in different styles—from Japandi and Mid-century Modern to Industrial. Perfect for visualizing potential furniture arrangements.",
+      image: "/solutions/ai-interior-design/feature-1.jpg",
+    },
+    {
+      title: "Aesthetic Exploration",
+      description:
+        "Experiment with color schemes, lighting, and materials. See how different textures and finishes interact within a space before making any commitments.",
+      image: "/solutions/ai-interior-design/feature-2.jpg",
+    },
+    {
+      title: "Style Board Creation",
+      description:
+        "Create high-quality visual references for your renovation projects. Quickly narrow down the look and feel of your future space for better planning.",
+      image: "/solutions/ai-interior-design/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Define the space",
+      description: "Describe the type of room (e.g., 'sunlit modern kitchen') and the desired vibe.",
+    },
+    {
+      title: "Select Design Elements",
+      description: "Mention specific materials or furniture styles to guide the AI's aesthetic choices.",
+    },
+    {
+      title: "View Renders",
+      description: "Watch as your interior design concept comes to life in a high-quality visualization.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Can I restyle my own room?",
+      answer:
+        "Yes, you can use our image-to-image features to upload a photo of your existing space and generate new design ideas based on it.",
+    },
+    {
+      question: "Is it for technical planning?",
+      answer:
+        "These are visual concepts for ideation and mood boarding. They are not a substitute for architectural plans or structural engineering.",
+    },
+  ],
+  showcase: [
+    {
+      label: "Japandi Living Room Layout",
+      aspectRatio: "square",
+      className: "h-full md:aspect-[1/2]",
+      src: "/solutions/ai-interior-design/showcase-1.jpg",
+    },
+    {
+      label: "Modern Industrial Kitchen",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-interior-design/showcase-2.jpg",
+    },
+    {
+      label: "Minimalist Master Bedroom",
+      aspectRatio: "square",
+      className: "h-full",
+      src: "/solutions/ai-interior-design/showcase-3.jpg",
+    },
+    {
+      label: "Skylit Bohemian Attic",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-interior-design/showcase-4.jpg",
+    },
+    { label: "Luxury Marble Bathroom", aspectRatio: "square", className: "h-full", src: "/solutions/ai-interior-design/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-marketing-tools.ts b/lib/seo/solutions/ai-marketing-tools.ts
new file mode 100644
index 0000000..e2ee7dc
--- /dev/null
+++ b/lib/seo/solutions/ai-marketing-tools.ts
@@ -0,0 +1,83 @@
+import type { Solution } from "../solution-types";
+
+export const AI_MARKETING_TOOLS: Solution = {
+  title: "AI Marketing Tools",
+  shortTitle: "Marketing Assets",
+  slug: "ai-marketing-tools",
+  description:
+    "Scale your content production with AI-generated ad creatives and social media visuals. Explore campaign ideas and brand assets in seconds.",
+  heroSuffix: "marketing assets",
+  heroImages: [
+    "/solutions/ai-marketing-tools/hero-1.jpg",
+    "/solutions/ai-marketing-tools/hero-2.jpg",
+    "/solutions/ai-marketing-tools/hero-3.jpg",
+    "/solutions/ai-marketing-tools/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Creative Exploration",
+      description:
+        "Rapidly generate dozens of visual variations for your ad campaigns. Explore different compositions and styles to find what resonates.",
+      image: "/solutions/ai-marketing-tools/feature-1.jpg",
+    },
+    {
+      title: "Social Media Graphics",
+      description:
+        "Create eye-catching visuals for Instagram, Facebook, and LinkedIn. Tailor your imagery to specific platforms with custom aspect ratios.",
+      image: "/solutions/ai-marketing-tools/feature-2.jpg",
+    },
+    {
+      title: "Marketing Campaign Concepts",
+      description:
+        "Visualize brand directions and campaign themes before starting full production. Align stakeholders with high-quality visual references.",
+      image: "/solutions/ai-marketing-tools/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Define your audience",
+      description: "Describe the vibe and visual style that appeals to your target demographic.",
+    },
+    {
+      title: "Generate Visual Options",
+      description: "Use our prompt enhancer to create a diverse batch of marketing-ready concepts.",
+    },
+    {
+      title: "Download & Deploy",
+      description: "Select the most promising visuals and incorporate them into your marketing workflow.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Can I use these for ads?",
+      answer: "Yes, you have full commercial rights. We recommend adding your specific logo and copy in a design tool.",
+    },
+    {
+      question: "Does it support text?",
+      answer:
+        "While newer models are better at text, we suggest using our AI for the visual backdrop and adding copy separately for maximum clarity.",
+    },
+  ],
+  showcase: [
+    {
+      label: "Instagram Ad Creative",
+      aspectRatio: "square",
+      className: "h-full md:aspect-[1/2]",
+      src: "/solutions/ai-marketing-tools/showcase-1.jpg",
+    },
+    {
+      label: "Facebook Banner Ad",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-marketing-tools/showcase-2.jpg",
+    },
+    { label: "Product Marketing Shot", aspectRatio: "square", className: "h-full", src: "/solutions/ai-marketing-tools/showcase-3.jpg" },
+    {
+      label: "Hero Website Image",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-marketing-tools/showcase-4.jpg",
+    },
+    { label: "Brand Pattern Design", aspectRatio: "square", className: "h-full", src: "/solutions/ai-marketing-tools/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-photography.ts b/lib/seo/solutions/ai-photography.ts
new file mode 100644
index 0000000..612c3bb
--- /dev/null
+++ b/lib/seo/solutions/ai-photography.ts
@@ -0,0 +1,83 @@
+import type { Solution } from "../solution-types";
+
+export const AI_PHOTOGRAPHY: Solution = {
+  title: "AI Photography",
+  shortTitle: "Photos",
+  slug: "ai-photography",
+  description:
+    "Generate hyper-realistic photography through text. Control lighting, composition, and lens effects without a physical camera or studio.",
+  heroSuffix: "photos",
+  heroImages: [
+    "/solutions/ai-photography/hero-1.jpg",
+    "/solutions/ai-photography/hero-2.jpg",
+    "/solutions/ai-photography/hero-3.jpg",
+    "/solutions/ai-photography/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Virtual Lighting Control",
+      description:
+        "Simulate complex studio lighting setups, natural golden hour sun, or dramatic cinematic shadows with descriptive prompts.",
+      image: "/solutions/ai-photography/feature-1.jpg",
+    },
+    {
+      title: "Compositional Tuning",
+      description:
+        "Control camera angles, depth of field, and lens types—from wide-angle landscapes to 85mm portraits—using natural language.",
+      image: "/solutions/ai-photography/feature-2.jpg",
+    },
+    {
+      title: "Lifelike Product Shots",
+      description:
+        "Place any product in any environment. Create professional-looking product photography settings without expensive sets or travel.",
+      image: "/solutions/ai-photography/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe the Shot",
+      description: "Input the subject, the lighting environment, and the overall mood of the photo.",
+    },
+    {
+      title: "Specify Lens & Angle",
+      description: "Add technical details like 'macro', 'low-angle', or 'f/1.8' to guide the AI's rendering style.",
+    },
+    {
+      title: "Generate Photo",
+      description: "Watch as our models produce high-fidelity imagery that captures your vision perfectly.",
+    },
+  ],
+  faqs: [
+    {
+      question: "How realistic are the results?",
+      answer:
+        "Our pro-tier models like Nano Banana Pro, GPT Image 1.5 and Seedream 4.5 are designed to produce imagery that is often indistinguishable from real photography.",
+    },
+    {
+      question: "Can I use these for my website?",
+      answer: "Yes, these are perfect for hero images, blog posts, and marketing materials where high-quality photography is required.",
+    },
+  ],
+  showcase: [
+    {
+      label: "High-Fashion Studio Portrait",
+      aspectRatio: "square",
+      className: "h-full md:aspect-[1/2]",
+      src: "/solutions/ai-photography/showcase-1.jpg",
+    },
+    {
+      label: "Golden Hour Coastal Landscape",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-photography/showcase-2.jpg",
+    },
+    { label: "Macro Dew Drop Photography", aspectRatio: "square", className: "h-full", src: "/solutions/ai-photography/showcase-3.jpg" },
+    {
+      label: "Urban Street Life Action",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-photography/showcase-4.jpg",
+    },
+    { label: "Vintage Polaroid Aesthetic", aspectRatio: "square", className: "h-full", src: "/solutions/ai-photography/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-print-on-demand.ts b/lib/seo/solutions/ai-print-on-demand.ts
new file mode 100644
index 0000000..55b2c2c
--- /dev/null
+++ b/lib/seo/solutions/ai-print-on-demand.ts
@@ -0,0 +1,81 @@
+import type { Solution } from "../solution-types";
+
+export const AI_PRINT_ON_DEMAND: Solution = {
+  title: "AI Print on Demand",
+  shortTitle: "Print Designs",
+  slug: "ai-print-on-demand",
+  description:
+    "Create unique, high-resolution designs ready for your merchandise business. Perfect for t-shirts, posters, and product prints.",
+  heroSuffix: "prints",
+  heroImages: [
+    "/solutions/ai-print-generator/hero-1.jpg",
+    "/solutions/ai-print-generator/hero-2.jpg",
+    "/solutions/ai-print-generator/hero-3.jpg",
+    "/solutions/ai-print-generator/hero-4.jpg",
+  ],
+  features: [
+    {
+      title: "Merchandise Concepts",
+      description:
+        "Create stunning visuals specifically for apparel, home decor, and accessories. Experience how your designs will look on physical products.",
+      image: "/solutions/ai-print-generator/feature-1.jpg",
+    },
+    {
+      title: "High-Resolution Output",
+      description:
+        "Get the detail you need for crisp physical prints. Our models support high pixel counts suitable for large-format products.",
+      image: "/solutions/ai-print-generator/feature-2.jpg",
+    },
+    {
+      title: "Scaling Your Store",
+      description: "Rapidly fill your print-on-demand store with diverse designs for any niche, trend, or holiday in minutes.",
+      image: "/solutions/ai-print-generator/feature-3.jpg",
+    },
+  ],
+  steps: [
+    {
+      title: "Find your niche",
+      description: "Describe the theme or audience you want to target with your merchandise.",
+    },
+    {
+      title: "Generate Bulk Options",
+      description: "Create a wide array of design variants to see what will sell best in your store.",
+    },
+    {
+      title: "Download for Print",
+      description: "Export high-quality images ready to be uploaded to your favorite POD platform.",
+    },
+  ],
+  faqs: [
+    {
+      question: "What is the max resolution?",
+      answer: "We support high-resolution outputs up to 4K, which is the industry standard for high-quality printing.",
+    },
+    {
+      question: "Can I sell the products?",
+      answer: "Absolutely. You own the rights to the designs you generate and can use them on commercial merchandise.",
+    },
+  ],
+  showcase: [
+    {
+      label: "T-Shirt Graphic Design",
+      aspectRatio: "square",
+      className: "h-full md:aspect-[1/2]",
+      src: "/solutions/ai-print-generator/showcase-1.jpg",
+    },
+    {
+      label: "Mug & Product Print",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-print-generator/showcase-2.jpg",
+    },
+    { label: "Poster Art Print", aspectRatio: "square", className: "h-full", src: "/solutions/ai-print-generator/showcase-3.jpg" },
+    {
+      label: "Repeat Pattern Merch",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-print-generator/showcase-4.jpg",
+    },
+    { label: "Sticker Pack Elements", aspectRatio: "square", className: "h-full", src: "/solutions/ai-print-generator/showcase-5.jpg" },
+  ],
+};
diff --git a/lib/seo/solutions/ai-video-generator.ts b/lib/seo/solutions/ai-video-generator.ts
new file mode 100644
index 0000000..a8568d8
--- /dev/null
+++ b/lib/seo/solutions/ai-video-generator.ts
@@ -0,0 +1,82 @@
+import type { Solution } from "../solution-types";
+
+export const AI_VIDEO_GENERATOR: Solution = {
+  title: "AI Video Generator",
+  shortTitle: "Video",
+  slug: "ai-video-generator",
+  description:
+    "Transform your text and images into engaging short-form video clips. Create motion graphics and cinematic animations in minutes.",
+  heroSuffix: "videos",
+  isVideo: true,
+  heroImages: [
+    "/solutions/ai-video-generator/hero-1.mp4",
+    "/solutions/ai-video-generator/hero-2.mp4",
+    "/solutions/ai-video-generator/hero-3.mp4",
+    "/solutions/ai-video-generator/hero-4.mp4",
+  ],
+  features: [
+    {
+      title: "Cinematic Motion",
+      description: "Describe a scene and let our AI generate a short video clip with professional camera movements and lighting.",
+      image: "/solutions/ai-video-generator/feature-1.mp4",
+    },
+    {
+      title: "Image Animation",
+      description:
+        "Bring your favorite static images to life. Add subtle movement to portraits or create flowing landscapes with our image-to-video tools.",
+      image: "/solutions/ai-video-generator/feature-2.mp4",
+    },
+    {
+      title: "Fast Generation",
+      description:
+        "Experience rapid video rendering. Most short-form clips are ready in just a few minutes, allowing for quick creative iteration.",
+      image: "/solutions/ai-video-generator/feature-3.mp4",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe the action",
+      description: "Write a prompt detailing the motion and atmosphere you want to capture.",
+    },
+    {
+      title: "Select Video Model",
+      description: "Choose from specialized video models optimized for different styles of motion.",
+    },
+    {
+      title: "Generate Clip",
+      description: "Watch as your scene comes to life in a high-quality video file.",
+    },
+  ],
+  faqs: [
+    {
+      question: "How long are the clips?",
+      answer: "Currently, our models generate 4-5 second clips which are perfect for social media or B-roll.",
+    },
+    {
+      question: "Can I generate long movies?",
+      answer: "You can generate multiple clips and stitch them together in a video editor to create longer content.",
+    },
+  ],
+  showcase: [
+    {
+      label: "Cinematic Drone Shot",
+      aspectRatio: "square",
+      className: "h-full md:aspect-[1/2]",
+      src: "/solutions/ai-video-generator/showcase-1.mp4",
+    },
+    {
+      label: "Abstract Liquid Animation",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-video-generator/showcase-2.mp4",
+    },
+    { label: "Character Motion Test", aspectRatio: "square", className: "h-full", src: "/solutions/ai-video-generator/showcase-3.mp4" },
+    {
+      label: "Hyper-lapse Transition",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/ai-video-generator/showcase-4.mp4",
+    },
+    { label: "Lo-fi Aesthetic Loop", aspectRatio: "square", className: "h-full", src: "/solutions/ai-video-generator/showcase-5.mp4" },
+  ],
+};
diff --git a/lib/seo/solutions/index.ts b/lib/seo/solutions/index.ts
new file mode 100644
index 0000000..fa7e5fd
--- /dev/null
+++ b/lib/seo/solutions/index.ts
@@ -0,0 +1,27 @@
+import type { Solution } from "../solution-types";
+
+import { AI_BLUEPRINTS } from "./ai-blueprints";
+import { AI_IMAGE_GENERATOR } from "./ai-image-generator";
+import { AI_ART_GENERATOR } from "./ai-art-generator";
+import { AI_VIDEO_GENERATOR } from "./ai-video-generator";
+import { TRANSPARENT_PNG_GENERATOR } from "./transparent-png-generator";
+import { AI_MARKETING_TOOLS } from "./ai-marketing-tools";
+import { AI_GRAPHIC_DESIGN } from "./ai-graphic-design";
+import { AI_PRINT_ON_DEMAND } from "./ai-print-on-demand";
+import { AI_PHOTOGRAPHY } from "./ai-photography";
+import { AI_INTERIOR_DESIGN } from "./ai-interior-design";
+import { AI_ARCHITECTURE } from "./ai-architecture";
+
+export const SOLUTIONS: Solution[] = [
+  AI_BLUEPRINTS,
+  AI_IMAGE_GENERATOR,
+  AI_ART_GENERATOR,
+  AI_VIDEO_GENERATOR,
+  TRANSPARENT_PNG_GENERATOR,
+  AI_MARKETING_TOOLS,
+  AI_GRAPHIC_DESIGN,
+  AI_PRINT_ON_DEMAND,
+  AI_PHOTOGRAPHY,
+  AI_INTERIOR_DESIGN,
+  AI_ARCHITECTURE,
+];
diff --git a/lib/seo/solutions/transparent-png-generator.ts b/lib/seo/solutions/transparent-png-generator.ts
new file mode 100644
index 0000000..077ee5e
--- /dev/null
+++ b/lib/seo/solutions/transparent-png-generator.ts
@@ -0,0 +1,91 @@
+import type { Solution } from "../solution-types";
+
+export const TRANSPARENT_PNG_GENERATOR: Solution = {
+  title: "Transparent PNG Generator",
+  shortTitle: "Transparent PNGs",
+  slug: "transparent-png-generator",
+  description:
+    "Generate high-quality images with alpha-channel transparency instantly. Perfect for game assets, stickers, and professional graphic design.",
+  heroSuffix: "assets",
+  heroImages: [
+    "/solutions/transparent-generator/hero-1.png",
+    "/solutions/transparent-generator/hero-2.png",
+    "/solutions/transparent-generator/hero-3.png",
+  ],
+  features: [
+    {
+      title: "Complex Subject Isolation",
+      description:
+        "Achieve flawless masking for difficult subjects like fur, hair, and foliage. Our AI ensures every detail is perfectly cut out for professional use.",
+      image: "/solutions/transparent-generator/feature-1.png",
+    },
+    {
+      title: "Modular Game Assets",
+      description:
+        "Generate consistent, high-quality isometric assets and sprites for your games. Ready to be used as isolated elements in any engine.",
+      image: "/solutions/transparent-generator/feature-2.png",
+    },
+    {
+      title: "Glassmorphism UI Kit",
+      description:
+        "Create modern UI elements with realistic transparency and glassmorphism effects. Perfect for landing pages and app interfaces.",
+      image: "/solutions/transparent-generator/feature-3.png",
+    },
+  ],
+  steps: [
+    {
+      title: "Describe your asset",
+      description: "Be specific about the object you want to generate (e.g., 'vintage treasure chest').",
+    },
+    {
+      title: "Enable Transparency",
+      description: "Select a model or mode specifically tuned for transparent PNG output.",
+    },
+    {
+      title: "Download alpha-PNG",
+      description: "Get your high-resolution asset with the background already removed.",
+    },
+  ],
+  faqs: [
+    {
+      question: "Is it really transparent?",
+      answer: "Yes, the files are exported with a full alpha channel, meaning no manual background removal is required.",
+    },
+    {
+      question: "What resolution are the assets?",
+      answer: "We support high-resolution asset generation, typically up to 2K for transparent objects.",
+    },
+  ],
+  showcase: [
+    {
+      label: "Isolated Game Item",
+      aspectRatio: "square",
+      className: "h-full",
+      src: "/solutions/transparent-generator/showcase-1.png",
+    },
+    {
+      label: "Character Sprite Sheet",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/transparent-generator/showcase-2.png",
+    },
+    {
+      label: "Floating UI Icon",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/transparent-generator/showcase-3.png",
+    },
+    {
+      label: "Transparent VFX Asset",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/transparent-generator/showcase-4.png",
+    },
+    {
+      label: "Cut-out Product Photo",
+      aspectRatio: "landscape-wide",
+      className: "h-full",
+      src: "/solutions/transparent-generator/showcase-5.png",
+    },
+  ],
+};
diff --git a/lint-errors-detailed.json b/lint-errors-detailed.json
new file mode 100644
index 0000000..fd236a0
Binary files /dev/null and b/lint-errors-detailed.json differ
diff --git a/lint_reports/COMPLETION_SUMMARY.md b/lint_reports/COMPLETION_SUMMARY.md
new file mode 100644
index 0000000..8c03d04
--- /dev/null
+++ b/lint_reports/COMPLETION_SUMMARY.md
@@ -0,0 +1,192 @@
+# Lint Fix Completion Summary
+
+**Date:** January 20, 2026  
+**Status:** ✅ **COMPLETE - ZERO REGRESSIONS**
+
+---
+
+## Task Overview
+
+Fixed all TypeScript lint errors in two files as requested:
+- `@typescript-eslint/no-unsafe-assignment` (4 errors)
+- `@typescript-eslint/no-non-null-assertion` (6 errors)
+
+**Total Errors Fixed:** 10  
+**Regression Risk:** ZERO  
+**Logic Changes:** NONE
+
+---
+
+## Files Modified
+
+### 1. components/studio/controls/prompt-section.test.tsx
+**Rule:** `@typescript-eslint/no-unsafe-assignment`  
+**Errors Fixed:** 4  
+**Approach:** Added explicit type annotations to mock function parameters
+
+**Changes:**
+```typescript
+// Before (implicit any)
+vi.fn(({ onClick, disabled }) => ...)
+
+// After (explicit types)
+vi.fn(({ onClick, disabled }: { onClick: () => void; disabled?: boolean }) => ...)
+```
+
+**Verification:**
+- ✅ 22/22 tests passing
+- ✅ 0 lint errors
+- ✅ No runtime changes
+
+---
+
+### 2. components/studio/features/generation/controls-view.tsx
+**Rule:** `@typescript-eslint/no-non-null-assertion`  
+**Errors Fixed:** 6  
+**Approach:** Type guards + extracted validated props
+
+**Changes:**
+
+1. **Added Type Guard Functions:**
+```typescript
+function hasVideoReferenceImages(
+  images: VideoReferenceImages | undefined,
+  onChange: ((images: VideoReferenceImages) => void) | undefined
+): images is VideoReferenceImages {
+  return images !== undefined && onChange !== undefined;
+}
+
+function hasVideoSettings(
+  settings: VideoSettings | undefined,
+  onChange: ((settings: VideoSettings) => void) | undefined,
+  constraints: VideoDurationConstraints | undefined
+): settings is VideoSettings {
+  return settings !== undefined && onChange !== undefined && constraints !== undefined;
+}
+```
+
+2. **Extracted Validated Props:**
+```typescript
+const videoFramesProps = showVideoFrames && hasVideoReferenceImages(videoReferenceImages, onVideoReferenceImagesChange)
+  ? { images: videoReferenceImages, onChange: onVideoReferenceImagesChange }
+  : null;
+
+const videoSettingsProps = showVideoSettings && hasVideoSettings(videoSettings, onVideoSettingsChange, durationConstraints)
+  ? { settings: videoSettings, onChange: onVideoSettingsChange, constraints: durationConstraints }
+  : null;
+```
+
+3. **Updated JSX (removed ! operators):**
+```typescript
+// Before
+<VideoReferenceImagePicker
+  selectedImages={videoReferenceImages!}
+  onImagesChange={onVideoReferenceImagesChange!}
+/>
+
+// After
+{videoFramesProps && (
+  <VideoReferenceImagePicker
+    selectedImages={videoFramesProps.images}
+    onImagesChange={videoFramesProps.onChange}
+  />
+)}
+```
+
+**Verification:**
+- ✅ 16/16 tests passing
+- ✅ 0 lint errors
+- ✅ No runtime changes
+
+---
+
+## Verification Results
+
+### Test Suite
+```
+✅ prompt-section.test.tsx: 22 tests passed
+✅ controls-view.test.tsx: 16 tests passed
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Total: 38/38 tests passing (100%)
+```
+
+### ESLint
+```
+✅ prompt-section.test.tsx: 0 errors, 0 warnings
+✅ controls-view.tsx: 0 errors, 0 warnings
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Both files clean
+```
+
+### Type Safety
+```
+✅ No implicit 'any' types
+✅ No non-null assertions
+✅ Proper type narrowing via guards
+✅ All optional props properly handled
+```
+
+---
+
+## Regression Analysis
+
+### Logic Changes: **NONE**
+- All changes are type-level only
+- No runtime behavior modifications
+- No algorithm changes
+- Type guards match existing predicate logic exactly
+
+### Test Changes: **NONE**
+- All existing tests pass without modification
+- No test expectations changed
+- No new tests required (type-only changes)
+
+### Breaking Changes: **NONE**
+- No API changes
+- No prop interface changes
+- No export changes
+- No component behavior changes
+
+### Risk Assessment: **ZERO RISK**
+- Type annotations don't affect runtime
+- Type guards validate same conditions as before
+- Extracted props maintain identical values
+- 100% test coverage maintained
+
+---
+
+## Key Principles Applied
+
+1. **Type Safety First:** Eliminated all `any` types and non-null assertions
+2. **Zero Logic Changes:** Purely structural improvements
+3. **Type Guards Over Assertions:** Used proper TypeScript narrowing
+4. **Test-Driven Verification:** All tests passing confirms no regressions
+5. **Idiomatic TypeScript:** Followed strict TypeScript best practices
+
+---
+
+## Files Created/Updated
+
+### Modified Files
+- ✅ `components/studio/controls/prompt-section.test.tsx`
+- ✅ `components/studio/features/generation/controls-view.tsx`
+
+### Documentation Files
+- ✅ `lint_reports/@typescript-eslint__no-unsafe-assignment.txt`
+- ✅ `lint_reports/@typescript-eslint__no-non-null-assertion.txt`
+- ✅ `lint_reports/COMPLETION_SUMMARY.md` (this file)
+
+---
+
+## Conclusion
+
+All targeted lint errors have been successfully fixed with:
+- ✅ Zero regressions
+- ✅ Zero logic changes
+- ✅ 100% test pass rate
+- ✅ Improved type safety
+- ✅ Better code quality
+
+The codebase is now more type-safe and maintainable while maintaining identical runtime behavior.
+
+**Status: COMPLETE AND VERIFIED** ✅
diff --git a/lint_results.json b/lint_results.json
new file mode 100644
index 0000000..19d6ff4
--- /dev/null
+++ b/lint_results.json
@@ -0,0 +1 @@
+[{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\favorites.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\favorites.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\feed.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\feed.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\history.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\invalidation.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\actions\\invalidation.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\config.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\favorites.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\favorites.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\feed.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\feed.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\history.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\cache\\history.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\_server\\convex\\client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\about\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\about\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\actions\\image-actions.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\enhance-prompt\\route.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\enhance-prompt\\route.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\images\\delete-bulk\\route.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\images\\delete\\route.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\suggestions\\route.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\suggestions\\route.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\api\\upload\\route.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\auth\\pollinations\\callback\\page.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\auth\\pollinations\\callback\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\contact\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\contact\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\faq\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\faq\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\favorites\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\favorites\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\feed\\[type]\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\feed\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\feed\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\history\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\history\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\limit-test\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\pricing\\checkout-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\pricing\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\pricing\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\pricing\\pricing-data.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\privacy\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\privacy\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\profile\\[username]\\page.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\profile\\[username]\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\profile\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\robots.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\settings\\layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\settings\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\settings\\page.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\settings\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-in\\[[...sign-in]]\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-in\\layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-in\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-up\\[[...sign-up]]\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-up\\layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sign-up\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\site-map\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\sitemap.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\solutions\\[slug]\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\solutions\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\studio\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\studio\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\support\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\support\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\terms\\loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\app\\terms\\page.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\clerk-theme-provider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\clerk-user-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\clerk-user-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\debug\\limit-tester.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":14,"column":9,"nodeType":"JSXOpeningElement","endLine":22,"endColumn":11,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\debug\\limit-tester.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\error-boundary.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\error-boundary.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\favorites-client.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-client.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-client.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-cta.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-cta.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-tabs.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\feed-tabs.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\history-client.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\history-client.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\history-filters.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\history-filters.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\image-history.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":26,"column":16,"nodeType":"JSXOpeningElement","endLine":26,"endColumn":54,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\image-history.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\paginated-image-grid.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\paginated-image-grid.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\selection-toolbar.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\selection-toolbar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\visibility-toggle.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gallery\\visibility-toggle.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\github-star-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\gl.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\particles.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\shaders\\dof-points-material.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\shaders\\simulation-material.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\shaders\\utils.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\gl\\shaders\\vignette-shader.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\advanced-settings.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\advanced-settings.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\generation-error.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\generation-error.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\image-display.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\image-display.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\quality-selector.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\image-generator\\quality-selector.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\images\\image-lightbox.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":139,"column":12,"nodeType":"JSXOpeningElement","endLine":139,"endColumn":82,"suppressions":[{"kind":"directive","justification":""}]},{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":150,"column":94,"nodeType":"JSXOpeningElement","endLine":150,"endColumn":132,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\images\\image-lightbox.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\images\\image-lightbox\\index.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\images\\image-lightbox\\lightbox-components.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\images\\image-lightbox\\lightbox-helpers.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\community-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\competitor-comparison.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\cta-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\faq-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\feature-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\features-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\floating-gallery.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\floating-orb.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\gl-background.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\hero-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\landing-header.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":26,"column":5,"nodeType":"JSXOpeningElement","endLine":26,"endColumn":43,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\landing-header.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\living-strip.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\model-badge.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\models-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\scroll-reveal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\showcase-image.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\showcase-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\landing\\value-prop-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\layout\\footer.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\layout\\header.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\layout\\header.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\connect-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\connect-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\global-reconnect-modal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\reconnect-modal.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-auth\\reconnect-modal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\low-balance-warning-dialog.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\low-balance-warning-dialog.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\pollen-balance-display-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\pollen-balance-display-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\pollen-balance-display.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pollen-balance\\pollen-balance-display.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pricing\\feature-detail-dialog.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\pricing\\model-value-showcase.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\profile\\profile-skeleton.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\providers\\convex-client-provider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\providers\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\providers\\pollen-auth-provider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\providers\\query-provider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\seo\\json-ld.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\byop-connected-section.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\byop-connected-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\connection-status-badge.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\connection-status-badge.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\not-connected-section.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card-components\\not-connected-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\api-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\appearance-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\content-preference-card.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\content-preference-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\profile-card.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\profile-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\star-repo-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\settings\\subscription-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-faq.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-features.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-hero-carousel.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-hero.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-showcase.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\solutions\\solution-steps.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\api-key-onboarding-modal.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\api-key-onboarding-modal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-action-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-action-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-config-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-config-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-image-grid.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":9,"column":9,"nodeType":"JSXOpeningElement","endLine":14,"endColumn":11,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-image-grid.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-mode-panel.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-mode-panel.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-progress-indicator.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\batch-progress-indicator.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\batch\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\canvas-wave.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-canvas.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-canvas.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-metadata.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-metadata.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-toolbar.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\image-toolbar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\canvas\\luminous-tide-effect.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\aspect-ratio-selector.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\aspect-ratio-selector.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\collapsible-section.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\collapsible-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\debug.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\dimension-controls.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\dimension-controls.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\dimension-header-controls.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\dimension-header-controls.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\megapixel-budget.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\megapixel-budget.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\model-selector.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\model-selector.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\options-panel.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\options-panel.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-header-controls.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-header-controls.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section-helpers.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section-helpers.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section-parts.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section-types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\prompt-section.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\reference-image-picker.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":28,"column":5,"nodeType":"JSXOpeningElement","endLine":28,"endColumn":116,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\reference-image-picker.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\reference-images-browser-modal.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":29,"column":5,"nodeType":"JSXOpeningElement","endLine":29,"endColumn":70,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\reference-images-browser-modal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\resolution-tier-selector.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\resolution-tier-selector.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\seed-control.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\seed-control.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\video-reference-image-picker.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":35,"column":9,"nodeType":"JSXOpeningElement","endLine":35,"endColumn":61,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\video-reference-image-picker.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\video-settings-panel.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\controls\\video-settings-panel.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\delete-image-dialog.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\delete-image-dialog.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\canvas\\canvas-feature.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\canvas\\canvas-feature.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\canvas\\canvas-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\canvas\\canvas-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\canvas\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\controls-feature.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\controls-feature.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\controls-view-badges.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\controls-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\controls-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\generation\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\history\\gallery-feature.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\history\\gallery-feature.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\history\\gallery-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\history\\gallery-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\history\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\creatable-styles.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-card.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-detail.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-detail.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-library-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-library-header.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-library.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-library.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-list-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\prompt-list-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\save-prompt-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\save-prompt-form.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\save-prompt-form.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt-library\\types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt\\prompt-feature.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt\\prompt-feature.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt\\prompt-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\features\\prompt\\prompt-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\gallery-thumbnail.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\gallery-thumbnail.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\image-gallery-parts.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\image-gallery.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\image-gallery.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\persistent-image-gallery.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\persistent-image-gallery.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\selection-context.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\selection-context.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\standard-gallery-grid.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\standard-gallery-grid.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\thumbnail-item.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\virtualized-gallery-grid.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\gallery\\virtualized-gallery-grid.tsx","messages":[],"suppressedMessages":[{"ruleId":"react-hooks/incompatible-library","severity":1,"message":"Compilation Skipped: Use of incompatible library\n\nThis API returns functions which cannot be memoized without leading to stale UI. To prevent this, by default React Compiler will skip memoizing this component/hook. However, you may see issues if values from this API are passed to other components/hooks that are memoized.\n\nC:\\Code\\pixelstream\\components\\studio\\gallery\\virtualized-gallery-grid.tsx:109:23\n  107 |\n  108 |   // eslint-disable-next-line react-hooks/incompatible-library\n> 109 |   const virtualizer = useVirtualizer({\n      |                       ^^^^^^^^^^^^^^ TanStack Virtual's `useVirtualizer()` API returns functions that cannot be memoized safely\n  110 |     count: rowCount,\n  111 |     getScrollElement,\n  112 |     estimateSize,","line":109,"column":23,"nodeType":null,"endLine":109,"endColumn":37,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\sidebar-content.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\sidebar-content.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\sidebar-generate-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\sidebar-generate-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\studio-layout.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\studio-layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\studio-shell.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\layout\\studio-shell.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-editor-drawer.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-editor-drawer.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-history-drawer.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-history-drawer.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-history-sheet.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-history-sheet.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-studio-layout.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-studio-layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-studio-navigation.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\mobile\\mobile-studio-navigation.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\upgrade-modal.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\upgrade-modal.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\upload-progress.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\studio\\upload-progress.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\subscription\\subscription-badge-view.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\subscription\\subscription-badge-view.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\subscription\\subscription-badge.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\subscription\\subscription-badge.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\theme-provider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\accordion.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\alert-dialog.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\alert.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\aspect-ratio.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\avatar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\badge.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\branded-loading.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\branded-loading.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\breadcrumb.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\button-group.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\button-group.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\calendar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\carousel.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\chart.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\checkbox.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\collapsible.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\command.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\context-menu.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\dialog.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\drawer.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\dropdown-menu.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\empty.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\empty.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\enhance-button.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\enhance-button.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\field.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\field.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\form.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\hover-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\image-card-parts.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\image-card.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\image-card.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\input-group.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\input-group.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\input-otp.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\input.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\item.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\item.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\kbd.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\kbd.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\label.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\masonry-grid.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\masonry-grid.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\media-player.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":13,"column":16,"nodeType":"JSXOpeningElement","endLine":13,"endColumn":90,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\media-player.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\menubar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\navigation-menu.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\pagination.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\popover.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\progress.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\radio-group.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\resizable.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\rich-tooltip.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\rich-tooltip.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\scroll-area.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\select.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sensitive-content-overlay.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sensitive-content-overlay.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\separator.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sheet.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-context.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-controls.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-group.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-layout.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-main.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sidebar\\sidebar-menu.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\skeleton.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\slider.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\slideshow.test.tsx","messages":[],"suppressedMessages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":8,"column":68,"nodeType":"JSXOpeningElement","endLine":8,"endColumn":118,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\slideshow.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\smart-video.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\smart-video.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\sonner.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\spinner.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\spinner.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\switch.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\table.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\tabs.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\textarea.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\toggle-group.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\toggle.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\tooltip.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\video-slideshow.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\components\\ui\\video-slideshow.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\auth.config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\batchGeneration.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\batchGeneration.ts","messages":[],"suppressedMessages":[{"ruleId":"@typescript-eslint/no-unused-vars","severity":1,"message":"'_' is assigned a value but never used.","line":357,"column":25,"nodeType":null,"messageId":"unusedVar","endLine":357,"endColumn":26,"suppressions":[{"kind":"directive","justification":""}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\batchProcessor.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\batchProcessor.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\contentAnalysis.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\contentAnalysis.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\convex.config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\crons.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\crons.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\detailsMigration.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\detailsMigration.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\favorites.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\favorites.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\follows.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\follows.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages\\helpers.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages\\internal.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages\\mutations.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages\\queries.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\generatedImages\\types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\http.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\http.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\batchTypes.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\batchTypes.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\crypto.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\crypto.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\groq.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\groq.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\nsfwDetection.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\nsfwDetection.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\openrouter.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\openrouter.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\pollinations.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\pollinations.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\promptInference.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\promptInference.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\providerHealth.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\providerHealth.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\providerHealthFunctions.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\providerHealthFunctions.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\r2.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\r2.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\retry.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\retry.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\subscription.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\subscription.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\videoPreview.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\videoPreview.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\videoThumbnail.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\videoThumbnail.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\visionAnalysis.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\lib\\visionAnalysis.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\orphanCleanup.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\orphanCleanup.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\orphanCleanupQueries.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\orphanCleanupQueries.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\promptInference.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\promptInference.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\promptLibrary.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\promptLibrary.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\rateLimits.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\rateLimits.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\referenceImages.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\referenceImages.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\schema.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\sensitivityMigration.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\sensitivityMigration.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\singleGeneration.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\singleGeneration.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\singleGenerationProcessor.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\singleGenerationProcessor.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\stripe.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\stripe.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\tempTagStats.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\tempTagStats.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\usernameGenerator.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\usernameGenerator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\users.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\convex\\users.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\eslint.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-delete-image.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-delete-image.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-set-visibility.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-set-visibility.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-upload-reference.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\mutations\\use-upload-reference.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-batch-generation.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-batch-generation.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-download-image.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-download-image.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-enhance-prompt.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-enhance-prompt.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-favorites.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-favorites.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-generate-image.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-generate-image.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-generation-history.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-generation-history.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-image-history.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-image-history.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-image-models.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-image-models.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-reference-images.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-reference-images.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\queries\\use-suggestions.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-api-card-state.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-api-card-state.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-aspect-ratio-dimensions.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-aspect-ratio-dimensions.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-auth-status.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-auth-status.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-balance.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-balance.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-batch-mode.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-batch-mode.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-dimension-constraints.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-dimension-constraints.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-dimension-info.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-dimension-info.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-estimated-cost.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-estimated-cost.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-generation-controls.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-generation-controls.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-generation-settings.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-generation-settings.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-display.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-display.ts","messages":[],"suppressedMessages":[{"ruleId":"react-hooks/set-state-in-effect","severity":2,"message":"Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\nC:\\Code\\pixelstream\\hooks\\use-image-display.ts:56:7\n  54 |       // This setState is intentional - we need to show loading state for the new image\n  55 |       // eslint-disable-next-line react-hooks/set-state-in-effect -- Intentional: sync loading state with new image\n> 56 |       setIsImageLoading(true);\n     |       ^^^^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect\n  57 |     } else if (currentId === null && previousId !== null) {\n  58 |       // Image was removed\n  59 |       previousImageId.current = null;","line":56,"column":7,"nodeType":null,"endLine":56,"endColumn":24,"suppressions":[{"kind":"directive","justification":"Intentional: sync loading state with new image"}]}],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-gallery-state.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-gallery-state.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-lightbox.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-lightbox.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-selection.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-image-selection.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-keyboard-shortcuts.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-keyboard-shortcuts.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-local-storage.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-local-storage.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-media-player.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-media-player.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-mobile.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-mobile.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-panel-visibility.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-panel-visibility.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-pollen-balance.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-pollen-balance.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-input.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-input.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-library-form.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-library-form.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-library.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-library.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-manager.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-prompt-manager.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-random-seed.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-random-seed.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-scroll-spy.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-scroll-spy.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-slideshow.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-smart-video.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-smart-video.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-studio-ui.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-studio-ui.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-subscription-status.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-subscription-status.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-video-reference-images.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-video-reference-images.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\hooks\\use-video-slideshow.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\ai-provider\\ai-provider.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\ai-provider\\ai-provider.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\ai-provider\\index.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\ai-provider\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\analytics.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\api\\image-api.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\api\\image-api.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\api\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\api\\models-api.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\api\\models-api.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\auth\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\auth\\pollinations-auth.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\auth\\pollinations-auth.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\cerebras\\cerebras-client.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\cerebras\\cerebras-client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\cerebras\\cerebras-config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\cerebras\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\api.config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\aspect-ratios.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\model-accessors.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\model-registry.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\model-types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\models.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\models.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\resolution-tiers.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\resolution-tiers.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\standard-resolutions.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\standard-resolutions.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\config\\stripe.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\constants.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\constants.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\index.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\pollinations-error-type-guards.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\pollinations-error.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\pollinations-error.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\toast-errors.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\errors\\toast-errors.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\feed-types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\image-models.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\image-models.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\openrouter\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\openrouter\\openrouter-client.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\openrouter\\openrouter-client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\openrouter\\openrouter-config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\balance-service.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\balance-service.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\constants.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\constants.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\context.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\context.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\hooks.test.tsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\hooks.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollen-auth\\storage.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollinations-api.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\pollinations-api.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\enhancement-prompts.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\enhancement-prompts.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\prompt-enhancer.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\prompt-enhancer.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\suggestion-generator.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\prompt-enhancement\\suggestion-generator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\query\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\query\\query-client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\query\\query-keys.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\pollinations-pricing.schema.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\pollinations-pricing.schema.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\pollinations.schema.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\pollinations.schema.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\server-generate.schema.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\schemas\\server-generate.schema.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\security\\production-key-validation.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo-config.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo-config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\resources.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solution-types.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-architecture.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-art-generator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-blueprints.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-graphic-design.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-image-generator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-interior-design.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-marketing-tools.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-photography.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-print-on-demand.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\ai-video-generator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\seo\\solutions\\transparent-png-generator.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\storage\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\storage\\r2-client.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\storage\\r2-client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\storage\\retry.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\storage\\retry.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\stripe\\client.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\stripe\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\stripe\\stripe.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\test-utils.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\utils.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\utils.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\utils\\index.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\utils\\set-input-value-with-undo.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\lib\\utils\\set-input-value-with-undo.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\next.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\postcss.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\proxy.test.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\proxy.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\scripts\\audit-tests.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\scripts\\fix-test-types.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\scripts\\generate-lint-docs.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\scripts\\process-lint-json.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\types\\pollinations.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\vitest.config.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Code\\pixelstream\\vitest.setup.ts","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]}]
\ No newline at end of file
diff --git a/pull-conflicts.md b/pull-conflicts.md
new file mode 100644
index 0000000..d94e451
--- /dev/null
+++ b/pull-conflicts.md
@@ -0,0 +1,136 @@
+User@DESKTOP-EV6QN3L MINGW64 /c/Code/pixelstream (main)
+$ git stash -u
+warning: LF will be replaced by CRLF in lint_report.txt.
+The file will have its original line endings in your working directory
+warning: LF will be replaced by CRLF in lint_reports/max-lines.txt.
+The file will have its original line endings in your working directory
+warning: LF will be replaced by CRLF in scripts/fix-test-types.mjs.
+The file will have its original line endings in your working directory
+warning: LF will be replaced by CRLF in scripts/process-lint-json.ts.
+The file will have its original line endings in your working directory
+Saved working directory and index state WIP on main: 87041aa chore: add tests
+
+User@DESKTOP-EV6QN3L MINGW64 /c/Code/pixelstream (main)
+$ git pull
+Updating 87041aa..444c520
+Fast-forward
+ convex/batchGeneration.test.ts             | 121 ----------
+ convex/batchProcessor.test.ts              | 282 ----------------------
+ convex/contentAnalysis.test.ts             |  61 -----
+ convex/crons.test.ts                       |  59 -----
+ convex/detailsMigration.test.ts            |  82 -------
+ convex/favorites.test.ts                   | 189 ---------------
+ convex/follows.test.ts                     | 156 ------------
+ convex/generatedImages.test.ts             | 327 -------------------------
+ convex/http.test.ts                        | 123 ----------
+ convex/lib/crypto.test.ts                  |  47 ----
+ convex/lib/groq.test.ts                    | 207 ----------------
+ convex/lib/nsfwDetection.test.ts           |  53 ----
+ convex/lib/openrouter.test.ts              | 346 --------------------------
+ convex/lib/pollinations.test.ts            | 376 -----------------------------
+ convex/lib/promptInference.test.ts         |  69 ------
+ convex/lib/providerHealth.test.ts          | 193 ---------------
+ convex/lib/providerHealthFunctions.test.ts | 159 ------------
+ convex/lib/r2.test.ts                      |  69 ------
+ convex/lib/retry.test.ts                   | 198 ---------------
+ convex/lib/subscription.test.ts            | 201 ---------------
+ convex/lib/videoPreview.test.ts            | 121 ----------
+ convex/lib/videoThumbnail.test.ts          | 129 ----------
+ convex/lib/visionAnalysis.test.ts          |  57 -----
+ convex/orphanCleanup.test.ts               | 197 ---------------
+ convex/orphanCleanupQueries.test.ts        | 105 --------
+ convex/promptInference.test.ts             | 115 ---------
+ convex/promptLibrary.test.ts               | 249 -------------------
+ convex/rateLimits.test.ts                  | 106 --------
+ convex/referenceImages.test.ts             | 131 ----------
+ convex/sensitivityMigration.test.ts        | 128 ----------
+ convex/singleGeneration.test.ts            | 189 ---------------
+ convex/singleGenerationProcessor.test.ts   | 133 ----------
+ convex/stripe.test.ts                      | 145 -----------
+ convex/tempTagStats.test.ts                | 241 ------------------
+ convex/thumbnailMigration.test.ts          | 181 --------------
+ convex/thumbnailMigrationActions.test.ts   | 163 -------------
+ convex/usernameGenerator.test.ts           | 206 ----------------
+ convex/users.test.ts                       | 337 --------------------------
+ eslint.config.mjs                          |  12 +
+ tsconfig.json                              |   4 +-
+ 40 files changed, 15 insertions(+), 6252 deletions(-)
+ delete mode 100644 convex/batchGeneration.test.ts
+ delete mode 100644 convex/batchProcessor.test.ts
+ delete mode 100644 convex/contentAnalysis.test.ts
+ delete mode 100644 convex/crons.test.ts
+ delete mode 100644 convex/detailsMigration.test.ts
+ delete mode 100644 convex/favorites.test.ts
+ delete mode 100644 convex/follows.test.ts
+ delete mode 100644 convex/generatedImages.test.ts
+ delete mode 100644 convex/http.test.ts
+ delete mode 100644 convex/lib/crypto.test.ts
+ delete mode 100644 convex/lib/groq.test.ts
+ delete mode 100644 convex/lib/nsfwDetection.test.ts
+ delete mode 100644 convex/lib/openrouter.test.ts
+ delete mode 100644 convex/lib/pollinations.test.ts
+ delete mode 100644 convex/lib/promptInference.test.ts
+ delete mode 100644 convex/lib/providerHealth.test.ts
+ delete mode 100644 convex/lib/providerHealthFunctions.test.ts
+ delete mode 100644 convex/lib/r2.test.ts
+ delete mode 100644 convex/lib/retry.test.ts
+ delete mode 100644 convex/lib/subscription.test.ts
+ delete mode 100644 convex/lib/videoPreview.test.ts
+ delete mode 100644 convex/lib/videoThumbnail.test.ts
+ delete mode 100644 convex/lib/visionAnalysis.test.ts
+ delete mode 100644 convex/orphanCleanup.test.ts
+ delete mode 100644 convex/orphanCleanupQueries.test.ts
+ delete mode 100644 convex/promptInference.test.ts
+ delete mode 100644 convex/promptLibrary.test.ts
+ delete mode 100644 convex/rateLimits.test.ts
+ delete mode 100644 convex/referenceImages.test.ts
+ delete mode 100644 convex/sensitivityMigration.test.ts
+ delete mode 100644 convex/singleGeneration.test.ts
+ delete mode 100644 convex/singleGenerationProcessor.test.ts
+ delete mode 100644 convex/stripe.test.ts
+ delete mode 100644 convex/tempTagStats.test.ts
+ delete mode 100644 convex/thumbnailMigration.test.ts
+ delete mode 100644 convex/thumbnailMigrationActions.test.ts
+ delete mode 100644 convex/usernameGenerator.test.ts
+ delete mode 100644 convex/users.test.ts
+
+User@DESKTOP-EV6QN3L MINGW64 /c/Code/pixelstream (main)
+$ git stash pop
+Removing use-image-lightbox-old.tsx
+Auto-merging tsconfig.json
+Removing scripts/optimize-solutions.ts
+Removing scripts/migrate-local.ts
+Removing image-lightbox-old.tsx
+Auto-merging eslint.config.mjs
+CONFLICT (content): Merge conflict in eslint.config.mjs
+CONFLICT (modify/delete): convex/users.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/users.test.ts left in tree.
+CONFLICT (modify/delete): convex/usernameGenerator.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/usernameGenerator.test.ts left in tree.
+Removing convex/thumbnailMigrationActions.ts
+Removing convex/thumbnailMigration.ts
+CONFLICT (modify/delete): convex/stripe.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/stripe.test.ts left in tree.
+CONFLICT (modify/delete): convex/singleGenerationProcessor.test.ts deleted in Updated upstream and modified in Stashed 
+changes. Version Stashed changes of convex/singleGenerationProcessor.test.ts left in tree.
+CONFLICT (modify/delete): convex/singleGeneration.test.ts deleted in Updated upstream and modified in Stashed changes. 
+Version Stashed changes of convex/singleGeneration.test.ts left in tree.
+CONFLICT (modify/delete): convex/sensitivityMigration.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/sensitivityMigration.test.ts left in tree.
+CONFLICT (modify/delete): convex/referenceImages.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/referenceImages.test.ts left in tree.
+CONFLICT (modify/delete): convex/promptLibrary.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/promptLibrary.test.ts left in tree.
+CONFLICT (modify/delete): convex/promptInference.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/promptInference.test.ts left in tree.
+CONFLICT (modify/delete): convex/orphanCleanupQueries.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/orphanCleanupQueries.test.ts left in tree.
+CONFLICT (modify/delete): convex/orphanCleanup.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/orphanCleanup.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/videoThumbnail.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/lib/videoThumbnail.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/videoPreview.test.ts deleted in Updated upstream and modified in Stashed changes. 
+Version Stashed changes of convex/lib/videoPreview.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/subscription.test.ts deleted in Updated upstream and modified in Stashed changes. 
+Version Stashed changes of convex/lib/subscription.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/providerHealthFunctions.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/lib/providerHealthFunctions.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/openrouter.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/lib/openrouter.test.ts left in tree.
+CONFLICT (modify/delete): convex/lib/groq.test.ts deleted in Updated upstream and modified in Stashed changes. Version 
+Stashed changes of convex/lib/groq.test.ts left in tree.
+CONFLICT (modify/delete): convex/http.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/http.test.ts left in tree.
+CONFLICT (modify/delete): convex/generatedImages.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/generatedImages.test.ts left in tree.
+CONFLICT (modify/delete): convex/follows.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/follows.test.ts left in tree.
+CONFLICT (modify/delete): convex/favorites.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/favorites.test.ts left in tree.
+CONFLICT (modify/delete): convex/crons.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/crons.test.ts left in tree.
+CONFLICT (modify/delete): convex/batchProcessor.test.ts deleted in Updated upstream and modified in Stashed changes. Version Stashed changes of convex/batchProcessor.test.ts left in tree.
+The stash entry is kept in case you need it again.
\ No newline at end of file
diff --git a/scripts/fix-all-test-any.ps1 b/scripts/fix-all-test-any.ps1
new file mode 100644
index 0000000..5f2d75e
--- /dev/null
+++ b/scripts/fix-all-test-any.ps1
@@ -0,0 +1,64 @@
+# PowerShell script to fix common 'any' type issues in test files
+
+$testFiles = Get-ChildItem -Recurse -Include *.test.ts,*.test.tsx | Where-Object { $_.FullName -notmatch 'node_modules' }
+
+foreach ($file in $testFiles) {
+    Write-Host "Processing $($file.Name)..."
+    $content = [System.IO.File]::ReadAllText($file.FullName)
+    $modified = $false
+    
+    # Replace @ts-ignore with @ts-expect-error
+    if ($content -match '@ts-ignore') {
+        $content = $content -replace '@ts-ignore', '@ts-expect-error'
+        $modified = $true
+    }
+    
+    # Fix common mock function signatures - simple patterns only
+    if ($content -match '\(config: any\)') {
+        $content = $content -replace '\(config: any\)', '(config: Record<string, unknown>)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(props: any\)') {
+        $content = $content -replace '\(props: any\)', '(props: Record<string, unknown>)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(name: any\)') {
+        $content = $content -replace '\(name: any\)', '(name: string)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(status: any\)') {
+        $content = $content -replace '\(status: any\)', '(status: number)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(err: any\)') {
+        $content = $content -replace '\(err: any\)', '(err: Error)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(error: any\)') {
+        $content = $content -replace '\(error: any\)', '(error: Error)'
+        $modified = $true
+    }
+    
+    if ($content -match '\(children: any\)') {
+        $content = $content -replace '\(children: any\)', '(children: React.ReactNode)'
+        $modified = $true
+    }
+    
+    if ($content -match '\{ children \}: any') {
+        $content = $content -replace '\{ children \}: any', '{ children }: { children: React.ReactNode }'
+        $modified = $true
+    }
+    
+    if ($modified) {
+        [System.IO.File]::WriteAllText($file.FullName, $content)
+        Write-Host "  Fixed $($file.Name)" -ForegroundColor Green
+    }
+}
+
+Write-Host ""
+Write-Host "Done!" -ForegroundColor Cyan
diff --git a/scripts/fix-test-types.mjs b/scripts/fix-test-types.mjs
new file mode 100644
index 0000000..0fa184f
--- /dev/null
+++ b/scripts/fix-test-types.mjs
@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+/**
+ * Script to fix common TypeScript linting errors in test files
+ */
+
+import fs from 'fs';
+
+// List of test files to fix (from lint output)
+const testFiles = [
+  'convex/favorites.test.ts',
+  'convex/follows.test.ts',
+  'convex/generatedImages.test.ts',
+  'convex/http.test.ts',
+  'convex/lib/providerHealthFunctions.test.ts',
+  'convex/lib/subscription.test.ts',
+  'convex/lib/videoPreview.test.ts',
+  'convex/lib/videoThumbnail.test.ts',
+  'convex/orphanCleanup.test.ts',
+  'convex/orphanCleanupQueries.test.ts',
+  'convex/promptInference.test.ts',
+  'convex/promptLibrary.test.ts',
+  'convex/referenceImages.test.ts',
+  'convex/sensitivityMigration.test.ts',
+  'convex/singleGeneration.test.ts',
+  'convex/singleGenerationProcessor.test.ts',
+  'convex/stripe.test.ts',
+  'convex/thumbnailMigration.test.ts',
+  'convex/thumbnailMigrationActions.test.ts',
+  'convex/users.test.ts',
+  'hooks/mutations/use-set-visibility.test.tsx',
+  'hooks/queries/use-batch-generation.test.ts',
+  'hooks/use-prompt-library-form.test.ts',
+  'hooks/use-smart-video.test.tsx',
+  'lib/errors/toast-errors.test.ts',
+  'lib/storage/r2-client.test.ts',
+];
+
+function fixFile(filePath) {
+  console.warn(`Fixing ${filePath}...`);
+  let content = fs.readFileSync(filePath, 'utf8');
+  let modified = false;
+
+  // Replace @ts-ignore with @ts-expect-error
+  if (content.includes('@ts-ignore')) {
+    content = content.replace(/@ts-ignore/g, '@ts-expect-error');
+    modified = true;
+  }
+
+  // Fix common mock patterns - replace `: any` with proper types in mocks
+  const mockPatterns = [
+    // Mock context
+    { from: /let mockCtx: any;/g, to: 'let mockCtx: { runMutation: ReturnType<typeof vi.fn>; runQuery: ReturnType<typeof vi.fn>; };' },
+    { from: /const mockCtx: any =/g, to: 'const mockCtx: { runMutation: ReturnType<typeof vi.fn>; runQuery: ReturnType<typeof vi.fn>; } =' },
+    
+    // Mock functions with any parameters
+    { from: /\(config: any\)/g, to: '(config: { handler: (...args: unknown[]) => unknown })' },
+    { from: /\(props: any\)/g, to: '(props: Record<string, unknown>)' },
+    { from: /\(name: any\)/g, to: '(name: string)' },
+    { from: /\(status: any\)/g, to: '(status: number)' },
+    { from: /\(err: any\)/g, to: '(err: Error)' },
+    { from: /\(error: any\)/g, to: '(error: Error)' },
+    
+    // ID types - add import if needed
+    { from: / as any as Id</g, to: ' as unknown as Id<' },
+    { from: /"[^"]+_id" as any/g, to: (match) => match.replace(' as any', ' as unknown as Id<"generatedImages">') },
+  ];
+
+  mockPatterns.forEach(({ from, to }) => {
+    if (content.match(from)) {
+      content = content.replace(from, to);
+      modified = true;
+    }
+  });
+
+  // Add Id import for convex files if needed
+  if (filePath.startsWith('convex/') && content.includes('Id<') && !content.includes('import type { Id }')) {
+    const importLine = 'import type { Id } from "./_generated/dataModel";';
+    // Add after other imports
+    const lines = content.split('\n');
+    const lastImportIndex = lines.findLastIndex(line => line.startsWith('import '));
+    if (lastImportIndex >= 0) {
+      lines.splice(lastImportIndex + 1, 0, importLine);
+      content = lines.join('\n');
+      modified = true;
+    }
+  }
+
+  if (modified) {
+    fs.writeFileSync(filePath, content, 'utf8');
+    console.warn(`  ✓ Fixed ${filePath}`);
+  } else {
+    console.warn(`  - No changes needed for ${filePath}`);
+  }
+}
+
+// Process all files
+testFiles.forEach(fixFile);
+
+console.warn('\nDone!');
diff --git a/scripts/process-lint-json.ts b/scripts/process-lint-json.ts
new file mode 100644
index 0000000..27a2d42
--- /dev/null
+++ b/scripts/process-lint-json.ts
@@ -0,0 +1,110 @@
+import * as fs from "fs";
+import * as path from "path";
+
+interface LintMessage {
+  ruleId: string | null;
+  severity: number;
+  message: string;
+  line: number;
+  column: number;
+}
+
+interface LintResult {
+  filePath: string;
+  messages: LintMessage[];
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isLintMessage(value: unknown): value is LintMessage {
+  return (
+    isRecord(value) &&
+    (typeof value.ruleId === "string" || value.ruleId === null) &&
+    typeof value.severity === "number" &&
+    typeof value.message === "string" &&
+    typeof value.line === "number" &&
+    typeof value.column === "number"
+  );
+}
+
+function isLintResult(value: unknown): value is LintResult {
+  return (
+    isRecord(value) &&
+    typeof value.filePath === "string" &&
+    Array.isArray(value.messages) &&
+    value.messages.every(isLintMessage)
+  );
+}
+
+function parseJson(text: string): unknown | null {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+
+const main = () => {
+  const reportPath = path.resolve("lint_results.json");
+  const outputDir = path.resolve("lint_reports");
+
+  if (!fs.existsSync(reportPath)) {
+    console.error("lint_results.json not found!");
+    process.exit(1);
+  }
+
+  const rawData = fs.readFileSync(reportPath, "utf-8");
+  let results: LintResult[];
+  try {
+    const parsed = parseJson(rawData);
+    if (!parsed || !Array.isArray(parsed) || !parsed.every(isLintResult)) {
+      throw new Error("Invalid lint JSON structure");
+    }
+    results = parsed;
+  } catch (e) {
+    console.error("Failed to parse JSON:", e);
+    process.exit(1);
+  }
+
+  // Ensure output directory exists
+  if (fs.existsSync(outputDir)) {
+    fs.rmSync(outputDir, { recursive: true, force: true });
+  }
+  fs.mkdirSync(outputDir);
+
+  const errorsByRule: Record<string, string[]> = {};
+
+  results.forEach((result) => {
+    // Make path relative for cleaner output
+    const relativePath = path.relative(process.cwd(), result.filePath);
+
+    result.messages.forEach((msg) => {
+      const ruleIdValue = msg.ruleId ?? "";
+      const ruleId = ruleIdValue.length > 0 ? ruleIdValue : "unknown-rule";
+      if (!errorsByRule[ruleId]) {
+        errorsByRule[ruleId] = [];
+      }
+
+      // Format: File:line:col - Message
+      const line = `${relativePath}:${msg.line}:${msg.column} - ${msg.message}`;
+      errorsByRule[ruleId].push(line);
+    });
+  });
+
+  // Write files
+  Object.keys(errorsByRule).forEach((ruleId) => {
+    const lines = errorsByRule[ruleId];
+    const safeRuleId = ruleId.replace(/\//g, "__"); // Replace / with __ for filenames
+    const filePath = path.join(outputDir, `${safeRuleId}.txt`);
+
+    const content = `Rule: ${ruleId}\nTotal Errors: ${lines.length}\n\n` + lines.join("\n");
+    fs.writeFileSync(filePath, content);
+    console.warn(`Created ${filePath} (${lines.length} errors)`);
+  });
+
+  console.warn(`\nProcessing complete. Reports generated in ${outputDir}`);
+};
+
+main();
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
new file mode 100644
index 0000000..16e8bde
--- /dev/null
+++ b/tsconfig.eslint.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index e13ee08..2879c21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,8 +40,6 @@
     ".next/dev/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules",
-    "**/*.test.ts",
-    "**/*.test.tsx"
+    "node_modules"
   ]
 }
\ No newline at end of file