diff --git a/src/cliproxy/stats-fetcher.ts b/src/cliproxy/stats-fetcher.ts
index cafbc526..e7506a74 100644
--- a/src/cliproxy/stats-fetcher.ts
+++ b/src/cliproxy/stats-fetcher.ts
@@ -279,6 +279,8 @@ export interface CliproxyErrorLog {
   size: number;
   /** Last modified timestamp (Unix seconds) */
   modified: number;
+  /** Absolute path to the log file (injected by backend) */
+  absolutePath?: string;
 }
 
 /** Response from /v0/management/request-error-logs endpoint */
diff --git a/src/web-server/routes.ts b/src/web-server/routes.ts
index f6b4f4b7..7ccd973d 100644
--- a/src/web-server/routes.ts
+++ b/src/web-server/routes.ts
@@ -25,6 +25,7 @@ import {
   fetchCliproxyErrorLogs,
   fetchCliproxyErrorLogContent,
 } from '../cliproxy/stats-fetcher';
+import { getCliproxyWritablePath } from '../cliproxy/config-generator';
 import {
   listOpenAICompatProviders,
   getOpenAICompatProvider,
@@ -1446,7 +1447,14 @@ apiRoutes.get('/cliproxy/error-logs', async (_req: Request, res: Response): Prom
       return;
     }
 
-    res.json({ files });
+    // Inject absolute paths into each file entry
+    const logsDir = path.join(getCliproxyWritablePath(), 'logs');
+    const filesWithPaths = files.map((file) => ({
+      ...file,
+      absolutePath: path.join(logsDir, file.name),
+    }));
+
+    res.json({ files: filesWithPaths });
   } catch (error) {
     res.status(500).json({ error: (error as Error).message });
   }
diff --git a/ui/src/components/error-logs-monitor.tsx b/ui/src/components/error-logs-monitor.tsx
index b399a67b..eb704397 100644
--- a/ui/src/components/error-logs-monitor.tsx
+++ b/ui/src/components/error-logs-monitor.tsx
@@ -2,191 +2,351 @@
  * Error Logs Monitor Component
  *
  * Displays CLIProxyAPI error logs with master-detail split view.
- * Log list on left, content panel on right for better readability.
+ * ETL: Parses raw logs into structured data for rich display.
+ * - Left panel: Log list with status code, provider, endpoint, relative time
+ * - Right panel: Tabbed view (Overview, Headers, Request, Response, Raw)
  */
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { useCliproxyErrorLogs, useCliproxyErrorLogContent } from '@/hooks/use-cliproxy-stats';
 import { useCliproxyStatus } from '@/hooks/use-cliproxy-stats';
-import { cn, STATUS_COLORS } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { ProviderIcon } from '@/components/provider-icon';
+import { CopyButton } from '@/components/ui/copy-button';
 import {
   AlertTriangle,
   FileWarning,
   Clock,
   FileText,
-  XCircle,
-  FlaskConical,
   Terminal,
+  Info,
+  Code,
+  ArrowUpRight,
+  ArrowDownLeft,
+  GripVertical,
+  GripHorizontal,
 } from 'lucide-react';
+import {
+  parseErrorLog,
+  parseFilename,
+  formatRelativeTime,
+  formatBytes,
+  getStatusColor,
+  getErrorTypeLabel,
+  type ParsedErrorLog,
+} from '@/lib/error-log-parser';
 
-/** Demo mode mock data */
-const DEMO_ERROR_LOGS = [
-  {
-    name: 'error-v1-chat-completions-2025-12-18T17-45-23.log',
-    size: 4523,
-    modified: Math.floor(Date.now() / 1000) - 120,
-  },
-  {
-    name: 'error-v1-messages-2025-12-18T17-30-15.log',
-    size: 8912,
-    modified: Math.floor(Date.now() / 1000) - 900,
-  },
-  {
-    name: 'error-v1-chat-completions-2025-12-18T16-22-08.log',
-    size: 2341,
-    modified: Math.floor(Date.now() / 1000) - 5400,
-  },
-  {
-    name: 'error-v1-models-2025-12-18T14-10-55.log',
-    size: 1024,
-    modified: Math.floor(Date.now() / 1000) - 12600,
-  },
-];
+type TabType = 'overview' | 'headers' | 'request' | 'response' | 'raw';
 
