4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2691,'use client'; /** * TaskOutput Component * * Displays task output with status, logs, and output fields. * Supports streaming updates for real-time progress. */ import React, { memo, useState } from 'react'; import { cn } from '@/lib/utils'; import type { TaskDTO as Task } from '@inferencesh/sdk'; import { TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled } from '@inferencesh/sdk'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { CircleAlert, XCircle, Copy, Check } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { StatusPill } from './task-status'; import { TaskLogs, SimpleLogs } from './task-logs'; import { OutputFields } from './output-fields'; type OutputView = 'output' | 'logs' | 'json'; export interface TaskOutputProps { /** The task to display */ task: Task | null; /** Whether the initial fetch is loading */ isLoading?: boolean; /** Whether streaming is active */ isStreaming?: boolean; /** Additional CSS classes */ className?: string; /** Compact mode (no card wrapper) */ compact?: boolean; /** Show error details */ showError?: boolean; /** Optional cancel handler */ onCancel?: () => void; } /** Check if task status is terminal */ function isTerminalStatus(status: number | undefined): boolean { return ( status !== undefined && [TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled].includes(status) ); } /** Loading state display */ const LoadingContent = memo(function LoadingContent({ task, compact, }: { task: Task | null; compact: boolean; }) { const content = (

{task && }

); if (compact) { return ( {content} ); } return content; }); /** Empty state display */ const EmptyContent = memo(function EmptyContent({ compact }: { compact: boolean }) { const content = (

no output yet

); if (compact) { return ( {content} ); } return content; }); /** Error state display */ const ErrorContent = memo(function ErrorContent({ error, compact, }: { error?: string | null; compact: boolean; }) { const content = (

task error

{error && (

{error}

)}

); if (compact) { return ( {content} ); } return content; }); /** Cancelled state display */ const CancelledContent = memo(function CancelledContent({ message, compact, }: { message?: string; compact: boolean; }) { const content = (

task cancelled

{message && (

{message}

)}

); if (compact) { return ( {content} ); } return content; }); /** Output view toggle */ const OutputToggle = memo(function OutputToggle({ output, setOutput, hasOutput, }: { output: OutputView; setOutput: (o: OutputView) => void; hasOutput: boolean; }) { const views: { key: OutputView; label: string; show: boolean }[] = [ { key: 'output', label: 'output', show: true }, { key: 'logs', label: 'logs', show: true }, { key: 'json', label: 'json', show: hasOutput }, ]; return (

{views.filter(v => v.show).map(({ key, label }) => ( ))}

); }); /** Header section with status and controls */ const HeaderSection = memo(function HeaderSection({ task, output, setOutput, isStreaming, onCancel, }: { task: Task | null; output: OutputView; setOutput: (o: OutputView) => void; isStreaming: boolean; onCancel?: () => void; }) { return (

{task && }

{task?.status !== undefined && ( <> {!isTerminalStatus(task.status) && onCancel && ( )} )}

); }); /** JSON output view */ const JsonContent = memo(function JsonContent({ task }: { task: Task }) { const [copied, setCopied] = useState(false); const handleCopy = async () => { await navigator.clipboard.writeText(JSON.stringify(task.output, null, 2)); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

            {task.output ? JSON.stringify(task.output, null, 2) : '{}'}

); }); /** Output content - renders task output fields */ const OutputContent = memo(function OutputContent({ task }: { task: Task }) { const output = task.output; if (!output || typeof output !== 'object') { return (

{output !== undefined ? String(output) : 'no output'}

); } return (

{!isTerminalStatus(task.status) && (

)} } />

); }); /** Main TaskOutput component */ export const TaskOutput = memo(function TaskOutput({ task, isLoading = false, isStreaming = false, className, compact = false, showError = true, onCancel, }: TaskOutputProps) { const [output, setOutput] = useState('output'); let content = null; if (isLoading && !task) { content = ; } else if (!task) { content = ; } else if (output === 'logs') { content = ; } else if (output === 'json') { content = ; } else if (task.output) { content = ; } else if (task.status === TaskStatusFailed) { content = ; } else if (task.status === TaskStatusCancelled) { content = ; } else { content = ; } if (compact) { return

{content}

; } return (

{task && ( )} {content}

); }); 51:T9ef,'use client'; /** * TaskOutputWrapper * * A self-contained component that fetches and streams a task by ID. * Combines useTask hook with TaskOutput for easy drop-in usage. * * @example * ```tsx * // With explicit client * const client = new Inference({ apiKey: 'your-key' }); * * * // Within AgentProvider (client comes from context via useAgentClient) * * * * ``` */ import React, { memo, useCallback } from 'react'; import type { TaskDTO as Task } from '@inferencesh/sdk'; import type { AgentClient } from '@inferencesh/sdk/agent'; import { cn } from '@/lib/utils'; import { useTask } from '@/hooks/use-task'; import { TaskOutput } from '@/components/infsh/task/task-output'; export interface TaskOutputWrapperProps { /** The inference client instance (AgentClient compatible) */ client: AgentClient; /** The task ID to display */ taskId: string; /** Additional CSS classes */ className?: string; /** Compact mode (no card wrapper) */ compact?: boolean; /** Show error details */ showError?: boolean; /** Called when task data updates */ onUpdate?: (task: Task) => void; /** Called when task reaches terminal status */ onComplete?: (task: Task) => void; /** Called when an error occurs */ onError?: (error: Error) => void; /** Called when cancel button is clicked */ onCancel?: (taskId: string) => void; } export const TaskOutputWrapper = memo(function TaskOutputWrapper({ client, taskId, className, compact = false, showError = true, onUpdate, onComplete, onError, onCancel, }: TaskOutputWrapperProps) { const { task, isLoading, isStreaming } = useTask({ client, taskId, onUpdate, onComplete, onError, }); const handleCancel = useCallback(async () => { if (onCancel) { onCancel(taskId); } else { // Default cancel behavior using client.http try { await client.http.request('post', `/tasks/${taskId}/cancel`); } catch (err) { onError?.(err instanceof Error ? err : new Error('Failed to cancel task')); } } }, [client, taskId, onCancel, onError]); return ( ); }); 52:T1449,'use client'; /** * Task Status Components * * Visual components for displaying task status. */ import React, { memo } from 'react'; import type { TaskDTO as Task, TaskEvent } from '@inferencesh/sdk'; import { TaskStatusReceived, TaskStatusQueued, TaskStatusDispatched, TaskStatusPreparing, TaskStatusServing, TaskStatusSettingUp, TaskStatusRunning, TaskStatusUploading, TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled, TaskStatusCancelling, } from '@inferencesh/sdk'; import { cn } from '@/lib/utils'; import { TimeSince } from './time-since'; type TaskStatus = number; /** Get CSS classes for status color */ export function getStatusColor(status: TaskStatus): string { switch (status) { case TaskStatusQueued: return 'text-yellow-600 bg-yellow-600/15 dark:text-yellow-400 dark:bg-yellow-400/15'; case TaskStatusDispatched: return 'text-orange-600 bg-orange-600/15 dark:text-orange-400 dark:bg-orange-400/15'; case TaskStatusPreparing: case TaskStatusServing: case TaskStatusSettingUp: case TaskStatusRunning: return 'text-purple-600 bg-purple-600/15 dark:text-purple-400 dark:bg-purple-400/15'; case TaskStatusFailed: return 'text-red-600 bg-red-600/15 dark:text-red-400 dark:bg-red-400/15'; case TaskStatusCompleted: return 'text-green-600 bg-green-600/15 dark:text-green-400 dark:bg-green-400/15'; case TaskStatusCancelled: case TaskStatusCancelling: return 'text-gray-600 bg-gray-600/15 dark:text-gray-400 dark:bg-gray-400/15'; default: return 'text-muted-foreground bg-muted/15'; } } /** Get status display text */ export function getStatusText(status: TaskStatus): string | null { switch (status) { case TaskStatusReceived: return 'received'; case TaskStatusQueued: return 'queued'; case TaskStatusDispatched: return 'dispatched'; case TaskStatusPreparing: return 'preparing'; case TaskStatusServing: return 'serving'; case TaskStatusSettingUp: return 'setting up'; case TaskStatusRunning: return 'running'; case TaskStatusUploading: return 'uploading'; case TaskStatusCompleted: return null; // Show only time for completed case TaskStatusFailed: return 'failed'; case TaskStatusCancelled: return 'cancelled'; case TaskStatusCancelling: return 'cancelling'; default: return null; } } /** Get full status text (always returns text) */ export function getStatusTextFull(status: TaskStatus): string { const text = getStatusText(status); if (text) return text; if (status === TaskStatusCompleted) return 'completed'; return 'unknown'; } export interface TaskEventTimes { received?: string; queued?: string; dispatched?: string; preparing?: string; serving?: string; settingUp?: string; running?: string; uploading?: string; completed?: string; failed?: string; cancelled?: string; } /** Extract event times from task events */ export function extractTaskEventTimes(task: Task): TaskEventTimes { const findEventTime = (status: TaskStatus) => task.events?.find((e: TaskEvent) => e.status === status)?.event_time; return { received: findEventTime(TaskStatusReceived), queued: findEventTime(TaskStatusQueued), dispatched: findEventTime(TaskStatusDispatched), preparing: findEventTime(TaskStatusPreparing), serving: findEventTime(TaskStatusServing), settingUp: findEventTime(TaskStatusSettingUp), running: findEventTime(TaskStatusRunning), uploading: findEventTime(TaskStatusUploading), completed: findEventTime(TaskStatusCompleted), failed: findEventTime(TaskStatusFailed), cancelled: findEventTime(TaskStatusCancelled), }; } export interface StatusPillProps { task: Task; isStreaming?: boolean; timeOnly?: boolean; className?: string; } /** Status pill showing task status with optional elapsed time */ export const StatusPill = memo(function StatusPill({ task, isStreaming = false, timeOnly = false, className, }: StatusPillProps) { if (!task?.status || !task?.events) { return null; } const status = task.status; const times = extractTaskEventTimes(task); const startTime = times.preparing || times.received; const endTime = times.completed || times.failed || times.cancelled; return (

{!timeOnly && getStatusText(status)}

); }); export interface StatusPillSimpleProps { status: TaskStatus; className?: string; } /** Simple status pill without time */ export const StatusPillSimple = memo(function StatusPillSimple({ status, className, }: StatusPillSimpleProps) { return (

{getStatusTextFull(status)}

); }); 53:T2c91,'use client'; /** * Task Logs Components * * Display task logs with auto-scroll and copy functionality. */ import React, { memo, useMemo, useRef, useState, useEffect, useLayoutEffect } from 'react'; import { cn } from '@/lib/utils'; import type { TaskDTO as Task, TaskLog } from '@inferencesh/sdk'; import { TaskLogTypeRun, TaskLogTypeServe, TaskLogTypeSetup, TaskLogTypeTask, } from '@inferencesh/sdk'; import { Button } from '@/components/ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { Check, Copy } from 'lucide-react'; type TaskLogType = number; // Base64 encoding/decoding utilities function utf8ToBase64(str: string): string { return btoa( encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)) ) ); } function base64ToUtf8(str: string): string { try { return decodeURIComponent( Array.prototype.map .call(atob(str), (c: string) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)) .join('') ); } catch { return str; } } const LOG_TYPES = [ { key: TaskLogTypeRun, title: 'run' }, { key: TaskLogTypeServe, title: 'serve' }, { key: TaskLogTypeSetup, title: 'setup' }, { key: TaskLogTypeTask, title: 'inference' }, ] as const; function getTaskLogs(task: Task): Record { return { [TaskLogTypeRun]: task.logs?.find((log: TaskLog) => log.log_type === TaskLogTypeRun), [TaskLogTypeServe]: task.logs?.find((log: TaskLog) => log.log_type === TaskLogTypeServe), [TaskLogTypeSetup]: task.logs?.find((log: TaskLog) => log.log_type === TaskLogTypeSetup), [TaskLogTypeTask]: task.logs?.find((log: TaskLog) => log.log_type === TaskLogTypeTask), }; } function getMergedLogsContent( logs: Record, onlyLastLine = false ): string { let mergedContent = ''; for (const { key, title } of LOG_TYPES) { const log = logs[key]; if (log?.content) { let decodedContent = onlyLastLine ? '' : '--- ' + title + ' ---\n'; decodedContent += base64ToUtf8(log.content); if (decodedContent) { mergedContent += '\n' + decodedContent; } } } if (onlyLastLine) { const lines = mergedContent.split('\n').filter((line) => line.trim()); return lines.length > 0 ? lines[lines.length - 1] : ''; } return mergedContent.trim(); } function getHighestAvailableLogType( logs: Record ): TaskLogType { return LOG_TYPES.reduce((highest, current) => { return logs[current.key] && current.key > highest ? current.key : highest; }, TaskLogTypeRun); } export interface TaskLogsProps { task: Task; className?: string; } /** Full task logs with tabs for different log types */ export const TaskLogs = memo(function TaskLogs({ task, className }: TaskLogsProps) { const logs = useMemo(() => getTaskLogs(task), [task]); const [selectedTab, setSelectedTab] = useState(() => getHighestAvailableLogType(logs) ); const [copied, setCopied] = useState(false); useEffect(() => { if (logs) { // If current selection is not available, find the next available log if (!logs[selectedTab]) { const availableLogs = LOG_TYPES.filter((type) => logs[type.key] !== undefined); if (availableLogs.length > 0) { const currentIndex = LOG_TYPES.findIndex((type) => type.key === selectedTab); const nextAvailable = LOG_TYPES.slice(currentIndex + 1).find( (type) => logs[type.key] !== undefined ); const logToSelect = nextAvailable?.key || availableLogs[0].key; setSelectedTab(logToSelect); } } } }, [logs, selectedTab]); const handleCopy = async () => { const content = logs[selectedTab]; let textToCopy = ''; if (content?.content) { textToCopy = base64ToUtf8(content.content); } if (textToCopy) { await navigator.clipboard.writeText(textToCopy); setCopied(true); setTimeout(() => setCopied(false), 1500); } }; return (

{LOG_TYPES.map(({ key, title }) => !logs[key] ? ( } > {title}

n/a

) : ( ) )}

}> {copied ? ( ) : ( )} {copied ? 'copied!' : 'copy logs'}

