Task

1'use client';
2 
3/**
4 * TaskOutput Component
5 *
6 * Displays task output with status, logs, and output fields.
7 * Supports streaming updates for real-time progress.
8 */
9 
10import React, { memo, useState } from 'react';
11import { cn } from '@/lib/utils';
12import type { TaskDTO as Task } from '@inferencesh/sdk';
13import { TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled } from '@inferencesh/sdk';
14import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
15import { Spinner } from '@/components/ui/spinner';
16import { CircleAlert, XCircle, Copy, Check } from 'lucide-react';
17import { Button } from '@/components/ui/button';
18import { StatusPill } from './task-status';
19import { TaskLogs, SimpleLogs } from './task-logs';
20import { OutputFields } from './output-fields';
21 
22type OutputView = 'output' | 'logs' | 'json';
23 
24export interface TaskOutputProps {
25  /** The task to display */
26  task: Task | null;
27  /** Whether the initial fetch is loading */
28  isLoading?: boolean;
29  /** Whether streaming is active */
30  isStreaming?: boolean;
31  /** Additional CSS classes */
32  className?: string;
33  /** Compact mode (no card wrapper) */
34  compact?: boolean;
35  /** Show error details */
36  showError?: boolean;
37  /** Optional cancel handler */
38  onCancel?: () => void;
39}
40 
41/** Check if task status is terminal */
42function isTerminalStatus(status: number | undefined): boolean {
43  return (
44    status !== undefined &&
45    [TaskStatusCompleted, TaskStatusFailed, TaskStatusCancelled].includes(status)
46  );
47}
48 
49/** Loading state display */
50const LoadingContent = memo(function LoadingContent({
51  task,
52  compact,
53}: {
54  task: Task | null;
55  compact: boolean;
56}) {
57  const content = (
58    <div className="flex flex-col items-center justify-center py-12 gap-4">
59      <Spinner className="h-8 w-8" />
60      {task && <SimpleLogs task={task} compact onlyLastLine />}
61    </div>
62  );
63 
64  if (compact) {
65    return (
66      <Card>
67        <CardContent className="p-4">{content}</CardContent>
68      </Card>
69    );
70  }
71 
72  return content;
73});
74 
75/** Empty state display */
76const EmptyContent = memo(function EmptyContent({ compact }: { compact: boolean }) {
77  const content = (
78    <div className="flex flex-col items-center justify-center py-12">
79      <div className="h-8 w-8 rounded-full border-2 border-muted-foreground/20" />
80      <span className="text-sm text-muted-foreground/50 mt-4">no output yet</span>
81    </div>
82  );
83 
84  if (compact) {
85    return (
86      <Card>
87// … truncated