2d4fca4fa6
Replace ad-hoc local type definitions in element components with real
MCP SDK types and Inspector wrapper types from core/mcp/types.ts:
Schema-typed primitives:
- LogLevelBadge: LogLevel → LoggingLevel (SDK)
- TransportBadge: "stdio"|"http" → ServerType (core), add sse/streamable-http
- TaskStatusBadge: local TaskStatus → SDK TaskStatus (working/input_required/...)
- ServerStatusIndicator: inline union → ConnectionStatus (core), "failed"→"error"
MCP wrapper consumers:
- AnnotationBadge: label+variant → facet+value with SDK Role type
- CapabilityItem: name:string → capability:keyof ServerCapabilities|ClientCapabilities
- LogEntry: flat props → entry:{receivedAt:Date, params:LoggingMessageNotification["params"]}
- MessageBubble: flat props → message:SamplingMessage|PromptMessage
- ProgressDisplay: flat props → params:ProgressNotification["params"]
Composite-input elements:
- ContentViewer: type+content+mimeType → block:ContentBlock (SDK discriminated union)
- InlineError: message+details → error:{message,data?}
- ConnectionToggle: checked+loading+onChange → status:ConnectionStatus+onConnect/onDisconnect
Also updates all group/screen/view consumers to keep the build green,
and renames CSS variable --inspector-status-failed → --inspector-status-error.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import { useMemo } from "react";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Group,
|
|
Paper,
|
|
ScrollArea,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { LogEntry } from "../../elements/LogEntry/LogEntry";
|
|
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
|
|
|
|
export interface LogStreamPanelProps {
|
|
entries: LogEntryData[];
|
|
filterText: string;
|
|
visibleLevels: Record<string, boolean>;
|
|
autoScroll: boolean;
|
|
onToggleAutoScroll: () => void;
|
|
onCopyAll: () => void;
|
|
onClear: () => void;
|
|
onExport: () => void;
|
|
}
|
|
|
|
const PanelContainer = Paper.withProps({
|
|
withBorder: true,
|
|
p: "lg",
|
|
flex: 1,
|
|
variant: "panel",
|
|
});
|
|
|
|
const ToolbarButton = Button.withProps({
|
|
variant: "light",
|
|
size: "sm",
|
|
});
|
|
|
|
const EmptyCenter = Stack.withProps({
|
|
flex: 1,
|
|
align: "center",
|
|
justify: "center",
|
|
});
|
|
|
|
function formatData(data: unknown): string {
|
|
if (data === undefined || data === null) return "";
|
|
if (typeof data === "string") return data;
|
|
return JSON.stringify(data);
|
|
}
|
|
|
|
function matchesFilters(
|
|
entry: LogEntryData,
|
|
filterText: string,
|
|
visibleLevels: Record<string, boolean>,
|
|
): boolean {
|
|
if (!visibleLevels[entry.params.level]) return false;
|
|
if (filterText) {
|
|
const term = filterText.toLowerCase();
|
|
const searchable =
|
|
`${formatData(entry.params.data)} ${entry.params.logger ?? ""} ${entry.params.level}`.toLowerCase();
|
|
if (!searchable.includes(term)) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
export function LogStreamPanel({
|
|
entries,
|
|
filterText,
|
|
visibleLevels,
|
|
autoScroll,
|
|
onToggleAutoScroll,
|
|
onCopyAll,
|
|
onClear,
|
|
onExport,
|
|
}: LogStreamPanelProps) {
|
|
const filteredEntries = useMemo(
|
|
() => entries.filter((e) => matchesFilters(e, filterText, visibleLevels)),
|
|
[entries, filterText, visibleLevels],
|
|
);
|
|
|
|
return (
|
|
<PanelContainer>
|
|
<Group justify="space-between" mb="sm">
|
|
<Title order={4}>Log Stream</Title>
|
|
<Group>
|
|
<Checkbox
|
|
label="Auto-scroll"
|
|
checked={autoScroll}
|
|
onChange={onToggleAutoScroll}
|
|
/>
|
|
<ToolbarButton onClick={onClear}>Clear</ToolbarButton>
|
|
<ToolbarButton onClick={onExport}>Export</ToolbarButton>
|
|
<ToolbarButton onClick={onCopyAll}>Copy All</ToolbarButton>
|
|
</Group>
|
|
</Group>
|
|
{filteredEntries.length > 0 ? (
|
|
<ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
|
|
<Stack gap="xs">
|
|
{filteredEntries.map((entry, index) => (
|
|
<LogEntry key={index} entry={entry} />
|
|
))}
|
|
</Stack>
|
|
</ScrollArea.Autosize>
|
|
) : (
|
|
<EmptyCenter>
|
|
<Text c="dimmed">No log entries</Text>
|
|
</EmptyCenter>
|
|
)}
|
|
</PanelContainer>
|
|
);
|
|
}
|