{logs[selectedTab] && }

); }); export interface SimpleLogsProps { task: Task; className?: string; compact?: boolean; onlyLastLine?: boolean; } /** Simple merged logs view */ export const SimpleLogs = memo(function SimpleLogs({ task, className, compact = false, onlyLastLine = false, }: SimpleLogsProps) { const [copied, setCopied] = useState(false); const logs = useMemo(() => getTaskLogs(task), [task]); const handleCopy = async () => { const mergedContent = getMergedLogsContent(logs, onlyLastLine); if (mergedContent) { await navigator.clipboard.writeText(mergedContent); setCopied(true); setTimeout(() => setCopied(false), 1500); } }; const hasAnyLogs = task.logs && task.logs.length > 0; const mergedContent = getMergedLogsContent(logs, onlyLastLine); const combinedLogsContent = utf8ToBase64(mergedContent); if (compact) { return (

          {mergedContent.split('\n').map((line: string, i: number) => (
            
              {line}
            
          ))}

); } if (!hasAnyLogs) return null; return (

}> {copied ? ( ) : ( )} {copied ? 'copied!' : 'copy logs'}

); }); interface LogViewerProps { content: string; } /** Base log viewer with auto-scroll */ export const LogViewer = memo(function LogViewer({ content }: LogViewerProps) { const containerRef = useRef(null); const [autoScroll, setAutoScroll] = useState(true); const contentRef = useRef(content); useLayoutEffect(() => { const container = containerRef.current; if (!container) return; container.scrollTop = container.scrollHeight; if (container.scrollHeight === 0) { setTimeout(() => { container.scrollTop = container.scrollHeight; }, 10); } }, []); useEffect(() => { const container = containerRef.current; if (!container) return; const handleScroll = () => { const threshold = 10; const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight; setAutoScroll(distanceFromBottom <= threshold); }; container.addEventListener('scroll', handleScroll); return () => container.removeEventListener('scroll', handleScroll); }, []); useEffect(() => { const container = containerRef.current; if (!container || content === contentRef.current) return; contentRef.current = content; if (autoScroll) { requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; }); } }, [content, autoScroll]); let decodedContent = ''; try { decodedContent = decodeURIComponent(escape(atob(content))); } catch { decodedContent = content; } const lines = decodedContent.split('\n'); return (

          {lines.map((line: string, i: number) => (
            
              {i + 1}
              
                {line}
              
            
          ))}

); }); 54:T2391,'use client'; /** * OutputField Component * * Renders task output fields with smart type detection: * - Files (images, videos, audio) via FilePreview * - Markdown text via pretext-md * - Objects and arrays recursively * - Booleans with colored pills */ import { memo, useState } from 'react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { ChevronDownIcon, ChevronRightIcon, Copy, Check } from 'lucide-react'; import { FilePreview, type PartialFile } from './file-preview'; import { Markdown } from '@/lib/pretext-md/react'; /** Field schema (simplified from SDK) */ export interface Field { key?: string; type?: string; properties?: Record; items?: Field; } /** Check if data is a file object */ export function isFile(data: unknown): data is PartialFile { return typeof data === 'object' && data !== null && 'uri' in data && typeof (data as PartialFile).uri === 'string'; } /** Check if data is a URL string */ export function isUrl(data: unknown): boolean { return typeof data === 'string' && (data.startsWith('http://') || data.startsWith('https://')); } /** Transform URL or file to PartialFile */ function transformToFileObject(data: unknown): PartialFile { if (isUrl(data)) { const uri = data as string; return { uri, path: uri, filename: uri.split('/').pop()?.split('?')[0], }; } return data as PartialFile; } export interface OutputFieldProps { /** Field schema (optional, for labels) */ field?: Field; /** The data to render */ data: unknown; /** Additional classes */ className?: string; /** Compact mode (hide labels) */ compact?: boolean; /** Show action buttons */ buttons?: boolean; /** Allow clicking to interact */ clickable?: boolean; /** Auto-play videos */ autoplay?: boolean; } export const OutputField = memo(function OutputField({ field, data, className, compact, buttons = true, clickable = true, autoplay, }: OutputFieldProps) { const [isOpen, setIsOpen] = useState(false); const [copied, setCopied] = useState(false); // Handle null/undefined if (data === null || data === undefined) { return null; } const isArray = Array.isArray(data); const isFileArray = isArray && data.length > 0 && data.every((item) => item !== null && (isUrl(item) || isFile(item))); const isSingleFile = !isArray && (isUrl(data) || isFile(data)); // Transform data if needed const transformedData = isFileArray ? (data as unknown[]).map(transformToFileObject) : isSingleFile ? transformToFileObject(data) : data; const isObject = !isSingleFile && !isFileArray && typeof data === 'object' && !isArray; // Empty arrays if (isArray && data.length === 0) { return null; } const handleCopy = async () => { const text = typeof data === 'string' ? data : JSON.stringify(data, null, 2); await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1500); }; return (

