feat: add CLI config preview API for Codex and Gemini

- Implemented `fetchCodexConfigPreview` and `fetchGeminiConfigPreview` functions in the API layer to retrieve masked configuration files.
- Added new interfaces `CodexConfigPreviewResponse` and `GeminiConfigPreviewResponse` to define the structure of the API responses.
- Created utility functions to read and mask sensitive values from `config.toml` and `auth.json` for Codex, and `settings.json` for Gemini.
- Updated CLI settings routes to handle new preview endpoints.
- Enhanced session content parser to support Claude JSONL format.
- Updated UI components to reflect changes in history page and navigation, including new tabs for observability.
- Localized changes for English and Chinese languages to reflect "CLI History" terminology.

Author: catlog22

ccw/frontend/src/components/api-settings/CliSettingsModal.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { Check, Eye, EyeOff, X, Plus } from 'lucide-react';
+import { Check, Eye, EyeOff, X, Plus, Loader2, Download } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
@@ -23,6 +23,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
 import { useCreateCliSettings, useUpdateCliSettings, useProviders } from '@/hooks/useApiSettings';
 import { useNotifications } from '@/hooks/useNotifications';
+import { fetchCodexConfigPreview, fetchGeminiConfigPreview } from '@/lib/api';
 import type { CliSettingsEndpoint, CliProvider } from '@/lib/api';
 
 // ========== Types ==========
@@ -101,6 +102,8 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
   // Gemini specific
   const [geminiApiKey, setGeminiApiKey] = useState('');
   const [showGeminiKey, setShowGeminiKey] = useState(false);
+  const [geminiSettingsJson, setGeminiSettingsJson] = useState('');
+  const [isLoadingGeminiConfig, setIsLoadingGeminiConfig] = useState(false);
 
   // Shared
   const [model, setModel] = useState('');
