@things-factory/system 10.0.0-beta.8 → 10.0.0-beta.89

package/dist-client/pages/system-info.d.ts

@@ -7,7 +7,14 @@ import { PageView } from '@operato/shell';
 declare const SystemInfo_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
 export declare class SystemInfo extends SystemInfo_base {
     static styles: import("lit").CSSResult;
+    private _swStatus;
+    private _swLastChecked;
+    private _swChecking;
     private _applicationMeta?;
+    private _swRegistration;
+    private _swStateChangeListener;
+    private _swUpdateFoundListener;
+    private _observedSW;
     get context(): {
         title: string;
     };
@@ -18,7 +25,34 @@ export declare class SystemInfo extends SystemInfo_base {
         copyright: string;
     };
     render(): import("lit-html").TemplateResult<1>;
-    onClickOpenSourceLicense(e: any): void;
-    onClickLicenseInfo(e: any): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * SW registration 과 installing/waiting 상태를 관찰.
+     * `updatefound` 이벤트로 새 SW 감지 → statechange 로 전이 추적.
+     *
+     * 개발 미리보기: URL 에 `?sw-demo=downloading` 또는 `?sw-demo=ready` 를
+     * 붙이면 실제 SW 와 무관하게 해당 상태 배너를 고정 표시 (UI 검증용).
+     */
+    private _setupSwObserver;
+    /**
+     * 수동 또는 초기 update check. 네트워크로 SW 파일 재확인 후
+     * 새 버전이 있으면 `updatefound` 이벤트가 발생해 기존 리스너가 상태 전이.
+     */
+    private _checkForUpdates;
+    private _bindWorker;
+    private _updateStatusFromWorker;
+    private _teardownSwObserver;
+    private _renderSwStatus;
+    /**
+     * "5초 전" / "2분 전" 같은 상대 시간 문자열.
+     */
+    private _formatAgo;
+    /**
+     * 개발 정보 (NODE_ENV, SHELL-VERSION 등) — 개발 모드에서만 노출.
+     */
+    private _renderDevInfo;
+    onClickOpenSourceLicense(e: Event): void;
+    onClickLicenseInfo(e: Event): void;
 }
 export {};

package/dist-client/pages/system-info.js

@@ -1,17 +1,27 @@
-import { __decorate } from "tslib";
+import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@material/web/button/text-button.js';
 import '@operato/i18n/ox-i18n.js';
 import '../viewparts/opensource-license';
 import '../viewparts/license-info';
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { openHelp } from '@operato/help';
 import { i18next, localize } from '@operato/i18n';
 import { openPopup } from '@operato/layout';
 import { PageView } from '@operato/shell';
 const ENV = process.env;
 let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this._swStatus = 'up-to-date';
