frontend/workflow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="AutoForge Workflow Details">
    <title>AutoForge — Workflow</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="app-layout">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-brand">
                    <div class="logo">⚡</div>
                    <h1>AutoForge</h1>
                </div>
            </div>
            <div class="sidebar-nav">
                <a href="dashboard.html" class="nav-item">
                    <span class="icon">📊</span><span>Dashboard</span>
                </a>
                <a href="workflow.html" class="nav-item active">
                    <span class="icon">⚙️</span><span>Workflow</span>
                </a>
                <a href="history.html" class="nav-item">
                    <span class="icon">📜</span><span>History</span>
                </a>
                <a href="settings.html" class="nav-item">
                    <span class="icon">🔧</span><span>Settings</span>
                </a>
            </div>
            <div class="sidebar-footer">
                <div class="user-menu" id="logout-btn">
                    <div class="user-avatar" id="user-avatar">U</div>
                    <span class="user-name" id="user-display-name">User</span>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page-header">
                <h2>Workflow Details</h2>
                <p id="workflow-id-display">Loading…</p>
            </div>

            <div id="workflow-detail">
                <div class="spinner" style="margin: 3rem auto;"></div>
            </div>
        </main>
    </div>

    <script src="/js/api.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/router.js"></script>
    <script src="/js/app.js"></script>
    <script>
        if (Router.init()) {
            App.initSidebar();

            const params = new URLSearchParams(window.location.search);
            const id = params.get('id');

            if (id) {
                loadWorkflowDetail(id);
            } else {
                document.getElementById('workflow-detail').innerHTML = `
                    <div class="placeholder-content">
                        <div class="icon-placeholder">⚙️</div>
                        <h3>Select a Workflow</h3>
                        <p>Choose a workflow from the dashboard to view its details and execution progress.</p>
                    </div>
                `;
            }

            async function loadWorkflowDetail(workflowId) {
                try {
                    const wf = await API.get(`/api/workflows/${workflowId}`);
                    document.getElementById('workflow-id-display').textContent = `ID: ${wf.id}`;
                    document.getElementById('workflow-detail').innerHTML = `
                        <div class="card glass fade-in" style="margin-bottom: 1.5rem;">
                            <div class="card-header">
                                <span class="card-title">Prompt</span>
                                <span class="badge badge-${wf.status}">${wf.status}</span>
                            </div>
                            <p style="color: var(--text-secondary); line-height: 1.7; font-family: var(--font-mono); font-size: 0.9rem;">${wf.prompt}</p>
                        </div>
                        <div class="card glass fade-in" style="animation-delay: 0.1s;">
                            <div class="card-header">
                                <span class="card-title">Tasks</span>
                                <span class="badge badge-pending">${wf.tasks.length} task(s)</span>
                            </div>
                            ${wf.tasks.length === 0
                                ? '<p style="color: var(--text-muted);">No tasks created yet. DAG execution will populate tasks in a future phase.</p>'
                                : wf.tasks.map(t => `
                                    <div style="padding: 0.75rem; border-bottom: 1px solid var(--border-subtle);">
                                        <strong>${t.task_type}</strong> — <span class="badge badge-${t.status}">${t.status}</span>
                                    </div>
                                `).join('')
                            }
                        </div>
                    `;
                } catch (err) {
                    document.getElementById('workflow-detail').innerHTML = `
                        <div class="placeholder-content">
                            <div class="icon-placeholder">❌</div>
                            <h3>Error</h3>
                            <p>${err.message}</p>
                        </div>
                    `;
                }
            }
        }
    </script>
</body>
</html>