REMOVE unused code

cua2-front/src/component/poc/ConnectionStatus.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-interface ConnectionStatusProps {
-    isConnected: boolean;
-}
-
-export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected }) => {
-    return (
-        <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-            padding: '8px 16px',
-            borderRadius: '20px',
-            backdropFilter: 'blur(10px)',
-            border: '1px solid rgba(255, 255, 255, 0.3)'
-        }}>
-            <div style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                backgroundColor: isConnected ? '#10b981' : '#ef4444',
-                boxShadow: isConnected ? '0 0 8px #10b981' : '0 0 8px #ef4444',
-                animation: isConnected ? 'pulse 2s infinite' : 'none'
-            }}></div>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <span className="text-xs font-semibold text-white" style={{ lineHeight: '1.2' }}>
-                    {isConnected ? 'Connected' : 'Disconnected'}
-                </span>
-                <span className="text-xs text-white" style={{ opacity: 0.7, fontSize: '10px', lineHeight: '1.2' }}>
-                    WebSocket
-                </span>
-            </div>
-        </div>
-    );
-};

cua2-front/src/component/poc/Header.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ConnectionStatus } from './ConnectionStatus';
-import { ProcessingIndicator } from './ProcessingIndicator';
-import { TaskButton } from './TaskButton';
-
-interface HeaderProps {
-    isConnected: boolean;
-    isAgentProcessing: boolean;
-    onSendTask: (content: string, modelId: string) => void;
-}
-
-export const Header: React.FC<HeaderProps> = ({ isConnected, isAgentProcessing, onSendTask }) => {
-    return (
-        <>
-            <div style={{
-                flexShrink: 0,
-            }}>
-                <div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px 32px' }}>
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-6">
-                            <ConnectionStatus isConnected={isConnected} />
-                            <h1 className="text-3xl font-bold text-white" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
-                                CUA2 Agent
-                            </h1>
-                        </div>
-                        <ProcessingIndicator isAgentProcessing={isAgentProcessing} />
-                    </div>
-                    <TaskButton
-                        isAgentProcessing={isAgentProcessing}
-                        isConnected={isConnected}
-                        onSendTask={onSendTask}
-                    />
-                </div>
-            </div>
-
-            <style>{`
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-        @keyframes pulse {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0.5; }
-        }
-      `}</style>
-        </>
-    );
-};

cua2-front/src/component/poc/Metadata.tsx

@@ -1,38 +0,0 @@
-import { AgentTrace } from '@/types/agent';
-import React from 'react';
-
-interface MetadataProps {
-    trace?: AgentTrace;
-}
-
-export const Metadata: React.FC<MetadataProps> = ({ trace }) => {
-    return (
-        <div style={{ flexShrink: 0 }} className="bg-white rounded-lg shadow-md border border-gray-200 p-5">
-            <h3 className="text-lg font-semibold text-gray-800 mb-4">Metadata</h3>
-            {trace?.metadata ? (
-                <div style={{ display: 'flex', gap: '12px' }}>
-                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '8px', padding: '12px', border: '1px solid #bfdbfe', boxShadow: '0 2px 4px rgba(59, 130, 246, 0.1)' }}>
-                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Time</span>
-                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#1e40af' }}>{trace.metadata.duration.toFixed(2)}s</span>
-                    </div>
-                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '8px', padding: '12px', border: '1px solid #bbf7d0', boxShadow: '0 2px 4px rgba(16, 185, 129, 0.1)' }}>
-                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>In Tokens</span>
-                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#166534' }}>{trace.metadata.inputTokensUsed.toLocaleString()}</span>
-                    </div>
-                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '8px', padding: '12px', border: '1px solid #e9d5ff', boxShadow: '0 2px 4px rgba(139, 92, 246, 0.1)' }}>
-                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Out Tokens</span>
-                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#6b21a8' }}>{trace.metadata.outputTokensUsed.toLocaleString()}</span>
-                    </div>
-                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff7ed', borderRadius: '8px', padding: '12px', border: '1px solid #fed7aa', boxShadow: '0 2px 4px rgba(249, 115, 22, 0.1)' }}>
-                        <span style={{ fontSize: '10px', fontWeight: 600, color: '#ea580c', textTransform: 'uppercase', letterSpacing: '0.8px', marginBottom: '6px' }}>Total Steps</span>
-                        <span style={{ fontSize: '24px', fontWeight: 700, color: '#c2410c' }}>{trace.metadata.numberOfSteps}</span>
-                    </div>
-                </div>
-            ) : (
-                <div className="text-gray-400 text-sm py-2">
-                    {trace ? 'Waiting for completion...' : 'No task started yet'}
-                </div>
-            )}
-        </div>
-    );
-};

