openclaw-observability 2026.3.21 → 2026.3.23

package/dist/web/ui.js

@@ -113,6 +113,9 @@ a:hover{text-decoration:underline}
 .theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--muted);cursor:pointer;transition:all var(--duration-fast)}
 .theme-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--bg-hover)}
 .theme-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
+.icon-refresh-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--muted);cursor:pointer;transition:all var(--duration-fast);padding:0;flex-shrink:0}
+.icon-refresh-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--bg-hover)}
+.icon-refresh-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 
 /* ---- Content ---- */
 .content{flex:1;padding:16px 20px 32px;min-height:0;overflow-y:auto}
@@ -132,6 +135,59 @@ a:hover{text-decoration:underline}
 .filter-bar .filter-sep{width:1px;height:24px;background:var(--border);flex-shrink:0}
 .filter-bar .btn-clear{background:none;border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 12px;font-size:12px;color:var(--muted);cursor:pointer;transition:all var(--duration-fast)}
 .filter-bar .btn-clear:hover{color:var(--text);border-color:var(--border-strong);background:var(--bg-hover)}
+.sec-runtime{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px;box-shadow:inset 0 1px 0 var(--card-highlight)}
+.sec-runtime-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
+.sec-runtime-title{font-size:14px;font-weight:700;color:var(--text-strong);letter-spacing:-.02em}
+.sec-runtime-sub{font-size:12px;color:var(--muted)}
+.sec-runtime-summary{font-size:11px;color:var(--muted);background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:3px 10px}
+.sec-runtime-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(300px,1fr);gap:12px;align-items:start}
+.sec-rule-list{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);overflow:hidden}
+.sec-rule-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--duration-fast),border-left-color var(--duration-fast);border-left:3px solid transparent}
+.sec-rule-item:last-child{border-bottom:none}
+.sec-rule-item:hover{background:var(--bg-hover)}
+.sec-rule-item.active{background:var(--accent-subtle);border-left-color:var(--accent)}
+.sec-rule-copy{min-width:0;flex:1}
+.sec-rule-name{font-size:13px;font-weight:600;color:var(--text-strong)}
+.sec-rule-brief{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sec-state-pill{flex-shrink:0;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em}
+.sec-state-pill.on{color:var(--ok);background:var(--ok-subtle);border:1px solid rgba(34,197,94,.25)}
+.sec-state-pill.off{color:var(--danger);background:var(--danger-subtle);border:1px solid rgba(239,68,68,.25)}
+.sec-switch{position:relative;display:inline-flex;align-items:center;width:38px;height:22px;border:none;background:transparent;padding:0;cursor:pointer;flex-shrink:0}
+.sec-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--muted-strong);opacity:.55;transition:background var(--duration-fast),opacity var(--duration-fast)}
+.sec-switch-thumb{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--duration-fast)}
+.sec-switch.on .sec-switch-track{background:var(--ok);opacity:.92}
+.sec-switch.on .sec-switch-thumb{transform:translateX(16px)}
+.sec-rule-detail{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);padding:14px 14px 12px;max-height:340px;overflow:auto}
+.sec-rule-detail-title{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+.sec-rule-detail-title h4{font-size:14px;font-weight:700;color:var(--text-strong);letter-spacing:-.02em}
+.sec-rule-detail p{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:10px}
+.sec-rule-detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
+.sec-rule-explain{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);padding:10px 10px 8px;margin-bottom:10px}
+.sec-rule-explain-text{font-size:12px;color:var(--text);line-height:1.6}
+.sec-meta-chip{font-size:10px;padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--secondary);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.sec-meta-chip.level-critical{color:var(--danger);border-color:rgba(239,68,68,.35);background:var(--danger-subtle)}
+.sec-meta-chip.level-high{color:#ea580c;border-color:rgba(234,88,12,.35);background:rgba(234,88,12,.1)}
+.sec-meta-chip.level-medium{color:var(--warn);border-color:rgba(245,158,11,.35);background:var(--warn-subtle)}
+.sec-meta-chip.level-low{color:var(--ok);border-color:rgba(34,197,94,.35);background:var(--ok-subtle)}
+.sec-rule-detail-list{border-top:1px dashed var(--border);padding-top:8px}
+.sec-rule-detail-list-title{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
+.sec-rule-detail-list-item{font-size:12px;color:var(--text);padding:2px 0}
+.sec-custom-editor{margin-top:10px;border-top:1px dashed var(--border);padding-top:10px}
+.sec-custom-form{display:grid;grid-template-columns:1fr 1.8fr auto;gap:8px;align-items:end}
+.sec-custom-field{display:flex;flex-direction:column;gap:4px;min-width:0}
+.sec-custom-field-label{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
+.sec-custom-form input,.sec-custom-form select{height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);padding:0 9px;font-size:12px;outline:none}
+.sec-custom-form input:focus,.sec-custom-form select:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}
+.sec-custom-form button{height:30px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-foreground);padding:0 12px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.01em}
+.sec-custom-form button:hover{filter:brightness(1.06)}
+.sec-custom-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;padding-right:2px}
+.sec-custom-item{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 8px;background:var(--card)}
+.sec-custom-item-main{min-width:0;flex:1}
+.sec-custom-item-name{font-size:12px;font-weight:600;color:var(--text-strong)}
+.sec-custom-item-pattern{font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sec-custom-item-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
+.sec-custom-item-del{height:22px;min-width:56px;border:1px solid rgba(239,68,68,.35);border-radius:999px;background:var(--danger-subtle);color:var(--danger);padding:0 10px;font-size:11px;line-height:1;cursor:pointer;font-weight:700}
+.sec-custom-item-del:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.55)}
 /* Time range dropdown */
 .time-dropdown{position:relative}
 .time-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:7px 12px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;transition:all var(--duration-fast)}
@@ -174,16 +230,27 @@ a:hover{text-decoration:underline}
 
 /* ==================== Trace view (split pane) ==================== */
 .content--trace{padding:0!important;overflow:hidden!important;flex:1!important;min-height:0!important;display:flex!important;flex-direction:column!important}
-.content--trace .content-inner{max-width:1280px;width:100%;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.content--trace .content-inner{max-width:none;width:100%;margin:0;flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}
 
-.trace-top{flex:1;min-height:120px;overflow-y:scroll;scrollbar-gutter:stable}
-.trace-header{background:var(--card);padding:16px 24px;border-bottom:1px solid var(--border);box-shadow:inset 0 1px 0 var(--card-highlight)}
+.trace-top{flex:1;min-width:0;min-height:120px;overflow-y:scroll;scrollbar-gutter:stable;position:relative}
+.trace-header{position:sticky;top:0;z-index:12;background:var(--card);padding:16px 24px;border-bottom:1px solid var(--border);box-shadow:inset 0 1px 0 var(--card-highlight),0 6px 18px rgba(0,0,0,.08)}
+.trace-header-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .trace-back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-size:13px;margin-bottom:10px;font-weight:500}
+.trace-header-top .trace-back{margin-bottom:0}
 .trace-back:hover{text-decoration:underline}
 .trace-title{font-size:16px;font-weight:700;color:var(--text-strong);margin-bottom:4px;word-break:break-all;letter-spacing:-.02em}
 .trace-meta{display:flex;gap:16px;flex-wrap:wrap}
 .trace-meta-item{font-size:13px;color:var(--muted)}
 .trace-meta-item b{color:var(--text-strong);font-weight:600}
+.trace-search-bar{margin-top:14px;margin-bottom:0}
+.trace-search-bar input[type=text]{min-width:280px}
+.trace-search-stats{font-size:12px;color:var(--muted);white-space:nowrap}
+.trace-search-nav{display:flex;align-items:center;gap:6px}
+.trace-search-nav button{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text);cursor:pointer;font-size:12px;transition:all var(--duration-fast)}
+.trace-search-nav .icon-refresh-btn{padding:0;width:32px;min-width:32px}
+.trace-search-nav button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}
+.trace-search-nav button:disabled{opacity:.45;cursor:default}
+.trace-search-empty{margin:10px 20px 0;padding:10px 14px;background:var(--warn-subtle);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-md);font-size:12px;color:var(--warn)}
 
 /* ---- Waterfall ---- */
 .waterfall{background:var(--card);border:1px solid var(--border);margin:16px 20px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 1px 0 var(--card-highlight)}
@@ -191,7 +258,7 @@ a:hover{text-decoration:underline}
 .wf-row{display:grid;grid-template-columns:300px 90px 1fr;padding:7px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--duration-fast)}
 .wf-row:hover{background:var(--bg-hover)}
 .wf-row.selected{background:var(--accent-subtle)}
-.wf-row:last-child{border-bottom:none}
+.wf-row.wf-row--match:not(.selected){background:rgba(245,158,11,.08)}
 .wf-name{font-size:13px;display:flex;align-items:center;gap:6px;overflow:hidden;color:var(--text)}
 .wf-name .indent{flex-shrink:0;color:var(--muted)}
 .wf-name .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
@@ -200,24 +267,33 @@ a:hover{text-decoration:underline}
 .wf-bar-wrap{position:relative;height:18px;border-radius:3px}
 .wf-bar{position:absolute;height:100%;border-radius:3px;min-width:3px;opacity:.75;transition:opacity var(--duration-fast)}
 .wf-row:hover .wf-bar{opacity:1}
-.wf-row--hidden{display:none}
-.wf-fold{padding:8px 16px;text-align:center;cursor:pointer;background:var(--bg-accent);border-bottom:1px solid var(--border);color:var(--accent);font-size:13px;font-weight:500;transition:background var(--duration-fast)}
-.wf-fold:hover{background:var(--bg-hover)}
-.wf-ticks{display:grid;grid-template-columns:300px 90px 1fr;padding:4px 16px 6px;border-top:1px solid var(--border);background:var(--bg-accent)}
-.wf-ticks-bar{display:flex;justify-content:space-between}
-.wf-tick{font-size:10px;color:var(--muted);font-family:var(--mono)}
+.wf-group-section{position:relative}
+.wf-group-section.collapsed .wf-row{display:none}
+.wf-group-section:last-child .wf-row:last-child{border-bottom:none}
+.wf-group{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--bg-elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-left:3px solid var(--border-strong);cursor:pointer;transition:background var(--duration-fast),border-left-color var(--duration-fast)}
+.wf-group:hover{background:var(--bg-hover);border-left-color:var(--accent)}
+.wf-group:first-of-type{border-top:none}
+.wf-group-main{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1}
+.wf-group-toggle{font-size:12px;color:var(--muted);font-family:var(--mono);width:12px;text-align:center;flex-shrink:0}
+.wf-group-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
+.wf-group-title-row{display:flex;align-items:center;gap:8px;min-width:0}
+.wf-group-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-strong)}
+.wf-group-hit{font-size:10px;padding:1px 6px;border-radius:var(--radius-full);background:var(--accent-subtle);color:var(--accent);font-weight:700;flex-shrink:0}
+.wf-group-snippet{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
+.wf-group-meta{font-size:11px;color:var(--muted);font-family:var(--mono);background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:3px 10px;flex-shrink:0}
+.search-hit{background:rgba(245,158,11,.22);color:var(--text-strong);border-radius:3px;padding:0 2px}
 
 /* ---- Resize handle ---- */
-.trace-resize{flex:0 0 7px;cursor:row-resize;background:var(--border);position:relative;z-index:10;transition:background var(--duration-fast)}
+.trace-resize{flex:0 0 7px;cursor:col-resize;background:var(--border);position:relative;z-index:10;transition:background var(--duration-fast)}
 .trace-resize:hover,.trace-resize.active{background:var(--accent)}
-.trace-resize::before{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px;z-index:1}
-.trace-resize::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:3px;border-radius:2px;background:var(--muted);opacity:.5}
+.trace-resize::before{content:'';position:absolute;left:-4px;right:-4px;top:0;bottom:0;z-index:1}
+.trace-resize::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:40px;border-radius:2px;background:var(--muted);opacity:.5}
 .trace-resize:hover::after,.trace-resize.active::after{background:var(--accent-foreground);opacity:.8}