{/* Label */} {field?.key && !compact && (

{field.key} {field.type && ( {field.type} )} {isObject && ( )}

)} {/* File array */} {isFileArray ? (

{(transformedData as PartialFile[]).map((item, index) => ( ))}

) : /* Single file */ isSingleFile ? ( ) : /* Object */ isObject ? ( <> {compact && ( setIsOpen(!isOpen)} className="cursor-pointer hover:bg-muted/50 px-4 py-2" >

{field?.key} {field?.type && ( {field.type} )} {isOpen ? : }

)} {(isOpen || !compact) && (

{Object.entries(data as Record).map( ([key, value]) => value != null && ( ) )}

)} ) : /* Boolean */ typeof data === 'boolean' ? (

{data ? 'true' : 'false'}

) : /* Array */ isArray ? (

{(data as unknown[]).map((item, index) => ( ))}

) : ( /* Primitive (string, number) */

{typeof data === 'string' ? ( ) : ( {String(data)} )}

)}

); }); export interface OutputFieldsProps { /** The output data object */ output: Record; /** Field schema for labels */ fields?: Record; /** Additional classes */ className?: string; /** Compact mode */ compact?: boolean; } /** Render multiple output fields */ export const OutputFields = memo(function OutputFields({ output, fields, className, compact, }: OutputFieldsProps) { if (!output || typeof output !== 'object') { return null; } return (

{Object.entries(output).map(([key, value]) => ( ))}

); }); 55:T251a,'use client'; /** * FilePreview Component * * Renders file previews based on content type: images, videos, audio, text, and generic files. * Supports zoomable images, copy URL, open in new tab, and download actions. */ import { Button } from '@/components/ui/button'; import { DownloadIcon, ExternalLinkIcon, FileIcon, LinkIcon, Copy, Check } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; import { cn } from '@/lib/utils'; /** Partial file structure from SDK */ export interface PartialFile { uri: string; path?: string; filename?: string; content_type?: string; size?: number; } export interface FilePreviewProps { file: PartialFile; index?: number; onLoad?: () => void; onError?: () => void; /** Show action buttons on hover */ buttons?: boolean; /** Allow clicking to interact */ clickable?: boolean; /** Auto-play videos */ autoplay?: boolean; /** Object fit mode */ objectFit?: 'contain' | 'cover'; /** Show card border */ card?: boolean; /** Allow dragging */ draggable?: boolean; className?: string; } /** Guess content type from URL extension */ function guessContentType(uri: string): string | null { const ext = uri.split('.').pop()?.toLowerCase().split('?')[0]; const mimeTypes: Record = { // Images jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml', avif: 'image/avif', bmp: 'image/bmp', ico: 'image/x-icon', // Video mp4: 'video/mp4', webm: 'video/webm', mov: 'video/quicktime', avi: 'video/x-msvideo', mkv: 'video/x-matroska', // Audio mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', m4a: 'audio/mp4', flac: 'audio/flac', // Text txt: 'text/plain', md: 'text/markdown', json: 'application/json', xml: 'application/xml', html: 'text/html', css: 'text/css', js: 'text/javascript', // Documents pdf: 'application/pdf', }; return ext ? mimeTypes[ext] || null : null; } /** Get friendly type name from MIME type */ function getFriendlyType(mime: string | undefined): string | null { if (!mime) return null; const friendlyNames: Record = { 'application/pdf': 'PDF', 'application/json': 'JSON', 'text/plain': 'Text', 'text/markdown': 'Markdown', 'image/jpeg': 'JPEG', 'image/png': 'PNG', 'image/gif': 'GIF', 'image/webp': 'WebP', 'image/svg+xml': 'SVG', 'video/mp4': 'MP4', 'video/webm': 'WebM', 'audio/mpeg': 'MP3', 'audio/wav': 'WAV', }; if (friendlyNames[mime]) return friendlyNames[mime]; // Fallback: extract subtype const parts = mime.split('/'); if (parts.length === 2) { let subtype = parts[1].replace(/^x-/, '').replace(/^vnd\./, '').split('.')[0]; return subtype.charAt(0).toUpperCase() + subtype.slice(1); } return null; } /** Get content category for rendering */ function getContentCategory( contentType: string | undefined, uri: string ): 'image' | 'video' | 'audio' | 'text' | 'file' { if (contentType?.startsWith('image/')) return 'image'; if (contentType?.startsWith('video/')) return 'video'; if (contentType?.startsWith('audio/')) return 'audio'; if (contentType === 'text/plain' || contentType === 'text/markdown') return 'text'; return 'file'; } export function FilePreview({ file, index, onLoad, onError, buttons = true, clickable = true, autoplay = false, objectFit = 'contain', card = true, draggable = true, className, }: FilePreviewProps) { const [contentType, setContentType] = useState(file.content_type); const [copied, setCopied] = useState(false); useEffect(() => { if (!file.content_type) { const guessed = guessContentType(file.uri); if (guessed) { setContentType(guessed); } } }, [file.content_type, file.uri]); const handleDragStart = useCallback( (e: React.DragEvent) => { if (!draggable) return; e.dataTransfer.setData('text/uri-list', file.uri); e.dataTransfer.setData('text/plain', file.uri); e.dataTransfer.effectAllowed = 'copyMove'; }, [draggable, file.uri] ); const handleCopyUrl = useCallback( (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); navigator.clipboard.writeText(file.uri); setCopied(true); setTimeout(() => setCopied(false), 1500); }, [file.uri] ); const handleOpenExternal = useCallback( (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); window.open(file.uri, '_blank'); }, [file.uri] ); const category = getContentCategory(contentType, file.uri); const renderContent = () => { switch (category) { case 'image': return ( {file.filename

onError?.()} /> ); case 'video': return (

); case 'audio': return (

); case 'text': return (

); case 'file': default: const friendlyType = getFriendlyType(contentType); return (

{file.filename || 'Unknown file'} {friendlyType && {friendlyType}}

); } }; return (

{renderContent()} {buttons && (

)}

); } /** Simple text preview that fetches and displays text content */ function TextPreview({ url, onLoad, onError, }: { url: string; onLoad?: () => void; onError?: () => void; }) { const [content, setContent] = useState(null); const [error, setError] = useState(null); useEffect(() => { fetch(url) .then((res) => { if (!res.ok) throw new Error('Failed to fetch'); return res.text(); }) .then((text) => { setContent(text); onLoad?.(); }) .catch((err) => { setError(err.message); onError?.(); }); }, [url, onLoad, onError]); if (error) return Failed to load: {error}; if (content === null) return Loading...; return <>{content}; } 56:Tbdf,'use client'; /** * TimeSince Component * * Displays elapsed time between a start and optional end time. * Updates in real-time when no end time is provided. */ import React, { memo, useEffect, useRef, useState } from 'react'; import { cn } from '@/lib/utils'; /** Format milliseconds to human-readable duration */ function formatDuration(ms: number): string { if (ms < 1000) return `${ms}ms`; const totalSeconds = ms / 1000; if (totalSeconds < 60) return `${totalSeconds.toFixed(1)}s`; const totalMinutes = totalSeconds / 60; if (totalMinutes < 60) { const minutes = Math.floor(totalMinutes); const seconds = Math.round(totalSeconds % 60); return `${minutes}m${seconds}s`; } const totalHours = totalMinutes / 60; const hours = Math.floor(totalHours); const minutes = Math.floor(totalMinutes % 60); const seconds = Math.round(totalSeconds % 60); return `${hours}h${minutes}m${seconds}s`; } /** Get smart update interval based on elapsed time */ function getSmartInterval(ms: number): number { if (ms < 1000) return 20; // Update every 20ms for ms display if (ms < 60_000) return 100; // Update every 100ms for < 1m if (ms < 3_600_000) return 1000; // Update every second for < 1h return 60_000; // Update every minute for >= 1h } export interface TimeSinceProps { /** Start time (Date, timestamp, or ISO string) */ start: string | number | Date | undefined; /** Optional end time - if not provided, shows live elapsed time */ end?: string | number | Date | undefined; /** Additional CSS classes */ className?: string; /** Wrap the time in parentheses */ parentheses?: boolean; } export const TimeSince = memo(function TimeSince({ start, end, className, parentheses = false, }: TimeSinceProps) { const [now, setNow] = useState(Date.now()); const timerRef = useRef | null>(null); useEffect(() => { // Don't update if end is provided (static display) if (end) return; function update() { setNow(Date.now()); } const startTime = start ? new Date(start).getTime() : 0; const endTime = end ? new Date(end).getTime() : now; const diff = Math.max(0, endTime - startTime); const interval = getSmartInterval(diff); if (timerRef.current) clearInterval(timerRef.current); timerRef.current = setInterval(update, interval); return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [start, end, now]); if (!start) return -; const startTime = new Date(start).getTime(); const endTime = end ? new Date(end).getTime() : now; if (isNaN(startTime) || isNaN(endTime)) { return ?; } const diff = Math.max(0, endTime - startTime); if (diff === 0) return ; const formatted = formatDuration(diff); return ( {parentheses ? `(${formatted})` : formatted} ); }); 57:T1479,import { useState, useEffect, useRef, useCallback } from 'react'; import type { TaskDTO as Task } from '@inferencesh/sdk'; import type { AgentClient } from '@inferencesh/sdk/agent'; import { StreamableManager, TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled } from '@inferencesh/sdk'; export interface UseTaskOptions { /** The inference client instance (AgentClient compatible) */ client: AgentClient; /** The task ID to fetch and stream */ taskId: string; /** Called when task data updates */ onUpdate?: (task: Task) => void; /** Called when task reaches terminal status */ onComplete?: (task: Task) => void; /** Called when an error occurs */ onError?: (error: Error) => void; /** Auto-reconnect on connection loss (default: true) */ autoReconnect?: boolean; /** Maximum reconnection attempts (default: 5) */ maxReconnects?: number; } export interface UseTaskResult { /** The current task data */ task: Task | null; /** Whether the initial fetch is loading */ isLoading: boolean; /** Whether streaming is active */ isStreaming: boolean; /** Any error that occurred */ error: Error | null; /** Refetch the task */ refetch: () => Promise; /** Stop streaming */ stopStream: () => void; } /** Check if a task status is terminal (completed, failed, or cancelled) */ export function isTerminalStatus(status: number | undefined): boolean { return status !== undefined && [ TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled ].includes(status); } /** * Hook for fetching and streaming task updates * * @example * ```tsx * const client = new Inference({ apiKey: 'your-key' }); * const { task, isLoading, isStreaming } = useTask({ * client, * taskId: 'abc123' * }); * ``` */ export function useTask({ client, taskId, onUpdate, onComplete, onError, autoReconnect = true, maxReconnects = 5, }: UseTaskOptions): UseTaskResult { const [task, setTask] = useState(null); const [isLoading, setIsLoading] = useState(true); const [isStreaming, setIsStreaming] = useState(false); const [error, setError] = useState(null); const streamManagerRef = useRef | null>(null); const taskRef = useRef(null); // Keep task ref in sync useEffect(() => { taskRef.current = task; }, [task]); const stopStream = useCallback(() => { if (streamManagerRef.current) { streamManagerRef.current.stop(); streamManagerRef.current = null; } setIsStreaming(false); }, []); const startStream = useCallback(() => { if (!taskId || !client) return; // Stop any existing stream stopStream(); const { url, headers } = client.http.getStreamableConfig(`/tasks/${taskId}/stream`); const manager = new StreamableManager({ url, headers, onStart: () => setIsStreaming(true), onEnd: () => setIsStreaming(false), onError: (err) => { setError(err); onError?.(err); }, onData: (taskData: Task) => { setTask(taskData); onUpdate?.(taskData); if (isTerminalStatus(taskData.status)) { onComplete?.(taskData); manager.stop(); } }, onPartialData: (partialData: Task, fields: string[]) => { const currentTask = taskRef.current; if (currentTask) { // Merge partial updates const updates = fields.reduce((acc, field) => { const key = field as keyof Task; (acc as Record)[key] = partialData[key]; return acc; }, {} as Partial); const mergedTask = { ...currentTask, ...updates }; setTask(mergedTask); onUpdate?.(mergedTask); if (isTerminalStatus(mergedTask.status)) { onComplete?.(mergedTask); manager.stop(); } } else { setTask(partialData); onUpdate?.(partialData); } }, }); streamManagerRef.current = manager; manager.start(); }, [taskId, client, autoReconnect, maxReconnects, onUpdate, onComplete, onError, stopStream]); const fetchTask = useCallback(async () => { if (!taskId || !client) return; setIsLoading(true); setError(null); try { const { data: taskData } = await client.http.request('get', `/tasks/${taskId}`); setTask(taskData); onUpdate?.(taskData); // Start streaming if task is not terminal if (!isTerminalStatus(taskData.status)) { startStream(); } else { onComplete?.(taskData); } } catch (err) { const error = err instanceof Error ? err : new Error('Failed to fetch task'); setError(error); onError?.(error); } finally { setIsLoading(false); } }, [taskId, client, onUpdate, onComplete, onError, startStream]); // Fetch task on mount and when taskId changes useEffect(() => { fetchTask(); return () => { stopStream(); }; }, [taskId]); // eslint-disable-line react-hooks/exhaustive-deps return { task, isLoading, isStreaming, error, refetch: fetchTask, stopStream, }; } 58:T4f3,export { TaskOutput } from './task-output'; export type { TaskOutputProps } from './task-output'; // Hook export { useTask, isTerminalStatus } from '@/hooks/use-task'; export type { UseTaskOptions, UseTaskResult } from '@/hooks/use-task'; // Status components export { StatusPill, StatusPillSimple, getStatusColor, getStatusText, getStatusTextFull, extractTaskEventTimes, } from './task-status'; export type { StatusPillProps, StatusPillSimpleProps, TaskEventTimes } from './task-status'; // Logs components export { TaskLogs, SimpleLogs, LogViewer } from './task-logs'; export type { TaskLogsProps, SimpleLogsProps } from './task-logs'; // Output fields components export { OutputField, OutputFields, isFile, isUrl } from './output-fields'; export type { OutputFieldProps, OutputFieldsProps, Field } from './output-fields'; // File preview component export { FilePreview } from './file-preview'; export type { FilePreviewProps, PartialFile } from './file-preview'; // Time component export { TimeSince } from './time-since'; export type { TimeSinceProps } from './time-since'; // Wrapper component for easy integration export { TaskOutputWrapper } from './task-output-wrapper'; export type { TaskOutputWrapperProps } from './task-output-wrapper'; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@inferencesh/sdk",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40inferencesh%2Fsdk","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@inferencesh/sdk"}]]}]}]]}],["$","$L4e",null,{"namespace":"@inferencesh","registryDependencies":["button","card","label","tooltip","spinner","https://inference.sh/ui/r/pretext-md.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/infsh/task/task-output.tsx","content":"$50","type":"registry:component","target":"components/infsh/task/task-output.tsx"},{"path":"components/infsh/task/task-output-wrapper.tsx","content":"$51","type":"registry:component","target":"components/infsh/task/task-output-wrapper.tsx"},{"path":"components/infsh/task/task-status.tsx","content":"$52","type":"registry:component","target":"components/infsh/task/task-status.tsx"},{"path":"components/infsh/task/task-logs.tsx","content":"$53","type":"registry:component","target":"components/infsh/task/task-logs.tsx"},{"path":"components/infsh/task/output-fields.tsx","content":"$54","type":"registry:component","target":"components/infsh/task/output-fields.tsx"},{"path":"components/infsh/task/file-preview.tsx","content":"$55","type":"registry:component","target":"components/infsh/task/file-preview.tsx"},{"path":"components/infsh/task/time-since.tsx","content":"$56","type":"registry:component","target":"components/infsh/task/time-since.tsx"},{"path":"hooks/use-task.ts","content":"$57","type":"registry:hook","target":"hooks/use-task.ts"},{"path":"components/infsh/task/index.ts","content":"$58","type":"registry:lib","target":"components/infsh/task/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]