htmlgraph 0.20.1__py3-none-any.whl → 0.27.5__py3-none-any.whl

htmlgraph/api/templates/partials/orchestration-redesign.html

@@ -0,0 +1,443 @@
+<div class="view-container orchestration-view">
+    <div class="view-header">
+        <h2>Agent Orchestration Graph</h2>
+        <div class="view-description">
+            Real-time visualization of agent delegation chains and multi-hop workflows
+        </div>
+        <div class="view-filters">
+            <div class="filter-group">
+                <label>Filter by Agent:</label>
+                <select class="filter-select" id="agent-filter">
+                    <option value="all">All Agents</option>
+                    {% set agents = [] %}
+                    {% for d in delegations %}
+                        {% if d.from_agent not in agents %}
+                            {% set _ = agents.append(d.from_agent) %}
+                        {% endif %}
+                        {% if d.to_agent not in agents %}
+                            {% set _ = agents.append(d.to_agent) %}
+                        {% endif %}
+                    {% endfor %}
+                    {% for agent in agents|sort %}
+                    <option value="{{ agent }}">{{ agent }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <!-- DAG Visualization Container -->
+    <div class="orchestration-graph">
+        <div class="graph-container">
+            <svg class="graph-edges" id="graph-edges"></svg>
+            <div class="graph-nodes" id="graph-nodes"></div>
+        </div>
+    </div>
+
+    <!-- Stats -->
+    <div style="margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-subtle);">
+        <h3 style="color: var(--accent-lime); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-lg);">
+            Orchestration Statistics
+        </h3>
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-label">Total Delegations</div>
+                <div class="metric-value">{{ delegations|length }}</div>
+                <div class="metric-trend">Agent-to-agent handoffs</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Unique Agents</div>
+                <div class="metric-value" id="unique-agents">
+                    {% set unique_agents = {} %}
+                    {% for d in delegations %}
+                        {% if d.from_agent not in unique_agents %}
+                            {% set _ = unique_agents.update({d.from_agent: True}) %}
+                        {% endif %}
+                        {% if d.to_agent not in unique_agents %}
+                            {% set _ = unique_agents.update({d.to_agent: True}) %}
+                        {% endif %}
+                    {% endfor %}
+                    {{ unique_agents|length }}
+                </div>
+                <div class="metric-trend">In network</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Deepest Chain</div>
+                <div class="metric-value" id="deepest-chain">—</div>
+                <div class="metric-trend">Hops in longest path</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Avg Chain Length</div>
+                <div class="metric-value" id="avg-chain-length">—</div>
+                <div class="metric-trend">Mean delegation depth</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delegation List -->
+    {% if delegations %}
+    <div style="margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-subtle);">
+        <h3 style="color: var(--accent-lime); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-lg);">
+            Recent Delegations
+        </h3>
+        <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 2px; overflow: hidden;">
+            <table style="width: 100%; border-collapse: collapse;">
+                <thead style="background: var(--bg-darker); border-bottom: 1px solid var(--border-subtle);">
+                    <tr>
+                        <th style="padding: var(--spacing-lg); text-align: left; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">From</th>
+                        <th style="padding: var(--spacing-lg); text-align: left; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">To</th>
+                        <th style="padding: var(--spacing-lg); text-align: left; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Task</th>
+                        <th style="padding: var(--spacing-lg); text-align: left; color: var(--accent-lime); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;">Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for delegation in delegations[:20] %}
+                    <tr style="border-bottom: 1px solid var(--border-subtle);">
+                        <td style="padding: var(--spacing-lg);">
+                            <span style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); padding: var(--spacing-xs) var(--spacing-sm); border-radius: 2px; color: var(--agent-claude); font-size: 0.85rem; font-weight: 600;">
+                                {{ delegation.from_agent }}
+                            </span>
+                        </td>
+                        <td style="padding: var(--spacing-lg);">
+                            <span style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: var(--spacing-xs) var(--spacing-sm); border-radius: 2px; color: var(--agent-gemini); font-size: 0.85rem; font-weight: 600;">
+                                {{ delegation.to_agent }}
+                            </span>
+                        </td>
+                        <td style="padding: var(--spacing-lg); color: var(--text-secondary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                            {% if delegation.task %}
+                                {{ delegation.task[:60] }}{% if delegation.task|length > 60 %}...{% endif %}
+                            {% else %}
+                                <span style="color: var(--text-muted);">—</span>
+                            {% endif %}
+                        </td>
+                        <td style="padding: var(--spacing-lg); color: var(--text-secondary); font-family: 'Courier New', monospace; font-size: 0.9rem;">
+                            {{ delegation.timestamp }}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% else %}
+    <div style="margin-top: var(--spacing-2xl); padding: var(--spacing-2xl); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 2px; text-align: center; color: var(--text-muted);">
+        <p style="font-size: 1.1rem; margin-bottom: var(--spacing-md);">No delegation chains found</p>
+        <small>Agent-to-agent delegations will appear here as tasks are assigned</small>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+    // Graph rendering for orchestration DAG
+    class OrchestrationGraph {
+        constructor(delegations) {
+            this.delegations = delegations;
+            this.nodes = [];
+            this.edges = [];
+            this.nodeMap = new Map();
+            this.init();
+        }
+
+        init() {
+            // Build node map from delegations
+            this.delegations.forEach(d => {
+                if (!this.nodeMap.has(d.from_agent)) {
+                    this.nodeMap.set(d.from_agent, {
+                        id: d.from_agent,
+                        label: d.from_agent,
+                        x: 0,
+                        y: 0,
+                        inDegree: 0,
+                        outDegree: 0,
+                        totalCost: 0
+                    });
+                }
+                if (!this.nodeMap.has(d.to_agent)) {
+                    this.nodeMap.set(d.to_agent, {
+                        id: d.to_agent,
+                        label: d.to_agent,
+                        x: 0,
+                        y: 0,
+                        inDegree: 0,
+                        outDegree: 0,
+                        totalCost: 0
+                    });
+                }
+
+                const fromNode = this.nodeMap.get(d.from_agent);
+                const toNode = this.nodeMap.get(d.to_agent);
+
+                fromNode.outDegree++;
+                toNode.inDegree++;
+                fromNode.totalCost += d.cost || 0;
+
+                this.edges.push({
+                    from: d.from_agent,
+                    to: d.to_agent,
+                    task: d.task,
+                    cost: d.cost || 0
+                });
+            });
+
+            this.nodes = Array.from(this.nodeMap.values());
+
+            // Layout nodes using simple force-directed approach
+            this.layoutNodes();
+            this.render();
+        }
+
+        layoutNodes() {
+            const container = document.getElementById('graph-nodes');
+            const width = container.parentElement.offsetWidth;
+            const height = container.parentElement.offsetHeight;
+
+            // Arrange nodes horizontally by level (topological sort)
+            const levels = this.getNodeLevels();
+            const levelCounts = new Map();
+
+            this.nodes.forEach(node => {
+                const level = levels.get(node.id) || 0;
+                const count = levelCounts.get(level) || 0;
+                levelCounts.set(level, count + 1);
+
+                const maxLevel = Math.max(...levels.values());
+                const levelWidth = width / (maxLevel + 2);
+                const levelHeight = height / (Math.max(...levelCounts.values()) + 1);
+
+                node.x = (level + 1) * levelWidth;
+                node.y = (count + 1) * levelHeight;
+            });
+        }
+
+        getNodeLevels() {
+            const levels = new Map();
+            const visited = new Set();
+
+            const visit = (nodeId, level) => {
+                if (visited.has(nodeId)) return;
+                visited.add(nodeId);
+
+                levels.set(nodeId, Math.max(levels.get(nodeId) || 0, level));
+
+                // Visit outgoing nodes
+                this.edges
+                    .filter(e => e.from === nodeId)
+                    .forEach(e => visit(e.to, level + 1));
+            };
+
+            this.nodes.forEach(node => visit(node.id, 0));
+            return levels;
+        }
+
+        render() {
+            const container = document.getElementById('graph-nodes');
+            container.innerHTML = '';
+
+            // Render edges first (so they appear behind nodes)
+            this.renderEdges();
+
+            // Render nodes
+            this.nodes.forEach(node => {
+                const nodeEl = document.createElement('div');
+                nodeEl.className = 'graph-node';
+                nodeEl.style.left = (node.x - 60) + 'px';
+                nodeEl.style.top = (node.y - 40) + 'px';
+
+                // Determine color based on model
+                const modelClass = node.id.toLowerCase().includes('gemini') ? 'gemini'
+                                 : node.id.toLowerCase().includes('copilot') ? 'copilot'
+                                 : 'claude';
+                nodeEl.classList.add(modelClass);
+
+                nodeEl.innerHTML = `
+                    <div class="node-label">${node.label}</div>
+                    <div class="node-cost">OUT: ${node.outDegree} | IN: ${node.inDegree}</div>
+                `;
+
+                container.appendChild(nodeEl);
+
+                // Add hover effect
+                nodeEl.addEventListener('mouseenter', () => {
+                    this.highlightConnections(node.id);
+                });
+                nodeEl.addEventListener('mouseleave', () => {
+                    this.clearHighlights();
+                });
+            });
+        }
+
+        renderEdges() {
+            const svg = document.getElementById('graph-edges');
+            svg.innerHTML = '';
+
+            this.edges.forEach(edge => {
+                const fromNode = this.nodeMap.get(edge.from);
+                const toNode = this.nodeMap.get(edge.to);
+
+                const x1 = fromNode.x + 60;
+                const y1 = fromNode.y;
+                const x2 = toNode.x - 60;
+                const y2 = toNode.y;
+
+                // Create curved path
+                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                const curve = `M ${x1} ${y1} Q ${(x1 + x2) / 2} ${(y1 + y2) / 2 - 50} ${x2} ${y2}`;
+
+                path.setAttribute('d', curve);
+                path.setAttribute('stroke', 'rgba(205, 255, 0, 0.3)');
+                path.setAttribute('stroke-width', '2');
+                path.setAttribute('fill', 'none');
+                path.setAttribute('marker-end', 'url(#arrowhead)');
+
+                svg.appendChild(path);
+            });
+
+            // Add arrow marker
+            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+            marker.setAttribute('id', 'arrowhead');
+            marker.setAttribute('markerWidth', '10');
+            marker.setAttribute('markerHeight', '10');
+            marker.setAttribute('refX', '9');
+            marker.setAttribute('refY', '3');
+            marker.setAttribute('orient', 'auto');
+
+            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            polygon.setAttribute('points', '0 0, 10 3, 0 6');
+            polygon.setAttribute('fill', 'rgba(205, 255, 0, 0.5)');
+
+            marker.appendChild(polygon);
+            defs.appendChild(marker);
+            svg.appendChild(defs);
+        }
+
+        highlightConnections(nodeId) {
+            const svg = document.getElementById('graph-edges');
+            const paths = svg.querySelectorAll('path');
+
+            // Dim all paths first
+            paths.forEach(p => {
+                p.style.opacity = '0.2';
+                p.style.stroke = 'rgba(205, 255, 0, 0.2)';
+            });
+
+            // Highlight connected paths
+            this.edges.forEach((edge, idx) => {
+                if (edge.from === nodeId || edge.to === nodeId) {
+                    paths[idx].style.opacity = '1';
+                    paths[idx].style.stroke = 'rgba(205, 255, 0, 0.8)';
+                    paths[idx].style.strokeWidth = '3';
+                }
+            });
+        }
+
+        clearHighlights() {
+            const svg = document.getElementById('graph-edges');
+            const paths = svg.querySelectorAll('path');
+            paths.forEach(p => {
+                p.style.opacity = '1';
+                p.style.stroke = 'rgba(205, 255, 0, 0.3)';
+                p.style.strokeWidth = '2';
+            });
+        }
+    }
+
+    // Initialize graph if delegations exist
+    const delegationsData = {{ delegations|tojson }};
+    if (delegationsData && delegationsData.length > 0) {
+        document.addEventListener('DOMContentLoaded', () => {
+            window.graph = new OrchestrationGraph(delegationsData);
+        });
+    }
+</script>
+
+<style>
+    .orchestration-graph {
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: 2px;
+        padding: var(--spacing-xl);
+        height: 600px;
+        position: relative;
+        overflow: hidden;
+        margin-bottom: var(--spacing-2xl);
+    }
+
+    .graph-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .graph-edges {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .graph-nodes {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+    }
+
+    .graph-node {
+        position: absolute;
+        background: var(--bg-darker);
+        border: 2px solid var(--border-medium);
+        border-radius: 4px;
+        padding: var(--spacing-md);
+        min-width: 140px;
+        text-align: center;
+        cursor: pointer;
+        transition: all var(--transition-base);
+        user-select: none;
+        transform: translate(-50%, -50%);
+    }
+
+    .graph-node:hover {
+        border-color: var(--accent-lime);
+        box-shadow: var(--shadow-lg);
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    .graph-node.claude {
+        background: rgba(139, 92, 246, 0.1);
+        border-color: var(--agent-claude);
+    }
+
+    .graph-node.gemini {
+        background: rgba(59, 130, 246, 0.1);
+        border-color: var(--agent-gemini);
+    }
+
+    .graph-node.copilot {
+        background: rgba(107, 114, 128, 0.1);
+        border-color: var(--agent-copilot);
+    }
+
+    .node-label {
+        font-weight: 700;
+        color: var(--accent-lime);
+        font-size: 0.95rem;
+        margin-bottom: var(--spacing-sm);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .node-cost {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+    }
+
+    @media (max-width: 768px) {
+        .orchestration-graph {
+            height: 400px;
+        }
+    }
+</style>

htmlgraph/api/templates/partials/orchestration.html

@@ -0,0 +1,198 @@
+<div class="view-container orchestration-view">
+    <div class="view-header">
+        <h2>Agent Orchestration Graph</h2>
+        <div class="view-description">
+            Real-time visualization of agent delegation chains and multi-hop workflows
+        </div>
+        <div class="view-filters">
+            <div class="filter-group">
+                <label>Filter by Agent:</label>
+                <select class="filter-select" id="agent-filter">
+                    <option value="all">All Agents</option>
+                    {% set agents = [] %}
+                    {% for d in delegations %}
+                        {% if d.from_agent not in agents %}
+                            {% set _ = agents.append(d.from_agent) %}
+                        {% endif %}
+                        {% if d.to_agent not in agents %}
+                            {% set _ = agents.append(d.to_agent) %}
+                        {% endif %}
+                    {% endfor %}
+                    {% for agent in agents|sort %}
+                    <option value="{{ agent }}">{{ agent }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <!-- Stats -->
+    <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle);">
+        <h3 style="color: var(--accent-lime); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; font-size: 0.85rem;">
+            Orchestration Statistics
+        </h3>
+        <div class="metrics-grid">
+            <div class="metric-card">
+                <div class="metric-label">Total Delegations</div>
+                <div class="metric-value">{{ delegations|length }}</div>
+                <div class="metric-trend">Agent-to-agent handoffs</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Unique Agents</div>
+                <div class="metric-value" id="unique-agents">
+                    {% set unique_agents = {} %}
+                    {% for d in delegations %}
+                        {% if d.from_agent not in unique_agents %}
+                            {% set _ = unique_agents.update({d.from_agent: True}) %}
+                        {% endif %}
+                        {% if d.to_agent not in unique_agents %}
+                            {% set _ = unique_agents.update({d.to_agent: True}) %}
+                        {% endif %}
+                    {% endfor %}
+                    {{ unique_agents|length }}
+                </div>
+                <div class="metric-trend">In network</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Deepest Chain</div>
+                <div class="metric-value" id="deepest-chain">—</div>
+                <div class="metric-trend">Hops in longest path</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-label">Avg Chain Length</div>
+                <div class="metric-value" id="avg-chain-length">—</div>
+                <div class="metric-trend">Mean delegation depth</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delegation List -->
+    {% if delegations %}
+    <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle);">
+        <h3 style="color: var(--accent-lime); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; font-size: 0.85rem;">
+            Recent Delegations
+        </h3>
+        <div style="background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 2px; overflow: hidden;">
+            <table style="width: 100%; border-collapse: collapse;">
+                <thead style="background: var(--bg-darker); border-bottom: 1px solid var(--border-subtle);">
+                    <tr>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">From</th>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">To</th>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">Task</th>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">Status</th>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">Session</th>
+                        <th style="padding: 0.5rem 0.75rem; text-align: left; color: var(--accent-lime); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;">Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for delegation in delegations[:20] %}
+                    <tr style="border-bottom: 1px solid var(--border-subtle);">
+                        <td style="padding: 0.4rem 0.75rem;">
+                            <span style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); padding: 0.15rem 0.4rem; border-radius: 2px; color: var(--agent-claude); font-size: 0.75rem; font-weight: 600;">
+                                {{ delegation.from_agent }}
+                            </span>
+                        </td>
+                        <td style="padding: 0.4rem 0.75rem;">
+                            <span style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); padding: 0.15rem 0.4rem; border-radius: 2px; color: var(--agent-gemini); font-size: 0.75rem; font-weight: 600;">
+                                {{ delegation.to_agent }}
+                            </span>
+                        </td>
+                        <td style="padding: 0.4rem 0.75rem; color: var(--text-secondary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem;">
+                            {% if delegation.task %}
+                                {{ delegation.task[:60] }}{% if delegation.task|length > 60 %}...{% endif %}
+                            {% else %}
+                                <span style="color: var(--text-muted);">—</span>
+                            {% endif %}
+                        </td>
+                        <td style="padding: 0.4rem 0.75rem;">
+                            <span class="status-badge status-{{ delegation.status|lower }}">
+                                {{ delegation.status }}
+                            </span>
+                        </td>
+                        <td style="padding: 0.4rem 0.75rem; color: var(--text-muted); font-size: 0.7rem; font-family: monospace;">
+                            {{ delegation.session_id[:8] }}
+                        </td>
+                        <td style="padding: 0.4rem 0.75rem; color: var(--text-secondary); font-family: 'Courier New', monospace; font-size: 0.75rem;">
+                            {{ delegation.timestamp }}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% else %}
+    <div style="margin-top: 1rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 2px; text-align: center; color: var(--text-muted);">
+        <p style="font-size: 0.9rem; margin-bottom: 0.5rem;">No delegation chains found</p>
+        <small style="font-size: 0.75rem;">Agent-to-agent delegations will appear here as tasks are assigned</small>
+    </div>
+    {% endif %}
+</div>
+
+<style>
+    /* Compact view header */
+    .orchestration-view .view-header {
+        margin-bottom: 0.75rem;
+    }
+
+    .orchestration-view .view-description {
+        margin-bottom: 0.5rem;
+    }
+
+    /* Compact stats section */
+    .orchestration-view .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .orchestration-view .metric-card {
+        padding: 0.75rem 1rem;
+        min-height: auto;
+    }
+
+    .orchestration-view .metric-value {
+        font-size: 1.5rem;
+        margin: 0.25rem 0;
+    }
+
+    .orchestration-view .metric-label {
+        font-size: 0.7rem;
+    }
+
+    .orchestration-view .metric-trend {
+        font-size: 0.65rem;
+    }
+
+    /* Status Badges */
+    .status-badge {
+        padding: 0.15rem 0.4rem;
+        border-radius: 2px;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    .status-completed, .status-success, .status-recorded {
+        background: rgba(34, 197, 94, 0.15);
+        color: #4ade80;
+        border: 1px solid rgba(34, 197, 94, 0.3);
+    }
+    .status-pending, .status-active {
+        background: rgba(251, 191, 36, 0.15);
+        color: #fbbf24;
+        border: 1px solid rgba(251, 191, 36, 0.3);
+    }
+    .status-failed, .status-error {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+        border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+
+    @media (max-width: 768px) {
+        .orchestration-view .metrics-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+</style>