-body.resizing{cursor:row-resize!important;-webkit-user-select:none!important;user-select:none!important}
-body.resizing *{cursor:row-resize!important}
+body.resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}
+body.resizing *{cursor:col-resize!important}
 
-/* ---- Detail panel (bottom pane) ---- */
-.trace-bottom{flex:0 0 320px;min-height:140px;max-height:70vh;overflow-y:scroll;scrollbar-gutter:stable;background:var(--bg-accent);border-top:none}
+/* ---- Detail panel (right pane) ---- */
+.trace-bottom{flex:0 0 420px;min-width:320px;max-width:720px;overflow-y:scroll;scrollbar-gutter:stable;background:var(--bg-accent);border-left:1px solid var(--border)}
 .trace-bottom .detail-panel{background:var(--card);overflow:hidden;border:none;border-radius:0;margin:0;width:100%}
 .trace-bottom .detail-header{padding:10px 18px;background:var(--bg-accent);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5}
 .detail-header .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
@@ -226,11 +302,28 @@ body.resizing *{cursor:row-resize!important}
 .detail-meta{padding:10px 18px;display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border)}
 .detail-meta b{color:var(--text-strong)}
 .detail-body{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
+.trace-bottom .detail-body{grid-template-columns:1fr}
 @media(max-width:800px){.detail-body{grid-template-columns:1fr}}
 .detail-section{padding:12px 18px;border-right:1px solid var(--border);overflow:hidden;min-width:0}
+.trace-bottom .detail-section{border-right:none;border-bottom:1px solid var(--border)}
+.trace-bottom .detail-section:last-child{border-bottom:none}
 .detail-section:last-child{border-right:none}
 .detail-section h4{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-weight:600}
 .json-view{background:var(--secondary);padding:10px 12px;border-radius:var(--radius-md);font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;max-height:none;overflow-y:auto;color:var(--text);border:1px solid var(--border)}
+.kv-view{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 12px}
+.kv-item{padding:10px 0;border-bottom:1px solid var(--border)}
+.kv-item:last-child{border-bottom:none}
+.kv-key{font-size:12px;font-weight:700;color:#3b82f6;line-height:1.4;letter-spacing:.01em}
+:root[data-theme=light] .kv-key{color:#2563eb}
+.kv-value{margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-strong);white-space:pre-wrap;word-break:break-word}
+.kv-collapse{margin-top:6px}
+.kv-collapse summary{cursor:pointer;color:var(--muted);font-size:11px;user-select:none}
+.kv-collapse summary:hover{color:var(--text)}
+.kv-collapse .kv-value{margin-top:8px}
+.media-preview{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}
+.media-card{display:block;width:110px;height:110px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--secondary);box-shadow:inset 0 1px 0 var(--card-highlight);transition:transform var(--duration-fast),border-color var(--duration-fast),box-shadow var(--duration-fast)}
+.media-card:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow-sm),inset 0 1px 0 var(--card-highlight)}
+.media-card img{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-accent)}
 .json-key{color:#a78bfa}
 .json-str{color:#34d399;white-space:pre-wrap}
 .json-num{color:#fbbf24}
@@ -316,12 +409,12 @@ body.resizing *{cursor:row-resize!important}
 .chart-bar-seg{width:100%;min-height:0;transition:opacity var(--duration-fast)}
 .chart-bar-seg:last-child{border-radius:3px 3px 0 0}
 .chart-x-labels{display:flex;gap:3px;padding:6px 4px 0;border-top:1px solid var(--border);justify-content:center}
-.chart-x-labels span{flex:1;text-align:center;font-size:9px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60px}
+.chart-x-labels span{flex:1;text-align:center;font-size:9px;color:var(--muted);font-family:var(--mono);line-height:1.2;white-space:normal;overflow:visible}
 .chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;height:160px;padding-right:8px;min-width:40px}
 .chart-y-axis span{font-size:10px;color:var(--muted);font-family:var(--mono)}
 .chart-container{display:flex}
 .chart-main{flex:1;min-width:0}
-.chart-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-size:11px;color:var(--text);white-space:nowrap;pointer-events:none;z-index:20;box-shadow:var(--shadow-md);display:none}
+.chart-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font-size:11px;color:var(--text);line-height:1.35;white-space:normal;word-break:break-word;max-width:220px;min-width:150px;pointer-events:none;z-index:20;box-shadow:var(--shadow-md);display:none}
 .chart-bar-col:hover .chart-tooltip{display:block}
 .chart-legend{display:flex;gap:16px;justify-content:center;margin-top:12px;flex-wrap:wrap}
 .chart-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