+        this._swLastChecked = null;
+        this._swChecking = false;
+        this._swRegistration = null;
+        this._swStateChangeListener = null;
+        this._swUpdateFoundListener = null;
+        this._observedSW = null;
+    }
     static { this.styles = css `
     :host {
       display: block;
@@ -28,13 +38,6 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
       vertical-align: middle;
     }
 
-    #refresh-button {
-      border-radius: var(--border-radius);
-      border: 1px solid rgba(0, 0, 0, 0.1);
-
-      text-transform: capitalize;
-    }
-
     div {
       padding: 10px;
     }
@@ -85,6 +88,92 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
       opacity: var(--help-icon-hover-opacity, 1);
       color: var(--help-icon-hover-color);
     }
+
+    /* Service Worker 상태 배너 */
+    .sw-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      margin: 8px auto;
+      border-radius: 6px;
+      font-size: 13px;
+      max-width: 420px;
+    }
+    .sw-status.downloading {
+      background: var(--sw-status-download-bg, #fef3c7);
+      color: var(--sw-status-download-color, #78350f);
+      border: 1px solid var(--sw-status-download-border, #fbbf24);
+    }
+    .sw-status.ready {
+      background: var(--sw-status-ready-bg, #dcfce7);
+      color: var(--sw-status-ready-color, #14532d);
+      border: 1px solid var(--sw-status-ready-border, #22c55e);
+    }
+    .sw-status.up-to-date {
+      background: var(--sw-status-uptodate-bg, #f0fdf4);
+      color: var(--sw-status-uptodate-color, #166534);
+      border: 1px solid var(--sw-status-uptodate-border, #86efac);
+    }
+    .sw-status.info {
+      background: var(--sw-status-info-bg, #eff6ff);
+      color: var(--sw-status-info-color, #1e3a8a);
+      border: 1px solid var(--sw-status-info-border, #93c5fd);
+    }
+    .sw-status-meta {
+      font-size: 11px;
+      opacity: 0.7;
+    }
+    .sw-check-btn {
+      margin-left: auto;
+      --md-text-button-label-text-size: 11px;
+    }
+
+    /* 개발 정보 블록 */
+    .dev-info {
+      max-width: 480px;
+      margin: 18px auto;
+      padding: 12px 16px;
+      border: 1px dashed #cbd5e1;
+      border-radius: 6px;
+      text-align: left;
+      background: rgba(148, 163, 184, 0.06);
+    }
+    .dev-info-title {
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: #64748b;
+      margin-bottom: 8px;
+    }
+    .dev-info dl {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: 4px 12px;
+      font-size: 12px;
+      margin: 0;
+    }
+    .dev-info dt {
+      color: #475569;
+      font-weight: 600;
+    }
+    .dev-info dd {
+      margin: 0;
+      color: #0f172a;
+      font-family: 'SF Mono', Consolas, monospace;
+      word-break: break-all;
+    }
+    .sw-status md-icon {
+      font-size: 18px;
+    }
+    .sw-status md-icon.spinning {
+      animation: sw-spin 1.4s linear infinite;
+    }
+    @keyframes sw-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
   `; }
     get context() {
         return {
@@ -93,10 +182,10 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
     }
     get applicationMeta() {
         if (!this._applicationMeta) {
-            var iconLink = document.querySelector('link[rel="application-icon"]');
-            var titleMeta = document.querySelector('meta[name="application-name"]');
-            var descriptionMeta = document.querySelector('meta[name="application-description"]');
-            var copyrightMeta = document.querySelector('meta[name="application-copyright"]');
+            const iconLink = document.querySelector('link[rel="application-icon"]');
+            const titleMeta = document.querySelector('meta[name="application-name"]');
+            const descriptionMeta = document.querySelector('meta[name="application-description"]');
+            const copyrightMeta = document.querySelector('meta[name="application-copyright"]');
             this._applicationMeta = {
                 icon: iconLink?.href,
                 title: titleMeta ? titleMeta.content : 'Things Factory',
@@ -107,7 +196,7 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
         return this._applicationMeta;
     }
     render() {
-        var { icon, title, description, copyright } = this.applicationMeta;
+        const { icon, title, description, copyright } = this.applicationMeta;
         return html `
       <img src=${icon} alt="system logo" />
 
@@ -119,36 +208,233 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
         >
       </div>
 
-      <div>
-        <md-text-button
-          id="refresh-button"
-          @click=${e => {
-            location.reload();
-        }}
-        >
-          <md-icon>refresh</md-icon>
-          ${String(i18next.t('label.system reload'))}
-        </md-text-button>
-      </div>
+      ${this._renderSwStatus()}
 
       <div>
         <span>${copyright}</span>
 
         <span
           >${title} is built on several
-          <a href="#" @click=${e => this.onClickOpenSourceLicense(e)}>open source software</a></span
+          <a href="#" @click=${(e) => this.onClickOpenSourceLicense(e)}>open source software</a></span
         >
-        <span>We are using the <a href="#" @click=${e => this.onClickLicenseInfo(e)}>license</a> as permitted. </span>
+        <span>We are using the <a href="#" @click=${(e) => this.onClickLicenseInfo(e)}>license</a> as permitted. </span>
       </div>
 
+      ${this._renderDevInfo()}
+
       <div class="poweredBy">
         <span
           >Powered by &trade;Things Factory <ox-i18n msgid="field.version"></ox-i18n> ${ENV['SHELL-VERSION']}
-          <md-icon @click=${e => openHelp('about/things-factory')}>help</md-icon>
+          <md-icon @click=${() => openHelp('about/things-factory')}>help</md-icon>
         </span>
       </div>
     `;
     }
+    // ───────── Service Worker 상태 추적 ─────────
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupSwObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardownSwObserver();
+    }
+    /**
+     * SW registration 과 installing/waiting 상태를 관찰.
+     * `updatefound` 이벤트로 새 SW 감지 → statechange 로 전이 추적.
+     *
+     * 개발 미리보기: URL 에 `?sw-demo=downloading` 또는 `?sw-demo=ready` 를
+     * 붙이면 실제 SW 와 무관하게 해당 상태 배너를 고정 표시 (UI 검증용).
+     */
+    async _setupSwObserver() {
+        // dev 미리보기 쇼트컷
+        const demo = new URLSearchParams(window.location.search).get('sw-demo');
+        if (demo === 'downloading' || demo === 'installing' || demo === 'ready' || demo === 'up-to-date') {
+            this._swStatus = demo;
+            this._swLastChecked = new Date();
+            return;
+        }
+        if (!('serviceWorker' in navigator)) {
+            this._swStatus = 'unsupported';
+            return;
+        }
+        const reg = await navigator.serviceWorker.getRegistration();
+        if (!reg) {
+            this._swStatus = 'unregistered';
+            return;
+        }
+        this._swRegistration = reg;
+        // 이미 installing 중인 SW 가 있으면 즉시 관찰
+        if (reg.installing)
+            this._bindWorker(reg.installing);
+        // 이미 waiting (설치 완료, 적용 대기) 이면 ready
+        if (reg.waiting)
+            this._swStatus = 'ready';
+        // 새 SW 감지 핸들러
+        this._swUpdateFoundListener = () => {
+            if (reg.installing)
+                this._bindWorker(reg.installing);
+        };
+        reg.addEventListener('updatefound', this._swUpdateFoundListener);
+        // 아직 새 SW 가 없으면 "up-to-date" 로 표시
+        if (!reg.installing && !reg.waiting) {
+            this._swStatus = 'up-to-date';
+        }
+        // 강제 update check — 페이지 열린 시점의 최신 여부 확인
+        await this._checkForUpdates();
+    }
+    /**
+     * 수동 또는 초기 update check. 네트워크로 SW 파일 재확인 후
+     * 새 버전이 있으면 `updatefound` 이벤트가 발생해 기존 리스너가 상태 전이.
+     */
+    async _checkForUpdates() {
+        if (!this._swRegistration)
+            return;
+        this._swChecking = true;
+        try {
+            await this._swRegistration.update();
+        }
+        catch {
+            /* 네트워크 불가 등 — 조용히 무시 */
+        }
+        finally {
+            this._swChecking = false;
+            this._swLastChecked = new Date();
+        }
+    }
+    _bindWorker(sw) {
+        this._observedSW = sw;
+        this._updateStatusFromWorker(sw);
+        this._swStateChangeListener = () => this._updateStatusFromWorker(sw);
+        sw.addEventListener('statechange', this._swStateChangeListener);
+    }
+    _updateStatusFromWorker(sw) {
+        switch (sw.state) {
+            case 'installing':
+                this._swStatus = 'downloading';
+                break;
+            case 'installed':
+                // 기존 controller 가 있으면 새 버전 대기 상태 (업데이트), 없으면 최초 설치
+                this._swStatus = navigator.serviceWorker.controller ? 'ready' : 'up-to-date';
+                break;
+            case 'activating':
+                this._swStatus = 'installing';
+                break;
+            case 'activated':
+            case 'redundant':
+                this._swStatus = 'up-to-date';
+                break;
+        }
+    }
+    _teardownSwObserver() {
+        if (this._observedSW && this._swStateChangeListener) {
+            this._observedSW.removeEventListener('statechange', this._swStateChangeListener);
+        }
+        if (this._swRegistration && this._swUpdateFoundListener) {
+            this._swRegistration.removeEventListener('updatefound', this._swUpdateFoundListener);
+        }
+        this._observedSW = null;
+        this._swRegistration = null;
+        this._swStateChangeListener = null;
+        this._swUpdateFoundListener = null;
+    }
+    _renderSwStatus() {
+        const checkedAgo = this._swLastChecked
+            ? this._formatAgo(this._swLastChecked)
+            : null;
+        // 각 상태별 스타일/아이콘/메시지
+        const statusConfig = {
+            downloading: {
+                tone: 'downloading',
+                icon: 'cached',
+                spin: true,
+                msg: i18next.t('text.new version downloading')
+            },
+            installing: {
+                tone: 'downloading',
+                icon: 'cached',
+                spin: true,
+                msg: i18next.t('text.new version installing')
+            },
+            ready: {
+                tone: 'ready',
+                icon: 'system_update',
+                msg: i18next.t('text.new version ready to apply')
+            },
+            'up-to-date': {
+                tone: 'up-to-date',
+                icon: 'check_circle',
+                msg: i18next.t('text.you are on the latest version')
+            },
+            unregistered: {
+                tone: 'info',
+                icon: 'info',
+                msg: i18next.t('text.service worker not registered (dev mode)')
+            },
+            unsupported: {
+                tone: 'info',
+                icon: 'info',
+                msg: i18next.t('text.service worker not supported')
+            }
+        };
+        const s = statusConfig[this._swStatus];
+        return html `
+      <div class="sw-status ${s.tone}">
+        <md-icon class=${s.spin ? 'spinning' : ''}>${s.icon}</md-icon>
+        <span>${s.msg}</span>
+        ${checkedAgo
+            ? html `<span class="sw-status-meta">· ${i18next.t('text.checked')} ${checkedAgo}</span>`
+            : ''}
+        ${this._swStatus === 'up-to-date' || this._swStatus === 'unregistered'
+            ? html `
+              <md-text-button
+                class="sw-check-btn"
+                ?disabled=${this._swChecking}
+                @click=${() => this._checkForUpdates()}
+              >
+                <md-icon>refresh</md-icon>
+                ${String(i18next.t('label.check now'))}
+              </md-text-button>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    /**
+     * "5초 전" / "2분 전" 같은 상대 시간 문자열.
+     */
+    _formatAgo(d) {
+        const sec = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
+        if (sec < 60)
+            return `${sec}${i18next.t('text.seconds ago suffix')}`;
+        const min = Math.floor(sec / 60);
+        if (min < 60)
+            return `${min}${i18next.t('text.minutes ago suffix')}`;
+        const hr = Math.floor(min / 60);
+        return `${hr}${i18next.t('text.hours ago suffix')}`;
+    }
+    /**
+     * 개발 정보 (NODE_ENV, SHELL-VERSION 등) — 개발 모드에서만 노출.
+     */
+    _renderDevInfo() {
+        const nodeEnv = (ENV['NODE-ENV'] || '').toString();
+        if (nodeEnv !== 'development' && !new URLSearchParams(location.search).has('sw-demo')) {
+            return '';
+        }
+        return html `
+      <div class="dev-info">
+        <div class="dev-info-title">${i18next.t('text.development info')}</div>
+        <dl>
+          <dt>NODE_ENV</dt><dd>${nodeEnv || '(unset)'}</dd>
+          <dt>APP-VERSION</dt><dd>${ENV['APP-VERSION']}</dd>
+          <dt>SHELL-VERSION</dt><dd>${ENV['SHELL-VERSION']}</dd>
+          <dt>SHELL-LICENSE</dt><dd>${ENV['SHELL-LICENSE']}</dd>
+          <dt>Service Worker</dt><dd>${this._swStatus}</dd>
+          <dt>User Agent</dt><dd>${navigator.userAgent}</dd>
+        </dl>
+      </div>
+    `;
+    }
     onClickOpenSourceLicense(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -168,6 +454,18 @@ let SystemInfo = class SystemInfo extends localize(i18next)(PageView) {
         });
     }
 };
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], SystemInfo.prototype, "_swStatus", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SystemInfo.prototype, "_swLastChecked", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], SystemInfo.prototype, "_swChecking", void 0);
 SystemInfo = __decorate([
     customElement('system-info')
 ], SystemInfo);

