83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
/**
|
|
* CodeEditorWorkflowsPage
|
|
*
|
|
* Lists CodeEditor workflows for the current feature instance.
|
|
* Uses the codeeditor-specific API endpoint instead of the generic /api/workflows/.
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
|
|
import api from '../../../api';
|
|
import styles from './CodeEditor.module.css';
|
|
|
|
interface WorkflowItem {
|
|
id: string;
|
|
label?: string;
|
|
status?: string;
|
|
workflowMode?: string;
|
|
startedAt?: number;
|
|
lastActivity?: number;
|
|
}
|
|
|
|
export const CodeEditorWorkflowsPage: React.FC = () => {
|
|
const { instance } = useCurrentInstance();
|
|
const instanceId = instance?.id || '';
|
|
const [workflows, setWorkflows] = useState<WorkflowItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const loadWorkflows = useCallback(() => {
|
|
if (!instanceId) return;
|
|
setLoading(true);
|
|
api.get(`/api/codeeditor/${instanceId}/workflows`)
|
|
.then(res => {
|
|
const items = res.data?.items || res.data?.workflows || [];
|
|
setWorkflows(Array.isArray(items) ? items : []);
|
|
})
|
|
.catch(err => console.error('Failed to load workflows:', err))
|
|
.finally(() => setLoading(false));
|
|
}, [instanceId]);
|
|
|
|
useEffect(() => { loadWorkflows(); }, [loadWorkflows]);
|
|
|
|
return (
|
|
<div className={styles.workflowsPage}>
|
|
<div className={styles.workflowsHeader}>
|
|
<h3>CodeEditor Workflows</h3>
|
|
<button className={styles.refreshButton} onClick={loadWorkflows} disabled={loading}>
|
|
{loading ? 'Loading...' : 'Refresh'}
|
|
</button>
|
|
</div>
|
|
|
|
{workflows.length === 0 ? (
|
|
<div className={styles.emptyState}>
|
|
{loading ? 'Loading workflows...' : 'No workflows yet. Start a conversation in the Editor view.'}
|
|
</div>
|
|
) : (
|
|
<table className={styles.workflowTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Label</th>
|
|
<th>Status</th>
|
|
<th>Started</th>
|
|
<th>Last Activity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{workflows.map(wf => (
|
|
<tr key={wf.id}>
|
|
<td>{wf.label || wf.id.slice(0, 8)}</td>
|
|
<td>
|
|
<span className={`${styles.statusBadge} ${styles[`status_${wf.status || 'unknown'}`]}`}>
|
|
{wf.status || 'unknown'}
|
|
</span>
|
|
</td>
|
|
<td>{wf.startedAt ? new Date(wf.startedAt * 1000).toLocaleString() : '-'}</td>
|
|
<td>{wf.lastActivity ? new Date(wf.lastActivity * 1000).toLocaleString() : '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|