cua2-front/src/component/poc/ProcessingIndicator.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface ProcessingIndicatorProps {
-    isAgentProcessing: boolean;
-}
-
-export const ProcessingIndicator: React.FC<ProcessingIndicatorProps> = ({ isAgentProcessing }) => {
-    if (!isAgentProcessing) return null;
-
-    return (
-        <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '10px',
-            padding: '10px 20px',
-            backgroundColor: 'rgba(251, 191, 36, 0.2)',
-            borderRadius: '10px',
-            border: '1px solid rgba(251, 191, 36, 0.4)'
-        }}>
-            <span style={{
-                width: '16px',
-                height: '16px',
-                border: '2px solid #fbbf24',
-                borderTopColor: 'transparent',
-                borderRadius: '50%',
-                animation: 'spin 1s linear infinite',
-                display: 'inline-block'
-            }}></span>
-            <span style={{ fontSize: '14px', fontWeight: 600, color: '#fbbf24', letterSpacing: '0.5px' }}>
-                PROCESSING...
-            </span>
-        </div>
-    );
-};

cua2-front/src/component/poc/StackSteps.tsx

@@ -1,29 +0,0 @@
-import { AgentTrace } from '@/types/agent';
-import React from 'react';
-import { StepCard } from './StepCard';
-
-interface StackStepsProps {
-    trace?: AgentTrace;
-}
-
-export const StackSteps: React.FC<StackStepsProps> = ({ trace }) => {
-    return (
-        <div style={{ width: '360px', flexShrink: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', marginLeft: '12px', marginTop: '20px', marginBottom: '20px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb' }}>
-            <h3 className="text-lg font-semibold text-gray-800 mb-4">Stack Steps</h3>
-            <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, padding: '16px' }}>
-                {trace?.steps && trace.steps.length > 0 ? (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                        {trace.steps.map((step, index) => (
-                            <StepCard key={step.stepId} step={step} index={index} />
-                        ))}
-                    </div>
-                ) : (
-                    <div className="flex flex-col items-center justify-center h-full text-gray-400 p-6 text-center">
-                        <p className="font-medium">No steps yet</p>
-                        <p className="text-xs mt-1">Steps will appear as agent progresses</p>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

cua2-front/src/component/poc/StepCard.tsx

@@ -1,84 +0,0 @@
-import { AgentStep } from '@/types/agent';
-import React from 'react';
-
-interface StepCardProps {
-    step: AgentStep;
-    index: number;
-}
-
-export const StepCard: React.FC<StepCardProps> = ({ step, index }) => {
-    return (
-        <div
-            key={step.stepId}
-            style={{ backgroundColor: '#f9fafb', borderRadius: '8px', border: '1px solid #d1d5db', padding: '12px', boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)' }}
-            className="hover:border-blue-400 transition-all"
-        >
-            {/* Step Header */}
-            <div className="mb-6">
-                <span className="text-xs font-bold text-blue-600 uppercase tracking-wide">Step {index + 1}</span>
-                <hr style={{ margin: '12px 0', border: 'none', borderTop: '2px solid #d1d5db' }} />
-            </div>
-
-            {/* Step Image */}
-            {step.image && (
-                <div className="mb-6">
-                    <div className="rounded-md overflow-hidden border border-gray-300 bg-white" style={{ maxHeight: '140px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                        <img
-                            src={step.image}
-                            alt={`Step ${index + 1}`}
-                            style={{ width: '100%', height: 'auto', maxHeight: '140px', objectFit: 'contain' }}
-                        />
-                    </div>
-                    <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-                </div>
-            )}
-
-            {/* Thought */}
-            <div className="mb-6">
-                <div className="bg-white rounded-md p-2.5 border border-gray-200">
-                    <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
-                        <span>💭</span>
-                        <span>Thought</span>
-                    </h4>
-                    <p className="text-xs text-gray-600 leading-relaxed">{step.thought}</p>
-                </div>
-                <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-            </div>
-
-            {/* Actions */}
-            <div className="mb-6">
-                <div className="bg-white rounded-md p-2.5 border border-gray-200">
-                    <h4 className="text-xs font-semibold text-gray-700 mb-1.5 flex items-center gap-1">
-                        <span>⚡</span>
-                        <span>Actions</span>
-                    </h4>
-                    <ul className="space-y-1" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-                        {step.actions.map((action, actionIndex) => (
-                            <li key={actionIndex} className="text-xs text-gray-600 flex items-start leading-snug">
-                                <span className="mr-1.5 text-blue-500 flex-shrink-0">→</span>
-                                <span className="break-words">{action}</span>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                <hr style={{ margin: '20px 0', border: 'none', borderTop: '1px solid #e5e7eb' }} />
-            </div>
-
-            {/* Step Metadata Footer */}
-            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#eff6ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bfdbfe' }}>
-                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#2563eb', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Time</span>
-                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#1e40af' }}>{step.duration.toFixed(2)}s</span>
-                </div>
-                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0fdf4', borderRadius: '6px', padding: '6px 8px', border: '1px solid #bbf7d0' }}>
-                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.5px' }}>In Tokens</span>
-                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#166534' }}>{step.inputTokensUsed}</span>
-                </div>
-                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#faf5ff', borderRadius: '6px', padding: '6px 8px', border: '1px solid #e9d5ff' }}>
-                    <span style={{ fontSize: '9px', fontWeight: 500, color: '#9333ea', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Out Tokens</span>
-                    <span style={{ fontSize: '12px', fontWeight: 700, color: '#6b21a8' }}>{step.outputTokensUsed}</span>
-                </div>
-            </div>
-        </div>
-    );
-};

cua2-front/src/component/poc/TaskButton.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-interface TaskButtonProps {
-    isAgentProcessing: boolean;
-    isConnected: boolean;
-    onSendTask: (content: string, modelId: string) => void;
-}
-
-export const TaskButton: React.FC<TaskButtonProps> = ({ isAgentProcessing, isConnected, onSendTask }) => {
-    return (
-        <div
-            onClick={() => {
-                if (!isAgentProcessing && isConnected) {
-                    onSendTask(
-                        "Complete the online form by clicking through the required fields",
-                        "anthropic/claude-sonnet-4-5-20250929"
-                    );
-                }
-            }}
-            style={{
-                marginTop: '16px',
-                padding: '14px 18px',
-                background: isAgentProcessing || !isConnected
-                    ? 'rgba(255, 255, 255, 0.1)'
-                    : 'rgba(255, 255, 255, 0.15)',
-                borderRadius: '10px',
-                backdropFilter: 'blur(10px)',
-                border: '2px solid rgba(0, 0, 0, 0.3)',
-                cursor: isAgentProcessing || !isConnected ? 'not-allowed' : 'pointer',
-                transition: 'all 0.3s ease',
-                opacity: isAgentProcessing || !isConnected ? 0.6 : 1,
-            }}
-            onMouseEnter={(e) => {
-                if (!isAgentProcessing && isConnected) {
-                    e.currentTarget.style.background = 'rgba(200, 200, 200, 0.3)';
-                    e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.5)';
-                    e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
-                }
-            }}
-            onMouseLeave={(e) => {
-                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
-                e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.3)';
-                e.currentTarget.style.transform = 'translateY(0)';
-                e.currentTarget.style.boxShadow = 'none';
-            }}
-        >
-            <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
-                <div style={{ flex: 1 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
-                        <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.7)', textTransform: 'uppercase', letterSpacing: '1px' }}>Task</span>
-                        {!isAgentProcessing && isConnected && (
-                            <span style={{ fontSize: '10px', color: 'rgba(0, 0, 0, 0.5)', fontStyle: 'italic' }}>
-                                (click to run)
-                            </span>
-                        )}
-                    </div>
-                    <p style={{ fontSize: '15px', fontWeight: 500, color: '#1f2937' }}>
-                        Complete the online form by clicking through the required fields
-                    </p>
-                </div>
-                <div style={{
-                    padding: '8px 16px',
-                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                    borderRadius: '6px',
-                    border: '1px solid rgba(0, 0, 0, 0.2)'
-                }}>
-                    <span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(0, 0, 0, 0.6)', textTransform: 'uppercase', letterSpacing: '1px' }}>Model</span>
-                    <p style={{ fontSize: '12px', fontWeight: 600, color: '#1f2937', marginTop: '2px', whiteSpace: 'nowrap' }}>
-                        claude-sonnet-4-5-20250929
-                    </p>
-                </div>
-            </div>
-        </div>
-    );
-};

cua2-front/src/component/poc/VNCStream.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-interface VNCStreamProps {
-    vncUrl: string;
-}
-
-export const VNCStream: React.FC<VNCStreamProps> = ({ vncUrl }) => {
-    return (
-        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', backgroundColor: 'white', borderRadius: '10px', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', border: '1px solid #e5e7eb', overflow: 'hidden', padding: '20px' }}>
-            <h3 className="text-lg font-semibold text-gray-800 mb-4">VNC Stream</h3>
-            <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                {vncUrl ? (
-                    <iframe
-                        src={vncUrl}
-                        style={{ width: '100%', height: '100%', border: 'none' }}
-                        title="VNC Stream"
-                    />
-                ) : (
-                    <div className="text-gray-400 text-center p-8">
-                        <svg className="w-16 h-16 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
-                        <p className="font-medium">No VNC stream available</p>
-                        <p className="text-sm mt-1 text-gray-500">Stream will appear when agent starts</p>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

cua2-front/src/component/poc/index.ts

@@ -1,8 +0,0 @@
-export { ConnectionStatus } from './ConnectionStatus';
-export { Header } from './Header';
-export { Metadata } from './Metadata';
-export { ProcessingIndicator } from './ProcessingIndicator';
-export { StackSteps } from './StackSteps';
-export { StepCard } from './StepCard';
-export { TaskButton } from './TaskButton';
-export { VNCStream } from './VNCStream';