-const DEMO_LOG_CONTENT = `================================================================================
-REQUEST ERROR LOG
-================================================================================
-Timestamp: 2025-12-18T17:45:23Z
-Endpoint: /v1/chat/completions
-Method: POST
-Status: 429 Too Many Requests
-
---------------------------------------------------------------------------------
-REQUEST HEADERS
---------------------------------------------------------------------------------
-Content-Type: application/json
-Authorization: Bearer ccs-internal-managed
-User-Agent: claude-code/1.0
-
---------------------------------------------------------------------------------
-REQUEST BODY
---------------------------------------------------------------------------------
-{
-  "model": "gemini-claude-opus-4-5-thinking",
-  "messages": [
-    {"role": "user", "content": "Explain quantum computing"}
-  ],
-  "max_tokens": 4096,
-  "stream": true
+/** Tab button component */
+function TabButton({
+  active,
+  onClick,
+  children,
+  icon: Icon,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'px-2.5 py-1.5 text-xs font-medium rounded transition-colors flex items-center gap-1.5',
+        active
+          ? 'bg-primary/15 text-primary'
+          : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+      )}
+    >
+      {Icon && <Icon className="w-3.5 h-3.5" />}
+      {children}
+    </button>
+  );
 }
 
---------------------------------------------------------------------------------
-RESPONSE
---------------------------------------------------------------------------------
-{
-  "error": {
-    "message": "Rate limit exceeded. Please retry after 60 seconds.",
-    "type": "rate_limit_error",
-    "code": "rate_limit_exceeded"
+/** Status badge component */
+function StatusBadge({ code }: { code: number }) {
+  const colorClass = getStatusColor(code);
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center min-w-[36px] px-2 py-0.5 rounded text-xs font-bold',
+        'bg-current/10 border border-current/20',
+        colorClass
+      )}
+    >
+      {code}
+    </span>
+  );
+}
+
+/** Overview tab content */
+function OverviewTab({ parsed }: { parsed: ParsedErrorLog }) {
+  return (
+    <div className="p-4 space-y-4">
+      {/* Status row */}
+      <div className="flex items-center gap-3">
+        <StatusBadge code={parsed.statusCode} />
+        <span className="text-sm font-medium">{parsed.statusText}</span>
+        <span className="text-xs text-muted-foreground px-2 py-0.5 rounded bg-muted/50">
+          {getErrorTypeLabel(parsed.errorType)}
+        </span>
+      </div>
+
+      {/* Key metrics grid */}
+      <div className="grid grid-cols-4 gap-3 text-xs">
+        <div className="p-2.5 rounded bg-muted/30 border border-border/50">
+          <div className="text-muted-foreground mb-1">Method</div>
+          <div className="font-medium">{parsed.method || 'N/A'}</div>
+        </div>
+        <div className="p-2.5 rounded bg-muted/30 border border-border/50">
+          <div className="text-muted-foreground mb-1">Provider</div>
+          <div className="font-medium">{parsed.provider || 'N/A'}</div>
+        </div>
+        <div className="p-2.5 rounded bg-muted/30 border border-border/50">
+          <div className="text-muted-foreground mb-1">Version</div>
+          <div className="font-medium">{parsed.version || 'N/A'}</div>
+        </div>
+        <div className="p-2.5 rounded bg-muted/30 border border-border/50">
+          <div className="text-muted-foreground mb-1">Endpoint</div>
+          <div className="font-medium truncate" title={parsed.endpoint}>
+            {parsed.endpoint || 'N/A'}
+          </div>
+        </div>
+      </div>
+
+      {/* URL */}
+      <div className="text-xs">
+        <div className="text-muted-foreground mb-1.5">URL</div>
+        <div className="font-mono p-2.5 rounded bg-muted/30 border border-border/50 break-all leading-relaxed">
+          {parsed.url || 'N/A'}
+        </div>
+      </div>
+
+      {/* Timestamp */}
+      <div className="text-xs">
+        <div className="text-muted-foreground mb-1.5">Timestamp</div>
+        <div className="font-mono">{parsed.timestamp || 'N/A'}</div>
+      </div>
+
+      {/* Suggestion based on error type */}
+      {parsed.errorType !== 'unknown' && (
+        <div className="flex items-start gap-3 p-3 rounded bg-blue-500/10 border border-blue-500/20 text-xs">
+          <Info className="w-4 h-4 mt-0.5 text-blue-500 shrink-0" />
+          <div className="text-blue-500/90 leading-relaxed">
+            {parsed.errorType === 'rate_limit' &&
+              'Rate limited. Consider using multiple accounts or reducing request frequency.'}
+            {parsed.errorType === 'auth' &&
+              'Authentication failed. Check credentials or re-authenticate with the provider.'}
+            {parsed.errorType === 'not_found' &&
+              'Endpoint not found. This endpoint may not exist on this provider.'}
+            {parsed.errorType === 'server' &&
+              'Server error from upstream. Retry or check provider status.'}
+            {parsed.errorType === 'timeout' &&
+              'Request timed out. Check network or increase timeout settings.'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Headers tab content */
+function HeadersTab({ headers }: { headers: Record<string, string> }) {
+  const entries = Object.entries(headers);
+  if (entries.length === 0) {
+    return <div className="p-4 text-xs text-muted-foreground">No headers available</div>;
   }
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-4 space-y-1">
+        {entries.map(([key, value]) => (
+          <div
+            key={key}
+            className="flex gap-3 text-xs font-mono py-1.5 border-b border-border/30 last:border-0"
+          >
+            <span className="text-muted-foreground shrink-0 min-w-[140px]">{key}:</span>
+            <span className="break-all">{value}</span>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
 }
 
---------------------------------------------------------------------------------
-UPSTREAM API ERROR
---------------------------------------------------------------------------------
-Provider: gemini
-Account: user@gmail.com
-Quota: Daily limit reached (1500/1500 requests)
-Retry-After: 60
-================================================================================`;
-
-/** Format file size in human-readable format */
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-/** Format timestamp to relative time */
-function formatRelativeTime(unixSeconds: number): string {
-  const diff = Math.floor(Date.now() / 1000 - unixSeconds);
-  if (diff < 60) return 'just now';
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-  return `${Math.floor(diff / 86400)}d ago`;
-}
-
-/** Parse error log filename to extract endpoint and timestamp */
-function parseErrorLogName(name: string): { endpoint: string; timestamp: string } {
-  const match = name.match(/^error-(.+)-(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2})\.log$/);
-  if (match) {
-    const endpoint = match[1].replace(/-/g, '/');
-    const timestamp = match[2].replace(/T/, ' ').replace(/-/g, ':');
-    return { endpoint: `/${endpoint}`, timestamp };
+/** JSON/Body tab content */
+function BodyTab({ content, label }: { content: string; label: string }) {
+  if (!content || content.trim() === '') {
+    return <div className="p-4 text-xs text-muted-foreground">No {label.toLowerCase()} body</div>;
   }
-  return { endpoint: name, timestamp: '' };
+
+  // Try to format as JSON
+  let formatted = content;
+  let isJson = false;
+  try {
+    const parsed = JSON.parse(content);
+    formatted = JSON.stringify(parsed, null, 2);
+    isJson = true;
+  } catch {
+    // Not JSON, use as-is
+  }
+
+  return (
+    <ScrollArea className="h-full">
+      <pre
+        className={cn(
+          'p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed',
+          isJson
+            ? 'text-emerald-700 dark:text-green-400'
+            : 'text-zinc-700 dark:text-muted-foreground'
+        )}
+      >
+        {formatted}
+      </pre>
+    </ScrollArea>
+  );
 }
 
-/** Log content panel component */
-function LogContentPanel({ name, demo = false }: { name: string | null; demo?: boolean }) {
-  const { data: content, isLoading, error } = useCliproxyErrorLogContent(demo ? null : name);
+/** Raw tab content */
+function RawTab({ content }: { content: string }) {
+  return (
+    <ScrollArea className="h-full">
+      <pre className="p-4 text-xs font-mono text-zinc-700 dark:text-muted-foreground whitespace-pre-wrap break-all leading-relaxed">
+        {content}
+      </pre>
+    </ScrollArea>
+  );
+}
+
+/** Log content panel with tabs */
+function LogContentPanel({ name, absolutePath }: { name: string | null; absolutePath?: string }) {
+  const [activeTab, setActiveTab] = useState<TabType>('overview');
+  const { data: content, isLoading, error } = useCliproxyErrorLogContent(name);
+
+  // Parse log content
+  const parsed = useMemo(() => {
+    if (!content) return null;
+    return parseErrorLog(content);
+  }, [content]);
 
   // No log selected
   if (!name) {
     return (
       <div className="flex-1 flex items-center justify-center text-muted-foreground">
-        <div className="text-center space-y-2">
-          <Terminal className="w-8 h-8 mx-auto opacity-40" />
-          <p className="text-xs">Select a log to view details</p>
+        <div className="text-center space-y-3">
+          <Terminal className="w-10 h-10 mx-auto opacity-40" />
+          <p className="text-sm">Select a log to view details</p>
         </div>
       </div>
     );
   }
 
-  // Demo mode
-  if (demo) {
-    const { endpoint } = parseErrorLogName(name);
-    return (
-      <div className="flex-1 flex flex-col min-w-0">
-        <div className="px-3 py-2 border-b border-border bg-muted/30 flex items-center gap-2">
-          <Terminal className="w-3.5 h-3.5 text-muted-foreground" />
-          <span className="text-[11px] font-medium truncate">{endpoint}</span>
-        </div>
-        <ScrollArea className="flex-1">
-          <pre className="p-3 text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all leading-relaxed">
-            {DEMO_LOG_CONTENT}
-          </pre>
-        </ScrollArea>
-      </div>
-    );
-  }
-
   // Loading state
   if (isLoading) {
     return (
-      <div className="flex-1 p-4 space-y-2">
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-3/4" />
-        <Skeleton className="h-4 w-5/6" />
-        <Skeleton className="h-4 w-2/3" />
+      <div className="flex-1 p-6 space-y-3">
+        <Skeleton className="h-5 w-full" />
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-5 w-5/6" />
+        <Skeleton className="h-5 w-2/3" />
       </div>
     );
   }
 
   // Error or no content
-  if (error || !content) {
+  if (error || !content || !parsed) {
     return (
       <div className="flex-1 flex items-center justify-center text-muted-foreground">
-        <p className="text-xs">Failed to load log content</p>
+        <p className="text-sm">Failed to load log content</p>
       </div>
     );
   }
 
-  // Show content
-  const { endpoint } = parseErrorLogName(name);
   return (
-    <div className="flex-1 flex flex-col min-w-0">
-      <div className="px-3 py-2 border-b border-border bg-muted/30 flex items-center gap-2">
-        <Terminal className="w-3.5 h-3.5 text-muted-foreground" />
-        <span className="text-[11px] font-medium truncate">{endpoint}</span>
+    <div className="flex-1 flex flex-col min-w-0 h-full">
+      {/* Header with status */}
+      <div className="px-4 py-3 border-b border-border bg-muted/30 flex items-center justify-between gap-3 shrink-0">
+        <div className="flex items-center gap-3 min-w-0 flex-1">
+          <StatusBadge code={parsed.statusCode} />
+          <span className="text-xs font-semibold truncate text-foreground">
+            {parsed.provider}/{parsed.endpoint || 'unknown'}
+          </span>
+          {/* Copy Absolute Path Button */}
+          {name && (
+            <CopyButton
+              value={absolutePath || name}
+              label="Copy absolute path"
+              size="icon-sm"
+              className="ml-1 text-muted-foreground hover:text-foreground opacity-50 hover:opacity-100 transition-opacity"
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {/* Copy Raw Content Button */}
+          {content && (
+            <CopyButton
+              value={content}
+              label="Copy raw log content"
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+            />
+          )}
+          <span className="text-[10px] text-muted-foreground font-mono bg-muted px-1.5 py-0.5 rounded border border-border/50">
+            {parsed.method}
+          </span>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="px-3 py-2 border-b border-border flex items-center gap-1 bg-muted/10 shrink-0 overflow-x-auto">
+        <TabButton
+          active={activeTab === 'overview'}
+          onClick={() => setActiveTab('overview')}
+          icon={Info}
+        >
+          Overview
+        </TabButton>
+        <TabButton
+          active={activeTab === 'headers'}
+          onClick={() => setActiveTab('headers')}
+          icon={Code}
+        >
+          Headers
+        </TabButton>
+        <TabButton
+          active={activeTab === 'request'}
+          onClick={() => setActiveTab('request')}
+          icon={ArrowUpRight}
+        >
+          Request
+        </TabButton>
+        <TabButton
+          active={activeTab === 'response'}
+          onClick={() => setActiveTab('response')}
+          icon={ArrowDownLeft}
+        >
+          Response
+        </TabButton>
+        <TabButton active={activeTab === 'raw'} onClick={() => setActiveTab('raw')} icon={FileText}>
+          Raw
+        </TabButton>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-hidden bg-card/30">
+        {activeTab === 'overview' && <OverviewTab parsed={parsed} />}
+        {activeTab === 'headers' && <HeadersTab headers={parsed.requestHeaders} />}
+        {activeTab === 'request' && <BodyTab content={parsed.requestBody} label="Request" />}
+        {activeTab === 'response' && <BodyTab content={parsed.responseBody} label="Response" />}
+        {activeTab === 'raw' && <RawTab content={content} />}
       </div>
-      <ScrollArea className="flex-1">
-        <pre className="p-3 text-[10px] font-mono text-muted-foreground whitespace-pre-wrap break-all leading-relaxed">
-          {content}
-        </pre>
-      </ScrollArea>
     </div>
   );
 }
@@ -201,52 +361,146 @@ interface ErrorLogItemProps {
 }
 
 function ErrorLogItem({ name, size, modified, isSelected, onClick }: ErrorLogItemProps) {
-  const { endpoint, timestamp } = parseErrorLogName(name);
+  const parsed = useMemo(() => parseFilename(name), [name]);
 
   return (
     <button
       onClick={onClick}
       className={cn(
-        'w-full px-3 py-2.5 flex items-start gap-2 text-left transition-colors',
-        'hover:bg-muted/40 border-l-2',
+        'w-full px-3 py-2.5 flex items-start gap-3 text-left transition-colors',
+        'hover:bg-muted/40 border-l-[3px]',
         isSelected ? 'bg-muted/50 border-l-amber-500' : 'border-l-transparent'
       )}
     >
-      <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" style={{ color: STATUS_COLORS.failed }} />
-      <div className="flex-1 min-w-0 space-y-0.5">
-        <div className="text-[11px] font-medium truncate" title={endpoint}>
-          {endpoint}
+      {/* Provider Icon */}
+      <ProviderIcon
+        provider={parsed.provider}
+        size={24}
+        withBackground={true}
+        className="shrink-0 mt-0.5"
+      />
+
+      <div className="flex-1 min-w-0 space-y-1">
+        {/* Provider / Endpoint */}
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-xs font-semibold text-foreground truncate">
+              {parsed.provider}
+            </span>
+            <span
+              className={cn(
+                'text-[9px] px-1 rounded border',
+                isSelected
+                  ? 'bg-amber-500/10 text-amber-600 border-amber-500/20'
+                  : 'bg-muted border-border text-muted-foreground'
+              )}
+            >
+              LOG
+            </span>
+          </div>
+          <span
+            className="text-[11px] text-muted-foreground truncate font-medium"
+            title={parsed.endpoint}
+          >
+            {parsed.endpoint}
+          </span>
         </div>
-        <div className="flex items-center gap-2 text-[9px] text-muted-foreground">
-          <span className="flex items-center gap-0.5">
-            <Clock className="w-2.5 h-2.5" />
+
+        {/* Meta row: time + size */}
+        <div className="flex items-center gap-3 text-[10px] text-muted-foreground/80 mt-1">
+          <span className="flex items-center gap-1">
+            <Clock className="w-3 h-3" />
             {formatRelativeTime(modified)}
           </span>
-          <span className="flex items-center gap-0.5">
-            <FileText className="w-2.5 h-2.5" />
-            {formatSize(size)}
+          <span className="flex items-center gap-1">
+            <FileText className="w-3 h-3" />
+            {formatBytes(size)}
           </span>
         </div>
-        {timestamp && (
-          <div className="text-[9px] text-muted-foreground/70 truncate">{timestamp}</div>
-        )}
       </div>
     </button>
   );
 }
 
-export function ErrorLogsMonitor({ demo = false }: { demo?: boolean } = {}) {
+export function ErrorLogsMonitor() {
   const { data: status, isLoading: isStatusLoading } = useCliproxyStatus();
-  const {
-    data: logs,
-    isLoading,
-    error,
-  } = useCliproxyErrorLogs(demo ? false : (status?.running ?? false));
-  // Use demo data or real data
-  const displayLogs = demo ? DEMO_ERROR_LOGS : logs;
+  const { data: logs, isLoading, error } = useCliproxyErrorLogs(status?.running ?? false);
+
+  // Vertical resize state
+  const [height, setHeight] = useState(500);
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Auto-scroll handler
+  const stopAutoScroll = () => {
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+
+  // Resize handlers
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const containerTopDoc = rect.top + window.scrollY;
+      const newHeight = e.pageY - containerTopDoc;
+
+      // Constrain height (min 300, no max)
+      setHeight(Math.max(300, newHeight));
+
+      // Auto-scroll logic
+      const viewportHeight = window.innerHeight;
+      const distFromBottom = viewportHeight - e.clientY;
+      const scrollSpeed = 15;
+
+      stopAutoScroll();
+
+      if (distFromBottom < 50) {
+        scrollIntervalRef.current = setInterval(() => {
+          window.scrollBy(0, scrollSpeed);
+        }, 16);
+      } else if (e.clientY < 50) {
+        scrollIntervalRef.current = setInterval(() => {
+          window.scrollBy(0, -scrollSpeed);
+        }, 16);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      stopAutoScroll();
+      document.body.style.cursor = 'default';
+      document.body.style.userSelect = 'auto';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'default';
+      document.body.style.userSelect = 'auto';
+      stopAutoScroll();
+    };
+  }, [isResizing]);
+
+  const startResizing = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
 
   // Compute default selection (first log name or null)
-  const defaultLogName = useMemo(() => displayLogs?.[0]?.name ?? null, [displayLogs]);
+  const defaultLogName = useMemo(() => logs?.[0]?.name ?? null, [logs]);
 
   // Use controlled selection that defaults to first log
   const [selectedLog, setSelectedLog] = useState<string | null>(null);
@@ -254,87 +508,109 @@ export function ErrorLogsMonitor({ demo = false }: { demo?: boolean } = {}) {
   // Effective selection: use user selection if available, otherwise default
   const effectiveSelection = selectedLog ?? defaultLogName;
 
-  // Non-demo mode guards
-  if (!demo) {
-    if (isStatusLoading) return null;
-    if (!status?.running) return null;
-    if (isLoading) {
-      return (
-        <div className="rounded-xl border border-border overflow-hidden font-mono text-[13px] bg-card/50 dark:bg-zinc-900/60 backdrop-blur-sm">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-4 w-20" />
-          </div>
-          <div className="p-4 space-y-2">
-            {[1, 2, 3].map((i) => (
-              <Skeleton key={i} className="h-10 w-full rounded-lg" />
-            ))}
-          </div>
-        </div>
-      );
-    }
-    if (!logs || logs.length === 0) return null;
-  }
+  // Get absolute path for the selected log
+  const selectedAbsolutePath = useMemo(() => {
+    if (!effectiveSelection || !logs) return undefined;
+    const log = logs.find((l) => l.name === effectiveSelection);
+    return log?.absolutePath;
+  }, [effectiveSelection, logs]);
 
-  const errorCount = displayLogs?.length ?? 0;
+  // Guards
+  if (isStatusLoading) return null;
+  if (!status?.running) return null;
+  if (isLoading) {
+    return (
+      <div className="rounded-xl border border-border overflow-hidden font-mono text-sm bg-card/50 dark:bg-zinc-900/60 backdrop-blur-sm h-[500px]">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="p-4 space-y-3">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-12 w-full rounded-lg" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+  if (!logs || logs.length === 0) return null;
+
+  const errorCount = logs.length;
 
   return (
-    <div className="rounded-xl border border-border overflow-hidden font-mono text-[13px] text-foreground bg-card/50 dark:bg-zinc-900/60 backdrop-blur-sm">
+    <div
+      ref={containerRef}
+      className="rounded-xl border border-border overflow-hidden font-mono text-sm text-foreground bg-card/50 dark:bg-zinc-900/60 backdrop-blur-sm flex flex-col shadow-sm transition-[height] duration-0 ease-linear relative group/container"
+      style={{ height }}
+    >
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-gradient-to-r from-amber-500/10 via-transparent to-transparent dark:from-amber-500/15">
-        <div className="flex items-center gap-2">
-          <AlertTriangle className="w-4 h-4" style={{ color: STATUS_COLORS.degraded }} />
-          <span className="text-xs font-semibold tracking-tight">Error Logs</span>
-          <span className="text-[10px] text-muted-foreground">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-gradient-to-r from-amber-500/10 via-transparent to-transparent dark:from-amber-500/15 shrink-0">
+        <div className="flex items-center gap-2.5">
+          <AlertTriangle className="w-4 h-4 text-amber-500" />
+          <span className="text-sm font-semibold tracking-tight">Error Logs</span>
+          <span className="text-xs text-muted-foreground ml-1">
             {errorCount} failed request{errorCount !== 1 ? 's' : ''}
           </span>
-          {demo && (
-            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-medium bg-violet-500/20 text-violet-400 border border-violet-500/30">
-              <FlaskConical className="w-2.5 h-2.5" />
-              DEMO
-            </span>
-          )}
         </div>
-        <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
-          <FileWarning className="w-3 h-3" />
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <FileWarning className="w-3.5 h-3.5" />
           <span>CLIProxy Diagnostics</span>
         </div>
       </div>
 
-      {/* Split View: List (left) + Content (right) */}
-      <div className="flex h-[280px]">
-        {/* Left Panel: Log List */}
-        <div className="w-[240px] shrink-0 border-r border-border">
-          <ScrollArea className="h-full">
-            <div className="divide-y divide-border/50">
-              {displayLogs?.slice(0, 10).map((log) => (
-                <ErrorLogItem
-                  key={log.name}
-                  name={log.name}
-                  size={log.size}
-                  modified={log.modified}
-                  isSelected={effectiveSelection === log.name}
-                  onClick={() => setSelectedLog(log.name)}
-                />
-              ))}
-            </div>
-            {(displayLogs?.length ?? 0) > 10 && (
-              <div className="px-3 py-2 text-center text-[9px] text-muted-foreground border-t border-border/50">
-                Showing 10 of {displayLogs?.length} logs
+      {/* Resizable Panel Layout */}
+      <div className="flex-1 min-h-0">
+        <PanelGroup direction="horizontal">
+          {/* Left Panel: Log List */}
+          <Panel defaultSize={30} minSize={20} maxSize={50} className="flex flex-col min-w-0">
+            <ScrollArea className="h-full">
+              <div className="divide-y divide-border/50">
+                {logs.slice(0, 50).map((log) => (
+                  <ErrorLogItem
+                    key={log.name}
+                    name={log.name}
+                    size={log.size}
+                    modified={log.modified}
+                    isSelected={effectiveSelection === log.name}
+                    onClick={() => setSelectedLog(log.name)}
+                  />
+                ))}
               </div>
-            )}
-          </ScrollArea>
-        </div>
+              {logs.length > 50 && (
+                <div className="px-3 py-3 text-center text-[10px] text-muted-foreground border-t border-border/50">
+                  Showing 50 of {logs.length} logs
+                </div>
+              )}
+            </ScrollArea>
+          </Panel>
 
-        {/* Right Panel: Log Content */}
-        <LogContentPanel name={effectiveSelection} demo={demo} />
+          {/* Resize Handle */}
+          <PanelResizeHandle className="w-[1px] bg-border hover:bg-primary/50 transition-colors flex items-center justify-center group relative z-10 w-2 -ml-1 flex items-center justify-center outline-none">
+            <div className="w-[1px] h-full bg-border group-hover:bg-primary/50 transition-colors" />
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-8 rounded-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-muted border border-border">
+              <GripVertical className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </PanelResizeHandle>
+
+          {/* Right Panel: Log Content */}
+          <Panel className="flex flex-col min-w-0 bg-background/50">
+            <LogContentPanel name={effectiveSelection} absolutePath={selectedAbsolutePath} />
+          </Panel>
+        </PanelGroup>
       </div>
 
-      {/* Footer error */}
-      {error && (
-        <div className="px-4 py-2 border-t border-border text-[10px] text-destructive">
+      {/* Use standard footer if error, otherwise show resize handle */}
+      {error ? (
+        <div className="px-4 py-2 border-t border-border text-xs text-destructive bg-destructive/5 shrink-0">
           {error.message}
         </div>
+      ) : (
+        <div
+          className="h-2 bg-border/10 border-t border-border/30 hover:bg-primary/10 transition-colors cursor-row-resize flex items-center justify-center group/handle shrink-0"
+          onMouseDown={startResizing}
+        >
+          <GripHorizontal className="w-8 h-3 text-border group-hover:text-primary/50 transition-colors" />
+        </div>
       )}
     </div>
   );
diff --git a/ui/src/components/ui/copy-button.tsx b/ui/src/components/ui/copy-button.tsx
index 5453f328..3f296151 100644
--- a/ui/src/components/ui/copy-button.tsx
+++ b/ui/src/components/ui/copy-button.tsx
@@ -3,19 +3,21 @@ import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { type VariantProps } from 'class-variance-authority';
+import { type buttonVariants } from '@/components/ui/button-variants';
 
 interface CopyButtonProps {
   value: string;
   className?: string;
-  variant?: 'default' | 'outline' | 'ghost' | 'secondary';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
+  variant?: VariantProps<typeof buttonVariants>['variant'];
+  size?: VariantProps<typeof buttonVariants>['size'];
   label?: string;
 }
 
 export function CopyButton({
   value,
   className,
-  variant = 'ghost',
+  variant = 'outline',
   size = 'icon',
   label = 'Copy to clipboard',
 }: CopyButtonProps) {
@@ -34,19 +36,16 @@ export function CopyButton({
           <Button
             size={size}
             variant={variant}
-            className={cn(
-              'h-6 w-6 relative z-10 text-foreground/70 hover:text-foreground',
-              className
-            )}
+            className={cn('relative z-10 text-muted-foreground hover:text-foreground', className)}
             onClick={(e) => {
               e.stopPropagation();
               onCopy();
             }}
           >
             {hasCopied ? (
-              <Check className="h-3 w-3 text-green-500" />
+              <Check className="h-3.5 w-3.5 text-green-500" />
             ) : (
-              <Copy className="h-3 w-3" />
+              <Copy className="h-3.5 w-3.5" />
             )}
             <span className="sr-only">{label}</span>
           </Button>
diff --git a/ui/src/hooks/use-cliproxy-stats.ts b/ui/src/hooks/use-cliproxy-stats.ts
index 3bea8b29..2e825e01 100644
--- a/ui/src/hooks/use-cliproxy-stats.ts
+++ b/ui/src/hooks/use-cliproxy-stats.ts
@@ -136,6 +136,8 @@ export interface CliproxyErrorLog {
   name: string;
   size: number;
   modified: number;
+  /** Absolute path to the log file (injected by backend) */
+  absolutePath?: string;
 }
 
 /**
diff --git a/ui/src/lib/error-log-parser.ts b/ui/src/lib/error-log-parser.ts
new file mode 100644
index 00000000..3afa030c
--- /dev/null
+++ b/ui/src/lib/error-log-parser.ts
@@ -0,0 +1,328 @@
+/**
+ * Error Log Parser Utility
+ *
+ * Parses CLIProxy error log content into structured data for display.
+ * Extracts request info, headers, body, and response sections.
+ */
+
+/** Parsed error log structure */
+export interface ParsedErrorLog {
+  // Request Info
+  version: string;
+  url: string;
+  method: string;
+  timestamp: string;
+
+  // Response
+  statusCode: number;
+  statusText: string;
+
+  // Sections (raw strings)
+  requestHeaders: Record<string, string>;
+  requestBody: string;
+  responseHeaders: Record<string, string>;
+  responseBody: string;
+
+  // Computed metadata
+  provider: string;
+  endpoint: string;
+  isClientError: boolean;
+  isServerError: boolean;
+  errorType: 'rate_limit' | 'auth' | 'not_found' | 'server' | 'timeout' | 'unknown';
+}
+
+/** Parsed filename metadata */
+export interface ParsedFilename {
+  provider: string;
+  endpoint: string;
+  timestamp: Date;
+  raw: string;
+}
+
+/**
+ * Parse error log filename to extract provider, endpoint, and timestamp
+ * Format: error-api-provider-{provider}-api-{endpoint}-{timestamp}-{id}.log
+ */
+export function parseFilename(name: string): ParsedFilename {
+  const result: ParsedFilename = {
+    provider: 'unknown',
+    endpoint: 'unknown',
+    timestamp: new Date(),
+    raw: name,
+  };
+
+  // Extract provider: error-api-provider-{PROVIDER}-api-...
+  const providerMatch = name.match(/error-api-provider-([^-]+)-/);
+  if (providerMatch) {
+    result.provider = providerMatch[1];
+  }
+
+  // Extract endpoint from after provider: ...-api-{ENDPOINT}-{timestamp}
+  // Example: error-api-provider-agy-api-event_logging-batch-2025-12-18T185041-...
+  const endpointMatch = name.match(/-api-([a-z_]+(?:-[a-z_]+)*)-\d{4}-\d{2}-\d{2}T/i);
+  if (endpointMatch) {
+    result.endpoint = endpointMatch[1].replace(/-/g, '/');
+  }
+
+  // Extract timestamp: 2025-12-18T185041
+  const tsMatch = name.match(/(\d{4}-\d{2}-\d{2}T\d{6})/);
+  if (tsMatch) {
+    const ts = tsMatch[1];
+    // Parse: 2025-12-18T185041 → 2025-12-18T18:50:41
+    const formatted = `${ts.slice(0, 10)}T${ts.slice(11, 13)}:${ts.slice(13, 15)}:${ts.slice(15, 17)}`;
+    result.timestamp = new Date(formatted);
+  }
+
+  return result;
+}
+
+/**
+ * Parse raw error log content into structured data
+ */
+export function parseErrorLog(content: string): ParsedErrorLog {
+  const result: ParsedErrorLog = {
+    version: '',
+    url: '',
+    method: '',
+    timestamp: '',
+    statusCode: 0,
+    statusText: '',
+    requestHeaders: {},
+    requestBody: '',
+    responseHeaders: {},
+    responseBody: '',
+    provider: '',
+    endpoint: '',
+    isClientError: false,
+    isServerError: false,
+    errorType: 'unknown',
+  };
+
+  // Split into sections
+  const sections = content.split(/^===\s*(.+?)\s*===$/m);
+
+  let currentSection = '';
+  for (let i = 0; i < sections.length; i++) {
+    const part = sections[i].trim();
+
+    if (part === 'REQUEST INFO') {
+      currentSection = 'request_info';
+      continue;
+    } else if (part === 'HEADERS') {
+      currentSection = 'headers';
+      continue;
+    } else if (part === 'REQUEST BODY') {
+      currentSection = 'request_body';
+      continue;
+    } else if (part === 'RESPONSE') {
+      currentSection = 'response';
+      continue;
+    }
+
+    // Parse section content
+    switch (currentSection) {
+      case 'request_info':
+        parseRequestInfo(part, result);
+        break;
+      case 'headers':
+        result.requestHeaders = parseHeaders(part);
+        break;
+      case 'request_body':
+        result.requestBody = part;
+        break;
+      case 'response':
+        parseResponse(part, result);
+        break;
+    }
+  }
+
+  // Compute derived fields
+  computeDerivedFields(result);
+
+  return result;
+}
+
+/** Parse REQUEST INFO section */
+function parseRequestInfo(content: string, result: ParsedErrorLog): void {
+  const lines = content.split('\n');
+  for (const line of lines) {
+    const [key, ...valueParts] = line.split(':');
+    const value = valueParts.join(':').trim();
+
+    switch (key?.trim()?.toLowerCase()) {
+      case 'version':
+        result.version = value;
+        break;
+      case 'url':
+        result.url = value;
+        break;
+      case 'method':
+        result.method = value;
+        break;
+      case 'timestamp':
+        result.timestamp = value;
+        break;
+    }
+  }
+}
+
+/** Parse headers into key-value object */
+function parseHeaders(content: string): Record<string, string> {
+  const headers: Record<string, string> = {};
+  const lines = content.split('\n');
+
+  for (const line of lines) {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      const key = line.slice(0, colonIndex).trim();
+      const value = line.slice(colonIndex + 1).trim();
+      if (key) headers[key] = value;
+    }
+  }
+
+  return headers;
+}
+
+/** Parse RESPONSE section */
+function parseResponse(content: string, result: ParsedErrorLog): void {
+  const lines = content.split('\n');
+  let headersEnded = false;
+  const bodyLines: string[] = [];
+
+  for (const line of lines) {
+    // First line might be "Status: 404"
+    if (line.startsWith('Status:')) {
+      const statusStr = line.replace('Status:', '').trim();
+      const statusParts = statusStr.split(/\s+/);
+      result.statusCode = parseInt(statusParts[0], 10) || 0;
+      result.statusText = statusParts.slice(1).join(' ') || getStatusText(result.statusCode);
+      continue;
+    }
+
+    // Check for empty line (separates headers from body)
+    if (line.trim() === '' && !headersEnded) {
+      headersEnded = true;
+      continue;
+    }
+
+    // Parse response headers
+    if (!headersEnded) {
+      const colonIndex = line.indexOf(':');
+      if (colonIndex > 0) {
+        const key = line.slice(0, colonIndex).trim();
+        const value = line.slice(colonIndex + 1).trim();
+        if (key) result.responseHeaders[key] = value;
+      }
+    } else {
+      bodyLines.push(line);
+    }
+  }
+
+  result.responseBody = bodyLines.join('\n').trim();
+}
+
+/** Compute derived fields from parsed data */
+function computeDerivedFields(result: ParsedErrorLog): void {
+  // Extract provider from URL: /api/provider/{PROVIDER}/...
+  const providerMatch = result.url.match(/\/api\/provider\/([^/]+)/);
+  if (providerMatch) {
+    result.provider = providerMatch[1];
+  }
+
+  // Extract endpoint from URL
+  const endpointMatch = result.url.match(/\/api\/provider\/[^/]+\/api\/(.+)/);
+  if (endpointMatch) {
+    result.endpoint = endpointMatch[1];
+  }
+
+  // Status code classification
+  result.isClientError = result.statusCode >= 400 && result.statusCode < 500;
+  result.isServerError = result.statusCode >= 500;
+
+  // Error type classification
+  if (result.statusCode === 429) {
+    result.errorType = 'rate_limit';
+  } else if (result.statusCode === 401 || result.statusCode === 403) {
+    result.errorType = 'auth';
+  } else if (result.statusCode === 404) {
+    result.errorType = 'not_found';
+  } else if (result.statusCode >= 500) {
+    result.errorType = 'server';
+  } else if (result.statusCode === 408 || result.statusCode === 504) {
+    result.errorType = 'timeout';
+  }
+}
+
+/** Get status text for common codes */
+function getStatusText(code: number): string {
+  const statusTexts: Record<number, string> = {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    408: 'Request Timeout',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+  };
+  return statusTexts[code] || '';
+}
+
+/**
+ * Format Unix timestamp (seconds) to relative time string
+ */
+export function formatRelativeTime(modifiedSeconds: number): string {
+  const now = Date.now();
+  const modified = modifiedSeconds * 1000; // Convert to milliseconds
+  const diff = now - modified;
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+
+  // Format as date for older logs
+  const date = new Date(modified);
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+/**
+ * Format bytes to human readable size
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Get status code badge color class
+ */
+export function getStatusColor(code: number): string {
+  if (code >= 500) return 'text-red-500';
+  if (code === 429) return 'text-orange-500';
+  if (code >= 400) return 'text-yellow-500';
+  return 'text-gray-500';
+}
+
+/**
+ * Get error type label
+ */
+export function getErrorTypeLabel(type: ParsedErrorLog['errorType']): string {
+  const labels: Record<string, string> = {
+    rate_limit: 'Rate Limited',
+    auth: 'Auth Error',
+    not_found: 'Not Found',
+    server: 'Server Error',
+    timeout: 'Timeout',
+    unknown: 'Error',
+  };
+  return labels[type] || 'Error';
+}