@things-factory/integration-label-studio 9.1.19

package/dist-client/label-studio-label-page.js

@@ -0,0 +1,54 @@
+import { __decorate, __metadata } from "tslib";
+import './label-studio-wrapper.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PageView } from '@things-factory/shell/client';
+let LabelStudioLabelPage = class LabelStudioLabelPage extends PageView {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .label-studio-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .error {
+      padding: 20px;
+      color: var(--md-sys-color-error);
+      text-align: center;
+    }
+  `; }
+    async pageUpdated(changes, lifecycle, changedBefore) {
+        if (this.active && lifecycle.resourceId) {
+            this.projectId = lifecycle.resourceId;
+        }
+    }
+    render() {
+        const projectId = this.projectId;
+        if (!projectId) {
+            return html `<div class="error">Error: No project ID provided</div>`;
+        }
+        const path = `/projects/${projectId}`;
+        return html ` <label-studio-wrapper .path=${path}></label-studio-wrapper> `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], LabelStudioLabelPage.prototype, "projectId", void 0);
+LabelStudioLabelPage = __decorate([
+    customElement('label-studio-label-page')
+], LabelStudioLabelPage);
+export { LabelStudioLabelPage };
+//# sourceMappingURL=label-studio-label-page.js.map

package/dist-client/label-studio-label-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-studio-label-page.js","sourceRoot":"","sources":["../client/label-studio-label-page.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAc,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAGhD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,QAAQ;IAA3C;;QAuBuB,cAAS,GAAW,EAAE,CAAA;IAmBpD,CAAC;aAzCQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,AApBY,CAoBZ;IAID,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa;QACjD,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC;YACxC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,UAAU,CAAA;QACvC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAEhC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,IAAI,CAAA,wDAAwD,CAAA;QACrE,CAAC;QAED,MAAM,IAAI,GAAG,aAAa,SAAS,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA,gCAAgC,IAAI,2BAA2B,CAAA;IAC5E,CAAC;;AAlB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAuB;AAvBvC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA0ChC","sourcesContent":["import './label-studio-wrapper.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { gql } from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { PageView } from '@things-factory/shell/client'\n\n@customElement('label-studio-label-page')\nexport class LabelStudioLabelPage extends PageView {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .label-studio-wrapper {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .error {\n      padding: 20px;\n      color: var(--md-sys-color-error);\n      text-align: center;\n    }\n  `\n\n  @property({ type: String }) projectId: string = ''\n\n  async pageUpdated(changes, lifecycle, changedBefore) {\n    if (this.active && lifecycle.resourceId) {\n      this.projectId = lifecycle.resourceId\n    }\n  }\n\n  render() {\n    const projectId = this.projectId\n\n    if (!projectId) {\n      return html`<div class=\"error\">Error: No project ID provided</div>`\n    }\n\n    const path = `/projects/${projectId}`\n\n    return html` <label-studio-wrapper .path=${path}></label-studio-wrapper> `\n  }\n}\n"]}

package/dist-client/label-studio-project-create.d.ts

@@ -0,0 +1,16 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import { PageView } from '@things-factory/shell/client';
+export declare class LabelStudioProjectCreate extends PageView {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    description: string;
+    labelConfig: string;
+    saving: boolean;
+    error: string;
+    render(): import("lit-html").TemplateResult<1>;
+    useTemplate(type: string): void;
+    save(): Promise<void>;
+    cancel(): void;
+}

package/dist-client/label-studio-project-create.js

