LogsPanel

Structured log display with categories

LogsPanel displays structured log entries with different levels (info, warn, error, debug), categories, and expandable data sections for detailed inspection.

Preview

Logs5 entries

Import

import

import { LogsPanel } from '@ash-cloud/ash-ui';

Usage

AgentLogs.tsx

import { LogsPanel } from '@ash-cloud/ash-ui';
import type { LogEntry } from '@ash-cloud/ash-ui/types';

function AgentLogs({ logs }: { logs: LogEntry[] }) {
  const [expandedLogId, setExpandedLogId] = useState<string | null>(null);

  return (
    <LogsPanel
      logs={logs}
      maxHeight={400}
      expandedLogId={expandedLogId}
      onToggleLog={(id) => setExpandedLogId(
        expandedLogId === id ? null : id
      )}
    />
  );
}

Props

Prop	Type	Default	Description
logs	LogEntry[]	required	Array of log entries to display
maxHeight	number	300	Max height before scrolling
expandedLogId	string \| null	null	Currently expanded log ID
onToggleLog	(id: string) => void	undefined	Callback when log is expanded/collapsed
className	string	undefined	Additional CSS classes

LogEntry Type

types.ts

type LogEntry = {
  timestamp: string;
  level: 'info' | 'warn' | 'error' | 'debug';
  category: 'setup' | 'skills' | 'execution' | 'process' | 'startup';
  message: string;
  data?: Record<string, unknown>;
};

Log Levels

info

General information

warn

Warning messages

error

Error conditions

debug

Debug details

Related Components

ToolCallCard

Tool execution display

JsonDisplay

Expandable log data display