gitspace 0.2.0-rc.20 → 0.2.0-rc.21

package/src/components/Events.tsx

@@ -1,137 +0,0 @@
-/**
- * Events - Shared Hook
- */
-
-import { useMemo, useState, useEffect, useCallback } from 'react';
-
-export interface WideEventItem {
-  eventId: string;
-  eventName: string;
-  level: string;
-  timestamp: string;
-  timestampMs?: number;
-  message: string;
-  processName?: string;
-  processInstance?: number;
-  sessionId?: string;
-  raw?: Record<string, unknown>;
-  kind?: 'source' | 'wide';
-  correlationId?: string;
-  timeline?: import("../types/events.js").WideEventTimelineItem[];
-  timelineMap?: import("../types/events.js").WideSnapshotTimelineMap;
-  timelineOrder?: string[];
-}
-
-export function toWideEventItem(event: import('../types/events.js').WideEvent): WideEventItem {
-  return {
-    eventId: event.eventId,
-    eventName: event.eventName,
-    level: event.level,
-    timestamp: event.timestamp,
-    timestampMs: event.timestampMs,
-    message: event.message,
-    processName: event.processName,
-    processInstance: event.processInstance,
-    sessionId: event.sessionId,
-    raw: event.raw,
-    kind: event.kind,
-    correlationId: event.correlationId,
-    timeline: event.timeline,
-    timelineMap: event.timelineMap,
-    timelineOrder: event.timelineOrder,
-  };
-}
-
-function getEventTimestamp(event: WideEventItem): number {
-  if (typeof event.timestampMs === 'number' && !Number.isNaN(event.timestampMs)) {
-    return event.timestampMs;
-  }
-  const parsed = Date.parse(event.timestamp);
-  return Number.isNaN(parsed) ? 0 : parsed;
-}
-
-function getEventKey(event: WideEventItem): string {
-  const processName = event.processName ?? 'unknown';
-  const instance = event.processInstance ?? 1;
-  const correlation = event.correlationId ?? event.eventId;
-  return `${processName}:${instance}:${correlation}`;
-}
-
-export interface UseEventsProps {
-  events: WideEventItem[];
-  liveEventIds: string[];
-  savedFilters: import("../types/events.js").SavedEventFilter[];
-  onSelectFilter: (filter: import("../types/events.js").SavedEventFilter | null) => void;
-  onClose: () => void;
-}
-
-export interface UseEventsReturn {
-  filtered: WideEventItem[];
-  selectedIndex: number;
-  selected: WideEventItem | null;
-  liveEventIds: string[];
-  savedFilters: import("../types/events.js").SavedEventFilter[];
-  activeFilterName: string | null;
-  selectIndex: (index: number) => void;
-  selectSavedFilter: (filter: import("../types/events.js").SavedEventFilter | null) => void;
-  close: () => void;
-}
-
-export function useEvents(props: UseEventsProps): UseEventsReturn {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [activeFilterName, setActiveFilterName] = useState<string | null>(null);
-  const [selectedKey, setSelectedKey] = useState<string | null>(null);
-
-  const filtered = useMemo(() => {
-    const wideEvents = props.events.filter((event) => event.kind === 'wide');
-    return [...wideEvents].sort((a, b) => getEventTimestamp(b) - getEventTimestamp(a));
-  }, [props.events]);
-
-  useEffect(() => {
-    if (!selectedKey && filtered.length > 0) {
-      setSelectedIndex((current) => (current === 0 ? current : 0));
-      setSelectedKey(getEventKey(filtered[0]));
-      return;
-    }
-
-    if (!selectedKey) return;
-    const nextIndex = filtered.findIndex((event) => getEventKey(event) === selectedKey);
-    if (nextIndex !== -1) {
-      setSelectedIndex((current) => (current === nextIndex ? current : nextIndex));
-      return;
-    }
-
-    if (nextIndex === -1 && filtered.length > 0) {
-      setSelectedIndex((current) => (current === 0 ? current : 0));
-      setSelectedKey(getEventKey(filtered[0]));
-    }
-  }, [filtered, selectedKey]);
-
-  const selected = filtered[selectedIndex] ?? null;
-
-  const selectSavedFilter = useCallback((filter: import("../types/events.js").SavedEventFilter | null) => {
-    setSelectedIndex(0);
-    setSelectedKey(null);
-    setActiveFilterName(filter?.name ?? null);
-    props.onSelectFilter(filter);
-  }, [props.onSelectFilter]);
-
-  const selectIndex = useCallback((index: number) => {
-    const clamped = Math.max(0, Math.min(index, filtered.length - 1));
-    setSelectedIndex(clamped);
-    const selectedEvent = filtered[clamped];
-    setSelectedKey(selectedEvent ? getEventKey(selectedEvent) : null);
-  }, [filtered]);
-
-  return {
-    filtered,
-    selectedIndex,
-    selected,
-    liveEventIds: props.liveEventIds,
-    savedFilters: props.savedFilters,
-    activeFilterName,
-    selectIndex,
-    selectSavedFilter,
-    close: props.onClose,
-  };
-}

