Hide debug logs in production

- Create logger utility that only logs in development mode
- Update wrenClient.ts to use logger instead of console.log/warn
- Update OffsetOrder.tsx to use logger for debug messages
- Update config.ts to only log environment loading in dev mode
- Keeps console.error for actual errors (always shown)

Fixes: Console clutter in production deployment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

.claude/settings.local.json

@@ -0,0 +1,21 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git pull:*)",
+      "mcp__serena__list_dir",
+      "Bash(cat:*)",
+      "mcp__zen__planner",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "mcp__zen__debug",
+      "mcp__zen__consensus",
+      "mcp__serena__find_symbol",
+      "mcp__serena__search_for_pattern",
+      "mcp__serena__activate_project",
+      "mcp__serena__get_symbols_overview"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.serena/.gitignore

@@ -0,0 +1 @@
+/cache

.serena/project.yml

@@ -0,0 +1,83 @@
+# list of languages for which language servers are started; choose from:
+#   al               bash             clojure          cpp              csharp           csharp_omnisharp
+#   dart             elixir           elm              erlang           fortran          go
+#   haskell          java             julia            kotlin           lua              markdown
+#   nix              perl             php              python           python_jedi      r
+#   rego             ruby             ruby_solargraph  rust             scala            swift
+#   terraform        typescript       typescript_vts   zig
+# Note:
+#   - For C, use cpp
+#   - For JavaScript, use typescript
+# Special requirements:
+#   - csharp: Requires the presence of a .sln file in the project folder.
+# When using multiple languages, the first language server that supports a given file will be used for that file.
+# The first language is the default language and the respective language server will be used as a fallback.
+# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
+languages:
+- typescript
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: "utf-8"
+
+# whether to use the project's gitignore file to ignore files
+# Added on 2025-04-07
+ignore_all_files_in_gitignore: true
+
+# list of additional paths to ignore
+# same syntax as gitignore, so you can use * and **
+# Was previously called `ignored_dirs`, please update your config if you are using that.
+# Added (renamed) on 2025-04-07
+ignored_paths: []
+
+# whether the project is in read-only mode
+# If set to true, all editing tools will be disabled and attempts to use them will result in an error
+# Added on 2025-04-18
+read_only: false
+
+# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
+# Below is the complete list of tools for convenience.
+# To make sure you have the latest list of tools, and to view their descriptions, 
+# execute `uv run scripts/print_tool_overview.py`.
+#
+#  * `activate_project`: Activates a project by name.
+#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
+#  * `create_text_file`: Creates/overwrites a file in the project directory.
+#  * `delete_lines`: Deletes a range of lines within a file.
+#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
+#  * `execute_shell_command`: Executes a shell command.
+#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
+#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
+#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
+#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
+#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
+#  * `initial_instructions`: Gets the initial instructions for the current project.
+#     Should only be used in settings where the system prompt cannot be set,
+#     e.g. in clients you have no control over, like Claude Desktop.
+#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
+#  * `insert_at_line`: Inserts content at a given line in a file.
+#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
+#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
+#  * `list_memories`: Lists memories in Serena's project-specific memory store.
+#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
+#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
+#  * `read_file`: Reads a file within the project directory.
+#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
+#  * `remove_project`: Removes a project from the Serena configuration.
+#  * `replace_lines`: Replaces a range of lines within a file with new content.
+#  * `replace_symbol_body`: Replaces the full definition of a symbol.
+#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
+#  * `search_for_pattern`: Performs a search for a pattern in the project.
+#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
+#  * `switch_modes`: Activates modes by providing a list of their names
+#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
+#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
+#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
+#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
+excluded_tools: []
+
+# initial prompt for the project. It will always be given to the LLM upon activating the project
+# (contrary to the memories, which are loaded on demand).
+initial_prompt: ""
+
+project_name: "puffin-app"

src/api/wrenClient.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { OffsetOrder, Portfolio } from '../types';
 import { config } from '../utils/config';
+import { logger } from '../utils/logger';
 
 // Default portfolio for fallback
 const DEFAULT_PORTFOLIO: Portfolio = {
@@ -35,7 +36,7 @@ const createApiClient = () => {
     throw new Error('Wren API token is not configured');
   }
 
-  console.log('[wrenClient] Creating API client with key:', config.wrenApiKey ? '********' + config.wrenApiKey.slice(-4) : 'MISSING');
+  logger.log('[wrenClient] Creating API client with key:', config.wrenApiKey ? '********' + config.wrenApiKey.slice(-4) : 'MISSING');
 
   const client = axios.create({
     // Updated base URL to match the tutorial exactly
@@ -54,7 +55,7 @@ const createApiClient = () => {
       if (!config.headers?.Authorization) {
         throw new Error('API token is required');
       }
-      console.log('[wrenClient] Making API request to:', config.url);
+      logger.log('[wrenClient] Making API request to:', config.url);
       return config;
     },
     (error: Error) => {
@@ -66,21 +67,21 @@ const createApiClient = () => {
   // Add response interceptor for error handling
   client.interceptors.response.use(
     (response: AxiosResponse) => {
-      console.log('[wrenClient] Received API response:', response.status);
+      logger.log('[wrenClient] Received API response:', response.status);
       return response;
     },
     (error: unknown) => {
       if (axios.isAxiosError(error)) {
         if (error.code === 'ECONNABORTED') {
-          console.warn('[wrenClient] Request timeout, using fallback data');
+          logger.warn('[wrenClient] Request timeout, using fallback data');
           return Promise.resolve({ data: { portfolios: [DEFAULT_PORTFOLIO] } });
         }
         if (!error.response) {
-          console.warn('[wrenClient] Network error, using fallback data');
+          logger.warn('[wrenClient] Network error, using fallback data');
           return Promise.resolve({ data: { portfolios: [DEFAULT_PORTFOLIO] } });
         }
         if (error.response.status === 401) {
-          console.warn('[wrenClient] Authentication failed, using fallback data');
+          logger.warn('[wrenClient] Authentication failed, using fallback data');
           return Promise.resolve({ data: { portfolios: [DEFAULT_PORTFOLIO] } });
         }
         console.error('[wrenClient] API error:', error.response?.status, error.response?.data);
@@ -109,18 +110,18 @@ const logError = (error: unknown) => {
 export async function getPortfolios(): Promise<Portfolio[]> {
   try {
     if (!config.wrenApiKey) {
-      console.warn('[wrenClient] No Wren API token configured, using fallback portfolio');
+      logger.warn('[wrenClient] No Wren API token configured, using fallback portfolio');
       return [DEFAULT_PORTFOLIO];
     }
 
-    console.log('[wrenClient] Getting portfolios with token:', config.wrenApiKey ? '********' + config.wrenApiKey.slice(-4) : 'MISSING');
+    logger.log('[wrenClient] Getting portfolios with token:', config.wrenApiKey ? '********' + config.wrenApiKey.slice(-4) : 'MISSING');
     
     const api = createApiClient();
     // Removed the /api prefix to match the working example
     const response = await api.get('/portfolios');
     
     if (!response.data?.portfolios?.length) {
-      console.warn('[wrenClient] No portfolios returned from API, using fallback');
+      logger.warn('[wrenClient] No portfolios returned from API, using fallback');
       return [DEFAULT_PORTFOLIO];
     }
 
@@ -179,7 +180,7 @@ export async function getPortfolios(): Promise<Portfolio[]> {
     });
   } catch (error) {
     logError(error);
-    console.warn('[wrenClient] Failed to fetch portfolios from API, using fallback');
+    logger.warn('[wrenClient] Failed to fetch portfolios from API, using fallback');
     return [DEFAULT_PORTFOLIO];
   }
 }
@@ -195,7 +196,7 @@ export async function createOffsetOrder(
       throw new Error('Carbon offset service is currently unavailable. Please contact support.');
     }
     
-    console.log(`[wrenClient] Creating offset order: portfolio=${portfolioId}, tons=${tons}, dryRun=${dryRun}`);
+    logger.log(`[wrenClient] Creating offset order: portfolio=${portfolioId}, tons=${tons}, dryRun=${dryRun}`);
     
     const api = createApiClient();
     // Removed the /api prefix to match the working example
@@ -207,7 +208,7 @@ export async function createOffsetOrder(
     });
 
     // Add detailed response logging
-    console.log('[wrenClient] Offset order response:', 
+    logger.log('[wrenClient] Offset order response:', 
                 response.status, 
                 response.data ? 'has data' : 'no data');
     
@@ -222,9 +223,9 @@ export async function createOffsetOrder(
     }
     
     // Log to help diagnose issues
-    console.log('[wrenClient] Order data keys:', Object.keys(order).join(', '));
+    logger.log('[wrenClient] Order data keys:', Object.keys(order).join(', '));
     if (order.portfolio) {
-      console.log('[wrenClient] Portfolio data keys:', Object.keys(order.portfolio).join(', '));
+      logger.log('[wrenClient] Portfolio data keys:', Object.keys(order.portfolio).join(', '));
     }
     
     // Get price from API response which uses cost_per_ton

src/components/OffsetOrder.tsx

@@ -6,6 +6,7 @@ import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetPro
 import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies';
 import { config } from '../utils/config';
 import { sendFormspreeEmail } from '../utils/email';
+import { logger } from '../utils/logger';
 
 interface Props {
   tons: number;
@@ -103,11 +104,11 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
       );
       
       if (puffinPortfolio) {
-        console.log('[OffsetOrder] Found Puffin portfolio with ID:', puffinPortfolio.id);
+        logger.log('[OffsetOrder] Found Puffin portfolio with ID:', puffinPortfolio.id);
         setPortfolio(puffinPortfolio);
       } else {
         // Default to first portfolio if no puffin portfolio found
-        console.log('[OffsetOrder] No Puffin portfolio found, using first available portfolio with ID:', allPortfolios[0].id);
+        logger.log('[OffsetOrder] No Puffin portfolio found, using first available portfolio with ID:', allPortfolios[0].id);
         setPortfolio(allPortfolios[0]);
       }
     } catch (err) {
@@ -155,19 +156,19 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
       e.preventDefault();
       e.stopPropagation();
     }
-    console.log('Opening project details for:', project.name);
+    logger.log('Opening project details for:', project.name);
     setSelectedProject(project);
   }, []);
 
   // Additional handler for direct button clicks
   const handleProjectButtonClick = useCallback((project: OffsetProject) => {
-    console.log('Button click - Opening project details for:', project.name);
+    logger.log('Button click - Opening project details for:', project.name);
     setSelectedProject(project);
   }, []);
 
   // Simple lightbox close handler
   const handleCloseLightbox = () => {
-    console.log('Closing lightbox');
+    logger.log('Closing lightbox');
     setSelectedProject(null);
   };
 

src/utils/config.ts

@@ -15,7 +15,10 @@ const getEnv = (key: string): string => {
     // In Docker, the env.sh script has already removed the VITE_ prefix
     const envValue = window.env[varName];
     if (envValue) {
-      console.log(`Using ${varName} from window.env`);
+      // Only log in development
+      if (import.meta.env.DEV) {
+        console.log(`Using ${varName} from window.env`);
+      }
       return envValue;
     }
   }

src/utils/logger.ts

@@ -0,0 +1,23 @@
+import { config } from './config';
+
+/**
+ * Simple logger that only logs in development mode
+ */
+export const logger = {
+  log: (...args: any[]) => {
+    if (!config.isProduction) {
+      console.log(...args);
+    }
+  },
+
+  error: (...args: any[]) => {
+    // Always log errors
+    console.error(...args);
+  },
+
+  warn: (...args: any[]) => {
+    if (!config.isProduction) {
+      console.warn(...args);
+    }
+  }
+};