@zerotal/monitor 1.0.0

package/src/ui/charts.tsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource @zerotal/flow */
+import type { HtmlNode } from "@zerotal/flow";
+
+/** Build a polyline points string normalised to a w×h box. */
+export function sparkPoints(s: number[], w: number, h: number): string {
+  if (s.length === 0) return "";
+  const max = Math.max(...s);
+  const min = Math.min(...s);
+  const r = max - min || 1;
+  return s
+    .map(
+      (v, i) => `${((i / (s.length - 1)) * w).toFixed(1)},${(h - ((v - min) / r) * h).toFixed(1)}`,
+    )
+    .join(" ");
+}
+
+/** Build line + filled-area paths for an area chart normalised to a w×h box. */
+export function areaPaths(s: number[], w: number, h: number): { line: string; area: string } {
+  if (s.length === 0) return { line: "", area: "" };
+  const max = Math.max(...s) * 1.15 || 1;
+  const pts = s.map((v, i) => [(i / (s.length - 1)) * w, h - (v / max) * h] as const);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
+  return { line, area: `${line} L${w} ${h} L0 ${h} Z` };
+}
+
+interface SparklineProps {
+  series: number[];
+  w?: number;
+  h?: number;
+  stroke?: string;
+  class?: string;
+}
+
+/** A compact sparkline SVG. */
+export function Sparkline(props: SparklineProps): HtmlNode {
+  const w = props.w ?? 120;
+  const h = props.h ?? 30;
+  return (
+    <svg
+      class={props.class ?? "w-full h-8"}
+      viewBox={`0 0 ${w} ${h + 2}`}
+      preserveAspectRatio="none"
+    >
+      <polyline
+        points={sparkPoints(props.series, w, h)}
+        fill="none"
+        stroke={props.stroke ?? "hsl(var(--primary))"}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        vector-effect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}

package/src/ui/icons.ts

@@ -0,0 +1,32 @@
+/** Inline SVG icon markup for the sidebar nav (rendered via dangerouslySetInnerHTML). */
+export const icons: Record<string, string> = {
+  overview:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="2.5" width="6" height="6" rx="1"/><rect x="11.5" y="2.5" width="6" height="6" rx="1"/><rect x="2.5" y="11.5" width="6" height="6" rx="1"/><rect x="11.5" y="11.5" width="6" height="6" rx="1"/></svg>',
+  requests:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h14M3 10h14M3 14h14"/><circle cx="6" cy="6" r="0.4" fill="currentColor"/></svg>',
+  exceptions:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5L18 16H2z"/><line x1="10" y1="8" x2="10" y2="11.5"/><circle cx="10" cy="13.6" r="0.4" fill="currentColor"/></svg>',
+  queues:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="5" x2="17" y2="5"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="15" x2="11" y2="15"/></svg>',
+  mail: '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="15" height="12" rx="1.5"/><path d="M3 5l7 5.5L17 5"/></svg>',
+  database:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="10" cy="5" rx="6.5" ry="2"/><path d="M3.5 5v10c0 1.1 2.9 2 6.5 2s6.5-.9 6.5-2V5"/><path d="M3.5 10c0 1.1 2.9 2 6.5 2s6.5-.9 6.5-2"/></svg>',
+  cache:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11.5 2L5 11h4.5l-1.5 7 7.5-10H11z"/></svg>',
+  system:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5l6 3v4c0 4-2.7 7.5-6 8.5C6.7 17 4 13.5 4 9.5v-4z"/><path d="M7.5 10l1.8 1.8L13 8"/></svg>',
+  logo: '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5l6 3v8l-6 3-6-3v-8z"/><path d="M4 5.5l6 3 6-3M10 8.5v8"/></svg>',
+  security:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"/><path d="M7 9V6.5a3 3 0 0 1 6 0V9"/></svg>',
+  realtime:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13a6 6 0 0 1 0-6M15 7a6 6 0 0 1 0 6M3 15a9 9 0 0 1 0-10M17 5a9 9 0 0 1 0 10"/><circle cx="10" cy="10" r="1.4" fill="currentColor"/></svg>',
+  logs: '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M6.5 7.5h7M6.5 10h7M6.5 12.5h4"/></svg>',
+  alerts:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3a4.5 4.5 0 0 0-4.5 4.5c0 4-1.5 5.5-1.5 5.5h12s-1.5-1.5-1.5-5.5A4.5 4.5 0 0 0 10 3z"/><path d="M8.5 16a1.5 1.5 0 0 0 3 0"/></svg>',
+  route:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="15" r="2"/><circle cx="15" cy="5" r="2"/><path d="M7 15h5a3 3 0 0 0 0-6H8a3 3 0 0 1 0-6h5"/></svg>',
+  notifications:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3L9 11"/><path d="M17 3l-5 14-3-6-6-3z"/></svg>',
+  commands:
+    '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"/><path d="M6 8l2.5 2L6 12M10.5 12.5h3.5"/></svg>',
+};

package/src/ui/tones.ts

@@ -0,0 +1,78 @@
+/**
+ * Value → colour mappings shared across the panel.
+ *
+ * Everything here resolves to flow-ui design tokens rather than literal palette
+ * classes, so the panel re-themes (and follows dark mode) wherever it is used.
+ * Semantic states use `success` / `warning` / `destructive`; the span colours are
+ * categorical and use the theme's chart palette instead — "middleware" isn't good
+ * or bad, it just has to stay distinguishable from "query".
+ */
+import type { Tone } from "../store/types.ts";
+
+export function toneText(tone: Tone | undefined): string {
+  switch (tone) {
+    case "ok":
+      return "text-success";
+    case "warn":
+      return "text-warning";
+    case "bad":
+      return "text-destructive";
+    default:
+      return "text-foreground";
+  }
+}
+
+export function methodTone(m: string): string {
+  return (
+    (
+      {
+        GET: "bg-primary/10 text-primary",
+        POST: "bg-success/10 text-success",
+        PUT: "bg-warning/10 text-warning",
+        PATCH: "bg-warning/10 text-warning",
+        DELETE: "bg-destructive/10 text-destructive",
+      } as Record<string, string>
+    )[m] ?? "bg-muted text-muted-foreground"
+  );
+}
+
+export function statusTone(s: number): string {
+  if (s < 300) return "text-success";
+  if (s < 400) return "text-primary";
+  if (s < 500) return "text-warning";
+  return "text-destructive";
+}
+
+export function pctTone(ms: number): string {
+  return ms > 500 ? "text-destructive" : ms > 200 ? "text-warning" : "text-foreground";
+}
+
+/**
+ * Colour for a trace span, by kind.
+ *
+ * Returned as a raw CSS colour rather than a class because these are applied to
+ * SVG `fill`/`stroke` and inline widths, which Tailwind utilities can't reach.
+ */
+export function spanColor(kind: string): string {
+  return (
+    (
+      {
+        boot: "hsl(var(--muted-foreground))",
+        middleware: "hsl(var(--chart-5))",
+        controller: "hsl(var(--chart-2))",
+        query: "hsl(var(--chart-3))",
+        cache: "hsl(var(--chart-4))",
+        http: "hsl(var(--chart-6))",
+        view: "hsl(var(--chart-7))",
+      } as Record<string, string>
+    )[kind] ?? "hsl(var(--muted-foreground))"
+  );
+}
+
+export function gaugeBar(value: number): string {
+  return value > 85 ? "bg-destructive" : value > 65 ? "bg-warning" : "bg-primary";
+}
+
+export function gaugeText(value: number): string {
+  return value > 85 ? "text-destructive" : value > 65 ? "text-warning" : "text-foreground";
+}