feat: standardize logging across UI components

- Replaced console.log and console.error statements with logger methods from @automaker/utils in various UI components, ensuring consistent log formatting and improved readability.
- Enhanced error handling by utilizing logger methods to provide clearer context for issues encountered during operations.
- Updated multiple views and hooks to integrate the new logging system, improving maintainability and debugging capabilities.

This update significantly enhances the observability of UI components, facilitating easier troubleshooting and monitoring.

apps/server/tests/unit/lib/logger.test.ts

@@ -1,5 +1,12 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { LogLevel, createLogger, getLogLevel, setLogLevel } from '@automaker/utils';
+import {
+  LogLevel,
+  createLogger,
+  getLogLevel,
+  setLogLevel,
+  setColorsEnabled,
+  setTimestampsEnabled,
+} from '@automaker/utils';
 
 describe('logger.ts', () => {
   let consoleSpy: {
@@ -11,6 +18,9 @@ describe('logger.ts', () => {
 
   beforeEach(() => {
     originalLogLevel = getLogLevel();
+    // Disable colors and timestamps for predictable test output
+    setColorsEnabled(false);
+    setTimestampsEnabled(false);
     consoleSpy = {
       log: vi.spyOn(console, 'log').mockImplementation(() => {}),
       warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
@@ -51,7 +61,8 @@ describe('logger.ts', () => {
 
       logger.info('test message');
 
-      expect(consoleSpy.log).toHaveBeenCalledWith('[TestContext]', 'test message');
+      // New format: 'LEVEL [Context]' as first arg, then message
+      expect(consoleSpy.log).toHaveBeenCalledWith('INFO  [TestContext]', 'test message');
     });
 
     it('should log error at all log levels', () => {
@@ -59,7 +70,7 @@ describe('logger.ts', () => {
 
       setLogLevel(LogLevel.ERROR);
       logger.error('error message');
-      expect(consoleSpy.error).toHaveBeenCalledWith('[Test]', 'error message');
+      expect(consoleSpy.error).toHaveBeenCalledWith('ERROR [Test]', 'error message');
     });
 
     it('should log warn when level is WARN or higher', () => {
@@ -71,7 +82,7 @@ describe('logger.ts', () => {
 
       setLogLevel(LogLevel.WARN);
       logger.warn('warn message 2');
-      expect(consoleSpy.warn).toHaveBeenCalledWith('[Test]', 'warn message 2');
+      expect(consoleSpy.warn).toHaveBeenCalledWith('WARN  [Test]', 'warn message 2');
     });
 
     it('should log info when level is INFO or higher', () => {
@@ -83,7 +94,7 @@ describe('logger.ts', () => {
 
       setLogLevel(LogLevel.INFO);
       logger.info('info message 2');
-      expect(consoleSpy.log).toHaveBeenCalledWith('[Test]', 'info message 2');
+      expect(consoleSpy.log).toHaveBeenCalledWith('INFO  [Test]', 'info message 2');
     });
 
     it('should log debug only when level is DEBUG', () => {
@@ -95,7 +106,7 @@ describe('logger.ts', () => {
 
       setLogLevel(LogLevel.DEBUG);
       logger.debug('debug message 2');
-      expect(consoleSpy.log).toHaveBeenCalledWith('[Test]', '[DEBUG]', 'debug message 2');
+      expect(consoleSpy.log).toHaveBeenCalledWith('DEBUG [Test]', 'debug message 2');
     });
 
     it('should pass multiple arguments to log functions', () => {
@@ -103,7 +114,27 @@ describe('logger.ts', () => {
       const logger = createLogger('Multi');
 
       logger.info('message', { data: 'value' }, 123);
-      expect(consoleSpy.log).toHaveBeenCalledWith('[Multi]', 'message', { data: 'value' }, 123);
+      expect(consoleSpy.log).toHaveBeenCalledWith(
+        'INFO  [Multi]',
+        'message',
+        { data: 'value' },
+        123
+      );
+    });
+
+    it('should include timestamps when enabled', () => {
+      setTimestampsEnabled(true);
+      setLogLevel(LogLevel.INFO);
+      const logger = createLogger('Timestamp');
+
+      logger.info('test');
+
+      // First arg should contain ISO timestamp format
+      const firstArg = consoleSpy.log.mock.calls[0][0];
+      expect(firstArg).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z INFO  \[Timestamp\]$/);
+      expect(consoleSpy.log.mock.calls[0][1]).toBe('test');
+
+      setTimestampsEnabled(false);
     });
   });
 });

apps/server/tests/unit/providers/claude-provider.test.ts

@@ -248,9 +248,9 @@ describe('claude-provider.ts', () => {
       await expect(collectAsyncGenerator(generator)).rejects.toThrow('SDK execution failed');
 
       // Should log error with classification info (via logger)
-      // Logger format: [Context] message, data
+      // Logger format: 'ERROR [Context]' message, data
       const errorCall = consoleErrorSpy.mock.calls[0];
-      expect(errorCall[0]).toBe('[ClaudeProvider]');
+      expect(errorCall[0]).toMatch(/ERROR.*\[ClaudeProvider\]/);
       expect(errorCall[1]).toBe('executeQuery() error during execution:');
       expect(errorCall[2]).toMatchObject({
         type: expect.any(String),

apps/server/tests/unit/services/feature-loader.test.ts

@@ -144,7 +144,7 @@ describe('feature-loader.ts', () => {
       expect(result).toHaveLength(1);
       expect(result[0].id).toBe('feature-2');
       expect(consoleSpy).toHaveBeenCalledWith(
-        '[FeatureLoader]',
+        expect.stringMatching(/WARN.*\[FeatureLoader\]/),
         expect.stringContaining("missing required 'id' field")
       );
 
@@ -191,7 +191,7 @@ describe('feature-loader.ts', () => {
 
       expect(result).toEqual([]);
       expect(consoleSpy).toHaveBeenCalledWith(
-        '[FeatureLoader]',
+        expect.stringMatching(/WARN.*\[FeatureLoader\]/),
         expect.stringContaining('Failed to parse feature.json')
       );
 
@@ -363,7 +363,7 @@ describe('feature-loader.ts', () => {
 
       expect(result).toBe(false);
       expect(consoleSpy).toHaveBeenCalledWith(
-        '[FeatureLoader]',
+        expect.stringMatching(/ERROR.*\[FeatureLoader\]/),
         expect.stringContaining('Failed to delete feature'),
         expect.objectContaining({ message: 'Permission denied' })
       );