@nice2dev/ui-monitoring 1.0.11 → 1.0.14

package/README.md

@@ -14,3 +14,17 @@ npm install @nice2dev/ui-monitoring @nice2dev/ui
 ```
 
 Requires `@nice2dev/ui` as a peer dependency for shared base types.
+
+## Styling
+
+This package ships unstyled component logic. Import the shared CSS bundle once at your app entrypoint:
+
+```tsx
+import '@nice2dev/ui/style.css';
+```
+
+Optional: opt into the legacy shorthand token aliases (`--bg-*`, `--text-*`, `--border-*`, ...) when migrating from a custom design-token system:
+
+```tsx
+import '@nice2dev/ui/css/legacy-bg-text-aliases.css';
+```

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),F={trace:{color:"var(--text-muted, #888)",bg:"#88888822",icon:"⋯"},debug:{color:"var(--color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"🔍"},info:{color:"var(--color-primary, #3b82f6)",bg:"#3b82f622",icon:"ℹ️"},warn:{color:"var(--color-warning, #f59e0b)",bg:"#f59e0b22",icon:"⚠️"},error:{color:"var(--color-error, #ef4444)",bg:"#ef444422",icon:"❌"},fatal:{color:"var(--color-error, #dc2626)",bg:"#dc262622",icon:"💀"}},Z=[{label:"Last 5 min",value:"now-5m"},{label:"Last 15 min",value:"now-15m"},{label:"Last 30 min",value:"now-30m"},{label:"Last 1 hour",value:"now-1h"},{label:"Last 3 hours",value:"now-3h"},{label:"Last 6 hours",value:"now-6h"},{label:"Last 12 hours",value:"now-12h"},{label:"Last 24 hours",value:"now-24h"},{label:"Last 7 days",value:"now-7d"}],ee=({logs:c,streams:k,totalCount:I,isLoading:p,savedQueries:B,patterns:v=[],onQueryExecute:V,onQuerySave:O,onQueryDelete:P,onStreamToggle:U,onLogClick:T,onExport:w,onTailStart:_,onTailStop:H,isTailing:z=!1,className:b,style:A,"data-testid":q})=>{const[C,R]=d.useState(""),[N,W]=d.useState("now-1h"),[M,Y]=d.useState(1e3),[L,J]=d.useState(new Set(["trace","debug","info","warn","error","fatal"])),[y,Q]=d.useState(new Set),[K,D]=d.useState(null),[t,o]=d.useState(!1),[n,u]=d.useState(""),[l,m]=d.useState("logs"),[x,j]=d.useState(""),i=d.useMemo(()=>c.filter(r=>!(!L.has(r.level)||x&&!r.message.toLowerCase().includes(x.toLowerCase()))),[c,L,x]),f=d.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return c.forEach(s=>r[s.level]++),r},[c]),g=()=>{V({query:C,timeRange:{from:N,to:"now"},limit:M,direction:"backward"})},h=r=>{Q(s=>{const a=new Set(s);return a.has(r)?a.delete(r):a.add(r),a})},G=r=>{J(s=>{const a=new Set(s);return a.has(r)?a.delete(r):a.add(r),a})},$=()=>{n.trim()&&(O(n,C),o(!1),u(""))},E=r=>{if(!x)return r;const s=new RegExp(`(${x})`,"gi");return r.replace(s,'<mark style="background: #f59e0b; color: black; padding: 0 2px; border-radius: 2px;">$1</mark>')};return e.jsxs("div",{className:`nice-log-explorer ${b||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...A},"data-testid":q,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:C,onChange:r=>R(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&g(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:N,onChange:r=>W(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:Z.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:g,disabled:p,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:p?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:p?.7:1},children:[p?"⏳":"🔍"," Search"]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾"}),_&&e.jsx("button",{onClick:z?H:_,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:z?"var(--color-success, #22c55e)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:z?"⏹ Stop":"▶ Tail"})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:"Levels:"}),Object.keys(F).map(r=>{const s=F[r],a=f[r],S=L.has(r);return e.jsxs("button",{onClick:()=>G(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:S?s.bg:"transparent",color:S?s.color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:S?1:.5},children:[r.toUpperCase()," (",a,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:x,onChange:r=>j(r.target.value),placeholder:"Filter results...",style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"150px"}})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[e.jsxs("div",{style:{width:"220px",borderRight:"1px solid var(--border-color, #333)",display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"12px"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Log Streams"}),k.map(r=>e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 0",cursor:"pointer",fontSize:"12px"},children:[e.jsx("input",{type:"checkbox",defaultChecked:!0,onChange:s=>U(r.id,s.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),k.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No streams discovered"})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Saved Queries"}),B.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>R(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:s=>{s.stopPropagation(),P(r.id)},style:{background:"none",border:"none",color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:"✕"})]},r.id)),B.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No saved queries"})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",borderBottom:"1px solid var(--border-color, #333)"},children:[[{id:"logs",label:`📜 Logs (${i.length})`},{id:"patterns",label:`🔬 Patterns (${v.length})`}].map(r=>e.jsx("button",{onClick:()=>m(r.id),style:{padding:"10px 20px",border:"none",background:l===r.id?"var(--bg-elevated, #1e1e1e)":"transparent",color:l===r.id?"var(--bg-primary, #fff)":"var(--text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:l===r.id?"2px solid #3b82f6":"2px solid transparent"},children:r.label},r.id)),e.jsx("div",{style:{flex:1}}),e.jsxs("div",{style:{display:"flex",gap:"8px",padding:"8px"},children:[e.jsx("button",{onClick:()=>w("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"JSON"}),e.jsx("button",{onClick:()=>w("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),l==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[i.map(r=>{const s=F[r.level],a=y.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid #252525"},children:[e.jsxs("div",{onClick:()=>h(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:a?"var(--bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:s.bg,color:s.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:E(r.message)}})]}),a&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--bg-elevated, #252525)",borderTop:"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"12px",marginBottom:"12px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Source"}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Host"}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Trace ID"}),e.jsx("div",{style:{fontSize:"11px",fontFamily:"monospace"},children:r.traceId})]})]}),Object.keys(r.attributes).length>0&&e.jsxs("div",{style:{marginBottom:"12px"},children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Attributes"}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([S,X])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[S,"=",String(X)]},S))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Stack Trace"}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--color-error, #ef4444)"},children:r.stackTrace})]}),e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(r),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"View Details"}),r.traceId&&e.jsx("button",{onClick:()=>R(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"Show Trace"})]})]})]},r.id)}),i.length===0&&!p&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"📭"}),e.jsx("p",{style:{marginTop:"16px"},children:"No logs match your query"})]}),p&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"⏳"}),e.jsx("p",{style:{marginTop:"16px"},children:"Loading logs..."})]})]}),l==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[v.map(r=>{const s=F[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${s.color}`},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"8px"},children:[e.jsx("span",{style:{fontFamily:"monospace",fontSize:"12px",fontWeight:500},children:r.pattern}),e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),v.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:e.jsx("p",{children:"No patterns detected. Run a query first."})})]})]})]}),t&&e.jsx("div",{style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"400px",background:"var(--bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:"Save Query"}),e.jsx("input",{type:"text",value:n,onChange:r=>u(r.target.value),placeholder:"Query name...",style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",marginBottom:"16px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px"},children:[e.jsx("button",{onClick:()=>o(!1),style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Cancel"}),e.jsx("button",{onClick:$,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Save"})]})]})})]})},re={critical:{color:"var(--color-error, #ef4444)",icon:"🔴"},warning:{color:"var(--color-warning, #f59e0b)",icon:"🟡"},info:{color:"var(--color-primary, #3b82f6)",icon:"🔵"}},te=[{from:"now-5m",to:"now",display:"Last 5 minutes"},{from:"now-15m",to:"now",display:"Last 15 minutes"},{from:"now-1h",to:"now",display:"Last 1 hour"},{from:"now-3h",to:"now",display:"Last 3 hours"},{from:"now-6h",to:"now",display:"Last 6 hours"},{from:"now-12h",to:"now",display:"Last 12 hours"},{from:"now-24h",to:"now",display:"Last 24 hours"},{from:"now-7d",to:"now",display:"Last 7 days"},{from:"now-30d",to:"now",display:"Last 30 days"}],oe=({dashboard:c,metrics:k,alerts:I=[],timeRanges:p=te,onTimeRangeChange:B,onVariableChange:v,onPanelEdit:V,onPanelAdd:O,onPanelRemove:P,onPanelMove:U,onAlertAcknowledge:T,onAlertSilence:w,onQueryExecute:_,onDashboardSave:H,onRefresh:z,isEditing:b=!1,onEditModeToggle:A,className:q,style:C,"data-testid":R})=>{const[N,W]=d.useState(!1),[M,Y]=d.useState(!0),[L,J]=d.useState(null),y=I.filter(t=>t.status==="firing"),Q=t=>{var n,u,l;const o=(n=t.queries[0])!=null&&n.expression?k[t.queries[0].expression]:null;switch(t.type){case"stat":return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",flexDirection:"column"},children:[e.jsx("div",{style:{fontSize:"48px",fontWeight:600,color:o?D(o.currentValue,t.thresholds):"var(--text-primary, #e0e0e0)"},children:(o==null?void 0:o.currentValue.toFixed(2))??"-"}),(o==null?void 0:o.unit)&&e.jsx("div",{style:{fontSize:"14px",color:"var(--text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":const m=(o==null?void 0:o.currentValue)??0,x=((l=(u=t.thresholds)==null?void 0:u[t.thresholds.length-1])==null?void 0:l.value)??100,j=Math.min(m/x*100,100);return e.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%"},children:e.jsxs("svg",{viewBox:"0 0 100 60",style:{width:"100%",maxWidth:"200px"},children:[e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:"#333",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:D(m,t.thresholds),strokeWidth:"8",strokeDasharray:`${j*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"#e0e0e0",fontSize:"16",fontWeight:"600",children:m.toFixed(1)})]})});case"timeseries":return K(t,o);case"table":return e.jsx("div",{style:{overflow:"auto",height:"100%"},children:e.jsxs("table",{style:{width:"100%",fontSize:"11px",borderCollapse:"collapse"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{background:"var(--bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--border-color, #333)"},children:"Time"}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--border-color, #333)"},children:"Value"})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((i,f)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)"},children:new Date(i.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)",textAlign:"right"},children:[i.value.toFixed(2)," ",o.unit]})]},f))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((i,f)=>{var $,E;const g=k[i.expression],h=(g==null?void 0:g.currentValue)??0,G=((E=($=t.thresholds)==null?void 0:$[t.thresholds.length-1])==null?void 0:E.value)??100;return e.jsxs("div",{style:{marginBottom:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",marginBottom:"4px"},children:[e.jsx("span",{children:i.legendFormat??i.expression}),e.jsx("span",{children:h.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${h/G*100}%`,background:D(h,t.thresholds),borderRadius:"4px"}})})]},f)})});case"text":return e.jsx("div",{style:{padding:"12px",fontSize:"12px",lineHeight:"1.6"},children:t.description});default:return e.jsx("div",{style:{padding:"12px",color:"var(--text-muted, #666)"},children:"Unsupported panel type"})}},K=(t,o)=>{const n=(o==null?void 0:o.values)??[];if(n.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--text-muted, #666)"},children:"No data"});const u=n.map(i=>i.value),l=Math.min(...u),x=Math.max(...u)-l||1,j=n.map((i,f)=>{const g=f/(n.length-1)*100,h=100-(i.value-l)/x*80;return`${g},${h}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(i=>e.jsx("line",{x1:"0",y1:i,x2:"100",y2:i,stroke:"#333",strokeWidth:"0.5"},i)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${j} 100,100`,fill:"rgba(59, 130, 246, 0.2)"}):null,e.jsx("polyline",{points:j,fill:"none",stroke:"#3b82f6",strokeWidth:"1"})]})},D=(t,o)=>{if(!o||o.length===0)return"var(--color-primary, #3b82f6)";for(let n=o.length-1;n>=0;n--)if(t>=o[n].value)return o[n].color;return"var(--color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${q||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...C},"data-testid":R,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsx("span",{style:{fontSize:"20px"},children:"📊"}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:c.name}),e.jsx("div",{style:{flex:1}}),y.length>0&&e.jsxs("button",{onClick:()=>W(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"#ef444422",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:["🔴 ",y.length," Alert",y.length!==1&&"s"]}),e.jsx("select",{value:c.timeRange.display,onChange:t=>{const o=p.find(n=>n.display===t.target.value);o&&B(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:p.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:z,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"🔄 Refresh"}),b?e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"+ Add Panel"}),e.jsx("button",{onClick:H,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾 Save"})]}):null,A&&e.jsx("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:b?"var(--color-warning, #f59e0b)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:b?"✓ Done":"✏️ Edit"})]}),c.variables.length>0&&M&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:c.variables.map(t=>{var o;return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("label",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:n=>v(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:n=>v(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(n=>e.jsx("option",{value:n,children:n},n))})]},t.id)})}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(12, 1fr)",gridAutoRows:"minmax(100px, auto)",gap:"16px"},children:c.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:L===t.id?"2px solid #3b82f6":"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #1e1e1e)"},children:[e.jsx("span",{style:{flex:1,fontSize:"12px",fontWeight:500},children:t.title}),b&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:()=>V(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:"✏️"}),e.jsx("button",{onClick:()=>P(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--color-error, #ef4444)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"✕"})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:Q(t)})]},t.id))})}),N&&e.jsx("div",{style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"600px",maxHeight:"80vh",background:"var(--bg-elevated, #252525)",borderRadius:"12px",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px",borderBottom:"1px solid var(--border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",y.length,")"]}),e.jsx("button",{onClick:()=>W(!1),style:{background:"none",border:"none",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:"✕"})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[I.map(t=>{const o=re[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx("span",{children:o.icon}),e.jsx("span",{style:{fontWeight:500},children:t.name}),e.jsx("span",{style:{marginLeft:"auto",padding:"2px 8px",borderRadius:"4px",background:t.status==="firing"?"#ef444422":"#22c55e22",color:t.status==="firing"?"var(--color-error, #ef4444)":"var(--color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--text-muted, #666)"},children:[e.jsxs("span",{children:["Value: ",t.value]}),e.jsx("span",{children:"•"}),e.jsxs("span",{children:["Threshold: ",t.threshold]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:new Date(t.startsAt).toLocaleString()})]}),t.status==="firing"&&T&&e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(t.id),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Acknowledge"}),w&&e.jsx("button",{onClick:()=>w(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Silence 1h"})]})]},t.id)}),I.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--text-muted, #666)"},children:"No alerts"})]})]})})]})};exports.NiceLogExplorer=ee;exports.NiceMetricsDashboard=oe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),$={trace:{color:"var(--text-muted, #888)",bg:"var(--nice-overlay-15, #88888822)",icon:"⋯"},debug:{color:"var(--color-accent, #8b5cf6)",bg:"#8b5cf622",icon:"🔍"},info:{color:"var(--color-primary, #3b82f6)",bg:"var(--nice-primary-tint-15, #3b82f622)",icon:"ℹ️"},warn:{color:"var(--color-warning, #f59e0b)",bg:"var(--nice-warning-tint-15, #f59e0b22)",icon:"⚠️"},error:{color:"var(--color-error, #ef4444)",bg:"var(--nice-danger-tint-15, #ef444422)",icon:"❌"},fatal:{color:"var(--color-error, #dc2626)",bg:"#dc262622",icon:"💀"}},Z=[{label:"Last 5 min",value:"now-5m"},{label:"Last 15 min",value:"now-15m"},{label:"Last 30 min",value:"now-30m"},{label:"Last 1 hour",value:"now-1h"},{label:"Last 3 hours",value:"now-3h"},{label:"Last 6 hours",value:"now-6h"},{label:"Last 12 hours",value:"now-12h"},{label:"Last 24 hours",value:"now-24h"},{label:"Last 7 days",value:"now-7d"}],ee=({logs:x,streams:S,totalCount:I,isLoading:g,savedQueries:B,patterns:h=[],onQueryExecute:_,onQuerySave:E,onQueryDelete:F,onStreamToggle:q,onLogClick:T,onExport:k,onTailStart:V,onTailStop:O,isTailing:w=!1,className:b,style:A,"data-testid":P})=>{const[z,C]=a.useState(""),[N,W]=a.useState("now-1h"),[H,U]=a.useState(1e3),[R,Q]=a.useState(new Set(["trace","debug","info","warn","error","fatal"])),[y,M]=a.useState(new Set),[G,D]=a.useState(null),[t,o]=a.useState(!1),[n,v]=a.useState(""),[p,c]=a.useState("logs"),[d,u]=a.useState(""),s=a.useMemo(()=>x.filter(r=>!(!R.has(r.level)||d&&!r.message.toLowerCase().includes(d.toLowerCase()))),[x,R,d]),L=a.useMemo(()=>{const r={trace:0,debug:0,info:0,warn:0,error:0,fatal:0};return x.forEach(i=>r[i.level]++),r},[x]),f=()=>{_({query:z,timeRange:{from:N,to:"now"},limit:H,direction:"backward"})},m=r=>{M(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},J=r=>{Q(i=>{const l=new Set(i);return l.has(r)?l.delete(r):l.add(r),l})},K=()=>{n.trim()&&(E(n,z),o(!1),v(""))},Y=r=>{if(!d)return r;const i=new RegExp(`(${d})`,"gi");return r.replace(i,'<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>')};return e.jsxs("div",{className:`nice-log-explorer ${b||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...A},"data-testid":P,children:[e.jsxs("div",{style:{padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px",marginBottom:"12px"},children:[e.jsx("input",{type:"text",value:z,onChange:r=>C(r.target.value),placeholder:'Enter query... e.g., {service="api"} |= "error"',onKeyDown:r=>r.key==="Enter"&&f(),style:{flex:1,padding:"10px 16px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",fontFamily:"monospace"}}),e.jsx("select",{value:N,onChange:r=>W(r.target.value),style:{padding:"10px 12px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:Z.map(r=>e.jsx("option",{value:r.value,children:r.label},r.value))}),e.jsxs("button",{onClick:f,disabled:g,style:{padding:"10px 24px",borderRadius:"8px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:g?"not-allowed":"pointer",fontSize:"13px",fontWeight:500,opacity:g?.7:1},children:[g?"⏳":"🔍"," Search"]}),e.jsx("button",{onClick:()=>o(!0),style:{padding:"10px 12px",borderRadius:"8px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾"}),V&&e.jsx("button",{onClick:w?O:V,style:{padding:"10px 16px",borderRadius:"8px",border:"none",background:w?"var(--color-success, #22c55e)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:w?"⏹ Stop":"▶ Tail"})]}),e.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[e.jsx("span",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:"Levels:"}),Object.keys($).map(r=>{const i=$[r],l=L[r],j=R.has(r);return e.jsxs("button",{onClick:()=>J(r),style:{display:"flex",alignItems:"center",gap:"4px",padding:"4px 10px",borderRadius:"4px",border:"none",background:j?i.bg:"transparent",color:j?i.color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"11px",opacity:j?1:.5},children:[r.toUpperCase()," (",l,")"]},r)}),e.jsx("div",{style:{flex:1}}),e.jsx("input",{type:"text",value:d,onChange:r=>u(r.target.value),placeholder:"Filter results...",style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"150px"}})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",overflow:"hidden"},children:[e.jsxs("div",{style:{width:"220px",borderRight:"1px solid var(--border-color, #333)",display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"12px"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Log Streams"}),S.map(r=>e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 0",cursor:"pointer",fontSize:"12px"},children:[e.jsx("input",{type:"checkbox",defaultChecked:!0,onChange:i=>q(r.id,i.target.checked)}),e.jsx("span",{style:{width:"8px",height:"8px",borderRadius:"50%",background:r.color}}),e.jsx("span",{children:r.name})]},r.id)),S.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No streams discovered"})]}),e.jsxs("div",{style:{borderTop:"1px solid var(--border-color, #333)",padding:"12px",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:"11px",color:"var(--text-muted, #888)",textTransform:"uppercase"},children:"Saved Queries"}),B.map(r=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",padding:"6px 8px",marginBottom:"4px",background:"var(--bg-elevated, #252525)",borderRadius:"4px",cursor:"pointer",fontSize:"11px"},onClick:()=>C(r.query),children:[e.jsx("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsx("button",{onClick:i=>{i.stopPropagation(),F(r.id)},style:{background:"none",border:"none",color:"var(--text-muted, #666)",cursor:"pointer",fontSize:"10px"},children:"✕"})]},r.id)),B.length===0&&e.jsx("div",{style:{color:"var(--text-muted, #666)",fontSize:"11px"},children:"No saved queries"})]})]}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",borderBottom:"1px solid var(--border-color, #333)"},children:[[{id:"logs",label:`📜 Logs (${s.length})`},{id:"patterns",label:`🔬 Patterns (${h.length})`}].map(r=>e.jsx("button",{onClick:()=>c(r.id),style:{padding:"10px 20px",border:"none",background:p===r.id?"var(--bg-elevated, #1e1e1e)":"transparent",color:p===r.id?"var(--bg-primary, #fff)":"var(--text-muted, #888)",cursor:"pointer",fontSize:"12px",borderBottom:p===r.id?"2px solid var(--nice-primary, #3b82f6)":"2px solid transparent"},children:r.label},r.id)),e.jsx("div",{style:{flex:1}}),e.jsxs("div",{style:{display:"flex",gap:"8px",padding:"8px"},children:[e.jsx("button",{onClick:()=>k("json"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"JSON"}),e.jsx("button",{onClick:()=>k("csv"),style:{padding:"4px 8px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"CSV"})]})]}),p==="logs"&&e.jsxs("div",{style:{flex:1,overflow:"auto",fontFamily:"monospace",fontSize:"12px"},children:[s.map(r=>{const i=$[r.level],l=y.has(r.id);return e.jsxs("div",{style:{borderBottom:"1px solid var(--nice-bg-secondary, #252525)"},children:[e.jsxs("div",{onClick:()=>m(r.id),style:{display:"flex",alignItems:"flex-start",gap:"8px",padding:"6px 12px",cursor:"pointer",background:l?"var(--bg-elevated, #252525)":"transparent"},children:[e.jsx("span",{style:{color:"var(--text-muted, #666)",fontSize:"10px",minWidth:"160px"},children:new Date(r.timestamp).toISOString()}),e.jsx("span",{style:{padding:"2px 6px",borderRadius:"4px",background:i.bg,color:i.color,fontSize:"10px",fontWeight:500,minWidth:"50px",textAlign:"center"},children:r.level.toUpperCase()}),r.service&&e.jsxs("span",{style:{color:"var(--color-accent, #8b5cf6)",fontSize:"10px",minWidth:"80px"},children:["[",r.service,"]"]}),e.jsx("span",{style:{flex:1,whiteSpace:"pre-wrap",wordBreak:"break-all"},dangerouslySetInnerHTML:{__html:Y(r.message)}})]}),l&&e.jsxs("div",{style:{padding:"12px 12px 12px 200px",background:"var(--bg-elevated, #252525)",borderTop:"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"12px",marginBottom:"12px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Source"}),e.jsx("div",{style:{fontSize:"11px"},children:r.source})]}),r.host&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Host"}),e.jsx("div",{style:{fontSize:"11px"},children:r.host})]}),r.traceId&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"2px"},children:"Trace ID"}),e.jsx("div",{style:{fontSize:"11px",fontFamily:"monospace"},children:r.traceId})]})]}),Object.keys(r.attributes).length>0&&e.jsxs("div",{style:{marginBottom:"12px"},children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Attributes"}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"4px"},children:Object.entries(r.attributes).map(([j,X])=>e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"10px"},children:[j,"=",String(X)]},j))})]}),r.stackTrace&&e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:"10px",color:"var(--text-muted, #888)",marginBottom:"4px"},children:"Stack Trace"}),e.jsx("pre",{style:{margin:0,padding:"8px",background:"var(--bg-elevated, #1e1e1e)",borderRadius:"4px",fontSize:"10px",overflow:"auto",maxHeight:"200px",color:"var(--color-error, #ef4444)"},children:r.stackTrace})]}),e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(r),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"View Details"}),r.traceId&&e.jsx("button",{onClick:()=>C(`{traceId="${r.traceId}"}`),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"Show Trace"})]})]})]},r.id)}),s.length===0&&!g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"📭"}),e.jsx("p",{style:{marginTop:"16px"},children:"No logs match your query"})]}),g&&e.jsxs("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:[e.jsx("span",{style:{fontSize:"48px"},children:"⏳"}),e.jsx("p",{style:{marginTop:"16px"},children:"Loading logs..."})]})]}),p==="patterns"&&e.jsxs("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:[h.map(r=>{const i=$[r.level];return e.jsxs("div",{style:{marginBottom:"12px",padding:"16px",background:"var(--bg-elevated, #252525)",borderRadius:"8px",borderLeft:`3px solid ${i.color}`},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"8px"},children:[e.jsx("span",{style:{fontFamily:"monospace",fontSize:"12px",fontWeight:500},children:r.pattern}),e.jsxs("span",{style:{padding:"2px 8px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",fontSize:"11px"},children:[r.count," occurrences"]})]}),e.jsxs("div",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:["Sample: ",r.samples[0]]})]},r.id)}),h.length===0&&e.jsx("div",{style:{padding:"48px",textAlign:"center",color:"var(--text-muted, #666)"},children:e.jsx("p",{children:"No patterns detected. Run a query first."})})]})]})]}),t&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"400px",background:"var(--bg-elevated, #252525)",borderRadius:"12px",padding:"24px"},children:[e.jsx("h3",{style:{margin:"0 0 16px 0",fontSize:"14px"},children:"Save Query"}),e.jsx("input",{type:"text",value:n,onChange:r=>v(r.target.value),placeholder:"Query name...",style:{width:"100%",padding:"10px",borderRadius:"8px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"13px",marginBottom:"16px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px"},children:[e.jsx("button",{onClick:()=>o(!1),style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Cancel"}),e.jsx("button",{onClick:K,style:{padding:"8px 16px",borderRadius:"6px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer"},children:"Save"})]})]})})]})},re={critical:{color:"var(--color-error, #ef4444)",icon:"🔴"},warning:{color:"var(--color-warning, #f59e0b)",icon:"🟡"},info:{color:"var(--color-primary, #3b82f6)",icon:"🔵"}},te=[{from:"now-5m",to:"now",display:"Last 5 minutes"},{from:"now-15m",to:"now",display:"Last 15 minutes"},{from:"now-1h",to:"now",display:"Last 1 hour"},{from:"now-3h",to:"now",display:"Last 3 hours"},{from:"now-6h",to:"now",display:"Last 6 hours"},{from:"now-12h",to:"now",display:"Last 12 hours"},{from:"now-24h",to:"now",display:"Last 24 hours"},{from:"now-7d",to:"now",display:"Last 7 days"},{from:"now-30d",to:"now",display:"Last 30 days"}],oe=({dashboard:x,metrics:S,alerts:I=[],timeRanges:g=te,onTimeRangeChange:B,onVariableChange:h,onPanelEdit:_,onPanelAdd:E,onPanelRemove:F,onPanelMove:q,onAlertAcknowledge:T,onAlertSilence:k,onQueryExecute:V,onDashboardSave:O,onRefresh:w,isEditing:b=!1,onEditModeToggle:A,className:P,style:z,"data-testid":C})=>{const[N,W]=a.useState(!1),[H,U]=a.useState(!0),[R,Q]=a.useState(null),y=I.filter(t=>t.status==="firing"),M=t=>{var n,v,p;const o=(n=t.queries[0])!=null&&n.expression?S[t.queries[0].expression]:null;switch(t.type){case"stat":return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",flexDirection:"column"},children:[e.jsx("div",{style:{fontSize:"48px",fontWeight:600,color:o?D(o.currentValue,t.thresholds):"var(--text-primary, #e0e0e0)"},children:(o==null?void 0:o.currentValue.toFixed(2))??"-"}),(o==null?void 0:o.unit)&&e.jsx("div",{style:{fontSize:"14px",color:"var(--text-muted, #888)",marginTop:"4px"},children:o.unit})]});case"gauge":{const c=(o==null?void 0:o.currentValue)??0,d=((p=(v=t.thresholds)==null?void 0:v[t.thresholds.length-1])==null?void 0:p.value)??100,u=Math.min(c/d*100,100);return e.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%"},children:e.jsxs("svg",{viewBox:"0 0 100 60",style:{width:"100%",maxWidth:"200px"},children:[e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:"var(--nice-text, #333)",strokeWidth:"8"}),e.jsx("path",{d:"M 10 50 A 40 40 0 0 1 90 50",fill:"none",stroke:D(c,t.thresholds),strokeWidth:"8",strokeDasharray:`${u*1.26} 126`}),e.jsx("text",{x:"50",y:"45",textAnchor:"middle",fill:"var(--nice-border, #e0e0e0)",fontSize:"16",fontWeight:"600",children:c.toFixed(1)})]})})}case"timeseries":return G(t,o);case"table":return e.jsx("div",{style:{overflow:"auto",height:"100%"},children:e.jsxs("table",{style:{width:"100%",fontSize:"11px",borderCollapse:"collapse"},children:[e.jsx("thead",{children:e.jsxs("tr",{style:{background:"var(--bg-elevated, #252525)"},children:[e.jsx("th",{style:{padding:"6px 8px",textAlign:"left",borderBottom:"1px solid var(--border-color, #333)"},children:"Time"}),e.jsx("th",{style:{padding:"6px 8px",textAlign:"right",borderBottom:"1px solid var(--border-color, #333)"},children:"Value"})]})}),e.jsx("tbody",{children:o==null?void 0:o.values.slice(-10).reverse().map((c,d)=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)"},children:new Date(c.timestamp).toLocaleTimeString()}),e.jsxs("td",{style:{padding:"4px 8px",borderBottom:"1px solid var(--border-color, #333)",textAlign:"right"},children:[c.value.toFixed(2)," ",o.unit]})]},d))})]})});case"bar_gauge":return e.jsx("div",{style:{padding:"8px",height:"100%",display:"flex",flexDirection:"column",justifyContent:"center"},children:t.queries.map((c,d)=>{var f,m;const u=S[c.expression],s=(u==null?void 0:u.currentValue)??0,L=((m=(f=t.thresholds)==null?void 0:f[t.thresholds.length-1])==null?void 0:m.value)??100;return e.jsxs("div",{style:{marginBottom:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",marginBottom:"4px"},children:[e.jsx("span",{children:c.legendFormat??c.expression}),e.jsx("span",{children:s.toFixed(1)})]}),e.jsx("div",{style:{height:"16px",background:"var(--bg-tertiary, #333)",borderRadius:"4px",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",width:`${s/L*100}%`,background:D(s,t.thresholds),borderRadius:"4px"}})})]},d)})});case"text":return e.jsx("div",{style:{padding:"12px",fontSize:"12px",lineHeight:"1.6"},children:t.description});default:return e.jsx("div",{style:{padding:"12px",color:"var(--text-muted, #666)"},children:"Unsupported panel type"})}},G=(t,o)=>{const n=(o==null?void 0:o.values)??[];if(n.length===0)return e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--text-muted, #666)"},children:"No data"});const v=n.map(s=>s.value),p=Math.min(...v),d=Math.max(...v)-p||1,u=n.map((s,L)=>{const f=L/(n.length-1)*100,m=100-(s.value-p)/d*80;return`${f},${m}`}).join(" ");return e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",style:{width:"100%",height:"100%"},children:[[0,25,50,75,100].map(s=>e.jsx("line",{x1:"0",y1:s,x2:"100",y2:s,stroke:"var(--nice-text, #333)",strokeWidth:"0.5"},s)),t.chartType==="area"||t.chartType==="stacked_area"?e.jsx("polygon",{points:`0,100 ${u} 100,100`,fill:"var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))"}):null,e.jsx("polyline",{points:u,fill:"none",stroke:"var(--nice-primary, #3b82f6)",strokeWidth:"1"})]})},D=(t,o)=>{if(!o||o.length===0)return"var(--color-primary, #3b82f6)";for(let n=o.length-1;n>=0;n--)if(t>=o[n].value)return o[n].color;return"var(--color-success, #22c55e)"};return e.jsxs("div",{className:`nice-metrics-dashboard ${P||""}`,style:{display:"flex",flexDirection:"column",height:"100%",background:"var(--bg-elevated, #1e1e1e)",color:"var(--text-primary, #e0e0e0)",...z},"data-testid":C,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:[e.jsx("span",{style:{fontSize:"20px"},children:"📊"}),e.jsx("span",{style:{fontWeight:500,fontSize:"14px"},children:x.name}),e.jsx("div",{style:{flex:1}}),y.length>0&&e.jsxs("button",{onClick:()=>W(!0),style:{display:"flex",alignItems:"center",gap:"6px",padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--nice-danger-tint-15, #ef444422)",color:"var(--color-error, #ef4444)",cursor:"pointer",fontSize:"12px"},children:["🔴 ",y.length," Alert",y.length!==1&&"s"]}),e.jsx("select",{value:x.timeRange.display,onChange:t=>{const o=g.find(n=>n.display===t.target.value);o&&B(o)},style:{padding:"6px 12px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"12px"},children:g.map(t=>e.jsx("option",{value:t.display,children:t.display},t.display))}),e.jsx("button",{onClick:w,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"🔄 Refresh"}),b?e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:E,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"+ Add Panel"}),e.jsx("button",{onClick:O,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:"var(--color-success, #22c55e)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:"💾 Save"})]}):null,A&&e.jsx("button",{onClick:A,style:{padding:"6px 12px",borderRadius:"4px",border:"none",background:b?"var(--color-warning, #f59e0b)":"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"12px"},children:b?"✓ Done":"✏️ Edit"})]}),x.variables.length>0&&H&&e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",padding:"12px 16px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #252525)"},children:x.variables.map(t=>{var o;return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("label",{style:{fontSize:"11px",color:"var(--text-muted, #888)"},children:[t.label,":"]}),t.type==="textbox"?e.jsx("input",{type:"text",value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px",width:"120px"}}):e.jsx("select",{value:t.current,onChange:n=>h(t.id,n.target.value),style:{padding:"4px 8px",borderRadius:"4px",border:"1px solid var(--border-color, #444)",background:"var(--bg-elevated, #1e1e1e)",color:"var(--bg-primary, #fff)",fontSize:"11px"},children:(o=t.options)==null?void 0:o.map(n=>e.jsx("option",{value:n,children:n},n))})]},t.id)})}),e.jsx("div",{style:{flex:1,overflow:"auto",padding:"16px"},children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(12, 1fr)",gridAutoRows:"minmax(100px, auto)",gap:"16px"},children:x.panels.map(t=>e.jsxs("div",{style:{gridColumn:`span ${t.position.w}`,gridRow:`span ${t.position.h}`,background:"var(--bg-elevated, #252525)",borderRadius:"8px",overflow:"hidden",border:R===t.id?"2px solid var(--nice-primary, #3b82f6)":"1px solid var(--border-color, #333)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",padding:"8px 12px",borderBottom:"1px solid var(--border-color, #333)",background:"var(--bg-elevated, #1e1e1e)"},children:[e.jsx("span",{style:{flex:1,fontSize:"12px",fontWeight:500},children:t.title}),b&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:()=>_(t),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"10px"},children:"✏️"}),e.jsx("button",{onClick:()=>F(t.id),style:{padding:"2px 6px",marginLeft:"4px",borderRadius:"4px",border:"none",background:"var(--color-error, #ef4444)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"10px"},children:"✕"})]})]}),e.jsx("div",{style:{height:"calc(100% - 40px)"},children:M(t)})]},t.id))})}),N&&e.jsx("div",{style:{position:"fixed",inset:0,background:"var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3},children:e.jsxs("div",{style:{width:"600px",maxHeight:"80vh",background:"var(--bg-elevated, #252525)",borderRadius:"12px",overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px",borderBottom:"1px solid var(--border-color, #333)"},children:[e.jsxs("span",{style:{fontWeight:600},children:["Active Alerts (",y.length,")"]}),e.jsx("button",{onClick:()=>W(!1),style:{background:"none",border:"none",color:"var(--text-muted, #888)",cursor:"pointer",fontSize:"18px"},children:"✕"})]}),e.jsxs("div",{style:{maxHeight:"60vh",overflow:"auto"},children:[I.map(t=>{const o=re[t.severity];return e.jsxs("div",{style:{padding:"16px",borderBottom:"1px solid var(--border-color, #333)",borderLeft:`4px solid ${o.color}`},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"8px"},children:[e.jsx("span",{children:o.icon}),e.jsx("span",{style:{fontWeight:500},children:t.name}),e.jsx("span",{style:{marginLeft:"auto",padding:"2px 8px",borderRadius:"4px",background:t.status==="firing"?"var(--nice-danger-tint-15, #ef444422)":"var(--nice-success-tint-15, #22c55e22)",color:t.status==="firing"?"var(--color-error, #ef4444)":"var(--color-success, #22c55e)",fontSize:"10px"},children:t.status})]}),e.jsx("p",{style:{margin:"0 0 8px 0",fontSize:"12px",color:"var(--text-muted, #888)"},children:t.message}),e.jsxs("div",{style:{display:"flex",gap:"8px",fontSize:"11px",color:"var(--text-muted, #666)"},children:[e.jsxs("span",{children:["Value: ",t.value]}),e.jsx("span",{children:"•"}),e.jsxs("span",{children:["Threshold: ",t.threshold]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:new Date(t.startsAt).toLocaleString()})]}),t.status==="firing"&&T&&e.jsxs("div",{style:{marginTop:"12px",display:"flex",gap:"8px"},children:[e.jsx("button",{onClick:()=>T(t.id),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--color-primary, #3b82f6)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Acknowledge"}),k&&e.jsx("button",{onClick:()=>k(t.id,36e5),style:{padding:"4px 12px",borderRadius:"4px",border:"none",background:"var(--bg-tertiary, #333)",color:"var(--bg-primary, #fff)",cursor:"pointer",fontSize:"11px"},children:"Silence 1h"})]})]},t.id)}),I.length===0&&e.jsx("div",{style:{padding:"24px",textAlign:"center",color:"var(--text-muted, #666)"},children:"No alerts"})]})]})})]})};exports.NiceLogExplorer=ee;exports.NiceMetricsDashboard=oe;

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { jsxs as t, jsx as e, Fragment as X } from "react/jsx-runtime";
-import { useState as s, useMemo as Z } from "react";
-const V = {
-  trace: { color: "var(--text-muted, #888)", bg: "#88888822", icon: "⋯" },
+import { jsxs as t, jsx as e, Fragment as J } from "react/jsx-runtime";
+import { useState as p, useMemo as K } from "react";
+const _ = {
+  trace: { color: "var(--text-muted, #888)", bg: "var(--nice-overlay-15, #88888822)", icon: "⋯" },
   debug: { color: "var(--color-accent, #8b5cf6)", bg: "#8b5cf622", icon: "🔍" },
-  info: { color: "var(--color-primary, #3b82f6)", bg: "#3b82f622", icon: "ℹ️" },
-  warn: { color: "var(--color-warning, #f59e0b)", bg: "#f59e0b22", icon: "⚠️" },
-  error: { color: "var(--color-error, #ef4444)", bg: "#ef444422", icon: "❌" },
+  info: { color: "var(--color-primary, #3b82f6)", bg: "var(--nice-primary-tint-15, #3b82f622)", icon: "ℹ️" },
+  warn: { color: "var(--color-warning, #f59e0b)", bg: "var(--nice-warning-tint-15, #f59e0b22)", icon: "⚠️" },
+  error: { color: "var(--color-error, #ef4444)", bg: "var(--nice-danger-tint-15, #ef444422)", icon: "❌" },
   fatal: { color: "var(--color-error, #dc2626)", bg: "#dc262622", icon: "💀" }
 }, te = [
   { label: "Last 5 min", value: "now-5m" },
@@ -17,29 +17,29 @@ const V = {
   { label: "Last 12 hours", value: "now-12h" },
   { label: "Last 24 hours", value: "now-24h" },
   { label: "Last 7 days", value: "now-7d" }
-], ae = ({
-  logs: p,
-  streams: z,
+], de = ({
+  logs: u,
+  streams: w,
   totalCount: T,
-  isLoading: u,
+  isLoading: v,
   savedQueries: A,
   patterns: b = [],
-  onQueryExecute: O,
-  onQuerySave: _,
-  onQueryDelete: H,
-  onStreamToggle: J,
+  onQueryExecute: E,
+  onQuerySave: F,
+  onQueryDelete: V,
+  onStreamToggle: G,
   onLogClick: W,
-  onExport: C,
-  onTailStart: P,
-  onTailStop: Q,
-  isTailing: R = !1,
+  onExport: z,
+  onTailStart: O,
+  onTailStop: P,
+  isTailing: C = !1,
   className: y,
   style: j,
-  "data-testid": q
+  "data-testid": H
 }) => {
-  const [L, I] = s(""), [N, $] = s("now-1h"), [G, ee] = s(1e3), [B, K] = s(
+  const [R, L] = p(""), [N, $] = p("now-1h"), [Q, Y] = p(1e3), [I, M] = p(
     /* @__PURE__ */ new Set(["trace", "debug", "info", "warn", "error", "fatal"])
-  ), [m, M] = s(/* @__PURE__ */ new Set()), [Y, D] = s(null), [o, n] = s(!1), [i, g] = s(""), [c, S] = s("logs"), [x, k] = s(""), a = Z(() => p.filter((r) => !(!B.has(r.level) || x && !r.message.toLowerCase().includes(x.toLowerCase()))), [p, B, x]), h = Z(() => {
+  ), [m, q] = p(/* @__PURE__ */ new Set()), [U, D] = p(null), [o, n] = p(!1), [i, f] = p(""), [x, c] = p("logs"), [l, g] = p(""), d = K(() => u.filter((r) => !(!I.has(r.level) || l && !r.message.toLowerCase().includes(l.toLowerCase()))), [u, I, l]), B = K(() => {
     const r = {
       trace: 0,
       debug: 0,
@@ -48,33 +48,33 @@ const V = {
       error: 0,
       fatal: 0
     };
-    return p.forEach((d) => r[d.level]++), r;
-  }, [p]), f = () => {
-    O({
-      query: L,
+    return u.forEach((a) => r[a.level]++), r;
+  }, [u]), h = () => {
+    E({
+      query: R,
       timeRange: { from: N, to: "now" },
-      limit: G,
+      limit: Q,
       direction: "backward"
     });
-  }, v = (r) => {
-    M((d) => {
-      const l = new Set(d);
-      return l.has(r) ? l.delete(r) : l.add(r), l;
+  }, S = (r) => {
+    q((a) => {
+      const s = new Set(a);
+      return s.has(r) ? s.delete(r) : s.add(r), s;
     });
-  }, U = (r) => {
-    K((d) => {
-      const l = new Set(d);
-      return l.has(r) ? l.delete(r) : l.add(r), l;
+  }, X = (r) => {
+    M((a) => {
+      const s = new Set(a);
+      return s.has(r) ? s.delete(r) : s.add(r), s;
     });
-  }, E = () => {
-    i.trim() && (_(i, L), n(!1), g(""));
-  }, F = (r) => {
-    if (!x)
+  }, Z = () => {
+    i.trim() && (F(i, R), n(!1), f(""));
+  }, ee = (r) => {
+    if (!l)
       return r;
-    const d = new RegExp(`(${x})`, "gi");
+    const a = new RegExp(`(${l})`, "gi");
     return r.replace(
-      d,
-      '<mark style="background: #f59e0b; color: black; padding: 0 2px; border-radius: 2px;">$1</mark>'
+      a,
+      '<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>'
     );
   };
   return /* @__PURE__ */ t(
@@ -89,7 +89,7 @@ const V = {
         color: "var(--text-primary, #e0e0e0)",
         ...j
       },
-      "data-testid": q,
+      "data-testid": H,
       children: [
         /* @__PURE__ */ t(
           "div",
@@ -105,10 +105,10 @@ const V = {
                   "input",
                   {
                     type: "text",
-                    value: L,
-                    onChange: (r) => I(r.target.value),
+                    value: R,
+                    onChange: (r) => L(r.target.value),
                     placeholder: 'Enter query... e.g., {service="api"} |= "error"',
-                    onKeyDown: (r) => r.key === "Enter" && f(),
+                    onKeyDown: (r) => r.key === "Enter" && h(),
                     style: {
                       flex: 1,
                       padding: "10px 16px",
@@ -140,21 +140,21 @@ const V = {
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: f,
-                    disabled: u,
+                    onClick: h,
+                    disabled: v,
                     style: {
                       padding: "10px 24px",
                       borderRadius: "8px",
                       border: "none",
                       background: "var(--color-primary, #3b82f6)",
                       color: "var(--bg-primary, #fff)",
-                      cursor: u ? "not-allowed" : "pointer",
+                      cursor: v ? "not-allowed" : "pointer",
                       fontSize: "13px",
                       fontWeight: 500,
-                      opacity: u ? 0.7 : 1
+                      opacity: v ? 0.7 : 1
                     },
                     children: [
-                      u ? "⏳" : "🔍",
+                      v ? "⏳" : "🔍",
                       " Search"
                     ]
                   }
@@ -175,31 +175,31 @@ const V = {
                     children: "💾"
                   }
                 ),
-                P && /* @__PURE__ */ e(
+                O && /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: R ? Q : P,
+                    onClick: C ? P : O,
                     style: {
                       padding: "10px 16px",
                       borderRadius: "8px",
                       border: "none",
-                      background: R ? "var(--color-success, #22c55e)" : "var(--bg-tertiary, #333)",
+                      background: C ? "var(--color-success, #22c55e)" : "var(--bg-tertiary, #333)",
                       color: "var(--bg-primary, #fff)",
                       cursor: "pointer",
                       fontSize: "12px"
                     },
-                    children: R ? "⏹ Stop" : "▶ Tail"
+                    children: C ? "⏹ Stop" : "▶ Tail"
                   }
                 )
               ] }),
               /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
                 /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--text-muted, #888)" }, children: "Levels:" }),
-                Object.keys(V).map((r) => {
-                  const d = V[r], l = h[r], w = B.has(r);
+                Object.keys(_).map((r) => {
+                  const a = _[r], s = B[r], k = I.has(r);
                   return /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: () => U(r),
+                      onClick: () => X(r),
                       style: {
                         display: "flex",
                         alignItems: "center",
@@ -207,16 +207,16 @@ const V = {
                         padding: "4px 10px",
                         borderRadius: "4px",
                         border: "none",
-                        background: w ? d.bg : "transparent",
-                        color: w ? d.color : "var(--text-muted, #666)",
+                        background: k ? a.bg : "transparent",
+                        color: k ? a.color : "var(--text-muted, #666)",
                         cursor: "pointer",
                         fontSize: "11px",
-                        opacity: w ? 1 : 0.5
+                        opacity: k ? 1 : 0.5
                       },
                       children: [
                         r.toUpperCase(),
                         " (",
-                        l,
+                        s,
                         ")"
                       ]
                     },
@@ -228,8 +228,8 @@ const V = {
                   "input",
                   {
                     type: "text",
-                    value: x,
-                    onChange: (r) => k(r.target.value),
+                    value: l,
+                    onChange: (r) => g(r.target.value),
                     placeholder: "Filter results...",
                     style: {
                       padding: "4px 8px",
@@ -271,7 +271,7 @@ const V = {
                       children: "Log Streams"
                     }
                   ),
-                  z.map((r) => /* @__PURE__ */ t(
+                  w.map((r) => /* @__PURE__ */ t(
                     "label",
                     {
                       style: {
@@ -288,7 +288,7 @@ const V = {
                           {
                             type: "checkbox",
                             defaultChecked: !0,
-                            onChange: (d) => J(r.id, d.target.checked)
+                            onChange: (a) => G(r.id, a.target.checked)
                           }
                         ),
                         /* @__PURE__ */ e(
@@ -307,7 +307,7 @@ const V = {
                     },
                     r.id
                   )),
-                  z.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--text-muted, #666)", fontSize: "11px" }, children: "No streams discovered" })
+                  w.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--text-muted, #666)", fontSize: "11px" }, children: "No streams discovered" })
                 ] }),
                 /* @__PURE__ */ t(
                   "div",
@@ -345,7 +345,7 @@ const V = {
                             cursor: "pointer",
                             fontSize: "11px"
                           },
-                          onClick: () => I(r.query),
+                          onClick: () => L(r.query),
                           children: [
                             /* @__PURE__ */ e(
                               "span",
@@ -362,8 +362,8 @@ const V = {
                             /* @__PURE__ */ e(
                               "button",
                               {
-                                onClick: (d) => {
-                                  d.stopPropagation(), H(r.id);
+                                onClick: (a) => {
+                                  a.stopPropagation(), V(r.id);
                                 },
                                 style: {
                                   background: "none",
@@ -389,20 +389,20 @@ const V = {
           /* @__PURE__ */ t("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
             /* @__PURE__ */ t("div", { style: { display: "flex", borderBottom: "1px solid var(--border-color, #333)" }, children: [
               [
-                { id: "logs", label: `📜 Logs (${a.length})` },
+                { id: "logs", label: `📜 Logs (${d.length})` },
                 { id: "patterns", label: `🔬 Patterns (${b.length})` }
               ].map((r) => /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => S(r.id),
+                  onClick: () => c(r.id),
                   style: {
                     padding: "10px 20px",
                     border: "none",
-                    background: c === r.id ? "var(--bg-elevated, #1e1e1e)" : "transparent",
-                    color: c === r.id ? "var(--bg-primary, #fff)" : "var(--text-muted, #888)",
+                    background: x === r.id ? "var(--bg-elevated, #1e1e1e)" : "transparent",
+                    color: x === r.id ? "var(--bg-primary, #fff)" : "var(--text-muted, #888)",
                     cursor: "pointer",
                     fontSize: "12px",
-                    borderBottom: c === r.id ? "2px solid #3b82f6" : "2px solid transparent"
+                    borderBottom: x === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
                   },
                   children: r.label
                 },
@@ -413,7 +413,7 @@ const V = {
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => C("json"),
+                    onClick: () => z("json"),
                     style: {
                       padding: "4px 8px",
                       borderRadius: "4px",
@@ -429,7 +429,7 @@ const V = {
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => C("csv"),
+                    onClick: () => z("csv"),
                     style: {
                       padding: "4px 8px",
                       borderRadius: "4px",
@@ -444,21 +444,21 @@ const V = {
                 )
               ] })
             ] }),
-            c === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
-              a.map((r) => {
-                const d = V[r.level], l = m.has(r.id);
-                return /* @__PURE__ */ t("div", { style: { borderBottom: "1px solid #252525" }, children: [
+            x === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
+              d.map((r) => {
+                const a = _[r.level], s = m.has(r.id);
+                return /* @__PURE__ */ t("div", { style: { borderBottom: "1px solid var(--nice-bg-secondary, #252525)" }, children: [
                   /* @__PURE__ */ t(
                     "div",
                     {
-                      onClick: () => v(r.id),
+                      onClick: () => S(r.id),
                       style: {
                         display: "flex",
                         alignItems: "flex-start",
                         gap: "8px",
                         padding: "6px 12px",
                         cursor: "pointer",
-                        background: l ? "var(--bg-elevated, #252525)" : "transparent"
+                        background: s ? "var(--bg-elevated, #252525)" : "transparent"
                       },
                       children: [
                         /* @__PURE__ */ e(
@@ -478,8 +478,8 @@ const V = {
                             style: {
                               padding: "2px 6px",
                               borderRadius: "4px",
-                              background: d.bg,
-                              color: d.color,
+                              background: a.bg,
+                              color: a.color,
                               fontSize: "10px",
                               fontWeight: 500,
                               minWidth: "50px",
@@ -507,13 +507,13 @@ const V = {
                           "span",
                           {
                             style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
-                            dangerouslySetInnerHTML: { __html: F(r.message) }
+                            dangerouslySetInnerHTML: { __html: ee(r.message) }
                           }
                         )
                       ]
                     }
                   ),
-                  l && /* @__PURE__ */ t(
+                  s && /* @__PURE__ */ t(
                     "div",
                     {
                       style: {
@@ -589,7 +589,7 @@ const V = {
                               children: "Attributes"
                             }
                           ),
-                          /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([w, re]) => /* @__PURE__ */ t(
+                          /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([k, re]) => /* @__PURE__ */ t(
                             "span",
                             {
                               style: {
@@ -599,12 +599,12 @@ const V = {
                                 fontSize: "10px"
                               },
                               children: [
-                                w,
+                                k,
                                 "=",
                                 String(re)
                               ]
                             },
-                            w
+                            k
                           )) })
                         ] }),
                         r.stackTrace && /* @__PURE__ */ t("div", { children: [
@@ -656,7 +656,7 @@ const V = {
                           r.traceId && /* @__PURE__ */ e(
                             "button",
                             {
-                              onClick: () => I(`{traceId="${r.traceId}"}`),
+                              onClick: () => L(`{traceId="${r.traceId}"}`),
                               style: {
                                 padding: "4px 12px",
                                 borderRadius: "4px",
@@ -675,7 +675,7 @@ const V = {
                   )
                 ] }, r.id);
               }),
-              a.length === 0 && !u && /* @__PURE__ */ t(
+              d.length === 0 && !v && /* @__PURE__ */ t(
                 "div",
                 {
                   style: { padding: "48px", textAlign: "center", color: "var(--text-muted, #666)" },
@@ -685,7 +685,7 @@ const V = {
                   ]
                 }
               ),
-              u && /* @__PURE__ */ t(
+              v && /* @__PURE__ */ t(
                 "div",
                 {
                   style: { padding: "48px", textAlign: "center", color: "var(--text-muted, #666)" },
@@ -696,9 +696,9 @@ const V = {
                 }
               )
             ] }),
-            c === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
+            x === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
               b.map((r) => {
-                const d = V[r.level];
+                const a = _[r.level];
                 return /* @__PURE__ */ t(
                   "div",
                   {
@@ -707,7 +707,7 @@ const V = {
                       padding: "16px",
                       background: "var(--bg-elevated, #252525)",
                       borderRadius: "8px",
-                      borderLeft: `3px solid ${d.color}`
+                      borderLeft: `3px solid ${a.color}`
                     },
                     children: [
                       /* @__PURE__ */ t(
@@ -764,7 +764,7 @@ const V = {
             style: {
               position: "fixed",
               inset: 0,
-              background: "rgba(0,0,0,0.7)",
+              background: "var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -786,7 +786,7 @@ const V = {
                     {
                       type: "text",
                       value: i,
-                      onChange: (r) => g(r.target.value),
+                      onChange: (r) => f(r.target.value),
                       placeholder: "Query name...",
                       style: {
                         width: "100%",
@@ -819,7 +819,7 @@ const V = {
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: E,
+                        onClick: Z,
                         style: {
                           padding: "8px 16px",
                           borderRadius: "6px",
@@ -855,30 +855,30 @@ const V = {
   { from: "now-7d", to: "now", display: "Last 7 days" },
   { from: "now-30d", to: "now", display: "Last 30 days" }
 ], le = ({
-  dashboard: p,
-  metrics: z,
+  dashboard: u,
+  metrics: w,
   alerts: T = [],
-  timeRanges: u = ne,
+  timeRanges: v = ne,
   onTimeRangeChange: A,
   onVariableChange: b,
-  onPanelEdit: O,
-  onPanelAdd: _,
-  onPanelRemove: H,
-  onPanelMove: J,
+  onPanelEdit: E,
+  onPanelAdd: F,
+  onPanelRemove: V,
+  onPanelMove: G,
   onAlertAcknowledge: W,
-  onAlertSilence: C,
-  onQueryExecute: P,
-  onDashboardSave: Q,
-  onRefresh: R,
+  onAlertSilence: z,
+  onQueryExecute: O,
+  onDashboardSave: P,
+  onRefresh: C,
   isEditing: y = !1,
   onEditModeToggle: j,
-  className: q,
-  style: L,
-  "data-testid": I
+  className: H,
+  style: R,
+  "data-testid": L
 }) => {
-  const [N, $] = s(!1), [G, ee] = s(!0), [B, K] = s(null), m = T.filter((o) => o.status === "firing"), M = (o) => {
-    var i, g, c;
-    const n = (i = o.queries[0]) != null && i.expression ? z[o.queries[0].expression] : null;
+  const [N, $] = p(!1), [Q, Y] = p(!0), [I, M] = p(null), m = T.filter((o) => o.status === "firing"), q = (o) => {
+    var i, f, x;
+    const n = (i = o.queries[0]) != null && i.expression ? w[o.queries[0].expression] : null;
     switch (o.type) {
       case "stat":
         return /* @__PURE__ */ t(
@@ -907,8 +907,8 @@ const V = {
             ]
           }
         );
-      case "gauge":
-        const S = (n == null ? void 0 : n.currentValue) ?? 0, x = ((c = (g = o.thresholds) == null ? void 0 : g[o.thresholds.length - 1]) == null ? void 0 : c.value) ?? 100, k = Math.min(S / x * 100, 100);
+      case "gauge": {
+        const c = (n == null ? void 0 : n.currentValue) ?? 0, l = ((x = (f = o.thresholds) == null ? void 0 : f[o.thresholds.length - 1]) == null ? void 0 : x.value) ?? 100, g = Math.min(c / l * 100, 100);
         return /* @__PURE__ */ e(
           "div",
           {
@@ -920,23 +920,24 @@ const V = {
               height: "100%"
             },
             children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 60", style: { width: "100%", maxWidth: "200px" }, children: [
-              /* @__PURE__ */ e("path", { d: "M 10 50 A 40 40 0 0 1 90 50", fill: "none", stroke: "#333", strokeWidth: "8" }),
+              /* @__PURE__ */ e("path", { d: "M 10 50 A 40 40 0 0 1 90 50", fill: "none", stroke: "var(--nice-text, #333)", strokeWidth: "8" }),
               /* @__PURE__ */ e(
                 "path",
                 {
                   d: "M 10 50 A 40 40 0 0 1 90 50",
                   fill: "none",
-                  stroke: D(S, o.thresholds),
+                  stroke: D(c, o.thresholds),
                   strokeWidth: "8",
-                  strokeDasharray: `${k * 1.26} 126`
+                  strokeDasharray: `${g * 1.26} 126`
                 }
               ),
-              /* @__PURE__ */ e("text", { x: "50", y: "45", textAnchor: "middle", fill: "#e0e0e0", fontSize: "16", fontWeight: "600", children: S.toFixed(1) })
+              /* @__PURE__ */ e("text", { x: "50", y: "45", textAnchor: "middle", fill: "var(--nice-border, #e0e0e0)", fontSize: "16", fontWeight: "600", children: c.toFixed(1) })
             ] })
           }
         );
+      }
       case "timeseries":
-        return Y(o, n);
+        return U(o, n);
       case "table":
         return /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ t("table", { style: { width: "100%", fontSize: "11px", borderCollapse: "collapse" }, children: [
           /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { style: { background: "var(--bg-elevated, #252525)" }, children: [
@@ -963,7 +964,7 @@ const V = {
               }
             )
           ] }) }),
-          /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((a, h) => /* @__PURE__ */ t("tr", { children: [
+          /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((c, l) => /* @__PURE__ */ t("tr", { children: [
             /* @__PURE__ */ e(
               "td",
               {
@@ -971,7 +972,7 @@ const V = {
                   padding: "4px 8px",
                   borderBottom: "1px solid var(--border-color, #333)"
                 },
-                children: new Date(a.timestamp).toLocaleTimeString()
+                children: new Date(c.timestamp).toLocaleTimeString()
               }
             ),
             /* @__PURE__ */ t(
@@ -983,13 +984,13 @@ const V = {
                   textAlign: "right"
                 },
                 children: [
-                  a.value.toFixed(2),
+                  c.value.toFixed(2),
                   " ",
                   n.unit
                 ]
               }
             )
-          ] }, h)) })
+          ] }, l)) })
         ] }) });
       case "bar_gauge":
         return /* @__PURE__ */ e(
@@ -1002,9 +1003,9 @@ const V = {
               flexDirection: "column",
               justifyContent: "center"
             },
-            children: o.queries.map((a, h) => {
-              var E, F;
-              const f = z[a.expression], v = (f == null ? void 0 : f.currentValue) ?? 0, U = ((F = (E = o.thresholds) == null ? void 0 : E[o.thresholds.length - 1]) == null ? void 0 : F.value) ?? 100;
+            children: o.queries.map((c, l) => {
+              var h, S;
+              const g = w[c.expression], d = (g == null ? void 0 : g.currentValue) ?? 0, B = ((S = (h = o.thresholds) == null ? void 0 : h[o.thresholds.length - 1]) == null ? void 0 : S.value) ?? 100;
               return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
                 /* @__PURE__ */ t(
                   "div",
@@ -1016,8 +1017,8 @@ const V = {
                       marginBottom: "4px"
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: a.legendFormat ?? a.expression }),
-                      /* @__PURE__ */ e("span", { children: v.toFixed(1) })
+                      /* @__PURE__ */ e("span", { children: c.legendFormat ?? c.expression }),
+                      /* @__PURE__ */ e("span", { children: d.toFixed(1) })
                     ]
                   }
                 ),
@@ -1035,15 +1036,15 @@ const V = {
                       {
                         style: {
                           height: "100%",
-                          width: `${v / U * 100}%`,
-                          background: D(v, o.thresholds),
+                          width: `${d / B * 100}%`,
+                          background: D(d, o.thresholds),
                           borderRadius: "4px"
                         }
                       }
                     )
                   }
                 )
-              ] }, h);
+              ] }, l);
             })
           }
         );
@@ -1052,7 +1053,7 @@ const V = {
       default:
         return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--text-muted, #666)" }, children: "Unsupported panel type" });
     }
-  }, Y = (o, n) => {
+  }, U = (o, n) => {
     const i = (n == null ? void 0 : n.values) ?? [];
     if (i.length === 0)
       return /* @__PURE__ */ e(
@@ -1068,9 +1069,9 @@ const V = {
           children: "No data"
         }
       );
-    const g = i.map((a) => a.value), c = Math.min(...g), x = Math.max(...g) - c || 1, k = i.map((a, h) => {
-      const f = h / (i.length - 1) * 100, v = 100 - (a.value - c) / x * 80;
-      return `${f},${v}`;
+    const f = i.map((d) => d.value), x = Math.min(...f), l = Math.max(...f) - x || 1, g = i.map((d, B) => {
+      const h = B / (i.length - 1) * 100, S = 100 - (d.value - x) / l * 80;
+      return `${h},${S}`;
     }).join(" ");
     return /* @__PURE__ */ t(
       "svg",
@@ -1079,9 +1080,9 @@ const V = {
         preserveAspectRatio: "none",
         style: { width: "100%", height: "100%" },
         children: [
-          [0, 25, 50, 75, 100].map((a) => /* @__PURE__ */ e("line", { x1: "0", y1: a, x2: "100", y2: a, stroke: "#333", strokeWidth: "0.5" }, a)),
-          o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e("polygon", { points: `0,100 ${k} 100,100`, fill: "rgba(59, 130, 246, 0.2)" }) : null,
-          /* @__PURE__ */ e("polyline", { points: k, fill: "none", stroke: "#3b82f6", strokeWidth: "1" })
+          [0, 25, 50, 75, 100].map((d) => /* @__PURE__ */ e("line", { x1: "0", y1: d, x2: "100", y2: d, stroke: "var(--nice-text, #333)", strokeWidth: "0.5" }, d)),
+          o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e("polygon", { points: `0,100 ${g} 100,100`, fill: "var(--nice-primary-tint-20, rgba(59, 130, 246, 0.2))" }) : null,
+          /* @__PURE__ */ e("polyline", { points: g, fill: "none", stroke: "var(--nice-primary, #3b82f6)", strokeWidth: "1" })
         ]
       }
     );
@@ -1096,16 +1097,16 @@ const V = {
   return /* @__PURE__ */ t(
     "div",
     {
-      className: `nice-metrics-dashboard ${q || ""}`,
+      className: `nice-metrics-dashboard ${H || ""}`,
       style: {
         display: "flex",
         flexDirection: "column",
         height: "100%",
         background: "var(--bg-elevated, #1e1e1e)",
         color: "var(--text-primary, #e0e0e0)",
-        ...L
+        ...R
       },
-      "data-testid": I,
+      "data-testid": L,
       children: [
         /* @__PURE__ */ t(
           "div",
@@ -1120,7 +1121,7 @@ const V = {
             },
             children: [
               /* @__PURE__ */ e("span", { style: { fontSize: "20px" }, children: "📊" }),
-              /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: p.name }),
+              /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: u.name }),
               /* @__PURE__ */ e("div", { style: { flex: 1 } }),
               m.length > 0 && /* @__PURE__ */ t(
                 "button",
@@ -1133,7 +1134,7 @@ const V = {
                     padding: "6px 12px",
                     borderRadius: "4px",
                     border: "none",
-                    background: "#ef444422",
+                    background: "var(--nice-danger-tint-15, #ef444422)",
                     color: "var(--color-error, #ef4444)",
                     cursor: "pointer",
                     fontSize: "12px"
@@ -1149,9 +1150,9 @@ const V = {
               /* @__PURE__ */ e(
                 "select",
                 {
-                  value: p.timeRange.display,
+                  value: u.timeRange.display,
                   onChange: (o) => {
-                    const n = u.find((i) => i.display === o.target.value);
+                    const n = v.find((i) => i.display === o.target.value);
                     n && A(n);
                   },
                   style: {
@@ -1162,13 +1163,13 @@ const V = {
                     color: "var(--bg-primary, #fff)",
                     fontSize: "12px"
                   },
-                  children: u.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
+                  children: v.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
                 }
               ),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: R,
+                  onClick: C,
                   style: {
                     padding: "6px 12px",
                     borderRadius: "4px",
@@ -1181,11 +1182,11 @@ const V = {
                   children: "🔄 Refresh"
                 }
               ),
-              y ? /* @__PURE__ */ t(X, { children: [
+              y ? /* @__PURE__ */ t(J, { children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: _,
+                    onClick: F,
                     style: {
                       padding: "6px 12px",
                       borderRadius: "4px",
@@ -1201,7 +1202,7 @@ const V = {
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: Q,
+                    onClick: P,
                     style: {
                       padding: "6px 12px",
                       borderRadius: "4px",
@@ -1234,7 +1235,7 @@ const V = {
             ]
           }
         ),
-        p.variables.length > 0 && G && /* @__PURE__ */ e(
+        u.variables.length > 0 && Q && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1245,7 +1246,7 @@ const V = {
               borderBottom: "1px solid var(--border-color, #333)",
               background: "var(--bg-elevated, #252525)"
             },
-            children: p.variables.map((o) => {
+            children: u.variables.map((o) => {
               var n;
               return /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
                 /* @__PURE__ */ t("label", { style: { fontSize: "11px", color: "var(--text-muted, #888)" }, children: [
@@ -1297,7 +1298,7 @@ const V = {
               gridAutoRows: "minmax(100px, auto)",
               gap: "16px"
             },
-            children: p.panels.map((o) => /* @__PURE__ */ t(
+            children: u.panels.map((o) => /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -1306,7 +1307,7 @@ const V = {
                   background: "var(--bg-elevated, #252525)",
                   borderRadius: "8px",
                   overflow: "hidden",
-                  border: B === o.id ? "2px solid #3b82f6" : "1px solid var(--border-color, #333)"
+                  border: I === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--border-color, #333)"
                 },
                 children: [
                   /* @__PURE__ */ t(
@@ -1321,11 +1322,11 @@ const V = {
                       },
                       children: [
                         /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
-                        y && /* @__PURE__ */ t(X, { children: [
+                        y && /* @__PURE__ */ t(J, { children: [
                           /* @__PURE__ */ e(
                             "button",
                             {
-                              onClick: () => O(o),
+                              onClick: () => E(o),
                               style: {
                                 padding: "2px 6px",
                                 marginLeft: "4px",
@@ -1342,7 +1343,7 @@ const V = {
                           /* @__PURE__ */ e(
                             "button",
                             {
-                              onClick: () => H(o.id),
+                              onClick: () => V(o.id),
                               style: {
                                 padding: "2px 6px",
                                 marginLeft: "4px",
@@ -1360,7 +1361,7 @@ const V = {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: M(o) })
+                  /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: q(o) })
                 ]
               },
               o.id
@@ -1373,7 +1374,7 @@ const V = {
             style: {
               position: "fixed",
               inset: 0,
-              background: "rgba(0,0,0,0.7)",
+              background: "var(--nice-overlay-70, rgba(0, 0, 0, 0.7))",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -1454,7 +1455,7 @@ const V = {
                                         marginLeft: "auto",
                                         padding: "2px 8px",
                                         borderRadius: "4px",
-                                        background: o.status === "firing" ? "#ef444422" : "#22c55e22",
+                                        background: o.status === "firing" ? "var(--nice-danger-tint-15, #ef444422)" : "var(--nice-success-tint-15, #22c55e22)",
                                         color: o.status === "firing" ? "var(--color-error, #ef4444)" : "var(--color-success, #22c55e)",
                                         fontSize: "10px"
                                       },
@@ -1516,10 +1517,10 @@ const V = {
                                   children: "Acknowledge"
                                 }
                               ),
-                              C && /* @__PURE__ */ e(
+                              z && /* @__PURE__ */ e(
                                 "button",
                                 {
-                                  onClick: () => C(o.id, 36e5),
+                                  onClick: () => z(o.id, 36e5),
                                   style: {
                                     padding: "4px 12px",
                                     borderRadius: "4px",
@@ -1556,6 +1557,6 @@ const V = {
   );
 };
 export {
-  ae as NiceLogExplorer,
+  de as NiceLogExplorer,
   le as NiceMetricsDashboard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-monitoring",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "Nice2Dev UI Monitoring - Observability React components: MetricsDashboard (Grafana-style), LogExplorer (Loki-style)",
   "type": "module",
   "sideEffects": [
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@nice2dev/ui": "1.0.11",
+    "@nice2dev/ui": "^1.0.14",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },