@things-factory/labeling 9.1.19

package/dist-client/pages/labeling-workflow-list.d.ts

@@ -0,0 +1,24 @@
+import { PageView } from '@operato/shell';
+/**
+ * Workflow List Page
+ *
+ * Displays all labeling workflows with CRUD operations
+ */
+export declare class LabelingWorkflowListPage extends PageView {
+    static styles: import("lit").CSSResult[];
+    workflows: any[];
+    loading: boolean;
+    filterStatus: string;
+    filterProjectId: string;
+    firstUpdated(): Promise<void>;
+    loadWorkflows(): Promise<void>;
+    createWorkflow(): void;
+    editWorkflow(workflowId: string, event: Event): void;
+    executeWorkflow(workflowId: string, event: Event): Promise<void>;
+    pauseWorkflow(workflowId: string, event: Event): Promise<void>;
+    resumeWorkflow(workflowId: string, event: Event): Promise<void>;
+    deleteWorkflow(workflowId: string, event: Event): Promise<void>;
+    getStatusClass(status: string): "status-active" | "status-draft" | "status-paused" | "status-completed" | "status-failed" | "";
+    get filteredWorkflows(): any[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/labeling-workflow-list.js

@@ -0,0 +1,495 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelingWorkflowListPage = void 0;
+const tslib_1 = require("tslib");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const shell_1 = require("@operato/shell");
+const graphql_1 = require("@operato/graphql");
+const graphql_tag_1 = tslib_1.__importDefault(require("graphql-tag"));
+const shell_2 = require("@operato/shell");
+/**
+ * Workflow List Page
+ *
+ * Displays all labeling workflows with CRUD operations
+ */
+let LabelingWorkflowListPage = class LabelingWorkflowListPage extends shell_1.PageView {
+    constructor() {
+        super(...arguments);
+        this.workflows = [];
+        this.loading = true;
+        this.filterStatus = 'all';
+        this.filterProjectId = '';
+    }
+    static { this.styles = [
+        (0, lit_1.css) `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 24px;
+        margin: 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .toolbar {
+        display: flex;
+        gap: 10px;
+      }
+
+      button {
+        padding: 10px 20px;
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      button:hover {
+        opacity: 0.9;
+      }
+
+      button.secondary {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      .workflow-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+      }
+
+      .workflow-card {
+        background-color: var(--md-sys-color-surface-variant);
+        border-radius: 8px;
+        padding: 20px;
+        cursor: pointer;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+        border: 1px solid var(--md-sys-color-outline);
+      }
+
+      .workflow-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .workflow-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        margin-bottom: 10px;
+      }
+
+      .workflow-name {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 5px;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .workflow-status {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-active {
+        background-color: #4caf50;
+        color: white;
+      }
+
+      .status-draft {
+        background-color: #9e9e9e;
+        color: white;
+      }
+
+      .status-paused {
+        background-color: #ff9800;
+        color: white;
+      }
+
+      .status-completed {
+        background-color: #2196f3;
+        color: white;
+      }
+
+      .status-failed {
+        background-color: #f44336;
+        color: white;
+      }
+
+      .workflow-description {
+        font-size: 14px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-bottom: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .workflow-info {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-bottom: 5px;
+      }
+
+      .workflow-steps {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid var(--md-sys-color-outline);
+      }
+
+      .workflow-actions {
+        display: flex;
+        gap: 5px;
+        margin-top: 15px;
+      }
+
+      .workflow-actions button {
+        flex: 1;
+        padding: 8px;
+        font-size: 12px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 40px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .empty-state h2 {
+        font-size: 20px;
+        margin-bottom: 10px;
+      }
+
+      .empty-state p {
+        font-size: 14px;
+        margin-bottom: 20px;
+      }
+
+      .filter-bar {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        align-items: center;
+      }
+
+      .filter-bar select,
+      .filter-bar input {
+        padding: 8px 12px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .filter-bar label {
+        font-size: 14px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+    ]; }
+    async firstUpdated() {
+        await this.loadWorkflows();
+    }
+    async loadWorkflows() {
+        this.loading = true;
+        try {
+            const response = await graphql_1.client.query({
+                query: (0, graphql_tag_1.default) `
+          query GetWorkflows($projectId: Int) {
+            labelingWorkflows(projectId: $projectId) {
+              items {
+                id
+                name
+                description
+                projectId
+                status
+                triggerType
+                steps {
+                  name
+                  type
+                }
+                createdAt
+                lastExecutedAt
+              }
+            }
+          }
+        `,
+                variables: this.filterProjectId ? { projectId: parseInt(this.filterProjectId) } : {}
+            });
+            this.workflows = response.data.labelingWorkflows.items || [];
+        }
+        catch (error) {
+            console.error('Failed to load workflows:', error);
+            alert('Failed to load workflows');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    createWorkflow() {
+        (0, shell_2.navigate)('workflow-builder');
+    }
+    editWorkflow(workflowId, event) {
+        event.stopPropagation();
+        (0, shell_2.navigate)(`workflow-builder/${workflowId}`);
+    }
+    async executeWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Execute this workflow?'))
+            return;
+        try {
+            const response = await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation ExecuteWorkflow($workflowId: String!) {
+            executeLabelingWorkflow(input: { workflowId: $workflowId }) {
+              executionId
+              status
+              summary
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            const result = response.data.executeLabelingWorkflow;
+            alert(`Workflow execution started!\nExecution ID: ${result.executionId}`);
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to execute workflow:', error);
+            alert('Failed to execute workflow');
+        }
+    }
+    async pauseWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Pause this workflow?'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation PauseWorkflow($workflowId: String!) {
+            pauseLabelingWorkflow(workflowId: $workflowId) {
+              id
+              status
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow paused successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to pause workflow:', error);
+            alert('Failed to pause workflow');
+        }
+    }
+    async resumeWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Resume this workflow?'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation ResumeWorkflow($workflowId: String!) {
+            resumeLabelingWorkflow(workflowId: $workflowId) {
+              id
+              status
+            }
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow resumed successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to resume workflow:', error);
+            alert('Failed to resume workflow');
+        }
+    }
+    async deleteWorkflow(workflowId, event) {
+        event.stopPropagation();
+        if (!confirm('Are you sure you want to delete this workflow? This action cannot be undone.'))
+            return;
+        try {
+            await graphql_1.client.mutate({
+                mutation: (0, graphql_tag_1.default) `
+          mutation DeleteWorkflow($workflowId: String!) {
+            deleteLabelingWorkflow(workflowId: $workflowId)
+          }
+        `,
+                variables: { workflowId }
+            });
+            alert('Workflow deleted successfully');
+            await this.loadWorkflows();
+        }
+        catch (error) {
+            console.error('Failed to delete workflow:', error);
+            alert('Failed to delete workflow');
+        }
+    }
+    getStatusClass(status) {
+        switch (status?.toLowerCase()) {
+            case 'active':
+                return 'status-active';
+            case 'draft':
+                return 'status-draft';
+            case 'paused':
+                return 'status-paused';
+            case 'completed':
+                return 'status-completed';
+            case 'failed':
+                return 'status-failed';
+            default:
+                return '';
+        }
+    }
+    get filteredWorkflows() {
+        return this.workflows.filter(workflow => {
+            if (this.filterStatus !== 'all' && workflow.status !== this.filterStatus) {
+                return false;
+            }
+            return true;
+        });
+    }
+    render() {
+        if (this.loading) {
+            return (0, lit_1.html) `<div class="loading">Loading workflows...</div>`;
+        }
+        return (0, lit_1.html) `
+      <div class="header">
+        <h1>Labeling Workflows</h1>
+        <div class="toolbar">
+          <button @click=${this.createWorkflow}>Create Workflow</button>
+          <button class="secondary" @click=${this.loadWorkflows}>Refresh</button>
+        </div>
+      </div>
+
+      <div class="filter-bar">
+        <label>Status:</label>
+        <select
+          .value=${this.filterStatus}
+          @change=${(e) => {
+            this.filterStatus = e.target.value;
+            this.requestUpdate();
+        }}
+        >
+          <option value="all">All</option>
+          <option value="draft">Draft</option>
+          <option value="active">Active</option>
+          <option value="paused">Paused</option>
+          <option value="completed">Completed</option>
+          <option value="failed">Failed</option>
+        </select>
+
+        <label>Project ID:</label>
+        <input
+          type="number"
+          .value=${this.filterProjectId}
+          @input=${(e) => (this.filterProjectId = e.target.value)}
+          placeholder="Filter by project"
+        />
+        <button class="secondary" @click=${this.loadWorkflows}>Apply Filter</button>
+      </div>
+
+      ${this.filteredWorkflows.length === 0
+            ? (0, lit_1.html) `
+            <div class="empty-state">
+              <h2>No workflows found</h2>
+              <p>Create your first labeling workflow to get started</p>
+              <button @click=${this.createWorkflow}>Create Workflow</button>
+            </div>
+          `
+            : (0, lit_1.html) `
+            <div class="workflow-list">
+              ${this.filteredWorkflows.map(workflow => (0, lit_1.html) `
+                  <div class="workflow-card">
+                    <div class="workflow-header">
+                      <div class="workflow-name">${workflow.name}</div>
+                      <span class="workflow-status ${this.getStatusClass(workflow.status)}">${workflow.status}</span>
+                    </div>
+
+                    <div class="workflow-description">${workflow.description || 'No description'}</div>
+
+                    <div class="workflow-info">Project ID: ${workflow.projectId}</div>
+                    <div class="workflow-info">Trigger: ${workflow.triggerType}</div>
+                    <div class="workflow-info">Created: ${new Date(workflow.createdAt).toLocaleDateString()}</div>
+                    ${workflow.lastExecutedAt
+                ? (0, lit_1.html) `<div class="workflow-info">
+                          Last executed: ${new Date(workflow.lastExecutedAt).toLocaleDateString()}
+                        </div>`
+                : ''}
+
+                    <div class="workflow-steps">${workflow.steps.length} steps configured</div>
+
+                    <div class="workflow-actions">
+                      <button @click=${(e) => this.editWorkflow(workflow.id, e)}>Edit</button>
+                      <button @click=${(e) => this.executeWorkflow(workflow.id, e)}>Execute</button>
+                      ${workflow.status === 'active'
+                ? (0, lit_1.html) `<button class="secondary" @click=${(e) => this.pauseWorkflow(workflow.id, e)}>
+                            Pause
+                          </button>`
+                : workflow.status === 'paused'
+                    ? (0, lit_1.html) `<button @click=${(e) => this.resumeWorkflow(workflow.id, e)}>Resume</button>`
+                    : ''}
+                      <button class="secondary" @click=${(e) => this.deleteWorkflow(workflow.id, e)}>
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                `)}
+            </div>
+          `}
+    `;
+    }
+};
+exports.LabelingWorkflowListPage = LabelingWorkflowListPage;
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Array)
+], LabelingWorkflowListPage.prototype, "workflows", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Boolean)
+], LabelingWorkflowListPage.prototype, "loading", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowListPage.prototype, "filterStatus", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], LabelingWorkflowListPage.prototype, "filterProjectId", void 0);
+exports.LabelingWorkflowListPage = LabelingWorkflowListPage = tslib_1.__decorate([
+    (0, decorators_js_1.customElement)('labeling-workflow-list-page')
+], LabelingWorkflowListPage);
+//# sourceMappingURL=labeling-workflow-list.js.map

package/dist-client/pages/labeling-workflow-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labeling-workflow-list.js","sourceRoot":"","sources":["../../client/pages/labeling-workflow-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { navigate } from '@operato/shell'\n\n/**\n * Workflow List Page\n *\n * Displays all labeling workflows with CRUD operations\n */\n@customElement('labeling-workflow-list-page')\nexport class LabelingWorkflowListPage extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        padding: 20px;\n        background-color: var(--md-sys-color-surface);\n      }\n\n      .header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n      }\n\n      h1 {\n        font-size: 24px;\n        margin: 0;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .toolbar {\n        display: flex;\n        gap: 10px;\n      }\n\n      button {\n        padding: 10px 20px;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n\n      button:hover {\n        opacity: 0.9;\n      }\n\n      button.secondary {\n        background-color: var(--md-sys-color-secondary);\n        color: var(--md-sys-color-on-secondary);\n      }\n\n      .workflow-list {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n      }\n\n      .workflow-card {\n        background-color: var(--md-sys-color-surface-variant);\n        border-radius: 8px;\n        padding: 20px;\n        cursor: pointer;\n        transition:\n          transform 0.2s,\n          box-shadow 0.2s;\n        border: 1px solid var(--md-sys-color-outline);\n      }\n\n      .workflow-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .workflow-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: start;\n        margin-bottom: 10px;\n      }\n\n      .workflow-name {\n        font-size: 18px;\n        font-weight: bold;\n        margin-bottom: 5px;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .workflow-status {\n        display: inline-block;\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        font-weight: 500;\n      }\n\n      .status-active {\n        background-color: #4caf50;\n        color: white;\n      }\n\n      .status-draft {\n        background-color: #9e9e9e;\n        color: white;\n      }\n\n      .status-paused {\n        background-color: #ff9800;\n        color: white;\n      }\n\n      .status-completed {\n        background-color: #2196f3;\n        color: white;\n      }\n\n      .status-failed {\n        background-color: #f44336;\n        color: white;\n      }\n\n      .workflow-description {\n        font-size: 14px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-bottom: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .workflow-info {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-bottom: 5px;\n      }\n\n      .workflow-steps {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant);\n        margin-top: 10px;\n        padding-top: 10px;\n        border-top: 1px solid var(--md-sys-color-outline);\n      }\n\n      .workflow-actions {\n        display: flex;\n        gap: 5px;\n        margin-top: 15px;\n      }\n\n      .workflow-actions button {\n        flex: 1;\n        padding: 8px;\n        font-size: 12px;\n      }\n\n      .loading {\n        text-align: center;\n        padding: 40px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .empty-state {\n        text-align: center;\n        padding: 60px 20px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .empty-state h2 {\n        font-size: 20px;\n        margin-bottom: 10px;\n      }\n\n      .empty-state p {\n        font-size: 14px;\n        margin-bottom: 20px;\n      }\n\n      .filter-bar {\n        display: flex;\n        gap: 10px;\n        margin-bottom: 20px;\n        align-items: center;\n      }\n\n      .filter-bar select,\n      .filter-bar input {\n        padding: 8px 12px;\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: 4px;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .filter-bar label {\n        font-size: 14px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `\n  ]\n\n  @state() workflows: any[] = []\n  @state() loading: boolean = true\n  @state() filterStatus: string = 'all'\n  @state() filterProjectId: string = ''\n\n  async firstUpdated() {\n    await this.loadWorkflows()\n  }\n\n  async loadWorkflows() {\n    this.loading = true\n    try {\n      const response = await client.query({\n        query: gql`\n          query GetWorkflows($projectId: Int) {\n            labelingWorkflows(projectId: $projectId) {\n              items {\n                id\n                name\n                description\n                projectId\n                status\n                triggerType\n                steps {\n                  name\n                  type\n                }\n                createdAt\n                lastExecutedAt\n              }\n            }\n          }\n        `,\n        variables: this.filterProjectId ? { projectId: parseInt(this.filterProjectId) } : {}\n      })\n\n      this.workflows = response.data.labelingWorkflows.items || []\n    } catch (error) {\n      console.error('Failed to load workflows:', error)\n      alert('Failed to load workflows')\n    } finally {\n      this.loading = false\n    }\n  }\n\n  createWorkflow() {\n    navigate('workflow-builder')\n  }\n\n  editWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n    navigate(`workflow-builder/${workflowId}`)\n  }\n\n  async executeWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Execute this workflow?')) return\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ExecuteWorkflow($workflowId: String!) {\n            executeLabelingWorkflow(input: { workflowId: $workflowId }) {\n              executionId\n              status\n              summary\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      const result = response.data.executeLabelingWorkflow\n      alert(`Workflow execution started!\\nExecution ID: ${result.executionId}`)\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to execute workflow:', error)\n      alert('Failed to execute workflow')\n    }\n  }\n\n  async pauseWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Pause this workflow?')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation PauseWorkflow($workflowId: String!) {\n            pauseLabelingWorkflow(workflowId: $workflowId) {\n              id\n              status\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow paused successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to pause workflow:', error)\n      alert('Failed to pause workflow')\n    }\n  }\n\n  async resumeWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Resume this workflow?')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation ResumeWorkflow($workflowId: String!) {\n            resumeLabelingWorkflow(workflowId: $workflowId) {\n              id\n              status\n            }\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow resumed successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to resume workflow:', error)\n      alert('Failed to resume workflow')\n    }\n  }\n\n  async deleteWorkflow(workflowId: string, event: Event) {\n    event.stopPropagation()\n\n    if (!confirm('Are you sure you want to delete this workflow? This action cannot be undone.')) return\n\n    try {\n      await client.mutate({\n        mutation: gql`\n          mutation DeleteWorkflow($workflowId: String!) {\n            deleteLabelingWorkflow(workflowId: $workflowId)\n          }\n        `,\n        variables: { workflowId }\n      })\n\n      alert('Workflow deleted successfully')\n      await this.loadWorkflows()\n    } catch (error) {\n      console.error('Failed to delete workflow:', error)\n      alert('Failed to delete workflow')\n    }\n  }\n\n  getStatusClass(status: string) {\n    switch (status?.toLowerCase()) {\n      case 'active':\n        return 'status-active'\n      case 'draft':\n        return 'status-draft'\n      case 'paused':\n        return 'status-paused'\n      case 'completed':\n        return 'status-completed'\n      case 'failed':\n        return 'status-failed'\n      default:\n        return ''\n    }\n  }\n\n  get filteredWorkflows() {\n    return this.workflows.filter(workflow => {\n      if (this.filterStatus !== 'all' && workflow.status !== this.filterStatus) {\n        return false\n      }\n      return true\n    })\n  }\n\n  render() {\n    if (this.loading) {\n      return html`<div class=\"loading\">Loading workflows...</div>`\n    }\n\n    return html`\n      <div class=\"header\">\n        <h1>Labeling Workflows</h1>\n        <div class=\"toolbar\">\n          <button @click=${this.createWorkflow}>Create Workflow</button>\n          <button class=\"secondary\" @click=${this.loadWorkflows}>Refresh</button>\n        </div>\n      </div>\n\n      <div class=\"filter-bar\">\n        <label>Status:</label>\n        <select\n          .value=${this.filterStatus}\n          @change=${(e: any) => {\n            this.filterStatus = e.target.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"all\">All</option>\n          <option value=\"draft\">Draft</option>\n          <option value=\"active\">Active</option>\n          <option value=\"paused\">Paused</option>\n          <option value=\"completed\">Completed</option>\n          <option value=\"failed\">Failed</option>\n        </select>\n\n        <label>Project ID:</label>\n        <input\n          type=\"number\"\n          .value=${this.filterProjectId}\n          @input=${(e: any) => (this.filterProjectId = e.target.value)}\n          placeholder=\"Filter by project\"\n        />\n        <button class=\"secondary\" @click=${this.loadWorkflows}>Apply Filter</button>\n      </div>\n\n      ${this.filteredWorkflows.length === 0\n        ? html`\n            <div class=\"empty-state\">\n              <h2>No workflows found</h2>\n              <p>Create your first labeling workflow to get started</p>\n              <button @click=${this.createWorkflow}>Create Workflow</button>\n            </div>\n          `\n        : html`\n            <div class=\"workflow-list\">\n              ${this.filteredWorkflows.map(\n                workflow => html`\n                  <div class=\"workflow-card\">\n                    <div class=\"workflow-header\">\n                      <div class=\"workflow-name\">${workflow.name}</div>\n                      <span class=\"workflow-status ${this.getStatusClass(workflow.status)}\">${workflow.status}</span>\n                    </div>\n\n                    <div class=\"workflow-description\">${workflow.description || 'No description'}</div>\n\n                    <div class=\"workflow-info\">Project ID: ${workflow.projectId}</div>\n                    <div class=\"workflow-info\">Trigger: ${workflow.triggerType}</div>\n                    <div class=\"workflow-info\">Created: ${new Date(workflow.createdAt).toLocaleDateString()}</div>\n                    ${workflow.lastExecutedAt\n                      ? html`<div class=\"workflow-info\">\n                          Last executed: ${new Date(workflow.lastExecutedAt).toLocaleDateString()}\n                        </div>`\n                      : ''}\n\n                    <div class=\"workflow-steps\">${workflow.steps.length} steps configured</div>\n\n                    <div class=\"workflow-actions\">\n                      <button @click=${(e: Event) => this.editWorkflow(workflow.id, e)}>Edit</button>\n                      <button @click=${(e: Event) => this.executeWorkflow(workflow.id, e)}>Execute</button>\n                      ${workflow.status === 'active'\n                        ? html`<button class=\"secondary\" @click=${(e: Event) => this.pauseWorkflow(workflow.id, e)}>\n                            Pause\n                          </button>`\n                        : workflow.status === 'paused'\n                          ? html`<button @click=${(e: Event) => this.resumeWorkflow(workflow.id, e)}>Resume</button>`\n                          : ''}\n                      <button class=\"secondary\" @click=${(e: Event) => this.deleteWorkflow(workflow.id, e)}>\n                        Delete\n                      </button>\n                    </div>\n                  </div>\n                `\n              )}\n            </div>\n          `}\n    `\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "labeling-workflows" | "labeling-workflow-builder";

package/dist-client/route.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = route;
+function route(page) {
+    switch (page) {
+        case 'labeling-workflows':
+            Promise.resolve().then(() => __importStar(require('./pages/labeling-workflow-list.js')));
+            return page;
+        case 'labeling-workflow-builder':
+            Promise.resolve().then(() => __importStar(require('./pages/labeling-workflow-builder.js')));
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAUC;AAVD,SAAwB,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,oBAAoB;YACvB,kDAAO,mCAAmC,IAAC;YAC3C,OAAO,IAAI,CAAA;QAEb,KAAK,2BAA2B;YAC9B,kDAAO,sCAAsC,IAAC;YAC9C,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'labeling-workflows':\n      import('./pages/labeling-workflow-list.js')\n      return page\n\n    case 'labeling-workflow-builder':\n      import('./pages/labeling-workflow-builder.js')\n      return page\n  }\n}\n"]}