package/src/components/Events.tui.tsx

@@ -1,129 +0,0 @@
-/**
- * Events - TUI Display Component
- */
-
-import type { UseEventsReturn } from './Events.js';
-
-const COLORS = {
-  border: '#555555',
-  title: '#00FF88',
-  text: '#FFFFFF',
-  textDim: '#888888',
-  selected: '#00AAFF',
-  info: '#3fb950',
-  warn: '#d29922',
-  error: '#f85149',
-};
-
-type TimelineEntry = {
-  eventName: string;
-  level: string;
-  timestamp: string;
-  message: string;
-};
-
-function formatEventTime(timestamp: string): string {
-  const parsed = Date.parse(timestamp);
-  if (Number.isNaN(parsed)) return timestamp;
-  const date = new Date(parsed);
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const seconds = date.getSeconds().toString().padStart(2, '0');
-  return `${hours}:${minutes}:${seconds}`;
-}
-
-function getLevelColor(level: string): string {
-  const normalized = level.toLowerCase();
-  if (normalized === 'error') return COLORS.error;
-  if (normalized === 'warn') return COLORS.warn;
-  return COLORS.info;
-}
-
-export function EventsTui(props: UseEventsReturn) {
-  const { filtered, selectedIndex, selected } = props;
-  const timeline = (selected?.timeline ?? []) as TimelineEntry[];
-
-  return (
-    <box flexDirection="column" flexGrow={1} width="100%" height="100%">
-      <box
-        flexDirection="row"
-        height={1}
-        width="100%"
-        backgroundColor="#222222"
-        paddingLeft={1}
-        paddingRight={1}
-      >
-        <text fg={COLORS.title}>Events</text>
-        <text fg={COLORS.textDim}> - Wide events</text>
-        <box flexGrow={1} />
-        <text fg={COLORS.textDim}>[Esc] Back</text>
-      </box>
-      <box flexDirection="row" flexGrow={1} width="100%">
-        <box
-          flexDirection="column"
-          width="45%"
-          border
-          borderStyle="single"
-          borderColor={COLORS.border}
-        >
-          <text fg={COLORS.title} paddingLeft={1} height={1}>
-            {' '}Wide events{' '}
-          </text>
-          <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} overflow="scroll">
-            {filtered.length === 0 ? (
-              <text fg={COLORS.textDim}>No wide events yet.</text>
-            ) : (
-              filtered.map((event, index) => {
-                const isSelected = index === selectedIndex;
-                const prefix = isSelected ? '>' : ' ';
-                const levelColor = getLevelColor(event.level);
-                return (
-                  <box key={event.eventId} flexDirection="row" height={1}>
-                    <text fg={isSelected ? COLORS.selected : COLORS.textDim}>{prefix}</text>
-                    <text fg={levelColor}> {event.level.toUpperCase()}</text>
-                    <text fg={COLORS.textDim}> {formatEventTime(event.timestamp)}</text>
-                    <text fg={isSelected ? COLORS.text : COLORS.textDim}> {event.correlationId ?? event.eventId}</text>
-                  </box>
-                );
-              })
-            )}
-          </box>
-        </box>
-        <box flexDirection="column" flexGrow={1} border borderStyle="single" borderColor={COLORS.border}>
-          <text fg={COLORS.title} paddingLeft={1} height={1}>
-            {' '}Timeline{' '}
-          </text>
-          <box flexDirection="column" paddingLeft={1} paddingTop={1} flexGrow={1} overflow="scroll">
-            {selected ? (
-              <box flexDirection="column">
-                <text fg={COLORS.text} height={1}>Correlation: {selected.correlationId ?? selected.eventId}</text>
-                <text fg={COLORS.textDim} height={1}>Latest: {selected.message}</text>
-                {selected.processName && (
-                  <text fg={COLORS.textDim} height={1}>Process: {selected.processName}</text>
-                )}
-                {selected.sessionId && (
-                  <text fg={COLORS.textDim} height={1}>Session: {selected.sessionId}</text>
-                )}
-                <box height={1} />
-                {timeline.length === 0 ? (
-                  <text fg={COLORS.textDim}>Collecting timeline...</text>
-                ) : (
-                  timeline.map((item, index) => (
-                    <box key={`${item.eventName}-${index}`} flexDirection="row" height={1}>
-                      <text fg={getLevelColor(item.level)}>{item.level.toUpperCase()}</text>
-                      <text fg={COLORS.textDim}> {formatEventTime(item.timestamp)}</text>
-                      <text fg={COLORS.text}> {item.eventName}</text>
-                      <text fg={COLORS.textDim}> - {item.message}</text>
-                    </box>
-                  ))
-                )}
-              </box>
-            ) : (
-              <text fg={COLORS.textDim}>Select a wide event to inspect.</text>
-            )}
-          </box>
-        </box>
-      </box>
-    </box>
-  );
-}