@@ -0,0 +1,235 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client, PageView, navigate } from '@things-factory/shell/client';
+import gql from 'graphql-tag';
+let LabelStudioProjectCreate = class LabelStudioProjectCreate extends PageView {
+    constructor() {
+        super(...arguments);
+        this.title = '';
+        this.description = '';
+        this.labelConfig = '';
+        this.saving = false;
+        this.error = '';
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      h2 {
+        margin: 0 0 20px 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .form-field {
+        margin-bottom: 20px;
+      }
+
+      .form-field label {
+        display: block;
+        margin-bottom: 8px;
+        color: var(--md-sys-color-on-surface);
+        font-weight: 500;
+      }
+
+      md-filled-text-field {
+        width: 100%;
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 200px;
+        padding: 12px;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 14px;
+        resize: vertical;
+      }
+
+      .actions {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+        margin-top: 20px;
+      }
+
+      .template-examples {
+        margin-top: 20px;
+        padding: 15px;
+        background: var(--md-sys-color-surface-variant);
+        border-radius: 8px;
+      }
+
+      .template-examples h4 {
+        margin: 0 0 10px 0;
+      }
+
+      .template-btn {
+        margin: 5px;
+      }
+
+      .error {
+        color: var(--md-sys-color-error);
+        margin: 10px 0;
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <h2>Create Label Studio Project</h2>
+
+      <div class="form-field">
+        <label>Project Title *</label>
+        <md-filled-text-field
+          .value=${this.title}
+          @input=${(e) => (this.title = e.target.value)}
+          placeholder="Enter project title"
+        ></md-filled-text-field>
+      </div>
+
+      <div class="form-field">
+        <label>Description</label>
+        <md-filled-text-field
+          .value=${this.description}
+          @input=${(e) => (this.description = e.target.value)}
+          placeholder="Enter project description"
+        ></md-filled-text-field>
+      </div>
+
+      <div class="form-field">
+        <label>Label Configuration (XML) *</label>
+        <textarea
+          .value=${this.labelConfig}
+          @input=${(e) => (this.labelConfig = e.target.value)}
+          placeholder='<View>&#10;  <Text name="text" value="$text"/>&#10;  <Choices name="label" toName="text">&#10;    <Choice value="Positive"/>&#10;    <Choice value="Negative"/>&#10;  </Choices>&#10;</View>'
+        ></textarea>
+      </div>
+
+      <div class="template-examples">
+        <h4>Quick Templates</h4>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('text-classification')}>
+          Text Classification
+        </md-filled-button>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('image-classification')}>
+          Image Classification
+        </md-filled-button>
+        <md-filled-button class="template-btn" @click=${() => this.useTemplate('ner')}>
+          Named Entity Recognition
+        </md-filled-button>
+      </div>
+
+      ${this.error ? html `<div class="error">${this.error}</div>` : ''}
+
+      <div class="actions">
+        <md-text-button @click=${this.cancel}>Cancel</md-text-button>
+        <md-filled-button @click=${this.save} ?disabled=${this.saving}>
+          ${this.saving ? 'Creating...' : 'Create Project'}
+        </md-filled-button>
+      </div>
+    `;
+    }
+    useTemplate(type) {
+        const templates = {
+            'text-classification': `<View>
+  <Text name="text" value="$text"/>
+  <Choices name="sentiment" toName="text" choice="single">
+    <Choice value="Positive"/>
+    <Choice value="Negative"/>
+    <Choice value="Neutral"/>
+  </Choices>
+</View>`,
+            'image-classification': `<View>
+  <Image name="image" value="$image"/>
+  <Choices name="choice" toName="image" choice="single">
+    <Choice value="Cat"/>
+    <Choice value="Dog"/>
+    <Choice value="Bird"/>
+  </Choices>
+</View>`,
+            ner: `<View>
+  <Text name="text" value="$text"/>
+  <Labels name="label" toName="text">
+    <Label value="Person" background="red"/>
+    <Label value="Organization" background="darkorange"/>
+    <Label value="Location" background="blue"/>
+  </Labels>
+</View>`
+        };
+        this.labelConfig = templates[type] || '';
+    }
+    async save() {
+        if (!this.title || !this.labelConfig) {
+            this.error = 'Title and Label Configuration are required';
+            return;
+        }
+        try {
+            this.saving = true;
+            this.error = '';
+            const response = await client.mutate({
+                mutation: gql `
+          mutation CreateProject($input: CreateProjectInput!) {
+            createLabelStudioProject(input: $input) {
+              id
+              title
+            }
+          }
+        `,
+                variables: {
+                    input: {
+                        title: this.title,
+                        description: this.description || undefined,
+                        labelConfig: this.labelConfig
+                    }
+                }
+            });
+            const project = response.data.createLabelStudioProject;
+            // Navigate to project list
+            navigate('label-studio-project-list');
+        }
+        catch (error) {
+            console.error('Failed to create project:', error);
+            this.error = error.message || 'Failed to create project';
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    cancel() {
+        navigate('label-studio-project-list');
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioProjectCreate.prototype, "title", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioProjectCreate.prototype, "description", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioProjectCreate.prototype, "labelConfig", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], LabelStudioProjectCreate.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioProjectCreate.prototype, "error", void 0);
+LabelStudioProjectCreate = __decorate([
+    customElement('label-studio-project-create')
+], LabelStudioProjectCreate);
+export { LabelStudioProjectCreate };
+//# sourceMappingURL=label-studio-project-create.js.map

package/dist-client/label-studio-project-create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-studio-project-create.js","sourceRoot":"","sources":["../client/label-studio-project-create.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client, PageView, navigate } from '@things-factory/shell/client'\nimport gql from 'graphql-tag'\n\n@customElement('label-studio-project-create')\nexport class LabelStudioProjectCreate extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        padding: 20px;\n        max-width: 800px;\n        margin: 0 auto;\n      }\n\n      h2 {\n        margin: 0 0 20px 0;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .form-field {\n        margin-bottom: 20px;\n      }\n\n      .form-field label {\n        display: block;\n        margin-bottom: 8px;\n        color: var(--md-sys-color-on-surface);\n        font-weight: 500;\n      }\n\n      md-filled-text-field {\n        width: 100%;\n      }\n\n      textarea {\n        width: 100%;\n        min-height: 200px;\n        padding: 12px;\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: 4px;\n        font-family: monospace;\n        font-size: 14px;\n        resize: vertical;\n      }\n\n      .actions {\n        display: flex;\n        gap: 10px;\n        justify-content: flex-end;\n        margin-top: 20px;\n      }\n\n      .template-examples {\n        margin-top: 20px;\n        padding: 15px;\n        background: var(--md-sys-color-surface-variant);\n        border-radius: 8px;\n      }\n\n      .template-examples h4 {\n        margin: 0 0 10px 0;\n      }\n\n      .template-btn {\n        margin: 5px;\n      }\n\n      .error {\n        color: var(--md-sys-color-error);\n        margin: 10px 0;\n      }\n    `\n  ]\n\n  @state() title: string = ''\n  @state() description: string = ''\n  @state() labelConfig: string = ''\n  @state() saving: boolean = false\n  @state() error: string = ''\n\n  render() {\n    return html`\n      <h2>Create Label Studio Project</h2>\n\n      <div class=\"form-field\">\n        <label>Project Title *</label>\n        <md-filled-text-field\n          .value=${this.title}\n          @input=${(e: any) => (this.title = e.target.value)}\n          placeholder=\"Enter project title\"\n        ></md-filled-text-field>\n      </div>\n\n      <div class=\"form-field\">\n        <label>Description</label>\n        <md-filled-text-field\n          .value=${this.description}\n          @input=${(e: any) => (this.description = e.target.value)}\n          placeholder=\"Enter project description\"\n        ></md-filled-text-field>\n      </div>\n\n      <div class=\"form-field\">\n        <label>Label Configuration (XML) *</label>\n        <textarea\n          .value=${this.labelConfig}\n          @input=${(e: any) => (this.labelConfig = (e.target as HTMLTextAreaElement).value)}\n          placeholder='<View>&#10;  <Text name=\"text\" value=\"$text\"/>&#10;  <Choices name=\"label\" toName=\"text\">&#10;    <Choice value=\"Positive\"/>&#10;    <Choice value=\"Negative\"/>&#10;  </Choices>&#10;</View>'\n        ></textarea>\n      </div>\n\n      <div class=\"template-examples\">\n        <h4>Quick Templates</h4>\n        <md-filled-button class=\"template-btn\" @click=${() => this.useTemplate('text-classification')}>\n          Text Classification\n        </md-filled-button>\n        <md-filled-button class=\"template-btn\" @click=${() => this.useTemplate('image-classification')}>\n          Image Classification\n        </md-filled-button>\n        <md-filled-button class=\"template-btn\" @click=${() => this.useTemplate('ner')}>\n          Named Entity Recognition\n        </md-filled-button>\n      </div>\n\n      ${this.error ? html`<div class=\"error\">${this.error}</div>` : ''}\n\n      <div class=\"actions\">\n        <md-text-button @click=${this.cancel}>Cancel</md-text-button>\n        <md-filled-button @click=${this.save} ?disabled=${this.saving}>\n          ${this.saving ? 'Creating...' : 'Create Project'}\n        </md-filled-button>\n      </div>\n    `\n  }\n\n  useTemplate(type: string) {\n    const templates = {\n      'text-classification': `<View>\n  <Text name=\"text\" value=\"$text\"/>\n  <Choices name=\"sentiment\" toName=\"text\" choice=\"single\">\n    <Choice value=\"Positive\"/>\n    <Choice value=\"Negative\"/>\n    <Choice value=\"Neutral\"/>\n  </Choices>\n</View>`,\n      'image-classification': `<View>\n  <Image name=\"image\" value=\"$image\"/>\n  <Choices name=\"choice\" toName=\"image\" choice=\"single\">\n    <Choice value=\"Cat\"/>\n    <Choice value=\"Dog\"/>\n    <Choice value=\"Bird\"/>\n  </Choices>\n</View>`,\n      ner: `<View>\n  <Text name=\"text\" value=\"$text\"/>\n  <Labels name=\"label\" toName=\"text\">\n    <Label value=\"Person\" background=\"red\"/>\n    <Label value=\"Organization\" background=\"darkorange\"/>\n    <Label value=\"Location\" background=\"blue\"/>\n  </Labels>\n</View>`\n    }\n\n    this.labelConfig = templates[type] || ''\n  }\n\n  async save() {\n    if (!this.title || !this.labelConfig) {\n      this.error = 'Title and Label Configuration are required'\n      return\n    }\n\n    try {\n      this.saving = true\n      this.error = ''\n\n      const response = await client.mutate({\n        mutation: gql`\n          mutation CreateProject($input: CreateProjectInput!) {\n            createLabelStudioProject(input: $input) {\n              id\n              title\n            }\n          }\n        `,\n        variables: {\n          input: {\n            title: this.title,\n            description: this.description || undefined,\n            labelConfig: this.labelConfig\n          }\n        }\n      })\n\n      const project = response.data.createLabelStudioProject\n\n      // Navigate to project list\n      navigate('label-studio-project-list')\n    } catch (error: any) {\n      console.error('Failed to create project:', error)\n      this.error = error.message || 'Failed to create project'\n    } finally {\n      this.saving = false\n    }\n  }\n\n  cancel() {\n    navigate('label-studio-project-list')\n  }\n}\n"]}

