From ecf8f9d01ad15e060614ae5aaa41dd8594f5afe9 Mon Sep 17 00:00:00 2001
From: Behnam <Do you really need my email>
Date: Thu, 25 Dec 2025 17:28:40 +0000
Subject: [PATCH] refactor: extract magic strings to centralized constants file

- Create src/lib/constants.ts with all magic strings:
  - STORAGE_KEYS for localStorage keys
  - PNG_WORKFLOW_KEY for workflow metadata
  - NODE_PATHS for all node type paths
  - DRAG_DATA_TYPES for drag-and-drop data transfer
  - SIZE_LIMITS for file size thresholds
  - ERROR_MESSAGES with factory functions
  - MIME_TYPES and image format helpers
  - ASPECT_RATIOS and model name constants

- Update 12 files to use centralized constants:
  - workflow-storage.ts
  - useClipboard.ts
  - png-metadata.ts
  - graph-executor.ts
  - WorkflowCanvas.tsx
  - ContextMenu.tsx
  - ImageHistory.tsx
  - SettingsDialog.tsx
  - ErrorBoundary.tsx
  - ImageHistoryContext.tsx
  - prompt-templates.ts
  - Test files

- Fix lint errors in test files (unused variables, empty blocks)

Co-Authored-By: Behnam & Claude Code
---
 src/components/ContextMenu.tsx      |  13 +-
 src/components/ErrorBoundary.tsx    |   3 +-
 src/components/ImageHistory.tsx     |   7 +-
 src/components/SettingsDialog.tsx   |  12 +-
 src/components/WorkflowCanvas.tsx   |   7 +-
 src/context/ImageHistoryContext.tsx |   8 +-
 src/hooks/useClipboard.ts           |   7 +-
 src/lib/constants.ts                | 189 ++++++++++++++++++++++++++++
 src/lib/graph-executor.test.ts      |  30 ++---
 src/lib/graph-executor.ts           |   5 +-
 src/lib/png-metadata.ts             |   7 +-
 src/lib/prompt-templates.ts         |   8 +-
 src/lib/workflow-storage.test.ts    |   5 +-
 src/lib/workflow-storage.ts         |  42 +++----
 14 files changed, 269 insertions(+), 74 deletions(-)
 create mode 100644 src/lib/constants.ts

diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 6f0a108..0de8940 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
+import { NODE_PATHS } from '../lib/constants'
 
 interface ContextMenuItem {
   id: string
@@ -309,14 +310,14 @@ export function getCanvasContextMenuItems(options: {
       id: 'add-node',
       label: 'Add Node',
       submenu: [
-        { id: 'add-prompt', label: 'Prompt', onClick: () => options.onAddNode?.('input/prompt') },
-        { id: 'add-image', label: 'Image Source', onClick: () => options.onAddNode?.('input/image') },
-        { id: 'add-seed', label: 'Seed', onClick: () => options.onAddNode?.('input/seed') },
+        { id: 'add-prompt', label: 'Prompt', onClick: () => options.onAddNode?.(NODE_PATHS.PROMPT) },
+        { id: 'add-image', label: 'Image Source', onClick: () => options.onAddNode?.(NODE_PATHS.IMAGE_SOURCE) },
+        { id: 'add-seed', label: 'Seed', onClick: () => options.onAddNode?.(NODE_PATHS.SEED) },
         { id: 'sep', label: '', separator: true },
-        { id: 'add-fal', label: 'Fal Flux', onClick: () => options.onAddNode?.('generation/fal-flux') },
-        { id: 'add-gemini', label: 'Gemini', onClick: () => options.onAddNode?.('generation/gemini') },
+        { id: 'add-fal', label: 'Fal Flux', onClick: () => options.onAddNode?.(NODE_PATHS.FAL_FLUX) },
+        { id: 'add-gemini', label: 'Gemini', onClick: () => options.onAddNode?.(NODE_PATHS.GEMINI) },
         { id: 'sep2', label: '', separator: true },
-        { id: 'add-output', label: 'Image Output', onClick: () => options.onAddNode?.('output/image') },
+        { id: 'add-output', label: 'Image Output', onClick: () => options.onAddNode?.(NODE_PATHS.IMAGE_OUTPUT) },
       ],
     },
   ]
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index c957a89..bc1567c 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,4 +1,5 @@
 import { Component, type ReactNode, type ErrorInfo } from 'react'
+import { STORAGE_KEYS } from '../lib/constants'
 
 interface Props {
   children: ReactNode
@@ -114,7 +115,7 @@ export class CanvasErrorBoundary extends ErrorBoundary {
               <button
                 onClick={() => {
                   // Try to recover autosave
-                  const autosave = localStorage.getItem('nanonodebanana_autosave')
+                  const autosave = localStorage.getItem(STORAGE_KEYS.AUTOSAVE)
                   if (autosave) {
                     console.log('Autosave data found:', autosave)
                     alert('Autosave data found in console. Please copy it before reloading.')
diff --git a/src/components/ImageHistory.tsx b/src/components/ImageHistory.tsx
index c4a73ba..a2eaf2b 100644
--- a/src/components/ImageHistory.tsx
+++ b/src/components/ImageHistory.tsx
@@ -1,6 +1,7 @@
 import { useState, useCallback, useMemo } from 'react'
 import { useImageHistory } from '../hooks/useImageHistory'
 import type { HistoryImage } from '../context/ImageHistoryContext'
+import { NODE_PATHS, DRAG_DATA_TYPES } from '../lib/constants'
 
 const VISIBLE_COUNT = 5 // Number of images to show in collapsed fan view
 
@@ -28,9 +29,9 @@ export function ImageHistory({ onImageDragStart }: ImageHistoryProps) {
   // Handle drag start for image
   const handleDragStart = useCallback(
     (e: React.DragEvent, image: HistoryImage) => {
-      e.dataTransfer.setData('node-type', 'input/image')
-      e.dataTransfer.setData('image-url', image.imageUrl)
-      e.dataTransfer.setData('image-history-id', image.id)
+      e.dataTransfer.setData(DRAG_DATA_TYPES.NODE_TYPE, NODE_PATHS.IMAGE_SOURCE)
+      e.dataTransfer.setData(DRAG_DATA_TYPES.IMAGE_URL, image.imageUrl)
+      e.dataTransfer.setData(DRAG_DATA_TYPES.IMAGE_HISTORY_ID, image.id)
       e.dataTransfer.effectAllowed = 'copy'
       onImageDragStart?.(image)
     },
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index e4bf047..c044cdf 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
+import { STORAGE_KEYS } from '../lib/constants'
 
 interface SettingsDialogProps {
   isOpen: boolean
@@ -29,7 +30,6 @@ const DEFAULT_SETTINGS: Settings = {
   gridSize: 10,
 }
 
-const STORAGE_KEY = 'nanonodebanana_settings'
 
 /**
  * Settings dialog for configuring the workflow editor.
@@ -42,7 +42,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
 
   // Load settings on mount
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
+    const stored = localStorage.getItem(STORAGE_KEYS.SETTINGS)
     if (stored) {
       try {
         const parsed = JSON.parse(stored)
@@ -55,7 +55,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
 
   // Handle save
   const handleSave = useCallback(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+    localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(settings))
     setSaved(true)
     setTimeout(() => setSaved(false), 2000)
   }, [settings])
@@ -64,7 +64,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
   const handleReset = useCallback(() => {
     if (confirm('Reset all settings to defaults?')) {
       setSettings(DEFAULT_SETTINGS)
-      localStorage.removeItem(STORAGE_KEY)
+      localStorage.removeItem(STORAGE_KEYS.SETTINGS)
     }
   }, [])
 
@@ -336,7 +336,7 @@ export function useSettings(): Settings {
   const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS)
 
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
+    const stored = localStorage.getItem(STORAGE_KEYS.SETTINGS)
     if (stored) {
       try {
         const parsed = JSON.parse(stored)
@@ -348,7 +348,7 @@ export function useSettings(): Settings {
 
     // Listen for storage changes
     const handleStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY && e.newValue) {
+      if (e.key === STORAGE_KEYS.SETTINGS && e.newValue) {
         try {
           const parsed = JSON.parse(e.newValue)
           setSettings({ ...DEFAULT_SETTINGS, ...parsed })
diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index f09151e..8c92db3 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/src/components/WorkflowCanvas.tsx
@@ -6,8 +6,7 @@ import { useClipboard } from '../hooks/useClipboard'
 import { registerAllNodes } from '../nodes'
 import { loadAutosave, enableAutosave, serialiseGraph } from '../lib/workflow-storage'
 import { Minimap } from './Minimap'
-
-const AUTOSAVE_KEY = 'nanonodebanana_autosave'
+import { NODE_PATHS, STORAGE_KEYS } from '../lib/constants'
 
 interface WorkflowCanvasProps {
   onCanvasReady?: (canvas: LGraphCanvas) => void
@@ -219,7 +218,7 @@ export function WorkflowCanvas({ onCanvasReady }: WorkflowCanvasProps) {
         graph: serialiseGraph(graph),
         savedAt: new Date().toISOString(),
       }
-      localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(data))
+      localStorage.setItem(STORAGE_KEYS.AUTOSAVE, JSON.stringify(data))
     }
 
     initGraph()
@@ -304,7 +303,7 @@ export function WorkflowCanvas({ onCanvasReady }: WorkflowCanvasProps) {
     const y = (event.clientY - rect.top - canvas.ds.offset[1]) / canvas.ds.scale
 
     const LiteGraph = liteGraphRef.current
-    const node = LiteGraph.createNode('input/image')
+    const node = LiteGraph.createNode(NODE_PATHS.IMAGE_SOURCE)
 
     if (node) {
       node.pos = [x, y]
diff --git a/src/context/ImageHistoryContext.tsx b/src/context/ImageHistoryContext.tsx
index c127c7c..ce9a14b 100644
--- a/src/context/ImageHistoryContext.tsx
+++ b/src/context/ImageHistoryContext.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
   type ReactNode,
 } from 'react'
+import { STORAGE_KEYS } from '../lib/constants'
 
 /**
  * Represents a single image entry in the history.
@@ -30,7 +31,6 @@ interface ImageHistoryState {
   maxImages: number
 }
 
-const STORAGE_KEY = 'nanonodebanana_image_history'
 const MAX_IMAGES = 100
 
 const ImageHistoryContext = createContext<ImageHistoryState | undefined>(undefined)
@@ -47,7 +47,7 @@ export function ImageHistoryProvider({ children }: ImageHistoryProviderProps) {
   const [images, setImages] = useState<HistoryImage[]>(() => {
     // Load from localStorage on initial render
     try {
-      const stored = localStorage.getItem(STORAGE_KEY)
+      const stored = localStorage.getItem(STORAGE_KEYS.IMAGE_HISTORY)
       if (stored) {
         const parsed = JSON.parse(stored)
         // Validate and return stored images
@@ -70,7 +70,7 @@ export function ImageHistoryProvider({ children }: ImageHistoryProviderProps) {
         // Keep image URLs (they're usually blob: or short data URIs)
         // For large base64, we'd need IndexedDB (future enhancement)
       }))
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(toStore))
+      localStorage.setItem(STORAGE_KEYS.IMAGE_HISTORY, JSON.stringify(toStore))
     } catch {
       // localStorage quota exceeded - silently fail
       // Future: migrate to IndexedDB for larger storage
@@ -100,7 +100,7 @@ export function ImageHistoryProvider({ children }: ImageHistoryProviderProps) {
 
   const clearHistory = useCallback(() => {
     setImages([])
-    localStorage.removeItem(STORAGE_KEY)
+    localStorage.removeItem(STORAGE_KEYS.IMAGE_HISTORY)
   }, [])
 
   const value: ImageHistoryState = {
diff --git a/src/hooks/useClipboard.ts b/src/hooks/useClipboard.ts
index c156226..1ac3366 100644
--- a/src/hooks/useClipboard.ts
+++ b/src/hooks/useClipboard.ts
@@ -1,5 +1,6 @@
 import { useEffect, useCallback, useRef } from 'react'
 import type { LGraph, LGraphCanvas, LiteGraph as LiteGraphType } from 'litegraph.js'
+import { NODE_PATHS } from '../lib/constants'
 
 interface ClipboardOptions {
   graph: LGraph | null
@@ -38,7 +39,7 @@ export function useClipboard({ graph, canvas, liteGraph, onNodeCreated }: Clipbo
     const centerY = (canvas.canvas.height / 2 - canvas.ds.offset[1]) / canvas.ds.scale
 
     // Create ImageSource node
-    const node = liteGraph.createNode('input/image')
+    const node = liteGraph.createNode(NODE_PATHS.IMAGE_SOURCE)
     if (!node) return
 
     node.pos = [centerX - 100, centerY - 75]
@@ -115,7 +116,7 @@ export function useClipboard({ graph, canvas, liteGraph, onNodeCreated }: Clipbo
       const centerX = (canvas.canvas.width / 2 - canvas.ds.offset[0]) / canvas.ds.scale
       const centerY = (canvas.canvas.height / 2 - canvas.ds.offset[1]) / canvas.ds.scale
 
-      const node = liteGraph.createNode('input/image')
+      const node = liteGraph.createNode(NODE_PATHS.IMAGE_SOURCE)
       if (node) {
         node.pos = [centerX - 100, centerY - 75]
         node.properties = { ...node.properties, url: trimmed, source: 'url' }
@@ -131,7 +132,7 @@ export function useClipboard({ graph, canvas, liteGraph, onNodeCreated }: Clipbo
     const centerX = (canvas.canvas.width / 2 - canvas.ds.offset[0]) / canvas.ds.scale
     const centerY = (canvas.canvas.height / 2 - canvas.ds.offset[1]) / canvas.ds.scale
 
-    const node = liteGraph.createNode('input/prompt')
+    const node = liteGraph.createNode(NODE_PATHS.PROMPT)
     if (node) {
       node.pos = [centerX - 150, centerY - 60]
       node.properties = { ...node.properties, text: trimmed }
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..bae59db
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,189 @@
+/**
+ * Central constants file for the NanoNodeBanana application.
+ * All magic strings and repeated values should be defined here.
+ */
+
+// ============================================================================
+// LOCAL STORAGE KEYS
+// ============================================================================
+
+export const STORAGE_KEYS = {
+  CURRENT_WORKFLOW: 'nanonodebanana_current_workflow',
+  AUTOSAVE: 'nanonodebanana_autosave',
+  PROMPT_TEMPLATES: 'nanonodebanana_prompt_templates',
+  SETTINGS: 'nanonodebanana_settings',
+  IMAGE_HISTORY: 'nanonodebanana_image_history',
+} as const
+
+export const PNG_WORKFLOW_KEY = 'nanonodebanana:workflow'
+
+// ============================================================================
+// NODE TYPE PATHS
+// ============================================================================
+
+export const NODE_PATHS = {
+  // Input nodes
+  PROMPT: 'input/prompt',
+  IMAGE_SOURCE: 'input/image',
+  SEED: 'input/seed',
+  NUMBER: 'input/number',
+
+  // Processing nodes
+  COMBINE_PROMPTS: 'processing/combine',
+  STYLE_PRESET: 'processing/style',
+  NEGATIVE_PROMPT: 'processing/negative',
+  IMAGE_RESIZE: 'processing/resize',
+  IMAGE_CROP: 'processing/crop',
+  IMAGE_BLEND: 'processing/blend',
+  IMAGE_ADJUST: 'processing/adjust',
+  IMAGE_FILTER: 'processing/filter',
+  ANNOTATION: 'processing/annotate',
+  SPLIT_GRID: 'processing/split-grid',
+
+  // Generation nodes
+  GEMINI: 'generation/gemini',
+  FAL_FLUX: 'generation/fal-flux',
+  FAL_VIDEO: 'generation/fal-video',
+  NANO_BANANA: 'generation/nano-banana',
+  NANO_BANANA_EDIT: 'generation/nano-banana-edit',
+  NANO_BANANA_PRO: 'generation/nano-banana-pro',
+  NANO_BANANA_PRO_EDIT: 'generation/nano-banana-pro-edit',
+
+  // Output nodes
+  IMAGE_OUTPUT: 'output/image',
+  SAVE_IMAGE: 'output/save',
+  GALLERY: 'output/gallery',
+} as const
+
+export type NodePath = (typeof NODE_PATHS)[keyof typeof NODE_PATHS]
+
+// ============================================================================
+// IMAGE FORMATS AND MIME TYPES
+// ============================================================================
+
+export const MIME_TYPES = {
+  PNG: 'image/png',
+  JPEG: 'image/jpeg',
+  WEBP: 'image/webp',
+  GIF: 'image/gif',
+  BMP: 'image/bmp',
+  SVG: 'image/svg+xml',
+} as const
+
+export const ALLOWED_UPLOAD_TYPES = [
+  MIME_TYPES.PNG,
+  MIME_TYPES.JPEG,
+  MIME_TYPES.WEBP,
+  MIME_TYPES.GIF,
+] as const
+
+export const IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'] as const
+
+/**
+ * Creates a data URI from base64 content.
+ */
+export function createDataUri(base64: string, mimeType: string = MIME_TYPES.PNG): string {
+  return `data:${mimeType};base64,${base64}`
+}
+
+/**
+ * Extracts base64 content from a data URI.
+ */
+export function extractBase64FromDataUri(dataUri: string): string | null {
+  const match = dataUri.match(/^data:image\/\w+;base64,(.+)$/)
+  return match ? match[1] ?? null : null
+}
+
+/**
+ * Checks if a string is a valid data URI.
+ */
+export function isDataUri(value: string): boolean {
+  return value.startsWith('data:')
+}
+
+/**
+ * Gets the MIME type from a data URI.
+ */
+export function getMimeTypeFromDataUri(dataUri: string): string | null {
+  const match = dataUri.match(/^data:(image\/\w+);base64,/)
+  return match ? match[1] ?? null : null
+}
+
+// ============================================================================
+// ASPECT RATIOS
+// ============================================================================
+
+export const ASPECT_RATIOS = [
+  '1:1',
+  '16:9',
+  '9:16',
+  '4:3',
+  '3:4',
+  '21:9',
+  '9:21',
+  '3:2',
+  '2:3',
+] as const
+
+export type AspectRatio = (typeof ASPECT_RATIOS)[number]
+
+// ============================================================================
+// MODEL NAMES
+// ============================================================================
+
+export const GEMINI_MODELS = {
+  IMAGEN_3: 'imagen-3',
+  FLASH: 'gemini-2.0-flash',
+} as const
+
+export const FAL_MODELS = {
+  FLUX_PRO: 'flux-pro',
+  FLUX_DEV: 'flux-dev',
+  FLUX_SCHNELL: 'flux-schnell',
+} as const
+
+export const NANO_BANANA_MODELS = {
+  NANO_BANANA: 'nano-banana',
+  NANO_BANANA_PRO: 'nano-banana-pro',
+} as const
+
+// ============================================================================
+// DRAG AND DROP DATA TRANSFER TYPES
+// ============================================================================
+
+export const DRAG_DATA_TYPES = {
+  NODE_TYPE: 'node-type',
+  IMAGE_URL: 'image-url',
+  IMAGE_HISTORY_ID: 'image-history-id',
+  PROMPT_TEMPLATE: 'application/x-prompt-template',
+} as const
+
+// ============================================================================
+// SIZE LIMITS
+// ============================================================================
+
+export const SIZE_LIMITS = {
+  MAX_UPLOAD_SIZE: 10 * 1024 * 1024, // 10MB
+  MAX_BASE64_LENGTH: 14 * 1024 * 1024, // ~10MB after base64 encoding
+  MAX_AUTOSAVE_SIZE: 2 * 1024 * 1024, // 2MB
+  LARGE_STRING_THRESHOLD: 10000, // 10KB - threshold for "large" base64 strings
+} as const
+
+// ============================================================================
+// ERROR MESSAGES
+// ============================================================================
+
+export const ERROR_MESSAGES = {
+  NO_IMAGES_GENERATED: 'No images generated',
+  NODE_NOT_FOUND: (nodeId: number) => `Node ${nodeId} not found in graph`,
+  MISSING_FAL_KEY: 'FAL_KEY environment variable is not set',
+  MISSING_GEMINI_KEY: 'GEMINI_API_KEY environment variable is not set',
+  INVALID_WORKFLOW_FILE: 'Invalid workflow file: missing graph data',
+  QUOTA_EXCEEDED: (key: string) => `localStorage quota exceeded for key: ${key}`,
+} as const
+
+// ============================================================================
+// AUTOSAVE PLACEHOLDERS
+// ============================================================================
+
+export const AUTOSAVE_PLACEHOLDER = '[IMAGE_DATA_STRIPPED_FOR_AUTOSAVE]'
diff --git a/src/lib/graph-executor.test.ts b/src/lib/graph-executor.test.ts
index 16299b4..4cacb17 100644
--- a/src/lib/graph-executor.test.ts
+++ b/src/lib/graph-executor.test.ts
@@ -217,12 +217,9 @@ describe('graph-executor', () => {
 
   describe('cancel', () => {
     it('should stop execution when cancelled', async () => {
-      let executionCount = 0
-
       const slowNode = createMockNode(1, {
         outputs: [{ name: 'out', type: 'string' }],
         onExecute: vi.fn().mockImplementation(async () => {
-          executionCount++
           await new Promise(resolve => setTimeout(resolve, 100))
           return { out: 'done' }
         }),
@@ -230,10 +227,7 @@ describe('graph-executor', () => {
 
       const dependentNode = createMockNode(2, {
         inputs: [{ name: 'in', type: 'string', link: 1 }],
-        onExecute: vi.fn().mockImplementation(async () => {
-          executionCount++
-          return {}
-        }),
+        onExecute: vi.fn().mockResolvedValue({}),
       })
 
       const graph = createMockGraph([slowNode, dependentNode], {
@@ -271,9 +265,10 @@ describe('graph-executor', () => {
       const graph = createMockGraph([node], {})
       const engine = createExecutionEngine()
 
-      // Execute
-      for await (const _ of engine.execute(graph as never)) {
-        // consume
+      // Execute - consume all execution contexts
+      const contexts = []
+      for await (const ctx of engine.execute(graph as never)) {
+        contexts.push(ctx)
       }
 
       const results = engine.getResults()
@@ -318,11 +313,13 @@ describe('graph-executor', () => {
       const engine = createExecutionEngine()
 
       // First execute full graph to cache results
-      for await (const _ of engine.execute(graph as never)) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for await (const _ctx of engine.execute(graph as never)) { /* consume */ }
       executionOrder.length = 0 // Reset
 
       // Now execute from node B
-      for await (const _ of engine.executeFromNode(graph as never, 2)) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for await (const _ctx of engine.executeFromNode(graph as never, 2)) { /* consume */ }
 
       // Only B and C should execute (A is upstream and cached)
       expect(executionOrder).toEqual([2, 3])
@@ -362,7 +359,8 @@ describe('graph-executor', () => {
       const engine = createExecutionEngine()
 
       // Execute only node B
-      for await (const _ of engine.executeNodeOnly(graph as never, 2)) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for await (const _ctx of engine.executeNodeOnly(graph as never, 2)) { /* consume */ }
 
       // Only node B should have executed
       expect(nodeA.onExecute).not.toHaveBeenCalled()
@@ -404,10 +402,12 @@ describe('graph-executor', () => {
       const gen2 = engine.execute(graph as never)
 
       // Consume first generator - should stop early
-      for await (const _ of gen1) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for await (const _ctx of gen1) { /* consume */ }
 
       // Consume second generator
-      for await (const _ of gen2) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      for await (const _ctx of gen2) { /* consume */ }
 
       // Only the second execution should have fully completed the node
       // (first was cancelled when second started)
diff --git a/src/lib/graph-executor.ts b/src/lib/graph-executor.ts
index d1b13df..5d7e6ce 100644
--- a/src/lib/graph-executor.ts
+++ b/src/lib/graph-executor.ts
@@ -1,6 +1,7 @@
 import type { LGraph, LGraphNode } from 'litegraph.js'
 import type { ExecutionContext, ExecutionEngine } from '../types/nodes'
 import { NODE_MODE } from '../nodes/base/BaseNode'
+import { ERROR_MESSAGES } from './constants'
 
 /**
  * Topologically sorts nodes in the graph for execution order.
@@ -289,7 +290,7 @@ export function createExecutionEngine(): ExecutionEngine {
       yield {
         nodeId: String(startNodeId),
         status: 'error',
-        error: new Error(`Node ${startNodeId} not found in graph`),
+        error: new Error(ERROR_MESSAGES.NODE_NOT_FOUND(startNodeId)),
       }
       return
     }
@@ -444,7 +445,7 @@ export function createExecutionEngine(): ExecutionEngine {
       yield {
         nodeId: String(nodeId),
         status: 'error',
-        error: new Error(`Node ${nodeId} not found in graph`),
+        error: new Error(ERROR_MESSAGES.NODE_NOT_FOUND(nodeId)),
       }
       return
     }
diff --git a/src/lib/png-metadata.ts b/src/lib/png-metadata.ts
index a2cb41e..35b8e17 100644
--- a/src/lib/png-metadata.ts
+++ b/src/lib/png-metadata.ts
@@ -6,8 +6,9 @@
  * We use a custom tEXt chunk to store workflow JSON.
  */
 
+import { PNG_WORKFLOW_KEY } from './constants'
+
 const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10])
-const WORKFLOW_KEY = 'nanonodebanana:workflow'
 
 /**
  * CRC32 calculation for PNG chunks
@@ -186,7 +187,7 @@ export function extractWorkflowFromPng(pngData: Uint8Array): WorkflowMetadata |
     for (const chunk of chunks) {
       if (chunk.type === 'tEXt') {
         const textData = parseTextChunk(chunk.data)
-        if (textData && textData.key === WORKFLOW_KEY) {
+        if (textData && textData.key === PNG_WORKFLOW_KEY) {
           return JSON.parse(textData.value)
         }
       }
@@ -244,7 +245,7 @@ export function embedWorkflowInPng(
 
   // Create metadata JSON
   const metadataJson = JSON.stringify(metadata)
-  const textChunk = createTextChunk(WORKFLOW_KEY, metadataJson)
+  const textChunk = createTextChunk(PNG_WORKFLOW_KEY, metadataJson)
 
   // Build new PNG: everything before IEND + our chunk + IEND
   const beforeIend = pngData.slice(0, iendChunk.offset)
diff --git a/src/lib/prompt-templates.ts b/src/lib/prompt-templates.ts
index 6461416..84aa070 100644
--- a/src/lib/prompt-templates.ts
+++ b/src/lib/prompt-templates.ts
@@ -5,6 +5,8 @@
  * Templates can contain variables like {subject} that are replaced at insertion time.
  */
 
+import { STORAGE_KEYS } from './constants'
+
 export interface PromptTemplate {
   id: string
   name: string
@@ -312,14 +314,12 @@ export const BUILT_IN_TEMPLATES: PromptTemplate[] = [
   },
 ]
 
-const STORAGE_KEY = 'nanonodebanana_prompt_templates'
-
 /**
  * Load user-created templates from localStorage.
  */
 export function loadUserTemplates(): PromptTemplate[] {
   try {
-    const stored = localStorage.getItem(STORAGE_KEY)
+    const stored = localStorage.getItem(STORAGE_KEYS.PROMPT_TEMPLATES)
     if (!stored) return []
     return JSON.parse(stored)
   } catch {
@@ -333,7 +333,7 @@ export function loadUserTemplates(): PromptTemplate[] {
  */
 export function saveUserTemplates(templates: PromptTemplate[]): void {
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(templates))
+    localStorage.setItem(STORAGE_KEYS.PROMPT_TEMPLATES, JSON.stringify(templates))
   } catch (error) {
     console.error('Failed to save user templates:', error)
   }
diff --git a/src/lib/workflow-storage.test.ts b/src/lib/workflow-storage.test.ts
index 411e317..f6b325d 100644
--- a/src/lib/workflow-storage.test.ts
+++ b/src/lib/workflow-storage.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { STORAGE_KEYS } from './constants'
 
 // Test the helper functions by importing the module
 // Note: We test the exported functions and mock dependencies
@@ -41,7 +42,7 @@ describe('workflow-storage', () => {
 
     it('should handle invalid JSON gracefully', async () => {
       const { loadFromLocalStorage } = await import('./workflow-storage')
-      localStorage.setItem('nanonodebanana_current_workflow', 'invalid json{')
+      localStorage.setItem(STORAGE_KEYS.CURRENT_WORKFLOW, 'invalid json{')
       const loaded = loadFromLocalStorage()
       expect(loaded).toBeNull()
     })
@@ -76,7 +77,7 @@ describe('workflow-storage', () => {
         savedAt: new Date().toISOString(),
         stripped: true,
       }
-      localStorage.setItem('nanonodebanana_autosave', JSON.stringify(autosaveData))
+      localStorage.setItem(STORAGE_KEYS.AUTOSAVE, JSON.stringify(autosaveData))
 
       const loaded = loadAutosave()
       expect(loaded?.name).toBe('Autosave Test')
diff --git a/src/lib/workflow-storage.ts b/src/lib/workflow-storage.ts
index c58b189..ca7bdba 100644
--- a/src/lib/workflow-storage.ts
+++ b/src/lib/workflow-storage.ts
@@ -1,10 +1,12 @@
 import type { LGraph } from 'litegraph.js'
 import type { WorkflowData } from '../types/nodes'
 import { workflowApi } from './api-client'
-
-const LOCAL_STORAGE_KEY = 'nanonodebanana_current_workflow'
-const AUTOSAVE_KEY = 'nanonodebanana_autosave'
-const MAX_AUTOSAVE_SIZE = 2 * 1024 * 1024 // 2MB limit for autosave
+import {
+  STORAGE_KEYS,
+  SIZE_LIMITS,
+  AUTOSAVE_PLACEHOLDER,
+  isDataUri,
+} from './constants'
 
 /**
  * Serialises a Litegraph graph to a JSON-compatible object.
@@ -26,7 +28,7 @@ function stripLargeDataFromGraph(graphData: object): object {
       if (node.widgets_values && Array.isArray(node.widgets_values)) {
         node.widgets_values = node.widgets_values.map((value: unknown) => {
           if (typeof value === 'string' && isLargeBase64(value)) {
-            return '[IMAGE_DATA_STRIPPED_FOR_AUTOSAVE]'
+            return AUTOSAVE_PLACEHOLDER
           }
           return value
         })
@@ -37,7 +39,7 @@ function stripLargeDataFromGraph(graphData: object): object {
         for (const key of Object.keys(node.properties)) {
           const value = node.properties[key]
           if (typeof value === 'string' && isLargeBase64(value)) {
-            node.properties[key] = '[IMAGE_DATA_STRIPPED_FOR_AUTOSAVE]'
+            node.properties[key] = AUTOSAVE_PLACEHOLDER
           }
         }
       }
@@ -51,10 +53,8 @@ function stripLargeDataFromGraph(graphData: object): object {
  * Checks if a string is a large base64-encoded data string.
  */
 function isLargeBase64(value: string): boolean {
-  // Check for data URI pattern or raw base64 that's larger than 10KB
-  const isDataUri = value.startsWith('data:')
-  const isLongString = value.length > 10000
-  return isDataUri && isLongString
+  // Check for data URI pattern or raw base64 that's larger than threshold
+  return isDataUri(value) && value.length > SIZE_LIMITS.LARGE_STRING_THRESHOLD
 }
 
 /**
@@ -100,17 +100,17 @@ export function saveToLocalStorage(graph: LGraph, name: string): boolean {
   const jsonData = JSON.stringify(data)
 
   // If data is too large, try stripping image data first
-  if (jsonData.length > MAX_AUTOSAVE_SIZE) {
+  if (jsonData.length > SIZE_LIMITS.MAX_AUTOSAVE_SIZE) {
     const strippedData = {
       name,
       graph: stripLargeDataFromGraph(graphData),
       savedAt: new Date().toISOString(),
       stripped: true,
     }
-    return safeSetLocalStorage(LOCAL_STORAGE_KEY, JSON.stringify(strippedData))
+    return safeSetLocalStorage(STORAGE_KEYS.CURRENT_WORKFLOW, JSON.stringify(strippedData))
   }
 
-  return safeSetLocalStorage(LOCAL_STORAGE_KEY, jsonData)
+  return safeSetLocalStorage(STORAGE_KEYS.CURRENT_WORKFLOW, jsonData)
 }
 
 /**
@@ -121,7 +121,7 @@ export function loadFromLocalStorage(): {
   graph: object
   savedAt: string
 } | null {
-  const data = localStorage.getItem(LOCAL_STORAGE_KEY)
+  const data = localStorage.getItem(STORAGE_KEYS.CURRENT_WORKFLOW)
   if (!data) return null
 
   try {
@@ -135,7 +135,7 @@ export function loadFromLocalStorage(): {
  * Clears the current workflow from local storage.
  */
 export function clearLocalStorage(): void {
-  localStorage.removeItem(LOCAL_STORAGE_KEY)
+  localStorage.removeItem(STORAGE_KEYS.CURRENT_WORKFLOW)
 }
 
 /**
@@ -184,15 +184,15 @@ export function enableAutosave(graph: LGraph, name: string): () => void {
     const jsonData = JSON.stringify(data)
 
     // Skip autosave silently if data is too large
-    if (jsonData.length > MAX_AUTOSAVE_SIZE) {
+    if (jsonData.length > SIZE_LIMITS.MAX_AUTOSAVE_SIZE) {
       return
     }
 
-    const success = safeSetLocalStorage(AUTOSAVE_KEY, jsonData)
+    const success = safeSetLocalStorage(STORAGE_KEYS.AUTOSAVE, jsonData)
     if (!success) {
       // Try to clear old autosave and retry
-      localStorage.removeItem(AUTOSAVE_KEY)
-      safeSetLocalStorage(AUTOSAVE_KEY, jsonData)
+      localStorage.removeItem(STORAGE_KEYS.AUTOSAVE)
+      safeSetLocalStorage(STORAGE_KEYS.AUTOSAVE, jsonData)
     }
 
     // Update hash only on successful save
@@ -210,7 +210,7 @@ export function loadAutosave(): {
   graph: object
   savedAt: string
 } | null {
-  const data = localStorage.getItem(AUTOSAVE_KEY)
+  const data = localStorage.getItem(STORAGE_KEYS.AUTOSAVE)
   if (!data) return null
 
   try {
@@ -224,7 +224,7 @@ export function loadAutosave(): {
  * Clears the autosave data.
  */
 export function clearAutosave(): void {
-  localStorage.removeItem(AUTOSAVE_KEY)
+  localStorage.removeItem(STORAGE_KEYS.AUTOSAVE)
 }
 
 /**