feat: add CLI Viewer Page with multi-pane layout and state management

- Implemented the CliViewerPage component for displaying CLI outputs in a configurable multi-pane layout.
- Integrated Zustand for state management, allowing for dynamic layout changes and tab management.
- Added layout options: single, split horizontal, split vertical, and 2x2 grid.
- Created viewerStore for managing layout, panes, and tabs, including actions for adding/removing panes and tabs.
- Added CoordinatorPage barrel export for easier imports.

ccw/frontend/src/hooks/useLocale.ts

@@ -3,10 +3,10 @@
 // ========================================
 // Convenient hook for locale management
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useAppStore, selectLocale } from '../stores/appStore';
 import type { Locale } from '../types/store';
-import { availableLocales } from '../lib/i18n';
+import { availableLocales, formatMessage } from '../lib/i18n';
 
 export interface UseLocaleReturn {
   /** Current locale ('en' or 'zh') */
@@ -51,3 +51,25 @@ export function useLocale(): UseLocaleReturn {
     availableLocales,
   };
 }
+
+/**
+ * Hook to format i18n messages with the current locale
+ * @returns A formatMessage function for translating message IDs
+ *
+ * @example
+ * ```tsx
+ * const formatMessage = useFormatMessage();
+ * return <h1>{formatMessage('home.title')}</h1>;
+ * ```
+ */
+export function useFormatMessage(): (
+  id: string,
+  values?: Record<string, string | number | boolean | Date | null | undefined>
+) => string {
+  // Use useMemo to avoid recreating the function on each render
+  return useMemo(() => {
+    return (id: string, values?: Record<string, string | number | boolean | Date | null | undefined>) => {
+      return formatMessage(id, values);
+    };
+  }, []);
+}