@@ -112,6 +115,9 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
   const [showJsonInput, setShowJsonInput] = useState(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
 
+  // Codex config preview loading state
+  const [isLoadingCodexConfig, setIsLoadingCodexConfig] = useState(false);
+
   // Initialize form
   useEffect(() => {
     if (cliSettings) {
@@ -171,6 +177,7 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
       setWriteCommonConfig(false);
       setGeminiApiKey('');
       setShowGeminiKey(false);
+      setGeminiSettingsJson('');
       setAvailableModels([]);
       setModelInput('');
       setTags([]);
@@ -224,6 +231,47 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
     return Object.keys(newErrors).length === 0;
   };
 
+  // Handle load Codex config preview
+  const handleLoadCodexConfig = async () => {
+    setIsLoadingCodexConfig(true);
+    try {
+      const result = await fetchCodexConfigPreview();
+      if (result.success) {
+        if (result.configToml) {
+          setConfigToml(result.configToml);
+        }
+        if (result.authJson) {
+          setAuthJson(result.authJson);
+        }
+      } else {
+        error(formatMessage({ id: 'apiSettings.cliSettings.loadConfigError' }) || 'Failed to load config');
+      }
+    } catch (err) {
+      error(formatMessage({ id: 'apiSettings.cliSettings.loadConfigError' }) || 'Failed to load config');
+    } finally {
+      setIsLoadingCodexConfig(false);
+    }
+  };
+
+  // Handle load Gemini config preview
+  const handleLoadGeminiConfig = async () => {
+    setIsLoadingGeminiConfig(true);
+    try {
+      const result = await fetchGeminiConfigPreview();
+      if (result.success) {
+        if (result.settingsJson) {
+          setGeminiSettingsJson(result.settingsJson);
+        }
+      } else {
+        error(formatMessage({ id: 'apiSettings.cliSettings.loadConfigError' }) || 'Failed to load config');
+      }
+    } catch (err) {
+      error(formatMessage({ id: 'apiSettings.cliSettings.loadConfigError' }) || 'Failed to load config');
+    } finally {
+      setIsLoadingGeminiConfig(false);
+    }
+  };
+
   // Handle save
   const handleSave = async () => {
     if (!validateForm()) return;
@@ -521,6 +569,35 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
           {/* ========== Codex Settings ========== */}
           {cliProvider === 'codex' && (
             <div className="space-y-4">
+              {/* Load Global Config Button */}
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
+                <div>
+                  <p className="text-sm font-medium">Load Global Config</p>
+                  <p className="text-xs text-muted-foreground">
+                    Load config.toml and auth.json from global Codex config directory
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLoadCodexConfig}
+                  disabled={isLoadingCodexConfig}
+                >
+                  {isLoadingCodexConfig ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Loading...
+                    </>
+                  ) : (
+                    <>
+                      <Download className="w-4 h-4 mr-2" />
+                      Load Config
+                    </>
+                  )}
+                </Button>
+              </div>
+
               {/* API Key */}
               <div className="space-y-2">
                 <Label htmlFor="codex-apikey">API Key</Label>
@@ -645,6 +722,35 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
           {/* ========== Gemini Settings ========== */}
           {cliProvider === 'gemini' && (
             <div className="space-y-4">
+              {/* Load Global Config Button */}
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
+                <div>
+                  <p className="text-sm font-medium">Load Global Config</p>
+                  <p className="text-xs text-muted-foreground">
+                    Load settings.json from global Gemini config directory
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLoadGeminiConfig}
+                  disabled={isLoadingGeminiConfig}
+                >
+                  {isLoadingGeminiConfig ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Loading...
+                    </>
+                  ) : (
+                    <>
+                      <Download className="w-4 h-4 mr-2" />
+                      Load Config
+                    </>
+                  )}
+                </Button>
+              </div>
+
               <div className="space-y-2">
                 <Label htmlFor="gemini-apikey">API Key</Label>
                 <div className="relative">
@@ -675,6 +781,38 @@ export function CliSettingsModal({ open, onClose, cliSettings, defaultProvider }
                   placeholder="gemini-2.5-flash"
                 />
               </div>
+
+              {/* settings.json Editor */}
+              {geminiSettingsJson && (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="gemini-settingsjson">settings.json (Preview)</Label>
+                    <Button
+                      type="button" variant="ghost" size="sm"
+                      onClick={() => {
+                        try {
+                          const formatted = JSON.stringify(JSON.parse(geminiSettingsJson), null, 2);
+                          setGeminiSettingsJson(formatted);
+                        } catch { /* skip */ }
+                      }}
+                    >
+                      Format
+                    </Button>
+                  </div>
+                  <Textarea
+                    id="gemini-settingsjson"
+                    value={geminiSettingsJson}
+                    onChange={(e) => setGeminiSettingsJson(e.target.value)}
+                    placeholder='{"model": "gemini-2.5-flash", ...}'
+                    className="font-mono text-sm"
+                    rows={8}
+                    readOnly
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Gemini settings.json content (read-only preview)
+                  </p>
+                </div>
+              )}
             </div>
           )}
 

ccw/frontend/src/components/issue/hub/IssueHubHeader.tsx

@@ -4,9 +4,8 @@
 // Dynamic header component for IssueHub
 
 import { useIntl } from 'react-intl';
-import { AlertCircle, Radar, ListTodo, LayoutGrid, Activity, Terminal } from 'lucide-react';
-
-type IssueTab = 'issues' | 'board' | 'queue' | 'discovery' | 'observability' | 'executions';
+import { AlertCircle, Radar, ListTodo, LayoutGrid, Play } from 'lucide-react';
+import type { IssueTab } from './IssueHubTabs';
 
 interface IssueHubHeaderProps {
   currentTab: IssueTab;
@@ -37,19 +36,14 @@ export function IssueHubHeader({ currentTab }: IssueHubHeaderProps) {
       title: formatMessage({ id: 'issues.discovery.pageTitle' }),
       description: formatMessage({ id: 'issues.discovery.description' }),
     },
-    observability: {
-      icon: <Activity className="w-6 h-6 text-primary" />,
-      title: formatMessage({ id: 'issues.observability.pageTitle' }),
-      description: formatMessage({ id: 'issues.observability.description' }),
-    },
     executions: {
-      icon: <Terminal className="w-6 h-6 text-primary" />,
+      icon: <Play className="w-6 h-6 text-primary" />,
       title: formatMessage({ id: 'issues.executions.pageTitle' }),
       description: formatMessage({ id: 'issues.executions.description' }),
     },
   };
 
-  const config = tabConfig[currentTab];
+  const config = tabConfig[currentTab] || tabConfig.issues;
 
   return (
     <div className="flex items-center gap-2">

ccw/frontend/src/components/issue/hub/IssueHubTabs.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/Button';
 import { cn } from '@/lib/utils';
 
 // Keep in sync with IssueHubHeader/IssueHubPage
-export type IssueTab = 'issues' | 'board' | 'queue' | 'discovery' | 'observability' | 'executions';
+export type IssueTab = 'issues' | 'board' | 'queue' | 'discovery' | 'executions';
 
 interface IssueHubTabsProps {
   currentTab: IssueTab;
@@ -23,7 +23,6 @@ export function IssueHubTabs({ currentTab, onTabChange }: IssueHubTabsProps) {
     { value: 'board', label: formatMessage({ id: 'issues.hub.tabs.board' }) },
     { value: 'queue', label: formatMessage({ id: 'issues.hub.tabs.queue' }) },
     { value: 'discovery', label: formatMessage({ id: 'issues.hub.tabs.discovery' }) },
-    { value: 'observability', label: formatMessage({ id: 'issues.hub.tabs.observability' }) },
     { value: 'executions', label: formatMessage({ id: 'issues.hub.tabs.executions' }) },
   ];
 

ccw/frontend/src/components/layout/Sidebar.tsx

@@ -17,7 +17,6 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   LayoutDashboard,
-  Clock,
   Zap,
   GitFork,
   Shield,
@@ -78,7 +77,6 @@ const navGroupDefinitions: NavGroupDef[] = [
       { path: '/sessions', labelKey: 'navigation.main.sessions', icon: FolderKanban },
       { path: '/lite-tasks', labelKey: 'navigation.main.liteTasks', icon: Zap },
       { path: '/orchestrator', labelKey: 'navigation.main.orchestrator', icon: Workflow },
-      { path: '/history', labelKey: 'navigation.main.history', icon: Clock },
       { path: '/issues', labelKey: 'navigation.main.issues', icon: AlertCircle },
       { path: '/teams', labelKey: 'navigation.main.teams', icon: Users },
       { path: '/terminal-dashboard', labelKey: 'navigation.main.terminalDashboard', icon: Terminal },

ccw/frontend/src/lib/api.ts

@@ -6150,6 +6150,54 @@ export async function getCliSettingsPath(endpointId: string): Promise<{ endpoint
   return fetchApi(`/api/cli/settings/${encodeURIComponent(endpointId)}/path`);
 }
 
+// ========== CLI Config Preview API ==========
+
+/**
+ * Codex config preview response
+ */
+export interface CodexConfigPreviewResponse {
+  /** Whether preview was successful */
+  success: boolean;
+  /** Path to config.toml */
+  configPath: string;
+  /** Path to auth.json */
+  authPath: string;
+  /** config.toml content with sensitive values masked */
+  configToml: string | null;
+  /** auth.json content with API keys masked */
+  authJson: string | null;
+  /** Error messages if any files could not be read */
+  errors?: string[];
+}
+
+/**
+ * Gemini config preview response
+ */
+export interface GeminiConfigPreviewResponse {
+  /** Whether preview was successful */
+  success: boolean;
+  /** Path to settings.json */
+  settingsPath: string;
+  /** settings.json content with sensitive values masked */
+  settingsJson: string | null;
+  /** Error messages if file could not be read */
+  errors?: string[];
+}
+
+/**
+ * Fetch Codex config files preview (config.toml and auth.json)
+ */
+export async function fetchCodexConfigPreview(): Promise<CodexConfigPreviewResponse> {
+  return fetchApi('/api/cli/settings/codex/preview');
+}
+
+/**
+ * Fetch Gemini settings file preview (settings.json)
+ */
+export async function fetchGeminiConfigPreview(): Promise<GeminiConfigPreviewResponse> {
+  return fetchApi('/api/cli/settings/gemini/preview');
+}
+
 // ========== Orchestrator Execution Monitoring API ==========
 
 /**

ccw/frontend/src/locales/en/common.json

@@ -245,7 +245,7 @@
       "coordinator": "Coordinator",
       "executions": "Executions",
       "loops": "Loops",
-      "history": "History",
+      "history": "CLI History",
       "memory": "Memory",
       "prompts": "Prompts",
       "skills": "Skills",

ccw/frontend/src/locales/en/navigation.json

@@ -12,7 +12,7 @@
     "sessions": "Sessions",
     "liteTasks": "Lite Tasks",
     "project": "Project",
-    "history": "History",
+    "history": "CLI History",
     "orchestrator": "Orchestrator",
     "coordinator": "Coordinator",
     "loops": "Loop Monitor",

ccw/frontend/src/locales/zh/common.json

@@ -245,7 +245,7 @@
       "coordinator": "协调器",
       "executions": "执行监控",
       "loops": "循环",
-      "history": "历史",
+      "history": "CLI执行历史",
       "memory": "记忆",
       "prompts": "提示词",
       "skills": "技能",

ccw/frontend/src/locales/zh/navigation.json

@@ -12,7 +12,7 @@
     "sessions": "会话",
     "liteTasks": "轻量任务",
     "project": "项目",
-    "history": "历史",
+    "history": "CLI执行历史",
     "orchestrator": "编排器",
     "coordinator": "协调器",
     "loops": "循环监控",