@serve.zone/dcrouter 13.17.0 → 13.17.3

package/dist_ts_web/elements/access/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ops-view-apitokens.js';
+export * from './ops-view-users.js';

package/dist_ts_web/elements/access/index.js

@@ -0,0 +1,3 @@
+export * from './ops-view-apitokens.js';
+export * from './ops-view-users.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvYWNjZXNzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQyJ9

package/dist_ts_web/elements/access/ops-view-apitokens.d.ts

@@ -0,0 +1,13 @@
+import * as appstate from '../../appstate.js';
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export declare class OpsViewApiTokens extends DeesElement {
+    accessor routeState: appstate.IRouteManagementState;
+    constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private renderScopePills;
+    private renderStatusBadge;
+    private showCreateTokenDialog;
+    private showRollTokenDialog;
+    firstUpdated(): Promise<void>;
+}

package/dist_ts_web/elements/access/ops-view-apitokens.js

@@ -0,0 +1,372 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.js';
+import { DeesElement, css, cssManager, customElement, html, state, } from '@design.estate/dees-element';
+let OpsViewApiTokens = (() => {
+    let _classDecorators = [customElement('ops-view-apitokens')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _routeState_decorators;
+    let _routeState_initializers = [];
+    let _routeState_extraInitializers = [];
+    var OpsViewApiTokens = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _routeState_decorators = [state()];
+            __esDecorate(this, null, _routeState_decorators, { kind: "accessor", name: "routeState", static: false, private: false, access: { has: obj => "routeState" in obj, get: obj => obj.routeState, set: (obj, value) => { obj.routeState = value; } }, metadata: _metadata }, _routeState_initializers, _routeState_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            OpsViewApiTokens = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #routeState_accessor_storage = __runInitializers(this, _routeState_initializers, {
+            mergedRoutes: [],
+            warnings: [],
+            apiTokens: [],
+            isLoading: false,
+            error: null,
+            lastUpdated: 0,
+        });
+        get routeState() { return this.#routeState_accessor_storage; }
+        set routeState(value) { this.#routeState_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _routeState_extraInitializers);
+            const sub = appstate.routeManagementStatePart
+                .select((s) => s)
+                .subscribe((routeState) => {
+                this.routeState = routeState;
+            });
+            this.rxSubscriptions.push(sub);
+            // Re-fetch tokens when user logs in (fixes race condition where
+            // the view is created before authentication completes)
+            const loginSub = appstate.loginStatePart
+                .select((s) => s.isLoggedIn)
+                .subscribe((isLoggedIn) => {
+                if (isLoggedIn) {
+                    appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+                }
+            });
+            this.rxSubscriptions.push(loginSub);
+        }
+        static styles = [
+            cssManager.defaultStyles,
+            viewHostCss,
+            css `
+      .apiTokensContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .scopePill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        background: ${cssManager.bdTheme('rgba(0, 130, 200, 0.1)', 'rgba(0, 170, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#0369a1', '#0af')};
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.active {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.disabled {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .statusBadge.expired {
+        background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+    `,
+        ];
+        render() {
+            const { apiTokens } = this.routeState;
+            return html `
+      <dees-heading level="3">API Tokens</dees-heading>
+
+      <div class="apiTokensContainer">
+        <dees-table
+          .heading1=${'API Tokens'}
+          .heading2=${'Manage programmatic access tokens'}
+          .data=${apiTokens}
+          .dataName=${'token'}
+          .searchable=${true}
+          .showColumnFilters=${true}
+          .displayFunction=${(token) => ({
+                name: token.name,
+                scopes: this.renderScopePills(token.scopes),
+                status: this.renderStatusBadge(token),
+                created: new Date(token.createdAt).toLocaleDateString(),
+                expires: token.expiresAt ? new Date(token.expiresAt).toLocaleDateString() : 'Never',
+                lastUsed: token.lastUsedAt ? new Date(token.lastUsedAt).toLocaleDateString() : 'Never',
+            })}
+          .dataActions=${[
+                {
+                    name: 'Create Token',
+                    iconName: 'lucide:plus',
+                    type: ['header'],
+                    actionFunc: async () => {
+                        await this.showCreateTokenDialog();
+                    },
+                },
+                {
+                    name: 'Enable',
+                    iconName: 'lucide:play',
+                    type: ['inRow', 'contextmenu'],
+                    actionRelevancyCheckFunc: (actionData) => !actionData.item.enabled,
+                    actionFunc: async (actionData) => {
+                        const token = actionData.item;
+                        await appstate.routeManagementStatePart.dispatchAction(appstate.toggleApiTokenAction, { id: token.id, enabled: true });
+                    },
+                },
+                {
+                    name: 'Disable',
+                    iconName: 'lucide:pause',
+                    type: ['inRow', 'contextmenu'],
+                    actionRelevancyCheckFunc: (actionData) => actionData.item.enabled,
+                    actionFunc: async (actionData) => {
+                        const token = actionData.item;
+                        await appstate.routeManagementStatePart.dispatchAction(appstate.toggleApiTokenAction, { id: token.id, enabled: false });
+                    },
+                },
+                {
+                    name: 'Roll',
+                    iconName: 'lucide:rotateCw',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const token = actionData.item;
+                        await this.showRollTokenDialog(token);
+                    },
+                },
+                {
+                    name: 'Revoke',
+                    iconName: 'lucide:trash2',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const token = actionData.item;
+                        await appstate.routeManagementStatePart.dispatchAction(appstate.revokeApiTokenAction, token.id);
+                    },
+                },
+            ]}
+        ></dees-table>
+      </div>
+    `;
+        }
+        renderScopePills(scopes) {
+            return html `<div style="display: flex; flex-wrap: wrap; gap: 2px;">${scopes.map((s) => html `<span class="scopePill">${s}</span>`)}</div>`;
+        }
+        renderStatusBadge(token) {
+            if (!token.enabled) {
+                return html `<span class="statusBadge disabled">Disabled</span>`;
+            }
+            if (token.expiresAt && token.expiresAt < Date.now()) {
+                return html `<span class="statusBadge expired">Expired</span>`;
+            }
+            return html `<span class="statusBadge active">Active</span>`;
+        }
+        async showCreateTokenDialog() {
+            const { DeesModal } = await import('@design.estate/dees-catalog');
+            const allScopes = [
+                'routes:read',
+                'routes:write',
+                'config:read',
+                'tokens:read',
+                'tokens:manage',
+            ];
+            await DeesModal.createAndShow({
+                heading: 'Create API Token',
+                content: html `
+        <div style="color: #888; margin-bottom: 12px; font-size: 13px;">
+          The token value will be shown once after creation. Copy it immediately.
+        </div>
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Token Name'} .required=${true}></dees-input-text>
+          <dees-input-tags
+            .key=${'scopes'}
+            .label=${'Token Scopes'}
+            .value=${['routes:read', 'routes:write']}
+            .suggestions=${allScopes}
+            .required=${true}
+          ></dees-input-tags>
+          <dees-input-text .key=${'expiresInDays'} .label=${'Expires in'} .description=${'Number of days; leave blank for no expiration'}></dees-input-text>
+        </dees-form>
+      `,
+                menuOptions: [
+                    {
+                        name: 'Cancel',
+                        iconName: 'lucide:x',
+                        action: async (modalArg) => await modalArg.destroy(),
+                    },
+                    {
+                        name: 'Create',
+                        iconName: 'lucide:key',
+                        action: async (modalArg) => {
+                            const contentEl = modalArg.shadowRoot?.querySelector('.content');
+                            const form = contentEl?.querySelector('dees-form');
+                            if (!form)
+                                return;
+                            const formData = await form.collectFormData();
+                            if (!formData.name)
+                                return;
+                            // dees-input-tags is not in dees-form's FORM_INPUT_TYPES, so collectFormData() won't
+                            // include it. Query the tags input directly and call getValue().
+                            const tagsInput = form.querySelector('dees-input-tags');
+                            const rawScopes = tagsInput?.getValue?.() || tagsInput?.value || formData.scopes || [];
+                            const scopes = rawScopes
+                                .filter((s) => allScopes.includes(s));
+                            const expiresInDays = formData.expiresInDays
+                                ? parseInt(formData.expiresInDays, 10)
+                                : null;
+                            await modalArg.destroy();
+                            try {
+                                const response = await appstate.createApiToken(formData.name, scopes, expiresInDays);
+                                if (response.success && response.tokenValue) {
+                                    // Refresh the list first so it's ready when user dismisses the modal
+                                    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+                                    // Show the token value in a new modal
+                                    await DeesModal.createAndShow({
+                                        heading: 'Token Created',
+                                        content: html `
+                    <div style="color: #ccc; padding: 8px 0;">
+                      <p>Copy this token now. It will not be shown again.</p>
+                      <div style="background: #111; padding: 12px; border-radius: 6px; margin-top: 8px;">
+                        <code style="color: #0f8; word-break: break-all; font-size: 13px;">${response.tokenValue}</code>
+                      </div>
+                    </div>
+                  `,
+                                        menuOptions: [
+                                            {
+                                                name: 'Done',
+                                                iconName: 'lucide:check',
+                                                action: async (m) => await m.destroy(),
+                                            },
+                                        ],
+                                    });
+                                }
+                            }
+                            catch (error) {
+                                console.error('Failed to create token:', error);
+                            }
+                        },
+                    },
+                ],
+            });
+        }
+        async showRollTokenDialog(token) {
+            const { DeesModal } = await import('@design.estate/dees-catalog');
+            await DeesModal.createAndShow({
+                heading: 'Roll Token Secret',
+                content: html `
+        <div style="color: #ccc; padding: 8px 0;">
+          <p>This will regenerate the secret for <strong>${token.name}</strong>. The old token value will stop working immediately.</p>
+        </div>
+      `,
+                menuOptions: [
+                    {
+                        name: 'Cancel',
+                        iconName: 'lucide:x',
+                        action: async (modalArg) => await modalArg.destroy(),
+                    },
+                    {
+                        name: 'Roll Token',
+                        iconName: 'lucide:rotateCw',
+                        action: async (modalArg) => {
+                            await modalArg.destroy();
+                            try {
+                                const response = await appstate.rollApiToken(token.id);
+                                if (response.success && response.tokenValue) {
+                                    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+                                    await DeesModal.createAndShow({
+                                        heading: 'Token Rolled',
+                                        content: html `
+                    <div style="color: #ccc; padding: 8px 0;">
+                      <p>Copy this token now. It will not be shown again.</p>
+                      <div style="background: #111; padding: 12px; border-radius: 6px; margin-top: 8px;">
+                        <code style="color: #0f8; word-break: break-all; font-size: 13px;">${response.tokenValue}</code>
+                      </div>
+                    </div>
+                  `,
+                                        menuOptions: [
+                                            {
+                                                name: 'Done',
+                                                iconName: 'lucide:check',
+                                                action: async (m) => await m.destroy(),
+                                            },
+                                        ],
+                                    });
+                                }
+                            }
+                            catch (error) {
+                                console.error('Failed to roll token:', error);
+                            }
+                        },
+                    },
+                ],
+            });
+        }
+        async firstUpdated() {
+            await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return OpsViewApiTokens = _classThis;
+})();
+export { OpsViewApiTokens };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctYXBpdG9rZW5zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2FjY2Vzcy9vcHMtdmlldy1hcGl0b2tlbnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxRQUFRLE1BQU0sbUJBQW1CLENBQUM7QUFDOUMsT0FBTyxLQUFLLFVBQVUsTUFBTSxzQ0FBc0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFL0MsT0FBTyxFQUNMLFdBQVcsRUFDWCxHQUFHLEVBQ0gsVUFBVSxFQUNWLGFBQWEsRUFDYixJQUFJLEVBQ0osS0FBSyxHQUVOLE1BQU0sNkJBQTZCLENBQUM7SUFLeEIsZ0JBQWdCOzRCQUQ1QixhQUFhLENBQUMsb0JBQW9CLENBQUM7Ozs7c0JBQ0UsV0FBVzs7OztnQ0FBbkIsU0FBUSxXQUFXOzs7O3NDQUM5QyxLQUFLLEVBQUU7WUFBQyxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBTzFCO1lBUkosNktBMlVDOzs7O1FBMVVVLGlGQUFzRDtZQUM3RCxZQUFZLEVBQUUsRUFBRTtZQUNoQixRQUFRLEVBQUUsRUFBRTtZQUNaLFNBQVMsRUFBRSxFQUFFO1lBQ2IsU0FBUyxFQUFFLEtBQUs7WUFDaEIsS0FBSyxFQUFFLElBQUk7WUFDWCxXQUFXLEVBQUUsQ0FBQztTQUNmLEVBQUM7UUFQTyxJQUFTLFVBQVUsZ0RBTzFCO1FBUE8sSUFBUyxVQUFVLHNEQU8xQjtRQUVGO1lBQ0UsS0FBSyxFQUFFLENBQUM7O1lBQ1IsTUFBTSxHQUFHLEdBQUcsUUFBUSxDQUFDLHdCQUF3QjtpQkFDMUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7aUJBQ2hCLFNBQVMsQ0FBQyxDQUFDLFVBQVUsRUFBRSxFQUFFO2dCQUN4QixJQUFJLENB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

package/dist_ts_web/elements/access/ops-view-users.d.ts

@@ -0,0 +1,11 @@
+import * as appstate from '../../appstate.js';
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export declare class OpsViewUsers extends DeesElement {
+    accessor usersState: appstate.IUsersState;
+    accessor loginState: appstate.ILoginState;
+    constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private renderRoleBadge;
+    firstUpdated(): Promise<void>;
+}

package/dist_ts_web/elements/access/ops-view-users.js

@@ -0,0 +1,190 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+import { DeesElement, css, cssManager, customElement, html, state, } from '@design.estate/dees-element';
+let OpsViewUsers = (() => {
+    let _classDecorators = [customElement('ops-view-users')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _usersState_decorators;
+    let _usersState_initializers = [];
+    let _usersState_extraInitializers = [];
+    let _loginState_decorators;
+    let _loginState_initializers = [];
+    let _loginState_extraInitializers = [];
+    var OpsViewUsers = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _usersState_decorators = [state()];
+            _loginState_decorators = [state()];
+            __esDecorate(this, null, _usersState_decorators, { kind: "accessor", name: "usersState", static: false, private: false, access: { has: obj => "usersState" in obj, get: obj => obj.usersState, set: (obj, value) => { obj.usersState = value; } }, metadata: _metadata }, _usersState_initializers, _usersState_extraInitializers);
+            __esDecorate(this, null, _loginState_decorators, { kind: "accessor", name: "loginState", static: false, private: false, access: { has: obj => "loginState" in obj, get: obj => obj.loginState, set: (obj, value) => { obj.loginState = value; } }, metadata: _metadata }, _loginState_initializers, _loginState_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            OpsViewUsers = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #usersState_accessor_storage = __runInitializers(this, _usersState_initializers, {
+            users: [],
+            isLoading: false,
+            error: null,
+            lastUpdated: 0,
+        });
+        get usersState() { return this.#usersState_accessor_storage; }
+        set usersState(value) { this.#usersState_accessor_storage = value; }
+        #loginState_accessor_storage = (__runInitializers(this, _usersState_extraInitializers), __runInitializers(this, _loginState_initializers, {
+            identity: null,
+            isLoggedIn: false,
+        }));
+        get loginState() { return this.#loginState_accessor_storage; }
+        set loginState(value) { this.#loginState_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _loginState_extraInitializers);
+            const usersSub = appstate.usersStatePart
+                .select((s) => s)
+                .subscribe((usersState) => {
+                this.usersState = usersState;
+            });
+            this.rxSubscriptions.push(usersSub);
+            const loginSub = appstate.loginStatePart
+                .select((s) => s)
+                .subscribe((loginState) => {
+                this.loginState = loginState;
+                // Re-fetch users when user logs in (fixes race condition where
+                // the view is created before authentication completes)
+                if (loginState.isLoggedIn) {
+                    appstate.usersStatePart.dispatchAction(appstate.fetchUsersAction, null);
+                }
+            });
+            this.rxSubscriptions.push(loginSub);
+        }
+        static styles = [
+            cssManager.defaultStyles,
+            viewHostCss,
+            css `
+      .usersContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .roleBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .roleBadge.admin {
+        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .roleBadge.user {
+        background: ${cssManager.bdTheme('#e0f2fe', '#0c4a6e')};
+        color: ${cssManager.bdTheme('#075985', '#7dd3fc')};
+      }
+
+      .sessionBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .userIdCell {
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+    `,
+        ];
+        render() {
+            const { users } = this.usersState;
+            const currentUserId = this.loginState.identity?.userId;
+            return html `
+      <dees-heading level="3">Users</dees-heading>
+
+      <div class="usersContainer">
+        <dees-table
+          .heading1=${'Users'}
+          .heading2=${'OpsServer user accounts'}
+          .data=${users}
+          .dataName=${'user'}
+          .searchable=${true}
+          .showColumnFilters=${true}
+          .displayFunction=${(user) => ({
+                ID: html `<span class="userIdCell">${user.id}</span>`,
+                Username: user.username,
+                Role: this.renderRoleBadge(user.role),
+                Session: user.id === currentUserId
+                    ? html `<span class="sessionBadge">current</span>`
+                    : '',
+            })}
+        ></dees-table>
+      </div>
+    `;
+        }
+        renderRoleBadge(role) {
+            const cls = role === 'admin' ? 'admin' : 'user';
+            return html `<span class="roleBadge ${cls}">${role}</span>`;
+        }
+        async firstUpdated() {
+            if (this.loginState.isLoggedIn) {
+                await appstate.usersStatePart.dispatchAction(appstate.fetchUsersAction, null);
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return OpsViewUsers = _classThis;
+})();
+export { OpsViewUsers };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctdXNlcnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvYWNjZXNzL29wcy12aWV3LXVzZXJzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssUUFBUSxNQUFNLG1CQUFtQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUUvQyxPQUFPLEVBQ0wsV0FBVyxFQUNYLEdBQUcsRUFDSCxVQUFVLEVBQ1YsYUFBYSxFQUNiLElBQUksRUFDSixLQUFLLEdBRU4sTUFBTSw2QkFBNkIsQ0FBQztJQUd4QixZQUFZOzRCQUR4QixhQUFhLENBQUMsZ0JBQWdCLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozs0QkFBbkIsU0FBUSxXQUFXOzs7O3NDQUMxQyxLQUFLLEVBQUU7c0NBT1AsS0FBSyxFQUFFO1lBUEMsbUxBQVMsVUFBVSw2QkFBVixVQUFVLCtGQUsxQjtZQUVPLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFHMUI7WUFYSiw2S0E2SEM7Ozs7UUE1SFUsaUZBQTRDO1lBQ25ELEtBQUssRUFBRSxFQUFFO1lBQ1QsU0FBUyxFQUFFLEtBQUs7WUFDaEIsS0FBSyxFQUFFLElBQUk7WUFDWCxXQUFXLEVBQUUsQ0FBQztTQUNmLEVBQUM7UUFMTyxJQUFTLFVBQVUsZ0RBSzFCO1FBTE8sSUFBUyxVQUFVLHNEQUsxQjtRQUVPLDBJQUE0QztZQUNuRCxRQUFRLEVBQUUsSUFBSTtZQUNkLFVBQVUsRUFBRSxLQUFLO1NBQ2xCLEdBQUM7UUFITyxJQUFTLFVBQVUsZ0RBRzFCO1FBSE8sSUFBUyxVQUFVLHNEQUcxQjtRQUVGO1lBQ0UsS0FBSyxFQUFFLENBQUM7O1lBQ1IsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLGNBQWM7aUJBQ3JDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxF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