00001| /** 00002| * Traces TUI Application 00003| * 00004| * Built with OpenTUI + Solid.js for terminal rendering. 00005| * Requires Bun runtime. 00006| */ 00007| 00008| import { render, useKeyboard, useTerminalDimensions, useRenderer } from '@opentui/solid'; 00009| import { ScrollBoxRenderable } from '@opentui/core'; 00010| import { createSignal, createEffect, createMemo, onCleanup, For, Show } from 'solid-js'; 00011| 00012| import { registry } from '../adapters/index.js'; 00013| import type { TraceMetadata, TraceContent, AgentId, TraceEvent } from '../types.js'; 00014| import { isApiConfigured, createApi, getFrontendUrl } from '../services/api.js'; 00015| import { isAuthenticated } from '../services/auth.js'; 00016| import { startCliAuth, waitForCliAuth, completeCliAuth } from '../services/cli-auth.js'; 00017| import { saveCredentials, getOrCreateDeviceId } from '../core/auth-config.js'; 00018| import { copyToClipboard } from '../services/clipboard.js'; 00019| import { openInBrowser } from '../services/open-browser.js'; 00020| import { conversationView, fullView, type ConversationViewItem, type FullViewItem } from './utils/transforms.js'; 00021| import { clampActionIndex, formatTimeOnly, getDateCategory, padLine, shortenDirectory, truncate } from './utils/format.js'; 00022| import { EventStore } from '../core/event-store.js'; 00023| import { TraceController } from '../core/trace-controller.js'; 00024| import type { Trace } from '../core/trace.js'; 00025| import { defaultConfig } from '../config.js'; 00026| import { loadRemoteConfig, mergeConfig, type AppConfig } from '../services/config-loader.js'; 00027| import { checkForUpdates, getAutoupdatePolicy, getCurrentVersion, upgrade, type UpdateInfo } from '../services/update.js'; 00028| import { getRequestHistory, formatRequestSummary, formatRequestDetail, formatRequestForClipboard, subscribeToHistory, type RequestRecord } from '../services/request-history.js'; 00029| 00030| // Colors 00031| const colors = { 00032| primary: '#AAA0FA', 00033| success: '#bef264', 00034| error: '#f87171', 00035| text: '#e5e5e5', 00036| muted: '#737373', 00037| border: '#404040', 00038| button: '#525252', 00039| bg: '#171717', 00040| selected: '#2a2a2a', 00041| accent: '#60a5fa', 00042| // Agent-specific colors 00043| agents: { 00044| 'claude-code': '#f97316', // orange 00045| 'opencode': '#22c55e', // green 00046| 'cursor': '#8b5cf6', // purple 00047| } as Record, 00048| }; 00049| 00050| 00051| /** 00052| * Fixed column widths for list view (used to calculate remaining space for URL) 00053| * Time(10) + Directory(14) + Agent(13) + Msgs(6) + Gap(1) + Preview(50) + Indicator(2) + paddingLeft(2) + paddingRight(2) 00054| */ 00055| const LIST_FIXED_COLUMNS_WIDTH = 10 + 14 + 13 + 6 + 1 + 50 + 2 + 2 + 2; 00056| 00057| /** 00058| * Group item - either a header or a session 00059| */ 00060| type ListItem = 00061| | { type: 'header'; text: string } 00062| | { type: 'session'; session: TraceMetadata; flatIndex: number }; 00063| 00064| /** 00065| * Detail view state - session metadata + content 00066| */ 00067| interface DetailState { 00068| session: TraceMetadata; 00069| content: TraceContent; 00070| } 00071| 00072| /** 00073| * Upload state for share feature 00074| */ 00075| interface UploadState { 00076| status: 'queued' | 'uploading'; 00077| operation: 'share' | 'unshare' | 'refresh'; 00078| } 00079| 00080| type SessionAction = 'open' | 'copy' | 'refresh' | 'unshare' | 'share'; 00081| 00082| const SESSION_ACTION_LABELS: Record = { 00083| open: 'Open Link', 00084| copy: 'Copy Link', 00085| refresh: 'Refresh', 00086| unshare: 'Unshare', 00087| share: 'Share', 00088| }; 00089| 00090| /** 00091| * Main App Component 00092| */ 00093| function App() { 00094| const isDev = process.env.NODE_ENV !== 'production'; 00095| const dimensions = useTerminalDimensions(); 00096| const renderer = useRenderer(); 00097| 00098| // State 00099| const [sessions, setSessions] = createSignal([]); 00100| const [selectedFlatIndex, setSelectedFlatIndex] = createSignal(0); 00101| const [listActionIndex, setListActionIndex] = createSignal(0); 00102| const [view, setView] = createSignal<'list' | 'detail'>('list'); 00103| const [detailState, setDetailState] = createSignal(null); 00104| const [detailActionIndex, setDetailActionIndex] = createSignal(0); 00105| const [loading, setLoading] = createSignal(true); 00106| 00107| // Update state 00108| const [appVersion, setAppVersion] = createSignal(''); 00109| const [updateInfo, setUpdateInfo] = createSignal(null); 00110| const [updateState, setUpdateState] = createSignal<'idle' | 'checking' | 'available' | 'updating' | 'updated' | 'error'>('idle'); 00111| const [updateError, setUpdateError] = createSignal(null); 00112| 00113| // Share state 00114| const [sharedSessions, setSharedSessions] = createSignal>(new Set()); 00115| const [uploadStates, setUploadStates] = createSignal>(new Map()); 00116| const [lastUploadError, setLastUploadError] = createSignal(null); 00117| const [blinkOn, setBlinkOn] = createSignal(true); 00118| 00119| // Message counts per session (cached for list view) 00120| const [messageCounts, setMessageCounts] = createSignal>(new Map()); 00121| const [messageCountTimestamps, setMessageCountTimestamps] = createSignal>(new Map()); 00122| 00123| // Detail view mode: 'conversation' (default) or 'full' 00124| const [viewMode, setViewMode] = createSignal<'conversation' | 'full'>('conversation'); 00125| 00126| // Confirmation dialog for large sessions 00127| const [confirmDialog, setConfirmDialog] = createSignal<{ session: TraceMetadata; messageCount: number } | null>(null); 00128| const [unshareDialog, setUnshareDialog] = createSignal(null); 00129| const [openBrowserDialog, setOpenBrowserDialog] = createSignal(null); 00130| const [shareErrorDialog, setShareErrorDialog] = createSignal(null); 00131| 00132| // Share dialog state 00133| type ShareDialogState = 00134| | { type: 'login-required'; countdown: number; pendingSession: TraceMetadata } 00135| | { type: 'logging-in'; pendingSession: TraceMetadata } 00136| | { type: 'sharing'; session: TraceMetadata } 00137| | { type: 'complete'; session: TraceMetadata; url: string }; 00138| const [shareDialog, setShareDialog] = createSignal(null); 00139| let shareLoginCountdownInterval: ReturnType | null = null; 00140| const [askOpenBrowserEveryTime, setAskOpenBrowserEveryTime] = createSignal(true); 00141| const [confirmDialogActionIndex, setConfirmDialogActionIndex] = createSignal(0); 00142| const [unshareDialogActionIndex, setUnshareDialogActionIndex] = createSignal(0); 00143| const [openBrowserDialogActionIndex, setOpenBrowserDialogActionIndex] = createSignal(1); 00144| const [shareCompleteDialogActionIndex, setShareCompleteDialogActionIndex] = createSignal(0); 00145| 00146| const [diagnosticsVisible, setDiagnosticsVisible] = createSignal(false); 00147| const [diagnostics, setDiagnostics] = createSignal({ 00148| initialLoadMs: 0, 00149| controllerStartMs: 0, 00150| listFetchMs: 0, 00151| messageCountMs: 0, 00152| lastRefreshMs: 0, 00153| lastRefreshAt: 0, 00154| }); 00155| 00156| // Request history for debugging (press 'r') 00157| const [requestHistoryVisible, setRequestHistoryVisible] = createSignal(false); 00158| const [requestHistory, setRequestHistory] = createSignal([]); 00159| const [selectedRequestIndex, setSelectedRequestIndex] = createSignal(0); 00160| const [requestDetailVisible, setRequestDetailVisible] = createSignal(false); 00161| const [copiedFeedback, setCopiedFeedback] = createSignal(false); 00162| let requestHistoryScroll: ScrollBoxRenderable | undefined; 00163| let requestDetailScroll: ScrollBoxRenderable | undefined; 00164| 00165| const [runtimeConfig, setRuntimeConfig] = createSignal(defaultConfig); 00166| const [remoteConfig, setRemoteConfig] = createSignal(null); 00167| 00168| const diagnosticsLines = () => { 00169| const remoteLine = remoteConfig() 00170| ? `Remote config: list=${remoteConfig()!.sessionListLimit}, warn=${remoteConfig()!.largeSessionWarningThreshold}, readOnly=${remoteConfig()!.readOnlyMode ? 'on' : 'off'}` 00171| : 'Remote config: none'; 00172| 00173| const reqHistory = requestHistory(); 00174| const recentErrors = reqHistory.filter(r => r.error).length; 00175| const requestLine = `Requests: ${reqHistory.length} recorded, ${recentErrors} errors`; 00176| 00177| return [ 00178| `Initial load: ${diagnostics().initialLoadMs}ms`, 00179| `Controller start: ${diagnostics().controllerStartMs}ms`, 00180| `List fetch: ${diagnostics().listFetchMs}ms`, 00181| `Message count: ${diagnostics().messageCountMs}ms`, 00182| `Last refresh: ${diagnostics().lastRefreshMs}ms`, 00183| remoteLine, 00184| requestLine, 00185| `TRACES_URL: ${process.env.TRACES_URL ?? 'unset'}`, 00186| `TRACES_HTTP_URL: ${process.env.TRACES_HTTP_URL ?? 'unset'}`, 00187| `TRACES_API_URL: ${process.env.TRACES_API_URL ?? 'unset'}`, 00188| ]; 00189| }; 00190| 00191| 00192| const getStatusLabelForSession = (sessionId: string) => { 00193| const state = uploadStates().get(sessionId); 00194| if (!state) return null; 00195| if (state.status === 'queued') return 'Queued…'; 00196| if (state.operation === 'refresh') return 'Refreshing…'; 00197| return state.operation === 'unshare' ? 'Unsharing…' : 'Sharing…'; 00198| }; 00199| 00200| const getSessionActions = (isShared: boolean, statusLabel: string | null): SessionAction[] => { 00201| if (statusLabel) return []; 00202| return isShared ? ['open', 'copy', 'refresh', 'unshare'] : ['share']; 00203| }; 00204| 00205| // Scroll refs 00206| let listScroll: ScrollBoxRenderable | undefined; 00207| let detailScroll: ScrollBoxRenderable | undefined; 00208| let lastClickSessionId: string | null = null; 00209| let lastClickAt = 0; 00210| const doubleClickThresholdMs = 350; 00211| 00212| const eventStore = new EventStore(); 00213| const api = createApi(); 00214| const controller = new TraceController(eventStore, registry, api); 00215| const unsubscribeUploadStates = controller.addUploadListener((sessionId, state) => { 00216| setUploadStates((prev) => { 00217| const next = new Map(prev); 00218| if (!state) { 00219| next.delete(sessionId); 00220| } else { 00221| next.set(sessionId, state); 00222| } 00223| return next; 00224| }); 00225| }); 00226| let listInterval: ReturnType | null = null; 00227| let detailUnsubscribeAdapter: (() => void) | null = null; 00228| let updateTimeout: ReturnType | null = null; 00229| let lastDetailSessionId: string | null = null; 00230| 00231| /** 00232| * Build grouped list with headers 00233| */ 00234| const groupedList = createMemo((): ListItem[] => { 00235| const sessionList = sessions(); 00236| if (sessionList.length === 0) return []; 00237| 00238| const items: ListItem[] = []; 00239| let currentCategory = ''; 00240| let flatIndex = 0; 00241| 00242| for (const session of sessionList) { 00243| const category = getDateCategory(session.timestamp); 00244| 00245| // Add header if category changed 00246| if (category !== currentCategory) { 00247| currentCategory = category; 00248| items.push({ type: 'header', text: category }); 00249| } 00250| 00251| items.push({ type: 'session', session, flatIndex }); 00252| flatIndex++; 00253| } 00254| 00255| return items; 00256| }); 00257| 00258| /** 00259| * Get session items only (for navigation) 00260| */ 00261| const sessionItems = createMemo(() => 00262| groupedList().filter((item): item is { type: 'session'; session: TraceMetadata; flatIndex: number } => 00263| item.type === 'session' 00264| ) 00265| ); 00266| 00267| createEffect(() => { 00268| const session = sessions()[selectedFlatIndex()]; 00269| if (!session) return; 00270| const statusLabel = getStatusLabelForSession(session.id); 00271| const actions = getSessionActions(sharedSessions().has(session.id), statusLabel); 00272| setListActionIndex((prev) => clampActionIndex(prev, actions.length)); 00273| }); 00274| 00275| createEffect(() => { 00276| const detail = detailState(); 00277| if (!detail) { 00278| lastDetailSessionId = null; 00279| return; 00280| } 00281| if (detail.session.id !== lastDetailSessionId) { 00282| lastDetailSessionId = detail.session.id; 00283| setDetailActionIndex(0); 00284| } 00285| const statusLabel = getStatusLabelForSession(detail.session.id); 00286| const actions = getSessionActions(sharedSessions().has(detail.session.id), statusLabel); 00287| setDetailActionIndex((prev) => clampActionIndex(prev, actions.length)); 00288| }); 00289| 00290| createEffect(() => { 00291| if (confirmDialog()) { 00292| setConfirmDialogActionIndex(0); 00293| } 00294| }); 00295| 00296| createEffect(() => { 00297| if (unshareDialog()) { 00298| setUnshareDialogActionIndex(0); 00299| } 00300| }); 00301| 00302| createEffect(() => { 00303| if (openBrowserDialog()) { 00304| setOpenBrowserDialogActionIndex(1); 00305| } 00306| }); 00307| 00308| /** 00309| * Get current view items for detail view 00310| */ 00311| const currentViewItems = createMemo(() => { 00312| const detail = detailState(); 00313| if (!detail) return []; 00314| 00315| const mode = viewMode(); 00316| if (mode === 'full') { 00317| return fullView(detail.content.events).items; 00318| } 00319| return conversationView(detail.content.events).items; 00320| }); 00321| 00322| const footerMessage = createMemo(() => { 00323| const base = view() === 'list' 00324| ? `Displaying ${sessions().length} traces from ${controller.getAdapterCount()} agents. Press SPACEBAR to toggle sharing.` 00325| : `${currentViewItems().length} items (${viewMode()} view).`; 00326| const versionLabel = appVersion() ? `Traces v${appVersion()}` : 'Traces'; 00327| const status = updateState(); 00328| const latest = updateInfo()?.latestVersion; 00329| const updateLabel = (() => { 00330| if (status === 'available' && latest) return `Update available v${latest}`; 00331| if (status === 'updating') return 'Updating...'; 00332| if (status === 'updated' && latest) return `Updated to v${latest}`; 00333| if (status === 'error') return updateError() ?? 'Update failed'; 00334| return ''; 00335| })(); 00336| return `${base} ${versionLabel}${updateLabel ? ` · ${updateLabel}` : ''}`; 00337| }); 00338| 00339| /** 00340| * Clean exit - properly destroys renderer and restores terminal 00341| */ 00342| function exit() { 00343| renderer.setTerminalTitle(''); 00344| renderer.destroy(); 00345| process.exit(0); 00346| } 00347| 00348| // Load sessions on mount 00349| createEffect(async () => { 00350| try { 00351| setRuntimeConfig(defaultConfig); 00352| eventStore.setMaxEventBytes(defaultConfig.maxEventBytes); 00353| api.setMaxBatchBytes(defaultConfig.maxBatchBytes); 00354| api.setMaxBatchItems(defaultConfig.maxBatchItems); 00355| 00356| const remoteOverrides = await loadRemoteConfig(); 00357| if (remoteOverrides) { 00358| const merged = mergeConfig(defaultConfig, remoteOverrides); 00359| setRuntimeConfig(merged); 00360| setRemoteConfig(merged); 00361| eventStore.setMaxEventBytes(merged.maxEventBytes); 00362| api.setMaxBatchBytes(merged.maxBatchBytes); 00363| api.setMaxBatchItems(merged.maxBatchItems); 00364| } 00365| 00366| const loadStart = Date.now(); 00367| 00368| // Start controller - loads sessions and restores subscriptions 00369| const controllerStart = Date.now(); 00370| await controller.start(); 00371| const controllerEnd = Date.now(); 00372| 00373| const listStart = Date.now(); 00374| const initialSessions = await controller.list(runtimeConfig().sessionListLimit); 00375| const listEnd = Date.now(); 00376| setSessions(initialSessions.map(s => s.toMetadata())); 00377| setSharedSessions(new Set(initialSessions.filter(s => s.isShared()).map(s => s.id))); 00378| 00379| setDiagnostics((prev) => ({ 00380| ...prev, 00381| controllerStartMs: controllerEnd - controllerStart, 00382| listFetchMs: listEnd - listStart, 00383| initialLoadMs: Date.now() - loadStart, 00384| })); 00385| 00386| setLoading(false); 00387| void refreshMessageCounts(initialSessions.map(s => s.toMetadata())); 00388| 00389| // Periodic refresh 00390| listInterval = setInterval(async () => { 00391| try { 00392| const refreshStart = Date.now(); 00393| const refreshed = await controller.list(runtimeConfig().sessionListLimit); 00394| setSessions(refreshed.map(s => s.toMetadata())); 00395| setSharedSessions(new Set(refreshed.filter(s => s.isShared()).map(s => s.id))); 00396| void refreshMessageCounts(refreshed.map(s => s.toMetadata())); 00397| setDiagnostics((prev) => ({ 00398| ...prev, 00399| lastRefreshMs: Date.now() - refreshStart, 00400| lastRefreshAt: Date.now(), 00401| })); 00402| } catch { 00403| // Ignore refresh failures 00404| } 00405| }, 2000); 00406| 00407| } catch (err) { 00408| console.error('Error loading sessions:', err); 00409| setLoading(false); 00410| } 00411| }); 00412| 00413| // Auto-update check (delayed) 00414| createEffect(() => { 00415| updateTimeout = setTimeout(async () => { 00416| try { 00417| setUpdateState('checking'); 00418| setUpdateError(null); 00419| setAppVersion(await getCurrentVersion()); 00420| const info = await checkForUpdates(); 00421| if (!info) { 00422| setUpdateState('idle'); 00423| return; 00424| } 00425| setUpdateInfo(info); 00426| setUpdateState('available'); 00427| 00428| if (getAutoupdatePolicy() === true) { 00429| setUpdateState('updating'); 00430| const result = await upgrade({ info }); 00431| if (result.status === 'updated') { 00432| setUpdateState('updated'); 00433| if (result.version) setAppVersion(result.version); 00434| } else if (result.status === 'error') { 00435| setUpdateState('error'); 00436| setUpdateError(result.message ?? 'Update failed'); 00437| } else { 00438| setUpdateState('available'); 00439| } 00440| } 00441| } catch (err) { 00442| setUpdateState('error'); 00443| setUpdateError(err instanceof Error ? err.message : 'Update failed'); 00444| } 00445| }, 1000); 00446| }); 00447| 00448| // Blink interval for live indicator 00449| let blinkInterval: ReturnType | null = null; 00450| 00451| createEffect(() => { 00452| const hasShared = sharedSessions().size > 0; 00453| if (hasShared && !blinkInterval) { 00454| blinkInterval = setInterval(() => { 00455| setBlinkOn(prev => !prev); 00456| }, 500); 00457| return; 00458| } 00459| 00460| if (!hasShared && blinkInterval) { 00461| clearInterval(blinkInterval); 00462| blinkInterval = null; 00463| setBlinkOn(true); 00464| } 00465| }); 00466| 00467| // Subscribe to request history updates 00468| const unsubscribeHistory = subscribeToHistory(() => { 00469| setRequestHistory(getRequestHistory()); 00470| }); 00471| 00472| // Cleanup on unmount 00473| onCleanup(() => { 00474| if (listInterval) clearInterval(listInterval); 00475| if (blinkInterval) clearInterval(blinkInterval); 00476| if (updateTimeout) clearTimeout(updateTimeout); 00477| if (shareLoginCountdownInterval) clearInterval(shareLoginCountdownInterval); 00478| detailUnsubscribeAdapter?.(); 00479| unsubscribeUploadStates(); 00480| unsubscribeHistory(); 00481| controller.destroy(); 00482| eventStore.close(); 00483| }); 00484| 00485| // Handle keyboard input 00486| useKeyboard((key) => { 00487| // Global quit 00488| if (key.name === 'q' || (key.ctrl && key.name === 'c')) { 00489| exit(); 00490| } 00491| 00492| // Handle confirmation dialogs 00493| if (shareDialog()) { 00494| handleShareDialogKeypress(key); 00495| return; 00496| } 00497| if (openBrowserDialog()) { 00498| handleOpenBrowserDialogKeypress(key); 00499| return; 00500| } 00501| if (confirmDialog()) { 00502| handleConfirmDialogKeypress(key); 00503| return; 00504| } 00505| if (unshareDialog()) { 00506| handleUnshareDialogKeypress(key); 00507| return; 00508| } 00509| if (shareErrorDialog()) { 00510| handleShareErrorDialogKeypress(key); 00511| return; 00512| } 00513| 00514| if (key.name === 'd') { 00515| setDiagnosticsVisible((prev) => !prev); 00516| setRequestHistoryVisible(false); 00517| setRequestDetailVisible(false); 00518| return; 00519| } 00520| 00521| // Request history panel - press 'r' 00522| if (key.name === 'r') { 00523| setRequestHistory(getRequestHistory()); 00524| setRequestHistoryVisible((prev) => !prev); 00525| setDiagnosticsVisible(false); 00526| setRequestDetailVisible(false); 00527| setSelectedRequestIndex(0); 00528| return; 00529| } 00530| 00531| // Handle request history navigation 00532| if (requestHistoryVisible()) { 00533| handleRequestHistoryKeypress(key); 00534| return; 00535| } 00536| 00537| // Handle request detail navigation 00538| if (requestDetailVisible()) { 00539| handleRequestDetailKeypress(key); 00540| return; 00541| } 00542| 00543| if (view() === 'list') { 00544| handleListKeypress(key); 00545| } else { 00546| handleDetailKeypress(key); 00547| } 00548| }); 00549| 00550| function handleConfirmDialogKeypress(key: { name: string }) { 00551| const dialog = confirmDialog(); 00552| if (!dialog) return; 00553| 00554| if (key.name === 'left' || key.name === 'right') { 00555| const delta = key.name === 'left' ? -1 : 1; 00556| setConfirmDialogActionIndex((prev) => clampActionIndex(prev + delta, 2)); 00557| return; 00558| } 00559| 00560| if (key.name === 'return' || key.name === 'space') { 00561| if (confirmDialogActionIndex() === 0) { 00562| setConfirmDialog(null); 00563| shareSession(dialog.session, true); 00564| } else { 00565| setConfirmDialog(null); 00566| } 00567| return; 00568| } 00569| 00570| if (key.name === 'y') { 00571| // Proceed with share 00572| setConfirmDialog(null); 00573| shareSession(dialog.session, true); 00574| } else if (key.name === 'n' || key.name === 'escape') { 00575| // Cancel 00576| setConfirmDialog(null); 00577| } 00578| } 00579| 00580| function handleUnshareDialogKeypress(key: { name: string }) { 00581| const dialog = unshareDialog(); 00582| if (!dialog) return; 00583| 00584| if (key.name === 'left' || key.name === 'right') { 00585| const delta = key.name === 'left' ? -1 : 1; 00586| setUnshareDialogActionIndex((prev) => clampActionIndex(prev + delta, 2)); 00587| return; 00588| } 00589| 00590| if (key.name === 'return' || key.name === 'space') { 00591| if (unshareDialogActionIndex() === 0) { 00592| setUnshareDialog(null); 00593| unshareSession(dialog); 00594| } else { 00595| setUnshareDialog(null); 00596| } 00597| return; 00598| } 00599| 00600| if (key.name === 'y') { 00601| setUnshareDialog(null); 00602| unshareSession(dialog); 00603| } else if (key.name === 'n' || key.name === 'escape') { 00604| setUnshareDialog(null); 00605| } 00606| } 00607| 00608| function handleShareErrorDialogKeypress(key: { name: string }) { 00609| if (key.name === 'return' || key.name === 'space' || key.name === 'escape') { 00610| setShareErrorDialog(null); 00611| } 00612| } 00613| 00614| async function handleShareDialogKeypress(key: { name: string }) { 00615| const dialog = shareDialog(); 00616| if (!dialog) return; 00617| 00618| if (dialog.type === 'login-required') { 00619| if (key.name === 'return' || key.name === 'space') { 00620| // Open browser for login immediately 00621| if (shareLoginCountdownInterval) { 00622| clearInterval(shareLoginCountdownInterval); 00623| shareLoginCountdownInterval = null; 00624| } 00625| startLoginFlow(dialog.pendingSession); 00626| } else if (key.name === 'escape') { 00627| if (shareLoginCountdownInterval) { 00628| clearInterval(shareLoginCountdownInterval); 00629| shareLoginCountdownInterval = null; 00630| } 00631| setShareDialog(null); 00632| } 00633| } else if (dialog.type === 'logging-in') { 00634| if (key.name === 'escape') { 00635| // Cancel the login 00636| setShareDialog(null); 00637| } 00638| } else if (dialog.type === 'complete') { 00639| if (key.name === 'left' || key.name === 'right') { 00640| const delta = key.name === 'left' ? -1 : 1; 00641| setShareCompleteDialogActionIndex((prev) => clampActionIndex(prev + delta, 2)); 00642| return; 00643| } 00644| if (key.name === 'return' || key.name === 'space') { 00645| if (shareCompleteDialogActionIndex() === 0) { 00646| // Open link 00647| await openInBrowser(dialog.url); 00648| setShareDialog(null); 00649| } else { 00650| // Copy link 00651| await copyToClipboard(dialog.url); 00652| setCopiedFeedback(true); 00653| setTimeout(() => setCopiedFeedback(false), 2000); 00654| setShareDialog(null); 00655| } 00656| } else if (key.name === 'escape') { 00657| setShareDialog(null); 00658| } 00659| } 00660| // 'sharing' state has no keyboard interaction - just wait 00661| } 00662| 00663| async function startLoginFlow(pendingSession: TraceMetadata) { 00664| try { 00665| // Show logging-in state 00666| setShareDialog({ type: 'logging-in', pendingSession }); 00667| 00668| // Get or create device ID 00669| const deviceId = getOrCreateDeviceId(); 00670| const start = await startCliAuth({ deviceId }); 00671| if (!start) { 00672| throw new Error('Unable to start login'); 00673| } 00674| 00675| // Open browser 00676| const opened = await openInBrowser(start.verificationUrl); 00677| if (!opened) { 00678| throw new Error('Could not open browser'); 00679| } 00680| 00681| const status = await waitForCliAuth(start.state, { 00682| interval: start.pollInterval, 00683| timeout: start.expiresIn, 00684| }); 00685| 00686| if (status.status !== 'complete' || !status.exchangeCode) { 00687| throw new Error(status.error || 'Login did not complete'); 00688| } 00689| 00690| const result = await completeCliAuth({ 00691| state: start.state, 00692| exchangeCode: status.exchangeCode, 00693| }); 00694| 00695| if (!result) { 00696| throw new Error('Unable to complete login'); 00697| } 00698| 00699| // Save credentials 00700| saveCredentials({ 00701| deviceId, 00702| deviceKey: result.session.token, 00703| userId: result.session.userId, 00704| namespaceId: result.session.namespaceId, 00705| namespaceSlug: result.session.namespaceSlug, 00706| }); 00707| 00708| // Now proceed with sharing 00709| setShareDialog(null); 00710| await shareSession(pendingSession); 00711| } catch (err) { 00712| setShareDialog(null); 00713| showShareError(err instanceof Error ? err.message : 'Login failed'); 00714| } 00715| } 00716| 00717| function confirmOpenBrowserDialog() { 00718| const dialog = openBrowserDialog(); 00719| if (!dialog) return; 00720| setOpenBrowserDialog(null); 00721| void openTraceInBrowser(dialog); 00722| } 00723| 00724| function cancelOpenBrowserDialog() { 00725| setOpenBrowserDialog(null); 00726| } 00727| 00728| function handleOpenBrowserDialogKeypress(key: { name: string }) { 00729| const dialog = openBrowserDialog(); 00730| if (!dialog) return; 00731| 00732| if (key.name === 'left' || key.name === 'right' || key.name === 'up' || key.name === 'down') { 00733| const delta = key.name === 'left' || key.name === 'up' ? -1 : 1; 00734| setOpenBrowserDialogActionIndex((prev) => clampActionIndex(prev + delta, 3)); 00735| return; 00736| } 00737| 00738| if (key.name === 'return' || key.name === 'space') { 00739| if (openBrowserDialogActionIndex() === 0) { 00740| setAskOpenBrowserEveryTime((prev) => !prev); 00741| return; 00742| } 00743| if (openBrowserDialogActionIndex() === 1) { 00744| confirmOpenBrowserDialog(); 00745| return; 00746| } 00747| cancelOpenBrowserDialog(); 00748| return; 00749| } 00750| 00751| if (key.name === 'y') { 00752| confirmOpenBrowserDialog(); 00753| } else if (key.name === 'n' || key.name === 'escape') { 00754| cancelOpenBrowserDialog(); 00755| } 00756| } 00757| 00758| function handleRequestHistoryKeypress(key: { name: string }) { 00759| const history = requestHistory(); 00760| 00761| if (key.name === 'escape' || key.name === 'r') { 00762| setRequestHistoryVisible(false); 00763| return; 00764| } 00765| 00766| if (key.name === 'up' || key.name === 'k') { 00767| setSelectedRequestIndex(i => Math.max(0, i - 1)); 00768| } else if (key.name === 'down' || key.name === 'j') { 00769| setSelectedRequestIndex(i => Math.min(history.length - 1, i + 1)); 00770| } else if (key.name === 'return') { 00771| // Open detail view for selected request 00772| if (history.length > 0) { 00773| setRequestDetailVisible(true); 00774| setRequestHistoryVisible(false); 00775| } 00776| } 00777| } 00778| 00779| async function handleRequestDetailKeypress(key: { name: string }) { 00780| if (key.name === 'escape' || key.name === 'b') { 00781| setRequestDetailVisible(false); 00782| setRequestHistoryVisible(true); 00783| return; 00784| } 00785| 00786| // Copy to clipboard 00787| if (key.name === 'c') { 00788| const record = requestHistory()[selectedRequestIndex()]; 00789| if (record) { 00790| const content = formatRequestForClipboard(record); 00791| await copyToClipboard(content); 00792| setCopiedFeedback(true); 00793| setTimeout(() => setCopiedFeedback(false), 2000); 00794| } 00795| return; 00796| } 00797| 00798| if (!requestDetailScroll) return; 00799| 00800| if (key.name === 'up' || key.name === 'k') { 00801| requestDetailScroll.scrollBy(-3); 00802| } else if (key.name === 'down' || key.name === 'j') { 00803| requestDetailScroll.scrollBy(3); 00804| } else if (key.name === 'pageup') { 00805| requestDetailScroll.scrollBy(-Math.floor(requestDetailScroll.height / 2)); 00806| } else if (key.name === 'pagedown') { 00807| requestDetailScroll.scrollBy(Math.floor(requestDetailScroll.height / 2)); 00808| } else if (key.name === 'g') { 00809| requestDetailScroll.scrollTo(0); 00810| } else if (key.name === 'G') { 00811| requestDetailScroll.scrollTo(requestDetailScroll.scrollHeight); 00812| } 00813| } 00814| 00815| function flashError(message: string) { 00816| setLastUploadError(message); 00817| setTimeout(() => { 00818| setLastUploadError((current) => (current === message ? null : current)); 00819| }, 3000); 00820| } 00821| 00822| function showShareError(message: string) { 00823| setShareErrorDialog(message); 00824| } 00825| 00826| async function openTraceInBrowser(session: TraceMetadata) { 00827| if (!session.sharedUrl) { 00828| flashError('Trace is not shared yet'); 00829| return; 00830| } 00831| 00832| const opened = await openInBrowser(session.sharedUrl); 00833| if (!opened) { 00834| flashError('Unable to open browser'); 00835| } 00836| } 00837| 00838| function requestOpenBrowser(session: TraceMetadata) { 00839| if (askOpenBrowserEveryTime()) { 00840| setOpenBrowserDialog(session); 00841| return; 00842| } 00843| void openTraceInBrowser(session); 00844| } 00845| 00846| async function toggleShareSession(session: TraceMetadata) { 00847| const pending = uploadStates().get(session.id); 00848| if (pending && (pending.status === 'queued' || pending.status === 'uploading')) { 00849| return; 00850| } 00851| 00852| const isShared = sharedSessions().has(session.id); 00853| if (isShared) { 00854| setUnshareDialog(session); 00855| return; 00856| } 00857| 00858| await shareSession(session); 00859| } 00860| 00861| async function refreshSharedSession(metadata: TraceMetadata) { 00862| const pending = uploadStates().get(metadata.id); 00863| if (pending && (pending.status === 'queued' || pending.status === 'uploading')) { 00864| return; 00865| } 00866| 00867| setLastUploadError(null); 00868| 00869| if (runtimeConfig().readOnlyMode) { 00870| setLastUploadError('Refresh disabled (read-only mode)'); 00871| return; 00872| } 00873| 00874| if (!isApiConfigured()) { 00875| setLastUploadError('TRACES_HTTP_URL and TRACES_URL not set'); 00876| return; 00877| } 00878| 00879| if (!sharedSessions().has(metadata.id)) { 00880| setLastUploadError('Trace is not shared'); 00881| return; 00882| } 00883| 00884| if (!metadata.sourcePath) { 00885| setLastUploadError('No source file for this session'); 00886| return; 00887| } 00888| 00889| const session = await controller.find(metadata.id); 00890| if (!session) { 00891| setLastUploadError('Session not found'); 00892| return; 00893| } 00894| 00895| try { 00896| const result = await controller.refreshSession(session); 00897| 00898| setMessageCounts((prev) => { 00899| const next = new Map(prev); 00900| next.set(metadata.id, result.total); 00901| return next; 00902| }); 00903| 00904| setMessageCountTimestamps((prev) => { 00905| const next = new Map(prev); 00906| next.set(metadata.id, metadata.timestamp); 00907| return next; 00908| }); 00909| 00910| if (result.appended > 0) { 00911| const detail = detailState(); 00912| if (detail && detail.session.id === metadata.id) { 00913| const content = await controller.getContent(session); 00914| setDetailState({ session: detail.session, content }); 00915| } 00916| } 00917| } catch (err) { 00918| setLastUploadError(err instanceof Error ? err.message : 'Refresh failed'); 00919| } 00920| } 00921| 00922| function performSessionAction(session: TraceMetadata, action: SessionAction) { 00923| if (action === 'open') { 00924| requestOpenBrowser(session); 00925| return; 00926| } 00927| 00928| if (action === 'copy') { 00929| void copySharedUrl(session); 00930| return; 00931| } 00932| 00933| if (action === 'refresh') { 00934| void refreshSharedSession(session); 00935| return; 00936| } 00937| 00938| void toggleShareSession(session); 00939| } 00940| 00941| function handleListKeypress(key: { name: string }) { 00942| const items = sessionItems(); 00943| if (items.length === 0) return; 00944| 00945| const currentIdx = items.findIndex(item => item.flatIndex === selectedFlatIndex()); 00946| 00947| if (key.name === 'up' || key.name === 'k') { 00948| if (currentIdx > 0) { 00949| const next = items[currentIdx - 1].flatIndex; 00950| setSelectedFlatIndex(next); 00951| setListActionIndex(0); 00952| scrollListItemIntoView(next); 00953| } 00954| } else if (key.name === 'down' || key.name === 'j') { 00955| if (currentIdx < items.length - 1) { 00956| const next = items[currentIdx + 1].flatIndex; 00957| setSelectedFlatIndex(next); 00958| setListActionIndex(0); 00959| scrollListItemIntoView(next); 00960| } 00961| } else if (key.name === 'left' || key.name === 'right') { 00962| const session = sessions()[selectedFlatIndex()]; 00963| if (!session) return; 00964| const statusLabel = getStatusLabelForSession(session.id); 00965| const actions = getSessionActions(sharedSessions().has(session.id), statusLabel); 00966| if (actions.length <= 1) return; 00967| const delta = key.name === 'left' ? -1 : 1; 00968| setListActionIndex((prev) => clampActionIndex(prev + delta, actions.length)); 00969| } else if (key.name === 'return') { 00970| const session = sessions()[selectedFlatIndex()]; 00971| if (!session) return; 00972| const statusLabel = getStatusLabelForSession(session.id); 00973| const actions = getSessionActions(sharedSessions().has(session.id), statusLabel); 00974| if (actions.length === 0) return; 00975| const index = clampActionIndex(listActionIndex(), actions.length); 00976| performSessionAction(session, actions[index]); 00977| } else if (key.name === 'o') { 00978| openSession(selectedFlatIndex()); 00979| } else if (key.name === 'space') { 00980| toggleShareSelectedSession(); 00981| } else if (key.name === 'c') { 00982| copySharedUrlToClipboard(); 00983| } 00984| } 00985| 00986| async function copySharedUrl(session: TraceMetadata) { 00987| const isShared = sharedSessions().has(session.id); 00988| if (!isShared || !session.sharedUrl) return; 00989| 00990| const success = await copyToClipboard(session.sharedUrl); 00991| if (success) { 00992| setCopiedFeedback(true); 00993| setTimeout(() => setCopiedFeedback(false), 2000); 00994| } 00995| } 00996| 00997| async function copySharedUrlToClipboard() { 00998| const session = sessions()[selectedFlatIndex()]; 00999| if (!session) return; 01000| await copySharedUrl(session); 01001| } 01002| 01003| async function toggleShareSelectedSession() { 01004| const session = sessions()[selectedFlatIndex()]; 01005| if (!session) return; 01006| await toggleShareSession(session); 01007| } 01008| 01009| async function refreshMessageCounts(sessionList: TraceMetadata[]) { 01010| const start = Date.now(); 01011| const currentCounts = messageCounts(); 01012| const currentTimestamps = messageCountTimestamps(); 01013| 01014| // Find sessions that need count updates (timestamp changed or not cached) 01015| const sessionsToUpdate = sessionList.filter(session => { 01016| const lastTimestamp = currentTimestamps.get(session.id); 01017| return lastTimestamp !== session.timestamp || !currentCounts.has(session.id); 01018| }); 01019| 01020| if (sessionsToUpdate.length === 0) { 01021| setDiagnostics((prev) => ({ 01022| ...prev, 01023| messageCountMs: Date.now() - start, 01024| })); 01025| return; 01026| } 01027| 01028| const counts = new Map(currentCounts); 01029| const timestamps = new Map(currentTimestamps); 01030| 01031| for (const session of sessionsToUpdate) { 01032| try { 01033| const count = await registry.count(session); 01034| counts.set(session.id, count); 01035| timestamps.set(session.id, session.timestamp); 01036| } catch { 01037| // Ignore per-session errors 01038| } 01039| } 01040| 01041| setMessageCounts(counts); 01042| setMessageCountTimestamps(timestamps); 01043| setDiagnostics((prev) => ({ 01044| ...prev, 01045| messageCountMs: Date.now() - start, 01046| })); 01047| } 01048| 01049| async function shareSession(metadata: TraceMetadata, skipConfirmation = false) { 01050| setLastUploadError(null); 01051| setShareErrorDialog(null); 01052| 01053| // Check if user is logged in first 01054| if (!isAuthenticated()) { 01055| // Show login required dialog with countdown 01056| setShareDialog({ type: 'login-required', countdown: 3, pendingSession: metadata }); 01057| shareLoginCountdownInterval = setInterval(() => { 01058| const dialog = shareDialog(); 01059| if (dialog?.type === 'login-required') { 01060| if (dialog.countdown <= 1) { 01061| clearInterval(shareLoginCountdownInterval!); 01062| shareLoginCountdownInterval = null; 01063| startLoginFlow(dialog.pendingSession); 01064| } else { 01065| setShareDialog({ type: 'login-required', countdown: dialog.countdown - 1, pendingSession: dialog.pendingSession }); 01066| } 01067| } 01068| }, 1000); 01069| return; 01070| } 01071| 01072| if (runtimeConfig().readOnlyMode) { 01073| showShareError('Sharing disabled (read-only mode)'); 01074| return; 01075| } 01076| // Check if API is configured 01077| if (!isApiConfigured()) { 01078| showShareError('TRACES_HTTP_URL and TRACES_URL not set'); 01079| return; 01080| } 01081| 01082| // Check if session has a source file 01083| if (!metadata.sourcePath) { 01084| showShareError('No source file for this session'); 01085| return; 01086| } 01087| 01088| // Check message count and warn if large 01089| if (!skipConfirmation) { 01090| const content = await controller.getContentForMetadata(metadata); 01091| if (content.events.length > runtimeConfig().largeSessionWarningThreshold) { 01092| setConfirmDialog({ session: metadata, messageCount: content.events.length }); 01093| return; 01094| } 01095| } 01096| 01097| const session = await controller.find(metadata.id); 01098| if (!session) { 01099| showShareError('Session not found'); 01100| return; 01101| } 01102| 01103| // Show sharing dialog 01104| setShareDialog({ type: 'sharing', session: metadata }); 01105| 01106| try { 01107| const { url } = await controller.share(session); 01108| setSessions((prev) => 01109| prev.map((existing) => 01110| existing.id === metadata.id ? { ...existing, sharedUrl: url } : existing 01111| ) 01112| ); 01113| setDetailState((prev) => { 01114| if (!prev || prev.session.id !== metadata.id) return prev; 01115| return { ...prev, session: { ...prev.session, sharedUrl: url } }; 01116| }); 01117| setSharedSessions(prev => new Set([...prev, metadata.id])); 01118| 01119| // Show complete dialog with URL 01120| setShareCompleteDialogActionIndex(0); 01121| setShareDialog({ type: 'complete', session: metadata, url }); 01122| } catch (err) { 01123| setShareDialog(null); 01124| showShareError(err instanceof Error ? err.message : 'Upload failed'); 01125| } 01126| } 01127| 01128| async function unshareSession(metadata: TraceMetadata) { 01129| setLastUploadError(null); 01130| const session = await controller.find(metadata.id); 01131| if (!session) { 01132| setLastUploadError('Session not found'); 01133| return; 01134| } 01135| try { 01136| await controller.unshare(session); 01137| setSharedSessions(prev => { 01138| const next = new Set(prev); 01139| next.delete(metadata.id); 01140| return next; 01141| }); 01142| } catch (err) { 01143| setLastUploadError(err instanceof Error ? err.message : 'Delete failed'); 01144| } 01145| } 01146| 01147| function scrollListItemIntoView(flatIndex: number) { 01148| if (!listScroll) return; 01149| const sessionList = sessions(); 01150| const target = listScroll.getChildren().find((child) => child.id === sessionList[flatIndex]?.id); 01151| if (!target) return; 01152| 01153| const y = target.y - listScroll.y; 01154| // Scroll down if below viewport 01155| if (y + 1 > listScroll.height) { 01156| listScroll.scrollBy(y - listScroll.height + 2); 01157| } 01158| // Scroll up if above viewport 01159| if (y < 0) { 01160| listScroll.scrollBy(y - 1); 01161| } 01162| } 01163| 01164| function handleDetailKeypress(key: { name: string }) { 01165| if (key.name === 'escape' || key.name === 'b') { 01166| detailUnsubscribeAdapter?.(); 01167| setView('list'); 01168| setDetailState(null); 01169| setViewMode('conversation'); // Reset to default view 01170| return; 01171| } 01172| 01173| // Toggle view mode 01174| if (key.name === 'a') { 01175| setViewMode(mode => mode === 'conversation' ? 'full' : 'conversation'); 01176| return; 01177| } 01178| 01179| // Share current session (space) 01180| if (key.name === 'space') { 01181| const detail = detailState(); 01182| if (detail) { 01183| toggleShareDetailSession(detail.session); 01184| } 01185| return; 01186| } 01187| 01188| // Copy shared URL (c) 01189| if (key.name === 'c') { 01190| const detail = detailState(); 01191| if (detail) { 01192| copyDetailSessionUrl(detail.session); 01193| } 01194| return; 01195| } 01196| 01197| if (key.name === 'left' || key.name === 'right') { 01198| const detail = detailState(); 01199| if (!detail) return; 01200| const statusLabel = getStatusLabelForSession(detail.session.id); 01201| const actions = getSessionActions(sharedSessions().has(detail.session.id), statusLabel); 01202| if (actions.length <= 1) return; 01203| const delta = key.name === 'left' ? -1 : 1; 01204| setDetailActionIndex((prev) => clampActionIndex(prev + delta, actions.length)); 01205| return; 01206| } 01207| 01208| if (key.name === 'return') { 01209| const detail = detailState(); 01210| if (!detail) return; 01211| const statusLabel = getStatusLabelForSession(detail.session.id); 01212| const actions = getSessionActions(sharedSessions().has(detail.session.id), statusLabel); 01213| if (actions.length === 0) return; 01214| const index = clampActionIndex(detailActionIndex(), actions.length); 01215| performSessionAction(detail.session, actions[index]); 01216| return; 01217| } 01218| 01219| if (!detailScroll) return; 01220| 01221| if (key.name === 'up' || key.name === 'k') { 01222| detailScroll.scrollBy(-3); 01223| } else if (key.name === 'down' || key.name === 'j') { 01224| detailScroll.scrollBy(3); 01225| } else if (key.name === 'pageup') { 01226| detailScroll.scrollBy(-Math.floor(detailScroll.height / 2)); 01227| } else if (key.name === 'pagedown') { 01228| detailScroll.scrollBy(Math.floor(detailScroll.height / 2)); 01229| } else if (key.name === 'g') { 01230| detailScroll.scrollTo(0); 01231| } else if (key.name === 'G') { 01232| detailScroll.scrollTo(detailScroll.scrollHeight); 01233| } 01234| } 01235| 01236| async function toggleShareDetailSession(session: TraceMetadata) { 01237| await toggleShareSession(session); 01238| } 01239| 01240| async function copyDetailSessionUrl(session: TraceMetadata) { 01241| await copySharedUrl(session); 01242| } 01243| 01244| async function openSession(flatIndex: number) { 01245| const session = sessions()[flatIndex]; 01246| if (!session) return; 01247| 01248| setLoading(true); 01249| try { 01250| detailUnsubscribeAdapter?.(); 01251| const selected = await controller.find(session.id); 01252| if (!selected) { 01253| throw new Error('Session not found'); 01254| } 01255| 01256| const content = await controller.getContent(selected); 01257| setDetailState({ session: selected.toMetadata(), content }); 01258| 01259| detailUnsubscribeAdapter = await controller.subscribe(selected, (event: TraceEvent) => { 01260| const detail = detailState(); 01261| if (!detail) return; 01262| 01263| setMessageCounts((prev) => { 01264| const next = new Map(prev); 01265| next.set(session.id, (next.get(session.id) ?? detail.content.events.length) + 1); 01266| return next; 01267| }); 01268| 01269| setDetailState({ 01270| ...detail, 01271| content: { 01272| ...detail.content, 01273| events: [...detail.content.events, event], 01274| }, 01275| }); 01276| }); 01277| setView('detail'); 01278| // Scroll to top when opening a session 01279| setTimeout(() => detailScroll?.scrollTo(0), 0); 01280| } catch (err) { 01281| console.error('Error loading session:', err); 01282| } finally { 01283| setLoading(false); 01284| } 01285| } 01286| 01287| function getAgentColor(agentId: AgentId): string { 01288| return colors.agents[agentId] || colors.muted; 01289| } 01290| 01291| return ( 01292| 01298| {/* Header */} 01299| 01310| 01311| 01312| {view() === 'list' ? 'Traces' : 'Trace Detail'} 01313| 01314| 01315| {' '}● Shared 01316| 01317| 01318| 01322| {'Double Click to Open Trace | Q: Quit'} 01323| 01324| } 01325| > 01326| {(() => { 01327| const detail = detailState()!; 01328| const statusLabel = () => getStatusLabelForSession(detail.session.id); 01329| const actions = () => getSessionActions(sharedSessions().has(detail.session.id), statusLabel()); 01330| const activeIndex = () => clampActionIndex(detailActionIndex(), actions().length); 01331| const isActionSelected = (index: number) => activeIndex() === index; 01332| return ( 01333| 01334| 01338| {(action, index) => ( 01339| { 01344| if (event.button !== 0) return; 01345| event.stopPropagation(); 01346| setDetailActionIndex(index()); 01347| performSessionAction(detail.session, action); 01348| }} 01349| > 01350| 01351| {SESSION_ACTION_LABELS[action]} 01352| 01353| 01354| )} 01355| 01356| } 01357| > 01358| {statusLabel()} 01359| 01360| 01361| ); 01362| })()} 01363| 01364| 01365| 01366| {/* Content */} 01367| 01374| 01375| 01376| Loading... 01377| 01378| 01379| 01380| 01381| 01382| 01383| No sessions found 01384| 01385| 01386| 0}> 01387| {/* Table header */} 01388| 01395| Time 01396| Directory 01397| Agent 01398| {'Msgs'.padStart(6, ' ')} 01399| {' '} 01400| Preview 01401| Link 01402| 01403| (listScroll = r)} 01405| flexGrow={1} 01406| scrollbarOptions={{ visible: false }} 01407| > 01408| 01409| {(item) => ( 01410| 01413| {(() => { 01414| const sessionItem = item as { type: 'session'; session: TraceMetadata; flatIndex: number }; 01415| const isSelected = () => sessionItem.flatIndex === selectedFlatIndex(); 01416| const isShared = () => sharedSessions().has(sessionItem.session.id); 01417| const msgCount = () => messageCounts().get(sessionItem.session.id) ?? 0; 01418| const msgCountLabel = () => { 01419| const count = msgCount(); 01420| if (count <= 0) return ''; 01421| const label = `${count}`; 01422| return label.length >= 6 ? label.slice(0, 6) : label.padStart(6, ' '); 01423| }; 01424| const uploadState = () => uploadStates().get(sessionItem.session.id); 01425| const isQueued = () => uploadState()?.status === 'queued'; 01426| const isUploading = () => uploadState()?.status === 'uploading'; 01427| const showDot = () => isShared() || isQueued() || isUploading(); 01428| const dotColor = () => { 01429| if (isShared()) { 01430| return blinkOn() ? colors.success : 'transparent'; 01431| } 01432| if (isQueued() || isUploading()) { 01433| return colors.accent; 01434| } 01435| return 'transparent'; 01436| }; 01437| const statusLabel = () => getStatusLabelForSession(sessionItem.session.id); 01438| const actions = () => getSessionActions(isShared(), statusLabel()); 01439| const activeActionIndex = () => clampActionIndex(listActionIndex(), actions().length); 01440| const isActionSelected = (index: number) => isSelected() && activeActionIndex() === index; 01441| // Calculate available width for actions column 01442| const actionsColumnWidth = () => Math.max(0, dimensions().width - LIST_FIXED_COLUMNS_WIDTH); 01443| return ( 01444| { 01453| if (event.button !== 0) return; 01454| const now = Date.now(); 01455| const isDoubleClick = lastClickSessionId === sessionItem.session.id 01456| && (now - lastClickAt) <= doubleClickThresholdMs; 01457| lastClickSessionId = sessionItem.session.id; 01458| lastClickAt = now; 01459| setSelectedFlatIndex(sessionItem.flatIndex); 01460| setListActionIndex(0); 01461| scrollListItemIntoView(sessionItem.flatIndex); 01462| if (isDoubleClick) { 01463| void openSession(sessionItem.flatIndex); 01464| } 01465| }} 01466| > 01467| {/* Time - first column */} 01468| 01469| {formatTimeOnly(sessionItem.session.timestamp)} 01470| 01471| {/* Directory */} 01472| 01476| {truncate(shortenDirectory(sessionItem.session.directory), 12)} 01477| 01478| {/* Agent badge */} 01479| 01483| {sessionItem.session.agentId} 01484| 01485| {/* Message count */} 01486| 01490| {msgCountLabel()} 01491| 01492| {' '} (Output truncated at 51200 bytes. Use 'offset' parameter to read beyond line 1492)