logster 2.20.0 → 2.21.0

data/assets/stylesheets/client-app.css

@@ -1 +1 @@
-body{font-family:Arial,"Liberation Sans","DejaVu Sans",sans-serif;font-size:12px}body.mobile,body.mobile .message{font-size:14px}pre{font-family:"Roboto Mono",Consolas,Monaco,Ubuntu Mono,monospace}table.env-table tbody tr td{border-top:none;line-height:18px;height:18px;vertical-align:top}table.env-table,table.env-table table{border-spacing:0;border-collapse:collapse}table.env-table td{padding-right:5px}tbody tr{width:98%}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:40dvh auto}.message-row,.message-row-wrapper{display:flex;width:inherit}.message-row{font-family:Roboto}.message-row .protected,.message-row .severity{text-align:center;width:25px;flex-grow:0;flex-shrink:0;font-size:12px}.message-row div{border-top:.5px #e9e9e9 solid;padding-top:1px;padding-bottom:1px;line-height:25px}.message-row .count{width:30px;flex-grow:0;flex-shrink:0;padding-right:4px;box-sizing:border-box;font-size:11px;font-weight:700;text-align:right}.message-row .message-body{flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.message-row .time{flex-grow:0;flex-shrink:0;color:#999;vertical-align:top;font-size:12px;padding-right:8px}.action-panel .search,.action-panel .svg-inline--fa,.pattern-wrapper .pattern-input,.pattern-wrapper .shrink,.search-clear-all .btn.clear span,.search-clear-all .clear,input,label span{vertical-align:middle}.message-row:hover{background-color:#f8f8f8;cursor:pointer}.message-row.selected{background-color:#dfdfdf}.svg-inline--fa.fatal{color:#e00}.svg-inline--fa.error{color:#900}.svg-inline--fa.warning{color:#feb800}.debug{color:#777}.btn,.tabs a{text-decoration:none;color:#333}.action-panel .search{border:1px solid #ddd;padding:3px;box-sizing:border-box}#log-table .show-more{text-align:center;height:30px;line-height:30px;text-decoration:none;background-color:#ddd;cursor:pointer;margin-top:8px}#overlay,.divider{cursor:row-resize}#bottom-panel{position:fixed;bottom:0;left:0;right:0;height:300px;background-color:#f1f1f1;padding:0 8px 8px;z-index:2}#bottom-panel.full{position:static;background-color:inherit;height:90%}#bottom-panel.full>div{padding-bottom:40px}#bottom-panel.full .tabs{display:none}#bottom-panel.full .message-info{position:static}#bottom-panel.full .message-info .content{display:block;position:static}#bottom-panel.full .save,#bottom-panel.full .share{bottom:10px}#bottom-panel.full button.delete{display:none}#bottom-panel.full .message-actions button{margin-top:8px}@media (max-width:382px){#bottom-panel.full .message-actions{height:73px}}@media (min-width:383px){#bottom-panel.full .message-actions{height:40px}}#bottom-panel.full .message-actions{position:fixed;width:100%;left:0;bottom:0;background-color:#eee;border-top:1px solid #dfdfdf;padding-left:10px}.divider,.tabs{border-top:1px solid #ddd}.message-actions{position:absolute;bottom:5px;right:0;margin-right:10px}.message-actions button{margin-left:5px}.divider{position:fixed;bottom:310px;left:0;right:0;height:15px;border-bottom:1px solid #ddd;background-color:#fafafa}.divider div{margin:auto;width:24px;height:1px;background-color:#ccc;position:relative}#overlay,#top-menu,#top-panel{position:fixed}.divider .line-1{top:5px}.divider .line-2,.tabs a{top:6px}.divider .line-3{top:7px}#top-panel{top:0;left:0;right:0;bottom:320px;overflow:auto}#top-panel.with-top-menu{top:35px}#top-menu{z-index:900;left:0;top:0;width:100%}.action-panel,.message-info,.nav-controls.group-nav{position:absolute;left:0;right:0}#back-to-site-panel{padding:10px;background-color:#f1f1f1;height:15px}.message-info{border-bottom:1px solid #ddd;top:0}#bottom-panel.group-view .message-info{top:43px}.nav-controls.group-nav{border-bottom:1px solid #ddd}.action-panel{bottom:0;font-weight:700}.action-panel input{margin:0}.severity-filters label{margin-right:10px}.search-clear-all .clear{float:right}#log-table{margin:auto;width:99%}.btn span{display:inline}.hidden{display:none}.message-info .env-table,.message-info pre{position:relative;margin:5px 10px 10px}#overlay{z-index:99999;top:0;bottom:0;left:0;right:0;opacity:0}.message-info .content,.tabs{position:absolute;left:0;right:0}.message-info .content{top:0;bottom:35px;overflow:auto;display:none}.message-info .content.active{display:block}.tabs{bottom:13px;list-style-type:none;margin:0 0 5px;padding:0 0 0 10px}.tabs a,.tabs li{position:relative}.tabs li{float:left;padding-right:5px;margin:0}.tabs a{border:1px solid #ddd;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:6px;background-color:#e1e1e1}.tabs a.active{border-top:1px solid #f1f1f1;background-color:#f1f1f1}.btn{display:inline-block;margin:0;padding:5px 8px;font-size:1em;line-height:0;text-align:center;cursor:pointer;transition:all .25s;background-color:#ddd;border:none;font-weight:400}.btn:hover{color:#000;background-color:#ccc}.btn .svg-inline--fa{margin-right:7px}.btn:active{text-shadow:none}.btn.danger:hover{background-color:#c63c1b;color:#eee}.btn.ok{background-color:#3781dc;color:#fff}.btn.ok:hover{background-color:#286dc2;color:#fff}.search-clear-all .btn.clear,.search-clear-all .search{height:100%}.search-clear-all .btn.clear,.search-clear-all .search,.severity-filters label{align-self:center}.search-clear-all .footer-btns .settings{height:100%;box-sizing:border-box;display:inline-flex;align-items:center}.search-clear-all{display:flex;justify-content:space-between}.search-clear-all .search{min-width:0;flex-shrink:2}.footer-btns{display:flex;gap:.7em}@media (min-width:871px){.search-clear-all,.severity-filters{height:100%}.more-wrapping,.severity-filters{display:flex}.severity-filters{float:left}.action-panel{padding:10px;box-sizing:border-box;height:45px}.message-info{bottom:45px}}@media (max-width:870px){.severity-filters{padding:10px}.search-clear-all{padding:0 10px 10px}.action-panel{height:69px}.message-info{bottom:69px}}@media (max-width:430px){.severity-filters{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.more-wrapping:after,.more-wrapping:before{content:"";position:absolute;height:18px}.more-wrapping:before{width:15px;margin-left:-10px;background:linear-gradient(to right,#f1f1f1 0,rgba(241,241,241,.001) 100%)}.more-wrapping:after{right:0;width:23px;background:linear-gradient(to left,#f1f1f1 0,rgba(241,241,241,.001) 100%)}}.btn.no-text .svg-inline--fa{margin:0}.btn[disabled]{opacity:.5}.actions-menu{position:absolute;background:#fafafa;display:inline-flex;flex-direction:column;bottom:27px;right:45px;width:115px;padding:5px 5px 0;box-shadow:0 4px 14px rgba(0,0,0,.15);z-index:3}.actions-menu button{margin:0 0 5px;height:27px}.nav-controls{padding:10px}#bottom-panel:not(.full) .nav-controls.env-nav{position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:0;background:#f1f1f1;z-index:1;border-bottom:1px solid #ddd}.current-number{margin:0 7px}.expand-list,.recent-link{text-decoration:underline;color:#00f;cursor:pointer}.settings-page{max-width:1110px;margin-right:auto;margin-left:auto;font-size:15px;padding:0 10px 70px}.settings-header{display:flex;align-items:center;margin-bottom:5px}.settings-header .header-title{flex-grow:1}.settings-header .header-logo{width:50px;height:50px}.settings-section{padding-top:15px}.settings-section .section-title{margin-top:0}.settings-section .subsection-title{margin-bottom:10px}.settings-section .tip{font-style:italic;font-size:13px;color:grey}.settings-section .pattern-wrapper{margin-top:10px;font-size:16px;display:flex;height:33px}.settings-section .api-error{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace;margin-top:5px;color:red}.pattern-wrapper .pattern-input{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace;width:600px;font-size:inherit;padding:5px 0;height:100%;box-sizing:border-box;flex-grow:1;flex-shrink:1}.retro-checkbox .checkbox{margin:0}.retro-checkbox{margin-top:7px}.btn.new-pattern{height:100%;line-height:18px}.pattern-wrapper .shrink{height:100%;width:40px;text-align:center;box-sizing:border-box;flex-grow:0;flex-shrink:0;margin-left:10px}.svg-inline--fa{opacity:.7}.pattern-wrapper .shrink.reset{background:unset;width:unset;padding:0;margin-left:8px}.grouping-patterns button.new-pattern{margin-top:10px}.backtrace-line .line-link{color:#9e9e9e;margin-left:3px;text-decoration:none;white-space:normal}@media (prefers-color-scheme:dark){#bottom-panel,body{background:#181818}.btn,.tabs a,body{color:#cecece}.message-row div{border-top-color:#404040}.message-row:hover{background:#262626}.message-row.selected{background:#303030}#log-table .show-more,.divider{background:#262626}.divider div{background:#707070}.divider,.tabs{border-top-color:#555}#bottom-panel:not(.full) .nav-controls.env-nav,.divider,.message-info,.nav-controls.group-nav{border-bottom-color:#555}.action-panel .search{background:#262626;border-color:#404040}.tabs a{background:#323232;border-color:#404040}.tabs a.active{background:#555;border-color:#707070;color:#f4f4f4}.btn{background:#323232}#bottom-panel.full .message-actions{background:#181818;border-color:#555}#bottom-panel:not(.full) .nav-controls.env-nav{background:#181818}.expand-list,.recent-link{color:#44f}#back-to-site-panel{background-color:#181818}}
+body{font-family:Arial,"Liberation Sans","DejaVu Sans",sans-serif;font-size:12px}body.mobile,body.mobile .message{font-size:14px}pre{font-family:"Roboto Mono",Consolas,Monaco,Ubuntu Mono,monospace}table.env-table tbody tr td{border-top:none;line-height:18px;height:18px;vertical-align:top}table.env-table,table.env-table table{border-spacing:0;border-collapse:collapse}table.env-table td{padding-right:5px}tbody tr{width:98%}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:40dvh auto}.message-row,.message-row-wrapper{display:flex;width:inherit}.message-row{font-family:Roboto}.message-row .protected,.message-row .severity{text-align:center;width:25px;flex-grow:0;flex-shrink:0;font-size:12px}.message-row div{border-top:.5px #e9e9e9 solid;padding-top:1px;padding-bottom:1px;line-height:25px}.message-row .count{width:30px;flex-grow:0;flex-shrink:0;padding-right:4px;box-sizing:border-box;font-size:11px;font-weight:700;text-align:right}.message-row .message-body{flex-grow:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.message-row .time{flex-grow:0;flex-shrink:0;color:#999;vertical-align:top;font-size:12px;padding-right:8px}.action-panel .search,.action-panel .svg-inline--fa,.pattern-wrapper .pattern-input,.pattern-wrapper .shrink,.search-clear-all .btn.clear span,.search-clear-all .clear,input,label span{vertical-align:middle}.message-row:hover{background-color:#f8f8f8;cursor:pointer}.message-row.selected{background-color:#dfdfdf}.svg-inline--fa.fatal{color:#e00}.svg-inline--fa.error{color:#900}.svg-inline--fa.warning{color:#feb800}.debug{color:#777}.action-panel .search{border:1px solid #ddd;padding:3px;box-sizing:border-box}#log-table .show-more{text-align:center;height:30px;line-height:30px;text-decoration:none;background-color:#ddd;cursor:pointer;margin-top:8px}#bottom-panel{position:fixed;bottom:0;left:0;right:0;height:300px;background-color:#f1f1f1;padding:0 8px 8px;z-index:2}#bottom-panel.full{position:static;background-color:inherit;height:90%}#bottom-panel.full>div{padding-bottom:40px}#bottom-panel.full .tabs{display:none}#bottom-panel.full .message-info{position:static}#bottom-panel.full .message-info .content{display:block;position:static}#bottom-panel.full .save,#bottom-panel.full .share{bottom:10px}#bottom-panel.full button.delete{display:none}#bottom-panel.full .message-actions button{margin-top:8px}@media (max-width:382px){#bottom-panel.full .message-actions{height:73px}}@media (min-width:383px){#bottom-panel.full .message-actions{height:40px}}#bottom-panel.full .message-actions{position:fixed;width:100%;left:0;bottom:0;background-color:#eee;border-top:1px solid #dfdfdf;padding-left:10px}.divider,.tabs{border-top:1px solid #ddd}.message-actions{position:absolute;bottom:5px;right:0;margin-right:10px}.message-actions button{margin-left:5px}.divider{position:fixed;bottom:310px;left:0;right:0;height:15px;border-bottom:1px solid #ddd;background-color:#fafafa;cursor:row-resize}.divider div{margin:auto;width:24px;height:1px;background-color:#ccc;position:relative}.divider .line-1{top:5px}.divider .line-2{top:6px}.divider .line-3{top:7px}#top-panel{position:fixed;top:0;left:0;right:0;bottom:320px;overflow:auto}#top-panel.with-top-menu{top:35px}#top-menu{position:fixed;z-index:900;left:0;top:0;width:100%}.action-panel,.message-info,.nav-controls.group-nav{position:absolute;right:0;left:0}#back-to-site-panel{padding:10px;background-color:#f1f1f1;height:15px}.message-info{border-bottom:1px solid #ddd;top:0}#bottom-panel.group-view .message-info{top:43px}.nav-controls.group-nav{border-bottom:1px solid #ddd}.action-panel{bottom:0;font-weight:700}.action-panel input{margin:0}.severity-filters label{margin-right:10px}.search-clear-all .clear{float:right}#log-table{margin:auto;width:99%}.btn span{display:inline}.hidden{display:none}.message-info .env-table,.message-info pre{position:relative;margin:5px 10px 10px}#overlay{position:fixed;z-index:99999;top:0;bottom:0;left:0;right:0;cursor:row-resize;opacity:0}.message-info .content{position:absolute;top:0;bottom:35px;left:0;right:0;overflow:auto;display:none}.message-info .content.active{display:block}.tabs{position:absolute;bottom:13px;left:0;right:0;list-style-type:none;margin:0 0 5px;padding:0 0 0 10px}.tabs a,.tabs li{position:relative}.tabs li{float:left;padding-right:5px;margin:0}.tabs a{top:6px;text-decoration:none;color:#333;border:1px solid #ddd;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:6px;background-color:#e1e1e1}.tabs a.active{border-top:1px solid #f1f1f1;background-color:#f1f1f1}.btn{display:inline-block;margin:0;padding:5px 8px;font-size:1em;line-height:0;text-align:center;cursor:pointer;transition:all .25s;background-color:#ddd;text-decoration:none;border:none;color:#333;font-weight:400}.btn:hover{color:#000;background-color:#ccc}.btn .svg-inline--fa{margin-right:7px}.btn:active{text-shadow:none}.btn.danger:hover{background-color:#c63c1b;color:#eee}.btn.ok{background-color:#3781dc;color:#fff}.btn.ok:hover{background-color:#286dc2;color:#fff}.search-clear-all .btn.clear,.search-clear-all .search{height:100%}.search-clear-all .btn.clear,.search-clear-all .search,.severity-filters label{align-self:center}.search-clear-all .footer-btns .settings{height:100%;box-sizing:border-box;display:inline-flex;align-items:center}.search-clear-all{display:flex;justify-content:space-between}.search-clear-all .search{min-width:0;flex-shrink:2}.footer-btns{display:flex;gap:.7em}@media (min-width:871px){.search-clear-all,.severity-filters{height:100%}.more-wrapping,.severity-filters{display:flex}.severity-filters{float:left}.action-panel{padding:10px;box-sizing:border-box;height:45px}.message-info{bottom:45px}}@media (max-width:870px){.severity-filters{padding:10px}.search-clear-all{padding:0 10px 10px}.action-panel{height:69px}.message-info{bottom:69px}}@media (max-width:430px){.severity-filters{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.more-wrapping:after,.more-wrapping:before{content:"";position:absolute;height:18px}.more-wrapping:before{width:15px;margin-left:-10px;background:linear-gradient(to right,#f1f1f1 0,rgba(241,241,241,.001) 100%)}.more-wrapping:after{right:0;width:23px;background:linear-gradient(to left,#f1f1f1 0,rgba(241,241,241,.001) 100%)}}.btn.no-text .svg-inline--fa,.retro-checkbox .checkbox{margin:0}.btn[disabled]{opacity:.5}.actions-menu{position:absolute;background:#fafafa;display:inline-flex;flex-direction:column;bottom:27px;right:45px;width:115px;padding:5px 5px 0;box-shadow:0 4px 14px rgba(0,0,0,.15);z-index:3}.actions-menu button{margin:0 0 5px;height:27px}.nav-controls{padding:10px}#bottom-panel:not(.full) .nav-controls.env-nav{position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:0;background:#f1f1f1;z-index:1;border-bottom:1px solid #ddd}.current-number{margin:0 7px}.expand-list,.recent-link{text-decoration:underline;color:#00f;cursor:pointer}.settings-page{max-width:1110px;margin-right:auto;margin-left:auto;font-size:15px;padding:0 10px 70px}.settings-header{display:flex;align-items:center;margin-bottom:5px}.settings-header .header-title{flex-grow:1}.settings-header .header-logo{width:50px;height:50px}.settings-section{padding-top:15px}.settings-section .section-title{margin-top:0}.settings-section .subsection-title{margin-bottom:10px}.settings-section .tip{font-style:italic;font-size:13px;color:grey}.settings-section .pattern-wrapper{margin-top:10px;font-size:16px;display:flex;height:33px}.settings-section .api-error{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace;margin-top:5px;color:red}.pattern-wrapper .pattern-input{font-family:Consolas,"Roboto Mono",Monaco,Ubuntu Mono,monospace;width:600px;font-size:inherit;padding:5px 0;height:100%;box-sizing:border-box;flex-grow:1;flex-shrink:1}.retro-checkbox{margin-top:7px}.btn.new-pattern{height:100%;line-height:18px}.pattern-wrapper .shrink{height:100%;width:40px;text-align:center;box-sizing:border-box;flex-grow:0;flex-shrink:0;margin-left:10px}.svg-inline--fa{opacity:.7}.pattern-wrapper .shrink.reset{background:unset;width:unset;padding:0;margin-left:8px}.grouping-patterns button.new-pattern{margin-top:10px}.grouping-pattern-dialog-overlay{position:fixed;z-index:100000;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.grouping-pattern-dialog{background:#fff;border-radius:4px;padding:20px;min-width:600px;box-shadow:0 4px 16px rgba(0,0,0,.3)}.grouping-pattern-dialog h3{margin:0 0 8px;font-size:1em;font-weight:700}.grouping-pattern-dialog p{margin:0 0 10px;font-size:.9em;color:#555}.grouping-pattern-input{width:100%;box-sizing:border-box;padding:8px;font-size:1.1em;font-family:monospace;border:1px solid #ccc;border-radius:3px;margin-bottom:14px}.grouping-pattern-dialog-buttons{display:flex;justify-content:flex-end;gap:8px}.grouping-pattern-dialog .btn{padding:12px}.backtrace-line .line-link{color:#9e9e9e;margin-left:3px;text-decoration:none;white-space:normal}@media (prefers-color-scheme:dark){#bottom-panel,body{background:#181818}.btn,.tabs a,body{color:#cecece}.message-row div{border-top-color:#404040}.message-row:hover{background:#262626}.message-row.selected{background:#303030}#log-table .show-more,.divider{background:#262626}.divider div{background:#707070}.divider,.tabs{border-top-color:#555}#bottom-panel:not(.full) .nav-controls.env-nav,.divider,.message-info,.nav-controls.group-nav{border-bottom-color:#555}.action-panel .search{background:#262626;border-color:#404040}.tabs a{background:#323232;border-color:#404040}.tabs a.active{background:#555;border-color:#707070;color:#f4f4f4}.btn{background:#323232}#bottom-panel.full .message-actions{background:#181818;border-color:#555}#bottom-panel:not(.full) .nav-controls.env-nav{background:#181818}.expand-list,.recent-link{color:#44f}#back-to-site-panel{background-color:#181818}.grouping-pattern-dialog{background:#262626;color:#cecece}.grouping-pattern-dialog p{color:#aaa}.grouping-pattern-input{background:#181818;color:#cecece;border-color:#555}}

data/client-app/app/controllers/index.js

@@ -15,6 +15,8 @@ export default class IndexController extends Controller {
   @tracked loading = false;
   @tracked buildingGroupingPattern = false;
   @tracked rowMessagesForGroupingPattern = [];
+  @tracked showGroupingPatternDialog = false;
+  @tracked groupingPatternValue = "";
 
   showDebug = getLocalStorage("showDebug", false);
   showInfo = getLocalStorage("showInfo", false);
@@ -215,32 +217,49 @@ export default class IndexController extends Controller {
   }
 
   @action
-  async createGroupingPatternFromSelectedRows() {
+  createGroupingPatternFromSelectedRows() {
     let match = this.findLongestMatchingPrefix(
       this.rowMessagesForGroupingPattern
     );
     match = this.escapeRegExp(match);
 
-    if (
-      match.trim().length &&
-      // eslint-disable-next-line no-alert
-      confirm(
-        `Do you want to create the grouping pattern\n\n"${match}"\n\nCancel = No, OK = Create`
-      )
-    ) {
-      await ajax("/patterns/grouping.json", {
-        method: "POST",
-        data: {
-          pattern: match,
-        },
-      });
-      this.rowMessagesForGroupingPattern = [];
-      this.buildingGroupingPattern = false;
-      this.model.reload();
-    } else if (!match.trim().length) {
+    if (!match.trim().length) {
       // eslint-disable-next-line no-alert
       alert("Can not create a grouping pattern with the given rows");
+      return;
     }
+
+    this.groupingPatternValue = match;
+    this.showGroupingPatternDialog = true;
+  }
+
+  @action
+  updateGroupingPatternValue(event) {
+    this.groupingPatternValue = event.target.value;
+  }
+
+  @action
+  async confirmGroupingPattern() {
+    const pattern = this.groupingPatternValue.trim();
+    if (!pattern.length) {
+      return;
+    }
+
+    await ajax("/patterns/grouping.json", {
+      method: "POST",
+      data: { pattern },
+    });
+    this.showGroupingPatternDialog = false;
+    this.groupingPatternValue = "";
+    this.rowMessagesForGroupingPattern = [];
+    this.buildingGroupingPattern = false;
+    this.model.reload();
+  }
+
+  @action
+  cancelGroupingPattern() {
+    this.showGroupingPatternDialog = false;
+    this.groupingPatternValue = "";
   }
 
   findLongestMatchingPrefix(strings) {

data/client-app/app/styles/app.css

@@ -731,6 +731,60 @@ label span {
   margin-top: 10px;
 }
 
+.grouping-pattern-dialog-overlay {
+  position: fixed;
+  z-index: 100000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.grouping-pattern-dialog {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  min-width: 600px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.grouping-pattern-dialog h3 {
+  margin: 0 0 8px 0;
+  font-size: 1em;
+  font-weight: bold;
+}
+
+.grouping-pattern-dialog p {
+  margin: 0 0 10px 0;
+  font-size: 0.9em;
+  color: #555;
+}
+
+.grouping-pattern-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  font-size: 1.1em;
+  font-family: monospace;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 14px;
+}
+
+.grouping-pattern-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.grouping-pattern-dialog .btn {
+  padding: 12px;
+}
+
 .backtrace-line .line-link {
   color: #9e9e9e;
   margin-left: 3px;
@@ -826,4 +880,19 @@ label span {
   #back-to-site-panel {
     background-color: #181818;
   }
+
+  .grouping-pattern-dialog {
+    background: #262626;
+    color: #cecece;
+  }
+
+  .grouping-pattern-dialog p {
+    color: #aaa;
+  }
+
+  .grouping-pattern-input {
+    background: #181818;
+    color: #cecece;
+    border-color: #555;
+  }
 }

data/client-app/app/templates/index.hbs

@@ -162,4 +162,31 @@
   </div>
 </div>
 
+{{#if this.showGroupingPatternDialog}}
+  <div class="grouping-pattern-dialog-overlay">
+    <div class="grouping-pattern-dialog">
+      <h3>Create Grouping Pattern</h3>
+      <p>Edit the pattern below before creating:</p>
+      <input
+        type="text"
+        class="grouping-pattern-input"
+        value={{this.groupingPatternValue}}
+        {{on "input" this.updateGroupingPatternValue}}
+      />
+      <div class="grouping-pattern-dialog-buttons">
+        <button
+          class="btn danger"
+          type="button"
+          {{on "click" this.cancelGroupingPattern}}
+        >Cancel</button>
+        <button
+          class="btn"
+          type="button"
+          {{on "click" this.confirmGroupingPattern}}
+        >Create</button>
+      </div>
+    </div>
+  </div>
+{{/if}}
+
 <PanelResizer />

data/client-app/ember-cli-build.js

@@ -1,5 +1,11 @@
 "use strict";
 
+// clean-css v3 uses util.isRegExp which was removed in Node.js 22+
+const util = require("util");
+if (!util.isRegExp) {
+  util.isRegExp = (value) => value instanceof RegExp;
+}
+
 const EmberApp = require("ember-cli/lib/broccoli/ember-app");
 
 module.exports = function (defaults) {

data/client-app/package.json

@@ -58,7 +58,7 @@
     "qunit": "^2.17.2",
     "qunit-dom": "^2.0.0",
     "sinon": "^15.0.1",
-    "webpack": "^5.76.0"
+    "webpack": "^5.94.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"