package/dist-client/pages/system-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"system-info.js","sourceRoot":"","sources":["../../client/pages/system-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '../viewparts/opensource-license'\nimport '../viewparts/license-info'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { openHelp } from '@operato/help'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\n\nconst ENV = process.env\n\n@customElement('system-info')\nexport class SystemInfo extends localize(i18next)(PageView) {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      text-align: center;\n\n      background-color: var(--system-info-background-color);\n      padding: var(--system-info-content-padding);\n      color: var(--system-info-color);\n      font: var(--system-info-font);\n    }\n\n    :host * {\n      vertical-align: middle;\n    }\n\n    #refresh-button {\n      border-radius: var(--border-radius);\n      border: 1px solid rgba(0, 0, 0, 0.1);\n\n      text-transform: capitalize;\n    }\n\n    div {\n      padding: 10px;\n    }\n\n    strong {\n      font: var(--system-info-appname-font);\n      color: var(--system-info-appname-color);\n    }\n\n    span {\n      display: block;\n    }\n\n    span.description {\n      padding: 3px 10px;\n      font: var(--system-info-description-font);\n      color: var(--system-info-description-color);\n    }\n\n    span.version {\n      display: inline-block;\n      border-radius: 5px;\n      opacity: 0.8;\n      background-color: var(--system-info-version-background-color);\n      padding: 3px 10px;\n      font: var(--system-info-version-font);\n      color: var(--system-info-version-color);\n    }\n\n    .poweredBy {\n      background-color: #efefef;\n      position: absolute;\n      border-top: 1px solid rgba(0, 0, 0, 0.1);\n      padding: 7px 0;\n      width: 100%;\n      bottom: 0;\n      text-align: center;\n    }\n\n    .poweredBy md-icon {\n      opacity: var(--help-icon-opacity, 0.4);\n      font-size: var(--help-icon-size, 18px);\n      color: var(--help-icon-color);\n    }\n\n    .poweredBy md-icon:hover {\n      cursor: help;\n      opacity: var(--help-icon-hover-opacity, 1);\n      color: var(--help-icon-hover-color);\n    }\n  `\n\n  private _applicationMeta?: { icon?: string; title: string; description: string; copyright: string }\n\n  get context() {\n    return {\n      title: i18next.t('label.about-system')\n    }\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      var iconLink = document.querySelector('link[rel=\"application-icon\"]') as HTMLLinkElement\n      var titleMeta = document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement\n      var descriptionMeta = document.querySelector('meta[name=\"application-description\"]') as HTMLMetaElement\n      var copyrightMeta = document.querySelector('meta[name=\"application-copyright\"]') as HTMLMetaElement\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software',\n        copyright: copyrightMeta ? copyrightMeta.content : 'Copyright © hatiolab.com. All Rights Reserved.\" />'\n      }\n    }\n\n    return this._applicationMeta\n  }\n\n  render() {\n    var { icon, title, description, copyright } = this.applicationMeta\n\n    return html`\n      <img src=${icon!} alt=\"system logo\" />\n\n      <div>\n        <strong>${title}</strong>\n        <span class=\"description\">${description}</span>\n        <span class=\"version\"\n          ><ox-i18n msgid=\"field.version\"></ox-i18n> : ${ENV['APP-VERSION']}-${ENV['NODE-ENV']}</span\n        >\n      </div>\n\n      <div>\n        <md-text-button\n          id=\"refresh-button\"\n          @click=${e => {\n            location.reload()\n          }}\n        >\n          <md-icon>refresh</md-icon>\n          ${String(i18next.t('label.system reload'))}\n        </md-text-button>\n      </div>\n\n      <div>\n        <span>${copyright}</span>\n\n        <span\n          >${title} is built on several\n          <a href=\"#\" @click=${e => this.onClickOpenSourceLicense(e)}>open source software</a></span\n        >\n        <span>We are using the <a href=\"#\" @click=${e => this.onClickLicenseInfo(e)}>license</a> as permitted. </span>\n      </div>\n\n      <div class=\"poweredBy\">\n        <span\n          >Powered by &trade;Things Factory <ox-i18n msgid=\"field.version\"></ox-i18n> ${ENV['SHELL-VERSION']}\n          <md-icon @click=${e => openHelp('about/things-factory')}>help</md-icon>\n        </span>\n      </div>\n    `\n  }\n\n  onClickOpenSourceLicense(e) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    openPopup(html` <opensource-license></opensource-license> `, {\n      backdrop: true,\n      size: 'large',\n      title: 'Open Source Licenses'\n    })\n  }\n\n  onClickLicenseInfo(e) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    openPopup(html` <license-info></license-info> `, {\n      backdrop: true,\n      size: 'large',\n      title: 'License Information'\n    })\n  }\n}\n"]}
+{"version":3,"file":"system-info.js","sourceRoot":"","sources":["../../client/pages/system-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '../viewparts/opensource-license'\nimport '../viewparts/license-info'\n\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { openHelp } from '@operato/help'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\n\nconst ENV = process.env\n\n/**\n * Service Worker 상태. 다운로드/설치 중인지, 적용 대기 중인지, 조용한 상태인지 구분.\n *   - 'unsupported': 브라우저가 SW 미지원\n *   - 'unregistered': 등록된 SW 없음 (보통 개발 모드)\n *   - 'up-to-date' : active SW 만 존재, 새 버전 없음 (최신)\n *   - 'downloading': 새 SW 가 installing 상태 (네트워크에서 파일 받아오는 중)\n *   - 'installing' : installing→installed 전이 직전 (마무리)\n *   - 'ready'      : installed + 기존 controller 있음 → 활성 대기 중 (update 존재)\n */\ntype SwStatus = 'unsupported' | 'unregistered' | 'up-to-date' | 'downloading' | 'installing' | 'ready'\n\n@customElement('system-info')\nexport class SystemInfo extends localize(i18next)(PageView) {\n  static styles = css`\n    :host {\n      display: block;\n      position: relative;\n      text-align: center;\n\n      background-color: var(--system-info-background-color);\n      padding: var(--system-info-content-padding);\n      color: var(--system-info-color);\n      font: var(--system-info-font);\n    }\n\n    :host * {\n      vertical-align: middle;\n    }\n\n    div {\n      padding: 10px;\n    }\n\n    strong {\n      font: var(--system-info-appname-font);\n      color: var(--system-info-appname-color);\n    }\n\n    span {\n      display: block;\n    }\n\n    span.description {\n      padding: 3px 10px;\n      font: var(--system-info-description-font);\n      color: var(--system-info-description-color);\n    }\n\n    span.version {\n      display: inline-block;\n      border-radius: 5px;\n      opacity: 0.8;\n      background-color: var(--system-info-version-background-color);\n      padding: 3px 10px;\n      font: var(--system-info-version-font);\n      color: var(--system-info-version-color);\n    }\n\n    .poweredBy {\n      background-color: #efefef;\n      position: absolute;\n      border-top: 1px solid rgba(0, 0, 0, 0.1);\n      padding: 7px 0;\n      width: 100%;\n      bottom: 0;\n      text-align: center;\n    }\n\n    .poweredBy md-icon {\n      opacity: var(--help-icon-opacity, 0.4);\n      font-size: var(--help-icon-size, 18px);\n      color: var(--help-icon-color);\n    }\n\n    .poweredBy md-icon:hover {\n      cursor: help;\n      opacity: var(--help-icon-hover-opacity, 1);\n      color: var(--help-icon-hover-color);\n    }\n\n    /* Service Worker 상태 배너 */\n    .sw-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      margin: 8px auto;\n      border-radius: 6px;\n      font-size: 13px;\n      max-width: 420px;\n    }\n    .sw-status.downloading {\n      background: var(--sw-status-download-bg, #fef3c7);\n      color: var(--sw-status-download-color, #78350f);\n      border: 1px solid var(--sw-status-download-border, #fbbf24);\n    }\n    .sw-status.ready {\n      background: var(--sw-status-ready-bg, #dcfce7);\n      color: var(--sw-status-ready-color, #14532d);\n      border: 1px solid var(--sw-status-ready-border, #22c55e);\n    }\n    .sw-status.up-to-date {\n      background: var(--sw-status-uptodate-bg, #f0fdf4);\n      color: var(--sw-status-uptodate-color, #166534);\n      border: 1px solid var(--sw-status-uptodate-border, #86efac);\n    }\n    .sw-status.info {\n      background: var(--sw-status-info-bg, #eff6ff);\n      color: var(--sw-status-info-color, #1e3a8a);\n      border: 1px solid var(--sw-status-info-border, #93c5fd);\n    }\n    .sw-status-meta {\n      font-size: 11px;\n      opacity: 0.7;\n    }\n    .sw-check-btn {\n      margin-left: auto;\n      --md-text-button-label-text-size: 11px;\n    }\n\n    /* 개발 정보 블록 */\n    .dev-info {\n      max-width: 480px;\n      margin: 18px auto;\n      padding: 12px 16px;\n      border: 1px dashed #cbd5e1;\n      border-radius: 6px;\n      text-align: left;\n      background: rgba(148, 163, 184, 0.06);\n    }\n    .dev-info-title {\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: #64748b;\n      margin-bottom: 8px;\n    }\n    .dev-info dl {\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: 4px 12px;\n      font-size: 12px;\n      margin: 0;\n    }\n    .dev-info dt {\n      color: #475569;\n      font-weight: 600;\n    }\n    .dev-info dd {\n      margin: 0;\n      color: #0f172a;\n      font-family: 'SF Mono', Consolas, monospace;\n      word-break: break-all;\n    }\n    .sw-status md-icon {\n      font-size: 18px;\n    }\n    .sw-status md-icon.spinning {\n      animation: sw-spin 1.4s linear infinite;\n    }\n    @keyframes sw-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  `\n\n  @state() private _swStatus: SwStatus = 'up-to-date'\n  @state() private _swLastChecked: Date | null = null\n  @state() private _swChecking: boolean = false\n\n  private _applicationMeta?: { icon?: string; title: string; description: string; copyright: string }\n  private _swRegistration: ServiceWorkerRegistration | null = null\n  private _swStateChangeListener: (() => void) | null = null\n  private _swUpdateFoundListener: (() => void) | null = null\n  private _observedSW: ServiceWorker | null = null\n\n  get context() {\n    return {\n      title: i18next.t('label.about-system')\n    }\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      const iconLink = document.querySelector('link[rel=\"application-icon\"]') as HTMLLinkElement\n      const titleMeta = document.querySelector('meta[name=\"application-name\"]') as HTMLMetaElement\n      const descriptionMeta = document.querySelector('meta[name=\"application-description\"]') as HTMLMetaElement\n      const copyrightMeta = document.querySelector('meta[name=\"application-copyright\"]') as HTMLMetaElement\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software',\n        copyright: copyrightMeta ? copyrightMeta.content : 'Copyright © hatiolab.com. All Rights Reserved.\" />'\n      }\n    }\n\n    return this._applicationMeta\n  }\n\n  render() {\n    const { icon, title, description, copyright } = this.applicationMeta\n\n    return html`\n      <img src=${icon!} alt=\"system logo\" />\n\n      <div>\n        <strong>${title}</strong>\n        <span class=\"description\">${description}</span>\n        <span class=\"version\"\n          ><ox-i18n msgid=\"field.version\"></ox-i18n> : ${ENV['APP-VERSION']}-${ENV['NODE-ENV']}</span\n        >\n      </div>\n\n      ${this._renderSwStatus()}\n\n      <div>\n        <span>${copyright}</span>\n\n        <span\n          >${title} is built on several\n          <a href=\"#\" @click=${(e: Event) => this.onClickOpenSourceLicense(e)}>open source software</a></span\n        >\n        <span>We are using the <a href=\"#\" @click=${(e: Event) => this.onClickLicenseInfo(e)}>license</a> as permitted. </span>\n      </div>\n\n      ${this._renderDevInfo()}\n\n      <div class=\"poweredBy\">\n        <span\n          >Powered by &trade;Things Factory <ox-i18n msgid=\"field.version\"></ox-i18n> ${ENV['SHELL-VERSION']}\n          <md-icon @click=${() => openHelp('about/things-factory')}>help</md-icon>\n        </span>\n      </div>\n    `\n  }\n\n  // ───────── Service Worker 상태 추적 ─────────\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._setupSwObserver()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this._teardownSwObserver()\n  }\n\n  /**\n   * SW registration 과 installing/waiting 상태를 관찰.\n   * `updatefound` 이벤트로 새 SW 감지 → statechange 로 전이 추적.\n   *\n   * 개발 미리보기: URL 에 `?sw-demo=downloading` 또는 `?sw-demo=ready` 를\n   * 붙이면 실제 SW 와 무관하게 해당 상태 배너를 고정 표시 (UI 검증용).\n   */\n  private async _setupSwObserver() {\n    // dev 미리보기 쇼트컷\n    const demo = new URLSearchParams(window.location.search).get('sw-demo')\n    if (demo === 'downloading' || demo === 'installing' || demo === 'ready' || demo === 'up-to-date') {\n      this._swStatus = demo as SwStatus\n      this._swLastChecked = new Date()\n      return\n    }\n\n    if (!('serviceWorker' in navigator)) {\n      this._swStatus = 'unsupported'\n      return\n    }\n    const reg = await navigator.serviceWorker.getRegistration()\n    if (!reg) {\n      this._swStatus = 'unregistered'\n      return\n    }\n    this._swRegistration = reg\n\n    // 이미 installing 중인 SW 가 있으면 즉시 관찰\n    if (reg.installing) this._bindWorker(reg.installing)\n    // 이미 waiting (설치 완료, 적용 대기) 이면 ready\n    if (reg.waiting) this._swStatus = 'ready'\n\n    // 새 SW 감지 핸들러\n    this._swUpdateFoundListener = () => {\n      if (reg.installing) this._bindWorker(reg.installing)\n    }\n    reg.addEventListener('updatefound', this._swUpdateFoundListener)\n\n    // 아직 새 SW 가 없으면 \"up-to-date\" 로 표시\n    if (!reg.installing && !reg.waiting) {\n      this._swStatus = 'up-to-date'\n    }\n\n    // 강제 update check — 페이지 열린 시점의 최신 여부 확인\n    await this._checkForUpdates()\n  }\n\n  /**\n   * 수동 또는 초기 update check. 네트워크로 SW 파일 재확인 후\n   * 새 버전이 있으면 `updatefound` 이벤트가 발생해 기존 리스너가 상태 전이.\n   */\n  private async _checkForUpdates() {\n    if (!this._swRegistration) return\n    this._swChecking = true\n    try {\n      await this._swRegistration.update()\n    } catch {\n      /* 네트워크 불가 등 — 조용히 무시 */\n    } finally {\n      this._swChecking = false\n      this._swLastChecked = new Date()\n    }\n  }\n\n  private _bindWorker(sw: ServiceWorker) {\n    this._observedSW = sw\n    this._updateStatusFromWorker(sw)\n\n    this._swStateChangeListener = () => this._updateStatusFromWorker(sw)\n    sw.addEventListener('statechange', this._swStateChangeListener)\n  }\n\n  private _updateStatusFromWorker(sw: ServiceWorker) {\n    switch (sw.state) {\n      case 'installing':\n        this._swStatus = 'downloading'\n        break\n      case 'installed':\n        // 기존 controller 가 있으면 새 버전 대기 상태 (업데이트), 없으면 최초 설치\n        this._swStatus = navigator.serviceWorker.controller ? 'ready' : 'up-to-date'\n        break\n      case 'activating':\n        this._swStatus = 'installing'\n        break\n      case 'activated':\n      case 'redundant':\n        this._swStatus = 'up-to-date'\n        break\n    }\n  }\n\n  private _teardownSwObserver() {\n    if (this._observedSW && this._swStateChangeListener) {\n      this._observedSW.removeEventListener('statechange', this._swStateChangeListener)\n    }\n    if (this._swRegistration && this._swUpdateFoundListener) {\n      this._swRegistration.removeEventListener('updatefound', this._swUpdateFoundListener)\n    }\n    this._observedSW = null\n    this._swRegistration = null\n    this._swStateChangeListener = null\n    this._swUpdateFoundListener = null\n  }\n\n  private _renderSwStatus() {\n    const checkedAgo = this._swLastChecked\n      ? this._formatAgo(this._swLastChecked)\n      : null\n\n    // 각 상태별 스타일/아이콘/메시지\n    const statusConfig: Record<\n      SwStatus,\n      { tone: string; icon: string; spin?: boolean; msg: string }\n    > = {\n      downloading: {\n        tone: 'downloading',\n        icon: 'cached',\n        spin: true,\n        msg: i18next.t('text.new version downloading')\n      },\n      installing: {\n        tone: 'downloading',\n        icon: 'cached',\n        spin: true,\n        msg: i18next.t('text.new version installing')\n      },\n      ready: {\n        tone: 'ready',\n        icon: 'system_update',\n        msg: i18next.t('text.new version ready to apply')\n      },\n      'up-to-date': {\n        tone: 'up-to-date',\n        icon: 'check_circle',\n        msg: i18next.t('text.you are on the latest version')\n      },\n      unregistered: {\n        tone: 'info',\n        icon: 'info',\n        msg: i18next.t('text.service worker not registered (dev mode)')\n      },\n      unsupported: {\n        tone: 'info',\n        icon: 'info',\n        msg: i18next.t('text.service worker not supported')\n      }\n    }\n    const s = statusConfig[this._swStatus]\n\n    return html`\n      <div class=\"sw-status ${s.tone}\">\n        <md-icon class=${s.spin ? 'spinning' : ''}>${s.icon}</md-icon>\n        <span>${s.msg}</span>\n        ${checkedAgo\n          ? html`<span class=\"sw-status-meta\">· ${i18next.t('text.checked')} ${checkedAgo}</span>`\n          : ''}\n        ${this._swStatus === 'up-to-date' || this._swStatus === 'unregistered'\n          ? html`\n              <md-text-button\n                class=\"sw-check-btn\"\n                ?disabled=${this._swChecking}\n                @click=${() => this._checkForUpdates()}\n              >\n                <md-icon>refresh</md-icon>\n                ${String(i18next.t('label.check now'))}\n              </md-text-button>\n            `\n          : ''}\n      </div>\n    `\n  }\n\n  /**\n   * \"5초 전\" / \"2분 전\" 같은 상대 시간 문자열.\n   */\n  private _formatAgo(d: Date): string {\n    const sec = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000))\n    if (sec < 60) return `${sec}${i18next.t('text.seconds ago suffix')}`\n    const min = Math.floor(sec / 60)\n    if (min < 60) return `${min}${i18next.t('text.minutes ago suffix')}`\n    const hr = Math.floor(min / 60)\n    return `${hr}${i18next.t('text.hours ago suffix')}`\n  }\n\n  /**\n   * 개발 정보 (NODE_ENV, SHELL-VERSION 등) — 개발 모드에서만 노출.\n   */\n  private _renderDevInfo() {\n    const nodeEnv = (ENV['NODE-ENV'] || '').toString()\n    if (nodeEnv !== 'development' && !new URLSearchParams(location.search).has('sw-demo')) {\n      return ''\n    }\n    return html`\n      <div class=\"dev-info\">\n        <div class=\"dev-info-title\">${i18next.t('text.development info')}</div>\n        <dl>\n          <dt>NODE_ENV</dt><dd>${nodeEnv || '(unset)'}</dd>\n          <dt>APP-VERSION</dt><dd>${ENV['APP-VERSION']}</dd>\n          <dt>SHELL-VERSION</dt><dd>${ENV['SHELL-VERSION']}</dd>\n          <dt>SHELL-LICENSE</dt><dd>${ENV['SHELL-LICENSE']}</dd>\n          <dt>Service Worker</dt><dd>${this._swStatus}</dd>\n          <dt>User Agent</dt><dd>${navigator.userAgent}</dd>\n        </dl>\n      </div>\n    `\n  }\n\n  onClickOpenSourceLicense(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    openPopup(html` <opensource-license></opensource-license> `, {\n      backdrop: true,\n      size: 'large',\n      title: 'Open Source Licenses'\n    })\n  }\n\n  onClickLicenseInfo(e: Event) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    openPopup(html` <license-info></license-info> `, {\n      backdrop: true,\n      size: 'large',\n      title: 'License Information'\n    })\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -1 +1 @@
-export default function route(page: any): any;
+export default function route(page: string): "system" | undefined;

package/dist-client/route.js.map

@@ -1 +1 @@
-{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAI;IAChC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,QAAQ;YACX,MAAM,CAAC,qBAAqB,CAAC,CAAA;YAC7B,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page) {\n  switch (page) {\n    case 'system':\n      import('./pages/system-info')\n      return page\n  }\n}\n"]}
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,QAAQ;YACX,MAAM,CAAC,qBAAqB,CAAC,CAAA;YAC7B,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'system':\n      import('./pages/system-info')\n      return page\n  }\n}\n"]}