package/src/components/Events.web.tsx

@@ -1,386 +0,0 @@
-/** @jsxImportSource react */
-/**
- * Events - Web Display Component
- */
-
-import { useMemo, useState } from 'react';
-import type { UseEventsReturn } from './Events.js';
-
-const LEVEL_COLORS: Record<string, string> = {
-  error: '#f85149',
-  warn: '#d29922',
-  info: '#3fb950',
-};
-
-type TimelineBucket = {
-  label: string;
-  count: number;
-};
-
-type TimelinePoint = {
-  timestamp?: string;
-  timestampMs?: number;
-  processName?: string;
-  processInstance?: number;
-};
-
-function getTimelineTimestamp(event: TimelinePoint): number {
-  if (typeof event.timestampMs === 'number' && !Number.isNaN(event.timestampMs)) {
-    return event.timestampMs;
-  }
-  if (typeof event.timestamp === 'string') {
-    const parsed = Date.parse(event.timestamp);
-    if (!Number.isNaN(parsed)) {
-      return parsed;
-    }
-  }
-  return 0;
-}
-
-function buildTimelineBuckets(events: TimelinePoint[]): TimelineBucket[] {
-  if (events.length === 0) return [];
-  const timestamps = events.map((event) => getTimelineTimestamp(event));
-  const minTs = Math.min(...timestamps);
-  const maxTs = Math.max(...timestamps);
-  const rangeMs = Math.max(1, maxTs - minTs);
-
-  const bucketMs = rangeMs <= 15 * 60_000
-    ? 60_000
-    : rangeMs <= 2 * 60 * 60_000
-      ? 5 * 60_000
-      : rangeMs <= 12 * 60 * 60_000
-        ? 30 * 60_000
-        : 60 * 60_000;
-
-  const bucketCount = Math.max(6, Math.min(36, Math.ceil(rangeMs / bucketMs)));
-  const buckets: TimelineBucket[] = Array.from({ length: bucketCount }, (_, index) => ({
-    label: formatTimelineLabel(minTs + index * bucketMs),
-    count: 0,
-  }));
-
-  for (const timestamp of timestamps) {
-    const index = Math.min(bucketCount - 1, Math.floor((timestamp - minTs) / bucketMs));
-    buckets[index].count += 1;
-  }
-
-  return buckets;
-}
-
-function formatTimelineLabel(timestamp: number): string {
-  const date = new Date(timestamp);
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  return `${hours}:${minutes}`;
-}
-
-function formatEventTime(timestamp: string): string {
-  const parsed = Date.parse(timestamp);
-  if (Number.isNaN(parsed)) return timestamp;
-  const date = new Date(parsed);
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const seconds = date.getSeconds().toString().padStart(2, '0');
-  return `${hours}:${minutes}:${seconds}`;
-}
-
-function formatLevel(level: string): string {
-  return level.toLowerCase();
-}
-
-export function EventsWeb(props: UseEventsReturn & { workspaceLabel?: string | null }) {
-  const { filtered, selected, liveEventIds, savedFilters, activeFilterName, selectIndex, selectSavedFilter, close } = props;
-  const [search, setSearch] = useState('');
-
-  const filteredLogs = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    if (!query) return filtered;
-    return filtered.filter((event) =>
-      event.eventName.toLowerCase().includes(query) ||
-      event.message.toLowerCase().includes(query) ||
-      event.correlationId?.toLowerCase().includes(query)
-    );
-  }, [filtered, search]);
-
-  const timelineEvents = useMemo(() => {
-    if (!selected) return [] as Array<import('../types/events.js').WideSnapshotTimelineEntry>;
-    if (selected.timelineOrder && selected.timelineMap) {
-      return selected.timelineOrder
-        .map((key: string) => selected.timelineMap?.[key])
-        .filter((entry): entry is import('../types/events.js').WideSnapshotTimelineEntry => Boolean(entry));
-    }
-    if (selected.timeline && selected.timeline.length > 0) {
-      return selected.timeline.map((entry, index) => ({
-        ...entry,
-        key: `${entry.eventName}-${index + 1}`,
-        eventId: `${entry.eventName}-${index + 1}`,
-        processName: selected.processName,
-        processInstance: selected.processInstance,
-      }));
-    }
-    return [] as Array<import('../types/events.js').WideSnapshotTimelineEntry>;
-  }, [selected]);
-
-  const timelineBuckets = useMemo(() => buildTimelineBuckets(timelineEvents), [timelineEvents]);
-  const timelineMax = Math.max(1, ...timelineBuckets.map((bucket) => bucket.count));
-
-  const wideEvent = selected ?? null;
-
-  const processLabel = selected?.processName
-    ? `${selected.processName}${selected.processInstance ? `-${selected.processInstance}` : ''}`
-    : null;
-
-  return (
-    <div className="events-root h-visual-viewport w-full flex flex-col bg-[#0d1117] min-h-0">
-      <Header onBack={close} workspaceLabel={props.workspaceLabel} processLabel={processLabel} />
-      <div className="events-column flex-1 flex overflow-hidden min-h-0">
-        <div className="w-[38%] min-w-[320px] border-r border-[#30363d] flex flex-col min-h-0">
-          <div className="p-4 space-y-4 border-b border-[#30363d]">
-            <div>
-              <div className="text-xs text-[#6e7681] uppercase tracking-wide mb-2">Saved Filters</div>
-              <div className="space-y-2">
-                <button
-                  onClick={() => selectSavedFilter(null)}
-                  className={`w-full text-left text-xs truncate px-2 py-1 rounded ${activeFilterName === null ? 'bg-[#21262d] text-[#e6edf3]' : 'text-[#8b949e] hover:bg-[#161b22]'}`}
-                >
-                  All events
-                </button>
-                {savedFilters.length === 0 ? (
-                  <div className="text-xs text-[#8b949e]">No saved filters</div>
-                ) : (
-                  savedFilters.map((filter) => {
-                    const isActive = filter.name === activeFilterName;
-                    return (
-                      <button
-                        key={filter.name}
-                        onClick={() => selectSavedFilter(filter)}
-                        className={`w-full text-left text-xs truncate px-2 py-1 rounded ${isActive ? 'bg-[#21262d] text-[#e6edf3]' : 'text-[#8b949e] hover:bg-[#161b22]'}`}
-                      >
-                        {filter.name}
-                      </button>
-                    );
-                  })
-                )}
-              </div>
-            </div>
-            <div>
-              <div className="text-xs text-[#6e7681] uppercase tracking-wide mb-2">Search</div>
-              <input
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-                placeholder="Search event name or message"
-                className="w-full rounded bg-[#0d1117] border border-[#30363d] px-2 py-1 text-sm text-[#e6edf3] placeholder:text-[#6e7681] focus:outline-none focus:border-[#58a6ff]"
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-3 text-xs text-[#8b949e]">
-              <div>
-                <div className="text-[#6e7681]">Events</div>
-                <div className="text-[#e6edf3] text-sm">{filteredLogs.length}</div>
-              </div>
-              <div>
-                <div className="text-[#6e7681]">Live</div>
-                <div className="text-[#e6edf3] text-sm">{liveEventIds.length}</div>
-              </div>
-              <div>
-                <div className="text-[#6e7681]">Errors</div>
-                <div className="text-[#e6edf3] text-sm">
-                  {filteredLogs.filter((event) => formatLevel(event.level) === 'error').length}
-                </div>
-              </div>
-              <div>
-                <div className="text-[#6e7681]">Warnings</div>
-                <div className="text-[#e6edf3] text-sm">
-                  {filteredLogs.filter((event) => formatLevel(event.level) === 'warn').length}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="events-scroll flex-1 overflow-y-auto min-h-0">
-              {filteredLogs.length === 0 ? (
-                <div className="text-[#8b949e] text-center py-8">No wide events</div>
-              ) : (
-                filteredLogs.map((event, index) => {
-                  const isSelected = selected?.eventId === event.eventId;
-                  const level = formatLevel(event.level);
-                  const levelColor = LEVEL_COLORS[level] ?? '#8b949e';
-                  return (
-                    <div
-                      key={`${event.eventId}-${index}`}
-                      onClick={() => {
-                        const baseIndex = filtered.findIndex((item) => item.eventId === event.eventId);
-                        if (baseIndex >= 0) {
-                          selectIndex(baseIndex);
-                        }
-                      }}
-                      className={`px-4 py-3 border-b border-[#30363d] cursor-pointer ${isSelected ? 'bg-[#21262d] border-l-4 border-l-[#58a6ff]' : 'hover:bg-[#161b22]'}`}
-                    >
-                      <div className="flex items-center gap-2 text-xs text-[#6e7681]">
-                        <div className="uppercase" style={{ color: levelColor }}>{level}</div>
-                        <div>·</div>
-                        <div>{formatEventTime(event.timestamp)}</div>
-                        {event.processName && <div className="text-[#6e7681]">{event.processName}</div>}
-                      </div>
-                      <div className="text-[#e6edf3] text-sm font-medium truncate">
-                        Wide event {event.correlationId ? `· ${event.correlationId}` : ''}
-                      </div>
-                      <div className="text-[#8b949e] text-xs truncate">{event.message}</div>
-                    </div>
-                  );
-                })
-              )}
-
-          </div>
-        </div>
-        <div className="flex-1 flex flex-col min-h-0">
-            <div className="border-b border-[#30363d] p-4">
-              <div className="flex items-center justify-between mb-3">
-                <div className="text-xs text-[#6e7681] uppercase tracking-wide">
-                  {selected ? `${selected.eventName} timeline` : 'All events timeline'}
-                </div>
-                <div className="text-xs text-[#6e7681]">{timelineEvents.length} events</div>
-              </div>
-              {timelineBuckets.length === 0 ? (
-                <div className="text-[#8b949e] text-sm">No timeline data</div>
-              ) : (
-                <div className="flex items-end gap-1 h-24">
-                  {timelineBuckets.map((bucket, index) => (
-                    <div key={`${bucket.label}-${index}`} className="flex-1 flex flex-col items-center gap-2">
-                      <div
-                        className="w-full rounded bg-[#30363d]"
-                        style={{
-                          height: `${Math.max(6, (bucket.count / timelineMax) * 96)}px`,
-                          backgroundColor: selected ? '#58a6ff' : '#3fb950',
-                        }}
-                      />
-                      <div className="text-[10px] text-[#6e7681] truncate w-full text-center">
-                        {bucket.label}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            <div className="events-scroll flex-1 overflow-y-auto p-4 min-h-0">
-            {selected ? (
-              <div className="space-y-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <div className="text-[#e6edf3] text-lg font-semibold">Wide Event</div>
-                    <div className="text-xs text-[#6e7681]">{selected.correlationId ?? selected.eventId}</div>
-                  </div>
-                  {wideEvent && (
-                    <button
-                      onClick={() => navigator.clipboard.writeText(JSON.stringify(wideEvent.raw ?? wideEvent, null, 2))}
-                      className="text-xs px-2 py-1 rounded bg-[#21262d] hover:bg-[#30363d] text-[#e6edf3]"
-                    >
-                      Copy JSON
-                    </button>
-                  )}
-                </div>
-                <div className="grid grid-cols-2 gap-3 text-sm text-[#8b949e]">
-                  <div>
-                    <div className="text-xs text-[#6e7681]">Latest Level</div>
-                    <div className="text-[#e6edf3]">{formatLevel(selected.level)}</div>
-                  </div>
-                  <div>
-                    <div className="text-xs text-[#6e7681]">Latest Timestamp</div>
-                    <div className="text-[#e6edf3]">{selected.timestamp}</div>
-                  </div>
-                  <div>
-                    <div className="text-xs text-[#6e7681]">Process</div>
-                    <div className="text-[#e6edf3]">
-                      {selected.processName ? `${selected.processName}${selected.processInstance ? `#${selected.processInstance}` : ''}` : '—'}
-                    </div>
-                  </div>
-                  <div>
-                    <div className="text-xs text-[#6e7681]">Session</div>
-                    <div className="text-[#e6edf3]">{selected.sessionId ?? '—'}</div>
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs text-[#6e7681] uppercase tracking-wide mb-2">Latest Message</div>
-                  <div className="text-[#e6edf3] text-sm">{selected.message}</div>
-                </div>
-                <div>
-                  <div className="text-xs text-[#6e7681] uppercase tracking-wide mb-2">Source Timeline</div>
-                  {timelineEvents.length > 0 ? (
-                    <div className="space-y-2">
-                      {timelineEvents.map((item, index) => (
-                        <div key={`${item.eventName}-${index}`} className="border border-[#30363d] rounded px-3 py-2">
-                          <div className="flex items-center gap-2 text-xs text-[#6e7681]">
-                            <div className="uppercase" style={{ color: LEVEL_COLORS[formatLevel(item.level)] ?? '#8b949e' }}>
-                              {formatLevel(item.level)}
-                            </div>
-                            <div>·</div>
-                            <div>{formatEventTime(item.timestamp)}</div>
-                          </div>
-                          <div className="text-sm text-[#e6edf3]">{item.eventName}</div>
-                          <div className="text-xs text-[#8b949e]">{item.message}</div>
-                          {typeof item.processName === 'string' && (
-                            <div className="text-[11px] text-[#6e7681]">
-                              {item.processName}
-                              {typeof item.processInstance === 'number' ? `#${item.processInstance}` : ''}
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="text-[#8b949e] text-sm">Collecting timeline...</div>
-                  )}
-                </div>
-                {wideEvent && (
-                  <div>
-                    <div className="text-xs text-[#6e7681] uppercase tracking-wide mb-2">Raw Wide Event</div>
-                    <pre className="text-xs bg-[#0d1117] border border-[#30363d] rounded p-3 text-[#e6edf3] overflow-x-auto">
-                      {JSON.stringify(wideEvent.raw ?? wideEvent, null, 2)}
-                    </pre>
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div className="text-[#8b949e]">Select a wide event to inspect</div>
-            )}
-
-            </div>
-
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Header({
-  onBack,
-  workspaceLabel,
-  processLabel,
-}: {
-  onBack: () => void;
-  workspaceLabel?: string | null;
-  processLabel?: string | null;
-}) {
-  return (
-    <div className="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-[#30363d]">
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onBack}
-          className="text-sm text-[#8b949e] hover:text-[#e6edf3] active:text-[#22c55e] py-2 pr-2 -ml-2 min-h-[44px] flex items-center"
-        >
-          ← <span className="hidden sm:inline ml-1">Back</span>
-        </button>
-        <div>
-          <div className="text-[#e6edf3] font-medium">Events</div>
-          {workspaceLabel && (
-            <div className="text-xs text-[#6e7681]">Workspace: {workspaceLabel}</div>
-          )}
-          {processLabel && (
-            <div className="text-xs text-[#6e7681]">Process: {processLabel}</div>
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-3 text-xs text-[#6e7681]">
-        <span>J/K: Navigate</span>
-        <span>Esc: Close</span>
-      </div>
-    </div>
-  );
-}