@@ -377,12 +470,19 @@ body.resizing *{cursor:row-resize!important}
 
 /* ---- Responsive ---- */
 @media(max-width:900px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:900px){
+  .content--trace .content-inner{flex-direction:column}
+  .trace-resize{display:none}
+  .trace-bottom{flex:0 0 320px;min-width:0;max-width:none;border-left:none;border-top:1px solid var(--border)}
+  .sec-runtime-grid{grid-template-columns:1fr}
+  .sec-custom-form{grid-template-columns:1fr}
+}
 @media(max-width:560px){
   .stat-grid{grid-template-columns:repeat(2,1fr)}
   .topbar{padding:0 12px;height:48px}
   .content{padding:12px}
   .waterfall{margin:10px}
-  .wf-header,.wf-row,.wf-ticks{grid-template-columns:200px 70px 1fr}
+  .wf-header,.wf-row{grid-template-columns:200px 70px 1fr}
 }
 `;
 /* ================================================================== */
@@ -394,7 +494,7 @@ const CLIENT_JS = `
 /* ---------- constants ---------- */
 var API = window.location.pathname.replace(/\\/+$/, '') + '/api';
 var TYPE_COLORS = {
-  message:'#8b5cf6', tool_call:'#f59e0b', tool_persist:'#f97316',
+  message:'#8b5cf6', assistant_stream:'#7c3aed', thinking:'#0f766e', tool_call:'#f59e0b', tool_update:'#fb923c', tool_persist:'#f97316',
   prompt_build:'#3b82f6', model_resolve:'#06b6d4', agent_end:'#10b981',
   session_start:'#22c55e', session_end:'#ef4444', compaction:'#14b8a6',
   reset:'#f43f5e', user_message:'#0ea5e9', assistant_msg:'#a855f7',
@@ -402,7 +502,7 @@ var TYPE_COLORS = {
   gateway_start:'#94a3b8', gateway_stop:'#475569'
 };
 var TYPE_LABELS = {
-  message:'LLM Call', tool_call:'Tool Call', tool_persist:'Tool Persist',
+  message:'LLM Call', assistant_stream:'Assistant Stream', thinking:'Thinking', tool_call:'Tool Call', tool_update:'Tool Update', tool_persist:'Tool Persist',
   prompt_build:'Prompt Build', model_resolve:'Model Resolve', agent_end:'Agent End',
   session_start:'Session Start', session_end:'Session End', compaction:'Compaction',
   reset:'Reset', user_message:'User Message', assistant_msg:'Assistant Msg',
@@ -463,6 +563,7 @@ applyTheme(getTheme());
 
 /* ---------- helpers ---------- */
 function esc(s) { if (!s) return ''; var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+function escapeRegExp(s) { return s.replace(/[.*+?^{}()|[\]\\$]/g, '\\$&'); }
 function fmtDur(ms) {
   if (ms == null) return '-';
   if (ms < 1000) return ms + 'ms';
@@ -487,6 +588,189 @@ function parseJson(s) {
   if (!s) return null;
   try { return typeof s === 'string' ? JSON.parse(s) : s; } catch(e) { return s; }
 }
+function getAuthTokenFromQuery() {
+  var params = new URLSearchParams(window.location.search);
+  return params.get('token') || '';
+}
+function buildMediaUrl(rawPath) {
+  var url = API + '/media?path=' + encodeURIComponent(rawPath);
+  var token = getAuthTokenFromQuery();
+  if (token) url += '&token=' + encodeURIComponent(token);
+  return url;
+}
+function onMediaImgError(imgEl) {
+  if (!imgEl) return;
+  var card = imgEl.closest('.media-card');
+  if (card) card.remove();
+  var preview = imgEl.closest('.media-preview');
+  if (preview && preview.children.length === 0) {
+    preview.remove();
+  }
+}
+function collectMediaPaths(value, out, depth) {
+  if (!out) out = [];
+  if (!depth) depth = 0;
+  if (depth > 6 || value == null) return out;
+
+  if (typeof value === 'string') {
+    var s = value;
+    var i = 0;
+    while (i < s.length) {
+      var pos = s.indexOf('file://', i);
+      if (pos < 0) break;
+      var end = pos;
+      while (end < s.length) {
+        var ch = s[end];
+        if (ch === ' ' || ch === '\\n' || ch === '\\r' || ch === '\\t' || ch === '"' || ch.charCodeAt(0) === 39 || ch === ')' || ch === '<' || ch === '>') break;
+        end++;
+      }
+      var candidate = s.slice(pos, end);
+      if (candidate) out.push(candidate);
+      i = Math.max(end, pos + 7);
+    }
+    return out;
+  }
+  if (Array.isArray(value)) {
+    value.forEach(function(v) { collectMediaPaths(v, out, depth + 1); });
+    return out;
+  }
+  if (typeof value === 'object') {
+    Object.keys(value).forEach(function(k) { collectMediaPaths(value[k], out, depth + 1); });
+    return out;
+  }
+  return out;
+}
+function getToolCallId(action) {
+  function readToolCallId(obj) {
+    if (!obj || typeof obj !== 'object') return '';
+    if (typeof obj.toolCallId === 'string' && obj.toolCallId) return obj.toolCallId;
+    if (typeof obj.tool_call_id === 'string' && obj.tool_call_id) return obj.tool_call_id;
+    if (obj.toolCall && typeof obj.toolCall === 'object') {
+      if (typeof obj.toolCall.id === 'string' && obj.toolCall.id) return obj.toolCall.id;
+    }
+    return '';
+  }
+  var input = parseJson(action && action.input_params);
+  var id = readToolCallId(input);
+  if (id) return id;
+  var output = parseJson(action && action.output_result);
+  return readToolCallId(output);
+}
+function getActionRunId(action) {
+  if (!action) return '';
+  var input = parseJson(action.input_params);
+  if (input && typeof input === 'object' && typeof input.runId === 'string' && input.runId) {
+    return input.runId;
+  }
+  var output = parseJson(action.output_result);
+  if (output && typeof output === 'object' && typeof output.runId === 'string' && output.runId) {
+    return output.runId;
+  }
+  return '';
+}
+function normalizeTraceSearch(s) {
+  return (s || '').trim().toLowerCase();
+}
+function stringifySearchValue(v) {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  try { return JSON.stringify(v); } catch(e) { return String(v); }
+}
+function getActionSearchText(action) {
+  return [
+    action.action_name,
+    action.model_name,
+    action.input_params,
+    action.output_result
+  ].map(stringifySearchValue).filter(Boolean).join('\\n');
+}
+function getActionSearchSnippet(action, query) {
+  if (!query) return '';
+  var fields = [
+    action.action_name,
+    action.input_params,
+    action.output_result,
+    action.model_name
+  ];
+  for (var i = 0; i < fields.length; i++) {
+    var text = stringifySearchValue(fields[i]);
+    if (!text) continue;
+    var normalized = text.toLowerCase();
+    var idx = normalized.indexOf(query);
+    if (idx < 0) continue;
+    var start = Math.max(0, idx - 36);
+    var end = Math.min(text.length, idx + query.length + 52);
+    var snippet = text.slice(start, end).replace(/\s+/g, ' ').trim();
+    if (start > 0) snippet = '...' + snippet;
+    if (end < text.length) snippet = snippet + '...';
+    return snippet;
+  }
+  return '';
+}
+function highlightSearchText(text, query) {
+  var safeText = esc(text || '');
+  if (!query) return safeText;
+  var re = new RegExp('(' + escapeRegExp(query) + ')', 'ig');
+  return safeText.replace(re, '<span class="search-hit">$1</span>');
+}
+
+function isToolActionType(actionType) {
+  return typeof actionType === 'string' && actionType.indexOf('tool_') === 0;
+}
+
+var KV_VALUE_COLLAPSE_LIMIT = 2000;
+
+function collectTopLevelEntries(value) {
+  if (value === null || value === undefined) return [];
+  if (typeof value !== 'object' || Array.isArray(value)) {
+    return [{ key: 'value', value: value }];
+  }
+
+  var keys = Object.keys(value);
+  if (keys.length === 0) return [{ key: 'value', value: '{}' }];
+  return keys.map(function(k) {
+    return { key: k, value: value[k] };
+  });
+}
+
+function renderKvValue(raw) {
+  var text;
+  if (raw === null || raw === undefined) {
+    text = 'null';
+  } else if (typeof raw === 'string') {
+    text = raw;
+  } else if (typeof raw === 'object') {
+    try { text = JSON.stringify(raw, null, 2); } catch(e) { text = String(raw); }
+  } else {
+    text = String(raw);
+  }
+
+  if (text.length > KV_VALUE_COLLAPSE_LIMIT) {
+    return '<details class="kv-collapse">' +
+      '<summary>Show value (' + text.length + ' chars)</summary>' +
+      '<div class="kv-value">' + esc(text) + '</div>' +
+    '</details>';
+  }
+  return '<div class="kv-value">' + esc(text) + '</div>';
+}
+
+function renderStructuredFields(value) {
+  var entries = collectTopLevelEntries(value);
+  if (!entries.length) {
+    return '<div class="json-view" style="color:var(--muted)">null</div>';
+  }
+
+  var html = '<div class="kv-view">';
+  for (var i = 0; i < entries.length; i++) {
+    var item = entries[i];
+    html += '<div class="kv-item">';
+    html += '<div class="kv-key">' + esc(item.key) + '</div>';
+    html += renderKvValue(item.value);
+    html += '</div>';
+  }
+  html += '</div>';
+  return html;
+}
 
 /* ---------- Pretty JSON renderer (recursive) ---------- */
 function prettyJson(val, indent) {
@@ -553,12 +837,28 @@ async function fetchApi(path) {
   if (!resp.ok) throw new Error('API error: ' + resp.status);
   return resp.json();
 }
+async function postApi(path, payload) {
+  var urlParams = new URLSearchParams(window.location.search);
+  var token = urlParams.get('token');
+  var headers = { 'Content-Type': 'application/json' };
+  if (token) {
+    headers['Authorization'] = 'Bearer ' + token;
+  }
+  var resp = await fetch(API + path, {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(payload || {})
+  });
+  if (!resp.ok) throw new Error('API error: ' + resp.status);
+  return resp.json();
+}
 
 /* ---------- SVG icons ---------- */
 var ICON_BACK = '<svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>';
 var ICON_SUN = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
 var ICON_MOON = '<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>';
 var ICON_ACTIVITY = '<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>';
+var ICON_REFRESH = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4v6h-6"/><path d="M4 20v-6h6"/><path d="M19.2 14A8 8 0 0 1 6.1 18.3L4 14"/><path d="M4.8 10A8 8 0 0 1 17.9 5.7L20 10"/></svg>';
 
 /* ---------- router ---------- */
 function parseHashParams(hash) {
@@ -673,6 +973,7 @@ async function renderTraceList() {
       html += '</div>';
     });
     html += '</div></div>';
+    html += '<button class="icon-refresh-btn" onclick="refreshTraceList()" title="Refresh trace list">' + ICON_REFRESH + '</button>';
     if (hasFilter) {
       html += '<button class="btn-clear" onclick="clearFilter()">✕ Clear</button>';
     }
@@ -685,7 +986,11 @@ async function renderTraceList() {
     if (sessData.sessions.length === 0) {
       html += '<div class="empty"><div class="icon">📭</div><div class="text">No sessions recorded yet</div></div>';
     } else {
-      sessData.sessions.forEach(function(s) {
+      var visibleSessions = (sessData.sessions || []).filter(function(s) {
+        var sid = String((s && s.session_id) || '').toLowerCase();
+        return sid !== 'unknown' && sid !== 'unkown' && sid !== '-';
+      });
+      visibleSessions.forEach(function(s) {
         var dur = (s.start_time && s.end_time)
           ? fmtDur(new Date(s.end_time).getTime() - new Date(s.start_time).getTime())
           : '-';
@@ -705,6 +1010,9 @@ async function renderTraceList() {
         html += '</div>';
         html += '</div>';
       });
+      if (visibleSessions.length === 0) {
+        html += '<div class="empty"><div class="icon">📭</div><div class="text">No sessions recorded yet</div></div>';
+      }
     }
 
     html += '</div>';
@@ -749,6 +1057,10 @@ window.clearFilter = function() {
   renderTraceList();
 };
 
+window.refreshTraceList = function() {
+  renderTraceList();
+};
+
 window.toggleTimeMenu = function(e) {
   e.stopPropagation();
   var menu = document.getElementById('time-menu');
@@ -854,7 +1166,7 @@ async function renderDashboard() {
     // Traces by time (bar chart)
     html += '<div class="an-card">';
     var gran = data.granularity || 'day';
-    var granLabel = gran === 'hour' ? (ts.length + ' hours') : (ts.length + ' days');
+    var granLabel = gran === 'hour' ? anGetTimeLabel() : (ts.length + ' days');
     html += '<h3><span class="icon">📊</span> Activity Over Time';
     html += '<span class="sub">' + granLabel + '</span></h3>';
     html += buildTimeSeriesChart(ts, anMetricTab, gran);
@@ -916,6 +1228,8 @@ function buildTimeSeriesChart(ts, metric, gran) {
     if (metric === 'actions') return { v1: p.actions, v2: 0, total: p.actions, label: p.date };
     return { v1: p.sessions, v2: 0, total: p.sessions, label: p.date };
   });
+  // Keep chronological order (older -> newer, left to right)
+  vals = vals.slice();
   var maxVal = Math.max.apply(null, vals.map(function(v){ return v.total; }));
   if (maxVal === 0) maxVal = 1;
 
@@ -934,24 +1248,41 @@ function buildTimeSeriesChart(ts, metric, gran) {
   var barColor1 = metric === 'tokens' ? '#8b5cf6' : (metric === 'actions' ? '#3b82f6' : 'var(--accent)');
   var barColor2 = '#f59e0b';
 
-  vals.forEach(function(v) {
-    var pct = Math.max((v.total / maxVal) * 100, 1);
-    var dayLabel;
+  function formatFullTimeLabel(rawLabel) {
+    var raw = String(rawLabel || '');
+    if (!raw) return '-';
+    // hour bucket: "YYYY-MM-DD HH" -> "YYYY-MM-DD HH:00:00"
+    if (gran === 'hour' && raw.length >= 13) {
+      return raw.slice(0, 13) + ':00:00';
+    }
+    // day bucket: "YYYY-MM-DD" -> "YYYY-MM-DD 00:00:00"
+    if (raw.length >= 10) {
+      return raw.slice(0, 10) + ' 00:00:00';
+    }
+    return raw;
+  }
+
+  function formatAxisLabel(rawLabel) {
+    var raw = String(rawLabel || '');
+    if (!raw) return '';
     if (gran === 'hour') {
-      // "2026-03-12 14" → "14:00"
-      var hourPart = v.label.length >= 13 ? v.label.slice(11, 13) : v.label;
-      dayLabel = hourPart + ':00';
-    } else {
-      dayLabel = v.label.length > 5 ? v.label.slice(5) : v.label; // MM-DD
+      // "2026-03-12 14" -> "03-12<br>14:00"
+      if (raw.length >= 13) return raw.slice(5, 10) + '<br>' + raw.slice(11, 13) + ':00';
+      return raw;
     }
+    // "2026-03-12" -> "03-12"
+    return raw.length >= 10 ? raw.slice(5, 10) : raw;
+  }
+
+  vals.forEach(function(v) {
+    var pct = Math.max((v.total / maxVal) * 100, 1);
+    var fullLabel = formatFullTimeLabel(v.label);
     h += '<div class="chart-bar-col">';
-    h += '<div class="chart-tooltip">' + v.label + ': ' + fmtNum(v.total);
+    h += '<div class="chart-tooltip"><div><b>Time:</b> ' + esc(fullLabel) + '</div><div><b>Value:</b> ' + fmtNum(v.total);
     if (showTokenSplit) h += ' (in:' + fmtNum(v.v1) + ' out:' + fmtNum(v.v2) + ')';
-    h += '</div>';
+    h += '</div></div>';
 
     if (showTokenSplit && v.v1 + v.v2 > 0) {
-      var pct1 = (v.v1 / maxVal) * 100;
-      var pct2 = (v.v2 / maxVal) * 100;
       h += '<div class="chart-bar-stack" style="height:' + pct + '%">';
       h += '<div class="chart-bar-seg" style="height:' + (v.v2 / v.total * 100) + '%;background:' + barColor2 + '"></div>';
       h += '<div class="chart-bar-seg" style="height:' + (v.v1 / v.total * 100) + '%;background:' + barColor1 + '"></div>';
@@ -965,16 +1296,13 @@ function buildTimeSeriesChart(ts, metric, gran) {
 
   // X labels (show max 15 labels)
   h += '<div class="chart-x-labels">';
-  var step = Math.max(1, Math.ceil(vals.length / 15));
+  var maxLabels = gran === 'hour' ? 8 : 10;
+  var step = Math.max(1, Math.ceil(vals.length / maxLabels));
+  var lastIdx = vals.length - 1;
   vals.forEach(function(v, i) {
-    var xLabel;
-    if (gran === 'hour') {
-      var hp = v.label.length >= 13 ? v.label.slice(11, 13) : v.label;
-      xLabel = hp + ':00';
-    } else {
-      xLabel = v.label.length > 5 ? v.label.slice(5) : v.label;
-    }
-    h += '<span>' + (i % step === 0 ? xLabel : '') + '</span>';
+    var xLabel = formatAxisLabel(v.label);
+    var show = (i === 0) || (i === lastIdx) || (i % step === 0);
+    h += '<span title="' + esc(formatFullTimeLabel(v.label)) + '">' + (show ? xLabel : '') + '</span>';
   });
   h += '</div>';
   h += '</div></div>'; // chart-main, chart-container
@@ -1089,14 +1417,23 @@ function buildActionDistribution(ad) {
 }
 
 function buildAgentsTable(ta) {
-  if (!ta || ta.length === 0) {
+  var rows = (ta || []).filter(function(a) {
+    var name = (a && a.agent ? String(a.agent) : '').toLowerCase();
+    return name !== 'unknown' && name !== 'unkown';
+  }).sort(function(a, b) {
+    var aSystem = String(a.agent || '').toLowerCase() === 'system' ? 1 : 0;
+    var bSystem = String(b.agent || '').toLowerCase() === 'system' ? 1 : 0;
+    if (aSystem !== bSystem) return aSystem - bSystem;
+    return b.sessions - a.sessions;
+  });
+
+  if (!rows || rows.length === 0) {
     return '<div class="empty" style="padding:24px"><div class="text">No agent data</div></div>';
   }
 
-  var maxSess = Math.max.apply(null, ta.map(function(a){ return a.sessions; }));
   var h = '<table class="an-table">';
   h += '<tr><th>Agent</th><th>Sessions</th><th>Actions</th><th>Tokens</th></tr>';
-  ta.forEach(function(a) {
+  rows.forEach(function(a) {
     h += '<tr>';
     h += '<td>🤖 ' + esc(a.agent) + '</td>';
     h += '<td class="mono">' + a.sessions + '</td>';
@@ -1133,14 +1470,35 @@ window.anSwitchMetric = function(metric) {
 /* ================================================================ */
 
 window.__alertCount = 0;
+var __alertBadgeLoading = false;
+var __alertBadgeLoaded = false;
+var __alertBadgeScheduled = false;
 
-// Fetch open alert count on init for navigation badge
-(async function loadAlertBadge() {
+async function loadAlertBadge() {
+  if (__alertBadgeLoading || __alertBadgeLoaded) return;
+  __alertBadgeLoading = true;
   try {
     var st = await fetchApi('/alerts/stats');
     window.__alertCount = (st.byStatus && st.byStatus.open) || 0;
+    __alertBadgeLoaded = true;
   } catch(e) { /* ignore */ }
-})();
+  __alertBadgeLoading = false;
+}
+
+function scheduleAlertBadgeLoad() {
+  if (__alertBadgeScheduled || __alertBadgeLoaded) return;
+  __alertBadgeScheduled = true;
+  var run = function() {
+    setTimeout(function() {
+      loadAlertBadge();
+    }, 800); // avoid competing with first-screen critical requests
+  };
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(run, { timeout: 2000 });
+  } else {
+    setTimeout(run, 1200);
+  }
+}
 
 /* ---- Security filter state ---- */
 var secFilterSearch = '';
@@ -1149,6 +1507,8 @@ var secFilterCategory = '';
 var secFilterStatus = 'open';
 var secFilterTimeRange = '';
 var secPage = 1;
+var secRuntimeCfg = null;
+var secActiveRuleKey = 'secretLeakage';
 
 /* ---- severity helpers ---- */
 var SEV_ICON = {critical:'🔴',warn:'🟡',info:'ℹ️'};
@@ -1156,13 +1516,72 @@ var SEV_LABEL = {critical:'CRITICAL',warn:'WARNING',info:'INFO'};
 var CAT_LABEL = {
   secret_leakage:'Secret Leakage',high_risk_operation:'High Risk Operation',
   data_exfiltration:'Data Exfiltration',prompt_injection:'Prompt Injection',
+  custom_regex:'Custom Regex',
   skill_anomaly:'Skill Anomaly'
 };
 var STATUS_LABEL = {open:'Open',acknowledged:'Acknowledged',resolved:'Resolved',false_positive:'False Positive'};
 
 var SEV_OPTIONS  = [{k:'',l:'All Severity'},{k:'critical',l:'CRITICAL'},{k:'warn',l:'WARNING'},{k:'info',l:'INFO'}];
-var CAT_OPTIONS  = [{k:'',l:'All Category'},{k:'secret_leakage',l:'Secret Leakage'},{k:'high_risk_operation',l:'High Risk Op'},{k:'data_exfiltration',l:'Data Exfiltration'},{k:'prompt_injection',l:'Prompt Injection'},{k:'skill_anomaly',l:'Skill Anomaly'}];
+var CAT_OPTIONS  = [{k:'',l:'All Category'},{k:'secret_leakage',l:'Secret Leakage'},{k:'high_risk_operation',l:'High Risk Op'},{k:'data_exfiltration',l:'Data Exfiltration'},{k:'prompt_injection',l:'Prompt Injection'},{k:'custom_regex',l:'Custom Regex'},{k:'skill_anomaly',l:'Skill Anomaly'}];
 var STA_OPTIONS  = [{k:'',l:'All Status'},{k:'open',l:'Open'},{k:'acknowledged',l:'Acknowledged'},{k:'resolved',l:'Resolved'},{k:'false_positive',l:'False Positive'}];
+var SEC_RULE_META = {
+  secretLeakage: {
+    key: 'secretLeakage',
+    title: 'Secret Leakage',
+    brief: 'Detect exposed AK/SK, token, password and key materials',
+    level: 'critical',
+    description: 'Scans tool input/output and model responses for secret patterns, including keys, tokens and sensitive credential strings.',
+    detects: ['Hardcoded access key or token values', 'Credential output copied from files or env blocks']
+  },
+  highRiskOps: {
+    key: 'highRiskOps',
+    title: 'High Risk Ops',
+    brief: 'Detect dangerous operations such as delete/reset/wipe',
+    level: 'high',
+    description: 'Flags risky tool operations that may alter or destroy data, especially shell and file-system actions.',
+    detects: ['Destructive shell commands', 'Irreversible write/remove actions']
+  },
+  dataExfiltration: {
+    key: 'dataExfiltration',
+    title: 'External Access',
+    brief: 'Detect outbound requests and potential data exfiltration',
+    level: 'high',
+    description: 'Monitors requests to external websites or domains and raises alerts when outbound access may carry sensitive data.',
+    detects: ['Tool calls to non-whitelisted external domains', 'Potential outbound data transfer patterns']
+  },
+  customRegex: {
+    key: 'customRegex',
+    title: 'Custom Regex',
+    brief: 'Customer-defined regex rules with live matching',
+    level: 'medium',
+    description: 'Create your own regex rules for sensitive keywords, IDs, or organization-specific policy patterns.',
+    detects: ['Custom compliance vocabulary', 'Business-specific sensitive identifiers']
+  },
+  promptInjection: {
+    key: 'promptInjection',
+    title: 'Prompt Injection',
+    brief: 'Detect jailbreak or instruction override attempts',
+    level: 'high',
+    description: 'Finds suspicious prompts attempting to override system policy, bypass guardrails or exfiltrate hidden context.',
+    detects: ['Ignore previous instructions patterns', 'Role hijacking and policy bypass phrasing']
+  },
+  chainDetection: {
+    key: 'chainDetection',
+    title: 'Chain Detection',
+    brief: 'Detect suspicious multi-step attack chains',
+    level: 'medium',
+    description: 'Correlates multiple actions in a session and raises alerts for risky sequences that are mild alone but dangerous in combination.',
+    detects: ['Recon + secret read + external write pattern', 'Repeated escalations over short window']
+  }
+};
+var SEC_RULE_ORDER = ['secretLeakage', 'highRiskOps', 'promptInjection', 'chainDetection', 'customRegex', 'dataExfiltration'];
+
+function severityRank(sev) {
+  if (sev === 'critical') return 0;
+  if (sev === 'warn') return 1;
+  if (sev === 'info') return 2;
+  return 3;
+}
 
 function secGetTimeFromISO() {
   if (!secFilterTimeRange) return '';
@@ -1182,6 +1601,17 @@ function secSelectedLabel(opts, curKey) {
   return found ? found.l : opts[0].l;
 }
 
+function secRuleEnabled(ruleKey) {
+  if (!secRuntimeCfg) return false;
+  if (ruleKey === 'enabled') return !!secRuntimeCfg.enabled;
+  return !!(secRuntimeCfg.rules && secRuntimeCfg.rules[ruleKey]);
+}
+
+function secSafeActiveRuleKey() {
+  if (SEC_RULE_ORDER.indexOf(secActiveRuleKey) >= 0) return secActiveRuleKey;
+  return 'secretLeakage';
+}
+
 /* build one custom dropdown (same look as Dashboard time picker) */
 function secDropdown(id, icon, opts, curKey) {
   var label = secSelectedLabel(opts, curKey);
@@ -1218,10 +1648,12 @@ async function renderSecurity() {
 
     var res = await Promise.all([
       fetchApi('/alerts/stats'),
-      fetchApi('/alerts?' + qs)
+      fetchApi('/alerts?' + qs),
+      fetchApi('/security/config').catch(function(){ return null; })
     ]);
     var alertStats = res[0];
     var alertData = res[1];
+    secRuntimeCfg = res[2] && res[2].config ? res[2].config : null;
 
     // Update badge count
     window.__alertCount = (alertStats.byStatus && alertStats.byStatus.open) || 0;
@@ -1242,6 +1674,107 @@ async function renderSecurity() {
     html += statCard('Last 24h', String(alertStats.recent24h || 0));
     html += '</div>';
 
+    // --- Runtime security rule toggles ---
+    if (secRuntimeCfg) {
+      var activeRuleKey = secSafeActiveRuleKey();
+      var activeMeta = SEC_RULE_META[activeRuleKey] || SEC_RULE_META.secretLeakage;
+      var activeOn = secRuleEnabled(activeRuleKey);
+      var enabledRules = SEC_RULE_ORDER.filter(function(k){
+        return secRuleEnabled(k);
+      }).length;
+      var customRegexRules = Array.isArray(secRuntimeCfg.customRegexRules) ? secRuntimeCfg.customRegexRules : [];
+
+      html += '<div class="sec-runtime">';
+      html += '<div class="sec-runtime-head">';
+      html += '<div>';
+      html += '<div class="sec-runtime-title">Runtime Security Rules</div>';
+      html += '</div>';
+      html += '<div class="sec-runtime-summary">' + enabledRules + '/' + SEC_RULE_ORDER.length + ' rule(s) enabled</div>';
+      html += '</div>';
+
+      html += '<div class="sec-runtime-grid">';
+      html += '<div class="sec-rule-list">';
+      SEC_RULE_ORDER.forEach(function(ruleKey) {
+        var meta = SEC_RULE_META[ruleKey];
+        if (!meta) return;
+        var on = secRuleEnabled(ruleKey);
+        html += '<div class="sec-rule-item' + (ruleKey === activeRuleKey ? ' active' : '') + '" onclick="secSelectRule(\\'' + ruleKey + '\\')">';
+        html += '<div class="sec-rule-copy">';
+        html += '<div class="sec-rule-name">' + esc(meta.title) + '</div>';
+        html += '<div class="sec-rule-brief">' + esc(meta.brief) + '</div>';
+        html += '</div>';
+        html += '<span class="sec-state-pill ' + (on ? 'on' : 'off') + '">' + (on ? 'ON' : 'OFF') + '</span>';
+        html += '<button class="sec-switch ' + (on ? 'on' : 'off') + '" onclick="event.stopPropagation();secToggleRuntime(\\'' + ruleKey + '\\')" aria-label="Toggle ' + esc(meta.title) + '">';
+        html += '<span class="sec-switch-track"></span><span class="sec-switch-thumb"></span>';
+        html += '</button>';
+        html += '</div>';
+      });
+      html += '</div>';
+
+      html += '<div class="sec-rule-detail">';
+      html += '<div class="sec-rule-detail-title">';
+      html += '<h4>' + esc(activeMeta.title) + '</h4>';
+      html += '<span class="sec-state-pill ' + (activeOn ? 'on' : 'off') + '">' + (activeOn ? 'ON' : 'OFF') + '</span>';
+      html += '</div>';
+      html += '<div class="sec-rule-detail-meta">';
+      html += '<span class="sec-meta-chip level-' + esc(activeMeta.level) + '">Risk ' + esc(activeMeta.level || 'unknown') + '</span>';
+      if (activeRuleKey === 'customRegex') {
+        html += '<span class="sec-meta-chip">Severity Fixed: CRITICAL</span>';
+      }
+      html += '</div>';
+      if (activeRuleKey !== 'customRegex') {
+        html += '<div class="sec-rule-explain"><div class="sec-rule-explain-text">' + esc(activeMeta.description || 'No description') + '</div></div>';
+        html += '<div class="sec-rule-detail-list">';
+        html += '<div class="sec-rule-detail-list-title">Coverage examples</div>';
+        (activeMeta.detects || []).forEach(function(item){
+          html += '<div class="sec-rule-detail-list-item">* ' + esc(item) + '</div>';
+        });
+        html += '</div>';
+      }
+
+      if (activeRuleKey === 'customRegex') {
+        html += '<div class="sec-custom-editor">';
+        html += '<div class="sec-rule-detail-list-title">Add custom regex rule</div>';
+        html += '<div class="sec-custom-form">';
+        html += '<div class="sec-custom-field">';
+        html += '<div class="sec-custom-field-label">Rule Name</div>';
+        html += '<input id="sec-cr-name" type="text" placeholder="e.g. Internal Ticket ID">';
+        html += '</div>';
+        html += '<div class="sec-custom-field">';
+        html += '<div class="sec-custom-field-label">Regex Pattern</div>';
+        html += '<input id="sec-cr-pattern" type="text" placeholder="e.g. TKT-[0-9]{6}">';
+        html += '</div>';
+        html += '<button onclick="secAddCustomRegex()">+ Create Rule</button>';
+        html += '</div>';
+
+        html += '<div class="sec-custom-list">';
+        if (customRegexRules.length === 0) {
+          html += '<div class="sec-rule-detail-list-item">No custom regex rules yet.</div>';
+        } else {
+          customRegexRules.forEach(function(rule, idx){
+            var on = rule.enabled !== false;
+            var flags = rule.flags || 'i';
+            html += '<div class="sec-custom-item">';
+            html += '<div class="sec-custom-item-main">';
+            html += '<div class="sec-custom-item-name">' + esc(rule.name || ('Rule ' + (idx + 1))) + '</div>';
+            html += '<div class="sec-custom-item-pattern">/' + esc(rule.pattern || '') + '/' + esc(flags) + ' · ' + esc((rule.severity || 'warn').toUpperCase()) + '</div>';
+            html += '</div>';
+            html += '<div class="sec-custom-item-actions">';
+            html += '<button class="sec-switch ' + (on ? 'on' : 'off') + '" onclick="secToggleCustomRegexRule(' + idx + ')"><span class="sec-switch-track"></span><span class="sec-switch-thumb"></span></button>';
+            html += '<button class="sec-custom-item-del" title="Delete rule" onclick="secDeleteCustomRegexRule(' + idx + ')">Delete</button>';
+            html += '</div>';
+            html += '</div>';
+          });
+        }
+        html += '</div>';
+        html += '</div>';
+      }
+
+      html += '</div>';
+      html += '</div>';
+      html += '</div>';
+    }
+
     // --- Filter bar (same .filter-bar as Dashboard) ---
     var hasFilter = secFilterSearch || secFilterSeverity || secFilterCategory || secFilterStatus || secFilterTimeRange;
     html += '<div class="filter-bar">';
@@ -1282,15 +1815,21 @@ async function renderSecurity() {
     }
     html += '</div>';
 
+    var sortedAlerts = (alertData.alerts || []).slice().sort(function(a, b) {
+      var sevDiff = severityRank(a.severity) - severityRank(b.severity);
+      if (sevDiff !== 0) return sevDiff;
+      return new Date(b.created_at || 0).getTime() - new Date(a.created_at || 0).getTime();
+    });
+
     // --- Alert list ---
     html += '<div class="section-title">Alerts <span class="count">' + alertData.total + (hasFilter ? ' matched' : ' total') + '</span></div>';
     html += '<div class="alert-list">';
 
-    if (alertData.alerts.length === 0) {
+    if (sortedAlerts.length === 0) {
       html += '<div class="empty"><div class="icon">✅</div><div class="text">No alerts found</div></div>';
     } else {
-      alertData.alerts.forEach(function(a) {
-        html += '<div class="alert-card sev-' + a.severity + '" onclick="toggleAlertDetail(\\'' + a.alert_id + '\\')">';
+      sortedAlerts.forEach(function(a) {
+        html += '<div class="alert-card sev-' + a.severity + '" id="alert-card-' + a.alert_id + '" onclick="toggleAlertDetail(\\'' + a.alert_id + '\\')">';
         html += '<div class="alert-top">';
         html += '<span class="alert-sev ' + a.severity + '">' + (SEV_ICON[a.severity]||'') + ' ' + (SEV_LABEL[a.severity]||a.severity) + '</span>';
         html += '<span class="alert-rule">' + esc(a.rule_name) + '</span>';
@@ -1321,7 +1860,6 @@ async function renderSecurity() {
         }
         if (a.status === 'open' || a.status === 'acknowledged') {
           html += '<button class="btn-resolve" onclick="event.stopPropagation();updateAlertSt(\\'' + a.alert_id + '\\',\\'resolved\\')">✓ Resolve</button>';
-          html += '<button class="btn-dismiss" onclick="event.stopPropagation();updateAlertSt(\\'' + a.alert_id + '\\',\\'false_positive\\')">✕ False Positive</button>';
         }
         html += '</div>';
         html += '</div>';
@@ -1393,6 +1931,98 @@ window.secClearFilter = function() {
   renderSecurity();
 };
 
+window.secSelectRule = function(ruleKey) {
+  if (SEC_RULE_ORDER.indexOf(ruleKey) < 0) return;
+  secActiveRuleKey = ruleKey;
+  renderSecurity();
+};
+
+window.secToggleRuntime = async function(key) {
+  if (!secRuntimeCfg) return;
+  var patch = {};
+  if (key === 'enabled') {
+    patch.enabled = !secRuntimeCfg.enabled;
+  } else {
+    patch.rules = {};
+    patch.rules[key] = !secRuntimeCfg.rules[key];
+  }
+  try {
+    await postApi('/security/config', patch);
+    renderSecurity();
+  } catch (e) {
+    console.error('Failed to update security config:', e);
+  }
+};
+
+window.secAddCustomRegex = async function() {
+  if (!secRuntimeCfg) return;
+  var nameEl = document.getElementById('sec-cr-name');
+  var patternEl = document.getElementById('sec-cr-pattern');
+  var name = nameEl ? nameEl.value.trim() : '';
+  var pattern = patternEl ? patternEl.value.trim() : '';
+  var flags = 'i';
+  var severity = 'critical';
+  if (!pattern) return;
+
+  try {
+    new RegExp(pattern, flags || 'i');
+  } catch (e) {
+    alert('Invalid regex pattern or flags');
+    return;
+  }
+
+  var nextRules = Array.isArray(secRuntimeCfg.customRegexRules) ? secRuntimeCfg.customRegexRules.slice() : [];
+  nextRules.push({
+    id: 'cr_' + Date.now() + '_' + Math.floor(Math.random() * 10000),
+    name: name || 'Custom Regex',
+    pattern: pattern,
+    flags: flags || 'i',
+    severity: severity,
+    enabled: true
+  });
+
+  try {
+    await postApi('/security/config', { customRegexRules: nextRules });
+    renderSecurity();
+  } catch (e) {
+    console.error('Failed to add custom regex rule:', e);
+  }
+};
+
+window.secToggleCustomRegexRule = async function(idx) {
+  if (!secRuntimeCfg || !Array.isArray(secRuntimeCfg.customRegexRules)) return;
+  if (idx < 0 || idx >= secRuntimeCfg.customRegexRules.length) return;
+  var nextRules = secRuntimeCfg.customRegexRules.slice();
+  var rule = nextRules[idx];
+  nextRules[idx] = {
+    id: rule.id,
+    name: rule.name,
+    pattern: rule.pattern,
+    flags: rule.flags,
+    severity: rule.severity,
+    enabled: rule.enabled === false ? true : false
+  };
+  try {
+    await postApi('/security/config', { customRegexRules: nextRules });
+    renderSecurity();
+  } catch (e) {
+    console.error('Failed to toggle custom regex rule:', e);
+  }
+};
+
+window.secDeleteCustomRegexRule = async function(idx) {
+  if (!secRuntimeCfg || !Array.isArray(secRuntimeCfg.customRegexRules)) return;
+  if (idx < 0 || idx >= secRuntimeCfg.customRegexRules.length) return;
+  var nextRules = secRuntimeCfg.customRegexRules.slice();
+  nextRules.splice(idx, 1);
+  try {
+    await postApi('/security/config', { customRegexRules: nextRules });
+    renderSecurity();
+  } catch (e) {
+    console.error('Failed to delete custom regex rule:', e);
+  }
+};
+
 window.secGoPage = function(p) {
   if (p < 1) return;
   secPage = p;
@@ -1401,12 +2031,34 @@ window.secGoPage = function(p) {
 
 window.updateAlertSt = async function(alertId, newStatus) {
   try {
-    await fetch(API + '/alerts/' + encodeURIComponent(alertId) + '/status', {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify({status: newStatus})
-    });
-    renderSecurity();
+    await postApi('/alerts/' + encodeURIComponent(alertId) + '/status', { status: newStatus });
+
+    var card = document.getElementById('alert-card-' + alertId);
+    if (card) {
+      card.style.transition = 'opacity .12s ease, transform .12s ease';
+      card.style.opacity = '0';
+      card.style.transform = 'translateY(-2px)';
+      setTimeout(function() {
+        if (card && card.parentNode) card.parentNode.removeChild(card);
+      }, 130);
+    }
+
+    if (window.__alertCount > 0) {
+      window.__alertCount -= 1;
+    }
+
+    var statNodes = document.querySelectorAll('.stat .stat-label');
+    for (var i = 0; i < statNodes.length; i++) {
+      var labelNode = statNodes[i];
+      if (!labelNode || !labelNode.textContent) continue;
+      if (labelNode.textContent.trim().toLowerCase() === 'open') {
+        var valueNode = labelNode.parentElement ? labelNode.parentElement.querySelector('.stat-value') : null;
+        if (valueNode) {
+          var cur = parseInt((valueNode.textContent || '0').trim(), 10);
+          if (!isNaN(cur) && cur > 0) valueNode.textContent = String(cur - 1);
+        }
+      }
+    }
   } catch(e) {
     console.error('Failed to update alert:', e);
   }
@@ -1425,9 +2077,16 @@ document.addEventListener('click', function() {
 /* ================================================================ */
 
 var selectedActionIdx = -1;
+var currentTraceSessionId = '';
+var currentTraceHighlightAction = '';
+var currentTraceHighlightTime = '';
+var traceSearchQuery = '';
 
 async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
   selectedActionIdx = -1;
+  currentTraceSessionId = sessionId;
+  currentTraceHighlightAction = highlightAction || '';
+  currentTraceHighlightTime = highlightTime || '';
   app.innerHTML = renderLayout('trace',
     '<div class="trace-header"><div class="loading">Loading trace...</div></div>');
 
@@ -1459,61 +2118,289 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
         action: a,
         startMs: startMs,
         endMs: endMs,
+        displayDurationMs: a.duration_ms,
         level: 0,
         children: []
       };
     });
 
+    function findOwnerLlmStartMs(thinkingSpan, allSpans) {
+      var owner = null;
+      for (var i = 0; i < allSpans.length; i++) {
+        var span = allSpans[i];
+        if (span.action.action_type !== 'message') continue;
+        if (!span.action.action_name || span.action.action_name.indexOf('llm_call:') !== 0) continue;
+        if (span.startMs <= thinkingSpan.endMs && span.endMs >= thinkingSpan.endMs) {
+          if (!owner || span.endMs < owner.endMs) owner = span;
+        }
+      }
+      return owner ? owner.startMs : null;
+    }
+
+    // For thinking rows without explicit duration, infer a visible span from the
+    // previous action end to current thinking timestamp.
+    var spansByEndTime = spans.slice().sort(function(a, b) {
+      var diff = a.endMs - b.endMs;
+      if (diff !== 0) return diff;
+      return a.idx - b.idx;
+    });
+    var prevEndMs = null;
+    spansByEndTime.forEach(function(span) {
+      if (
+        span.action.action_type === 'thinking' &&
+        (span.action.duration_ms == null || span.action.duration_ms <= 0) &&
+        prevEndMs != null &&
+        span.endMs > prevEndMs
+      ) {
+        var ownerLlmStartMs = findOwnerLlmStartMs(span, spans);
+        var inferredStartMs = prevEndMs;
+        if (ownerLlmStartMs != null) {
+          inferredStartMs = Math.max(inferredStartMs, ownerLlmStartMs);
+        }
+        span.startMs = inferredStartMs;
+        span.displayDurationMs = span.endMs - span.startMs;
+      }
+      prevEndMs = Math.max(prevEndMs == null ? span.endMs : prevEndMs, span.endMs);
+    });
+
     // Determine time range
     var sessionStart = Math.min.apply(null, spans.map(function(s){ return s.startMs; }));
     var sessionEnd = Math.max.apply(null, spans.map(function(s){ return s.endMs; }));
     var totalDur = sessionEnd - sessionStart || 1;
 
     // ---- Sorting + auto-nesting ----
-    // Semantic priority: some action_types represent outer lifecycle, should rank first as parents
-    // agent_end = entire agent execution cycle, message(llm_call) = LLM call cycle
+    // We keep the data in chronological order inside a trace. Structural span
+    // priority is only a tie-breaker for near-identical timestamps.
     function typePriority(actionType) {
-      if (actionType === 'agent_end') return 0;   // outermost
-      if (actionType === 'message')   return 1;   // LLM call
-      return 10;                                    // others
+      if (actionType === 'agent_end') return 0;
+      if (actionType === 'message') return 1;
+      if (actionType === 'model_resolve') return 2;
+      if (actionType === 'prompt_build') return 3;
+      if (actionType === 'tool_call') return 2;
+      if (actionType === 'assistant_stream') return 4;
+      if (actionType === 'thinking') return 5;
+      if (actionType === 'tool_update') return 6;
+      return 10;
+    }
+    function canBecomeParent(actionType) {
+      return actionType === 'agent_end' || actionType === 'message' || actionType === 'tool_call';
     }
     // Sort by startMs asc; when startMs is close (within 2s), prioritize by semantic priority; then by duration desc
     spans.sort(function(a, b) {
       var startDiff = a.startMs - b.startMs;
-      if (Math.abs(startDiff) > 2000) return startDiff;
+      if (startDiff !== 0) return startDiff;
       var priA = typePriority(a.action.action_type);
       var priB = typePriority(b.action.action_type);
       if (priA !== priB) return priA - priB;
-      return (b.endMs - b.startMs) - (a.endMs - a.startMs);
+      var endDiff = a.endMs - b.endMs;
+      if (endDiff !== 0) return endDiff;
+      return a.idx - b.idx;
     });
 
+    var toolParentsById = {};
+    spans.forEach(function(span) {
+      if (span.action.action_type === 'tool_call') {
+        var toolCallId = getToolCallId(span.action);
+        if (!toolCallId) return;
+        if (!toolParentsById[toolCallId]) toolParentsById[toolCallId] = [];
+        toolParentsById[toolCallId].push(span);
+      }
+    });
+    Object.keys(toolParentsById).forEach(function(id) {
+      toolParentsById[id].sort(function(a, b) {
+        var diff = a.startMs - b.startMs;
+        if (diff !== 0) return diff;
+        return a.idx - b.idx;
+      });
+    });
+
+    function resolveExactToolParent(span, toolCallId) {
+      var candidates = toolParentsById[toolCallId];
+      if (!candidates || candidates.length === 0) return null;
+      var containing = null;
+      for (var i = 0; i < candidates.length; i++) {
+        var parent = candidates[i];
+        if (parent.startMs <= span.endMs + 50 && parent.endMs >= span.startMs - 1000) {
+          containing = parent;
+        }
+      }
+      if (containing) return containing;
+
+      var nearest = null;
+      var nearestGap = Infinity;
+      for (var j = 0; j < candidates.length; j++) {
+        var p = candidates[j];
+        var gap = Math.abs(p.endMs - span.endMs);
+        if (gap < nearestGap) {
+          nearest = p;
+          nearestGap = gap;
+        }
+      }
+      return nearest;
+    }
+
     // Auto-nesting: use "open parent" stack to determine depth
     // If a span's time range is fully contained within an earlier span, indent it
-    var parentStack = []; // { startMs, endMs, level }
+    var parentStack = []; // { startMs, endMs, level, actionType }
     var flatSpans = [];
 
     spans.forEach(function(span) {
+      var exactToolParent = null;
+      var spanToolCallId = getToolCallId(span.action);
+      if (span.action.action_type !== 'tool_call' && spanToolCallId) {
+        exactToolParent = resolveExactToolParent(span, spanToolCallId);
+      }
+
       // Pop completed parents
       while (parentStack.length > 0 &&
              parentStack[parentStack.length - 1].endMs < span.startMs - 1000) {
         parentStack.pop();
       }
 
-      // Current span depth = number of containing parents
-      span.level = parentStack.length;
+      // Prefer exact tool-call linkage over duration-based guesses.
+      if (exactToolParent) {
+        span.level = exactToolParent.level + 1;
+      } else if (span.action.action_type === 'tool_call') {
+        // Tool calls should be peer spans under the current non-tool parent
+        // (e.g. under llm_call), not nested under previous tool_call rows.
+        span.level = parentStack.filter(function(p) {
+          return p.actionType !== 'tool_call';
+        }).length;
+      } else if (span.action.action_type === 'thinking') {
+        // Keep thinking on the same layer as tool_call to avoid drifting
+        // into nested tool sub-rows.
+        span.level = parentStack.filter(function(p) {
+          return p.actionType !== 'tool_call';
+        }).length;
+      } else {
+        // Current span depth = number of containing parents
+        span.level = parentStack.length;
+      }
 
       flatSpans.push(span);
 
-      // Spans with duration can become parents ("wrapper" bars in waterfall chart)
+      // Only structural spans with real duration can become parents in the tree.
       var dur = span.endMs - span.startMs;
-      if (dur > 100) { // only spans > 100ms become parents
-        parentStack.push({ startMs: span.startMs, endMs: span.endMs, level: span.level });
+      if (dur > 100 && canBecomeParent(span.action.action_type)) {
+        parentStack.push({
+          startMs: span.startMs,
+          endMs: span.endMs,
+          level: span.level,
+          actionType: span.action.action_type
+        });
       }
     });
 
-    // Session metadata
-    var firstAction = actions[0];
-    var lastAction = actions[actions.length - 1];
+    flatSpans.forEach(function(span, idx) {
+      span.flatIdx = idx;
+    });
+
+    function splitTraceGroups(spansInOrder) {
+      var runGroupsById = {};
+      var runGroups = [];
+
+      spansInOrder.forEach(function(span) {
+        var runId = getActionRunId(span.action);
+        if (!runId) return;
+        if (!runGroupsById[runId]) {
+          var group = {
+            runId: runId,
+            rootSpan: null,
+            items: [],
+            startMs: span.startMs,
+            endMs: span.endMs
+          };
+          runGroupsById[runId] = group;
+          runGroups.push(group);
+        }
+        var g = runGroupsById[runId];
+        g.items.push(span);
+        g.startMs = Math.min(g.startMs, span.startMs);
+        g.endMs = Math.max(g.endMs, span.endMs);
+      });
+
+      if (runGroups.length > 0) {
+        return runGroups
+          .map(function(g) { return { runId: g.runId, rootSpan: null, items: g.items }; })
+          .filter(function(g) { return g.items && g.items.length; });
+      }
+
+      var rootSpans = spansInOrder.filter(function(span) {
+        return span.level === 0 && span.action.action_type === 'agent_end';
+      });
+
+      if (rootSpans.length === 0) {
+        return spansInOrder.length ? [{ rootSpan: null, items: spansInOrder.slice() }] : [];
+      }
+
+      var groups = rootSpans.map(function(rootSpan) {
+        return {
+          rootSpan: rootSpan,
+          items: [],
+          windowStart: rootSpan.startMs,
+          windowEnd: rootSpan.endMs + 1000
+        };
+      });
+
+      var orphanSpans = [];
+
+      spansInOrder.forEach(function(span) {
+        if (span.level === 0 && span.action.action_type === 'agent_end') return;
+
+        var targetGroup = null;
+        for (var i = 0; i < groups.length; i++) {
+          var group = groups[i];
+          var overlapsWindow = span.endMs >= group.windowStart - 1000 && span.startMs <= group.windowEnd;
+          if (overlapsWindow) {
+            targetGroup = group;
+          }
+        }
+
+        if (targetGroup) {
+          targetGroup.items.push(span);
+        } else {
+          orphanSpans.push(span);
+        }
+      });
+
+      var normalizedGroups = groups.map(function(group) {
+        return {
+          runId: '',
+          rootSpan: group.rootSpan,
+          items: group.items
+        };
+      });
+
+      if (orphanSpans.length > 0) {
+        normalizedGroups.unshift({ runId: '', rootSpan: null, items: orphanSpans });
+      }
+
+      return normalizedGroups;
+    }
+
+    var normalizedTraceQuery = normalizeTraceSearch(traceSearchQuery);
+    var matchedFlatIdxs = [];
+    var matchedByIdx = {};
+    var snippetByIdx = {};
+
+    if (normalizedTraceQuery) {
+      flatSpans.forEach(function(span) {
+        if (span.action.action_type === 'agent_end' && span.level === 0) return;
+        var searchText = getActionSearchText(span.action).toLowerCase();
+        if (searchText.indexOf(normalizedTraceQuery) >= 0) {
+          matchedFlatIdxs.push(span.flatIdx);
+          matchedByIdx[span.flatIdx] = true;
+          snippetByIdx[span.flatIdx] = getActionSearchSnippet(span.action, normalizedTraceQuery);
+        }
+      });
+    }
+
+    // Session metadata (chronological boundaries)
+    var actionsByTime = actions.slice().sort(function(a, b) {
+      return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+    });
+    var firstAction = actionsByTime[0];
+    var lastAction = actionsByTime[actionsByTime.length - 1];
     var modelName = '';
     var userId = firstAction.user_id || '';
     for (var i = 0; i < actions.length; i++) {
@@ -1527,7 +2414,9 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
 
     // Trace header
     html += '<div class="trace-header">';
+    html += '<div class="trace-header-top">';
     html += '<a href="#/traces" class="trace-back">← Back to Traces</a>';
+    html += '</div>';
     html += '<div class="trace-title">Session: ' + esc(sessionId) + '</div>';
     html += '<div class="trace-meta">';
     html += '<span class="trace-meta-item"><b>Agent:</b> ' + esc(userId) + '</span>';
@@ -1535,7 +2424,27 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
     html += '<span class="trace-meta-item"><b>Duration:</b> ' + fmtDur(totalDur) + '</span>';
     html += '<span class="trace-meta-item"><b>Actions:</b> ' + actions.length + '</span>';
     html += '<span class="trace-meta-item"><b>Time:</b> ' + fmtTime(firstAction.created_at) + ' → ' + fmtTime(lastAction.created_at) + '</span>';
-    html += '</div></div>';
+    html += '</div>';
+    html += '<div class="filter-bar trace-search-bar">';
+    html += '<input type="text" id="trace-search-input" placeholder="Search this session: action, input, output, model..." value="' + esc(traceSearchQuery) + '" onkeydown="if(event.key===\\'Enter\\')applyTraceSearch()">';
+    html += '<div class="trace-search-nav">';
+    html += '<button class="icon-refresh-btn" onclick="refreshCurrentTrace()" title="Refresh current trace">' + ICON_REFRESH + '</button>';
+    html += '<button onclick="applyTraceSearch()">Search</button>';
+    html += '<button onclick="traceSearchStep(-1)"' + (matchedFlatIdxs.length ? '' : ' disabled') + '>Prev</button>';
+    html += '<button onclick="traceSearchStep(1)"' + (matchedFlatIdxs.length ? '' : ' disabled') + '>Next</button>';
+    html += '<button class="btn-clear" onclick="clearTraceSearch()">Clear</button>';
+    html += '</div>';
+    html += '<div class="trace-search-stats">';
+    if (normalizedTraceQuery) {
+      html += matchedFlatIdxs.length
+        ? ('Matched ' + matchedFlatIdxs.length + ' action' + (matchedFlatIdxs.length > 1 ? 's' : '') + ' in this session')
+        : 'No matches in this session';
+    } else {
+      html += 'Search within this session';
+    }
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
 
     // Security alert banner (if any)
     if (traceAlerts.length > 0) {
@@ -1550,44 +2459,94 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
     }
 
     // Waterfall
+    if (normalizedTraceQuery && matchedFlatIdxs.length === 0) {
+      html += '<div class="trace-search-empty">No action matched "' + esc(traceSearchQuery) + '". Try a tool name, model, prompt fragment, or error text.</div>';
+    }
     html += '<div class="waterfall">';
     html += '<div class="wf-header"><span>Name</span><span style="text-align:right;padding-right:14px">Duration</span><span>Timeline</span></div>';
 
-    var WF_FOLD_LIMIT = 100;
-    var needFold = flatSpans.length > WF_FOLD_LIMIT;
+    function getVisibleGroupItems(group) {
+      return group.items && group.items.length ? group.items : (group.rootSpan ? [group.rootSpan] : []);
+    }
 
-    flatSpans.forEach(function(span, fi) {
-      var a = span.action;
-      var color = typeColor(a.action_type);
-      var leftPct = ((span.startMs - sessionStart) / totalDur * 100).toFixed(2);
-      var widthPct = Math.max(((span.endMs - span.startMs) / totalDur * 100), 0.3).toFixed(2);
-      var indent = span.level * 20;
+    function getPrimaryGroupActionIdx(group) {
+      var visibleItems = getVisibleGroupItems(group);
+      return visibleItems[0] ? visibleItems[0].flatIdx : -1;
+    }
 
-      // When over 100 rows, fold the rest
-      if (needFold && fi === WF_FOLD_LIMIT) {
-        html += '<div class="wf-fold" id="wf-fold-btn" onclick="expandWaterfall()">';
-        html += '<span>▼ Show remaining ' + (flatSpans.length - WF_FOLD_LIMIT) + ' actions (' + flatSpans.length + ' total)</span>';
-        html += '</div>';
+    var traceGroups = splitTraceGroups(flatSpans).reverse();
+    var TRACE_COLLAPSE_LIMIT = 30;
+
+    traceGroups.forEach(function(group, groupIdx) {
+      var allGroupSpans = group.rootSpan ? [group.rootSpan].concat(group.items) : group.items.slice();
+      var visibleGroupItems = getVisibleGroupItems(group).slice().sort(function(a, b) {
+        var startDiff = a.startMs - b.startMs;
+        if (startDiff !== 0) return startDiff;
+        var priA = typePriority(a.action.action_type);
+        var priB = typePriority(b.action.action_type);
+        if (priA !== priB) return priA - priB;
+        var endDiff = a.endMs - b.endMs;
+        if (endDiff !== 0) return endDiff;
+        return a.idx - b.idx;
+      });
+      var orderedByCreated = allGroupSpans.slice().sort(function(a, b) {
+        return new Date(a.action.created_at).getTime() - new Date(b.action.created_at).getTime();
+      });
+      var groupStart = orderedByCreated[0];
+      var groupEnd = orderedByCreated[orderedByCreated.length - 1];
+      var groupStartMs = Math.min.apply(null, allGroupSpans.map(function(span) { return span.startMs; }));
+      var groupEndMs = Math.max.apply(null, allGroupSpans.map(function(span) { return span.endMs; }));
+      var groupTotalDur = groupEndMs - groupStartMs || 1;
+      var groupMatchIdxs = visibleGroupItems.filter(function(span) { return !!matchedByIdx[span.flatIdx]; }).map(function(span) { return span.flatIdx; });
+      var groupSnippet = groupMatchIdxs.length ? snippetByIdx[groupMatchIdxs[0]] : '';
+      var shouldCollapseForSearch = normalizedTraceQuery && groupMatchIdxs.length === 0;
+      var shouldCollapseForLength = !normalizedTraceQuery && visibleGroupItems.length > TRACE_COLLAPSE_LIMIT;
+      var runDuration = group.rootSpan ? group.rootSpan.action.duration_ms : (groupEndMs - groupStartMs);
+      var collapsedCls = (shouldCollapseForSearch || shouldCollapseForLength) ? ' collapsed' : '';
+      html += '<div class="wf-group-section' + collapsedCls + '" data-group-idx="' + groupIdx + '">';
+      html += '<div class="wf-group" onclick="toggleTraceGroup(' + groupIdx + ')">';
+      html += '<div class="wf-group-main">';
+      html += '<span class="wf-group-toggle" data-group-toggle="' + groupIdx + '">' + (collapsedCls ? '▸' : '▾') + '</span>';
+      html += '<div class="wf-group-copy">';
+      html += '<div class="wf-group-title-row">';
+      var runTitle = 'Trace ' + (groupIdx + 1);
+      html += '<span class="wf-group-title">' + runTitle + '</span>';
+      if (runDuration != null) {
+        html += '<span class="wf-group-hit">' + fmtDur(runDuration) + '</span>';
+      }
+      if (groupMatchIdxs.length) {
+        html += '<span class="wf-group-hit">' + groupMatchIdxs.length + ' hit' + (groupMatchIdxs.length > 1 ? 's' : '') + '</span>';
+      }
+      html += '</div>';
+      if (groupSnippet) {
+        html += '<div class="wf-group-snippet">' + highlightSearchText(groupSnippet, normalizedTraceQuery) + '</div>';
+      } else if (group.rootSpan) {
+        html += '<div class="wf-group-snippet">' + esc(group.rootSpan.action.action_name) + ' completed this run</div>';
       }
-
-      var hiddenCls = (needFold && fi >= WF_FOLD_LIMIT) ? ' wf-row--hidden' : '';
-      html += '<div class="wf-row' + hiddenCls + (fi === selectedActionIdx ? ' selected' : '') + '" data-idx="' + fi + '" onclick="selectAction(' + fi + ')">';
-      html += '<div class="wf-name">';
-      if (indent > 0) html += '<span class="indent" style="width:' + indent + 'px;display:inline-flex;justify-content:center">└</span>';
-      html += '<span class="dot" style="background:' + color + '"></span>';
-      html += '<span class="text">' + esc(a.action_name) + '</span>';
       html += '</div>';
-      html += '<div class="wf-dur">' + fmtDur(a.duration_ms) + '</div>';
-      html += '<div class="wf-bar-wrap"><div class="wf-bar" style="left:' + leftPct + '%;width:' + widthPct + '%;background:' + color + '"></div></div>';
       html += '</div>';
-    });
+      html += '<span class="wf-group-meta">' + fmtTime(new Date(groupStartMs).toISOString()) + ' → ' + fmtTime(groupEnd.action.created_at) + ' | ' + visibleGroupItems.length + ' actions</span>';
+      html += '</div>';
 
-    // Timeline ticks
-    html += '<div class="wf-ticks"><span></span><span></span><div class="wf-ticks-bar">';
-    for (var t = 0; t <= 4; t++) {
-      html += '<span class="wf-tick">' + fmtDur(Math.round(totalDur * t / 4)) + '</span>';
-    }
-    html += '</div></div>';
+      visibleGroupItems.forEach(function(span) {
+        var a = span.action;
+        var color = typeColor(a.action_type);
+        var leftPct = ((span.startMs - groupStartMs) / groupTotalDur * 100).toFixed(2);
+        var widthPct = Math.max(((span.endMs - span.startMs) / groupTotalDur * 100), 0.3).toFixed(2);
+        var indent = span.level * 20;
+        var matchCls = matchedByIdx[span.flatIdx] ? ' wf-row--match' : '';
+        html += '<div class="wf-row' + matchCls + (span.flatIdx === selectedActionIdx ? ' selected' : '') + '" data-action-idx="' + span.flatIdx + '" onclick="selectAction(' + span.flatIdx + ', false)">';
+        html += '<div class="wf-name">';
+        if (indent > 0) html += '<span class="indent" style="width:' + indent + 'px;display:inline-flex;justify-content:center">└</span>';
+        html += '<span class="dot" style="background:' + color + '"></span>';
+        html += '<span class="text">' + highlightSearchText(a.action_name, normalizedTraceQuery) + '</span>';
+        html += '</div>';
+        html += '<div class="wf-dur">' + fmtDur(span.displayDurationMs != null ? span.displayDurationMs : a.duration_ms) + '</div>';
+        html += '<div class="wf-bar-wrap"><div class="wf-bar" style="left:' + leftPct + '%;width:' + widthPct + '%;background:' + color + '"></div></div>';
+        html += '</div>';
+      });
+      html += '</div>';
+    });
     html += '</div>'; // .waterfall
     html += '</div>'; // .trace-top
 
@@ -1603,6 +2562,8 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
 
     // Store spans for detail rendering
     window.__traceSpans = flatSpans;
+    window.__traceMatchActionIdxs = matchedFlatIdxs;
+    window.__traceSearchCursor = 0;
 
     // Init resize drag
     initResizeDrag();
@@ -1621,18 +2582,31 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
         });
       }
     }
-    // If no highlight match, default to first LLM call or first action
+    if (autoIdx < 0 && matchedFlatIdxs.length > 0) {
+      autoIdx = matchedFlatIdxs[0];
+    }
+    if (autoIdx >= 0) {
+      var autoSpan = flatSpans[autoIdx];
+      if (autoSpan && autoSpan.action.action_type === 'agent_end' && autoSpan.level === 0) {
+        var containingGroup = traceGroups.find(function(group) {
+          return group.rootSpan && group.rootSpan.flatIdx === autoIdx;
+        });
+        autoIdx = containingGroup ? getPrimaryGroupActionIdx(containingGroup) : autoIdx;
+      }
+    }
+    // If no highlight match, default to the newest trace's first action
     if (autoIdx < 0) {
-      autoIdx = flatSpans.findIndex(function(s){ return s.action.action_type === 'message'; });
+      autoIdx = traceGroups[0] ? getPrimaryGroupActionIdx(traceGroups[0]) : -1;
     }
     if (autoIdx < 0) autoIdx = 0;
 
-    // If the target action is in the folded section, expand first
-    if (needFold && autoIdx >= WF_FOLD_LIMIT) {
-      expandWaterfall();
+    if (matchedFlatIdxs.length > 0) {
+      var selectedMatchIdx = matchedFlatIdxs.indexOf(autoIdx);
+      window.__traceSearchCursor = selectedMatchIdx >= 0 ? selectedMatchIdx : 0;
     }
 
-    selectAction(autoIdx);
+    var shouldAutoScroll = !!normalizedTraceQuery || !!highlightAction || !!highlightTime;
+    selectAction(autoIdx, shouldAutoScroll);
 
   } catch(err) {
     app.innerHTML = renderLayout('trace',
@@ -1643,12 +2617,41 @@ async function renderTraceDetail(sessionId, highlightAction, highlightTime) {
   }
 }
 
-/* ---------- expand folded waterfall rows ---------- */
-window.expandWaterfall = function() {
-  var hidden = document.querySelectorAll('.wf-row--hidden');
-  hidden.forEach(function(r) { r.classList.remove('wf-row--hidden'); });
-  var btn = document.getElementById('wf-fold-btn');
-  if (btn) btn.style.display = 'none';
+window.toggleTraceGroup = function(groupIdx) {
+  var section = document.querySelector('.wf-group-section[data-group-idx="' + groupIdx + '"]');
+  if (!section) return;
+  section.classList.toggle('collapsed');
+  var toggle = section.querySelector('[data-group-toggle="' + groupIdx + '"]');
+  if (toggle) {
+    toggle.textContent = section.classList.contains('collapsed') ? '▸' : '▾';
+  }
+};
+
+window.applyTraceSearch = function() {
+  var input = document.getElementById('trace-search-input');
+  traceSearchQuery = input ? input.value.trim() : '';
+  if (!currentTraceSessionId) return;
+  renderTraceDetail(currentTraceSessionId, currentTraceHighlightAction, currentTraceHighlightTime);
+};
+
+window.clearTraceSearch = function() {
+  traceSearchQuery = '';
+  if (!currentTraceSessionId) return;
+  renderTraceDetail(currentTraceSessionId, currentTraceHighlightAction, currentTraceHighlightTime);
+};
+
+window.refreshCurrentTrace = function() {
+  if (!currentTraceSessionId) return;
+  renderTraceDetail(currentTraceSessionId, currentTraceHighlightAction, currentTraceHighlightTime);
+};
+
+window.traceSearchStep = function(delta) {
+  var matches = window.__traceMatchActionIdxs || [];
+  if (!matches.length) return;
+  var cursor = Number(window.__traceSearchCursor || 0);
+  cursor = (cursor + delta + matches.length) % matches.length;
+  window.__traceSearchCursor = cursor;
+  selectAction(matches[cursor], true);
 };
 
 /* ---------- resize drag logic ---------- */
@@ -1656,17 +2659,18 @@ function initResizeDrag() {
   var handle = document.getElementById('trace-resize');
   if (!handle) return;
 
-  var startY = 0;
-  var startBottomH = 0;
-  var bottomEl = null;
+  var startX = 0;
+  var startRightW = 0;
+  var rightEl = null;
 
   function onMouseDown(e) {
     e.preventDefault();
     e.stopPropagation();
-    bottomEl = document.querySelector('.trace-bottom');
-    if (!bottomEl) return;
-    startY = e.clientY != null ? e.clientY : (e.touches ? e.touches[0].clientY : 0);
-    startBottomH = bottomEl.getBoundingClientRect().height;
+    if (window.innerWidth <= 900) return;
+    rightEl = document.querySelector('.trace-bottom');
+    if (!rightEl) return;
+    startX = e.clientX != null ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    startRightW = rightEl.getBoundingClientRect().width;
     handle.classList.add('active');
     document.body.classList.add('resizing');
     document.addEventListener('mousemove', onMouseMove, true);
@@ -1678,10 +2682,10 @@ function initResizeDrag() {
   function onMouseMove(e) {
     e.preventDefault();
     e.stopPropagation();
-    var clientY = e.clientY != null ? e.clientY : (e.touches ? e.touches[0].clientY : 0);
-    var diff = startY - clientY;
-    var newH = Math.max(140, Math.min(window.innerHeight * 0.7, startBottomH + diff));
-    bottomEl.style.flexBasis = newH + 'px';
+    var clientX = e.clientX != null ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    var diff = startX - clientX;
+    var newW = Math.max(320, Math.min(window.innerWidth * 0.55, startRightW + diff));
+    rightEl.style.flexBasis = newW + 'px';
   }
 
   function onMouseUp(e) {
@@ -1698,20 +2702,44 @@ function initResizeDrag() {
 }
 
 /* ---------- select action (renders detail in bottom pane) ---------- */
-window.selectAction = function(fi) {
+window.selectAction = function(fi, shouldScroll) {
   selectedActionIdx = fi;
   var spans = window.__traceSpans;
   if (!spans || fi < 0 || fi >= spans.length) return;
+  var matches = window.__traceMatchActionIdxs || [];
+  var matchPos = matches.indexOf(fi);
+  if (matchPos >= 0) {
+    window.__traceSearchCursor = matchPos;
+  }
 
   // Update selected row styling
   var rows = document.querySelectorAll('.wf-row');
-  rows.forEach(function(r, i) {
-    r.classList.toggle('selected', i === fi);
+  rows.forEach(function(r) {
+    r.classList.toggle('selected', Number(r.getAttribute('data-action-idx')) === fi);
   });
 
   // Scroll the selected row into view within the top pane
-  if (rows[fi]) {
-    rows[fi].scrollIntoView({block:'nearest',behavior:'smooth'});
+  var row = document.querySelector('.wf-row[data-action-idx="' + fi + '"]');
+  if (row) {
+    var section = row.closest('.wf-group-section');
+    if (section && section.classList.contains('collapsed')) {
+      section.classList.remove('collapsed');
+      var toggle = section.querySelector('[data-group-toggle]');
+      if (toggle) toggle.textContent = '▾';
+    }
+  }
+  if (row && shouldScroll === true) {
+    var traceTop = document.querySelector('.trace-top');
+    if (traceTop) {
+      var header = traceTop.querySelector('.trace-header');
+      var headerHeight = header ? header.getBoundingClientRect().height : 0;
+      var traceTopRect = traceTop.getBoundingClientRect();
+      var rowRect = row.getBoundingClientRect();
+      var targetTop = (rowRect.top - traceTopRect.top) + traceTop.scrollTop - headerHeight - 8;
+      traceTop.scrollTo({ top: Math.max(0, targetTop), behavior: 'smooth' });
+    } else {
+      row.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
   }
 
   var span = spans[fi];
@@ -1719,6 +2747,7 @@ window.selectAction = function(fi) {
   var color = typeColor(a.action_type);
   var input = parseJson(a.input_params);
   var output = parseJson(a.output_result);
+  var mediaPaths = Array.from(new Set(collectMediaPaths(input))).slice(0, 8);
 
   var html = '<div class="detail-panel">';
 
@@ -1742,20 +2771,39 @@ window.selectAction = function(fi) {
 
   // Body: Input / Output side by side
   html += '<div class="detail-body">';
+  var useStructuredView = !isToolActionType(a.action_type);
 
   html += '<div class="detail-section">';
   html += '<h4>Input</h4>';
-  if (input) {
-    html += '<div class="json-view">' + prettyJson(input) + '</div>';
+  if (input !== null && input !== undefined) {
+    if (useStructuredView) {
+      html += renderStructuredFields(input);
+    } else {
+      html += '<div class="json-view">' + prettyJson(input) + '</div>';
+    }
   } else {
     html += '<div class="json-view" style="color:var(--muted)">null</div>';
   }
+  if (mediaPaths.length > 0) {
+    html += '<div class="media-preview">';
+    mediaPaths.forEach(function(p) {
+      var mediaUrl = buildMediaUrl(p);
+      html += '<a class="media-card" href="' + mediaUrl + '" target="_blank" rel="noopener noreferrer" title="Open full image">';
+      html += '<img src="' + mediaUrl + '" loading="lazy" alt="inbound-media" onerror="onMediaImgError(this)">';
+      html += '</a>';
+    });
+    html += '</div>';
+  }
   html += '</div>';
 
   html += '<div class="detail-section">';
   html += '<h4>Output</h4>';
-  if (output) {
-    html += '<div class="json-view">' + prettyJson(output) + '</div>';
+  if (output !== null && output !== undefined) {
+    if (useStructuredView) {
+      html += renderStructuredFields(output);
+    } else {
+      html += '<div class="json-view">' + prettyJson(output) + '</div>';
+    }
   } else {
     html += '<div class="json-view" style="color:var(--muted)">null</div>';
   }
@@ -1772,5 +2820,6 @@ window.selectAction = function(fi) {
 
 /* ---------- init ---------- */
 router();
+scheduleAlertBadgeLoad();
 `;
 //# sourceMappingURL=ui.js.map