package/dist-client/label-studio-project-list.d.ts

@@ -0,0 +1,16 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { PageView } from '@things-factory/shell/client';
+export declare class LabelStudioProjectList extends PageView {
+    static styles: import("lit").CSSResult[];
+    projects: any[];
+    loading: boolean;
+    error: string;
+    pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
+    loadProjects(): Promise<void>;
+    createProject(): void;
+    openProject(projectId: number): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/label-studio-project-list.js

@@ -0,0 +1,222 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client, PageView, navigate } from '@things-factory/shell/client';
+import gql from 'graphql-tag';
+let LabelStudioProjectList = class LabelStudioProjectList extends PageView {
+    constructor() {
+        super(...arguments);
+        this.projects = [];
+        this.loading = true;
+        this.error = '';
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 20px;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+
+      .header h2 {
+        margin: 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .project-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        overflow-y: auto;
+      }
+
+      .project-card {
+        background: var(--md-sys-color-surface-container);
+        border-radius: 12px;
+        padding: 20px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .project-card:hover {
+        background: var(--md-sys-color-surface-container-high);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .project-card h3 {
+        margin: 0 0 10px 0;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      .project-card p {
+        margin: 5px 0;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 14px;
+      }
+
+      .project-stats {
+        display: flex;
+        gap: 15px;
+        margin-top: 15px;
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .stat-value {
+        font-size: 20px;
+        font-weight: bold;
+        color: var(--md-sys-color-primary);
+      }
+
+      .progress-bar {
+        width: 100%;
+        height: 8px;
+        background: var(--md-sys-color-surface-variant);
+        border-radius: 4px;
+        margin-top: 10px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: var(--md-sys-color-primary);
+        transition: width 0.3s ease;
+      }
+
+      .loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 18px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .error {
+        color: var(--md-sys-color-error);
+        padding: 20px;
+        text-align: center;
+      }
+    `
+    ]; }
+    async pageUpdated(changes, lifecycle, changedBefore) {
+        if (this.active) {
+            this.loadProjects();
+        }
+    }
+    async loadProjects() {
+        try {
+            this.loading = true;
+            const response = await client.query({
+                query: gql `
+          query {
+            labelStudioProjects {
+              id
+              title
+              description
+              taskCount
+              completedTaskCount
+              completionRate
+              createdAt
+              updatedAt
+            }
+          }
+        `
+            });
+            this.projects = response.data.labelStudioProjects;
+            this.loading = false;
+        }
+        catch (error) {
+            console.error('Failed to load projects:', error);
+            this.error = error.message || 'Failed to load projects';
+            this.loading = false;
+        }
+    }
+    createProject() {
+        navigate('label-studio-project-create');
+    }
+    openProject(projectId) {
+        // Open Label Studio viewer with project
+        navigate(`label-studio-label/${projectId}`);
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="loading">Loading projects...</div>`;
+        }
+        if (this.error) {
+            return html `<div class="error">${this.error}</div>`;
+        }
+        return html `
+      <div class="header">
+        <h2>Label Studio Projects</h2>
+        <md-filled-button @click=${this.createProject}>
+          <md-icon slot="icon">add</md-icon>
+          New Project
+        </md-filled-button>
+      </div>
+
+      <div class="project-grid">
+        ${this.projects.map(project => html `
+            <div class="project-card" @click=${() => this.openProject(project.id)}>
+              <h3>${project.title}</h3>
+              <p>${project.description || 'No description'}</p>
+
+              <div class="project-stats">
+                <div class="stat-item">
+                  <span class="stat-label">Tasks</span>
+                  <span class="stat-value">${project.taskCount}</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">Completed</span>
+                  <span class="stat-value">${project.completedTaskCount}</span>
+                </div>
+              </div>
+
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: ${(project.completionRate * 100).toFixed(0)}%"></div>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], LabelStudioProjectList.prototype, "projects", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], LabelStudioProjectList.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], LabelStudioProjectList.prototype, "error", void 0);
+LabelStudioProjectList = __decorate([
+    customElement('label-studio-project-list')
+], LabelStudioProjectList);
+export { LabelStudioProjectList };
+//# sourceMappingURL=label-studio-project-list.js.map

package/dist-client/label-studio-project-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-studio-project-list.js","sourceRoot":"","sources":["../client/label-studio-project-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/iconbutton/icon-button.js'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client, PageView, navigate } from '@things-factory/shell/client'\nimport gql from 'graphql-tag'\n\n@customElement('label-studio-project-list')\nexport class LabelStudioProjectList extends PageView {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\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      .header h2 {\n        margin: 0;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .project-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n        overflow-y: auto;\n      }\n\n      .project-card {\n        background: var(--md-sys-color-surface-container);\n        border-radius: 12px;\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n      }\n\n      .project-card:hover {\n        background: var(--md-sys-color-surface-container-high);\n        transform: translateY(-2px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n\n      .project-card h3 {\n        margin: 0 0 10px 0;\n        color: var(--md-sys-color-on-surface);\n      }\n\n      .project-card p {\n        margin: 5px 0;\n        color: var(--md-sys-color-on-surface-variant);\n        font-size: 14px;\n      }\n\n      .project-stats {\n        display: flex;\n        gap: 15px;\n        margin-top: 15px;\n      }\n\n      .stat-item {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .stat-label {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .stat-value {\n        font-size: 20px;\n        font-weight: bold;\n        color: var(--md-sys-color-primary);\n      }\n\n      .progress-bar {\n        width: 100%;\n        height: 8px;\n        background: var(--md-sys-color-surface-variant);\n        border-radius: 4px;\n        margin-top: 10px;\n        overflow: hidden;\n      }\n\n      .progress-fill {\n        height: 100%;\n        background: var(--md-sys-color-primary);\n        transition: width 0.3s ease;\n      }\n\n      .loading {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n        font-size: 18px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .error {\n        color: var(--md-sys-color-error);\n        padding: 20px;\n        text-align: center;\n      }\n    `\n  ]\n\n  @state() projects: any[] = []\n  @state() loading: boolean = true\n  @state() error: string = ''\n\n  async pageUpdated(changes, lifecycle, changedBefore) {\n    if (this.active) {\n      this.loadProjects()\n    }\n  }\n\n  async loadProjects() {\n    try {\n      this.loading = true\n\n      const response = await client.query({\n        query: gql`\n          query {\n            labelStudioProjects {\n              id\n              title\n              description\n              taskCount\n              completedTaskCount\n              completionRate\n              createdAt\n              updatedAt\n            }\n          }\n        `\n      })\n\n      this.projects = response.data.labelStudioProjects\n      this.loading = false\n    } catch (error: any) {\n      console.error('Failed to load projects:', error)\n      this.error = error.message || 'Failed to load projects'\n      this.loading = false\n    }\n  }\n\n  createProject() {\n    navigate('label-studio-project-create')\n  }\n\n  openProject(projectId: number) {\n    // Open Label Studio viewer with project\n    navigate(`label-studio-label/${projectId}`)\n  }\n\n  render() {\n    if (this.loading) {\n      return html`<div class=\"loading\">Loading projects...</div>`\n    }\n\n    if (this.error) {\n      return html`<div class=\"error\">${this.error}</div>`\n    }\n\n    return html`\n      <div class=\"header\">\n        <h2>Label Studio Projects</h2>\n        <md-filled-button @click=${this.createProject}>\n          <md-icon slot=\"icon\">add</md-icon>\n          New Project\n        </md-filled-button>\n      </div>\n\n      <div class=\"project-grid\">\n        ${this.projects.map(\n          project => html`\n            <div class=\"project-card\" @click=${() => this.openProject(project.id)}>\n              <h3>${project.title}</h3>\n              <p>${project.description || 'No description'}</p>\n\n              <div class=\"project-stats\">\n                <div class=\"stat-item\">\n                  <span class=\"stat-label\">Tasks</span>\n                  <span class=\"stat-value\">${project.taskCount}</span>\n                </div>\n                <div class=\"stat-item\">\n                  <span class=\"stat-label\">Completed</span>\n                  <span class=\"stat-value\">${project.completedTaskCount}</span>\n                </div>\n              </div>\n\n              <div class=\"progress-bar\">\n                <div class=\"progress-fill\" style=\"width: ${(project.completionRate * 100).toFixed(0)}%\"></div>\n              </div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/label-studio-wrapper.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Label Studio Wrapper Component for Things Factory
+ *
+ * This component embeds Label Studio within Things Factory using an iframe.
+ * It uses subdomain-based cookie sharing for SSO authentication, eliminating
+ * the need for proxying.
+ *
+ * ## Key Features:
+ * - Direct Label Studio access (no proxy needed)
+ * - Automatic SSO cookie setup via shared domain
+ * - Hidden header for seamless integration
+ * - Floating Action Buttons (FAB) for Reload and Fullscreen
+ *
+ * ## Architecture:
+ * 1. Client calls /label-studio/sso/setup
+ * 2. Backend sets cookie with shared domain (e.g., .nubison.localhost)
+ * 3. Browser → Label Studio (direct, with cookie)
+ *
+ * ## Configuration Requirements:
+ * - Label Studio and Things Factory must use subdomain pattern (e.g., label.example.com, app.example.com)
+ * - Label Studio .env must include:
+ *   - CSRF_TRUSTED_ORIGINS: Include Things Factory frontend domain
+ *   - ALLOWED_HOSTS: Include subdomain patterns
+ *   - JWT_SSO_* settings for SSO authentication
+ * - Things Factory config must include:
+ *   - labelStudio.serverUrl: Label Studio URL
+ *   - labelStudio.cookieDomain: Shared cookie domain (e.g., .example.com)
+ *
+ * ## Usage:
+ * ```html
+ * <label-studio-wrapper></label-studio-wrapper>
+ * ```
+ *
+ * The component automatically:
+ * 1. Calls SSO setup endpoint to establish authentication
+ * 2. Builds iframe URL pointing directly to Label Studio
+ * 3. Adds ?hideHeader=true to hide Label Studio's header
+ * 4. Provides FAB buttons for reload and fullscreen
+ */
+import { LitElement } from 'lit';
+export declare class LabelStudioWrapper extends LitElement {
+    static styles: import("lit").CSSResult;
+    private loading;
+    private error;
+    private iframeUrl;
+    private path;
+    private iframeLoaded;
+    private labelStudioUrl;
+    private iframe;
+    updated(changes: any): Promise<void>;
+    buildIframeUrl(): Promise<void>;
+    handleIframeLoad(): void;
+    handleIframeError(): void;
+    handleReload(): void;
+    handleFullscreen(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}